From e541696d160fa2f8d4f0945fb0a1d96b5210d103 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 1 Aug 2022 08:59:39 -0400
Subject: [PATCH 001/469] docs(datetime-button): add base usage example (#2464)

---
 docs/api/datetime-button.md                   | 76 +++++++++++++++++++
 docs/api/datetime.md                          |  4 +
 sidebars.js                                   |  2 +-
 static/usage/datetime-button/basic/angular.md |  9 +++
 static/usage/datetime-button/basic/demo.html  | 30 ++++++++
 static/usage/datetime-button/basic/index.md   |  8 ++
 .../usage/datetime-button/basic/javascript.md |  7 ++
 static/usage/datetime-button/basic/react.md   | 14 ++++
 static/usage/datetime-button/basic/vue.md     | 18 +++++
 9 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 docs/api/datetime-button.md
 create mode 100644 static/usage/datetime-button/basic/angular.md
 create mode 100644 static/usage/datetime-button/basic/demo.html
 create mode 100644 static/usage/datetime-button/basic/index.md
 create mode 100644 static/usage/datetime-button/basic/javascript.md
 create mode 100644 static/usage/datetime-button/basic/react.md
 create mode 100644 static/usage/datetime-button/basic/vue.md

diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
new file mode 100644
index 00000000000..d13e5dcdf0d
--- /dev/null
+++ b/docs/api/datetime-button.md
@@ -0,0 +1,76 @@
+---
+title: "ion-datetime-button"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+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';
+import APITOCInline from '@components/page/api/APITOCInline';
+
+<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/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/docs/api/datetime.md b/docs/api/datetime.md
index 9770cef8b7e..4e051a731af 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -94,6 +94,10 @@ While seconds and milliseconds can be specified using the ISO 8601 datetime form
 
 <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
diff --git a/sidebars.js b/sidebars.js
index 4ab111c7ae3..e6231ae0a68 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -287,7 +287,7 @@ module.exports = {
       type: 'category',
       label: 'Date & Time Pickers',
       collapsed: false,
-      items: ['api/datetime', 'api/picker'],
+      items: ['api/datetime', 'api/datetime-button', 'api/picker'],
     },
     {
       type: 'category',
diff --git a/static/usage/datetime-button/basic/angular.md b/static/usage/datetime-button/basic/angular.md
new file mode 100644
index 00000000000..80a6ffe3724
--- /dev/null
+++ b/static/usage/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/datetime-button/basic/demo.html b/static/usage/datetime-button/basic/demo.html
new file mode 100644
index 00000000000..8271b6ee9cf
--- /dev/null
+++ b/static/usage/datetime-button/basic/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.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
new file mode 100644
index 00000000000..55e9b3155a1
--- /dev/null
+++ b/static/usage/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/datetime-button/basic/demo.html" />
diff --git a/static/usage/datetime-button/basic/javascript.md b/static/usage/datetime-button/basic/javascript.md
new file mode 100644
index 00000000000..3b39203bb90
--- /dev/null
+++ b/static/usage/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/datetime-button/basic/react.md b/static/usage/datetime-button/basic/react.md
new file mode 100644
index 00000000000..2fe97bd73a0
--- /dev/null
+++ b/static/usage/datetime-button/basic/react.md
@@ -0,0 +1,14 @@
+```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/datetime-button/basic/vue.md b/static/usage/datetime-button/basic/vue.md
new file mode 100644
index 00000000000..1272d768b88
--- /dev/null
+++ b/static/usage/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>
+```

From fd16a4f58a9f117ea3b5532df86d2bcf71bb63ad Mon Sep 17 00:00:00 2001
From: Amirreza Aliakbari <mwxgaf@gmail.com>
Date: Tue, 2 Aug 2022 18:40:54 +0430
Subject: [PATCH 002/469] docs(vue): fix typo in router.go docs (#2472)

---
 docs/vue/navigation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index f5a995e9e85..e6fe6fc64dd 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -204,7 +204,7 @@ Say you have the following application history:
 
 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`.
 
-An 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.
+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
 

From c8759fd0671de26a3b0fd5d0fe4ee623bf585345 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 2 Aug 2022 10:31:35 -0400
Subject: [PATCH 003/469] fix(playground): order framework buttons
 alphabetically (#2475)

---
 src/components/global/Playground/index.tsx | 28 ++++++++++++----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 889a1326a64..8951c59f7cd 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import './playground.css';
@@ -115,7 +115,7 @@ export default function Playground({
    * or an explicit pixel value.
    */
   const frameSize = FRAME_SIZES[size] || size;
-  const [usageTarget, setUsageTarget] = useState(UsageTarget.JavaScript);
+  const [usageTarget, setUsageTarget] = useState(UsageTarget.Angular);
   const [mode, setMode] = useState(Mode.iOS);
   const [codeSnippets, setCodeSnippets] = useState({});
   const [renderIframes, setRenderIframes] = useState(false);
@@ -322,16 +322,20 @@ export default function Playground({
 
   function renderLoadingScreen() {
     return (
-      <div class="playground__loading"><IconDots /></div>
-    )
+      <div className="playground__loading">
+        <IconDots />
+      </div>
+    );
   }
 
+  const sortedUsageTargets = useMemo(() => Object.keys(UsageTarget).sort(), []);
+
   return (
     <div className="playground" ref={hostRef}>
       <div className="playground__container">
         <div className="playground__control-toolbar">
           <div className="playground__control-group">
-            {Object.keys(UsageTarget).map((lang) => (
+            {sortedUsageTargets.map((lang) => (
               <CodeBlockButton
                 key={`code-block-${lang}`}
                 language={lang}
@@ -439,10 +443,11 @@ export default function Playground({
             </Tippy>
           </div>
         </div>
-        { renderIframes ? [
-          <div className="playground__preview">
-            {!iframesLoaded && renderLoadingScreen()}
-            {/*
+        {renderIframes
+          ? [
+              <div className="playground__preview">
+                {!iframesLoaded && renderLoadingScreen()}
+                {/*
               We render two iframes, one for each mode.
               When the set mode changes, we hide one frame and
               show the other. This is done to avoid flickering
@@ -479,10 +484,7 @@ export default function Playground({
             ]
           : []}
       </div>
-      <div
-        ref={codeRef}
-        className='playground__code-block'
-      >
+      <div ref={codeRef} className="playground__code-block">
         {renderCodeSnippets()}
       </div>
     </div>

From 34b5d07192b7ecef128c0b127242c216716d41b5 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 3 Aug 2022 13:40:33 -0400
Subject: [PATCH 004/469] feat(playground): auto-inject ion-content and ion-app
 (#2440)

---
 src/components/global/Playground/README.md    |  69 ++++++++++
 src/components/global/Playground/index.tsx    |  22 +++-
 .../global/Playground/stackblitz.utils.ts     |  40 +++---
 .../stackblitz/angular/app.component.html     |   3 +
 .../angular/app.component.withContent.html    |   5 +
 static/code/stackblitz/angular/app.module.ts  |   6 +-
 .../stackblitz/angular/example.component.ts   |   8 ++
 static/code/stackblitz/html/index.html        |   7 +-
 .../stackblitz/html/index.withContent.html    |  16 +++
 static/code/stackblitz/react/app.tsx          |   8 +-
 .../code/stackblitz/react/app.withContent.tsx |  28 ++++
 .../code/stackblitz/vue/App.withContent.vue   |  20 +++
 .../accessibility/animations/angular.md       |  48 +++----
 .../accessibility/animations/javascript.md    |   2 -
 .../accessibility/animations/react.md         |  62 ++++-----
 .../accordion/accessibility/animations/vue.md |  66 ++++------
 .../angular/angular-ts.md                     |  11 +-
 .../advanced-expansion-styles/index.md        |  12 +-
 .../react/react-ts.md                         |   9 +-
 .../accordion/customization/icons/angular.md  |  48 +++----
 .../customization/theming/angular.md          |  30 -----
 .../accordion/customization/theming/index.md  |   6 +-
 .../usage/accordion/disable-group/angular.md  |  48 +++----
 .../accordion/disable-group/javascript.md     |  48 +++----
 static/usage/accordion/disable-group/react.md |  62 ++++-----
 static/usage/accordion/disable-group/vue.md   |  66 ++++------
 .../usage/accordion/disable/group/angular.md  |  48 +++----
 .../accordion/disable/group/javascript.md     |  48 +++----
 static/usage/accordion/disable/group/react.md |  62 ++++-----
 static/usage/accordion/disable/group/vue.md   |  66 ++++------
 .../accordion/disable/individual/angular.md   |  48 +++----
 .../disable/individual/javascript.md          |  48 +++----
 .../accordion/disable/individual/react.md     |  62 ++++-----
 .../usage/accordion/disable/individual/vue.md |  66 ++++------
 .../accordion/listen-changes/angular-html.md  |  52 ++++----
 .../accordion/listen-changes/angular-ts.md    |  18 +--
 .../usage/accordion/listen-changes/index.md   |   8 +-
 .../accordion/listen-changes/javascript.md    |  54 ++++----
 .../usage/accordion/listen-changes/react.md   |  29 ++---
 static/usage/accordion/listen-changes/vue.md  |  86 ++++++------
 static/usage/accordion/multiple/angular.md    |  48 +++----
 static/usage/accordion/multiple/javascript.md |  48 +++----
 static/usage/accordion/multiple/react.md      |  68 +++++-----
 static/usage/accordion/multiple/vue.md        |  27 +---
 static/usage/accordion/toggle/angular-html.md |  52 ++++----
 static/usage/accordion/toggle/angular-ts.md   |  10 +-
 static/usage/accordion/toggle/index.md        |   8 +-
 static/usage/accordion/toggle/javascript.md   |  54 ++++----
 static/usage/accordion/toggle/react.md        |  19 +--
 static/usage/accordion/toggle/vue.md          |  80 +++++-------
 .../usage/alert/buttons/angular/angular_ts.md |  20 +--
 static/usage/alert/buttons/index.md           |  10 +-
 static/usage/alert/buttons/react.md           |  48 ++++---
 static/usage/alert/buttons/vue.md             |  76 +++++------
 .../alert/customization/angular/angular_ts.md |  16 +--
 static/usage/alert/customization/index.md     |  10 +-
 .../alert/customization/react/react_ts.md     |  38 +++---
 static/usage/alert/customization/vue.md       |  20 ++-
 .../alert/inputs/radios/angular/angular_ts.md |  18 +--
 static/usage/alert/inputs/radios/index.md     |  10 +-
 static/usage/alert/inputs/radios/react.md     |  52 ++++----
 static/usage/alert/inputs/radios/vue.md       |  64 +++++----
 .../inputs/text-inputs/angular/angular_ts.md  |  22 ++--
 .../usage/alert/inputs/text-inputs/index.md   |  10 +-
 .../usage/alert/inputs/text-inputs/react.md   |  60 +++++----
 static/usage/alert/inputs/text-inputs/vue.md  |  72 +++++------
 .../controller/angular/angular_ts.md          |  10 +-
 .../alert/presenting/controller/index.md      |  10 +-
 .../alert/presenting/controller/react.md      |  22 ++--
 .../usage/alert/presenting/controller/vue.md  |  34 +++--
 .../expand-on-click/angular/angular_ts.md     |   6 +-
 .../collapsing-items/expand-on-click/index.md |  10 +-
 .../items-before-after/react.md               |   6 +-
 .../items-before-after/vue.md                 |  78 ++++++-----
 .../popover-on-click/angular/angular_ts.md    |   6 +-
 .../popover-on-click/index.md                 |  10 +-
 .../breadcrumbs/icons/icons-on-items/react.md |   6 +-
 .../breadcrumbs/icons/icons-on-items/vue.md   |  84 ++++++------
 .../breadcrumbs/styling/css-props/index.md    |  14 +-
 .../date-constraints/advanced/angular-ts.md   |  12 +-
 .../date-constraints/advanced/index.md        |  26 ++--
 static/usage/datetime/theming/angular-css.md  |  28 +++-
 static/usage/datetime/theming/index.md        |  18 +--
 static/usage/loading/controller/angular/ts.md |  10 +-
 static/usage/loading/controller/index.md      |  25 ++--
 static/usage/loading/spinners/angular/ts.md   |  10 +-
 static/usage/loading/spinners/index.md        |  25 ++--
 static/usage/loading/theming/angular/ts.md    |  10 +-
 static/usage/loading/theming/index.md         |  37 +++---
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 .../usage/modal/can-dismiss/boolean/index.md  |   8 +-
 .../modal/can-dismiss/boolean/javascript.md   |  56 ++++----
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 .../usage/modal/can-dismiss/function/index.md |   8 +-
 .../modal/can-dismiss/function/javascript.md  |  50 ++++---
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 static/usage/modal/card/basic/index.md        |   8 +-
 static/usage/modal/card/basic/javascript.md   | 122 +++++++++---------
 .../modal/controller/angular/app_module_ts.md |   4 +-
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 static/usage/modal/controller/index.md        |   9 +-
 static/usage/modal/controller/javascript.md   |  20 ++-
 .../angular/app_component_html.md             |  35 -----
 .../angular/example_component_html.md         |  33 +++++
 static/usage/modal/custom-dialogs/index.md    |   5 +-
 .../usage/modal/custom-dialogs/javascript.md  |  72 +++++------
 .../basic/angular/app_component_html.md       |  34 -----
 .../inline/basic/angular/app_module_ts.md     |  16 ---
 .../basic/angular/example_component_html.md   |  32 +++++
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 static/usage/modal/inline/basic/index.md      |  11 +-
 static/usage/modal/inline/basic/javascript.md |  59 +++++----
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 static/usage/modal/inline/is-open/index.md    |   9 +-
 .../usage/modal/inline/is-open/javascript.md  |  52 ++++----
 .../usage/modal/performance/mount/demo.html   |  11 +-
 static/usage/modal/performance/mount/index.md |   3 +-
 .../modal/performance/mount/javascript.md     |  19 +--
 ...ponent_css.md => example_component_css.md} |   0
 ...nent_html.md => example_component_html.md} |   4 +-
 ...omponent_ts.md => example_component_ts.md} |   8 +-
 .../modal/sheet/background-content/index.md   |  13 +-
 .../sheet/background-content/javascript.md    | 114 ++++++++--------
 static/usage/modal/sheet/basic/angular.md     | 108 ++++++++--------
 static/usage/modal/sheet/basic/index.md       |   1 +
 static/usage/modal/sheet/basic/javascript.md  | 104 ++++++++-------
 .../modal/sheet/handle-behavior/angular.md    |  46 ++++---
 .../modal/sheet/handle-behavior/index.md      |   1 +
 .../modal/sheet/handle-behavior/javascript.md |  32 +++--
 .../animations/angular/app_component_html.md  |  65 ----------
 .../angular/example_component_html.md         |  63 +++++++++
 ...omponent_ts.md => example_component_ts.md} |   7 +-
 .../usage/modal/styling/animations/index.md   |   9 +-
 .../usage/modal/styling/animations/react.md   |   2 +-
 .../theming/angular/app_component_html.md     |  63 ---------
 .../theming/angular/example_component_html.md |  61 +++++++++
 .../angular/{angular_css.md => global_css.md} |   0
 static/usage/modal/styling/theming/index.md   |   9 +-
 .../modal/styling/theming/react/main_tsx.md   |   2 +-
 .../angular/app_component_html.md             |   5 -
 .../angular/example_component_html.md         |   3 +
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 static/usage/picker/multiple-column/index.md  |   8 +-
 .../picker/multiple-column/javascript.md      |   7 +-
 static/usage/picker/multiple-column/react.md  |  10 +-
 static/usage/picker/multiple-column/vue.md    |   8 +-
 .../angular/app_component_html.md             |   5 -
 .../angular/example_component_html.md         |   3 +
 ...omponent_ts.md => example_component_ts.md} |   6 +-
 static/usage/picker/single-column/index.md    |   8 +-
 .../usage/picker/single-column/javascript.md  |   7 +-
 static/usage/picker/single-column/react.md    |  10 +-
 static/usage/picker/single-column/vue.md      |   8 +-
 .../positioning/angular/angular_ts.md         |  11 +-
 .../customization/positioning/index.md        |  16 +--
 .../popover/customization/sizing/react.md     |   4 +-
 .../usage/popover/customization/sizing/vue.md |  22 ++--
 .../popover/customization/styling/index.md    |   8 +-
 .../customization/styling/react/react_ts.md   |   4 +-
 .../popover/customization/styling/vue.md      |  14 +-
 static/usage/popover/nested/react.md          |  20 ++-
 static/usage/popover/nested/vue.md            |  40 +++---
 .../controller/angular/angular_module.md      |  11 +-
 .../controller/angular/angular_popover_ts.md  |   8 +-
 .../controller/angular/angular_ts.md          |  14 +-
 .../popover/presenting/controller/index.md    |  16 +--
 .../popover/presenting/controller/react.md    |  20 ++-
 .../presenting/controller/vue/vue_main.md     |  48 ++++---
 .../inline-isopen/angular/angular_ts.md       |   7 +-
 .../popover/presenting/inline-isopen/index.md |  10 +-
 .../popover/presenting/inline-isopen/react.md |   4 +-
 .../popover/presenting/inline-isopen/vue.md   |  22 ++--
 .../presenting/inline-trigger/react.md        |   4 +-
 .../popover/presenting/inline-trigger/vue.md  |  26 ++--
 static/usage/range/basic/angular.md           |   4 +-
 static/usage/range/basic/javascript.md        |   6 +-
 static/usage/range/basic/react.md             |   8 +-
 static/usage/range/basic/vue.md               |   8 +-
 .../angular/app_component_html.md             |   5 -
 ...ponent_css.md => example_component_css.md} |   0
 .../angular/example_component_html.md         |   3 +
 static/usage/range/css-shadow-parts/index.md  |   8 +-
 .../range/css-shadow-parts/javascript.md      |   6 +-
 .../range/css-shadow-parts/react/main_tsx.md  |   8 +-
 static/usage/range/css-shadow-parts/vue.md    |   8 +-
 .../angular/app_component_html.md             |   5 -
 ...ponent_css.md => example_component_css.md} |   0
 .../angular/example_component_html.md         |   3 +
 static/usage/range/css-variables/index.md     |   8 +-
 .../usage/range/css-variables/javascript.md   |   6 +-
 .../range/css-variables/react/main_tsx.md     |   8 +-
 static/usage/range/css-variables/vue.md       |   8 +-
 static/usage/range/dual-knobs/angular.md      |   4 +-
 static/usage/range/dual-knobs/javascript.md   |   6 +-
 static/usage/range/dual-knobs/react.md        |  18 ++-
 static/usage/range/dual-knobs/vue.md          |   4 +-
 .../angular/app_component_html.md             |   6 -
 .../angular/example_component_html.md         |   4 +
 ...omponent_ts.md => example_component_ts.md} |   7 +-
 static/usage/range/ion-change-event/index.md  |   8 +-
 .../range/ion-change-event/javascript.md      |   8 +-
 static/usage/range/ion-change-event/react.md  |   6 +-
 static/usage/range/ion-change-event/vue.md    |  10 +-
 .../angular/app_component_html.md             |  11 --
 .../angular/example_component_html.md         |   9 ++
 ...omponent_ts.md => example_component_ts.md} |   7 +-
 .../usage/range/ion-knob-move-event/index.md  |   8 +-
 .../range/ion-knob-move-event/javascript.md   |  18 +--
 .../usage/range/ion-knob-move-event/react.md  |   6 +-
 static/usage/range/ion-knob-move-event/vue.md |  20 ++-
 .../range/pins/angular/app_component_html.md  |   5 -
 .../pins/angular/example_component_html.md    |   3 +
 ...omponent_ts.md => example_component_ts.md} |   7 +-
 static/usage/range/pins/index.md              |   8 +-
 static/usage/range/pins/javascript.md         |   6 +-
 static/usage/range/pins/react.md              |   8 +-
 static/usage/range/pins/vue.md                |   8 +-
 static/usage/range/snapping-ticks/angular.md  |   4 +-
 .../usage/range/snapping-ticks/javascript.md  |   6 +-
 static/usage/range/snapping-ticks/react.md    |   8 +-
 static/usage/range/snapping-ticks/vue.md      |   8 +-
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |   9 +-
 .../basic/responding-to-interaction/index.md  |  14 +-
 .../basic/responding-to-interaction/react.md  |   8 +-
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |  15 +--
 .../customization/interface-options/index.md  |  14 +-
 .../styling-select/angular/angular-ts.md      |  11 +-
 .../customization/styling-select/index.md     |  16 +--
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |  27 ++--
 .../multiple-selection/index.md               |  14 +-
 .../multiple-selection/react.md               |  38 +++---
 ...nent_html.md => example_component_html.md} |   0
 ...omponent_ts.md => example_component_ts.md} |  23 ++--
 .../using-comparewith/index.md                |  14 +-
 .../using-comparewith/react.md                |  34 +++--
 243 files changed, 2550 insertions(+), 2769 deletions(-)
 create mode 100644 src/components/global/Playground/README.md
 create mode 100644 static/code/stackblitz/angular/app.component.html
 create mode 100644 static/code/stackblitz/angular/app.component.withContent.html
 create mode 100644 static/code/stackblitz/angular/example.component.ts
 create mode 100644 static/code/stackblitz/html/index.withContent.html
 create mode 100644 static/code/stackblitz/react/app.withContent.tsx
 create mode 100644 static/code/stackblitz/vue/App.withContent.vue
 delete mode 100644 static/usage/accordion/customization/theming/angular.md
 rename static/usage/modal/can-dismiss/boolean/angular/{app_component_html.md => example_component_html.md} (100%)
 rename static/usage/modal/can-dismiss/boolean/angular/{app_component_ts.md => example_component_ts.md} (79%)
 rename static/usage/modal/can-dismiss/function/angular/{app_component_html.md => example_component_html.md} (100%)
 rename static/usage/modal/can-dismiss/function/angular/{app_component_ts.md => example_component_ts.md} (87%)
 rename static/usage/modal/card/basic/angular/{app_component_html.md => example_component_html.md} (100%)
 rename static/usage/modal/card/basic/angular/{app_component_ts.md => example_component_ts.md} (70%)
 rename static/usage/modal/controller/angular/{app_component_html.md => example_component_html.md} (100%)
 rename static/usage/modal/controller/angular/{app_component_ts.md => example_component_ts.md} (85%)
 delete mode 100644 static/usage/modal/custom-dialogs/angular/app_component_html.md
 create mode 100644 static/usage/modal/custom-dialogs/angular/example_component_html.md
 delete mode 100644 static/usage/modal/inline/basic/angular/app_component_html.md
 delete mode 100644 static/usage/modal/inline/basic/angular/app_module_ts.md
 create mode 100644 static/usage/modal/inline/basic/angular/example_component_html.md
 rename static/usage/modal/inline/basic/angular/{app_component_ts.md => example_component_ts.md} (87%)
 rename static/usage/modal/inline/is-open/angular/{app_component_html.md => example_component_html.md} (100%)
 rename static/usage/modal/inline/is-open/angular/{app_component_ts.md => example_component_ts.md} (61%)
 rename static/usage/modal/sheet/background-content/angular/{app_component_css.md => example_component_css.md} (100%)
 rename static/usage/modal/sheet/background-content/angular/{app_component_html.md => example_component_html.md} (98%)
 rename static/usage/modal/sheet/background-content/angular/{app_component_ts.md => example_component_ts.md} (53%)
 delete mode 100644 static/usage/modal/styling/animations/angular/app_component_html.md
 create mode 100644 static/usage/modal/styling/animations/angular/example_component_html.md
 rename static/usage/modal/styling/animations/angular/{app_component_ts.md => example_component_ts.md} (89%)
 delete mode 100644 static/usage/modal/styling/theming/angular/app_component_html.md
 create mode 100644 static/usage/modal/styling/theming/angular/example_component_html.md
 rename static/usage/modal/styling/theming/angular/{angular_css.md => global_css.md} (100%)
 delete mode 100644 static/usage/picker/multiple-column/angular/app_component_html.md
 create mode 100644 static/usage/picker/multiple-column/angular/example_component_html.md
 rename static/usage/picker/multiple-column/angular/{app_component_ts.md => example_component_ts.md} (94%)
 delete mode 100644 static/usage/picker/single-column/angular/app_component_html.md
 create mode 100644 static/usage/picker/single-column/angular/example_component_html.md
 rename static/usage/picker/single-column/angular/{app_component_ts.md => example_component_ts.md} (91%)
 delete mode 100644 static/usage/range/css-shadow-parts/angular/app_component_html.md
 rename static/usage/range/css-shadow-parts/angular/{app_component_css.md => example_component_css.md} (100%)
 create mode 100644 static/usage/range/css-shadow-parts/angular/example_component_html.md
 delete mode 100644 static/usage/range/css-variables/angular/app_component_html.md
 rename static/usage/range/css-variables/angular/{app_component_css.md => example_component_css.md} (100%)
 create mode 100644 static/usage/range/css-variables/angular/example_component_html.md
 delete mode 100644 static/usage/range/ion-change-event/angular/app_component_html.md
 create mode 100644 static/usage/range/ion-change-event/angular/example_component_html.md
 rename static/usage/range/ion-change-event/angular/{app_component_ts.md => example_component_ts.md} (70%)
 delete mode 100644 static/usage/range/ion-knob-move-event/angular/app_component_html.md
 create mode 100644 static/usage/range/ion-knob-move-event/angular/example_component_html.md
 rename static/usage/range/ion-knob-move-event/angular/{app_component_ts.md => example_component_ts.md} (76%)
 delete mode 100644 static/usage/range/pins/angular/app_component_html.md
 create mode 100644 static/usage/range/pins/angular/example_component_html.md
 rename static/usage/range/pins/angular/{app_component_ts.md => example_component_ts.md} (51%)
 rename static/usage/select/basic/responding-to-interaction/angular/{app.component_html.md => example_component_html.md} (100%)
 rename static/usage/select/basic/responding-to-interaction/angular/{app.component_ts.md => example_component_ts.md} (69%)
 rename static/usage/select/customization/interface-options/angular/{app.component_html.md => example_component_html.md} (100%)
 rename static/usage/select/customization/interface-options/angular/{app.component_ts.md => example_component_ts.md} (61%)
 rename static/usage/select/objects-as-values/multiple-selection/angular/{app.component_html.md => example_component_html.md} (100%)
 rename static/usage/select/objects-as-values/multiple-selection/angular/{app.component_ts.md => example_component_ts.md} (56%)
 rename static/usage/select/objects-as-values/using-comparewith/angular/{app.component_html.md => example_component_html.md} (100%)
 rename static/usage/select/objects-as-values/using-comparewith/angular/{app.component_ts.md => example_component_ts.md} (56%)

diff --git a/src/components/global/Playground/README.md b/src/components/global/Playground/README.md
new file mode 100644
index 00000000000..8f89a5d4719
--- /dev/null
+++ b/src/components/global/Playground/README.md
@@ -0,0 +1,69 @@
+# Playground
+
+The Playground component renders a demo preview of a component experience with code snippets available for each supported framework.
+
+The Playground can be customized per example, to meet the requirements of the component or experience that you are trying to showcase.
+
+## Show example within a device frame (iPhone/Pixel 5)
+
+By default, Playground examples will render in an empty container and fill the available space. Using the `devicePreview` flag, the Playground will render the demo experience within an iPhone device frame when on iOS mode and within a Pixel device frame when on MD.
+
+```tsx
+<Playground devicePreview />
+```
+
+## Multiple File Examples
+
+Playground supports single file and multi-file examples to show the required code to create a sample. To include multiple file examples for a single framework target, use the `files` option to specify the file location (in the Stackblitz generated project) and the file contents.
+
+You can mix multi-file and single file examples together in a single example:
+
+```tsx
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.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 javascript from './javascript.md';
+
+<Playground
+  files={{
+    angular: {
+      'src/app/example.component.html': angular_example_component_html,
+      'src/app/example.component.ts': angular_example_component_ts,
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    javascript,
+    vue,
+  }}
+/>;
+```
+
+The file location is respective to the Stackblitz demo project. If you are unsure of the exact path, refer to the `stackblitz.utils.ts` method for each respective target. The path specified in `sdk.openProject` will coincide with the value used in the `files` configuration.
+
+## Ejecting from IonApp/IonContent Boilerplate
+
+By default, Playground examples will automatically include the following template wrapper for each component example when opened in Stackblitz.
+
+```html
+<ion-app>
+  <ion-content class="ion-padding">
+    <!-- Demo code injected here -->
+  </ion-content>
+</ion-app>
+```
+
+Note: The above code is just a sample. The code will be slightly different based on each framework target.
+
+To opt-out of this behavior, set `includeIonContent={false}` to disable this wrapper. You will be responsible for manually including `ion-content` in your code snippets.
+
+```tsx
+<Playground includeIonContent={false} />
+```
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 8951c59f7cd..d8066bcc302 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -91,6 +91,7 @@ export default function Playground({
   src,
   size = 'small',
   devicePreview,
+  includeIonContent = true,
 }: {
   code: { [key in UsageTarget]?: MdxContent | UsageTargetOptions };
   title?: string;
@@ -98,6 +99,7 @@ export default function Playground({
   size: string;
   description?: string;
   devicePreview?: boolean;
+  includeIonContent: boolean;
 }) {
   if (!code || Object.keys(code).length === 0) {
     console.warn('No code usage examples provided for this Playground example.');
@@ -201,14 +203,19 @@ export default function Playground({
    * Reloads the iOS and MD iframe sources back to their original state.
    */
   function resetDemo() {
-    frameiOS.current.contentWindow.location.reload();
-    frameMD.current.contentWindow.location.reload();
+    if (frameiOS.current) {
+      frameiOS.current.contentWindow.location.reload();
+    }
+    if (frameMD.current) {
+      frameMD.current.contentWindow.location.reload();
+    }
   }
 
   function openEditor(event) {
     const editorOptions: EditorOptions = {
       title,
       description,
+      includeIonContent,
     };
 
     let codeBlock;
@@ -503,12 +510,17 @@ const waitForFrame = (frame: HTMLIFrameElement) => {
   if (isFrameReady(frame)) return Promise.resolve();
 
   return new Promise<void>((resolve) => {
-    frame.contentWindow.addEventListener('demoReady', () => {
-      resolve();
-    });
+    if (frame) {
+      frame.contentWindow.addEventListener('demoReady', () => {
+        resolve();
+      });
+    }
   });
 };
 
 const isFrameReady = (frame: HTMLIFrameElement) => {
+  if (!frame) {
+    return false;
+  }
   return (frame.contentWindow as any).demoReady === true;
 };
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index d387f1526e7..fb24f424c3b 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -22,6 +22,12 @@ export interface EditorOptions {
     [key: string]: string;
   }
 
+  /**
+   * `true` if `ion-app` and `ion-content` should automatically be injected into the
+   * Stackblitz example.
+   */
+  includeIonContent: boolean;
+
   angularModuleOptions?: {
     imports: string[];
     declarations?: string[];
@@ -36,7 +42,7 @@ const loadSourceFiles = async (files: string[]) => {
 const openHtmlEditor = async (code: string, options?: EditorOptions) => {
   const [index_ts, index_html] = await loadSourceFiles([
     'html/index.ts',
-    'html/index.html',
+    options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
   ]);
 
   sdk.openProject({
@@ -44,8 +50,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files: {
-      // Injects our code sample into the body of the HTML document
-      'index.html': index_html.replace(/<body><\/body>/g, `<body>\n` + code + '</body>'),
+      'index.html': index_html.replace(/{{ TEMPLATE }}/g, code),
       'index.ts': index_ts,
       ...options?.files
     },
@@ -56,11 +61,13 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
 }
 
 const openAngularEditor = async (code: string, options?: EditorOptions) => {
-  let [main_ts, app_module_ts, app_component_ts, app_component_css, styles_css, global_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, angular_json, tsconfig_json] = await loadSourceFiles([
     'angular/main.ts',
     'angular/app.module.ts',
     'angular/app.component.ts',
     'angular/app.component.css',
+    options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html',
+    'angular/example.component.ts',
     'angular/styles.css',
     'angular/global.css',
     'angular/angular.json',
@@ -85,7 +92,10 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
       'src/polyfills.ts': `import 'zone.js/dist/zone';`,
       'src/app/app.module.ts': app_module_ts,
       'src/app/app.component.ts': app_component_ts,
-      'src/app/app.component.html': code,
+      'src/app/app.component.html': app_component_html,
+      'src/app/example.component.ts': example_component_ts,
+      'src/app/example.component.html': code,
+      'src/app/example.component.css': '',
       'src/app/app.component.css': app_component_css,
       'src/index.html': '<app-root></app-root>',
       'src/styles.css': styles_css,
@@ -109,28 +119,14 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
 }
 
 const openReactEditor = async (code: string, options?: EditorOptions) => {
-  /**
-   * This controls what the component is imported
-   * as. Since we use "export default" in the actual
-   * component template, this does not need to match
-   * up with the actual component name.
-   */
-  const componentTagName = 'Example';
-
   const [index_tsx, app_tsx, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
     'react/index.tsx',
-    'react/app.tsx',
+    options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
     'react/tsconfig.json',
     'react/package.json',
     'react/package-lock.json'
   ]);
 
-  const app_tsx_renamed = app_tsx
-    // Inserts the component name from the sample into the <IonApp> tag.
-    .replace(/<IonApp><\/IonApp>/g, `<IonApp><${componentTagName} /></IonApp>`)
-    // Imports the component from our `main` example file.
-    .replace(/setupIonicReact\(\);/g, `import ${componentTagName} from "./main";\n\n` + 'setupIonicReact();');
-
   sdk.openProject({
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
@@ -138,7 +134,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     files: {
       'public/index.html': `<div id="root"></div>`,
       'src/index.tsx': index_tsx,
-      'src/App.tsx': app_tsx_renamed,
+      'src/App.tsx': app_tsx,
       'src/main.tsx': code,
       'tsconfig.json': ts_config_json,
       'package.json': package_json,
@@ -158,7 +154,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     'vue/index.html',
     'vue/vite.config.ts',
     'vue/main.ts',
-    'vue/App.vue',
+    options?.includeIonContent ? 'vue/App.withContent.vue' : 'vue/App.vue',
     'vue/tsconfig.json',
     'vue/tsconfig.node.json',
     'vue/env.d.ts'
diff --git a/static/code/stackblitz/angular/app.component.html b/static/code/stackblitz/angular/app.component.html
new file mode 100644
index 00000000000..cb73f595adb
--- /dev/null
+++ b/static/code/stackblitz/angular/app.component.html
@@ -0,0 +1,3 @@
+<ion-app>
+  <app-example></app-example>
+</ion-app>
diff --git a/static/code/stackblitz/angular/app.component.withContent.html b/static/code/stackblitz/angular/app.component.withContent.html
new file mode 100644
index 00000000000..96ebf597215
--- /dev/null
+++ b/static/code/stackblitz/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/angular/app.module.ts b/static/code/stackblitz/angular/app.module.ts
index 474064f51b9..15761a79e07 100644
--- a/static/code/stackblitz/angular/app.module.ts
+++ b/static/code/stackblitz/angular/app.module.ts
@@ -1,13 +1,15 @@
 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';
 
 @NgModule({
-  imports: [BrowserModule, IonicModule.forRoot({})],
-  declarations: [AppComponent],
+  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule { }
diff --git a/static/code/stackblitz/angular/example.component.ts b/static/code/stackblitz/angular/example.component.ts
new file mode 100644
index 00000000000..6b67261e0b3
--- /dev/null
+++ b/static/code/stackblitz/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/html/index.html b/static/code/stackblitz/html/index.html
index 4abd0ae7924..8a59c2afc0f 100644
--- a/static/code/stackblitz/html/index.html
+++ b/static/code/stackblitz/html/index.html
@@ -2,8 +2,13 @@
 
 <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></body>
+<body>
+  <ion-app>
+    {{ TEMPLATE }}
+  </ion-app>
+</body>
 
 </html>
diff --git a/static/code/stackblitz/html/index.withContent.html b/static/code/stackblitz/html/index.withContent.html
new file mode 100644
index 00000000000..3cd31834675
--- /dev/null
+++ b/static/code/stackblitz/html/index.withContent.html
@@ -0,0 +1,16 @@
+<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-content class="ion-padding">
+      {{ TEMPLATE }}
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/code/stackblitz/react/app.tsx b/static/code/stackblitz/react/app.tsx
index 0188284a05d..fef34594344 100644
--- a/static/code/stackblitz/react/app.tsx
+++ b/static/code/stackblitz/react/app.tsx
@@ -13,8 +13,14 @@ import '@ionic/react/css/text-alignment.css';
 import '@ionic/react/css/text-transformation.css';
 import '@ionic/react/css/flex-utils.css';
 
+import Example from './main';
+
 setupIonicReact();
 
 export default function App() {
-  return <IonApp></IonApp>;
+  return (
+    <IonApp>
+      <Example />
+    </IonApp>
+  );
 }
diff --git a/static/code/stackblitz/react/app.withContent.tsx b/static/code/stackblitz/react/app.withContent.tsx
new file mode 100644
index 00000000000..12c3a19d3dc
--- /dev/null
+++ b/static/code/stackblitz/react/app.withContent.tsx
@@ -0,0 +1,28 @@
+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 Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+  return (
+    <IonApp>
+      <IonContent className="ion-padding">
+        <Example />
+      </IonContent>
+    </IonApp>
+  );
+}
diff --git a/static/code/stackblitz/vue/App.withContent.vue b/static/code/stackblitz/vue/App.withContent.vue
new file mode 100644
index 00000000000..aa113caf3e4
--- /dev/null
+++ b/static/code/stackblitz/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/usage/accordion/accessibility/animations/angular.md b/static/usage/accordion/accessibility/animations/angular.md
index 7a8faa86b4b..ced314d2657 100644
--- a/static/usage/accordion/accessibility/animations/angular.md
+++ b/static/usage/accordion/accessibility/animations/angular.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/accessibility/animations/javascript.md b/static/usage/accordion/accessibility/animations/javascript.md
index e0bc6b35c7f..1500ccf60c4 100644
--- a/static/usage/accordion/accessibility/animations/javascript.md
+++ b/static/usage/accordion/accessibility/animations/javascript.md
@@ -1,5 +1,4 @@
 ```html
-<ion-content>
   <ion-accordion-group animated="false">
     <ion-accordion value="first">
       <ion-item slot="header" color="light">
@@ -26,5 +25,4 @@
       </div>
     </ion-accordion>
   </ion-accordion-group>
-</ion-content>
 ```
diff --git a/static/usage/accordion/accessibility/animations/react.md b/static/usage/accordion/accessibility/animations/react.md
index 1a838cda43f..0bf5878865b 100644
--- a/static/usage/accordion/accessibility/animations/react.md
+++ b/static/usage/accordion/accessibility/animations/react.md
@@ -1,42 +1,34 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonContent,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/accordion/accessibility/animations/vue.md b/static/usage/accordion/accessibility/animations/vue.md
index 2800c1772af..05847edab7b 100644
--- a/static/usage/accordion/accessibility/animations/vue.md
+++ b/static/usage/accordion/accessibility/animations/vue.md
@@ -1,53 +1,37 @@
 ```html
 <template>
-  <ion-content>
-    <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>
-  </ion-content>
+  <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,
-    IonContent,
-    IonItem, 
-    IonLabel,
-    AccordionGroupCustomEvent
-  } from '@ionic/vue';
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonContent,
-      IonItem, 
-      IonLabel
-    }
+      IonItem,
+      IonLabel,
+    },
   });
 </script>
 ```
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/angular/angular-ts.md b/static/usage/accordion/customization/advanced-expansion-styles/angular/angular-ts.md
index f0a038f5b8a..4db53a836a9 100644
--- a/static/usage/accordion/customization/advanced-expansion-styles/angular/angular-ts.md
+++ b/static/usage/accordion/customization/advanced-expansion-styles/angular/angular-ts.md
@@ -2,10 +2,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
 })
-export class AppComponent { }
-
-```
\ No newline at end of file
+export class ExampleComponent {}
+```
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/index.md b/static/usage/accordion/customization/advanced-expansion-styles/index.md
index d24c552018b..b01ea6391d1 100644
--- a/static/usage/accordion/customization/advanced-expansion-styles/index.md
+++ b/static/usage/accordion/customization/advanced-expansion-styles/index.md
@@ -17,16 +17,16 @@ import angularTS from './angular/angular-ts.md';
     react: {
       files: {
         'src/main.tsx': reactTS,
-        'src/main.css': reactCSS
-      }
+        'src/main.css': reactCSS,
+      },
     },
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.css': angularCSS,
-        'src/app/app.component.ts': angularTS
-      }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS,
+        'src/app/example.component.ts': angularTS,
+      },
     },
   }}
   size="250px"
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/react/react-ts.md b/static/usage/accordion/customization/advanced-expansion-styles/react/react-ts.md
index 1f5cdbf5e7f..01cd873445d 100644
--- a/static/usage/accordion/customization/advanced-expansion-styles/react/react-ts.md
+++ b/static/usage/accordion/customization/advanced-expansion-styles/react/react-ts.md
@@ -1,17 +1,12 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 
 import './main.css';
 
 function Example() {
   return (
-    <IonAccordionGroup expand="inset">
+    <IonAccordionGroup>
       <IonAccordion value="first">
         <IonItem slot="header" color="light">
           <IonLabel>First Accordion</IonLabel>
diff --git a/static/usage/accordion/customization/icons/angular.md b/static/usage/accordion/customization/icons/angular.md
index dd37ee275a3..2899aeacac6 100644
--- a/static/usage/accordion/customization/icons/angular.md
+++ b/static/usage/accordion/customization/icons/angular.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/customization/theming/angular.md b/static/usage/accordion/customization/theming/angular.md
deleted file mode 100644
index dd37ee275a3..00000000000
--- a/static/usage/accordion/customization/theming/angular.md
+++ /dev/null
@@ -1,30 +0,0 @@
-```html
-<ion-content>
-  <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>
-</ion-content>
-```
diff --git a/static/usage/accordion/customization/theming/index.md b/static/usage/accordion/customization/theming/index.md
index f60455c59f1..8ca4314cca2 100644
--- a/static/usage/accordion/customization/theming/index.md
+++ b/static/usage/accordion/customization/theming/index.md
@@ -16,13 +16,13 @@ import angularHTML from './angular/angular-html.md';
     react: {
       files: {
         'src/main.tsx': reactTS,
-        'src/main.css': reactCSS
-      }
+        'src/main.css': reactCSS,
+      },
     },
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
+        'src/app/example.component.html': angularHTML,
         'src/global.css': angularCSS
       }
     }
diff --git a/static/usage/accordion/disable-group/angular.md b/static/usage/accordion/disable-group/angular.md
index 27bedc3d522..5c4cf3b51b3 100644
--- a/static/usage/accordion/disable-group/angular.md
+++ b/static/usage/accordion/disable-group/angular.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/disable-group/javascript.md b/static/usage/accordion/disable-group/javascript.md
index 51ca00c2d25..163641a544c 100644
--- a/static/usage/accordion/disable-group/javascript.md
+++ b/static/usage/accordion/disable-group/javascript.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/disable-group/react.md b/static/usage/accordion/disable-group/react.md
index a1a97f6debd..b2ff09b5fe4 100644
--- a/static/usage/accordion/disable-group/react.md
+++ b/static/usage/accordion/disable-group/react.md
@@ -1,42 +1,34 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonContent,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/accordion/disable-group/vue.md b/static/usage/accordion/disable-group/vue.md
index e661dbdc278..6c9e3567845 100644
--- a/static/usage/accordion/disable-group/vue.md
+++ b/static/usage/accordion/disable-group/vue.md
@@ -1,53 +1,37 @@
 ```html
 <template>
-  <ion-content>
-    <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>
-  </ion-content>
+  <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,
-    IonContent,
-    IonItem, 
-    IonLabel,
-    AccordionGroupCustomEvent
-  } from '@ionic/vue';
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonContent,
-      IonItem, 
-      IonLabel
-    }
+      IonItem,
+      IonLabel,
+    },
   });
 </script>
 ```
diff --git a/static/usage/accordion/disable/group/angular.md b/static/usage/accordion/disable/group/angular.md
index 27bedc3d522..5c4cf3b51b3 100644
--- a/static/usage/accordion/disable/group/angular.md
+++ b/static/usage/accordion/disable/group/angular.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/disable/group/javascript.md b/static/usage/accordion/disable/group/javascript.md
index 51ca00c2d25..163641a544c 100644
--- a/static/usage/accordion/disable/group/javascript.md
+++ b/static/usage/accordion/disable/group/javascript.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/disable/group/react.md b/static/usage/accordion/disable/group/react.md
index a1a97f6debd..b2ff09b5fe4 100644
--- a/static/usage/accordion/disable/group/react.md
+++ b/static/usage/accordion/disable/group/react.md
@@ -1,42 +1,34 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonContent,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/accordion/disable/group/vue.md b/static/usage/accordion/disable/group/vue.md
index e661dbdc278..6c9e3567845 100644
--- a/static/usage/accordion/disable/group/vue.md
+++ b/static/usage/accordion/disable/group/vue.md
@@ -1,53 +1,37 @@
 ```html
 <template>
-  <ion-content>
-    <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>
-  </ion-content>
+  <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,
-    IonContent,
-    IonItem, 
-    IonLabel,
-    AccordionGroupCustomEvent
-  } from '@ionic/vue';
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonContent,
-      IonItem, 
-      IonLabel
-    }
+      IonItem,
+      IonLabel,
+    },
   });
 </script>
 ```
diff --git a/static/usage/accordion/disable/individual/angular.md b/static/usage/accordion/disable/individual/angular.md
index b87b87fd775..56ac780e987 100644
--- a/static/usage/accordion/disable/individual/angular.md
+++ b/static/usage/accordion/disable/individual/angular.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/disable/individual/javascript.md b/static/usage/accordion/disable/individual/javascript.md
index e9e5ebb18a0..df5f207512a 100644
--- a/static/usage/accordion/disable/individual/javascript.md
+++ b/static/usage/accordion/disable/individual/javascript.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/disable/individual/react.md b/static/usage/accordion/disable/individual/react.md
index 9441c5ec596..e133354999a 100644
--- a/static/usage/accordion/disable/individual/react.md
+++ b/static/usage/accordion/disable/individual/react.md
@@ -1,42 +1,34 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonContent,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/accordion/disable/individual/vue.md b/static/usage/accordion/disable/individual/vue.md
index a1e0a5eab1a..dc26bc3b11f 100644
--- a/static/usage/accordion/disable/individual/vue.md
+++ b/static/usage/accordion/disable/individual/vue.md
@@ -1,53 +1,37 @@
 ```html
 <template>
-  <ion-content>
-    <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>
-  </ion-content>
+  <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,
-    IonContent,
-    IonItem, 
-    IonLabel,
-    AccordionGroupCustomEvent
-  } from '@ionic/vue';
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonContent,
-      IonItem, 
-      IonLabel
-    }
+      IonItem,
+      IonLabel,
+    },
   });
 </script>
 ```
diff --git a/static/usage/accordion/listen-changes/angular-html.md b/static/usage/accordion/listen-changes/angular-html.md
index a41268db0f5..a70ad5e3be6 100644
--- a/static/usage/accordion/listen-changes/angular-html.md
+++ b/static/usage/accordion/listen-changes/angular-html.md
@@ -1,32 +1,24 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/listen-changes/angular-ts.md b/static/usage/accordion/listen-changes/angular-ts.md
index 332505e9cf0..c14734aba72 100644
--- a/static/usage/accordion/listen-changes/angular-ts.md
+++ b/static/usage/accordion/listen-changes/angular-ts.md
@@ -2,24 +2,26 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html'
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {  
+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; }
+    if (!nativeEl) {
+      return;
+    }
 
-    const collapsedItems = this.values.filter(value => value !== ev.detail.value);
+    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/accordion/listen-changes/index.md b/static/usage/accordion/listen-changes/index.md
index e609690c716..d5f2eac4b56 100644
--- a/static/usage/accordion/listen-changes/index.md
+++ b/static/usage/accordion/listen-changes/index.md
@@ -13,10 +13,10 @@ import angularTS from './angular-ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   size="320px"
   src="usage/accordion/listen-changes/demo.html"
diff --git a/static/usage/accordion/listen-changes/javascript.md b/static/usage/accordion/listen-changes/javascript.md
index 5d271b2a9d5..e7085ca86eb 100644
--- a/static/usage/accordion/listen-changes/javascript.md
+++ b/static/usage/accordion/listen-changes/javascript.md
@@ -1,34 +1,26 @@
 ```html
-<ion-content>
-  <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-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>
-</ion-content>
+<p class="listener-out"></p>
 
 <script>
   const accordionGroup = document.querySelector('ion-accordion-group');
@@ -36,13 +28,13 @@
   const values = ['first', 'second', 'third'];
 
   accordionGroup.addEventListener('ionChange', (ev) => {
-    const collapsedItems = values.filter(value => value !== ev.detail.value);
+    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/accordion/listen-changes/react.md b/static/usage/accordion/listen-changes/react.md
index 882d5cb7a32..eb76312b62a 100644
--- a/static/usage/accordion/listen-changes/react.md
+++ b/static/usage/accordion/listen-changes/react.md
@@ -1,31 +1,26 @@
 ```tsx
 import React, { useRef } from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonContent,
-  IonItem, 
-  IonLabel,
-  AccordionGroupCustomEvent
-} from '@ionic/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);
+    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 (
-    <IonContent>
+    <>
       <IonAccordionGroup onIonChange={accordionGroupChange}>
         <IonAccordion value="first">
           <IonItem slot="header" color="light">
@@ -53,7 +48,7 @@ function Example() {
         </IonAccordion>
       </IonAccordionGroup>
       <p ref={listenerOut}></p>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/accordion/listen-changes/vue.md b/static/usage/accordion/listen-changes/vue.md
index bc4c493b14e..0086a788ac0 100644
--- a/static/usage/accordion/listen-changes/vue.md
+++ b/static/usage/accordion/listen-changes/vue.md
@@ -1,72 +1,58 @@
 ```html
 <template>
-  <ion-content>
-    <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>
-  </ion-content>
+  <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,
-    IonContent,
-    IonItem, 
-    IonLabel,
-    AccordionGroupCustomEvent
-  } from '@ionic/vue';
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonContent,
-      IonItem, 
-      IonLabel
+      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);
+        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 }
-    }
+        `;
+      };
+      return { listenerOut, accordionGroupChange };
+    },
   });
 </script>
 ```
diff --git a/static/usage/accordion/multiple/angular.md b/static/usage/accordion/multiple/angular.md
index 552e4f54949..238f000c458 100644
--- a/static/usage/accordion/multiple/angular.md
+++ b/static/usage/accordion/multiple/angular.md
@@ -1,30 +1,22 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/multiple/javascript.md b/static/usage/accordion/multiple/javascript.md
index a64b22a02f4..6948ed4e9cc 100644
--- a/static/usage/accordion/multiple/javascript.md
+++ b/static/usage/accordion/multiple/javascript.md
@@ -1,32 +1,24 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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');
diff --git a/static/usage/accordion/multiple/react.md b/static/usage/accordion/multiple/react.md
index 29d447420ef..2bdbb0b365a 100644
--- a/static/usage/accordion/multiple/react.md
+++ b/static/usage/accordion/multiple/react.md
@@ -1,50 +1,44 @@
 ```tsx
 import React, { useRef, useEffect } from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonContent,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   const accordionGroup = useRef<null | HTMLIonAccordionGroupElement>(null);
 
   useEffect(() => {
-    if (!accordionGroup.current) { return; }
-    
+    if (!accordionGroup.current) {
+      return;
+    }
+
     accordionGroup.current.value = ['first', 'third'];
   }, []);
 
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/accordion/multiple/vue.md b/static/usage/accordion/multiple/vue.md
index db569692676..dcf86fbd7d4 100644
--- a/static/usage/accordion/multiple/vue.md
+++ b/static/usage/accordion/multiple/vue.md
@@ -5,46 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <div class="ion-padding" slot="content">Third Content</div>
     </ion-accordion>
   </ion-accordion-group>
 </template>
 
 <script lang="ts">
-  import {
-    IonAccordion, 
-    IonAccordionGroup,
-    IonContent,
-    IonItem, 
-    IonLabel
-  } from '@ionic/vue';
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonContent,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/accordion/toggle/angular-html.md b/static/usage/accordion/toggle/angular-html.md
index 6a0139e0c60..6af0af8516a 100644
--- a/static/usage/accordion/toggle/angular-html.md
+++ b/static/usage/accordion/toggle/angular-html.md
@@ -1,32 +1,24 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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/accordion/toggle/angular-ts.md b/static/usage/accordion/toggle/angular-ts.md
index b8f854d4d4d..bdcac1d862f 100644
--- a/static/usage/accordion/toggle/angular-ts.md
+++ b/static/usage/accordion/toggle/angular-ts.md
@@ -3,10 +3,10 @@ import { Component, ViewChild } from '@angular/core';
 import { IonAccordionGroup } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html'
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {  
+export class ExampleComponent {
   @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;
 
   toggleAccordion = () => {
@@ -16,6 +16,6 @@ export class AppComponent {
     } else {
       nativeEl.value = 'second';
     }
-  }
+  };
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/accordion/toggle/index.md b/static/usage/accordion/toggle/index.md
index 9e33b6adb19..7f47e805c13 100644
--- a/static/usage/accordion/toggle/index.md
+++ b/static/usage/accordion/toggle/index.md
@@ -13,10 +13,10 @@ import angularTS from './angular-ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   size="medium"
   src="usage/accordion/toggle/demo.html"
diff --git a/static/usage/accordion/toggle/javascript.md b/static/usage/accordion/toggle/javascript.md
index 982dd22dd0e..058e4e468d6 100644
--- a/static/usage/accordion/toggle/javascript.md
+++ b/static/usage/accordion/toggle/javascript.md
@@ -1,34 +1,26 @@
 ```html
-<ion-content>
-  <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>
-</ion-content>
+<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');
@@ -38,6 +30,6 @@
     } else {
       accordionGroup.value = 'second';
     }
-  }
+  };
 </script>
 ```
diff --git a/static/usage/accordion/toggle/react.md b/static/usage/accordion/toggle/react.md
index 990515683aa..8d20c6bb18e 100644
--- a/static/usage/accordion/toggle/react.md
+++ b/static/usage/accordion/toggle/react.md
@@ -1,17 +1,12 @@
 ```tsx
 import React, { useRef } from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonButton,
-  IonContent,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   const accordionGroup = useRef<null | HTMLIonAccordionGroupElement>(null);
   const toggleAccordion = () => {
-    if (!accordionGroup.current) { return; }
+    if (!accordionGroup.current) {
+      return;
+    }
     const nativeEl = accordionGroup.current;
 
     if (nativeEl.value === 'second') {
@@ -19,9 +14,9 @@ function Example() {
     } else {
       nativeEl.value = 'second';
     }
-  }
+  };
   return (
-    <IonContent>
+    <>
       <IonAccordionGroup ref={accordionGroup}>
         <IonAccordion value="first">
           <IonItem slot="header" color="light">
@@ -49,7 +44,7 @@ function Example() {
         </IonAccordion>
       </IonAccordionGroup>
       <IonButton onClick={toggleAccordion}>Toggle Second Accordion</IonButton>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/accordion/toggle/vue.md b/static/usage/accordion/toggle/vue.md
index ebad4f7610b..c9fa11c0e9c 100644
--- a/static/usage/accordion/toggle/vue.md
+++ b/static/usage/accordion/toggle/vue.md
@@ -1,63 +1,47 @@
 ```html
 <template>
-  <ion-content>
-    <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>
-  </ion-content>
+  <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,
-    IonContent,
-    IonItem, 
-    IonLabel
-  } from '@ionic/vue';
+  import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
       IonButton,
-      IonContent,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
     setup() {
       const accordionGroup = ref(null);
       const toggleAccordion = () => {
-        if (!accordionGroup.value) { return; }
+        if (!accordionGroup.value) {
+          return;
+        }
         const nativeEl = accordionGroup.value.$el;
 
         if (nativeEl.value === 'second') {
@@ -65,10 +49,10 @@
         } else {
           nativeEl.value = 'second';
         }
-      }
-      
+      };
+
       return { accordionGroup, toggleAccordion };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/alert/buttons/angular/angular_ts.md b/static/usage/alert/buttons/angular/angular_ts.md
index 2614a2ed719..f4a7b4e9a18 100644
--- a/static/usage/alert/buttons/angular/angular_ts.md
+++ b/static/usage/alert/buttons/angular/angular_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   handlerMessage = '';
   roleMessage = '';
 
@@ -19,14 +19,18 @@ export class AppComponent {
         {
           text: 'Cancel',
           role: 'cancel',
-          handler: () => { this.handlerMessage = 'Alert canceled'; }
+          handler: () => {
+            this.handlerMessage = 'Alert canceled';
+          },
         },
         {
           text: 'OK',
           role: 'confirm',
-          handler: () => { this.handlerMessage = 'Alert confirmed'; }
-        }
-      ]
+          handler: () => {
+            this.handlerMessage = 'Alert confirmed';
+          },
+        },
+      ],
     });
 
     await alert.present();
@@ -35,4 +39,4 @@ export class AppComponent {
     this.roleMessage = `Dismissed with role: ${role}`;
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/alert/buttons/index.md b/static/usage/alert/buttons/index.md
index d2949de2317..b3bb80edbac 100644
--- a/static/usage/alert/buttons/index.md
+++ b/static/usage/alert/buttons/index.md
@@ -15,10 +15,10 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/alert/buttons/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/alert/buttons/react.md b/static/usage/alert/buttons/react.md
index 6655c40fd09..da6138b71c5 100644
--- a/static/usage/alert/buttons/react.md
+++ b/static/usage/alert/buttons/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, IonContent, useIonAlert } from '@ionic/react';
+import { IonButton, useIonAlert } from '@ionic/react';
 
 function Example() {
   const [presentAlert] = useIonAlert();
@@ -8,26 +8,36 @@ function Example() {
   const [roleMessage, setRoleMessage] = useState('');
 
   return (
-    <IonContent>
-      <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>
+    <>
+      <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>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/alert/buttons/vue.md b/static/usage/alert/buttons/vue.md
index bc29caaca35..f3aab5ef08a 100644
--- a/static/usage/alert/buttons/vue.md
+++ b/static/usage/alert/buttons/vue.md
@@ -1,47 +1,49 @@
 ```html
 <template>
-  <ion-content>
-    <ion-button @click="presentAlert">Click Me</ion-button>
-    <p>{{ handlerMessage }}</p>
-    <p>{{ roleMessage }}</p>
-  </ion-content>
+  <ion-button @click="presentAlert">Click Me</ion-button>
+  <p>{{ handlerMessage }}</p>
+  <p>{{ roleMessage }}</p>
 </template>
 
 <script lang="ts">
-import { IonButton, IonContent, alertController } from '@ionic/vue';
+  import { IonButton, alertController } from '@ionic/vue';
 
-export default {
-  components: { IonButton, IonContent },
-  data() {
-    return {
-      handlerMessage: '',
-      roleMessage: ''
-    };
-  },
-  methods: {
-    async presentAlert() {
-      const alert = await alertController.create({
-        header: 'Alert!',
-        buttons: [
-          {
-            text: 'Cancel',
-            role: 'cancel',
-            handler: () => { this.handlerMessage = 'Alert canceled'; }
-          },
-          {
-            text: 'OK',
-            role: 'confirm',
-            handler: () => { this.handlerMessage = 'Alert confirmed'; }
-          }
-        ]
-      });
+  export default {
+    components: { IonButton },
+    data() {
+      return {
+        handlerMessage: '',
+        roleMessage: '',
+      };
+    },
+    methods: {
+      async presentAlert() {
+        const alert = await 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();
+        await alert.present();
 
-      const { role } = await alert.onDidDismiss();
-      this.roleMessage = `Dismissed with role: ${role}`;
+        const { role } = await alert.onDidDismiss();
+        this.roleMessage = `Dismissed with role: ${role}`;
+      },
     },
-  },
-}
+  };
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/alert/customization/angular/angular_ts.md b/static/usage/alert/customization/angular/angular_ts.md
index fc910da0fe0..9606aeb72f4 100644
--- a/static/usage/alert/customization/angular/angular_ts.md
+++ b/static/usage/alert/customization/angular/angular_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private alertController: AlertController) {}
 
   async presentAlert() {
@@ -16,16 +16,16 @@ export class AppComponent {
       buttons: [
         {
           text: 'No',
-          cssClass: 'alert-button-cancel'
+          cssClass: 'alert-button-cancel',
         },
         {
           text: 'Yes',
-          cssClass: 'alert-button-confirm'
-        }
-      ]
+          cssClass: 'alert-button-confirm',
+        },
+      ],
     });
 
     await alert.present();
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/alert/customization/index.md b/static/usage/alert/customization/index.md
index c5521d46b58..a97cefceecc 100644
--- a/static/usage/alert/customization/index.md
+++ b/static/usage/alert/customization/index.md
@@ -17,17 +17,17 @@ import angularTS from './angular/angular_ts.md';
     react: {
       files: {
         'src/main.tsx': reactTS,
-        'src/main.css': reactCSS
-      }
+        'src/main.css': reactCSS,
+      },
     },
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS,
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
         'src/global.css': angularCSS
       }
     }
   }}
   src="usage/alert/customization/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/alert/customization/react/react_ts.md b/static/usage/alert/customization/react/react_ts.md
index 564617b2796..7a04d967cea 100644
--- a/static/usage/alert/customization/react/react_ts.md
+++ b/static/usage/alert/customization/react/react_ts.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonButton, IonContent, useIonAlert } from '@ionic/react';
+import { IonButton, useIonAlert } from '@ionic/react';
 
 import './main.css';
 
@@ -8,22 +8,26 @@ function Example() {
   const [presentAlert] = useIonAlert();
 
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/alert/customization/vue.md b/static/usage/alert/customization/vue.md
index aa16c0c1729..f07233f64e1 100644
--- a/static/usage/alert/customization/vue.md
+++ b/static/usage/alert/customization/vue.md
@@ -1,15 +1,13 @@
 ```html
 <template>
-  <ion-content>
-    <ion-button @click="presentAlert">Click Me</ion-button>
-  </ion-content>
+  <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
 <script lang="ts">
-  import { IonButton, IonContent, alertController } from '@ionic/vue';
+  import { IonButton, alertController } from '@ionic/vue';
 
   export default {
-    components: { IonButton, IonContent },
+    components: { IonButton },
     methods: {
       async presentAlert() {
         const alert = await alertController.create({
@@ -18,19 +16,19 @@
           buttons: [
             {
               text: 'No',
-              cssClass: 'alert-button-cancel'
+              cssClass: 'alert-button-cancel',
             },
             {
               text: 'Yes',
-              cssClass: 'alert-button-confirm'
-            }
-          ]
+              cssClass: 'alert-button-confirm',
+            },
+          ],
         });
 
         await alert.present();
       },
     },
-  }
+  };
 </script>
 
 <style>
@@ -52,7 +50,7 @@
   }
 
   .ios .custom-alert button.alert-button {
-    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   }
 
   .ios button.alert-button.alert-button-cancel {
diff --git a/static/usage/alert/inputs/radios/angular/angular_ts.md b/static/usage/alert/inputs/radios/angular/angular_ts.md
index 087f5c5a70d..78b305a0f59 100644
--- a/static/usage/alert/inputs/radios/angular/angular_ts.md
+++ b/static/usage/alert/inputs/radios/angular/angular_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private alertController: AlertController) {}
 
   async presentAlert() {
@@ -17,22 +17,22 @@ export class AppComponent {
         {
           label: 'Red',
           type: 'radio',
-          value: 'red'
+          value: 'red',
         },
         {
           label: 'Blue',
           type: 'radio',
-          value: 'blue'
+          value: 'blue',
         },
         {
           label: 'Green',
           type: 'radio',
-          value: 'green'
-        }
-      ]
+          value: 'green',
+        },
+      ],
     });
 
     await alert.present();
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/alert/inputs/radios/index.md b/static/usage/alert/inputs/radios/index.md
index dbf5f1e199f..6c907a4b933 100644
--- a/static/usage/alert/inputs/radios/index.md
+++ b/static/usage/alert/inputs/radios/index.md
@@ -15,10 +15,10 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/alert/inputs/radios/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/alert/inputs/radios/react.md b/static/usage/alert/inputs/radios/react.md
index 2f97b9122b6..475135e63b1 100644
--- a/static/usage/alert/inputs/radios/react.md
+++ b/static/usage/alert/inputs/radios/react.md
@@ -1,34 +1,38 @@
 ```tsx
 import React from 'react';
-import { IonButton, IonContent, useIonAlert } from '@ionic/react';
+import { IonButton, useIonAlert } from '@ionic/react';
 
 function Example() {
   const [presentAlert] = useIonAlert();
 
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/alert/inputs/radios/vue.md b/static/usage/alert/inputs/radios/vue.md
index 688ae63f9cd..3397fe5f507 100644
--- a/static/usage/alert/inputs/radios/vue.md
+++ b/static/usage/alert/inputs/radios/vue.md
@@ -1,42 +1,40 @@
 ```html
 <template>
-  <ion-content>
-    <ion-button @click="presentAlert">Click Me</ion-button>
-  </ion-content>
+  <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
 <script lang="ts">
-import { IonButton, IonContent, alertController } from '@ionic/vue';
+  import { IonButton, alertController } from '@ionic/vue';
 
-export default {
-  components: { IonButton, IonContent },
-  methods: {
-    async presentAlert() {
-      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'
-          }
-        ]
-      });
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentAlert() {
+        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();
+        await alert.present();
+      },
     },
-  },
-}
+  };
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/alert/inputs/text-inputs/angular/angular_ts.md b/static/usage/alert/inputs/text-inputs/angular/angular_ts.md
index b48fb3d0847..2c4f2ab04d2 100644
--- a/static/usage/alert/inputs/text-inputs/angular/angular_ts.md
+++ b/static/usage/alert/inputs/text-inputs/angular/angular_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private alertController: AlertController) {}
 
   async presentAlert() {
@@ -15,28 +15,28 @@ export class AppComponent {
       buttons: ['OK'],
       inputs: [
         {
-          placeholder: 'Name'
+          placeholder: 'Name',
         },
         {
           placeholder: 'Nickname (max 8 characters)',
           attributes: {
-            maxlength: 8
-          }
+            maxlength: 8,
+          },
         },
         {
           type: 'number',
           placeholder: 'Age',
           min: 1,
-          max: 100
+          max: 100,
         },
         {
           type: 'textarea',
-          placeholder: 'A little about yourself'
-        }
-      ]
+          placeholder: 'A little about yourself',
+        },
+      ],
     });
 
     await alert.present();
   }
 }
-```
\ 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
index 41805826f4c..abb2a0bec6c 100644
--- a/static/usage/alert/inputs/text-inputs/index.md
+++ b/static/usage/alert/inputs/text-inputs/index.md
@@ -15,10 +15,10 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/alert/inputs/text-inputs/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/alert/inputs/text-inputs/react.md b/static/usage/alert/inputs/text-inputs/react.md
index e2192a2f68d..e496935f690 100644
--- a/static/usage/alert/inputs/text-inputs/react.md
+++ b/static/usage/alert/inputs/text-inputs/react.md
@@ -1,38 +1,42 @@
 ```tsx
 import React from 'react';
-import { IonButton, IonContent, useIonAlert } from '@ionic/react';
+import { IonButton, useIonAlert } from '@ionic/react';
 
 function Example() {
   const [presentAlert] = useIonAlert();
 
   return (
-    <IonContent>
-      <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>
-    </IonContent>
+    <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/alert/inputs/text-inputs/vue.md b/static/usage/alert/inputs/text-inputs/vue.md
index f3ddc877d45..f28221e380e 100644
--- a/static/usage/alert/inputs/text-inputs/vue.md
+++ b/static/usage/alert/inputs/text-inputs/vue.md
@@ -1,46 +1,44 @@
 ```html
 <template>
-  <ion-content>
-    <ion-button @click="presentAlert">Click Me</ion-button>
-  </ion-content>
+  <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
 <script lang="ts">
-import { IonButton, IonContent, alertController } from '@ionic/vue';
+  import { IonButton, alertController } from '@ionic/vue';
 
-export default {
-  components: { IonButton, IonContent },
-  methods: {
-    async presentAlert() {
-      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'
-          }
-        ]
-      });
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentAlert() {
+        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();
+        await alert.present();
+      },
     },
-  },
-}
+  };
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/alert/presenting/controller/angular/angular_ts.md b/static/usage/alert/presenting/controller/angular/angular_ts.md
index 8758c596f70..32583600432 100644
--- a/static/usage/alert/presenting/controller/angular/angular_ts.md
+++ b/static/usage/alert/presenting/controller/angular/angular_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private alertController: AlertController) {}
 
   async presentAlert() {
@@ -14,10 +14,10 @@ export class AppComponent {
       header: 'Alert',
       subHeader: 'Important message',
       message: 'This is an alert!',
-      buttons: ['OK']
+      buttons: ['OK'],
     });
 
     await alert.present();
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/alert/presenting/controller/index.md b/static/usage/alert/presenting/controller/index.md
index dd4e78cee94..875d29b1d64 100644
--- a/static/usage/alert/presenting/controller/index.md
+++ b/static/usage/alert/presenting/controller/index.md
@@ -15,10 +15,10 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/alert/presenting/controller/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/alert/presenting/controller/react.md b/static/usage/alert/presenting/controller/react.md
index 6497911a997..4e59124b155 100644
--- a/static/usage/alert/presenting/controller/react.md
+++ b/static/usage/alert/presenting/controller/react.md
@@ -1,19 +1,23 @@
 ```tsx
 import React from 'react';
-import { IonButton, IonContent, useIonAlert } from '@ionic/react';
+import { IonButton, useIonAlert } from '@ionic/react';
 
 function Example() {
   const [presentAlert] = useIonAlert();
 
   return (
-    <IonContent>
-      <IonButton onClick={() => presentAlert({
-        header: 'Alert',
-        subHeader: 'Important message',
-        message: 'This is an alert!',
-        buttons: ['OK'],
-      })}>Click Me</IonButton>
-    </IonContent>
+    <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/alert/presenting/controller/vue.md b/static/usage/alert/presenting/controller/vue.md
index 06c0c67c612..77322bbdb9b 100644
--- a/static/usage/alert/presenting/controller/vue.md
+++ b/static/usage/alert/presenting/controller/vue.md
@@ -1,27 +1,25 @@
 ```html
 <template>
-  <ion-content>
-    <ion-button @click="presentAlert">Click Me</ion-button>
-  </ion-content>
+  <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
 <script lang="ts">
-import { IonButton, IonContent, alertController } from '@ionic/vue';
+  import { IonButton, alertController } from '@ionic/vue';
 
-export default {
-  components: { IonButton, IonContent },
-  methods: {
-    async presentAlert() {
-      const alert = await alertController.create({
-        header: 'Alert',
-        subHeader: 'Important message',
-        message: 'This is an alert!',
-        buttons: ['OK']
-      });
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentAlert() {
+        const alert = await alertController.create({
+          header: 'Alert',
+          subHeader: 'Important message',
+          message: 'This is an alert!',
+          buttons: ['OK'],
+        });
 
-      await alert.present();
+        await alert.present();
+      },
     },
-  },
-}
+  };
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/angular_ts.md b/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/angular_ts.md
index c2bb5a07749..8ae69af72a5 100644
--- a/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/angular_ts.md
+++ b/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/angular_ts.md
@@ -2,10 +2,10 @@
 import { Component, ViewChild } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   maxBreadcrumbs = 4;
 
   expandBreadcrumbs() {
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
index 12f404f75da..21f1902edcd 100644
--- a/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
+++ b/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
@@ -14,10 +14,10 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS,
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/breadcrumbs/collapsing-items/expand-on-click/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/react.md b/static/usage/breadcrumbs/collapsing-items/items-before-after/react.md
index 485c9727f77..e54c8676f4e 100644
--- a/static/usage/breadcrumbs/collapsing-items/items-before-after/react.md
+++ b/static/usage/breadcrumbs/collapsing-items/items-before-after/react.md
@@ -1,9 +1,9 @@
 ```tsx
 import React from 'react';
-import { IonBreadcrumb, IonBreadcrumbs, IonContent } from '@ionic/react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
+    <>
       <div>Before Collapse = 2</div>
       <IonBreadcrumbs maxItems={4} itemsBeforeCollapse={2}>
         <IonBreadcrumb href="#home">Home</IonBreadcrumb>
@@ -43,7 +43,7 @@ function Example() {
         <IonBreadcrumb href="#film">Film</IonBreadcrumb>
         <IonBreadcrumb href="#35mm">35 mm</IonBreadcrumb>
       </IonBreadcrumbs>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/breadcrumbs/collapsing-items/items-before-after/vue.md
index df724088b6e..61dbebde1d7 100644
--- a/static/usage/breadcrumbs/collapsing-items/items-before-after/vue.md
+++ b/static/usage/breadcrumbs/collapsing-items/items-before-after/vue.md
@@ -1,54 +1,52 @@
 ```html
 <template>
-  <ion-content>
-    <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>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">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">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>
-  </ion-content>
+  <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, IonContent } from '@ionic/vue';
+  import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs, IonContent },
+    components: { IonBreadcrumb, IonBreadcrumbs },
   });
 </script>
 ```
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/angular_ts.md b/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/angular_ts.md
index bb523fb5f67..aabfb29a821 100644
--- a/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/angular_ts.md
+++ b/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/angular_ts.md
@@ -2,10 +2,10 @@
 import { Component, ViewChild } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   @ViewChild('popover') popover;
 
   isOpen = false;
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
index 6c5178412bf..610e6974468 100644
--- a/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
+++ b/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
@@ -15,10 +15,10 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS,
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/breadcrumbs/collapsing-items/popover-on-click/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/react.md b/static/usage/breadcrumbs/icons/icons-on-items/react.md
index f03b12455d9..e042ff5aa05 100644
--- a/static/usage/breadcrumbs/icons/icons-on-items/react.md
+++ b/static/usage/breadcrumbs/icons/icons-on-items/react.md
@@ -1,11 +1,11 @@
 ```tsx
 import React from 'react';
-import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonIcon, IonLabel } from '@ionic/react';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/react';
 import { camera, film, flash, home } from 'ionicons/icons';
 
 function Example() {
   return (
-    <IonContent>
+    <>
       <IonLabel>Icons at Start</IonLabel>
       <IonBreadcrumbs>
         <IonBreadcrumb href="#home">
@@ -45,7 +45,7 @@ function Example() {
           <IonIcon slot="end" icon={film}></IonIcon>
         </IonBreadcrumb>
       </IonBreadcrumbs>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/breadcrumbs/icons/icons-on-items/vue.md
index 319d6be28e2..2e1634143f6 100644
--- a/static/usage/breadcrumbs/icons/icons-on-items/vue.md
+++ b/static/usage/breadcrumbs/icons/icons-on-items/vue.md
@@ -1,58 +1,56 @@
 ```html
 <template>
-  <ion-content>
-    <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>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>
-  </ion-content>
+  <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, IonContent, IonIcon, IonLabel } from '@ionic/vue';
+  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, IonContent, IonIcon, IonLabel },
+    components: { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel },
     setup() {
       return { camera, film, flash, home };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/breadcrumbs/styling/css-props/index.md b/static/usage/breadcrumbs/styling/css-props/index.md
index 8a733c06ccd..579f8373ba6 100644
--- a/static/usage/breadcrumbs/styling/css-props/index.md
+++ b/static/usage/breadcrumbs/styling/css-props/index.md
@@ -15,16 +15,16 @@ import angularCSS from './angular/angular_css.md';
     react: {
       files: {
         'src/main.css': reactCSS,
-        'src/main.tsx': reactTS
-      }
+        'src/main.tsx': reactTS,
+      },
     },
     vue,
     angular: {
       files: {
-        'src/app/app.component.css': angularCSS,
-        'src/app/app.component.html': angularHTML
-      }
-    }
+        'src/app/example.component.css': angularCSS,
+        'src/app/example.component.html': angularHTML,
+      },
+    },
   }}
   src="usage/breadcrumbs/styling/css-props/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/datetime/date-constraints/advanced/angular-ts.md b/static/usage/datetime/date-constraints/advanced/angular-ts.md
index ce1ec8e29cd..3021390e188 100644
--- a/static/usage/datetime/date-constraints/advanced/angular-ts.md
+++ b/static/usage/datetime/date-constraints/advanced/angular-ts.md
@@ -2,19 +2,19 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html'
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {  
+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;
-  }
+  };
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/datetime/date-constraints/advanced/index.md b/static/usage/datetime/date-constraints/advanced/index.md
index dc1f8ebfa49..ac86047de8f 100644
--- a/static/usage/datetime/date-constraints/advanced/index.md
+++ b/static/usage/datetime/date-constraints/advanced/index.md
@@ -6,14 +6,18 @@ import vue from './vue.md';
 import angularHTML from './angular-html.md';
 import angularTS from './angular-ts.md';
 
-<Playground size="medium" code={{ 
-  javascript,
-  react, 
-  vue, 
-  angular: {
-    files: {
-      'src/app/app.component.html': angularHTML,
-      'src/app/app.component.ts': angularTS
-    }
-  }
-}} src="usage/datetime/date-constraints/advanced/demo.html" />
+<Playground
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/datetime/date-constraints/advanced/demo.html"
+/>
diff --git a/static/usage/datetime/theming/angular-css.md b/static/usage/datetime/theming/angular-css.md
index 374f851b5ce..4ec3d3ecdf9 100644
--- a/static/usage/datetime/theming/angular-css.md
+++ b/static/usage/datetime/theming/angular-css.md
@@ -1,14 +1,30 @@
 ```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-rgb: 131, 24, 67;
   --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255,255,255;
+  --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-text-color-rgb: 136, 19, 55;
 
   --ion-color-step-50: #f9e6e9;
   --ion-color-step-100: #f3dbdf;
@@ -42,9 +58,9 @@
 
 ion-datetime {
   --background: #fff1f2;
-  --background-rgb: 255,241,242;
-  
+  --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/datetime/theming/index.md b/static/usage/datetime/theming/index.md
index 3dea57124ab..bbb37d74769 100644
--- a/static/usage/datetime/theming/index.md
+++ b/static/usage/datetime/theming/index.md
@@ -7,20 +7,20 @@ import vue from './vue.md';
 import angularHTML from './angular-html.md';
 import angularCSS from './angular-css.md';
 
-<Playground 
-  size="450px" 
-  code={{ 
-    javascript, 
+<Playground
+  size="450px"
+  code={{
+    javascript,
     react: {
       files: {
         'src/main.tsx': reactHTML,
-        'src/main.css': reactCSS
-      }
-    }, 
-    vue, 
+        'src/main.css': reactCSS,
+      },
+    },
+    vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
+        'src/app/example.component.html': angularHTML,
         'src/global.css': angularCSS
       }
     }
diff --git a/static/usage/loading/controller/angular/ts.md b/static/usage/loading/controller/angular/ts.md
index bf5f9902f4b..bd4b86eef29 100644
--- a/static/usage/loading/controller/angular/ts.md
+++ b/static/usage/loading/controller/angular/ts.md
@@ -4,18 +4,18 @@ import { Component } from '@angular/core';
 import { LoadingController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
 
   async showLoading() {
     const loading = await this.loadingCtrl.create({
       message: 'Dismissing after 3 seconds...',
-      duration: 3000
+      duration: 3000,
     });
-    
+
     loading.present();
   }
 }
diff --git a/static/usage/loading/controller/index.md b/static/usage/loading/controller/index.md
index e478b6451e6..acd6634a542 100644
--- a/static/usage/loading/controller/index.md
+++ b/static/usage/loading/controller/index.md
@@ -7,14 +7,17 @@ import vue from './vue.md';
 import angularHTML from './angular/html.md';
 import angularTS from './angular/ts.md';
 
-<Playground code={{
-  javascript, 
-  react, 
-  vue, 
-  angular: {
-    'files': {
-      'src/app/app.component.html': angularHTML,
-      'src/app/app.component.ts': angularTS
-    }
-  }
-}} src="usage/loading/controller/demo.html" />
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/loading/controller/demo.html"
+/>
diff --git a/static/usage/loading/spinners/angular/ts.md b/static/usage/loading/spinners/angular/ts.md
index 520c3f410f3..7e522cb3a64 100644
--- a/static/usage/loading/spinners/angular/ts.md
+++ b/static/usage/loading/spinners/angular/ts.md
@@ -4,19 +4,19 @@ import { Component } from '@angular/core';
 import { LoadingController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
 
   async showLoading() {
     const loading = await this.loadingCtrl.create({
       message: 'Loading...',
       duration: 3000,
-      spinner: 'circles'
+      spinner: 'circles',
     });
-    
+
     loading.present();
   }
 }
diff --git a/static/usage/loading/spinners/index.md b/static/usage/loading/spinners/index.md
index 291bdf39ef9..abdf70953c1 100644
--- a/static/usage/loading/spinners/index.md
+++ b/static/usage/loading/spinners/index.md
@@ -7,14 +7,17 @@ import vue from './vue.md';
 import angularHTML from './angular/html.md';
 import angularTS from './angular/ts.md';
 
-<Playground code={{
-  javascript, 
-  react, 
-  vue, 
-  angular: {
-    'files': {
-      'src/app/app.component.html': angularHTML,
-      'src/app/app.component.ts': angularTS
-    }
-  }
-}} src="usage/loading/spinners/demo.html" />
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/loading/spinners/demo.html"
+/>
diff --git a/static/usage/loading/theming/angular/ts.md b/static/usage/loading/theming/angular/ts.md
index e4235d656b0..800335c91ad 100644
--- a/static/usage/loading/theming/angular/ts.md
+++ b/static/usage/loading/theming/angular/ts.md
@@ -4,19 +4,19 @@ import { Component } from '@angular/core';
 import { LoadingController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
 
   async showLoading() {
     const loading = await this.loadingCtrl.create({
       message: 'Loading...',
       duration: 3000,
-      cssClass: 'custom-loading'
+      cssClass: 'custom-loading',
     });
-    
+
     loading.present();
   }
 }
diff --git a/static/usage/loading/theming/index.md b/static/usage/loading/theming/index.md
index 4c6d76d0ca5..bccc9bf7964 100644
--- a/static/usage/loading/theming/index.md
+++ b/static/usage/loading/theming/index.md
@@ -11,20 +11,23 @@ import angularHTML from './angular/html.md';
 import angularCSS from './angular/css.md';
 import angularTS from './angular/ts.md';
 
-<Playground code={{
-  javascript, 
-  react: {
-    'files': {
-      'src/main.tsx': reactTSX,
-      'src/main.css': reactCSS
-    }
-  },
-  vue, 
-  angular: {
-    'files': {
-      'src/app/app.component.html': angularHTML,
-      'src/app/app.component.ts': angularTS,
-      'src/global.css': angularCSS
-    }
-  }
-}} src="usage/loading/theming/demo.html" />
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+        'src/global.css': angularCSS,
+      },
+    },
+  }}
+  src="usage/loading/theming/demo.html"
+/>
diff --git a/static/usage/modal/can-dismiss/boolean/angular/app_component_html.md b/static/usage/modal/can-dismiss/boolean/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/can-dismiss/boolean/angular/app_component_html.md
rename to static/usage/modal/can-dismiss/boolean/angular/example_component_html.md
diff --git a/static/usage/modal/can-dismiss/boolean/angular/app_component_ts.md b/static/usage/modal/can-dismiss/boolean/angular/example_component_ts.md
similarity index 79%
rename from static/usage/modal/can-dismiss/boolean/angular/app_component_ts.md
rename to static/usage/modal/can-dismiss/boolean/angular/example_component_ts.md
index 92d5a737d20..b13c147dc2d 100644
--- a/static/usage/modal/can-dismiss/boolean/angular/app_component_ts.md
+++ b/static/usage/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   canDismiss = false;
 
   presentingElement = null;
diff --git a/static/usage/modal/can-dismiss/boolean/index.md b/static/usage/modal/can-dismiss/boolean/index.md
index 14b2baad0cf..4d45ab53668 100644
--- a/static/usage/modal/can-dismiss/boolean/index.md
+++ b/static/usage/modal/can-dismiss/boolean/index.md
@@ -5,8 +5,8 @@ import vue from './vue.md';
 
 import react from './react.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -15,8 +15,8 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/modal/can-dismiss/boolean/javascript.md b/static/usage/modal/can-dismiss/boolean/javascript.md
index 5cd93dfcf3e..845ff0ec8c5 100644
--- a/static/usage/modal/can-dismiss/boolean/javascript.md
+++ b/static/usage/modal/can-dismiss/boolean/javascript.md
@@ -1,34 +1,32 @@
 ```html
-<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>
+<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>
+    <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');
diff --git a/static/usage/modal/can-dismiss/function/angular/app_component_html.md b/static/usage/modal/can-dismiss/function/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/can-dismiss/function/angular/app_component_html.md
rename to static/usage/modal/can-dismiss/function/angular/example_component_html.md
diff --git a/static/usage/modal/can-dismiss/function/angular/app_component_ts.md b/static/usage/modal/can-dismiss/function/angular/example_component_ts.md
similarity index 87%
rename from static/usage/modal/can-dismiss/function/angular/app_component_ts.md
rename to static/usage/modal/can-dismiss/function/angular/example_component_ts.md
index e17ffffa947..a62465cfee3 100644
--- a/static/usage/modal/can-dismiss/function/angular/app_component_ts.md
+++ b/static/usage/modal/can-dismiss/function/angular/example_component_ts.md
@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
 import { ActionSheetController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   presentingElement = undefined;
 
   constructor(private actionSheetCtrl: ActionSheetController) {}
diff --git a/static/usage/modal/can-dismiss/function/index.md b/static/usage/modal/can-dismiss/function/index.md
index dcb1af227ce..544f2229702 100644
--- a/static/usage/modal/can-dismiss/function/index.md
+++ b/static/usage/modal/can-dismiss/function/index.md
@@ -5,8 +5,8 @@ import vue from './vue.md';
 
 import react from './react.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -15,8 +15,8 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/modal/can-dismiss/function/javascript.md b/static/usage/modal/can-dismiss/function/javascript.md
index 22f1654d90f..e48c06bacb5 100644
--- a/static/usage/modal/can-dismiss/function/javascript.md
+++ b/static/usage/modal/can-dismiss/function/javascript.md
@@ -1,30 +1,28 @@
 ```html
-<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" 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>
-</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" 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');
diff --git a/static/usage/modal/card/basic/angular/app_component_html.md b/static/usage/modal/card/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/card/basic/angular/app_component_html.md
rename to static/usage/modal/card/basic/angular/example_component_html.md
diff --git a/static/usage/modal/card/basic/angular/app_component_ts.md b/static/usage/modal/card/basic/angular/example_component_ts.md
similarity index 70%
rename from static/usage/modal/card/basic/angular/app_component_ts.md
rename to static/usage/modal/card/basic/angular/example_component_ts.md
index 3bd7bf69567..5a28a156a32 100644
--- a/static/usage/modal/card/basic/angular/app_component_ts.md
+++ b/static/usage/modal/card/basic/angular/example_component_ts.md
@@ -2,10 +2,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
   presentingElement = null;
 
diff --git a/static/usage/modal/card/basic/index.md b/static/usage/modal/card/basic/index.md
index 33091d2eb94..01b8b4144c3 100644
--- a/static/usage/modal/card/basic/index.md
+++ b/static/usage/modal/card/basic/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import vue from './vue.md';
 import react from './react.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -14,8 +14,8 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/modal/card/basic/javascript.md b/static/usage/modal/card/basic/javascript.md
index c17d8c85401..73a5f6de911 100644
--- a/static/usage/modal/card/basic/javascript.md
+++ b/static/usage/modal/card/basic/javascript.md
@@ -1,67 +1,65 @@
 ```html
-<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>
+<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>
+    <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');
diff --git a/static/usage/modal/controller/angular/app_module_ts.md b/static/usage/modal/controller/angular/app_module_ts.md
index afd018f31fb..e9e4f00dff3 100644
--- a/static/usage/modal/controller/angular/app_module_ts.md
+++ b/static/usage/modal/controller/angular/app_module_ts.md
@@ -6,11 +6,13 @@ 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, ModalExampleComponent],
+  declarations: [AppComponent, ExampleComponent, ModalExampleComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/static/usage/modal/controller/angular/app_component_html.md b/static/usage/modal/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/controller/angular/app_component_html.md
rename to static/usage/modal/controller/angular/example_component_html.md
diff --git a/static/usage/modal/controller/angular/app_component_ts.md b/static/usage/modal/controller/angular/example_component_ts.md
similarity index 85%
rename from static/usage/modal/controller/angular/app_component_ts.md
rename to static/usage/modal/controller/angular/example_component_ts.md
index e199eb49b49..920a2335257 100644
--- a/static/usage/modal/controller/angular/app_component_ts.md
+++ b/static/usage/modal/controller/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from './modal-example.component';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   message = 'This modal example uses the modalController to present and dismiss modals.';
 
   constructor(private modalCtrl: ModalController) {}
diff --git a/static/usage/modal/controller/index.md b/static/usage/modal/controller/index.md
index 1cbcfa2c334..ccfb5509509 100644
--- a/static/usage/modal/controller/index.md
+++ b/static/usage/modal/controller/index.md
@@ -7,8 +7,8 @@ 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_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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';
 
@@ -24,8 +24,8 @@ import angular_modal_example_component_html from './angular/modal-example_compon
     },
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        '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,
@@ -34,4 +34,5 @@ import angular_modal_example_component_html from './angular/modal-example_compon
   }}
   src="usage/modal/controller/demo.html"
   devicePreview
+  includeIonContent={false}
 />
diff --git a/static/usage/modal/controller/javascript.md b/static/usage/modal/controller/javascript.md
index 121ddf31ac3..dc4786be8cf 100644
--- a/static/usage/modal/controller/javascript.md
+++ b/static/usage/modal/controller/javascript.md
@@ -1,15 +1,13 @@
 ```html
-<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>
+<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 () => {
diff --git a/static/usage/modal/custom-dialogs/angular/app_component_html.md b/static/usage/modal/custom-dialogs/angular/app_component_html.md
deleted file mode 100644
index 0ca991ffbbb..00000000000
--- a/static/usage/modal/custom-dialogs/angular/app_component_html.md
+++ /dev/null
@@ -1,35 +0,0 @@
-```html
-<ion-app>
-  <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>
-</ion-app>
-```
diff --git a/static/usage/modal/custom-dialogs/angular/example_component_html.md b/static/usage/modal/custom-dialogs/angular/example_component_html.md
new file mode 100644
index 00000000000..d8f43b4b55d
--- /dev/null
+++ b/static/usage/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/modal/custom-dialogs/index.md b/static/usage/modal/custom-dialogs/index.md
index 740f5c470ae..ac87630da0b 100644
--- a/static/usage/modal/custom-dialogs/index.md
+++ b/static/usage/modal/custom-dialogs/index.md
@@ -7,7 +7,7 @@ import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
 import angular_css from './angular/angular_css.md';
-import angular_app_component_html from './angular/app_component_html.md';
+import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
   code={{
@@ -21,11 +21,12 @@ import angular_app_component_html from './angular/app_component_html.md';
     },
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
+        'src/app/example.component.html': angular_example_component_html,
         'src/global.css': angular_css,
       },
     },
   }}
   src="usage/modal/custom-dialogs/demo.html"
   devicePreview
+  includeIonContent={false}
 />
diff --git a/static/usage/modal/custom-dialogs/javascript.md b/static/usage/modal/custom-dialogs/javascript.md
index d06619bd31e..b465debd41b 100644
--- a/static/usage/modal/custom-dialogs/javascript.md
+++ b/static/usage/modal/custom-dialogs/javascript.md
@@ -7,58 +7,56 @@
     --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-app>
-  <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>
-</ion-app>
+<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');
diff --git a/static/usage/modal/inline/basic/angular/app_component_html.md b/static/usage/modal/inline/basic/angular/app_component_html.md
deleted file mode 100644
index f9efa31aa4c..00000000000
--- a/static/usage/modal/inline/basic/angular/app_component_html.md
+++ /dev/null
@@ -1,34 +0,0 @@
-```html
-<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>{{ 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>
-</ion-app>
-```
diff --git a/static/usage/modal/inline/basic/angular/app_module_ts.md b/static/usage/modal/inline/basic/angular/app_module_ts.md
deleted file mode 100644
index 50df4b9f1f4..00000000000
--- a/static/usage/modal/inline/basic/angular/app_module_ts.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```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';
-
-@NgModule({
-  imports: [BrowserModule, IonicModule.forRoot({}), FormsModule],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/modal/inline/basic/angular/example_component_html.md b/static/usage/modal/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..d89c7626f3d
--- /dev/null
+++ b/static/usage/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/modal/inline/basic/angular/app_component_ts.md b/static/usage/modal/inline/basic/angular/example_component_ts.md
similarity index 87%
rename from static/usage/modal/inline/basic/angular/app_component_ts.md
rename to static/usage/modal/inline/basic/angular/example_component_ts.md
index a461481aed5..a21954ec5f1 100644
--- a/static/usage/modal/inline/basic/angular/app_component_ts.md
+++ b/static/usage/modal/inline/basic/angular/example_component_ts.md
@@ -4,10 +4,10 @@ import { IonModal } from '@ionic/angular';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   @ViewChild(IonModal) modal: IonModal;
 
   message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
diff --git a/static/usage/modal/inline/basic/index.md b/static/usage/modal/inline/basic/index.md
index ac2f4b99eae..7cd5382ecfb 100644
--- a/static/usage/modal/inline/basic/index.md
+++ b/static/usage/modal/inline/basic/index.md
@@ -4,9 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -15,12 +14,12 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
+        '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/basic/javascript.md b/static/usage/modal/inline/basic/javascript.md
index 782ec7fa2b9..cffa297eebd 100644
--- a/static/usage/modal/inline/basic/javascript.md
+++ b/static/usage/modal/inline/basic/javascript.md
@@ -1,34 +1,33 @@
 ```html
-<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-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>
-</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-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');
 
diff --git a/static/usage/modal/inline/is-open/angular/app_component_html.md b/static/usage/modal/inline/is-open/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/inline/is-open/angular/app_component_html.md
rename to static/usage/modal/inline/is-open/angular/example_component_html.md
diff --git a/static/usage/modal/inline/is-open/angular/app_component_ts.md b/static/usage/modal/inline/is-open/angular/example_component_ts.md
similarity index 61%
rename from static/usage/modal/inline/is-open/angular/app_component_ts.md
rename to static/usage/modal/inline/is-open/angular/example_component_ts.md
index 6caed562c61..321577939a9 100644
--- a/static/usage/modal/inline/is-open/angular/app_component_ts.md
+++ b/static/usage/modal/inline/is-open/angular/example_component_ts.md
@@ -2,10 +2,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   isModalOpen = false;
 
   setOpen(isOpen: boolean) {
diff --git a/static/usage/modal/inline/is-open/index.md b/static/usage/modal/inline/is-open/index.md
index cbbf453ba07..a756f1209b8 100644
--- a/static/usage/modal/inline/is-open/index.md
+++ b/static/usage/modal/inline/is-open/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -14,11 +14,12 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        '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/inline/is-open/javascript.md b/static/usage/modal/inline/is-open/javascript.md
index 679b47ca793..1893f105d79 100644
--- a/static/usage/modal/inline/is-open/javascript.md
+++ b/static/usage/modal/inline/is-open/javascript.md
@@ -1,31 +1,29 @@
 ```html
-<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>
+<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');
diff --git a/static/usage/modal/performance/mount/demo.html b/static/usage/modal/performance/mount/demo.html
index dab4f14ba5d..e9de39b4193 100644
--- a/static/usage/modal/performance/mount/demo.html
+++ b/static/usage/modal/performance/mount/demo.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Modal | Controller</title>
+  <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>
@@ -23,12 +23,12 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <ion-button id="open-button" expand="block">Open Modal</ion-button>
-      <ion-modal trigger="open-button">
+      <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 onclick="close()">Close</ion-button>
+              <ion-button id="close">Close</ion-button>
             </ion-buttons>
             <ion-title>Modal</ion-title>
           </ion-toolbar>
@@ -43,6 +43,9 @@
   <script>
     const modal = document.querySelector('ion-modal');
 
+    const closeBtn = document.querySelector('#close');
+    closeBtn.addEventListener('click', () => close());
+
     const close = () => {
       modal.dismiss();
     }
diff --git a/static/usage/modal/performance/mount/index.md b/static/usage/modal/performance/mount/index.md
index 519479e545c..02cea360ec9 100644
--- a/static/usage/modal/performance/mount/index.md
+++ b/static/usage/modal/performance/mount/index.md
@@ -10,8 +10,9 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular
+    angular,
   }}
   src="usage/modal/performance/mount/demo.html"
   devicePreview
+  includeIonContent={false}
 />
diff --git a/static/usage/modal/performance/mount/javascript.md b/static/usage/modal/performance/mount/javascript.md
index bea51474cb8..a7dd685dad4 100644
--- a/static/usage/modal/performance/mount/javascript.md
+++ b/static/usage/modal/performance/mount/javascript.md
@@ -1,31 +1,32 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>Controller Modal</ion-title>
+    <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-button">
+  <ion-modal trigger="open-modal">
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-button onclick="close()">Close</ion-button>
+          <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-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');
 
-  function close() {
-    modal.dimiss();
-  }
+  var closeBtn = document.querySelector('#close');
+  closeBtn.addEventListener('click', () => close());
+
+  var close = () => {
+    modal.dismiss();
+  };
 </script>
 ```
diff --git a/static/usage/modal/sheet/background-content/angular/app_component_css.md b/static/usage/modal/sheet/background-content/angular/example_component_css.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/angular/app_component_css.md
rename to static/usage/modal/sheet/background-content/angular/example_component_css.md
diff --git a/static/usage/modal/sheet/background-content/angular/app_component_html.md b/static/usage/modal/sheet/background-content/angular/example_component_html.md
similarity index 98%
rename from static/usage/modal/sheet/background-content/angular/app_component_html.md
rename to static/usage/modal/sheet/background-content/angular/example_component_html.md
index 7910cca5345..286c8e66487 100644
--- a/static/usage/modal/sheet/background-content/angular/app_component_html.md
+++ b/static/usage/modal/sheet/background-content/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<ion-app>
+<div class="ion-page">
   <ion-header>
     <ion-toolbar>
       <ion-title>App</ion-title>
@@ -68,5 +68,5 @@
       </ng-template>
     </ion-modal>
   </ion-content>
-</ion-app>
+</div>
 ```
diff --git a/static/usage/modal/sheet/background-content/angular/app_component_ts.md b/static/usage/modal/sheet/background-content/angular/example_component_ts.md
similarity index 53%
rename from static/usage/modal/sheet/background-content/angular/app_component_ts.md
rename to static/usage/modal/sheet/background-content/angular/example_component_ts.md
index a9ca2c29ef5..e132d2f84c7 100644
--- a/static/usage/modal/sheet/background-content/angular/app_component_ts.md
+++ b/static/usage/modal/sheet/background-content/angular/example_component_ts.md
@@ -2,11 +2,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
 })
-export class AppComponent {
+export class ExampleComponent {
   count = 0;
 
   increment() {
diff --git a/static/usage/modal/sheet/background-content/index.md b/static/usage/modal/sheet/background-content/index.md
index b5c46d80cb6..e1ed5e241e0 100644
--- a/static/usage/modal/sheet/background-content/index.md
+++ b/static/usage/modal/sheet/background-content/index.md
@@ -4,9 +4,9 @@ import javascript from './javascript.md';
 import vue from './vue.md';
 import react from './react.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_ts.md';
-import angular_app_component_css from './angular/app_component_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_example_component_css from './angular/example_component_css.md';
 
 <Playground
   code={{
@@ -15,12 +15,13 @@ import angular_app_component_css from './angular/app_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
-        'src/app/app.component.css': angular_app_component_css,
+        '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/background-content/javascript.md b/static/usage/modal/sheet/background-content/javascript.md
index 8dcc58a4e49..7d58104e6dd 100644
--- a/static/usage/modal/sheet/background-content/javascript.md
+++ b/static/usage/modal/sheet/background-content/javascript.md
@@ -7,66 +7,64 @@
   }
 </style>
 
-<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>
+<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>
+  <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>
+  <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');
diff --git a/static/usage/modal/sheet/basic/angular.md b/static/usage/modal/sheet/basic/angular.md
index 1815875fcb3..6561e311463 100644
--- a/static/usage/modal/sheet/basic/angular.md
+++ b/static/usage/modal/sheet/basic/angular.md
@@ -1,58 +1,56 @@
 ```html
-<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-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>
-</ion-app>
+  <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/modal/sheet/basic/index.md b/static/usage/modal/sheet/basic/index.md
index 4268b9e3a96..dee06ed717b 100644
--- a/static/usage/modal/sheet/basic/index.md
+++ b/static/usage/modal/sheet/basic/index.md
@@ -14,4 +14,5 @@ import angular from './angular.md';
   }}
   src="usage/modal/sheet/basic/demo.html"
   devicePreview
+  includeIonContent={false}
 />
diff --git a/static/usage/modal/sheet/basic/javascript.md b/static/usage/modal/sheet/basic/javascript.md
index a1c772e7c5b..2fb52ea2242 100644
--- a/static/usage/modal/sheet/basic/javascript.md
+++ b/static/usage/modal/sheet/basic/javascript.md
@@ -1,58 +1,56 @@
 ```html
-<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-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>
+  <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');
diff --git a/static/usage/modal/sheet/handle-behavior/angular.md b/static/usage/modal/sheet/handle-behavior/angular.md
index 952d9b82fdd..d6f30b1ca8f 100644
--- a/static/usage/modal/sheet/handle-behavior/angular.md
+++ b/static/usage/modal/sheet/handle-behavior/angular.md
@@ -1,27 +1,25 @@
 ```html
-<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-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>
-</ion-app>
+  <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/modal/sheet/handle-behavior/index.md b/static/usage/modal/sheet/handle-behavior/index.md
index 1bf8a6a03a7..4965f22c52e 100644
--- a/static/usage/modal/sheet/handle-behavior/index.md
+++ b/static/usage/modal/sheet/handle-behavior/index.md
@@ -14,4 +14,5 @@ import angular from './angular.md';
   }}
   src="usage/modal/sheet/handle-behavior/demo.html"
   devicePreview
+  includeIonContent={false}
 />
diff --git a/static/usage/modal/sheet/handle-behavior/javascript.md b/static/usage/modal/sheet/handle-behavior/javascript.md
index 8bee7c4d560..8215dd69636 100644
--- a/static/usage/modal/sheet/handle-behavior/javascript.md
+++ b/static/usage/modal/sheet/handle-behavior/javascript.md
@@ -1,22 +1,20 @@
 ```html
-<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-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>
+  <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');
diff --git a/static/usage/modal/styling/animations/angular/app_component_html.md b/static/usage/modal/styling/animations/angular/app_component_html.md
deleted file mode 100644
index 3d649fe1e24..00000000000
--- a/static/usage/modal/styling/animations/angular/app_component_html.md
+++ /dev/null
@@ -1,65 +0,0 @@
-```html
-<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 #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>
-</ion-app>
-```
diff --git a/static/usage/modal/styling/animations/angular/example_component_html.md b/static/usage/modal/styling/animations/angular/example_component_html.md
new file mode 100644
index 00000000000..befb0873d45
--- /dev/null
+++ b/static/usage/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/modal/styling/animations/angular/app_component_ts.md b/static/usage/modal/styling/animations/angular/example_component_ts.md
similarity index 89%
rename from static/usage/modal/styling/animations/angular/app_component_ts.md
rename to static/usage/modal/styling/animations/angular/example_component_ts.md
index 15ce3395f55..c4a743b2745 100644
--- a/static/usage/modal/styling/animations/angular/app_component_ts.md
+++ b/static/usage/modal/styling/animations/angular/example_component_ts.md
@@ -3,11 +3,10 @@ import { Component } from '@angular/core';
 import { AnimationController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private animationCtrl: AnimationController) {}
 
   enterAnimation = (baseEl: HTMLElement) => {
diff --git a/static/usage/modal/styling/animations/index.md b/static/usage/modal/styling/animations/index.md
index 7174271b0e4..6d9320ebe41 100644
--- a/static/usage/modal/styling/animations/index.md
+++ b/static/usage/modal/styling/animations/index.md
@@ -6,8 +6,8 @@ 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_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -21,11 +21,12 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        '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/animations/react.md b/static/usage/modal/styling/animations/react.md
index 35dd9a966c0..06dfa9d70ff 100644
--- a/static/usage/modal/styling/animations/react.md
+++ b/static/usage/modal/styling/animations/react.md
@@ -56,7 +56,7 @@ function Example() {
           <IonTitle>App</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent className="ion-padding">
         <IonButton id="open-modal" expand="block">
           Open Modal
         </IonButton>
diff --git a/static/usage/modal/styling/theming/angular/app_component_html.md b/static/usage/modal/styling/theming/angular/app_component_html.md
deleted file mode 100644
index 8916dc6b2fe..00000000000
--- a/static/usage/modal/styling/theming/angular/app_component_html.md
+++ /dev/null
@@ -1,63 +0,0 @@
-```html
-<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 #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>
-</ion-app>
-```
diff --git a/static/usage/modal/styling/theming/angular/example_component_html.md b/static/usage/modal/styling/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..2d18a6f26d9
--- /dev/null
+++ b/static/usage/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/modal/styling/theming/angular/angular_css.md b/static/usage/modal/styling/theming/angular/global_css.md
similarity index 100%
rename from static/usage/modal/styling/theming/angular/angular_css.md
rename to static/usage/modal/styling/theming/angular/global_css.md
diff --git a/static/usage/modal/styling/theming/index.md b/static/usage/modal/styling/theming/index.md
index 813c592f5da..c28df0b94b0 100644
--- a/static/usage/modal/styling/theming/index.md
+++ b/static/usage/modal/styling/theming/index.md
@@ -6,8 +6,8 @@ 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_css from './angular/angular_css.md';
-import angular_app_component_html from './angular/app_component_html.md';
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
   code={{
@@ -21,11 +21,12 @@ import angular_app_component_html from './angular/app_component_html.md';
     },
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/global.css': angular_css,
+        '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/modal/styling/theming/react/main_tsx.md b/static/usage/modal/styling/theming/react/main_tsx.md
index 5d45a784d9d..7c8509879ab 100644
--- a/static/usage/modal/styling/theming/react/main_tsx.md
+++ b/static/usage/modal/styling/theming/react/main_tsx.md
@@ -32,7 +32,7 @@ function Example() {
           <IonTitle>App</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent className="ion-padding">
         <IonButton id="open-modal" expand="block">
           Open Modal
         </IonButton>
diff --git a/static/usage/picker/multiple-column/angular/app_component_html.md b/static/usage/picker/multiple-column/angular/app_component_html.md
deleted file mode 100644
index 833ada7ed0e..00000000000
--- a/static/usage/picker/multiple-column/angular/app_component_html.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <ion-button (click)="openPicker()">Open</ion-button>
-</ion-content>
-```
diff --git a/static/usage/picker/multiple-column/angular/example_component_html.md b/static/usage/picker/multiple-column/angular/example_component_html.md
new file mode 100644
index 00000000000..1e25fa99c40
--- /dev/null
+++ b/static/usage/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/picker/multiple-column/angular/app_component_ts.md b/static/usage/picker/multiple-column/angular/example_component_ts.md
similarity index 94%
rename from static/usage/picker/multiple-column/angular/app_component_ts.md
rename to static/usage/picker/multiple-column/angular/example_component_ts.md
index 3120100c74d..ce535b1391a 100644
--- a/static/usage/picker/multiple-column/angular/app_component_ts.md
+++ b/static/usage/picker/multiple-column/angular/example_component_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { PickerController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}
 
   async openPicker() {
diff --git a/static/usage/picker/multiple-column/index.md b/static/usage/picker/multiple-column/index.md
index 352727eaa5d..2a4a9ea2786 100644
--- a/static/usage/picker/multiple-column/index.md
+++ b/static/usage/picker/multiple-column/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angular_app_component_ts from './angular/app_component_ts.md';
-import angular_app_component_html from './angular/app_component_html.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={{
@@ -14,8 +14,8 @@ import angular_app_component_html from './angular/app_component_html.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/picker/multiple-column/javascript.md b/static/usage/picker/multiple-column/javascript.md
index 7c1534c2bbd..5024f90a43f 100644
--- a/static/usage/picker/multiple-column/javascript.md
+++ b/static/usage/picker/multiple-column/javascript.md
@@ -1,9 +1,6 @@
 ```html
-<ion-app>
-  <ion-content class="ion-padding">
-    <ion-button onclick="openPicker()">Open</ion-button>
-  </ion-content>
-</ion-app>
+<ion-button onclick="openPicker()">Open</ion-button>
+
 <script>
   async function openPicker() {
     const picker = await pickerController.create({
diff --git a/static/usage/picker/multiple-column/react.md b/static/usage/picker/multiple-column/react.md
index 45d59c3b5f6..1d0a47e178c 100644
--- a/static/usage/picker/multiple-column/react.md
+++ b/static/usage/picker/multiple-column/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';
+import { IonButton, useIonPicker } from '@ionic/react';
 
 function Example() {
   const [present] = useIonPicker();
@@ -75,13 +75,7 @@ function Example() {
     });
   };
 
-  return (
-    <IonPage>
-      <IonContent className="ion-padding">
-        <IonButton onClick={openPicker}>Open</IonButton>
-      </IonContent>
-    </IonPage>
-  );
+  return <IonButton onClick={openPicker}>Open</IonButton>;
 }
 
 export default Example;
diff --git a/static/usage/picker/multiple-column/vue.md b/static/usage/picker/multiple-column/vue.md
index ccb42048234..07418f16bbf 100644
--- a/static/usage/picker/multiple-column/vue.md
+++ b/static/usage/picker/multiple-column/vue.md
@@ -1,16 +1,14 @@
 ```html
 <template>
-  <ion-content class="ion-padding">
-    <ion-button @click="openPicker()">Open</ion-button>
-  </ion-content>
+  <ion-button @click="openPicker()">Open</ion-button>
 </template>
 
 <script>
-  import { IonButton, IonContent, pickerController } from '@ionic/vue';
+  import { IonButton, pickerController } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonButton, IonContent },
+    components: { IonButton },
     data() {
       return {
         message: '',
diff --git a/static/usage/picker/single-column/angular/app_component_html.md b/static/usage/picker/single-column/angular/app_component_html.md
deleted file mode 100644
index 833ada7ed0e..00000000000
--- a/static/usage/picker/single-column/angular/app_component_html.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <ion-button (click)="openPicker()">Open</ion-button>
-</ion-content>
-```
diff --git a/static/usage/picker/single-column/angular/example_component_html.md b/static/usage/picker/single-column/angular/example_component_html.md
new file mode 100644
index 00000000000..1e25fa99c40
--- /dev/null
+++ b/static/usage/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/picker/single-column/angular/app_component_ts.md b/static/usage/picker/single-column/angular/example_component_ts.md
similarity index 91%
rename from static/usage/picker/single-column/angular/app_component_ts.md
rename to static/usage/picker/single-column/angular/example_component_ts.md
index b63efbc3a81..849da3f0f16 100644
--- a/static/usage/picker/single-column/angular/app_component_ts.md
+++ b/static/usage/picker/single-column/angular/example_component_ts.md
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { PickerController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}
 
   async openPicker() {
diff --git a/static/usage/picker/single-column/index.md b/static/usage/picker/single-column/index.md
index 7106f48d4be..f102c5b4209 100644
--- a/static/usage/picker/single-column/index.md
+++ b/static/usage/picker/single-column/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angular_app_component_ts from './angular/app_component_ts.md';
-import angular_app_component_html from './angular/app_component_html.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={{
@@ -14,8 +14,8 @@ import angular_app_component_html from './angular/app_component_html.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/picker/single-column/javascript.md b/static/usage/picker/single-column/javascript.md
index 82ab5ff2a0b..ca15ad55132 100644
--- a/static/usage/picker/single-column/javascript.md
+++ b/static/usage/picker/single-column/javascript.md
@@ -1,9 +1,6 @@
 ```html
-<ion-app>
-  <ion-content class="ion-padding">
-    <ion-button onclick="openPicker()">Open</ion-button>
-  </ion-content>
-</ion-app>
+<ion-button onclick="openPicker()">Open</ion-button>
+
 <script>
   async function openPicker() {
     const picker = await pickerController.create({
diff --git a/static/usage/picker/single-column/react.md b/static/usage/picker/single-column/react.md
index fad51c54717..d0c351a9368 100644
--- a/static/usage/picker/single-column/react.md
+++ b/static/usage/picker/single-column/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';
+import { IonButton, useIonPicker } from '@ionic/react';
 
 function Example() {
   const [present] = useIonPicker();
@@ -45,13 +45,7 @@ function Example() {
     });
   };
 
-  return (
-    <IonPage>
-      <IonContent className="ion-padding">
-        <IonButton onClick={openPicker}>Open</IonButton>
-      </IonContent>
-    </IonPage>
-  );
+  return <IonButton onClick={openPicker}>Open</IonButton>;
 }
 
 export default Example;
diff --git a/static/usage/picker/single-column/vue.md b/static/usage/picker/single-column/vue.md
index 9771465901f..71660c96aeb 100644
--- a/static/usage/picker/single-column/vue.md
+++ b/static/usage/picker/single-column/vue.md
@@ -1,16 +1,14 @@
 ```html
 <template>
-  <ion-content class="ion-padding">
-    <ion-button @click="openPicker()">Open</ion-button>
-  </ion-content>
+  <ion-button @click="openPicker()">Open</ion-button>
 </template>
 
 <script>
-  import { IonButton, IonContent, pickerController } from '@ionic/vue';
+  import { IonButton, pickerController } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonButton, IonContent },
+    components: { IonButton },
     data() {
       return {
         message: '',
diff --git a/static/usage/popover/customization/positioning/angular/angular_ts.md b/static/usage/popover/customization/positioning/angular/angular_ts.md
index f0a038f5b8a..4db53a836a9 100644
--- a/static/usage/popover/customization/positioning/angular/angular_ts.md
+++ b/static/usage/popover/customization/positioning/angular/angular_ts.md
@@ -2,10 +2,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
 })
-export class AppComponent { }
-
-```
\ No newline at end of file
+export class ExampleComponent {}
+```
diff --git a/static/usage/popover/customization/positioning/index.md b/static/usage/popover/customization/positioning/index.md
index 993b5836dd1..f50d296084e 100644
--- a/static/usage/popover/customization/positioning/index.md
+++ b/static/usage/popover/customization/positioning/index.md
@@ -17,17 +17,17 @@ import angularTS from './angular/angular_ts.md';
     react: {
       files: {
         'src/main.tsx': reactTS,
-        'src/main.css': reactCSS
-      }
+        'src/main.css': reactCSS,
+      },
     },
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.css': angularCSS,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/popover/customization/positioning/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/popover/customization/sizing/react.md b/static/usage/popover/customization/sizing/react.md
index 0b7eca33f1a..35b60534df6 100644
--- a/static/usage/popover/customization/sizing/react.md
+++ b/static/usage/popover/customization/sizing/react.md
@@ -3,7 +3,7 @@ import React from 'react';
 import { IonButton, IonContent, IonPopover } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
+    <>
       <IonButton id="auto-trigger">Size=Auto</IonButton>
       <IonPopover trigger="auto-trigger" size="auto">
         <IonContent class="ion-padding">Hello!</IonContent>
@@ -13,7 +13,7 @@ function Example() {
       <IonPopover trigger="cover-trigger" size="cover">
         <IonContent class="ion-padding">Hello!</IonContent>
       </IonPopover>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/popover/customization/sizing/vue.md b/static/usage/popover/customization/sizing/vue.md
index 0e5db888f03..72d20c9fa77 100644
--- a/static/usage/popover/customization/sizing/vue.md
+++ b/static/usage/popover/customization/sizing/vue.md
@@ -1,24 +1,22 @@
 ```html
 <template>
-  <ion-content>
-    <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="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>
-  </ion-content>
+  <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, IonContent, IonPopover } from '@ionic/vue';
+  import { IonButton, IonPopover } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonButton, IonContent, IonPopover },
+    components: { IonButton, IonPopover },
   });
 </script>
 ```
diff --git a/static/usage/popover/customization/styling/index.md b/static/usage/popover/customization/styling/index.md
index 69131291cba..6b74ad461db 100644
--- a/static/usage/popover/customization/styling/index.md
+++ b/static/usage/popover/customization/styling/index.md
@@ -16,16 +16,16 @@ import angularCSS from './angular/angular_css.md';
     react: {
       files: {
         'src/main.tsx': reactTS,
-        'src/main.css': reactCSS
-      }
+        'src/main.css': reactCSS,
+      },
     },
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
+        'src/app/example.component.html': angularHTML,
         'src/global.css': angularCSS
       }
     }
   }}
   src="usage/popover/customization/styling/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/popover/customization/styling/react/react_ts.md b/static/usage/popover/customization/styling/react/react_ts.md
index 525507f60cd..1a905f8056d 100644
--- a/static/usage/popover/customization/styling/react/react_ts.md
+++ b/static/usage/popover/customization/styling/react/react_ts.md
@@ -6,12 +6,12 @@ import './main.css';
 
 function Example() {
   return (
-    <IonContent>
+    <>
       <IonButton id="trigger-button">Click Me</IonButton>
       <IonPopover trigger="trigger-button">
         <IonContent className="ion-padding">Hello Styled World!</IonContent>
       </IonPopover>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/popover/customization/styling/vue.md b/static/usage/popover/customization/styling/vue.md
index b0454796b21..964eeb09bfc 100644
--- a/static/usage/popover/customization/styling/vue.md
+++ b/static/usage/popover/customization/styling/vue.md
@@ -1,19 +1,17 @@
 ```html
 <template>
-  <ion-content>
-    <ion-button id="trigger-button">Click Me</ion-button>
-    <ion-popover trigger="trigger-button">
-      <ion-content>Hello Styled World!</ion-content>
-    </ion-popover>
-  </ion-content>
+  <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, IonContent, IonPopover } from '@ionic/vue';
+  import { IonButton, IonPopover } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonButton, IonContent, IonPopover },
+    components: { IonButton, IonPopover },
   });
 </script>
 
diff --git a/static/usage/popover/nested/react.md b/static/usage/popover/nested/react.md
index 7df90490419..eb84d67effb 100644
--- a/static/usage/popover/nested/react.md
+++ b/static/usage/popover/nested/react.md
@@ -3,26 +3,34 @@ import React from 'react';
 import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
+    <>
       <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>
+            <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>
+                  <IonItem button={true} detail={false}>
+                    Nested option
+                  </IonItem>
                 </IonList>
               </IonContent>
             </IonPopover>
           </IonList>
         </IonContent>
       </IonPopover>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/popover/nested/vue.md b/static/usage/popover/nested/vue.md
index eb153ce0558..04a7b6d7e36 100644
--- a/static/usage/popover/nested/vue.md
+++ b/static/usage/popover/nested/vue.md
@@ -1,33 +1,31 @@
 ```html
 <template>
-  <ion-content>
-    <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-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>
-  </ion-content>
+        <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, IonContent, IonItem, IonList, IonPopover } from '@ionic/vue';
+  import { IonButton, IonItem, IonList, IonPopover } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonButton, IonContent, IonItem, IonList, IonPopover },
+    components: { IonButton, IonItem, IonList, IonPopover },
   });
 </script>
 ```
diff --git a/static/usage/popover/presenting/controller/angular/angular_module.md b/static/usage/popover/presenting/controller/angular/angular_module.md
index d162dd7b840..887ca3acf89 100644
--- a/static/usage/popover/presenting/controller/angular/angular_module.md
+++ b/static/usage/popover/presenting/controller/angular/angular_module.md
@@ -1,14 +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, IonicModule.forRoot({})],
-  declarations: [AppComponent, PopoverComponent],
+  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PopoverComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
-```
\ No newline at end of file
+```
diff --git a/static/usage/popover/presenting/controller/angular/angular_popover_ts.md b/static/usage/popover/presenting/controller/angular/angular_popover_ts.md
index d56d7a6a35b..2900a32240c 100644
--- a/static/usage/popover/presenting/controller/angular/angular_popover_ts.md
+++ b/static/usage/popover/presenting/controller/angular/angular_popover_ts.md
@@ -3,10 +3,8 @@ import { Component } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
 
 @Component({
-  selector: 'popover-component',
+  selector: 'app-popover',
   templateUrl: 'popover.component.html',
 })
-export class PopoverComponent {
-  constructor() {}
-}
-```
\ No newline at end of file
+export class PopoverComponent {}
+```
diff --git a/static/usage/popover/presenting/controller/angular/angular_ts.md b/static/usage/popover/presenting/controller/angular/angular_ts.md
index 9481ad07555..bf0e0165d78 100644
--- a/static/usage/popover/presenting/controller/angular/angular_ts.md
+++ b/static/usage/popover/presenting/controller/angular/angular_ts.md
@@ -1,25 +1,27 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+
 import { PopoverController } from '@ionic/angular';
+
 import { PopoverComponent } from './popover.component';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
-  roleMsg = "";
+export class ExampleComponent {
+  roleMsg = '';
 
   constructor(public popoverController: PopoverController) {}
 
   async presentPopover(e: Event) {
     const popover = await this.popoverController.create({
       component: PopoverComponent,
-      event: e
+      event: e,
     });
 
     await popover.present();
-  
+
     const { role } = await popover.onDidDismiss();
     this.roleMsg = `Popover dismissed with role: ${role}`;
   }
diff --git a/static/usage/popover/presenting/controller/index.md b/static/usage/popover/presenting/controller/index.md
index e997458a49c..e6a1e83f6ad 100644
--- a/static/usage/popover/presenting/controller/index.md
+++ b/static/usage/popover/presenting/controller/index.md
@@ -20,18 +20,18 @@ import angularModule from './angular/angular_module.md';
     vue: {
       files: {
         'src/components/Example.vue': vueMain,
-        'src/components/Popover.vue': vuePopover
-      }
+        'src/components/Popover.vue': vuePopover,
+      },
     },
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS,
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
         'src/app/popover.component.html': angularPopoverHTML,
         'src/app/popover.component.ts': angularPopoverTS,
-        'src/app/app.module.ts': angularModule
-      }
-    }
+        'src/app/app.module.ts': angularModule,
+      },
+    },
   }}
   src="usage/popover/presenting/controller/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/popover/presenting/controller/react.md b/static/usage/popover/presenting/controller/react.md
index 1a946c674a2..8d772ca8ef6 100644
--- a/static/usage/popover/presenting/controller/react.md
+++ b/static/usage/popover/presenting/controller/react.md
@@ -6,18 +6,24 @@ const Popover = () => <IonContent className="ion-padding">Hello World!</IonConte
 
 function Example() {
   const [present, dismiss] = useIonPopover(Popover, {
-    onDismiss: (data: any, role: string) => dismiss(data, role)
+    onDismiss: (data: any, role: string) => dismiss(data, role),
   });
   const [roleMsg, setRoleMsg] = useState('');
 
   return (
-    <IonContent>
-      <IonButton onClick={(e: any) => present({
-        event: e,
-        onDidDismiss: (e: CustomEvent) => setRoleMsg(`Popover dismissed with role: ${e.detail.role}`)
-      })}>Click Me</IonButton>
+    <>
+      <IonButton
+        onClick={(e: any) =>
+          present({
+            event: e,
+            onDidDismiss: (e: CustomEvent) => setRoleMsg(`Popover dismissed with role: ${e.detail.role}`),
+          })
+        }
+      >
+        Click Me
+      </IonButton>
       <p>{roleMsg}</p>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/popover/presenting/controller/vue/vue_main.md b/static/usage/popover/presenting/controller/vue/vue_main.md
index f3f17dfe72b..36e0e51d3d8 100644
--- a/static/usage/popover/presenting/controller/vue/vue_main.md
+++ b/static/usage/popover/presenting/controller/vue/vue_main.md
@@ -1,34 +1,32 @@
 ```html
 <template>
-  <ion-content>
-    <ion-button @click="openPopover">Click Me</ion-button>
-    <p>{{ roleMsg }}</p>
-  </ion-content>
+  <ion-button @click="openPopover">Click Me</ion-button>
+  <p>{{ roleMsg }}</p>
 </template>
 
 <script lang="ts">
-import { IonButton, IonContent, popoverController } from '@ionic/vue';
-import Popover from './Popover.vue';
+  import { IonButton, popoverController } from '@ionic/vue';
+  import Popover from './Popover.vue';
 
-export default {
-  components: { IonButton, IonContent },
-  data() {
-    return {
-      roleMsg: ''
-    };
-  },
-  methods: {
-    async openPopover(ev: Event) {
-      const popover = await popoverController.create({
-        component: Popover,
-        event: ev
-      });
-      await popover.present();
+  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}`;
+        const { role } = await popover.onDidDismiss();
+        this.roleMsg = `Popover dismissed with role: ${role}`;
+      },
     },
-  },
-}
+  };
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/popover/presenting/inline-isopen/angular/angular_ts.md b/static/usage/popover/presenting/inline-isopen/angular/angular_ts.md
index 71d8c64f93e..ef604e603d9 100644
--- a/static/usage/popover/presenting/inline-isopen/angular/angular_ts.md
+++ b/static/usage/popover/presenting/inline-isopen/angular/angular_ts.md
@@ -2,12 +2,11 @@
 import { Component, ViewChild } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   @ViewChild('popover') popover;
-  constructor() {}
 
   isOpen = false;
 
diff --git a/static/usage/popover/presenting/inline-isopen/index.md b/static/usage/popover/presenting/inline-isopen/index.md
index 030f2ab791e..a23bef68095 100644
--- a/static/usage/popover/presenting/inline-isopen/index.md
+++ b/static/usage/popover/presenting/inline-isopen/index.md
@@ -15,10 +15,10 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS,
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/popover/presenting/inline-isopen/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/popover/presenting/inline-isopen/react.md b/static/usage/popover/presenting/inline-isopen/react.md
index 6c35a136353..1d0b68fd1f5 100644
--- a/static/usage/popover/presenting/inline-isopen/react.md
+++ b/static/usage/popover/presenting/inline-isopen/react.md
@@ -12,12 +12,12 @@ function Example() {
   };
 
   return (
-    <IonContent>
+    <>
       <IonButton onClick={openPopover}>Click Me</IonButton>
       <IonPopover ref={popover} isOpen={popoverOpen} onDidDismiss={() => setPopoverOpen(false)}>
         <IonContent class="ion-padding">Hello World!</IonContent>
       </IonPopover>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/popover/presenting/inline-isopen/vue.md b/static/usage/popover/presenting/inline-isopen/vue.md
index 1bca8f0e5b0..fbbaf065a17 100644
--- a/static/usage/popover/presenting/inline-isopen/vue.md
+++ b/static/usage/popover/presenting/inline-isopen/vue.md
@@ -1,15 +1,9 @@
 ```html
 <template>
-  <ion-content>
-    <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>
-  </ion-content>
+  <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">
@@ -21,15 +15,15 @@
     data() {
       return {
         popoverOpen: false,
-        event: null
-      }
+        event: null,
+      };
     },
     methods: {
       openPopover(e: Event) {
         this.event = e;
         this.popoverOpen = true;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/popover/presenting/inline-trigger/react.md b/static/usage/popover/presenting/inline-trigger/react.md
index acfb3a0fed0..93ba97cbd7c 100644
--- a/static/usage/popover/presenting/inline-trigger/react.md
+++ b/static/usage/popover/presenting/inline-trigger/react.md
@@ -3,7 +3,7 @@ import React from 'react';
 import { IonButton, IonContent, IonPopover } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
+    <>
       <IonButton id="click-trigger">Left-Click Me</IonButton>
       <IonPopover trigger="click-trigger" triggerAction="click">
         <IonContent class="ion-padding">Hello World!</IonContent>
@@ -18,7 +18,7 @@ function Example() {
       <IonPopover trigger="hover-trigger" triggerAction="hover">
         <IonContent class="ion-padding">Hello World!</IonContent>
       </IonPopover>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/popover/presenting/inline-trigger/vue.md b/static/usage/popover/presenting/inline-trigger/vue.md
index d61df6161d1..07f1f68a62f 100644
--- a/static/usage/popover/presenting/inline-trigger/vue.md
+++ b/static/usage/popover/presenting/inline-trigger/vue.md
@@ -1,21 +1,19 @@
 ```html
 <template>
-  <ion-content>
-    <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="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="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>
-  </ion-content>
+  <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">
diff --git a/static/usage/range/basic/angular.md b/static/usage/range/basic/angular.md
index 550a5f407fa..207b74f1fc7 100644
--- a/static/usage/range/basic/angular.md
+++ b/static/usage/range/basic/angular.md
@@ -1,5 +1,3 @@
 ```html
-<ion-content>
-  <ion-range></ion-range>
-</ion-content>
+<ion-range></ion-range>
 ```
diff --git a/static/usage/range/basic/javascript.md b/static/usage/range/basic/javascript.md
index 8f99cd79677..207b74f1fc7 100644
--- a/static/usage/range/basic/javascript.md
+++ b/static/usage/range/basic/javascript.md
@@ -1,7 +1,3 @@
 ```html
-<ion-app>
-  <ion-content>
-    <ion-range></ion-range>
-  </ion-content>
-</ion-app>
+<ion-range></ion-range>
 ```
diff --git a/static/usage/range/basic/react.md b/static/usage/range/basic/react.md
index 2bdca865051..b2f57aed027 100644
--- a/static/usage/range/basic/react.md
+++ b/static/usage/range/basic/react.md
@@ -1,12 +1,8 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonRange } from '@ionic/react';
+import { IonRange } from '@ionic/react';
 function Example() {
-  return (
-    <IonContent>
-      <IonRange></IonRange>
-    </IonContent>
-  );
+  return <IonRange></IonRange>;
 }
 export default Example;
 ```
diff --git a/static/usage/range/basic/vue.md b/static/usage/range/basic/vue.md
index cda3dd32b48..73f55df111e 100644
--- a/static/usage/range/basic/vue.md
+++ b/static/usage/range/basic/vue.md
@@ -1,16 +1,14 @@
 ```html
 <template>
-  <ion-content>
-    <ion-range></ion-range>
-  </ion-content>
+  <ion-range></ion-range>
 </template>
 
 <script lang="ts">
-  import { IonContent, IonRange } from '@ionic/vue';
+  import { IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonRange },
+    components: { IonRange },
   });
 </script>
 ```
diff --git a/static/usage/range/css-shadow-parts/angular/app_component_html.md b/static/usage/range/css-shadow-parts/angular/app_component_html.md
deleted file mode 100644
index 72f9213a9ba..00000000000
--- a/static/usage/range/css-shadow-parts/angular/app_component_html.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <ion-range [min]="0" [max]="10" [value]="5" [pin]="true" [ticks]="true" [snaps]="true"></ion-range>
-</ion-content>
-```
diff --git a/static/usage/range/css-shadow-parts/angular/app_component_css.md b/static/usage/range/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/angular/app_component_css.md
rename to static/usage/range/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/range/css-shadow-parts/angular/example_component_html.md b/static/usage/range/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..95fbcd6f6ab
--- /dev/null
+++ b/static/usage/range/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/range/css-shadow-parts/index.md b/static/usage/range/css-shadow-parts/index.md
index 95af2d3c7f3..af1df80390f 100644
--- a/static/usage/range/css-shadow-parts/index.md
+++ b/static/usage/range/css-shadow-parts/index.md
@@ -7,8 +7,8 @@ import react_main_css from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_css from './angular/app_component_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={{
@@ -22,8 +22,8 @@ import angular_app_component_css from './angular/app_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.css': angular_app_component_css,
-        'src/app/app.component.html': angular_app_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
       },
     },
   }}
diff --git a/static/usage/range/css-shadow-parts/javascript.md b/static/usage/range/css-shadow-parts/javascript.md
index 05fe8e86a67..df02ec30fbd 100644
--- a/static/usage/range/css-shadow-parts/javascript.md
+++ b/static/usage/range/css-shadow-parts/javascript.md
@@ -1,9 +1,5 @@
 ```html
-<ion-app>
-  <ion-content class="ion-padding">
-    <ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
-  </ion-content>
-</ion-app>
+<ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
 
 <style>
   ion-range::part(tick) {
diff --git a/static/usage/range/css-shadow-parts/react/main_tsx.md b/static/usage/range/css-shadow-parts/react/main_tsx.md
index 10f3c8fed41..b22ec8d6fd9 100644
--- a/static/usage/range/css-shadow-parts/react/main_tsx.md
+++ b/static/usage/range/css-shadow-parts/react/main_tsx.md
@@ -1,15 +1,11 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonRange } from '@ionic/react';
+import { IonRange } from '@ionic/react';
 
 import './main.css';
 
 function Example() {
-  return (
-    <IonContent className="ion-padding">
-      <IonRange min={0} max={10} value={5} pin={true} ticks={true} snaps={true}></IonRange>
-    </IonContent>
-  );
+  return <IonRange min={0} max={10} value={5} pin={true} ticks={true} snaps={true}></IonRange>;
 }
 
 export default Example;
diff --git a/static/usage/range/css-shadow-parts/vue.md b/static/usage/range/css-shadow-parts/vue.md
index 04dddbfa2f2..c0bccfc8df9 100644
--- a/static/usage/range/css-shadow-parts/vue.md
+++ b/static/usage/range/css-shadow-parts/vue.md
@@ -44,17 +44,15 @@
 </style>
 
 <template>
-  <ion-content class="ion-padding">
-    <ion-range :min="0" :max="10" :value="5" :pin="true" :ticks="true" :snaps="true"></ion-range>
-  </ion-content>
+  <ion-range :min="0" :max="10" :value="5" :pin="true" :ticks="true" :snaps="true"></ion-range>
 </template>
 
 <script lang="ts">
-  import { IonContent, IonRange } from '@ionic/vue';
+  import { IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonRange },
+    components: { IonRange },
   });
 </script>
 ```
diff --git a/static/usage/range/css-variables/angular/app_component_html.md b/static/usage/range/css-variables/angular/app_component_html.md
deleted file mode 100644
index 69a76797cb2..00000000000
--- a/static/usage/range/css-variables/angular/app_component_html.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <ion-range [value]="50" [pin]="true"></ion-range>
-</ion-content>
-```
diff --git a/static/usage/range/css-variables/angular/app_component_css.md b/static/usage/range/css-variables/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/css-variables/angular/app_component_css.md
rename to static/usage/range/css-variables/angular/example_component_css.md
diff --git a/static/usage/range/css-variables/angular/example_component_html.md b/static/usage/range/css-variables/angular/example_component_html.md
new file mode 100644
index 00000000000..788c2c288d8
--- /dev/null
+++ b/static/usage/range/css-variables/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-range [value]="50" [pin]="true"></ion-range>
+```
diff --git a/static/usage/range/css-variables/index.md b/static/usage/range/css-variables/index.md
index d533b6d2670..c613c23ce3f 100644
--- a/static/usage/range/css-variables/index.md
+++ b/static/usage/range/css-variables/index.md
@@ -7,8 +7,8 @@ import react_main_css from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_css from './angular/app_component_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={{
@@ -22,8 +22,8 @@ import angular_app_component_css from './angular/app_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.css': angular_app_component_css,
-        'src/app/app.component.html': angular_app_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
       },
     },
   }}
diff --git a/static/usage/range/css-variables/javascript.md b/static/usage/range/css-variables/javascript.md
index 576811e22a2..619c3e4f6e8 100644
--- a/static/usage/range/css-variables/javascript.md
+++ b/static/usage/range/css-variables/javascript.md
@@ -1,9 +1,5 @@
 ```html
-<ion-app>
-  <ion-content class="ion-padding">
-    <ion-range value="50" pin="true"></ion-range>
-  </ion-content>
-</ion-app>
+<ion-range value="50" pin="true"></ion-range>
 
 <style>
   ion-range {
diff --git a/static/usage/range/css-variables/react/main_tsx.md b/static/usage/range/css-variables/react/main_tsx.md
index 8cd5c8722ee..78261555c9b 100644
--- a/static/usage/range/css-variables/react/main_tsx.md
+++ b/static/usage/range/css-variables/react/main_tsx.md
@@ -1,15 +1,11 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonRange } from '@ionic/react';
+import { IonRange } from '@ionic/react';
 
 import './main.css';
 
 function Example() {
-  return (
-    <IonContent className="ion-padding">
-      <IonRange value={50} pin={true}></IonRange>
-    </IonContent>
-  );
+  return <IonRange value={50} pin={true}></IonRange>;
 }
 export default Example;
 ```
diff --git a/static/usage/range/css-variables/vue.md b/static/usage/range/css-variables/vue.md
index c111250790a..6c0aeff6268 100644
--- a/static/usage/range/css-variables/vue.md
+++ b/static/usage/range/css-variables/vue.md
@@ -13,17 +13,15 @@
 </style>
 
 <template>
-  <ion-content class="ion-padding">
-    <ion-range :value="50" :pin="true"></ion-range>
-  </ion-content>
+  <ion-range :value="50" :pin="true"></ion-range>
 </template>
 
 <script lang="ts">
-  import { IonContent, IonRange } from '@ionic/vue';
+  import { IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonRange },
+    components: { IonRange },
   });
 </script>
 ```
diff --git a/static/usage/range/dual-knobs/angular.md b/static/usage/range/dual-knobs/angular.md
index 689632aa991..b5d6a592a92 100644
--- a/static/usage/range/dual-knobs/angular.md
+++ b/static/usage/range/dual-knobs/angular.md
@@ -1,5 +1,3 @@
 ```html
-<ion-content>
-  <ion-range [dualKnobs]="true" [value]="{ lower: 20, upper: 80 }"></ion-range>
-</ion-content>
+<ion-range [dualKnobs]="true" [value]="{ lower: 20, upper: 80 }"></ion-range>
 ```
diff --git a/static/usage/range/dual-knobs/javascript.md b/static/usage/range/dual-knobs/javascript.md
index 8768ad6ab88..1227b5cc841 100644
--- a/static/usage/range/dual-knobs/javascript.md
+++ b/static/usage/range/dual-knobs/javascript.md
@@ -1,9 +1,5 @@
 ```html
-<ion-app>
-  <ion-content>
-    <ion-range dual-knobs="true"></ion-range>
-  </ion-content>
-</ion-app>
+<ion-range dual-knobs="true"></ion-range>
 
 <script>
   const range = document.querySelector('ion-range');
diff --git a/static/usage/range/dual-knobs/react.md b/static/usage/range/dual-knobs/react.md
index cab5b5b3a47..7f72b8e1dc3 100644
--- a/static/usage/range/dual-knobs/react.md
+++ b/static/usage/range/dual-knobs/react.md
@@ -1,17 +1,15 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonRange } from '@ionic/react';
+import { IonRange } from '@ionic/react';
 function Example() {
   return (
-    <IonContent>
-      <IonRange
-        dualKnobs={true}
-        value={{
-          lower: 20,
-          upper: 80,
-        }}
-      ></IonRange>
-    </IonContent>
+    <IonRange
+      dualKnobs={true}
+      value={{
+        lower: 20,
+        upper: 80,
+      }}
+    ></IonRange>
   );
 }
 export default Example;
diff --git a/static/usage/range/dual-knobs/vue.md b/static/usage/range/dual-knobs/vue.md
index 1df8e26a4c9..afc825a067c 100644
--- a/static/usage/range/dual-knobs/vue.md
+++ b/static/usage/range/dual-knobs/vue.md
@@ -1,8 +1,6 @@
 ```html
 <template>
-  <ion-content>
-    <ion-range :dual-knobs="true" :value="{ lower: 20, upper: 80 }"></ion-range>
-  </ion-content>
+  <ion-range :dual-knobs="true" :value="{ lower: 20, upper: 80 }"></ion-range>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/range/ion-change-event/angular/app_component_html.md b/static/usage/range/ion-change-event/angular/app_component_html.md
deleted file mode 100644
index e0106fd30bd..00000000000
--- a/static/usage/range/ion-change-event/angular/app_component_html.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-content>
-  <ion-range (ionChange)="onIonChange($event)"></ion-range>
-  <ion-label>ionChange emitted value: {{ lastEmittedValue }}</ion-label>
-</ion-content>
-```
diff --git a/static/usage/range/ion-change-event/angular/example_component_html.md b/static/usage/range/ion-change-event/angular/example_component_html.md
new file mode 100644
index 00000000000..1c7dedd0408
--- /dev/null
+++ b/static/usage/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/range/ion-change-event/angular/app_component_ts.md b/static/usage/range/ion-change-event/angular/example_component_ts.md
similarity index 70%
rename from static/usage/range/ion-change-event/angular/app_component_ts.md
rename to static/usage/range/ion-change-event/angular/example_component_ts.md
index 18ab5369a77..b90eff62d29 100644
--- a/static/usage/range/ion-change-event/angular/app_component_ts.md
+++ b/static/usage/range/ion-change-event/angular/example_component_ts.md
@@ -5,11 +5,10 @@ import { RangeCustomEvent } from '@ionic/angular';
 import { RangeValue } from '@ionic/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   lastEmittedValue: RangeValue;
 
   onIonChange(ev: Event) {
diff --git a/static/usage/range/ion-change-event/index.md b/static/usage/range/ion-change-event/index.md
index 832848a15eb..be81dd95ea5 100644
--- a/static/usage/range/ion-change-event/index.md
+++ b/static/usage/range/ion-change-event/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -14,8 +14,8 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/range/ion-change-event/javascript.md b/static/usage/range/ion-change-event/javascript.md
index d11327311e8..d483a43dd5a 100644
--- a/static/usage/range/ion-change-event/javascript.md
+++ b/static/usage/range/ion-change-event/javascript.md
@@ -1,10 +1,6 @@
 ```html
-<ion-app>
-  <ion-content>
-    <ion-range></ion-range>
-    <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
-  </ion-content>
-</ion-app>
+<ion-range></ion-range>
+<ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
 
 <script>
   const range = document.querySelector('ion-range');
diff --git a/static/usage/range/ion-change-event/react.md b/static/usage/range/ion-change-event/react.md
index d07cfe4115f..3e1eed172b0 100644
--- a/static/usage/range/ion-change-event/react.md
+++ b/static/usage/range/ion-change-event/react.md
@@ -1,14 +1,14 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonContent, IonLabel, IonRange } from '@ionic/react';
+import { IonLabel, IonRange } from '@ionic/react';
 import { RangeValue } from '@ionic/core';
 function Example() {
   const [lastEmittedValue, setLastEmittedValue] = useState<RangeValue>();
   return (
-    <IonContent>
+    <>
       <IonRange onIonChange={({ detail }) => setLastEmittedValue(detail.value)}></IonRange>
       <IonLabel>ionChange emitted value: {lastEmittedValue as number}</IonLabel>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/range/ion-change-event/vue.md b/static/usage/range/ion-change-event/vue.md
index 5fafa76a442..d043c11089d 100644
--- a/static/usage/range/ion-change-event/vue.md
+++ b/static/usage/range/ion-change-event/vue.md
@@ -1,17 +1,15 @@
 ```html
 <template>
-  <ion-content>
-    <ion-range @ionChange="onIonChange"></ion-range>
-    <ion-label>ionChange emitted value: {{lastEmittedValue}}</ion-label>
-  </ion-content>
+  <ion-range @ionChange="onIonChange"></ion-range>
+  <ion-label>ionChange emitted value: {{lastEmittedValue}}</ion-label>
 </template>
 
 <script lang="ts">
-  import { IonContent, IonLabel, IonRange } from '@ionic/vue';
+  import { IonLabel, IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonLabel, IonRange },
+    components: { IonLabel, IonRange },
     data() {
       return {
         lastEmittedValue: '',
diff --git a/static/usage/range/ion-knob-move-event/angular/app_component_html.md b/static/usage/range/ion-knob-move-event/angular/app_component_html.md
deleted file mode 100644
index 4e8bd31fd28..00000000000
--- a/static/usage/range/ion-knob-move-event/angular/app_component_html.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-content>
-  <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>
-</ion-content>
-```
diff --git a/static/usage/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/range/ion-knob-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..d8b54e782eb
--- /dev/null
+++ b/static/usage/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/range/ion-knob-move-event/angular/app_component_ts.md b/static/usage/range/ion-knob-move-event/angular/example_component_ts.md
similarity index 76%
rename from static/usage/range/ion-knob-move-event/angular/app_component_ts.md
rename to static/usage/range/ion-knob-move-event/angular/example_component_ts.md
index 8e7ec028292..e4b331a10f2 100644
--- a/static/usage/range/ion-knob-move-event/angular/app_component_ts.md
+++ b/static/usage/range/ion-knob-move-event/angular/example_component_ts.md
@@ -5,11 +5,10 @@ import { RangeCustomEvent } from '@ionic/angular';
 import { RangeValue } from '@ionic/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   moveStart: RangeValue;
   moveEnd: RangeValue;
 
diff --git a/static/usage/range/ion-knob-move-event/index.md b/static/usage/range/ion-knob-move-event/index.md
index 28422c55c33..bbe8ddc29ee 100644
--- a/static/usage/range/ion-knob-move-event/index.md
+++ b/static/usage/range/ion-knob-move-event/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_component_ts from './angular/app_component_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={{
@@ -14,8 +14,8 @@ import angular_app_component_ts from './angular/app_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/range/ion-knob-move-event/javascript.md b/static/usage/range/ion-knob-move-event/javascript.md
index 8d06bee327b..70346efa5eb 100644
--- a/static/usage/range/ion-knob-move-event/javascript.md
+++ b/static/usage/range/ion-knob-move-event/javascript.md
@@ -1,15 +1,11 @@
 ```html
-<ion-app>
-  <ion-content>
-    <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>
-  </ion-content>
-</ion-app>
+<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');
diff --git a/static/usage/range/ion-knob-move-event/react.md b/static/usage/range/ion-knob-move-event/react.md
index f09c33dd91f..25d80caae72 100644
--- a/static/usage/range/ion-knob-move-event/react.md
+++ b/static/usage/range/ion-knob-move-event/react.md
@@ -1,12 +1,12 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonContent, IonLabel, IonRange } from '@ionic/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 (
-    <IonContent>
+    <>
       <IonRange
         onIonKnobMoveStart={({ detail }) => setMoveStartValue(detail.value)}
         onIonKnobMoveEnd={({ detail }) => setMoveEndValue(detail.value)}
@@ -17,7 +17,7 @@ function Example() {
       <div>
         <IonLabel>ionKnobMoveEnd: {moveEndValue as number}</IonLabel>
       </div>
-    </IonContent>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/range/ion-knob-move-event/vue.md b/static/usage/range/ion-knob-move-event/vue.md
index a0972b164f5..ffe8e9f5390 100644
--- a/static/usage/range/ion-knob-move-event/vue.md
+++ b/static/usage/range/ion-knob-move-event/vue.md
@@ -1,22 +1,20 @@
 ```html
 <template>
-  <ion-content>
-    <ion-range @ionKnobMoveStart="onIonKnobMoveStart" @ionKnobMoveEnd="onIonKnobMoveEnd"></ion-range>
-    <div>
-      <ion-label>ionKnobMoveStart: {{moveStart}}</ion-label>
-    </div>
-    <div>
-      <ion-label>onIonKnobMoveEnd: {{moveEnd}}</ion-label>
-    </div>
-  </ion-content>
+  <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 { IonContent, IonLabel, IonRange } from '@ionic/vue';
+  import { IonLabel, IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonLabel, IonRange },
+    components: { IonLabel, IonRange },
     data() {
       return {
         moveStart: '',
diff --git a/static/usage/range/pins/angular/app_component_html.md b/static/usage/range/pins/angular/app_component_html.md
deleted file mode 100644
index 513116fd311..00000000000
--- a/static/usage/range/pins/angular/app_component_html.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-content>
-  <ion-range [pin]="true" [pinFormatter]="pinFormatter"></ion-range>
-</ion-content>
-```
diff --git a/static/usage/range/pins/angular/example_component_html.md b/static/usage/range/pins/angular/example_component_html.md
new file mode 100644
index 00000000000..c5f3c823b82
--- /dev/null
+++ b/static/usage/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/range/pins/angular/app_component_ts.md b/static/usage/range/pins/angular/example_component_ts.md
similarity index 51%
rename from static/usage/range/pins/angular/app_component_ts.md
rename to static/usage/range/pins/angular/example_component_ts.md
index b38303eeb6d..8dc875e1bda 100644
--- a/static/usage/range/pins/angular/app_component_ts.md
+++ b/static/usage/range/pins/angular/example_component_ts.md
@@ -2,11 +2,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   pinFormatter(value: number) {
     return `${value}%`;
   }
diff --git a/static/usage/range/pins/index.md b/static/usage/range/pins/index.md
index 3a74e87b8ad..71f945fcc58 100644
--- a/static/usage/range/pins/index.md
+++ b/static/usage/range/pins/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angular_app_component_ts from './angular/app_component_ts.md';
-import angular_app_component_html from './angular/app_component_html.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={{
@@ -14,8 +14,8 @@ import angular_app_component_html from './angular/app_component_html.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/range/pins/javascript.md b/static/usage/range/pins/javascript.md
index 48b4a652916..45491f91514 100644
--- a/static/usage/range/pins/javascript.md
+++ b/static/usage/range/pins/javascript.md
@@ -1,9 +1,5 @@
 ```html
-<ion-app>
-  <ion-content>
-    <ion-range pin="true"></ion-range>
-  </ion-content>
-</ion-app>
+<ion-range pin="true"></ion-range>
 
 <script>
   const range = document.querySelector('ion-range');
diff --git a/static/usage/range/pins/react.md b/static/usage/range/pins/react.md
index ab49f392d34..9da75eae26a 100644
--- a/static/usage/range/pins/react.md
+++ b/static/usage/range/pins/react.md
@@ -1,12 +1,8 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonRange } from '@ionic/react';
+import { IonRange } from '@ionic/react';
 function Example() {
-  return (
-    <IonContent>
-      <IonRange pin={true} pinFormatter={(value: number) => `${value}%`}></IonRange>
-    </IonContent>
-  );
+  return <IonRange pin={true} pinFormatter={(value: number) => `${value}%`}></IonRange>;
 }
 export default Example;
 ```
diff --git a/static/usage/range/pins/vue.md b/static/usage/range/pins/vue.md
index 0953a1bb66d..b2d49bc8300 100644
--- a/static/usage/range/pins/vue.md
+++ b/static/usage/range/pins/vue.md
@@ -1,16 +1,14 @@
 ```html
 <template>
-  <ion-content>
-    <ion-range :pin="true" :pin-formatter="pinFormatter"></ion-range>
-  </ion-content>
+  <ion-range :pin="true" :pin-formatter="pinFormatter"></ion-range>
 </template>
 
 <script lang="ts">
-  import { IonContent, IonRange } from '@ionic/vue';
+  import { IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonRange },
+    components: { IonRange },
     setup() {
       return {
         pinFormatter: (value: number) => `${value}%`,
diff --git a/static/usage/range/snapping-ticks/angular.md b/static/usage/range/snapping-ticks/angular.md
index 89dde90d237..4ec64a7d5c6 100644
--- a/static/usage/range/snapping-ticks/angular.md
+++ b/static/usage/range/snapping-ticks/angular.md
@@ -1,5 +1,3 @@
 ```html
-<ion-content>
-  <ion-range [ticks]="true" [snaps]="true" [min]="0" [max]="10"></ion-range>
-</ion-content>
+<ion-range [ticks]="true" [snaps]="true" [min]="0" [max]="10"></ion-range>
 ```
diff --git a/static/usage/range/snapping-ticks/javascript.md b/static/usage/range/snapping-ticks/javascript.md
index 43cc4695a87..d9ebe86597d 100644
--- a/static/usage/range/snapping-ticks/javascript.md
+++ b/static/usage/range/snapping-ticks/javascript.md
@@ -1,7 +1,3 @@
 ```html
-<ion-app>
-  <ion-content>
-    <ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
-  </ion-content>
-</ion-app>
+<ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
 ```
diff --git a/static/usage/range/snapping-ticks/react.md b/static/usage/range/snapping-ticks/react.md
index 7d55ff4b732..37a0ca15ad4 100644
--- a/static/usage/range/snapping-ticks/react.md
+++ b/static/usage/range/snapping-ticks/react.md
@@ -1,12 +1,8 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonRange } from '@ionic/react';
+import { IonRange } from '@ionic/react';
 function Example() {
-  return (
-    <IonContent>
-      <IonRange ticks={true} snaps={true} min={0} max={10}></IonRange>
-    </IonContent>
-  );
+  return <IonRange ticks={true} snaps={true} min={0} max={10}></IonRange>;
 }
 export default Example;
 ```
diff --git a/static/usage/range/snapping-ticks/vue.md b/static/usage/range/snapping-ticks/vue.md
index cf3b3b8e038..5ea90c66f2c 100644
--- a/static/usage/range/snapping-ticks/vue.md
+++ b/static/usage/range/snapping-ticks/vue.md
@@ -1,16 +1,14 @@
 ```html
 <template>
-  <ion-content>
-    <ion-range :ticks="true" :snaps="true" :min="0" :max="10"></ion-range>
-  </ion-content>
+  <ion-range :ticks="true" :snaps="true" :min="0" :max="10"></ion-range>
 </template>
 
 <script lang="ts">
-  import { IonContent, IonRange } from '@ionic/vue';
+  import { IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonRange },
+    components: { IonRange },
   });
 </script>
 ```
diff --git a/static/usage/select/basic/responding-to-interaction/angular/app.component_html.md b/static/usage/select/basic/responding-to-interaction/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/basic/responding-to-interaction/angular/app.component_html.md
rename to static/usage/select/basic/responding-to-interaction/angular/example_component_html.md
diff --git a/static/usage/select/basic/responding-to-interaction/angular/app.component_ts.md b/static/usage/select/basic/responding-to-interaction/angular/example_component_ts.md
similarity index 69%
rename from static/usage/select/basic/responding-to-interaction/angular/app.component_ts.md
rename to static/usage/select/basic/responding-to-interaction/angular/example_component_ts.md
index 56343326cf2..18c0b1eaa1b 100644
--- a/static/usage/select/basic/responding-to-interaction/angular/app.component_ts.md
+++ b/static/usage/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -2,10 +2,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   logs: string[] = [];
 
   pushLog(msg) {
@@ -16,5 +16,4 @@ export class AppComponent {
     this.pushLog('ionChange fired with value: ' + e.detail.value);
   }
 }
-
-```
\ 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
index 0af87d3b651..36d66bad680 100644
--- a/static/usage/select/basic/responding-to-interaction/index.md
+++ b/static/usage/select/basic/responding-to-interaction/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/app.component_html.md';
-import angularTS from './angular/app.component_ts.md';
+import angularHTML from './angular/example_component_html.md';
+import angularTS from './angular/example_component_ts.md';
 
 <Playground
   size="300px"
@@ -15,10 +15,10 @@ import angularTS from './angular/app.component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/select/basic/responding-to-interaction/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/select/basic/responding-to-interaction/react.md b/static/usage/select/basic/responding-to-interaction/react.md
index 7adde2b42d2..e6a85e2eef6 100644
--- a/static/usage/select/basic/responding-to-interaction/react.md
+++ b/static/usage/select/basic/responding-to-interaction/react.md
@@ -3,9 +3,9 @@ import React, { useState } from 'react';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
 
 function Example() {
-  const [logs, setLogs] = useState([]);
+  const [logs, setLogs] = useState<string[]>([]);
 
-  const pushLog = (msg) => {
+  const pushLog = (msg: string) => {
     setLogs([msg, ...logs]);
   };
 
@@ -26,7 +26,9 @@ function Example() {
         </IonItem>
       </IonList>
       <div className="ion-padding">
-        {logs.map((log) => <p>{log}</p>)}
+        {logs.map((log) => (
+          <p>{log}</p>
+        ))}
       </div>
     </>
   );
diff --git a/static/usage/select/customization/interface-options/angular/app.component_html.md b/static/usage/select/customization/interface-options/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/customization/interface-options/angular/app.component_html.md
rename to static/usage/select/customization/interface-options/angular/example_component_html.md
diff --git a/static/usage/select/customization/interface-options/angular/app.component_ts.md b/static/usage/select/customization/interface-options/angular/example_component_ts.md
similarity index 61%
rename from static/usage/select/customization/interface-options/angular/app.component_ts.md
rename to static/usage/select/customization/interface-options/angular/example_component_ts.md
index 5858420a575..c3f34d0adaf 100644
--- a/static/usage/select/customization/interface-options/angular/app.component_ts.md
+++ b/static/usage/select/customization/interface-options/angular/example_component_ts.md
@@ -2,27 +2,26 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   customAlertOptions = {
     header: 'Pizza Toppings',
     subHeader: 'Select your favorite topping',
     message: 'Choose only one',
-    translucent: true
+    translucent: true,
   };
 
   customPopoverOptions = {
     header: 'Hair Color',
     subHeader: 'Select your hair color',
-    message: 'Only select your dominant hair color'
+    message: 'Only select your dominant hair color',
   };
 
   customActionSheetOptions = {
     header: 'Colors',
-    subHeader: 'Select your favorite color'
+    subHeader: 'Select your favorite color',
   };
 }
-
-```
\ 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
index 54a1397a925..44247363484 100644
--- a/static/usage/select/customization/interface-options/index.md
+++ b/static/usage/select/customization/interface-options/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/app.component_html.md';
-import angularTS from './angular/app.component_ts.md';
+import angularHTML from './angular/example_component_html.md';
+import angularTS from './angular/example_component_ts.md';
 
 <Playground
   size="large"
@@ -15,10 +15,10 @@ import angularTS from './angular/app.component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/select/customization/interface-options/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/select/customization/styling-select/angular/angular-ts.md b/static/usage/select/customization/styling-select/angular/angular-ts.md
index f0a038f5b8a..4db53a836a9 100644
--- a/static/usage/select/customization/styling-select/angular/angular-ts.md
+++ b/static/usage/select/customization/styling-select/angular/angular-ts.md
@@ -2,10 +2,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
 })
-export class AppComponent { }
-
-```
\ No newline at end of file
+export class ExampleComponent {}
+```
diff --git a/static/usage/select/customization/styling-select/index.md b/static/usage/select/customization/styling-select/index.md
index 24d2ef59070..b6afedc5dcd 100644
--- a/static/usage/select/customization/styling-select/index.md
+++ b/static/usage/select/customization/styling-select/index.md
@@ -17,17 +17,17 @@ import angularTS from './angular/angular-ts.md';
     react: {
       files: {
         'src/main.tsx': reactTS,
-        'src/main.css': reactCSS
-      }
+        'src/main.css': reactCSS,
+      },
     },
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.css': angularCSS,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/select/customization/styling-select/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/select/objects-as-values/multiple-selection/angular/app.component_html.md b/static/usage/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/app.component_html.md
rename to static/usage/select/objects-as-values/multiple-selection/angular/example_component_html.md
diff --git a/static/usage/select/objects-as-values/multiple-selection/angular/app.component_ts.md b/static/usage/select/objects-as-values/multiple-selection/angular/example_component_ts.md
similarity index 56%
rename from static/usage/select/objects-as-values/multiple-selection/angular/app.component_ts.md
rename to static/usage/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 49836165f4c..76fa7e51e49 100644
--- a/static/usage/select/objects-as-values/multiple-selection/angular/app.component_ts.md
+++ b/static/usage/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -2,36 +2,36 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   currentFood = undefined;
 
   foods = [
     {
       id: 1,
-      name: "Apples",
-      type: "fruit"
+      name: 'Apples',
+      type: 'fruit',
     },
     {
       id: 2,
-      name: "Carrots",
-      type: "vegetable"
+      name: 'Carrots',
+      type: 'vegetable',
     },
     {
       id: 3,
-      name: "Cupcakes",
-      type: "dessert"
-    }
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
   ];
 
   compareWith(o1, o2) {
-    if(!o1 || !o2) {
+    if (!o1 || !o2) {
       return o1 === o2;
     }
 
-    if(Array.isArray(o2)) {
+    if (Array.isArray(o2)) {
       return o2.some((o) => o.id === o1.id);
     }
 
@@ -42,5 +42,4 @@ export class AppComponent {
     this.currentFood = ev.target.value;
   }
 }
-
-```
\ No newline at end of file
+```
diff --git a/static/usage/select/objects-as-values/multiple-selection/index.md b/static/usage/select/objects-as-values/multiple-selection/index.md
index 34e089c97b2..6bced8d6e44 100644
--- a/static/usage/select/objects-as-values/multiple-selection/index.md
+++ b/static/usage/select/objects-as-values/multiple-selection/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/app.component_html.md';
-import angularTS from './angular/app.component_ts.md';
+import angularHTML from './angular/example_component_html.md';
+import angularTS from './angular/example_component_ts.md';
 
 <Playground
   size="300px"
@@ -15,10 +15,10 @@ import angularTS from './angular/app.component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/select/objects-as-values/multiple-selection/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/select/objects-as-values/multiple-selection/react.md b/static/usage/select/objects-as-values/multiple-selection/react.md
index 76af4828308..e6485198a86 100644
--- a/static/usage/select/objects-as-values/multiple-selection/react.md
+++ b/static/usage/select/objects-as-values/multiple-selection/react.md
@@ -2,30 +2,36 @@
 import React, { useState } from 'react';
 import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
 
-const foods = [
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
+const foods: Food[] = [
   {
     id: 1,
-    name: "Apples",
-    type: "fruit"
+    name: 'Apples',
+    type: 'fruit',
   },
   {
     id: 2,
-    name: "Carrots",
-    type: "vegetable"
+    name: 'Carrots',
+    type: 'vegetable',
   },
   {
     id: 3,
-    name: "Cupcakes",
-    type: "dessert"
-  }
+    name: 'Cupcakes',
+    type: 'dessert',
+  },
 ];
 
-const compareWith = (o1, o2) => {
-  if(!o1 || !o2) {
+const compareWith = (o1: Food, o2: Food) => {
+  if (!o1 || !o2) {
     return o1 === o2;
   }
 
-  if(Array.isArray(o2)) {
+  if (Array.isArray(o2)) {
     return o2.some((o) => o.id === o1.id);
   }
 
@@ -33,7 +39,7 @@ const compareWith = (o1, o2) => {
 };
 
 function Example() {
-  const [currentFood, setCurrentFood] = useState("");
+  const [currentFood, setCurrentFood] = useState('');
 
   return (
     <IonList>
@@ -41,11 +47,13 @@ function Example() {
         <IonSelect
           placeholder="Select food"
           compareWith={compareWith}
-          onIonChange={ev => setCurrentFood(JSON.stringify(ev.detail.value))}
+          onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))}
           multiple={true}
         >
-          {foods.map(food => (
-            <IonSelectOption key={food.id} value={food}>{food.name}</IonSelectOption>
+          {foods.map((food) => (
+            <IonSelectOption key={food.id} value={food}>
+              {food.name}
+            </IonSelectOption>
           ))}
         </IonSelect>
       </IonItem>
diff --git a/static/usage/select/objects-as-values/using-comparewith/angular/app.component_html.md b/static/usage/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/app.component_html.md
rename to static/usage/select/objects-as-values/using-comparewith/angular/example_component_html.md
diff --git a/static/usage/select/objects-as-values/using-comparewith/angular/app.component_ts.md b/static/usage/select/objects-as-values/using-comparewith/angular/example_component_ts.md
similarity index 56%
rename from static/usage/select/objects-as-values/using-comparewith/angular/app.component_ts.md
rename to static/usage/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index d45c2a6b335..afbd5f454cd 100644
--- a/static/usage/select/objects-as-values/using-comparewith/angular/app.component_ts.md
+++ b/static/usage/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -2,28 +2,28 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   currentFood = undefined;
 
   foods = [
     {
       id: 1,
-      name: "Apples",
-      type: "fruit"
+      name: 'Apples',
+      type: 'fruit',
     },
     {
       id: 2,
-      name: "Carrots",
-      type: "vegetable"
+      name: 'Carrots',
+      type: 'vegetable',
     },
     {
       id: 3,
-      name: "Cupcakes",
-      type: "dessert"
-    }
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
   ];
 
   compareWith(o1, o2) {
@@ -34,5 +34,4 @@ export class AppComponent {
     this.currentFood = ev.target.value;
   }
 }
-
-```
\ No newline at end of file
+```
diff --git a/static/usage/select/objects-as-values/using-comparewith/index.md b/static/usage/select/objects-as-values/using-comparewith/index.md
index 25e6dc11641..323797ca6ce 100644
--- a/static/usage/select/objects-as-values/using-comparewith/index.md
+++ b/static/usage/select/objects-as-values/using-comparewith/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/app.component_html.md';
-import angularTS from './angular/app.component_ts.md';
+import angularHTML from './angular/example_component_html.md';
+import angularTS from './angular/example_component_ts.md';
 
 <Playground
   size="300px"
@@ -15,10 +15,10 @@ import angularTS from './angular/app.component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
-      }
-    }
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
   }}
   src="usage/select/objects-as-values/using-comparewith/demo.html"
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/select/objects-as-values/using-comparewith/react.md b/static/usage/select/objects-as-values/using-comparewith/react.md
index 4763ec85f4f..7cd468d5b0e 100644
--- a/static/usage/select/objects-as-values/using-comparewith/react.md
+++ b/static/usage/select/objects-as-values/using-comparewith/react.md
@@ -2,30 +2,36 @@
 import React, { useState } from 'react';
 import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
 
-const foods = [
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
+const foods: Food[] = [
   {
     id: 1,
-    name: "Apples",
-    type: "fruit"
+    name: 'Apples',
+    type: 'fruit',
   },
   {
     id: 2,
-    name: "Carrots",
-    type: "vegetable"
+    name: 'Carrots',
+    type: 'vegetable',
   },
   {
     id: 3,
-    name: "Cupcakes",
-    type: "dessert"
-  }
+    name: 'Cupcakes',
+    type: 'dessert',
+  },
 ];
 
-const compareWith = (o1, o2) => {
+const compareWith = (o1: Food, o2: Food) => {
   return o1 && o2 ? o1.id === o2.id : o1 === o2;
 };
 
 function Example() {
-  const [currentFood, setCurrentFood] = useState("");
+  const [currentFood, setCurrentFood] = useState('');
 
   return (
     <IonList>
@@ -33,10 +39,12 @@ function Example() {
         <IonSelect
           placeholder="Select food"
           compareWith={compareWith}
-          onIonChange={ev => setCurrentFood(JSON.stringify(ev.detail.value))}
+          onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))}
         >
-          {foods.map(food => (
-            <IonSelectOption key={food.id} value={food}>{food.name}</IonSelectOption>
+          {foods.map((food) => (
+            <IonSelectOption key={food.id} value={food}>
+              {food.name}
+            </IonSelectOption>
           ))}
         </IonSelect>
       </IonItem>

From 4e562939e5bf63a630726af8fa4f58a7cf361fc8 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 4 Aug 2022 08:38:39 -0500
Subject: [PATCH 005/469] docs(badge): add playgrounds (#2477)

---
 docs/api/badge.md                             | 195 +-----------------
 static/usage/badge/basic/angular.md           |  12 ++
 static/usage/badge/basic/demo.html            |  39 ++++
 static/usage/badge/basic/index.md             |  11 +
 static/usage/badge/basic/javascript.md        |  12 ++
 static/usage/badge/basic/react.md             |  19 ++
 static/usage/badge/basic/vue.md               |  23 +++
 .../badge/customization/color/angular.md      |  28 +++
 .../usage/badge/customization/color/demo.html |  55 +++++
 .../usage/badge/customization/color/index.md  |  12 ++
 .../badge/customization/color/javascript.md   |  28 +++
 .../usage/badge/customization/color/react.md  |  35 ++++
 static/usage/badge/customization/color/vue.md |  39 ++++
 .../css-properties/angular/angular-css.md     |   8 +
 .../css-properties/angular/angular-html.md    |   8 +
 .../customization/css-properties/demo.html    |  42 ++++
 .../customization/css-properties/index.md     |  31 +++
 .../css-properties/javascript.md              |  17 ++
 .../css-properties/react/react-css.md         |   8 +
 .../css-properties/react/react-ts.md          |  18 ++
 .../badge/customization/css-properties/vue.md |  28 +++
 21 files changed, 483 insertions(+), 185 deletions(-)
 create mode 100644 static/usage/badge/basic/angular.md
 create mode 100644 static/usage/badge/basic/demo.html
 create mode 100644 static/usage/badge/basic/index.md
 create mode 100644 static/usage/badge/basic/javascript.md
 create mode 100644 static/usage/badge/basic/react.md
 create mode 100644 static/usage/badge/basic/vue.md
 create mode 100644 static/usage/badge/customization/color/angular.md
 create mode 100644 static/usage/badge/customization/color/demo.html
 create mode 100644 static/usage/badge/customization/color/index.md
 create mode 100644 static/usage/badge/customization/color/javascript.md
 create mode 100644 static/usage/badge/customization/color/react.md
 create mode 100644 static/usage/badge/customization/color/vue.md
 create mode 100644 static/usage/badge/customization/css-properties/angular/angular-css.md
 create mode 100644 static/usage/badge/customization/css-properties/angular/angular-html.md
 create mode 100644 static/usage/badge/customization/css-properties/demo.html
 create mode 100644 static/usage/badge/customization/css-properties/index.md
 create mode 100644 static/usage/badge/customization/css-properties/javascript.md
 create mode 100644 static/usage/badge/customization/css-properties/react/react-css.md
 create mode 100644 static/usage/badge/customization/css-properties/react/react-ts.md
 create mode 100644 static/usage/badge/customization/css-properties/vue.md

diff --git a/docs/api/badge.md b/docs/api/badge.md
index ae0de884003..32004eab66f 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -1,8 +1,5 @@
 ---
 title: "ion-badge"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/badge/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/badge/index.html"
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -20,200 +17,28 @@ import Slots from '@site/static/auto-generated/badge/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 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.
 
+import BasicExample from '@site/static/usage/badge/basic/index.md';
+
+<BasicExample />
 
+## Customization Examples
 
+### Color
 
-## Usage
+import ColorExample from '@site/static/usage/badge/customization/color/index.md';
 
-<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' }]}>
+<ColorExample />
 
-<TabItem value="angular">
+### CSS Properties
 
-```html
-<!-- Default -->
-<ion-badge>99</ion-badge>
+import CSSPropsExample from '@site/static/usage/badge/customization/css-properties/index.md';
 
-<!-- Colors -->
-<ion-badge color="primary">11</ion-badge>
-<ion-badge color="secondary">22</ion-badge>
-<ion-badge color="tertiary">33</ion-badge>
-<ion-badge color="success">44</ion-badge>
-<ion-badge color="warning">55</ion-badge>
-<ion-badge color="danger">66</ion-badge>
-<ion-badge color="light">77</ion-badge>
-<ion-badge color="medium">88</ion-badge>
-<ion-badge color="dark">99</ion-badge>
-
-<!-- Item with badge on left and right -->
-<ion-item>
-  <ion-badge slot="start">11</ion-badge>
-  <ion-label>My Item</ion-label>
-  <ion-badge slot="end">22</ion-badge>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default -->
-<ion-badge>99</ion-badge>
-
-<!-- Colors -->
-<ion-badge color="primary">11</ion-badge>
-<ion-badge color="secondary">22</ion-badge>
-<ion-badge color="tertiary">33</ion-badge>
-<ion-badge color="success">44</ion-badge>
-<ion-badge color="warning">55</ion-badge>
-<ion-badge color="danger">66</ion-badge>
-<ion-badge color="light">77</ion-badge>
-<ion-badge color="medium">88</ion-badge>
-<ion-badge color="dark">99</ion-badge>
-
-<!-- Item with badge on left and right -->
-<ion-item>
-  <ion-badge slot="start">11</ion-badge>
-  <ion-label>My Item</ion-label>
-  <ion-badge slot="end">22</ion-badge>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const BadgeExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default --*/}
-    <IonBadge>99</IonBadge>
-
-    {/*-- Colors --*/}
-    <IonBadge color="primary">11</IonBadge>
-    <IonBadge color="secondary">22</IonBadge>
-    <IonBadge color="tertiary">33</IonBadge>
-    <IonBadge color="success">44</IonBadge>
-    <IonBadge color="warning">55</IonBadge>
-    <IonBadge color="danger">66</IonBadge>
-    <IonBadge color="light">77</IonBadge>
-    <IonBadge color="medium">88</IonBadge>
-    <IonBadge color="dark">99</IonBadge>
-
-    {/*-- Item with badge on left and right --*/}
-    <IonItem>
-      <IonBadge slot="start">11</IonBadge>
-      <IonLabel>My Item</IonLabel>
-      <IonBadge slot="end">22</IonBadge>
-    </IonItem>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'badge-example',
-  styleUrl: 'badge-example.css'
-})
-export class BadgeExample {
-  render() {
-    return [
-      // Default
-      <ion-badge>99</ion-badge>,
-
-      // Colors
-      <ion-badge color="primary">11</ion-badge>,
-      <ion-badge color="secondary">22</ion-badge>,
-      <ion-badge color="tertiary">33</ion-badge>,
-      <ion-badge color="success">44</ion-badge>,
-      <ion-badge color="warning">55</ion-badge>,
-      <ion-badge color="danger">66</ion-badge>,
-      <ion-badge color="light">77</ion-badge>,
-      <ion-badge color="medium">88</ion-badge>,
-      <ion-badge color="dark">99</ion-badge>,
-
-      // Item with badge on left and right
-      <ion-item>
-        <ion-badge slot="start">11</ion-badge>
-        <ion-label>My Item</ion-label>
-        <ion-badge slot="end">22</ion-badge>
-      </ion-item>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default -->
-  <ion-badge>99</ion-badge>
-
-  <!-- Colors -->
-  <ion-badge color="primary">11</ion-badge>
-  <ion-badge color="secondary">22</ion-badge>
-  <ion-badge color="tertiary">33</ion-badge>
-  <ion-badge color="success">44</ion-badge>
-  <ion-badge color="warning">55</ion-badge>
-  <ion-badge color="danger">66</ion-badge>
-  <ion-badge color="light">77</ion-badge>
-  <ion-badge color="medium">88</ion-badge>
-  <ion-badge color="dark">99</ion-badge>
-
-  <!-- Item with badge on left and right -->
-  <ion-item>
-    <ion-badge slot="start">11</ion-badge>
-    <ion-label>My Item</ion-label>
-    <ion-badge slot="end">22</ion-badge>
-  </ion-item>
-</template>
-
-<script>
-import { IonBadge, IonItem, IonLabel } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonBadge, IonItem, IonLabel }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
+<CSSPropsExample />
 
 ## Properties
 <Props />
diff --git a/static/usage/badge/basic/angular.md b/static/usage/badge/basic/angular.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/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/badge/basic/demo.html b/static/usage/badge/basic/demo.html
new file mode 100644
index 00000000000..dee14a40209
--- /dev/null
+++ b/static/usage/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/badge/basic/index.md b/static/usage/badge/basic/index.md
new file mode 100644
index 00000000000..c549304418e
--- /dev/null
+++ b/static/usage/badge/basic/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/badge/basic/demo.html"
+/>
\ No newline at end of file
diff --git a/static/usage/badge/basic/javascript.md b/static/usage/badge/basic/javascript.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/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/badge/basic/react.md b/static/usage/badge/basic/react.md
new file mode 100644
index 00000000000..4d569dbbd02
--- /dev/null
+++ b/static/usage/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/badge/basic/vue.md b/static/usage/badge/basic/vue.md
new file mode 100644
index 00000000000..e02b9c552e3
--- /dev/null
+++ b/static/usage/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/badge/customization/color/angular.md b/static/usage/badge/customization/color/angular.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/badge/customization/color/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/badge/customization/color/demo.html b/static/usage/badge/customization/color/demo.html
new file mode 100644
index 00000000000..82b36f6d955
--- /dev/null
+++ b/static/usage/badge/customization/color/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/badge/customization/color/index.md b/static/usage/badge/customization/color/index.md
new file mode 100644
index 00000000000..047e0871bcf
--- /dev/null
+++ b/static/usage/badge/customization/color/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/badge/customization/color/demo.html"
+/>
\ No newline at end of file
diff --git a/static/usage/badge/customization/color/javascript.md b/static/usage/badge/customization/color/javascript.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/badge/customization/color/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/badge/customization/color/react.md b/static/usage/badge/customization/color/react.md
new file mode 100644
index 00000000000..ad53c54274a
--- /dev/null
+++ b/static/usage/badge/customization/color/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/badge/customization/color/vue.md b/static/usage/badge/customization/color/vue.md
new file mode 100644
index 00000000000..77e5c1a9e97
--- /dev/null
+++ b/static/usage/badge/customization/color/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/badge/customization/css-properties/angular/angular-css.md b/static/usage/badge/customization/css-properties/angular/angular-css.md
new file mode 100644
index 00000000000..950e96b4e80
--- /dev/null
+++ b/static/usage/badge/customization/css-properties/angular/angular-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/badge/customization/css-properties/angular/angular-html.md b/static/usage/badge/customization/css-properties/angular/angular-html.md
new file mode 100644
index 00000000000..92df32f60de
--- /dev/null
+++ b/static/usage/badge/customization/css-properties/angular/angular-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/badge/customization/css-properties/demo.html b/static/usage/badge/customization/css-properties/demo.html
new file mode 100644
index 00000000000..2789948ad7e
--- /dev/null
+++ b/static/usage/badge/customization/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/badge/customization/css-properties/index.md b/static/usage/badge/customization/css-properties/index.md
new file mode 100644
index 00000000000..de39bd6203f
--- /dev/null
+++ b/static/usage/badge/customization/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 reactTS from './react/react-ts.md';
+import reactCSS from './react/react-css.md';
+
+import angularHTML from './angular/angular-html.md';
+import angularCSS from './angular/angular-css.md';
+
+<Playground
+  size="300px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTS,
+        'src/main.css': reactCSS,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS,
+      },
+    },
+  }}
+  src="usage/badge/customization/css-properties/demo.html"
+/>
diff --git a/static/usage/badge/customization/css-properties/javascript.md b/static/usage/badge/customization/css-properties/javascript.md
new file mode 100644
index 00000000000..6dedc97ba4d
--- /dev/null
+++ b/static/usage/badge/customization/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/badge/customization/css-properties/react/react-css.md b/static/usage/badge/customization/css-properties/react/react-css.md
new file mode 100644
index 00000000000..950e96b4e80
--- /dev/null
+++ b/static/usage/badge/customization/css-properties/react/react-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/badge/customization/css-properties/react/react-ts.md b/static/usage/badge/customization/css-properties/react/react-ts.md
new file mode 100644
index 00000000000..fea8b34191e
--- /dev/null
+++ b/static/usage/badge/customization/css-properties/react/react-ts.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/badge/customization/css-properties/vue.md b/static/usage/badge/customization/css-properties/vue.md
new file mode 100644
index 00000000000..08a5d88d81e
--- /dev/null
+++ b/static/usage/badge/customization/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>
+```

From 8f4b2a7bb45d44a3ede159e9073949914ce120e4 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 4 Aug 2022 09:19:28 -0500
Subject: [PATCH 006/469] docs(support): update v5 to extended support only
 (#2478)

---
 docs/reference/support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index 3e9c702cad6..54e23e3664f 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -23,7 +23,7 @@ The current status of each Ionic Framework version is:
 | Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
 | :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
 | V6      | **Active**            | Dec 8, 2021  | TBD              | TBD               |
-| V5      | Maintenance           | Feb 11, 2020 | June 8, 2022     | Dec 8, 2022       |
+| V5      | Extended Support Only | Feb 11, 2020 | June 8, 2022     | Dec 8, 2022       |
 | V4      | Extended Support Only | 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       |

From aff9fa345981916024cfbaf69ddd08de5500133e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 4 Aug 2022 10:58:08 -0400
Subject: [PATCH 007/469] docs(release-notes): update version names (#2479)

---
 scripts/release-notes.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/scripts/release-notes.js b/scripts/release-notes.js
index 6b65c6fa7b5..8d83e1df023 100644
--- a/scripts/release-notes.js
+++ b/scripts/release-notes.js
@@ -236,6 +236,16 @@ var versions = [
     symbol: 'V',
     element: 'Vanadium',
   },
+  {
+    minor: '6.2',
+    symbol: 'Cr',
+    element: 'Chromium'
+  },
+  {
+    minor: '6.3',
+    symbol: 'Mn',
+    element: 'Manganese'
+  }
 ];
 
 var fallbackVersion = { minor: '9201', symbol: 'Uo', element: 'Unobtainium' };

From 2bbe3e2157c189d9942d856867c1203c2eac980e Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 4 Aug 2022 16:07:22 -0500
Subject: [PATCH 008/469] fix(playground): ensure dark mode loads on iframes at
 start (#2481)

---
 src/components/global/Playground/index.tsx | 49 ++++++++++++++++++----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index d8066bcc302..ca4128b9929 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -128,7 +128,7 @@ export default function Playground({
    * url, we post a message to each frame so that
    * dark mode can be enabled without a full page reload.
    */
-  useEffect(async () => {
+  const postDarkThemeMessage = async () => {
     if (frameiOS.current && frameMD.current) {
       await Promise.all([waitForFrame(frameiOS.current), waitForFrame(frameMD.current)]);
 
@@ -136,6 +136,32 @@ export default function Playground({
       frameiOS.current.contentWindow.postMessage(message);
       frameMD.current.contentWindow.postMessage(message);
     }
+  };
+
+  const handleFrameRef = (ref: HTMLIFrameElement, frameMode: 'ios' | 'md') => {
+    if (frameMode === 'ios') {
+      frameiOS.current = ref;
+    } else {
+      frameMD.current = ref;
+    }
+
+    /**
+     * If both frames are loaded, init the dark theme for the first page load.
+     * When dark mode is toggled after the fact, that's handled by the
+     * useEffect below.
+     */
+    if (frameiOS.current && frameMD.current) {
+      postDarkThemeMessage();
+    }
+  };
+
+  useEffect(() => {
+    /**
+     * Note that we can't just do useEffect(postDarkThemeMessage)
+     * because useEffect callbacks cannot return a Promise, as
+     * async functions do.
+     */
+    postDarkThemeMessage();
   }, [isDarkTheme]);
 
   /**
@@ -143,10 +169,17 @@ export default function Playground({
    * load, so a loading screen is shown by default.
    * Once the source of the iframe loads we can
    * hide the loading screen and show the inner content.
+   * 
+   * We call this as a local function because useEffect
+   * callbacks cannot return a Promise, as async functions do.
    */
-  useEffect(async () => {
-    await Promise.all([waitForFrame(frameiOS.current), waitForFrame(frameMD.current)]);
-    setIframesLoaded(true);
+  useEffect(() => {
+    const setFramesLoaded = async () => {
+      await Promise.all([waitForFrame(frameiOS.current), waitForFrame(frameMD.current)]);
+      setIframesLoaded(true);
+    };
+
+    setFramesLoaded();
   }, [renderIframes]);
 
   useEffect(() => {
@@ -464,12 +497,12 @@ export default function Playground({
                   ? [
                       <div className={!isIOS ? 'frame-hidden' : 'frame-visible'}>
                         <device-preview mode="ios">
-                          <iframe height={frameSize} ref={frameiOS} src={sourceiOS}></iframe>
+                          <iframe height={frameSize} ref={ref => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
                         </device-preview>
                       </div>,
                       <div className={!isMD ? 'frame-hidden' : 'frame-visible'}>
                         <device-preview mode="md">
-                          <iframe height={frameSize} ref={frameMD} src={sourceMD}></iframe>
+                          <iframe height={frameSize} ref={ref => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
                         </device-preview>
                       </div>,
                     ]
@@ -477,13 +510,13 @@ export default function Playground({
                       <iframe
                         height={frameSize}
                         className={!isIOS ? 'frame-hidden' : ''}
-                        ref={frameiOS}
+                        ref={ref => handleFrameRef(ref, 'ios')}
                         src={sourceiOS}
                       ></iframe>,
                       <iframe
                         height={frameSize}
                         className={!isMD ? 'frame-hidden' : ''}
-                        ref={frameMD}
+                        ref={ref => handleFrameRef(ref, 'md')}
                         src={sourceMD}
                       ></iframe>,
                     ]}

From 73f82f939ac728ebf67fc34e8ebcd4c7943c6965 Mon Sep 17 00:00:00 2001
From: John Wheeler <73669769+johnwheeler-prod@users.noreply.github.com>
Date: Mon, 8 Aug 2022 15:10:20 -0400
Subject: [PATCH 009/469] chore(titan updates): updates through 08-08 (#2487)

---
 docs/vue/overview.md            | 8 ++++++++
 docs/vue/pwa.md                 | 8 ++++++++
 scripts/data/meta-override.json | 4 ++++
 3 files changed, 20 insertions(+)

diff --git a/docs/vue/overview.md b/docs/vue/overview.md
index 18eedbfa4b6..d5b68367f49 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -2,6 +2,14 @@
 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';
 
diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md
index 15fef825bad..2c75702bd46 100644
--- a/docs/vue/pwa.md
+++ b/docs/vue/pwa.md
@@ -2,6 +2,14 @@
 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
diff --git a/scripts/data/meta-override.json b/scripts/data/meta-override.json
index f287815058f..9f058fd4f06 100644
--- a/scripts/data/meta-override.json
+++ b/scripts/data/meta-override.json
@@ -600,6 +600,10 @@
       "title": "File Chooser | Opens File Picker on Android and Returns File URI",
       "description": "File Chooser opens the file picker on Android for the user to select a file and returns a file URI. Read for more about File Chooser installation and usage."
     },
+    "file-opener": {
+      "title": "File Opener - Plugin for Cordova | Ionic Documentation",
+      "description": "File opener2 plugin for Cordova opens files on your device file system with its default application. Learn more about installation and usage."
+    },
     "file-transfer": {
       "title": "File Transfer | Cordova Docs File Transfer Download Plugin",
       "description": "The Cordova File Transfer plug in allows you to upload and download docs files. This plugin is supported on iOS, Android, Windows, and more platforms."

From ba06ce76b62b8c4e622a6618323984de114d98e4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 9 Aug 2022 10:22:56 -0400
Subject: [PATCH 010/469] docs(skeleton-text): add playgrounds (#2486)

---
 docs/api/skeleton-text.md                     | 876 +-----------------
 .../basic/angular/angular-html.md             |  39 +
 .../skeleton-text/basic/angular/angular-ts.md |  13 +
 static/usage/skeleton-text/basic/demo.html    |  89 ++
 static/usage/skeleton-text/basic/index.md     |  24 +
 .../usage/skeleton-text/basic/javascript.md   |  61 ++
 static/usage/skeleton-text/basic/react.md     |  61 ++
 static/usage/skeleton-text/basic/vue.md       |  78 ++
 .../theming/angular/angular-css.md            |   7 +
 .../theming/angular/angular-html.md           |  23 +
 static/usage/skeleton-text/theming/demo.html  |  57 ++
 static/usage/skeleton-text/theming/index.md   |  32 +
 .../usage/skeleton-text/theming/javascript.md |  31 +
 .../skeleton-text/theming/react/react-css.md  |   7 +
 .../skeleton-text/theming/react/react-tsx.md  |  40 +
 static/usage/skeleton-text/theming/vue.md     |  56 ++
 16 files changed, 625 insertions(+), 869 deletions(-)
 create mode 100644 static/usage/skeleton-text/basic/angular/angular-html.md
 create mode 100644 static/usage/skeleton-text/basic/angular/angular-ts.md
 create mode 100644 static/usage/skeleton-text/basic/demo.html
 create mode 100644 static/usage/skeleton-text/basic/index.md
 create mode 100644 static/usage/skeleton-text/basic/javascript.md
 create mode 100644 static/usage/skeleton-text/basic/react.md
 create mode 100644 static/usage/skeleton-text/basic/vue.md
 create mode 100644 static/usage/skeleton-text/theming/angular/angular-css.md
 create mode 100644 static/usage/skeleton-text/theming/angular/angular-html.md
 create mode 100644 static/usage/skeleton-text/theming/demo.html
 create mode 100644 static/usage/skeleton-text/theming/index.md
 create mode 100644 static/usage/skeleton-text/theming/javascript.md
 create mode 100644 static/usage/skeleton-text/theming/react/react-css.md
 create mode 100644 static/usage/skeleton-text/theming/react/react-tsx.md
 create mode 100644 static/usage/skeleton-text/theming/vue.md

diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index 7c877f55dd2..53c6a2d76b4 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -1,8 +1,5 @@
 ---
 title: "ion-skeleton-text"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/skeleton-text/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/skeleton-text/index.html"
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -24,882 +21,23 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
 
 
 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/skeleton-text/basic/index.md';
 
+<Basic />
 
-## 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
-<!-- Data to display after skeleton screen -->
-<div *ngIf="data">
-  <div class="ion-padding">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
-  </div>
-
-  <ion-list>
-    <ion-list-header>
-      <ion-label>
-        Data
-      </ion-label>
-    </ion-list-header>
-    <ion-item>
-      <ion-avatar slot="start">
-        <img src="./avatar.svg">
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          {{ data.heading }}
-        </h3>
-        <p>
-          {{ data.para1 }}
-        </p>
-        <p>
-          {{ data.para2 }}
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-thumbnail slot="start">
-        <img src="./thumbnail.svg">
-      </ion-thumbnail>
-      <ion-label>
-        <h3>
-          {{ data.heading }}
-        </h3>
-        <p>
-          {{ data.para1 }}
-        </p>
-        <p>
-          {{ data.para2 }}
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-icon name="call" slot="start"></ion-icon>
-      <ion-label>
-        <h3>
-          {{ data.heading }}
-        </h3>
-        <p>
-          {{ data.para1 }}
-        </p>
-        <p>
-          {{ data.para2 }}
-        </p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</div>
-
-<!-- Skeleton screen -->
-<div *ngIf="!data">
-  <div class="ion-padding custom-skeleton">
-    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-    <ion-skeleton-text animated></ion-skeleton-text>
-    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
-    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
-    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-  </div>
-
-  <ion-list>
-    <ion-list-header>
-      <ion-label>
-        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
-      </ion-label>
-    </ion-list-header>
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-skeleton-text animated></ion-skeleton-text>
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </h3>
-        <p>
-          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-        </p>
-        <p>
-          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-thumbnail slot="start">
-        <ion-skeleton-text animated></ion-skeleton-text>
-      </ion-thumbnail>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </h3>
-        <p>
-          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-        </p>
-        <p>
-          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </h3>
-        <p>
-          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-        </p>
-        <p>
-          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-        </p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</div>
-```
-
-```css
-/* Custom Skeleton Line Height and Margin */
-.custom-skeleton ion-skeleton-text {
-  line-height: 13px;
-}
-
-.custom-skeleton ion-skeleton-text:last-child {
-  margin-bottom: 5px;
-}
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'skeleton-text-example',
-  templateUrl: 'skeleton-text-example.html',
-  styleUrls: ['./skeleton-text-example.css']
-})
-export class SkeletonTextExample {
-  data: any;
-
-  constructor() {}
-
-  ionViewWillEnter() {
-    setTimeout(() => {
-      this.data = {
-        'heading': 'Normal text',
-        'para1': 'Lorem ipsum dolor sit amet, consectetur',
-        'para2': 'adipiscing elit.'
-      };
-    }, 5000);
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Data to display after skeleton screen -->
-<div id="data">
-  <div class="ion-padding">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
-  </div>
-
-  <ion-list>
-    <ion-list-header>
-      <ion-label>
-        Data
-      </ion-label>
-    </ion-list-header>
-    <ion-item>
-      <ion-avatar slot="start">
-        <img src="./avatar.svg">
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          Normal text
-        </h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur
-        </p>
-        <p>
-          adipiscing elit.
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-thumbnail slot="start">
-        <img src="./thumbnail.svg">
-      </ion-thumbnail>
-      <ion-label>
-        <h3>
-          Normal text
-        </h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur
-        </p>
-        <p>
-          adipiscing elit.
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-icon name="call" slot="start"></ion-icon>
-      <ion-label>
-        <h3>
-          Normal text
-        </h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur
-        </p>
-        <p>
-          adipiscing elit.
-        </p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</div>
-
-<!-- Skeleton screen -->
-<div id="skeleton">
-  <div class="ion-padding custom-skeleton">
-    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-    <ion-skeleton-text animated></ion-skeleton-text>
-    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
-    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
-    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-  </div>
-
-  <ion-list>
-    <ion-list-header>
-      <ion-label>
-        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
-      </ion-label>
-    </ion-list-header>
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-skeleton-text animated></ion-skeleton-text>
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </h3>
-        <p>
-          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-        </p>
-        <p>
-          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-thumbnail slot="start">
-        <ion-skeleton-text animated></ion-skeleton-text>
-      </ion-thumbnail>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </h3>
-        <p>
-          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-        </p>
-        <p>
-          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-        </p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </h3>
-        <p>
-          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-        </p>
-        <p>
-          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-        </p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</div>
-```
-
-```css
-#data {
-  display: none;
-}
-
-/* Custom Skeleton Line Height and Margin */
-.custom-skeleton ion-skeleton-text {
-  line-height: 13px;
-}
-
-.custom-skeleton ion-skeleton-text:last-child {
-  margin-bottom: 5px;
-}
-```
-
-```javascript
-function onLoad() {
-  const skeletonEl = document.getElementById('skeleton');
-  const dataEl = document.getElementById('data');
-
-  setTimeout(() => {
-    skeletonEl.style.display = 'none';
-    dataEl.style.display = 'block';
-  }, 5000);
-}
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React, { useState } from 'react';
-import {
-  IonContent,
-  IonItem,
-  IonAvatar,
-  IonLabel,
-  IonSkeletonText,
-  IonListHeader,
-  IonIcon,
-  IonThumbnail,
-  IonList
-} from '@ionic/react';
-import { call } from 'ionicons/icons';
-
-import './SkeletonTextExample.css';
-
-export const SkeletonTextExample: React.FC = () => {
-  const [data, setData] = useState();
-
-  setTimeout(() => {
-    setData({
-      heading: 'Normal text',
-      para1: 'Lorem ipsum dolor sit amet, consectetur',
-      para2: 'adipiscing elit.'
-    });
-  }, 5000);
-
-  return (
-    <IonContent>
-      {data ? (
-        <>
-          <div className="ion-padding">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar
-            arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt
-            vehicula.
-          </div>
-
-          <IonList>
-            <IonListHeader>
-              <IonLabel>
-                Data
-              </IonLabel>
-            </IonListHeader>
-            <IonItem>
-              <IonAvatar slot="start">
-                <img src="./avatar.svg" />
-              </IonAvatar>
-              <IonLabel>
-                <h3>{data.heading}</h3>
-                <p>{data.para1}</p>
-                <p>{data.para2}</p>
-              </IonLabel>
-            </IonItem>
-            <IonItem>
-              <IonThumbnail slot="start">
-                <img src="./thumbnail.svg" />
-              </IonThumbnail>
-              <IonLabel>
-                <h3>{data.heading}</h3>
-                <p>{data.para1}</p>
-                <p>{data.para2}</p>
-              </IonLabel>
-            </IonItem>
-            <IonItem>
-              <IonIcon icon={call} slot="start" />
-              <IonLabel>
-                <h3>{data.heading}</h3>
-                <p>{data.para1}</p>
-                <p>{data.para2}</p>
-              </IonLabel>
-            </IonItem>
-          </IonList>
-        </>
-      ) : (
-        <>
-          <div className="ion-padding custom-skeleton">
-            <IonSkeletonText animated style={{ width: '60%' }} />
-            <IonSkeletonText animated />
-            <IonSkeletonText animated style={{ width: '88%' }} />
-            <IonSkeletonText animated style={{ width: '70%' }} />
-            <IonSkeletonText animated style={{ width: '60%' }} />
-          </div>
-
-          <IonList>
-            <IonListHeader>
-              <IonLabel>
-                <IonSkeletonText animated style={{ width: '20%' }} />
-              </IonLabel>
-            </IonListHeader>
-            <IonItem>
-              <IonAvatar slot="start">
-                <IonSkeletonText animated />
-              </IonAvatar>
-              <IonLabel>
-                <h3>
-                  <IonSkeletonText animated style={{ width: '50%' }} />
-                </h3>
-                <p>
-                  <IonSkeletonText animated style={{ width: '80%' }} />
-                </p>
-                <p>
-                  <IonSkeletonText animated style={{ width: '60%' }} />
-                </p>
-              </IonLabel>
-            </IonItem>
-            <IonItem>
-              <IonThumbnail slot="start">
-                <IonSkeletonText animated />
-              </IonThumbnail>
-              <IonLabel>
-                <h3>
-                  <IonSkeletonText animated style={{ width: '50%' }} />
-                </h3>
-                <p>
-                  <IonSkeletonText animated style={{ width: '80%' }} />
-                </p>
-                <p>
-                  <IonSkeletonText animated style={{ width: '60%' }} />
-                </p>
-              </IonLabel>
-            </IonItem>
-            <IonItem>
-              <IonSkeletonText animated style={{ width: '27px', height: '27px' }} slot="start" />
-              <IonLabel>
-                <h3>
-                  <IonSkeletonText animated style={{ width: '50%' }} />
-                </h3>
-                <p>
-                  <IonSkeletonText animated style={{ width: '80%' }} />
-                </p>
-                <p>
-                  <IonSkeletonText animated style={{ width: '60%' }} />
-                </p>
-              </IonLabel>
-            </IonItem>
-          </IonList>
-        </>
-      )}
-    </IonContent>
-  );
-};
-```
-
-```css
-/* Custom Skeleton Line Height and Margin */
-.custom-skeleton ion-skeleton-text {
-  line-height: 13px;
-}
-
-.custom-skeleton ion-skeleton-text:last-child {
-  margin-bottom: 5px;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, State, h } from '@stencil/core';
-
-@Component({
-  tag: 'skeleton-text-example',
-  styleUrl: 'skeleton-text-example.css'
-})
-export class SkeletonTextExample {
-  @State() data: any;
-
-  componentWillLoad() {
-    // Data will show after 5 seconds
-    setTimeout(() => {
-      this.data = {
-        'heading': 'Normal text',
-        'para1': 'Lorem ipsum dolor sit amet, consectetur',
-        'para2': 'adipiscing elit.'
-      };
-    }, 5000);
-  }
-
-  // Render skeleton screen when there is no data
-  renderSkeletonScreen() {
-    return [
-      <ion-content>
-        <div class="ion-padding custom-skeleton">
-          <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
-          <ion-skeleton-text animated></ion-skeleton-text>
-          <ion-skeleton-text animated style={{ 'width': '88%' }}></ion-skeleton-text>
-          <ion-skeleton-text animated style={{ 'width': '70%' }}></ion-skeleton-text>
-          <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
-        </div>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label>
-              <ion-skeleton-text animated style={{ 'width': '20%' }}></ion-skeleton-text>
-            </ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-skeleton-text animated></ion-skeleton-text>
-            </ion-avatar>
-            <ion-label>
-              <h3>
-                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
-              </h3>
-              <p>
-                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
-              </p>
-              <p>
-                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
-              </p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-thumbnail slot="start">
-              <ion-skeleton-text animated></ion-skeleton-text>
-            </ion-thumbnail>
-            <ion-label>
-              <h3>
-                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
-              </h3>
-              <p>
-                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
-              </p>
-              <p>
-                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
-              </p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style={{ 'width': '27p', 'height': '27px' }} slot="start"></ion-skeleton-text>
-            <ion-label>
-              <h3>
-                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
-              </h3>
-              <p>
-                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
-              </p>
-              <p>
-                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
-              </p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    ];
-  }
-
-  // Render the elements with data
-  renderDataScreen() {
-    return [
-      <ion-content>
-        <div class="ion-padding">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
-        </div>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label>
-              Data
-            </ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-avatar slot="start">
-              <img src="./avatar.svg"/>
-            </ion-avatar>
-            <ion-label>
-              <h3>
-                { this.data.heading }
-              </h3>
-              <p>
-                { this.data.para1 }
-              </p>
-              <p>
-                { this.data.para2 }
-              </p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-thumbnail slot="start">
-              <img src="./thumbnail.svg"/>
-            </ion-thumbnail>
-            <ion-label>
-              <h3>
-                { this.data.heading }
-              </h3>
-              <p>
-                { this.data.para1 }
-              </p>
-              <p>
-                { this.data.para2 }
-              </p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-icon name="call" slot="start"></ion-icon>
-            <ion-label>
-              <h3>
-                { this.data.heading }
-              </h3>
-              <p>
-                { this.data.para1 }
-              </p>
-              <p>
-                { this.data.para2 }
-              </p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    ];
-  }
-
-  render() {
-    if (this.data) {
-      return this.renderDataScreen();
-    } else {
-      return this.renderSkeletonScreen();
-    }
-  }
-}
-```
-
-```css
-/* Custom Skeleton Line Height and Margin */
-.custom-skeleton ion-skeleton-text {
-  line-height: 13px;
-}
-
-.custom-skeleton ion-skeleton-text:last-child {
-  margin-bottom: 5px;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Data to display after skeleton screen -->
-  <div v-if="data">
-    <div class="ion-padding">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
-    </div>
-
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
-          Data
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-avatar slot="start">
-          <img src="./avatar.svg">
-        </ion-avatar>
-        <ion-label>
-          <h3>
-            {{ data.heading }}
-          </h3>
-          <p>
-            {{ data.para1 }}
-          </p>
-          <p>
-            {{ data.para2 }}
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="./thumbnail.svg">
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            {{ data.heading }}
-          </h3>
-          <p>
-            {{ data.para1 }}
-          </p>
-          <p>
-            {{ data.para2 }}
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-icon :icon="call" slot="start"></ion-icon>
-        <ion-label>
-          <h3>
-            {{ data.heading }}
-          </h3>
-          <p>
-            {{ data.para1 }}
-          </p>
-          <p>
-            {{ data.para2 }}
-          </p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-  </div>
-
-  <!-- Skeleton screen -->
-  <div v-if="!data">
-    <div class="ion-padding custom-skeleton">
-      <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-      <ion-skeleton-text animated></ion-skeleton-text>
-      <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
-      <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
-      <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-    </div>
-
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
-          <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-avatar slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-avatar>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-  </div>
-</template>
-
-<style>
-  /* Custom Skeleton Line Height and Margin */
-  .custom-skeleton ion-skeleton-text {
-    line-height: 13px;
-  }
-
-  .custom-skeleton ion-skeleton-text:last-child {
-    margin-bottom: 5px;
-  }
-</style>
-
-<script>
-import { 
-  IonAvatar,
-  IonIcon,
-  IonItem, 
-  IonLabel, 
-  IonList, 
-  IonListHeader,
-  IonSkeletonText,
-  IonThumbnail
-} from '@ionic/vue';
-import { call } from 'ionicons/icons';
-import { defineComponent, ref } from 'vue';
+## Customization
 
-export default defineComponent({
-  components: {
-    IonAvatar,
-    IonIcon,
-    IonItem, 
-    IonLabel, 
-    IonList, 
-    IonListHeader,
-    IonSkeletonText,
-    IonThumbnail
-  },
-  setup() {
-    const data = ref();
-    
-    setTimeout(() => {
-      data.value = {
-        'heading': 'Normal text',
-        'para1': 'Lorem ipsum dolor sit amet, consectetur',
-        'para2': 'adipiscing elit.'
-      };
-    }, 5000);
-    
-    return { data }
-  }
-});
-</script>
-```
+### Theming
 
-</TabItem>
+import Theming from '@site/static/usage/skeleton-text/theming/index.md';
 
-</Tabs>
+<Theming />
 
 ## Properties
 <Props />
diff --git a/static/usage/skeleton-text/basic/angular/angular-html.md b/static/usage/skeleton-text/basic/angular/angular-html.md
new file mode 100644
index 00000000000..bea0ee90431
--- /dev/null
+++ b/static/usage/skeleton-text/basic/angular/angular-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/skeleton-text/basic/angular/angular-ts.md b/static/usage/skeleton-text/basic/angular/angular-ts.md
new file mode 100644
index 00000000000..1931197e875
--- /dev/null
+++ b/static/usage/skeleton-text/basic/angular/angular-ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+  public loaded = false;
+}
+
+```
\ No newline at end of file
diff --git a/static/usage/skeleton-text/basic/demo.html b/static/usage/skeleton-text/basic/demo.html
new file mode 100644
index 00000000000..1571c89d85f
--- /dev/null
+++ b/static/usage/skeleton-text/basic/demo.html
@@ -0,0 +1,89 @@
+<!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
new file mode 100644
index 00000000000..a605ef2462f
--- /dev/null
+++ b/static/usage/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 angularHTML from './angular/angular-html.md';
+import angularTS from './angular/angular-ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/app.component.html': angularHTML,
+        'src/app/app.component.ts': angularTS
+      }
+    },
+  }}
+  src="usage/skeleton-text/basic/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/skeleton-text/basic/javascript.md b/static/usage/skeleton-text/basic/javascript.md
new file mode 100644
index 00000000000..5eefa7c1149
--- /dev/null
+++ b/static/usage/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/skeleton-text/basic/react.md b/static/usage/skeleton-text/basic/react.md
new file mode 100644
index 00000000000..2ea377034c9
--- /dev/null
+++ b/static/usage/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/skeleton-text/basic/vue.md b/static/usage/skeleton-text/basic/vue.md
new file mode 100644
index 00000000000..c03a518af19
--- /dev/null
+++ b/static/usage/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/skeleton-text/theming/angular/angular-css.md b/static/usage/skeleton-text/theming/angular/angular-css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/skeleton-text/theming/angular/angular-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/skeleton-text/theming/angular/angular-html.md b/static/usage/skeleton-text/theming/angular/angular-html.md
new file mode 100644
index 00000000000..4044c112b0c
--- /dev/null
+++ b/static/usage/skeleton-text/theming/angular/angular-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/skeleton-text/theming/demo.html b/static/usage/skeleton-text/theming/demo.html
new file mode 100644
index 00000000000..98c691431e9
--- /dev/null
+++ b/static/usage/skeleton-text/theming/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>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/index.md b/static/usage/skeleton-text/theming/index.md
new file mode 100644
index 00000000000..7f7cde7b91d
--- /dev/null
+++ b/static/usage/skeleton-text/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/react-tsx.md';
+import reactCSS from './react/react-css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/angular-html.md';
+import angularCSS from './angular/angular-css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/app.component.html': angularHTML,
+        'src/app/app.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/skeleton-text/theming/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/skeleton-text/theming/javascript.md b/static/usage/skeleton-text/theming/javascript.md
new file mode 100644
index 00000000000..20463c6aba6
--- /dev/null
+++ b/static/usage/skeleton-text/theming/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/skeleton-text/theming/react/react-css.md b/static/usage/skeleton-text/theming/react/react-css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/skeleton-text/theming/react/react-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/skeleton-text/theming/react/react-tsx.md b/static/usage/skeleton-text/theming/react/react-tsx.md
new file mode 100644
index 00000000000..29e6e159f68
--- /dev/null
+++ b/static/usage/skeleton-text/theming/react/react-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/skeleton-text/theming/vue.md b/static/usage/skeleton-text/theming/vue.md
new file mode 100644
index 00000000000..418a7ca610f
--- /dev/null
+++ b/static/usage/skeleton-text/theming/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>
+```

From f2e622f938feeb4fbc27d36d8a73ae817584a0ce Mon Sep 17 00:00:00 2001
From: John Wheeler <73669769+johnwheeler-prod@users.noreply.github.com>
Date: Tue, 9 Aug 2022 10:38:37 -0400
Subject: [PATCH 011/469] chore(titan updates): updates through 0809 (#2489)

---
 scripts/data/meta-override.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scripts/data/meta-override.json b/scripts/data/meta-override.json
index 9f058fd4f06..10de584062e 100644
--- a/scripts/data/meta-override.json
+++ b/scripts/data/meta-override.json
@@ -322,6 +322,10 @@
       "title": "Angular NG Build Configuration to Build Ionic Apps | ionic build",
       "description": "Build web assets and prepare your Ionic app for any platform targets. Ionic build uses the Angular CLI—see the ng build docs for how to use the configuration."
     },
+    "capacitor-build": {
+      "title": "Ionic Capacitor Build for Apps - Documentation",
+      "description": "Build an Ionic project for a given platform. Once Ionic Capacitor Build copies web assets into the native platform, you can build your app using the native IDE."
+    },
     "capacitor-copy": {
       "title": "Ionic Capacitor Copy - Options to Copy and Compile Web Assets",
       "description": "Perform an Ionic build, which compiles web assets and copies web assets to Capacitor native platform(s), with Ionic Capacitor Copy. Read to learn about options."

From 98cd3704380cbaeb405735761c49641c73257346 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 11 Aug 2022 14:02:19 -0400
Subject: [PATCH 012/469] docs(chip): playground examples (#2480)

---
 docs/api/chip.md                              | 328 +-----------------
 static/usage/chip/basic/angular.md            |   5 +
 static/usage/chip/basic/demo.html             |  27 ++
 static/usage/chip/basic/index.md              |   8 +
 static/usage/chip/basic/javascript.md         |   5 +
 static/usage/chip/basic/react.md              |  14 +
 static/usage/chip/basic/vue.md                |  16 +
 static/usage/chip/color/angular.md            |  12 +
 static/usage/chip/color/demo.html             |  45 +++
 static/usage/chip/color/index.md              |   8 +
 static/usage/chip/color/javascript.md         |  12 +
 static/usage/chip/color/react.md              |  21 ++
 static/usage/chip/color/vue.md                |  23 ++
 static/usage/chip/slots/angular.md            |  15 +
 static/usage/chip/slots/demo.html             |  37 ++
 static/usage/chip/slots/index.md              |   8 +
 static/usage/chip/slots/javascript.md         |  15 +
 static/usage/chip/slots/react.md              |  26 ++
 static/usage/chip/slots/vue.md                |  34 ++
 .../styling/angular/example_component_css.md  |   6 +
 .../styling/angular/example_component_html.md |   3 +
 static/usage/chip/styling/demo.html           |  32 ++
 static/usage/chip/styling/index.md            |  31 ++
 static/usage/chip/styling/javascript.md       |  10 +
 static/usage/chip/styling/react/main_css.md   |   6 +
 static/usage/chip/styling/react/main_tsx.md   |  11 +
 static/usage/chip/styling/vue.md              |  21 ++
 27 files changed, 463 insertions(+), 316 deletions(-)
 create mode 100644 static/usage/chip/basic/angular.md
 create mode 100644 static/usage/chip/basic/demo.html
 create mode 100644 static/usage/chip/basic/index.md
 create mode 100644 static/usage/chip/basic/javascript.md
 create mode 100644 static/usage/chip/basic/react.md
 create mode 100644 static/usage/chip/basic/vue.md
 create mode 100644 static/usage/chip/color/angular.md
 create mode 100644 static/usage/chip/color/demo.html
 create mode 100644 static/usage/chip/color/index.md
 create mode 100644 static/usage/chip/color/javascript.md
 create mode 100644 static/usage/chip/color/react.md
 create mode 100644 static/usage/chip/color/vue.md
 create mode 100644 static/usage/chip/slots/angular.md
 create mode 100644 static/usage/chip/slots/demo.html
 create mode 100644 static/usage/chip/slots/index.md
 create mode 100644 static/usage/chip/slots/javascript.md
 create mode 100644 static/usage/chip/slots/react.md
 create mode 100644 static/usage/chip/slots/vue.md
 create mode 100644 static/usage/chip/styling/angular/example_component_css.md
 create mode 100644 static/usage/chip/styling/angular/example_component_html.md
 create mode 100644 static/usage/chip/styling/demo.html
 create mode 100644 static/usage/chip/styling/index.md
 create mode 100644 static/usage/chip/styling/javascript.md
 create mode 100644 static/usage/chip/styling/react/main_css.md
 create mode 100644 static/usage/chip/styling/react/main_tsx.md
 create mode 100644 static/usage/chip/styling/vue.md

diff --git a/docs/api/chip.md b/docs/api/chip.md
index 4e10449fd00..55b50b01d34 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -1,12 +1,6 @@
 ---
 title: "ion-chip"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/chip/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/chip/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
@@ -24,330 +18,32 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 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
 
+import BasicExample from '@site/static/usage/chip/basic/index.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-chip>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-label color="secondary">Secondary Label</ion-label>
-</ion-chip>
-
-<ion-chip color="secondary">
-  <ion-label color="dark">Secondary w/ Dark label</ion-label>
-</ion-chip>
-
-<ion-chip [disabled]="true">
-  <ion-label>Disabled Chip</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="pin"></ion-icon>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="heart" color="dark"></ion-icon>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-label>Button 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>
-
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Avatar Chip</ion-label>
-  <ion-icon name="close-circle"></ion-icon>
-</ion-chip>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-chip>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-label color="secondary">Secondary Label</ion-label>
-</ion-chip>
-
-<ion-chip color="secondary">
-  <ion-label color="dark">Secondary w/ Dark label</ion-label>
-</ion-chip>
-
-<ion-chip disabled="true">
-  <ion-label>Disabled Chip</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="pin"></ion-icon>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="heart" color="dark"></ion-icon>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-label>Button 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>
-
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Avatar Chip</ion-label>
-  <ion-icon name="close-circle"></ion-icon>
-</ion-chip>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react';
-import { pin, heart, closeCircle, close } from 'ionicons/icons';
-
-export const ChipExamples: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>ChipExamples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonChip>
-          <IonLabel>Default</IonLabel>
-        </IonChip>
-
-        <IonChip>
-          <IonLabel color="secondary">Secondary Label</IonLabel>
-        </IonChip>
-
-        <IonChip color="secondary">
-          <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
-        </IonChip>
-
-        <IonChip disabled={true}>
-          <IonLabel>Disabled Chip</IonLabel>
-        </IonChip>
-
-        <IonChip>
-          <IonIcon icon={pin} />
-          <IonLabel>Default</IonLabel>
-        </IonChip>
-
-        <IonChip>
-          <IonIcon icon={heart} color="dark" />
-          <IonLabel>Default</IonLabel>
-        </IonChip>
-
-        <IonChip>
-          <IonLabel>Button Chip</IonLabel>
-          <IonIcon icon={closeCircle} />
-        </IonChip>
-
-        <IonChip>
-          <IonIcon icon={pin} color="primary" />
-          <IonLabel>Icon Chip</IonLabel>
-          <IonIcon icon={close} />
-        </IonChip>
-
-        <IonChip>
-          <IonAvatar>
-            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-          </IonAvatar>
-          <IonLabel>Avatar Chip</IonLabel>
-          <IonIcon icon={closeCircle} />
-        </IonChip>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'chip-example',
-  styleUrl: 'chip-example.css'
-})
-export class ChipExample {
-  render() {
-    return [
-      <ion-chip>
-        <ion-label>Default</ion-label>
-      </ion-chip>,
-
-      <ion-chip>
-        <ion-label color="secondary">Secondary Label</ion-label>
-      </ion-chip>,
-
-      <ion-chip color="secondary">
-        <ion-label color="dark">Secondary w/ Dark label</ion-label>
-      </ion-chip>,
-
-      <ion-chip>
-        <ion-icon name="pin"></ion-icon>
-        <ion-label>Default</ion-label>
-      </ion-chip>,
-
-      <ion-chip>
-        <ion-icon name="heart" color="dark"></ion-icon>
-        <ion-label>Default</ion-label>
-      </ion-chip>,
-
-      <ion-chip>
-        <ion-label>Button 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>,
-
-      <ion-chip>
-        <ion-avatar>
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-avatar>
-        <ion-label>Avatar Chip</ion-label>
-        <ion-icon name="close-circle"></ion-icon>
-      </ion-chip>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-chip>
-    <ion-label>Default</ion-label>
-  </ion-chip>
-
-  <ion-chip>
-    <ion-label color="secondary">Secondary Label</ion-label>
-  </ion-chip>
-
-  <ion-chip color="secondary">
-    <ion-label color="dark">Secondary w/ Dark label</ion-label>
-  </ion-chip>
-
-  <ion-chip :disabled="true">
-    <ion-label>Disabled Chip</ion-label>
-  </ion-chip>
-
-  <ion-chip>
-    <ion-icon :icon="pin"></ion-icon>
-    <ion-label>Default</ion-label>
-  </ion-chip>
+<BasicExample />
 
-  <ion-chip>
-    <ion-icon :icon="heart" color="dark"></ion-icon>
-    <ion-label>Default</ion-label>
-  </ion-chip>
+## Colors
 
-  <ion-chip>
-    <ion-label>Button Chip</ion-label>
-    <ion-icon :icon="closeCircle"></ion-icon>
-  </ion-chip>
+import ColorExample from '@site/static/usage/chip/color/index.md';
 
-  <ion-chip>
-    <ion-icon :icon="pin" color="primary"></ion-icon>
-    <ion-label>Icon Chip</ion-label>
-    <ion-icon :icon="close"></ion-icon>
-  </ion-chip>
+<ColorExample />
 
-  <ion-chip>
-    <ion-avatar>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-avatar>
-    <ion-label>Avatar Chip</ion-label>
-    <ion-icon :icon="closeCircle"></ion-icon>
-  </ion-chip>
-</template>
 
-<script>
-import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/vue';
-import { close, closeCircle, heart, pin } from 'ionicons/icons';
+## Slotting Components and Icons
 
-import { defineComponent } from 'vue';
+import SlotExample from '@site/static/usage/chip/slots/index.md';
 
-export default defineComponent({
-  components: { IonAvatar, IonChip, IonIcon, IonLabel },
-  setup() {
-    return { close, closeCircle, heart, pin }
-  }
-});
-</script>
-```
+<SlotExample />
 
+## Styling
 
-</TabItem>
+import StylingExample from '@site/static/usage/chip/styling/index.md';
 
-</Tabs>
+<StylingExample />
 
 ## Properties
 <Props />
diff --git a/static/usage/chip/basic/angular.md b/static/usage/chip/basic/angular.md
new file mode 100644
index 00000000000..0e9440b7ea8
--- /dev/null
+++ b/static/usage/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/chip/basic/demo.html b/static/usage/chip/basic/demo.html
new file mode 100644
index 00000000000..85bf9b12ade
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/chip/basic/index.md b/static/usage/chip/basic/index.md
new file mode 100644
index 00000000000..02e79a4f64b
--- /dev/null
+++ b/static/usage/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/chip/basic/demo.html" />
diff --git a/static/usage/chip/basic/javascript.md b/static/usage/chip/basic/javascript.md
new file mode 100644
index 00000000000..fb494e84571
--- /dev/null
+++ b/static/usage/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/chip/basic/react.md b/static/usage/chip/basic/react.md
new file mode 100644
index 00000000000..cc1989f2d03
--- /dev/null
+++ b/static/usage/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/chip/basic/vue.md b/static/usage/chip/basic/vue.md
new file mode 100644
index 00000000000..69634b44d3e
--- /dev/null
+++ b/static/usage/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/chip/color/angular.md b/static/usage/chip/color/angular.md
new file mode 100644
index 00000000000..db05dd6f248
--- /dev/null
+++ b/static/usage/chip/color/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/chip/color/demo.html b/static/usage/chip/color/demo.html
new file mode 100644
index 00000000000..9f05dea22d0
--- /dev/null
+++ b/static/usage/chip/color/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>
diff --git a/static/usage/chip/color/index.md b/static/usage/chip/color/index.md
new file mode 100644
index 00000000000..6c8ed67e81c
--- /dev/null
+++ b/static/usage/chip/color/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/chip/color/demo.html" />
diff --git a/static/usage/chip/color/javascript.md b/static/usage/chip/color/javascript.md
new file mode 100644
index 00000000000..db05dd6f248
--- /dev/null
+++ b/static/usage/chip/color/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/chip/color/react.md b/static/usage/chip/color/react.md
new file mode 100644
index 00000000000..8f12b4f978e
--- /dev/null
+++ b/static/usage/chip/color/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/chip/color/vue.md b/static/usage/chip/color/vue.md
new file mode 100644
index 00000000000..55221ac5115
--- /dev/null
+++ b/static/usage/chip/color/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/chip/slots/angular.md b/static/usage/chip/slots/angular.md
new file mode 100644
index 00000000000..6387a0e55ba
--- /dev/null
+++ b/static/usage/chip/slots/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+  </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/chip/slots/demo.html b/static/usage/chip/slots/demo.html
new file mode 100644
index 00000000000..fd3f22a72df
--- /dev/null
+++ b/static/usage/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 src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+          </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
new file mode 100644
index 00000000000..590dd242f92
--- /dev/null
+++ b/static/usage/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/chip/slots/demo.html" />
diff --git a/static/usage/chip/slots/javascript.md b/static/usage/chip/slots/javascript.md
new file mode 100644
index 00000000000..6387a0e55ba
--- /dev/null
+++ b/static/usage/chip/slots/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+  </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/chip/slots/react.md b/static/usage/chip/slots/react.md
new file mode 100644
index 00000000000..25fd0d192b1
--- /dev/null
+++ b/static/usage/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 src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+        </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/chip/slots/vue.md b/static/usage/chip/slots/vue.md
new file mode 100644
index 00000000000..29e12166788
--- /dev/null
+++ b/static/usage/chip/slots/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    </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/chip/styling/angular/example_component_css.md b/static/usage/chip/styling/angular/example_component_css.md
new file mode 100644
index 00000000000..60dc62c6417
--- /dev/null
+++ b/static/usage/chip/styling/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-chip {
+  --background: #00213f;
+  --color: #adefd1;
+}
+```
diff --git a/static/usage/chip/styling/angular/example_component_html.md b/static/usage/chip/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..67c6144e7b8
--- /dev/null
+++ b/static/usage/chip/styling/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-chip>Default</ion-chip>
+```
diff --git a/static/usage/chip/styling/demo.html b/static/usage/chip/styling/demo.html
new file mode 100644
index 00000000000..26048748135
--- /dev/null
+++ b/static/usage/chip/styling/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>
diff --git a/static/usage/chip/styling/index.md b/static/usage/chip/styling/index.md
new file mode 100644
index 00000000000..4f07411cf99
--- /dev/null
+++ b/static/usage/chip/styling/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/chip/styling/demo.html"
+/>
diff --git a/static/usage/chip/styling/javascript.md b/static/usage/chip/styling/javascript.md
new file mode 100644
index 00000000000..b40912d73a2
--- /dev/null
+++ b/static/usage/chip/styling/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/chip/styling/react/main_css.md b/static/usage/chip/styling/react/main_css.md
new file mode 100644
index 00000000000..60dc62c6417
--- /dev/null
+++ b/static/usage/chip/styling/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-chip {
+  --background: #00213f;
+  --color: #adefd1;
+}
+```
diff --git a/static/usage/chip/styling/react/main_tsx.md b/static/usage/chip/styling/react/main_tsx.md
new file mode 100644
index 00000000000..b4fc5f12cae
--- /dev/null
+++ b/static/usage/chip/styling/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/chip/styling/vue.md b/static/usage/chip/styling/vue.md
new file mode 100644
index 00000000000..7195787bd52
--- /dev/null
+++ b/static/usage/chip/styling/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>
+```

From ad7394344778830066231332205772d134233f97 Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Thu, 11 Aug 2022 13:15:26 -0600
Subject: [PATCH 013/469] fix(meta): OG image on all pages (#2492)

---
 docs/index.md                      |   1 -
 docs/react.md                      |   1 -
 docusaurus.config.js               |   1 +
 static/img/meta/open-graph.png     | Bin 36722 -> 85347 bytes
 versioned_docs/version-v5/index.md |   1 -
 versioned_docs/version-v5/react.md |   1 -
 6 files changed, 1 insertion(+), 4 deletions(-)
 mode change 100755 => 100644 static/img/meta/open-graph.png

diff --git a/docs/index.md b/docs/index.md
index aa5e8747fd2..1f91e35204a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -2,7 +2,6 @@
 title: Introduction to Ionic
 sidebar_label: Overview
 slug: /
-image: /img/meta/open-graph.png
 hide_table_of_contents: true
 demoUrl: https://docs-demo.ionic.io/
 demoSourceUrl: https://github.com/ionic-team/docs-demo
diff --git a/docs/react.md b/docs/react.md
index 0978942e0f4..2ab6b863a63 100644
--- a/docs/react.md
+++ b/docs/react.md
@@ -3,7 +3,6 @@ title: Ionic React
 sidebar_label: Overview
 hide_title: true
 hide_table_of_contents: true
-image: /img/meta/open-graph.png
 ---
 
 import PageStyles from '@components/page/react/PageStyles';
diff --git a/docusaurus.config.js b/docusaurus.config.js
index b3438eb4a01..478c2f8e0be 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -24,6 +24,7 @@ module.exports = {
   organizationName: 'ionic-team',
   projectName: 'ionic-docs',
   themeConfig: {
+    metadata: [{ name: 'og:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' }],
     colorMode: {
       defaultMode: 'light',
     },
diff --git a/static/img/meta/open-graph.png b/static/img/meta/open-graph.png
old mode 100755
new mode 100644
index 4db4a96753a35daa3295201b39823d38b4fd83e3..92a1d0a6ca6c8811d518233b94c2a4fd5a241c93
GIT binary patch
literal 85347
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

literal 36722
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
K=d#Wzp$P!me;V%q

diff --git a/versioned_docs/version-v5/index.md b/versioned_docs/version-v5/index.md
index 64cc7f2dad3..81cd24667a2 100644
--- a/versioned_docs/version-v5/index.md
+++ b/versioned_docs/version-v5/index.md
@@ -1,7 +1,6 @@
 ---
 sidebar_label: Overview
 slug: /
-image: /img/meta/open-graph.png
 title: Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps
 description: Ionic Framework is an open-source UI toolkit to create your own mobile and desktop apps using web technologies with integrations for popular frameworks.
 hide_table_of_contents: true
diff --git a/versioned_docs/version-v5/react.md b/versioned_docs/version-v5/react.md
index c5881bfd31b..7659b72dbb7 100644
--- a/versioned_docs/version-v5/react.md
+++ b/versioned_docs/version-v5/react.md
@@ -3,7 +3,6 @@ title: Ionic React
 sidebar_label: Overview
 hide_title: true
 hide_table_of_contents: true
-image: /img/meta/open-graph.png
 description: Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards
 ---
 

From 2290a543c4ef79a684def1bc9679ccfce7cf55f6 Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Thu, 11 Aug 2022 15:06:28 -0600
Subject: [PATCH 014/469] chore(meta): Add twitter meta info (#2493)

---
 docusaurus.config.js | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 478c2f8e0be..4e94c18df89 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -24,7 +24,38 @@ module.exports = {
   organizationName: 'ionic-team',
   projectName: 'ionic-docs',
   themeConfig: {
-    metadata: [{ name: 'og:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' }],
+    metadata: [
+      { name: 'og:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' },
+      { name: 'twitter:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' },
+      {
+        name: 'twitter:card',
+        content: 'summary_large_image',
+      },
+      {
+        name: 'twitter:domain',
+        content: 'ionicframework.com',
+      },
+      {
+        name: 'twitter:site',
+        content: '@ionicframework',
+      },
+      {
+        name: 'twitter:creator',
+        content: 'ionicframework',
+      },
+      {
+        name: 'fb:page_id',
+        content: '1321836767955949',
+      },
+      {
+        name: 'og:type',
+        content: 'website',
+      },
+      {
+        name: 'og:site_name',
+        content: 'Ionic Framework Docs',
+      },
+    ],
     colorMode: {
       defaultMode: 'light',
     },

From cb723c363e618ff788e204f49604e4a266fd43dd Mon Sep 17 00:00:00 2001
From: Masahiko Sakakibara <sakakibara@rdlabo.jp>
Date: Sat, 13 Aug 2022 08:54:21 +0900
Subject: [PATCH 015/469] chore

---
 docs/vue/quickstart.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index d8df3ee5225..99bedeb7835 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -287,11 +287,7 @@ const routes: Array<RouteRecordRaw> = [
 
 最初に確認した `App` コンポーネントと同様に、特定のIonic Frameworkコンポーネントのインポート、Vueからのインポート、Vueコンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。
 
-<<<<<<< HEAD
 スタイルに `scoped` を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vueアプリケーションでは、 `scoped` のついたスタイルを使用することを強くお勧めします。
-=======
-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.
->>>>>>> main
 
 `IonPage` はすべてのページ(route/URLを持つコンポーネント)の基本コンポーネントであり、header, title, contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。
 

From c06ef0efc316b4740088797647e9493d8a86dff7 Mon Sep 17 00:00:00 2001
From: Masahiko Sakakibara <sakakibara@rdlabo.jp>
Date: Sat, 13 Aug 2022 08:59:29 +0900
Subject: [PATCH 016/469] =?UTF-8?q?translate():=20datetime-button=E3=82=92?=
 =?UTF-8?q?=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/api/datetime-button.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index d13e5dcdf0d..912c8316369 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -21,27 +21,27 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 <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.
+Datetimeボタンは、[Datetime](./datetime) コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。
 
-## 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.
+Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。
 
-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.
+Angular、React、VueなどのJavaScriptフレームワークでDatetime Buttonを使用する場合は、 [ion-modalのkeepContentsMountedプロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされたdatetimeインスタンスがマウントされるようになります。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/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.
+`ion-datetime-button` は、マウントされた `ion-datetime` インスタンスと関連付ける必要があります。そのため、[Inline Modals](./modal#inline-modals-recommended) と [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に設定して使用しなければなりません。
 
 <!--
 ## Customization

From be992d4dc99703aea37317500c88f8f9119e66c2 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 19 Aug 2022 10:00:05 -0500
Subject: [PATCH 017/469] refactor(): remove unused TOC imports (#2500)

---
 docs/api/accordion.md       | 1 -
 docs/api/alert.md           | 1 -
 docs/api/breadcrumbs.md     | 1 -
 docs/api/chip.md            | 1 -
 docs/api/datetime-button.md | 1 -
 docs/api/datetime.md        | 1 -
 docs/api/loading.md         | 1 -
 docs/api/picker.md          | 1 -
 docs/api/popover.md         | 1 -
 docs/api/range.md           | 1 -
 docs/api/select.md          | 1 -
 docs/api/skeleton-text.md   | 1 -
 12 files changed, 12 deletions(-)

diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 87380efebdf..85aef595172 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/accordion/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 7004abbf2bb..edb38aeeb92 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/alert/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index aad5436ff2e..03d3ccea789 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -14,7 +14,6 @@ import Slots from '@site/static/auto-generated/breadcrumbs/slots.md';
 
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/chip.md b/docs/api/chip.md
index 55b50b01d34..2e011567f40 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -14,7 +14,6 @@ import Slots from '@site/static/auto-generated/chip/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index d13e5dcdf0d..7c74d82154a 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/datetime-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 4e051a731af..a3eff7cde00 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -44,7 +44,6 @@ import Theming from '@site/static/usage/datetime/theming/index.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/loading.md b/docs/api/loading.md
index a3f495b1576..dbb4896bea4 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/loading/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
diff --git a/docs/api/picker.md b/docs/api/picker.md
index 2699f04c1ac..ef97687ee8c 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/picker/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
diff --git a/docs/api/popover.md b/docs/api/popover.md
index 63f57530b5a..cced5b1dfe2 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/popover/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/range.md b/docs/api/range.md
index 37e0596e84a..2e6b6c74b19 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/range/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 20d78040333..1b5a9aa6f34 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/select/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index 53c6a2d76b4..ead54000e93 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -17,7 +17,6 @@ import Slots from '@site/static/auto-generated/skeleton-text/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 

From 75829eb5dd1a8a57adb8af3291056383c7465435 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:51:19 -0500
Subject: [PATCH 018/469] docs(): remove desktop wording (#2501)

---
 docs/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 1f91e35204a..cf184693102 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -11,10 +11,10 @@ import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
 <head>
-  <title>Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps</title>
+  <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 and desktop apps using web technologies with integrations for popular frameworks."
+    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" />
@@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic is an open source UI toolkit for building performant, high-quality mobile and desktop 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).
+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.
 
@@ -80,7 +80,7 @@ Ionic emulates native app UI guidelines and uses native SDKs, bringing the UI st
 
 ### Cross-platform
 
-Build and deploy apps that work across multiple platforms, such as native iOS, Android, desktop, and the web as a Progressive Web App - all with one code base. Write once, run anywhere.
+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
 
@@ -109,11 +109,11 @@ Angular has always been at the center of what makes Ionic great. While the core
 
 ### 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, the web, and the desktop. With `@ionic/react`, you can use all the core Ionic components, but in a way that feels like using native React components.
+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, the web, and the desktop. With `@ionic/vue`, you can use all the core Ionic components, but in a way that feels like using native Vue components.
+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
 

From 5e39452d58819668eee4587c1c1fd67446bf70d5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 22 Aug 2022 13:55:33 -0500
Subject: [PATCH 019/469] docs(support): update JS framework and browser
 support (#2502)

---
 docs/reference/browser-support.md | 23 +++++++++--------------
 docs/reference/support.md         | 30 ++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md
index 89e4e398419..edb53a6e1d7 100644
--- a/docs/reference/browser-support.md
+++ b/docs/reference/browser-support.md
@@ -18,6 +18,7 @@ In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styli
 
 | 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+ |
@@ -28,27 +29,21 @@ Check the [latest Android stats](https://developer.android.com/about/dashboards/
 
 ### 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 whose manufacturer has locked the webview version and does not allow the webview to update. These webviews are typically stuck at the version that was available when the device initially shipped.
-
-As a result, Ionic Framework v6 only supports Android devices and emulators running Android 5.0+ with a webview of Chromium 60 or newer. For context, this is the version that Stencil can support with no polyfills: https://stenciljs.com/docs/browser-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.
 
-### A Note on Angular 13+ Support
-
-Angular's support policy for iOS is the two most recent major versions. At the time of release that is iOS 14 and 15. 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.
-
 ## 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 v6 | Ionic v5 | Ionic v4 |
-| :---------: | :------: | :------: | :------: |
-| **Chrome**  |   60+    |    ✔     |    ✔     |
-| **Safari**  |   13+    |    ✔     |    ✔     |
-|  **Edge**   |   79+    |   79+    |    ✔     |
-| **Firefox** |   63+    |    ✔     |    ✔     |
-|  **IE 11**  |  **X**   |  **X**   |  **X**   |
+|   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/docs/reference/support.md b/docs/reference/support.md
index 54e23e3664f..e3a2bf6b188 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -22,7 +22,8 @@ The current status of each Ionic Framework version is:
 
 | Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
 | :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
-| V6      | **Active**            | Dec 8, 2021  | TBD              | TBD               |
+| 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      | Extended Support Only | Jan 23, 2019 | Aug 11, 2020     | Sept 30, 2022     |
 | V3      | End of Support        | Apr 5, 2017  | Oct 30, 2019     | Aug 11, 2020      |
@@ -42,27 +43,36 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-|    v6     |           v12           |          v14.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    |
+| v7        | v13                     | v14.x                   | 4.4+       |   
+| v6        | v12                     | v14.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 support was added in Ionic v6.1.9.
 
+**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 |
 | :-------: | :--------------------: | :--------: |
-|    v6     |          v17+          |    3.7+    |
-|    v5     |         v16.8+         |    3.7+    |
-|    v4     |         v16.8+         |    3.7+    |
+| 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 |
 | :-------: | :------------------: | :--------: |
-|    v6     |       v3.0.6+        |    3.9+    |
-|    v5     |        v3.0+         |    3.9+    |
+| v7        | v3.0.6+              | 3.9+       |
+| v6        | v3.0.6+              | 3.9+       |
+| v5        | v3.0+                | 3.9+       |
 
 ### Native Bridges
 

From 24a1e2790174e55652c43c3cb050985cc3a56f7b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 10:01:44 -0500
Subject: [PATCH 020/469] docs(modal): add label info (#2504)

---
 docs/api/modal.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 2bd1b95b970..864bb6493af 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -226,6 +226,11 @@ interface ModalCustomEvent extends CustomEvent {
 | ----- | ------------------- |
 | `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.

From b99957f435b1139bb66637eddae7e7c14e5bf56a Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 23 Aug 2022 15:35:02 -0500
Subject: [PATCH 021/469] docs(alert): add accessibility section (#2505)

---
 docs/api/alert.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/api/alert.md b/docs/api/alert.md
index edb38aeeb92..491e4eecb45 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -160,6 +160,16 @@ import Customization from '@site/static/usage/alert/customization/index.md';
  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
 

From 98aef26b507fc6b5cc06b53e4f1d97188ad7eda8 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 24 Aug 2022 15:41:48 -0400
Subject: [PATCH 022/469] docs(virtual-scroll): remove virtual scroll component
 (#2507)

---
 docs/angular/virtual-scroll.md |   8 +-
 docs/api/virtual-scroll.md     | 303 ---------------------------------
 docs/react/virtual-scroll.md   |  16 +-
 docs/vue/virtual-scroll.md     |   6 +-
 sidebars.js                    |   2 +-
 5 files changed, 19 insertions(+), 316 deletions(-)
 delete mode 100644 docs/api/virtual-scroll.md

diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md
index 0150d810162..634821b18f6 100644
--- a/docs/angular/virtual-scroll.md
+++ b/docs/angular/virtual-scroll.md
@@ -1,8 +1,12 @@
 # Virtual Scroll
 
-In the past, we have provided an `ion-virtual-scroll` component in Ionic Framework to help with list virtualization. At the time this was not available in Angular, but recently Angular has provided its own solution via the `@angular/cdk` package.
+:::caution Looking for `ion-virtual-scroll`?
 
-## Setup
+`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`:
 
diff --git a/docs/api/virtual-scroll.md b/docs/api/virtual-scroll.md
deleted file mode 100644
index 102220df3fb..00000000000
--- a/docs/api/virtual-scroll.md
+++ /dev/null
@@ -1,303 +0,0 @@
----
-title: "ion-virtual-scroll"
-hide_table_of_contents: true
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/virtual-scroll/props.md';
-import Events from '@site/static/auto-generated/virtual-scroll/events.md';
-import Methods from '@site/static/auto-generated/virtual-scroll/methods.md';
-import Parts from '@site/static/auto-generated/virtual-scroll/parts.md';
-import CustomProps from '@site/static/auto-generated/virtual-scroll/custom-props.md';
-import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
-
-<head>
-  <title>ion-virtual-scroll | Angular Virtual Scroll List for Ionic Apps</title>
-  <meta name="description" content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates." />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
-Virtual Scroll displays a virtual, "infinite" list. An array of records
-is passed to the virtual scroll containing the data to create templates
-for. The template created for each record, referred to as a cell, can
-consist of items, headers, and footers. For performance reasons, not every record
-in the list is rendered at once; instead a small subset of records (enough to fill the viewport)
-are rendered and reused as the user scrolls.
-
-This guide will go over the recommended virtual scrolling packages for each framework integration as well as documentation for the deprecated `ion-virtual-scroll` component for Ionic Angular. We recommend using the framework-specific solutions listed below, but the `ion-virtual-scroll` documentation is available below for developers who are still using that component.
-
-## Angular
-
-For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll.md).
-
-## React
-
-For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll.md).
-
-## Vue
-
-For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.md).
-
-------
-
-The following documentation applies to the `ion-virtual-scroll` component.
-
-## Approximate Widths and Heights
-
-If the height of items in the virtual scroll are not close to the
-default size of `40px`, it is extremely important to provide a value for
-the `approxItemHeight` property. An exact pixel-perfect size is not necessary,
-but without an estimate the virtual scroll will not render correctly.
-
-The approximate width and height of each template is used to help
-determine how many cells should be created, and to help calculate
-the height of the scrollable area. Note that the actual rendered size
-of each cell comes from the app's CSS, whereas this approximation
-is only used to help calculate initial dimensions.
-
-It's also important to know that Ionic's default item sizes have
-slightly different heights between platforms, which is perfectly fine.
-
-## Images Within Virtual Scroll
-
-HTTP requests, image decoding, and image rendering can cause jank while
-scrolling. In order to better control images, Ionic provides `<ion-img>`
-to manage HTTP requests and image rendering. While scrolling through items
-quickly, `<ion-img>` knows when and when not to make requests, when and
-when not to render images, and only loads the images that are viewable
-after scrolling. [Read more about `ion-img`.](img.md)
-
-It's also important for app developers to ensure image sizes are locked in,
-and after images have fully loaded they do not change size and affect any
-other element sizes. Simply put, to ensure rendering bugs are not introduced,
-it's vital that elements within a virtual item does not dynamically change.
-
-For virtual scrolling, the natural effects of the `<img>` are not desirable
-features. We recommend using the `<ion-img>` component over the native
-`<img>` element because when an `<img>` element is added to the DOM, it
-immediately makes a HTTP request for the image file. Additionally, `<img>`
-renders whenever it wants which could be while the user is scrolling. However,
-`<ion-img>` is governed by the containing `ion-content` and does not render
-images while scrolling quickly.
-
-
-## Virtual Scroll Performance Tips
-
-### iOS Cordova WKWebView
-
-When deploying to iOS with Cordova, it's highly recommended to use the
-[WKWebView plugin](https://blog.ionicframework.com/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/)
-in order to take advantage of iOS's higher performing webview. Additionally,
-WKWebView is superior at scrolling efficiently in comparison to the older
-UIWebView.
-
-### Lock in element dimensions and locations
-
-In order for virtual scroll to efficiently size and locate every item, it's
-very important every element within each virtual item does not dynamically
-change its dimensions or location. The best way to ensure size and location
-does not change, it's recommended each virtual item has locked in its size
-via CSS.
-
-### Use `ion-img` for images
-
-When including images within Virtual Scroll, be sure to use
-[`ion-img`](img.md) rather than the standard `<img>` HTML element.
-With `ion-img`, images are lazy loaded so only the viewable ones are
-rendered, and HTTP requests are efficiently controlled while scrolling.
-
-### Set Approximate Widths and Heights
-
-As mentioned above, all elements should lock in their dimensions. However,
-virtual scroll isn't aware of the dimensions until after they have been
-rendered. For the initial render, virtual scroll still needs to set
-how many items should be built. With "approx" property inputs, such as
-`approxItemHeight`, we're able to give virtual scroll an approximate size,
-therefore allowing virtual scroll to decide how many items should be
-created.
-
-### Changing dataset should use `trackBy`
-
-It is possible for the identities of elements in the iterator to change
-while the data does not. This can happen, for example, if the iterator
-produced from an RPC to the server, and that RPC is re-run. Even if the
-"data" hasn't changed, the second response will produce objects with
-different identities, and Ionic will tear down the entire DOM and rebuild
-it. This is an expensive operation and should be avoided if possible.
-
-### Efficient headers and footer functions
-Each virtual item must stay extremely efficient, but one way to really
-kill its performance is to perform any DOM operations within section header
-and footer functions. These functions are called for every record in the
-dataset, so please make sure they're performant.
-
-
-
-## Usage
-
-```html
-<ion-content>
-  <ion-virtual-scroll [items]="items" approxItemHeight="320px">
-    <ion-card *virtualItem="let item; let itemBounds = bounds;">
-      <div>
-        <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
-      </div>
-    <ion-card-header>
-      <ion-card-title>{{ item.name }}</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>{{ item.content }}</ion-card-content>
-    </ion-card>
-  </ion-virtual-scroll>
-</ion-content>
-```
-
-```typescript
-export class VirtualScrollPageComponent {
-  items: any[] = [];
-
-  constructor() {
-    for (let i = 0; i < 1000; i++) {
-      this.items.push({
-        name: i + ' - ' + images[rotateImg],
-        imgSrc: getImgSrc(),
-        avatarSrc: getImgSrc(),
-        imgHeight: Math.floor(Math.random() * 50 + 150),
-        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
-      });
-
-      rotateImg++;
-      if (rotateImg === images.length) {
-        rotateImg = 0;
-      }
-    }
-  }
-}
-
-const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
-
-const images = [
-  'bandit',
-  'batmobile',
-  'blues-brothers',
-  'bueller',
-  'delorean',
-  'eleanor',
-  'general-lee',
-  'ghostbusters',
-  'knight-rider',
-  'mirth-mobile'
-];
-
-function getImgSrc() {
-  const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
-  rotateImg++;
-  if (rotateImg === images.length) {
-    rotateImg = 0;
-  }
-  return src;
-}
-
-let rotateImg = 0;
-```
-
-### Basic
-
-The array of records should be passed to the `items` property on the `ion-virtual-scroll` element.
-The data given to the `items` property must be an array. An item template with the `*virtualItem` property is required in the `ion-virtual-scroll`. The `*virtualItem` property can be added to any element.
-
-```html
-<ion-virtual-scroll [items]="items">
-  <ion-item *virtualItem="let item">
-    {{ item }}
-  </ion-item>
-</ion-virtual-scroll>
-```
-
-### Section Headers and Footers
-
-Section headers and footers are optional. They can be dynamically created
-from developer-defined functions. For example, a large list of contacts
-usually has a divider for each letter in the alphabet. Developers provide
-their own custom function to be called on each record. The logic in the
-custom function should determine whether to create the section template
-and what data to provide to the template. The custom function should
-return `null` if a template shouldn't be created.
-
-```html
-<ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn">
-  <ion-item-divider *virtualHeader="let header">
-    {{ header }}
-  </ion-item-divider>
-  <ion-item *virtualItem="let item">
-    Item: {{ item }}
-  </ion-item>
-</ion-virtual-scroll>
-```
-
-Below is an example of a custom function called on every record. It
-gets passed the individual record, the record's index number,
-and the entire array of records. In this example, after every 20
-records a header will be inserted. So between the 19th and 20th records,
-between the 39th and 40th, and so on, a `<ion-item-divider>` will
-be created and the template's data will come from the function's
-returned data.
-
-```ts
-myHeaderFn(record, recordIndex, records) {
-  if (recordIndex % 20 === 0) {
-    return 'Header ' + recordIndex;
-  }
-  return null;
-}
-```
-
-
-### Custom Components
-
-If a custom component is going to be used within Virtual Scroll, it's best
-to wrap it with a `<div>` to ensure the component is rendered correctly. Since
-each custom component's implementation and internals can be quite different, wrapping
-within a `<div>` is a safe way to make sure dimensions are measured correctly.
-
-```html
-<ion-virtual-scroll [items]="items">
-  <div *virtualItem="let item">
-    <my-custom-item [item]="item">
-      {{ item }}
-    </my-custom-item>
-  </div>
-</ion-virtual-scroll>
-```
-
-## 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/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.md
index de6aa30a9d1..b77bf341b69 100644
--- a/docs/react/virtual-scroll.md
+++ b/docs/react/virtual-scroll.md
@@ -1,5 +1,11 @@
 # 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
@@ -51,12 +57,6 @@ From there, we can use the `itemContent` property to pass a function that will b
 
 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`.
 
-## A Note on Ionic Components
-
-Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling.
-
-We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437.
-
 ## 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.
@@ -66,9 +66,7 @@ For example:
 ```tsx
 <IonPage>
   <IonContent scrollY={false}>
-    <Virtuoso className="ion-content-scroll-host">
-      {/* Your existing content and configurations */}
-    </Virtuoso>
+    <Virtuoso className="ion-content-scroll-host">{/* Your existing content and configurations */}</Virtuoso>
   </IonContent>
 </IonPage>
 ```
diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.md
index 47c3ebcf204..24c90d7503b 100644
--- a/docs/vue/virtual-scroll.md
+++ b/docs/vue/virtual-scroll.md
@@ -1,6 +1,10 @@
 # Virtual Scroll
 
-One virtual scrolling solution to consider for your Ionic Vue app is [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller/blob/next/packages/vue-virtual-scroller/README.md). This guide will go over how to install `vue-virtual-scroller` into your Ionic Vue application and use it with other Ionic components.
+:::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
 
diff --git a/sidebars.js b/sidebars.js
index e6231ae0a68..37be85167db 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -344,7 +344,7 @@ module.exports = {
       type: 'category',
       label: 'List',
       collapsed: false,
-      items: ['api/list', 'api/list-header', 'api/virtual-scroll'],
+      items: ['api/list', 'api/list-header'],
     },
     {
       type: 'category',

From 948209f38defae5302c0e82b784b6147f808a6e0 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 26 Aug 2022 10:49:42 -0400
Subject: [PATCH 023/469] docs(infinite-scroll): accessibility best practice
 for role="feed" (#2509)

---
 docs/api/infinite-scroll.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 6ccc264e906..f45ba5b3e80 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -61,6 +61,34 @@ Infinite scroll requires a scroll container to function. When using a virtual sc
 </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

From 9dcd8144d139d85abac842c95d3814aee9f63993 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 29 Aug 2022 15:47:21 -0500
Subject: [PATCH 024/469] docs(action-sheet): add accessibility section (#2511)

---
 docs/api/action-sheet.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 42113201f7a..69135c3d513 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -72,6 +72,11 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
  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.
 :::
 
+## 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
 

From 67907633ad1b86a548c69de0deecf558afcb30a4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 30 Aug 2022 08:37:31 -0500
Subject: [PATCH 025/469] docs(button): fix icon usage (#2513)

---
 docs/api/button.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/api/button.md b/docs/api/button.md
index 2831df0f112..17834e8ba83 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -358,17 +358,17 @@ export class ButtonExample {
 
   <!-- Icons -->
   <ion-button>
-    <ion-icon slot="start" name="star"></ion-icon>
+    <ion-icon slot="start" :icon="star"></ion-icon>
     Left Icon
   </ion-button>
 
   <ion-button>
     Right Icon
-    <ion-icon slot="end" name="star"></ion-icon>
+    <ion-icon slot="end" :icon="star"></ion-icon>
   </ion-button>
 
   <ion-button>
-    <ion-icon slot="icon-only" name="star"></ion-icon>
+    <ion-icon slot="icon-only" :icon="star"></ion-icon>
   </ion-button>
 
   <!-- Sizes -->
@@ -378,11 +378,15 @@ export class ButtonExample {
 </template>
 
 <script>
-import { IonButton } from '@ionic/vue';
+import { IonButton, IonIcon } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { star } from 'ionicons/icons';
 
 export default defineComponent({
-  components: { IonButton }
+  components: { IonButton, IonIcon },
+  setup() {
+    return { star }
+  }
 });
 </script>
 ```

From d41594745e57fa484fd3a18ff37c4cfdd7a86026 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 30 Aug 2022 11:09:02 -0400
Subject: [PATCH 026/469] docs(react): remove virtual scroll outdated section
 (#2508)

---
 docs/react/virtual-scroll.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.md
index de6aa30a9d1..c40d235bbbe 100644
--- a/docs/react/virtual-scroll.md
+++ b/docs/react/virtual-scroll.md
@@ -51,12 +51,6 @@ From there, we can use the `itemContent` property to pass a function that will b
 
 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`.
 
-## A Note on Ionic Components
-
-Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling.
-
-We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437.
-
 ## 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.

From 5fd7ce425a0d22f226e82178b8c7a2e80988c67e Mon Sep 17 00:00:00 2001
From: jcesarmobile <jcesarmobile@gmail.com>
Date: Wed, 31 Aug 2022 00:02:35 +0200
Subject: [PATCH 027/469] docs(your-first-app): Replace Storage plugin with
 Preferences (#2499)

---
 docs/angular/your-first-app.md                 |  4 ++--
 docs/angular/your-first-app/2-taking-photos.md |  2 +-
 .../angular/your-first-app/4-loading-photos.md | 10 +++++-----
 docs/angular/your-first-app/5-adding-mobile.md |  2 +-
 docs/angular/your-first-app/7-live-reload.md   |  4 ++--
 docs/react/your-first-app.md                   |  4 ++--
 docs/react/your-first-app/2-taking-photos.md   |  2 +-
 docs/react/your-first-app/4-loading-photos.md  | 18 +++++++++---------
 docs/react/your-first-app/5-adding-mobile.md   |  8 ++++----
 docs/react/your-first-app/7-live-reload.md     |  4 ++--
 docs/vue/your-first-app.md                     |  4 ++--
 docs/vue/your-first-app/2-taking-photos.md     |  2 +-
 docs/vue/your-first-app/4-loading-photos.md    | 18 +++++++++---------
 docs/vue/your-first-app/5-adding-mobile.md     |  6 +++---
 docs/vue/your-first-app/7-live-reload.md       |  2 +-
 .../version-v5/angular/your-first-app.md       |  4 ++--
 .../angular/your-first-app/2-taking-photos.md  |  2 +-
 .../angular/your-first-app/4-loading-photos.md | 10 +++++-----
 .../angular/your-first-app/5-adding-mobile.md  |  2 +-
 .../angular/your-first-app/7-live-reload.md    |  4 ++--
 .../version-v5/react/your-first-app.md         |  4 ++--
 .../react/your-first-app/2-taking-photos.md    |  2 +-
 .../react/your-first-app/4-loading-photos.md   | 16 ++++++++--------
 .../react/your-first-app/5-adding-mobile.md    |  8 ++++----
 .../react/your-first-app/7-live-reload.md      |  4 ++--
 .../version-v5/vue/your-first-app.md           |  4 ++--
 .../vue/your-first-app/2-taking-photos.md      |  2 +-
 .../vue/your-first-app/4-loading-photos.md     | 18 +++++++++---------
 .../vue/your-first-app/5-adding-mobile.md      |  8 ++++----
 .../vue/your-first-app/7-live-reload.md        |  2 +-
 30 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md
index 753dbefb5a5..5cb290f4c1c 100644
--- a/docs/angular/your-first-app.md
+++ b/docs/angular/your-first-app.md
@@ -36,7 +36,7 @@ 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.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).
 
@@ -88,7 +88,7 @@ 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/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements
diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md
index 33064cd1140..eab0e8d1b02 100644
--- a/docs/angular/your-first-app/2-taking-photos.md
+++ b/docs/angular/your-first-app/2-taking-photos.md
@@ -26,7 +26,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
 ```tsx
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+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:
diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md
index 15aa6ec926a..3c34b84f546 100644
--- a/docs/angular/your-first-app/4-loading-photos.md
+++ b/docs/angular/your-first-app/4-loading-photos.md
@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
 
 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 [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## Preferences API
 
 Begin by defining a constant variable that will act as the key for the store:
 
@@ -21,10 +21,10 @@ export class PhotoService {
 }
 ```
 
-Next, at the end of the `addNewToGallery` function, add a call to `Storage.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.
+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
-Storage.set({
+Preferences.set({
   key: this.PHOTO_STORAGE,
   value: JSON.stringify(this.photos),
 });
@@ -35,7 +35,7 @@ With the photo array data saved, create a function called `loadSaved()` that can
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
   this.photos = JSON.parse(photoList.value) || [];
 
   // more to come...
diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md
index 913d4d582e6..72ef3429132 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -93,7 +93,7 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
   this.photos = JSON.parse(photoList.value) || [];
 
   // Easiest way to detect when running on the web:
diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md
index c560be55767..26fe3b4fbf0 100644
--- a/docs/angular/your-first-app/7-live-reload.md
+++ b/docs/angular/your-first-app/7-live-reload.md
@@ -91,7 +91,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
   this.photos.splice(position, 1);
 
   // Update photos array cache by overwriting the existing photo array
-  Storage.set({
+  Preferences.set({
     key: this.PHOTO_STORAGE,
     value: JSON.stringify(this.photos)
   });
@@ -107,7 +107,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 }
 ```
 
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+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. 💪
 
diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.md
index 47fce5914fe..8364e516080 100644
--- a/docs/react/your-first-app.md
+++ b/docs/react/your-first-app.md
@@ -32,7 +32,7 @@ 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.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).
 
@@ -84,7 +84,7 @@ 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/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements
diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md
index a7fd6cb61ab..c2d65fa5c1d 100644
--- a/docs/react/your-first-app/2-taking-photos.md
+++ b/docs/react/your-first-app/2-taking-photos.md
@@ -29,7 +29,7 @@ import { isPlatform } from '@ionic/react';
 
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
 import { Capacitor } from '@capacitor/core';
 ```
 
diff --git a/docs/react/your-first-app/4-loading-photos.md b/docs/react/your-first-app/4-loading-photos.md
index 76acfce106a..7911d592b6d 100644
--- a/docs/react/your-first-app/4-loading-photos.md
+++ b/docs/react/your-first-app/4-loading-photos.md
@@ -7,15 +7,15 @@ sidebar_label: Loading Photos
   <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 Storage API for loading our photos in a key-value store."
+    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 [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## 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`:
 
@@ -26,10 +26,10 @@ 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 `Storage.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.
+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
-Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+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:
@@ -37,10 +37,10 @@ With the photo array data saved, we will create a method that will retrieve the
 ```tsx
 useEffect(() => {
   const loadSaved = async () => {
-    const { value } = await Storage.get({ key: PHOTO_STORAGE });
-    const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[];
+    const { value } = await Preferences.get({ key: PHOTO_STORAGE });
+    const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
 
-    for (let photo of photosInStorage) {
+    for (let photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -48,7 +48,7 @@ useEffect(() => {
       // Web platform only: Load the photo as base64 data
       photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
-    setPhotos(photosInStorage);
+    setPhotos(photosInPreferences);
   };
   loadSaved();
 }, []);
diff --git a/docs/react/your-first-app/5-adding-mobile.md b/docs/react/your-first-app/5-adding-mobile.md
index ec65d87524f..eef40b7a333 100644
--- a/docs/react/your-first-app/5-adding-mobile.md
+++ b/docs/react/your-first-app/5-adding-mobile.md
@@ -52,12 +52,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
 
 ```tsx
 const loadSaved = async () => {
-  const { value } = await Storage.get({ key: PHOTO_STORAGE });
+  const { value } = await Preferences.get({ key: PHOTO_STORAGE });
 
-  const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[];
+  const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
   // If running on the web...
   if (!isPlatform('hybrid')) {
-    for (let photo of photosInStorage) {
+    for (let photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -66,7 +66,7 @@ const loadSaved = async () => {
       photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
   }
-  setPhotos(photosInStorage);
+  setPhotos(photosInPreferences);
 };
 ```
 
diff --git a/docs/react/your-first-app/7-live-reload.md b/docs/react/your-first-app/7-live-reload.md
index 86fe0affc71..2d37c4efdba 100644
--- a/docs/react/your-first-app/7-live-reload.md
+++ b/docs/react/your-first-app/7-live-reload.md
@@ -91,7 +91,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   const newPhotos = photos.filter((p) => p.filepath !== photo.filepath);
 
   // Update photos array cache by overwriting the existing photo array
-  Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+  Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
   const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
@@ -103,7 +103,7 @@ const deletePhoto = async (photo: UserPhoto) => {
 };
 ```
 
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+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:
 
diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md
index ff03a79ef5b..31362bf23bb 100644
--- a/docs/vue/your-first-app.md
+++ b/docs/vue/your-first-app.md
@@ -32,7 +32,7 @@ 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.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).
 
@@ -84,7 +84,7 @@ 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/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements
diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
index e0632873305..38bafe39a59 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.md
@@ -20,7 +20,7 @@ We will start by importing the various utilities we will use from Vue core and C
 import { ref, onMounted, watch } from 'vue';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
 ```
 
 Next, create a function named usePhotoGallery:
diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.md
index 4a2df79fa5a..b0157de7654 100644
--- a/docs/vue/your-first-app/4-loading-photos.md
+++ b/docs/vue/your-first-app/4-loading-photos.md
@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
 
 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 [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## 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`:
 
@@ -16,11 +16,11 @@ Begin by defining a constant variable that will act as the key for the store at
 const PHOTO_STORAGE = 'photos';
 ```
 
-Next, add a `cachePhotos` function that saves the Photos array as JSON to file storage:
+Next, add a `cachePhotos` function that saves the Photos array as JSON to preferences:
 
 ```tsx
 const cachePhotos = () => {
-  Storage.set({
+  Preferences.set({
     key: PHOTO_STORAGE,
     value: JSON.stringify(photos.value),
   });
@@ -33,14 +33,14 @@ Next, use the Vue [watch function](https://v3.vuejs.org/guide/composition-api-in
 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 Storage, then each photo's data into base64 format:
+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 Storage.get({ key: PHOTO_STORAGE });
-  const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
+  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
-  for (const photo of photosInStorage) {
+  for (const photo of photosInPreferences) {
     const file = await Filesystem.readFile({
       path: photo.filepath,
       directory: Directory.Data,
@@ -48,7 +48,7 @@ const loadSaved = async () => {
     photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
   }
 
-  photos.value = photosInStorage;
+  photos.value = photosInPreferences;
 };
 ```
 
diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.md
index 39a37a424e7..28c60aa6bf3 100644
--- a/docs/vue/your-first-app/5-adding-mobile.md
+++ b/docs/vue/your-first-app/5-adding-mobile.md
@@ -58,11 +58,11 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
 ```tsx
 const loadSaved = async () => {
   const photoList = await Storage.get({ key: PHOTO_STORAGE });
-  const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
   // If running on the web...
   if (!isPlatform('hybrid')) {
-    for (const photo of photosInStorage) {
+    for (const photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -72,7 +72,7 @@ const loadSaved = async () => {
     }
   }
 
-  photos.value = photosInStorage;
+  photos.value = photosInPreferences;
 };
 ```
 
diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.md
index 4010e1fcfff..a76c6e6622e 100644
--- a/docs/vue/your-first-app/7-live-reload.md
+++ b/docs/vue/your-first-app/7-live-reload.md
@@ -125,7 +125,7 @@ Remember that removing the photo from the `photos` array triggers the `cachePhot
 
 ```tsx
 const cachePhotos = () => {
-  Storage.set({
+  Preferences.set({
     key: PHOTO_STORAGE,
     value: JSON.stringify(photos.value),
   });
diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.md
index bee8e745cc4..08e208422b7 100644
--- a/versioned_docs/version-v5/angular/your-first-app.md
+++ b/versioned_docs/version-v5/angular/your-first-app.md
@@ -29,7 +29,7 @@ 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.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).
 
@@ -81,7 +81,7 @@ 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/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements
diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
index 5153a2051f8..febc4de66d3 100644
--- a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
@@ -19,7 +19,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
 ```tsx
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+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:
diff --git a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
index 15aa6ec926a..3c34b84f546 100644
--- a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
 
 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 [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## Preferences API
 
 Begin by defining a constant variable that will act as the key for the store:
 
@@ -21,10 +21,10 @@ export class PhotoService {
 }
 ```
 
-Next, at the end of the `addNewToGallery` function, add a call to `Storage.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.
+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
-Storage.set({
+Preferences.set({
   key: this.PHOTO_STORAGE,
   value: JSON.stringify(this.photos),
 });
@@ -35,7 +35,7 @@ With the photo array data saved, create a function called `loadSaved()` that can
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
   this.photos = JSON.parse(photoList.value) || [];
 
   // more to come...
diff --git a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
index 913d4d582e6..72ef3429132 100644
--- a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
@@ -93,7 +93,7 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
   this.photos = JSON.parse(photoList.value) || [];
 
   // Easiest way to detect when running on the web:
diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
index 52de878c339..9aad9835c23 100644
--- a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
@@ -85,7 +85,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
   this.photos.splice(position, 1);
 
   // Update photos array cache by overwriting the existing photo array
-  Storage.set({
+  Preferences.set({
     key: this.PHOTO_STORAGE,
     value: JSON.stringify(this.photos)
   });
@@ -101,7 +101,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 }
 ```
 
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+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. 💪
 
diff --git a/versioned_docs/version-v5/react/your-first-app.md b/versioned_docs/version-v5/react/your-first-app.md
index 63a11b97543..da7a5f7ccf6 100644
--- a/versioned_docs/version-v5/react/your-first-app.md
+++ b/versioned_docs/version-v5/react/your-first-app.md
@@ -27,7 +27,7 @@ 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.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).
 
@@ -79,7 +79,7 @@ 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/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements
diff --git a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
index 33dcb20ad6e..4abf6bc2051 100644
--- a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
@@ -22,7 +22,7 @@ import { isPlatform } from '@ionic/react';
 
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
 import { Capacitor } from '@capacitor/core';
 ```
 
diff --git a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
index 35dcd63a38a..00454621eb9 100644
--- a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
 
 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 [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## 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`:
 
@@ -19,10 +19,10 @@ 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 `Storage.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.
+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
-Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+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:
@@ -30,10 +30,10 @@ With the photo array data saved, we will create a method that will retrieve the
 ```tsx
 useEffect(() => {
   const loadSaved = async () => {
-    const { value } = await Storage.get({ key: PHOTO_STORAGE });
-    const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[];
+    const { value } = await Preferences.get({ key: PHOTO_STORAGE });
+    const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
 
-    for (let photo of photosInStorage) {
+    for (let photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -41,7 +41,7 @@ useEffect(() => {
       // Web platform only: Load the photo as base64 data
       photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
-    setPhotos(photosInStorage);
+    setPhotos(photosInPreferences);
   };
   loadSaved();
 }, []);
diff --git a/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md
index ec65d87524f..eef40b7a333 100644
--- a/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md
@@ -52,12 +52,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
 
 ```tsx
 const loadSaved = async () => {
-  const { value } = await Storage.get({ key: PHOTO_STORAGE });
+  const { value } = await Preferences.get({ key: PHOTO_STORAGE });
 
-  const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[];
+  const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
   // If running on the web...
   if (!isPlatform('hybrid')) {
-    for (let photo of photosInStorage) {
+    for (let photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -66,7 +66,7 @@ const loadSaved = async () => {
       photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
   }
-  setPhotos(photosInStorage);
+  setPhotos(photosInPreferences);
 };
 ```
 
diff --git a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
index 1c1de115784..45dcf768053 100644
--- a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
@@ -91,7 +91,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   const newPhotos = photos.filter((p) => p.filepath !== photo.filepath);
 
   // Update photos array cache by overwriting the existing photo array
-  Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+  Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
   const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
@@ -103,7 +103,7 @@ const deletePhoto = async (photo: UserPhoto) => {
 };
 ```
 
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+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:
 
diff --git a/versioned_docs/version-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.md
index ab54638476d..db73be1f0cf 100644
--- a/versioned_docs/version-v5/vue/your-first-app.md
+++ b/versioned_docs/version-v5/vue/your-first-app.md
@@ -25,7 +25,7 @@ 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.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).
 
@@ -77,7 +77,7 @@ 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/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements
diff --git a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
index e0632873305..38bafe39a59 100644
--- a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
@@ -20,7 +20,7 @@ We will start by importing the various utilities we will use from Vue core and C
 import { ref, onMounted, watch } from 'vue';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
 ```
 
 Next, create a function named usePhotoGallery:
diff --git a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
index 4a2df79fa5a..b0157de7654 100644
--- a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
 
 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 [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## 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`:
 
@@ -16,11 +16,11 @@ Begin by defining a constant variable that will act as the key for the store at
 const PHOTO_STORAGE = 'photos';
 ```
 
-Next, add a `cachePhotos` function that saves the Photos array as JSON to file storage:
+Next, add a `cachePhotos` function that saves the Photos array as JSON to preferences:
 
 ```tsx
 const cachePhotos = () => {
-  Storage.set({
+  Preferences.set({
     key: PHOTO_STORAGE,
     value: JSON.stringify(photos.value),
   });
@@ -33,14 +33,14 @@ Next, use the Vue [watch function](https://v3.vuejs.org/guide/composition-api-in
 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 Storage, then each photo's data into base64 format:
+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 Storage.get({ key: PHOTO_STORAGE });
-  const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
+  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
-  for (const photo of photosInStorage) {
+  for (const photo of photosInPreferences) {
     const file = await Filesystem.readFile({
       path: photo.filepath,
       directory: Directory.Data,
@@ -48,7 +48,7 @@ const loadSaved = async () => {
     photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
   }
 
-  photos.value = photosInStorage;
+  photos.value = photosInPreferences;
 };
 ```
 
diff --git a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md
index 39a37a424e7..728e1ffb83c 100644
--- a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md
@@ -57,12 +57,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
 
 ```tsx
 const loadSaved = async () => {
-  const photoList = await Storage.get({ key: PHOTO_STORAGE });
-  const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+  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 photosInStorage) {
+    for (const photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -72,7 +72,7 @@ const loadSaved = async () => {
     }
   }
 
-  photos.value = photosInStorage;
+  photos.value = photosInPreferences;
 };
 ```
 
diff --git a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
index 0d64028f047..2764b126bc8 100644
--- a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
@@ -125,7 +125,7 @@ Remember that removing the photo from the `photos` array triggers the `cachePhot
 
 ```tsx
 const cachePhotos = () => {
-  Storage.set({
+  Preferences.set({
     key: PHOTO_STORAGE,
     value: JSON.stringify(photos.value),
   });

From 0506f010a3fad7413935ac68851228d0475cd77d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 31 Aug 2022 15:45:22 -0500
Subject: [PATCH 028/469] docs(toast): fix aria-live usage (#2520)

---
 docs/api/toast.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 2ef9e1be4ab..4de48c86620 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -98,7 +98,7 @@ Toasts are intended to be subtle notifications and are not intended to interrupt
 
 `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 presented. 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 presented, potentially interrupting any previous updates.
+`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. 
 
@@ -497,4 +497,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 8cb2f334c8ef1946c07d4b06fe819d44fb3b62bf Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 1 Sep 2022 12:58:22 -0500
Subject: [PATCH 029/469] fix(playground): use className instead of class
 (#2522)

---
 src/components/global/Playground/icons/IconDots.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/global/Playground/icons/IconDots.tsx b/src/components/global/Playground/icons/IconDots.tsx
index 3c13b771d9c..5d74a1822a9 100644
--- a/src/components/global/Playground/icons/IconDots.tsx
+++ b/src/components/global/Playground/icons/IconDots.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import './IconDots.css';
 
 export const IconDots = () => (
-  <div class="icon__dots">
+  <div className="icon__dots">
     <svg viewBox="0 0 64 64">
       <circle transform="translate(32,32)" r="6"></circle>
     </svg>

From 01dd2f5758e0eb9fdd4f880c582eced728ae9cc7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 1 Sep 2022 14:02:43 -0500
Subject: [PATCH 030/469] fix(skeleton-text): use consistent naming for files
 (#2523)

---
 .../usage/skeleton-text/basic/angular/angular-ts.md | 13 -------------
 .../{angular-html.md => example_component_html.md}  |  0
 .../basic/angular/example_component_ts.md           | 13 +++++++++++++
 static/usage/skeleton-text/basic/index.md           |  8 ++++----
 .../{angular-css.md => example_component_css.md}    |  0
 .../{angular-html.md => example_component_html.md}  |  0
 static/usage/skeleton-text/theming/index.md         | 12 ++++++------
 .../theming/react/{react-css.md => main_css.md}     |  0
 .../theming/react/{react-tsx.md => main_tsx.md}     |  0
 9 files changed, 23 insertions(+), 23 deletions(-)
 delete mode 100644 static/usage/skeleton-text/basic/angular/angular-ts.md
 rename static/usage/skeleton-text/basic/angular/{angular-html.md => example_component_html.md} (100%)
 create mode 100644 static/usage/skeleton-text/basic/angular/example_component_ts.md
 rename static/usage/skeleton-text/theming/angular/{angular-css.md => example_component_css.md} (100%)
 rename static/usage/skeleton-text/theming/angular/{angular-html.md => example_component_html.md} (100%)
 rename static/usage/skeleton-text/theming/react/{react-css.md => main_css.md} (100%)
 rename static/usage/skeleton-text/theming/react/{react-tsx.md => main_tsx.md} (100%)

diff --git a/static/usage/skeleton-text/basic/angular/angular-ts.md b/static/usage/skeleton-text/basic/angular/angular-ts.md
deleted file mode 100644
index 1931197e875..00000000000
--- a/static/usage/skeleton-text/basic/angular/angular-ts.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```ts
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
-})
-export class AppComponent {
-  public loaded = false;
-}
-
-```
\ No newline at end of file
diff --git a/static/usage/skeleton-text/basic/angular/angular-html.md b/static/usage/skeleton-text/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/basic/angular/angular-html.md
rename to static/usage/skeleton-text/basic/angular/example_component_html.md
diff --git a/static/usage/skeleton-text/basic/angular/example_component_ts.md b/static/usage/skeleton-text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..8b30337848c
--- /dev/null
+++ b/static/usage/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/skeleton-text/basic/index.md b/static/usage/skeleton-text/basic/index.md
index a605ef2462f..33b4f57ee26 100644
--- a/static/usage/skeleton-text/basic/index.md
+++ b/static/usage/skeleton-text/basic/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular-html.md';
-import angularTS from './angular/angular-ts.md';
+import angularHTML from './angular/example_component_html.md';
+import angularTS from './angular/example_component_ts.md';
 
 <Playground
   code={{
@@ -14,8 +14,8 @@ import angularTS from './angular/angular-ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS
       }
     },
   }}
diff --git a/static/usage/skeleton-text/theming/angular/angular-css.md b/static/usage/skeleton-text/theming/angular/example_component_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/angular-css.md
rename to static/usage/skeleton-text/theming/angular/example_component_css.md
diff --git a/static/usage/skeleton-text/theming/angular/angular-html.md b/static/usage/skeleton-text/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/angular-html.md
rename to static/usage/skeleton-text/theming/angular/example_component_html.md
diff --git a/static/usage/skeleton-text/theming/index.md b/static/usage/skeleton-text/theming/index.md
index 7f7cde7b91d..a79907b63b6 100644
--- a/static/usage/skeleton-text/theming/index.md
+++ b/static/usage/skeleton-text/theming/index.md
@@ -2,13 +2,13 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/react-tsx.md';
-import reactCSS from './react/react-css.md';
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angularHTML from './angular/angular-html.md';
-import angularCSS from './angular/angular-css.md';
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
 
 <Playground
   code={{
@@ -22,8 +22,8 @@ import angularCSS from './angular/angular-css.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.css': angularCSS
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
       }
     },
   }}
diff --git a/static/usage/skeleton-text/theming/react/react-css.md b/static/usage/skeleton-text/theming/react/main_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/react-css.md
rename to static/usage/skeleton-text/theming/react/main_css.md
diff --git a/static/usage/skeleton-text/theming/react/react-tsx.md b/static/usage/skeleton-text/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/react-tsx.md
rename to static/usage/skeleton-text/theming/react/main_tsx.md

From fe84d510c300c1b91658ca09825515cb2c60a187 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 1 Sep 2022 16:45:31 -0400
Subject: [PATCH 031/469] docs(avatar): add component playgrounds and new svg
 (#2524)

---
 docs/api/avatar.md                            | 181 ++----------------
 static/demos/api/avatar/avatar.svg            |  13 +-
 static/img/avatar.svg                         |  13 +-
 static/usage/avatar/basic/angular.md          |   5 +
 static/usage/avatar/basic/demo.html           |  27 +++
 static/usage/avatar/basic/index.md            |   8 +
 static/usage/avatar/basic/javascript.md       |   5 +
 static/usage/avatar/basic/react.md            |  15 ++
 static/usage/avatar/basic/vue.md              |  16 ++
 static/usage/avatar/chip/angular.md           |   8 +
 static/usage/avatar/chip/demo.html            |  30 +++
 static/usage/avatar/chip/index.md             |   8 +
 static/usage/avatar/chip/javascript.md        |   8 +
 static/usage/avatar/chip/react.md             |  17 ++
 static/usage/avatar/chip/vue.md               |  19 ++
 static/usage/avatar/item/angular.md           |   8 +
 static/usage/avatar/item/demo.html            |  30 +++
 static/usage/avatar/item/index.md             |   8 +
 static/usage/avatar/item/javascript.md        |   8 +
 static/usage/avatar/item/react.md             |  17 ++
 static/usage/avatar/item/vue.md               |  19 ++
 .../theming/angular/example_component_css.md  |   5 +
 .../theming/angular/example_component_html.md |   5 +
 static/usage/avatar/theming/demo.html         |  32 ++++
 static/usage/avatar/theming/index.md          |  32 ++++
 static/usage/avatar/theming/javascript.md     |  11 ++
 static/usage/avatar/theming/react.md          |  20 ++
 static/usage/avatar/theming/react/main_css.md |   5 +
 static/usage/avatar/theming/react/main_tsx.md |  18 ++
 static/usage/avatar/theming/vue.md            |  22 +++
 static/usage/chip/slots/angular.md            |   2 +-
 static/usage/chip/slots/demo.html             |   2 +-
 static/usage/chip/slots/javascript.md         |   2 +-
 static/usage/chip/slots/react.md              |   2 +-
 static/usage/chip/slots/vue.md                |   2 +-
 35 files changed, 448 insertions(+), 175 deletions(-)
 create mode 100644 static/usage/avatar/basic/angular.md
 create mode 100644 static/usage/avatar/basic/demo.html
 create mode 100644 static/usage/avatar/basic/index.md
 create mode 100644 static/usage/avatar/basic/javascript.md
 create mode 100644 static/usage/avatar/basic/react.md
 create mode 100644 static/usage/avatar/basic/vue.md
 create mode 100644 static/usage/avatar/chip/angular.md
 create mode 100644 static/usage/avatar/chip/demo.html
 create mode 100644 static/usage/avatar/chip/index.md
 create mode 100644 static/usage/avatar/chip/javascript.md
 create mode 100644 static/usage/avatar/chip/react.md
 create mode 100644 static/usage/avatar/chip/vue.md
 create mode 100644 static/usage/avatar/item/angular.md
 create mode 100644 static/usage/avatar/item/demo.html
 create mode 100644 static/usage/avatar/item/index.md
 create mode 100644 static/usage/avatar/item/javascript.md
 create mode 100644 static/usage/avatar/item/react.md
 create mode 100644 static/usage/avatar/item/vue.md
 create mode 100644 static/usage/avatar/theming/angular/example_component_css.md
 create mode 100644 static/usage/avatar/theming/angular/example_component_html.md
 create mode 100644 static/usage/avatar/theming/demo.html
 create mode 100644 static/usage/avatar/theming/index.md
 create mode 100644 static/usage/avatar/theming/javascript.md
 create mode 100644 static/usage/avatar/theming/react.md
 create mode 100644 static/usage/avatar/theming/react/main_css.md
 create mode 100644 static/usage/avatar/theming/react/main_tsx.md
 create mode 100644 static/usage/avatar/theming/vue.md

diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index 86fb904812a..e7a005fa719 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-avatar"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/avatar/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/avatar/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 
 import Props from '@site/static/auto-generated/avatar/props.md';
 import Events from '@site/static/auto-generated/avatar/events.md';
@@ -20,186 +15,36 @@ import Slots from '@site/static/auto-generated/avatar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 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
 
+import Basic from '@site/static/usage/avatar/basic/index.md';
 
+<Basic />
 
-## Usage
+## Chip Avatar
 
-<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' }]}>
+import Chip from '@site/static/usage/avatar/chip/index.md';
 
-<TabItem value="angular">
+<Chip />
 
-```html
-<ion-avatar>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-avatar>
+## Item Avatar
 
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Chip Avatar</ion-label>
-</ion-chip>
-
-<ion-item>
-  <ion-avatar slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Item Avatar</ion-label>
-</ion-item>
-```
+import Item from '@site/static/usage/avatar/item/index.md';
 
-</TabItem>
+<Item />
 
+## Theming
 
-<TabItem value="javascript">
+import Theming from '@site/static/usage/avatar/theming/index.md';
 
-```html
-<ion-avatar>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-avatar>
-
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Chip Avatar</ion-label>
-</ion-chip>
-
-<ion-item>
-  <ion-avatar slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Item Avatar</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const AvatarExample: React.FC = () => (
-  <IonContent>
-    <IonAvatar>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-    </IonAvatar>
-
-    <IonChip>
-      <IonAvatar>
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-      </IonAvatar>
-      <IonLabel>Chip Avatar</IonLabel>
-    </IonChip>
-
-    <IonItem>
-      <IonAvatar slot="start">
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-      </IonAvatar>
-      <IonLabel>Item Avatar</IonLabel>
-    </IonItem>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'avatar-example',
-  styleUrl: 'avatar-example.css'
-})
-export class AvatarExample {
-  render() {
-    return [
-      <ion-avatar>
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-      </ion-avatar>,
-
-      <ion-chip>
-        <ion-avatar>
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-avatar>
-        <ion-label>Chip Avatar</ion-label>
-      </ion-chip>,
-
-      <ion-item>
-        <ion-avatar slot="start">
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-avatar>
-        <ion-label>Item Avatar</ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-
-  <ion-chip>
-    <ion-avatar>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-avatar>
-    <ion-label>Chip Avatar</ion-label>
-  </ion-chip>
-
-  <ion-item>
-    <ion-avatar slot="start">
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-avatar>
-    <ion-label>Item Avatar</ion-label>
-  </ion-item>
-</template>
-
-<script>
-import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonAvatar, IonChip, IonItem, IonLabel }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
+<Theming />
 
 ## Properties
 <Props />
@@ -217,4 +62,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/demos/api/avatar/avatar.svg b/static/demos/api/avatar/avatar.svg
index 90c4d0e9cbd..bd0cec9a9c1 100644
--- a/static/demos/api/avatar/avatar.svg
+++ b/static/demos/api/avatar/avatar.svg
@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#c5dbff" d="M0 0h512v512H0z"/><path d="M256 304c61.6 0 112-50.4 112-112S317.6 80 256 80s-112 50.4-112 112 50.4 112 112 112zm0 40c-74.2 0-224 37.8-224 112v56h448v-56c0-74.2-149.8-112-224-112z" fill="#82aeff"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1765_7055)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M330.085 110.955C311.299 90.672 285.059 79.5024 256.097 79.5024C226.981 79.5024 200.655 90.6044 181.955 110.762C163.053 131.141 153.843 158.838 156.005 188.746C160.292 247.751 205.192 295.75 256.097 295.75C307.003 295.75 351.826 247.76 356.18 188.765C358.371 159.128 349.103 131.489 330.085 110.955Z" fill="#B3BAC0"/>
+<path d="M53.9275 511.997H458.333C459 503 458.206 483.499 456.333 473.141C448.185 427.941 422.757 389.972 382.789 363.327C347.282 339.675 302.305 326.642 256.13 326.642C209.956 326.642 164.978 339.666 129.471 363.327C89.5038 389.982 64.0754 427.951 55.9275 473.15C54.0546 483.509 53.5001 504.5 53.9275 511.997Z" fill="#B3BAC0"/>
+</g>
+<defs>
+<clipPath id="clip0_1765_7055">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/avatar.svg b/static/img/avatar.svg
index 90c4d0e9cbd..bd0cec9a9c1 100644
--- a/static/img/avatar.svg
+++ b/static/img/avatar.svg
@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#c5dbff" d="M0 0h512v512H0z"/><path d="M256 304c61.6 0 112-50.4 112-112S317.6 80 256 80s-112 50.4-112 112 50.4 112 112 112zm0 40c-74.2 0-224 37.8-224 112v56h448v-56c0-74.2-149.8-112-224-112z" fill="#82aeff"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1765_7055)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M330.085 110.955C311.299 90.672 285.059 79.5024 256.097 79.5024C226.981 79.5024 200.655 90.6044 181.955 110.762C163.053 131.141 153.843 158.838 156.005 188.746C160.292 247.751 205.192 295.75 256.097 295.75C307.003 295.75 351.826 247.76 356.18 188.765C358.371 159.128 349.103 131.489 330.085 110.955Z" fill="#B3BAC0"/>
+<path d="M53.9275 511.997H458.333C459 503 458.206 483.499 456.333 473.141C448.185 427.941 422.757 389.972 382.789 363.327C347.282 339.675 302.305 326.642 256.13 326.642C209.956 326.642 164.978 339.666 129.471 363.327C89.5038 389.982 64.0754 427.951 55.9275 473.15C54.0546 483.509 53.5001 504.5 53.9275 511.997Z" fill="#B3BAC0"/>
+</g>
+<defs>
+<clipPath id="clip0_1765_7055">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/usage/avatar/basic/angular.md b/static/usage/avatar/basic/angular.md
new file mode 100644
index 00000000000..0e544a336b8
--- /dev/null
+++ b/static/usage/avatar/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/avatar/basic/demo.html b/static/usage/avatar/basic/demo.html
new file mode 100644
index 00000000000..f4b499736c2
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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
new file mode 100644
index 00000000000..5c31f3f5306
--- /dev/null
+++ b/static/usage/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/avatar/basic/demo.html" />
diff --git a/static/usage/avatar/basic/javascript.md b/static/usage/avatar/basic/javascript.md
new file mode 100644
index 00000000000..0e544a336b8
--- /dev/null
+++ b/static/usage/avatar/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/avatar/basic/react.md b/static/usage/avatar/basic/react.md
new file mode 100644
index 00000000000..419456d4733
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+      </IonAvatar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/basic/vue.md b/static/usage/avatar/basic/vue.md
new file mode 100644
index 00000000000..95bee27c769
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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/avatar/chip/angular.md b/static/usage/avatar/chip/angular.md
new file mode 100644
index 00000000000..767e5bc3ff3
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+```
diff --git a/static/usage/avatar/chip/demo.html b/static/usage/avatar/chip/demo.html
new file mode 100644
index 00000000000..bf827440dd6
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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
new file mode 100644
index 00000000000..2acfeb4b578
--- /dev/null
+++ b/static/usage/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/avatar/chip/demo.html" />
diff --git a/static/usage/avatar/chip/javascript.md b/static/usage/avatar/chip/javascript.md
new file mode 100644
index 00000000000..767e5bc3ff3
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+```
diff --git a/static/usage/avatar/chip/react.md b/static/usage/avatar/chip/react.md
new file mode 100644
index 00000000000..237cbd54d64
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Chip Avatar</IonLabel>
+      </IonChip>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/chip/vue.md b/static/usage/avatar/chip/vue.md
new file mode 100644
index 00000000000..fe07bebe1ad
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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/avatar/item/angular.md b/static/usage/avatar/item/angular.md
new file mode 100644
index 00000000000..20a7db662dc
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
diff --git a/static/usage/avatar/item/demo.html b/static/usage/avatar/item/demo.html
new file mode 100644
index 00000000000..dde84e47480
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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
new file mode 100644
index 00000000000..43630dba17e
--- /dev/null
+++ b/static/usage/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/avatar/item/demo.html" />
diff --git a/static/usage/avatar/item/javascript.md b/static/usage/avatar/item/javascript.md
new file mode 100644
index 00000000000..20a7db662dc
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
diff --git a/static/usage/avatar/item/react.md b/static/usage/avatar/item/react.md
new file mode 100644
index 00000000000..b652100dbeb
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Item Avatar</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/item/vue.md b/static/usage/avatar/item/vue.md
new file mode 100644
index 00000000000..745d67ed32e
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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/avatar/theming/angular/example_component_css.md b/static/usage/avatar/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/avatar/theming/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+  --border-radius: 4px;
+}
+```
diff --git a/static/usage/avatar/theming/angular/example_component_html.md b/static/usage/avatar/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0e544a336b8
--- /dev/null
+++ b/static/usage/avatar/theming/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/demos/api/avatar/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/avatar/theming/demo.html b/static/usage/avatar/theming/demo.html
new file mode 100644
index 00000000000..0d3c4b67ac2
--- /dev/null
+++ b/static/usage/avatar/theming/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/demos/api/avatar/avatar.svg" />
+        </ion-avatar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/avatar/theming/index.md b/static/usage/avatar/theming/index.md
new file mode 100644
index 00000000000..e586aae743b
--- /dev/null
+++ b/static/usage/avatar/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/avatar/theming/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/avatar/theming/javascript.md b/static/usage/avatar/theming/javascript.md
new file mode 100644
index 00000000000..96e64bcf277
--- /dev/null
+++ b/static/usage/avatar/theming/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/demos/api/avatar/avatar.svg" />
+</ion-avatar>
+```
diff --git a/static/usage/avatar/theming/react.md b/static/usage/avatar/theming/react.md
new file mode 100644
index 00000000000..7d0e98290b8
--- /dev/null
+++ b/static/usage/avatar/theming/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonAvatar slot="start">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Item Avatar</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/theming/react/main_css.md b/static/usage/avatar/theming/react/main_css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/avatar/theming/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+  --border-radius: 4px;
+}
+```
diff --git a/static/usage/avatar/theming/react/main_tsx.md b/static/usage/avatar/theming/react/main_tsx.md
new file mode 100644
index 00000000000..4824f336b9c
--- /dev/null
+++ b/static/usage/avatar/theming/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/demos/api/avatar/avatar.svg" />
+      </IonAvatar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/theming/vue.md b/static/usage/avatar/theming/vue.md
new file mode 100644
index 00000000000..235fb00ea0b
--- /dev/null
+++ b/static/usage/avatar/theming/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-avatar>
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/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/chip/slots/angular.md b/static/usage/chip/slots/angular.md
index 6387a0e55ba..3fbc4818f43 100644
--- a/static/usage/chip/slots/angular.md
+++ b/static/usage/chip/slots/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
   <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/demo.html b/static/usage/chip/slots/demo.html
index fd3f22a72df..4888fb8d911 100644
--- a/static/usage/chip/slots/demo.html
+++ b/static/usage/chip/slots/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-chip>
           <ion-avatar>
-            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
           </ion-avatar>
           <ion-label>Avatar Chip</ion-label>
           <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/javascript.md b/static/usage/chip/slots/javascript.md
index 6387a0e55ba..3fbc4818f43 100644
--- a/static/usage/chip/slots/javascript.md
+++ b/static/usage/chip/slots/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
   <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/react.md b/static/usage/chip/slots/react.md
index 25fd0d192b1..7a36f9b68c5 100644
--- a/static/usage/chip/slots/react.md
+++ b/static/usage/chip/slots/react.md
@@ -8,7 +8,7 @@ function Example() {
     <>
       <IonChip>
         <IonAvatar>
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </IonAvatar>
         <IonLabel>Avatar Chip</IonLabel>
         <IonIcon icon={closeCircle}></IonIcon>
diff --git a/static/usage/chip/slots/vue.md b/static/usage/chip/slots/vue.md
index 29e12166788..24ef77077f2 100644
--- a/static/usage/chip/slots/vue.md
+++ b/static/usage/chip/slots/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-chip>
     <ion-avatar>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
     </ion-avatar>
     <ion-label>Avatar Chip</ion-label>
     <ion-icon :icon="closeCircle"></ion-icon>

From 9f35d7834766666e360bd30e88506a7c3d0700bd Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 1 Sep 2022 16:46:08 -0400
Subject: [PATCH 032/469] docs(thumbnail): add component playgrounds and new
 svg (#2525)

---
 docs/api/thumbnail.md                         | 148 ++----------------
 static/demos/api/skeleton-text/thumbnail.svg  |  14 +-
 static/demos/api/thumbnail/thumbnail.svg      |  14 +-
 static/usage/thumbnail/basic/angular.md       |   5 +
 static/usage/thumbnail/basic/demo.html        |  27 ++++
 static/usage/thumbnail/basic/index.md         |   8 +
 static/usage/thumbnail/basic/javascript.md    |   5 +
 static/usage/thumbnail/basic/react.md         |  15 ++
 static/usage/thumbnail/basic/vue.md           |  16 ++
 static/usage/thumbnail/item/angular.md        |   8 +
 static/usage/thumbnail/item/demo.html         |  30 ++++
 static/usage/thumbnail/item/index.md          |   8 +
 static/usage/thumbnail/item/javascript.md     |   8 +
 static/usage/thumbnail/item/react.md          |  18 +++
 static/usage/thumbnail/item/vue.md            |  19 +++
 static/usage/thumbnail/theming/angular.md     |   5 +
 .../theming/angular/example_component_css.md  |   7 +
 .../theming/angular/example_component_html.md |   6 +
 static/usage/thumbnail/theming/demo.html      |  33 ++++
 static/usage/thumbnail/theming/index.md       |  32 ++++
 static/usage/thumbnail/theming/javascript.md  |  12 ++
 .../usage/thumbnail/theming/react/main_css.md |   6 +
 .../usage/thumbnail/theming/react/main_tsx.md |  18 +++
 static/usage/thumbnail/theming/vue.md         |  23 +++
 24 files changed, 345 insertions(+), 140 deletions(-)
 create mode 100644 static/usage/thumbnail/basic/angular.md
 create mode 100644 static/usage/thumbnail/basic/demo.html
 create mode 100644 static/usage/thumbnail/basic/index.md
 create mode 100644 static/usage/thumbnail/basic/javascript.md
 create mode 100644 static/usage/thumbnail/basic/react.md
 create mode 100644 static/usage/thumbnail/basic/vue.md
 create mode 100644 static/usage/thumbnail/item/angular.md
 create mode 100644 static/usage/thumbnail/item/demo.html
 create mode 100644 static/usage/thumbnail/item/index.md
 create mode 100644 static/usage/thumbnail/item/javascript.md
 create mode 100644 static/usage/thumbnail/item/react.md
 create mode 100644 static/usage/thumbnail/item/vue.md
 create mode 100644 static/usage/thumbnail/theming/angular.md
 create mode 100644 static/usage/thumbnail/theming/angular/example_component_css.md
 create mode 100644 static/usage/thumbnail/theming/angular/example_component_html.md
 create mode 100644 static/usage/thumbnail/theming/demo.html
 create mode 100644 static/usage/thumbnail/theming/index.md
 create mode 100644 static/usage/thumbnail/theming/javascript.md
 create mode 100644 static/usage/thumbnail/theming/react/main_css.md
 create mode 100644 static/usage/thumbnail/theming/react/main_tsx.md
 create mode 100644 static/usage/thumbnail/theming/vue.md

diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index 77ef73f041c..21b640a3b54 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-thumbnail"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/thumbnail/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/thumbnail/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 
 import Props from '@site/static/auto-generated/thumbnail/props.md';
 import Events from '@site/static/auto-generated/thumbnail/events.md';
@@ -20,153 +15,30 @@ import Slots from '@site/static/auto-generated/thumbnail/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 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
 
+import Basic from '@site/static/usage/thumbnail/basic/index.md';
 
+<Basic />
 
-## 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-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonThumbnail, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const ThumbnailExample: React.FC = () => (
-  <IonContent>
-    <IonThumbnail>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-    </IonThumbnail>
-
-    <IonItem>
-      <IonThumbnail slot="start">
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-      </IonThumbnail>
-      <IonLabel>Item Thumbnail</IonLabel>
-    </IonItem>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'thumbnail-example',
-  styleUrl: 'thumbnail-example.css'
-})
-export class ThumbnailExample {
-  render() {
-    return [
-      <ion-thumbnail>
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-      </ion-thumbnail>,
-
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-thumbnail>
-        <ion-label>Item Thumbnail</ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-thumbnail>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
+## Item Thumbnails
 
-  <ion-item>
-    <ion-thumbnail slot="start">
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-thumbnail>
-    <ion-label>Item Thumbnail</ion-label>
-  </ion-item>
-</template>
+import Item from '@site/static/usage/thumbnail/item/index.md';
 
-<script>
-import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
-import { defineComponent } from 'vue';
+<Item />
 
-export default defineComponent({
-  components: { IonItem, IonLabel, IonThumbnail }
-});
-</script>
-```
+## Theming
 
-</TabItem>
+import Theming from '@site/static/usage/thumbnail/theming/index.md';
 
-</Tabs>
+<Theming />
 
 ## Properties
 <Props />
@@ -184,4 +56,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/demos/api/skeleton-text/thumbnail.svg b/static/demos/api/skeleton-text/thumbnail.svg
index dafcf4c1751..b12a43f92a9 100644
--- a/static/demos/api/skeleton-text/thumbnail.svg
+++ b/static/demos/api/skeleton-text/thumbnail.svg
@@ -1 +1,13 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve"><style>.st1{fill:#82aeff}</style><path fill="#c5dbff" d="M0 0h512v512H0z"/><path class="st1" d="M256 165.8c-49.9 0-90.3 40.4-90.3 90.3s40.4 90.2 90.3 90.2 90.3-40.4 90.3-90.2c0-49.9-40.4-90.3-90.3-90.3zm0 130.6c-22.3 0-40.4-18.1-40.4-40.4s18.1-40.4 40.4-40.4 40.4 18.1 40.4 40.4-18.1 40.4-40.4 40.4z"/><path class="st1" d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm0 322c-63 0-114-51.1-114-114 0-63 51.1-114 114-114s114 51 114 114-51 114-114 114z"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1766_3886)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M338 195C368.928 195 394 169.928 394 139C394 108.072 368.928 83 338 83C307.072 83 282 108.072 282 139C282 169.928 307.072 195 338 195Z" fill="#C0C8CE"/>
+<path d="M485.5 525L163.495 234.446C156.395 227.347 146.852 223.228 136.816 222.931C126.78 222.633 117.01 226.18 109.502 232.846L-214 525" fill="#B3BAC0"/>
+<path opacity="0.7" d="M120.5 563.5L368.419 312.429C375.361 305.472 384.653 301.363 394.47 300.908C404.288 300.452 413.92 303.684 421.477 309.967L667 514" fill="#B3BAC0"/>
+</g>
+<defs>
+<clipPath id="clip0_1766_3886">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/demos/api/thumbnail/thumbnail.svg b/static/demos/api/thumbnail/thumbnail.svg
index dafcf4c1751..b12a43f92a9 100644
--- a/static/demos/api/thumbnail/thumbnail.svg
+++ b/static/demos/api/thumbnail/thumbnail.svg
@@ -1 +1,13 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve"><style>.st1{fill:#82aeff}</style><path fill="#c5dbff" d="M0 0h512v512H0z"/><path class="st1" d="M256 165.8c-49.9 0-90.3 40.4-90.3 90.3s40.4 90.2 90.3 90.2 90.3-40.4 90.3-90.2c0-49.9-40.4-90.3-90.3-90.3zm0 130.6c-22.3 0-40.4-18.1-40.4-40.4s18.1-40.4 40.4-40.4 40.4 18.1 40.4 40.4-18.1 40.4-40.4 40.4z"/><path class="st1" d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm0 322c-63 0-114-51.1-114-114 0-63 51.1-114 114-114s114 51 114 114-51 114-114 114z"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1766_3886)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M338 195C368.928 195 394 169.928 394 139C394 108.072 368.928 83 338 83C307.072 83 282 108.072 282 139C282 169.928 307.072 195 338 195Z" fill="#C0C8CE"/>
+<path d="M485.5 525L163.495 234.446C156.395 227.347 146.852 223.228 136.816 222.931C126.78 222.633 117.01 226.18 109.502 232.846L-214 525" fill="#B3BAC0"/>
+<path opacity="0.7" d="M120.5 563.5L368.419 312.429C375.361 305.472 384.653 301.363 394.47 300.908C404.288 300.452 413.92 303.684 421.477 309.967L667 514" fill="#B3BAC0"/>
+</g>
+<defs>
+<clipPath id="clip0_1766_3886">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/usage/thumbnail/basic/angular.md b/static/usage/thumbnail/basic/angular.md
new file mode 100644
index 00000000000..6e388336952
--- /dev/null
+++ b/static/usage/thumbnail/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/basic/demo.html b/static/usage/thumbnail/basic/demo.html
new file mode 100644
index 00000000000..d5bdb920fe4
--- /dev/null
+++ b/static/usage/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/demos/api/thumbnail/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
new file mode 100644
index 00000000000..221786ddeee
--- /dev/null
+++ b/static/usage/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/thumbnail/basic/demo.html" />
diff --git a/static/usage/thumbnail/basic/javascript.md b/static/usage/thumbnail/basic/javascript.md
new file mode 100644
index 00000000000..6e388336952
--- /dev/null
+++ b/static/usage/thumbnail/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/basic/react.md b/static/usage/thumbnail/basic/react.md
new file mode 100644
index 00000000000..cfd6d629ee8
--- /dev/null
+++ b/static/usage/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/demos/api/thumbnail/thumbnail.svg" />
+      </IonThumbnail>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/thumbnail/basic/vue.md b/static/usage/thumbnail/basic/vue.md
new file mode 100644
index 00000000000..8ef56dfa2c8
--- /dev/null
+++ b/static/usage/thumbnail/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-thumbnail>
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/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/thumbnail/item/angular.md b/static/usage/thumbnail/item/angular.md
new file mode 100644
index 00000000000..5b724820494
--- /dev/null
+++ b/static/usage/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/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
diff --git a/static/usage/thumbnail/item/demo.html b/static/usage/thumbnail/item/demo.html
new file mode 100644
index 00000000000..db7778adda6
--- /dev/null
+++ b/static/usage/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/demos/api/thumbnail/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
new file mode 100644
index 00000000000..13b7272fa89
--- /dev/null
+++ b/static/usage/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/thumbnail/item/demo.html" />
diff --git a/static/usage/thumbnail/item/javascript.md b/static/usage/thumbnail/item/javascript.md
new file mode 100644
index 00000000000..5b724820494
--- /dev/null
+++ b/static/usage/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/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
diff --git a/static/usage/thumbnail/item/react.md b/static/usage/thumbnail/item/react.md
new file mode 100644
index 00000000000..6d1d3dafea3
--- /dev/null
+++ b/static/usage/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/demos/api/thumbnail/thumbnail.svg" />
+        </IonThumbnail>
+        <IonLabel>Item Thumbnail</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/thumbnail/item/vue.md b/static/usage/thumbnail/item/vue.md
new file mode 100644
index 00000000000..a791dd166f1
--- /dev/null
+++ b/static/usage/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/demos/api/thumbnail/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/thumbnail/theming/angular.md b/static/usage/thumbnail/theming/angular.md
new file mode 100644
index 00000000000..6e388336952
--- /dev/null
+++ b/static/usage/thumbnail/theming/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/theming/angular/example_component_css.md b/static/usage/thumbnail/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..605855deb77
--- /dev/null
+++ b/static/usage/thumbnail/theming/angular/example_component_css.md
@@ -0,0 +1,7 @@
+
+```css
+ion-thumbnail {
+  --size: 140px;
+  --border-radius: 14px;
+}
+```
diff --git a/static/usage/thumbnail/theming/angular/example_component_html.md b/static/usage/thumbnail/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..2e3429d7831
--- /dev/null
+++ b/static/usage/thumbnail/theming/angular/example_component_html.md
@@ -0,0 +1,6 @@
+
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/theming/demo.html b/static/usage/thumbnail/theming/demo.html
new file mode 100644
index 00000000000..37b245dda91
--- /dev/null
+++ b/static/usage/thumbnail/theming/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/demos/api/thumbnail/thumbnail.svg" />
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/thumbnail/theming/index.md b/static/usage/thumbnail/theming/index.md
new file mode 100644
index 00000000000..8be9b0ddccc
--- /dev/null
+++ b/static/usage/thumbnail/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/thumbnail/theming/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/thumbnail/theming/javascript.md b/static/usage/thumbnail/theming/javascript.md
new file mode 100644
index 00000000000..05de3080310
--- /dev/null
+++ b/static/usage/thumbnail/theming/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/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/theming/react/main_css.md b/static/usage/thumbnail/theming/react/main_css.md
new file mode 100644
index 00000000000..74742dfe9f0
--- /dev/null
+++ b/static/usage/thumbnail/theming/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-thumbnail {
+  --size: 140px;
+  --border-radius: 14px;
+}
+```
diff --git a/static/usage/thumbnail/theming/react/main_tsx.md b/static/usage/thumbnail/theming/react/main_tsx.md
new file mode 100644
index 00000000000..c90a1cc2b68
--- /dev/null
+++ b/static/usage/thumbnail/theming/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/demos/api/thumbnail/thumbnail.svg" />
+      </IonThumbnail>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/thumbnail/theming/vue.md b/static/usage/thumbnail/theming/vue.md
new file mode 100644
index 00000000000..e59d386f22a
--- /dev/null
+++ b/static/usage/thumbnail/theming/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/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+</template>
+
+<script lang="ts">
+  import { IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonThumbnail },
+  });
+</script>
+```

From 108db226cd33af3ec29dfdc9b8560fe4f728f533 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 2 Sep 2022 09:37:14 -0500
Subject: [PATCH 033/469] docs(slides): remove ion-slides component (#2518)

---
 docs/angular/slides.md |   8 +-
 docs/api/slide.md      |  60 ----
 docs/api/slides.md     | 744 -----------------------------------------
 docs/components.md     |   4 -
 docs/react/slides.md   |   8 +-
 docs/vue/slides.md     |   8 +-
 sidebars.js            |   6 -
 7 files changed, 18 insertions(+), 820 deletions(-)
 delete mode 100644 docs/api/slide.md
 delete mode 100644 docs/api/slides.md

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index afeda06f317..6f6d7554b31 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -10,9 +10,13 @@ title: Slides
   />
 </head>
 
-We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Angular directly.
+:::caution Looking for `ion-slides`?
 
-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.
+`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
 
diff --git a/docs/api/slide.md b/docs/api/slide.md
deleted file mode 100644
index eccb4af0f7f..00000000000
--- a/docs/api/slide.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: "ion-slide"
-hide_table_of_contents: true
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/slide/props.md';
-import Events from '@site/static/auto-generated/slide/events.md';
-import Methods from '@site/static/auto-generated/slide/methods.md';
-import Parts from '@site/static/auto-generated/slide/parts.md';
-import CustomProps from '@site/static/auto-generated/slide/custom-props.md';
-import Slots from '@site/static/auto-generated/slide/slots.md';
-
-<head>
-  <title>ion-slide | Slide API Component for Ionic Framework Apps</title>
-  <meta name="description" content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides." />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
-The Slide component is a child component of [Slides](slides.md). The template
-should be written as `ion-slide`. Any slide content should be written
-in this component and it should be used in conjunction with [Slides](slides.md).
-
-See the [Slides API Docs](slides.md) for more usage information.
-
-
-
-
-## 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/docs/api/slides.md b/docs/api/slides.md
deleted file mode 100644
index 5aaacdc85a0..00000000000
--- a/docs/api/slides.md
+++ /dev/null
@@ -1,744 +0,0 @@
----
-title: "ion-slides"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/slides/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html"
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/slides/props.md';
-import Events from '@site/static/auto-generated/slides/events.md';
-import Methods from '@site/static/auto-generated/slides/methods.md';
-import Parts from '@site/static/auto-generated/slides/parts.md';
-import CustomProps from '@site/static/auto-generated/slides/custom-props.md';
-import Slots from '@site/static/auto-generated/slides/slots.md';
-
-<head>
-  <title>Ion-Slides: Mobile Touch Slider with Built-In & Custom Animation</title>
-  <meta name="description" content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android." />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
-The Slides component is a multi-section container. Each section can be swiped
-or dragged between. It contains any number of [Slide](slide.md) components.
-
-This guide will cover migration from the deprecated `ion-slides` component to the framework-specific solutions that Swiper.js provides as well as the existing `ion-slides` API for developers who are still using that component.
-
-Adopted from Swiper.js:
-The most modern mobile touch slider and framework with hardware accelerated transitions.
-
-http://www.idangero.us/swiper/
-
-Copyright 2016, Vladimir Kharlampidi
-The iDangero.us
-http://www.idangero.us/
-
-Licensed under MIT
-
-## Migration
-
-With the release of Ionic Framework v6, the Ionic Team has deprecated the `ion-slides` and `ion-slide` components in favor of using the official framework integrations provided by Swiper. Fear not! You will still be able to use slides components in your application. Additionally, because you are still using Swiper, the functionality of your slides component should remain exactly the same.
-
-### What is Swiper.js?
-
-Swiper.js is the carousel/slider library that powers `ion-slides`. The library is bundled automatically with all versions of Ionic Framework. When Ionic Framework v4. was first released, Swiper did not have framework specific integrations of its library, so `ion-slides` was created as a way of bridging the gap between the core Swiper library and frameworks such as Angular, React, and Vue.
-
-Since then, the Swiper team has released framework specific integrations of Swiper.js for Angular, React, Vue, and more!
-
-### What are the benefits of this change?
-
-There are several benefits for members of the Ionic Framework community. By using the official Swiper.js framework integrations:
-
-- Developers can now be in control of the exact version of Swiper.js they want to use. Previously, developers would need to rely on the Ionic Team to update the version internally and release a new version of Ionic Framework.
-- The Ionic Team can spend more time triaging and fixing other non-slides issues, speeding up our development process so we can make the framework work better for our community.
-- Developers should experience fewer bugs.
-- Application bundle sizes can shrink in some cases. By installing Swiper.js as a 3rd party dependency in your application, bundlers such as Webpack or Rollup should be able to treeshake your code better.
-- Developers have access to new features that they previously did not have when using `ion-slides`.
-
-### How long do I have to migrate?
-
-We plan to remove `ion-slides` and `ion-slide` in Ionic Framework v7. `ion-slides` and `ion-slide` will continue to be available for the entire Ionic Framework v6 lifecycle but will only receive critical bug fixes.
-
-### How do I migrate?
-
-Since the underlying technology that powers your slides is the same, the migration process is easy! Follow the guides below for your specific framework.
-
-[Migration for Ionic Angular users](../angular/slides)
-
-[Migration for Ionic React users](../react/slides)
-
-[Migration for Ionic Vue users](../vue/slides)
-
-------
-
-The following documentation applies to the `ion-slides` component.
-
-## Custom Animations
-
-By default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.
-
-
-### Coverflow
-
-```typescript
-const slideOpts = {
-  slidesPerView: 3,
-  coverflowEffect: {
-    rotate: 50,
-    stretch: 0,
-    depth: 100,
-    modifier: 1,
-    slideShadows: true,
-  },
-  on: {
-    beforeInit() {
-      const swiper = this;
-
-      swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
-      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
-
-      swiper.params.watchSlidesProgress = true;
-      swiper.originalParams.watchSlidesProgress = true;
-    },
-    setTranslate() {
-      const swiper = this;
-      const {
-        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $
-      } = swiper;
-      const params = swiper.params.coverflowEffect;
-      const isHorizontal = swiper.isHorizontal();
-      const transform$$1 = swiper.translate;
-      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
-      const rotate = isHorizontal ? params.rotate : -params.rotate;
-      const translate = params.depth;
-      // Each slide offset from center
-      for (let i = 0, length = slides.length; i < length; i += 1) {
-        const $slideEl = slides.eq(i);
-        const slideSize = slidesSizesGrid[i];
-        const slideOffset = $slideEl[0].swiperSlideOffset;
-        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
-
-         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
-        let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
-        // var rotateZ = 0
-        let translateZ = -translate * Math.abs(offsetMultiplier);
-
-         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
-        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
-
-         // Fix for ultra small values
-        if (Math.abs(translateX) < 0.001) translateX = 0;
-        if (Math.abs(translateY) < 0.001) translateY = 0;
-        if (Math.abs(translateZ) < 0.001) translateZ = 0;
-        if (Math.abs(rotateY) < 0.001) rotateY = 0;
-        if (Math.abs(rotateX) < 0.001) rotateX = 0;
-
-         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-
-         $slideEl.transform(slideTransform);
-        $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
-        if (params.slideShadows) {
-          // Set shadows
-          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
-          if ($shadowBeforeEl.length === 0) {
-            $shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
-            $slideEl.append($shadowBeforeEl);
-          }
-          if ($shadowAfterEl.length === 0) {
-            $shadowAfterEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
-            $slideEl.append($shadowAfterEl);
-          }
-          if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
-          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
-        }
-      }
-
-       // Set correct perspective for IE10
-      if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
-        const ws = $wrapperEl[0].style;
-        ws.perspectiveOrigin = `${center}px 50%`;
-      }
-    },
-    setTransition(duration) {
-      const swiper = this;
-      swiper.slides
-        .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
-        .transition(duration);
-    }
-  }
-}
-```
-
-### Cube
-
-```typescript
-const slideOpts = {
-  grabCursor: true,
-  cubeEffect: {
-    shadow: true,
-    slideShadows: true,
-    shadowOffset: 20,
-    shadowScale: 0.94,
-  },
-  on: {
-    beforeInit: function() {
-      const swiper = this;
-      swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
-      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
-
-      const overwriteParams = {
-        slidesPerView: 1,
-        slidesPerColumn: 1,
-        slidesPerGroup: 1,
-        watchSlidesProgress: true,
-        resistanceRatio: 0,
-        spaceBetween: 0,
-        centeredSlides: false,
-        virtualTranslate: true,
-      };
-
-      this.params = Object.assign(this.params, overwriteParams);
-      this.originalParams = Object.assign(this.originalParams, overwriteParams);
-    },
-    setTranslate: function() {
-      const swiper = this;
-      const {
-        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,
-      } = swiper;
-      const params = swiper.params.cubeEffect;
-      const isHorizontal = swiper.isHorizontal();
-      const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
-      let wrapperRotate = 0;
-      let $cubeShadowEl;
-      if (params.shadow) {
-        if (isHorizontal) {
-          $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');
-          if ($cubeShadowEl.length === 0) {
-            $cubeShadowEl = swiper.$('<div class="swiper-cube-shadow"></div>');
-            $wrapperEl.append($cubeShadowEl);
-          }
-          $cubeShadowEl.css({ height: `${swiperWidth}px` });
-        } else {
-          $cubeShadowEl = $el.find('.swiper-cube-shadow');
-          if ($cubeShadowEl.length === 0) {
-            $cubeShadowEl = swiper.$('<div class="swiper-cube-shadow"></div>');
-            $el.append($cubeShadowEl);
-          }
-        }
-      }
-
-      for (let i = 0; i < slides.length; i += 1) {
-        const $slideEl = slides.eq(i);
-        let slideIndex = i;
-        if (isVirtual) {
-          slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);
-        }
-        let slideAngle = slideIndex * 90;
-        let round = Math.floor(slideAngle / 360);
-        if (rtl) {
-          slideAngle = -slideAngle;
-          round = Math.floor(-slideAngle / 360);
-        }
-        const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
-        let tx = 0;
-        let ty = 0;
-        let tz = 0;
-        if (slideIndex % 4 === 0) {
-          tx = -round * 4 * swiperSize;
-          tz = 0;
-        } else if ((slideIndex - 1) % 4 === 0) {
-          tx = 0;
-          tz = -round * 4 * swiperSize;
-        } else if ((slideIndex - 2) % 4 === 0) {
-          tx = swiperSize + (round * 4 * swiperSize);
-          tz = swiperSize;
-        } else if ((slideIndex - 3) % 4 === 0) {
-          tx = -swiperSize;
-          tz = (3 * swiperSize) + (swiperSize * 4 * round);
-        }
-        if (rtl) {
-          tx = -tx;
-        }
-
-         if (!isHorizontal) {
-          ty = tx;
-          tx = 0;
-        }
-
-         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
-        if (progress <= 1 && progress > -1) {
-          wrapperRotate = (slideIndex * 90) + (progress * 90);
-          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);
-        }
-        $slideEl.transform(transform$$1);
-        if (params.slideShadows) {
-          // Set shadows
-          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
-          if (shadowBefore.length === 0) {
-            shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
-            $slideEl.append(shadowBefore);
-          }
-          if (shadowAfter.length === 0) {
-            shadowAfter = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
-            $slideEl.append(shadowAfter);
-          }
-          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
-          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
-        }
-      }
-      $wrapperEl.css({
-        '-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,
-        '-moz-transform-origin': `50% 50% -${swiperSize / 2}px`,
-        '-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,
-        'transform-origin': `50% 50% -${swiperSize / 2}px`,
-      });
-
-       if (params.shadow) {
-        if (isHorizontal) {
-          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
-        } else {
-          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);
-          const multiplier = 1.5 - (
-            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)
-            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)
-          );
-          const scale1 = params.shadowScale;
-          const scale2 = params.shadowScale / multiplier;
-          const offset$$1 = params.shadowOffset;
-          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);
-        }
-      }
-
-      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;
-      $wrapperEl
-        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);
-    },
-    setTransition: function(duration) {
-      const swiper = this;
-      const { $el, slides } = swiper;
-      slides
-        .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
-        .transition(duration);
-      if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
-        $el.find('.swiper-cube-shadow').transition(duration);
-      }
-    },
-  }
-}
-```
-
-### Fade
-
-```typescript
-const slideOpts = {
-  on: {
-    beforeInit() {
-      const swiper = this;
-      swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);
-      const overwriteParams = {
-        slidesPerView: 1,
-        slidesPerColumn: 1,
-        slidesPerGroup: 1,
-        watchSlidesProgress: true,
-        spaceBetween: 0,
-        virtualTranslate: true,
-      };
-      swiper.params = Object.assign(swiper.params, overwriteParams);
-      swiper.params = Object.assign(swiper.originalParams, overwriteParams);
-    },
-    setTranslate() {
-      const swiper = this;
-      const { slides } = swiper;
-      for (let i = 0; i < slides.length; i += 1) {
-        const $slideEl = swiper.slides.eq(i);
-        const offset$$1 = $slideEl[0].swiperSlideOffset;
-        let tx = -offset$$1;
-        if (!swiper.params.virtualTranslate) tx -= swiper.translate;
-        let ty = 0;
-        if (!swiper.isHorizontal()) {
-          ty = tx;
-          tx = 0;
-        }
-        const slideOpacity = swiper.params.fadeEffect.crossFade
-          ? Math.max(1 - Math.abs($slideEl[0].progress), 0)
-          : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);
-        $slideEl
-          .css({
-            opacity: slideOpacity,
-          })
-          .transform(`translate3d(${tx}px, ${ty}px, 0px)`);
-      }
-    },
-    setTransition(duration) {
-      const swiper = this;
-      const { slides, $wrapperEl } = swiper;
-      slides.transition(duration);
-      if (swiper.params.virtualTranslate && duration !== 0) {
-        let eventTriggered = false;
-        slides.transitionEnd(() => {
-          if (eventTriggered) return;
-          if (!swiper || swiper.destroyed) return;
-          eventTriggered = true;
-          swiper.animating = false;
-          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
-          for (let i = 0; i < triggerEvents.length; i += 1) {
-            $wrapperEl.trigger(triggerEvents[i]);
-          }
-        });
-      }
-    },
-  }
-}
-```
-
-### Flip
-
-```typescript
-const slideOpts = {
-  on: {
-    beforeInit() {
-      const swiper = this;
-      swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);
-      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
-      const overwriteParams = {
-        slidesPerView: 1,
-        slidesPerColumn: 1,
-        slidesPerGroup: 1,
-        watchSlidesProgress: true,
-        spaceBetween: 0,
-        virtualTranslate: true,
-      };
-      swiper.params = Object.assign(swiper.params, overwriteParams);
-      swiper.originalParams = Object.assign(swiper.originalParams, overwriteParams);
-    },
-    setTranslate() {
-      const swiper = this;
-      const { $, slides, rtlTranslate: rtl } = swiper;
-      for (let i = 0; i < slides.length; i += 1) {
-        const $slideEl = slides.eq(i);
-        let progress = $slideEl[0].progress;
-        if (swiper.params.flipEffect.limitRotation) {
-          progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
-        }
-        const offset$$1 = $slideEl[0].swiperSlideOffset;
-        const rotate = -180 * progress;
-        let rotateY = rotate;
-        let rotateX = 0;
-        let tx = -offset$$1;
-        let ty = 0;
-        if (!swiper.isHorizontal()) {
-          ty = tx;
-          tx = 0;
-          rotateX = -rotateY;
-          rotateY = 0;
-        } else if (rtl) {
-          rotateY = -rotateY;
-        }
-
-         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
-
-         if (swiper.params.flipEffect.slideShadows) {
-          // Set shadows
-          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
-          if (shadowBefore.length === 0) {
-            shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`);
-            $slideEl.append(shadowBefore);
-          }
-          if (shadowAfter.length === 0) {
-            shadowAfter = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`);
-            $slideEl.append(shadowAfter);
-          }
-          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
-          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
-        }
-        $slideEl
-          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
-      }
-    },
-    setTransition(duration) {
-      const swiper = this;
-      const { slides, activeIndex, $wrapperEl } = swiper;
-      slides
-        .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
-        .transition(duration);
-      if (swiper.params.virtualTranslate && duration !== 0) {
-        let eventTriggered = false;
-        // eslint-disable-next-line
-        slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {
-          if (eventTriggered) return;
-          if (!swiper || swiper.destroyed) return;
-
-          eventTriggered = true;
-          swiper.animating = false;
-          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
-          for (let i = 0; i < triggerEvents.length; i += 1) {
-            $wrapperEl.trigger(triggerEvents[i]);
-          }
-        });
-      }
-    }
-  }
-};
-```
-
-
-
-## 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">
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'slides-example',
-  template: `
-    <ion-content>
-      <ion-slides pager="true" [options]="slideOpts">
-        <ion-slide>
-          <h1>Slide 1</h1>
-        </ion-slide>
-        <ion-slide>
-          <h1>Slide 2</h1>
-        </ion-slide>
-        <ion-slide>
-          <h1>Slide 3</h1>
-        </ion-slide>
-      </ion-slides>
-    </ion-content>
-  `
-})
-export class SlideExample {
-  // Optional parameters to pass to the swiper instance.
-  // See https://swiperjs.com/swiper-api for valid options.
-  slideOpts = {
-    initialSlide: 1,
-    speed: 400
-  };
-  constructor() {}
-}
-```
-
-```css
-/* Without setting height the slides will take up the height of the slide's content */
-ion-slides {
-  height: 100%;
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-content>
-  <ion-slides pager="true">
-    <ion-slide>
-      <h1>Slide 1</h1>
-    </ion-slide>
-
-    <ion-slide>
-      <h1>Slide 2</h1>
-    </ion-slide>
-
-    <ion-slide>
-      <h1>Slide 3</h1>
-    </ion-slide>
-  </ion-slides>
-</ion-content>
-```
-
-```javascript
-var slides = document.querySelector('ion-slides');
-
-// Optional parameters to pass to the swiper instance.
-// See https://swiperjs.com/swiper-api for valid options.
-slides.options = {
-  initialSlide: 1,
-  speed: 400
-}
-```
-
-```css
-/* Without setting height the slides will take up the height of the slide's content */
-ion-slides {
-  height: 100%;
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonSlides, IonSlide, IonContent } from '@ionic/react';
-
-// Optional parameters to pass to the swiper instance.
-// See https://swiperjs.com/swiper-api for valid options.
-const slideOpts = {
-  initialSlide: 1,
-  speed: 400
-};
-
-export const SlidesExample: React.FC = () => (
-  <IonContent>
-    <IonSlides pager={true} options={slideOpts}>
-      <IonSlide>
-        <h1>Slide 1</h1>
-      </IonSlide>
-      <IonSlide>
-        <h1>Slide 2</h1>
-      </IonSlide>
-      <IonSlide>
-        <h1>Slide 3</h1>
-      </IonSlide>
-    </IonSlides>
-  </IonContent>
-);
-```
-
-```css
-/* Without setting height the slides will take up the height of the slide's content */
-ion-slides {
-  height: 100%;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'slides-example',
-  styleUrl: 'slides-example.css'
-})
-export class SlidesExample {
-  // Optional parameters to pass to the swiper instance.
-  // See https://swiperjs.com/swiper-api for valid options.
-  private slideOpts = {
-    initialSlide: 1,
-    speed: 400
-  };
-
-  render() {
-    return [
-      <ion-content>
-        <ion-slides pager={true} options={this.slideOpts}>
-          <ion-slide>
-            <h1>Slide 1</h1>
-          </ion-slide>
-
-          <ion-slide>
-            <h1>Slide 2</h1>
-          </ion-slide>
-
-          <ion-slide>
-            <h1>Slide 3</h1>
-          </ion-slide>
-        </ion-slides>
-      </ion-content>
-    ];
-  }
-}
-```
-
-```css
-/* Without setting height the slides will take up the height of the slide's content */
-ion-slides {
-  height: 100%;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-slides pager="true" :options="slideOpts">
-    <ion-slide>
-      <h1>Slide 1</h1>
-    </ion-slide>
-    <ion-slide>
-      <h1>Slide 2</h1>
-    </ion-slide>
-    <ion-slide>
-      <h1>Slide 3</h1>
-    </ion-slide>
-  </ion-slides>
-</template>
-
-
-<script>
-import { IonSlides, IonSlide } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonSlides, IonSlide },
-  setup() {
-    // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
-    const slideOpts = {
-      initialSlide: 1,
-      speed: 400
-    };
-    return { slideOpts }
-  }
-});
-</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/docs/components.md b/docs/components.md
index 2ae43fcf4fd..4e6a648d899 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -138,10 +138,6 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Select is similar to the native HTML select, with a few improvements to sorting and selecting.</p>
 </DocsCard>
 
-<DocsCard header="Slides" href="api/slides" icon="/icons/component-slides-icon.png">
-  <p>Slides make it easy to create complex UI such as galleries, tutorials, and page-based layouts.</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>
diff --git a/docs/react/slides.md b/docs/react/slides.md
index 2aef5f907d8..a04d37459c8 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -10,9 +10,13 @@ title: Slides
   />
 </head>
 
-We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `IonSlides` component, but we now recommend that developers use Swiper for React directly.
+:::caution Looking for `IonSlides`?
 
-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.
+`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
 
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 2de45434dd9..7a8bc1a289c 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -10,9 +10,13 @@ title: Slides
   />
 </head>
 
-We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Vue directly.
+:::caution Looking for `ion-slides`?
 
-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.
+`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
 
diff --git a/sidebars.js b/sidebars.js
index 37be85167db..9057baeddda 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -439,12 +439,6 @@ module.exports = {
       collapsed: false,
       items: ['api/select', 'api/select-option'],
     },
-    {
-      type: 'category',
-      label: 'Slides',
-      collapsed: false,
-      items: ['api/slides', 'api/slide'],
-    },
     {
       type: 'category',
       label: 'Tabs',

From bf5cd92999fea6f99effbd93842db9fe6cb30746 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 2 Sep 2022 11:15:17 -0500
Subject: [PATCH 034/469] docs(toast): add playgrounds (#2516)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/api/toast.md                             | 466 ++++--------------
 static/code/stackblitz/html/index.ts          |   3 +-
 .../toast/buttons/angular/angular_html.md     |   5 +
 .../usage/toast/buttons/angular/angular_ts.md |  39 ++
 static/usage/toast/buttons/demo.html          |  75 +++
 static/usage/toast/buttons/index.md           |  24 +
 static/usage/toast/buttons/javascript.md      |  34 ++
 static/usage/toast/buttons/react.md           |  41 ++
 static/usage/toast/buttons/vue.md             |  46 ++
 .../usage/toast/icon/angular/angular_html.md  |   3 +
 static/usage/toast/icon/angular/angular_ts.md |  22 +
 static/usage/toast/icon/demo.html             |  46 ++
 static/usage/toast/icon/index.md              |  24 +
 static/usage/toast/icon/javascript.md         |  15 +
 static/usage/toast/icon/react.md              |  24 +
 static/usage/toast/icon/vue.md                |  28 ++
 .../controller/angular/angular_html.md        |   5 +
 .../controller/angular/angular_ts.md          |  22 +
 .../toast/presenting/controller/demo.html     |  54 ++
 .../toast/presenting/controller/index.md      |  24 +
 .../toast/presenting/controller/javascript.md |  17 +
 .../toast/presenting/controller/react.md      |  25 +
 .../usage/toast/presenting/controller/vue.md  |  26 +
 .../toast/theming/angular/angular_css.md      |  17 +
 .../toast/theming/angular/angular_html.md     |   3 +
 .../usage/toast/theming/angular/angular_ts.md |  28 ++
 static/usage/toast/theming/demo.html          |  70 +++
 static/usage/toast/theming/index.md           |  33 ++
 static/usage/toast/theming/javascript.md      |  39 ++
 static/usage/toast/theming/react/react_css.md |  17 +
 static/usage/toast/theming/react/react_ts.md  |  31 ++
 static/usage/toast/theming/vue.md             |  48 ++
 32 files changed, 971 insertions(+), 383 deletions(-)
 create mode 100644 static/usage/toast/buttons/angular/angular_html.md
 create mode 100644 static/usage/toast/buttons/angular/angular_ts.md
 create mode 100644 static/usage/toast/buttons/demo.html
 create mode 100644 static/usage/toast/buttons/index.md
 create mode 100644 static/usage/toast/buttons/javascript.md
 create mode 100644 static/usage/toast/buttons/react.md
 create mode 100644 static/usage/toast/buttons/vue.md
 create mode 100644 static/usage/toast/icon/angular/angular_html.md
 create mode 100644 static/usage/toast/icon/angular/angular_ts.md
 create mode 100644 static/usage/toast/icon/demo.html
 create mode 100644 static/usage/toast/icon/index.md
 create mode 100644 static/usage/toast/icon/javascript.md
 create mode 100644 static/usage/toast/icon/react.md
 create mode 100644 static/usage/toast/icon/vue.md
 create mode 100644 static/usage/toast/presenting/controller/angular/angular_html.md
 create mode 100644 static/usage/toast/presenting/controller/angular/angular_ts.md
 create mode 100644 static/usage/toast/presenting/controller/demo.html
 create mode 100644 static/usage/toast/presenting/controller/index.md
 create mode 100644 static/usage/toast/presenting/controller/javascript.md
 create mode 100644 static/usage/toast/presenting/controller/react.md
 create mode 100644 static/usage/toast/presenting/controller/vue.md
 create mode 100644 static/usage/toast/theming/angular/angular_css.md
 create mode 100644 static/usage/toast/theming/angular/angular_html.md
 create mode 100644 static/usage/toast/theming/angular/angular_ts.md
 create mode 100644 static/usage/toast/theming/demo.html
 create mode 100644 static/usage/toast/theming/index.md
 create mode 100644 static/usage/toast/theming/javascript.md
 create mode 100644 static/usage/toast/theming/react/react_css.md
 create mode 100644 static/usage/toast/theming/react/react_ts.md
 create mode 100644 static/usage/toast/theming/vue.md

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 4de48c86620..765f44664c0 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -1,8 +1,5 @@
 ---
 title: "ion-toast"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/toast/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/toast/index.html"
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -20,34 +17,108 @@ import Slots from '@site/static/auto-generated/toast/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
+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.
 
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
+## 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.
 
-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.
+### Controller
 
-## Positioning
+import ControllerExample from '@site/static/usage/toast/presenting/controller/index.md';
 
-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.
+<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/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/toast/icon/index.md';
+
+<IconPlayground />
+
+## Theming
+
+import ThemingPlayground from '@site/static/usage/toast/theming/index.md';
+
+<ThemingPlayground />
+
 ## Interfaces
 
 ### ToastButton
@@ -112,375 +183,6 @@ While this is not a complete list, here are some guidelines to follow when using
 
 * For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
 
-
-
-## 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">
-
-```typescript
-import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
-
-@Component({
-  selector: 'toast-example',
-  templateUrl: 'toast-example.html',
-  styleUrls: ['./toast-example.css'],
-})
-export class ToastExample {
-
-  constructor(public toastController: ToastController) {}
-
-  async presentToast() {
-    const toast = await this.toastController.create({
-      message: 'Your settings have been saved.',
-      duration: 2000
-    });
-    toast.present();
-  }
-
-  async presentToastWithOptions() {
-    const toast = await this.toastController.create({
-      header: 'Toast header',
-      message: 'Click to Close',
-      icon: 'information-circle',
-      position: 'top',
-      buttons: [
-        {
-          side: 'start',
-          icon: 'star',
-          text: 'Favorite',
-          handler: () => {
-            console.log('Favorite clicked');
-          }
-        }, {
-          text: 'Done',
-          role: 'cancel',
-          handler: () => {
-            console.log('Cancel clicked');
-          }
-        }
-      ]
-    });
-    await toast.present();
-
-    const { role } = await toast.onDidDismiss();
-    console.log('onDidDismiss resolved with role', role);
-  }
-
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```javascript
-async function presentToast() {
-  const toast = document.createElement('ion-toast');
-  toast.message = 'Your settings have been saved.';
-  toast.duration = 2000;
-
-  document.body.appendChild(toast);
-  return toast.present();
-}
-
-async function presentToastWithOptions() {
-  const toast = document.createElement('ion-toast');
-  toast.header = 'Toast header';
-  toast.message = 'Click to Close';
-  toast.icon = 'information-circle',
-  toast.position = 'top';
-  toast.buttons = [
-    {
-      side: 'start',
-      icon: 'star',
-      text: 'Favorite',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Done',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }
-  ];
-
-  document.body.appendChild(toast);
-  await toast.present();
-
-  const { role } = await toast.onDidDismiss();
-  console.log('onDidDismiss resolved with role', role);
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-/* Using the useIonToast Hook */
-
-import React from 'react';
-import { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react';
-
-const ToastExample: React.FC = () => {
-  const [present, dismiss] = useIonToast();
-
-  return (
-    <IonPage>
-      <IonContent>
-        <IonButton
-          expand="block"
-          onClick={() =>
-            present({
-              buttons: [{ text: 'hide', handler: () => dismiss() }],
-              message: 'toast from hook, click hide to dismiss',
-              onDidDismiss: () => console.log('dismissed'),
-              onWillDismiss: () => console.log('will dismiss'),
-            })
-          }
-        >
-          Show Toast
-        </IonButton>
-        <IonButton
-          expand="block"
-          onClick={() => present('hello from hook', 3000)}
-        >
-          Show Toast using params, closes in 3 secs
-        </IonButton>
-        <IonButton expand="block" onClick={dismiss}>
-          Hide Toast
-        </IonButton>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-```tsx
-/* Using the IonToast Component */
-
-import React, { useState } from 'react';
-import { IonToast, IonContent, IonButton } from '@ionic/react';
-import { informationCircle, star } from 'ionicons/icons';
-
-export const ToastExample: React.FC = () => {
-  const [showToast1, setShowToast1] = useState(false);
-  const [showToast2, setShowToast2] = useState(false);
-
-  return (
-    <IonContent>
-      <IonButton onClick={() => setShowToast1(true)} expand="block">Show Toast 1</IonButton>
-      <IonButton onClick={() => setShowToast2(true)} expand="block">Show Toast 2</IonButton>
-      <IonToast
-        isOpen={showToast1}
-        onDidDismiss={() => setShowToast1(false)}
-        message="Your settings have been saved."
-        duration={200}
-      />
-
-      <IonToast
-        isOpen={showToast2}
-        onDidDismiss={() => setShowToast2(false)}
-        message="Click to Close"
-        icon={informationCircle}
-        position="top"
-        buttons={[
-          {
-            side: 'start',
-            icon: star,
-            text: 'Favorite',
-            handler: () => {
-              console.log('Favorite clicked');
-            }
-          },
-          {
-            text: 'Done',
-            role: 'cancel',
-            handler: () => {
-              console.log('Cancel clicked');
-            }
-          }
-        ]}
-      />
-    </IonContent>
-  );
-};
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-import { toastController } from '@ionic/core';
-
-@Component({
-  tag: 'toast-example',
-  styleUrl: 'toast-example.css'
-})
-export class ToastExample {
-  async presentToast() {
-    const toast = await toastController.create({
-      message: 'Your settings have been saved.',
-      duration: 2000
-    });
-    toast.present();
-  }
-
-  async presentToastWithOptions() {
-    const toast = await toastController.create({
-      header: 'Toast header',
-      message: 'Click to Close',
-      icon: 'information-circle',
-      position: 'top',
-      buttons: [
-        {
-          side: 'start',
-          icon: 'star',
-          text: 'Favorite',
-          handler: () => {
-            console.log('Favorite clicked');
-          }
-        }, {
-          text: 'Done',
-          role: 'cancel',
-          handler: () => {
-            console.log('Cancel clicked');
-          }
-        }
-      ]
-    });
-    await toast.present();
-
-    const { role } = await toast.onDidDismiss();
-    console.log('onDidDismiss resolved with role', role);
-  }
-
-  render() {
-    return [
-      <ion-content>
-        <ion-button onClick={() => this.presentToast()}>Present Toast</ion-button>
-        <ion-button onClick={() => this.presentToastWithOptions()}>Present Toast: Options</ion-button>
-      </ion-content>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-page>
-    <ion-content class="ion-padding">
-      <ion-button @click="openToast">Open Toast</ion-button>
-      <ion-button @click="openToastOptions">Open Toast: Options</ion-button>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script>
-import { IonButton, IonContent, IonPage, toastController } from '@ionic/vue';
-import { informationCircle } from 'ionicons/icons';
-
-export default {
-  components: { IonButton, IonContent, IonPage },
-  methods: {
-    async openToast() {
-      const toast = await toastController
-        .create({
-          message: 'Your settings have been saved.',
-          duration: 2000
-        })
-      return toast.present();
-    },
-    async openToastOptions() {
-      const toast = await toastController
-        .create({
-          header: 'Toast header',
-          message: 'Click to Close',
-          icon: informationCircle,
-          position: 'top',
-          buttons: [
-            {
-              side: 'start',
-              icon: 'star',
-              text: 'Favorite',
-              handler: () => {
-                console.log('Favorite clicked');
-              }
-            }, {
-              text: 'Done',
-              role: 'cancel',
-              handler: () => {
-                console.log('Cancel clicked');
-              }
-            }
-          ]
-        })
-      await toast.present();
-
-      const { role } = await toast.onDidDismiss();
-      console.log('onDidDismiss resolved with role', role);
-    },
-  },
-}
-</script>
-```
-
-Developers can also use this component directly in their template:
-
-```html
-<template>
-  <ion-button @click="setOpen(true)">Show Toast</ion-button>
-  <ion-toast
-    :is-open="isOpenRef"
-    message="Your settings have been saved."
-    :duration="2000"
-    @didDismiss="setOpen(false)"
-  >
-  </ion-toast>
-</template>
-
-<script>
-import { IonToast, IonButton } from '@ionic/vue';
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  components: { IonToast, IonButton },
-  setup() {
-    const isOpenRef = ref(false);
-    const setOpen = (state: boolean) => isOpenRef.value = state;
-
-    return { isOpenRef, setOpen }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
diff --git a/static/code/stackblitz/html/index.ts b/static/code/stackblitz/html/index.ts
index 11b30d3e5c8..ffaf975593a 100644
--- a/static/code/stackblitz/html/index.ts
+++ b/static/code/stackblitz/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { loadingController, modalController, pickerController } from '@ionic/core';
+import { loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -22,3 +22,4 @@ 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/usage/toast/buttons/angular/angular_html.md b/static/usage/toast/buttons/angular/angular_html.md
new file mode 100644
index 00000000000..5d457cdbf2f
--- /dev/null
+++ b/static/usage/toast/buttons/angular/angular_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/toast/buttons/angular/angular_ts.md b/static/usage/toast/buttons/angular/angular_ts.md
new file mode 100644
index 00000000000..54dc88ac35c
--- /dev/null
+++ b/static/usage/toast/buttons/angular/angular_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/toast/buttons/demo.html b/static/usage/toast/buttons/demo.html
new file mode 100644
index 00000000000..7f2807781e4
--- /dev/null
+++ b/static/usage/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/toast/buttons/index.md b/static/usage/toast/buttons/index.md
new file mode 100644
index 00000000000..4098f2f915e
--- /dev/null
+++ b/static/usage/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 angularHTML from './angular/angular_html.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/toast/buttons/demo.html"
+/>
diff --git a/static/usage/toast/buttons/javascript.md b/static/usage/toast/buttons/javascript.md
new file mode 100644
index 00000000000..c5cea896bb3
--- /dev/null
+++ b/static/usage/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/toast/buttons/react.md b/static/usage/toast/buttons/react.md
new file mode 100644
index 00000000000..ac08a9b543b
--- /dev/null
+++ b/static/usage/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/toast/buttons/vue.md b/static/usage/toast/buttons/vue.md
new file mode 100644
index 00000000000..ec7da81c54c
--- /dev/null
+++ b/static/usage/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/toast/icon/angular/angular_html.md b/static/usage/toast/icon/angular/angular_html.md
new file mode 100644
index 00000000000..976194efc1e
--- /dev/null
+++ b/static/usage/toast/icon/angular/angular_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/toast/icon/angular/angular_ts.md b/static/usage/toast/icon/angular/angular_ts.md
new file mode 100644
index 00000000000..addffa2daf9
--- /dev/null
+++ b/static/usage/toast/icon/angular/angular_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/toast/icon/demo.html b/static/usage/toast/icon/demo.html
new file mode 100644
index 00000000000..d457f5e2d8e
--- /dev/null
+++ b/static/usage/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/toast/icon/index.md b/static/usage/toast/icon/index.md
new file mode 100644
index 00000000000..f575f525540
--- /dev/null
+++ b/static/usage/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 angularHTML from './angular/angular_html.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/toast/icon/demo.html"
+/>
diff --git a/static/usage/toast/icon/javascript.md b/static/usage/toast/icon/javascript.md
new file mode 100644
index 00000000000..b63e8550ab3
--- /dev/null
+++ b/static/usage/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/toast/icon/react.md b/static/usage/toast/icon/react.md
new file mode 100644
index 00000000000..25d758c16b6
--- /dev/null
+++ b/static/usage/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/toast/icon/vue.md b/static/usage/toast/icon/vue.md
new file mode 100644
index 00000000000..d3a123f598b
--- /dev/null
+++ b/static/usage/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/toast/presenting/controller/angular/angular_html.md b/static/usage/toast/presenting/controller/angular/angular_html.md
new file mode 100644
index 00000000000..962fcd0e355
--- /dev/null
+++ b/static/usage/toast/presenting/controller/angular/angular_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/toast/presenting/controller/angular/angular_ts.md b/static/usage/toast/presenting/controller/angular/angular_ts.md
new file mode 100644
index 00000000000..c772728c3c1
--- /dev/null
+++ b/static/usage/toast/presenting/controller/angular/angular_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/toast/presenting/controller/demo.html b/static/usage/toast/presenting/controller/demo.html
new file mode 100644
index 00000000000..bcf30161ab6
--- /dev/null
+++ b/static/usage/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/toast/presenting/controller/index.md b/static/usage/toast/presenting/controller/index.md
new file mode 100644
index 00000000000..ea63d7f9f42
--- /dev/null
+++ b/static/usage/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 angularHTML from './angular/angular_html.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/toast/presenting/controller/demo.html"
+/>
diff --git a/static/usage/toast/presenting/controller/javascript.md b/static/usage/toast/presenting/controller/javascript.md
new file mode 100644
index 00000000000..5260ba8d1a1
--- /dev/null
+++ b/static/usage/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/toast/presenting/controller/react.md b/static/usage/toast/presenting/controller/react.md
new file mode 100644
index 00000000000..1dd38b3cd48
--- /dev/null
+++ b/static/usage/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/toast/presenting/controller/vue.md b/static/usage/toast/presenting/controller/vue.md
new file mode 100644
index 00000000000..ac520d0e7b9
--- /dev/null
+++ b/static/usage/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/toast/theming/angular/angular_css.md b/static/usage/toast/theming/angular/angular_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/toast/theming/angular/angular_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/toast/theming/angular/angular_html.md b/static/usage/toast/theming/angular/angular_html.md
new file mode 100644
index 00000000000..91e6579dfa8
--- /dev/null
+++ b/static/usage/toast/theming/angular/angular_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+```
diff --git a/static/usage/toast/theming/angular/angular_ts.md b/static/usage/toast/theming/angular/angular_ts.md
new file mode 100644
index 00000000000..62c8151b0f4
--- /dev/null
+++ b/static/usage/toast/theming/angular/angular_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/toast/theming/demo.html b/static/usage/toast/theming/demo.html
new file mode 100644
index 00000000000..756f6ed32c1
--- /dev/null
+++ b/static/usage/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/toast/theming/index.md b/static/usage/toast/theming/index.md
new file mode 100644
index 00000000000..62c2366dac3
--- /dev/null
+++ b/static/usage/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 reactTS from './react/react_ts.md';
+import reactCSS from './react/react_css.md';
+
+import angularHTML from './angular/angular_html.md';
+import angularCSS from './angular/angular_css.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTS,
+        'src/main.css': reactCSS,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+        'src/global.css': angularCSS
+      }
+    }
+  }}
+  src="usage/toast/theming/demo.html"
+/>
diff --git a/static/usage/toast/theming/javascript.md b/static/usage/toast/theming/javascript.md
new file mode 100644
index 00000000000..b540eccaaf7
--- /dev/null
+++ b/static/usage/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/toast/theming/react/react_css.md b/static/usage/toast/theming/react/react_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/toast/theming/react/react_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/toast/theming/react/react_ts.md b/static/usage/toast/theming/react/react_ts.md
new file mode 100644
index 00000000000..fe88e64e8c7
--- /dev/null
+++ b/static/usage/toast/theming/react/react_ts.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/toast/theming/vue.md b/static/usage/toast/theming/vue.md
new file mode 100644
index 00000000000..99bcbb7cf18
--- /dev/null
+++ b/static/usage/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>
+```

From 1c8c3beb2a2ba99c0490f577a66770d051ce9466 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 2 Sep 2022 16:48:06 -0500
Subject: [PATCH 035/469] docs(checkbox): add playgrounds for checkbox
 component (#2529)

---
 docs/api/checkbox.md                          | 293 +-----------------
 src/components/global/Playground/index.tsx    |   2 +-
 static/usage/checkbox/basic/angular.md        |   6 +
 static/usage/checkbox/basic/demo.html         |  24 ++
 static/usage/checkbox/basic/index.md          |  16 +
 static/usage/checkbox/basic/javascript.md     |   6 +
 static/usage/checkbox/basic/react.md          |  18 ++
 static/usage/checkbox/basic/vue.md            |  25 ++
 .../usage/checkbox/indeterminate/angular.md   |   6 +
 static/usage/checkbox/indeterminate/demo.html |  24 ++
 static/usage/checkbox/indeterminate/index.md  |  16 +
 .../checkbox/indeterminate/javascript.md      |   6 +
 static/usage/checkbox/indeterminate/react.md  |  18 ++
 static/usage/checkbox/indeterminate/vue.md    |  25 ++
 .../theming/angular/example_component_css.md  |  11 +
 .../theming/angular/example_component_html.md |   6 +
 static/usage/checkbox/theming/demo.html       |  35 +++
 static/usage/checkbox/theming/index.md        |  31 ++
 static/usage/checkbox/theming/javascript.md   |  18 ++
 .../usage/checkbox/theming/react/main_css.md  |  11 +
 .../usage/checkbox/theming/react/main_tsx.md  |  20 ++
 static/usage/checkbox/theming/vue.md          |  37 +++
 22 files changed, 377 insertions(+), 277 deletions(-)
 create mode 100644 static/usage/checkbox/basic/angular.md
 create mode 100644 static/usage/checkbox/basic/demo.html
 create mode 100644 static/usage/checkbox/basic/index.md
 create mode 100644 static/usage/checkbox/basic/javascript.md
 create mode 100644 static/usage/checkbox/basic/react.md
 create mode 100644 static/usage/checkbox/basic/vue.md
 create mode 100644 static/usage/checkbox/indeterminate/angular.md
 create mode 100644 static/usage/checkbox/indeterminate/demo.html
 create mode 100644 static/usage/checkbox/indeterminate/index.md
 create mode 100644 static/usage/checkbox/indeterminate/javascript.md
 create mode 100644 static/usage/checkbox/indeterminate/react.md
 create mode 100644 static/usage/checkbox/indeterminate/vue.md
 create mode 100644 static/usage/checkbox/theming/angular/example_component_css.md
 create mode 100644 static/usage/checkbox/theming/angular/example_component_html.md
 create mode 100644 static/usage/checkbox/theming/demo.html
 create mode 100644 static/usage/checkbox/theming/index.md
 create mode 100644 static/usage/checkbox/theming/javascript.md
 create mode 100644 static/usage/checkbox/theming/react/main_css.md
 create mode 100644 static/usage/checkbox/theming/react/main_tsx.md
 create mode 100644 static/usage/checkbox/theming/vue.md

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 93e5fedeeed..490a0606d49 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-checkbox"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/checkbox/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/checkbox/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 
 import Props from '@site/static/auto-generated/checkbox/props.md';
 import Events from '@site/static/auto-generated/checkbox/events.md';
@@ -24,17 +19,26 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
+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
 
+import Basic from '@site/static/usage/checkbox/basic/index.md';
 
-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 />
+
+## Indeterminate Checkboxes
+
+import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
+
+<Indeterminate />
+
+## Theming
+
+import Theming from '@site/static/usage/checkbox/theming/index.md';
+
+<Theming />
 
 ## Interfaces
 
@@ -61,269 +65,6 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {
 
 
 
-## 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 Checkbox -->
-<ion-checkbox></ion-checkbox>
-
-<!-- Disabled Checkbox -->
-<ion-checkbox disabled="true"></ion-checkbox>
-
-<!-- Checked Checkbox -->
-<ion-checkbox checked="true"></ion-checkbox>
-
-<!-- Checkbox Colors -->
-<ion-checkbox color="primary"></ion-checkbox>
-<ion-checkbox color="secondary"></ion-checkbox>
-<ion-checkbox color="danger"></ion-checkbox>
-<ion-checkbox color="light"></ion-checkbox>
-<ion-checkbox color="dark"></ion-checkbox>
-
-<!-- Checkboxes in a List -->
-<ion-list>
-  <ion-item *ngFor="let entry of form">
-    <ion-label>{{entry.val}}</ion-label>
-    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
-  </ion-item>
-</ion-list>
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss']
-})
-export class HomePage {
-  public form = [
-      { val: 'Pepperoni', isChecked: true },
-      { val: 'Sausage', isChecked: false },
-      { val: 'Mushroom', isChecked: false }
-    ];
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Checkbox -->
-<ion-checkbox></ion-checkbox>
-
-<!-- Disabled Checkbox -->
-<ion-checkbox disabled></ion-checkbox>
-
-<!-- Checked Checkbox -->
-<ion-checkbox checked></ion-checkbox>
-
-<!-- Checkbox Colors -->
-<ion-checkbox color="primary"></ion-checkbox>
-<ion-checkbox color="secondary"></ion-checkbox>
-<ion-checkbox color="danger"></ion-checkbox>
-<ion-checkbox color="light"></ion-checkbox>
-<ion-checkbox color="dark"></ion-checkbox>
-
-<!-- Checkboxes in a List -->
-<ion-list>
-  <ion-item>
-    <ion-label>Pepperoni</ion-label>
-    <ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Sausage</ion-label>
-    <ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Mushrooms</ion-label>
-    <ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
-
-const checkboxList = [
-  { val: 'Pepperoni', isChecked: true },
-  { val: 'Sausage', isChecked: false },
-  { val: 'Mushroom', isChecked: false }
-];
-
-export const CheckboxExamples: React.FC = () => {
-
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>CheckboxExamples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItemDivider>Default Checkbox</IonItemDivider>
-          <IonItem>
-            <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
-            <IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
-          </IonItem>
-
-          <IonItemDivider>Disabled Checkbox</IonItemDivider>
-          <IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
-
-          <IonItemDivider>Checkbox Colors</IonItemDivider>
-          <IonItem>
-            <IonCheckbox slot="end" color="primary" />
-            <IonCheckbox slot="end" color="secondary" />
-            <IonCheckbox slot="end" color="danger" />
-            <IonCheckbox slot="end" color="light" />
-            <IonCheckbox slot="end" color="dark" />
-          </IonItem>
-          <IonItemDivider>Checkboxes in a List</IonItemDivider>
-
-          {checkboxList.map(({ val, isChecked }, i) => (
-            <IonItem key={i}>
-              <IonLabel>{val}</IonLabel>
-              <IonCheckbox slot="end" value={val} checked={isChecked} />
-            </IonItem>
-          ))}
-        </IonList>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'checkbox-example',
-  styleUrl: 'checkbox-example.css'
-})
-export class CheckboxExample {
-  private form = [
-    { val: 'Pepperoni', isChecked: true },
-    { val: 'Sausage', isChecked: false },
-    { val: 'Mushroom', isChecked: false }
-  ];
-
-  render() {
-    return [
-      // Default Checkbox
-      <ion-checkbox></ion-checkbox>,
-
-      // Disabled Checkbox
-      <ion-checkbox disabled={true}></ion-checkbox>,
-
-      // Checked Checkbox
-      <ion-checkbox checked={true}></ion-checkbox>,
-
-      // Checkbox Colors
-      <ion-checkbox color="primary"></ion-checkbox>,
-      <ion-checkbox color="secondary"></ion-checkbox>,
-      <ion-checkbox color="danger"></ion-checkbox>,
-      <ion-checkbox color="light"></ion-checkbox>,
-      <ion-checkbox color="dark"></ion-checkbox>,
-
-      // Checkboxes in a List
-      <ion-list>
-        {this.form.map(entry =>
-          <ion-item>
-            <ion-label>{entry.val}</ion-label>
-            <ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
-          </ion-item>
-        )}
-      </ion-list>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Checkbox -->
-  <ion-checkbox></ion-checkbox>
-
-  <!-- Disabled Checkbox -->
-  <ion-checkbox disabled="true"></ion-checkbox>
-
-  <!-- Checked Checkbox -->
-  <ion-checkbox checked="true"></ion-checkbox>
-
-  <!-- Checkbox Colors -->
-  <ion-checkbox color="primary"></ion-checkbox>
-  <ion-checkbox color="secondary"></ion-checkbox>
-  <ion-checkbox color="danger"></ion-checkbox>
-  <ion-checkbox color="light"></ion-checkbox>
-  <ion-checkbox color="dark"></ion-checkbox>
-
-  <!-- Checkboxes in a List -->
-  <ion-list>
-    <ion-item v-for="entry in form">
-      <ion-label>{{entry.val}}</ion-label>
-      <ion-checkbox
-        slot="end"
-        @update:modelValue="entry.isChecked = $event"
-        :modelValue="entry.isChecked">
-      </ion-checkbox>
-    </ion-item>
-  </ion-list>
-</template>
-
-<script>
-import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonCheckbox, IonItem, IonLabel, IonList },
-  setup() {
-    const form = [
-      { val: 'Pepperoni', isChecked: true },
-      { val: 'Sausage', isChecked: false },
-      { val: 'Mushroom', isChecked: false }
-    ];
-    
-    return { form };
-  }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
@@ -340,4 +81,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index ca4128b9929..c1c36bef703 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -169,7 +169,7 @@ export default function Playground({
    * load, so a loading screen is shown by default.
    * Once the source of the iframe loads we can
    * hide the loading screen and show the inner content.
-   * 
+   *
    * We call this as a local function because useEffect
    * callbacks cannot return a Promise, as async functions do.
    */
diff --git a/static/usage/checkbox/basic/angular.md b/static/usage/checkbox/basic/angular.md
new file mode 100644
index 00000000000..29c262a3522
--- /dev/null
+++ b/static/usage/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/checkbox/basic/demo.html b/static/usage/checkbox/basic/demo.html
new file mode 100644
index 00000000000..d95a66ee2fd
--- /dev/null
+++ b/static/usage/checkbox/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>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
new file mode 100644
index 00000000000..8e6d70bb205
--- /dev/null
+++ b/static/usage/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/checkbox/basic/demo.html"
+/>
diff --git a/static/usage/checkbox/basic/javascript.md b/static/usage/checkbox/basic/javascript.md
new file mode 100644
index 00000000000..29c262a3522
--- /dev/null
+++ b/static/usage/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/checkbox/basic/react.md b/static/usage/checkbox/basic/react.md
new file mode 100644
index 00000000000..64dda9457bb
--- /dev/null
+++ b/static/usage/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/checkbox/basic/vue.md b/static/usage/checkbox/basic/vue.md
new file mode 100644
index 00000000000..53cb1d16ccf
--- /dev/null
+++ b/static/usage/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/checkbox/indeterminate/angular.md b/static/usage/checkbox/indeterminate/angular.md
new file mode 100644
index 00000000000..841851a904a
--- /dev/null
+++ b/static/usage/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/checkbox/indeterminate/demo.html b/static/usage/checkbox/indeterminate/demo.html
new file mode 100644
index 00000000000..014f67d5210
--- /dev/null
+++ b/static/usage/checkbox/indeterminate/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>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
new file mode 100644
index 00000000000..01eb5a9da8a
--- /dev/null
+++ b/static/usage/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/checkbox/indeterminate/demo.html"
+/>
diff --git a/static/usage/checkbox/indeterminate/javascript.md b/static/usage/checkbox/indeterminate/javascript.md
new file mode 100644
index 00000000000..9a216a7d8b0
--- /dev/null
+++ b/static/usage/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/checkbox/indeterminate/react.md b/static/usage/checkbox/indeterminate/react.md
new file mode 100644
index 00000000000..9e08f102560
--- /dev/null
+++ b/static/usage/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/checkbox/indeterminate/vue.md b/static/usage/checkbox/indeterminate/vue.md
new file mode 100644
index 00000000000..0ad2ddbf62b
--- /dev/null
+++ b/static/usage/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/checkbox/theming/angular/example_component_css.md b/static/usage/checkbox/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..c8fbfdb86d8
--- /dev/null
+++ b/static/usage/checkbox/theming/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/checkbox/theming/angular/example_component_html.md b/static/usage/checkbox/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..a54828724aa
--- /dev/null
+++ b/static/usage/checkbox/theming/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/checkbox/theming/demo.html b/static/usage/checkbox/theming/demo.html
new file mode 100644
index 00000000000..224dedb9800
--- /dev/null
+++ b/static/usage/checkbox/theming/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>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/index.md b/static/usage/checkbox/theming/index.md
new file mode 100644
index 00000000000..1fea21694a3
--- /dev/null
+++ b/static/usage/checkbox/theming/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/checkbox/theming/demo.html"
+/>
diff --git a/static/usage/checkbox/theming/javascript.md b/static/usage/checkbox/theming/javascript.md
new file mode 100644
index 00000000000..5ee2949135b
--- /dev/null
+++ b/static/usage/checkbox/theming/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/checkbox/theming/react/main_css.md b/static/usage/checkbox/theming/react/main_css.md
new file mode 100644
index 00000000000..c8fbfdb86d8
--- /dev/null
+++ b/static/usage/checkbox/theming/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/checkbox/theming/react/main_tsx.md b/static/usage/checkbox/theming/react/main_tsx.md
new file mode 100644
index 00000000000..28784175181
--- /dev/null
+++ b/static/usage/checkbox/theming/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/checkbox/theming/vue.md b/static/usage/checkbox/theming/vue.md
new file mode 100644
index 00000000000..3bb88c82577
--- /dev/null
+++ b/static/usage/checkbox/theming/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>
+```

From cc35c385ceaff56b366acaf393773fde00fe64f0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 6 Sep 2022 12:02:04 -0400
Subject: [PATCH 036/469] docs(text): add basic usage playground and link to
 theming docs (#2531)

---
 docs/api/text.md                      | 53 +++----------------------
 static/usage/text/basic/angular.md    | 21 ++++++++++
 static/usage/text/basic/demo.html     | 57 +++++++++++++++++++++++++++
 static/usage/text/basic/index.md      |  8 ++++
 static/usage/text/basic/javascript.md | 21 ++++++++++
 static/usage/text/basic/react.md      | 32 +++++++++++++++
 static/usage/text/basic/vue.md        | 38 ++++++++++++++++++
 7 files changed, 183 insertions(+), 47 deletions(-)
 create mode 100644 static/usage/text/basic/angular.md
 create mode 100644 static/usage/text/basic/demo.html
 create mode 100644 static/usage/text/basic/index.md
 create mode 100644 static/usage/text/basic/javascript.md
 create mode 100644 static/usage/text/basic/react.md
 create mode 100644 static/usage/text/basic/vue.md

diff --git a/docs/api/text.md b/docs/api/text.md
index f2cf72570cc..e52f85142fb 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -1,12 +1,6 @@
 ---
 title: "ion-text"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/text/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/text/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
@@ -20,56 +14,21 @@ import Slots from '@site/static/auto-generated/text/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 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/text/basic/index.md';
 
+<Basic />
 
-## Usage
-
-```html
-<ion-text color="secondary">
-  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
-</ion-text>
-
-<ion-text color="primary">
-  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
-</ion-text>
-
-<ion-text color="light">
-  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
-</ion-text>
-
-<ion-text color="danger">
-  <h4 >H4: The quick brown fox jumps over the lazy dog</h4>
-</ion-text>
 
-<ion-text color="dark">
-  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
-</ion-text>
+## Theming
 
-<p>
-  I saw a werewolf with a Chinese menu in his hand.
-  Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
-  He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
-  Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
-  <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
-</p>
-```
+The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
 
 ## Properties
 <Props />
@@ -87,4 +46,4 @@ The text component is a simple component that can be used to style the text colo
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/text/basic/angular.md b/static/usage/text/basic/angular.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/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/text/basic/demo.html b/static/usage/text/basic/demo.html
new file mode 100644
index 00000000000..7205a8ba459
--- /dev/null
+++ b/static/usage/text/basic/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>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
new file mode 100644
index 00000000000..6c9ef54be7c
--- /dev/null
+++ b/static/usage/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/text/basic/demo.html" />
diff --git a/static/usage/text/basic/javascript.md b/static/usage/text/basic/javascript.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/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/text/basic/react.md b/static/usage/text/basic/react.md
new file mode 100644
index 00000000000..dac54e84471
--- /dev/null
+++ b/static/usage/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/text/basic/vue.md b/static/usage/text/basic/vue.md
new file mode 100644
index 00000000000..742167bf9f1
--- /dev/null
+++ b/static/usage/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>
+```

From fbaa944222839c258cd3f9fe310691898c27a8d4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 6 Sep 2022 17:03:33 -0400
Subject: [PATCH 037/469] docs(playground): update docs with playgrounds for
 consistent headings and folder names (#2536)

---
 docs/api/avatar.md                            |  8 +++---
 docs/api/badge.md                             | 20 +++++++-------
 docs/api/checkbox.md                          |  8 +++---
 docs/api/chip.md                              | 27 ++++++++++---------
 docs/api/range.md                             | 24 +++++++++--------
 docs/api/skeleton-text.md                     | 10 +++----
 docs/api/thumbnail.md                         |  8 +++---
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         |  0
 .../theming/{ => css-properties}/demo.html    |  4 +--
 .../theming/css-properties}/index.md          |  2 +-
 .../{ => css-properties}/javascript.md        |  0
 .../{ => css-properties}/react/main_css.md    |  0
 .../{ => css-properties}/react/main_tsx.md    |  0
 .../theming/{ => css-properties}/vue.md       |  0
 static/usage/avatar/theming/react.md          | 20 --------------
 .../color => theming/colors}/angular.md       |  0
 .../color => theming/colors}/demo.html        |  0
 .../color => theming/colors}/index.md         |  4 +--
 .../color => theming/colors}/javascript.md    |  0
 .../color => theming/colors}/react.md         |  0
 .../color => theming/colors}/vue.md           |  0
 .../css-properties/angular/angular-css.md     |  0
 .../css-properties/angular/angular-html.md    |  0
 .../css-properties/demo.html                  |  0
 .../css-properties/index.md                   |  2 +-
 .../css-properties/javascript.md              |  0
 .../css-properties/react/react-css.md         |  0
 .../css-properties/react/react-ts.md          |  0
 .../css-properties/vue.md                     |  0
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         |  0
 .../theming/{ => css-properties}/demo.html    |  4 +--
 .../theming/{ => css-properties}/index.md     |  2 +-
 .../{ => css-properties}/javascript.md        |  0
 .../{ => css-properties}/react/main_css.md    |  0
 .../{ => css-properties}/react/main_tsx.md    |  0
 .../theming/{ => css-properties}/vue.md       |  0
 .../chip/{color => theming/colors}/angular.md |  0
 .../chip/{color => theming/colors}/demo.html  |  4 +--
 .../chip/{color => theming/colors}/index.md   |  2 +-
 .../{color => theming/colors}/javascript.md   |  0
 .../chip/{color => theming/colors}/react.md   |  0
 .../chip/{color => theming/colors}/vue.md     |  0
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         |  0
 .../css-properties}/demo.html                 |  4 +--
 .../css-properties}/index.md                  |  2 +-
 .../css-properties}/javascript.md             |  0
 .../css-properties}/react/main_css.md         |  0
 .../css-properties}/react/main_tsx.md         |  0
 .../css-properties}/vue.md                    |  0
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         |  0
 .../css-properties}/demo.html                 |  4 +--
 .../css-properties}/index.md                  |  2 +-
 .../css-properties}/javascript.md             |  0
 .../css-properties}/react/main_css.md         |  0
 .../css-properties}/react/main_tsx.md         |  0
 .../css-properties}/vue.md                    |  0
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         |  0
 .../{ => theming}/css-shadow-parts/demo.html  |  4 +--
 .../css-shadow-parts}/index.md                |  2 +-
 .../css-shadow-parts/javascript.md            |  0
 .../css-shadow-parts/react/main_css.md        |  0
 .../css-shadow-parts/react/main_tsx.md        |  0
 .../{ => theming}/css-shadow-parts/vue.md     |  0
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         |  0
 .../theming/{ => css-properties}/demo.html    |  4 +--
 .../theming/{ => css-properties}/index.md     |  2 +-
 .../{ => css-properties}/javascript.md        |  0
 .../{ => css-properties}/react/main_css.md    |  0
 .../{ => css-properties}/react/main_tsx.md    |  0
 .../theming/{ => css-properties}/vue.md       |  0
 .../theming/{ => css-properties}/angular.md   |  0
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         |  0
 .../theming/{ => css-properties}/demo.html    |  4 +--
 .../theming/css-properties}/index.md          |  2 +-
 .../{ => css-properties}/javascript.md        |  0
 .../{ => css-properties}/react/main_css.md    |  0
 .../{ => css-properties}/react/main_tsx.md    |  0
 .../theming/{ => css-properties}/vue.md       |  0
 85 files changed, 85 insertions(+), 94 deletions(-)
 rename static/usage/avatar/theming/{ => css-properties}/angular/example_component_css.md (100%)
 rename static/usage/avatar/theming/{ => css-properties}/angular/example_component_html.md (100%)
 rename static/usage/avatar/theming/{ => css-properties}/demo.html (88%)
 rename static/usage/{thumbnail/theming => avatar/theming/css-properties}/index.md (92%)
 rename static/usage/avatar/theming/{ => css-properties}/javascript.md (100%)
 rename static/usage/avatar/theming/{ => css-properties}/react/main_css.md (100%)
 rename static/usage/avatar/theming/{ => css-properties}/react/main_tsx.md (100%)
 rename static/usage/avatar/theming/{ => css-properties}/vue.md (100%)
 delete mode 100644 static/usage/avatar/theming/react.md
 rename static/usage/badge/{customization/color => theming/colors}/angular.md (100%)
 rename static/usage/badge/{customization/color => theming/colors}/demo.html (100%)
 rename static/usage/badge/{customization/color => theming/colors}/index.md (84%)
 rename static/usage/badge/{customization/color => theming/colors}/javascript.md (100%)
 rename static/usage/badge/{customization/color => theming/colors}/react.md (100%)
 rename static/usage/badge/{customization/color => theming/colors}/vue.md (100%)
 rename static/usage/badge/{customization => theming}/css-properties/angular/angular-css.md (100%)
 rename static/usage/badge/{customization => theming}/css-properties/angular/angular-html.md (100%)
 rename static/usage/badge/{customization => theming}/css-properties/demo.html (100%)
 rename static/usage/badge/{customization => theming}/css-properties/index.md (91%)
 rename static/usage/badge/{customization => theming}/css-properties/javascript.md (100%)
 rename static/usage/badge/{customization => theming}/css-properties/react/react-css.md (100%)
 rename static/usage/badge/{customization => theming}/css-properties/react/react-ts.md (100%)
 rename static/usage/badge/{customization => theming}/css-properties/vue.md (100%)
 rename static/usage/checkbox/theming/{ => css-properties}/angular/example_component_css.md (100%)
 rename static/usage/checkbox/theming/{ => css-properties}/angular/example_component_html.md (100%)
 rename static/usage/checkbox/theming/{ => css-properties}/demo.html (89%)
 rename static/usage/checkbox/theming/{ => css-properties}/index.md (93%)
 rename static/usage/checkbox/theming/{ => css-properties}/javascript.md (100%)
 rename static/usage/checkbox/theming/{ => css-properties}/react/main_css.md (100%)
 rename static/usage/checkbox/theming/{ => css-properties}/react/main_tsx.md (100%)
 rename static/usage/checkbox/theming/{ => css-properties}/vue.md (100%)
 rename static/usage/chip/{color => theming/colors}/angular.md (100%)
 rename static/usage/chip/{color => theming/colors}/demo.html (92%)
 rename static/usage/chip/{color => theming/colors}/index.md (88%)
 rename static/usage/chip/{color => theming/colors}/javascript.md (100%)
 rename static/usage/chip/{color => theming/colors}/react.md (100%)
 rename static/usage/chip/{color => theming/colors}/vue.md (100%)
 rename static/usage/chip/{styling => theming/css-properties}/angular/example_component_css.md (100%)
 rename static/usage/chip/{styling => theming/css-properties}/angular/example_component_html.md (100%)
 rename static/usage/chip/{styling => theming/css-properties}/demo.html (86%)
 rename static/usage/chip/{styling => theming/css-properties}/index.md (93%)
 rename static/usage/chip/{styling => theming/css-properties}/javascript.md (100%)
 rename static/usage/chip/{styling => theming/css-properties}/react/main_css.md (100%)
 rename static/usage/chip/{styling => theming/css-properties}/react/main_tsx.md (100%)
 rename static/usage/chip/{styling => theming/css-properties}/vue.md (100%)
 rename static/usage/range/{css-variables => theming/css-properties}/angular/example_component_css.md (100%)
 rename static/usage/range/{css-variables => theming/css-properties}/angular/example_component_html.md (100%)
 rename static/usage/range/{css-variables => theming/css-properties}/demo.html (89%)
 rename static/usage/range/{css-shadow-parts => theming/css-properties}/index.md (93%)
 rename static/usage/range/{css-variables => theming/css-properties}/javascript.md (100%)
 rename static/usage/range/{css-variables => theming/css-properties}/react/main_css.md (100%)
 rename static/usage/range/{css-variables => theming/css-properties}/react/main_tsx.md (100%)
 rename static/usage/range/{css-variables => theming/css-properties}/vue.md (100%)
 rename static/usage/range/{ => theming}/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/range/{ => theming}/css-shadow-parts/angular/example_component_html.md (100%)
 rename static/usage/range/{ => theming}/css-shadow-parts/demo.html (93%)
 rename static/usage/range/{css-variables => theming/css-shadow-parts}/index.md (93%)
 rename static/usage/range/{ => theming}/css-shadow-parts/javascript.md (100%)
 rename static/usage/range/{ => theming}/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/range/{ => theming}/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/range/{ => theming}/css-shadow-parts/vue.md (100%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/angular/example_component_css.md (100%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/angular/example_component_html.md (100%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/demo.html (94%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/index.md (91%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/javascript.md (100%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/react/main_css.md (100%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/react/main_tsx.md (100%)
 rename static/usage/skeleton-text/theming/{ => css-properties}/vue.md (100%)
 rename static/usage/thumbnail/theming/{ => css-properties}/angular.md (100%)
 rename static/usage/thumbnail/theming/{ => css-properties}/angular/example_component_css.md (100%)
 rename static/usage/thumbnail/theming/{ => css-properties}/angular/example_component_html.md (100%)
 rename static/usage/thumbnail/theming/{ => css-properties}/demo.html (88%)
 rename static/usage/{avatar/theming => thumbnail/theming/css-properties}/index.md (92%)
 rename static/usage/thumbnail/theming/{ => css-properties}/javascript.md (100%)
 rename static/usage/thumbnail/theming/{ => css-properties}/react/main_css.md (100%)
 rename static/usage/thumbnail/theming/{ => css-properties}/react/main_tsx.md (100%)
 rename static/usage/thumbnail/theming/{ => css-properties}/vue.md (100%)

diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index e7a005fa719..dd1d64e3b32 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -22,7 +22,7 @@ Avatars are circular components that usually wrap an image or icon. They can be
 
 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
+## Basic Usage
 
 import Basic from '@site/static/usage/avatar/basic/index.md';
 
@@ -42,9 +42,11 @@ import Item from '@site/static/usage/avatar/item/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/avatar/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/avatar/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Properties
 <Props />
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 32004eab66f..32da34d7aae 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -22,23 +22,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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.
 
-import BasicExample from '@site/static/usage/badge/basic/index.md';
+## Basic Usage
 
-<BasicExample />
+import Basic from '@site/static/usage/badge/basic/index.md';
 
-## Customization Examples
+<Basic />
 
-### Color
+## Theming
 
-import ColorExample from '@site/static/usage/badge/customization/color/index.md';
+### Colors
 
-<ColorExample />
+import Colors from '@site/static/usage/badge/theming/colors/index.md';
+
+<Colors />
 
 ### CSS Properties
 
-import CSSPropsExample from '@site/static/usage/badge/customization/css-properties/index.md';
+import CSSProps from '@site/static/usage/badge/theming/css-properties/index.md';
 
-<CSSPropsExample />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -56,4 +58,4 @@ import CSSPropsExample from '@site/static/usage/badge/customization/css-properti
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 490a0606d49..6b15c69765b 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -22,7 +22,7 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 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
+## Basic Usage
 
 import Basic from '@site/static/usage/checkbox/basic/index.md';
 
@@ -36,9 +36,11 @@ import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/checkbox/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/checkbox/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Interfaces
 
diff --git a/docs/api/chip.md b/docs/api/chip.md
index 2e011567f40..668611af3ad 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -19,30 +19,31 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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
+## Basic Usage
 
-import BasicExample from '@site/static/usage/chip/basic/index.md';
+import Basic from '@site/static/usage/chip/basic/index.md';
 
-<BasicExample />
+<Basic />
 
-## Colors
+## Slotting Components and Icons
 
-import ColorExample from '@site/static/usage/chip/color/index.md';
+import SlotExample from '@site/static/usage/chip/slots/index.md';
 
-<ColorExample />
+<SlotExample />
 
+## Theming
 
-## Slotting Components and Icons
+### Colors
 
-import SlotExample from '@site/static/usage/chip/slots/index.md';
+import Colors from '@site/static/usage/chip/theming/colors/index.md';
 
-<SlotExample />
+<Colors />
 
-## Styling
+### CSS Custom Properties
 
-import StylingExample from '@site/static/usage/chip/styling/index.md';
+import CSSProps from '@site/static/usage/chip/theming/css-properties/index.md';
 
-<StylingExample />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -60,4 +61,4 @@ import StylingExample from '@site/static/usage/chip/styling/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/range.md b/docs/api/range.md
index 2e6b6c74b19..0add6ba227a 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -25,6 +25,8 @@ The Range slider lets users select from a range of values by moving the slider k
 
 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/range/basic/index.md';
 
 <Basic />
@@ -57,9 +59,9 @@ import Pins from '@site/static/usage/range/pins/index.md';
 
 ## 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`. 
+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. 
+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';
 
@@ -69,7 +71,7 @@ import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
 
 ### Using `ionChange`
 
-The `ionChange` event emits as the Range knob value changes. 
+The `ionChange` event emits as the Range knob value changes.
 
 import IonChangeEvent from '@site/static/usage/range/ion-change-event/index.md';
 
@@ -83,23 +85,23 @@ import IonKnobMoveEvent from '@site/static/usage/range/ion-knob-move-event/index
 
 <IonKnobMoveEvent />
 
-## Styling
+## Theming
 
-### Styling with CSS Variables
+### 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 CssVariablesPlayground from '@site/static/usage/range/css-variables/index.md';
+import CSSProps from '@site/static/usage/range/theming/css-properties/index.md';
 
-<CssVariablesPlayground />
+<CSSProps />
 
-### Styling with CSS Shadow Parts
+### 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 CssShadowPartsPlayground from '@site/static/usage/range/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/range/theming/css-shadow-parts/index.md';
 
-<CssShadowPartsPlayground />
+<CSSParts />
 
 ## Interfaces
 
@@ -163,4 +165,4 @@ type RangeValue = number | { lower: number, upper: number };
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index ead54000e93..d09c6cf16eb 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -30,13 +30,13 @@ import Basic from '@site/static/usage/skeleton-text/basic/index.md';
 
 <Basic />
 
-## Customization
+## Theming
 
-### Theming
+### CSS Custom Properties
 
-import Theming from '@site/static/usage/skeleton-text/theming/index.md';
+import CSSProps from '@site/static/usage/skeleton-text/theming/css-properties/index.md';
 
-<Theming />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -54,4 +54,4 @@ import Theming from '@site/static/usage/skeleton-text/theming/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index 21b640a3b54..464712c8e6f 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -22,7 +22,7 @@ Thumbnails are square components that usually wrap an image or icon. They can be
 
 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
+## Basic Usage
 
 import Basic from '@site/static/usage/thumbnail/basic/index.md';
 
@@ -36,9 +36,11 @@ import Item from '@site/static/usage/thumbnail/item/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/thumbnail/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/thumbnail/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Properties
 <Props />
diff --git a/static/usage/avatar/theming/angular/example_component_css.md b/static/usage/avatar/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/avatar/theming/angular/example_component_css.md
rename to static/usage/avatar/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/avatar/theming/angular/example_component_html.md b/static/usage/avatar/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/avatar/theming/angular/example_component_html.md
rename to static/usage/avatar/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/avatar/theming/demo.html b/static/usage/avatar/theming/css-properties/demo.html
similarity index 88%
rename from static/usage/avatar/theming/demo.html
rename to static/usage/avatar/theming/css-properties/demo.html
index 0d3c4b67ac2..a7f56a37548 100644
--- a/static/usage/avatar/theming/demo.html
+++ b/static/usage/avatar/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <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>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/thumbnail/theming/index.md b/static/usage/avatar/theming/css-properties/index.md
similarity index 92%
rename from static/usage/thumbnail/theming/index.md
rename to static/usage/avatar/theming/css-properties/index.md
index 8be9b0ddccc..b6b1ee34106 100644
--- a/static/usage/thumbnail/theming/index.md
+++ b/static/usage/avatar/theming/css-properties/index.md
@@ -27,6 +27,6 @@ import angularCSS from './angular/example_component_css.md';
       }
     },
   }}
-  src="usage/thumbnail/theming/demo.html"
+  src="usage/avatar/theming/css-properties/demo.html"
   size="250px"
 />
diff --git a/static/usage/avatar/theming/javascript.md b/static/usage/avatar/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/avatar/theming/javascript.md
rename to static/usage/avatar/theming/css-properties/javascript.md
diff --git a/static/usage/avatar/theming/react/main_css.md b/static/usage/avatar/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/avatar/theming/react/main_css.md
rename to static/usage/avatar/theming/css-properties/react/main_css.md
diff --git a/static/usage/avatar/theming/react/main_tsx.md b/static/usage/avatar/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/avatar/theming/react/main_tsx.md
rename to static/usage/avatar/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/avatar/theming/vue.md b/static/usage/avatar/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/avatar/theming/vue.md
rename to static/usage/avatar/theming/css-properties/vue.md
diff --git a/static/usage/avatar/theming/react.md b/static/usage/avatar/theming/react.md
deleted file mode 100644
index 7d0e98290b8..00000000000
--- a/static/usage/avatar/theming/react.md
+++ /dev/null
@@ -1,20 +0,0 @@
-```tsx
-import React from 'react';
-import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
-
-import './main.css';
-
-function Example() {
-  return (
-    <>
-      <IonItem>
-        <IonAvatar slot="start">
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
-        </IonAvatar>
-        <IonLabel>Item Avatar</IonLabel>
-      </IonItem>
-    </>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/badge/customization/color/angular.md b/static/usage/badge/theming/colors/angular.md
similarity index 100%
rename from static/usage/badge/customization/color/angular.md
rename to static/usage/badge/theming/colors/angular.md
diff --git a/static/usage/badge/customization/color/demo.html b/static/usage/badge/theming/colors/demo.html
similarity index 100%
rename from static/usage/badge/customization/color/demo.html
rename to static/usage/badge/theming/colors/demo.html
diff --git a/static/usage/badge/customization/color/index.md b/static/usage/badge/theming/colors/index.md
similarity index 84%
rename from static/usage/badge/customization/color/index.md
rename to static/usage/badge/theming/colors/index.md
index 047e0871bcf..6db34769b24 100644
--- a/static/usage/badge/customization/color/index.md
+++ b/static/usage/badge/theming/colors/index.md
@@ -8,5 +8,5 @@ import angular from './angular.md';
 <Playground
   size="medium"
   code={{ javascript, react, vue, angular }}
-  src="usage/badge/customization/color/demo.html"
-/>
\ No newline at end of file
+  src="usage/badge/theming/colors/demo.html"
+/>
diff --git a/static/usage/badge/customization/color/javascript.md b/static/usage/badge/theming/colors/javascript.md
similarity index 100%
rename from static/usage/badge/customization/color/javascript.md
rename to static/usage/badge/theming/colors/javascript.md
diff --git a/static/usage/badge/customization/color/react.md b/static/usage/badge/theming/colors/react.md
similarity index 100%
rename from static/usage/badge/customization/color/react.md
rename to static/usage/badge/theming/colors/react.md
diff --git a/static/usage/badge/customization/color/vue.md b/static/usage/badge/theming/colors/vue.md
similarity index 100%
rename from static/usage/badge/customization/color/vue.md
rename to static/usage/badge/theming/colors/vue.md
diff --git a/static/usage/badge/customization/css-properties/angular/angular-css.md b/static/usage/badge/theming/css-properties/angular/angular-css.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/angular/angular-css.md
rename to static/usage/badge/theming/css-properties/angular/angular-css.md
diff --git a/static/usage/badge/customization/css-properties/angular/angular-html.md b/static/usage/badge/theming/css-properties/angular/angular-html.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/angular/angular-html.md
rename to static/usage/badge/theming/css-properties/angular/angular-html.md
diff --git a/static/usage/badge/customization/css-properties/demo.html b/static/usage/badge/theming/css-properties/demo.html
similarity index 100%
rename from static/usage/badge/customization/css-properties/demo.html
rename to static/usage/badge/theming/css-properties/demo.html
diff --git a/static/usage/badge/customization/css-properties/index.md b/static/usage/badge/theming/css-properties/index.md
similarity index 91%
rename from static/usage/badge/customization/css-properties/index.md
rename to static/usage/badge/theming/css-properties/index.md
index de39bd6203f..85abdef8270 100644
--- a/static/usage/badge/customization/css-properties/index.md
+++ b/static/usage/badge/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angularCSS from './angular/angular-css.md';
       },
     },
   }}
-  src="usage/badge/customization/css-properties/demo.html"
+  src="usage/badge/theming/css-properties/demo.html"
 />
diff --git a/static/usage/badge/customization/css-properties/javascript.md b/static/usage/badge/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/javascript.md
rename to static/usage/badge/theming/css-properties/javascript.md
diff --git a/static/usage/badge/customization/css-properties/react/react-css.md b/static/usage/badge/theming/css-properties/react/react-css.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/react/react-css.md
rename to static/usage/badge/theming/css-properties/react/react-css.md
diff --git a/static/usage/badge/customization/css-properties/react/react-ts.md b/static/usage/badge/theming/css-properties/react/react-ts.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/react/react-ts.md
rename to static/usage/badge/theming/css-properties/react/react-ts.md
diff --git a/static/usage/badge/customization/css-properties/vue.md b/static/usage/badge/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/vue.md
rename to static/usage/badge/theming/css-properties/vue.md
diff --git a/static/usage/checkbox/theming/angular/example_component_css.md b/static/usage/checkbox/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/checkbox/theming/angular/example_component_css.md
rename to static/usage/checkbox/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/checkbox/theming/angular/example_component_html.md b/static/usage/checkbox/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/checkbox/theming/angular/example_component_html.md
rename to static/usage/checkbox/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/checkbox/theming/demo.html b/static/usage/checkbox/theming/css-properties/demo.html
similarity index 89%
rename from static/usage/checkbox/theming/demo.html
rename to static/usage/checkbox/theming/css-properties/demo.html
index 224dedb9800..4666cbf6298 100644
--- a/static/usage/checkbox/theming/demo.html
+++ b/static/usage/checkbox/theming/css-properties/demo.html
@@ -4,8 +4,8 @@
     <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>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
     <style>
diff --git a/static/usage/checkbox/theming/index.md b/static/usage/checkbox/theming/css-properties/index.md
similarity index 93%
rename from static/usage/checkbox/theming/index.md
rename to static/usage/checkbox/theming/css-properties/index.md
index 1fea21694a3..ac8f8a90076 100644
--- a/static/usage/checkbox/theming/index.md
+++ b/static/usage/checkbox/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       }
     }
   }}
-  src="usage/checkbox/theming/demo.html"
+  src="usage/checkbox/theming/css-properties/demo.html"
 />
diff --git a/static/usage/checkbox/theming/javascript.md b/static/usage/checkbox/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/checkbox/theming/javascript.md
rename to static/usage/checkbox/theming/css-properties/javascript.md
diff --git a/static/usage/checkbox/theming/react/main_css.md b/static/usage/checkbox/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/checkbox/theming/react/main_css.md
rename to static/usage/checkbox/theming/css-properties/react/main_css.md
diff --git a/static/usage/checkbox/theming/react/main_tsx.md b/static/usage/checkbox/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/checkbox/theming/react/main_tsx.md
rename to static/usage/checkbox/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/checkbox/theming/vue.md b/static/usage/checkbox/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/checkbox/theming/vue.md
rename to static/usage/checkbox/theming/css-properties/vue.md
diff --git a/static/usage/chip/color/angular.md b/static/usage/chip/theming/colors/angular.md
similarity index 100%
rename from static/usage/chip/color/angular.md
rename to static/usage/chip/theming/colors/angular.md
diff --git a/static/usage/chip/color/demo.html b/static/usage/chip/theming/colors/demo.html
similarity index 92%
rename from static/usage/chip/color/demo.html
rename to static/usage/chip/theming/colors/demo.html
index 9f05dea22d0..135036f28d2 100644
--- a/static/usage/chip/color/demo.html
+++ b/static/usage/chip/theming/colors/demo.html
@@ -5,8 +5,8 @@
   <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>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/chip/color/index.md b/static/usage/chip/theming/colors/index.md
similarity index 88%
rename from static/usage/chip/color/index.md
rename to static/usage/chip/theming/colors/index.md
index 6c8ed67e81c..6795c343ed3 100644
--- a/static/usage/chip/color/index.md
+++ b/static/usage/chip/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/chip/color/demo.html" />
+<Playground code={{ javascript, react, vue, angular }} src="usage/chip/theming/colors/demo.html" />
diff --git a/static/usage/chip/color/javascript.md b/static/usage/chip/theming/colors/javascript.md
similarity index 100%
rename from static/usage/chip/color/javascript.md
rename to static/usage/chip/theming/colors/javascript.md
diff --git a/static/usage/chip/color/react.md b/static/usage/chip/theming/colors/react.md
similarity index 100%
rename from static/usage/chip/color/react.md
rename to static/usage/chip/theming/colors/react.md
diff --git a/static/usage/chip/color/vue.md b/static/usage/chip/theming/colors/vue.md
similarity index 100%
rename from static/usage/chip/color/vue.md
rename to static/usage/chip/theming/colors/vue.md
diff --git a/static/usage/chip/styling/angular/example_component_css.md b/static/usage/chip/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/chip/styling/angular/example_component_css.md
rename to static/usage/chip/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/chip/styling/angular/example_component_html.md b/static/usage/chip/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/chip/styling/angular/example_component_html.md
rename to static/usage/chip/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/chip/styling/demo.html b/static/usage/chip/theming/css-properties/demo.html
similarity index 86%
rename from static/usage/chip/styling/demo.html
rename to static/usage/chip/theming/css-properties/demo.html
index 26048748135..2092faeb245 100644
--- a/static/usage/chip/styling/demo.html
+++ b/static/usage/chip/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <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>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/chip/styling/index.md b/static/usage/chip/theming/css-properties/index.md
similarity index 93%
rename from static/usage/chip/styling/index.md
rename to static/usage/chip/theming/css-properties/index.md
index 4f07411cf99..d44a374a371 100644
--- a/static/usage/chip/styling/index.md
+++ b/static/usage/chip/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angular_example_component_html from './angular/example_component_html.md'
       },
     },
   }}
-  src="usage/chip/styling/demo.html"
+  src="usage/chip/theming/css-properties/demo.html"
 />
diff --git a/static/usage/chip/styling/javascript.md b/static/usage/chip/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/chip/styling/javascript.md
rename to static/usage/chip/theming/css-properties/javascript.md
diff --git a/static/usage/chip/styling/react/main_css.md b/static/usage/chip/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/chip/styling/react/main_css.md
rename to static/usage/chip/theming/css-properties/react/main_css.md
diff --git a/static/usage/chip/styling/react/main_tsx.md b/static/usage/chip/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/chip/styling/react/main_tsx.md
rename to static/usage/chip/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/chip/styling/vue.md b/static/usage/chip/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/chip/styling/vue.md
rename to static/usage/chip/theming/css-properties/vue.md
diff --git a/static/usage/range/css-variables/angular/example_component_css.md b/static/usage/range/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/css-variables/angular/example_component_css.md
rename to static/usage/range/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/range/css-variables/angular/example_component_html.md b/static/usage/range/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/css-variables/angular/example_component_html.md
rename to static/usage/range/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/range/css-variables/demo.html b/static/usage/range/theming/css-properties/demo.html
similarity index 89%
rename from static/usage/range/css-variables/demo.html
rename to static/usage/range/theming/css-properties/demo.html
index 8022474cde5..09d7bcbcb7b 100644
--- a/static/usage/range/css-variables/demo.html
+++ b/static/usage/range/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <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>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
   <style>
diff --git a/static/usage/range/css-shadow-parts/index.md b/static/usage/range/theming/css-properties/index.md
similarity index 93%
rename from static/usage/range/css-shadow-parts/index.md
rename to static/usage/range/theming/css-properties/index.md
index af1df80390f..18bbf19bc90 100644
--- a/static/usage/range/css-shadow-parts/index.md
+++ b/static/usage/range/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       },
     },
   }}
-  src="usage/range/css-shadow-parts/demo.html"
+  src="usage/range/theming/css-properties/demo.html"
 />
diff --git a/static/usage/range/css-variables/javascript.md b/static/usage/range/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/range/css-variables/javascript.md
rename to static/usage/range/theming/css-properties/javascript.md
diff --git a/static/usage/range/css-variables/react/main_css.md b/static/usage/range/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/range/css-variables/react/main_css.md
rename to static/usage/range/theming/css-properties/react/main_css.md
diff --git a/static/usage/range/css-variables/react/main_tsx.md b/static/usage/range/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/range/css-variables/react/main_tsx.md
rename to static/usage/range/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/range/css-variables/vue.md b/static/usage/range/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/range/css-variables/vue.md
rename to static/usage/range/theming/css-properties/vue.md
diff --git a/static/usage/range/css-shadow-parts/angular/example_component_css.md b/static/usage/range/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/angular/example_component_css.md
rename to static/usage/range/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/range/css-shadow-parts/angular/example_component_html.md b/static/usage/range/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/angular/example_component_html.md
rename to static/usage/range/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/range/css-shadow-parts/demo.html b/static/usage/range/theming/css-shadow-parts/demo.html
similarity index 93%
rename from static/usage/range/css-shadow-parts/demo.html
rename to static/usage/range/theming/css-shadow-parts/demo.html
index 5cfc3b906d8..fb27194b4a5 100644
--- a/static/usage/range/css-shadow-parts/demo.html
+++ b/static/usage/range/theming/css-shadow-parts/demo.html
@@ -5,8 +5,8 @@
   <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>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
   <style>
diff --git a/static/usage/range/css-variables/index.md b/static/usage/range/theming/css-shadow-parts/index.md
similarity index 93%
rename from static/usage/range/css-variables/index.md
rename to static/usage/range/theming/css-shadow-parts/index.md
index c613c23ce3f..cd1fa1c5a25 100644
--- a/static/usage/range/css-variables/index.md
+++ b/static/usage/range/theming/css-shadow-parts/index.md
@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       },
     },
   }}
-  src="usage/range/css-variables/demo.html"
+  src="usage/range/theming/css-shadow-parts/demo.html"
 />
diff --git a/static/usage/range/css-shadow-parts/javascript.md b/static/usage/range/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/javascript.md
rename to static/usage/range/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/range/css-shadow-parts/react/main_css.md b/static/usage/range/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/react/main_css.md
rename to static/usage/range/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/range/css-shadow-parts/react/main_tsx.md b/static/usage/range/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/react/main_tsx.md
rename to static/usage/range/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/range/css-shadow-parts/vue.md b/static/usage/range/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/vue.md
rename to static/usage/range/theming/css-shadow-parts/vue.md
diff --git a/static/usage/skeleton-text/theming/angular/example_component_css.md b/static/usage/skeleton-text/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/example_component_css.md
rename to static/usage/skeleton-text/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/skeleton-text/theming/angular/example_component_html.md b/static/usage/skeleton-text/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/example_component_html.md
rename to static/usage/skeleton-text/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/skeleton-text/theming/demo.html b/static/usage/skeleton-text/theming/css-properties/demo.html
similarity index 94%
rename from static/usage/skeleton-text/theming/demo.html
rename to static/usage/skeleton-text/theming/css-properties/demo.html
index 98c691431e9..8b94ae1d3cc 100644
--- a/static/usage/skeleton-text/theming/demo.html
+++ b/static/usage/skeleton-text/theming/css-properties/demo.html
@@ -4,8 +4,8 @@
     <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>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/skeleton-text/theming/index.md b/static/usage/skeleton-text/theming/css-properties/index.md
similarity index 91%
rename from static/usage/skeleton-text/theming/index.md
rename to static/usage/skeleton-text/theming/css-properties/index.md
index a79907b63b6..255377b76cd 100644
--- a/static/usage/skeleton-text/theming/index.md
+++ b/static/usage/skeleton-text/theming/css-properties/index.md
@@ -27,6 +27,6 @@ import angularCSS from './angular/example_component_css.md';
       }
     },
   }}
-  src="usage/skeleton-text/theming/demo.html"
+  src="usage/skeleton-text/theming/css-properties/demo.html"
   size="250px"
 />
diff --git a/static/usage/skeleton-text/theming/javascript.md b/static/usage/skeleton-text/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/skeleton-text/theming/javascript.md
rename to static/usage/skeleton-text/theming/css-properties/javascript.md
diff --git a/static/usage/skeleton-text/theming/react/main_css.md b/static/usage/skeleton-text/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/main_css.md
rename to static/usage/skeleton-text/theming/css-properties/react/main_css.md
diff --git a/static/usage/skeleton-text/theming/react/main_tsx.md b/static/usage/skeleton-text/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/main_tsx.md
rename to static/usage/skeleton-text/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/skeleton-text/theming/vue.md b/static/usage/skeleton-text/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/skeleton-text/theming/vue.md
rename to static/usage/skeleton-text/theming/css-properties/vue.md
diff --git a/static/usage/thumbnail/theming/angular.md b/static/usage/thumbnail/theming/css-properties/angular.md
similarity index 100%
rename from static/usage/thumbnail/theming/angular.md
rename to static/usage/thumbnail/theming/css-properties/angular.md
diff --git a/static/usage/thumbnail/theming/angular/example_component_css.md b/static/usage/thumbnail/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/thumbnail/theming/angular/example_component_css.md
rename to static/usage/thumbnail/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/thumbnail/theming/angular/example_component_html.md b/static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/thumbnail/theming/angular/example_component_html.md
rename to static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/thumbnail/theming/demo.html b/static/usage/thumbnail/theming/css-properties/demo.html
similarity index 88%
rename from static/usage/thumbnail/theming/demo.html
rename to static/usage/thumbnail/theming/css-properties/demo.html
index 37b245dda91..fb424cd4e70 100644
--- a/static/usage/thumbnail/theming/demo.html
+++ b/static/usage/thumbnail/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <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>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/avatar/theming/index.md b/static/usage/thumbnail/theming/css-properties/index.md
similarity index 92%
rename from static/usage/avatar/theming/index.md
rename to static/usage/thumbnail/theming/css-properties/index.md
index e586aae743b..71b197097d1 100644
--- a/static/usage/avatar/theming/index.md
+++ b/static/usage/thumbnail/theming/css-properties/index.md
@@ -27,6 +27,6 @@ import angularCSS from './angular/example_component_css.md';
       }
     },
   }}
-  src="usage/avatar/theming/demo.html"
+  src="usage/thumbnail/theming/css-properties/demo.html"
   size="250px"
 />
diff --git a/static/usage/thumbnail/theming/javascript.md b/static/usage/thumbnail/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/thumbnail/theming/javascript.md
rename to static/usage/thumbnail/theming/css-properties/javascript.md
diff --git a/static/usage/thumbnail/theming/react/main_css.md b/static/usage/thumbnail/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/thumbnail/theming/react/main_css.md
rename to static/usage/thumbnail/theming/css-properties/react/main_css.md
diff --git a/static/usage/thumbnail/theming/react/main_tsx.md b/static/usage/thumbnail/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/thumbnail/theming/react/main_tsx.md
rename to static/usage/thumbnail/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/thumbnail/theming/vue.md b/static/usage/thumbnail/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/thumbnail/theming/vue.md
rename to static/usage/thumbnail/theming/css-properties/vue.md

From c4c9287880c96b03381cb1df52495ce5812ad0d2 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 6 Sep 2022 17:12:28 -0400
Subject: [PATCH 038/469] docs(label): add label component playgrounds (#2534)

---
 docs/api/label.md                             | 370 +-----------------
 static/usage/label/basic/angular.md           |   3 +
 static/usage/label/basic/demo.html            |  24 ++
 static/usage/label/basic/index.md             |   8 +
 static/usage/label/basic/javascript.md        |   3 +
 static/usage/label/basic/react.md             |  13 +
 static/usage/label/basic/vue.md               |  14 +
 static/usage/label/input/angular.md           |  31 ++
 static/usage/label/input/demo.html            |  59 +++
 static/usage/label/input/index.md             |   8 +
 static/usage/label/input/javascript.md        |  31 ++
 static/usage/label/input/react.md             |  41 ++
 static/usage/label/input/vue.md               |  42 ++
 static/usage/label/item/angular.md            |  28 ++
 static/usage/label/item/demo.html             |  56 +++
 static/usage/label/item/index.md              |   8 +
 static/usage/label/item/javascript.md         |  28 ++
 static/usage/label/item/react.md              |  38 ++
 static/usage/label/item/vue.md                |  39 ++
 static/usage/label/theming/colors/angular.md  |  12 +
 static/usage/label/theming/colors/demo.html   |  39 ++
 static/usage/label/theming/colors/index.md    |   8 +
 .../usage/label/theming/colors/javascript.md  |  12 +
 static/usage/label/theming/colors/react.md    |  22 ++
 static/usage/label/theming/colors/vue.md      |  23 ++
 25 files changed, 604 insertions(+), 356 deletions(-)
 create mode 100644 static/usage/label/basic/angular.md
 create mode 100644 static/usage/label/basic/demo.html
 create mode 100644 static/usage/label/basic/index.md
 create mode 100644 static/usage/label/basic/javascript.md
 create mode 100644 static/usage/label/basic/react.md
 create mode 100644 static/usage/label/basic/vue.md
 create mode 100644 static/usage/label/input/angular.md
 create mode 100644 static/usage/label/input/demo.html
 create mode 100644 static/usage/label/input/index.md
 create mode 100644 static/usage/label/input/javascript.md
 create mode 100644 static/usage/label/input/react.md
 create mode 100644 static/usage/label/input/vue.md
 create mode 100644 static/usage/label/item/angular.md
 create mode 100644 static/usage/label/item/demo.html
 create mode 100644 static/usage/label/item/index.md
 create mode 100644 static/usage/label/item/javascript.md
 create mode 100644 static/usage/label/item/react.md
 create mode 100644 static/usage/label/item/vue.md
 create mode 100644 static/usage/label/theming/colors/angular.md
 create mode 100644 static/usage/label/theming/colors/demo.html
 create mode 100644 static/usage/label/theming/colors/index.md
 create mode 100644 static/usage/label/theming/colors/javascript.md
 create mode 100644 static/usage/label/theming/colors/react.md
 create mode 100644 static/usage/label/theming/colors/vue.md

diff --git a/docs/api/label.md b/docs/api/label.md
index 20c2525fe83..f5c5b807c41 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -1,10 +1,6 @@
 ---
 title: "ion-label"
-hide_table_of_contents: true
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
@@ -18,376 +14,38 @@ import Slots from '@site/static/auto-generated/label/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 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/label/basic/index.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
-<!-- Default Label -->
-<ion-label>Label</ion-label>
-
-<!-- Label Colors -->
-<ion-label color="primary">Primary Label</ion-label>
-<ion-label color="secondary">Secondary Label</ion-label>
-<ion-label color="danger">Danger Label</ion-label>
-<ion-label color="light">Light Label</ion-label>
-<ion-label color="dark">Dark Label</ion-label>
-
-<!-- Item Labels -->
-<ion-item>
-  <ion-label>Default Item</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 in the item.
-  </ion-label>
-</ion-item>
-
-<!-- Input Labels -->
-<ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="fixed">Fixed</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="floating">Floating</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="stacked">Stacked</ion-label>
-  <ion-input></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>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Label -->
-<ion-label>Label</ion-label>
-
-<!-- Label Colors -->
-<ion-label color="primary">Primary Label</ion-label>
-<ion-label color="secondary">Secondary Label</ion-label>
-<ion-label color="danger">Danger Label</ion-label>
-<ion-label color="light">Light Label</ion-label>
-<ion-label color="dark">Dark Label</ion-label>
-
-<!-- Item Labels -->
-<ion-item>
-  <ion-label>Default Item</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 in the item.
-  </ion-label>
-</ion-item>
-
-<!-- Input Labels -->
-<ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="fixed">Fixed</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="floating">Floating</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="stacked">Stacked</ion-label>
-  <ion-input></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>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
-
-export const LabelExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default Label --*/}
-    <IonLabel>Label</IonLabel><br />
-
-    {/*-- Label Colors --*/}
-    <IonLabel color="primary">Primary Label</IonLabel><br />
-    <IonLabel color="secondary">Secondary Label</IonLabel><br />
-    <IonLabel color="danger">Danger Label</IonLabel><br />
-    <IonLabel color="light">Light Label</IonLabel><br />
-    <IonLabel color="dark">Dark Label</IonLabel><br />
-
-    {/*-- Item Labels --*/}
-    <IonItem>
-      <IonLabel>Default Item</IonLabel>
-    </IonItem>
-
-    <IonItem>
-      <IonLabel className="ion-text-wrap">
-        Multi-line text that should wrap when it is too long
-        to fit on one line in the item.
-      </IonLabel>
-    </IonItem>
-
-    {/*-- Input Labels --*/}
-    <IonItem>
-      <IonLabel>Default Input</IonLabel>
-      <IonInput></IonInput>
-    </IonItem>
-
-    <IonItem>
-      <IonLabel position="fixed">Fixed</IonLabel>
-      <IonInput></IonInput>
-    </IonItem>
-
-    <IonItem>
-      <IonLabel position="floating">Floating</IonLabel>
-      <IonInput></IonInput>
-    </IonItem>
-
-    <IonItem>
-      <IonLabel position="stacked">Stacked</IonLabel>
-      <IonInput></IonInput>
-    </IonItem>
-
-    <IonItem>
-      <IonLabel>Toggle</IonLabel>
-      <IonToggle slot="end" checked></IonToggle>
-    </IonItem>
-
-    <IonItem>
-      <IonCheckbox slot="start" checked />
-      <IonLabel>Checkbox</IonLabel>
-    </IonItem>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'label-example',
-  styleUrl: 'label-example.css'
-})
-export class LabelExample {
-  render() {
-    return [
-      // Default Label
-      <ion-label>Label</ion-label>,
-
-      // Label Colors
-      <ion-label color="primary">Primary Label</ion-label>,
-      <ion-label color="secondary">Secondary Label</ion-label>,
-      <ion-label color="danger">Danger Label</ion-label>,
-      <ion-label color="light">Light Label</ion-label>,
-      <ion-label color="dark">Dark Label</ion-label>,
-
-      // Item Labels
-      <ion-item>
-        <ion-label>Default Item</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 in the item.
-        </ion-label>
-      </ion-item>,
-
-      // Input Labels
-      <ion-item>
-        <ion-label>Default Input</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label position="fixed">Fixed</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label position="floating">Floating</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label position="stacked">Stacked</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Toggle</ion-label>
-        <ion-toggle slot="end" checked={true}></ion-toggle>
-      </ion-item>,
-
-      <ion-item>
-        <ion-checkbox slot="start" checked={true}></ion-checkbox>
-        <ion-label>Checkbox</ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Label -->
-  <ion-label>Label</ion-label>
-
-  <!-- Label Colors -->
-  <ion-label color="primary">Primary Label</ion-label>
-  <ion-label color="secondary">Secondary Label</ion-label>
-  <ion-label color="danger">Danger Label</ion-label>
-  <ion-label color="light">Light Label</ion-label>
-  <ion-label color="dark">Dark Label</ion-label>
-
-  <!-- Item Labels -->
-  <ion-item>
-    <ion-label>Default Item</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 in the item.
-    </ion-label>
-  </ion-item>
+<Basic />
 
-  <!-- Input Labels -->
-  <ion-item>
-    <ion-label>Default Input</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
+## Item Labels
 
-  <ion-item>
-    <ion-label position="fixed">Fixed</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
+import Item from '@site/static/usage/label/item/index.md';
 
-  <ion-item>
-    <ion-label position="floating">Floating</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
+<Item />
 
-  <ion-item>
-    <ion-label position="stacked">Stacked</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
+## Input Labels
 
-  <ion-item>
-    <ion-label>Toggle</ion-label>
-    <ion-toggle slot="end" checked></ion-toggle>
-  </ion-item>
+import Input from '@site/static/usage/label/input/index.md';
 
-  <ion-item>
-    <ion-checkbox slot="start" checked></ion-checkbox>
-    <ion-label>Checkbox</ion-label>
-  </ion-item>
-</template>
+<Input />
 
-<script>
-import { 
-  IonCheckbox, 
-  IonInput, 
-  IonItem, 
-  IonLabel,
-  IonToggle
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
+## Theming
 
-export default defineComponent({
-  components: { 
-    IonCheckbox, 
-    IonInput, 
-    IonItem, 
-    IonLabel,
-    IonToggle
-  }
-});
-</script>
-```
+### Colors
 
+import Colors from '@site/static/usage/label/theming/colors/index.md';
 
-</TabItem>
+<Colors />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -405,4 +63,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/label/basic/angular.md b/static/usage/label/basic/angular.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/label/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-label>Label</ion-label>
+```
diff --git a/static/usage/label/basic/demo.html b/static/usage/label/basic/demo.html
new file mode 100644
index 00000000000..2854a183851
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/label/basic/index.md b/static/usage/label/basic/index.md
new file mode 100644
index 00000000000..f2609779a49
--- /dev/null
+++ b/static/usage/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/label/basic/demo.html" />
diff --git a/static/usage/label/basic/javascript.md b/static/usage/label/basic/javascript.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/label/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-label>Label</ion-label>
+```
diff --git a/static/usage/label/basic/react.md b/static/usage/label/basic/react.md
new file mode 100644
index 00000000000..8eb985452c0
--- /dev/null
+++ b/static/usage/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/label/basic/vue.md b/static/usage/label/basic/vue.md
new file mode 100644
index 00000000000..87f46b68110
--- /dev/null
+++ b/static/usage/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/label/input/angular.md b/static/usage/label/input/angular.md
new file mode 100644
index 00000000000..75278afd44b
--- /dev/null
+++ b/static/usage/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/label/input/demo.html b/static/usage/label/input/demo.html
new file mode 100644
index 00000000000..6aa8cc6288c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/label/input/index.md b/static/usage/label/input/index.md
new file mode 100644
index 00000000000..ff69eb55211
--- /dev/null
+++ b/static/usage/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/label/input/demo.html" size="medium" />
diff --git a/static/usage/label/input/javascript.md b/static/usage/label/input/javascript.md
new file mode 100644
index 00000000000..75278afd44b
--- /dev/null
+++ b/static/usage/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/label/input/react.md b/static/usage/label/input/react.md
new file mode 100644
index 00000000000..ff11fd1f176
--- /dev/null
+++ b/static/usage/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/label/input/vue.md b/static/usage/label/input/vue.md
new file mode 100644
index 00000000000..cd05ef82b44
--- /dev/null
+++ b/static/usage/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/label/item/angular.md b/static/usage/label/item/angular.md
new file mode 100644
index 00000000000..be252b899a0
--- /dev/null
+++ b/static/usage/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/label/item/demo.html b/static/usage/label/item/demo.html
new file mode 100644
index 00000000000..1fe2c7978cc
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/label/item/index.md b/static/usage/label/item/index.md
new file mode 100644
index 00000000000..99035942d7b
--- /dev/null
+++ b/static/usage/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/label/item/demo.html" size="medium" />
diff --git a/static/usage/label/item/javascript.md b/static/usage/label/item/javascript.md
new file mode 100644
index 00000000000..be252b899a0
--- /dev/null
+++ b/static/usage/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/label/item/react.md b/static/usage/label/item/react.md
new file mode 100644
index 00000000000..88e4f904deb
--- /dev/null
+++ b/static/usage/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/label/item/vue.md b/static/usage/label/item/vue.md
new file mode 100644
index 00000000000..99ec3ea3d40
--- /dev/null
+++ b/static/usage/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/label/theming/colors/angular.md b/static/usage/label/theming/colors/angular.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/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/label/theming/colors/demo.html b/static/usage/label/theming/colors/demo.html
new file mode 100644
index 00000000000..f59d500d888
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/label/theming/colors/index.md b/static/usage/label/theming/colors/index.md
new file mode 100644
index 00000000000..16ab86412d7
--- /dev/null
+++ b/static/usage/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/label/theming/colors/demo.html" />
diff --git a/static/usage/label/theming/colors/javascript.md b/static/usage/label/theming/colors/javascript.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/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/label/theming/colors/react.md b/static/usage/label/theming/colors/react.md
new file mode 100644
index 00000000000..6680a644fb6
--- /dev/null
+++ b/static/usage/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/label/theming/colors/vue.md b/static/usage/label/theming/colors/vue.md
new file mode 100644
index 00000000000..da18a00d4d1
--- /dev/null
+++ b/static/usage/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>
+```

From 9ede9a3bc54013dea6211dbe4cf01aab89b6efb2 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 8 Sep 2022 13:43:29 -0400
Subject: [PATCH 039/469] fix(docs): TOC navigation renders correct headings
 (#2539)

---
 docs/api/accordion-group.md                   |  7 ++--
 docs/api/action-sheet.md                      |  5 ++-
 docs/api/app.md                               |  5 ++-
 docs/api/back-button.md                       |  5 ++-
 docs/api/backdrop.md                          |  7 ++--
 docs/api/breadcrumb.md                        |  7 ++--
 docs/api/button.md                            | 10 +++---
 docs/api/buttons.md                           |  5 ++-
 docs/api/card-content.md                      |  9 ++---
 docs/api/card-header.md                       |  7 ++--
 docs/api/card-subtitle.md                     |  7 ++--
 docs/api/card-title.md                        |  9 +++--
 docs/api/card.md                              |  9 +++--
 docs/api/checkbox.md                          |  1 -
 docs/api/col.md                               |  5 ++-
 docs/api/content.md                           |  5 ++-
 docs/api/fab-button.md                        |  5 ++-
 docs/api/fab-list.md                          |  7 ++--
 docs/api/fab.md                               |  5 ++-
 docs/api/footer.md                            |  6 ++--
 docs/api/grid.md                              |  5 ++-
 docs/api/header.md                            |  7 ++--
 docs/api/img.md                               |  5 ++-
 docs/api/infinite-scroll-content.md           |  9 ++---
 docs/api/infinite-scroll.md                   |  4 +--
 docs/api/input.md                             |  5 ++-
 docs/api/item-divider.md                      |  4 +--
 docs/api/item-group.md                        |  7 ++--
 docs/api/item-option.md                       |  5 ++-
 docs/api/item-options.md                      |  6 ++--
 docs/api/item-sliding.md                      |  5 ++-
 docs/api/item.md                              |  5 ++-
 docs/api/list-header.md                       |  7 ++--
 docs/api/list.md                              |  6 ++--
 docs/api/menu-button.md                       |  5 ++-
 docs/api/menu-toggle.md                       |  5 ++-
 docs/api/menu.md                              |  5 ++-
 docs/api/nav-link.md                          |  7 ++--
 docs/api/nav.md                               |  6 ++--
 docs/api/note.md                              |  5 ++-
 docs/api/progress-bar.md                      |  5 ++-
 docs/api/radio-group.md                       |  7 ++--
 docs/api/radio.md                             |  5 ++-
 docs/api/refresher-content.md                 |  7 ++--
 docs/api/refresher.md                         |  6 ++--
 docs/api/reorder-group.md                     |  6 ++--
 docs/api/reorder.md                           |  5 ++-
 docs/api/ripple-effect.md                     |  9 +++--
 docs/api/route-redirect.md                    |  6 ++--
 docs/api/route.md                             |  6 ++--
 docs/api/router-link.md                       |  5 ++-
 docs/api/router-outlet.md                     |  5 ++-
 docs/api/router.md                            |  5 ++-
 docs/api/row.md                               |  5 ++-
 docs/api/searchbar.md                         |  5 ++-
 docs/api/segment-button.md                    |  5 ++-
 docs/api/segment.md                           |  5 ++-
 docs/api/select-option.md                     |  5 ++-
 docs/api/slide.md                             |  5 ++-
 docs/api/slides.md                            |  6 ++--
 docs/api/spinner.md                           |  5 ++-
 docs/api/split-pane.md                        |  5 ++-
 docs/api/tab-bar.md                           |  5 ++-
 docs/api/tab-button.md                        |  5 ++-
 docs/api/tab.md                               |  5 ++-
 docs/api/tabs.md                              |  5 ++-
 docs/api/textarea.md                          |  5 ++-
 docs/api/title.md                             |  5 ++-
 docs/api/toggle.md                            |  5 ++-
 docs/api/toolbar.md                           |  5 ++-
 docs/api/virtual-scroll.md                    |  6 ++--
 scripts/api-playground-init.js                |  5 ++-
 .../page/api/APITOCInline/index.tsx           | 35 -------------------
 73 files changed, 149 insertions(+), 299 deletions(-)
 delete mode 100644 src/components/page/api/APITOCInline/index.tsx

diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index aa3020206b8..c623b749b12 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -4,6 +4,7 @@ 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/accordion-group/props.md';
 import Events from '@site/static/auto-generated/accordion-group/events.md';
@@ -12,19 +13,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 69135c3d513..5245548a7c9 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/action-sheet/props.md';
 import Events from '@site/static/auto-generated/action-sheet/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/action-sheet/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/app.md b/docs/api/app.md
index 2e0645a063d..aa500d8cdff 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -4,6 +4,7 @@ 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/app/props.md';
 import Events from '@site/static/auto-generated/app/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/app/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 615a04c61ee..89ae57ad0ee 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 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';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/back-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index 177cd990b0d..9a1cc9a01a2 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/backdrop/props.md';
 import Events from '@site/static/auto-generated/backdrop/events.md';
@@ -14,19 +15,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index 799cc91a3e7..d2772cbe493 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -4,6 +4,7 @@ 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/breadcrumb/props.md';
 import Events from '@site/static/auto-generated/breadcrumb/events.md';
@@ -12,19 +13,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/button.md b/docs/api/button.md
index 17834e8ba83..cc1630a1d44 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/button/props.md';
 import Events from '@site/static/auto-generated/button/events.md';
@@ -14,26 +15,23 @@ 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';
 
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
 <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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
-
-
 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.
 
 ## Expand
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 7e247b828ec..4bebd69b8ea 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -4,6 +4,7 @@ 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/buttons/props.md';
 import Events from '@site/static/auto-generated/buttons/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/buttons/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index 75d361f515b..487697a1e51 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -4,6 +4,7 @@ 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/card-content/props.md';
 import Events from '@site/static/auto-generated/card-content/events.md';
@@ -12,19 +13,13 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index 88dceee3cb7..561969dcc40 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -4,6 +4,7 @@ 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/card-header/props.md';
 import Events from '@site/static/auto-generated/card-header/events.md';
@@ -12,19 +13,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index 11fbe3a3e77..23d338d74d5 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -4,6 +4,7 @@ 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/card-subtitle/props.md';
 import Events from '@site/static/auto-generated/card-subtitle/events.md';
@@ -12,19 +13,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 096a7a7219a..ea8baee1541 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -4,6 +4,7 @@ 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/card-title/props.md';
 import Events from '@site/static/auto-generated/card-title/events.md';
@@ -12,22 +13,20 @@ 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>
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card.md b/docs/api/card.md
index 48afa83b762..d6a7e93a506 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/card/props.md';
 import Events from '@site/static/auto-generated/card/events.md';
@@ -14,22 +15,20 @@ 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>
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 6b15c69765b..5fbda397bc0 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -15,7 +15,6 @@ import Slots from '@site/static/auto-generated/checkbox/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/col.md b/docs/api/col.md
index 7b990adf3fc..42912662e71 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -4,6 +4,7 @@ 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/col/props.md';
 import Events from '@site/static/auto-generated/col/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/col/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/content.md b/docs/api/content.md
index ee2c258044c..add18a8e3f6 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/content/props.md';
 import Events from '@site/static/auto-generated/content/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/content/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index ae84d8c2d7c..94b2421bee2 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -4,6 +4,7 @@ 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/fab-button/props.md';
 import Events from '@site/static/auto-generated/fab-button/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/fab-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index 99b7b7ddb18..f74f89eb1e6 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -4,6 +4,7 @@ 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/fab-list/props.md';
 import Events from '@site/static/auto-generated/fab-list/events.md';
@@ -12,19 +13,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 6c8edec36cd..dec144aa20d 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/fab/props.md';
 import Events from '@site/static/auto-generated/fab/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/fab/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/footer.md b/docs/api/footer.md
index c25ef97b48b..b84948be28a 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -4,6 +4,7 @@ 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/footer/props.md';
 import Events from '@site/static/auto-generated/footer/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/footer/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/grid.md b/docs/api/grid.md
index 000dcc16283..cf46fc98e81 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/grid/props.md';
 import Events from '@site/static/auto-generated/grid/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/grid/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/header.md b/docs/api/header.md
index c692ddedad1..81d742c0f31 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -4,6 +4,7 @@ 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/header/props.md';
 import Events from '@site/static/auto-generated/header/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/header/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/img.md b/docs/api/img.md
index 410fa0a90fb..3b0b3e4a30d 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -4,6 +4,7 @@ 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/img/props.md';
 import Events from '@site/static/auto-generated/img/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/img/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md
index 02c077e7596..4210400d911 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.md
@@ -4,6 +4,7 @@ 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/infinite-scroll-content/props.md';
 import Events from '@site/static/auto-generated/infinite-scroll-content/events.md';
@@ -12,19 +13,13 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index f45ba5b3e80..8515c816ab5 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/infinite-scroll/props.md';
 import Events from '@site/static/auto-generated/infinite-scroll/events.md';
@@ -20,13 +21,12 @@ import Slots from '@site/static/auto-generated/infinite-scroll/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
   autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
diff --git a/docs/api/input.md b/docs/api/input.md
index 53686f74f57..1dd3b8cb3d6 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/input/props.md';
 import Events from '@site/static/auto-generated/input/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/input/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 6b99a537c9f..dc63b122aa1 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -18,16 +18,14 @@ import Slots from '@site/static/auto-generated/item-divider/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 0ee07c99ffb..9a110fa7ecf 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -4,6 +4,7 @@ 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/item-group/props.md';
 import Events from '@site/static/auto-generated/item-group/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/item-group/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index ef012820497..54a92feb8d0 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -4,6 +4,7 @@ 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/item-option/props.md';
 import Events from '@site/static/auto-generated/item-option/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/item-option/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index d73d1dc5d57..086df2b1bb6 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -4,6 +4,7 @@ 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/item-options/props.md';
 import Events from '@site/static/auto-generated/item-options/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/item-options/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index fc9fa85a117..badc345cf0e 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -4,6 +4,7 @@ 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/item-sliding/props.md';
 import Events from '@site/static/auto-generated/item-sliding/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/item-sliding/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item.md b/docs/api/item.md
index f0ffefc9f1a..107764b2264 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/item/props.md';
 import Events from '@site/static/auto-generated/item/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/item/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 666f90e7699..117c4c1ad44 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -4,6 +4,7 @@ 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/list-header/props.md';
 import Events from '@site/static/auto-generated/list-header/events.md';
@@ -12,19 +13,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/list.md b/docs/api/list.md
index 2ca87ee4274..1b2d149d4a3 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/list/props.md';
 import Events from '@site/static/auto-generated/list/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/list/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index 39080919e9a..e4e10198f8d 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -4,6 +4,7 @@ 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/menu-button/props.md';
 import Events from '@site/static/auto-generated/menu-button/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/menu-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 3d1fa90bcad..c68df94d1ca 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -4,6 +4,7 @@ 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/menu-toggle/props.md';
 import Events from '@site/static/auto-generated/menu-toggle/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/menu-toggle/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 06da15d9de4..81f3b26337d 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/menu/props.md';
 import Events from '@site/static/auto-generated/menu/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/menu/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 76161afb226..d0e38399092 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -4,6 +4,7 @@ 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/nav-link/props.md';
 import Events from '@site/static/auto-generated/nav-link/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/nav-link/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 68fefd1fec1..0903afbab34 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/nav/props.md';
 import Events from '@site/static/auto-generated/nav/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/nav/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/note.md b/docs/api/note.md
index 74f532882d4..23606008724 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/note/props.md';
 import Events from '@site/static/auto-generated/note/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/note/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 2534c34d4e4..474e390ebf1 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/progress-bar/props.md';
 import Events from '@site/static/auto-generated/progress-bar/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/progress-bar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index db0e8c50e2d..6f7d717ca35 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -4,6 +4,7 @@ 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/radio-group/props.md';
 import Events from '@site/static/auto-generated/radio-group/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/radio-group/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 7814629570e..ab96264fff1 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/radio/props.md';
 import Events from '@site/static/auto-generated/radio/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/radio/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 837090b7880..950df33fbf9 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -4,6 +4,7 @@ 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/refresher-content/props.md';
 import Events from '@site/static/auto-generated/refresher-content/events.md';
@@ -12,19 +13,15 @@ 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';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 3e74f331e33..e0ada62c6e8 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/refresher/props.md';
 import Events from '@site/static/auto-generated/refresher/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/refresher/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index a82e419cb2e..ae4d0475e64 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -4,6 +4,7 @@ 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/reorder-group/props.md';
 import Events from '@site/static/auto-generated/reorder-group/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/reorder-group/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 1b63f0874eb..b068945c2ff 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/reorder/props.md';
 import Events from '@site/static/auto-generated/reorder/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/reorder/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 8388c6670af..690bee9ffbc 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -4,6 +4,7 @@ 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/ripple-effect/props.md';
 import Events from '@site/static/auto-generated/ripple-effect/events.md';
@@ -12,22 +13,20 @@ 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>
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index beff634f922..8c98cef2c2e 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -4,6 +4,7 @@ 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-redirect/props.md';
 import Events from '@site/static/auto-generated/route-redirect/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/route-redirect/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/route.md b/docs/api/route.md
index 3c8764727ab..52e2e294a2a 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -4,6 +4,7 @@ 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';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/route/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index ac7b3786de1..5d7d812ecfc 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+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';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/router-link/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md
index 7f4438819bd..f733b0c1248 100644
--- a/docs/api/router-outlet.md
+++ b/docs/api/router-outlet.md
@@ -4,6 +4,7 @@ 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/router-outlet/props.md';
 import Events from '@site/static/auto-generated/router-outlet/events.md';
@@ -15,16 +16,14 @@ import Slots from '@site/static/auto-generated/router-outlet/slots.md';
 
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/router.md b/docs/api/router.md
index cadfea87581..9684f77170a 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -4,6 +4,7 @@ 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/router/props.md';
 import Events from '@site/static/auto-generated/router/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/router/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/row.md b/docs/api/row.md
index 4642f474f28..c150d7d09a1 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -4,6 +4,7 @@ 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/row/props.md';
 import Events from '@site/static/auto-generated/row/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/row/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index 9461f424ce6..7e364f4c862 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/searchbar/props.md';
 import Events from '@site/static/auto-generated/searchbar/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/searchbar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index cc89dddc90b..bb2724f20b1 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -4,6 +4,7 @@ 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/segment-button/props.md';
 import Events from '@site/static/auto-generated/segment-button/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/segment-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/segment.md b/docs/api/segment.md
index 75c47759916..f7d2567c28b 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/segment/props.md';
 import Events from '@site/static/auto-generated/segment/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/segment/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index f26ce97edab..19496f85a5f 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -4,6 +4,7 @@ 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/select-option/props.md';
 import Events from '@site/static/auto-generated/select-option/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/select-option/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/slide.md b/docs/api/slide.md
index eccb4af0f7f..41a28cbc57c 100644
--- a/docs/api/slide.md
+++ b/docs/api/slide.md
@@ -4,6 +4,7 @@ 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/slide/props.md';
 import Events from '@site/static/auto-generated/slide/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/slide/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/slides.md b/docs/api/slides.md
index 5aaacdc85a0..6c227cdc423 100644
--- a/docs/api/slides.md
+++ b/docs/api/slides.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/slides/props.md';
 import Events from '@site/static/auto-generated/slides/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/slides/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index f2b843241a5..f3d22322154 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/spinner/props.md';
 import Events from '@site/static/auto-generated/spinner/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/spinner/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index ef32a396e06..4c992665270 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -4,6 +4,7 @@ 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/split-pane/props.md';
 import Events from '@site/static/auto-generated/split-pane/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/split-pane/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index f75ca44d985..491a74b30d2 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -4,6 +4,7 @@ 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';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/tab-bar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index 07ab7b202e5..4c6b7a26f3d 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -4,6 +4,7 @@ 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';
@@ -15,16 +16,14 @@ import Slots from '@site/static/auto-generated/tab-button/slots.md';
 
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tab.md b/docs/api/tab.md
index 6885b5401f4..cbdd6d16333 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -4,6 +4,7 @@ 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/props.md';
 import Events from '@site/static/auto-generated/tab/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/tab/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 2971127450c..e12003025f7 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 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';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/tabs/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 50e39fa33b1..9f225b49a71 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -4,6 +4,7 @@ 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/textarea/props.md';
 import Events from '@site/static/auto-generated/textarea/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/textarea/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/title.md b/docs/api/title.md
index d29fcdf210d..e4fd4103366 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -4,6 +4,7 @@ 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/title/props.md';
 import Events from '@site/static/auto-generated/title/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/title/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index c7038ff7208..29587289ed2 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/toggle/props.md';
 import Events from '@site/static/auto-generated/toggle/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/toggle/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index e9401c05480..8056b27fa50 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/toolbar/props.md';
 import Events from '@site/static/auto-generated/toolbar/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/toolbar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/virtual-scroll.md b/docs/api/virtual-scroll.md
index 102220df3fb..dc041724c4d 100644
--- a/docs/api/virtual-scroll.md
+++ b/docs/api/virtual-scroll.md
@@ -4,6 +4,7 @@ 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/virtual-scroll/props.md';
 import Events from '@site/static/auto-generated/virtual-scroll/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/scripts/api-playground-init.js b/scripts/api-playground-init.js
index 6879486e5d2..c979662dbfd 100644
--- a/scripts/api-playground-init.js
+++ b/scripts/api-playground-init.js
@@ -82,6 +82,7 @@ ${Object.entries(frontmatter)
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/${tag.slice(4)}/props.md';
 import Events from '@site/static/auto-generated/${tag.slice(4)}/events.md';
@@ -104,16 +105,14 @@ function renderReadme({ readme, encapsulation }) {
 
   return `
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 ${encapsulation !== 'none' ? `<EncapsulationPill type="${encapsulation}" />` : ''}
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 ${addAdmonitions(rest)}
diff --git a/src/components/page/api/APITOCInline/index.tsx b/src/components/page/api/APITOCInline/index.tsx
deleted file mode 100644
index 4ab6fd9c586..00000000000
--- a/src/components/page/api/APITOCInline/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import TOCInline from '@theme/TOCInline';
-
-/**
- * Docusaurus has an issue with parsing custom headings in markdown files that are introduced
- * from importing another MDX file.
- * - https://github.com/facebook/docusaurus/issues/3915
- * - https://github.com/facebook/docusaurus/issues/6201
- *
- * This component is a workaround for this issue.
- *
- * This component accepts the autogenerated markdown files and reads their contents
- * to autogenerate TOC items in the primary TOC.
- *
- * Markdown files without contents are ignored.
- */
-export default function APITocInline({ toc, minHeadingLevel, maxHeadingLevel, autogenerated }): JSX.Element {
-  for (const mdxContent of autogenerated) {
-    const contents = mdxContent({});
-    if (contents?.props?.children?.length > 0) {
-      const id = contents.props.children[0].props.id;
-      const value = contents.props.children[0].props.children;
-
-      if (!toc.find((item) => item.id === id)) {
-        toc.push({
-          id,
-          value,
-          level: 2,
-          children: [],
-        });
-      }
-    }
-  }
-  return <TOCInline toc={toc} minHeadingLevel={minHeadingLevel} maxHeadingLevel={maxHeadingLevel} />;
-}

From 3b72cad7d678a9becb5a83d86efcc5ddadb8474f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 9 Sep 2022 11:10:11 -0400
Subject: [PATCH 040/469] docs(native/iamport): add description for cordova
 plugin (#2540)

---
 scripts/data/native.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/data/native.json b/scripts/data/native.json
index 994f53ddaca..cc66702a2d3 100644
--- a/scripts/data/native.json
+++ b/scripts/data/native.json
@@ -1465,7 +1465,7 @@
   {
     "packageName": "@awesome-cordova-plugins/iamport-cordova",
     "displayName": "Iamport Cordova",
-    "description": "\nThis plugin does something\n",
+    "description": "\nCordova plugin that integrates with and handles multiple payment gateways.\n",
     "usage": "\n```typescript\nimport { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx';\n\n\nconstructor(private iamportCordova: IamportCordova) { }\n\n...\n\n\nthis.iamportCordova.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "ios",

From 4ecd1f4359412861aedc9cdd99da6b4cea697e40 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 9 Sep 2022 12:47:45 -0400
Subject: [PATCH 041/469] docs(note): add note component playgrounds (#2535)

---
 docs/api/note.md                              | 211 ++----------------
 static/usage/note/basic/angular.md            |   3 +
 static/usage/note/basic/demo.html             |  25 +++
 static/usage/note/basic/index.md              |   8 +
 static/usage/note/basic/javascript.md         |   3 +
 static/usage/note/basic/react.md              |  13 ++
 static/usage/note/basic/vue.md                |  14 ++
 static/usage/note/item/angular.md             |  11 +
 static/usage/note/item/demo.html              |  38 ++++
 static/usage/note/item/index.md               |   8 +
 static/usage/note/item/javascript.md          |  11 +
 static/usage/note/item/react.md               |  21 ++
 static/usage/note/item/vue.md                 |  22 ++
 static/usage/note/theming/colors/angular.md   |  12 +
 static/usage/note/theming/colors/demo.html    |  49 ++++
 static/usage/note/theming/colors/index.md     |   8 +
 .../usage/note/theming/colors/javascript.md   |  12 +
 static/usage/note/theming/colors/react.md     |  22 ++
 static/usage/note/theming/colors/vue.md       |  23 ++
 .../angular/example_component_css.md          |   5 +
 .../angular/example_component_html.md         |   3 +
 .../note/theming/css-properties/demo.html     |  30 +++
 .../note/theming/css-properties/index.md      |  31 +++
 .../note/theming/css-properties/javascript.md |   9 +
 .../theming/css-properties/react/main_css.md  |   5 +
 .../theming/css-properties/react/main_tsx.md  |  15 ++
 .../usage/note/theming/css-properties/vue.md  |  20 ++
 27 files changed, 436 insertions(+), 196 deletions(-)
 create mode 100644 static/usage/note/basic/angular.md
 create mode 100644 static/usage/note/basic/demo.html
 create mode 100644 static/usage/note/basic/index.md
 create mode 100644 static/usage/note/basic/javascript.md
 create mode 100644 static/usage/note/basic/react.md
 create mode 100644 static/usage/note/basic/vue.md
 create mode 100644 static/usage/note/item/angular.md
 create mode 100644 static/usage/note/item/demo.html
 create mode 100644 static/usage/note/item/index.md
 create mode 100644 static/usage/note/item/javascript.md
 create mode 100644 static/usage/note/item/react.md
 create mode 100644 static/usage/note/item/vue.md
 create mode 100644 static/usage/note/theming/colors/angular.md
 create mode 100644 static/usage/note/theming/colors/demo.html
 create mode 100644 static/usage/note/theming/colors/index.md
 create mode 100644 static/usage/note/theming/colors/javascript.md
 create mode 100644 static/usage/note/theming/colors/react.md
 create mode 100644 static/usage/note/theming/colors/vue.md
 create mode 100644 static/usage/note/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/note/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/note/theming/css-properties/demo.html
 create mode 100644 static/usage/note/theming/css-properties/index.md
 create mode 100644 static/usage/note/theming/css-properties/javascript.md
 create mode 100644 static/usage/note/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/note/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/note/theming/css-properties/vue.md

diff --git a/docs/api/note.md b/docs/api/note.md
index 23606008724..fa25e670eeb 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-note"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/note/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/note/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,208 +17,34 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text.
-
-
-
-
-## 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 Note -->
-<ion-note>Default Note</ion-note>
-
-<!-- Note Colors -->
-<ion-note color="primary">Primary Note</ion-note>
-<ion-note color="secondary">Secondary Note</ion-note>
-<ion-note color="danger">Danger Note</ion-note>
-<ion-note color="light">Light Note</ion-note>
-<ion-note color="dark">Dark Note</ion-note>
-
-<!-- Notes in a List -->
-<ion-list>
-  <ion-item>
-    <ion-label>Note (End)</ion-label>
-    <ion-note slot="end">On</ion-note>
-  </ion-item>
-
-  <ion-item>
-    <ion-note slot="start">Off</ion-note>
-    <ion-label>Note (Start)</ion-label>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
+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.
 
-<TabItem value="javascript">
+## Basic Usage
 
-```html
-<!-- Default Note -->
-<ion-note>Default Note</ion-note>
+import Basic from '@site/static/usage/note/basic/index.md';
 
-<!-- Note Colors -->
-<ion-note color="primary">Primary Note</ion-note>
-<ion-note color="secondary">Secondary Note</ion-note>
-<ion-note color="danger">Danger Note</ion-note>
-<ion-note color="light">Light Note</ion-note>
-<ion-note color="dark">Dark Note</ion-note>
+<Basic />
 
-<!-- Notes in a List -->
-<ion-list>
-  <ion-item>
-    <ion-label>Note (End)</ion-label>
-    <ion-note slot="end">On</ion-note>
-  </ion-item>
+## Item Notes
 
-  <ion-item>
-    <ion-note slot="start">Off</ion-note>
-    <ion-label>Note (Start)</ion-label>
-  </ion-item>
-</ion-list>
-```
+import Item from '@site/static/usage/note/item/index.md';
 
+<Item />
 
-</TabItem>
+## Theming
 
+### Colors
 
-<TabItem value="react">
+import Colors from '@site/static/usage/note/theming/colors/index.md';
 
-```tsx
-import React from 'react';
-import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
+<Colors />
 
-export const NoteExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default Note --*/}
-    <IonNote>Default Note</IonNote><br />
+### CSS Custom Properties
 
-    {/*-- Note Colors --*/}
-    <IonNote color="primary">Primary Note</IonNote><br />
-    <IonNote color="secondary">Secondary Note</IonNote><br />
-    <IonNote color="danger">Danger Note</IonNote><br />
-    <IonNote color="light">Light Note</IonNote><br />
-    <IonNote color="dark">Dark Note</IonNote><br />
+import CSSProps from '@site/static/usage/note/theming/css-properties/index.md';
 
-    {/*-- Notes in a List --*/}
-    <IonList>
-      <IonItem>
-        <IonLabel>Note (End)</IonLabel>
-        <IonNote slot="end">On</IonNote>
-      </IonItem>
+<CSSProps />
 
-      <IonItem>
-        <IonNote slot="start">Off</IonNote>
-        <IonLabel>Note (Start)</IonLabel>
-      </IonItem>
-    </IonList>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'note-example',
-  styleUrl: 'note-example.css'
-})
-export class NoteExample {
-  render() {
-    return [
-      // Default Note
-      <ion-note>Default Note</ion-note>,
-
-      // Note Colors
-      <ion-note color="primary">Primary Note</ion-note>,
-      <ion-note color="secondary">Secondary Note</ion-note>,
-      <ion-note color="danger">Danger Note</ion-note>,
-      <ion-note color="light">Light Note</ion-note>,
-      <ion-note color="dark">Dark Note</ion-note>,
-
-      // Notes in a List
-      <ion-list>
-        <ion-item>
-          <ion-label>Note (End)</ion-label>
-          <ion-note slot="end">On</ion-note>
-        </ion-item>
-
-        <ion-item>
-          <ion-note slot="start">Off</ion-note>
-          <ion-label>Note (Start)</ion-label>
-        </ion-item>
-      </ion-list>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Note -->
-  <ion-note>Default Note</ion-note>
-
-  <!-- Note Colors -->
-  <ion-note color="primary">Primary Note</ion-note>
-  <ion-note color="secondary">Secondary Note</ion-note>
-  <ion-note color="danger">Danger Note</ion-note>
-  <ion-note color="light">Light Note</ion-note>
-  <ion-note color="dark">Dark Note</ion-note>
-
-  <!-- Notes in a List -->
-  <ion-list>
-    <ion-item>
-      <ion-label>Note (End)</ion-label>
-      <ion-note slot="end">On</ion-note>
-    </ion-item>
-
-    <ion-item>
-      <ion-note slot="start">Off</ion-note>
-      <ion-label>Note (Start)</ion-label>
-    </ion-item>
-  </ion-list>
-</template>
-
-<script>
-import { IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonItem, IonLabel, IonList, IonNote }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -243,4 +62,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/note/basic/angular.md b/static/usage/note/basic/angular.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/note/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-note>Default Note</ion-note>
+```
diff --git a/static/usage/note/basic/demo.html b/static/usage/note/basic/demo.html
new file mode 100644
index 00000000000..ab305da8799
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/note/basic/index.md b/static/usage/note/basic/index.md
new file mode 100644
index 00000000000..0bda4adefaf
--- /dev/null
+++ b/static/usage/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/note/basic/demo.html" />
diff --git a/static/usage/note/basic/javascript.md b/static/usage/note/basic/javascript.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/note/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-note>Default Note</ion-note>
+```
diff --git a/static/usage/note/basic/react.md b/static/usage/note/basic/react.md
new file mode 100644
index 00000000000..9f1cdb45225
--- /dev/null
+++ b/static/usage/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/note/basic/vue.md b/static/usage/note/basic/vue.md
new file mode 100644
index 00000000000..dffb1348fc9
--- /dev/null
+++ b/static/usage/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/note/item/angular.md b/static/usage/note/item/angular.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/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/note/item/demo.html b/static/usage/note/item/demo.html
new file mode 100644
index 00000000000..18c46c3f605
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/note/item/index.md b/static/usage/note/item/index.md
new file mode 100644
index 00000000000..f6ce753068b
--- /dev/null
+++ b/static/usage/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/note/item/demo.html" />
diff --git a/static/usage/note/item/javascript.md b/static/usage/note/item/javascript.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/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/note/item/react.md b/static/usage/note/item/react.md
new file mode 100644
index 00000000000..422ba6eff85
--- /dev/null
+++ b/static/usage/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/note/item/vue.md b/static/usage/note/item/vue.md
new file mode 100644
index 00000000000..24b7add1ed1
--- /dev/null
+++ b/static/usage/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/note/theming/colors/angular.md b/static/usage/note/theming/colors/angular.md
new file mode 100644
index 00000000000..2740648d5ad
--- /dev/null
+++ b/static/usage/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/note/theming/colors/demo.html b/static/usage/note/theming/colors/demo.html
new file mode 100644
index 00000000000..48d74a3757f
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/note/theming/colors/index.md b/static/usage/note/theming/colors/index.md
new file mode 100644
index 00000000000..72f81406a9e
--- /dev/null
+++ b/static/usage/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/note/theming/colors/demo.html" />
diff --git a/static/usage/note/theming/colors/javascript.md b/static/usage/note/theming/colors/javascript.md
new file mode 100644
index 00000000000..2740648d5ad
--- /dev/null
+++ b/static/usage/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/note/theming/colors/react.md b/static/usage/note/theming/colors/react.md
new file mode 100644
index 00000000000..0f17783c5c6
--- /dev/null
+++ b/static/usage/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/note/theming/colors/vue.md b/static/usage/note/theming/colors/vue.md
new file mode 100644
index 00000000000..77e767a5e5f
--- /dev/null
+++ b/static/usage/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/note/theming/css-properties/angular/example_component_css.md b/static/usage/note/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/note/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/note/theming/css-properties/angular/example_component_html.md b/static/usage/note/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/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/note/theming/css-properties/demo.html b/static/usage/note/theming/css-properties/demo.html
new file mode 100644
index 00000000000..31feba5ab0d
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/note/theming/css-properties/index.md b/static/usage/note/theming/css-properties/index.md
new file mode 100644
index 00000000000..ffd7a95c81f
--- /dev/null
+++ b/static/usage/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/note/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/note/theming/css-properties/javascript.md b/static/usage/note/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..cc1bdeec421
--- /dev/null
+++ b/static/usage/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/note/theming/css-properties/react/main_css.md b/static/usage/note/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/note/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/note/theming/css-properties/react/main_tsx.md b/static/usage/note/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..798b6ab90d1
--- /dev/null
+++ b/static/usage/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/note/theming/css-properties/vue.md b/static/usage/note/theming/css-properties/vue.md
new file mode 100644
index 00000000000..77e8b361f2c
--- /dev/null
+++ b/static/usage/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>
+```

From c00141092b16256d1f190c8897c15b2152e5ce81 Mon Sep 17 00:00:00 2001
From: moiseyser <moiseyser@gmail.com>
Date: Fri, 9 Sep 2022 20:07:32 +0300
Subject: [PATCH 042/469] docs(your-first-app): Replace Storage with
 Preferences (#2533)

---
 docs/vue/your-first-app/5-adding-mobile.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.md
index 28c60aa6bf3..728e1ffb83c 100644
--- a/docs/vue/your-first-app/5-adding-mobile.md
+++ b/docs/vue/your-first-app/5-adding-mobile.md
@@ -57,7 +57,7 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
 
 ```tsx
 const loadSaved = async () => {
-  const photoList = await Storage.get({ key: PHOTO_STORAGE });
+  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
   const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
   // If running on the web...

From 3ade322d6a981972479b6712fd3b6dacec378a40 Mon Sep 17 00:00:00 2001
From: Jedidiah Weller <996175+jedihacks@users.noreply.github.com>
Date: Fri, 9 Sep 2022 13:35:28 -0400
Subject: [PATCH 043/469] docs(desktop-app): Update link to electron first app
 tutorial (#2541)

---
 docs/deployment/desktop-app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/deployment/desktop-app.md b/docs/deployment/desktop-app.md
index d9ff4969710..517b16d4c15 100644
--- a/docs/deployment/desktop-app.md
+++ b/docs/deployment/desktop-app.md
@@ -11,7 +11,7 @@ sidebar_label: Electron Desktop App
   />
 </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://electronjs.org/docs/tutorial/first-app" target="_blank">Electron guide</a>.
+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
 

From 15a2bcab91fcbccc79850da9e6d35fde9d70d8e0 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 9 Sep 2022 16:28:48 -0400
Subject: [PATCH 044/469] docs(nav): component playground examples (#2542)

---
 docs/api/nav-link.md                          |   2 +
 docs/api/nav.md                               |  16 +--
 .../code/stackblitz/react/package-lock.json   |  42 +++----
 .../modal-navigation/angular/app_module_ts.md |  21 ++++
 .../angular/example_component_html.md         |  25 +++++
 .../angular/example_component_ts.md           |  18 +++
 .../angular/page_one_component_ts.md          |  23 ++++
 .../angular/page_three_component_ts.md        |  26 +++++
 .../angular/page_two_component_ts.md          |  25 +++++
 static/usage/nav/modal-navigation/demo.html   | 106 ++++++++++++++++++
 static/usage/nav/modal-navigation/index.md    |  55 +++++++++
 .../usage/nav/modal-navigation/javascript.md  |  86 ++++++++++++++
 .../nav/modal-navigation/react/main_tsx.md    |  60 ++++++++++
 .../modal-navigation/react/page_one_tsx.md    |  18 +++
 .../modal-navigation/react/page_three_tsx.md  |  19 ++++
 .../modal-navigation/react/page_two_tsx.md    |  19 ++++
 .../nav/modal-navigation/vue/example_vue.md   |  60 ++++++++++
 .../nav/modal-navigation/vue/page_one_vue.md  |  24 ++++
 .../modal-navigation/vue/page_three_vue.md    |  28 +++++
 .../nav/modal-navigation/vue/page_two_vue.md  |  24 ++++
 .../nav/nav-link/angular/app_module_ts.md     |  21 ++++
 .../angular/example_component_html.md         |   3 +
 .../nav-link/angular/example_component_ts.md  |  13 +++
 .../nav-link/angular/page_one_component_ts.md |  25 +++++
 .../angular/page_three_component_ts.md        |  21 ++++
 .../nav-link/angular/page_two_component_ts.md |  30 +++++
 static/usage/nav/nav-link/demo.html           |  84 ++++++++++++++
 static/usage/nav/nav-link/index.md            |  54 +++++++++
 static/usage/nav/nav-link/javascript.md       |  67 +++++++++++
 static/usage/nav/nav-link/react/main_tsx.md   |  11 ++
 .../usage/nav/nav-link/react/page_one_tsx.md  |  26 +++++
 .../nav/nav-link/react/page_three_tsx.md      |  24 ++++
 .../usage/nav/nav-link/react/page_two_tsx.md  |  38 +++++++
 static/usage/nav/nav-link/vue/example_vue.md  |  19 ++++
 static/usage/nav/nav-link/vue/page_one_vue.md |  29 +++++
 .../usage/nav/nav-link/vue/page_three_vue.md  |  23 ++++
 static/usage/nav/nav-link/vue/page_two_vue.md |  50 +++++++++
 37 files changed, 1204 insertions(+), 31 deletions(-)
 create mode 100644 static/usage/nav/modal-navigation/angular/app_module_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/example_component_html.md
 create mode 100644 static/usage/nav/modal-navigation/angular/example_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_one_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_three_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_two_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/demo.html
 create mode 100644 static/usage/nav/modal-navigation/index.md
 create mode 100644 static/usage/nav/modal-navigation/javascript.md
 create mode 100644 static/usage/nav/modal-navigation/react/main_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_one_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_three_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_two_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/vue/example_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_one_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_three_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_two_vue.md
 create mode 100644 static/usage/nav/nav-link/angular/app_module_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/example_component_html.md
 create mode 100644 static/usage/nav/nav-link/angular/example_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_one_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_three_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_two_component_ts.md
 create mode 100644 static/usage/nav/nav-link/demo.html
 create mode 100644 static/usage/nav/nav-link/index.md
 create mode 100644 static/usage/nav/nav-link/javascript.md
 create mode 100644 static/usage/nav/nav-link/react/main_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_one_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_three_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_two_tsx.md
 create mode 100644 static/usage/nav/nav-link/vue/example_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_one_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_three_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_two_vue.md

diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index d0e38399092..89fd038f890 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -33,6 +33,8 @@ A navigation link is used to navigate to a specified component. The component ca
 
 It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.
 
+For an example of how to use `ion-nav-link`, visit the [`ion-nav` docs](./nav#using-navlink).
+
 
 
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 0903afbab34..44914633fdc 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,8 +1,5 @@
 ---
 title: "ion-nav"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/nav/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html"
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -23,18 +20,17 @@ import Slots from '@site/static/auto-generated/nav/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
+Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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. 
 
-Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
+import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
-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.
+<NavLinkExample />
 
 ## Interfaces
 
diff --git a/static/code/stackblitz/react/package-lock.json b/static/code/stackblitz/react/package-lock.json
index de8fb6108be..ed487ca7844 100644
--- a/static/code/stackblitz/react/package-lock.json
+++ b/static/code/stackblitz/react/package-lock.json
@@ -8,7 +8,7 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^6.0.0",
+        "@ionic/react": "^6.2.0",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -2201,9 +2201,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
-      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
+      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -2211,11 +2211,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.0.tgz",
-      "integrity": "sha512-6RJrMpivslHszazxDV7Shmqbmgi7ki0RsqTklAXKKk40+Gglfx/fm+9H7PRJMGJ17ueGRFKN4ZWLahnzl6Y6ag==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
+      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
       "dependencies": {
-        "@ionic/core": "^6.2.0",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -3138,9 +3138,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
-      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg==",
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
+      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -17714,9 +17714,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
-      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
+      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -17724,11 +17724,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.0.tgz",
-      "integrity": "sha512-6RJrMpivslHszazxDV7Shmqbmgi7ki0RsqTklAXKKk40+Gglfx/fm+9H7PRJMGJ17ueGRFKN4ZWLahnzl6Y6ag==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
+      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
       "requires": {
-        "@ionic/core": "^6.2.0",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
@@ -18393,9 +18393,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
-      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg=="
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
+      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
diff --git a/static/usage/nav/modal-navigation/angular/app_module_ts.md b/static/usage/nav/modal-navigation/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/angular/example_component_html.md b/static/usage/nav/modal-navigation/angular/example_component_html.md
new file mode 100644
index 00000000000..06d46334df5
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/angular/example_component_ts.md b/static/usage/nav/modal-navigation/angular/example_component_ts.md
new file mode 100644
index 00000000000..366dc7e246d
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/nav/modal-navigation/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..3c9ec863d04
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/nav/modal-navigation/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..5b1b70c3474
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/nav/modal-navigation/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..0cd5713c062
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/demo.html b/static/usage/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..9ef92b54a39
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/nav/modal-navigation/index.md b/static/usage/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..55cfafaeeda
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/nav/modal-navigation/javascript.md b/static/usage/nav/modal-navigation/javascript.md
new file mode 100644
index 00000000000..5fd4e9ef13a
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/react/main_tsx.md b/static/usage/nav/modal-navigation/react/main_tsx.md
new file mode 100644
index 00000000000..fc6901b3d6d
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/react/page_one_tsx.md b/static/usage/nav/modal-navigation/react/page_one_tsx.md
new file mode 100644
index 00000000000..ce5c266e21b
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/react/page_three_tsx.md b/static/usage/nav/modal-navigation/react/page_three_tsx.md
new file mode 100644
index 00000000000..3613967edfd
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/react/page_two_tsx.md b/static/usage/nav/modal-navigation/react/page_two_tsx.md
new file mode 100644
index 00000000000..48562bd23cd
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/vue/example_vue.md b/static/usage/nav/modal-navigation/vue/example_vue.md
new file mode 100644
index 00000000000..ad5242e5c06
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/vue/page_one_vue.md b/static/usage/nav/modal-navigation/vue/page_one_vue.md
new file mode 100644
index 00000000000..94613725139
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/vue/page_three_vue.md b/static/usage/nav/modal-navigation/vue/page_three_vue.md
new file mode 100644
index 00000000000..9dde8817996
--- /dev/null
+++ b/static/usage/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/nav/modal-navigation/vue/page_two_vue.md b/static/usage/nav/modal-navigation/vue/page_two_vue.md
new file mode 100644
index 00000000000..737fa71158b
--- /dev/null
+++ b/static/usage/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/nav/nav-link/angular/app_module_ts.md b/static/usage/nav/nav-link/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/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/nav/nav-link/angular/example_component_html.md b/static/usage/nav/nav-link/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="component"></ion-nav>
+```
diff --git a/static/usage/nav/nav-link/angular/example_component_ts.md b/static/usage/nav/nav-link/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/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/nav/nav-link/angular/page_one_component_ts.md b/static/usage/nav/nav-link/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..06c42b342cf
--- /dev/null
+++ b/static/usage/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/nav/nav-link/angular/page_three_component_ts.md b/static/usage/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d9e95ed7218
--- /dev/null
+++ b/static/usage/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/nav/nav-link/angular/page_two_component_ts.md b/static/usage/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..d6edd90a593
--- /dev/null
+++ b/static/usage/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/nav/nav-link/demo.html b/static/usage/nav/nav-link/demo.html
new file mode 100644
index 00000000000..d813dfe8a87
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
new file mode 100644
index 00000000000..535155750f0
--- /dev/null
+++ b/static/usage/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/nav/nav-link/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/nav/nav-link/javascript.md b/static/usage/nav/nav-link/javascript.md
new file mode 100644
index 00000000000..faf19dc3ca7
--- /dev/null
+++ b/static/usage/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/nav/nav-link/react/main_tsx.md b/static/usage/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/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/nav/nav-link/react/page_one_tsx.md b/static/usage/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..303ad18547a
--- /dev/null
+++ b/static/usage/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/nav/nav-link/react/page_three_tsx.md b/static/usage/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..451d30db85d
--- /dev/null
+++ b/static/usage/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/nav/nav-link/react/page_two_tsx.md b/static/usage/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..fd3f8764873
--- /dev/null
+++ b/static/usage/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/nav/nav-link/vue/example_vue.md b/static/usage/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/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/nav/nav-link/vue/page_one_vue.md b/static/usage/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..f3635e1db37
--- /dev/null
+++ b/static/usage/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/nav/nav-link/vue/page_three_vue.md b/static/usage/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..54d6acf24c9
--- /dev/null
+++ b/static/usage/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/nav/nav-link/vue/page_two_vue.md b/static/usage/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..0d736d69c88
--- /dev/null
+++ b/static/usage/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>
+```

From 55ea1beb99207707b6d81f28a1d0a37ab8b6c7dd Mon Sep 17 00:00:00 2001
From: jared <jaredcbaum@gmail.com>
Date: Wed, 14 Sep 2022 10:29:25 -0600
Subject: [PATCH 045/469] chore(meta): Update icons

---
 static/img/meta/android-icon-144x144.png      | Bin 4094 -> 5786 bytes
 static/img/meta/android-icon-192x192.png      | Bin 4512 -> 7902 bytes
 static/img/meta/android-icon-36x36.png        | Bin 1764 -> 1258 bytes
 static/img/meta/android-icon-48x48.png        | Bin 1335 -> 1864 bytes
 static/img/meta/android-icon-72x72.png        | Bin 1802 -> 2798 bytes
 static/img/meta/android-icon-96x96.png        | Bin 2623 -> 3768 bytes
 static/img/meta/apple-touch-icon-114x114.png  | Bin 3213 -> 4493 bytes
 static/img/meta/apple-touch-icon-120x120.png  | Bin 3411 -> 4849 bytes
 static/img/meta/apple-touch-icon-144x144.png  | Bin 4094 -> 5782 bytes
 static/img/meta/apple-touch-icon-152x152.png  | Bin 4381 -> 6204 bytes
 static/img/meta/apple-touch-icon-180x180.png  | Bin 5263 -> 7443 bytes
 static/img/meta/apple-touch-icon-57x57.png    | Bin 1410 -> 1989 bytes
 static/img/meta/apple-touch-icon-60x60.png    | Bin 1523 -> 2254 bytes
 static/img/meta/apple-touch-icon-72x72.png    | Bin 1802 -> 2798 bytes
 static/img/meta/apple-touch-icon-76x76.png    | Bin 1895 -> 2879 bytes
 .../img/meta/apple-touch-icon-precomposed.png | Bin 4512 -> 7906 bytes
 static/img/meta/apple-touch-icon.png          | Bin 4512 -> 7906 bytes
 static/img/meta/favicon-16x16.png             | Bin 1106 -> 572 bytes
 static/img/meta/favicon-32x32.png             | Bin 1850 -> 1116 bytes
 static/img/meta/favicon-96x96.png             | Bin 2623 -> 3768 bytes
 static/img/meta/favicon.ico                   | Bin 1150 -> 15086 bytes
 static/img/meta/icon.svg                      |  14 +++++++++++++-
 static/img/meta/ms-icon-144x144.png           | Bin 4094 -> 5782 bytes
 static/img/meta/ms-icon-150x150.png           | Bin 4301 -> 6041 bytes
 static/img/meta/ms-icon-310x310.png           | Bin 12297 -> 13620 bytes
 static/img/meta/ms-icon-70x70.png             | Bin 1739 -> 2655 bytes
 26 files changed, 13 insertions(+), 1 deletion(-)
 mode change 100755 => 100644 static/img/meta/android-icon-144x144.png
 mode change 100755 => 100644 static/img/meta/android-icon-192x192.png
 mode change 100755 => 100644 static/img/meta/android-icon-36x36.png
 mode change 100755 => 100644 static/img/meta/android-icon-48x48.png
 mode change 100755 => 100644 static/img/meta/android-icon-72x72.png
 mode change 100755 => 100644 static/img/meta/android-icon-96x96.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-114x114.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-120x120.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-144x144.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-152x152.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-180x180.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-57x57.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-60x60.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-72x72.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-76x76.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon-precomposed.png
 mode change 100755 => 100644 static/img/meta/apple-touch-icon.png
 mode change 100755 => 100644 static/img/meta/favicon-16x16.png
 mode change 100755 => 100644 static/img/meta/favicon-32x32.png
 mode change 100755 => 100644 static/img/meta/favicon-96x96.png
 mode change 100755 => 100644 static/img/meta/favicon.ico
 mode change 100755 => 100644 static/img/meta/ms-icon-144x144.png
 mode change 100755 => 100644 static/img/meta/ms-icon-150x150.png
 mode change 100755 => 100644 static/img/meta/ms-icon-310x310.png
 mode change 100755 => 100644 static/img/meta/ms-icon-70x70.png

diff --git a/static/img/meta/android-icon-144x144.png b/static/img/meta/android-icon-144x144.png
old mode 100755
new mode 100644
index 22a25145fddae1fe42eb2c9da33a61077d2334ca..f8f3f3ee4df49a4d7cab62beeabd3e22c09d7fe7
GIT binary patch
literal 5786
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
YcYWl?+RRd1eE<Le07*qoM6N<$f@1<ADF6Tf

literal 4094
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
IX}Mtj3uH+atpET3

diff --git a/static/img/meta/android-icon-192x192.png b/static/img/meta/android-icon-192x192.png
old mode 100755
new mode 100644
index b2d883fbe3a7412863e61395516617c336e5b354..be06211c60c730b141f748b27972476b1cc6d95d
GIT binary patch
literal 7902
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
IM6N<$f*DK;Q~&?~

literal 4512
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

diff --git a/static/img/meta/android-icon-36x36.png b/static/img/meta/android-icon-36x36.png
old mode 100755
new mode 100644
index c5a82ce68d7319274e39b2b711e4c0d60964917c..77e10c5d2b69150a041a614303cdca55a6026995
GIT binary patch
delta 1249
zcmV<71Rne34eAMy8Gi-<007|tn3w<n010qNS#tmY3ljhU3ljkVnw%H_0004VQb$4n
zuFf3k00004XF*Lt006O%3;baP000DkNkl<ZcmcIo-D?zA6hCukXA-kZcZ#VGZEDtv
zg%+CCpin8+C>Ep?Y9IU5N{bI_{D@!RgP8aQ;#U;KHx<EGH-9Q3i0p??J|z?XfSvUp
z*p;ZPS$D4I+|3R%vvX%=P5i;#osWC({N|i<&-u+&pj-6zW>{0*p(v2$03!+q0~Blo
z4mGZTr2w}$SBiF{nFFX>UCfSC#e}LQ|HZ$5aKs370VF+xq$it=x3}Z;k0z8zji`*@
z!lMi<4i>T-kAEVj%5ND4)6{c}!A&}W#e-bCLuI;Q+sPN`%6d>IiG_MI30=*hxwG(j
zU^VBPTY}<C2_mEFY91EvqE8~_BV-t=-k9!&OlEKp1_xJ)<67-Cn6tBShl+r==d~>~
zGOz>Fl9yFI$)noVZQFUFSmM=cmHR>0a#Iia&i{AuIDc~`@R@;RXjw-M9$vpu5Q&R&
z*%D(`ulX^Y6t3hp565MAqYNRg8r{1aE?+$Fxn`QPP%J$ct|Ayl8aDsB39{Ltj`3Ed
z0^5H3UHk_C<LT|H*w#5PcEt1Mg+fWVEzFYSHb2O^(&w}iZwm=6H7)D-9h%#X@rg6B
zVq^J=uYWrT&CHl#gz_SeX_<3{uLTL7J$>vPPn<dn6Q|EY9FQByoo-A$cqAV{B?;>!
zu%6@r8S9<@?Q-6ZToAO{=z7_*M5AMJm)p9x@7xuxiep*gg29~1$vWhw9yo;D527}H
z>Wpl0iF>j+H*NhRjMS~r_^DQFfxahlQSb--_J2SB<`-|=<5SP3!w8ib#!n{5rL=Tu
z850V=SU7RwI7DIJ=pN7cn(u#r4I6)f)dS06VBj0sFoS`lk{ju?bNqTC&p2d<eu5}u
zv)(?c{SH>G(BUhi2UdPNARA^RAOdK8SPCrb(cp_zA28H2jL9EM778qE?To6RR!tje
z&wo90_9aBYG`)TL`}?7<uTQkOxjEUenkX6F1~mn26#T1_<{;3V(q*qFrx`k=D1FNX
zDM0~FHL49tc$6e%pnGl^LgU-@txzgS$Kl68B{VU*Es-yD)}i4It(rwuof;hn)i`%u
z3zH=xF;cn?$qOF2adP5xSPltnl%d<8Y=0isSCkF{6*gHXe-eyaT>WGSVY-Oo$MId1
z{5W{XD?jdIN%04*-_?F0cW~@z_zNt^4@aP(|H}A5myreBzR}%q>B9Mrpf46(0`1EM
zfi~n7Xk&+u!PRTmWm5xv?b`2M0*yd2GRg&1y(tdjf`r`g`k$lS>lSAoQd;UtoPXFL
zS(3{=6oTHiZ4U{$7NscNEzy&@;^xrt8N~EP9xqA-n;+z!b`h>rUdc3bAcU)yY3tDE
zH3=bT?QU>29~Mtb0YOH=55>CoLy>j##17Pv2EgYdV+N54Ce$YNUR$SdWfGPcSga?}
zO(Q{M2qC*4^}21(KVeL-a0Y9YMOyBFkj0s;{Pm&n<|a;Em-Xvv!wL)WepDl|1HQ!s
z3ix|x={BtVaJKaLX56;R;0&3z^>|BL)$qK4y3W+qX0BfEZcFbYf#;8&_AqLl00000
LNkvXXu0mjfbfi&F

literal 1764
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k3?#4J%UA`ZSkfJR9T^xl_H+M9WCijWi-X*q
z7}lMWc?skwBzpw;GB8xBF)%c=FfjZA3N^f7U???UV0e|lz+g3lfkC`r&aOZkpuW5S
zpAc7|0{5=}qlgY6@c;k+-y+;Kz!0w}3GxeOVBj<=+jisgzni6!`5T}9`JE%i6?5jY
zK8L6v)5LFEdov@lo_&utU4G?sIluARG+lNcx4ZKNF5TkZ@iR<l%XU54JB_o&iy7M=
zN+~I>{uTfCOZBGv@9xRxWt-bLZ8&zwL^%1$(KT#u4HZh{4zBu|aLS;2@rtgCx7Q_@
zc!AOtW0JSKOXb2lS1tfKoCO|{#S9GG!XV7ZFl&wk0|Qf>r;B5V#p&LV*YTGUMDE?(
zu|`drbEoSmQx2Xfc~Uo*Xm=`jIb3wrHh!jY!RzgxpL?sfKQ!BH6aQmxI{$N<=bvQS
zHu5$+t@-CL;d%4)KhrJ68a_%j7>Ej~Zqd<cTjx_9D9{<VRbbLrYvtx5-Lk(ToEvXi
zK6-w%LTRSgQsIw0_f9yyOWS8q&;2IkXoZAfL{x;1v=76nqN0D_=I(a8SN+{rL}dDj
zV#`%?idY-iMQ43|$W?ksd1^}3+Fhp`kNf-N`DYfCg*pAZS?qt(U~fuO+ys7xz(bXx
z7Qy*%RgbPY>9(M%@x#Qk7A>Ewj+^@Y`udD5X<4YTl5g&#uqjClQg6fO=4}_x+OKv-
zaoeY5|F?a6XKQeZ{fJO@Qqk?Q<K=cy3++{}&*D1V*}*NQ)-Qbe`I!gv%?qX{*9diW
zf4O_Zt-UrgAU)LO<nbedkGXP-rDLxxe={}IWh$qF+KbIHMa|##UD~fE!0aPn=*hgk
z{LX^Dnfjh>r#@&bebN1Tmm_oUuHY0Iaps97nVWaalfH6$`MWI>-#H!e<o@$Nw^1+A
zZCPWxwcnZTilwI{d0s#7O;t<R+tjyX_223P0*c<hV-pwb?_9ibuh!q7bb}XfzqU_H
zwsBhN`pwfq!Mofda#!23x6|KVe`xfmvEbh?sRdSoXEd_Iem0wYUH;&zox@*o$>S3r
zO$c%Q=E3!Z%Rj5@CYPSv<R-sGYl7#z`O#w0pE{#r)qdWYt9R)ZyI#AhyXfPj;Ej`;
zADZ*G**hCOyc2lltimMS3cvo46Pwbr1dsVX7tG$)vj3iy>*tkUWY|Jti|0r@<KL_O
z>JxY9ja*>zQ!R0gC`m~yNwrEYN(E93Mh1pvx`u|jMiwDP23CefR;H%f1_o9J2FmZF
zy-+md=BH$)RpQnVwCV9TpawUP4aNCsCFO}lsSKXEiRr1niRqci*$QTQ=6V*omI^>C
zO>_-Rbq$Ra0u9X+GD=Dctn~HE%ggmLL8^fms9G<-DE&^`TcCjq5+D;pGD>rktgKw}
zlS^|`^Gd9&0)R@384Q>I->r|P25hI5RYq!NdPWI@p`{T&Ls2VGjX07yP&MJ1DJ2;o
zC70JIasZV`A}R6B%uOw+EJ$SlyGp+xFWr7qm>-%sz9B$W42C8a2F7N_mgc5c+HK2$
zO8Ak?3C^raWiW7ZnzG354Nxi!Nh&nRlOZiLCl%;@{oK5gocwhCw8XN^<ovv1eMH3Q
zn;Io1r<$9arWzV0B^eqfo0%IY8Cs@UCILa3xnZInP=_ASeaV%_RswBc@O1TaS?83{
F1OOzs1lIrn

diff --git a/static/img/meta/android-icon-48x48.png b/static/img/meta/android-icon-48x48.png
old mode 100755
new mode 100644
index 1e407c8be014b3d6af3361a6d44f5da1265115ac..b2c23bdb2c43726b3a1682c70d888861c65c3990
GIT binary patch
delta 1850
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

delta 1317
zcmV+=1={+^4z~)BBYy<`Nkl<Zcmdto18|&60KoB{YDHJuw(WNCY}>YN+aA}pZ3lJZ
z%rs6OqTBbsnQ&+CzWq>U<~PWCZ+UyQ?EFppNVpJ*A$SQZ5r-@kAyBRenTW*-JdZ($
zfXiz6b}H^e54?u0NJlY*redUFGhReDc+W+}Js5yrkc?6Yn}14?gm2OOY*xMnK0pcr
z5C#G$1q|bt;WtE98=8&bM-;qvD(=QOY(`0#%4Xvb=HhkSh3m`RjW@9XvB;4cwGjUD
z@?!8jw%{=K;TQCW%gR{4A1M$D|6(Ve!4UXS7cS+5Ck)Ln94}%ok}$kHPHQX*(NV`S
z!%XGt;1%RUNPmj39#<g-E{iKz3k*jc`0%~Ka65#Kx;_623LzwkcnHxB&#^8@)R-&x
z>GaI~$Wx5-br=fwSy&{-qX5Fd_wa<vXdF@$EuV#UXK|IAV7me3V{)^i=VzhCS>9v1
zAz5PxJrHh_`T%88qIGC@4mQc!_yr=2cytbx!2m@MB!6O<#mYp&UoHYZjdbm?3S|(I
zWLyqcs8#1@#ZvhYTqZWW_ILpEu?L6C?ZzD3jka)y$)^=w#vYtT0{+5Kc;H13)UKYW
z2a*&+Cq}dKe!PKW28X&LB;Z9v8JxMI&>k&Nw^~Qvft~1HJ;7@TNIUFRnw9U1)hID}
z8eN8-CVxKN9{3))H70ZUSluEOumgV0%I}7-XdAj~l+y^y6eA=e7&sW|Qs6V1!)7&v
zO^Xn%vAKRGrAx=4VBkyAxXs2;jSSy#=sr+_$22-@6tboHbXPE7rQ*QU%pkK4I11sA
zc(gYtvpHg=bUy|I;-r7hLtTT+9*`!jT}8OopnuGIiq75@49JrH`MSm?H4nmJzr$xR
zY=4!~WCjC@q;t<*1`UYB9tel+L{o#Z-;_VOTGIMoit9C2pTiIiI|RQ$*-uLK4O|ip
zkcZIS2AM=)_jwvZZ>xq-ru5IZG_IR-ARP8Hyato_cPY)8T8iPY0QC$SaW{$~9P%Ho
z)PGn;S4ru%2LqN%|BOX*gUs3@9>O7q(MDq<llQFeg8|P<y_tjI8b^s29oo!_algh<
zVk~l{Pwn<#z(Ax*nZBrzVHB1^*fa|f8Xfkflr9wmDpr+EQs8bh*JwmfY=f|9BRXr8
z(;Nq+w5!pyBEkzOlRlp7G%p+7vDm_eW`8z1YnE|8ilqJO9{DSc(^4Uu(Ok2DXgr2^
zjVom=?ni{~x8jO@=M=hBkL1O7igWstaGSXHwZpae9XoLthp-br<0`Z<k*5c5DefI_
z!=t($o>okh(H38Dn!;bMDSQ_4nXI@io<MhX52|ljThZw}JY#jo9>v^w9IkK&wSV;x
zlEr9q4lCats~{xH5p9%sq~dGt0G6QBIqLaU2q+#n2J1dN+=^^PBer7<+-K<laWeKQ
zDxZm~%}&B6LcGqT;6?Zyen5N+84!|O+zYRjFK8b_PKb?YJMM%ZE{l(c&2c|=hu8=+
zaW8y!9<*=5=`fFc`|t@yp&9DIrGKn2VQ7xA_!0;4AB4gQTy4<v+C4QKYc!r&W3dvy
z;!Qk>r|>p@$121j7Xb)`5-i6cxSgD2emsXnW#MW8lW|YtaYUcZpBnVWM@V$=tHo1z
z8{OePS3maXiU+U`=_oRJg-pY0+=I@x$GVN5+eBax?!=GSg-pfIZO&jjz8=Tz=#Qp$
be{S<XVTdTLF^&{c00000NkvXXu0mjf)RS>p

diff --git a/static/img/meta/android-icon-72x72.png b/static/img/meta/android-icon-72x72.png
old mode 100755
new mode 100644
index 893c6af3250c11ecdd9435ada64b6b68f9737f4c..9ec050e953291ba19c806eb297f5a802210114ac
GIT binary patch
delta 2791
zcmV<D3K;c@4(=6@BYyx1a7bBm000&x000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2
zO+f$vv5yP<VFdsH3WG^RK~#7F-JEM|6xS7i&%HCVHeS14)W?sY;tefTX@b{o(@Ira
zyfmSqRa8KM6hiO=Od(AOn4l(&Qo^GNLCOP@K2kMFZIh_|(SNETP1PS&<wv3_RaLPI
zjYLUPkNFjTWes)&yE}7p&)uEPdObUjJF|}QCk^Y_-8(a!J?Gr>xHAOilvoV3T$}<V
zDJ5~n%oYZu4L>0O@$zpn0G+>N2;&<iY13r7$w&(FQzI~k5U4q^7}av!{6y>cP8&aC
z41&U7g#SBe<bMqQdR2!SQX>JC357rsYDr00(*sZgLKYAgOeDLPFtRTcP4S1$fDM>g
zb1+P;3Q0g8t6(ZA3hINy5CXvkq&6lM%6<zKPIexkgF*WY<I1ZL00pE$KcgI@6rRT&
zn1958vds#O#7r~#Pi}TsK>|q)s*fuXWf<n4)>K0`vVX>E8Q(;~FKAMlat5v+;UM^f
zo>3xA>%k|!OpMko+Di%fJ=eQ>xc=bR%r+BMon%J-Ew6(-3y4M<9wR`XgzFpvWGzuN
zU`B4#%lADA2sLLR2*-j8Dd|;{T%B~mZp}Zz0)&`kb>1bna}f}qt<WLYDEN!<+;!>F
z&q7<G6@OyQ&0^moefBJ5GL!uE9DmI~jmYrXt=(yMa}ZE0rbKd~&sH6)z6I;n-638R
zt*xHMps+?q-+)(N`!kG<y$K=1Lja8n$^KWUDj=#wpCttLK?tB`bZ)yFy0+Z|iG(+y
z*ufZsiHjHE$k8WY=+r9^7QCc#BA=V?v;E9=gn!bsUQxpFJL|rG2R!}MacEh(6bK0~
zH`XU6LKRdse`I^bN+dcC0Zpr=r3GI6&95NYu?lL*;Lyu(^0{AfEo~P2qhoJ?B#x$5
z0^=PnAQoi%@-1Iy<KsH>3yzT)H{%$(&JG`aT<W@Mr14OtJSsFOc#hS{{me5@Jvn1W
zvVQ}eF8<oM+09fqKGC|e;MBR9`t@B$e)fbgL7(thO}nwG76sLwo*lbff8l|_Q|#Nf
zt@VBEWy`-L#`;0#Ja$@C0)0;qv$8OGg}suIkumX|pys=5`3lcw*njfpGUs?-G#4zT
zDG5i5c7vp8p+o-TAAVQbubiz=)o=aIcYj4Z6O@UGi{e;bXpTw6w=r6m>$Y~v%N<=H
z$-zf|0&y-RJGS@k7XBbiCMPGoeNQq1C#LAY2#Nx#kIQx+I=5|wuFiW(`&_e2fA2r=
z5RX${hOogD#LIM^lGRuti-P(I0r7k*36dQA=_50bT{JH=tCP?D0&0cZ429-AG=C%?
zL|SGh{x{tJ49jQ`YR^kA{Cd{=80CKc3paT=gqX%VItqDNBC%4KPa#P?3xk8NIQlIs
zO0P6;3?c5kYfG>sm-pLvuWfZfK-_zS1pmA6wyp0$;h>P5K!H5-^l>2|C(x93a6eY<
zcsN0Htoml@I;_|#1d1^c)|e%xTYro(?56aAp;NA7`yTu;^9zoV4GnH+SuQmWG_8$N
zg|&eMsNP8Blz#N+F~@Na?75Fe+Q-2!I0nc1W%r%~uwmofAOoe5qzWd9W4`YfJJU#~
z&pMhGnuCmREO0FP7ccSD%EVV-YxfVKt^KPo{{MGC4iZ-humt!7GiSTp=zsKUuRD%=
z>4oPZDCoCtT~j?!T)%NEZ0p$#(P*R4Zpu5GUtDn$G<~88u3WwXejv<@Q(nOK9d1^u
z1UflK6sVg+_JWx89F8;o?geOSj)9`8eA7VH6!>%#gC$FrfPYAWGQxZd$f~_m;-var
zJR}GUCjq_t&UsLa!im-^uzw^*prKBMn^&v=8B~zSzbZ8dqi0lSj9;pb2~cYFbF8VU
zEAXi%3K8DWs@KrbYJB5ehs9EPS=@i?*#;DjTik<Pi?G0e(uwKJd(gN@g-Apbo2Erz
zv7CT}2F(f0vG4>mnQ=~5H4TLm5t@TP9&QSiTgW1%L3XB8Et|K%s()cvWLyOFxn;|^
zkhIb!gr&$C3y#vkCz;9FIS%@vn1hz2Q^9LNrDHiv2F=`*3qsLm2<boP-UbPDDY4pV
z1FEr8BQT`=NHFM-rDGi%1)`P-M^O}*ynGq_!o%kb7Z6E<PbR83WT)vjtR&JclEyX@
z3Pj-nVtE=QQ_aLR+JBT=h7LXv<%sm`6JpuIiTw{g1VP!cbGPH?R*qN>UaOnmvV&2Q
zra+kv64+^jTa=5xB32n?!Le?+o?VP2uenU8rYRO;`=&DQvP!L;E)g?U8D)foW85l~
zSR1#)Ek~>dHAo5yt2m<X%hXF!skCiP$V+<%`&=WVW3F`|uYc_#Jf2;<30p+6btDv0
zppxqY_unV7YYQvoKu7AeHG?x>SLaq?8W?TkG>x+)`VBvh9jlvm3naGh+$C3=E|y%y
z-?T2ePe#I@{LBra7jE~<9XcY{AD7v%7jH)p?J4#N3u_da5j{^8^I`DG)vMP;Bku=y
zZJPC2lFw*5|9>ouW}y>%?*9=Sd;Ey)XXv+NBX~nG`XHbGC?ZBPla+R*FDcikzWwsG
zWVfxScbDxs5ihlI2kjXy$;JAEXpzO-de?#kqhoK1_`_P!QSJwBzkN;dJK;sr$iYV+
znNhwiKPQF)y}kGHl*oVVQ{*r+b18A$kKPk&5^>>_RDWFno$cTM_SdTU7+&;kYrf}N
z7V&Z(r*;ue6t{fs8`7rDc;&{tHhrVDUzUqyGJFo|2T80TkTLrP0A~9*)4a&*(r%f*
z9VieS`|p4K!!a1$vGd+Qevg+}2g~;>7ElG#BBWZkwG#YKoId@!;{vMI)|*9cWku*#
z7-0vF-+zDL;XrEvg!T|)HJ^QS>%CcL!v#dV)A1Mt0L=iG!}!${%lu@<-MMi~;2D#b
z)(+>hQ-{jmn^k6GMnj6I=4KK=i!NQd#KZf)h`_JSM=ct)CgyWZ4+f<hH*JCcUbp~3
zK<zQI(;F(^x2XqZGCT+Afq-C11T*jLy}JTC=6`Z5AE)bFYc_2b5qlWNCye@7C(Ti{
z#uL0Hv=>4GeG^X2@wl`3IQba_Q;<RKXK;PAObNpde!l+vwJF<0^NzP7(7N0iUNnkB
zh*+yu#jOY)&CklqFe?u`o)V6Ek=9;qt&H>1_xk#{Vv4&9Yj!gWmPkb_yR2M`*NQ=2
zI)8mm+<H)}n^~}=YEq-UeAcSO_1*wgZA>!ChG9WMHyByxyP{p2MW&h6i5i)dO+)4@
zyk*wMr}P20?|JH`F(dbuqST?bC1C+jh<Bzv-9hQO-Dn!wk%gd11<jfEe0!<y`;!!<
zX+0<=K51b-K1`r0qQ_;D4SAoB*YPbN0e_#}C{u>R4gqR~U5@1yxrQ}Ak$FvPCrm#3
zpDQp36mgD(aKv~B2$~#I&1dJEHlfyF%9IcI#Hs)fHz{5S%bw@6TtCio{G#IIWA;sj
zemXgBG-y5M2ba%7K*GC;6yd%}HPvpDu&%k*sG?x{^9|~WFhlQf1yn|{ZPGOtk6`HH
z!Z~e5wSijXBsCLI3C!mVakES)!eWId<E3gTlyYh>pb9Xz<0jZ99usJ?1Vf)iAXeou
tf&3$uB7{!hV*<Iu9LYsBz1Bi0=R?hfYe)IH#p3_~002ovPDHLkV1n{+E%pEa

delta 1787
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

diff --git a/static/img/meta/android-icon-96x96.png b/static/img/meta/android-icon-96x96.png
old mode 100755
new mode 100644
index 839f813003f6241ff679d213c0089cc7313c0367..3f9f8c5e2dd6b18580701cb2e39e61f56ff322ec
GIT binary patch
literal 3768
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

delta 2615
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
Z{s-_GSGKJZ!0iA4002ovPDHLkV1g77)0F@K

diff --git a/static/img/meta/apple-touch-icon-114x114.png b/static/img/meta/apple-touch-icon-114x114.png
old mode 100755
new mode 100644
index 8d95cee452a5d81595447bd970c7d221d3e55ea7..c238ba27d5dc33cfde254ce6be5820178934f933
GIT binary patch
literal 4493
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

delta 3210
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

diff --git a/static/img/meta/apple-touch-icon-120x120.png b/static/img/meta/apple-touch-icon-120x120.png
old mode 100755
new mode 100644
index cc037593eebeeeea681feddbe57cd84de13209f4..33cdf560cf33cc9d9280e06327e36cab76acd009
GIT binary patch
literal 4849
zcmV<N5)SQ&P)<h;3K|Lk000e1NJLTq004LZ004Lh1^@s6Ib=4{00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH5{5}cK~#7F?VSy9
zTh*1v&%N)-cIpJH%<i<E?!?+zN?2%PWlCA5g~VAFTDIhaZP_hDNbF^qra(eN%WlH}
zDc=ia(}Y5Y4qLDTEOcqNBw6}7Oycxo3N3@}PCN8lPTQH%&J?@E5L?!}z5gdYMV4jh
zzNdHIdrtIYgk)Qh^xj|R+;h)8_dG$z1?e=|Gg%TUV@r`$N_CN<j1rW=UxlJH34N<V
z5#{vVxc>XNe$u!iIYLT}J4y`Gj6JOXG)@Z~K?@Okajz6AD}-95NM!XvWQd2H{u&G`
zC5DQkA2~=1j0GZaIxSQAKK)_W=^wJStT7UbmVS_w*jvaK4iX*BQNl^Ez!jnj>ZK&2
z=%D`pV3Ng7p1|7uT2l4tleaE5OAW?A!4ZQ=bK}Vo7{Us*BeB+Mhz{I_b<noEke?i&
z1Q5T#MT>oe_yVQ4$Z552iCgIS1U^nI)_|OL-TiU7?id8_$XF@skrP1JY6c3^g<GNy
z#w>~u*}mvnDXk~9xTn#HM^;+0PgtoARmcxfL_}o4C#==ZM^0Pw>L{$4-GWbWtDTRu
zYt6Pjr3y3OBSshnMxw&HOOW`a7Po_1RMVl)&HF6bmUf){*NF)x7u}Ju+pMScoUn&l
zn84<;83gXkT5a@YI{xOh+^~o&DMYNcCF`ve9iW!DLC9Eb){8iY6e6LG!B$7-CcT#W
zWNW-_3VrU>hoo%FDJMTdArOkduDA{jP>XO7v_346n-;hwE)yY%+*FWN950+NQwv7q
z#f9ltpQeB`A+VdBdU1iR*)BxJrJ~jO{NykNAYc^Tfr#%wOWa6EI|9?rjtm7LkOf<9
zoxh@lPlYnw-PG09MLj+5DF0kZZfuMuCMIZne1b+sf2i-1T|kLK0%tn4+Ha+&O+JyS
z&QDXq#7(Eu)U*5@v~KN1TF~Y0WBkq!5Ew#_jEvIWegB_0(X}OJ?NolpOrEy+{CDPH
z;Xo+4ixL0?T)XD|wDI!GD62*FE2s$&dhh=Iv~S-ti4j`~XPYziy0Hd61Wra!)w6s#
zZQ67hZQO8KSyZJI31N09exB<AaUu3?x8LQu_Lv#hDa{q8DNW-ejeFc(wenoL`KBA(
z`+5Ws&<}%;K1R3Q7PHWb4i@s0t4*G2l<1IcZ`h%iwnEL3ngT0*;Qn2-^WJ;r1WL8w
z6c=DP*t+Fv>h4}jqZp@kpcXlTGI}j}!elMkK;VvylyV@B9P^fIuA={Y>Ipjg@6MuT
zsb|?itR6zI)j=Hu9vS%|MU6JNvsJ<R0@2KP{pU46yXFCXw}~R8TU+YG|NS7XJog+n
ziwx71V|>2vGY_~{4KFi3G46^!bm&{eih--He}u)F<pUHU7-K)L#Wiuqri5+1reK`j
z^XTJr>uq-u7s3&%XX=#X);+SQ1FNmqTunRw>uw5*TyCs1pPitws-UPl(@mMBOZ6Dv
z<<6ZwI0T2#|8V|4@&slLta#odu~MCV`mc{rL?A-G`NkWl8HR?w<+?@OMn*?nVNGyF
z*3&O|k5#MAZ5XKs0pgx{*1L^AlOO6?@%#cuXuS{?0tW$e)cZd3S-S83&xV$aKn$=+
zCs2??$z;MCDlo;m;@>tC1G&QV<X_kNLrsCBwBDeW3yZk*_B(0Mp2vw3h>Xt{meB8f
z*SlTs5;pT$am{IxWwoP7{msM-#@svaxOLvY*BTFDrT2VlCtY#nN9eidzE9j>42O3B
z7^^!vnwu@Y{PN3O(RD^S`N8U6&b8o(B4><wKY0E-z5*JIu~%IAVQsyKDGuPeF)yzS
z%KU;U)dw#55OGk;is!5cyPL0>!HN3P7oYGYE~XmiU2tJ+;sQkC!z0bP*R)>3<U&a`
zCtpz|u)C<tp48a+ssF4y&xLFD?%|UERR<;*Z<D}89H~ij*1H{tDwwq%tXGSAi5ZN$
z>(;HQ`8RLO^(-4F^StvfbjQJ@kjpjaL2`##7b()RJ>Ta{QF%GB+C{TkFI@B1tyh(Q
z_AJ$-+GU@olLJW-7wmcLF=__x^rdjzPDEuY1lI1Ed3)#0H*KHgn(K|haLXLiiDp5f
zBB)4i>XLa{SJd#Bn=T8??VgLtgAGQ{ML@OZ(dI0L6MXrCWTZa!@&BMGfSdLn9~*-O
z)_WCkar2Gajh=_8P?!M~)|0z+&e<!z1I-rOA(}>P@a#9g>ZUnOz?T+Nq$nu4X?Gkh
z`$(Odd_~`}l;gm9fAP~FHGCdU_L*nBr|G0TMBTdOs$y=rL0%c|7AeF-L*MrOzBsOD
zzxkEAGXfmb6<2PKOkD46b?Wkscu*9WIl1xqhaRL&8|%Ag1YD?jYQ}m!VYgm$RiGlg
zpyfD7XRcejMhm^vE!73^4nv0y>7nL-Vky}3k{+(Wvc2=8LeZy*0l2WA|K!IFT^Ua5
zDW{%6K|vV}hJj|QE2GMBbE5=pbEYPDxj~jtqL-LhyXK<0;(Al1W){VF-g~!u3!`)v
z?)Kq_KIgt3H=RqC5EnwJUfh?WXvNlQ0mbOmRL*}fRq`qyf`IA|SZ~<iHSyY9TyWu9
zy5$ZQr&&U{n%c!VQ$9lsAn%H?Y0g_$&3}WsLo79#PQ8MF*PhVP_H`joZ`Oa{Qrf)b
zdU|d02z4%ALX$^cB?dBXBOJF=IuoX=E<vo<Tc_m)mK>Icc+;ETLU--_9DVqj>k08~
z=aQ4?Z{D_yxUjXhwzO21Yx-NuJy(NyZ;<Ip&<c<s;EROBi{Io1taGuxEzh1w=e_qL
zTHf={a;{xSfznrc&$)k3qc8q|I8eC6f&PD*E5Tu6!9mh~)hSPI5F}!e#P1aD;tyU%
z8~QhwPOrk)RGgRUd+CZS>Gae8mbg$-WF>a35ffO{Z-ifg{iHm@1a8_iYvnOI@`4sp
zl9aevdaYgGTl!w#@Uv|TIxBlBaiJsWE=jmT2?GeQOiqa31%*{B&!IT*tk@5~{Mk!d
zQ0d+*+tL<mmBqGGg5I=5(aHLC|LU!8B^DHAFcPq&Cr#Wl_Tu^-*BWKSI6+CRACBng
z`1ddW&J`5y*t6U>v=hDMBt>m@@pmVk#55lkT3|g8vj}Wry?({TYjV^qn}YZD>!yGC
zi=Py&SPQ$TU0bad_Aj;N+9h#uJL8Pt8N5bdH7P?3bQ#nh<qrF+jxZV1x#?cot-qM&
z!-_NYD*eS`MT=5OkHPqjJXW<LsPve)NQc_Wuo9CfcP!^`dgRx7IH+89G~thb_$@72
zBq^oGU@ySJcx-94ZOe9VOZ9Rl6KUT)I^v|OD}I6ff}qO67+g_n=FWjdaUP6&Dfvv8
zO<=`XJg|^}z_yM31w~g}PITz$6I`_P9y7rvupqu~Wt{jen}vXI%U*H=REmsWaa%A}
zqeG9RP129uKC@9tsIc@K`6CvAz{f<b7Fp1*fBhTcf=yr({02>9@priKotWv)EY$+r
z<!HH<z!MXHA|`Td&fmn^{6?hBl&ppU7DoJ9@X2pH*|lKXjhyY$W4k;D#^Z@U@$8mR
z=yR$6pCblL>X6{R{8}+ia$F4hEP6-OzhXrXrBZe=nzm%={+P(H;8CWb2N%B9nJi-Q
zdt+mVjlS)ElNa~h{{YJ_c@t21=?8eIVtP`Rt=ALP;}vZPY{w(igtlP8R`NGuuoKU3
z>JcXc9c`ip6_<Y3t$SCltQc!+KWCJ&1(PB<tOIlvs1LCTCIN}x1U`t`iXkk@Y5ihy
zY^>XJgc_GZi5xLuQtTZhfe&$`+)j%33Q~1q;+;4P;$=Y$%b6LQ)q+hd&F?xZfSZoO
zRpUK^6a}J*3#i=dTnkPMhPJZQU^+((xch$$#^InvZK!q}+{3p?4X+)vqH^QLqQI5&
z-fCdITtkfxo^w#3G!GV`T%)HJg9f_<;iA10;uq}u;pij>%f)L4!EL`}kflQ}YA%FQ
zuBM6Fy3$OeFt?2MrW=|r#>4#m*4yuD%KiWRr$1`=IdGh(EIXakf{$%o!C*{G-~g)k
z`qmnca6*EN#U7}wMn{04F54AWdxBGzy}c=M-JV+dSmqmZJz%|@GXYQ2NVbonKI?_&
zzuWM6nDoCZgzcln2=*Meeyid3(Ng=vFgoSoeP4L~J8lN6UiSis|F&gkaCQu;+CEBd
zce?|eEgYWx##fEzg*f48mlPJ>1v@ZAR2B@N-S61p!=Y~N#D?(dFI25&Zj3Dry?5PP
zn10P|;9h=b&T$yvz;Oahz`T>Q1uqAF`fZ+a>gl}wz7+Kr@{<F2SZ-yg3Y{-W%lQN`
zf!s72W@in`Y4K%1LEgwn@|v*JVxt}kOt+gNMhLo-(v*T#*rq4Ju4|g*JGkAnX+#YW
zfE0UVC0k@Hmb~!&#_<JU?Hlb;)jxXHda#nTml!Fg81FE8F1`eC=}9P+oez9A^yrw6
z>PQ-Gk0ZER%V6aXvjldgQUg@1@L&T6X}V|+kzpMhW8BR!ANWiV7eQRDDN%KBwRhkC
zNK&iXJs+(6xvHJ;(WBC8!*(~e4QXKL(6?!w+uEV=tPCe=JvNaGinW@f5(HBibKBe7
zXVqC%Qu#Yr?S{+yqqqdmfSP)JmIcrGWVXGyS4GfH*iTgLQEVr?Ikt;Zc~^rmStar;
z828A~MNu$VtDW$ihTx7fos+Vy7aNy|5x3$)f1}@f!THAj23^-TUcQ0aJ38o4gw_mC
z^Y7PRM-M;rAf2|%Y)8Il!5_Q+6SQwXe~&C&om2-`bGpsd?)Wa-$F#tG#LRQg7dy85
zS@cK8^<MpaEKYdc>Nr7;`|-yH++HJoy1jdSzwWtrCq;qIVQg1Ueoo4{rogabVYl^(
z2+C=_an)~S2doMw9RlF7=Mlodwb+keM_+pC3Hq0Rz9dk4re>SE`2kCV&h%t|t-sBi
zFpX*~_GsqHD<1A8b%wml>X`STgn-MJzum2&3gfam$ihY1z`P=JRZZPJ6Woc9YOwGh
zW&<*>q6BHd>Ya?;rIKA#K2|U7HFI$+6bM9F6zE#-RP9UZfVxK!wG{&-4{$w)%9CDs
z!o4|XPytNwD>5Q`EFeTZm1}fqySi5&jVhw91ecxJyYCswEbXS#PAfJjsXWp1%{#-!
z@6}*Fc*&)4q*VvBYu;V&2@NkVtJ<s~sbrsi7}@1zv4ih_pZcO3G%Z_pD$C{D>tSlW
z7~^laaR*(!<=V)vBaCe+jx1d2Eh@}M<Ld|O7tj&)ls??|QN&;x1#3pfo@`I^IcZbj
zOrC>Pp^Mi3Q*7BaN#bs2>b0jEJ<t3S?-2)F)nKU+k#?;vJ3)e?pn;Uvkv`6}X`{fZ
z67wVM=*U=(^&-Wz)zrgnV|e3sw@qSHt{bixYq*1Z9*=$bvgDdq=w*YP$@6`Eg}JLf
z`~Y#+u6e(k>@ewx>6cet8FzR6p}c0_{%2z8+FlDOXj^`2a+m4zefuaowRo2j>RL(=
zUfmUhMuA_k2FssyLqJ@%4x*wUJ?I5HIMGAO?wP40ANBQb$T#V<Y|9@I%u9;R;$8IF
zE4G_8uh##Km1?3;e21t#mw@g8^>D}CMX42jzjeVTlzKdt$~vIkb%t87<BBT^t4+t<
zN&;sLQmM|YBM4cpSc9(P9lt?UHGz9{<nxomRFM7Df)zpf90wE^G){EXL8<ANbSe{T
z$Lpy@=txQZI;eV*nxH9x0T!8CB8Lye%^$731n7sR1qLmV!zC<nK_~(PS7hoKA*qnF
zj%;D#cme^H9&;~k)-6{O{<>Rh3Ka-<D&)|`gy1zqcotS$BKty%JEG^g>zj#|=Yyw}
zq5hy)?GQ@rrWSQU`cY@7dO5@ep^d?{aGdF{>9ynu?IzBq*0?+ijJKAc?K4x8pVZ<W
zB_{Z5UqH)c&jvdHtwKMS)mFl4!DVJ<##JG|+p^m6g~B4m32Dt`tDT<wNTX7lu!u(B
z5>8?Iph{U^kV>L|M50%tLPuMzV-+rRre6OVMMyL*x&|o8bu9JBaqqUZusYbhrCw<(
zC$S0aVWm3zl%yTUo6wlo%7W;ROIVNC1@>@-Cc0LL1@5|Iw%BSCBd|wlH$|U*xQP}B
z#S|kwEgUhJ6k$CQCvX{5aTcszg3vLR>()hEs}^^!)0rAbTme^!<O*DgC$>=Q6p3CD
zQx%D8sfvb^E@~wUL*Odh2wbSF5NeeYBFhz^X(4myh_93wl1dCG&Hb9NAO)U7I-RzU
z%w!?DPVS}!IX$>^y@I6+(m&7r0;pm)p<=TzTzN)Ey*e*Ep&T`gF8DKx?cs%Bp^f-6
XBmxHCCY#gP00000NkvXXu0mjfnCyg+

literal 3411
zcmeHK_d67h13u1<yR2*(XC+SJj*Q~SxSTyR;*6~9JrYv*IHKH9l#xjGJR_&Fk`swD
zvN{yb9v6;ppFiXKJfG)z$MgRBKJPDYsu{|FgH4bP003|p8R}X5^~it80{p9>w%&OF
zfWF@BmX-eBXpnaHAO36L|D^#i+Vc4CYL`PTP?i7=X-(6>?7Gjh>jx)il({eUPlL_1
zWI=T2Ah+TxiSw(pwS})$2`DLcu4`T|N4HORz7^eNzU<#bK3r<Pr@;ID=z`<MZ9&&9
zG`~s9{)8@rdcn#NNt=<4{`$M!pVO0i7i}>mVH)6(+DwG1jEx&mB%p_Nvpd61TrA6=
z{h@%$pO48*`k#JTPEn17o*c(n{78acNs+(g9>T-2oLloKs_TYi;^4FMuX5D#tgw5?
zx37N(ec&Fy>hQkP9yZ{slkX&<SiRWj$2rz}->jn$ZrGp{JtIeWf%7cC)2|%k5^6pC
zPla>ku1FIA!0Kb9r(+dK*EsZz4yeNeAT+r6O~Z&Yl&+$a-uK>j9)q9o4AlxlA7{S<
z$Oc0M(`B+NLZzQe>gGUskW0o*(i021PWM!9Q&24vV6+Ik!OwwECh*X5`cj(cNrY2C
zb9*N{R0Q+3tmbT7(23YMZ<0F@meJMNT+()xO88=}b-XeTwqm%5xTMV+aM97<(O#Hv
z)@uHx#}DLjSBPccin8KpZz$2;f-olLa5I>*G`+33uaZG0OMb}TUe{=|vrpt_{%lOm
z92$IiM93%rGGqwrvYd$voBN{K88KI2L6xk2*O6$2f6cY}yYj8CVZl@~`}K{AXJMrl
z<SJ@<Icpk+GRsz8&{{JEBI6N80$FzVW-ykCxMF@MR|MFxLuSH{MJ8wp8dPHY#yA0f
z=!e($%<sPnhgEfS;-wl?6{=JlUgQ0jL^75&3vz|C&pf&{i#kgz4bFYAgj<DoGgEBC
zc8i_AeTxbBj>=#}UCzI6`(t{VyP5yCZ^lQ>!MMW}u7;9frhw$rdAh@LRWLh@w4UYK
zLJ^$l^wJJ@y1twmbND2OHZjLEd>J85zSKdSQu0eS=v{D<++Qd`O8{7yL2V{J6EQ@4
zzi9(SCJC?zF#)WMIg#-e-aQrikoUPyufM^xw9PYylH?stHGI(sAXsh6;x%v}djY9$
zWIvNlS32X@HR7130!gv&qsZ?2h-a2&UrqznwsDw*;n8Jf;<0F5MgIPVO!WiSKvu*)
z5wZIV9bLXnz5aNUl}?jpnmtyQ$6x*}+aT67h}#=1T~S;2rpO|ce_Km(XL-eo*>G_+
zRjqt~MszWzFsCjE2{%f<kY=V(R!9|veHf~0QR|7*0q+}M6sz94+?qF2_6!qJBpUxK
z+8n7FH4^yR<qy{tPHu^lonYndjvW<8>+hTm-nW2fnzT#Mr3o9tvmyui0*lQDUAY$_
z@F~6@JDi_=9!IG##ScbmB|2*5v)bw}Wha|tvTnUxR>byC!H*U^k&No^;`PALy#Nfn
z=CO}&y2FU(dlZyUeN7>obozPv1vDqtO|(8r;1jN799>4<a4V>8)tC&OiI$KCYAz0}
zY8t@apynPk7PBxH)#8N5zkJ9k=JSNvWaY5!T0%)wBU_NPmN%P%TD<4(Px=caWHAFQ
z!jKEpg=X84Ucm%NU`+Y~@)<Jqug+YHKQQS#lOrxYYv{rscm}r~2)he7YrEW1P8;s>
zOR!BD;*)jj4;r~?L0UZ2ktCCjeEO5}yDcKk$M|kObsHj_d0fas_zSx8R}wd6GJ}V0
zS+~SwR~J8w7mIP9OGdsUDjg-u^0nY|JEH4HSp<5++TZ5z@g3OHFL#DK5ncr)4Y#%=
z#G0L#;*0u`UgPa;exQNF79!F~TkXm=7qU!epAF*I>|t={yWJi8ex@yN=whv#$R$%N
z1b8S%%$5v5>>lt~7R;VB819VJ9+jRXd_OI8AK+sai<cDojkvJIe-u36g^y#}vO6Ln
z+OLS-$itiln*dv#tHl|8QV31y3Q=Jm30eI&>-v}q2X;&Q!*b^9_G{O+-zU6+z(za6
z16e|PN)5MP06;NNp*4RUyMqWA;4rZ-`~}aod%)ot<oax8-%jP^R0EqP)KB7JS_xs7
zf7%&$RF_zV7}DszqFN&Lu+h}y0s2jzb?La9lsp3NL*Q(9!ZXbe1er+QcJ9PjucyK7
z2|>k)Je6v6AS8EtrmZ-R<|d`KXJgU*mbuS3*Ih~1?x-aR{o{(o0_pjDYk||a4Cm*A
zg`s(V_!G9Wpg@%dygbkPiiSh$ef2ym9E#as5R@xrcTjdK@Et{(HydAq#b-L%{!{-Q
zA+J`PX7q4_cmA%z9pB4$CqH7DFffsdSH3_4!RK6!NM2m7Px;51^&t;8_(ZlA3JHJU
zSSA-zfR($-kg<+j+?S_HjkJckq>Egp-QiGk7%Ii#d4==ugxhQ6-u=BhH8t2kItFMq
z)YNf5ihr|2VcjBWLmq1HwRL2~&R`j7CdPbw@F=IRGK@Ng?p^D0Z2cEJry-GP(ROL6
z^jQQ&SCYq%M%CIVUrYLg$g9U<Ny^h>I#Pd`=f5f@<Pf5n(3(m5Ss%mi_}Un@{CeJJ
z6Y?l?(GkhnPO#-Q(vIFiZ^cQ-=|6SsUPPv-_B2s<h;PVdX9CoJ%r}pC4uO(X?Mj(P
zrgK5iS`jXBYy*_B*&g4zSY#d^9B)KO+>VI5B&UrfSC!)S>Hq>&6UHeXj;@?dR&ku)
zsq^u(8CKy})p1}%uIsOBf9kiJ#ewc3upFSg5L)@RgY4#xqwGqG;%SzptQWiF0y%5w
zv@Ea@Cu||VkV;8<Gn2_weMDd~&5tnD{%NkWtW;XpkNueSn|!aJS|iHgR4KVml`CZX
zWqsfEm&d^;IkO$bRsQ-RZR^`$NlaBP`>=4S-=9%njXfP5<V(B`XzE15kd;;S)7~es
zg!d<DxO@g|DZ2|2tm+agNViMO<1zX$$3MS_zvdR28pLwmq!@#1%Um#?t1G}g4$x;v
zZdFgjQACPcN{+^KwdilSL_XlBL<A&C9w}tA_@BGsPNNh-wrx~!gch`tTao3=^DcPe
zTA?)%^5n>0_=KzF54{n)N>3td<RHf`%8lQMu>~<cEe>h={Rdh!h4l)B?0?M6l8Id$
zw~^B24LYdg$$opLm%yCMXE89qcYX3zqW}82;QHkRM$t)`V8`1l`R%XFY(vnB>H~6|
z3lHN4Rn(D9h1{<a0wc-v_)oM+&`sD%<&SAev>w&akJclMB97l8EdaM|4^zI*#rm_*
z*1rY-$;GD$EHCX+P(coNo^SXbj?+({rZy?QaHMUeGHP?pF00a{BSd$`_HK_UQJw2^
z9XS}zWC;-zNlr3KXngnBBr|C0MFf#p2lJBQG@+P54r20pH?Rk|qyoYAfcu?tkv|Ku
zjh`&H;?DCZ&mKMcY!mKzd~xKaEF52tIkA}7mbMzXei+M9VY55b7hUclD}O)LDyl-W
z8*rb87F&noS$j|Q;yejMyT;>kdA_DBUF_t1prr0@y)`w`K3-(Rkfyae+H;PVY^}fA
zgUkzO7}HSTE_6{qPP)&UjqVUVV)7J&=X^Jy-#VM2%5qo4wLw@@v)KESi)%?G4wPT3
lwO_M(twlU&nanzQXLKJsLZC`vz<=)(z(^mZSFL*|@qfNd+^_%u

diff --git a/static/img/meta/apple-touch-icon-144x144.png b/static/img/meta/apple-touch-icon-144x144.png
old mode 100755
new mode 100644
index 22a25145fddae1fe42eb2c9da33a61077d2334ca..f55188e7aa37f38ee5232854a18321a2598c44f5
GIT binary patch
literal 5782
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
U+M|Elr~m)}07*qoM6N<$f|l3;*8l(j

literal 4094
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
IX}Mtj3uH+atpET3

diff --git a/static/img/meta/apple-touch-icon-152x152.png b/static/img/meta/apple-touch-icon-152x152.png
old mode 100755
new mode 100644
index b0dd62896f0e06c6eb0753d2012d5a13949248cd..3704e5ea53cafd837ffda104715949f91c846f11
GIT binary patch
literal 6204
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
aRq+QDlVIbtb9@Q_0000<MNUMnLSTYt*3C}<

literal 4381
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
PKLAqONUK`oQOth;sgI-2

diff --git a/static/img/meta/apple-touch-icon-180x180.png b/static/img/meta/apple-touch-icon-180x180.png
old mode 100755
new mode 100644
index 35ae260deff49c6b44ae830f731a864b1bf78c07..8b4ea36759a716c1674829325fdd5bcb398f684f
GIT binary patch
literal 7443
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
R+8F=<002ovPDHLkV1heQLn#0N

literal 5263
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

diff --git a/static/img/meta/apple-touch-icon-57x57.png b/static/img/meta/apple-touch-icon-57x57.png
old mode 100755
new mode 100644
index e165a75f20f502f25fd26b52b9ad7c97672aa359..ec2a3be2dcbecd942438aa08925c6891d1c9f1ff
GIT binary patch
delta 1976
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
KMNUMnLSTYt-?-!e

delta 1392
zcmV-$1&{j04}uGjBYy=+Nkl<Zcmd?v1FSPk6u|NAwfSt@wr$(CZQHhO+kVmW$IEA2
zyUlIq{ga#|n`Wk+X?OQB`Q>W%>^WV{%#Ii2*Vfmm0?do;a2}q=_xKOPNJ7c?5p>`O
zynyquJ?2A!H{QNTst%juPJDxINI}+;=)t$R3tOOWtP6`_E`J=34<tbqpk9f4IOaht
z>H=$V5Wd0)R9GbbEvSsDxB{$&7cm6oAb~;j$@hficJE_ZUk-&>5UXM}EQzw93arF2
zXtn(GTks}s#_2c^J7R13et`V_W@*==IV*m`%Dx;H!DaXvo#;Xv9>O|#ozimc-HHJy
zgA|(Z2=>AfsDDDt;@Yl~_Iu0r%~J4DzIH3(;|w>n7VL&tE(OkwCy~rj+?7}!g?XMa
zMN-g_m`ncFfLEcin2ptPDe!TO8iID=E=j5&#CyTM7>2TNCkpLPQS%W@;$v)Ob<yX4
zWFLgG^gZUc30#3&4M#8`J6$NEJ9-7)g|gI+<!m1E$A4f@6JQwEqdvlCaw%SdvNRh@
zWDB|$S~MHSrNF8&=v`e5W$8UsXY0wlXt)L+9IL*hJoMWvpU+2T3wDs9C-af{8jP%`
zbqe~kbnqWTUAD)?mxjm0R(T}YfYq@-PQzL9eSi6TgJqmD9FN&ZLHTszHq7h0uN3Hl
z9B$}r-+zVD97ZTh;T(K|4kUcZrI0{}{Qn$jAG0{3E8uk8fqQWYHbbee-G<mcedBt(
zuPLwzE9EdkIT_O(#*|5Ee==&V_M<sk(s|zo)9@bZ{QunCFdn=T1r7x+jwcX@%0XPV
zU)=G7Eyl8v@1Iao&*uJ5<W9p;T;5?vOW-rj^?%|jg-=}yrR@UvT(j>x5%XkD=4;K)
z9zmhQ^v4rW0ealw)Gd<s%1`Q=*ON)7Zq4&%FNaU^6vUwd6vxR9Iqa>uadu-nPiEDU
znz7jumcf_8G^h|v!%_~HON-`)cAh8GhAPdQw%s?m{i~3qaJFS0)p%PI<7rQZCMwO%
z4u22&kD)^Ju|tR9X5G-slZjuI<_ycAtD^%dL>*YeGM_Uv+yCcjM%)P;Xc=^WX|F;Q
z$3B+%9H_}>*wfr}2C<`M(9@8D3Q-a#TIRE(W*nUKG(r2YwPnz=pdxUVWj<R={>pDk
z9LXthO-_`%>+1R3U8l@*ax(RJ-ZAxf#(#6)^_KwpuIFYNh3xGx0ysIOQOHR_jY5JL
zPuAk`F&<AoY93DpH#4v}J{_Z(f#uPpiFF5J<8hAXaV+LICwrA9mdx>lJ6ku+akg$6
zPC~8Y{#Hh_Cg!`Si(=mOY~Q?VJZ&9MT>k#Cw3B&P=a)fu8(tS29`y|R8rTOX;(sjp
zzK{J3x-s_d=}!jnCFaW1_Zu?wIu;&h3#1mtH=0}rabULV=>@|b?;+HUlLG7Ukl{}L
zJZf@%KbeUB{iLz`cD-Tr(~LExY4~rNLp*}l8x~0n;Aq5L-qYWbVa>opSSaEG7s5k^
zBRDGgR=5Uj#QlasllT_9p)};;%73uC>@R63@IEx=vl8nu%XK`30T)+@m2kK2F(F1J
zzq#_=+1z*{L!l`&<0>qVq5#(IEHCkz&3$1xf>s6EAJJPZ*48!SQS6N+P;I%ku3Fmf
zE!!K569bY@V;GBujz){aD#^DqtdcwsXUPBG)~u2=X^}iC!d!*1CSJf`Bx&nig>3VJ
z?7tw2+j$KRjA-TZFuufrs2R&O=<kKF2L1nifSQ{OwTE%A>?W83#K$SvP4FJ1A8L*>
yecH;D?+aOuXJ5#7sQ3k_x=JAS1nH-Co&x}qx#<0hR*$;?0000<MNUMnLSTX`BgKXQ

diff --git a/static/img/meta/apple-touch-icon-60x60.png b/static/img/meta/apple-touch-icon-60x60.png
old mode 100755
new mode 100644
index b22792efaa720148458a0b73abf32f1a1aa851a6..67417497412c026832922f090f97ea5fefeb60f7
GIT binary patch
delta 2243
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
RSMC4+002ovPDHLkV1kTOIY9sb

delta 1506
zcmV<81s(d%5%UX>BYy?DNkl<Zcmd_x1CSj_7{KwY!bNP`wr!NoTAh6tpAp-(lXG}B
zV%s*>etrL{np6cnHPiD3QPnT%-mm9-==r9nC!5{Bx{MS72t`dqVGNdFBhDiQK1~YF
zVH1{WeWOtwVF<AA$m~xvH=1Dp*5f#mAQUCx7&c%anj`nUlz(VAp2fGg3}Lg&_!f^L
z+{;8m(Fbdg2;r~<EI=_Yl5Kz$h=Xv+Swtd4GGF9J1cIFSp2lDwgbC@mg8f*F=@@}e
zH6t)nYuk@2NSDNkM=S!h;|N3@e1>)S8^2&8+9HP?$ri(8B$`Na9~K}I^-v0-2$aMP
zM5xxM9-^=q`+t!Ef!WBZ_0NuI9EDFZ{uPWyet(j!hBe57(2<7U5R38%_G7$Yl*bGB
z3XN`Qi^4SsJ;=ZigjgB827WaNz6CF#hy&;J2!v?=E{!b^CR{`p<#*N~*(>-QB@y7l
zWcd`*AWWK$AeHazY6u;B@DxH^JUa}5Q1Bzd&CbS?p?~+C{RQ<rI2}%aQ1B=6n+Y5P
zz1jF{RPd<S83>`^TjVwh+7NpoBz{H(539S5xB+3(2WHB}6%Z1;QQzabJrv6!OxT3V
zMgjZil#5sJluZX6h+s{i#j^GvgJjR3kMUKHd{)lH=Lqp5!4l|+0ho$;nyKiE9w>o8
zlQFAe9)GUD2LT@vupV7*DMLdLA`9}Y&P25Zr7R{}0~4?v$q;h1(FYSy!({ASXn|+(
zHeNs{<h`X&2;M{&*=guoopSLd3yJ1OKkS1K!XzK|;x*)xM^`?E8<>Zjw>CD%CCLH&
zilT}GmBBKkL0FWEWhiZNL83R-YjFfFq4}+y27l<($gzrpmBuRgApGRRO4X$4|ESK&
zOTU{P!mwV_VIRsXeuS2*Cu^AWGL?_FHlZDq#9D_iI*6J$Ch4#MK?(!)Lpp@b($QD(
z(sF?$&N0-wd3~8A86-+^Hr@;2kUglZa6C~+m#l_H(J02~6dLsuu30BQIBbwY!u4@g
z5`SY9jbe$UVLwWn3|<1;ARP7|N+?X82P83;&?q)a8rCAzWbmFyhHzLidMec1Yi0E{
zjpDp)r9h#~8vx;w{tD&nbji=3r%|Lx8b&Ato(kcT@dz+^Y$GH;pOQ`Iy!olZDPSIi
zOXecj<gtA!JFh>K2|sin>9dlCnF^CuUw;UfysPj=%#_`qvg5SW!^P854?j;!8}$m0
z1NUg*QQXhMW3gSO<#-5(4YZ-O97&^yyiYD3D%o)H5P9?d(NWpkk6?vCUPBs$&C>9y
z;^pCDNt~moX0!lML1CbLSmwY2z*5BpfXX<aHxU~x@jP!~iD#uvNoQGH;u(xA-G3z>
zty43dMZDioR6S{17V(x^NVXU@N#b2Xvpbh*ztQ>rylioav@iBrT&8^$`7Dh4vd%Ko
z9ORU(_Qgp$Z$}x6cke4<5H=zOLPrYz)B09IfQ9kOVuvL54Rn?LKp0lbze|4IY6(Db
z^hAG*$6U>L^hFP?Pk_ZSLNG+<yMMbHVX8ONuG)ArEdarq0Gnbyty5^kq0fDDyHug7
z+5;i6457xiBlWAMUr^DL%+z-n?Lh;xfu2M>gv3v%evc&k7lcF{o>U2z3zLuqA@M8f
zdHONde`m8W3AqfyC~sTZ>%q3A?05=$4NB3X{%kq?#p{h}+RR=CLvRH`$A8Z#@9$vM
z4U*2lR=kX&4kTL?FJlKX43e#G*P!LG%*5u>O}A7_L4Iy7t&G9gWKfr9VHwKV{Yn?Z
zBoo_*GjIS45QX|EZDRXyY1Bs)7ULi?491GXBouS<L5^sJ)s1vq#Q_r=#1G&q(iK)g
zo<J_Q9syX6I0%=;VL9r1v0E#yH&!FTr9@YwH$uIBjHf5&;u3_-E@3XZAnaZ$;&Y)H
z`eU7+4{9C7I`l&`SH7n<K8iOIiwz#d+la*&iAYpKs1wD^|HSgF>eZq!mH+?%07*qo
IM6N<$g4@i+i2wiq

diff --git a/static/img/meta/apple-touch-icon-72x72.png b/static/img/meta/apple-touch-icon-72x72.png
old mode 100755
new mode 100644
index 893c6af3250c11ecdd9435ada64b6b68f9737f4c..55457efbd960293efb09cbf37a964609f2393a3c
GIT binary patch
delta 2791
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

delta 1787
zcmV<X1_b%;6^ag!BYy_bNkl<ZcmeI)1CS(38o=@Kiyb_zZH(t}6?nFF)_9F)8|#@l
zuI&x1?Vhu5Jjb=oR^C4%mL1jERoSIQNBn}-l^I_t^Gn3o^?Q7@Xo8-286ROPw&CA6
z1}}macySE>fd|v^30^@jB->DBTY{2`J{X3@sK-eJAPfrNB!3#P1S8NFsn=Ri;?Nld
zSb>8GK$t9mgII|IbVi)p1JeT^pc-BXn|M);56}zoZVOIpyoGuMAROYyblmQiz}$it
zPzf)D!&ab&Mm-a78}7vINVFq3ZBd3J5C)ycAyi`%7GNSOE|`b~*o0~v#CZsbN_5xw
zNIZkd*oNQ2gMV3g4Yyknm{|0~Cio$AI*RT12H(Q{XooZ;A~vLqM5LiD?#H+A4YuPL
z#1;1Ak&t@!!d#qy&~OIJaF3b6Nx*ApH1P8L3qHq#xD&BaUYtAeAils~;m6OAbj5M$
z*b1S;UvR$}!AU|X_UjCc2LsU_u@>FQ9Z`VHkjH8cgnt2R(LCDV48c(di6Ck*5-lD2
za6FF_3h%^1)dJ&Dsv|h3Faw#0btpLTm<*v{Ig(WheND$>wF3i@;&8Jg4Vxeo`~$6x
z7T6CB5E6gIBZzZByQ~@h2%(@6os1OLPRG^o;4T-n=x@U|2nAJWYovu-hCqbiWVx)%
zlZe?63V+riO>aRj;7EkW>TZ{In!k^;3VpZ{dJAZS$_OvyM_im$xDzWN4EPP&>ur3!
z1)t<oJ`iy(&q?*c-ywAPHy+n};vT4j2xA6POwKr_<7xa5`4{{UPa_?vis$Z!4e&}H
ztKZ@Y#Ogii2M9uFs6m!VU6wq&jy2eUGw{KGfqxHYumfxGI&zU@u&kCCh!v>9e^G<A
zcoQ8$j&F+oNYFZ27gS05RwGTwIA)<7I}Ik*0@#T%WFgLApDh_}&<*X7irA3jZpV21
z37xf0R3Nz>J!ln0a8gi=Mg$=g1<{CNB%9dj?T#7nUXZWxE(rVP_hDd^t=kHmf-uP`
zlz*dHly`Io48h++F5C*FUU_g|9FXKoIz$ni8Sp`v%!lb{s#v#Mu_#Q^?*MvVdGIjF
zt^c`V1(Hz#AB07GC`Yp5qxFsCQ675bi05KSn)E@%02SjDgvCywSh0=|;TVL5#c0Ao
zqNk+Cz8!Ze6r7C)2%9t@OQD`kv0ZY`o_`!9UdBlX4c{o{t;->7R*nRP`i_Foa1t+b
zfcOZ3FloqdDHNE8oe(zLfn0_9eh=O-ZLjw@Kum?ua0vG+6!<!V5H<_qb%px&#vup|
zQ)46vrfRfP=v%FUaL5{@8mx0WREK*9bAb3agoaH>Ggw$Uc0f2}2Qo~|WB)rw@_(6I
zfJB3ZJ&iLE4mph{6|#^EAT%6{k@UYNBGzDGKZFm$Azpk-p}{yY-1%Z8FVqT!7hXR6
z5DxJpU!mR=5E_Cy0(3J#@<;6EBX;v8Eq_U0f1mkulRxt}8;X*K;<oFpt1;5#uErEA
zI;*)3J!U(QV{&KpU8~X^We_$ivwtAn@zTYFS-m7-*7O=knAKa5Fsnz;>mlWO5=Bv@
zT#w39u6mO8Uqq3#FSj9SUxsAGI({V?s2mbH*l)$KPg6{{aM)*B6vI9p@D~U@!#=54
zZqdMDQ<R(hxSd29nnqEtL6Qr%9I18=Jtw0W4JHgdH$*%1%zs<KBk9lOYk&QzGpZza
zky|D&WFjugy1XvAd#cbW+#lbUT;W<1r@!QcOn*5IFZ>sHaXMuBOAeAuC_f8zk~{SM
zXeLn2v|s{N2A;&Xk$=Ir@FdcaYI1qAAi}6c_ei;sHzQ2J8|3yWc#=nakmO_G!<&fJ
zGl|m^q0jT^H5j1BA`ED5M}KQ0(|`{vOapdnaPGn1Ai_9|7mO~ooS<VOdG<9BoNQD^
z_(G0HlF<{l!$t@R5AJsPo#TO!*dSkmV9sKeM-k_;7xJUh#|o%NU-gpoFNfOc#BwOf
zgwa9R2_dl`ubQ<;twiU7x|vQbsH4nSWMP($e&10PBi^jSlQ3B4l7GxPypC2j2B#HX
zM;(GXf-@LNW>+E!B?cDtR$`FFi+bB*kb#X2_MsSwR$ZwCyov^c%fi1jd0F^F_zHi4
z7ea>yyoz``p7p-i7{$f{-$QSm8w<2UZ+s7<v^N%z@?#_V+Wk^&iwTNbQ+N$-O>qcb
z2!jq|0@^ygxrql}2y~b5VmqG4EpFN#rw#!KhXhcEH_^(C>4ffhA5{))uvCTj(fwN3
ziK-LwZP=pg09GI$oe*~|Zt~U}LrmP{tsaXp1ijt8$(#B%f$w69j%@<}jcu5MckvQ>
dqKRGg{y)se!KcuzY%%}<002ovPDHLkV1h_SJw5;c

diff --git a/static/img/meta/apple-touch-icon-76x76.png b/static/img/meta/apple-touch-icon-76x76.png
old mode 100755
new mode 100644
index eb5cbb8c02b2b5847041faed87f5d3a691cfcfcc..6b520bd8bc78ca7cd38eb1818887a01d30db3df0
GIT binary patch
delta 2873
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
X@)-yx8#5>N00000NkvXXu0mjfcx{HD

delta 1881
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
T%?suK00000NkvXXu0mjfYzk`S

diff --git a/static/img/meta/apple-touch-icon-precomposed.png b/static/img/meta/apple-touch-icon-precomposed.png
old mode 100755
new mode 100644
index b2d883fbe3a7412863e61395516617c336e5b354..973557359ab488bbbfc869364757716e27eb03d4
GIT binary patch
literal 7906
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
M07*qoM6N<$g6nk|D*ylh

literal 4512
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

diff --git a/static/img/meta/apple-touch-icon.png b/static/img/meta/apple-touch-icon.png
old mode 100755
new mode 100644
index b2d883fbe3a7412863e61395516617c336e5b354..973557359ab488bbbfc869364757716e27eb03d4
GIT binary patch
literal 7906
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
M07*qoM6N<$g6nk|D*ylh

literal 4512
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

diff --git a/static/img/meta/favicon-16x16.png b/static/img/meta/favicon-16x16.png
old mode 100755
new mode 100644
index 3226c78bbc723fc754873e0141fd3802c68e90cc..687c8ead6bcaff0a70b4eee5bf202b04e2d33e4f
GIT binary patch
delta 558
zcmV+}0@3}_2)qQ48Gi-<001BJ|6u?C010qNS#tmY3ljhU3ljkVnw%H_0004VQb$4n
zuFf3k00004XF*Lt006O%3;baP0005eNkl<Zcma)5OG^S#6h8B8M8P2F31LMA1r^bv
z7C|qfMf4(STNM3|6x-&QxYcdDs2`BIk|0bsEzSOb(<;fv+kZVru3SyS4~F^fH}{--
z<~!#CG(-2T=v}^uYI+Nr>1FtEp5^ZZfE9rD=<Zex@3jbO_vm~N?iEpr2-eL?iUG_*
z2jKf&tKY^dfa8$ReDd1H7E3*)S*cWF2;`^d7cD9wSONLNWiU*E_&zv1ret<B#x;kM
z;kurL`vsgNg@15*c0s}O3rn;f8=qo5y+g$B?jI<D_(tY(vq3j}Ss`GlwjHZg5(+Z`
z<fsjgPO|0oZTVLUAeS#n?CBk3%@~`QV(XhbEc5c#;Dsu?>o}jhAAa!r{ePTyxZ&>4
z7tBqMH0YS%T`Y3>Jj~9_K(Y7%!O&HG6LL(xzqbpS%ztx3J9!Iz5xITnwlE3}L?e--
zh6bb2(k~=5O*PAWoK7$!o@`kb#A7z}5A@Ngfxs{vA02Wn0@0f|L}T%K1+MDu6VatA
zL_1TdG?|B|BA5G5Gk`6WM_Dy1k9;u)os6;qxvIxlL1(p^R4y~ud#kC;!&5H)7py3X
w?Rtz8Y9~ueSTx#6em}C(buM7ZG`dar1s@tGu-s+God5s;07*qoM6N<$g5R+Dv;Y7A

literal 1106
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c
z!@6@aFM%9|WRD<U28Jp%28M<f28Lfip@tU>45bDP46hOx7_4S6Fo+k-*%fF5l-L#E
z6XFV_-Mjt|IrRVk|4Apg-GQ#RDGBle1`E6As+a#(+eu7*cV|)k;)@B{6Ad@LZ<J#a
ziu|#Ki!D0r*Ea4q4O4kaW(26*R`|L6Md*?#-&anGk>BXy&6a2ZG>0+C+ug<XLT+Fr
zki%Kv5n0T@z%2~Ij105pNB{-*c)B=-NL)_sj}$*>Aky-FOW>>vx3s5dEi4PN{`r5u
zw+_F|XS45f-k;+UJXjcc@H5v@A%|;+o-c~wY}ydD+I*J6kF{l2CN{kJmULM@;Ly<v
zx0YX;D5+hf9?Us4Epk=b=c7fgIeQx)MJI2INjy-t#JSVNEUb`k=k*k(2MKXj42?hS
zZ6^L{mC+S?b$|KnuP2YWnVFs66yxY7JblvU9W`AiyDik?udWaL{p_)^-j>Iwnts3E
zdv0##`O9zKMf_&?5ijv~;oWC@fc{V|ag8WRNi0dVN-jzTQVd20hGx2khPp-;Aw~vP
zhDKJVrrHJuRt5&j@1wm?H00)|WTsW())2Jm@i(9bH;@g*`DrEPiAAXlp1FzXslJKn
znaSA-W_sp&7P^)SKr2mj4NP?njT8b6%@i_9N(!v>^~=l4^)f-Kff%S-FTW`LPTO0c
zfeaEL6GJjebCayBT=J7kb5rw5tgHfnN{bl`m;c|bkERA}r<GMkYG!&y34@`f5kEsw
zD^QI%k~vT{;h8BV86YK>*C=uTl}I8f@y*OlEvYO>WdOTMzaTH&ep8qqnmN89KvfKe
zCKd+9X2zE0rdQf+%YjPxk<1CstV(4taB`Zm$nFhLDhx>~G{}=7Ei)$-=zaa%ypo*!
zbp5o%vdrZCykdPs#ORwEB_^kuo13N@8YLwe8YY{W8z&iBrdcKdL7KT?q8?C(9?*Ts
TmB&^BZD8<p^>bP0l+XkKxk#@M

diff --git a/static/img/meta/favicon-32x32.png b/static/img/meta/favicon-32x32.png
old mode 100755
new mode 100644
index 5781ae8d55cb7a2d44352dc32107830c8910505a..e5429ddbd07d2f1024bebc4aca994a5714ec7076
GIT binary patch
delta 1106
zcmV-Y1g-nJ4%`Tk8Gi-<0047(dh`GQ010qNS#tmY79{`x79{~mQY7#I0004VQb$4n
zuFf3k00004XF*Lt006O%3;baP000B=Nkl<Zcmb_fO-vI(6n?wg1<Y32NJ3B(si+sD
zP>mN4f*MVX5k+HSq7gM3E=HrqpTzhF(Sy+__;c|B67>v}gMSwT#dtGm3pY8i^x%;$
z2NSf=@x3X#>~43u75XLZPCIYk-^}~oj07b^*Fnv;DH60WfT+YE0utzaih;=_FeHE^
zj^hhibpXILOVKI?i&RBIm7(h_$IjaZOGDqn--S+qIRlpGfUe7G_K_sPbyxu~Q{D4f
zwNsQ4fdf?$rGG*h!9fJd0|T?M-!B_-p{y1yvvC3sNL96{cfyl_vPbSkK_(my=(<vo
zO%yY(V<EJkI|D7v&Ct}e10wbH{QuPWI2cA624gYk@BakBPN+Kz_JpizuapXni9RP!
zoo1O#h6Q2DFxbV*9c=T~Z9-ikwB^YFPyLk0<(Ds>!GE=@SM1;M_%|MPGBu7_spgqz
zY2J%jX>^A=Jq-sB9pO(ea49y~OMzbXiM)N>^~4q3frE#Ik<lE<I5997^Ocn=!`)!5
ztVrR-OC7eNWHQBSYB#WA%S4}^*Kb`8jE;_pWHX#y6;-<+Qf5U%Pp@(MO%BrDaISX)
zj;;4-&wuRNy+`aY+7_nY8ND~{-Y5z5pVK*d$8vg2O`XVzUI?k-gx}=AP|S`#$he;q
z-0<2u*4}Z0bv=LYzYi+31Z5!OoBk=IKq;j+2sO3qZTYLWyIB0k6#Me^yKo;675jF$
zNThzTl+yNpQ6!%r9BVylkAI~np<!JmM7M7diGS-M2!QDztm^9OAaR(TowdhxwQFI`
z>M$sZB9x~L__j&I$dgCZK`ukFVF*GhHDQmpG;D^jrorUTNs+iIOH49+6;0$7H8w7#
z-85(6^_zDhWqi)bdTl3;fh@~lq|?6gc(O7;7L?(Qn|GF7h88PYppq7rp@@iRH)k@Y
zgMWzDyXL7Ph=fSFA4yqN<SpX@B3h(k-%=z4781#1ffN3YZ{W0DLiCJNF+o<t-AW1E
z{=dzrv+HRwXM4$Zz8zO#JI;yQ@x%M~;NgRNfI30KQz~t=p`l^^q>V|HLamruvU5Y;
zymeQk5*B1^$8(M|VyH+KtlnU)Ycb5sWPkY571I@3YQ^p&nOvDo@C!!~w4XZ*$6H&G
zDL2{&5aJA~|M=J#^nd*9A}=rK0+U;XN3umB_n{P*LT1WHkQ2)VH!k6!)RB7ku^cCq
z9GoCQC^NWm)a_b#5M4~loC&|kEy%uapkVHgx)W)-2UZBInjXI9bN+Y4;LB;gL`xsz
z=sc7N#+!`vVP2Z=78x$x0SkC5QGRFJ@Qr;)2Tk~lNQ-9)GKgOWQbhiGuHp6EEbV&!
Y4`$ZA)EA`Hx&QzG07*qoM6N<$f@ls1Pyhe`

literal 1850
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyacIC_6YK2V5m}KU}$JzVE6?TYIwoGP-?)y@G60U!D<ErgLuK5U4b@0eLDku
zLR^6g+`ImdqM;Q6|NsAI@K=flM&87dAirP+24=n5^%p+;eSf}M$9~qmJ951*|9yRQ
z<pisBgsJV(H%l{|l*LqBR@`+Hn)bSj-{a=znO1BZTEA1Sg|Tm0!gS=6+16z}^_efi
zZTQ6Je(IkgSa9g$pZz%kJjo8JEc!}o<kwa>AKVxE*z(+N*R$)YW-rXX{Z{7Po^HnH
zU!tCwH#+W+wzwLbbkS&e`G%c_vTfg_!sc^%0UgJf<n8V<X&TFW1t5pBz$3Dlfq`2X
zgc%uT&5>YWU<&YbaSX9IT^jr{J}6LNFY}{ng^p?bLfX!P)4M_pLM9oVY4K5=FOZw{
zBuHxA)1a*1`{w@NQLTUbaQxZj*2U-6l(%hcns72Eb!Aw{)vV1|ZulP2YW3-hTHe*P
zqIBysF1EnGos(rUF2v+*_s(YUyD4q!yIgu@$9&7v51$p^n-(^I{n_`q?_a#J$`93#
z;R%r2e}(tU7dB_t_I;-pO3AT3tW$b<{$u084n=L(btjVA7BvObi|#P<IkrlpC{`$G
zk91dG!GEtg?t2w?OFm62y5n+w#*t2@kIObDI7Q_5X78}Qcy#{7xP+i-?!hOmFRxm6
zX33>Fh1-pb^+opoZ?Jviu-W}lf7;=nmaVs+FHxLSVs&<n*U<?a4#Ar>Jau$+7FNE{
zOk>=$>E@C+H4(NC5)$cGFKlw+v}tq{JHm5v{lQ}*JEB@21@^GGPH|nUr{U9jTYZY*
zU5^Xwt!JON{jxul)R}NJXm&u8sOFl}hpug7(XQq?t3TyP)5H%tiaFX+VK<8tLblE1
zlD>83gjw+csnaVvPCByQI^9xwGxZ2lZSzg@jZY^`p4%<zzIUH4??3SyTQ<K?kq=k-
zANkk#@~(Az&MaAaOPsl^O!DaW4gXjDxI6FQ(WfqsCo?K)6~xlmUwpf;(ODtuB?Di%
ztL|;%2Hm=vrG0k}%-;Sp;{CnP67pKpw!K&W{{PF&u8V9xZt+`sWy_zcyZO9AQ~zS4
zMDpi9*VkCgnR;it?z+1Ff#<xwe4cJ$+i^Mimu_5jd%YI_L6JEc^6TTwjsEoiHd}ry
z_tBs5>t=5*3jGo9+Hk*cwLy_8Fu|#oxJHzuB$lLFB^RXvDF!10Lo;1NLtP__5F-OC
zLnA9wQ*8qSD+2@N_tBu_iqMdopOTqYiCaU^rpMoa8r(oO6z8XvlqVLYGI-`Drl<NQ
zre`K+E12n->sjbpDgdoC(KRsDH8fHPG&EDlC@Cqh($_C9FW1WisRm-8YQ6lT^gC^D
zfd(>2fJ_X@D9uf>vU15!F3nBNE3vW)04gnJFkJqBw?3L0u$@*`8L64+86^ycmPY&x
zMXf+J;z;H|)r4oJlw^RETwbHd0aPN1q{KHfH?^d)Ae8~^D*b}Ibo)(VerV?Sh5%JD
z7@AlZ7@HYenwwr}w=D-M;YTtjII}91!NAFB$|AcrK&db!sn8%#hP2F_RG|0ubMs1a
z^3(Ox63a4^^Ye=J5fP(rYLu9qYHn_tYG{;{WN4UdW^SBhXqjf21O#d3hKYJW9eP0b
UC08C>3ABO1)78&qol`;+04vZu`2YX_

diff --git a/static/img/meta/favicon-96x96.png b/static/img/meta/favicon-96x96.png
old mode 100755
new mode 100644
index 839f813003f6241ff679d213c0089cc7313c0367..3f9f8c5e2dd6b18580701cb2e39e61f56ff322ec
GIT binary patch
literal 3768
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

delta 2615
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
Z{s-_GSGKJZ!0iA4002ovPDHLkV1g77)0F@K

diff --git a/static/img/meta/favicon.ico b/static/img/meta/favicon.ico
old mode 100755
new mode 100644
index 20190c2d22c6d28b1bf25ce567a7e919a7cbd267..c79065de598a4fdf759bf621aafbf669df8d7ff1
GIT binary patch
literal 15086
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

literal 1150
zcmbW1KQDt(6o-#LsYWFl5-~{!gOM*_#b#k(=_s+<tE){gSdmEBB+R~onZZaRtQgeu
zwC|CogQzsmd(L~#?|1Lbz4vXz0KaNAc-CTTIASUy=718FPMr`zZ?e*%{oeIx?JWh2
zz%pFGGkg`8TeGL;$7x<LO+0{Ccz_dV6qsAHr$%l1jJ{vN8#G}C1|c=(*6gWKn`4y7
zbKXtzZeRK{+EbJ3(7OUJ;MnP{kgvf}fw?uuQKMFmUial5YG7ZT>-m6Ifw{FDL#-aY
zPjCu3w{yKidNW$Hmut|Y*M6g@+dC|3>FbX6)QFz!nP<IU|9{ti#+-Wpvwx$7@0|G8
z^V2g1J8%rEFbn<MpLO(~;J)2Jp66fg?*#e{$g{mBcTKtPj*<7c_xtgz@1PFbun!B+
w`yKxF{a&J9)RSm_9ErFcifA??O7(~`e;U<thxxGx$#=?aO>-B|0N(M4Z*Gh`bpQYW

diff --git a/static/img/meta/icon.svg b/static/img/meta/icon.svg
index d82857981c0..c54f3122579 100644
--- a/static/img/meta/icon.svg
+++ b/static/img/meta/icon.svg
@@ -1 +1,13 @@
-<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#FFF" cx="256" cy="256" r="256"/><g fill="#020814" fill-rule="nonzero"><path d="M339.751 202.851c14.69 0 26.6-11.91 26.6-26.6 0-14.69-11.91-26.6-26.6-26.6-14.69 0-26.6 11.91-26.6 26.6 0 14.69 11.91 26.6 26.6 26.6z"/><path d="M372.5 202.95l-1.1-2.45-1.8 2c-4.35 4.95-9.9 8.75-16.05 11.05l-1.7.65.7 1.65c5.3 12.75 8 26.25 8 40.1 0 57.65-46.9 104.6-104.6 104.6-57.7 0-104.55-46.9-104.55-104.55S198.35 151.4 256 151.4c15.65 0 30.75 3.4 44.8 10.1l1.65.8.7-1.65c2.55-6 6.65-11.35 11.8-15.5l2.1-1.7-2.4-1.25c-18.25-9.4-38-14.2-58.65-14.2-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128c0-18.45-3.85-36.3-11.5-53.05z"/><path d="M257.95 197.701c-33.699-1.1-61.349 26.55-60.249 60.25 1 30.55 25.8 55.4 56.35 56.35 33.7 1.1 61.35-26.55 60.25-60.25-1-30.55-25.8-55.35-56.35-56.35z"/></g></g></svg>
\ No newline at end of file
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)" fill="#000">
+    <path
+      d="M61.44 256c0-107.45 87.1-194.56 194.56-194.56 43.26 0 83.2 14.1 115.5 37.98a73.34 73.34 0 0 1 46.59-41.58A255.04 255.04 0 0 0 256 0C114.62 0 0 114.61 0 256c0 141.38 114.61 256 256 256 141.38 0 256-114.62 256-256 0-29.6-5.03-58.06-14.3-84.55a73.04 73.04 0 0 1-55 29.59 194.65 194.65 0 0 1 7.86 54.96c0 107.45-87.1 194.56-194.56 194.56-107.45 0-194.56-87.1-194.56-194.56Z"
+    />
+    <path
+      d="M506.74 204.13a254.3 254.3 0 0 0-9.04-32.68 73.04 73.04 0 0 1-55 29.59 193.66 193.66 0 0 1 7.16 38.36 79.98 79.98 0 0 0 56.88-35.27ZM256 368c61.71 0 112-50.2 112-112 0-61.71-50.2-112-112-112s-112 50.29-112 112 50.29 112 112 112ZM424 160a56 56 0 1 0 0-112 56 56 0 0 0 0 112Z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h512v512H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/static/img/meta/ms-icon-144x144.png b/static/img/meta/ms-icon-144x144.png
old mode 100755
new mode 100644
index 22a25145fddae1fe42eb2c9da33a61077d2334ca..f55188e7aa37f38ee5232854a18321a2598c44f5
GIT binary patch
literal 5782
zcmV;H7HR2;P)<h;3K|Lk000e1NJLTq0058x0058(1^@s6=SJeV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH7Ar|aK~#7F?VSs7
zT-ABUzjN-cBrJng=}d5j8Ecu6@@Q-=g+NOKmM0A<De)tenNovnCp0AlKS*FwAlMia
z2uT3jq?AGkvVoM8P;4M1#$+rzG*ciMB&Y4P8B$i1G<c>nNU@ek+P(MW{Lk)Puh#pz
zuXFE}_m?dD(5`p)-v55DbIx}d9e1Qsl+35)jSOcj%}DeSiIgCQ$5MC(BTCnLr69_x
zzl-9vd}3C<Zp;!QOM+#okQgBvAE)C8Mspe^mK6!kGQtx5@_~%}#wiLCK@iXg<7~7b
z*f7oHrKqN|G)I|Z0+NF1Fb5J$3`nc6yq+b|jewx!#U#FmW{lyvWTobSfKn-*%&(DO
zWV!q{0~7}Y4a@)TH1p<g+^thg1tcwvVGbDF+7KJj)T1n>+z`c(m<gyW%{%yNCfLTn
zV;TKq<z?8MF}K9YD#b%UiTMKt6PsgiZCYo@wAfB6Ob%1TiMD`_KjF+qx;Im>Em0Oy
zGzE0L3#S?gDQ~WgqHBwofV$E~2ft5#tQFLz7DG{skqn9mykp*G&iN2AmZ3KF$Z&&i
zWJZ#NnLj`gAbbl1cg4k{6p^A|jL1rBv@~pM#3?jT0PMa`if2Ey#p4F)?u|ELxhX_K
zvOrzwM2E3kmiYUrjUR+&jkL!=yz_(&oEuL{>87cTU!-Jgw1y=T)50wL8)-zVfZ(zi
zvD>70x~Prcbjf4;=LYXcSyp~8X+o0=Yr8C+VD#UbF<0tvX&MBC+K$l<l=Y(}E(%yc
z-5FW3*gppcKI6hT7qm2=&y7$(1eV4dUEQnO;t8FU#c02g>|RX)5l9dX@sLGB?O-_)
zbjkCug7c27u=1niGrkL`ES@&eA|Mg@DxkJ_B2EAz@-c{R2h1_S*TC8*0m)Q7X}sPR
zPiz>MDgN1hr1(B$VWm1xTRd?hRjkc*rO6|nEl{GPd!$`qjwi*6b?$8PfF}W|u`Na$
zDW>!<UQGS{izw5-n0itvdA*2wdU_~@OKP@39UmX3@rel<8+%LMo}kguLo|Bm5M{G(
zsq47H1Z^wibJvqgTnh-J>P+x$6eE^gbYb}d;n*S(LJ(u#jPZekKUSjJ^X&8LcAOB*
zy55@pt*dkC@~FipXogspFT0cmuUa+Bs`w$AdSu7Ol!$iidLk}javfB=I)X+=_nQ>q
z!BGfh{km&u{dL!>+l|B$q>uo_bo(85(!m2StJ_hf7!M_vI$gK#_{d=jrJB<dL6mT$
zXds^I7^YSH5>%~!XXj&&)7GtbMOH{|;vt7eN~P>?QpA8*)?N2G+OY2PO)ZY!xOuPJ
zx86y+9(y8^LShzMT5zzC(a|@LqU%~GEzag!Z+2~Qf}j;qDc4pKQpCubGr3b+eR9iV
zVI|iUnFW7+eSP#V-+Pk&_On-0SC{uee?P5OEB_7zzkJyzX~~ic>EOYaRf!-Xq?pmk
zggG<Z%9C3>V$pJ4>!qvO^yQn5aaTHBS2LV^7SxrtZ2byNND-yw55orarP0x!hvDj4
z&dOT)hSGHn$*aI7CAA6!1K~hGUWt;}nt@WlXRf|RvyjAYbLPF3&7Rf55sZfQDY~qG
zQq|)|xDiJ6YqHra;n2V$z_s)(T&NyTr~8_|w$;D60p$S1O}c0$pl<r@jAZxzu)AbH
zJU`m^!YuRd2iYtNelJTmF)H1~&($zRvtM~C)l(h<!8Hn%wS?6OFTz480M<wgsw+rt
zX``n!{uae`>-#B0aFU*umZzC`a8f|C6La9ek7>_y&(X8be&08j(AT$632F6JSE`^m
zXufd6muScRe@{ASW`!Ca?Xay6!~@IYHATlj=#KjzP~%iV4}8K}B2HWO$xErXH@MQm
zX@BsCdSap`R;Yd&FRc&fbQ^^PPQ>@0e})z;SkUl!jVup@^R=(vOREOg(%u*M(c!~~
zDQFNkJ^S4A^v_Q{O%pP^>Ps&StVXr>#g`~>7^Mx?dBCz}vbFzQhcGj*>X@fmB(1~{
zF!8tFahDQNnAjF+_28A{CrJHIJN+zm9XJiFP@S_7ZszsIFaE=IzznmFATw&C;0U^(
ze(FhI6M=I+e1W#PNU|<;YOT6Z%_*%?JhxFu-208YT_0pvopaCo(@0LCKta&&><OaO
z1@B0#srh)F=P#iUSf@tP-4zLuncxz(%bKe&5*t*5_bL+A56H}G4TUgZidX@IqE3Ne
zF1!4SSWMjVd%O#ED~+TK!yGV8+FkizEejM%;QZ}xJ?J=Ffp|Xpu}{Qi3h9{7X}4wp
zNwruTj(KSI-L7;PbstPOMIo*pb{1AiQ9PH#YC=0QCcngvWI_8NtJ22oU->Kn8A)S+
zG^5hoCa$Yi$_}@M;fJ`fbJyeK2N)L%1KycmGwXiU-?h814ePFToOK~sj@!xy8%!Yc
z`q^Q5FkwFom_^HH-9LIWl`=Z=?~+DfeSRrxK2AWY4gtj(eD9yV`V%!U>lC<dlq$lU
z4r|UNd+o{h<tz*lHfd(ltv5M(K1R<`T@DIZ!iz5Y2xT&hsi$XlKtCqm+pmR$2&NIg
zwK7OtiJdfrJ(s#N8!KBN-9r~{tWOY?SG8_z`K2^?<*JsmKzrTSjvWtp`aC!WD4b&5
zS~D<<;4^=7P3YnQg0bz^^rTvmT#kX5U|QF=FOk1=Ctx0opW=aVezflg>aza2&pRq1
zz-nOX#?M~+iF$pb46+fhM3-IuSIQb8xUMdO;yz{&;O`&3_>#!1;$T9Q<DilS(m(d)
zWV{Op?$3NO-4Mzn5C4Oj(C#OGt@*;|!`gfl9iv=Tx8opXfea(5b%z`^i?5D&YSny@
zarhw~%rE-stN-e|cmOQYOZ#4EI_0(*5DmU-)Q4n@WL~Y%Q34WN43I_!2UpeoTXoF`
z#Wz3JP7MxT8OXHQO7L&PtquA-b)yw7zGNBcMDXIaTuMN4piFc8(|XK+>8D<;4^HT}
zAAXQ@Ek4A1=@iioH*KM7*4;=tVOCKy>gO&qFw}pv99=tjZ56LmH{nuX6?6m38T3#~
z_xuxS)7E>a|Lk)KhWo~ipQS^u|CBT_ZqDR-d1-7z+q&R-DQm6R2dS$U@gPk`ttAXl
zB*c5WDHgWEqW*K}n-6`57H7^WJ;JCzb1rElrS^QIL_uo+-QQn3$gDNqh0MkaC{zX+
z^E3nReUGg3_ysJ^ip&0*zIyLNboaK0Xu$_gk;jdfE>b{$^kLFUGM8p*{tu%^NfU+X
z$+~~D=Q`WhUfh>cR~aO5Wp2m6=1b9h;ilW^_fI>W-hc83)ME_B8oxJrjCko9BFg0^
zX~oC?gtQ@OEtgfrG-;xq^|7(75U#yWSJ>oYa#~P$`7D!@N9cneJd;jdaEcTQR~KeT
z;c!ldyfAK*9%r=R_vX_XXPi#DfOcdIB+{gbbl<|3pX+7B8bWnj9S#D!FQZ#VM_!YH
zVd{s)IINDL1jINmJ;o`SWYlwlptH_AgLEN%MIV>uP+O4Tq{xOz=x#xWvZ&F@cvn6C
z=Z#+|!Egf?LtVr2FkZahA;oj@iGq>|E(LTZ=|l8t-L<(t<3vF2)88mrADh9e+}DME
z`Nn@q0hI&;cU7`JxIU?iXu(OA98D<3K|KLweYKF0Y9H6R`EBZ?*1w$F`U%`un3-2S
zkj^`8!eDdw*Z)^^T_w>#DDygtR;RaH$XLjb0xDiUbk<p<3x>^pNh4V1+lb0qklPiP
zPU0-xTy&wc83;D-{Q6f)G#%1KoivZ=WcfRM|A`iz(80>$Q9-r5PW9@uKmY<tlO|F<
z_3M?D%ay%Wo})^p-~DG}@BJ^GlCtQ1Qb6-MsBCc%52@R{D56xVmo$=2kVYC+W&LWz
z)E8k3)Z<|+E`b0VagaJpO#L6JyQ%?E@%Z8LzFuvE3dPSw5o9c@dA(B%n4HWhOC#j}
zR4s^6spv{7#fPHo$8-`&0i{xU{dgRhoSZBL(4^uaU<;=5;<)v<M<OYpp0<FFAuSUS
zSRlZ7g<ym&BB~IPKD1_Gc4k#;<lQeOqSJ5r7_hR#Eh^he7?em917@R?(yRM+AT2LP
zCMQWJ5KxvhF+Ne8rrD^gDezLq85xc4QfDu7gHS`VMPrM_PTx5<$~B@RM~;w2vRW<B
zM3dT1rLf$JD9S5Vvo4bZY=SpiIJ`WV%8l6;=<T=PCY{K!Fs5zxwiD~%HXXNj6pR|E
zZMn5Tix+*UWNnUK%EiMfi!|{YjTT5q3nUn6TWsVcKI!*RbldfqKMf50#M|tGMI{SV
zd8u||#gX|#qk0=oa9LM~qy_RKAS}j<8d$~ZmP~)Y6iTA(#%#gZqN#NKTHD<)6$7y>
zX~Ic67N;v$E5WZlO0f{;c6&Lo0|OVSVqq=8RFl<Mgq4F&V=@L3S<(ciXtWxiAc%H5
zdJS~$DbWlsy?n4Rz)3=((*i*|+?1Y$G~(n7qT9P$V1fK<=Hvw|4DezNomgU6I-SS_
zOuDdqGD{k9@+G|p2z>FzFNNBW0Pl_U@?NNHP~NNntGnG_p^zBirA9&80%<3|#(^al
zdYYaAcX`=gUJ+VakN5VvuB~!*Wo7JBEhgO8oIH$|n=8m@NShmjfSjCAFLQ|jewAT#
zH2d_`*Lb!F*dn2tdV7P6z4eyf#G#~_Vsiyzqoffhb(-~RCuVPht9ZXpYuaNAT{ZAt
zUTaaXKDD}t)XTthXPtr<HDfnd&>BcPF|`m68bEmkClnpdf{cl>s&(Bbd?{qE9$e+<
zhoigcCM&REbzQuxzrp7JAO2O#2guKzX@c542ievaZ}>Z3`uaHCp%KExDqfwK+&q=0
zrtHB~^{um{5hpwD_4J%Xn{M%Er77CVq1WI!=Uw27*+*81rOVhz#jmDNwbt}E%D{B@
zj20;UOci(TDLYi2oWG4Rv4J!J>+{Bc|ED7}?PZO5J&@&LAtJV_Z1oopp`hs%TyYSe
z$7wqnZMzp9WyqY#t;LO_U0RJ3SCC;nLmJui<(nO?8%LYpbI-pZu(TW}4>SL8-B(ow
zpOB)#Sl+>dF9&wA&;Sc9_?%RpwQj;|WAc@zd1Q8*-!S4JH&$paG#al5TK+oS?kWW9
zGpo^f#h$5CQ=E4U=v=8fH8o9LU0sfLIzIpW^Hc}ZS6+RM<`NK&(=HzPF@5)`?~zsn
z4GZhYKiYR^6%}}A_eLh@KGKLAD+Gdwhr+^5FC#x&A3H+OS~H&;vhU8C(rQg7he$Js
zXKugaD@~tQorPfk(I~G%Z54cnr=N1(h7Yq1!Wic>4Rg5i{xN0Eu=a|_FA!_Toh(by
z(a17LARg3voOX{@rGtwvA??)Iz4_Ql^%mbwA%OD##KdnLy#{X2%T@znQgmC+#q;jF
z<EoAo5<9COFsdIAV%|I4u<!}HNF$gpJvBW=AHVoxj$Vf#9988w1=a|dzw`Kz`s_}*
z<<`x#_r-mr8^I`Rm1;kg7{@+!YKj@1CrC#!K$?L7U{#Q5IR(PQ9uu#;_L|D>q6n<b
zop)?;)iV(>;QilxAhewdr5<(*Gry<C<2C5&N*k8m%~xz70=Ol&lj;#zVjfP^;v%@L
zN51u->-BD7jCWOHk9}1?UVC97o+tw*3IVvHPhEb6sye$_0&VYC@yNpudRpP?7qB|_
zeB-O?N8x0HnM&-GJw%3Ti3ik8c@l~F1A>eF6cVkBNLMzcs=RHZ_7;_6R(|dF;{*t2
z{dL!>aW*e|bc9y#seoB*X`wJVT=Q>@UKmzNZ&OTjf8cpSnZ0q_);sPB{6ye0V+TZt
z$Lr=U_7<0+y5kzDdnFA86t)!ts?g?eZ_!2!A2>+69)E%k9`J8a6rXL`vcFI>2<?(W
zEsN-csKj!OtdIITH6d&(1e{K=s;1t_RC}M67X4wQ{m`L*Z#t(3p8@Ok`xh^w{!G7G
zcH?)f6$Q7YXkvXpQvpT63IQde7hmwS*svD0;wbyXp-}_eC%R(*9YHz7>~%GVU)0OI
zDrw2a8XfbVkxyMg5x~uq2dB7oKVIDyM%S^ec|^9mEKeG1gh4GJlEy1s@HM2lI$evs
zFTSKw{qxT|k2*U$18M12z5c4z_i+1JAeftP*{q6$Q&UqE1*G*^NrggFCATCX{6k??
zr)z<V^>?3onlhPSy3$vQ#xH@^6Cz@;OP76$_U_X^JW&ruY>PGh-tN|(>j2)_{U#Io
zCY-gx;8m;C)L196kylsa2e3MDS56ie=s=BmP3KN+_4%z?Ap6Ozb5u%h4MhmFjM?+t
z^XivSJ%(1V&{(;toi6P6gK)m~^?Pa6;Mzz|h_kqPb}O#S#*u(5YbI;(&R%)8{+J>J
zM)DCG?UYq#jHTII3RDWDS}d)K$1kDbGupzzXnIs)ol2azuA{GUOe)1Y^84irweGd*
zgkn>IkEl`au*bt-adzDQ0PT<?=@H4UYU0#&*|_^@6-Vn|Cyl#3y9JeD#7Vez8z<Fk
zXi)EUur@)h8w&#Y?Z%bsYEtv5g=^a!#sqw?Kt$;F;rEu9uq@bN(Qd65x5@sT(e?T1
z+%|H7C+D6>&fg|9u4eU{%7uiB<<LZLZ;JXBE>zX$>VZ&*1aq)qT}EW!ZZ9;1aN;^A
z8%V3Vy)ZqwkzC?AI^-SQuSYo^YEvH>_l(N8$J4p<+^Jsr&Xowjs7<U;K{GQw4^R11
z2#HZp-NswcT#Y|_WuQ-tAPoCQH&1P&P~yS4@<BYnQ6aGrmX&{p^Nz#PrbS}ZzD;cm
zPM@=8az7-W@J&EKSosktqOrD!q6z1;Ha~TAUArInDj?7nQ8WocJivDWfeH}~Pz2@>
z9nT=<f!hi~JRs2F=wz}xV==;X*mian0_A`?p9`!DZ}9UOWQxy)u|I0_h~_$_I*)JJ
zRy~5>@=|^Qd=a5}Q<vizRbkd39-wE>RETIMcQz9&l-4oF6Byf4!xI|B0|E)6>tR_l
zKV*rH3F$X6A*~%;`-lpb8QoNv&fP{D31?z(J1+8-lFM45%j#63b=&VUaB0)IQ!#~-
z+IT{_tP_$0VTeb)KZQ-(8o2^l7B|`2M(fsfpfv`nNue+<%=~u4=!BRDs7*r<>u_Rs
zn=`qUSmZz<6TW~-Smw;INE$o2;JwtIpjHR5+v3(rrz<CdBzzZE3(PMvjYq@o3KAIv
z4a*Y9mayGbEutx)5~?!@6Pu4)Aw^g?Hjx&PO{vAq8hLXy9S_7nI5x2mP?_S?+1q3W
zvShAhZKdFNdw~~*!b-{A5HA5$U?jWO5G+#M-5a{$GQQoMXADPr>1rKfE1)vPfO~-A
zBqnT`M6}21P7cLUG?m0(K$WCYDdUJaK!&wK2<m4n8sz{fmMmv%k0`KV^Tc>sntIGF
z0aXL*luu?@LJSB?^vl>O!vdb%hFC_%XCsWWQTd)DW_NP;ToOz*b6Y^QkX9-&S;)xp
zKw2=CW+eKk6p)M3ZjJJwq-(uY*gIPbDH0~+Z8k25jWHpx{q;z`JDHu!VyVUN0DUaS
U+M|Elr~m)}07*qoM6N<$f|l3;*8l(j

literal 4094
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
IX}Mtj3uH+atpET3

diff --git a/static/img/meta/ms-icon-150x150.png b/static/img/meta/ms-icon-150x150.png
old mode 100755
new mode 100644
index bce34e0ee6375bacae6d28840fc4604e0051d415..6c7fec304e2f481a2e44d277b1c499ff3e229274
GIT binary patch
literal 6041
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
T<`|@P00000NkvXXu0mjf8&j-&

literal 4301
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

diff --git a/static/img/meta/ms-icon-310x310.png b/static/img/meta/ms-icon-310x310.png
old mode 100755
new mode 100644
index 68cde6a584fe5b6e2425e20623311d569a9bbb83..afdf3ff9dd1e560fd51de13228702dc3e16e2fa1
GIT binary patch
literal 13620
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
GLSTYjvF&jH

literal 12297
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

diff --git a/static/img/meta/ms-icon-70x70.png b/static/img/meta/ms-icon-70x70.png
old mode 100755
new mode 100644
index 014851074c7fe6b6b7be32d47f85ea33296a20c3..9bb74aaca721144eba244a9e1ca6a371ee64138d
GIT binary patch
delta 2647
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
FV1l2Y14{q^

delta 1724
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
So3FJ10000<MNUMnLSTXt8!5>E


From 70045f89dc9479b2f90b12097b591acbe6615b9f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 14 Sep 2022 14:11:28 -0500
Subject: [PATCH 046/469] docs(breadcrumbs): fix theming headings (#2526)

---
 docs/api/breadcrumbs.md                            | 14 +++++++-------
 .../{styling/color => theming/colors}/angular.md   |  0
 .../{styling/color => theming/colors}/demo.html    |  0
 .../{styling/color => theming/colors}/index.md     |  4 ++--
 .../color => theming/colors}/javascript.md         |  0
 .../{styling/color => theming/colors}/react.md     |  0
 .../{styling/color => theming/colors}/vue.md       |  0
 .../css-properties}/angular/angular_css.md         |  0
 .../css-properties}/angular/angular_html.md        |  0
 .../css-props => theming/css-properties}/demo.html |  0
 .../css-props => theming/css-properties}/index.md  |  2 +-
 .../css-properties}/javascript.md                  |  0
 .../css-properties}/react/react_css.md             |  0
 .../css-properties}/react/react_ts.md              |  0
 .../css-props => theming/css-properties}/vue.md    |  0
 15 files changed, 10 insertions(+), 10 deletions(-)
 rename static/usage/breadcrumbs/{styling/color => theming/colors}/angular.md (100%)
 rename static/usage/breadcrumbs/{styling/color => theming/colors}/demo.html (100%)
 rename static/usage/breadcrumbs/{styling/color => theming/colors}/index.md (82%)
 rename static/usage/breadcrumbs/{styling/color => theming/colors}/javascript.md (100%)
 rename static/usage/breadcrumbs/{styling/color => theming/colors}/react.md (100%)
 rename static/usage/breadcrumbs/{styling/color => theming/colors}/vue.md (100%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/angular/angular_css.md (100%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/angular/angular_html.md (100%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/demo.html (100%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/index.md (91%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/javascript.md (100%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/react/react_css.md (100%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/react/react_ts.md (100%)
 rename static/usage/breadcrumbs/{styling/css-props => theming/css-properties}/vue.md (100%)

diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index 03d3ccea789..6bc347bce68 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -73,17 +73,17 @@ import PopoverOnClick from '@site/static/usage/breadcrumbs/collapsing-items/popo
 
 <PopoverOnClick />
 
-## Styling
+## Theming
 
-## Color Property
+### Colors
 
-import ColorProp from '@site/static/usage/breadcrumbs/styling/color/index.md';
+import Colors from '@site/static/usage/breadcrumbs/theming/colors/index.md';
 
-<ColorProp />
+<Colors />
 
-## CSS Properties
+### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/breadcrumbs/styling/css-props/index.md';
+import CSSProps from '@site/static/usage/breadcrumbs/theming/css-properties/index.md';
 
 <CSSProps />
 
@@ -104,4 +104,4 @@ import CSSProps from '@site/static/usage/breadcrumbs/styling/css-props/index.md'
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/breadcrumbs/styling/color/angular.md b/static/usage/breadcrumbs/theming/colors/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/angular.md
rename to static/usage/breadcrumbs/theming/colors/angular.md
diff --git a/static/usage/breadcrumbs/styling/color/demo.html b/static/usage/breadcrumbs/theming/colors/demo.html
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/demo.html
rename to static/usage/breadcrumbs/theming/colors/demo.html
diff --git a/static/usage/breadcrumbs/styling/color/index.md b/static/usage/breadcrumbs/theming/colors/index.md
similarity index 82%
rename from static/usage/breadcrumbs/styling/color/index.md
rename to static/usage/breadcrumbs/theming/colors/index.md
index f5113c6ca29..efad30bbf65 100644
--- a/static/usage/breadcrumbs/styling/color/index.md
+++ b/static/usage/breadcrumbs/theming/colors/index.md
@@ -7,5 +7,5 @@ import angular from './angular.md';
 
 <Playground
   code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/styling/color/demo.html"
-/>
\ No newline at end of file
+  src="usage/breadcrumbs/theming/colors/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/styling/color/javascript.md b/static/usage/breadcrumbs/theming/colors/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/javascript.md
rename to static/usage/breadcrumbs/theming/colors/javascript.md
diff --git a/static/usage/breadcrumbs/styling/color/react.md b/static/usage/breadcrumbs/theming/colors/react.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/react.md
rename to static/usage/breadcrumbs/theming/colors/react.md
diff --git a/static/usage/breadcrumbs/styling/color/vue.md b/static/usage/breadcrumbs/theming/colors/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/vue.md
rename to static/usage/breadcrumbs/theming/colors/vue.md
diff --git a/static/usage/breadcrumbs/styling/css-props/angular/angular_css.md b/static/usage/breadcrumbs/theming/css-properties/angular/angular_css.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/angular/angular_css.md
rename to static/usage/breadcrumbs/theming/css-properties/angular/angular_css.md
diff --git a/static/usage/breadcrumbs/styling/css-props/angular/angular_html.md b/static/usage/breadcrumbs/theming/css-properties/angular/angular_html.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/angular/angular_html.md
rename to static/usage/breadcrumbs/theming/css-properties/angular/angular_html.md
diff --git a/static/usage/breadcrumbs/styling/css-props/demo.html b/static/usage/breadcrumbs/theming/css-properties/demo.html
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/demo.html
rename to static/usage/breadcrumbs/theming/css-properties/demo.html
diff --git a/static/usage/breadcrumbs/styling/css-props/index.md b/static/usage/breadcrumbs/theming/css-properties/index.md
similarity index 91%
rename from static/usage/breadcrumbs/styling/css-props/index.md
rename to static/usage/breadcrumbs/theming/css-properties/index.md
index 579f8373ba6..4a632fce7a3 100644
--- a/static/usage/breadcrumbs/styling/css-props/index.md
+++ b/static/usage/breadcrumbs/theming/css-properties/index.md
@@ -26,5 +26,5 @@ import angularCSS from './angular/angular_css.md';
       },
     },
   }}
-  src="usage/breadcrumbs/styling/css-props/demo.html"
+  src="usage/breadcrumbs/theming/css-properties/demo.html"
 />
diff --git a/static/usage/breadcrumbs/styling/css-props/javascript.md b/static/usage/breadcrumbs/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/javascript.md
rename to static/usage/breadcrumbs/theming/css-properties/javascript.md
diff --git a/static/usage/breadcrumbs/styling/css-props/react/react_css.md b/static/usage/breadcrumbs/theming/css-properties/react/react_css.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/react/react_css.md
rename to static/usage/breadcrumbs/theming/css-properties/react/react_css.md
diff --git a/static/usage/breadcrumbs/styling/css-props/react/react_ts.md b/static/usage/breadcrumbs/theming/css-properties/react/react_ts.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/react/react_ts.md
rename to static/usage/breadcrumbs/theming/css-properties/react/react_ts.md
diff --git a/static/usage/breadcrumbs/styling/css-props/vue.md b/static/usage/breadcrumbs/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/vue.md
rename to static/usage/breadcrumbs/theming/css-properties/vue.md

From 68a1f94e204f8fb973982afd63cc5d4478238338 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 14 Sep 2022 17:56:03 -0400
Subject: [PATCH 047/469] docs(button): add components playgrounds (#2530)

---
 docs/api/button.md                            | 378 ++----------------
 static/usage/button/basic/angular.md          |   4 +
 static/usage/button/basic/demo.html           |  26 ++
 static/usage/button/basic/index.md            |   8 +
 static/usage/button/basic/javascript.md       |   4 +
 static/usage/button/basic/react.md            |  14 +
 static/usage/button/basic/vue.md              |  15 +
 static/usage/button/expand/angular.md         |   4 +
 static/usage/button/expand/demo.html          |  32 ++
 static/usage/button/expand/index.md           |   8 +
 static/usage/button/expand/javascript.md      |   4 +
 static/usage/button/expand/react.md           |  14 +
 static/usage/button/expand/vue.md             |  15 +
 static/usage/button/fill/angular.md           |   6 +
 static/usage/button/fill/demo.html            |  28 ++
 static/usage/button/fill/index.md             |   8 +
 static/usage/button/fill/javascript.md        |   6 +
 static/usage/button/fill/react.md             |  16 +
 static/usage/button/fill/vue.md               |  17 +
 static/usage/button/icons/angular.md          |  15 +
 static/usage/button/icons/demo.html           |  37 ++
 static/usage/button/icons/index.md            |   8 +
 static/usage/button/icons/javascript.md       |  15 +
 static/usage/button/icons/react.md            |  26 ++
 static/usage/button/icons/vue.md              |  30 ++
 static/usage/button/shape/angular.md          |   4 +
 static/usage/button/shape/demo.html           |  26 ++
 static/usage/button/shape/index.md            |   8 +
 static/usage/button/shape/javascript.md       |   4 +
 static/usage/button/shape/react.md            |  14 +
 static/usage/button/shape/vue.md              |  15 +
 static/usage/button/size/angular.md           |   5 +
 static/usage/button/size/demo.html            |  27 ++
 static/usage/button/size/index.md             |   8 +
 static/usage/button/size/javascript.md        |   5 +
 static/usage/button/size/react.md             |  15 +
 static/usage/button/size/vue.md               |  16 +
 static/usage/button/theming/colors/angular.md |  12 +
 static/usage/button/theming/colors/demo.html  |  41 ++
 static/usage/button/theming/colors/index.md   |   8 +
 .../usage/button/theming/colors/javascript.md |  12 +
 static/usage/button/theming/colors/react.md   |  22 +
 static/usage/button/theming/colors/vue.md     |  23 ++
 .../angular/example_component_css.md          |  22 +
 .../angular/example_component_html.md         |   3 +
 .../button/theming/css-properties/demo.html   |  47 +++
 .../button/theming/css-properties/index.md    |  32 ++
 .../theming/css-properties/javascript.md      |  26 ++
 .../theming/css-properties/react/main_css.md  |  23 ++
 .../theming/css-properties/react/main_tsx.md  |  13 +
 .../button/theming/css-properties/vue.md      |  37 ++
 51 files changed, 859 insertions(+), 347 deletions(-)
 create mode 100644 static/usage/button/basic/angular.md
 create mode 100644 static/usage/button/basic/demo.html
 create mode 100644 static/usage/button/basic/index.md
 create mode 100644 static/usage/button/basic/javascript.md
 create mode 100644 static/usage/button/basic/react.md
 create mode 100644 static/usage/button/basic/vue.md
 create mode 100644 static/usage/button/expand/angular.md
 create mode 100644 static/usage/button/expand/demo.html
 create mode 100644 static/usage/button/expand/index.md
 create mode 100644 static/usage/button/expand/javascript.md
 create mode 100644 static/usage/button/expand/react.md
 create mode 100644 static/usage/button/expand/vue.md
 create mode 100644 static/usage/button/fill/angular.md
 create mode 100644 static/usage/button/fill/demo.html
 create mode 100644 static/usage/button/fill/index.md
 create mode 100644 static/usage/button/fill/javascript.md
 create mode 100644 static/usage/button/fill/react.md
 create mode 100644 static/usage/button/fill/vue.md
 create mode 100644 static/usage/button/icons/angular.md
 create mode 100644 static/usage/button/icons/demo.html
 create mode 100644 static/usage/button/icons/index.md
 create mode 100644 static/usage/button/icons/javascript.md
 create mode 100644 static/usage/button/icons/react.md
 create mode 100644 static/usage/button/icons/vue.md
 create mode 100644 static/usage/button/shape/angular.md
 create mode 100644 static/usage/button/shape/demo.html
 create mode 100644 static/usage/button/shape/index.md
 create mode 100644 static/usage/button/shape/javascript.md
 create mode 100644 static/usage/button/shape/react.md
 create mode 100644 static/usage/button/shape/vue.md
 create mode 100644 static/usage/button/size/angular.md
 create mode 100644 static/usage/button/size/demo.html
 create mode 100644 static/usage/button/size/index.md
 create mode 100644 static/usage/button/size/javascript.md
 create mode 100644 static/usage/button/size/react.md
 create mode 100644 static/usage/button/size/vue.md
 create mode 100644 static/usage/button/theming/colors/angular.md
 create mode 100644 static/usage/button/theming/colors/demo.html
 create mode 100644 static/usage/button/theming/colors/index.md
 create mode 100644 static/usage/button/theming/colors/javascript.md
 create mode 100644 static/usage/button/theming/colors/react.md
 create mode 100644 static/usage/button/theming/colors/vue.md
 create mode 100644 static/usage/button/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/button/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/button/theming/css-properties/demo.html
 create mode 100644 static/usage/button/theming/css-properties/index.md
 create mode 100644 static/usage/button/theming/css-properties/javascript.md
 create mode 100644 static/usage/button/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/button/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/button/theming/css-properties/vue.md

diff --git a/docs/api/button.md b/docs/api/button.md
index cc1630a1d44..28d6737e9d7 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-button"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/button/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/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/button/props.md';
 import Events from '@site/static/auto-generated/button/events.md';
 import Methods from '@site/static/auto-generated/button/methods.md';
@@ -15,384 +8,75 @@ 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';
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
 <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" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
 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.
 
-## Expand
+## Basic Usage
 
-This attribute lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this attribute will change the button to a full-width block element.
+import Basic from '@site/static/usage/button/basic/index.md';
 
-| Value          | Details                                                                      |
-|----------------|------------------------------------------------------------------------------|
-| `block`        | Full-width button with rounded corners.                                      |
-| `full`         | Full-width button with square corners and no border on the left or right.    |
-
-## Fill
-
-This attribute 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.
-
-| Value          | Details                                                                      |
-|----------------|------------------------------------------------------------------------------|
-| `clear`        | Button with a transparent background that resembles a flat button.           |
-| `outline`      | Button with a transparent background and a visible border.                   |
-| `solid`        | Button with a filled background. Useful for buttons in a toolbar.            |
-
-## Size
+<Basic />
 
-This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.
-
-| Value          | Details                                                                      |
-|----------------|------------------------------------------------------------------------------|
-| `small`        | Button with less height and padding. Default for buttons in an item.         |
-| `default`      | Button with the default height and padding. Useful for buttons in an item.   |
-| `large`        | Button with more height and padding.                                         |
-
-
-
-
-## 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 -->
-<ion-button>Default</ion-button>
+## Expand
 
-<!-- Anchor -->
-<ion-button href="#">Anchor</ion-button>
+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.
 
-<!-- Colors -->
-<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>
+import Expand from '@site/static/usage/button/expand/index.md';
 
-<!-- Expand -->
-<ion-button expand="full">Full Button</ion-button>
-<ion-button expand="block">Block Button</ion-button>
+<Expand />
 
-<!-- Round -->
-<ion-button shape="round">Round Button</ion-button>
+## Shape
 
-<!-- Fill -->
-<ion-button expand="full" fill="outline">Outline + Full</ion-button>
-<ion-button expand="block" fill="outline">Outline + Block</ion-button>
-<ion-button shape="round" fill="outline">Outline + Round</ion-button>
+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.
 
-<!-- Icons -->
-<ion-button>
-  <ion-icon slot="start" name="star"></ion-icon>
-  Left Icon
-</ion-button>
+import Shape from '@site/static/usage/button/shape/index.md';
 
-<ion-button>
-  Right Icon
-  <ion-icon slot="end" name="star"></ion-icon>
-</ion-button>
+<Shape />
 
-<ion-button>
-  <ion-icon slot="icon-only" name="star"></ion-icon>
-</ion-button>
 
-<!-- Sizes -->
-<ion-button size="large">Large</ion-button>
-<ion-button>Default</ion-button>
-<ion-button size="small">Small</ion-button>
-```
+## 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.
 
-</TabItem>
+import Fill from '@site/static/usage/button/fill/index.md';
 
+<Fill />
 
-<TabItem value="javascript">
+## Size
 
+This property specifies the size of the button. Setting this property will change the height and padding of a button.
 
-```html
-<!-- Default -->
-<ion-button>Default</ion-button>
+import Size from '@site/static/usage/button/size/index.md';
 
-<!-- Anchor -->
-<ion-button href="#">Anchor</ion-button>
+<Size />
 
-<!-- Colors -->
-<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>
+## Icons
 
-<!-- Expand -->
-<ion-button expand="full">Full Button</ion-button>
-<ion-button expand="block">Block Button</ion-button>
+import Icons from '@site/static/usage/button/icons/index.md';
 
-<!-- Round -->
-<ion-button shape="round">Round Button</ion-button>
+<Icons />
 
-<!-- Fill -->
-<ion-button expand="full" fill="outline">Outline + Full</ion-button>
-<ion-button expand="block" fill="outline">Outline + Block</ion-button>
-<ion-button shape="round" fill="outline">Outline + Round</ion-button>
+## Theming
 
-<!-- Icons -->
-<ion-button>
-  <ion-icon slot="start" name="star"></ion-icon>
-  Left Icon
-</ion-button>
+### Colors
 
-<ion-button>
-  Right Icon
-  <ion-icon slot="end" name="star"></ion-icon>
-</ion-button>
+import Colors from '@site/static/usage/button/theming/colors/index.md';
 
-<ion-button>
-  <ion-icon slot="icon-only" name="star"></ion-icon>
-</ion-button>
-
-<!-- Sizes -->
-<ion-button size="large">Large</ion-button>
-<ion-button>Default</ion-button>
-<ion-button size="small">Small</ion-button>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
+<Colors />
 
-import { IonButton, IonIcon, IonContent } from '@ionic/react';
-import { star } from 'ionicons/icons';
+### CSS Custom Properties
 
-export const ButtonExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default --*/}
-    <IonButton>Default</IonButton>
-
-    {/*-- Anchor --*/}
-    <IonButton href="#">Anchor</IonButton>
-
-    {/*-- Colors --*/}
-    <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>
-
-    {/*-- Expand --*/}
-    <IonButton expand="full">Full Button</IonButton>
-    <IonButton expand="block">Block Button</IonButton>
-
-    {/*-- Round --*/}
-    <IonButton shape="round">Round Button</IonButton>
-
-    {/*-- Fill --*/}
-    <IonButton expand="full" fill="outline">Outline + Full</IonButton>
-    <IonButton expand="block" fill="outline">Outline + Block</IonButton>
-    <IonButton shape="round" fill="outline">Outline + Round</IonButton>
+import CSSProps from '@site/static/usage/button/theming/css-properties/index.md';
 
-    {/*-- Icons --*/}
-    <IonButton>
-      <IonIcon slot="start" icon={star} />
-      Left Icon
-    </IonButton>
-
-    <IonButton>
-      Right Icon
-      <IonIcon slot="end" icon={star} />
-    </IonButton>
-
-    <IonButton>
-      <IonIcon slot="icon-only" icon={star} />
-    </IonButton>
-
-    {/*-- Sizes --*/}
-    <IonButton size="large">Large</IonButton>
-    <IonButton>Default</IonButton>
-    <IonButton size="small">Small</IonButton>
-  </IonContent>
-);
-
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'button-example',
-  styleUrl: 'button-example.css'
-})
-export class ButtonExample {
-  render() {
-    return [
-      // Default
-      <ion-button>Default</ion-button>,
-
-      // Anchor
-      <ion-button href="#">Anchor</ion-button>,
-
-      // Colors
-      <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>,
-
-      // Expand
-      <ion-button expand="full">Full Button</ion-button>,
-      <ion-button expand="block">Block Button</ion-button>,
-
-      // Round
-      <ion-button shape="round">Round Button</ion-button>,
-
-      // Fill
-      <ion-button expand="full" fill="outline">Outline + Full</ion-button>,
-      <ion-button expand="block" fill="outline">Outline + Block</ion-button>,
-      <ion-button shape="round" fill="outline">Outline + Round</ion-button>,
-
-      // Icons
-      <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>,
-
-      // Sizes
-      <ion-button size="large">Large</ion-button>,
-      <ion-button>Default</ion-button>,
-      <ion-button size="small">Small</ion-button>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default -->
-  <ion-button>Default</ion-button>
-
-  <!-- Anchor -->
-  <ion-button href="#">Anchor</ion-button>
-
-  <!-- Colors -->
-  <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>
-
-  <!-- Expand -->
-  <ion-button expand="full">Full Button</ion-button>
-  <ion-button expand="block">Block Button</ion-button>
-
-  <!-- Round -->
-  <ion-button shape="round">Round Button</ion-button>
-
-  <!-- Fill -->
-  <ion-button expand="full" fill="outline">Outline + Full</ion-button>
-  <ion-button expand="block" fill="outline">Outline + Block</ion-button>
-  <ion-button shape="round" fill="outline">Outline + Round</ion-button>
-
-  <!-- Icons -->
-  <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>
-
-  <!-- Sizes -->
-  <ion-button size="large">Large</ion-button>
-  <ion-button>Default</ion-button>
-  <ion-button size="small">Small</ion-button>
-</template>
-
-<script>
-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>
-```
-
-
-</TabItem>
-
-</Tabs>
+<CSSProps />
 
 ## Properties
 <Props />
@@ -410,4 +94,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/button/basic/angular.md b/static/usage/button/basic/angular.md
new file mode 100644
index 00000000000..44ba5831426
--- /dev/null
+++ b/static/usage/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/button/basic/demo.html b/static/usage/button/basic/demo.html
new file mode 100644
index 00000000000..1faedab0fa7
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/basic/index.md b/static/usage/button/basic/index.md
new file mode 100644
index 00000000000..50170cfd37b
--- /dev/null
+++ b/static/usage/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/button/basic/demo.html" />
diff --git a/static/usage/button/basic/javascript.md b/static/usage/button/basic/javascript.md
new file mode 100644
index 00000000000..8296ef7f42a
--- /dev/null
+++ b/static/usage/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/button/basic/react.md b/static/usage/button/basic/react.md
new file mode 100644
index 00000000000..8393e9cf2b7
--- /dev/null
+++ b/static/usage/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/button/basic/vue.md b/static/usage/button/basic/vue.md
new file mode 100644
index 00000000000..dbd787691fb
--- /dev/null
+++ b/static/usage/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/button/expand/angular.md b/static/usage/button/expand/angular.md
new file mode 100644
index 00000000000..ca3f5093b84
--- /dev/null
+++ b/static/usage/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/button/expand/demo.html b/static/usage/button/expand/demo.html
new file mode 100644
index 00000000000..cfda23abb15
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/expand/index.md b/static/usage/button/expand/index.md
new file mode 100644
index 00000000000..e41ccccfa24
--- /dev/null
+++ b/static/usage/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/button/expand/demo.html" />
diff --git a/static/usage/button/expand/javascript.md b/static/usage/button/expand/javascript.md
new file mode 100644
index 00000000000..ca3f5093b84
--- /dev/null
+++ b/static/usage/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/button/expand/react.md b/static/usage/button/expand/react.md
new file mode 100644
index 00000000000..424d8e1494b
--- /dev/null
+++ b/static/usage/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/button/expand/vue.md b/static/usage/button/expand/vue.md
new file mode 100644
index 00000000000..f67d93ecdef
--- /dev/null
+++ b/static/usage/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/button/fill/angular.md b/static/usage/button/fill/angular.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/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/button/fill/demo.html b/static/usage/button/fill/demo.html
new file mode 100644
index 00000000000..031eece07a5
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/fill/index.md b/static/usage/button/fill/index.md
new file mode 100644
index 00000000000..b7870f10852
--- /dev/null
+++ b/static/usage/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/button/fill/demo.html" />
diff --git a/static/usage/button/fill/javascript.md b/static/usage/button/fill/javascript.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/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/button/fill/react.md b/static/usage/button/fill/react.md
new file mode 100644
index 00000000000..5a32a7d992d
--- /dev/null
+++ b/static/usage/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/button/fill/vue.md b/static/usage/button/fill/vue.md
new file mode 100644
index 00000000000..4b965ed3582
--- /dev/null
+++ b/static/usage/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/button/icons/angular.md b/static/usage/button/icons/angular.md
new file mode 100644
index 00000000000..89d74ad2e17
--- /dev/null
+++ b/static/usage/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/button/icons/demo.html b/static/usage/button/icons/demo.html
new file mode 100644
index 00000000000..7d7bb499cf5
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/icons/index.md b/static/usage/button/icons/index.md
new file mode 100644
index 00000000000..718e4683b42
--- /dev/null
+++ b/static/usage/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/button/icons/demo.html" />
diff --git a/static/usage/button/icons/javascript.md b/static/usage/button/icons/javascript.md
new file mode 100644
index 00000000000..89d74ad2e17
--- /dev/null
+++ b/static/usage/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/button/icons/react.md b/static/usage/button/icons/react.md
new file mode 100644
index 00000000000..09df368e950
--- /dev/null
+++ b/static/usage/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/button/icons/vue.md b/static/usage/button/icons/vue.md
new file mode 100644
index 00000000000..356fc5617dc
--- /dev/null
+++ b/static/usage/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/button/shape/angular.md b/static/usage/button/shape/angular.md
new file mode 100644
index 00000000000..97ed756261a
--- /dev/null
+++ b/static/usage/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/button/shape/demo.html b/static/usage/button/shape/demo.html
new file mode 100644
index 00000000000..07bf8815bc6
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/shape/index.md b/static/usage/button/shape/index.md
new file mode 100644
index 00000000000..eab7aba8868
--- /dev/null
+++ b/static/usage/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/button/shape/demo.html" />
diff --git a/static/usage/button/shape/javascript.md b/static/usage/button/shape/javascript.md
new file mode 100644
index 00000000000..97ed756261a
--- /dev/null
+++ b/static/usage/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/button/shape/react.md b/static/usage/button/shape/react.md
new file mode 100644
index 00000000000..df52c3f8985
--- /dev/null
+++ b/static/usage/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/button/shape/vue.md b/static/usage/button/shape/vue.md
new file mode 100644
index 00000000000..6db047c9532
--- /dev/null
+++ b/static/usage/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/button/size/angular.md b/static/usage/button/size/angular.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/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/button/size/demo.html b/static/usage/button/size/demo.html
new file mode 100644
index 00000000000..155cf9536b1
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/size/index.md b/static/usage/button/size/index.md
new file mode 100644
index 00000000000..9878f063f4b
--- /dev/null
+++ b/static/usage/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/button/size/demo.html" />
diff --git a/static/usage/button/size/javascript.md b/static/usage/button/size/javascript.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/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/button/size/react.md b/static/usage/button/size/react.md
new file mode 100644
index 00000000000..8deb283a9d4
--- /dev/null
+++ b/static/usage/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/button/size/vue.md b/static/usage/button/size/vue.md
new file mode 100644
index 00000000000..02a27f22d1d
--- /dev/null
+++ b/static/usage/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/button/theming/colors/angular.md b/static/usage/button/theming/colors/angular.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/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/button/theming/colors/demo.html b/static/usage/button/theming/colors/demo.html
new file mode 100644
index 00000000000..afc878f37cc
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/theming/colors/index.md b/static/usage/button/theming/colors/index.md
new file mode 100644
index 00000000000..48a76f4fcf1
--- /dev/null
+++ b/static/usage/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/button/theming/colors/demo.html" />
diff --git a/static/usage/button/theming/colors/javascript.md b/static/usage/button/theming/colors/javascript.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/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/button/theming/colors/react.md b/static/usage/button/theming/colors/react.md
new file mode 100644
index 00000000000..066aaa06f59
--- /dev/null
+++ b/static/usage/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/button/theming/colors/vue.md b/static/usage/button/theming/colors/vue.md
new file mode 100644
index 00000000000..7fee983d696
--- /dev/null
+++ b/static/usage/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/button/theming/css-properties/angular/example_component_css.md b/static/usage/button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..fa985cbe82f
--- /dev/null
+++ b/static/usage/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/button/theming/css-properties/angular/example_component_html.md b/static/usage/button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..678df6cde1b
--- /dev/null
+++ b/static/usage/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/button/theming/css-properties/demo.html b/static/usage/button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..ee2bec46668
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/button/theming/css-properties/index.md b/static/usage/button/theming/css-properties/index.md
new file mode 100644
index 00000000000..ad66bc9834d
--- /dev/null
+++ b/static/usage/button/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/button/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/button/theming/css-properties/javascript.md b/static/usage/button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..8bca67a3206
--- /dev/null
+++ b/static/usage/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/button/theming/css-properties/react/main_css.md b/static/usage/button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..1fba4c49972
--- /dev/null
+++ b/static/usage/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/button/theming/css-properties/react/main_tsx.md b/static/usage/button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6e0cddd9709
--- /dev/null
+++ b/static/usage/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/button/theming/css-properties/vue.md b/static/usage/button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..0243821d67f
--- /dev/null
+++ b/static/usage/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>
+```

From ea9bfde318fd37c1d631feb7507266fe5a5b9429 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 16 Sep 2022 09:14:37 -0500
Subject: [PATCH 048/469] refactor(): remove unneeded Tabs imports (#2554)

---
 docs/api/accordion-group.md   | 2 --
 docs/api/accordion.md         | 3 ---
 docs/api/app.md               | 2 --
 docs/api/badge.md             | 3 ---
 docs/api/breadcrumb.md        | 2 --
 docs/api/breadcrumbs.md       | 3 ---
 docs/api/card-content.md      | 2 --
 docs/api/card-header.md       | 2 --
 docs/api/card-subtitle.md     | 2 --
 docs/api/card-title.md        | 2 --
 docs/api/col.md               | 2 --
 docs/api/datetime-button.md   | 3 ---
 docs/api/datetime.md          | 3 ---
 docs/api/item-option.md       | 2 --
 docs/api/item-options.md      | 2 --
 docs/api/menu-button.md       | 2 --
 docs/api/modal.md             | 3 ---
 docs/api/nav-link.md          | 2 --
 docs/api/nav.md               | 2 --
 docs/api/popover.md           | 3 ---
 docs/api/range.md             | 3 ---
 docs/api/refresher-content.md | 2 --
 docs/api/route-redirect.md    | 2 --
 docs/api/router-link.md       | 2 --
 docs/api/router-outlet.md     | 2 --
 docs/api/router.md            | 2 --
 docs/api/row.md               | 2 --
 docs/api/select.md            | 3 ---
 docs/api/skeleton-text.md     | 3 ---
 docs/api/slide.md             | 2 --
 docs/api/tab.md               | 2 --
 docs/api/virtual-scroll.md    | 2 --
 32 files changed, 74 deletions(-)

diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index c623b749b12..c4b80515e2f 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -2,8 +2,6 @@
 title: "ion-accordion-group"
 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/accordion-group/props.md';
diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 85aef595172..62c510899a1 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-accordion"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/app.md b/docs/api/app.md
index aa500d8cdff..58de67e6c39 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -2,8 +2,6 @@
 title: "ion-app"
 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/app/props.md';
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 32da34d7aae..3c5a8120fe8 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-badge"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index d2772cbe493..09c0164273c 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -2,8 +2,6 @@
 title: "ion-breadcrumb"
 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/breadcrumb/props.md';
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index 6bc347bce68..29551cb6712 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-breadcrumbs"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index 487697a1e51..22d2f5c64d0 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -2,8 +2,6 @@
 title: "ion-card-content"
 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/card-content/props.md';
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index 561969dcc40..b2126cafb07 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -2,8 +2,6 @@
 title: "ion-card-header"
 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/card-header/props.md';
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index 23d338d74d5..0cfb8d05392 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -2,8 +2,6 @@
 title: "ion-card-subtitle"
 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/card-subtitle/props.md';
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index ea8baee1541..47cba9c1347 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -2,8 +2,6 @@
 title: "ion-card-title"
 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/card-title/props.md';
diff --git a/docs/api/col.md b/docs/api/col.md
index 42912662e71..b4f0f72a5fe 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -2,8 +2,6 @@
 title: "ion-col"
 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/col/props.md';
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index 7c74d82154a..fd01fca7d6b 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-datetime-button"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index a3eff7cde00..74535d2af91 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-datetime"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index 54a92feb8d0..4deefaa7723 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -2,8 +2,6 @@
 title: "ion-item-option"
 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/item-option/props.md';
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index 086df2b1bb6..93949858b33 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -2,8 +2,6 @@
 title: "ion-item-options"
 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/item-options/props.md';
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index e4e10198f8d..fac03297c10 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -2,8 +2,6 @@
 title: "ion-menu-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/menu-button/props.md';
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 864bb6493af..6276db04bec 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-modal"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 89fd038f890..85f2c65d790 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -2,8 +2,6 @@
 title: "ion-nav-link"
 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/nav-link/props.md';
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 44914633fdc..23581527718 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,8 +1,6 @@
 ---
 title: "ion-nav"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/nav/props.md';
diff --git a/docs/api/popover.md b/docs/api/popover.md
index cced5b1dfe2..e516d398824 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-popover"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/range.md b/docs/api/range.md
index 0add6ba227a..9db6b29fba6 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-range"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 950df33fbf9..1c7ea6632a0 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -2,8 +2,6 @@
 title: "ion-refresher-content"
 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/refresher-content/props.md';
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index 8c98cef2c2e..d17f3832133 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -2,8 +2,6 @@
 title: "ion-route-redirect"
 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-redirect/props.md';
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index 5d7d812ecfc..ea95869eea0 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -4,8 +4,6 @@ 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 Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/router-link/props.md';
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md
index f733b0c1248..b2cf5a86936 100644
--- a/docs/api/router-outlet.md
+++ b/docs/api/router-outlet.md
@@ -2,8 +2,6 @@
 title: "ion-router-outlet"
 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/router-outlet/props.md';
diff --git a/docs/api/router.md b/docs/api/router.md
index 9684f77170a..eef5d1232de 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -2,8 +2,6 @@
 title: "ion-router"
 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/router/props.md';
diff --git a/docs/api/row.md b/docs/api/row.md
index c150d7d09a1..21181f125b8 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -2,8 +2,6 @@
 title: "ion-row"
 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/row/props.md';
diff --git a/docs/api/select.md b/docs/api/select.md
index 1b5a9aa6f34..7760b1e11b9 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-select"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index d09c6cf16eb..c4a2a49e316 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-skeleton-text"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
diff --git a/docs/api/slide.md b/docs/api/slide.md
index 41a28cbc57c..bfe5e4c0797 100644
--- a/docs/api/slide.md
+++ b/docs/api/slide.md
@@ -2,8 +2,6 @@
 title: "ion-slide"
 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/slide/props.md';
diff --git a/docs/api/tab.md b/docs/api/tab.md
index cbdd6d16333..aff18a4a825 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -2,8 +2,6 @@
 title: "ion-tab"
 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/props.md';
diff --git a/docs/api/virtual-scroll.md b/docs/api/virtual-scroll.md
index dc041724c4d..cc1f94d99ba 100644
--- a/docs/api/virtual-scroll.md
+++ b/docs/api/virtual-scroll.md
@@ -2,8 +2,6 @@
 title: "ion-virtual-scroll"
 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/virtual-scroll/props.md';

From 5d9770dc138daffa3937b4abb7f4fb7f6e0a29a6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 16 Sep 2022 14:44:34 -0400
Subject: [PATCH 049/469] docs(item): add component playgrounds (#2538)

---
 docs/api/item.md                              | 2088 +----------------
 static/usage/item/basic/angular.md            |   42 +
 static/usage/item/basic/demo.html             |   69 +
 static/usage/item/basic/index.md              |    8 +
 static/usage/item/basic/javascript.md         |   42 +
 static/usage/item/basic/react.md              |   52 +
 static/usage/item/basic/vue.md                |   53 +
 static/usage/item/buttons/angular.md          |   46 +
 static/usage/item/buttons/demo.html           |   74 +
 static/usage/item/buttons/index.md            |    8 +
 static/usage/item/buttons/javascript.md       |   46 +
 static/usage/item/buttons/react.md            |   57 +
 static/usage/item/buttons/vue.md              |   61 +
 static/usage/item/clickable/angular.md        |   17 +
 static/usage/item/clickable/demo.html         |   44 +
 static/usage/item/clickable/index.md          |    8 +
 static/usage/item/clickable/javascript.md     |   17 +
 static/usage/item/clickable/react.md          |   27 +
 static/usage/item/clickable/vue.md            |   28 +
 .../counter/angular/example_component_html.md |   11 +
 .../counter/angular/example_component_ts.md   |   13 +
 static/usage/item/counter/demo.html           |   43 +
 static/usage/item/counter/index.md            |   23 +
 static/usage/item/counter/javascript.md       |   16 +
 static/usage/item/counter/react.md            |   21 +
 static/usage/item/counter/vue.md              |   27 +
 static/usage/item/detail-arrows/angular.md    |   37 +
 static/usage/item/detail-arrows/demo.html     |   64 +
 static/usage/item/detail-arrows/index.md      |    8 +
 static/usage/item/detail-arrows/javascript.md |   37 +
 static/usage/item/detail-arrows/react.md      |   48 +
 static/usage/item/detail-arrows/vue.md        |   53 +
 static/usage/item/helper-error/angular.md     |    8 +
 static/usage/item/helper-error/demo.html      |   62 +
 static/usage/item/helper-error/index.md       |   18 +
 static/usage/item/helper-error/javascript.md  |   35 +
 static/usage/item/helper-error/react.md       |   39 +
 static/usage/item/helper-error/vue.md         |   41 +
 static/usage/item/icons/angular.md            |   29 +
 static/usage/item/icons/demo.html             |   56 +
 static/usage/item/icons/index.md              |    8 +
 static/usage/item/icons/javascript.md         |   29 +
 static/usage/item/icons/react.md              |   40 +
 static/usage/item/icons/vue.md                |   44 +
 static/usage/item/inputs/angular.md           |   59 +
 static/usage/item/inputs/demo.html            |   86 +
 static/usage/item/inputs/index.md             |    8 +
 static/usage/item/inputs/javascript.md        |   59 +
 static/usage/item/inputs/react.md             |   69 +
 static/usage/item/inputs/vue.md               |   70 +
 static/usage/item/lines/angular.md            |   43 +
 static/usage/item/lines/demo.html             |   70 +
 static/usage/item/lines/index.md              |    8 +
 static/usage/item/lines/javascript.md         |   43 +
 static/usage/item/lines/react.md              |   54 +
 static/usage/item/lines/vue.md                |   58 +
 static/usage/item/media/angular.md            |   19 +
 static/usage/item/media/demo.html             |   46 +
 static/usage/item/media/index.md              |    8 +
 static/usage/item/media/javascript.md         |   19 +
 static/usage/item/media/react.md              |   29 +
 static/usage/item/media/vue.md                |   30 +
 static/usage/item/theming/colors/angular.md   |   32 +
 static/usage/item/theming/colors/demo.html    |   59 +
 static/usage/item/theming/colors/index.md     |    8 +
 .../usage/item/theming/colors/javascript.md   |   32 +
 static/usage/item/theming/colors/react.md     |   42 +
 static/usage/item/theming/colors/vue.md       |   43 +
 .../angular/example_component_css.md          |   18 +
 .../angular/example_component_html.md         |   13 +
 .../item/theming/css-properties/demo.html     |   57 +
 .../item/theming/css-properties/index.md      |   31 +
 .../item/theming/css-properties/javascript.md |   32 +
 .../theming/css-properties/react/main_css.md  |   18 +
 .../theming/css-properties/react/main_tsx.md  |   25 +
 .../usage/item/theming/css-properties/vue.md  |   43 +
 .../angular/example_component_css.md          |   18 +
 .../angular/example_component_html.md         |   13 +
 .../item/theming/css-shadow-parts/demo.html   |   57 +
 .../item/theming/css-shadow-parts/index.md    |   31 +
 .../theming/css-shadow-parts/javascript.md    |   32 +
 .../css-shadow-parts/react/main_css.md        |   18 +
 .../css-shadow-parts/react/main_tsx.md        |   25 +
 .../item/theming/css-shadow-parts/vue.md      |   43 +
 .../angular/example_component_css.md          |    8 +
 .../angular/example_component_html.md         |   16 +
 .../item/theming/input-highlight/demo.html    |   50 +
 .../item/theming/input-highlight/index.md     |   32 +
 .../theming/input-highlight/javascript.md     |   25 +
 .../theming/input-highlight/react/main_css.md |    8 +
 .../theming/input-highlight/react/main_tsx.md |   28 +
 .../usage/item/theming/input-highlight/vue.md |   36 +
 92 files changed, 3238 insertions(+), 2030 deletions(-)
 create mode 100644 static/usage/item/basic/angular.md
 create mode 100644 static/usage/item/basic/demo.html
 create mode 100644 static/usage/item/basic/index.md
 create mode 100644 static/usage/item/basic/javascript.md
 create mode 100644 static/usage/item/basic/react.md
 create mode 100644 static/usage/item/basic/vue.md
 create mode 100644 static/usage/item/buttons/angular.md
 create mode 100644 static/usage/item/buttons/demo.html
 create mode 100644 static/usage/item/buttons/index.md
 create mode 100644 static/usage/item/buttons/javascript.md
 create mode 100644 static/usage/item/buttons/react.md
 create mode 100644 static/usage/item/buttons/vue.md
 create mode 100644 static/usage/item/clickable/angular.md
 create mode 100644 static/usage/item/clickable/demo.html
 create mode 100644 static/usage/item/clickable/index.md
 create mode 100644 static/usage/item/clickable/javascript.md
 create mode 100644 static/usage/item/clickable/react.md
 create mode 100644 static/usage/item/clickable/vue.md
 create mode 100644 static/usage/item/counter/angular/example_component_html.md
 create mode 100644 static/usage/item/counter/angular/example_component_ts.md
 create mode 100644 static/usage/item/counter/demo.html
 create mode 100644 static/usage/item/counter/index.md
 create mode 100644 static/usage/item/counter/javascript.md
 create mode 100644 static/usage/item/counter/react.md
 create mode 100644 static/usage/item/counter/vue.md
 create mode 100644 static/usage/item/detail-arrows/angular.md
 create mode 100644 static/usage/item/detail-arrows/demo.html
 create mode 100644 static/usage/item/detail-arrows/index.md
 create mode 100644 static/usage/item/detail-arrows/javascript.md
 create mode 100644 static/usage/item/detail-arrows/react.md
 create mode 100644 static/usage/item/detail-arrows/vue.md
 create mode 100644 static/usage/item/helper-error/angular.md
 create mode 100644 static/usage/item/helper-error/demo.html
 create mode 100644 static/usage/item/helper-error/index.md
 create mode 100644 static/usage/item/helper-error/javascript.md
 create mode 100644 static/usage/item/helper-error/react.md
 create mode 100644 static/usage/item/helper-error/vue.md
 create mode 100644 static/usage/item/icons/angular.md
 create mode 100644 static/usage/item/icons/demo.html
 create mode 100644 static/usage/item/icons/index.md
 create mode 100644 static/usage/item/icons/javascript.md
 create mode 100644 static/usage/item/icons/react.md
 create mode 100644 static/usage/item/icons/vue.md
 create mode 100644 static/usage/item/inputs/angular.md
 create mode 100644 static/usage/item/inputs/demo.html
 create mode 100644 static/usage/item/inputs/index.md
 create mode 100644 static/usage/item/inputs/javascript.md
 create mode 100644 static/usage/item/inputs/react.md
 create mode 100644 static/usage/item/inputs/vue.md
 create mode 100644 static/usage/item/lines/angular.md
 create mode 100644 static/usage/item/lines/demo.html
 create mode 100644 static/usage/item/lines/index.md
 create mode 100644 static/usage/item/lines/javascript.md
 create mode 100644 static/usage/item/lines/react.md
 create mode 100644 static/usage/item/lines/vue.md
 create mode 100644 static/usage/item/media/angular.md
 create mode 100644 static/usage/item/media/demo.html
 create mode 100644 static/usage/item/media/index.md
 create mode 100644 static/usage/item/media/javascript.md
 create mode 100644 static/usage/item/media/react.md
 create mode 100644 static/usage/item/media/vue.md
 create mode 100644 static/usage/item/theming/colors/angular.md
 create mode 100644 static/usage/item/theming/colors/demo.html
 create mode 100644 static/usage/item/theming/colors/index.md
 create mode 100644 static/usage/item/theming/colors/javascript.md
 create mode 100644 static/usage/item/theming/colors/react.md
 create mode 100644 static/usage/item/theming/colors/vue.md
 create mode 100644 static/usage/item/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/item/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/item/theming/css-properties/demo.html
 create mode 100644 static/usage/item/theming/css-properties/index.md
 create mode 100644 static/usage/item/theming/css-properties/javascript.md
 create mode 100644 static/usage/item/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/item/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/item/theming/css-properties/vue.md
 create mode 100644 static/usage/item/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/item/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/item/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/item/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/item/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/item/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/item/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/item/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/item/theming/input-highlight/angular/example_component_css.md
 create mode 100644 static/usage/item/theming/input-highlight/angular/example_component_html.md
 create mode 100644 static/usage/item/theming/input-highlight/demo.html
 create mode 100644 static/usage/item/theming/input-highlight/index.md
 create mode 100644 static/usage/item/theming/input-highlight/javascript.md
 create mode 100644 static/usage/item/theming/input-highlight/react/main_css.md
 create mode 100644 static/usage/item/theming/input-highlight/react/main_tsx.md
 create mode 100644 static/usage/item/theming/input-highlight/vue.md

diff --git a/docs/api/item.md b/docs/api/item.md
index 107764b2264..08c99ba3685 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-item"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/item/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/item/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,25 +17,35 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
+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
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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';
 
+<Basic />
 
-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 with other items. Items can be swiped, deleted, reordered, edited, and more.
 
 ## 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/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/item/detail-arrows/index.md';
+
+<DetailArrows />
+
+
 <!--
 
 TODO add this functionality back as a css variable
@@ -58,2070 +61,95 @@ See the [theming documentation](/docs/theming/css-variables) for more informatio
 -->
 
 
-## Item Placement
-
-Item uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements.
-
-The below chart details the item slots and where it will place the element inside of the item:
-
-| Slot    | Description                                                                 |
-|---------|-----------------------------------------------------------------------------|
-| `start` | Placed to the left of all other content in LTR, and to the `right` in RTL.  |
-| `end`   | Placed to the right of all other content in LTR, and to the `left` in RTL.  |
-| none    | Placed inside of the input wrapper.                                         |
-
-
-### Text Alignment
-
-Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for classes that can be added to `<ion-item>` to transform the text.
-
-
-## Input Highlight
-
-### Highlight Height
-
-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`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).
-
-### Highlight Color
-
-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. See the [CSS Custom Properties](#css-custom-properties) section below for the highlight color variables.
-
-### Counter Formatter
-
-When using `counter`, the default behavior is to format the value that gets displayed as `itemLength / maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. See the [Usage](#usage) section for an example.
-
+## 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/item/lines/index.md';
 
-## Usage
+<Lines />
 
-<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">
+## Media Items
 
-```html
-<!-- Default Item -->
-<ion-item>
-  <ion-label>
-    Item
-  </ion-label>
-</ion-item>
+[Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text.
 
-<!-- Item as a Button -->
-<ion-item button (click)="buttonClick()">
-  <ion-label>
-    Button Item
-  </ion-label>
-</ion-item>
+import Media from '@site/static/usage/item/media/index.md';
 
-<!-- Item as an Anchor -->
-<ion-item href="https://www.ionicframework.com">
-  <ion-label>
-    Anchor Item
-  </ion-label>
-</ion-item>
+<Media />
 
-<ion-item color="secondary">
-  <ion-label>
-    Secondary Color Item
-  </ion-label>
-</ion-item>
-```
 
-### Detail Arrows
-
-```html
-<ion-item detail>
-  <ion-label>
-    Standard Item with Detail Arrow
-  </ion-label>
-</ion-item>
-
-<ion-item button (click)="buttonClick()" detail>
-  <ion-label>
-    Button Item with Detail Arrow
-  </ion-label>
-</ion-item>
-
-<ion-item detail="false" href="https://www.ionicframework.com">
-  <ion-label>
-    Anchor Item with no Detail Arrow
-  </ion-label>
-</ion-item>
-```
+## Buttons in Items
 
-### List Items
-
-```html
-<ion-list>
-  <ion-item>
-    <ion-label>
-      Item
-    </ion-label>
-  </ion-item>
-
-  <ion-item lines="none">
-    <ion-label>
-      No Lines Item
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label class="ion-text-wrap">
-    Multiline text that should wrap when it is too long
-    to fit on one line in the item.
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label class="ion-text-wrap">
-      <ion-text color="primary">
-        <h3>H3 Primary Title</h3>
-      </ion-text>
-      <p>Paragraph line 1</p>
-      <ion-text color="secondary">
-        <p>Paragraph line 2 secondary</p>
-      </ion-text>
-    </ion-label>
-  </ion-item>
-
-  <ion-item lines="full">
-    <ion-label>
-      Item with Full Lines
-    </ion-label>
-  </ion-item>
-
-</ion-list>
-```
+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"`.
 
-### Item Lines
-
-```html
-<!-- Item Inset Lines -->
-<ion-item lines="inset">
-  <ion-label>Item Lines Inset</ion-label>
-</ion-item>
-
-<!-- Item Full Lines -->
-<ion-item lines="full">
-  <ion-label>Item Lines Full</ion-label>
-</ion-item>
-
-<!-- Item None Lines -->
-<ion-item lines="none">
-  <ion-label>Item Lines None</ion-label>
-</ion-item>
-
-<!-- List Full Lines -->
-<ion-list lines="full">
-  <ion-item>
-    <ion-label>Full Lines Item 1</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Full Lines Item 2</ion-label>
-  </ion-item>
-</ion-list>
-
-<!-- List Inset Lines -->
-<ion-list lines="inset">
-  <ion-item>
-    <ion-label>Inset Lines Item 1</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Inset Lines Item 2</ion-label>
-  </ion-item>
-</ion-list>
-
-<!-- List No Lines -->
-<ion-list lines="none">
-  <ion-item>
-    <ion-label>No lines Item 1</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>No lines Item 2</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>No lines Item 3</ion-label>
-  </ion-item>
-</ion-list>
-```
+import Buttons from '@site/static/usage/item/buttons/index.md';
 
+<Buttons />
 
-### Media Items
-
-```html
-<ion-item button (click)="testClick()">
-  <ion-avatar slot="start">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-avatar>
-  <ion-label>
-    Avatar Start, Button Item
-  </ion-label>
-</ion-item>
-
-<ion-item href="#">
-  <ion-label>
-    Thumbnail End, Anchor Item
-  </ion-label>
-  <ion-thumbnail slot="end">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-thumbnail>
-</ion-item>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-thumbnail>
-  <ion-label>
-    <h2>H2 Title Text</h2>
-    <p>Button on right</p>
-  </ion-label>
-  <ion-button fill="outline" slot="end">View</ion-button>
-</ion-item>
-
-<ion-item button (click)="testClick()">
-  <ion-thumbnail slot="start">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-thumbnail>
-  <ion-label>
-    <h3>H3 Title Text</h3>
-    <p>Icon on right</p>
-  </ion-label>
-  <ion-icon name="close-circle" slot="end"></ion-icon>
-</ion-item>
-```
 
-### Buttons in Items
-
-```html
-<ion-item>
-  <ion-button slot="start">
-    Start
-  </ion-button>
-  <ion-label>Button Start/End</ion-label>
-  <ion-button slot="end">
-    End
-  </ion-button>
-</ion-item>
-
-<ion-item>
-  <ion-button slot="start">
-    Start Icon
-    <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 Icon
-  </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>
-```
+## Icons in Items
 
-### Icons in Items
-
-```html
-<ion-item>
-  <ion-label>
-    Icon End
-  </ion-label>
-  <ion-icon name="information-circle" slot="end"></ion-icon>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Large Icon End
-  </ion-label>
-  <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Small Icon End
-  </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>
-    Icon Start
-  </ion-label>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Two Icons End
-  </ion-label>
-  <ion-icon name="checkmark-circle" slot="end"></ion-icon>
-  <ion-icon name="shuffle" slot="end"></ion-icon>
-</ion-item>
-```
+import Icons from '@site/static/usage/item/icons/index.md';
 
-### Item Inputs
-
-```html
-<ion-item>
-  <ion-label position="floating">Datetime</ion-label>
-  <ion-datetime></ion-datetime>
-</ion-item>
-
-<ion-item>
-  <ion-label position="floating">Select</ion-label>
-  <ion-select>
-    <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 position="floating">Floating Input</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Input (placeholder)</ion-label>
-  <ion-input placeholder="Placeholder"></ion-input>
-</ion-item>
-
-<ion-item fill="solid">
-  <ion-label position="floating">Input (Fill: Solid)</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item fill="outline">
-  <ion-label position="floating">Input (Fill: Outline)</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Helper and Error Text</ion-label>
-  <ion-input></ion-input>
-  <ion-note slot="helper">Helper Text</ion-note>
-  <ion-note slot="error">Error Text</ion-note>
-</ion-item>
-
-<ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="start"></ion-checkbox>
-</ion-item>
-
-<ion-item>
-  <ion-label>Range</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-```
+<Icons />
 
-### Item Counter
 
-```html
-<ion-item [counter]="true">
-  <ion-label>Counter</ion-label>
-  <ion-input maxlength="20"></ion-input>
-</ion-item>
-```
+## Item Inputs
 
-### Item Counter Formatter
+import Inputs from '@site/static/usage/item/inputs/index.md';
 
-```html
-<ion-item [counter]="true" [counterFormatter]="counterFormatter">
-  <ion-label>Counter</ion-label>
-  <ion-input maxlength="20"></ion-input>
-</ion-item>
+<Inputs />
 
-```
 
-```typescript
+## Helper & Error Text
 
-import { Component } from '@angular/core';
+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.
 
-@Component({…})
-export class MyComponent {
-  
-  counterFormatter(inputLength: number, maxLength: number) {
-    return `${maxLength - inputLength} characters remaining`;
-  }
-}
+import HelperError from '@site/static/usage/item/helper-error/index.md';
 
-```
+<HelperError />
 
 
-</TabItem>
+## 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.
 
-<TabItem value="javascript">
+import Counter from '@site/static/usage/item/counter/index.md';
 
-```html
-<!-- Default Item -->
-<ion-item>
-  <ion-label>
-    Item
-  </ion-label>
-</ion-item>
+<Counter />
 
-<!-- Item as a Button -->
-<ion-item button onclick="buttonClick()">
-  <ion-label>
-    Button Item
-  </ion-label>
-</ion-item>
+## Theming
 
-<!-- Item as an Anchor -->
-<ion-item href="https://www.ionicframework.com">
-  <ion-label>
-    Anchor Item
-  </ion-label>
-</ion-item>
+### Colors
 
-<ion-item color="secondary">
-  <ion-label>
-    Secondary Color Item
-  </ion-label>
-</ion-item>
-```
+import Colors from '@site/static/usage/item/theming/colors/index.md';
 
-### Detail Arrows
-
-```html
-<ion-item detail>
-  <ion-label>
-    Standard Item with Detail Arrow
-  </ion-label>
-</ion-item>
-
-<ion-item button onclick="buttonClick()" detail>
-  <ion-label>
-    Button Item with Detail Arrow
-  </ion-label>
-</ion-item>
-
-<ion-item detail="false" href="https://www.ionicframework.com">
-  <ion-label>
-    Anchor Item with no Detail Arrow
-  </ion-label>
-</ion-item>
-```
+<Colors />
 
-### List Items
-
-```html
-<ion-list>
-  <ion-item>
-    <ion-label>
-      Item
-    </ion-label>
-  </ion-item>
-
-  <ion-item lines="none">
-    <ion-label>
-      No Lines Item
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label class="ion-text-wrap">
-    Multiline text that should wrap when it is too long
-    to fit on one line in the item.
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label class="ion-text-wrap">
-      <ion-text color="primary">
-        <h3>H3 Primary Title</h3>
-      </ion-text>
-      <p>Paragraph line 1</p>
-      <ion-text color="secondary">
-        <p>Paragraph line 2 secondary</p>
-      </ion-text>
-    </ion-label>
-  </ion-item>
-
-  <ion-item lines="full">
-    <ion-label>
-      Item with Full Lines
-    </ion-label>
-  </ion-item>
-
-</ion-list>
-```
+### CSS Shadow Parts
 
-### Item Lines
-
-```html
-<!-- Item Inset Lines -->
-<ion-item lines="inset">
-  <ion-label>Item Lines Inset</ion-label>
-</ion-item>
-
-<!-- Item Full Lines -->
-<ion-item lines="full">
-  <ion-label>Item Lines Full</ion-label>
-</ion-item>
-
-<!-- Item None Lines -->
-<ion-item lines="none">
-  <ion-label>Item Lines None</ion-label>
-</ion-item>
-
-<!-- List Full Lines -->
-<ion-list lines="full">
-  <ion-item>
-    <ion-label>Full Lines Item 1</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Full Lines Item 2</ion-label>
-  </ion-item>
-</ion-list>
-
-<!-- List Inset Lines -->
-<ion-list lines="inset">
-  <ion-item>
-    <ion-label>Inset Lines Item 1</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Inset Lines Item 2</ion-label>
-  </ion-item>
-</ion-list>
-
-<!-- List No Lines -->
-<ion-list lines="none">
-  <ion-item>
-    <ion-label>No lines Item 1</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>No lines Item 2</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>No lines Item 3</ion-label>
-  </ion-item>
-</ion-list>
-```
+import CSSParts from '@site/static/usage/item/theming/css-shadow-parts/index.md';
 
+<CSSParts />
 
-### Media Items
-
-```html
-<ion-item button onclick="testClick()">
-  <ion-avatar slot="start">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-avatar>
-  <ion-label>
-    Avatar Start, Button Item
-  </ion-label>
-</ion-item>
-
-<ion-item href="#">
-  <ion-label>
-    Thumbnail End, Anchor Item
-  </ion-label>
-  <ion-thumbnail slot="end">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-thumbnail>
-</ion-item>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-thumbnail>
-  <ion-label>
-    <h2>H2 Title Text</h2>
-    <p>Button on right</p>
-  </ion-label>
-  <ion-button fill="outline" slot="end">View</ion-button>
-</ion-item>
-
-<ion-item button onclick="testClick()">
-  <ion-thumbnail slot="start">
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </ion-thumbnail>
-  <ion-label>
-    <h3>H3 Title Text</h3>
-    <p>Icon on right</p>
-  </ion-label>
-  <ion-icon name="close-circle" slot="end"></ion-icon>
-</ion-item>
-```
+### CSS Custom Properties
 
-### Buttons in Items
-
-```html
-<ion-item>
-  <ion-button slot="start">
-    Start
-  </ion-button>
-  <ion-label>Button Start/End</ion-label>
-  <ion-button slot="end">
-    End
-  </ion-button>
-</ion-item>
-
-<ion-item>
-  <ion-button slot="start">
-    Start Icon
-    <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 Icon
-  </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>
-```
+import CSSProps from '@site/static/usage/item/theming/css-properties/index.md';
 
-### Icons in Items
-
-```html
-<ion-item>
-  <ion-label>
-    Icon End
-  </ion-label>
-  <ion-icon name="information-circle" slot="end"></ion-icon>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Large Icon End
-  </ion-label>
-  <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Small Icon End
-  </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>
-    Icon Start
-  </ion-label>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Two Icons End
-  </ion-label>
-  <ion-icon name="checkmark-circle" slot="end"></ion-icon>
-  <ion-icon name="shuffle" slot="end"></ion-icon>
-</ion-item>
-```
+<CSSProps />
 
-### Item Inputs
-
-```html
-<ion-item>
-  <ion-label position="floating">Datetime</ion-label>
-  <ion-datetime></ion-datetime>
-</ion-item>
-
-<ion-item>
-  <ion-label position="floating">Select</ion-label>
-  <ion-select>
-    <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 position="floating">Floating Input</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Input (placeholder)</ion-label>
-  <ion-input placeholder="Placeholder"></ion-input>
-</ion-item>
-
-<ion-item fill="solid">
-  <ion-label position="floating">Input (Fill: Solid)</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item fill="outline">
-  <ion-label position="floating">Input (Fill: Outline)</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Helper and Error Text</ion-label>
-  <ion-input></ion-input>
-  <ion-note slot="helper">Helper Text</ion-note>
-  <ion-note slot="error">Error Text</ion-note>
-</ion-item>
-
-<ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="start"></ion-checkbox>
-</ion-item>
-
-<ion-item>
-  <ion-label>Range</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-```
-
-### Item Counter
 
-```html
-<ion-item counter="true">
-  <ion-label>Counter</ion-label>
-  <ion-input maxlength="20"></ion-input>
-</ion-item>
-```
+### Input Highlight
 
-### Item Counter Formatter
+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`.
 
-```html
-<ion-item counter="true" id="custom-item">
-  <ion-label>Counter</ion-label>
-  <ion-input maxlength="20"></ion-input>
-</ion-item>
+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.
 
-<script>
-  const customItem = document.querySelector('#custom-item');
-  customItem.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`; 
-</script>
-
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange, IonNote } from '@ionic/react';
-import { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons';
-
-export const ItemExamples: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>ItemExamples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        {/*-- Default Item --*/}
-        <IonItem>
-          <IonLabel>
-            Item
-          </IonLabel>
-        </IonItem>
-
-        {/*-- Item as a Button --*/}
-        <IonItem button onClick={() => { }}>
-          <IonLabel>
-            Button Item
-          </IonLabel>
-        </IonItem>
-
-        {/*-- Item as an Anchor --*/}
-        <IonItem href="https://www.ionicframework.com">
-          <IonLabel>
-            Anchor Item
-          </IonLabel>
-        </IonItem>
-
-        <IonItem color="secondary">
-          <IonLabel>
-            Secondary Color Item
-          </IonLabel>
-        </IonItem>
-
-        {/*-- Detail Arrows --*/}
-        <IonItem detail>
-          <IonLabel>
-            Standard Item with Detail Arrow
-          </IonLabel>
-        </IonItem>
-
-        <IonItem button onClick={() => { }} detail>
-          <IonLabel>
-            Button Item with Detail Arrow
-          </IonLabel>
-        </IonItem>
-
-        <IonItem detail={false} href="https://www.ionicframework.com">
-          <IonLabel>
-            Anchor Item with no Detail Arrow
-          </IonLabel>
-        </IonItem>
-
-        <IonList>
-          <IonItem>
-            <IonLabel>
-              Item
-            </IonLabel>
-          </IonItem>
-
-          <IonItem lines="none">
-            <IonLabel>
-              No Lines Item
-            </IonLabel>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel className="ion-text-wrap">
-              Multiline text that should wrap when it is too long
-              to fit on one line in the item.
-            </IonLabel>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel className="ion-text-wrap">
-              <IonText color="primary">
-                <h3>H3 Primary Title</h3>
-              </IonText>
-              <p>Paragraph line 1</p>
-              <IonText color="secondary">
-                <p>Paragraph line 2 secondary</p>
-              </IonText>
-            </IonLabel>
-          </IonItem>
-
-          <IonItem lines="full">
-            <IonLabel>
-              Item with Full Lines
-            </IonLabel>
-          </IonItem>
-        </IonList>
-
-        {/*-- Item Inset Lines --*/}
-        <IonItem lines="inset">
-          <IonLabel>Item Lines Inset</IonLabel>
-        </IonItem>
-
-        {/*-- Item Full Lines --*/}
-        <IonItem lines="full">
-          <IonLabel>Item Lines Full</IonLabel>
-        </IonItem>
-
-        {/*-- Item None Lines --*/}
-        <IonItem lines="none">
-          <IonLabel>Item Lines None</IonLabel>
-        </IonItem>
-
-        {/*-- List Full Lines --*/}
-        <IonList lines="full">
-          <IonItem>
-            <IonLabel>Full Lines Item 1</IonLabel>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel>Full Lines Item 2</IonLabel>
-          </IonItem>
-        </IonList>
-
-        {/*-- List Inset Lines --*/}
-        <IonList lines="inset">
-          <IonItem>
-            <IonLabel>Inset Lines Item 1</IonLabel>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel>Inset Lines Item 2</IonLabel>
-          </IonItem>
-        </IonList>
-
-        {/*-- List No Lines --*/}
-        <IonList lines="none">
-          <IonItem>
-            <IonLabel>No lines Item 1</IonLabel>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel>No lines Item 2</IonLabel>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel>No lines Item 3</IonLabel>
-          </IonItem>
-        </IonList>
-
-        <IonItem button onClick={() => { }}>
-          <IonAvatar slot="start">
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </IonAvatar>
-          <IonLabel>
-            Avatar Start, Button Item
-          </IonLabel>
-        </IonItem>
-
-        <IonItem href="#">
-          <IonLabel>
-            Thumbnail End, Anchor Item
-          </IonLabel>
-          <IonThumbnail slot="end">
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </IonThumbnail>
-        </IonItem>
-
-        <IonItem>
-          <IonThumbnail slot="start">
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </IonThumbnail>
-          <IonLabel>
-            <h2>H2 Title Text</h2>
-            <p>Button on right</p>
-          </IonLabel>
-          <IonButton fill="outline" slot="end">View</IonButton>
-        </IonItem>
-
-        <IonItem button onClick={() => { }}>
-          <IonThumbnail slot="start">
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </IonThumbnail>
-          <IonLabel>
-            <h3>H3 Title Text</h3>
-            <p>Icon on right</p>
-          </IonLabel>
-          <IonIcon icon={closeCircle} slot="end" />
-        </IonItem>
-
-        {/*-- Buttons in Items --*/}
-        <IonItem>
-          <IonButton slot="start">
-            Start
-          </IonButton>
-          <IonLabel>Button Start/End</IonLabel>
-          <IonButton slot="end">
-            End
-          </IonButton>
-        </IonItem>
-
-        <IonItem>
-          <IonButton slot="start">
-            Start Icon
-            <IonIcon icon={home} slot="end" />
-          </IonButton>
-          <IonLabel>Buttons with Icons</IonLabel>
-          <IonButton slot="end">
-            <IonIcon icon={star} slot="end" />
-            End Icon
-          </IonButton>
-        </IonItem>
-
-        <IonItem>
-          <IonButton slot="start">
-            <IonIcon slot="icon-only" icon={navigate} />
-          </IonButton>
-          <IonLabel>Icon only Buttons</IonLabel>
-          <IonButton slot="end">
-            <IonIcon slot="icon-only" icon={star} />
-          </IonButton>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>
-            Icon End
-          </IonLabel>
-          <IonIcon icon={informationCircle} slot="end" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>
-            Large Icon End
-          </IonLabel>
-          <IonIcon icon={informationCircle} size="large" slot="end" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>
-            Small Icon End
-          </IonLabel>
-          <IonIcon icon={informationCircle} size="small" slot="end" />
-        </IonItem>
-
-        <IonItem>
-          <IonIcon icon={star} slot="start" />
-          <IonLabel>
-            Icon Start
-          </IonLabel>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>
-            Two Icons End
-          </IonLabel>
-          <IonIcon icon={checkmarkCircle} slot="end" />
-          <IonIcon icon={shuffle} slot="end" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel position="floating">Datetime</IonLabel>
-          <IonDatetime></IonDatetime>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel position="floating">Select</IonLabel>
-          <IonSelect>
-            <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 position="floating">Floating Input</IonLabel>
-          <IonInput></IonInput>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Input (placeholder)</IonLabel>
-          <IonInput placeholder="Placeholder"></IonInput>
-        </IonItem>
-
-        <IonItem fill="solid">
-          <IonLabel position="stacked">Input (Fill: Solid)</IonLabel>
-          <IonInput></IonInput>
-        </IonItem>
-
-        <IonItem fill="outline">
-          <IonLabel position="floating">Input (Fill: Outline)</IonLabel>
-          <IonInput></IonInput>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Helper and Error Text</IonLabel>
-          <IonInput></IonInput>
-          <IonNote slot="helper">Helper Text</IonNote>
-          <IonNote slot="error">Error Text</IonNote>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Checkbox</IonLabel>
-          <IonCheckbox slot="start" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Range</IonLabel>
-          <IonRange></IonRange>
-        </IonItem>
-
-        {/*-- Item Counter --*/}
-        <IonItem counter={true}>
-          <IonLabel>Counter</IonLabel>
-          <IonInput maxlength="20"></IonInput>
-        </IonItem>
-
-        {/*-- Item Counter Formatter --*/}
-        <IonItem counter={true} counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}>
-          <IonLabel>Counter</IonLabel>
-          <IonInput maxlength="20"></IonInput>
-        </IonItem>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  buttonClick() {
-    console.log('Clicked button');
-  }
-
-  render() {
-    return [
-      // Default Item
-      <ion-item>
-        <ion-label>
-          Item
-        </ion-label>
-      </ion-item>,
-
-      // Item as a Button
-      <ion-item button onClick={() => this.buttonClick()}>
-        <ion-label>
-          Button Item
-        </ion-label>
-      </ion-item>,
-
-      // Item as an Anchor
-      <ion-item href="https://www.ionicframework.com">
-        <ion-label>
-          Anchor Item
-        </ion-label>
-      </ion-item>,
-
-      <ion-item color="secondary">
-        <ion-label>
-          Secondary Color Item
-        </ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-### Detail Arrows
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  buttonClick() {
-    console.log('Clicked button');
-  }
-
-  render() {
-    return [
-      <ion-item detail>
-        <ion-label>
-          Standard Item with Detail Arrow
-        </ion-label>
-      </ion-item>,
-
-      <ion-item button onClick={() => this.buttonClick()} detail>
-        <ion-label>
-          Button Item with Detail Arrow
-        </ion-label>
-      </ion-item>,
-
-      <ion-item detail={false} href="https://www.ionicframework.com">
-        <ion-label>
-          Anchor Item with no Detail Arrow
-        </ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-### List Items
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  render() {
-    return [
-      <ion-list>
-        <ion-item>
-          <ion-label>
-            Item
-          </ion-label>
-        </ion-item>,
-
-        <ion-item lines="none">
-          <ion-label>
-            No Lines Item
-          </ion-label>
-        </ion-item>,
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-          Multiline text that should wrap when it is too long
-          to fit on one line in the item.
-          </ion-label>
-        </ion-item>,
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-            <ion-text color="primary">
-              <h3>H3 Primary Title</h3>
-            </ion-text>
-            <p>Paragraph line 1</p>
-            <ion-text color="secondary">
-              <p>Paragraph line 2 secondary</p>
-            </ion-text>
-          </ion-label>
-        </ion-item>,
-
-        <ion-item lines="full">
-          <ion-label>
-            Item with Full Lines
-          </ion-label>
-        </ion-item>
-      </ion-list>
-    ];
-  }
-}
-```
-
-### Item Lines
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  render() {
-    return [
-      // Item Inset Lines
-      <ion-item lines="inset">
-        <ion-label>Item Lines Inset</ion-label>
-      </ion-item>,
-
-      // Item Full Lines
-      <ion-item lines="full">
-        <ion-label>Item Lines Full</ion-label>
-      </ion-item>,
-
-      // Item None Lines
-      <ion-item lines="none">
-        <ion-label>Item Lines None</ion-label>
-      </ion-item>,
-
-      // List Full Lines
-      <ion-list lines="full">
-        <ion-item>
-          <ion-label>Full Lines Item 1</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Full Lines Item 2</ion-label>
-        </ion-item>
-      </ion-list>,
-
-      // List Inset Lines
-      <ion-list lines="inset">
-        <ion-item>
-          <ion-label>Inset Lines Item 1</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Inset Lines Item 2</ion-label>
-        </ion-item>
-      </ion-list>,
-
-      // List No Lines
-      <ion-list lines="none">
-        <ion-item>
-          <ion-label>No lines Item 1</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>No lines Item 2</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>No lines Item 3</ion-label>
-        </ion-item>
-      </ion-list>
-    ];
-  }
-}
-```
-
-### Media Items
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  testClick() {
-    console.log('Test click');
-  }
-
-  render() {
-    return [
-      <ion-item button onClick={() => this.testClick()}>
-        <ion-avatar slot="start">
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
-        </ion-avatar>
-        <ion-label>
-          Avatar Start, Button Item
-        </ion-label>
-      </ion-item>,
-
-      <ion-item href="#">
-        <ion-label>
-          Thumbnail End, Anchor Item
-        </ion-label>
-        <ion-thumbnail slot="end">
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
-        </ion-thumbnail>
-      </ion-item>,
-
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
-        </ion-thumbnail>
-        <ion-label>
-          <h2>H2 Title Text</h2>
-          <p>Button on right</p>
-        </ion-label>
-        <ion-button fill="outline" slot="end">View</ion-button>
-      </ion-item>,
-
-      <ion-item button onClick={() => this.testClick()}>
-        <ion-thumbnail slot="start">
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>H3 Title Text</h3>
-          <p>Icon on right</p>
-        </ion-label>
-        <ion-icon name="close-circle" slot="end"></ion-icon>
-      </ion-item>
-    ];
-  }
-}
-```
-
-### Buttons in Items
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  render() {
-    return [
-      <ion-item>
-        <ion-button slot="start">
-          Start
-        </ion-button>
-        <ion-label>Button Start/End</ion-label>
-        <ion-button slot="end">
-          End
-        </ion-button>
-      </ion-item>,
-
-      <ion-item>
-        <ion-button slot="start">
-          Start Icon
-          <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 Icon
-        </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>
-    ];
-  }
-}
-```
-
-### Icons in Items
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  render() {
-    return [
-      <ion-item>
-        <ion-label>
-          Icon End
-        </ion-label>
-        <ion-icon name="information-circle" slot="end"></ion-icon>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>
-          Large Icon End
-        </ion-label>
-        <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>
-          Small Icon End
-        </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>
-          Icon Start
-        </ion-label>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>
-          Two Icons End
-        </ion-label>
-        <ion-icon name="checkmark-circle" slot="end"></ion-icon>
-        <ion-icon name="shuffle" slot="end"></ion-icon>
-      </ion-item>
-    ];
-  }
-}
-```
-
-### Item Inputs
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  render() {
-    return [
-      <ion-item>
-        <ion-label position="floating">Datetime</ion-label>
-        <ion-datetime></ion-datetime>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label position="floating">Select</ion-label>
-        <ion-select>
-          <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 position="floating">Floating Input</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Input (placeholder)</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
-      </ion-item>,
-
-      <ion-item fill="solid">
-        <ion-label position="floating">Input (Fill: Solid)</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item fill="outline">
-        <ion-label position="floating">Input (Fill: Outline)</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Helper and Error Text</ion-label>
-        <ion-input></ion-input>
-        <ion-note slot="helper">Helper Text</ion-note>
-        <ion-note slot="error">Error Text</ion-note>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Checkbox</ion-label>
-        <ion-checkbox slot="start"></ion-checkbox>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Range</ion-label>
-        <ion-range></ion-range>
-      </ion-item>
-    ];
-  }
-}
-```
-
-### Item Counter
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  render() {
-    return [
-      <ion-item counter={true}>
-        <ion-label>Counter</ion-label>
-        <ion-input maxlength="20"></ion-input>
-      </ion-item>
-    ];
-  }
-}
-```
-
-### Item Counter Formatter
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-example',
-  styleUrl: 'item-example.css'
-})
-export class ItemExample {
-  render() {
-    return [
-      <ion-item counter="true" counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}>
-        <ion-label>Counter</ion-label>
-        <ion-input maxlength="20"></ion-input>
-      </ion-item>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Item -->
-  <ion-item>
-    <ion-label>
-      Item
-    </ion-label>
-  </ion-item>
-
-  <!-- Item as a Button -->
-  <ion-item button @click="buttonClick()">
-    <ion-label>
-      Button Item
-    </ion-label>
-  </ion-item>
-
-  <!-- Item as an Anchor -->
-  <ion-item href="https://www.ionicframework.com">
-    <ion-label>
-      Anchor Item
-    </ion-label>
-  </ion-item>
-
-  <ion-item color="secondary">
-    <ion-label>
-      Secondary Color Item
-    </ion-label>
-  </ion-item>
-</template>
-```
-
-### Detail Arrows
-
-```html
-<template>
-  <ion-item detail>
-    <ion-label>
-      Standard Item with Detail Arrow
-    </ion-label>
-  </ion-item>
-
-  <ion-item button @click="buttonClick()" detail>
-    <ion-label>
-      Button Item with Detail Arrow
-    </ion-label>
-  </ion-item>
-
-  <ion-item detail="false" href="https://www.ionicframework.com">
-    <ion-label>
-      Anchor Item with no Detail Arrow
-    </ion-label>
-  </ion-item>
-</template>
-```
-
-### List Items
-
-```html
-<template>
-  <ion-list>
-    <ion-item>
-      <ion-label>
-        Item
-      </ion-label>
-    </ion-item>
-
-    <ion-item lines="none">
-      <ion-label>
-        No Lines Item
-      </ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-label class="ion-text-wrap">
-      Multiline text that should wrap when it is too long
-      to fit on one line in the item.
-      </ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-label class="ion-text-wrap">
-        <ion-text color="primary">
-          <h3>H3 Primary Title</h3>
-        </ion-text>
-        <p>Paragraph line 1</p>
-        <ion-text color="secondary">
-          <p>Paragraph line 2 secondary</p>
-        </ion-text>
-      </ion-label>
-    </ion-item>
-
-    <ion-item lines="full">
-      <ion-label>
-        Item with Full Lines
-      </ion-label>
-    </ion-item>
-
-  </ion-list>
-</template>
-```
-
-### Item Lines
-
-```html
-<template>
-  <!-- Item Inset Lines -->
-  <ion-item lines="inset">
-    <ion-label>Item Lines Inset</ion-label>
-  </ion-item>
-
-  <!-- Item Full Lines -->
-  <ion-item lines="full">
-    <ion-label>Item Lines Full</ion-label>
-  </ion-item>
-
-  <!-- Item None Lines -->
-  <ion-item lines="none">
-    <ion-label>Item Lines None</ion-label>
-  </ion-item>
-
-  <!-- List Full Lines -->
-  <ion-list lines="full">
-    <ion-item>
-      <ion-label>Full Lines Item 1</ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Full Lines Item 2</ion-label>
-    </ion-item>
-  </ion-list>
-
-  <!-- List Inset Lines -->
-  <ion-list lines="inset">
-    <ion-item>
-      <ion-label>Inset Lines Item 1</ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Inset Lines Item 2</ion-label>
-    </ion-item>
-  </ion-list>
-
-  <!-- List No Lines -->
-  <ion-list lines="none">
-    <ion-item>
-      <ion-label>No lines Item 1</ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>No lines Item 2</ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>No lines Item 3</ion-label>
-    </ion-item>
-  </ion-list>
-</template>
-```
-
-
-### Media Items
-
-```html
-<template>
-  <ion-item button @click="testClick()">
-    <ion-avatar slot="start">
-      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </ion-avatar>
-    <ion-label>
-      Avatar Start, Button Item
-    </ion-label>
-  </ion-item>
-
-  <ion-item href="#">
-    <ion-label>
-      Thumbnail End, Anchor Item
-    </ion-label>
-    <ion-thumbnail slot="end">
-      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </ion-thumbnail>
-  </ion-item>
-
-  <ion-item>
-    <ion-thumbnail slot="start">
-      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </ion-thumbnail>
-    <ion-label>
-      <h2>H2 Title Text</h2>
-      <p>Button on right</p>
-    </ion-label>
-    <ion-button fill="outline" slot="end">View</ion-button>
-  </ion-item>
-
-  <ion-item button @click="testClick()">
-    <ion-thumbnail slot="start">
-      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </ion-thumbnail>
-    <ion-label>
-      <h3>H3 Title Text</h3>
-      <p>Icon on right</p>
-    </ion-label>
-    <ion-icon :icon="closeCircle" slot="end"></ion-icon>
-  </ion-item>
-</template>
-```
-
-### Buttons in Items
-
-```html
-<template>
-  <ion-item>
-    <ion-button slot="start">
-      Start
-    </ion-button>
-    <ion-label>Button Start/End</ion-label>
-    <ion-button slot="end">
-      End
-    </ion-button>
-  </ion-item>
-
-  <ion-item>
-    <ion-button slot="start">
-      Start Icon
-      <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 Icon
-    </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>
-</template>
-```
-
-### Icons in Items
-
-```html
-<template>
-  <ion-item>
-    <ion-label>
-      Icon End
-    </ion-label>
-    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Large Icon End
-    </ion-label>
-    <ion-icon :icon="informationCircle" size="large" slot="end"></ion-icon>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Small Icon End
-    </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>
-      Icon Start
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Two Icons End
-    </ion-label>
-    <ion-icon :icon="checkmarkCircle" slot="end"></ion-icon>
-    <ion-icon :icon="shuffle" slot="end"></ion-icon>
-  </ion-item>
-</template>
-```
-
-### Item Inputs
-
-```html
-<template>
-  <ion-item>
-    <ion-label position="floating">Datetime</ion-label>
-    <ion-datetime></ion-datetime>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="floating">Select</ion-label>
-    <ion-select>
-      <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 position="floating">Floating Input</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Input (placeholder)</ion-label>
-    <ion-input placeholder="Placeholder"></ion-input>
-  </ion-item>
-
-  <ion-item fill="solid">
-    <ion-label position="floating">Input (Fill: Solid)</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item fill="outline">
-    <ion-label position="floating">Input (Fill: Outline)</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Helper and Error Text</ion-label>
-    <ion-input></ion-input>
-    <ion-note slot="helper">Helper Text</ion-note>
-    <ion-note slot="error">Error Text</ion-note>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Checkbox</ion-label>
-    <ion-checkbox slot="start"></ion-checkbox>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Range</ion-label>
-    <ion-range></ion-range>
-  </ion-item>
-</template>
-
-<script>
-import { 
-  IonAvatar,
-  IonButton,
-  IonCheckbox, 
-  IonDatetime,
-  IonNote,
-  IonIcon,
-  IonInput, 
-  IonItem, 
-  IonLabel, 
-  IonRange,
-  IonSelect, 
-  IonSelectOption, 
-  IonText,
-  IonThumbnail,
-  IonToggle
-} from '@ionic/vue';
-import { 
-  checkmarkCircle, 
-  closeCircle, 
-  home, 
-  informationCircle, 
-  navigate, 
-  shuffle, 
-  star
-} from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { 
-    IonAvatar,
-    IonButton,
-    IonCheckbox, 
-    IonDatetime,
-    IonNote,
-    IonIcon,
-    IonInput, 
-    IonItem, 
-    IonLabel, 
-    IonRange,
-    IonSelect, 
-    IonSelectOption, 
-    IonText,
-    IonThumbnail,
-    IonToggle
-  },
-  setup() {
-    return {
-      checkmarkCircle, 
-      closeCircle, 
-      home, 
-      informationCircle, 
-      navigate, 
-      shuffle, 
-      star
-    }
-  }
-});
-</script>
-```
-
-### Item Counter
-
-```html
-<template>
-  <ion-item :counter="true">
-    <ion-label>Counter</ion-label>
-    <ion-input maxlength="20"></ion-input>
-  </ion-item>
-</template>
-```
-
-### Item Counter Formatter
-
-```html
-<template>
-  <ion-item :counter="true" :counter-formatter="counterFormatter">
-    <ion-label>Counter</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: {  IonItem, IonLabel, IonInput },
-  setup() {
-    const counterFormatter = (inputLength: number, maxLength: number) => `${maxLength - inputLength} characters remaining`;
-    
-    return { counterFormatter };
-  }
-});
-</script>
-```
+import InputHighlight from '@site/static/usage/item/theming/input-highlight/index.md';
 
-</TabItem>
+<InputHighlight />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -2139,4 +167,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/item/basic/angular.md b/static/usage/item/basic/angular.md
new file mode 100644
index 00000000000..f0b13250493
--- /dev/null
+++ b/static/usage/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/item/basic/demo.html b/static/usage/item/basic/demo.html
new file mode 100644
index 00000000000..1de29aff75a
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/basic/index.md b/static/usage/item/basic/index.md
new file mode 100644
index 00000000000..8669af952c4
--- /dev/null
+++ b/static/usage/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/item/basic/demo.html" size="medium" />
diff --git a/static/usage/item/basic/javascript.md b/static/usage/item/basic/javascript.md
new file mode 100644
index 00000000000..f0b13250493
--- /dev/null
+++ b/static/usage/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/item/basic/react.md b/static/usage/item/basic/react.md
new file mode 100644
index 00000000000..dfed86af19e
--- /dev/null
+++ b/static/usage/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/item/basic/vue.md b/static/usage/item/basic/vue.md
new file mode 100644
index 00000000000..479e90196a4
--- /dev/null
+++ b/static/usage/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/item/buttons/angular.md b/static/usage/item/buttons/angular.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/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/item/buttons/demo.html b/static/usage/item/buttons/demo.html
new file mode 100644
index 00000000000..eb6b01d9a20
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/buttons/index.md b/static/usage/item/buttons/index.md
new file mode 100644
index 00000000000..b6c3daa54f7
--- /dev/null
+++ b/static/usage/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/item/buttons/demo.html" size="250px"/>
diff --git a/static/usage/item/buttons/javascript.md b/static/usage/item/buttons/javascript.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/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/item/buttons/react.md b/static/usage/item/buttons/react.md
new file mode 100644
index 00000000000..8776e5215fb
--- /dev/null
+++ b/static/usage/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/item/buttons/vue.md b/static/usage/item/buttons/vue.md
new file mode 100644
index 00000000000..02de38e58ab
--- /dev/null
+++ b/static/usage/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/item/clickable/angular.md b/static/usage/item/clickable/angular.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/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/item/clickable/demo.html b/static/usage/item/clickable/demo.html
new file mode 100644
index 00000000000..de3058eab56
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/clickable/index.md b/static/usage/item/clickable/index.md
new file mode 100644
index 00000000000..6cdc5c1cb51
--- /dev/null
+++ b/static/usage/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/item/clickable/demo.html" />
diff --git a/static/usage/item/clickable/javascript.md b/static/usage/item/clickable/javascript.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/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/item/clickable/react.md b/static/usage/item/clickable/react.md
new file mode 100644
index 00000000000..c83845b65c7
--- /dev/null
+++ b/static/usage/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/item/clickable/vue.md b/static/usage/item/clickable/vue.md
new file mode 100644
index 00000000000..1af8f362758
--- /dev/null
+++ b/static/usage/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/item/counter/angular/example_component_html.md b/static/usage/item/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..913d6644cfc
--- /dev/null
+++ b/static/usage/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/item/counter/angular/example_component_ts.md b/static/usage/item/counter/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c08dc06fc2
--- /dev/null
+++ b/static/usage/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/item/counter/demo.html b/static/usage/item/counter/demo.html
new file mode 100644
index 00000000000..e03792f80fa
--- /dev/null
+++ b/static/usage/item/counter/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>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 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
new file mode 100644
index 00000000000..8f916341093
--- /dev/null
+++ b/static/usage/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/item/counter/demo.html"
+/>
diff --git a/static/usage/item/counter/javascript.md b/static/usage/item/counter/javascript.md
new file mode 100644
index 00000000000..761f1819ef9
--- /dev/null
+++ b/static/usage/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/item/counter/react.md b/static/usage/item/counter/react.md
new file mode 100644
index 00000000000..435701d5b53
--- /dev/null
+++ b/static/usage/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/item/counter/vue.md b/static/usage/item/counter/vue.md
new file mode 100644
index 00000000000..3a97d40743a
--- /dev/null
+++ b/static/usage/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/item/detail-arrows/angular.md b/static/usage/item/detail-arrows/angular.md
new file mode 100644
index 00000000000..aa14eb9ec2d
--- /dev/null
+++ b/static/usage/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/item/detail-arrows/demo.html b/static/usage/item/detail-arrows/demo.html
new file mode 100644
index 00000000000..34ee140e05d
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/detail-arrows/index.md b/static/usage/item/detail-arrows/index.md
new file mode 100644
index 00000000000..7cdc02d1c5a
--- /dev/null
+++ b/static/usage/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/item/detail-arrows/demo.html" size="350px" />
diff --git a/static/usage/item/detail-arrows/javascript.md b/static/usage/item/detail-arrows/javascript.md
new file mode 100644
index 00000000000..aa14eb9ec2d
--- /dev/null
+++ b/static/usage/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/item/detail-arrows/react.md b/static/usage/item/detail-arrows/react.md
new file mode 100644
index 00000000000..de16b10fde6
--- /dev/null
+++ b/static/usage/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/item/detail-arrows/vue.md b/static/usage/item/detail-arrows/vue.md
new file mode 100644
index 00000000000..d341c004f15
--- /dev/null
+++ b/static/usage/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/item/helper-error/angular.md b/static/usage/item/helper-error/angular.md
new file mode 100644
index 00000000000..05959c95210
--- /dev/null
+++ b/static/usage/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/item/helper-error/demo.html b/static/usage/item/helper-error/demo.html
new file mode 100644
index 00000000000..7679c1ff024
--- /dev/null
+++ b/static/usage/item/helper-error/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>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 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
new file mode 100644
index 00000000000..c9e0dc49ee2
--- /dev/null
+++ b/static/usage/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
+  code={{
+  javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/item/helper-error/demo.html"
+/>
+
diff --git a/static/usage/item/helper-error/javascript.md b/static/usage/item/helper-error/javascript.md
new file mode 100644
index 00000000000..eb0d43327d9
--- /dev/null
+++ b/static/usage/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/item/helper-error/react.md b/static/usage/item/helper-error/react.md
new file mode 100644
index 00000000000..a1e0e1e1b25
--- /dev/null
+++ b/static/usage/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/item/helper-error/vue.md b/static/usage/item/helper-error/vue.md
new file mode 100644
index 00000000000..0febb45cfe4
--- /dev/null
+++ b/static/usage/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/item/icons/angular.md b/static/usage/item/icons/angular.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/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/item/icons/demo.html b/static/usage/item/icons/demo.html
new file mode 100644
index 00000000000..db1a24826f4
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/icons/index.md b/static/usage/item/icons/index.md
new file mode 100644
index 00000000000..2359440cc60
--- /dev/null
+++ b/static/usage/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/item/icons/demo.html" size="250px"/>
diff --git a/static/usage/item/icons/javascript.md b/static/usage/item/icons/javascript.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/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/item/icons/react.md b/static/usage/item/icons/react.md
new file mode 100644
index 00000000000..a5fc0ae6629
--- /dev/null
+++ b/static/usage/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/item/icons/vue.md b/static/usage/item/icons/vue.md
new file mode 100644
index 00000000000..82e09004fbe
--- /dev/null
+++ b/static/usage/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/item/inputs/angular.md b/static/usage/item/inputs/angular.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/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/item/inputs/demo.html b/static/usage/item/inputs/demo.html
new file mode 100644
index 00000000000..e8bde0189d1
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/inputs/index.md b/static/usage/item/inputs/index.md
new file mode 100644
index 00000000000..68c58eb3b30
--- /dev/null
+++ b/static/usage/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/item/inputs/demo.html" size="large" />
diff --git a/static/usage/item/inputs/javascript.md b/static/usage/item/inputs/javascript.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/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/item/inputs/react.md b/static/usage/item/inputs/react.md
new file mode 100644
index 00000000000..0cb6523f053
--- /dev/null
+++ b/static/usage/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/item/inputs/vue.md b/static/usage/item/inputs/vue.md
new file mode 100644
index 00000000000..7dc085a7a4d
--- /dev/null
+++ b/static/usage/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/item/lines/angular.md b/static/usage/item/lines/angular.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/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/item/lines/demo.html b/static/usage/item/lines/demo.html
new file mode 100644
index 00000000000..e42c9bcaeae
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/lines/index.md b/static/usage/item/lines/index.md
new file mode 100644
index 00000000000..42de7b4cbe7
--- /dev/null
+++ b/static/usage/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/item/lines/demo.html" size="medium" />
diff --git a/static/usage/item/lines/javascript.md b/static/usage/item/lines/javascript.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/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/item/lines/react.md b/static/usage/item/lines/react.md
new file mode 100644
index 00000000000..c5e2cf3f55c
--- /dev/null
+++ b/static/usage/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/item/lines/vue.md b/static/usage/item/lines/vue.md
new file mode 100644
index 00000000000..37c6c432ca4
--- /dev/null
+++ b/static/usage/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/item/media/angular.md b/static/usage/item/media/angular.md
new file mode 100644
index 00000000000..398e8382e00
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>
+    Thumbnail Item
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/item/media/demo.html b/static/usage/item/media/demo.html
new file mode 100644
index 00000000000..cc2e68fa6f5
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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/demos/api/thumbnail/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
new file mode 100644
index 00000000000..c95b9ffbe8f
--- /dev/null
+++ b/static/usage/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/item/media/demo.html" />
diff --git a/static/usage/item/media/javascript.md b/static/usage/item/media/javascript.md
new file mode 100644
index 00000000000..398e8382e00
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>
+    Thumbnail Item
+  </ion-label>
+</ion-item>
+```
diff --git a/static/usage/item/media/react.md b/static/usage/item/media/react.md
new file mode 100644
index 00000000000..f1eec0071de
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>
+          Avatar Item
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonThumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        </IonThumbnail>
+        <IonLabel>
+          Thumbnail Item
+        </IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/item/media/vue.md b/static/usage/item/media/vue.md
new file mode 100644
index 00000000000..e7f7bdd2b1d
--- /dev/null
+++ b/static/usage/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/demos/api/avatar/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/demos/api/thumbnail/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/item/theming/colors/angular.md b/static/usage/item/theming/colors/angular.md
new file mode 100644
index 00000000000..f1b6dd45e0c
--- /dev/null
+++ b/static/usage/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/item/theming/colors/demo.html b/static/usage/item/theming/colors/demo.html
new file mode 100644
index 00000000000..43e8da2b87a
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/theming/colors/index.md b/static/usage/item/theming/colors/index.md
new file mode 100644
index 00000000000..7dfba65c7dc
--- /dev/null
+++ b/static/usage/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/item/theming/colors/demo.html" size="500px" />
diff --git a/static/usage/item/theming/colors/javascript.md b/static/usage/item/theming/colors/javascript.md
new file mode 100644
index 00000000000..f1b6dd45e0c
--- /dev/null
+++ b/static/usage/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/item/theming/colors/react.md b/static/usage/item/theming/colors/react.md
new file mode 100644
index 00000000000..2efad83cba3
--- /dev/null
+++ b/static/usage/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/item/theming/colors/vue.md b/static/usage/item/theming/colors/vue.md
new file mode 100644
index 00000000000..b98f625e479
--- /dev/null
+++ b/static/usage/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/item/theming/css-properties/angular/example_component_css.md b/static/usage/item/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/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/item/theming/css-properties/angular/example_component_html.md b/static/usage/item/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/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/item/theming/css-properties/demo.html b/static/usage/item/theming/css-properties/demo.html
new file mode 100644
index 00000000000..0c2abb8618e
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/theming/css-properties/index.md b/static/usage/item/theming/css-properties/index.md
new file mode 100644
index 00000000000..f90c324e49f
--- /dev/null
+++ b/static/usage/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/item/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/item/theming/css-properties/javascript.md b/static/usage/item/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..d1ad4121c2d
--- /dev/null
+++ b/static/usage/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/item/theming/css-properties/react/main_css.md b/static/usage/item/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/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/item/theming/css-properties/react/main_tsx.md b/static/usage/item/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/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/item/theming/css-properties/vue.md b/static/usage/item/theming/css-properties/vue.md
new file mode 100644
index 00000000000..305102b811b
--- /dev/null
+++ b/static/usage/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/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/item/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/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/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/item/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/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/item/theming/css-shadow-parts/demo.html b/static/usage/item/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..634f823b2ad
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/theming/css-shadow-parts/index.md b/static/usage/item/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..ba0c81000cd
--- /dev/null
+++ b/static/usage/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/item/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/item/theming/css-shadow-parts/javascript.md b/static/usage/item/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..1991ad6c139
--- /dev/null
+++ b/static/usage/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/item/theming/css-shadow-parts/react/main_css.md b/static/usage/item/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/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/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/item/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/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/item/theming/css-shadow-parts/vue.md b/static/usage/item/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..b0ebb030693
--- /dev/null
+++ b/static/usage/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/item/theming/input-highlight/angular/example_component_css.md b/static/usage/item/theming/input-highlight/angular/example_component_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/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/item/theming/input-highlight/angular/example_component_html.md b/static/usage/item/theming/input-highlight/angular/example_component_html.md
new file mode 100644
index 00000000000..59a5e5928a9
--- /dev/null
+++ b/static/usage/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/item/theming/input-highlight/demo.html b/static/usage/item/theming/input-highlight/demo.html
new file mode 100644
index 00000000000..8ef4e2ccaf6
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item/theming/input-highlight/index.md b/static/usage/item/theming/input-highlight/index.md
new file mode 100644
index 00000000000..08ec4847c8c
--- /dev/null
+++ b/static/usage/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/item/theming/input-highlight/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/item/theming/input-highlight/javascript.md b/static/usage/item/theming/input-highlight/javascript.md
new file mode 100644
index 00000000000..b26cebd530e
--- /dev/null
+++ b/static/usage/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/item/theming/input-highlight/react/main_css.md b/static/usage/item/theming/input-highlight/react/main_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/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/item/theming/input-highlight/react/main_tsx.md b/static/usage/item/theming/input-highlight/react/main_tsx.md
new file mode 100644
index 00000000000..67d46a73267
--- /dev/null
+++ b/static/usage/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/item/theming/input-highlight/vue.md b/static/usage/item/theming/input-highlight/vue.md
new file mode 100644
index 00000000000..52713eb0ca5
--- /dev/null
+++ b/static/usage/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>
+```

From 7fb84edbd5d8e0cefcdd90392d6f88b6ce46231c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 16 Sep 2022 15:19:28 -0400
Subject: [PATCH 050/469] docs(item-sliding): add component playgrounds (#2551)

---
 docs/api/item-sliding.md                      | 875 +-----------------
 static/usage/item-sliding/basic/angular.md    |  39 +
 static/usage/item-sliding/basic/demo.html     |  66 ++
 static/usage/item-sliding/basic/index.md      |   8 +
 static/usage/item-sliding/basic/javascript.md |  39 +
 static/usage/item-sliding/basic/react.md      |  47 +
 static/usage/item-sliding/basic/vue.md        |  50 +
 .../usage/item-sliding/expandable/angular.md  |  18 +
 .../usage/item-sliding/expandable/demo.html   |  45 +
 static/usage/item-sliding/expandable/index.md |   8 +
 .../item-sliding/expandable/javascript.md     |  18 +
 static/usage/item-sliding/expandable/react.md |  26 +
 static/usage/item-sliding/expandable/vue.md   |  29 +
 static/usage/item-sliding/icons/angular.md    | 128 +++
 static/usage/item-sliding/icons/demo.html     | 156 ++++
 static/usage/item-sliding/icons/index.md      |   8 +
 static/usage/item-sliding/icons/javascript.md | 128 +++
 static/usage/item-sliding/icons/react.md      | 137 +++
 static/usage/item-sliding/icons/vue.md        | 143 +++
 19 files changed, 1110 insertions(+), 858 deletions(-)
 create mode 100644 static/usage/item-sliding/basic/angular.md
 create mode 100644 static/usage/item-sliding/basic/demo.html
 create mode 100644 static/usage/item-sliding/basic/index.md
 create mode 100644 static/usage/item-sliding/basic/javascript.md
 create mode 100644 static/usage/item-sliding/basic/react.md
 create mode 100644 static/usage/item-sliding/basic/vue.md
 create mode 100644 static/usage/item-sliding/expandable/angular.md
 create mode 100644 static/usage/item-sliding/expandable/demo.html
 create mode 100644 static/usage/item-sliding/expandable/index.md
 create mode 100644 static/usage/item-sliding/expandable/javascript.md
 create mode 100644 static/usage/item-sliding/expandable/react.md
 create mode 100644 static/usage/item-sliding/expandable/vue.md
 create mode 100644 static/usage/item-sliding/icons/angular.md
 create mode 100644 static/usage/item-sliding/icons/demo.html
 create mode 100644 static/usage/item-sliding/icons/index.md
 create mode 100644 static/usage/item-sliding/icons/javascript.md
 create mode 100644 static/usage/item-sliding/icons/react.md
 create mode 100644 static/usage/item-sliding/icons/vue.md

diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index badc345cf0e..185f99cc036 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-item-sliding"
-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/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';
@@ -20,41 +15,38 @@ import Slots from '@site/static/auto-generated/item-sliding/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+
+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
 
-A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.md) component as a child. All options to reveal should be placed in the [item options](item-options.md) element.
+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';
 
-## Swipe Direction
+<Basic />
 
-By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding 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 [`ion-item-options`](item-options.md) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
 
+## Icon Options
 
-## Options Layout
+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.
 
-By default if an icon is placed with text in the [item option](item-option.md), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.
+import Icons from '@site/static/usage/item-sliding/icons/index.md';
 
-| Slot        | Description                                                              |
-| ----------- | ------------------------------------------------------------------------ |
-| `start`     | In LTR, start is the left side of the button, and in RTL it is the right |
-| `top`       | The icon is above the text                                               |
-| `icon-only` | The icon is the only content of the button                               |
-| `bottom`    | The icon is below the text                                               |
-| `end`       | In LTR, end is the right side of the button, and in RTL it is the left   |
+<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 to call methods on the class.
+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';
+
+<Expandable />
+
 
 ## Interfaces
 
@@ -68,839 +60,6 @@ interface ItemSlidingCustomEvent extends CustomEvent {
 }
 ```
 
-
-
-
-## 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-list>
-  <!-- Sliding item with text options on both sides -->
-  <ion-item-sliding>
-    <ion-item-options side="start">
-      <ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
-      <ion-item-option color="danger" (click)="share(item)">Share</ion-item-option>
-    </ion-item-options>
-
-    <ion-item>
-      <ion-label>Item Options</ion-label>
-    </ion-item>
-
-    <ion-item-options side="end">
-      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with expandable options on both sides -->
-  <ion-item-sliding>
-    <ion-item-options side="start">
-      <ion-item-option color="danger" expandable>
-        Delete
-      </ion-item-option>
-    </ion-item-options>
-
-    <ion-item>
-      <ion-label>Expandable Options</ion-label>
-    </ion-item>
-
-    <ion-item-options side="end">
-      <ion-item-option color="tertiary" expandable>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Multi-line sliding item with icon options on both sides -->
-  <ion-item-sliding id="item100">
-    <ion-item href="#">
-      <ion-label>
-        <h2>HubStruck Notifications</h2>
-        <p>A new message in your network</p>
-        <p>Oceanic Next has joined your network</p>
-      </ion-label>
-      <ion-note slot="end">
-        10:45 AM
-      </ion-note>
-    </ion-item>
-
-    <ion-item-options side="start">
-      <ion-item-option>
-        <ion-icon slot="icon-only" name="heart"></ion-icon>
-      </ion-item-option>
-    </ion-item-options>
-
-    <ion-item-options side="end">
-      <ion-item-option color="danger">
-        <ion-icon slot="icon-only" name="trash"></ion-icon>
-      </ion-item-option>
-      <ion-item-option>
-        <ion-icon slot="icon-only" name="star"></ion-icon>
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon start options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons Start
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="start" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon end options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons End
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="end" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon top options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons Top
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="top" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon bottom options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons Bottom
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="bottom" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-list>
-  <!-- Sliding item with text options on both sides -->
-  <ion-item-sliding>
-    <ion-item-options side="start">
-      <ion-item-option onClick="favorite(item)">Favorite</ion-item-option>
-      <ion-item-option color="danger" onClick="share(item)">Share</ion-item-option>
-    </ion-item-options>
-
-    <ion-item>
-      <ion-label>Item Options</ion-label>
-    </ion-item>
-
-    <ion-item-options side="end">
-      <ion-item-option onClick="unread(item)">Unread</ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with expandable options on both sides -->
-  <ion-item-sliding>
-    <ion-item-options side="start">
-      <ion-item-option color="danger" expandable>
-        Delete
-      </ion-item-option>
-    </ion-item-options>
-
-    <ion-item>
-      <ion-label>Expandable Options</ion-label>
-    </ion-item>
-
-    <ion-item-options side="end">
-      <ion-item-option color="tertiary" expandable>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Multi-line sliding item with icon options on both sides -->
-  <ion-item-sliding id="item100">
-    <ion-item href="#">
-      <ion-label>
-        <h2>HubStruck Notifications</h2>
-        <p>A new message in your network</p>
-        <p>Oceanic Next has joined your network</p>
-      </ion-label>
-      <ion-note slot="end">
-        10:45 AM
-      </ion-note>
-    </ion-item>
-
-    <ion-item-options side="start">
-      <ion-item-option>
-        <ion-icon slot="icon-only" name="heart"></ion-icon>
-      </ion-item-option>
-    </ion-item-options>
-
-    <ion-item-options side="end">
-      <ion-item-option color="danger">
-        <ion-icon slot="icon-only" name="trash"></ion-icon>
-      </ion-item-option>
-      <ion-item-option>
-        <ion-icon slot="icon-only" name="star"></ion-icon>
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon start options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons Start
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="start" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon end options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons End
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="end" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon top options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons Top
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="top" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <!-- Sliding item with icon bottom options on end side -->
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        Sliding Item, Icons Bottom
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option color="primary">
-        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-        More
-      </ion-item-option>
-      <ion-item-option color="secondary">
-        <ion-icon slot="bottom" name="archive"></ion-icon>
-        Archive
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';
-
-import { heart, trash, star, archive, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
-
-export const ItemSlidingExample: React.FC = () => (
-<IonList>
-  {/* Sliding item with text options on both sides */}
-  <IonItemSliding>
-    <IonItemOptions side="start">
-      <IonItemOption onClick={() => console.log('favorite clicked')}>Favorite</IonItemOption>
-      <IonItemOption color="danger" onClick={() => console.log('share clicked')}>Share</IonItemOption>
-    </IonItemOptions>
-
-    <IonItem>
-      <IonLabel>Item Options</IonLabel>
-    </IonItem>
-
-    <IonItemOptions side="end">
-      <IonItemOption onClick={() => console.log('unread clicked')}>Unread</IonItemOption>
-    </IonItemOptions>
-  </IonItemSliding>
-
-  {/* Sliding item with expandable options on both sides */}
-  <IonItemSliding>
-    <IonItemOptions side="start">
-      <IonItemOption color="danger" expandable>
-        Delete
-      </IonItemOption>
-    </IonItemOptions>
-
-    <IonItem>
-      <IonLabel>Expandable Options</IonLabel>
-    </IonItem>
-
-    <IonItemOptions side="end">
-      <IonItemOption color="tertiary" expandable>
-        Archive
-      </IonItemOption>
-    </IonItemOptions>
-  </IonItemSliding>
-
-  {/* Multi-line sliding item with icon options on both sides */}
-  <IonItemSliding id="item100">
-    <IonItem href="#">
-      <IonLabel>
-        <h2>HubStruck Notifications</h2>
-        <p>A new message in your network</p>
-        <p>Oceanic Next has joined your network</p>
-      </IonLabel>
-      <IonNote slot="end">
-        10:45 AM
-      </IonNote>
-    </IonItem>
-
-    <IonItemOptions side="start">
-      <IonItemOption>
-        <IonIcon slot="icon-only" icon={heart} />
-      </IonItemOption>
-    </IonItemOptions>
-
-    <IonItemOptions side="end">
-      <IonItemOption color="danger">
-        <IonIcon slot="icon-only" icon={trash} />
-      </IonItemOption>
-      <IonItemOption>
-        <IonIcon slot="icon-only" icon={star} />
-      </IonItemOption>
-    </IonItemOptions>
-  </IonItemSliding>
-
-  {/* Sliding item with icon start options on end side */}
-  <IonItemSliding>
-    <IonItem>
-      <IonLabel>
-        Sliding Item, Icons Start
-      </IonLabel>
-    </IonItem>
-    <IonItemOptions>
-      <IonItemOption color="primary">
-        <IonIcon slot="start" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
-        More
-      </IonItemOption>
-      <IonItemOption color="secondary">
-        <IonIcon slot="start" icon={archive} />
-        Archive
-      </IonItemOption>
-    </IonItemOptions>
-  </IonItemSliding>
-
-  {/* Sliding item with icon end options on end side */}
-  <IonItemSliding>
-    <IonItem>
-      <IonLabel>
-        Sliding Item, Icons End
-      </IonLabel>
-    </IonItem>
-    <IonItemOptions>
-      <IonItemOption color="primary">
-        <IonIcon slot="end" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
-        More
-      </IonItemOption>
-      <IonItemOption color="secondary">
-        <IonIcon slot="end" icon={archive} />
-        Archive
-      </IonItemOption>
-    </IonItemOptions>
-  </IonItemSliding>
-
-  {/* Sliding item with icon top options on end side */}
-  <IonItemSliding>
-    <IonItem>
-      <IonLabel>
-        Sliding Item, Icons Top
-      </IonLabel>
-    </IonItem>
-    <IonItemOptions>
-      <IonItemOption color="primary">
-        <IonIcon slot="top" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
-        More
-      </IonItemOption>
-      <IonItemOption color="secondary">
-        <IonIcon slot="top" icon={archive} />
-        Archive
-      </IonItemOption>
-    </IonItemOptions>
-  </IonItemSliding>
-
-  {/* Sliding item with icon bottom options on end side */}
-  <IonItemSliding>
-    <IonItem>
-      <IonLabel>
-        Sliding Item, Icons Bottom
-      </IonLabel>
-    </IonItem>
-    <IonItemOptions>
-      <IonItemOption color="primary">
-        <IonIcon slot="bottom" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
-        More
-      </IonItemOption>
-      <IonItemOption color="secondary">
-        <IonIcon slot="bottom" icon={archive} />
-        Archive
-      </IonItemOption>
-    </IonItemOptions>
-  </IonItemSliding>
-</IonList>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-sliding-example',
-  styleUrl: 'item-sliding-example.css'
-})
-export class ItemSlidingExample {
-  favorite(ev: any) {
-    console.log('Favorite clicked', ev);
-  }
-
-  share(ev: any) {
-    console.log('Favorite clicked', ev);
-  }
-
-  unread(ev: any) {
-    console.log('Favorite clicked', ev);
-  }
-
-  render() {
-    return [
-      <ion-list>
-        {/* Sliding item with text options on both sides */}
-        <ion-item-sliding>
-          <ion-item-options side="start">
-            <ion-item-option onClick={(ev) => this.favorite(ev)}>Favorite</ion-item-option>
-            <ion-item-option color="danger" onClick={(ev) => this.share(ev)}>Share</ion-item-option>
-          </ion-item-options>
-
-          <ion-item>
-            <ion-label>Item Options</ion-label>
-          </ion-item>
-
-          <ion-item-options side="end">
-            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-
-        {/* Sliding item with expandable options on both sides */}
-        <ion-item-sliding>
-          <ion-item-options side="start">
-            <ion-item-option color="danger" expandable>
-              Delete
-            </ion-item-option>
-          </ion-item-options>
-
-          <ion-item>
-            <ion-label>Expandable Options</ion-label>
-          </ion-item>
-
-          <ion-item-options side="end">
-            <ion-item-option color="tertiary" expandable>
-              Archive
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-
-        {/* Multi-line sliding item with icon options on both sides */}
-        <ion-item-sliding id="item100">
-          <ion-item href="#">
-            <ion-label>
-              <h2>HubStruck Notifications</h2>
-              <p>A new message in your network</p>
-              <p>Oceanic Next has joined your network</p>
-            </ion-label>
-            <ion-note slot="end">
-              10:45 AM
-            </ion-note>
-          </ion-item>
-
-          <ion-item-options side="start">
-            <ion-item-option>
-              <ion-icon slot="icon-only" name="heart"></ion-icon>
-            </ion-item-option>
-          </ion-item-options>
-
-          <ion-item-options side="end">
-            <ion-item-option color="danger">
-              <ion-icon slot="icon-only" name="trash"></ion-icon>
-            </ion-item-option>
-            <ion-item-option>
-              <ion-icon slot="icon-only" name="star"></ion-icon>
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-
-        {/* Sliding item with icon start options on end side */}
-        <ion-item-sliding>
-          <ion-item>
-            <ion-label>
-              Sliding Item, Icons Start
-            </ion-label>
-          </ion-item>
-          <ion-item-options>
-            <ion-item-option color="primary">
-              <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              More
-            </ion-item-option>
-            <ion-item-option color="secondary">
-              <ion-icon slot="start" name="archive"></ion-icon>
-              Archive
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-
-        {/* Sliding item with icon end options on end side */}
-        <ion-item-sliding>
-          <ion-item>
-            <ion-label>
-              Sliding Item, Icons End
-            </ion-label>
-          </ion-item>
-          <ion-item-options>
-            <ion-item-option color="primary">
-              <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              More
-            </ion-item-option>
-            <ion-item-option color="secondary">
-              <ion-icon slot="end" name="archive"></ion-icon>
-              Archive
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-
-        {/* Sliding item with icon top options on end side */}
-        <ion-item-sliding>
-          <ion-item>
-            <ion-label>
-              Sliding Item, Icons Top
-            </ion-label>
-          </ion-item>
-          <ion-item-options>
-            <ion-item-option color="primary">
-              <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              More
-            </ion-item-option>
-            <ion-item-option color="secondary">
-              <ion-icon slot="top" name="archive"></ion-icon>
-              Archive
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-
-        {/* Sliding item with icon bottom options on end side */}
-        <ion-item-sliding>
-          <ion-item>
-            <ion-label>
-              Sliding Item, Icons Bottom
-            </ion-label>
-          </ion-item>
-          <ion-item-options>
-            <ion-item-option color="primary">
-              <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              More
-            </ion-item-option>
-            <ion-item-option color="secondary">
-              <ion-icon slot="bottom" name="archive"></ion-icon>
-              Archive
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-      </ion-list>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-list>
-    <!-- Sliding item with text options on both sides -->
-    <ion-item-sliding>
-      <ion-item-options side="start">
-        <ion-item-option @click="favorite(item)">Favorite</ion-item-option>
-        <ion-item-option color="danger" @click="share(item)">Share</ion-item-option>
-      </ion-item-options>
-
-      <ion-item>
-        <ion-label>Item Options</ion-label>
-      </ion-item>
-
-      <ion-item-options side="end">
-        <ion-item-option @click="unread(item)">Unread</ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with expandable options on both sides -->
-    <ion-item-sliding>
-      <ion-item-options side="start">
-        <ion-item-option color="danger" expandable>
-          Delete
-        </ion-item-option>
-      </ion-item-options>
-
-      <ion-item>
-        <ion-label>Expandable Options</ion-label>
-      </ion-item>
-
-      <ion-item-options side="end">
-        <ion-item-option color="tertiary" expandable>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Multi-line sliding item with icon options on both sides -->
-    <ion-item-sliding id="item100">
-      <ion-item href="#">
-        <ion-label>
-          <h2>HubStruck Notifications</h2>
-          <p>A new message in your network</p>
-          <p>Oceanic Next has joined your network</p>
-        </ion-label>
-        <ion-note slot="end">
-          10:45 AM
-        </ion-note>
-      </ion-item>
-
-      <ion-item-options side="start">
-        <ion-item-option>
-          <ion-icon slot="icon-only" :icon="heart"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-
-      <ion-item-options side="end">
-        <ion-item-option color="danger">
-          <ion-icon slot="icon-only" :icon="trash"></ion-icon>
-        </ion-item-option>
-        <ion-item-option>
-          <ion-icon slot="icon-only" :icon="star"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon start options on end side -->
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>
-          Sliding Item, Icons Start
-        </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="start" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="start" :icon="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon end options on end side -->
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>
-          Sliding Item, Icons End
-        </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="end" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="end" :icon="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon top options on end side -->
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>
-          Sliding Item, Icons Top
-        </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="top" :ios="ellipsis-horizontal" :md="ellipsis-vertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="top" :icon="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon bottom options on end side -->
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>
-          Sliding Item, Icons Bottom
-        </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="bottom" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="bottom" :icon="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
-</template>
-
-<script>
-import { 
-  IonIcon, 
-  IonItem, 
-  IonItemOption, 
-  IonItemOptions, 
-  IonItemSliding, 
-  IonLabel, 
-  IonList
-} from '@ionic/vue';
-import { 
-  archive, 
-  ellipsisHorizontal, 
-  ellipsisVertical,
-  heart, 
-  star, 
-  trash
-} from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { 
-    IonIcon, 
-    IonItem, 
-    IonItemOption, 
-    IonItemOptions, 
-    IonItemSliding, 
-    IonLabel, 
-    IonList
-  },
-  setup() {
-    return {
-      archive, 
-      ellipsisHorizontal, 
-      ellipsisVertical,
-      heart, 
-      star, 
-      trash
-    }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
@@ -917,4 +76,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/item-sliding/basic/angular.md b/static/usage/item-sliding/basic/angular.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/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/item-sliding/basic/demo.html b/static/usage/item-sliding/basic/demo.html
new file mode 100644
index 00000000000..ac328469939
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-sliding/basic/index.md b/static/usage/item-sliding/basic/index.md
new file mode 100644
index 00000000000..95b18974eb2
--- /dev/null
+++ b/static/usage/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/item-sliding/basic/demo.html" />
diff --git a/static/usage/item-sliding/basic/javascript.md b/static/usage/item-sliding/basic/javascript.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/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/item-sliding/basic/react.md b/static/usage/item-sliding/basic/react.md
new file mode 100644
index 00000000000..d9b45125574
--- /dev/null
+++ b/static/usage/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/item-sliding/basic/vue.md b/static/usage/item-sliding/basic/vue.md
new file mode 100644
index 00000000000..f6f8631a2bd
--- /dev/null
+++ b/static/usage/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/item-sliding/expandable/angular.md b/static/usage/item-sliding/expandable/angular.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/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/item-sliding/expandable/demo.html b/static/usage/item-sliding/expandable/demo.html
new file mode 100644
index 00000000000..5bff1d8c05f
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-sliding/expandable/index.md b/static/usage/item-sliding/expandable/index.md
new file mode 100644
index 00000000000..1c166a46289
--- /dev/null
+++ b/static/usage/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/item-sliding/expandable/demo.html" size="100px" />
diff --git a/static/usage/item-sliding/expandable/javascript.md b/static/usage/item-sliding/expandable/javascript.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/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/item-sliding/expandable/react.md b/static/usage/item-sliding/expandable/react.md
new file mode 100644
index 00000000000..3cb039d08ba
--- /dev/null
+++ b/static/usage/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/item-sliding/expandable/vue.md b/static/usage/item-sliding/expandable/vue.md
new file mode 100644
index 00000000000..fc9ee8c25ca
--- /dev/null
+++ b/static/usage/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/item-sliding/icons/angular.md b/static/usage/item-sliding/icons/angular.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/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/item-sliding/icons/demo.html b/static/usage/item-sliding/icons/demo.html
new file mode 100644
index 00000000000..93b53b18897
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-sliding/icons/index.md b/static/usage/item-sliding/icons/index.md
new file mode 100644
index 00000000000..4ed1beb0d41
--- /dev/null
+++ b/static/usage/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/item-sliding/icons/demo.html" size="300px" />
diff --git a/static/usage/item-sliding/icons/javascript.md b/static/usage/item-sliding/icons/javascript.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/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/item-sliding/icons/react.md b/static/usage/item-sliding/icons/react.md
new file mode 100644
index 00000000000..be291c017e4
--- /dev/null
+++ b/static/usage/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/item-sliding/icons/vue.md b/static/usage/item-sliding/icons/vue.md
new file mode 100644
index 00000000000..6b456c9882e
--- /dev/null
+++ b/static/usage/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>
+```

From a4ff9112a05941d2e5fc8c0de599a299db34534b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 16 Sep 2022 15:20:54 -0400
Subject: [PATCH 051/469] docs(item-group): add component playgrounds (#2549)

---
 docs/api/item-group.md                        | 622 +-----------------
 static/usage/item-group/basic/angular.md      |  33 +
 static/usage/item-group/basic/demo.html       |  60 ++
 static/usage/item-group/basic/index.md        |   8 +
 static/usage/item-group/basic/javascript.md   |  33 +
 static/usage/item-group/basic/react.md        |  43 ++
 static/usage/item-group/basic/vue.md          |  44 ++
 .../usage/item-group/sliding-items/angular.md |  95 +++
 .../usage/item-group/sliding-items/demo.html  | 122 ++++
 .../usage/item-group/sliding-items/index.md   |   8 +
 .../item-group/sliding-items/javascript.md    |  95 +++
 .../usage/item-group/sliding-items/react.md   | 105 +++
 static/usage/item-group/sliding-items/vue.md  | 106 +++
 13 files changed, 760 insertions(+), 614 deletions(-)
 create mode 100644 static/usage/item-group/basic/angular.md
 create mode 100644 static/usage/item-group/basic/demo.html
 create mode 100644 static/usage/item-group/basic/index.md
 create mode 100644 static/usage/item-group/basic/javascript.md
 create mode 100644 static/usage/item-group/basic/react.md
 create mode 100644 static/usage/item-group/basic/vue.md
 create mode 100644 static/usage/item-group/sliding-items/angular.md
 create mode 100644 static/usage/item-group/sliding-items/demo.html
 create mode 100644 static/usage/item-group/sliding-items/index.md
 create mode 100644 static/usage/item-group/sliding-items/javascript.md
 create mode 100644 static/usage/item-group/sliding-items/react.md
 create mode 100644 static/usage/item-group/sliding-items/vue.md

diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 9a110fa7ecf..afa67be4984 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-item-group"
-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/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';
@@ -22,621 +17,20 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items.
-
-
-
-
-
-
-## 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-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>
-    <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>
-    <ion-label>Belgium</ion-label>
-  </ion-item>
-</ion-item-group>
-
-
-<!-- They can also be used to group sliding items -->
-<ion-item-group>
-  <ion-item-divider>
-    <ion-label>
-      Fruits
-    </ion-label>
-  </ion-item-divider>
-
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        <h3>Grapes</h3>
-      </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>
-        <h3>Apples</h3>
-      </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>
-        <h3>Carrots</h3>
-      </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>
-        <h3>Celery</h3>
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-</ion-item-group>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```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>
-    <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>
-    <ion-label>Belgium</ion-label>
-  </ion-item>
-</ion-item-group>
-
-
-<!-- They can also be used to group sliding items -->
-<ion-item-group>
-  <ion-item-divider>
-    <ion-label>
-      Fruits
-    </ion-label>
-  </ion-item-divider>
-
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>
-        <h3>Grapes</h3>
-      </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>
-        <h3>Apples</h3>
-      </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>
-        <h3>Carrots</h3>
-      </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>
-        <h3>Celery</h3>
-      </ion-label>
-    </ion-item>
-    <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-</ion-item-group>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-
-import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
-
-const Example: React.FC<{}> = () => (
-  <>
-    <IonItemGroup>
-      <IonItemDivider>
-        <IonLabel>A</IonLabel>
-      </IonItemDivider>
-
-      <IonItem>
-        <IonLabel>Angola</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Argentina</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Armenia</IonLabel>
-      </IonItem>
-    </IonItemGroup>
-
-    <IonItemGroup>
-      <IonItemDivider>
-        <IonLabel>B</IonLabel>
-      </IonItemDivider>
-
-      <IonItem>
-        <IonLabel>Bangladesh</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Belarus</IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Belgium</IonLabel>
-      </IonItem>
-    </IonItemGroup>
-
-
-    {/*-- They can also be used to group sliding items --*/}
-    <IonItemGroup>
-      <IonItemDivider>
-        <IonLabel>
-          Fruits
-        </IonLabel>
-      </IonItemDivider>
-
-      <IonItemSliding>
-        <IonItem>
-          <IonLabel>
-            <h3>Grapes</h3>
-          </IonLabel>
-        </IonItem>
-        <IonItemOptions>
-          <IonItemOption>
-            Favorite
-          </IonItemOption>
-        </IonItemOptions>
-      </IonItemSliding>
-
-      <IonItemSliding>
-        <IonItem>
-          <IonLabel>
-            <h3>Apples</h3>
-          </IonLabel>
-        </IonItem>
-        <IonItemOptions>
-          <IonItemOption>
-            Favorite
-          </IonItemOption>
-        </IonItemOptions>
-      </IonItemSliding>
-    </IonItemGroup>
-
-    <IonItemGroup>
-      <IonItemDivider>
-        <IonLabel>
-          Vegetables
-        </IonLabel>
-      </IonItemDivider>
-
-      <IonItemSliding>
-        <IonItem>
-          <IonLabel>
-            <h3>Carrots</h3>
-          </IonLabel>
-        </IonItem>
-        <IonItemOptions>
-          <IonItemOption>
-            Favorite
-          </IonItemOption>
-        </IonItemOptions>
-      </IonItemSliding>
-
-      <IonItemSliding>
-        <IonItem>
-          <IonLabel>
-            <h3>Celery</h3>
-          </IonLabel>
-        </IonItem>
-        <IonItemOptions>
-          <IonItemOption>
-            Favorite
-          </IonItemOption>
-        </IonItemOptions>
-      </IonItemSliding>
-    </IonItemGroup>
-  </>
-);
-
-export default Example;
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-group-example',
-  styleUrl: 'item-group-example.css'
-})
-export class ItemGroupExample {
-  render() {
-    return [
-      <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>
-          <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>
-          <ion-label>Belgium</ion-label>
-        </ion-item>
-      </ion-item-group>
-
-
-      // They can also be used to group sliding items
-      <ion-item-group>
-        <ion-item-divider>
-          <ion-label>
-            Fruits
-          </ion-label>
-        </ion-item-divider>
-
-        <ion-item-sliding>
-          <ion-item>
-            <ion-label>
-              <h3>Grapes</h3>
-            </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>
-              <h3>Apples</h3>
-            </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>
-              <h3>Carrots</h3>
-            </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>
-              <h3>Celery</h3>
-            </ion-label>
-          </ion-item>
-          <ion-item-options>
-            <ion-item-option>
-              Favorite
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-      </ion-item-group>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```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>
-      <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>
-      <ion-label>Belgium</ion-label>
-    </ion-item>
-  </ion-item-group>
-
-
-  <!-- They can also be used to group sliding items -->
-  <ion-item-group>
-    <ion-item-divider>
-      <ion-label>
-        Fruits
-      </ion-label>
-    </ion-item-divider>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>
-          <h3>Grapes</h3>
-        </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>
-          <h3>Apples</h3>
-        </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-item-group>
+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).
 
-  <ion-item-group>
-    <ion-item-divider>
-      <ion-label>
-        Vegetables
-      </ion-label>
-    </ion-item-divider>
+## Basic Usage
 
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>
-          <h3>Carrots</h3>
-        </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
+import Basic from '@site/static/usage/item-group/basic/index.md';
 
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>
-          <h3>Celery</h3>
-        </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>
-import { 
-  IonItem, 
-  IonItemDivider,
-  IonItemGroup, 
-  IonItemOption, 
-  IonItemOptions, 
-  IonItemSliding, 
-  IonLabel
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
+<Basic />
 
-export default defineComponent({
-  components: { 
-    IonItem,
-    IonItemDivider, 
-    IonItemGroup, 
-    IonItemOption, 
-    IonItemOptions, 
-    IonItemSliding, 
-    IonLabel
-  }
-});
-</script>
-```
+## Sliding Items
 
+import SlidingItems from '@site/static/usage/item-group/sliding-items/index.md';
 
-</TabItem>
+<SlidingItems />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -654,4 +48,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/item-group/basic/angular.md b/static/usage/item-group/basic/angular.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/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/item-group/basic/demo.html b/static/usage/item-group/basic/demo.html
new file mode 100644
index 00000000000..4de760eaea0
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-group/basic/index.md b/static/usage/item-group/basic/index.md
new file mode 100644
index 00000000000..43379acfc26
--- /dev/null
+++ b/static/usage/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/item-group/basic/demo.html" size="medium" />
diff --git a/static/usage/item-group/basic/javascript.md b/static/usage/item-group/basic/javascript.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/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/item-group/basic/react.md b/static/usage/item-group/basic/react.md
new file mode 100644
index 00000000000..ddb3f381230
--- /dev/null
+++ b/static/usage/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/item-group/basic/vue.md b/static/usage/item-group/basic/vue.md
new file mode 100644
index 00000000000..edba72f0e69
--- /dev/null
+++ b/static/usage/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/item-group/sliding-items/angular.md b/static/usage/item-group/sliding-items/angular.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/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/item-group/sliding-items/demo.html b/static/usage/item-group/sliding-items/demo.html
new file mode 100644
index 00000000000..012b0003da9
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-group/sliding-items/index.md b/static/usage/item-group/sliding-items/index.md
new file mode 100644
index 00000000000..5c22dfd40fa
--- /dev/null
+++ b/static/usage/item-group/sliding-items/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/item-group/sliding-items/demo.html" size="medium" />
diff --git a/static/usage/item-group/sliding-items/javascript.md b/static/usage/item-group/sliding-items/javascript.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/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/item-group/sliding-items/react.md b/static/usage/item-group/sliding-items/react.md
new file mode 100644
index 00000000000..2ca4d7ca380
--- /dev/null
+++ b/static/usage/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/item-group/sliding-items/vue.md b/static/usage/item-group/sliding-items/vue.md
new file mode 100644
index 00000000000..5110ba1abed
--- /dev/null
+++ b/static/usage/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>
+```

From 5bf30bced774a1d84c7bffd2d9df5e485c3d818f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 16 Sep 2022 15:44:20 -0400
Subject: [PATCH 052/469] docs(item-divider): add component playgrounds (#2550)

---
 docs/api/item-divider.md                      | 281 +-----------------
 static/usage/item-divider/basic/angular.md    |  39 +++
 static/usage/item-divider/basic/demo.html     |  66 ++++
 static/usage/item-divider/basic/index.md      |   8 +
 static/usage/item-divider/basic/javascript.md |  39 +++
 static/usage/item-divider/basic/react.md      |  47 +++
 static/usage/item-divider/basic/vue.md        |  50 ++++
 .../item-divider/theming/colors/angular.md    |  32 ++
 .../item-divider/theming/colors/demo.html     |  59 ++++
 .../item-divider/theming/colors/index.md      |   8 +
 .../item-divider/theming/colors/javascript.md |  32 ++
 .../item-divider/theming/colors/react.md      |  42 +++
 .../usage/item-divider/theming/colors/vue.md  |  43 +++
 .../angular/example_component_css.md          |  11 +
 .../angular/example_component_html.md         |   7 +
 .../theming/css-properties/demo.html          |  40 +++
 .../theming/css-properties/index.md           |  32 ++
 .../theming/css-properties/javascript.md      |  19 ++
 .../theming/css-properties/react/main_css.md  |  11 +
 .../theming/css-properties/react/main_tsx.md  |  18 ++
 .../theming/css-properties/vue.md             |  30 ++
 21 files changed, 645 insertions(+), 269 deletions(-)
 create mode 100644 static/usage/item-divider/basic/angular.md
 create mode 100644 static/usage/item-divider/basic/demo.html
 create mode 100644 static/usage/item-divider/basic/index.md
 create mode 100644 static/usage/item-divider/basic/javascript.md
 create mode 100644 static/usage/item-divider/basic/react.md
 create mode 100644 static/usage/item-divider/basic/vue.md
 create mode 100644 static/usage/item-divider/theming/colors/angular.md
 create mode 100644 static/usage/item-divider/theming/colors/demo.html
 create mode 100644 static/usage/item-divider/theming/colors/index.md
 create mode 100644 static/usage/item-divider/theming/colors/javascript.md
 create mode 100644 static/usage/item-divider/theming/colors/react.md
 create mode 100644 static/usage/item-divider/theming/colors/vue.md
 create mode 100644 static/usage/item-divider/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/item-divider/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/item-divider/theming/css-properties/demo.html
 create mode 100644 static/usage/item-divider/theming/css-properties/index.md
 create mode 100644 static/usage/item-divider/theming/css-properties/javascript.md
 create mode 100644 static/usage/item-divider/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/item-divider/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/item-divider/theming/css-properties/vue.md

diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index dc63b122aa1..af77d95e424 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -1,10 +1,6 @@
 ---
 title: "ion-item-divider"
-hide_table_of_contents: true
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 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';
@@ -23,284 +19,31 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items.
-
-
-
-## 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-item-divider>
-  <ion-label>
-    Basic Item Divider
-  </ion-label>
-</ion-item-divider>
-
-<ion-item-divider color="secondary">
-  <ion-label>
-    Secondary Item Divider
-  </ion-label>
-</ion-item-divider>
-
-<!-- Item Dividers in a List -->
-<ion-list>
-  <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><ion-label>A3</ion-label></ion-item>
-  <ion-item><ion-label>A4</ion-label></ion-item>
-  <ion-item><ion-label>A5</ion-label></ion-item>
-
-  <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><ion-label>B3</ion-label></ion-item>
-  <ion-item><ion-label>B4</ion-label></ion-item>
-  <ion-item><ion-label>B5</ion-label></ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-item-divider>
-  <ion-label>
-    Basic Item Divider
-  </ion-label>
-</ion-item-divider>
-
-<ion-item-divider color="secondary">
-  <ion-label>
-    Secondary Item Divider
-  </ion-label>
-</ion-item-divider>
-
-<!-- Item Dividers in a List -->
-<ion-list>
-  <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><ion-label>A3</ion-label></ion-item>
-  <ion-item><ion-label>A4</ion-label></ion-item>
-  <ion-item><ion-label>A5</ion-label></ion-item>
-
-  <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><ion-label>B3</ion-label></ion-item>
-  <ion-item><ion-label>B4</ion-label></ion-item>
-  <ion-item><ion-label>B5</ion-label></ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';
-
-export const ItemDividerExample: React.FC = () => (
-  <IonContent>
-    <IonItemDivider>
-      <IonLabel>
-        Basic Item Divider
-      </IonLabel>
-    </IonItemDivider>
-
-    <IonItemDivider color="secondary">
-      <IonLabel>
-        Secondary Item Divider
-      </IonLabel>
-    </IonItemDivider>
-
-    {/*-- Item Dividers in a List --*/}
-    <IonList>
-      <IonItemDivider>
-        <IonLabel>
-          Section A
-        </IonLabel>
-      </IonItemDivider>
-
-      <IonItem><IonLabel>A1</IonLabel></IonItem>
-      <IonItem><IonLabel>A2</IonLabel></IonItem>
-      <IonItem><IonLabel>A3</IonLabel></IonItem>
-      <IonItem><IonLabel>A4</IonLabel></IonItem>
-      <IonItem><IonLabel>A5</IonLabel></IonItem>
-
-      <IonItemDivider>
-        <IonLabel>
-          Section B
-        </IonLabel>
-      </IonItemDivider>
-
-      <IonItem><IonLabel>B1</IonLabel></IonItem>
-      <IonItem><IonLabel>B2</IonLabel></IonItem>
-      <IonItem><IonLabel>B3</IonLabel></IonItem>
-      <IonItem><IonLabel>B4</IonLabel></IonItem>
-      <IonItem><IonLabel>B5</IonLabel></IonItem>
-    </IonList>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'item-divider-example',
-  styleUrl: 'item-divider-example.css'
-})
-export class ItemDividerExample {
-  render() {
-    return [
-      <ion-item-divider>
-        <ion-label>
-          Basic Item Divider
-        </ion-label>
-      </ion-item-divider>,
-
-      <ion-item-divider color="secondary">
-        <ion-label>
-          Secondary Item Divider
-        </ion-label>
-      </ion-item-divider>,
-
-      //  Item Dividers in a List
-      <ion-list>
-        <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><ion-label>A3</ion-label></ion-item>
-        <ion-item><ion-label>A4</ion-label></ion-item>
-        <ion-item><ion-label>A5</ion-label></ion-item>
-
-        <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><ion-label>B3</ion-label></ion-item>
-        <ion-item><ion-label>B4</ion-label></ion-item>
-        <ion-item><ion-label>B5</ion-label></ion-item>
-      </ion-list>
-    ];
-  }
-}
-```
+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.
 
-</TabItem>
 
+## Basic Usage
 
-<TabItem value="vue">
+import Basic from '@site/static/usage/item-divider/basic/index.md';
 
-```html
-<template>
-  <ion-item-divider>
-    <ion-label>
-      Basic Item Divider
-    </ion-label>
-  </ion-item-divider>
+<Basic />
 
-  <ion-item-divider color="secondary">
-    <ion-label>
-      Secondary Item Divider
-    </ion-label>
-  </ion-item-divider>
 
-  <!-- Item Dividers in a List -->
-  <ion-list>
-    <ion-item-divider>
-      <ion-label>
-        Section A
-      </ion-label>
-    </ion-item-divider>
+## Theming
 
-    <ion-item><ion-label>A1</ion-label></ion-item>
-    <ion-item><ion-label>A2</ion-label></ion-item>
-    <ion-item><ion-label>A3</ion-label></ion-item>
-    <ion-item><ion-label>A4</ion-label></ion-item>
-    <ion-item><ion-label>A5</ion-label></ion-item>
+### Colors
 
-    <ion-item-divider>
-      <ion-label>
-        Section B
-      </ion-label>
-    </ion-item-divider>
+import Colors from '@site/static/usage/item-divider/theming/colors/index.md';
 
-    <ion-item><ion-label>B1</ion-label></ion-item>
-    <ion-item><ion-label>B2</ion-label></ion-item>
-    <ion-item><ion-label>B3</ion-label></ion-item>
-    <ion-item><ion-label>B4</ion-label></ion-item>
-    <ion-item><ion-label>B5</ion-label></ion-item>
-  </ion-list>
-</template>
+<Colors />
 
-<script>
-import { IonItem, IonItemDivider, IonLabel } from '@ionic/vue';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  components: { IonItem, IonItemDivider, IonLabel }
-});
-</script>
-```
+### CSS Custom Properties
 
+import CSSProps from '@site/static/usage/item-divider/theming/css-properties/index.md';
 
-</TabItem>
+<CSSProps />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -318,4 +61,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/item-divider/basic/angular.md b/static/usage/item-divider/basic/angular.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/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/item-divider/basic/demo.html b/static/usage/item-divider/basic/demo.html
new file mode 100644
index 00000000000..4adb5477a42
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-divider/basic/index.md b/static/usage/item-divider/basic/index.md
new file mode 100644
index 00000000000..f1ab47945ef
--- /dev/null
+++ b/static/usage/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/item-divider/basic/demo.html" size="medium" />
diff --git a/static/usage/item-divider/basic/javascript.md b/static/usage/item-divider/basic/javascript.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/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/item-divider/basic/react.md b/static/usage/item-divider/basic/react.md
new file mode 100644
index 00000000000..289f1727c8d
--- /dev/null
+++ b/static/usage/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/item-divider/basic/vue.md b/static/usage/item-divider/basic/vue.md
new file mode 100644
index 00000000000..95f26ebc027
--- /dev/null
+++ b/static/usage/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/item-divider/theming/colors/angular.md b/static/usage/item-divider/theming/colors/angular.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/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/item-divider/theming/colors/demo.html b/static/usage/item-divider/theming/colors/demo.html
new file mode 100644
index 00000000000..0c421fae628
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-divider/theming/colors/index.md b/static/usage/item-divider/theming/colors/index.md
new file mode 100644
index 00000000000..ba859a248c2
--- /dev/null
+++ b/static/usage/item-divider/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/item-divider/theming/colors/demo.html" size="medium" />
diff --git a/static/usage/item-divider/theming/colors/javascript.md b/static/usage/item-divider/theming/colors/javascript.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/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/item-divider/theming/colors/react.md b/static/usage/item-divider/theming/colors/react.md
new file mode 100644
index 00000000000..7bf4cd2193f
--- /dev/null
+++ b/static/usage/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/item-divider/theming/colors/vue.md b/static/usage/item-divider/theming/colors/vue.md
new file mode 100644
index 00000000000..981f99a09da
--- /dev/null
+++ b/static/usage/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/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/item-divider/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/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/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/item-divider/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b3b1bb4da25
--- /dev/null
+++ b/static/usage/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/item-divider/theming/css-properties/demo.html b/static/usage/item-divider/theming/css-properties/demo.html
new file mode 100644
index 00000000000..8e0008af611
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/item-divider/theming/css-properties/index.md b/static/usage/item-divider/theming/css-properties/index.md
new file mode 100644
index 00000000000..88234976778
--- /dev/null
+++ b/static/usage/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 reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/item-divider/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/item-divider/theming/css-properties/javascript.md b/static/usage/item-divider/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6622b6d7e3f
--- /dev/null
+++ b/static/usage/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/item-divider/theming/css-properties/react/main_css.md b/static/usage/item-divider/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/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/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/item-divider/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6cd8d464d7e
--- /dev/null
+++ b/static/usage/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/item-divider/theming/css-properties/vue.md b/static/usage/item-divider/theming/css-properties/vue.md
new file mode 100644
index 00000000000..3589bcc7cd4
--- /dev/null
+++ b/static/usage/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>
+```

From 8eb868f2780fd15a7a75a1e4abb5fdbc3a96476a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 19 Sep 2022 09:28:17 -0500
Subject: [PATCH 053/469] docs(menu): add component playgrounds (#2558)

---
 docs/api/menu-toggle.md                       | 162 +-----
 docs/api/menu.md                              | 513 +-----------------
 static/usage/menu/basic/angular.md            |  23 +
 static/usage/menu/basic/demo.html             |  37 ++
 static/usage/menu/basic/index.md              |  17 +
 static/usage/menu/basic/javascript.md         |  23 +
 static/usage/menu/basic/react.md              |  41 ++
 static/usage/menu/basic/vue.md                |  52 ++
 .../theming/angular/example_component_css.md  |  11 +
 .../theming/angular/example_component_html.md |  25 +
 static/usage/menu/theming/demo.html           |  48 ++
 static/usage/menu/theming/index.md            |  32 ++
 static/usage/menu/theming/javascript.md       |  37 ++
 static/usage/menu/theming/react/main_css.md   |  11 +
 static/usage/menu/theming/react/main_tsx.md   |  44 ++
 static/usage/menu/theming/vue.md              |  64 +++
 static/usage/menu/toggle/angular.md           |  26 +
 static/usage/menu/toggle/demo.html            |  40 ++
 static/usage/menu/toggle/index.md             |  17 +
 static/usage/menu/toggle/javascript.md        |  26 +
 static/usage/menu/toggle/react.md             |  44 ++
 static/usage/menu/toggle/vue.md               |  55 ++
 .../type/angular/example_component_html.md    |  48 ++
 .../menu/type/angular/example_component_ts.md |  11 +
 static/usage/menu/type/demo.html              |  71 +++
 static/usage/menu/type/index.md               |  24 +
 static/usage/menu/type/javascript.md          |  57 ++
 static/usage/menu/type/react.md               |  78 +++
 static/usage/menu/type/vue.md                 |  90 +++
 29 files changed, 1079 insertions(+), 648 deletions(-)
 create mode 100644 static/usage/menu/basic/angular.md
 create mode 100644 static/usage/menu/basic/demo.html
 create mode 100644 static/usage/menu/basic/index.md
 create mode 100644 static/usage/menu/basic/javascript.md
 create mode 100644 static/usage/menu/basic/react.md
 create mode 100644 static/usage/menu/basic/vue.md
 create mode 100644 static/usage/menu/theming/angular/example_component_css.md
 create mode 100644 static/usage/menu/theming/angular/example_component_html.md
 create mode 100644 static/usage/menu/theming/demo.html
 create mode 100644 static/usage/menu/theming/index.md
 create mode 100644 static/usage/menu/theming/javascript.md
 create mode 100644 static/usage/menu/theming/react/main_css.md
 create mode 100644 static/usage/menu/theming/react/main_tsx.md
 create mode 100644 static/usage/menu/theming/vue.md
 create mode 100644 static/usage/menu/toggle/angular.md
 create mode 100644 static/usage/menu/toggle/demo.html
 create mode 100644 static/usage/menu/toggle/index.md
 create mode 100644 static/usage/menu/toggle/javascript.md
 create mode 100644 static/usage/menu/toggle/react.md
 create mode 100644 static/usage/menu/toggle/vue.md
 create mode 100644 static/usage/menu/type/angular/example_component_html.md
 create mode 100644 static/usage/menu/type/angular/example_component_ts.md
 create mode 100644 static/usage/menu/type/demo.html
 create mode 100644 static/usage/menu/type/index.md
 create mode 100644 static/usage/menu/type/javascript.md
 create mode 100644 static/usage/menu/type/react.md
 create mode 100644 static/usage/menu/type/vue.md

diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index c68df94d1ca..9144429dc8b 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -37,167 +37,7 @@ By default, it's only visible when the selected menu is active. A menu is active
 
 In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` property can be set to `false`.
 
-
-
-## Usage
-
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
-
-<TabItem value="angular">
-
-```html
-<ion-app>
-  <ion-menu side="start" menuId="first" contentId="main">
-    <ion-header>
-      <ion-toolbar color="secondary">
-        <ion-title>Example Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-  <div class="ion-page" id="main">
-    <ion-content class="ion-padding">
-      <ion-menu-toggle>
-        <ion-button>Toggle Menu</ion-button>
-      </ion-menu-toggle>
-    </ion-content>
-  </div>
-</ion-app>
-```
-
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-app>
-  <ion-menu side="start" menu-id="first" content-id="main">
-    <ion-header>
-      <ion-toolbar color="secondary">
-        <ion-title>Example Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-  <div class="ion-page" id="main">
-    <ion-content class="ion-padding">
-      <ion-menu-toggle>
-        <ion-button>Toggle Menu</ion-button>
-      </ion-menu-toggle>
-    </ion-content>
-  </div>
-</ion-app>
-```
-
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton, IonPage } from '@ionic/react';
-
-export const MenuExample: React.FC = () => (
-  <>
-    <IonMenu side="start" menuId="first" contentId="main">
-      <IonHeader>
-        <IonToolbar color="primary">
-          <IonTitle>Example Menu</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItem>Menu Item</IonItem>
-        </IonList>
-      </IonContent>
-    </IonMenu>
-    <IonPage id="main">
-      <IonContent>
-        <IonMenuToggle>
-          <IonButton>Toggle Menu</IonButton>
-        </IonMenuToggle>
-      </IonContent>
-    </IonPage>
-  </>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-menu side="start" menu-id="first" content-id="main">
-    <ion-header>
-      <ion-toolbar color="primary">
-        <ion-title>Example Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-
-  <div class="ion-page" id="main">
-    <ion-content>
-      <ion-menu-toggle>
-        <ion-button>Toggle Menu</ion-button>
-      </ion-menu-toggle>
-    </ion-content>
-  </div>
-</template>
-
-<script>
-import { 
-  IonContent, 
-  IonHeader, 
-  IonItem, 
-  IonList, 
-  IonMenu, 
-  IonMenuToggle,
-  IonButton,
-  IonTitle, 
-  IonToolbar
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonContent, 
-    IonHeader, 
-    IonItem, 
-    IonList, 
-    IonMenu, 
-    IonMenuToggle,
-    IonButton,
-    IonTitle, 
-    IonToolbar
-  }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
+See the [Menu documentation](./menu#menu-toggle) for an example.
 
 ## Properties
 <Props />
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 81f3b26337d..e24612796f9 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-menu"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/menu/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/menu/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,14 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
 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.
@@ -40,497 +25,51 @@ 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.
 
-## Interfaces
+## Basic Usage
 
-### MenuCustomEvent
+import BasicUsage from '@site/static/usage/menu/basic/index.md';
 
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+<BasicUsage />
 
-```typescript
-interface MenuCustomEvent<T = any> extends CustomEvent {
-  detail: T;
-  target: HTMLIonMenuElement;
-}
-```
+## 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/menu/toggle/index.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-menu side="start" menuId="first" contentId="main">
-  <ion-header>
-    <ion-toolbar color="primary">
-      <ion-title>Start Menu</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content>
-    <ion-list>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-    </ion-list>
-  </ion-content>
-</ion-menu>
-
-<ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
-  <ion-header>
-    <ion-toolbar color="tertiary">
-      <ion-title>Custom Menu</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content>
-    <ion-list>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-    </ion-list>
-  </ion-content>
-</ion-menu>
-
-<ion-menu side="end" type="push" contentId="main">
-  <ion-header>
-    <ion-toolbar color="danger">
-      <ion-title>End Menu</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content>
-    <ion-list>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-      <ion-item>Menu Item</ion-item>
-    </ion-list>
-  </ion-content>
-</ion-menu>
-
-<ion-router-outlet id="main"></ion-router-outlet>
-```
+<MenuToggle />
 
-```typescript
-import { Component } from '@angular/core';
-import { MenuController } from '@ionic/angular';
-
-@Component({
-  selector: 'menu-example',
-  templateUrl: 'menu-example.html',
-  styleUrls: ['./menu-example.css'],
-})
-export class MenuExample {
-
-constructor(private menu: MenuController) { }
-
-  openFirst() {
-    this.menu.enable(true, 'first');
-    this.menu.open('first');
-  }
-
-  openEnd() {
-    this.menu.open('end');
-  }
-
-  openCustom() {
-    this.menu.enable(true, 'custom');
-    this.menu.open('custom');
-  }
-}
-```
+## Menu Types
 
-```css
-.my-custom-menu {
-  --width: 500px;
-}
-```
+The `type` property can be used to customize how menus display in your application.
 
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-app>
-  <ion-menu side="start" menu-id="first" content-id="main">
-    <ion-header>
-      <ion-toolbar color="primary">
-        <ion-title>Start Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-
-  <ion-menu side="start" menu-id="custom" class="my-custom-menu" content-id="main">
-    <ion-header>
-      <ion-toolbar color="tertiary">
-        <ion-title>Custom Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-
-  <ion-menu side="end" type="push" content-id="main">
-    <ion-header>
-      <ion-toolbar color="danger">
-        <ion-title>End Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-
-  <div class="ion-page" id="main">
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Menu - Basic</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
-      <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
-      <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
-    </ion-content>
-  </div>
-
-</ion-app>
-```
+import MenuType from '@site/static/usage/menu/type/index.md';
 
-```javascript
-<script type="module">
-    import { menuController } from '@ionic/core';
-    window.menuController = menuController;
-</script>
-  
-<script>
-  function openFirst() {
-    menuController.enable(true, 'first');
-    menuController.open('first');
-  }
-  
-  function openEnd() {
-    menuController.open('end');
-  }
-  
-  function openCustom() {
-    menuController.enable(true, 'custom');
-    menuController.open('custom');
-  }
-</script>
-```
+<MenuType />
 
-```css
-.my-custom-menu {
-  --width: 500px;
-}
-```
+## Theming
 
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
-
-export const MenuExample: React.FC = () => (
-  <>
-    <IonMenu side="start" menuId="first">
-      <IonHeader>
-        <IonToolbar color="primary">
-          <IonTitle>Start Menu</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-        </IonList>
-      </IonContent>
-    </IonMenu>
-
-    <IonMenu side="start" menuId="custom" className="my-custom-menu">
-      <IonHeader>
-        <IonToolbar color="tertiary">
-          <IonTitle>Custom Menu</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-        </IonList>
-      </IonContent>
-    </IonMenu>
-
-    <IonMenu side="end" type="push">
-      <IonHeader>
-        <IonToolbar color="danger">
-          <IonTitle>End Menu</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-          <IonItem>Menu Item</IonItem>
-        </IonList>
-      </IonContent>
-    </IonMenu>
-    <IonRouterOutlet></IonRouterOutlet>
-  </>
-);
-```
+### CSS Shadow Parts
 
+import Theming from '@site/static/usage/menu/theming/index.md';
 
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-import { menuController } from '@ionic/core';
-
-@Component({
-  tag: 'menu-example',
-  styleUrl: 'menu-example.css'
-})
-export class MenuExample {
-  openFirst() {
-    menuController.enable(true, 'first');
-    menuController.open('first');
-  }
-
-  openEnd() {
-    menuController.open('end');
-  }
-
-  openCustom() {
-    menuController.enable(true, 'custom');
-    menuController.open('custom');
-  }
-
-  render() {
-    return [
-      <ion-menu side="start" menuId="first" contentId="main">
-        <ion-header>
-          <ion-toolbar color="primary">
-            <ion-title>Start Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-list>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-          </ion-list>
-        </ion-content>
-      </ion-menu>,
-
-      <ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
-        <ion-header>
-          <ion-toolbar color="tertiary">
-            <ion-title>Custom Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-list>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-          </ion-list>
-        </ion-content>
-      </ion-menu>,
-
-      <ion-menu side="end" type="push" contentId="main">
-        <ion-header>
-          <ion-toolbar color="danger">
-            <ion-title>End Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-list>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-            <ion-item>Menu Item</ion-item>
-          </ion-list>
-        </ion-content>
-      </ion-menu>,
-
-      // A router outlet can be placed here instead
-      <ion-content id="main">
-        <ion-button expand="block" onClick={() => this.openFirst()}>Open Start Menu</ion-button>
-        <ion-button expand="block" onClick={() => this.openEnd()}>Open End Menu</ion-button>
-        <ion-button expand="block" onClick={() => this.openCustom()}>Open Custom Menu</ion-button>
-      </ion-content>
-    ];
-  }
-}
-```
+<Theming />
 
-```css
-.my-custom-menu {
-  --width: 500px;
-}
-```
+## Interfaces
 
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-menu side="start" menu-id="first" content-id="main">
-    <ion-header>
-      <ion-toolbar color="primary">
-        <ion-title>Start Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-
-  <ion-menu side="start" menu-id="custom" class="my-custom-menu" content-id="main">
-    <ion-header>
-      <ion-toolbar color="tertiary">
-        <ion-title>Custom Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-
-  <ion-menu side="end" type="push" content-id="main">
-    <ion-header>
-      <ion-toolbar color="danger">
-        <ion-title>End Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-        <ion-item>Menu Item</ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
-
-  <ion-router-outlet id="main"></ion-router-outlet>
-</template>
-<style>
-.my-custom-menu {
-  --width: 500px;
+### 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;
 }
-</style>
-
-<script>
-import { 
-  IonContent, 
-  IonHeader, 
-  IonItem, 
-  IonList, 
-  IonMenu, 
-  IonRouterOutlet,
-  IonTitle, 
-  IonToolbar,
-  menuController
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonContent, 
-    IonHeader, 
-    IonItem, 
-    IonList, 
-    IonMenu, 
-    IonRouterOutlet,
-    IonTitle, 
-    IonToolbar
-  },
-  methods: {
-    openFirst() {
-      menuController.enable(true, 'first');
-      menuController.open('first');
-    },
-    openEnd() {
-      menuController.open('end');
-    },
-    openCustom() {
-      menuController.enable(true, 'custom');
-      menuController.open('custom');
-    }
-  }
-});
-</script>
 ```
 
-</TabItem>
 
-</Tabs>
+
 
 ## Properties
 <Props />
@@ -548,4 +87,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/menu/basic/angular.md b/static/usage/menu/basic/angular.md
new file mode 100644
index 00000000000..c169f35f1f4
--- /dev/null
+++ b/static/usage/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/menu/basic/demo.html b/static/usage/menu/basic/demo.html
new file mode 100644
index 00000000000..4591a7e06ce
--- /dev/null
+++ b/static/usage/menu/basic/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>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
new file mode 100644
index 00000000000..a70d583135c
--- /dev/null
+++ b/static/usage/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/menu/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/basic/javascript.md b/static/usage/menu/basic/javascript.md
new file mode 100644
index 00000000000..570c03c9512
--- /dev/null
+++ b/static/usage/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/menu/basic/react.md b/static/usage/menu/basic/react.md
new file mode 100644
index 00000000000..71abc258aef
--- /dev/null
+++ b/static/usage/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/menu/basic/vue.md b/static/usage/menu/basic/vue.md
new file mode 100644
index 00000000000..d6e3d73d648
--- /dev/null
+++ b/static/usage/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/menu/theming/angular/example_component_css.md b/static/usage/menu/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/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/menu/theming/angular/example_component_html.md b/static/usage/menu/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..f630cf4c378
--- /dev/null
+++ b/static/usage/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/menu/theming/demo.html b/static/usage/menu/theming/demo.html
new file mode 100644
index 00000000000..a453b20883f
--- /dev/null
+++ b/static/usage/menu/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>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
new file mode 100644
index 00000000000..e0b9ca5cf18
--- /dev/null
+++ b/static/usage/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/menu/theming/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/theming/javascript.md b/static/usage/menu/theming/javascript.md
new file mode 100644
index 00000000000..a147ef68090
--- /dev/null
+++ b/static/usage/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/menu/theming/react/main_css.md b/static/usage/menu/theming/react/main_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/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/menu/theming/react/main_tsx.md b/static/usage/menu/theming/react/main_tsx.md
new file mode 100644
index 00000000000..c935fefb33f
--- /dev/null
+++ b/static/usage/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/menu/theming/vue.md b/static/usage/menu/theming/vue.md
new file mode 100644
index 00000000000..b9d02e48b1f
--- /dev/null
+++ b/static/usage/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/menu/toggle/angular.md b/static/usage/menu/toggle/angular.md
new file mode 100644
index 00000000000..d2ecafc7904
--- /dev/null
+++ b/static/usage/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/menu/toggle/demo.html b/static/usage/menu/toggle/demo.html
new file mode 100644
index 00000000000..6b78fd9440b
--- /dev/null
+++ b/static/usage/menu/toggle/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 - 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
new file mode 100644
index 00000000000..4d568cfe440
--- /dev/null
+++ b/static/usage/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/menu/toggle/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/toggle/javascript.md b/static/usage/menu/toggle/javascript.md
new file mode 100644
index 00000000000..660e0b4d1b6
--- /dev/null
+++ b/static/usage/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/menu/toggle/react.md b/static/usage/menu/toggle/react.md
new file mode 100644
index 00000000000..a940b83e4af
--- /dev/null
+++ b/static/usage/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/menu/toggle/vue.md b/static/usage/menu/toggle/vue.md
new file mode 100644
index 00000000000..2cc4807109e
--- /dev/null
+++ b/static/usage/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/menu/type/angular/example_component_html.md b/static/usage/menu/type/angular/example_component_html.md
new file mode 100644
index 00000000000..7154c645660
--- /dev/null
+++ b/static/usage/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/menu/type/angular/example_component_ts.md b/static/usage/menu/type/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f03ec13b76
--- /dev/null
+++ b/static/usage/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/menu/type/demo.html b/static/usage/menu/type/demo.html
new file mode 100644
index 00000000000..c5d3950ccb3
--- /dev/null
+++ b/static/usage/menu/type/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>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
new file mode 100644
index 00000000000..34e8d416611
--- /dev/null
+++ b/static/usage/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/menu/type/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/menu/type/javascript.md b/static/usage/menu/type/javascript.md
new file mode 100644
index 00000000000..24dc49cf906
--- /dev/null
+++ b/static/usage/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/menu/type/react.md b/static/usage/menu/type/react.md
new file mode 100644
index 00000000000..806e67e21a2
--- /dev/null
+++ b/static/usage/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/menu/type/vue.md b/static/usage/menu/type/vue.md
new file mode 100644
index 00000000000..2abcb137577
--- /dev/null
+++ b/static/usage/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>
+```

From 663fffd3777bb1a16ef3f3245c4f96ab863239fa Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 15:35:15 -0400
Subject: [PATCH 054/469] docs(progress-bar): add component playgrounds (#2556)

---
 docs/api/progress-bar.md                      | 173 +++---------------
 .../buffer/angular/example_component_html.md  |   3 +
 .../buffer/angular/example_component_ts.md    |  29 +++
 static/usage/progress-bar/buffer/demo.html    |  47 +++++
 static/usage/progress-bar/buffer/index.md     |  24 +++
 .../usage/progress-bar/buffer/javascript.md   |  25 +++
 static/usage/progress-bar/buffer/react.md     |  30 +++
 static/usage/progress-bar/buffer/vue.md       |  38 ++++
 .../angular/example_component_html.md         |   3 +
 .../angular/example_component_ts.md           |  26 +++
 .../usage/progress-bar/determinate/demo.html  |  42 +++++
 .../usage/progress-bar/determinate/index.md   |  24 +++
 .../progress-bar/determinate/javascript.md    |  20 ++
 .../usage/progress-bar/determinate/react.md   |  27 +++
 static/usage/progress-bar/determinate/vue.md  |  34 ++++
 .../progress-bar/indeterminate/angular.md     |   3 +
 .../progress-bar/indeterminate/demo.html      |  25 +++
 .../usage/progress-bar/indeterminate/index.md |   8 +
 .../progress-bar/indeterminate/javascript.md  |   3 +
 .../usage/progress-bar/indeterminate/react.md |  11 ++
 .../usage/progress-bar/indeterminate/vue.md   |  14 ++
 .../progress-bar/theming/colors/angular.md    |  11 ++
 .../progress-bar/theming/colors/demo.html     |  39 ++++
 .../progress-bar/theming/colors/index.md      |   8 +
 .../progress-bar/theming/colors/javascript.md |  11 ++
 .../progress-bar/theming/colors/react.md      |  21 +++
 .../usage/progress-bar/theming/colors/vue.md  |  22 +++
 .../angular/example_component_css.md          |   6 +
 .../angular/example_component_html.md         |   4 +
 .../theming/css-properties/demo.html          |  37 ++++
 .../theming/css-properties/index.md           |  31 ++++
 .../theming/css-properties/javascript.md      |  11 ++
 .../theming/css-properties/react/main_css.md  |   6 +
 .../theming/css-properties/react/main_tsx.md  |  17 ++
 .../theming/css-properties/vue.md             |  22 +++
 .../angular/example_component_css.md          |  13 ++
 .../angular/example_component_html.md         |   4 +
 .../theming/css-shadow-parts/demo.html        |  44 +++++
 .../theming/css-shadow-parts/index.md         |  31 ++++
 .../theming/css-shadow-parts/javascript.md    |  18 ++
 .../css-shadow-parts/react/main_css.md        |  13 ++
 .../css-shadow-parts/react/main_tsx.md        |  17 ++
 .../theming/css-shadow-parts/vue.md           |  29 +++
 43 files changed, 873 insertions(+), 151 deletions(-)
 create mode 100644 static/usage/progress-bar/buffer/angular/example_component_html.md
 create mode 100644 static/usage/progress-bar/buffer/angular/example_component_ts.md
 create mode 100644 static/usage/progress-bar/buffer/demo.html
 create mode 100644 static/usage/progress-bar/buffer/index.md
 create mode 100644 static/usage/progress-bar/buffer/javascript.md
 create mode 100644 static/usage/progress-bar/buffer/react.md
 create mode 100644 static/usage/progress-bar/buffer/vue.md
 create mode 100644 static/usage/progress-bar/determinate/angular/example_component_html.md
 create mode 100644 static/usage/progress-bar/determinate/angular/example_component_ts.md
 create mode 100644 static/usage/progress-bar/determinate/demo.html
 create mode 100644 static/usage/progress-bar/determinate/index.md
 create mode 100644 static/usage/progress-bar/determinate/javascript.md
 create mode 100644 static/usage/progress-bar/determinate/react.md
 create mode 100644 static/usage/progress-bar/determinate/vue.md
 create mode 100644 static/usage/progress-bar/indeterminate/angular.md
 create mode 100644 static/usage/progress-bar/indeterminate/demo.html
 create mode 100644 static/usage/progress-bar/indeterminate/index.md
 create mode 100644 static/usage/progress-bar/indeterminate/javascript.md
 create mode 100644 static/usage/progress-bar/indeterminate/react.md
 create mode 100644 static/usage/progress-bar/indeterminate/vue.md
 create mode 100644 static/usage/progress-bar/theming/colors/angular.md
 create mode 100644 static/usage/progress-bar/theming/colors/demo.html
 create mode 100644 static/usage/progress-bar/theming/colors/index.md
 create mode 100644 static/usage/progress-bar/theming/colors/javascript.md
 create mode 100644 static/usage/progress-bar/theming/colors/react.md
 create mode 100644 static/usage/progress-bar/theming/colors/vue.md
 create mode 100644 static/usage/progress-bar/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/progress-bar/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/progress-bar/theming/css-properties/demo.html
 create mode 100644 static/usage/progress-bar/theming/css-properties/index.md
 create mode 100644 static/usage/progress-bar/theming/css-properties/javascript.md
 create mode 100644 static/usage/progress-bar/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/progress-bar/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/progress-bar/theming/css-properties/vue.md
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/progress-bar/theming/css-shadow-parts/vue.md

diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 474e390ebf1..195ed1d294c 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-progress-bar"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/progress-bar/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/progress-bar/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -26,178 +19,56 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 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`.
 
-## Progress Type
-
-### Determinate
+## 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.
 
-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.
-
-### 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.
-
-
-
-## 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 Progressbar -->
-<ion-progress-bar></ion-progress-bar>
-
-<!-- Default Progressbar with 50 percent -->
-<ion-progress-bar value="0.5"></ion-progress-bar>
-
-<!-- Colorize Progressbar -->
-<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
-<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
-
-<!-- Other types -->
-<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
-<ion-progress-bar type="indeterminate"></ion-progress-bar>
-<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
-```
+import Determinate from '@site/static/usage/progress-bar/determinate/index.md';
 
+<Determinate />
 
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Progressbar -->
-<ion-progress-bar></ion-progress-bar>
-
-<!-- Default Progressbar with 50 percent -->
-<ion-progress-bar value="0.5"></ion-progress-bar>
-
-<!-- Colorize Progressbar -->
-<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
-<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
-
-<!-- Other types -->
-<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
-<ion-progress-bar type="indeterminate"></ion-progress-bar>
-<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonProgressBar, IonContent } from '@ionic/react';
-
-export const ProgressbarExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default Progressbar --*/}
-    <IonProgressBar></IonProgressBar><br />
-
-    {/*-- Default Progressbar with 50 percent --*/}
-    <IonProgressBar value={0.5}></IonProgressBar><br />
-
-    {/*-- Colorize Progressbar --*/}
-    <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
-    <IonProgressBar color="secondary" value={0.5}></IonProgressBar><br />
-
-    {/*-- Other types --*/}
-    <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
-    <IonProgressBar type="indeterminate"></IonProgressBar><br />
-    <IonProgressBar type="indeterminate" reversed={true}></IonProgressBar><br />
-  </IonContent>
-);
-```
+### 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.
 
-</TabItem>
+import Buffer from '@site/static/usage/progress-bar/buffer/index.md';
 
+<Buffer />
 
-<TabItem value="stencil">
 
-```tsx
-import { Component, h } from '@stencil/core';
+## Indeterminate
 
-@Component({
-  tag: 'progress-bar-example',
-  styleUrl: 'progress-bar-example.css'
-})
-export class ProgressBarExample {
-  render() {
-    return [
-      // Default Progressbar
-      <ion-progress-bar></ion-progress-bar>,
+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.
 
-      // Default Progressbar with 50 percent
-      <ion-progress-bar value={0.5}></ion-progress-bar>,
+import Indeterminate from '@site/static/usage/progress-bar/indeterminate/index.md';
 
-      // Colorize Progressbar
-      <ion-progress-bar color="primary" value={0.5}></ion-progress-bar>,
-      <ion-progress-bar color="secondary" value={0.5}></ion-progress-bar>,
+<Indeterminate />
 
-      // Other types
-      <ion-progress-bar value={0.25} buffer={0.5}></ion-progress-bar>,
-      <ion-progress-bar type="indeterminate"></ion-progress-bar>,
-      <ion-progress-bar type="indeterminate" reversed={true}></ion-progress-bar>
-    ];
-  }
-}
-```
 
+## Theming
 
-</TabItem>
+### Colors
 
+import Colors from '@site/static/usage/progress-bar/theming/colors/index.md';
 
-<TabItem value="vue">
+<Colors />
 
-```html
-<template>
-  <!-- Default Progressbar -->
-  <ion-progress-bar></ion-progress-bar>
 
-  <!-- Default Progressbar with 50 percent -->
-  <ion-progress-bar value="0.5"></ion-progress-bar>
+### CSS Custom Properties
 
-  <!-- Colorize Progressbar -->
-  <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
-  <ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
+import CSSProps from '@site/static/usage/progress-bar/theming/css-properties/index.md';
 
-  <!-- Other types -->
-  <ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
-  <ion-progress-bar type="indeterminate"></ion-progress-bar>
-  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
-</template>
+<CSSProps />
 
-<script>
-import { IonProgressBar } from '@ionic/vue';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  components: { IonProgressBar }
-});
-</script>
-```
+### CSS Shadow Parts
 
+import CSSParts from '@site/static/usage/progress-bar/theming/css-shadow-parts/index.md';
 
-</TabItem>
+<CSSParts />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -215,4 +86,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/progress-bar/buffer/angular/example_component_html.md b/static/usage/progress-bar/buffer/angular/example_component_html.md
new file mode 100644
index 00000000000..55dfda33a34
--- /dev/null
+++ b/static/usage/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/progress-bar/buffer/angular/example_component_ts.md b/static/usage/progress-bar/buffer/angular/example_component_ts.md
new file mode 100644
index 00000000000..56e3d3a3b09
--- /dev/null
+++ b/static/usage/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/progress-bar/buffer/demo.html b/static/usage/progress-bar/buffer/demo.html
new file mode 100644
index 00000000000..d078747a91a
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/progress-bar/buffer/index.md b/static/usage/progress-bar/buffer/index.md
new file mode 100644
index 00000000000..778db60a25f
--- /dev/null
+++ b/static/usage/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/progress-bar/buffer/demo.html"
+/>
diff --git a/static/usage/progress-bar/buffer/javascript.md b/static/usage/progress-bar/buffer/javascript.md
new file mode 100644
index 00000000000..0938fb5fca1
--- /dev/null
+++ b/static/usage/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/progress-bar/buffer/react.md b/static/usage/progress-bar/buffer/react.md
new file mode 100644
index 00000000000..1fa8208ac3a
--- /dev/null
+++ b/static/usage/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/progress-bar/buffer/vue.md b/static/usage/progress-bar/buffer/vue.md
new file mode 100644
index 00000000000..3edc59bdf6f
--- /dev/null
+++ b/static/usage/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/progress-bar/determinate/angular/example_component_html.md b/static/usage/progress-bar/determinate/angular/example_component_html.md
new file mode 100644
index 00000000000..95969f5d197
--- /dev/null
+++ b/static/usage/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/progress-bar/determinate/angular/example_component_ts.md b/static/usage/progress-bar/determinate/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f8b690fc9
--- /dev/null
+++ b/static/usage/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/progress-bar/determinate/demo.html b/static/usage/progress-bar/determinate/demo.html
new file mode 100644
index 00000000000..a72d9a4741b
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/progress-bar/determinate/index.md b/static/usage/progress-bar/determinate/index.md
new file mode 100644
index 00000000000..7b6decd68fa
--- /dev/null
+++ b/static/usage/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/progress-bar/determinate/demo.html"
+/>
diff --git a/static/usage/progress-bar/determinate/javascript.md b/static/usage/progress-bar/determinate/javascript.md
new file mode 100644
index 00000000000..6adb7e43590
--- /dev/null
+++ b/static/usage/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/progress-bar/determinate/react.md b/static/usage/progress-bar/determinate/react.md
new file mode 100644
index 00000000000..9622be87f95
--- /dev/null
+++ b/static/usage/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/progress-bar/determinate/vue.md b/static/usage/progress-bar/determinate/vue.md
new file mode 100644
index 00000000000..c22b3ead5d3
--- /dev/null
+++ b/static/usage/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/progress-bar/indeterminate/angular.md b/static/usage/progress-bar/indeterminate/angular.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/progress-bar/indeterminate/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/progress-bar/indeterminate/demo.html b/static/usage/progress-bar/indeterminate/demo.html
new file mode 100644
index 00000000000..26c81726242
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/progress-bar/indeterminate/index.md b/static/usage/progress-bar/indeterminate/index.md
new file mode 100644
index 00000000000..99df146e6b4
--- /dev/null
+++ b/static/usage/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/progress-bar/indeterminate/demo.html" />
diff --git a/static/usage/progress-bar/indeterminate/javascript.md b/static/usage/progress-bar/indeterminate/javascript.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/progress-bar/indeterminate/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+```
diff --git a/static/usage/progress-bar/indeterminate/react.md b/static/usage/progress-bar/indeterminate/react.md
new file mode 100644
index 00000000000..45e74e79ce7
--- /dev/null
+++ b/static/usage/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/progress-bar/indeterminate/vue.md b/static/usage/progress-bar/indeterminate/vue.md
new file mode 100644
index 00000000000..b15c060bdcc
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/colors/angular.md b/static/usage/progress-bar/theming/colors/angular.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/colors/demo.html b/static/usage/progress-bar/theming/colors/demo.html
new file mode 100644
index 00000000000..2486b259aa7
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/progress-bar/theming/colors/index.md b/static/usage/progress-bar/theming/colors/index.md
new file mode 100644
index 00000000000..3dde9fac0a9
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/colors/demo.html" />
diff --git a/static/usage/progress-bar/theming/colors/javascript.md b/static/usage/progress-bar/theming/colors/javascript.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/colors/react.md b/static/usage/progress-bar/theming/colors/react.md
new file mode 100644
index 00000000000..d40b838e65b
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/colors/vue.md b/static/usage/progress-bar/theming/colors/vue.md
new file mode 100644
index 00000000000..6f42832e199
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/progress-bar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/progress-bar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-properties/demo.html b/static/usage/progress-bar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..50761e26eba
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/progress-bar/theming/css-properties/index.md b/static/usage/progress-bar/theming/css-properties/index.md
new file mode 100644
index 00000000000..d2be1560681
--- /dev/null
+++ b/static/usage/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 reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/progress-bar/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/progress-bar/theming/css-properties/javascript.md b/static/usage/progress-bar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f57e0166013
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-properties/react/main_css.md b/static/usage/progress-bar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/progress-bar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-properties/vue.md b/static/usage/progress-bar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..bfff4db7a1b
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/progress-bar/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..e90d4144016
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/index.md b/static/usage/progress-bar/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..ebd35050667
--- /dev/null
+++ b/static/usage/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 reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/progress-bar/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/javascript.md b/static/usage/progress-bar/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..52b5be57e5a
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-shadow-parts/react/main_css.md b/static/usage/progress-bar/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/progress-bar/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/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/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/progress-bar/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..a9ca62b2c4f
--- /dev/null
+++ b/static/usage/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>
+```

From 7b471aad1f397060e3e441540d58609637f0d557 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 15:40:27 -0400
Subject: [PATCH 055/469] docs(spinner): add component playgrounds (#2552)

---
 docs/api/spinner.md                           | 214 +-----------------
 static/usage/spinner/basic/angular.md         |  51 +++++
 static/usage/spinner/basic/demo.html          |  79 +++++++
 static/usage/spinner/basic/index.md           |   8 +
 static/usage/spinner/basic/javascript.md      |  51 +++++
 static/usage/spinner/basic/react.md           |  61 +++++
 static/usage/spinner/basic/vue.md             |  62 +++++
 .../usage/spinner/theming/colors/angular.md   |  12 +
 static/usage/spinner/theming/colors/demo.html |  33 +++
 static/usage/spinner/theming/colors/index.md  |   8 +
 .../spinner/theming/colors/javascript.md      |  12 +
 static/usage/spinner/theming/colors/react.md  |  22 ++
 static/usage/spinner/theming/colors/vue.md    |  23 ++
 .../spinner/theming/css-properties/angular.md |   3 +
 .../angular/example_component_css.md          |   5 +
 .../angular/example_component_html.md         |   3 +
 .../spinner/theming/css-properties/demo.html  |  30 +++
 .../spinner/theming/css-properties/index.md   |  31 +++
 .../theming/css-properties/javascript.md      |   9 +
 .../spinner/theming/css-properties/react.md   |  11 +
 .../theming/css-properties/react/main_css.md  |   5 +
 .../theming/css-properties/react/main_tsx.md  |  15 ++
 .../spinner/theming/css-properties/vue.md     |  20 ++
 23 files changed, 566 insertions(+), 202 deletions(-)
 create mode 100644 static/usage/spinner/basic/angular.md
 create mode 100644 static/usage/spinner/basic/demo.html
 create mode 100644 static/usage/spinner/basic/index.md
 create mode 100644 static/usage/spinner/basic/javascript.md
 create mode 100644 static/usage/spinner/basic/react.md
 create mode 100644 static/usage/spinner/basic/vue.md
 create mode 100644 static/usage/spinner/theming/colors/angular.md
 create mode 100644 static/usage/spinner/theming/colors/demo.html
 create mode 100644 static/usage/spinner/theming/colors/index.md
 create mode 100644 static/usage/spinner/theming/colors/javascript.md
 create mode 100644 static/usage/spinner/theming/colors/react.md
 create mode 100644 static/usage/spinner/theming/colors/vue.md
 create mode 100644 static/usage/spinner/theming/css-properties/angular.md
 create mode 100644 static/usage/spinner/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/spinner/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/spinner/theming/css-properties/demo.html
 create mode 100644 static/usage/spinner/theming/css-properties/index.md
 create mode 100644 static/usage/spinner/theming/css-properties/javascript.md
 create mode 100644 static/usage/spinner/theming/css-properties/react.md
 create mode 100644 static/usage/spinner/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/spinner/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/spinner/theming/css-properties/vue.md

diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index f3d22322154..65675a91f1a 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-spinner"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/spinner/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/spinner/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -26,215 +19,32 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
 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.
 
-The default spinner to use is based on the platform. The default spinner for `ios` is `"lines"`, and the default for `android` is `"crescent"`. If the platform is not `ios` or `android`, the spinner will default to `crescent`. If the `name` property is set, then that spinner will be used instead of the platform specific spinner.
-
-
-
-
-
-## 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 Spinner -->
-<ion-spinner></ion-spinner>
-
-<!-- Lines -->
-<ion-spinner name="lines"></ion-spinner>
-
-<!-- Lines Small -->
-<ion-spinner name="lines-small"></ion-spinner>
-
-<!-- Dots -->
-<ion-spinner name="dots"></ion-spinner>
-
-<!-- Bubbles -->
-<ion-spinner name="bubbles"></ion-spinner>
-
-<!-- Circles -->
-<ion-spinner name="circles"></ion-spinner>
-
-<!-- Crescent -->
-<ion-spinner name="crescent"></ion-spinner>
-
-<!-- Paused Default Spinner -->
-<ion-spinner paused></ion-spinner>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Spinner -->
-<ion-spinner></ion-spinner>
-
-<!-- Lines -->
-<ion-spinner name="lines"></ion-spinner>
-
-<!-- Lines Small -->
-<ion-spinner name="lines-small"></ion-spinner>
-
-<!-- Dots -->
-<ion-spinner name="dots"></ion-spinner>
-
-<!-- Bubbles -->
-<ion-spinner name="bubbles"></ion-spinner>
-
-<!-- Circles -->
-<ion-spinner name="circles"></ion-spinner>
-
-<!-- Crescent -->
-<ion-spinner name="crescent"></ion-spinner>
-
-<!-- Paused Default Spinner -->
-<ion-spinner paused></ion-spinner>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonSpinner, IonContent } from '@ionic/react';
-
-export const SpinnerExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default Spinner --*/}
-    <IonSpinner />
-
-    {/*-- Lines --*/}
-    <IonSpinner name="lines" />
-
-    {/*-- Lines Small --*/}
-    <IonSpinner name="lines-small" />
-
-    {/*-- Dots --*/}
-    <IonSpinner name="dots" />
-
-    {/*-- Bubbles --*/}
-    <IonSpinner name="bubbles" />
-
-    {/*-- Circles --*/}
-    <IonSpinner name="circles" />
-
-    {/*-- Crescent --*/}
-    <IonSpinner name="crescent" />
-
-    {/*-- Paused Default Spinner --*/}
-    <IonSpinner paused />
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'spinner-example',
-  styleUrl: 'spinner-example.css'
-})
-export class SpinnerExample {
-  render() {
-    return [
-      // Default Spinner
-      <ion-spinner></ion-spinner>,
-
-      // Lines
-      <ion-spinner name="lines"></ion-spinner>,
-
-      // Lines Small
-      <ion-spinner name="lines-small"></ion-spinner>,
-
-      // Dots
-      <ion-spinner name="dots"></ion-spinner>,
-
-      // Bubbles
-      <ion-spinner name="bubbles"></ion-spinner>,
-
-      // Circles
-      <ion-spinner name="circles"></ion-spinner>,
-
-      // Crescent
-      <ion-spinner name="crescent"></ion-spinner>,
-
-      // Paused Default Spinner
-      <ion-spinner paused={true}></ion-spinner>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Spinner -->
-  <ion-spinner></ion-spinner>
 
-  <!-- Lines -->
-  <ion-spinner name="lines"></ion-spinner>
+## Basic Usage
 
-  <!-- Lines Small -->
-  <ion-spinner name="lines-small"></ion-spinner>
+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.
 
-  <!-- Dots -->
-  <ion-spinner name="dots"></ion-spinner>
+import Basic from '@site/static/usage/spinner/basic/index.md';
 
-  <!-- Bubbles -->
-  <ion-spinner name="bubbles"></ion-spinner>
+<Basic />
 
-  <!-- Circles -->
-  <ion-spinner name="circles"></ion-spinner>
+## Theming
 
-  <!-- Crescent -->
-  <ion-spinner name="crescent"></ion-spinner>
+### Colors
 
-  <!-- Paused Default Spinner -->
-  <ion-spinner paused></ion-spinner>
-</template>
+import Colors from '@site/static/usage/spinner/theming/colors/index.md';
 
-<script>
-import { IonSpinner } from '@ionic/vue';
-import { defineComponent } from 'vue';
+<Colors />
 
-export default defineComponent({
-  components: { IonSpinner }
-});
-</script>
-```
+### CSS Custom Properties
 
+import CSSProps from '@site/static/usage/spinner/theming/css-properties/index.md';
 
-</TabItem>
+<CSSProps />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -252,4 +62,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/spinner/basic/angular.md b/static/usage/spinner/basic/angular.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/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/spinner/basic/demo.html b/static/usage/spinner/basic/demo.html
new file mode 100644
index 00000000000..e58299228f3
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/spinner/basic/index.md b/static/usage/spinner/basic/index.md
new file mode 100644
index 00000000000..8eafdcf7c9c
--- /dev/null
+++ b/static/usage/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/spinner/basic/demo.html" size="500px" />
diff --git a/static/usage/spinner/basic/javascript.md b/static/usage/spinner/basic/javascript.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/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/spinner/basic/react.md b/static/usage/spinner/basic/react.md
new file mode 100644
index 00000000000..c6219c28b42
--- /dev/null
+++ b/static/usage/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/spinner/basic/vue.md b/static/usage/spinner/basic/vue.md
new file mode 100644
index 00000000000..089b9fb6da8
--- /dev/null
+++ b/static/usage/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/spinner/theming/colors/angular.md b/static/usage/spinner/theming/colors/angular.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/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/spinner/theming/colors/demo.html b/static/usage/spinner/theming/colors/demo.html
new file mode 100644
index 00000000000..6581587fc7c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/spinner/theming/colors/index.md b/static/usage/spinner/theming/colors/index.md
new file mode 100644
index 00000000000..4770db48687
--- /dev/null
+++ b/static/usage/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/spinner/theming/colors/demo.html" size="100px" />
diff --git a/static/usage/spinner/theming/colors/javascript.md b/static/usage/spinner/theming/colors/javascript.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/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/spinner/theming/colors/react.md b/static/usage/spinner/theming/colors/react.md
new file mode 100644
index 00000000000..aca320e2720
--- /dev/null
+++ b/static/usage/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/spinner/theming/colors/vue.md b/static/usage/spinner/theming/colors/vue.md
new file mode 100644
index 00000000000..c45f320c7ed
--- /dev/null
+++ b/static/usage/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/spinner/theming/css-properties/angular.md b/static/usage/spinner/theming/css-properties/angular.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/spinner/theming/css-properties/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-spinner></ion-spinner>
+```
diff --git a/static/usage/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/spinner/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/spinner/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/spinner/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/spinner/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-spinner></ion-spinner>
+```
diff --git a/static/usage/spinner/theming/css-properties/demo.html b/static/usage/spinner/theming/css-properties/demo.html
new file mode 100644
index 00000000000..fe0409966ce
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/spinner/theming/css-properties/index.md b/static/usage/spinner/theming/css-properties/index.md
new file mode 100644
index 00000000000..6741db191fc
--- /dev/null
+++ b/static/usage/spinner/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/spinner/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/spinner/theming/css-properties/javascript.md b/static/usage/spinner/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..e2077bc508e
--- /dev/null
+++ b/static/usage/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/spinner/theming/css-properties/react.md b/static/usage/spinner/theming/css-properties/react.md
new file mode 100644
index 00000000000..e5cd98ffb60
--- /dev/null
+++ b/static/usage/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/spinner/theming/css-properties/react/main_css.md b/static/usage/spinner/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/spinner/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+  --color: #54dc98;
+}
+```
diff --git a/static/usage/spinner/theming/css-properties/react/main_tsx.md b/static/usage/spinner/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..f990cb1e738
--- /dev/null
+++ b/static/usage/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/spinner/theming/css-properties/vue.md b/static/usage/spinner/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c818d2c7488
--- /dev/null
+++ b/static/usage/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>
+```

From f6a248868ce4c7f4432dde302f69ed0454b72d0e Mon Sep 17 00:00:00 2001
From: Irene Lie <77621546+ireneliee@users.noreply.github.com>
Date: Tue, 20 Sep 2022 04:01:09 +0800
Subject: [PATCH 056/469] docs(grid) update verbiage 'for react' to 'in react'
 (#2435)

---
 docs/layout/grid.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index c8f65284495..cdeb3482b15 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -47,7 +47,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts.
 
 ### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-basic-grid) and for React [here](https://stackblitz.com/edit/ionic-react-basic-grid).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-basic-grid) and in React [here](https://stackblitz.com/edit/ionic-react-basic-grid).
 
 ## Grid size
 
@@ -63,7 +63,7 @@ By default, the grid will take up 100% width. To set a specific width based on t
 
 ### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) and for React [here](https://stackblitz.com/edit/ionic-react-fixed-width-grid).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) and in React [here](https://stackblitz.com/edit/ionic-react-fixed-width-grid).
 
 ## Grid attributes
 
@@ -148,7 +148,7 @@ Set the width of one column and the others will automatically resize around it.
 
 #### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-set-width-col) and for React [here](https://stackblitz.com/edit/ionic-react-set-width-col).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-set-width-col) and in React [here](https://stackblitz.com/edit/ionic-react-set-width-col).
 
 ### Variable-width
 
@@ -188,7 +188,7 @@ By setting the `size-{breakpoint}` properties to `"auto"` the column can size it
 
 #### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-var-width-col) and for React [here](https://stackblitz.com/edit/ionic-react-var-width-col).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-var-width-col) and in React [here](https://stackblitz.com/edit/ionic-react-var-width-col).
 
 ## Responsive attributes
 
@@ -240,7 +240,7 @@ Use a combination of width and breakpoint attributes to create a grid that start
 
 #### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) and for React [here](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) and in React [here](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid).
 
 ## Reordering
 
@@ -281,7 +281,7 @@ Offsets can also be added based on screen breakpoints. Here's an example of a gr
 
 #### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) and for React [here](https://stackblitz.com/edit/ionic-react-offset-grid-cols).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) and in React [here](https://stackblitz.com/edit/ionic-react-offset-grid-cols).
 
 ### Push and pull
 
@@ -320,7 +320,7 @@ Push and pull can also be added based on screen breakpoints. In the following ex
 
 #### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-push-pull) and for React [here](https://stackblitz.com/edit/ionic-react-grid-push-pull).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-push-pull) and in React [here](https://stackblitz.com/edit/ionic-react-grid-push-pull).
 
 ## Alignment
 
@@ -400,7 +400,7 @@ Columns can also align themselves differently than other columns by adding the a
 
 #### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) and for React [here](https://stackblitz.com/edit/ionic-react-grid-vertical-align).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) and in React [here](https://stackblitz.com/edit/ionic-react-grid-vertical-align).
 
 ### Horizontal alignment
 
@@ -457,7 +457,7 @@ All columns can be horizontally aligned inside of a row by adding different clas
 
 #### Live Example
 
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) and for React [here](https://stackblitz.com/edit/ionic-react-grid-horizontal-align).
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) and in React [here](https://stackblitz.com/edit/ionic-react-grid-horizontal-align).
 
 ## Customizing the grid
 

From 85809b80bcbc56a7fd842004e979f9d2bc98a7c8 Mon Sep 17 00:00:00 2001
From: Khalid Almosallamy <49591985+Mosallamy@users.noreply.github.com>
Date: Mon, 19 Sep 2022 23:05:01 +0300
Subject: [PATCH 057/469] docs(vue): remove $ from shell snippet code (#2450)

---
 docs/vue/your-first-app/6-deploying-mobile.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/vue/your-first-app/6-deploying-mobile.md b/docs/vue/your-first-app/6-deploying-mobile.md
index ecf8603ad8e..795ebdda646 100644
--- a/docs/vue/your-first-app/6-deploying-mobile.md
+++ b/docs/vue/your-first-app/6-deploying-mobile.md
@@ -30,8 +30,8 @@ ionic build
 Next, create both the iOS and Android projects:
 
 ```shell
-$ ionic cap add ios
-$ ionic cap add android
+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.).

From 5cf0c1d8210b646a3425c3736a4f6514ddad6a3d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 16:28:26 -0400
Subject: [PATCH 058/469] docs(searchbar): add component playgrounds (#2547)

---
 docs/api/searchbar.md                         | 353 +++---------------
 static/usage/searchbar/basic/angular.md       |   7 +
 static/usage/searchbar/basic/demo.html        |  34 ++
 static/usage/searchbar/basic/index.md         |   8 +
 static/usage/searchbar/basic/javascript.md    |   7 +
 static/usage/searchbar/basic/react.md         |  17 +
 static/usage/searchbar/basic/vue.md           |  18 +
 .../usage/searchbar/cancel-button/angular.md  |   6 +
 .../usage/searchbar/cancel-button/demo.html   |  33 ++
 static/usage/searchbar/cancel-button/index.md |   8 +
 .../searchbar/cancel-button/javascript.md     |   6 +
 static/usage/searchbar/cancel-button/react.md |  17 +
 static/usage/searchbar/cancel-button/vue.md   |  21 ++
 .../usage/searchbar/clear-button/angular.md   |   6 +
 static/usage/searchbar/clear-button/demo.html |  33 ++
 static/usage/searchbar/clear-button/index.md  |   8 +
 .../searchbar/clear-button/javascript.md      |   6 +
 static/usage/searchbar/clear-button/react.md  |  17 +
 static/usage/searchbar/clear-button/vue.md    |  21 ++
 .../angular/example_component_html.md         |   9 +
 .../debounce/angular/example_component_ts.md  |  17 +
 static/usage/searchbar/debounce/demo.html     |  64 ++++
 static/usage/searchbar/debounce/index.md      |  25 ++
 static/usage/searchbar/debounce/javascript.md |  37 ++
 static/usage/searchbar/debounce/react.md      |  30 ++
 static/usage/searchbar/debounce/vue.md        |  32 ++
 static/usage/searchbar/search-icon/angular.md |   4 +
 static/usage/searchbar/search-icon/demo.html  |  31 ++
 static/usage/searchbar/search-icon/index.md   |   8 +
 .../usage/searchbar/search-icon/javascript.md |   4 +
 static/usage/searchbar/search-icon/react.md   |  15 +
 static/usage/searchbar/search-icon/vue.md     |  19 +
 .../usage/searchbar/theming/colors/angular.md |  12 +
 .../usage/searchbar/theming/colors/demo.html  |  39 ++
 .../usage/searchbar/theming/colors/index.md   |   8 +
 .../searchbar/theming/colors/javascript.md    |  12 +
 .../usage/searchbar/theming/colors/react.md   |  22 ++
 static/usage/searchbar/theming/colors/vue.md  |  23 ++
 .../angular/example_component_css.md          |  20 +
 .../angular/example_component_html.md         |   3 +
 .../theming/css-properties/demo.html          |  48 +++
 .../searchbar/theming/css-properties/index.md |  31 ++
 .../theming/css-properties/javascript.md      |  24 ++
 .../theming/css-properties/react/main_css.md  |  20 +
 .../theming/css-properties/react/main_tsx.md  |  13 +
 .../searchbar/theming/css-properties/vue.md   |  35 ++
 static/usage/searchbar/toolbar/angular.md     |  12 +
 static/usage/searchbar/toolbar/demo.html      |  40 ++
 static/usage/searchbar/toolbar/index.md       |  13 +
 static/usage/searchbar/toolbar/javascript.md  |  12 +
 static/usage/searchbar/toolbar/react.md       |  20 +
 static/usage/searchbar/toolbar/vue.md         |  23 ++
 52 files changed, 1048 insertions(+), 303 deletions(-)
 create mode 100644 static/usage/searchbar/basic/angular.md
 create mode 100644 static/usage/searchbar/basic/demo.html
 create mode 100644 static/usage/searchbar/basic/index.md
 create mode 100644 static/usage/searchbar/basic/javascript.md
 create mode 100644 static/usage/searchbar/basic/react.md
 create mode 100644 static/usage/searchbar/basic/vue.md
 create mode 100644 static/usage/searchbar/cancel-button/angular.md
 create mode 100644 static/usage/searchbar/cancel-button/demo.html
 create mode 100644 static/usage/searchbar/cancel-button/index.md
 create mode 100644 static/usage/searchbar/cancel-button/javascript.md
 create mode 100644 static/usage/searchbar/cancel-button/react.md
 create mode 100644 static/usage/searchbar/cancel-button/vue.md
 create mode 100644 static/usage/searchbar/clear-button/angular.md
 create mode 100644 static/usage/searchbar/clear-button/demo.html
 create mode 100644 static/usage/searchbar/clear-button/index.md
 create mode 100644 static/usage/searchbar/clear-button/javascript.md
 create mode 100644 static/usage/searchbar/clear-button/react.md
 create mode 100644 static/usage/searchbar/clear-button/vue.md
 create mode 100644 static/usage/searchbar/debounce/angular/example_component_html.md
 create mode 100644 static/usage/searchbar/debounce/angular/example_component_ts.md
 create mode 100644 static/usage/searchbar/debounce/demo.html
 create mode 100644 static/usage/searchbar/debounce/index.md
 create mode 100644 static/usage/searchbar/debounce/javascript.md
 create mode 100644 static/usage/searchbar/debounce/react.md
 create mode 100644 static/usage/searchbar/debounce/vue.md
 create mode 100644 static/usage/searchbar/search-icon/angular.md
 create mode 100644 static/usage/searchbar/search-icon/demo.html
 create mode 100644 static/usage/searchbar/search-icon/index.md
 create mode 100644 static/usage/searchbar/search-icon/javascript.md
 create mode 100644 static/usage/searchbar/search-icon/react.md
 create mode 100644 static/usage/searchbar/search-icon/vue.md
 create mode 100644 static/usage/searchbar/theming/colors/angular.md
 create mode 100644 static/usage/searchbar/theming/colors/demo.html
 create mode 100644 static/usage/searchbar/theming/colors/index.md
 create mode 100644 static/usage/searchbar/theming/colors/javascript.md
 create mode 100644 static/usage/searchbar/theming/colors/react.md
 create mode 100644 static/usage/searchbar/theming/colors/vue.md
 create mode 100644 static/usage/searchbar/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/searchbar/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/searchbar/theming/css-properties/demo.html
 create mode 100644 static/usage/searchbar/theming/css-properties/index.md
 create mode 100644 static/usage/searchbar/theming/css-properties/javascript.md
 create mode 100644 static/usage/searchbar/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/searchbar/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/searchbar/theming/css-properties/vue.md
 create mode 100644 static/usage/searchbar/toolbar/angular.md
 create mode 100644 static/usage/searchbar/toolbar/demo.html
 create mode 100644 static/usage/searchbar/toolbar/index.md
 create mode 100644 static/usage/searchbar/toolbar/javascript.md
 create mode 100644 static/usage/searchbar/toolbar/react.md
 create mode 100644 static/usage/searchbar/toolbar/vue.md

diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index 7e364f4c862..cc2358b67aa 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-searchbar"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/searchbar/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/searchbar/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,355 +17,109 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-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. A clear button is displayed 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. A cancel button can be enabled which will clear the input and lose the focus upon click.
-
-## 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;
-}
-```
-
-
-
-## 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 Searchbar -->
-<ion-searchbar></ion-searchbar>
-
-<!-- Searchbar with cancel button always shown -->
-<ion-searchbar showCancelButton="always"></ion-searchbar>
-
-<!-- Searchbar with cancel button never shown -->
-<ion-searchbar showCancelButton="never"></ion-searchbar>
-
-<!-- Searchbar with cancel button shown on focus -->
-<ion-searchbar showCancelButton="focus"></ion-searchbar>
-
-<!-- Searchbar with danger color -->
-<ion-searchbar color="danger"></ion-searchbar>
-
-<!-- Searchbar with value -->
-<ion-searchbar value="Ionic"></ion-searchbar>
-
-<!-- Searchbar with telephone type -->
-<ion-searchbar type="tel"></ion-searchbar>
-
-<!-- Searchbar with numeric inputmode -->
-<ion-searchbar inputmode="numeric"></ion-searchbar>
+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.
 
-<!-- Searchbar disabled -->
-<ion-searchbar disabled="true"></ion-searchbar>
 
-<!-- Searchbar with a cancel button and custom cancel button text -->
-<ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
+## Basic Usage
 
-<!-- Searchbar with a custom debounce -->
-<ion-searchbar debounce="500"></ion-searchbar>
+import Basic from '@site/static/usage/searchbar/basic/index.md';
 
-<!-- Animated Searchbar -->
-<ion-searchbar animated></ion-searchbar>
+<Basic />
 
-<!-- Searchbar with a placeholder -->
-<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
 
-<!-- Searchbar in a Toolbar -->
-<ion-toolbar>
-  <ion-searchbar></ion-searchbar>
-</ion-toolbar>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
+## Search Icon
 
-```html
-<!-- Default Searchbar -->
-<ion-searchbar></ion-searchbar>
+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/).
 
-<!-- Searchbar with cancel button always shown -->
-<ion-searchbar show-cancel-button="always"></ion-searchbar>
+import SearchIcon from '@site/static/usage/searchbar/search-icon/index.md';
 
-<!-- Searchbar with cancel button never shown -->
-<ion-searchbar show-cancel-button="never"></ion-searchbar>
+<SearchIcon />
 
-<!-- Searchbar with cancel button shown on focus -->
-<ion-searchbar show-cancel-button="focus"></ion-searchbar>
 
-<!-- Searchbar with danger color -->
-<ion-searchbar color="danger"></ion-searchbar>
+## Clear Button
 
-<!-- Searchbar with value -->
-<ion-searchbar value="Ionic"></ion-searchbar>
+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/).
 
-<!-- Searchbar with telephone type -->
-<ion-searchbar type="tel"></ion-searchbar>
+import ClearButton from '@site/static/usage/searchbar/clear-button/index.md';
 
-<!-- Searchbar with numeric inputmode -->
-<ion-searchbar inputmode="numeric"></ion-searchbar>
+<ClearButton />
 
-<!-- Searchbar disabled -->
-<ion-searchbar disabled="true"></ion-searchbar>
 
-<!-- Searchbar with a cancel button and custom cancel button text -->
-<ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>
+## Cancel Button
 
-<!-- Searchbar with a custom debounce -->
-<ion-searchbar debounce="500"></ion-searchbar>
+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/).
 
-<!-- Animated Searchbar -->
-<ion-searchbar animated></ion-searchbar>
-
-<!-- Searchbar with a placeholder -->
-<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
-
-<!-- Searchbar in a Toolbar -->
-<ion-toolbar>
-  <ion-searchbar></ion-searchbar>
-</ion-toolbar>
-```
+import CancelButton from '@site/static/usage/searchbar/cancel-button/index.md';
 
-</TabItem>
+<CancelButton />
 
 
-<TabItem value="react">
+## Searchbar in a Toolbar
 
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react';
+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.
 
-export const SearchBarExamples: React.FC = () => {
-  const [searchText, setSearchText] = useState('');
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>IonSearchBar Examples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <p>Default Searchbar</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
+import Toolbar from '@site/static/usage/searchbar/toolbar/index.md';
 
-        <p>Searchbar with cancel button always shown</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="always"></IonSearchbar>
+<Toolbar />
 
-        <p>Searchbar with cancel button never shown</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="never"></IonSearchbar>
 
-        <p>Searchbar with cancel button shown on focus</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus"></IonSearchbar>
+## Debounce
 
-        <p>Searchbar with danger color</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} color="danger"></IonSearchbar>
+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.
 
-        <p>Searchbar with telephone type</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} type="tel"></IonSearchbar>
+import Debounce from '@site/static/usage/searchbar/debounce/index.md';
 
-        <p>Searchbar with numeric inputmode</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} inputmode="numeric"></IonSearchbar>
+<Debounce />
 
-        <p>Searchbar disabled </p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} disabled={true}></IonSearchbar>
 
-        <p>Searchbar with a cancel button and custom cancel button text</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
-
-        <p>Searchbar with a custom debounce - Note: debounce only works on onIonChange event</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} debounce={1000}></IonSearchbar>
-
-        <p>Animated Searchbar</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} animated></IonSearchbar>
-
-        <p>Searchbar with a placeholder</p>
-        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} placeholder="Filter Schedules"></IonSearchbar>
-
-        <p>Searchbar in a Toolbar</p>
-        <IonToolbar>
-          <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
-        </IonToolbar>
-
-      </IonContent>
-      <IonFooter>
-        <IonToolbar>
-          Search Text: {searchText ?? '(none)'}
-        </IonToolbar>
-      </IonFooter>
-    </IonPage>
-  );
-};
-```
+## Theming
 
-</TabItem>
+### Colors
 
+import Colors from '@site/static/usage/searchbar/theming/colors/index.md';
 
-<TabItem value="stencil">
+<Colors />
 
-```tsx
-import { Component, h } from '@stencil/core';
+### CSS Custom Properties
 
-@Component({
-  tag: 'searchbar-example',
-  styleUrl: 'searchbar-example.css'
-})
-export class SearchbarExample {
-  render() {
-    return [
-       // Default Searchbar
-      <ion-searchbar></ion-searchbar>,
+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.
 
-      // Searchbar with cancel button always shown
-      <ion-searchbar showCancelButton="always"></ion-searchbar>,
+import CSSProps from '@site/static/usage/searchbar/theming/css-properties/index.md';
 
-      // Searchbar with cancel button never shown
-      <ion-searchbar showCancelButton="never"></ion-searchbar>,
+<CSSProps />
 
-      // Searchbar with cancel button shown on focus
-      <ion-searchbar showCancelButton="focus"></ion-searchbar>,
 
-      // Searchbar with danger color
-      <ion-searchbar color="danger"></ion-searchbar>,
-
-      // Searchbar with value
-      <ion-searchbar value="Ionic"></ion-searchbar>,
-
-      // Searchbar with telephone type
-      <ion-searchbar type="tel"></ion-searchbar>,
+## Keyboard Display
 
-      // Searchbar with numeric inputmode
-      <ion-searchbar inputmode="numeric"></ion-searchbar>,
+### Android
 
-      // Searchbar disabled
-      <ion-searchbar disabled={true}></ion-searchbar>,
+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.
 
-      // Searchbar with a cancel button and custom cancel button text
-      <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>,
+### iOS
 
-      // Searchbar with a custom debounce
-      <ion-searchbar debounce={500}></ion-searchbar>,
+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".
 
-      // Animated Searchbar
-      <ion-searchbar animated={true}></ion-searchbar>,
+## Interfaces
 
-      // Searchbar with a placeholder
-      <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>,
+### SearchbarChangeEventDetail
 
-      // Searchbar in a Toolbar
-      <ion-toolbar>
-        <ion-searchbar></ion-searchbar>
-      </ion-toolbar>
-    ];
-  }
+```typescript
+interface SearchbarChangeEventDetail {
+  value?: string;
 }
 ```
 
+### SearchbarCustomEvent
 
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Searchbar -->
-  <ion-searchbar></ion-searchbar>
-
-  <!-- Searchbar with cancel button always shown -->
-  <ion-searchbar show-cancel-button="always"></ion-searchbar>
-
-  <!-- Searchbar with cancel button never shown -->
-  <ion-searchbar show-cancel-button="never"></ion-searchbar>
-
-  <!-- Searchbar with cancel button shown on focus -->
-  <ion-searchbar show-cancel-button="focus"></ion-searchbar>
-
-  <!-- Searchbar with danger color -->
-  <ion-searchbar color="danger"></ion-searchbar>
-
-  <!-- Searchbar with value -->
-  <ion-searchbar value="Ionic"></ion-searchbar>
-
-  <!-- Searchbar with telephone type -->
-  <ion-searchbar type="tel"></ion-searchbar>
-
-  <!-- Searchbar with numeric inputmode -->
-  <ion-searchbar inputmode="numeric"></ion-searchbar>
-
-  <!-- Searchbar disabled -->
-  <ion-searchbar disabled="true"></ion-searchbar>
-
-  <!-- Searchbar with a cancel button and custom cancel button text -->
-  <ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>
-
-  <!-- Searchbar with a custom debounce -->
-  <ion-searchbar debounce="500"></ion-searchbar>
-
-  <!-- Animated Searchbar -->
-  <ion-searchbar animated></ion-searchbar>
-
-  <!-- Searchbar with a placeholder -->
-  <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
-
-  <!-- Searchbar in a Toolbar -->
-  <ion-toolbar>
-    <ion-searchbar></ion-searchbar>
-  </ion-toolbar>
-</template>
-
-<script>
-import { IonSearchbar, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
 
-export default defineComponent({
-  components: { IonSearchbar, IonToolbar }
-});
-</script>
+```typescript
+interface SearchbarCustomEvent extends CustomEvent {
+  detail: SearchbarChangeEventDetail;
+  target: HTMLIonSearchbarElement;
+}
 ```
 
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -390,4 +137,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/searchbar/basic/angular.md b/static/usage/searchbar/basic/angular.md
new file mode 100644
index 00000000000..610e6556428
--- /dev/null
+++ b/static/usage/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/searchbar/basic/demo.html b/static/usage/searchbar/basic/demo.html
new file mode 100644
index 00000000000..e0ba868eea8
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/searchbar/basic/index.md b/static/usage/searchbar/basic/index.md
new file mode 100644
index 00000000000..ea9d2ff092a
--- /dev/null
+++ b/static/usage/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/searchbar/basic/demo.html" size="300px" />
diff --git a/static/usage/searchbar/basic/javascript.md b/static/usage/searchbar/basic/javascript.md
new file mode 100644
index 00000000000..610e6556428
--- /dev/null
+++ b/static/usage/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/searchbar/basic/react.md b/static/usage/searchbar/basic/react.md
new file mode 100644
index 00000000000..b0a3d625855
--- /dev/null
+++ b/static/usage/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/searchbar/basic/vue.md b/static/usage/searchbar/basic/vue.md
new file mode 100644
index 00000000000..f50a9cb5a5f
--- /dev/null
+++ b/static/usage/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/searchbar/cancel-button/angular.md b/static/usage/searchbar/cancel-button/angular.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/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/searchbar/cancel-button/demo.html b/static/usage/searchbar/cancel-button/demo.html
new file mode 100644
index 00000000000..84e63843389
--- /dev/null
+++ b/static/usage/searchbar/cancel-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-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
new file mode 100644
index 00000000000..b435b591540
--- /dev/null
+++ b/static/usage/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/searchbar/cancel-button/demo.html" size="250px" />
diff --git a/static/usage/searchbar/cancel-button/javascript.md b/static/usage/searchbar/cancel-button/javascript.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/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/searchbar/cancel-button/react.md b/static/usage/searchbar/cancel-button/react.md
new file mode 100644
index 00000000000..5f312e34aa0
--- /dev/null
+++ b/static/usage/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/searchbar/cancel-button/vue.md b/static/usage/searchbar/cancel-button/vue.md
new file mode 100644
index 00000000000..a56a1451692
--- /dev/null
+++ b/static/usage/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/searchbar/clear-button/angular.md b/static/usage/searchbar/clear-button/angular.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/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/searchbar/clear-button/demo.html b/static/usage/searchbar/clear-button/demo.html
new file mode 100644
index 00000000000..656a41c70b5
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/searchbar/clear-button/index.md b/static/usage/searchbar/clear-button/index.md
new file mode 100644
index 00000000000..71167e9f30b
--- /dev/null
+++ b/static/usage/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/searchbar/clear-button/demo.html" size="250px" />
diff --git a/static/usage/searchbar/clear-button/javascript.md b/static/usage/searchbar/clear-button/javascript.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/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/searchbar/clear-button/react.md b/static/usage/searchbar/clear-button/react.md
new file mode 100644
index 00000000000..9f21f1a1d84
--- /dev/null
+++ b/static/usage/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/searchbar/clear-button/vue.md b/static/usage/searchbar/clear-button/vue.md
new file mode 100644
index 00000000000..b778093f372
--- /dev/null
+++ b/static/usage/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/searchbar/debounce/angular/example_component_html.md b/static/usage/searchbar/debounce/angular/example_component_html.md
new file mode 100644
index 00000000000..5a554a24551
--- /dev/null
+++ b/static/usage/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/searchbar/debounce/angular/example_component_ts.md b/static/usage/searchbar/debounce/angular/example_component_ts.md
new file mode 100644
index 00000000000..1d8215ef1a5
--- /dev/null
+++ b/static/usage/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/searchbar/debounce/demo.html b/static/usage/searchbar/debounce/demo.html
new file mode 100644
index 00000000000..25497f0b7da
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/searchbar/debounce/index.md b/static/usage/searchbar/debounce/index.md
new file mode 100644
index 00000000000..f5262bff71b
--- /dev/null
+++ b/static/usage/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/searchbar/debounce/demo.html"
+  size="large"
+/>
diff --git a/static/usage/searchbar/debounce/javascript.md b/static/usage/searchbar/debounce/javascript.md
new file mode 100644
index 00000000000..6a74446f699
--- /dev/null
+++ b/static/usage/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/searchbar/debounce/react.md b/static/usage/searchbar/debounce/react.md
new file mode 100644
index 00000000000..f46ce1a6da5
--- /dev/null
+++ b/static/usage/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/searchbar/debounce/vue.md b/static/usage/searchbar/debounce/vue.md
new file mode 100644
index 00000000000..2d85d6ed2d2
--- /dev/null
+++ b/static/usage/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/searchbar/search-icon/angular.md b/static/usage/searchbar/search-icon/angular.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/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/searchbar/search-icon/demo.html b/static/usage/searchbar/search-icon/demo.html
new file mode 100644
index 00000000000..d02014baca2
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/searchbar/search-icon/index.md b/static/usage/searchbar/search-icon/index.md
new file mode 100644
index 00000000000..70692c721cf
--- /dev/null
+++ b/static/usage/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/searchbar/search-icon/demo.html" />
diff --git a/static/usage/searchbar/search-icon/javascript.md b/static/usage/searchbar/search-icon/javascript.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/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/searchbar/search-icon/react.md b/static/usage/searchbar/search-icon/react.md
new file mode 100644
index 00000000000..4bb596d1e00
--- /dev/null
+++ b/static/usage/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/searchbar/search-icon/vue.md b/static/usage/searchbar/search-icon/vue.md
new file mode 100644
index 00000000000..6414acf7b2e
--- /dev/null
+++ b/static/usage/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/searchbar/theming/colors/angular.md b/static/usage/searchbar/theming/colors/angular.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/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/searchbar/theming/colors/demo.html b/static/usage/searchbar/theming/colors/demo.html
new file mode 100644
index 00000000000..b840bc0112a
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/searchbar/theming/colors/index.md b/static/usage/searchbar/theming/colors/index.md
new file mode 100644
index 00000000000..bfc180873ad
--- /dev/null
+++ b/static/usage/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/searchbar/theming/colors/demo.html" size="large" />
diff --git a/static/usage/searchbar/theming/colors/javascript.md b/static/usage/searchbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/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/searchbar/theming/colors/react.md b/static/usage/searchbar/theming/colors/react.md
new file mode 100644
index 00000000000..d1c29b9cd28
--- /dev/null
+++ b/static/usage/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/searchbar/theming/colors/vue.md b/static/usage/searchbar/theming/colors/vue.md
new file mode 100644
index 00000000000..ef95e690107
--- /dev/null
+++ b/static/usage/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/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/searchbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/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/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/searchbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..080217dcc41
--- /dev/null
+++ b/static/usage/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/searchbar/theming/css-properties/demo.html b/static/usage/searchbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..71033407779
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/searchbar/theming/css-properties/index.md b/static/usage/searchbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..b0bc8933e76
--- /dev/null
+++ b/static/usage/searchbar/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/searchbar/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/searchbar/theming/css-properties/javascript.md b/static/usage/searchbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..dca643d2a52
--- /dev/null
+++ b/static/usage/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/searchbar/theming/css-properties/react/main_css.md b/static/usage/searchbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/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/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/searchbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..4b1b527952e
--- /dev/null
+++ b/static/usage/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/searchbar/theming/css-properties/vue.md b/static/usage/searchbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6e45e744231
--- /dev/null
+++ b/static/usage/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/searchbar/toolbar/angular.md b/static/usage/searchbar/toolbar/angular.md
new file mode 100644
index 00000000000..7b0f96159c5
--- /dev/null
+++ b/static/usage/searchbar/toolbar/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Searchbar
+    </ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/searchbar/toolbar/demo.html b/static/usage/searchbar/toolbar/demo.html
new file mode 100644
index 00000000000..97071934009
--- /dev/null
+++ b/static/usage/searchbar/toolbar/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>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;
+      justify-content: start;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>
+              Searchbar
+            </ion-title>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/searchbar/toolbar/index.md b/static/usage/searchbar/toolbar/index.md
new file mode 100644
index 00000000000..ba490a0f94a
--- /dev/null
+++ b/static/usage/searchbar/toolbar/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/searchbar/toolbar/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/searchbar/toolbar/javascript.md b/static/usage/searchbar/toolbar/javascript.md
new file mode 100644
index 00000000000..7b0f96159c5
--- /dev/null
+++ b/static/usage/searchbar/toolbar/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Searchbar
+    </ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/searchbar/toolbar/react.md b/static/usage/searchbar/toolbar/react.md
new file mode 100644
index 00000000000..2b15506483d
--- /dev/null
+++ b/static/usage/searchbar/toolbar/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>
+          Searchbar
+        </IonTitle>
+      </IonToolbar>
+      <IonToolbar>
+        <IonSearchbar></IonSearchbar>
+      </IonToolbar>
+    </IonHeader>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/searchbar/toolbar/vue.md b/static/usage/searchbar/toolbar/vue.md
new file mode 100644
index 00000000000..ff2d4fdd95e
--- /dev/null
+++ b/static/usage/searchbar/toolbar/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>
+        Searchbar
+      </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>
+```

From 34527334cfe4deb7d44c323012fe34fa451c1c84 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 16:30:10 -0400
Subject: [PATCH 059/469] docs(list): add component playgrounds (#2557)

---
 docs/api/list.md                      | 410 +-------------------------
 static/usage/list/basic/angular.md    |  19 ++
 static/usage/list/basic/demo.html     |  46 +++
 static/usage/list/basic/index.md      |   8 +
 static/usage/list/basic/javascript.md |  19 ++
 static/usage/list/basic/react.md      |  27 ++
 static/usage/list/basic/vue.md        |  30 ++
 static/usage/list/inset/angular.md    |  19 ++
 static/usage/list/inset/demo.html     |  51 ++++
 static/usage/list/inset/index.md      |   8 +
 static/usage/list/inset/javascript.md |  19 ++
 static/usage/list/inset/react.md      |  27 ++
 static/usage/list/inset/vue.md        |  30 ++
 static/usage/list/lines/angular.md    |  37 +++
 static/usage/list/lines/demo.html     |  66 +++++
 static/usage/list/lines/index.md      |   8 +
 static/usage/list/lines/javascript.md |  37 +++
 static/usage/list/lines/react.md      |  47 +++
 static/usage/list/lines/vue.md        |  48 +++
 19 files changed, 560 insertions(+), 396 deletions(-)
 create mode 100644 static/usage/list/basic/angular.md
 create mode 100644 static/usage/list/basic/demo.html
 create mode 100644 static/usage/list/basic/index.md
 create mode 100644 static/usage/list/basic/javascript.md
 create mode 100644 static/usage/list/basic/react.md
 create mode 100644 static/usage/list/basic/vue.md
 create mode 100644 static/usage/list/inset/angular.md
 create mode 100644 static/usage/list/inset/demo.html
 create mode 100644 static/usage/list/inset/index.md
 create mode 100644 static/usage/list/inset/javascript.md
 create mode 100644 static/usage/list/inset/react.md
 create mode 100644 static/usage/list/inset/vue.md
 create mode 100644 static/usage/list/lines/angular.md
 create mode 100644 static/usage/list/lines/demo.html
 create mode 100644 static/usage/list/lines/index.md
 create mode 100644 static/usage/list/lines/javascript.md
 create mode 100644 static/usage/list/lines/react.md
 create mode 100644 static/usage/list/lines/vue.md

diff --git a/docs/api/list.md b/docs/api/list.md
index 1b2d149d4a3..6114ac31f69 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-list"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/list/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/list/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -32,411 +25,36 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
 
-Lists are made up of multiple rows of items which can contain text, buttons, toggles,
+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 items within the list, and deleting items.
-
-
-
-
-## 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
-<!-- List of Text Items -->
-<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>
-
-<!-- List of Input Items -->
-<ion-list>
-  <ion-item>
-    <ion-label>Input</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label>Toggle</ion-label>
-    <ion-toggle slot="end"></ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-label>Radio</ion-label>
-    <ion-radio slot="end"></ion-radio>
-  </ion-item>
-  <ion-item>
-    <ion-label>Checkbox</ion-label>
-    <ion-checkbox slot="start"></ion-checkbox>
-  </ion-item>
-</ion-list>
-
-<!-- List of Sliding Items -->
-<ion-list>
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>Item</ion-label>
-    </ion-item>
-    <ion-item-options side="end">
-      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>Item</ion-label>
-    </ion-item>
-    <ion-item-options side="end">
-      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-</ion-list>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- List of Text Items -->
-<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>
-
-<!-- List of Input Items -->
-<ion-list>
-  <ion-item>
-    <ion-label>Input</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label>Toggle</ion-label>
-    <ion-toggle slot="end"></ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-label>Radio</ion-label>
-    <ion-radio slot="end"></ion-radio>
-  </ion-item>
-  <ion-item>
-    <ion-label>Checkbox</ion-label>
-    <ion-checkbox slot="start"></ion-checkbox>
-  </ion-item>
-</ion-list>
-
-<!-- List of Sliding Items -->
-<ion-list>
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>Item</ion-label>
-    </ion-item>
-    <ion-item-options side="end">
-      <ion-item-option onClick="unread(item)">Unread</ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-
-  <ion-item-sliding>
-    <ion-item>
-      <ion-label>Item</ion-label>
-    </ion-item>
-    <ion-item-options side="end">
-      <ion-item-option onClick="unread(item)">Unread</ion-item-option>
-    </ion-item-options>
-  </ion-item-sliding>
-</ion-list>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';
-
-export const ListExample: React.FC = () => (
-  <IonContent>
-    {/*-- List of Text Items --*/}
-    <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>
-
-    {/*-- List of Input Items --*/}
-    <IonList>
-      <IonItem>
-        <IonLabel>Input</IonLabel>
-        <IonInput></IonInput>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Toggle</IonLabel>
-        <IonToggle slot="end"></IonToggle>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Radio</IonLabel>
-        <IonRadio slot="end"></IonRadio>
-      </IonItem>
-      <IonItem>
-        <IonLabel>Checkbox</IonLabel>
-        <IonCheckbox slot="start" />
-      </IonItem>
-    </IonList>
-
-    {/*-- List of Sliding Items --*/}
-    <IonList>
-      <IonItemSliding>
-        <IonItem>
-          <IonLabel>Item</IonLabel>
-        </IonItem>
-        <IonItemOptions side="end">
-          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
-        </IonItemOptions>
-      </IonItemSliding>
-
-      <IonItemSliding>
-        <IonItem>
-          <IonLabel>Item</IonLabel>
-        </IonItem>
-        <IonItemOptions side="end">
-          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
-        </IonItemOptions>
-      </IonItemSliding>
-    </IonList>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'list-example',
-  styleUrl: 'list-example.css'
-})
-export class ListExample {
-  unread(ev: Event) {
-    console.log('Item is unread', ev);
-  }
-
-  render() {
-    return [
-      // List of Text Items
-      <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>,
+Lists support several interactions including swiping items to reveal options, dragging to [reorder](./reorder) items within the list, and deleting items.
 
-      // List of Input Items
-      <ion-list>
-        <ion-item>
-          <ion-label>Input</ion-label>
-          <ion-input></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle slot="end"></ion-toggle>
-        </ion-item>
-        <ion-item>
-          <ion-label>Radio</ion-label>
-          <ion-radio slot="end"></ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-label>Checkbox</ion-label>
-          <ion-checkbox slot="start"></ion-checkbox>
-        </ion-item>
-      </ion-list>,
+## Basic Usage
 
-      // List of Sliding Items
-      <ion-list>
-        <ion-item-sliding>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-          <ion-item-options side="end">
-            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
+import Basic from '@site/static/usage/list/basic/index.md';
 
-        <ion-item-sliding>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-          <ion-item-options side="end">
-            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
-      </ion-list>
-    ];
-  }
-}
-```
+<Basic />
 
 
-</TabItem>
+## 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.
 
-<TabItem value="vue">
+import Inset from '@site/static/usage/list/inset/index.md';
 
-```html
-<template>
-  <!-- List of Text Items -->
-  <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>
+<Inset />
 
-  <!-- List of Input Items -->
-  <ion-list>
-    <ion-item>
-      <ion-label>Input</ion-label>
-      <ion-input></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label>Toggle</ion-label>
-      <ion-toggle slot="end"></ion-toggle>
-    </ion-item>
-    <ion-item>
-      <ion-label>Radio</ion-label>
-      <ion-radio slot="end"></ion-radio>
-    </ion-item>
-    <ion-item>
-      <ion-label>Checkbox</ion-label>
-      <ion-checkbox slot="start"></ion-checkbox>
-    </ion-item>
-  </ion-list>
 
-  <!-- List of Sliding Items -->
-  <ion-list>
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>Item</ion-label>
-      </ion-item>
-      <ion-item-options side="end">
-        <ion-item-option @click="unread(item)">Unread</ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
+## List Lines
 
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>Item</ion-label>
-      </ion-item>
-      <ion-item-options side="end">
-        <ion-item-option @click="unread(item)">Unread</ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
-</template>
+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.
 
-<script>
-import { 
-  IonCheckbox, 
-  IonInput, 
-  IonItem, 
-  IonItemOption, 
-  IonItemOptions, 
-  IonItemSliding, 
-  IonList, 
-  IonLabel, 
-  IonRadio, 
-  IonToggle 
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
+import Lines from '@site/static/usage/list/lines/index.md';
 
-export default defineComponent({
-  components: { 
-    IonCheckbox, 
-    IonInput, 
-    IonItem, 
-    IonItemOption, 
-    IonItemOptions, 
-    IonItemSliding, 
-    IonList, 
-    IonLabel, 
-    IonRadio, 
-    IonToggle 
-  }
-});
-</script>
-```
+<Lines />
 
-</TabItem>
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -454,4 +72,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/list/basic/angular.md b/static/usage/list/basic/angular.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/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/list/basic/demo.html b/static/usage/list/basic/demo.html
new file mode 100644
index 00000000000..cb78c57fc8f
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list/basic/index.md b/static/usage/list/basic/index.md
new file mode 100644
index 00000000000..e7435fbf0b2
--- /dev/null
+++ b/static/usage/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/list/basic/demo.html" size="300px" />
diff --git a/static/usage/list/basic/javascript.md b/static/usage/list/basic/javascript.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/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/list/basic/react.md b/static/usage/list/basic/react.md
new file mode 100644
index 00000000000..51b30335ccd
--- /dev/null
+++ b/static/usage/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/list/basic/vue.md b/static/usage/list/basic/vue.md
new file mode 100644
index 00000000000..4f3886c0719
--- /dev/null
+++ b/static/usage/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/list/inset/angular.md b/static/usage/list/inset/angular.md
new file mode 100644
index 00000000000..d88d56e77f1
--- /dev/null
+++ b/static/usage/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/list/inset/demo.html b/static/usage/list/inset/demo.html
new file mode 100644
index 00000000000..a958392cb47
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list/inset/index.md b/static/usage/list/inset/index.md
new file mode 100644
index 00000000000..812c4a1111e
--- /dev/null
+++ b/static/usage/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/list/inset/demo.html" size="350px" />
diff --git a/static/usage/list/inset/javascript.md b/static/usage/list/inset/javascript.md
new file mode 100644
index 00000000000..a5c6e28dd38
--- /dev/null
+++ b/static/usage/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/list/inset/react.md b/static/usage/list/inset/react.md
new file mode 100644
index 00000000000..d9f00d8a4f9
--- /dev/null
+++ b/static/usage/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/list/inset/vue.md b/static/usage/list/inset/vue.md
new file mode 100644
index 00000000000..15d801c7eae
--- /dev/null
+++ b/static/usage/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/list/lines/angular.md b/static/usage/list/lines/angular.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/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/list/lines/demo.html b/static/usage/list/lines/demo.html
new file mode 100644
index 00000000000..ae69603b5d4
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list/lines/index.md b/static/usage/list/lines/index.md
new file mode 100644
index 00000000000..b86eb624e06
--- /dev/null
+++ b/static/usage/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/list/lines/demo.html" size="500px" />
diff --git a/static/usage/list/lines/javascript.md b/static/usage/list/lines/javascript.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/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/list/lines/react.md b/static/usage/list/lines/react.md
new file mode 100644
index 00000000000..16754ad804b
--- /dev/null
+++ b/static/usage/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/list/lines/vue.md b/static/usage/list/lines/vue.md
new file mode 100644
index 00000000000..914ba88d980
--- /dev/null
+++ b/static/usage/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>
+```

From b2d88ef1209f050e829e8db01faa84a3471bffa5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 16:31:47 -0400
Subject: [PATCH 060/469] docs(list-header): add component playgrounds (#2559)

---
 docs/api/list-header.md                       | 450 ++----------------
 static/usage/list-header/basic/angular.md     |  22 +
 static/usage/list-header/basic/demo.html      |  49 ++
 static/usage/list-header/basic/index.md       |   8 +
 static/usage/list-header/basic/javascript.md  |  22 +
 static/usage/list-header/basic/react.md       |  30 ++
 static/usage/list-header/basic/vue.md         |  33 ++
 static/usage/list-header/buttons/angular.md   |  23 +
 static/usage/list-header/buttons/demo.html    |  50 ++
 static/usage/list-header/buttons/index.md     |   8 +
 .../usage/list-header/buttons/javascript.md   |  23 +
 static/usage/list-header/buttons/react.md     |  31 ++
 static/usage/list-header/buttons/vue.md       |  34 ++
 static/usage/list-header/lines/angular.md     |  22 +
 static/usage/list-header/lines/demo.html      |  64 +++
 static/usage/list-header/lines/index.md       |   8 +
 static/usage/list-header/lines/javascript.md  |  22 +
 static/usage/list-header/lines/react.md       |  30 ++
 static/usage/list-header/lines/vue.md         |  33 ++
 .../list-header/theming/colors/angular.md     |  32 ++
 .../list-header/theming/colors/demo.html      |  59 +++
 .../usage/list-header/theming/colors/index.md |   8 +
 .../list-header/theming/colors/javascript.md  |  32 ++
 .../usage/list-header/theming/colors/react.md |  42 ++
 .../usage/list-header/theming/colors/vue.md   |  43 ++
 .../angular/example_component_css.md          |  10 +
 .../angular/example_component_html.md         |   5 +
 .../theming/css-properties/demo.html          |  37 ++
 .../theming/css-properties/index.md           |  32 ++
 .../theming/css-properties/javascript.md      |  16 +
 .../theming/css-properties/react/main_css.md  |  10 +
 .../theming/css-properties/react/main_tsx.md  |  15 +
 .../list-header/theming/css-properties/vue.md |  27 ++
 33 files changed, 922 insertions(+), 408 deletions(-)
 create mode 100644 static/usage/list-header/basic/angular.md
 create mode 100644 static/usage/list-header/basic/demo.html
 create mode 100644 static/usage/list-header/basic/index.md
 create mode 100644 static/usage/list-header/basic/javascript.md
 create mode 100644 static/usage/list-header/basic/react.md
 create mode 100644 static/usage/list-header/basic/vue.md
 create mode 100644 static/usage/list-header/buttons/angular.md
 create mode 100644 static/usage/list-header/buttons/demo.html
 create mode 100644 static/usage/list-header/buttons/index.md
 create mode 100644 static/usage/list-header/buttons/javascript.md
 create mode 100644 static/usage/list-header/buttons/react.md
 create mode 100644 static/usage/list-header/buttons/vue.md
 create mode 100644 static/usage/list-header/lines/angular.md
 create mode 100644 static/usage/list-header/lines/demo.html
 create mode 100644 static/usage/list-header/lines/index.md
 create mode 100644 static/usage/list-header/lines/javascript.md
 create mode 100644 static/usage/list-header/lines/react.md
 create mode 100644 static/usage/list-header/lines/vue.md
 create mode 100644 static/usage/list-header/theming/colors/angular.md
 create mode 100644 static/usage/list-header/theming/colors/demo.html
 create mode 100644 static/usage/list-header/theming/colors/index.md
 create mode 100644 static/usage/list-header/theming/colors/javascript.md
 create mode 100644 static/usage/list-header/theming/colors/react.md
 create mode 100644 static/usage/list-header/theming/colors/vue.md
 create mode 100644 static/usage/list-header/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/list-header/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/list-header/theming/css-properties/demo.html
 create mode 100644 static/usage/list-header/theming/css-properties/index.md
 create mode 100644 static/usage/list-header/theming/css-properties/javascript.md
 create mode 100644 static/usage/list-header/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/list-header/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/list-header/theming/css-properties/vue.md

diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 117c4c1ad44..5337c8ecff5 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-list-header"
-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/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';
@@ -19,408 +14,47 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-ListHeader a header component for a list.
-Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.
-
-
-
-
-## 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 List Header -->
-<ion-list-header>
-  <ion-label>List Header</ion-label>
-</ion-list-header>
-
-<!-- List Header with Button -->
-<ion-list-header>
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-
-<!-- List Header with Outline Button -->
-<ion-list-header>
-  <ion-label>New This Week</ion-label>
-  <ion-button fill="outline">See All</ion-button>
-</ion-list-header>
-
-<!-- List Header Full Lines -->
-<ion-list-header lines="full">
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-
-<!-- List Header Inset Lines -->
-<ion-list-header lines="inset">
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-
-<!-- List Headers in Lists -->
-<ion-list>
-  <ion-list-header lines="inset">
-    <ion-label>Recent</ion-label>
-    <ion-button>Clear</ion-button>
-  </ion-list-header>
-  <ion-item lines="none">
-    <ion-label color="primary">
-      <h1>I got you babe</h1>
-    </ion-label>
-  </ion-item>
-</ion-list>
-
-<ion-list>
-  <ion-list-header lines="inset">
-    <ion-label>Trending</ion-label>
-  </ion-list-header>
-  <ion-item>
-    <ion-label color="primary">
-      <h1>harry styles</h1>
-    </ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label color="primary">
-      <h1>christmas</h1>
-    </ion-label>
-  </ion-item>
-  <ion-item lines="none">
-    <ion-label color="primary">
-      <h1>falling</h1>
-    </ion-label>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default List Header -->
-<ion-list-header>
-  <ion-label>List Header</ion-label>
-</ion-list-header>
-
-<!-- List Header with Button -->
-<ion-list-header>
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-
-<!-- List Header with Outline Button -->
-<ion-list-header>
-  <ion-label>New This Week</ion-label>
-  <ion-button fill="outline">See All</ion-button>
-</ion-list-header>
-
-<!-- List Header Full Lines -->
-<ion-list-header lines="full">
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-
-<!-- List Header Inset Lines -->
-<ion-list-header lines="inset">
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-
-<!-- List Headers in Lists -->
-<ion-list>
-  <ion-list-header lines="inset">
-    <ion-label>Recent</ion-label>
-    <ion-button>Clear</ion-button>
-  </ion-list-header>
-  <ion-item lines="none">
-    <ion-label color="primary">
-      <h1>I got you babe</h1>
-    </ion-label>
-  </ion-item>
-</ion-list>
-
-<ion-list>
-  <ion-list-header lines="inset">
-    <ion-label>Trending</ion-label>
-  </ion-list-header>
-  <ion-item>
-    <ion-label color="primary">
-      <h1>harry styles</h1>
-    </ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label color="primary">
-      <h1>christmas</h1>
-    </ion-label>
-  </ion-item>
-  <ion-item lines="none">
-    <ion-label color="primary">
-      <h1>falling</h1>
-    </ion-label>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
-
-export const ListHeaderExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default List Header --*/}
-    <IonListHeader>
-      <IonLabel>List Header</IonLabel>
-    </IonListHeader>
-
-    {/*-- List Header with Button --*/}
-    <IonListHeader>
-      <IonLabel>New This Week</IonLabel>
-      <IonButton>See All</IonButton>
-    </IonListHeader>
-
-    {/*-- List Header with Outline Button --*/}
-    <IonListHeader>
-      <IonLabel>New This Week</IonLabel>
-      <IonButton fill="outline">See All</IonButton>
-    </IonListHeader>
-
-    {/*-- List Header Full Lines --*/}
-    <IonListHeader lines="full">
-      <IonLabel>New This Week</IonLabel>
-      <IonButton>See All</IonButton>
-    </IonListHeader>
-
-    {/*-- List Header Inset Lines --*/}
-    <IonListHeader lines="inset">
-      <IonLabel>New This Week</IonLabel>
-      <IonButton>See All</IonButton>
-    </IonListHeader>
-
-    {/*-- List Headers in Lists --*/}
-    <IonList>
-      <IonListHeader lines="inset">
-        <IonLabel>Recent</IonLabel>
-        <IonButton>Clear</IonButton>
-      </IonListHeader>
-      <IonItem lines="none">
-        <IonLabel color="primary">
-          <h1>I got you babe</h1>
-        </IonLabel>
-      </IonItem>
-    </IonList>
-
-    <IonList>
-      <IonListHeader lines="inset">
-        <IonLabel>Trending</IonLabel>
-      </IonListHeader>
-      <IonItem>
-        <IonLabel color="primary">
-          <h1>harry styles</h1>
-        </IonLabel>
-      </IonItem>
-      <IonItem>
-        <IonLabel color="primary">
-          <h1>christmas</h1>
-        </IonLabel>
-      </IonItem>
-      <IonItem lines="none">
-        <IonLabel color="primary">
-          <h1>falling</h1>
-        </IonLabel>
-      </IonItem>
-    </IonList>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'list-header-example',
-  styleUrl: 'list-header-example.css'
-})
-export class ListHeaderExample {
-  render() {
-    return [
-      // Default List Header
-      <ion-list-header>
-        <ion-label>List Header</ion-label>
-      </ion-list-header>,
-
-      // List Header with Button
-      <ion-list-header>
-        <ion-label>New This Week</ion-label>
-        <ion-button>See All</ion-button>
-      </ion-list-header>,
-
-      // List Header with Outline Button
-      <ion-list-header>
-        <ion-label>New This Week</ion-label>
-        <ion-button fill="outline">See All</ion-button>
-      </ion-list-header>,
-
-      // List Header Full Lines
-      <ion-list-header lines="full">
-        <ion-label>New This Week</ion-label>
-        <ion-button>See All</ion-button>
-      </ion-list-header>,
-
-      // List Header Inset Lines
-      <ion-list-header lines="inset">
-        <ion-label>New This Week</ion-label>
-        <ion-button>See All</ion-button>
-      </ion-list-header>,
-
-      // List Headers in Lists
-      <ion-list>
-        <ion-list-header lines="inset">
-          <ion-label>Recent</ion-label>
-          <ion-button>Clear</ion-button>
-        </ion-list-header>
-        <ion-item lines="none">
-          <ion-label color="primary">
-            <h1>I got you babe</h1>
-          </ion-label>
-        </ion-item>
-      </ion-list>,
-
-      <ion-list>
-        <ion-list-header lines="inset">
-          <ion-label>Trending</ion-label>
-        </ion-list-header>
-        <ion-item>
-          <ion-label color="primary">
-            <h1>harry styles</h1>
-          </ion-label>
-        </ion-item>
-        <ion-item>
-          <ion-label color="primary">
-            <h1>christmas</h1>
-          </ion-label>
-        </ion-item>
-        <ion-item lines="none">
-          <ion-label color="primary">
-            <h1>falling</h1>
-          </ion-label>
-        </ion-item>
-      </ion-list>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default List Header -->
-  <ion-list-header>
-    <ion-label>List Header</ion-label>
-  </ion-list-header>
-
-  <!-- List Header with Button -->
-  <ion-list-header>
-    <ion-label>New This Week</ion-label>
-    <ion-button>See All</ion-button>
-  </ion-list-header>
-
-  <!-- List Header with Outline Button -->
-  <ion-list-header>
-    <ion-label>New This Week</ion-label>
-    <ion-button fill="outline">See All</ion-button>
-  </ion-list-header>
-
-  <!-- List Header Full Lines -->
-  <ion-list-header lines="full">
-    <ion-label>New This Week</ion-label>
-    <ion-button>See All</ion-button>
-  </ion-list-header>
-
-  <!-- List Header Inset Lines -->
-  <ion-list-header lines="inset">
-    <ion-label>New This Week</ion-label>
-    <ion-button>See All</ion-button>
-  </ion-list-header>
-
-  <!-- List Headers in Lists -->
-  <ion-list>
-    <ion-list-header lines="inset">
-      <ion-label>Recent</ion-label>
-      <ion-button>Clear</ion-button>
-    </ion-list-header>
-    <ion-item lines="none">
-      <ion-label color="primary">
-        <h1>I got you babe</h1>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-
-  <ion-list>
-    <ion-list-header lines="inset">
-      <ion-label>Trending</ion-label>
-    </ion-list-header>
-    <ion-item>
-      <ion-label color="primary">
-        <h1>harry styles</h1>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label color="primary">
-        <h1>christmas</h1>
-      </ion-label>
-    </ion-item>
-    <ion-item lines="none">
-      <ion-label color="primary">
-        <h1>falling</h1>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</template>
-
-<script>
-import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonItem, IonLabel, IonList, IonListHeader }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
+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/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/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/list-header/lines/index.md';
+
+<Lines />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/list-header/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/list-header/theming/css-properties/index.md';
+
+<CSSProps />
+
+
 
 ## Properties
 <Props />
@@ -438,4 +72,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/list-header/basic/angular.md b/static/usage/list-header/basic/angular.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/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/list-header/basic/demo.html b/static/usage/list-header/basic/demo.html
new file mode 100644
index 00000000000..a0cd41282f7
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list-header/basic/index.md b/static/usage/list-header/basic/index.md
new file mode 100644
index 00000000000..8fc768f26ca
--- /dev/null
+++ b/static/usage/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/list-header/basic/demo.html" size="325px" />
diff --git a/static/usage/list-header/basic/javascript.md b/static/usage/list-header/basic/javascript.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/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/list-header/basic/react.md b/static/usage/list-header/basic/react.md
new file mode 100644
index 00000000000..b48a05b05da
--- /dev/null
+++ b/static/usage/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/list-header/basic/vue.md b/static/usage/list-header/basic/vue.md
new file mode 100644
index 00000000000..b7d6980e400
--- /dev/null
+++ b/static/usage/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/list-header/buttons/angular.md b/static/usage/list-header/buttons/angular.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/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/list-header/buttons/demo.html b/static/usage/list-header/buttons/demo.html
new file mode 100644
index 00000000000..ebc5d0916f9
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list-header/buttons/index.md b/static/usage/list-header/buttons/index.md
new file mode 100644
index 00000000000..c19a57712fe
--- /dev/null
+++ b/static/usage/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/list-header/buttons/demo.html" size="325px" />
diff --git a/static/usage/list-header/buttons/javascript.md b/static/usage/list-header/buttons/javascript.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/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/list-header/buttons/react.md b/static/usage/list-header/buttons/react.md
new file mode 100644
index 00000000000..d5d45b36ab0
--- /dev/null
+++ b/static/usage/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/list-header/buttons/vue.md b/static/usage/list-header/buttons/vue.md
new file mode 100644
index 00000000000..704e94f057a
--- /dev/null
+++ b/static/usage/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/list-header/lines/angular.md b/static/usage/list-header/lines/angular.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/list-header/lines/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/list-header/lines/demo.html b/static/usage/list-header/lines/demo.html
new file mode 100644
index 00000000000..08922976061
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list-header/lines/index.md b/static/usage/list-header/lines/index.md
new file mode 100644
index 00000000000..076b6bed04a
--- /dev/null
+++ b/static/usage/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/list-header/lines/demo.html" size="500px" />
diff --git a/static/usage/list-header/lines/javascript.md b/static/usage/list-header/lines/javascript.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/list-header/lines/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/list-header/lines/react.md b/static/usage/list-header/lines/react.md
new file mode 100644
index 00000000000..b48a05b05da
--- /dev/null
+++ b/static/usage/list-header/lines/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/list-header/lines/vue.md b/static/usage/list-header/lines/vue.md
new file mode 100644
index 00000000000..b7d6980e400
--- /dev/null
+++ b/static/usage/list-header/lines/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/list-header/theming/colors/angular.md b/static/usage/list-header/theming/colors/angular.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/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/list-header/theming/colors/demo.html b/static/usage/list-header/theming/colors/demo.html
new file mode 100644
index 00000000000..59e06eb1545
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list-header/theming/colors/index.md b/static/usage/list-header/theming/colors/index.md
new file mode 100644
index 00000000000..2874dbe5ecf
--- /dev/null
+++ b/static/usage/list-header/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/list-header/theming/colors/demo.html" size="650px" />
diff --git a/static/usage/list-header/theming/colors/javascript.md b/static/usage/list-header/theming/colors/javascript.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/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/list-header/theming/colors/react.md b/static/usage/list-header/theming/colors/react.md
new file mode 100644
index 00000000000..f00ce7c16d1
--- /dev/null
+++ b/static/usage/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/list-header/theming/colors/vue.md b/static/usage/list-header/theming/colors/vue.md
new file mode 100644
index 00000000000..b20672dd78f
--- /dev/null
+++ b/static/usage/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/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/list-header/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/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/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/list-header/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..0bf6d9fa3fe
--- /dev/null
+++ b/static/usage/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/list-header/theming/css-properties/demo.html b/static/usage/list-header/theming/css-properties/demo.html
new file mode 100644
index 00000000000..1f0d1df199f
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/list-header/theming/css-properties/index.md b/static/usage/list-header/theming/css-properties/index.md
new file mode 100644
index 00000000000..0e474c6fd25
--- /dev/null
+++ b/static/usage/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/list-header/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/list-header/theming/css-properties/javascript.md b/static/usage/list-header/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5ac75dc4f0f
--- /dev/null
+++ b/static/usage/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/list-header/theming/css-properties/react/main_css.md b/static/usage/list-header/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/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/list-header/theming/css-properties/react/main_tsx.md b/static/usage/list-header/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..169485b3365
--- /dev/null
+++ b/static/usage/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/list-header/theming/css-properties/vue.md b/static/usage/list-header/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c56d482c2a2
--- /dev/null
+++ b/static/usage/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>
+```

From 0734c50182c207392de69ddd132b66daf9ca85bc Mon Sep 17 00:00:00 2001
From: Rowan de Graaf <rowandegraaf@gmail.com>
Date: Mon, 19 Sep 2022 22:54:04 +0200
Subject: [PATCH 061/469] docs(developing): update ios steps for capacitor
 (#2202)

---
 docs/developing/ios.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/developing/ios.md b/docs/developing/ios.md
index fb23c7b1b0f..553c3580655 100644
--- a/docs/developing/ios.md
+++ b/docs/developing/ios.md
@@ -114,6 +114,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss
 
    ```shell
    $ ionic capacitor copy ios
+   $ ionic capacitor update
    ```
 
    For Cordova, run the following:

From 57b0409732d997a48cec6ea952f80c0ed1cc96af Mon Sep 17 00:00:00 2001
From: reslear <reslear@gmail.com>
Date: Mon, 19 Sep 2022 17:18:06 -0400
Subject: [PATCH 062/469] docs(vue): update slides docs to use correct property
 (#2045)

---
 docs/vue/slides.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 2de45434dd9..306b80ebf27 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -419,7 +419,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu
 | 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.                                          |
+| 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.                                                 |

From e2b8ad876185073b52cfdad9fc4efd25f031936e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 18:25:39 -0400
Subject: [PATCH 063/469] docs(migration): update rxjs path (#2560)

Co-authored-by: Andrew Martin <andrew.martin@ncl.ac.uk>
---
 docs/reference/migration.md                      | 2 +-
 versioned_docs/version-v5/reference/migration.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/migration.md b/docs/reference/migration.md
index b11708193f8..bb25242380d 100644
--- a/docs/reference/migration.md
+++ b/docs/reference/migration.md
@@ -175,7 +175,7 @@ See the following `ionic.config.json` as an example:
 
 ## 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/master/docs_app/content/guide/v6/migration.md" target="_blank">RxJS Migration Guide</a> for details.
+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
 
diff --git a/versioned_docs/version-v5/reference/migration.md b/versioned_docs/version-v5/reference/migration.md
index 9064bb7e142..bc7d50c7224 100644
--- a/versioned_docs/version-v5/reference/migration.md
+++ b/versioned_docs/version-v5/reference/migration.md
@@ -164,7 +164,7 @@ See the following `ionic.config.json` as an example:
 
 ## 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/master/docs_app/content/guide/v6/migration.md" target="_blank">RxJS Migration Guide</a> for details.
+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
 

From 2e47a4b435063aa08a0d7a2308173094dc925321 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 18:31:03 -0400
Subject: [PATCH 064/469] docs(navigation): fix typo (#2561)

Co-authored-by: Andrew Royappa <royappa@spiralfx.com>
---
 docs/angular/navigation.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md
index 2b7b3635d44..0c249d9d055 100644
--- a/docs/angular/navigation.md
+++ b/docs/angular/navigation.md
@@ -195,7 +195,7 @@ The following is an example of linear routing in a mobile app:
     'display': 'flex'
   }}
   width="400"
-  src={useBaseUrl('video/linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -221,7 +221,7 @@ The following is an example of non-linear routing:
     'display': 'flex'
   }}
   width="400"
-  src={useBaseUrl('video/non-linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -335,7 +335,7 @@ const routes: Routes = [
 ];
 ```
 
-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 followed:
+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>
@@ -355,7 +355,7 @@ If you've built apps with Ionic before, this should feel familiar. We create a `
 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
@@ -436,7 +436,7 @@ The example below shows how the iOS App Store app handles presenting an "Account
     'display': 'flex'
   }}
   width="400"
-  src={useBaseUrl('video/tabs-account-demo.mp4')} 
+  src={useBaseUrl('video/tabs-account-demo.mp4')}
   controls
 ></video>
 

From 15577f2157018d95cd0b381e57c76e642539bd6f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 19 Sep 2022 18:34:15 -0400
Subject: [PATCH 065/469] docs(card): remove extra comma in demo (#2562)

Co-authored-by: hereafter <hereafter.tu@gmail.com>
---
 static/demos/api/card/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/demos/api/card/index.html b/static/demos/api/card/index.html
index 9506ea79422..03bad514d69 100644
--- a/static/demos/api/card/index.html
+++ b/static/demos/api/card/index.html
@@ -20,7 +20,7 @@
         <ion-toolbar>
           <ion-title>Card</ion-title>
         </ion-toolbar> </ion-header
-      >,
+      >
       <ion-content fullscreen>
         <ion-card>
           <img src="./madison.jpg" />

From fd281e42bbe5c94c43b5a2cc133b4a7c3620eaf5 Mon Sep 17 00:00:00 2001
From: RichardJECooke <richard.j.e.cooke@gmail.com>
Date: Tue, 20 Sep 2022 05:56:57 +0200
Subject: [PATCH 066/469] Fix Capacitor link (#2545)

---
 docs/vue/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vue/overview.md b/docs/vue/overview.md
index d5b68367f49..a428c521202 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -27,7 +27,7 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani
 
 ## Native Tooling
 
-[Capacitor](https://capacitor.ionicframework.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
+[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://capacitor.ionicframework.com/docs/cordova).
 

From 67d4ba4632933b4034c853ca6c98e656f3e200be Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Mon, 19 Sep 2022 22:04:01 -0600
Subject: [PATCH 067/469] chore(): capacitor.ionicframework.com ->
 capacitorjs.com (#2563)

---
 docs/angular/your-first-app.md                   |  4 ++--
 docs/angular/your-first-app/2-taking-photos.md   |  2 +-
 docs/angular/your-first-app/3-saving-photos.md   |  2 +-
 docs/angular/your-first-app/4-loading-photos.md  |  2 +-
 .../angular/your-first-app/6-deploying-mobile.md |  4 ++--
 docs/angular/your-first-app/8-distribute.md      |  2 +-
 docs/core-concepts/fundamentals.md               |  2 +-
 .../what-are-progressive-web-apps.md             |  2 +-
 docs/developing/keyboard.md                      |  4 ++--
 docs/native-community.md                         |  4 ++--
 docs/react.md                                    |  2 +-
 docs/react/overview.md                           |  4 ++--
 docs/react/quickstart.md                         |  8 ++++----
 docs/react/your-first-app.md                     |  6 +++---
 docs/react/your-first-app/2-taking-photos.md     |  2 +-
 docs/react/your-first-app/3-saving-photos.md     |  2 +-
 docs/react/your-first-app/4-loading-photos.md    |  2 +-
 docs/react/your-first-app/6-deploying-mobile.md  |  4 ++--
 docs/react/your-first-app/8-distribute.md        |  2 +-
 docs/reference/glossary.md                       |  8 +++-----
 docs/reference/support.md                        | 16 ++++++++--------
 docs/vue/overview.md                             |  2 +-
 docs/vue/quickstart.md                           |  8 ++++----
 docs/vue/your-first-app.md                       |  4 ++--
 docs/vue/your-first-app/2-taking-photos.md       |  2 +-
 docs/vue/your-first-app/3-saving-photos.md       |  2 +-
 docs/vue/your-first-app/4-loading-photos.md      |  2 +-
 docs/vue/your-first-app/6-deploying-mobile.md    |  4 ++--
 docs/vue/your-first-app/8-distribute.md          |  2 +-
 scripts/data/cli.json                            |  2 +-
 .../version-v5/angular/your-first-app.md         |  4 ++--
 .../angular/your-first-app/2-taking-photos.md    |  2 +-
 .../angular/your-first-app/3-saving-photos.md    |  2 +-
 .../angular/your-first-app/4-loading-photos.md   |  2 +-
 .../angular/your-first-app/6-deploying-mobile.md |  4 ++--
 .../angular/your-first-app/7-live-reload.md      |  2 +-
 .../version-v5/cli/commands/capacitor-build.md   |  2 +-
 .../version-v5/core-concepts/fundamentals.md     |  2 +-
 .../what-are-progressive-web-apps.md             |  2 +-
 versioned_docs/version-v5/developing/keyboard.md |  4 ++--
 versioned_docs/version-v5/native-community.md    |  4 ++--
 versioned_docs/version-v5/react.md               |  2 +-
 versioned_docs/version-v5/react/overview.md      |  4 ++--
 versioned_docs/version-v5/react/quickstart.md    |  8 ++++----
 .../version-v5/react/your-first-app.md           |  4 ++--
 .../react/your-first-app/2-taking-photos.md      |  2 +-
 .../react/your-first-app/3-saving-photos.md      |  2 +-
 .../react/your-first-app/4-loading-photos.md     |  2 +-
 .../react/your-first-app/6-deploying-mobile.md   |  4 ++--
 .../react/your-first-app/7-live-reload.md        |  2 +-
 versioned_docs/version-v5/reference/glossary.md  |  8 +++-----
 versioned_docs/version-v5/reference/support.md   | 12 ++++++------
 versioned_docs/version-v5/vue/overview.md        |  4 ++--
 versioned_docs/version-v5/vue/quickstart.md      |  8 ++++----
 versioned_docs/version-v5/vue/your-first-app.md  |  4 ++--
 .../vue/your-first-app/2-taking-photos.md        |  2 +-
 .../vue/your-first-app/3-saving-photos.md        |  2 +-
 .../vue/your-first-app/4-loading-photos.md       |  2 +-
 .../vue/your-first-app/6-deploying-mobile.md     |  4 ++--
 .../vue/your-first-app/7-live-reload.md          |  2 +-
 60 files changed, 108 insertions(+), 112 deletions(-)

diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md
index 5cb290f4c1c..3a6f63286ef 100644
--- a/docs/angular/your-first-app.md
+++ b/docs/angular/your-first-app.md
@@ -35,8 +35,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
+- 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).
 
diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md
index eab0e8d1b02..73b6d20533f 100644
--- a/docs/angular/your-first-app/2-taking-photos.md
+++ b/docs/angular/your-first-app/2-taking-photos.md
@@ -11,7 +11,7 @@ sidebar_label: Taking Photos
   />
 </head>
 
-Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitor.ionicframework.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).
+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
 
diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md
index 051e5fb3808..27109d61432 100644
--- a/docs/angular/your-first-app/3-saving-photos.md
+++ b/docs/angular/your-first-app/3-saving-photos.md
@@ -31,7 +31,7 @@ public async addNewToGallery() {
 }
 ```
 
-We’ll use the Capacitor [Filesystem API](https://capacitor.ionicframework.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.
+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) {
diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md
index 3c34b84f546..1e6896557cf 100644
--- a/docs/angular/your-first-app/4-loading-photos.md
+++ b/docs/angular/your-first-app/4-loading-photos.md
@@ -6,7 +6,7 @@ sidebar_label: Loading Photos
 
 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://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+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
 
diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md
index 9b6d503d51b..e30d8acd79d 100644
--- a/docs/angular/your-first-app/6-deploying-mobile.md
+++ b/docs/angular/your-first-app/6-deploying-mobile.md
@@ -15,7 +15,7 @@ Since we added Capacitor to our project when it was first created, there’s onl
 
 ## 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://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+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:
 
@@ -58,7 +58,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
 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://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+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)
 
diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.md
index 72f54278489..44b3781b476 100644
--- a/docs/angular/your-first-app/8-distribute.md
+++ b/docs/angular/your-first-app/8-distribute.md
@@ -95,6 +95,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 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://capacitor.ionicframework.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.
+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/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.md
index b576641bb3a..97a09499934 100644
--- a/docs/core-concepts/fundamentals.md
+++ b/docs/core-concepts/fundamentals.md
@@ -40,7 +40,7 @@ An amazing feature of apps built with web technologies (such as Ionic apps!) is
 
 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://capacitor.ionicframework.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.
+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
 
diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/docs/core-concepts/what-are-progressive-web-apps.md
index 1e3f34727b0..fe7e769ee68 100644
--- a/docs/core-concepts/what-are-progressive-web-apps.md
+++ b/docs/core-concepts/what-are-progressive-web-apps.md
@@ -18,7 +18,7 @@ title: Progressive Web Apps
 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://capacitor.ionicframework.com) to provide a multiple deploy targets for all your users.
+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.
diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md
index e839daaf9a5..6c166c9b11a 100644
--- a/docs/developing/keyboard.md
+++ b/docs/developing/keyboard.md
@@ -176,7 +176,7 @@ By default the keyboard theme is determined by the OS. For example, if dark mode
 
 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://capacitor.ionicframework.com/docs/apis/keyboard#keyboard-configuration-ios-only-" target="_blank">Capacitor Keyboard Documentation</a>.
+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
 
@@ -184,7 +184,7 @@ When running any kind of web based application, iOS will show an accessory bar a
 
 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://capacitor.ionicframework.com/docs/apis/keyboard#keyboard-configuration-ios-only-" target="_blank">Capacitor Keyboard Documentation</a>.
+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
 
diff --git a/docs/native-community.md b/docs/native-community.md
index f07d1e83f1c..0bd759f18e8 100644
--- a/docs/native-community.md
+++ b/docs/native-community.md
@@ -32,7 +32,7 @@ These docs are for apps built with Ionic Framework 4.0.0 and greater. For older
 
 ## Capacitor Support
 
-In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitor.ionicframework.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
+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
 
@@ -66,7 +66,7 @@ $ npm install @awesome-cordova-plugins/core
 </TabItem>
 <TabItem value="capacitor">
 
-For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
+For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins).
 
 ```shell
 // Install Ionic Native TypeScript wrapper
diff --git a/docs/react.md b/docs/react.md
index 2ab6b863a63..01dfbeddfd8 100644
--- a/docs/react.md
+++ b/docs/react.md
@@ -84,7 +84,7 @@ Compatible with React version 16.8 and above.
 
 ## More than mobile
 
-Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitor.ionicframework.com), a modern native runtime. All with one shared codebase.
+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>
 
diff --git a/docs/react/overview.md b/docs/react/overview.md
index b96753b20c6..142018460bf 100644
--- a/docs/react/overview.md
+++ b/docs/react/overview.md
@@ -40,6 +40,6 @@ One difference is the usage of [TypeScript](http://www.typescriptlang.org/), whi
 
 ## Native Tooling
 
-[Capacitor](https://capacitor.ionicframework.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.
+[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://capacitor.ionicframework.com/docs/cordova).
+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/docs/react/quickstart.md b/docs/react/quickstart.md
index b88aebfb045..a4338661e06 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -382,7 +382,7 @@ export const IconExample: React.FC = () => {
 
 ## 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://capacitor.ionicframework.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.
+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:
 
@@ -405,9 +405,9 @@ ionic cap open ios
 ionic cap open android
 ```
 
-Additional details can be found [here](https://capacitor.ionicframework.com/docs/getting-started/with-ionic).
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
 
-Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) that are available. There’s some great stuff, including the [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+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';
@@ -447,6 +447,6 @@ export default Home;
 
 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://capacitor.ionicframework.com/docs/).
+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/docs/react/your-first-app.md b/docs/react/your-first-app.md
index 8364e516080..188be71df6b 100644
--- a/docs/react/your-first-app.md
+++ b/docs/react/your-first-app.md
@@ -31,8 +31,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
+- 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).
 
@@ -188,7 +188,7 @@ Next, open `src/App.tsx`, remove the `ellipse` icon from the import and import t
 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:
+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">
diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md
index c2d65fa5c1d..90c527521bd 100644
--- a/docs/react/your-first-app/2-taking-photos.md
+++ b/docs/react/your-first-app/2-taking-photos.md
@@ -11,7 +11,7 @@ sidebar_label: Taking Photos
   />
 </head>
 
-Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitor.ionicframework.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).
+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.
 
diff --git a/docs/react/your-first-app/3-saving-photos.md b/docs/react/your-first-app/3-saving-photos.md
index 012145981ac..cc6224d68a1 100644
--- a/docs/react/your-first-app/3-saving-photos.md
+++ b/docs/react/your-first-app/3-saving-photos.md
@@ -59,7 +59,7 @@ The base64FromPath method is a helper util that downloads a file from the suppli
 
 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://capacitor.ionicframework.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.
+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:
 
diff --git a/docs/react/your-first-app/4-loading-photos.md b/docs/react/your-first-app/4-loading-photos.md
index 7911d592b6d..75c1cb8e901 100644
--- a/docs/react/your-first-app/4-loading-photos.md
+++ b/docs/react/your-first-app/4-loading-photos.md
@@ -13,7 +13,7 @@ sidebar_label: Loading Photos
 
 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://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+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
 
diff --git a/docs/react/your-first-app/6-deploying-mobile.md b/docs/react/your-first-app/6-deploying-mobile.md
index 6002c20c227..70b47820eb6 100644
--- a/docs/react/your-first-app/6-deploying-mobile.md
+++ b/docs/react/your-first-app/6-deploying-mobile.md
@@ -8,7 +8,7 @@ Since we added Capacitor to our project when it was first created, there’s onl
 
 ## 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://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+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:
 
@@ -51,7 +51,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
 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://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+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)
 
diff --git a/docs/react/your-first-app/8-distribute.md b/docs/react/your-first-app/8-distribute.md
index 867d459b6b3..74966e8de58 100644
--- a/docs/react/your-first-app/8-distribute.md
+++ b/docs/react/your-first-app/8-distribute.md
@@ -95,6 +95,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 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://capacitor.ionicframework.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.
+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/docs/reference/glossary.md b/docs/reference/glossary.md
index 3f4a19f3ec5..a728df32d95 100644
--- a/docs/reference/glossary.md
+++ b/docs/reference/glossary.md
@@ -68,7 +68,7 @@ title: Glossary
     <h3>Capacitor</h3>
   </a>
   <p>
-    <a href="https://capacitor.ionicframework.com/" target="_blank">
+    <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,
@@ -408,11 +408,9 @@ title: Glossary
     </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">
+    </a>, and <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10" target="_blank">
       loops
-    </a>
-    .
+    </a>.
   </p>
 </section>
 
diff --git a/docs/reference/support.md b/docs/reference/support.md
index 54e23e3664f..d668cd5e957 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -22,12 +22,12 @@ The current status of each Ionic Framework version is:
 
 | Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
 | :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
-| V6      | **Active**            | Dec 8, 2021  | TBD              | TBD               |
-| V5      | Extended Support Only | Feb 11, 2020 | June 8, 2022     | Dec 8, 2022       |
-| V4      | Extended Support Only | 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      |
+|   V6    |      **Active**       | Dec 8, 2021  |       TBD        |        TBD        |
+|   V5    | Extended Support Only | Feb 11, 2020 |   June 8, 2022   |    Dec 8, 2022    |
+|   V4    | Extended Support Only | 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).
@@ -42,7 +42,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-|    v6     |           v12           |          v14.x^         |    4.0+    |
+|    v6     |           v12           |         v14.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    |
@@ -88,7 +88,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 |      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://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins)
+- 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.)
diff --git a/docs/vue/overview.md b/docs/vue/overview.md
index a428c521202..ee621a5e36b 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -29,7 +29,7 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani
 
 [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://capacitor.ionicframework.com/docs/cordova).
+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
 
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 2d97387d8cb..91af4c2f491 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -765,7 +765,7 @@ The configuration above will prevent all files from being prefetched and, instea
 
 ## 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://capacitor.ionicframework.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.
+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:
 
@@ -788,9 +788,9 @@ ionic cap open ios
 ionic cap open android
 ```
 
-Additional details can be found [here](https://capacitor.ionicframework.com/docs/getting-started/with-ionic).
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
 
-Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) that are available. There is some great features, including the [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+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>
@@ -847,6 +847,6 @@ Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) t
 
 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://capacitor.ionicframework.com/docs/).
+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/docs/vue/your-first-app.md b/docs/vue/your-first-app.md
index 31362bf23bb..ca3ad3dbd54 100644
--- a/docs/vue/your-first-app.md
+++ b/docs/vue/your-first-app.md
@@ -31,8 +31,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
+- 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).
 
diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
index 38bafe39a59..8fe97523339 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.md
@@ -4,7 +4,7 @@ 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://capacitor.ionicframework.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).
+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.
 
diff --git a/docs/vue/your-first-app/3-saving-photos.md b/docs/vue/your-first-app/3-saving-photos.md
index 6601a7aa3cb..59b165ca9ab 100644
--- a/docs/vue/your-first-app/3-saving-photos.md
+++ b/docs/vue/your-first-app/3-saving-photos.md
@@ -26,7 +26,7 @@ const convertBlobToBase64 = (blob: 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://capacitor.ionicframework.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:
+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> => {
diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.md
index b0157de7654..e5892ed65db 100644
--- a/docs/vue/your-first-app/4-loading-photos.md
+++ b/docs/vue/your-first-app/4-loading-photos.md
@@ -6,7 +6,7 @@ sidebar_label: Loading Photos
 
 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://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+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
 
diff --git a/docs/vue/your-first-app/6-deploying-mobile.md b/docs/vue/your-first-app/6-deploying-mobile.md
index 795ebdda646..08cab4a0596 100644
--- a/docs/vue/your-first-app/6-deploying-mobile.md
+++ b/docs/vue/your-first-app/6-deploying-mobile.md
@@ -19,7 +19,7 @@ Remember, you can find the complete source code for this app [here](https://gith
 
 ## 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://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+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:
 
@@ -62,7 +62,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
 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://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+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)
 
diff --git a/docs/vue/your-first-app/8-distribute.md b/docs/vue/your-first-app/8-distribute.md
index 2e5b4446daf..d6b38ea5b5a 100644
--- a/docs/vue/your-first-app/8-distribute.md
+++ b/docs/vue/your-first-app/8-distribute.md
@@ -95,6 +95,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 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://capacitor.ionicframework.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.
+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/scripts/data/cli.json b/scripts/data/cli.json
index 1064381d3ab..56ab8ebe0f8 100644
--- a/scripts/data/cli.json
+++ b/scripts/data/cli.json
@@ -102,7 +102,7 @@
       "name": "ionic capacitor build",
       "namespace": ["ionic", "capacitor"],
       "summary": "Build an Ionic project for a given platform",
-      "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).",
+      "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).",
       "footnotes": [],
       "groups": ["beta"],
       "exampleCommands": ["ionic capacitor build ", "ionic capacitor build android", "ionic capacitor build ios"],
diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.md
index 08e208422b7..a44f9cab7dc 100644
--- a/versioned_docs/version-v5/angular/your-first-app.md
+++ b/versioned_docs/version-v5/angular/your-first-app.md
@@ -28,8 +28,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
+- 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).
 
diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
index febc4de66d3..70f6ed01e3f 100644
--- a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
@@ -4,7 +4,7 @@ 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://capacitor.ionicframework.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).
+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
 
diff --git a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md
index 6ff436420cf..f6a0874aca8 100644
--- a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md
@@ -31,7 +31,7 @@ public async addNewToGallery() {
 }
 ```
 
-We’ll use the Capacitor [Filesystem API](https://capacitor.ionicframework.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.
+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) {
diff --git a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
index 3c34b84f546..1e6896557cf 100644
--- a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
@@ -6,7 +6,7 @@ sidebar_label: Loading Photos
 
 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://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+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
 
diff --git a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
index 0897d43b8e4..790e83ef828 100644
--- a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
@@ -8,7 +8,7 @@ Since we added Capacitor to our project when it was first created, there’s onl
 
 ## 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://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+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:
 
@@ -51,7 +51,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
 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://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+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)
 
diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
index 9aad9835c23..fdce9ac6848 100644
--- a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
@@ -107,6 +107,6 @@ Save this file, then tap on a photo again and choose the “Delete” option. Th
 
 ## What’s Next?
 
-Congratulations! You built a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. 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://capacitor.ionicframework.com/docs/apis). The sky’s the limit.
+Congratulations! You built a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. 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.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-build.md b/versioned_docs/version-v5/cli/commands/capacitor-build.md
index f8bea41238c..0ceb0c36de7 100644
--- a/versioned_docs/version-v5/cli/commands/capacitor-build.md
+++ b/versioned_docs/version-v5/cli/commands/capacitor-build.md
@@ -18,7 +18,7 @@ ionic capacitor build [options]
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
 
 ## Examples
 
diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.md b/versioned_docs/version-v5/core-concepts/fundamentals.md
index 3337d269ee9..23d8f728e8c 100644
--- a/versioned_docs/version-v5/core-concepts/fundamentals.md
+++ b/versioned_docs/version-v5/core-concepts/fundamentals.md
@@ -33,7 +33,7 @@ An amazing feature of apps built with web technologies (such as Ionic apps!) is
 
 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://capacitor.ionicframework.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.
+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
 
diff --git a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md
index f07ef30e815..599e5cee3dc 100644
--- a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md
+++ b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md
@@ -11,7 +11,7 @@ sidebar_label: What are PWAs?
 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://capacitor.ionicframework.com) to provide a multiple deploy targets for all your users.
+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.
diff --git a/versioned_docs/version-v5/developing/keyboard.md b/versioned_docs/version-v5/developing/keyboard.md
index b6273a081df..2e36a26ffe3 100644
--- a/versioned_docs/version-v5/developing/keyboard.md
+++ b/versioned_docs/version-v5/developing/keyboard.md
@@ -166,7 +166,7 @@ By default the keyboard theme is determined by the OS. For example, if dark mode
 
 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://capacitor.ionicframework.com/docs/apis/keyboard#keyboard-configuration-ios-only-" target="_blank">Capacitor Keyboard Documentation</a>.
+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
 
@@ -174,7 +174,7 @@ When running any kind of web based application, iOS will show an accessory bar a
 
 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://capacitor.ionicframework.com/docs/apis/keyboard#keyboard-configuration-ios-only-" target="_blank">Capacitor Keyboard Documentation</a>.
+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
 
diff --git a/versioned_docs/version-v5/native-community.md b/versioned_docs/version-v5/native-community.md
index 744dcbe4190..cd8773d8bba 100644
--- a/versioned_docs/version-v5/native-community.md
+++ b/versioned_docs/version-v5/native-community.md
@@ -27,7 +27,7 @@ These docs are for apps built with Ionic Framework 4.0.0 and greater. For older
 
 ## Capacitor Support
 
-In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitor.ionicframework.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
+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
 
@@ -61,7 +61,7 @@ $ npm install @awesome-cordova-plugins/core
 </TabItem>
 <TabItem value="capacitor">
 
-For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
+For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins).
 
 ```shell
 // Install Ionic Native TypeScript wrapper
diff --git a/versioned_docs/version-v5/react.md b/versioned_docs/version-v5/react.md
index 7659b72dbb7..0b5bd7d7bdc 100644
--- a/versioned_docs/version-v5/react.md
+++ b/versioned_docs/version-v5/react.md
@@ -77,7 +77,7 @@ Compatible with React version 16.8 and above.
 
 ## More than mobile
 
-Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitor.ionicframework.com), a modern native runtime. All with one shared codebase.
+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>
 
diff --git a/versioned_docs/version-v5/react/overview.md b/versioned_docs/version-v5/react/overview.md
index b96753b20c6..142018460bf 100644
--- a/versioned_docs/version-v5/react/overview.md
+++ b/versioned_docs/version-v5/react/overview.md
@@ -40,6 +40,6 @@ One difference is the usage of [TypeScript](http://www.typescriptlang.org/), whi
 
 ## Native Tooling
 
-[Capacitor](https://capacitor.ionicframework.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.
+[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://capacitor.ionicframework.com/docs/cordova).
+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-v5/react/quickstart.md b/versioned_docs/version-v5/react/quickstart.md
index f928a0eece0..cb01d75a12a 100644
--- a/versioned_docs/version-v5/react/quickstart.md
+++ b/versioned_docs/version-v5/react/quickstart.md
@@ -338,7 +338,7 @@ Here, when we reload, if there is no app history present, we'll be able to navig
 
 ## 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://capacitor.ionicframework.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.
+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:
 
@@ -361,9 +361,9 @@ ionic cap open ios
 ionic cap open android
 ```
 
-Additional details can be found [here](https://capacitor.ionicframework.com/docs/getting-started/with-ionic).
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
 
-Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) that are available. There’s some great stuff, including the [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+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';
@@ -403,6 +403,6 @@ export default Home;
 
 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://capacitor.ionicframework.com/docs/).
+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-v5/react/your-first-app.md b/versioned_docs/version-v5/react/your-first-app.md
index da7a5f7ccf6..5641e1e2deb 100644
--- a/versioned_docs/version-v5/react/your-first-app.md
+++ b/versioned_docs/version-v5/react/your-first-app.md
@@ -26,8 +26,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
+- 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).
 
diff --git a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
index 4abf6bc2051..46d8b604578 100644
--- a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
@@ -4,7 +4,7 @@ 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://capacitor.ionicframework.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).
+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.
 
diff --git a/versioned_docs/version-v5/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/react/your-first-app/3-saving-photos.md
index 012145981ac..cc6224d68a1 100644
--- a/versioned_docs/version-v5/react/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v5/react/your-first-app/3-saving-photos.md
@@ -59,7 +59,7 @@ The base64FromPath method is a helper util that downloads a file from the suppli
 
 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://capacitor.ionicframework.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.
+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:
 
diff --git a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
index 00454621eb9..ceda22c7a39 100644
--- a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
@@ -6,7 +6,7 @@ sidebar_label: Loading Photos
 
 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://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+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
 
diff --git a/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
index 6002c20c227..70b47820eb6 100644
--- a/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
@@ -8,7 +8,7 @@ Since we added Capacitor to our project when it was first created, there’s onl
 
 ## 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://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+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:
 
@@ -51,7 +51,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
 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://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+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)
 
diff --git a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
index 45dcf768053..c7bc374b712 100644
--- a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
@@ -121,6 +121,6 @@ Save this file, then tap on a photo again and choose the “Delete” option. Th
 
 Congratulations! You created a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android.
 
-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://capacitor.ionicframework.com/docs/apis). The sky’s the limit.
+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.
 
 Happy app building! 💙
diff --git a/versioned_docs/version-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.md
index 26d550a909f..feddf8fdea1 100644
--- a/versioned_docs/version-v5/reference/glossary.md
+++ b/versioned_docs/version-v5/reference/glossary.md
@@ -58,7 +58,7 @@
     <h3>Capacitor</h3>
   </a>
   <p>
-    <a href="https://capacitor.ionicframework.com/" target="_blank">
+    <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,
@@ -396,11 +396,9 @@
     <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">
+    , <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins" target="_blank">
       mixins
-    </a>
-    , and{' '}
+    </a>, and{' '}
     <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10" target="_blank">
       loops
     </a>
diff --git a/versioned_docs/version-v5/reference/support.md b/versioned_docs/version-v5/reference/support.md
index bed31737e56..9642fa6bf1e 100644
--- a/versioned_docs/version-v5/reference/support.md
+++ b/versioned_docs/version-v5/reference/support.md
@@ -62,18 +62,18 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 |      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://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins)
+- 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         |
+| 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-v5/vue/overview.md b/versioned_docs/version-v5/vue/overview.md
index 18eedbfa4b6..2bc291bf12a 100644
--- a/versioned_docs/version-v5/vue/overview.md
+++ b/versioned_docs/version-v5/vue/overview.md
@@ -19,9 +19,9 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani
 
 ## Native Tooling
 
-[Capacitor](https://capacitor.ionicframework.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
+[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://capacitor.ionicframework.com/docs/cordova).
+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
 
diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md
index f61bde806d7..e0ac1a0dc61 100644
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ b/versioned_docs/version-v5/vue/quickstart.md
@@ -758,7 +758,7 @@ The configuration above will prevent all files from being prefetched and, instea
 
 ## 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://capacitor.ionicframework.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.
+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:
 
@@ -781,9 +781,9 @@ ionic cap open ios
 ionic cap open android
 ```
 
-Additional details can be found [here](https://capacitor.ionicframework.com/docs/getting-started/with-ionic).
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
 
-Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) that are available. There is some great features, including the [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+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>
@@ -840,6 +840,6 @@ Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) t
 
 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://capacitor.ionicframework.com/docs/).
+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-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.md
index db73be1f0cf..6995c66047c 100644
--- a/versioned_docs/version-v5/vue/your-first-app.md
+++ b/versioned_docs/version-v5/vue/your-first-app.md
@@ -24,8 +24,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 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://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
+- 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).
 
diff --git a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
index 38bafe39a59..8fe97523339 100644
--- a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
@@ -4,7 +4,7 @@ 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://capacitor.ionicframework.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).
+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.
 
diff --git a/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md
index 6601a7aa3cb..59b165ca9ab 100644
--- a/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md
@@ -26,7 +26,7 @@ const convertBlobToBase64 = (blob: 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://capacitor.ionicframework.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:
+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> => {
diff --git a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
index b0157de7654..e5892ed65db 100644
--- a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
@@ -6,7 +6,7 @@ sidebar_label: Loading Photos
 
 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://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+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
 
diff --git a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
index 85cb8dfefa6..eb81d5c5e27 100644
--- a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
@@ -12,7 +12,7 @@ Remember, you can find the complete source code for this app [here](https://gith
 
 ## 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://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+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:
 
@@ -55,7 +55,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
 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://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+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)
 
diff --git a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
index 2764b126bc8..126f166afca 100644
--- a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
@@ -150,6 +150,6 @@ Save this file, then tap on a photo again and choose the "Delete" option. This t
 
 Congratulations! You created a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android.
 
-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://capacitor.ionicframework.com/docs/apis). The sky’s the limit.
+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.
 
 Happy app building! 💙

From 6658fa90c2b6297c291db6d71b56ac753fd6e8fc Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 20 Sep 2022 12:09:19 -0500
Subject: [PATCH 068/469] docs(template): add github templates (#2565)

---
 .github/ISSUE_TEMPLATE/bug_report.md       | 32 ----------------
 .github/ISSUE_TEMPLATE/bug_report.yml      | 43 ++++++++++++++++++++++
 .github/ISSUE_TEMPLATE/content-issue.md    | 13 -------
 .github/ISSUE_TEMPLATE/content-issue.yml   | 17 +++++++++
 .github/ISSUE_TEMPLATE/feature_request.md  | 20 ----------
 .github/ISSUE_TEMPLATE/feature_request.yml | 23 ++++++++++++
 6 files changed, 83 insertions(+), 65 deletions(-)
 delete mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.yml
 delete mode 100644 .github/ISSUE_TEMPLATE/content-issue.md
 create mode 100644 .github/ISSUE_TEMPLATE/content-issue.yml
 delete mode 100644 .github/ISSUE_TEMPLATE/feature_request.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature_request.yml

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 1a0efc743b7..00000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-name: Bug report
-about: Report a bug on the docs site
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Browser and OS (please complete the following information)**
- - OS: [e.g. iOS]
- - Browser: [e.g. chrome, safari]
- - Version: [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 00000000000..4488be83ecc
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,43 @@
+name: 🐛 Bug Report
+description: Report a bug on the docs site
+labels: ["triage"]
+title: "bug: "
+body:
+  - type: textarea
+    attributes:
+      label: Describe the Bug
+      description: A clear description of what the bug is and how it manifests.
+    validation:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A clear description of what you expected to happen.
+    validation:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: Please explain the steps required to duplicate this issue.
+    validation:
+      required: true
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain the problem.
+  - type: input
+    attributes:
+      label: Operating System
+      description: The operating system you are running (e.g. Windows)
+  - type: input
+    attributes:
+      label: Browser
+      description: The browser you are running (e.g. Chrome, Safari)
+  - type: input
+    attributes:
+      label: Version
+      description: The browser version you are running (e.g. 14)
+  - type: textarea
+    attributes:
+      label: Additional Information
+      description: List any other information that is relevant to your issue.
diff --git a/.github/ISSUE_TEMPLATE/content-issue.md b/.github/ISSUE_TEMPLATE/content-issue.md
deleted file mode 100644
index 58b864b751c..00000000000
--- a/.github/ISSUE_TEMPLATE/content-issue.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-name: Content issue
-about: Report missing or inaccurate content on the docs
-title: ''
-labels: content
-assignees: ''
-
----
-
-**URL**
-The URL at which the content is missing or inaccurate
-
-**What is missing or inaccurate about the content on this page?**
diff --git a/.github/ISSUE_TEMPLATE/content-issue.yml b/.github/ISSUE_TEMPLATE/content-issue.yml
new file mode 100644
index 00000000000..ec0f8ef91aa
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/content-issue.yml
@@ -0,0 +1,17 @@
+name: 📕 Content Issue
+description: Report missing or inaccurate content on the docs
+labels: ["triage"]
+title: "content: "
+body:
+  - type: input
+    attributes:
+      label: URL
+      description: The URL at which the content is missing or inaccurate
+    validation:
+      required: true
+  - type: textarea
+    attributes:
+      label: Issue Description
+      description: What is missing or inaccurate about the content on this page?
+    validation:
+      required: true
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index d513e5c0428..00000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest a feature for the docs
-title: ''
-labels: feature
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 00000000000..3140bbb34fe
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,23 @@
+name: 💡 Feature Request
+description: Suggest a feature for the docs
+labels: ["triage"]
+title: "feat: "
+body:
+  - type: textarea
+    attributes:
+      label: Describe Problem
+      description: A clear and concise description of what the problem is. Ex. I am always frustrated when [...]
+      validation:
+        required: true
+  - type: textarea
+    attributes:
+      label: Describe Preferred Solution
+      description: A clear and concise description of what you want to happen.
+  - type: textarea
+    attributes:
+      label: Describe Alternatives
+      description: A clear and concise description of any alternative solutions or features you have considered.
+  - type: textarea
+    attributes:
+      label: Additional Information
+      description: Add any other context or screenshots about the feature request here.
\ No newline at end of file

From fd2e543309030ae469b6692e8df348be3dde37e1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 20 Sep 2022 12:12:36 -0500
Subject: [PATCH 069/469] docs(template): fix validation typo (#2566)

---
 .github/ISSUE_TEMPLATE/bug_report.yml      | 6 +++---
 .github/ISSUE_TEMPLATE/content-issue.yml   | 6 +++---
 .github/ISSUE_TEMPLATE/feature_request.yml | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 4488be83ecc..3cae620736e 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -7,19 +7,19 @@ body:
     attributes:
       label: Describe the Bug
       description: A clear description of what the bug is and how it manifests.
-    validation:
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Expected Behavior
       description: A clear description of what you expected to happen.
-    validation:
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Steps to Reproduce
       description: Please explain the steps required to duplicate this issue.
-    validation:
+    validations:
       required: true
   - type: textarea
     attributes:
diff --git a/.github/ISSUE_TEMPLATE/content-issue.yml b/.github/ISSUE_TEMPLATE/content-issue.yml
index ec0f8ef91aa..404492e1736 100644
--- a/.github/ISSUE_TEMPLATE/content-issue.yml
+++ b/.github/ISSUE_TEMPLATE/content-issue.yml
@@ -7,11 +7,11 @@ body:
     attributes:
       label: URL
       description: The URL at which the content is missing or inaccurate
-    validation:
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Issue Description
       description: What is missing or inaccurate about the content on this page?
-    validation:
-      required: true
\ No newline at end of file
+    validations:
+      required: true
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
index 3140bbb34fe..5a964579982 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -7,8 +7,8 @@ body:
     attributes:
       label: Describe Problem
       description: A clear and concise description of what the problem is. Ex. I am always frustrated when [...]
-      validation:
-        required: true
+    validations:
+      required: true
   - type: textarea
     attributes:
       label: Describe Preferred Solution

From 51239ef1f0635e8a33b67475d0a5b394b3bec809 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 22 Sep 2022 11:54:53 -0400
Subject: [PATCH 070/469] fix(playground): add ion-page class to angular
 stackbiltz code (#2574)

---
 static/code/stackblitz/angular/app.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/code/stackblitz/angular/app.component.html b/static/code/stackblitz/angular/app.component.html
index cb73f595adb..1031647a0e0 100644
--- a/static/code/stackblitz/angular/app.component.html
+++ b/static/code/stackblitz/angular/app.component.html
@@ -1,3 +1,3 @@
 <ion-app>
-  <app-example></app-example>
+  <app-example class="ion-page"></app-example>
 </ion-app>

From aa14efdd7b44b746cdb85e51460899ef8494d381 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 22 Sep 2022 12:42:52 -0400
Subject: [PATCH 071/469] docs(segment): add component playgrounds (#2569)

---
 docs/api/segment.md                           | 619 ++----------------
 static/usage/segment/basic/angular.md         |  19 +
 static/usage/segment/basic/demo.html          |  50 ++
 static/usage/segment/basic/index.md           |   8 +
 static/usage/segment/basic/javascript.md      |  19 +
 static/usage/segment/basic/react.md           |  29 +
 static/usage/segment/basic/vue.md             |  30 +
 static/usage/segment/scrollable/angular.md    |  34 +
 static/usage/segment/scrollable/demo.html     |  66 ++
 static/usage/segment/scrollable/index.md      |   8 +
 static/usage/segment/scrollable/javascript.md |  34 +
 static/usage/segment/scrollable/react.md      |  43 ++
 static/usage/segment/scrollable/vue.md        |  51 ++
 .../usage/segment/theming/colors/angular.md   |  82 +++
 static/usage/segment/theming/colors/demo.html | 113 ++++
 static/usage/segment/theming/colors/index.md  |   8 +
 .../segment/theming/colors/javascript.md      |  82 +++
 static/usage/segment/theming/colors/react.md  |  92 +++
 static/usage/segment/theming/colors/vue.md    |  93 +++
 .../angular/example_component_css.md          |   5 +
 .../angular/example_component_html.md         |  10 +
 .../segment/theming/css-properties/demo.html  |  42 ++
 .../segment/theming/css-properties/index.md   |  31 +
 .../theming/css-properties/javascript.md      |  16 +
 .../theming/css-properties/react/main_css.md  |   5 +
 .../theming/css-properties/react/main_tsx.md  |  22 +
 .../segment/theming/css-properties/vue.md     |  27 +
 static/usage/segment/toolbar/angular.md       |  14 +
 static/usage/segment/toolbar/demo.html        |  31 +
 static/usage/segment/toolbar/index.md         |   8 +
 static/usage/segment/toolbar/javascript.md    |  14 +
 static/usage/segment/toolbar/react.md         |  22 +
 static/usage/segment/toolbar/vue.md           |  25 +
 33 files changed, 1170 insertions(+), 582 deletions(-)
 create mode 100644 static/usage/segment/basic/angular.md
 create mode 100644 static/usage/segment/basic/demo.html
 create mode 100644 static/usage/segment/basic/index.md
 create mode 100644 static/usage/segment/basic/javascript.md
 create mode 100644 static/usage/segment/basic/react.md
 create mode 100644 static/usage/segment/basic/vue.md
 create mode 100644 static/usage/segment/scrollable/angular.md
 create mode 100644 static/usage/segment/scrollable/demo.html
 create mode 100644 static/usage/segment/scrollable/index.md
 create mode 100644 static/usage/segment/scrollable/javascript.md
 create mode 100644 static/usage/segment/scrollable/react.md
 create mode 100644 static/usage/segment/scrollable/vue.md
 create mode 100644 static/usage/segment/theming/colors/angular.md
 create mode 100644 static/usage/segment/theming/colors/demo.html
 create mode 100644 static/usage/segment/theming/colors/index.md
 create mode 100644 static/usage/segment/theming/colors/javascript.md
 create mode 100644 static/usage/segment/theming/colors/react.md
 create mode 100644 static/usage/segment/theming/colors/vue.md
 create mode 100644 static/usage/segment/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/segment/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/segment/theming/css-properties/demo.html
 create mode 100644 static/usage/segment/theming/css-properties/index.md
 create mode 100644 static/usage/segment/theming/css-properties/javascript.md
 create mode 100644 static/usage/segment/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/segment/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/segment/theming/css-properties/vue.md
 create mode 100644 static/usage/segment/toolbar/angular.md
 create mode 100644 static/usage/segment/toolbar/demo.html
 create mode 100644 static/usage/segment/toolbar/index.md
 create mode 100644 static/usage/segment/toolbar/javascript.md
 create mode 100644 static/usage/segment/toolbar/react.md
 create mode 100644 static/usage/segment/toolbar/vue.md

diff --git a/docs/api/segment.md b/docs/api/segment.md
index f7d2567c28b..fe6c384db43 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-segment"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/segment/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/segment/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -26,21 +19,51 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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 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.
+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';
+
+<Basic />
 
-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.
 
 ## 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/segment/scrollable/index.md';
+
+<Scrollable />
+
+
+## Toolbar Segments
+
+import Toolbar from '@site/static/usage/segment/toolbar/index.md';
+
+<Toolbar />
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/segment/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/segment/theming/css-properties/index.md';
+
+<CSSProps />
+
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -77,574 +100,6 @@ interface SegmentCustomEvent extends CustomEvent {
 ```
 
 
-
-## 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 Segment -->
-<ion-segment (ionChange)="segmentChanged($event)">
-  <ion-segment-button value="friends">
-    <ion-label>Friends</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="enemies">
-    <ion-label>Enemies</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Disabled Segment -->
-<ion-segment (ionChange)="segmentChanged($event)" disabled value="sunny">
-  <ion-segment-button value="sunny">
-    <ion-label>Sunny</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="rainy">
-    <ion-label>Rainy</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment with anchors -->
-<ion-segment (ionChange)="segmentChanged($event)">
-  <ion-segment-button value="dogs">
-    <ion-label>Dogs</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="cats">
-    <ion-label>Cats</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Scrollable Segment -->
-<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>
-
-<!-- Segment with secondary color -->
-<ion-segment (ionChange)="segmentChanged($event)" color="secondary">
-  <ion-segment-button value="standard">
-    <ion-label>Standard</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="hybrid">
-    <ion-label>Hybrid</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="sat">
-    <ion-label>Satellite</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment in a toolbar -->
-<ion-toolbar>
-  <ion-segment (ionChange)="segmentChanged($event)">
-    <ion-segment-button value="camera">
-      <ion-icon name="camera"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="bookmark">
-      <ion-icon name="bookmark"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<!-- Segment with default selection -->
-<ion-segment (ionChange)="segmentChanged($event)" value="javascript">
-  <ion-segment-button value="python">
-    <ion-label>Python</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="javascript">
-    <ion-label>Javascript</ion-label>
-  </ion-segment-button>
-</ion-segment>
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'segment-example',
-  templateUrl: 'segment-example.html',
-  styleUrls: ['./segment-example.css'],
-})
-export class SegmentExample {
-  segmentChanged(ev: any) {
-    console.log('Segment changed', ev);
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Segment -->
-<ion-segment>
-  <ion-segment-button value="friends">
-    <ion-label>Friends</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="enemies">
-    <ion-label>Enemies</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Disabled Segment -->
-<ion-segment disabled value="sunny">
-  <ion-segment-button value="sunny">
-    <ion-label>Sunny</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="rainy">
-    <ion-label>Rainy</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment with anchors -->
-<ion-segment>
-  <ion-segment-button value="dogs">
-    <ion-label>Dogs</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="cats">
-    <ion-label>Cats</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Scrollable Segment -->
-<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>
-
-<!-- Segment with secondary color -->
-<ion-segment color="secondary">
-  <ion-segment-button value="standard">
-    <ion-label>Standard</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="hybrid">
-    <ion-label>Hybrid</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="sat">
-    <ion-label>Satellite</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment in a toolbar -->
-<ion-toolbar>
-  <ion-segment>
-    <ion-segment-button value="camera">
-      <ion-icon name="camera"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="bookmark">
-      <ion-icon name="bookmark"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<!-- Segment with default selection -->
-<ion-segment value="javascript">
-  <ion-segment-button value="python">
-    <ion-label>Python</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="javascript">
-    <ion-label>Javascript</ion-label>
-  </ion-segment-button>
-</ion-segment>
-```
-
-```javascript
-// Listen for ionChange on all segments
-const segments = document.querySelectorAll('ion-segment')
-for (let i = 0; i < segments.length; i++) {
-  segments[i].addEventListener('ionChange', (ev) => {
-    console.log('Segment changed', ev);
-  })
-}
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
-import { call, home, heart, pin, star, globe, basket, camera, bookmark } from 'ionicons/icons';
-
-export const SegmentExamples: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>SegmentExamples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        {/*-- Default Segment --*/}
-        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
-          <IonSegmentButton value="friends">
-            <IonLabel>Friends</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="enemies">
-            <IonLabel>Enemies</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Disabled Segment --*/}
-        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value="sunny">
-          <IonSegmentButton value="sunny">
-            <IonLabel>Sunny</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="rainy">
-            <IonLabel>Rainy</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Segment with anchors --*/}
-        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
-          <IonSegmentButton value="dogs">
-            <IonLabel>Dogs</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="cats">
-            <IonLabel>Cats</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Scrollable Segment --*/}
-        <IonSegment scrollable value="heart">
-          <IonSegmentButton value="home">
-            <IonIcon icon={home} />
-          </IonSegmentButton>
-          <IonSegmentButton value="heart">
-            <IonIcon icon={heart} />
-          </IonSegmentButton>
-          <IonSegmentButton value="pin">
-            <IonIcon icon={pin} />
-          </IonSegmentButton>
-          <IonSegmentButton value="star">
-            <IonIcon icon={star} />
-          </IonSegmentButton>
-          <IonSegmentButton value="call">
-            <IonIcon icon={call} />
-          </IonSegmentButton>
-          <IonSegmentButton value="globe">
-            <IonIcon icon={globe} />
-          </IonSegmentButton>
-          <IonSegmentButton value="basket">
-            <IonIcon icon={basket} />
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Segment with secondary color --*/}
-        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} color="secondary">
-          <IonSegmentButton value="standard">
-            <IonLabel>Standard</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="hybrid">
-            <IonLabel>Hybrid</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="sat">
-            <IonLabel>Satellite</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Segment in a toolbar --*/}
-        <IonToolbar>
-          <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
-            <IonSegmentButton value="camera">
-              <IonIcon icon={camera} />
-            </IonSegmentButton>
-            <IonSegmentButton value="bookmark">
-              <IonIcon icon={bookmark} />
-            </IonSegmentButton>
-          </IonSegment>
-        </IonToolbar>
-
-        {/*-- Segment with default selection --*/}
-        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} value="javascript">
-          <IonSegmentButton value="python">
-            <IonLabel>Python</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="javascript">
-            <IonLabel>Javascript</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'segment-example',
-  styleUrl: 'segment-example.css'
-})
-export class SegmentExample {
-  segmentChanged(ev: any) {
-    console.log('Segment changed', ev);
-  }
-
-  render() {
-     return [
-      // Default Segment
-      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
-        <ion-segment-button value="friends">
-          <ion-label>Friends</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="enemies">
-          <ion-label>Enemies</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
-
-      // Disabled Segment
-      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} disabled={true} value="sunny">
-        <ion-segment-button value="sunny">
-          <ion-label>Sunny</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="rainy">
-          <ion-label>Rainy</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
-
-      // Segment with anchors
-      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
-        <ion-segment-button value="dogs">
-          <ion-label>Dogs</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="cats">
-          <ion-label>Cats</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
-
-      // Scrollable Segment
-      <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>,
-
-      // Segment with secondary color
-      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} color="secondary">
-        <ion-segment-button value="standard">
-          <ion-label>Standard</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="hybrid">
-          <ion-label>Hybrid</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="sat">
-          <ion-label>Satellite</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
-
-      // Segment in a toolbar
-      <ion-toolbar>
-        <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
-          <ion-segment-button value="camera">
-            <ion-icon name="camera"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="bookmark">
-            <ion-icon name="bookmark"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>,
-
-      // Segment with default selection
-      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} value="javascript">
-        <ion-segment-button value="python">
-          <ion-label>Python</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="javascript">
-          <ion-label>Javascript</ion-label>
-        </ion-segment-button>
-      </ion-segment>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Segment -->
-  <ion-segment @ionChange="segmentChanged($event)">
-    <ion-segment-button value="friends">
-      <ion-label>Friends</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="enemies">
-      <ion-label>Enemies</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-
-  <!-- Disabled Segment -->
-  <ion-segment @ionChange="segmentChanged($event)" disabled value="sunny">
-    <ion-segment-button value="sunny">
-      <ion-label>Sunny</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="rainy">
-      <ion-label>Rainy</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-
-  <!-- Segment with anchors -->
-  <ion-segment @ionChange="segmentChanged($event)">
-    <ion-segment-button value="dogs">
-      <ion-label>Dogs</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="cats">
-      <ion-label>Cats</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-
-  <!-- Scrollable Segment -->
-  <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>
-
-  <!-- Segment with secondary color -->
-  <ion-segment @ionChange="segmentChanged($event)" color="secondary">
-    <ion-segment-button value="standard">
-      <ion-label>Standard</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="hybrid">
-      <ion-label>Hybrid</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="sat">
-      <ion-label>Satellite</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-
-  <!-- Segment in a toolbar -->
-  <ion-toolbar>
-    <ion-segment @ionChange="segmentChanged($event)">
-      <ion-segment-button value="camera">
-        <ion-icon name="camera"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button value="bookmark">
-        <ion-icon name="bookmark"></ion-icon>
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-
-  <!-- Segment with default selection -->
-  <ion-segment @ionChange="segmentChanged($event)" value="javascript">
-    <ion-segment-button value="python">
-      <ion-label>Python</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="javascript">
-      <ion-label>Javascript</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-</template>
-
-<script lang="ts">
-import { IonSegment, IonSegmentButton, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonSegment, IonSegmentButton, IonToolbar },
-  methods: {
-    segmentChanged(ev: CustomEvent) {
-      console.log('Segment changed', ev);
-    }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
@@ -661,4 +116,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/segment/basic/angular.md b/static/usage/segment/basic/angular.md
new file mode 100644
index 00000000000..c497151f125
--- /dev/null
+++ b/static/usage/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/segment/basic/demo.html b/static/usage/segment/basic/demo.html
new file mode 100644
index 00000000000..4e9a2fbe117
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment/basic/index.md b/static/usage/segment/basic/index.md
new file mode 100644
index 00000000000..f572817a04c
--- /dev/null
+++ b/static/usage/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/segment/basic/demo.html" />
diff --git a/static/usage/segment/basic/javascript.md b/static/usage/segment/basic/javascript.md
new file mode 100644
index 00000000000..91d67d8dca7
--- /dev/null
+++ b/static/usage/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/segment/basic/react.md b/static/usage/segment/basic/react.md
new file mode 100644
index 00000000000..bb5c402112f
--- /dev/null
+++ b/static/usage/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/segment/basic/vue.md b/static/usage/segment/basic/vue.md
new file mode 100644
index 00000000000..7252ce56f2f
--- /dev/null
+++ b/static/usage/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/segment/scrollable/angular.md b/static/usage/segment/scrollable/angular.md
new file mode 100644
index 00000000000..bbcc03848ec
--- /dev/null
+++ b/static/usage/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/segment/scrollable/demo.html b/static/usage/segment/scrollable/demo.html
new file mode 100644
index 00000000000..30d536a7ba4
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment/scrollable/index.md b/static/usage/segment/scrollable/index.md
new file mode 100644
index 00000000000..0969d6e4a43
--- /dev/null
+++ b/static/usage/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/segment/scrollable/demo.html" size="100px" />
diff --git a/static/usage/segment/scrollable/javascript.md b/static/usage/segment/scrollable/javascript.md
new file mode 100644
index 00000000000..dfc630d1d46
--- /dev/null
+++ b/static/usage/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/segment/scrollable/react.md b/static/usage/segment/scrollable/react.md
new file mode 100644
index 00000000000..61d304989bb
--- /dev/null
+++ b/static/usage/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/segment/scrollable/vue.md b/static/usage/segment/scrollable/vue.md
new file mode 100644
index 00000000000..c3afaf67ba2
--- /dev/null
+++ b/static/usage/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/segment/theming/colors/angular.md b/static/usage/segment/theming/colors/angular.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/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/segment/theming/colors/demo.html b/static/usage/segment/theming/colors/demo.html
new file mode 100644
index 00000000000..04559ca5bf2
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment/theming/colors/index.md b/static/usage/segment/theming/colors/index.md
new file mode 100644
index 00000000000..1d2e99a886e
--- /dev/null
+++ b/static/usage/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/segment/theming/colors/demo.html" size="large" />
diff --git a/static/usage/segment/theming/colors/javascript.md b/static/usage/segment/theming/colors/javascript.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/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/segment/theming/colors/react.md b/static/usage/segment/theming/colors/react.md
new file mode 100644
index 00000000000..81c799bbbec
--- /dev/null
+++ b/static/usage/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/segment/theming/colors/vue.md b/static/usage/segment/theming/colors/vue.md
new file mode 100644
index 00000000000..fcce8cce913
--- /dev/null
+++ b/static/usage/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/segment/theming/css-properties/angular/example_component_css.md b/static/usage/segment/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/segment/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+  --background: #54dc98;
+}
+```
diff --git a/static/usage/segment/theming/css-properties/angular/example_component_html.md b/static/usage/segment/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..01aac10305d
--- /dev/null
+++ b/static/usage/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/segment/theming/css-properties/demo.html b/static/usage/segment/theming/css-properties/demo.html
new file mode 100644
index 00000000000..f97c044c9e3
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment/theming/css-properties/index.md b/static/usage/segment/theming/css-properties/index.md
new file mode 100644
index 00000000000..0303937ccb6
--- /dev/null
+++ b/static/usage/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/segment/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/segment/theming/css-properties/javascript.md b/static/usage/segment/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b5ae092adeb
--- /dev/null
+++ b/static/usage/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/segment/theming/css-properties/react/main_css.md b/static/usage/segment/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/segment/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+  --background: #54dc98;
+}
+```
diff --git a/static/usage/segment/theming/css-properties/react/main_tsx.md b/static/usage/segment/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a7e9dc7e0f5
--- /dev/null
+++ b/static/usage/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/segment/theming/css-properties/vue.md b/static/usage/segment/theming/css-properties/vue.md
new file mode 100644
index 00000000000..00bf2e42c8f
--- /dev/null
+++ b/static/usage/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/segment/toolbar/angular.md b/static/usage/segment/toolbar/angular.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/segment/toolbar/angular.md
@@ -0,0 +1,14 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
+        <ion-label>All</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        <ion-label>Favorites</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/segment/toolbar/demo.html b/static/usage/segment/toolbar/demo.html
new file mode 100644
index 00000000000..39d8eeb8147
--- /dev/null
+++ b/static/usage/segment/toolbar/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>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" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-segment value="all">
+          <ion-segment-button value="all">
+            <ion-label>All</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="favorites">
+            <ion-label>Favorites</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+    </ion-header>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/segment/toolbar/index.md b/static/usage/segment/toolbar/index.md
new file mode 100644
index 00000000000..60de1cd3b66
--- /dev/null
+++ b/static/usage/segment/toolbar/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/segment/toolbar/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/segment/toolbar/javascript.md b/static/usage/segment/toolbar/javascript.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/segment/toolbar/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
+        <ion-label>All</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        <ion-label>Favorites</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/segment/toolbar/react.md b/static/usage/segment/toolbar/react.md
new file mode 100644
index 00000000000..098a14b8946
--- /dev/null
+++ b/static/usage/segment/toolbar/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonHeader, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonHeader>
+      <IonToolbar>
+        <IonSegment value="all">
+          <IonSegmentButton value="all">
+            <IonLabel>All</IonLabel>
+          </IonSegmentButton>
+          <IonSegmentButton value="favorites">
+            <IonLabel>Favorites</IonLabel>
+          </IonSegmentButton>
+        </IonSegment>
+      </IonToolbar>
+    </IonHeader>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/segment/toolbar/vue.md b/static/usage/segment/toolbar/vue.md
new file mode 100644
index 00000000000..9eccb6ee6f5
--- /dev/null
+++ b/static/usage/segment/toolbar/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-segment value="all">
+        <ion-segment-button value="all">
+          <ion-label>All</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="favorites">
+          <ion-label>Favorites</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+  </ion-header>
+</template>
+
+<script lang="ts">
+  import { IonLabel, IonHeader, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonLabel, IonHeader, IonSegment, IonSegmentButton, IonToolbar },
+  });
+</script>
+```

From 57ccb7e6d788337e8403fa4095f671035499ddfb Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 22 Sep 2022 12:43:22 -0400
Subject: [PATCH 072/469] docs(segment-button): add component playgrounds
 (#2573)

---
 docs/api/segment-button.md                    | 819 +-----------------
 static/usage/segment-button/basic/angular.md  |  25 +
 static/usage/segment-button/basic/demo.html   |  56 ++
 static/usage/segment-button/basic/index.md    |   8 +
 .../usage/segment-button/basic/javascript.md  |  25 +
 static/usage/segment-button/basic/react.md    |  35 +
 static/usage/segment-button/basic/vue.md      |  36 +
 static/usage/segment-button/layout/angular.md |  73 ++
 static/usage/segment-button/layout/demo.html  | 104 +++
 static/usage/segment-button/layout/index.md   |   8 +
 .../usage/segment-button/layout/javascript.md |  73 ++
 static/usage/segment-button/layout/react.md   |  84 ++
 static/usage/segment-button/layout/vue.md     |  88 ++
 .../angular/example_component_css.md          |  19 +
 .../angular/example_component_html.md         |  13 +
 .../theming/css-properties/demo.html          |  59 ++
 .../theming/css-properties/index.md           |  31 +
 .../theming/css-properties/javascript.md      |  33 +
 .../theming/css-properties/react/main_css.md  |  19 +
 .../theming/css-properties/react/main_tsx.md  |  23 +
 .../theming/css-properties/vue.md             |  44 +
 .../angular/example_component_css.md          |  31 +
 .../angular/example_component_html.md         |  13 +
 .../theming/css-shadow-parts/demo.html        |  71 ++
 .../theming/css-shadow-parts/index.md         |  31 +
 .../theming/css-shadow-parts/javascript.md    |  45 +
 .../css-shadow-parts/react/main_css.md        |  31 +
 .../css-shadow-parts/react/main_tsx.md        |  23 +
 .../theming/css-shadow-parts/vue.md           |  56 ++
 29 files changed, 1173 insertions(+), 803 deletions(-)
 create mode 100644 static/usage/segment-button/basic/angular.md
 create mode 100644 static/usage/segment-button/basic/demo.html
 create mode 100644 static/usage/segment-button/basic/index.md
 create mode 100644 static/usage/segment-button/basic/javascript.md
 create mode 100644 static/usage/segment-button/basic/react.md
 create mode 100644 static/usage/segment-button/basic/vue.md
 create mode 100644 static/usage/segment-button/layout/angular.md
 create mode 100644 static/usage/segment-button/layout/demo.html
 create mode 100644 static/usage/segment-button/layout/index.md
 create mode 100644 static/usage/segment-button/layout/javascript.md
 create mode 100644 static/usage/segment-button/layout/react.md
 create mode 100644 static/usage/segment-button/layout/vue.md
 create mode 100644 static/usage/segment-button/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/segment-button/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/segment-button/theming/css-properties/demo.html
 create mode 100644 static/usage/segment-button/theming/css-properties/index.md
 create mode 100644 static/usage/segment-button/theming/css-properties/javascript.md
 create mode 100644 static/usage/segment-button/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/segment-button/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/segment-button/theming/css-properties/vue.md
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/segment-button/theming/css-shadow-parts/vue.md

diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index bb2724f20b1..943c33cc5f2 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-segment-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/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';
@@ -24,821 +19,39 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-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 checked 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.
-
-
-
-
-## 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
-<!-- Segment buttons with text and click listener -->
-<ion-segment (ionChange)="segmentChanged($event)">
-  <ion-segment-button>
-    <ion-label>Friends</ion-label>
-  </ion-segment-button>
-  <ion-segment-button>
-    <ion-label>Enemies</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment buttons with the first checked and the last disabled -->
-<ion-segment value="paid">
-  <ion-segment-button value="paid">
-    <ion-label>Paid</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="free">
-    <ion-label>Free</ion-label>
-  </ion-segment-button>
-  <ion-segment-button disabled value="top">
-    <ion-label>Top</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment buttons with values and icons -->
-<ion-segment>
-  <ion-segment-button value="camera">
-    <ion-icon name="camera"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="bookmark">
-    <ion-icon name="bookmark"></ion-icon>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment with a value that checks the last button -->
-<ion-segment value="shared">
-  <ion-segment-button value="bookmarks">
-    <ion-label>Bookmarks</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="reading">
-    <ion-label>Reading List</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="shared">
-    <ion-label>Shared Links</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Label only -->
-<ion-segment value="1">
-  <ion-segment-button value="1">
-    <ion-label>Item One</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="2">
-    <ion-label>Item Two</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="3">
-    <ion-label>Item Three</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon only -->
-<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>
-
-<!-- Icon top -->
-<ion-segment value="2">
-  <ion-segment-button value="1">
-    <ion-label>Item One</ion-label>
-    <ion-icon name="call"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="2">
-    <ion-label>Item Two</ion-label>
-    <ion-icon name="heart"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="3">
-    <ion-label>Item Three</ion-label>
-    <ion-icon name="pin"></ion-icon>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon bottom -->
-<ion-segment value="1">
-  <ion-segment-button value="1" layout="icon-bottom">
-    <ion-icon name="call"></ion-icon>
-    <ion-label>Item One</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="2" layout="icon-bottom">
-    <ion-icon name="heart"></ion-icon>
-    <ion-label>Item Two</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="3" layout="icon-bottom">
-    <ion-icon name="pin"></ion-icon>
-    <ion-label>Item Three</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon start -->
-<ion-segment value="1">
-  <ion-segment-button value="1" layout="icon-start">
-    <ion-label>Item One</ion-label>
-    <ion-icon name="call"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="2" layout="icon-start">
-    <ion-label>Item Two</ion-label>
-    <ion-icon name="heart"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="3" layout="icon-start">
-    <ion-label>Item Three</ion-label>
-    <ion-icon name="pin"></ion-icon>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon end -->
-<ion-segment value="1">
-  <ion-segment-button value="1" layout="icon-end">
-    <ion-icon name="call"></ion-icon>
-    <ion-label>Item One</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="2" disabled layout="icon-end">
-    <ion-icon name="heart"></ion-icon>
-    <ion-label>Item Two</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="3" layout="icon-end">
-    <ion-icon name="pin"></ion-icon>
-    <ion-label>Item Three</ion-label>
-  </ion-segment-button>
-</ion-segment>
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'segment-button-example',
-  templateUrl: 'segment-button-example.html',
-  styleUrls: ['./segment-button-example.css'],
-})
-export class SegmentButtonExample {
-  segmentChanged(ev: any) {
-    console.log('Segment changed', ev);
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Segment buttons with text -->
-<ion-segment>
-  <ion-segment-button>
-    <ion-label>Friends</ion-label>
-  </ion-segment-button>
-  <ion-segment-button>
-    <ion-label>Enemies</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment buttons with the first checked and the last disabled -->
-<ion-segment value="paid">
-  <ion-segment-button value="paid">
-    <ion-label>Paid</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="free">
-    <ion-label>Free</ion-label>
-  </ion-segment-button>
-  <ion-segment-button disabled value="top">
-    <ion-label>Top</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment buttons with values and icons -->
-<ion-segment>
-  <ion-segment-button value="camera">
-    <ion-icon name="camera"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="bookmark">
-    <ion-icon name="bookmark"></ion-icon>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Segment with a value that checks the last button -->
-<ion-segment value="shared">
-  <ion-segment-button value="bookmarks">
-    <ion-label>Bookmarks</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="reading">
-    <ion-label>Reading List</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="shared">
-    <ion-label>Shared Links</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Label only -->
-<ion-segment value="1">
-  <ion-segment-button value="1">
-    <ion-label>Item One</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="2">
-    <ion-label>Item Two</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="3">
-    <ion-label>Item Three</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon only -->
-<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>
-
-<!-- Icon top -->
-<ion-segment value="2">
-  <ion-segment-button value="1">
-    <ion-label>Item One</ion-label>
-    <ion-icon name="call"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="2">
-    <ion-label>Item Two</ion-label>
-    <ion-icon name="heart"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="3">
-    <ion-label>Item Three</ion-label>
-    <ion-icon name="pin"></ion-icon>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon bottom -->
-<ion-segment value="1">
-  <ion-segment-button value="1" layout="icon-bottom">
-    <ion-icon name="call"></ion-icon>
-    <ion-label>Item One</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="2" layout="icon-bottom">
-    <ion-icon name="heart"></ion-icon>
-    <ion-label>Item Two</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="3" layout="icon-bottom">
-    <ion-icon name="pin"></ion-icon>
-    <ion-label>Item Three</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon start -->
-<ion-segment value="1">
-  <ion-segment-button value="1" layout="icon-start">
-    <ion-label>Item One</ion-label>
-    <ion-icon name="call"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="2" layout="icon-start">
-    <ion-label>Item Two</ion-label>
-    <ion-icon name="heart"></ion-icon>
-  </ion-segment-button>
-  <ion-segment-button value="3" layout="icon-start">
-    <ion-label>Item Three</ion-label>
-    <ion-icon name="pin"></ion-icon>
-  </ion-segment-button>
-</ion-segment>
-
-<!-- Icon end -->
-<ion-segment value="1">
-  <ion-segment-button value="1" layout="icon-end">
-    <ion-icon name="call"></ion-icon>
-    <ion-label>Item One</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="2" disabled layout="icon-end">
-    <ion-icon name="heart"></ion-icon>
-    <ion-label>Item Two</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="3" layout="icon-end">
-    <ion-icon name="pin"></ion-icon>
-    <ion-label>Item Three</ion-label>
-  </ion-segment-button>
-</ion-segment>
-```
-
-```javascript
-// Listen for ionChange on segment
-const segment = document.querySelector('ion-segment');
-segment.addEventListener('ionChange', (ev) => {
-  console.log('Segment changed', ev);
-})
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
-import { call, camera, bookmark, heart, pin } from 'ionicons/icons';
-
-export const SegmentButtonExamples: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>SegmentButton</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        {/*-- Segment buttons with text and click listener --*/}
-        <IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}>
-          <IonSegmentButton value="Friends">
-            <IonLabel>Friends</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="Enemies">
-            <IonLabel>Enemies</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Segment buttons with the first checked and the last disabled --*/}
-        <IonSegment value="paid">
-          <IonSegmentButton value="paid">
-            <IonLabel>Paid</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="free">
-            <IonLabel>Free</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton disabled value="top">
-            <IonLabel>Top</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Segment buttons with values and icons --*/}
-        <IonSegment>
-          <IonSegmentButton value="camera">
-            <IonIcon icon={camera} />
-          </IonSegmentButton>
-          <IonSegmentButton value="bookmark">
-            <IonIcon icon={bookmark} />
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Segment with a value that checks the last button --*/}
-        <IonSegment value="shared">
-          <IonSegmentButton value="bookmarks">
-            <IonLabel>Bookmarks</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="reading">
-            <IonLabel>Reading List</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="shared">
-            <IonLabel>Shared Links</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Label only --*/}
-        <IonSegment value="1">
-          <IonSegmentButton value="1">
-            <IonLabel>Item One</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="2">
-            <IonLabel>Item Two</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="3">
-            <IonLabel>Item Three</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Icon only --*/}
-        <IonSegment value="heart">
-          <IonSegmentButton value="call">
-            <IonIcon icon={call} />
-          </IonSegmentButton>
-          <IonSegmentButton value="heart">
-            <IonIcon icon={heart} />
-          </IonSegmentButton>
-          <IonSegmentButton value="pin">
-            <IonIcon icon={pin} />
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Icon top --*/}
-        <IonSegment value="2">
-          <IonSegmentButton value="1">
-            <IonLabel>Item One</IonLabel>
-            <IonIcon icon={call} />
-          </IonSegmentButton>
-          <IonSegmentButton value="2">
-            <IonLabel>Item Two</IonLabel>
-            <IonIcon icon={heart} />
-          </IonSegmentButton>
-          <IonSegmentButton value="3">
-            <IonLabel>Item Three</IonLabel>
-            <IonIcon icon={pin} />
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Icon bottom --*/}
-        <IonSegment value="1">
-          <IonSegmentButton value="1" layout="icon-bottom">
-            <IonIcon icon={call} />
-            <IonLabel>Item One</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="2" layout="icon-bottom">
-            <IonIcon icon={heart} />
-            <IonLabel>Item Two</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="3" layout="icon-bottom">
-            <IonIcon icon={pin} />
-            <IonLabel>Item Three</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Icon start --*/}
-        <IonSegment value="1">
-          <IonSegmentButton value="1" layout="icon-start">
-            <IonLabel>Item One</IonLabel>
-            <IonIcon icon={call} />
-          </IonSegmentButton>
-          <IonSegmentButton value="2" layout="icon-start">
-            <IonLabel>Item Two</IonLabel>
-            <IonIcon icon={heart} />
-          </IonSegmentButton>
-          <IonSegmentButton value="3" layout="icon-start">
-            <IonLabel>Item Three</IonLabel>
-            <IonIcon icon={pin} />
-          </IonSegmentButton>
-        </IonSegment>
-
-        {/*-- Icon end --*/}
-        <IonSegment value="1">
-          <IonSegmentButton value="1" layout="icon-end">
-            <IonIcon icon={call} />
-            <IonLabel>Item One</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="2" disabled layout="icon-end">
-            <IonIcon icon={heart} />
-            <IonLabel>Item Two</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="3" layout="icon-end">
-            <IonIcon icon={pin} />
-            <IonLabel>Item Three</IonLabel>
-          </IonSegmentButton>
-        </IonSegment>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'segment-button-example',
-  styleUrl: 'segment-button-example.css'
-})
-export class SegmentButtonExample {
-  segmentChanged(ev: any) {
-    console.log('Segment changed', ev);
-  }
-
-  render() {
-    return [
-      // Segment buttons with text and click listener
-      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
-        <ion-segment-button>
-          <ion-label>Friends</ion-label>
-        </ion-segment-button>
-        <ion-segment-button>
-          <ion-label>Enemies</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
-
-      // Segment buttons with the first checked and the last disabled
-      <ion-segment value="paid">
-        <ion-segment-button value="paid">
-          <ion-label>Paid</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="free">
-          <ion-label>Free</ion-label>
-        </ion-segment-button>
-        <ion-segment-button disabled value="top">
-          <ion-label>Top</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
-
-      // Segment buttons with values and icons
-      <ion-segment>
-        <ion-segment-button value="camera">
-          <ion-icon name="camera"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="bookmark">
-          <ion-icon name="bookmark"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>,
-
-      // Segment with a value that checks the last button
-      <ion-segment value="shared">
-        <ion-segment-button value="bookmarks">
-          <ion-label>Bookmarks</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="reading">
-          <ion-label>Reading List</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="shared">
-          <ion-label>Shared Links</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
+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.
 
-      // Label only
-      <ion-segment value="1">
-        <ion-segment-button value="1">
-          <ion-label>Item One</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="2">
-          <ion-label>Item Two</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="3">
-          <ion-label>Item Three</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
 
-      // Icon only
-      <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>,
+## Basic Usage
 
-      // Icon top
-      <ion-segment value="2">
-        <ion-segment-button value="1">
-          <ion-label>Item One</ion-label>
-          <ion-icon name="call"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="2">
-          <ion-label>Item Two</ion-label>
-          <ion-icon name="heart"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="3">
-          <ion-label>Item Three</ion-label>
-          <ion-icon name="pin"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>,
+import Basic from '@site/static/usage/segment-button/basic/index.md';
 
-      // Icon bottom
-      <ion-segment value="1">
-        <ion-segment-button value="1" layout="icon-bottom">
-          <ion-icon name="call"></ion-icon>
-          <ion-label>Item One</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="2" layout="icon-bottom">
-          <ion-icon name="heart"></ion-icon>
-          <ion-label>Item Two</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="3" layout="icon-bottom">
-          <ion-icon name="pin"></ion-icon>
-          <ion-label>Item Three</ion-label>
-        </ion-segment-button>
-      </ion-segment>,
+<Basic />
 
-      // Icon start
-      <ion-segment value="1">
-        <ion-segment-button value="1" layout="icon-start">
-          <ion-label>Item One</ion-label>
-          <ion-icon name="call"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="2" layout="icon-start">
-          <ion-label>Item Two</ion-label>
-          <ion-icon name="heart"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="3" layout="icon-start">
-          <ion-label>Item Three</ion-label>
-          <ion-icon name="pin"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>,
 
-      // Icon end
-      <ion-segment value="1">
-        <ion-segment-button value="1" layout="icon-end">
-          <ion-icon name="call"></ion-icon>
-          <ion-label>Item One</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="2" disabled layout="icon-end">
-          <ion-icon name="heart"></ion-icon>
-          <ion-label>Item Two</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="3" layout="icon-end">
-          <ion-icon name="pin"></ion-icon>
-          <ion-label>Item Three</ion-label>
-        </ion-segment-button>
-      </ion-segment>
-    ];
-  }
-}
-```
+## Layout
 
-</TabItem>
+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';
 
-<TabItem value="vue">
+<Layout />
 
-```html
-<template>
-  <!-- Segment buttons with text and click listener -->
-  <ion-segment @ionChange="segmentChanged($event)">
-    <ion-segment-button>
-      <ion-label>Friends</ion-label>
-    </ion-segment-button>
-    <ion-segment-button>
-      <ion-label>Enemies</ion-label>
-    </ion-segment-button>
-  </ion-segment>
 
-  <!-- Segment buttons with the first checked and the last disabled -->
-  <ion-segment value="paid">
-    <ion-segment-button value="paid">
-      <ion-label>Paid</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="free">
-      <ion-label>Free</ion-label>
-    </ion-segment-button>
-    <ion-segment-button disabled value="top">
-      <ion-label>Top</ion-label>
-    </ion-segment-button>
-  </ion-segment>
+## Theming
+### CSS Shadow Parts
 
-  <!-- Segment buttons with values and icons -->
-  <ion-segment>
-    <ion-segment-button value="camera">
-      <ion-icon :icon="camera"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="bookmark">
-      <ion-icon :icon="bookmark"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
+import CSSParts from '@site/static/usage/segment-button/theming/css-shadow-parts/index.md';
 
-  <!-- Segment with a value that checks the last button -->
-  <ion-segment value="shared">
-    <ion-segment-button value="bookmarks">
-      <ion-label>Bookmarks</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="reading">
-      <ion-label>Reading List</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="shared">
-      <ion-label>Shared Links</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-  
-  <!-- Label only -->
-  <ion-segment value="1">
-    <ion-segment-button value="1">
-      <ion-label>Item One</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="2">
-      <ion-label>Item Two</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="3">
-      <ion-label>Item Three</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-  
-  <!-- Icon only -->
-  <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>
-  
-  <!-- Icon top -->
-  <ion-segment value="2">
-    <ion-segment-button value="1">
-      <ion-label>Item One</ion-label>
-      <ion-icon :icon="call"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="2">
-      <ion-label>Item Two</ion-label>
-      <ion-icon :icon="heart"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="3">
-      <ion-label>Item Three</ion-label>
-      <ion-icon :icon="pin"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
-  
-  <!-- Icon bottom -->
-  <ion-segment value="1">
-    <ion-segment-button value="1" layout="icon-bottom">
-      <ion-icon :icon="call"></ion-icon>
-      <ion-label>Item One</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="2" layout="icon-bottom">
-      <ion-icon :icon="heart"></ion-icon>
-      <ion-label>Item Two</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="3" layout="icon-bottom">
-      <ion-icon :icon="pin"></ion-icon>
-      <ion-label>Item Three</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-  
-  <!-- Icon start -->
-  <ion-segment value="1">
-    <ion-segment-button value="1" layout="icon-start">
-      <ion-label>Item One</ion-label>
-      <ion-icon :icon="call"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="2" layout="icon-start">
-      <ion-label>Item Two</ion-label>
-      <ion-icon :icon="heart"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="3" layout="icon-start">
-      <ion-label>Item Three</ion-label>
-      <ion-icon :icon="pin"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
-  
-  <!-- Icon end -->
-  <ion-segment value="1">
-    <ion-segment-button value="1" layout="icon-end">
-      <ion-icon :icon="call"></ion-icon>
-      <ion-label>Item One</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="2" disabled layout="icon-end">
-      <ion-icon :icon="heart"></ion-icon>
-      <ion-label>Item Two</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="3" layout="icon-end">
-      <ion-icon :icon="pin"></ion-icon>
-      <ion-label>Item Three</ion-label>
-    </ion-segment-button>
-  </ion-segment>
-</template>
+<CSSParts />
 
-<script lang="ts">
-import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-import { bookmark, call, camera, heart, pin } from 'ionicons/icons';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  components: { IonIcon, IonLabel, IonSegment, IonSegmentButtonr },
-  methods: {
-    segmentChanged(ev: CustomEvent) {
-      console.log('Segment changed', ev);
-    }
-  }
-  setup() {
-    return { 
-      bookmark, 
-      call, 
-      camera, 
-      heart, 
-      pin
-    }
-  }
-});
-</script>
-```
+### CSS Custom Properties
 
+import CSSProps from '@site/static/usage/segment-button/theming/css-properties/index.md';
 
-</TabItem>
+<CSSProps />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -856,4 +69,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/segment-button/basic/angular.md b/static/usage/segment-button/basic/angular.md
new file mode 100644
index 00000000000..6f3fc0bb9ab
--- /dev/null
+++ b/static/usage/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/segment-button/basic/demo.html b/static/usage/segment-button/basic/demo.html
new file mode 100644
index 00000000000..16be7b65670
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment-button/basic/index.md b/static/usage/segment-button/basic/index.md
new file mode 100644
index 00000000000..a8cf57524db
--- /dev/null
+++ b/static/usage/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/segment-button/basic/demo.html" />
diff --git a/static/usage/segment-button/basic/javascript.md b/static/usage/segment-button/basic/javascript.md
new file mode 100644
index 00000000000..d001e59d7fc
--- /dev/null
+++ b/static/usage/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/segment-button/basic/react.md b/static/usage/segment-button/basic/react.md
new file mode 100644
index 00000000000..241242412bf
--- /dev/null
+++ b/static/usage/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/segment-button/basic/vue.md b/static/usage/segment-button/basic/vue.md
new file mode 100644
index 00000000000..79fd032d7ca
--- /dev/null
+++ b/static/usage/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/segment-button/layout/angular.md b/static/usage/segment-button/layout/angular.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/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/segment-button/layout/demo.html b/static/usage/segment-button/layout/demo.html
new file mode 100644
index 00000000000..50302d92672
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment-button/layout/index.md b/static/usage/segment-button/layout/index.md
new file mode 100644
index 00000000000..384497b5425
--- /dev/null
+++ b/static/usage/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/segment-button/layout/demo.html" size="medium" />
diff --git a/static/usage/segment-button/layout/javascript.md b/static/usage/segment-button/layout/javascript.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/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/segment-button/layout/react.md b/static/usage/segment-button/layout/react.md
new file mode 100644
index 00000000000..9b6c44ac073
--- /dev/null
+++ b/static/usage/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/segment-button/layout/vue.md b/static/usage/segment-button/layout/vue.md
new file mode 100644
index 00000000000..d3c60a4004d
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/segment-button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/segment-button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-properties/demo.html b/static/usage/segment-button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..7c1a4edb5ef
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment-button/theming/css-properties/index.md b/static/usage/segment-button/theming/css-properties/index.md
new file mode 100644
index 00000000000..0e8780c4ffb
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/segment-button/theming/css-properties/javascript.md b/static/usage/segment-button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f8ebaae2f19
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-properties/react/main_css.md b/static/usage/segment-button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/segment-button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-properties/vue.md b/static/usage/segment-button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..50c99688335
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/segment-button/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/segment-button/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-shadow-parts/demo.html b/static/usage/segment-button/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..0c219a52502
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment-button/theming/css-shadow-parts/index.md b/static/usage/segment-button/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..252d9eb47e6
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/segment-button/theming/css-shadow-parts/javascript.md b/static/usage/segment-button/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..102ba6ccd19
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/segment-button/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/segment-button/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/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/segment-button/theming/css-shadow-parts/vue.md b/static/usage/segment-button/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..911d8b7854e
--- /dev/null
+++ b/static/usage/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>
+```

From e2d1e630bd1fd3dede0dbbce4a74707da0f1bfb8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 22 Sep 2022 15:24:50 -0400
Subject: [PATCH 073/469] docs(vue): remove extra 'overview' heading (#2575)

---
 docs/vue/overview.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/vue/overview.md b/docs/vue/overview.md
index ee621a5e36b..aadd0add9d8 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -1,4 +1,5 @@
 ---
+title: 'Ionic Vue Overview'
 sidebar_label: Overview
 ---
 
@@ -13,8 +14,6 @@ sidebar_label: Overview
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-# Ionic Vue Overview
-
 `@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
 
 ## Vue Version Support

From 39e320a4c3b8613f0c81f291d2324c3e9a99b99d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 23 Sep 2022 11:49:25 -0400
Subject: [PATCH 074/469] docs(api): remove contents header from new api docs
 (#2577)

---
 docs/api/accordion.md      | 4 +---
 docs/api/item-divider.md   | 1 -
 docs/api/item-group.md     | 1 -
 docs/api/item-sliding.md   | 2 --
 docs/api/list-header.md    | 1 -
 docs/api/list.md           | 9 ---------
 docs/api/progress-bar.md   | 1 -
 docs/api/segment-button.md | 1 -
 docs/api/segment.md        | 1 -
 docs/api/spinner.md        | 2 --
 10 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 62c510899a1..009fd9a10c4 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -17,8 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
 
 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.
 
@@ -30,7 +28,7 @@ import Basic from '@site/static/usage/accordion/basic/index.md';
 
 ## 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. 
+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';
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index af77d95e424..9ef7dcadc9d 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
 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.
 
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index afa67be4984..07834fa19e0 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -15,7 +15,6 @@ import Slots from '@site/static/auto-generated/item-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-<h2 className="table-of-contents__title">Contents</h2>
 
 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).
 
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 185f99cc036..818e268c1b6 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -15,8 +15,6 @@ import Slots from '@site/static/auto-generated/item-sliding/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-<h2 className="table-of-contents__title">Contents</h2>
-
 
 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.
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 5337c8ecff5..bbe19e76a20 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -12,7 +12,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
 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).
 
diff --git a/docs/api/list.md b/docs/api/list.md
index 6114ac31f69..dd3c4fa08c3 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -16,15 +16,6 @@ import Slots from '@site/static/auto-generated/list/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 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.
 
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 195ed1d294c..9a8692b1362 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
 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`.
 
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index 943c33cc5f2..d7a77fc9f18 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
 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.
 
diff --git a/docs/api/segment.md b/docs/api/segment.md
index fe6c384db43..b3251c371f5 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
 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.
 
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index 65675a91f1a..1439089e1d9 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -17,8 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
 
 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.
 

From d5971c5210988bc55f2f56180fac3f87e2674239 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 23 Sep 2022 13:04:34 -0400
Subject: [PATCH 075/469] docs(alert): use composition api for vue examples
 (#2572)

---
 static/usage/alert/buttons/vue.md             | 28 +++++++++++--------
 static/usage/alert/customization/vue.md       |  8 ++++--
 static/usage/alert/inputs/radios/vue.md       |  8 ++++--
 static/usage/alert/inputs/text-inputs/vue.md  |  8 ++++--
 .../usage/alert/presenting/controller/vue.md  |  8 ++++--
 5 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/static/usage/alert/buttons/vue.md b/static/usage/alert/buttons/vue.md
index f3aab5ef08a..0e22b47e911 100644
--- a/static/usage/alert/buttons/vue.md
+++ b/static/usage/alert/buttons/vue.md
@@ -6,18 +6,16 @@
 </template>
 
 <script lang="ts">
+  import { ref } from 'vue';
   import { IonButton, alertController } from '@ionic/vue';
 
   export default {
     components: { IonButton },
-    data() {
-      return {
-        handlerMessage: '',
-        roleMessage: '',
-      };
-    },
-    methods: {
-      async presentAlert() {
+    setup() {
+      const handlerMessage = ref('');
+      const roleMessage = ref('');
+
+      const presentAlert = async () => {
         const alert = await alertController.create({
           header: 'Alert!',
           buttons: [
@@ -25,14 +23,14 @@
               text: 'Cancel',
               role: 'cancel',
               handler: () => {
-                this.handlerMessage = 'Alert canceled';
+                handlerMessage.value = 'Alert canceled';
               },
             },
             {
               text: 'OK',
               role: 'confirm',
               handler: () => {
-                this.handlerMessage = 'Alert confirmed';
+                handlerMessage.value = 'Alert confirmed';
               },
             },
           ],
@@ -41,8 +39,14 @@
         await alert.present();
 
         const { role } = await alert.onDidDismiss();
-        this.roleMessage = `Dismissed with role: ${role}`;
-      },
+        roleMessage.value = `Dismissed with role: ${role}`;
+      };
+
+      return {
+        handlerMessage,
+        roleMessage,
+        presentAlert,
+      };
     },
   };
 </script>
diff --git a/static/usage/alert/customization/vue.md b/static/usage/alert/customization/vue.md
index f07233f64e1..bf3ae0d5edf 100644
--- a/static/usage/alert/customization/vue.md
+++ b/static/usage/alert/customization/vue.md
@@ -8,8 +8,8 @@
 
   export default {
     components: { IonButton },
-    methods: {
-      async presentAlert() {
+    setup() {
+      const presentAlert = async () => {
         const alert = await alertController.create({
           header: 'Are you sure?',
           cssClass: 'custom-alert',
@@ -26,7 +26,9 @@
         });
 
         await alert.present();
-      },
+      };
+
+      return { presentAlert };
     },
   };
 </script>
diff --git a/static/usage/alert/inputs/radios/vue.md b/static/usage/alert/inputs/radios/vue.md
index 3397fe5f507..2122acba635 100644
--- a/static/usage/alert/inputs/radios/vue.md
+++ b/static/usage/alert/inputs/radios/vue.md
@@ -8,8 +8,8 @@
 
   export default {
     components: { IonButton },
-    methods: {
-      async presentAlert() {
+    setup() {
+      const presentAlert = async () => {
         const alert = await alertController.create({
           header: 'Select your favorite color',
           buttons: ['OK'],
@@ -33,7 +33,9 @@
         });
 
         await alert.present();
-      },
+      };
+
+      return { presentAlert };
     },
   };
 </script>
diff --git a/static/usage/alert/inputs/text-inputs/vue.md b/static/usage/alert/inputs/text-inputs/vue.md
index f28221e380e..32edc59e311 100644
--- a/static/usage/alert/inputs/text-inputs/vue.md
+++ b/static/usage/alert/inputs/text-inputs/vue.md
@@ -8,8 +8,8 @@
 
   export default {
     components: { IonButton },
-    methods: {
-      async presentAlert() {
+    setup() {
+      const presentAlert = async () => {
         const alert = await alertController.create({
           header: 'Please enter your info',
           buttons: ['OK'],
@@ -37,7 +37,9 @@
         });
 
         await alert.present();
-      },
+      };
+
+      return { presentAlert };
     },
   };
 </script>
diff --git a/static/usage/alert/presenting/controller/vue.md b/static/usage/alert/presenting/controller/vue.md
index 77322bbdb9b..6ec781a6bf2 100644
--- a/static/usage/alert/presenting/controller/vue.md
+++ b/static/usage/alert/presenting/controller/vue.md
@@ -8,8 +8,8 @@
 
   export default {
     components: { IonButton },
-    methods: {
-      async presentAlert() {
+    setup() {
+      const presentAlert = async () => {
         const alert = await alertController.create({
           header: 'Alert',
           subHeader: 'Important message',
@@ -18,7 +18,9 @@
         });
 
         await alert.present();
-      },
+      };
+
+      return { presentAlert };
     },
   };
 </script>

From a10cd7b36a2ce034e81e1220b11100073b520b07 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 26 Sep 2022 12:26:51 -0400
Subject: [PATCH 076/469] docs(action-sheet): component playground examples
 (#2571)

---
 docs/api/action-sheet.md                      | 538 +-----------------
 .../basic/angular/example_component_css.md    |  13 +
 .../basic/angular/example_component_html.md   |   6 +
 .../basic/angular/example_component_ts.md     |  50 ++
 static/usage/action-sheet/basic/demo.html     |  70 +++
 static/usage/action-sheet/basic/index.md      |  34 ++
 static/usage/action-sheet/basic/javascript.md |  58 ++
 .../action-sheet/basic/react/main_css.md      |  13 +
 .../action-sheet/basic/react/main_tsx.md      |  52 ++
 static/usage/action-sheet/basic/vue.md        |  73 +++
 .../angular/example_component_html.md         |   3 +
 .../angular/example_component_ts.md           |  46 ++
 .../css-properties/angular/global_css.md      |  12 +
 .../theming/css-properties/demo.html          |  67 +++
 .../theming/css-properties/index.md           |  34 ++
 .../theming/css-properties/javascript.md      |  49 ++
 .../theming/css-properties/react/main_css.md  |  11 +
 .../theming/css-properties/react/main_tsx.md  |  47 ++
 .../theming/css-properties/vue.md             |  60 ++
 .../styling/angular/example_component_html.md |   3 +
 .../styling/angular/example_component_ts.md   |  46 ++
 .../theming/styling/angular/global_css.md     |  29 +
 .../action-sheet/theming/styling/demo.html    |  84 +++
 .../action-sheet/theming/styling/index.md     |  34 ++
 .../theming/styling/javascript.md             |  66 +++
 .../theming/styling/react/main_css.md         |  28 +
 .../theming/styling/react/main_tsx.md         |  47 ++
 .../usage/action-sheet/theming/styling/vue.md |  76 +++
 28 files changed, 1127 insertions(+), 522 deletions(-)
 create mode 100644 static/usage/action-sheet/basic/angular/example_component_css.md
 create mode 100644 static/usage/action-sheet/basic/angular/example_component_html.md
 create mode 100644 static/usage/action-sheet/basic/angular/example_component_ts.md
 create mode 100644 static/usage/action-sheet/basic/demo.html
 create mode 100644 static/usage/action-sheet/basic/index.md
 create mode 100644 static/usage/action-sheet/basic/javascript.md
 create mode 100644 static/usage/action-sheet/basic/react/main_css.md
 create mode 100644 static/usage/action-sheet/basic/react/main_tsx.md
 create mode 100644 static/usage/action-sheet/basic/vue.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/angular/example_component_ts.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/angular/global_css.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/demo.html
 create mode 100644 static/usage/action-sheet/theming/css-properties/index.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/javascript.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/action-sheet/theming/css-properties/vue.md
 create mode 100644 static/usage/action-sheet/theming/styling/angular/example_component_html.md
 create mode 100644 static/usage/action-sheet/theming/styling/angular/example_component_ts.md
 create mode 100644 static/usage/action-sheet/theming/styling/angular/global_css.md
 create mode 100644 static/usage/action-sheet/theming/styling/demo.html
 create mode 100644 static/usage/action-sheet/theming/styling/index.md
 create mode 100644 static/usage/action-sheet/theming/styling/javascript.md
 create mode 100644 static/usage/action-sheet/theming/styling/react/main_css.md
 create mode 100644 static/usage/action-sheet/theming/styling/react/main_tsx.md
 create mode 100644 static/usage/action-sheet/theming/styling/vue.md

diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 5245548a7c9..585bb446107 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-action-sheet"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/action-sheet/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/action-sheet/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,16 +17,12 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
 
+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';
 
-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.
+<Basic />
 
 ## Buttons
 
@@ -41,11 +30,13 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
 
 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.
 
-## Customization
+## 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.
 
-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. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.
+### 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 */
@@ -59,17 +50,17 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
 }
 ```
 
-Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Action Sheet without needing to target individual elements:
+import Styling from '@site/static/usage/action-sheet/theming/styling/index.md';
 
-```css
-.my-custom-class {
-  --background: #e5e5e5;
-}
-```
+<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/action-sheet/theming/css-properties/index.md';
 
-:::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.
-:::
+<CssCustomProperties />
 
 ## Accessibility
 
@@ -113,503 +104,6 @@ interface ActionSheetOptions {
 }
 ```
 
-
-
-## 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">
-
-```typescript
-import { Component } from '@angular/core';
-import { ActionSheetController } from '@ionic/angular';
-
-@Component({
-  selector: 'action-sheet-example',
-  templateUrl: 'action-sheet-example.html',
-  styleUrls: ['./action-sheet-example.css'],
-})
-export class ActionSheetExample {
-
-  constructor(public actionSheetController: ActionSheetController) {}
-
-  async presentActionSheet() {
-    const actionSheet = await this.actionSheetController.create({
-      header: 'Albums',
-      cssClass: 'my-custom-class',
-      buttons: [{
-        text: 'Delete',
-        role: 'destructive',
-        icon: 'trash',
-        id: 'delete-button',
-        data: {
-          type: 'delete'
-        },
-        handler: () => {
-          console.log('Delete clicked');
-        }
-      }, {
-        text: 'Share',
-        icon: 'share',
-        data: 10,
-        handler: () => {
-          console.log('Share clicked');
-        }
-      }, {
-        text: 'Play (open modal)',
-        icon: 'caret-forward-circle',
-        data: 'Data value',
-        handler: () => {
-          console.log('Play clicked');
-        }
-      }, {
-        text: 'Favorite',
-        icon: 'heart',
-        handler: () => {
-          console.log('Favorite clicked');
-        }
-      }, {
-        text: 'Cancel',
-        icon: 'close',
-        role: 'cancel',
-        handler: () => {
-          console.log('Cancel clicked');
-        }
-      }]
-    });
-    await actionSheet.present();
-
-    const { role, data } = await actionSheet.onDidDismiss();
-    console.log('onDidDismiss resolved with role and data', role, data);
-  }
-
-}
-```
-
-
-### Style Placement
-
-In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the `ion-action-sheet` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```javascript
-async function presentActionSheet() {
-  const actionSheet = document.createElement('ion-action-sheet');
-
-  actionSheet.header = 'Albums';
-  actionSheet.cssClass = 'my-custom-class';
-  actionSheet.buttons = [{
-    text: 'Delete',
-    role: 'destructive',
-    icon: 'trash',
-    id: 'delete-button',
-    data: {
-      type: 'delete'
-    },
-    handler: () => {
-      console.log('Delete clicked');
-    }
-  }, {
-    text: 'Share',
-    icon: 'share',
-    data: 10,
-    handler: () => {
-      console.log('Share clicked');
-    }
-  }, {
-    text: 'Play (open modal)',
-    icon: 'caret-forward-circle',
-    data: 'Data value',
-    handler: () => {
-      console.log('Play clicked');
-    }
-  }, {
-    text: 'Favorite',
-    icon: 'heart',
-    handler: () => {
-      console.log('Favorite clicked');
-    }
-  }, {
-    text: 'Cancel',
-    icon: 'close',
-    role: 'cancel',
-    handler: () => {
-      console.log('Cancel clicked');
-    }
-  }];
-  document.body.appendChild(actionSheet);
-  await actionSheet.present();
-
-  const { role, data } = await actionSheet.onDidDismiss();
-  console.log('onDidDismiss resolved with role and data', role, data);
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-/* Using with useIonActionSheet Hook */
-
-import React from 'react';
-import {
-  IonButton,
-  IonContent,
-  IonPage,
-  useIonActionSheet,
-} from '@ionic/react';
-
-const ActionSheetExample: React.FC = () => {
-  const [present, dismiss] = useIonActionSheet();
-
-  return (
-    <IonPage>
-      <IonContent>
-        <IonButton
-          expand="block"
-          onClick={() =>
-            present({
-              buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
-              header: 'Action Sheet'
-            })
-          }
-        >
-          Show ActionSheet
-        </IonButton>
-        <IonButton
-          expand="block"
-          onClick={() =>
-            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
-          }
-        >
-          Show ActionSheet using params
-        </IonButton>
-        <IonButton
-          expand="block"
-          onClick={() => {
-            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
-            setTimeout(dismiss, 3000);
-          }}
-        >
-          Show ActionSheet, hide after 3 seconds
-        </IonButton>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-```tsx
-/* Using with IonActionSheet Component */
-
-import React, { useState } from 'react';
-import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
-import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
-
-export const ActionSheetExample: React.FC = () => {
-  const [showActionSheet, setShowActionSheet] = useState(false);
-
-  return (
-    <IonContent>
-      <IonButton onClick={() => setShowActionSheet(true)} expand="block">
-        Show Action Sheet
-      </IonButton>
-      <IonActionSheet
-        isOpen={showActionSheet}
-        onDidDismiss={() => setShowActionSheet(false)}
-        cssClass='my-custom-class'
-        buttons={[{
-          text: 'Delete',
-          role: 'destructive',
-          icon: trash,
-          id: 'delete-button',
-          data: {
-            type: 'delete'
-          },
-          handler: () => {
-            console.log('Delete clicked');
-          }
-        }, {
-          text: 'Share',
-          icon: share,
-          data: 10,
-          handler: () => {
-            console.log('Share clicked');
-          }
-        }, {
-          text: 'Play (open modal)',
-          icon: caretForwardCircle,
-          data: 'Data value',
-          handler: () => {
-            console.log('Play clicked');
-          }
-        }, {
-          text: 'Favorite',
-          icon: heart,
-          handler: () => {
-            console.log('Favorite clicked');
-          }
-        }, {
-          text: 'Cancel',
-          icon: close,
-          role: 'cancel',
-          handler: () => {
-            console.log('Cancel clicked');
-          }
-        }]}
-      >
-      </IonActionSheet>
-    </IonContent>
-  );
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-import { actionSheetController } from '@ionic/core';
-
-@Component({
-  tag: 'action-sheet-example',
-  styleUrl: 'action-sheet-example.css'
-})
-export class ActionSheetExample {
-  async presentActionSheet() {
-    const actionSheet = await actionSheetController.create({
-      header: 'Albums',
-      cssClass: 'my-custom-class',
-      buttons: [{
-        text: 'Delete',
-        role: 'destructive',
-        icon: 'trash',
-        id: 'delete-button',
-        data: {
-          type: 'delete'
-        },
-        handler: () => {
-          console.log('Delete clicked');
-        }
-      }, {
-        text: 'Share',
-        icon: 'share',
-        data: 10,
-        handler: () => {
-          console.log('Share clicked');
-        }
-      }, {
-        text: 'Play (open modal)',
-        icon: 'caret-forward-circle',
-        data: 'Data value',
-        handler: () => {
-          console.log('Play clicked');
-        }
-      }, {
-        text: 'Favorite',
-        icon: 'heart',
-        handler: () => {
-          console.log('Favorite clicked');
-        }
-      }, {
-        text: 'Cancel',
-        icon: 'close',
-        role: 'cancel',
-        handler: () => {
-          console.log('Cancel clicked');
-        }
-      }]
-    });
-    await actionSheet.present();
-
-    const { role, data } = await actionSheet.onDidDismiss();
-    console.log('onDidDismiss resolved with role and data', role, data);
-  }
-
-  render() {
-    return [
-      <ion-content>
-        <ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
-      </ion-content>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
-</template>
-
-<script>
-import { IonButton, actionSheetController } from '@ionic/vue';
-import { defineComponent } from 'vue';
-import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
-
-export default defineComponent({
-  components: { IonButton },
-  methods: {
-    async presentActionSheet() {
-      const actionSheet = await actionSheetController
-        .create({
-          header: 'Albums',
-          cssClass: 'my-custom-class',
-          buttons: [
-            {
-              text: 'Delete',
-              role: 'destructive',
-              icon: trash,
-              id: 'delete-button', 
-              data: {
-                type: 'delete'
-              },
-              handler: () => {
-                console.log('Delete clicked')
-              },
-            },
-            {
-              text: 'Share',
-              icon: share,
-              data: 10,  
-              handler: () => {
-                console.log('Share clicked')
-              },
-            },
-            {
-              text: 'Play (open modal)',
-              icon: caretForwardCircle,
-              data: 'Data value',
-              handler: () => {
-                console.log('Play clicked')
-              },
-            },
-            {
-              text: 'Favorite',
-              icon: heart,
-              handler: () => {
-                console.log('Favorite clicked')
-              },
-            },
-            {
-              text: 'Cancel',
-              icon: close,
-              role: 'cancel',
-              handler: () => {
-                console.log('Cancel clicked')
-              },
-            },
-          ],
-        });
-      await actionSheet.present();
-
-      const { role, data } = await actionSheet.onDidDismiss();
-      console.log('onDidDismiss resolved with role and data', role, data);
-    },
-  },
-});
-</script>
-```
-
-Developers can also use this component directly in their template:
-
-```html
-<template>
-  <ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
-  <ion-action-sheet
-    :is-open="isOpenRef"
-    header="Albums"
-    css-class="my-custom-class"
-    :buttons="buttons"
-    @didDismiss="setOpen(false)"
-  >
-  </ion-action-sheet>
-</template>
-
-<script>
-import { IonActionSheet, IonButton } from '@ionic/vue';
-import { defineComponent, ref } from 'vue';
-import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
-
-export default defineComponent({
-  components: { IonActionSheet, IonButton },
-  setup() {
-    const isOpenRef = ref(false);
-    const setOpen = (state: boolean) => isOpenRef.value = state;
-    const buttons = [
-      {
-        text: 'Delete',
-        role: 'destructive',
-        icon: trash,
-        data: {
-          type: 'delete'
-        }
-        handler: () => {
-          console.log('Delete clicked')
-        },
-      },
-      {
-        text: 'Share',
-        icon: share,
-        data: 10,  
-        handler: () => {
-          console.log('Share clicked')
-        },
-      },
-      {
-        text: 'Play (open modal)',
-        icon: caretForwardCircle,
-        data: 'Data value',  
-        handler: () => {
-          console.log('Play clicked')
-        },
-      },
-      {
-        text: 'Favorite',
-        icon: heart,
-        handler: () => {
-          console.log('Favorite clicked')
-        },
-      },
-      {
-        text: 'Cancel',
-        icon: close,
-        role: 'cancel',
-        handler: () => {
-          console.log('Cancel clicked')
-        },
-      },
-    ];
-    
-    return { buttons, isOpenRef, setOpen }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
diff --git a/static/usage/action-sheet/basic/angular/example_component_css.md b/static/usage/action-sheet/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..5058c1b3377
--- /dev/null
+++ b/static/usage/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/action-sheet/basic/angular/example_component_html.md b/static/usage/action-sheet/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..0169d776c0f
--- /dev/null
+++ b/static/usage/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/action-sheet/basic/angular/example_component_ts.md b/static/usage/action-sheet/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..3961dc7ff5e
--- /dev/null
+++ b/static/usage/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/action-sheet/basic/demo.html b/static/usage/action-sheet/basic/demo.html
new file mode 100644
index 00000000000..612c74dfc9c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/action-sheet/basic/index.md b/static/usage/action-sheet/basic/index.md
new file mode 100644
index 00000000000..ae1e85f0446
--- /dev/null
+++ b/static/usage/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/action-sheet/basic/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/action-sheet/basic/javascript.md b/static/usage/action-sheet/basic/javascript.md
new file mode 100644
index 00000000000..ec0dbca6eb3
--- /dev/null
+++ b/static/usage/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/action-sheet/basic/react/main_css.md b/static/usage/action-sheet/basic/react/main_css.md
new file mode 100644
index 00000000000..5058c1b3377
--- /dev/null
+++ b/static/usage/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/action-sheet/basic/react/main_tsx.md b/static/usage/action-sheet/basic/react/main_tsx.md
new file mode 100644
index 00000000000..c24b2e00076
--- /dev/null
+++ b/static/usage/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/action-sheet/basic/vue.md b/static/usage/action-sheet/basic/vue.md
new file mode 100644
index 00000000000..fa29fa1de89
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/angular/example_component_html.md b/static/usage/action-sheet/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..2cc044fbee1
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/action-sheet/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f200f27ee
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/angular/global_css.md b/static/usage/action-sheet/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..2d9e22b3163
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/demo.html b/static/usage/action-sheet/theming/css-properties/demo.html
new file mode 100644
index 00000000000..e2a8be4dd69
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/action-sheet/theming/css-properties/index.md b/static/usage/action-sheet/theming/css-properties/index.md
new file mode 100644
index 00000000000..312cf84ec09
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/action-sheet/theming/css-properties/javascript.md b/static/usage/action-sheet/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f7b87dca8b9
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/react/main_css.md b/static/usage/action-sheet/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..63809ed75c7
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/action-sheet/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..bfcc13c92ea
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/css-properties/vue.md b/static/usage/action-sheet/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c2a422e14ac
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/angular/example_component_html.md b/static/usage/action-sheet/theming/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..2cc044fbee1
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/action-sheet/theming/styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f200f27ee
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/angular/global_css.md b/static/usage/action-sheet/theming/styling/angular/global_css.md
new file mode 100644
index 00000000000..46999a97921
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/demo.html b/static/usage/action-sheet/theming/styling/demo.html
new file mode 100644
index 00000000000..3de49c4c4f9
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/action-sheet/theming/styling/index.md b/static/usage/action-sheet/theming/styling/index.md
new file mode 100644
index 00000000000..9fc385205c2
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/action-sheet/theming/styling/javascript.md b/static/usage/action-sheet/theming/styling/javascript.md
new file mode 100644
index 00000000000..c74b95b41f7
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/react/main_css.md b/static/usage/action-sheet/theming/styling/react/main_css.md
new file mode 100644
index 00000000000..cff22cfd41e
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/react/main_tsx.md b/static/usage/action-sheet/theming/styling/react/main_tsx.md
new file mode 100644
index 00000000000..bfcc13c92ea
--- /dev/null
+++ b/static/usage/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/action-sheet/theming/styling/vue.md b/static/usage/action-sheet/theming/styling/vue.md
new file mode 100644
index 00000000000..d0b199ba480
--- /dev/null
+++ b/static/usage/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>
+```

From 14f4691c27329a3b4c2af7cd855b3719f3299aac Mon Sep 17 00:00:00 2001
From: Redouane Bekkouche <redouane.bekk@gmail.com>
Date: Tue, 27 Sep 2022 17:25:07 +0100
Subject: [PATCH 077/469] docs(hardware-back-button): IonRouterOutlet is an
 optional provider (#2506)

Co-authored-by: Sean Perkins <sean@ionic.io>
---
 docs/developing/hardware-back-button.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index 6e4dc4f1356..a887f2eea46 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -266,6 +266,7 @@ document.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
 <TabItem value="angular">
 
 ```tsx
+import { Optional } from '@angular/core';
 import { IonRouterOutlet, Platform } from '@ionic/angular';
 import { App } from '@capacitor/app';
 
@@ -273,7 +274,7 @@ import { App } from '@capacitor/app';
 
 constructor(
   private platform: Platform,
-  private routerOutlet: IonRouterOutlet
+  @Optional() private routerOutlet?: IonRouterOutlet
 ) {
   this.platform.backButton.subscribeWithPriority(-1, () => {
     if (!this.routerOutlet.canGoBack()) {

From 06c04a280edcd7cfb2fbff033d46dd2be2d0517d Mon Sep 17 00:00:00 2001
From: John Wheeler <73669769+johnwheeler-prod@users.noreply.github.com>
Date: Wed, 28 Sep 2022 10:49:13 -0400
Subject: [PATCH 078/469] Feat/update favicon (#2581)

* chore(docs pages): update favicons

* chore(docs pages meta): update 96x96 favicon
---
 static/img/meta/favicon-16x16.png | Bin 572 -> 686 bytes
 static/img/meta/favicon-32x32.png | Bin 1116 -> 1509 bytes
 static/img/meta/favicon-96x96.png | Bin 3768 -> 3553 bytes
 static/img/meta/favicon.ico       | Bin 15086 -> 15086 bytes
 4 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/static/img/meta/favicon-16x16.png b/static/img/meta/favicon-16x16.png
index 687c8ead6bcaff0a70b4eee5bf202b04e2d33e4f..c883fde474221230a4d7494b88daa3a2d1c8b9bc 100644
GIT binary patch
delta 612
zcmV-q0-OE31g-^;Reu6QNkl<ZcmZvbO=y!r5Qd*kgFj$u1r=+0$g%#l5r6PzB8mr<
zq<YYUhaRP3iB~U)_Ta@sqC#(0dR9o!wzMizMU;3kihmJ{-Zagj8k&6TO!iB@Ry(ll
z?(Dqp&dk1R_{aKlHenm2Wtp-bF>9geQIdVht8=}QH<gv~rhmPN=WNe1WCf5BAf5nq
zRszqT{gJ29BC2)>6x;|gCxF3DpcepTwlWOX5o<P!O_Eh13G2=ak(I;2b~cA&Fp`jR
zdZBv*y!ecH_zE7plp7skJR;dj3Rg}1rj0e1`O;<|ISLn#z~nrXzr*5hII#<c4mh$4
z<1qiBlSwix4S&lT<5Eq>9e8*G-U>Ln8LCV0{3Gn_5u!a%TXJ>lP)Jx-ab2k=B}Gh0
zzso=1$}zZ{bS2%MhD(#MJ>rNkorb1D+CvRe$04bG=ABEm4OSaH4t)ZQZG~&6U96u)
zEYynd9ksdxcW>lBtNm$(v9C{JP2dj+vf^{_UQ+Mh0e=g>;O=Y?bZ5pj^W<K5{Wb6l
zrWBTRib9f6((%VoI1kfhArR30XAoHj-+sdGD4aV8H;S$V-%4G*$y{9=!@AR(*NZZ;
zXJFeVNn37>Zh=z+Fm@L1J%Nd*0YTU>)T(A+%;rTLqjF&MP+udx-w8@<S3MLS$#Z@R
z6e>C>EM4SHCXljWR*H&yzV@-Jq#VfG?ca1+68axnuTaW~rY-t#1sgPIO_Li7ZLq&z
yZStLC#v|wH#}dt3C-I7HG9`1da?8xEjQ<PVs}~_wd|j;o0000<MNUMnLSTYa3?7;Q

delta 497
zcmV<N0S^AI1-t~1Reu4|Nkl<Zcma)5OG^S#6h8B8M8P2F31LMA1r^bv7C|qfMf4(S
zTNM3|6x-&QxYcdDs2`BIk|0bsEzSOb(<;fv+dW6FTus9dhWYL{_ndp?JLdv4L-(!d
zUA~BFdJCHAW%zKO<?jT56@d2W?p6)&wFqkW=zI_E6;X-^)_=`PiUG_*2jKf&tKY^d
zfa8$ReDd1H7E3*)S*cWF2;`^d7cD9wSONLNWiU*E_&zv1ret<B#x;kM;kurL`vsgN
zg>ZUyLBaD2OSB#vpJF||L&WdyA1HzNM&@#}K{tF^Az-Pt9jjFm3Nr!Zs11)!vgP${
z`Bw@cmoG}}>3<z$%@~`QV(XhbEc5c#;Dsu?>o}jhAAa!r{ePTyxZ&>47tBqMH0YS%
zT`Y3>Jj~9_K(Y7%!O&HG6LL(xzqbpS%yUCKc?*3JxqaxiFbWMsBax$q2BXo^FC;Wg
zHOqXQPB0^$Y*`k>V>a{;^wFt-z%U#i9da!K(VI9#V`}kw1+MDu6VatAL_1TdG?|B|
zBA5G5Gk`6WM_Dy1k9;u)os6;qxvIxlL1(p^R4y~ud#kC;!&5H)7py3X?Rtz8YD-I4
nG}=jiKeEzwE?~(tx=r{69~vjH+-1j|00000NkvXXu0mjff3ECC

diff --git a/static/img/meta/favicon-32x32.png b/static/img/meta/favicon-32x32.png
index e5429ddbd07d2f1024bebc4aca994a5714ec7076..2a5cbd69bf96f34ccbe87749246fc07ca509b52a 100644
GIT binary patch
delta 1442
zcmV;T1zq~w2;~cqReuF~Nkl<ZcmbVPO>9*~6#nM6YN4e*6Bg1+^1ww42K&&Y5;bY-
zPyC5ut6|~BmW3MYqK}Qg7^{HBm9Hkooh_P}m<T06Or+I@s1c~qZc1?>y#|UT8hF;9
zQflvT&YhV%Gw<E<8cuUN^XAT-^PT@Q0?VXqzs%GuqLZd=QGbLSB(f05$S8hYq%oAh
z1R@+=T)=^_Ad1U5S5(@N>zCQf5%M(cjwCX~7?K};sps)j+D9#5C|bZ<1SGsB0K_=6
z0K7@lJTaCep@3nk8KQ(~6eY~<9-x3a0@9zZ5wVoi#C(jVSy>`wnFat)6EO$_AWFUq
zMTCwtZ3HRIbAO8hV}vZ5pcGcJgrq-u>KD$ao~#To)|i($TulQkc|;pY<yp_RzBHaT
zT;>(EMVh!Q(Q)3<gm9Q=i22WwnVS#bA6j=k&~*pUngyC~1{!Zt>r=l2XD<Sylfb?o
z$qXqV$uv^)3uh%Z7j={*0B(O<zE4BmFfTo%qX~HDNq?Ze23I8p^1%pj>{ps!a5PB&
zggv)#rXY4C0AkfwVOlyiHXhAOFFyo4v&FtU5t7vBl;o=jP-6zTYdx@GO*xpSKLXBN
z-~%-f4d#Df9h;&$W>OW0TkLF}GZFQ+S>`jOwAc0%fa!9(^TQzC+XmdCO~d0GTY={W
z9aK_DeSaO$N5hVQZBHvbA|)U@TYwka)%?_Xvj2y`@o66*AIabHbNsaO1DEPo=qM6)
z)LQ7t<YguxD4iOZN4)ukb}M-|N%8l*4M|o#JLCf!A=m_lhQ3#-XPUhP>^kVE-kh!G
znOaKi)ii0-s^LFjHf(KCwq<&Kn3!L(Dtz@(0)KS3511M6KBVmZ7`gMt24HfAK+FLv
zDSG~!hfQ1tM1Zz{JTs>kgoz2>bYGK|e*8Df=#@vxnKSj=1MGZU9n6xmITp$Bo**qf
z+iuVGh<FE_rM#DV!g0>@%_+Oa8cAdBf>^b}9@BXzu&tG%Y^^VS!i#tZ;0kA6I1n53
z>VG+>gfy=~MSAcy<tMC(KWBmUtAR~xVVzJq$%lAX8;^(qX%7_+5LT!8St$vb{YKi=
z^-3dED!e&bgf#p#NG?W2Da#Ksk{eSnjZUE=P0b|IAxqM)q<}yDhmudqBm&~vLcfba
zTq;Yd9S<D$Oic~|j)YHsz>+lh9XahqB!4=7coRt&_-oS9Hc=SRWFk31*x`isd@ek#
z>#P~x{W2ZI5Ha6#*zVhMtIdc<CgFvEu#*Xq+ar4j)u7W##VBiQAiwH^sJ}sl;!~8<
z|C+N0HQcDoQ%8O=GU?b}sw8zduK;jTx_7sg-YfG0+XGMoNxu_cHyP`nIf$LZYJZKx
zZ)m%6Li3(MjhuuW{)zU^Td6qpe)hbTe&C38?u3U<dH(_jf(h!?$m{pIrNGR;{ss8-
zn3}V+`+Jo+oTw2AXkCmB^{FfvGpDlr#W<4ClSpjO4mrd<L25Zpx*0w1ZC6D}M^7yM
z=t(tls%3CoiWz{RkH4kVe9%{W<bRlXL6>9OknEBL8v4>&D}K6i3W(`~mLm3rmp-?S
z=bjVy7%C?WoGpmFt8K3(bJ3OpVj%Z#P?^#+Ana%yw%i5n8`sH8qO5O>lqtf1TC%XT
zB{QbrjyUdO^#_g=QnKr$Xr~mYYr^<ll&po67QFV{Ys<+Y!$pZM-k6ddD}Uaiyp3*h
z6IyaoVCmgpc^4C2jI2cF@}VVH<wK^c-AIn*UQC!+6O_U?6S{#!3IkW_YA4EtFzXHm
zM1rnnQEc-tjaNmrHj_5!TGdY{b|<DKUr4*CI6hINJ$vbLTDa!RX(=VwbBT81(E@dQ
win|7K)*?yCMQvhX5l2x=*BkTx<z3IO06wS*&6;;ge*gdg07*qoM6N<$f>9W+>i_@%

delta 1046
zcmV+x1nK+b3)~2hReuBVNkl<Zcmb_fO-vI(6n?wg1<Y32NJ3B(si+sDP>mN4f*MVX
z5k+HSq7gM3E=HrqpTzhF(Sy+__;c|B67>v}gBJtEcr$4WH#xBM;E^r|6SUCry(zow
zZg;vB`X%j7J8$3L%=_Mq1SLb)LCv-)60|UYsKg)w66k!2fq%&)FeHE^j^hhibpXIL
zOVKI?i&RBIm7(h_$IjaZOGDqn--S+qIRlpGfUe7G_K_sPbyxu~Q{D4fwNsQ4fdf?$
zr9v6OK?KSJ1GBN;FB@{9tQIY^aRLuWRkf&h!jplrNA5*ICL9jvx>Au%6f>@4A+(=6
z11-(X(A2a8B7gPu{QuPWI2cA624gYk@BakBPN+Kz_JpizuapXni9RP!oo1O#h6Q2D
zFxbV*9c=T~Z9-ikwB^YFPyLk0<(Ds>!L_Sb?BDVDHy(8|HI7-S=9y?|-iujjbcZ@U
z4F?Y$;ZHAcDK^<lfnN2AynWpD#1-9vgNKEY(HzM*F@G=^^Ocn=!`)!5tVrR-OC7eN
zWHQBSYB#WA%S4}^*Kb`8jE;_pWHX#y6;-<+Qf5U%Pp@(MO%BrDaISX)j;;4-&+OX0
zN9-`#7N*}By*KUNC<*kR(>Z#_a(Ycooydt^2&v(O-{inh%#J?DxStc;@Y*`o-f@F<
zJ%8`N4}U7O1Z5!OoBk=IKq;j+2sO3qZTYLWyIB0k6#Me^yKo;675jF$NThzTl+yNp
zQ6!%r9BVylkAI~np<!JmM7M7diR&Q<faxHt>gwtsahRQ*wa0a}YhlgmFer*5l&1{%
zwn@XtlSkA+E<>?l2tq0~VUM>oY=*F=!Q{_Lk$<=;OH49+6;0$7H8w7#-85(6^_zDh
zWqi)bdTl3;fh@~lq|?6gc(O7;7L?(Qn|GF7h88PYppq7rp@@iRH)k@YgNW9<=BXlx
zgh;s`Nm*6oE#m?rTBKs%QX~Tw63JwN6aJ2G;Iv&r^o&z6K~}@vN(tQlzs;z#>uE7(
zdw<Dxz8zO#JI;yQ@x%M~;NgRNfI30KQz~t=p`l^^q>V|HLamruvU5Y;ymeQk5*B1^
z$8(M|VyH+KtlnU)Ycb5sWcbn*(-m53#qJ}ST$xSq3r7*OpF0c3TU(JSH`)gf;tZ<)
z_}CcqfBftsFE8i<lUs#HvPB{Hp%j-wW`D{^kQ2)VH!k6!)RB7ku^cCq9GoCQC^NWm
z)a_b#5M4~loC&|kEy%uapkVHgx)W)-2UZBInjXI9bN+Y4;LB;gL?7emJd_B=n~d~f
zUYhR~87|!c3wSG0erMb8jeST5P56vRi)RTkh+hU$ME-iN;q}}s?Rx$XX4bvb7Z0S>
Qx&QzG07*qoM6N<$g4R9yo&W#<

diff --git a/static/img/meta/favicon-96x96.png b/static/img/meta/favicon-96x96.png
index 3f9f8c5e2dd6b18580701cb2e39e61f56ff322ec..b312c20f02edba04892154c27a285d4525c459fc 100644
GIT binary patch
delta 3517
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

delta 3733
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

diff --git a/static/img/meta/favicon.ico b/static/img/meta/favicon.ico
index c79065de598a4fdf759bf621aafbf669df8d7ff1..41e115afa7ad62d7ddea99a1491a477243c0922d 100644
GIT binary patch
literal 15086
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

literal 15086
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


From 797124b19b4f819868f7246331d9c45c1e87a55c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 29 Sep 2022 12:10:07 -0400
Subject: [PATCH 079/469] docs(toolbar): add component playgrounds (#2576)

---
 docs/api/progress-bar.md                      |   8 +
 docs/api/searchbar.md                         |   5 +-
 docs/api/segment.md                           |   5 +-
 docs/api/toolbar.md                           | 984 +-----------------
 static/code/stackblitz/angular/app.module.ts  |   3 +-
 static/usage/toolbar/basic/angular.md         |  13 +
 static/usage/toolbar/basic/demo.html          |  31 +
 .../toolbar => toolbar/basic}/index.md        |   2 +-
 static/usage/toolbar/basic/javascript.md      |  13 +
 static/usage/toolbar/basic/react.md           |  23 +
 static/usage/toolbar/basic/vue.md             |  24 +
 static/usage/toolbar/buttons/angular.md       |  92 ++
 static/usage/toolbar/buttons/demo.html        | 120 +++
 .../toolbar => toolbar/buttons}/index.md      |   7 +-
 static/usage/toolbar/buttons/javascript.md    |  92 ++
 static/usage/toolbar/buttons/react.md         | 103 ++
 static/usage/toolbar/buttons/vue.md           | 107 ++
 static/usage/toolbar/progress-bars/angular.md |   8 +
 static/usage/toolbar/progress-bars/demo.html  |  26 +
 static/usage/toolbar/progress-bars/index.md   |   8 +
 .../usage/toolbar/progress-bars/javascript.md |   8 +
 static/usage/toolbar/progress-bars/react.md   |  16 +
 static/usage/toolbar/progress-bars/vue.md     |  19 +
 .../toolbar => toolbar/searchbars}/angular.md |   4 +-
 static/usage/toolbar/searchbars/demo.html     |  28 +
 static/usage/toolbar/searchbars/index.md      |   8 +
 .../searchbars}/javascript.md                 |   4 +-
 .../toolbar => toolbar/searchbars}/react.md   |   4 +-
 .../toolbar => toolbar/searchbars}/vue.md     |   4 +-
 .../toolbar => toolbar/segments}/angular.md   |   4 +-
 .../toolbar => toolbar/segments}/demo.html    |   7 +-
 static/usage/toolbar/segments/index.md        |   8 +
 .../segments}/javascript.md                   |   4 +-
 .../toolbar => toolbar/segments}/react.md     |   6 +-
 .../toolbar => toolbar/segments}/vue.md       |   8 +-
 .../usage/toolbar/theming/colors/angular.md   |  32 +
 static/usage/toolbar/theming/colors/demo.html |  60 ++
 static/usage/toolbar/theming/colors/index.md  |   8 +
 .../toolbar/theming/colors/javascript.md      |  32 +
 static/usage/toolbar/theming/colors/react.md  |  42 +
 static/usage/toolbar/theming/colors/vue.md    |  43 +
 .../angular/example_component_css.md          |  14 +
 .../angular/example_component_html.md         |   5 +
 .../theming/css-properties}/demo.html         |  34 +-
 .../toolbar/theming/css-properties/index.md   |  32 +
 .../theming/css-properties/javascript.md      |  20 +
 .../theming/css-properties/react/main_css.md  |  14 +
 .../theming/css-properties/react/main_tsx.md  |  15 +
 .../toolbar/theming/css-properties/vue.md     |  31 +
 49 files changed, 1209 insertions(+), 979 deletions(-)
 create mode 100644 static/usage/toolbar/basic/angular.md
 create mode 100644 static/usage/toolbar/basic/demo.html
 rename static/usage/{segment/toolbar => toolbar/basic}/index.md (78%)
 create mode 100644 static/usage/toolbar/basic/javascript.md
 create mode 100644 static/usage/toolbar/basic/react.md
 create mode 100644 static/usage/toolbar/basic/vue.md
 create mode 100644 static/usage/toolbar/buttons/angular.md
 create mode 100644 static/usage/toolbar/buttons/demo.html
 rename static/usage/{searchbar/toolbar => toolbar/buttons}/index.md (58%)
 create mode 100644 static/usage/toolbar/buttons/javascript.md
 create mode 100644 static/usage/toolbar/buttons/react.md
 create mode 100644 static/usage/toolbar/buttons/vue.md
 create mode 100644 static/usage/toolbar/progress-bars/angular.md
 create mode 100644 static/usage/toolbar/progress-bars/demo.html
 create mode 100644 static/usage/toolbar/progress-bars/index.md
 create mode 100644 static/usage/toolbar/progress-bars/javascript.md
 create mode 100644 static/usage/toolbar/progress-bars/react.md
 create mode 100644 static/usage/toolbar/progress-bars/vue.md
 rename static/usage/{searchbar/toolbar => toolbar/searchbars}/angular.md (74%)
 create mode 100644 static/usage/toolbar/searchbars/demo.html
 create mode 100644 static/usage/toolbar/searchbars/index.md
 rename static/usage/{searchbar/toolbar => toolbar/searchbars}/javascript.md (74%)
 rename static/usage/{searchbar/toolbar => toolbar/searchbars}/react.md (84%)
 rename static/usage/{searchbar/toolbar => toolbar/searchbars}/vue.md (88%)
 rename static/usage/{segment/toolbar => toolbar/segments}/angular.md (77%)
 rename static/usage/{segment/toolbar => toolbar/segments}/demo.html (87%)
 create mode 100644 static/usage/toolbar/segments/index.md
 rename static/usage/{segment/toolbar => toolbar/segments}/javascript.md (77%)
 rename static/usage/{segment/toolbar => toolbar/segments}/react.md (73%)
 rename static/usage/{segment/toolbar => toolbar/segments}/vue.md (66%)
 create mode 100644 static/usage/toolbar/theming/colors/angular.md
 create mode 100644 static/usage/toolbar/theming/colors/demo.html
 create mode 100644 static/usage/toolbar/theming/colors/index.md
 create mode 100644 static/usage/toolbar/theming/colors/javascript.md
 create mode 100644 static/usage/toolbar/theming/colors/react.md
 create mode 100644 static/usage/toolbar/theming/colors/vue.md
 create mode 100644 static/usage/toolbar/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/toolbar/theming/css-properties/angular/example_component_html.md
 rename static/usage/{searchbar/toolbar => toolbar/theming/css-properties}/demo.html (52%)
 create mode 100644 static/usage/toolbar/theming/css-properties/index.md
 create mode 100644 static/usage/toolbar/theming/css-properties/javascript.md
 create mode 100644 static/usage/toolbar/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/toolbar/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/toolbar/theming/css-properties/vue.md

diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 9a8692b1362..5da6681d22a 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -46,6 +46,14 @@ import Indeterminate from '@site/static/usage/progress-bar/indeterminate/index.m
 <Indeterminate />
 
 
+## Progress Bars in Toolbars
+
+<!-- Reuse the playground from the Toolbar directory -->
+import Toolbar from '@site/static/usage/toolbar/progress-bars/index.md';
+
+<Toolbar />
+
+
 ## Theming
 
 ### Colors
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index cc2358b67aa..ce61c62adca 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -54,11 +54,12 @@ import CancelButton from '@site/static/usage/searchbar/cancel-button/index.md';
 <CancelButton />
 
 
-## Searchbar in a Toolbar
+## 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.
 
-import Toolbar from '@site/static/usage/searchbar/toolbar/index.md';
+<!-- Reuse the playground from the Toolbar directory -->
+import Toolbar from '@site/static/usage/toolbar/searchbars/index.md';
 
 <Toolbar />
 
diff --git a/docs/api/segment.md b/docs/api/segment.md
index b3251c371f5..22193a99c25 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -41,9 +41,10 @@ import Scrollable from '@site/static/usage/segment/scrollable/index.md';
 <Scrollable />
 
 
-## Toolbar Segments
+## Segments in Toolbars
 
-import Toolbar from '@site/static/usage/segment/toolbar/index.md';
+<!-- Reuse the playground from the Toolbar directory -->
+import Toolbar from '@site/static/usage/toolbar/segments/index.md';
 
 <Toolbar />
 
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index 8056b27fa50..6403066cbfe 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-toolbar"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/toolbar/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/toolbar/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,941 +17,78 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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.
 
 
-Toolbars are positioned above or below content. When a toolbar is placed in an `<ion-header>` it will appear fixed at the top of the content, and when it is in an `<ion-footer>` it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an `<ion-content>`, toolbars will scroll with the content.
+## 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.
 
-## Buttons
+import Basic from '@site/static/usage/toolbar/basic/index.md';
 
-Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` element. The `<ion-buttons>` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
+<Basic />
 
-| Slot         | Description                                                                                              |
-|--------------|----------------------------------------------------------------------------------------------------------|
-| `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.      |
-| `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.                                |
 
+## Buttons in Toolbars
 
-## Borders
+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.
 
-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.
+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';
+
+<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/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/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/toolbar/progress-bars/index.md';
+
+<ProgressBars />
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/toolbar/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/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.
 
-## 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-toolbar>
-  <ion-title>Title Only</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="start">
-    <ion-back-button></ion-back-button>
-  </ion-buttons>
-  <ion-title>Back Button</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-title size="small">Small Title above a Default Title</ion-title>
-</ion-toolbar>
-<ion-toolbar>
-  <ion-title>Default Title</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 color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Default 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-title>Solid Buttons</ion-title>
-  <ion-buttons slot="primary">
-    <ion-button fill="solid" color="secondary">
-      Help
-      <ion-icon slot="end" name="help-circle"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-</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-title>Outline Buttons</ion-title>
-  <ion-buttons slot="primary">
-    <ion-button color="danger" fill="outline">
-      Edit
-      <ion-icon slot="end" name="create"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="secondary">
-    <ion-button>
-      Account
-    </ion-button>
-  </ion-buttons>
-  <ion-buttons slot="primary">
-    <ion-button color="danger">
-      Edit
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Text Only Buttons</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="start">
-    <ion-menu-button autoHide="false"></ion-menu-button>
-
-  </ion-buttons>
-  <ion-buttons slot="secondary">
-    <ion-button>
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Left side menu toggle</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="primary">
-    <ion-button (click)="clickedStar()">
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Right side menu toggle</ion-title>
-  <ion-buttons slot="end">
-    <ion-menu-button autoHide="false"></ion-menu-button>
-
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="primary">
-    <ion-button (click)="clickedSearch()">
-      <ion-icon slot="icon-only" name="search"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
-</ion-toolbar>
-
-<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-toolbar color="secondary">
-  <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 color="primary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Secondary Toolbar</ion-title>
-</ion-toolbar>
-
-<ion-toolbar color="dark">
-  <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 color="danger">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Dark Toolbar</ion-title>
-</ion-toolbar>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-toolbar>
-  <ion-title>Title Only</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="start">
-    <ion-back-button></ion-back-button>
-  </ion-buttons>
-  <ion-title>Back Button</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-title size="small">Small Title above a Default Title</ion-title>
-</ion-toolbar>
-<ion-toolbar>
-  <ion-title>Default Title</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 color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Default 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-title>Solid Buttons</ion-title>
-  <ion-buttons slot="primary">
-    <ion-button fill="solid" color="secondary">
-      Help
-      <ion-icon slot="end" name="help-circle"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-</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-title>Outline Buttons</ion-title>
-  <ion-buttons slot="primary">
-    <ion-button color="danger" fill="outline">
-      Edit
-      <ion-icon slot="end" name="create"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="secondary">
-    <ion-button>
-      Account
-    </ion-button>
-  </ion-buttons>
-  <ion-buttons slot="primary">
-    <ion-button color="danger">
-      Edit
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Text Only Buttons</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="start">
-    <ion-menu-button auto-hide="false"></ion-menu-button>
-  </ion-buttons>
-  <ion-buttons slot="secondary">
-    <ion-button>
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Left side menu toggle</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="primary">
-    <ion-button onclick="clickedStar()">
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Right side menu toggle</ion-title>
-  <ion-buttons slot="end">
-    <ion-menu-button auto-hide="false"></ion-menu-button>
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="primary">
-    <ion-button onclick="clickedSearch()">
-      <ion-icon slot="icon-only" name="search"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
-</ion-toolbar>
-
-<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-toolbar color="secondary">
-  <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 color="primary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Secondary Toolbar</ion-title>
-</ion-toolbar>
-
-<ion-toolbar color="dark">
-  <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 color="danger">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Dark Toolbar</ion-title>
-</ion-toolbar>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonToolbar, IonTitle, IonButtons, IonBackButton, IonButton, IonIcon, IonMenuButton, IonSearchbar, IonSegment, IonSegmentButton } from '@ionic/react';
-import { personCircle, search, helpCircle, star, create, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
-
-export const ToolbarExample: React.FC = () => (
-  <IonToolbar>
-    <IonTitle>Title Only</IonTitle>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="start">
-      <IonBackButton defaultHref="/" />
-    </IonButtons>
-    <IonTitle>Back Button</IonTitle>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonTitle size="small">Small Title above a Default Title</IonTitle>
-  </IonToolbar>
-  <IonToolbar>
-    <IonTitle>Default Title</IonTitle>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="secondary">
-      <IonButton>
-        <IonIcon slot="icon-only" icon={personCircle} />
-      </IonButton>
-      <IonButton>
-        <IonIcon slot="icon-only" icon={search} />
-      </IonButton>
-    </IonButtons>
-    <IonButtons slot="primary">
-      <IonButton color="secondary">
-        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
-      </IonButton>
-    </IonButtons>
-    <IonTitle>Default Buttons</IonTitle>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="secondary">
-      <IonButton fill="solid">
-        <IonIcon slot="start" icon={personCircle} />
-        Contact
-      </IonButton>
-    </IonButtons>
-    <IonTitle>Solid Buttons</IonTitle>
-    <IonButtons slot="primary">
-      <IonButton fill="solid" color="secondary">
-        Help
-        <IonIcon slot="end" icon={helpCircle} />
-      </IonButton>
-    </IonButtons>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="secondary">
-      <IonButton fill="outline">
-        <IonIcon slot="start" icon={star} />
-        Star
-      </IonButton>
-    </IonButtons>
-    <IonTitle>Outline Buttons</IonTitle>
-    <IonButtons slot="primary">
-      <IonButton color="danger" fill="outline">
-        Edit
-        <IonIcon slot="end" icon={create} />
-      </IonButton>
-    </IonButtons>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="secondary">
-      <IonButton>Account</IonButton>
-    </IonButtons>
-    <IonButtons slot="primary">
-      <IonButton color="danger">Edit</IonButton>
-    </IonButtons>
-    <IonTitle>Text Only Buttons</IonTitle>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="start">
-      <IonMenuButton autoHide={false} />
-    </IonButtons>
-    <IonButtons slot="secondary">
-      <IonButton>
-        <IonIcon slot="icon-only" icon={star} />
-      </IonButton>
-    </IonButtons>
-    <IonTitle>Left side menu toggle</IonTitle>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="primary">
-      <IonButton onClick={() => {}}>
-        <IonIcon slot="icon-only" icon={star} />
-      </IonButton>
-    </IonButtons>
-    <IonTitle>Right side menu toggle</IonTitle>
-    <IonButtons slot="end">
-      <IonMenuButton autoHide={false} />
-    </IonButtons>
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonButtons slot="primary">
-      <IonButton onClick={() => {}}>
-        <IonIcon slot="icon-only" icon={search} />
-      </IonButton>
-    </IonButtons>
-    <IonSearchbar placeholder="Search Favorites" />
-  </IonToolbar>
-
-  <IonToolbar>
-    <IonSegment value="all">
-      <IonSegmentButton value="all">
-        All
-      </IonSegmentButton>
-      <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
-    </IonSegment>
-  </IonToolbar>
-
-  <IonToolbar color="secondary">
-    <IonButtons slot="secondary">
-      <IonButton>
-        <IonIcon slot="icon-only" icon={personCircle} />
-      </IonButton>
-      <IonButton>
-        <IonIcon slot="icon-only" icon={search} />
-      </IonButton>
-    </IonButtons>
-    <IonButtons slot="primary">
-      <IonButton color="primary">
-        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
-      </IonButton>
-    </IonButtons>
-    <IonTitle>Secondary Toolbar</IonTitle>
-  </IonToolbar>
-
-  <IonToolbar color="dark">
-    <IonButtons slot="secondary">
-      <IonButton>
-        <IonIcon slot="icon-only" icon={personCircle} />
-      </IonButton>
-      <IonButton>
-        <IonIcon slot="icon-only" icon={search} />
-      </IonButton>
-    </IonButtons>
-    <IonButtons slot="primary">
-      <IonButton color="danger">
-        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
-      </IonButton>
-    </IonButtons>
-    <IonTitle>Dark Toolbar</IonTitle>
-  </IonToolbar>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'toolbar-example',
-  styleUrl: 'toolbar-example.css'
-})
-export class ToolbarExample {
-
-  clickedStar() {
-    console.log("Clicked star button");
-  }
-
-  clickedSearch() {
-    console.log("Clicked search button");
-  }
-
-  render() {
-    return [
-      <ion-toolbar>
-        <ion-title>Title Only</ion-title>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
-        </ion-buttons>
-        <ion-title>Back Button</ion-title>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-title size="small">Small Title above a Default Title</ion-title>
-      </ion-toolbar>,
-      <ion-toolbar>
-        <ion-title>Default Title</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 color="secondary">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Default 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-title>Solid Buttons</ion-title>
-        <ion-buttons slot="primary">
-          <ion-button fill="solid" color="secondary">
-            Help
-            <ion-icon slot="end" name="help-circle"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-      </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-title>Outline Buttons</ion-title>
-        <ion-buttons slot="primary">
-          <ion-button color="danger" fill="outline">
-            Edit
-            <ion-icon slot="end" name="create"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-buttons slot="secondary">
-          <ion-button>
-            Account
-          </ion-button>
-        </ion-buttons>
-        <ion-buttons slot="primary">
-          <ion-button color="danger">
-            Edit
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Text Only Buttons</ion-title>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-menu-button autoHide={false}></ion-menu-button>
-
-        </ion-buttons>
-        <ion-buttons slot="secondary">
-          <ion-button>
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Left side menu toggle</ion-title>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-buttons slot="primary">
-          <ion-button onClick={() => this.clickedStar()}>
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Right side menu toggle</ion-title>
-        <ion-buttons slot="end">
-          <ion-menu-button autoHide={false}></ion-menu-button>
-
-        </ion-buttons>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-buttons slot="primary">
-          <ion-button onClick={() => this.clickedSearch()}>
-            <ion-icon slot="icon-only" name="search"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
-      </ion-toolbar>,
-
-      <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-toolbar color="secondary">
-        <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 color="primary">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Secondary Toolbar</ion-title>
-      </ion-toolbar>,
-
-      <ion-toolbar color="dark">
-        <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 color="danger">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Dark Toolbar</ion-title>
-      </ion-toolbar>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-toolbar>
-    <ion-title>Title Only</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>Back Button</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-title size="small">Small Title above a Default Title</ion-title>
-  </ion-toolbar>
-  <ion-toolbar>
-    <ion-title>Default Title</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 color="secondary">
-        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Default Buttons</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="secondary">
-      <ion-button fill="solid">
-        <ion-icon slot="start" :icon="person-circle"></ion-icon>
-        Contact
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Solid Buttons</ion-title>
-    <ion-buttons slot="primary">
-      <ion-button fill="solid" color="secondary">
-        Help
-        <ion-icon slot="end" :icon="help-circle"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </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-title>Outline Buttons</ion-title>
-    <ion-buttons slot="primary">
-      <ion-button color="danger" fill="outline">
-        Edit
-        <ion-icon slot="end" :icon="create"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="secondary">
-      <ion-button>
-        Account
-      </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="primary">
-      <ion-button color="danger">
-        Edit
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Text Only Buttons</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-menu-button auto-hide="false"></ion-menu-button>
-
-    </ion-buttons>
-    <ion-buttons slot="secondary">
-      <ion-button>
-        <ion-icon slot="icon-only" :icon="star"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Left side menu toggle</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="primary">
-      <ion-button @click="clickedStar()">
-        <ion-icon slot="icon-only" :icon="star"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Right side menu toggle</ion-title>
-    <ion-buttons slot="end">
-      <ion-menu-button auto-hide="false"></ion-menu-button>
-
-    </ion-buttons>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="primary">
-      <ion-button @click="clickedSearch()">
-        <ion-icon slot="icon-only" :icon="search"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
-  </ion-toolbar>
-
-  <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-toolbar color="secondary">
-    <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 color="primary">
-        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Secondary Toolbar</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar color="dark">
-    <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 color="danger">
-        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Dark Toolbar</ion-title>
-  </ion-toolbar>
-</template>
-
-<script>
-import { 
-  IonButton, 
-  IonButtons, 
-  IonIcon,
-  IonTitle, 
-  IonToolbar
-} from '@ionic/vue';
-import { 
-  ellipsisHorizontal,
-  ellipsisVertical, 
-  helpCircle, 
-  personCircle, 
-  search, 
-  star
-} from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonButton, 
-    IonButtons, 
-    IonIcon,
-    IonTitle, 
-    IonToolbar
-  },
-  setup() {
-    return {
-      ellipsisHorizontal,
-      ellipsisVertical, 
-      helpCircle, 
-      personCircle, 
-      search, 
-      star
-    }
-  }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -976,4 +106,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/code/stackblitz/angular/app.module.ts b/static/code/stackblitz/angular/app.module.ts
index 15761a79e07..7f6894ce6af 100644
--- a/static/code/stackblitz/angular/app.module.ts
+++ b/static/code/stackblitz/angular/app.module.ts
@@ -1,6 +1,7 @@
 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';
 
@@ -8,7 +9,7 @@ import { AppComponent } from './app.component';
 import { ExampleComponent } from './example.component';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })
diff --git a/static/usage/toolbar/basic/angular.md b/static/usage/toolbar/basic/angular.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/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/toolbar/basic/demo.html b/static/usage/toolbar/basic/demo.html
new file mode 100644
index 00000000000..7dabc509883
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/segment/toolbar/index.md b/static/usage/toolbar/basic/index.md
similarity index 78%
rename from static/usage/segment/toolbar/index.md
rename to static/usage/toolbar/basic/index.md
index 60de1cd3b66..ae0950a79c0 100644
--- a/static/usage/segment/toolbar/index.md
+++ b/static/usage/toolbar/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/segment/toolbar/demo.html" devicePreview includeIonContent={false} />
+<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/basic/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/toolbar/basic/javascript.md b/static/usage/toolbar/basic/javascript.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/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/toolbar/basic/react.md b/static/usage/toolbar/basic/react.md
new file mode 100644
index 00000000000..42b46929d3f
--- /dev/null
+++ b/static/usage/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/toolbar/basic/vue.md b/static/usage/toolbar/basic/vue.md
new file mode 100644
index 00000000000..ec71b1a340b
--- /dev/null
+++ b/static/usage/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/toolbar/buttons/angular.md b/static/usage/toolbar/buttons/angular.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/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/toolbar/buttons/demo.html b/static/usage/toolbar/buttons/demo.html
new file mode 100644
index 00000000000..ea78af64bcb
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/searchbar/toolbar/index.md b/static/usage/toolbar/buttons/index.md
similarity index 58%
rename from static/usage/searchbar/toolbar/index.md
rename to static/usage/toolbar/buttons/index.md
index ba490a0f94a..be039284a4d 100644
--- a/static/usage/searchbar/toolbar/index.md
+++ b/static/usage/toolbar/buttons/index.md
@@ -5,9 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground
-  code={{ javascript, react, vue, angular }}
-  src="usage/searchbar/toolbar/demo.html"
-  devicePreview
-  includeIonContent={false}
-/>
+<Playground code={{ javascript, react, vue, angular }} src="usage/toolbar/buttons/demo.html" size="500px" />
diff --git a/static/usage/toolbar/buttons/javascript.md b/static/usage/toolbar/buttons/javascript.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/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/toolbar/buttons/react.md b/static/usage/toolbar/buttons/react.md
new file mode 100644
index 00000000000..44ae43e3526
--- /dev/null
+++ b/static/usage/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 default-href="#"></IonBackButton>
+        </IonButtons>
+        <IonTitle>Back Button</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonMenuButton auto-hide="false"></IonMenuButton>
+        </IonButtons>
+        <IonTitle>Menu Button</IonTitle>
+      </IonToolbar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/toolbar/buttons/vue.md b/static/usage/toolbar/buttons/vue.md
new file mode 100644
index 00000000000..b823e6ec404
--- /dev/null
+++ b/static/usage/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/toolbar/progress-bars/angular.md b/static/usage/toolbar/progress-bars/angular.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/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/toolbar/progress-bars/demo.html b/static/usage/toolbar/progress-bars/demo.html
new file mode 100644
index 00000000000..ab1ec728355
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toolbar/progress-bars/index.md b/static/usage/toolbar/progress-bars/index.md
new file mode 100644
index 00000000000..e3124b5fa0d
--- /dev/null
+++ b/static/usage/toolbar/progress-bars/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/toolbar/progress-bars/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/toolbar/progress-bars/javascript.md b/static/usage/toolbar/progress-bars/javascript.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/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/toolbar/progress-bars/react.md b/static/usage/toolbar/progress-bars/react.md
new file mode 100644
index 00000000000..52720f12b14
--- /dev/null
+++ b/static/usage/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/toolbar/progress-bars/vue.md b/static/usage/toolbar/progress-bars/vue.md
new file mode 100644
index 00000000000..2b3a3b85d0c
--- /dev/null
+++ b/static/usage/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/searchbar/toolbar/angular.md b/static/usage/toolbar/searchbars/angular.md
similarity index 74%
rename from static/usage/searchbar/toolbar/angular.md
rename to static/usage/toolbar/searchbars/angular.md
index 7b0f96159c5..9016e1e04cf 100644
--- a/static/usage/searchbar/toolbar/angular.md
+++ b/static/usage/toolbar/searchbars/angular.md
@@ -1,9 +1,7 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Searchbar
-    </ion-title>
+    <ion-title>Toolbar</ion-title>
   </ion-toolbar>
   <ion-toolbar>
     <ion-searchbar></ion-searchbar>
diff --git a/static/usage/toolbar/searchbars/demo.html b/static/usage/toolbar/searchbars/demo.html
new file mode 100644
index 00000000000..0f2a035051a
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toolbar/searchbars/index.md b/static/usage/toolbar/searchbars/index.md
new file mode 100644
index 00000000000..8ebad9c57f0
--- /dev/null
+++ b/static/usage/toolbar/searchbars/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/toolbar/searchbars/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/searchbar/toolbar/javascript.md b/static/usage/toolbar/searchbars/javascript.md
similarity index 74%
rename from static/usage/searchbar/toolbar/javascript.md
rename to static/usage/toolbar/searchbars/javascript.md
index 7b0f96159c5..9016e1e04cf 100644
--- a/static/usage/searchbar/toolbar/javascript.md
+++ b/static/usage/toolbar/searchbars/javascript.md
@@ -1,9 +1,7 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Searchbar
-    </ion-title>
+    <ion-title>Toolbar</ion-title>
   </ion-toolbar>
   <ion-toolbar>
     <ion-searchbar></ion-searchbar>
diff --git a/static/usage/searchbar/toolbar/react.md b/static/usage/toolbar/searchbars/react.md
similarity index 84%
rename from static/usage/searchbar/toolbar/react.md
rename to static/usage/toolbar/searchbars/react.md
index 2b15506483d..dcf4fc644f3 100644
--- a/static/usage/searchbar/toolbar/react.md
+++ b/static/usage/toolbar/searchbars/react.md
@@ -6,9 +6,7 @@ function Example() {
   return (
     <IonHeader>
       <IonToolbar>
-        <IonTitle>
-          Searchbar
-        </IonTitle>
+        <IonTitle>Toolbar</IonTitle>
       </IonToolbar>
       <IonToolbar>
         <IonSearchbar></IonSearchbar>
diff --git a/static/usage/searchbar/toolbar/vue.md b/static/usage/toolbar/searchbars/vue.md
similarity index 88%
rename from static/usage/searchbar/toolbar/vue.md
rename to static/usage/toolbar/searchbars/vue.md
index ff2d4fdd95e..8543a2ef976 100644
--- a/static/usage/searchbar/toolbar/vue.md
+++ b/static/usage/toolbar/searchbars/vue.md
@@ -2,9 +2,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>
-        Searchbar
-      </ion-title>
+      <ion-title>Toolbar</ion-title>
     </ion-toolbar>
     <ion-toolbar>
       <ion-searchbar></ion-searchbar>
diff --git a/static/usage/segment/toolbar/angular.md b/static/usage/toolbar/segments/angular.md
similarity index 77%
rename from static/usage/segment/toolbar/angular.md
rename to static/usage/toolbar/segments/angular.md
index e7cce4323dc..179f75c3ae4 100644
--- a/static/usage/segment/toolbar/angular.md
+++ b/static/usage/toolbar/segments/angular.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        <ion-label>All</ion-label>
+        All
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        <ion-label>Favorites</ion-label>
+        Favorites
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/segment/toolbar/demo.html b/static/usage/toolbar/segments/demo.html
similarity index 87%
rename from static/usage/segment/toolbar/demo.html
rename to static/usage/toolbar/segments/demo.html
index 39d8eeb8147..a33bf29801f 100644
--- a/static/usage/segment/toolbar/demo.html
+++ b/static/usage/toolbar/segments/demo.html
@@ -4,11 +4,12 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Segment</title>
+  <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>
@@ -17,10 +18,10 @@
       <ion-toolbar>
         <ion-segment value="all">
           <ion-segment-button value="all">
-            <ion-label>All</ion-label>
+            All
           </ion-segment-button>
           <ion-segment-button value="favorites">
-            <ion-label>Favorites</ion-label>
+            Favorites
           </ion-segment-button>
         </ion-segment>
       </ion-toolbar>
diff --git a/static/usage/toolbar/segments/index.md b/static/usage/toolbar/segments/index.md
new file mode 100644
index 00000000000..587435a03a1
--- /dev/null
+++ b/static/usage/toolbar/segments/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/toolbar/segments/demo.html" devicePreview includeIonContent={false} />
diff --git a/static/usage/segment/toolbar/javascript.md b/static/usage/toolbar/segments/javascript.md
similarity index 77%
rename from static/usage/segment/toolbar/javascript.md
rename to static/usage/toolbar/segments/javascript.md
index e7cce4323dc..179f75c3ae4 100644
--- a/static/usage/segment/toolbar/javascript.md
+++ b/static/usage/toolbar/segments/javascript.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        <ion-label>All</ion-label>
+        All
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        <ion-label>Favorites</ion-label>
+        Favorites
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/segment/toolbar/react.md b/static/usage/toolbar/segments/react.md
similarity index 73%
rename from static/usage/segment/toolbar/react.md
rename to static/usage/toolbar/segments/react.md
index 098a14b8946..54a63e7f8f8 100644
--- a/static/usage/segment/toolbar/react.md
+++ b/static/usage/toolbar/segments/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonLabel, IonHeader, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/react';
+import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
 
 function Example() {
   return (
@@ -8,10 +8,10 @@ function Example() {
       <IonToolbar>
         <IonSegment value="all">
           <IonSegmentButton value="all">
-            <IonLabel>All</IonLabel>
+            All
           </IonSegmentButton>
           <IonSegmentButton value="favorites">
-            <IonLabel>Favorites</IonLabel>
+            Favorites
           </IonSegmentButton>
         </IonSegment>
       </IonToolbar>
diff --git a/static/usage/segment/toolbar/vue.md b/static/usage/toolbar/segments/vue.md
similarity index 66%
rename from static/usage/segment/toolbar/vue.md
rename to static/usage/toolbar/segments/vue.md
index 9eccb6ee6f5..3be08612557 100644
--- a/static/usage/segment/toolbar/vue.md
+++ b/static/usage/toolbar/segments/vue.md
@@ -4,10 +4,10 @@
     <ion-toolbar>
       <ion-segment value="all">
         <ion-segment-button value="all">
-          <ion-label>All</ion-label>
+          All
         </ion-segment-button>
         <ion-segment-button value="favorites">
-          <ion-label>Favorites</ion-label>
+          Favorites
         </ion-segment-button>
       </ion-segment>
     </ion-toolbar>
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-  import { IonLabel, IonHeader, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/vue';
+  import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonLabel, IonHeader, IonSegment, IonSegmentButton, IonToolbar },
+    components: { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
   });
 </script>
 ```
diff --git a/static/usage/toolbar/theming/colors/angular.md b/static/usage/toolbar/theming/colors/angular.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/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/toolbar/theming/colors/demo.html b/static/usage/toolbar/theming/colors/demo.html
new file mode 100644
index 00000000000..a59beb0b2a3
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toolbar/theming/colors/index.md b/static/usage/toolbar/theming/colors/index.md
new file mode 100644
index 00000000000..0ee0cc3f4a7
--- /dev/null
+++ b/static/usage/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/toolbar/theming/colors/demo.html" size="large" />
diff --git a/static/usage/toolbar/theming/colors/javascript.md b/static/usage/toolbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/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/toolbar/theming/colors/react.md b/static/usage/toolbar/theming/colors/react.md
new file mode 100644
index 00000000000..ba6fd010f23
--- /dev/null
+++ b/static/usage/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/toolbar/theming/colors/vue.md b/static/usage/toolbar/theming/colors/vue.md
new file mode 100644
index 00000000000..d71cb7a3c05
--- /dev/null
+++ b/static/usage/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/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/toolbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/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/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/toolbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..8f21356a707
--- /dev/null
+++ b/static/usage/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/searchbar/toolbar/demo.html b/static/usage/toolbar/theming/css-properties/demo.html
similarity index 52%
rename from static/usage/searchbar/toolbar/demo.html
rename to static/usage/toolbar/theming/css-properties/demo.html
index 97071934009..befe3376120 100644
--- a/static/usage/searchbar/toolbar/demo.html
+++ b/static/usage/toolbar/theming/css-properties/demo.html
@@ -4,16 +4,29 @@
 <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>
+  <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: start;
+      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>
@@ -22,16 +35,9 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>
-              Searchbar
-            </ion-title>
-          </ion-toolbar>
-          <ion-toolbar>
-            <ion-searchbar></ion-searchbar>
-          </ion-toolbar>
-        </ion-header>
+        <ion-toolbar>
+          <ion-title>Custom Toolbar</ion-title>
+        </ion-toolbar>
       </div>
     </ion-content>
   </ion-app>
diff --git a/static/usage/toolbar/theming/css-properties/index.md b/static/usage/toolbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..e1dfb76fc05
--- /dev/null
+++ b/static/usage/toolbar/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/toolbar/theming/css-properties/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/toolbar/theming/css-properties/javascript.md b/static/usage/toolbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..7ee9cd6d581
--- /dev/null
+++ b/static/usage/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/toolbar/theming/css-properties/react/main_css.md b/static/usage/toolbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/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/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/toolbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8e8f663cd98
--- /dev/null
+++ b/static/usage/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/toolbar/theming/css-properties/vue.md b/static/usage/toolbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..17d8653117c
--- /dev/null
+++ b/static/usage/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>
+```

From e24c7c52b27c470ec83dde5ee47497cd1cc3966e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 29 Sep 2022 12:26:08 -0400
Subject: [PATCH 080/469] docs(demos): add images for demos in a new folder
 (#2582)

---
 static/img/{ => demos}/avatar.svg |   0
 static/img/demos/card-media.png   | Bin 0 -> 14847 bytes
 static/img/demos/thumbnail.svg    |  13 +++++++++++++
 3 files changed, 13 insertions(+)
 rename static/img/{ => demos}/avatar.svg (100%)
 create mode 100644 static/img/demos/card-media.png
 create mode 100644 static/img/demos/thumbnail.svg

diff --git a/static/img/avatar.svg b/static/img/demos/avatar.svg
similarity index 100%
rename from static/img/avatar.svg
rename to static/img/demos/avatar.svg
diff --git a/static/img/demos/card-media.png b/static/img/demos/card-media.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a5bd321b01a92572d20dde93b06578317e72aea
GIT binary patch
literal 14847
zcmeHt`6HBV^!GK3#!exMn4T8O+9DKYqFqH&%91HbQd!HIxvPg3LWOoxBo$J~KGP#h
zBpH>htRa*o+t_B_b5G0je80cE?;r5~kZG>D?`t{NxjyG}KIgh%v3;Y2=v+~Rki_Oq
z>nsr>!+(iLcm{kZRVwGehlu;8y<P~3$>9G8=;mz&Xe4-9ZZtuuZ<V^?3)y+?wzUYQ
zM~F@B7edG&YV*3aR=$MqpIyB_cbwAZ#%WZ1jM1D^QS#4~v}Xe;SuaIRUWs0(vQLVq
zdweFB9u%so+pD{?CiA*v+EA`@lXu6~)sHK;I`6L9oAkW%_Q_3V22nbj*PL7Fvio$1
zbg7+5m>VNdWK&kKW_$JX3&I2k@A@mFJU%Thb96$iJ^%cRgQNYEhE-$9N9+swU`Ytw
zShWQHVsBsx2+<{l@ee8mUn+_u5%G^Q0s;T{g5iIWCtdJiK*c{WC29QQ|G$P?;s4zv
z>@Q&BtB0y?$_>e9th0}oe(qegls9zFL2twUmc3I(Bvz1t>h{|j#^$kxBds(kL-X5)
zd#6T*N8(L4wtcIAPM~)@{I!7=)f{)$(Y>}B*J;`@+Ih<kCGKaXN;`IctM?+UWw-hc
z-LJjeMk86o;yWs*CNbq&o2sn9?J8}!RU0<`lx9`@nc$`z-sLd$Lf^e5vn`c?%Fn{1
zcTF@D_tZNS4woEu$Xnbg^<>!kOvZwiF3P@3{L!;2_4AO<OT0^`C#k7gecgpCazCEf
zH<%xkxG9emJKo1v)XpEca)*Fq=<tw52<Hg@<0Q)>@KE*Xwp2`|#EZt=fpm-oJsfb)
z<j3aG99B6`l-e}N4ZQM+4U^v&_&SA%9Jj*TIxm0dbD5T+#MpqoqIraH3JQ||k7SdV
zahVMa>48_xyi>@+27DD0aW^09a;%VNF$P#?Ufw6HCZa7H@h-xj?d!8XvP78M&Ky$>
z7eY}Ov@(<uzVmGRnyo(dRSg&oeeRdYFVq%B3PO1A3TBU|`O`%Xm+GG@p1tg)ff(NS
zY#m=c;@54;Bk*eYBMwBYbtbfhovwd=sJNXud~Wx2>G|UbYsC*!)b$YlpvUO99N)Gz
zOqD9b$pX~U@W^>pC4U20WY(I(sl4J=)`JI&6>Ph!d`BKd7pF<(|2Tr&Pn^Wxrmya2
z^<Oqh9lJ%PNaoLNp86Ok=OcvN{qS|}@N8lkeicI5xtj@yeSQwFqV(I|OM_hg@VVkK
zGG>mCANKCd_>ef?>5vY2Q@;daZG$!)VhI1oE^z{HlQ0_CjQ6yEt`g6F$hwdduz-xX
z#{^BAx+?fBm(vt^>U94IUJH|(yB%Q;c%R~z|6!HiSCDSe!);+|VQuZqO|v*VAG24a
zH;F(~2%~vHfH+@HBN$C8kNcx9H=wa)Zq_G$@Sd!1C3l}Cj=7g!W9p$FTi^$GxiN31
zaaQ1<*xFT}yvDjh`<Kv_@orM7a;0;4&s7VOwh&Gm&Vm-ZwM(aWDqS<`HrgdB{N*y<
z>vGOsk3?pD^cKR-7bJQtj$FpAUcIYBor_;*4J&I~_X&SFk3Z<hsUOg8Vi}a3;~%fJ
zo+pGnO`&;U+1RI3Nhy4THZ>HfiZ9&3>@h!!*A;Oe(f8rK1!-pTu9}}DAU`U6J1-T=
zKRR8N=2US!EFkwg4?PoDls>3pTgVj(#^?`V=GZ5*Mpg>%Y6x?lG(84yurn)W+V>t8
z+r(Lh@(}g}Urf%&j&C#-M|l+K1mjX)aGpAk#F;-6LuE_B^&)M*>!qbnR3+63p@Y%z
zc$sD;-|m7s;k1U}<zWM7e$K@VF~;~aMH1Bvc7m>DFj<wE&^w>-Y#luRWqa;~+l>$Q
zsq;@osFBD&+uk;0x)MW7=1?OS;bZ#9<}b4fzliq!1uu9yy`1tZ=PNv`e?B*wK)f*@
zZ%cgqcm+d$cs<%H`07+|S)^3-e6;fxkt&9dc|2j14@V-z@#R!Z+n6Lh5qFTB^uWEg
z>`mDQ#4;kj6h*z}qvstDb~YLi4`T3p*(IT&E=t(CyaC}dgg+pb%6DAZ(<ADSu#2kj
zfaiR<oR^0+Y*S5%50By#mG9Jc54lzCah7b+Em*3?b!T5k?-)({xhNWkhc9Pl`)qI>
z)tEPn?u1X_#x>DT9I*|iGpRpc=-fM<WYwu{u~@`P3m?(1wlR0xg}Ti|tL1{P&kr?b
zZFA8lqF>+38`Yxs64Bi=`0l-Ve#9(!t2+KG{xTeZ_J#CCf?@P3W}+?YM5q?8VOr2H
z9xSOtcxM;XqR2~e$N#@aOM2%WeUIgLWw+lplta<@nfMh)miK?l@ggL;bB@pYH4`rw
z1~-7@?dK$HmfuDSvcM6T-nr!XeXH%U8Mnv}?F3V}-T1(2yD-8;7ei;u`@<HXsIm((
zC$FMtGiW&26t5RSj`}Cw^c?A~rC^O_jagN(nPOP==4R8v2y6@fp6AQ@V;d@ZXupiE
z<lFH9tM(mwiqNlZkt}e5ZD<-cB3tPTHj+jguwfroTAi?U)~`oo3CriIZjZgFcLGAs
zcIfm=iI_GI+(X}lc<?lQFT137to6{}vGU4<IaGYm_F(y-Svs>Q-kZ?Rh6N)?zqHal
z@y>$o0LopC;6VAcuFpdXv81&8S!l1|wGQ@aYf?yiPFIlZ@0KnSfqg+H%WK8TR6gm~
z3Gm_{U4Jd!uQRV%410nTmmJ53jt@U65e{B}FJ*Ti3U?D*ZgR%Xk1~IqE2F^|Oci%s
z{&xyZ9MizTJ}0Ui)oe%Ex2<?%pQOCkqk6#!>b>E7g5d6F9@zC7mCeNsVw)`fP74_?
zN#U^u?){)q1Mtl{p4i$9jompaQx-bpgIDlzb@LE6yRDwzb$gofY%{ccxoM9A?QEuf
zMpPnq;afWPjY!@6m~S3fIuc1gi5uaQSrK1`={iucrjk$p2ra0s$R6Q=;>*s#Z+t1d
zD;%B%Tu&0d)T;3FXd>7X+-;{Cs-*HCN$Z^B1f+7M%1AI%c4@+_Y#G(<LgSHHJlfEk
zF%ne@=89CViW2x^{C4fLft!k%yZNW{ahnC6xsS#pn;eUoKOtAEXa{!G%$CouahSe_
z%76tUwo}4=#GIn>HxF*kl5Mt4;nOAYDW+2INciY7Mia)~=P;=e_!!oMZ+uuuQdCpU
zKwQ&K>?hQlu2v6fVLx8$WY)jG=Oijq$NQ8H9I|CTkbQb4k;8He>a8MCtMCp?b@qs=
zkslhmaLp5$&Q-Azm?6GQ@f}OUWr$WWFIyeDRWN8^?BP(y`&lE-sgx(E+h}5pUlBKl
zM+g#N_*OUN)pnmmsAM&Vvl~}&0)*J-@V*!5C=m4}ErKpK@+9~u4&P^m`Sa=Ha}0;v
zxD@V6d|GO1Gc;60`6xB@(TR~<Gl<3y-+z!h(7eDQ0s@72N%Lt^T8SQOq$_oTlzp-1
z#<n3Acu`n+u-NqAC#j&7PxEJ`+X?HW#`=v046=Cj4&wO~c_OBcFCxmq=7MoRpPhz_
zy^^l3?#sH(+xYzPG?ol_Sw9JL#Swua{w7veU73HM7KRfQj#rZkgNskz@o?!`mLeWs
z)$U|;@GtZmcI4C8I`}@6)OCG4Q6k^pd{mFEmbi=0|E|q@=KBWN3_fbuS?`4{K(#Uy
z8Gk>SAce&O8T@DE+uL(4UFtqz|6WdX$HSCMCi4qKRi<OTy536UPh50}Gd#6=`<;nh
zgSFvGMzh(kI1)OBE}1adM%IfSDGMSIVaq>q4E2s5b=5SswdtIFj=%C-#0F7<C3T>o
zmvz2qW4K%#o9m^~(qjpZO*+e8(LB8mS<J;>yb?0`HoWRp&o1>)Q~u#|)A9b_NA%hf
z<9HfD%Li7U=<!DF&OrI3?c)lzNe{TX445}g$Bp-m9UG&lErSgqPjcTiXC3s|njwp(
z+WBLo{V43dx5izFZ?$W&mnw{JV3ft18n1lJ9tuxwdq>-+K3x=ja>i6e1Yb93xV?*{
z5OCteiRz%C9=mxGI$Tni3iPUPc9#D@;<HnF1I@}smCc+!=PX3f3Afxxugz^dQ2$JE
zL1@$@A&iDUn*8b||0<cF!{ZEMnXcBQMxT9lO{HRR=1RQyQwttXBbjwT&Pq7Zr`D)^
z+E;y+ubN10af|hRRwskP;>L%%<a}mmIGl7G?A_x2^<AqkuQ={i6=nBC$|z~828^Jv
zxoe_k4*$~F$&I_GD<a||l6b9qolffzIB&6ziiQK<EA`}xFwgpVk#C1tIywU^zpobg
z1OJ$Lw0(Jv?ivEwDWNy?v4&nYYo_v??>G`Hlr4pyx(AsJ<}g~KV^5q2Rxop^qZ#P5
zBz>6HgMp=#d@I>f7A4?mi(=l6JNtd$Z{ZxrSV3+5ZJ%-qQMqaEE(VXTrW3H+@lCAJ
z<7`*zsXK2bMpjHubR-N-yw36Jno(#h=Un5($Tnxi78(zC&MY#f2gBKj+BCarLdv>9
zVxW>XowWcCnbSl6Lp4)wWOSdy;V1=+85$1UR`lDgCVTIB`-;KQL7z4*TMS`8=EM0+
zd>cN>Z7`MEU}}0wddJQc1`V~T7al!2U%QXF03kK0t0ZiunI>QAXuVQk14HVco#r$}
zgti)j5rsQ4zq#rE4M(8E(Guw#4dKU|F}Eix%|zIRj@dw!8*&^2KKYvk=ooGcR}RHN
z$X-Sm>8u4Km|Cg5FDWd@3%$e-3v&hPvp5`vGksU5ze1ULG_I8y#ffti-NBJT*x(|B
zvS*mOx=8T+vQ}0}fbGpk-aHs@7Dig?Dct_gLr+^-uSA1QGSUi`G#T@@E2;Prkj^NK
zV*M^FAya=!Z{>SRqV>)depK=vnNz1u4OW~z2L~k`?>G$BUsuo@-xgV3XOkZ2Vzq01
z{^*1vEU#|x_3RdzRmZ++HQ85j=S&R+^>jOv;I(+Nbc>@nUq*F0$F0%R0UUAFBOB|q
zJX!SW?YzeJkG2hGFGPnE11Gh4%irGV6+?oY>dU@(3&lL2Q@RZ?8j|Hj$vczUZ!ssn
zx4{ZI?qpP!`EpIS1i!;+;FQPoUx?lfgyhp)rRBCZH_!fnR0FAL5>TX>%U3<S7}hY)
zkXKiD*d-RWB5eClV_-^ilz57Bd(QrVl^Q^HS(03n)LvHY2umr0&g{Cs9gb*j9&-11
znDFe$-pu8X9vSC@1+dm35rwi#+Z1y{eJXe6%xGpM#Rjbc&rqHRJXwMFd_h4(W7a2m
zh!GJBfIS^+%r)pMbUhV0FLd_X2tUorbUs_Xy17{ea*kW@${{(?%yh5P(LKxn>qw)=
z)+y&tMSSzPN`i<ag0QVyikL?xSR*l`)I81zmI{!p0MS3vK;`qiW{%Q92Y*&DI8-fA
zs^!Hx*UeRejVryt=oLGO!Us3l3^Kn}7gWEqQ2AoMt@6uPo7y=^+vCC)Y>W^>f`sj$
ziSx#Q!0+*tP-p(@7rKvkZ`if#m1`OvLZ(W-poi{0P1SO^FY6p`FZf*C_0yXJHz8z|
z0T!Um9c^jH9hy}+6Wu-Vd#UW`3{96ydoQhM&#Yz6oSvSB2|FJrprstxZ^!BH_Jmqb
z*Np++0uDypnh)CsQ9*7|^pp{=PUTg~iwuhRu3Y7JBasMC`LK(F)%N|Gm4u?`LM9AF
zkHy;<zV~Hkup&6&upjw5h{90?8Eq_|s-h6)mU|Xz>n0m+wS8~ze>HeoUXW^G&thyo
z)eJO)AuN{a>RzRoV7k?{wel=OUp0h&&;b-ue*5*)8IJple<beMB{$g63z$IvIBq2o
zl?bbK1QQS(j}1(IOHPWDK$r&DIBH%ItzGjJ>wBPk0C3;EyLx+0TqEAy`t4J?(eZ*r
zBgS7!2L2j_<0-TVudWFqqPl)VsN4ixds4aHk?U-d*h^4>1FWbDdkxu_%<+NaqgjhW
zNsAj=#_j_j!nvMK{ETxcF)^K(=V0}i)6geq6|F@?nZ***09Hp6qn}v;R-O93?GIMr
zOcoQV{&Sk69^btAnlzt%^J{N!sDrYhEE424VR^q-?Jg9}_#dlI{L!tbV0~+qw|u|d
zxh*TWrzYRmRLwy2MV3V2FvTKTwALy9alvV}`U_^Lm38d%QLd`Y$L4gcQKM(7qQMQo
z<QEbVV{77km#*;d>AcZY?8#x<XZko^DQdtb0^cdwI+s^t-}9o0qa3LV6sx(}1lWKj
z9KU6kL+)jmGyon)?!w!yK--lSvX@m=g6(k+zk7RE)zO>$OGxc<MjOBGe!%_scw?&e
zkt2&Y*5<y|KQZBr8y;+Z8KB_CFVH@+QT4^gCpL3-?V6cZzyp~i>eg$51@X6&NBW$t
zwKpCaeojCZ+hLzJ9IFZG%VrLRAmjI03A#O^!F9|QNSM{+VO>_RVkMvEOk=D$>u~GT
z^;(XdIALOPl7txda)gk=W$(AlU+YF%ZX=K6(m`!G{t9Mv2EZa~<y4X@5BCu4u~{uC
zceV^tqd>2FjB|(b6AiHV%``n&Hsc=b<NOt`*kz|=V|4+`u?u&}(h668d%Hp~>}z#q
z>Wb}mjORhnfG9P%5Qy*+dzY9Hen`j!+Td3CDEf~xvwd$UA?xb;YGnsMaM;Am!KS{p
zp`Y$NNQD;<!-^w9WbY1hs;uL)q?yyNnuQR155P{gMiDJ6V!c>b>64Nha5Pxwc|0Dh
zM15Dv<63)BETaBb^g`{b(ZnDCbJN?aPppPLKI4i`N5}%ofdN98*HO1Wy%th$$IS@I
zCdMz2P&sBco1(L922&ECjJ*e(UPWS_CLH;#Pa=YpZ*_s!Em=bN`?i@WzsX3-*5mKx
zmjBz`WyvVg@tB!SXb}_QGU`ZtaOekJ`03(_iHWvr6e(E3VG%@4TD_*haV+)RMbjA;
zg}XHz=Kk@6un==zq$zlNX-PmH>7n>pTAI1h^ihZwQM2e}bBbtI4~D(+hF*RLSGOdh
zvdhP8^%QyWXFfMnD@X7nChu81guQ8<1=(}L{{3UAX(bblc_1)!`?E_`8oN3r5u*;K
z=m9S7b1`jS=3m&+O-0O!oY_Q#iU0z|&5G9AEII1pB1yHKVTxryY-gy!3p;iT&!4<V
z>x%ex;ltzIGY~t|>ZjK)UzEb7jec!9eE6XhwGsFF$%g+xTIxE4=G5TZ9Po9mW^3dM
z^%(6-e^`o^vnRUY(KXM0kR4M=_)^oN8~1ayfmb9^*?E9E2|j%pxo*5=6d~?H0y@af
zO1VX|87F0D-Y?iA`BhCC4R{dILq>Pe^lwNX@PKWUPa~YbDGLM$xup{P?wc%IHy0_a
z!egG=&o}7ZMS(W;X0_7<yGyXq3JXC-XfHC<u{#^T9|$sl@#CL)j@94b<CCp-LYRzK
zymp7_F77oInhN{X<FvR{1I@!F*OxnOc@z6VVQ13&SHs;kq5R_m;~oVC1u90(y+$%!
z%`_EN^E(%Js+t#1c4?E@nZlqr<59fuN6X2SCicVWTBh%+SpSK7U`KQN6e%H7or=fL
z=Xl+^=wLoiValvydZ;UOExY<fQ@CSk(_G(zc_<E_?7RBveM&sSmi5BOQCnhKuc>Y}
z#C7d)HdAwnw67~wnA`Evw3vQ3X>2QkG2a|(csEb6|GOk+Ia$h_SUWW$!<46YC&cqZ
za`ayHH1A#Zl*2TQ3O!3{)(9b_<xlvd@kNl69O6<+8q8>)RrrHxyncP3RBh}sBm|F|
z_s(HGKT@2XIxJ;v?&hX6)e+C_uAn_vN1kAFrz3zk9=)312|6F~M5&n<%9l>sen*nw
z+mmD-Iy!pGvHOzQJx;=BR7K<8qasi66Q{+|Q{S6LKH%7lO3dc+SmQ~}vx#i!L^*!r
z@x08xD17r-WO@*+CM=<Mnxo6?&ZS|4i^-Vl<ERu~QFQo>{HdDhK~BXasSHG{s0%Bn
z`Wy4|xa8|<$zm<HnkR<Z(oxHc#NNq|&DC-vHAx$HL-z4nH7-jLEr0Zrdh5h<F5;(K
zk#}0;KYT101O}H6{ExQAGI71RnmZr!u3hEvQ*3~Z0lgpn*hn}S3c1xDaGf?mct;%v
zw#`K|7GpRcr&d|MZkA_pgRj%l7X4Ugzdzf%`%2r$>8>gVVX7h->74!z2<pdC$6}!<
z6ZAtvZtAmFRoDGgi}QwC@(8oFY%C0C5A@~r3t5cA8*72zhEs5Q*8vi=3%4Eu0%qvq
z5U?|FG%NhNo&7w&7!zz!O6WWhEKC}5!%ane98&Ji(y-B|b!M)VH^l%qu_v}b_nrU{
za4&f;Wc0jW;=vuLMoX^&T-L)`YwyeZNTDxsx#@N4$(}-QD%m&FcPBcyW9ek$m7*b@
zsjhQN|7lraW#hng+Q>?cfWoet#II83^@PI-H9|{wn4UV7uB7u>MvF{!<v=<%6mtDT
zor2w7d;9o0vAasrORvI6Yjc~lb*EosX3n55QkNAqLCZ@AXoku1jBZZWX%^{i@#~#Q
zq=!mGq~PenZGPe7vr@NG1k+FuCvd(aBclRB^qT?N@(&+Aq#tf2c3>9!!9XE1&hdxI
zWmja02{FTC{{C$^qmC{cp!uKez)B<H&WFlt&#-8MCpXyG+-y(ZIEH6Zur%POZQHR&
zrx&p^6w%TPtt@X#gO)3cLWhZTAuy!ESD@o*M#GGBt`xPmAtpnV@K7y;&oL`N<%IYt
z5p?%eU;cgd!i-a{9!}y^?Z1)Ll{{mX@y)I#>8OtkgBFUscFCa6cCtkf8CjU%P(Mvl
z7e#(iCK%3C@pS*LT?(t<akl-P^vmUhu1eP(lEO|PnJ#*EthY0JGIfLy>8z>g<yhGh
zJvbFgyMXVb=amqCqS-aFqqzY!N)`6Oa&;HKqq%XeecX3(^w->;-uu&?y7<{>hqM**
zWN=lO_<V&CLlz{d)NxzLq0oS0_f599DJG3S5T}n@s>#2iS;%4r*vaJ5r4^yIQ@UV#
zWPA*YEyWmadzqI5v_VLs4~##{cIV}L(yudMqfP^_h=vVlDYq1US2+5>capotBd|rN
z{q=yuz9`Z^uVfHgCo^MZso<;;Le%U-8wyWu8y*=c)|OHhRgi-EO;kC-x$5SebCN2%
zB!y*w92Z4qJ?m>4u~-RtAu75$VfkoA44-ouDVV|2CqJK90UeWPLc;RdZ=-c!$II`<
z(HdyOgJYW?OJmENxM||$g#8C##lraEnbdO=MjNz)(et^^C1$kgz4RrgvYs#4{ltBR
zd7_1+aJxCAGm#;<)<8jtHJs&oAD`@-Q^n$5{o3CzrI2E^%5P}f<1^*=m844|fUz6^
z$SY3y8%6B{pU-H{U%b!XkEO{D+cK9&s|ng^kpq+Cf&)3>3}mb~?*LT72<*Dewd4n9
zcFji%oVZnz9T=Ye4v2L7v%D*t?*)qyv2;~3BSD;Bj}H?Ag`dR|{K?V2@COeJ2yE`=
z`E=(}XPj9SL()h}Egp!ohc$i^MlH4A)uHPAC1k{yN_5@5W=+HWw6rt@GCNv<H?$U<
z1mv!^BK2g>Pq^CpM6Tl6h7ar{9u8P7SH=0`_mrf!m?3&!;)e&H^OTpS8scJ!jyhTJ
zV*>oR5z$leup)IdM;ocpmXIH+%O2pLwkE>M58!uGfeg&VvlaTdO@@2W8&?;t5CnPH
zTH`sq&0vqOBB(6!&YG-JoTXqtYFBnm9MER-NNG0X74wT|aWKk;?Jx?MY;eHZXWe9_
zD-kQNws25!-JKG4ZC{f%xol<;%^Ie<VFO;N>7BN$VcOcdA`3s!;4{+HjpBT}P*1vo
zF#+YkUY-i@*|@XjHoEJXD18?+m2`er+B$P{x5#ZF%#bYxRPhL?geWTUYGknTYpKV+
z|0hqaKfra)o>4&<A+j@J))|ln`Tojj(LuA-k`}rH7x<aA&BD)K4pbdZ*oWpLyF1WZ
z&%bbi9X(>pSxPPwE}|tynqZwd+dRJ2+4>V&mXpyz&K)1`;%ixMn#W~?sEwAw7S?L7
zz!2o<*8}EDKGd3Pj}p}=e?!4D(m;S2x1cgP4tV!3;XhlxpX;n49z%*XJh9Y2po%;&
zpMY-s!3;WYWo3>ru+7!d#QaAR`6f>$?#OvS`pe$4X+E2y*f>mNmkOh@zrEk`D_Add
zbB!D4pfA<}03S%aHYP?W|HM(e_NpuQxR`=#IiVFMV3jXOA2^SskgTZCeEJPg>nGOa
z5=+45+(<~RKGx|!_pNlmZH}!yJD;9A?`~3(o|;MsbMZw_x-?XF0DN|Xy`g>(jFK6B
z1+lUEp2K@|2F3YXGr$)(S=<kK{Uv$*h4PVlM6}e>%*@N9g9SMjYT3d$@zh0?zH67P
z4@t*EoF5h1)6=tule<S7<t#*Z+Y+Qa^L&h~3@4?KDWssggmq5CL-*f{>73|^(huYw
z#;czX)qEraeYxdl8$;DsBON6Z?81I-((TF{UZ)^ZGO1+!d-9ka%yiiw&`?O0CB8Xw
zdye+>u=C5h6;nG!psrU=cn!sRx%m=&oMj;e$dhx@4~>-L66QK4lc}>xoNqO&1N#z;
zuxBp>I!m6EG>Y2(FIq5fuc?)f+TGxk?$Z955WUWT3ia5#M-#8G3LKi{K#>tgYMI{K
z7)xX1h*7)e^7P!Aq_0v!mONYsgF}taDcPf?s0aYH6h{tJQqB;LyhsS}_di<=5>w5|
zBM%S4gHU;OQvDZ1kfUZW`tIs>@kInnrj)WTEUY!|$qva)vqg}aIwU{E(R^7VV*75c
zt;kBV|E<EEX<asTbr<vos({l1`^u=FNgj3q!T{&tql;~qQAo*v`Nt)cg=S<F75qEB
z7Zpca6J$4u5%6DQ)hG+a$Y^Ue5dHSknqzQVAr!)O>nI)rvki-AehEsETT~IlB(YV1
zBB<j*qSNswdkdDwG6z+0?P@BdHO_FS<R++8>g+$+SEt<T)-Q_GtR+T9K*ql5+ubqk
z(P!tt;GP3(LfMg>tuA}SvA@=*7*uu=D!0#F>|V)cKK~od1U^_?a>-}oXLg*(mph*H
zrI!)r5uG|_wv8V;TMHaT7W{YVjBnlDmkdD+vl&l|Gd9ASEnx7ONar|^8@K+x!$)q)
zAPbkDF%M_p9zDa|WimxHJG@8OdXHuLQ%S1G>XEnovE1A&0VIDp-Kr9@0p>?X?CY*B
zF5#uhpA{t}MhIx{A9G?FE2fGD)F=s`M3BNxm*_99Qbv0;cqB~2#g=okTbex}wcx%|
zq~~J9c=HL5elC+A+fHsqW%t0M8>Xfy`z~lKn=1M$5kpd@1^uP9FJHkzl8nMG;I`+T
zmXbt~Cz83Y`^>zSks-cCY;oqE<81E0%wjY+V)T0Of6vCO<KcPzHYzAmej7>U$4&uI
zm*jYz+L0{IxA0GvryEc^Oc4Ebf)~$$SCCRYQvViIF_(vF5g_Q5m}&Q?mErSrbbhKd
za5hxFox4VrxcDN-DUgEZc50^tfkq}L8hlZlAkNnr1=f}Cr&&(8VL?P2QqnyR4c>%H
zBnEIv;hG7C*GYJBtXV)ncJ#s1g;AvCmti>&Y-`Gy{zRm*MX$v>r8jJ6l6mRn`=$5n
z=J56(P@^2Y2iIQG0lVAE1qnKeiwP(Fl8$#AhmO(#;v))1cCWv7&T=nwxanVAl7OkZ
z+H!18&c|9+%1uQH0Hw3#-^N)>mSszWijIpn4h@Bw*#$FEc9tv=3P`xZx~v+E69m)S
zM@HfmP)PCMv(L>y4By$Bw^fE9M$e}MI&38u(W26<B=rM6zR~yQKJ=uQgn{4!aEg<5
zq;TVbL9Kk+o6pRa4<583SMIqVJ_5S4`~md(`giIJn(`mGj<6L5uP={RicDXKS{^|H
z(v;SJ@dHW43Uq5VS<&{{L<L^_4=~9SVU&HZq~u0A=#~&rKo#1e9*pkHi@PvQV=nUd
z_jlCTddE^mQLkxUZRPcu^bSCWWD%78M37#sxp}h_$l)r^rPVl!{9@WWwt&K*&VN2v
zk@V26oUmjO0mVU0!_IEp9Euk@S(d_)V0Q_Pp#sqCcZh~C%Vu|AQQ!;BSNfK0|0$k;
zelx9?EsLA`*=7T3A{DhPxHIp2dO)pdaWt^FsY|QKI#Z@uODG33$Vm1N6TvP-|Dn=H
z_wd&g(Y~DXq;J@Q=pNi=UpF5pd&K`w7-3d6yK&D=?T{>k>q4H#f2(Dv-0WX)=I^SS
zoXeZff}OM@Vz-z67e>^~gH7UnP1(^VsEBq~DY8`>eX$VaG}<=VR4CZ2QXnQAV8_Nb
zMFf2wkP^3)EVB?np8uh8$SOpZ_@6q+qBz^JdOTZ1GnP=k*!(P0eEFwkATAcsohELn
z#)g@Z;+kT#>}R2CS634X`R26qLtRyrz}twbic`NL=4yz0R#_RvwW}Ojj`;frv_qz=
z>>Deh@I{y|>3uSzw7=g^9~2w7Uork*+hcX(s@q12=o+91T=+Qn=@%c7KvY{`BP$X+
zUtA;*jJF$5;})W_rvlihR0Ij?fyuFBE8m+(_%sJ-YuS4~lF2sgz{F>vgYSRmk0|ok
zRaNuw-a{*21r!tvzATm^ws>~FEtr3^YgKW&qg(O#ko=jzo3aPDEFEtI@$Lz$KpkO$
z50jHGd<+)5xRHob7Y3tSdT!?@x@*n^J|hXL=r?)RpqwFkp_R3DY1qWXfn^LPzZmW-
zy!2#WP1?RbO_Aui5k<~~tVNLB;T#10NLC=Od;^whju`vQm#|waN{DHydmvARI`|wQ
zh#5a{0~c<)X(hJ;rdu2;Z$B+$w`=t*D!ELaKo16V)=CxBr4air%qFzT8&21jC{kzW
zEVk%J&}6{Fo%sZ0?DBTxd8jt_c!%V5m6OQo;hO%h7qyQy&jr<=1aE-BLpOi;P+o{V
zUOGzDI2P(qFnK(GvM*rmDiO5wod753CKRM2dm`9mnef-{?h9tuw1n6l34c{XRzE^K
zczpqq0}m3g4XpM0Zfp5ad9Cv|m*^7Qb-#btD|UA46@HckBG&3<?!k4xHBl7yK3Gh?
zO`g&mCI*AM>ihk$GK3p}>mwGdyRn}_7uvLl89^JRgfJ1~{gER_?tRz}`O=}vBUX~v
zml3h$wLs|VhT~E}URDbRm(|>-l$p7c)N+IqeXmhDn>JhPwu+VUBFyQiJJ$^lhA45R
zi{&o7tlp(<cfPQ2jD(x(&^dH>E9g1}0m_gOKoLJNzOayM=rwv2*;Rf5Me2R>&bEQp
z`)i$Mp{V$*MJaHD5a)cT#3uJIotZ>byWIKh2u^=bOSf#gZN1pW!y856@_OA^S>J&{
z6<{nkyr#cpw}w1G*?=w46_VKUXD+5bhEF>R5xOo6W_|zh<A(klP1)YBw^g&Fx7}I3
zC`Ri)8{q`(3?wAC{1<CL+Ob^Sd~5fJ|J&Oaq_l#h5u_YXe+Z*;_8;uEkX&pYtF)r0
zx4ocg-+bi0t(>5~5ii4x`fQ5?4IaeU4UJcdLDE02WtT0@(&rwsvltc<fBE`qQrnIG
zAZ>sDDssnWkrwji+R5*Yd5r^7Pz}0y^X6gOeElP?Ni*1)Y7`A-INFN6Y-J_8z&)d=
z=bNuSy64gPMxWVgGCWeCf~@Z=J<S&Z?M8qUDEi*NX1(Oe{-JB2poeq1R@$9u3VOKG
zD>cqOP?_1a4%wLnOm17|)Dy++QsL>VNo_%;oAJ;GNi@v3+Y(XX2HX|{#<&IC6agl@
zYKnwzTs}$6$ar(9=ZMOp)2=%u_ZWMlu=L*+dzN5fYdfXW?A5t7(0%YM%AVVSb*u$p
z=6AgUp=XDGe0ja>exY$w?{_)a(*z~=Hkdqp>G<T2{$rO?t4@OC9+N0FY=Rj2IAA>3
zerMKi?WTRB2;)LxD@}Jgse}nUBip^zM9I)we`2CZ3XA_bM_4j0@P|tW*1pNhOhk9p
z+b|Hoow*d`nFLo+XKULjNQ~5w7;2zLT1)D`RU)We{v}zUvio4x10`W0Z81%Fv8=@g
zNC8cO8&EWI&(R!N5M7G-zx5*Y#op$F*;^brYp>+4>%_$xeaXd?`y3FxAu&$#9aTY?
zRAo-k$w8O(QVNei`#ezoe#u~372ozY4KA%1EyC`*g9c72;&;Lw&L7)ZlgE_|JT-80
zx76(*>f;)bB9DMl_jiWPss5O&_UQ4cZ{(0ePnFz1YD^zVd_ZE5fqg;+1zvB!ov^m@
z@cFSByGM+(xocr(ms0HDwxXRrvuVe@S+kIM%^#m-ze~K5HfLl6?7Jt56cZzf&EK+!
z32OO!t`t<C?XunHODeBcI(4d_!nT-a$UPLuj|;l1<Q_#9l>DCyxGcKwHP}Y+`0};d
zH!Vp|Fzv4{jyW@mXo&8TXu^hzki{BtY1n=XNqzs-DD|&nW6gP8`{8G{!X}l@t1FzV
zX0R>PC`$7PY&j^{YD)42<d<D{eN{>-7qX9{cqR9PWONO$7ePiRE5J}J9l|_7Xmzih
zwvM<L$ZOA?E5l6BMU(()pLN|y<cj>Rqd+k#`XnLW@2h+ILTSdsD3auzS?q{q;KEyP
zyTFB)kGc9s9=s>BEtXJ}R&PW>$Nn$?M%%CG;_Jp(-%naYz~);@>aWa^LQq(&n;fxE
z_y151HIg<F0(RL_()UD;B;t$&C3iEc|AE`p^l?b7-^{694>0q!-?~po{EjDEz2X>!
zK9@K4{j;FB1P>*r##((NXZPjKA?PTHQD*zSFmiWzZyq;$YJ(ODTREK6O2domQ7`-|
zy&NH~kQn+=q#&EVa3ucAR&*zUt+rYV5yhiD+0CmAJQJSZH-aJqR8H>xNU%p&A3bi@
z?AXWF`FzrL<JLLCB;H6cGt{u6QWE=<exc~cAU8KOG#oH!0Wpz?o2oN`MEw<I&{7A}
z>ES*3?rYy~O%}mg%K{7-og_?9f+C>hi@y^O!zo@6+2zT8qfAhfJ<|S1M?eS7;bzer
zNCn1#h@1^o0b_S$D(PG$fF*X;@Go|l!DWGOTLjjUTLbmWA-@Om3ORm5HusLS_-Uwi
z+{4RzPLGTdArtW6nu9p^qkW*-aqzK2fg&n80Yb`P1b^6WcsTZgMuimxNF$=MI(4fw
z_sI$C*mZ|s@5LfVU}8#y!~e~&=*HV_?Y0h#H3(RRLKch=HS98|+hbSD70mf85_tjL
z#f>=n?riaMK3rF{6(ua*W$iplGSoQ<isx`i)|*k{)^Jgu-z6-B&K}Zx8`jgadGI5f
z!VNtxj6#wNrXREoIXG}%lwG;lM0g4@=o8D&6e^6Waz|W4yZi#)-uBo=)j66hf7kE$
z&UEU))VSDXAvs%OHpsno0>a9UelPhqN)eM^R~dB^DWpD$Chh(riGgyqvDSGF3Dn2L
z+}zcN-q)4_!8!>CX4M|ax)lRHWw>q<{p21Iv-&Yscb}yK<u|y8qwwgZH1)IOyJqGx
zSadKlvyrzBG+-2y(SIaf80LWRJDmk@<CwH204fxsK2PNO>JwX(j00CL-LakwRR>&)
zAB0O~3v?mIzqwv5Ew8;V42MiccITTMV@Ppm(nO`?Y)|$xZ30vk@u*>8>E(9#qCsty
zBzF0_?&I{oDhL(+6gpH+>hii;@j4<Dwi8`ydM;MI7ehLBKg$5P3bcEx0i%8fWF~?f
z0KfADCr=|mnrc6@uBHaOAUb#b(qyHl8cDt2(t=wOz$}gdYVNqcTDJ)gxZYrBBF>JY
zfM3Khx$SDsPPGIEgat<a2cQFu?4|n}B#_Rm$3f2Pk2d-{>>VRU?LtqzN>2h_A(?v+
zJ8a~&q`}R1_jO=S)dUN;4<*Q~@Uke{8s#19vjJ)z3Qt-514!K3;2LSWFN*vrBh29J
z2I_IRSo-e%4Yz6hpnN7T5T412A#Fd5{v%H!%yZfQHt53N@$a0J$|X;o{RFx|2@?Q=
zML0w;ZQ~kHEG}PP(KWFr!<|PLc3=25jwLPQVzLD_#$?R4#_x8bs64Q|Rw3H(2-33B
zQxrM``EMYpzkk0~5-v)RYaV=%bE5#=l)x^lo%3XSNT5HJCJ;76Gc${+AmOQM+2_il
zBHe0;uP4cW0OFxlO;69gV=YAixDhRX(a`gQtF#Ds<rbg7L6dFUwq<D90iW35^r8QW
z!u9BW#oB$?G6?~s{-*zks{S{W+rxYe7&wP=^u(4(@RPe~_G1);_Ig9W87z5uwz_sK
z2pBEg8*HD1!><I_Xi7NOqtJuiY2^TKH@r*)cT^tz%aYDWL;63sl%nB>+grf)Q6vS_
zqT;R_&z(t(gx^;F#WFS|M-L0bjlnp0cv=N8rxQeri`rQA*Y59^RO15uTl^MpNj|s;
z1E&Paj69D4Jhz7^-Xt<s!k(yH^<-aBBH-68xt!6IpDs(Sf(slEQ&KK9ttjy5=3E~>
zMl#SjQ69A?H$&4n+c*8-n$QjN&`}W9$D|elfo7lM%xTK-to7=A!#+1AMPw}eDUB>r
zrznAI{;mnZO{uKcS5@&;$T#hUwJ?Yw$>oHNR>bRX$KAk_@e6$rM66G?{u9hCeyP{~
z&$t*tXYPGXiqc6D2B2_#9AG9&O#v5gn5`Y&(2)G==Z`ZnkOv0wyDb9RiA-1gFG|ly
zfGIuNr4D@#6=_kFJpZ*WdqDSnt$dvGTez`Yt+3gkC6b7N{sLzmX8<USli_lrI0?2T
z<&XODHL{$LR!@LCfFH`?k*IgKd!0)q^i~S74{O?GQ?rcRn<M=RsktN^olo}rs|k`=
zWU>0coZh8Q-ir{p@F${&gQ5fCs!wsVPcdS^)e>Ju#VNRO8FtA#&BrFQ*T8GBfGdSr
z31pp<A3WI=%7kAfQ@~4G7kPT`KSDcJBrZl9db1i=x2<q>%l*chd@lfDLHPn6Q-KoX
zFFKnkgA_8=0j4uk_gNdd<F_XJ>>V!QH>%)4ro5Kj`LpLFH##&=5_D{gNbzk~&5ex)
z40ld-wavud55(ORoK_tVNWl&a{uAs0Y7dc-0WK9$c}wrrlf5cUJ=P~GCMvJl4Z(rv
z=%}-GE5)m%cV&aPMJgLV@W-v0UaujAKpm>Oeh$f%ii~U?)15em8l_k71wTNW*Kc2!
JYQi}4e*m^z@umO(

literal 0
HcmV?d00001

diff --git a/static/img/demos/thumbnail.svg b/static/img/demos/thumbnail.svg
new file mode 100644
index 00000000000..b12a43f92a9
--- /dev/null
+++ b/static/img/demos/thumbnail.svg
@@ -0,0 +1,13 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1766_3886)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M338 195C368.928 195 394 169.928 394 139C394 108.072 368.928 83 338 83C307.072 83 282 108.072 282 139C282 169.928 307.072 195 338 195Z" fill="#C0C8CE"/>
+<path d="M485.5 525L163.495 234.446C156.395 227.347 146.852 223.228 136.816 222.931C126.78 222.633 117.01 226.18 109.502 232.846L-214 525" fill="#B3BAC0"/>
+<path opacity="0.7" d="M120.5 563.5L368.419 312.429C375.361 305.472 384.653 301.363 394.47 300.908C404.288 300.452 413.92 303.684 421.477 309.967L667 514" fill="#B3BAC0"/>
+</g>
+<defs>
+<clipPath id="clip0_1766_3886">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 9e2ec65cf65f874f4a24db28e1ba425095c511a7 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 29 Sep 2022 13:11:43 -0400
Subject: [PATCH 081/469] docs(demos): update image paths for avatar and
 thumbnail (#2583)

---
 static/usage/avatar/basic/angular.md                         | 2 +-
 static/usage/avatar/basic/demo.html                          | 2 +-
 static/usage/avatar/basic/javascript.md                      | 2 +-
 static/usage/avatar/basic/react.md                           | 2 +-
 static/usage/avatar/basic/vue.md                             | 2 +-
 static/usage/avatar/chip/angular.md                          | 2 +-
 static/usage/avatar/chip/demo.html                           | 2 +-
 static/usage/avatar/chip/javascript.md                       | 2 +-
 static/usage/avatar/chip/react.md                            | 2 +-
 static/usage/avatar/chip/vue.md                              | 2 +-
 static/usage/avatar/item/angular.md                          | 2 +-
 static/usage/avatar/item/demo.html                           | 2 +-
 static/usage/avatar/item/javascript.md                       | 2 +-
 static/usage/avatar/item/react.md                            | 2 +-
 static/usage/avatar/item/vue.md                              | 2 +-
 .../theming/css-properties/angular/example_component_html.md | 2 +-
 static/usage/avatar/theming/css-properties/demo.html         | 2 +-
 static/usage/avatar/theming/css-properties/javascript.md     | 2 +-
 static/usage/avatar/theming/css-properties/react/main_tsx.md | 2 +-
 static/usage/avatar/theming/css-properties/vue.md            | 2 +-
 static/usage/chip/slots/angular.md                           | 2 +-
 static/usage/chip/slots/demo.html                            | 2 +-
 static/usage/chip/slots/javascript.md                        | 2 +-
 static/usage/chip/slots/react.md                             | 2 +-
 static/usage/chip/slots/vue.md                               | 2 +-
 static/usage/item/media/angular.md                           | 4 ++--
 static/usage/item/media/demo.html                            | 4 ++--
 static/usage/item/media/javascript.md                        | 4 ++--
 static/usage/item/media/react.md                             | 4 ++--
 static/usage/item/media/vue.md                               | 4 ++--
 static/usage/thumbnail/basic/angular.md                      | 2 +-
 static/usage/thumbnail/basic/demo.html                       | 2 +-
 static/usage/thumbnail/basic/javascript.md                   | 2 +-
 static/usage/thumbnail/basic/react.md                        | 2 +-
 static/usage/thumbnail/basic/vue.md                          | 2 +-
 static/usage/thumbnail/item/angular.md                       | 2 +-
 static/usage/thumbnail/item/demo.html                        | 2 +-
 static/usage/thumbnail/item/javascript.md                    | 2 +-
 static/usage/thumbnail/item/react.md                         | 2 +-
 static/usage/thumbnail/item/vue.md                           | 2 +-
 static/usage/thumbnail/theming/css-properties/angular.md     | 5 -----
 .../theming/css-properties/angular/example_component_html.md | 2 +-
 static/usage/thumbnail/theming/css-properties/demo.html      | 2 +-
 static/usage/thumbnail/theming/css-properties/javascript.md  | 2 +-
 .../usage/thumbnail/theming/css-properties/react/main_tsx.md | 2 +-
 static/usage/thumbnail/theming/css-properties/vue.md         | 2 +-
 46 files changed, 50 insertions(+), 55 deletions(-)
 delete mode 100644 static/usage/thumbnail/theming/css-properties/angular.md

diff --git a/static/usage/avatar/basic/angular.md b/static/usage/avatar/basic/angular.md
index 0e544a336b8..a74cea822be 100644
--- a/static/usage/avatar/basic/angular.md
+++ b/static/usage/avatar/basic/angular.md
@@ -1,5 +1,5 @@
 ```html
 <ion-avatar>
-  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/basic/demo.html b/static/usage/avatar/basic/demo.html
index f4b499736c2..34fd2c6f460 100644
--- a/static/usage/avatar/basic/demo.html
+++ b/static/usage/avatar/basic/demo.html
@@ -17,7 +17,7 @@
     <ion-content>
       <div class="container">
         <ion-avatar>
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
         </ion-avatar>
       </div>
     </ion-content>
diff --git a/static/usage/avatar/basic/javascript.md b/static/usage/avatar/basic/javascript.md
index 0e544a336b8..a74cea822be 100644
--- a/static/usage/avatar/basic/javascript.md
+++ b/static/usage/avatar/basic/javascript.md
@@ -1,5 +1,5 @@
 ```html
 <ion-avatar>
-  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/basic/react.md b/static/usage/avatar/basic/react.md
index 419456d4733..9fe5dafb88f 100644
--- a/static/usage/avatar/basic/react.md
+++ b/static/usage/avatar/basic/react.md
@@ -6,7 +6,7 @@ function Example() {
   return (
     <>
       <IonAvatar>
-        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
       </IonAvatar>
     </>
   );
diff --git a/static/usage/avatar/basic/vue.md b/static/usage/avatar/basic/vue.md
index 95bee27c769..5136ca90400 100644
--- a/static/usage/avatar/basic/vue.md
+++ b/static/usage/avatar/basic/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-avatar>
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
   </ion-avatar>
 </template>
 
diff --git a/static/usage/avatar/chip/angular.md b/static/usage/avatar/chip/angular.md
index 767e5bc3ff3..6fa2d82aa0b 100644
--- a/static/usage/avatar/chip/angular.md
+++ b/static/usage/avatar/chip/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <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/avatar/chip/demo.html b/static/usage/avatar/chip/demo.html
index bf827440dd6..eaad5d8cdf6 100644
--- a/static/usage/avatar/chip/demo.html
+++ b/static/usage/avatar/chip/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-chip>
           <ion-avatar>
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+            <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/avatar/chip/javascript.md b/static/usage/avatar/chip/javascript.md
index 767e5bc3ff3..6fa2d82aa0b 100644
--- a/static/usage/avatar/chip/javascript.md
+++ b/static/usage/avatar/chip/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <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/avatar/chip/react.md b/static/usage/avatar/chip/react.md
index 237cbd54d64..69bd5dbb4fb 100644
--- a/static/usage/avatar/chip/react.md
+++ b/static/usage/avatar/chip/react.md
@@ -6,7 +6,7 @@ function Example() {
     <>
       <IonChip>
         <IonAvatar>
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
         </IonAvatar>
         <IonLabel>Chip Avatar</IonLabel>
       </IonChip>
diff --git a/static/usage/avatar/chip/vue.md b/static/usage/avatar/chip/vue.md
index fe07bebe1ad..8ded7586040 100644
--- a/static/usage/avatar/chip/vue.md
+++ b/static/usage/avatar/chip/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-chip>
     <ion-avatar>
-      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+      <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/avatar/item/angular.md b/static/usage/avatar/item/angular.md
index 20a7db662dc..5bf15fbc737 100644
--- a/static/usage/avatar/item/angular.md
+++ b/static/usage/avatar/item/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-avatar slot="start">
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <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/avatar/item/demo.html b/static/usage/avatar/item/demo.html
index dde84e47480..d3feb1707dd 100644
--- a/static/usage/avatar/item/demo.html
+++ b/static/usage/avatar/item/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-item>
           <ion-avatar slot="start">
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+            <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/avatar/item/javascript.md b/static/usage/avatar/item/javascript.md
index 20a7db662dc..5bf15fbc737 100644
--- a/static/usage/avatar/item/javascript.md
+++ b/static/usage/avatar/item/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-avatar slot="start">
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <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/avatar/item/react.md b/static/usage/avatar/item/react.md
index b652100dbeb..71b562a5d7b 100644
--- a/static/usage/avatar/item/react.md
+++ b/static/usage/avatar/item/react.md
@@ -6,7 +6,7 @@ function Example() {
     <>
       <IonItem>
         <IonAvatar slot="start">
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
         </IonAvatar>
         <IonLabel>Item Avatar</IonLabel>
       </IonItem>
diff --git a/static/usage/avatar/item/vue.md b/static/usage/avatar/item/vue.md
index 745d67ed32e..315af034426 100644
--- a/static/usage/avatar/item/vue.md
+++ b/static/usage/avatar/item/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-item>
     <ion-avatar slot="start">
-      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+      <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/avatar/theming/css-properties/angular/example_component_html.md b/static/usage/avatar/theming/css-properties/angular/example_component_html.md
index 0e544a336b8..a74cea822be 100644
--- a/static/usage/avatar/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/avatar/theming/css-properties/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
 <ion-avatar>
-  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/theming/css-properties/demo.html b/static/usage/avatar/theming/css-properties/demo.html
index a7f56a37548..1271fbd2666 100644
--- a/static/usage/avatar/theming/css-properties/demo.html
+++ b/static/usage/avatar/theming/css-properties/demo.html
@@ -22,7 +22,7 @@
     <ion-content>
       <div class="container">
         <ion-avatar slot="start">
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
         </ion-avatar>
       </div>
     </ion-content>
diff --git a/static/usage/avatar/theming/css-properties/javascript.md b/static/usage/avatar/theming/css-properties/javascript.md
index 96e64bcf277..f866e15762d 100644
--- a/static/usage/avatar/theming/css-properties/javascript.md
+++ b/static/usage/avatar/theming/css-properties/javascript.md
@@ -6,6 +6,6 @@
 </style>
 
 <ion-avatar>
-  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/theming/css-properties/react/main_tsx.md b/static/usage/avatar/theming/css-properties/react/main_tsx.md
index 4824f336b9c..f04d7f8fbe3 100644
--- a/static/usage/avatar/theming/css-properties/react/main_tsx.md
+++ b/static/usage/avatar/theming/css-properties/react/main_tsx.md
@@ -9,7 +9,7 @@ function Example() {
   return (
     <>
       <IonAvatar>
-        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
       </IonAvatar>
     </>
   );
diff --git a/static/usage/avatar/theming/css-properties/vue.md b/static/usage/avatar/theming/css-properties/vue.md
index 235fb00ea0b..affb7ccdecb 100644
--- a/static/usage/avatar/theming/css-properties/vue.md
+++ b/static/usage/avatar/theming/css-properties/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-avatar>
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
   </ion-avatar>
 </template>
 
diff --git a/static/usage/chip/slots/angular.md b/static/usage/chip/slots/angular.md
index 3fbc4818f43..75f2e24dd8d 100644
--- a/static/usage/chip/slots/angular.md
+++ b/static/usage/chip/slots/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <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>
diff --git a/static/usage/chip/slots/demo.html b/static/usage/chip/slots/demo.html
index 4888fb8d911..d42aecde9e3 100644
--- a/static/usage/chip/slots/demo.html
+++ b/static/usage/chip/slots/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-chip>
           <ion-avatar>
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+            <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>
diff --git a/static/usage/chip/slots/javascript.md b/static/usage/chip/slots/javascript.md
index 3fbc4818f43..75f2e24dd8d 100644
--- a/static/usage/chip/slots/javascript.md
+++ b/static/usage/chip/slots/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <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>
diff --git a/static/usage/chip/slots/react.md b/static/usage/chip/slots/react.md
index 7a36f9b68c5..35dbd057c70 100644
--- a/static/usage/chip/slots/react.md
+++ b/static/usage/chip/slots/react.md
@@ -8,7 +8,7 @@ function Example() {
     <>
       <IonChip>
         <IonAvatar>
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <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>
diff --git a/static/usage/chip/slots/vue.md b/static/usage/chip/slots/vue.md
index 24ef77077f2..76f0bbfcf48 100644
--- a/static/usage/chip/slots/vue.md
+++ b/static/usage/chip/slots/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-chip>
     <ion-avatar>
-      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+      <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>
diff --git a/static/usage/item/media/angular.md b/static/usage/item/media/angular.md
index 398e8382e00..915969f127e 100644
--- a/static/usage/item/media/angular.md
+++ b/static/usage/item/media/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-avatar slot="start">
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
   </ion-avatar>
   <ion-label>
     Avatar Item
@@ -10,7 +10,7 @@
 
 <ion-item>
   <ion-thumbnail slot="start">
-    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
   </ion-thumbnail>
   <ion-label>
     Thumbnail Item
diff --git a/static/usage/item/media/demo.html b/static/usage/item/media/demo.html
index cc2e68fa6f5..141c8fe582c 100644
--- a/static/usage/item/media/demo.html
+++ b/static/usage/item/media/demo.html
@@ -23,7 +23,7 @@
       <div class="container">
         <ion-item>
           <ion-avatar slot="start">
-            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
           </ion-avatar>
           <ion-label>
             Avatar Item
@@ -32,7 +32,7 @@
 
         <ion-item>
           <ion-thumbnail slot="start">
-            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
           </ion-thumbnail>
           <ion-label>
             Thumbnail Item
diff --git a/static/usage/item/media/javascript.md b/static/usage/item/media/javascript.md
index 398e8382e00..915969f127e 100644
--- a/static/usage/item/media/javascript.md
+++ b/static/usage/item/media/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-avatar slot="start">
-    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
   </ion-avatar>
   <ion-label>
     Avatar Item
@@ -10,7 +10,7 @@
 
 <ion-item>
   <ion-thumbnail slot="start">
-    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
   </ion-thumbnail>
   <ion-label>
     Thumbnail Item
diff --git a/static/usage/item/media/react.md b/static/usage/item/media/react.md
index f1eec0071de..21ba7c98f65 100644
--- a/static/usage/item/media/react.md
+++ b/static/usage/item/media/react.md
@@ -7,7 +7,7 @@ function Example() {
     <>
       <IonItem>
         <IonAvatar slot="start">
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
         </IonAvatar>
         <IonLabel>
           Avatar Item
@@ -16,7 +16,7 @@ function Example() {
 
       <IonItem>
         <IonThumbnail slot="start">
-          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
         </IonThumbnail>
         <IonLabel>
           Thumbnail Item
diff --git a/static/usage/item/media/vue.md b/static/usage/item/media/vue.md
index e7f7bdd2b1d..72dd55ef587 100644
--- a/static/usage/item/media/vue.md
+++ b/static/usage/item/media/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-item>
     <ion-avatar slot="start">
-      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
     </ion-avatar>
     <ion-label>
       Avatar Item
@@ -11,7 +11,7 @@
 
   <ion-item>
     <ion-thumbnail slot="start">
-      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
     </ion-thumbnail>
     <ion-label>
       Thumbnail Item
diff --git a/static/usage/thumbnail/basic/angular.md b/static/usage/thumbnail/basic/angular.md
index 6e388336952..119cfb8ee9c 100644
--- a/static/usage/thumbnail/basic/angular.md
+++ b/static/usage/thumbnail/basic/angular.md
@@ -1,5 +1,5 @@
 ```html
 <ion-thumbnail>
-  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/basic/demo.html b/static/usage/thumbnail/basic/demo.html
index d5bdb920fe4..132df192824 100644
--- a/static/usage/thumbnail/basic/demo.html
+++ b/static/usage/thumbnail/basic/demo.html
@@ -17,7 +17,7 @@
     <ion-content>
       <div class="container">
         <ion-thumbnail>
-          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
         </ion-thumbnail>
       </div>
     </ion-content>
diff --git a/static/usage/thumbnail/basic/javascript.md b/static/usage/thumbnail/basic/javascript.md
index 6e388336952..119cfb8ee9c 100644
--- a/static/usage/thumbnail/basic/javascript.md
+++ b/static/usage/thumbnail/basic/javascript.md
@@ -1,5 +1,5 @@
 ```html
 <ion-thumbnail>
-  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/basic/react.md b/static/usage/thumbnail/basic/react.md
index cfd6d629ee8..3813690a7a4 100644
--- a/static/usage/thumbnail/basic/react.md
+++ b/static/usage/thumbnail/basic/react.md
@@ -6,7 +6,7 @@ function Example() {
   return (
     <>
       <IonThumbnail>
-        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
       </IonThumbnail>
     </>
   );
diff --git a/static/usage/thumbnail/basic/vue.md b/static/usage/thumbnail/basic/vue.md
index 8ef56dfa2c8..74afde558d4 100644
--- a/static/usage/thumbnail/basic/vue.md
+++ b/static/usage/thumbnail/basic/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-thumbnail>
-    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
   </ion-thumbnail>
 </template>
 
diff --git a/static/usage/thumbnail/item/angular.md b/static/usage/thumbnail/item/angular.md
index 5b724820494..a83cb82e78c 100644
--- a/static/usage/thumbnail/item/angular.md
+++ b/static/usage/thumbnail/item/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-thumbnail slot="start">
-    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+    <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/thumbnail/item/demo.html b/static/usage/thumbnail/item/demo.html
index db7778adda6..5d9bec113e7 100644
--- a/static/usage/thumbnail/item/demo.html
+++ b/static/usage/thumbnail/item/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-item>
           <ion-thumbnail slot="start">
-            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+            <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/thumbnail/item/javascript.md b/static/usage/thumbnail/item/javascript.md
index 5b724820494..a83cb82e78c 100644
--- a/static/usage/thumbnail/item/javascript.md
+++ b/static/usage/thumbnail/item/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-thumbnail slot="start">
-    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+    <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/thumbnail/item/react.md b/static/usage/thumbnail/item/react.md
index 6d1d3dafea3..29630ebf819 100644
--- a/static/usage/thumbnail/item/react.md
+++ b/static/usage/thumbnail/item/react.md
@@ -7,7 +7,7 @@ function Example() {
     <>
       <IonItem>
         <IonThumbnail slot="start">
-          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
         </IonThumbnail>
         <IonLabel>Item Thumbnail</IonLabel>
       </IonItem>
diff --git a/static/usage/thumbnail/item/vue.md b/static/usage/thumbnail/item/vue.md
index a791dd166f1..4e688f05030 100644
--- a/static/usage/thumbnail/item/vue.md
+++ b/static/usage/thumbnail/item/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-item>
     <ion-thumbnail slot="start">
-      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+      <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/thumbnail/theming/css-properties/angular.md b/static/usage/thumbnail/theming/css-properties/angular.md
deleted file mode 100644
index 6e388336952..00000000000
--- a/static/usage/thumbnail/theming/css-properties/angular.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-thumbnail>
-  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
-</ion-thumbnail>
-```
diff --git a/static/usage/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
index 2e3429d7831..8ef97cae761 100644
--- a/static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
@@ -1,6 +1,6 @@
 
 ```html
 <ion-thumbnail>
-  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/theming/css-properties/demo.html b/static/usage/thumbnail/theming/css-properties/demo.html
index fb424cd4e70..8391c84480d 100644
--- a/static/usage/thumbnail/theming/css-properties/demo.html
+++ b/static/usage/thumbnail/theming/css-properties/demo.html
@@ -23,7 +23,7 @@
     <ion-content>
       <div class="container">
         <ion-thumbnail>
-          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
         </ion-thumbnail>
       </div>
     </ion-content>
diff --git a/static/usage/thumbnail/theming/css-properties/javascript.md b/static/usage/thumbnail/theming/css-properties/javascript.md
index 05de3080310..6586de083c5 100644
--- a/static/usage/thumbnail/theming/css-properties/javascript.md
+++ b/static/usage/thumbnail/theming/css-properties/javascript.md
@@ -7,6 +7,6 @@
 </style>
 
 <ion-thumbnail>
-  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/thumbnail/theming/css-properties/react/main_tsx.md
index c90a1cc2b68..37f4796d763 100644
--- a/static/usage/thumbnail/theming/css-properties/react/main_tsx.md
+++ b/static/usage/thumbnail/theming/css-properties/react/main_tsx.md
@@ -9,7 +9,7 @@ function Example() {
   return (
     <>
       <IonThumbnail>
-        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
       </IonThumbnail>
     </>
   );
diff --git a/static/usage/thumbnail/theming/css-properties/vue.md b/static/usage/thumbnail/theming/css-properties/vue.md
index e59d386f22a..bd772024b00 100644
--- a/static/usage/thumbnail/theming/css-properties/vue.md
+++ b/static/usage/thumbnail/theming/css-properties/vue.md
@@ -8,7 +8,7 @@
 
 <template>
   <ion-thumbnail>
-    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
   </ion-thumbnail>
 </template>
 

From 9b48e2dae6e2e657cc23915e1dcb91740e60b325 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 29 Sep 2022 12:39:18 -0500
Subject: [PATCH 082/469] fix(datetime-button): add fragment tags to React
 example (#2585)

---
 static/usage/datetime-button/basic/react.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/static/usage/datetime-button/basic/react.md b/static/usage/datetime-button/basic/react.md
index 2fe97bd73a0..90eaaba82af 100644
--- a/static/usage/datetime-button/basic/react.md
+++ b/static/usage/datetime-button/basic/react.md
@@ -3,11 +3,13 @@ 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>
+    <>
+      <IonDatetimeButton datetime="datetime"></IonDatetimeButton>
+      
+      <IonModal keepContentsMounted={true}>
+        <IonDatetime id="datetime"></IonDatetime>
+      </IonModal>
+    </>
   );
 }
 export default Example;

From e1a5f603c7a25c54a0498a478769990d8feb4ba5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 30 Sep 2022 08:10:56 -0500
Subject: [PATCH 083/469] docs(modal): remove swipeToClose references (#2587)

---
 docs/api/modal.md                                        | 9 ++-------
 static/demos/api/modal/index.html                        | 1 -
 static/usage/modal/can-dismiss/boolean/demo.html         | 2 +-
 .../function/angular/example_component_html.md           | 2 +-
 static/usage/modal/can-dismiss/function/demo.html        | 2 +-
 static/usage/modal/card/basic/demo.html                  | 2 +-
 6 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 2bd1b95b970..39c5cf21c6a 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -86,11 +86,11 @@ import CanDismissFunctionExample from '@site/static/usage/modal/can-dismiss/func
  
 ### 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 and the `swipeToClose` properties on `ion-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 `swipeToClose` property can be used to control whether or not the card modal can be swiped to close.
+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.
@@ -110,10 +110,6 @@ 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.
 
-:::note
- Note: The `swipeToClose` property has no effect when using a sheet modal as sheet modals must be swipeable in order to be usable.
-:::
-
 import SheetExample from '@site/static/usage/modal/sheet/basic/index.md';
 
 <SheetExample />
@@ -192,7 +188,6 @@ interface ModalOptions {
   backdropDismiss?: boolean;
   cssClass?: string | string[];
   animated?: boolean;
-  swipeToClose?: boolean;
 
   mode?: 'ios' | 'md';
   keyboardClose?: boolean;
diff --git a/static/demos/api/modal/index.html b/static/demos/api/modal/index.html
index 32750e6e9e4..eb960b7d6dc 100644
--- a/static/demos/api/modal/index.html
+++ b/static/demos/api/modal/index.html
@@ -105,7 +105,6 @@ <h2>Samwise</h2>
 
       function openCardModal() {
         openModal({
-          swipeToClose: true,
           presentingElement: pageEl,
         });
       }
diff --git a/static/usage/modal/can-dismiss/boolean/demo.html b/static/usage/modal/can-dismiss/boolean/demo.html
index a060813f55e..b99b52bf6b5 100644
--- a/static/usage/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/modal/can-dismiss/boolean/demo.html
@@ -22,7 +22,7 @@
       <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-modal trigger="open-modal">
           <ion-header>
             <ion-toolbar>
               <ion-title>Modal</ion-title>
diff --git a/static/usage/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/modal/can-dismiss/function/angular/example_component_html.md
index 859d21d1e9c..5775514075c 100644
--- a/static/usage/modal/can-dismiss/function/angular/example_component_html.md
+++ b/static/usage/modal/can-dismiss/function/angular/example_component_html.md
@@ -7,7 +7,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-button id="open-modal" expand="block">Open</ion-button>
-    <ion-modal #modal trigger="open-modal" [swipeToClose]="true" [canDismiss]="canDismiss">
+    <ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss">
       <ng-template>
         <ion-header>
           <ion-toolbar>
diff --git a/static/usage/modal/can-dismiss/function/demo.html b/static/usage/modal/can-dismiss/function/demo.html
index 452e2f2005e..06bb5d3ae6c 100644
--- a/static/usage/modal/can-dismiss/function/demo.html
+++ b/static/usage/modal/can-dismiss/function/demo.html
@@ -23,7 +23,7 @@
       <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-modal trigger="open-modal">
           <ion-header>
             <ion-toolbar>
               <ion-title>Modal</ion-title>
diff --git a/static/usage/modal/card/basic/demo.html b/static/usage/modal/card/basic/demo.html
index b29d3ff57a3..2e144a3a8e0 100644
--- a/static/usage/modal/card/basic/demo.html
+++ b/static/usage/modal/card/basic/demo.html
@@ -22,7 +22,7 @@
       <ion-content class="ion-padding">
         <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
 
-        <ion-modal trigger="open-modal" swipe-to-close="true">
+        <ion-modal trigger="open-modal">
           <ion-header>
             <ion-toolbar>
               <ion-title>Modal</ion-title>

From 950b8cb19e406e723a7927135afd063c3af23d7b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 30 Sep 2022 08:11:07 -0500
Subject: [PATCH 084/469] docs(modal): add canDismiss, deprecate swipeToClose
 (#2588)

---
 docs/api/modal.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 6276db04bec..0f5e5b95884 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -189,7 +189,12 @@ interface ModalOptions {
   backdropDismiss?: boolean;
   cssClass?: string | string[];
   animated?: boolean;
+  /**
+   * If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.
+   * @deprecated - To prevent modals from dismissing, use canDismiss instead.
+   */
   swipeToClose?: boolean;
+  canDismiss?: boolean | (() => Promise<boolean>);
 
   mode?: 'ios' | 'md';
   keyboardClose?: boolean;

From f57ec9f2942fc64223feb90efb87b1114f88f0df Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 30 Sep 2022 08:11:18 -0500
Subject: [PATCH 085/469] docs(modal): fix angular card modal example (#2589)

---
 .../can-dismiss/function/angular/example_component_html.md      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/modal/can-dismiss/function/angular/example_component_html.md
index 859d21d1e9c..bb832de7201 100644
--- a/static/usage/modal/can-dismiss/function/angular/example_component_html.md
+++ b/static/usage/modal/can-dismiss/function/angular/example_component_html.md
@@ -7,7 +7,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-button id="open-modal" expand="block">Open</ion-button>
-    <ion-modal #modal trigger="open-modal" [swipeToClose]="true" [canDismiss]="canDismiss">
+    <ion-modal #modal trigger="open-modal" [swipeToClose]="true" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
       <ng-template>
         <ion-header>
           <ion-toolbar>

From 531d3c971556fde6601e697d980e5744e2920cc6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 30 Sep 2022 11:27:35 -0400
Subject: [PATCH 086/469] docs(toggle): add component playgrounds (#2579)

---
 docs/api/toggle.md                            | 471 +-----------------
 static/usage/toggle/basic/angular.md          |  20 +
 static/usage/toggle/basic/demo.html           |  47 ++
 static/usage/toggle/basic/index.md            |   8 +
 static/usage/toggle/basic/javascript.md       |  20 +
 static/usage/toggle/basic/react.md            |  28 ++
 static/usage/toggle/basic/vue.md              |  31 ++
 static/usage/toggle/on-off/angular.md         |   3 +
 static/usage/toggle/on-off/demo.html          |  25 +
 static/usage/toggle/on-off/index.md           |   8 +
 static/usage/toggle/on-off/javascript.md      |   3 +
 static/usage/toggle/on-off/react.md           |  11 +
 static/usage/toggle/on-off/vue.md             |  14 +
 static/usage/toggle/theming/colors/angular.md |  11 +
 static/usage/toggle/theming/colors/demo.html  |  33 ++
 static/usage/toggle/theming/colors/index.md   |   8 +
 .../usage/toggle/theming/colors/javascript.md |  11 +
 static/usage/toggle/theming/colors/react.md   |  21 +
 static/usage/toggle/theming/colors/vue.md     |  22 +
 .../angular/example_component_css.md          |  26 +
 .../angular/example_component_html.md         |   4 +
 .../toggle/theming/css-properties/demo.html   |  52 ++
 .../toggle/theming/css-properties/index.md    |  31 ++
 .../theming/css-properties/javascript.md      |  31 ++
 .../theming/css-properties/react/main_css.md  |  26 +
 .../theming/css-properties/react/main_tsx.md  |  16 +
 .../toggle/theming/css-properties/vue.md      |  42 ++
 .../angular/example_component_css.md          |  33 ++
 .../angular/example_component_html.md         |   4 +
 .../toggle/theming/css-shadow-parts/demo.html |  59 +++
 .../toggle/theming/css-shadow-parts/index.md  |  31 ++
 .../theming/css-shadow-parts/javascript.md    |  38 ++
 .../css-shadow-parts/react/main_css.md        |  33 ++
 .../css-shadow-parts/react/main_tsx.md        |  16 +
 .../toggle/theming/css-shadow-parts/vue.md    |  49 ++
 35 files changed, 836 insertions(+), 450 deletions(-)
 create mode 100644 static/usage/toggle/basic/angular.md
 create mode 100644 static/usage/toggle/basic/demo.html
 create mode 100644 static/usage/toggle/basic/index.md
 create mode 100644 static/usage/toggle/basic/javascript.md
 create mode 100644 static/usage/toggle/basic/react.md
 create mode 100644 static/usage/toggle/basic/vue.md
 create mode 100644 static/usage/toggle/on-off/angular.md
 create mode 100644 static/usage/toggle/on-off/demo.html
 create mode 100644 static/usage/toggle/on-off/index.md
 create mode 100644 static/usage/toggle/on-off/javascript.md
 create mode 100644 static/usage/toggle/on-off/react.md
 create mode 100644 static/usage/toggle/on-off/vue.md
 create mode 100644 static/usage/toggle/theming/colors/angular.md
 create mode 100644 static/usage/toggle/theming/colors/demo.html
 create mode 100644 static/usage/toggle/theming/colors/index.md
 create mode 100644 static/usage/toggle/theming/colors/javascript.md
 create mode 100644 static/usage/toggle/theming/colors/react.md
 create mode 100644 static/usage/toggle/theming/colors/vue.md
 create mode 100644 static/usage/toggle/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/toggle/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/toggle/theming/css-properties/demo.html
 create mode 100644 static/usage/toggle/theming/css-properties/index.md
 create mode 100644 static/usage/toggle/theming/css-properties/javascript.md
 create mode 100644 static/usage/toggle/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/toggle/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/toggle/theming/css-properties/vue.md
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/toggle/theming/css-shadow-parts/vue.md

diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index 29587289ed2..d2a99a5e156 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-toggle"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/toggle/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/toggle/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,183 +17,49 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the `checked` property.
-
-## Customization
-
-### Customizing Background
-
-The background of the toggle track and handle can be customized using CSS variables. There are also variables for setting the background differently when the toggle is checked.
-
-```css
-ion-toggle {
-  --background: #000;
-  --background-checked: #7a49a5;
-
-  --handle-background: #7a49a5;
-  --handle-background-checked: #000;
-}
-```
-
-Because these variables set the `background` property, which is a shorthand, it can accept any value that the [background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background) accepts.
 
-A more complex case may involve adding an image to the handle background.
+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.
 
-```css
-ion-toggle {
-  --handle-background-checked: #fff url(/assets/power-icon.png) no-repeat center / contain;
-}
-```
+## Basic Usage
 
-Taking it a step further, we could use the `::before` or `::after` pseudo-elements to position text on top of the background.
+import Basic from '@site/static/usage/toggle/basic/index.md';
 
-```css
-ion-toggle::before {
-  position: absolute;
+<Basic />
 
-  top: 16px;
-  left: 10px;
 
-  content: "ON";
+## On / Off Labels
 
-  color: white;
-  font-size: 8px;
+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.
 
-  z-index: 1;
-}
-```
+import OnOff from '@site/static/usage/toggle/on-off/index.md';
 
+<OnOff />
 
-### Customizing Width
 
-Adjusting the width of the toggle **smaller** will result in a narrower track, with the handle remaining the default width. If desired, set `--handle-width` to make the handle narrower.
+## Theming
 
-```css
-ion-toggle {
-  width: 40px;
-}
-```
+### Colors
 
-Adjusting the width of the toggle **larger** will result in a wider track, with the handle remaining the default width. If desired, set `--handle-width` to make the handle wider.
+import Colors from '@site/static/usage/toggle/theming/colors/index.md';
 
-```css
-ion-toggle {
-  width: 100px;
-}
-```
-
-### Customizing Height
+<Colors />
 
-Adjusting the height of the toggle **smaller** than the default will result in the handle height auto-sizing itself to the track. In `ios` the handle is shorter than the track (`100% - 4px`) and in `md` the handle is taller than the track (`100% + 6px`).
+### CSS Custom Properties
 
-```css
-ion-toggle {
-  height: 15px;
-}
-```
+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.
 
-:::note
- Note: this does not affect the handle width, width should be set using `--handle-width`.
-:::
+import CSSProps from '@site/static/usage/toggle/theming/css-properties/index.md';
 
+<CSSProps />
 
-Adjusting the height of the toggle **larger** will keep the handle in the center at the default height. This can be modified by setting `--handle-height` which can be set to any amount but will not exceed the `--handle-max-height`.
+### CSS Shadow Parts
 
-```css
-ion-toggle {
-  height: 60px;
-}
-```
+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.
 
-:::note
- Note: this does not affect the handle width, width should be set using `--handle-width`.
-:::
+import CSSParts from '@site/static/usage/toggle/theming/css-shadow-parts/index.md';
 
+<CSSParts />
 
-### Customizing Spacing
-
-The spacing refers to the horizontal gap between the handle and the track. By default, the handle has `2px` of spacing around it in `ios` **only**. In `md` mode there is no default spacing.
-
-To remove the **horizontal** spacing, set `--handle-spacing` to `0px`.
-
-```css
-ion-toggle {
-  --handle-spacing: 0px;
-}
-```
-
-Due to the handle having a fixed height, to remove the spacing on the top and bottom, set the height to 100%.
-
-```css
-ion-toggle {
-  --handle-spacing: 0px;
-  --handle-height: 100%;
-}
-```
-
-
-### Customizing Border Radius
-
-The `--handle-border-radius` can be used to change the `border-radius` on the handle.
-
-```css
-ion-toggle {
-  --handle-border-radius: 14px 4px 4px 14px;
-}
-```
-
-To target the `border-radius` only when the toggle is checked, target `.toggle-checked`:
-
-```css
-ion-toggle.toggle-checked {
-  --handle-border-radius: 4px 14px 14px 4px;
-}
-```
-
-
-### Customizing Box Shadow
-
-The `--handle-box-shadow` can be used to change the `box-shadow` on the handle.
-
-```css
-ion-toggle {
-  --handle-box-shadow: 4px 0 2px 0 red;
-}
-```
-
-To target the box shadow only when the toggle is checked, target `.toggle-checked`:
-
-```css
-ion-toggle.toggle-checked {
-  --handle-box-shadow: -4px 0 2px 0 red;
-}
-```
-
-See the section on [customizing overflow](#customizing-overflow) to allow the `box-shadow` to overflow the toggle container.
-
-
-### Customizing Overflow
-
-Setting `overflow` on the toggle will be inherited by the toggle handle. By default, overflow is set to `hidden` in `ios` only. The `box-shadow` will still appear cut off due to the `contain` css property. Set `contain` to `none` in order to overflow the toggle container.
-
-```css
-ion-toggle {
-  --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);
-
-  overflow: visible;
-
-  contain: none;
-}
-```
 
 ## Interfaces
 
@@ -225,294 +84,6 @@ interface ToggleCustomEvent<T = any> extends CustomEvent {
 ```
 
 
-
-
-## 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 Toggle -->
-<ion-toggle></ion-toggle>
-
-<!-- Disabled Toggle -->
-<ion-toggle disabled></ion-toggle>
-
-<!-- Checked Toggle -->
-<ion-toggle checked></ion-toggle>
-
-<!-- Toggle Colors -->
-<ion-toggle color="primary"></ion-toggle>
-<ion-toggle color="secondary"></ion-toggle>
-<ion-toggle color="danger"></ion-toggle>
-<ion-toggle color="light"></ion-toggle>
-<ion-toggle color="dark"></ion-toggle>
-
-<!-- Toggles in a List -->
-<ion-list>
-  <ion-item>
-    <ion-label>Pepperoni</ion-label>
-    <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Sausage</ion-label>
-    <ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Mushrooms</ion-label>
-    <ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Toggle -->
-<ion-toggle></ion-toggle>
-
-<!-- Disabled Toggle -->
-<ion-toggle disabled></ion-toggle>
-
-<!-- Checked Toggle -->
-<ion-toggle checked></ion-toggle>
-
-<!-- Toggle Colors -->
-<ion-toggle color="primary"></ion-toggle>
-<ion-toggle color="secondary"></ion-toggle>
-<ion-toggle color="danger"></ion-toggle>
-<ion-toggle color="light"></ion-toggle>
-<ion-toggle color="dark"></ion-toggle>
-
-<!-- Toggles in a List -->
-<ion-list>
-  <ion-item>
-    <ion-label>Pepperoni</ion-label>
-    <ion-toggle slot="end" value="pepperoni" checked></ion-toggle>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Sausage</ion-label>
-    <ion-toggle slot="end" value="sausage" disabled></ion-toggle>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Mushrooms</ion-label>
-    <ion-toggle slot="end" value="mushrooms"></ion-toggle>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
-
-export const ToggleExamples: React.FC = () => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>ToggleExamples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-
-          <IonItemDivider>Default Toggle</IonItemDivider>
-          <IonItem>
-            <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
-            <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
-          </IonItem>
-
-          <IonItemDivider>Disabled Toggle</IonItemDivider>
-          <IonItem><IonToggle disabled /></IonItem>
-
-          <IonItemDivider>Checked Toggle</IonItemDivider>
-          <IonItem><IonToggle checked /></IonItem>
-
-          <IonItemDivider>Toggle Colors</IonItemDivider>
-          <IonItem><IonToggle color="primary" /></IonItem>
-          <IonItem><IonToggle color="secondary" /></IonItem>
-          <IonItem><IonToggle color="danger" /></IonItem>
-          <IonItem><IonToggle color="light" /></IonItem>
-          <IonItem><IonToggle color="dark" /></IonItem>
-
-          <IonItemDivider>Toggles in a List</IonItemDivider>
-          <IonItem>
-            <IonLabel>Pepperoni</IonLabel>
-            <IonToggle value="pepperoni" />
-          </IonItem>
-
-          <IonItem>
-            <IonLabel>Sausage</IonLabel>
-            <IonToggle value="sausage" disabled={true} />
-          </IonItem>
-
-          <IonItem>
-            <IonLabel>Mushrooms</IonLabel>
-            <IonToggle value="mushrooms" />
-          </IonItem>
-        </IonList>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, State, h } from '@stencil/core';
-
-@Component({
-  tag: 'toggle-example',
-  styleUrl: 'toggle-example.css'
-})
-export class ToggleExample {
-  @State() pepperoni: boolean = false;
-  @State() sausage: boolean = true;
-  @State() mushrooms: boolean = false;
-
-  render() {
-    return [
-      // Default Toggle
-      <ion-toggle></ion-toggle>,
-
-      // Disabled Toggle
-      <ion-toggle disabled></ion-toggle>,
-
-      // Checked Toggle
-      <ion-toggle checked></ion-toggle>,
-
-      // Toggle Colors
-      <ion-toggle color="primary"></ion-toggle>,
-      <ion-toggle color="secondary"></ion-toggle>,
-      <ion-toggle color="danger"></ion-toggle>,
-      <ion-toggle color="light"></ion-toggle>,
-      <ion-toggle color="dark"></ion-toggle>,
-
-      // Toggles in a List
-      <ion-list>
-        <ion-item>
-          <ion-label>Pepperoni</ion-label>
-          <ion-toggle checked={this.pepperoni} onIonChange={(ev) => this.pepperoni = ev.detail.checked}></ion-toggle>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Sausage</ion-label>
-          <ion-toggle checked={this.sausage} onIonChange={(ev) => this.sausage = ev.detail.checked} disabled={true}></ion-toggle>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Mushrooms</ion-label>
-          <ion-toggle checked={this.mushrooms} onIonChange={(ev) => this.mushrooms = ev.detail.checked}></ion-toggle>
-        </ion-item>
-      </ion-list>,
-
-      <div>
-        Pepperoni: {this.pepperoni ? "true" : "false"}<br/>
-        Sausage: {this.sausage ? "true" : "false"}<br/>
-        Mushrooms: {this.mushrooms ? "true" : "false"}
-      </div>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Toggle -->
-  <ion-toggle></ion-toggle>
-
-  <!-- Disabled Toggle -->
-  <ion-toggle disabled></ion-toggle>
-
-  <!-- Checked Toggle -->
-  <ion-toggle checked></ion-toggle>
-
-  <!-- Toggle Colors -->
-  <ion-toggle color="primary"></ion-toggle>
-  <ion-toggle color="secondary"></ion-toggle>
-  <ion-toggle color="danger"></ion-toggle>
-  <ion-toggle color="light"></ion-toggle>
-  <ion-toggle color="dark"></ion-toggle>
-
-  <!-- Toggles in a List -->
-  <ion-list>
-    <ion-item>
-      <ion-label>Pepperoni</ion-label>
-      <ion-toggle
-        @ionChange="toppings.value.push($event.target.value)"
-        value="pepperoni"
-        :checked="toppings.value.indexOf('pepperoni') !== -1">
-      </ion-toggle>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Sausage</ion-label>
-      <ion-toggle
-        @ionChange="toppings.value.push($event.target.value)"
-        value="sausage"
-        :checked="toppings.value.indexOf('pepperoni') !== -1"
-        disabled="true">
-      </ion-toggle>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Mushrooms</ion-label>
-      <ion-toggle
-        @ionChange="toppings.value.push($event.target.value)"
-        value="mushrooms"
-        :checked="toppings.value.indexOf('pepperoni') !== -1">
-      </ion-toggle>
-    </ion-item>
-  </ion-list>
-</template>
-
-<script>
-import { IonLabel, IonList, IonItem, IonToggle } from '@ionic/vue';
-import { defineComponent, vue } from 'vue';
-
-export default defineComponent({
-  components: { IonLabel, IonList, IonItem, IonToggle },
-  setup() {
-    const toppings = ref([]);
-    
-    return { toppings };
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
@@ -529,4 +100,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/toggle/basic/angular.md b/static/usage/toggle/basic/angular.md
new file mode 100644
index 00000000000..696e4e2ca61
--- /dev/null
+++ b/static/usage/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/toggle/basic/demo.html b/static/usage/toggle/basic/demo.html
new file mode 100644
index 00000000000..b870027f821
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toggle/basic/index.md b/static/usage/toggle/basic/index.md
new file mode 100644
index 00000000000..b3fc4d01dd5
--- /dev/null
+++ b/static/usage/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/toggle/basic/demo.html" size="250px" />
diff --git a/static/usage/toggle/basic/javascript.md b/static/usage/toggle/basic/javascript.md
new file mode 100644
index 00000000000..043c09333f0
--- /dev/null
+++ b/static/usage/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/toggle/basic/react.md b/static/usage/toggle/basic/react.md
new file mode 100644
index 00000000000..21721d14467
--- /dev/null
+++ b/static/usage/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/toggle/basic/vue.md b/static/usage/toggle/basic/vue.md
new file mode 100644
index 00000000000..938dee314ed
--- /dev/null
+++ b/static/usage/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/toggle/on-off/angular.md b/static/usage/toggle/on-off/angular.md
new file mode 100644
index 00000000000..d32c09c626f
--- /dev/null
+++ b/static/usage/toggle/on-off/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-toggle [enableOnOffLabels]="true"></ion-toggle>
+```
diff --git a/static/usage/toggle/on-off/demo.html b/static/usage/toggle/on-off/demo.html
new file mode 100644
index 00000000000..0005205956f
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toggle/on-off/index.md b/static/usage/toggle/on-off/index.md
new file mode 100644
index 00000000000..4386ccbb623
--- /dev/null
+++ b/static/usage/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/toggle/on-off/demo.html" />
diff --git a/static/usage/toggle/on-off/javascript.md b/static/usage/toggle/on-off/javascript.md
new file mode 100644
index 00000000000..5ae617f6e4a
--- /dev/null
+++ b/static/usage/toggle/on-off/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-toggle enable-on-off-labels="true"></ion-toggle>
+```
diff --git a/static/usage/toggle/on-off/react.md b/static/usage/toggle/on-off/react.md
new file mode 100644
index 00000000000..6d24a2c2704
--- /dev/null
+++ b/static/usage/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/toggle/on-off/vue.md b/static/usage/toggle/on-off/vue.md
new file mode 100644
index 00000000000..a6958f0e1a5
--- /dev/null
+++ b/static/usage/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/toggle/theming/colors/angular.md b/static/usage/toggle/theming/colors/angular.md
new file mode 100644
index 00000000000..b8cb7076de3
--- /dev/null
+++ b/static/usage/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/toggle/theming/colors/demo.html b/static/usage/toggle/theming/colors/demo.html
new file mode 100644
index 00000000000..dfc8c72d189
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toggle/theming/colors/index.md b/static/usage/toggle/theming/colors/index.md
new file mode 100644
index 00000000000..fb91cc37969
--- /dev/null
+++ b/static/usage/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/toggle/theming/colors/demo.html" />
diff --git a/static/usage/toggle/theming/colors/javascript.md b/static/usage/toggle/theming/colors/javascript.md
new file mode 100644
index 00000000000..26990bd1a4f
--- /dev/null
+++ b/static/usage/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/toggle/theming/colors/react.md b/static/usage/toggle/theming/colors/react.md
new file mode 100644
index 00000000000..6ba932092c4
--- /dev/null
+++ b/static/usage/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/toggle/theming/colors/vue.md b/static/usage/toggle/theming/colors/vue.md
new file mode 100644
index 00000000000..4b906d9da5d
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/toggle/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a5ac3b87533
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/toggle/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b66cfc51480
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-properties/demo.html b/static/usage/toggle/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9f90a6e632c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toggle/theming/css-properties/index.md b/static/usage/toggle/theming/css-properties/index.md
new file mode 100644
index 00000000000..14b57ba11e6
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/toggle/theming/css-properties/javascript.md b/static/usage/toggle/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..ed02575807b
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-properties/react/main_css.md b/static/usage/toggle/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a5ac3b87533
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-properties/react/main_tsx.md b/static/usage/toggle/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6548f53b021
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-properties/vue.md b/static/usage/toggle/theming/css-properties/vue.md
new file mode 100644
index 00000000000..f66c8236836
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/toggle/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..e34322115b6
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/toggle/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..b66cfc51480
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-shadow-parts/demo.html b/static/usage/toggle/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..ec0f64a6712
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/toggle/theming/css-shadow-parts/index.md b/static/usage/toggle/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..e11e07766bb
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/toggle/theming/css-shadow-parts/javascript.md b/static/usage/toggle/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..bda83da747a
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-shadow-parts/react/main_css.md b/static/usage/toggle/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..e34322115b6
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-shadow-parts/react/main_tsx.md b/static/usage/toggle/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..6548f53b021
--- /dev/null
+++ b/static/usage/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/toggle/theming/css-shadow-parts/vue.md b/static/usage/toggle/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..dbf40a9ed62
--- /dev/null
+++ b/static/usage/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>
+```

From 1256a310e34ad33f262703b1ede3fb2b2eaf29e4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 30 Sep 2022 18:33:28 +0000
Subject: [PATCH 087/469] chore(): resolve merge conflict

---
 docs/reference/support.md | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index 7f7d28e71a4..ac6dde9aa11 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -43,18 +43,11 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-<<<<<<< HEAD
-| v7        | v13                     | v14.x                   | 4.4+       |   
+| v7        | v13                     | v14.x^                   | 4.4+       |   
 | v6        | v12                     | v14.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      |
-=======
-|    v6     |           v12           |         v14.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    |
->>>>>>> origin/main
 
 > ^ Angular 14.x support was added in Ionic v6.1.9.
 

From bd132c5e894e9895d28bf60a9fa7b7041d1c7dc5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 3 Oct 2022 09:34:49 -0500
Subject: [PATCH 088/469] chore(support): move v4 to end of support (#2595)

---
 docs/reference/support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index d668cd5e957..f1eae9f7250 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -24,7 +24,7 @@ The current status of each Ionic Framework version is:
 | :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
 |   V6    |      **Active**       | Dec 8, 2021  |       TBD        |        TBD        |
 |   V5    | Extended Support Only | Feb 11, 2020 |   June 8, 2022   |    Dec 8, 2022    |
-|   V4    | Extended Support Only | Jan 23, 2019 |   Aug 11, 2020   |   Sept 30, 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    |

From 7a863956b733740fb24f4e7850ad1e3bc26a0a18 Mon Sep 17 00:00:00 2001
From: Ryan Waskiewicz <ryanwaskiewicz@gmail.com>
Date: Mon, 3 Oct 2022 11:01:55 -0400
Subject: [PATCH 089/469] docs(shadow-parts): remove errant '>' char (#2590)

this commit removes a '>' that doesn't appear to be used/needed
following an internal link
---
 docs/theming/css-shadow-parts.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.md
index 8700c97b8a9..5d5be9f5099 100644
--- a/docs/theming/css-shadow-parts.md
+++ b/docs/theming/css-shadow-parts.md
@@ -107,7 +107,7 @@ All exposed parts for an Ionic Framework component can be found under the CSS Sh
 
 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 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.
 

From 5eb3f12c49de1b6d6b69132f9dac7e734cade396 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 6 Oct 2022 11:17:09 -0400
Subject: [PATCH 090/469] docs(radio): add component playgrounds (#2586)

---
 docs/api/radio-group.md                       | 283 +-----------------
 docs/api/radio.md                             | 238 ++-------------
 static/usage/radio/basic/angular.md           |  25 ++
 static/usage/radio/basic/demo.html            |  52 ++++
 static/usage/radio/basic/index.md             |   8 +
 static/usage/radio/basic/javascript.md        |  25 ++
 static/usage/radio/basic/react.md             |  33 ++
 static/usage/radio/basic/vue.md               |  36 +++
 static/usage/radio/empty-selection/angular.md |  25 ++
 static/usage/radio/empty-selection/demo.html  |  52 ++++
 static/usage/radio/empty-selection/index.md   |   8 +
 .../usage/radio/empty-selection/javascript.md |  25 ++
 static/usage/radio/empty-selection/react.md   |  33 ++
 static/usage/radio/empty-selection/vue.md     |  36 +++
 static/usage/radio/theming/colors/angular.md  |  29 ++
 static/usage/radio/theming/colors/demo.html   |  54 ++++
 static/usage/radio/theming/colors/index.md    |   8 +
 .../usage/radio/theming/colors/javascript.md  |  29 ++
 static/usage/radio/theming/colors/react.md    |  39 +++
 static/usage/radio/theming/colors/vue.md      |  40 +++
 .../angular/example_component_css.md          |  21 ++
 .../angular/example_component_html.md         |   6 +
 .../radio/theming/css-properties/demo.html    |  49 +++
 .../radio/theming/css-properties/index.md     |  32 ++
 .../theming/css-properties/javascript.md      |  28 ++
 .../theming/css-properties/react/main_css.md  |  21 ++
 .../theming/css-properties/react/main_tsx.md  |  16 +
 .../usage/radio/theming/css-properties/vue.md |  39 +++
 .../angular/example_component_css.md          |  34 +++
 .../angular/example_component_html.md         |   6 +
 .../radio/theming/css-shadow-parts/demo.html  |  62 ++++
 .../radio/theming/css-shadow-parts/index.md   |  32 ++
 .../theming/css-shadow-parts/javascript.md    |  41 +++
 .../css-shadow-parts/react/main_css.md        |  34 +++
 .../css-shadow-parts/react/main_tsx.md        |  16 +
 .../radio/theming/css-shadow-parts/vue.md     |  52 ++++
 36 files changed, 1068 insertions(+), 499 deletions(-)
 create mode 100644 static/usage/radio/basic/angular.md
 create mode 100644 static/usage/radio/basic/demo.html
 create mode 100644 static/usage/radio/basic/index.md
 create mode 100644 static/usage/radio/basic/javascript.md
 create mode 100644 static/usage/radio/basic/react.md
 create mode 100644 static/usage/radio/basic/vue.md
 create mode 100644 static/usage/radio/empty-selection/angular.md
 create mode 100644 static/usage/radio/empty-selection/demo.html
 create mode 100644 static/usage/radio/empty-selection/index.md
 create mode 100644 static/usage/radio/empty-selection/javascript.md
 create mode 100644 static/usage/radio/empty-selection/react.md
 create mode 100644 static/usage/radio/empty-selection/vue.md
 create mode 100644 static/usage/radio/theming/colors/angular.md
 create mode 100644 static/usage/radio/theming/colors/demo.html
 create mode 100644 static/usage/radio/theming/colors/index.md
 create mode 100644 static/usage/radio/theming/colors/javascript.md
 create mode 100644 static/usage/radio/theming/colors/react.md
 create mode 100644 static/usage/radio/theming/colors/vue.md
 create mode 100644 static/usage/radio/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/radio/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/radio/theming/css-properties/demo.html
 create mode 100644 static/usage/radio/theming/css-properties/index.md
 create mode 100644 static/usage/radio/theming/css-properties/javascript.md
 create mode 100644 static/usage/radio/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/radio/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/radio/theming/css-properties/vue.md
 create mode 100644 static/usage/radio/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/radio/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/radio/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/radio/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/radio/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/radio/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/radio/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/radio/theming/css-shadow-parts/vue.md

diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index 6f7d717ca35..b083ee208b2 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-radio-group"
-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/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';
@@ -20,19 +15,9 @@ import Slots from '@site/static/auto-generated/radio-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
 
+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.
 
-A radio group is a group of [radio buttons](radio.md). 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.
 
 ## Interfaces
 
@@ -56,270 +41,6 @@ interface RadioGroupCustomEvent<T = any> extends CustomEvent {
 ```
 
 
-
-## 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-list>
-  <ion-radio-group>
-    <ion-list-header>
-      <ion-label>
-        Auto Manufacturers
-      </ion-label>
-    </ion-list-header>
-
-    <ion-item>
-      <ion-label>Cord</ion-label>
-      <ion-radio value="cord"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Duesenberg</ion-label>
-      <ion-radio value="duesenberg"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Hudson</ion-label>
-      <ion-radio value="hudson"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Packard</ion-label>
-      <ion-radio value="packard"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Studebaker</ion-label>
-      <ion-radio value="studebaker"></ion-radio>
-    </ion-item>
-  </ion-radio-group>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-list>
-  <ion-radio-group>
-    <ion-list-header>
-      <ion-label>
-        Auto Manufacturers
-      </ion-label>
-    </ion-list-header>
-
-    <ion-item>
-      <ion-label>Cord</ion-label>
-      <ion-radio value="cord"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Duesenberg</ion-label>
-      <ion-radio value="duesenberg"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Hudson</ion-label>
-      <ion-radio value="hudson"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Packard</ion-label>
-      <ion-radio value="packard"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Studebaker</ion-label>
-      <ion-radio value="studebaker"></ion-radio>
-    </ion-item>
-  </ion-radio-group>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';
-
-export const RadioGroupExample: React.FC = () => (
-  <IonContent>
-    <IonList>
-      <IonRadioGroup>
-        <IonListHeader>
-          <IonLabel>
-            Auto Manufacturers
-          </IonLabel>
-        </IonListHeader>
-
-        <IonItem>
-          <IonLabel>Cord</IonLabel>
-          <IonRadio value="cord" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Duesenberg</IonLabel>
-          <IonRadio value="duesenberg" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Hudson</IonLabel>
-          <IonRadio value="hudson" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Packard</IonLabel>
-          <IonRadio value="packard" />
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Studebaker</IonLabel>
-          <IonRadio value="studebaker" />
-        </IonItem>
-      </IonRadioGroup>
-    </IonList>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'radio-group-example',
-  styleUrl: 'radio-group-example.css'
-})
-export class RadioGroupExample {
-  render() {
-    return [
-      <ion-list>
-        <ion-radio-group>
-          <ion-list-header>
-            <ion-label>
-              Auto Manufacturers
-            </ion-label>
-          </ion-list-header>
-
-          <ion-item>
-            <ion-label>Cord</ion-label>
-            <ion-radio value="cord"></ion-radio>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Duesenberg</ion-label>
-            <ion-radio value="duesenberg"></ion-radio>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Hudson</ion-label>
-            <ion-radio value="hudson"></ion-radio>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Packard</ion-label>
-            <ion-radio value="packard"></ion-radio>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Studebaker</ion-label>
-            <ion-radio value="studebaker"></ion-radio>
-          </ion-item>
-        </ion-radio-group>
-      </ion-list>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-list>
-    <ion-radio-group>
-      <ion-list-header>
-        <ion-label>
-          Auto Manufacturers
-        </ion-label>
-      </ion-list-header>
-
-      <ion-item>
-        <ion-label>Cord</ion-label>
-        <ion-radio value="cord"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>Duesenberg</ion-label>
-        <ion-radio value="duesenberg"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>Hudson</ion-label>
-        <ion-radio value="hudson"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>Packard</ion-label>
-        <ion-radio value="packard"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>Studebaker</ion-label>
-        <ion-radio value="studebaker"></ion-radio>
-      </ion-item>
-    </ion-radio-group>
-  </ion-list>
-</template>
-
-<script>
-import { 
-  IonItem, 
-  IonLabel, 
-  IonList, 
-  IonListHeader, 
-  IonRadio, 
-  IonRadioGroup
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonItem, 
-    IonLabel, 
-    IonList, 
-    IonListHeader, 
-    IonRadio, 
-    IonRadioGroup
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
@@ -336,4 +57,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/radio.md b/docs/api/radio.md
index ab96264fff1..8a190f15f06 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-radio"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/radio/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/radio/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,238 +17,47 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Radios should be used inside of an [`ion-radio-group`](radio-group.md). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.
-
-When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.
-
-
-
-
-
 
-## Usage
+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.
 
-<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' }]}>
+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.
 
-<TabItem value="angular">
+## Basic Usage
 
-```html
-<ion-list>
-  <ion-radio-group value="biff">
-    <ion-list-header>
-      <ion-label>Name</ion-label>
-    </ion-list-header>
+import Basic from '@site/static/usage/radio/basic/index.md';
 
-    <ion-item>
-      <ion-label>Biff</ion-label>
-      <ion-radio slot="start" value="biff"></ion-radio>
-    </ion-item>
+<Basic />
 
-    <ion-item>
-      <ion-label>Griff</ion-label>
-      <ion-radio slot="start" value="griff"></ion-radio>
-    </ion-item>
 
-    <ion-item>
-      <ion-label>Buford</ion-label>
-      <ion-radio slot="start" value="buford"></ion-radio>
-    </ion-item>
-  </ion-radio-group>
-</ion-list>
-```
+## 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.
 
-</TabItem>
+import EmptySelection from '@site/static/usage/radio/empty-selection/index.md';
 
+<EmptySelection />
 
-<TabItem value="javascript">
 
-```html
-<ion-list>
-  <ion-radio-group value="biff">
-    <ion-list-header>
-      <ion-label>Name</ion-label>
-    </ion-list-header>
+## Theming
 
-    <ion-item>
-      <ion-label>Biff</ion-label>
-      <ion-radio slot="start" value="biff"></ion-radio>
-    </ion-item>
+### Colors
 
-    <ion-item>
-      <ion-label>Griff</ion-label>
-      <ion-radio slot="start" value="griff"></ion-radio>
-    </ion-item>
+import Colors from '@site/static/usage/radio/theming/colors/index.md';
 
-    <ion-item>
-      <ion-label>Buford</ion-label>
-      <ion-radio slot="start" value="buford"></ion-radio>
-    </ion-item>
-  </ion-radio-group>
-</ion-list>
-```
+<Colors />
 
+### CSS Custom Properties
 
-</TabItem>
+import CSSProps from '@site/static/usage/radio/theming/css-properties/index.md';
 
+<CSSProps />
 
-<TabItem value="react">
+### CSS Shadow Parts
 
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react';
+import CSSParts from '@site/static/usage/radio/theming/css-shadow-parts/index.md';
 
-export const RadioExamples: React.FC = () => {
-  const [selected, setSelected] = useState<string>('biff');
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Radio Examples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonRadioGroup value={selected} onIonChange={e => setSelected(e.detail.value)}>
-            <IonListHeader>
-              <IonLabel>Name</IonLabel>
-            </IonListHeader>
+<CSSParts />
 
-            <IonItem>
-              <IonLabel>Biff</IonLabel>
-              <IonRadio slot="start" value="biff" />
-            </IonItem>
-
-            <IonItem>
-              <IonLabel>Griff</IonLabel>
-              <IonRadio slot="start" value="griff" />
-            </IonItem>
-
-            <IonItem>
-              <IonLabel>Buford</IonLabel>
-              <IonRadio slot="start" value="buford" />
-            </IonItem>
-          </IonRadioGroup>
-          <IonItemDivider>Your Selection</IonItemDivider>
-          <IonItem>{selected ?? '(none selected'}</IonItem>
-        </IonList>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'radio-example',
-  styleUrl: 'radio-example.css'
-})
-export class RadioExample {
-  render() {
-    return [
-      <ion-list>
-        <ion-radio-group value="biff">
-          <ion-list-header>
-            <ion-label>Name</ion-label>
-          </ion-list-header>
-
-          <ion-item>
-            <ion-label>Biff</ion-label>
-            <ion-radio slot="start" value="biff"></ion-radio>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Griff</ion-label>
-            <ion-radio slot="start" value="griff"></ion-radio>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Buford</ion-label>
-            <ion-radio slot="start" value="buford"></ion-radio>
-          </ion-item>
-        </ion-radio-group>
-      </ion-list>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-list>
-    <ion-radio-group value="biff">
-      <ion-list-header>
-        <ion-label>Name</ion-label>
-      </ion-list-header>
-
-      <ion-item>
-        <ion-label>Biff</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>Griff</ion-label>
-        <ion-radio slot="start" value="griff"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>Buford</ion-label>
-        <ion-radio slot="start" value="buford"></ion-radio>
-      </ion-item>
-    </ion-radio-group>
-  </ion-list>
-</template>
-
-<script>
-import { 
-  IonItem, 
-  IonLabel, 
-  IonList, 
-  IonListHeader,
-  IonRadio, 
-  IonRadioGroup
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { 
-    IonItem, 
-    IonLabel, 
-    IonList, 
-    IonListHeader,
-    IonRadio, 
-    IonRadioGroup
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -273,4 +75,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/radio/basic/angular.md b/static/usage/radio/basic/angular.md
new file mode 100644
index 00000000000..6e14ab487f5
--- /dev/null
+++ b/static/usage/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/radio/basic/demo.html b/static/usage/radio/basic/demo.html
new file mode 100644
index 00000000000..5ee38184b14
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/radio/basic/index.md b/static/usage/radio/basic/index.md
new file mode 100644
index 00000000000..ef2267cb13c
--- /dev/null
+++ b/static/usage/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/radio/basic/demo.html" size="250px" />
diff --git a/static/usage/radio/basic/javascript.md b/static/usage/radio/basic/javascript.md
new file mode 100644
index 00000000000..23b545a77ba
--- /dev/null
+++ b/static/usage/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/radio/basic/react.md b/static/usage/radio/basic/react.md
new file mode 100644
index 00000000000..55c404e1d22
--- /dev/null
+++ b/static/usage/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/radio/basic/vue.md b/static/usage/radio/basic/vue.md
new file mode 100644
index 00000000000..b0e7187361c
--- /dev/null
+++ b/static/usage/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/radio/empty-selection/angular.md b/static/usage/radio/empty-selection/angular.md
new file mode 100644
index 00000000000..3709479a101
--- /dev/null
+++ b/static/usage/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/radio/empty-selection/demo.html b/static/usage/radio/empty-selection/demo.html
new file mode 100644
index 00000000000..4d45aa43194
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/radio/empty-selection/index.md b/static/usage/radio/empty-selection/index.md
new file mode 100644
index 00000000000..701953fe82d
--- /dev/null
+++ b/static/usage/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/radio/empty-selection/demo.html" size="250px" />
diff --git a/static/usage/radio/empty-selection/javascript.md b/static/usage/radio/empty-selection/javascript.md
new file mode 100644
index 00000000000..85c59f7fa91
--- /dev/null
+++ b/static/usage/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/radio/empty-selection/react.md b/static/usage/radio/empty-selection/react.md
new file mode 100644
index 00000000000..e9b05a45be1
--- /dev/null
+++ b/static/usage/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/radio/empty-selection/vue.md b/static/usage/radio/empty-selection/vue.md
new file mode 100644
index 00000000000..7a0bd6e7140
--- /dev/null
+++ b/static/usage/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/radio/theming/colors/angular.md b/static/usage/radio/theming/colors/angular.md
new file mode 100644
index 00000000000..ace9bab6018
--- /dev/null
+++ b/static/usage/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/radio/theming/colors/demo.html b/static/usage/radio/theming/colors/demo.html
new file mode 100644
index 00000000000..f8b20cd2467
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/radio/theming/colors/index.md b/static/usage/radio/theming/colors/index.md
new file mode 100644
index 00000000000..4874a9d5aff
--- /dev/null
+++ b/static/usage/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/radio/theming/colors/demo.html" size="100px" />
diff --git a/static/usage/radio/theming/colors/javascript.md b/static/usage/radio/theming/colors/javascript.md
new file mode 100644
index 00000000000..ace9bab6018
--- /dev/null
+++ b/static/usage/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/radio/theming/colors/react.md b/static/usage/radio/theming/colors/react.md
new file mode 100644
index 00000000000..8a96c775064
--- /dev/null
+++ b/static/usage/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/radio/theming/colors/vue.md b/static/usage/radio/theming/colors/vue.md
new file mode 100644
index 00000000000..084d8f27a21
--- /dev/null
+++ b/static/usage/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/radio/theming/css-properties/angular/example_component_css.md b/static/usage/radio/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9e36e69c77d
--- /dev/null
+++ b/static/usage/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/radio/theming/css-properties/angular/example_component_html.md b/static/usage/radio/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..3944db27fae
--- /dev/null
+++ b/static/usage/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/radio/theming/css-properties/demo.html b/static/usage/radio/theming/css-properties/demo.html
new file mode 100644
index 00000000000..20a4e530024
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/radio/theming/css-properties/index.md b/static/usage/radio/theming/css-properties/index.md
new file mode 100644
index 00000000000..49ec34d099e
--- /dev/null
+++ b/static/usage/radio/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/radio/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/radio/theming/css-properties/javascript.md b/static/usage/radio/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..3900a4a863e
--- /dev/null
+++ b/static/usage/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/radio/theming/css-properties/react/main_css.md b/static/usage/radio/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9e36e69c77d
--- /dev/null
+++ b/static/usage/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/radio/theming/css-properties/react/main_tsx.md b/static/usage/radio/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..188ac677707
--- /dev/null
+++ b/static/usage/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/radio/theming/css-properties/vue.md b/static/usage/radio/theming/css-properties/vue.md
new file mode 100644
index 00000000000..557c0547e49
--- /dev/null
+++ b/static/usage/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/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/radio/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..85c8747d6e5
--- /dev/null
+++ b/static/usage/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/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/radio/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..3944db27fae
--- /dev/null
+++ b/static/usage/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/radio/theming/css-shadow-parts/demo.html b/static/usage/radio/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..452dfd6ef10
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/radio/theming/css-shadow-parts/index.md b/static/usage/radio/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..aef4b86ca2e
--- /dev/null
+++ b/static/usage/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 reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/radio/theming/css-shadow-parts/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/radio/theming/css-shadow-parts/javascript.md b/static/usage/radio/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..728d1ad34ea
--- /dev/null
+++ b/static/usage/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/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/radio/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..85c8747d6e5
--- /dev/null
+++ b/static/usage/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/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/radio/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..188ac677707
--- /dev/null
+++ b/static/usage/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/radio/theming/css-shadow-parts/vue.md b/static/usage/radio/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..e8078202f6c
--- /dev/null
+++ b/static/usage/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>
+```

From 58e6cdf23b90f3deafaea275b81e289e5fe4c69e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Oct 2022 08:05:34 -0500
Subject: [PATCH 091/469] docs(hardware-back-button): mention capacitor app
 package (#2601)

---
 docs/developing/hardware-back-button.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index a887f2eea46..ff50b2f7f1b 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -21,6 +21,10 @@ The hardware back button refers to the physical back button on an Android device
 
 ## 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.

From c123f71220ef008a89e972eed0db4cb02619d83b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 11 Oct 2022 09:12:56 -0500
Subject: [PATCH 092/469] docs(app): note features of ion-app (#2600)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 docs/api/app.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/api/app.md b/docs/api/app.md
index 58de67e6c39..80ae9a25b72 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -31,6 +31,14 @@ 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
@@ -49,4 +57,4 @@ App is a container element for an Ionic application. There should only be one `<
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 515a1507735b1a85b48165d08287fb1a4894263b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 11 Oct 2022 10:18:10 -0400
Subject: [PATCH 093/469] docs(card): add component playgrounds (#2584)

---
 docs/api/card.md                              | 387 +++---------------
 .../basic/angular/example_component_css.md    |   7 +
 .../basic/angular/example_component_html.md   |  12 +
 static/usage/card/basic/demo.html             |  46 +++
 static/usage/card/basic/index.md              |  31 ++
 static/usage/card/basic/javascript.md         |  20 +
 static/usage/card/basic/react/main_css.md     |   7 +
 static/usage/card/basic/react/main_tsx.md     |  22 +
 static/usage/card/basic/vue.md                |  31 ++
 .../buttons/angular/example_component_css.md  |   7 +
 .../buttons/angular/example_component_html.md |  15 +
 static/usage/card/buttons/demo.html           |  49 +++
 static/usage/card/buttons/index.md            |  32 ++
 static/usage/card/buttons/javascript.md       |  23 ++
 static/usage/card/buttons/react/main_css.md   |   7 +
 static/usage/card/buttons/react/main_tsx.md   |  25 ++
 static/usage/card/buttons/vue.md              |  34 ++
 .../list/angular/example_component_css.md     |  11 +
 .../list/angular/example_component_html.md    |  39 ++
 static/usage/card/list/demo.html              |  81 ++++
 static/usage/card/list/index.md               |  32 ++
 static/usage/card/list/javascript.md          |  51 +++
 static/usage/card/list/react/main_css.md      |  11 +
 static/usage/card/list/react/main_tsx.md      |  49 +++
 static/usage/card/list/vue.md                 |  62 +++
 .../media/angular/example_component_css.md    |   7 +
 .../media/angular/example_component_html.md   |  13 +
 static/usage/card/media/demo.html             |  47 +++
 static/usage/card/media/index.md              |  32 ++
 static/usage/card/media/javascript.md         |  21 +
 static/usage/card/media/react/main_css.md     |   7 +
 static/usage/card/media/react/main_tsx.md     |  23 ++
 static/usage/card/media/vue.md                |  32 ++
 .../colors/angular/example_component_css.md   |   7 +
 .../colors/angular/example_component_html.md  | 100 +++++
 static/usage/card/theming/colors/demo.html    | 137 +++++++
 static/usage/card/theming/colors/index.md     |  32 ++
 .../usage/card/theming/colors/javascript.md   | 108 +++++
 .../card/theming/colors/react/main_css.md     |   7 +
 .../card/theming/colors/react/main_tsx.md     | 112 +++++
 static/usage/card/theming/colors/vue.md       | 119 ++++++
 .../angular/example_component_css.md          |  20 +
 .../angular/example_component_html.md         |  12 +
 .../card/theming/css-properties/demo.html     |  59 +++
 .../card/theming/css-properties/index.md      |  31 ++
 .../card/theming/css-properties/javascript.md |  33 ++
 .../theming/css-properties/react/main_css.md  |  20 +
 .../theming/css-properties/react/main_tsx.md  |  22 +
 .../usage/card/theming/css-properties/vue.md  |  44 ++
 49 files changed, 1796 insertions(+), 340 deletions(-)
 create mode 100644 static/usage/card/basic/angular/example_component_css.md
 create mode 100644 static/usage/card/basic/angular/example_component_html.md
 create mode 100644 static/usage/card/basic/demo.html
 create mode 100644 static/usage/card/basic/index.md
 create mode 100644 static/usage/card/basic/javascript.md
 create mode 100644 static/usage/card/basic/react/main_css.md
 create mode 100644 static/usage/card/basic/react/main_tsx.md
 create mode 100644 static/usage/card/basic/vue.md
 create mode 100644 static/usage/card/buttons/angular/example_component_css.md
 create mode 100644 static/usage/card/buttons/angular/example_component_html.md
 create mode 100644 static/usage/card/buttons/demo.html
 create mode 100644 static/usage/card/buttons/index.md
 create mode 100644 static/usage/card/buttons/javascript.md
 create mode 100644 static/usage/card/buttons/react/main_css.md
 create mode 100644 static/usage/card/buttons/react/main_tsx.md
 create mode 100644 static/usage/card/buttons/vue.md
 create mode 100644 static/usage/card/list/angular/example_component_css.md
 create mode 100644 static/usage/card/list/angular/example_component_html.md
 create mode 100644 static/usage/card/list/demo.html
 create mode 100644 static/usage/card/list/index.md
 create mode 100644 static/usage/card/list/javascript.md
 create mode 100644 static/usage/card/list/react/main_css.md
 create mode 100644 static/usage/card/list/react/main_tsx.md
 create mode 100644 static/usage/card/list/vue.md
 create mode 100644 static/usage/card/media/angular/example_component_css.md
 create mode 100644 static/usage/card/media/angular/example_component_html.md
 create mode 100644 static/usage/card/media/demo.html
 create mode 100644 static/usage/card/media/index.md
 create mode 100644 static/usage/card/media/javascript.md
 create mode 100644 static/usage/card/media/react/main_css.md
 create mode 100644 static/usage/card/media/react/main_tsx.md
 create mode 100644 static/usage/card/media/vue.md
 create mode 100644 static/usage/card/theming/colors/angular/example_component_css.md
 create mode 100644 static/usage/card/theming/colors/angular/example_component_html.md
 create mode 100644 static/usage/card/theming/colors/demo.html
 create mode 100644 static/usage/card/theming/colors/index.md
 create mode 100644 static/usage/card/theming/colors/javascript.md
 create mode 100644 static/usage/card/theming/colors/react/main_css.md
 create mode 100644 static/usage/card/theming/colors/react/main_tsx.md
 create mode 100644 static/usage/card/theming/colors/vue.md
 create mode 100644 static/usage/card/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/card/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/card/theming/css-properties/demo.html
 create mode 100644 static/usage/card/theming/css-properties/index.md
 create mode 100644 static/usage/card/theming/css-properties/javascript.md
 create mode 100644 static/usage/card/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/card/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/card/theming/css-properties/vue.md

diff --git a/docs/api/card.md b/docs/api/card.md
index d6a7e93a506..8177de036e8 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-card"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/card/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/card/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,342 +17,56 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
 
+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/card/basic/index.md';
+
+<Basic />
+
+
+## Media Cards
+
+import Media from '@site/static/usage/card/media/index.md';
+
+<Media />
+
+
+## Card Buttons
+
+import Buttons from '@site/static/usage/card/buttons/index.md';
+
+<Buttons />
+
+
+## List Card
+
+import List from '@site/static/usage/card/list/index.md';
+
+<List />
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/card/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
 
-Cards are a standard piece of UI that serves as an entry point to more detailed
-information. A card can be a single component, but is often made up of some
-header, title, subtitle, and content. `ion-card` is broken up into several
-sub-components to reflect this. Please see `ion-card-content`,
-`ion-card-header`, `ion-card-title`, `ion-card-subtitle`.
-
-
-
-## 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-card>
-  <ion-card-header>
-    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-    <ion-card-title>Card Title</ion-card-title>
-  </ion-card-header>
+import CSSProps from '@site/static/usage/card/theming/css-properties/index.md';
 
-  <ion-card-content>
-    Keep close to Nature's heart... and break clear away, once in awhile,
-    and climb a mountain or spend a week in the woods. Wash your spirit clean.
-  </ion-card-content>
-</ion-card>
+<CSSProps />
 
-<ion-card>
-  <ion-item>
-    <ion-icon name="pin" slot="start"></ion-icon>
-    <ion-label>ion-item in a card, icon left, button right</ion-label>
-    <ion-button fill="outline" slot="end">View</ion-button>
-  </ion-item>
-
-  <ion-card-content>
-    This is content, without any paragraph or header tags,
-    within an ion-card-content element.
-  </ion-card-content>
-</ion-card>
-
-<ion-card>
-  <ion-item href="#" class="ion-activated">
-    <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 activated</ion-label>
-  </ion-item>
-
-  <ion-item href="#">
-    <ion-icon name="wine" slot="start"></ion-icon>
-    <ion-label>Card Link Item 2</ion-label>
-  </ion-item>
-
-  <ion-item class="ion-activated">
-    <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 activated</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-icon name="walk" slot="start"></ion-icon>
-    <ion-label>Card Button Item 2</ion-label>
-  </ion-item>
-</ion-card>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-card>
-  <ion-card-header>
-    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-    <ion-card-title>Card Title</ion-card-title>
-  </ion-card-header>
-
-  <ion-card-content>
-    Keep close to Nature's heart... and break clear away, once in awhile,
-    and climb a mountain or spend a week in the woods. Wash your spirit clean.
-  </ion-card-content>
-</ion-card>
-
-<ion-card>
-  <ion-item>
-    <ion-icon name="pin" slot="start"></ion-icon>
-    <ion-label>ion-item in a card, icon left, button right</ion-label>
-    <ion-button fill="outline" slot="end">View</ion-button>
-  </ion-item>
-
-  <ion-card-content>
-    This is content, without any paragraph or header tags,
-    within an ion-card-content element.
-  </ion-card-content>
-</ion-card>
-
-<ion-card>
-  <ion-item href="#" class="ion-activated">
-    <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 activated</ion-label>
-  </ion-item>
-
-  <ion-item href="#">
-    <ion-icon name="wine" slot="start"></ion-icon>
-    <ion-label>Card Link Item 2</ion-label>
-  </ion-item>
-
-  <ion-item class="ion-activated">
-    <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 activated</ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-icon name="walk" slot="start"></ion-icon>
-    <ion-label>Card Button Item 2</ion-label>
-  </ion-item>
-</ion-card>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
-import { pin, wifi, wine, warning, walk } from 'ionicons/icons';
-
-export const CardExamples: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>CardExamples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonCard>
-          <IonCardHeader>
-            <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
-            <IonCardTitle>Card Title</IonCardTitle>
-          </IonCardHeader>
-
-          <IonCardContent>
-            Keep close to Nature's heart... and break clear away, once in awhile,
-            and climb a mountain or spend a week in the woods. Wash your spirit clean.
-      </IonCardContent>
-        </IonCard>
-
-        <IonCard>
-          <IonItem>
-            <IonIcon icon={pin} slot="start" />
-            <IonLabel>ion-item in a card, icon left, button right</IonLabel>
-            <IonButton fill="outline" slot="end">View</IonButton>
-          </IonItem>
-
-          <IonCardContent>
-            This is content, without any paragraph or header tags,
-            within an ion-cardContent element.
-      </IonCardContent>
-        </IonCard>
-
-        <IonCard>
-          <IonItem href="#" className="ion-activated">
-            <IonIcon icon={wifi} slot="start" />
-            <IonLabel>Card Link Item 1 activated</IonLabel>
-          </IonItem>
-
-          <IonItem href="#">
-            <IonIcon icon={wine} slot="start" />
-            <IonLabel>Card Link Item 2</IonLabel>
-          </IonItem>
-
-          <IonItem className="ion-activated">
-            <IonIcon icon={warning} slot="start" />
-            <IonLabel>Card Button Item 1 activated</IonLabel>
-          </IonItem>
-
-          <IonItem>
-            <IonIcon icon={walk} slot="start" />
-            <IonLabel>Card Button Item 2</IonLabel>
-          </IonItem>
-        </IonCard>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'card-example',
-  styleUrl: 'card-example.css'
-})
-export class CardExample {
-  render() {
-    return [
-      <ion-card>
-        <ion-card-header>
-          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          <ion-card-title>Card Title</ion-card-title>
-        </ion-card-header>
-
-        <ion-card-content>
-          Keep close to Nature's heart... and break clear away, once in awhile,
-          and climb a mountain or spend a week in the woods. Wash your spirit clean.
-        </ion-card-content>
-      </ion-card>,
-
-      <ion-card>
-        <ion-item>
-          <ion-icon name="pin" slot="start"></ion-icon>
-          <ion-label>ion-item in a card, icon left, button right</ion-label>
-          <ion-button fill="outline" slot="end">View</ion-button>
-        </ion-item>
-
-        <ion-card-content>
-          This is content, without any paragraph or header tags,
-          within an ion-card-content element.
-        </ion-card-content>
-      </ion-card>,
-
-      <ion-card>
-        <ion-item href="#" class="ion-activated">
-          <ion-icon name="wifi" slot="start"></ion-icon>
-          <ion-label>Card Link Item 1 activated</ion-label>
-        </ion-item>
-
-        <ion-item href="#">
-          <ion-icon name="wine" slot="start"></ion-icon>
-          <ion-label>Card Link Item 2</ion-label>
-        </ion-item>
-
-        <ion-item class="ion-activated">
-          <ion-icon name="warning" slot="start"></ion-icon>
-          <ion-label>Card Button Item 1 activated</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-icon name="walk" slot="start"></ion-icon>
-          <ion-label>Card Button Item 2</ion-label>
-        </ion-item>
-      </ion-card>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-card>
-    <ion-card-header>
-      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-      <ion-card-title>Card Title</ion-card-title>
-    </ion-card-header>
-
-    <ion-card-content>
-      Keep close to Nature's heart... and break clear away, once in awhile,
-      and climb a mountain or spend a week in the woods. Wash your spirit clean.
-    </ion-card-content>
-  </ion-card>
-
-  <ion-card>
-    <ion-item>
-      <ion-icon :icon="pin" slot="start"></ion-icon>
-      <ion-label>ion-item in a card, icon left, button right</ion-label>
-      <ion-button fill="outline" slot="end">View</ion-button>
-    </ion-item>
-
-    <ion-card-content>
-      This is content, without any paragraph or header tags,
-      within an ion-card-content element.
-    </ion-card-content>
-  </ion-card>
-
-  <ion-card>
-    <ion-item href="#" class="ion-activated">
-      <ion-icon :icon="wifi" slot="start"></ion-icon>
-      <ion-label>Card Link Item 1 activated</ion-label>
-    </ion-item>
-
-    <ion-item href="#">
-      <ion-icon :icon="wine" slot="start"></ion-icon>
-      <ion-label>Card Link Item 2</ion-label>
-    </ion-item>
-
-    <ion-item class="ion-activated">
-      <ion-icon :icon="warning" slot="start"></ion-icon>
-      <ion-label>Card Button Item 1 activated</ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-icon :icon="walk" slot="start"></ion-icon>
-      <ion-label>Card Button Item 2</ion-label>
-    </ion-item>
-  </ion-card>
-</template>
-
-<script>
-import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
-import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
-  setup() {
-    return { warning };
-  }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -377,4 +84,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/card/basic/angular/example_component_css.md b/static/usage/card/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/basic/angular/example_component_html.md b/static/usage/card/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/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/card/basic/demo.html b/static/usage/card/basic/demo.html
new file mode 100644
index 00000000000..b7913580d9e
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/card/basic/index.md b/static/usage/card/basic/index.md
new file mode 100644
index 00000000000..0b2b3e3382d
--- /dev/null
+++ b/static/usage/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/card/basic/demo.html"
+/>
diff --git a/static/usage/card/basic/javascript.md b/static/usage/card/basic/javascript.md
new file mode 100644
index 00000000000..737c46c9224
--- /dev/null
+++ b/static/usage/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/card/basic/react/main_css.md b/static/usage/card/basic/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/basic/react/main_tsx.md b/static/usage/card/basic/react/main_tsx.md
new file mode 100644
index 00000000000..251b18ce24d
--- /dev/null
+++ b/static/usage/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/card/basic/vue.md b/static/usage/card/basic/vue.md
new file mode 100644
index 00000000000..4b2388246d5
--- /dev/null
+++ b/static/usage/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/card/buttons/angular/example_component_css.md b/static/usage/card/buttons/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/buttons/angular/example_component_html.md b/static/usage/card/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..c597c1dca7a
--- /dev/null
+++ b/static/usage/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/card/buttons/demo.html b/static/usage/card/buttons/demo.html
new file mode 100644
index 00000000000..d36d080c427
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/card/buttons/index.md b/static/usage/card/buttons/index.md
new file mode 100644
index 00000000000..6ee42ae4382
--- /dev/null
+++ b/static/usage/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/card/buttons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/card/buttons/javascript.md b/static/usage/card/buttons/javascript.md
new file mode 100644
index 00000000000..f87b4e14c90
--- /dev/null
+++ b/static/usage/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/card/buttons/react/main_css.md b/static/usage/card/buttons/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/buttons/react/main_tsx.md b/static/usage/card/buttons/react/main_tsx.md
new file mode 100644
index 00000000000..a24ba6cd1e9
--- /dev/null
+++ b/static/usage/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/card/buttons/vue.md b/static/usage/card/buttons/vue.md
new file mode 100644
index 00000000000..70db0d92201
--- /dev/null
+++ b/static/usage/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/card/list/angular/example_component_css.md b/static/usage/card/list/angular/example_component_css.md
new file mode 100644
index 00000000000..fe56dd12b99
--- /dev/null
+++ b/static/usage/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/card/list/angular/example_component_html.md b/static/usage/card/list/angular/example_component_html.md
new file mode 100644
index 00000000000..850c62ec942
--- /dev/null
+++ b/static/usage/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/card/list/demo.html b/static/usage/card/list/demo.html
new file mode 100644
index 00000000000..e2ff8431be8
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/card/list/index.md b/static/usage/card/list/index.md
new file mode 100644
index 00000000000..775f65a5b40
--- /dev/null
+++ b/static/usage/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/card/list/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/card/list/javascript.md b/static/usage/card/list/javascript.md
new file mode 100644
index 00000000000..4103b7c3c48
--- /dev/null
+++ b/static/usage/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/card/list/react/main_css.md b/static/usage/card/list/react/main_css.md
new file mode 100644
index 00000000000..fe56dd12b99
--- /dev/null
+++ b/static/usage/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/card/list/react/main_tsx.md b/static/usage/card/list/react/main_tsx.md
new file mode 100644
index 00000000000..9bb30e92c92
--- /dev/null
+++ b/static/usage/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/card/list/vue.md b/static/usage/card/list/vue.md
new file mode 100644
index 00000000000..7d3e93d7770
--- /dev/null
+++ b/static/usage/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/card/media/angular/example_component_css.md b/static/usage/card/media/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/media/angular/example_component_html.md b/static/usage/card/media/angular/example_component_html.md
new file mode 100644
index 00000000000..2e074cd5c6d
--- /dev/null
+++ b/static/usage/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/card/media/demo.html b/static/usage/card/media/demo.html
new file mode 100644
index 00000000000..b2a6c6b74b2
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/card/media/index.md b/static/usage/card/media/index.md
new file mode 100644
index 00000000000..82c8eb892e9
--- /dev/null
+++ b/static/usage/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/card/media/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/card/media/javascript.md b/static/usage/card/media/javascript.md
new file mode 100644
index 00000000000..eb6cfee9522
--- /dev/null
+++ b/static/usage/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/card/media/react/main_css.md b/static/usage/card/media/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/media/react/main_tsx.md b/static/usage/card/media/react/main_tsx.md
new file mode 100644
index 00000000000..7c47833027f
--- /dev/null
+++ b/static/usage/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/card/media/vue.md b/static/usage/card/media/vue.md
new file mode 100644
index 00000000000..e433119f123
--- /dev/null
+++ b/static/usage/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/card/theming/colors/angular/example_component_css.md b/static/usage/card/theming/colors/angular/example_component_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/theming/colors/angular/example_component_html.md b/static/usage/card/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..bda4dbfe1dc
--- /dev/null
+++ b/static/usage/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/card/theming/colors/demo.html b/static/usage/card/theming/colors/demo.html
new file mode 100644
index 00000000000..96aa2f2440c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/card/theming/colors/index.md b/static/usage/card/theming/colors/index.md
new file mode 100644
index 00000000000..951273ef2a6
--- /dev/null
+++ b/static/usage/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/card/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/card/theming/colors/javascript.md b/static/usage/card/theming/colors/javascript.md
new file mode 100644
index 00000000000..6822cd586a4
--- /dev/null
+++ b/static/usage/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/card/theming/colors/react/main_css.md b/static/usage/card/theming/colors/react/main_css.md
new file mode 100644
index 00000000000..e1d8e0d530e
--- /dev/null
+++ b/static/usage/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/card/theming/colors/react/main_tsx.md b/static/usage/card/theming/colors/react/main_tsx.md
new file mode 100644
index 00000000000..efb556f7a01
--- /dev/null
+++ b/static/usage/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/card/theming/colors/vue.md b/static/usage/card/theming/colors/vue.md
new file mode 100644
index 00000000000..9f8f76585c8
--- /dev/null
+++ b/static/usage/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/card/theming/css-properties/angular/example_component_css.md b/static/usage/card/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..10b2ee69cb0
--- /dev/null
+++ b/static/usage/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/card/theming/css-properties/angular/example_component_html.md b/static/usage/card/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/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/card/theming/css-properties/demo.html b/static/usage/card/theming/css-properties/demo.html
new file mode 100644
index 00000000000..4a479f01653
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/card/theming/css-properties/index.md b/static/usage/card/theming/css-properties/index.md
new file mode 100644
index 00000000000..22ceaf39f95
--- /dev/null
+++ b/static/usage/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/card/theming/css-properties/demo.html"
+/>
diff --git a/static/usage/card/theming/css-properties/javascript.md b/static/usage/card/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5f7c4c56a3b
--- /dev/null
+++ b/static/usage/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/card/theming/css-properties/react/main_css.md b/static/usage/card/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..10b2ee69cb0
--- /dev/null
+++ b/static/usage/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/card/theming/css-properties/react/main_tsx.md b/static/usage/card/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..251b18ce24d
--- /dev/null
+++ b/static/usage/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/card/theming/css-properties/vue.md b/static/usage/card/theming/css-properties/vue.md
new file mode 100644
index 00000000000..4099cc49de6
--- /dev/null
+++ b/static/usage/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>
+```

From 4d252d7b84c0918e5ffbf0e59dd670d51cf51af5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 11 Oct 2022 12:11:37 -0400
Subject: [PATCH 094/469] chore(github): add ionic issue bot (#2606)

---
 .github/ionic-issue-bot.yml | 86 +++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 .github/ionic-issue-bot.yml

diff --git a/.github/ionic-issue-bot.yml b/.github/ionic-issue-bot.yml
new file mode 100644
index 00000000000..f0da0d54073
--- /dev/null
+++ b/.github/ionic-issue-bot.yml
@@ -0,0 +1,86 @@
+triage:
+  label: triage
+  dryRun: false
+
+closeAndLock:
+  labels:
+    - label: 'ionitron: support'
+      message: >
+        Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for
+        content issues, bug reports and feature requests related to the documentation. Please use our
+        [forum](https://forum.ionicframework.com/) for help or questions about Ionic Framework.
+
+
+        Thank you for using Ionic!
+    - label: 'ionitron: missing template'
+      message: >
+        Thanks for the issue! It appears that you have not filled out the provided issue template. We use this issue
+        template in order to gather more information and further assist you. Please create a new issue and ensure the
+        template is fully filled out.
+
+
+        Thank you for using Ionic!
+  close: true
+  lock: true
+  dryRun: false
+
+comment:
+  labels:
+    - label: "help wanted"
+      message: >
+        This issue has been labeled as `help wanted`. This label is added to issues
+        that we believe would be good for contributors.
+
+
+        If you'd like to work on this issue, please comment here letting us know that
+        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.
+
+
+        For a guide on how to create a pull request and test this project locally to see
+        your changes, see our [contributing documentation](https://github.com/ionic-team/ionic-docs/blob/main/CONTRIBUTING.md).
+
+
+        Thank you!
+    - label: 'ionitron: needs reproduction'
+      message: >
+        Thanks for the issue! This issue has been labeled as `needs reproduction`. This label is added to issues that
+        we are not able to reproduce.
+
+
+        Please provide easy to follow steps for us to reproduce this issue.
+  dryRun: false
+
+noReply:
+  days: 14
+  maxIssuesPerRun: 100
+  label: "needs: reply"
+  responseLabel: triage
+  exemptProjects: true
+  exemptMilestones: true
+  message: >
+    Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue,
+    please create a new issue and ensure the template is fully filled out.
+
+
+    Thank you for using Ionic!
+  close: true
+  lock: true
+  dryRun: false
+
+noReproduction:
+  days: 14
+  maxIssuesPerRun: 100
+  label: "ionitron: needs reproduction"
+  responseLabel: triage
+  exemptProjects: true
+  exemptMilestones: true
+  message: >
+    Thanks for the issue! This issue is being closed due to the lack of a reproduction. If this is still an issue,
+    please create a new issue and ensure the template is fully filled out.
+
+
+    Thank you for using Ionic!
+  close: true
+  lock: true
+  dryRun: false

From 7ee8a32346404e611b50e8d57e993601334d1a65 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 11 Oct 2022 14:48:09 -0400
Subject: [PATCH 095/469] feat(playground): pass the variables theming file to
 StackBlitz (#2602)

---
 .../global/Playground/stackblitz.utils.ts     |  16 +-
 static/code/stackblitz/angular/angular.json   |   2 +-
 static/code/stackblitz/angular/styles.css     |  32 ++-
 static/code/stackblitz/angular/variables.css  | 236 ++++++++++++++++++
 static/code/stackblitz/html/index.ts          |   4 +
 static/code/stackblitz/html/variables.css     | 236 ++++++++++++++++++
 static/code/stackblitz/react/app.tsx          |   7 +
 .../code/stackblitz/react/app.withContent.tsx |   7 +
 static/code/stackblitz/react/variables.css    | 236 ++++++++++++++++++
 static/code/stackblitz/vue/main.ts            |   3 +
 static/code/stackblitz/vue/variables.css      | 236 ++++++++++++++++++
 11 files changed, 1001 insertions(+), 14 deletions(-)
 create mode 100644 static/code/stackblitz/angular/variables.css
 create mode 100644 static/code/stackblitz/html/variables.css
 create mode 100644 static/code/stackblitz/react/variables.css
 create mode 100644 static/code/stackblitz/vue/variables.css

diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index fb24f424c3b..d0ffc783c07 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -40,9 +40,10 @@ const loadSourceFiles = async (files: string[]) => {
 }
 
 const openHtmlEditor = async (code: string, options?: EditorOptions) => {
-  const [index_ts, index_html] = await loadSourceFiles([
+  const [index_ts, index_html, variables_css] = await loadSourceFiles([
     'html/index.ts',
     options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
+    'html/variables.css'
   ]);
 
   sdk.openProject({
@@ -52,6 +53,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     files: {
       'index.html': index_html.replace(/{{ TEMPLATE }}/g, code),
       'index.ts': index_ts,
+      'theme/variables.css': variables_css,
       ...options?.files
     },
     dependencies: {
@@ -61,7 +63,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
 }
 
 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, 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] = await loadSourceFiles([
     'angular/main.ts',
     'angular/app.module.ts',
     'angular/app.component.ts',
@@ -70,6 +72,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     'angular/example.component.ts',
     'angular/styles.css',
     'angular/global.css',
+    'angular/variables.css',
     'angular/angular.json',
     'angular/tsconfig.json'
   ])
@@ -100,6 +103,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
       'src/index.html': '<app-root></app-root>',
       'src/styles.css': styles_css,
       'src/global.css': global_css,
+      'src/theme/variables.css': variables_css,
       'angular.json': angular_json,
       'tsconfig.json': tsconfig_json,
       ...options?.files
@@ -119,9 +123,10 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
 }
 
 const openReactEditor = async (code: string, options?: EditorOptions) => {
-  const [index_tsx, app_tsx, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
+  const [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
     'react/index.tsx',
     options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
+    'react/variables.css',
     'react/tsconfig.json',
     'react/package.json',
     'react/package-lock.json'
@@ -136,6 +141,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
       'src/index.tsx': index_tsx,
       'src/App.tsx': app_tsx,
       'src/main.tsx': code,
+      'src/theme/variables.css': variables_css,
       'tsconfig.json': ts_config_json,
       'package.json': package_json,
       'package-lock.json': package_lock_json,
@@ -148,10 +154,11 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
 }
 
 const openVueEditor = async (code: string, options?: EditorOptions) => {
-  const [package_json, package_lock_json, index_html, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
+  const [package_json, package_lock_json, index_html, variables_css, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
     'vue/package.json',
     'vue/package-lock.json',
     'vue/index.html',
+    'vue/variables.css',
     'vue/vite.config.ts',
     'vue/main.ts',
     options?.includeIonContent ? 'vue/App.withContent.vue' : 'vue/App.vue',
@@ -174,6 +181,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
       'src/components/Example.vue': code,
       'src/main.ts': main_ts,
       'src/env.d.ts': env_d_ts,
+      'src/theme/variables.css': variables_css,
       'index.html': index_html,
       'vite.config.ts': vite_config_ts,
       'package.json': package_json,
diff --git a/static/code/stackblitz/angular/angular.json b/static/code/stackblitz/angular/angular.json
index 9c9b77ffbd5..811624f69b5 100644
--- a/static/code/stackblitz/angular/angular.json
+++ b/static/code/stackblitz/angular/angular.json
@@ -19,7 +19,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css", "src/global.css"],
+            "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
             "scripts": []
           },
           "configurations": {
diff --git a/static/code/stackblitz/angular/styles.css b/static/code/stackblitz/angular/styles.css
index 9ff24db5183..463c50148fb 100644
--- a/static/code/stackblitz/angular/styles.css
+++ b/static/code/stackblitz/angular/styles.css
@@ -1,12 +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';
+@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/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/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/angular/variables.css b/static/code/stackblitz/angular/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/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/html/index.ts b/static/code/stackblitz/html/index.ts
index ffaf975593a..952785602e6 100644
--- a/static/code/stackblitz/html/index.ts
+++ b/static/code/stackblitz/html/index.ts
@@ -16,6 +16,10 @@ 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();
 
diff --git a/static/code/stackblitz/html/variables.css b/static/code/stackblitz/html/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/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/react/app.tsx b/static/code/stackblitz/react/app.tsx
index fef34594344..7ba9c8b93c7 100644
--- a/static/code/stackblitz/react/app.tsx
+++ b/static/code/stackblitz/react/app.tsx
@@ -1,17 +1,24 @@
 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';
 
diff --git a/static/code/stackblitz/react/app.withContent.tsx b/static/code/stackblitz/react/app.withContent.tsx
index 12c3a19d3dc..d90d8f74ffe 100644
--- a/static/code/stackblitz/react/app.withContent.tsx
+++ b/static/code/stackblitz/react/app.withContent.tsx
@@ -1,17 +1,24 @@
 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';
 
diff --git a/static/code/stackblitz/react/variables.css b/static/code/stackblitz/react/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/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/vue/main.ts b/static/code/stackblitz/vue/main.ts
index 6273bb25e4f..207b1ad84c6 100644
--- a/static/code/stackblitz/vue/main.ts
+++ b/static/code/stackblitz/vue/main.ts
@@ -19,4 +19,7 @@ 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).mount('#app');
diff --git a/static/code/stackblitz/vue/variables.css b/static/code/stackblitz/vue/variables.css
new file mode 100644
index 00000000000..a44fcdd01d7
--- /dev/null
+++ b/static/code/stackblitz/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;
+  }
+}

From ab43aebe831f86224ff3025d199903142b01a65b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 11 Oct 2022 15:24:29 -0400
Subject: [PATCH 096/469] docs(react): update link to react overview (#2605)

fixes #2220
---
 docs/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/index.md b/docs/index.md
index cf184693102..5a5909b1b3e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## 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/overview.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.
+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
 

From 9ac67936ad0ef244cad681fb8f116d1ce33ccaae Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 12 Oct 2022 11:52:57 -0400
Subject: [PATCH 097/469] docs(input): add component playgrounds (#2592)

---
 docs/api/input.md                             | 338 +++---------------
 static/usage/input/basic/angular.md           |  28 ++
 static/usage/input/basic/demo.html            |  55 +++
 static/usage/input/basic/index.md             |   8 +
 static/usage/input/basic/javascript.md        |  28 ++
 static/usage/input/basic/react.md             |  36 ++
 static/usage/input/basic/vue.md               |  39 ++
 static/usage/input/clear/angular.md           |  18 +
 static/usage/input/clear/demo.html            |  45 +++
 static/usage/input/clear/index.md             |   8 +
 static/usage/input/clear/javascript.md        |  18 +
 static/usage/input/clear/react.md             |  26 ++
 static/usage/input/clear/vue.md               |  29 ++
 static/usage/input/fill/angular.md            |  16 +
 static/usage/input/fill/demo.html             |  44 +++
 static/usage/input/fill/index.md              |   8 +
 static/usage/input/fill/javascript.md         |  16 +
 static/usage/input/fill/react.md              |  26 ++
 static/usage/input/fill/vue.md                |  27 ++
 static/usage/input/labels/angular.md          |  23 ++
 static/usage/input/labels/demo.html           |  50 +++
 static/usage/input/labels/index.md            |   8 +
 static/usage/input/labels/javascript.md       |  23 ++
 static/usage/input/labels/react.md            |  31 ++
 static/usage/input/labels/vue.md              |  34 ++
 static/usage/input/theming/colors/angular.md  |  11 +
 static/usage/input/theming/colors/demo.html   |  44 +++
 static/usage/input/theming/colors/index.md    |   8 +
 .../usage/input/theming/colors/javascript.md  |  11 +
 static/usage/input/theming/colors/react.md    |  21 ++
 static/usage/input/theming/colors/vue.md      |  22 ++
 .../angular/example_component_css.md          |  13 +
 .../angular/example_component_html.md         |   3 +
 .../input/theming/css-properties/demo.html    |  43 +++
 .../input/theming/css-properties/index.md     |  32 ++
 .../theming/css-properties/javascript.md      |  17 +
 .../theming/css-properties/react/main_css.md  |  13 +
 .../theming/css-properties/react/main_tsx.md  |  13 +
 .../usage/input/theming/css-properties/vue.md |  28 ++
 static/usage/input/types/angular.md           |  28 ++
 static/usage/input/types/demo.html            |  55 +++
 static/usage/input/types/index.md             |   8 +
 static/usage/input/types/javascript.md        |  28 ++
 static/usage/input/types/react.md             |  36 ++
 static/usage/input/types/vue.md               |  39 ++
 static/usage/item/counter/demo.html           |   6 +-
 static/usage/item/helper-error/demo.html      |   6 -
 static/usage/item/helper-error/index.md       |   1 +
 48 files changed, 1173 insertions(+), 295 deletions(-)
 create mode 100644 static/usage/input/basic/angular.md
 create mode 100644 static/usage/input/basic/demo.html
 create mode 100644 static/usage/input/basic/index.md
 create mode 100644 static/usage/input/basic/javascript.md
 create mode 100644 static/usage/input/basic/react.md
 create mode 100644 static/usage/input/basic/vue.md
 create mode 100644 static/usage/input/clear/angular.md
 create mode 100644 static/usage/input/clear/demo.html
 create mode 100644 static/usage/input/clear/index.md
 create mode 100644 static/usage/input/clear/javascript.md
 create mode 100644 static/usage/input/clear/react.md
 create mode 100644 static/usage/input/clear/vue.md
 create mode 100644 static/usage/input/fill/angular.md
 create mode 100644 static/usage/input/fill/demo.html
 create mode 100644 static/usage/input/fill/index.md
 create mode 100644 static/usage/input/fill/javascript.md
 create mode 100644 static/usage/input/fill/react.md
 create mode 100644 static/usage/input/fill/vue.md
 create mode 100644 static/usage/input/labels/angular.md
 create mode 100644 static/usage/input/labels/demo.html
 create mode 100644 static/usage/input/labels/index.md
 create mode 100644 static/usage/input/labels/javascript.md
 create mode 100644 static/usage/input/labels/react.md
 create mode 100644 static/usage/input/labels/vue.md
 create mode 100644 static/usage/input/theming/colors/angular.md
 create mode 100644 static/usage/input/theming/colors/demo.html
 create mode 100644 static/usage/input/theming/colors/index.md
 create mode 100644 static/usage/input/theming/colors/javascript.md
 create mode 100644 static/usage/input/theming/colors/react.md
 create mode 100644 static/usage/input/theming/colors/vue.md
 create mode 100644 static/usage/input/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/input/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/input/theming/css-properties/demo.html
 create mode 100644 static/usage/input/theming/css-properties/index.md
 create mode 100644 static/usage/input/theming/css-properties/javascript.md
 create mode 100644 static/usage/input/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/input/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/input/theming/css-properties/vue.md
 create mode 100644 static/usage/input/types/angular.md
 create mode 100644 static/usage/input/types/demo.html
 create mode 100644 static/usage/input/types/index.md
 create mode 100644 static/usage/input/types/javascript.md
 create mode 100644 static/usage/input/types/react.md
 create mode 100644 static/usage/input/types/vue.md

diff --git a/docs/api/input.md b/docs/api/input.md
index 1dd3b8cb3d6..8597d1bf22b 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-input"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/input/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/input/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,341 +17,110 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
 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.
 
-It 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.
-
-## 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;
-}
-```
 
+## Basic Usage
 
+import Basic from '@site/static/usage/input/basic/index.md';
 
-## Usage
+<Basic />
 
-<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">
+## Types
 
-```html
-<!-- Default Input -->
-<ion-input></ion-input>
+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"`.
 
-<!-- Input with value -->
-<ion-input value="custom"></ion-input>
+import Types from '@site/static/usage/input/types/index.md';
 
-<!-- Input with placeholder -->
-<ion-input placeholder="Enter Input"></ion-input>
+<Types />
 
-<!-- Input with clear button when there is a value -->
-<ion-input clearInput value="clear me"></ion-input>
 
-<!-- Number type input -->
-<ion-input type="number" value="333"></ion-input>
+## Label Positioning
 
-<!-- Disabled input -->
-<ion-input value="Disabled" disabled></ion-input>
+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.
 
-<!-- Readonly input -->
-<ion-input value="Readonly" readonly></ion-input>
+import Labels from '@site/static/usage/input/labels/index.md';
 
-<!-- Inputs with labels -->
-<ion-item>
-  <ion-label>Default Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
+<Labels />
 
-<ion-item>
-  <ion-label position="floating">Floating Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
 
-<ion-item>
-  <ion-label position="fixed">Fixed Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
+## Clear Options
 
-<ion-item>
-  <ion-label position="stacked">Stacked Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-```
+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.
 
-</TabItem>
+import Clear from '@site/static/usage/input/clear/index.md';
 
+<Clear />
 
-<TabItem value="javascript">
 
-```html
-<!-- Default Input -->
-<ion-input></ion-input>
+## Filled Inputs
 
-<!-- Input with value -->
-<ion-input value="custom"></ion-input>
+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"`.
 
-<!-- Input with placeholder -->
-<ion-input placeholder="Enter Input"></ion-input>
+import Fill from '@site/static/usage/input/fill/index.md';
 
-<!-- Input with clear button when there is a value -->
-<ion-input clear-input value="clear me"></ion-input>
+<Fill />
 
-<!-- Number type input -->
-<ion-input type="number" value="333"></ion-input>
 
-<!-- Disabled input -->
-<ion-input value="Disabled" disabled></ion-input>
+## Helper & Error Text
 
-<!-- Readonly input -->
-<ion-input value="Readonly" readonly></ion-input>
+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.
 
-<!-- Inputs with labels -->
-<ion-item>
-  <ion-label>Default Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
+<!-- Reuse the playground from the Item directory -->
+import HelperError from '@site/static/usage/item/helper-error/index.md';
 
-<ion-item>
-  <ion-label position="floating">Floating Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
+<HelperError />
 
-<ion-item>
-  <ion-label position="fixed">Fixed Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
+## Item Counter
 
-<ion-item>
-  <ion-label position="stacked">Stacked Label</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-```
+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.
 
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react';
-
-export const InputExamples: React.FC = () => {
-
-  const [text, setText] = useState<string>();
-  const [number, setNumber] = useState<number>();
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>IonInput Examples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItemDivider>Default Input with Placeholder</IonItemDivider>
-          <IonItem>
-            <IonInput value={text} placeholder="Enter Input" onIonChange={e => setText(e.detail.value!)}></IonInput>
-          </IonItem>
-
-          <IonItemDivider>Input with clear button when there is a value</IonItemDivider>
-          <IonItem>
-            <IonInput value={text} placeholder="Enter Input" onIonChange={e => setText(e.detail.value!)} clearInput></IonInput>
-          </IonItem>
-
-          <IonItemDivider>Number type input</IonItemDivider>
-          <IonItem>
-            <IonInput type="number" value={number} placeholder="Enter Number" onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}></IonInput>
-          </IonItem>
-
-          <IonItemDivider>Disabled input</IonItemDivider>
-          <IonItem>
-            <IonInput value={text} disabled></IonInput>
-          </IonItem>
-
-          <IonItemDivider>Readonly input</IonItemDivider>
-          <IonItem>
-            <IonInput value={text} readonly></IonInput>
-          </IonItem>
-
-          <IonItemDivider>Inputs with labels</IonItemDivider>
-
-          <IonItem>
-            <IonLabel>Default Label</IonLabel>
-            <IonInput></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="floating">Floating Label</IonLabel>
-            <IonInput value={text}></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="fixed">Fixed Label</IonLabel>
-            <IonInput value={text}></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="stacked">Stacked Label</IonLabel>
-            <IonInput value={text}> </IonInput>
-          </IonItem>
-        </IonList>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
+<!-- Reuse the playground from the Item directory -->
+import Counter from '@site/static/usage/item/counter/index.md';
 
-</TabItem>
+<Counter />
 
 
-<TabItem value="stencil">
+## Theming
 
-```tsx
-import { Component, h } from '@stencil/core';
+### Colors
 
-@Component({
-  tag: 'input-example',
-  styleUrl: 'input-example.css'
-})
-export class InputExample {
-  render() {
-    return [
-      // Default Input
-      <ion-input></ion-input>,
+import Colors from '@site/static/usage/input/theming/colors/index.md';
 
-      // Input with value
-      <ion-input value="custom"></ion-input>,
+<Colors />
 
-      // Input with placeholder
-      <ion-input placeholder="Enter Input"></ion-input>,
+### CSS Custom Properties
 
-      // Input with clear button when there is a value
-      <ion-input clearInput value="clear me"></ion-input>,
+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.
 
-      // Number type input
-      <ion-input type="number" value="333"></ion-input>,
+import CSSProps from '@site/static/usage/input/theming/css-properties/index.md';
 
-      // Disabled input
-      <ion-input value="Disabled" disabled></ion-input>,
+<CSSProps />
 
-      // Readonly input
-      <ion-input value="Readonly" readonly></ion-input>,
 
-      // Inputs with labels
-      <ion-item>
-        <ion-label>Default Label</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label position="floating">Floating Label</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
+## Interfaces
 
-      <ion-item>
-        <ion-label position="fixed">Fixed Label</ion-label>
-        <ion-input></ion-input>
-      </ion-item>,
+### InputChangeEventDetail
 
-      <ion-item>
-        <ion-label position="stacked">Stacked Label</ion-label>
-        <ion-input></ion-input>
-      </ion-item>
-    ];
-  }
+```typescript
+interface InputChangeEventDetail {
+  value: string | undefined | null;
 }
 ```
 
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Input -->
-  <ion-input></ion-input>
-
-  <!-- Input with value -->
-  <ion-input value="custom"></ion-input>
-
-  <!-- Input with placeholder -->
-  <ion-input placeholder="Enter Input"></ion-input>
-
-  <!-- Input with clear button when there is a value -->
-  <ion-input clear-input value="clear me"></ion-input>
-
-  <!-- Number type input -->
-  <ion-input type="number" value="333"></ion-input>
-
-  <!-- Disabled input -->
-  <ion-input value="Disabled" disabled></ion-input>
-
-  <!-- Readonly input -->
-  <ion-input value="Readonly" readonly></ion-input>
-
-  <!-- Inputs with labels -->
-  <ion-item>
-    <ion-label>Default Label</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="floating">Floating Label</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="fixed">Fixed Label</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="stacked">Stacked Label</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-</template>
+### InputCustomEvent
 
-<script>
-import { IonLabel, IonInput, IonItem } from '@ionic/vue';
-import { defineComponent } from 'vue';
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
 
-export default defineComponent({
-  components: { IonLabel, IonInput, IonItem }
-});
-</script>
+```typescript
+interface InputCustomEvent extends CustomEvent {
+  detail: InputChangeEventDetail;
+  target: HTMLIonInputElement;
+}
 ```
 
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -376,4 +138,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/input/basic/angular.md b/static/usage/input/basic/angular.md
new file mode 100644
index 00000000000..faa0271acae
--- /dev/null
+++ b/static/usage/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/input/basic/demo.html b/static/usage/input/basic/demo.html
new file mode 100644
index 00000000000..348671b3bc6
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/input/basic/index.md b/static/usage/input/basic/index.md
new file mode 100644
index 00000000000..0e811417781
--- /dev/null
+++ b/static/usage/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/input/basic/demo.html" size="300px" />
diff --git a/static/usage/input/basic/javascript.md b/static/usage/input/basic/javascript.md
new file mode 100644
index 00000000000..668cdbdf07e
--- /dev/null
+++ b/static/usage/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/input/basic/react.md b/static/usage/input/basic/react.md
new file mode 100644
index 00000000000..b3ad075a156
--- /dev/null
+++ b/static/usage/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/input/basic/vue.md b/static/usage/input/basic/vue.md
new file mode 100644
index 00000000000..80ad1c0cd54
--- /dev/null
+++ b/static/usage/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/input/clear/angular.md b/static/usage/input/clear/angular.md
new file mode 100644
index 00000000000..d198485925f
--- /dev/null
+++ b/static/usage/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/input/clear/demo.html b/static/usage/input/clear/demo.html
new file mode 100644
index 00000000000..455da68cc85
--- /dev/null
+++ b/static/usage/input/clear/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>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
new file mode 100644
index 00000000000..f4d564a268f
--- /dev/null
+++ b/static/usage/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/input/clear/demo.html" size="250px" />
diff --git a/static/usage/input/clear/javascript.md b/static/usage/input/clear/javascript.md
new file mode 100644
index 00000000000..7a3a7fc2701
--- /dev/null
+++ b/static/usage/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/input/clear/react.md b/static/usage/input/clear/react.md
new file mode 100644
index 00000000000..c7205c903a4
--- /dev/null
+++ b/static/usage/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/input/clear/vue.md b/static/usage/input/clear/vue.md
new file mode 100644
index 00000000000..fecb1e831f1
--- /dev/null
+++ b/static/usage/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/input/fill/angular.md b/static/usage/input/fill/angular.md
new file mode 100644
index 00000000000..54ff7eafb18
--- /dev/null
+++ b/static/usage/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/input/fill/demo.html b/static/usage/input/fill/demo.html
new file mode 100644
index 00000000000..e95ac42d6ab
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/input/fill/index.md b/static/usage/input/fill/index.md
new file mode 100644
index 00000000000..ef05620d86c
--- /dev/null
+++ b/static/usage/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/input/fill/demo.html" size="250px" />
diff --git a/static/usage/input/fill/javascript.md b/static/usage/input/fill/javascript.md
new file mode 100644
index 00000000000..54ff7eafb18
--- /dev/null
+++ b/static/usage/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/input/fill/react.md b/static/usage/input/fill/react.md
new file mode 100644
index 00000000000..00000a9ee97
--- /dev/null
+++ b/static/usage/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/input/fill/vue.md b/static/usage/input/fill/vue.md
new file mode 100644
index 00000000000..d76a7929fb2
--- /dev/null
+++ b/static/usage/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/input/labels/angular.md b/static/usage/input/labels/angular.md
new file mode 100644
index 00000000000..9756b9c57cb
--- /dev/null
+++ b/static/usage/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/input/labels/demo.html b/static/usage/input/labels/demo.html
new file mode 100644
index 00000000000..7122947268b
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/input/labels/index.md b/static/usage/input/labels/index.md
new file mode 100644
index 00000000000..32749379f5d
--- /dev/null
+++ b/static/usage/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/input/labels/demo.html" size="300px" />
diff --git a/static/usage/input/labels/javascript.md b/static/usage/input/labels/javascript.md
new file mode 100644
index 00000000000..9756b9c57cb
--- /dev/null
+++ b/static/usage/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/input/labels/react.md b/static/usage/input/labels/react.md
new file mode 100644
index 00000000000..37a6bb8246b
--- /dev/null
+++ b/static/usage/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/input/labels/vue.md b/static/usage/input/labels/vue.md
new file mode 100644
index 00000000000..fae061af85f
--- /dev/null
+++ b/static/usage/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/input/theming/colors/angular.md b/static/usage/input/theming/colors/angular.md
new file mode 100644
index 00000000000..cc4a5b35ed5
--- /dev/null
+++ b/static/usage/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/input/theming/colors/demo.html b/static/usage/input/theming/colors/demo.html
new file mode 100644
index 00000000000..8051cb2dce9
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/input/theming/colors/index.md b/static/usage/input/theming/colors/index.md
new file mode 100644
index 00000000000..48243f46a22
--- /dev/null
+++ b/static/usage/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/input/theming/colors/demo.html" size="200px" />
diff --git a/static/usage/input/theming/colors/javascript.md b/static/usage/input/theming/colors/javascript.md
new file mode 100644
index 00000000000..cc4a5b35ed5
--- /dev/null
+++ b/static/usage/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/input/theming/colors/react.md b/static/usage/input/theming/colors/react.md
new file mode 100644
index 00000000000..d9697d40c34
--- /dev/null
+++ b/static/usage/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/input/theming/colors/vue.md b/static/usage/input/theming/colors/vue.md
new file mode 100644
index 00000000000..b6229c74c63
--- /dev/null
+++ b/static/usage/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/input/theming/css-properties/angular/example_component_css.md b/static/usage/input/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..bede6457325
--- /dev/null
+++ b/static/usage/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/input/theming/css-properties/angular/example_component_html.md b/static/usage/input/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b0f2c5bff5a
--- /dev/null
+++ b/static/usage/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/input/theming/css-properties/demo.html b/static/usage/input/theming/css-properties/demo.html
new file mode 100644
index 00000000000..20caec0af8a
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/input/theming/css-properties/index.md b/static/usage/input/theming/css-properties/index.md
new file mode 100644
index 00000000000..dac37e22b41
--- /dev/null
+++ b/static/usage/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/input/theming/css-properties/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/input/theming/css-properties/javascript.md b/static/usage/input/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..3b406ede42f
--- /dev/null
+++ b/static/usage/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/input/theming/css-properties/react/main_css.md b/static/usage/input/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..bede6457325
--- /dev/null
+++ b/static/usage/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/input/theming/css-properties/react/main_tsx.md b/static/usage/input/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..e4ec0fb134a
--- /dev/null
+++ b/static/usage/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/input/theming/css-properties/vue.md b/static/usage/input/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6d5d5fa41cc
--- /dev/null
+++ b/static/usage/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/input/types/angular.md b/static/usage/input/types/angular.md
new file mode 100644
index 00000000000..1c8ae75a5bc
--- /dev/null
+++ b/static/usage/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/input/types/demo.html b/static/usage/input/types/demo.html
new file mode 100644
index 00000000000..6c96667977e
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/input/types/index.md b/static/usage/input/types/index.md
new file mode 100644
index 00000000000..f7959c9ca7f
--- /dev/null
+++ b/static/usage/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/input/types/demo.html" size="300px" />
diff --git a/static/usage/input/types/javascript.md b/static/usage/input/types/javascript.md
new file mode 100644
index 00000000000..1c8ae75a5bc
--- /dev/null
+++ b/static/usage/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/input/types/react.md b/static/usage/input/types/react.md
new file mode 100644
index 00000000000..8ee7ad7044d
--- /dev/null
+++ b/static/usage/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/input/types/vue.md b/static/usage/input/types/vue.md
new file mode 100644
index 00000000000..9f44a8e4ca5
--- /dev/null
+++ b/static/usage/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/item/counter/demo.html b/static/usage/item/counter/demo.html
index e03792f80fa..0c588b0d3a7 100644
--- a/static/usage/item/counter/demo.html
+++ b/static/usage/item/counter/demo.html
@@ -12,7 +12,11 @@
 
   <style>
     .container {
-      display: block;
+      flex-direction: column;
+    }
+
+    ion-item {
+      width: 100%;
     }
   </style>
 </head>
diff --git a/static/usage/item/helper-error/demo.html b/static/usage/item/helper-error/demo.html
index 7679c1ff024..db7d12713a2 100644
--- a/static/usage/item/helper-error/demo.html
+++ b/static/usage/item/helper-error/demo.html
@@ -9,12 +9,6 @@
   <script src="../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/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>
diff --git a/static/usage/item/helper-error/index.md b/static/usage/item/helper-error/index.md
index c9e0dc49ee2..af338c468d3 100644
--- a/static/usage/item/helper-error/index.md
+++ b/static/usage/item/helper-error/index.md
@@ -14,5 +14,6 @@ import angular from './angular.md';
     angular,
   }}
   src="usage/item/helper-error/demo.html"
+  size="150px"
 />
 

From fb420a85e29e7f00ca64bc491bced8492b2b16e6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 12 Oct 2022 12:19:11 -0400
Subject: [PATCH 098/469] feat(playground): add support for opening in
 StackBlitz in ios mode (#2599)

---
 src/components/global/Playground/index.tsx     |  1 +
 .../global/Playground/stackblitz.utils.ts      | 18 +++++++++++++++---
 static/code/stackblitz/angular/app.module.ts   |  4 +++-
 static/code/stackblitz/html/index.html         |  8 ++++++++
 .../stackblitz/html/index.withContent.html     |  8 ++++++++
 static/code/stackblitz/react/app.tsx           |  4 +++-
 .../code/stackblitz/react/app.withContent.tsx  |  4 +++-
 static/code/stackblitz/vue/main.ts             |  4 +++-
 8 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index c1c36bef703..aa75747ee30 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -249,6 +249,7 @@ export default function Playground({
       title,
       description,
       includeIonContent,
+      mode: isIOS ? 'ios' : 'md'
     };
 
     let codeBlock;
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index d0ffc783c07..5f2facf906e 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -28,6 +28,11 @@ export interface EditorOptions {
    */
   includeIonContent: boolean;
 
+  /**
+   * The mode of the Stackblitz example.
+   */
+  mode?: string;
+
   angularModuleOptions?: {
     imports: string[];
     declarations?: string[];
@@ -51,7 +56,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files: {
-      'index.html': index_html.replace(/{{ TEMPLATE }}/g, code),
+      'index.html': index_html.replace(/{{ TEMPLATE }}/g, code).replace(/{{ MODE }}/g, options?.mode),
       'index.ts': index_ts,
       'theme/variables.css': variables_css,
       ...options?.files
@@ -86,6 +91,8 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     }
   }
 
+  app_module_ts = app_module_ts.replace('{{ MODE }}', options?.mode);
+
   sdk.openProject({
     template: 'angular-cli',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
@@ -123,7 +130,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
 }
 
 const openReactEditor = async (code: string, options?: EditorOptions) => {
-  const [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
+  let [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
     'react/index.tsx',
     options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
     'react/variables.css',
@@ -132,6 +139,8 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     'react/package-lock.json'
   ]);
 
+  app_tsx = app_tsx.replace('{{ MODE }}', options?.mode);
+
   sdk.openProject({
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
@@ -154,7 +163,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
 }
 
 const openVueEditor = async (code: string, options?: EditorOptions) => {
-  const [package_json, package_lock_json, index_html, variables_css, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
+  let [package_json, package_lock_json, index_html, variables_css, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
     'vue/package.json',
     'vue/package-lock.json',
     'vue/index.html',
@@ -166,6 +175,9 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     'vue/tsconfig.node.json',
     'vue/env.d.ts'
   ]);
+
+  main_ts = main_ts.replace('{{ MODE }}', options?.mode);
+
   /**
    * We have to use Stackblitz web containers here (node template), due
    * to multiple issues with Vite, Vue/Vue Router and Vue 3's script setup.
diff --git a/static/code/stackblitz/angular/app.module.ts b/static/code/stackblitz/angular/app.module.ts
index 7f6894ce6af..dcee64f417e 100644
--- a/static/code/stackblitz/angular/app.module.ts
+++ b/static/code/stackblitz/angular/app.module.ts
@@ -9,7 +9,9 @@ import { AppComponent } from './app.component';
 import { ExampleComponent } from './example.component';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
+    mode: '{{ MODE }}'
+  })],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })
diff --git a/static/code/stackblitz/html/index.html b/static/code/stackblitz/html/index.html
index 8a59c2afc0f..1ba72a98949 100644
--- a/static/code/stackblitz/html/index.html
+++ b/static/code/stackblitz/html/index.html
@@ -3,6 +3,14 @@
 <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>
diff --git a/static/code/stackblitz/html/index.withContent.html b/static/code/stackblitz/html/index.withContent.html
index 3cd31834675..c13b3063615 100644
--- a/static/code/stackblitz/html/index.withContent.html
+++ b/static/code/stackblitz/html/index.withContent.html
@@ -3,6 +3,14 @@
 <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>
diff --git a/static/code/stackblitz/react/app.tsx b/static/code/stackblitz/react/app.tsx
index 7ba9c8b93c7..17430586f74 100644
--- a/static/code/stackblitz/react/app.tsx
+++ b/static/code/stackblitz/react/app.tsx
@@ -22,7 +22,9 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact();
+setupIonicReact({
+  mode: '{{ MODE }}',
+});
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/react/app.withContent.tsx b/static/code/stackblitz/react/app.withContent.tsx
index d90d8f74ffe..e1f307d03cd 100644
--- a/static/code/stackblitz/react/app.withContent.tsx
+++ b/static/code/stackblitz/react/app.withContent.tsx
@@ -22,7 +22,9 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact();
+setupIonicReact({
+  mode: '{{ MODE }}',
+});
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/vue/main.ts b/static/code/stackblitz/vue/main.ts
index 207b1ad84c6..c8650146df9 100644
--- a/static/code/stackblitz/vue/main.ts
+++ b/static/code/stackblitz/vue/main.ts
@@ -22,4 +22,6 @@ import '@ionic/vue/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-createApp(App).use(IonicVue).mount('#app');
+createApp(App).use(IonicVue, {
+  mode: '{{ MODE }}'
+}).mount('#app');

From f9285d2bc47cb595e5c01ff45172475045dede7d Mon Sep 17 00:00:00 2001
From: Julian Claus <kontakt@julian-claus.de>
Date: Thu, 13 Oct 2022 20:00:16 +0200
Subject: [PATCH 099/469] docs(developing): fix sdk uppercase directory (#2578)

---
 docs/developing/android.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/developing/android.md b/docs/developing/android.md
index 2aa530be170..0e27fa8f624 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -48,11 +48,19 @@ In `~/.bashrc`, `~/.bash_profile`, or similar shell startup scripts, make the fo
 
 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/Library/Android/sdk
+   $ export ANDROID_SDK_ROOT=$HOME/Android/Sdk
    ```
 
-1. 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>.
+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

From 0614e9f1015861cb8c55334600d203c26f3fa163 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 14 Oct 2022 11:05:27 -0500
Subject: [PATCH 100/469] docs(textarea): add playgrounds (#2598)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 docs/api/textarea.md                          | 310 ++----------------
 static/usage/textarea/autogrow/angular.md     |   7 +
 static/usage/textarea/autogrow/demo.html      |  38 +++
 static/usage/textarea/autogrow/index.md       |  12 +
 static/usage/textarea/autogrow/javascript.md  |   7 +
 static/usage/textarea/autogrow/react.md       |  16 +
 static/usage/textarea/autogrow/vue.md         |  18 +
 static/usage/textarea/basic/angular.md        |  16 +
 static/usage/textarea/basic/demo.html         |  43 +++
 static/usage/textarea/basic/index.md          |  12 +
 static/usage/textarea/basic/javascript.md     |  16 +
 static/usage/textarea/basic/react.md          |  23 ++
 static/usage/textarea/basic/vue.md            |  27 ++
 .../usage/textarea/clear-on-edit/angular.md   |   6 +
 static/usage/textarea/clear-on-edit/demo.html |  33 ++
 static/usage/textarea/clear-on-edit/index.md  |  12 +
 .../textarea/clear-on-edit/javascript.md      |   6 +
 static/usage/textarea/clear-on-edit/react.md  |  13 +
 static/usage/textarea/clear-on-edit/vue.md    |  17 +
 .../theming/angular/example_component_css.md  |  10 +
 .../theming/angular/example_component_html.md |   3 +
 static/usage/textarea/theming/demo.html       |  38 +++
 static/usage/textarea/theming/index.md        |  32 ++
 static/usage/textarea/theming/javascript.md   |  14 +
 .../usage/textarea/theming/react/main_css.md  |  10 +
 .../usage/textarea/theming/react/main_tsx.md  |  11 +
 static/usage/textarea/theming/vue.md          |  25 ++
 27 files changed, 491 insertions(+), 284 deletions(-)
 create mode 100644 static/usage/textarea/autogrow/angular.md
 create mode 100644 static/usage/textarea/autogrow/demo.html
 create mode 100644 static/usage/textarea/autogrow/index.md
 create mode 100644 static/usage/textarea/autogrow/javascript.md
 create mode 100644 static/usage/textarea/autogrow/react.md
 create mode 100644 static/usage/textarea/autogrow/vue.md
 create mode 100644 static/usage/textarea/basic/angular.md
 create mode 100644 static/usage/textarea/basic/demo.html
 create mode 100644 static/usage/textarea/basic/index.md
 create mode 100644 static/usage/textarea/basic/javascript.md
 create mode 100644 static/usage/textarea/basic/react.md
 create mode 100644 static/usage/textarea/basic/vue.md
 create mode 100644 static/usage/textarea/clear-on-edit/angular.md
 create mode 100644 static/usage/textarea/clear-on-edit/demo.html
 create mode 100644 static/usage/textarea/clear-on-edit/index.md
 create mode 100644 static/usage/textarea/clear-on-edit/javascript.md
 create mode 100644 static/usage/textarea/clear-on-edit/react.md
 create mode 100644 static/usage/textarea/clear-on-edit/vue.md
 create mode 100644 static/usage/textarea/theming/angular/example_component_css.md
 create mode 100644 static/usage/textarea/theming/angular/example_component_html.md
 create mode 100644 static/usage/textarea/theming/demo.html
 create mode 100644 static/usage/textarea/theming/index.md
 create mode 100644 static/usage/textarea/theming/javascript.md
 create mode 100644 static/usage/textarea/theming/react/main_css.md
 create mode 100644 static/usage/textarea/theming/react/main_tsx.md
 create mode 100644 static/usage/textarea/theming/vue.md

diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 9f225b49a71..a10897f1d40 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-textarea"
-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/textarea/props.md';
 import Events from '@site/static/auto-generated/textarea/events.md';
 import Methods from '@site/static/auto-generated/textarea/methods.md';
@@ -22,314 +17,61 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 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.
 
-## Interfaces
-
-### TextareaChangeEventDetail
-
-```typescript
-interface TextareaChangeEventDetail {
-  value?: string | null;
-}
-```
-
-### TextareaCustomEvent
+## Basic Usage
 
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+import BasicPlayground from '@site/static/usage/textarea/basic/index.md';
 
-```typescript
-interface TextareaCustomEvent extends CustomEvent {
-  detail: TextareaChangeEventDetail;
-  target: HTMLIonTextareaElement;
-}
-```
+<BasicPlayground />
 
+## Autogrow
 
+When the `autoGrow` property is set to `true`, the textarea will grow and shrink based on its contents.
 
-## Usage
+import AutogrowPlayground from '@site/static/usage/textarea/autogrow/index.md';
 
-<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' }]}>
+<AutogrowPlayground />
 
-<TabItem value="angular">
+## Clear on Edit
 
-```html
-<!-- Default textarea -->
-<ion-textarea></ion-textarea>
+Setting the `clearOnEdit` property to `true` will clear the textarea after it has been blurred and then typed in again.
 
-<!-- Textarea in an item with a placeholder -->
-<ion-item>
-  <ion-textarea placeholder="Enter more information here..."></ion-textarea>
-</ion-item>
+import ClearOnEditPlayground from '@site/static/usage/textarea/clear-on-edit/index.md';
 
-<!-- Textarea in an item with a floating label -->
-<ion-item>
-  <ion-label position="floating">Description</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
+<ClearOnEditPlayground />
 
-<!-- Disabled and readonly textarea in an item with a stacked label -->
-<ion-item>
-  <ion-label position="stacked">Summary</ion-label>
-  <ion-textarea
-    disabled
-    readonly
-    value="Ionic enables developers to build performant, high-quality mobile apps.">
-  </ion-textarea>
-</ion-item>
-
-<!-- Textarea that clears the value on edit -->
-<ion-item>
-  <ion-label>Comment</ion-label>
-  <ion-textarea clearOnEdit="true"></ion-textarea>
-</ion-item>
-
-<!-- Textarea with custom number of rows and cols -->
-<ion-item>
-  <ion-label>Notes</ion-label>
-  <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
-</ion-item>
-```
+## Theming
 
+import ThemingPlayground from '@site/static/usage/textarea/theming/index.md';
 
-</TabItem>
+<ThemingPlayground />
 
+## Interfaces
 
-<TabItem value="javascript">
-
-```html
-<!-- Default textarea -->
-<ion-textarea></ion-textarea>
-
-<!-- Textarea in an item with a placeholder -->
-<ion-item>
-  <ion-textarea placeholder="Enter more information here..."></ion-textarea>
-</ion-item>
-
-<!-- Textarea in an item with a floating label -->
-<ion-item>
-  <ion-label position="floating">Description</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- Disabled and readonly textarea in an item with a stacked label -->
-<ion-item>
-  <ion-label position="stacked">Summary</ion-label>
-  <ion-textarea
-    disabled
-    readonly
-    value="Ionic enables developers to build performant, high-quality mobile apps.">
-  </ion-textarea>
-</ion-item>
-
-<!-- Textarea that clears the value on edit -->
-<ion-item>
-  <ion-label>Comment</ion-label>
-  <ion-textarea clear-on-edit="true"></ion-textarea>
-</ion-item>
+### TextareaChangeEventDetail
 
-<!-- Textarea with custom number of rows and cols -->
-<ion-item>
-  <ion-label>Notes</ion-label>
-  <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
-</ion-item>
+```typescript
+interface TextareaChangeEventDetail {
+  value?: string | null;
+}
 ```
 
+### TextareaCustomEvent
 
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonTextarea, IonItem, IonLabel, IonItemDivider, IonList } from '@ionic/react';
-
-export const TextAreaExamples: React.FC = () => {
-  const [text, setText] = useState<string>();
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>TextArea Examples</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        <IonList>
-          <IonItemDivider>Default textarea</IonItemDivider>          
-          <IonItem>
-            <IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
-          </IonItem>
-
-          <IonItemDivider>Textarea in an item with a placeholder</IonItemDivider>
-          <IonItem>
-            <IonTextarea placeholder="Enter more information here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
-          </IonItem>
-
-          <IonItemDivider>Textarea in an item with a floating label</IonItemDivider>
-          <IonItem>
-            <IonLabel position="floating">Description</IonLabel>
-            <IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
-          </IonItem>
-
-          <IonItemDivider>Disabled and readonly textarea in an item with a stacked label</IonItemDivider>
-          <IonItem>
-            <IonLabel position="stacked">Summary</IonLabel>
-            <IonTextarea
-              disabled
-              readonly
-              value={text} onIonChange={e => setText(e.detail.value!)}>
-            </IonTextarea>
-          </IonItem>
-
-          <IonItemDivider>Textarea that clears the value on edit</IonItemDivider>
-          <IonItem>
-            <IonLabel>Comment</IonLabel>
-            <IonTextarea clearOnEdit={true} value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
-          </IonItem>
-
-          <IonItemDivider>Textarea with custom number of rows and cols</IonItemDivider>
-          <IonItem>
-            <IonLabel>Notes</IonLabel>
-            <IonTextarea rows={6} cols={20} placeholder="Enter any notes here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
-          </IonItem>
-        </IonList>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
 
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'textarea-example',
-  styleUrl: 'textarea-example.css'
-})
-export class TextareaExample {
-  render() {
-    return [
-      // Default textarea
-      <ion-textarea></ion-textarea>,
-
-      // Textarea in an item with a placeholder
-      <ion-item>
-        <ion-textarea placeholder="Enter more information here..."></ion-textarea>
-      </ion-item>,
-
-      // Textarea in an item with a floating label
-      <ion-item>
-        <ion-label position="floating">Description</ion-label>
-        <ion-textarea></ion-textarea>
-      </ion-item>,
-
-      // Disabled and readonly textarea in an item with a stacked label
-      <ion-item>
-        <ion-label position="stacked">Summary</ion-label>
-        <ion-textarea
-          disabled
-          readonly
-          value="Ionic enables developers to build performant, high-quality mobile apps.">
-        </ion-textarea>
-      </ion-item>,
-
-      // Textarea that clears the value on edit
-      <ion-item>
-        <ion-label>Comment</ion-label>
-        <ion-textarea clearOnEdit={true}></ion-textarea>
-      </ion-item>,
-
-      // Textarea with custom number of rows and cols
-      <ion-item>
-        <ion-label>Notes</ion-label>
-        <ion-textarea rows={6} cols={20} placeholder="Enter any notes here..."></ion-textarea>
-      </ion-item>
-    ];
-  }
+```typescript
+interface TextareaCustomEvent extends CustomEvent {
+  detail: TextareaChangeEventDetail;
+  target: HTMLIonTextareaElement;
 }
 ```
 
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default textarea -->
-  <ion-textarea></ion-textarea>
-
-  <!-- Textarea in an item with a placeholder -->
-  <ion-item>
-    <ion-textarea placeholder="Enter more information here..."></ion-textarea>
-  </ion-item>
-
-  <!-- Textarea in an item with a floating label -->
-  <ion-item>
-    <ion-label position="floating">Description</ion-label>
-    <ion-textarea></ion-textarea>
-  </ion-item>
-
-  <!-- Disabled and readonly textarea in an item with a stacked label -->
-  <ion-item>
-    <ion-label position="stacked">Summary</ion-label>
-    <ion-textarea
-      disabled
-      readonly
-      value="Ionic enables developers to build performant, high-quality mobile apps.">
-    </ion-textarea>
-  </ion-item>
-
-  <!-- Textarea that clears the value on edit -->
-  <ion-item>
-    <ion-label>Comment</ion-label>
-    <ion-textarea clear-on-edit="true"></ion-textarea>
-  </ion-item>
-
-  <!-- Textarea with custom number of rows and cols -->
-  <ion-item>
-    <ion-label>Notes</ion-label>
-    <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
-  </ion-item>
-</template>
-
-<script>
-import { IonItem, IonLabel, IonTextarea } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonItem, IonLabel, IonTextarea }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
diff --git a/static/usage/textarea/autogrow/angular.md b/static/usage/textarea/autogrow/angular.md
new file mode 100644
index 00000000000..5ff7394eec0
--- /dev/null
+++ b/static/usage/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/textarea/autogrow/demo.html b/static/usage/textarea/autogrow/demo.html
new file mode 100644
index 00000000000..e0b567b50cf
--- /dev/null
+++ b/static/usage/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/textarea/autogrow/index.md b/static/usage/textarea/autogrow/index.md
new file mode 100644
index 00000000000..534b8c46605
--- /dev/null
+++ b/static/usage/textarea/autogrow/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="small"
+  code={{ javascript, react, vue, angular }}
+  src="usage/textarea/autogrow/demo.html"
+/>
\ No newline at end of file
diff --git a/static/usage/textarea/autogrow/javascript.md b/static/usage/textarea/autogrow/javascript.md
new file mode 100644
index 00000000000..bea62987f5e
--- /dev/null
+++ b/static/usage/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/textarea/autogrow/react.md b/static/usage/textarea/autogrow/react.md
new file mode 100644
index 00000000000..28d11b28efc
--- /dev/null
+++ b/static/usage/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/textarea/autogrow/vue.md b/static/usage/textarea/autogrow/vue.md
new file mode 100644
index 00000000000..824ada24909
--- /dev/null
+++ b/static/usage/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/textarea/basic/angular.md b/static/usage/textarea/basic/angular.md
new file mode 100644
index 00000000000..82392c0f2bc
--- /dev/null
+++ b/static/usage/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/textarea/basic/demo.html b/static/usage/textarea/basic/demo.html
new file mode 100644
index 00000000000..e6e9d69d0af
--- /dev/null
+++ b/static/usage/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/textarea/basic/index.md b/static/usage/textarea/basic/index.md
new file mode 100644
index 00000000000..445d0639fe4
--- /dev/null
+++ b/static/usage/textarea/basic/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="250px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/textarea/basic/demo.html"
+/>
\ No newline at end of file
diff --git a/static/usage/textarea/basic/javascript.md b/static/usage/textarea/basic/javascript.md
new file mode 100644
index 00000000000..fc1bdf3b50f
--- /dev/null
+++ b/static/usage/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/textarea/basic/react.md b/static/usage/textarea/basic/react.md
new file mode 100644
index 00000000000..37c11aa5137
--- /dev/null
+++ b/static/usage/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/textarea/basic/vue.md b/static/usage/textarea/basic/vue.md
new file mode 100644
index 00000000000..df9f8873ade
--- /dev/null
+++ b/static/usage/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/textarea/clear-on-edit/angular.md b/static/usage/textarea/clear-on-edit/angular.md
new file mode 100644
index 00000000000..409362189a3
--- /dev/null
+++ b/static/usage/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/textarea/clear-on-edit/demo.html b/static/usage/textarea/clear-on-edit/demo.html
new file mode 100644
index 00000000000..03c822fddfa
--- /dev/null
+++ b/static/usage/textarea/clear-on-edit/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>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
new file mode 100644
index 00000000000..87850fcc291
--- /dev/null
+++ b/static/usage/textarea/clear-on-edit/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="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/clear-on-edit/javascript.md b/static/usage/textarea/clear-on-edit/javascript.md
new file mode 100644
index 00000000000..1982d982013
--- /dev/null
+++ b/static/usage/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/textarea/clear-on-edit/react.md b/static/usage/textarea/clear-on-edit/react.md
new file mode 100644
index 00000000000..62b8b7dcf7b
--- /dev/null
+++ b/static/usage/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/textarea/clear-on-edit/vue.md b/static/usage/textarea/clear-on-edit/vue.md
new file mode 100644
index 00000000000..04deb37bf1e
--- /dev/null
+++ b/static/usage/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/textarea/theming/angular/example_component_css.md b/static/usage/textarea/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..f36f2d0f144
--- /dev/null
+++ b/static/usage/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/textarea/theming/angular/example_component_html.md b/static/usage/textarea/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..639c4e22a1f
--- /dev/null
+++ b/static/usage/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/textarea/theming/demo.html b/static/usage/textarea/theming/demo.html
new file mode 100644
index 00000000000..ccdec7dc9de
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/textarea/theming/index.md b/static/usage/textarea/theming/index.md
new file mode 100644
index 00000000000..a05024e9c70
--- /dev/null
+++ b/static/usage/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/textarea/theming/demo.html"
+/>
diff --git a/static/usage/textarea/theming/javascript.md b/static/usage/textarea/theming/javascript.md
new file mode 100644
index 00000000000..be7bfef12a7
--- /dev/null
+++ b/static/usage/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/textarea/theming/react/main_css.md b/static/usage/textarea/theming/react/main_css.md
new file mode 100644
index 00000000000..f36f2d0f144
--- /dev/null
+++ b/static/usage/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/textarea/theming/react/main_tsx.md b/static/usage/textarea/theming/react/main_tsx.md
new file mode 100644
index 00000000000..2f5acbf2fdc
--- /dev/null
+++ b/static/usage/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/textarea/theming/vue.md b/static/usage/textarea/theming/vue.md
new file mode 100644
index 00000000000..b8f6639d8e8
--- /dev/null
+++ b/static/usage/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>
+```

From 4d86d21b48f5757d5988dec75d7ce92dcfb6caf2 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 14 Oct 2022 17:27:56 -0400
Subject: [PATCH 101/469] docs(ripple-effect): add component playgrounds
 (#2608)

---
 docs/api/ripple-effect.md                     | 243 +-----------------
 .../basic/angular/example_component_css.md    |  43 ++++
 .../basic/angular/example_component_html.md   |  17 ++
 static/usage/ripple-effect/basic/demo.html    |  82 ++++++
 static/usage/ripple-effect/basic/index.md     |  32 +++
 .../usage/ripple-effect/basic/javascript.md   |  61 +++++
 .../ripple-effect/basic/react/main_css.md     |  43 ++++
 .../ripple-effect/basic/react/main_tsx.md     |  27 ++
 static/usage/ripple-effect/basic/vue.md       |  72 ++++++
 .../angular/example_component_css.md          |  44 ++++
 .../angular/example_component_html.md         |  15 ++
 .../usage/ripple-effect/customizing/demo.html |  81 ++++++
 .../usage/ripple-effect/customizing/index.md  |  32 +++
 .../ripple-effect/customizing/javascript.md   |  60 +++++
 .../customizing/react/main_css.md             |  44 ++++
 .../customizing/react/main_tsx.md             |  25 ++
 static/usage/ripple-effect/customizing/vue.md |  71 +++++
 .../type/angular/example_component_css.md     |  44 ++++
 .../type/angular/example_component_html.md    |  15 ++
 static/usage/ripple-effect/type/demo.html     |  81 ++++++
 static/usage/ripple-effect/type/index.md      |  32 +++
 static/usage/ripple-effect/type/javascript.md |  60 +++++
 .../ripple-effect/type/react/main_css.md      |  44 ++++
 .../ripple-effect/type/react/main_tsx.md      |  25 ++
 static/usage/ripple-effect/type/vue.md        |  71 +++++
 25 files changed, 1135 insertions(+), 229 deletions(-)
 create mode 100644 static/usage/ripple-effect/basic/angular/example_component_css.md
 create mode 100644 static/usage/ripple-effect/basic/angular/example_component_html.md
 create mode 100644 static/usage/ripple-effect/basic/demo.html
 create mode 100644 static/usage/ripple-effect/basic/index.md
 create mode 100644 static/usage/ripple-effect/basic/javascript.md
 create mode 100644 static/usage/ripple-effect/basic/react/main_css.md
 create mode 100644 static/usage/ripple-effect/basic/react/main_tsx.md
 create mode 100644 static/usage/ripple-effect/basic/vue.md
 create mode 100644 static/usage/ripple-effect/customizing/angular/example_component_css.md
 create mode 100644 static/usage/ripple-effect/customizing/angular/example_component_html.md
 create mode 100644 static/usage/ripple-effect/customizing/demo.html
 create mode 100644 static/usage/ripple-effect/customizing/index.md
 create mode 100644 static/usage/ripple-effect/customizing/javascript.md
 create mode 100644 static/usage/ripple-effect/customizing/react/main_css.md
 create mode 100644 static/usage/ripple-effect/customizing/react/main_tsx.md
 create mode 100644 static/usage/ripple-effect/customizing/vue.md
 create mode 100644 static/usage/ripple-effect/type/angular/example_component_css.md
 create mode 100644 static/usage/ripple-effect/type/angular/example_component_html.md
 create mode 100644 static/usage/ripple-effect/type/demo.html
 create mode 100644 static/usage/ripple-effect/type/index.md
 create mode 100644 static/usage/ripple-effect/type/javascript.md
 create mode 100644 static/usage/ripple-effect/type/react/main_css.md
 create mode 100644 static/usage/ripple-effect/type/react/main_tsx.md
 create mode 100644 static/usage/ripple-effect/type/vue.md

diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 690bee9ffbc..1d48afd5cc1 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-ripple-effect"
-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/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';
@@ -22,246 +17,36 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-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 to any component.
-
-It's important to note that the parent should have [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) because the ripple effect is absolutely positioned and will cover the closest parent with relative positioning. The parent element should also be given the `ion-activatable` class, which tells the ripple effect that the element is clickable.
-
-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, add an `"unbounded"` type. It's recommended to add `overflow: hidden` to the parent element to avoid the ripple overflowing its container, especially with an unbounded ripple.
-
-
-
-## 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-app>
-  <ion-content>
-    <div class="ion-activatable ripple-parent">
-      A plain div with a bounded ripple effect
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-
-    <button class="ion-activatable ripple-parent">
-      A button with a bounded ripple effect
-      <ion-ripple-effect></ion-ripple-effect>
-    </button>
-
-    <div class="ion-activatable ripple-parent">
-      A plain div with an unbounded ripple effect
-      <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-    </div>
-
-    <button class="ion-activatable ripple-parent">
-      A button with an unbounded ripple effect
-      <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-    </button>
-  </ion-content>
-</ion-app>
-```
-
-```css
-.ripple-parent {
-  position: relative;
-  overflow: hidden;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-app>
-  <ion-content>
-    <div class="ion-activatable ripple-parent">
-      A plain div with a bounded ripple effect
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-
-    <button class="ion-activatable ripple-parent">
-      A button with a bounded ripple effect
-      <ion-ripple-effect></ion-ripple-effect>
-    </button>
-
-    <div class="ion-activatable ripple-parent">
-      A plain div with an unbounded ripple effect
-      <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-    </div>
-
-    <button class="ion-activatable ripple-parent">
-      A button with an unbounded ripple effect
-      <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-    </button>
-  </ion-content>
-</ion-app>
-```
-
-```css
-.ripple-parent {
-  position: relative;
-  overflow: hidden;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonApp, IonContent, IonRippleEffect } from '@ionic/react';
-import './RippleEffectExample.css';
-
-export const RippleExample: React.FC = () => (
-  <IonApp>
-   <IonContent>
-      <div className="ion-activatable ripple-parent">
-        A plain div with a bounded ripple effect
-        <IonRippleEffect></IonRippleEffect>
-      </div>
-
-      <button className="ion-activatable ripple-parent">
-        A button with a bounded ripple effect
-        <IonRippleEffect></IonRippleEffect>
-      </button>
-
-      <div className="ion-activatable ripple-parent">
-        A plain div with an unbounded ripple effect
-        <IonRippleEffect type="unbounded"></IonRippleEffect>
-      </div>
-
-      <button className="ion-activatable ripple-parent">
-        A button with an unbounded ripple effect
-        <IonRippleEffect type="unbounded"></IonRippleEffect>
-      </button>
-    </IonContent>
-  </IonApp>
-);
-```
-
-```css
-.ripple-parent {
-  position: relative;
-  overflow: hidden;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
 
-@Component({
-  tag: 'ripple-effect-example',
-  styleUrl: 'ripple-effect-example.css'
-})
-export class RippleEffectExample {
-  render() {
-    return [
-      <ion-app>
-        <ion-content>
-          <div class="ion-activatable ripple-parent">
-            A plain div with a bounded ripple effect
-            <ion-ripple-effect></ion-ripple-effect>
-          </div>
+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.
 
-          <button class="ion-activatable ripple-parent">
-            A button with a bounded ripple effect
-            <ion-ripple-effect></ion-ripple-effect>
-          </button>
+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.
 
-          <div class="ion-activatable ripple-parent">
-            A plain div with an unbounded ripple effect
-            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-          </div>
 
-          <button class="ion-activatable ripple-parent">
-            A button with an unbounded ripple effect
-            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-          </button>
-        </ion-content>
-      </ion-app>
-    ];
-  }
-}
-```
+## Basic Usage
 
-```css
-.ripple-parent {
-  position: relative;
-  overflow: hidden;
-}
-```
+import Basic from '@site/static/usage/ripple-effect/basic/index.md';
 
-</TabItem>
+<Basic />
 
 
-<TabItem value="vue">
+## Type
 
-```html
-<template>
-  <ion-app>
-    <ion-content>
-      <div class="ion-activatable ripple-parent">
-        A plain div with a bounded ripple effect
-        <ion-ripple-effect></ion-ripple-effect>
-      </div>
+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"`.
 
-      <button class="ion-activatable ripple-parent">
-        A button with a bounded ripple effect
-        <ion-ripple-effect></ion-ripple-effect>
-      </button>
+import Type from '@site/static/usage/ripple-effect/type/index.md';
 
-      <div class="ion-activatable ripple-parent">
-        A plain div with an unbounded ripple effect
-        <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-      </div>
+<Type />
 
-      <button class="ion-activatable ripple-parent">
-        A button with an unbounded ripple effect
-        <ion-ripple-effect type="unbounded"></ion-ripple-effect>
-      </button>
-    </ion-content>
-  </ion-app>
-</template>
 
-<style>
-  .ripple-parent {
-    position: relative;
-    overflow: hidden;
-  }
-</style>
+## Customizing
 
-<script>
-import { IonApp, IonContent, IonRippleEffect } from '@ionic/vue';
-import { defineComponent } from 'vue';
+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.
 
-export default defineComponent({
-  components: { IonApp, IonContent, IonRippleEffect }
-});
-</script>
-```
+import Customizing from '@site/static/usage/ripple-effect/customizing/index.md';
 
-</TabItem>
+<Customizing />
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -279,4 +64,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/ripple-effect/basic/angular/example_component_css.md b/static/usage/ripple-effect/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..792bc105ff8
--- /dev/null
+++ b/static/usage/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/ripple-effect/basic/angular/example_component_html.md b/static/usage/ripple-effect/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f46a434abac
--- /dev/null
+++ b/static/usage/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/ripple-effect/basic/demo.html b/static/usage/ripple-effect/basic/demo.html
new file mode 100644
index 00000000000..834f5269328
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/ripple-effect/basic/index.md b/static/usage/ripple-effect/basic/index.md
new file mode 100644
index 00000000000..1e8e8eabb01
--- /dev/null
+++ b/static/usage/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/ripple-effect/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/ripple-effect/basic/javascript.md b/static/usage/ripple-effect/basic/javascript.md
new file mode 100644
index 00000000000..14b645af763
--- /dev/null
+++ b/static/usage/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/ripple-effect/basic/react/main_css.md b/static/usage/ripple-effect/basic/react/main_css.md
new file mode 100644
index 00000000000..792bc105ff8
--- /dev/null
+++ b/static/usage/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/ripple-effect/basic/react/main_tsx.md b/static/usage/ripple-effect/basic/react/main_tsx.md
new file mode 100644
index 00000000000..18bfb66c6d8
--- /dev/null
+++ b/static/usage/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/ripple-effect/basic/vue.md b/static/usage/ripple-effect/basic/vue.md
new file mode 100644
index 00000000000..e5270056c0c
--- /dev/null
+++ b/static/usage/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/ripple-effect/customizing/angular/example_component_css.md b/static/usage/ripple-effect/customizing/angular/example_component_css.md
new file mode 100644
index 00000000000..521a109d099
--- /dev/null
+++ b/static/usage/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/ripple-effect/customizing/angular/example_component_html.md b/static/usage/ripple-effect/customizing/angular/example_component_html.md
new file mode 100644
index 00000000000..0fa38298eb5
--- /dev/null
+++ b/static/usage/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/ripple-effect/customizing/demo.html b/static/usage/ripple-effect/customizing/demo.html
new file mode 100644
index 00000000000..5c7037309a6
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/ripple-effect/customizing/index.md b/static/usage/ripple-effect/customizing/index.md
new file mode 100644
index 00000000000..eee4728fce1
--- /dev/null
+++ b/static/usage/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/ripple-effect/customizing/demo.html"
+  size="175px"
+/>
diff --git a/static/usage/ripple-effect/customizing/javascript.md b/static/usage/ripple-effect/customizing/javascript.md
new file mode 100644
index 00000000000..89f56b0d968
--- /dev/null
+++ b/static/usage/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/ripple-effect/customizing/react/main_css.md b/static/usage/ripple-effect/customizing/react/main_css.md
new file mode 100644
index 00000000000..521a109d099
--- /dev/null
+++ b/static/usage/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/ripple-effect/customizing/react/main_tsx.md b/static/usage/ripple-effect/customizing/react/main_tsx.md
new file mode 100644
index 00000000000..76f36a67843
--- /dev/null
+++ b/static/usage/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/ripple-effect/customizing/vue.md b/static/usage/ripple-effect/customizing/vue.md
new file mode 100644
index 00000000000..d3ea639b68a
--- /dev/null
+++ b/static/usage/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/ripple-effect/type/angular/example_component_css.md b/static/usage/ripple-effect/type/angular/example_component_css.md
new file mode 100644
index 00000000000..e76413cf0ff
--- /dev/null
+++ b/static/usage/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/ripple-effect/type/angular/example_component_html.md b/static/usage/ripple-effect/type/angular/example_component_html.md
new file mode 100644
index 00000000000..0e764c2e79a
--- /dev/null
+++ b/static/usage/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/ripple-effect/type/demo.html b/static/usage/ripple-effect/type/demo.html
new file mode 100644
index 00000000000..e6ae1be1633
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/ripple-effect/type/index.md b/static/usage/ripple-effect/type/index.md
new file mode 100644
index 00000000000..a16b691acf6
--- /dev/null
+++ b/static/usage/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/ripple-effect/type/demo.html"
+  size="175px"
+/>
diff --git a/static/usage/ripple-effect/type/javascript.md b/static/usage/ripple-effect/type/javascript.md
new file mode 100644
index 00000000000..331612579e2
--- /dev/null
+++ b/static/usage/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/ripple-effect/type/react/main_css.md b/static/usage/ripple-effect/type/react/main_css.md
new file mode 100644
index 00000000000..e76413cf0ff
--- /dev/null
+++ b/static/usage/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/ripple-effect/type/react/main_tsx.md b/static/usage/ripple-effect/type/react/main_tsx.md
new file mode 100644
index 00000000000..ce7a1c6364c
--- /dev/null
+++ b/static/usage/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/ripple-effect/type/vue.md b/static/usage/ripple-effect/type/vue.md
new file mode 100644
index 00000000000..e233fe60d9e
--- /dev/null
+++ b/static/usage/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>
+```

From 2d4d2d6216cb5ea61ced4d7a60f653ad6ad38d9a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 17 Oct 2022 09:21:19 -0400
Subject: [PATCH 102/469] docs(grid): add components playgrounds (#2596)

---
 docs/api/col.md                               |   18 +-
 docs/api/grid.md                              | 1117 +++--------------
 docs/api/row.md                               |   20 +-
 docs/core-concepts/cross-platform.md          |    4 +-
 docs/layout/grid.md                           |  512 --------
 sidebars.js                                   |   11 +-
 .../basic/angular/example_component_css.md    |    8 +
 .../basic/angular/example_component_html.md   |   37 +
 static/usage/grid/basic/demo.html             |   77 ++
 static/usage/grid/basic/index.md              |   32 +
 static/usage/grid/basic/javascript.md         |   46 +
 static/usage/grid/basic/react/main_css.md     |    8 +
 static/usage/grid/basic/react/main_tsx.md     |   49 +
 static/usage/grid/basic/vue.md                |   57 +
 .../angular/example_component_css.md          |   12 +
 .../angular/example_component_html.md         |   11 +
 .../grid/customizing/column-number/demo.html  |   53 +
 .../grid/customizing/column-number/index.md   |   32 +
 .../customizing/column-number/javascript.md   |   24 +
 .../column-number/react/main_css.md           |   12 +
 .../column-number/react/main_tsx.md           |   23 +
 .../grid/customizing/column-number/vue.md     |   35 +
 .../padding/angular/example_component_css.md  |   26 +
 .../padding/angular/example_component_html.md |    9 +
 .../usage/grid/customizing/padding/demo.html  |   65 +
 .../usage/grid/customizing/padding/index.md   |   32 +
 .../grid/customizing/padding/javascript.md    |   36 +
 .../customizing/padding/react/main_css.md     |   26 +
 .../customizing/padding/react/main_tsx.md     |   21 +
 static/usage/grid/customizing/padding/vue.md  |   47 +
 .../width/angular/example_component_css.md    |   18 +
 .../width/angular/example_component_html.md   |    9 +
 static/usage/grid/customizing/width/demo.html |   56 +
 static/usage/grid/customizing/width/index.md  |   32 +
 .../grid/customizing/width/javascript.md      |   28 +
 .../grid/customizing/width/react/main_css.md  |   18 +
 .../grid/customizing/width/react/main_tsx.md  |   19 +
 static/usage/grid/customizing/width/vue.md    |   39 +
 .../fixed/angular/example_component_css.md    |    8 +
 .../fixed/angular/example_component_html.md   |    9 +
 static/usage/grid/fixed/demo.html             |   48 +
 static/usage/grid/fixed/index.md              |   32 +
 static/usage/grid/fixed/javascript.md         |   18 +
 static/usage/grid/fixed/react/main_css.md     |    8 +
 static/usage/grid/fixed/react/main_tsx.md     |   19 +
 static/usage/grid/fixed/vue.md                |   29 +
 .../angular/example_component_css.md          |    8 +
 .../angular/example_component_html.md         |   61 +
 .../usage/grid/horizontal-alignment/demo.html |  100 ++
 .../usage/grid/horizontal-alignment/index.md  |   32 +
 .../grid/horizontal-alignment/javascript.md   |   70 ++
 .../horizontal-alignment/react/main_css.md    |    8 +
 .../horizontal-alignment/react/main_tsx.md    |   73 ++
 static/usage/grid/horizontal-alignment/vue.md |   81 ++
 .../angular/example_component_css.md          |    8 +
 .../angular/example_component_html.md         |   30 +
 static/usage/grid/offset-responsive/demo.html |   70 ++
 static/usage/grid/offset-responsive/index.md  |   32 +
 .../grid/offset-responsive/javascript.md      |   39 +
 .../grid/offset-responsive/react/main_css.md  |    8 +
 .../grid/offset-responsive/react/main_tsx.md  |   42 +
 static/usage/grid/offset-responsive/vue.md    |   50 +
 .../offset/angular/example_component_css.md   |    8 +
 .../offset/angular/example_component_html.md  |   29 +
 static/usage/grid/offset/demo.html            |   69 +
 static/usage/grid/offset/index.md             |   32 +
 static/usage/grid/offset/javascript.md        |   38 +
 static/usage/grid/offset/react/main_css.md    |    8 +
 static/usage/grid/offset/react/main_tsx.md    |   41 +
 static/usage/grid/offset/vue.md               |   49 +
 .../angular/example_component_css.md          |    8 +
 .../angular/example_component_html.md         |   31 +
 .../usage/grid/push-pull-responsive/demo.html |   71 ++
 .../usage/grid/push-pull-responsive/index.md  |   32 +
 .../grid/push-pull-responsive/javascript.md   |   40 +
 .../push-pull-responsive/react/main_css.md    |    8 +
 .../push-pull-responsive/react/main_tsx.md    |   43 +
 static/usage/grid/push-pull-responsive/vue.md |   51 +
 .../angular/example_component_css.md          |    8 +
 .../angular/example_component_html.md         |   30 +
 static/usage/grid/push-pull/demo.html         |   70 ++
 static/usage/grid/push-pull/index.md          |   32 +
 static/usage/grid/push-pull/javascript.md     |   39 +
 static/usage/grid/push-pull/react/main_css.md |    8 +
 static/usage/grid/push-pull/react/main_tsx.md |   42 +
 static/usage/grid/push-pull/vue.md            |   50 +
 .../angular/example_component_css.md          |   12 +
 .../angular/example_component_html.md         |   34 +
 static/usage/grid/size-auto/demo.html         |   78 ++
 static/usage/grid/size-auto/index.md          |   32 +
 static/usage/grid/size-auto/javascript.md     |   47 +
 static/usage/grid/size-auto/react/main_css.md |   12 +
 static/usage/grid/size-auto/react/main_tsx.md |   46 +
 static/usage/grid/size-auto/vue.md            |   58 +
 .../angular/example_component_css.md          |    8 +
 .../angular/example_component_html.md         |   32 +
 static/usage/grid/size-responsive/demo.html   |   72 ++
 static/usage/grid/size-responsive/index.md    |   32 +
 .../usage/grid/size-responsive/javascript.md  |   41 +
 .../grid/size-responsive/react/main_css.md    |    8 +
 .../grid/size-responsive/react/main_tsx.md    |   44 +
 static/usage/grid/size-responsive/vue.md      |   52 +
 .../size/angular/example_component_css.md     |    8 +
 .../size/angular/example_component_html.md    |   30 +
 static/usage/grid/size/demo.html              |   70 ++
 static/usage/grid/size/index.md               |   32 +
 static/usage/grid/size/javascript.md          |   39 +
 static/usage/grid/size/react/main_css.md      |    8 +
 static/usage/grid/size/react/main_tsx.md      |   42 +
 static/usage/grid/size/vue.md                 |   50 +
 .../angular/example_component_css.md          |    8 +
 .../angular/example_component_html.md         |   64 +
 .../usage/grid/vertical-alignment/demo.html   |  103 ++
 static/usage/grid/vertical-alignment/index.md |   32 +
 .../grid/vertical-alignment/javascript.md     |   73 ++
 .../grid/vertical-alignment/react/main_css.md |    8 +
 .../grid/vertical-alignment/react/main_tsx.md |   76 ++
 static/usage/grid/vertical-alignment/vue.md   |   84 ++
 118 files changed, 4250 insertions(+), 1484 deletions(-)
 delete mode 100644 docs/layout/grid.md
 create mode 100644 static/usage/grid/basic/angular/example_component_css.md
 create mode 100644 static/usage/grid/basic/angular/example_component_html.md
 create mode 100644 static/usage/grid/basic/demo.html
 create mode 100644 static/usage/grid/basic/index.md
 create mode 100644 static/usage/grid/basic/javascript.md
 create mode 100644 static/usage/grid/basic/react/main_css.md
 create mode 100644 static/usage/grid/basic/react/main_tsx.md
 create mode 100644 static/usage/grid/basic/vue.md
 create mode 100644 static/usage/grid/customizing/column-number/angular/example_component_css.md
 create mode 100644 static/usage/grid/customizing/column-number/angular/example_component_html.md
 create mode 100644 static/usage/grid/customizing/column-number/demo.html
 create mode 100644 static/usage/grid/customizing/column-number/index.md
 create mode 100644 static/usage/grid/customizing/column-number/javascript.md
 create mode 100644 static/usage/grid/customizing/column-number/react/main_css.md
 create mode 100644 static/usage/grid/customizing/column-number/react/main_tsx.md
 create mode 100644 static/usage/grid/customizing/column-number/vue.md
 create mode 100644 static/usage/grid/customizing/padding/angular/example_component_css.md
 create mode 100644 static/usage/grid/customizing/padding/angular/example_component_html.md
 create mode 100644 static/usage/grid/customizing/padding/demo.html
 create mode 100644 static/usage/grid/customizing/padding/index.md
 create mode 100644 static/usage/grid/customizing/padding/javascript.md
 create mode 100644 static/usage/grid/customizing/padding/react/main_css.md
 create mode 100644 static/usage/grid/customizing/padding/react/main_tsx.md
 create mode 100644 static/usage/grid/customizing/padding/vue.md
 create mode 100644 static/usage/grid/customizing/width/angular/example_component_css.md
 create mode 100644 static/usage/grid/customizing/width/angular/example_component_html.md
 create mode 100644 static/usage/grid/customizing/width/demo.html
 create mode 100644 static/usage/grid/customizing/width/index.md
 create mode 100644 static/usage/grid/customizing/width/javascript.md
 create mode 100644 static/usage/grid/customizing/width/react/main_css.md
 create mode 100644 static/usage/grid/customizing/width/react/main_tsx.md
 create mode 100644 static/usage/grid/customizing/width/vue.md
 create mode 100644 static/usage/grid/fixed/angular/example_component_css.md
 create mode 100644 static/usage/grid/fixed/angular/example_component_html.md
 create mode 100644 static/usage/grid/fixed/demo.html
 create mode 100644 static/usage/grid/fixed/index.md
 create mode 100644 static/usage/grid/fixed/javascript.md
 create mode 100644 static/usage/grid/fixed/react/main_css.md
 create mode 100644 static/usage/grid/fixed/react/main_tsx.md
 create mode 100644 static/usage/grid/fixed/vue.md
 create mode 100644 static/usage/grid/horizontal-alignment/angular/example_component_css.md
 create mode 100644 static/usage/grid/horizontal-alignment/angular/example_component_html.md
 create mode 100644 static/usage/grid/horizontal-alignment/demo.html
 create mode 100644 static/usage/grid/horizontal-alignment/index.md
 create mode 100644 static/usage/grid/horizontal-alignment/javascript.md
 create mode 100644 static/usage/grid/horizontal-alignment/react/main_css.md
 create mode 100644 static/usage/grid/horizontal-alignment/react/main_tsx.md
 create mode 100644 static/usage/grid/horizontal-alignment/vue.md
 create mode 100644 static/usage/grid/offset-responsive/angular/example_component_css.md
 create mode 100644 static/usage/grid/offset-responsive/angular/example_component_html.md
 create mode 100644 static/usage/grid/offset-responsive/demo.html
 create mode 100644 static/usage/grid/offset-responsive/index.md
 create mode 100644 static/usage/grid/offset-responsive/javascript.md
 create mode 100644 static/usage/grid/offset-responsive/react/main_css.md
 create mode 100644 static/usage/grid/offset-responsive/react/main_tsx.md
 create mode 100644 static/usage/grid/offset-responsive/vue.md
 create mode 100644 static/usage/grid/offset/angular/example_component_css.md
 create mode 100644 static/usage/grid/offset/angular/example_component_html.md
 create mode 100644 static/usage/grid/offset/demo.html
 create mode 100644 static/usage/grid/offset/index.md
 create mode 100644 static/usage/grid/offset/javascript.md
 create mode 100644 static/usage/grid/offset/react/main_css.md
 create mode 100644 static/usage/grid/offset/react/main_tsx.md
 create mode 100644 static/usage/grid/offset/vue.md
 create mode 100644 static/usage/grid/push-pull-responsive/angular/example_component_css.md
 create mode 100644 static/usage/grid/push-pull-responsive/angular/example_component_html.md
 create mode 100644 static/usage/grid/push-pull-responsive/demo.html
 create mode 100644 static/usage/grid/push-pull-responsive/index.md
 create mode 100644 static/usage/grid/push-pull-responsive/javascript.md
 create mode 100644 static/usage/grid/push-pull-responsive/react/main_css.md
 create mode 100644 static/usage/grid/push-pull-responsive/react/main_tsx.md
 create mode 100644 static/usage/grid/push-pull-responsive/vue.md
 create mode 100644 static/usage/grid/push-pull/angular/example_component_css.md
 create mode 100644 static/usage/grid/push-pull/angular/example_component_html.md
 create mode 100644 static/usage/grid/push-pull/demo.html
 create mode 100644 static/usage/grid/push-pull/index.md
 create mode 100644 static/usage/grid/push-pull/javascript.md
 create mode 100644 static/usage/grid/push-pull/react/main_css.md
 create mode 100644 static/usage/grid/push-pull/react/main_tsx.md
 create mode 100644 static/usage/grid/push-pull/vue.md
 create mode 100644 static/usage/grid/size-auto/angular/example_component_css.md
 create mode 100644 static/usage/grid/size-auto/angular/example_component_html.md
 create mode 100644 static/usage/grid/size-auto/demo.html
 create mode 100644 static/usage/grid/size-auto/index.md
 create mode 100644 static/usage/grid/size-auto/javascript.md
 create mode 100644 static/usage/grid/size-auto/react/main_css.md
 create mode 100644 static/usage/grid/size-auto/react/main_tsx.md
 create mode 100644 static/usage/grid/size-auto/vue.md
 create mode 100644 static/usage/grid/size-responsive/angular/example_component_css.md
 create mode 100644 static/usage/grid/size-responsive/angular/example_component_html.md
 create mode 100644 static/usage/grid/size-responsive/demo.html
 create mode 100644 static/usage/grid/size-responsive/index.md
 create mode 100644 static/usage/grid/size-responsive/javascript.md
 create mode 100644 static/usage/grid/size-responsive/react/main_css.md
 create mode 100644 static/usage/grid/size-responsive/react/main_tsx.md
 create mode 100644 static/usage/grid/size-responsive/vue.md
 create mode 100644 static/usage/grid/size/angular/example_component_css.md
 create mode 100644 static/usage/grid/size/angular/example_component_html.md
 create mode 100644 static/usage/grid/size/demo.html
 create mode 100644 static/usage/grid/size/index.md
 create mode 100644 static/usage/grid/size/javascript.md
 create mode 100644 static/usage/grid/size/react/main_css.md
 create mode 100644 static/usage/grid/size/react/main_tsx.md
 create mode 100644 static/usage/grid/size/vue.md
 create mode 100644 static/usage/grid/vertical-alignment/angular/example_component_css.md
 create mode 100644 static/usage/grid/vertical-alignment/angular/example_component_html.md
 create mode 100644 static/usage/grid/vertical-alignment/demo.html
 create mode 100644 static/usage/grid/vertical-alignment/index.md
 create mode 100644 static/usage/grid/vertical-alignment/javascript.md
 create mode 100644 static/usage/grid/vertical-alignment/react/main_css.md
 create mode 100644 static/usage/grid/vertical-alignment/react/main_tsx.md
 create mode 100644 static/usage/grid/vertical-alignment/vue.md

diff --git a/docs/api/col.md b/docs/api/col.md
index b4f0f72a5fe..e5872b4f6a1 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-col"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -20,19 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
-Columns are cellular components of the [grid](grid.md) system and go inside of a [row](row.md).
-They will expand to fill their row. All content within a grid should go inside of a column.
+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 [Grid Layout](/docs/layout/grid) for more information.
+See the [grid](./grid) documentation for more information.
 
 
 ## Column Alignment
@@ -58,4 +46,4 @@ By default, columns will stretch to fill the entire height of the row. Columns a
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/grid.md b/docs/api/grid.md
index cf46fc98e81..a2dc4e17ea3 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-grid"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/grid/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/grid/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,936 +17,184 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-
-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.
-
-See the [Responsive Grid documentation](/docs/layout/grid) for more information.
-
-
-
-## 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-grid>
-  <ion-row>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="6">
-      ion-col [size="6"]
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="3">
-      ion-col [size="3"]
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col size="3">
-      ion-col [size="3"]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="3">
-      ion-col [size="3"]
-    </ion-col>
-    <ion-col size="3" offset="3">
-      ion-col [size="3"] [offset="3"]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col class="ion-align-self-start">
-      ion-col [start]
-    </ion-col>
-    <ion-col class="ion-align-self-center">
-      ion-col [center]
-    </ion-col>
-    <ion-col class="ion-align-self-end">
-      ion-col [end]
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row class="ion-align-items-start">
-    <ion-col>
-      [start] ion-col
-    </ion-col>
-    <ion-col>
-      [start] ion-col
-    </ion-col>
-    <ion-col class="ion-align-self-end">
-      [start] ion-col [end]
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row class="ion-align-items-center">
-    <ion-col>
-      [center] ion-col
-    </ion-col>
-    <ion-col>
-      [center] ion-col
-    </ion-col>
-    <ion-col>
-      [center] ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row class="ion-align-items-end">
-    <ion-col>
-      [end] ion-col
-    </ion-col>
-    <ion-col class="ion-align-self-start">
-      [end] ion-col [start]
-    </ion-col>
-    <ion-col>
-      [end] ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="6" size-lg offset="3">
-      ion-col [size="6"] [size-lg] [offset="3"]
-    </ion-col>
-    <ion-col size="3" size-lg>
-      ion-col [size="3"] [size-lg]
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="6">
-      ion-col [size="6"]
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="3">
-      ion-col [size="3"]
-    </ion-col>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col size="3">
-      ion-col [size="3"]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="3">
-      ion-col [size="3"]
-    </ion-col>
-    <ion-col size="3" offset="3">
-      ion-col [size="3"] [offset="3"]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col class="ion-align-self-start">
-      ion-col [start]
-    </ion-col>
-    <ion-col class="ion-align-self-center">
-      ion-col [center]
-    </ion-col>
-    <ion-col class="ion-align-self-end">
-      ion-col [end]
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row class="ion-align-items-start">
-    <ion-col>
-      [start] ion-col
-    </ion-col>
-    <ion-col>
-      [start] ion-col
-    </ion-col>
-    <ion-col class="ion-align-self-end">
-      [start] ion-col [end]
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row class="ion-align-items-center">
-    <ion-col>
-      [center] ion-col
-    </ion-col>
-    <ion-col>
-      [center] ion-col
-    </ion-col>
-    <ion-col>
-      [center] ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row class="ion-align-items-end">
-    <ion-col>
-      [end] ion-col
-    </ion-col>
-    <ion-col class="ion-align-self-start">
-      [end] ion-col [start]
-    </ion-col>
-    <ion-col>
-      [end] ion-col
-    </ion-col>
-    <ion-col>
-      ion-col
-      <br>#
-      <br>#
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-    <ion-col size="12" size-sm>
-      ion-col [size="12"] [size-sm]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-    <ion-col size="12" size-md>
-      ion-col [size="12"] [size-md]
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col size="6" size-lg offset="3">
-      ion-col [size="6"] [size-lg] [offset="3"]
-    </ion-col>
-    <ion-col size="3" size-lg>
-      ion-col [size="3"] [size-lg]
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
-
-export const GridExample: React.FC = () => (
-  <IonContent>
-    <IonGrid>
-      <IonRow>
-        <IonCol>ion-col</IonCol>
-        <IonCol>ion-col</IonCol>
-        <IonCol>ion-col</IonCol>
-        <IonCol>ion-col</IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol size="6">ion-col size="6"</IonCol>
-        <IonCol>ion-col</IonCol>
-        <IonCol>ion-col</IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol size="3">ion-col size="3"</IonCol>
-        <IonCol>ion-col</IonCol>
-        <IonCol size="3">ion-col size="3"</IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol size="3">ion-col size="3"</IonCol>
-        <IonCol size="3" offset="3">
-          ion-col size="3" offset="3"
-        </IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol>ion-col</IonCol>
-        <IonCol>
-          ion-col
-          <br />#
-        </IonCol>
-        <IonCol>
-          ion-col
-          <br />#
-          <br />#
-        </IonCol>
-        <IonCol>
-          ion-col
-          <br />#
-          <br />#
-          <br />#
-        </IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol className="ion-align-self-start">ion-col start</IonCol>
-        <IonCol className="ion-align-self-center">ion-col center</IonCol>
-        <IonCol className="ion-align-self-end">ion-col end</IonCol>
-        <IonCol>
-          ion-col
-          <br />#
-          <br />#
-        </IonCol>
-      </IonRow>
-
-      <IonRow className="ion-align-items-start">
-        <IonCol>start ion-col</IonCol>
-        <IonCol>start ion-col</IonCol>
-        <IonCol className="ion-align-self-end">start ion-col end</IonCol>
-        <IonCol>
-          ion-col
-          <br />#
-          <br />#
-        </IonCol>
-      </IonRow>
-
-      <IonRow className="ion-align-items-center">
-        <IonCol>center ion-col</IonCol>
-        <IonCol>center ion-col</IonCol>
-        <IonCol>center ion-col</IonCol>
-        <IonCol>
-          ion-col
-          <br />#
-          <br />#
-        </IonCol>
-      </IonRow>
-
-      <IonRow className="ion-align-items-end">
-        <IonCol>end ion-col</IonCol>
-        <IonCol className="ion-align-self-start">end ion-col start</IonCol>
-        <IonCol>end ion-col</IonCol>
-        <IonCol>
-          ion-col
-          <br />#
-          <br />#
-        </IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol size="12" size-sm>
-          ion-col size="12" size-sm
-        </IonCol>
-        <IonCol size="12" size-sm>
-          ion-col size="12" size-sm
-        </IonCol>
-        <IonCol size="12" size-sm>
-          ion-col size="12" size-sm
-        </IonCol>
-        <IonCol size="12" size-sm>
-          ion-col size="12" size-sm
-        </IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol size="12" size-md>
-          ion-col size="12" size-md
-        </IonCol>
-        <IonCol size="12" size-md>
-          ion-col size="12" size-md
-        </IonCol>
-        <IonCol size="12" size-md>
-          ion-col size="12" size-md
-        </IonCol>
-        <IonCol size="12" size-md>
-          ion-col size="12" size-md
-        </IonCol>
-      </IonRow>
-
-      <IonRow>
-        <IonCol size="6" size-lg offset="3">
-          ion-col size="6" size-lg offset="3"
-        </IonCol>
-        <IonCol size="3" size-lg>
-          ion-col size="3" size-lg
-        </IonCol>
-      </IonRow>
-    </IonGrid>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'grid-example',
-  styleUrl: 'grid-example.css'
-})
-export class GridExample {
-  render() {
-    return [
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            ion-col
-          </ion-col>
-          <ion-col>
-            ion-col
-          </ion-col>
-          <ion-col>
-            ion-col
-          </ion-col>
-          <ion-col>
-            ion-col
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col size="6">
-            ion-col [size="6"]
-          </ion-col>
-          <ion-col>
-            ion-col
-          </ion-col>
-          <ion-col>
-            ion-col
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col size="3">
-            ion-col [size="3"]
-          </ion-col>
-          <ion-col>
-            ion-col
-          </ion-col>
-          <ion-col size="3">
-            ion-col [size="3"]
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col size="3">
-            ion-col [size="3"]
-          </ion-col>
-          <ion-col size="3" offset="3">
-            ion-col [size="3"] [offset="3"]
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col>
-            ion-col
-          </ion-col>
-          <ion-col>
-            ion-col
-            <br/>#
-          </ion-col>
-          <ion-col>
-            ion-col
-            <br/>#
-            <br/>#
-          </ion-col>
-          <ion-col>
-            ion-col
-            <br/>#
-            <br/>#
-            <br/>#
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col class="ion-align-self-start">
-            ion-col [start]
-          </ion-col>
-          <ion-col class="ion-align-self-center">
-            ion-col [center]
-          </ion-col>
-          <ion-col class="ion-align-self-end">
-            ion-col [end]
-          </ion-col>
-          <ion-col>
-            ion-col
-            <br/>#
-            <br/>#
-          </ion-col>
-        </ion-row>
-
-        <ion-row class="ion-align-items-start">
-          <ion-col>
-            [start] ion-col
-          </ion-col>
-          <ion-col>
-            [start] ion-col
-          </ion-col>
-          <ion-col class="ion-align-self-end">
-            [start] ion-col [end]
-          </ion-col>
-          <ion-col>
-            ion-col
-            <br/>#
-            <br/>#
-          </ion-col>
-        </ion-row>
-
-        <ion-row class="ion-align-items-center">
-          <ion-col>
-            [center] ion-col
-          </ion-col>
-          <ion-col>
-            [center] ion-col
-          </ion-col>
-          <ion-col>
-            [center] ion-col
-          </ion-col>
-          <ion-col>
-            ion-col
-            <br/>#
-            <br/>#
-          </ion-col>
-        </ion-row>
-
-        <ion-row class="ion-align-items-end">
-          <ion-col>
-            [end] ion-col
-          </ion-col>
-          <ion-col class="ion-align-self-start">
-            [end] ion-col [start]
-          </ion-col>
-          <ion-col>
-            [end] ion-col
-          </ion-col>
-          <ion-col>
-            ion-col
-            <br/>#
-            <br/>#
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col size="12" sizeSm="">
-            ion-col [size="12"] [sizeSm]
-          </ion-col>
-          <ion-col size="12" sizeSm="">
-            ion-col [size="12"] [sizeSm]
-          </ion-col>
-          <ion-col size="12" sizeSm="">
-            ion-col [size="12"] [sizeSm]
-          </ion-col>
-          <ion-col size="12" sizeSm="">
-            ion-col [size="12"] [sizeSm]
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col size="12" sizeMd="">
-            ion-col [size="12"] [sizeMd]
-          </ion-col>
-          <ion-col size="12" sizeMd="">
-            ion-col [size="12"] [sizeMd]
-          </ion-col>
-          <ion-col size="12" sizeMd="">
-            ion-col [size="12"] [sizeMd]
-          </ion-col>
-          <ion-col size="12" sizeMd="">
-            ion-col [size="12"] [sizeMd]
-          </ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col size="6" sizeLg="" offset="3">
-            ion-col [size="6"] [sizeLg] [offset="3"]
-          </ion-col>
-          <ion-col size="3" sizeLg="">
-            ion-col [size="3"] [sizeLg]
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-        ion-col
-      </ion-col>
-      <ion-col>
-        ion-col
-      </ion-col>
-      <ion-col>
-        ion-col
-      </ion-col>
-      <ion-col>
-        ion-col
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col size="6">
-        ion-col [size="6"]
-      </ion-col>
-      <ion-col>
-        ion-col
-      </ion-col>
-      <ion-col>
-        ion-col
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col size="3">
-        ion-col [size="3"]
-      </ion-col>
-      <ion-col>
-        ion-col
-      </ion-col>
-      <ion-col size="3">
-        ion-col [size="3"]
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col size="3">
-        ion-col [size="3"]
-      </ion-col>
-      <ion-col size="3" offset="3">
-        ion-col [size="3"] [offset="3"]
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col>
-        ion-col
-      </ion-col>
-      <ion-col>
-        ion-col
-        <br>#
-      </ion-col>
-      <ion-col>
-        ion-col
-        <br>#
-        <br>#
-      </ion-col>
-      <ion-col>
-        ion-col
-        <br>#
-        <br>#
-        <br>#
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col class="ion-align-self-start">
-        ion-col [start]
-      </ion-col>
-      <ion-col class="ion-align-self-center">
-        ion-col [center]
-      </ion-col>
-      <ion-col class="ion-align-self-end">
-        ion-col [end]
-      </ion-col>
-      <ion-col>
-        ion-col
-        <br>#
-        <br>#
-      </ion-col>
-    </ion-row>
-
-    <ion-row class="ion-align-items-start">
-      <ion-col>
-        [start] ion-col
-      </ion-col>
-      <ion-col>
-        [start] ion-col
-      </ion-col>
-      <ion-col class="ion-align-self-end">
-        [start] ion-col [end]
-      </ion-col>
-      <ion-col>
-        ion-col
-        <br>#
-        <br>#
-      </ion-col>
-    </ion-row>
-
-    <ion-row class="ion-align-items-center">
-      <ion-col>
-        [center] ion-col
-      </ion-col>
-      <ion-col>
-        [center] ion-col
-      </ion-col>
-      <ion-col>
-        [center] ion-col
-      </ion-col>
-      <ion-col>
-        ion-col
-        <br>#
-        <br>#
-      </ion-col>
-    </ion-row>
-
-    <ion-row class="ion-align-items-end">
-      <ion-col>
-        [end] ion-col
-      </ion-col>
-      <ion-col class="ion-align-self-start">
-        [end] ion-col [start]
-      </ion-col>
-      <ion-col>
-        [end] ion-col
-      </ion-col>
-      <ion-col>
-        ion-col
-        <br>#
-        <br>#
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col size="12" size-sm>
-        ion-col [size="12"] [size-sm]
-      </ion-col>
-      <ion-col size="12" size-sm>
-        ion-col [size="12"] [size-sm]
-      </ion-col>
-      <ion-col size="12" size-sm>
-        ion-col [size="12"] [size-sm]
-      </ion-col>
-      <ion-col size="12" size-sm>
-        ion-col [size="12"] [size-sm]
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col size="12" size-md>
-        ion-col [size="12"] [size-md]
-      </ion-col>
-      <ion-col size="12" size-md>
-        ion-col [size="12"] [size-md]
-      </ion-col>
-      <ion-col size="12" size-md>
-        ion-col [size="12"] [size-md]
-      </ion-col>
-      <ion-col size="12" size-md>
-        ion-col [size="12"] [size-md]
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col size="6" size-lg offset="3">
-        ion-col [size="6"] [size-lg] [offset="3"]
-      </ion-col>
-      <ion-col size="3" size-lg>
-        ion-col [size="3"] [size-lg]
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</template>
-
-<script>
-import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonCol, IonGrid, IonRow }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
+
+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/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/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/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/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/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/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/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/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/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/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/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/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/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/grid/customizing/padding/index.md';
+
+<Padding />
 
 ## Properties
 <Props />
@@ -971,4 +212,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/row.md b/docs/api/row.md
index 21181f125b8..48fc21c4ba0 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-row"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -20,19 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Rows are horizontal components of the [grid](grid.md) system and contain varying numbers of
-[columns](col.md). They ensure the columns are positioned properly.
+Rows are horizontal components of the [grid](./grid) system and contain varying numbers of
+[columns](./col). They ensure the columns are positioned properly.
 
-See [Grid Layout](/docs/layout/grid) for more information.
+See the [grid](./grid) documentation for more information.
 
 
 ## Row Alignment
@@ -58,4 +46,4 @@ By default, columns will stretch to fill the entire height of the row and wrap w
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/core-concepts/cross-platform.md b/docs/core-concepts/cross-platform.md
index bfb2b954ba5..9d2e39248b9 100644
--- a/docs/core-concepts/cross-platform.md
+++ b/docs/core-concepts/cross-platform.md
@@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a mob
 
 <img src={require('@site/static/img/building/cross-platform-items.png').default} />
 
-To improve this experience, we can wrap the items in a [Grid](../layout/grid.md) component. The view can be easily rewritten into something more usable on larger screens:
+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>
@@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points:
 
 - 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](../layout/grid.md) documentation.
+For more information on customizing with grid, see the [Grid](../api/grid.md) documentation.
 
 ## Storage
 
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
deleted file mode 100644
index cdeb3482b15..00000000000
--- a/docs/layout/grid.md
+++ /dev/null
@@ -1,512 +0,0 @@
----
-title: Responsive Grid
----
-
-<head>
-  <title>Responsive Grid System and Column Layout Based on Screen Size</title>
-  <meta
-    name="description"
-    content="Ionic's responsive grid is a powerful mobile-first flexbox system for building custom layouts based on a 12 column layout with breakpoints based on screen size."
-  />
-</head>
-
-The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a [grid](../api/grid.md), [row(s)](../api/row.md) and [column(s)](../api/col.md). Columns will expand to fill their 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.
-
-## How it works
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-- Grids act as a container for all rows and columns. Grids take up the full width of their container,
-  but adding the `fixed` attribute will specify the width per screen size, see [grid size](#grid-size) 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-{breakpoint}` attributes indicate 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 instances of `size-sm` will each automatically be 25% wide for the small breakpoint and up.
-- Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.
-- Columns have 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](css-utilities.md) 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 easily be customized via CSS variables. See [customizing the grid](#customizing-the-grid).
-
-### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-basic-grid) and in React [here](https://stackblitz.com/edit/ionic-react-basic-grid).
-
-## Grid size
-
-By default, the grid will take up 100% width. To set a specific width based on the screen size, add the `fixed` attribute. The width of the grid for each breakpoint is defined in the `--ion-grid-width-{breakpoint}` CSS variables. For more information, see [customizing the grid](#customizing-the-grid).
-
-| Name | Value  | Description                                       |
-| ---- | ------ | ------------------------------------------------- |
-| xs   | 100%   | Don't set the grid width 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) |
-
-### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) and in React [here](https://stackblitz.com/edit/ionic-react-fixed-width-grid).
-
-## Grid attributes
-
-The grid takes up the entire width of the screen by default. This can be modified using the attribute below.
-
-| Property | Description                                       |
-| -------- | ------------------------------------------------- |
-| fixed    | Set a max width based on the current screen size. |
-
-## Default breakpoints
-
-The default breakpoints are defined in the table below. Breakpoints can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.md#variables-in-media-queries).
-
-| Name | Value  | Width Prefix | Offset Prefix | Push Prefix | Pull Prefix | Description                          |
-| ---- | ------ | ------------ | ------------- | ----------- | ----------- | ------------------------------------ |
-| xs   | 0      | `size-`      | `offset-`     | `push-`     | `pull-`     | Set columns when (min-width: 0)      |
-| sm   | 576px  | `size-sm-`   | `offset-sm-`  | `push-sm-`  | `pull-sm-`  | Set columns when (min-width: 576px)  |
-| md   | 768px  | `size-md-`   | `offset-md-`  | `push-md-`  | `pull-md-`  | Set columns when (min-width: 768px)  |
-| lg   | 992px  | `size-lg-`   | `offset-lg-`  | `push-lg-`  | `pull-lg-`  | Set columns when (min-width: 992px)  |
-| xl   | 1200px | `size-xl-`   | `offset-xl-`  | `push-xl-`  | `pull-xl-`  | Set columns when (min-width: 1200px) |
-
-## Auto-layout columns
-
-### Equal-width
-
-By default, columns will take up equal width inside of a row for all devices and screen sizes.
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 2</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 2</div>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-### Setting one column width
-
-Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size="8">
-      <div>2 of 3 (wider)</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size="6">
-      <div>2 of 3 (wider)</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-set-width-col) and in React [here](https://stackblitz.com/edit/ionic-react-set-width-col).
-
-### Variable-width
-
-By setting the `size-{breakpoint}` properties to `"auto"` the column can size itself based on the natural width of its content. This is extremely useful for setting a column width using pixels. The columns next to the variable-width column will resize to fill the row.
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size="auto">
-      <div>Variable width content</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <div>1 of 4</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 4</div>
-    </ion-col>
-    <ion-col size="auto">
-      <div>
-        <ion-input placeholder="Variable width input"></ion-input>
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>4 of 4</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-var-width-col) and in React [here](https://stackblitz.com/edit/ionic-react-var-width-col).
-
-## Responsive attributes
-
-### All breakpoints
-
-To customize a column's width for all devices and screens, set the `size` property. The value of this property determines how many columns this column should take up out of the total available columns.
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="4">
-      <div>1 of 4</div>
-    </ion-col>
-    <ion-col size="2">
-      <div>2 of 4</div>
-    </ion-col>
-    <ion-col size="2">
-      <div>3 of 4</div>
-    </ion-col>
-    <ion-col size="4">
-      <div>4 of 4</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-### Stacked to horizontal
-
-Use a combination of width and breakpoint attributes to create a grid that starts out stacked on extra small screens before becoming horizontal on small screens.
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="12" size-sm>
-      <div>1 of 4</div>
-    </ion-col>
-    <ion-col size="12" size-sm>
-      <div>2 of 4</div>
-    </ion-col>
-    <ion-col size="12" size-sm>
-      <div>3 of 4</div>
-    </ion-col>
-    <ion-col size="12" size-sm>
-      <div>4 of 4</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) and in React [here](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid).
-
-## Reordering
-
-### Offsetting columns
-
-Move columns to the right by adding the `offset` property. This property increases the margin left of the column by the number of specified columns. For example, in the following grid the last column will be offset by 3 columns and take up 3 columns:
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="3">
-      <div>1 of 2</div>
-    </ion-col>
-    <ion-col size="3" offset="3">
-      <div>2 of 2</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-Offsets can also be added based on screen breakpoints. Here's an example of a grid where the last column will be offset by 3 columns for `md` screens and up:
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size-md="3">
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size-md="3">
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col size-md="3" offset-md="3">
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) and in React [here](https://stackblitz.com/edit/ionic-react-offset-grid-cols).
-
-### Push and 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. For example, in the following grid the column with the `1 of 2` description will actually be the last column and the `2 of 2` will be the first column.
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="9" push="3">
-      <div>1 of 2</div>
-    </ion-col>
-    <ion-col size="3" pull="9">
-      <div>2 of 2</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-Push and pull can also be added based on screen breakpoints. In the following example, the column with the `3 of 3` column description will actually be the first column for `md` screens and up:
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size-md="6" push-md="3">
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size-md="3" push-md="3">
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col size-md="3" pull-md="9">
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-push-pull) and in React [here](https://stackblitz.com/edit/ionic-react-grid-push-pull).
-
-## 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](css-utilities.md#flex-container-properties).
-
-```html
-<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-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-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-grid>
-```
-
-Columns can also align themselves differently than other columns by adding the alignment class directly to the column. For a list of available classes, see [css utilities](css-utilities.md#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>
-```
-
-#### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) and in React [here](https://stackblitz.com/edit/ionic-react-grid-vertical-align).
-
-### 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](css-utilities.md#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-grid>
-```
-
-#### Live Example
-
-You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) and in React [here](https://stackblitz.com/edit/ionic-react-grid-horizontal-align).
-
-## 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.
-
-### 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.
-
-```css
---ion-grid-columns: 12;
-```
-
-### Grid 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.
-
-```css
---ion-grid-padding: 5px;
-
---ion-grid-padding-xs: 5px;
---ion-grid-padding-sm: 5px;
---ion-grid-padding-md: 5px;
---ion-grid-padding-lg: 5px;
---ion-grid-padding-xl: 5px;
-```
-
-### Grid width
-
-To customize the width values of the fixed grid based on the screen size, override the values of `--ion-grid-width-{breakpoint}` for each breakpoint.
-
-```css
---ion-grid-width-xs: 100%;
---ion-grid-width-sm: 540px;
---ion-grid-width-md: 720px;
---ion-grid-width-lg: 960px;
---ion-grid-width-xl: 1140px;
-```
-
-### Column Padding
-
-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.
-
-```css
---ion-grid-column-padding: 5px;
-
---ion-grid-column-padding-xs: 5px;
---ion-grid-column-padding-sm: 5px;
---ion-grid-column-padding-md: 5px;
---ion-grid-column-padding-lg: 5px;
---ion-grid-column-padding-xl: 5px;
-```
diff --git a/sidebars.js b/sidebars.js
index e6231ae0a68..999612d8c1e 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -25,7 +25,16 @@ module.exports = {
       type: 'category',
       label: 'Layout',
       collapsed: false,
-      items: ['layout/structure', 'layout/grid', 'layout/global-stylesheets', 'layout/css-utilities'],
+      items: [
+        'layout/structure',
+        {
+          type: 'link',
+          label: 'Responsive Grid',
+          href: '/docs/api/grid',
+        },
+        'layout/global-stylesheets',
+        'layout/css-utilities'
+      ],
     },
     {
       type: 'category',
diff --git a/static/usage/grid/basic/angular/example_component_css.md b/static/usage/grid/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/basic/angular/example_component_html.md b/static/usage/grid/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..daa37c1e31f
--- /dev/null
+++ b/static/usage/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/grid/basic/demo.html b/static/usage/grid/basic/demo.html
new file mode 100644
index 00000000000..7775696c8a6
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/basic/index.md b/static/usage/grid/basic/index.md
new file mode 100644
index 00000000000..62ae5e280dd
--- /dev/null
+++ b/static/usage/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/grid/basic/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/basic/javascript.md b/static/usage/grid/basic/javascript.md
new file mode 100644
index 00000000000..53e0dd4f8c9
--- /dev/null
+++ b/static/usage/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/grid/basic/react/main_css.md b/static/usage/grid/basic/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/basic/react/main_tsx.md b/static/usage/grid/basic/react/main_tsx.md
new file mode 100644
index 00000000000..9fb9652e4ce
--- /dev/null
+++ b/static/usage/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/grid/basic/vue.md b/static/usage/grid/basic/vue.md
new file mode 100644
index 00000000000..d693fc8510d
--- /dev/null
+++ b/static/usage/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/grid/customizing/column-number/angular/example_component_css.md b/static/usage/grid/customizing/column-number/angular/example_component_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/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/grid/customizing/column-number/angular/example_component_html.md b/static/usage/grid/customizing/column-number/angular/example_component_html.md
new file mode 100644
index 00000000000..6e9b744b161
--- /dev/null
+++ b/static/usage/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/grid/customizing/column-number/demo.html b/static/usage/grid/customizing/column-number/demo.html
new file mode 100644
index 00000000000..6fcad9a9138
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/customizing/column-number/index.md b/static/usage/grid/customizing/column-number/index.md
new file mode 100644
index 00000000000..6ca863e8ef0
--- /dev/null
+++ b/static/usage/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/grid/customizing/column-number/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/grid/customizing/column-number/javascript.md b/static/usage/grid/customizing/column-number/javascript.md
new file mode 100644
index 00000000000..5c4c6edf166
--- /dev/null
+++ b/static/usage/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/grid/customizing/column-number/react/main_css.md b/static/usage/grid/customizing/column-number/react/main_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/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/grid/customizing/column-number/react/main_tsx.md b/static/usage/grid/customizing/column-number/react/main_tsx.md
new file mode 100644
index 00000000000..f911fdef9b4
--- /dev/null
+++ b/static/usage/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/grid/customizing/column-number/vue.md b/static/usage/grid/customizing/column-number/vue.md
new file mode 100644
index 00000000000..1af3143593f
--- /dev/null
+++ b/static/usage/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/grid/customizing/padding/angular/example_component_css.md b/static/usage/grid/customizing/padding/angular/example_component_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/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/grid/customizing/padding/angular/example_component_html.md b/static/usage/grid/customizing/padding/angular/example_component_html.md
new file mode 100644
index 00000000000..74811052b30
--- /dev/null
+++ b/static/usage/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/grid/customizing/padding/demo.html b/static/usage/grid/customizing/padding/demo.html
new file mode 100644
index 00000000000..3c8b2144e8f
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/customizing/padding/index.md b/static/usage/grid/customizing/padding/index.md
new file mode 100644
index 00000000000..3e5d034e24d
--- /dev/null
+++ b/static/usage/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/grid/customizing/padding/demo.html"
+  size="150px"
+/>
diff --git a/static/usage/grid/customizing/padding/javascript.md b/static/usage/grid/customizing/padding/javascript.md
new file mode 100644
index 00000000000..fea0d256a72
--- /dev/null
+++ b/static/usage/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/grid/customizing/padding/react/main_css.md b/static/usage/grid/customizing/padding/react/main_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/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/grid/customizing/padding/react/main_tsx.md b/static/usage/grid/customizing/padding/react/main_tsx.md
new file mode 100644
index 00000000000..4faf0a3cac1
--- /dev/null
+++ b/static/usage/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/grid/customizing/padding/vue.md b/static/usage/grid/customizing/padding/vue.md
new file mode 100644
index 00000000000..343511e231d
--- /dev/null
+++ b/static/usage/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/grid/customizing/width/angular/example_component_css.md b/static/usage/grid/customizing/width/angular/example_component_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/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/grid/customizing/width/angular/example_component_html.md b/static/usage/grid/customizing/width/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/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/grid/customizing/width/demo.html b/static/usage/grid/customizing/width/demo.html
new file mode 100644
index 00000000000..eed95fa7ed4
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/customizing/width/index.md b/static/usage/grid/customizing/width/index.md
new file mode 100644
index 00000000000..ce4d73d2795
--- /dev/null
+++ b/static/usage/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/grid/customizing/width/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/grid/customizing/width/javascript.md b/static/usage/grid/customizing/width/javascript.md
new file mode 100644
index 00000000000..2ff36295b70
--- /dev/null
+++ b/static/usage/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/grid/customizing/width/react/main_css.md b/static/usage/grid/customizing/width/react/main_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/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/grid/customizing/width/react/main_tsx.md b/static/usage/grid/customizing/width/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/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/grid/customizing/width/vue.md b/static/usage/grid/customizing/width/vue.md
new file mode 100644
index 00000000000..40b0002e822
--- /dev/null
+++ b/static/usage/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/grid/fixed/angular/example_component_css.md b/static/usage/grid/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/fixed/angular/example_component_html.md b/static/usage/grid/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/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/grid/fixed/demo.html b/static/usage/grid/fixed/demo.html
new file mode 100644
index 00000000000..657128ee8b8
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/fixed/index.md b/static/usage/grid/fixed/index.md
new file mode 100644
index 00000000000..736e08b3a6a
--- /dev/null
+++ b/static/usage/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/grid/fixed/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/grid/fixed/javascript.md b/static/usage/grid/fixed/javascript.md
new file mode 100644
index 00000000000..5fa9672a8ab
--- /dev/null
+++ b/static/usage/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/grid/fixed/react/main_css.md b/static/usage/grid/fixed/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/fixed/react/main_tsx.md b/static/usage/grid/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/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/grid/fixed/vue.md b/static/usage/grid/fixed/vue.md
new file mode 100644
index 00000000000..fbaa7118bbd
--- /dev/null
+++ b/static/usage/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/grid/horizontal-alignment/angular/example_component_css.md b/static/usage/grid/horizontal-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/grid/horizontal-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..63a33b6361e
--- /dev/null
+++ b/static/usage/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/grid/horizontal-alignment/demo.html b/static/usage/grid/horizontal-alignment/demo.html
new file mode 100644
index 00000000000..5205761b718
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/horizontal-alignment/index.md b/static/usage/grid/horizontal-alignment/index.md
new file mode 100644
index 00000000000..81f91713388
--- /dev/null
+++ b/static/usage/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/grid/horizontal-alignment/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/grid/horizontal-alignment/javascript.md b/static/usage/grid/horizontal-alignment/javascript.md
new file mode 100644
index 00000000000..79a8e723d8e
--- /dev/null
+++ b/static/usage/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/grid/horizontal-alignment/react/main_css.md b/static/usage/grid/horizontal-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/horizontal-alignment/react/main_tsx.md b/static/usage/grid/horizontal-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..320fb74063c
--- /dev/null
+++ b/static/usage/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/grid/horizontal-alignment/vue.md b/static/usage/grid/horizontal-alignment/vue.md
new file mode 100644
index 00000000000..4cb3c1bcefd
--- /dev/null
+++ b/static/usage/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/grid/offset-responsive/angular/example_component_css.md b/static/usage/grid/offset-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/offset-responsive/angular/example_component_html.md b/static/usage/grid/offset-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..09088adcd03
--- /dev/null
+++ b/static/usage/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/grid/offset-responsive/demo.html b/static/usage/grid/offset-responsive/demo.html
new file mode 100644
index 00000000000..8f0a0a5bd49
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/offset-responsive/index.md b/static/usage/grid/offset-responsive/index.md
new file mode 100644
index 00000000000..6db22599d2c
--- /dev/null
+++ b/static/usage/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/grid/offset-responsive/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/grid/offset-responsive/javascript.md b/static/usage/grid/offset-responsive/javascript.md
new file mode 100644
index 00000000000..f380aa503c0
--- /dev/null
+++ b/static/usage/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/grid/offset-responsive/react/main_css.md b/static/usage/grid/offset-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/offset-responsive/react/main_tsx.md b/static/usage/grid/offset-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..482f957cde8
--- /dev/null
+++ b/static/usage/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/grid/offset-responsive/vue.md b/static/usage/grid/offset-responsive/vue.md
new file mode 100644
index 00000000000..ca540bee471
--- /dev/null
+++ b/static/usage/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/grid/offset/angular/example_component_css.md b/static/usage/grid/offset/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/offset/angular/example_component_html.md b/static/usage/grid/offset/angular/example_component_html.md
new file mode 100644
index 00000000000..66e044507a8
--- /dev/null
+++ b/static/usage/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/grid/offset/demo.html b/static/usage/grid/offset/demo.html
new file mode 100644
index 00000000000..58221a7c439
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/offset/index.md b/static/usage/grid/offset/index.md
new file mode 100644
index 00000000000..c22ac6c7af2
--- /dev/null
+++ b/static/usage/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/grid/offset/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/offset/javascript.md b/static/usage/grid/offset/javascript.md
new file mode 100644
index 00000000000..dcb717dd8d2
--- /dev/null
+++ b/static/usage/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/grid/offset/react/main_css.md b/static/usage/grid/offset/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/offset/react/main_tsx.md b/static/usage/grid/offset/react/main_tsx.md
new file mode 100644
index 00000000000..99add2f8a44
--- /dev/null
+++ b/static/usage/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/grid/offset/vue.md b/static/usage/grid/offset/vue.md
new file mode 100644
index 00000000000..1a69ea6e061
--- /dev/null
+++ b/static/usage/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/grid/push-pull-responsive/angular/example_component_css.md b/static/usage/grid/push-pull-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/push-pull-responsive/angular/example_component_html.md b/static/usage/grid/push-pull-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..4e67838643e
--- /dev/null
+++ b/static/usage/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/grid/push-pull-responsive/demo.html b/static/usage/grid/push-pull-responsive/demo.html
new file mode 100644
index 00000000000..eef68845370
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/push-pull-responsive/index.md b/static/usage/grid/push-pull-responsive/index.md
new file mode 100644
index 00000000000..e8d34050cc9
--- /dev/null
+++ b/static/usage/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/grid/push-pull-responsive/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/push-pull-responsive/javascript.md b/static/usage/grid/push-pull-responsive/javascript.md
new file mode 100644
index 00000000000..05c03f1def8
--- /dev/null
+++ b/static/usage/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/grid/push-pull-responsive/react/main_css.md b/static/usage/grid/push-pull-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/push-pull-responsive/react/main_tsx.md b/static/usage/grid/push-pull-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..3f6e2879e08
--- /dev/null
+++ b/static/usage/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/grid/push-pull-responsive/vue.md b/static/usage/grid/push-pull-responsive/vue.md
new file mode 100644
index 00000000000..82015e52758
--- /dev/null
+++ b/static/usage/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/grid/push-pull/angular/example_component_css.md b/static/usage/grid/push-pull/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/push-pull/angular/example_component_html.md b/static/usage/grid/push-pull/angular/example_component_html.md
new file mode 100644
index 00000000000..cb8190ef9e9
--- /dev/null
+++ b/static/usage/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/grid/push-pull/demo.html b/static/usage/grid/push-pull/demo.html
new file mode 100644
index 00000000000..348826166b1
--- /dev/null
+++ b/static/usage/grid/push-pull/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 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
new file mode 100644
index 00000000000..2bc21effee0
--- /dev/null
+++ b/static/usage/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/grid/push-pull/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/push-pull/javascript.md b/static/usage/grid/push-pull/javascript.md
new file mode 100644
index 00000000000..6dca0e83ec4
--- /dev/null
+++ b/static/usage/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/grid/push-pull/react/main_css.md b/static/usage/grid/push-pull/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/push-pull/react/main_tsx.md b/static/usage/grid/push-pull/react/main_tsx.md
new file mode 100644
index 00000000000..6b087b72b77
--- /dev/null
+++ b/static/usage/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/grid/push-pull/vue.md b/static/usage/grid/push-pull/vue.md
new file mode 100644
index 00000000000..2775067f7a7
--- /dev/null
+++ b/static/usage/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/grid/size-auto/angular/example_component_css.md b/static/usage/grid/size-auto/angular/example_component_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/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/grid/size-auto/angular/example_component_html.md b/static/usage/grid/size-auto/angular/example_component_html.md
new file mode 100644
index 00000000000..fc4515ea984
--- /dev/null
+++ b/static/usage/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/grid/size-auto/demo.html b/static/usage/grid/size-auto/demo.html
new file mode 100644
index 00000000000..1ace03d7c20
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/size-auto/index.md b/static/usage/grid/size-auto/index.md
new file mode 100644
index 00000000000..28ff5a74d0f
--- /dev/null
+++ b/static/usage/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/grid/size-auto/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/grid/size-auto/javascript.md b/static/usage/grid/size-auto/javascript.md
new file mode 100644
index 00000000000..7f6619df1f5
--- /dev/null
+++ b/static/usage/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/grid/size-auto/react/main_css.md b/static/usage/grid/size-auto/react/main_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/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/grid/size-auto/react/main_tsx.md b/static/usage/grid/size-auto/react/main_tsx.md
new file mode 100644
index 00000000000..15a19d04abe
--- /dev/null
+++ b/static/usage/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/grid/size-auto/vue.md b/static/usage/grid/size-auto/vue.md
new file mode 100644
index 00000000000..f410272730d
--- /dev/null
+++ b/static/usage/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/grid/size-responsive/angular/example_component_css.md b/static/usage/grid/size-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/size-responsive/angular/example_component_html.md b/static/usage/grid/size-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..62f96cb5800
--- /dev/null
+++ b/static/usage/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/grid/size-responsive/demo.html b/static/usage/grid/size-responsive/demo.html
new file mode 100644
index 00000000000..87787f4b90c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/size-responsive/index.md b/static/usage/grid/size-responsive/index.md
new file mode 100644
index 00000000000..4ae6a22c632
--- /dev/null
+++ b/static/usage/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/grid/size-responsive/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/grid/size-responsive/javascript.md b/static/usage/grid/size-responsive/javascript.md
new file mode 100644
index 00000000000..1b10d349bf4
--- /dev/null
+++ b/static/usage/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/grid/size-responsive/react/main_css.md b/static/usage/grid/size-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/size-responsive/react/main_tsx.md b/static/usage/grid/size-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..c27242fcf87
--- /dev/null
+++ b/static/usage/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/grid/size-responsive/vue.md b/static/usage/grid/size-responsive/vue.md
new file mode 100644
index 00000000000..2762e9c4774
--- /dev/null
+++ b/static/usage/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/grid/size/angular/example_component_css.md b/static/usage/grid/size/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/size/angular/example_component_html.md b/static/usage/grid/size/angular/example_component_html.md
new file mode 100644
index 00000000000..dc47b3de0dd
--- /dev/null
+++ b/static/usage/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/grid/size/demo.html b/static/usage/grid/size/demo.html
new file mode 100644
index 00000000000..09e937fc0b5
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/size/index.md b/static/usage/grid/size/index.md
new file mode 100644
index 00000000000..d05cce878d9
--- /dev/null
+++ b/static/usage/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/grid/size/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/grid/size/javascript.md b/static/usage/grid/size/javascript.md
new file mode 100644
index 00000000000..576234e746e
--- /dev/null
+++ b/static/usage/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/grid/size/react/main_css.md b/static/usage/grid/size/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/size/react/main_tsx.md b/static/usage/grid/size/react/main_tsx.md
new file mode 100644
index 00000000000..3669d57806d
--- /dev/null
+++ b/static/usage/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/grid/size/vue.md b/static/usage/grid/size/vue.md
new file mode 100644
index 00000000000..14baef9e1c4
--- /dev/null
+++ b/static/usage/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/grid/vertical-alignment/angular/example_component_css.md b/static/usage/grid/vertical-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/vertical-alignment/angular/example_component_html.md b/static/usage/grid/vertical-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..2b4e1b42106
--- /dev/null
+++ b/static/usage/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/grid/vertical-alignment/demo.html b/static/usage/grid/vertical-alignment/demo.html
new file mode 100644
index 00000000000..2cbe7d030af
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/grid/vertical-alignment/index.md b/static/usage/grid/vertical-alignment/index.md
new file mode 100644
index 00000000000..bda8baaf99e
--- /dev/null
+++ b/static/usage/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/grid/vertical-alignment/demo.html"
+  size="400px"
+/>
diff --git a/static/usage/grid/vertical-alignment/javascript.md b/static/usage/grid/vertical-alignment/javascript.md
new file mode 100644
index 00000000000..9e7573ebbc6
--- /dev/null
+++ b/static/usage/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/grid/vertical-alignment/react/main_css.md b/static/usage/grid/vertical-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/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/grid/vertical-alignment/react/main_tsx.md b/static/usage/grid/vertical-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..d1dad060701
--- /dev/null
+++ b/static/usage/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/grid/vertical-alignment/vue.md b/static/usage/grid/vertical-alignment/vue.md
new file mode 100644
index 00000000000..f150f908eec
--- /dev/null
+++ b/static/usage/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>
+```

From fedb92df3e384a0f58234192f3e3ec0b383728c3 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 18 Oct 2022 13:48:15 -0400
Subject: [PATCH 103/469] docs(vue): useIonRouter description and usage (#2612)

---
 docs/vue/navigation.md        | 25 +++++++++--------------
 docs/vue/utility-functions.md | 37 ++++++++++++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index e6fe6fc64dd..4ad77014489 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -540,13 +540,15 @@ The example below shows how the Spotify app reuses the same album component to s
 | :------: | :--------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
 
-## IonRouterOutlet
+## 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
+### 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.
 
@@ -580,24 +582,15 @@ The `IonPage` component wraps each view in an Ionic Vue app and allows page tran
 
 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.
 
-## Accessing the IonRouter Instance
+## Functions
 
-There may be a few use cases where you need to get access to the `IonRouter` instance from within your Vue application. For example, you might want to know if you are at the root page of the application when a user presses the hardware back button on Android. For use cases like these, you can inject the `IonRouter` dependency into your component:
+### useIonRouter
 
-```tsx
-import { useIonRouter } from '@ionic/vue';
+▸ **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.
 
-export default {
-  setup() {
-    const ionRouter = useIonRouter();
-    if (ionRouter.canGoBack()) {
-      // Perform some action here
-    }
-  }
-}
-```
+For example usages, please refer to our [Utility Functions](utility-functions#useionrouter).
 
 ## URL Parameters
 
diff --git a/docs/vue/utility-functions.md b/docs/vue/utility-functions.md
index 9d5a4f1a12e..d5461a255a9 100644
--- a/docs/vue/utility-functions.md
+++ b/docs/vue/utility-functions.md
@@ -4,7 +4,15 @@ Ionic Vue ships with several utility functions that you can use in your applicat
 
 ## Router
 
-The `useIonRouter` function can be used to provide greater control over page navigation beyond what the Vue Router API provides. In particular, it can be used to programmatically navigate within your app while controlling the animations. It can also be used to determine whether or not users can navigate back which is useful when closing the app after the user presses the hardware back button when on the root page.
+### 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';
@@ -27,8 +35,31 @@ export default defineComponent({
 });
 ```
 
+**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';
@@ -70,7 +101,7 @@ useBackButton(10, () => {
 });
 ```
 
-### Interface
+### Interfaces
 
 ```ts
 type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
@@ -102,7 +133,7 @@ watch(keyboardHeight, () => {
 });
 ```
 
-### Interface
+### Interfaces
 
 ```ts
 interface UseKeyboardResult {

From 7c11f41307d41c7b3eade64f2f0ed97586a1d279 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 19 Oct 2022 11:24:22 -0400
Subject: [PATCH 104/469] docs(android): fix broken image link (#2615)

---
 docs/developing/android.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/developing/android.md b/docs/developing/android.md
index 0e27fa8f624..a294df721c8 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -87,8 +87,8 @@ Click **Create Virtual Device** and select a suitable device definition. If unsu
 
 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 class="device">
-  <img alt="Android Emulator Booting" src="/img/installation/android-emulator-booting.png" />
+<figure className="device">
+  <img alt="Android Emulator Booting" src="/docs/img/installation/android-emulator-booting.png" />
 </figure>
 
 ### Set up an Android Device

From 5503f6e17bb92ede14e3cd4af4934f164d4987a5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 19 Oct 2022 12:26:10 -0400
Subject: [PATCH 105/469] docs(footer): add component playgrounds (#2610)

---
 docs/api/footer.md                            | 235 ++----------------
 static/usage/footer/basic/angular.md          |  10 +
 static/usage/footer/basic/demo.html           |  28 +++
 static/usage/footer/basic/index.md            |  13 +
 static/usage/footer/basic/javascript.md       |  10 +
 static/usage/footer/basic/react.md            |  20 ++
 static/usage/footer/basic/vue.md              |  21 ++
 .../angular/example_component_css.md          |  11 +
 .../angular/example_component_html.md         |  32 +++
 .../footer/custom-scroll-target/demo.html     |  61 +++++
 .../footer/custom-scroll-target/index.md      |  33 +++
 .../footer/custom-scroll-target/javascript.md |  44 ++++
 .../custom-scroll-target/react/main_css.md    |  11 +
 .../custom-scroll-target/react/main_tsx.md    |  44 ++++
 .../usage/footer/custom-scroll-target/vue.md  |  55 ++++
 static/usage/footer/fade/angular.md           |  30 +++
 static/usage/footer/fade/demo.html            |  48 ++++
 static/usage/footer/fade/index.md             |  13 +
 static/usage/footer/fade/javascript.md        |  30 +++
 static/usage/footer/fade/react.md             |  40 +++
 static/usage/footer/fade/vue.md               |  41 +++
 static/usage/footer/no-border/angular.md      |  10 +
 static/usage/footer/no-border/demo.html       |  28 +++
 static/usage/footer/no-border/index.md        |  13 +
 static/usage/footer/no-border/javascript.md   |  10 +
 static/usage/footer/no-border/react.md        |  20 ++
 static/usage/footer/no-border/vue.md          |  21 ++
 static/usage/footer/translucent/angular.md    |  30 +++
 static/usage/footer/translucent/demo.html     |  48 ++++
 static/usage/footer/translucent/index.md      |  13 +
 static/usage/footer/translucent/javascript.md |  30 +++
 static/usage/footer/translucent/react.md      |  40 +++
 static/usage/footer/translucent/vue.md        |  41 +++
 33 files changed, 926 insertions(+), 208 deletions(-)
 create mode 100644 static/usage/footer/basic/angular.md
 create mode 100644 static/usage/footer/basic/demo.html
 create mode 100644 static/usage/footer/basic/index.md
 create mode 100644 static/usage/footer/basic/javascript.md
 create mode 100644 static/usage/footer/basic/react.md
 create mode 100644 static/usage/footer/basic/vue.md
 create mode 100644 static/usage/footer/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/footer/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/footer/custom-scroll-target/demo.html
 create mode 100644 static/usage/footer/custom-scroll-target/index.md
 create mode 100644 static/usage/footer/custom-scroll-target/javascript.md
 create mode 100644 static/usage/footer/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/footer/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/footer/custom-scroll-target/vue.md
 create mode 100644 static/usage/footer/fade/angular.md
 create mode 100644 static/usage/footer/fade/demo.html
 create mode 100644 static/usage/footer/fade/index.md
 create mode 100644 static/usage/footer/fade/javascript.md
 create mode 100644 static/usage/footer/fade/react.md
 create mode 100644 static/usage/footer/fade/vue.md
 create mode 100644 static/usage/footer/no-border/angular.md
 create mode 100644 static/usage/footer/no-border/demo.html
 create mode 100644 static/usage/footer/no-border/index.md
 create mode 100644 static/usage/footer/no-border/javascript.md
 create mode 100644 static/usage/footer/no-border/react.md
 create mode 100644 static/usage/footer/no-border/vue.md
 create mode 100644 static/usage/footer/translucent/angular.md
 create mode 100644 static/usage/footer/translucent/demo.html
 create mode 100644 static/usage/footer/translucent/index.md
 create mode 100644 static/usage/footer/translucent/javascript.md
 create mode 100644 static/usage/footer/translucent/react.md
 create mode 100644 static/usage/footer/translucent/vue.md

diff --git a/docs/api/footer.md b/docs/api/footer.md
index b84948be28a..476ed16c9f6 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-footer"
-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/footer/props.md';
 import Events from '@site/static/auto-generated/footer/events.md';
 import Methods from '@site/static/auto-generated/footer/methods.md';
@@ -21,225 +16,49 @@ import Slots from '@site/static/auto-generated/footer/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-<h2 className="table-of-contents__title">Contents</h2>
+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/footer/basic/index.md';
+
+<Basic />
+
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+## 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/footer/translucent/index.md';
+
+<Translucent />
 
-Footer is a root component of a page that sits at the bottom of the page.
-Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.
 
 ## Fade Footer
 
-The `collapse` property can be set to `'fade'` on a page's `ion-footer` to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications.
+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';
+
+<Fade />
+
 
 ### Usage with Virtual Scroll
 
-Fade footer 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-content>
-<ion-footer collapse="fade">
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
-
+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';
 
-## Usage
+<CustomScrollTarget />
 
-<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' }]}>
+## Borders
 
-<TabItem value="angular">
+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.
 
-```html
-<ion-content></ion-content>
+import NoBorder from '@site/static/usage/footer/no-border/index.md';
 
-<!-- Footer without a border -->
-<ion-footer class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Footer - No Border</ion-title>
-  </ion-toolbar>
-</ion-footer>
+<NoBorder />
 
-<ion-footer>
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-
-<!-- Fade Footer -->
-<ion-footer collapse="fade">
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-content></ion-content>
-
-<!-- Footer without a border -->
-<ion-footer class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Footer - No Border</ion-title>
-  </ion-toolbar>
-</ion-footer>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-
-<!-- Fade Footer -->
-<ion-footer collapse="fade">
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
-
-export const FooterExample: React.FC = () => (
-  <>
-    <IonContent />
-    
-    {/*-- Footer without a border --*/}
-    <IonFooter className="ion-no-border">
-      <IonToolbar>
-        <IonTitle>Footer - No Border</IonTitle>
-      </IonToolbar>
-    </IonFooter>
-
-    <IonFooter>
-      <IonToolbar>
-        <IonTitle>Footer</IonTitle>
-      </IonToolbar>
-    </IonFooter>
-    
-    {/*-- Fade Footer --*/}
-    <IonFooter collapse="fade">
-      <IonToolbar>
-        <IonTitle>Footer</IonTitle>
-      </IonToolbar>
-    </IonFooter>
-  </>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'footer-example',
-  styleUrl: 'footer-example.css'
-})
-export class FooterExample {
-  render() {
-    return [
-      <ion-content></ion-content>,
-
-      {/*-- Footer without a border --*/}
-      <ion-footer class="ion-no-border">
-        <ion-toolbar>
-          <ion-title>Footer - No Border</ion-title>
-        </ion-toolbar>
-      </ion-footer>,
-
-      <ion-footer>
-        <ion-toolbar>
-          <ion-title>Footer</ion-title>
-        </ion-toolbar>
-      </ion-footer>,
-      
-      {/*-- Fade Footer --*/}
-      <ion-footer collapse="fade">
-        <ion-toolbar>
-          <ion-title>Footer</ion-title>
-        </ion-toolbar>
-      </ion-footer>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-content></ion-content>
-  
-  <!-- Footer without a border -->
-  <ion-footer class="ion-no-border">
-    <ion-toolbar>
-      <ion-title>Footer - No Border</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-  
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-  
-  <!-- Fade Footer -->
-  <ion-footer collapse="fade">
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-</template>
-
-<script>
-import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonContent, IonFooter, IonTitle, IonToolbar }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -257,4 +76,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/footer/basic/angular.md b/static/usage/footer/basic/angular.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/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/footer/basic/demo.html b/static/usage/footer/basic/demo.html
new file mode 100644
index 00000000000..607e8c19348
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/footer/basic/index.md b/static/usage/footer/basic/index.md
new file mode 100644
index 00000000000..911217ed217
--- /dev/null
+++ b/static/usage/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/footer/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/basic/javascript.md b/static/usage/footer/basic/javascript.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/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/footer/basic/react.md b/static/usage/footer/basic/react.md
new file mode 100644
index 00000000000..6d7119f0f3f
--- /dev/null
+++ b/static/usage/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/footer/basic/vue.md b/static/usage/footer/basic/vue.md
new file mode 100644
index 00000000000..ed20057150d
--- /dev/null
+++ b/static/usage/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/footer/custom-scroll-target/angular/example_component_css.md b/static/usage/footer/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/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/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/footer/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..db8f0f30a0e
--- /dev/null
+++ b/static/usage/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/footer/custom-scroll-target/demo.html b/static/usage/footer/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..cebbbd8d25c
--- /dev/null
+++ b/static/usage/footer/custom-scroll-target/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>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
new file mode 100644
index 00000000000..5bb19036514
--- /dev/null
+++ b/static/usage/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/footer/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/custom-scroll-target/javascript.md b/static/usage/footer/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..607c759f225
--- /dev/null
+++ b/static/usage/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/footer/custom-scroll-target/react/main_css.md b/static/usage/footer/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/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/footer/custom-scroll-target/react/main_tsx.md b/static/usage/footer/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..425d1ee9528
--- /dev/null
+++ b/static/usage/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/footer/custom-scroll-target/vue.md b/static/usage/footer/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..c7c13e7063c
--- /dev/null
+++ b/static/usage/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/footer/fade/angular.md b/static/usage/footer/fade/angular.md
new file mode 100644
index 00000000000..cff7f1a7531
--- /dev/null
+++ b/static/usage/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/footer/fade/demo.html b/static/usage/footer/fade/demo.html
new file mode 100644
index 00000000000..a131c51b4f4
--- /dev/null
+++ b/static/usage/footer/fade/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>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
new file mode 100644
index 00000000000..82d28edd2d0
--- /dev/null
+++ b/static/usage/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/footer/fade/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/fade/javascript.md b/static/usage/footer/fade/javascript.md
new file mode 100644
index 00000000000..cff7f1a7531
--- /dev/null
+++ b/static/usage/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/footer/fade/react.md b/static/usage/footer/fade/react.md
new file mode 100644
index 00000000000..858ea06635c
--- /dev/null
+++ b/static/usage/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/footer/fade/vue.md b/static/usage/footer/fade/vue.md
new file mode 100644
index 00000000000..8814012da11
--- /dev/null
+++ b/static/usage/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/footer/no-border/angular.md b/static/usage/footer/no-border/angular.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/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/footer/no-border/demo.html b/static/usage/footer/no-border/demo.html
new file mode 100644
index 00000000000..7768a3d2c4f
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/footer/no-border/index.md b/static/usage/footer/no-border/index.md
new file mode 100644
index 00000000000..f4957db5df3
--- /dev/null
+++ b/static/usage/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/footer/no-border/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/no-border/javascript.md b/static/usage/footer/no-border/javascript.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/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/footer/no-border/react.md b/static/usage/footer/no-border/react.md
new file mode 100644
index 00000000000..2c58e513063
--- /dev/null
+++ b/static/usage/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/footer/no-border/vue.md b/static/usage/footer/no-border/vue.md
new file mode 100644
index 00000000000..9a3eccff15a
--- /dev/null
+++ b/static/usage/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/footer/translucent/angular.md b/static/usage/footer/translucent/angular.md
new file mode 100644
index 00000000000..3d8f6098b38
--- /dev/null
+++ b/static/usage/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/footer/translucent/demo.html b/static/usage/footer/translucent/demo.html
new file mode 100644
index 00000000000..46f24df4035
--- /dev/null
+++ b/static/usage/footer/translucent/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>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
new file mode 100644
index 00000000000..320250ab0b6
--- /dev/null
+++ b/static/usage/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/footer/translucent/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/footer/translucent/javascript.md b/static/usage/footer/translucent/javascript.md
new file mode 100644
index 00000000000..029b08984c3
--- /dev/null
+++ b/static/usage/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/footer/translucent/react.md b/static/usage/footer/translucent/react.md
new file mode 100644
index 00000000000..0a3884fb0cd
--- /dev/null
+++ b/static/usage/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/footer/translucent/vue.md b/static/usage/footer/translucent/vue.md
new file mode 100644
index 00000000000..cd64be6bc88
--- /dev/null
+++ b/static/usage/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>
+```

From c6cacef9d6263f9cd7a388692962c4b0a12c142b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 19 Oct 2022 12:26:21 -0400
Subject: [PATCH 106/469] docs(header): add component playgrounds (#2611)

---
 docs/api/header.md                            | 386 +++---------------
 static/usage/header/basic/angular.md          |  10 +
 static/usage/header/basic/demo.html           |  28 ++
 static/usage/header/basic/index.md            |  13 +
 static/usage/header/basic/javascript.md       |  10 +
 static/usage/header/basic/react.md            |  20 +
 static/usage/header/basic/vue.md              |  21 +
 static/usage/header/condense/angular.md       |  38 ++
 static/usage/header/condense/demo.html        |  56 +++
 static/usage/header/condense/index.md         |  13 +
 static/usage/header/condense/javascript.md    |  38 ++
 static/usage/header/condense/react.md         |  48 +++
 static/usage/header/condense/vue.md           |  49 +++
 .../angular/example_component_css.md          |  10 +
 .../angular/example_component_html.md         |  32 ++
 .../header/custom-scroll-target/demo.html     |  61 +++
 .../header/custom-scroll-target/index.md      |  33 ++
 .../header/custom-scroll-target/javascript.md |  43 ++
 .../custom-scroll-target/react/main_css.md    |  10 +
 .../custom-scroll-target/react/main_tsx.md    |  44 ++
 .../usage/header/custom-scroll-target/vue.md  |  55 +++
 static/usage/header/fade/angular.md           |  30 ++
 static/usage/header/fade/demo.html            |  48 +++
 static/usage/header/fade/index.md             |  13 +
 static/usage/header/fade/javascript.md        |  30 ++
 static/usage/header/fade/react.md             |  40 ++
 static/usage/header/fade/vue.md               |  41 ++
 static/usage/header/no-border/angular.md      |  10 +
 static/usage/header/no-border/demo.html       |  28 ++
 static/usage/header/no-border/index.md        |  13 +
 static/usage/header/no-border/javascript.md   |  10 +
 static/usage/header/no-border/react.md        |  20 +
 static/usage/header/no-border/vue.md          |  21 +
 static/usage/header/translucent/angular.md    |  30 ++
 static/usage/header/translucent/demo.html     |  48 +++
 static/usage/header/translucent/index.md      |  13 +
 static/usage/header/translucent/javascript.md |  30 ++
 static/usage/header/translucent/react.md      |  40 ++
 static/usage/header/translucent/vue.md        |  41 ++
 39 files changed, 1185 insertions(+), 339 deletions(-)
 create mode 100644 static/usage/header/basic/angular.md
 create mode 100644 static/usage/header/basic/demo.html
 create mode 100644 static/usage/header/basic/index.md
 create mode 100644 static/usage/header/basic/javascript.md
 create mode 100644 static/usage/header/basic/react.md
 create mode 100644 static/usage/header/basic/vue.md
 create mode 100644 static/usage/header/condense/angular.md
 create mode 100644 static/usage/header/condense/demo.html
 create mode 100644 static/usage/header/condense/index.md
 create mode 100644 static/usage/header/condense/javascript.md
 create mode 100644 static/usage/header/condense/react.md
 create mode 100644 static/usage/header/condense/vue.md
 create mode 100644 static/usage/header/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/header/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/header/custom-scroll-target/demo.html
 create mode 100644 static/usage/header/custom-scroll-target/index.md
 create mode 100644 static/usage/header/custom-scroll-target/javascript.md
 create mode 100644 static/usage/header/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/header/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/header/custom-scroll-target/vue.md
 create mode 100644 static/usage/header/fade/angular.md
 create mode 100644 static/usage/header/fade/demo.html
 create mode 100644 static/usage/header/fade/index.md
 create mode 100644 static/usage/header/fade/javascript.md
 create mode 100644 static/usage/header/fade/react.md
 create mode 100644 static/usage/header/fade/vue.md
 create mode 100644 static/usage/header/no-border/angular.md
 create mode 100644 static/usage/header/no-border/demo.html
 create mode 100644 static/usage/header/no-border/index.md
 create mode 100644 static/usage/header/no-border/javascript.md
 create mode 100644 static/usage/header/no-border/react.md
 create mode 100644 static/usage/header/no-border/vue.md
 create mode 100644 static/usage/header/translucent/angular.md
 create mode 100644 static/usage/header/translucent/demo.html
 create mode 100644 static/usage/header/translucent/index.md
 create mode 100644 static/usage/header/translucent/javascript.md
 create mode 100644 static/usage/header/translucent/react.md
 create mode 100644 static/usage/header/translucent/vue.md

diff --git a/docs/api/header.md b/docs/api/header.md
index 81d742c0f31..4bb6b8e11f2 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-header"
-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/header/props.md';
 import Events from '@site/static/auto-generated/header/events.md';
 import Methods from '@site/static/auto-generated/header/methods.md';
@@ -20,350 +15,63 @@ import Slots from '@site/static/auto-generated/header/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-<h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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/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/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/header/condense/index.md';
+
+<Condense />
 
-Header is a parent component that holds the toolbar component.
-It's important to note that ion-header needs to be the one of the three root elements of a page
 
 ## Fade Header
 
-The `collapse` property can be set to `'fade'` on a page's main `ion-header` to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications.
+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/header/fade/index.md';
+
+<Fade />
 
-This functionality can be combined with [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) as well. The `collapse="condense"` value should be set on the `ion-header` inside of your `ion-content`. The `collapse="fade"` value should be set on the `ion-header` outside of your `ion-content`.
 
 ### Usage with Virtual Scroll
 
-Fade and collapsible large titles require 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-header collapse="fade">
-  <ion-toolbar>
-    <ion-title>Header</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content fullscreen="true" scroll-y="false">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Header</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <virtual-scroll-element class="ion-content-scroll-host">
-    <!-- Your virtual scroll content -->
-  </virtual-scroll-element>
-</ion-content>
-```
-
-
-
-## 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-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>My Navigation Bar</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-title>Subheader</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<!-- Header without a border -->
-<ion-header class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Header - No Border</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">My Navigation Bar</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
-
-<!-- Fade Header with collapse header -->
-<ion-header collapse="fade" [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>
-</ion-content>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>My Navigation Bar</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-title>Subheader</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<!-- Header without a border -->
-<ion-header class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Header - No Border</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">My Navigation Bar</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
-
-<!-- Fade Header with collapse header -->
-<ion-header collapse="fade" 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>
-</ion-content>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
-
-export const HeaderExample: React.FC = () => (
-  <>
-    <IonHeader>
-      <IonToolbar>
-        <IonButtons slot="start">
-          <IonBackButton defaultHref="/" />
-        </IonButtons>
-        <IonTitle>My Navigation Bar</IonTitle>
-      </IonToolbar>
-    
-      <IonToolbar>
-        <IonTitle>Subheader</IonTitle>
-      </IonToolbar>
-    </IonHeader>
-    
-    {/*-- Header without a border --*/}
-    <IonHeader className="ion-no-border">
-     <IonToolbar>
-      <IonTitle>Header - No Border</IonTitle>
-     </IonToolbar>
-    </IonHeader>
-    
-    <IonContent>
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle size="large">My Navigation Bar</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-    </IonContent>
-    
-    {/*-- Fade Header with collapse header --*/}
-    <IonHeader collapse="fade" translucent={true}>
-      <IonToolbar>
-        <IonTitle>Header</IonTitle>
-      </IonToolbar>
-    </IonHeader>
-    
-    <IonContent fullscreen={true}>
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle size="large">Header</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-    </IonContent>
-  </>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'header-example',
-  styleUrl: 'header-example.css'
-})
-export class HeaderExample {
-  render() {
-    return [
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>My Navigation Bar</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-title>Subheader</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-
-      {/*-- Header without a border --*/}
-      <ion-header class="ion-no-border">
-        <ion-toolbar>
-          <ion-title>Header - No Border</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-
-      <ion-content>
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">My Navigation Bar</ion-title>
-          </ion-toolbar>
-        </ion-header>
-      </ion-content>,
-      
-      {/*-- Fade Header with collapse header --*/}
-      <ion-header collapse="fade" 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>
-      </ion-content>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button></ion-back-button>
-      </ion-buttons>
-      <ion-title>My Navigation Bar</ion-title>
-    </ion-toolbar>
-  
-    <ion-toolbar>
-      <ion-title>Subheader</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  
-  <!-- Header without a border -->
-  <ion-header class="ion-no-border">
-    <ion-toolbar>
-      <ion-title>Header - No Border</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  
-  <ion-content>
-    <ion-header collapse="condense">
-      <ion-toolbar>
-        <ion-title size="large">My Navigation Bar</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  </ion-content>
-  
-  <!-- Fade Header with collapse header -->
-  <ion-header collapse="fade" :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>
-  </ion-content>
-</template>
-
-<script>
-import { 
-  IonBackButton, 
-  IonButtons, 
-  IonContent, 
-  IonHeader, 
-  IonTitle, 
-  IonToolbar
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { 
-    IonBackButton, 
-    IonButtons, 
-    IonContent, 
-    IonHeader, 
-    IonTitle, 
-    IonToolbar
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
+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';
+
+<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/header/no-border/index.md';
+
+<NoBorder />
+
 
 ## Properties
 <Props />
@@ -381,4 +89,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/header/basic/angular.md b/static/usage/header/basic/angular.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/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/header/basic/demo.html b/static/usage/header/basic/demo.html
new file mode 100644
index 00000000000..bb0b02bcb02
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/header/basic/index.md b/static/usage/header/basic/index.md
new file mode 100644
index 00000000000..c8cfd97baac
--- /dev/null
+++ b/static/usage/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/header/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/basic/javascript.md b/static/usage/header/basic/javascript.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/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/header/basic/react.md b/static/usage/header/basic/react.md
new file mode 100644
index 00000000000..0dd2df0474d
--- /dev/null
+++ b/static/usage/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/header/basic/vue.md b/static/usage/header/basic/vue.md
new file mode 100644
index 00000000000..1bba4fdee2b
--- /dev/null
+++ b/static/usage/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/header/condense/angular.md b/static/usage/header/condense/angular.md
new file mode 100644
index 00000000000..46ac7fac8ea
--- /dev/null
+++ b/static/usage/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/header/condense/demo.html b/static/usage/header/condense/demo.html
new file mode 100644
index 00000000000..bdb2348ae60
--- /dev/null
+++ b/static/usage/header/condense/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>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
new file mode 100644
index 00000000000..b69e31dbefd
--- /dev/null
+++ b/static/usage/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/header/condense/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/condense/javascript.md b/static/usage/header/condense/javascript.md
new file mode 100644
index 00000000000..95ac5731c47
--- /dev/null
+++ b/static/usage/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/header/condense/react.md b/static/usage/header/condense/react.md
new file mode 100644
index 00000000000..0f68407aff0
--- /dev/null
+++ b/static/usage/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/header/condense/vue.md b/static/usage/header/condense/vue.md
new file mode 100644
index 00000000000..c3f354d010f
--- /dev/null
+++ b/static/usage/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/header/custom-scroll-target/angular/example_component_css.md b/static/usage/header/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/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/header/custom-scroll-target/angular/example_component_html.md b/static/usage/header/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..b54ba9d2afa
--- /dev/null
+++ b/static/usage/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/header/custom-scroll-target/demo.html b/static/usage/header/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..9422c928694
--- /dev/null
+++ b/static/usage/header/custom-scroll-target/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>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
new file mode 100644
index 00000000000..a81bcadf5d6
--- /dev/null
+++ b/static/usage/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/header/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/custom-scroll-target/javascript.md b/static/usage/header/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..64077515677
--- /dev/null
+++ b/static/usage/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/header/custom-scroll-target/react/main_css.md b/static/usage/header/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/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/header/custom-scroll-target/react/main_tsx.md b/static/usage/header/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..bf6d13f26ec
--- /dev/null
+++ b/static/usage/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/header/custom-scroll-target/vue.md b/static/usage/header/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..73565d9ab18
--- /dev/null
+++ b/static/usage/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/header/fade/angular.md b/static/usage/header/fade/angular.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/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/header/fade/demo.html b/static/usage/header/fade/demo.html
new file mode 100644
index 00000000000..402be861b51
--- /dev/null
+++ b/static/usage/header/fade/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>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
new file mode 100644
index 00000000000..3f116bb6e05
--- /dev/null
+++ b/static/usage/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/header/fade/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/fade/javascript.md b/static/usage/header/fade/javascript.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/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/header/fade/react.md b/static/usage/header/fade/react.md
new file mode 100644
index 00000000000..453f32c4db4
--- /dev/null
+++ b/static/usage/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/header/fade/vue.md b/static/usage/header/fade/vue.md
new file mode 100644
index 00000000000..44327bf809c
--- /dev/null
+++ b/static/usage/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/header/no-border/angular.md b/static/usage/header/no-border/angular.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/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/header/no-border/demo.html b/static/usage/header/no-border/demo.html
new file mode 100644
index 00000000000..e7502db9b80
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/header/no-border/index.md b/static/usage/header/no-border/index.md
new file mode 100644
index 00000000000..71bdc4a6296
--- /dev/null
+++ b/static/usage/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/header/no-border/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/no-border/javascript.md b/static/usage/header/no-border/javascript.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/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/header/no-border/react.md b/static/usage/header/no-border/react.md
new file mode 100644
index 00000000000..2eb14f6882f
--- /dev/null
+++ b/static/usage/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/header/no-border/vue.md b/static/usage/header/no-border/vue.md
new file mode 100644
index 00000000000..a5583fb06d1
--- /dev/null
+++ b/static/usage/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/header/translucent/angular.md b/static/usage/header/translucent/angular.md
new file mode 100644
index 00000000000..f2779c7d5c9
--- /dev/null
+++ b/static/usage/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/header/translucent/demo.html b/static/usage/header/translucent/demo.html
new file mode 100644
index 00000000000..7fae6338972
--- /dev/null
+++ b/static/usage/header/translucent/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>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
new file mode 100644
index 00000000000..dcdc0cb3684
--- /dev/null
+++ b/static/usage/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/header/translucent/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/header/translucent/javascript.md b/static/usage/header/translucent/javascript.md
new file mode 100644
index 00000000000..e03deeda2a5
--- /dev/null
+++ b/static/usage/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/header/translucent/react.md b/static/usage/header/translucent/react.md
new file mode 100644
index 00000000000..862211d839b
--- /dev/null
+++ b/static/usage/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/header/translucent/vue.md b/static/usage/header/translucent/vue.md
new file mode 100644
index 00000000000..34a4c740014
--- /dev/null
+++ b/static/usage/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>
+```

From 88eceea4ad45837f993b3a81b8f1821a0b1ee26f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 19 Oct 2022 13:54:27 -0400
Subject: [PATCH 107/469] chore(playground): update react/vue lock dependencies
 (#2619)

---
 .gitignore                                    |  4 +-
 .../code/stackblitz/react/package-lock.json   | 62 +++++++++----------
 static/code/stackblitz/vue/package-lock.json  | 62 +++++++++----------
 3 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/.gitignore b/.gitignore
index 31aea381f0b..71e2c8eba4d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,4 +19,6 @@ src/components/page/reference/ReleaseNotes/release-notes.json
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
+yarn-error.log*
+
+static/**/node_modules/
diff --git a/static/code/stackblitz/react/package-lock.json b/static/code/stackblitz/react/package-lock.json
index ed487ca7844..5dde9f664f2 100644
--- a/static/code/stackblitz/react/package-lock.json
+++ b/static/code/stackblitz/react/package-lock.json
@@ -8,7 +8,7 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^6.2.0",
+        "@ionic/react": "^6.3.2",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -2201,21 +2201,21 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
-      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
       "dependencies": {
-        "@stencil/core": "^2.16.0",
-        "ionicons": "^6.0.2",
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
-      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
+      "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.2.2",
+        "@ionic/core": "^6.3.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -3138,9 +3138,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.17.3",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
-      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg==",
+      "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"
       },
@@ -8402,9 +8402,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "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"
       }
@@ -17714,21 +17714,21 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
-      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
       "requires": {
-        "@stencil/core": "^2.16.0",
-        "ionicons": "^6.0.2",
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/react": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
-      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
+      "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.2.2",
+        "@ionic/core": "^6.3.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
@@ -18393,9 +18393,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.17.3",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
-      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg=="
+      "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",
@@ -22229,9 +22229,9 @@
       }
     },
     "ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "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"
       },
diff --git a/static/code/stackblitz/vue/package-lock.json b/static/code/stackblitz/vue/package-lock.json
index 35071ab75f2..a3c9968e5ba 100644
--- a/static/code/stackblitz/vue/package-lock.json
+++ b/static/code/stackblitz/vue/package-lock.json
@@ -8,7 +8,7 @@
       "name": "vite-vue-starter",
       "version": "0.0.0",
       "dependencies": {
-        "@ionic/vue": "^6.0.0",
+        "@ionic/vue": "^6.3.2",
         "vue": "^3.2.25",
         "vue-router": "4.0.13"
       },
@@ -31,28 +31,28 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
-      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
       "dependencies": {
-        "@stencil/core": "^2.16.0",
-        "ionicons": "^6.0.2",
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.2.0.tgz",
-      "integrity": "sha512-tF+922bNLBTrN204CRUBDDRc6E+ygkMExxH2RX/QlXyRaVbSbmVlYXFe56nCu8caZgFlX711lHhHL1D+FsnOng==",
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.2.tgz",
+      "integrity": "sha512-jvcqcVG6cgFBP+JtLW1dg8a77wYLsFpx1vcC0LK59OmFVLkEIcE6TodhXmfaJVglkXTVMbzPRvO7xIUVHydQzQ==",
       "dependencies": {
-        "@ionic/core": "^6.2.0",
+        "@ionic/core": "^6.3.2",
         "ionicons": "^6.0.2"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
-      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg==",
+      "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"
       },
@@ -620,9 +620,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "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"
       }
@@ -873,28 +873,28 @@
       "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
     },
     "@ionic/core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
-      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
+      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
       "requires": {
-        "@stencil/core": "^2.16.0",
-        "ionicons": "^6.0.2",
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/vue": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.2.0.tgz",
-      "integrity": "sha512-tF+922bNLBTrN204CRUBDDRc6E+ygkMExxH2RX/QlXyRaVbSbmVlYXFe56nCu8caZgFlX711lHhHL1D+FsnOng==",
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.2.tgz",
+      "integrity": "sha512-jvcqcVG6cgFBP+JtLW1dg8a77wYLsFpx1vcC0LK59OmFVLkEIcE6TodhXmfaJVglkXTVMbzPRvO7xIUVHydQzQ==",
       "requires": {
-        "@ionic/core": "^6.2.0",
+        "@ionic/core": "^6.3.2",
         "ionicons": "^6.0.2"
       }
     },
     "@stencil/core": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
-      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg=="
+      "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",
@@ -1248,9 +1248,9 @@
       }
     },
     "ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "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"
       },

From c5170bb2dd91a57bbc1c12692d5675a6cb7b9b67 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 19 Oct 2022 16:49:40 -0400
Subject: [PATCH 108/469] chore(playground): update playground file names and
 imports to match best practices (#2609)

---
 ...ngular-css.md => example_component_css.md} |  0
 ...ular-html.md => example_component_html.md} |  0
 ...{angular-ts.md => example_component_ts.md} |  0
 .../advanced-expansion-styles/index.md        | 20 ++++++-------
 .../react/{react-css.md => main_css.md}       |  0
 .../react/{react-ts.md => main_tsx.md}        |  0
 ...ular-html.md => example_component_html.md} |  0
 .../angular/{angular-css.md => global_css.md} |  0
 .../accordion/customization/theming/index.md  | 16 +++++------
 .../react/{react-css.md => main_css.md}       |  0
 .../react/{react-ts.md => main_tsx.md}        |  0
 .../example_component_html.md}                |  0
 .../example_component_ts.md}                  |  0
 .../usage/accordion/listen-changes/index.md   |  9 +++---
 .../example_component_html.md}                |  0
 .../example_component_ts.md}                  |  0
 static/usage/accordion/toggle/index.md        |  9 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 static/usage/alert/buttons/index.md           |  8 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../angular/{angular_css.md => global_css.md} |  0
 static/usage/alert/customization/index.md     | 20 ++++++-------
 .../react/{react_css.md => main_css.md}       |  0
 .../react/{react_ts.md => main_tsx.md}        |  0
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 static/usage/alert/inputs/radios/index.md     |  8 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../usage/alert/inputs/text-inputs/index.md   |  8 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../alert/presenting/controller/index.md      |  8 +++---
 .../avatar/theming/css-properties/index.md    | 16 +++++------
 ...ngular-css.md => example_component_css.md} |  0
 ...ular-html.md => example_component_html.md} |  0
 .../badge/theming/css-properties/index.md     | 16 +++++------
 .../react/{react-css.md => main_css.md}       |  0
 .../react/{react-ts.md => main_tsx.md}        |  0
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../collapsing-items/expand-on-click/index.md |  8 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../popover-on-click/index.md                 |  8 +++---
 ...ngular_css.md => example_component_css.md} |  0
 ...ular_html.md => example_component_html.md} |  0
 .../theming/css-properties/index.md           | 16 +++++------
 .../react/{react_css.md => main_css.md}       |  0
 .../react/{react_ts.md => main_tsx.md}        |  0
 .../button/theming/css-properties/index.md    | 16 +++++------
 .../example_component_html.md}                |  0
 .../example_component_ts.md}                  |  0
 .../date-constraints/advanced/index.md        |  9 +++---
 .../example_component_html.md}                |  0
 .../{angular-css.md => angular/global_css.md} |  0
 static/usage/datetime/theming/index.md        | 21 ++++++++------
 .../{react-css.md => react/main_css.md}       |  0
 .../{react-html.md => react/main_tsx.md}      |  0
 .../theming/css-properties/index.md           | 16 +++++------
 .../{html.md => example_component_html.md}    |  0
 .../{ts.md => example_component_ts.md}        |  0
 static/usage/loading/controller/index.md      |  8 +++---
 .../{html.md => example_component_html.md}    |  0
 .../{ts.md => example_component_ts.md}        |  0
 static/usage/loading/spinners/index.md        |  8 +++---
 .../{html.md => example_component_html.md}    |  0
 .../{ts.md => example_component_ts.md}        |  0
 .../theming/angular/{css.md => global_css.md} |  0
 static/usage/loading/theming/index.md         | 20 ++++++-------
 .../theming/react/{css.md => main_css.md}     |  0
 .../theming/react/{tsx.md => main_tsx.md}     |  0
 .../angular/{angular_css.md => global_css.md} |  0
 static/usage/modal/custom-dialogs/index.md    |  4 +--
 ...ngular_css.md => example_component_css.md} |  0
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../customization/positioning/index.md        | 20 ++++++-------
 .../react/{react_css.md => main_css.md}       |  0
 .../react/{react_ts.md => main_tsx.md}        |  0
 ...ular_html.md => example_component_html.md} |  0
 .../angular/{angular_css.md => global_css.md} |  0
 .../popover/customization/styling/index.md    | 16 +++++------
 .../react/{react_css.md => main_css.md}       |  0
 .../react/{react_ts.md => main_tsx.md}        |  0
 .../{angular_module.md => app_module_ts.md}   |  0
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 ...over_html.md => popover_component_html.md} |  0
 ..._popover_ts.md => popover_component_ts.md} |  0
 .../popover/presenting/controller/index.md    | 28 +++++++++----------
 .../vue/{vue_main.md => example_vue.md}       |  0
 .../vue/{vue_popover.md => popover_vue.md}    |  0
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../popover/presenting/inline-isopen/index.md |  8 +++---
 .../theming/css-properties/index.md           | 16 +++++------
 .../theming/css-shadow-parts/index.md         | 16 +++++------
 .../radio/theming/css-properties/index.md     | 16 +++++------
 .../radio/theming/css-shadow-parts/index.md   | 16 +++++------
 .../searchbar/theming/css-properties/index.md | 16 +++++------
 .../basic/responding-to-interaction/index.md  |  8 +++---
 .../customization/interface-options/index.md  |  8 +++---
 ...ngular-css.md => example_component_css.md} |  0
 ...ular-html.md => example_component_html.md} |  0
 ...{angular-ts.md => example_component_ts.md} |  0
 .../customization/styling-select/index.md     | 20 ++++++-------
 .../react/{react-css.md => main_css.md}       |  0
 .../react/{react-ts.md => main_tsx.md}        |  0
 .../multiple-selection/index.md               |  8 +++---
 .../using-comparewith/index.md                |  8 +++---
 static/usage/skeleton-text/basic/index.md     |  8 +++---
 .../theming/css-properties/index.md           | 16 +++++------
 .../spinner/theming/css-properties/index.md   | 16 +++++------
 .../thumbnail/theming/css-properties/index.md | 16 +++++------
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 static/usage/toast/buttons/index.md           |  8 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 static/usage/toast/icon/index.md              |  8 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../toast/presenting/controller/index.md      |  8 +++---
 ...ular_html.md => example_component_html.md} |  0
 ...{angular_ts.md => example_component_ts.md} |  0
 .../angular/{angular_css.md => global_css.md} |  0
 static/usage/toast/theming/index.md           | 20 ++++++-------
 .../react/{react_css.md => main_css.md}       |  0
 .../react/{react_ts.md => main_tsx.md}        |  0
 .../toolbar/theming/css-properties/index.md   | 16 +++++------
 133 files changed, 299 insertions(+), 293 deletions(-)
 rename static/usage/accordion/customization/advanced-expansion-styles/angular/{angular-css.md => example_component_css.md} (100%)
 rename static/usage/accordion/customization/advanced-expansion-styles/angular/{angular-html.md => example_component_html.md} (100%)
 rename static/usage/accordion/customization/advanced-expansion-styles/angular/{angular-ts.md => example_component_ts.md} (100%)
 rename static/usage/accordion/customization/advanced-expansion-styles/react/{react-css.md => main_css.md} (100%)
 rename static/usage/accordion/customization/advanced-expansion-styles/react/{react-ts.md => main_tsx.md} (100%)
 rename static/usage/accordion/customization/theming/angular/{angular-html.md => example_component_html.md} (100%)
 rename static/usage/accordion/customization/theming/angular/{angular-css.md => global_css.md} (100%)
 rename static/usage/accordion/customization/theming/react/{react-css.md => main_css.md} (100%)
 rename static/usage/accordion/customization/theming/react/{react-ts.md => main_tsx.md} (100%)
 rename static/usage/accordion/listen-changes/{angular-html.md => angular/example_component_html.md} (100%)
 rename static/usage/accordion/listen-changes/{angular-ts.md => angular/example_component_ts.md} (100%)
 rename static/usage/accordion/toggle/{angular-html.md => angular/example_component_html.md} (100%)
 rename static/usage/accordion/toggle/{angular-ts.md => angular/example_component_ts.md} (100%)
 rename static/usage/alert/buttons/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/alert/buttons/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/alert/customization/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/alert/customization/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/alert/customization/angular/{angular_css.md => global_css.md} (100%)
 rename static/usage/alert/customization/react/{react_css.md => main_css.md} (100%)
 rename static/usage/alert/customization/react/{react_ts.md => main_tsx.md} (100%)
 rename static/usage/alert/inputs/radios/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/alert/inputs/radios/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/alert/inputs/text-inputs/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/alert/inputs/text-inputs/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/alert/presenting/controller/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/alert/presenting/controller/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/badge/theming/css-properties/angular/{angular-css.md => example_component_css.md} (100%)
 rename static/usage/badge/theming/css-properties/angular/{angular-html.md => example_component_html.md} (100%)
 rename static/usage/badge/theming/css-properties/react/{react-css.md => main_css.md} (100%)
 rename static/usage/badge/theming/css-properties/react/{react-ts.md => main_tsx.md} (100%)
 rename static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/breadcrumbs/theming/css-properties/angular/{angular_css.md => example_component_css.md} (100%)
 rename static/usage/breadcrumbs/theming/css-properties/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/breadcrumbs/theming/css-properties/react/{react_css.md => main_css.md} (100%)
 rename static/usage/breadcrumbs/theming/css-properties/react/{react_ts.md => main_tsx.md} (100%)
 rename static/usage/datetime/date-constraints/advanced/{angular-html.md => angular/example_component_html.md} (100%)
 rename static/usage/datetime/date-constraints/advanced/{angular-ts.md => angular/example_component_ts.md} (100%)
 rename static/usage/datetime/theming/{angular-html.md => angular/example_component_html.md} (100%)
 rename static/usage/datetime/theming/{angular-css.md => angular/global_css.md} (100%)
 rename static/usage/datetime/theming/{react-css.md => react/main_css.md} (100%)
 rename static/usage/datetime/theming/{react-html.md => react/main_tsx.md} (100%)
 rename static/usage/loading/controller/angular/{html.md => example_component_html.md} (100%)
 rename static/usage/loading/controller/angular/{ts.md => example_component_ts.md} (100%)
 rename static/usage/loading/spinners/angular/{html.md => example_component_html.md} (100%)
 rename static/usage/loading/spinners/angular/{ts.md => example_component_ts.md} (100%)
 rename static/usage/loading/theming/angular/{html.md => example_component_html.md} (100%)
 rename static/usage/loading/theming/angular/{ts.md => example_component_ts.md} (100%)
 rename static/usage/loading/theming/angular/{css.md => global_css.md} (100%)
 rename static/usage/loading/theming/react/{css.md => main_css.md} (100%)
 rename static/usage/loading/theming/react/{tsx.md => main_tsx.md} (100%)
 rename static/usage/modal/custom-dialogs/angular/{angular_css.md => global_css.md} (100%)
 rename static/usage/popover/customization/positioning/angular/{angular_css.md => example_component_css.md} (100%)
 rename static/usage/popover/customization/positioning/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/popover/customization/positioning/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/popover/customization/positioning/react/{react_css.md => main_css.md} (100%)
 rename static/usage/popover/customization/positioning/react/{react_ts.md => main_tsx.md} (100%)
 rename static/usage/popover/customization/styling/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/popover/customization/styling/angular/{angular_css.md => global_css.md} (100%)
 rename static/usage/popover/customization/styling/react/{react_css.md => main_css.md} (100%)
 rename static/usage/popover/customization/styling/react/{react_ts.md => main_tsx.md} (100%)
 rename static/usage/popover/presenting/controller/angular/{angular_module.md => app_module_ts.md} (100%)
 rename static/usage/popover/presenting/controller/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/popover/presenting/controller/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/popover/presenting/controller/angular/{angular_popover_html.md => popover_component_html.md} (100%)
 rename static/usage/popover/presenting/controller/angular/{angular_popover_ts.md => popover_component_ts.md} (100%)
 rename static/usage/popover/presenting/controller/vue/{vue_main.md => example_vue.md} (100%)
 rename static/usage/popover/presenting/controller/vue/{vue_popover.md => popover_vue.md} (100%)
 rename static/usage/popover/presenting/inline-isopen/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/popover/presenting/inline-isopen/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/select/customization/styling-select/angular/{angular-css.md => example_component_css.md} (100%)
 rename static/usage/select/customization/styling-select/angular/{angular-html.md => example_component_html.md} (100%)
 rename static/usage/select/customization/styling-select/angular/{angular-ts.md => example_component_ts.md} (100%)
 rename static/usage/select/customization/styling-select/react/{react-css.md => main_css.md} (100%)
 rename static/usage/select/customization/styling-select/react/{react-ts.md => main_tsx.md} (100%)
 rename static/usage/toast/buttons/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/toast/buttons/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/toast/icon/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/toast/icon/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/toast/presenting/controller/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/toast/presenting/controller/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/toast/theming/angular/{angular_html.md => example_component_html.md} (100%)
 rename static/usage/toast/theming/angular/{angular_ts.md => example_component_ts.md} (100%)
 rename static/usage/toast/theming/angular/{angular_css.md => global_css.md} (100%)
 rename static/usage/toast/theming/react/{react_css.md => main_css.md} (100%)
 rename static/usage/toast/theming/react/{react_ts.md => main_tsx.md} (100%)

diff --git a/static/usage/accordion/customization/advanced-expansion-styles/angular/angular-css.md b/static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/angular/angular-css.md
rename to static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/angular/angular-html.md b/static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/angular/angular-html.md
rename to static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/angular/angular-ts.md b/static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/angular/angular-ts.md
rename to static/usage/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/index.md b/static/usage/accordion/customization/advanced-expansion-styles/index.md
index b01ea6391d1..509bfebbf89 100644
--- a/static/usage/accordion/customization/advanced-expansion-styles/index.md
+++ b/static/usage/accordion/customization/advanced-expansion-styles/index.md
@@ -2,30 +2,30 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTS from './react/react-ts.md';
-import reactCSS from './react/react-css.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 angularHTML from './angular/angular-html.md';
-import angularCSS from './angular/angular-css.md';
-import angularTS from './angular/angular-ts.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': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS,
-        'src/app/example.component.ts': angularTS,
+        '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,
       },
     },
   }}
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/react/react-css.md b/static/usage/accordion/customization/advanced-expansion-styles/react/main_css.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/react/react-css.md
rename to static/usage/accordion/customization/advanced-expansion-styles/react/main_css.md
diff --git a/static/usage/accordion/customization/advanced-expansion-styles/react/react-ts.md b/static/usage/accordion/customization/advanced-expansion-styles/react/main_tsx.md
similarity index 100%
rename from static/usage/accordion/customization/advanced-expansion-styles/react/react-ts.md
rename to static/usage/accordion/customization/advanced-expansion-styles/react/main_tsx.md
diff --git a/static/usage/accordion/customization/theming/angular/angular-html.md b/static/usage/accordion/customization/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/customization/theming/angular/angular-html.md
rename to static/usage/accordion/customization/theming/angular/example_component_html.md
diff --git a/static/usage/accordion/customization/theming/angular/angular-css.md b/static/usage/accordion/customization/theming/angular/global_css.md
similarity index 100%
rename from static/usage/accordion/customization/theming/angular/angular-css.md
rename to static/usage/accordion/customization/theming/angular/global_css.md
diff --git a/static/usage/accordion/customization/theming/index.md b/static/usage/accordion/customization/theming/index.md
index 8ca4314cca2..cc22601ae22 100644
--- a/static/usage/accordion/customization/theming/index.md
+++ b/static/usage/accordion/customization/theming/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTS from './react/react-ts.md';
-import reactCSS from './react/react-css.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 angularCSS from './angular/angular-css.md';
-import angularHTML from './angular/angular-html.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': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/global.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
       }
     }
   }}
diff --git a/static/usage/accordion/customization/theming/react/react-css.md b/static/usage/accordion/customization/theming/react/main_css.md
similarity index 100%
rename from static/usage/accordion/customization/theming/react/react-css.md
rename to static/usage/accordion/customization/theming/react/main_css.md
diff --git a/static/usage/accordion/customization/theming/react/react-ts.md b/static/usage/accordion/customization/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/accordion/customization/theming/react/react-ts.md
rename to static/usage/accordion/customization/theming/react/main_tsx.md
diff --git a/static/usage/accordion/listen-changes/angular-html.md b/static/usage/accordion/listen-changes/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/listen-changes/angular-html.md
rename to static/usage/accordion/listen-changes/angular/example_component_html.md
diff --git a/static/usage/accordion/listen-changes/angular-ts.md b/static/usage/accordion/listen-changes/angular/example_component_ts.md
similarity index 100%
rename from static/usage/accordion/listen-changes/angular-ts.md
rename to static/usage/accordion/listen-changes/angular/example_component_ts.md
diff --git a/static/usage/accordion/listen-changes/index.md b/static/usage/accordion/listen-changes/index.md
index d5f2eac4b56..c28505750a4 100644
--- a/static/usage/accordion/listen-changes/index.md
+++ b/static/usage/accordion/listen-changes/index.md
@@ -3,8 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angularHTML from './angular-html.md';
-import angularTS from './angular-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={{
@@ -13,8 +14,8 @@ import angularTS from './angular-ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/accordion/toggle/angular-html.md b/static/usage/accordion/toggle/angular/example_component_html.md
similarity index 100%
rename from static/usage/accordion/toggle/angular-html.md
rename to static/usage/accordion/toggle/angular/example_component_html.md
diff --git a/static/usage/accordion/toggle/angular-ts.md b/static/usage/accordion/toggle/angular/example_component_ts.md
similarity index 100%
rename from static/usage/accordion/toggle/angular-ts.md
rename to static/usage/accordion/toggle/angular/example_component_ts.md
diff --git a/static/usage/accordion/toggle/index.md b/static/usage/accordion/toggle/index.md
index 7f47e805c13..529264aa08c 100644
--- a/static/usage/accordion/toggle/index.md
+++ b/static/usage/accordion/toggle/index.md
@@ -3,8 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angularHTML from './angular-html.md';
-import angularTS from './angular-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={{
@@ -13,8 +14,8 @@ import angularTS from './angular-ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/alert/buttons/angular/angular_html.md b/static/usage/alert/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/buttons/angular/angular_html.md
rename to static/usage/alert/buttons/angular/example_component_html.md
diff --git a/static/usage/alert/buttons/angular/angular_ts.md b/static/usage/alert/buttons/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/buttons/angular/angular_ts.md
rename to static/usage/alert/buttons/angular/example_component_ts.md
diff --git a/static/usage/alert/buttons/index.md b/static/usage/alert/buttons/index.md
index b3bb80edbac..6d37c630f24 100644
--- a/static/usage/alert/buttons/index.md
+++ b/static/usage/alert/buttons/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   size="300px"
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/alert/customization/angular/angular_html.md b/static/usage/alert/customization/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/customization/angular/angular_html.md
rename to static/usage/alert/customization/angular/example_component_html.md
diff --git a/static/usage/alert/customization/angular/angular_ts.md b/static/usage/alert/customization/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/customization/angular/angular_ts.md
rename to static/usage/alert/customization/angular/example_component_ts.md
diff --git a/static/usage/alert/customization/angular/angular_css.md b/static/usage/alert/customization/angular/global_css.md
similarity index 100%
rename from static/usage/alert/customization/angular/angular_css.md
rename to static/usage/alert/customization/angular/global_css.md
diff --git a/static/usage/alert/customization/index.md b/static/usage/alert/customization/index.md
index a97cefceecc..749db8a10d5 100644
--- a/static/usage/alert/customization/index.md
+++ b/static/usage/alert/customization/index.md
@@ -3,12 +3,12 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 
-import reactTS from './react/react_ts.md';
-import reactCSS from './react/react_css.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularCSS from './angular/angular_css.md';
-import angularTS from './angular/angular_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_global_css from './angular/global_css.md';
 
 <Playground
   size="300px"
@@ -16,16 +16,16 @@ import angularTS from './angular/angular_ts.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
-        'src/global.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
       }
     }
   }}
diff --git a/static/usage/alert/customization/react/react_css.md b/static/usage/alert/customization/react/main_css.md
similarity index 100%
rename from static/usage/alert/customization/react/react_css.md
rename to static/usage/alert/customization/react/main_css.md
diff --git a/static/usage/alert/customization/react/react_ts.md b/static/usage/alert/customization/react/main_tsx.md
similarity index 100%
rename from static/usage/alert/customization/react/react_ts.md
rename to static/usage/alert/customization/react/main_tsx.md
diff --git a/static/usage/alert/inputs/radios/angular/angular_html.md b/static/usage/alert/inputs/radios/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/inputs/radios/angular/angular_html.md
rename to static/usage/alert/inputs/radios/angular/example_component_html.md
diff --git a/static/usage/alert/inputs/radios/angular/angular_ts.md b/static/usage/alert/inputs/radios/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/inputs/radios/angular/angular_ts.md
rename to static/usage/alert/inputs/radios/angular/example_component_ts.md
diff --git a/static/usage/alert/inputs/radios/index.md b/static/usage/alert/inputs/radios/index.md
index 6c907a4b933..146630429b9 100644
--- a/static/usage/alert/inputs/radios/index.md
+++ b/static/usage/alert/inputs/radios/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   size="medium"
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/alert/inputs/text-inputs/angular/angular_html.md b/static/usage/alert/inputs/text-inputs/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/inputs/text-inputs/angular/angular_html.md
rename to static/usage/alert/inputs/text-inputs/angular/example_component_html.md
diff --git a/static/usage/alert/inputs/text-inputs/angular/angular_ts.md b/static/usage/alert/inputs/text-inputs/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/inputs/text-inputs/angular/angular_ts.md
rename to static/usage/alert/inputs/text-inputs/angular/example_component_ts.md
diff --git a/static/usage/alert/inputs/text-inputs/index.md b/static/usage/alert/inputs/text-inputs/index.md
index abb2a0bec6c..d4fd2ea14be 100644
--- a/static/usage/alert/inputs/text-inputs/index.md
+++ b/static/usage/alert/inputs/text-inputs/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   size="450px"
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/alert/presenting/controller/angular/angular_html.md b/static/usage/alert/presenting/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/alert/presenting/controller/angular/angular_html.md
rename to static/usage/alert/presenting/controller/angular/example_component_html.md
diff --git a/static/usage/alert/presenting/controller/angular/angular_ts.md b/static/usage/alert/presenting/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/alert/presenting/controller/angular/angular_ts.md
rename to static/usage/alert/presenting/controller/angular/example_component_ts.md
diff --git a/static/usage/alert/presenting/controller/index.md b/static/usage/alert/presenting/controller/index.md
index 875d29b1d64..fc6f9846167 100644
--- a/static/usage/alert/presenting/controller/index.md
+++ b/static/usage/alert/presenting/controller/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   size="300px"
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/avatar/theming/css-properties/index.md b/static/usage/avatar/theming/css-properties/index.md
index b6b1ee34106..81e53278687 100644
--- a/static/usage/avatar/theming/css-properties/index.md
+++ b/static/usage/avatar/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/badge/theming/css-properties/angular/angular-css.md b/static/usage/badge/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/angular/angular-css.md
rename to static/usage/badge/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/badge/theming/css-properties/angular/angular-html.md b/static/usage/badge/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/angular/angular-html.md
rename to static/usage/badge/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/badge/theming/css-properties/index.md b/static/usage/badge/theming/css-properties/index.md
index 85abdef8270..f43ed6cd81d 100644
--- a/static/usage/badge/theming/css-properties/index.md
+++ b/static/usage/badge/theming/css-properties/index.md
@@ -3,11 +3,11 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 
-import reactTS from './react/react-ts.md';
-import reactCSS from './react/react-css.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
 
-import angularHTML from './angular/angular-html.md';
-import angularCSS from './angular/angular-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"
@@ -15,15 +15,15 @@ import angularCSS from './angular/angular-css.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
       },
     },
   }}
diff --git a/static/usage/badge/theming/css-properties/react/react-css.md b/static/usage/badge/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/react/react-css.md
rename to static/usage/badge/theming/css-properties/react/main_css.md
diff --git a/static/usage/badge/theming/css-properties/react/react-ts.md b/static/usage/badge/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/badge/theming/css-properties/react/react-ts.md
rename to static/usage/badge/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/angular_html.md b/static/usage/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/angular_html.md
rename to static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/angular_ts.md b/static/usage/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/angular_ts.md
rename to static/usage/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
diff --git a/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
index 21f1902edcd..8f23c2ae4c9 100644
--- a/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
+++ b/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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={{
@@ -14,8 +14,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/angular_html.md b/static/usage/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/angular_html.md
rename to static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/angular_ts.md b/static/usage/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/angular_ts.md
rename to static/usage/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
diff --git a/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
index 610e6974468..fccf6e9b8f5 100644
--- a/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
+++ b/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   size="500px"
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/breadcrumbs/theming/css-properties/angular/angular_css.md b/static/usage/breadcrumbs/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/angular/angular_css.md
rename to static/usage/breadcrumbs/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/angular/angular_html.md b/static/usage/breadcrumbs/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/angular/angular_html.md
rename to static/usage/breadcrumbs/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/index.md b/static/usage/breadcrumbs/theming/css-properties/index.md
index 4a632fce7a3..973c6026f8d 100644
--- a/static/usage/breadcrumbs/theming/css-properties/index.md
+++ b/static/usage/breadcrumbs/theming/css-properties/index.md
@@ -3,26 +3,26 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 
-import reactTS from './react/react_ts.md';
-import reactCSS from './react/react_css.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularCSS from './angular/angular_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': reactCSS,
-        'src/main.tsx': reactTS,
+        'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angularCSS,
-        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.html': angular_example_component_html,
       },
     },
   }}
diff --git a/static/usage/breadcrumbs/theming/css-properties/react/react_css.md b/static/usage/breadcrumbs/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/react/react_css.md
rename to static/usage/breadcrumbs/theming/css-properties/react/main_css.md
diff --git a/static/usage/breadcrumbs/theming/css-properties/react/react_ts.md b/static/usage/breadcrumbs/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/breadcrumbs/theming/css-properties/react/react_ts.md
rename to static/usage/breadcrumbs/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/button/theming/css-properties/index.md b/static/usage/button/theming/css-properties/index.md
index ad66bc9834d..076acf31267 100644
--- a/static/usage/button/theming/css-properties/index.md
+++ b/static/usage/button/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/datetime/date-constraints/advanced/angular-html.md b/static/usage/datetime/date-constraints/advanced/angular/example_component_html.md
similarity index 100%
rename from static/usage/datetime/date-constraints/advanced/angular-html.md
rename to static/usage/datetime/date-constraints/advanced/angular/example_component_html.md
diff --git a/static/usage/datetime/date-constraints/advanced/angular-ts.md b/static/usage/datetime/date-constraints/advanced/angular/example_component_ts.md
similarity index 100%
rename from static/usage/datetime/date-constraints/advanced/angular-ts.md
rename to static/usage/datetime/date-constraints/advanced/angular/example_component_ts.md
diff --git a/static/usage/datetime/date-constraints/advanced/index.md b/static/usage/datetime/date-constraints/advanced/index.md
index ac86047de8f..4602dc8d77e 100644
--- a/static/usage/datetime/date-constraints/advanced/index.md
+++ b/static/usage/datetime/date-constraints/advanced/index.md
@@ -3,8 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angularHTML from './angular-html.md';
-import angularTS from './angular-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
   size="medium"
@@ -14,8 +15,8 @@ import angularTS from './angular-ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/datetime/theming/angular-html.md b/static/usage/datetime/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/datetime/theming/angular-html.md
rename to static/usage/datetime/theming/angular/example_component_html.md
diff --git a/static/usage/datetime/theming/angular-css.md b/static/usage/datetime/theming/angular/global_css.md
similarity index 100%
rename from static/usage/datetime/theming/angular-css.md
rename to static/usage/datetime/theming/angular/global_css.md
diff --git a/static/usage/datetime/theming/index.md b/static/usage/datetime/theming/index.md
index bbb37d74769..df7b8bee7b6 100644
--- a/static/usage/datetime/theming/index.md
+++ b/static/usage/datetime/theming/index.md
@@ -1,11 +1,14 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
-import reactHTML from './react-html.md';
-import reactCSS from './react-css.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 angularHTML from './angular-html.md';
-import angularCSS from './angular-css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
 
 <Playground
   size="450px"
@@ -13,17 +16,17 @@ import angularCSS from './angular-css.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactHTML,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/global.css': angularCSS
+        '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/theming/react-css.md b/static/usage/datetime/theming/react/main_css.md
similarity index 100%
rename from static/usage/datetime/theming/react-css.md
rename to static/usage/datetime/theming/react/main_css.md
diff --git a/static/usage/datetime/theming/react-html.md b/static/usage/datetime/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/datetime/theming/react-html.md
rename to static/usage/datetime/theming/react/main_tsx.md
diff --git a/static/usage/item-divider/theming/css-properties/index.md b/static/usage/item-divider/theming/css-properties/index.md
index 88234976778..18c10aba2b5 100644
--- a/static/usage/item-divider/theming/css-properties/index.md
+++ b/static/usage/item-divider/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/loading/controller/angular/html.md b/static/usage/loading/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/controller/angular/html.md
rename to static/usage/loading/controller/angular/example_component_html.md
diff --git a/static/usage/loading/controller/angular/ts.md b/static/usage/loading/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/loading/controller/angular/ts.md
rename to static/usage/loading/controller/angular/example_component_ts.md
diff --git a/static/usage/loading/controller/index.md b/static/usage/loading/controller/index.md
index acd6634a542..2705cc8b0b9 100644
--- a/static/usage/loading/controller/index.md
+++ b/static/usage/loading/controller/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/html.md';
-import angularTS from './angular/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={{
@@ -14,8 +14,8 @@ import angularTS from './angular/ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/loading/spinners/angular/html.md b/static/usage/loading/spinners/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/spinners/angular/html.md
rename to static/usage/loading/spinners/angular/example_component_html.md
diff --git a/static/usage/loading/spinners/angular/ts.md b/static/usage/loading/spinners/angular/example_component_ts.md
similarity index 100%
rename from static/usage/loading/spinners/angular/ts.md
rename to static/usage/loading/spinners/angular/example_component_ts.md
diff --git a/static/usage/loading/spinners/index.md b/static/usage/loading/spinners/index.md
index abdf70953c1..9932e8ab9c1 100644
--- a/static/usage/loading/spinners/index.md
+++ b/static/usage/loading/spinners/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/html.md';
-import angularTS from './angular/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={{
@@ -14,8 +14,8 @@ import angularTS from './angular/ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/loading/theming/angular/html.md b/static/usage/loading/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/theming/angular/html.md
rename to static/usage/loading/theming/angular/example_component_html.md
diff --git a/static/usage/loading/theming/angular/ts.md b/static/usage/loading/theming/angular/example_component_ts.md
similarity index 100%
rename from static/usage/loading/theming/angular/ts.md
rename to static/usage/loading/theming/angular/example_component_ts.md
diff --git a/static/usage/loading/theming/angular/css.md b/static/usage/loading/theming/angular/global_css.md
similarity index 100%
rename from static/usage/loading/theming/angular/css.md
rename to static/usage/loading/theming/angular/global_css.md
diff --git a/static/usage/loading/theming/index.md b/static/usage/loading/theming/index.md
index bccc9bf7964..8123a7d00e7 100644
--- a/static/usage/loading/theming/index.md
+++ b/static/usage/loading/theming/index.md
@@ -2,30 +2,30 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/tsx.md';
-import reactCSS from './react/css.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 angularHTML from './angular/html.md';
-import angularCSS from './angular/css.md';
-import angularTS from './angular/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_global_css from './angular/global_css.md';
 
 <Playground
   code={{
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactTSX,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
-        'src/global.css': angularCSS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
       },
     },
   }}
diff --git a/static/usage/loading/theming/react/css.md b/static/usage/loading/theming/react/main_css.md
similarity index 100%
rename from static/usage/loading/theming/react/css.md
rename to static/usage/loading/theming/react/main_css.md
diff --git a/static/usage/loading/theming/react/tsx.md b/static/usage/loading/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/loading/theming/react/tsx.md
rename to static/usage/loading/theming/react/main_tsx.md
diff --git a/static/usage/modal/custom-dialogs/angular/angular_css.md b/static/usage/modal/custom-dialogs/angular/global_css.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/angular/angular_css.md
rename to static/usage/modal/custom-dialogs/angular/global_css.md
diff --git a/static/usage/modal/custom-dialogs/index.md b/static/usage/modal/custom-dialogs/index.md
index ac87630da0b..94105b957a8 100644
--- a/static/usage/modal/custom-dialogs/index.md
+++ b/static/usage/modal/custom-dialogs/index.md
@@ -6,7 +6,7 @@ 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_css from './angular/angular_css.md';
+import angular_global_css from './angular/global_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
@@ -22,7 +22,7 @@ import angular_example_component_html from './angular/example_component_html.md'
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_css,
+        'src/global.css': angular_global_css,
       },
     },
   }}
diff --git a/static/usage/popover/customization/positioning/angular/angular_css.md b/static/usage/popover/customization/positioning/angular/example_component_css.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/angular_css.md
rename to static/usage/popover/customization/positioning/angular/example_component_css.md
diff --git a/static/usage/popover/customization/positioning/angular/angular_html.md b/static/usage/popover/customization/positioning/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/angular_html.md
rename to static/usage/popover/customization/positioning/angular/example_component_html.md
diff --git a/static/usage/popover/customization/positioning/angular/angular_ts.md b/static/usage/popover/customization/positioning/angular/example_component_ts.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/angular_ts.md
rename to static/usage/popover/customization/positioning/angular/example_component_ts.md
diff --git a/static/usage/popover/customization/positioning/index.md b/static/usage/popover/customization/positioning/index.md
index f50d296084e..2b0f2dbcaba 100644
--- a/static/usage/popover/customization/positioning/index.md
+++ b/static/usage/popover/customization/positioning/index.md
@@ -3,12 +3,12 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 
-import reactTS from './react/react_ts.md';
-import reactCSS from './react/react_css.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularCSS from './angular/angular_css.md';
-import angularTS from './angular/angular_ts.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"
@@ -16,16 +16,16 @@ import angularTS from './angular/angular_ts.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS,
-        'src/app/example.component.ts': angularTS,
+        '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,
       },
     },
   }}
diff --git a/static/usage/popover/customization/positioning/react/react_css.md b/static/usage/popover/customization/positioning/react/main_css.md
similarity index 100%
rename from static/usage/popover/customization/positioning/react/react_css.md
rename to static/usage/popover/customization/positioning/react/main_css.md
diff --git a/static/usage/popover/customization/positioning/react/react_ts.md b/static/usage/popover/customization/positioning/react/main_tsx.md
similarity index 100%
rename from static/usage/popover/customization/positioning/react/react_ts.md
rename to static/usage/popover/customization/positioning/react/main_tsx.md
diff --git a/static/usage/popover/customization/styling/angular/angular_html.md b/static/usage/popover/customization/styling/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/customization/styling/angular/angular_html.md
rename to static/usage/popover/customization/styling/angular/example_component_html.md
diff --git a/static/usage/popover/customization/styling/angular/angular_css.md b/static/usage/popover/customization/styling/angular/global_css.md
similarity index 100%
rename from static/usage/popover/customization/styling/angular/angular_css.md
rename to static/usage/popover/customization/styling/angular/global_css.md
diff --git a/static/usage/popover/customization/styling/index.md b/static/usage/popover/customization/styling/index.md
index 6b74ad461db..b8c83384102 100644
--- a/static/usage/popover/customization/styling/index.md
+++ b/static/usage/popover/customization/styling/index.md
@@ -3,11 +3,11 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 
-import reactTS from './react/react_ts.md';
-import reactCSS from './react/react_css.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularCSS from './angular/angular_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"
@@ -15,15 +15,15 @@ import angularCSS from './angular/angular_css.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/global.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
       }
     }
   }}
diff --git a/static/usage/popover/customization/styling/react/react_css.md b/static/usage/popover/customization/styling/react/main_css.md
similarity index 100%
rename from static/usage/popover/customization/styling/react/react_css.md
rename to static/usage/popover/customization/styling/react/main_css.md
diff --git a/static/usage/popover/customization/styling/react/react_ts.md b/static/usage/popover/customization/styling/react/main_tsx.md
similarity index 100%
rename from static/usage/popover/customization/styling/react/react_ts.md
rename to static/usage/popover/customization/styling/react/main_tsx.md
diff --git a/static/usage/popover/presenting/controller/angular/angular_module.md b/static/usage/popover/presenting/controller/angular/app_module_ts.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/angular_module.md
rename to static/usage/popover/presenting/controller/angular/app_module_ts.md
diff --git a/static/usage/popover/presenting/controller/angular/angular_html.md b/static/usage/popover/presenting/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/angular_html.md
rename to static/usage/popover/presenting/controller/angular/example_component_html.md
diff --git a/static/usage/popover/presenting/controller/angular/angular_ts.md b/static/usage/popover/presenting/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/angular_ts.md
rename to static/usage/popover/presenting/controller/angular/example_component_ts.md
diff --git a/static/usage/popover/presenting/controller/angular/angular_popover_html.md b/static/usage/popover/presenting/controller/angular/popover_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/angular_popover_html.md
rename to static/usage/popover/presenting/controller/angular/popover_component_html.md
diff --git a/static/usage/popover/presenting/controller/angular/angular_popover_ts.md b/static/usage/popover/presenting/controller/angular/popover_component_ts.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/angular_popover_ts.md
rename to static/usage/popover/presenting/controller/angular/popover_component_ts.md
diff --git a/static/usage/popover/presenting/controller/index.md b/static/usage/popover/presenting/controller/index.md
index e6a1e83f6ad..6fd29e65815 100644
--- a/static/usage/popover/presenting/controller/index.md
+++ b/static/usage/popover/presenting/controller/index.md
@@ -3,14 +3,14 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 
-import vuePopover from './vue/vue_popover.md';
-import vueMain from './vue/vue_main.md';
+import vue_example from './vue/example_vue.md';
+import vue_popover from './vue/popover_vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_ts.md';
-import angularPopoverHTML from './angular/angular_popover_html.md';
-import angularPopoverTS from './angular/angular_popover_ts.md';
-import angularModule from './angular/angular_module.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"
@@ -19,17 +19,17 @@ import angularModule from './angular/angular_module.md';
     react,
     vue: {
       files: {
-        'src/components/Example.vue': vueMain,
-        'src/components/Popover.vue': vuePopover,
+        'src/components/Example.vue': vue_example,
+        'src/components/Popover.vue': vue_popover,
       },
     },
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
-        'src/app/popover.component.html': angularPopoverHTML,
-        'src/app/popover.component.ts': angularPopoverTS,
-        'src/app/app.module.ts': angularModule,
+        '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,
       },
     },
   }}
diff --git a/static/usage/popover/presenting/controller/vue/vue_main.md b/static/usage/popover/presenting/controller/vue/example_vue.md
similarity index 100%
rename from static/usage/popover/presenting/controller/vue/vue_main.md
rename to static/usage/popover/presenting/controller/vue/example_vue.md
diff --git a/static/usage/popover/presenting/controller/vue/vue_popover.md b/static/usage/popover/presenting/controller/vue/popover_vue.md
similarity index 100%
rename from static/usage/popover/presenting/controller/vue/vue_popover.md
rename to static/usage/popover/presenting/controller/vue/popover_vue.md
diff --git a/static/usage/popover/presenting/inline-isopen/angular/angular_html.md b/static/usage/popover/presenting/inline-isopen/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/angular/angular_html.md
rename to static/usage/popover/presenting/inline-isopen/angular/example_component_html.md
diff --git a/static/usage/popover/presenting/inline-isopen/angular/angular_ts.md b/static/usage/popover/presenting/inline-isopen/angular/example_component_ts.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/angular/angular_ts.md
rename to static/usage/popover/presenting/inline-isopen/angular/example_component_ts.md
diff --git a/static/usage/popover/presenting/inline-isopen/index.md b/static/usage/popover/presenting/inline-isopen/index.md
index a23bef68095..264639ccf7f 100644
--- a/static/usage/popover/presenting/inline-isopen/index.md
+++ b/static/usage/popover/presenting/inline-isopen/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   size="300px"
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/progress-bar/theming/css-properties/index.md b/static/usage/progress-bar/theming/css-properties/index.md
index d2be1560681..eb1ca7882d9 100644
--- a/static/usage/progress-bar/theming/css-properties/index.md
+++ b/static/usage/progress-bar/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/progress-bar/theming/css-shadow-parts/index.md b/static/usage/progress-bar/theming/css-shadow-parts/index.md
index ebd35050667..08ba68d73ca 100644
--- a/static/usage/progress-bar/theming/css-shadow-parts/index.md
+++ b/static/usage/progress-bar/theming/css-shadow-parts/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/radio/theming/css-properties/index.md b/static/usage/radio/theming/css-properties/index.md
index 49ec34d099e..ae6ae40bfba 100644
--- a/static/usage/radio/theming/css-properties/index.md
+++ b/static/usage/radio/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/radio/theming/css-shadow-parts/index.md b/static/usage/radio/theming/css-shadow-parts/index.md
index aef4b86ca2e..bc64d0189d7 100644
--- a/static/usage/radio/theming/css-shadow-parts/index.md
+++ b/static/usage/radio/theming/css-shadow-parts/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/searchbar/theming/css-properties/index.md b/static/usage/searchbar/theming/css-properties/index.md
index b0bc8933e76..abdda5b3bd6 100644
--- a/static/usage/searchbar/theming/css-properties/index.md
+++ b/static/usage/searchbar/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/select/basic/responding-to-interaction/index.md b/static/usage/select/basic/responding-to-interaction/index.md
index 36d66bad680..f4a16fa16a0 100644
--- a/static/usage/select/basic/responding-to-interaction/index.md
+++ b/static/usage/select/basic/responding-to-interaction/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/example_component_html.md';
-import angularTS from './angular/example_component_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
   size="300px"
@@ -15,8 +15,8 @@ import angularTS from './angular/example_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/select/customization/interface-options/index.md b/static/usage/select/customization/interface-options/index.md
index 44247363484..ff49e6e0b83 100644
--- a/static/usage/select/customization/interface-options/index.md
+++ b/static/usage/select/customization/interface-options/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/example_component_html.md';
-import angularTS from './angular/example_component_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
   size="large"
@@ -15,8 +15,8 @@ import angularTS from './angular/example_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/select/customization/styling-select/angular/angular-css.md b/static/usage/select/customization/styling-select/angular/example_component_css.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/angular-css.md
rename to static/usage/select/customization/styling-select/angular/example_component_css.md
diff --git a/static/usage/select/customization/styling-select/angular/angular-html.md b/static/usage/select/customization/styling-select/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/angular-html.md
rename to static/usage/select/customization/styling-select/angular/example_component_html.md
diff --git a/static/usage/select/customization/styling-select/angular/angular-ts.md b/static/usage/select/customization/styling-select/angular/example_component_ts.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/angular-ts.md
rename to static/usage/select/customization/styling-select/angular/example_component_ts.md
diff --git a/static/usage/select/customization/styling-select/index.md b/static/usage/select/customization/styling-select/index.md
index b6afedc5dcd..801dea7f7d6 100644
--- a/static/usage/select/customization/styling-select/index.md
+++ b/static/usage/select/customization/styling-select/index.md
@@ -3,12 +3,12 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 
-import reactTS from './react/react-ts.md';
-import reactCSS from './react/react-css.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
 
-import angularHTML from './angular/angular-html.md';
-import angularCSS from './angular/angular-css.md';
-import angularTS from './angular/angular-ts.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"
@@ -16,16 +16,16 @@ import angularTS from './angular/angular-ts.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS,
-        'src/app/example.component.ts': angularTS,
+        '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,
       },
     },
   }}
diff --git a/static/usage/select/customization/styling-select/react/react-css.md b/static/usage/select/customization/styling-select/react/main_css.md
similarity index 100%
rename from static/usage/select/customization/styling-select/react/react-css.md
rename to static/usage/select/customization/styling-select/react/main_css.md
diff --git a/static/usage/select/customization/styling-select/react/react-ts.md b/static/usage/select/customization/styling-select/react/main_tsx.md
similarity index 100%
rename from static/usage/select/customization/styling-select/react/react-ts.md
rename to static/usage/select/customization/styling-select/react/main_tsx.md
diff --git a/static/usage/select/objects-as-values/multiple-selection/index.md b/static/usage/select/objects-as-values/multiple-selection/index.md
index 6bced8d6e44..3b736db244f 100644
--- a/static/usage/select/objects-as-values/multiple-selection/index.md
+++ b/static/usage/select/objects-as-values/multiple-selection/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/example_component_html.md';
-import angularTS from './angular/example_component_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
   size="300px"
@@ -15,8 +15,8 @@ import angularTS from './angular/example_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/select/objects-as-values/using-comparewith/index.md b/static/usage/select/objects-as-values/using-comparewith/index.md
index 323797ca6ce..d66502a4254 100644
--- a/static/usage/select/objects-as-values/using-comparewith/index.md
+++ b/static/usage/select/objects-as-values/using-comparewith/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/example_component_html.md';
-import angularTS from './angular/example_component_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
   size="300px"
@@ -15,8 +15,8 @@ import angularTS from './angular/example_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/skeleton-text/basic/index.md b/static/usage/skeleton-text/basic/index.md
index 33b4f57ee26..fb223e9ae7e 100644
--- a/static/usage/skeleton-text/basic/index.md
+++ b/static/usage/skeleton-text/basic/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/example_component_html.md';
-import angularTS from './angular/example_component_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={{
@@ -14,8 +14,8 @@ import angularTS from './angular/example_component_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts
       }
     },
   }}
diff --git a/static/usage/skeleton-text/theming/css-properties/index.md b/static/usage/skeleton-text/theming/css-properties/index.md
index 255377b76cd..07e373b1f09 100644
--- a/static/usage/skeleton-text/theming/css-properties/index.md
+++ b/static/usage/skeleton-text/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/spinner/theming/css-properties/index.md b/static/usage/spinner/theming/css-properties/index.md
index 6741db191fc..d202b611d86 100644
--- a/static/usage/spinner/theming/css-properties/index.md
+++ b/static/usage/spinner/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/thumbnail/theming/css-properties/index.md b/static/usage/thumbnail/theming/css-properties/index.md
index 71b197097d1..3a0b41f3482 100644
--- a/static/usage/thumbnail/theming/css-properties/index.md
+++ b/static/usage/thumbnail/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}
diff --git a/static/usage/toast/buttons/angular/angular_html.md b/static/usage/toast/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/buttons/angular/angular_html.md
rename to static/usage/toast/buttons/angular/example_component_html.md
diff --git a/static/usage/toast/buttons/angular/angular_ts.md b/static/usage/toast/buttons/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/buttons/angular/angular_ts.md
rename to static/usage/toast/buttons/angular/example_component_ts.md
diff --git a/static/usage/toast/buttons/index.md b/static/usage/toast/buttons/index.md
index 4098f2f915e..a8de787990a 100644
--- a/static/usage/toast/buttons/index.md
+++ b/static/usage/toast/buttons/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   devicePreview
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/toast/icon/angular/angular_html.md b/static/usage/toast/icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/icon/angular/angular_html.md
rename to static/usage/toast/icon/angular/example_component_html.md
diff --git a/static/usage/toast/icon/angular/angular_ts.md b/static/usage/toast/icon/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/icon/angular/angular_ts.md
rename to static/usage/toast/icon/angular/example_component_ts.md
diff --git a/static/usage/toast/icon/index.md b/static/usage/toast/icon/index.md
index f575f525540..ba75e790c1e 100644
--- a/static/usage/toast/icon/index.md
+++ b/static/usage/toast/icon/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   devicePreview
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/toast/presenting/controller/angular/angular_html.md b/static/usage/toast/presenting/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/presenting/controller/angular/angular_html.md
rename to static/usage/toast/presenting/controller/angular/example_component_html.md
diff --git a/static/usage/toast/presenting/controller/angular/angular_ts.md b/static/usage/toast/presenting/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/presenting/controller/angular/angular_ts.md
rename to static/usage/toast/presenting/controller/angular/example_component_ts.md
diff --git a/static/usage/toast/presenting/controller/index.md b/static/usage/toast/presenting/controller/index.md
index ea63d7f9f42..b35b715cd14 100644
--- a/static/usage/toast/presenting/controller/index.md
+++ b/static/usage/toast/presenting/controller/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularTS from './angular/angular_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
   devicePreview
@@ -15,8 +15,8 @@ import angularTS from './angular/angular_ts.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/toast/theming/angular/angular_html.md b/static/usage/toast/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/toast/theming/angular/angular_html.md
rename to static/usage/toast/theming/angular/example_component_html.md
diff --git a/static/usage/toast/theming/angular/angular_ts.md b/static/usage/toast/theming/angular/example_component_ts.md
similarity index 100%
rename from static/usage/toast/theming/angular/angular_ts.md
rename to static/usage/toast/theming/angular/example_component_ts.md
diff --git a/static/usage/toast/theming/angular/angular_css.md b/static/usage/toast/theming/angular/global_css.md
similarity index 100%
rename from static/usage/toast/theming/angular/angular_css.md
rename to static/usage/toast/theming/angular/global_css.md
diff --git a/static/usage/toast/theming/index.md b/static/usage/toast/theming/index.md
index 62c2366dac3..2db18037197 100644
--- a/static/usage/toast/theming/index.md
+++ b/static/usage/toast/theming/index.md
@@ -3,12 +3,12 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 
-import reactTS from './react/react_ts.md';
-import reactCSS from './react/react_css.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
 
-import angularHTML from './angular/angular_html.md';
-import angularCSS from './angular/angular_css.md';
-import angularTS from './angular/angular_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_global_css from './angular/global_css.md';
 
 <Playground
   devicePreview
@@ -16,16 +16,16 @@ import angularTS from './angular/angular_ts.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': reactTS,
-        'src/main.css': reactCSS,
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.ts': angularTS,
-        'src/global.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
       }
     }
   }}
diff --git a/static/usage/toast/theming/react/react_css.md b/static/usage/toast/theming/react/main_css.md
similarity index 100%
rename from static/usage/toast/theming/react/react_css.md
rename to static/usage/toast/theming/react/main_css.md
diff --git a/static/usage/toast/theming/react/react_ts.md b/static/usage/toast/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/toast/theming/react/react_ts.md
rename to static/usage/toast/theming/react/main_tsx.md
diff --git a/static/usage/toolbar/theming/css-properties/index.md b/static/usage/toolbar/theming/css-properties/index.md
index e1dfb76fc05..5d320f47306 100644
--- a/static/usage/toolbar/theming/css-properties/index.md
+++ b/static/usage/toolbar/theming/css-properties/index.md
@@ -2,28 +2,28 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/main_tsx.md';
-import reactCSS from './react/main_css.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 angularHTML from './angular/example_component_html.md';
-import angularCSS from './angular/example_component_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.tsx': reactTSX,
-        'src/main.css': reactCSS
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css
       }
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angularHTML,
-        'src/app/example.component.css': angularCSS
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css
       }
     },
   }}

From 626a7f5f42e593927992eeac197111edc5dc5d40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Br=C3=A4nnstr=C3=B6m?=
 <112931960+simonbrannstrom@users.noreply.github.com>
Date: Thu, 20 Oct 2022 15:01:01 +0200
Subject: [PATCH 109/469] fix: use --external on npx cap run android on
 android.md (#2603)

---
 docs/developing/android.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/developing/android.md b/docs/developing/android.md
index a294df721c8..d27d9ae62f2 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -174,7 +174,7 @@ Capacitor uses Android Studio to build and run apps to simulators and devices.
 To start a live-reload server run the following command.
 
 ```shell
-ionic capacitor run android -l --host=YOUR_IP_ADDRESS
+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.

From 1d169ff922582cd599d3aad9c544ca2a00516746 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 20 Oct 2022 14:10:33 -0400
Subject: [PATCH 110/469] docs(angular): format public api methods as a table
 (#2616)

---
 docs/angular/platform.md | 81 ++++++++++++++++++++++++++--------------
 1 file changed, 54 insertions(+), 27 deletions(-)

diff --git a/docs/angular/platform.md b/docs/angular/platform.md
index 2f485ae2a3d..ac957693971 100644
--- a/docs/angular/platform.md
+++ b/docs/angular/platform.md
@@ -1,6 +1,5 @@
 ---
 title: Platform
-toc_max_heading_level: 2
 ---
 
 <head>
@@ -28,9 +27,12 @@ export class MyPage {
 
 ## Methods
 
-### `is(platformName: Platforms) => boolean`
+### `is`
 
-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.
+|                 |                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **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
 
@@ -106,45 +108,70 @@ type PlatformConfig = {
 };
 ```
 
-### `platforms() => string[]`
+### `platforms`
 
-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`.
+|                 |                                                                                                                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **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() => Promise<string>`
+### `ready`
 
-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.
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **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>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
-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.
+### `isRTL`
 
-### `isRTL() => boolean`
+|                 |                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **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`                                                                                                                                                                                                                                                                                                               |
 
-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)
+### `isLandscape`
 
-### `isLandscape() => boolean`
+|                 |                                                 |
+| --------------- | ----------------------------------------------- |
+| **Description** | Returns `true` if the app is in landscape mode. |
+| **Signature**   | `isLandscape() => boolean`                      |
 
-Returns `true` if the app is in landscape mode.
+### `isPortrait`
 
-### `isPortrait() => boolean`
+|                 |                                                |
+| --------------- | ---------------------------------------------- |
+| **Description** | Returns `true` if the app is in portrait mode. |
+| **Signature**   | `isPortrait() => boolean`                      |
 
-Returns `true` if the app is in portrait mode.
+### `width`
 
-### `width() => number`
+|                 |                                                                      |
+| --------------- | -------------------------------------------------------------------- |
+| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. |
+| **Signature**   | `width() => number`                                                  |
 
-Gets the width of the platform's viewport using `window.innerWidth`.
+### `height`
 
-### `height() => number`
+|                 |                                                                        |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. |
+| **Signature**   | `height() => number`                                                   |
 
-Gets the height of the platform's viewport using `window.innerHeight`.
+### `url`
 
-### `url() => string`
+|                 |                      |
+| --------------- | -------------------- |
+| **Description** | Get the current url. |
+| **Signature**   | `url() => string`    |
 
-Get the current url.
+### `testUserAgent`
 
-### `testUserAgent(expression: string) => boolean`
+|                 |                                                                        |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Returns `true` if the expression is included in the user agent string. |
+| **Signature**   | `testUserAgent(expression: string) => boolean`                         |
 
-Returns `true` if the expression is included in the user agent string.
-
-### Parameters
+#### Parameters
 
 | Name       | Type   | Description                           |
 | ---------- | ------ | ------------------------------------- |
@@ -156,7 +183,7 @@ Returns `true` if the expression is included in the user agent string.
 
 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.
 
-#### Usage
+#### Examples
 
 ```tsx
 this.platform.pause.subscribe(async () => {
@@ -168,7 +195,7 @@ this.platform.pause.subscribe(async () => {
 
 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.
 
-#### Usage
+#### Examples
 
 ```tsx
 this.platform.resize.subscribe(async () => {
@@ -180,7 +207,7 @@ this.platform.resize.subscribe(async () => {
 
 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.
 
-#### Usage
+#### Examples
 
 ```tsx
 this.platform.resume.subscribe(async () => {

From 6015c496dfa1b19d8f248ebc2123dae37ddaf0f9 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 21 Oct 2022 13:12:56 -0400
Subject: [PATCH 111/469] docs(angular): config provider usage and content
 updates (#2614)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 docs/angular/config.md | 127 ++++++++++++++++++++++++++++++++---------
 1 file changed, 99 insertions(+), 28 deletions(-)

diff --git a/docs/angular/config.md b/docs/angular/config.md
index 9af23a5d02b..5bf5b26f3e3 100644
--- a/docs/angular/config.md
+++ b/docs/angular/config.md
@@ -14,54 +14,67 @@ Ionic Config provides a way to change the properties of components globally acro
 
 ## Global Config
 
-To override the initial Ionic config for the app, provide a config in `IonicModule.forRoot` in the `app.module.ts` file.
+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.
 
-```tsx
+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: [
-    BrowserModule,
     IonicModule.forRoot({
       rippleEffect: false,
       mode: 'md'
-    }),
-    AppRoutingModule
+    })
   ],
   ...
 })
 ```
 
-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-Component Config
 
-Ionic Config is not reactive, so it is recommended to use a component's properties when you want to override its default behavior rather than set its config globally.
+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.
 
-```tsx
+**Not recommended**
+
+```ts
 import { IonicModule } from '@ionic/angular';
 
 @NgModule({
   ...
   imports: [
-    BrowserModule,
     IonicModule.forRoot({
+      // Not recommended when your app requires reactive values
       backButtonText: 'Go Back'
-    }),
-    AppRoutingModule
+    })
   ],
   ...
 })
 ```
 
-This will set the default text for `ion-back-button` to `Go Back`. However, if you were to change the value of the `backButtonText` config to `Do Not Go Back`, the `ion-back-button` default text would still default to `Go Back` as the component has already been initialized and rendered. Instead, it is recommended to use the `text` property on `ion-back-button`.
+**Recommended**
 
 ```html
-<ion-back-button [text]="getBackButtonText()"></ion-back-button>
+<ion-back-button [text]="backButtonText"></ion-back-button>
 ```
 
-In this example we have used our `ion-back-button` in such a way that the text can be dynamically updated if there were to be a change that warranted it, such as a language or locale change. The `getBackButtonText` method would be responsible for returning the correct text.
+```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
 
@@ -78,17 +91,15 @@ import { isPlatform, IonicModule } from '@ionic/angular';
 @NgModule({
   ...
   imports: [
-    BrowserModule,
     IonicModule.forRoot({
       animated: !isPlatform('mobileweb')
-    }),
-    AppRoutingModule
+    })
   ],
   ...
 })
 ```
 
-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:
+**Per-platform config with fallback for unmatched platforms:**
 
 ```tsx
 import { isPlatform, IonicModule } from '@ionic/angular';
@@ -108,15 +119,13 @@ const getConfig = () => {
 @NgModule({
   ...
   imports: [
-    BrowserModule,
-    IonicModule.forRoot(getConfig()),
-    AppRoutingModule
+    IonicModule.forRoot(getConfig())
   ],
   ...
 })
 ```
 
-Finally, this example allows you to accumulate a config object based upon different platform requirements:
+**Per-platform config overrides:**
 
 ```tsx
 import { isPlatform, IonicModule } from '@ionic/angular';
@@ -138,17 +147,79 @@ const getConfig = () => {
 @NgModule({
   ...
   imports: [
-    BrowserModule,
-    IonicModule.forRoot(getConfig()),
-    AppRoutingModule
+    IonicModule.forRoot(getConfig())
   ],
   ...
 })
 ```
 
-## Config Options
+## 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 is a list of config options that Ionic uses.
+Below are the config options that Ionic uses.
 
 | Config                   | Type                                                                              | Description                                                                                              |
 | ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |

From 365e16609c2f0ae7674ab05e33a1200ac26ea26f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 21 Oct 2022 13:31:39 -0400
Subject: [PATCH 112/469] docs(react/vue): heading levels for interfaces and
 IonicConfig (#2618)

---
 docs/react/config.md | 6 ++++--
 docs/vue/config.md   | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/react/config.md b/docs/react/config.md
index 5ba14d6de84..b44aee85538 100644
--- a/docs/react/config.md
+++ b/docs/react/config.md
@@ -73,9 +73,11 @@ const getConfig = () => {
 setupIonicReact(getConfig());
 ```
 
-## Config Options
+## Interfaces
 
-Below is a list of config options that Ionic uses.
+### IonicConfig
+
+Below are the config options that Ionic uses.
 
 | Config                   | Type                                                                            | Description                                                                                              |
 | ------------------------ | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
diff --git a/docs/vue/config.md b/docs/vue/config.md
index 6380b396245..13f0d7d922a 100644
--- a/docs/vue/config.md
+++ b/docs/vue/config.md
@@ -74,9 +74,11 @@ const getConfig = () => {
 createApp(App).use(IonicVue, getConfig());
 ```
 
-## Config Options
+## Interfaces
 
-Below is a list of config options that Ionic uses.
+### IonicConfig
+
+Below are the config options that Ionic uses.
 
 | Config                   | Type                                                                          | Description                                                                                              |
 | ------------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |

From 114f5932b0ec4d5bf84c16dd07198597c3af5504 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 21 Oct 2022 13:48:48 -0400
Subject: [PATCH 113/469] feat(playground): disable specific modes (#2613)

---
 src/components/global/Playground/index.tsx    | 75 +++++++++++++++----
 .../global/Playground/playground.css          |  5 ++
 2 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index aa75747ee30..c41a7b0244c 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -13,11 +13,23 @@ import TabItem from '@theme/TabItem';
 
 import { IconHtml, IconTs, IconVue, IconDefault, IconCss, IconDots } from './icons';
 
-const ControlButton = ({ isSelected, handleClick, title, label }) => {
-  return (
+const ControlButton = ({
+  isSelected,
+  handleClick,
+  title,
+  label,
+  disabled,
+}: {
+  isSelected: boolean;
+  handleClick: () => void;
+  title: string;
+  label: string;
+  disabled?: boolean;
+}) => {
+  const controlButton = (
     <button
-      type="button"
-      title={title}
+      title={disabled ? undefined : title}
+      disabled={disabled}
       className={`playground__control-button ${isSelected ? 'playground__control-button--selected' : ''}`}
       onClick={handleClick}
       data-text={label}
@@ -25,6 +37,15 @@ const ControlButton = ({ isSelected, handleClick, title, label }) => {
       {label}
     </button>
   );
+  if (disabled) {
+    return (
+      <Tippy theme="playground" arrow={false} placement="bottom" content={`Unavailable for ${label}`}>
+        {/* Tippy requires a wrapper element for disabled elements: https://atomiks.github.io/tippyjs/v5/creating-tooltips/#disabled-elements */}
+        <div>{controlButton}</div>
+      </Tippy>
+    );
+  }
+  return controlButton;
 };
 
 const CodeBlockButton = ({ language, usageTarget, setUsageTarget }) => {
@@ -90,6 +111,7 @@ export default function Playground({
   description,
   src,
   size = 'small',
+  mode,
   devicePreview,
   includeIonContent = true,
 }: {
@@ -97,6 +119,12 @@ export default function Playground({
   title?: string;
   src: string;
   size: string;
+  /**
+   * Restricts the playground to a single specified mode.
+   * If not specified, the user can toggle between modes.
+   * Acceptable values are: `ios` or `md`.
+   */
+  mode?: 'ios' | 'md';
   description?: string;
   devicePreview?: boolean;
   includeIonContent: boolean;
@@ -105,6 +133,11 @@ export default function Playground({
     console.warn('No code usage examples provided for this Playground example.');
     return;
   }
+  if (typeof mode !== 'undefined' && mode !== 'ios' && mode !== 'md') {
+    console.warn(`Invalid mode provided: ${mode}. Accepted values are: "ios" or "md".`);
+    return;
+  }
+
   const { isDarkTheme } = useThemeContext();
 
   const hostRef = useRef<HTMLDivElement | null>(null);
@@ -112,13 +145,15 @@ export default function Playground({
   const frameiOS = useRef<HTMLIFrameElement | null>(null);
   const frameMD = useRef<HTMLIFrameElement | null>(null);
 
+  const defaultMode = typeof mode !== 'undefined' ? mode : Mode.iOS;
+
   /**
    * Developers can set a predefined size
    * or an explicit pixel value.
    */
   const frameSize = FRAME_SIZES[size] || size;
   const [usageTarget, setUsageTarget] = useState(UsageTarget.Angular);
-  const [mode, setMode] = useState(Mode.iOS);
+  const [ionicMode, setIonicMode] = useState(defaultMode);
   const [codeSnippets, setCodeSnippets] = useState({});
   const [renderIframes, setRenderIframes] = useState(false);
   const [iframesLoaded, setIframesLoaded] = useState(false);
@@ -217,8 +252,8 @@ export default function Playground({
     io.observe(hostRef.current!);
   });
 
-  const isIOS = mode === Mode.iOS;
-  const isMD = mode === Mode.MD;
+  const isIOS = ionicMode === Mode.iOS;
+  const isMD = ionicMode === Mode.MD;
 
   const sourceiOS = useBaseUrl(`${src}?ionic:mode=${Mode.iOS}`);
   const sourceMD = useBaseUrl(`${src}?ionic:mode=${Mode.MD}`);
@@ -249,7 +284,7 @@ export default function Playground({
       title,
       description,
       includeIonContent,
-      mode: isIOS ? 'ios' : 'md'
+      mode: isIOS ? 'ios' : 'md',
     };
 
     let codeBlock;
@@ -386,8 +421,20 @@ export default function Playground({
             ))}
           </div>
           <div className="playground__control-group">
-            <ControlButton isSelected={isIOS} handleClick={() => setMode(Mode.iOS)} title="iOS mode" label="iOS" />
-            <ControlButton isSelected={isMD} handleClick={() => setMode(Mode.MD)} title="MD mode" label="MD" />
+            <ControlButton
+              disabled={mode && mode === 'md'}
+              isSelected={isIOS}
+              handleClick={() => setIonicMode(Mode.iOS)}
+              title="iOS mode"
+              label="iOS"
+            />
+            <ControlButton
+              disabled={mode && mode === 'ios'}
+              isSelected={isMD}
+              handleClick={() => setIonicMode(Mode.MD)}
+              title="MD mode"
+              label="MD"
+            />
           </div>
           <div className="playground__control-group playground__control-group--end">
             <Tippy theme="playground" arrow={false} placement="bottom" content="Open in StackBlitz">
@@ -498,12 +545,12 @@ export default function Playground({
                   ? [
                       <div className={!isIOS ? 'frame-hidden' : 'frame-visible'}>
                         <device-preview mode="ios">
-                          <iframe height={frameSize} ref={ref => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
+                          <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
                         </device-preview>
                       </div>,
                       <div className={!isMD ? 'frame-hidden' : 'frame-visible'}>
                         <device-preview mode="md">
-                          <iframe height={frameSize} ref={ref => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
+                          <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
                         </device-preview>
                       </div>,
                     ]
@@ -511,13 +558,13 @@ export default function Playground({
                       <iframe
                         height={frameSize}
                         className={!isIOS ? 'frame-hidden' : ''}
-                        ref={ref => handleFrameRef(ref, 'ios')}
+                        ref={(ref) => handleFrameRef(ref, 'ios')}
                         src={sourceiOS}
                       ></iframe>,
                       <iframe
                         height={frameSize}
                         className={!isMD ? 'frame-hidden' : ''}
-                        ref={ref => handleFrameRef(ref, 'md')}
+                        ref={(ref) => handleFrameRef(ref, 'md')}
                         src={sourceMD}
                       ></iframe>,
                     ]}
diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css
index 0c25ce61939..27fd4ed1b97 100644
--- a/src/components/global/Playground/playground.css
+++ b/src/components/global/Playground/playground.css
@@ -122,6 +122,11 @@
   transition: background-color .2s, color .2s;
 }
 
+.playground__control-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* fix layout shifting when button is bolded on select */
 /* has the same text as the button, but bolded in advance to nudge the width */
 .playground__control-button::after {

From 8dc8ad30ffdb02bfd3e48b30d13d4dd6120aa1fb Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 25 Oct 2022 12:00:03 -0400
Subject: [PATCH 114/469] docs(refresher): add component playgrounds (#2617)

---
 docs/api/refresher-content.md                 |  20 +-
 docs/api/refresher.md                         | 332 +++---------------
 .../advanced/angular/example_component_css.md |  11 +
 .../angular/example_component_html.md         |  23 ++
 .../advanced/angular/example_component_ts.md  |  37 ++
 static/usage/refresher/advanced/demo.html     |  99 ++++++
 static/usage/refresher/advanced/index.md      |  35 ++
 static/usage/refresher/advanced/javascript.md |  68 ++++
 .../refresher/advanced/react/main_css.md      |  11 +
 .../refresher/advanced/react/main_tsx.md      |  67 ++++
 static/usage/refresher/advanced/vue.md        |  72 ++++
 .../basic/angular/example_component_html.md   |  15 +
 .../basic/angular/example_component_ts.md     |  16 +
 static/usage/refresher/basic/demo.html        |  43 +++
 static/usage/refresher/basic/index.md         |  25 ++
 static/usage/refresher/basic/javascript.md    |  26 ++
 static/usage/refresher/basic/react.md         |  33 ++
 static/usage/refresher/basic/vue.md           |  36 ++
 .../angular/example_component_html.md         |  20 ++
 .../angular/example_component_ts.md           |  16 +
 .../usage/refresher/custom-content/demo.html  |  48 +++
 .../usage/refresher/custom-content/index.md   |  25 ++
 .../refresher/custom-content/javascript.md    |  31 ++
 .../usage/refresher/custom-content/react.md   |  39 ++
 static/usage/refresher/custom-content/vue.md  |  42 +++
 .../angular/example_component_css.md          |  10 +
 .../angular/example_component_html.md         |  17 +
 .../angular/example_component_ts.md           |  17 +
 .../refresher/custom-scroll-target/demo.html  |  56 +++
 .../refresher/custom-scroll-target/index.md   |  33 ++
 .../custom-scroll-target/javascript.md        |  39 ++
 .../custom-scroll-target/react/main_css.md    |  10 +
 .../custom-scroll-target/react/main_tsx.md    |  37 ++
 .../refresher/custom-scroll-target/vue.md     |  49 +++
 .../angular/example_component_html.md         |  15 +
 .../angular/example_component_ts.md           |  16 +
 .../usage/refresher/pull-properties/demo.html |  43 +++
 .../usage/refresher/pull-properties/index.md  |  25 ++
 .../refresher/pull-properties/javascript.md   |  26 ++
 .../usage/refresher/pull-properties/react.md  |  33 ++
 static/usage/refresher/pull-properties/vue.md |  36 ++
 41 files changed, 1346 insertions(+), 306 deletions(-)
 create mode 100644 static/usage/refresher/advanced/angular/example_component_css.md
 create mode 100644 static/usage/refresher/advanced/angular/example_component_html.md
 create mode 100644 static/usage/refresher/advanced/angular/example_component_ts.md
 create mode 100644 static/usage/refresher/advanced/demo.html
 create mode 100644 static/usage/refresher/advanced/index.md
 create mode 100644 static/usage/refresher/advanced/javascript.md
 create mode 100644 static/usage/refresher/advanced/react/main_css.md
 create mode 100644 static/usage/refresher/advanced/react/main_tsx.md
 create mode 100644 static/usage/refresher/advanced/vue.md
 create mode 100644 static/usage/refresher/basic/angular/example_component_html.md
 create mode 100644 static/usage/refresher/basic/angular/example_component_ts.md
 create mode 100644 static/usage/refresher/basic/demo.html
 create mode 100644 static/usage/refresher/basic/index.md
 create mode 100644 static/usage/refresher/basic/javascript.md
 create mode 100644 static/usage/refresher/basic/react.md
 create mode 100644 static/usage/refresher/basic/vue.md
 create mode 100644 static/usage/refresher/custom-content/angular/example_component_html.md
 create mode 100644 static/usage/refresher/custom-content/angular/example_component_ts.md
 create mode 100644 static/usage/refresher/custom-content/demo.html
 create mode 100644 static/usage/refresher/custom-content/index.md
 create mode 100644 static/usage/refresher/custom-content/javascript.md
 create mode 100644 static/usage/refresher/custom-content/react.md
 create mode 100644 static/usage/refresher/custom-content/vue.md
 create mode 100644 static/usage/refresher/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/refresher/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/refresher/custom-scroll-target/angular/example_component_ts.md
 create mode 100644 static/usage/refresher/custom-scroll-target/demo.html
 create mode 100644 static/usage/refresher/custom-scroll-target/index.md
 create mode 100644 static/usage/refresher/custom-scroll-target/javascript.md
 create mode 100644 static/usage/refresher/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/refresher/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/refresher/custom-scroll-target/vue.md
 create mode 100644 static/usage/refresher/pull-properties/angular/example_component_html.md
 create mode 100644 static/usage/refresher/pull-properties/angular/example_component_ts.md
 create mode 100644 static/usage/refresher/pull-properties/demo.html
 create mode 100644 static/usage/refresher/pull-properties/index.md
 create mode 100644 static/usage/refresher/pull-properties/javascript.md
 create mode 100644 static/usage/refresher/pull-properties/react.md
 create mode 100644 static/usage/refresher/pull-properties/vue.md

diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 1c7ea6632a0..1b80d4ef40c 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-refresher-content"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -14,20 +11,9 @@ 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.
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the 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
@@ -46,4 +32,4 @@ The refresher content contains the text, icon and spinner to display during a pu
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index e0ada62c6e8..11540618492 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-refresher"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/refresher/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/refresher/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -23,330 +16,91 @@ import Slots from '@site/static/auto-generated/refresher/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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.
 
 
-The 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 using touch
-in order to retrieve more data.
+## Basic Usage
 
-Data should be modified during the refresher's output events. Once the async
-operation has completed and the refreshing should end, call `complete()` on the
-refresher.
+import Basic from '@site/static/usage/refresher/basic/index.md';
 
-## Native Refreshers
+<Basic />
 
-Both iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel.
 
-Certain properties such as `pullMin` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Refresher Properties](#properties) for more information.
+## Pull Properties
 
-### iOS Usage
+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.
 
-Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](spinner.md#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.
+These properties do not apply when the [native refresher](#native-refreshers) is enabled.
 
-The iOS native `ion-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.
+import PullProperties from '@site/static/usage/refresher/pull-properties/index.md';
 
-### Android Usage
+<PullProperties />
 
-Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](spinner.md#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.
 
-### Virtual Scroll Usage
+## Custom Refresher Content
 
-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.
+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`.
 
-```html
-<ion-content scroll-y="false">
-  <ion-refresher slot="fixed">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-  <virtual-scroll-element class="ion-content-scroll-host">
-    <!-- Your virtual scroll content -->
-  </virtual-scroll-element>
-</ion-content>
-```
+Setting `pullingIcon` will disable the [native refresher](#native-refreshers).
 
-## Interfaces
+import CustomContent from '@site/static/usage/refresher/custom-content/index.md';
 
-### RefresherEventDetail
-
-```typescript
-interface RefresherEventDetail {
-  complete(): void;
-}
-```
+<CustomContent />
 
-### 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.
+## Native Refreshers
 
-```typescript
-interface RefresherCustomEvent extends CustomEvent {
-  detail: RefresherEventDetail;
-  target: HTMLIonRefresherElement;
-}
-```
+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.
 
-## Usage
+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.
 
-<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' }]}>
+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.
 
-<TabItem value="angular">
 
-```html
-<!-- Default Refresher -->
-<ion-content>
-  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-</ion-content>
+## Usage with Virtual Scroll
 
-<!-- Custom Refresher Properties -->
-<ion-content>
-  <ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-</ion-content>
+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.
 
-<!-- Custom Refresher Content -->
-<ion-content>
-  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-refresher-content
-      pullingIcon="chevron-down-circle-outline"
-      pullingText="Pull to refresh"
-      refreshingSpinner="circles"
-      refreshingText="Refreshing...">
-    </ion-refresher-content>
-  </ion-refresher>
-</ion-content>
-```
+import CustomScrollTarget from '@site/static/usage/refresher/custom-scroll-target/index.md';
 
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'refresher-example',
-  templateUrl: 'refresher-example.html',
-  styleUrls: ['./refresher-example.css'],
-})
-export class RefresherExample {
-  constructor() {}
-
-  doRefresh(event) {
-    console.log('Begin async operation');
-
-    setTimeout(() => {
-      console.log('Async operation has ended');
-      event.target.complete();
-    }, 2000);
-  }
-}
-```
+<CustomScrollTarget />
 
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default Refresher -->
-<ion-content>
-  <ion-refresher slot="fixed">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-</ion-content>
-
-<!-- Custom Refresher Properties -->
-<ion-content>
-  <ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-</ion-content>
-
-<!-- Custom Refresher Content -->
-<ion-content>
-  <ion-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>
-</ion-content>
-```
 
-</TabItem>
+## 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.
 
-<TabItem value="react">
+import Advanced from '@site/static/usage/refresher/advanced/index.md';
 
-```tsx
-import React from 'react';
-import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
-import { RefresherEventDetail } from '@ionic/core';
-import { chevronDownCircleOutline } from 'ionicons/icons';
+<Advanced />
 
-function doRefresh(event: CustomEvent<RefresherEventDetail>) {
-  console.log('Begin async operation');
 
-  setTimeout(() => {
-    console.log('Async operation has ended');
-    event.detail.complete();
-  }, 2000);
-}
+## Interfaces
 
-export const RefresherExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default Refresher --*/}
-    <IonContent>
-      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
-        <IonRefresherContent></IonRefresherContent>
-      </IonRefresher>
-    </IonContent>
-
-    {/*-- Custom Refresher Properties --*/}
-    <IonContent>
-      <IonRefresher slot="fixed" onIonRefresh={doRefresh} pullFactor={0.5} pullMin={100} pullMax={200}>
-        <IonRefresherContent></IonRefresherContent>
-      </IonRefresher>
-    </IonContent>
-
-    {/*-- Custom Refresher Content --*/}
-    <IonContent>
-      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
-        <IonRefresherContent
-          pullingIcon={chevronDownCircleOutline}
-          pullingText="Pull to refresh"
-          refreshingSpinner="circles"
-          refreshingText="Refreshing...">
-        </IonRefresherContent>
-      </IonRefresher>
-    </IonContent>
-  </IonContent>
-);
-```
+### RefresherEventDetail
 
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'refresher-example',
-  styleUrl: 'refresher-example.css'
-})
-export class RefresherExample {
-  doRefresh(ev: any) {
-    console.log('Begin async operation');
-
-    setTimeout(() => {
-      console.log('Async operation has ended');
-      ev.target.complete();
-    }, 2000);
-  }
-
-  render() {
-    return [
-      // Default Refresher
-      <ion-content>
-        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
-          <ion-refresher-content></ion-refresher-content>
-        </ion-refresher>
-      </ion-content>,
-
-      // Custom Refresher Properties
-      <ion-content>
-        <ion-refresher slot="fixed" pullFactor={0.5} pullMin={100} pullMax={200}>
-          <ion-refresher-content></ion-refresher-content>
-        </ion-refresher>
-      </ion-content>,
-
-      // Custom Refresher Content
-      <ion-content>
-        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
-          <ion-refresher-content
-            pullingIcon="chevron-down-circle-outline"
-            pullingText="Pull to refresh"
-            refreshingSpinner="circles"
-            refreshingText="Refreshing...">
-          </ion-refresher-content>
-        </ion-refresher>
-      </ion-content>
-    ];
-  }
+```typescript
+interface RefresherEventDetail {
+  complete(): void;
 }
 ```
 
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default Refresher -->
-  <ion-content>
-    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
-      <ion-refresher-content></ion-refresher-content>
-    </ion-refresher>
-  </ion-content>
-
-  <!-- Custom Refresher Properties -->
-  <ion-content>
-    <ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
-      <ion-refresher-content></ion-refresher-content>
-    </ion-refresher>
-  </ion-content>
-
-  <!-- Custom Refresher Content -->
-  <ion-content>
-    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
-      <ion-refresher-content
-        :pulling-icon="chevronDownCircleOutline"
-        pulling-text="Pull to refresh"
-        refreshing-spinner="circles"
-        refreshing-text="Refreshing...">
-      </ion-refresher-content>
-    </ion-refresher>
-  </ion-content>
-</template>
-
-<script lang="ts">
-import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
-import { chevronDownCircleOutline } from 'ionicons/icons'
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonContent, IonRefresher, IonRefresherContent },
-  setup() {
-    const doRefresh = (event: CustomEvent) => {
-      console.log('Begin async operation');
-      
-      setTimeout(() => {
-        console.log('Async operation has ended');
-        event.target.complete();
-      }, 2000);
-    }
-    return { chevronDownCircleOutline, doRefresh }
-  }
-});
-</script>
-```
+### RefresherCustomEvent
 
-</TabItem>
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
 
-</Tabs>
+```typescript
+interface RefresherCustomEvent extends CustomEvent {
+  detail: RefresherEventDetail;
+  target: HTMLIonRefresherElement;
+}
+```
 
 ## Properties
 <Props />
@@ -364,4 +118,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/refresher/advanced/angular/example_component_css.md b/static/usage/refresher/advanced/angular/example_component_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/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/refresher/advanced/angular/example_component_html.md b/static/usage/refresher/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..e724a1da71e
--- /dev/null
+++ b/static/usage/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/refresher/advanced/angular/example_component_ts.md b/static/usage/refresher/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..035069fc2a9
--- /dev/null
+++ b/static/usage/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/refresher/advanced/demo.html b/static/usage/refresher/advanced/demo.html
new file mode 100644
index 00000000000..53096b16c45
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/refresher/advanced/index.md b/static/usage/refresher/advanced/index.md
new file mode 100644
index 00000000000..be1722152b4
--- /dev/null
+++ b/static/usage/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/refresher/advanced/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/advanced/javascript.md b/static/usage/refresher/advanced/javascript.md
new file mode 100644
index 00000000000..d05bed7cacf
--- /dev/null
+++ b/static/usage/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/refresher/advanced/react/main_css.md b/static/usage/refresher/advanced/react/main_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/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/refresher/advanced/react/main_tsx.md b/static/usage/refresher/advanced/react/main_tsx.md
new file mode 100644
index 00000000000..ab9596a2675
--- /dev/null
+++ b/static/usage/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/refresher/advanced/vue.md b/static/usage/refresher/advanced/vue.md
new file mode 100644
index 00000000000..328bfcf00f1
--- /dev/null
+++ b/static/usage/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/refresher/basic/angular/example_component_html.md b/static/usage/refresher/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f665c1c51a1
--- /dev/null
+++ b/static/usage/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/refresher/basic/angular/example_component_ts.md b/static/usage/refresher/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/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/refresher/basic/demo.html b/static/usage/refresher/basic/demo.html
new file mode 100644
index 00000000000..0d587f8ce40
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/refresher/basic/index.md b/static/usage/refresher/basic/index.md
new file mode 100644
index 00000000000..8cee98ed995
--- /dev/null
+++ b/static/usage/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/refresher/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/basic/javascript.md b/static/usage/refresher/basic/javascript.md
new file mode 100644
index 00000000000..565e1247624
--- /dev/null
+++ b/static/usage/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/refresher/basic/react.md b/static/usage/refresher/basic/react.md
new file mode 100644
index 00000000000..8c828b090c7
--- /dev/null
+++ b/static/usage/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/refresher/basic/vue.md b/static/usage/refresher/basic/vue.md
new file mode 100644
index 00000000000..870081dcfbf
--- /dev/null
+++ b/static/usage/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/refresher/custom-content/angular/example_component_html.md b/static/usage/refresher/custom-content/angular/example_component_html.md
new file mode 100644
index 00000000000..bca91e0a0d8
--- /dev/null
+++ b/static/usage/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/refresher/custom-content/angular/example_component_ts.md b/static/usage/refresher/custom-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/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/refresher/custom-content/demo.html b/static/usage/refresher/custom-content/demo.html
new file mode 100644
index 00000000000..eb514fdedab
--- /dev/null
+++ b/static/usage/refresher/custom-content/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>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
new file mode 100644
index 00000000000..371e87c559a
--- /dev/null
+++ b/static/usage/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/refresher/custom-content/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/custom-content/javascript.md b/static/usage/refresher/custom-content/javascript.md
new file mode 100644
index 00000000000..779bd97ed80
--- /dev/null
+++ b/static/usage/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/refresher/custom-content/react.md b/static/usage/refresher/custom-content/react.md
new file mode 100644
index 00000000000..627f4981f56
--- /dev/null
+++ b/static/usage/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/refresher/custom-content/vue.md b/static/usage/refresher/custom-content/vue.md
new file mode 100644
index 00000000000..a5bb444fd91
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/refresher/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/refresher/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..4c0e2cddc16
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/refresher/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..8d604ad85ee
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/demo.html b/static/usage/refresher/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..c5939679d8e
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/refresher/custom-scroll-target/index.md b/static/usage/refresher/custom-scroll-target/index.md
new file mode 100644
index 00000000000..1f543e8de68
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/custom-scroll-target/javascript.md b/static/usage/refresher/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..dde203612e4
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/react/main_css.md b/static/usage/refresher/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/refresher/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..fd701a7c531
--- /dev/null
+++ b/static/usage/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/refresher/custom-scroll-target/vue.md b/static/usage/refresher/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..b63d979c827
--- /dev/null
+++ b/static/usage/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/refresher/pull-properties/angular/example_component_html.md b/static/usage/refresher/pull-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..1e5948063b8
--- /dev/null
+++ b/static/usage/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/refresher/pull-properties/angular/example_component_ts.md b/static/usage/refresher/pull-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/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/refresher/pull-properties/demo.html b/static/usage/refresher/pull-properties/demo.html
new file mode 100644
index 00000000000..9d2e79da284
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/refresher/pull-properties/index.md b/static/usage/refresher/pull-properties/index.md
new file mode 100644
index 00000000000..f1e015c3e9e
--- /dev/null
+++ b/static/usage/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/refresher/pull-properties/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/refresher/pull-properties/javascript.md b/static/usage/refresher/pull-properties/javascript.md
new file mode 100644
index 00000000000..8bc8b286566
--- /dev/null
+++ b/static/usage/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/refresher/pull-properties/react.md b/static/usage/refresher/pull-properties/react.md
new file mode 100644
index 00000000000..73f5a65b07a
--- /dev/null
+++ b/static/usage/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/refresher/pull-properties/vue.md b/static/usage/refresher/pull-properties/vue.md
new file mode 100644
index 00000000000..0d3e1b45e9f
--- /dev/null
+++ b/static/usage/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>
+```

From 6654b1085d0c50829c7fde8d4eea56e9f7c91f84 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 26 Oct 2022 10:24:02 -0400
Subject: [PATCH 115/469] docs(content): add component playgrounds (#2622)

---
 docs/api/content.md                           | 222 +++++-------------
 static/usage/content/basic/angular.md         |  12 +
 static/usage/content/basic/demo.html          |  29 +++
 static/usage/content/basic/index.md           |  13 +
 static/usage/content/basic/javascript.md      |  12 +
 static/usage/content/basic/react.md           |  20 ++
 static/usage/content/basic/vue.md             |  23 ++
 static/usage/content/fixed/angular.md         |  14 ++
 .../fixed/angular/example_component_css.md    |   6 +
 .../fixed/angular/example_component_html.md   |  14 ++
 static/usage/content/fixed/demo.html          |  38 +++
 static/usage/content/fixed/index.md           |  33 +++
 static/usage/content/fixed/javascript.md      |  21 ++
 static/usage/content/fixed/react.md           |  22 ++
 static/usage/content/fixed/react/main_css.md  |   6 +
 static/usage/content/fixed/react/main_tsx.md  |  24 ++
 static/usage/content/fixed/vue.md             |  32 +++
 .../angular/example_component_css.md          |   5 +
 .../angular/example_component_html.md         |  25 ++
 static/usage/content/fullscreen/demo.html     |  48 ++++
 static/usage/content/fullscreen/index.md      |  33 +++
 static/usage/content/fullscreen/javascript.md |  31 +++
 .../content/fullscreen/react/main_css.md      |   5 +
 .../content/fullscreen/react/main_tsx.md      |  37 +++
 static/usage/content/fullscreen/vue.md        |  42 ++++
 static/usage/content/header-footer/angular.md |  26 ++
 static/usage/content/header-footer/demo.html  |  43 ++++
 static/usage/content/header-footer/index.md   |  13 +
 .../usage/content/header-footer/javascript.md |  26 ++
 static/usage/content/header-footer/react.md   |  36 +++
 static/usage/content/header-footer/vue.md     |  37 +++
 .../angular/example_component_html.md         |  18 ++
 .../angular/example_component_ts.md           |  22 ++
 static/usage/content/scroll-events/demo.html  |  39 +++
 static/usage/content/scroll-events/index.md   |  25 ++
 .../usage/content/scroll-events/javascript.md |  22 ++
 static/usage/content/scroll-events/react.md   |  37 +++
 static/usage/content/scroll-events/vue.md     |  39 +++
 .../angular/example_component_html.md         |  15 ++
 .../angular/example_component_ts.md           |  24 ++
 static/usage/content/scroll-methods/demo.html |  48 ++++
 static/usage/content/scroll-methods/index.md  |  25 ++
 .../content/scroll-methods/javascript.md      |  31 +++
 static/usage/content/scroll-methods/react.md  |  37 +++
 static/usage/content/scroll-methods/vue.md    |  34 +++
 .../usage/content/theming/colors/angular.md   |  38 +++
 static/usage/content/theming/colors/demo.html |  69 ++++++
 static/usage/content/theming/colors/index.md  |  13 +
 .../content/theming/colors/javascript.md      |  38 +++
 static/usage/content/theming/colors/react.md  |  48 ++++
 static/usage/content/theming/colors/vue.md    |  49 ++++
 .../angular/example_component_css.md          |   6 +
 .../angular/example_component_html.md         |  12 +
 .../content/theming/css-properties/demo.html  |  36 +++
 .../content/theming/css-properties/index.md   |  33 +++
 .../theming/css-properties/javascript.md      |  19 ++
 .../theming/css-properties/react/main_css.md  |   6 +
 .../theming/css-properties/react/main_tsx.md  |  22 ++
 .../content/theming/css-properties/vue.md     |  30 +++
 .../angular/example_component_css.md          |   9 +
 .../angular/example_component_html.md         |  12 +
 .../theming/css-shadow-parts/demo.html        |  39 +++
 .../content/theming/css-shadow-parts/index.md |  33 +++
 .../theming/css-shadow-parts/javascript.md    |  22 ++
 .../css-shadow-parts/react/main_css.md        |   9 +
 .../css-shadow-parts/react/main_tsx.md        |  22 ++
 .../content/theming/css-shadow-parts/vue.md   |  33 +++
 67 files changed, 1800 insertions(+), 162 deletions(-)
 create mode 100644 static/usage/content/basic/angular.md
 create mode 100644 static/usage/content/basic/demo.html
 create mode 100644 static/usage/content/basic/index.md
 create mode 100644 static/usage/content/basic/javascript.md
 create mode 100644 static/usage/content/basic/react.md
 create mode 100644 static/usage/content/basic/vue.md
 create mode 100644 static/usage/content/fixed/angular.md
 create mode 100644 static/usage/content/fixed/angular/example_component_css.md
 create mode 100644 static/usage/content/fixed/angular/example_component_html.md
 create mode 100644 static/usage/content/fixed/demo.html
 create mode 100644 static/usage/content/fixed/index.md
 create mode 100644 static/usage/content/fixed/javascript.md
 create mode 100644 static/usage/content/fixed/react.md
 create mode 100644 static/usage/content/fixed/react/main_css.md
 create mode 100644 static/usage/content/fixed/react/main_tsx.md
 create mode 100644 static/usage/content/fixed/vue.md
 create mode 100644 static/usage/content/fullscreen/angular/example_component_css.md
 create mode 100644 static/usage/content/fullscreen/angular/example_component_html.md
 create mode 100644 static/usage/content/fullscreen/demo.html
 create mode 100644 static/usage/content/fullscreen/index.md
 create mode 100644 static/usage/content/fullscreen/javascript.md
 create mode 100644 static/usage/content/fullscreen/react/main_css.md
 create mode 100644 static/usage/content/fullscreen/react/main_tsx.md
 create mode 100644 static/usage/content/fullscreen/vue.md
 create mode 100644 static/usage/content/header-footer/angular.md
 create mode 100644 static/usage/content/header-footer/demo.html
 create mode 100644 static/usage/content/header-footer/index.md
 create mode 100644 static/usage/content/header-footer/javascript.md
 create mode 100644 static/usage/content/header-footer/react.md
 create mode 100644 static/usage/content/header-footer/vue.md
 create mode 100644 static/usage/content/scroll-events/angular/example_component_html.md
 create mode 100644 static/usage/content/scroll-events/angular/example_component_ts.md
 create mode 100644 static/usage/content/scroll-events/demo.html
 create mode 100644 static/usage/content/scroll-events/index.md
 create mode 100644 static/usage/content/scroll-events/javascript.md
 create mode 100644 static/usage/content/scroll-events/react.md
 create mode 100644 static/usage/content/scroll-events/vue.md
 create mode 100644 static/usage/content/scroll-methods/angular/example_component_html.md
 create mode 100644 static/usage/content/scroll-methods/angular/example_component_ts.md
 create mode 100644 static/usage/content/scroll-methods/demo.html
 create mode 100644 static/usage/content/scroll-methods/index.md
 create mode 100644 static/usage/content/scroll-methods/javascript.md
 create mode 100644 static/usage/content/scroll-methods/react.md
 create mode 100644 static/usage/content/scroll-methods/vue.md
 create mode 100644 static/usage/content/theming/colors/angular.md
 create mode 100644 static/usage/content/theming/colors/demo.html
 create mode 100644 static/usage/content/theming/colors/index.md
 create mode 100644 static/usage/content/theming/colors/javascript.md
 create mode 100644 static/usage/content/theming/colors/react.md
 create mode 100644 static/usage/content/theming/colors/vue.md
 create mode 100644 static/usage/content/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/content/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/content/theming/css-properties/demo.html
 create mode 100644 static/usage/content/theming/css-properties/index.md
 create mode 100644 static/usage/content/theming/css-properties/javascript.md
 create mode 100644 static/usage/content/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/content/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/content/theming/css-properties/vue.md
 create mode 100644 static/usage/content/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/content/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/content/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/content/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/content/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/content/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/content/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/content/theming/css-shadow-parts/vue.md

diff --git a/docs/api/content.md b/docs/api/content.md
index add18a8e3f6..8838a16786b 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-content"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/content/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/content/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,14 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
 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
@@ -40,204 +25,117 @@ 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).
 
 
-## Fixed Content
+## Basic Usage
 
-In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+import Basic from '@site/static/usage/content/basic/index.md';
 
-## Interfaces
+<Basic />
 
-### ScrollBaseDetail
 
-```typescript
-interface ScrollBaseDetail {
-  isScrolling: boolean;
-}
-```
+## Header & Footer
 
-### ScrollDetail
+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.
 
-```typescript
-interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
-  scrollTop: number;
-  scrollLeft: number;
-}
-```
-
-### ScrollBaseCustomEvent 
+import HeaderFooter from '@site/static/usage/content/header-footer/index.md';
 
-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;
-}
-```
+<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`.
 
-## Usage
+import Fullscreen from '@site/static/usage/content/fullscreen/index.md';
 
-<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' }]}>
+<Fullscreen />
 
-<TabItem value="angular">
 
-```html
-<ion-content
-  [scrollEvents]="true"
-  (ionScrollStart)="logScrollStart()"
-  (ionScroll)="logScrolling($event)"
-  (ionScrollEnd)="logScrollEnd()">
-    <h1>Main Content</h1>
+## Fixed Content
 
-    <div slot="fixed">
-      <h1>Fixed Content</h1>
-    </div>
-</ion-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/content/fixed/index.md';
 
+<Fixed />
 
-</TabItem>
+## 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.
 
-<TabItem value="javascript">
+import ScrollMethods from '@site/static/usage/content/scroll-methods/index.md';
 
-```html
-<ion-content>
-  <h1>Main Content</h1>
+<ScrollMethods />
 
-  <div slot="fixed">
-    <h1>Fixed Content</h1>
-  </div>
-</ion-content>
-```
+## Scroll Events
 
-```javascript
-var content = document.querySelector('ion-content');
-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'));
-```
+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';
 
-</TabItem>
+<ScrollEvents />
 
 
-<TabItem value="react">
+## Theming
 
-```tsx
-import React from 'react';
-import { IonContent } from '@ionic/react';
+### Colors
 
-const ContentExample: React.FC = () => (
-  <IonContent
-    scrollEvents={true}
-    onIonScrollStart={() => {}}
-    onIonScroll={() => {}}
-    onIonScrollEnd={() => {}}>
-      <h1>Main Content</h1>
+import Colors from '@site/static/usage/content/theming/colors/index.md';
 
-      <div slot="fixed">
-        <h1>Fixed Content</h1>
-      </div>
-  </IonContent>
-);
-```
+<Colors />
 
+### CSS Shadow Parts
 
-</TabItem>
+import CSSParts from '@site/static/usage/content/theming/css-shadow-parts/index.md';
 
+<CSSParts />
 
-<TabItem value="stencil">
+### CSS Custom Properties
 
-```tsx
-import { Component, h } from '@stencil/core';
+import CSSProps from '@site/static/usage/content/theming/css-properties/index.md';
 
-@Component({
-  tag: 'content-example',
-  styleUrl: 'content-example.css'
-})
-export class ContentExample {
-  logScrollStart() {
-    console.log('Scroll start');
-  }
+<CSSProps />
 
-  logScrolling(ev) {
-    console.log('Scrolling', ev);
-  }
 
-  logScrollEnd() {
-    console.log('Scroll end');
-  }
+## Interfaces
 
-  render() {
-    return [
-      <ion-content
-        scrollEvents={true}
-        onIonScrollStart={() => this.logScrollStart()}
-        onIonScroll={(ev) => this.logScrolling(ev)}
-        onIonScrollEnd={() => this.logScrollEnd()}>
-          <h1>Main Content</h1>
+### ScrollBaseDetail
 
-          <div slot="fixed">
-            <h1>Fixed Content</h1>
-          </div>
-      </ion-content>
-    ];
-  }
+```typescript
+interface ScrollBaseDetail {
+  isScrolling: boolean;
 }
 ```
 
+### ScrollDetail
 
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-content
-    :scroll-events="true"
-    @ionScrollStart="logScrollStart()"
-    @ionScroll="logScrolling($event)"
-    @ionScrollEnd="logScrollEnd()">
-      <h1>Main Content</h1>
-
-      <div slot="fixed">
-        <h1>Fixed Content</h1>
-      </div>
-  </ion-content>
-</template>
+```typescript
+interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
+  scrollTop: number;
+  scrollLeft: number;
+}
+```
 
-<script>
-import { IonContent } from '@ionic/vue';
-import { defineComponent } from 'vue';
+### ScrollBaseCustomEvent
 
-export default defineComponent({
-  components: { IonContent }
-});
-</script>
+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.
 
-</TabItem>
+```typescript
+interface ScrollCustomEvent extends ScrollBaseCustomEvent {
+  detail: ScrollDetail;
+}
+```
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -255,4 +153,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/content/basic/angular.md b/static/usage/content/basic/angular.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/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/content/basic/demo.html b/static/usage/content/basic/demo.html
new file mode 100644
index 00000000000..ea44b3903b0
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/content/basic/index.md b/static/usage/content/basic/index.md
new file mode 100644
index 00000000000..ab1c88ac36d
--- /dev/null
+++ b/static/usage/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/content/basic/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/basic/javascript.md b/static/usage/content/basic/javascript.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/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/content/basic/react.md b/static/usage/content/basic/react.md
new file mode 100644
index 00000000000..2ece824eea4
--- /dev/null
+++ b/static/usage/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/content/basic/vue.md b/static/usage/content/basic/vue.md
new file mode 100644
index 00000000000..84e2e35470e
--- /dev/null
+++ b/static/usage/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/content/fixed/angular.md b/static/usage/content/fixed/angular.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/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/content/fixed/angular/example_component_css.md b/static/usage/content/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/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/content/fixed/angular/example_component_html.md b/static/usage/content/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/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/content/fixed/demo.html b/static/usage/content/fixed/demo.html
new file mode 100644
index 00000000000..7b791156020
--- /dev/null
+++ b/static/usage/content/fixed/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>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
new file mode 100644
index 00000000000..9c3d34deb6e
--- /dev/null
+++ b/static/usage/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/content/fixed/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/fixed/javascript.md b/static/usage/content/fixed/javascript.md
new file mode 100644
index 00000000000..2a577f1d76a
--- /dev/null
+++ b/static/usage/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/content/fixed/react.md b/static/usage/content/fixed/react.md
new file mode 100644
index 00000000000..d8e115e5491
--- /dev/null
+++ b/static/usage/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/content/fixed/react/main_css.md b/static/usage/content/fixed/react/main_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/content/fixed/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot="fixed"] {
+  top: 50%;
+  right: 20px;
+}
+```
diff --git a/static/usage/content/fixed/react/main_tsx.md b/static/usage/content/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..542f79deeb8
--- /dev/null
+++ b/static/usage/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/content/fixed/vue.md b/static/usage/content/fixed/vue.md
new file mode 100644
index 00000000000..2c44fd0b289
--- /dev/null
+++ b/static/usage/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/content/fullscreen/angular/example_component_css.md b/static/usage/content/fullscreen/angular/example_component_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/content/fullscreen/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+  --opacity: .5
+}
+```
diff --git a/static/usage/content/fullscreen/angular/example_component_html.md b/static/usage/content/fullscreen/angular/example_component_html.md
new file mode 100644
index 00000000000..c5cf5a10dd9
--- /dev/null
+++ b/static/usage/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/content/fullscreen/demo.html b/static/usage/content/fullscreen/demo.html
new file mode 100644
index 00000000000..5fd6f696dc7
--- /dev/null
+++ b/static/usage/content/fullscreen/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>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
new file mode 100644
index 00000000000..015ddad0a04
--- /dev/null
+++ b/static/usage/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/content/fullscreen/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/fullscreen/javascript.md b/static/usage/content/fullscreen/javascript.md
new file mode 100644
index 00000000000..f6011fa9b88
--- /dev/null
+++ b/static/usage/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/content/fullscreen/react/main_css.md b/static/usage/content/fullscreen/react/main_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/content/fullscreen/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+  --opacity: .5
+}
+```
diff --git a/static/usage/content/fullscreen/react/main_tsx.md b/static/usage/content/fullscreen/react/main_tsx.md
new file mode 100644
index 00000000000..ca324631897
--- /dev/null
+++ b/static/usage/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/content/fullscreen/vue.md b/static/usage/content/fullscreen/vue.md
new file mode 100644
index 00000000000..e4bd0c3a59f
--- /dev/null
+++ b/static/usage/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/content/header-footer/angular.md b/static/usage/content/header-footer/angular.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/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/content/header-footer/demo.html b/static/usage/content/header-footer/demo.html
new file mode 100644
index 00000000000..5dfee53b98c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/content/header-footer/index.md b/static/usage/content/header-footer/index.md
new file mode 100644
index 00000000000..baca0fad424
--- /dev/null
+++ b/static/usage/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/content/header-footer/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/header-footer/javascript.md b/static/usage/content/header-footer/javascript.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/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/content/header-footer/react.md b/static/usage/content/header-footer/react.md
new file mode 100644
index 00000000000..4ffff834f2a
--- /dev/null
+++ b/static/usage/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/content/header-footer/vue.md b/static/usage/content/header-footer/vue.md
new file mode 100644
index 00000000000..8bd052a6460
--- /dev/null
+++ b/static/usage/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/content/scroll-events/angular/example_component_html.md b/static/usage/content/scroll-events/angular/example_component_html.md
new file mode 100644
index 00000000000..a1c3aac558f
--- /dev/null
+++ b/static/usage/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/content/scroll-events/angular/example_component_ts.md b/static/usage/content/scroll-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..7e3f7625f57
--- /dev/null
+++ b/static/usage/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/content/scroll-events/demo.html b/static/usage/content/scroll-events/demo.html
new file mode 100644
index 00000000000..7527ed684f4
--- /dev/null
+++ b/static/usage/content/scroll-events/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" />
+</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
new file mode 100644
index 00000000000..abc114673be
--- /dev/null
+++ b/static/usage/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/content/scroll-events/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/scroll-events/javascript.md b/static/usage/content/scroll-events/javascript.md
new file mode 100644
index 00000000000..5cc4e537dd6
--- /dev/null
+++ b/static/usage/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/content/scroll-events/react.md b/static/usage/content/scroll-events/react.md
new file mode 100644
index 00000000000..ce8ced69807
--- /dev/null
+++ b/static/usage/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/content/scroll-events/vue.md b/static/usage/content/scroll-events/vue.md
new file mode 100644
index 00000000000..2afdcf26682
--- /dev/null
+++ b/static/usage/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/content/scroll-methods/angular/example_component_html.md b/static/usage/content/scroll-methods/angular/example_component_html.md
new file mode 100644
index 00000000000..ffa8c913e3e
--- /dev/null
+++ b/static/usage/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/content/scroll-methods/angular/example_component_ts.md b/static/usage/content/scroll-methods/angular/example_component_ts.md
new file mode 100644
index 00000000000..cd595635cd9
--- /dev/null
+++ b/static/usage/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 bottom instead of instantly
+    this.content.scrollToTop(500);
+  }
+}
+```
diff --git a/static/usage/content/scroll-methods/demo.html b/static/usage/content/scroll-methods/demo.html
new file mode 100644
index 00000000000..c5983316135
--- /dev/null
+++ b/static/usage/content/scroll-methods/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>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 bottom 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
new file mode 100644
index 00000000000..e2768ef20cf
--- /dev/null
+++ b/static/usage/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/content/scroll-methods/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/scroll-methods/javascript.md b/static/usage/content/scroll-methods/javascript.md
new file mode 100644
index 00000000000..81bf4ba4867
--- /dev/null
+++ b/static/usage/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 bottom instead of instantly
+    content.scrollToTop(500);
+  }
+</script>
+```
diff --git a/static/usage/content/scroll-methods/react.md b/static/usage/content/scroll-methods/react.md
new file mode 100644
index 00000000000..4d7799f6ab3
--- /dev/null
+++ b/static/usage/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 bottom 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/content/scroll-methods/vue.md b/static/usage/content/scroll-methods/vue.md
new file mode 100644
index 00000000000..0dcfff9c7de
--- /dev/null
+++ b/static/usage/content/scroll-methods/vue.md
@@ -0,0 +1,34 @@
+```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() {
+        this.$refs.content.$el.scrollToBottom(500);
+      },
+      scrollToTop() {
+        this.$refs.content.$el.scrollToTop(500);
+      },
+    }
+  });
+</script>
+```
diff --git a/static/usage/content/theming/colors/angular.md b/static/usage/content/theming/colors/angular.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/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/content/theming/colors/demo.html b/static/usage/content/theming/colors/demo.html
new file mode 100644
index 00000000000..588dcd40212
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/content/theming/colors/index.md b/static/usage/content/theming/colors/index.md
new file mode 100644
index 00000000000..9418e4ac97e
--- /dev/null
+++ b/static/usage/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/content/theming/colors/demo.html"
+  includeIonContent={false}
+  size="xlarge"
+/>
diff --git a/static/usage/content/theming/colors/javascript.md b/static/usage/content/theming/colors/javascript.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/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/content/theming/colors/react.md b/static/usage/content/theming/colors/react.md
new file mode 100644
index 00000000000..5a24d44a829
--- /dev/null
+++ b/static/usage/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/content/theming/colors/vue.md b/static/usage/content/theming/colors/vue.md
new file mode 100644
index 00000000000..1bbcc99834e
--- /dev/null
+++ b/static/usage/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/content/theming/css-properties/angular/example_component_css.md b/static/usage/content/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/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/content/theming/css-properties/angular/example_component_html.md b/static/usage/content/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/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/content/theming/css-properties/demo.html b/static/usage/content/theming/css-properties/demo.html
new file mode 100644
index 00000000000..4232d52adea
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/content/theming/css-properties/index.md b/static/usage/content/theming/css-properties/index.md
new file mode 100644
index 00000000000..1eb8c9d5a82
--- /dev/null
+++ b/static/usage/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/content/theming/css-properties/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/theming/css-properties/javascript.md b/static/usage/content/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..2ad2211af87
--- /dev/null
+++ b/static/usage/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/content/theming/css-properties/react/main_css.md b/static/usage/content/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/content/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+  --background: #d31373;
+  --color: #fff;
+}
+```
diff --git a/static/usage/content/theming/css-properties/react/main_tsx.md b/static/usage/content/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/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/content/theming/css-properties/vue.md b/static/usage/content/theming/css-properties/vue.md
new file mode 100644
index 00000000000..09322711dfd
--- /dev/null
+++ b/static/usage/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/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/content/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/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/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/content/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/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/content/theming/css-shadow-parts/demo.html b/static/usage/content/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..b1f06e8a099
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/content/theming/css-shadow-parts/index.md b/static/usage/content/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..d64984aa9e8
--- /dev/null
+++ b/static/usage/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/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/content/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..74124e4fdb3
--- /dev/null
+++ b/static/usage/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/content/theming/css-shadow-parts/react/main_css.md b/static/usage/content/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/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/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/content/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/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/content/theming/css-shadow-parts/vue.md b/static/usage/content/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..129f3ec615a
--- /dev/null
+++ b/static/usage/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>
+```

From 00bc9635d1367d22ff35a7c2e591fd16ae40417d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 26 Oct 2022 11:23:57 -0400
Subject: [PATCH 116/469] docs(title): component playgrounds (#2607)

---
 docs/api/title.md                             | 678 +-----------------
 .../global/Playground/stackblitz.utils.ts     |   7 +-
 static/code/stackblitz/react/index.html       |   3 +
 static/usage/title/basic/angular.md           |   7 +
 static/usage/title/basic/demo.html            |  25 +
 static/usage/title/basic/index.md             |  13 +
 static/usage/title/basic/javascript.md        |   7 +
 static/usage/title/basic/react.md             |  15 +
 static/usage/title/basic/vue.md               |  18 +
 .../collapsible-large-title/basic/angular.md  |  39 +
 .../collapsible-large-title/basic/demo.html   |  59 ++
 .../collapsible-large-title/basic/index.md    |  14 +
 .../basic/javascript.md                       |  39 +
 .../collapsible-large-title/basic/react.md    |  49 ++
 .../collapsible-large-title/basic/vue.md      |  50 ++
 .../buttons/angular.md                        |  45 ++
 .../collapsible-large-title/buttons/demo.html |  65 ++
 .../collapsible-large-title/buttons/index.md  |  14 +
 .../buttons/javascript.md                     |  45 ++
 .../collapsible-large-title/buttons/react.md  |  55 ++
 .../collapsible-large-title/buttons/vue.md    |  56 ++
 .../angular/example_component_html.md         |  37 +
 .../css-properties/angular/global_css.md      |  14 +
 .../title/theming/css-properties/demo.html    |  69 ++
 .../title/theming/css-properties/index.md     |  33 +
 .../theming/css-properties/javascript.md      |  52 ++
 .../theming/css-properties/react/main_css.md  |  14 +
 .../theming/css-properties/react/main_tsx.md  |  49 ++
 .../usage/title/theming/css-properties/vue.md |  62 ++
 29 files changed, 975 insertions(+), 658 deletions(-)
 create mode 100644 static/code/stackblitz/react/index.html
 create mode 100644 static/usage/title/basic/angular.md
 create mode 100644 static/usage/title/basic/demo.html
 create mode 100644 static/usage/title/basic/index.md
 create mode 100644 static/usage/title/basic/javascript.md
 create mode 100644 static/usage/title/basic/react.md
 create mode 100644 static/usage/title/basic/vue.md
 create mode 100644 static/usage/title/collapsible-large-title/basic/angular.md
 create mode 100644 static/usage/title/collapsible-large-title/basic/demo.html
 create mode 100644 static/usage/title/collapsible-large-title/basic/index.md
 create mode 100644 static/usage/title/collapsible-large-title/basic/javascript.md
 create mode 100644 static/usage/title/collapsible-large-title/basic/react.md
 create mode 100644 static/usage/title/collapsible-large-title/basic/vue.md
 create mode 100644 static/usage/title/collapsible-large-title/buttons/angular.md
 create mode 100644 static/usage/title/collapsible-large-title/buttons/demo.html
 create mode 100644 static/usage/title/collapsible-large-title/buttons/index.md
 create mode 100644 static/usage/title/collapsible-large-title/buttons/javascript.md
 create mode 100644 static/usage/title/collapsible-large-title/buttons/react.md
 create mode 100644 static/usage/title/collapsible-large-title/buttons/vue.md
 create mode 100644 static/usage/title/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/title/theming/css-properties/angular/global_css.md
 create mode 100644 static/usage/title/theming/css-properties/demo.html
 create mode 100644 static/usage/title/theming/css-properties/index.md
 create mode 100644 static/usage/title/theming/css-properties/javascript.md
 create mode 100644 static/usage/title/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/title/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/title/theming/css-properties/vue.md

diff --git a/docs/api/title.md b/docs/api/title.md
index e4fd4103366..b67f7dedb2a 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-title"
-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/title/props.md';
 import Events from '@site/static/auto-generated/title/events.md';
 import Methods from '@site/static/auto-generated/title/methods.md';
@@ -22,680 +17,53 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-`ion-title` is a component that sets the title of the `Toolbar`.
-
-
-
-## 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 title -->
-<ion-toolbar>
-  <ion-title>Default Title</ion-title>
-</ion-toolbar>
-
-<!-- Small title above a default title -->
-<ion-toolbar>
-  <ion-title size="small">Small Title above a Default Title</ion-title>
-</ion-toolbar>
-<ion-toolbar>
-  <ion-title>Default Title</ion-title>
-</ion-toolbar>
-
-<!-- Large title -->
-<ion-toolbar>
-  <ion-title size="large">Large Title</ion-title>
-</ion-toolbar>
-```
-
-### Collapsible Large Titles
-
-Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
-
-```html
-<ion-header translucent="true">
-  <ion-toolbar>
-    <ion-title>Settings</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content fullscreen="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Settings</ion-title>
-    </ion-toolbar>
-    <ion-toolbar>
-      <ion-searchbar></ion-searchbar>
-    </ion-toolbar>
-  </ion-header>
-
-  ...
-
-</ion-content>
-```
-
-In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
-
-```html
-<ion-header translucent="true">
-  <ion-toolbar>
-    <ion-buttons collapse="true" slot="end">
-      <ion-button>Click Me</ion-button>
-    </ion-buttons>
-    <ion-title>Settings</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content fullscreen="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-buttons collapse="true" slot="end">
-        <ion-button>Click Me</ion-button>
-      </ion-buttons>
-      <ion-title size="large">Settings</ion-title>
-    </ion-toolbar>
-    <ion-toolbar>
-      <ion-searchbar></ion-searchbar>
-    </ion-toolbar>
-  </ion-header>
-
-  ...
-
-</ion-content>
-```
 
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+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.
 
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
+## Basic
 
-> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
+import Basic from '@site/static/usage/title/basic/index.md';
 
-### Styling Collapsible Large Titles
+<Basic />
 
-The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. 
+## Collapsible Large Titles
 
-By default, the `ion-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 `ion-content`.
+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.
 
-You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
+:::info
 
-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
-ion-title.title-large {
-  color: purple;
-  font-size: 30px;
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default title -->
-<ion-toolbar>
-  <ion-title>Default Title</ion-title>
-</ion-toolbar>
-
-<!-- Small title above a default title -->
-<ion-toolbar>
-  <ion-title size="small">Small Title above a Default Title</ion-title>
-</ion-toolbar>
-<ion-toolbar>
-  <ion-title>Default Title</ion-title>
-</ion-toolbar>
-
-<!-- Large title -->
-<ion-toolbar>
-  <ion-title size="large">Large Title</ion-title>
-</ion-toolbar>
-```
-
-### Collapsible Large Titles
-
-Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
-
-```html
-<ion-header translucent="true">
-  <ion-toolbar>
-    <ion-title>Settings</ion-title>
-  </ion-toolbar>
-</ion-header>
+This feature is only available for iOS.
 
-<ion-content fullscreen="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Settings</ion-title>
-    </ion-toolbar>
-    <ion-toolbar>
-      <ion-searchbar></ion-searchbar>
-    </ion-toolbar>
-  </ion-header>
+:::
 
-  ...
+import CollapsibleLargeTitle from '@site/static/usage/title/collapsible-large-title/basic/index.md';
 
-</ion-content>
-```
+<CollapsibleLargeTitle />
 
-In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
+### Collapsible Buttons
 
-```html
-<ion-header translucent="true">
-  <ion-toolbar>
-    <ion-buttons collapse="true" slot="end">
-      <ion-button>Click Me</ion-button>
-    </ion-buttons>
-    <ion-title>Settings</ion-title>
-  </ion-toolbar>
-</ion-header>
+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.
 
-<ion-content fullscreen="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-buttons collapse="true" slot="end">
-        <ion-button>Click Me</ion-button>
-      </ion-buttons>
-      <ion-title size="large">Settings</ion-title>
-    </ion-toolbar>
-    <ion-toolbar>
-      <ion-searchbar></ion-searchbar>
-    </ion-toolbar>
-  </ion-header>
 
-  ...
+import CollapsibleLargeTitleButtons from '@site/static/usage/title/collapsible-large-title/buttons/index.md';
 
-</ion-content>
-```
+<CollapsibleLargeTitleButtons />
 
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+## Theming
 
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
+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.
 
-> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
-
-### Styling Collapsible Large Titles
-
-The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. 
-
-By default, the `ion-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 `ion-content`.
-
-You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. 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
-ion-title.title-large {
-  color: purple;
-  font-size: 30px;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import {
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
-
-export const ToolbarExample: React.FC = () => (
-  {/*-- Default title --*/}
-  <IonToolbar>
-    <IonTitle>Default Title</IonTitle>
-  </IonToolbar>
-
-  {/*-- Small title --*/}
-  <IonToolbar>
-    <IonTitle size="small">Small Title above a Default Title</IonTitle>
-  </IonToolbar>
-  <IonToolbar>
-    <IonTitle>Default Title</IonTitle>
-  </IonToolbar>
-
-  {/*-- Large title --*/}
-  <IonToolbar>
-    <IonTitle size="large">Large Title</IonTitle>
-  </IonToolbar>
-);
-```
-
-### Collapsible Large Titles
-
-Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `IonTitle`, `IonHeader`, and (optionally) `IonButtons` elements.
-
-```tsx
-import React from 'react';
-import {
-  IonContent,
-  IonHeader,
-  IonSearchbar,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
-
-export const LargeTitleExample: React.FC = () => (
-  <>
-    <IonHeader translucent="true">
-      <IonToolbar>
-        <IonTitle>Settings</IonTitle>
-      </IonToolbar>
-    </IonHeader>
-
-    <IonContent fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle size="large">Settings</IonTitle>
-        </IonToolbar>
-        <IonToolbar>
-          <IonSearchbar></IonSearchbar>
-        </IonToolbar>
-      </IonHeader>
-
-      ...
-
-    </IonContent>
-  </>
-);
-```
-
-In the example above, notice there are two `IonHeader` elements. The first `IonHeader` represents the "collapsed" state of your collapsible header, and the second `IonHeader` represents the "expanded" state of your collapsible header. Notice that the second `IonHeader` must have `collapse="condense"` and must exist within `IonContent`. Additionally, in order to get the large title styling, `IonTitle` must have `size="large"`.
-
-```tsx
-import React from 'react';
-import {
-  IonButton,
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonSearchbar,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
-
-export const LargeTitleExample: React.FC = () => (
-  <>
-    <IonHeader translucent="true">
-      <IonToolbar>
-        <IonButtons collapse="true" slot="end">
-          <IonButton>Click Me</IonButton>
-        </IonButtons>
-        <IonTitle>Settings</IonTitle>
-      </IonToolbar>
-    </IonHeader>
-
-    <IonContent fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonButtons collapse="true" slot="end">
-            <IonButton>Click Me</IonButton>
-          </IonButtons>
-          <IonTitle size="large">Settings</IonTitle>
-        </IonToolbar>
-        <IonToolbar>
-          <IonSearchbar></IonSearchbar>
-        </IonToolbar>
-      </IonHeader>
-
-      ...
-
-    </IonContent>
-  </>
-);
-```
-
-In this example, notice that we have added two sets of `IonButtons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
-
-`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
-
-> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
-
-### Styling Collapsible Large Titles
-
-The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `IonToolbar` that contains the collapsible large title should always match the background color of `IonContent`. 
-
-By default, the `IonToolbar` 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 `IonContent`.
-
-You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `IonToolbar`. 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
-ion-title.title-large {
-  color: purple;
-  font-size: 30px;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'title-example',
-  styleUrl: 'title-example.css'
-})
-export class TitleExample {
-  render() {
-    return [
-      // Default title
-      <ion-toolbar>
-        <ion-title>Default Title</ion-title>
-      </ion-toolbar>,
-
-      // Small title above a default title
-      <ion-toolbar>
-        <ion-title size="small">Small Title above a Default Title</ion-title>
-      </ion-toolbar>,
-      <ion-toolbar>
-        <ion-title>Default Title</ion-title>
-      </ion-toolbar>,
-
-      // Large title
-      <ion-toolbar>
-        <ion-title size="large">Large Title</ion-title>
-      </ion-toolbar>
-    ];
-  }
-}
-```
-
-
-### Collapsible Large Titles
-
-Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'title-example',
-  styleUrl: 'title-example.css'
-})
-export class TitleExample {
-  render() {
-    return [
-      <ion-header translucent={true}>
-        <ion-toolbar>
-          <ion-title>Settings</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-
-      <ion-content fullscreen={true}>
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">Settings</ion-title>
-          </ion-toolbar>
-          <ion-toolbar>
-            <ion-searchbar></ion-searchbar>
-          </ion-toolbar>
-        </ion-header>
-
-        ...
-
-      </ion-content>
-    ];
-  }
-}
-```
-
-In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'title-example',
-  styleUrl: 'title-example.css'
-})
-export class TitleExample {
-  render() {
-    return [
-      <ion-header translucent={true}>
-        <ion-toolbar>
-          <ion-buttons collapse={true} slot="end">
-            <ion-button>Click Me</ion-button>
-          </ion-buttons>
-          <ion-title>Settings</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-
-      <ion-content fullscreen={true}>
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-buttons collapse={true} slot="end">
-              <ion-button>Click Me</ion-button>
-            </ion-buttons>
-            <ion-title size="large">Settings</ion-title>
-          </ion-toolbar>
-          <ion-toolbar>
-            <ion-searchbar></ion-searchbar>
-          </ion-toolbar>
-        </ion-header>
-
-        ...
-
-      </ion-content>
-    ];
-  }
-}
-```
-
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
-
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
-
-When styling 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.
-
-> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
-
-### Styling Collapsible Large Titles
-
-The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. 
-
-By default, the `ion-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 `ion-content`.
-
-You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. 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.
+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.
 
-```css
-ion-title.title-large {
-  color: purple;
-  font-size: 30px;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default title -->
-  <ion-toolbar>
-    <ion-title>Default Title</ion-title>
-  </ion-toolbar>
-
-  <!-- Small title -->
-  <ion-toolbar>
-    <ion-title size="small">Small Title above a Default Title</ion-title>
-  </ion-toolbar>
-  <ion-toolbar>
-    <ion-title>Default Title</ion-title>
-  </ion-toolbar>
-
-  <!-- Large title -->
-  <ion-toolbar>
-    <ion-title size="large">Large Title</ion-title>
-  </ion-toolbar>
-</template>
-
-<script>
-import { IonTitle, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonTitle, IonToolbar }
-});
-</script>
-```
-
-### Collapsible Large Titles
-
-Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
-
-```html
-<template>
-  <ion-header :translucent="true">
-    <ion-toolbar>
-      <ion-title>Settings</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-content :fullscreen="true">
-    <ion-header collapse="condense">
-      <ion-toolbar>
-        <ion-title size="large">Settings</ion-title>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-searchbar></ion-searchbar>
-      </ion-toolbar>
-    </ion-header>
-
-    ...
-
-  </ion-content>
-</template>
-
-<script>
-import { 
-  IonContent, 
-  IonHeader, 
-  IonSearchbar, 
-  IonTitle, 
-  IonToolbar
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonContent, 
-    IonHeader, 
-    IonSearchbar, 
-    IonTitle, 
-    IonToolbar
-  }
-});
-</script>
-```
-
-In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
-
-```html
-<template>
-  <ion-header :translucent="true">
-    <ion-toolbar>
-      <ion-buttons :collapse="true" slot="end">
-        <ion-button>Click Me</ion-button>
-      </ion-buttons>
-      <ion-title>Settings</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-content :fullscreen="true">
-    <ion-header collapse="condense">
-      <ion-toolbar>
-        <ion-buttons :collapse="true" slot="end">
-          <ion-button>Click Me</ion-button>
-        </ion-buttons>
-        <ion-title size="large">Settings</ion-title>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-searchbar></ion-searchbar>
-      </ion-toolbar>
-    </ion-header>
-
-    ...
-
-  </ion-content>
-</template>
-
-<script>
-import { 
-  IonButton,
-  IonButtons,
-  IonContent, 
-  IonHeader, 
-  IonSearchbar, 
-  IonTitle, 
-  IonToolbar
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonButton,
-    IonButtons,
-    IonContent, 
-    IonHeader, 
-    IonSearchbar, 
-    IonTitle, 
-    IonToolbar
-  }
-});
-</script>
-```
-
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
-
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
-
-> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
-
-### Styling Collapsible Large Titles
-
-The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`. 
-
-By default, the `ion-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 `ion-content`.
-
-You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
+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
-ion-title.title-large {
-  color: purple;
-  font-size: 30px;
-}
-```
+### CSS Custom Properties
 
-</TabItem>
+import CSSCustomProperties from '@site/static/usage/title/theming/css-properties/index.md';
 
-</Tabs>
+<CSSCustomProperties />
 
 ## Properties
 <Props />
@@ -713,4 +81,4 @@ ion-title.title-large {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 5f2facf906e..db0833c73cb 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -130,13 +130,14 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
 }
 
 const openReactEditor = async (code: string, options?: EditorOptions) => {
-  let [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
+  let [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json, index_html] = await loadSourceFiles([
     'react/index.tsx',
     options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
     'react/variables.css',
     'react/tsconfig.json',
     'react/package.json',
-    'react/package-lock.json'
+    'react/package-lock.json',
+    'react/index.html'
   ]);
 
   app_tsx = app_tsx.replace('{{ MODE }}', options?.mode);
@@ -146,7 +147,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files: {
-      'public/index.html': `<div id="root"></div>`,
+      'public/index.html': index_html,
       'src/index.tsx': index_tsx,
       'src/App.tsx': app_tsx,
       'src/main.tsx': code,
diff --git a/static/code/stackblitz/react/index.html b/static/code/stackblitz/react/index.html
new file mode 100644
index 00000000000..9e7c016fc6a
--- /dev/null
+++ b/static/code/stackblitz/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/usage/title/basic/angular.md b/static/usage/title/basic/angular.md
new file mode 100644
index 00000000000..59a304dbeec
--- /dev/null
+++ b/static/usage/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/title/basic/demo.html b/static/usage/title/basic/demo.html
new file mode 100644
index 00000000000..ecb3ef9f701
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/title/basic/index.md b/static/usage/title/basic/index.md
new file mode 100644
index 00000000000..3f461bc6d54
--- /dev/null
+++ b/static/usage/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/title/basic/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/title/basic/javascript.md b/static/usage/title/basic/javascript.md
new file mode 100644
index 00000000000..59a304dbeec
--- /dev/null
+++ b/static/usage/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/title/basic/react.md b/static/usage/title/basic/react.md
new file mode 100644
index 00000000000..efef42efdcc
--- /dev/null
+++ b/static/usage/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/title/basic/vue.md b/static/usage/title/basic/vue.md
new file mode 100644
index 00000000000..99a7ee20224
--- /dev/null
+++ b/static/usage/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/title/collapsible-large-title/basic/angular.md b/static/usage/title/collapsible-large-title/basic/angular.md
new file mode 100644
index 00000000000..727d9ba1e3a
--- /dev/null
+++ b/static/usage/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/title/collapsible-large-title/basic/demo.html b/static/usage/title/collapsible-large-title/basic/demo.html
new file mode 100644
index 00000000000..4b3927b3178
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/title/collapsible-large-title/basic/index.md b/static/usage/title/collapsible-large-title/basic/index.md
new file mode 100644
index 00000000000..f66458ae83d
--- /dev/null
+++ b/static/usage/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/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/title/collapsible-large-title/basic/javascript.md
new file mode 100644
index 00000000000..77e7de55212
--- /dev/null
+++ b/static/usage/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/title/collapsible-large-title/basic/react.md b/static/usage/title/collapsible-large-title/basic/react.md
new file mode 100644
index 00000000000..cdcbdc557b6
--- /dev/null
+++ b/static/usage/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/title/collapsible-large-title/basic/vue.md b/static/usage/title/collapsible-large-title/basic/vue.md
new file mode 100644
index 00000000000..de922b98bca
--- /dev/null
+++ b/static/usage/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/title/collapsible-large-title/buttons/angular.md b/static/usage/title/collapsible-large-title/buttons/angular.md
new file mode 100644
index 00000000000..7e32a6e7b9b
--- /dev/null
+++ b/static/usage/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>Click Me</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>Click Me</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/title/collapsible-large-title/buttons/demo.html b/static/usage/title/collapsible-large-title/buttons/demo.html
new file mode 100644
index 00000000000..1d78a589661
--- /dev/null
+++ b/static/usage/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>Click Me</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>Click Me</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
new file mode 100644
index 00000000000..829086a7cde
--- /dev/null
+++ b/static/usage/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/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/title/collapsible-large-title/buttons/javascript.md
new file mode 100644
index 00000000000..a274b86da36
--- /dev/null
+++ b/static/usage/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>Click Me</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>Click Me</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/title/collapsible-large-title/buttons/react.md b/static/usage/title/collapsible-large-title/buttons/react.md
new file mode 100644
index 00000000000..afe673129a2
--- /dev/null
+++ b/static/usage/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>Click Me</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true}>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Title</IonTitle>
+            <IonButtons collapse={true} slot="end">
+              <IonButton>Click Me</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/title/collapsible-large-title/buttons/vue.md b/static/usage/title/collapsible-large-title/buttons/vue.md
new file mode 100644
index 00000000000..857a64e2d6c
--- /dev/null
+++ b/static/usage/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>Click Me</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>Click Me</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/title/theming/css-properties/angular/example_component_html.md b/static/usage/title/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31c40bb2ef7
--- /dev/null
+++ b/static/usage/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/title/theming/css-properties/angular/global_css.md b/static/usage/title/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/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/title/theming/css-properties/demo.html b/static/usage/title/theming/css-properties/demo.html
new file mode 100644
index 00000000000..71e248bef63
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/title/theming/css-properties/index.md b/static/usage/title/theming/css-properties/index.md
new file mode 100644
index 00000000000..407126d856f
--- /dev/null
+++ b/static/usage/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/title/theming/css-properties/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/title/theming/css-properties/javascript.md b/static/usage/title/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..443ca1bf39d
--- /dev/null
+++ b/static/usage/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/title/theming/css-properties/react/main_css.md b/static/usage/title/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/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/title/theming/css-properties/react/main_tsx.md b/static/usage/title/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..5dc5b9d993b
--- /dev/null
+++ b/static/usage/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/title/theming/css-properties/vue.md b/static/usage/title/theming/css-properties/vue.md
new file mode 100644
index 00000000000..dc85c93d3ab
--- /dev/null
+++ b/static/usage/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>
+```

From d08fb9d79c4008c23b3d5a7bf1ce2c48867411b8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 26 Oct 2022 12:08:59 -0400
Subject: [PATCH 117/469] fix(playground): use visibility hidden to hide iframe
 for proper content sizing (#2623)

When using `display: none` on the iframe, an Ionic content component using `fullscreen` will not properly resize on app load. Setting the iframe `visibility: hidden` allows the content to resize properly.
---
 src/components/global/Playground/playground.css | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css
index 27fd4ed1b97..bfb31018c25 100644
--- a/src/components/global/Playground/playground.css
+++ b/src/components/global/Playground/playground.css
@@ -204,11 +204,8 @@
 }
 
 .playground .frame-hidden {
-  display: none;
-}
-
-.playground .frame-visible {
-  width: 100%;
+  visibility: hidden;
+  width: 0%;
 }
 
 /** Tabs **/

From 2223ccb98b80d9e6a8b73829fd827f82f38db0a1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 26 Oct 2022 12:17:41 -0400
Subject: [PATCH 118/469] docs(reorder): add component playgrounds (#2620)

---
 docs/api/reorder-group.md                     | 710 +-----------------
 docs/api/reorder.md                           | 503 ++-----------
 .../basic/angular/example_component_html.md   |  42 ++
 .../basic/angular/example_component_ts.md     |  22 +
 static/usage/reorder/basic/demo.html          |  83 ++
 static/usage/reorder/basic/index.md           |  24 +
 static/usage/reorder/basic/javascript.md      |  56 ++
 static/usage/reorder/basic/react.md           |  60 ++
 static/usage/reorder/basic/vue.md             |  66 ++
 .../angular/example_component_html.md         |  52 ++
 .../angular/example_component_ts.md           |  22 +
 static/usage/reorder/custom-icon/demo.html    |  93 +++
 static/usage/reorder/custom-icon/index.md     |  24 +
 .../usage/reorder/custom-icon/javascript.md   |  66 ++
 static/usage/reorder/custom-icon/react.md     |  71 ++
 static/usage/reorder/custom-icon/vue.md       |  76 ++
 .../angular/example_component_css.md          |  11 +
 .../angular/example_component_html.md         |  46 ++
 .../angular/example_component_ts.md           |  23 +
 .../reorder/custom-scroll-target/demo.html    |  95 +++
 .../reorder/custom-scroll-target/index.md     |  35 +
 .../custom-scroll-target/javascript.md        |  72 ++
 .../custom-scroll-target/react/main_css.md    |  11 +
 .../custom-scroll-target/react/main_tsx.md    |  66 ++
 .../usage/reorder/custom-scroll-target/vue.md |  82 ++
 .../angular/example_component_html.md         |  46 ++
 .../angular/example_component_ts.md           |  28 +
 .../usage/reorder/toggling-disabled/demo.html |  96 +++
 .../usage/reorder/toggling-disabled/index.md  |  24 +
 .../reorder/toggling-disabled/javascript.md   |  64 ++
 .../usage/reorder/toggling-disabled/react.md  |  72 ++
 static/usage/reorder/toggling-disabled/vue.md |  76 ++
 .../angular/example_component_html.md         |  14 +
 .../angular/example_component_ts.md           |  27 +
 static/usage/reorder/updating-data/demo.html  |  76 ++
 static/usage/reorder/updating-data/index.md   |  24 +
 .../usage/reorder/updating-data/javascript.md |  49 ++
 static/usage/reorder/updating-data/react.md   |  39 +
 static/usage/reorder/updating-data/vue.md     |  42 ++
 .../wrapper/angular/example_component_html.md |  47 ++
 .../wrapper/angular/example_component_ts.md   |  22 +
 static/usage/reorder/wrapper/demo.html        |  88 +++
 static/usage/reorder/wrapper/index.md         |  24 +
 static/usage/reorder/wrapper/javascript.md    |  61 ++
 static/usage/reorder/wrapper/react.md         |  65 ++
 static/usage/reorder/wrapper/vue.md           |  71 ++
 46 files changed, 2317 insertions(+), 1149 deletions(-)
 create mode 100644 static/usage/reorder/basic/angular/example_component_html.md
 create mode 100644 static/usage/reorder/basic/angular/example_component_ts.md
 create mode 100644 static/usage/reorder/basic/demo.html
 create mode 100644 static/usage/reorder/basic/index.md
 create mode 100644 static/usage/reorder/basic/javascript.md
 create mode 100644 static/usage/reorder/basic/react.md
 create mode 100644 static/usage/reorder/basic/vue.md
 create mode 100644 static/usage/reorder/custom-icon/angular/example_component_html.md
 create mode 100644 static/usage/reorder/custom-icon/angular/example_component_ts.md
 create mode 100644 static/usage/reorder/custom-icon/demo.html
 create mode 100644 static/usage/reorder/custom-icon/index.md
 create mode 100644 static/usage/reorder/custom-icon/javascript.md
 create mode 100644 static/usage/reorder/custom-icon/react.md
 create mode 100644 static/usage/reorder/custom-icon/vue.md
 create mode 100644 static/usage/reorder/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/reorder/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/reorder/custom-scroll-target/angular/example_component_ts.md
 create mode 100644 static/usage/reorder/custom-scroll-target/demo.html
 create mode 100644 static/usage/reorder/custom-scroll-target/index.md
 create mode 100644 static/usage/reorder/custom-scroll-target/javascript.md
 create mode 100644 static/usage/reorder/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/reorder/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/reorder/custom-scroll-target/vue.md
 create mode 100644 static/usage/reorder/toggling-disabled/angular/example_component_html.md
 create mode 100644 static/usage/reorder/toggling-disabled/angular/example_component_ts.md
 create mode 100644 static/usage/reorder/toggling-disabled/demo.html
 create mode 100644 static/usage/reorder/toggling-disabled/index.md
 create mode 100644 static/usage/reorder/toggling-disabled/javascript.md
 create mode 100644 static/usage/reorder/toggling-disabled/react.md
 create mode 100644 static/usage/reorder/toggling-disabled/vue.md
 create mode 100644 static/usage/reorder/updating-data/angular/example_component_html.md
 create mode 100644 static/usage/reorder/updating-data/angular/example_component_ts.md
 create mode 100644 static/usage/reorder/updating-data/demo.html
 create mode 100644 static/usage/reorder/updating-data/index.md
 create mode 100644 static/usage/reorder/updating-data/javascript.md
 create mode 100644 static/usage/reorder/updating-data/react.md
 create mode 100644 static/usage/reorder/updating-data/vue.md
 create mode 100644 static/usage/reorder/wrapper/angular/example_component_html.md
 create mode 100644 static/usage/reorder/wrapper/angular/example_component_ts.md
 create mode 100644 static/usage/reorder/wrapper/demo.html
 create mode 100644 static/usage/reorder/wrapper/index.md
 create mode 100644 static/usage/reorder/wrapper/javascript.md
 create mode 100644 static/usage/reorder/wrapper/react.md
 create mode 100644 static/usage/reorder/wrapper/vue.md

diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index ae4d0475e64..674bc2561b9 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-reorder-group"
-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/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';
@@ -21,55 +16,10 @@ import Slots from '@site/static/auto-generated/reorder-group/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.md) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.
-
-Once the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it 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.
-
-## Completing a Reorder
-
-When the `ionItemReorder` event is dispatched, developers have the option to call the `complete()` method on `ion-reorder-group`. This will complete the reorder operation.
-
-By default, the `complete()` method will re-order the DOM nodes inside of `ion-reorder-group`.
+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.
 
-For developers who need to sort an array based on the order of the items in `ion-reorder-group`, we recommend passing the array as a parameter in `complete()`. Ionic will sort and return the array so that it can be reassigned.
+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.
 
-In some cases, it may be necessary for an app to re-order both the array and the DOM nodes on its own. When this happens, it is recommended to pass `false` to the `complete()` method. This will prevent Ionic from re-ordering any DOM nodes inside of `ion-reorder-group`.
-
-## Usage with Virtual Scroll
-
-The reorder group 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">
-    <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-reorder-group>
-  </virtual-scroll-element>
-</ion-content>
-```
 
 ## Interfaces
 
@@ -95,660 +45,6 @@ interface ItemReorderCustomEvent extends CustomEvent {
 ```
 
 
-
-## 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
-<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-<ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
-  <!-- Default reorder icon, end aligned items -->
-  <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>
-
-  <!-- Default reorder icon, start aligned items -->
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 3
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 4
-    </ion-label>
-  </ion-item>
-
-  <!-- Custom reorder icon end items -->
-  <ion-item>
-    <ion-label>
-      Item 5
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Item 6
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <!-- Items wrapped in a reorder, entire item can be dragged -->
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 7
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 8
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-</ion-reorder-group>
-```
-
-```javascript
-import { Component, ViewChild } from '@angular/core';
-import { IonReorderGroup } from '@ionic/angular';
-import { ItemReorderEventDetail } from '@ionic/core';
-
-@Component({
-  selector: 'reorder-group-example',
-  templateUrl: 'reorder-group-example.html',
-  styleUrls: ['./reorder-group-example.css']
-})
-export class ReorderGroupExample {
-  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
-
-  constructor() {}
-
-  doReorder(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();
-  }
-
-  toggleReorderGroup() {
-    this.reorderGroup.disabled = !this.reorderGroup.disabled;
-  }
-}
-```
-
-### Updating Data
-
-```javascript
-import { Component, ViewChild } from '@angular/core';
-import { IonReorderGroup } from '@ionic/angular';
-import { ItemReorderEventDetail } from '@ionic/core';
-
-@Component({
-  selector: 'reorder-group-example',
-  templateUrl: 'reorder-group-example.html',
-  styleUrls: ['./reorder-group-example.css']
-})
-export class ReorderGroupExample {
-  items = [1, 2, 3, 4, 5];
-
-  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
-
-  constructor() {}
-
-  doReorder(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);
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-<ion-reorder-group disabled="false">
-  <!-- Default reorder icon, end aligned items -->
-  <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>
-
-  <!-- Default reorder icon, start aligned items -->
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 3
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 4
-    </ion-label>
-  </ion-item>
-
-  <!-- Custom reorder icon end items -->
-  <ion-item>
-    <ion-label>
-      Item 5
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Item 6
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <!-- Items wrapped in a reorder, entire item can be dragged -->
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 7
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 8
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-</ion-reorder-group>
-```
-
-```javascript
-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();
-});
-```
-
-### Updating Data
-
-```javascript
-const items = [1, 2, 3, 4, 5];
-const reorderGroup = document.querySelector('ion-reorder-group');
-
-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);
-
-  // After complete is called the items will be in the new order
-  console.log('After complete', items);
-});
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon, IonContent } from '@ionic/react';
-import { ItemReorderEventDetail } from '@ionic/core';
-import { pizza } from 'ionicons/icons';
-
-function doReorder(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();
-}
-
-export const ReorderGroupExample: React.FC = () => (
-  <IonContent>
-    {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
-    <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>
-      {/*-- Default reorder icon, end aligned items --*/}
-      <IonItem>
-        <IonLabel>Item 1</IonLabel>
-        <IonReorder slot="end" />
-      </IonItem>
-
-      <IonItem>
-        <IonLabel>Item 2</IonLabel>
-        <IonReorder slot="end" />
-      </IonItem>
-
-      {/*-- Default reorder icon, start aligned items --*/}
-      <IonItem>
-        <IonReorder slot="start" />
-        <IonLabel>Item 3</IonLabel>
-      </IonItem>
-
-      <IonItem>
-        <IonReorder slot="start" />
-        <IonLabel>Item 4</IonLabel>
-      </IonItem>
-
-      {/*-- Custom reorder icon end items --*/}
-      <IonItem>
-        <IonLabel>Item 5</IonLabel>
-        <IonReorder slot="end">
-          <IonIcon icon={pizza} />
-        </IonReorder>
-      </IonItem>
-
-      <IonItem>
-        <IonLabel>Item 6</IonLabel>
-        <IonReorder slot="end">
-          <IonIcon icon={pizza} />
-        </IonReorder>
-      </IonItem>
-
-      {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
-      <IonReorder>
-        <IonItem>
-          <IonLabel>Item 7</IonLabel>
-        </IonItem>
-      </IonReorder>
-
-      <IonReorder>
-        <IonItem>
-          <IonLabel>Item 8</IonLabel>
-        </IonItem>
-      </IonReorder>
-    </IonReorderGroup>
-  </IonContent>
-);
-```
-
-### Updating Data
-
-```tsx
-const items = [1, 2, 3, 4, 5];
-
-function doReorder(event: CustomEvent) {
-  // 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 = event.detail.complete(this.items);
-
-  // After complete is called the items will be in the new order
-  console.log('After complete', this.items);
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'reorder-group-example',
-  styleUrl: 'reorder-group-example.css'
-})
-export class ReorderGroupExample {
-  doReorder(ev: any) {
-    // 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();
-  }
-
-  render() {
-    return [
-      // The reorder gesture is disabled by default, enable it to drag and drop items
-      <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>
-        {/* Default reorder icon, end aligned items */}
-        <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>
-
-        {/* Default reorder icon, start aligned items */}
-        <ion-item>
-          <ion-reorder slot="start"></ion-reorder>
-          <ion-label>
-            Item 3
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-reorder slot="start"></ion-reorder>
-          <ion-label>
-            Item 4
-          </ion-label>
-        </ion-item>
-
-        {/* Custom reorder icon end items */}
-        <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
-          <ion-reorder slot="end">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            Item 6
-          </ion-label>
-          <ion-reorder slot="end">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
-
-        {/* Items wrapped in a reorder, entire item can be dragged */}
-        <ion-reorder>
-          <ion-item>
-            <ion-label>
-              Item 7
-            </ion-label>
-          </ion-item>
-        </ion-reorder>
-
-        <ion-reorder>
-          <ion-item>
-            <ion-label>
-              Item 8
-            </ion-label>
-          </ion-item>
-        </ion-reorder>
-      </ion-reorder-group>
-    ]
-  }
-}
-```
-
-### Updating Data
-
-```tsx
-import { Component, State, h } from '@stencil/core';
-
-@Component({
-  tag: 'reorder-group-example',
-  styleUrl: 'reorder-group-example.css'
-})
-export class ReorderGroupExample {
-  @State() items = [1, 2, 3, 4, 5];
-
-  doReorder(ev: any) {
-    // 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);
-  }
-
-  render() {
-    return [
-      // The reorder gesture is disabled by default, enable it to drag and drop items
-      <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>
-
-        {this.items.map(item =>
-          <ion-item>
-            <ion-label>
-              Item { item }
-            </ion-label>
-            <ion-reorder slot="end"></ion-reorder>
-          </ion-item>
-        )}
-
-      </ion-reorder-group>
-    ]
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-  <ion-reorder-group @ionItemReorder="doReorder($event)" disabled="false">
-    <!-- Default reorder icon, end aligned items -->
-    <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>
-
-    <!-- Default reorder icon, start aligned items -->
-    <ion-item>
-      <ion-reorder slot="start"></ion-reorder>
-      <ion-label>
-        Item 3
-      </ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-reorder slot="start"></ion-reorder>
-      <ion-label>
-        Item 4
-      </ion-label>
-    </ion-item>
-
-    <!-- Custom reorder icon end items -->
-    <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>
-        Item 6
-      </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <!-- Items wrapped in a reorder, entire item can be dragged -->
-    <ion-reorder>
-      <ion-item>
-        <ion-label>
-          Item 7
-        </ion-label>
-      </ion-item>
-    </ion-reorder>
-
-    <ion-reorder>
-      <ion-item>
-        <ion-label>
-          Item 8
-        </ion-label>
-      </ion-item>
-    </ion-reorder>
-  </ion-reorder-group>
-</template>
-
-<script>
-import { 
-  IonIcon, 
-  IonItem, 
-  IonLabel, 
-  IonReorder, 
-  IonReorderGroup
-} from '@ionic/vue';
-import { pizza } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { 
-    IonIcon, 
-    IonItem, 
-    IonLabel, 
-    IonReorder, 
-    IonReorderGroup
-  },
-  setup() {
-    const doReorder = (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 { doReorder, pizza }
-  }
-});
-</script>
-```
-
-### Updating Data
-
-```html
-<script>
-...
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  ...
-  setup() {
-    const items = ref([1, 2, 3, 4, 5]);
-
-    const doReorder = (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 { doReorder, items, ... }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
@@ -765,4 +61,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index b068945c2ff..59c5b97d1ea 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-reorder"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/reorder/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/reorder/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,441 +17,67 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
-
-`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](reorder-group.md) for more information on how to complete the reorder operation.
-
-
-
-
-## 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
-<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-<ion-reorder-group disabled="false">
-  <!-- Default reorder icon, end aligned items -->
-  <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>
-
-  <!-- Default reorder icon, start aligned items -->
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 3
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 4
-    </ion-label>
-  </ion-item>
-
-  <!-- Custom reorder icon end items -->
-  <ion-item>
-    <ion-label>
-      Item 5
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Item 6
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <!-- Items wrapped in a reorder, entire item can be dragged -->
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 7
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 8
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-</ion-reorder-group>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-
-```html
-<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-<ion-reorder-group disabled="false">
-  <!-- Default reorder icon, end aligned items -->
-  <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>
-
-  <!-- Default reorder icon, start aligned items -->
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 3
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 4
-    </ion-label>
-  </ion-item>
-
-  <!-- Custom reorder icon end items -->
-  <ion-item>
-    <ion-label>
-      Item 5
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Item 6
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <!-- Items wrapped in a reorder, entire item can be dragged -->
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 7
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-
-  <ion-reorder>
-    <ion-item>
-      <ion-label>
-        Item 8
-      </ion-label>
-    </ion-item>
-  </ion-reorder>
-</ion-reorder-group>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';
-import { pizza } from 'ionicons/icons';
-
-export const ReorderExample: React.FC = () => (
-  <IonContent>
-    {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
-    <IonReorderGroup disabled={false}>
-      {/*-- Default reorder icon, end aligned items --*/}
-      <IonItem>
-        <IonLabel>Item 1</IonLabel>
-        <IonReorder slot="end" />
-      </IonItem>
-
-      <IonItem>
-        <IonLabel>Item 2</IonLabel>
-        <IonReorder slot="end" />
-      </IonItem>
-
-      {/*-- Default reorder icon, start aligned items --*/}
-      <IonItem>
-        <IonReorder slot="start" />
-        <IonLabel>Item 3</IonLabel>
-      </IonItem>
-
-      <IonItem>
-        <IonReorder slot="start" />
-        <IonLabel>Item 4</IonLabel>
-      </IonItem>
-
-      {/*-- Custom reorder icon end items --*/}
-      <IonItem>
-        <IonLabel>Item 5</IonLabel>
-        <IonReorder slot="end">
-          <IonIcon icon={pizza} />
-        </IonReorder>
-      </IonItem>
-
-      <IonItem>
-        <IonLabel>Item 6</IonLabel>
-        <IonReorder slot="end">
-          <IonIcon icon={pizza} />
-        </IonReorder>
-      </IonItem>
-
-      {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
-      <IonReorder>
-        <IonItem>
-          <IonLabel>Item 7</IonLabel>
-        </IonItem>
-      </IonReorder>
-
-      <IonReorder>
-        <IonItem>
-          <IonLabel>Item 8</IonLabel>
-        </IonItem>
-      </IonReorder>
-    </IonReorderGroup>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'reorder-example',
-  styleUrl: 'reorder-example.css'
-})
-export class ReorderExample {
-  render() {
-    return [
-      // The reorder gesture is disabled by default, enable it to drag and drop items
-      <ion-reorder-group disabled={false}>
-        {/* Default reorder icon, end aligned items */}
-        <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>
-
-        {/* Default reorder icon, start aligned items */}
-        <ion-item>
-          <ion-reorder slot="start"></ion-reorder>
-          <ion-label>
-            Item 3
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-reorder slot="start"></ion-reorder>
-          <ion-label>
-            Item 4
-          </ion-label>
-        </ion-item>
-
-        {/* Custom reorder icon end items */}
-        <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
-          <ion-reorder slot="end">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>
-            Item 6
-          </ion-label>
-          <ion-reorder slot="end">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
-
-        {/* Items wrapped in a reorder, entire item can be dragged */}
-        <ion-reorder>
-          <ion-item>
-            <ion-label>
-              Item 7
-            </ion-label>
-          </ion-item>
-        </ion-reorder>
-
-        <ion-reorder>
-          <ion-item>
-            <ion-label>
-              Item 8
-            </ion-label>
-          </ion-item>
-        </ion-reorder>
-      </ion-reorder-group>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-  <ion-reorder-group :disabled="false">
-    <!-- Default reorder icon, end aligned items -->
-    <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>
-
-    <!-- Default reorder icon, start aligned items -->
-    <ion-item>
-      <ion-reorder slot="start"></ion-reorder>
-      <ion-label>
-        Item 3
-      </ion-label>
-    </ion-item>
-
-    <ion-item>
-      <ion-reorder slot="start"></ion-reorder>
-      <ion-label>
-        Item 4
-      </ion-label>
-    </ion-item>
-
-    <!-- Custom reorder icon end items -->
-    <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>
-        Item 6
-      </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <!-- Items wrapped in a reorder, entire item can be dragged -->
-    <ion-reorder>
-      <ion-item>
-        <ion-label>
-          Item 7
-        </ion-label>
-      </ion-item>
-    </ion-reorder>
-
-    <ion-reorder>
-      <ion-item>
-        <ion-label>
-          Item 8
-        </ion-label>
-      </ion-item>
-    </ion-reorder>
-  </ion-reorder-group>
-</template>
-
-<script>
-import { 
-  IonIcon, 
-  IonItem,
-  IonLabel, 
-  IonReorder, 
-  IonReorderGroup
-} from '@ionic/vue';
-import { pizza } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonIcon,
-    IonItem, 
-    IonLabel, 
-    IonReorder, 
-    IonReorderGroup
-  },
-  setup() {
-    return { pizza }
-  }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
+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/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/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/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/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/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/reorder/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
 
 ## Properties
 <Props />
@@ -476,4 +95,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/reorder/basic/angular/example_component_html.md b/static/usage/reorder/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..0a02fe2563d
--- /dev/null
+++ b/static/usage/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/reorder/basic/angular/example_component_ts.md b/static/usage/reorder/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/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/reorder/basic/demo.html b/static/usage/reorder/basic/demo.html
new file mode 100644
index 00000000000..96900a58f78
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/reorder/basic/index.md b/static/usage/reorder/basic/index.md
new file mode 100644
index 00000000000..2ff54946315
--- /dev/null
+++ b/static/usage/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/reorder/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/basic/javascript.md b/static/usage/reorder/basic/javascript.md
new file mode 100644
index 00000000000..0d7a09f9818
--- /dev/null
+++ b/static/usage/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/reorder/basic/react.md b/static/usage/reorder/basic/react.md
new file mode 100644
index 00000000000..179ee82a782
--- /dev/null
+++ b/static/usage/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/reorder/basic/vue.md b/static/usage/reorder/basic/vue.md
new file mode 100644
index 00000000000..5a861e1dc26
--- /dev/null
+++ b/static/usage/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/reorder/custom-icon/angular/example_component_html.md b/static/usage/reorder/custom-icon/angular/example_component_html.md
new file mode 100644
index 00000000000..12473b3a04a
--- /dev/null
+++ b/static/usage/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/reorder/custom-icon/angular/example_component_ts.md b/static/usage/reorder/custom-icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/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/reorder/custom-icon/demo.html b/static/usage/reorder/custom-icon/demo.html
new file mode 100644
index 00000000000..4caa7e2facb
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/reorder/custom-icon/index.md b/static/usage/reorder/custom-icon/index.md
new file mode 100644
index 00000000000..d49c2a1da46
--- /dev/null
+++ b/static/usage/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/reorder/custom-icon/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/custom-icon/javascript.md b/static/usage/reorder/custom-icon/javascript.md
new file mode 100644
index 00000000000..6e75b74343f
--- /dev/null
+++ b/static/usage/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/reorder/custom-icon/react.md b/static/usage/reorder/custom-icon/react.md
new file mode 100644
index 00000000000..845a3a6decc
--- /dev/null
+++ b/static/usage/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/reorder/custom-icon/vue.md b/static/usage/reorder/custom-icon/vue.md
new file mode 100644
index 00000000000..17416c67e85
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/reorder/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/reorder/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..bd08063770b
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/reorder/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..2cd3dd66740
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/demo.html b/static/usage/reorder/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..893f2d125c1
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/reorder/custom-scroll-target/index.md b/static/usage/reorder/custom-scroll-target/index.md
new file mode 100644
index 00000000000..0534ec14b89
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/demo.html"
+  size="300px"
+  includeIonContent={false}
+/>
diff --git a/static/usage/reorder/custom-scroll-target/javascript.md b/static/usage/reorder/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..ec5f61d6476
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/react/main_css.md b/static/usage/reorder/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/reorder/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..cd7fd8f84b0
--- /dev/null
+++ b/static/usage/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/reorder/custom-scroll-target/vue.md b/static/usage/reorder/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..808ed347020
--- /dev/null
+++ b/static/usage/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/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/reorder/toggling-disabled/angular/example_component_html.md
new file mode 100644
index 00000000000..76af0bff12e
--- /dev/null
+++ b/static/usage/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/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/reorder/toggling-disabled/angular/example_component_ts.md
new file mode 100644
index 00000000000..ded54467eba
--- /dev/null
+++ b/static/usage/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/reorder/toggling-disabled/demo.html b/static/usage/reorder/toggling-disabled/demo.html
new file mode 100644
index 00000000000..8dc14d52769
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/reorder/toggling-disabled/index.md b/static/usage/reorder/toggling-disabled/index.md
new file mode 100644
index 00000000000..9f3f3b30ef6
--- /dev/null
+++ b/static/usage/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/reorder/toggling-disabled/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/reorder/toggling-disabled/javascript.md b/static/usage/reorder/toggling-disabled/javascript.md
new file mode 100644
index 00000000000..68319ec0221
--- /dev/null
+++ b/static/usage/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/reorder/toggling-disabled/react.md b/static/usage/reorder/toggling-disabled/react.md
new file mode 100644
index 00000000000..e86e1e7516f
--- /dev/null
+++ b/static/usage/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/reorder/toggling-disabled/vue.md b/static/usage/reorder/toggling-disabled/vue.md
new file mode 100644
index 00000000000..4711f6dc74b
--- /dev/null
+++ b/static/usage/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/reorder/updating-data/angular/example_component_html.md b/static/usage/reorder/updating-data/angular/example_component_html.md
new file mode 100644
index 00000000000..4339191e634
--- /dev/null
+++ b/static/usage/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/reorder/updating-data/angular/example_component_ts.md b/static/usage/reorder/updating-data/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1132926bb4
--- /dev/null
+++ b/static/usage/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/reorder/updating-data/demo.html b/static/usage/reorder/updating-data/demo.html
new file mode 100644
index 00000000000..7987a519736
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/reorder/updating-data/index.md b/static/usage/reorder/updating-data/index.md
new file mode 100644
index 00000000000..8ed718679c0
--- /dev/null
+++ b/static/usage/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/reorder/updating-data/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/updating-data/javascript.md b/static/usage/reorder/updating-data/javascript.md
new file mode 100644
index 00000000000..603f9802241
--- /dev/null
+++ b/static/usage/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/reorder/updating-data/react.md b/static/usage/reorder/updating-data/react.md
new file mode 100644
index 00000000000..25e58caaf0f
--- /dev/null
+++ b/static/usage/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/reorder/updating-data/vue.md b/static/usage/reorder/updating-data/vue.md
new file mode 100644
index 00000000000..024fa130469
--- /dev/null
+++ b/static/usage/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/reorder/wrapper/angular/example_component_html.md b/static/usage/reorder/wrapper/angular/example_component_html.md
new file mode 100644
index 00000000000..acc62e86b49
--- /dev/null
+++ b/static/usage/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/reorder/wrapper/angular/example_component_ts.md b/static/usage/reorder/wrapper/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/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/reorder/wrapper/demo.html b/static/usage/reorder/wrapper/demo.html
new file mode 100644
index 00000000000..2b8f0116fc3
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/reorder/wrapper/index.md b/static/usage/reorder/wrapper/index.md
new file mode 100644
index 00000000000..ab8b535ce99
--- /dev/null
+++ b/static/usage/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/reorder/wrapper/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/reorder/wrapper/javascript.md b/static/usage/reorder/wrapper/javascript.md
new file mode 100644
index 00000000000..38d112c30fb
--- /dev/null
+++ b/static/usage/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/reorder/wrapper/react.md b/static/usage/reorder/wrapper/react.md
new file mode 100644
index 00000000000..8abaf724dfa
--- /dev/null
+++ b/static/usage/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/reorder/wrapper/vue.md b/static/usage/reorder/wrapper/vue.md
new file mode 100644
index 00000000000..d0c732c7d39
--- /dev/null
+++ b/static/usage/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>
+```

From edc0686035ab790a102417a11dce2d295279e99a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 27 Oct 2022 10:23:29 -0500
Subject: [PATCH 119/469] docs(img): add playground (#2624)

---
 docs/api/img.md                      | 152 +--------------------------
 static/usage/img/basic/angular.md    |   3 +
 static/usage/img/basic/demo.html     |  30 ++++++
 static/usage/img/basic/index.md      |   8 ++
 static/usage/img/basic/javascript.md |   3 +
 static/usage/img/basic/react.md      |  11 ++
 static/usage/img/basic/vue.md        |  14 +++
 7 files changed, 73 insertions(+), 148 deletions(-)
 create mode 100644 static/usage/img/basic/angular.md
 create mode 100644 static/usage/img/basic/demo.html
 create mode 100644 static/usage/img/basic/index.md
 create mode 100644 static/usage/img/basic/javascript.md
 create mode 100644 static/usage/img/basic/react.md
 create mode 100644 static/usage/img/basic/vue.md

diff --git a/docs/api/img.md b/docs/api/img.md
index 3b0b3e4a30d..091331da9d6 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -1,10 +1,6 @@
 ---
 title: "ion-img"
-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/img/props.md';
 import Events from '@site/static/auto-generated/img/events.md';
@@ -22,154 +18,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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/img/basic/index.md';
 
-Img is a tag that will lazily load an image when ever 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 browser, but falls back to a `setTimeout` when it is not supported.
-
-
-
-
-## Usage
-
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
-
-<TabItem value="angular">
-
-```html
-<ion-list>
-  <ion-item *ngFor="let item of items">
-    <ion-thumbnail slot="start">
-      <ion-img [src]="item.src"></ion-img>
-    </ion-thumbnail>
-    <ion-label>{{item.text}}</ion-label>
-  </ion-item>
-</ion-list>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonList, IonItem, IonThumbnail, IonImg, IonLabel, IonContent } from '@ionic/react';
-
-type Item = {
-  src: string;
-  text: string;
-};
-const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
-
-export const ImgExample: React.FC = () => (
-  <IonContent>
-    <IonList>
-      {items.map((image, i) => (
-        <IonItem key={i}>
-          <IonThumbnail slot="start">
-            <IonImg src={image.src} />
-          </IonThumbnail>
-          <IonLabel>{image.text}</IonLabel>
-        </IonItem>
-      ))}
-    </IonList>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'img-example',
-  styleUrl: 'img-example.css'
-})
-export class ImgExample {
-  private items = [{
-    'text': 'Item 1',
-    'src': '/path/to/external/file.png'
-  }, {
-    'text': 'Item 2',
-    'src': '/path/to/external/file.png'
-  }, {
-    'text': 'Item 3',
-    'src': '/path/to/external/file.png'
-  }];
-
-  render() {
-    return [
-      <ion-list>
-        {this.items.map(item =>
-          <ion-item>
-            <ion-thumbnail slot="start">
-              <ion-img src={item.src}></ion-img>
-            </ion-thumbnail>
-            <ion-label>{item.text}</ion-label>
-          </ion-item>
-        )}
-      </ion-list>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-list>
-    <ion-item v-for="item in items" :key="item.src">
-      <ion-thumbnail slot="start">
-        <ion-img :src="item.src"></ion-img>
-      </ion-thumbnail>
-      <ion-label>{{item.text}}</ion-label>
-    </ion-item>
-  </ion-list>
-</template>
-
-<script>
-import { IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonImg, IonItem, IonLabel, IonList, IonThumbnail },
-  setup() {
-    const items = [{
-      'text': 'Item 1',
-      'src': '/path/to/external/file.png'
-    }, {
-      'text': 'Item 2',
-      'src': '/path/to/external/file.png'
-    }, {
-      'text': 'Item 3',
-      'src': '/path/to/external/file.png'
-    }];
-    return { items }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
+<Basic />
 
 ## Properties
 <Props />
diff --git a/static/usage/img/basic/angular.md b/static/usage/img/basic/angular.md
new file mode 100644
index 00000000000..ce4d3d19e0d
--- /dev/null
+++ b/static/usage/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/img/basic/demo.html b/static/usage/img/basic/demo.html
new file mode 100644
index 00000000000..b34c53899cb
--- /dev/null
+++ b/static/usage/img/basic/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>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
new file mode 100644
index 00000000000..91b78134171
--- /dev/null
+++ b/static/usage/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/img/basic/demo.html" />
diff --git a/static/usage/img/basic/javascript.md b/static/usage/img/basic/javascript.md
new file mode 100644
index 00000000000..ce4d3d19e0d
--- /dev/null
+++ b/static/usage/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/img/basic/react.md b/static/usage/img/basic/react.md
new file mode 100644
index 00000000000..04c4c086b15
--- /dev/null
+++ b/static/usage/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/img/basic/vue.md b/static/usage/img/basic/vue.md
new file mode 100644
index 00000000000..d8cb2cd2d7f
--- /dev/null
+++ b/static/usage/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>
+```

From 11aeb709834964633d71025bb324b1ba4d1ce622 Mon Sep 17 00:00:00 2001
From: Jean-Luc Nguyen <jeanlucnguyen@users.noreply.github.com>
Date: Mon, 31 Oct 2022 21:16:54 +0100
Subject: [PATCH 120/469] docs(deployment): add vue card to pwa section (#2631)

---
 docs/deployment/progressive-web-app.md |  1 +
 static/img/frameworks/vue.svg          | 10 ++++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 static/img/frameworks/vue.svg

diff --git a/docs/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.md
index 83a01abd062..6fc348f877b 100644
--- a/docs/deployment/progressive-web-app.md
+++ b/docs/deployment/progressive-web-app.md
@@ -21,4 +21,5 @@ For the frameworks Ionic supports, we've created dedicated guides that go into m
 <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/static/img/frameworks/vue.svg b/static/img/frameworks/vue.svg
new file mode 100644
index 00000000000..190f0a2a952
--- /dev/null
+++ b/static/img/frameworks/vue.svg
@@ -0,0 +1,10 @@
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <g>
+  <title>Layer 1</title>
+  <g id="surface1">
+   <path id="svg_1" fill="rgb(25.882353%,72.156863%,51.372549%)" fill-rule="nonzero" d="m117.34375,35.54688l-17.34375,29.76563l-17.34375,-29.76563l-57.65625,0l75,128.90625l75,-128.90625c0,0 -57.65625,0 -57.65625,0zm0,0"/>
+   <path id="svg_2" fill="rgb(20.784314%,28.627451%,36.862745%)" fill-rule="nonzero" d="m117.34375,35.54688l-17.34375,29.76563l-17.34375,-29.76563l-27.65625,0l45,77.34375l45,-77.34375l-27.65625,0zm0,0"/>
+  </g>
+ </g>
+</svg>
\ No newline at end of file

From 38dc12343696a4bcb9a06ecd7d9ef9225d71d949 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 3 Nov 2022 10:41:45 -0400
Subject: [PATCH 121/469] docs(api): remove custom TOCs (#2628)

---
 docs/api/accordion-group.md | 17 +++--------------
 docs/api/app.md             | 13 -------------
 docs/api/breadcrumb.md      | 15 ++-------------
 docs/api/card-content.md    | 18 +++---------------
 docs/api/card-header.md     | 17 +++--------------
 docs/api/card-subtitle.md   | 16 +++-------------
 docs/api/card-title.md      | 17 +++--------------
 docs/api/item-option.md     | 18 +++---------------
 docs/api/item-options.md    | 17 +++--------------
 docs/api/menu-button.md     | 17 +++--------------
 docs/api/menu-toggle.md     | 22 ++++------------------
 docs/api/nav-link.md        | 17 ++---------------
 docs/api/nav.md             |  7 +++----
 docs/api/slide.md           | 23 +++--------------------
 docs/api/slides.md          |  2 +-
 docs/api/virtual-scroll.md  | 14 +-------------
 16 files changed, 40 insertions(+), 210 deletions(-)

diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index c4b80515e2f..2880703001c 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-accordion-group"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -15,18 +12,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation.
 
-For more information as well as usage, see the [Accordion Documentation](./accordion)
+See the [Accordion](./accordion) documentation for more information.
+
 
 ## Interfaces
 
@@ -67,4 +56,4 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/app.md b/docs/api/app.md
index 80ae9a25b72..98125d4aa8e 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-app"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -19,16 +16,6 @@ import Slots from '@site/static/auto-generated/app/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 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:
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index 09c0164273c..5be2aa6c695 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-breadcrumb"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -15,18 +12,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
 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.
 
-For usage examples, see the [Breadcrumbs](/docs/api/breadcrumbs) documentation.
+See the [Breadcrumbs](./breadcrumbs) documentation for more information.
 
 ## Interfaces
 
@@ -68,4 +57,4 @@ interface BreadcrumbCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index 22d2f5c64d0..647cba00897 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-card-content"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -13,19 +10,10 @@ import Slots from '@site/static/auto-generated/card-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-`ion-card-content` is child component of `ion-card` that adds some content padding.
-It is recommended that any text content for a card should be placed in an `ion-card-content`.
 
+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
@@ -44,4 +32,4 @@ It is recommended that any text content for a card should be placed in an `ion-c
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index b2126cafb07..2e52467ed43 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-card-header"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -15,18 +12,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-`ion-card-header` is a header component for `ion-card`.
 
+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
@@ -45,4 +34,4 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index 0cfb8d05392..ec72784cd99 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-card-subtitle"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -15,17 +12,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
-`ion-card-subtitle` is a child component of `ion-card`
+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
@@ -44,4 +34,4 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 47cba9c1347..33b24158eb5 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-card-title"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -20,18 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-`ion-card-title` is a child component of `ion-card`
 
+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
@@ -50,4 +39,4 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index 4deefaa7723..800d1030f50 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-item-option"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -20,19 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
-The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
-You can combine the `ionSwipe` event and the `expandable` directive to create a full swipe
-action for the item.
+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
@@ -51,4 +39,4 @@ action for the item.
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index 93949858b33..cbee8f5289b 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-item-options"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -19,17 +16,9 @@ import Slots from '@site/static/auto-generated/item-options/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
+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).
 
-The option buttons for an `ion-item-sliding`. These buttons can be placed either on the [start or end side](#side-description).
-You can combine the `ionSwipe` event plus the `expandable` directive to create a full swipe action for the item.
+See the [item sliding](./item-sliding) documentation for more information.
 
 
 ## Side Description
@@ -58,4 +47,4 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index fac03297c10..adba980b958 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-menu-button"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -20,18 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Menu Button is component that automatically creates the icon and functionality to open a menu on a page.
 
+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
@@ -50,4 +39,4 @@ Menu Button is component that automatically creates the icon and functionality t
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 9144429dc8b..e6a10201362 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-menu-toggle"
-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/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';
@@ -22,22 +17,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
-The MenuToggle component can be used to toggle a menu open or closed.
+The Menu Toggle component can be used to toggle a menu open or closed.
 
-By default, it's only visible when the selected menu is active. A menu is active when it can be opened/closed. If the menu is disabled or it's being presented as a split-pane, the menu is marked as non-active and ion-menu-toggle hides itself.
+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`.
 
-In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` property can be set to `false`.
+See the [menu](./menu#menu-toggle) documentation for more information.
 
-See the [Menu documentation](./menu#menu-toggle) for an example.
 
 ## Properties
 <Props />
@@ -55,4 +41,4 @@ See the [Menu documentation](./menu#menu-toggle) for an example.
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 85f2c65d790..30a8f3264ed 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-nav-link"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -18,22 +15,12 @@ import Slots from '@site/static/auto-generated/nav-link/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
 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.
 
-For an example of how to use `ion-nav-link`, visit the [`ion-nav` docs](./nav#using-navlink).
-
-
+See the [nav](./nav#using-navlink) documentation for more information.
 
 
 ## Properties
@@ -52,4 +39,4 @@ For an example of how to use `ion-nav-link`, visit the [`ion-nav` docs](./nav#us
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 23581527718..c263b6f8ed1 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,8 +1,6 @@
 ---
 title: "ion-nav"
 ---
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -16,6 +14,7 @@ import Slots from '@site/static/auto-generated/nav/slots.md';
 </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.
@@ -24,7 +23,7 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if
 
 ## 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. 
+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';
 
@@ -60,4 +59,4 @@ interface NavCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/slide.md b/docs/api/slide.md
index bfe5e4c0797..8e5fdc8069c 100644
--- a/docs/api/slide.md
+++ b/docs/api/slide.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-slide"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 import Props from '@site/static/auto-generated/slide/props.md';
 import Events from '@site/static/auto-generated/slide/events.md';
 import Methods from '@site/static/auto-generated/slide/methods.md';
@@ -19,23 +16,9 @@ import Slots from '@site/static/auto-generated/slide/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
+The Slide component is a child component of [slides](slides.md). It should contain any contents for a single slide.
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-The Slide component is a child component of [Slides](slides.md). The template
-should be written as `ion-slide`. Any slide content should be written
-in this component and it should be used in conjunction with [Slides](slides.md).
-
-See the [Slides API Docs](slides.md) for more usage information.
-
-
+See the [Slides](./slides) documentation for more information.
 
 
 ## Properties
@@ -54,4 +37,4 @@ See the [Slides API Docs](slides.md) for more usage information.
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/slides.md b/docs/api/slides.md
index 6c227cdc423..78180d638f7 100644
--- a/docs/api/slides.md
+++ b/docs/api/slides.md
@@ -739,4 +739,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/virtual-scroll.md b/docs/api/virtual-scroll.md
index cc1f94d99ba..d3fbddbbc17 100644
--- a/docs/api/virtual-scroll.md
+++ b/docs/api/virtual-scroll.md
@@ -1,9 +1,6 @@
 ---
 title: "ion-virtual-scroll"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
-
 import Props from '@site/static/auto-generated/virtual-scroll/props.md';
 import Events from '@site/static/auto-generated/virtual-scroll/events.md';
 import Methods from '@site/static/auto-generated/virtual-scroll/methods.md';
@@ -19,15 +16,6 @@ import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 Virtual Scroll displays a virtual, "infinite" list. An array of records
 is passed to the virtual scroll containing the data to create templates
 for. The template created for each record, referred to as a cell, can
@@ -296,4 +284,4 @@ within a `<div>` is a safe way to make sure dimensions are measured correctly.
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 633f340cfaa1c864f3b1ab5969cc86404be7ca11 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 3 Nov 2022 10:52:24 -0400
Subject: [PATCH 122/469] docs(buttons): add component playgrounds (#2629)

---
 docs/api/buttons.md                           | 363 ++----------------
 static/usage/buttons/basic/angular.md         |   8 +
 static/usage/buttons/basic/demo.html          |  29 ++
 static/usage/buttons/basic/index.md           |   8 +
 static/usage/buttons/basic/javascript.md      |   8 +
 static/usage/buttons/basic/react.md           |  16 +
 static/usage/buttons/basic/vue.md             |  19 +
 static/usage/buttons/placement/angular.md     |  21 +
 static/usage/buttons/placement/demo.html      |  49 +++
 static/usage/buttons/placement/index.md       |   8 +
 static/usage/buttons/placement/javascript.md  |  21 +
 static/usage/buttons/placement/react.md       |  31 ++
 static/usage/buttons/placement/vue.md         |  32 ++
 static/usage/buttons/types/angular.md         |  78 ++++
 static/usage/buttons/types/demo.html          | 106 +++++
 static/usage/buttons/types/index.md           |   8 +
 static/usage/buttons/types/javascript.md      |  78 ++++
 static/usage/buttons/types/react.md           |  90 +++++
 static/usage/buttons/types/vue.md             |  93 +++++
 .../buttons/angular.md                        |   4 +-
 .../collapsible-large-title/buttons/demo.html |   4 +-
 .../buttons/javascript.md                     |   4 +-
 .../collapsible-large-title/buttons/react.md  |   4 +-
 .../collapsible-large-title/buttons/vue.md    |   4 +-
 static/usage/toolbar/buttons/react.md         |   4 +-
 static/usage/toolbar/buttons/vue.md           |   2 +-
 26 files changed, 753 insertions(+), 339 deletions(-)
 create mode 100644 static/usage/buttons/basic/angular.md
 create mode 100644 static/usage/buttons/basic/demo.html
 create mode 100644 static/usage/buttons/basic/index.md
 create mode 100644 static/usage/buttons/basic/javascript.md
 create mode 100644 static/usage/buttons/basic/react.md
 create mode 100644 static/usage/buttons/basic/vue.md
 create mode 100644 static/usage/buttons/placement/angular.md
 create mode 100644 static/usage/buttons/placement/demo.html
 create mode 100644 static/usage/buttons/placement/index.md
 create mode 100644 static/usage/buttons/placement/javascript.md
 create mode 100644 static/usage/buttons/placement/react.md
 create mode 100644 static/usage/buttons/placement/vue.md
 create mode 100644 static/usage/buttons/types/angular.md
 create mode 100644 static/usage/buttons/types/demo.html
 create mode 100644 static/usage/buttons/types/index.md
 create mode 100644 static/usage/buttons/types/javascript.md
 create mode 100644 static/usage/buttons/types/react.md
 create mode 100644 static/usage/buttons/types/vue.md

diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 4bebd69b8ea..62528eab4e4 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-buttons"
-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/buttons/props.md';
 import Events from '@site/static/auto-generated/buttons/events.md';
 import Methods from '@site/static/auto-generated/buttons/methods.md';
@@ -22,340 +17,56 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-<h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+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/buttons/basic/index.md';
 
+<Basic />
 
 
-The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` element.
+## Buttons Placement
 
-The `<ion-buttons>` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
+Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
 
 | Slot         | Description                                                                                              |
 |--------------|----------------------------------------------------------------------------------------------------------|
-| `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.      |
 | `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/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/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/title/collapsible-large-title/buttons/index.md';
 
+<CollapsibleLargeTitleButtons />
 
-## 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-toolbar>
-  <ion-buttons slot="start">
-    <ion-back-button></ion-back-button>
-  </ion-buttons>
-  <ion-title>Back Button</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-title>Default Buttons</ion-title>
-  <ion-buttons slot="primary">
-    <ion-button color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="primary">
-    <ion-button (click)="clickedStar()">
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Right side menu toggle</ion-title>
-  <ion-buttons slot="end">
-    <ion-menu-button autoHide="false"></ion-menu-button>
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons collapse="true">
-    <ion-button>
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Collapsible Buttons</ion-title>
-</ion-toolbar>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-toolbar>
-  <ion-buttons slot="start">
-    <ion-back-button></ion-back-button>
-  </ion-buttons>
-  <ion-title>Back Button</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-title>Default Buttons</ion-title>
-  <ion-buttons slot="primary">
-    <ion-button color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons slot="primary">
-    <ion-button onclick="clickedStar()">
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Right side menu toggle</ion-title>
-  <ion-buttons slot="end">
-    <ion-menu-toggle auto-hide="false">
-      <ion-button>
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
-  </ion-buttons>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons collapse="true">
-    <ion-button>
-      <ion-icon slot="icon-only" name="star"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-title>Collapsible Buttons</ion-title>
-</ion-toolbar>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react';
-import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
-
-export const ButtonsExample: React.FC = () => (
-  <IonContent>
-    <IonToolbar>
-      <IonButtons slot="start">
-        <IonBackButton defaultHref="/" />
-      </IonButtons>
-      <IonTitle>Back Button</IonTitle>
-    </IonToolbar>
-
-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" icon={personCircle} />
-        </IonButton>
-        <IonButton>
-          <IonIcon slot="icon-only" icon={search} />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Default Buttons</IonTitle>
-      <IonButtons slot="primary">
-        <IonButton color="secondary">
-          <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
-        </IonButton>
-      </IonButtons>
-    </IonToolbar>
-
-    <IonToolbar>
-      <IonButtons slot="primary">
-        <IonButton onClick={() => {}}>
-          <IonIcon slot="icon-only" icon={star} />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Right side menu toggle</IonTitle>
-      <IonButtons slot="end">
-        <IonMenuButton autoHide={false} />
-      </IonButtons>
-    </IonToolbar>
-
-    <IonToolbar>
-      <IonButtons collapse="true">
-        <IonButton>
-          <IonIcon slot="icon-only" icon={star} />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Collapsible Buttons</IonTitle>
-    </IonToolbar>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'buttons-example',
-  styleUrl: 'buttons-example.css'
-})
-export class ButtonsExample {
-
-  clickedStar() {
-    console.log("Clicked star button");
-  }
-
-  render() {
-    return [
-      <ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
-        </ion-buttons>
-        <ion-title>Back Button</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-title>Default Buttons</ion-title>
-        <ion-buttons slot="primary">
-          <ion-button color="secondary">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-buttons slot="primary">
-          <ion-button onClick={() => this.clickedStar()}>
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Right side menu toggle</ion-title>
-        <ion-buttons slot="end">
-          <ion-menu-button autoHide={false}></ion-menu-button>
-        </ion-buttons>
-      </ion-toolbar>,
-
-      <ion-toolbar>
-        <ion-buttons collapse={true}>
-          <ion-button>
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Collapsible Buttons</ion-title>
-      </ion-toolbar>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>Back Button</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-title>Default Buttons</ion-title>
-    <ion-buttons slot="primary">
-      <ion-button color="secondary">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="primary">
-      <ion-button @click="clickedStar()">
-        <ion-icon slot="icon-only" name="star"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Right side menu toggle</ion-title>
-    <ion-buttons slot="end">
-      <ion-menu-button auto-hide="false"></ion-menu-button>
-    </ion-buttons>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons collapse="true">
-      <ion-button>
-        <ion-icon slot="icon-only" name="star"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Collapsible Buttons</ion-title>
-  </ion-toolbar>
-</template>
-
-<script>
-import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
-import { personCircle, search } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
-  setup() {
-    const clickedStar = () => {
-      console.log('Star clicked!');
-    }
-    return { personCircle, search, clickedStar };
-  }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
 
 ## Properties
 <Props />
@@ -373,4 +84,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/buttons/basic/angular.md b/static/usage/buttons/basic/angular.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/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/buttons/basic/demo.html b/static/usage/buttons/basic/demo.html
new file mode 100644
index 00000000000..86fad6dd80d
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/buttons/basic/index.md b/static/usage/buttons/basic/index.md
new file mode 100644
index 00000000000..2fc2df3b683
--- /dev/null
+++ b/static/usage/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/buttons/basic/demo.html" />
diff --git a/static/usage/buttons/basic/javascript.md b/static/usage/buttons/basic/javascript.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/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/buttons/basic/react.md b/static/usage/buttons/basic/react.md
new file mode 100644
index 00000000000..4a73e0d4958
--- /dev/null
+++ b/static/usage/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/buttons/basic/vue.md b/static/usage/buttons/basic/vue.md
new file mode 100644
index 00000000000..3da668fcb20
--- /dev/null
+++ b/static/usage/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/buttons/placement/angular.md b/static/usage/buttons/placement/angular.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/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/buttons/placement/demo.html b/static/usage/buttons/placement/demo.html
new file mode 100644
index 00000000000..fc35244a169
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/buttons/placement/index.md b/static/usage/buttons/placement/index.md
new file mode 100644
index 00000000000..5bdf6bac8fc
--- /dev/null
+++ b/static/usage/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/buttons/placement/demo.html" />
diff --git a/static/usage/buttons/placement/javascript.md b/static/usage/buttons/placement/javascript.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/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/buttons/placement/react.md b/static/usage/buttons/placement/react.md
new file mode 100644
index 00000000000..27d6b54d4ba
--- /dev/null
+++ b/static/usage/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/buttons/placement/vue.md b/static/usage/buttons/placement/vue.md
new file mode 100644
index 00000000000..dc0217fc146
--- /dev/null
+++ b/static/usage/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/buttons/types/angular.md b/static/usage/buttons/types/angular.md
new file mode 100644
index 00000000000..183c70105b1
--- /dev/null
+++ b/static/usage/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/buttons/types/demo.html b/static/usage/buttons/types/demo.html
new file mode 100644
index 00000000000..e7aedcc42d9
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/buttons/types/index.md b/static/usage/buttons/types/index.md
new file mode 100644
index 00000000000..7b4c03ce5e5
--- /dev/null
+++ b/static/usage/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/buttons/types/demo.html" size="medium" />
diff --git a/static/usage/buttons/types/javascript.md b/static/usage/buttons/types/javascript.md
new file mode 100644
index 00000000000..183c70105b1
--- /dev/null
+++ b/static/usage/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/buttons/types/react.md b/static/usage/buttons/types/react.md
new file mode 100644
index 00000000000..8d3b3edfe9e
--- /dev/null
+++ b/static/usage/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/buttons/types/vue.md b/static/usage/buttons/types/vue.md
new file mode 100644
index 00000000000..9a101caa402
--- /dev/null
+++ b/static/usage/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/title/collapsible-large-title/buttons/angular.md b/static/usage/title/collapsible-large-title/buttons/angular.md
index 7e32a6e7b9b..6f253b16cd4 100644
--- a/static/usage/title/collapsible-large-title/buttons/angular.md
+++ b/static/usage/title/collapsible-large-title/buttons/angular.md
@@ -3,7 +3,7 @@
   <ion-toolbar>
     <ion-title>Title</ion-title>
     <ion-buttons [collapse]="true" slot="end">
-      <ion-button>Click Me</ion-button>
+      <ion-button>Button</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
@@ -12,7 +12,7 @@
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
       <ion-buttons [collapse]="true" slot="end">
-        <ion-button>Click Me</ion-button>
+        <ion-button>Button</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
diff --git a/static/usage/title/collapsible-large-title/buttons/demo.html b/static/usage/title/collapsible-large-title/buttons/demo.html
index 1d78a589661..3e91ce55a5c 100644
--- a/static/usage/title/collapsible-large-title/buttons/demo.html
+++ b/static/usage/title/collapsible-large-title/buttons/demo.html
@@ -18,7 +18,7 @@
       <ion-toolbar>
         <ion-title>Title</ion-title>
         <ion-buttons collapse="true" slot="end">
-          <ion-button>Click Me</ion-button>
+          <ion-button>Button</ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
@@ -27,7 +27,7 @@
         <ion-toolbar>
           <ion-title size="large">Title</ion-title>
           <ion-buttons collapse="true" slot="end">
-            <ion-button>Click Me</ion-button>
+            <ion-button>Button</ion-button>
           </ion-buttons>
         </ion-toolbar>
       </ion-header>
diff --git a/static/usage/title/collapsible-large-title/buttons/javascript.md b/static/usage/title/collapsible-large-title/buttons/javascript.md
index a274b86da36..feb1583e3b6 100644
--- a/static/usage/title/collapsible-large-title/buttons/javascript.md
+++ b/static/usage/title/collapsible-large-title/buttons/javascript.md
@@ -3,7 +3,7 @@
   <ion-toolbar>
     <ion-title>Title</ion-title>
     <ion-buttons collapse="true" slot="end">
-      <ion-button>Click Me</ion-button>
+      <ion-button>Button</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
@@ -12,7 +12,7 @@
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
       <ion-buttons collapse="true" slot="end">
-        <ion-button>Click Me</ion-button>
+        <ion-button>Button</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
diff --git a/static/usage/title/collapsible-large-title/buttons/react.md b/static/usage/title/collapsible-large-title/buttons/react.md
index afe673129a2..deca52428ce 100644
--- a/static/usage/title/collapsible-large-title/buttons/react.md
+++ b/static/usage/title/collapsible-large-title/buttons/react.md
@@ -9,7 +9,7 @@ function Example() {
         <IonToolbar>
           <IonTitle>Title</IonTitle>
           <IonButtons collapse={true} slot="end">
-            <IonButton>Click Me</IonButton>
+            <IonButton>Button</IonButton>
           </IonButtons>
         </IonToolbar>
       </IonHeader>
@@ -18,7 +18,7 @@ function Example() {
           <IonToolbar>
             <IonTitle size="large">Title</IonTitle>
             <IonButtons collapse={true} slot="end">
-              <IonButton>Click Me</IonButton>
+              <IonButton>Button</IonButton>
             </IonButtons>
           </IonToolbar>
         </IonHeader>
diff --git a/static/usage/title/collapsible-large-title/buttons/vue.md b/static/usage/title/collapsible-large-title/buttons/vue.md
index 857a64e2d6c..2c23d8982ad 100644
--- a/static/usage/title/collapsible-large-title/buttons/vue.md
+++ b/static/usage/title/collapsible-large-title/buttons/vue.md
@@ -4,7 +4,7 @@
     <ion-toolbar>
       <ion-title>Title</ion-title>
       <ion-buttons :collapse="true" slot="end">
-        <ion-button>Click Me</ion-button>
+        <ion-button>Button</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
@@ -13,7 +13,7 @@
       <ion-toolbar>
         <ion-title size="large">Title</ion-title>
         <ion-buttons :collapse="true" slot="end">
-          <ion-button>Click Me</ion-button>
+          <ion-button>Button</ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
diff --git a/static/usage/toolbar/buttons/react.md b/static/usage/toolbar/buttons/react.md
index 44ae43e3526..ff7736981f0 100644
--- a/static/usage/toolbar/buttons/react.md
+++ b/static/usage/toolbar/buttons/react.md
@@ -85,14 +85,14 @@ function Example() {
 
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton default-href="#"></IonBackButton>
+          <IonBackButton defaultHref="#"></IonBackButton>
         </IonButtons>
         <IonTitle>Back Button</IonTitle>
       </IonToolbar>
 
       <IonToolbar>
         <IonButtons slot="start">
-          <IonMenuButton auto-hide="false"></IonMenuButton>
+          <IonMenuButton autoHide={false}></IonMenuButton>
         </IonButtons>
         <IonTitle>Menu Button</IonTitle>
       </IonToolbar>
diff --git a/static/usage/toolbar/buttons/vue.md b/static/usage/toolbar/buttons/vue.md
index b823e6ec404..388760dcd9f 100644
--- a/static/usage/toolbar/buttons/vue.md
+++ b/static/usage/toolbar/buttons/vue.md
@@ -86,7 +86,7 @@
 
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-menu-button auto-hide="false"></ion-menu-button>
+      <ion-menu-button :auto-hide="false"></ion-menu-button>
     </ion-buttons>
     <ion-title>Menu Button</ion-title>
   </ion-toolbar>

From d6f9a2ea9753fc850c77cf68997405102700f9ba Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 3 Nov 2022 10:50:15 -0500
Subject: [PATCH 123/469] docs(fab): add playgrounds (#2626)

---
 docs/api/fab-button.md                        | 198 +-----
 docs/api/fab-list.md                          | 312 +--------
 docs/api/fab.md                               | 655 ++----------------
 static/usage/fab/basic/angular.md             |   7 +
 static/usage/fab/basic/demo.html              |  29 +
 static/usage/fab/basic/index.md               |   8 +
 static/usage/fab/basic/javascript.md          |   7 +
 static/usage/fab/basic/react.md               |  16 +
 static/usage/fab/basic/vue.md                 |  22 +
 static/usage/fab/button-sizing/angular.md     |  18 +
 static/usage/fab/button-sizing/demo.html      |  40 ++
 static/usage/fab/button-sizing/index.md       |   8 +
 static/usage/fab/button-sizing/javascript.md  |  18 +
 static/usage/fab/button-sizing/react.md       |  27 +
 static/usage/fab/button-sizing/vue.md         |  33 +
 static/usage/fab/list-side/angular.md         |  33 +
 static/usage/fab/list-side/demo.html          |  55 ++
 static/usage/fab/list-side/index.md           |   8 +
 static/usage/fab/list-side/javascript.md      |  33 +
 static/usage/fab/list-side/react.md           |  42 ++
 static/usage/fab/list-side/vue.md             |  48 ++
 static/usage/fab/positioning/angular.md       |  59 ++
 static/usage/fab/positioning/demo.html        |  77 ++
 static/usage/fab/positioning/index.md         |  13 +
 static/usage/fab/positioning/javascript.md    |  59 ++
 static/usage/fab/positioning/react.md         |  70 ++
 static/usage/fab/positioning/vue.md           |  74 ++
 static/usage/fab/theming/colors/angular.md    |  33 +
 static/usage/fab/theming/colors/demo.html     |  55 ++
 static/usage/fab/theming/colors/index.md      |   8 +
 static/usage/fab/theming/colors/javascript.md |  33 +
 static/usage/fab/theming/colors/react.md      |  42 ++
 static/usage/fab/theming/colors/vue.md        |  48 ++
 .../angular/example_component_css.md          |  10 +
 .../angular/example_component_html.md         |  18 +
 .../theming/css-custom-properties/demo.html   |  50 ++
 .../theming/css-custom-properties/index.md    |  31 +
 .../css-custom-properties/javascript.md       |  29 +
 .../css-custom-properties/react/main_css.md   |  10 +
 .../css-custom-properties/react/main_tsx.md   |  29 +
 .../fab/theming/css-custom-properties/vue.md  |  44 ++
 .../angular/example_component_css.md          |  16 +
 .../angular/example_component_html.md         |  18 +
 .../fab/theming/css-shadow-parts/demo.html    |  56 ++
 .../fab/theming/css-shadow-parts/index.md     |  31 +
 .../theming/css-shadow-parts/javascript.md    |  35 +
 .../css-shadow-parts/react/main_css.md        |  16 +
 .../css-shadow-parts/react/main_tsx.md        |  29 +
 .../usage/fab/theming/css-shadow-parts/vue.md |  50 ++
 49 files changed, 1551 insertions(+), 1109 deletions(-)
 create mode 100644 static/usage/fab/basic/angular.md
 create mode 100644 static/usage/fab/basic/demo.html
 create mode 100644 static/usage/fab/basic/index.md
 create mode 100644 static/usage/fab/basic/javascript.md
 create mode 100644 static/usage/fab/basic/react.md
 create mode 100644 static/usage/fab/basic/vue.md
 create mode 100644 static/usage/fab/button-sizing/angular.md
 create mode 100644 static/usage/fab/button-sizing/demo.html
 create mode 100644 static/usage/fab/button-sizing/index.md
 create mode 100644 static/usage/fab/button-sizing/javascript.md
 create mode 100644 static/usage/fab/button-sizing/react.md
 create mode 100644 static/usage/fab/button-sizing/vue.md
 create mode 100644 static/usage/fab/list-side/angular.md
 create mode 100644 static/usage/fab/list-side/demo.html
 create mode 100644 static/usage/fab/list-side/index.md
 create mode 100644 static/usage/fab/list-side/javascript.md
 create mode 100644 static/usage/fab/list-side/react.md
 create mode 100644 static/usage/fab/list-side/vue.md
 create mode 100644 static/usage/fab/positioning/angular.md
 create mode 100644 static/usage/fab/positioning/demo.html
 create mode 100644 static/usage/fab/positioning/index.md
 create mode 100644 static/usage/fab/positioning/javascript.md
 create mode 100644 static/usage/fab/positioning/react.md
 create mode 100644 static/usage/fab/positioning/vue.md
 create mode 100644 static/usage/fab/theming/colors/angular.md
 create mode 100644 static/usage/fab/theming/colors/demo.html
 create mode 100644 static/usage/fab/theming/colors/index.md
 create mode 100644 static/usage/fab/theming/colors/javascript.md
 create mode 100644 static/usage/fab/theming/colors/react.md
 create mode 100644 static/usage/fab/theming/colors/vue.md
 create mode 100644 static/usage/fab/theming/css-custom-properties/angular/example_component_css.md
 create mode 100644 static/usage/fab/theming/css-custom-properties/angular/example_component_html.md
 create mode 100644 static/usage/fab/theming/css-custom-properties/demo.html
 create mode 100644 static/usage/fab/theming/css-custom-properties/index.md
 create mode 100644 static/usage/fab/theming/css-custom-properties/javascript.md
 create mode 100644 static/usage/fab/theming/css-custom-properties/react/main_css.md
 create mode 100644 static/usage/fab/theming/css-custom-properties/react/main_tsx.md
 create mode 100644 static/usage/fab/theming/css-custom-properties/vue.md
 create mode 100644 static/usage/fab/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/fab/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/fab/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/fab/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/fab/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/fab/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/fab/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/fab/theming/css-shadow-parts/vue.md

diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index 94b2421bee2..ab86a48426e 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-fab-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/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';
@@ -22,199 +17,12 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-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 not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content.
-
-If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:
-
-
-
-## 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-content>
-
-  <!-- Fixed Floating Action Button that does not scroll with the content -->
-  <ion-fab slot="fixed">
-    <ion-fab-button>Button</ion-fab-button>
-  </ion-fab>
-
-  <!-- Default Floating Action Button that scrolls with the content.-->
-  <ion-fab-button>Default</ion-fab-button>
-
-  <!-- Mini -->
-  <ion-fab-button size="small">Mini</ion-fab-button>
-
-  <!-- Colors -->
-  <ion-fab-button color="primary">Primary</ion-fab-button>
-  <ion-fab-button color="secondary">Secondary</ion-fab-button>
-  <ion-fab-button color="danger">Danger</ion-fab-button>
-  <ion-fab-button color="light">Light</ion-fab-button>
-  <ion-fab-button color="dark">Dark</ion-fab-button>
-
-</ion-content>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-content>
-
-  <!-- Fixed Floating Action Button that does not scroll with the content -->
-  <ion-fab slot="fixed">
-    <ion-fab-button>Button</ion-fab-button>
-  </ion-fab>
-
-  <!-- Default Floating Action Button that scrolls with the content.-->
-  <ion-fab-button>Default</ion-fab-button>
-
-  <!-- Mini -->
-  <ion-fab-button size="small">Mini</ion-fab-button>
-
-  <!-- Colors -->
-  <ion-fab-button color="primary">Primary</ion-fab-button>
-  <ion-fab-button color="secondary">Secondary</ion-fab-button>
-  <ion-fab-button color="danger">Danger</ion-fab-button>
-  <ion-fab-button color="light">Light</ion-fab-button>
-  <ion-fab-button color="dark">Dark</ion-fab-button>
-
-</ion-content>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonFab, IonFabButton } from '@ionic/react';
-
-export const FabButtonExample: React.FC = () => (
-  <IonContent>
-    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
-    <IonFab slot="fixed">
-      <IonFabButton>Button</IonFabButton>
-    </IonFab>
-
-    {/*-- Default Floating Action Button that scrolls with the content.--*/}
-    <IonFabButton>Default</IonFabButton>
-
-    {/*-- Mini --*/}
-    <IonFabButton size="small">Mini</IonFabButton>
-
-    {/*-- Colors --*/}
-    <IonFabButton color="primary">Primary</IonFabButton>
-    <IonFabButton color="secondary">Secondary</IonFabButton>
-    <IonFabButton color="danger">Danger</IonFabButton>
-    <IonFabButton color="light">Light</IonFabButton>
-    <IonFabButton color="dark">Dark</IonFabButton>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'fab-button-example',
-  styleUrl: 'fab-button-example.css'
-})
-export class FabButtonExample {
-  render() {
-    return [
-      <ion-content>
-
-        {/* Fixed Floating Action Button that does not scroll with the content */}
-        <ion-fab slot="fixed">
-          <ion-fab-button>Button</ion-fab-button>
-        </ion-fab>
-
-        {/* Default Floating Action Button that scrolls with the content */}
-        <ion-fab-button>Default</ion-fab-button>
-
-        {/* Mini */}
-        <ion-fab-button size="small">Mini</ion-fab-button>
-
-        {/* Colors */}
-        <ion-fab-button color="primary">Primary</ion-fab-button>
-        <ion-fab-button color="secondary">Secondary</ion-fab-button>
-        <ion-fab-button color="danger">Danger</ion-fab-button>
-        <ion-fab-button color="light">Light</ion-fab-button>
-        <ion-fab-button color="dark">Dark</ion-fab-button>
-
-      </ion-content>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-content>
-
-    <!-- Fixed Floating Action Button that does not scroll with the content -->
-    <ion-fab slot="fixed">
-      <ion-fab-button>Button</ion-fab-button>
-    </ion-fab>
-
-    <!-- Default Floating Action Button that scrolls with the content.-->
-    <ion-fab-button>Default</ion-fab-button>
-
-    <!-- Mini -->
-    <ion-fab-button size="small">Mini</ion-fab-button>
-
-    <!-- Colors -->
-    <ion-fab-button color="primary">Primary</ion-fab-button>
-    <ion-fab-button color="secondary">Secondary</ion-fab-button>
-    <ion-fab-button color="danger">Danger</ion-fab-button>
-    <ion-fab-button color="light">Light</ion-fab-button>
-    <ion-fab-button color="dark">Dark</ion-fab-button>
-
-  </ion-content>
-</template>
-
-<script>
-import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonContent, IonFab, IonFabButton }
-});
-</script>
-```
 
+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.
 
-</TabItem>
+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.
 
-</Tabs>
+For usage examples, see the [fab documentation](./fab).
 
 ## Properties
 <Props />
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index f74f89eb1e6..a0659a394d7 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-fab-list"
-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/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';
@@ -17,312 +12,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-The `ion-fab-list` element is a container for multiple fab buttons. This collection of fab buttons 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', 'bottom'
-
-
-
-## 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-fab vertical="center" horizontal="center">
-  <ion-fab-button>Share</ion-fab-button>
-  <ion-fab-list side="top">
-    <ion-fab-button>
-      <ion-icon name="logo-facebook"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-twitter"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-youtube"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-
-  <ion-fab-list side="end">
-    <ion-fab-button>
-      <ion-icon name="logo-pwa"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-npm"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-ionic"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-
-  <ion-fab-list side="bottom">
-    <ion-fab-button>
-      <ion-icon name="logo-github"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-javascript"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-angular"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-
-  <ion-fab-list side="start">
-    <ion-fab-button>
-      <ion-icon name="logo-vimeo"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-chrome"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-react"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-</ion-fab>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-fab vertical="center" horizontal="center">
-  <ion-fab-button>Share</ion-fab-button>
-  <ion-fab-list side="top">
-    <ion-fab-button>
-      <ion-icon name="logo-facebook"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-twitter"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-youtube"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-
-  <ion-fab-list side="end">
-    <ion-fab-button>
-      <ion-icon name="logo-pwa"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-npm"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-ionic"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-
-  <ion-fab-list side="bottom">
-    <ion-fab-button>
-      <ion-icon name="logo-github"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-javascript"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-angular"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-
-  <ion-fab-list side="start">
-    <ion-fab-button>
-      <ion-icon name="logo-vimeo"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-chrome"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-react"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-</ion-fab>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
-import { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons';
-
-export const FabListExample: React.FC = () => (
-  <IonContent>
-    <IonFab vertical="center" horizontal="center">
-      <IonFabButton>Share</IonFabButton>
-      <IonFabList side="top">
-        <IonFabButton>
-          <IonIcon icon={logoFacebook} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoTwitter} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoYoutube} />
-        </IonFabButton>
-      </IonFabList>
-
-      <IonFabList side="end">
-        <IonFabButton>
-          <IonIcon icon={logoPwa} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoNpm} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoIonic} />
-        </IonFabButton>
-      </IonFabList>
-
-      <IonFabList side="bottom">
-        <IonFabButton>
-          <IonIcon icon={logoGithub} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoJavascript} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoAngular} />
-        </IonFabButton>
-      </IonFabList>
-
-      <IonFabList side="start">
-        <IonFabButton>
-          <IonIcon icon={logoVimeo} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoChrome} />
-        </IonFabButton>
-        <IonFabButton>
-          <IonIcon icon={logoReact} />
-        </IonFabButton>
-      </IonFabList>
-    </IonFab>
-  </IonContent>
-);
-
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'fab-list-example',
-  styleUrl: 'fab-list-example.css'
-})
-export class FabListExample {
-  render() {
-    return [
-      <ion-fab vertical="center" horizontal="center">
-        <ion-fab-button>Share</ion-fab-button>
-        <ion-fab-list side="top">
-          <ion-fab-button>
-            <ion-icon name="logo-facebook"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-twitter"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-youtube"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-
-        <ion-fab-list side="end">
-          <ion-fab-button>
-            <ion-icon name="logo-pwa"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-npm"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-ionic"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-
-        <ion-fab-list side="bottom">
-          <ion-fab-button>
-            <ion-icon name="logo-github"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-javascript"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-angular"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-
-        <ion-fab-list side="start">
-          <ion-fab-button>
-            <ion-icon name="logo-vimeo"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-chrome"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="logo-react"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-fab vertical="bottom" horizontal="end">
-    <ion-fab-button>Share</ion-fab-button>
-
-    <ion-fab-list side="top">
-      <ion-fab-button>Facebook</ion-fab-button>
-      <ion-fab-button>Twitter</ion-fab-button>
-      <ion-fab-button>Youtube</ion-fab-button>
-    </ion-fab-list>
-
-    <ion-fab-list side="start">
-      <ion-fab-button>Vimeo</ion-fab-button>
-    </ion-fab-list>
-
-  </ion-fab>
-</template>
-
-<script>
-import { IonFab, IonFabButton, IonFabList } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonFab, IonFabButton, IonFabList }
-});
-</script>
-```
-
-
-</TabItem>
+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"`.
 
-</Tabs>
+For usage examples, see the [fab documentation](./fab).
 
 ## Properties
 <Props />
diff --git a/docs/api/fab.md b/docs/api/fab.md
index dec144aa20d..fe1139ac460 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-fab"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/fab/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/fab/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -24,603 +17,57 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.md) elements with different side values.
-
-
-
-## 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-header>
-  <ion-toolbar>
-    <ion-title>Header</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- fab placed to the top end -->
-  <ion-fab vertical="top" horizontal="end" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="add"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the bottom end -->
-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="arrow-forward-circle"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the top start -->
-  <ion-fab vertical="top" horizontal="start" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="arrow-back-circle"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the bottom start -->
-  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="arrow-up-circle"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the (vertical) center and start -->
-  <ion-fab vertical="center" horizontal="start" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="share"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the (vertical) center and end -->
-  <ion-fab vertical="center" horizontal="end" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="add"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
-  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="person"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
-  <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="settings"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-list side="end">
-      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-  </ion-fab>
-
-  <!-- fab placed in the center of the content with a list on each side -->
-  <ion-fab vertical="center" horizontal="center" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="share"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-list side="top">
-      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-    <ion-fab-list side="bottom">
-      <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-    <ion-fab-list side="start">
-      <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-    <ion-fab-list side="end">
-      <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-  </ion-fab>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Header</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- fab placed to the top end -->
-  <ion-fab vertical="top" horizontal="end" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="add"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the bottom end -->
-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="arrow-forward-circle"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the top start -->
-  <ion-fab vertical="top" horizontal="start" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="arrow-back-circle"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the bottom start -->
-  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="arrow-up-circle"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the (vertical) center and start -->
-  <ion-fab vertical="center" horizontal="start" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="share"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the (vertical) center and end -->
-  <ion-fab vertical="center" horizontal="end" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="add"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
-  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="person"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-  <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
-  <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="settings"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-list side="end">
-      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-  </ion-fab>
-
-  <!-- fab placed in the center of the content with a list on each side -->
-  <ion-fab vertical="center" horizontal="center" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="share"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-list side="top">
-      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-    <ion-fab-list side="bottom">
-      <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-    <ion-fab-list side="start">
-      <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-    <ion-fab-list side="end">
-      <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
-    </ion-fab-list>
-  </ion-fab>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
-import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons';
-
-export const FabExamples: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Header</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent>
-        {/*-- fab placed to the top end --*/}
-        <IonFab vertical="top" horizontal="end" slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={add} />
-          </IonFabButton>
-        </IonFab>
-
-        {/*-- fab placed to the bottom end --*/}
-        <IonFab vertical="bottom" horizontal="end" slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={arrowForwardCircle} />
-          </IonFabButton>
-        </IonFab>
-
-        {/*-- fab placed to the top start --*/}
-        <IonFab vertical="top" horizontal="start" slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={arrowBackCircle} />
-          </IonFabButton>
-        </IonFab>
-
-        {/*-- fab placed to the bottom start --*/}
-        <IonFab vertical="bottom" horizontal="start" slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={arrowUpCircle} />
-          </IonFabButton>
-        </IonFab>
-
-        {/*-- fab placed to the (vertical) center and start --*/}
-        <IonFab vertical="center" horizontal="start" slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={share} />
-          </IonFabButton>
-        </IonFab>
-
-        {/*-- fab placed to the (vertical) center and end --*/}
-        <IonFab vertical="center" horizontal="end" slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={add} />
-          </IonFabButton>
-        </IonFab>
-
-        {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}
-        <IonFab vertical="top" horizontal="end" edge slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={person} />
-          </IonFabButton>
-        </IonFab>
-
-        {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}
-        <IonFab vertical="bottom" horizontal="start" edge slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={settings} />
-          </IonFabButton>
-          <IonFabList side="end">
-            <IonFabButton><IonIcon icon={logoVimeo} /></IonFabButton>
-          </IonFabList>
-        </IonFab>
-
-        {/*-- fab placed in the center of the content with a list on each side --*/}
-        <IonFab vertical="center" horizontal="center" slot="fixed">
-          <IonFabButton>
-            <IonIcon icon={share} />
-          </IonFabButton>
-          <IonFabList side="top">
-            <IonFabButton><IonIcon icon={logoVimeo} /></IonFabButton>
-          </IonFabList>
-          <IonFabList side="bottom">
-            <IonFabButton><IonIcon icon={logoFacebook} /></IonFabButton>
-          </IonFabList>
-          <IonFabList side="start">
-            <IonFabButton><IonIcon icon={logoInstagram} /></IonFabButton>
-          </IonFabList>
-          <IonFabList side="end">
-            <IonFabButton><IonIcon icon={logoTwitter} /></IonFabButton>
-          </IonFabList>
-        </IonFab>
-      </IonContent>
-      <IonFooter>
-        <IonToolbar>
-          <IonTitle>Footer</IonTitle>
-        </IonToolbar>
-      </IonFooter>
-    </IonPage>
-  );
-};
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'fab-example',
-  styleUrl: 'fab-example.css'
-})
-export class FabExample {
-  render() {
-    return [
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Header</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-
-      <ion-content>
-        {/* fab placed to the top end */}
-        <ion-fab vertical="top" horizontal="end" slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-
-        {/* fab placed to the bottom end */}
-        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="arrow-forward-circle"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-
-        {/* fab placed to the top start */}
-        <ion-fab vertical="top" horizontal="start" slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="arrow-back-circle"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-
-        {/* fab placed to the bottom start */}
-        <ion-fab vertical="bottom" horizontal="start" slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="arrow-up-circle"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-
-        {/* fab placed to the (vertical) center and start */}
-        <ion-fab vertical="center" horizontal="start" slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="share"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-
-        {/* fab placed to the (vertical) center and end */}
-        <ion-fab vertical="center" horizontal="end" slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-
-        {/* fab placed to the top and end and on the top edge of the  content overlapping header */}
-        <ion-fab vertical="top" horizontal="end" edge slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="person"></ion-icon>
-          </ion-fab-button>
-        </ion-fab>
-
-        {/* fab placed to the bottom and start and on the bottom edge of content  overlapping footer with a list to the right */}
-        <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="settings"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="end">
-            <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-
-        {/* fab placed in the center of the content with a list on each side */}
-        <ion-fab vertical="center" horizontal="center" slot="fixed">
-          <ion-fab-button>
-            <ion-icon name="share"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="top">
-            <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="bottom">
-            <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="start">
-            <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
-          </ion-fab-list>
-          <ion-fab-list side="end">
-            <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-      </ion-content>,
-
-      <ion-footer>
-        <ion-toolbar>
-          <ion-title>
-            Footer
-          </ion-title>
-        </ion-toolbar>
-      </ion-footer>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>Header</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-content>
-    <!-- fab placed to the top end -->
-    <ion-fab vertical="top" horizontal="end" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="add"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- fab placed to the bottom end -->
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="arrowForwardCircle"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- fab placed to the top start -->
-    <ion-fab vertical="top" horizontal="start" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="arrowBackCircle"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- fab placed to the bottom start -->
-    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="arrowUpCircle"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- fab placed to the (vertical) center and start -->
-    <ion-fab vertical="center" horizontal="start" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="share"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- fab placed to the (vertical) center and end -->
-    <ion-fab vertical="center" horizontal="end" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="add"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
-    <ion-fab vertical="top" horizontal="end" edge slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="person"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
-    <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="settings"></ion-icon>
-      </ion-fab-button>
-      <ion-fab-list side="end">
-        <ion-fab-button><ion-icon :icon="logoVimeo"></ion-icon></ion-fab-button>
-      </ion-fab-list>
-    </ion-fab>
-
-    <!-- fab placed in the center of the content with a list on each side -->
-    <ion-fab vertical="center" horizontal="center" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="share"></ion-icon>
-      </ion-fab-button>
-      <ion-fab-list side="top">
-        <ion-fab-button><ion-icon :icon="logoVimeo"></ion-icon></ion-fab-button>
-      </ion-fab-list>
-      <ion-fab-list side="bottom">
-        <ion-fab-button><ion-icon :icon="logoFacebook"></ion-icon></ion-fab-button>
-      </ion-fab-list>
-      <ion-fab-list side="start">
-        <ion-fab-button><ion-icon :icon="logoInstagram"></ion-icon></ion-fab-button>
-      </ion-fab-list>
-      <ion-fab-list side="end">
-        <ion-fab-button><ion-icon :icon="logoTwitter"></ion-icon></ion-fab-button>
-      </ion-fab-list>
-    </ion-fab>
-  </ion-content>
-
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-</template>
-
-<script>
-import { 
-  IonContent, 
-  IonFab, 
-  IonFabButton, 
-  IonFabList, 
-  IonFooter, 
-  IonHeader, 
-  IonIcon, 
-  IonTitle, 
-  IonToolbar 
-} from '@ionic/vue';
-import { 
-  add, 
-  arrowBackCircle,
-  arrowForwardCircle, 
-  arrowUpCircle,
-  logoFacebook, 
-  logoInstagram, 
-  logoTwitter, 
-  logoVimeo, 
-  person, 
-  settings, 
-  share
-} from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { 
-    IonContent, 
-    IonFab, 
-    IonFabButton, 
-    IonFabList, 
-    IonFooter, 
-    IonHeader, 
-    IonIcon, 
-    IonTitle, 
-    IonToolbar
-  },
-  setup() {
-    return {
-      add, 
-      arrowBackCircle,
-      arrowForwardCircle, 
-      arrowUpCircle,
-      logoFacebook, 
-      logoInstagram, 
-      logoTwitter, 
-      logoVimeo, 
-      person, 
-      settings, 
-      share
-    }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
+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/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/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/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/fab/button-sizing/index.md';
+
+<ButtonSizing />
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/fab/theming/colors/index.md';
+
+<Colors />
+
+### CSS Custom Properties
+
+import CSSCustomProperties from '@site/static/usage/fab/theming/css-custom-properties/index.md';
+
+<CSSCustomProperties />
+
+### CSS Shadow Parts
+
+import CSSShadowParts from '@site/static/usage/fab/theming/css-shadow-parts/index.md';
+
+<CSSShadowParts />
 
 ## Properties
 <Props />
diff --git a/static/usage/fab/basic/angular.md b/static/usage/fab/basic/angular.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/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/fab/basic/demo.html b/static/usage/fab/basic/demo.html
new file mode 100644
index 00000000000..ca6c7cb7f6a
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/fab/basic/index.md b/static/usage/fab/basic/index.md
new file mode 100644
index 00000000000..00f2df2dcfa
--- /dev/null
+++ b/static/usage/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/fab/basic/demo.html" />
diff --git a/static/usage/fab/basic/javascript.md b/static/usage/fab/basic/javascript.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/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/fab/basic/react.md b/static/usage/fab/basic/react.md
new file mode 100644
index 00000000000..f1df86581d6
--- /dev/null
+++ b/static/usage/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/fab/basic/vue.md b/static/usage/fab/basic/vue.md
new file mode 100644
index 00000000000..e6b99476bd0
--- /dev/null
+++ b/static/usage/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/fab/button-sizing/angular.md b/static/usage/fab/button-sizing/angular.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/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/fab/button-sizing/demo.html b/static/usage/fab/button-sizing/demo.html
new file mode 100644
index 00000000000..624dce0207d
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/fab/button-sizing/index.md b/static/usage/fab/button-sizing/index.md
new file mode 100644
index 00000000000..3f00b9e9e55
--- /dev/null
+++ b/static/usage/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/fab/button-sizing/demo.html" />
diff --git a/static/usage/fab/button-sizing/javascript.md b/static/usage/fab/button-sizing/javascript.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/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/fab/button-sizing/react.md b/static/usage/fab/button-sizing/react.md
new file mode 100644
index 00000000000..c6837284e08
--- /dev/null
+++ b/static/usage/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/fab/button-sizing/vue.md b/static/usage/fab/button-sizing/vue.md
new file mode 100644
index 00000000000..bf292433d7e
--- /dev/null
+++ b/static/usage/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/fab/list-side/angular.md b/static/usage/fab/list-side/angular.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/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/fab/list-side/demo.html b/static/usage/fab/list-side/demo.html
new file mode 100644
index 00000000000..0d9413bfd4d
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/fab/list-side/index.md b/static/usage/fab/list-side/index.md
new file mode 100644
index 00000000000..39a63819b92
--- /dev/null
+++ b/static/usage/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/fab/list-side/demo.html" />
diff --git a/static/usage/fab/list-side/javascript.md b/static/usage/fab/list-side/javascript.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/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/fab/list-side/react.md b/static/usage/fab/list-side/react.md
new file mode 100644
index 00000000000..b461d8c94eb
--- /dev/null
+++ b/static/usage/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/fab/list-side/vue.md b/static/usage/fab/list-side/vue.md
new file mode 100644
index 00000000000..2c42562587c
--- /dev/null
+++ b/static/usage/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/fab/positioning/angular.md b/static/usage/fab/positioning/angular.md
new file mode 100644
index 00000000000..e28150bea57
--- /dev/null
+++ b/static/usage/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/fab/positioning/demo.html b/static/usage/fab/positioning/demo.html
new file mode 100644
index 00000000000..df8f32568f7
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/fab/positioning/index.md b/static/usage/fab/positioning/index.md
new file mode 100644
index 00000000000..67888a3d99c
--- /dev/null
+++ b/static/usage/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/fab/positioning/demo.html" 
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/fab/positioning/javascript.md b/static/usage/fab/positioning/javascript.md
new file mode 100644
index 00000000000..27dec2c07b8
--- /dev/null
+++ b/static/usage/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/fab/positioning/react.md b/static/usage/fab/positioning/react.md
new file mode 100644
index 00000000000..c8eb95d0166
--- /dev/null
+++ b/static/usage/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/fab/positioning/vue.md b/static/usage/fab/positioning/vue.md
new file mode 100644
index 00000000000..f3421f2b2ea
--- /dev/null
+++ b/static/usage/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/fab/theming/colors/angular.md b/static/usage/fab/theming/colors/angular.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/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/fab/theming/colors/demo.html b/static/usage/fab/theming/colors/demo.html
new file mode 100644
index 00000000000..a78606bcead
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/fab/theming/colors/index.md b/static/usage/fab/theming/colors/index.md
new file mode 100644
index 00000000000..2c488459fee
--- /dev/null
+++ b/static/usage/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/fab/theming/colors/demo.html" />
diff --git a/static/usage/fab/theming/colors/javascript.md b/static/usage/fab/theming/colors/javascript.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/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/fab/theming/colors/react.md b/static/usage/fab/theming/colors/react.md
new file mode 100644
index 00000000000..c600aaca898
--- /dev/null
+++ b/static/usage/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/fab/theming/colors/vue.md b/static/usage/fab/theming/colors/vue.md
new file mode 100644
index 00000000000..44968e6cb4c
--- /dev/null
+++ b/static/usage/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/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/fab/theming/css-custom-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..2e8c0c2bb93
--- /dev/null
+++ b/static/usage/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/fab/theming/css-custom-properties/angular/example_component_html.md b/static/usage/fab/theming/css-custom-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/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/fab/theming/css-custom-properties/demo.html b/static/usage/fab/theming/css-custom-properties/demo.html
new file mode 100644
index 00000000000..d2ffdb2d98e
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/fab/theming/css-custom-properties/index.md b/static/usage/fab/theming/css-custom-properties/index.md
new file mode 100644
index 00000000000..74dfb01faf9
--- /dev/null
+++ b/static/usage/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/fab/theming/css-custom-properties/demo.html"
+/>
diff --git a/static/usage/fab/theming/css-custom-properties/javascript.md b/static/usage/fab/theming/css-custom-properties/javascript.md
new file mode 100644
index 00000000000..45d5f5e1243
--- /dev/null
+++ b/static/usage/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/fab/theming/css-custom-properties/react/main_css.md b/static/usage/fab/theming/css-custom-properties/react/main_css.md
new file mode 100644
index 00000000000..2e8c0c2bb93
--- /dev/null
+++ b/static/usage/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/fab/theming/css-custom-properties/react/main_tsx.md b/static/usage/fab/theming/css-custom-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/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/fab/theming/css-custom-properties/vue.md b/static/usage/fab/theming/css-custom-properties/vue.md
new file mode 100644
index 00000000000..373d97cb6ec
--- /dev/null
+++ b/static/usage/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/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/fab/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..b480b0cc455
--- /dev/null
+++ b/static/usage/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/fab/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/fab/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/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/fab/theming/css-shadow-parts/demo.html b/static/usage/fab/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..53997435f32
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/fab/theming/css-shadow-parts/index.md b/static/usage/fab/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..7b7ab14b85d
--- /dev/null
+++ b/static/usage/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/fab/theming/css-shadow-parts/demo.html"
+/>
diff --git a/static/usage/fab/theming/css-shadow-parts/javascript.md b/static/usage/fab/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..9ca1aa39119
--- /dev/null
+++ b/static/usage/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/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/fab/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..b480b0cc455
--- /dev/null
+++ b/static/usage/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/fab/theming/css-shadow-parts/react/main_tsx.md b/static/usage/fab/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/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/fab/theming/css-shadow-parts/vue.md b/static/usage/fab/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..9c9f1559805
--- /dev/null
+++ b/static/usage/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>
+```

From 6593fe8f827621c15503a30ea749c58533bb5152 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 7 Nov 2022 09:13:15 -0500
Subject: [PATCH 124/469] docs(migration): add browserslist content (#2636)

---
 docs/intro/upgrading-to-ionic-6.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/intro/upgrading-to-ionic-6.md b/docs/intro/upgrading-to-ionic-6.md
index 408fdce71ed..95b39f2350d 100644
--- a/docs/intro/upgrading-to-ionic-6.md
+++ b/docs/intro/upgrading-to-ionic-6.md
@@ -397,6 +397,16 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco
 
 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
 

From 8f0abd5aa2f9dbe174142461482222f96c3071ce Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 11 Nov 2022 11:28:45 -0500
Subject: [PATCH 125/469] fix(docs): deprecated message for props (#2642)

---
 scripts/api.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/scripts/api.js b/scripts/api.js
index 0de46959e96..470aadb449f 100644
--- a/scripts/api.js
+++ b/scripts/api.js
@@ -60,21 +60,24 @@ function renderProperties({ props: properties }) {
   // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
   return `
 ${properties
-  .map(
-    (prop) => `
-### ${prop.name}
+  .map((prop) => {
+    const isDeprecated = prop.deprecation !== undefined;
+
+    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
+
+    return `
+### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
 
 | | |
 | --- | --- |
-| **Description** | ${formatMultiline(prop.docs)} |
+| **Description** | ${formatMultiline(docs)} |
 | **Attribute** | \`${prop.attr}\` |
 | **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
 | **Default** | \`${prop.default}\` |
 
-`
-  )
-  .join('\n')}
 `;
+  })
+  .join('\n')}`;
 }
 
 function renderEvents({ events }) {

From 33fa8a4e56f287356988a1c8232f7ccf8adb9124 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 11 Nov 2022 12:41:09 -0500
Subject: [PATCH 126/469] docs(list-header): lines playground example (#2641)

Resolves #2638
---
 static/usage/list-header/lines/angular.md    | 27 +++++++---
 static/usage/list-header/lines/javascript.md | 27 +++++++---
 static/usage/list-header/lines/react.md      | 57 +++++++++++++-------
 static/usage/list-header/lines/vue.md        | 27 +++++++---
 4 files changed, 100 insertions(+), 38 deletions(-)

diff --git a/static/usage/list-header/lines/angular.md b/static/usage/list-header/lines/angular.md
index d2e2f3fb345..7feb30bd27d 100644
--- a/static/usage/list-header/lines/angular.md
+++ b/static/usage/list-header/lines/angular.md
@@ -1,22 +1,37 @@
 ```html
 <ion-list>
   <ion-list-header>
-    <ion-label>Video Games</ion-label>
+    <ion-label>Default</ion-label>
   </ion-list-header>
   <ion-item>
-    <ion-label>Pokémon Yellow</ion-label>
+    <ion-label>Item</ion-label>
   </ion-item>
   <ion-item>
-    <ion-label>Mega Man X</ion-label>
+    <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>The Legend of Zelda</ion-label>
+    <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>Pac-Man</ion-label>
+    <ion-label>Item</ion-label>
   </ion-item>
   <ion-item>
-    <ion-label>Super Mario World</ion-label>
+    <ion-label>Item</ion-label>
   </ion-item>
 </ion-list>
 ```
diff --git a/static/usage/list-header/lines/javascript.md b/static/usage/list-header/lines/javascript.md
index d2e2f3fb345..7feb30bd27d 100644
--- a/static/usage/list-header/lines/javascript.md
+++ b/static/usage/list-header/lines/javascript.md
@@ -1,22 +1,37 @@
 ```html
 <ion-list>
   <ion-list-header>
-    <ion-label>Video Games</ion-label>
+    <ion-label>Default</ion-label>
   </ion-list-header>
   <ion-item>
-    <ion-label>Pokémon Yellow</ion-label>
+    <ion-label>Item</ion-label>
   </ion-item>
   <ion-item>
-    <ion-label>Mega Man X</ion-label>
+    <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>The Legend of Zelda</ion-label>
+    <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>Pac-Man</ion-label>
+    <ion-label>Item</ion-label>
   </ion-item>
   <ion-item>
-    <ion-label>Super Mario World</ion-label>
+    <ion-label>Item</ion-label>
   </ion-item>
 </ion-list>
 ```
diff --git a/static/usage/list-header/lines/react.md b/static/usage/list-header/lines/react.md
index b48a05b05da..9ab1c69d35e 100644
--- a/static/usage/list-header/lines/react.md
+++ b/static/usage/list-header/lines/react.md
@@ -4,26 +4,43 @@ 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>
+    <>
+      <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/list-header/lines/vue.md b/static/usage/list-header/lines/vue.md
index b7d6980e400..6ec522dd8a4 100644
--- a/static/usage/list-header/lines/vue.md
+++ b/static/usage/list-header/lines/vue.md
@@ -2,22 +2,37 @@
 <template>
   <ion-list>
     <ion-list-header>
-      <ion-label>Video Games</ion-label>
+      <ion-label>Default</ion-label>
     </ion-list-header>
     <ion-item>
-      <ion-label>Pokémon Yellow</ion-label>
+      <ion-label>Item</ion-label>
     </ion-item>
     <ion-item>
-      <ion-label>Mega Man X</ion-label>
+      <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>The Legend of Zelda</ion-label>
+      <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>Pac-Man</ion-label>
+      <ion-label>Item</ion-label>
     </ion-item>
     <ion-item>
-      <ion-label>Super Mario World</ion-label>
+      <ion-label>Item</ion-label>
     </ion-item>
   </ion-list>
 </template>

From 5a742aa4ac3f474a79b6bcf9618b6c9a73a0cb05 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 11 Nov 2022 13:37:06 -0500
Subject: [PATCH 127/469] docs(vue): add event troubleshooting (#2644)

Some developers were unaware of the kebab case behavior in Vue applications, so I added updated the troubleshooting guide to explain this: https://forum.ionicframework.com/t/ionbreakpointdidchange-not-firing-event/226446
---
 docs/vue/troubleshooting.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/vue/troubleshooting.md b/docs/vue/troubleshooting.md
index 12e0e240ab1..1483bb9037b 100644
--- a/docs/vue/troubleshooting.md
+++ b/docs/vue/troubleshooting.md
@@ -114,3 +114,21 @@ In order for page transitions to work correctly, each page must have an `ion-pag
 ```
 
 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

From f510848af254d57810b54287178328b21ac512ff Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 14 Nov 2022 10:31:01 -0500
Subject: [PATCH 128/469] docs(infinite-scroll): playground examples (#2625)

---
 docs/api/infinite-scroll-content.md           | 142 +-----
 docs/api/infinite-scroll.md                   | 421 +-----------------
 .../basic/angular/example_component_html.md   |  15 +
 .../basic/angular/example_component_ts.md     |  32 ++
 static/usage/infinite-scroll/basic/demo.html  |  63 +++
 static/usage/infinite-scroll/basic/index.md   |  23 +
 .../usage/infinite-scroll/basic/javascript.md |  46 ++
 static/usage/infinite-scroll/basic/react.md   |  53 +++
 static/usage/infinite-scroll/basic/vue.md     |  65 +++
 .../angular/example_component_css.md          |  12 +
 .../angular/example_component_html.md         |  68 +++
 .../angular/example_component_ts.md           |  20 +
 .../custom-infinite-scroll-content/demo.html  |  82 ++++
 .../custom-infinite-scroll-content/index.md   |  33 ++
 .../javascript.md                             | 104 +++++
 .../react/main_css.md                         |  12 +
 .../react/main_tsx.md                         |  89 ++++
 .../custom-infinite-scroll-content/vue.md     | 121 +++++
 .../angular/example_component_html.md         |  15 +
 .../angular/example_component_ts.md           |  20 +
 .../infinite-scroll-content/demo.html         |  56 +++
 .../infinite-scroll-content/index.md          |  23 +
 .../infinite-scroll-content/javascript.md     |  38 ++
 .../infinite-scroll-content/react.md          |  44 ++
 .../infinite-scroll-content/vue.md            |  58 +++
 25 files changed, 1105 insertions(+), 550 deletions(-)
 create mode 100644 static/usage/infinite-scroll/basic/angular/example_component_html.md
 create mode 100644 static/usage/infinite-scroll/basic/angular/example_component_ts.md
 create mode 100644 static/usage/infinite-scroll/basic/demo.html
 create mode 100644 static/usage/infinite-scroll/basic/index.md
 create mode 100644 static/usage/infinite-scroll/basic/javascript.md
 create mode 100644 static/usage/infinite-scroll/basic/react.md
 create mode 100644 static/usage/infinite-scroll/basic/vue.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/demo.html
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/index.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/javascript.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
 create mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/vue.md
 create mode 100644 static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
 create mode 100644 static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
 create mode 100644 static/usage/infinite-scroll/infinite-scroll-content/demo.html
 create mode 100644 static/usage/infinite-scroll/infinite-scroll-content/index.md
 create mode 100644 static/usage/infinite-scroll/infinite-scroll-content/javascript.md
 create mode 100644 static/usage/infinite-scroll/infinite-scroll-content/react.md
 create mode 100644 static/usage/infinite-scroll/infinite-scroll-content/vue.md

diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md
index 4210400d911..2647dffdb87 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.md
@@ -1,10 +1,6 @@
 ---
 title: "ion-infinite-scroll-content"
-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/infinite-scroll-content/props.md';
 import Events from '@site/static/auto-generated/infinite-scroll-content/events.md';
@@ -15,145 +11,9 @@ import Slots from '@site/static/auto-generated/infinite-scroll-content/slots.md'
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 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.
 
-
-
-## 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-content>
-  <ion-infinite-scroll>
-    <ion-infinite-scroll-content
-      loadingSpinner="bubbles"
-      loadingText="Loading more data…">
-    </ion-infinite-scroll-content>
-  </ion-infinite-scroll>
-</ion-content>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-content>
-  <ion-infinite-scroll>
-    <ion-infinite-scroll-content
-      loading-spinner="bubbles"
-      loading-text="Loading more data…">
-    </ion-infinite-scroll-content>
-  </ion-infinite-scroll>
-</ion-content>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
-
-export const InfiniteScrollExample: React.FC = () => (
-  <IonContent>
-    <IonInfiniteScroll>
-      <IonInfiniteScrollContent
-        loadingSpinner="bubbles"
-        loadingText="Loading more data...">
-      </IonInfiniteScrollContent>
-    </IonInfiniteScroll>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'infinite-scroll-content-example',
-  styleUrl: 'infinite-scroll-content-example.css'
-})
-export class InfiniteScrollContentExample {
-  render() {
-    return [
-      <ion-content>
-        <ion-infinite-scroll>
-          <ion-infinite-scroll-content
-            loadingSpinner="bubbles"
-            loadingText="Loading more data...">
-          </ion-infinite-scroll-content>
-        </ion-infinite-scroll>
-      </ion-content>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-page>
-    <ion-content>
-      <ion-infinite-scroll>
-        <ion-infinite-scroll-content
-          loading-spinner="bubbles"
-          loading-text="Loading more data…">
-        </ion-infinite-scroll-content>
-      </ion-infinite-scroll>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script lang="ts">
-import {
-  IonContent,
-  IonInfiniteScroll,
-  IonInfiniteScrollContent,
-  IonPage
- } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonContent,
-    IonInfiniteScroll,
-    IonInfiniteScrollContent,
-    IonPage
-  }
-});
-```
-
-
-</TabItem>
-
-</Tabs>
+For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
 
 ## Properties
 <Props />
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 8515c816ab5..13bcc83dc2a 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -1,12 +1,6 @@
 ---
 title: "ion-infinite-scroll"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/infinite-scroll/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/infinite-scroll/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/infinite-scroll/props.md';
 import Events from '@site/static/auto-generated/infinite-scroll/events.md';
@@ -23,29 +17,30 @@ import Slots from '@site/static/auto-generated/infinite-scroll/slots.md';
 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.
 
-<h2 className="table-of-contents__title">Contents</h2>
+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.
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
+import Basic from '@site/static/usage/infinite-scroll/basic/index.md';
 
+<Basic />
 
+## Loading Text and Spinner
 
-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 `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.
 
-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 InfiniteScrollContent from '@site/static/usage/infinite-scroll/infinite-scroll-content/index.md';
 
-## Infinite Scroll Content
-
-The `ion-infinite-scroll` component has the infinite scroll logic. It requires a child component in order to display content. Ionic uses its `ion-infinite-scroll-content` component by default. This component displays the infinite scroll and changes the look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. However, the default spinner can be changed and text can be added by setting properties on the `ion-infinite-scroll-content` component.
+<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/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.
@@ -101,398 +96,6 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 }
 ```
 
-
-
-## 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-content>
-  <ion-button (click)="toggleInfiniteScroll()" expand="block">
-    Toggle Infinite Scroll
-  </ion-button>
-
-  <ion-list></ion-list>
-
-  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
-    <ion-infinite-scroll-content
-      loadingSpinner="bubbles"
-      loadingText="Loading more data...">
-    </ion-infinite-scroll-content>
-  </ion-infinite-scroll>
-</ion-content>
-```
-
-```typescript
-import { Component, ViewChild } from '@angular/core';
-import { IonInfiniteScroll } from '@ionic/angular';
-
-@Component({
-  selector: 'infinite-scroll-example',
-  templateUrl: 'infinite-scroll-example.html',
-  styleUrls: ['./infinite-scroll-example.css']
-})
-export class InfiniteScrollExample {
-  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
-
-  constructor() {}
-
-  loadData(event) {
-    setTimeout(() => {
-      console.log('Done');
-      event.target.complete();
-
-      // App logic to determine if all data is loaded
-      // and disable the infinite scroll
-      if (data.length === 1000) {
-        event.target.disabled = true;
-      }
-    }, 500);
-  }
-
-  toggleInfiniteScroll() {
-    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-content>
-  <ion-button onClick="toggleInfiniteScroll()" expand="block">
-    Toggle Infinite Scroll
-  </ion-button>
-
-  <ion-list></ion-list>
-
-  <ion-infinite-scroll threshold="100px" id="infinite-scroll">
-    <ion-infinite-scroll-content
-      loading-spinner="bubbles"
-      loading-text="Loading more data...">
-    </ion-infinite-scroll-content>
-  </ion-infinite-scroll>
-</ion-content>
-```
-
-```javascript
-const infiniteScroll = document.getElementById('infinite-scroll');
-
-infiniteScroll.addEventListener('ionInfinite', function(event) {
-  setTimeout(function() {
-    console.log('Done');
-    event.target.complete();
-
-    // App logic to determine if all data is loaded
-    // and disable the infinite scroll
-    if (data.length === 1000) {
-      event.target.disabled = true;
-    }
-  }, 500);
-});
-
-function toggleInfiniteScroll() {
-  infiniteScroll.disabled = !infiniteScroll.disabled;
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import { 
-  IonButton,
-  IonContent, 
-  IonHeader,
-  IonInfiniteScroll, 
-  IonInfiniteScrollContent, 
-  IonItem,
-  IonLabel,
-  IonList,  
-  IonPage, 
-  IonTitle, 
-  IonToolbar,
-  useIonViewWillEnter
-} from '@ionic/react';
-import { useState } from 'react';
-
-const InfiniteScrollExample: React.FC = () => {
-  const [data, setData] = useState<string[]>([]);
-  const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
-  
-  const pushData = () => {
-    const max = data.length + 20;
-    const min = max - 20;
-    const newData = [];
-    for (let i = min; i < max; i++) {
-      newData.push('Item' + i);
-    }
-    
-    setData([
-      ...data,
-      ...newData
-    ]);
-  }
-  const loadData = (ev: any) => {
-    setTimeout(() => {
-      pushData();
-      console.log('Loaded data');
-      ev.target.complete();
-      if (data.length === 1000) {
-        setInfiniteDisabled(true);
-      }
-    }, 500);
-  }  
-  
-  useIonViewWillEnter(() => {
-    pushData();
-  });
-  
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Blank</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Blank</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        
-        <IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
-          Toggle Infinite Scroll
-        </IonButton>
-        
-        <IonList>
-          {data.map((item, index) => {
-            return (
-              <IonItem key={index}>
-                <IonLabel>{item}</IonLabel>
-              </IonItem>
-            )
-          })}
-        </IonList>
-        
-        <IonInfiniteScroll
-          onIonInfinite={loadData}
-          threshold="100px"
-          disabled={isInfiniteDisabled}
-        >
-          <IonInfiniteScrollContent
-            loadingSpinner="bubbles"
-            loadingText="Loading more data..."
-          ></IonInfiniteScrollContent>
-        </IonInfiniteScroll>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default InfiniteScrollExample;
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, State, h } from '@stencil/core';
-
-@Component({
-  tag: 'infinite-scroll-example',
-  styleUrl: 'infinite-scroll-example.css'
-})
-export class InfiniteScrollExample {
-  private infiniteScroll: HTMLIonInfiniteScrollElement;
-
-  @State() data = [];
-
-  componentWillLoad() {
-    this.pushData();
-  }
-
-  pushData() {
-    const max = this.data.length + 20;
-    const min = max - 20;
-
-    for (var i = min; i < max; i++) {
-      this.data.push('Item ' + i);
-    }
-
-    // Stencil does not re-render when pushing to an array
-    // so create a new copy of the array
-    // https://stenciljs.com/docs/reactive-data#handling-arrays-and-objects
-    this.data = [
-      ...this.data
-    ];
-  }
-
-  loadData(ev) {
-    setTimeout(() => {
-      this.pushData();
-      console.log('Loaded data');
-      ev.target.complete();
-
-      // App logic to determine if all data is loaded
-      // and disable the infinite scroll
-      if (this.data.length === 1000) {
-        ev.target.disabled = true;
-      }
-    }, 500);
-  }
-
-  toggleInfiniteScroll() {
-    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
-  }
-
-  render() {
-    return [
-      <ion-content>
-        <ion-button onClick={() => this.toggleInfiniteScroll()} expand="block">
-          Toggle Infinite Scroll
-        </ion-button>
-
-        <ion-list>
-          {this.data.map(item =>
-            <ion-item>
-              <ion-label>{item}</ion-label>
-            </ion-item>
-          )}
-        </ion-list>
-
-        <ion-infinite-scroll
-          ref={el => this.infiniteScroll = el}
-          onIonInfinite={(ev) => this.loadData(ev)}>
-          <ion-infinite-scroll-content
-            loadingSpinner="bubbles"
-            loadingText="Loading more data...">
-          </ion-infinite-scroll-content>
-        </ion-infinite-scroll>
-      </ion-content>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-page>
-    <ion-content class="ion-padding">
-      <ion-button @click="toggleInfiniteScroll" expand="block">
-        Toggle Infinite Scroll
-      </ion-button>
-    
-      <ion-list>
-        <ion-item v-for="item in items" :key="item">
-          <ion-label>{{ item }}</ion-label>
-        </ion-item>
-      </ion-list>
-    
-      <ion-infinite-scroll
-        @ionInfinite="loadData($event)" 
-        threshold="100px" 
-        id="infinite-scroll"
-        :disabled="isDisabled"
-      >
-        <ion-infinite-scroll-content
-          loading-spinner="bubbles"
-          loading-text="Loading more data...">
-        </ion-infinite-scroll-content>
-      </ion-infinite-scroll>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script lang="ts">
-import {
-  InfiniteScrollCustomEvent,
-  IonButton,
-  IonContent, 
-  IonInfiniteScroll, 
-  IonInfiniteScrollContent,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonPage
- } from '@ionic/vue';
-import { defineComponent, ref } from 'vue';
- 
-export default defineComponent({
-  components: {
-    IonButton,
-    IonContent, 
-    IonInfiniteScroll, 
-    IonInfiniteScrollContent,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonPage
-  },
-  setup() {
-    const isDisabled = ref(false);
-    const toggleInfiniteScroll = () => {
-      isDisabled.value = !isDisabled.value;
-    }
-    const items = ref<number[]>([]);
-    const pushData = () => {
-      const max = items.value.length + 20;
-      const min = max - 20;
-      for (let i = min; i < max; i++) {
-        items.value.push(i);
-      }
-    }
-    
-    const loadData = (ev: InfiniteScrollCustomEvent) => {
-      setTimeout(() => {
-        pushData();
-        console.log('Loaded data');
-        ev.target.complete();
-  
-        // App logic to determine if all data is loaded
-        // and disable the infinite scroll
-        if (items.value.length === 1000) {
-          ev.target.disabled = true;
-        }
-      }, 500);
-    }
-    
-    pushData();
-    
-    return {
-      isDisabled,
-      toggleInfiniteScroll,
-      loadData,
-      items
-    }
-  }
-});
-
-</script>
-```
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 
diff --git a/static/usage/infinite-scroll/basic/angular/example_component_html.md b/static/usage/infinite-scroll/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..55469ab3c5a
--- /dev/null
+++ b/static/usage/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/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/infinite-scroll/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..390ba6b75f1
--- /dev/null
+++ b/static/usage/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/infinite-scroll/basic/demo.html b/static/usage/infinite-scroll/basic/demo.html
new file mode 100644
index 00000000000..4d27874696c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/infinite-scroll/basic/index.md b/static/usage/infinite-scroll/basic/index.md
new file mode 100644
index 00000000000..95ac3b6be82
--- /dev/null
+++ b/static/usage/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/infinite-scroll/basic/demo.html"
+/>
diff --git a/static/usage/infinite-scroll/basic/javascript.md b/static/usage/infinite-scroll/basic/javascript.md
new file mode 100644
index 00000000000..b61db4c6ae3
--- /dev/null
+++ b/static/usage/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/infinite-scroll/basic/react.md b/static/usage/infinite-scroll/basic/react.md
new file mode 100644
index 00000000000..c12032a6540
--- /dev/null
+++ b/static/usage/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/infinite-scroll/basic/vue.md b/static/usage/infinite-scroll/basic/vue.md
new file mode 100644
index 00000000000..856c421b23b
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..60c02b86ea0
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/infinite-scroll/custom-infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..03a1ac49951
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/index.md
new file mode 100644
index 00000000000..0ab9675d976
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/demo.html"
+/>
diff --git a/static/usage/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..721eb0c0ad4
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
new file mode 100644
index 00000000000..1139f55920d
--- /dev/null
+++ b/static/usage/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/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/infinite-scroll/custom-infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..a86fa6ed062
--- /dev/null
+++ b/static/usage/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/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..2e23e359257
--- /dev/null
+++ b/static/usage/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/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/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/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/infinite-scroll/infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..fd833a90d1c
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/index.md b/static/usage/infinite-scroll/infinite-scroll-content/index.md
new file mode 100644
index 00000000000..e6786d3cd21
--- /dev/null
+++ b/static/usage/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/infinite-scroll/infinite-scroll-content/demo.html"
+/>
diff --git a/static/usage/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/infinite-scroll/infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..6b2a9bb409f
--- /dev/null
+++ b/static/usage/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/infinite-scroll/infinite-scroll-content/react.md b/static/usage/infinite-scroll/infinite-scroll-content/react.md
new file mode 100644
index 00000000000..2c2b5f77b8a
--- /dev/null
+++ b/static/usage/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/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/infinite-scroll/infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..9b7d22436ee
--- /dev/null
+++ b/static/usage/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>
+```

From ad18535c9dc7d02be6a965ab74bf12f06830914b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 15 Nov 2022 11:34:53 -0500
Subject: [PATCH 129/469] docs(select-option): reference select for usage
 (#2647)

---
 docs/api/select-option.md | 695 +-------------------------------------
 1 file changed, 2 insertions(+), 693 deletions(-)

diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index 19496f85a5f..73dbf015e2b 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-select-option"
-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/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';
@@ -22,697 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
-Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](select.md).
-
-## Customization
-
-Each `ion-select-option` component that is added as a child of an `ion-select` is passed to the interface to display it in the dialog. It's important to note that the `ion-select-option` element itself is hidden from the view. This means that attempting to style it will not have any effect on the option in the dialog:
-
-```css
-/* DOES NOT work */
-ion-select-option {
-  color: red;
-}
-```
-
-Instead, each interface option has the class `.select-interface-option` which can be styled. Keep in mind that due to the overlays being scoped components the selector by itself will not work and a custom `cssClass` is recommended to be passed to the interface.
-
-```css
-/* This will NOT work on its own */
-.select-interface-option {
-  color: red;
-}
-
-/*
- * "my-custom-interface" needs to be passed in through
- * the cssClass of the interface options for this to work
- */
-.my-custom-interface .select-interface-option {
-  color: red;
-}
-```
-
-:::note
- Note: Some interfaces require more in depth styling due to how the options are rendered. See usage for expanded information on this.
-:::
-
-
-The options can be styled individually by adding your own class on the `ion-select-option` which gets passed to the interface option. See the [Usage](#usage) section below for examples of styling and setting individual classes on options.
-
-
-
-
-## Usage
-
-<Tabs groupId="framework" defaultValue="javascript" values={[{ value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
-
-<TabItem value="javascript">
-
-```html
-<ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select>
-    <ion-select-option value="brown">Brown</ion-select-option>
-    <ion-select-option value="blonde">Blonde</ion-select-option>
-    <ion-select-option value="black">Black</ion-select-option>
-    <ion-select-option value="red">Red</ion-select-option>
-  </ion-select>
-</ion-item>
-```
-
-### Customizing Options
-
-```html
-<ion-item>
-  <ion-label>Select: Alert Interface</ion-label>
-  <ion-select class="custom-options">
-    <ion-select-option value="brown">Brown</ion-select-option>
-    <ion-select-option value="blonde">Blonde</ion-select-option>
-    <ion-select-option value="black">Black</ion-select-option>
-    <ion-select-option value="red">Red</ion-select-option>
-  </ion-select>
-</ion-item>
-
-<ion-item>
-  <ion-label>Select: Alert Interface (Multiple Selection)</ion-label>
-  <ion-select class="custom-options" multiple="true">
-    <ion-select-option value="brown">Brown</ion-select-option>
-    <ion-select-option value="blonde">Blonde</ion-select-option>
-    <ion-select-option value="black">Black</ion-select-option>
-    <ion-select-option value="red">Red</ion-select-option>
-  </ion-select>
-</ion-item>
-
-<ion-item>
-  <ion-label>Select: Popover Interface</ion-label>
-  <ion-select interface="popover" class="custom-options">
-    <ion-select-option value="brown">Brown</ion-select-option>
-    <ion-select-option value="blonde">Blonde</ion-select-option>
-    <ion-select-option value="black">Black</ion-select-option>
-    <ion-select-option value="red">Red</ion-select-option>
-  </ion-select>
-</ion-item>
-
-<ion-item>
-  <ion-label>Select: Action Sheet Interface</ion-label>
-  <ion-select interface="action-sheet" class="custom-options">
-    <ion-select-option value="brown">Brown</ion-select-option>
-    <ion-select-option value="blonde">Blonde</ion-select-option>
-    <ion-select-option value="black">Black</ion-select-option>
-    <ion-select-option value="red">Red</ion-select-option>
-  </ion-select>
-</ion-item>
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .select-interface-option {
-  --color: #971e49;
-  --color-hover: #79193b;
-}
-
-/* Action Sheet Interface: set color for the action sheet using its button CSS variables */
-.my-custom-interface .select-interface-option {
-  --button-color: #971e49;
-  --button-color-hover: #79193b;
-}
-
-/* Alert Interface: set color for alert options (single selection) */
-.my-custom-interface .select-interface-option .alert-radio-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for alert options (multiple selection) */
-.my-custom-interface .select-interface-option .alert-checkbox-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for checked alert options (single selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {
-  color: #79193b;
-}
-
-/* Alert Interface: set color for checked alert options (multiple selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {
-  color: #79193b;
-}
-```
-
-```javascript
-// Pass a custom class to each select interface for styling
-const selects = document.querySelectorAll('.custom-options');
-
-for (var i = 0; i < selects.length; i++) {
-  selects[i].interfaceOptions = {
-    cssClass: 'my-custom-interface'
-  };
-};
-```
-
-> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.
-
-### Customizing Individual Options
-
-To customize an individual option, set a class on the `ion-select-option`:
-
-```html
-<ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select class="custom-options" interface="popover">
-    <ion-select-option value="brown" class="brown-option">Brown</ion-select-option>
-    <ion-select-option value="blonde">Blonde</ion-select-option>
-    <ion-select-option value="black">Black</ion-select-option>
-    <ion-select-option value="red">Red</ion-select-option>
-  </ion-select>
-</ion-item>
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .brown-option {
-  --color: #5e3e2c;
-  --color-hover: #362419;
-}
-```
-
-```javascript
-// Pass a custom class to each select interface for styling
-const select = document.querySelector('.custom-options');
-select.interfaceOptions = {
-  cssClass: 'my-custom-interface'
-};
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react';
-
-export const SelectOptionExample: React.FC = () => {
-  return (
-    <IonPage>
-      <IonContent>
-        <IonItem>
-          <IonLabel>Select</IonLabel>
-          <IonSelect>
-            <IonSelectOption value="brown">Brown</IonSelectOption>
-            <IonSelectOption value="blonde">Blonde</IonSelectOption>
-            <IonSelectOption value="black">Black</IonSelectOption>
-            <IonSelectOption value="red">Red</IonSelectOption>
-          </IonSelect>
-        </IonItem>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-### Customizing Options
-
-```tsx
-import React from 'react';
-import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react';
-
-const options = {
-  cssClass: 'my-custom-interface'
-};
-
-export const SelectOptionExample: React.FC = () => {
-  return (
-    <IonPage>
-      <IonContent>
-        <IonItem>
-          <IonLabel>Select: Alert Interface</IonLabel>
-          <IonSelect interfaceOptions={options}>
-            <IonSelectOption value="brown">Brown</IonSelectOption>
-            <IonSelectOption value="blonde">Blonde</IonSelectOption>
-            <IonSelectOption value="black">Black</IonSelectOption>
-            <IonSelectOption value="red">Red</IonSelectOption>
-          </IonSelect>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Select: Alert Interface (Multiple Selection)</IonLabel>
-          <IonSelect interfaceOptions={options} multiple={true}>
-            <IonSelectOption value="brown">Brown</IonSelectOption>
-            <IonSelectOption value="blonde">Blonde</IonSelectOption>
-            <IonSelectOption value="black">Black</IonSelectOption>
-            <IonSelectOption value="red">Red</IonSelectOption>
-          </IonSelect>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Select: Popover Interface</IonLabel>
-          <IonSelect interface="popover" interfaceOptions={options}>
-            <IonSelectOption value="brown">Brown</IonSelectOption>
-            <IonSelectOption value="blonde">Blonde</IonSelectOption>
-            <IonSelectOption value="black">Black</IonSelectOption>
-            <IonSelectOption value="red">Red</IonSelectOption>
-          </IonSelect>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>Select: Action Sheet Interface</IonLabel>
-          <IonSelect interface="action-sheet" interfaceOptions={options}>
-            <IonSelectOption value="brown">Brown</IonSelectOption>
-            <IonSelectOption value="blonde">Blonde</IonSelectOption>
-            <IonSelectOption value="black">Black</IonSelectOption>
-            <IonSelectOption value="red">Red</IonSelectOption>
-          </IonSelect>
-        </IonItem>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .select-interface-option {
-  --color: #971e49;
-  --color-hover: #79193b;
-}
-
-/* Action Sheet Interface: set color for the action sheet using its button CSS variables */
-.my-custom-interface .select-interface-option {
-  --button-color: #971e49;
-  --button-color-hover: #79193b;
-}
-
-/* Alert Interface: set color for alert options (single selection) */
-.my-custom-interface .select-interface-option .alert-radio-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for alert options (multiple selection) */
-.my-custom-interface .select-interface-option .alert-checkbox-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for checked alert options (single selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {
-  color: #79193b;
-}
-
-/* Alert Interface: set color for checked alert options (multiple selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {
-  color: #79193b;
-}
-```
-
-> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.
-
-
-### Customizing Individual Options
-
-To customize an individual option, set a class on the `ion-select-option`:
-
-```tsx
-import React from 'react';
-import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react';
-
-const options = {
-  cssClass: 'my-custom-interface'
-};
-
-export const SelectOptionExample: React.FC = () => {
-  return (
-    <IonPage>
-      <IonContent>
-        <IonItem>
-          <IonLabel>Select</IonLabel>
-          <IonSelect interface="popover" interfaceOptions={options}>
-            <IonSelectOption value="brown" class="brown-option">Brown</IonSelectOption>
-            <IonSelectOption value="blonde">Blonde</IonSelectOption>
-            <IonSelectOption value="black">Black</IonSelectOption>
-            <IonSelectOption value="red">Red</IonSelectOption>
-          </IonSelect>
-        </IonItem>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .brown-option {
-  --color: #5e3e2c;
-  --color-hover: #362419;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'select-option-example',
-  styleUrl: 'select-option-example.css'
-})
-export class SelectOptionExample {
-  render() {
-    return [
-      <ion-item>
-        <ion-label>Select</ion-label>
-        <ion-select>
-          <ion-select-option value="brown">Brown</ion-select-option>
-          <ion-select-option value="blonde">Blonde</ion-select-option>
-          <ion-select-option value="black">Black</ion-select-option>
-          <ion-select-option value="red">Red</ion-select-option>
-        </ion-select>
-      </ion-item>
-    ];
-  }
-}
-```
-
-### Customizing Options
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'select-option-example',
-  styleUrl: 'select-option-example.css'
-})
-export class SelectOptionExample {
-  options = {
-    cssClass: 'my-custom-interface'
-  };
-
-  render() {
-    return [
-      <ion-item>
-        <ion-label>Select: Alert Interface</ion-label>
-        <ion-select interfaceOptions={options}>
-          <ion-select-option value="brown">Brown</ion-select-option>
-          <ion-select-option value="blonde">Blonde</ion-select-option>
-          <ion-select-option value="black">Black</ion-select-option>
-          <ion-select-option value="red">Red</ion-select-option>
-        </ion-select>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Select: Alert Interface (Multiple Selection)</ion-label>
-        <ion-select interfaceOptions={options} multiple={true}>
-          <ion-select-option value="brown">Brown</ion-select-option>
-          <ion-select-option value="blonde">Blonde</ion-select-option>
-          <ion-select-option value="black">Black</ion-select-option>
-          <ion-select-option value="red">Red</ion-select-option>
-        </ion-select>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Select: Popover Interface</ion-label>
-        <ion-select interface="popover" interfaceOptions={options}>
-          <ion-select-option value="brown">Brown</ion-select-option>
-          <ion-select-option value="blonde">Blonde</ion-select-option>
-          <ion-select-option value="black">Black</ion-select-option>
-          <ion-select-option value="red">Red</ion-select-option>
-        </ion-select>
-      </ion-item>,
-
-      <ion-item>
-        <ion-label>Select: Action Sheet Interface</ion-label>
-        <ion-select interface="action-sheet" interfaceOptions={options}>
-          <ion-select-option value="brown">Brown</ion-select-option>
-          <ion-select-option value="blonde">Blonde</ion-select-option>
-          <ion-select-option value="black">Black</ion-select-option>
-          <ion-select-option value="red">Red</ion-select-option>
-        </ion-select>
-      </ion-item>
-    ];
-  }
-}
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .select-interface-option {
-  --color: #971e49;
-  --color-hover: #79193b;
-}
-
-/* Action Sheet Interface: set color for the action sheet using its button CSS variables */
-.my-custom-interface .select-interface-option {
-  --button-color: #971e49;
-  --button-color-hover: #79193b;
-}
-
-/* Alert Interface: set color for alert options (single selection) */
-.my-custom-interface .select-interface-option .alert-radio-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for alert options (multiple selection) */
-.my-custom-interface .select-interface-option .alert-checkbox-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for checked alert options (single selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {
-  color: #79193b;
-}
-
-/* Alert Interface: set color for checked alert options (multiple selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {
-  color: #79193b;
-}
-```
-
-> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.
-
-### Customizing Individual Options
-
-To customize an individual option, set a class on the `ion-select-option`:
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'select-option-example',
-  styleUrl: 'select-option-example.css'
-})
-export class SelectOptionExample {
-  options = {
-    cssClass: 'my-custom-interface'
-  };
-
-  render() {
-    return [
-      <ion-item>
-        <ion-label>Select</ion-label>
-        <ion-select interface="popover" interfaceOptions={options}>
-          <ion-select-option value="brown" class="brown-option">Brown</ion-select-option>
-          <ion-select-option value="blonde">Blonde</ion-select-option>
-          <ion-select-option value="black">Black</ion-select-option>
-          <ion-select-option value="red">Red</ion-select-option>
-        </ion-select>
-      </ion-item>
-    ];
-  }
-}
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .brown-option {
-  --color: #5e3e2c;
-  --color-hover: #362419;
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-item>
-    <ion-label>Select</ion-label>
-    <ion-select>
-      <ion-select-option value="brown">Brown</ion-select-option>
-      <ion-select-option value="blonde">Blonde</ion-select-option>
-      <ion-select-option value="black">Black</ion-select-option>
-      <ion-select-option value="red">Red</ion-select-option>
-    </ion-select>
-  </ion-item>
-</template>
-
-<script>
-import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonItem, IonLabel, IonSelect, IonSelectOption }
-});
-</script>
-```
-
-### Customizing Options
-
-```html
-<template>
-  <ion-item>
-    <ion-label>Select: Alert Interface</ion-label>
-    <ion-select :interface-options="options">
-      <ion-select-option value="brown">Brown</ion-select-option>
-      <ion-select-option value="blonde">Blonde</ion-select-option>
-      <ion-select-option value="black">Black</ion-select-option>
-      <ion-select-option value="red">Red</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Select: Alert Interface (Multiple Selection)</ion-label>
-    <ion-select :interface-options="options" multiple="true">
-      <ion-select-option value="brown">Brown</ion-select-option>
-      <ion-select-option value="blonde">Blonde</ion-select-option>
-      <ion-select-option value="black">Black</ion-select-option>
-      <ion-select-option value="red">Red</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Select: Popover Interface</ion-label>
-    <ion-select interface="popover" :interface-options="options">
-      <ion-select-option value="brown">Brown</ion-select-option>
-      <ion-select-option value="blonde">Blonde</ion-select-option>
-      <ion-select-option value="black">Black</ion-select-option>
-      <ion-select-option value="red">Red</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Select: Action Sheet Interface</ion-label>
-    <ion-select interface="action-sheet" :interface-options="options">
-      <ion-select-option value="brown">Brown</ion-select-option>
-      <ion-select-option value="blonde">Blonde</ion-select-option>
-      <ion-select-option value="black">Black</ion-select-option>
-      <ion-select-option value="red">Red</ion-select-option>
-    </ion-select>
-  </ion-item>
-</template>
-
-<script>
-import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
-  setup() {
-    const options: any = {
-      cssClass: 'my-custom-interface'
-    };
-    
-    return { options }
-  }
-});
-</script>
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .select-interface-option {
-  --color: #971e49;
-  --color-hover: #79193b;
-}
-
-/* Action Sheet Interface: set color for the action sheet using its button CSS variables */
-.my-custom-interface .select-interface-option {
-  --button-color: #971e49;
-  --button-color-hover: #79193b;
-}
-
-/* Alert Interface: set color for alert options (single selection) */
-.my-custom-interface .select-interface-option .alert-radio-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for alert options (multiple selection) */
-.my-custom-interface .select-interface-option .alert-checkbox-label {
-  color: #971e49;
-}
-
-/* Alert Interface: set color for checked alert options (single selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {
-  color: #79193b;
-}
-
-/* Alert Interface: set color for checked alert options (multiple selection) */
-.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {
-  color: #79193b;
-}
-```
-
-> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.
-
-
-### Customizing Individual Options
-
-To customize an individual option, set a class on the `ion-select-option`:
-
-```html
-<template>
-  <ion-item>
-    <ion-label>Select</ion-label>
-    <ion-select interface="popover" :interface-options="options">
-      <ion-select-option value="brown" class="brown-option">Brown</ion-select-option>
-      <ion-select-option value="blonde">Blonde</ion-select-option>
-      <ion-select-option value="black">Black</ion-select-option>
-      <ion-select-option value="red">Red</ion-select-option>
-    </ion-select>
-  </ion-item>
-</template>
-
-<script>
-import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
-  setup() {
-    const options: any = {
-      cssClass: 'my-custom-interface'
-    };
-    
-    return { options }
-  }
-});
-</script>
-```
-
-```css
-/* Popover Interface: set color for the popover using Item's CSS variables */
-.my-custom-interface .brown-option {
-  --color: #5e3e2c;
-  --color-hover: #362419;
-}
-```
 
+Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog.
 
-</TabItem>
+For usage examples, see the [Select](./select) documentation.
 
-</Tabs>
 
 ## Properties
 <Props />

From 488fcd5ec4bbb53549f745e5ef2dfaf0ae62fd5a Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 15 Nov 2022 14:39:49 -0500
Subject: [PATCH 130/469] docs(previewing): simulating a mobile viewport
 (#2643)

---
 docs/developing/previewing.md                 |  40 ++++++++++++++++++
 .../previewing/chrome-dev-tools.png           | Bin 0 -> 782197 bytes
 .../firefox-responsive-design-mode.png        | Bin 0 -> 654233 bytes
 .../safari-responsive-design-mode.png         | Bin 0 -> 659018 bytes
 4 files changed, 40 insertions(+)
 create mode 100644 static/img/developing/previewing/chrome-dev-tools.png
 create mode 100644 static/img/developing/previewing/firefox-responsive-design-mode.png
 create mode 100644 static/img/developing/previewing/safari-responsive-design-mode.png

diff --git a/docs/developing/previewing.md b/docs/developing/previewing.md
index cda9b539948..6c558d2d5de 100644
--- a/docs/developing/previewing.md
+++ b/docs/developing/previewing.md
@@ -40,3 +40,43 @@ With `ionic serve` running, continue developing your app. As you save changes, t
 
 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/static/img/developing/previewing/chrome-dev-tools.png b/static/img/developing/previewing/chrome-dev-tools.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8117d850b24920bc0f671f4d9362a92f56654c8
GIT binary patch
literal 782197
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%0A3I@VN!R
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%0A5M>Emu)(cr6*KOj8V>N|O&2+Q=zOpB7
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
N?{3#!&vyD<{4ZIG)1v?Y

literal 0
HcmV?d00001

diff --git a/static/img/developing/previewing/firefox-responsive-design-mode.png b/static/img/developing/previewing/firefox-responsive-design-mode.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dc07fdd8be297311bf47ce31a19eac772cb815a
GIT binary patch
literal 654233
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%0A7;mHg;2`tB!qH$uX>
z5BhvYghHK8)ZVAv*6xQQMIEyk=Kmq>J)oN0x^7_=5j>QDC`e0C6jTsYdPzc2P$@x?
z-UI}c-i6Ra&`^Y+h;%~l5D@8AdhemB^coNdBoIRTAI^Kud&mF(_kQ1b?>ELX7>q$E
z+3dacTx-rX*GsIi-43nK=$57nFlU8+PXHu>3=|{Kw{!~U;`f*XFqA1Rzz9<r#r-6a
z7&}<<wUx$8A8zk*6Q-hX(wBU2_9kZJm3PuNDY`$tD11igp=PHk8g7pAmT2tzoo+I%
zv*9A-p3Qk*@*Un+hi@%sK<|6gL0?=}xG0XF1H3y6WY-q5495mV@KT#im|A?X(zj?(
z$$RVRwm6k@w8gV29D}bzLnm1<aXwxoZ^M6w506ludSG8OeN~~Yxpc+&;j|sCq3n&C
z>+;cze;n^`QwNR=zOMN*1(dTnzkKG5XN8AGMPPs7`tNgYY|Isb4J`qZUqfl!qCu%H
zi+u|L3N^m(ddiM~?(}~coBw{<V})d&wy*sT(S@kC7n-v%oHVsVqUO0Y@tJ-k4UxPY
zlM)VtVY!|UYPA!cD2NTi!Ejr_Sa#=q*ej^(+Co?U#GuGrG=Pq3bP~lB1bq`eR;Cy}
zNlZi=cE*o9p_d*Hz5-F~<Ku>1SPSz0Cj2sf&nm7WHl<RAX2zchs$r@_7J)veI5yvX
zb6-|%cjY$of|j~v3*GZ7^kP2DDJY2nQlO<Q4ZDvo0cL@S3hxCWwmS>;mOcs}aX7`E
z_rg6fqy+TFb9?w2!FZw%K1<|oxwwX{!Uzns<rD_m=fyE{tLK4GyLS8B%Js98wi>UQ
zuXxEQ)CBR=uMM6)7Af%B_MdvwPw8u5|JTCltG}V6iFJ&9bDUTGtl<Ykr^k?dLM1S1
zm$5Td%>lN#5b#Ch^?x`=C`N9Zb{ObxxuvA`LD4~u=e*Altw`;7H$Aczrvso{v^aG1
zr2Z3@c=^7Ism|DtZU8)0I@e#_XEH~vj+_JY?R)?uVY1wbWS-8hIN262;+Dnj0jZea
zp%!ZIoCgdmdRZhb8WWuPm!yPFNOTX|rznNtc5G}yOXavq8<nFYxQskQ{UAA2g%7E*
z63ik9%=QZECeQLevFmB>#FWl<WLez^=jSJod8FYYgwCdXN-mq09#`>lQJyacmNKt#
zC`x0qBGckl{|M1nS!xZ=`PW8HrlYP3Y{>6AR|;&(Z`dW3nJN|90%*Y8UpOII>nvXA
z%8O{wEH)8Xe<NABHjA^CCa{;6>}dWXbpM@${db>;M#_1j+*6JVe|b<fev`Cpl|L2*
z#>!x{F=B@}`tvqxRkm{5qE6lT(pGIQ1pV72H;!myupBxuAvaG?3c&ccATWLN$d_uy
zBd-!Dqbm$cYr{=g-S)6_LVj=>pL_AcJ_v5F<RO9q3ff@}W*knPuHs?5cA4uj2wTdi
zC!6;%NtB$Ks@nkA%`ILmd)}_jcrd`5Px{bJexd{W3Z%3vV3WzmZ?FeIRwniI*tLK%
zAO@#%Zvp18IjwNW)D0_NY!l@BHH!>*os{6_qITUHC`AIN`vn`w>=U^+K=6_SOb%}(
zJ$?1e<Hh+w`Kngizc082d7kQL8ak5o&zW}f#VWktI9|CDzv|1aW-bzN{8t|L&o46n
z3oJK6e+^K%uNF%1bfZ^r2MA%Yu=sb2J?~s5#?T<U1p2)UFIPNC+XW`gVexWH=U7_$
zz4a%>N=<0hH<;(<gU!fvD-A3%jwTVG7ru2N6ziO2b;ZwGK=dHls6C~~z@zZ}R<b4-
z8aW#WjZ7}RN;^N}*m?7YbUKk-+{zZw9R&V>O6vd*pi)5bwSlE(!B_Zwb0ZZ#LE}VZ
zU>^XR$gBKyRUS;yu|iPvmbs?SY`-QX(b)z|S!O5S8H8N(?r3_r+Gf`pAc?#3MS{on
z4k1UcT)R*CgmAe*ecI?+yYLmqj^y>!(`87CuEtSD_V2%yJQ}yoRH;Vv5p)1!^ARfR
z2X@-`%A@e7djB38_RmuY2BvH;s>Y84qCn$iFdf4HU_H#C&ssPja!t$W3dEA~ogLqj
z=@2hpFZNbVYEX8WdCyc)S^a(Qr`F^w*xlvWoCgVYFOr~TL|LbJj6YY9^+&2iybX4H
zCUm;#;r_-r+bAy@-)3QHrPQCNo%yl@a_waSEsv+<#j7#;t5-ba-ZKgnjgjQWT!maa
z0me6oMRp-1S9MT-EJ!hk`FTq=%-weFk|OxN+Ymb(_RN*c+u0EZ;Tb19=+CKh&S2wo
zwYQ}YOz0Hg7Gb+6-8>)xfG}-9-}(tiZ_l4kkN(4T<_$3x=D8|gC}3)r^%qd`f6Amg
zuOR=6lj*Yo8)!^;R)D|npD)>8uhcL*^IN8j?$CXum6M6D4XC&v3s;IWmE(>a14~`U
z*iWM4*yS}s1}HwsW<}3DQb?#oQV7H|$kN6WUeiLt0hFkzHgxtGgi|U?Wl0&$$SJ*5
zqJ3D=y++Qi^B%Yfa=R1&5f7{Ac6pp7Y1V%?Yj2=b_u+{C%$v?8Q{o$GN$G-|mYI)4
z8XjtSAzRw8ovN1&u!1x<eFy}{&u^nNaez<{tQi!cyXF~eiiq?hfX=x?H4QEM0@RV?
zMAck$lDv<1P9Fz%T?j%CSj`nZ!fy^`3~;X50RR*Q6abRv&klytUPB1;rniI~K8+v!
z>#Y~%pBHsc;i+|Ph~?Ne7+G?I{%64dj(-&DB=skpQ5ZEP1ZOp;(9z<#vvlHsT1xCn
zOJ+1jEQH2q>Z`dq&sIyJlHd4nTNuO!S<Ji={Gg2|Q?ee}Q`yj<w>hB77<hRk7n|gW
zyZT-XHg;{zLepmf;WFFjl2d3odkF<XLeaL%rIz+l%l`UN=|VAvoo$M|gRg|SX+~+j
z>-QJYDN#1(2SA^l@iVdP<kcn(*dFT!0kK*VE$sOj0hfK{V|{1y;|+}S4T$e@Hn!9(
zNBBDgn(7ivg=APTostTNiL~lW>KnD(J)x2RM^C@|`Oi9^-z8DWfSD1JHyMR4@(`cq
zjl(pX;V;XSi>~0yGcj==#WjWudXnnwj9@`ss-KmizviDX0uIP4F$BfWCemiZQ@4-1
zi`CKaCE&J0k2Jr!fw5iFqDushpgW%}-o+}c{{GTqsR%{SZ`yV(r7!vPY~BTAqD=d!
z9wB_W<4UKC7ES%rGQIqHw5^(w6oP*U(%dCyi;G+}v0V8KI)0B|RXa;w&2Q!*3uJ9g
zXHm%6j5at6rS>ezM7CPz2onbj4e-IGfJA+18mWkNC*tADwV%v%gAi=@Jp4Zeb^qVj
zCx<cLFkl+t7<?zeqZ$HWkYtCr@RyYImDtQIeV@_%fmhQik@d*3U`>#_q2*g6Uwo}L
zLYlEN<0m;)#pV{HpIPx7wj{Tnv-UnAH^b$*vNC;YRX05;R{#tdnaC^ij-so@cVTp0
zS42`Y1#M;x1TR__q@%90?Gxn(#b|WYz<<n~*3AM1gOG>Mn=LGL?0a&O#E|3PGWi<8
z0|_Hp>Xh#{X`~+^l@c#;!g4e8`hqd|JaEaup!EEsIbr}aE*9?8iE?O@q<G8PuiKR#
zygaFH{*Rty1{R>!DNDTEKa=gzeAB5rOtE&6sGhf>4~z&^*0gUzt-rD*YIjKpZHJzp
ze<nn15etgS_A~G-D*lr0*<akI{+sCS6u(=a2d)}cUb-rNX>VCDL>V(;g%*8gBGq1S
z*>%u{uTD!L^=S}en<+b&At-5)P0$vI-3wTen+PXwbGeH&8uqAk-}&cQ177m7vp>gi
z=wa}TZD*Hp9n#oxHijfCi^8+*rzoQkK+du)8zRpSaShrT#sk4-Wo~K8Q1iNL#YqD9
zKYEgXGrwf3P8sF;x!3OTHOI;Ew11tw*sw@mR(veqD^lF*pg*!acA-x{pw6b?Qr`!4
z1+LUO`yF7ytgy*!e@R<rl07cMPjo@d&Db>;yL|%;{j`|UC)<NctoT+(!D*$9VJ_pI
ztJQdqcV$wR<8D75Tx+-{hZ;Ohtsg;39?Qw1q6#S8*-}I&w_zmDU4_`nS!(;>wT4%S
zr<t(cD|@NZLoC>z6vv<k{h<gvFK20XjwC?)uqF1k>i4CT;0<%JKCV4U0wiVB4Xkti
z1-DfnQTN^gI%~)B|BMFs|3gr@AJ;XEpRghs*CYj#9G$sD=8{L_x~Pc{^HPj!hl%>U
z%RnQ7G)c2h+<i~PCVMyTvh`g7xZ6;jgORg_i@207+o;Meo}le>5NzJ3A!If@*BiU}
zF}zfA8qNKrX6t4+^sO+g`Ra0pB09V7z;)+sDYf4%Q#ys!cgt6vI6Ll0i%Q@3f?hmD
zN=X@_n#+TFej7n`foEn0KI)J(r@k4xcJy6`2+?U^T#{7|OZkNZN^)4m7c`7~UcNGP
z?K%iK3{LqXbSIs(AOP9Qw1Eova?dR<N$}kN<8STme+(Y~1vCA{5y|;J)%`XaS!uKK
zS$~oyX)APD@VF$q9gbHeHORJ=V{MRx^j@n)tuIlOzid_-KcIw#xm%v)PUXtSAqpu8
zY+kp>%eMLgD14p};lkd%tVS>#cWb>Ku{xI~yP_}Eo>!U#GAemDpTXqM6V2FdSfl<s
zWJdnww^1r)Dtg!aA(cOz3_v_yv!7MO{8QcHRHVma*@w-P+8=xnIwyJ&p;r5wCyd_@
z`9+k?=Dz#y;4Ib>=Z_F>SbodZo+&7PA1FHWTIV{R4BP!5Jtv!lwK~;{VLicEPJ>qz
z`r}h>#Y3-xfi5(=$yztjgm<vm{)VxMA*Qv2F9~divr>~i{E?FlJ0hDQ=7y4XMUD5g
zFi@vq)373K-;q~B<2gB(y>l>0dTyUX^{#T?%@sB%SrT<B35Yx;))|RV1nC_(zD=Xi
z;Ak=Bhj>ljT`ha>8_|FM)2U1+ivQF6=}aW9jpm8{)>lgnj2<aieqKe;tyq()+H72a
z72?f4uN)+w4hRH4D@zf}&JoFXUWcS@d^jH^p`(K*q_+ND;rYM5lI<eo0DKt!LD@?p
zT<?K$`fJV<EPzi6UwzR=OZbfETZDGiEX9lU9Mc|-<PRO$wd8CV*5b)L6PhMs#TiRa
z84sdleqV|fuAR+25#-@?u#%q7P_ZR>@(H!QZ(%;`6+QR&=0iVGkl>xMi+SumCGYMR
zTms+kZ@+#g-yi)@8OjajL|F-Yy#2JOa=4InxuL!H!>JHiTCw@Ae5iO!3a{|pd}h2&
z0lVMI06=_pAu3a)>R&{(&a}C7nJgvOCBcPCwpY5>v;fcZ)WTzw`QiuK(h9wQ2iZ84
z<V<Jz?6?x1XMI?PQc5Yd^3mFV)Mw1pX(nNG!r-K;RBKFrhuR%|{MSi*86#IccD{CT
zx>s3wwOMkpMIKYiLBbjI<}Z4#Y%0bK43rcY+qkYV?{yW*lD}s1$GhQ$G1<Ld-4>(p
z;r7s%t%Zgwp7*k(>)%`7Qd(*<S-J{xzwhpR$3w}|JI107lDOui*M~qZG(e0(PnK=r
zAw(CXE$gBSO`qk+MT6Y^zoVdvZbbPm9i;ciVI6Utu*b!tX3$5th!p#<&QV2oU+?u(
zi3MYY-pe0d`=o-Ro~zIxcgT0<FcVRcp&&!K<!wTRXZeWsoaJBX>uHvkjQ*Y&-22Y)
z0tz%&YGKXhKfrqe4E~HpT?$#a;q|gX*)quRpO;<o`Lh!M<O5U5FoqTaWh)~#1(9!Y
zl`$(AZETq(k(|M6Un1$+%!9uh4Usn6qhVp=?k};_E~w}pU1kDGQG?!JJ9_i|Hk~HT
zzC&cJhV=I?W+imLf>ibvx;$_Z>hymrds9N{Cfm;YUcP$1zB9k(-<;zbQapc$fp|(m
zciR#9a)%<%^9A(?0+xZ;Kj0#Fgk!hbEGF9#f^RWvqRXpPSAopc3R@Bpi3HlyGGGix
z<c~UU(L3Zv{gKK?W5m-LB!cE-MYnSf%<H~YG=wC{pDMjp-8LX&EO&W^jyC!4up~Eh
zzB|d7#d>iYt@Zb$uzwV;8U}eZCX0=hCrT=y_OG5ftN)p4_zSc6e<h>e8wbd^oHljl
z0z5pDY~m`HV>6HAp@+jni;@xJ+L<R&ByDqk^}`=gP6c3lWPt_0u>wQO^Js`W4nR1g
zupUJ&&(EQL(*u4<BW>@QQ1G{y-WFAWrtOpmzQ8GSxQy><lkj0Y2+9bz98bH|)%4-H
z&ZO$VCphuW?O-i>DaoKy$vVbFTCbI}0wT?T?uJobS%?13!NWh&lW)#9V19<QWd5Aj
zk%hfQfl?D*F&<9eQ146Dg@Qz+77#G+r!qEMce0j3f2cm=?MV@<WLoI2QyFfdqjhm8
z#Gy487ylPzW>s!*fa!8^|M>Uu{qH|Xc0GH*7dTk#%6GD6x=(07mpiZ_8S%~3fsdTJ
z(E+WV$l~jGn$e_58!<vxtEz*Th|id-rcEM6$!!v$p5!{MEa=q97Cjy(b!qRG@zGj`
zKh!AC%1{J0#%#uHwoGS*)wSGX?vfist`WY!PXZVxqHJy+`J1nP8WXM?9`!BOl=Rb$
z2TJP&e*06F36c#~0JR9td>>yG>`bdQBSd3I=A$vQ&!}qObSjGzx0don_p{tw!LA`;
zT?dM0YO<byil%5JNpdUXfuZG5h&g&wmCVfl1niuSY)M_ctXz+7?PV`c=7Xj__4s#d
zzzseP%}So`Bi(wNO9r)nQCR=1u5?4pzp%Db(UWGkA}TI#`$V4E5FI6_SM%mij4-#y
z-*O_XNZX@%SNACq_G*&v4bXI^b~v_1Xp4r~pXE-|P3QlT(EKV4yEd=GKqTV@rQ>JE
zvOI%$(Fe2lqRmX`fmy~J%4*g;vO0=~yUib2u6((C-wo&~@Yam?wlJT%dPV-`eGtzL
zq~xhnyafSjN6RE8@<5PqwezFCe8|Ou4yxy~Of47PNy4X=>B%=hgh2uR;xR%~c+#kL
zdwBf_5@rcSZQXSdS_tm?seD8(T8t$Oxja+`%*4<}ZdI*r_3QxR)-`$;`ZvF?`ux$^
zgPnlu%wK=~2LSxBN`r&^joSz-5nyHgg`xgmsZ9&67=?%Q5$w5K<}^y+3<G%H=x}Jj
zq#a4aMhT6f6b$6$a6k{o3|};aCpV#LiSrsCtWC3$?vtWuYOQBbU`UIpCbqJdO)HiW
zvL=ner)m217A%EzsY>#~XiE-4SG&-9p04)euIkRE4_zZzsrlu(?$cN(y?OJT<=ObW
zFw{4JT1IV0?!n-8&P@on;$CcV2Fb!o+h;HRXdq!cDiS2$bM*DDxsK0P#$IvWIjbeE
zG3J)yFCd$RL46l}j4tk0Z$O<UmroWN15a&bW16=5yL5T|LJY~&EgR>+u0kve_)mZq
zP#XQ*QdnhgGob(PpEky21XO>E+Rdy_BoBx<ur;y<Xckq<O0u=hU%_PVtGHVN5<sNQ
z8EM-sP4G@W^UCLF4qC5+?5K%vmLvLmIoPAuE2+80;3S&wg&#+F_*2<AeYc(%uMM_Y
z^oCEmLaC6!Tj`|Yk7+HbFK(-Auw|ooG2q8EL&ik_*#SxrCEp$7^KChE_RibPDW#&c
zArv2EXDp<z$(RT5!S&6>jxB$}ML|lLa8_Yhm?+Ky9l<tGncYz(spLDqbmpwPH*?D^
zMs8T*-0~dViIn7D*i&wZ*86Ul3G}3_{?DJTPYt(LGj6}``uf%8UxMgwVrSggn26^B
zV+r2GCqsE^8{d#Eu^H$t+uKHjA9TY@J*poLUa}5>x%XBEEVIF|<tQrneJOym5+UJ6
z3k(ke)a&q62$wY8bKlY5jbRgPOV9g6(n-NjgtlfCeW3ODRraVzE?Re`(05d&+C&X$
zu03LeEEkgTCVXW1MQB&|`y>?2A8(DEC>kC9;qnYhPKDW>X2Aofn-~D)68I7N5ct|d
ziXcGR>i~jXt7XICQBQ)}oJFLc=u#iTTi;|!S$Kt&jT6Z8C&Nl{pZ{K=H|GU|fmRj4
z;E3P<e1Z5hkbvA?1DV+icq2YPW1@e?g04|tv5FqO<Og6=r+$7l5m6}4x;+bI$Uwxm
zj3nvx3^fm$6qG}<Q8Kw-4d-7>D<@FOO115_nDZ8W*XT+1=2i$liIQt!iYRy$QLjI3
zNY4!nR4qP@v`LWKlt}};^YVSM!+w~NHV|ZQri%kZWS=ebRQU8XXlq$c`bMRmNYVLo
zJ-b|7M#bsHV`r6^E~a@9UzOAm0fAf=X&|p|wn&9Te@>a(IfFD1i4dEQUX;s{bmkcz
ztt8+Yv}=_3{k9@Nm~bcCJLU=tLHJJXL;7aXzw<d=sgwS=PJ-0_&3~@dm|z8Z6kZx&
zP>4UP;9Ze&dTSx;V%a5=Z|-ER3tA^<)yK(WMH@e;oz#j3>T4_f;Q-^xe-7yL5;e&Z
z8~zXm@(i`h#k9_#(p{>wxxIDGHEViNVfr~>_`!h4rrN5x3bo%s3{csHE_LQn=07?Z
zmZ?7M*M9_RGnGnCUVby7Nteho-4~~4Wtur-jBSem!$;`lgS%ug#9VBvpSOP-_|fmR
zj?ipImj_&w(@l`?=u*6+(pm1k1%B{Y2Cp_L7Lc!QU)i$Ag!KX1hW?y$gl1QCTA#A{
z($8<nO3LVy@%DcmwltvSGUbV=_&<VC|N5SWr@VktLxrJ$<%G9thz|c7rnfZ*AU>Ge
zbKw^<UmN%g5+CP98`h5CGg<*!tw?0Ky6}Ty7;f41^cA6PW7`p0DW<Ldyn;!mS*-vu
z&lrLZMAH5Jnp5m3e>5@oJJ=73*?NT83CSu3*aCqhL+NPCB#0&X9@7ES!ZX+k-H7E;
z&U_EOL33i0qsO_%rqilO?l|^DU%5^BHYx#QtHFR7G$xKfXvzdd_;5hV$CEe)vq-_3
zK3mVzX5a<F$JxD@cZNvt?AYpu`Onj79Auslfih-vIEB{gIhN8Lay<*r)J7dhvigAW
zb8(9bXBPW=W8Lvr0(=}4(q7vB2PFgl45bD(rY{`&{3jU0Uzpo}Yv;E@pM2uKD7-d#
zAXy$JstwH*!0;8_!snBR-ktSkqT~i^@rp?;OCek`YDb#~q6=bXJ#2>~lH%qSpT_qF
zK}w%N>W3k4+~_#)K3WKCS|)vR_PrlR_`!*k`2`j&5<ZQe(Ihd_2RT_`R~J!qvC)(X
zDrm#4jye|tj*zmOZlg)uDrz+;?(F(-gH?tJw~U7NFqe<R3iuu0CQ)vDksa$mXZxD!
z6g|rN`Sqh>UsJd7UQFn24%%#?&p5T@j*DrEIhT)>YIaRd)l+z$GwI)bVErfa+<{hO
zw|^R>`X&8w6nENRqk<srswkBED+$fHD+1pv<kwj960}$>eV?(w;=7{-4dN7lrHoVP
zfSvs0B4?(TI(0mN1~ycPXY<@yF@+&`Pu!#}B|~rf2MVY;M2pOYPKVymt}l3rW&m!e
zd2H9|Wi7<r?qOvtMH+OtAdN5_35|l+b%ug$-Xm8AR`hi9>Hyf4AM$8*4!!)L`=OK1
z7Ej!eVds<0my4KNW8Fo_by*&op_x1Qrl>G!dhZzj_hF@A?GiKM%u8&gB%9Z@0xT%n
zC7aJTzax#3pCgdG#vasg3kBdOkj;t~4V3L{c8Urkc{w3J6eCvfo#Q*|@^39v?7+?N
zI!IWejG6z#2k-ukt&*L9$lWi=d7@|gM-R_+je$xdU9Tbal(}2hCXWk@6`vomiOmE^
zEWXRFe6<=kE_xqWL5@_j#FIdfpK!KwmXis|fOmEErgS)U2L~j*I#=(y{QJxr^U;;O
zQrqQ~q|82j@dCo5{gw<gUKMksXiyo;o{KehFk5Jf`-xx5EOZv>VuPehD$5(Rx9K0{
z_NY!(S{Jp^4Csp!hY>bKtq7xqPE7AW!ct>-OKL!=r2K{K02iK-Ah5a(z9W-n5OfOW
z?YI^@M8gZx2sRB<gXKr*+|BhD_NDb4utCsYh1%Gz<y?QF=GvSG^TKHY<2T>;1{?Lg
z3xiT!fq0Ian`0?k085x>S)RQr;&X5iZ=Fl~cjEYeabs%m^n1nk)_L~_Le2?YQT6c`
zb|@1JKe=|p!|ndH@0fw!*E_N>()^#AGqIk2;P~<vD0z)&xgp1A#kaN6;9j;NSJ23U
zft;*(4*Wu^a?fb<EhVu{P2nnh2|xCL@bS6k?S+<1WOGq#rm<7vM_rr_L(2orBg3y5
zRxiSyYpUvFIL2Hpf5&RUh2n*8{XA%Y$IL~~{CSq9KLzK3=AM~eCf)(iT@Trur2<fp
zEeBa>=ff`cw21GuM6A`+<j5^WsCo4yP{k*S2yH`QD>O~lPan8R$&;e!OaOgV=(z+P
z@fEQ-beR9LpwVm<!kelQ=<QKxZSni-MrgQj;#qTndHnl7+j|XX8?Ak00s#Ul=03}L
zRfq{YEZ%VZ{zlYL4;zzqZ{IJ(pA$V9P8QEm^_yBq0APC0SwMG|7&fFBmW@gfb0;nj
z^A}E9+b)l1x%{+L5Ed_{w=RxOKMILfgHB092mpm<IM)7M4%6!tkJGgK9Tg3=!2y#m
zP-<eIl}VcMy-_3l;qnRh_n+|_L|T3NrY%_meu#SPl4`#E{iy-cW8A+n&L3#Rexoo{
zhrhv>y9N5{al2ycdYSIv_R0nS-b_F=mWyEYF5=D4xjw+*<s|5(#F1t=Z`ISFycZRq
z!ZN>pQF#N%8Y?~J8TkHvmo|K&6-3j~Zm4pztwTJ$JczM0U*~?8&gnFr_TmClcER7$
z=O*m`DW>gu_h!nsUv|xxuJM!S-kHWv?BjnbnzUKZEL^f6q?)$@-kH#$R~wQxV#=##
zZ;^Roa{>JZ;lj1J{8Dt6Apg<423*q1dn`+AK!D%I`Cf>5T5b~L?yzMMpF}FKVCIP<
zRy}edqs^N2lG=6MLHJeALCP!ptt+n*-)2(#ITrya?apcu*Jo6OI;b@XWii6@9-!|b
zUw7WN8}BVN8Ebr|0!$?$*EN0Obc*MB%kS?Em6*+?o_cDle5-lY@oz5x6gDZEqw}Uo
z&z8#X{3y<9+gym2-jTi2`d^3CL-qf)g20?lNUsO{Cvu9k*Ag&W;>0}DPF2r5f-hDt
z?(q7j46$zE*>h_Hx4)&Wb_`xSLua->68NzsZoXPD(XuC&y|DT>Vx~SVskhS}?z-eS
z%bbO>H>wiuGJjDDGziA>zLr1vJugencK#@*gVMNhfI*Vi!z-Qo1ptgJayTe@$cv}a
z(e%Lw2vf<ULG`soN`v4X(R%NT@xA#uSR{}tT!Z^A#}at?e%nRg&J{5QGS{xC>gPse
z!CY*Ov_r1d?P|*{0SPJ2E(FZ>11sGF0|Dfnt!4kg1Zf^|XaYDy_f1;X3hbS*-@-6e
ziH^6lvYR#p{s<qc?sk#prS(@GAIlx2kmVLY^000UbRldk&)eYSm1U{8mu3?!4nXfI
zLAG1wN}{jBYyh*a$f-9GPK1*VwLb&b{WD#&XB1}O(}u<EEdgrh9Fh_@dWx|lGD}4P
zh(BmrB(4ggj~g^Mc*1Ne9y<Ll&<T9B5e|Z=A15<oAK+|AhBCG#d%dQ*H7^FVF?Iu*
z2LDhna?0P|i|{M^%Oca|<Cj0G-)wGA9r9c}<|bt-meDR9FMnN>)qms-SSDY)oY;I4
zZM136oUr>?`NWW^Hw`5Nng#L>r6WXS9+rc9HCJ*og)Ko$dM9YH(SF7lX-TQVDTZSx
zH67@7ARsKXA&Q%acGZr{fhH7@#)QQeSW4~{xaFR;5(*>4#)P<Sou=cn7V^Z`TMJ$g
zit(QNx~K5<X%NSrSY(N$1W14z)Y^|qk+hUI9cg0D5<^}K!v=ZDT|k3P4xXW<xO0X5
zrUhV7I?vC%LM5emb4^)NM~;u7r48-{BBA%b;L)%a7^ne$|Bx=Fn`X6svF#iXR@0yV
zT?^p5pc}`=RN>*c(f*^U7X6devM(_f^Rkb7hfbN>_32S26$izka(7~LtmL@Yr^<aD
z%s8<hbmyRf#l^@#*Kwpoi0odw^lH7bB4~3+vk!FW1+uo!{>!@HzXb_jSWciBj9doH
z<Vwt$Yt&;)`UGt+i{H3-Jo#GNmwo2bcA?&)A8M73w&yt3Iq*-EkPQgfc<4j>c8$42
z^#|D0Sl~dYS;-jzBm`sTOJ7d|B%sgGYc;OBolgMKSuvnc;edL&dY-BUWCN^CAJU6+
z4Y<$<YhEFra|;>_mL%*pSMw~8<|uGc4X_iQ_~4!~;yTXELOL^Q)<S*ef6VLASUby6
zg(HKA&sX$Of;;BI15GQkYt*cek&vY(R?&r46S29klloGzmr!ue5NeDlKSb~;R~tCq
z`W8gw)8ZGj<#>!1ItCy_4GnGO1`n#%8oY`qz5s0wx7iygk7@Wr{dsrAfa&}YI*?7d
zmdUdB;OYl%xU|>ocPfcLepO>Hl!2?%fHzm$6d}(k_SkG*6aAtL>ONlm1j2c;KW)#b
z07LwO_6rT>XHPrGk{3T(iBceTlb1zqeW=)&IDl`;C0QPt(j;Bn88bZ=C&(MRE_lxD
z=^RHUzB}f@Vf&K#5?2?!3iFoQs6&sXwqJ*R&0bmy`#U@PSHAUs`q<#i59DD0bu=+S
z9oU7fzj16<lP6Sj(<^zXS4KL1?`o|`os;@D<m)A706zZV!6@c`=}m*z27>N*A2s#D
z$8W>uPC+{2+xo;RHHFr1>(HgCYBgVH@TYp2EA2M{6Q&WapAQ`5V%YNfqt$q!wZr-B
zL6&0UC5Zi+@gehq?_d*TO=+tMAujD!=y#eYU>rXrmA%>)PZMnfTVY>jw!$KtS=x+!
z=EpL0d=}JQGTjy+iXtCPs+6M_uNX_Wq|FK5X1(xD+x5<t<MV}!qTCna&vGl4EA_9M
zdP>4Pz}nBxa&jsNid){dan25hUGol#6c(WZQXONl9CSK~Fpwmcs=uri&n_b-CE<lr
z?u&3hDjgQh{J6r13+ehm<CNP}<-$cc(^wO4ou@gPZP#?qWrS@enk|W?ETm_)joZzP
z6ZYzd)CBo;>w9#TA6Kj$r}Q(&;};8`syFI+4Sjw?6gB-;rlW(0>O7Ss$$2Oo)q^Ax
zqi1BctS5-D9II`>|Lyt06%9N<o??9N{Nxg5_Le*h;JV5Ndf%pUHlC3^Zk4rs`fB5X
zU;Pbl(YdCd1%4R+ne?Xm(RnV<=fP}kN6X1~_<iZlMT2_xdf%z_`i{M-7M@*Ip$+9J
z{%5{s6M`ov`AB)_3owE*PDCWZee&-3kM*JY4P10TVYghz$isYj<lRPtk@zgoUh%#p
zFGkMbTEjxX3_mxAW$%$$4jAh-s?``|vq8KbnDMw$v}1MhO+!HiP}~nwgbs?{ANtV)
z9*CR7Kl7k_YZkN8ri~Dn+O+D&_JHH#3Wf}qnVoN7kX-{^z4`?56U<LqFX!33qt`p+
zF6I5~&g~*4>_j)M=fyUCq%G|}@dNo2DkYR{*z)4;6woupk4mC3D#;*g^r$mYNmekX
z=z$br<0Or@E%}*VvzN)ve9+6%-WQv|oRvhyC>WJ{;ANjv^Y;O^_Orp=ZZe*}xgD5R
znnro$d*Et0OU!T9U^8t+xWy16)Azq=SG7jVHak5^*=RFgntayvsP1gzLV!b}lfqFC
z$^MMP1j>E?mxNV#USSn-%&iTo9j8KjFi7a~FrChL(uboG^JsW)n&{E-yy-iq1?AO%
zgRQqr<JftJ(cMr94&lR|OXI>UD+^Q!2PHb7C<(rzr_48i*+Iryo-GV)sMnbv`t}OO
z%?li#de42|F<ASw8du`620+3t`jrQPYA9RgUKr`E1qI?WD6)F>J8<)Uh`yz+supS_
zP&oF=(@3FWdnUdq3)4sItwgi#<UuH|`@HWNwcV)p`uMiY{vxOSrLv!{)dy0nR$YlT
zFYo&AX>B*w?71}M{?c}E3LoFLeBYV7XIi=rovpv0ek?si{2Ybbp7TrClU>y1{T!Wf
ztUvIL3sJwN5u<YnleWrX8Xsn`b6g&${VGMr;>GT~z;W-zRqVL1?bz#*cdZsRaXL~G
zvWIv@JsiUb`^9sG^@Mv;-@S&i-k0;$CEzA(r^`%xaHD#BZbpCJ-T%cM6sK~MzN-iZ
zmbsqxulK7v*r@LT&#n#i_8o)w>#?$ze7$hO_YT?l6S#MN67qWd`dO8LdJElmsqVAd
zr_R6+##d&7k7eVakID;wH5DuSq@^RowmOuzj=ukLpAax~Ctx1O`RQHXpON}FG(@eQ
zQCPVz<YjgEIivT-pf^wy21+hK&eklCaaZFas*2=|#)<h15kJfYw4-Zh2N&tg*lFv6
z%sMi<=mzIPjl_nITvrCAbJ1ZbK8B06^W;^%!6Rp=3cgF9R2+%E+>+AND;G1611mX*
zjS8jYN1^mc8KJpf&Y#y8;L`B)pyk%4QEt-*<*r|b@yIg=Wp_HC2Km*k8$sy3aKT+%
zw3X~Z*3(&W38=U;x!8!TI-)cSq4^2Rqtz0fMAx42oUD>3G;k=3lor2GNdoyP=HP3a
z1>YEvi+fIg>3){Jq<dJ}E>PPG*G(QuwF9PI>`lk;B7(5hQrNJhGCS_oQVFGZPK4XE
z?VZl&O;u|&93R)@r*fhX2EVU<1THwEv~rd`_Wh;XqgLi4Yq9LY_M%{swLnMG)KScD
z5=xjSDA0;UcaQcn;0~czFC|s)EvLC(L~adudVpfDdpA4zu^i<Et`zgyK80a&P^_5$
zSuYd~Qeiv)*zL4GN*5f>R7aRoY)pU6AIL!CecjM!CTOAY>+l2k;cTSia{23yLGbJ4
z@}`?jei6~S3AbPC2eS>q;w~CrK765`>=lh`H2%T$X@gT=b#F8A4steob8iiy=*Dmi
z=J1<w&|$4|Grms0R{JQDW5ufH@T%<g1g~l95~RgsXAf7$lPKeQ{)c^yfv!UjL%OwV
zVNL;KU;W;Tn1k;X8r5(7e&2YwzZFtMIA;*3Mq_&$XJ!?*vEgx0)om4~g?x8d4mT@4
z%DCqXTOD$o5_xybu%qwxyQt5dG^MMRE3MWcf*i~<9Uil~H>yUlV;6^f+q{6#oHf92
z<13aL<AI%4cKMsnScS>Z<d-2`s8EUQ-WHXA=-qbp_zg~EL7BVx`pAEy{g;b8DK$nu
zSqQgVInx-+mc+%Uo*3ct=m(B%G6D0kC1;6&&ik(M%tq?*)4noM3Bc%GbVa)S{5QKZ
z)ob-`$ysPvL%pG|;^lkUn+r`D(rzOdO6^>U3hipEuteR)NZaEmWb7hyR>qTyI|wLw
zcJSe^)C3^GOj&9OH<XLv0H%xhzyAYSw33*4_id83rF6y$;3UgVb2z-b+0rW))I?)q
zBpPu$*BS0TyxSw)^Ks-EQ1a%@MbJxIuF+bVsrmG#COP(uea4iOC_Tf}CIuV5@`b`Z
zGpzWswk`xDTNPC0^1>IjgD;fbdSrB`@-v7j$aT%ad~te3u`66n<5YVS-5v4oa>|T=
zgn4$;G`r3$3IcDz2WT)7X^{uiCQ>m`%5_ho=#B;>BVCFRbLr--CU1e{%S~vfGeB5;
zuXqE<)!F9+l%MIWEM2#rNWN$SlYDvH)VQ}~^z$5I!W~VV&0cDn&tWN{DqN0cs_?#Z
z5RY1foQu{{-(O@;@haDH{`H9!fJ}5vVdY1)Pb7f*_F@<VUr{5=jTY*_Mu`U(kEFCc
zv=$s5_lAYivYEIUd$_FS>8+O_s(Fr;LO!t>s5WLeo%VM=$(#=AU9ftV4(@>8+Pi2L
z)@`S9_MuQLoYNR0a!aNU@Y@k`OeuP%Kz00^7uzMw98s>g&o~nVMc999{!#qoaG^?x
z)S5uS%3QOpUr7p!ZEC~#Fo8XfddXd~^}P~;oTOi}^xR*~n_9CAatrBSL-+bL^o(AL
zI<z~L+Cv*p%YbnaIZ5lkJFxGf+Yb1LGJ1AJ7ZCd%Pcx@x1iaoCCO+Qp`~`&NnE|#9
zMu_jd+g>A7uep-y2WH1dA#|doZI|NJ{z1Pv#7)2|EuLcO@rpP^FnLPC)?ZnxSeY~p
zaHFy4Tlim!ga7?4kSuog3*bjjO~)GO{`;lBb=5PS(ZD{~zF>ZFD?TOvgL`h7fE{2$
zDx=x<u0%-oIu))zx+kn+qsnm`I%=__(p$|(+^DrZvj5J;G_l@Sh_F1P65r5o^!~+l
zb?Azhp78Ww_G{df5J<<wfSfujY~wdgmzG3F3=v`&M=qC{#*?Z0?H>G@%`C-UXgiR6
znf<)q5M8twea`5rMiaH4e6R4?ZhA2db7gFu%R+Fjsw?{&1}CzBGKKCOA(uPa(|05Y
zpDy*smv>87P4v-A{Zcr(LXWMC!}(?A!^ZmwBi&;J{_yX{?!*ZJMo!*e0^+#_LboQi
z=&7Htm=eF=OH<BH0|lWX;h-+XoD~>pbo?wGe4zn-`TpI`9J;exEvVA14p1##rzrU9
zX3G)|)%YPIAV!oQc^0y^r6pu}PCU3bmjYC>MYeyAwVanxkkG&Yt;K$23lco!E%_b2
zsCjhM%!S4iu-}A`76n?nCXtTqr%fD~>rD*FC5{^b$JTdtx+ru?0U+}Xp!cSP_Vb@L
zfmXwKT<tC2_#=Jj$g2_dIQ)T<ZNpJZ2E6+xirf3?W#8#wHHO=<Q-i?B!qcFM)lJ8(
zk5-@8@<UbT>1a&~>1cJPTwhfX3hQ4$R^Y<b@cerBsTQA_p0CiOL7$mgc1?VX;QE<H
zP8MT&teVG_-K8*^T5SXVO-LL3XsvcE8zxZBpzF|7^o!4H-s|>aFNQ^!@n=MRadJ(*
zEYa9T&ejo2yU|*Hw>uVYPzYEC064^{4#5U&baeh*<0>~KkulHR2&#H~5FiQrB%MEH
z6L4L;7fw;ItvhzrXLXqd+BUZjImRg|OY1?Eu<j8rdpAej>Nbk!<Ws?kLF&LC;C-8#
z?kDV>KcY~k``$8sH3r~HzGrQrw|>tabJuRXs;qk!`qWTv`fAUd@D#=*`C;E89qmm9
z?0?NM>MJG#4phe8GZ~IQZodv>!}#6(;Jf<!&dc`XqMkAXR8!qiY0+G-j3~0Xe3FY>
zhzzekkNDtyZ+DOK5%sR5Z|{+A{VuXn$moF7=SNpQ<!(hLMk1PyXx2D=y?69dY(|B0
zRO)<x<3^hvupNjKSEqyz7R#5GC?kSj02WK4wdU!@)3(()r552Tuj|Rmg;krG502FL
zo7gu{C+T8|gY=8gqK@g?jXLLWem2{D0TO*{83#>lOphN8RjN*RJpeFUogrrQo|N7A
z+oF*Op|)oI$T^@P9?zWRggJV(lhbb!77lYb2O|&W^?*5Hv_2#GQK5Q(t$j|tL8WL~
zTcL;Z4I!azKv{>SGz@f@5XMM?z&YW4?<U>9sy83M7`k{cKCqhK`9Stl5*v4AOooo_
zGmE~apI4tWvQm#yf8_0HlJ;RLpuS%hN3H8VXr_n-=}9lJGRYNLK73)06?3BB>uSxH
zrcBRwRce_?FPQVOy+yCZ6&HUosZz><mf$1!!xZ~K=dSuKG?klk)xyCNyNhFfgM2N~
zpvT9>`9Soqb898cWa#`MK|bn}Vte<+7*?@=B-4l$lFk|colqtZ%mdEnZ=QYZbb2O9
z+2OojH7Vo+Zm{N!1{n=&Dv_R&-Kw6MuKjXQu$XalDteLn?BrWV95wG_pZRm!duIT@
zr_BJu(T5z<d6ivDIPb#mi8i{^Vua`o>ae=grt)@n6?+3VTcK2(JL7`3l{4xj-_|5w
zQp%l$rt`6dsWpm{&e+J+@o`yZ&Xz1SOu~wcwksoQ%~>@&XsS@yb1RBw?m=Micv))A
z)kX3b)je6KiI~l`c(jEV$K39Z_06Kz+*;@Tz}L#CrAegh6r^V8E};it^Y>?4?9hj|
z#i#mA()WBVD&J`6i3$G{-<qKB!V?OZP1Ghi21bCtU7SH^@ELAXsqO8ii>6jnG>ptZ
zOMUfd=)a@}k}v+bTojvQ=H9~<&oJ;3TRluT0ZF+@;#hX_-D`O=GmQmLJU8r1f;K{r
z>ja1^L)A%#t$rV9;d=w)DF)?*reR=c<L3^|Gi<Cv$3qsRgR$;-3E{Pp{iB)0^DIrj
zU;nyLHdQP-MOzCD0NQj9uyLrqTK~MLz3F<0oy645gzZE+mY&9i2Rcb?Nq!_a-KDVn
zie$$@=Be8q1{VMVoVi^)zTvSP@DJ903#yDokJTx9F5gY2DxU#Na3mO!nas$ll?<i9
z(zUO5SItgCN46{qLTQ@Y;X-UV{=#oTik|&f=0E@03Q-8O5j|xjc?n>N-Q;^0Iio#&
zh(QOX+TfmLEsSi7Q!ds6hx_nnF9faUW!cNTJ~0(N?^-?YgL?Eq9ZgwFPrxhRtbmTL
zA*jt(e+6c7Xgs?wjv`G*0_1Wy^Dwp2A_2bAoVu-ucnQ{rSP!$HHUz2orj_|o3*qjy
zuJ5Fuu%WiT`r^#TaEX|S_vEebgZo_C!z#2Z8UE(svR4k~_rs3qmS>kUJvp|4=IYjV
zU57IQFn=JVJ)BZ?JVFc6#WUs{t1)GyR^;Oa*K2OqzS$fT0R?s)AN^>_=(Rnr!V|7j
zJ~yURvN2g(&ta`g=@dM@eo@;U-OSC)Q`jdn?Dj-WP?!3*?rv?hj2;m~5sfKRlh;-J
zex^(@X3?7f8MRYcTpXTkJ+bxRh}T}TcU)gc&El&lP<P;@vxhty@=1B+wbZjq*H=Sv
zJYai2p(M<sy7yec127=GCt9;N9bpu1#}vsia(6ZWn||wv>nCN*<Qv1vk8|ns7n-?w
zv2@!&Irb|qBC#=|F1{n7=NLIlX^6iV(R0q0MV!0HtxWycW39!jkp@!}pEIKGQ(H7D
zj!IwjP86TQvc_+K9>#4LAWxsJqnqs$f*XWJw$z^X=Q8}`rm(?5pReMcr@8#TWph{}
z1?k~L9Ma1Tqu7JrGmhUy<n@(QI>=4a*Zg{0(b6#syq|amfLUc{-NmnXVd`#r-(4!n
zKg$MkpW15JY?TqVV6)W#TC+pb9R6!VLOB=OZ#!oiEAGxUuFGsBMsfLeKbh&q9NfsS
zo|K*m*oD*T9L(f8{x-pO+3p_huNSp^p{uv^J381i{c+o!b||Z_ee$#8B)0dwVmTMb
zRN&@)@}5+Erx5Grxpy)f)wPpzwzYdZGl#pAAZ#u4R{qz=yLZ-B+X9!4_PsrPhf7Rr
zNuvczUf+)mFBaAu<T`e~;zyZaj=PX$Beq|5sL$3lujkX%aRVjn%4YMORVa`5Mj%EE
z>GUR)-tS<)#dLP~yh=B&)MeMPqwlz;J^tdC%ewPG?ec+KjhKH_keoRilP|essEOs+
zQ&e=RD+C8=hnox4W^YobCfDE{qEUI+LvtnEp}*ZRO5h0Rq3hykRTt}K%_XYZuhY|V
znggUe1aJe9qP3%IZYy%o(XmZsUEc141s@K~Izb*NK2_!*YRrm@mC@ms7Y1WL)5tXD
zFP>ibuCo-WRyk&Fju;9&81x=icCCC{itmDOe;OGzu3OWpmt-`EeDElatN%?JV~aoa
zL-?tAWq#&sJ6kxac0@$~s`m<woS+vEmCT{WfT^aB^S$-}V;4h9*suoo!WEjU$Bp);
z#!xD5i{@M5rLL6I$>Q!%)M9q$+%p<@pl+h3>OI8+-X0uueRTijS^_hj_24&WBi|BX
zh@j7o!0h!vs_-%1n&TO-6ob+AnWG<Ix?k0|Z6|GR4SYmEFZ9apR;#$~3SU;a|AK}^
z*YrF9;2QI#M4AXz;LmqC+&3SYlKuIGE*bN#R}200?km+>=k$H;02BlLh{6W1R;UA8
z62ER5j#>zvWR{<I`QBAS*qM`j353lfWzCZ9f;v2h>2_Ed18QAFkp9<;A1zSr7^(eG
z$K!UH#(GSRfNIP=@$FyF4^Nv$${U=m(|fV|d)G$PcY;Q<@%F9>q*a}Zdy-?<da-=w
z4K^^0#^?H4$@X{CIe$|8fRpae>j7pzicMs$|D-fbH3>LCA;!LQmHinmqeVSB?tdss
z{1WoE!=#xtxe%}kbm$3vArRch!DDBkt;xn*=^fh2o9X!<k=*4!Z*vv3&5$?>gb#+K
z2(SHL^VZ)r?fp4Ee&u<#!xsGaSV?0hfrQQJpEel?3<dYq9qGo9k75K}dvGHRUJm=E
zcV<)a=7hJy0Ap;<mVIoA>DZBgS9-=aiK_4C1z4gO?+=IC86i_gjGD_2^6RNT`szvd
z%S<x5@H5GYd#{%sEQFmGem}}r6TyxwtkNEPU5#B*U%7q`mS^haR}Ges^1Ztcz->SK
z&N9(CNa^m)d${;EH6M|hJCqL9ta9m}hr{rugHBIUofgIt88`DWMbVv>YII7{U=<C5
zdkTva;FlJ=<755yefP(hrl7_RV|T<!y9N$HhTD|@F+cgk`*sa^N7Hn0e{PG*f?zVG
zZIYopW;yq(i6f8LZ63;2Loy}K>ol#Ak0WhZH#bJF81t=M)Lt!98uJYGQOsgY3{~9n
zLF$<w{|={3ly?7P_i*V;xAAe$8M>)wPLAF#51e`jB8?f$vuePLTD|ATsS{&T%pYX+
z*LLNau7<hWZ62)j;aCI8K!+pT7m_>=Ki+}Xjmt?ruQ$fl0X0Q;I&K-)&b}T6HYT9r
zp+0858t@hPqs9Xyym{*0M3`>=O-ueC)SlOQ`X}gU{X!Uy*jkm2Z<m8P);*_tAE>(m
zW6Iv~L;P+XZ02vEFb8Y-KVh@2290`f@}n}pt?`eh4Gl+?z$jTXYVN%s?~f^`-2&5U
z?mzrc5;h}ichaX?O;L$upz>dyE|&GgPw>Fw*M#dctp*OX)xYa(lIHf7jA>EauJ@PW
z$tE5z=c!U$mRgV1uYjy)&0Ya}<+zZPT+0YDnwz@fAYF7cg(0-Q{nE~9Zk)rm(@NI)
zT92yS9cX-jHl@Lg;p;g82RUR=?Op$<kdt8NKJK@A$Hsl;sg|bD6<{p$=CX)4{yUpX
zIItjT<fnq20-Xwd{@mzbR3aCR+ST8)$@~d?Uldpx8jY<fCCqF1O3TFcjA)3669>@1
zl*0a&o!cEhP#qRd=?*g69N0^5qk+B+qcmR~Of$b7zmuCG>FmVkJyendbIKnw%x9-{
zBV1v<f^kk$9yH8-QuJ*TaoyI`1I+jGh6fK+b)AXr3=i$8dBr*T^dZl0{2)cC*y6jV
z(yQVC6EqsF1a$3|lb#%DAR~fcjy5iH4acvkQi_V0o2EYus$_Y0k8P&F`cBa-e5v0d
zXRZ=eU7Ku~fElTp21vl~6w-{aVDAWVJ#TtKypbh9J?&x(Y{9Ke5<tE`eVX%qJhnQo
z_~J=fEPwh0H=e$qmGt@<`DH6g&wNj6YOm*Miu*v+k|nmru%u0Y22V#9R;-fIZ}zEB
zkd3KT4d_EBmGH7EUJb+~QQ$McX_<-u#)u0f5LV~5LunZHxW0{koI&v?a>g&PiHpv?
z-Y_qJcYL^w<@lq+Z3(ltU$k20wdBRx5>3wmSQ-q__=#-(zTQ{6^{m#zuC8vXc!q{x
z$neOfqC2!_E&7mju-U-!TKu#0kX?C;(9F`*zMXEykKFO23JCY*%sTi@0|{c=19;`t
zwF=yN<)g4MQE$k%?E$^H*Y>KcnBD|1*kflzRTIpKudizh9$zX-r=t};>Pv*n_?8^M
zZ78q$<}hDyQFNm(ZvVj-zxv;dAgH#H2=>UsmfjCrc(;ZezvGfsG5wpS99<)>dC3I)
zQ26e}`eL4*@01bc<4+P>es-gC3Zv?w#)gmMac-0GkRun{*(DP-jxTEa4wu9^D>g5v
zBU935f|$f7pLZ3tOjED|>cTvZ183~FZ+S+}rUHY|sN6YNwO6VpuC`{Gc-~Omd)asu
zd9xzBcxZ7yaMETcI(L%ZCT32;8>6X+EJTKPEZPu$vl^{V+CSl*y4LvPDlD(s<5R_g
zN^kw@7ZZlnowdkS-E=mlbNS^@VkGTU526*1NRCft8k<b3lb9x=2-raCnQdMx%9jsB
z5fb&;k6Zti6#j2x1YnX^0ASQrlLJJ>Vs8EWIfSf`;Xyr{kTX~9yXWNMrpD{hhf_a$
z7pR1;BsdNdW>Sy6<O@e<gA`Hktd6&*9M^??S?l%>H(uaxMrH+amrY*h5<3WTTv>>I
zQ5Ek{bvt42u%vMVTOrEj^lYXJ1B`%V*_pJfU%UOsF3dycautsCvB4)#J!83wnb*65
zB;jHKZ>g#8?3^ZYH#*QkkueRARg#P8Xo(EIs~_g#UC*Zgpxi{L{t7+&w<o>BY)sA<
zO+p^%?YpOpCaZgg&Q+fX@Qz+`uq~%83J;9iq%$z&uM`x9DEh?;$v8C&APg66R@xtJ
zNEUA?qtaoyiFiGhG)i|aD(rG1Mo%2qNRtxoiacl5(PO+ckneKKWPdsB=rt}hS9M+y
zJpL>cn(EzY(l5S^xNc)Pc6EJ)YPF$zg#&U8cm6WuEtpouaR~Ij^giL#wWN<D2>If3
z_v)Ijd=+?K)p=cpbSX_t+?fd#PIop4U((tep<Xv{7PhQc+NMK_GO>C*7sbha*Oi47
z&c<YKE5OF&y~pEwwM$p~Gmw734>qb7ii_5zS8tnt60!n>n_rnu2s0zb<teM@f3gOb
zysZuw=Qn#l6I4i_nm#es-7}Q)IG%eoBLjzkVTT8i^lj7Ro*O?vzr<YEhp*QVTm70s
zvCv5KD)Jiq9rye7FB^K#v~=EMjJ@@DEKl!vHys!LXl-3`qr8hY_7j(t!Ji+FU90~w
zs(>_I_yyuanfrOX=_cGhzu#6)Wy@NhlWyQ~_&a)4Y-4J(dS3zKCeiK_k321ZT6Q$t
zU>#i1f6sE(V5Sg7_y17#o?%V4Tem2P3W^Yrs+54d3Q85ELxLb+gMfha5|Adnw-7*q
zC<sxJA{`5eNbfZonn;)42}rLAEeRpnkL&x^Ip@dT>pS}|7vv&&GVgoLG3FR^j`FNI
zubZoQiGWt6@t0h}AAh5$xE-=~f&=fbR(Dw7B|%<iX5(bmX3o9eY7=SU(^py8cRyJL
z+9+u!B)4GL;Sb`|X>2Vgf0)ZF%kbi!7A=GucCz_=X=fIZI=;KPfp!X|@=k{(ZSt-7
zX;;*3bn#&~Ln>u^Yw(t9j5@YY?(wk67F?y=blYCRZ5Md<G$+m;RS~5bD3dm?8?!08
z->iu>v0I80BKx*pTJO2vdm&bTS*0$McKFaSL9^mb%~4+Ma~`YMocC(Eo`df~f%8KO
zX#W#vz85ogj@0Gj5o=ooi;nTixaYy<A7rTyMbu5LRsGk7<t@DcL2$sYy1Md!QErw6
z-RuvmSw>3<G<JBAceqrH{V#wc$hXrjy}x@nzMfmAkDi@Wm|TS=W)~H6K{819i1vNX
z^%1B;f!4gnoY&#qn0IS@`~$^PA7PYB=Aw-kc5$y<;Wh|`PybDKR0fcB$vQ7h8aiqp
zZQfElp2Pb!6<)DXcu&Tu;%#e)W5sObZ}PcplO@*kdqY>>t;{0S9;PWY*u_Vb{C2D^
z(`gE>u)FOM9HDYy#aRK#ZI?-X2%J9e=u~+ml|WvaX?$~Egm8L{$L?WYYFPS!Q3)Y#
z@&AF$yO&!HSWEJw0!FPx)eiq?!IMo)yI^hFktatgLQQgTdt&E{jaI?1t?VgQ>Uth-
ziAOiat)%$|zxRNtUo&?E<s=#Rfmx~~Xd<_v;o81+LBzPrB1@|XjH2o{a^^+jHb%s~
zx%ct=?di%0_7d9ETq~$gO@y+a2^M$k0v27+<1qLKoquK0iai3rbgNT02QWvuZ?m9!
zZK;{oKCNDrm`Wh>&~*j1waD|TS_jAi9v$%eb`DVwWUkOh6+HcQHTo)$69$`nuC!i=
zoh$!HlkEcaE32#F_pvrF9%Y9gSs${dQkUZ%<-41dRE*!7ar0gQCJw`g?&`sRQ6EZQ
z;-p@Q$P<V_02XdK$nSDfwa~LH0#Bz?rBy}}yCnn#G}YAS3V)`)k5X5cb8BDypk=)D
z%vya>#Vr)#`zR+5n7o#|+0*s~BKHiEFs34REwHa3cp_bW!=RT{;`}_r@a?Xy0j=|%
zUq!7z-!H$(Qv2f|P5eFz(zJ346cmI%W?A4Y+Ou;=cx~hs9{HOC^%@ppoYQ@Fjq#pf
zwE02TgW@WP+xn^m0sZx1|Et72B_Qz<EVaIYvT4csSknL3;%#EOP=f%dzZ5Wy3wQBU
zEw63p5^27cLjsc{VyY089HUVvCB$jt5#kZMWoxQlZoDfHIO%CV3qZQzbyM@2{YY{0
zndr%J2?X{%<H}q^!~(7Wm6S;FRJW3DB0nVJwF~|<u%|*fN7t%tT4=2SJTX&Xif+wZ
z@W3(-glQ<5wPekYAR8)Cd!A!6>zgE{qNhsvfi}X17)zP64T9G#{?Oc0q5as7oME18
zdaK+44G#O>ZknCy5ifo2*2*cYpz0<V$v$_>ARF<V#?i0Ni40joS4@ZPAndB7DUaVj
z@+K|AK;5%UgFs*9-I<Jb=26+VvXWK8buv1qLdxcjQ=Qkdw$?MGSQKXuQhQEvQfI)U
zwvDBld!(d(C@TmOWZ5$J^r!wo3%gCM;#`PwlM1!oz4590Hbh1t;{gEAZhOInfNcki
zu~~{!x@(oB#PQA2SmH^o>J^2;qp!{|#kDDB)`Ypx(q)>c&I~v|Tus?;rmWuy-pvwp
zzjeJBjHLGM;+=P#8+sW%c@)+#j_Rs&(-GYt$DXL9FNgTuxq&F6?e{}_jQ>s47b;sq
zcY7ppLk(V3aM^Y&yixDy%Sw{M%8_l*-EriQx?h-<*X40Vg|VYodWRQhUwr@kCVdi%
zS^QQ_4uzL`u)a}NBW`-&lHP-zj|CJa<n}GS?s_hIa0Nl|M@>-?sgj45e<YbWW(5SY
z!#3~|`FZi;wQ9b4UrLG-Y0pNbyxBhq-<#tt-&;Ozk3WC1Q9r{W{dx6@4*u#ZV8VuL
zi3?XY1M87ie7!n@z7{KL8zR#`G2UOxkD$N(kJ^7$d*8j)aFZ4q9vzM4K&vXNk#`;P
zXpu<VzFZ3jd4Ek{HvFiW=oIaSU9FvEeI9$^JP3^tGBzH#Z1P$dA7Aa%n=Y_@d^7`(
zmsCtu$=M-~spIy&BBb3R{(Igut)P`qYb)Z^!C3Tcco>Q!QTcikZT1+xPaLc42Eo+v
z{=CSx@`<Z4$KV!G|5XE8?^4Kz#}a?(oy0)W0Z+U1{tc^&dC6I5d_;fU+G|M*pLK1m
zIo`edbxJn=Y3jAR+LmG4WwuI-d@B;`;|~+0g>G@A&FI;kxl&fg%%rxwASHZji9oOX
zIGUO1uQW|nV9G9h_q*8bXm|K|jP!E}$JvzSuK?yQ<Aq8lVr%b9J=DS6(ge%9k-xGR
z11lgBY-;Ly!urfj@w%Mk2GTVh`#(hx-vgH<p2j<R6RTz%x;ufPQh*K2>K({-U2aG#
zdsMf;Z@!<DHt6P3N*;VSF~ITQl`oLF<FNcNloi3g?&s+XBw60l{W19pnp}2CIKGY`
z#BWjm=u0Tu1bz@V^q#TZ)Zh=;goH}OP)>72j22=LyIx-)D!Hy5=-{Qe?ojYE-%m)3
zy&ra>*_XmCaxw|Y*8N|a;&l5p{2}&ydyBR6RB+<^y?%rEDMB(_6e;;CYxhuAxoumu
zGsBFhIxE9WFJ#p@Cqkv^h@KYVyVm`+s6^0~r*`MJv@!NPnKa>1(2RBDp%q5I&-(S3
zWnbq2FcTm;KcJ{RKmufKJngo#%ZX<3bn{IoW8z<(t|Bvh@=P)H+RGF{XKhU6ZpXMO
zHYg&*J=Qs+H}E{>WFk2)Q+!mLa1>$9MGf6sdVe_V(08Ge-`BS$+g4e6GfWdV^~mKD
z2KP2hv!5tQYbOvRXadN9iTCfx-@Hy#_$!XyOpq(3AuN6??eXWfel2{C4Tx{8@N%3x
zuEX|^wloS}>{C7YFkMi{!=^MgGp1&}^C<c)|ItT=%5I+K&~E~sjSGf_T5k2mrlv8?
ziQ*JpeJMw)5G3xcwvCXKQ*ZVqU@oochqKqOGpBu<A-EVBd~-Rxm$-Fw>qo(yEV{Yk
zsZE{3p94J4!DLV1&yr3+whn%2cH1J19=A3o$Z7=P&ABS>H3s1?AG?QNK}D#WiPfr+
zX%ng-rK0$aEl~6Gn6J;odP~g8KG-Le>n4m_-lB5I4|2+<f7Q{m(KAfqO|Wirx#;#m
z$9<ejT*vj)6(Ob%zbDSjlBnB|v5CeQk4>p=KMEz#sZZIjujk0-$%MM!%CbR|+L71f
z;$eJF^qke)WW>@(o6xWy^r{gevl_3%q(7rh#k!Z9u3`qc(;wxBugw%-|GZz6J^4Os
z*=Z?!D7GXQLay8W9R_o3py%_r6gX+$|LE|RsWu}ZyAeaoE`!dsJ)plYz;BSd9~+gp
zrGjdWU8cT*ORGi71kX#s_gWljG-bKjHVs4dN5M%yPGB={G4S~>@PZhH;z?jPn<lk?
zrN1k7qa)*zzgyI1e+xUvzvq2A%MsZ3$?9X@%IBLV%8}oN6O!?%*NPpsr3A)Ch7qdN
zkL9=nkdE^r5<eQBwYYWeEtY|aOW<M1R>a5FXmqF3P(x|u?QyT4xbuej2lUahcfb8-
zQ`{GZQ`PE`-!Bq(bBjuddUaHgqucF7^0Fe<tE67G%Hw#XpA0?m*B|$cpWd09<v+Gq
zofSFyVY3!!6XEetiLy}-IwS`lz9Xu}Tg?oQ2hA}vZX1!Wtra;?IA9P60#D+B_gkZ4
zl>L@tX^=g$ar^FG2F8D8!;fcnyL!ywsWXAB)}w20^9v0z5LThGvT4TUnH1Z_dQn^6
z!-?We5B3n$Q~&I^+7w{ZC$Jg5Q!w;tR=8a@Na#;_gTpB|fvB&;j444(^afCjY!F@C
zDKfxV$X&Qx7E(`Xi7;$ZpN}zg+eZmu4wuEFK%Z;`Di-I3;RQcbOA`m=<0d3hR{X)^
z+iglAz6kD4RD&zm*3gP{@Z<vVlV-ER2X56C&L;*KNp(N=gz}{p*PrdiQEY$>TkbJ(
zLS8W;Uf;)rSs&7C@<5H`nn)<1ZfeI|t@?9+<)-3+sRUxF^hC#`Fu*0-em;l1U@IwX
z;GunUT#Q+B^&`wu@^MC6>6ITSQl!yC1Q*9{sL`6X0g@yJa){<OBf43aXPi^${pcu#
zCVbSY;+_}~hX#`4lF0TB4`**dTh=&G6TD!GxpXmtGwIj0M5-rcE&8g6DJMq_Tw8Q_
z-GM7%>z~Iahm?T`>ZQ0i-*#scd}(pNAxgk<itRwfb|=RxCs1GMc;9bBzBUPPXn(Ul
zy}nL|{Z=p6I+6MZaxXk!+TitU*>0-1PORX@(bLyFUkkw+cR}2g{pq>blR)VchI_YZ
ze}*pM#{G`^W2d~T{fIN4YoDCd&Vf1lj+eU3bEcT<+H*^mUU-3eJ<pFT+c=Xm;;C;z
zwj&Ho{NIQXP?8(cW|GtnMzUoiuOD6CfKA`LR^^&?jPvxUf4$ffk3P33N|SyNv?*K=
z>m`V|PhCd&vn(AHh0^6U)faAenSw7=LUY~}o^8)y2o$SR&Q)M!Q=;r{e=3DsvfJ4L
zo#XT0%F6F2A5o9;%Mgy+Ig*{=-3Z6c!Yj>sa7<R>Pu9nF5evx?ZI<VpoJ$(Lnj@MZ
zbrCAX#<XghI$!*#-}JFpoi=a9lFetJJV`mh8Q6CZQ<q;GnXn4|tgSfA7NuUK;VOY5
z8IeLbj2DKC0Rb$IiWg*XVAvdY3O8OZmMwNC=&_59uhJ?$mBzk|e7`t&tz%Ak+vnqU
z#uKCoiBRh7+3$Jxi&zBkn%{1~LL=>4OZZUDHMDh_<Qjc6!86Zba|zEK8@A|i;cnyT
z)}rLOf}h6!7nN;b)ucvQrGQZwbQ2Vl-dj5^(MZyWYelO`P;jwsdqC<Qx>n@Er6xD0
zWh3I4b?GJ}ee=ok6mEm@k0*?}ngm+Zn|f!y^aM+MiNn(<iV_x8GMn{d1DkgADSQ1V
zw`&sPrRrre0lwzW@dxkm+qx+h-L_sNKPBQoDKg*oVugiXxPXS8AwMT^DqOKGW84pX
zx!FrC(pz8cg#q6^FH@Jf5(g!bSwUM<Mn1DtkkIh*2;PdrtnwUUV>$_&R%^q;aO@?x
z-Fy&rUePF+>2_j~3L-LxRe7^)=JjUov*iYl%+nS%PX$MJ=9Y<d4TX4f<BI!nd4(A|
z=PkJwK6aLVK!v*9kzXbNE59tb_I{h{uUC$wdKo*aSoE3z4wtV+y^5rl&+SYfZdzF8
zsUMh7u=NYiylxOgAy;hb4W*!v@$wOiD&pknE3w>HzayMQHTKIl@`7#Roux9~NCsA(
z3b(O3zlk5BjQ3(9dmbFPA{XEeQla4&uDdyWt7|i$j`!Z7{#l8oU+Opa+dEhglTuiA
zRd+?Y|IymT375>$5fZ*OvGD{FM5M45$tYweasMSF+qUNgMz-H>o(m19a-Lu&z7t^S
z@X`eDi*B7d{uhgGgpvIFHf5Z*3ru{9Yx-Agd&C18Pq`~>&(u!(T=vxr=hp}h-A}@;
zm|F24&iY|?i*gVL=YF%)d#wO|=Pwbb0s`owl5M@)FTn{_FX7!$Q?cFBM29TT<=<}o
z%sUAYs_wrVBkB&{Vn$py*H62xGqNFrx*c&*qB>4@JzLhPGPz!)xyEm1^;a&adT#WT
znjX!<|A76pk3TMe4v+_(K+5b+)?w0a0t4&|>ul3b53B$c1m)$J&Dr-192W{w{ho@8
zC*=UySp|;BM%Gzzs{mXM!S8D*UDVX&y6QYNQfo1Wm4={f_v{C&MGn;bq0{uJXWM-_
z2#OK+{26{e%GZw%duX}MA2|LrwQP%9H6?87bW4B_ov<X`3I~DoiK1BuRM5-v@3axK
zRq4Xb$Ip&)8sw1{w6{G6WqF;b#H}0DKbgZvyTNW6sNgU<!te$N1%n(bZFp6$vBEQ`
zS{29;+ibx-?=<CF`?&~+pQRag>kJ;V$g0%%@Wnd6262B6hJANw5u4fX?5KE=Q`%Ng
zEZw%;K4iZC!Xq=K96=4SDlVyO>Mk<wC@sy>gD_{QA*Tpl9n3-S^&@WlM|PC}GtvE5
z5KB*$x}IVtU;TKpYWvv205P5Oz6nUk8wiu0NLrNSO~S4)FUNjZ>c$e5#21V*q5hhi
zER6>&VJr}_oNMZl1C7V|@YO)ZWsewv;xplnjAjVByw{nX|7|e)-?FrJrvh&0)-bY3
z(MFPS{bNfIyN%^3&kM)kx(Jtv3T=uxnXubq)E~Q(8K7@gW(QYV8|G*=!8Bj7l&yiN
zEB2CsPbzr+yJnu+;p!spl~MnBhO;b8{c5x)dG$SM4Ce}RD8*%4^B%2QG^%M$Y>q9t
z+j}peHrgQ;ED(6P!htx_FV#It7^QVYd(JeZyfie?4j0t0(*x^gupvXYNF*&LOO{C~
zE8<qSX6K>p%z2ySYH71uP^<7o7y}Bz#tOCy{IP@0Z)P-h3{4IP-tez4n=YsH62IGe
z)=NzXZyZdt2%a1p!JpgkJ+AA-YB8B8BV-(w_q}%&kGky1TCc_LOnte4I18_h+9G~F
zc}J8;KtJs(EXt3~z%r~CxE3xg8-~kQ4>MH{k6#*+4KhdkF?AW^h4#X;_scWd?Ic&b
z(BS$@9H}jY0-pgKjQSWa9J~38%jCV7)Xj37uGMH%LVa98J@JO;rc;Y6f+Uy9+m@sr
zxaXFiv+Qgo0xz%TvS*^>yTi$&j!jDtB651(zxkU-m#)gN-I(8=9jty6Z-hi}$^}*;
zUM*#Gd`}cKys+?8a+R%D+6ryIP<nC$vwSm!H3!RU0lHbm2oSz|my#;25exLu?IQMB
zu#d0z*)#z?u~lzu#t;{vm|*`y&yJlR61?5+ys&ki0u_J4C^uTw%J|K)0Hj<;I4)|r
zQPTF<lrSVNbsnvDSXy>%HrLSf0)OY}heFW}YLUCO$0f|@SHHq7I<v+gkG8-I#`~eW
ztyxJ@O8>}#D|QC)MprLyJEi3#>2NC;+U?-wrD^yxUD~1VVbC4z(s;-qCcKdq2d!;M
zuRjqNv>}G8wMBX>MQWWId9$$aVK<e1Ec%!lzH*~r1c-^@Kr4x7DpSIiI!agnmcH0T
zk~Bqi8nFZ3Ly3JVu&(V6g%k4%P!1r7e1v4l=HJRc*{4(mTPwS``O?8BznM{}ho<d2
zMJjB&^L|0GF%P((xE_rkejh04%wM~B|Dam%-I^#BL)`u%<G4)hsfD4DaI^<VOkP^x
zQ?1x$6)798u_L*+Tt#egP@DEPQ~P5e24Hdne&$Wu@j3&1mSO@fDc(FAeV`fyV%+vM
z#$6;Vrp|`nc$lp$#pgBS)mavR$s*Jg%85FmG{nf#um*oK#S2rofq@ne)T3qK=g~Z~
z;j%*qQ{I)qVc4=qfoE@!OIKf?h1g0EB^=7WrR78!OC`@lmg!9oJ@)b9>U!Qk!!-xp
zlanjuDYXn)U|?D@Ebsfz(_S^FpZd||)qPQNZ@P_fKc`3qytc1fSpn-pfv!4-K0oq)
zevZt+$v{i^@i)wz4WpAH$29Ut5{_Xwl$1k1XW$o7+TYc}+IqI+y;3*n$vQS4_vlow
zXg$;4LNs253f1Q4HEs$(GH)qA%p$=9g>aL!Ba}B_J&A49nH7xPY7Dyk!QzAriTu7m
zJR$TWk4}iVkfe(0Y(B5sU$%?SOy_&g2$(wWDXz^(Q`RYSV-q`=%G|5A2s+`<xR$@T
zRLNL|vM*AhM<XnVx58~{I-lwMndl1uobQ($@MVo2^`=&>>^|*&(v+F>X^Sd%?gmzu
zFvLRzWeA0kbKhmXpb(wkmkue8Zi(A>G-{Stc>0Y?E8M<IG_Z0!y_>(i4Xh6GV<Wk~
z($_v2XCn>OyZ{9rm^1ry2@lTlieo76;}ex%Z1xOZeh0hh%4J025;+*5_^ZdkN-n>A
zHtOQr^^fFTKKM7D_bl{=Km_mg-j_2JGf3RWa>SsUl){0LYUu4dr4$1ETL^&Z9rg*g
z@9}rMu=vrz1GiEF+4_ej`Ml6L8SiyZ*DVU4FHj>6uG|}ovhgdge%XJmvQzqUxv#Qk
zf);`)k7|R;_a)NVn>5=OD)<Nd{9!6F68m8#{d+nr7sw#rb-f6!Td=(J&H<z@c>x_W
z93VV4L*3XNeo%jE#Z9Wdz7J~hLB$Pl1hOIh7W=UuVKfmf-%fcDDnW6&N>hz7OW_}+
z?@#Q2$4NGh%BSOq<Q%sRoIzJmNzN1r{&HG5SD$qMYi_awxMpK);W9Z!DyyLlhS}i-
z-SKCIlD3p5hRJG?29{E5Hl%+j<%@IYOPiEcnog)2xEUX>Ps_Urr2^oVp!KVt{ehlS
z#&ca2P@Q=y(h#!9(vs!}?PK$cu!1Mn=X(`bM@2XGTn|nZCpD!$PyRJe8J4Q^VuV*L
z32bDKx)2GwIn@o*{i~9z(h?tFE1aDi?VK$ly^9g8AY$OG+F|QWT-M8aEotjUe-PuQ
zmCqnDG#*Q@m3YB=Z0$X|RrCN#>*JWHn>$-hL>9qAGE~+=k6xaksE^Iv%|{%6uMCRT
ze!#QbDKHt><LNekHepn9Dz?UB^33Qf<3PGRttoxnt~#uz^ZKURCG-AlMG>Q&@?LuU
zP$HSDp>0YqKL!tO=7StB43!1H_k7Y*U+q44L-omEjr>ZD9|57JMle*n^UT;^#?ge4
zEiNuK1^^~kX^{DY_3;+JL+6@+CXbJLMS*bKf^_S?vQed4vVg|wl$+hS$40muhR`yt
zxb8L4dwx7|inb|>3b@tD$aV)?{2yJa8rB!T^wLNB?4XS|LVo@`3xN4}^Zl{GXT`ZN
zb^o2&;-25!QdXR2Q>G25yAgs+Q#(pZd!#<|l~_jFfdLVx4Fz1`^G&jQeaG7*95{mJ
zTsPmjf&x=kkAbFYVagdHszw<2h%+^%sAc+$uDy4isBnZQu`oUX_Dt=%YzM`_AUAJh
z`eN5`&X}fKh+|dfeBrMnUN0D!BxH^nH>Mk4(B($lKsdT^v;iy_U|YA;!dIa@X5~Bd
z^jM%8BxJndSYCPVmhvfEXsB75vYSrROp9OeKGiVKsFMJVEN<Y-!OVAi?+zZvl9(|U
znnT^$sNuAs5f(V@tk8g(pvI~~u4GQ8(p3lrYb!r8oGCJVkH@juYDO{U_prmzqoV|9
z3-KPx=B@blPtu2#AE0oHv8>55j-<yVu8i{K>!6n5S0ZgD`b&lx%imLP;$Qn``^uo}
zHf?W~-GnWU_jbNXG~2&g2&pcFSvuU~7*V>LDaIC)!4PTVy>$Oa-q2b6N46Z6&$+w0
zIV}cp!sDUzpLzI~#>hXff|ojCp`q<>^r;Os&jNBCiitNMlA*=cB)oJFO0xH3H4ezJ
zv@Rb=vPHZ@q4%brY`1+5;^M*m4sJuSJ*K%0zGDSzh^t4{eHBl6s+sB~d#L78;QqDL
z?CZJP{WqiXwf>$D8cYAi_T1Tl=f|u<jaJK%r4~QZ<%67*j^E<UUr920@=0Ol(baLL
zQ(bx|bl74%%BA*1BxtYCk%uC@sr&@v`zHL5l<ECvBFwR-n9&1VLR-o*rzMn^M(;^O
z)i=O`Ag~o1NZ8mUMZ%h&Rqg6g*UI!)83G#J`J8bhCB3DoPHEF`q2_(!6jz<&ZP}gf
zek{8)OK)sUEx)nT5MnaUQ{#(d>MdP(M4xjdwiUn3=F>@?x6J`<_*0+m0LO+#dCU2E
z=DpIV(+<rntu3m8k2^eODatr}DwQ2m-XA{K{1xkShF5j%V7KqnSOpv%;INtXtD_@L
zkacw$ndSXcu=DyIGq(5%@a6Cz1<#p^0Hx3zIYLcUYwzg@unAT8EG0W)<K^z)=Dmq`
z&9%^f+ztAEyfP8cFte!ohqAb4x#tR+IUy2T^Q1^Ov-V}Qfv&vuO<2y`+K6&Ho8bNS
zHxp^C!kya@k7pl`lg27*QSA@>Q0Eh0hIw)w*}Ru9uTg5cx!q2@r_Hed{X{G<X0r6G
z2p<pp-bZqc>&oL`4H@A6^_5lV6Qk8+8v`S1C*YCGgca>ow|0hFxK;34b3p|?%Hr@c
z!T{1c#bI-9M-M5&S32c$;yvIw*E98-HLPys<#hFMv1QH6(y(nBV9o|EU!jYh|5-y_
zf2-laDkNdkq_n?NX<m~V=P4V!7L(dKsQU*pzY)PPd(L{a>!c4C3#BSk$Q4DJorwZi
zajz!cQS+cIN=-+E4CDe|Lxe&LsfMrhHe-aOm-wa{u@u!B)Tbi4*>Eg{n*|2QB`yB^
zs*a0KMJ0rJTvnK~uiX7pSr3X`e0>VVRZ>SLc(1RCa>afn)a3ymfFkekAG+J2k$Kk?
z#f-UL1NEQ$?&M*v>&3ep_ctnHrHj>@4#yPRFrvRoPh8TC$L6i&Z7+phcnW(n+=(~m
z2S06NKQBl846PpdeRDZ4(L#P0xPPgu_yTm+%?}NJ=Se2139Mks;Lyd4`WF^Uu)XUb
z>MA?=mq@eyJnZ)EblaQnphqnCCz|udEF2U$w$SvXY6bhJ5p9mISR(d+U1|)`A!wP3
zut#3j)4x{ECTToR_tNfT|FyEgR1DcLc}}7%Dwc^Y9H?r%qY>3uI>W;KS0Q9W^9AUM
zfPxT6<)5twqUyz?9g{<p9wUUsMBA0GvW*Lsi~<U;6BQD)qy!<qD*H2EKG2o$dcw%I
z(4a|9JtI2m*|5!O>&B3#@;X0|NcYbOfCU<OcgV*cxb%&Zo_tc==k?!}m~*!zPX&b2
z!8hv^TVaa<DL)@SuVGHjqM<D4kJolucsdfp#N&O;n?`+$Zr8&|UrYup9(n@6z$V1a
zpNKbcc8+Eh3^XR<Ya>jgibZvxoF#R*g`Pkx``meF7ASN>+Nw$jak6jaBc~`bO{EFO
zp$wHoEG({t--1k^e79|lOBQb(JA%kwm<UA6IBj<0o^|*C<cBFO^zc@07F0H!{7Cbj
zmDcY=tnZzTp7b@pbkx<$csG8T{8))^8AI7l>Bcg^{+u6-@Ef!}b)58xk&Q~;z@Tnt
zcwRRG@-kO3_c<;W*x)&6sCF0?7Q;Y?Zjq6du>Aq$T2P!<S6~Tq53^f;1kZtCBg+2l
z(zS2TP48H~IY)aUCP@py@4#oD)xY<(+bM2M%-Avfbz2)RCQklCRqVuY&gQ&5rs=M*
zZp3N@_6s;Y%H3anw#fP-CqL(eLu=G3Lr`NpeB)#RG{^YPmuUBE3YUPFc4{cG4(*uY
zO_XqSmiaeDPyXep@f{BEkco`K<R>j_sqZY~og^1;$H?t1CyV>;6c1zy?Dl{9P3T~h
zjs`(OMU4Wtev6dc3<?n4+YTXgJhYwIV!pnCJI>-t=V?L>Wn8M+!uXB*4sAV<7E1if
zOEhKS7J=VlVd~A02kCAH+;`#dLW{jSH#Ey!+Dx;`w;Ac>fkYbI?RWT(IXzJgLIxQO
zOn=6<82JCG+bXfFcur?A##f5Dq_4X6O2)Zwx@=`ut5yAI=BiPe>QQA`uT%Y8l3>Jd
z9~@8WiG=^^0Awh~?=S>c@2rEe;oCnijiDl3CcbX&STo()NHYHy{|}f8V^cfSz<_X?
zg@&!T9Sic$hC92b{demD@Kd&eo|GXy9F=ifvbyh4(pMRmFAPkkRMOks^(pD-Lww3X
zW5m&2uE!RmOVN9vmx@?vrsK^}JEfy{(>prdp(FZ>3{2IFD-+iSIGO%U9ro5d;z6Cs
z7Cd=UH!nKZyRZdthTeMtK_!D}EfM%2Y-K;%LNaVzRj`L>t(H4z_UX^r=*5Ll;u858
z(SS|^el}o~^X$NfkJ6SQ;iNS-x_0W<k^E%!kz`K6cX4`A@dP))>d9aCx}WPKT?bF8
zwA>Vq$eS;qj1QYORq1V|7X-+F1gQIiBCGFg502jF{b5F?$KNN7q|}*|3cFgrP)PNB
z%=}T0N7~k+dHx$cRM3WQUM$7NxHky~tWWr%TV5uY;_{8>uFoye6MarFE8WjjUP8fD
zZmd<g5u!Qx@}ekkd~t|uxg}C|g)s;R#XV>BbQEjOA%1Pf3?x)`7pxhnIdk7g4I!ji
zv={doS0KRdgpi#vl{i;p$zc|MZuo%yw1G{~acQfOw0gFo`r*J3cK11~mppPJOBkHO
zHiPEU^}0_CRzycw3|FWCB+xX(S9p)V4{HN|lI$6`CeIXMsag+sa$uz3M@ma5+wi9+
zdZx2HXFV&lvkywC#8#R0cG{E0<{**<vHgf@>oWRqZZf9q$;8{;VrKODAt(JVgy-=V
z13YOKNC9x=z!pMPt_%tIeBbq^u0earWb8;J4-J5YGd}gO`=$NBGhQMrq&Z{TF})`Y
zm=77k$gm-4tO)*wY4j90G+^$oCBSD>l>Y`+O%OAaq|bLEPChkBZtdRN=YUde$8)DT
z;Je?gjf|4Xhz7MBS=))?Q-}qcR{xAZT#9tJy=NIRr|gK8(e!#treFy23DI}3$=z&L
zl4-4A$;cpL7*fzKUp=`0E&Sh#+sWVN;NwE^sowNGSbV1U-Gw)UM{N;pyZr$D?-^vb
zIukyWc@rsVjhMU1-{MSqsM~yKkS6aHs!$qKtA`!<VcXrAyNBQG!qwLbcKchaeB)uA
zRX-}c<7+PfoK-Dqr2zPt=Z<bYRJ&Q_)(Z9T#ae)axBJS1&9@Jq@25lpSeFTek-6gc
z#}3OLmcv;WBb5AZBr>6fN!6p=)G1rxxK)N+JWVS)KIG>OoN}7;w`hr=8AUL6FVOg2
z6IkI*|E54%NF7tLKb{A6lgXNbo*4s@7l6*gPQNoSs}-&V8`%GL;)`3E$m3}rcVFDX
z9zMT;L?6>>UPlQ2=eW{g_NYlgjWpSi`$`9&ykgERUV9?GJ{fQ_P#S@eab5VdIZyu!
z!gqA;@9;No6)E>oQOj{(7#1yECpP302|pI7?PnGI`I3+2aNIA5<v}&VZ1lQlrl8Kr
zQQ_{?oV7qAw0s|>fTN5-=lGGN%I*qFwin??0wNV!Ed5O~HyT6ojK4p<aCx2X87m05
zkdD0ZG;6~Iu85_tS{KwC4lhL11KeJ$$|i|UQvmBP#$l#)ZufROzouE4H*)@YaYRU0
zvV2Q<WGf>Sv#_8MuHDI+g>9~d@G7iU<1XL7R=b&JJ9X2cQbmFO;~=`ZMMZN=%&Ck1
zH1%!%U0gTOz+FpEzMYK|YM`qp9=^GJyc)OgTpFp?^SLjbd(i4>H{Q9&NC|bb{FY)h
zhbhUG3zbqwyb`CUu0mQusS7OX3jSkVY2TH|G8pRmvM{)+=bi)ZBl&o|ccFkf&hF2o
z{7%%!_=uVLYq5)w1wX#ZMFEwq{Q)oos!Z4`mOAfg+%9tyl-5wO4fS6ak7y8FdX1*w
zxm+kAY?OoL)<nCZ(4~UlwabIoxkKJDsDoNo*%Rb-Lw(nK^C@x3eWE&m9C6~0ecSk$
zlOx|J4kSE0v+?^K2&{2kJt3HKQxpZx3c8o|{XwZ2d8yqrwzVbum~&d?+_n(FKD+Tp
zjrh>Pe|#X}oblYzT|?KL)cO+63>|L<8dQ(}DQRoEkx_YXhl(@BA3jgqQZ*6pSoi)5
zL+lRqC3c}lE22wyLmAA_Xd`O0*b)^42^LW!@1MYDd2$>NX{vY>oG4td6uyS2pO4?o
z$`Q<g+La9{G@{^*{A^_RVd*AtX<RrN@TkzPHD&eQ1F`Qu?-%Kxl>=uqHF{!9%}O7P
z$sh?dED-pWg6{g`FSQtAi{wsJaub^YQs|sx<WLdP8+)H+EoZL>QoT1yTcKc#s*yUf
zGi^YD#CbUBZT`6G7Qf(F{&Rsj;v^o97C2(bIK0HW+;@D-f!yEetNkbAU`k~=SbGg@
zM-AF<#S!>?p$0YpcZu6QK{H#jj$d=HS$mx4R}fHffGnS{++B@7TCSD*hx`2zx_x=%
z4N&@GHa7eq@HAHnr_YeBzQQY%zzq&oUiZ<UsYg<kE4>$BEr%L5odtxQI?}+aqhq{I
zln=N$qt?Wj7lY9Dsf!qvgp+<vLro^DJ;CFCV*#PDXeYh%UWi@$swL{BkvxwHhO=uw
zqFR9L{*%$;WxxEau|?5sG&-jV?aljPs-gL>a?zQ=MsC+6N#Vga#an-hdiGc#8rm|r
z6}Bg!{!izwKFrxOOgrrQM7dmEx=wcr!vD|eL_q6+UvmO>S{jm|$cW%nB1U;@ea{Qy
z=kelR%S`w$=@YE)GW69NF{9YeYAGRZbNQP7u`SW%@Kcj?%n2t^1o*eqYmY6)zZ_o+
z!Bp-2+&gMx5Xo`AF<JvZN@yipH=u5Z*YtU6rO5|{^2#sgQQmEDc(Rdo&Q5#FE)EsK
zb*v(86sbf;N|%Z%-u7Rsvq@uDMqZwi3oV|iU3)FSdk>`W8NUV`VZ!X_|Dip4rr`lx
zsAoNehzE|QF`|OUUTMk>PDt}<yRxw|_11o*&%M<O{nRGN*0kSIGXRXJvhl*|d&saY
z6Zm*b*aMUN@cA52%ntH+x@V;?%v1aT2lusMhqA5d;v-vsrZG%Z&0WLA@|7}Axi?l@
zJsnnPqmKqHGUlAj$H`S5WFvcmTJw$tjhwa|I-9w+PmVm^Q^!klF4tVHvc8mqT125{
zd~LUr%1i72<d?Zp45}Nr!5UxOJ|sGya=R8aHix*H88X{NYL5UUf9$!=%!?`kl=UNQ
zh{KtzMk>;>Zn;5xZ#07%tUK<r+egBuPliZVgq-x6nsyU{_|^W|98Tl?ukI=WF}>M|
z$DKX>w8X?nkN$M^5a+#JgN%gvRx<@I*wBYXp(rx(N}D|dy*y-kVeNfE{VyPF5hUQ}
zicihH?6sWt5iO80Dh=&5rQUk%-(MQf+mj64dzqk*cTnuk%LEKG?@JQu)1{jUi?$-d
zcGfQzTy9&4m9OnFU6e6)L6;c(uCF-vX(4wkgNZlpBR^5NBG1%n31-WQaO^aV{Or(7
zlyj1NVRL8cwH{KrG!uH0i--2O3$eTgu(CFfvIrc{DdR-5;TAtpNj}4-SD$a$;Dw_n
zF$#JoyHQM^0Y<eQ9<|>*##v%^QM48~!{kNFRDijZ%g8T#LvENH>w8^wDk!$!t&CPL
zLnh8(Y$c&RaO;ueY8>6EhuL8VT|{!Y$#+}90tZ%za;D$!n5FmF9+-19t#N;x0)Ixx
ztdqwPz?7T&tCQkh`pjE<zdrfxmVLy=d#Po$&jjq+;Jz}`-qk)1{Fy6j3DMXD_(pon
zq<07*CIZ!6a%`Ah@(?pcR&QOxpY#bw8@FWALX-}h7zm8KPZ|ljiqSKH<Enf}AogsR
z5C-e!{7aUOhjeF3mRe~$18n29a0)VbDWd<|mHV!KWY?3zrLC8xu}2X8q_4mBRXgpG
zo}9V67`68Y6R%{}4;Z`UmI5R*YA>KReGo2lHCi^hEA2rG1&0xDkB6z)DfUM|P96Y0
z68Z#K?;TirG-!?I(_TMJ7JPI!e0T?7TVx^zdGKIk@k%UNWYL4=tu%K}Jfp5JqrTmN
zW7D7pqv)Tcnk50wGzIZlncYKE#S5RPt{7UZWwfy6cCx8Dua}8gU389lwD&aCIrX^v
ztotJLGM^32?$*pB-(a<#+~;h6`#waux6So1mHF3QnbJ;<U;izQdLhHG;<)B6uRreA
ziiwPh`G7u}#ofEe!mjmTj?Hkjb)1py*T?_LT>d`-7!8ke!|n9Z{wz8D$7%=)e!uKT
zY%?}=qc}DF#-_AYo!G0e2&*(jFPqiDN?qQniSGknxg1RcMB;g*S#1$i?bV4Q=d9E2
z0LPguz(3!*za74R7%WFR`Ft4kvqkr>di8l2wP3O&q*W*+&r77!WXTPQJ9o?Q6v7PO
zUs5MVbEQqk?ta`k`Datzf9^c!N{{WXW3bcym+y=h`-x9Nbz)%$w2`ZLyUBr*bg{zx
z#$vNswgwiLP8KF`r?X*~zKI4*AP_F85cB)%R0n$D{CYWX@v~d3tr-PLMl9z#yvh!~
z@jEve3`yr}d@s|H6YAM(>bYcuxOP{!w|2o^7skI-pk3ywo*u7{9=)U1i=Jtc(Z#Qc
zR1rFLr2O07dTowAWHPY4$J2>5%l+;abvcPyz+u@{q{@O>Qu=jCC!1B2$-`xlaYvEF
zQLPK48&C(qj&b~$NLf|rb2jlTEn8&8b*SXq<y8G+$xJkq#7_E6$ddI^vcEZ+zSfOK
zYj4YiQ9d-9N_9@xU6nk&A|0Pm(kSwGz-!UQU&MT75>P~@<(%|Eo!NoG)VR;!>>!^6
zFNwQe#`Am$fJQX5Q?EnFK9qf!D}3%-2?Nt+;WZT7<vkq3;in>%pjl6}_uxe8$FJ3^
z>wViBM=x>^5njcMCRe|&K_Rja$u5ZT(1Al7*>=`^`yJ0*@U>}DDQ4MA{56L*VU9xX
z!hLzJe}R+1^dF;w2wqQGXAbrY56$S;=fC3+=&aZnFM;FcM~WAIy7r8xwz33SWfj93
z4!2aIjnHI$rFA#a=#Q92SRfs|Rv<P;Ji@=(>XbGam0cgE06AFQi5*I$>L<I06pYtX
z`-)n_(X(#~vtK9*Ro(N{cx~%Zhq&e7TL;<RnhEZX_S6!RdWdSvxKd~MY=^l!2~>~(
z0;%1URU^)o&We~)l>puXxzm%iaLAb5EFxjkAXWv468sg%K8|tQ-SHXg#D8d9cnr|X
zM1MR|R+o1?>5}V+N$r4`=-9rupV6Pe-fk4MF6lltn!T{|Fj$h-by&!e^S1v-<Z^OT
z=WdR2kVP<QrhuSG_vvO`f?fX>Yuv+b<o$u?_-m+`2g}aeom)p+1K;YY_ulCIJgAq9
zx<ab@j@&@1#uguMy$hlW%}(zgMw@o?3+9d^k30@RM+pteEt=wsVJ+6gj@g3cmCua)
zb;@>Q#j!Dfr9`5~Qbut{tH30F^lvw(Nt?Ay`R(@I2B1Y;n(puINuc+urW?M)-?20v
z^%j{kGwQQ>aw^%EChgS_R2&xJZ}51hxU1dVE4^#<r{DEAADE@x410Pg_?AOa!M&wx
zesh#*CUmfI>Kc4?zO?IV69?!c8~Bo%cWv;-kA?}i^x3MYVn7ChA9);s_?^s>)sB}j
zt^2{prz$!X@Mlx9Paey+2mVLa1z6s6HL3v;S@tVh?|YswtB~>j@mT8IWq}gRi6S8V
zOz*rP%BVdVTsUJsm1kYx-FF?z+UTx$i*HXG0~V~<+Qu!=8n2X=79|2BQ(X5t0ha%^
z-E{O(r54koXt=>st-n)Kfs@F)tK)AjntKkt2Sd_!Z}W0^G2Z=bie|y?lu(k~P8o^0
z8DPvMeyl;tW?uSqB`vl}ub42FEFc55wyNWfOxzN{+Mw~(p|2e(ft3v#j#pJWdW<e~
zq{F~(^n4zL;jAcl5vT&9TFPSdwh#Nk&VC5nQf@y2@lV?T`DHh6qyJjyK$kwm{(7m!
z`W*A#B1#4f<x04VE}qmZYhe5F1kRK(mS26nns~|x@=aL%Law~41A)U}!OkI*oNJos
z&#L0P@SuqDXZZ4(2qCZ3EIl69px`_Id?3{Yy7}h$>0hM^))@pG>L-eK-xc49rhGf|
zql0Fxn6B!xrrxfd#)sh))C}G(AG=KZ!1v=knA{K5GGwPgnI`0K^Brwx9AvEXw3PEA
z$?T-9tleHCY%NT+0GpH$()np`3TnfyGaaOBBS%PKq$KEM$Esc{3*<1%Vq_Ci4V=!v
z6=05$f&^iFXt!LVvM5wvHKK8cOuWZ&v}6K^R(>DrNgDCLK}EcNOnF{ARN0X)S+XAX
z!Ar#}mGwm%sK@daX0onStaR&Uea@5g0F_d{(X9$(?w7i+6#zXV6V@l1_a)eTb;6^S
z_;T$t^kvHjr3WcetV7Ov@!I=aT1RHNb05ykk>v#oSyGe5O=Dru46gWgOwZxt!Mx{$
zKuaqtPC$ft`(DYwOpIT{Wh_5DuVFATwN#81+@GEqu0s8lEUvj?hG;RAnDhe2_ZErp
z-$_&Va(YrJ=I=hHEFNrI`k>ZV%K*_2XSOgCs2{t&MCQ5?pUQ)B)UH28i5so05^I@T
z>HQf;9ozXGp3EqA-p}Qs)M4cn!rE_mvoFZ-XKk5v9kF|NBGqppr&=H0+_xl`cGKA+
zcsW70qA<MSh&jwXNCTec+u6N9jY|OnetIpF!!%I$rq{p26Z*CqqouM&<7tsY&`aGc
z=6P>hS^c0n$<6wIRa}ADF9Q>2|A!L$!gvZGK*N8s_|V~=iT5!j73iI}WSv%+g-}s4
zZreSZTG+o#IELPRCEM3fp=JB92phII*EjVSRx7RiVb($)gvC5qEXI#3Yz;xJ_L4I8
zAORzI`sju$Yf9G!s+bH+e-)pVbMF1}yF)41`*3Y#l=wWM=v|wBQI<x0O0VV^y$7oE
z&d_3|3}o0(gz`J<nfZw4NAZ501ceV4o+JZXy_^)@wnqty?V~+L?jzod4|2F|mz-a*
zp#$(PEd;~)Rx80xR|&$rZafRP<14fCw}T;F-XtwZx^Bj{uG<xi@4|BzkI4c;H;kMa
z#DckD&Qh>aP|h3Oem&n#M#q*(YvAK`&|{y|Cgo}9FC$i)fF<JQ?h^cA5zjq8F|xCi
zgCG#J0b}h=n0W;Gg|;TWkI(&BIv)2U(_j7aqByv>9YzAgkM;t`Esw>apzTkNL0r;9
zVORIuhHd?sqE1x+jK}Pku}L%T0tO~k)>-9S2d#|u05tW=3VZZkJSA}4^X_==Sgf!3
z2s!TaBPBIp9Q{k=_jO35#w0d_jfm@U)y?9lxqM5>k_*M@dD3}+Yeipka)7ulR4^mw
zR$0MiN=T)EA4|^5&@&>I-U0}C|Cmjv(V^Bi6{Zz70H7zc&6i<^9PY>Mgt=cn1m=70
zH)Z6nC6~ic_vCzY(s6vJ(wE&ft^aEa)&B|S4Xe`w?Gj`tRw*)9iveLaR5rtU0fr$4
z7g~b))R(Z2YWd5=J$37VFUTH-Q7W^j^}>j#0qFwpN15p2Yh^VYxlXSwx_t083}j~R
zWl!(CQU8I+-o;9DrOjL~;`0|7KlwhJ$0y^@Mjxs~mWg>jh#44$4Vkhigg-5EEch&#
z$!&Yu_KqK3_f|d{<k0?M<o0twP|k(9Q;ckva!mju;FmQZUwhWV*4UA>dk=Unwu~&h
zS4->%OgC@k_!h=yg{+=msqozY#n)(_qtM&mbUB{ea*@vG3bP*1J&ESJiZ{9$d1uNL
zex6+|8sSH<*`NC~c`Jode($uYg2hV$hpEq>PBYT}GnW#C%TUN~4loc;NIzPtbvFHZ
z0<yt$%_TXfg-|IN9l|6DYb3g>g;5sR#kFtT7(I=XW{mr(8nD@PO``V4Se?Wyvdm@h
zS($!n03Sl~pg!`FTmdTQg#1Bfx!Cl<=cTyMETNvfXIZ8thR}Sp+iCc&eHrA!@#hn=
zM~Zd1@nBTUqrSg{;y3xz>x*=!WUfzR$kM4Du=Jk-vKpPDx<YHBdhQp!IO}#dyZHiy
zAz}4PJ7cKpVAv}~hMr%C21C*_V>|3*&tYgLwb$?RLAF~1v|lc&<L-R&5kPV5Tj5W(
zEq8bnw&ingO8HfntmO>`q0Zp*Pd_0dokxiIu_Fz48UKe3gHbv<-x=Ay(w^OFqd(2c
zVRe$4lVZLJX%ytuS6$8=C=Vwo`uv?%{L4b)3R4B8<&LnG(&BzDd9RFEIDsRH0Wbyp
zP5;+>r?D5zpjk`r0edl(aT)BXk?WL>N_RcKS6JZm$^cx_awET-hwRE4x@_Q<fB_~C
z(J`#TQZ2u3&(tn_(0Wo(8r)Nmvz!Z4+wXyAcD!hPIB*?fUvw3-a8dl=WB=rf2jE6u
z*~gG&K!SK68G7LACULq{d=P8S7Jetg$d>QPw}f)T;^&I24g#lM%&7h2Ph?NxFNE<g
z|0qP4+7B|S_*E$sn@Y1mR(TguxmrIv<A0^K5IQ|=ZZXD?2@ct#&-Cg!A2=+D@;u9C
zg!)^kI<%;6syi?IX77$St7t!+el4m%7kUYKj1ot*KN>=WG>db52|9HUKzEyukF@H6
zn?-qz$jtdNe9t=;;D`kyp4zM={wv;|^%Mv#$i6I1y}}&6iFA(T?md7djJzrK>1bMc
ziD`>4D8ArfS<5^(emvY!f4B5sZmj=(yyd^P^jy9ag=|%cb^2=j^og6>t8Vj4-L==$
zn{#icbO-}aa5u_#+D3*lKSTh(uKjujPai4*ZkBHXrscjf{_=5wr*6fTJhe#J1RkA;
zd-jumJ-W9VUG#ujv<!*se@irA(#xuTns4F)Yrdt(^(7mCOX=&zFmU5C8?(TNNgs0C
z3Qm=Oli=_$M^~ZONO1qp>)cM=jrQ!0$H?|JkgCJ_&tz!eUiHT6i|1n8;ad;fjPwyz
z*Oo*Tl>do)2@Xwg4S6bY-wG(`4+`R9?qV~M+(5ivU~~-gm79MGlw9KzbTjliV@UGS
z2cOYkSi0?qVxgopPawsyGk>~@N#Qgf^^a-1-iA}@tMUgZaQOas*Jq`t_|CrP1F{8L
zh|toPib8DxmJf3$PuD3wZ)GaQke;SNY27l&N83q=u!C`-*)QdW06Fwp#(fppVqZA<
zME%F<QK?f0;dJy3(?YvPx}LoezNd3;;d{08_gLuM#w`0A<)hAu?EW36`rMu3l;i2Q
zyFG1F7ufaT>RxN>M_s3k**a59S@+}PZ`O28mjBaTE*v$hTFvaCV$}Df@O;!~TPe_x
zjinXWSoJ6{05v+9I?MOBYNKRNzvW|t#Odho8uIntX0RA})af}|;B+~U4V<U9(fHY@
zIcW0hHXz26)$UGy)z7GNl~fFQsonjNvie&Euhc`~)Gc1Nhxu_lAeDcn{&ALgqvvMG
zPg!k!0N`9?_4xTc*US>(1``<5BTG1b@-=sI$DPiP37>2H@fFO14tHL!ZfF|`B7)h6
zD8!qi4K5+K6a(c9FIe31+t0Uql~B(VZeMj{O}v1h8!(#+p{Bzw6q|%vEWMg}xND@g
z<V<6twz*jU_TrgJa6;SO@?G+M$o=n6Cd!1}1z-}2ERz0zZyFpJXZlv@voTN&b-bVQ
zl`T!q$DD{*ulQP5QVju`kI|O>*}A{=_D*=<gUKE-TqlF$1N<q1J4MOhWAUVq1(&W7
z5f&~VFv6rjCO8VV5C>Ln4-}TRo=NYt8VTg-a4gx}AF6+aA8SqHZ+kR|87+`sj7P8k
zxFn9etQ$V6m-9I6?ut%;Q-L-oGnhPCNm$fU>v%!<qa#oGg<aR=M5V+COT5#&Taa+m
z>3LP?=^I~V`C8(%iu4>(AqT>&A5tKJOU@FniA)ONYa<tP>R%u(6_l5Ep&$zFzs>Ns
zKoMKok_u}h_KR$%o>_0?l`>iu5cjj?eAZqpX}fp+KMTXlZU8{A?1pB|e|G%-zwkgK
zF%p<homBl%3pP$j0%lJVlA8Y>FLoY610NhK2Ld#v78h&^+5w6syO5Ocly2cVqmUcw
z$2B6C0+Iwh69hl4UD6W&fxd}eZ!}UxUKWQ+s#M27UM1V&xf;E{)vuaJmyD0IwO@%n
zjMopd7g%*Yuq%K)P_uUfS7@7Dd-cXYL0ONb<!x2XhXi(AzWWYOe~ectd)$9LVB`<t
zjY@_>;)+6CEz@#tV)^g1tcydC=?{>e3iB*Qd`xAoCBVl-R_f^#%AvedJ<#q%2uQt_
zRw4L3F$2(CjxMt5#ps;yVOS?0n+_0E`zjvu-|zhUjdMgg?2Z46^-{8@iYMin)oY*f
zP5S3sbv+WKX9Xi<1Mi7hJUo~7S@tjfzVu%kj_tOt{Cfxwa2>rwvkL8|x{?hni_2Mg
zTpsEL7$SCYd|c#JUXdHaojK$!W3+(!Guu2d-AUOTV!Ccly4O-czY1>>jAQ~U38^Sp
zT+M!oknb@4pq36p`pV=>S(Aq9+J>HIw=B!0cx^tmJ<nr#0;IWXIEXwQ<nC~){9R5j
z=wFqtD=t<w>AktE7$-Q0K>TiHUL9nAplOrsUqbk0ivL~xX>Y`I+8;u?RMeho^{Zg|
z)moC#o`a&LxXNZ5%)=tg*x9cuswx3y3#{=e-{tx5;{0;)FM_;yP4zzm&Hv9gEc?3(
zUoC4^LoHLWY7JAbF-vl7NqAOrd4=1=vn4ona|yRs*gXoNlb<dJT70(5g1@h<!SRm)
zFx?(JJ^6~*g9gpPS2d#6zZDiOzxi@_8Tz!?#2;2<;dW5is^h}N2<{keOp-1RbMCQ1
z{JmXBpB-8VPazJ=;%AG2OS~ng<2&kq(e@tTaJJpr@aPgf(V`7O5G@4JGDEb87M)2L
zOhlKW1Q|Vv7Dn{wqW4aO=td8thlt(@Mu{2iyYsyJ$@{$fefIwM_wWBd?#W?7IAUF^
zoolUYowx$u@r09oIz0KF2kkQL0~v$8FD7C!d<EjVY@7R@7rn(h*O8cjf}6R6#z}XX
z;ts33?m*F(oU}JADLEOYm|CqUB>={E=}_Uj7)crp2L$B9fj}I(Z^?)l#&J@8ZOND;
zJX7P^(e>JS#$`jFH3p5d9vy|H_y}ameC2NLWyYE6fZCGZ<a!pd#7K~3Z1CoPacc$0
zng0FdrVV6c>umW%iN6>ySv1mtOgrPa`H-)jN;BkFaAwkac3W};C{9#Y=&A{~prySB
z=L%(=*{K!OQfkn4sZ}T%F^??N^hv_Q)prt4wD(4Vmcjz<0|$M_%^r1md?=7q!yB=g
zv9n2`%Q?>yN+)`PBC1DBfWjxHHMlK+L0>eE@x3!MJIcIkqF)K&!X{5k?06j@Aiu#>
zKcAkfL%pQV)g3`|6^<2@6832yZ3&v_N4<|mV}K@+XNY20#OY<e>fsfPY<KCys-A(C
zAOm{7{;wjk?L_1nszv;&PQMB3O&9<@GhyJG`tKW7|B?!&{{XD|&h$+;<zLEbqJJUg
zo8MF9!*k%$O9V~zD816&{RjQb8K|yn(6#c6%*RP;)w2biMr@9u8L+45)!ldS&E>sJ
zjlEgXCfD%Q;BF<KlbEKbY+CPAWU!f~WO5FA!VP0V<^iI(C8fd>J7L+~Zj?p5Ex1aO
zkx}=7<s9r4%<0WU1t86UhAP5dc@89rt}If5jNRR8twaALucwqdC6HaWM1oOPxo&5a
zMO>-d#6iFC1Uvpof=o_Sb~hGmmKX$aKU4x^OenM3N~Diy3*C@XXRg0MNY|r(3WxWX
zaCooE{nO0;E4rTFpI1n^yhHFxR&CwymtvKnFYyESuBpiN7b^K7BkqMe<|^kSdYQRC
zEUYxLn<IKRa~ffL24Vedc&uSEKp@NzJHfmVHi)G)#&w5j7h{L#fq`8e4q`J|9a&h1
zjyFay?(lU=kV(&Lnmb|CNgTN0>v3bn(p7do%VQ?wMh`6gL))xOq!Gew?A}gM^Pb92
z{OF0jme;jfv_NaDN}h{qnih9U+1~2UF7nVsE$5apPpnoNJ-<qib4Ym`Quxq57LMrP
zq`qUmWZ9Pr0K%~k%!!57QSc`t6a8a3AKB+W{@mOR+cwP~owxigr@Tl%AfyGO|DWn7
zf4w_y;`GZht25jz{!pR?@+#X=dDpF(H$>#a^O;2C*H3cMi9NO)qppQx@&&C!NB4b;
z@y?C~^{Q&{!-;<Tw$UDxm(!>>LP-bW+Jn-@?dFcLnlggt7f{sD4sNLTk`2V&>O*`Q
zte60dv(vUjT8WEJ-vWGkpW>hcwCA<C_arQY(Y%n8H##KSLqQ?yGX0u~$0xh5yW?RQ
zOyNL{gNR*>SYdZD9<5|7jfRUVZ$5Uny1KeME}MV~4?0;Fd|_Z60F^qiR?0o8z+CMS
zm1_*%?<qxA!I)0nch_#en6G#l8n*8f@)ts0fb|uWap(Vzkk_7j7D&>liiv(D8_g_g
z>5HJ&osT>DyK@Qzcfut|Fa<5DYUQ`1)+NyKGUV>|g&5uVetFnFOQ-X-K1H40OuW;Y
z?Ymab)v|YLjXkJv>BY{HlXitcZdmm4@O7wrhsH|2PT_&Lj@TpPX&J<`bhz}`H`{_b
ze!G5dBuNwrmmeaK@NI<rTRKNrgGJ%0xmcAYu2)BF2N9vXo25gr&?etu;Iki4Y%;N!
zE7L$eQLYYLJGuIncQOo#86KBD;PqwE!0Gz}rv#N+c8$<U0~lJ&8VR_f{-nHCU?3Mt
zFk~}Yof^7+H1*qg|4;Z()7^;^JJ)L?Zu9$B{)d$+@C+iYSH<#f18G6{K<iPS5A5~c
z+hH#U{KSZ!ju}08)VP<?@O>9b_DM%fL>(~k5)_Abge?y;hCa98CN;DLI?Okr{jbyP
zn|6oc!TY-lx|%TD2R=rc04<lU0k2?y89wP}cBx5KsDJ6<zzItj;h3~Sa)NV&^jlM*
zs6!HEnb8UY#|j4yFDE_Oj<#E`^GuGq-)Nt$BjQDUf<e(5k&-&1l!y~M|5CQ{q++_y
z9F9kvcA882Y~c(#Pwp&P342AW=gL$86|&>u3t?)XBE|njR5+xHNlj#vmGHlZuK(sU
z2a4%#LCYCive&%}QE$Ik{t@^F6E0LaPG2pWDLvSI7Ct=x%Sq|&-Ipt2*{n)qM0S4x
z=8m3cpk)t)g^oHSW&^v7y<9`pQ?dA=IYC{H`K%3Y$i}@D+i+}$Y8n~F<k=!Bym8YW
zBS=$saU~lUO9sYc!>1D|{MYYPNlT%lov($L5|K<wNIB`TMmNpdhO-P`2RE)IK%Tii
z1<3)%#IPR?cgW~K2l9ixad$gmbW6q$VPCsuu0yJZ>>#)`g#IRW?7A;<HU8EQ+5_)p
z&4*q;u~%D7f5#^y6$@NNtmRxTlJ!qEJ^;o24_<jRgzTTHfsyh;;u46sY|tO~Ulb76
z28E2&UI05CK7K^o{Tc(mm?3jtVOpZYtY9O@@V3-xYpdwm#nXd$YL{{`BPamPguc3F
z`ePT`A1;@REa^GI)~s$_M$2Or^ACovR=f*>&`6<2VtP^1<ia>QcCYlbv6-83^vgCv
zz+DWur$i~NIKaR`&%cr}o1}vCGeL0aRb<YEOWylO_C(mrJo_+kIRn(a5)$d3(wKLB
zSuGdW&Kt2Tn1&qW4ppL5KC8&oK&+{Z$<IIE0iC-#C0-uIF-0EmL%oz8a<#^ju4pvg
z2=Z85WlN*7LBU-IdX`%0|H6EI@4^w|t9!c>e~`%kH@fuKFS)5U*Mdi`+#?hJ1(&ZW
zrK=P!XE>Zo0ojsP_y92Y%33_{1yimbDLBq~{4hY|08xau$LTr%SgzdQg?3nkXMTjN
zQ-`5Ea;JkveZ@{QqAHc`wrr}a)4n0X{Npvp_QA<AZWyqyq9_bP^TAD=34>fxi%08G
z?@Kb06g~5c3K24IeN%O1&6dP3`3Mxr6cT<n_rO+@jiV#015L!aWXNjh`Ej4uPX0hf
zNa3t%7VO($^BI<ehXr9bI<ET8$uHZQO-KN71!q^TvDzDSWC!19&ecNV(f`0RcU%7i
zexsaaPrqQxkOIENu-_{8KY3$B=FjMq_?p_x(5hBeTsr3u?P^ZEo9@~BIAhAM=9}Nn
zGXN!T`X@TCXXcOQlxd(Yo@ZW%>xjTl$^qtOhFL@#O4hNXSx0s>OU+OU3<fgr(aRJq
zXgH8nolNkAhG}`j)Dwe{<QuJOk_$ta>u;XN8vCNaSHbiAO^5Bwy7JG*Oz4Zy1oy7x
zu#N@T4MQMz3ohR<r*r~#LSnK{rTdik2)dA|5={!2`QET1CDON&aF+xf5g74p+<PTx
z3OML}M75P#Od6z|A-?hZqtMvNrB3-1o>hjl#<A9i9qnJJ$UiR-ysGyG{l&9OUO2k;
z%AT;Y{*T}Icb4?uzA<>`_XLu6mB0QMLTQEpLMlr9AysAuT;_*4a@gnas+23SOMYN^
zvYxx7;eG31yziYE8PSL9h37dxSk$-rEc@g)Lz(JLPo;#T&^>mI6%LJ91Yg`(yNUOb
zYHs4weq&)7#BwDR#&M{F#FIOHdW<X|zB)0CTem^Cmz+AJZjRbl=h<sr?=)4}Yah<k
z`n9L-l~nrEib}3|v9T~U0$;r9rJcMl<{nE5rFDcsT9IYtBCis>T9^?^g8~tU=~EZ!
zlZ;&KVgsd8dQGGb1GP5vd|b(Wg6A{%pv720Ncm)E?!Y(oUR8S0;kXazKh^8neQUzr
z_+m<xFrzo~*@CSX8#n$8k^im0ey67+!3ujObmJ9TdxHhum4hE7d7b~P_V8<@1Jmep
z81dVXy@fV7%ZLtl!TblGM4t@v#sVrEYDfX@v1Y%FPy2oNGYK8Z$u;?9eyHSBPuhBj
zx==^hw59<#qV&0*V51NuF;Hu-OM`l;6P+pMvdTSlGhQZ?i&Yr+KG2o}_myam4%mc|
zbfw@}g`iMQ^uUHY;ElN`rMHu^JJxR3u2*%JfgY!3D6opXY;dxcdxqumvGhUrXn=uP
zRNW$A=>_=_mh-hw-`s0O9UmByLC}4#mZvL%hUSij4>qTK{zj9?eD+zp?iZ=@rtYF=
zVLzw^tJ?Ga$p!vf82@)~6u5Z+SFioc)wh4F68N?DL;2!?KyXeCteBc8=Hnx&O|QHr
zbbJtt13K8ME0u9>IM<!^9lNjh{l;Z0W1o5M3EJw!(!{6X44H!{=_7uqgK7}CZYc4Y
zYiJOS&U&dypRUj5r4Fr?e3b8cp^TyP1%n5=lu`xZ!)j?Yup%i_Q*&ejjdVvlT#TTU
z$xt)^+pFfu%pJQ1lzaM?Fchz~bv7T1%HuEsP5Y~~IESKxF6iijsGJuv2JoaKo!@04
z-jI~CM~k6WHO{|N^Z!Zc`<s8`kJd=HE?l-eJ#&gc37+snC>E4bBqXP<hl)BH2J5uA
zW@yR6MjscVA2ecON-wOW69kC5Na%Pw_6;WvJzG}-tGo5h>H2(S2$Ov}+LWo30H4r7
z<hl%>K8n_8>`FTd_E=JdZ!yT#z`__GCMmRA%n99V7Kmix#7`XTTsVWtyS(Rnu=%*-
zXT!(h`M|X0PG<;YPtQ9s&0``VEEP%q$0`(lQR=hB+~zcycBP$BlRaSF{+)-#WWH9b
z{h236JNzYBgxWxYk;{_WL!RoJKj_oG?}A#VA$}n0-;~t<GpqW~iu5ZhkT+6&!8#E^
z^b6SW0Jf7un#AI~UY(zo(}7m<mK2t?FQ8j5xw3a7{sFx~P(QQpt2h~~U@{-{`E}^C
z9b@e!<Nn(9PrHhp53%~W+Eg+)jG*!6<A5~RDj45xnHZDzx*Byy__U+wAFCcbi%bE`
zGmp7y_boYx6n;QBVqxzS3aYp-70fTfdWRXIwj=N@#wtrR0%V&RnlIgc72;(zpL=q|
z|9JB;j=A?%xIg>t56tbOtZI$+yXq=pyW>7fnIHR>EZ?Fw%ahgy_kavxDZX?$Q*E-7
zk3+#k-iqW2)BjRTeitOH2!&x%6lP>qOQ6<YD=}zD_T&pHb2uJKel1TrFf`B!>w>$j
z8R+MFua_(-30VmO{o~CMyJ33~FZ}BO8Zqlk!#)X8@38>Ua-K<6pfB`h`2&Lbs+@}l
z?UKGGtV8JSJG{NmCytH*!tuqhfU!p<%eIP><cQA}0eSKh6EVxQN(dZ(1RAT7hA&8)
ze9s-c8ViTKl@xWqY5CS1!XMI>V6+iD?I_Z?+LM%<Jh6kZySz{C@|CPu8S!;+q4Xp%
zi~~;1Nn7uP#DC#vvTg5KTDz1v_S;|oUG?a%xzT_1KKw1vrvv>8{Cw@!K$g_{$P<6p
z-9EQ21f;7~Lk$|dI$?+kr$N2)atJNl%`W}qeqfl?&*mC@vW6Ik?N}C_^aPsWLf)Y>
zbmU<tfR_kWgQn!N9nr;~3Xn>5+~??chkC9$uBqp3uMdB=2rrJCb>niR6!^vl+W#OB
zFZC8G>qHBkz8V?O3iig|5qM*<K@wyBGzPxG9gmD*Wj$MEP?POg;Uw5-OGV#Du7zYi
zEKg!r7-ZGP?Yx7^;#Yy<RzrkIkp^y#)2wr1TkggDP<?3F)Bg{=@U?${x6_@Et!ulc
z^kDnq{LCEA#5kB8JLrCR^?Lbk#u?1(#Na_V2NXzm7j(ej6M>yv6$v#lOs*_0y)%e8
z*s6e$?Q`g-_d3(H)c0l!B?X{+wEKM>WQwKLk3)}Cjvv1*J$YYv0;?VKH<v-&0xS8f
z+Vk+_QCM<0zI}Z$nbRUul+_zo2sXSzzPw)M?+VMDzp<=~JfYVCVbsgG5=)b-<oguM
zh)io4Bb8j%1f^twp+@?o>dX4>`=J>)-B{FXQ5V|H9vuzJr4OZUL*mX%X%LrdBJAbg
z$Y`%#{9oD?;C}8uCu)86EF2igR7B>*=gg*lvbXOx4AV+Wv|BG&%k_Ddz_hFf*D8m)
z@FpsS@k6{j;%H=O(MRtD57bYq8dsw(xa5=Z`DT=zxoWKonoo)wyY~;v#$5KruhQ*u
zLD?>nK>Is#j_fH;3ni}E{msoX5J;`uAfeO~8zO>}IpSw@M_&p*kj~d&_;VKkp+LlP
zq)q@08SP>i<UkFT<w6gC!cmNhtE+I(G+#5hiK9IPDsn0)s8@d*>SSwScnS~=$^TX~
znS4MwTk#er@(PpYXGzJ?g0DFdiIaBrIc_%;+{SccapI~wZ9%dQxDVWM&N2$3?B$+=
z*`5qUP#iyym<`((1G{*vsjH{kBf;gvVvr&_T_1EPubkAYat~Vl-Ku4YIPCD%_PeLq
zYC*QXb-GlI73q_qQrR7JI$@7pR;%fdYnjo)?l&h^{b}wJ*DnJ|47t{w3GDRQ(51$8
zf#J_F^8<miIwHh!0a_ceY4h0*%DE<?nQfF4gW00V*i6A>U}~aVun8G5E(Y=DLzzD{
z-qm~aXAbu_f%<=dY=Q5xZ6Hppg<ZjKjpB|zwxSl=sL1K>6y`i2!Hu{S`T?l59+=XA
z9E^TCRd5?0vDyIL*?fE!8ic~Pb3tjmmefSSRsy;63!=9r=lhh@;0}erEKzRxe3jn8
z&puvi$Rd}NYzN>G%yF2xw7(y>x44W9-SGGOW8R)XRWxAP7IGs?pW2G^*S!7MeUlSZ
z>E_YJGFPlkAB^^Ma1U3Kxnl=sDu=7QYyzjZfi)zwBf&#H7z^0D-Q~1K{ZzQb2ipr8
z|9gkCz&rTCt+H$_mA#H&ZsABMl;&WFjZwkCp@hZWmHyt|eWhY0k|VAW^Fp8#;smqG
z>q>;Uv)@oCWvg0U3It0|T|)Pi;@Z_>bX@dPs7WmrTH>YKjach(Zar!a<MP<Oyi|x8
z>)ujn^<6&S`5R<%&tmx89j+1Q6=#JZEQKOFF!uf|09p2BVy9O|4jEcAoB>%(FtP41
zi}-M9U=`D1;mKQ1W<)2P=Gp47)dJO>B3Ei}TzAe%6}i_I3L++{y&~u<VFSVPQj^ig
zq?M0p!hKS#ng*hHHMX6{C@cT2nzo+S%$L^J7j?M#weT!jE)(bj1=8)Losufe<Xt}Y
z#^k{{M4crs?Y#7rY<08!XZa+Ll)x8mL}lVG`4_dbl^`A)+eS=P*?C(b>8^F!JVWLI
zWU$|K!0d?7to#nuLA$rYqljFzmnqPZYe{2qQHSlLw09YR`)Lo{`#VuEXUC)KP+?rx
z0KtVN)U=*h0t)qt8OHbQ3L;*_j7Iirx0=wBp@x%}rOyfNGH`)S8UHOW5q`ml>1u)y
zrRCmal~gt(+?*CyM#`|z%U6J9jZX8M&ty_a>U?9qH!QQ-6(U-Ujn;R_LUjc-TG@#}
z=Ce<ZI2WV;ocT0z&<Cu%_@w>5&*ti`rSJr^3&=9_!-x5oMnx93f0Ii4<N3;J&J>Ey
z)B)K^h!CDt&U`dSp(|LLL|J+T=iEka5j6eWNcy<<&*q&1j`+me6!);`UqttfcnrOb
zz|9^2_tBmaweBAYy`_0QSdb*rFy{w*@(ORqPOcCHY#iu|1;mh7cP-AoVHeT3-g;%&
zCIY)qc(O`2|Ly_qeI~MJ011rs;V@QhL7u==pC;VJ>K1Du+FWe(lG-sQv8xofs8A*K
zE9haPIc8YGqDG|^x|JCN%cMIVVaO5tglOiZ^iF4vqIru>_&-MbI$D`pN|^U0b4J6m
zWZ0-VX?~6NjpKt~bEtdAfM3qRFmr_yp&3l3h^2Vn<fs81ZD9H<I3&GoObX&178XBK
zjja1FsEhbJ`FZh_NdfZX*p-dFAOZU&KU;Vrsae7d6IJL;H*2Kd%rO=DO#VN6Qk-1(
zQ?`5KMB#Lyp`nBajDm&?QSJ79(<X%suqs<RShYRFR8>)ySm~t0&A;eoUa*2&BdVAm
zotOi^(sbd;R82Url_GQ_cR6vp&yzpY2pE`aTr<p&@IqJp8dF+XPkPkR`bHG-9}{z%
zRl(TY#y&M$LmC}<`}$qu@LQ)<IqYfsn1?5BgPiVrFLmMN!^oa&7I!3OF7ssH^cG?%
ze7Z;{X}Pl&{o$1)H7#GopzFJKD}RNUaQR8fV#obz)9S=Pnma=N21)2Bs8q;okE)=q
z&;0d>6J|m1hGkJ5HbZMg9X$FzHLi`MD9x=*1lRyoq~i$mIE`>?f>0lFG1`6yreju7
zvrmr7IR}4sjQ<)OY(az$3pDL4pi2Ejg-q^Q=yCWDUORdU?C}TP21;{fBHEpoO$6z3
z05|NP5GY0|y<jH(*^xze6tBa#mcUkF7upP`sT#<u`{d}q-1s+XBR4oWo{)5W5Gzs(
zR1_|M7#=x#3atGd8!^-8E`C6rm#JEoUpo1Gz1S^Dv7n9Svwdy(Tp=#>HMJs2+iSfs
z7R-KC&btEv@wTte&eV}d|IMUX>FwdplH|9sC>*)$l3p0ls$rpM*|=Brlu;RsSsocD
zz2bl%L`48|W-up8C_oyX3aJ_4qu!exu}S@N%q-qx!gEjn09CRu?CytoB{(puAle?6
zCkkD*6P}3CD3>tudCs-!xucZ(4|J%a(!mWFeD~i)TVTcIFM+P7RoqNeSolMr+md#a
zf`CB98ZMeEDg6>CSDsw%Uj)i~e-uzzAybynFo8Lfy=?1VM&$F&#3s7!zce-gEMa&G
zsS)71F5~y~;kRM6UDHcIjTv_hAf~@wm1~}ubkRVEy&fm)ytdm?BGY~+D9=3^vg?`G
zffj*|I^T@b+KU0-mf>05#dwwHmdC=ycH6!r$UX-gDRN6zcAhg-1%5m<8FLw2td0xO
zq7Jc|4>Cu<Qdz<-jRQ@Ky#9+9S?}EfYPLHZa;>c-@0hXr$yFWb%>JB()|13|{7@%~
zufO!p`AA#|h1^*MLf;ui%o;%Di!JQPajP^&Ph_{DAYPk`dTiB4h!sWK_rqL}&kNAE
zYCB|@zk^9siWW{M{w7LK-L)^<Iuf7QG?jn88jiT_1DA*xZz%-i?6W-%b+M87ZN>iB
zUkX?8nu4i#w-#)B9uo$vh%i_Bb(!w>%YoCszz1AU>RjB)%LinC^eK$(L6f%B^n(R)
z!023KXqG^`n(Z*&dCg!ur3NTOGbTZ3qG}3;uQ|hdwal$BSbpfIDs6e{o6rv3!n%p!
zZ|!<Mj`>jB6^%#3FnTg5zCeJFsS(x$E56;Idy+4rU7SjrRnt0O%_V$2Jio&M0Zhj=
zYzA~P)A8WFFfn9c^L7cS&s*Rk0|zh)tw|rqh++FIz>GkM+(~0DzK8G0KhaJ3nT={%
zzO3XBn`#80kjntPz<q@VK*eD3`%@k6nI0g^EE-PbOaHEq{-j*@r@_Jf$vE}EA{Q<7
z$wK1+FL(hwy64@kb_YFNC`(ZFC*MQX&VtXOqgu_|VWV0TyR3r#)w`d!x4|qM^_Y!c
z#d_cc-111zIcF?g|7lIZC}hu)e$O3Ko=L+gk<T=e^xJcrZ2V#KIm9`hd&?Pyg>iiC
zw|}A5sL%Pqsayv`BU;?_XZmn0Gs%E(h;XYsayMfjFkK%WL?MByE7%fw+xzhATCU5L
zh0-7~nc(aXzQsBYXeRJz;7y|wi3ogA5~TPr@=N%7pLQ5OBV@nYW~npC<1O7%cewpg
z?Ca6j{M5n}N+$eCk=m??K2o~_asvZvDI`OXQ4(6jdtHf5S=f8CXTXGWm(CGCRLBc)
zp~H!5BM{Lv-j1Q!<@0tNXOm$t$DzUwU^tVweoP5YQ=`4R_Sw-C6C5k}?C)|&h11J<
zKWN$?78&6j42I!l#vIkp3jz7!B>rE^7veW4@tyDc>wkI(35GvxKYugc`_}};!%gil
zls38ko|d9S_0T6Lg@fhm1vWxp7{mR{&Y(#r+~B<(L|-QU$4EpPx<@BW+bM$vv1E+w
z5Mgr=@fr;il#)^|56(FKFq~>a<^{Vwu{L}OH8C0Fs2h6$!DEKd)(<S@DK54}v}4{3
zCBSY-IcX<d;@PL4CQ`LnLZRmE%_kX`ZQkA>dsm7NMWroAr6o~$w5^j8IwlIj(fJVS
zJ+Ur6=#sWKMhrOF#juEzZ;t6F<w*nFP?++@Htq4}1uAlGB+(so2mIfAA}oFiZoZs3
zR@I4TSL+CBOhg4(qcoJ3OPD@NYFdfJ1{VHEJMGE*I%z<D<c%>fSKrS31SCg48_!dV
ze$=<0{Wf(&uKQElVg-2b_rS=((r6j#pYlvl@TSXK|5<)eor>?$e-83zrOjzqBcsjB
z)dt%aN{-DDhUe#tgwjAp42RV^nRPQDXCqH?y*5|rPA;m*48`Hv$K~-ONI|IgSW5!3
zr_}3tfAnp3wV#@cg<_4DmM}<cbfB2qT2C69H<e?5Uox#6iKxZveVkZV>*@!wu<C}@
z0K6%&5mY<rnWOSB#f;H6h+9p%`@zc#(H!Oqs0fowSZtO{tZ`##d<kz#Y2$p(UiW~B
zaO0vLWa+VHT5=+|{woXv5J}h%PiD#{X;5bYbtgs!29!xT;fue6#v@Swbs&$bX}Vi-
z&OWAtezQ0fS+^17++UHPvGlFr*yjAa@&(7N9=$26Gf|6QA+r$)om;=3j9@DRg8{uR
zt+HkUNQG8im0qzsJ(%FKNPr(Rs4}=B^wZ-D4vh5U$=tK}^MkP+NlEXQ%kBf;UMlA8
z$={CEPSN-Nlw1Gl80m)9*efm!B{}gdFJMz|0^13f$)+BkLEaw<?Vfxm{O6-CbbphL
zd#$05h&GCiYG6Tl_Fta+ri^!GQN=~O263tOqXji$pUxa=()!+<SAj^dmFUt$EuI;N
zqn+xw;oJGh;@EhEWd35a(iPtq`*l9sF>4g1`$>*@aJT(<^MhPX-)_!WpJ=MR5=xI%
z(eoFv7#)tQG#C`s2bzj(CCGLRuacK$EN^#4iu{9^PVpQZ#&2jp1Z&Ut&A-l*O1wwS
zG%ID;gCD^uGo==;awRhaz7@s&RXoa)Dm=R!10Fi!(Xhr}V(^cl@(EYRXRBGaSzRz+
zi~E*mzGnRSQ3xDQ$A4O&1gENW`s}eA_3VZRmT~95cueRR?;hVNnxN?xv;qq%t%O$f
zhK`tBsS!2^s@3r6%|6{;iC=zT%s_FpXJsf8<pUjpS-8pnJoOgeGM&eLCTaNnM46;d
z$fyo^z9-}4kzq;ge9-(aPkMz=q$|e*(}jG>+vh)h&zTHL&5Kho)y<AgNmNa?$s4;F
z*9J%h3|W0fu1@mTv%2l{pdQSE)^~=DzK$*|&nc27t!qgMWrlfmjV9%remBOO$#jiP
z@FcmfDRX#sOPVGzl^)$y+4+>!Si*+asM*);G`V<<m|la0`8jjhqjd|r$RE`DojF8y
z6&aWb89y>{LZ|0rxl|uSx1yA8d%E65Iq+1s5rr_FMrmCHKPN%n_*$k3HjbcvvyKU)
z)LWnMUHrJU_*FuCUxO)sp9uL>{rSU`4dyq+@j|Ausn8F6PYC{t$DhH{ze=<{^fa>J
z>S4LKYsuaEqPx?vmQ#1!Jn9!~A5Nb8_}DeN8J7D&MU7&)*M4#rlNfcn%*^l&r}C!G
z{6&hKAta$G2%eO9PtcvH%sJ103jZJPuJ;nEuaw71ruGaWu5u<jx(eTzdh)ofmc_<a
z3Rx(iw8&K*qH|EC8#Ex5glt(t3CmQezd^PL=+mH%G^Iv#QVPj@cIyyX)bAZvgLLqj
z*29mc*0>?qNn0CD?CbHPJf@Z~pWVoNO&ehm$bF@%uqtpC$>l))IOdO}83uBJj@1si
z6BqWQddl_@fySx^?DFeM>|0$!EzwAQhKRN;B{?3m5}|d@wE$y88C7o&OOoCiQxiHH
zQspxEPV{u7&Z}$q%UNWQK^&EVTK!^kU{S$iZo*cNXs>@)V3RGOGK-d0i<SVA79Hp*
zy^v`I&k=s(NfDLQ*GCKKfC(#xvq%Ow)qItm@Y?uPnBsIo{gT2Uhh(UcR`5{ix%H0+
z*6Xl$?xycP2@a#}+&qD!F!}%EC<ZIhEDp>~5!aO!Ol)i5{coPsvTZNzqeLYSj&z2v
z*&ru(vvc11R^z*wk|2v~qHvdW&PT$MtWJ^Z>R%%TPj~ck4e;u7nf;@p??>uRHN|>$
z9wMG^@M;{t7Lo#J`s8T^+^Xy@L-QZmeT!1M2VKj3((<azDum!3b)e;JjO5exE(gA6
zsX-G2S5)4lr#8w81QXAuG7oV>9t{~E3@MscT%nOw=Q4(RcBhBSBUJcaMK__<uhb1?
z8{iG&C>IrmbZ)mpTEZTNtB8*nBUGBS4Wg?N(cca<Jq3vrfU?cMYrg+z3!xvCx%Yu2
zh5QYdxu@|CBPOCIzNaiTCwl|XEB9MPEt3@c$=o)^sHmka&eH+xZ25V>gTjL%2KDFp
z;NE&IMOR$is<`S_id3`01vi+*O<fg<KWqZ?wT%~hG48B%6ui(p<>0MsUibKMeEg`w
zrOm|?_!)mbS(OUqE^o8;DzL<yLij_}Y+9ucb!u8A&(V*mw}su*Q-&AZ^FF%|HqPM{
zw-TRIsM~}|eA_5(a%OQK*!Y*&Fe^-3-pu->fsT?*dT{J;eN=G5`{y(_8^Z%lAY@GF
z8kD$_`2makg+PQpqqLAQ&62N+!{Knr#<4-GN-<2F?=2^6eNIHfq}CYzjUWT~Y!Z8%
z6YjOI%Xd1W4m}w{RbIr-<x)esm7tz$xzMeyEOX>NNm7sYT!=2ND=V#jX7$C=5ZMRw
zV{Wq%K^+*q-K@$5)3Gb2Q9*Q^quu-kh}j?7h3r1;l<X3E-S5Qml-^Ksdd|Bn=`sno
zl@eK2)Udy&J=k$z+s_TBI_=S@&95MaI_(sO%dQ!-3h<oT2Qle=-q!%<qg8y^E1jxc
z*T9$0PNMB~{uw?0d{<aQ0-Wop#h2tdg66>RTi-oQT?2~)wWPlCxOX-ID-A8?T3@%Q
zfrTj>am%bkkUW-=Qn=`ZL+NKLoOgDuU#)`Wp8@A}`17Uh>VKSYpBj3K_Z*{sJToBL
zUt4nhkJEk5bLx{-{U4`0S=qk#^7q+#Q1F!hdAfw0lpeFkvva0ROViZ|YBRo7<RWPc
z=|-0!kLXLqa1OuwkzbMjs-*sdgg{+^s_|%^;=$SR%sGc<!u`690KSyYH$>(n;tnNs
zkMC#qOgi<I2uZN|5t7^3o>VObYO#MgjC_zQ-tas<Cq=#Xq;HMS*IBPy%yf#(2Vc?c
z`@n68Vavv3OL~yod@Yws275E!=aIsQ5=%5b`W|#EYUNNr)nFkz?NOeY&q|Cn85UE4
zPt0jmzef=tDP!@&;)akMKM^<U?HI1fc2Pv{TB_GwIZbo)kYWZk1Ru<!bFj|sxf-Xr
zmRtH(*t9A{$9qsi&Z!`p!-H#$tJIrL)NRqw-4nCj6Xg@1Cc74tCWUvjsF6kE?32}R
z|J5-5VIV~nj3x~p&u)0*+girqzL#m&K%kZgxgWManIZ}NUe&p*kZQy|x_Z^17&hv6
zNs77#AUd+>6|OBqZa3^jge31204>BRu}-$FOs=8|o3}INJv9oGOjaE}cS|-;3x&J|
zheQPRURZyvrM=DI#AGylMZ(tN=#JbPv*+$~rOi@l<7IX@;Bc#&L`xI@IB(B~r{=Lv
z{-e9!N>`5`eKq>Y_NUhU`dIkkKZ0K@87O0Pwlv`U?AAh?t81HE06_D1d9&908sYYd
ziiW1aD|mpZ=(#h^aK^C_4QbVMUMn?_lo%w~eYW@=qWwqFgrT5W*}2l-yCA`ySzcaV
z(}FY~{94g-6{e^!2thBlSb_8Nv+eVM_0huWo3c!aTTGSRzOabB7&Bi7Y?VMqnpgf;
zpsy*VZ>^3z^3=##U!}-U^18b_a4nn0E+#8b>d}q@=cx$v)XZ$B`zI>|udq0Wh}P8G
z)k6tM1xp<$LKhU{@JWtc8s-&ud5O%opr;hqE(n?Ut*!oGd(MB;q^rM|b0|NCJzZ;S
zUG1~Go?8@Ise^KNfR58h2;6hBg96M$l&PU=1Z8LL*@?D7uH7(|Q(dpdkkTyn#6Y@r
zO|h<*?lB=S>N&CpT*b~c#cwM|KVLgo{7=4ZR=DgQ4CF^JOQb+5w^`;r`0*KcG~AJZ
z3^?Z!0{RojjTwL!aN@L77vW80G{Kc;T$)P4)|ZUa1c_p3L0pTWskDN9#$JGNw!=8L
zD9Wv%Je|~540#X#h_1%VO2!y>yQvzjouzm<<0C=^@`X<0AM0`$|D4lpwc}%KfgORb
zc~N5L=(gckMicgd)6hnpI48G(xxf5J%dW%zkzSgXgNRiid5;^URNcNyPh`7~PP7rw
z&YiF}U0`HoBjkLo5ixTku5{uajROBzKw}f&a(+Lo1PWs&bnie}^%cWWQBgv%9Db43
z5f=r7!u+0A(4B>R^^s(49C18~=p~!#U(grUlLHZ-<nNZdduCFfS1Ii%%p2Zziwa5o
z*swm!picAr+b&nyvpR1H)!iZ0R4P5w=j}SIp4Ecc=3avgTPy4F93EX^<Bur#h-1m@
zo^CQH)!!^ZvSGQlBs{mW+~3OHeJ-IItDdccygvMfjeyKH$TnAt`gC>N<gOheFbmb-
zVbE#9wHEzQuR5bC^y^*2+_P0aouo&d;f5zWkto4ZoAnJLGkoW5-?I?uzjM`bBp?>e
zgr}t>U<vz?LDk#8SWj-eJanXxzgt;*u(56bfotUA`q;EACrj(ifxZe(;$&!{VQ<mB
zSk=^(0{}3XIQwUT-A6M4bP!cpko|{2|Lj4s2~LUxu^Z`){1`~sb=5r$+e$ucf)_z%
z&Py$UlRS}(&{siWeb0~KI}0c%DXWvgGr<O<eMnYp69CN^ywfyaQp*4JV44do{jFA*
z)mN-LK(ru+<lFnK4m)Dg@qsiT-oDhNkfEs&WqIlIE-E2ZFLW2H6*wumRHNt92|&4?
zfjIN1-zVI>{>Z-*>?@xjZhdd(?0DO_%lUi(d`_+{J@;z1iyKu$i&KBq`1AYAmgyHW
zPCs{FUDl@5mfw9f;mphXb;j{I0WHVN&GK2`J83{R$zJREEr(N2z=EPq)<d3-usT7x
zCR6E(;wuY$kB|EurSA~&H$PzkKf$?0550j(c}_mmGmC-yjPGZMS76sgP3?*9H@`B&
z&t;09GRM2BOXaU?j$N{r+P$B@8-2%KiN;fEl0OrU?DD^hp}DZHU@k=mb-Ql>wcZ^P
zImP%?@m{;2{*CL6Zr~8;N~AVuaabhk9lt(Jsk;JF{L%pnxPo`)k&`*u*V}m`Eov!v
zZYG&^QSbQ-jwrTA3iHNtZY4tOj}DYXnu(64%kxqB)HIw6?|jy|!c#`rOPwA9H%}Hb
z0&_=UP3Mgstt<{*nmOp`--7(pWSXyA5Hyo1Lw;q}g#I+&y&SZ6S}8;st6n^Cu6unU
z=+yM-tUnp?!Nxd+B6*TyMY-o1rh@Z*<FB8jfF`tq2QwUVc^Xz9|A8w%i-QM3Yr@Dl
z7a;%z-@bmCs~y^|Z3%`5uMRjEdvGfcCh23X9{=;_j4w^&>EYCDJluyu>bvyI*WLDy
zLwXLz5KbtMR!@8oxDn;_(51gRpy_n$iK0pqihF<O=gc`R@?g{$&FD*<<ov1JZMj76
z^*BmUH2X8($Cnk4x}!j40#*G|Zh;kt2hlo^3qHqNFD_&37t#S<Q`bV;d3h`C#5ZGb
z-`hk!(?jl_*zPMW)#KDvE8nW@XtL-khxTghhQBC3$6a6jR+sr+AN-{AxL33(5$WLK
z=u>%6{2=Y)(6*W<Wm$qtll*=u`4vFXAJQH3r1+lf29aP47OPc08Lf;=dAdRHOHJEN
zC)lv}X~kEH>VL>CiGI`AXEf;+E-Oem@Ax7X^`$qIfOG%Kx!H}4rJ2At#|AVdw`GVv
z87dS1bhUF?#J7-WIZRwX$j{>^=kS|_eP8)25bvn~ZO_)f*fzIp4$SlMBUcKdrm`RD
z>I?s{#bDaFS<$;m7&Jt{{K2@?{Q4U^b#?UwzRP3^Amk0(!Su-OW+EEOlDg%@vWJ@2
z*5swasUs@UQ<XLY0b6kM=N}L&avGxrhLi8TAe1MLQpn7uhdLL#<6%BCgp`A-DZOf@
zXQT6N<B9V5k95&YNinkcI=3qIlEoGxQDo$lj<xGxJiSkFLr;kiE<vqR8T!JpN~tSS
z8`~9N?8TGR7<s6L&v&s_Cp#dCCT0|}FjXTJwF;`bS->4j@Q9eQOVLWrAa^(KEt^y~
zPj)yJk$S0~zV*RJ>-C48J$u#ErzLGo9&?rrEJ;|Fp#2St43umw*js{nRR3|N7GB+s
z=^YadcDeygK+{__CJE;3JSHbcUrPPYFxp6fq5;2N*dkckz_?k~cBr_34iBjPew_{J
zXBk=fbnXtT)|?;FAq|T}9{5)n-1$+zP4aU4vrXB!`ODbC)29tEmww3rx3OJtWAA90
z`NTcD|0n<manI)A0hdDNvht<+yc&P7!5TE`6i_`jl=(?oBUd`Q@dVquJc*5SgB1hE
zQ`X7xlIOWSTEJth$kb^2#f-Pj)xr@fYRHjAQruWfLr%kH)We16U$8@`Kxid(S?;?4
zIXgnQOiy!7xQ&|yQr+rvKQS+neDNbpw2{0_xa!BJ4N|xDk?wvryOwwTX8AT7#kC?w
zu!rXEA(Uc57yTloq7)xOM|Usz)^F8NL`ctfS^S)SLE~nqd~M4Y+RvP$m6SR@m-JF-
zMdh<sJxk|_7Jvs2CpTJ>o-{H{sajXt8wT{>nh~F{N&DQd@$;baNSX}nxmaHG$(A5@
zB*lFaqij3LHEH0A3#5TiroQ}9H#-3JWJu6jMTqEQK*5g1-5MRqOl+khW}i&0`x7Op
zyng<8XS^H2S5poOXB3X0_~f<`6<?cxe#iafh9K;A!o7CrS-IKM<E`3Bh@U+f4aehc
z9iSYbd|ig2`=o;jo|tC^P2BS(s)UU{E-zpdGNFBHHtks1A3!D5RrGyboWpIToOE$d
z<LTj7_5gitnXgixPq2b59ZWWm*{x3-A}y<!TOZAgz9Pj|AgZ3{r!;-OX9E^t!cwAp
zN}S_)V4oulTQtkEY>lURlFvRyZMpG8y{uP6Zl%F|nISS)Y{naVyxl|tIX`ikO4^Y8
zxyRFvBmPKkHFNR38V@EK6(qLVbbdzKd^R)thSix|8zST4JRC$b(g!7@Vqr^m)!VqQ
zS%QzuXr?S&1MqVHw<qowP2SNG77aWT4*LjoZrDXzms?j4B;6AASj&zNPzi%buFNyG
z0J7B;8R#i(I#X?~o}5M@-5*=uxyqzkdK-XZ?#<sszzW45B2?lsjQm^q(u6LWBX?Ey
zd>`2QM*t`Pplr&Ss_)s1_{#U)rsa>w(}QvM#x?P=qPll7=DsfqE3hD?x?F`KO4G5M
zQ$b)K=ADN4ec7E!hf)&YZysd;3`~;w#(gN$e*Gr&3>n26sv+ZZe)hAsB{$8-YMG{q
zIem%o@XANawl^WEnV2s!6252hdwtU5knP=uE*JUp4Xc%!<YB-?R?3js6IVNo-)pFR
zs8d&R2M94C)0bXocO7*wrI8Iljz#y(v6+4wCV`~&?~4`JkHrV3jyEe&qp}F}TR$5p
z|2Qr!Y{tEy9efrDY8aNET1i6iT=5$6G!+BA$}By*dURF~4YW+LCp~sTO{vnx?Bj$?
zPF~W|(h*#})2b>telZ80`re^w|NH#x2h0p<wS6(W<|pYhnK5^volYX!ixSD(%fHjq
zvP9Tyvdfole4O5u#}?Et0qZh)Qy|1{ljiNd(?SM*G+M{`3V_UQjW00uOk%BVIZuRj
zcL<OT^&f$pWHdWZ;+Mz0)XXH>aAV57<xJ^K7MVW?^6_YX$s(4BnjbnyLiB)<!17)9
znH5>$?iw1(0(XK$*+wrw9kC1Ob5?Vy$qt8#3?hir&Rmf2m7RQQ(;bD8Hlkm}X%kV%
z<PoRvl_8qayU*<aB)Yh+2!7?`v3RpYR<Ap<MEd;Y5$7(a8opX5hO1l2riI6ngu-MD
zGi^zgFw);fROcqnOr|8KEQiki(x3E!_n^~n-^S&j_kPyS^T;{g(*E0b_tlsLl%e~>
zK@C$g^iJ%jc0pNb^4K*ccF&YYQA;&p17)TVy<o3yzS45r%?buMvPK;A>ZLrW#iaE=
zrykAM5d<7oxtew0s(QCW3*K))TK8f0lskYBe2+=!NIK@(;ybkjn(PN;3!SK2;Ocl%
z0MLuk)V@claOwNM2ZVg{<4$YXCfNZ{w}DJ}uB6;imu4(?`m}b<G(rW5oblR_Jyd$s
z#n#<ke1p}}R5-LKr#HwtPdlaf7vNj@whed@36Il*Tj9}za)%z<jmOStU8^Z^sN;gX
zH-62=v@ZHuxaa|aY(MjJYG+>CS?(L6Z>eQh)6;DRh6KHN*scD7g_o~*bVYKtH2V`F
zf;`5}UXb)B-9kAn;GZwQw?UV{0*3nmhv~?^f{;tP_l3&bpb^_6m~HZux_*C1qgTG^
zp4&qs-6FH+-CBC^B4@UDU!)f(HzMgrUvzN=5d%7|zWLB!zXwQVY}k_`Np39W=ca~+
z_M39t_HuoSTZ#|bioT|Gks5$?Wy#m{i_Ch4cn1|c327guu*<oNXS@=0UfQiX_kQ7M
zz0^y{`SEmPbgIMe!cUQd89@p^&MP3g#9L4)idT`ue(7h@8*}NV=C7i!xm=*ro-r&a
za!RQpzT2F?pMZ$Cq*0e8eHnsVj6VGCHK<6&BvhHO*Gj^9!*8Qx<4Fr+9jU%4=#_4!
zDp@q2PPgRS39n{>+Hc~MHN{0B;^o3*hdz{Q1RG;Ln3q@0BuI?OVpbeYK>PH@1}3xC
z&1?H><;$||#w%(vwKF|2aNRwwaZ*24R!MuS!cQ-@8QETLiaERFBgado``La{Q4}=J
zy`jsVH1uDvEHqNSL9^+7)Og&pg2-E3sn_}RbK(2vm+xIZ<bGPxBBNxsFm4MBsrznf
zW4*lSDHrR)O?{-s9$Saz@ZQJ#LJ92l6D|X{h09Xv_+7xdC0^A`iRK=2uUkGoTj<-f
zpRyRq(>0<zf6&i`?cN&Bt$n}ov#aw`%^ceomzGx-vIpoORWq)`T2gqO2`-g4buTL)
z_ivtDd0?f_pO(@~s2vj%lW<p%kJM>0*}$HM!A<C%06xs<soCs%lBXJM1do7ID)K~?
zyW~Fx*whO!2D8dv%GbW1e$Z2R1K_KfL-}+t=MJnID;LbYv6ALnQz+rSI>@DMW;7j4
z*B0n=T2c<=0k;O_D}|ffkM;z54e}|ZS6#j+vp?er_Ot_L+XD8!$PEa!x7chA5huJ`
zxM^=7&;Jg$KT-aI?159Y;o2AL5h1frBj0b4(r`G+n6k}g1aVx?G|qY7p#!7`!I8BN
z<Ic;b*ov};j&C-=3q$sqx}M)wq?@7xL?OqUO{9KiGob`UMdx-Udr&4{S2hMS_w&Gp
zG_8txr$!mosNHMc*91uYp5Ct=*u2ldzVp)}&`o@$aXl5>_}VEf&iADM+htK)YfT7W
z_ZiR9F6dQO92WW4s!%lFj7{pn&216EDVCzvnJT;CdxorJY!)CSc<Jk2|E>5Y6pGb^
zw5qAzQ%$1A;O2}atonM|_6?v<l1=(97f{jWIL24BBw)_W00QzOv&y-f!Z3Sruh}fB
z)+SiP(TfFrEpWAdE@W}{^P6w(`1?8FttgucBZ$CaPtS<Z6Jy`CTy|5I%hpTTNwTgb
zPErRpMMFBihp3qFQ#FWZ@Cf_OhN|d0RrRN_wc*<Jhw#&p)a#?^dTybXXb=m(_;gCl
zvuQ77Te2=Cdo^k-|HiDP<4@(N7OiT@2G{$gjVv@y;+LG5!9xVfG|H^){xNLq{3?Qx
zj(SI{8rRvgoZ&t8f$>t|8u<Lc*+3o?z>s^dX^}gOH*o!AxAPpmr`!3TJ*!`BbAc6s
z$~BPm{aWW~Kbioz@2OTgO2_W-@|7Z=Hw*C^MXt!!3&K?VmWn%lH!EB3Qi$ke;4qm_
zsIO@!JJzRpF0ZxN<yO<EuzRgqT0%tH?CaFnNBiDx9qIKyqc+b@Fxm}0KUr~F;Gf|;
z+U*2yrBbuF7C$riUOQs$`*ZrI;>s7Zz8+*+oIT?8Op-H8><h{JMlz497YYmuS#0{$
zDj)H%D;ed+mNjb>0j4+JXoB#Ne$9Yy72To`JB>G;yCppL(T{r)IBQ2^BmPHAbVm2R
z=Uy}2d3JjIvzD6H@^$ygP8*Hl##ph^4#*pD6OW8<djdI(k`bHW)5j5)1hET#*@k+F
z5_VSXJdeL5+m-U}TrN3`(hv!8*D?@6i-gcGT3%QESvde<t#bS-9`ogT+{1cP#drsy
zSH-#7DfUL8Gnlx&(=Lp*yd8*K83JmU9a<+;7=$d`m3w)(xubG)`{y@=QAEEqG&r|m
zsOtPw!iz*9&#b=2wBH@~c@M~fr1ty=HqkiVpp%pr-!UadTkEtS%i`)WO6}WjxX;XL
zaL9E~^81@MsatxVy(B4A4SbpW1}m(?gmN{KlWl#0UpG7%?#RTZNYKHcA?>G~a03(C
z^1e_#I*Qgdi0HBl<5gKj06kRI#XDK;b)4<cSpqyY?%9@)=%f-yLntz=zJ&3E{O{_4
z2na0Ob*%|#=UrWNY%y2&Ec1QO3$=KX1Lr3kr`Jgpy6l2u%PdvC1U+;ypa;zX1!8gP
zlygeMaMoL6eP;GSOI9~=%QPjK;^Q~3@+>{5PAxAZl%$LKsH!A*(XSb~7eMi)_Gif1
zDOm!lfNWxSC%U)pwz2m_c{8P8;N=j49Rf~ba*JhkzF7ALRKdsj&|az=jSf|x4Bqdd
za0h`jkFS2d5zkFX44xtR)RFN5yVxCKEb}5(Gg(?-btFHNWaBn&QQuM@B3J*Vz%nSI
zFV@)Hk}XZN&ptm7@h*E&6xRIi1gP?muUt~5n5_#szc!$U-!6aYM;jq?jg@lgtaR@^
zXs3C9ZMg3uuKG?*C@H`((}G)hQ4<D`94zD&;Yy)tt!<IAZO<G4-0R`Inv9#8IeTn;
zZ|S{G`%SL#g4KBrpzZNsu<=yjF~{*+YZcOg9qA00lsOhMU8r?W%!JLeUfR93h6KY0
zZp8t-0wDj_ywtb%2X}C(jZ0JttHZfEA3q8HY*nIhvgMB0X*e7;hGz^#oCC>pHLk+v
zIl;x}Dd%-Zy+iunw|@9OohZv#zP+|)UC?!_lfSak@-ALej{`)^beEQdO&JK`1~(n@
z<-MJ7(A<|mkGQgJ@6T@7ua6e~w);eEn=cR6-yaAWa>QAgOFf-U7a}`nU?AaQBF{)T
zB_8|+R1U0^A024PqWaejRQ+F^3(==PNh;$b;cEA%G5Kh*I%pZ<*I`X5>?lP?JDETT
zKJXQvVtL%=%hLLSt<^UXS!LdUr3zx=NY1wl+>zl!Q7-YSozCV?Z>fRTI&B`{r@io;
z8d%M-sFSw2SZ!oSe1ev@tv+=BgA(2jp>K+~X=r)ddyV^wJ+}(foAZ&vstq`jq7H9%
z<^33a)1`zD8UjY{%Bq>VWN#YWmA6)hXQyM>UmL5^HRbn+e>!?(aMWFYGOy?Z6w=ms
zQM-57xJ|FIau9obO$RRYOWzpDOrtmN7B`*JE^zml;M7YYFA<uQ5Lv7{>3a9Y{#sKw
z?uO?8i$ie7$lpv&9EClY{UWz5PE*X9V3_m(w)3k-5a)#oPW@E|GqExLz(&gfx%X!+
z;I%HTHuSWLUqjJ4`TNVCjeW=?^WLIwa-7X`W(JHPMWoYI>Z9b`0bNW^;Y|=hE^~73
zj|LaVIIVdQdC{uJ7a8{cdzhIA=0--}+^3uz>508(&7OQdcw0185fLu<@x``AF+xD_
zkeUOT;&ksOsqt7(0_vq@yL4$I-oA3Ovn4+$`S7)g7&ywz=7ssXnXB%#N%Fwuqxl4q
z1klQB8tBQO>QxN2+vWsDx<b3610c+0A&cE>izPkZOFK6Kk!s(PZh-E#U(Pmq(hlKP
zi>Nv^#lW?HN>f%6ig<G-Ux<>PeDHWBm$_cr>S7OLW)eeyX$xZ{!Qqlh^(saUOr<Te
zME^j3SUGjDAjTe*<0n&P1^x0wx{8N{vrL-kohUN}VlY&)kQJmT)v+5I>m;Ki_W}YR
zT}lKR1G&1X6n?WkPZbGAz-|WmE@tO1yP_!kXvGuyl4V@N+lC5j);}&pP}z@t>smJZ
zstXFhpW`=5(O32$6af>@I@vcHl$>7Y>@A=2HDf63$4i_9)O4C@fKpEF))Ip!K@j{Z
z7zrc@MkPKhx11dn7~BjrlNnvil?llCr-AZ?)=1J(@GZc-`<dSQ{_(NLv`&MP40A7$
zpI`s2Z%^BbUK&!nSxQpZD;MUORzA+(Q_=+e06hU^^{Fv15OAe^`6$H(lA$SA(Zla{
zrfoiaIqhbenR^3<+2eXK!a$+`P?Eci`5tFQ!>*|9>^&S+S=#Fde~9S$(etw|2C~yk
zWJ*V4L=WNuhAsw{zNHpI(uyi38HMp9eReD+Qp>lHY;Ue<CRnVLgAkr$!f_wTs_fcc
zd~Ysk59b!5!>4B`1rZaGK4L=z(SV&n-no<bEU4d#`&VlwIUO649cp%2p7rZCqpVNZ
zQW%!}>SQe#m$A>K8y6zv0)RgvF%RfEuhO3}eYs)mJh|WHhogH{d7;_v1@H4_VK#08
zIuI}D;-xj;aPEVtCr!ontO6@QU;ows;pISwlC>ur&+g7PjQ0Fspi&?w`#)@*by$^M
zyX~JvOQ&=QDBXyQ5Ku}$=@3b2=?<wyD4?W(NFyQLoq}{rNq47o$C<p}-ury#?C*cB
z3s^DdeUI@Q;~|RLUsDZHCRFnR8qJB;%e5AhSY3<zJnLk4%I90#<T1DY`}hwy7yB5(
zMGPT~9c$YDI-sl4%cIea_a_NY9pXmZwg!`P+hjA!d~`npn;c~&k|!)8f*6q+BwQ~H
zZDZo6iNG)h#BLK|*k*;Vn3CO|b9<h3+Wn04ciNeJjN)zobjmcr`j=N%j4T%Oi=GsD
z+mho8Jo-S_hxL3cpAY(Yx;N!LhRnWzUtfUcW73}>=J(%{z(=iTu3Bm+zJzHjv9sD#
zI{X(?27x=dD6Yx+q6Q9mZWH0?bk%?M-2cZ|gxUIf-e+cE>9U{^YcwR~6*^yb(Yi?f
z$5}KX=_U$Lnw>|s0w`3%A3YKO3~;J82p3@N!7jls_k5va00<GZh3xP-e$f#*`()Q(
z0oRsW3OxbOd=`l>-(8lQkRu1`QF`{|NmF6xE_L-s%H%Z>DqWglF_~iBfmCi8DLnFG
zOJ5}1)M!MkIDZ;9vw2TSec3uurSXo{^dii{VExL7%)mp}`Iu_Q!l-ys_RN7m<fx_d
z%e^Aww{A&lLKs62Xg0oMujIK-0plV8m)Lpo<sTZiq>!Pa_dp-W%ij;0D+tuz8EIj-
z&iIlkvg7$Ix6HU}$m3jmq3hpRrGL?12I|F4eyCWlUY|1celqK6hS|^idR}6lrMe#)
z<@2!*5;?%gg8b|bx~z8siv%54<6`>4x$|6XlN6l>t&!-QHXOV)qLD?{`%`XH491HI
z-ev^SJgrS2K@Z1tE-Zvl61O3g`qSCVKldrE%im&f1|id7lk-mJhl$M`=y_QCEaBJs
zn77;`+QqSHbPwT3dB4fhUb7fd+}Fo%{r)9_PiL)vEso?+TTA9Azmc6uLCCpz^{dcG
zyuW~;c-64!e7D1UzChzg439ntq$2drA3Kvx@wst7jJ$oV{eh1J_XU2x;*?ccsIvte
z=uS9rW@Pq~&>rt<y}e)f4luN6_rdnu8+>J=*KvanU01xQc2U*r+`GF;jbclUV@LI}
zZ4%4vS^aH*EJ68}K3Bde6s{E1BTtN_G1az@%mmjnChVeTffm4}gU#7^X2|9Ml;CGA
zA91X`ol)t4_(ys2f!81e2x)acIIBE?olemv3t@C>SMM#&Z)BOh8PtwbZ%E)5WLJwq
zK_K{MXI#U}yiO*}Qd0FAde0M45aL;2O#CHnG=F6?x*4GKgnW0W)9k}|MytqrUQr{z
zf|3tkzhDpb&Ge1y+_fUZsiLq(yAC_xzMb~K!4^&Ee|WJFNNcmEnn`h}M(n6p4WZCe
zH5?87EclW9lnXaZv{s9y0L+)k?=3zGiY1ryf1Mt)&$j-Z+Njm%>EluVM<+_N;Dhpa
zC_siL&SLkOzdxxyDE)c-TLC4XuOD8ZM*P8JHx7T=d2FWnkM<Z(|NGc@Z~tx2NKsOq
z-xGe$T@r_@eNPTk0&x&4E58@0Y7!aXNqjzp$2(I4(_ChO1YFsquNS5r2Pz%3%i+zE
zq!*9BuKh@`!Jz)`*rz!9)AcV6jNrLsZ^@ayj`JwVs?P1CG>&R3YZzV!Kp?{2F5?|D
zpcdQzZHVd}*T(=MWc?&z*HVMw!~QL+iN6i5I<qe{ztp6yNl>7_lY;PrCLbp7+e|al
zbyLwz12L4@3B#pB>4oUr)w8hfFO*MwR1#D)v|SnAJcQ9f;%y}*-)_r}m}DIVtJZSE
zyIa3ky+3w-&NO0Pr;YZav!2AvwyD%%x$)*Aa#hT!0<{U3oVRsHMM=+PO%Dw*jEc;m
zRodD=V7EEr(8E!1=tJ?)wtnB#4d<JfPcjVCCONw<Q9T_(aW<XpJcO1O-FLu0uA$2Q
z0wsdz6y`ej3)h{uEm2?J`}_m!v$d7x@<2Mh6_UY8-xK|W%iSLjAVw?pKy2lbTBi-e
zhYQO%Zc^eznpZ%Hvs#-Q0eg$Pi)f+CbrJXt6;XtOun71vl9`4y<VT%xt~D{h)E{d5
z^SWIJO8~0~nZl!xI6@?n;mMTMxgS}Lo8#!ARU6-Zl+O8h%fet2lVdOXXZN!A4tlr}
zE)Oan6eTaXH!g_;rBB(^_2pMi_6Pvktg2UCQ_Ib8Ey=a=3L1ma?_-B2GD3Hx%H%pa
z2AxGqYjBjG&$XpS4HEu=uJ+*Ph9L1@&Z~Y{wPXgPF=}g><p{s>EBo%AC7q$ix(BdK
zNe0r~SMM4HKe`=c%BINvC(q3|90@mVrCRj-gu!|W%ohojpVv<Rjir74ibF}I^va9+
z5i=Hk(-YoV)!yXm`p}QkwD;xUdrkh^^e;H8lPZ}rM@e_|lUM3?DJZ2QTviUeBC>ry
zVZSVY*NAGd&l4Mq@v9~|Qm3)}JmYY@++jfx`FZxsJ=ou)Ts5srW4_k#zV=UF&SaO$
z`p~3Q$4bN|PkegLWFwKgI<)IYBD1JdVUo$Bn^_{(i|Rfxx-<t7+JP?xHh>A-`Pxy7
z@_6LgQ8*ZqZ1h7rT%5dH!#!V|bVq;v%eGTa@`}Qa$1kF}i98xR#9yS{zjL_I+B#}%
zenVcYA})VrZC-<i(sR?c^t<Op&2gdk@}RW-<{&zcK=+r=A#lOHbXs&DYOAP<de%JJ
zV|<6lG)D{)OyNf@Estu36orqYWk)qVJ3majbU*H`99?Xa-~B%SA8!dLj0Z@p$<F;x
z9A^wJjsjJ8zG8{aFSvC_U-o^<MJz9E1Q3N);i&!)!5=C5ndh$TU?5^7IJ$~N_d+C0
zui#BZ32oEqq^05#ztHPfrY37f*4GneuH0;&4ykPBZ`&UPkbE14tIP+54(l8t8)P#p
zq6P9Kn!eu9!R2-zw<hYRp~AW#ey*wS^@`i5{pD0lCq6h9L$p>J8#p>(_~k=eK*%r?
zr7@#o*J;?9N_k7gAyye?A^9wbuz%o-PY1P82+>jHBVO@Z9!ZnJmn*)=MW4O2e(;pO
zKjWyHj;|p6G3k(b=Y}6XAV<gOZ<fG&I^vxl9@d45^fEz!<4UoNKAma^xJhrfUXbj_
z*LYuF{DCE_tJxdkH=Imb{vn9v<uaU6ziIPtLBYk7)jU!a%Y3)}ToRuOW=9;#pz(8e
zc&#*5Cj2vDVa8bvNm<+duEbv%hXqx$n6DpFzXw{7QF!pyb~)Ja>sYHU>NZF;bqK(M
z8!GS~Rhb>wf`zRR%1srO@Oo(v=M!A2wLrFoB5=Rn#O_R1l%064f6pn*>ETE@`I#bZ
zuL2?QW-0o#3hhRq>pU{6WrR>JI=|Bf`lK;ElZ9a@itI-_2bflz3s}FIYP>48xO3Z0
zdVmd<VjnTdV#W4oDQs)6CE?E3VU<p_U-s_z<i4QG!cJ7SPtMigC`&U_kk0!4kA6Ju
zb(*wF@u!FCGuI9ewb+f#Qpi`Y&~9|`ZzArW?3pQdLfC~p&K3gWw%Q&}#IVSHfbjA0
zpv8i!)mDpZngh=N?gIGKZ`mGFGb3H!^e$1bFim)H0+p^hY}MY+GR|D7YR+5U?Ydz-
zjpkAJxTSsm{lu=@?2Kg$EaD)eT0k+jI11T#%h4XMi8}T2$OIbllRheK10yQopSn0*
z*O`Z8PcP7_x`l94?Ax^-C_Tv=B$kt-2sFr$je4{k;*jah*5diX=s^Jn^vih+2Nwv-
zC5R<4r*%5VPzy74Tw2jqxcT3O+=1@H6z%%6Q%M4)gFfBm>}^cfq{x}~2k`MF{!JB5
z2+0vwBj2dPWfjuNJA2W46=D9m7LN`K!E)MC8dO7jAt^%2yH*dZHwgr*bqxZoW^)5*
zyMM`=n$+(zv!Uy*ehzt3O9;P81Kz;+IWwCXpBO1D8Fn_2rD%)Xxcz<8PbK;9aw_&7
zQQ#pn5GW*Ik@<8Q4ISqqEI8!6@M>W5ZVP5zrcFJGO*+nx$3h@N2pB%1Utj1Nbu1OO
z|E0l#S{Y>YY^gtQ_#+>^4Wz!W<GvD8BF^MCl&HTKPVEspBa@5==hW1(uMvD=7T`!k
z6%x$aT)i0NK|98H^gMAulGS`@8RO7qzO|b3Byq8Zqt62plyJN<9Z0rj*l5Lk0>qt(
zv1tjuvA5zhA@_!Eg=isP^H;U{hqr^bMQJb$$)60olqh6cYmZlc4xNwWsLFVV39luV
z^)(d80=l7TZ`wc~WOd&rM;3N%q>4Fjs$I^_*ZT!wLa9e*OW_0O*jD5WVs~;5R81<h
z9PzQ)>-1GW){limdJ1ad27!I5{zJIYPe7({C?28XV~jar+=L2r!yRSL!8#8!KpATV
z-jOyWK?ors!WhEf(@^0oCe#6J1g~~cjvf+3({qYXpWIq-o_uRl<o&zH@BPFCH{$4e
z(k$hA3=zRM&@k}yR0rc%r}NF)qKudTfMkX_ibF8)fdC!ttQRv@6To?m-X+15G%~59
zXwyyXaJ8CXw7mXBJ?SVegADqWW(#1a%~SQ_jzV>RWixB5V;LCw;K6y77g4>att|I{
z!Bfw_JU&Xp1Y~UVxu@CxtS-Kz-AL~sSiOJE#*e`V>u?L^WO8AbZR7M1nJG1ebVV;#
z)*X-%CwoRoUGG6HVD%b9Bxn;g2>P8YSRUjGNq%Ctl@ki*P~)20>iHA^4YZNE;`u&W
z&&}>cpTr}A`3C;@V0t-Yb#UH}?vXRGH`eYGA1xs8XgFhJK^14g^;KMGqkQipF{|!9
ziHsux{qmHv-z?XizWPF$DUF?mQB*1yX|!U;V!a=|H`|O#zs{>t=d=flOs>l}^mM=(
z$BYYXG#k&rz15!Y5>;{V;(?~kj~@tqG;Q`S1a>ra0Ann*AM-G74SG1Q$d?5gDspjQ
z*0?WACsL0*hw#FUe`WDH4=FahD1GS9v(XwUnz>ia7`JEX)5cJ9G)gwFEbK5p_~?2>
z{-@h$%6kk9VJKj~a@ptqXGiK$HDFjTlZ5(&?k}h%aJ_#vU06GhJb8}zY0%tZpI?b9
zBcZ{Qt!^p5^qc2V)Bef05g+YKM;E!@dq6NjT}vG9a!~lTH^AQEA*d_GKv!)j6W%yc
zh}I)lt|)qLKE5pEHkwlwV=rC9cDA05TA3970jwRd=kt>ce`F)@^7F}hEb1iRGz|uj
zvH}$<*4~Plht>`6-Z8V|ep|yf`UGGoDt6%e4c8~a7Pu~RURCp7<lnD3?Y#$fY9Cq0
z$1u|MDe!6C?yiI<J$#sWYc}9Ln13-fx7o^)>%3K2=`o^=7f92DygdiLjHViDQ&rLN
zmPOR&n)zXqnjr{1U=x{A$C~!KO?zV~@S$~SX{oxBEb167ODzO5wF}p^9?SkKZe(wy
zM6DnOrxPzM6E;8*EtG(Zb+WW;z{M`O`&mE13xgghCQ}I+mmoP(y-E>%3g0Oowjxsa
zWm#0vaSGoZa+clk8)oiL{~c$RY~xfpK-hjepI_ErF{V<8GyLOe#3+sCi(KJJQfNd&
z+u9_Lt9l-(%))4n{r=5oxc2-@!it=pPK!D~{Z?Ymqbnfl_g+!J7DiMRAF~OGSvjYE
zCQ-HP_S4XWkS+^vFGI)`RoPwTF6R{a5d08|h89=>8cFcZUiQ0zWec&~9{zLeq;20B
zC>&+(V}n0I%(_Gw+pgHCVkA@kws>tyS>`d0>ps9y`1{M_JRY%011M(Ut@Z<QC{Snk
z=D29>rDW`F*+sm-)3kMxpIVvK?1rdbQbH`BV^0kGv8bBC0B$<U9k_Uw=zXD8*=uoA
zHRB@x)n9`X0^p{I<tj{b%6rQ87SE%gb^rGIRE%4}R5gS;rOJ9|s)}!{htFDcNAWv^
za+Df-m<eb%0m5guH)9huJ#)8>aW$r|FaqfzKUS!p*9@$(V4#hNX$zu3gu-RMS?bz7
zV_Gt(PC;dZw$%f|bzLSV5cP#sYuNRPRiygU!~IzAD0z(|)K!5?A&hRAY1dzo9@gC(
zO71vSY0W+W1`8q@bXRXy1pCW}JrH&cgt2F5^^FMm_gk@xV@iA^Ludi1oy2)(^68z|
zZWZ~$tS^DqWOY}Y48J9B6?vUw!IKEhDv0ASvM~JIjrG0g@+PM(xC?K=zcF?AeBQ*@
zj`E3(@$Oh`-DZo(0A|B`UBe#8z2?Viy5}LfAnQ_ft#OxO9pT0Kn!W+m{$=~8ZJ@Z@
z0Wu>V<01NZr#gZJh^>;p3?J|45bI_p1YyGUVx^Rsd=g#aR2O<bEfsb;+lVcN@Tnyc
zeQUZ3aF^r!CFr%-8obcZvl7L*Dj9Dyq@aePK~2SD7*La3{$!vYtJiTs=1+6f`B$ta
zyOp*Tt(wF&A@kMVI5fu5RN@3GuXk<$6zb#C-7w2nN&2cD9nD`k5N(#^tZ~0d;;Lpl
zU(j6?^7G&{KrX0cu3Ol?n)k<(Q`eZx*W#-y^@w5hEYejd>|LqoaU4ASd|yKm{dZI2
zUPyBdrHrK2q;-|mC6WS6guy_roVF=u{an=ZjJvGc(5ELJZ)B-^@!TYk+ND_C{&N1{
zOGge;!gDzJ{4~ynPZAyino|(oF)r%St#jd{OXw}rl0wGU!5^NkaqN9+DF4xLqsU1#
z$!SRTWa8d$XsoE(5&814G32sQ{vQukYrq+BL9!Z2n&@fw2xD*!2_PwQH4h!k)F4Np
zi|MQvnDB>v-*^~8(ukQDK#^83U^}~@8j26P<#gg&1o&V)>yw=5mDD!)4!f!2ctfQR
z#!suhWAgWaK-)Qvv)lmZndSZUvx#2&6FJn?A%#^W;$@**$NfX9xmssSk1%_kYR%C+
zO+^d81CdzpC?mQtlqMr3EkvcKBQ{%VNJ_>4BfyKveu0dDpRPsO595z%2!C_(Lh}?8
z-JXZQTXx_{Ctdu%FwdLU;&VpjWi|A4kSLi5{BU*;fs9)|hYOBJ*QrqEUg*8P+uKTx
z)Ad0<CX5F;qM=!7D((5%UPJaEC9#Y`8-$Mkt7gqq%yz#~x)NW%<Q-s$dEOuR;zwvt
z%p*e+?Hx<T>F<3f?kDW{^audXysUjpTXf=)<>6lbI{}p-Vz8DkdH!8(V~bmqDikoD
z&w7>HIAoh!ia}%i3q4Zq2b;f$k?+_HdT5JU;6>#3#=Rl*p|kZCG}#p6FLI`8AA9m{
zcHJ1~FgcfHo?~s~iBd$k1eD_DhA=-ZFHzm}$Bt=Z5Cl)ZdmpRmUX>)uOMg7XMbo`$
zR{E7$m5YWoQX)=miCb%mRBv<fLYB#TZ|_8fDYEO$(`|HKNmf-En&)9hQJ>5^{9zOI
z`+1j_e?NCH>5@0^dHjd0UJi#H$Pi5JC%GB+@WN1b!z7#0LD*tWa*$~APk~V)QaFEq
z;8N(4w=<FZ_e{3RR1sPoRPk@{{bY8THLzY-*@2Pi&CGC?7@3etXEPRh<Q?GSVg-+w
zv1<up?=Yi^w_|+2k?GTM^1W0sMQ=6pH-Xj;ockw`22DpRsq^{B!djJo1>ZKKXMMw)
z+cJIp^lV<jbR}@BY;*co!~<j;1A1}{m<%%&?UV7;k0g<Jh<Wh%qQ4^>NJ|LOInSfn
z{`^K)OO{Gt_prLH#%VPJPTWQ`1h-;m<>^Nix!XmOf1%ET{W_k#9RyoL@>~^t%7Krm
z%+EUU7G4LWD@F(5`tbz@sbd}2ht@yyM_UQCY5FX$q4vQJ<89k0e{?%1{9S1&>qw2G
z%#uh1EM%U0vSjJ}0X*38n_~^TT)Hsp7Qjq#U-O`C{{HT-)wjo3H_4mFO*n`k9r=xn
zCt{#kR*t&HRED%d;L;WcKuxsMX~%HuSD4~W1iR6y3MF24(ajs!aWshH3kd(rXCU!B
z|0#NP>_Rj)kfM6yk9F<{wb$M^G7ihEScoS13$3zbJiw!3O;y=1NtE3j&Us%ZC3V>S
zZ5`AyD($`JQ;h~&^}jh4(|a5r`@ypCZBnHjx8jn4g|Oz3;-rV4a6U5x+iMTFcZ&98
zPNcmw$=y_7os|??SdLPxz}-O<L%ilIrUBesLVxS~A7meZiyX7)c=t6BM={0eRHQq?
zCTR28Ln&z?0R)u7`_nHw9j6w+=P%)h_XYmmgiyKr*W8*=S<Q5!EZUnu;@O(Envcoj
zNGAjzI`%{|1b#TSkrqc1EUB|zek>MRnWqmfOKD1L^RT{ZZdT;d*VZ>@OWKirNaOb5
zwxhWP1>v7{ns1N6D^=Bh!u?7P5-<MMeVzqi?t0)Yhzj@Q|MHHRX<<=)^hW#$tag1~
z=cXPz;3R)nlDa~`Q269@E6_@8b+dQkP`UBkpDG4Mm-yboV~c;lCo+f{@mlBCM2$j{
zP$ecEJ+1c=m>RI-%*0>C^YesFB=w1yDQ-;*+DyaC2(MpH{VCG_nF=a71qQCd&XuVK
z*S^T}B0gt3x^Z^630C2e^D;7nH^>vk%u6GpBRE05*nW?Z0+e5=hDvy^B8wgmj+O|f
zxXe6W!rm-&=<|j~GHmwdn@!s`-~D-~aTyq@^)w|L8IjnX2HxQcHlG$IrU`S}{sEBT
zYt>joMv=U<#~Wcif^QHd(aY6rvzv{2UKBRgrqsBE7FV{_=w=v6k_X;y6;hfrn1C2$
zRlEHy1r|*P&OG{BWOl^i=SHB(;F=`g`=%;#wa2g;?~`oJ%EH2<&=A#Tx{9y=Ml{XM
z&KsMIyGexMuhBrPwrxY(?5)Agn%FIQ;kII&`VFc>kg)4~FrgzoJrEQwB~6t6+^u>G
zKzPJvDBe#YhRjXS>GIjvq9Ba%1b6&M=95_uS`X@_Tf6IHhIhQFv255uf1f9;q3>-C
z%9zpP!iqO0EAmj2>W}{<ta{shKt;0maswiG*=qiG#EW*+6DHJJ=<9+OC7`~Go~Pzt
z*0+;YyF9V=&PUCa9J#Ol5=k7|V@@R*Lxu#E+>!B}bPas;-B(CF>K{?em&!wrAu~pp
zYqmb8_%jL!X&$+-V_N2ni)cl9km9%M>>44j^Q*O4bh5}xL#ifBJ>~xr96{Oz2|vv!
z2nkoMu(6-wYeiS%sJ|$OK!^)lRVg}MbOK8Q-T&Rq)Mt@I(rby)#pkKdShC8?n$|t%
zk&>@>8$I&9(1mTLpDwssYkCuUar#KD6xDGG%ZYfyl7!dv)_+mUlyl9Idz|j>loBT?
zf(1=OnG+w$A()?Q(W~wE_ZGwO9Jg+U$H2@d7sTp2`OJWqVu>-gktq<nKW6F>I*fFj
zfxmOmv1%l@>W|4m?qhY_d>Str9TRIS;Fay)s+jB&ib}KbFotF_la{=Y>R<?6jMC)A
zL1*1{2D0dKsn3@O4Xg=2l)^SMq69h%T&JR$IKJWQ(X@s=<BdT30CW1C(es$fdGgtr
zU13&{CG%O1D_*p5=eQ6eH`YEwe@P<NEh9nTEGL#~R8~|Rsa>XyP2xbksDx5Lelw72
z!(ZkK2%rkbk0}2PhTF^Hx+u+DJklS_*LWNjyZ*n>ez2aQVpT_C*!}p8o>h8Mpq&2E
z^uq_z9T^S{DO9DsVZ~iOi+U8PrxBd=T*UI={XxT_Fr*@(d5n8H!4})o{CR&rvRE-C
zxt+y?wC>jqc=h@=ZHvag>jUfHQOMQz1)JXj&YMo!?eFrWJ}>oR+B$EumR8Na*KW#<
zRdUMIg5jHMgGsM9_rNQ}e}Ja>@6TIP4WtG>r%zT>CyYy-uDDiT$<POh=pX`k#x;m8
zap$QH@Ciwe;|;=J&AP8yyHI`QX;TF7^7-Lf0$wlaYiqMa`*<y$vk{f}gePL6P4E2d
z>)6g~L)t=`W6E-uha2&SZ{u(Ed7J=yO1_qB*(Z4JQO(Q9)nZo}BxL_R3n+~+T+u)(
zhoE2#2ixi|S?vf%JTEEF*4SaSKwRo=%v`wReExkIxK{BblUir)<-2V^hVjf;y|<eE
z(sN+NFY7l2>kv<#LZf_4D1}24>~hLeOYEIfM;E<cGdR@A=P_t9fn+iO$D5-Px-ShJ
z<LeUu$tG7)2m%GL@*LdnRQK(9Ta+*B5Btjqh}P?Ck?>!CV4BO#8ed&a=+Wy#Z)A)H
z%A@2Dw;@UKGmxJMS$erDs;M&6S!no)3WncF>pIQD_|<Op_U4i{ln6}BAdgVtoM3(8
zx>P>uL@tA04F!Nk05Wt|y)KiWn0i!<R8wFh@U!(ZT^4Z=MKUk=oR1rY$1ct|4fpx^
z<4$soo2Qpj%gZ|#27Cgj6dXbt6DH-pix~v4tpPIi?3UJLJkmwc<7nN6iZ-0JV(d=6
zt{E_+dL9>URktIM>DHagOpM@m+1|;dx`jM>|N80R`(n}9`QF<d=hrvl^c+>!tbHXA
zeqD?n)|4ciVg^}~qx(>3GD5!R=2bSja-mhP5?owv{vzQ7E&r~v73&dp-n=d$kk!$C
zbpWAIvIGaoO2*MSU@Rw>+0PrfiGs7%Ll1u;6X08AX-dCoGXL3ski`L7e(z6BWK2C!
z61or=Z_I)XZJYr=Hffd!KA1fsMdd-Lbe;S0=QOnK_S?k!p(x_?%6oKU=jtLhn5o*4
z+>41zj)Ls~+qwt-v@T%#ydABy7_A-g(a-xpq-#8qO*ykbj(Gm)J?Z5OC*(BYV1Bfi
zg&a`Pr0cHZ44<9zxkWCCBx#lC?p}pAJ+Ddg97KyiYD%t4dwP71p+rD{{#_@M$YDaO
zKNoC=DV_(i)!lRi5A2ZeyF^9!#BQ$+zb~=vh&(A4da%|3K6i#UY%`-APTPte-d%%a
z&w9(=R0#1z%l^>+Y59xfr!FP9AIFiT;NHqvcDp8b>NVQ}U##h4X9D-cA5~K}+I4a@
zR+%T&Bf5Pz!A!{*z7zKK=bJ}A+bi?+Xk?&YahDRk72k}WvGGA~O@vZ(Af&LZDXXZb
zGO!oFs7Q-p;&zb;*+eeYA1}L*&b;>9)&x|bHLq}*r-Xu?z(5>*Fz)NVKWWL8f+cUp
zk1Fy=i4>O&c+<+AND+(OY?mKRcoQ!X&VZeLQ6?rsvh({3uwW%AG%nXD&RdBTKVGWO
zLMX5|C)192M1z*Wp}#ss9s7`>rV{*zq1-T^5-6acs?c&S=4wm7Z2M{KR#)YeP2TtM
z^7?^?0h>Y}cHCFjL|_Ij^td(Rqvxw+TFCv%cZir4gyQ<`F1+A*$YH~Trli%6K*1BY
z<JdX;cbN8^T}egd%P1APIDRpr6CH9p9F!t;E^};9ReZ|9_9^{>agb^D;6<EeX))OV
z-+9m)SwmfChm5ukaez7P{r1I)jNhFYfUH$+_z=A$j!~G{jYPY5Gby=ZZRF%*0mz1S
zV{$PIsx(=5mPZg|BH)%Ch<<B1+Oqb??9pt``6#ZK`^B$te=(K}(J!(M+DtT?p!S6^
z?f^9_dH>nbTJsz6du}-rcSSIN{#d3kGbkEmV!!*@)xzd&Ecdg$z+Q<f=@Df&KCLq<
z0cN*98HRAXxCtB^bx>N*dbzErKBx3!Dpz~Ec?7nko`V|GxkZ$Bm7cZSyC{Vfa?$|L
z5S=zFA@h-E>j8>hEKy7!_yyVv-|x$Pyl5#B5jpbBj`CJ99*&I;bqR{*?Lip@XYf7^
z!hrpMQ4a<&#o`Yjlr*yWdiyyq)omHzPF3==g*1Haq+z3kVBAeCS&60{dMZQXo~aG&
z(|9oa*Cer>n7g08ekSD-z;)r+?k>uo@BOrnpXViD9dBP7qTNQEg|Bh%BVKXSt0$qD
z$6en;Kf%pv{uE5blRnXZgWn2LN&(lCRbnlLo54iA)UMO<E6aVX;X9K_rX6uT`|QNg
z4650Ox8Y(p#v1xhXOILS*J+>Ij8r)in%l2Lw7&MH0X7ZJPJdYKdTQ)mUJt?dDk{|d
z(R3-dtL7SQ4lQC8|E1dT?j4Wm+iLcy#zl{6*}vHWS_(@bn?`VqBVk^W%ir0VMiiZL
z^GMxet_!5mP(!-FCsb3?VZHf68=DWq%Vt*-Y;E%F`v)-_lpA$c%3T(8Ap=?}>~vyO
zda0@OmGat|8@LJ%@8AO)aD-L~^)9_0s&O>K+Wnn7YjFj-L;4;wmQlFg-duA8iCY8d
z4fu5xPid%JshmK-QBqDz7ltt&7SZu!hX0LeuiTw>Ex~A}eqZ?oknYl1aiE2UQ_*5J
zH~ODiWj|JZzS%oD!Z6OAmL$jWCnB}_xj3N*n)+!3^C%w=UrOQM+C%mc!3Ybgm`2>y
zUiV=*&pxM+hrV^2+<|JZI{~`5L6zO2^~{CwmgK;GJoiG%2@MUpxSelm&F+d$Q38J#
zq>#pT#Pm3Qt2Z?L1T0t4Wm`uZcnLAxffFayL0CF6+Lcz;Q^Cfgsn5I;VpX3iX!mNT
zE&E{|z?c-p8vH{;9M`|&_yY=qm$-}`hSA`0T6{ZZ$KAvGNo^El^pS<Cr~l~rTr)4d
zJV!YH@Z2uJ9%r7kJ=rGhYq(X>e){e)I^7)zZTfiS>!15T)#1sTq9u*bGwL|>KR>)x
zwV0*l{f50plEJK08L`Cl51|0z(|GQ|4!_s_42}@!h0ssABSn+Dzl;~ZmDoz00OAU=
z+%}1jUmZcgw1==Vp<P4>A?_eLb@Vycs&+}jtxmdhC_8ryGaBMvT67POUjGhwla%8I
zOX;n48ct^)*gY3<ShSg~cZb&hJQQ@`?Vu2_s;=>-vJEGt4eJPNU~@W9&k(D!<rg#m
zElwHi>oEaXzqG!$TDUp+@u4kVguh_qX68X86-%P)Yo%o;1Tr40b7>&t)-9BeOC!RF
zLdS;m)y*kn5kb8Ny{2=ZxNNOKA#wDs0VBo)7=U!yRK@tr`mxvaZKCf%!;q;Ce!)dV
zZK`iJGW>R!@m9IZ$Y;XVyg#w3cRKTHyh`SU{_s7!Kn(P)a4|h|-$}_Yh_tocZb<x$
zEm0APPSTgD^l>EbM_lT7lDL7VKCp+(gnkzhCp#W7!QS=_p%=h*FU2q*4BNkw(f24g
zIyBYsfn}MuOqk^rRCXIK{e<SXo6-3q6G|yw`7RAt+0Nk;<6Cp(>D-5!uNCcS7rhx-
zZ6UvHrgNR}8uXj%zX?;9>|@&E((Dn?^_Ko^X{1<N3L6I+qUq+a_qvyFV0?|V3Hl_;
z=tW}B`9OQj$%)X~S4u9`6YI%xg3)-t$ra;2aSLvr!7uYk12-5h(}p_+v6JdMLB#v>
z=L_1#F&$2G<6j48E?(tC#xl`0Bjd}(jcNWnL%dup4kE)E@>I|Qh`LpNCMZVo*1|m&
zL3aA<9htN>;~>AWekglnf|K2e^p^`<0IBpgKM!-lc4erz=uo5rKU)rH#sd0HQ98a-
zhb{p80Jp}hEhriJ5Wf4l_oQrMFZQOzsy?HYHj!BW-9g5gdX($=OCH9HMg4{mt2ol6
zxJSniJ}{=#8-GTp#y2_py>d|PNs;olL~^d8@8b<KkGJc~Zu#VdA<do5Ec+KsSIaqp
z#<WL9fy~WWjpee9L(D#DymCGM<&L}k76uu+^KJ6E$o*vC;YJXdOey>UoO_drMwR5m
zSEkfFi(N$v{e{B_x);6Mo;U&5F{jvZ#FWf|^MSc%#*unm_qsZ@ku+`VjoeSSoWPX#
zfLFh+Z=3E$#t$J8`TrYN@_Fx9gCQ~0@xpM4c<zsPh<@?>QvIbV&5OQ{E28IFs)_x{
z?xq^EqBacksDh^86`ASmhHq7iygMvhq7;V-GBT|FmcT1pd_6j<>w5x<ib`;4iI@~B
z`<=N%sk*R|X4u8Vkm$DS{))B-Tc2Zw8?H}Q)P-6ghAH|j@!32Ub<lv^FzdP93pbhk
zWFmGt&DRW{nlq)@&7)unlxcYc!-oh%XnkB?7lqKXS(OidTtz-0*6!P^1(~dI&%zk>
zqB@&mE!bg6K8e;tKG`=xhhntK15c}>?opoms`D7ODiQU)JyqER(%8K+%oXvifQu2;
zaFYW5O<q!7w5r?Oum5$4l+xn5Ak5)^@5CiaR8%FTysbsaHkm7&C(}yXClX=`_wuV#
zKEDp8HG3bVt~W}H{yyyyq|>=l?0X0)-%rg^&H9LIS4rQj_`qdh`q5@H*eHlBI*;eD
z$PIZvtV?6hXMx&@*+P|<HS)2X?e|U%DBGaRg#bTQSb#rjM@Qyes6?n2`T4w5QC+Di
z7>(%FQn7yV;4v{pZowl5a-Ln)3_aiZBCl7j$HsM6aZ%1<Ta)jNjBXl8AWgP_0Q`Is
z;9}eFavcZ55WeYv_k)nDXPwJ90@-iXSCHxOM<H~&LXx{OmHTIieop9Ziq{FxVaQ6J
z6_NeDdA%4`%PIBxbc0I%%eb$upzXMw;L;oG1!%}RmMbVt)X<aKBX!hUMxx{H&q|Je
zs}V_K5a>B=-`AHrs@qpz5UTs^59;GhJ=`UR@RwMBw7I4TMliX>;x!klJr+K!<q6rp
z!GL^8^nk(|tRkeNWe=f<lL8gpHpjb{RuTRHSqFLzHPMA})@{o<Dth+Ak^TsT`4~xj
zCAlYlm%!-F?FeltVRpPZCyf`}pKd~>1HD(R(z6b0iHn-?PuG$RZsrnla)yQs`@Ir_
z?_zizlMNnEkm)+1AV(Zgn^~?|fIgrDiMEVGA>qWp?Nx^1#gR;}W2@4XfJwI`)^zy?
zB%gyBrj=}V=+_-imY(x{6VQs2qgh?Zbj$A8^cS!J8YJ&p2nDon0(LKMolkg5bQf=|
zlcTZ|egz9L4kLWHiUB`cL<AqQoF)L*U1lPGn8UF<n@X@M3r0t`1_JQ{0~SSbHCwKa
zFb7Uu7+4`7o+vq?jG^uEdMADcdxejS$#pe`2ogyXUXvH#vwK*R&*;2w&f_fU4EA-{
zlr4V((ZobU=`T4Ky9yRYfYH4gwuL$?05j^$R$l>x$9&a4(D?DYd}X`5Z{Wq`MgCLI
z;)y5j#j_R*VBW-zE>XF}u~160Lf6B!fwDt9x8(@=Wc7*k*6vSS^?QB=3Y&>kG2ctE
z{0zMN&($$Dd~`MR)7tlY)xpFV;cNoY1^9PGYLWLdfv;u=hR9!B*WPbaFH!vU9wD_K
z9O4-Cz(CS%0^*#Xr+z3U4^>N!)Rsc*NJ4ahYdWW|rA_ig3|s9ybkklg-@or2#IX8Q
zr$Zl<vN`(rjElN{E;8x)dUCrVN}5}c&ky7^Py$tkB~#30U&#S39ZRt=9A%a?fo1r1
z#h9K;73eA;b=n-s$=79PMMCOGz9eX^xbu>jGmGf^A4adgM~8eb?<<Ex>C2zF<7~r}
zE#`ShK%>hCBzzmU?X3CP4!#q~Ye5bRlq~96Z+uj`a*D)Y7oM7qA1=`r1L!Z{wF^Sc
z4?DPgVoAz81oK3o2U+ht{r|0yM7$O0uB7R)eb||aS70Zh0p|Hx)cWUcwjaHx^z`Pj
zQudcgMT$;hi*CXB{im(ZnKwi#@h9xPAUYjSd)LG3tLuDI@fN`K;#_l;Qm~~e6}(Z`
zK))KX5{tKfRkon|>eB$f_ejRs%cT^Y$ShpHSYAnLku$B&u|mc$47yA`=T6h~{!upa
zy<nLO*~}C*qsLlov7%=#3=*D0dA#7!q+h(dzht^h(sg&zNqt;?2fD-Dek)==Xj##G
z>Kt*xrOG-V3nP)AWWm98r{EU`g-$4X2O~Ls#szP)&DMArCF?FW=<<GU4yM;1)h$Kh
z?g!E8kyCgJV0b${E0-vLSHBn~;u<m{`*j(kSDey$*Eh<0GwqsLUTkNGOK*99rEC{G
zZ=vIzI=$-2|898Ni>+)L$r<iNuNVj|JDXTdUw?l1{ZMr&fS+qk6pUuc3+Q#_^T+|Y
zKPlZGWR(WsfVs^ixb|f7rk%y$mR&%wJIUqE<$N!n;($fEUEgD5Y=nVy@vwq0+CM4Y
zaLOm52FKGnxVGGP^$9K{&Ig<Z&!K=XU$$Rh?>#f>xEanTbC12w7O|d0t_&k3rWQ)H
zJcQ$o7SvVr)rk#=iA~)n9}Xc8k3C<Q+L0G6I20R@f9i3<(@)2xtsJX2*#Tb^2>w)I
zGGPa%xO>ytxXP>LMnNa~kt;^w9G97Z65TP?RDC7X|F5FWL|Yv|1!KLIBK<{v)6G`Y
zYiK65&tue1hTofhKQ&caqvwvQ+t~~QQ*p&;A<>_`1%_UqeEqNKffuaKNfxgMxp#8c
zKa77ktkW!#$A%1Q%7%eUgiN2D@%_0IL&{!xtd2vldRzCUL!pCnok)J;`}OaElcrQT
zK^ic7k&_u${e&?^Q9uv$VHr~~$;rw2bwx4dCA`vfg^;9wZ%QuPE7czV;W6%s8M-+g
zW>!QNciU?Yv~o(Q`16L(eC{TCuaO=?I?hU-6b-##ho1L*<@l%T=B-cS2h)DfKVK>N
zvq}3Uo`1yb2cmW&_knDki!}$LSSbdcyjYwN4si)sPx8~sYiRSVNrAsZZuy0x_jqyh
zYVFf(V(9J7)wwC^43+^;e|S~AdR1ka`)QzMD`2+X<$;0?!$PS{O%>Pkr2|g$RG(iM
z7&WU#h4}z{DEzREE?yr-J%9tkm()+x_?`%N_;KS2tv4AoA-o?9=%XU$r6b%x-;GgH
z8)~-6+M|a-h+^K}z+cF3d8y=K_+JvEgj{ea*wJa^X$Jd5ucQAuKg-$jzw}vi_gnj9
z$o$U^f<%`p!`4`*jBe+>_9j5Jfyx-zC2)>zSxWAf_ge*|!cKxIYYx$xjA&FmKt{BN
z;o18+2)4_6t3ZCjyYQzYQh)?Ak1%2mTf(8>?;L$x=?yvw(R50(tP@1N-mib7>e%)}
zS?x=(Y&rx0M$cA%-Zz;gy2OBFpBq8sA6+{7_CH)1&T@P>g?qHrJ>>*##<vWJoL4&;
z650#NlDEiY+ri~xlYA^~2E(6Tiaxm_gx*%oP`tJaJz{oFQC#H$6Tk#hzpRc|8p|y~
zQ^tocSblV@(?AQ=ieSDjS`u<(k6WX)Yw~?m+gg&DSTJMuP}~Tyco5l-)3iV><kZ<=
zF{Ojw1&nuWvUfej1Ns}DgwO)On7^4r69c8&_^HfPJG#)XyTHt9Q&-U%=WkJd6-I`q
zY6J0)*+SlszU^Uk(7QwUD#Ny3s~Gls1LgRmIEu#R*kkq_?6U(HK1%N*#R1sHKVsp$
z@CJ@XdpIqvj@>g;(f2dX$T;f@>^a?X+7%WizGrX99_I1<*qboB#R0dht+o!gUg6=~
zifbEy;dsK3lvx*bo)_Kt>sZ3*0DMSkY9H9L9r5jUtWdXyI=K(jZA2S}<=jb7U?k~8
z|785zE@iVhKh~#;0a8nSFC`v?%W;qH`-PAt3Llyk%}#vwHVh-UcRB9g!Kx6{v%*D{
zL<VnBao;J;bI&W;BUuIa3`t{Xq|dd{v-LEuIw%xaI#tbSZ_Y9Hp8cI|=m{Z<lm~6Z
zR)sh3HXVKO7}HC|G3rSR^cp6+r2o>F`5s)0l`XJ^-j-7x?5~-o<EH6~42s;0B5)!k
z^gKtDKW0aXY({4#dvCIV3O}RN-bd$qdEOjRS+vf}3+b<fTC;A3{&w?jYY2EnJY)5~
zV9>T6k;skp-i+7?!=c&F(YsjS3c`O)1FDcC&^}omSn(1HhdMr$PUV!d(XZ%=_#)A8
zVT9ckiF-y@q0Ch?^p}R%Z4|c%J71_BOU$GlX@gEKaFS7zHzF%kNB~BpW}C|%ZmcX#
zL&<o(7ZsQrSFlU#b7d<+8~4BV3^%NN%=_O2598(mcF31kW2%vt$op_<oTke5u|>XF
z(ra@z6i@M=Mqz@Jo@7N98Vnvy`8ti3&1^7wc{L0O7FZ4xMx!Ja5RazX3Za930gf6&
zLGZ)cp4H}D3Q18)FB07m9~)|!A$MNWVhD*$J~UQo?J?yv<9r?3B93-O2R$z{ebv|V
zg(kCh*6S3$H12A4A6fuu5$-T+WcmHoT(|Y_ESaKLtBdMhZ`N)tzry&|Q+iy!%#@mJ
zA@Ej!q4CD<Vk0ZJRxREII};_p=~H#gV0z2OcuAC&`bDd`bHBsCx;6R*BTR7M*&=82
z{+Wq2Y1gltuRvy-ub)dhE~eN0Wk=29GI~~!_BMY&p9br9_zmPD5=v_1wf7pTy&XoB
zj#tEnr1UPuldjQ)KfT?mOYO=z3Uz{PmJ=PiS?-JAJ106i-<2PHoH40ryQ5}fi^_Xy
zK8h^Zr5}NK?u4bV0{xq(r*~feAjw@T>hF7>)kOiCHI=_x&!oJJs*$)%w$z%o6xEiP
zrIf9E5Y%hYefnJVGmpxPq43xapw3xQ^TTLCg#-hA=9%GLdM6YB)P;PaT&;M5%c)8@
z{V(C=(N7>4Drh$o2U-q$drQr9cRpuBVIS$`A!xMI5{H^TuDf$g+@23iHG`Tb<IeyN
z75dx#XETbeP4Ec7V4b5@TftCC4`<!-iaq6LL9mq5ftsnJN1GCqb?-?c6TXSrbGS0l
z+4a2}VnqJdNkXvNf+xm1c2u@qY+Dx^{_@t&^?~wD-QPyO_k5?_H*6S)Ch-Zp6Lh9R
z06{alYzNZL_9kmWo{FM1uR0l+T<C2G+}Xn9<id&p-sYICbEtZ}HMm4CJonW~3Rxb2
zpz6_zVox3Gg`9;3Zq^vXk3iqsldui5*Ac8HtMw*Q;;+e9B|=6YPJm}U7-7S!6Q<Ny
z=jzY*n}K|3-sCY6ISARMxJ<@no-MIDNc{;~>Qj&XE6O5cLW<Y}2;an|*a2`uBs^?3
z82(<LD)RLAgy!eMp<m!YmB3#DuMyd${kU`V&+}DnIjLZKYPKZ}p{nlK>(29<Zx|Sb
zEsvW<z_+8_4<;~M{iBA<7Ju6F@D&;)nlqAk3}OIP12w(AcEk#Ggm7A$Clkg*bxbXR
zczC{)yEiPipq41X@~W`%42b!yew(j}Q@yXTG5oS$*?>mQV0l;owL|BF%HSI9nObN0
zl9kf3M0MMG`*N6Ol3K2Q<EQ5k1_<N;iv3&OVl)KHe>WpUBVOsWL3o&`GAezgWL)Wa
znVc7@PP;XdW0ar^DRJKD9AD@=Ub_Kn%CV&FPaR#5PLqi<W9>}8u-Pij_>*0&XZ3Q9
zf(FAknnEc@A<<}v`N^-A`a6@ENj0~pKgIIP&Orjl#CNXu`vHNtZK0OZ^f7-S*C6En
zv-Oa4K8t@@dZUx1A%oo=xHG%Ap_U3dDERdLd-a&bMt>VldHcDx$cinmrnB?yfA1m{
zLk!GAisgS}G*57(Lu;Ek^_u9>Od_$EnNbi;hr*HQsd<H)mh|(+;)Fxm1Z#w)$F#(d
zZ*2>nt>Jxy+YCF|(6FCOwj;|NRm)0GjN(7n#@p>OG4v|YGu8iwnyHv6o)^5aq{L_T
zmR_YI)1&xJ`b2{?qIg}KC^KhH^VwsfZyOtyQODukM^Hevl;_01#S-aaQNc7;8V{hq
zH_PTA%Wfhxva~nXa4987Dj}D~WhqXg21Per;t>$U2)p)6epJ&f<e!ZFfCN!SGd)b|
zxSz*|>)CXO-&)74Y~qXm6?|BYk8Ugkt}<a*;%9Hmx&q^CZ#ky^2(Wls#^can%vr9;
zuH?P?gnjXR`5kE!;{66#B}DeVOGuJ?ALWT1JlIgxuL?uA@5-dsTc*>_>H4@t9Nw;=
z<v@;nFzx-rT=t3rD`vSZ9NS3+nB6=Rzc65JUxeXkKm6r#VYTRfLgdecpXZiD)G}c>
z&|yncQeLfpFxO1jWMPn~A1b<ueix`u>ChRqiSjIPDzN@+<k58o{_&*PL8scp4%hXM
ziGv_gK{rvmU&=CZ-jnG2`zzJ`e}8f{GSxo!%{l!~dqg>;zy~j3<Au>~dS9@JO485!
z0(*m<%##jku_`-wsC++6<RECA<Z_sT_a5|JKK4)|LQ3VlhN^x<3>T5gj9Q~HoykRe
zRqI?g{)t@dX4j77H~7?pLOeb$i`v&(`Lh&NNcAw~1iZP`w;i5)t1Y|nmYd4mE^LQP
zp@+BG%ISUG>#F%LsU+>+^hgylEP%r^H0o7@PJT{0_cC$09|dP^b^<UU6rOVRzCV^b
z{lyL{X`hQRa=j^M29;1)JH_@tz7V}~5}RL07s~r|aQo3t$PK6?)-+lEaI*!F!D$vU
zDyC=QEv#O|>=_8(ijKBKRY?pyOI1J#u8ytvUQ88N?m{kjfVPBkof`9}(MxzMV&Z#?
z;K|kUt@Bdo7-dINl7o3qp+cTENM61()Zp@bY7SzX>z%0rPh$8maq;e=^sn-3Ul0fI
zXQ(4|1HWZl&&0$;ov@5>%C0cM2wS`4Cc{bG=>%QdyI6m4g6h4{LJ)KVFdJRdzVt}x
z%KjsjW;E8xOKm9_KB$(%LT+^L-JAp+0U@eZElNeacRtcsvY09ig~sPfcB>lI0EOFh
zTKMP2FzsXUY%XLfRqYC)XPcM`w4gePa{qw>G>8nktLCeJBszosJ)m$Xb$`kM%hABl
zUnG2U^Wh&!q1hjZF2ru#HFMOzan)wakV!3WWTg~4eqr~$hq+t-RtgCp=-@N}eV^HF
zp>_>nc^sPrw=dP&xHPSkQMQYRFn|mC9ky$-DnF>prG+LA2i^qsiz5D}2V+-i*WDmk
z&j(J|6my0oZqfF^Y-I^78e=^Svhc&_{46jCHcRr9cE~LTQ%#(hXLY#-qnJHaYrT3Y
zKH<7k(k2a5)TOf*$6pmxg>gFXs)~UO7tuQdDy^O<Qxcb{uJbO}l<4$QEO7(T%FErl
zsjX?cvRpyLgQgF?eR?3JvR6Zgix5Bhc&9Ec5wQ4PzK;%SN8=_i#9iM_m~sJDJ$Y8o
z6>Ti=!PgvY!t-dk4aB*f)|G^5L}#U`J4vn|U@mV@o#uiLzrukx-{&xS#B`X@vDa<?
z;vpESNhO0xu1?2|@U)Y#)KWz`UxRN2)~lo9l|%jg5OT+a^VHd%`!E#i;^qU70=GpK
z(rJj<JN&5&SKHT~eg};Lu>bL_X#z_T`#Z^)<3vMr$)|jLJ2D>0#-?C8(oixUk@c~^
z6jQxEX6c~<rS8{7STMTc&1De&v0AB4U9RTArw-kJ&IxA;({yGdf<Uq=2Ol8R3ZMoH
zZl4BwC=jWIsQ`0Y@TAZ3gpAK`E_Gt-oO=*!Xt-2liOzqtG@clgfo_ON&!67c+sC3d
zN}Pyo5Y*&zYzWDR&+0gXi=l8^$7^YGSkgY|<aRkq>cQ*J9?uHZRl>nOb}8bx7|ir-
z-LFczEt=KmL~DTnAK-}=yOEdL2+9tkPkz34J4ATl1}6lA^s*GFkqenXS>R9kBz@pu
zcd~!}A{s@EB(8*lLQf)M=Z^OBkISBB^Xc3|cjWgB2xUJCb6i~QgQa4>j_b?`qdT7X
z3&V&1&*NPX{~Y<)1gEbox5rCXsfS)8FFx%QVL0ho48MPryaQ$izRyO9_pKE&iqx_&
zvms`C;Cq|MDiESR;JkpPn#?-J{B!oF^O2rGsrOJKGD@Fe0M|tx5#D=}Fu`AP)3UrG
zDNb$TnZ4ikF<UiGpeotLGe7nl4voOsJ_~7Ntmh`9zQc@*aUQiEhUmpGTG3Hd8s0U;
zm@#KuX8fC$hJcq}VOiyeuJf*2wyN+&#KQ);F#%`g>%C`3fr^(!?<ZA=es%jBzeGbT
zIh=gA6RqMVNVoVFdz*V_kw?ptOl7|-b#EOqUwh|xS?854!&IL!6s`~&DZ)r|K=JwF
z7lVham<axb<RtA00iEv=+vs>kN~y8D7;i?3%jUvc_Ht!3gp$X`kl3TEb0(?()Fu59
zb+`VI^Kv0r9sM=SKFEHsRTzOj$`V|1_*aOAIY1|(1*AKBF-x;Z>3^uD#N0#d0hTU~
zlqGH*6|fS#Y;SFJEb2iSoj_Rk6YY-2iF=Y@$~pVp&swK6*BFZq>V!(q53Xb}#mS!7
zcygQe?r7Z2T4tgKu3f^|i6w=N7Zg2wM(s=PniQ{uKGtJu8ZdChrg24(;o_p@M<;*1
zd#uNi1h0Z+{x2MHXbmlmL^3$0*nNR?<s4Yn1ua;(Ky-4#uzUacOB$^bI3PmuNdrBD
z=78vtkBruDB`IU4ncfzRZYIc#saG6x&wFV6gJXgt)h}6cC88s+N+nzicSs*V0pM@z
zTdlUSoI1G97~JV57jY}bF_NFDcR#$VKApC%bRQD{(P%Tf?UIhk3v?PcI!Nsccwqd2
zY?;IIp$n?M;Jwld7Pbq*8YHt|oq(vW$79Af1J;w}Jdtl*O4q8wlncEFFP`rZ#zf^M
z62HLT(Kr8@ooLwe?)LKC(LF@dzUX=?@~=XjpQ6`*T5&(-Lsq(C$p@6pwH(X_8doQV
zU~Q6YXN#Y?w#h))%_i~C;^UG%3=^H!vl!-UMOwMi!>)5y0^{y0XMb$@ho4P`)@s?t
zocfgyXf>of7r&*Xf3i^ihTYz)<=I`mM<3yb8z7dLjXq=n@qR`a9rwpb2AK(FVhTmT
zH+fw!G|xAaXX#VvX`TCICAnaO5<sG|$ulog_1Qq{F>|pl`7ed+Pyn9j*>6c#!2zTl
zxMt8rlW5uGac|rJh4zerEBf!*B-gO6T33P!%z3VnvbDBV2?K_*McZTc`Oj$*1!et0
zF!9ebE|w7w(|I9`kZ_V1Md1Sf&}DIQ!<W;i4-!xA%A^xgqVW;MAc*f$+&|FdE79w`
zqO3g(d<js;-2Sf5_#F3l-DzgK``KKj;okffXw$)je|cj0XL@ou)gPB%Ve^_diT)@2
z8bosjPZ9+$)=f{w>)6F^&Z1yw?DvvTXDZD_=e$(Hx;Y`=8;3upvt8Hkfv)7jxggE*
z37PJ9EJ+58b-QMb26lR{Uo%$7MPxv->6=wvwWwub`&Cg!Myt0-+r%ND*9L?JbjiEd
z974j8DSk5*-T>nkn+6DobQD@x-t@1b-^NzT&~sT?Bahp~C2vqTW`K9EDW86M@4N7B
z`c1?Ge;n>Lp{cvd6+8wn<r0HtB&<c}XY)vdLpSY|w(*_H6<u$h>-(eOY{SoQw`ej?
zJXzM_S3lN>GyFsIg7vSM_CvD1P?qCFpr8XNlPJhp9Y`_zKdik6RFiGfE-He8BE?3p
zqN1-NAOccCR8;IyQ2}W}M5KfksUZPG0i~%(QMxFI1Oif|g&-wS=|vI)gdR!=EkF{I
zkp1x1?>p!F&;IxR&stfotPojYa^Ex8TyxFLzOwt&77P2q4x1b^%gKJ{j5jXsiCD63
z96v$bxqT9t#ggpP-sa4y)T8#bMyqBxd!33CbgGH#ITnzDTC<nld@2jq4hz)@-7&iF
zsJ61e$CyEtqMhES<ol<%=qsCqB5qHyHwXsg-K$CqUx5i}yY2W7!vpG?zssxKBE%``
zBsy_{BK|j<OyRr7HcfKl2i+p8)sp?9pv}H-;X?Z^?VOY+8ZOVsw&@vyfzhuq0>t!t
zZYM3Oa&te}Y!aG_2MSI(I|<Ir06E>6^YYV@k{f+jI-BZd@^dE79iUnINC1~d?qz$d
zo|a=%R2Gu6dSmB@A3#sY9_<mJJNXOqEbmJOa@9)kUZMQVrzrSE;v*oV1PZOcCiUB6
zft=WQV@zwK_KWZOgl~?mzYD8?zbDZ-W(`1);U7+?su3lQJ-n+H;M(r_HPJs<IW89n
zv|W<GiV^VRg7yKehc`pguitqaBdqeiB<c4N`+w}^vcziCBX%VNNlC4d+K=P&vVg8o
z_5_UFOW#G^a?28!`P9nz#<~f&mr0ls-Ezk(Vm{ilj{V@H6LzIfe`jX|)#lr_g|C2C
zOW%)WFxz<M{?XTWD6fHaTOaM>rU8wn{*9MI66Y4;#23OctVSts?%dxmB<1kwZuxf2
zqXAW%=wDt>l7>!*FS9PU7|7Xsitt^6OE2b!D-XG{noQHlFT##;i&a@un!jFu?};=%
zT-yziJ);D)Wtw!W^Oo}l6Azf&BoAjR8-6Q&X`!4@?u0+2w4!z{Zq*EW2DjEI=;FSR
zW4gxA#OjBYmi;!*9rBn;Kk(zwyAx&KFRXjNnPL${47<uWht59}JyG;5p>lYaZdj$}
zv&Z|!icZJooCy~>c6xWK^Sh|$cqd1jsOQ^GoWP5z@2sxLqR$x&eVIWRtoYqt!G5Xe
zAH+>E43O=C?WJi<4&_tb?Ugi+Yo1bncJqBx;S{g?IwGk$2UE|d<jglnR_odAhiA))
zhBVpP_m%r%DWa>bZ4it^q~L<nHF%q^&y;mUf_rO6HG9#tQ#PC;!|LT|<5rylyX{)z
zmGZ|*@t#CtB18g|yf5a0$dgn5JZ6swnQ(r!{7_G{|B3p1I7Fxh@W$$(E!kX2^1}2z
zdk&dsU2_`40s6Xr3)uw9t>O&MQ>5<M`2CvrP|P|8zjG9PNm!C)N>Nj0*J!*G22J_@
zP_M?h?>dHhR_xGdPTnk&0%$L4f@qBjr|Q|;ASbJMLaQ|c6JY&$6w}C$)5x4O@ekzW
zH%2N2Jv{sx6{Km83r9WYA3hp9Cg0&<x<nZ3xh5ad(0Ik*=-P}=%8$HE(Dk!Hy*J$a
zk9fSx8jJHccKiad&Ml5R(?8LY3`z89_vJRkn2K;mC98mm`$I}53({A@_bV(*JC?Fd
zeRvl?cOWPX^1GwY<ylp%njxMCV_?$c3p3jE`Q15qCTIEBQ%F{`av;0Ko`PD^c<Qo;
zv3N^xRJ8|rbG?SLQbfs)l*X}|C!~u)y6fty{P!>{_roU=Es`4EHTGMEb9*$C*Y0)Q
z!gz|?8}p|5IlOAB`EQz4<50xFd0bUZ*vz|acDOwU0NtB6OndiJu|2xPEywm?S2%JE
zFTu=Vn))#j-nYMI0i5t-K=d(S-(_HtfxFUjmhe?)!yJ_5F`cc2QjwqwT4?*kplcD~
zD7wU}UO^GWl2!Gii-)`Uo*!fw?KN-OnF2!M++gll=0nEP8hGT1H8_^@{7BucjLv1A
zUo7N3lGLd5xqm(P=5>{GJBf)FDF5!`#45Nt?v8@=c0INbEB|?Yne6*X&emqTV7dyo
zB&t#P$Q`uI{wr=qsl;<QVaY>xDa9k-=^U|F*L+_LW9NAVOUvPm+(Eu4uMhcFrz3dK
zgAakwI;~_91x4Ix1@^qV?8YvabVZ8c#JvV#Fl&AAxrJuUEPSG;-5y@xAPX9k#o2Ek
zzBWBgS%@gT)HM)rqxO=C)et1f{-dDC_<G-$x<RFnl{24|D-$b1n$(miCfkPJbOc{B
z!WDN2ipXeEIoW=tKfwxF0py;HE{@^2i81RdtsfFi)#Z2axr5XY9!6p{gYuOL$_N@s
zxH&@<h&(q3OsKuxr7mI5{$Zid-O<EpzpSYk@_4J%%I@<gTbC9h!H+&eo%MS72~xlL
zOQ<aH@Wl9$8HlBs{-A)+bN1mGGhj7GlTSTs3thlmTpGC$uI$R{^?Sem$hQu&ba6nL
z&m#0UM(r6{W!T-XZeZn$%e{dA27(;QQjrRzSr6UK825H$*HzadJAQD~hK%}zC1(V;
z_JFXVjdIGoDYO2{Jvi|CV!Y>2g3oXgcnxvk3+EXbf*|+&;51w&ho3cmS<g4EoR>f?
zun-5HCwCZ3rY)V#HkE&FYLND5ojrCg+c^EjyP4BXdG{76?2h%>4nKH$Txs(s(ZEd(
zDMV@M6SD$Bb^Q9&%wLDEo6yjuWWmmXWKHDsbDxjwEwDw9+a3{4`MQ1xLw{m{lxLj;
zFyH49GH&|CJ%@tDifaLB{!+F8#uctJi8TU)(}5Xc^o&k#nUwI_=k~-#rBfdzPGA2h
zZnO@r<IyENC6d;Az{s4y@0ab!9CE;~7Q4IR8Ibk+mzdpjGy0~6VvKrpUnXZ@GLggh
zG3TU*vd=#Cgc-AaXg7-zYP|RiatPdSg5%k>2yE)(TKVUiZo+>iBsc1ymL_&*EU=c0
zo=7t@GQO(zL4rpyEzALFrk&1!xp*w`rt-3L?0lCSFk=rVyl9jUK`kX<^ST$Rhx4~7
z<SO6FH45#7q?v(cZcNbTF4GgF12#9>T;RPOcfK!vdI1#A@8ORq*V#~7GP=j`dBqL)
zA;+bKCBJ>0KgyEbKEl6Wrx(bNZzZ^WpPyb45b|L+DdPv#ueB~K335Oeao~g<h)pBP
zMb%Y-BSs+<)}AM(cQjzvkn>_~V3ad=GXJ!Miu*cSGgZBAHIMGZqtnDaqx56OH#KPW
zj_%&9D!K9Cs0*MDqMbeoil7<GHsb1Pdj=U#1Wkl?j3AFfE)=JP<eF~hQQZVP7+@~)
zMW%mE!@MyInE-iBo%Ew9b94e=5|MczdVaa<H9W5_Uh$w6I8q{}=0&6=YjE&K;t}J}
z;_}(ByYA~UXL1ga*F5mGH*(E7b@DK<A7zs?c{gZDga#bih3L%M(eE47#4XoY7Xg85
z<>JX6v(r2A>t3{#UThr+(YXmcDw`8$JE<eBJ3h7Zk*)n|ETz_o6gN%d;!lB#D}RM4
z9ud~N>-p+{p2%6^x3T8V8hnaqeY>5qyQJez+$x4ZhUSP6b%UC@O}cS@t!<NHT^90d
zWC&=nOReP+ls_AeoHmcZy6NH!gBUt`U_W5jJMZKg>Jj^W-(tM6d-4+GpGXHpy;+_R
zOO1+;o&0jnQ(iC4Mtqz54ASt31tCF{b^n_9;T=cfgL>6k)IU&4#($9(mIaq~nBUjG
zy?(<GP%YZ6d?F@6>apm-ncbNz*3I|Ksnvu-I7a%B7G>^`)%JUJ#3Jl!Ip((zn{`im
zN=O7K^i<cBm2<2#9~k=0AL5QEo8)jmQ^C^h`uZU}VsaV8T4mi-X({Wb0%KQ%;P;H@
zd`%pe@u8A?8+PUSC(6n(6E;!#=fOO~wW*w-Op%$d&(uLKrtC(Z@)f<=*445|a|jY;
zz2D3MZ)W0y!dNyTzAF1^*0CC~jxYUd$80Bh?rOU7zr|rg(&+Eg8HaHS<G|?|>CxbR
zAZI<>%6m$3Uw_f6iDe00U-v4!{{Ga+H4Ss*W0iBd+@((Y2uH|iiA-)D_^Cn@mE!xf
z!DjnGKsfZ-@7ZIhiFZ{TLG`J+@yIq?VjY#|Gm`A>oVFNoGpiD-@LQ0}{K{>0)joIz
zqt=g?!Q{3Dx%}|PRpt5Q*5gd>hhAl7XaT(vvGkmvyyx19$Al$w-yJXN2aBr&e?q?c
zerwMiwB;S~DurH?!EnBPb!KRx#FoV1SB%e2!g`RP?!qlUi#mGw<Lcn)y|$SFqfqjh
z*8Ew6TTBc;$hYR~&Sk|pEfi}iLLSw(##mXa7hb=1SnsY;BB!hx&?i^#k>!uQ&ojQ)
zO6<n)*KEm<oQ%G}Z%+XaZ8jlsDbqvr6?@OkI)a#5_<H8`$*lS`zUfPe5LPWk-I=Ht
zH?qE*2hK_NiO&GWMpyUJ*tnH>{<;p9X?S#Df9O~|&XW@YitLQoyAELw4k_~AQ$TwW
z=JgO&aPy;;p4?VjLJ+5a=%&eD-W>f^<RKP#`du_$G<0Qp)qZ^m{F*7H>}JnU+CRc;
zDj`s6yn<%Rj)E7$BogO4l;=Pfhk<3ZE)%<dW)6r#PBQ=)V?j4pi)ld|0hg~m*{#&C
z6fkypx4d3V$Y;HF8WCIuQn;{qJo7WgcvwKfHL?eEm{!$+Jk4nHL=`9~^z(+%+5s~H
z_Wc836J)fY)Shk-&1wuIK)LK){Mp_L%``Qq$77I1jp|1C8fm#4fwRV4V;Y_Yh;Ak>
z89STU2DCvw9TeYtC2{hIJ=^v0CJ@&4Q^;0exS)QrWB28|p!u;5Lt1P80HXR01#J0o
z02CU^$j>v$v*>NloA(E6dsGXGu;h{#Z#5vwzhLPwEYoZyAtm>-1p(2-tepg1>)&^S
zqI`3fLn4?|<Ymre2}GMu8{BG8{g%1@s5VQoW(~9}v#f1>Mo>iI#R7IeB>3%&*OD(0
z<{=uxt}@RKEz8(2-qFb7b`8FLT*%|&_AS2NM*`VvHvn*<(~^x|e7t#;<%U}=_%Ow?
zN6fzr?A{z1sPUNS2>~_FdfDPo$oU?wTjquXsN0G}j_3eUG8l6R@+fWE#dJVaJa%Ev
z_GXN-_(>EH#BUB-bO=a`FR~aru8j{rJ3dI92H@o!C66p`W5UHXjm$edX^0h**Sq3#
zz%D(rIk|560A2mcwc}|HH>D9Fz`1Y*dTruBZXtDc-vl-GCtG-`rJrVU_O<}=vz}S#
ziM-61vA{))ylyZzG+FD4FNd5?>Atsp!gnH68u1B-yR!23Yog$8g|w;d!X4{V@#_z}
zY2vAKNcCgNJG_9oTK=ZXy2|AM4y#7(6NA@z1a6MQg`6VthJ_yWe78|NrGi3Uh{%gu
z;HM9bO|F%X6YnuMZH~Me2U;bq`Y<bi|47bLF<$y&p{p4<i#egNFW^$(bAhEdMCGnk
z-a0TPe6Tl-u_&L47=#5fR-G04F#R5W2BF3BuMVA25&Gkit6JYNU4F%XlYqRqYAqvu
zehQgoMJJ@-w1GUN<IU=}ZKNHqBslC>IvwNBiZe437DCqYdcb=fNkXOU!L=&}?EaaI
zjNr}{LL^QVaVXsvmHepB%5#R+2&!JpO=ZBpElsqr1lx1FS-r-th50qP=ifF2uYZFm
z>NdQEx=Z$z<WyAmIYd&(u)f^qPsP6~S;K+tD2yCa8)tW8u54<i0dzE*5E-bLbH)0!
zGYZ<DFjU#}i7ta^i?PyIhciavvviU{L4;*f(XW%222RR5#sqlBVNX%*WTa<I0!Fm*
zm<^U{;)VqDPdz8H;G~Q-RC}wT$y^&RD7^TzbJ6ixdUWu>Eq9qz+z!MU_vRA66+26v
z<dU@1OdF9PIlrj^BS!dT>l!3SQ-8@N_NAmq*gp?avPdwXrq_g=WPv|?n@hP_$qcQK
zoW5+o=EDy2yXq48+UzF3zcU#z;LX$ssmGaFzwS`oDt=;sLt!cz+7Z2b#Z|5spVgKY
z7SBzXG@i8j&^h6qkQ52Tsu%t^PFh6@>}I`dgYw%U4#i($Inr~Gd5i1mkh-d~BE|O3
zngE<k&)Yh7o2ToXFJ=)kpVIE13%WkQh%!s-gd>415B;3`9?^@I@3W#Cjx~*f@Ohc*
z>dpL-9ZWe{AOX|aTd)G};_hh86TX>tUHZ)M<&vMG_N)dfidi%CI{TzZV_s_QJaWDt
zmcIFgMeXQb9Vv~QhZcZCUmZNUV1IQf?>bY=Gr;uldEVf~wbKVnCyrkzDx$l?8T+3Q
zaqBCvowseT2uPdg?tZYxddEJKl6S{`(1;<NRXWzOKN={u8IMr?*L>6O>sud7czjh`
zc2(tTG0NQC;m)VixK-ywcg;ss#9m>^2)2-gX0i-_QJHUNa@g056GHv$6iog8u;ozQ
zG1mKEz+R%FJ!+I}f0k$2VR4+19XwUv-hO@IOLY|;=GpJBvK}&yP!G{6W1;;H7D2AQ
zJLRSN6p36Zu=g}ypTQK-kRcf6!pnG@0VVVYOV0fIoM&!r1Q}(5hp&()zh5$bL;G=r
zU&TBj#B523o%6?ywE&-_)97rA+&oix>4jMt&s2Hs#m!11ROKn0M+X!524`Qwf=98y
z*8;m5VDCGVulaDSma2<MTRgn|Wa~12KQILjIeodG`M|iVC<%k4yI~>SlP|6_i{EFS
zZ9^1*S>fQ1w*A_X-`GvFYZ7=Sj?ZgRE)B`!h5PfcOF-6WNpS-QeUY&}$J}Nqg=b`7
zP$7h#a#kY^n9yn~PBSi-eqac)kIw_9ry3~u1a>3|Vz^&9sYBd6;9~^BfNT<=Xl@~z
z@{oo0VBfEGrw{GtkAc_6Dnf55g6uODa#_*10NeS6Fq+h)&$rpfq6d{-N8PxZ{3XqP
zCVT~95DYP*L;BAwIEcfLtEHJ55KRTX0UQud)*vM^HgcKyAYx5RM}9nW*V;^8jkF<d
zDG~GAkS3*1ikJ!P@A`z`sbDnIjvmje<mhCw-8JLF*AnoDU(GAMsOBzplrsf~szrd3
z5X2P>TW|NTE6paat4aiVHJWFz$`Bc$S|7bqX4By7pS1!A?}PCp`8$kbvrURe-`W#v
zG0Mve;o4KUg{K|KrnfvbYE8@w`nBhIncQ*p<i;Eb83sGJWe9iFh7bH=+jUH3Im_QO
z2()+~WD=X9E>jD9QWE_YJELj05X<BySm1P{1ait0b{fIsy_^^AK&_UhI-4-w^eBD$
z8S*J(USFXs&ld;2*U>TD5wgzs(Sejm`GNhpXg3S2{3>nf7zxpxpvB2}q8QdcXmj6O
zptCMt1tI2&!TkxELzBR#)O?Mpl1|L?s=W`P3KoXU!IKjOWjY4v)q%e?6aY|nRq`%Q
zAQ0pIr6yMS*2Ja+$ey=zE8ui2n+2ZI@C<|-(bqGLk}(HxTk{OvznTNX;*0f_PF4Ca
zG}`z9Jz^R-2^`n2?d2CxG3ZI?<3*qV6d|1+{185hydyDc_+3v}^5Dp~{eQ-UGxxS`
z=2Ehg@=+!Q#KY$&T{hWsN2P<dOml5~aGXIL57d;Ap=a>0&X8#nJGrzFhImUe6@jmC
z&N0ovts{aw=~2msCV?jjm)qSg%O8n7^N{vE|7AsI#^P!>I`3Gco#K}ucS~ZV<&@;3
zUYJ@_o`y!OFFi#kw<<T2-IZW^I$q2Wk0zFMsp6aBe5tdMzW6A1Y<Rn64E7lF!8P}R
z1oktSO>pcp#h}UMvh3z2Q{h8#?s7Y~OW(2&O+8OY@qH32`cj50n>S~b6IilRn`)0E
zCu#eY8REdapKdF4mIR7#U+dNQ;)vo15SwlVAF??D@B8UMkO9%gj|1@)-6I(k93VAH
zE-6XXzqVqQ{aI?;zqoyoFznm<bJEB%o?x$_GOM4i{By$zCz`zrsnSpylQ0inV`e!X
zT|epn%PILw<_Uf!A^qgT6j?f^dPbPuBd7%oBVnXAO5j#@TWZ8jng_AVD5snDt<0&n
z%8jjHz@@?4n}-r1?|HFHkt1IUJP;=5R?^@U3lj&%5wXmsXV)da=jEAjM<m>o05YPy
zdMy*oZFEi?otxL^^KjsId(vww?OX|y88s!rZzni%+p~`WgjY?Wz1P>Lbk%r(=|f<3
zeO^UFh|Qid*@wow<Bjrt3!_=F2cVNWEAzpV{XdjF=gGa0tE?eDr~Bd-TXXiji-gH^
zsNjjoG)9qK)R)=`I$d3S=`E>p(Uh*v{A^ijJYOrZqb)c2VVH3E`Wg3J$MVx(+TBti
zZ8@DW_I|6@Q<q1?GRYT#Rr05TT?r$R@gY8eU<9ix9@VRa8cy~!-ZG+(8q+_B-0lt5
zuGWKp{~(WmFsfSHm?;}{4LvUgzRAHescQWA-be?DT{~#{Kb0Qj$S=Ev=v9r@FeSgy
z9OtVn5G~gZ$Do#TAnsu86v17}ta?rm<hRk`CJWqJxlicAPgs|+aBRoPF-@t7Zt7Th
zhr<)V9Gu|omYn-BKwriq3MO{njrW<34EB164@A1f4g+ko^!c`Ut!8ik{CEFsVqoFY
z#Zh4Bfmh(X0T0m*czTBk6%)*Ka`Iz}^sINPLgz^Fj}@Y)N1OpQWtF#ZB}9{4?b{!N
zX5IIos4?u~9^ashQK))fevO&r>I`GoUYaTWI%eMbqeo*^%4&)zJwywL_2L82GwLvI
zYsn%{SNK2xcE=H}@gqP?kSO8La^Ub1G9%}LCykgqMsIPT8(18|8x{sXlqa_K_~s%$
z-==@jkCR?oX<}~8SSB#j`UmG$;XYcP?(S$F`weji)Wq^}-laZB>eM6!aEM@!lQE^R
zeoGE0nrI8=PcH996v0sIjLhWl`f&c-Vy9_{Q@8mY0~Ucdywa}P1tdDSb{00E2m{qy
z1Z>#bfqKAE${Auh=?|8bXVR~@F`VW3o^ZAW;q8!#pA%zEtdSSOj)obfn$?aIU~xF)
z;7FTl!O?AR^yp=x2BBISZ;$@Xf<F>L+v8BLBGm8GrzOAcj}$mqtKVNd^7^6@!f-+B
zdw}>sW%jpo6P}av0~+1t8B4uOuNj_Kg1Xrr=g%#s;@GKl;V)j2l}F%#BH2UCl0i`G
zi4cMjtAE)HageLAa@EtYW}XB3srm%iR#3-gfcXr&)?YggimNPauBs?Yy)-7K4UX!v
zzHA#oPkHNdpDUd*23jHZ`PWcu=L$KwQmNWv`3PFsGkc;>LbB!Z2}Vu<t*ND~Tqh1&
zhbC4%b3*mGB9?S4Y~Y&suW{P7HjRC}{?fj-$y$o3w)_>5<JJxgyBDdSpzm@59aipQ
z1Bp)w3Ojc}J>Lcvj~wh{mq6$0rd-yN9FE|#%$66=eNEF1-idD-&cQD?<GD_xQm2^M
z^(HUOOsqq2u#9{M*9QC;q@4tb3G|zLIkBl>iw^Hh73u8X2!G?rJ<R@7FYy~pi?EpS
zNnq3s_-II3O>Qum;=i@}U`85{jWFH%3XQ5Y<fsb*PmKXK#&|mZvEY`$%dubFf88|+
zq^r}_<yNiHpw!C~67*C(+y3>DRL5sGxa^79(jglY(DJL*i(BSH_y}is70CWM>`vh*
zq2l}T^bGJY#<Ik5Kl@7E<3Z;Q&rlI^fr1p~L_E;0I{IMlMje9D=0pk?YFum6r2(*S
z(lBH+_F!1;vGa_&S$fSHivYf1V!$rMwp6ykP#-iJCWbK$95Rrgw$Vp!`ilOVkH_#f
zF01PN(4q0s!)j)VzPD-;A;=l?Hsm~F=mx0|%^X&DXKWiA%!_I>WTB)&=XFqPY+zds
zmZ)em)Zt-q%wJi>D;_bB1A4DB^<f8NIq5WfmbO}ojPIJ~eEy|$io|8u>p_A6ywks!
zA+6XquyWzY$*l?TC?_{YE`y&_MI21h_YA>1gd6yy;hVAr_xJprCAe%`xCJuFx}05~
zp{~*gNr1!jK=Uo_#tgB9?cBqmAwc~@C$(6Rvn2G$#63G{ZMa^)ZZURAH6%Gny<puI
z)@{6;Euo=2&Rp<`Vr3L&sPFWHo$L&0H<-M#B=6Tf&mo;2WxV#1u-_5Hsy7}4A~C=r
zPj`QqFr|tERAp{=#g*~*=Ti+`o@7+JJZT7-DabE4ZwW<fph%95DG^!lD?4aii#ZOS
z=;H&hR>PZ|<LX~x4GfA8m_VWLdc?6S!*f_W%@&aLYOENRc%38VTXQWwK!c>U`ZhLR
zY%xV`&LvoH9Ov$Stm)*k`woX3n<s{vF$U5XJa^x^QSL^Pi=;$9utma56`C@%X;kN9
z7u=t;Sz<wpi|5Lm><AC8%Hz?pEme!ljTE;M=c`zdo5Gn>mj2)v7+TSWOkT>z$g_JB
z{vUO+XdwWDWhO$1{QC%zFi1kku%L3Mm(~cdVQIA~FP;OR8ZW>RKy!UcH;0D>;`al%
z1t^sHhpd(+>kjePZ_`J@cV7#*HQytsj&QEP?IabC9Hu9zW-L4*=ywFR>oC8xWUj1;
zuZfoYT2~G1lUM566#d;v8y-JJfA~dr$j11B*3obrpVP5}W~hz=Dn1<-yM<%}HwW6r
za5czo`m8q{Hhl|CnkMBnM~q{qfcc__GM|JH=DHuZF$u)=U_Q9&p1$YVUC4DtvVMGE
zE3|*m9cXU<(b%f?`Da+gSLOV8AkFs?S<h?RC~qz8spEU9@MVTB4Fk}hl;+itlM48+
zA~xW?18HZ@13Wb2jEb-%b&H$*Y3DzjaVaRYzPWY|%BKX+EWz5eaTVx5ettN3%Th0s
z(#ak3_i(X$w3OZUjA=C}ojD!jv&q5mcvs|K)yPNNt}xGr77Yfs(i-^eDDdr8fMjyI
z%3FRsy;=;^7cS13gYvTxA|tG^$vKxz0Ck;S_8oMEg>B6P^QL_^jhTr-f@M}ON;erW
zT6Ox}0f7g()4RGqJz#Ug_j4h(E++3{-g<6-m!FtBrCdT8co#$^cUqr{Rg!o8Ql4#5
z482xbS7S$LuVPPk{ql#Uqz<w0bL}hVJh7D}R;DrMc3`B_iA^S*J^hx>S0KiY2*skk
zw~w^G42mCntGa$*+Pzs+El&Ct;ZY+x(A)0yi%#=L5;9+1<72&73OF7ps)$KcMO<ur
zdfoWs_pP<}kedbE)?8a^`;uKWx3bH0{9)1JArjILqvN;=&-6oNSC<}|#aHrmooXwL
z1sui>p&mc1>EZrW1o)#A06!HfD4cAwlurc~@*V=WD)nw8`o|)-$GNC6&I+MqCbJsa
z^y8(~3N1@&6;4)~8F&@f`qvL5hB$VN6%0R<3WzXVH&$*gnQ_eK{2?YO;npRP2of-)
z^7owHu3vsA;5<+jRj7g3O$OWbX5l1L>B_Gr8F!_0Rvmq;S_h)P2SchRQ!k6F%ub8n
zM|$qpn&NLmjOjk;h&H<iWZv|IazGIEmI|DzbL=u!IlW^G0A{|8!d&+;)>-7tdA_<d
zFZbBORtgKRe*!2gJ%9r|0?s&{zFRa6iR!Tp7%_Y645Gc65Zt0fvI$;nW~90+$E{~e
zAU_6v6}9UGXaY@7fR2@(ZM1lMSv0Imr9Q#MZ??EEhYtdJXsQhsPPGWEF{396h5keh
zaPLhc(*1sV@qumesi}mw)LG}D3U*-)x^m^rs#XJYr=~1_KjkmbAp9$Q>_iIy8pKjQ
zn*L2=?e9cxZ+Lwkj<$)(Q})_sVe5OF5hf9w1-v@Xqs*5>bW>)!f$4bQi=dwZLOV{@
zdjm6db&Yw$`4FTlJh^7T>D5qi0&0jLE+4Xow}A$Pp156N0F89LzBv_S1MvGr{4aws
z`UeM7TV3d*)}5j&C3&ctzS20QH#3o7crR$3N{H9i9ilq7nxrIjaQhNcJ63}1TCKbK
z3@V-nE~|qLQW)VM*|f^0(rjlm7!GUk@|yPWTM!vjIyH7?w#yF+FPW*_Bxe}Jn|gX?
zeoL~${FyGbHK?F5Bgf3_=+oLVGO?B{hoM}i&yy<4!R$Bv(96ddZ&D4QJ~Q?abi1yS
zYuunVth6ufviN-`7g~iUe*&Lwq#ge^wAy%5Uw3sFnEw#;JL`;;YY16`MCzI;ct=u!
zU98iJ$EWN-k-O^nym@`1O=&(Tpg5TQnTq2kBg%wjsw>{i<Amy#KWOR$L{hg@{fA_f
zPbT|)*VEdZKO?){H#h5VHov<{&HZDi;lLVAGw|Azh<8a2<EvkA$c@hM9b<;hCL1o(
zYE($hWy57I)4x-xFYEt2f0K)TvG=D!IA4^L@`SkPsy3KMKiU>Ceqqj=bahc54NTJf
zJQDxIzovgMLacO%1ET~Z8Jc{b+i+qHrLby{?(t=aArcA%U}SQ=`w(=QQ|Eq6T*XV8
z;x`@Jwk5MJzp5u)-2GUvH-9J-yp~wlmfFsbr`q{jQ)+p#k!@=c)J+ZOod^H&gtHbx
ztg{^Hx`n3`ldU0EFKE<-uK>vca?VTxE2r84($@FIJ&LDN?w^R<I6>_WKVFL5Ho3L*
z{_{)aBtNK2F9eZQZ|FAj$>n)Dk#xfi)&;_r_r+<TbM?jbTJ!bQGkqu97n}P4aMywn
z4`Ix7qy?NHP&Gg4sUsB|xqUbzbujda_G4u+RrQjR>@U>xD(zPDTZJ+}Vq8{q)$Qar
zu*XBm%%Vc+8=h#Tn(sx5@aAYZxK#jJf|O3`Eb|{ciI>_HID^b$s)PkW4G0l=`#Rm`
zGg>{BCY#IlI*yqh9dmR`J3c#M;dzu^asd1;({Kq0y<HRLb{)+syZ$V6{#ou66v&A1
zYTj%ATjcg47m0lVZN{=+&9*Ly?#_6W<+X4RXijMZ)R)P5N+Ji4@%5T0Zz!BzPSk5j
zQnWNV%_Jh$cC4vuO=&hg;6#qE`&al|9XpuZ+zR^P?^0I<XiSC<#iKzv?C%iNamlUX
z%4vS&={C@OU`H62N)G76@T%G~19C2^V4}NfHGlo&?j|YQa~M4SICrT0{@>KB%(=~f
zVz(-wRFJUa8fpxZ8p6jJrSgNAd)r*%LGKNgDw3+MT$Rb3#LZ8(G5Jmi#=8Uw*tOb@
znS3$fPT&M=Dt46n>rd}g^8!|+S3r)WVZucej8mrb1+lR)_4jydD+zut1w|6PT3hY|
zjf-tS!S>qWub9Jy#un&8*}TdOIak;BE>T#w-Wx~I+8B95iLF`8Q=1HD%F>B}GunDh
zS^1icl(dwomxl9|)I0XHZ?uz5exCRTgK14r_krW?1hT6c=ALzQov#8n7H0Bj*6E>Y
zy?b-)&PXx&p45qhG|}^BjPpqj5^~Z6$o(_-+8Q^bRau`s6qaMYJ7mbcqLEa{uZBp=
zq@7>ZpLH6T_$n*|DQ#4C98EnAHPhCX#-+Z~#|cY3|Fn0k*T5n%F~_sYiF3YAQtglL
z`_F%iaXW{<Zw0#Gd=1>apa_`}Ai_P|so+O)5Q`KKxYVFHACTw68lK{bT`kfVl6rj#
z7eewiFXfqj_FgSV{fYGBM~*WFWr2*H`p|07LS)>x1T*m6hL9z+N+6=vGZmI^@8bLo
zn^7XItDy6^`4;L7FhcLq1l9Vj`H;6MT<3tf;J4?AR~d^I3KWIU&%0m#x+t#F8fRbo
zcQiON{A9NW(p6Vk$oK0OQO=$j;8xDL`F{cew`o<b+ok?Ha^*kwnD%@ud=RH~-lpdo
z$ZhK5uUsop4^V}-rA|coaBCMd#}<hBIR%V+7+b8_qo(&Sm5mtwlTP`z1T!PNUf-_-
z@S#fZ^7e{xVg!Zjt6{kKJ-)aoKoO`zq^1-Wd+R&QH%s>WYCexv(Zt>Z;PsKSzND$}
zIA6y=MvVO}EV9=Gtw#L>%{Fa)T8MZkeULiWM&XicG?A8*xx0tBQ!~afR+B+8YVA&0
zalT{sOwkh`7KNU~e)xBH{)dmMe<vxkA*kY+F1@oE-@M=U%CYD-2!T%V^nErD&g)MR
z*IT<jS7SCf68oxzs<_kJW`U%M3pSW4*uVPs_so+_p(A2YL&<Fu0zyS@jE<0BwPW4#
zsh;b@Nvkd*i0VEl3TDMnk2iQ<MSJ-g*=h$s#?>9WRsZG<`3LLG3jlH@Myg>tPm^o@
zk%LsO(H#76;BwN!*H?h~&0VZ7=T!7JAfngvKb(i~PPj>pm0r`(h0heMluF4f<5|{j
zapJ0dtKF8Sy*)iqZYcMzU#Xc&Mtw6}{8<Z5;`Dn%Z{{sp?1b;m=<`S64&j|S(6(F<
zwq)Ro_tc^exDF@-JvidtdD1;1R>yyAN(S+APluXK=yjnmC42il#@n(`4k>0vj-v$>
zh1S?M)VGWAy=+<ea9#XtVwwn;UIn2x=_X^@>GI(xqu5<)HoGgDd^Pc%MC_{}X;;|_
zgwEXC<M!6#Drp^O{^m>nLLoq^Efrq>Cnl2~lat;z`8y^P{pv?j7&)#}wNcfGOZtg?
zddg0k^CP|0cgLlBA;I)X{`b@N2TCOVq8O(l{|Z}05-Q7Z7{et&P=s+&zvQ12es6u-
zGRMSk-T$+fEFe80CZd&2WfjR~<KL29XoTtfg4{m2s;Uz+n8Nu7ZPjj%Vr(@VEA$5J
zjAqIUIS<4@ft_!Z({(3Esr;nl2TfL|iglFOvZ=};eb1iR86lXVv3_fh#&++<tyO=w
zCo~J6o?l53#X{Gtp2=t4ezDEjQC31E$}syQbZq5ZO&nIgG4;Hsf<u;C#HN@$TSW<5
zf8e!ufF8wh-&BdeGOP5w8V(AVzI}vL3g|<oTIc0JjwoWux!zP@K=xep;-~IDkD>Jz
zhX34I#eXMS|8NIS|Be_>aSczuSEkrV=`b5Q6^~u6Y;A=BQQ=LFldrw%3u1Gfk2+j2
zeAh-)V21#0yBBBww%MAhRzFjQSEtz`@B}q?-u+)05~=5>aPv@USFq?yXCQTM1GEhp
zw|ro~#R_f_Y3}TGu?~-ob40xFGa&SBcJ0eAtY}vN)2gOp%_9mWR$1NXp*zk+MfTb-
z=4mBZTZf!CT1OwOEx8<p=+2~Y(ejv8_?3CoqD};@FI^{DaBR+I=<|u%lt(O)F?}>8
z=IPSrgL;7}YBsg24HZ*LpwTTlQc3z-6#ZC-@aCBK#c!}HjIkr`(30GAlX0hXU0>=~
zDQyWT=A8ATm~>*rI0pI#S7GLinzd@2e9;~E8|2i<FU$X4sr(}}TJG8W7fyQ}Z4>(b
z51h7%oNfN3rFCj6kDO_6_YQL}0Lf;L_#Y=~9}43wmS^(Sg^`I(CV$=XEaks~tHP<N
zNsp$3fBj&CXv!AZIF{L~rILYubn;KMP1We@S8l+yzf_7MHw03BvAWQ{+59|;-P@I)
z8wnfv#w6^DFKgepmIP?!*D|ZqzgYpjGu(756+>Udz#W|FfG}AlrX)u;!OnWQ>76Qi
z+7z{FdX(2v?A$`KT*lY;(Fh?AwTC+eo<ot|O%Cl3UIrbNgp=U{=&B;+AkCZUi^YYi
za-v4WPM7%<Us#E$(3NAVw8>b9I1p%|?M4J$sjJ_zace&GZO6&>*vaTlo7raRH-^Y5
zi=>JQg;SMT{~xAo1)2kYJYYV4zk#5)3^~nxZ~Z1cmeE?9(`Bg$1iBM`>9(!<0GUNi
z^%{-;?RRrBC34nWTkHNje)on{v}QX-|2US&G2d4Of1?-xzdqeKmdr%jgyF%A(BkYJ
zm?JPZm)@H_9~HlBtx+;JFRW}A5OVwM*6;BZtV<Hni>jFEl1(r+kNxRTkP>-vWj(5+
z&Q;mH)2&4gDmOZCl3a=>`68C7sun~{yQh-7jGJ{tqi7iQ%z%RQ`2x+{xcRWnns0SA
zyG45_C+E5hu<YW($(UzjUj_Ph&RUgbWpd}9X6VW}n&8PFp%|blb9r8lot$_cb1h^^
z=Rq6EoPHbOE(6iEH(xe`ZQN+Tx&1c((NAV<_{qy9<W}ZG61ccS!I%1TAmI)BC?51C
z&@89K5Qte1XANsoJb}a5sz1`Ce0wuz%ndxRe17F;3SgJtm1OmGr|*$6n>k4PBta1l
zp0?j&=U<2okXCIE+lc!|h%{fcWeIoucwJE$?86O_wy@1Jx%rC~MX8h^cRc#%yCOHw
zLESpEwm%wIV#9d0l}Zq|=aQ1EVy<F}c33-H>)HB&lV@h5CIOXmYt27Qj5{d;V(*jy
zX%*4t-y9j_ww43LEVausi=rZE;2SgeTK>Li-KHqdohBY<9AlKMHBT9-X8VUU>7isR
zpelkjb@@_^oSw|ermmr2a+X<)>5j7qA~1Qq_WRn-<ZxjU5z&+P5uyKrm!b?BrA*U!
z716u-!=}bQ3OC8=c)W*6$oE~^d$0aSv%aWb2RN%OXVY$}YP}L#DhI#%;?$*|NNj#L
z^w|C0OOf$%+=bx;y??H(q0k!AzQU=c?}3Hww(e)8`d1H216zq#C}k6~y8pcGOqOXD
zz@{sH!3JF#WB{6uYlo#v@&UR$M~^%j6x4Lrl~$K8Yti}BueA`<7w6B5nT~ZDGyoZL
zT@`)FcwHqul4E2qs{Q*7VgiuP7BKN7ImTRurCJ06s_4x}>pZZJaf#wINq22PA4}>f
zaG8wP)TZ5W?sg-OYh`?wH>;@YZ5lu5tvWLh4<GG}x!55mc8XfA`ANwJe@U@JJ95i6
zducAzGkBFoQK*q%AWFXttuzvlB~%4PD5IyeNUJY`wL(JPD}7hyJF!hfo+0$)%)Wom
zZ8nfl@gV?>+DB<@pV}`Lwo~l|hPSguRqb;+z(<dtzb`L(O$Ec-VwUmbZ`7o!bpSYL
z$%zs{?kM(Ux5(Tb<-|i0#tWejCNBLj+xO4=BsU|D{C*+}iTZ<e>cD-jLVLa`&dyC;
zd+1u8pIq_NlTtX=Cxz%M*J!j8FmWT@h=lE!?X^m<yHyC*BfZ7-?G|;2C3`?qGIg6P
z(FVB|GsfelBx$|An1USrh^pLAID&Xr#7QdiZHgKm82RT|oGp0eWS{hG#57G???T~j
z8U034N5#si8Sgh0@4%ZD^M10ooQv1c|7E(hb%iJ#;?t!z^*vr<jEuWtt%z_^)CNNx
z<&#S^k3)ab$Rm;Ik14E}LD4$={d9E|w1%)`I}l3$D<cv&j5xbt#C;n^td><PO9YHK
z_2B*y(MuafY)-%bk8!j#HjGFom6XcL%lFeVAJ_Lt+$pm8rQo&c!-0PbW!S{uePSOi
z)nh1KP^8zf=i{3@70F?qeuay<sJqrPHTgI^!B=AIp4-;^tAn~XG1fY9$~1gq9P5(e
z<#ZZr*b~+FY$7AYNKfA|_~T(>CQS#t-jtW;&1-Uw=_DfXNxsacAo_geM{Dmv8nI&~
zEJ$DXMb94mCa;{P_kk}P3Rj*iY?e_g+8r6tiVdtUvcIrdb4IGxpp!;JS?=EDHY>Wg
z^_8%L*vNS~g4=@27JM$?P=er{#JX17#w1;)6AIYu8nxJ&0AK^Wx>QG}(WkT@LzU3T
z<Xb2H?N9wP7qUFHnM2cTl9Kek`LzDRu5ZNk3zVdDL$~atqfw%t!_Mt{L0sP#1|k2Q
zI!R7R%8VmrBPA<5hbY%QOQL^^#a=iW;8iamd;%B;)iM%}ovL#x_!sLdhMlGmu1P~Z
zdy@r4)Dw~R_T<<PR`G2gt{cT&2e*;@XJ^XG^%Sh#(d-A;+6?@fyxbLd=&mB(g0_Ti
zKNYjmv_EO_NAX@-V~MVM`RJF|xe{(`FOwCh&aqSlWqedn@S=8v+wwR;xGSD(Be*Vt
zty`rxWbtLZuH(oVqC4e+Ja<4fn|zn5*wvF~O7=cqJ*T^^+V4zrhBpi&wphb{lbWo(
zFtw<CM|Ra?bH$1GZjloDTS4sU5?$bxj90^kdMBP_aK{Uwi7uY@O$GF4&}$jl{*ykx
z@oNuUK5_W%zn2gGV8o89gz;9S9Yv!~=AXH@f7`fQ$bQe3cb>mtqR-*B{Hou#^P5}9
z%X)R#KceMFBI8J4tY_{&mIE&J7T~ua-3>w)-ur|X9fr}GV&7fQtafoNpo4a3Idm75
zc;u|hS<C76weEyg+DVV-<od~bD<Z&$?Cty7Ai+;`o9sf|8q(!++{_e!rlE{32eV_M
z4K<6!**{nD4R;WId&l}vaU~eo%5;r-r+c%Ejj{Y0S1)u8{sH#FZ0>IN1;NkSCAw0>
z*nEl*{2^3{`t8bEkfKqr3+2$GisSB{#_X;)_8`Nvh{-uK&fRz{ZK^~Yj4e?pt*b4|
z@c^>@Ej6nZV=Sk!|8V$_;lBqI<k;NAZ)ffWY-W>{GY0Es-vCHE*dGql*|5<;Lo3n0
zQWuf1r)n>lPND?EH~)&Ssc`_gXX3X}m3n3;>~UxhMgw-)rT3zFDeOk@7mO&U#;rF#
zr_>L-1ChCg(J;i1k7Nln$SCs^N^=X>+uh{x7Ya)${c><3)?}u>FvKi!cu0|0;%3k6
zF}%Zn2njxGH&$wmN%ZY|py3gq7Z&vu|Lb+=;TO`9&^}o3V_Ygh8ch6AtWh^fJ$6LQ
z2mp`L%DB7slj=%ttas|l4U`o5WEu13uNmAutT9t#A!|TyDLSD%TCF_$Y$Te%C3VKQ
zq58UX@`x5jqx)72Hza|GL0@7fK~3P_iIU%Y0{-=U{O_M@{SZ1C>eYM03`nQVU7#PV
z7+1ygbO(Cf%)wVX<YL!cgC6zXQtP$V$s1`g--B*^5C=LFAMa-irhjumjo$OT#;|6<
zZ1we~77l=YXL?^GC}XRDyExn1RRb9<iO^gl$0^`78dvYmu*hT4$_T*9{Q=7t6#Z><
znsAg*RU5>y&G&O`R2*%Ni8!<yKEBF)7jt7sK_DO-e?q(@Dn28H^hQ}8n&glgUsd6|
zqpwR1uTrF`0Hc@WH>Z#gSh9??y&T-#MzirwWX1#3GL?8IWck}n_YZ+5ZSwxJ3!kl#
z>;EaM`^R7X3*`N;UVN$cyZdq@Ql0_n?rT4|%bwOAbZM>@`Ry#gl1csSQ6oby$LcmS
zS7g%ln)X$Azv;2eyOwHazZ_HZSWMeCNB@ChI55*O`-=4<IVB}iX6>Dt$*7^piKbw*
z>N0*7{}HyL?nkGkSPDj;7WP9c47`wT7?3}BmQjp9H*G32NtPj0RZO{A6IKjO&Ybl`
z!BS`z5rtZ27_m#ET6zA;PNX%*Xpi5(@Xrykc~?8tSU!r&&*8*Qs3!{91#J-!a>N{k
z4JK(=>s_NbcAfv%>+yf{{9cpDQLE4It*}8q4?9_>Uh2OIi*G<aA-iOp4Yf?53v3E{
z;!6YQ;={ex=5DbXP#Rg$IyF`Ta07UBjkG&ZPcufRX3F>~;G1#?8F&S4r7?1c0%>P5
zO=qhcUMt?aOxsx-_MwmH78jetI|ceWd8Sh9J;Hm_LhhRuQM^*RbW}QI=f~3y@pW}K
z@RAk!*Rfu$^XuO}#8z1~Dq+2QWi!KtX5&{3BNl(|CfGQUluj*daW-);Gb6~PuN|MA
zj%u!Jl@Rt7PF$=mDJg;f7kKRd=ssz63vFbb3XeM9Cj2;v(cDOu?wXrjZ94%f?^fDW
zj3)=VyMM&piBB*8IaOj>=C6prlkP#nz@T^W+Fe9LSSQqUM^j4Q;~eJ@k@a3A;`(N5
z=6w`ba+&2Ap5>1ze8(O0)gjzL1h>uC4GIUrlN>Z7{H7vy?P`5myz^L0?DlISXl=jP
zlGV8APg}w;kz&17W@B1;vdTtd+a%K)<lf;7rd?PnXu)53QZG#H@%Z!3sGug&Y<fx&
zfZ*28{fvI9VIo4K=BY<i$<#oCs0EjdT>C3ZVvYQt*FO9=F!{gtEB|lPX+0JK@<=bA
zUu0^x$8WJgF5Bk-rsxp)t~<W>in&EwWyO)6jN!{j-R5=HZ)=@ucxQKa*tak(LYz(c
zRoLYE^NUAVHzlsE7Zvk^AaSu4OjdPKCPzzsHKt2#NfoS6{W!f2Ejv`_HbhK&4_CFb
zL6&&L)KO|HmMLDVp^9Rg>a~-eve#V9uLPNpWTJhk&*7dgyq8roABzb~mYuWj&oOgV
z9^;I9hb*(I=hA9tNIGoEA|jXkj-Z4^kzR)Qy0`)AitADTR?_;bPV?V?F~&Fy@FFGx
zBhpTd!1XYPwdwix_FgmBp?}>(Lq~rqcZ$0gDdyWpey5fMF*t>ZBb|8UYX`lT7t5Y*
zgUs8t6vswOln*v_#*tPO<X59oGOJ2#oW&fDNjS;@6QWC6A@Pzq6&CU0i)(miQ*KMd
zgClmYQ`It3siU0;RnqbElXqn+in|1rUx?7w0uxp&AW8%(h6xpil@XF`mPtL5v)`W<
z#}!ji<vMl%`;0#x7b$CLYB6+@kwaV4)(6w5#H0Y>#0n2uA8c~z(5wFhZ~pt{0NxpM
zTwo?c!th~R#AiYqKr{<&&n}#<P{|DP5M{L#+Y%${l+5kvJrd}eT&aFR5hoH^UP7MG
zqzV?pvb)?&kHY1Y5i7k>W07$sh}8BWt}l92FMnOhe)OKHl4FhzN_KUbY8Hva>Ibh_
zc%o(_cWrKeDnk&fy5XpkTXHb?IV~)-=tw!nEp+kVR1R3H_f5D=l-pEni&AwnpHv-J
z82ZztBMqxUISa3(w&`tMbf0>tbmhAJt-{!nl-=<WDar`^x98n`v9W`--URWAUH{{F
z({-Tu{Vg+$9rmrdiu<t*M{*f%xv8XYK+g5io=ZI+vsbSR_=%Jg<E9IL=Bh`W>x;2s
zh6(^EKZm&0$hBfGl}gNHMX{F)eU*0Hi;d9mj)K`oV3Dq4lod5_ThLmNC(CW#uGa;k
z5NxR)7x=^LBv97*Kv9r~hP%g6#0)h*-BB0Pd_uu?5;Y}N19M_8+CA|lMvbAOvJ2U7
zdQwW`u(2m&rme=doI#T#OZ<x7WGVqHt@goO26>3<R8`)UbW-8E78uTKwX6wmVSP;X
zAp0oA?|b%tbS(bEo9jRBwgmWrgda+nV=!x%UMn>zrp|dn+CCT8lAVv*tqNAq=1}Bi
z7gA?&9^NKDdc8|_sB*=y#FnUR<O+m_KJN0k8d!LLt9?X*<8XZJnH|iFHdJ&$0W-Ya
zcWGx!?P_nXKLZ*$9IqHCxiVHNz&}8;iPHKd)6k6QvU?4x7?6aK!kby-J-6o@%61>p
zqioX5&|O|5noNCrrh#RDpH`ApBWvj;)seona7ilT=Cw*iFT;hXU;I6(&K~ZJ-Hlvy
z4j}?tj8793F^h|hO~*lnd;aG)=vdf?%gK5LcM8Y1i4c=3KAZrqQ0kn?Na$V9Cu=Se
zLRpO&WY^&G)01+##HP=9c_VJ2sB^oFG6U*{S{4CFUQ}?aGm2}4fx4J=$my}Hq}$U<
zOq@vVg(dpAAn#fw=2;Z)dswCZ?4mBtZ>B`??iIa9q1(*#!ix={pIx391chlkU!8Iy
z3A!otmFP>YM`7#m4N?w+GBN2rh=k=4uT6m|J;mO$>rqdY@?otVLH?MjV%-Yu+VAac
z7^L^~gu41F`f$_P&XS7HWxi0Ter63c5|jAue|}^x>>~X{Tb1GkMXXz-@~d+F-k!fv
zrb~*+Pp!Bv2ZFDWbFU!k`t0PRb=}{{M^nPLI+2Qc)TkKPqS;hoq`Ff1Ajx{Ht+L34
zkn6GLIDb0)_^fR-6iQ^bI*A!oOcet>#cJEYpUtc!agBothNrym=d2uj*1R=rN-nTg
zCWt75C|O;*7cP1E#j5X7x|R78njF><H7aLjM5RK(tt&qx>Q>F|dkZr%8n?`5B8xSV
zKZ+H1_j6~a+B!&Fl4{ebWoxNB$zgxZ0=SJg^ZfPM7h2E;{=W&u{~DaN8ibOLT6LrC
zurseeH(%Xwzkjq!k@FO;o5dDWNo1dyLgd@ig^l9a@_w{K0j{J|b*d{rZ?2y^B}tT(
zmk7c4`V~O07*knV80c%4BU7!O?uaG%WXp0zDCP|yySwjU!rl3Z`q^wg1@%ysW%Eql
z*)(RSW_yYBw*k@J#)ft$Tc@#Fvr*6y5VX%V^*B8Y9+O!jBdDm%q@tb?48_ucoZ@F!
zLVW6TF(@P10TNYsvQHe$Y<OE0Gcmv&KhxP$Y&uDKqYOy)VEuT#xq<IV|MSeKS_qKh
zq}lidz<|8yh6oH~pxZ4))}db9(r2FRfQhpP>7i++M;}F%kHtKL<VdCZ($Rwt=H8;H
zW)Sf$AichTQagekPP+t}Zs0pk)oiq*8yb$P;2mdutMuWH08<Zf_c?@b634=W$eoU(
z*@An_H18a;xsDX@AU7cTcIq8F>-f+)ts3Aln)?_YD4we|p42tNm0BbIw;KuiURUTr
zP956wKZS2<kgTB14dqUy`ibXZCxo|86@EC@=y#><#2HnSGxkLPf>KJ&ze$v>|63B}
z65WaM20)`+!!*ofyV-gx{)<MrI#3gBSD-&%y^x}I#&Pzlj)dMolOfozbx;~~b?7)i
zMl45})E!DGjnHgJk!d-Ir=AG8!E~2}V!+x11wk7C`3On&AC0m_;`%oqU?6q3+5b(-
z^DlMQGxy$a0|xAtS(Up^9Ck_o(x2lcR?$;$Zfaf~JaJ|Oyz;a6wi;SH*KDCtN*;eg
zC><&xJr#*59~`V?Rkv5JIsxI+z#z)03&(+XkQ||)lkhR3w?e5We%a2HZrw{a1UVjc
z2f7TYgouFFos5`{2ySw0+f$jyj969o*U{G}pK4ETo`yaC?USFF^;jpO3tfPLMTL`e
z9smV_Eze?$WedKjo76>Bw9-gum&O!bsDXY4iiFTuMdyEUjx`k#q0L2>#FlUL7Q*^T
zfKaO{?f;J$^i2Kt`(o>2t?qZJO<%XC_Y$W}fYzq*$+<`jBnI@>l=qW6kC3$UtcGkc
z(8&Sr^3-gNUTd3YFw}o??cEo<0TNmjzb}Fq-R|b7JT(nN>*T5{m0-n*fJB6P0ZZ_1
zljOg8R5AK=CqeWRwA!Js_N3;e3sZ-yg=6lO6Y!O5Kau)ixRCN$YXY8d&3=h-U(l}D
zB<z2&_vTSeAKLz?3KgtK;Amw|Kw4=}6{N^a5|AqGv4ECVL69j*)G$X7G68}F3n8}l
z$PfmR3MyfUkx7}sL@G%@FbT*UOd?@4B!n=%FX!A-z3<xfZtHt%y?cM>zwcsNe0TQv
z*`K|4qBXwytiR;x1D#~tK+dC@!^CFd_6LXE2nC^mYXJACClegCj`}q&EPhKH;{+w)
zy%i*7+c$>Jqd+YFS-4qs@~-4aST!1?V^>;&!Jg+IJIT^DLU$a(Pu(4<kWq`>sw6+y
zPl6N1CCu#H2&q*Fq^lE2kaWt>jRiW=6AxlC%Y(tIot~P)zT1@M%%e^Q7>3e{SEHep
zH4~ynJ}|TSpm_&4%+^MyEOYzKqGBG||I-EkNIkjvF6b?|jcn|L1##N#Ygs3jb5HsT
zo@4K>8X45e&ERNkXy;iN+6wuN2LMV9eeS@$8c<okcq<&=nMB<ecDf+3`~H*n4KSu2
zf#aLnzCKHV@0(^kyHhB4PKx37ec!taRY@xbiX1EkRc_=(By}6883_9xU9YUbA~P*&
zHryp4MnO55AXFG64+Hcx1D<77>xlA_XabpW;K*FDi9+jzA-BQGHZ^{OKUBre=2oBI
zp|-@_v17cqTDE7B^c-Q^UyZ1Ui<%+YC+@46Z41^sIDOhSlXm61Z?IK^25V`{RyWYN
z_`hy}?!W@2w$#pIZ+RdpTo5bG4QQl2u!V1CRc7MUvSJsw<-VMuD>nbNW%G6@{ck**
zeiL}|GaRrA&${&I{r+A9-sk%cd--|putw+y&z?GM$<miTENbUEgoD&>7JIyi&o2c7
zs6Z|NS+F{R#7UZo3YS?Y7!mn1EIyTTJuZXfn>y|7J1zbw6xCCkncPfc5i=V#_N!)>
z*IABN1tBo>!87<)@wwqAUrf0O#_i&aRk{1P$Q`X&F@l@OZ#1QS*Zi1Udv2@%je^WN
zFz(a#VZ%a)Oj}oI{8bk+K-BVRWM>Ouoe}03DSEDG_XbbvqhtUqeDPmsTK|pL|Gy_I
z0Q&fk-tyFZ?z0*ouvkCtK6s%l$23Em_rQyz?{J~!JomCMIn0oo5wzb9y}&<rGPQAo
zp2SC;oYgk6JU_u?uMEZeT;R?3WYS16@-zDzmR&0Yj}pSftN`AvorNpvk{@_3@CQ{_
z`#&_ev{UY{K|8&8t4{s(v+cX#`Zb5XBa&cZZ?hY=9L3@1FWjcv9fB(yb~|+V@gEXn
zgMw#<r&yJZ%g=~0;STdGas|6RJEnqY2^^)G^aco&9jE*UdVq6yL*B~w_n!whaDo5-
z^OO#+&0M#SVx5g3h#1D2!9e-IOW7Yaly12YQ#rAC<y7kQaK@vOE*{Vo7tyueyB0pa
zx9Z}nXCcq;{T-k~R2&2uA3I4phH#&LAQLR~eGj0EgMRuOBU1E`A!`RlMOKinL3pK+
zY=DcWrxrMgyU6U^=qXmhQN5iI>_xsFc_o8IhD$oWtjur3wj6Q9Kb*gMH2^;}Q7ITt
zzPX6$x-x9JO6?$V{`w@vik6|K`epvHKH9wU)@kN2Wz4<UHuFHYHn3u-w<42R;m8~|
z05}{Dmf8#aN1zp-;vYw7_38IM0=O{4))$4BNMOrm34hNdD*}dDd>r@vc@%S_gAR1$
zEDrB{Z^>wXd;lP?|8l?D{dUyNO+`m?FP}qI^&Af+_c@68<H=PXVb%_l_vee<W*ano
zTh*XYmNG16;VT}<2sP2eU7>0dS2jRcbxa5Jl_$`bB%NHgFS*pL&})y8uydX!MO~_h
z@X`1G#sQb&>vG>jHPY{9V$Y96`?g$)PR-#(#@yv<9$S|`R;=rZ-=S-;l5w7}&}Oq6
zHSnt4J@B7Ip`ePm{R6j<Qw=qrBp5wisfId85gdIO@#om@fJj^aPCnruLeyHm+R3j*
zokVxLpn%a1VBF~EkktoQq+JpWib3u7@@#B8C@DMr`MnblirFu+C+7}72?Ap#>96LC
zW`D5vHr-0p=n8lt2oSZg2O_5CTyzm`R(l(3#8(fydiN4nrik9ktRT(}8cj?}D(8{c
zyMtSRES;$wPixO(?U8vK3m=HKc%x6l7yN&55Cr+U9^4&UQPewZDH#YRs%QHh;&Key
z4Y8O}O0mWZ=&f2>>W*)j2MeR}3^+PP_55^;FJhG405U%foJ2Jr-ER5b@um2i(L@!^
zb3pf+Rx~yL@LA1`BPIt)15xR>B$n3Ce~=hDSM7aNGrfDoE149Se69?fZ`o<}+}jA4
z5=ir!B`c=N<gHs9Yk=g{giR`jqB2g`x<!DaV^$|ugsrKxnzMEdTIb9=SW!U_l);k<
z@TYUPe589C4@{E;;QU?+=mmzIZ3i|CG-@rd-mdJN^%wgTn+Oq9l7sw*?2)>KiXRhv
z&M!;?6A1`z2K2dqH8XYoJE`^Igua?EglKy3>$>;%qc%y_s1t=i-FEu?i@z0X<*Izp
z=k6r{npBN4euhuk;nTd~hbWv6V#YfGQ7_!Nql;|Rq@Y=#^(g+Q^=jJkN_PBh(UV+v
z1k5<d&Gz!DFpAQ`yfy`60{wU+Rwo|<ch=HLORVA%=SG*U(UZE5KC^w2ircI;vIjSq
z(xD5j@lT9BbZB-hEo=qo4LNU(#e3}+x|PDCt`;{hJ#ZoG5_Qw$6~$!;0DCnxR|8d5
zE|z#6Uko>1wuECk8hd%mVLE1Ot;DzqyI&qShV|cnx#IgfjGI4{rXIQ0^6d6e%J*d_
z3cjtW`F;A#DHLOYaepQcY(%KebO;mZgA77xt{32<i93?cp5o%?SVSl({*otEyS<T?
zS(m`oqgyZzcHqa;#Sw&yG5gRrA*VF#{s9hEM!NWCIAAtk+i9>V`g)yK%nZ{$>Kx-2
zBx$R$bU^2OkU8RZrYO68%S7e&HJUAKIVK`=h`7|~Gcl_i6Eu0FGc##RuY6AGqFh%n
zQ?M$Z;{y+013cvTEr(3B-_w8Up5Jox#=i3>D*Yet)UwH{IU7vxyXXaRFSn6Bv)R6$
ze($7b1yC;mpY;a{YLJ^zjb)V=(j9ZWdW|25T07;rFU9)8BT^87yGw9inC*X8dJPm5
z!1uPQ$Q;%c=H6QaJAP>}o;`vJ&eSF6xu&<KY91K#4yZCHsbunvt33h-H7wF%MsJld
zfvc8ln>q?lh;()V_~IFm-T__!WTo>k`KB2hmVsLTA}nU=?=c-K8Nl8FM$?mw?<-M6
zNbH9gfmN)9LjQUUz~up$f_4^aS|470PvdEMvH`Eg;5Pv)-}J3}f0ci6GgF_&peWCW
z-JLC2(}(b&y2ri?TeXehebpGwvLjFpK#t>|$Lx!#5F|G*`Iz0n2G8&Z#dAd^ehH|~
z9DyeeqtEliG1T#m$WR|ZXLxIw=?_2RH4;|+Aa^c#so1**h4whjhx-2#iGrFmY-+D(
zf1pjSw*~QK+rJ(?JOq#mZt_k>Qny{TmS2fe=}fLljoe8RSSucELG)tjuUIYt%U@g~
zIZ^8^fVDkUt{KFFl?9<KjCLX`wvW&MM+^9;ANIbtUp4(IaC{p;PANaVK~6cY<Gy<E
z(6rs5)q{cxe_vEP?J*-aLfDt*TRY9SQ~DI2ULHdbF4V9BB>g(H44_l%4aqFGzxz@1
z?SpvlUUI|40XXWQNO9mupCFxV=~oPV(rJVVk^Y>USXLdOvvrl3n5=v*_e<;U#v*jF
zCKcB?EFM(nhw@_&Ebe{XUA^<K@(dI<ENz6v8EnW%awC&zzgAt^S#{gwv?H$0QrziD
zE(gA{__HdHR%Eg;VHROj_6>G<kAIk_A-dvIf#b-<-WyWIp^SH6?0+o&-r4!7r*qu5
z{Q~RTVfp;euPAqY>E#<X8<e>1dMqi%K*r-gyF&}f)NPkNR4=rwevu~OFS{%$?}rn{
zO{pewrSHy}LEY1i<ADf*JVVnl`nk10oI%`CUSqo(CPbdL44)S1E)Se2Y{G6~oycgt
zf*H%`;WbiZdyv1T?^sK;+AC+MHrPI=1QNo!+6{BQ4yZ&BEm#Iu*e6n_NoH^dX_*`G
z-0a}$xc~|6k`dHKSZaF%!Oa4+V<Y79tJ9CZYo_6k$w2%UyV1nk8{;>&KO6b`4%~Ql
z=Xy!Vi(88D2ou-`y+hV93)~Q2L3x<Z<nt7C_omj}8{CrALhL<J^$x@@+%Z?HW(nh#
z=AiP@MfJ6zD5FR6^2*Yf0)-oP-1N16;Si>rO1D8pwbQqKsbRw|QT0e_NYtf=3wEvy
zIW;NjPox4%Ic+cboaes++B^!ybEN}(-n(4~x}+s%4AymI|5Z~yQQ885jGOQsc$KF=
zUDx8R26}1)H~|1th@X_6SzzDTG@z|>m-i0{6#&T^44pT*y^G}e2SQF@-?pF4j3fVd
z@k;Cxt1Q*DPJx%q-r}dejSc=cp9532{Re{r*fCY{*|hN4r`e@GNOx$Rbw98dbN{_k
zw+FT6`Qyu&Z-%P>522I*keS`>&<(==z3Jn1<YSJk>*`vl`_N6!<f?F}jm^O;7}SMw
z+S$<4j}R#OybJLhCp%{G@(#3=LX45_EY57tjsyDF0RI%>x16KmI3A5>1hRC6mYFuf
zeI@06N(_q@^#F3mOyQ@llX}rYbJOrabbKqnSh|HK{cMZ%r&B#V+h29t<Xi9QWG)Rs
z>K|CzqWD0`=O92|OI)S-GY>Rj#<R;bfF^X)Xcv(r7wZ;#1*AfaXnf!T=*^j%U-;YF
z*u>6c8fAa^2Mpz%Die5d+tfgHnLPj%nf=|!KVX3S>`rw_CQ#&IF5HH03M5s_`21rD
z<zPotSq}p6aSrkfT5G|U1k9HZ#I4Ghft$=!-89Sc58NV-+y0wQ@^3oHzv(3Zrjz`e
zPV%1;-hb0c-q6e67EH#!=_J2b0RS@)|2ya;|HCOHo$H9%!9&)~?6%dj&koWT3x2tK
zs-f!ommQOTZ}f5+iaYKyc{{t;9h#_f`G>DQh}h+#b@*=D?tR}K$WcwdapL%Q`~0!T
z8@_cZ$}#-qTo}q~`C3QL3QtN|#rZ5bFs738XA9%~y|LvoFb~so`cwMI-#N)>V{Td&
zdisNYtYvGlK!*sW>$H=dY=-F!o8^pY{XEoo*JFKgN1P4kC~QjOB3J+EVdghb*mpQ@
z--La<L*b9B2_5mfL%CmMVI^MMT{tbEd?YeqL^lfrB3BI7wf=Zr{Y&F5+G)<Jd$f}N
z=;Mo{ql(RK#ex(LDeB->Qn&niuW1+n;5OZDAxzTz7Ng3TYL6@@4iWi|?A#R%42>p1
z&e~wZ7(NiF^{xd4UqHgM!|>>FVm=f<!G%1HnRRe@Z7d9)Zgiqp&(D9uHM6ze1$=uL
zY9;6k9`iEOP4WlGD(9LKi8b?J$F|lhUumuaC!zSd{;|UmT-$K@SrP<M5mCGzO5t2F
zN|@$TSs8(@Rb!rbWM~29(S2rxCY&p#c|CPvD-cNIu8t{ERDFcA?yjHy=)3<WvOvkU
zZ$=X52JNP*EyX0E%Vv6GAEKW6D(A?#4!3O4T6l~c%c0{(7J}&^#?sJ2n|P6b_~cLN
zIYIb~=t2eGoFI&{*}d#X@#8XWmc0raZ?WjvYH+UnXRqx6oY|><5r$hBW4dtW&`<Oa
ziHnE87uc`H8u_6VQ03{kDQy#)+?B2g!=<6|D}1bZNGc6cpJtz}jaa!ING5rwSliFo
z`}_7PT^j+}G|x}WQ73cC?Qf)yB4HAAf@(r^gEX$uO1PM*rq0Q*zxt>2;2*N6dai2j
zS64OAU$0QuO+2@hlR>DRP+#TkSCk{?R!W<5n=Ystph8mYaPvVd=k9uWR8myOz>CJ5
zEbnQm$Xl*(<a;Ii*{ot=oD2(?Jeh90p2xHng|McKg#04^sjjs8xuEI%ax!R%Z_2H&
zcYNuo84C^uhiIlo9y2dur_)52yEI*PJP&T?Id%E#KT`G+ozkpOQ(UCQSGW|`sYa`%
ztA`iP!bJ>VRx4B(9RU-}Et<3WeU1o$_Lj>-(yG|NM-drMiA1-P;e(?NU;i1C_z$(1
z{v>i`hdMcPCk)PLo&WmPQVBBG|9o>;3js};?3c86Id=<OXKP?x9}=eY<d-<HD}%m;
zdil~45LQAN8KhtlJufW6!$Z^RpN!#q;?3Ae1^r3+)>cbTrlAjZJl`|*<5GsLb*bX(
z9{LYDrevL5G$t_ApM7-OHmLhzqBeC+k<F`%AEt7^CR=-W)l2hMH<UQ~=H@Db%4Qpc
z>?~ZujLlERD1ET<!)^`a?F)z9@J;<KN<@7{F~n+oX_29Pt=O9Kd3p`xH%0&BZlWf;
zWnM+KY4cdWB`(n!E^`u>$Ic42EG~T4?64KK@ICzq6HGe}Nl?}zp|K0<1WGU|es94F
zgH|GXp`_ZYVJCe?2+@KEoaM2mw5FN)@2LnU+1=KHri&6ze5c5nGY}_NX1?q^E3Go)
zL|Sb*=hvY(9TIL1Fj5Y5TN*I;?FzAQx*<uw<(9!j5*iZ0M)kWUzYuy$CQ(gG`_K(2
zDSN&TIh$coO+|(QG^O(^-sZ@|#QYUHiw=_g<>-!yab3{j4)yKngg@^jeLXguq^Tf#
z-G*@#(G8zY-m*-6RTlE8++W~US?#{qB|r731Y{6o1A<Mxx>PzmxX3Q>#+AcwNR*Rl
zwH5PIS8dhkGG=sR0eaN6VRd%qE=NCzq{VbjGpV(nibqChN;IDD5w@~(X|L#Z1rtOy
zhp)RzDzmadHkHtc5(xJ3(|E9a)BS$J&fVCXuPTR}gu9<bo^F2~+F@G2@te8&(pNiM
zPl4Sl@nx<?`ltq=D3|CJvgeee36ksG%E>#IMsz_&hK5c{`U4;T*-)XK*0OtNT-ZTa
zz{3ZN3cGPS!jR+=aF8WiI0m>y_JA<+eCU)YNi$%%4sV#42@6|9=f{&k_PUe6i<j=k
zoT<QiNikHJ$Z0|zDrAJazoyyDdYhy0GQ^3w{KtHI(7dn)?7)t`VAAUIIQd7S3Z)nH
z)RnDsggKXN_|*EKIkR2GB#`a{F*vj@R(ccZzC+S=?SUX!d=!ti61e$8U>Pqlo?UrN
zkSjE%vo#}g`8u+O9uns<>6_lKbi!pnc0#lA#}0sv4gJRw(%#28gzf!@b0As492sM}
z3nzLtST}2Pp>6s-C54z!vA92kzdamY6JM3n?jI=^&-X;^<H>qhF>|~Kn5jeb7k9{o
zGTX)W2mGtR2?iBM<b9oCY0=5K+fA@8ZXvd((-W`yXdIgDx!-V{+SUq9p=X)Y0ta$G
zx$|_N_qeX&!{bIU#?5vQbGVZf^jv9()`;ymg*FE$rE@Zk^s%_v{=D+aX3-a09U%@&
z<>c^+c74aiAW~gclEaj+mFPEXC@5N8P5vC=@h4J-e|eKo>m-4iI!>kSxuquKX6*|G
zma_H=Sdg=R(1tQk>pjXUSi2yYdb~H)dS0Ge?D|ADsms@rb!ogl1qryw<{}xO7k(po
zVqqN(?^;-g%#{gW`%eU4dwNP?+$FBEUqISqiEKbtQCu^5-=X{T57iEWh-0HuP&)^%
z|4+jBl<n$=wZvCtS(hWWWG7fsiy`(`zmM1<7Yd#F&KwacsjMWDHS+e}L)V){XFUB;
z_P!&H_D_<%A<(w`xlbyQmPA^?-<4~(GG9j9NM}f^FXuOno!59zr2sBuK4-HJgN>cw
zsUR(J*%2|V<kG-eREYB4tLh{E;N&&b@*`URB~oU!oaTpV&zBVkyl9FD72i!}E5%cv
zF-Me@8P-elZp6Z+JDdS!2g1w@vziB0fhqOqIfZ#0ti_VGyewVS#zoq046h6M7Z9Q3
zV`l5b7Z5G2m_x^zt)inS<_M@AMCx~Hb9U3*obB0c4|&Lft`W2l_59AOH<=@7Ei%ak
z&*Osc9iC&RHrrg}@)#N30gg>+7>O^rA59z96TI%}dFmO^JTv>W`{RFo;D5q_)?5R^
zM~WMxry{d8c}oiTy#B4})+26o=ogYf!BLIN`NJ13E}Y%T%otwvHb10+2}xajF`4}%
z%kCooPI0A-_9IcrFZa|`g^uTBAZuW;QdU$&4%8w_*d0D%kF~EF9yD<Lrc@`r0M;%s
zw%6KXXZ~s6#l9eNpmeUS=GCyFzjwlFR}#eXhowGF;=BnvkLzX;iVo`K=)zQ|_<cTV
z0V$2+rxy-$23DtzuG(kGkO>#LOo)NyB6)rkh@NK5yg%{Q|1v86g)Nnh@`1@`x1m4;
zozz`M@Zn(sr{(&QTx%Po@@{}p``U#t*XlIFLOjLGh^B5$ZT}|0#>%pb61*dHV)Vx(
z;QtvHol^8KlOUGrs1;q|8LkerURT`)afcKC<m`%f1>T2}-fyVDB#e9R-|G}}S=%lk
z(`m|n-xrl11iK^66Wt$0i5q`$kd8UJ9@HTWbibO_f7GNf*-~=j8cCWQM21_<m0R9;
zs@LOKHJ03EUycMX3Z+@yr}7>Ld=bMq5MU^H-P$^4wF0typTv@-I@7c~^Zar8BFu)Z
zSkYBObgQ#&UK%VB$Gdx0-^y20m!IJ@QFg2^1ez+0mG|6`9+QI?$~6NXJ51zo+z4!I
z=4i5iKqyr&4J#FsN!78)1#S^HWYBNKK~crMw9nJxV+YWDq+f<*KnQy_d5Z;!brfT{
z$`a@eS^0uS;yJlaFvFJ2Q8Fu)Fp1qA5~|Swgreh2A8iRG%f~=AtC#GP4`dP~)?lqe
z*_xuN={X@n3~_RD!b~!DJp1H*Y=F`-JUp{eVv(clfD+5;)0+{w;E3giIn&G#QrPYo
z%9{N2&U8{EO2E3!ia1yWBXs<QSx-G19ukA7SI4HpK83=qZjl_QdVGGbR|O<qD`e6X
zh6#i&j?hoqNa#Er2oU${cCz-`AMZ}36JIA9J_*?L`bCOo_BHQfCU3jg?Bj(3@}Lm%
z^z4o^fgH#^)`~d8%pyLcwg4v9mR?io32=O9p9Q%eHSuz6^P03jLvK>1_9UK42G37*
zN#k_{^Pu1-Zlq<VqGWY-wKRZv@ZkG6%KaZl{?k!DW-<ZK5EZ6@DGsYZ9+|pbGfOFm
z`e0~^IlOjZRa_my3N>G5=k#dXO2oZ3l}mH2I`A`@Xirjop&`_PfwSStvm*+&8Q41+
z#CAv#NLIbKl@{mgeZdVtu&t*it@Q=Bd70U1PRxC%^ZJX)><^sXahskHI}Z27gBK@)
zvajnIs5o<D!1t{ExWDFctjQnTf!nSKA_#0rzaLgpvK(|g!75XibA<(U-~th=qKZpg
zkq)3o(X+ZBa)fi;Gh1Vgzx;Vo00q~~LrKN+nHf!>{%q4-W)g3gQr6C4s$XTr@)hv!
zB!p=EJhQ?AW;2RtC&NO~qowSEg`!jA^Q}B3y}(c12J?s&gb)28o>m`nLg>)vYNrE}
zXOtmqh}GfG6UdNTpm^$RKHpSWEWG>pOsPktp<Mu9#fpQ%UGp(J0MoEY0amLBWqk8s
zr%hLpU9t}zXIMb)lQsAT5gPM-!AH8i3U#^Y6~4Ix`v)T$3>8hus%}0b%$-(h6ALc`
zd%~dGX~GV+t+5{%q*XAvxy|^;KkqPoJp&^mE)f!)Eo_nt&cA$4yGhokF)3^3@vmk}
z)^l~IVH&#kZm(0CP-kjhSa}%6O2^y?XW6$s94$M1A&&J<JFz_O5jPF!OU8?%?1H%0
zR#tWJB_Go+Y0muPnVc%ld<7AsJv}^PH*J;+?Ynw8d@QurY01$4+d6u|F8`K`1NB-<
z{N=ID*tNrdQ5>^?T(<5u_}nh^P#dFO3+_B=%-4c_DUDNWE^is^BJjJofdz<uRI#QF
z=PdrBIw5TdkXFA^XvUk-1%ZtkaW9oImG5mS8%1bFaiiTv<)P!ge(=z&-J$h^5_e!5
zNh-hsfsRbQvagMJQ5~N_cf)3yGL#FUz6o5kd2~+1J{=m|FaY)J^R-`f8G%-r5BsWM
zHmTTPZ_~-EpD+vuvhR9o1RKigRp!;{G<N#fFYs^Tp4IgirmOF0glM2FZslXZgo64{
zn-29P+!@|<8eTNc!N_^U6^g9iH_Li1`>G|+y8^C?(|b|^vBVt^-{oXf)-$44_ir1R
z4>IoRE1k(hh4MsuMy5Q$s9{I$2yS{{&Fej5$+RlN*4W9Ct(ekPV<K-KFHAj$Da*%e
zL{8o3S2>EC8Cfo5Yix(%fM_p{yAW<VFuw@@IbvU|<T|7^)y^Qovkr?6RsN_3k)T5^
zDvqOO^xTjzoG!h&K8*&8ecXV~L#-eK5W}y(xkdlMzV40=l0+zgQnPUMhYBr_9eO;%
zqh+~BY2qCKkyN=2e*=FpZ+c@)?Ft(RqiUY`i(Fuax@V+O)RVv!R2o5HTp*D}O#vx)
zYjScs(jQAIGkc$ClGQSFDZu-5L)<(qs!hb;Ly}?VF*RX7jO2xNlm=mXOEUY1L$M7q
zqmmd;JJ1d-+*M1qwavIwZ$ly8+mxQEn<}fOq{AYYM|w;;A}U0K=qX&`Ckh2|ZNhCL
z2EC{}O+z@+<3{Np?@?0|9otgs;_pnQIVvm^*tp=Uy*4+FN}<3ZLBuE$$UdYyZ6zY*
zMEj9_m`Rg7Qe%8)RGE{)t8i;V@Dt*wWVr6}0m3z&bktKb0f;7`_69C9vj9q`DSy<-
znVy<85WJ2{ocj)>)$$%*<Ap~cPGt*73kW0!Q=uaZfxYeS%{HsOU3}ezlUBvWrTRs)
zxzJ?qro*kUP`Sdit3zC?R|>H%_XMw$pT}dHrX>tDBU)dnXFfQ3vbdJ(ZGO4XA%yca
zEVScR;p&~BVVd8}7b0Gv_qZJ$$l709nxcm(xn3&^Dt3p(4qql3{=9vU@Z}+O?36l;
zlJy01WlX&#J-63sVh<b>J&wfVy6kTph02v|`>JBME*JlVsD&5?ayNQ>7B923plQez
z=O9lH6AOay3tS#AZsEy{t`iViR8p?E!T*&?{&947|K3R6=}YCYmo5P!p3=1-yR<vC
z!%)iB=}z#|vteFPt6R<ZR|iKpC}oArM5mthv>+)T78Zi&p%3rEJ-JKj&qHf+r79`3
z(;bg!G?;w`F!%JOqa~0y@wGzG;lgY@$!yV3lIv%-`+9+0<cD+4{wa-+Y_0NS(osEE
z{Y7Oqv$08x4B*l8bxm&7Ho>My22T(3i+O6F#PhANnKZxP`NNmW>`=k&Ox|9xc5uBK
zecaywvr-<h4}*(Obe>5^I5jjkC%h!N8NL^6aYNgVkT|EX;{uRosi3Eh-0jG+)i#!&
zS>BYW*BTDDfoWVJpfKh0XTt&>p|JF;E<`a${}Hm4*eEMc9#T$ZORM%mtkyK-X-nRm
zC~gb6VGvk5(iLPR6(d+<51&vA!zx(C>sLd5DkMf)o{>gxnscS!&|yIGbvif^+Sx8+
zWWw6bE|XBWv#gEQBr3iE<1$j=80j4=IB1(4L~c)9dVZaG3Q_OmJg39PD8%GUYX=#k
zp8I1u+6SUJX-<;0ySce}`U7KJfBC~8|8MRl5WB5GK7cAank5J8nc<=`fO})rCFI=H
zb0L`9_)UT2>Q%m?8z6_kv1L61qPWs1fvXtxOom$pXV~{}9Pj|-so9Yyzg%2<mlCIJ
z!hf1niM$VsQpW_(yL4l@hb;+l5pu<(CshWm6*)(+Xnvw@(9qqKEg}=cl=P@$t=l#m
zpu(uKOVIDOs|VvlZ?dg&iO}{HMUH2pcvooJJoik9R&t=){gG47I}kn;gM3+zHX0op
zeZeh4Q$W0szdayW3xI?7605zj9wBl^gi~Bx+{KrS9Y2EH-$yXpw;3j=0DX{i78yV~
zs=R%^uCy|@<Q$gf(`)4(U@hs72<08xxBC3x^3F2d_KfVp>Uvqx);2Kw0t-ej6d9PO
zYaNB#$!xDkImqa+rue-l9z_+j=K@<~$xn#NNdB&sjK?7ak^6e>gHmyPS{B7Z(wZ%5
zmpq+PW9!W!Hf^#K-nSgF!>2xV*a`tQh*s7us(eAV?DLu%+k6?YB49a@A%c()?*y@;
z4GejmG(whu+wkR;7MPVD10qCriCH(OlHy|W=ZmzOf(@j%dGpxkf|do}Uav5Y4Zd%|
zqt|M>ebX|Pcwzo5d6WpkbAc5^StHSj{zmnBV&Ow!izh^4<y+WK&wTk)mM-Q|XAz`c
z1cl{k(_mQid1h)=mYO|Flq2%vB9A<=Tn1>Bam|!RUMmyM$d4>ujy(|-)f-|gE?b~3
z4ltsVNMJ?cmsJKLVrT<qvaV(g2Sx#_HJbW@8HGusp8HiDFSDeR$fl(Xao1Te#46C$
zHX)MhR;$Mx25^E(izRc?{2WlOUdMg(_4{Z8Wn1?m?$xtlgdoErqt({9TRqIPcE{2J
z`b7);M*3-pFy1|(dV~--V%^AxIqN=sJc3iy?FGs7#N}jvNVHGyilVI4Ezj;E75ZX*
zSH!A4PaW&J4y8@B5*;RvAlGPql5(=<`ch~Ia2r9XDE!-3aX=dcG~v?8%1v@t9OS8N
z9xCag4Qvt+12g7Zjv;qM8xM3-vaCXF)&*ro0h`NufmQx4D_Z46EYJ(X3G_{b;(*KQ
zvHdV%uqSM5Fn-0ybTM;&4ghgZRs@JX{a1yu-nIDazjguq85kJoiSWdk!$U(a4Yd4q
z1%ZH}#P3VwqrySf4*IwC7LG07*#u7+M)A7j7p$(g??rKe<&}xU`dwmKE4d)-N}~+m
z)&@fn$b67WmF3(gp!$4fG~NU6^eCzi$@hd8lHyjO=?<%%t{Sngy^;Go%|5m(>mmvQ
z4X?FZVx1RVtHmj!hqIyEr7PR_d<;K_{#K{8g5*>{G*q4{geF5{SBxftSQ(@Mt!S1d
zRn{AV4*`%eguBNgx<N*apYO?XaynK8!*aS#H7_%ittg(naJ=lRKi@et-U4JF5fO`5
zqZmK~)ov@Eo5lim4AM%!&h-yf&Bun)!H!UFWkwQ6B>~g*_xe|m{3Vv-i_Y?)xE1kB
zMrx%j=dK$b{FQgYzL9ImakyR4aUQRM7H2pN<S^Z5niZ4(%6)`Nh8%Jt^ttqn4Cc?7
zb+TPkI$O2OXKy$DY}JG_Rz_~6%**ud$sRB4{1ism<PSE$2t>LU`#Q4vm3<2tRBgOB
z<*7Gr;w&DgHTl^v(ed@Q7A3oYrJQ1g;iJ7Fju@QXb{n~qbKGoCPfstelJ5TQtfMAp
zQ-GP{(e>k3bB;)UYqnN3s@kk47@AG5KMk7|J@0(S@AAX9=$QL?Pfz(x0D5DHNYKzP
znx+h|q^e*VwUwoKtwhZPOxe}vYWX&piq5lSTSCVR9d?1WC6~!linU)Kf1&K~<^W)5
zA^H_FV+Uk>YCDoMkWKTG%lVYv9H(KX)$x(I3&sUI5`xPs3o$s){kt7wE(@GBlOyfW
z(dSa2m?Ro=?*h#)*%}nP!aD3U9!jmBJ6uIcuEvJIKSsnEIvdF~aDG@=bdg&KM1mM`
z`rHA>3e$w2S>*B(Qm7KIoe7~I+G}6roBz|SfJi(u`|IyvqrQg&!@ZZ=bk@*iY;Mq7
z67e`P3Y}d_eZI0ji%E<8f)MZaj+Wf!Q}ji-9G4h*AgvqiK6@}3h(lFAy|!V+2Ql(4
zI)`6@m~OPuvBC8N&>wLt0PE&xOE^s(rd{&(>*V3^mFf8q=;8x`6$mlESk&rWF*`mm
zh=!v2+cPa3a8yn%nqE5tG+u=Du%^=8+Y208)hBLBO*$WMPP#*K@K5zIKv_saHDK!X
zs;`_x&mfdNeqmid$U1?`jeK9Sw957bL}>4^ddvb70@jHnuv_ah^q!t|50{i7YG5dd
zfOt*CG8{>T42;0*?w?!MerLW?6{8yJQEW+y0cq9Dm`*zXmZOY*soFGV&_tMDTpyvm
z(r&w|B{cl6f1$<5BQfD<|Iko8F0jsF>qw$=r8S<n@YV8uwT0uRe7_gI9?jJwAqOOL
zt`V~~HaL>4j)N-HLAHSRg&5t+uU<++x<}MHa3>I+8q4-fzWHUgQW#s(6yIsROp~*z
zG~eruvNX4DpQn0_D52N(PR>y$JGEd^oITI~TB8oIe1s4MB(at&PY?nqDs<yRX|3PO
z_M;|wWFVyt6YXqgWI4_6VppHQ^)ay;=>6@VIN>L8%R{z?>_^wv!m70vG*-IfW95sa
zsHM3%@vkHU!{6!M^Y?Cn!Lm6MDk((pL#Hy|w{#}dKB??vVStB17O);8QB#8+;=cx!
z3l9HRt*ZLFY9_?k$w6~*P}dDWU)>9<p}jT(y%sFnkNBR@8xmN!Oc7|C>L=F1GJUQW
zx>(r6u1*bwRI=<O#igm2!4OXRpJsX-Ve0>X&h)4{t7-#*)U9*YSH`2CfsI4^)wof=
znO@8Kp+G`nV%Z30)KqnG{b+92ZwmL8tVT1<B3CvgML5TWXP^+>2CU>QA=tZ2AfQ{3
zy3@!9IIBaGQ;P-2<)&AULs-tjepuLRcH>~*CpuQ`O0f_&PdmNRB?#RoueYhElEdVs
zFzjIp(h@|VPJdRqyQyHLpU#m{;gTcb&XkXlA8F2Baq7$KZO793Z6N-S=J>$Al4)Xy
z5l*2cQYvVReq9;}X0$f?fGI<9v=wYXQ%6M)q8n;TWJJvLQ~d-%=a|oPD_`_JomLKx
zD_T=un}`$5V~}05MgSP6hkkboRCQQ2E;7(6mki1VuC!U~FP+-lwj1wl^vQ1-LBj`I
zV9tt%mDt5`);dqxleFH<S@r!Y>*%}a6m^Jgesz&S)pYcaYU(GMeE8O&|Am~9mKv?O
zp3S15X~nawrUpZrn)-{^U&mzr76s?H>WWQcL$idyZKJf!3Hu6ftEpR&xbIXluByWJ
z=b@o|H==CGQZutr{4Q!qJ3w-3r;aiUf)W-(nVd#hPLF+rvZ@w1+S^!fySs69T*yex
zPB$FZ$-gviD9$nB`&eBk4-UJ&IJUnHoWqIpLjO>>3tARu`8ux1zEq7NeAxgTl<VC%
zC^tza$CD@`AOp}2*215rK;VeG99x6A?Gjt9K&ul0aylWDXMd-(uo@X~v17T;IpAWS
zh_ZtU@EIJGmZk*>5mbu}^!xXn`$wvAp)K${r8v=b335%mx$Ok*OQSu%DOg^1B1mgk
zR<X<jfpCc}>x<I$b<5vD#n!DhudSYOavn9%DllqSQ(y4nBoAL$gqcTrddkWWqpktg
zsEbqD2C{h(1QqhTB$R|tzwlUYfXt+eC19Yd#PBNApL%t)7HFp8G#98OWaX@Pfu9Ws
z`&z@+G?8&QuP0n6ybs(qQ!%1PbsY+lw;}4AKE-sz;e^cX;+`Lm7MUY5fva>v3g-*v
zBb!-6PrRJ1`1UD=8^X!WWsqM+pSZ~HguifFK4wAda|W`8$dSaVDzV$UOo*?)1;|Tr
zDJ@;5DeKD0%6%nGn_UjEep8;&br4{Xb?a-(H<(*5jo_smg49%X4ITi}T3c5*Ii7vT
zAFU<-v-7%bEi5C8F$y__I~G`Ioe+s#C5Kloz6Wn*ex}1xEBHy+4(xD0rQHGOUdC6^
zLqe7NGR>C8l05!Ge<k@un9M?f>R&Pa=c5aV(8SQ1k(9^ab4rvgx&F#QKVFrS!F-y?
zDhnIDbV4;`>smplk{bp0+uh0=5DrlRLWuC$i1OnHO%9VowhUJ_H8oF<gkFa2yKCDz
zlB!Tmogm$8r34!fGC(EI-pEZu709AS@L4w^oJYq1tGtx`P)+@(bD8g=$kpy`8R;@V
zJ%Gh|7a9r9X((@<uP7zvTB}5Hk3gy~lUAL&$54=3vPySP=`^9js&d{$&2`ngVzKWK
zxhp2(f<L)>Esr=@z#8P2e+}abjh>z@uOxJR*hJTL6qyVUa$T7|9{YiMChoxN$Uw9*
zDE`S(n^>1{4N;%Uco_#QSP8X}AY9WPhl3ZWcZ2fveu~9u;qOL-hpar2v=eE5vsZJZ
zil95C=Jwe=Q3<cRV!0Zeukk2L-$EjYo{g-iw=!g?q_lr7g;a}fzSHv<Z>c42TK5+;
z_s=O>)YJo(K3vz%nkPGePB%f-$}YUoqL#aWHwyxKF)@onmn_<uTM65@Tz#H@?<<$z
zWczm1)HH5sE}WW~ak8mUPU#X6-M;SRgMg9B)lpwk02*mgF_IEwQMbw$wuWe8Tl<Td
zZot(Fo|`SNHJ}-&<)3ukgb}zSgP`7Evm<b>=2Tv%e;kMC-<qXV9`H?=Icx@(X;1yI
z7znG5Oaq7@i&|{|)WLzqU0FBH>48@fqrjaig>JH@WBtlp7tl0AcUkhaQLOrI6K)&N
zYG10L5s9v8S}S;}JB1TZ)WROtYoewGiPq!(TPLe1YLMtgbOuqr2&(u!_9TDLhW#z6
zk5xaHNo*k|4GYhzU;Yer=HCL96~F0s)j9(?MoY2^*kq0w-Mp=J7u5OMm*_WQeWP}D
z|L1ULTI5>U5aYTg;QZ=6AZkkWV&0V7k$(Z?s=FT3WQ$X|JVF?4R}o#GVB7u{C*Fuw
zeei2l#p2KT`RPENO3;89cb_D6Biv^ntO~jozVAhm8l1MS^5mBg^jUo))HI@gA=Odh
z)?9-h;dgtf<;!~dy)v6+0eYy{0<tDtdc3e&c9rSjv7ofaZpAHFg;>GuuTo~+SM4n<
z)iJY({R<U2oR7gP-+Y~!4D7lxHl9qmm6^=R;$}8OQX%^E_>`nf!z~92324|w3U+1H
zm=R68zSD)=EHVZgBr7Y*q2HyCl6NG8iK&$&Jz7&NPFu#U1=B^rjaH18#l=~LLNf1P
zsLX$UT|i!SODr`31RXx;O$!l@L{^-B5un*`YaGf!KL7enM(b;G0PZ|zpan21+7!D}
zC<#jGSd!GYGsp9t8n<(sA>29c%;4&zuG6Q^;vY*)2Ed^g556#^v!P8L#{4BW{r{O%
zoKWo~AlvUD_8fmB8+)y}&25TGX?gSJBsKMw^FO+&!JHyt#Gh`zvyl>Ubjym-^uK62
zE4)Wjg*8zHtAi0NeTvm;Uu9-cLUm2isW0Km2G-q7?-YG*kPw2&z8W;V3l(UpM%JLh
zmv_Q>ZJgnVl{6P`0rP+vy-D2p*tts270-4x7cirzpAPtS30ru}I}<Kgj@{jv(Xtdh
z5yT1lF@C=m$^pGObb#bK`^obh(1_lx`nldzj|3iH_86pnpgJWq52Arx$w`VJ(frtH
z!$~_JXV~YV(mLD1<`nMuzO|q3TBR<H1M>iynuYVA0Yu?jX7ko#=;qDqjU^Gz{L7$X
z(>Gs78;`1_0NLov&26j*m%1fnGuSv!W%S!OKk-|V8_CqFTb_AzQpaL=nO`?2MHptd
zSXd_yM`5c(*3joa!~y|$g_&c^2(ww~O(tCfSyo~$3V&gjb0_D%r@9s_;U+|WXbqTH
z2JAfmmco+P_}-{XM<R?agfUn^rv-$<GhZ(px+T>DF(2zn&k9#ypUyqwH~ga0JK|K(
z1EtI6@)xO{g7(c*>TCQ^acL7Wh{15CGEYHb@;;(9#phHXUoWuCey-<<=kmMoW%Nlh
zNa8!an7Y>5-d<d)aE<+)k_f7bNvwhv9yWWEV~AXCs;P@yXol|$d3%!@8;9JOlRyH`
zys4e5_Q8UCuOKYImcGiT(pa~`dx3@G!8F>Xu!i~vOQfw_CK>1+W>t5wsNwr`f;io3
zw?)V!4~`S9RSdA0UuCACwr}tqZXl{?4J-dO1TR;PBk&U4OSk$zHv4cOQhp44O=W4j
zGl4R<4LH`apulWiO-UJ+{`g`Am{Um7m|AkJ25#fcPkch2=k}^WgTc|pN|c+e=(Vd&
zW`mPcO9G5y>Dsuq$(}6hF)hfChs_2%t+{9{-H8J3b3bTqUSE)8r|y08@^8O$-83Ma
z$QSU-ns3HS*nf8hX|X>-z6<TEOWroe`pMBz2Le(5UrO!)@_~N@|KhiTKiarkB?X=6
z{ljnO@<v>H4yX^t@J^Qv4H*GMz$?IDMNxOJd&0rSfrX=vp(~JkG4T2(1p**)8O+hf
z+#ogfb6!YK<+1(qic!?6kEgk+LF14RAa6Ww;QLv9jy3|C?c0I%;m<88?Wbxdo0*^<
zq7!$~V@g|kT-q0We}nUsXEBwOBeI4)q3+a$r0TS3`dyS_LUk;`i5*r#<>g>T7O3BC
z>lDd0HSU6?sTiPwNbCurI!4IHncjugKs$IK;0rV>b~UZt(*@Y_RdB@{9V{}?GAFC4
zd&)KiUHj@cZ~G>#0T|-iK(V(Qulp97kf#Fp=RB2;cX<@8B*Ydh_K{RY6+_co_~!G<
z%n$H=Y0%*XPsz~)+f`o2xy7KCWBXS}7EYVehYF&`t0*A&>(9~VF#}gkfSyn1%N+ir
z8XJdT@n^Qf{?YP|>xDV3tDOM5z5p0OiRGl=GcQ5=($6ifG0ww#riwgvUEGeO2s=e{
zKegq{ewo`+(#yW`ggFcX@ue0&wGc5&TGXUr@7AE5f3aa-QEdKJtu=MdB$w%^2>U=7
zB5x0=*(x=B>TeKJ6>lyncAazWA{HpSxVG^6SZ3UuSp4#HUM2Q+(VHm!mTa6=!yN%h
z49dwjRo*yP^d}o?^VsM9JJe<-a0?UQg*|be8`rhi;M%YDsy7PMS9__pGUb3lCNN`z
zqnC;Xo5FZPOE!4gK2ulHOAlN1;nY7l+eGv0Sc}A!e_g5g9HE=cvYY(2UCGy-xf(>e
zV|GIqIJ#2;vrLQX6KMj#F~h+k_4?X@v9ARo3FdnaE)Wh-8`EMZ;}!A3TZ#`4uNPrd
zF0Q8h0GIR!Kwd|1krAi4Er`7gKSceS*4$ZR3ZY}J^=2u|s!6E-R95@(IVLgbfLGx|
zbOr5nVLFZukEh1ZdM8M$QOln5@Q!znAOvF77d8c9Vd)-koHRRm!_OoK+rLxU+_wk-
zP(Zf~$+WAx>!U9_pH@;k(9hh&G*9302%uWy^cKA7Ze2zA@HV9Ttj#T>gmu>?MsO``
zNjo%+J}*ysWXmjp#Lv-S$Rk8ZwXh)SqOhH4xlBpdl^{-bIWp@R336-Ue$K}ZW!cH;
zm?*AT)ZdQjv@J^q%_mx!tqD~dAon1bWipy3c7nA)H-ZQ25srxs5%svaJ~t#@Ce~UV
z!h%<k(6xac0RkU_u4k;VEx}H9b~pz792x)SP2YaOst;6G7IO`3!>Qg@()~9C@V&IW
znIfWjMC)gchu$Q2ExsGNQ~S5SHorr6_RI-4IJa$+<B!wHJ1RwtQ8IGjYd|}^R)nFZ
zu*PwUO^loh%916>0s<~l@3y<Dq*z-r>KP@K^D{^Y_X(9g@&b&W9wxs{6{3oKwv<AY
z*C9XhSVNLak29yc#*;Wdr5PILxo*qe8o!ywm>F#zogKUSiN_0XbJilRZZRXNa2`?5
z_8g=ZO0I(pXyUuXNE^BE6K47AQBS=7%2gA{<w~qzce}#HpOXx?UwKJ`!8D|&fX0-(
zi!tfuf2M}s3=DM%Hn(}Lxfq;%x6C4!w<%_=q0V)yKoozI<o!QI@%bI<0N2KW(W5KJ
z^(MQ6Y*z;sJgpFj?f_OsX2FG&CX`$wI6$xce-d+O9P&UX?01+$;f@<gpqhH^YO#3J
zZ&7~K4=}wkzXLbkX_?f2aZ~|N*+}rx@?18Ok93FELHmK^BkUgX$U?0}zHm9-eWV&T
zv8Oh^->Ry&loh%U!=+pX*;iXq(Ck(WA@M*>dYr8d*NjLLKOvtpOHJ|y8MKA6S%&n=
z`H2F=>Fbh?;AcD4JT`-$q*pDf?7S6I74;e7D}g^mTF28_oswW`cA9<(P^5^BQ5(GI
z1?A0;LD&$E<&C5Jn#AEBA>Bh2iUC#Vp?!;iCk9cj<YpP^Fxdj6^#mW4L0nv1tZbN1
zbEUj-y>DC1;0Yk2*Oe<i2mjV<V&`x89;5TyOy3IR|M6Jo`j2V~=eG{9`gd;CU)08w
zF74gYQ4k8*bikB9&14XZx+B~xffJq6s7qlHHkN=V@Ifr@Qve8VOqFk;AsP(yo*0F#
zU`vR^o~^I=F$-8dL$RkKz<8>?pH7a9&Z>@IfcJd!TB>E98tSjPiExhlx=m3my{uT;
zzs2g)l^zb{XZw_CwLAWH+(lg9Gv)w)4p_PvBNUlz7PZ4f2bwXjy;1wJ)YRA7d_a)Z
z9@>#o!aklubd<TI-DT)Dji3;V#hnsf)bE6=nk#?+YF=I!ze#~daT|()v%B%8S@4!T
z=Po_?2eas7e?x#9fGK}fTw;=&<9{BqiH`^aSXK)GWlYZSg$0F)62&aEhADbSIT^YL
zj|I91WI+LR4NDtG#bJ|s3z{Mze;bwLP(2MV19Nm*3k5O9Ga$nhXp?d$3eTCg?*@7v
zJo^RLOMfkDiC0$}3pV^N@=y!olmTk>H0b%3%ia)!JJJkc5a$4#Alzx}@PR>agLRG`
zP~|2~)$Tsl?#&e*LE=L?2J`as26`y%ilS4ZHejmeku0Y(Xg{~$dd?~vpzwmhr|Y9!
zCtR<;^^R{n4#sZi%rwMB?Ja-vw~ead2l|=cZ0ikBHrT3~3Gi!rl18ssR*+np5AIk5
zpo?8$7B(nM2{29wT_#PRO1s^h8<G(G5h7b#O1G(n^*QqeZsq+*xfIuaRy+8WTIpIz
z<l53V6)am$#|2w9+IwdLSFF8s45CT7Tu9@0%{IJRzaifR1<glG&q8&jxHx>yYKy%J
zL1WV<rk{<_pp+Bo!yHAJPfdNaNN^TfreZ#XIXQO&7Dfi=Ai8EP$RY$lU&2n_6Lj^t
z)>X=6hskh^V6J#=MmGzac;M4_4g>{0-H6^#Vb?NuzOkUM0AV0iz2n}*tT*|P9WX+-
zsWrk`@$0eP2w(^V`eNaDucJHX0Z3(v4!-v|3wjv>Tkw&jXZjJIZpOq+gxsV^a#i4X
zDkl^l!g089)IV4}y_ZOsC|FcP9_aw+47ZI8+Wf&22Mdt}XrDqo6XsMU*l2t;e8yw`
zx=Q}{4L=i23yH#Laie+@wdcIS(+_Mgqbh%C4bOwzpP#%d7*I;%sYT>9#kc8t30p72
ztF@-oZ8&9xOG2w#R$1}5uEZTfE3H0|p%6o?1X0`6H1X&lqg_pn=&4kjrg^>{!QXg{
zn#9C)|90Dx_d_-iu*rey)t47R(2McgJ^HoZ`i<eg0;yrc_unqPqjjs5WNX$k!rs89
zL*p6`Y&5$A9zcg|CVDxns!IlsU=)<HY*ntZTya&pxy{?0CTwR~*WckdN8lHf*PiAI
znE_Dfct;U}WKpyJ*{~8_F}9Yvh7Ima2Gu_yv4Ikj3pB-nv5z!s|3=w7{O{N1oI0Gq
zPm+J4SgTOx&R3{ydFY;lsNT!~wdx9zirD%S&JT)gEs*@sHRegjrY$E*;aK)%g~=&b
z3Q)Q{5jivGf-WnIPT{&97vMBHlmH8E#z-&*z+RPeOvyWA%$I*W`#YBj9_o4Y=n*i1
zxP1eOXg)~(Knu&7E;`~?d@vb&0rJr(u^T&`+wUJ163suu(tiZf==M$4YlJC!=;eSP
zo}X}|BB!X*piMSgn<h+ZrQQ{syJVzorcz`1m58og*^E413Xe}~^#DsUUcO3EMgDy$
z(lA3M+AahnCfwPbuhpPVM+OxnxTH*|g?UWw;aC62lmaKxBy?mIGqX9_iJC*3-+rjV
zKDC-KK;>lITqICCUlB5E*A7^~ls^&GKI9^2b9^M1M!ey6Yi04C^WT5`yPzOYSIKd^
z^WR7>Pi>>FQhOZzmP>l`NKuu`V+(c5{tuuf{n0S>uXZ)i=8wu)wLF(n6M>N$Xo_V=
z#D#K~O%5xs%J-gtTpSSB@6Cb^E3_j5?6BMpZ%BZo*zJj1m}DmcD%nZKvu{JJY;b9G
zi##X_!HDjEfr#)xzK(-%zQhaeCdJvTT&->*OwL2Ay{G!NWvbX~w2gIj7HP}HA27g_
zZf5ijt`mRWR%bqqP7}82w1#VPXL44rWsF5_is4($MNKa~xdP6?Q^|NKRXk^1Yrk@B
z$TwhJ`+kL|`wH!|i7&f@9@#MfR<H#;e)VDV=l`!osUB5--|6Y;rA=djH*bn^htF?y
z?~w=6OCko2oL`vAK^D?ZGY7C?=AnxFwmNjs4gmVLGUXQHuexPV6U`uvLy8vy7G~x=
z6A5OF&$=el{6-#E*8?js?h}myE-C<UK@<`(MDyczq466`t&O3@CoUq_pVC#f95;w*
z(4gCJ{ki?RIIZYy&*Is);Wmfs2C_erT<19{X|-TcPy`j$h0aqJ`7d-inUAjIC8PDM
zZamE$<ep@P;<;QV$V4r8knIhB(3}u?wnuLIpYiqoh(Lj;jd+EE{h;}#o?vfi68i(h
zJM*EI$%;oar>21}7wnjyQF4UyO<ryj3iHeA4He}b?a+$p{iP!V5mwnTilW*}1_n(G
z%66m6;Czg-37~rRum^A*^paX%Bh+h}S?X#YB2>o(iAOtnjWkT;u6kpUTz+}yFs8#)
zOnsR#Y%RTeWkU1`I8TLkq#+Mw@nkrC8`!AXZYrlymoPz_FR-rZM~3o7{dOYFxz1(`
zdc6PZAmmLtFuLFnGC5x~-aY{Af!H1Wd4<fBO%J5ss0VgaoKnYZC5W9ImzNoJxPOwS
zGk<5gHFP`RT0)<i^}MOOTb8r{5404y@0}!&4Sv1Yc>bT%qA<8U^qI{7T}b(GsucV*
z22zW`RT;Pf<LQk8YA5HWj=>{>Je<x8$&>YXxw??a&|$u4kZWs3;P>~sg|7l@XDW(K
zLBZzS;iq(;oe<6$e6*LVr5QmyWM$>Ce>V(J81dOFZC8Zb<IWk((o7Bg(k8k&PSOn0
z*jdqP2wo5pz*SfZl{QLF&5|E~o|nlQ=u)>)HCXGr#1Pike~z7+oI{Ynj@4a)40!C;
zwr{$Ib+eYY{vLnY_Xv>3_{x(m=KWSOL>>WhKReTwws#Z<X)TsXuK-}e;NJgc4pGhO
z=C;ZWw!+#{;rdcnN7L$yX1r_+l%VK}CkSi_{}+329@g}k_I<0MU{#jd3J4@1t+b;B
zDYBCUMWr(?=r|)F$d*d1K~W-G76PK8MTpj^h(J&oMGFWK0g+uG(UK4-5W)@uVM&05
zEQFBdy`pVl=7Cx6XXZHG_kQ~yt(K$t<@#Oc_B}seq?n|VlJ=A5r>lwLn<V@&-N`e3
zfX_cCPGjOj)>e;_amS!w41Fm5hZny**1mn9)y%h-?I{1l5-DTp_cfQ-8611pSxy8s
zyHXGo`T(`RdMBY(J6R?2YV}GEL^7`HC0fJtjI^CQ;8r_Qym93Y!VhyZ#U_mqq89G-
zjmAer<|tSPq{W_-aI%CiI6Zl3m31aAZAqC%HU{v#$|AAA9Ez)Vc8JQ6zo~6<r`OSI
z^>lvxv@OO);&-Fd{PF$cq0+mFo%@kqi1`~@=R=ZvWxUnbNQFMRQCks|t5v+w9=0eb
znc+9ZK$$4}8jRAhs8HA4ZiP4qODA+e?&r5?*s!=-U~gL0tz0oUN>q+|srb68b0L1y
zMAf`kwb-{hg5z4vUsqiy<Dn4c!!ZN#TE~bpmc(#QM$SS0HBWr7xP=sZVQqhJ?+Ha`
zmZI~UqaPdmoQ~IYUj?^Y-#%!F*AjjHfszj$m1{0}(9Frup#kX*5gzP46g=;@53DXb
zDCUWSLd?bl_oIBFA*&IR_4DN@m)NO%=JlqSR<I+(2%BP5QpP3?931TH{f7BfV-*_#
z+J#rsbT<t@EP-@gIjt{wji;)Yrv5tS(~xwNwvOQh+hK1#`tZ^v@*`Z0_Aw%!j_z><
ztwoYv!Wg$pE;ZT@a5ixP-qrCd(kZfMSz=^)(=M1I4>te6qK~#(_8=SH9~uZQi;fnO
zkwA_^5@J9m`2F5)(l4iJQF;x2%r^(kvRj0Yx@T4l1}H}Yj#W#Os$a-vQmZTc!0T-}
zZzB9z7gCYA78JRY^6|*hC4N=aZMBe+zd@UsGN_>`dosE!tQZG1c#)GMYq#OwFSu*x
zEV-I2leSjFxRh)Ue)mUcx~*W?A;k{X&q6Vr*hiT%$t~j?LZ9yJUQq<8AlP*1iRT81
z=%FvMX+K;G%c2%_fQ5Fe^h8+9m2`c#p)F0P955K42*0@alupNx`#W%h6u*FvV8O0%
z;Slg>dj0TlstxV9SAdX#N*g+n9+d)ghba7$lQ47<>fk{ze0198%p1-+Lnb^<^*(K8
zK#P76=H~4!S~4<*ejI;>7{{j(<+NPzj!xaCpL(V0ASybFCkfNI{t4fz5ntAP%=x*Q
zk#>@DjMVhQ(fqJkjY|dr`19{xZE@RC&wPKv_r&a~&;LdM0dpIRTBwE>QdR8?T{TIB
zbUpOH!q*vyOR03qv;9-j9W56$^%3)J^mkCm*e5pWRsO+nc7^0ddMxi_>(Lmt#_N#z
zgWkOON7a$SJHB7lMQms+(kDg3F=dvw!}bP-3{0oxg_+KRG8~_OrjPNG<rQY7$oJgM
z&CTv3AYCt<JI5bJpIU~-mTz7-30}YTZ8U^Z(0<DkUKTmmoCtr8eS6K4HLpr)m;`Hj
z21J2DZneCz+K(Ve3h*N+g;~`j#bEljfBWY@2b!o))H8&eP+aN~Dy9Kd+zO&c`Gs$$
z1vh1#HYwD5)_3<|v5$Rh^-yOpw4L@6p<7}Bp$D#0`1^i^AIiVA@u1EX8PFCz0l6l(
zudM=tRygUF!P3is02-giaJk)hJV0^hV?4?xvdO)oEI%=&DC787=Z*;ihX-poqPm$I
z!pki-ax;+5CN~QBZrbcn7VU~&Qm^Zn&(S((+fOC|&f$;!J#^{KjznE#S>Hz6Q9<2d
z&lBN0vWJwzX_I+I<XbXUa0y%&8e+rr!=N0mYiTEX$rB_d&CW|^ZUYj1en0wb&kIU0
z1Fw*Y+rd<!@je7QHZ$qcqx$3Ap_n+n`W6&}`|$0-Z@{a3Q1JEj_i10x5%nz7gV1xr
zeu>|$a(_2(VSgt0->PDY>eA4hn(t)BMvB$1bS^535Gj6WP58#O<V6W~w!FU*%f$5+
z$)={2Q|-FS0o|vN=z)0O*gurY)?7*rh>a1CdlIqYDB^5Xu7Q7akUaIAResfEchwnj
z)of*$7}hU@<!V9k{M%)HKRnaY4*UL3vA@JNH*m`;Ad6o6g&&3H?`78@sMi{bBD<r*
zS`n3PW8+!W5L<X8_DN@Jz?qCnc75U2K7Y&w?J|E;4dVyov|aw(p`@lx8C@Eb&Q0Ig
zYvNE6Hnws0KvADxUy|SYaG!P1OGc*liAp+WriT->wMkY_KK@nYvB5ab;0}|FN-Yms
z*Z!YeN#|DH*IosqDF4VmxI$=sB|>CjNtwv6?d!=%yi0%WmsRXkNa5tQ?Kw3wo56d7
z{sP4<chHK_1Lfe0ja9?q?VKH~qCfTrv;lcWNM9wT+7<ABl9yS<V?$O&fz@83YL*y4
zkk&!{VY5A$FxkqAA=7DZdF+5z>_D#E9%_akwt)I5ezI2lG{Yar%}9LPhnqg3;4ziF
z2@Q}o<<rA{KYQ649~ASMjf-$>5EaWov3{sp8I=5B@B7pVXxTx)b5VMkE%f;pZr_ZJ
z@#_q%@**RxKscOJv)uyhc9ZNXTO}mhRxi-Fo|!Qe1$6f(Gpf)R@`_0#KN(NuK^0vR
z0@B^n^a9JngJ};obyYul--5!N<#Z2Fcv(VRoLab}JR^P!^A1Bk{K?rW2k~e{z1f(L
zZ-+DMB>dJL{yz{@9SQ{Fglnx~O^IhQo_WxEZ>z}gEn|XNlX@ibaKCsfUQQV-VA$UD
zG`0;UFcYmG^vPIAiC<n6C}%E+X29ao{QQ^8a7k*;Sf0yqb(5-7(h>8TQG{yFVaI5-
zA4a8^E%3*VKWtAnmfvC>+@;E`mgP1&Y<Y|%1C5!8>0ntQeVc?fxS*vapBEaBc*G8S
z97BkYBE<Vfj3V2lgHYvQ#1)8H-jU}&H-UQu>MMq(`apBxX)l~~%ocFc2XEe-dZ)sY
zCVaR7)YjSAoshJMDS?=Dm_44q&m+M8yaZDY{bBFb+N`u7Rf#kD40S`trzy^|<51(6
z$0V?k?AB~SeiI$SMLP7GjNa`Oeu&bUlw=mAYH&d&R(AnQ85_6l(X@lEIp=q{X84f~
zPBUEzh)59F+si)d8g*Bj#@2tvIU06-?(vyJ+>P7bGm$2OX^)zmrCV4*lYogt`*)d0
zK#1i6R76mDEi{iD!%4H7o0d0C`w{pFP(K1K3QwB=3?N@q2;?bTn8wVDosA+!iGSQC
z*9tn8J3U`D?W_2)K>nlil?M5WU3D6|u7$2=qgC_$)vh4}#+#I!Fl9)@$d4bNIOcjv
zs_0iK+Dl`(rB5SJKH!GmF8Vh4{S9AH`7U`=%te+jmApl2N?p1h?#F>t5iEn#3W;6R
z7zw7@4jtMgI$G^~MbWNKRuyAH`yA(B{nOrwY0A)$;5!Zto7t~xEi|}HWj(W)Uo>ls
z2-X8NCjCvGH8$KvFO+&XOL(JEO7WY2W^YjB#1|{;vyLB#p3t;7S7j2z#(012zpnmn
zli!N;NMOAB`v^{5)Rj|K^5^$k`|TnL0(Z>=Uzi(@YSlrAAp^e1?Wwj8q5|u*(lE!F
zu2YOr>-)uyN!4FZTo0;pq>iXD5+FXZml4eSy44U12CJ3KyJ=yRipXT5`-yyYblj9N
z!}5?yX^1N9%p1!NsxD#7J=c;P9bB1ZfDmj%P-H!$@Y2Ut0aX<;HVs~arMbv0^E+U~
z(WqFI_=zXs^b!7!!CP7K;hAVR5<^Sd6)vsppRa6p0Oj7qGqOs~RN=+l)rxMeB8t!v
zl^;9V5qqW*(f9xi0q%Q+{(LP>9t3e9Y?@ixy+o^<Uu<y>NRA7v{3~WDM+9>=(howh
zPmDw<wid#><kNdyboF>|$OH#t<#_Er{w~p<Nlh7TW$njJtG<nRZJR}sXP{GRwJNLF
zfCDtkX@MG}C!5Cd-SZhQ%BmvxLHR)B@Bh^W$lJjehR7;<M!(i-|IO*CqF`A%&Gsd#
z1X3j=+r>z?S)x}HB}(xv8TqnNx{_u5Loo^PZ@l{}=v|MAOhfv_^&B`llvUmCBc>&a
z^Ce)pcVKX^<*2ZOt$SjjpR~9DIhVe+XD!g{&sVE(Vh^Io1N{@orst1=2iRZU$6N>5
z>Z%a6qT2%$?E#g8_g`@|E<sfSXaG!NsG7o~=f<;?<LwAVD<VIcC`}~3c)POR2ke-j
zKJ~``@?iI?A8bFfBz?&TYgt%YIzRSUCRYozy})LZ?9sTOq#(UBHk8E<IZ`?v)^A5)
zv&-%K{JNqKyLpz10oKH^>Ess}+gvrb!B(_ud@fD@Oj{76hDw$JfJ)FK_}gqP7Dffb
zoh*Xm2m(q~#C4aJ(C;>`KI4e{O!sxXe6?BiLFpyn!i2?F#>E1Av$@x2!1gmM_O&qa
zv@ODU=*@n}P=1asw%&EvP1KQcwrM0W)FdV*I!=YRM_$1yR)#}Bn00j#;`<t+<q3u}
zM~0L(Ro@VaMES_E1OK4s8TATCBUTydr~_@ajL|P=v>SkRr-;`o$%;WwmB`a;8rxCM
zQl=+?16xg~D}~5stW`4;;QN_(=si?1z4Fzyn;-u&?nSD{o+)#W%TF!Qmr&6bu(_XM
zBHnF|ox#9tgRP4R{X56DjfEg25-+YtfgL&oL&-5nH!?k6q>~=QNYn)+HcSTYv|i(N
z#H%hvMk7SXu+?|S+TgNV2mNfTK^4o!fpRsf2oC66cFpfE6k0r>SMK)TXIix4(h4{D
zCsq%dgfA?0>oNfEWW}?m!oy!ga9}T;ve1xqhlyvUKvT8=v(oJ~@wh&Em`RRj$mr~k
zS+W~Mf1D0pJ)8kT2rrQ1?b@<LbHHqs@1B7}_&9zUlW?{nda7*n7!#qAPh2+e_vV1C
za4r{~=75VkH~!PZ_8hqQNx`>iAA1$}pHQ$#3ifgFEyUcdTn|Xh*OiD#a2Mo!>gD&#
zk@Zv`Srzkz@xK2vSn`X_e<7Fv5}yH;jd=P8PX|Sd=ya>~WTAlgn57t&y(OIpz=zh*
zu0RQFz#_<mjk_1u4<!_cQLr+-P*G$$&^&!448}0>=n;<-&spKwMf)-sLHWMo{{HJP
z-Z16wRdZ>oN0Lj3gORTa3&OMB3FnG$gk;u8cU0&_T9MBBlP0%NHEu*x{Q?ftr8DO9
zuj48OR6WlxLNsCGYe6s?Y4X8P9$TMVw6!$GXMTUk)6S>R^U}}97|gCBJ@g?S2sdiJ
z<P*qpxG<n7RHucWu`{=FJ&Cf`#<~Pwg61qp`lJPHUS5@a#JYeH299oe^<26abe>IP
zRh1s+KORhs9ZO_A(v9UO<Yvv6W%*8fmV-X+H*bFF`$W%g1pnNvvYoo}OCtV08<C5$
zQhs3py!$%vliIw=$tHlUYzS$#&989Y1U6|U(cs3hR`iMjHfEb<+T@Lw?+Yo14b=xZ
zKx2o!IDQk)H@a7dDYqJJf!6iRh5F{BXI)VWBCpc(>WG(rA+a3!-P0eMcHC<U+n4jx
zku`hQM3{eIb-}`_;qnKzZ(is*4DIXD{&wAwH6KM?e7k#3?O!+U(RBFI4E!rEtB*82
zYDEXWoT;i<mpT5!(?faW{+Oy0Ovany$qRoz@#yIrVSMXo2D2YS4r6XrIAQWVUFXt_
zda{5+DQAu@4W2!~9*ypB2RgRtunY-?0h#dIMLM@8PU}<4y8RzSv2MLuSGe!_twcOe
z5nV%8ZCQ(dY`|x^h2@RbZv7-QW1T?bz50(aWGXLSr6$a7FS5G>FxOrD1`b&7)T!0A
zfnq0Yef#CZUC^PqTes#*Jv}RbT5c)a>(D>~NVaEVr)Q55WjVx`9EJ+Xu!IY)wU-j-
zOAA0>rRro_HOPd*-bK-E5Yx{{xHvxOoqjEz$Ss(Vy-uU8e;27s6m6c0wuz!F1rJMX
z*{iE(^@pcFH&JWmv(#-qRsYiOl-T^7WSzGBxi}q(k61rXaa!?SP&l5uuZ@cibF|0v
z=0ZG~WrXgh3}gnZ3u9u#x{vAxtU1ihMm*q>D+Z;<Z}|&KsXNxBpKp73MNF~j*;u#v
zi05`2PBZlYAy{wdG1K&_$DQN||MjDax=W+U>54L7NH-tkjnkiO6Y_=hy@HRwRl19<
z#$;<hCbEjE;lurT%)Xa-@w5Zi)%Y;|pCyGsfTv~@fJq*ad42eNsLl=W%6gqT*iV^z
zt2(n>S@_7j>dC3zY%eJ^c<G>9=%NYN20>SyrJtyF=D+cb4Hq|p21_o9z(cAg-Q}z>
z1#2V1ZJ;_r-E0XU)H(2hCg+O)=_`X{h*=Dx)LseF8u^5}9o8|QWCc?DBjF7{2iQK9
zx?QbQQG0hR(M>3T#tYVIXBoBoLx-e!ze|?w+|%ki$wS83rZ!yZ-KDatT93`^wBR(u
z9R`aYMH#oGRI5Dx2lB*gs1HvZqu1`ObVQ4Uyr9bAp^3Ndt^@RI)lMs?J;WC8Ic1QX
ztVyYUBj5c#=K9FY;1g1lY@)?nRzB-0V`AmS*)*Dr&IwOeq}h-W@T%Fns(UcWGP7tM
zJ$`kEYcxNw;ci+0#YBbruyOosuX9iQQMgR|U2=k*8%gb;X3eE#`4Bj^Sw7Pzda4LG
zu@;f9b=Iq(V&=z*Y^Y)ki?Du|B8nY|LI-sFQ0&T;IZVP7CRbfS_|1n|f$pO6lvw@f
z(c&;UH7rkE9tT!dkAWy+un<KQ>L@a;3hUXh#4tuG(~F*X!p#M0$_mFH2<O);1=kk=
z)4cGlkDAEh!DmX)4lyuAPw<;p1RcD7{wZY~T`}L8X!j+TH(NsUE1%8Q?NI`sJwZCx
z2~e+MZr6<KD&CM@a|fp~%Y$i=-w0|_f4@gZr|G`tfrN@UZ)6moc!IN_gY3zn)i6PQ
zFlu?0#T36uO!gKj10J4#Cxp!Ydm&^(1zC$2E={G$q&w(n0&lF-);Jd$bF;HaSq2sk
zG%k6`wa)xynXjjPBlvnMvY=*i8JN#ZsAn_=Z29rp0C__|9vS<i>M!CZhqzi#<*?^d
zr4XUQ<l_spwEO2W`^#j#{fgf9?AW<m9;?*3W~EGBFn`)#TU$F(+yTbI)6)gQfD0`e
zmy*8QX7&Ee^Ofp8!>r2T?*q*HprX*e9^f{x@>QnIA!^}hIwTbPV!VR`&Adag87m0c
z=izC$yWbACh9dv=B7w~lc-*<x5@ve{ar$_cs}y)1Nbt9quJrmpX2Bz{ub+_ovnYO=
zhzL6Q7M^`|FJk_@ju7yhQ=O`n0GXNw+7#cBjM9YgHopN+M9u2m9p<Zs@A>K3SR3qS
zBRx1I8U%`=Lp@gbw`FkBkZ-PKi3MP+IMw0<tqeYkIk#2y)|+XR<pW-w*>+k*J$4QL
z`7JGIqPWF3AYiD)LZ0+HUA?pOx?M>n%g8IAX2hu~ISNqX&w|7=l}Zd!y|R|SnxMt<
zXgyX!#r&)nh~L$7PXiD&eD#DUH{BuZDFL*7iRZ=Y|AY%m0(TYE|6S*2q7#*Mf?GZF
zeZlsZ;O`Rsx&C-TLp$gJF`v$+s_Wh_7wX<>b=|8_5Xw(1k)j45R>`4<!Pf_p5V6ga
zngy2-ds>z^E-taeZBH#eD5hUkN-nqJ5e4JrtVF+Idu!a9NZIqW<h@MnQNDSOeF&z>
z$(yOGM~&2<rc!0YJ2sil=}*@0(BlTV-(i%cAtiR?9!wrOJk$38cB<y{8jTozN$d{u
z<66e4UtZZcCAJ~q2rbO2rzjVj-Fw0a1h%om?W97F0^L8%6rv<RGF|^RY3j&%R{a%H
z!NF#W`f%NlhDv*p)VJSTB%N6i-{U}y9t46#Njb^!`7%fU`wyjNpvzNUJzw4qS_uUe
zNkVnFeOfh&t4hpboFL3K2KYlDcyVq3AyqdWXd<B}2%tbvO{n`io4Nt}fqiSEl6m%6
zZkX&**zub}^}JHuW_vfx%ysJT>+72sNe%FS*SeEi&wGH_yT4HSzSU4OpQ?_%)%{DC
zVB$~Dfdua15pk2D$I*!Qn$b`H3!2f612bo|4czUmwN@bR7FX<0j#Ze&D!;8+{{c}X
zO#CvjP!TtA8A)Jzd_l-d-ar&_j-X;8AD)BrFgn6qOHwg4JSJ`+z>zzcjc{g-wUI`S
zdssD{Bse}EQf-;KEFe*=v&e71Tj*&m?z8Ydh}V6kq3JE;t|88)66d^mo(P3#LY<`^
zBZ|F<Vyo(D+0*IciYCw-dXNqVX*&jus|ChhSt|Kx|44ON?I<Q|zGuRvYRJX@ph4g4
ziosW7AN<_Cub5V!af0evdEioK+;WxNrHhfSm9=@K&txe2KP^B-R5;-9VoR2c+>N<c
z%JF`R8B3hny*vKQzbQa1_}2ueeTK~b@~H6nT8(AVcIQSk;h%v67dt=MKG|LBMU<e3
zB`<NaQ^cXBx&&sdq$rmZE6UDQ_Y_VjCi|6>U8Co9^`gD`mSAd}>lHwVXvmK9iEier
z@BM9%FVs!vw1cVs;Hm$lz5nOpH@g2rP(jQ~S|cfozv-X9|Eea<rr4E(t=T+dBwzP{
zXn*TD&j3517z!=|hACC2Sw;Qqr<c8Dx!*`EkJ(%?vO%CRT=xx^V6km?2_XokgWo3e
z+p*^+!af+yVh(rVg$ME?hg=iw1gK=lO<nO|;pbALB!;{xUFiwPdG_^<j8t(TT{tK{
zDM`SrksGd9kx~{)cQ}+a_$;NC=Ev^bHl<iX)EWR`(!g(?ZTmAV4eTETaJfkkqKG=^
zp-|Z9EH7%MY0JZ6<Id^-W#^QNTdm|yFdX{*U_!cWZe3m7N#3MDbzgA!kf*1Y3N#O%
z$zB;$70T38J=w4&qD-c4Su#i&>i-fgR`(oot%-Auxutzrw0bxdJlBvACcQF;V8XuK
zxxjE>tEHf!OYhc6S8Q~|#SK`S;ZNSX*AF^kxDp_;j=D?!2D*lg0!zo%I86k8tcYb`
zS|<NqLp1T4;pWg`rxh#n24rG7IbwTiMLnP7HQY?<5kjC%SG}_;%bp|M*^LPq93dTJ
z#kI8<zN2W*cCYBK>s_rJc1!&Sls*r8e^`W{FA+|%6SY7CPTLGI-S|11-c|<(3oB%4
zYO4!O8jZG|-OPXjdjtC+wlB0?EdI2gVdL)zlFVoSEXm|IexH~2O-(g!_LNg^zHg$-
zxgS#&q_tc4e^uw-fBoxB($Au<ziA?nENiMWdn;o2Z~0i{`q-86Ri|(-&%DmbN)MX0
zk0jW4h`i>xS^&L13K*w;!Hh%_I{Zjhe4lJgY@TYzAXQ_r_1D~Kn*%~sM=Qjmesziy
zirM<_050IBapoK?Jiip~EC(`CbOn|>L^L-av|m~@OZtZhzpJcf4$WR`&ScCGe&8_T
zPf4UQ_AOGpH<ZYFU4*PS7ap#%S4C$obKB~Gqrz({9b1rO2O5KCQn=yUkp)fqqPjoZ
z346g~dU{&8PCM-Sd9X77lj|loo?U6;X4B-K)?*(N{uBq@Jzb0r!4(4~{4F~)55B`K
zY(t1hHsHZ5dDSPQ-hxudl%l4@m25-lcZoes$TD~ioZRa;Vav<OV(zO@lJ{mRht1cx
z#N^rDHrV)~-!V?z`5ij12k*e{&EG$MVK;vZoqRb)spj`RcY2Z(*s%}7bk`x|Gs(3O
z7p2ZjVF;D_ukiausj@kN>hA0Zh`r0jqJQ`4=&m&};Sodf05S!KY(^!sdzhO|ad-bZ
z-mtH^jAqZJv?3KOL+K8F4$UtuUD=Y>Us06V)0Ipk`JWAy9?wd{wvEPL64Pc*I9;WA
zm?w^YVhxmL9O1pzL$Gk4j<h}zLnbw^AM!BWqp0h3Qhm~Czvqt0`oS6huKi9!jan^<
zw(RQ#%)|NCkFwkZ0*&aH(6Qt!Wb=`Y0U_L@t+vnhiGt2pAq6*6#e!XrbE2VBuiaO1
zU2wnyz@b$9CI}P?g2C-<ws6JZkfo(%0h#=48I)h7TIm=$vj4&Y!Klzwz0;~gd$#0J
z<8~AjNF-<Z;M@Srvf3!_V3_jN%E~^ljR@CvOGH$**H0uIGKO^wKcg8V-cABS-(5rQ
z5Sk#;1~Vo?a2|^AmclF(A*ok%&r2>Bq0Z2~t#CLVWBdSQdMNF2n5&&0^9q8(>hOeB
z8Ei^A;aKZqmbl9?!^vsqD@bJx8@W;D{j~P3mWz_J1#;e=<tN?3X4H1UilA={AzFtM
zVH(g5GRbf3W+zR?c3^(16M#vtBk}rVGSZC*!s)l9gXWeOb-I(m)#FsAni+pW^jdb~
zIb6NiG2_|1^4AW2%`uRA1m!yJ-}LKt!@{3w-L2_31~4^nH%G{4V`bnz-gWdjjGZ^0
zUUFnJ498JxH7OGR^mWEnJVpagEr|tQXkt{rTm6vv!8aaZ4oXRM5gFGdNK2$h=bHn!
zcSM~(GgU?|<^|CVOaVchQP$}jwLR5N=m+gzm$ceCBTzHEdG5yW+c>wjeWuoRdCA48
z5%z1Km;5eXAY;Z!2lb!Yhcw8B?MSh_d|C|KI9FF_k`w#b0A@>C=ZF{`@S|QIdA7Aw
z+z#+D#bSZ`>v+Rb2UclHN=le@mvYIwL!WJ=J|StIExQ&z`Z2YNcAMeSP~u}9Pfw_8
z#>$<CdyEnSepSqVzeq6~@Sjr5UcNls{h@ACytjpaQ?bF<(+!%Wlz&+<dqfa)21v=)
zm3`bH(;xLI^l9{)$_Knzm<HkkIa7f_n)JQT#g<ddg1i^p#6PAk+La1)QQyR-DJPfg
zsH1fC;IOX%g87zOfS#2B`NnwCN4S5r<S1$6CCL{CXD6E*IM?@`XAPs8lafy$aHXAS
zTM$K`+`mVoLBe>Lvq18I;PJ*SN|oMEaUCr;wQLN~(<7aE*GPcLT=wMtos9_5RGN{&
zrgZ_1wc4U*y9aj*SGzt>o@MLnSnUZPLy=>sRQ@wzY*E$uB5U9-gCQ6zP~CVdo)k?B
zITNC3d~pMD!UZYp>G>WO86l<YBV``voToxvG=jEr0<YJ_t_(W7^cr}IdJQ~<uy`5B
z>i3{ale*k8ki`zgs#gYy6H|tweZqTjo&Lalk|jD|vGc739YZX2p06D3tO~<Yd~9#T
zlz66BV5}V?-Zan)0n5h|A8LRQIvOVto*uN~BGVO5nEovsA9?~5jr;M*<$}>D2@eC~
zGGFRr;pT5nUarHL>)MTq`2L|KjKmHrSIN~I-t#Sa3A)hpPf1W5vw^-Na=U?z7GPcz
zKW8H?HU%9_$zifs&y|M@2tGq$u1>DG*bsEe$QEfDQ`Q5m%`#zT<j+#&0#IBRFNZO6
z*#kbli^#@#LD|Y)rB3u#27mtR>$E71sWCgJ);9I^C8ttnK*5MQ{9n|%>P8vJZzY`h
zPitMl?n(4?-<wG--4}~?x)*=i!fonzWLv-k%tF+eR13``msv5)0LLUp>zZ})dHlXh
z<S?)|_r0WJ4bP$U3AqwZU#|&+i_UWYZ@78V!<cx)=U5*>@UUPv=8*1nMq|w9=J#{P
zAv-R%L!rXW4ou*FVNq`;dufk|rT#H1z<$6wui7n+;Z5jd$|xsB?~ws5fzYB4Y!V4A
zN5G#Kg7=d<M!O!ZOrXF`s^iY#S|m$y;I7s*sXu!Ye(_R5$!>6Pd~3ZIs7Z@5;6i6y
zT#dC^1zhbmmP6L6Y@Z_d4UowbrL>wvP<)NCE$k<TJXMlBS_-5#>}Z}1v;J1UBTIz$
z1#1|Ao-l5==h+NN45G)Nr2__r=wPsI$8JqM3qVL9CG|08`u9^@t3x3Yxe;XFisU56
z>|Q$KWc&G*Yn(%d?p%Jwy9@x%M?_ZzQaZ_?Iol$2_X(;A`UHXDkaaR8>P(*#S;os0
zJiIN=W039alA(<wd1HmQh$S(S`~JaC;(H8-E`wVnsAWly%D^0Tbjg8xBraT`sarv}
zalgg(T}yNT^u4t+U~bYjHa_NhLCP-GbKMVkMUM*Z-e=>Ip_MHAUfXW;<Xw2^rA}9A
zVNQQ07Sr#73l<cszn@%-zL(S@%RUo2FtHV5o8ol^lIn6W=D%dO+eE|sN)M}WH1qFt
zq-2C^b4;*3p|T!d7&B?^pkQzFZxR-2-C#)43)vb6iIW_g(i>N}n{T5mAObum+;e;N
zw>9*dep{b@=c&ZTEz;xN73mTA1$}-p->ge4FOSMm>Wc_GUOv;&yme99zUW66clA9Y
z{M`AgUmpNl9eYBTTU+@S2ts3o0}tchia`q&2tqka3PRmHvP$O5nkuM?ChLLmK;O}I
zurE6Zk7Gc;0|N=i*<+BUTj#vfK@w72C9~NkZ3^aPBt~O=bxl!ag*OJCy{&y+7ta`{
z{VWLm_o#M&bDwHLAA5m_32{MR8U1Tj@tu5TU7`=&wxh>b2Q2<qb}RpZAap`o+K+~~
zMi<IG{={i*ZEf!@_h`HiMiLb->;CMtFq#?Y0k_S$vtO@XxNH`6G(0|ZoL_y(AW;As
zq{+L&>|mfE%I&ns(?277Lc5YeK69mVK!QxyN_XO|Mv)*;1vUHxwAW9Ir~vz+7M2Mz
zsSgo@IFOWSsPJ|v#B9Y4!l2mI0TbN1P(_(Rro7Fga9dx(+^bjSR@+Q^+#PX7;po{v
z`dxfUzxZiNe1Ts3AaXsBY0nI$fzkHp9b};e>n`TLd*0;&l=pfRj>!onC}62J?71Zo
zb}(CNes=ay_i~nwk!tmS<QVe8Uw-|_g{#&1+^S{3EV~AHD_4Qb3Uz(RW^A%V(D#Ul
zebUm3NM?lKd7?iS<y3b$;waaG4pvlh#`MA~VQcL7z-$wM!;3*?kvL6IXW!vq`O@iZ
zXn(uqR9Z-7S%pEF;qbFfaBW-XP#r}YW2B5xcOXN2t+Mb2@7b%BjJhC4N1Sd-N^$C6
zV<3a8cI#_mgBAO0tyj|j=kAVsO&do-IWWWdIuM)xyo|eJ&6N7qox(2$kCdqCPu=&t
z7wV%$x9*O+_X`37CMSErTqBjrU%86Vt_@>}4s|1%4g}a$vR*4}#;QxIjnfGoW8P?J
z<3ooYAB3!Ua-MpH>^zo7Y9faN=_CtCCy5uNX(U-57+pt(Kj>g~+74uA*`&|C`F#&Q
zY=Rkc4VY>`(f6Ym_|F9csecIHbihiua^(@rk0MO)RnH^k3d7i)Awq2pQzy+pxPpTp
zv!9jDoB!)9ItS|Dn>PwCPfx}2%E|B5`ho9>i|J1#>LqvIrI|JG8qFq%8UD1{3)?li
zALwEK`pwl6En`!L<aHi~1mJp+*xZ(u)Pp9r*jWH^uo+7;l7!_V_t_6M2W6*Jv1t1s
z6Ub7ylb+}*>PvE`jLmSMm4!$u>eJlI38TD`8Z0J^x8sE0cC29iblk9;_P~pKaV<v@
zVHX*7>$)G|FwsE@v8~oSbt6K9n&^l*4y`O?Tt0|EO10UPCq+6{+PH@Du_SWwd}pc*
zG`yHf@QonsgW)@=!XX1af5>v!WOsF{;tpNReELFta5kCUULe~px>?r$+>Vy70>iHq
z>fcEXVgE^~VSx96=)r$aYM8i;_2WCKA@NO{Q5_z6y>4g-S1`9cQjWJ`r3%ML(9*rF
zy80u%z`L)qQLQ$7KMan%^y^Kd7jLOX)mVP|eZa3#Yf+6E?HZp$#-5HCq83@}6oA~$
zbxmd4dMs_SmfRuw)3&adxIj+{ue_7*scU~x_rZIpT=u^Mm3zDU!I`UxL&4YQzQn{r
zKZ^b))c>cX@h}K;jNFNpHsM&qg25G$n#53h(b4{*9Y~}Z3z@&5`BRC0(fn~@+umvZ
zvL#yXDtRT&vVgD4US=Bg?_MkX8#T4H${gCneq@hv!oE|GkD470l1d4^bP2MEYM=D-
zAQ7ziH&FYE1)QHa)|<Vdh~R5OeylGYie6IuF2UTPe<5cXwd^xxtq<jmf8IfI)wUJu
zLt%wr2d{G*$XdBcBym2nr!3@F#<o*+o$fJiI>Z0aD6%~y_5$@*sw>sk6DqnI^Ew_l
z0`+DzlKxhrw-_on|4yRkj>L0;mqhM#;O4sv3+s#CjXeWDsz*6LA{MhV-r<b$-){F=
z;*3B8S9QF<bECfjR|~b*W-Pg+jBG?n?E+;X_2UagP~3d3IJ@JnT~Qg&1+~wkCokKx
zyMj}v6(GOi)C9BR#D<H;427NE-AG{16FSTfW$QCZnRcVW3^!Lx3a}mmyu4>?Wb2aF
zT4xMwzfrf%?{(v2<favNf|X{_Ye|oVu2XO7c39fluZhd!y8a3MBJcZORd%#~c}7Q3
znZ$%Oi(JMsQV2Y_z$pAhul2GTFmrW0zE4^VvfQN3fY<5mU(!TjO+32eX})B3R=WC<
z1J%(vVfX*NK8|Muwy1T`upd+q#2)C3cfSk8gYLmtm-NO8Je6}*g<2ux4yjoYFkM^P
zJo2AF<(4pyv^FzI(b6seA9NY0oQ}GiphLKxvY_%QQE!v@E<@Wpw{Kt|koc>Q<m7+R
zM{*SSNS0lMEa@XDh=Zx#`$*Pq9!vh%#NIq;$nPrjhO@T)CDJL#^gzMKchWmajL;1n
zr`whG6M;fMmPg`1;vHR>I4wUcHhhvKkc0T#os;AL&8a2pKfU;EYW2l7m8R*!>?2eS
zXDnHoL4%K5`>upubJ2k&oiG&b1qofVOG-0>fjwGKP&p`li)1?BuuYTQk!K)7ycY5h
zFhzuQv$Dh)Nq!ul1Lo<{I_`?Tt+u;j!@izvWtT@v9wZyGu403)*(BPBOl(Xr^dL;R
zxxNa`69zj@L$|ty_3)T`FJ0-=t?NoUl|xR<LRo!Va99NWA!=8L=VNIRSs^x80pum?
z<ObJ}V7lFHE-B7hqf=yYMK=M!^`v*v+dHbiyJrdod)kDFrZQ?I!D@z~9HwxJkcu-=
z(~!znD!pa4?t0ZrpS^R7u^FLiq+H2zTu<}&nyuUpnq%zaMMyc+@<=(-Omf3n!i)u5
z4>dHoHYzOTAYx_!NocyR1I)o-Lt}KX_a<>L0A@B%??k0wl2tr3eIxUemwAhka<uk_
z#ORu|jYQ0<KGK9oVHKPeL~=d!-di$p_o!jxNZnCrrWj1-L{ZZ*qAal#?Li`mK^nbz
z-WKUf#N(&!RJ(AzWgdj7*#NO1hCfjIt(|Rku#=Mc$?ewOmk}>Ca(LQ{s!LCGX6Lya
zQ7(FwCoF;h!gR7hVut~30LmP@^$6AdNXqEkhsQQJoSESHK&`l7Ta?g3d87l(Ct3A|
zqnp#KsO9gxC!1o!aP(pvLRK?L^hngJE+b=@6f$aUhO#+JezgKJ)mOGHGBkCQE<SC~
z@W6n{A8K~KUU$_lQcI<)gpj@8K2IL`3D2Yvu<Pa5p^Xu-Z$lJ*S!yAWC+t!Y#lhMM
z^1T*uqIJM?{hS`Y*SOS>3LO@^N^jLwyRvABLH=B%2b0|Ct$3Y8kCdpvC;++h7I7;3
zz~YwFLZ1JW48%NumFA`T!g-<Hz+R)SwwFT^x~~E`WVE_!x@E(gd!&^PIV&q3&jK^8
zd)0T1OkwTXgbtojeU;snrPWT|9m%@R!B0H1oMFRl9$~;jX0hDqNL>Z8tmkA?0fJJ0
zJ_Jy%hmrd@6}ol?(pKGb@y!ueS2%rUu!r7wSx>^&$J<+<Oqm<{$6l1Gw`1Jv%<Y`|
z{`m={f3Oix&;q}mqyqzXCiw*gg0Y(l8}MnmiOv4c6-&mTEkJ}Ie+S;1@oZT<FZovn
z0}E=T|Bf@|C~&59`Nf&?z*SZ)_2G5%WE_D$<R2g^D&Te=x~>PbT~G-%d1MQ(g`4o5
zD=!U30|+JQ1Kgi7>?ngn=#3(6N>75%`GO5FCCgzGtjg8RY*sx*a&~^Hn6l70vk;UP
zAER>*)xCy?i-B?_htx64<M^vZdGRkl!tbferiz_UiKy$@Yc-PRwJTfYAFd4cEYV$Y
zN1rD_4%HnVD}B_lIe;Z8E-!INH@t9FnMc8G!n1w*o!R-GDNefR88CnkB;6s2O;8);
zuN#5$J;Q`$LxQtRo+i;{ot!RLSr&Thoc*OF^Ym1WI4I+|zajC0zaE0PH*n2mglx_|
z&7B?lFIZGsXNdVNP*e1U2`~n?Fc^IXH)-oN;Tjw|bjTkLYxs1bUAO3N(Pw|G&TqcA
zUQ88<R38%;lg1?<qBQDxx`Qs<?yCwXs=!cmyw&5N`%c@+pWrJBX<f0Q__69^q^!#J
zF@ZZ+9YLV+{G8e>BO7YQ7%CG!2J9Jv58-NCy4w!A68hnPsp+uw$#T?$QKV*LFzy3G
z;!;kPmoKgA*3)^_;P`mpQe1MeJxf*&`C+vt1#W+M)QC|>4vLl2E!{4BU|%1N{?hj9
zu0oB@fG_S{q2w`=n`HE>Wlk<m#n}#t0{7yk%j#m63taGy=fNy(=PPZ<)lt*Kk_4?S
z(EnUcjH-^~kH-%r+f1eWH+gb<aNnMFujs-1=u%yw{sAEfM^p`I<%)qjja2-Q$jFLo
zh^Jr9tbE(2`!xjlI0tb2HG$SoId;>DDp!sO@bvoAQJyCvGSaZxv&B_aV*-ybli0R?
z=un}ScEau@zx&AR>V6e3VKH;%_u%}z_+%O8icx$KARVrH<#pvQ@N)fOvJ?24_I-nW
zL@*4@5+DAeil;B<-)9~VxG+59rPG{i;h@p$*I^<Z2UJ$BEsh0zeLr*$b8r$_%vR76
zZMOi%t<@x3PcmbcGv_MIXq3^lokEBJ=sG=nE-D`3)O@mGe~jZy%qgqHzNCT1&6y<>
zzrbuQxS2kWI(IYK%hR-jmBmDEAc$zG$LUgAJ^7Q%fgXi1{tCK7mVRa#eF(WGbc~~m
zB3wv6&&vlpowDzyIfm9I(0*Jeu^BSIblnuFrS5e~NB+Q~=j7z%mPe6590yhR{>6iS
zWvSka7@>RP5dghB<_QzGO~}MtWUSOPN}lbcao*p4nX8=NugwobIfOwf9M^|kueCO7
zHu!trO9t_;f(~6?IS0W44k6nOh{D04yRL1hd!=wJ;q}Rb!l42(<ow%aisWb2j0Nv!
z)y%|={}-udW`S-<(mfkBTDS<Pwr2pg)>W}nwbLQ?K?P8hzxiF_FW2+po1O2tO0II`
z{jU<y{6XdUyM#SUzlc|Ba4@&%iO-c7&qaTMUwye|{BzZChsGt<7yY@IB^I~}yES!m
zBnaC>(lB*H1CFle#Da;GkaSvCRY!MMyJN<Nrb4)-)a$wlCZaprFs%q@;ZUL~)Up)#
zY-=L0Wt2fQA>{42fb;(qS&jNxvHPnj+dL*0sHtYFJlzJQ(ys**272Tb$E+3y#b4TB
z12&pZ1FEaKy34_P2jX3e;m+ON4wZB3v_x17k>|YG3R9)%*v4F4=QAR|Ta6H4G*PN1
z&jsg^3INl8IJ-oAjY0;dCh*apNJhr+`cB}WS!{zW<4sZ=a%^KNNT>%@f;Kl-V`csE
z0EAfT@4Y>8P!knzvS#ocXSf;gbXOrs2gi_QYtRs$G(9Q0zSA2sm=x%sg`TCy{v(gf
zXE-hwv704+at&dBIYZkyRK88T&eC!=01gu`?~w`Cp(;V67$6W{&e%rAEqc=|E%{*e
z_4|f0P>M8dXD<4aUw`DES{2}HYGMLB*P^BWb(2h>pzsF@ivPSxW*Fefn40!4n_Cy!
zYW8tgzVd+29CX337Ln?<@cT5C(<%iq=_t_urvDkT<dHhB`Se72$!1mZ$iqPlN-cr(
z2WIc%Hzi&=W7+!(%SuW!V$noKAZswOukTE#baR;11#RqwiShXoxbq$tv{0XUx9@C3
z-WwX(P=ZOJoY2e^GbRrZgx{eh$jM9}FcQRZ^-1@NZrfrz=mwj<3;TPMOyygk?GKjT
zq)~BT$rz9W6EFue%Dgo)4Vj#nH;I|?O~CVf?9LOK$3Hg7Tu>4?hA+B=7HYLEKuMr}
zR5Z9mHTmNamqqjSnvHr=An`{ec>#X)@^7DdYJq+6zgLhGtzPnx<wLtE8>1FDc6#wN
z{b(VB7(fSiyvf7RCC^di+5;fZY#1a&t;c4^9Igqq76bcO>?8fn0)0+dwQr`PPZ-+o
zP|40SdhObsbFi;0HT~sqaELdwx5pA*l9Uybk=y|9*qSP)FqCbmf>XlnoLW*bY^3c~
zhtLHlDI<$fz1py>8^h0D4OZSryo<p`TibVY>d*!d+@7!U6sK6Vi6qAk8mV$LIK<H9
zcG8^$kmpx_#G~jZ6>g=qqR{B$#K#>~c>)Kr3Hi^kB0FH4DW{_dQ=|dU6jT!nhg3=d
zU#aWPa_x~Ve1EXo1D4qCw?-~ZNcG}px11YoO5KzSYBPf;yd|HG;FpVA@Du-~Ewv@h
z0oEl+v2AroZkBoy?Z9jhlo22PLnvKRY#58ov>i(7`)5?T-;_GPI$Zvy)cH-R^P5uV
zKcdue*E`Mng$3}hdr|(T+WAej^P6htH`UH>s-6ECAnZ5Q&Ofn&{7tp<n`-Ab)y}^{
zwfar9<5K3j5!b=m=dm6(Lhat)M2?=ZwS9q@^Rb`{0q%V&t&k~rnuyh(?CW=&{7tp<
zn`-Ab)y{9KonNdGepBtdpRCmUOY6M9sdj#uL;a@O`Q=G08j$~{+FA8al<dE$c77S$
z)%^chwe#<*Z{^*c0B;3WWE`ji26|&jB{|(!@Uk)^$ysCv3UiQHTpb(OZ+9N<X4v>C
z3om`K)j(`CmQV7BhWoV2rMWpC8IBk71Pu~I1F)L0>*;SNdTx*5n;Vq1q!G7wV7b|K
zM7S}9np+B28hrTSS$FzSyz6IWKDLExvp86@d)<F=I%XUw*QOfku8&}uX+79b8RJwJ
zB1BYm2|g}#R&-)E)ss$bI1?L+xxtK28LZP3yBACEB*EqkuZjWB$<>9bmIZ_fNge;8
zjhP*Hvpu3jN+leOC#i-sWV1B`xw76LgL~Z4@)_e^VwcBiskz9%Jfy@cJ<Y`4r-(YG
zp&?=g?kmuZ6@_l&<%hY>>2r--xOl_3<aq0t*ORWdxtNKe&g5)(U94;_w4OWd(>Cr2
z2`;=vb4JG4nAe^>2{+LiiZe;+)OZO9{g#^6uXsLpMyt(s&$y@GdZ`_GW?0}l+}t7K
z8SyAX(`LHpkWl$*^A3}`<A^gX)V^jMf;D^rLGvZvF@O@@)M>2d7R}Q0#JID0Sx{9$
zOacGsavqTXvwb2Ib)uj8!eI@8b(NvWYoX-){;q$hrdoUhae=YIlH+wXh*<jfW#iDy
zIfhI3oBZBr`Pc~cN`W}-i3b7ll{ayF|Mv;e_>aP)56wKIJv|H8b)IaqNR7xGKiHo~
zg6?*WZQIp`=*bj%es{+G(wka6tLcZ8f3dB?>k%9i7*g5#c3H4&?MF~VTq^BKpVVoM
zsh!|t3EU25f!+gUalYIHjq!m(FJZr(9ZYfkq_C<81z_SBV3EuMJL}M<i^(v6%7_gQ
zpP3l{yn7i{oR?Zg>Q%L8^cOje*{W`}^nY?0zq%K|i}iHa^crw(IEEg`X6-ZmB9665
zGdH;zF`2O9g0$85U><zzc?;&C6|O>H(N}d&l6Q>)uVQ(SZjicImQ*aTyO__|j|d5s
z>Y>yIk!qkyDXlM~X;=U!Uz1UfY6wE5z^+))HiQeJurF`SSRHP7sV?o7y9KXh-F2A#
zebUJ0yqLnFFsrxvC?w;u^~GM3yk6V+oBzN9^7T}HflAw_BWJ6U{Sk1-DC`9b^Z+~z
zh<viBlmDq5k$Y?LXCls>8_>8k6n~M7#^xC9+}oYNxLfs&@xzuP6q!JcG(}GrmlX~+
z_W9A_I}IBfnyz~jC7(iqN}y!CC~_!_<iIV<G0loGOsZBpL=p@-IApF*BP0^vGKeIw
zGSVv}XyHD#OtGM{(3}5i?LITDOx@pG>1gjc(<b<m-sO$+K_U6OUVr-4s8cHVtb?bK
z$MQV=g=4fnY(`=wMYe-^ej*XuVk>+RC&cJ9odh%?bhvMTX_45+7mB!Ka`ilL1mlj4
zNhJ>^mvIEkRG*N{xsOa24przoFVTyX1)kQzTFsuoh{>+vcBQg!zeYo*jdZmpaJVji
z<k1!2bdR*TmebW2F3VTgCHN#lvA9y8T&pN+HXmzwk~7^c8`GQ2V|citvE}WQtx#Mr
zo9P5Vnip6OrM6<m{->R!;wa!FcbAv%;d-&@c+=Pk+W_ycs=g2mm|V4cJK~4iCGkJN
zACo54kvo$HJs`%@KFD<NEo^AAJI@K;a3R<=ee_dk<Qivm^2h_^BM9_kC<|Z=if{Oy
z&xf8TuTC$fkMzmfb~oGd-A6k+5n%5ZtS**9T?bw-a}z&RZ?-<gUu#+r{g<f81Koq(
zx0lHIwy4RLtqJu8G)E(_xj6r3{ANiD*{=Fefe5kp)A<+eLkYcx;rHEnrl^ClYbx1n
zaZyxyrTtJIiM;s(ES@Kz!beN0oCI}EWOz6i5OAVQO=I*h0GdQ*+?7Ue<=#r){H>F~
zeVUwhK8V7<yz#o5^|p_!b_UeAcSn;<2M2b4k{HWLLxrxlcA0kI8avECqmpboN?V8}
zjL}yq)sdmBkbQ;bY<^Catv!=*q7&(r2t|w7PfkKma*C~9NU#pok!PT{=JLW>ShTLl
zGgQ-k*jnR`zbZfmzEkV_e;;?*W6=ru^+(%Pt$@*Y{xOhchwaq;;LhYjNaM+a%$>U}
z;ICYPcT!P5jyyU4$N(5Dr=jMbzj2ujKbq=CU(d}>pRcDy3T#P56!vJ>@H2QxXO@ij
z@fmW1tCUiblW|;%jYTox9YxAK<NKo<zw<lhSYa@87=TKq8$!DA(UY%`B<*X(P=>RV
zuRki2Qf9$#MFKSpW`_k;ntBmtAFR(Bj+TWgR7Fuw%g>v7y?XfdC!6*<S?{<%60<E}
zCb}e}bn~`DoRw8q4Z6*QlM(gpRt`I_d}Uv=ro#U44?hs{k9*7^C;tH0yxDzo&#3*;
z;nBy$bXLa5)?aZr#46vcCV2<&;hIfbMsQ=X1-yF}GDFh^BYBfJp!n8VLHX#{XZ-8q
z)ZP=Q?MhV2hee_Wha$Yo&|95v4~jy^Qy+zGzAwm9o|gTfADWk@|CZm7Xs5Ajw2QWy
zs*etvjr9*MF7iiq4owGoZV2xbP0zX7R!P~qO?`4Sq$4BUt|-bI=~3C4rjHq{>vHjh
zLT4x*dBWJ)8iW(uyxx@#;B5E&c4rzOnXA)GFK%uRsq1j1`)@9nwI{k>wMFw-DC@8A
zml($@ZRf7-6`ic+P#@`{LpkAL@FD)JRTI0-1v#X@>SC|3FfwpHlsebmE>7?EeY%XH
zyouU&)ueGTL~3A%`j{Cm1CfdX@vHrY^gMOMR3BS4p7zMAE5Nw0zvmHFBHLlBCz3Xo
z=j#?-gyOC!dUH(?vmpN%t(dOslW`nom3`hKNm9D8aj;c*bijqaYnXee$Uqe106ZM0
zdnUW<66_gSP{~<I{G*8Sw&C^AWmX2nFg;cH$KAU<TVa8kxd=GN?ri2Px5(q_E>Xmp
zSo!sb@aoW-0B_=Z$HoA0QSXQvhU5RYFr4jC5hCP1S5;>obJReuFLXKFnB!(3_jkPe
zH@LA~AkGh(ErT07GzBpOfI0*n5E&G0+<T>6m85k&tw$A&>+xf`A;~GQ;B2^36jp%c
zjp@rJ4V$?KT<4OJ2brZ}AB>Kqt*A;dO#LQccBtxF)s*1Rc}Q3BlUj1s1#Usi8(?SI
z6)ll9%_yG{+4HDq=*pc|Z?8up98&*GTWvUYCmFfvgCYa+$kc-|{UL!5)cT%>ht=hm
z*X>v@Wp~41jhm;tD$uUtPM4wmUvPcWVd&GF5sj1YSUANok|SZ1HaCB|^g)0d+gr3q
zySM;^a{Qh8Y5c%!3Hr6vuE|#KP`CUFYF)^E)NhdeswiE(stkszNjke;mP0rkm<6<G
z>l^ye^0DHQadM|Wx<eFXLFd#a!W2_&zVm&Z8<T)<Mp<q_N;G#flN^oN;Y++-F21V)
zeLG2v@+7dd(U%<8>|S4%AH;OQVZ2d)N`GgmSjFT-X8{xrAy@)XIM~97N%Pr7D4h8P
z6b>~)Yr#@6V8K#x=-JvTmi=_>32v@Ks*+`SU)+9Vy2z-&+S<BWq1(0OoxEq@l=?87
zg74K@SU1vAhxCNN?Mp^A$HD#<|4Qfiki+sFL)bNhmYp4~?u@(fj%Z((M-)ncmNR~G
zNOFFKv+Q|qK?KVVJ{<TsYviow7oyk4XDc}!-ryj-p6sN9Ks}5+)8}&*O%NlG@lQ0c
z?Q{j45{PrtOrUu!vLWGSqDFcv@EPk^myMK~qskJN($swXT_nhmpM;$ak-z2w*3Fcp
zJ}*XYIPqk^PRNCxEZ5vjyE@Dt`;XIEql0z7<M^P-DRr)HFR(+1Qw1yYmmuAP@0^^X
z#*YKz_j%G|x`Ts*<#gYP&_t|4CLh=F8d(&#acZbX<*)uWe|vJ^Ukywd=v6_6bZwu8
zH2WST?M&!9Ezw5rNspbN+|Nd(2U)*RusO9MI=I@-Y??>4&(uV=FL$7zAG`0u@Yjc-
z2=4SW?Rn?57E-Z>3+kCcpYXmH|6vuJ&I-V_yzwMxmcNDFfo?Z>OL<ibHaAnvOCzlt
zK7HJ{-TSSf^n)X&aO%CfLskg#oJX+>ZF7Ptg>`qGY48_#SY61AZk#=e%bhN}Ufbkh
zSuJkKkMKs0!t?ZJzdW4S>ngp$W!m}&`1w_(IW3%u#R0`}i~2o!@Hb2LE7b>S#WG9w
zS894SGy&mw@_M7uzhF%mn-;&}2$ODBAQtQ$4JCxg3-iT{YiE<wC&Og*u+|?OQfIdq
zB>1sjX$9>|WZXv-mARJ2+__c+r|53_4tC7(UX0^<E!1>v3q|tXPNs#Q+h-TuJoAX3
zOFxYh{~y+b$NxoZ!s^FGJ;0i<s56VHacSCS$?Vo_6-}Ms(S%<(FT6dDn(ByjF?hiT
zeBnmATC>v~L5vN@$}VbYBbt`L;CR|D!r)|$u>Q_M5asElWT|3U!!)RAEGHX|=58cq
zW{in3lJ(Lt6g@UJ{KL||bQ#(|SWnbPI}Va!#2;Lx+28f7zSW3#b8B0>*HkOOI^UFt
zxB^Y?bbaOKp|kRiXSE&lr2?jmz3Ovzv43E3u}AS*C7a)IrAgLxN1uzP85{{CaBXl_
ztQ^~>f&!vU$)Q$TXD{jf4&JN`kera^8!s#@Dx5p4K1rW7eYcd|me$sD0HWQviy!%S
z6r3Oao`O@<bIDLdUq4^kZeuZjeys3_M*tUTp)00<3RoLkZ)?O1CGa@DLw>e6|F`t}
zy;T@VIPk!5h&-TckOX(FD=>4?Tjgl=S>T1XAX1=^4_yBGO#HoxVEYql^X*()L7c$6
zDTC!<{odmbzA7?wA}_)EmA}AB_5d{*D}JcF+bGLLICF<c$#<&hQam{9-T%3~jX!;=
zz&{f>p@gCQ=<gvo=%4-eRA1I9PlHrr4?<SKc#`6MX)`P65h6X!kVBxXu@C3Jt^xmF
z0`wPho`Om;ykr-<9`hwPiR`ytGu@_b)OGmF*xN1vEKab!R#jh?R4ZvMGy`Bl8gC}T
z68Ex--SWois|&wz(5X!Q6AF&^y2^RwY3!^xf$T6q?5Sz{@Y(rTLy6Q@qkl7aIj;7_
zZ-9Qy_y#6?;gCgKo8RCg-~Xt|kYixmWNlrboI;#p!k4*FR;^Ob-tF%0o<uzOQn>B*
zbf2LAu;(HFYB=KJ(Z6Bfkkkwu(lQJjDPdI>e&)@aB!jG2m_MTFMaC{`yM(^;xWW!Q
zSo^n;5Ht3zO4*cyyfq<tAYm*QlIiqBc)!>g|1tLl3I?5X>e!s1izQGfA!bvIY=k|l
zE3?Hn@%a3CG=V!%cf8*R?)MdNFFEITo#G$Dm`+$_oy^#ewNWsJjCyT-b^9ZjcU|Eo
zH7Nrm#+BF!+@_Gw_4U|1@e!JjJ~utp$5^b|nc$NtXhS74dZ5m^N@=08Ss5zI3OI3s
zNJ9iJ<3;#yUn#g%D3o>e-FA{X^l1N`OWm;}rPGUC>g0PhxWJU@d`9DOPRKEb#)E(7
zQAZ9}yiVA06e?)Z;1;XMmCpjQDyyX4{m#^0wEdgPi;@i3U$lnZluMe_f#`0gfm1xT
z7iQa%D~4_Qu(Ep|ba$OS#K|$1U+mXIuN&($<Q+vuwiCTt!>*t&6dlPCSELK3bc0`e
zB!l;;ASo$nn%J;&xozJ!>g?^!-w<%L)F&iiX#x&0aMl0A-kXOtdF>6mDk@l!fVLu2
z0;QF{uWpe>W|F8VwA&(WZ50FwkeXD(j4~vIh*-fg#Mb@F5GG|;v;;zoh!g@SL$D+S
z3WRww41s_UAR&Y#oRtnr_lJA$?yuiD*EvW3dM-O$@LcOz>$iTxee-frD0>7+%r%X2
z6!e2xjKE@?%hY!dXQ(-$oBAi&1FG{%VJVgyuy46JqgAhLQrKogUz&ZakNP4d+&!f<
z*BIf@K(OIU(`RzG7}+}+Mbyn>09zQy5_uo)^{)h{X*n%U_1OQ3rp2SJBeQSl&%HmH
zzUiP_%(_O`XKznBQHXQ<IZu;Q)|-kPDCafPO7D+_gN*AWecOtRnmbRh>CCB>$L^h+
zVe1LXOUi*>_czVl8K9X%W{c|q42ueYj~}dg1Pvvs58_0mi|flzP16*-5{-j<f3@1K
zx)OrNT^o2g2*>E9xxb+g%EptE9N$~G&<1m(+bDn1F<Nmg6<KuZlc(g*Fd9f3g|OB}
zGj?+7Ls-X73Z#mUmW&)OY3&Wv5n)bnlDO8)`}|wbC*`vYoVN+no+i1aA}VxAjTq8Q
z9n=bD4coh$7;?FyM)Cxj9(_g-PjiS9TLC-V&~2|yW`AAOy6rp<(blgG(8&7~?JlEW
zZE?H53-DL%;^P$owkEjxRF7Qia&A)(0N|XSmg^<tULH`;5L+2zb<LKhS?Y6{aB2TL
zYf@f9j;JqzM}CJM(@-a9*1rNh)~9FZNGwMl%+seH;ysva+6%_Lro?y1r_u6?iR#@h
z6%Y-VQVF>&GKCgFY`9h%gj6)rY31$bEUre0FcxVz|Cyd1VdAZVz9{0;?j7#2*v*R;
zDEyUZ1iY#Xu|sM-Ah~PX`dpdP7EAAT?%yNSXtv?r;0?d~RmJ3o!<#-T$lm%5g$09j
ziO}!FQ3%UgYOUH($(Aif<A)WO+7FeO#T=QB(j*tv^l@SXu=xFS##HGinp6N1aM*~d
zixJ)fhu-`R(P%OcoXmvqaKZn$yyDL6WDg<~rzH#FOUv<4p89otob~P+T7V(QM?VL*
z#v4~M#WM!0`8Vjb_%}Yk@^8>T^KYo5yQK*Nyc?mOoa3i$Be;8Pn+St>WO3E{c8-TX
z=T=IFyw0@YlUzq#%6=nJrNQ&%ge@~hW%6*nTelW#OQdi2+#4V6%t(5+=S`)n#ON3Q
zS)tm0Mt|Wy!<H{=$=<(CLix+~gZGe3F9(0~KO3iI`*pFCCnCAlz5V5lW%3*B%-m*q
z^&qQ4mbzm03RviWu>Arv0GZkWf$tl{KXf4(-kvCmkXqGbH(_g^=dBo`HzW8{df{K9
zsk5GK6)9h`2UqfAFd$S>XxY?tM-iX&Q!#@SCz(esJinH58qc$Hm>;h7P;!qZOBj2`
z&Ir5()pEo6R`@mOp0T0ZK3UfCi_#LGxy7}VWwGwnJ-|Ua4DdJUqtf3g%jm0>Wjr{t
zy0TJU0c;Yln3^BbQcukX1qZu(z`+qcPu|VQel8Kso7<grU3K@7d4Pyc=JDy$8WEjt
z+@QtmQwyHEPi2%?5~aj!UWszaJ%H%7sh{E5JZsxi6?_86lRuhLp;shF*_jSb2M&7d
zz+~YA<c2e`62BB0U|3IEbv{=LHOf{@Ob#nl1TL$Akn@+2C1>)S`5d8oSyJ4^K%91(
z#ccm3K0f@t^=+n>ru;4w1xiMY^1s$*(^RySLs>2`kQtzw&cr@DsXYBV`VI1LzoXw6
zj6voIP{q?>G*l$0-A|V=@^QQXTI|Ttla9+g?9W@yKhcP_sWoC?JD#XMYVq<NC8)P!
z=a2WUnWKnu_XRVi!03td=Dl!z-63Zh7{#m3V=pXxX1;KSiPK%4*Iq8^7Et!@$RCW&
zifw;@jGisKBbi=$NH>CAc;WgQIL+*P3BRe91NaTI@A>_)&RmaYc1)>f&{Fz0)-yz|
zhH62>$@GH$+Xr=i+@v=jW_AS;u`yS9ECZvo+c0~3>;R;^k&=@o14X9r=CDGx&!Dwt
z#6qHdqX=zG$`*UpXUT|Y66e_7cm%QsS3c1Kr%`}4z>orswvPwDj6!qTt#?g6F_`N<
zUbEuU2FQjhZ>|Dx8DCLnGG9?e7#itj;w&uDIlu*(V1VN0`Q`ZKS}TX7U+}`bdOzbO
z3xm-P+(l7l6`s_1G-&=l&bPpw+U>DGTigT-JCCs$&y1JI*ZDo9M%mi%EfN^QM#`5K
zSK~Y&Mo$8omBxj1@rV!R%ni|i|4&5Cee0o(NhOQ%TUs5u9{tVg@1b-`be||GR&tTm
zb4~AUf=E<5@W?X=7#5K4Jq6W;a86iKy?%efGupLnFf=vKHE|Tm`I;Cg6qi*ogyPZl
z8_Llf*)#Bm8%(i#Rc7Wxb!hXU_>|KN_O7w|{-l%o;L7T|_^-=KacD~)`0lX9D-jL#
zm*W~pR|d|-UR%eo=+#`u(TZ4Ri2dGM@M^=SSmKv^&h%2<v>lF+`CW*uNKn8vnc`cp
zGZU<r(#5zER}Pzy!rUA?G8#KpgVhnGyTb6PqTPkDrR6ph5T$<@t2ON3s2W{2<jTCM
z-vG<juj8ThJPr+0VwE3{={|&g%nG5+EZzN%Qpy;n3^+}4c+MM|6G&XYSjh;3zqbq!
zM!sS~k@9>@%5ml1NQbb{eWKb!{e_<7P!dTw&E2-|<=y$^N28Zm!%!dBjNjE$bkx`F
zgjdv4YO3>Dgp1PA>#|OD-r?Uz-<<lF=$kv~|6sD(8)?7byl8r>#_URbh?UNN+nM=d
zic(5d#jd4srhNA1NvHhiE;xshyR<R!_~Wa)g59v20o%rOxo}ha{+p%ct)76oV~evW
zh*%igANyH_w`_a7Zy6G9Ppj_<f1ioU7XO;}{)V#qWni~@Aw;Q#8&SU(ZX8mtp}e()
z8?f{mfKiOG)>7GnI9UGOxkm-`%sXEa8J=x$H?*~=Blw}C*-h2?Oy#xDll@#cyq-S!
z#~OYVSn0{!4&Ho9)9$*TAjg%YVTCBen;M*bts^LFykxhE)@nX?3u!Ffgu*Z~2BX2@
zCVdleC8}I<ADSGEsI20|hBRM-X{@WUN=sR4n1JuASPOhZ2jCm)e+IrG+Y10+#Mx}k
zm*MIHmW8YIki+p87|f`5)G^L>-{IBo?6>7Ll&Vfpk=GBeq^tqHxod-#YQ@T0a7C65
zVM}{7g&p5e<ARFtI*J7b5@4DUqP=C6buGPaI?6`YbMbI;qNJO8%+clw%c=1kl2<u)
z9|=F4+JQzm)B#aBV#r-*!9)BhG&KgA*>r31ZP|U7g20<b0Sh&n?_BP;L){lo-V^l5
zMbWfd6qW4LBm?s1%cxS_DJ>gbVeS$iejA<^9mBb_tzSM&qXeN+Ss=}UM$fS_#r313
z9c2LW{VIT+xf)<MoVLdkKG@fnRY{Eek4|u4gi?Q2;QS5;wf}?Y2Z(-~kv1N;B+{q?
zxr~<=DkU0#u{yv0$=)&#HQL5|4YW;ze(%a#!Ak4SM=N($ay;gSocD$0!&ml3{@g)>
z__c!uvVA-B@IQ9Yq*<@gK@<DWI%x8HVmS3VG1_%<8Pi35gOW(xgJo>dD{|sd>Kjy4
z)lrL=YwMpL+391#iPYGoxpzS&iD!@o7p9Fd*7?)R5$(b+|AuXGp3dK(&?V5%z<Ue1
zAL&qOo|whB^#uI>{7y|2;o)0SzHN>oQIdS-B2v4ip(f2~Bm&exvgA<_zye$XG8sl<
zIdSJj`Hh5KQzMM#y|CTyMA2vo0$=0nwN}J~i}^jj389q#N(fbCMU%8)N!X37MU30=
zMSP`%UAZJY28F%{9A-Fd(IAegicz8Gs{{ofta*#ljT5M=1A^btAdN4p&!tz<AQ5p)
zW*P{GS2&L{59M0>hokTprp|qPN8jksIJEbB_Hl}Y2cPvDa;KEvw^8Q9tD{djmX{h)
zV648b*-|82a+jyEMZ}x4UG0P7ukt}DU-+Pw`w_qgWww?N>TZO7n|q#2w!YHIW}$&@
zCA@phk}0`2Vc=;lFR@8u$QqmEGSl`Gm5|60vp7jM0-%1Wz4DO~WW<6jWM{w>D8zP(
zK+-%osOwc11+`>?J@>A|%ec-?Tb=s7it&6=Z(5!Doge49A9qKCa@$H~sFk|pe`k?A
ze90&His~F}V_t3Uz<Gbkp@Nhgd|0<21twM-pWKoq;!-5xN=*Ahq!piu6nAxc%dIfA
z33kg*x|ufEo4o^2Vz|Q%_HxwjNh9}db<AORnnZGfG813#4>=y9-{_~SgFCL1QsQd4
zU)psA*<|7|@5>(at}}0L$lQwFSYhu`fs>jW)C$&3mf(g2J@emeMckKrz?M~>t;6`B
zaM?HgUg(uA-5oFbXISY!e^G-2eX_{22VQY_-%wXeZu|~`uA>HJYOakySG8<Zg@;8%
zjA>kHI&_F<&1%!mygmIG>o)ix<tL!>r6ZaB^*zMEeF3ujw)#xSHf%YlK#S;Ab><vt
z?G4I6kYZYlWl0|hm^v8o;;qMfBh@;n(tprF-R#YbE>gdn%aG&y<BTsL-YK^;)h+#m
z-LxN%nLeAH@>tU>%`_XlW6X&wg(;p4WHdJ)MihlYr45s{l@0e`k~_Gu(Dmcv##v42
zAm8=-_L%}^EGaZ}3ETE6S4pcnq-p(~t3*e=j5J^2DhZjJ>So?ZvvjXEcrzFWRt|`2
zBHbtts>2S#tS@s*S)&VH%lOTOI;aKE&{*3U1>^@U`6t{5%OtI4J)Trb6n`P25aWiF
z)|H^cIT1Tvw9j<>ukAA^j}Kzs`)BPlUL<UV#(1V(IAgPeRStLlTZp4Zb}6=e;x`x#
zu6#$>o??l4Gt-xOv%JqM_p}yabF9$m=erZgdRCXSMqkxE^GBmSb*-S#OiVH8g#UvK
ziWk<&E`q|Q8m@y1*o+;14lb;3D9&Z|PL&$qNDJ*Bw+Jv4Td8#!C^Eq!qzm7uOSS_S
zFN_@GfF%}fgMTK-pt%Q~e{ZY~!XjcD;_IKNSBuZd_q@MkT}pT;hB`iZ{M83KN)EHR
zYnM+%|BT|q4_kj@0d(31NzSIgFh#-nE9bp<Uzw1nyJ*~GU+0oxcM>ijhgty|0(DS)
zA>%}oQ?m?%Gv(A}aqVXGb+4{X^-EP#{ZfBN^_%@b9s9kC>Sq!+s;{fE`aTjaOc^`0
zp2=!w_WkCC!vE}r>g@j23w2TLg~Gq^LY2D5Jf!|io~h!i$umW3k!MPCB&YhX47h(V
z=P^9%)974ekEqo53KR{OZlxgJeup1>03^>{y+s1{K)4k=IeQd%uUwMFmYawHb#K$2
ziVG@At&32T*}$HaVv&IRoEO0L47!}VMB^#-6i>zD6_N=KIa^bUocrgMBY)j`W8h6?
z@O{tox{mN}#-5V{7|+TC{SMvmaYLqonGQMzBy}$ole~S68PbTE@pn%;imY!URG`hl
zG|g@0XV?ryIW)zs9t-7y7GGk5bwoQg+rUa6Nn<f3Vlx=A&S54J0<=&jhdH&J$GSQ{
zzS|ycCH21EZFcvQK${qD?bLS+;8AXjw_`R0k))UFT)Su;jyG~Wj-aLZpa6ME19soy
z7+i-u^DNno1-F5knRX!{c+H0(_weiYv#QegTR5vu@c!Z3Qpn;~E%df)Fr4>*-mP(J
z&N;$&%F^}A+`#W~bO>DI5Cy{OmG9ppW8k_5Sv}(LU=sF1^RoK-7#lt_lX5h;`cXN<
zZ0zlX#iQfdcA5mNW(1!zVqUh`V)MOQm$}FQ=w)Utj>7i%Bs=+h$(@K}MB7`w`_96F
zehrrrxd7uM;73;@iC1<VL3fU^c^;GVO`8>8N%XZ!3<@omKS%YR(V3jUO?T*<h>`nR
z^i3p7XEj8;uv4xmY~6e=SFSF(aqqmUPcdH|w&ee=Pw`)57@n)mEwi=SFw+)ymJXq?
zfB8`j0?|>;`MnhC`=6yyXd0t=Eh*GR)N`s(1Vz_7G@QsaoSHaRrpio<(OICS;OH}Z
zXDpW!SmdjVdItq>H-EVp9`1S3`%+wLw;lG@e&Vp_^L<}Kt)RfKzJYLI<kP!N9+;v+
z`VyZ>6BlzU!2gd0uWG-aQ`*hEb4LuyZ(r*;E}f#{V3M83wvE&$Tgo?GNjXYh)q(f&
zF<;#|mM=Fp+5IB9;FJk=6=+Jy#<lK8zUDtyV!IVH$z)z0xkq!8)U)jr_v0y61H}hV
zeV#F08sP@Bc@hAP>1vxf&MKYB28`I#U>lWBCYBY8r>@y*GC^C67u|l=Y(N#c2uffj
zE{Pb^y6e4$(n_Xn!bO+TYtbc4?9_5V>f%zZM!yAiu=5yA)2kC2Hb`MT8+C#Z*L4R}
zLy{0J3!OpG@U7>(BTJl&#EIkZG@}2~=Nqw`RXI=P{7}?B>JUC~{&{C<6(M{gn6&*g
z+C+k+isf^2bG<8hs~MlGqO#Ph>P>a*#D(iGIy^#j)wOA@hPBP8J5(mq9fi!`&Gn$e
z1J|PO7LGu)(+m=s4@)tIM#~rTYCDlZFwHz5P*9%6oe?<eT$O|Vl=j0E+QmV9EJzJx
zCiLZS`?`ugMDoY7M<4P}p|G0<KTke0uNxdBx+T~P*}2{6q|>fwyApe)2Q-Ye-{C4O
z?55+F-l++ihikA*q|FtNsj)-6Ohdk>**UgmYnprv+d!#A#-xLW8%`#hax3SD5nmU!
z@+q^&6YgXoDXI@3L6J27oYJugJC4ScLR)ZIG;DEru?SwS5UnFa6Tjwr%Yc_8COkZR
z?s<QG#NAFhFZX%K=cz9P*+;e@$n7)oT))=J8H(Td9DJA}E7g9%`OU13g%9AuA}poE
z<-tS&)X0JG&_H^*ml6mK7%S1wLJ(pWsH4TmA4+vp@*><3*W;TdVx~$J`w=yJ4IxzN
zOCi+bCuY!pC4~B{BAjN`rH3y9EyesNo$!FG6)ar%!zxuy)2^wQ3v*tu{?lLwe_m@C
zYN>ItiyIFqS2+nJ_4T9FKd+Jxl5}9~WI$b-4lYYsv{AMlOUY543$PJj3eqwW%8rKa
zBsXpRvuSJBgzKU-gDzbOM|<ux41J-Qk86PRo*v8+@*j1p?zs2CiwNP-mSI+nXa5qT
zi@nfgEQeE@!l?-vcA_22zGmH+uQW0fYC}S#P-7Fk<%jc5Pc~h7TWg_Co^~0%!DGeW
z!xa^_y>P&Aip!0@`!ty*@uX@P;hX>Jc4ar2_cW)HANH_{7=B%o0j?X4!^eDh{yG@M
z9*Hu^p=lcUps30vr-L%6^V%rE5GQs0$Z7EQs*;nlI@mRP@22@$>+K`>!u+^JL4hSe
z%n8(+?x~a(jN8lurGT^WImlZo4#cbQ%N307$duGlkho?IH_Kb;frGX-3+;yh09g7r
zL9j9xbVe&$hjGYB=0k8bdV0+Vh2veK#5PQgTUdmOSof;O-ram?hD7^nz<NHvE*|yY
zPtWWx=V)#`lKpXe=&a<Y9`PbZ)|$>W*S;{KdueIGYyMX6pkO8;eH3e9aT!YH9dfeS
zEIH#v{ERw8*+vc&(&#A$jH-wjJqf=I${hD6IS3STc>%a4Dwf~>^QzYBHbmo%AmYzk
zcgr>N>X*cl*46+D&0$fUCM+m3G$D1@S>;Efn%oi(@j!=&mkInnEJ4TU;zB9XX6|EP
z41XGz=jwDr%;B?xs;rx>nd9#^8~02*;w&}!%R~%&A%r2Ug)83pR>SO);PM6+R}-n0
z4a72l`kXubm86qrEYr(RcUQi#3-*k2j<oQ^M&Cx6JZ$dEzSHa=dwc4wncJ2G{_|7l
zNqRZ0TAt5Ds=5-Fnv&Jssa4s3THLm7B~?1vVF1o$kmc51E(pxRRZG2?4PzgnB$n_g
zIv<1@3;Dd>tjWZqcl}JTa%RRgzX5%`uel~g8~j{5s`*cN0|5Ja$V0&1Z^5h*KCM4k
zV&F__cHSqzmCv6I+=mSx5-G2dOVVc_Z`mEfGLG&F_xR$>*1F7Q?{(A&K@0K2i(|Es
zUwyex@!(e5pmhXE?7Z=#znB?~|0aWKnobs)bj=>(XYt__;`~xt%jvB8>Mtgf{bH>I
zin+PTnSYg`D`&C#Rp$Q<91}~=O;)x^Mn?XlGFxsIsIpCT3M2w`_WM(~(4<V0c&6<{
z(U;@vFC)4OXJTtnh%PN;V%218#tjG9>B8Dm44r8H{5QGbMOL!BPJJW%=4S&=atx-Z
z-+*=TZYivcU#5ekNwP<4zdDkj3t`vq5}oBMknhd@)K&R+{kB1;oK^%=GJ9r`_Eb>2
zeo9N#6(B6A!ud5c9Hg;N!!BmM#i)wTDE(x`9iHA{0J>qjILcehNeV;+ndZ5ys8igL
z3XO<AX-lcJ2#Ju+6?!V|z|oV^;`Cl#a3(Z(`G<^YHZ~>jt&7VlAg)hJVc`Yb@3`m#
zCCJ#i?d)>e*&ysi&`|bj6_k%!1-1M_1;xVN=-cxp@1Llkaz`I-e!rxXavqLy5Ij8w
z6%-Xf2z5>)2LW<Fh&$?PlUnKIR6|Bkt?~y*2b(b@Aa29?@G1;uRHj#B+GS12D?dDX
zBvYOG=+A4dn^i2$-)L*oAJo2F1|Q(&+4hVPuysD?m#ZcWPPG)pPEFJKAhzRk#_rE#
z8JL6?rXmC9Ga;}Tu`}OpvE5_&X=^@)hQkC>mQ)!f-_$bwT%Ax6{H!Ev4RKc8+YR6}
z&1^Chf|idM(DHFmhaO^PnV;&puDwq4Qp`L1Za2?AvVhcPak_S`yI(wiHzLGy4<6a+
zv@=iDGfSynvZv$1r|oGo?AxkXW2>C4RN@6%5ij|SUlC-fvvj;>yv+d30g&eja7|vD
zxt*$(HKzVf))=x*9nr0Og{;wR_Sf9X(xxlq=0}fyZ-V-)A~uX9W*1u`ZH6$l6l6g7
zP(gFf!Y6@Z*$`g&x%<A2My&p^5~NLiWtTU658h<bENd%_*wA4`tvwB!tY$-66P);q
z$EWn>Kbe2*e_!1l<ZU?>m(gjBZ2W%5E?DhWKh1qVTtxJ`C2N|BlS`}e(#50Z%Z-;<
z;s#y!zhE~aB-i{{4ZMi9(34Y%63-jGl{DosY;i|1EL8SiLN2d|sf#~81)77@=W;Qq
zjlBIbf4wR+b5%=}U4JK0wp*u8Q?7f3MA<~0z!hn1BrpsXKH5{wxr{tt2Mv}NNWQD4
zs_^~~miPO9=Cxu=>TEn;hRd>>8mpx!e#|_U9pRr?hKvY{-YqRIN=e;C_%Wp{EejzY
z!C^zlb4-`?PQYsIhx?%gXDEanKO<!pfe4Cq895Zt=Cow&^Xa3)oHu=HF7%Y^E_E%7
zFR@fW1a-HJ;=663;SC+?^^(wib&wBCHX1!~JwS<^?R<m7onm7jZk{)6@-ezt61`89
z?>y_wNdW#MzAdWUr&*>xnL$Ul&$&M<Nm=uAa0@zA=>{t~htLO<ZCWgWma>huD3SLV
zrCK7TG0cMTzN)~^F{@_iv~}t(Q5!Q*`8lt=@obf6kU!b3ivRahigAMmUwG;d?O^p>
zCHi}qPhNYs!MG>=p1Zccv7}r>ti@zBQ-`a_>9bX#g(!VJLjp=0Z+SbL0FBKqf3NCr
zEBUkPxZ>Q8#W<E+<g8N4r;3^kqd0Zx_?s0!d!QCydZ2Drpg(L$g=qNQL0;_iX7*<%
z#T25VX-gBdmF515q!}5^|4-X~_k)AF%u~5vFvr5;+Y8Jx2hQVQ8hzyfHd8usy7+7h
zh6}Yykd|)AwPy7u0u?9fN86nsRH67fXQh-`^s(%vp!<*_v4=Y-?v_fE^WiXLatFv&
zd%!CE2S5~~Dx_P%5I2Mjf1Q1k^`7}?97OaknZ6HMr_r1xqwbiE{S0+kB4OwdM-~^r
z@Q%Mh?0XkdJ%eC5auB&eO>S2cdHE~fv(b)(7#c5NUuV~flVHB7sjzw((!+FLbw6D7
zn0o1#0RicipEXb`xb3|Y|5>N1Vx&GvA5G~*VP`40g%82fIH6Dlm?K%wmTfLdX_Tht
zD-tyN0_|R{v&I!`tA_H1J9P2$Q!swx_sqdwX!!I11sSqD*lJccL+|Xv)5g0uq@flp
zP;b*0E6_7voAl<_YoK=P+1uGAY~R0aZi9bH|KpYT>I93Mc7e>k%$cP}<jlBSkUJQ)
z2<o6qo+hMtEVMh@84>5d6*x!F79h8&>aIf`cd|mMekxP?IIy&<Mj1$?_WWs>BSFe(
zm~{2|qLjG;hO)qx(@bu0$yj}ZeA#E{gaD39H_-g8^15*O<po<yy&Z3?4_os;THH9M
zwm^YMPohn%ns|ICff^eqFUVk63F%lDS9j~fgVw~&3>2>fLPe;w;8yZ!_JpgO=!Pa4
ze|j(nob%#Cu6rdDCkhg>fQZSu$!+!od&>UjU$PKp&2em+-iMD>UVAqcj?W#vNip!8
zuj+Ifa!1u@9F8>GFp}r3Yh|f_xC`St+g<%Pdp^Z{o#pxC^VgFU!l&0jQpRe0Zy8}q
zawgo@m69G`sj6@7G|2s&bFF%@gI!toewQGhbd$PD0+j{_zf1$UW#Cm3sM(QUBv7D+
zzghzI&&RcL5X6YNxzYcE=*Fgt+q4bG3_xZE667x3TUP2O;Uuc0-?hb57f)316TC-k
zEQy;V<PS1Zj`9fTS+fEgY<RJ~2OXk|t+*D6!H~jsC8a77Bm4nspu~(b*2iPW4c(tx
z^R3ID|7ABTa%lTdT%{Hfm9AS9pK{E=*>F*w&Sq5!PoX;tvv--@E~`RLrGWOnml7yY
z0FG%Tz1N)CH7hRNLb&4b{4woO=T#_KWRwI&Lrt$QgFMx~eftI!(!~5%WM*>y2F~%E
zH_7!c#&v2QtJ@leJ~+1PSN71$Tts3G>~Elye<gTK4jQQT?)tLNRhT`Nrlm`~Pg+-#
z>{|vif?Yja4gA8g`w!{;rL69{Jm&>mN<VW5O!V;|2a&>P(H=J_pyp1ji=lPe;fGv(
zp5t^tdLlJ?fid<d=>Fs>Dt=x_re};K=<d5Zh1OXYdjKEpr)Z5nq)@yS_tu*#VJGCQ
zj^Fb7j;(BY4&}7m!^lV_<mNXkoZcCV>FP8dJLL|=bHj+2hR}AR;e3<>U)atIEBMs`
z#mbcEcXoDyYTD4+nJ2A3JmRQu>?u5jL+e~4b3xvLZcS=Ga0K4AXIf(&kv7e4NKoM=
zvTm;wAgd%#%a{$CWJ5)U9)@!*wqqh53JWtGd!TR3a_g^aTby>@5`(xQx#rxmBMEYO
zfEo1lQZ13mK1KE~nkh$U67bDoY0jt%knL|6AGXud7vx>uu>rKvdx&NTpBZWSlLGRZ
z;h71DT7@jb{gUv_0ALLL0;?PEt9ifr^ucWyPpVP21PqdfM}(bs4b~C3mNxx^0;<hG
z-7OF5MsF>>YEs`qZF98voz2l$y@qtwwmB-|w)821@+f{NR~-kVGp`cm-=F*XA($&h
zv@Lwj^ig6fcKCy`KzFW3{Vr^sg2pX^SnEn<pWr2)N~gg`0f+Z0huR1Ao2zr4mM-x#
zJf<6>b@0!4hKRReleK>6S@=%sQud+}b>6+zIWf)4QuH{zvsTnJr8%xGvs$;#IJ`SO
zI14GbpY)jR-POJ4x$@wc)m6e9NT-7>`pQWP)Dy#*K|^`$k7yB#?VqzV?j?kvMWQ4q
zd7)w0Rhb5FCSKbA=9=aDkT29(m@i;|7rfkJUAKcQjQRSV(Es)0Ik@q;7D!Odf@;y=
z-HEb01wA=|^1Bn+cW^xk>!qHQ^YdpZLkSQPUw+#>tvc+Ik4d?KkpIJ2jXO*P_sZ>N
zHitDG(`NOLv{3p)06UQgx(do4V4S;};<Lu)Irx1dxcP{O68IM@2bcRbR3ir|Z&{8G
zH;&&bHzrtKw!~lP!InREfy5kqyDMeh+=!mzP+U}<!#0!)DVC+6In7jdV(a5n-}y>;
zMlizMAv}Z4*6wO4f;G#9QbCs&NOMTu9V|3Jd;9p1ME_#k#4xt}TkCl)m;1CLQvW|X
z!2wD}{aJzY`{zpR(cZQ|XQZ-E8-NQ$%<4PUJ!n+POr{;o6!ZgH!;r;KkCHZn_Lj~B
zZ~g(4YH~u)LdOIj!%(8dd~|rqa<F{n+Pe_s$lJCK^I$tDLpp%b2t9lyK_pl)H5&$_
z)X>KGZ^5)Xb@p7b=7t|go|w}04HVyGam~lLZDFQ8Ez~sll<kV3&;-4{uq_vXJETbD
zw~VoEG?$EpyO1A!jQXC-_MUpmJ_uyp_z`e}@<y*LTqRc?UlrY~dQ44F-=N05F1%b@
zA^-HqK9`#FT$pBwo&y~XS)umvvFD&$O{JN=&MB!b=QbnSk^fx-xwY71&1Cg(MoOM$
zT1UWk<&|xQ6G*f9I4{3olHe)DgV*)>c<s6X?U<*|LF1m!o9|I@wyARM<q7aI=+(GS
z3Q*CBkB>t|oH@V4m)SoO>~tE|+Z!`AFQC46`;{cq`7cQ_hQA}pR5y5$IaEs3$Z*_c
zNjDM8my>Knyzv$58OPYK-&yk(rDq3K2QN9ntuKe&YRuG)L%MG^z2rTtdYc0~z&ybc
z2#0yeg$4_r<~EB=7k19>a|DLoh3AYS!qkGtijxLxvkFL@@M?(@HL~=ESA|&C+LW>l
zErOq*$epg2sP>X?tOm&-R)J*bzky_`2m1j?#^mrCAerRzkygr$UsGT;O&I53g<*VZ
zrtE#M+{~PBtZzf`;RZ>RN*V=n7*W3*;tJjFG1$%Y1mAFxJDBirr9g0x8*)G)mQ_`y
zQjJ}Gm9=rNdehm9z8(H@)2UUbe*Nrjz9bdA{Aa&W2{wV-0^LAgUA+$`tmx|qB`(5T
z>7jKFiix7#Ct(+Qgyp-_5Cby3U^OZR+yT&{eAh<TK+z5i0!%%UxZlCxHZh4zwb2QK
zEuVgcvkB?3S30yY@*kZ|%)U5lNQ8oW)ah9Ot$g-q2{pcyh(&#C<)o9RL)?rkM!?Ej
z%nK<J#!T*8CRJlL39xRKM3Q^`4C(wcikq3mWu4xnU%semZVLI-pEhgZHiWXk;c&=<
zkBr}3@NRSD=KWU>G=RV0*85&c4q|>1-g}0|>KuD=)sh%)wcO%+6I7rXs>x%(9*lBY
z5>7V^LWB8ucSodX|4uT@kP{XOI5Ix}z>&d~7iDzHW#HY&hBoeKJk;s@ZIZ@@PmC^B
zYBO#4KK$-oF}h(}ev0OPhq5{Ps3-j`(Tz?gIin0Z?iWl$a`0L5Pl5?psD4On^W*a5
zjM0a?%Oo9EUb&?bv2$bGu1E(_r@nq#uub6F^++w_ZR!jJw?Jt6B2zJBs$NFA$!m)+
zEq)zZTA&^hN2uEnK~&SZ@WJvP&4o|QyS#h7j#rmfV@oDyor7m=Y+_Pu^&K`M93%@Q
zFPO>g?9!z~oLg|21AheLuDxu{4zL9!gmA|bgOwwvl^#SKzpLo!0HMxYNE=NCm4f)M
zMiRC|n&UjoeVR-4znH1tNJ*`>o62DAiXCBybF3eB;2t`L6kmhu<MVb1x}7YSO5iP?
z_?y(!3_{FjF&?0w#L=wm*=f`>r>!>lj3$=k-dB0Jp@e4U&v&O^fEKA)t3HWUkAFDY
zQ`ZU%x38p!BL0ygvp15|Hz|G`qzx)y(p2VdRJ>2Xl)Srw>q8CYySi`Ngg{E8Fz9fv
z!7P~{&K*_`O17diuCCBJZyGBN$J~ts71ohESN)GGS}Jf@Cy%`fuv&y?zk2c&e{0m2
zMl%d^WADU~7M_zRIc4~4r!tl#IEm)VtoU*pIsKu;yGz`e%I)E3*=#gYwMRCLm6z`!
zPEF2YQlO5d96>TF0_dqZ-O2M{y6wHSr`sCUTWllp1NO^Zneq;Z_gpvZec33#>h1OE
zd4TdGET3Q-Kky~=&HcT{5KV!<LS!nXKSN})e}%|+sv$BJ(%&F5Udwg3ilq#8x5pGd
zFw7IyJLyi6er?0^hblaJPaFr6^wmrpTI5OYa1$!8yhC|QXXY!X_RO|gBBSFW)Td&$
z%lxqav@25w8B<q^jGaR0!)v=h&PNAZw`=9o61L0UCz;0NAG}^eU|vIDUPEABLtq^7
z4X+_EuOTq6AuziKe8MkimA{6-9PdRne}o3P%Es3anAZ>(t=ABk-}=U0LtxZ5oPW-h
zdJTbj4S{(LfmuBf0jh+rAuz8YFs~sn_bAQs$yPIY#iEn^H3a501m-ma=Kt3an3Y^s
zcz=rM(e{1snqPbG$LKiA2M2;jk3o4i=TBnlo1JQoRCaC72&S7CN0bj+9l5{WW~emo
z)6b{z9S%Rj@TUwbaE}vMlA`#2`H07S$!-{2r7cZd@}P(EYbcd{JmW5opUJ!s!wv2K
zqJwVJIo7)31AhuJ^VaUJHeRRrl0WxEmOp=4wzOx%p7#{3bl8u^Pox^(>!(T(u+jyF
zjg6v}>YBY2{XxxA3EiGU&vD{sj!M@(t`6bXx{@!@TJPnK9(Uc>e3oQ)muM}r1-&!q
z!9TlqCKvMmjoz6vpm&D#r}xh2#}6eK%-~uq-D(k}4&b>+;%4TYlYj3?k7f36VJw_#
zn{uc5Ys39x`D6S9LoFic=9JT7bAr8X%x=bpOwMc_NApH{Vnm?BMc|ZR4Lmo{Zy=K4
z5=)su5?9f@tb&ym2+iu6iqa&$9MQ1ktTaA+vtrk}b*be69NXi$q22XEn0-@IZ!N}}
z&hK(YY=S{eg#ggxN}*YeEm~5>F}qJz5GTJEaN3<8(It|j6cj-)o3Cmz7)Ko3^~RdW
z0=xIs1^)YxpF&?0@oUW0jc4Di+e%s0arWXdawA};%RuXc<9T_}#Jz_&D)Ky`U?M~6
zcZtLY2$F7d*|2kNX_c^Xly01N$~9>752eNSvu$k9pNx~zn0<5Gor7)d7t9xbU?;%e
z=Hr6*O?T-^=S&NhoaO;umZN2Vk}MJG&Mf*ZUP9ToVCs)W+s#FPxi4WLX{gCC`=Mu0
zNvj6zx>kfh(b!N}kct=4#~D|Va)3+6Dh#w#?T1UuyPW8;V_v+(X74evm4?j)Q34bB
zgVIh4#)3$sr;FzssG$3muGF0Feg%!x^&p^i)momqkF6>%w~t;?`8)QDI>%i@eoXyM
zNCn==ECUp8XBmH=TLT|xx}n<r64{X`nVf18%l-ZohRpZ>_cCNu?+dsR2_<;x-(bkR
zpFeBz8w=pYTKTtmGPUa2on!MJ>lmGV(DN4#{1q;|CH-W5tQM=YIAgj4yF0;+Ph%|C
ztYcZHw~FFnh~77dA|v<MIzmIS18lP|X6P6+%#jxsd7R`_5!#OHa<9%wiBckx9F$L;
zwIk*{a5o`4z?><+HgvyE<8V46Z~2oz2eT+WEbmFBYLni#u%4{;qa}EA%D7oV6(7g*
zrI?U4qdnjlfu&YCe-~eVj){a{9$04VE?Bl6kYfg77T$$G-lXvc;7tBZn<v=@2$=?7
zEo2g_J43`VNylGyo$DL|6AB4=9;q)ng;%evxSH<nrfS|~HO`xx$1`M<=UO{R4}92`
zl#&-t3GBcWu;qa6w|};P?d?fbwPp-f7H0SLq_8PIK>@PUxfz7^@wh7z+)|-&ogn{u
zZTPooh=_}#=$3N@&~lpSqhNU~Num2poUe0RRr@@L{Oy$P+aKv%4T-j#{w_;A8ZWFh
z2x#cUeO8e)VexT{Vx14vh#=_Pb)mg3ty|u{kWAAfc~F}?Vn)uAVst0}YaqdK?s|>9
zIfpBs;s%n!JV4`gjNMinDQKAPl}IFIwzdJU(0gFiBkP!@?b$EqC5_cn$~v`-y)U{X
zUiMfY8Cv>ffKmp=SGbST51Bt8wJleN9HiSGUU>l7&@${EY|W78wYl)D%YiJ05~U`_
z>~4_DPQws~k>|Z~cZoc6qo(ltl<ACN=Pc6jl&2BADKMDAvd?}hAUW-jq!es^);(*%
zm&@<57a#jGekR=R*Ghm}B)D|t>+d249L^op`8Rw_o+KKDv_cckT9?@?e)ch4nVLMY
zgB<XNz21c`A5K&_Nh#>GwN;%laC^BfUhKo_4Q52W!HneQX}m1<$E!OV4~5>``&*uH
z)%rmlh+E0Z%FbR|HyrkHOSs$2fq1|=EAecz4a`3PTG<PE0g=FzL)~grHN~x;a*hY&
zb8MZw&=L$^C}&6V%Z$jxN>4gsT1Kn&P>{ad-_(D`n@TLg{e{>iKAJ!Q_KP4XAB=Hh
zeMEv~U&c`Uj*m<=&%8p%WWBbIi5@!X%9_ZC_O4m7*BpNzz<e_M_@~$bBtD-FG1K(#
zo1mf9T>k!7wUCD#Q1{Fn$h{rE>aD0hutWQAt_i!!aw1BnMn;?3=$q>+3=|tSu=opS
z+RUfv#x1TXzTttv_Da4g^YQn!5EiSqYu0+eTd2DrY;Ri(Bwa|1;E$Q-ShM;kLBlk{
zYO2$i*}pMc!kzwzH2*DLf|<_t#FXtOiu5RX%$smRCkMd!VSjb9)AUb?vhVb{&eGrE
z<e++1f|L5ozF{{I`CTV-yPwyT?{4;{#T`$^%~y`pHXp<lc?LOPC&izL{Q{Mq&#&}-
zjaMel@9m<U-M7du*m*f84(7mXR<#+7pE}hU92{&Pw)TPv`J-KFYMi3~2a0eoeqeZO
z+M>X<$A!pOd>W?&^b|>GAzQP;YUFT2mt%9LLYu%~h;TDD#J~nm7{dC^1zDFMg#<qL
z@Mj6x2+{~YceMD`GA6MvV-~EIytKF8&_8WCbStouof;Bi_N_B&o(8wMns#P!S(4&K
z@)WQ=M7_f59)7qV7+A5v!_B*N17s%#4XEQ|#Z!#JT8cGcs{MTmT-9X&#vyR<=H*RS
zZe4%55>|Z<=H_5;F<&+{v3T*VIDHHD7U-6e*;W7Ai^mXGU-eX6>ZB47v!g$*39yvx
zEd%}0S}8KE`JTa|=Gd8w0HN&@z}NmFd%A7+Oiz>BnJ_Cr0S%hokvlzxgW@m@dg;@%
zq<}({q<c?~Q&RLSCeYo!bXKBh&LI`yl%Lz)THNui(=RS2yxPTdvX}6C7Zd1E`^CkC
zE5Bx+u7^<^dki&VXyL;Y6G4G)A_`%=$&f5~I_%j2_X@vB9l{|+;pC0vFvU_3$zgtQ
zZ2c1y_Eo*Ee|%c-*8xg2cdlPe&9-S}euoBnw<`@~dErE%O9=z(l31$`<7;os#>4b?
zxzbqu%hA_5nh7aqDb?`^>&CNf)#LL31d2h~5$EaA-r+%f&VXNvi3E#t;d}+b&jgTS
z8re`rb3(ty%7|}*?)?7n{a50{wp{c{M(BSLp>_T<>NfQJe&V^Q$y2a7(`Fig2(wJZ
zdNz1T^N7XH)-+|N5fw>efR3}J<l4asJIslh<P=vetq5LiPu%p2Z>D_J;k$a1{o~&Z
zXr$M7ezt6o7I{RtbO)E|bB-KX6B|yQ>=xB>4z>uKXC5LsZ^TX+NF(VH3IK#M$eyo)
z5Jl9%J}`ye+G`mU6p&cnI817dwrGya>5j{`hA%ZvBOauj-yv-zG(a*n6(6>;zt%UW
z=${TJ_y+hiAKS78;kI~5kEW8PcRso}K<7ctHn(<`E{Wkc<%;|3$$rXB8v+_8n_@e7
z5oz%RxhGL_)U}ebb>XNhDYm;t&g|=Gr5K16K$)0}J{VPTZu#YbyZYn#<F1@?;-wmZ
z*tD(H)LJ+}2LhNy<h~GhcQx<s7CjS$Er}^|Sz9%0l9BH^+pCYK!NnuCsn&==K8|bO
zb%H0C-Y_a4^;4F2%YR^>Vx)@O3pNwwKNSIrL9PY@FX$FIHZ3=){AO~8oj0~TN`&_)
z`@Bz@==<hjY*Ibn<M>3~tVp`;n#{(LDlb7z%HN!PpYI`>#8*l7;w$m<#lS=`lWbW^
z!v#ud_s%KymN9SF9#?gYb-S|aKh=n~61Y`gDq#rMRR4v1rao#u%gwKS`Ho!GjJJHf
zo2!D7myZGJ>ro7nx{{%0hPyB4)gbZm?+w0Yb;?@tfo%vTi(foZ>yi$*8$@~ky)r3_
zX|WTnCj6jH#C+=<gm}#Np=xiW$XXLw*SqpOM^4k@YlUiG*%jthn-eJ=D`~!KV+D!e
zCzEoyVk9{#Z@F%2nQ%?wE9!B6zRWmPnKkYQF{Mr~`Y|*!RXtoxkXedI=O)e^DvlWo
zbKhJ2bq%Lx5binX@SJ^iM@&)Rfbs|aso;IeBKO0h!u){(AjR?ViB-ZLta)Edtog$*
zw<o^<YCG~|LEw~;-#%AdkdSGu5z2oU@eu}7t#d)v!=4tbyRdMs0xhE9V;UcSjB4u7
zIW7FA^tmS2lEFvMU+-mR7*$w5W%mHEGhaT*rVUkm&A>ySaRU(-vPK_+7WuC=%^{jL
z1+XUPVtp6(taEdiW=fNI_Mlc*0H1wTH>uxA=y{^nVb43$GE@1dgMA#?H=PL(X5aKR
z&v}_u`-wDTj_?sG`lKWN>iFNQO4EyYwF#edn0zObgy>5l5<a=bN8|LG20tw)6EOG3
zot~bS!am6e4hlLxP+i@nBaus%+DwXnTouGF?gr-((R|O#<??b>X(@KcRRA|ZSn?nj
zAS8pW5kF}Y3cJl|dVwGgy_%X6c$GCI#ZWb=_EVd16evuIEia@56~$M_iVRx6xp9c3
zpjB7H+OQTbD89~A)>EG-UV_i#G`SqOxu%a=pd@-zUoZN`mV_j--_TstZT7j^*TZ@<
zEpH#w_Znts&ykC=UGX}O<%*~=SjTf?ymmz0Y5cwmiQwqcrVa<qbY~UOtH<Bp><G(N
z@LkLJeks|@B`$qU2Tda8hn$O1yeKsTFk)=Y0PM(r;A;R4z97brgzv+(^acu8ZYv9)
z<`<9+sa#pt#CKSCa%rg4e@AU*6p`C%HX@JSY;yzwkFVsj^|Jx2R$Tj#Z)@>`b<o4=
z$sLOy6%Ke0BzbFxd2WSWF)*=7P;tiQ`o{crH_Pjg9v?_OhA)i`?>Ek3X#x+$v7ekM
zA?t5}5fFyzyP>po{OVo&R!Uag_hp-j;o;Ep@0;UE{IQybOy;LMZap0gzi&Y=%_^E1
zFdjKXqd<p`%f9Vorq_D#{z_W8-5lmfjpkv=NYJcYzjlnGWeia_h4adUFI$0!bk)0#
z*4Lx|P}uwBg4m|5R4hH6nAi$78kBm|{oH)Pqs=jJ#STvDSU7EtYR+5fQ3VA^&*Wo@
zNH@KLA2DMW@V$#E+YlF9JYm_0QJL3Df#(ev`GPEiBBvF(J4J-u?&NjDhw^i+mY1G>
z*hdJSq(@&n)Ix;eZ$)wy0FOxdYnc8=`{viL|HR_Wi^egm2VjnQSL^}oyq1QE{YGD;
zk{=_KF3Oh80HN~fwLJD<xGp8-5UG<7?bt2D)S`_XM0kt~jc$TI0<x&=sdA6pX1nSt
zmAIE`v{IG)C(@oZuJAM;R~R_GcTo7v9WyXQaN$6&d0{i6s?M})qR7P+Z4=57_VdDa
z__x5}Q-dej$y4lGwJs*4B1(!=J4g_PnF{rIUpO%(3~F#nICm=g8ayFlxw*S3PNEv<
zvO;+8mCtHdUm7{6HS{R&QtKxPh|ApCt-W`M;Zc4{30yO_?!B=S)f*ZT?7~mOSS8%A
z+)x;qRu|(QQ>RLcSYIJb$|+s$NRxv>F~ENYLrOOODhB}*M4oiqpBA_MLIrOC><DV8
zRjulr(Repq334d*ZSG0{)h{dsp@vd8Z&TpluXo-fAwv~_^-o`{H|%PBY_0)*t~z?@
zEOXHa<*y4G+c{5ZmV_`X-GGLVbLX!&$vmIOcv6$Pjb#M#vtQ5`Tf8k@p;F_Wo}C*Q
zci{RpclzxXd_K)ynmuEdxfK;CT!>6LgI4ISKXI(FVacycz|)SwbHW_W37R%B*R2aA
z9Kk@0>fHxBabn912TVGeW2g2sB>Wqm1~s>fL-(j6^T^H!`)DAr(>mU*w<^9v-UJap
z^5$o;t2W{nk3)-FfJ({2!qP`E3et434WrtGdj<=sz45H#iF+p>%&&W#Gu07UJ)8>-
z*a$m<mIyf?W)J>9#E|jAb--Z!>Qa=E5(ln<gR_vXSDexRS-Qy*D^Y@}tpkVW^Db4L
zBUDa{un%EW>xZAWPcQdIy6v@*7N^*z*^pan<TAZu#^d*ImS=Qu!*)ouNgoqpu}6$9
zdcaE<1qI%yIa5x%Ys^9oVY(VepX$WXEs^}P)X>FDw=jAh0tXpgZ-1S<zA<<Q((kZ;
z3KVUbmwUa1hzz5WZ}u8C*7$%CK7}yZ!ZJF!EC(sno4>Bnigx_LIt|usH#axCZbcH%
zkW5%yZ%>i5n&)IkBWAFb%kjJBJ`vF2s=@mD`m$<Y!#^vfvOjK|mz$fFQzbjE3#3iJ
zN!)7F2{)I1+Pmn+dvrNSf(a&<#x9&@Vr|k$;~Zh4*Tsc%)Xo^$P!jBZLwP|%k9#WA
z1cNZb6FG~#D=Ee~+Z>-QF_>fCfTK75&Q7ZVInYG$53cxH4ae{3+Y}b{)z)Z(i<}L4
zyOHZg%tQ4q=CBdbyT-m~XjpgsVzz5(eA8*q`Emf?mULbvE4aL91QpNoBcXOm76pl7
z@2<XlOdtt6^#+haR2L&Ok>m_97EFf(R{v?zAniCDFDJV)Ci+K9Qy|EErt=1(f5Ek_
z(5?DGZNthZ)AFa1dRPU}=U$?0L&;0Hak&n}pIl4p1@UyrDMYz$z(NGIR^IjIyni^C
zM!R@7A!J|7lmSQq>EM+oR}is@$Pq?Wq(3E{k_p*)17Y|0%n-p3!l^74A3B*`BirSp
z<rvahB<c?GcUpH1N0V#<^YyT9*UeKYwpXLhTbT<1Q$%DP`;eN-^mnE4GW*8PPNUxs
zFN#nm*18`Gj^*ck<q_@=pk2-5>z~+y+Q{}bzoS1afPAi%mCf=7RJSB<9`5u~^iD9P
zC5>uB6<I3#7tlNM`xDmZ_sFX!DqK!hAOv-Owy@ZdQ+)5q2RocAC5#(Qa7JWc;Dx%D
z6G4@%k*RAID0uwxja=&|l{p6Jshlm#hBJhA>X(bEhI7@OQ@5VKwP5srOr}&!C&v)~
zbeR$o_P;Ar%KYD#Ded{+lqr!jBxDwuEZ(-_{L!j&X4PZr9~~)%s3{;SWZ?|fJGLbt
zMSkE&o7eOd=8|I?_iF#473(T(0<GJ8tfk6kn0Y7Cs5P~E#dWE{zYMvg7m&ylORrSe
zva4XxvkWB8B>`5-&k4OSR-3?(Q<HXyFsC>bfT=>3SdZo7wj)k*9v@}d;TJ?xeyow1
zj{1bCnv5Of@C^f$N!OApB;Svs$cZflvb<WzSIt&U)3qmH*%C0zz7RPRy?~a;@U9e!
zB!fF@xSWfNiHMGtKvoVBrE7jai8Xq<zzozkFpyJ%9XqvmeC4D6sEjsr!#yV#P~M(_
z6M9@*B~C`3BRmZJdN4PzuHaP6;GO0iNocpSS|v(KwZ0hj<)xC{4R)Pf3)Tb5$y!6t
zi&A1QrnrB(RWoSC(cy|rDaj<JNSwTe<`PsRt|Jn^#ilb14DmtK5c{3CH8saS-f-uT
z&p{f)QAVC!oUPjqtQB7K2-u=Kd=?&ivqDi<BrioSmFOkq5VUZZV4pC>NvPtUdpyc&
z#Ci5&a33}u)hLRdwMZaGgBjyma3e|0K`<HeZ}dH<r%>6U>brm#_TZCO@b%r@fAItr
ztnAEwc~AW3@&S#wrA-^5>QE0+n-feZnHau<rmD^XF{8XNqqX%!N=qa+=g^cpe5w{p
zK|T2>Id(Zz{z;pB<ndr8zihm>Dk!E!?-)tmK4DgXBmii~4n?~a@%Wsd`A+4e>$dsk
zu!^QkG}-@}fCIEgqZk){CF}r1)&`lq)N&?qo&9_IM>tJi=}NowVx*R5QzZhenxxD&
zr;)c&gs^8gQVhqwsR&9WbsBfInva>%$)O7u8*p!hKbs**tSlMYQrVZeqj#KnB}gC{
z!aEU0Mzz5&BY{1zebpeXll`xx9mR>&n$>@bvc2)!nFaiLScP5u)#$4v{z8234KOMh
zcme^xT}_%eFi6MCizR0IK);t0myHa>Vp^F4`Z107Qo6J7I((7FmF}Qt{aqfp#tpa4
zQMa>qZT3e5Xff><!)a9wH;5@0-HM4xAI_LO+8AYO`D6gH`-sR_@M**K1{QKGlx`{S
z=#-qda7h#v(IG?uwtNe5L7w*xgox!?HT`8L`a<<vIJW?qtY;(Q@ZLq=lYMw+O0^{A
zD8&+@+o<$!paM^1SvB(6m#?U$S*WFu7WHWH%Zzr2y1Z}q({`7aYw5R~!>s1JKhxyP
zRTT#MTQ?gn>JbW--rZ1_698Mc-@HqWOu5w(>_)e)qD|u?1A}d>gt|&#_1G&bDXY3z
z0;IEeC>Skn$bAf~ha&4{L)kZJ%NZI}dm08xqS+TyY4VP-9w+%Ae)p2ul_ay}G>uCz
z?rEQ0<O@E!DDqL?O<$qp66Xx(uGoW;Cyc7`{F_LA!&MYv{w^E^*<uHiS|==Z++YK_
z7w9<9ZzjlulvHa63A1mavA&!J(Y#2<D#zq<xrl1y{Sw}=s*0)`_eZOXm&mT_iv7Hq
zn66fwl-{8L3@MiI9ci5}rBvA^YatgwQN+SlL4uHOLgvecz;_S#PquHRJCH!$SEnvZ
zdO5%B9yLl{MS3rej=PTx)gt(d!A+X)W<`z)mdYl9r~*+oelVEp`8-UR@chu>IA<-*
zVSnS#LJrq7oHoKM&rr^5fK<Y^_Gp*+5?neAHNQnS`|>ucflQ9JzwXpQ>8Y)E{r2L+
z0e%$jAJlyO__UDgr??wYKKt%wfcC+Lc_fvNe}N@~J7r;^sI08)ZP=d|3#(I9{<<LO
zQ@)ld{UTE$ySh~a@2)hU%@x#J5p78A5+30*swHtFDn`iU>zkA-{zqeBvXOhRjBl+O
zEBDClmUD70-t_YE7f$a^h#m1+l!ds|fx`KBCPq(upd$xzaX#Tdlx4=A1n{<JO5_wE
z%4-s6QU3*TMMAivEkwN-&wSwc+h#);(%AkuC=1pdC20>0R7#xqEw1F4d-cgEjmN-3
z5wVdv-oc9j`N51PCnUD!YLGGn<nCbX0eM#u-Ezr?8x;;t@X~*E&6bV+mH&$*eh?i{
zK>Xu(?Ac%(Fgug%eNY_0g%&0~Ea<%&BQG}q_Kr>**^OLU9qT)29f~}dKDrZ+jPbsa
zB-dWxyV4=$v~#hFjyCh-#twX$|8n&+P!%v-L`w#D9D~LH=iP-d&=wa=x*((D%=u9g
zK6~ZR;U~_C(N5Pj-?hbWwi#~ohHSjBe81tmMl$U2E<xO_X2X$#4{q67;<|!W>{E_a
z8%`FWh|QN}dPTRmlt7(1`xdL1^t{;5sFd=q8<aQ?7@6OQ##WYtRMlTrqOyP6Jb$;#
z{0BKaV?=+eCAw-v9}vy{-_4M55b?$UL&oUOW5^(N)eM<MPvzpP88Qd{9fr*R{7Z%m
zx$FNdL#6^SWTdYdGHWnog24?_As=g~-t%YCeiL@j=H6g3;V@Hgoi_-@6WQ37Hv=Iy
zc=?^czq#;oq9qyA`}hO+aKG9#R(ZO*xrN)D>_L{i3-x;l%ZXWt5Cl_fMWqEMxfgdO
zRjXY~6-oGTx`cKX;#egFcPo4|ci;z5f8yXtF|fTm0r7XsNS?^-Y5n@RyD1JnS3QmJ
zmZAV{q*nRHiOR8`VAQw0136zyp5md(E-%V_iS0?)nDuexU0Vd4vegbXKIGlN3G=$q
zE1v|_rXJw;8abHkm@N?{B{h{%AEH)WC|5oHVTHqQaj(21FUmF^eK4;R_(BPPSN@NN
z{H|U=@$_E`27AzOkBhQfWsyckRSndwCYPbv1bI~vMW?m7C#H^hr_9R)KgY1Rs?5YZ
zq~<ZJ%Cql*drwg;jRnU~@xKU0Jkz_t4|AExTzY(X&iR_=_(7VU<#^B5`-}dUUD;@3
zDaS_}HP;ozGwcN*9}~OIx{M_2mTTgGoV1uO10fAiE7>0*kpGRO6``84uX}|S!9sI3
zQA;_a1M>F6E%4d@i@G-tYx>OFzD2Ci5m`zrB9MqwZKsULAUjD!)Yws^jx!31Y^jMF
z7TK4OL<9vZ5L-L42bGR!4TKm05yB#v=#UVokc52+ge74KBq0P6o-6I#+UI?B?#KIW
zpW}G@R}XTOYL4IUy1vVKeon9P?ru=etV~U*rl<deeAkrxik9Rxb~xsZr0(KoZT)M&
zdi2(FyH-y>(BK-NAd`WNOg$<))O(JbANa?L;-p)(@Nl^@$oVQz0^wMGH;X;(oZ{4y
zel(TiA}%StdKm)6)zPRmWf4bLD(I!8KCoYxmzUTWg@8w_mF{N><$jHiI__n^lQ7Zm
z-~h4RL;z2V?9smAec}&19%n5IObmDJkD9=cW0}mkM`A()VBUggpv_pkh5BS~(k_V-
z%R+~t*I8WNNSty<E%f#M0|@w(w1cFgQ=&*F)Ll1thbWYp2!?vU85GYJpsBdW7{#6u
zdyM{&JN-}cSk*numOCcU;DF`YuI^bzn*#p|h@Mj@bbQa~8C=bS!@JN|K@>cGgx<fx
z7KYj?DxGR5q%e6Y9Cx4qV{b&DOn+Xwsh$h~Ti`uvnA#yD?E8-OhxEmLkPDp2VTRzs
zX(Q^H1c`|?O;O^f2ZfKEf+7^;>v_QvTW5PcP+1c{7oco51$$>B`pe4BtB=hl`w1gF
zTs<Bpp#g=_bcKz<&ya?EvJr!2J{V0e&>OPY?;1v!fW5s5J~R7`bjonAHihhx?>Da-
zreEFbyVsEsL_$=OYUH6`eL-ZT-t!$vRkFjcoU_`MK14@+m%bB^tskizY0gi%9X%~v
zE6k{@#v$xzJ$@jhTpC|dy1ph<wU`WscgYexOoYaf1Wu6rZg&c;WI)2ssF@3%E-E7#
zEeULROBJ}GVoQl}2m}pOm|yL>({`OUewl6PnRS6ajD?`>vd*ZdydW)kj&WkT*{ASl
z=(2&lm6mO)M}g6(SLu#U(KXJ+kxHByCUmNZCe_zzno0C^uh8Z+{PNE5-vHcR%X76`
zknHz<XS5B#p=5+`K3g9)C_4fGo79bhi16bu96r}vKPh>lpO@~}M1nPIX1cPAabky(
z=z&E*y;~^25hHAqmY;L7HrkuH*4equwz#%CxPv&H9ncy^deyP8XAnQG(sSVw;&YX+
zG-On|4+x|(IjxDGTi+?2gzUZy)*lO7s@njR-lk=%>Zucg!2D}*pwo~YrD5+SjxWBO
zs_LGJ`pO4^rPfbmEJmi(Pu%C)S@?p49ygV}4S6+`Hx5$EBi=bzcz;0GFI(zav~o=f
zVJf!$^z;DhgPF+(n#A>RK-D}5bWO*gL{;@kSe#6supE*VyMw&Kq}?0uRZ(2^a8rJR
zgec)->T=}Z{=h}$A9?m<RcDY-;8QujZZ!HfCd>ne$0QQF5fZgSa>kl1W|0SLiwjzR
z6s|RhVKePFT<P8bM9;@$8B!&MWY%6{le6y(a|`wio>NUen-w26;7C?UilqO%C8u!6
zj*eNyV{s>91TPzUJeKcQ`(D^;ht{Iyoi?f8%JR$pMth!4MaSg6em&;Sf%7zB&$Ex-
zdY)!!p|o7g0>VK9O9knU9}6%bW7mtexCN0^7WNcV#qV*%3-sxUbHP3h?s8szyrN|U
z3-pdt4{ZjXGU+=9EZIOs7|swirY9^9_8$kc?=9BZDaKymSiwTufF;koYlo<*EuS_^
zcO4ivGKwkA#RuBaAfab)FYpM(H#rL)5}mK<YPhXp@2kMtME0M4i0p5g4{fm_bNy$o
zjh!^fHCN(xh)=WBPeLzKD>=1+eAN`^pAGUa&*5V`mt&aX*49?)YO2#4@Yd^HA()`J
zY|&mP`92+<uW#hW|4c4c#y>tuZL8n%F;I1A+36g)>?=BYYg-R5`+TT`pJEue`~+`#
z3B(R8VvAz4j9fQQVQPAhgD^^-`u5Uxo(c<z!Z}3)iRqGWLHw=WQ-SK-Pm)jC$8o&s
zYRb~H=^nm^=6t0=qr;6N87lFG{Mp22!VABd+mWsih`vq%M<p;0p%v)CuorwWSAMVp
zJItwq0&~Q?YA*OzEzBMZL0nCm`YzSnYH=s`0){hJ*jc@aE>Bcee3Qt_FBR@KGA<ub
z8TDZIieEnjzd9q0Q%Y?>+U~!zJbvbkE-#w(-T|a=;?w58yS~<4?jIV^Y8oQG{@|@o
z&fup%2eV~MYt2uB=%jl{tpWy@=6Kf|As4iF&^Z-meT2}3Acu6ukfcLcGH4qQ?w!~<
zz7~)g_2>JfV)^1Csz=f?!RkpVa_HVLyVU-L@~?qVw3y167%hcgJ|l$yX|AEvcX$Z$
zth@Eb>Dru;k2=q8vW+xIzH;9XifRwunFHmnl=Kv#vYN7ev79T0G;nnVJM>M%3g~kA
zqCYceyyWH}*w(pGXwgt!2G0C`b2w;2<>Tg5z;_;Odl%czM62-VU`>4X`dJ!Uqy0A4
zWc>533J<TLUt-z9wd?5Gu)6BW;(!Y>nGcF?4s~aAN+zjJZ2_SnzNQgWSGP2O1h?_(
zeGK{r5RTrBu7W!d1U!{!e>Ib%IEf!2pYJMY#eI9-a~F0vb$3a#sJ*z`pWN%gZt*J?
z=xulj0;SqLEU%{07l$T%abM<-o9x>9vFGibyoQfgK5A5%HM^<4z3D6G1x19nd3mG1
z29>I%z&HBDg>8G5a7PuRmAB~f{(@AG46usr`!H}mX;U;%*gu#J?DPxAILvlSxM0Ut
zz4;yUIpKTe>;~oEDMlb%VfZF6#l?U_xBfyJ1e;Vk4aMA}<_BO$S?039-oY$RJvN3?
z$&C_kjOUREVaxTjJEewh;u3nPB~iS(2Rkn$86p;r0dnIt*3qLfl`C$2vdjSue)YA}
zv)*b)JA3`4S=66o<$2KUkd<R!&Rl+Z7QS`sRNCF_RB8?{y8+rvVunJ3Z`-7=VV4f(
z8}(}-L_~|Nv%9N_Oo=lbq1oS`?dd7$Sw{?2V!bf<Fm{H#Qh5D-b-g?nW+n!rR6ZX;
z02{W!oQ^lbpZ{%0>vI$oCq9}F-QHZ-E}v<iq>nK#UmrhjK2z$NKEYj@TiOb$e7z6!
zVL$EJ-<z71jmCZ5Rl~~Jyw07`H8Ih;Bio#@>=(YzAPId{-8+^0t=c6<aKD5qr+u3a
zhC)7u>tG{!nV2eg+(KDoc^=FzQq&$k=!$c#7#Os0zn6af0F*pzcEeI%$I|TM-ELDA
z$cn^-;NF-BLvRTbM2)1)&y%N4HY$xVN5v&(RW%ip7z3z|yHhN$$t;+fV21CY$2F+_
zO5~hXcY(!{ly#6Dh)H$=m8bl-tJ{7#bbnEgp#_LAp~rINV7{XhM)iP54klKDQsXWZ
zKOp)W(stiQ@$Of}oFfJc^}f0mt_fcUsk@4mm753(f)Hu&YzyM5Yo7do&#v{CIh&`V
zAyMX_L9xR|+ZX5t&ibsRK2OtTq>9I0G?SaRiBE0i#fa7l9$Taj9RAS(TK~oV=;6|h
zMVfM&_&Ri3(1j1XT@VJimAsUQEbwydpKZKq^horWoY+^uZAjyd*lM;P#~3VJHy_W*
zIk`FqeT*r7>tU&Hsq-tr;nF9qi?d4+_jm531{On`K6l^uIt@Ofk)<_@u)h13-J65>
z%`>(FPw{~-je>ZFhGf@(K`x-C+c~BVMB*y=V4(R;9AvBDCPOvjyz(kFYbbT%A*9Il
z!NO^5ET~hgxk>Q(=yJ#PP?;(O#o60efFy=eD&0$}4J#Ew9$?I;SJu;$pWK)*9vObJ
z8O31d59)mou%#eJ7NRO(Ie=OKQZFVuCMLUFvTA}BY*cqH+Jcmv47snkB%8jC=WIuJ
znp!=-p6(`mz}-?%Lljd~!e&*q0#mXo0VS=4M#udfcl7%ri+>q6J*U(cM>+zQDCFaI
zXKzw9zMri?(V11>JjD}1&iixbK&4dllgMt1FBAb5Vg9^7JJX-~g+C+TG5QOan|ZFp
z5R4lYvhT%6NLrpMg9P!Vsuv~y04XK%=PVV^ekOqa<;*9K$0c_>w(8B>tyv0tw)4m#
zN{3MVfz0%yBrY->;IL2YnhV6p$~<V1baXpO%6p{;3xPy!Rbi3UqInw&WB>#*)IjFs
z9-D=49S4bZEp!L!cz<R*(bx-qVI`KiS_=Y{6lT9efKuSb%kd5a-2dMNDA_p-Xakg{
zf1dy)DB8cz^G<1j=3G+cWKNtwiTLphqNZMn;+sJ&=4iu6XqD^Sag2}ZepN#9T&3p6
zoo1J_2EwC#p#>oUq2+o1s5F!tw_PE@gj2bk;IhI0>j6sley;!}1o!t2P$D#U-%Ff#
zt^48PN!aIgmnI)aThG%Lg*rI(^-t%HML?UjOk{mx>0})&^v{6aaMO26Bb|fH4pBeJ
zE$Ak3LN|&WZ!w&vf)@OF$n>G~TqBq~4}|<iF$$&KTGMMpc->FGZT7-=>QJDzF{(eO
zDm6)BnW#$rX2tSKXG<_1SVH@7Yw*4098@8!2Wx51E5-Dx9+IQKZB3^4wP-FTmwic9
z`Z#1Zp)F${1mi;u7F#L~cA6f}bbV}pym)hq%T%=9hzS~1<lKy3-8~F|#Kc|O_Q(jE
zc>(*~<sK_;(Z`an++Dp-_}~oU&ImV2&QD(fZS?6J$GO~V_I%rTs7~PeN3%!+=z8!y
zNFBjX8os-21qGyH{8V`jy4Kxn=>&1!cfpRXp)Sta)ejRh-Z5tRA7~Fjn%5vk-k;fO
zlwWqN`0BZ&heddUi{p>FE8Hg<m^q##M_h|#4}V88PZn+i!Yfxl8}ya%b|NlsjC2|x
zUtAOk7Hy2+JRrWCE8+DxWVa<Ncb_0eo1pNLZxZ<~d?mG>nJhbUm-UV7llx|vEJ6{C
zlC#2isx&roi5`hK+PHj7t<U4L+$7%)z5<S&jI+u+?XKt=e8N--y*?=>Lo)*-X&yp|
z(-Tq}oL=LPT3yKG?y{q5h7squ@ORupYu9QP^Lu-HO?m8<Z^l-Nzx*Gq&VW31;ij2g
z0Jx!73!4z+j-B4zDsSmBJxeM3X12Gpn-1SqyUHixJ81U|jW!zdS~ibwDX3@G2I75z
z?3oaOV^`u3s>W#|GTpeLAt0JcBV#uBYubxfGV0(GLd_R(p`=YlE4lkehlVWw(zxfv
zh789zy;UO(gzP)=m=lGq9~WxQuO~3MQ8~p={@%db33UqTIBql?D&ZW?9{g7-LVkX3
z=hbBW`kAa=g9W`rn2~05&W<FP2Iulsf(|;y=>%ea+ruJtsl(5DJ58$7zuw^znEX&V
zhy{*U+2CE%H>J;iOjJ$Y3i7uab%9Z!93xopHgbaX$w06GCo{{F=;+{<^rMNYyxSo|
zef}z5Adw<-uXRKqjv_9cD)vwUCbc5Dm!D<i7V^NS*bO$?iHra~%*(}YXzrKr(3ZP_
z>ifY1e&O+c3t}JJ$U?tm+v;TYi~Pk@kq%L%12KNO!DOr6*yW7G8sldW_sd+(KiM>b
zrB1@J=zNevg!DPOLLre{F*RK%>TJHQds2(#sN62QzD-F1Y;gt^F4}&p2?Cv__r*+@
z^N<mEd=`>aR|s00Y7n0J&XDh&J3+@isq^e6@f*W8t+?Sn?I^R!_pOcA#rc1S{v}?T
z>(7K@+IMp+xcP*OxJLkq52DWx%Bt;(M9Z<>gOwneqdKwMq2g63C)75Hw|v>iwbH&I
zn$whozqGs8yUxNwe6!g%W)%6@w0SQjePgiGI3c@>pAbc*mA{OQu%Be;wtvGe`Y#qh
z&Kjf91A^tIv~yOW{{Pzi(-S_+V@7_ULG?6Xx<%gvWD5jG^w~NGlLDaMj|Ouk;H`T;
za($+HgmP^oG_c?{GGh$F{stE|A+4^bO-RRd*46|9<8)-CRKZ7Dz9XAq?g!9a&;6kM
z;!XOCp|+XQL!Nr}mMMnj_Rpp*M?TS67}B&?2;Vomr(ypk!A%eygkDz*WFNaf2CR!p
zW=<u3x_p|mW4+Z~1Xe=+0IC2<p>g7yC{A;JGF#~&uo0mcOg~-3d=w%Y%qn8pB_u~y
z?9IP7^!OJbfk)_5MA}9BuUDhi%$4}HZV-~%HjIo@^(nXKkPU>-qV;=??gzN=7Lz-F
zV)Y2-kP(nr(YUqFcyqmIcSF*=FZNci?z+`yenwDr2kl@f;g-8qjZ2Pv`1VW}Wzat`
zkcf{?J^W_4{p%j_y*-Y<U^wycPc@FhsP(`vee9Jn=Lq$&(HaS@3dBpPs9i!#gk#c*
zvAR;o-2z=XKZiM(X}?qTcM$rS{30dyRlr4=Q>>}aV71ZqIr$OZPD4*0TeyA__vz;%
zqgf6lP<^ekeq3QWQRdou#!%f3JM`H_{o$?tnW=v`sxR=xqRJY?$HKN|$Z08V+;b3x
z!GaJ2*SUMV!kT&dW}c_PWvdsO3p$ROXT!o{c)&@@>3;dZis70G?b>CgwR)6sj~HTU
zibA%;2j~=IW7P`9iP7I`)u^}Q=W&(6WhlC?*t22J#zm0c{Bf9_6E^AI<U=$=#fjV5
z@>8HU9YOoXo}IDeS8y77VXH)1!keP266+(o(|lD;4;t(WiLjg4g)#?PPu7AZucg>A
zX+OL(y}5n}W9ziwKD$ipB;QRpwyO@{rP@=|`8nN2ZRT^RHEUc%kL(9s@XWJjsic|;
z`pLfK6gJ90{&8}`rQ1Mc28BIh<_<P^kVzn>Y39MhYzJ^$*Yo&hFwI0(Gf8EKDO_Ch
z+hq@cvBMA$g3tcmVM@Rt{JVuIMS$D9Uh&_w+#4JGU*<1~M50mk^7ZMM_wToLG}Dr<
zhjcrZI9-b&z;`HOdT;n3oSO&2Bq|AYlB(bvNoser>FLw^LOAIpY}B#h6yOh#Tjw}(
zNDWCzE!VtQTLME@Pu9u#{zA<|4KCy*NN|6V)wTj;abRN$tPw3+r~@h`;?SW4eS4DL
z{OwURr*TJezBuJlcp%R=?2^=GGs<Ikr(ddNhLcP*X0XgzRbF77Y@Cu|xPHcnyN-{S
zXdF+tp4(L;(@v0vWp9R?w>K7pw;V)W1Mn20ehf-|hXV2a=XoWi?y9lY98dxpX{~;C
z9F$H=Ks4@tN5^NJ+vz>X50uujfLe6b$$~sfCqFuKMpswH3pz+OBFI9&kd#GuESZSS
zYp0SoU&>0cOMEfy(c14Smr9t&ih~jAB&QMiqV1Gyr;)wjC922|egq85{ft;mE?d)4
zic2%d%E`2$1G%sb3o5hyhY07Q|7zA$p5;MKw^W@fhNZ&dR;)&YK`GI&b@UX<S6s>g
zc%r0PR(|0OKS4}NT<FO0@c60%j^naVHTYoE-75_ue6!ED?-=N@yucmATKJROo67k=
z({1(EVlZ~A@Q15pFqwd3TSNrjgy7Yu-gZux+hA3HClx`&#pt2t#$rhH*)SCnLs%$}
zi^4iX5J@$(VJsd!b*xzLBd}1RMj4Yx`wY2X1}FqwW#gWuMM<NN${iS!%OJQWgGF-7
zP#M+YG+#dQ%Gm9?`PmrbaZVI7$LOvRroue1_}KKWd&PUDQr(2a(21--RQoa0K(zSy
zD~Cr1Wx-*)P||O6<WkT3r3uiP7hY?{?l>ng-ML!+G8iwJkPh1l1Pg11BYw&Ht9VEH
z;d^f(|82<uVlr?)g@D*=h4<|0GabeNh^2+=?@dQAx>}}Ek6OU^qmNh?h>__H7;gS%
zu@H-w=`Y<6!-r5X_z|$bm!X(fjUp9S=$J6JZ8Za?5XI~uElQ7cI+M3#V4914#o|)P
zpx*W8kiwx|H=4IvwiQ}#0mVv?g!Uo+mV1S$DZ8O216i2mXjZQu7hMs@l_39om8H`e
z%xz><j@y_eeJ!WK6>4BP=l6-`Y-+3PHKvaq`gpI<J|ErR9*nd98L<RVZp!$xzg1pu
z`#Mc@R9u`$H?7svlk3QMWsrY&x(V$)_&DpQiEalfoZkPu2N$+0RQbr+jII^Bbmy6f
zsr4;3Y(?`;(m?piv=q%yJQmUoQPRabO}6pzkzq5H<Vr~}%ghQ6Z2L9cr@<~NKe3E7
zoBI5+b_8k}1N*ebWvg-JF;?qtENc2}QC5?lb<WlzzP}1}JndnY9}S+!DS_g|kq`xQ
zs=1E&04l$S5k=~Zk6RYD=K6(WqfQ4}(dB-pp@=lgjL1?t;b%kfD+Th+JoC-8`+wj=
z|F0UjVavy}=(!F0vQw|(y-AN7qV_@^FLNpxW3toB*!2$$5i%f4Z009K-|=cMISvXK
zd53k6UjZqBCyRTC@`fu~DgvX~ai%dm=V}Kz=Wux!sWKj&)t@gZLwa0pJJmLE#sT4b
zhyYx(mKlyCWBxc#MZl4{3FY->a`*LNB*bFY4|N)kuGJmScZsI0ce5vR7QQob*Db0<
z*G%R<U?HEUSAt9;)2J`X<u+~fAo{Huz>qklpR}GZ;o-jQgDKR8Loyg+FWwv^zuqG?
z(zGxfTJp8FH)~x(?b(w)?0f4i_3t*V4E(yalxxn{#*!5mLe5)E`z;*)KyjQK#b=d4
zpc3Yd4OStuF4%d8iRaAnVn(l|(j0@Ab$-<@M3I~oj@5F`HE5hd_ALm3svU@p8TDj?
zM=a3^J0i@Z_=I2hOw?k;z@eF`&!1_ZmVgtV`JZE4O0SYa+@CdFIb^72)7u1_1LFE;
z`Oe|;vsqA7SwzX|h11+CR>Wxmg_9ZNRWa;?$App#Y9F!64H3Kv+VNJ8HYEzPmEBUv
zahU}JzI|`4eX}#QTWm>cOyTRl`rIMy7W>o2XRpInfBj%trHp}N#r4NUhlwnarw*L~
zP&ho<5t}_DHf$`h+HIM^@2-zXqWL-8h^_J|sKeSh$G&{du7E$S^hvHNC{8TQdS1`l
zkt3&-X*w~~a|^bjCQ>DAtn(Rv!5yclB+F0srw#ZVn)e-^3wYsG<_fDbI~^t-uG~O^
zZTpl**drclM*53|tbu5Ihs>g}9ipIvnNqtCaG@>RC@-a@wUv%#h$*mzSjpO%j`=$`
zl%wrgmndAd$;wOVc&&VrO)SvUU(I!W$6#Wcc8PtL)N$-}htQ~_4V+qIeE7`+^ZK*B
z>#jB~jB|aC`UECBwgNx?%x%Gb?k&Q3)jg9fs~|Cyx}}MkZ*FZEnC$Cd98-?>53-~w
z;%3LUpKupD-hyci6`fmiyjRIwkc3WB4@o!;qDW4Sp93!4F|HHDxY?V*DGa(?Y7ND;
zxIyELR&J(R?PE8yn~V+rwY@XZUg3YE+xq^oFsEcrv*e$&hk^JPsV;P8I9_qN1u39(
zx!)}I-5;pHhKH&unCM-LA_qg_>`10J!@&t+y;T4+!s=DMd1rog`Tl==XEtcXW3w3l
z0h2r91?2Nd|5R7%EOS6NO*L}R^&}ZFdR4o>P|`4hK}L@>Is%W5X<LSaiiHq8JDYVN
zqTxvm&04fAeeu9}k&9juS}%^r9<`}nY<K$6TVNwLN1Ow)?*q^;0x~@U&T%GFXo;?N
z+dq}<>DN72p%S73guKKCI4*7T{y@Hn#r2(9XkEW@MQ)~FVgAr=`R|C{Glo->nCUJv
zD=B<eyP1`I>8!36GlE2*TNa8rs$^gZoqp$xp+vivEm`{5>dm0WG7Y>(hL>q?EpCQJ
zf7w{~8vysC55q9&VgK@zMi{IM?55M}FMzVe#%W6Ev#R)!l?`c%2&B;3T5b-y@MOuS
ziyg;<d|={UpYTFOEMlf$LJSFf?#4V`yhSp3xLT8+lWZuXWMQbYwzGE2=?vmkBa^+t
zZEfckqoe&|{V%0tce|kP?8XiI&FuOHVh;hC)oYVtM*n)h)fZLvkh;X9Q>5jbTJZZA
z4)vXn$d%pnd-p&Xc-uFI?n@^NFi`oX!y8ARXF3C@5A*I@MVF1ow92t#_-sSd*J-j4
zZ*ZQH4*I^y`F=Bs*;Zll^CmV_gJCvc+7Z*KYnLgYE&NOoAVg9ty%*VvQ?>VuEP|bk
z;F8Js(t)1EHnMLr&_15Q$F`j2Cn#D9QoDhou#9i1G>%vWOi%hjUz-+t<B%6&8*u~O
z1<h_HJuMyrKL-WgiM6~koHAodpA~QCrIulhYGzph(kOB|>{4jeVES{&IThBKRC8rd
zxw|i5BDO5#wZdpCe_ZRJO9T={@e^o{_grOF;-dIeAfrZB4gau=nw?bKmVi%8T#^&p
z-{De2YOfRI!sl*>USG~G`r6&}I@DW*W{n@NW-F$;x=*H#)Ph@P;`+TBGUNi!pvAAZ
z$381d?bbewg;tYv+dE3931#$hskNS$+BP0{;SQ4b6uPIO<rI<Q70yM6OL(6`vA~da
zTKo`7zdZX#W_e-;C^p+8Z|QCL5b^~i)5B6wNU$}k3D|7aY~<Q%wPzQrS=Ty<?gzEl
zXB)S08{@rEOu6w`m^yJ7AMGGS20-ELsOp_)j*#`0&zY#*B|^=p-!#RXd{e~>se&6p
zPuO!$EyP#?tX9`)V0GMh&g%6;@T)U&+gyw`*BrQQdWrkbzJ`W&0%)jD{F6Wa3LMi{
z0N$gSEXt+V*U_(@oVkK^GvLK+wI?_WFRW*D$qoTE44PDN@bP3R#KJA9%3N`|mlOs8
zN!@0Ju%u*J!B{!CcMLVEGR%JD(e-jEU85l!DJa^k2J*k?9k^i_H0guDDRFbCy3(v@
zr4w24#X#y((=%(J`{?s>!I?*47ys&i`6>JI_Usg@an~@)z)dnbFU%wUtu~rsFEGKD
zffz;JGrmLU)mjE7x~g77Zrv<Nj+s9V?LP%h@R{Z<k#@SV0su6s(Rc{u&!3O==Dnjk
zwArTRv8gs&y$MLQyrex<*3dqFEsc4zpWYv&&1nWT{(v^nJEA&k(MkR4a28o}KGaEw
zD$U7<sk@ln*S!s}Bh!w^^c&)FbAhp(Z7_cd8W_{Y!!V6{PYo7M@Sb#Qe)Q>cC`*b?
zw2QKTarRHi#^@M<rOKh8HM$@@&qZvy9Aw>%x}uw(-hA<*0%B=}wfl0x<Jkvk+w^5E
zs+`M#YkgNke36K#j~)(ek#IPP_g`jG<bDOZ7TC7Gc&F_ka$l0`cu`gLxab>tU@e>G
zK72TU8)ArpeIZw0cWa#v6~PMBOF*2u$?L5(%C?IhT0M}*;N6@5hhy&}4zgc3m<gBW
z)Y?P$WL7)Md-kzf$OfY*Y!)y$YOu?-wC?z<>`H}SIAgd?)j<s#bas+;f)vmg#rMJp
zburqTu+lM%fltw^;8MZMYXJxh_Y#S~l#K7(87XEw00^%2p0jw$6%Y?v(vph!<I6L<
zYuI}0_7{EC8968a3G8A}%8p!)jX}()@uel%>4iJJgTmSL+%fddotGg*uBV67dij~t
zxW5$)kv0;;CMeV_b6R~|vWc8m4WW;RXa%Y&6$@<JR+j&q|K_rJ^DXG_A9|_f5x+!u
z>b<$J^|VgM)Dc_1*T>JB&xk>5fhrSN%|Vrad(9mraPZ+OIyyp06t_j?N2x)j)myCa
z-7WSd@rYLM3{Nh*f_U1>;Sn_5&>~h=33r<R3M6d5Ou3EpxG7}=VsO1<n<IUEdz)p?
zv^&O5j|UKLEZIfcM6<)n+V6C&F9|QNJ&3eY=sOwNg%-?khOfx^TuY@%Nv@Cj51XMQ
z?DKfpGbb}Ab>^^55bIu>n{u1vli9m=NxYepfm75PN`neG`80xzC2{5|cc5m58SDRH
z&UfGXemYjyxc`=@EcvCdJ8IwpMWBHMZ3_rZ{Z}>L<YaAM`{r%kYb@q^_CEMgQF*~?
zj8yrBdI^kCoE_f9G~Ta0vt{;fe|i0-xvbHi*=s^R|Mf}sU&m3S@z7ug8G!(tgaP)G
z+~C#6Sql<A0m~B<PL^t7ud2Ix4pv?x$Px>VTha6#Da}WSP7e0$<&ce`qeI`O$WIbS
z_@|WJ%UMu+eV}X?ea$n2)oj*xLfz*kzBs#L8(&Z1JP$QYW+0@Cn@k7Xo7R=**cjmq
zuT!uozOV8&1icCedFc<pGOyg2bEViRMper!w<Ba+da(U#;mU4_6tlkG5nWSc!qByV
zzsP@;B#MlHuYPpuI$fD_q{yDlMb|w65Sh~d&fPY^z*Vb}e?t?V&rhG$SWLZq*_vaQ
zJ@mbm^&8R55K8+DqP`q6d)wi!$!*+OoE!xj%+kOt{?Bu)!<^gkeGo~kw@>BWB0YV@
z*VOvujjOUC8$ciX5s5iEm3*$u5Y#!Neq1D>t&%yE8W0!?fFQVq2~t*N97e{w!z1*a
z8gx@u@ZxVRntf!o&%@FTMal7708F{VsD<wWju00T4lc5J&GG&89V8>Y3L7Pgey3PP
zzG7~nOM_tXoslP6RHC!IgX#u$&<Tu(+z;ijnBMjy0!~3ZMnKhCmgwO8ZwHYfH!dx8
z=g?Kb%q{>EP5f%_;2zk3BG#do#M#pO$0>z+x^~AV3ml(WaJZo1To8UGV|#YAUuz$G
zO6!Ea3jYj-aJZZ0Mllx%UL7xoCK{usY~V>j48<V*q(V#wnhGG?ed5m9QFFYVOi!P`
zWci|D&1m(9#k;M6FM?{;?sI4Y<X3YLtzjF#4x&Q4(1aM~%^VNrX&<O8Bk@HF@a*>I
zw~|6F6B83IttL644l<T66|z)-_taKL2Kp9_r@_*FX|?%kELbr0N94XU-r5bkHy)~;
z6Kh^yTSK?CC-_%|+uy<hAM!aeH2JD@XK5+79<nY1U0388@t7lLXD~W}qr##5_Gz`C
zH?R!K;8F58X9ry!+(u4V;d?}mP`Gj=of0|ofTp-vf@Jw}nLUsNwL`E?I;J^0fgqu{
znqk+ExL!MuSq%qx9LM&-(?=3!*Hx!j1`O{DIA}#*bN`yrnx#Yj`-{dSeIP)~Mzde@
z^_lTw(?gF=@RG|DZTG4xhoQuU=m4&$C)#(AbU>|k3Gpy<TAc6&*vi^xr=asxEH{M<
zuz(z(qnY_Fbu^<dZvwy8aZvBD%+0F5nwY$Y$PWlp{nN@xL%P8CDYw%IfOcwqa;UN+
zJ<M>Wv->9e$3H=!$z=^wFRuiZRQFo)Sod<x3b5$2WnQqf=wTH1i5oiFSL~%;R9dTU
zuv7!rU?K1e1E-I~X}=Wl71-{Dr%XM+*tJ4bg0-aaKy^8$_L_9fr(_z>>|=-e<gcOT
z70v^jM}UL&b}8JR!dG^OyS05|1-xHT1v!<(m+Z<Oxs4&>1ICgcZc_;7S`k2L+5@1&
zw9c~|hu(UKn!Km$<l^C>m6cHZrM-4espRuxd_RCF76`ppAJ@y`UlF}C<Dly^FNjy~
z&2I6VR%Du{_a`gA4fKnC@am|6l*c-{i`z0#S=nLY<x?Y7d`I6&USS)|_z-yd3rXl?
z8g7RKTPHpiakqcjqEvm9p8oWByIx^f{?6j&!+(hHy7_EF?ooHMZBQHnQo(OHv=%B?
zm{3v%e4BzzKXPijqSSei8sw$S5J?R+r&4P2)B-jyC;-)sEirWBp2f%L6Ec?Cj{|?R
zXeYlrlS`!%3HblSka_>NNMUANzj+;kqg(_a$;sk_6IRHHVl;!w=MP*=meR%xV6bsT
zSgjK&QgMzN+2UJF4ii(8+79em08oqNW@+UP#z+Hu_xgg!&VOE&)9m|9o3|YEv9%Yq
zGmqdyjD`2PRvF0Ltk?mAcy)7HeAa1oO-6hBa<DJXWV&-<PRu?a{p1@>iOMQQo%Rhv
z+!Y9&pXFmB&hQ#hJDC3TKK#05^B46{`{d2CP7IR|exm-%<+$X{`VR63wW9p#8UNAK
z>X#@ESQZRM3<e~(t{T6iR({`2$`A}dK+=fpDS)M&bv#`H-`F8L;l8|ih<BDA9N$jN
zvP*?v6&bFNsoqM;WdFg(!r9eh^)w*)C9Ja;39W+-&v0n7NJuh;o7XXnEUUy=0(@IA
zMI+kAR0%#=D32_c2I8}pCi3<heG+}~m|fczwHwaYZV4GHwT4_2wG0+sS}akSP^hF>
zferD8z-gsP>zvn}Xm-@{TqhEP2bm7)ejG%75~k_t5Tfwt=o+SmZ(a;&qv}`0b~64Q
zmGL@lUo|_xa1Z7H&Rg4RUQ6859J@fv_foprr})4Vle80HDpMTjpkz6yewgg8`kX+l
zGARy_;tSkxJl5I8RTb6Fjn_GRN9S4oW}!do6+dC|p%M0LV15fD)x^yrp-<GaK+?L%
z$IdwN7D7{6p{kqEZ~4pp5%JHnr<+Dnpx<R!S{8bJn7ckvhsK;4T5TF^Ha%PjQY$!%
z$$bs%MlPV|&6`$F@l~VE2W^w4tP8Uki7%yhJe0?a*Aqitqz{P)o^W;(Z}1m}d<<9T
zeWB2+V9ss@!=X`f8@oq6-9#thbI?ivBI&`rU)RZR8Yd6<FL)Hl>gkv_1B#3K+PUAl
z=TUF{j~2BEBG62r0izXHKiPCIy?_v=Dg_tD1QmS{>EpO>&=I$u*1)bXDu8JKd0REj
znnZewZ|V`Trv}Lp%TJ}ANL%^j@zV4{)kGPvbj}@TNnBs1XZgw=LLJ%et<$@(1ogG;
z*$&v^v0Ef_zlC~!pU?-<2-_ELy>|4rzp=fY***aZIoI9ry(^Dov&Qbi(S;k=S0-Lw
z14AAAaog%7iTq4-5R#OeTBmv50iK<|v#&KQcCqSO{wxrd;BOTe!kWSVn@W{Vd`ma?
z*qbnoI2X~QdD9xazOBJ`l@O!VXKAnT(qCWWTea7?apv~7&Q5pwkUd;o-QCA@o-H~M
z$ezs}%>eJ)H2o4-C958g%{vC`WAbPDj(EQ6#&tj)<2D{GcB0cJ{AM@6M?0CJZH{_k
zxz4jtXK8pS#m5lU@h!CDr~xR}oYJ}rmt9W;3STmqPj~Q(p8pVU=)czEhFS2ep6T7#
zipbAVhlBypg(rM7^^`cN($r?ZjK@!BMAG}xU`hC|zDtME#{oRyy4_Qw=YFOZ@Omdt
zl5s06_mjn*c3}h_)gf%vT^EHYkWP(^jL2t6E<NvPwvK5F-DA>|9<PgE%R+67p8YuO
z*Wcd1ztfd3KkS3=RVJ0MqM6Sxr!etp1Lq0X*3fqL>aAhx$1T&O!Jo-agMQQwyWDf8
zx4_%LZ9kDGfNjtYLal&?kCmV9xRfi!R3O=`q%8V+!sr-q5ugplxkxBBTfE~Tp|Zw_
zq>0b}lAu2v@<KDVW(Y~YWyXXSnYC~OO?*9vNd)y*BI7FPSB#64*`@pcBvsOeNdq2J
zY_8YZwsbrvm>?ge@ocO0^fg!L5V)!Ym30)1mfWHucZr)l`xpEgo&uA;NVGoZ9p8wr
zb~f%?zkmGAbCj+fk2YVlJ^Z?pdh?mdFJ03rpz81WzayRLKm0pNX9z$#qw076mh>(}
zYm9c6BJ*k2d0qZAdTO7c+b)MU{lA-~#^T(@X+R5i)h856<JPNx+SB*yr1$a13;|^_
z4_J8QQ_j6b#)pZH98Jp~nY(R7n6PmC{get8>C{8+)c6wftZB%kUa6-3qDFqCoKxM_
za>2PR+SioGn=o1W3Tn7~xtJzk&(?v<4fhRXUtM34pAoYT5)g<+xL_JdI%|e<Tbap1
znR(6`1Gwl}TR`Nj-k(W;|2#LWbGd%vBvJNa3yQEhp8!XPRMwW3yR{vGr7fQd43sHL
zoDC6E#hio=-S^2GxB*@si2ghB1`ZD?bS?w$OGC-M!F=)sT-9XBy?78R1zj(|z<%W9
zz%E1KGC#mI^Vj@KCn<ImefzXHUl)O=a6|EEu3PJ$?CfQ6H@y&1R9v!)O$c5g`YC&3
zu$@s<KGy+E7Py%=Q1X)`Ln&c4eo=W-7xuTh@6&CH(?wAe4E=ga$N7S>^%k%>oohkP
zZKTk;q^T!Wnj{Ezq6AUj8Nw`18S?qlI`_+*g(*zEJadA576Nq$@~S2P2YfFH6@i!V
z_&Ld3Ox;t^Wi$V~8+;{dJ62RsP;j$4!mjESBYA1$y*RC;4*^34a5#yM0f@HWf*~{b
z9~d$LzXL-CG*D*(S6A|hb?>4Vye~BHd^UMz0`M+=?w<gxDhD7zL#Q>d&WUs1quafv
zOV+L!CsEHh^giSqF)W|}a#xB@5_We9Uk{N~^@)P#OkT;5XP$|L8#FQ-b38`l$YV2w
zs)RUD1XmOjU=~spZd0u4X8LByD6P$QcIT%F_bKVZAj=!g_PD)^B|S0w=C-lPR}$45
zwtb3t?E2t(5dR>A>t%>9<C2>o?i$1S3N(`$XdG2$Pm#Yu<I(FFizx4-i`Y6jt8QuH
zFa+|MZ!rUdE*r$qHOZR5h5E75LvNL@8mIgZs^NtNI;e(;=y&EP<@}%IC)NJ<`AO=T
z?B6p#X&K}v#s7x+N&g;10C!w5+Mj*fq^EvT9q4kKZ*hm%qo*@5S6ZF#i*G+)GM?|R
zNDw0Hv<XS3D134m31SVcEc3~fQ+zxWjyVLjV9vU&{-T1Cl{Z#Z%^E0d8<oPz*Hp~o
zy3$akDHgBp6yhRi0)}bd`l!um&3QMyY$P2UGGR`4xKVmM4}sL#OqxNbiJqA?g&Xo_
z^3;czb1s+MB<9K|isaFKBnq6zswbX^QReqr624yK@rnE5<PWYPoURn=yM==B-qU)`
zQUTzHm%o!A{=Sz}ek1W{8<&f}bkX&*i5hSgdmeub16NZ))v+xwoTv*^RqKnRa;|I)
zRER<pKpNxh?hvBx%1KD;CM3*v^ky}{1}J=TTrw}%Rs-LYJ2tbcoWtPJZ^0zWyUi?M
z`gg{O!S>35Dwi^<edh)~+;JndJpEHMy>)k;rV`B2VH5_1Zm--r`q2*y`G<+2-(0M;
z|AM!ZnkYj>z}lJzeDS$_7kSBmjP0>&Xr(YU+8l&ed54Q1qN?Cnu`vCHuKi35&kop;
z1K(NszQ2o|?2#A+6h$ie?F5J48zD3BJ0fI2=hW3D7st=K{AT${p!$tEw1WNJ^OGVY
zXmgC;K0j&PAwaf4-^==~?GEywc4MIMbUXUG&P~{=oqQSx4Zo!s*gtfuaULW?Zt3bZ
zmmLHU@$P^rpzBHkIuWUfsIuX7k$ONJI_L~)J@XfCy`|m*l{p1ZM?=uQ(EgsC@Lmqr
zqm3C7h`rgW5}Y7T(N8{3+_W&n>LEv67#1%T!In>PRS(1W&F=U#@&3gGyU{zmLdd}N
zvMTvp&lMKL<RdI1KXz`|rd%#X&DP|aGXWnadbbTznR6ND6k@^~Rklv|<ny5Nwj4(d
z^JX*sM@*H-*13tB%p2F}YetpgX;qA<fvcNF{0*J_|26j|j}>T#oS}Cyha2|bL8R0w
z2n;=$6@=ns8mHUADdzfaeE6>2*}k~i#f6U^7Rk4?LWp{}3pZNt5xL`e(&sF~MTIDE
z;fbh^lE-M?;ywlFRk<6Wyn$|&@&*YOQnUypoG+UUtwq72Abq{DkEZH2<95A}7<b-x
zvZxmYD}EAmQQ@PWg&?mCj`JL`3FS={z4WoYYq#v^?1cA4Ipp9L%+nj<BboOG%q>X9
z#u9RRrEV|AA;2HV%?OLx;<rjawytGqttYJc?QU<BdM*aq#nM%j-|ME}*9xnj8-Py%
z_%88q8sOF5oBW4@zh2^8{eaAXvklh4;IeRWGi8VcyxNNwSX_oYufuhA8Bj-;IE)78
zO$_yjh<P>ly5)dbQT&MIM4lB;Lfj<v4S4n5cM2v^Fv-*!R`JL9`w8~*33nVz^_Zfu
zy6<nazlt&1+%!cZC1#x-2fkdB5M%tA0w@CY05D?a%y@xY8_|?{$w_r+yzBka;>weO
zF)hna_6Ejuj^}Ko0C9$uI@g3tgp17pLx%brGGwZMPCEG+XYju<WMY3qhD<zQ$n-nZ
zk$!uI47i7<-j5*@r0p1Yzmp*|t(#_tURXu1;MM~%?`OcMRDa=W$gCq^?DxiSL#dTm
zRfP$9VW^o*h@UFM&q}U6=L4}!*GXhuY!=3+&NUY(Y5J2mDMnI7Lv1M>o94LBQrG%w
zAFpD(h~Y|c_|co4TI7ft#6;J%LLn2o?3e2ULSTZYiW|!W$tQN>i2~gh=w-aGB;{U1
z+(Pc@L&B%2W8E1@kK&p>(^l%X-41h$M?jvza%A_qKx{#LL%F=G;4o2qvt2cHf3Z6=
z2mCX*qW2DS()*_u0xyoX^MQQ^9O_#8Xuf#z4w|#Ku(HhRl|Vq%wW?P{F1xG&8>1P%
zn|KQ}YIi3$s=9Pj(${6n0Sl)oa=yo?B2>f-_nxOY&DvI1)~oElP?m>C^3xNdPa9cb
zYN~Gx-5F_m(VW7WWX<0YU+J)4xk2yq6h?V?7_W6IkkhPNLY$3~c%2n(fB4cJo>AZF
z?Cd}ol@B)qjZO&9gJ2-<+^*-~HseF?YReyXeGu^{w0L1I_>%>SqYo<>velmfycPUQ
zytmyNTi241fO)+z(_cG{xcle9zP`dbJdS2HHP&iI`hRF=^0eBS%y(#KJl9r(Ub<^@
zgVxADa3SdjbJ+<x($}U(cAT`)3f60YYno;`897A@Hnc%ta1|%&B+#(v5!F10yEZ#h
zRZ2f15pj=mG?PHF61d)E%#n>4m+gQ<txD5#{U~9|M)1jOQ*y+xvC$`nGuDL+gPKa*
z=es=5pqoBoHJ;3vnzLVT6&JN6Wg~v<cjaxCWK{A1J`Ou9Hg{^C9-zCP4kU8V8pOff
zmdZeI6F9;bgR`FGq_{~$P3iu`BI*3d$oy|e!3c+L1uEwVw13;}>Ru+UKr{KzgFdT!
zoC>70SBE)d%>|+4`HriOQbm4=*9*DWAT%Qhy&jC3?c6Y82Vr^`VB5uD`$CEQoilkS
z7&UcfHJe8tZG!7NxP=<30Rg^-(|n{*evMImLvrVt4yQTT#RX@Son4vpLn35&?LL!r
zNg?XPO?EmIqCKSq>U!<(5gQdEkw@p(2YD(ACnd`f^UodoZZ?d6?Gu1?Jw3>9eUa)5
zg*_{p+fK#Ur_;#)P-zYnjm0@FkhvP|z}xUQ)Xw~}j0NNF=C^5QJpK=~GlB1;ok<1S
zna^H^{pQ-4=W;oBu)j~a_)hOY$<JYR#LK^Siv9&$*Lu(W9=%0?rfFFR9-Cx){Q>rn
zr_Mgoo{b%fppueqh+piC6yT+gMmV~u9$iBnoF&{UFis`s1+P}Qp}$5LS~*QkVDX`&
zci_Me3DmC%JA`><r2b@VAr{R&T<H3^H@+>vkg~YQ%%0SQbSz_(8$Z?Cw}$n>2btM!
z5|dC!fWWE0pm~FsTI@P!bI`t6^~r8{OWrHh#1&vvP?<L)8?(KOV&@JBz8E+VD5LaK
z>pKIZ{fKg~Sz4i)EL58pbHP~AA^II#r2X2l{(fjl$(!Yeu2v<lv-Q@t*OTrypXnRu
zXso7}7NWs$g_C*RT;bE}!X->sqq8`9gsDJ`Ah0a#Zv_*`;%e6}lj~nKyRl^$2h-*{
zJ6_{KLx?$`itZ$oT`6V^Dos)=n55vNXne=b>nTAFS5<}S{=iB--rD2O7B%vhO^Ffq
z!=SJqN^+gA7_WHobW?_7QOz2sY37~9@21%4vw!IDSDyDOZNN%YBkB6Nr}jCu88t(Q
z=%Lf7TfOET?iItS6xT8gWKpzWcc;?jI`L(vdGksr^E!w)CjxR8-REsJ7$E;$y0pp=
z_1DI01&bh^VX%Iz;SRa5?)@ioKPM=0$#_*)f_k@h<lSkI#F}mj;LHB@MNi_TARon4
z?ckh`k<(?PyVRr@(GP9uys5drQ@qIX<k4||tO0yN{+yYg^2C{>0nX3(gArC2rdeh3
zvQ#6i7Jp~mVcpUkY0pf`b8ImBL){)HyUFJ=XA%Y!1F&R13_Gv9xW@f5!pTDQVAd~}
z2E1xC9?}YPfD#da4(nWPH9*G#`7dB35+{C!$apO;bP%<3?LVzv`mKP@vmX`~7vo(Y
z0wM_Kwn@I;2Qu$h!mvPRx>`V?mE8>=9IVHN&_KRRUCraA>+5+elJAI1P9>W|3BOfP
zftg7CX~Ds!=RQD5X2D=%s&Dmz@4-h(^my1+815|4dE=$D`q<3cSE1jze=zNe`^@M?
z%F2elgo3#bO+UiQlu0`3w6uYRZ+n3akhgceLUk-mgv59xzC_i@WuBzmbju8|buFt|
zdBOZPCtVNVvK`Q!wMH*ML<K}DVT%);h11ZM8>B770%@R`nc1NF>iKusk>3AEA;a-W
zfTJl9dxG_%wm0nc=Vl5H12rN{_=l%mB!;?6)qw?QOn*g@Ly1jzS4U}Bz`}5<9pS~6
zaq<={!Zj%-Qyxm0wjV^8Iz=ToNixP+ZTZnO^j7js-<AY%$?0f6T{Yu*+TziR7B7ZB
z*)@8$(|*IHeC3)Oq?QAniIBz7;M|))7PXfb3+Xc4g+0p|&u6Xe47AWloe|^m&~jM1
zT<zOANU~u@2S<~#E9H5#FDP>B)u#$eWwM*F3kd7P1fAeRZ*7782kD0YwMYc~@50E)
z4OhtFs*=gBdx1T{!qxk6>QU7Q=}cg9Xd~+?6fY1p`V_$?OL|76O?*HF@z-}ss^tI*
z$Tx|!8uSUCTc?+c8C;S15apC!3GXD5pm&WDDYHeuj$R^SJpWqzr924`=sHlb$v6JK
zb2t2|*)v1`7;#cn!DgeqBj#AVr@gQhsrXh0C(N=Yp8_7oDbwbptm5f=LW;mdOy5zR
z=(n81_J4Q=F*0|&y`Z=fW6diR0KI`3@b>jWwi;Y}>+a0bB<0Xg@V)=V0stN1dqD82
z*MUJC55yaWI85Z7AQXLo@63P=$b7_yiOy<%%elqi#`{&82vzyFUEy4pNC77uy7Ujn
z9JlEfW3ZYSoj)QubK1hnUiQ63gq<sH<RzCqq#4Cz?WSUwX0@1SfRF)^@91GPME1<?
z!QFTN0N?n#@MMZON}zBZ2Qlvfzu_AdPShE`?m71=lgPbom#;aWHV~PnInP^8!cT8x
znL%;&-LIm<2dl6Pn=vHC7G$Ozh#fRPj{A@PdC=CGhOi98{`7^W)c{ptjy!Y07i!TA
zv!|HITRuV=hOs+$uD8!t^`(HBrtdiCA|G)if&Zkd_`3c^2J~vBS;tYBQA3;m$ANby
z5I+uj@_p_r=>cl+su1uB-r0>F=n%GJYd^9vCq=Ss(wy$;gGVQGz)z^3o@1q_>^@%n
z6kFas({`Y~tJs6L62n_nE2f`UuNc|Cbp&PN^1e8)0n=Q7sAXw!UP}RV$EjDw-Vv2_
zl1}&;CyO{eHDCGX2^yM|>$TjI#?2oH+wZQ?K*ubu_p3&c71nLcUelQY%Vol76H8TS
zZbj%kg=2Q)89|v-5xYVtq%-!jTgJDncJXsb<S%7k+3T6fM<^Xsdb<2O;@`}mBRZI)
zE1VA#5I;hjR4U(e*gR6zl?|mCAU<|u*;X6*;A41TAJ;L+81Eo<38_{v;HGrS!Ad~&
zzce=1g;48FcfU)%yZ7Hs(yw_kOY_f73Ln}0s&GlR1(TO#+XpLeyY(BPrpnQqr8~J~
z*z$!sjbkd&qr@kl99A&0h_R4Pell47fR4fY$E{LVRd-R|R*)@QDc9`V9G&o4@eQhq
zgD1cQPmzmVB*;>FSF;VR2}Fh{00rZ2da`l{v1F3S7*xldln5ZU5T*6C7fnsB-(Na^
z!^{{fG1Nd;U>>v<uyN!ib6M(EgO$wUv0aGBhlDa8Eo!9{Ksf~kIhN4(;K_i=6k9hf
zLai6}{X2}1LQ{}G1$NQWh66j_Z0OUsg6+N6SGI4)Rc}5sN$?3G=%nar`zCJ1cmX6d
z>B%Jj9x>nCB2{w%9V7djjqD5^W4zpIuw2nCB<(gW86*@EIv>Lm=c@0?r<baz7SNcM
zzZSz|lU_U^4V<F)twY4J$v2Y)8Gw3nthtWfH}gouF9z2?9q96xa=&$)#c^O7nQos=
zjM=umhX4A&WFg8r4HmbqSbaDTrFL06cUQCrc>GD^LZu%R8r>H4kQFfKs23;8aD5>T
zw8R%l{hk*pae;XDVcS#~97Hrtwu4Oi0hMYC3F2A+cryI|#FIh(n<rE9K0KL!Yd5tK
zw8C-oJ!}UF{T{TBECKW0f~h<c_4MJ=CBm6k@nzr-9u}Z5kjTzESX?K|>xaCKhOtHd
z(G>yEt-wS(%VerXcW<&<GMR4KZ7dG<%H`A)qvVd{J}d<r)$eyCX}ocJqi&*!g0S2A
zl%7S-pRewjk=v7S_zr4)`AK*Ceft47M_}RH>Ma19&FzT-2VAyaI8AwX`Kv-l+OQC7
zD$}R+rTRruH^MYL=S{GBkG)$L>E_g3yLJVvYBEaRVM&MlL%X>Dg!ufmN3^j?D{B}!
zba?aIWDVapg1HrSTm_yR+s)_tkP}6s9DQTlBmA1i%%EyOOu4$R!I8mJKB}VjS2DU=
zZhOfvS^e~(<^cdp1fjE(MBkevbK-hjOEQJ;f*nEz%wP<G%_loiMiV^=e>8Qn0J|_j
zEX^BDH{Nws5@@)Fum_tMywZ{Axw7&}$|oOdCiq5Y4TG0;x;C&>WYQ^>uZ4wXf>YAA
z;_>NFvVd<XI_U!e*<JwF5$GZwE<w2QCcvDi)W&T55!|v9RxE!g7K=fA^~JY3xZWQX
z{!0h7V0X2}M@x3VdP5yIcCclCSzgl!!2)H_oz+t?g5pF8%Ls&fYADhspnpTRY>vJg
z7^}L?0u`(4^asd@<IYkUe)+4lfxxXcVk~PJNxi*DDG1Tb4M?P2z@Lu`=cWwg)BDES
zjrtjBYtxMlpFMZEKa_SUtI~<5s)cl|zYOlT`wN+(VD4@NL1ens?E{ODI>$V70EtPF
zP&a+m?8_4!#Ng2_eT7AZJskzj%45?}!-own_p8{W6`Qc!muyW8Q!AFI4l+!a-UWq2
z?gXa_a&?{68y%kI_gdxDH}tRHGWJ@z_F<o9?X#TJA(nXr;9ht)!|+{u4)g-PKKZ=r
zM?Wfo-v1#D><A=2ln?`l5CTucOW&f8Te)AUq7cXt{!Z4n2p6YjH;e~zM|+aRM<{VZ
zk90>VCJXYdk$kwqPHBFfv(mP#fmW7IShuv6<;a8B;$it&MQZf=mCb9`WY>hUosSkr
zc0V6N?UG17StM*-*z5)S01DYUah)JXk|_3~MLW_sYR3s+K>Sh2?(}*>mCFy15J|$h
z5>0oe83@k&!&?ttmp^NjhL4PXihO+uHR@_#o|H8kNWWSHy#Ci}?bJaDR!8m^0BGq!
z6{Y}wA*pmSPZ4|x&nxLk?zT}5dlgsKPrMkTTHZd13}64WvfOp<6-&kDVH6a4-~2~j
z5zekMo5iQBbcby`OvJ8ffw5wKYw425LVhctcDSA(0s-pmA|alHaBcT`emK!(KJnbH
z^nvR`ty_wKJhP%h7kWcKP6#@rho#wAF?F1F6|NE<{u6q|Twl|<ufj&)K_!Szb2Hlf
zMN)fRrx<ZM9sX49q5u{lJpSckGV>wmxFc5nn;X2@?&Kr%&;Gz=1xQ1Df2+xw)i}k<
z($YzxTxbAps`_)dr(rKjiwlBho#OBczU<_(SWj`rbX+$L9D|}}mSfF*?%oKzOm(9*
zU&IQ8!A4r{pt9_$R=*ffVap>|&#b~|qhJ6zdJv=Wn*pgy>A)Egl65iyzcRc1Q;)P<
zmTux#QFL^WDV!tUySLg7OL1ycnq=BTHcwGJ4fk6lEks>ai-^gU!Y_hiRrGP&3~0xe
zo)v*;Yq73XbNYu<$jYVM>#!vNcLh(UwwVG`E9w$U{MMdf|4@QfZ<kPiVCS2H@IT(z
zxuS{5Y`D9-@aJC2HI;B4vSF(tzt<}(`{4QYuuk|N8;$NP_BhfRJ>Y$QneQ0)zu0^8
zsHV^D-(Lj<D-w`aW&)*^o+AZm$_xpJn)WE7wXGmXgj7-q^Grg5h#HU~T6<&$l~%9@
zAx0*dWr!A%K!FfuArJxylaLS+5`Ld}TJih4dcNP@)pOUn>*8No(p6U;_OthX_V9Xx
zwQg7LfM9S7g(y!znSlMA=+0n$Gu6B$Kqc<EOVE_Z9Q{5KWt}cokxchd)Jq#sCyQXQ
zNlnKMcpWeC2QLwR#n`B}ZMD^-C`G`2aWzpif6DjB>}xOtTGu%@pD0HKPAoc1boPn)
z+I%v5-VlWL3s~E3)Th&Y1{MgwsyeYS=0rq8n`eAS4zYe>Ea8%%AM3{y<E(g$DL_lf
z^RLrV8qu(U!6Z}?u!`KPA||QlNIVLWZZ|)#V=3FMu)cMS!jR&#5<m*^n2vvzPlNMT
zX*C1SONL|CxRY&HO9ff?;W&dY00D)Dc4r6Zd$tZHvHi%?mHA3}Q8PE%pU{`@&G%73
zMh37M!<o_fIg!b8Rimd9=ae&6e)IlS8v#v%<~I4o;f|EoWa78AQb8{!$#<;rY0hxh
zxU3R4SH?4)E<$;AYAf8ENmaU&KaQ(12JIxx^ZQARks+oDK|n5~5-8`8KvT8>0T9lj
z!<*lQ=HDy#Ik(KaY&U$4kKB?D=(WGKCir_%A{BTnTxe?r7M5mnM%J$=VCn!cCr<66
zYCPsaa<5XJ73Sgd^F(WW%b+Gb-_n9f?E}_@UY;Bjx41LJEl5Q8G&OZMc$^OaW(EL?
z2^PzzO&>FuXJ-`$J6NhQuENO7J~zkumAxs$_Dz9?1ZSIETief{8q_tikQ!ps=ySA0
zeE?NSw9!SI#i{c-=VtT!iQlOZ6^fhl6NqRA+-&*T3;?o}pbisCt7&8Ks9>Db<h#=a
z*&^hrXUVslg#m3q;4WyWu3nt~^{)y}_jj&MO{}dADJf?pUdjgm>)JqQN~C4iU(o#-
zAUb*j^pceFl>sl-!uen`Kd??m7zJX?MBtL)nX?2FaNV$IkWItPUZA4%+s5Zz5<TYT
z#s`Mbj_Cg8baOjk#~?eLQaNW@X}NR;Jc>=(KA(4Pn=KdfMOdhlp?_g|h7YrCpxsV4
z5p>YZ*$%+;Q12<9)}{F3US`8#LMGdRpVmu=O*;jfab<L{x6v84HW?N`<!hp%-p-E)
zEVJU3ZPnPvQPNi}mA{a3@cgEU2?|w&09~_&h_)+YN~UY>!3Pkww~0DUoPm)raf#G2
z@f!jdgRKMzOtrx3G`H)1(fpv8t2Rrb!5z?;nqKlgFxHn<YU@|C(~g%jm?h?X+&4oV
zum_M9u0p1<fivn;6ab!||MVl+k1-*tEjo)~59<uE=KEqI)>;8XV(Wr2F>M8?Dgqpz
zgmBl~YIlV^Ee0p{IUz5B4!k!aI(pcJ<IMv=PjqMX2Yq7oDUULbcCWb-V4BlW0Tz*;
zC*A1j8^7bV`R9B3K-ZSg(g3`gfRQplHRq?m$0(Zl2P`+o_OswhOkA0+i&;cc9h>x=
zaa&Wj1}_Yv^!eoqx=y(`6N!!^tiB<pwF#cp-wh7}1VJ!;T{o00G|}^u{iI|fAfs7*
z|4ya`Y<VtAdu8vgQD9dT<8deCj$oU?KpU2?tfcv&?J|U6heXEoM>Zfvt9mmm@u}tY
zX|e}_j+#+x<w%MZ<kIe@t1v+xIW}nSSA!b6HTOd5@lTg**u=bq0~+B__TfLJrKBV$
zt1E2XyMdT|?RT6MgLcZbluA$50gHbBIW482gFg`dx3rWRh93SqEv1H$hk%xn1ZcTU
z{dG+K*EL{|`YfQ}`5)9$ifyQw`cG&ny&fK`I{wyx^5LI`Y`%H`xQr9DGb#^pSMQ;+
zy)VQEHsZr`X8L)}9ZrCt?0f~Z<2^iITNn*si2(?dcHUAw2+PYE9Rjw{y9UjJf&!AN
zpN-+VVom4?`TYrbmXOtFvyP9`{56EnFl{T@*tIXa2-h@?iJE7^G3Nrj=|^|&baY+0
zs7{iJGW)6`M@kt6MmxIt%2yX5x5R6Yw#NHNw{Ht*n`y`QGNLjPF=7v_;4r+FxNG?^
z9Eb031iVUb7g2k0ZHj`o0E`^-*8#f1BwG@IXpFxKQsWkRE7kSR;k;ht=L7Aw7cK}(
zbOc{rSFl(VkL^Xmi7zV6neM3Z=fQetOnnIuPRfe%1+ymB$0bj|E3V6t#8O{<_I<bA
z!sVYm<7r2sN*HDvr7!wcbcVEf#IaeTd^=Pf^;l9}O|mm<bfO06QBGvmEtp1Y9wurL
z8RD3&j&@;x>p4#%Gkg2ucpl7{KF(P{iC{z<;qSp1;Cr0v76B3thY5LW4`>u3CgtZH
zFM&7=bO?}L;J3W?4!tOr=OV>WIAJ5J1?>Y~j7r9)&abEI-l#*dl;w*xzE<nO|0ftS
zHFAc`p1+nMLyL(87&5fKmLUVYeEJf{C4ZVBGjG|@`rk8TumD5m@Bdkb4Eo<OWMY2b
zbsUr#|NWJi(qN@rOsPI@F^2FUY{N_%^W?8-`m^`mFqn;x;EzHi0GujqQSzS@Q(6JU
zlurD4F{QcxPE4s!`_=R^<F6A_5^miFI4ZyYnV3=o{as>8(f^H@5*83s`ul%WOlg&m
z01Dpo2j1F*1m-aREMN3<7uc)DY^stntYcy8HbBzQk-2<)5Jo?S0BV)b7!YnlMT2e*
zu8->uENwD%=SX1bfDngtanp}r!clIvGUobu<^&b2kLMHu^XD4Gyj-pzT&N=AqB`*S
zusxL{IbyW8uiEkm^^6>g_=STg@rR)uH{0W!oO*U1)>lH9m*~gCu7cD09iBSDRkvok
zHCTe5NF8PPB#)q|un)P5D|#(R<cZPpa(MYp8Ec{MDqTE~sm?=FHBScPcotYQW)U!<
z3ar)))6(J*e<86!xb>-K;tQIJ!TW~GUv#ShQnGg0vp2q(GC%+-?91O47MkbS_$|+&
zs&`s&v$Tc550FQM>`tG;^m-=sh`|gnWoxUpoP_!;zhBIvRkl_832R%jTxxJr{K-a4
zd@w(A&U`O`GaGdZGgJ)mI?>22ZZ>G*j9m%ruCuKzlZmqwV7~7!-A8O?yX4xI5WQKP
zr}qjh;uQI;9uFnN<+|~+%ZC{Q(wU=D%M1Xv62YW`buEDY{U!uv69Tgdf!Tz>Y(ii*
zAuyW|m`w=GCIseRea5v-2#n%~n-G})GVQ$yfq84OY7+wU2L$u?5rr3<5SUE}%q9e8
z69UubuaF9E(qbpvq3cXIJ-%aYj$#GNsHg4gw|!d#!_qH_)JyKrh=HmvZ96UEGH>I*
z&LLK_ZW0sR!ST#zK&5IE0<#H$Y02mp_bjK9)N$@P?e1|C=W%grGk+T)*uT8qD5mGr
z#C%#HF3cTlkBPI{WhDd}v6~Q>O$f~Ybr6{0b=17qO}1V7<y~L-q!@k@d`{&gWxr#s
zL-NaqM;`M%8d2j$f7=otYZiLuXVvseTkN*!-?^#Y`s=T#;qYmguebFj{hTOH{VZ{J
z7ct23WmncL^XhR&`b3B~x+7F0Kv-E}FD*G*VyQZeIzkP0qYI6}O@8Ll{24xI?=|p0
zYHc(R!sBcr!PhCEeK7%Rtz#W?iRy5DrTMPK5{vMmgi|JrGh8PVYE3L+W(?&+=_}4j
z%fr`x?b|sEn>k)wQmhNlk8VPlqhl*zb!vRm@v_)xdI8O@;mH$xIJW(t?;y7#jXLEx
zjD1fw_6q<U2Gq$$h5E}Iiy9jrYXE?-&YtzmNXHcC@28$;-H7Tm$V2=+Bp=f=tXCQ3
zyO87ZX+RQ%&Fw*1q@<17pek*75QdC3ednA>n|AOTI#A+y(`GF<%eZpAxTZfcpvReX
zWiC9{8oP&`$9D_Fe8T)lwFVW%Ol)lfnH@-ml1{|j7HqA3oVX%VH#0lruZ7Bsq*7n{
z^ey4zmzeGm<L>BqCF$u=jQLs%kBSP8QUqTj#)xa!OCt{ZQELN9F4Xh_Z)T{80c@9#
z$y5NKM04@L`)@^eg?y(d-ZJ*g`-{GfzBlnB;DCsV?wE~+=Icpd^(x~sVAl@Twj8vV
z(iL~2an4jwoI~&U{HY=IX+1p}9X^5`&Xf4<)y=y?stF(HISXt%9Q`!vmXur)J{~?a
zPGSd{$;z$E`NZI~A{gp$K{Q!4luQ4yJH>r|er~uAFGK|1#K7)6Ltbf@IC=Y*Oi$v<
zdMmxX8y0Mg4<20kxu2lrJw8xiLmx@WJ3m*P<DRH*L2Y<HckxEb?Ne;G=qHY|FwR+1
zyG72a<{E!g<y3Kw8p=_!w5Gh+BU;MC+er|>>}>-hf8!VY=At#Q69<^W-HfhpUe623
z)tBU($ltzw6FK2`u{)7pPbCFVU$QyGxDk7Sb5DK8dRD35L!Bl9J^eb|)PifOnDYdz
znF)VL8J0vo?<LlA!uE}{W*PK^aYrSwDBt8zgItQB&u(T&H*Xl_9u830`qk0uiF1&_
z0<D?QBm5=VawDvoWz=HF_fi?V>u}i$oC*Owo7>ZqX$2-TeOB%)q7lgA#HvDeB@E@f
z$2cHjcCN=n)8f|B8QlU4u81_*kKw4#Q>xhAbLm6?A+t83G<;>A;vt`&4-N{B&3(tr
zFYvqq6w7Lp=QaeW0L3z3c)pqZ_qV=K0T4NGXJGUvwZ>07tRdYU|B#>+=sEUZGy1in
z_Fl@<@~ceqIi1Ar2&=~mG^YAxeAdtk(q?c}%p8H`qzuP~qS-E_!@CPKa~Lg-Wt5tQ
zLdq%P0F+Q~5%^TwV_r1!@*?bl*nP37n5|G^S$6;mrW5w;iMl$s)!3b#Onw;4s~;_Z
z98~osJrN{BGGu>@&ctza+GEQZp{En^ZT;A^)+6;`O|6tP;O7Za_^`ktU4K!ADwHp)
z*Y=a78(;UeH2_xuK!gC7=6mnMnj4o!N$ynuedil*8q*&p7817ds>j`I3UfM_k2%}%
zEmp|h#_0HZ{j(G;&M#f$&?9<1Ci$zgz%rWs!J&E<a`<^seJr;lZV;S@4Y^k!%`>rf
zTgT)txTXq@k$k~R({3Po$IpZDB}akzxrilOUHcj7`SnLDr3+An?;VotnbH9Vl9j>5
zD`~?HQFqEDjfHat@7w!AEqK&jEb_^tcg)eW@=`L>bN&(MfoC)gxQfxf)8}E>@FPV<
ztA#<)tyc@g4;VGX*!G{5UivaM|GoSYAV!7JKfCXB?ZzS732f+~<FozEWBcRH-gxB2
z959VIwa`G3Ii{>$fPE4|&#v~rHO{vT?Koo}!I&eJ+l8}~Ya)}zI%@5u%<5?R#2)ne
z$!KZ$jbOx*?akobQ4->l?mnHC>+@?hC~=`NS2@=7vY!87b5=B+S;ok;BCFyfnD~yp
zF$J*NPF$D}iAxgrKA8J>g>ADRn!7TlVn~=>@d@3Ly(lh01{%3?Rc}QbgBS74m&eQ+
zt~Js>9I@{oh31=lr{OyrI4rFf_62>)o^^AUpbG&WqBlUr#!JAYx2{*b(mn)EB=&=|
z8`lYt=K{;+mkz)6M1GfFvQ8W)c=S;+Q~av(wf!UZjz0{}%WR{@o@FIPrVkPo$}Eaz
zV`nKdEhiFx#`O$md9!Ym&tuz5tAz;OiNP8V-3G_|grMP**2C^>)(5_)Euu?Y>dR*d
zX*CY+pDeg9`u2=HWiFqOeJ)5KljCj_&fQ)NiHk8*j8o;YU7oc9#9!`m8RNY#VHQc`
z<w`62&>lfE;bb%_jA>V|GQ0fq4tuNo0=oy`yh+FDVDl)+(pdA~nI72u<Bf3_Lj(Y0
z)LY}X*ZWu-F#{NV$xoNl41_}9_g2iewzf8zA2}P4fsu;Wrp-=Iy>Vx-8eE0TSmXU~
zh<j`-?8IGf90n*7j&!i!S(<M}w)Ta+l-^wRh(iUT1B*ULznn?aswEb)3AG#5WQ#Ou
zs{%}hT!Kro4yrS@@_)p2%ayJ$*aK@5T7<c$jJ(_{D|q0Trh`>#q<tO{Gu_~(Qjs2z
zotQ1UkBxgj9VXnVz=N+5ZkyMfdyZ7!e<-jeGjTVpJT8_A?w&J1tKwU{(Lm_0OA@H&
zu;=*0L$krPE1xOB%=5%TYK735%2>K>oPYlI?uN*uJIn%9U42zm90dE0@x()Nuae|_
z<n$X}#Zc~5F1jbbaYC;@9#EWvzLH;}Kgn$ks7zc@l|qiD<*i<bQ)RPJx3VEiy&T&V
zS5>=JdN$IfSkP`7mlPGXH*(g^)GAs+(I5oR2D=8JNA%($CUbe;)|AJY`IC#!oBOIo
z1&F-bD4y+DPePu9<fi1@9TxJ+t}}%8kWjj}p6(OS^96^e3d)DoSkDFK+Zz<iWUXby
z(4LP@*ErgE=14kk>U&5EJr%%q(Lb9!z22}gaqKL%dT^9tS)9lM+dqY<A3ZzoyF0vY
zzZ8&Pnu)UJ<<nN<fN?ql_&biqL4GtbBZsXwjt1B{0TeTDyQjTAk3akiV0Z_bI{_q9
zZhrj>h09>n>eg-Hy~+?~$8mcYo$h5xVLo%CWHv<A>lTFfu{s6BC$y_Iy42c=@KI4&
zw^ELjY<uc>tu)>s57;0urel`jm9SOO{p4Yr=y|8qP!7MZXkRQZyc_Vos+WeR$eK}+
zLU^)f{MR>XzVr70DJNOo`JO$_bK#kcWQ-j}R;C{)JL$582?;781g;;eHTUhIxw$IZ
zFODR}#hHp93}TPv00O`<I2ON@s84Rd`>M|hE5S7@2Vr@Uc$~C*#oAhi(|(6^{KAC%
zY@Q>WH8&>A0Qsd?2pRHQ&PLWKHycryT5Vpd(spIYZz_lE6VuXsu;0l{oVWbJ0w|B&
zcS}zZM(Jf`w(leA*G!$XHd3;;Z(j`z<Uhk3Sj8<{FlC}*m-sbd(T+>{i^n;XL2!eB
z=@1z;e>C56**==?p~{t@!l{A~@^th5wfBD51xPV%-JY5T%~g-{_GYOLdp0Xsjo6^o
z;OV}Ov-{8aKBL@|l6MWB5v4*185h9?RuZ+8kZ<GmBFTkVZ{&0X^U=Bv5#Ua<ji<~h
z&;no-HA=YQVE>4<ax0JnAGSVKuS<QnVNa?~@_c0rdC%MOm2=7f#H-XhZxH}8q0V-M
z;Rl*x>AYG?J7_fLetgzsTse?;`09m^Fnf-e9Rx|rAO*DJs*-w^0@zaYtWkz`SVfzU
z=Sugb>nY~h+_LOXYd!wy-b)NUaX8pN3pQi6clZpSX~>*1S#R=fQqs(95sVc#XSIL$
zz)TJMWNC|NIfpPz=<##(J)Ok-@Hp6t-MgrJRPV!cn4SF&2o=<Le?l<vWTm}t^qBDu
z5A*=TF27_7aS$7-x&Ffi2tnFPS^}2a8YG~B@OR;hU*Tkacff1cCTpVCtb1<W>?>su
zU)(zThPRbVDQ$g9{o(IsucP@JN4o|Elp0niCR$V68uE+5sIzq6TiLDrDhTTV{aE?k
z0+3qnb8qB|k}Rv~NRo4EZ#pe|dG-3kH1}3$kH<V5H&@P4OB{BO<C?ZmB2%e^hoky6
zIBt1CrLYoY!EH+yhurA|wjmeKkpw<WG5*907xt17?f|=lt?x(~B(eml$Ms=)jYKsf
zBLOeQYDUGGw&1yK-?JYkNlV%v5@qq(tq*B&;zBk>NSO0?u;7C23eu!Y4<7L5MN0g4
zm<zDdw)N>^ZA#D^=He_j7iY50+sp+J^Po^N5NSd->4AsJ!6oOd;oTiE_I<QD2P?b!
zZywK5?W0}Ip!6Az=g|T{N-2K)*~dg|fBOJ`;K=Z0NV`_*NP&JA92~J1O7Hkl7p{Lf
zPnHCByj{AqlKW4oEH~}rHkr_3-n-`T+&>>{@_(*1)O=~aMWFxG#Ptg<D_O8LRbvmJ
zb`i)UKAD!&WWLhpQ2n5h_mTC|)TVTIf=<$+m|RjG_ndPw0|ZJ!%=^(Zqs^~N0OvbC
z+}|e&qSwHl-7#>Kea345_N?pIKj?OU>+?`8!Nde`C2q3!o@|73n@{9Vq)+JA4sS%}
zKTKpnY2U)y>e9{bZp~4ZOO=!nny=Ns7$&O4!+)wiOZ#+LNoa0fsa3iMIwA^f8%<A7
ztL<&et%xjvtB_la(D^6~X=#E*CNpd9*dy!XP2zeMf<)@`L?8{mLs6Um(#*FWi0I|~
z1nH}LRCRRX<$Ius=I@c3TO5<O8k#37b#ZVGrwHd=0n6CZ--kP9U&a0Pj9VUYJGVh~
zO(PgL#~bdcBS>)`%cBfqDt2rsb@#B0FZv(?S==x)l9=g+!pZ06?;)JD_PjN{v-xlv
zz#l$jUijdTFRhjUu&NX;D>#u3z3s`YwGH4o*vGEE{1I?jQ=}C8PdXwXU>eD4={GZ_
zb?W0B6YE<sYi)bjTcFVK%;t(6p#!;Jg1c|IsgQ+;*`9+77K4GiCG1nA6t}#y9+FPb
zn0Jc}<YC&dj!@jW<`|k}(L-)vv}ltJ9Koi0u^|aHErNu)1Cn1f5=mAGi=V|At~It+
z%!CiM#BKS3aYnN1TAsW2Bd~Ue)u`Uf>DKgfMKD_~TBc{M8{JA|f%68KhgZzA%D-(0
zolq}22PjuX8}((20GiCw>Xxw@=wEg&RmLGv!Z7KU1do8dknUg23lG54Y}mB5$K;M^
zNW5!09;TwzZM9AtvV0`Y(>4J$2$BlxA2ENsSD^QDmRN9RB$@K0j(nr}SoJFXhwyy`
zV!mm9ftaf-!JvE>u_kNidU2+8*ZfjW(Ykj{#*@>(DP7XfF3N8wyg%n(bQyHcR_dT8
zu#vpHSSLHYN0eEaaSp`iyr)`leIeAmMe_@=BKYai$LWk0r60KG3}?`SKmb*n0u{el
z@)lCBsuA2l_R{{@V4Qzlu3%Lla06EJ<9>R({I20Px8s02$zS^*VuMW(azbuLCvrb{
zn<5$L*bDg+T2FC3TQKj@aTo$iJ7AxF0G3uCY|ZQs0cr)D90+8J9{9kM>VSIO=Mctc
zbW})B+ppZcB{(wNvKrz$`<x_VP&%4W2DoXT_&8I>#BJk&=O0sb#H?vIRbK;X?2eb}
zQQ^bZRNQ*m3)~Vj#^BKRESv=wnuHg}u0~EdCx38l5h>ms!M^+t2eD4DieN<&USV#x
zz<N$*7T07rneOT*8WS`V^JM&%Gw2=wA;UGfdZnzppdMXfJ2!W@&NAOlxE8Uzj$fG@
zx0ewzH!jSZiHROa?oaZgyEae{jYe{hZ1l;u#%~KkwI&CE8(P_g&x~9hd9-^5qDBiS
zuK_CzT?v4$nQ=;!&s!jA+T^RUNM&$df8Zh5B7l&|Ng0*(z!!|>IQANI{W_A+9-}td
zkhX5<@)=Yc*@LLX)CvAHj88<6=dz2Auj!!a@cH*KB=<xmK~opGv?fDf6klp?F`+=u
zZt>JusQ(&qNt#9mp(a-N4+?C;JnBCQczCi>(=9$g*q6TBVuZ3{fiKr61>0K)QI)ss
zWH5$!?d8jvc>wj1`;N+_vEhsO((1Z8M`zU3Y166oW4<-RfIuxgr2XL=x$Od3p70^R
z{NSxxhxh_O>(BufyExw3ry(GEtg*Gjf9nXaf4`x@K8ZmR)w|_Dcp8r+@lxx(x^_5G
z=N4xZszYR4TlRb`u=o3I&e8}ylee;(sSqvG*F7k!uV;FP*D-EYt@$_z0D=rmDkg~*
z9naJ*Am2Ngm=gZCtq?<V!-zFAfFM)nP(3lN8>w4AH7UEWH<Uws^1yAxA0asf0#~!9
z2_e>W=Fe?}88x@~9c$0;7#t*_maM32&S&Rc94yz`k@3Fn%yJl>pW9EfOn>rhW@@dU
zBzHOX>(08!jmZ4w1A1XuzL9~uxUf8bS9im@T;%T9<pk--+uZTL2r?kG5&Dz-NuV~x
z>Ii|9($+q=hwfeK<+C#HAIYrYbbPon<w5re-)G=sLamZIu(=oFXVik-B=$?QUe*?@
zXFtQjXF9HTgKO%5h;9?eAGwJUJ!`FR>uP>d7{qu4s5f}MtfI(H0-{LI&aBi;ZjBdj
zGr0cbsJfx%<W_awODAR2nzDribUsZmsobbkelN24Fpl5z5na~e9^O*|Mj`ujL}X*;
z?T7K9sgWjrAE5WlFX<r9hI!;Bcfn@-n(2>VQ4(D=G-_hf6zUYi2Begj?~+mqlS?T9
z|Iy3ST^kjdMrZjQb3X9xTa%((2dt1kG1-0!cq{lY-6&d_C|eZGp$gJp81%$Nz)xDF
z{|t$1nCUpH>+-3;X9i>!EPQ~^@r93S`WD|O4rilxFAEed+XjtOLd#&59j!-jhhVlq
zvL;fCLeKTNBWXp#><7n7uqlV<^Qu0IF#=zvm>)|LHc?%&T(lW&?o<ky)#ongbxT(x
z4~}ZlIcZOJqWEp+eo{q6&0EaeI%--0n(WsATi^pP=^JHCojdKoYX)9zwASOMV8auV
zRuTZ&Hyc?KUPEs9m5n4uUX%DyUZnb)EPF%!IZ<AHNHi`v_ZGv6Kd~(uU~fW*>rqTV
zOQ{KWxnHiO6uNH^w1uU<Mn`Hif0bG3$INz*m>THKqwQ1D^>whr&mUAlNd}b~r1!~8
z=OP39MN@i`ptH{bs|G)t&(IN(e84;{BxC3BcjcwfNS;=FY2G+N%|N9;-e!yFH~yr8
z29c)p5nZmOq)x=)PBPUh%um#W@aLu6^Qm=<>cnBY0TP3tI0RZh(<~mik1Rb20ISz_
zp<uqL)T`;Pl45(^@~RB!*zMU~F2V~~(#M9oeDU_{1Z+qGuEl-i(8|VJ63|it-q~aB
z|9sPB|8dnC8w%?%k;2LAqCQf)N5>fmoaXeoJ>@t2mKUkzORSay@g;dSs0U;Xf>vok
zOoVR|s<8kl*Jra%=UA|k@9gk(MKzJ_dt9O6qxespNzspBvC2_l$<AfiK0sqlG?bfc
zneQdR2G1u9=NHcTYY}Fh4<@=OYmPNl$r&=Bv*0I-Gspp_>pbd?f!e}I8w$xSSD={W
z+C<0<c8l5z$QT()9&BGepgBCi;xp3Sb81eVf<>V-VfW5{>igVzVXz=iM|f~0pPvil
zeRAd`NBHf;+cnYwgUOW}%<6vbMo<D|MS&B$ZL|MvT1w!|SLG^8WtlB+*p&0Lb`|Pj
z_MPuh<gTnNpfP|;%V8gXcD_E_CqC?hZ~)|2=sBo`G0aUa?9-vN#Ww8hzwE_nnr<*3
zim$u*M8M4Rl5%1}*geE_{Tm=DfRJg)N@0lSB#Yq4d(%cO1WzzCg<P6peQQ{guAhY5
zy2XYWc3{*2x$nCSm(=ow@NXR?mq<ue>HEH-Eluuxv_sT)G;)1>Y%SQnTI|?;S~vP0
z`03KXs5`#}X-%{dH{?c+DE%Al0gzfc|4KyOYr9zZ0!U~UzPR}F#(jGIGqnVJ`R$Q2
zWP&?7JRzrMJFLQcI*vmivxKd558{QC$y7DCN;tF4xA0a&*u}HD<sK|%J=2h`C7}!!
z4A-PT>HV0{ALOqEpA{Tai9W<<^q&zg8s$zpyYgbE%5O>g)%{6}17suUsH9s#2FR0q
z0RFZ8B;)8(2n(m?+eHQfQ(~IF=;EP;oT;N$2zy-5Y{LlEpiRrow2qaGGHU7G)kJ);
zRNv+i3=|8|9#o?Cf{!O6S4y6p3ax<QCAvrJPE+dTlEr|uU;ev5wy)$60Wl>z35`a3
zUK6c3IP2X2g<bNDy7I<h5ak6L@X=qY-uS!M9~UHwqDso?QhI%UaXfuoQ!O(k>fT^N
z9H-iY9>lixL!jyh5U`NBYzLT=R%Cm*fyGSEUD&P~DH(9Z*fRw&vmHq{3A^*$<JM2t
zOZ(1f$Z}S(VfS5B%8S!z;=(z;ka}bdV;x583yL2HfAqe?Wq0bX*pvQ+l!cuIV;IA8
zgBg~m!RO+3axy_Gfx_E6?t*F}tD9vDFtRxLgEA|&ZMbGj#`hpxeE|9d<4W2jVdnt#
zajSa@MBttzO@_mvc>;iZ>=rEgcMO?7_252twGd?|o@~#M_a5a%2k&g+b~O|&?@n9W
z?ax!R{b7GMRP_;_$s6_vjPkenE-if&q*6ARs9$5zVnHbhsc2a3f%8#w{!7hU;!J(-
zy9BPBj9&S?ttJN^e`{%(H~h?cq~?1_zTL!&qIBF5T;_=v<VW7=DWT40)Vb}B#0!+2
zO-ep1W_%t(&1m&*$(IPl2Ix!-*k21BPdBBDlA}*5<>`ator}vkw{?pcGQM(D0Vpp!
zzb{Tg#HLu>vWvTYE}lN3JzT{&vi?d;iT&@ylz;~HlG&4u=ckRLJVjP)_5Z{1zL5{A
zC9EjY>E5!y$Lm><mMOOAmN9%pK(6)=Koho!qdf{JG^7d`lq4T@Mr!pVRVk8EA9)&9
zF354yqYR0X%3=0WE<<UL5G=5^d}eaw&efHl%z!2`Q*y4`4d&n9m)E~6m9-d6Xu!dT
zB$95&^`BTqhcbZ%<QVRI@UOsAGRb17$tMok_85DBt@w{r^F{)dFuZ1|r0bY`z7pnG
zXKd%I@}#`u<0IZelO1;o#+MdS<Gwf-A3g6EPiI!ZEcrwrNgmn`Mgge?4^UGA%AI=e
z$dLbZ@Ba7RETBjxv*h{iP3)w*&aXe+N*PgJ>c*>GOpEb*@Z54o4%F}A{mE48&<T4@
zx^|wPL<1eqR~B#s<HPu<_?L^N<*7(2TqTx%CH#mrs%Ms;T4y<YpS=`gBF=FGwbZD)
zJ(Q+(ALl2w`hm<sGM=4RGefzWrG>Pa9iWRYLuXV;kqa8ZpT1O&4lg-udTCULo8OQ7
zlCu!H1!qG^I=O=Hd74hL5K<fBPY1M|8Puu&jv=(he-$O2{?Y+@C0p4l&fE_d3RHqC
zflBb%zpN76sVEBvWP>=bC^A`SzakHn!$2*VKJ+;8H<m4>6d1yow8I8|8rKq5v9|`S
zlllZ`NJ~n|6UKac^C@C~(0JbB5d>-=*(0O6MRKR9xCV8yQaHfyrk81?q-jYC!-MHU
z{mAbAK3NOYJwWtg+s$W(`;LB<vTNH(FfL9j3de<#YHV8!d-nV!Iny2!cP&If-Y+bA
z7@5irfXy}cdm&kU4ztJ+K0nT@QCh9E@)@efwWvZ`P96jg12);?)M2kL6|}Za=FkS-
zy4P>G4KD9fr*poE*yzlLsL5a6YN;P=bQ9jF^2zC&@@ma;j`L#F-iC{fB+Kx=jxQwp
zl{!uui+b`tMU4y~Ant)JKG9LSU^2&Zm+s~u%;q4><{-@GAk2SxUcRbRysF}D4#NDA
zwrmc<Y&@*hlQsuo{;-Qb(%Ht%L6|>k3!8&5n}aZa*uv}5K*;7G%>RKwn9bpr&Ec2-
z<>~<;YIFES9;Y{lUp9wdHiuvSf0^r_9tzqVe%Ty;kyi*dhhKg#y>1S_Y!1I{4!>*;
zzibY_Y!1I{4!>*;zibY_{Lw1d9Ddmxev!|kZVta}4!>*;zid)qHYqTh6qrp4%q9iq
zKS_Zpz+6uGg9WfjgxMs*Y!YEMi7=Z)nE%&^Fq?xgn}aZ$gD{&Em`w`I2Dan(QRP29
z@UcmOc{?3va}Z{85N2}_=JkZPTEgZa%>QT*W?{YGesJhX`u?u3KKmi*ry-4)8<Y9}
zgkfSTe()&&r;X#q^e?)sifilAtAc*j3~K%e)VM1q@b=f=NGSgLlf?4<)*Fe<i|L)B
zQ8Wgi$c*0A*cj|{1SFw-K-VV!=)?UN+8KCfhq>Xxma*B?9BpA-ccLrES~{@o20<b_
z5wz6weE-Y!XrYR4e6A1J3cIH6=eum5-c8JAnt)`?$Mue*!bo;vy8BFb(Q%Nipvx0|
zD+ky-?+^b0q)X<WhWTek-x@s2ToY>?)k86%?Vo}nk2uoe*v10<MWxFI2Nj<=R~!0z
zn_VuWroRY}`&&2(4Bz72lglyET<yB40pqcebdMkbi&w*GOgFGlij}4mmO`KpGBx7o
z9}r`c&zDi*5>sn^%vIpuMj+T-#+s0riwgk3b>#6opvM4b5<u-Z0uULuuC1?j+vMlb
zXr_p{ShlO}hmB)<!;~o~Mt<H|uiPbo8>S8Gxb2hgQ(!55A^eUJ<~jH^Bb6JBu%oT;
zvg^^fXNQB99-+<^x#je`FO!Jd!D0SLtEucnfq08gMNW*h71M-3<~}2SZ*n!k9i;m-
zfX>!?P`WtbjXZmkH{$ynR>^Fu!LyXImBgK0cC4x&Eq)3uCB_c%Qt*Pvx`AZ%4>3Gm
z^GKCP&{Kmt=qJyc^ZUa)!ctl_hs|3(G<2c$R?bAVcE`*QRt7rR!8l|WyInystRZu8
zwYRr7rvM!Kcw-s=O?zm(xre*;>CN%dnAgM@R-O|`Eed|-=^F>}$47jT;+z2hu<eVt
zXZtrfv7ra&KW{j6k#%!cVT+$)jg%!i@V>ZYy1Xr;95?%LmbPz){#_WFpT8X}WLBz1
z@opk%&Dn7sA_&WvgRE=wP=LJ*gN2`i5F$GYiI&vJo8L4Hc;&#?v9ymyU8=Og;%v8w
zx=52(7U5Id7ne>eetSYxh=BcQdwEvrYjZsw7V1BZ3=9wzS`+P-mabo1@<D`WA{=8$
zmhH1!FU60M2t*mzz3>#QJu%%Yw_O}^VkL}OFgi387miJN2ah!5?|?;w{2g&Oe8VJg
z@|y%sKmXQ!>oxm<_KXaKN^*QhRlaknC9dc5Ly+$Mz=>c<v(z?%3@s4#d!`w{4#m%k
zC~ZpdI%`?#$c|)u?{uO8ILwgqSW~agb-1N_W!7b9oa0SFvP-8%3h2@ZCFt5}GnPU<
z9q(H*U+t)bLDOGecY#HK_Pob8(z~1zdZKCPR$X);Nf7P$%Wg$7)at~PHmy0|2fx-~
z;uP_oRZ9%|Gf0winL<C})7w|cBw89>+>ummYj0a#XiZoww3~REp`}<O$a?PcDKr0O
zmUK0hG1AZwyEK;g41ROt>;LiFm){x(+XMrEA!EYb@_Oa`-05wOPOJ}5&tKoFjXhG4
zzDAW~`(<;brWMEt?KUF&Dpvf<g=-a>IhKyy%imDErG8j7-|5nO{RQr=T7E5SBw7i`
zQcWm2i57TB9Y(7H4w_0|^uYGg8}gr*uQIdTXWL>`(c=sq#}C0X&13Ehki9vpc|>V^
zcm7>$Qii8FuPL*ynb*!&no<#2Y}uk0-k%wq3uT8THBr4-{rl&nP8^G?nD?L#PMw<4
z8KQv)vSS`$z@Q!@MXmIFL(RHR2tn|8DF*S&ZDVk0igqdHo!SGwa!c_A|HR%nD!BYQ
z8E@Td@V_M7z^$889&&VA08kFmJ<Fcmrve#PxSr+X-H_SlEfNyEeDx80p_u?h<GOCN
zBW#^Y(}z?d&}YM66cGhkB@Dg?s(SL{t0O^ST=-lh5rjHKVvKkJz!?6d^YNuv4j|H;
zr5;9-&2$-!%(LgV#)sXeUdwnHGO^U@rCO)ilwoNXNEtd;s01}s=eMoiNIUJO-^WBS
zkh^iq)QmI0om5-9f8`v!EY@4vQJJrvSKYxz?g-#AK`2}VHI!dM92Sdzn4e5#l$MUh
z1Gp{*^sU!H-DWF5>(aqj|6sW^J3HH76McGc+PeWCxvhw={Mu#=w>A6|a5MP*_t)NH
zHA#)78ZSoa-u1O>{<ZZ5P3DH3nt^VWyH}UPA^hRChm6H+nSZ>ru^v4hckw{`r_4A}
z)jmyuHW!ew28VfcuZbQM!E<dQNQ<q)_*Tz&n&ljf*I;tXL3BN3h}!|UgAp-z0l_#z
zTAV2%t|wl;j7^GlxUTfEHF}5DShp8QF@pN&EmBN2LH}bZrUJh>eE3qcu58in9mk{(
z+!~v_;I1!UA3&plJQyjphHco>8&~f_dj1?YC1n?W>zG8l55mphkhl1jRy+1^zyHy%
z(`B}B+nO4t^eklX0qvM-4#@+#lCTwnK2X@F1jAH(AOwhRYe|CCvyo7h#<s=`hl!~C
z$+28<OccAAQC5I=)Lj%~_eP3u614aeWV$JM-$yYd5`leA?|QQZ)@h}1AmZS{haLG>
zVx_x2{0R2g_I}E_z9R+<7gbydBfrVOUZ(o8%&)Btp%zwRK@xQP;rtZq-XX<QM3Du^
z5KHxw??lLS8+9sN?q1!Sx50MfJKt7P#-1?UP(67gj)}f_@$%((gP&j&GQzmc&>>eB
zSlS6c|FSzJ?RGdZuoqcG6;riE2NsH`ULHBJuB_482YEvSX;h+jP=M%6K^CTGD&evK
zwMx-zVHaL+4*wy;F)ET5+j*hLpqj)x7Ay|Mt*MPK7OLKrvFGyRe+U4n?^ANAs?897
zMHjtvULI4iV)G!sG`B8md;-O9F(>Y>TSTka`H!~;;QTR1m`P9)?Yt@U<s&FmS@8aR
zvwrLs=Wr;7A5O@rfZCFX`i{`t?YdY4!?jfohhtt@8SoB*%qjWFoLb$Jw?UTVy8tI6
z2{AqTI)uM*GBL8X)&A90xz&In5B)lo14ow^&GkBYX`Qgy#4Qn`ZckSdl>4|V+|>+Q
zyJ$R8A0i|rlcDuYIPp4hfN9c(VVW37vX8?20z_&kgbkM2))6*1hzvfCdKm*|9Kx~h
zC&XB-C70LZXBKf~?);{mbK7iHo{n`qzoRbXZf`Tl=|shDK^yQzIVmwM{qEsoDd((}
z&?_DIkB~8XPWnQXI4>+T><;`}Fb@fX?zfAh1**axVR<~55kcJ30?s*jTv5M569R3h
zULDIB^jv?Ky6^3GDkcoLQ$T{(`9^~GP=2TO(|>py?6+p$LMf%a{V3Sb3-li5;dGu~
z=lg*mE427t;EzWb`LTkmStI5MI^3r@qpms=_x*u(8a>rLUhuJjPX#zXZaIn_Otj{e
z7wH#7YNa%QcKgLvrJ%!01*G#J`+DvI8H%RUMxIcHm>p<b9Kg1X3%Rs&;x^CddF$4M
z;xs$&s~);&b6$W7RJmGlx|Z`BIOjvJz>aHz=V${d%agcNX8kRgV|iR!Z0!gk?y`YR
zz3>7K-}C06cqX%iF(4KhO*p067YKL&9@;vm0`}UIYy@Dy6pmj7JneDLsfg>Zy-C?F
zAd2%Zy`A>@g5OU;p)@t85TI+75Ycu;Ov!Z3J@^2^_BK(ci8C+~CN7a$CVoQzW3ZLv
zF?4NprxCa7e$o7(n5#BRqQM=|n3`VlJ}}moRch;3v(t{3GnggjeB3uf9k8dg1-S~D
z#s<!)Pf^Pcv%sbwjUIKdQSwcTvF-D|UZ<(yU?&?dLkWFFH>hn`ChOaReuKv9eRMBU
z!tqqpQtd=D-3e9V5oG5#vv_jRCs68PaCzt&TAH+E$|9XNTVWRMy_BB-wqwv`-P)!9
zN@o<{@1Tkwzal@H$)geJ8%G0@A5Ama^o>~c`s0hatxq#t#)Bb2@|y&+b^Oh0fWpam
zk6)BOd57rf2xX-iY1*}ngfb^kohfN&Vc5!kG=whZ-oJC3N;L@Pql0)k8ZbV8+PG3?
z3aaCApCx9dl&`!DV75>p9tA@^CpwbBn3axHrIah++;iLNNGGZ~F<U`_Y{#g}iMwv-
ziL+37WQ$t<6WGJxp_z6aSlgM=BkR2t`Md0817wdJ?WU{enhV5qmV<TldE!}pJgEy=
zbSpM@kxF;UOs>vd`~?6*zxUS1fQ^MbB9TGAg}%0<M&q5!TgGl|*+u*>7WMnjqZMxf
zMCid{AhEN~R@&Yn{0ev%bwkoRlZXdOrNcA)6>pTJe!A6<=EUrW2EKe)H`Md7CZt)+
zWkMJGgYcYCtG$vlIbKX^h4@rK-CY_bQwhct{&;E^f-%qU@53+=ks277(R1XLW~>pY
zoU^>(9Z+6E=reN=CS7-zbdeH4;Ls8x7|UqwI1qI!Co@soqOIY5K3P4bY#$Xo$7DX1
z6@%(Yi`Myi`QJEFEK$`v@f-?t1-@WH1<y05AnUP!%Z=o0gqb%(?~BVo-amF3dIY}V
zZtT^71W#4%=v$R_t~M@BF&K0PBF?eB67q2FHtP`M7XE_xp1RIDkmHu>G__@G8>u4V
z+#zZa4{=`S^vJ>}@YKiO+Vd=LIm%RpJ%$;s>-h`_JB28H!KXEFLTS|=5G=tmswXE;
z+d>mcs-p-NjlkFzJ8(2;?PlVv5yyvfPFZPk&rGcr*6bNyt*6*Zx1Qr8{EgLH3Y~Dy
z^*~lavCiYh0nC}a=WeEV%_WxBRycPgBm=voO=yS?ZM!$3tqW)=@$(7g3WI=zWL<px
z5~o?|;X7Ucx$glNB=^@0uHNfwaSkkh0T7TLuMOu7b9u#(wEaj1WsB359Y>ds0dJ$y
z-K^lCQ;t|%rnWLBjyudGcr+0mn`Lvo=>=FGq%a&R^a;i-<w#<JO)-*ITH0<4P1{;?
zyZIK|PKbRO#cv<Dx{gqBGVrN^2Sapn=_2fJfR>W)#Nt8paZoC)J@#)#cZ#MB4qWO5
zgO_wF=~O|#af_k&i4_dr_EiDG>V-L}!RaE+9oJtf?l%ZK;RZvO)^n3qLKEt_#SC*@
z_xM``JF$gv{(2a*l%uIO5-{)%Hm!}e{L*B(bveKO?*C0qp+-p=pa4cg;x0PD1a{n#
zsCo9bmF2J3KUV;YfAJ_p5?RGWm~`-gfjvgC0ZDGN({RJH-Mg0pam?IAM*%4qRvkLf
zC#?#;TZ)bQfT!h#^Diqh9~Ps%0ZmYfReoJPrM5v2ER<<Ok8DXxu_<(<)6VyXZrx$$
z$IiU+lz#;kTlER1B_@tZ-No&?arBNEGOhe!J;#&rsIA6oUdIh5q>H|4$1wdE+1YK3
zF#G*>{0T&0KCZ{p)bctIhUYcatoFXW%5wag+@H>bM`XVCrwiZ9WAf)u_q=(tUYDZM
z8ixTXCBG#YL}r^Py8wQlg>pq$x{z0NV3?A?C#Z_P0ZSZ9nG(C;<JMp=VAe+qTgK6V
z&!2f<Jo2QCVltxF!7P~cspB*fVkD!(rwS~e>KLUbsJR58SxfX0J*IZ=K28%oJCskc
z9hm}wA__8*2y?PQz*+1wBuscMW66QP^*f5x!c^$gji`z3`1Gex$HtcdEyno_ues#O
z)9RVpBJ4h%CskS%aH+JMhV|+b&(MBu5PbPPF0w}w(Z&P*1k0{iZTN`S_X7Buf7(7E
zGX2@f_V!Yx)@XT@(R2-WbnGE%Cs8WOkvh7P$lJ|*&>*nV?LxOf=^4~nwu|ajv4?@M
z=OB?33G<ifqotOhYR8;vvgge>63xCnu%r~<@m~D{ts0Ke$Pm+o>S16Cr1mifUWS|t
z7n2<(Fg_6~unAL8XO$iZbonC94;P?JX3-M!EiFlugTJMN?wSi|v{Y~`PIREXIX}~q
z2zGIdeBP9rF1d*+r})JjpYcrT7dyncw>qF{OQD%c%JZWl&;Z(r_u2@4Z#w-eFD)_#
zFyX5UW6eVF$*kbuV8%#Y&48*vEO=04@Ac0&^q1ybfy8#@$hU7elZ}s}!`q?(ih8eB
zL(U?8M_upo7Z7fVAF=Gn<LM#;T{}#Lw(!y*G0-4@Q>K~gh>2UynY;siQm!f!m!J;8
zkM9sHQe=zxV>x+RQg{2Z@O{`ZM=)kPVusfoAT8I-TkC<B?H@^8ZF*{CuwQS;#RjV#
zhF<x~>(Y~sOCP5vl&bZPAyt5j@sgbt|1}|;WWiELmjH<n^JyO>;A%}BD!igzmfx<$
zkBfNe2_8NJxbV4VoltXyNZ@Ee)iN8lpto0$ll6`?U*kg{&DRiX>3{sX%*%HIPQ%{G
z^zhr#e64NKAT`nU%RtmYbq)ry>s;5DzbY(>*U6!YSkpiIxy6@<3Vk)2vtzKdE~5$Y
zg&kIh93hFdOsZxcMUb`FT*0(9d14t<0pn?`9D6Y0HIm|`66UcBd|6xHiXiLYyd2{A
z?4yeT4&oO=_pytdu>*R!bxLsRz|r3vh#_0=C~tEl%YJ^5v4z>7#q1*Hw)|4L0~;Q0
z;QyI18pq@`wq;Yk(zx?{H2jfCX?bqR{D|I!Gl^(0c3kuWAQ;x{&iDsz{VqMsJ}1^3
zweAlD<?Sx-U_9H&t1fn<ci#w4|F+WIts?!`6A1X9;;w?!xDSqS$@iiMWTAfIU#82C
z;4_`q%ca9Ce$5f;8Hs7-NC-;G?W>sA)y2%*ra<kmzb;nFh?IRW8Fv8!7I=6T#PBB$
zl@?G?jc^z;ed*@SD#1t(Vrfs}?G-5V;C%M#$?+!eKPSvGy*LWn?jHYS#zus>Fe{Q+
ztbO0XQQu(~rra1OE?Mo=pI=;Y=?J6T)Nm#?Oc@&JCW;@HIR4_gK)u>v6~XLlOLa%s
z*C%0kp2YreGPGcEhQlE=42_6a&VT;a1TLxZriQ$l8-Gc4<HALK3|P|H&|9Xj4Qay>
zk6I)E(Fg$uoj_tvT<kP<b$RT_;(lKN|27XB2T-iLJ=4<b1I9DEY6>RzwcJMeu^LL!
zwQbW~2x)fWGhp4=VxTBA;nZoI|2)QzhqNBmnab{8+JjP^73NVg6nN}9G7?kezC5Na
z+x>$Apr3SU+Yz|FP}vG(9*{Ff8@nRtW9W(03p3rM?`eU@J1*dspIT{JNmIv+&r$Eu
z?L;5)KbXI3j$zK7M$D8}lN!W@6sU}qv`W-2paDW^katmx56W%iAh@t_<Gbq1Yq&~D
zKfm!d-uUQpF&>Uxefa~zDF!HPUzK)S(J2T?i3c+LUV*qsTX-6++q+NPH5GU~vgN~`
zGF6DQzoX><IK{H;Mk0I%6Cq7TpvO@2*7z1f(jqeRrUznq!q<?MdIvgXl(9&05IwTe
zq}VP9WGyiFW1<&|8dcuu4t!hFM-R6H2ywHEt~H_Dx}WTp#%d0Ju8AM$oSxUIsTUb-
zyLan)+EQ~FwLn|M%$$rmvaA{)GDIKeWl`%^*N%SwDSaIAS!CM*pw2%d7E2LQrP+Ry
zH>1zSH#Bi-T=xd_?g+E6yPqxXzcoLyIC_FX|KBLgi6(Bk(Y<R$-KW`t6?q}*XTMH+
zKwRX>y`nQ+bOlB1qtm18tMQmJ^*A+LZz04a5`UpY713%p;lY68>E&%N61@=tKt#hX
zafxZ=QK)6+9cJjznNd4Y88iA8NORAukwJQj1+$&BiaYV*XL9V9=Jy(69SX62ys?@&
zkDFA20>G;$_jkJC7*A8v65NU9&>5TkzPP2&(1kLv-+>2^d@+ffCCQ-w0)vv`FT~r5
z<#p}VTk(zWdIu8ZdCQb%#D<DcnUee+=uF<oa$hGc07J$&p}jrD90eS}JgQTfmbguP
zZ+fw!G^ZaQ06bYwM)QM5Ey*lajTKO$T{{fi1h{EvZu=RI-?!H7t}Mv1^Ym(#dSH(a
zt+6dXKTP^8@xUqYVwVE1d_BJ|%&VZTUgSP%*EWo{dR})aJ=gI^r3ok5cEbi&(dC`V
zmYBG@i}-^F=U1Nv$~=P5h6-3|vDH!`B)@jTVgw_;4exMK1)2?9rWgJ@_Ote8g|$A4
zHe{w*X~F@h>cm8G1hqMfb0FVm@U->J#r1~|AIe?^A1mA_L~cY`z<>a1yj=Q4BjV!g
za9*}wem2)A-@V1w*3x%6#LL$BYiq52i7#eTqaob1it2oAa>hV?FsAK;hzDS-<bj~D
zFWZt*&9_G#fe-xx<TACuivzKC-IDHT$;5{(bG3N=?t@5t+`fQ`g#ea1gP3PI<x6vN
zFd-)`GU1h+M?1tyDLcWrFU+nt@ArDvUX0wk#d2}0Aviguc*$YzdGi4ih}DjZB%Z@B
z3SP`#vl*7e?ZpjNYwTb=o!9S$Rpm*@#qoOZ)TyT&1AR0Pf;{ccbCE^P+Ageir!uC1
zoPT+jvdf2W&FV}J0ioDr*~0E0uVXPQ0XU_oi|*H6AJT>k{_ucez9Tj&Dm0W1I4u}^
zM)f_%;bnOD1J{Pf&28%^^~KKxtzh87vn~>M!^CB@gaSM4Z}9R~c4DdEv}3hez;aYh
zvzYb%l5aSTM2ajXgqX$gwNFz6RMFC})*bOl&<S#Vv@bD}m<`%{)6u5s><f$!sH67b
zqVu<TjUp{?W&4n>5?+6hufvvP6iKkXHPsy458uI0v%VVRZ(+>6@20}D#8>2`Q+(kh
zM)nZr{4C<L@RBHLQnQ<LFrJxz#XZ~?I1_K0!sTG>#RDI0+><xHX2_p)yU~hf=H^T#
z<z-(8H|tw`_I6xPlH<s-8}DemwY0D0`xT$Y;tE-?_~DJ-AcjpSi$(yi{?jtUZni}&
z7zgBD$M|PGb@eTlf7A^&x5bV>XLP)fO`y^al%m=+Yfw+?+iDC1`v&S7LI>t8vBlW!
z(n}QArHSyEFUKBYzKYq}ePQb01ah9LAQWqU`J!+Hddad=cfU=*!KZE2YB0k{wE$&s
zm%~UCV*dea3OJ`<rvq(@4eV*+RFjCRO&|*}W(MLpx;F77bFrUB0|5fWb-#W8){}Xq
zL#A-qWL;5z!;A3$0a#JZxT(i$BieA+4ais7ZL6V(ni@~PZJsT=aCs#3vg`triown9
zrfPz*_5I!9L8BGuB`p+Dr~^+GO!rsFewp%`_-xeFnheuJpnuyhW2+#`wBcv{-NCxe
zjus?!LCYSbYG6l?$qtKj@lZm{<$m`mTF5BuSj=cuZ$XOk?mF<*a?P&ej-Up**ZYV&
zT-YxK&V6phBA`<zFj^1A37O}2JNWr_ShhFA8#5C0B<jrsXE&T*91ZxJ(vQBU5)uxa
zDtLl^*l$2TT;E&Zz+CGltuGDNJP2L|`~F2K-K*h+wLVgPPN?)G#d4-w%{923Lfks%
zWu+UXB<&M@#wGg^GhHMDml@e3frsp6fPj*23XrS7%Z%u4gBo)qdQ|*G6IGn6t&i_H
zgKg`|0)g9Rg3WwM#IqLjI#W99y?vRZ4mY`EUsbc2R*ymi3dH+3zQhdLqCn3T<!CJ6
zzlL2B2*|3~iN56r`Y>N@{3j9V9zo!IF_%<opntak%P3s`g^IAp#E}>QW__%68#aZ<
zTZtEdAEOF3@{%|GMedfZK<k?T0@K|gK#X3B-$%}y6Yx%(g#4QR#ywl`lvm{{fB4n>
zEjgX?njIi<7>gH<x2BY~@q!^DDn$GfU>kpv#Z;&lcrPMz?66Gg<ifhR)ZC8QGj?a|
z(`+ra7qYuAX5|40{atVWd?2wJkmmzeN$0t0<HSDnoF#K9AfX*Bz6rk3M;&gMzotJ}
z*s1{Ar*3OwL)dd*_sea*X~RwHi46pkTQ)$OF?)WsDn2uz07!i%OoDn#1<wg-?#n$c
zHoDlQAJ`c$U%26P){>3DmrAj0tL8OlZ$=`_7LZT^pz54*Xw))4E3KDU`^+D;KAn0R
zn7;4?B$Up--FW^bp#+o|#KB!VH)=5dwv|Ry1Zq0Kyhv0VO$A#&-E@zTgAWuJWsxno
zrG7`?Zk7i}EwMYuFnSp%$5EyXu@LK1r{S)=n@aKMGo$&zk|&GKa8tqbsUkwIm|J4m
z?z(V_%C~*>B_Dt-JM7zM&Cqyh^2g~Abiw2;qPE8pzQ^H(8>~^`AjoLj#BDD%3v<nb
zEF^rvw*E(3Cee6{x&QH{>nUs8=g9?vMT;p@KzB)SHvAl%n3-5BYwhaOF8HP+xnZT3
zTHEp&i(QDjm80qi6jDn{OBcB}QnVfZrJ(e#DizQe0Th(vjr*cE8~2*>vfcK#%f&PT
zO#lYn%#0p;abY+W?ALjKQO3x|hhQI}s!IZYK^<AHG|%HmB3(zzp%Wig#`Z(Xx{GK5
zrWhvm63DjPA}5^Iguz`rFz8yVtINCD>>e=zfBgTkcIHt{p84BXQNa-j)GB)drPa>V
zf)v?FBBIjPDmu0bifpMw4f`e#0wUI+EYUh6OITE<q9rV83WyLEfka9mP$UWa5(t3=
zA!H#00`DC=BRV59zrLsb#j)qm<8z+pzQ4=ox~}bw`$_n1zBUt~>D}z;uu^hKOJuO+
zBvmbA9c1hfXR+bh1>*qEU-W)`!lpaDlpd;6JoTDx($JwwrM|)adu)Bde)n%<zD%LL
ze^v8n%FB#V(v58}Z{j`I<Z&qDCN_{Ss;njRMdRx?RCzPxOH)%*ZA^k)?;7*nFI3;r
z7oyWnufHSVG1ZxD_Nni?&g7G-Cc8FIP?sB8?sG2`cK>p=_XqohEwc6Ntga5k2gK?9
zNy(C&;kNeHMzLl7+mp09^R1(pS0PxzS@mjZ3z_G86yd+5FVqo}y||=ASWH#EeOXqc
z1Fw^w&3)SPqjz9QTfqv||N9wJPfhz;qjgIcSaZ+h1>&png-<qo^6^q<DeM=cXEL=P
zb<?GASh<93W3$vrbj@9e`MiFitkj-Sn&-sI9+$0as0(2=x+X-BIv?kcJG+{<pU2rf
z!rBX%Amy*NirW0qJL?)9yB(@&=HD$k?N`4fgld5Xq5t%*BWwL{!zzpGO-O%F<~?>c
z;*!CGtjWL2)?b0MWGJr7N_p&(u=p?m_Mk3m$%C7O+_ua}w&WeGo02#aAokkfy<5`<
z9|nz1F3Rq2tj%jtG@0^mG^;z$c-S^CjZk~IMMyGhzCTZmYK@M0ejoN!eaj}9w$`&|
zJ5_#CTDc8NQ4Q_hd==bpkHo1wU*=w9Ja4;+!zM$&8tW|mCKFDguyp6~Mt2tPFdFCI
z)Sr`^)7wdGl%FsT8#$tRbwI%wE8B@-wlJ3CXy}=tp_+wR=dnMo6z&JP^BGCQi~2ME
z9TrC$;kfR7hx$_5vhyy2S#N1P1+GDsobD33k^D5R{Nh<W7T!PuyY#4BL5j}{_Ovm*
z8y_+S+dARR9P5n}07QlBgtr!<)1bE@(vgroa{ZLHrFQyq-9@)fcvEX}hSY~47?GZr
zC53NZ(p$GKy()lVdn`ZHzG)a`E)?#Vk2ewPxxhEUpeB3(mbns0mb`fj!USs9scP)h
zk6gwJmnWrC=^+9#mOERp+?;wE{s%6L06C`0Pjb8j2(iZ%Xd>cLY~f^<%=Ze8RnQyP
zV<sPQ$uF<vKOZkOx_8<&X!FzZ68qUMx`M$%%Se>|x%XUxZS5sy^H1q`s}ES{VDo8?
zwrtL%aKTBO-Kt<{*q=&}^0jB?L+7s`?K@D-M`G;eVlJ5D2UCVy4RR|yg33D8V7D})
zxJ%DzMTO}YLFokfIzquc@+tTxHI`o-C^O?YmBxcXcyhZZPh_cP6CuD;5Kp;wG8R1u
zhijP+qfM~cGj*c>af5HG^K8jpkjZ31Q1(nmlzP`WB%X}A_Qp*=q$>UD{{D6RI~u5i
z!|W}y!DtI_uXt;(Ats1^;ips-_Fa!tRO!otQ0$55qY348@jgS=p@{vN<2x~kIL|vN
z3QY;iwG>iCx){II-DP&n$blvITdW%`uHzZZ=SzpSAA!aJMlpg1j)P!aguE1O#)_7*
z=qt_#p23@(pwE-OCt9l!XD^nhZ+MFGK$Wkj5qwfb^~cfM!c2NQh#6K!wkzBsWAF7v
zUHNdd^HMUagGaYfUohh9A-+0}{IQMhDQuzdClQdCF}L4#_1jjWbKiApBx>Ynsdh;1
zmHZE1KL8(y>M~05TRnN+=tArFxw>7JG&gSo6JKSjKwol1?7oi7?uTBA*!QIs|Gw<R
z`gjd0yCiG6+kY4SD2qg1tY1g9&g>K<!Qg#=!U_!C;+tY=B@VF7KB(a%&@e~lT*xt;
zQ+4PIGzTO>r$sB_DGtgO7tN?Scl2Gz_V=7lu^L17YCRvxgx^~{5$IqVt>e#pR<pcG
z=X+Rh&Wl537&F3zDZZA4X8I6}6Vzketx#MGjVhKNOL38cu(~?9NZwVrXg#Pv4aP}6
zf<WE}xRw=#HPhvhV6##hGc<Sd!!?F@ld2WtWL(Oz)q+Q60)}|-kMFKRA8$O@xDP{O
zVnp5)#f)kgfllM}GYyQf+5ebqKHO17ub3itp_E+BI6Zk6s)TfOh0h2c>^>GWP2;*+
z*xJMuGrxjQiT6KKP?kKjMnxx{kJz`gLaU!jo%lbWBzUqSAKEIPAmTMd@)PPORzfc`
zkzZ8cHSQ#tdJZ1J{uv#&V4?`wOcY7=yGQ&KTi%BuuVm1#56Z1K8(WLcS0Jq6W|)I8
z7Vop2uow>*>{{&2`H^&|56fyPXbJ)wem38TMNfyq+OMX;A==Av;o;(pzOxl;JekL;
zC-XS&M*HgaRi@%$aCUcB=j3lZnSTx<RBsJI|FqSGYZbu?xvmypdYGRtb6)4LG+Dgs
z6fB~bU$rX(J}B1-R^cs8?l5mbf$MV+PrV%l7i=fs+J1mp*~BGNEOOu&lz-LqG}*S$
zDyD{jeo!lVvERvXx#^5IQYuHd?~x5}yqsvXc_f54)}euwY(No?@+nSNtRYcLZHJsj
z14vb~hsuaa<ye2@_m)mt_q4E^5hZX~Rfky-K}v?@?=Y_A+2CP4px(*9<$}93N;qn|
z`>Ix7iawxLmuB0hixW;Ceq-?c#*y;7$;@-x<?NpE@gE@CCF+~tY{@aJ3pXp&iPpF-
zn=cE{%o+tlrj3~?uPPg99rR=%_GOOyqYr}-?0ba0eGoT9Y_+J8PL%d`r86B;n}_h5
zDNg;(<yBy5{}bNWJ3{WBZ$053JOJiXprWsZ?A(g5YuFgpA-y#=dS(BM!^Rekq_pyk
zNSn>DYo1plyuv35M|DbU{F@bH)`WOrF+GN3SOgIp6vn?G=4H`0<>ZHln1hF3+!Bb3
z1UEt;;IYC?Xt_+qt3ArmzBS^LcDvmB_3z!$|MCI=V;k|G9X@|u-EmX^NL0hS)5Ak#
zfP|r>q=>;Xu1|ky!v-o#a<0p4y40w{HO(hHFxXznTF!3xu@OS0_Hkyd2R-@P68?*>
z`9NGmaukbamS;^Jm~y{EfLjXLMwEe#xze`juW;h;F;diYE?CU(!U}W<_b7L*V%ZGH
z&hKYFg661^57*>iES?XhY=IglgmSE~mP^l3TsS76h#3GG_S}v(XYJojqr`a4`J(Sp
zSO9{zlFA>+%PIg*av-R=JiaMrX8`N746NYfR%d2CBp3aviTbUyNi<tyJY0AHTu6m;
zA33bzbsW`9R5s#%_sy5=UmsV<{JN1=Q&FY9t?H}F&w*Yvoc0hO*(5v3oa>+$Lt#SN
zt*yp>Gj^CcD}FPrB%j(REZ0ZlBrlG4a8U$XnRTVK?FKALCb@kU?Aiw-BgUK=&Ar$d
z8_Xy-i{ut`>0@3Kgo^d2B{e^T9NU}db?Rf!3)Cz43K7)tS;KdqYbhC&c8;D`)Buca
z8zeoS216AG7pz=5%lytbVVXl~OZ9On8*#&-1M-N~KhaCHkSsp=WUEuV9ECPvG<mj1
zcUzcfe)rDCAV*JiJ8{$}?Oxwb!?!^d46-4=TO%8?)xu;c@M}=y8G>1`KlU-`ktVYa
zUubg8WG@Fr%CMyr+>peN;%_1d$hV1Mdj(B>pOWQ^i@@Z|18k9EJHr%Q@lkUD>a6lH
z)2ox`!AOE(u)jS1u5{wEOo)LCN}q0_=HD74KO3Rm!k-C`jkc)hWi?`Sq1c0;lav=&
z4S2#67M(zy@blMmY(2_oNY&$d|4GJ4KIDFf3%QKJoJn}0?#+@Lx@j?g%<IXf^lwCp
zJ@OaL<afA)%K~xMiW4|~9saO=%J71C0zENdQJXj3r+@nL@qh>DBX#?5T^eaCpx!;5
z=7VZW)y7*ONctKMY=rsVba!kuLHu4(uGF9vnxKxobgT7Y0&^lu)J%^Lk@396Pk8;L
zENY{H;}k&fGPlB5gFOoQEdtyxmr$*~+|nS^7Viz;do3w!OQcsST=&~3jZ0q>w|R^A
zVlN7(PQ&I*+DYWI`BW2;jtxfIKDK*jXNEG{kca?#f>!E6YU5C~9qQyvYMQHtMijHL
zH*tCu9%HXD82|n7m?{zdy@dQwoa?o`;Mj+tPhxKt+EzZ!qaqlZ8{r5^kf4z?OwaR8
zm<OqcRB2YHJ#4Y8vUZ^jS7W=AsvPCfu4kqg4eI7z9yQ`;8FM_W?hyJ1UHTr`_!3Cy
zC6&PDeH<y;axVJ5b)h<qH(v9%TOC~y5WR*e0wE^t>;zXK)bZ2Cog>1KsK)?wnbl=^
zo7DT0YK5nj0TBB~h56;Dy(5|ypX~RJcrlT&jf8A<F;-^kFca(rr^Q<}f^7m5{&fbt
zF_8j4=4h%u8b%@C<n>46^WWzS18N%qm0GQj*nclS)>v|?8sInB*dG(J6Ct>6QYYCp
z-~~N@dHNdw$6g&GyQ6Y%?5+zXO)gXbtg<05mQ|VGZ#ON7@3-w_!)tFwrWPWsIb9h+
zN^1*HlzJF4y@osnz0)Ds6-}7g722VkPUr;hr>Q6F)Ql;ij03*1XA~#T_u+m{2myDK
zg#Y}9;~8YynbY3lVzdYM9Px5mAp(nzdwd>_p`ec*<)W){cNj;_mD(^7Q=i^7cn+@Q
z`K=m;DevZjb{_)g>29gL!&k4bn&^Gt0XZ4?t`4c*EN~C2&_Z3xLcab=j`PaTkUt42
z4@<M}bFgVJD$8cTst+@rjR?5b<0LOD9LkNw3^`)`MCIVjmv-v}pX2sy57zP*Fz3p=
z!iQaIlrt|MGYx#xwCVekO)IU1G3a0|LF%RLVjpyyovg=bMvPZ~>c#+JyY7&R68IPy
zhHY+*fy&nX)U&L&6MJv6bij$X^VcU(pBS4_9VXg*zG<#VgQ2+u)G5W>cu$)Kb}tWJ
zg2737zYZxr{JGX)3g^HD(U(%&l>@{-=>5=NNtexykF%3TtHCY9PkC6C2ff77Z1U*q
zwM<J>I&_R+V3h>5j?TjA_+m<l$W+}$xd(#1bl;Wr6lT4WUcQ`-@6T)N=M;Z|VDWOt
zD_EzI{+ourNj)dl4h|CB=k9^*1ZBRHUW{Ftz0w^TM&0Xh9Ts+1{eovYUj0D5KLufP
z&0WZIW@a0(JWMar)jKm3JbxOY1`(Gz?(4?LrW5YxJstBoOjov0dOfV1c1w$!18`6T
z$uF;*w_wLmyEY%Zq&{tZFY@(EusY!f+Osa5**bQdeAai7@Q6`aS&5z*JQs+MRVuo>
zj7xrb{TZ2TnBN78T&&qAtGk0Yp7GKLiPZqZyp%fB7L80AycGKneaR_`tGijR<RoF6
zF}zO`+b~VHf!Ks|wzfmz2u0i6aR8*KCn#A~56pHaDdZk2(a48w$5P`-#vJ=Q)Y&`;
z^{NG!xK%9orW}i(GUM!+X;|_Z(I)KBdTE+N)vPMV{@L95oPWc6^!n4uQ?r(vjibUA
zL=5DQjrJ@(VRAVO6hfF0fxb=Sz#zr`tak$Qyk-=_VWF51R1A*rdEc}r8Ho-;UIX4U
zAxET`no_he)+qV6=zx-c3obQ%wHb<1HABWGcRzSNwR_`fXsU<?z}NMuHq+A;qQQp=
zv5z~ukZEoHaYD&oDTQ^tc3AQa-=j5D9$!05xlhgTL0*=#mw=nn-lJg1ea`|wcfi25
zFJF2C`|z7!^O-~Do2y9QL7t^*5nU4e!()QPd$*%;egIs?l0x>2L-e%T2a^g=(;r>T
zbA58<_{PLM_m#iS9$6>w))eqvkNI_<O`=xWL#(rImm@IY;NtUme4}G*#=hqc`%F9Q
za<JB%3E0Yp?2c;@crbiP=pSkmPJqLvttNw#U=1$itEOwr>VCI?<a+$8z3e9NOA(D=
z>-LSA#J$TgaK+9F*DX0?1_X{Py~{xXvU3HfV%*)c!A~gh5=`HG+BSG(hX*VdJ}y7I
zLie}>ONfwX5fr3iH>aqu2W)1K)o?++C4Hggi~iW)snVDm&K+17=KkfjrH@6!gfGK%
zzcLrEUw>lv`;kU*)Ssi4lzQ>|{KXn-#`YV15K2}YKYd=lXzE|p({ke;eJEU;kmihI
zv!LC(<fuk(Lk9r{b(mCY?0t|bEv5^r-1C{ykw97F9Tcow{4D#O1>C{m7S&|81?jB5
z`oUGJq**0)N8XimJ_C}@0f)G`p-<oG<Nf^G4^4Za0TKK9%!=CKwP1)iS$x>l+a{F3
zA7F-U_v^5-5)PfBry9}kHy$>|6%*2&UVs5nm<eBp`K=R0N+t%Ug|`V~Zdl=?7TbGT
z6Q!a-jwRf4k78DHWphiSc73Sx`ho&2>_#G9x8mqLZ}yo&fYw?{KEWuA-;@do<^7C^
z^(Ag4#?xkX%1|fK#&J5bo0mIv;h6a%3n|+Z04JRuu!Ml7C3-3otTJk|?ALflOjYyT
z`-ILDtMgnf)jU_N>922mG^;<F*4GtK<6>GYOlopNts9pw8cy_-D#1L(zROM7rMXyC
zo_1-wk}tL?bnw%;<c`l;4)FKOBs3dvo;R4O2}+lnO3P;{^M*)2ZI;}U(L%C_4YSk^
zpdHT_-)fb6K;t}!DLqE=SP<O3XO~J2;c4Ltl^N~yU~eElw9>7AIAAC7`fKjO>^aly
zt;j&W<Z{|M?<MW^CyzX*E%<V{OwBk9Bh1k(R^2A<mUW?&!5xfS{^;kOXpu#h11i&-
z5gmzBE|)GR$%Jc>btZ4nhYLGeFVDz>AED9zA49shxt85%3$LZgB9UTIHI(|R72mj0
z9eb|pWbuWG^;h9NMKhs|NH|9Wkz6~~nRUmZ?&nkZQa|H4(u5gu;tXomxzxf2+-TGo
z37vMP+A3CXTwoVe9BdrtE^utcZ@nSYhR~b!1m{^xh>vG~<<$H`w`<5LuM<v@&Yqhm
zwQw8P3pJKG0sO*Rv@eaepF}?ci_F<Uu8qkmKd}O_%Iwy6!?8FF<q<UCpjmZ4*BL2Q
zGw!%nq|aJ?ph`<rDE`!8^*H7vsrtZs?yC}sHwwSm+x6q)%^4K%0Omm_$a7wg>ykwG
zvD*TWHlSsF<S470$#xGAo-+(K4_tl#z67(ocJ1ds4Yw*Hj_(rcEAB~_7|AwMW&S=W
zH@B+zG3U(31UWxZ+MB@ivM*tJdB>50jkzzaiDO>QuI<oY)WS?wHryK875D5~lL5Te
zYd_NT{(Rh+&B~ri>syJ`_^*izo%(KGb9%vWT!$IYR2?iHA~5F2pF+pRN7gS3dQ$bJ
zBWht#FyV1>6vqy>MbE2Sjup@n81jVEr%xv=*gouB9ZJ4+;kv1ILvG7k99HW#j!MKB
z)$H-pJ9^}J`o=tDLVQ&G@~FTWtQxEJC5QVwnW>y3fkU=%?w_7^6R65=MJJ{$yT?<O
zYgJ$t)ZJMa2q3K_i}>dT6L|(0q<w5esx*K!ZHYu|w+V~35hhR2+q1*T{w8^M+?%2W
z1!u!O)Ralh*C5A2bf1sxFdsYr!gA}CZ27udgr-9;VxaS5zL|IQ4b}FuBB9;u%`xZO
zCbH=pUU&mtqAhYl8c+hqOO@^~km+W$aNlr3dbu=<{0Rwc`k%^-<VzQ66RMhDvFV!W
z?bS2ljeqO!$5d6})YVVy083Jv9~!CtU0#r)V6yw6cdsvZ<&l<hOfgD0=N%VNPrnYs
zad`D^x$wz?-ceBlTTztfsbLda-R6r6xEVvP@;}9L01IVZge<iPWrHt|f4l-D*04GE
zAxE++!?jI4r3DJ;pb%=Ay1y4&Zc=p2Cr;Din(-4pOB!Hn3BA%}#Zp}Lqh%0;W@<8;
zp^H;_rjF#r?(0$mWZzM`2ic5;J_<DbGK;LLQ`PZJBZc>Dkr?Iyl06wblTzOLXO&<%
z^4{uqvU=0#*!|vP*KtEehOR(uV=P%;^3^BEwyTIsP0(OPq4bA3;xfkX=f%A~U!PsE
z#j&4Xszm4533-i#rC+j-<VN`=S0bXqVs^<&iqq2dVt+}i%*cU@#?byD33HUgnQWjW
z8L;y8=AI+OZl4|;vYVdIhQFX*jc@3A7&B*I^N*0z@ITjFnfy82bdEgFU5{0!d^md|
z7}j9GPupQ+W9rNGOorWZ(6G5ixB#6QF5Qty>>;!TY~xwqrP@sSh&@@Z_+fk|1P&C+
z!SP||7;+(CRBbCOy)OQNh$^UV{j`@*G$b0}@GJWc%-9`R*(X3zYh~AgPzF9EoV2eD
z?kkT;rMP0#%xDTpz}bZEaPzRN;JZW)EWOlva>q*ObxTfafw?t_kT#O1$4ZX%yJ3m9
z@t@kBr00rzx!>to07>lsWCpgY2FR+Ihpt^8gf#Z1Tqw-Ld!x;7mL8YDx|#O`yT4xY
zC|y?ET6u!N3VzxQwX)=8kB^uQx9(3@CXY1UD@0h;s{ZEmdp~m<_h&wK8?a^vKqfvI
znsS3;0KBuZ@N%HLatUI&#&!LBOS)Ge!!qX7P}`H`M?D78i^&fwdwb~XE}Ij#RVOWD
z;`Al%6j#Q5T;MbG(HWZu#tAEgxwPgW+?*Ll8_k{Gayd91g`68k;o4KRke7<#Ts{L2
zK}l_OEm`!E%*$!vX)9A0MsVI25_d~=UFj&Pvy_6DeqVP=7dE;ceQc?1OEmIFSc5|0
zj)%`-6y51CvL^C<2l}2$h#M|~b()~nIYgc4Oz7s80*NaNZIgi!f|9>SDqXBoKzb=|
zuj`W4Llt~T$F5viq4FB>5Hu+Z+|dijJDg+lKp?Q)?!4<8-<iBvHI+O2#klUf<o5Bo
z^}F+(kXX@ZGeA`<^_RH%xL+j!eeWkY^(DKN%E?D_;R0@$JVD9UHO5TMcC7O~ni^U{
zp2XBFcH^yo0{XQIx@Yx#0i=KVa)gG6F0h_A5X4l}k3*C#gy#b8%c0B7>C>H~iLg7#
zMn*X<TQWDttS8f64zDx}HEutW16Gc0^Kt!1Mm-ahK6BeEr`U?I#>0DJr%ZFws4*>~
zBQdjuh;7SFw;&B{YADfn*`#!$A>U|uoQyzdiqF6tV`U85l&jab<&>2OS`i>IidXKX
zefI8`Cpz|@jEAz4zwveR_}|xRt{cEv2G|ituK#r)&GPALJX&X?>|${AB&V$k3JMMG
z&t$`sI50E^-v&*%mZhgm=Sm75N?VfZtc!!0mAC=<J+r$C$>T1UV>k&Q4|d5PqhvX%
zf25+DU;w)As0{16<)-)OS>?>IR(dKa26+iOTL>Foe;=>CKJ2)8a%RR>Qz6+*Zsh%o
zk$|pqMc2A8=J}y`$ygIpA<qoIdloKJl-QRQxH6o*Rz~@PROVlJO+$-QC@(*Kp{Ntl
zdK91M3;y41cC_SqvnJG}2CQdo*P2o}*#pArsETJj`6kc$f0DyG?Ux79AXXPL(Lkhx
zd;;$Q!d{zhD>Fr3#xb$->BE^bu&~>GH9~#PWS76qPPhQofY0g8Y^&n=P{F2lde>lD
znzY4tkHef<?+srQR^#=(M6n%x3gcA8c4v=0t<01RCLXz>KKFr8>2u&`EgSRmniu;8
zDCoT6fj914X_Vi!<Uxg^%r@vQu?*~bznlXyStClnpXkv1kx*9CbwcUU4zs2(h<`KH
zMj}5u<SvoVtxN2;09FK%ky74-t5M);7yagkH~SCOck~bWC#$v<QM*BtJ#hQ(-gh+F
zLw|lH8(>O@+Mk@++wp|Z;n-%OV<P)@aorXDh9IO3Li4+LOl+~}e4uwV21~i&jOQ~A
zs?iO2(847F3eR0!whLyptSL)ga4!vI)e~y^nMNFjud$eqY6~6sw!74Z&Fft8vTB*v
zHotD<t+g(GA120ksWZlTX=z8|j`x@OY{+>n-^KOaTj`2C!Wo6Tq2V&Wt)P9$>BHeT
z4%>)#8XUN7Vc09f-gbhK0;B_r|AIMp&rEmXCxp=pYL0Zm*4B2Ye{l5sch)r;zgOhA
z?zdr;uFEJ;*`qr!M`706IvJ8L7uVH8F^go;{gpHDc-g4}I;7LvahW7)$lsjc-=r7*
zz&lcLkB&D=wx8bQ8hp}LB*85n-{8&s7B{LbX&MER5)#pGd3I1J>dto;V1t;6gV}(o
z>wpX-UE6@wP#^I#`a0x5J?)GkMtP2KNeyUfw!MfsEG|Q5!jR%E+PPP^Sq^41H2t)N
z`(>xMKJwjz2?rVqE5D%jW5=fXZN5v7w5n!5+T0L?^AB@RDWCY(KLNp|%+CZ5#>q|Q
z{<u>3B^dR#I)mjs;K4H<j^x!|%6>52?0=NG56pT`*Y!ZJxhsk;%66Z!ysmGF#Doi6
zwq1h*G!u6U$+R^mY9B$`NeSPHOVMG0wUGc<3C(NFmQxNBp5qlEb~~3+oBiV_P%A?}
z7xJN_<E+-$y*%lx;<LpDd$oAYb?fM!Hax>Z<`W~oSxen0*-b3+R!r*sysHq1wgf<C
z1+FYT@nQyDY`MK?03O*L>OW=L&sHcN&|%b2`H2-jS`qXQTowU}Y-!WA6=Q2ai+$Zk
z0q+X6OY+s?-g<=KL}0B@XKD66^Ne@I*xYHYjv_N#wShBiBl#o>=P$6rvOI!fZrraV
z8YymL2e^&;Is%GqMpS?XHs)4WTwYAud7S?>qoTUlh~)XjC)oOYBR+Zb2PdNir+pbN
zGlyo+ryc9tW6R+uLO$PE9SY<D-6!egQnuLL1*R1JuoHZf8xt;>a&!XnP9wn}{2<y~
zEYDnT_*B~H0UHQ4!U|B8wY6hdd#)IutSXh?f4#x4dzXCM7Kg=RWuWYddde>K&aMBm
z<AK#_Xnn9soiz02U+UgyDqjCME7&Nnq-0oF)ESh{pl7#gNDlRN1-c-V{hGjdKoDN@
zu&&n|SvHex2QvX?Sk^E^Ny{PJ=2$@i8}G^5hg_bT)Y+|NjEN&Fy+thV@U%syV&=w2
z5Wp+iI*7q>P>FB=(g+<)O{{>sVq!W1^@BpjoLkzm6OYRGvDMZOkV)j;bzIlIv}m74
zl+E_qf&8{s{dD4rs5`y%O7|o)k75#k5OYC{A|}OYMQFlyJ%V-fQ0B5RlnINTZ#`G|
z+ur_qLd_o}Jn_jcD0Ebej$Q>daXd|`srVsg&lL_P2x9GE@PoeO_~N5=$ZLZbHbZvF
z>Q3V>42y&FxiV<L;7c0_d4b<irD?m7esI+3T!>nk<?Kh0s$6u8T_GZGz;4P)SO^?(
zYL@d3<t~qzZgz|zS+(M~Y=M3v7_rk+9}8hXJAlk2SGz`og7)=VxvJ3u2|PCS0jK;n
zU3|;MTR=erGq<`VCsGz!q<hU1qlr=e?2)hUJfn2K)1@>BR$2xl6yM|3|HMMiWO)eY
zCrL=+3cDtF;m_Z%F~o~d$?qd-5A9wpc(5u01p0pKDgg4vJ%)JiNllHs)I&KBh7o+q
z;eeOuv~>8<UnPEK{C?C~DQA+r9J(2yxio2cn)NUtf@eE(X?JB5S5%N;Xb4E2hfryZ
ziLcUQd5^kC{_)ss&KPh|7>I>N^gebq7dUhg<2_->Ytc)Ok{+!*sh-IHu+QaMOM|xg
z%n#JRS=9oylU-7qT#-5zVyWDClK`u4MY#ko86>4=%Rf7tpPhHx`T+zJuAf4vArT-4
z;LVF6uF&_~hk7U;`P8anH!T6m71%m8(DKwZ5^Afe7Fwr2?OWr?e64yiU)LU-SS^MZ
zRZj+C)cVdF{-1*g)muYPEz;k2pwAY!v{hXaYbJ49G+Af7EIGBk2;vYZ@x0Rt4PHvF
zRG}__g)fzMnvE4yNN<qyq&Mibyk80WhKQyf-S)h4OG>{?#vyiPIStaSP7Fm~GRfNp
zjLJ&$V^vNk*pRE$`?Zon?83t?T!Y6ZlIgo79?<%1b;o7i2hdO(mZ$s!PFq7SoC0gn
zgQ_3L!_{EyJc1|xb~jzYAuw-hd504l2|`fsxIMp*uolrD-rDYrpKeYC1Z%vUCu7xp
z@<&mcC0mvR!nwI$)iu~jSMxBjh5CTeOlr%ny=eGDCk5?=^T#Ha&-Z$AX3qzk`@;-?
zWYfxw<&C@HnmLW%4Wkao`?zhf(--MzW7_D9OOgll<!Em|29D`zOt)|V^nZ3ZrSc`1
zPl1YlNIhkf%Gbl5ANzS&=zfz+1?d^SELv}?gJBZnfVs0nX_bWjP~)^A#Sb@^?TVDK
zxK6^fZhTDIN#xW~CWE`7ooR2E0UkbUtfJPzUqGn<Y?i$?w;io~wMTh4O?Z8NzA>lM
zPQ0T6rS2@eZ@l_S302TXwa=b+&oHone(7m$UH}WYY0dcciC!2*$>eR>X)S)i;j*fV
z%A9yiLYq(b2!3!7SnwGHn@4EGModjERv;V>I%32+KzR`qNot|z>B%tZJwaF76}+g2
zwJ|N_3bIVKjK4#bCcAccwCYnaJoT+D^Y2006Wz_c+RJsnooU`kNUyUKW>NLx$H<~Q
z>xyo4g?dQI4J%#Dz3to{CyRwLs}2ufI+>mo8~1gbJ77rEO)E#wAV;0H+F-y&U;6mF
zd+1?&JLOg5^jkSoe|wFQ@bC3hdV;+&JAO;v2dp!}m*jSg@N=4swD7}*#mDFvKKB#>
z5`}vHofi3Wj`f1R#1F-04hG74Qz?kpOCR$^WV+#EcAo;!Esj{l^J1`HpK)-QGvWD7
zQ=N#`BGFf@-L}^6hmYb1;a1!RzY+D_nfon1dEfkJuX>lhXoB&`@PQBU@jMT7fTl(D
zOM<|#Qt=awKxS2TCX^RXJWH>O3SjvkE;HrK7S>wXFx$@cpibjq7zyX`c_?~`Y^Ck*
zXO6C!($&6x;GIXsu~ab9JSI$v$a(!9&3+EH2+<$bKYK%)|N7XiH%=S}mUcEjg2FBh
z%zr7=7vSZTd}X$8)Qo{isB~DQvU`B?kL+P}E3(3kSc9>!jcjRVlmRimTU-S(KPD%w
zxt6snLrN}Qet|B%Al}1kAe6($Up!-r9kH_VJn89yYlCi|&$*AxdOde3wujf~o(&X?
zly4=#KlqRpzfUmS=;|rp(g(vWtx|Kxckz4<r;02#VFQ{zAhn3_)#cX3$f+a?%u?EJ
zJo+1EK$}O<)%*n#Q>nAmBBEDI7Z?euBRBUC+o8-ZEr=;%v933BZaTHd@nf4#$`9V)
zIJrhkP!vrT9WEpLA5L!6g|Rd@=3-#Fdafku06peLcYAEwc|u(h-1_<XuDS^^Lq3W^
z+F`||F`nT;EXJU3nz0lhc#Q8Ln3(`v+;cjV+)f`*TN(2K?sb{=de5Azt~prH^0t2F
zxY7E@w(F%anbdtz(jrKVHk!pLW_sO{YY@w0(R15V_^t76X-8pTH!waJM;n<rmqUJh
znMO0)xUqV|ce-8%R5$+w#sq5&!+$?8wpGJh>qZ^(Nv+udrY$gk{BjYaCL;nHRWF$T
z=BrRxY^Buq)GUfwR);O;P7Ep-{2T&~1N3z~#GqlyV0>se%7t-AYbK@LF;q*!&=Qie
zT3mx>?gxGix?z^pD}l{T#Hkv+n3|64E;W=m%<Id~`4^w6r}{|g^cq^R7^v4YER$<X
z+6eh%72G1<DzMP@u{z}~D~hkc8@=da_7+(<jN&}+SvX9ITQ>t^k^AZKjO2;B9BI+Q
zrfYws#n#L98vvC$pb0bSaHDF)77Z*usfWY6k!|((+Dj}x$INDm>$W2M5x}txGwvjE
zd()jEJC-EwY`*n`j~iUj=N6PBi$uO8@&!<!t)`vKHxN!9sa(#^h|`jg($J+dduA-?
zcxu9Rg3f;K2kjRK;o%;Uo>vmnd+hx0@5PRIK+SJLEulbdv>`TP?5~en-BHCwr3)+y
zNmSBS4SpZhs`kZCdF4HnhYv-R{`Q+%jti%WXqa^8k!@q(8V0VOX@}m;0^L!WSKLt;
z8Si>MJaEberwTN!Y;`d8#%jgKOobDs^eiz|TE~Q5^-VI5uG4MDg;W~B3qyRFHC-Nc
z6lU`*02;^XnmI--pUH)j<!1mlsF+HwED;HB*s4>c=ot4>`&rY$<;(Lg&}n6dlTjv3
zxB3iZH56NX<l*ugF~By+XfYstexXrqU^kD$K0;DI%ZAQz2-MMWCkS?3Pe6iZ3cN$Y
z4uXbnz32%kb21bqPXM1JzlCo$`fpwa>J(Ne(wsPq2^2%w<+ZWllfk(6&UhP35xF7-
z_(M#%fAsaa`1U;W_gb)}zVaiO6F7?oz%3&=)aB_0vBqp3B?V4r(rEF<{Mm9sAALQa
z-xXEI@?gtvCEbs|i-(tYm|+G8*$MPB32iPxO#dJu>q8hu+#YsTPz0k~o%su`BqrIm
zQrZ!ESA8oe?V+hoMx31ZJ&-CdJ>y1*eXH6&b9$qisSm{iW_Vyvl=vR{=r#fA*3aA|
z{t;Zb71z}ZhG5K<?e=fu(vQ2H3)@@3T^{q8Ch6zhQLy|f5D?fYOXeAIoDtZMEZTxK
ztU-sv>zCloQOoe82Joy##L3H)u3z)|`uZrBXG$tusPW3FNv+f4ukRl1M6Alwf_i($
zTh+|J{(JoGSN2lYv>E@JeCJ?m_^+C=MLlLDoj}E7`t|g@!0Xgu8H%V*v=?qd6QD4q
zKk%#wDo(147wC81zT=ErA|=$oy8L$^MzXYoIW1n%OuSb^hC;FTY{K-R-AJj9@aDWv
zd|5~`{ZH!i+U;J~`+KSHXWTQV_}oAZe{wKVu9u|cShW<*gLRJ>VKk$f&S1<VlFMhM
zn#7TynVy{D(z=PyHao&{mw;-W<(rnfSa!I-b-!_xc-W-`*&dCHj8yvnasFe!F?G|b
zZFE#$bZ{4v`hq{1PxH4zM8!Vt>GBTDp>mqab`5%kM`%>VXD4nu!DN_}N=1hz0&xCI
zWyJu>4N4<UGZjtnt{-hP=0DI)@?<?z_dPrh?8-BaAE8iuW`3;b`ex#5^%IQxe?0vq
zQLQ;K`LuS!4U-R?8#*$Q4~P8a=GCNoX4}#a8clxa#V-kZzW>8J8V|ILqFoxkx~e5S
z_B6ry;NHjKlj(&^Y;ku?RB7+ymoMzm^9i#2STFZ-R%|H-?tT7OX-PnUmNKhtysEA7
zs~qVKc;zkOgJ<j88h!2Tu#oih@{E7PKu0zl(AgO4r##YNv7V7&Nh*NZ-}okYn~cYE
zdhzXHo`Tetm}ZUsVb_5>bravZd136&4pHr&C%MDm&vIu!Dn(o3$$5WQEFUs%9S`6Q
zz!r(z_0L-M){t-ys4D1zw@gU`RJ-wtHB2IW_PKadpFWLO8UWSc-gh|93>twI&0;mV
z=W<$lxs2=?+n6gY@b0S(4&Xmd0;Yk&KhuX4!D-eDB3FF=!Xse#*o4}>J64$kS3@ZD
zDOveBO>OfJmvexLGj*Q46F}s;??K}4e^}Ts_8ClDJMzE@dc(vK41I_&;)=2%?CrSi
zvX0jk+>Q?lC)C0G_UJm=>qz8Stx>Y&qnX}bmvR6T%(AbyD|$0^1Q@#RiC~<-5^K(4
z)1Sn|E%91+?_S2~uSMMasv>TFeT%p`s~YYUzgyr=uuSYy*I;UGEKO@j+Hehe(cr;!
z!(mqn{4+s67YOrm2QNiP&Tpru4l3Qv4`{~vUsv``W!`SHi{LyeD3y|L;}smxGjD{C
zW~HJl5K-c`(2^{;MJTT$XviLGUpClp==jxyZb}}qvCqU_dxM?%$377+d<j0{*=H4#
zgGOHN2}(vH%<|^K3+5G(X?qUK)gmC=w~MKV*bo&kMM|=G<|Q&$JU~y!%YIk}-r*Fa
zgMdp&%bX{O7{F*rm!9+HakhG!3AF*{DeR#0KVIFzY*isQo7V82NdmLuC@u{F%7I=z
zbrc5~$aPw*8p^h|K`S2DIbBzF_g=rG^B>HO?Z22C=5iDBzc4ps&&Ai~Gx=w~ihjA#
zETq;bh7<1ot=HD3>~_y}#3*hD_KQef<K^oY%$I(?-!)_%g%i1K{OVIv!wI}E0ckZ`
zY<ag;ztgd7B#B{PjE2th#1{9<?NSn2Ug$T*1*Q`5c-K-e3`DJ=YZt!KwNtV4cUO{s
zVU)TLQd<*T&J_m@JgriD+ZCFi62=kMng_nzm=`^Iqq`jA21nM^?xl_B{foKrdd=KW
zX8hk`ZXjoi8c&n8VtC@)`QdGr@_TGuLvWD}Iw?@7;sJeX<fC$ZTXv-uf+RI=6>q&!
z@ydLL*UI=$^BKpP|7AXN2ld)~#`hI-1L>QAD6L#w=@udg=be3aa{Wuy<mTmDdanwV
z*>T?*%uPss{qpi)I7<4RWjgJi4shO-9PQ!;dfQTz91^+hK~UFFEyj;bz8qLn_47i?
zW}pjjAGOOUXS9)m_UQUDJJf%eKp+131m0TB5F7i8)C}_MD_oN+gfy{?mHh%Ni4~(L
zoIvmL!=4Y(f9eg99f#ghThP6-WHYjT*M}^=NV-9>Weat}ta5=K=Aov~5xbUW!E!}o
z9}z^XE_JvcG|WVSakZV8Gc$Dcf<lLp`E8l^y%P4fqi~XBG&+x2t>?C4ay{-v^okzL
z$<8i%A@D1gHAGFG4&ZC@RJ>(3U!?k)zRCG0<*gFyRpB*kxhq6E1&q}MY%e_xFGKE2
zy?=vldj12tVXZ<pMgY1Ae+AtvsGyr6r*}g)L=|*X)qHK@Sct*@f^L4a2JSOCuiR&l
zwr{)7)an1b`%DaQpNYAY+Q-$^ehJ)Xk`BJJLyt;UK}UR4#NYl^1$|JqNhO}#um;rU
zJp9YwKPjS81%Qhcpp0@3+%F_9Ux+QA%!uO1kzWhq!*C*ci3P%D7}ZEX1OUhR_B_e`
zGq0!{%D+=Lytk+uC@TSIyCE^8nOqR*P{6Bd{#Nx=?7TT@R!mIXEsx!M5!ZE}X?aG7
zV*_+wQ8&DIQ#VG)ij=qQXWIV5ekLegUBg1U&iB^m?<%wFwN$LI)?2J_g~~MV>>9Q_
zAz%6=Bm~D_*>7Q!ly`Bw73B=G_9NITyA;0;9bK`u?8WKr{rbo&>?U9pyUF?A*v-Um
z*iAn797OuTEB_hhKI|i_P4K3FVK?Zvv72Rp-Q4&3-~Kb<@ARMPHRNV-xwbPoInh7d
zUqh^7u1fVVSH9)q^o{DJ`OCYlvGumwDK}k1t6#OH$$!-Y4G1!=!!f-B*%o`Uw3Ipm
zMiWe1Y;5~<UsNEJE9}hUCX*5HK32XoC&iOz*m_6^p|i6kH|wnb58REPodCAW3DYlp
zi@VAHCwKFs`fuC~6L2>PKr{MJ?#7^1sxqJnP^=oz+!c6#(UA^O^L>bjobW_dBXk%1
z6Xx8-kIBn-t1m;mMiY|%xFZ<U0EG1JB9ze}drz8T-@&f4(?ZmhlNrs|2b@=|Yc*p@
zJ!ZTPgzX6B;bp_l^tu(-1)5(aVnHV$nIe*1tG1;-gv9`haP(n3telq@8Ub(@%SB>}
zo&a^4;YhEdCCIFKx6$vN`<l^kh-!zCh=sn?vFh$-d~|)*_Jr^agM=y9vRVYomrz5D
zuK)&Pjgar!!99&HL^ueFT=D#wK`|dG5V3*0R$xVJwU*7Ni5Mdzou7cVjI##+>8P@a
z3!fRJ?!frRH-|0df3c^qI#R&X%K6Fcje5uFFDfm|U)Bh3sNN24>7pVGy98X*2;}CK
z=)?K@;C(jD!R<DqU7yrmJc(v1LOfRLmIW#4){)T{u9WSf*|9ki>p`Wk(I5-x<@!)1
z1B;#NK`V|9*W_)|9BjJO>Bz7IzdYtT7MU<FJ4Z%Umqib!eE5O7`o!@K51qaClgN(p
zgxUGoruPa1_hj&}h?jRz!{{aV67hCh!Nl9(O_`JYB-p_FJ;x6V2A?$VT@$>ipd`em
zs=9(B%SkrBtd7p#coqkT=YES{3R!q7eko9Ot=p`j+3w%H7mU=^HA>S$o&FnnQ%QSm
zK@&*(Zx%FnQ&#hr(5n2UJsH)E1u3xOX(!?KWW+I^=gimgj1m;<+jX95>6oaGUrmmw
z(tZYYyvpSLz_3g(S|5EPJR9#h=IVBAi9{gS)59Lqy@u@7qa?}p&jsE_xLi?IbB-MA
zjbj|ylLSZf(!)CMqupUZt85L0|75!vqWu!ofGKO)(3|H1rt6`)M#l1=-y~>NZqfm3
zdC*M#^Wp-CQe>(veKmlIF#c1;<2?P&q1uS-nF(tgTLF?ic;}h*$MS6`WWGo6pAcg&
zXaVi^>Vk#!&p76z1045!BiaKq<bzzj&3^Cz4T`;OIHQ(!2b&&ww8Sdq3#O6Xrf3t3
zXM>Pk2L(RdztV2es0dzYsfD74Ee+UxI2m~DK(Jg|7zj0xI)4F`G4fD*GTh@j;d|P%
zIkTejEwR_!UpA1Qu&+ZC1coV4Z>Y(w#a_Kih?dq%r|71&MnmQ*gxGvXLi6k4dOZuY
zQoe%EkLdj;)mD%Ca#*td*;cLsyg7S)|36G<EGJe?X!8Eugr+g_wg<9LmB3^L5}2-s
zSbi%GTQ^(a(YlpOXx}<IQL4eXH|vT__&8jn5Aw*%jx`_m;#YbvXVx_s8p)e5T|d!?
znAlqvJLitslcBD${2c{~P!yojjw#(sBF9EOS@@)<hA7;kTrO|Ev)yxzM*Ezq(LVQ9
z#zlZij9jsXD?c#rtPVx3^f-^ES!&ULhYJl-@V{JWberXGM=+(2JK*E_?H|3*xgMfz
zPIKP0dt(5poXi@M9{<!NSxQcHU|xXAG{syrV*P`YWu~;Vce0!{uNpsJzO>#t^?YDZ
z1PhGt+j?3a8&mC5VLwKitBh99=4TnP{HE=*dc0xWtbzir<NV7Tacg<W9Z|7aN8a+1
z3sAj974LRrbfRrMmau-LDsfn9`7+(PZr`?f$v0i^2U^%*fCjb5AHJA2eJ1&bx@`Xh
zza6Md9WlkG67ga`hwED0gO-Wo8qe$aO{y0zKMYx3_^PDMmf3X4wmsZ^djgBEvv3@y
zMZB6%<}hYzCRaYk-VAc7>5ub((41gi-u_5CbUk7Hy5Y=LS{zrRZ!XY_V|<rO9UX*x
z3q?ID9Bx$Gi0fo7^KaYJmX^mwag3%*m)*`q=48cc%$L{J@<pz}M)5C(47vUg?alAj
zY713bZQ<Km?W>?c2yuR=R{PFe;Wz8nng8vJgU(-TC!X9;_zK0b(0T`obN|e{JZY-l
z@T5Uijr}W-Dds-|ne1N$GBJJ&WLkb{1Ok~-{ymThRaJi&61V>YPMX-vur$x1q!^h`
zH&E~i7Uh{Dw2A!W)`oN+ag8D?7-8lRo<*l?ayr^zU^HaI<(!38OQjzTrCA2Spin9w
zd4Yg?XS?u0nVKs3ZYk^|4DZgJJKY1->aCOiAFVe)aSUx``7p0i!hZ%b@!kw%x_gAQ
zFdKT*e9EfhER2d6`|06==(HQbE|l-iO_|OeEk;flyo5+rJ!xRA<*GoY{C@>9Rb9K*
zr!9^)fqWUn(hPW3SOwMK+ni7D-mHhbYDrUb$+do-c)=yutG%peiBK99w~2HtL6);g
zWOl}d2<tN%3%`ew?{!ul{}jRVb3<(Q!!3E3xuu1IW2en=i5t1bV{%mWm5y&2OaIq9
zJe9}qG^SQo(t%hCp_)bf|C!RXubR>j#uclHOo+D=ncVZ-J`XvO1)(?Cncz{fD=+bv
zI=3{W?8WZnEm$PqTI%5a!~E(w!x$%sy`&t0-Ha8=9iKO5>l-FGKewirvD}CtA51bx
zu(lsyidZmSv#a;q?EVIY5N?H0=0OE$+6rdy$kO{?{6SBre|K43-FzomQK_0z{6{1c
zOBKmfY&q*Y>_({i%vM=oRTqPHtSUDoz^MJ4*>Z%H^bu2Si-0h$W}i%VHN{VSXn_?@
z@x=GKj={q`*ja;;HjsbQ#C0`3s8kN<uYA~Jb1>6Lb7an|_lP~WRlO5$#Yrt?9xt|d
zn7>~nQj3lW;HTxII!<i&_7|M&vij+;#5d3!CAys<6*)gDjE22@?y^DPh_wMgT_wPD
zaYDXmWDkb}+y`Cgbh<@;PT3mEov2qHB5#Mts6c*>*1Jv95{pikmXvtc(ZG9SNo&wk
z(KytF-%aBnCf=lRP*uV;Y-#e&?umN2vGCt*X;4+0{|}i={veZS$mz{YrUNYL;~Pku
z?{YL80@$=CI4~Ga0fXUlf7oEyI&tOP^vulSx{;83_a?FjFK#~CDf6K`4DLOA5g0?F
z^U3Gvz1TqW0Qpb0x)jJZS{NDNIQjpE<Gcho4)hg{L-rg3zBCj6=1W8NWHG{Vam-J5
zI$gf1^W1sD<@*%14JQmEYcwe~EH74%UYvH=mS1Dqe?ZzCdeWP@LvV-fq###9CwzlR
z2u660;=Y%J;bcC%l#>*$Z*{jdyPpLNd2uWj9b&5P*Dod4Muvn$qdR4*jw-9L77%~8
ztJ;J1xSLw5-&=)>$2q%(8BN*Ku<>6m1<xq9sx@O!Dj4!i*X5&xpX<W*!>q5il~czh
zXBRP>DOyMga0zQ<M~B~c=_okqHdHC?H0|{u5~5j>s3O!+gsiD7KRk8%13oD@2t7s2
z@T9;nGYo@j>z=cO=#9DMIi1!1h{{`WXGa_CwJ}YtRkEu>YUXgKNEZ*M=r$6ZYz8Sb
zo5j>=gB;8#quGGp6m7#if)Hv(unbxc(Z7Nt{(>MCBky9?0CH3f6&Q$KemTH>zD7G<
zqIxzZZ}~h`sDz1qYq`-V){Rs-kBU)71ZT6Km1C06`z|oEz5h~{AG?Q*>z@)e1Zje7
z23b0A@lWy!5Gs1A+q{UOELXQ}o8SmpG%7#*>`;!}7wrbClG4Kls?*b*lB?XY7EJ%6
zaZY!nEl0P3&gcGRCd01MUEaUt@V$&3f6~pi7``7^Lr)J0G5y{JDP~yNT+hgzCrZ<Z
zI1es8Q_#mp_VL1ffd#A$#tP_d0^}!$^obL^5+S*$kzgGweDN8<YMG-C{6!a0{X*S8
zsKil~HC@1GI{pzT_Ja38{**cW1GM!#AgvFWA)YzSUoN5yVe_UJAA$@{wJh}F&n=Gg
zVJ9;@8JdCu;$jm$N@PW#kU0~*V?QA(dh!**9f5hxPI7WZVa^$OY&@EYU{jV!hWF9i
zzxVvwu10t6c=$2MOtXJqT=eua6hY%gIjqe=KC3gKkdx=ZZ$;6=bi((V(c~Fd;WmCc
ztg-01h`^%)h_pAudYN{ok@6$Dg6D3&isaOGNu`zv7eLQ<el1sk-#h8stKmtF1)Eky
zxh`$4+*0e<{r^icQ!r1J%w+$rWG3XqKa-j4qaNuxTKSpBxnt1+t_wnz9QkslePOqH
z-}Ov<R+6dF-;O*I`w6Q|C@#lc%7IA~gpxrkiI<r|M!`2H?b-Ss%$IU%=Bs!=9b6By
ziagn9K&<K~GVPYADONVpc24xQD?am1z?mTr%H?%-igK~@Pu_5bdvg$4_KB*3`Q)wW
z+G*9N6t#vwTF&x@XW>arx->hdkNzi=Q}ItI$M!cU2Q1kB8<g{Cr!Rqlt|_&r=f6*V
z^vaRO{vD1q#EG^w9cj=?PD!{bnu+;#G}9h-qy%-?X=T}c$f)j0$RBvbI^eF<gG<>#
zwW}@6Q>S*n#CZ<q<xN=--nOLicx6fR&>fZcE=wA5{1c0R%Vr9Hoy~-biRy6@_E_~3
z)*0xA9<I(Jw*JW7pc%oSS#JHVXDg@xAMka!qAZxjJy%!r@1CaGvz{ulgAuJpGrcw8
zPSPGn;8!W|Ai^=143KwQJvx1NuLOvNF4U&Ks#V$0rsLQ9`gXq43(cocm4H!*aK*3U
z)VeBTk*#KXoL7<j)uoENMh;?sbX34HQ_tHV>3@ea@%|akMD}E#cCCp_L%Y@3XM&4B
zAk9&OjZP<A24Zv#%r(2s2Q;gSeVLBfaCh{hotBU&R_f9GX3?I6=zEl=07dML1s`#*
zOOS$mx+Z7B7h*!3w)G{eXD|1*p@K}ev90$o4?B%6Fvj!T<98%xCDx&Ts*UW2WE`3;
zuZXb~objesNh%Rric8aD-3XzA+1c6Vl|yTo(g;<iMZ&jDi(Y+1J5t~6koyTRyrrcn
zbvNHUO}B$4)n3RJOx_3ib~)v3#$6l^Q_Z+m7P@G+&KTGGa>7Au01Mmuf-oNI_NnB#
zCz!uYy9<~x&!>ABX#?3~sK7x`g(#-zq+!PtayWFfEf5}&Gv0sTYRXM@Gl;rPA*|J<
zUH343)+K%1z#xM=lBiwQ0|Y*%JF8<lC=ahk`hVUla+ds1Ta_g;D+LDTVbtCJ?QeiN
zS#N?l{+3Knu_8ndqMfdq(}k}U&(x}lXR5k9GdKt0ncR*YJ9T*mx(ELh41vercBMh9
zULLD8Txp#CRzGQB;)F~sO%L7oe~D)@Y>mW4gc~nOiOl5m9L*^%TG^)D`)QP)1T|gX
zo+bQlK90X5?r|xEBAxJxm^%q;D2ayf!nfj|JPHYcj0n#^FCI7&x@GFKt#|D<*B<y9
zPq5^d-DxGDm+zm+N2NEUyJOk`l)JMw&(|{NC7ei+O6NUkJ`)9Zh7^3B1Bo0CV<ltt
zA2kL6qf}|FWstFv(V+eshG=Cjs*~2`t$>+NRVVGvwQOlrlLoLdVAJf3k_LkeXMo*!
zh5=mJ#R;I%k6Bn_6-8+jU7{YVsSlH`Wy;Q=*I$2x_P@ne$RC7PAgtm!JO%HdEj?{o
z4L6#1kwt99-cE5g$BZQHEokI*<o9^y^*J$`Jn}i=TU*TkV$|VebUleOKg@T>evv()
zV{Y=k^S#}yy7!mft6$P>bWq&B<1S_S1P8Ud9QFUUgxPDvaSuOr>4SX>*kiJ>^1Br2
z05Qoa8PNazTfFCDcZTZ;JRZ+@zaV?I`wuF~b@o7JnYxBA4d+$w^LDVYjq2zzTtl{T
z*h<n30!-PZqIDx%QSx<(wU@3z0fs*fLjwyeFU(k*CBLqs&X9;>^W8D9)*o#9J&=m>
z=|$T0JO@6B(4H5zRJ_7+U&EM&s4}LB3!Y-G8q>s?iiUN+3^RDcn5OnWjA?jrd>fT9
z4d^f4PH6f%WtgxnArRR7r|FYxqvCX=tV$?l!ViZ_CDQ4^wQ*siLm7YI9u9Y9R=6Lq
zA#Xd=Q2yPShA{rY>xibF)HNfTjNXoDYNL`HBjU;Y1*@9>715;m-y@pP-c!sf5_0jk
zh^CkoJ!UG1Qwsg#O1RmX3${T*mH7e~egBrxl>e`crdAZkyEyRC&Q1a%IQ&Pmo%gRt
zW==BwcU_M;NlHvJa{8=nS?IRpxfO}66Pa!HO@lS&Fcc4V>#8;QYf9}QRjFVEWq}E|
zB&vDOxGlZf?eE<%(Rv#X#~<RA?<Y+%HkDnp)uLv6jYh<wlX=hF3>}o`P;6b~!TJ~P
z{S+FnCzD&L4H=-Sa&)L_hKT1mU9r5-V8qIMXHqEgjIVMn8K7B?iH?@sT)79At<m>r
zX#+#B{_4xY3&0R;>E`%A^^)z2?kQF=(ed9BARdA9XZF!Q=H9_Tm~5CiHhg1up8L6K
z*$Z)_U@OWf-PyuAX)qL9Hen6#z8M8I;oN~Q2H7liC8Z4~@r$6j_K(G7<qjZC@)jBa
zTd-#vB|&0wWMDJ$vaJAV!|KiLJc~a=3=PKt*8a>8*{SZ<1;f#iCwiz_M$VA>CNBeG
zhQv=nq+5Z+Mrf@#&pIZ~?uu~(jJQqtVtx;hlP62v1qJDp4_LMq6q_le{bq^-7g*F0
zt6)*5lp<ecnR2-U86FX_^xn#qH9Vt*D$i))+n&*es$+QD&G9!o>(>R${1)NN4BYmV
zw;uO`rosJ~<NJs9!3SlLR(*svgT6geHp=PhT{{i2Y#Q+hvF?HoZYlYr^l*>Xe#Vq)
z%cF@q9vkm}&@j^7s*GG%=!u*&VZ3mSlhnulKl0u@9P0h=A4iH3qa?D-C`BbCTb7wo
zluBqhMQA1_4IyQ$V~iwAwn>sDOeiY*p311~*$HDQJA<(dW6Utd?>*<f&*ywT_ebCR
zzJJ&6cU`~h`dybl&N+1$uh;YSTp!QJW3CdN=iH6XQ-yVxMLj?#n!07Y5=Mi@d3B!p
z^VYkH!E8_4MS_v4uZU0E0A=f!{>S0~ZW^fnrrb1`e{j<*0o*jx%l{B*Vto#$(f<@_
z0w8B!0|Nu&25U8b$Exv$3zB{FFT!u7Tqu?G=G-)36rV*N;^xgt{A^IbPziS|;9A_g
z+!R{zgW=byp8M+MI=LU215giUCp6m+>Zt3E+yPRW31G#NITF(JVD6pTN=&+OU3_b8
zA9$%*-BvyXT@~exr)KL&0N^T}CubtcU>|kjG~50Iat3st5W}YtXJw0c-aY~Gu+G^S
zB~Lyu2M6l_nj1W~Z%(FKRoUk>v22zsAFg7m;GBuc&ne9%llde_`0C3C)!r)3bL|B{
z9P|tV)Fy~MDO-q{wI86sPO(|#!{g^R-BGv|!VNkh|DxV&&83c0{+)&*f38h=VPF3z
zK&1(2=zcx22m5h~kYVu>?-&xfVOTP!*dyUj1;9~TU|MWSm6ia0ntC4c{ty^~%Yn}{
z1l>w6>j&7ZGvXy)I^D6)HH1FK45L~<=-$Ct&e*Q6F!!%Mty}%|1ZoGnn__+O&z{^;
z5cK%c=URaT557^9_kQY^GunA|p1VeQ&*`IbRS)06vFc$bZn=I|tG*h(50KfhvuvfI
zK2c68c~-AxH@G0WIfvAHoO=i-*?Z^{=-C^gnu?ylp-ceUCRc!w$&*b7*8gjSVkSRh
zWo6<onI@9{UixKuhIc1CM|J%t9VwRnGlbW$gzn$z71`wJTl=Ky9*kX|*Hr$)Q8Czi
z2BjE>wgb?ml+e`70dL=iUO>+F&bAdrxYJ`FfGvd#6=Uf9TE3*3_H#`-bNymbi0;)k
z!z7nPMPil74zKQ*Z$j~AdJ+d9zHo5<WaT+N$n?0p<(7(qM^y?3os)!UTdoLv4PMyQ
zJSxjB;lrq}6(r<*)vqh;IV<a&(g+BWvqhIuGhs!`&E~lkYAHG}{8CH96AP*T2Vty0
zl=GDHMn$Mbo<eG@cM4XF3a)o%YcH?%Nk^%|7`UR$$pMl}&xBeFcvdG$a;CEg5G`*l
zueT=^*i>`w<8sdDF|AROfz2nUuK+4vl5<aNBi|~%ki<BkGGJ<<4}MIFRLeKj>Z%48
zacsX8)i!f%j2tNI$FnO!J*Rz`J`-uo9cMODu{<B~r)!AI)I1PNd#0#N#c4=Q43%48
z<Ij)VSDyh<!%5PAplf?<Q01Ih{#oX6(L2*uy;?L&XE4#O3`K$_QEJAu+;?T@5GN%5
zpYaX<gl+xbyI>#(U{WkAbZdwGnmgW_8){T^wZOKW^tj<nmZc*{8(-BWLhVFmF=8+$
zY}qbACDZ@8>oL!n7|7S)lhUr{AAB*+tI-0G8O$Ab=4Ge3ea1lil`N_(2jE7YHJ>p_
zPHZ$11@=*BKT{)P^CP_IEW8!mZ9=lXi3=4-(xGW94z0h%^UutnWEu6JrqFu$>J#is
z6d6=G&U-q&hy?7(bLOA~P7xT;%cB**ipp(J{)3XOGQdb}<i8uKt<3$jF1Rycajb45
zq1x@Eb=keS|FYhm&gC3T|BX=7XT1Q$ln)<2dd~I%VR{L*KtR*a1IBTcJ>e`5s~CBy
z<-y1X#Vv2lRFWu`S3^R!2|C$DU?NSCqd!|=+0i%9m1WS0z6yxn5Ti2PFm%wSwS3aD
zwFsE@Qq1v2h!ro_L2<oOp>P4xxdU$Z?~5F|B{jCSTIy5ahJZiF{MduOS~o}1<S0yM
z8@`q>t_y!qgwHjHIajA;g1_~WU&hIR8Ux|Wjth#xI6=}}r1j2G&>|MhZWu;_XGW`z
z11M~OC*C<5KX&Gh-dbke2X0j`26srm_|HwLzt=WYi2n%y*-+N~yWv3I#sz@<PWQo&
z55PhK-mFiu4n<xv1!+MC=uVyR=7`8s{+jB#*!R0ub9>c8{hW5L<@b&fj*F!a-bup$
zD2Dkglw~Z>vP$!$A@0>zh%gUq{X4=hD^$54emWki$jaXpj%TC?`_#FWHzpzd?VgM_
z0f3f<x`-y9d8ZZ{z)&NTI`gj#HO`3dGE4u?P;)E}kZMZ)7pbNj|030NOhOhLyxeY$
zM2@!0`=S<jhNCuKRXD6|D&}A`)bXEaqA6n9mcO524!63ze*DFz9zFZ7z_sPEMV&Wh
zr_{tgV1o*D&zxbY;`DMlVb}VsNhS-A==90~mDjr<7(1zSM|J7&l;w;eLo=7Ai6l&Z
z3PcVV3T#4AgHf-e0u(iq07Z>%Q9QjV;OgcSHAKIgt$$P006^n^Xf@TkJ*koSS@nO=
zY63F)wV|P*mOx{fzD<8aqoFI@{emn1tkvYqg*28%6+iw5(Ee{vrJuoX29f)GJa+@Y
z)QfGCTG@roWF6wGPH~3t9G550*42ijwz-<-X_B&MoxEIJwbUr0>o-s<$Cv=!wg-U6
zkimev$56GzuV6LEj82ObGdgZ9VarRMY!uipTgOHsVY#Te#D@;=ytwEhC}F6jD!>Cz
zEctw#L-{O+=Y)OPxx=5n6mlXYfBoTf5X!IBSlKT-QrMq9aT$#V@4gSCVnmj*6bU7@
zZa)9aQ9~HF`cJW@Pioy|1Ofr6uk&^DR@5#sSFDNruVPJ}+?+@6H!J{5uVU^5U-sZH
z$<g~eu{l%e8T%6x5RMQYGRg&D?V%&H>RNx@r30CY6Tn^pV|EU;Mo6N}=tX7_I`iok
zwakhkip#V@3dt36VQ2=R>6dwwVu=%_r+8eBfPdEZ#Vsp#ucq{4UX@K)=3*!zb2g^~
zT>cA54XBInf3Mb*YBl){*mC)_oX}va+?^7Wu)Yk$a$Q{#W<I4pMB(p-=0BUl2Y29n
zKG4nEc>m##zFg-*tFksHfkj;$qDzRTNDCq$T->-x=Y4aeCNO)nE6PA80!x`igXG+x
zO<8IZ{q6uPH8y+ylxuR`F-hdgH7)%Yxu*Oh{~_1(l0yJkYP6~wo4ImLOaCs{G+Y?<
zwa$jzt2DQ6FrgNV-2u}#Xp>l{62J+lrg<c|wGQ~sD?hH)CA<r{kDQqa2m8}&hmF@O
z)b25OY%gt&jgI1Cqoe$uMu`RFogPvrvYMvj@KbT5u%7e;|0QjI%yJBz6+@U{iy$hO
z^eT&1*9SM&1+t0jRI~+h#be1o5&wmqa&K;+yh!)thYck%g!x6_I)t+jGT4bdL;#Ae
z{BUkD7LI(Qe&+9Y_?H7)*pTP$`vCI>i8@(ISw?1Gip%QTspJfFUkESb2B>SK5&RVd
zS<PNPW31vo&Qqc5rry@<0VtsYq;aLNBD8GdAyqZD0M3nKJoo<^*oKC5%lAR7H)#`h
zC6_miqP96xCO~LE_m>Z-Ie^mj>a+P;0M7>^An1_dI@sn`N9F}+*rf2~&oq}B8XBhO
zey$0BF1z=0;6D_g4ETtvKQgaFSoOvO2nWuXBD{Q+TnF<^m4R$9>nw=OYDI88t=rl)
zCk5BB0e>lQaeit7LtGn}?kCOmcWaU+eM#tLFaH&<8NYBY{GY(3F4I>*e)K)N$*Cj6
zh6Y>i4UqluKYaYSBn~78-;XZ!nZ%c;%rzg~BsOcVcX3t&{CcWcJhlLuacOuo(dGvl
zAjZM^)!Umcjpn6*AB?mW)JpX0)mZztXbwOqm5ML)nE=|7(ge(SE0)`b;lxPG(JpJq
z24?&Avi%b@1Mu^K?0w|N<`}4Go6C2ZEaBsLepG}&u&&e7E$zX-J}220u^`A<<_^nb
z4pm2J#JD(E3tp;IKWR|6VEbql0A4lKq~LZ|uL1;5DN>^h8ttVQvu<Ydz;Mfp>+-y~
zEHPiwxj|Cz>gqU>Gv4L8!Enu!1x)g6JHQm~-30u#VYRiPo7$V~qpn1JiT(d2mS^ZP
z_gIFX<5#@=y_Ul(nc<D9<&^d<{O2_Qr4xcQ*SPK>Kd)_ST)WAGgKL!f4Of&*<SC-2
z9R}{?PIY{iAt8Ng65O9%XGU1IMh#VcA%ZdX_g0P3K<VY_=A;dVW6KMMo&4@hUnUCd
z?uIl9xQP-7r$t)NBN*ha=E+l;$=I>NT=j~nm&-K6&^m%{=<3=hb<X)hm(b$?&B1s@
zahzLi94HNh&fkY5rdlB{!UIM|1r`>`ZPM_%SLq6*rtZuP^zBGWRi91mh`j2|Xy7Gt
z8f+jsgumO10km!a{{I-D)M_8Cx{+Tn$@?uN3W&5Y9oyfHiMSwT>i0N`%r0*YzC04Z
zw4%DPs0x{8Pnr8;mlgdN6+vV?9nf1`z6xKy3Ze|Khd`X6Y3s^m>z^r39A+Jyv|6nQ
zqZv@GT`Nkki|08pOTLO5OYn`N)z%GmYZr383z@@N0Bzh~M*B0+$jjLRg2;e_XZQ~+
z#B+@rwV3+p&L%^;d7b}{qluVtQq%e9q0zpjXd&o{HA~3a#Etf0r+XM?^iON##;(F#
zb5nM~kujq-+fTsw5?EsaG9KFe_qI)YI&yq*ToUHEKS`KN&kkwhN42k4GMp+I1|;qg
z-dyi?UGLuV(dC{BfZ2y^&>(=G9~wWAg-8d^Q~a_B0KDlr3|uBI5>L(*-vnQMNR&C)
z#o>@Zq9VY0eR+mg;;E~}P;&Ov%hJnIP~VAOv~y1Z1MyNwnnZ1`p&AAj*if57m(j?P
zU3b=o8;o7GISlWj6yH8tLP!B~t?kya9<K*3bLA-|RNFcUSs<D<m-ku&=zPs38^|Cg
zd~0j+EkG8FwYe--%5P+`WHRw@C7|jAp_A~*A)DHW@j`{N<t{aAVhQkK>H{Rb`~cQ$
zV19L@czsi*tONP#++eLvObav``o`Y^fUR6P6Ry|&0UIt}&GcW*?5f;YtIXq!!a0Hd
zmu~n~Y2&J<`zzP`E#M3kymWOT1payTivVmv9F5BaSh4kK)zdLV_SkeDAS-OK0T^=r
z*m}!6yQK@n{sPLzk6YmFmzR+n%gE@N%i{hE0{;1{<;1n}ylH&9fFO{Kps)MWB>W3<
zmr_A~4$DH73qnG~!L^D(>-E_|&g}I324~)4kZw9yJTS8cd^8I<O$=VJTI<TL^=Q&l
zR{4f&Vb!SOAJhcyTvUsSin`AIe?P5~=GRDF+y|zLW^sRd7c*$YgKP|2jPByb(7ctU
zN60+y@mPx&t_;EklaSSlXB1^gYv0QT0J0?mks%P!n(y&R2iX8Y8yH|VHXQAL;#U1T
z;No0FKl}yH8r1?;npNch4#+`(j)3!>*YAg*RuAJvr|WFqz9wCETmPp>VdQ9YkjN>5
z8PsnOpip)|yTC?nboS>&X|l*-RrnUQ((qSBr1Io<t_Zhge0GJp6Se!cD|BR+d$-%!
z`9#*h=|z_(0+R;WyHqFpgbG*e9vRmmWf)C}o$y7ncdJxCRlU^d-}#b&O7t(WFw5Ma
zfiS1_(4}MKY<rcJ?##W9QUV~ltu34>wR>P$*}-xz!tcbwKK;oX^`}^virG*$Nc5NY
zD4^F2oS!NPM6&WooQ5yIGta>@L;RV%Jt0s7Cf6#u>R^n5E+S`&2pgK2m}q{PC4s~}
zST=;y4d1tDY*YgF=%by;uw9UcFUn^Dq`dxqlmyp7QpGAg6JD_zHP4I+=_~s>Pz`wA
zjY9pMtbs{b=5zon5W*gs=H9V|egu<iCndso_*xPC)2~m=Nq^2{m-z<WJTHFmJc;$P
z(x-gT%df|)BF1D@(C8M>(&VuffSvwlPT{{s2}4egzD#X-JXvec-C#0T{Vz;U07~q?
zlQ|2F(q!mp>sJ2<uuR9ZJ9N1@u*D|3A`V@o00Y=W#<Wxm{!`_we0+nChi79WSI@NP
zFReOivJZ}UEq25FS%$UM7rr-b$)=2&M_(Qm3iB;)+1BfIpMRVE?e<*~_s<wTFcg*T
zjeD`<z|Q)^;m3|1jd)ln#CP-6v7pma&t5w|8}x%WO!lv>YyEsyyuKIUeg9aolHxn3
zv*H5}fTtwISc^g9`phI;-sPF(loX+(e!R}mtj(66eP?S<0QEL#&EH734If+j&g_fp
zKf0~dhYbrVi(*<;U7xg*_3d`ZKB5JE1hy6S9mztQPSz@7y5CeqsbLFZAj{+;Geb&m
z=hMD=9n6H;xr!S8i(fYTdKD&ET(;z>=qGsBNvM{dlar(7%Sbv6$I|Q5R^SS^_`1x8
zJ}<R|V_KnQ)K_StpQp|JuUqYP6=D=j!=MbZJOVrQCa8Pw8%k%Ux&C6kd_mWB>)4AV
z`Ww|6)+7;`s7`h+Y95)&B&u{?GrQ~LG&&ptiFz<vdrd|80f#wCsFU>?D0uqQKJMmq
zhJL?mrQa^p{;D^B`~mA<7_JIW&ilOh-441Ftbg)e`S=Sm@G%;x*l-;)h%dEZWW8dk
zMbBRCsNzdklF!%MK#la~O;+y5qh=?EA9o~ujkQ4R%S^%EZF;GlcX6=mb!zJVS^@+j
z0QSCR(b%2vaQh#;0Sz&kdov|Z-Z%Ks)wOk_H79F^S#s0V)U-`>xu$v}{^9mbzm6F_
zoL8KZZftk7y>Pea>ZrVl3EKRZXPs)FuG<Ga*hix#bL?YS>--Bd)-N9dgb@?oY>8h&
z`1CQGG3C7>s@TMl^v0#?&f<LFs`?tSU}<DntJOVo+{Esjsbh<QvZ(RrVnWu*$cmPf
zx~puPxKe=q=5^+`;bjBeKjyB6^aPGOv4%@jyqk8NvdfOkI7wdEy~HG|^^{W_`(6eI
z)eAt=psT63TBLk;)iU4C%P3`xD0(!!P-FBFK*`sz*qVz~r}JarHIuAe0GD$aMqh4O
z{tEB6>L1pdo5>gc_n{AkMBh{FnTHkH4EZLL%jjDLGn3pdu&HRcQh4axt3Z)35N>D-
ztybE#8iZd6{4f%x^xZl1lpX2yiStP8vzuN&J$lH%J==YMe&j*VO|P1)JktB|v_Z$r
z<dLre5NZiO`KM>UGT3`4;7Y_V6@#a!XFguPd?uM~A+SAp6%4BZzm=ag>UWdzRl?d4
zfGL)qW5<%p;zwP9KMeDoD>u#!$2Y~R6|DU7t?P5jlLbNPmj=8B{nY$P_}1bt#f3b>
zH4?}O<x=tiDQRhwvsJ;u;aqnYX{yzG5P@fne*iu_sy1TZ8;`Kd2=Cz_NzJ=|oSzKX
z9&fNLdY||7@@FAp^=6OgR+qw;vN_%@t5+W$*C~mr{8b|Ngcu@^O#JNl7*sfB5n~aV
zUmFkJUnXtsEZHgQE;VY%qEORqRgsP#+TuM94mKu{?>0RNQ0DAwRMhQFwSawSNy*C`
zf2KTH8;oduI&V5{mke$%x>aS_dTfI{M9@i7_h|aaQWcmHj)q`Gg704fpVoy+V!%%k
zrmvp8x2(F3r!2Q+n-Kel1TMG6d(@y+o{|N%P*Yu_#EMYogh|qk7-3ZRm<fi}38O9_
zo4yf)fI98jFPA-|AJJtgozz!fTbr?+y%ie1`2+Zu6Tx1%<tQY|oX1y(?oxB<E51^n
zQ}#=jv)WVnVnXWaEttpjAEx1HkJjcZD>dfd^91m(12?Z5r85!#OtxX>U^9G`l72`w
za3-%376nTj{7JXDZp6#?WJOHjVyGbqTI@cQk&(eH^It3b0K9h--EFL*Wd#g#p0qY+
zU%()v2p^Watpocd4wen#eIK+;Ox$@FMk?g7CHgUr=;@u2XIf#JHBHtK{_D$R+Ynj1
z#j%D%KLL*fhO>u3CKwQ4^6x{q);)QXc@S`U|NfPw70@Cr8g<e9Ylz!TO_LUFozAff
zF?7P=L7Vf-P4<T7hHWUrxl(7!A+lQLkxD&eof)Pk(>RmV5nMjfSc$U$$Q3IVYsOz{
z8j%)KC(mS}0U5!mE=%-90vtD^Q~ctOpyS4i>YffCX{x7uk7AFrDFJRo-Q!N!lhEgK
zsfttJ<9tfK&SMs9i=-1U%wuS%v*rtbYH=KMz!}K$?#bOU^|f!*@5yv*5TM=8B$q4e
zGO|7xlu|-lo417#gWsGiOgDDt1Z#j3?is{ia#$z)?pnLJhTipg2c()Gdy#vshqs;F
zU@tX}%vNr2&OA7kaKf~7z^&06kl-=7J3)YRyd8gC<K^?8+Q@{jJ2sr%!m;C=m3G;)
zx*@Wf9;JH}aJZ^5;AN#Wp5Z3-)`)rkjWwZUOiPlE8lb-xuY<Yc82R!b*k>%-?$^sE
zbHHzZm`HTG@L;c(^w)jpq+Jp>-7h!1IE8rlMR?C1nRAE1!xP)?-GBT1iI`$-wDF>E
zsfeS4!{K{)$rHCj|ClocF7h$=BFD}!CI9^vf&Y@FAJD?b&k1XJ{o{{^1~89b^*P-(
zHCq#7uKs)`r8Ra<{cN4g<un*$%oW&MXqP8n3$q)8uF>-RA{toNakWW-I<!4RwKPAg
z)=AmDLW{pN>#nDr>@&yN9amJnNyAiDUpH*ETuW%w5{|n`ztu=8!U?o_i!NthU!Aah
zGs^2gp_C91mnh3$94)bz=%EbM7X2Dyf(UZ=NXKGDn36TCvGv(}4-hNXtI@e&Yr7*U
zcIxPh7iZ0ZCO*Zo&YzS~r07u)CwXq;M=f*P<3~XoYP@2{|NSfA{ef3Tx9;WMzBt&|
zCsl;@8aSW_g!K2ic_0*@LcRl^iS@&L2awS9U)Y(P5A+U`(MBX^k<VUA*%YXG3DCX$
z&PArZFjF95CshCR8q9GVJHL9!UR!{BkpRXe6mX(xjbbUDeU7wI$i|1_?lRXw2WRJ<
zxfF!d4XX*g+2X5gR;#~C`GD_y#i({A%hWLi<SlW$<&dhu2j)olXeW{5?wGK$2AIt|
zjaGr8JIy=pRXaEiub^bzfIt!Z(|v!1uh{W`Sd%YX1(o6|(_d~Di$8k_y6=^fiB55_
zx?6N*G%#<+j^}7ogr;fQfD^U8<a!6R!YxNr0VJIo2XT&%aW&H)Pj+fSIE%xDO=xdW
zl_PiI7<RkHb@uC{b{&(jJxJDkq8L%_o1`s7c)tRvAl0Hp55u~Y^!lg~9(b);#Yc9=
zjYDJ|ZZQ7no8G?|IF6Dn?1(Bi0%a~87l?Q^t7N-9ky@exUsOI<-Ow6<2;%Q(jGG|e
zSK_OndMMOb$TY_|?q}Wsk;WvfS?8;+;HJh+806iMcGy&CU2<#sWJ|KI->Pis{~=xb
zz>^w=2qxI^K@YYi^F5xJnDAx}hm59%fRAz(*G*I__OwD*Y(BFW8*irEIlonqz10ub
z;dO|cy5T1E29GEUOKBWF=R7Zb<JVR}KsmCeh$fVo``CIrH)|?<(-5O5ael45Fte%0
z2Gcxrc58zooYheHO<-!OJb|~id~B<rA`$0i<JoJ^T09Y1x%P9u77bfUu<t{mfa@AJ
z2d=A;SRlV?-o(a;4y`x@Zqt-WPVu~Q*YsVqgsB@861J~XblIv=J>v!{Mce)8PJ_Hh
zJnmzTPAPQ_b>yKy1wW}56HFt**aJNcA;wXH{z{;0vMK3?#YMK-i$RTJwS}>=75x1+
z#o8-Xc-D1&_oO%dj{;M|M1mnA$B5V)y0<xBC=S?YN6SaGRhPZx1hc2gj%M$t+TX;t
zsVfAJj6E%m5<Xx((x?sfWL_IK1b!N|VVz=s&fEsqmOjd&#pJ1HOeIxY9K+UF44=9p
zegN*%#OruSTu#HRO|@9h<tLC!Zu<LX-{xCIj7p1MUktzREk@Z2<V{|PBp_9>PdUe|
z9C{@5-Tfj{i9t~<AA1Ira@u>X;vQB0YTbYwG&yQu=~}To0_3pKtkdfRJU#v7I=!=z
z-kD(<?$L9z>|#%H!=j3TB*5f%KuG<hs<z(!Dnpf(pI*rODzCNUmsD1lXC#&;ml{Zh
zu(jUS+8_zU+o{uj8=Up<Z`+lDTl_>VG|^`c1zK56aDYa)4Q{P}5HaER3y6RDxa}W!
zY*~vXUYq(Be=uLNwwz3CiuaYfk?*3dO`|j-K_yMQ{EE90sjus{$?EiLj6YI>SmP~Y
zK;w_pjR}#|j{H54n_vOo-f^^1h`AK4;41sOkJZucUU|LRyV)3p#im`!d8lrhYH4+x
zaK*@EIfbbR`}WbO_0*utuqaeqB-ik5Pt}n14E8Yi(FZzTBTTCF(P3GwzQ8CC;1M<W
zUx{srp0|~~oIN0+YgCZmwJ$8FrMx8rL9@@pID%$AyR(&GAN560-9F&j&<Q&^*_p*a
zVbW@b7Pcj+T<nVL=6;k{?Ck+Q6@#~Fal`5H2B7W7OnAQ))PbdYkpAnZcNs@YiNCz}
z(XpKYq?;coY2hQepXQGCD!=2gT^RaGoBK5Xf~q6{5UFa9CSh8RygPD#D32a<aPTVk
z={aQsisS2y{&4*Xm$ILGxm8K;Dv?9aBtNK=6}suF2GR3$zL==-ZqMY~^r$e}XkFX{
zYp7X!FruUfp=WUh@$mi^UV-Y_vO$EEtAj&md%AJlgozZ6ih_i@;zp%SPAq-g9{**B
z!VuqM@tp(1n<n<ZiuiSfL_hG_y4}TGl`pe?vN9GTKXxTu(LYi1&}fmFiY8_;tHivV
zOto#ok0+)ZE_6MUatfu>HP}aCrIa5^FsNttIBi_)CP~$_ak1JX!$uW}Rl&6{ys;$9
z(E;>C4736_HLz&d3adf8mTg4?S9ur?V5HT1zP77%8$Qz~Ebu%!AWG@Yg6z1*SMPs(
zkFh87b{;+Ks|`s9q&5|;4@0qTMXI3>DV%;*+0r0W8TJN2(~JYL<-!Qy;e`B}yp{uy
zzO16%NcdYv%Oq30bO-MCQG*WwTmR>|D`&-jLz@9qpN03=s72<No%4Z8Aa05k&SBg8
zH$2-Rn*UM_b@ubT-+bqbLeA?Lv#>_h%FnN*fgAb^1hY3j=Gz)S@dOk#C+VnPw{|H}
zA^1$aiL1?oEx#+&ychS1=aqH>H(h<OvAz;Fa(|}!`H`z>xlyev<BLGtJs|>P4xO+^
zJX{D;#ide%Bbv4PkELLz-<|L^2X5^;6tF<c<zETr&YPsB3YU`knew_@w$U?rZ13JZ
zY9N;<wZATLz;T?=8Do({C~0=Q$SGO;bmQtTP2E~6^Qr^dHWk$Rp6kD~ohVNN&1mgM
zGG%;gh;g;dIxwKKY>cZ7YsGido*+D@J+?XD&V<HtXbmKG`4i%rJ?IglHQkb;nK2(t
z8G^cXl<z|>3h*20o{EkNoCM`~P?t~8J1FDE$J>StdB)5=%i->^80zwYj(p2H#YbS@
z<iPdp_RzcnJH>1J$wk2x-EBum0GUBek8WuwJuJ_gt}8Lh`!3S??p;!9$u+p@dDQQo
zrR5aA&BOc-WB}+EU&Yyfv?!Ved(p(3FK)FQ&>~;>;P)^sfOiY?xwT6Fy-zOe<vf4o
zBXJo#!`xIg$?f}*H&7{{H=uepLUI?-y@)%?05Y8eI+d>}UvHh+BRAHt7Hgbytozla
zfJa+jYbOvN)b2Y|a1OkY=#=|pG)hm!;tU3Zd9Zex!#Q4046r`_A>mX<ra5t>X^Vi!
z^Y_`4XM@TyELrQ2?2>M)g2UFmAGCSJENR@&J(8f8wpqmZ;u~Xt=KZ#7YDyvV>?z*U
zQ5xIZzXR-yh0td+8g(zAf-_^+)8$oP`q3$x=2fT3fhj2&Y?moY^mjjsrF@jLI8l==
zO7y6y6L<t}PbelLXgA_2al~4>uIk#D;mmhEw2DZC(q!Mu7avu3^!b5=4BX`S@9V$f
zNtYMFJl2#&<j1<JLa?`b8_i((D1s5^bt^Bb3dZ^aM}MS@%x*CA_1>Ocq>wyvEBtsI
z<;Lysl!A$JWf}$<M(j_&ilg2@f&4}8{_&A_c=dnUN!TNP3`jZmhsf;K9>ige^u4{D
z&Mna1ly6h5WV_{OY?!}7Ci3y$yUYYK#yy6?JEODGDi;7E7H-T+m|G%l;BYh6gGW0(
zyb2HO5Y-yQEqO0|6+kU_S*YqwaO({+5H1@nW%0~mwFe{B-*UARFev_rB{=gc5($a3
zaXT;L-gc^HR&0+fZncxB^2@OIROdlegCW_`tb&4q+ny~tlhxWJT4aY!U>(@^7?AkH
zUEw`liC-Ui6Nd-`zPW|M|ETidB@sYUKfVYH;*5wfiHn)BCtLMf%kDHKVi(_8U%84e
z>3;TJv^RQEnb=Vvu|IgEErw{?3SPZ%d1v>+spx=_Nd~nQWt%zRN+ky#uZ>b5(hJWJ
zRHeQpGDL|>LndpT`L`P_NtE#|)=>D`CuKLXi-04FbDwG3VjGP+CKvWDMc|g{OkW5B
zbR?N=`_k~aDz!M+j3HH|Voeq0Rd^xiL`3YwP^SX&BmqCVt3t|&ELUz`69Z`;H-|qC
ztGPipR7hsDt(d!v4U|WUEg}Cnl>ECq_0}P=ww1)v($WJDUZlM4?k!>kOQ`_`NG$Gj
z2=^6OaXU!vTLqEKZxVYyiVp_}fI~t4%&Iq+Tr1Z-sTC`~X#N{3{y<mYFJJg<&IGx7
zCCQ(|0!#yNvDdiyN>sAfFP#jtWGU@|`-Z(aLgeV`jR8z+O<SsANsjS)*kOaAhXXrK
zJ%Y8?Htz!ZPZl^v5iwE+qsys$BJ3|d15`4Hz18MTCzyH@@hCesleV+*bw-B5;hheE
zEA5<&`OL!$ohPguewURMe$^aW;vnsue@Y*S5jD!<drn?_sbzYnMp<IO(-!bkZ(-a_
zf#fwJwrM(;oygBb^i}#-rguzbX4Ed{k6r1km$eY_gehcNrFrZSeIAqCe_eqc6Bv0b
zu>LyMeerx!Zf%FH(q$R;*kl!a^83oIKtyS_8h{;YBmhq>+hds`9%320w#W<%6h`%C
z*sg3fuGp_D13KFXQCP`)#0S-I!k&Z1Q^$?bKavo%{N~9BTKYHM?p@RyS5L!f9(%Ff
z4xuAzFCyKO#4qDmZ+fI?Ggs5&%+{W?#%r?Xrn3v{f*)8c1;2)Lk;xh<$Xmbf4*uOg
zX}iiTF7Nldl+^&YYPmPpoCrI`w-LHaek1{%vYpen{@G{gyL0?b2uz=u#d`Lgj~~A;
zX2Txe>(K?g)<J@LtA0_|n|o8-CeU`y>c+%~2+$ueu6?{+?1Dl?gG?sis|kT1*vSt*
zwwJ%%P$e-((mvdpXi7L#1bnYwO8|)D<{qi%5igFva(Fzl=U#n2kemMj;gyj4V^ELw
zWYaw8`b|Dz;Vp!VnZ!gXi-u={rl)v)I>)?~@?NHBE*9)7dJ*m(%lQ83j;d3WW;dSI
zk$6wz5{^o4gtfe}Tr^d^DYf@ol7jSeT{tvNbL4nNL2Xi!Tko(ysv;~cO`z89fUo;G
zd)!2!{Y{$EN<rz51BxaUsX~Ub7X-!(R(Zd`XLg^mivn9iA5!_ZSG0t<vdpXOcHX`<
zsd}w}O(}*{GTZSrF~V3Q{6auIVus>|#5VMWAa{WBTU#@r=Wk*Il8kBX^16C{_+NGf
zOAy8oK{D%&mj3#3ru5!h7o>id2z|Mr_{zv?kQ+yXfH(?O$S>Y1$gfMyuNujCdC$tZ
z2?$(DT0h-83lFYv*4OGj&6A{;mvMGc2g;$9ytV@$9t6#|`g4}TO@AoD{J#>vh5ULZ
ze)-{Xz|EedRg0w;L=UQaDDQ#T_>9L+<=H*ZS>T&eo>(MzbnHeaJveIvv|NS6!*|M@
z%x}ZI(CoI9-)r&kAw2AYneNnUX0t0^ekGh5A}qZZXz04qiVDujs{%Kf{RcN4ddHL<
z*sK*h1T}ite@|d1#orzKy5U{3S>%Ajp`K3p?{9#FM`v`md$}xT+@dkc#;KOR_~tVP
z>rQR-7;|jQW7`HQd!8eiW9-IQW0dyx#Ui!qQ9k1dmQ^7wwYq6bMJ@3d;OXfq`tF*w
zz`2*J)))-BL|5I@qYTs!AJTscKC6r6l~d5-89PLi>zL9{91Q_Hbap$>>krd0@A=~j
z4z6UXRW|I$rz{XE*ce2zDJt2Jwp<vBEGIy9C7cq|QQ1s-wuxlpwhfl$<d+QOT~vp#
zpcrn;=>uHvvRRYo=m8+NKZ@N43)@bA`lWD>+-ta`7#Zo-a7fKpt5W@j9Q*V*(4Fz-
zj%;ZCgB&dpID27hxTE`^-^$ho&be`6LExF*q{Y$lKFxhRIg?#90@N4BsB}=n0-X63
zH1b%??CJX+YzzI%7SMCHOXWI)wonC%n`qR1i_>CYta-`|W&GJRp`Vh+?=;1q9DjcG
z(MWji>#}%@)d`@r$?^W0?7E;g_W|Wx(slhzv>;~3{=?Uw4gftTp`Q;^OO$dy93U;{
zxYmTLl0IDG-98_6AgI$EUh!eOq3;0D@A>Z@ttsDthTi=lo_hw~Iwd;E=BLcGS?yzY
zV^ni8syALA9gk_;>)UM~9=UtrMpcx)GwX|)?)YoPYXuN#paIk~Dr6fuaF2Bf*L`rY
zF|n5ZOkad1+7cv;sSU-lE@kH~&g*%)FU0uQ^r)*DkC}7yiW`}ENy?+8K}|~n-2qce
z1#;uMyrcG%0L#hY_VG~-WurCTdb|}F`HE67ekiN{VL8JIwD#l-;gurHS8{T#v$*ZS
z_3m9Y=m=MqeKzC->wAxV9gKRAGEOXL`G#QKPL>uuo5A;(rebjJ;IU2nmkO880Quvk
zGpbd_Y5}nZ4=W=!#$wECfv(SUPFUwdGSEao0n?FVwG|JNERcShT-xS%m><^p(`;!$
zgThPxts+^Ej=kqORR+IgLu)exi8rhtT*s(?={RSepslG{Gf<9cJT1KM#B1l=2B1i>
zqf^=w_pYZCU{;^QPuSNyw%d+ZN%3R!j%?c+ro`+WLRZ`IDO_6TeyH{NdPR-R4As&@
zP(x#9laOeAO-8i3^04X`N|m;gAgi<RP~}Uu6T{(V5bybGWBxH-kz+I8_n{#(iy^X{
zL*=Sd#Vufl5^RRqkr3~cO{S0y&B_5@G@w3VcXoQ?+3II0OX{e`k1f?$5_0sliqQ-f
zKij!_Vp;dc376?_l03SHVUE~yUz?Xdv~4+lwm1sHR_kfp;>ig-ICTEzLyMjCzAQiy
z^IY}=6(iNBCk34ZRj=UbJ3r<akfsVysugx^lfDT~!q(mHDmBI-w?gV6ST2nwd(`RH
z-Sou7M8)FL>F8&*zzJ+NG*HOz;I>iTRPsT9(d(-V+m8W#0ejiC(*Aqalx=~4&7U*_
z`lLZo?sMgnd$n&m*yfaU?+Dv%b58ESoas=-d7zUv-@G!Nd1BK;rSa>!8k{_E27jpJ
z#=9esmsL;oqMpK=<3Hau!uB53PSSLKzSNwQgc)~nItK5{l$pgreD{PTxzw~SCkY`J
z<AQ^LI^4SEpal+bx34OZu`5n8tX0Ys!#IBSHCoko%+QHmjRvLpRZs3C6WW~eR_$zW
zY(!Vt|BUNjl6w@4Pz^2s8_iUA4lkt$)Lg%GoA`%)o4w*&vU<y`ec;A-W|MfF+5)9l
z9tpI%x05@bUeIGK*tLlf!Pcw`RUOLPt?Gh<fq(r_o~NOlEaYDf#qTLXN)eKwzAfGy
z!{SZ*Y1}{#;s)~8PYdUPK>j}5pk%My{Vm^sgb&qy4BykWf6tx)+){G^Q1FS@Y+agc
zC2*0n54vxlfnu$wX@tGhN>IfO3%w~904{Cb6o@6>t|SY1?55?|_x(@r8Jtu&lkz+<
zH{;M{;$sK5tgb9cxpzBkm0ib>C=>a*M4bZ=tJau>eKDUR9b|piQ*pCEl&2B$gWvYx
z#~(YXKw>?aU(eEjRX%EH>|{iG4BXkFyaHEX4Af@zt|W656=OYnV;XD>6=w~dS{{mM
zpR5qc3bC=VaVCRKvZ@g<-n_W?aj%$#mt`jEN9ZhFPwJbgGpSciszz$WAju;p1d-^9
z30(pe17%nNy|$6g#<<$-6;qcV+%$bzXjY@_w};8g>zC)~#GU*P*d=h{jUIdi+DO;G
z9`WPn1{|PReP6=EyBoRI*E5oZT%SIDX&Tt*p^^*K96MgeYZC?ol%EP~k>$XC^ma>^
zlCHgnp@6Y^oA18Q`^|T;WHoj3WQ#B0<HtVAVCBZ;BlPD#nB)6=I>wxpj*tp14#3Js
zVx2mUprHxRIn$NS?P>}lLE8jT3<qLucEj~G%~lsl`Ep>Y{#~u-V+uk4{y4CJLq_Vf
z_)YqHq}ZVt1S*XX3h+UFEh=oWBAgMJdm@kHZs2@5ST7`s>h59+adh>4doxQkjy;?A
zDPMkPo4M|2x!6jwA=cGFoTz8a^&c0h#UXL-;{v`TF+;6j_I~o+T)&#rs{)m}AO^Dy
zL>NIC#vp6ZvQP|mHdYoNjZ0<?{rJ;yuLfyd_-(TFUGdetCXl+Y=D#Tdhx=BAugm5k
z&$~ST^%+`h9?t&VD_KmF+5>LmXy_|0mwRcSdjJnIT)_!m$8G9jl%5%U<PG3^-0)8G
zO-7QdTYkf^0`eu>5y<PuEIQNWGo|*=C+b92u($3Tw^gqLr=kheqbm(j@qkJqRs1Tg
zH(WK5-BuLG9D5gIXojN~p69{>q7akS+@m1&KM-M=Rvqx1Lo%rL5Og<IYA?VUIp7+S
zA-&;7P6^|2y95@EMuG)xTXdgQ>Q9jCjX7@o2B4$F#hCdTMb9uoB+f2VN4LgUHQJRm
zbaD0TW&LIH*a0GW#>Za1lG?Q|zg-uffB7no9;RwNYfRXAF_Q1`_SGQI)MYOAWYaID
z<cFl5KmF>CKmF==K{kNqegfb=-c$eZXOBYC%^`lPD%Ms<Vk*~XUBBumnk7l9qg#&Y
z8Lnp8a2-QU9h^fuNpCZ3?A8Y|D{ogZuDPzQuTE`lt}+3DuLm$9JX-~0t~i-RKK7Af
z{TRCuGn11<1*Q)d-e(%$&ij1-+5D24Pfy`j3DS6+PNc_T@l=Tfbo9d4ZA7c|xYhxI
z(a${lO@-Qv)Gp(24yw9rc`GzX__BVtD3+B?kM6$<CoNS-jXEWqF^ls-m7Wsl2t3{+
zBxY1&8yV689&k{RX0_XtQZUw$OCAit1K654Va%*a)#>>3IN=NI<C#4=9r@&N<&U|H
zBMMIBw|)H3Z-|sYL|S=w8!C_47Y??@3kA+|-bE$=hw*q(ULohV#rqrX`@K*zKg7L&
zHYfgHfJco#VSfR@$kYJMuYHCgB9SD&@-Ji{@-4KU1>)3(v+F>s(`FZz|M|}eT{7F;
z%*AYPNVVVN0mpj>44%j2@bO?DdyJ!i$Mn?IG*`1UBDN>Dz^$k^P$U|P>h{>{9Ir$g
z$<Jjn>(`IhLZA$diBPs$%gT{$p3HI9SfD2Bk_;<4(oUiCw3{C(qkvtHPrxRv1TWk=
zH(teSplVt`|3Xgh++t_!1_eD2{08>pq>UNoFY~>Tkg4fmg&vZwxg+dLUzAT~Up@DQ
zW!dUiUrE>XJ)vZ@wvg^kt_RDa+&eOD&)30P4#Dp~y?059;CT1$M^cHn*zcaWK?!$y
zUh;W6vFh*I1j{Xru_5Udn>%5iN@Hn_x5J@EBe6dwGR{V6`TRI&)ET1$9M8BVDqZI8
zV&0oNl^#?GQ23G6@2D~kGCSq_<cSnavU3|M5M%_46^cTf|4CJxw+`A(p1v5?3gfRx
zd7^_&j@5aDta%d$^%X}>a(~sZgy2JvLc<>A_ER5Abo#4LxnBy{vgex=3j9d3wy@{q
zyB(t0S!4s<<jeT@&M}A{OU%H1cem)Q#YL=?uV{C`#llKNB4f8Xsr?8HdSEa~mS|<H
z3h5*MaR^B+6tKNXo1&#!MtGQEC$?OX=5`EHb4=@F{%7gYU*I%sEcdj;Gm|&%p|Hio
zD4%(U>mLt||G1NRmZVYMKXy&2C&|XKmJST>TV^|o4^j_RCf@ePohuFjNBh?<DofkR
zH5JHTzZcVA&{7WkDI|#*`{*WKA#z-GzBkKbwo_-1m~Sm*7i~XG=IB<vS$k7Xmqnjy
zm%cyqO<%sCJk*AhuPf<?_wMbO2^!t2C&lwn9(kdu2iAKqrUUFe7Va^zyLtK1n6YoD
z;@4n4{@%3K*>-srnAHO!v>3M{a-7U;rcSEUL{lti_TgY(dS8evO&~+7W2@kkN56T3
z?<2S<25J!V<lin3KwYUAQ1%<R0{yeiia|5J<gJ20=k@1ng~7z6yW`F=#-?)`I-N&%
zUP|$}B3|0Gi<-Z`)vA=T@WxuC%_PKC>Z5)x?v|o-O{N77o2)4;R7nL8N|3@TFIZi$
z`hl=k8&YwL)HfUbg(LpDm^l;L)Gpi@qa)prj*~6A$8HS39>pG(74g^A00BM4N6IL7
zE0ZcdE$q;i-L^N^=+8=!*b#?pCd+4!p;lqt3rjk=Q<VB7C_gGcW9hpYXHh*ZMwNA0
zZHp6SQ6iH`Il7`|f$J7WmNKQE_r;fEr1N@Ii#rE?mt0@k%1^HdeyOytv#hkVmfDL6
z>x=~0(07<k{mbb2m@<$q9#cNjzo|XNe;L`n@Turjpj6a_>#CWx!h&OGlrpWiv&Jx;
z&p$PPbUs=)W--IqGJdnje5;_NB{dfAtWhgLbEJqvDx4SI#4i#m=wqQpAX$|24eKBH
znpVF<ONDG-#)yD4Zdf{*4fu~dCIx8I)FNi%5VV5%7eo2lMtFBQ**$|1j@jE`4a)`w
z7Drf!9Nx14@~0Rg*>PkWOf)Ao4%u=kflbKiE)c&pb-OjGNDliXELF1tC}N3Hx`{i)
zUYo!Fc9s-BN(ep-V?;#b-$er6Ddmf5p7P%&^RE%K%MftXT}vvs-GAE;MVM<;!eI>C
z&3yMQz9Txi_QoKYlTW2Z5oRv;?v9yUJ@)W$kB!a`%DLwm(S|u`d{j}lJk1P?TrDW<
z`R(R-4{^y?7CW)@!mm+DF559RJ$SZ!SY}1JSrBh_dwvaw)Rk#Fl~mZ?TS8!JjCW3=
zQI%AWy;HXVlw^Jsq~?6p+;$P{QPzJ*U(<D8O`N|*;XegBombR03732HT0)svea5m!
z3hxfkMO~*QbjBA&RY>6_JBw;Tf}}-ggngza0KICPVM&f&UBXq4WR8D3Tgpr|I7LgC
zX^ODdJ{f5YP;P6dWS#p>i49<0|8Ja>EWec0HgL>Y)i>SoQa;_G&(`*(qs*RZl#>N@
zn{PBOXUCwRs+!IY<QSAnLky?Ap^`l@!|eXZKpCrOJCTpVptMl)fX5@5wh15xO8#p|
z%M;{8wn-dOAi4WVh-%F>^Lto(990zf`!YtWQN1TP;YGhhzmDA!1m%Tv8@{W1A#p&u
z<<)Im@4;(RUvDeEB2%_fhHn_=t+T-H)zvQ$v?uS>Pn^A7Wl1WQkfvS1Ig5^*r|av>
z2l0pHA<$QG6N@=aCeRFNM^)XhM49n^3k6Vj(pJ_9R-0x;-0CZc>!rp`nKFNyT$>)y
z3TV@lnf;At0}#NdFAq5b4;L=n#axl!W#!Wut1a_%Ch{pf2LOGLW2~DIy{|f@bb6Rq
zqO?7!7KoFWTIyw-vp59$2yUkY^W9@k>utr(nRwE(ZL478LF(visH0_5EJ~F)O-r9_
zPYBIhuQqVkqV{Gn3uD0j_rf1}^q-nM%N50DjkO74=zO(Fny1XGc3ZM+Wqnz8@HB+)
zxRCW@57w=0oeIP=#w8g8nF$SNjc(RL5V*l*4{`Z>QCih?(zv1O4NOg(U*DB5^NZ9Q
zF+*af>Z|}DmWHM#a<K0`G4^%A<}n^<TDk-8%yKI4i@@KmI{<MAXx|}f9MOLt-#@+B
zjUW7d>8YuwwhCgzcDUs>BxgkL$&qoc9Wzw|7Gf}~0}7@lzOlZ*SkAW5hD5pM@HDta
z7n;T_S6<tN9j_WC4BVr}jy9icb*xix?F+BiA>5HqKPJ`a1vW2uUKORR>kJ^-Chz2a
zaI}n=0>Hzb)_d~%MLN!kBtmv0Wkf@*<fFjB2&ahU{OJ+_X?`T%JJ`x0-|mBtvNW+z
zMn*00x9e<ZCqbCmSYbbs`RZ#GI(?7CeSFK;@?u5da5a)RQWsl;&SsMLGYyJe4WtMu
z>gc)0r)T_sYfiyjbDFrul>7TU+LXBFq$D}JDem?Qe;P2X*(M@$-~F_jj^;fBxt_$&
zPHwL~8hL$w2s%kAl_lYve%^UHlW&+e;L@Gng=d`(d1b5!^%)E!h_vgXSSUEk?b91n
z1bl*Oo3eJU^E5D!#$_pz*dt11sBH9|rjK?fEc6-jlszU;Y~<7@<&*Qu?EpP53P5}n
zfS;CwF9Q6$fmKNeP_Qiixp!-P3HMrtH0}^_YTI;u-L;Y>{IfgTj$D`8tBW0>T`925
zW;$B##+himkX>`%+r7txq+x-x+fQ*Mr*`%xfXrNOqfniXOSPh$H}ClZb>m*Zl-|D3
z9>)A_YzFh(#B=_BvBcl5{cl6#6{8$8IC&yE{+ZR)y9ZAz5tC#b5A~@}Wbln&&9ps2
zu*N!D_JDDzhR^j{BsVnN3U0(DyOkw4nXc`DK-CUX3NA-!&y>5?#F<kq(PrRsz(*bN
zl9k1avh1=aJ9_tsNhhDD(M)$f!P$i%Fj%XyGXbAw<y?ML?brc&4u2?;Q|;TmOGG7<
z`81h526fVaI>YiJ^8Ct`QB(&X+@aM;Csw&-9b$&N&hSm@n-rtkqBXIlx#$G?rY==7
z9i42sm=5;sb`*sAN?nnjk`~?lJ7~ur`?$@aULo28Z1NWXPYjNXj5L`oBavXiAPDIP
zqr&B+&*IonWg`F>R$XPx_V>?OgjOEu1a#!R`cbzkLru?8FtjwoO6Vsj0-N00w97j3
zT_g+_F!x+hv8?7ZT`AmlKI_SH@IraH?+N)DW?eDEn-g0auUnxUyfgQSM@*%1?T;F=
z$H)0H-%OgypG_1JV8Z!0R^O*hTTF0J0Cn5rBUA6tnYG5QJ9bcFO_GCaEFmw?R~u87
z*!QNM&nK_o4x-`Z<On@jV%*C2&RW-$#%36<y%T^`r6{Ik1SPZI_8_{K$jlBM%f{I!
ztu|?z$!GBSsGX`gwpmMA=$sQN6RdsDdJDIkVUNlnK(7tQVeReoTP!QQca9JkWAs#V
z=FJfit<Tl^FwZ6r6>K6S!*>7TDS`t5e>lFV7V%gOHmz3|_Ktb}W}$sV1!L3@9h-ts
z>&zFWj+xVZ@ch2Gg?>OF;EHtg4pD`SU%yS-{?Wa@p~8>nED`ItIGP_MpjEvLY+%C*
zxL3pk7K`LQoaX|&BU24S7^Q3CBl9EuRwFIORw(xi)D4>ARq=1T$GpsoYrXJa=ba8H
zB>hyqE?tiv7txvf)U1ZO?klsJ3VXn=Ts)8My*-h{V9qrw)5t=r5tR!ZS?za`sFiF&
zyP-t&P4f4|Ye774)jcIUr7nrhWDk3NeE(USSmXutT~fV#`d)5+XQ}~xeSMP0Uv0EM
z`7-un!u^??u{9)lYI*;&YX8NohOD!esAJX)+i+o&)FU&LxP$}5H@5%gR9uA>I%(b>
z$X76SLnh}pbcrny%39wA&?+0{kVqYE6c%bo(ta22fi)uK+h(J$<D3@&JaSUh4egEb
zTNV2O6xCNzk?)4*G6hgATRO6~|8Yg!iToW@0Z#Oo!br2_ruP-)GMl#Umi~I@SOu0{
zBoVE=G@$KNXxo&Cb5!x~3#mvs19j>EwuLHbwl^njvtI<Ooh*rtj5HNv)+GEUWM6!R
z6$DNL`zy%25GVMSC)Iz0qjtOg>7i}=G#oBb0bICAu{B~FkVjVVJ<iN1t|@c9`()pg
zR`4qQkZ;xU-Ok9Jn(x|Pl^(w9edn$<dz@A3K5F!_R=evwZcS|6E+Sm?MGt|oW6AfY
z>ttQ4zcw89`OHn++$D}#ObtJW1^nz`;(YSj69C=)@1f%b=s%G8zcMql%G7u0431p{
zYUloK&s}q0V<!qzGxt*p_Ip`t(RWkhJD(2%7{ko+k<Rq1NXIH0+BlK~fMLQBtdYfL
zsRKx6+frJmI-qe*zniU|Q3oL{%UGGbKOHa6+NY=SlNt94Dh`#z(+$eaW#cuWN#F}l
z+hW{7k^!+$t;H-qALKrw&Nr}8sZ=A}v(E%aieK8&s6z%i>)%VS5HDVUg(~XRwD`S3
zRfY-O4vzwm`>%jd5T>e!HJWriHyS;)?eX@Y?%%E){UOYCZOvH=r(THhipx0{x1W6g
z;Qx+g9<G?|-YQrDtez}4GfvLdHMb{{9P*Y(iOlcqeyAUPt1_e^zY3<6HO>QP9R2NS
z*WHnk4T^M@_A%$OTOr0>X56ZP6O1E?p920#=}{r-@3`_$uvWIZC=f-4wmm-o?j276
zZu)bybxwJhkcMJrqSC{H{dtLMx)Y(hmkTCG-E)D~=%br&4xjy11lj1Ti%)W`K{x5d
zi<#4wZEe<yQ(9wu_7`@^SU(wYfYY9QP5SI!)4D!lE(}G@qE-4eY&_rTQwx15WL^!h
z5w!2ZpnkTyK98_$1*2VPM+Nw#un8y(+>Uo%9N9{zEF9XeqCA-Op)j_ReT;>V9M>KM
zwy35H4!syTqJ^og{=v~W))E%w!Jc%|^}QnD`y_yF?h@f@aM+Rw**sRhJ<5%*?|X);
zjtOv+HjztlLyLd8AG)q4ZPYv?YwHWSO5Ze1(vlE<a<|$r_16)Dlk>qov`KWo-R+~g
zABL)HB*ZT!`~q+II2spxJHJMMvc;<-bM}zTK;t#;VCNdk3inq0BKO24KU8g6oPI`c
z{}bB|zR$(B%llhx-TJ*qAumzk@|>pUn3d903ZlGQDkdbdtr4Wv)ZnFvNLgtCWTube
zrCyAf)ZuHo@DtQH5Vpp=s^jEJfbbgYehM*!nY}+^7o%O&nU*8@-3P5g42$_As2(&E
z;TWqGG+f9|-=f@@a={vEgwMxi8(!~Ii=zy?gC}@8Tn`?#RTKCN-QG~lZ-Pd_)0P_I
zCaB}r`LR+A-Ix)jsELNxqR!&hc%{*!B>LhZ-<rDA5fkIjU*AQh=y}a8+t|DOHm?D5
z&ppL!IOZ6H@29c>cR8df1^Vga4`8^HPD(M)A3x#Lo$U=koQ1~oZL899b5#;wz8vKu
zVqt!()w(m;V%+sbzg4>T`f?BI*Jqy~k$#{}>ELO51DK?{xVUinJ!+&~KkuqWI^~o+
zTFNQyyDOw;lDJR(ju8rl+PUw<!EHMwMcLXL9VV*c=mG9DHBz(t@a!lqDW*FQSt+UG
zcDonbaDRJX?9GP@O+QMRd5x3enQZp(azW#r)#?gLAW>UQ{Fr{{-j@;Ck@NVp8Ly>P
zy;<6~EEl!$NQUIcv!>1;5H1mxSqgWT-{@mD<^~wv<2ejT{Z|?JjwXY(iWR^1nw#HK
zf~C1?z1ON0$x@yj&j_B(^vE8)Q{7im@bj!t_xNgL!vDqDo5w@Jw(aAViXxOs)=}<g
z!6ezuj8=C^DiyMGhZ_5qWyTOiwyAVScBxeMWGypx$ufkoW*hrH7-q&S-)o-teX95U
zcK@F5=ht68RG;SRyw2-9kMlf^V}VTkv{2YzmAD`0VAygelB%!WDR9RPPfzUiJ8Kwi
znWauw9DVXgf3!a8&eGbr*QNd<R)w01H$_=Sek;c3eBfu*tjaP&yD#a9328w-YlFvJ
z$Sr%u&PQL|)G#7k&l;AQt}-)fiQgSMW$lXfUmdVtRXO6&Agj7?^Yew7%9HA)jrr_v
z5*w^ywGu15dTd`N$wWg=lyHji?$zZxmk=@-f1H|?0inL=GZfaj+4%{Q6zQNSzicH7
zdY+9M^EK7qW|`}}+_-mOOU~U}yZKeuH?h8hh@|lVxcpN&!!un-B|?HjjQ>!(ZMLrK
zUcPjaLH4A7GAeo}+z9}+cP=Zg{V7v=rpP9LY$|9ux2Q>DF7gqgVI>KaQzaiV<86|n
z)+d8{p~I2ku|?kI?(N1M)yuUZ6UI=3@D|8^X+!9Vod)fGnm8)~9wa@7AW>sQoZy4m
z+a10vbYZSn_QN3@s?$E)dN2Hy?VYyNL9ErowYqvfn06`zLDRNRY`cJ}e`&(_I$Y6Y
zB;%#`0U$;(qHF(g{C42o3l-S*&LT&`k;@ujMeeBPYpe~=cZK%vJX@YJ^6@Ns0s<4{
zT+-)I2v&%nOW*&CiOjE5KYU&G2?neaLx~p_*%MHVcqpH6EQfLBS~2tHCBN)&i}j^`
zu$*WQwsguX_CxcyZ2Ldn0juTro<+*6v;vyrkv2{Dktz#mjv9t25Wzu=WkQ%vIi*7Z
z^?ipg>IrF$Ki&@u@Ky<$eU~*>if6if{OCP+_R8T-#2$4iuzP-PG|byz*2I^)X2b2y
zk=^Y*2HWWfCL!qcAME;+z=oXl^eWlP#NNNc;NS1f`yI=*OmKDb^W2?Q-~3>In$AbK
zx<x69fW{zWmY5$7`3`<mzf5yNCwsMi_M0$-CqW+zyId7>%&Lqt9%GdEv<b95Zmu|U
zcWkb4eP=*Z_dNpEnqeC>kMpsdhvg~be3_qRU%=zLJF!($LUWSlSS3W9^WpXp|Dit#
z=0_mC1?uqCLb_?C?Ws%7L2C#lkDkn2j};u+E_1Y)JmEd`wQR|#Uf40K%yO^Fm7FRi
zu|F77-ySP}q1M4Eg*|+0bHH<Sv2HW}*yP@=yUH;!c+X42z3{!>vZV}<pi5<LtkYAD
zF*T39VsoH7bQ8=k+1%hX_cti5w85X<>@VGY_xbeIZDE<;%H=tD5yXhrenGDE7Q|Rw
z?p9pNT26+XW6~Q7_X+!EVdP4Nh5O`m;S)=c)-#()HqcLu=;`GPa&X^BYb_&#dhNi!
z8ckz-+Fl8FXhQ<F|0GcK=-Uww1qjhy1;VG_xw}iBu9Vp}e5>aSS)}f@nCW^)!QQho
z1syWpIV1z95i9P!cPvVHF2ZgC*M1=KL2la>MejBrbxI^OFvTFybm}$9n%ptrvA?Ko
z_4xUdV!Sh^fKs(wpB5znb8H*j{_dZL%)2<1OGoqa)#m~si(p)zppfc!aIs=8Z_I+j
zdT=fqefV0HLl=$BN(-teJ1_z&f2HqE>0s+u1WbuB9tPFDh4xY7n8<ycUC%wcWjXtw
z^MD3%C{1wRjo@Xl0<+I?6yMivVqK{za8772Z+QdHt~~tA3GgCng>-Vt7W6LP2-Zsu
zmkD@#{d1L7q&yMOk;}k+8tc%9#DHSn4{RP<?~!yz@;neoxZ_;-Z!Lg5cFT(3PfcGF
zJCHNa6IP^*jGg*s-8YO0uQ*7vR;=j6gUTw|i}Kk|gL&(Y&Bf<gPBv@piGB+U>r~?k
zm5>46+0OW7g4DI3&ii0H`OnfFpLH~tW3p(iVUM`}G2;Cxt2@|D$W#%k4nELb4@tXg
zh(M?n4m|fMyjk(Z?(Wg+Wvfq!W6)KTp)ct?VWTsX4`$v4r(@`%r%38~23tkcRFn>F
zAn4eVvGw4!qoim|HWqd*<FxX<tb_NX+}tkIJM5~xW?LJ(lpj;vnac;Q9FoCfKBy%c
zGn+QQr8I~o_vUM6ufLbIDb1Z78^xE(CnX-tz_fxYF#}&(Z#+2vIMrh_21z=mA3rQh
z-dsZse=2|Nm+GSaHYT^ho3Uf`(FGUKTDhF-XuPx8Ber!f?9she*sAEKl7vK8-}K(l
zBA1iN*0yJ*3Xy3q{~S+kyhREx_1)9A3@^FlIAh$nTDo`X)sekkSN<ed#(irpNvJx?
zsfx0fn^!x2Tk*e-1S|498nTxzE1?&ZR_gxt%YTJ|pMAR8+Gs>{nl_!1Q{r$|uqrh&
zfEWfLF4s3+^5!q$hwa2iVwJQhkw#c)q(6#wHh#&V^MkI(1b!-j_RVWF>LIkgW?P1S
zV`AbwVC79chXkx2fd>M}XYQT59&PlvRC2jcY;2*-({cZ^2re!DwfS!0ts30pi2adr
zIw+nq0rfViybAIjkAE^&YQ)efaauup4JyaLA_(<VM7Cy&zq~U!yXZ^!`fN^JkMLcI
zeU5R%4^Ki~>=1Fass6{t8OGVLf`QEeGx(P4!N<L)+j~8mmE!mR6=$e^WC!10Ut)L(
z@J(mI{l{f515KEhj<GmUAH@Pih7Wb9y|M*(91d3o3m(|+NdqhMQo?YmO@<vpL-fyz
zqk8H4M<S2qMF1vYuTy4BWRlRb(&%|!SIZIghm;;`gpl^MtkU1EdL#0oW<?J5LOSyz
z9G!-DHuvo!Bwfog5{&;k?%Z4O&C2y``BZ9P<Y~c3894co(KF&c4b#4@{Nb4FBa^S9
z3XJ-*jHJrq;4aX`x+p81&9DCFJehB=doNF9(i;jkW>y3Cs3<e)KU14mT?)_BcLdSI
znVA^J#mXHb%a?XDdcIkYSi6keuSAq*9$NG(BdxL;j*K#s8aJZ2&4%C)c*I_t^OZdr
zZGf&rbKh}s;|FoeF(i6}Hd1kU;8~C~B_(O{^}&#m5&5uYf<?i-oA!aIF}_xnEG@gK
z*1M#ZQ2O(>D8vp3PCdxV!{F5I10jI+lgST$Fq`T2a2><WS5s!*(6?j%?MONH{eD%T
z=7hc>`Etee@PoWNls&JW(sKz2Yi^r133$HPP`lxSPk|uV-x*YQZG}?f@s-!!qV>a8
z&QVObsaV#c32q&0GBB3IPBqyR<qkFuuaDcRgxuf^KW}zxOnLp5?0Q|2o8?Xj=4Kwz
zOGr%IA@U{rJT>A=xK*NO#ox%(>rZeE`)EC1mmCcJd#3lVzP`cw(t3XScB3ZS^iitc
z^d7J(WS=iwIAfHzhgGN_p2FA_S2$Lb=7V|}pAwM5E!lU+=rsoQ0g7=2^;2JHde7?N
zeE{<e{6pIho9yk{5YOP|escNBE7Az<3{pC<Qn2!50Bx6`H&uj-7H7FAY&jtnSQ&9r
z5pajn8?B~n5Xh5bU~BKf4gU2U+k7?e$b7Ycv*hAfrGu4Y$7Cwo>izWY$|WTxx;eRY
z6AZqY{@>00e|_hsHh4dB)=Wlt6&-m1EwcZ3BLsuukZKNjxhj<b?p@S)kgHxVP=|=p
zs^<d2Ao`qj$3y1Z{JCrJjAnctShKrclGhZYF=RUU@OZ%5wC4EZGp`m`wuJ#r0tAPB
z{*oGUFc^m}x<qM9;V7E`L6P!=e^Ey4>LToNBt;VDL2MTSGQyq!rmAgCm>=Mm*q46y
zjRI087c6I|2x$-iV)>96dk#lSsJ;JK^0xY`BIseVV6iMAeCH$T*e(hgnl$UR{_^rC
zCuS|7xW32uG<@ZI9KAtajyh<mT&FYhaxx+5v`l4Snx>})JV_srG{rC<tfMW%33CGD
zWRPd;v$avy%Vb<({j}#WRcD^@tTJtU%xK+kQ-`?96PCAbOBfQx$44H&h8avnj}-{t
zOP-0;F&}%5DB1U5d;Dv=?XKQ$pXqnTY_Z1qj(WY5O+T<u&S(iz@zbNNUU717d0^P_
zG$>^)S9EiqhQNsV)I>>$SF8nfYG0B7ren9TZpW>`Ywj&F(vAzRx(uZ}uF;PMN%q$&
z7DlV2=f+;4n*~IAbyzqW2ZEcYgj6UGYpCxNHQfs^9NQay2Jp<^!fEgI(u=r8BfN=C
z?_THUJ$Ni<c>1Gf!PTeE*m3RF!rQ_%+7MI+IpgnNSx>@4-#X;}-fS;CFV%Mxj-(!d
z&qZQ|x4>Si-a%B36)9tA@R%7NtM#UEBDq%E%frS(t7qtA7y4@ZVxTG4Q{Dr?B<?Ny
zr9Bela%PtA=e`Q0wevPx`L2XmHi~&E?xV)R`C7C$$BoGy0wt(Id7XvPLj`S#-jSh7
zFTGTWMPK$w+qZg|k4@qBAWHSKsJ%rEsor<Iqc3X6TBHU1<9^8AT>z%vTPX;+T`qD3
zJYrmjk6=7PIE<qGx_<62nm}QHb8vT63|Edv9GAu}PL+Mz_tFYa7~r0$Z4<hLd59D6
zXVIoeV2AXW>s1aTxYN2~i5fQ0y^|ksQqiAT^tt+lt;udzPiIsC$-BKeOP{^w%Sf>g
z!27aor^NL^o2uNMyCVevpBS>04FMCeII#fNK0tg!lczJW4U<W3GJxKK?TVT=ap10*
zf5wkFTfxmen!mPG-g<w^ay&$=(0#&EiQLR*Zr^#e*kcrbFGZJd^SeU<g<d=(A1b7?
zSJvIWW?}}qY4Y`zMnCBz<Q^k$_6=02?6qvE&Ir=*NznM1e%5*nC7fK2K6M(Qal(TB
z?g8^I8^d-p7-U^RI)6Il;$gr;SH%#e2>5SSd;YkRP;i*`mv+xHZ+IkkY;SSx<*nQU
zF4rZk4NJAW5B1+$x22FXT6N0UJ$qNjUL2Wm2*GwY%9!6{Dzny{k*L*&&rKByD_+Lk
zxJUBHtKTc@l&d_-z|8Cmt1O)p%_I`@jVc0;&Rw$U{)1DruU68!eqXff2QN(l_BvQN
z9q;;PnJ;jtElww8%3M`G%^U_fUk<-X>*gSae>H|*JVY|c!oIJ&A{77!v*~c$wLPI~
zs4IV^Q_EqStERn2HY9b>e>y}<8^UM6R*3b<FtvpP@Tuzf^(@<_=Y^<_X1<bup!Iv^
z<D8*f17mc#Ho5j7%~WrXF-*8Bkys2s-)q{mTJ`Y5*1dOjrp&83SeEo2;JKuDiU_aV
zKiS*KYpwFFKvOP2jaYEXGc8g9k=UFT#J@MHXgd6o_Cm%|TK^ZYWT7xC)_=$KA2Aso
zz+XROr)D4ET9^z=a(lZgQy-gi-<ZxX-;U<w;_KB_-vU^G!wPc4vYzc_m0HkYiZSU*
z$y|9nVcfji>Nx5F=PEFp3#Fv5$MO}4Mu6K<rSR<rcMZ_uks7R9?!X3}<Zw)C^0G0m
zfMMVVwxR8cTGgXKJ}*6fmAeKA3Q2)Hjp-}V81j<?4C{*1CT8AGBzGrCLe9rZiHA%3
zn&P@9{BDERB3%yZ6ln%fz}?>d?S~HIJ!(JuP4|`b23lA$rnm*z#V8j%X_WYq-*%xJ
zIrhFtJ4hZ>Q@*B#7O2@8ghHJ0eRdWgL<dpS;2BUwKCp~WT%%NG^MqLfaXA8n=yQN8
zHE1=SST?@C@+!#n`iO5BLB;~|$>neM#Z2Axts0<&(CxmtNAQYf@LO3M{Iidk*&xfJ
z>Gxct%hv^K7Wk1T&vtE$_V5WbGfLL|0&mi9pQpRj<XSI6ikosik(cuhh6=k~6$AY-
zBS+PtwDF$n-A4)vWMqtx_=j7D&gviJOC-$2bY3M%5TynwTDO;mw%pvxfhqS6Jta8(
zZi%DdsK^MGzP2>H^wyjB?p>>4jKy7va?;o8wnhOsT-h`Wpt*P9@X3<Dx3lS*kAM)u
zOve#<j|vHc@Z7T=%W-MK?Brv^nW|r(t2LZF>qUD4Lq-?p$yAPsWP4i6SbG%MDh`~S
z$Bn$zI2%r?cB0jevnUix;nqZ%Yr^t@v<`8#EE8SlRV{nQTlZj}ErG;m?MA4S2dQcj
zFa4r#%Sk()+hZLxQ+ytU!*v>D0o@ZYtGMTLv(LV^EZd*neLDKCv$F&NTJWFuTAogv
zNiW?Yl8Rbs;s^yromrphREPy4Wk4O~%jxi&+&oCod5)c)yLM7ty#bInZ(YJ_&%QMU
z#K0(z+uWxO3=BLBxT8S3=fru#3+86ifOv_945%osYo65R03tPKxAK!3VxoXhRj%{E
zs|#^sAYm$ZD!G0DvNa9c6_N`y<Lnl)X7ZQVN0}5Rg_!dw4IMB#zIl-k&qN{_Bm08b
zyFEx^n~hb@%^t%pvEoJjq;_G-BNF>YTI(^`GXkL^M=Le3yizd)H)uE7C&zY*GH{*K
ztUbr>(6}jS3VO<5bFQ+THdj{~9dD5skCZwT(1#R4WH^!no318eY5jQJayVi*)Tp$f
zG-&AQQ<j{oRw?FWmc9=4b8ON9od4<J-hiB-Lywnc_uumgyuX7-Xs}TEa)0Su+233F
zSHI<dgs;cMCJ5-y+)^E#58Ar9SQpm_a;8n(tn?TQU%X8N%Ah<baZ1ignGsW+kzS1J
zO-)XHa+*JCd(L~#sPjEeD{bI6qnb<U659a}ME67r^6uRkqv1XN-Ka~KtwjyC@_b#m
z30L=8!FxTqT(Z_XXYhx;cZ=HP+SB6($US?OJAnSD2#sVBZ5HPiF!QZIWb$NRdKYbG
zS8kJ-7coK9+LwB2`Vsc+bchP%m0282`xVeg>idvK{d?2Y{O*&u*F)_OGK609ddf1n
zMiA^V<v+_#VRL2leD8-@P1TlyB`p=AL7Vka?fLdQh#+z%Gg3ivErKz^`=pZCF@Xb{
zY{GcPL#|DRbAMddYq2l>U@ZQ!sB>ycX`c?;R+tr0owg_ecWg`kPh>mrxctr9feN0u
zl&-Nuq%1c$iRbXP^a2|oIi><Sx^(woe9*I~9U@@K{$Khyxa;bvfV^W7xKR9H@tN`E
z3nrSvM;pNZ(qYU>Tv{FA>X76hv_GAJGTsAA6E@IgQX-E<K^uSs!CvrZOl)8BgmD<M
zzJnf(A6%9`uU@wBsNefw(KwBM{fcSfA7&Cs11w!c(E1$h+=&gS@yh1Y-Q@~{8VLD8
z1mY%SzY1%9Wq_-~IC#0%+<XkQ?)G{WvOx234g1hD-V#2hw$Xx33PRv>oW=%bpc8CX
z6R{UPS3$irWyodef}6muk|K4QH<Xun!h~^nbsVberJG*6&X*{?SlVUd&vDA7TFfeX
z?;P(0qLk)^M%R4yqb^NoAiPUuN2p6`jpj=wjaoA~kltWxaYZY-FN@z-LuM%cdhp}4
zU`cr^RIZW?rcfy;#We=tEwR=`DCemPDpkKi`Qw+3KxdxrivURIraPeiHHZIoAA<9B
z$c-31mx>A>u#Kdj<ps8reea^CuY1B^FD>p)pySe^r{V`xOoEE%smGfVtiUwyK)j6f
zrl&M=<rt>dCQAD0QfKo1`PYpywmJTbQP7e|Ld94S6d~y$;=CtL1y^uGisk@)y4fJp
zgg$b<@uCL%?^;(^s0(R%x6Gfya?+Jt{5)L#7jz@MwXu`bj3x!J7{PTUkN)cD*tnN>
zIU<Jk)ezMdq8y%6-qs*tpAza*xeP{GA<DyzGAU;QCQlOgq^0_7x9<~Ch0ICyE^oYV
zcqJ(!4@9BP*8BsCaN{gz@U(UU^=#sFde&BcROjc>hmvCeM~gDl_<j=37!_^=5Snyr
zYimb$E_mKYY|E5_&3P-H{u{76IKy7+G=jeHz7d@6*z1twVh6N_6#FK5S>`w(I79+v
zWDEe-)IfRq$<E(nEB|~sP(^uJT&xz0U{OuM(8V+UHF>_TNRAouV$I+=cVYisM&*n8
z=FFM=uNYc?EaDhD(|EIiUQ6}<?4;#3_L;h>>QYFX?x(IdHpk6=G7i=|O`Acah|Q44
z!Yb)?2R?Z_6hp`OS3AYlj4b=5@;~><1Y)zJ*t)?+qwn^Q4bePmc~|Yb+7rvxjQffO
z_Xgnty$lA~e#r52+(5F!_RC#0kM0-Dm#({<eBO9Sb~p6I&e#O3|Ghf)uF0ivm~U>Z
zi>aMjICeF1fSbh(Z&hKYtW!5CH|tKZzg6db+R8okDvj4wTyr85ZO4|b2om;6lCw(b
zc)sK2T{~~P7;o@;h}{Toe;U+$!sUEm*DH}s;$lQ-WmwX#Hp3~V`O)*HfiXh3TV8HF
z*%F*K_pV#Zl-lnWeBa*WQJV=Js|w*Q;~t&p`j+N*BrMq#e&T7iA?~9Dt$+7~$A7UM
zrM=cp&Qr&ZL3%G_C9l0Yx^5quJ2n-7I*{{ZKnW5_NIV;4)|p`Sw6UYd=?B|U5xzq-
z&Fk=aiG2qp8BT_TI;kfJ+ETkR3GZ1FJ+SWt0b<JchR_HE0WMbsr}NoKm+@qJT-*DS
z$@LdP2@Acl*2^Pq-f)*@V23E2-nG6f4i>%2ymM>1m!SQU8cin1ct?}7nc7%lw?bS^
ztjsAWJKASoie(Nprt1qRz`)z}DC{5B4}J<yHa`e{x}nkUl&Luq%==ucfn$Q;H=Pmw
zG9x47@L>*8tP2_<@|-ohV%Z01Kr|+(*k23+eKAMzaeXLo>09D9#yyQ72K8S9LZG)4
z%iI{YHs}Dws2o;z_r@>=b2Z0(?2&@6*_LIFHYtc_X@;77<o2?6+-4TsJaeGqH`fJv
zc!h6^t|jYLZ!JAE59ELf7fJ>`xD>9e&#zOd8%ddm&?-X#%zo-5dE(qw+T>JLalIL0
z?(jZMzbUxKnEsm9r`q>A;Bs^=Y~A_JbtFoEJtnttW&0<jc$%wC*(i(l$g=K1+O*^n
zWXLutZDGE4mUJd*wds?^n@euk&THh;?~RXqGPCg)lXZ_Q5_*q?m6%a4sZM=t+`epN
z%{X#0eT1vSaOdEO<xZoGsEq8@BY2CTI9F~^v_5}XF#4^NUcaoS<6L1blAg5xVSe}3
zx{e#wVUdS?hjP?$?tYDgi}y(6lTiQ|Y#)sfNQ}Hk8J?k0oV7v%+5Hm3_}7QFy#_5$
zknNGYwl5kW&;H0Odww@j54n-5cc!-LGgruGq=Z)I)8{AK^__?!E7`XVg47{*`!apJ
z`)f@h&Vbc&oJ0Kt#6(QM9~<2nW(9f7NP;%bTYggFn7X#zO10IdRyIJarZTh0460*v
z`;=qDbDw}P3JTv)Z&#8x)dSCk8t0!;>U^Ud&7B@Pri%H0;C^yLIt2a@0()ms&mfhD
zS<X+|?!)GKRo<8g(os;a+&gJ)uc?ty(g!iqkBsuEE7*K*58vp!|Jt?A{?8l4peEJZ
z%Fj`am<Q^V276!OaHRZNJV=%vApYLqUk%IfNqb+(0b{<`OfY&weg@hm=WKblvj>HO
z0RYr;4@g#WR8#lwtAX610aCmuL3i~M-C$nrT%lf&!D$na$4x3{-)Gwa1%!H~t$P&T
zR&ix<u;8nx<8DKr-+n%13sm4#9a;|W5L_+-x-|_PI4n8JAC$WcG8Pk!XG}oPk!zb2
z(kucl6U7wp)LKRv-4%XAfBu8NOY%oI;JcGRs23Q2g88_&X^~M3h%{^?<C@K?$f#`<
z=E2Kf%@;f-F&caqrqJJdX5-f1VZWE=9a|lKrhKPttnE3~=VFCEXxfdWiulrM#lCC=
z_3hpxDtI}6BRZ7cAhguuxWeyxt8Ap<dBStM80nj$VoZJf+XYk|kP>KzG82N<AJcp9
zh@wAW{S@{>mQ5Je0lAgbW32esX9H6qqi@35Wv{fX3`)78&9da%;5ly5mmY9G9foyC
zhz%2W$2>BaP}=@oiT|*jRk9uKyNr(OHS^<tltV@vLJ)`ni7BITlcT$=;T3Kucajk9
zdrWv5C}|LR<&Htlx-aFG85=9+2iq8CUb^gyfdHA%FFeCqB__v`TfHS4GiRor7Ny4R
zFj15*c+VkCy{Av2Tz`8D?#i|M^8#fbi~LvW$JF5OpCV$sQCpV2q&Zl;i_i6}?F-!r
zc}?+nF8nH*run{*;RIRFncD2lq@uRoWLOYnP)*hn`(85Ko%hCJNfs_Su$(&(k4G8Q
zoQ{({eNW&2LfO4997fgU4SJ#*w3un{BhLD}_IB@w$47(@Iw{W9A18)7rTA&1hE~&i
zcSO#|y%(&Q-?BHbp&ZZ|zyeeG*okd2u)y(SI}M=R<`UQLG|E^B0@AbnF+k(Z=|oCP
zN}SGzgbj)zwZ&MTfsDiQ_!AO3Krx!k2zUBN6yev+4geb5T4K^EQJt4{lsNkv95p4*
zT;acwC!-fpK(TtyqfH>f4DP|!9T7W34*zKi_AtgkZL$-^>Hp6i;Pu+Em3kA55I;4P
zd62#`d~XB?SAV?IIR-?$uzf|2Vx>}o(%K)(w%gLzX2{^1VsHQzm<_H}DeZg;g!^n7
z0o?^i7k;yT=ynX;i<m3H8Hl52I(SRf6muV2u>PK#tha|Qztdz+B(4?voxSKgmERUO
z&0I-ZAm6<hrvK+FHj3W7G2r&fsO3QgHS5z>e&^KZ49wh=bQ87Zh|vCWU&CmLTS<1M
z_0Kf=?X9Nr9jSAhpsRNy$FmFnc2BC+Fuu<yGS*48KiiLRa58*y#po#pc}>_dQ~pqP
zPb0l{Uor;dcjpr)V72BhDqgO2{Qz9s*^~W9W7q|{L-<d6mJQFFzcmoLaj7KpcTRTa
zKfFF}%k)7;CW%;GBAh<3^~3E7rLm~+9tDU1ZffI|?8u`F@2<#I^0j^aB$K3>t8#ek
z-K(_j-cxk;!WA(#x#MH+5!j=R_ThmsNl_}yY)dIj@K2vDX@*O_10d3et?xuZt<>_V
z;^T@**vpQ0-ahIxTp-UsEAi7v2{%`5)5&mi{y21hqt9RQo_xVqu#a4GboD*z%5N_N
zn8gC7Qi6BO1%UV_KUn5|D*P68{l+k@xZHFKLR>k|QY$$L*HqO9qE-I8;r5;lyK?P~
zI=CRmi#2u{)bmsIO~E<{e*Mm`>}t(;c=}Cx?Zf8-&0-}V94!yx0R~)1a4B|t7br!!
zJ{}rArT3>$tWU0oDeMp5sNK%Je1FmEZsNG|AxA5>)IW|HJFdSki_im@|Ax>VDYqo{
zL9Gzckx-a##JpOM|6gfyg+1B<U~AqAchVsRA$s!e;$XugKvqrsXIY$Jz*T+h*OHJL
zMp|q9;}?pO-o|$CQm#=GJpBfPxrD)<3f)!@;DalBc3n@spTxHaAluWGV4AkCRQT<`
z)C4_14_D8Tv+|?QWZAPAv4pzf;^OKUJ}~Mq=fD-;ZUbEh?%IZihBBa+V*l;cg;S%U
ze*xW%D6r;q6b|G(p1VTZ`@ijxwJ`|c#Q~kH)@vQyblcj8do?tpWnhUjCz?5+K`|Iy
z<-fWgdU15A8|4>Op*bptwp;M#J#F$Wj%N$ws*OA4yAl~gDBgRHcLw8i`-JY^bIHlB
zj{8dwq<#FfFH%r`2!U9nA(5BT%B!kpXBLMS)bpZ@uZ^Kt@oVG{pMl(9>nI2EXb$?m
z8xvT#z%JTQhb3A~y}aq81F^JR_%lLOTKaPT_bI4sf@<h?(XhwTj-M3-Y21t*+ak8}
zeiHrTA^!mt?T7<%bzIvs7A_~ZhW7?P&71X1zUyUe)I$lN-DsSBA8@YnQNH=DVqyiN
z#|!p%<?FmaS|3hc&oXJ2U5nXhRA756pZ{#YawoSoVd&Ouf0hB;<dXmwmD!1zsBXeD
z^D*u#OGZ}saT|uE@|MRWHjAX8z;41&C{1il#|Z&}uZS1TqU`Ff&3mjEVVv=59)(rJ
zo}7zgFJdYHGRwf97#hYfvfZF%41zUIiw0#)q#3co*$>$GsSA_%w<j^JRE;SC!8C?B
zg5GxfsT=Ipxsm*EJuwkhz|akam>+)1KfKjO%C@7Ht83$ESQf+cGHpPdL5{}wy>?6r
znI|Ca*|-?Yle3NUh>?C$?oxs}WZvSWo~fvPGSa!u|BVlxUU2@Vw2I&yQbUaG#99}Y
z98Ue)Z$4s9ZA0P{oG=hkilA&jCMI4BYb{sDF0_q>EIoCCJ*&F&SWE;dv@n7nSsHyb
zVf(Sw6N#IeSV^0xCQ!{5tqyx+TOICFfT-Jb7z<Z741FH=Gm&AuGYZAi9LhJ(9mIP~
z?*itP^W)3$jdbeq79@Ipx=&Ry8{+?@yNy*VZZySHGsQY3d3*Q&Z3+WUz@5E?v5}}O
zJIMYty#*t=g($!e{6jFMus!j@PV-Y3Hw2qTFbZ0eV;@;xCosYh4BJf!o_KL;O-)7^
z+kBa0jxq3HJ8q;ZUP|Zydx@qour-)%kGr@`qQx&^7Oc^JD}*<rDGzCE{P<XQTpXK%
z3G`aQv>v*TQMa}mK?=@cCfMjUa%0c1v$fkuHZOY|YLV!drdvv(5!eHWG)6p|nPyZL
zybNImx{Z2d1Vb+-!vYG>qqgjos*P?sBD@~a)*}L^(`p~F;e^^g)&_ejY2kDYVd{RJ
zb%md2*<FlQCv9+al;)p>2xP1qh-`{oV0n5!=a<q5QI?h3*qrhH5duH0PZ&PC5}>l~
zpcxcoHS4XTIztVGHJAfyMymGq%lcdn-fP$8)+~!0MVc}1>*3DpRJoSA=~74*L@n1y
zhLL**9f(_)Yv7YE?3#kSm^qLI4?wnhiZZ%X0xz%F%I#y$>hD}_^9+2hhG*67ZhTQp
z@N903&ha0<>q_nvbB}7bjNsBbEF6&#&v&}lUVpg{bJ!~fs?P;~tJQi&c_mXpA&A)6
zm|QeCTiA22HAEVi&92a+GV@j8*$JYUG!w|`?q(Y-cHPWXdrfdI6L2&dGW93%yv3G!
zexs0&8ZL+*=7Im?A}po^v#mO}h6Q5wN{_gORee&HWyI*-!g_4kGUUTO${*Xk3;aPj
zx%RDLa)Ae=6@FtnhQGxlJZX%>Lef0BN2A17)5`lKCM*BYOH*Txtp7#uG#|K5h@N({
z)^6RHOT;13U(ThK`1h$6bY`_WD+UlZ?+a@ct0Z}~RtHoDA0IGWKBQrX_S_#8%ZTu`
z1BUBFsmVb?Azi{~QH@A>&Uk~k6wq1LJ<RJNvQoJ5V0(vluis&Nhw_0rdzlUTOO1U=
zbKS945!1Q(!hs}*^6i0Z^z=W3105c|glhL7rI5%Gl8fjXzj|t@nMeLk7)#J|zfQB#
za{>No+LAmBfk0r$-{oS}e{YIcX2N5sS7yT4%a;5DoCv-;KHx023mi>=xbz_&{Y&Wr
z{Q3+}?OVTbxWe4nk_VMVX@>`Ckx*K?F`N9Aov24#8P-X-JJ26qp1o1AP~>L6<v^05
zpmv=^PGR6aRImB4c5kjxtQy!|Qy~#-unAa-gyT-em*&-<PM&#5IrQ$yeqH*olRWJ}
z7~h$7h!7X<B$8G|&0OUsuO8z$c9_wT5B(}tv%dAcSS$qwDPAj7S7&r2>8H@j0b{=)
zU#lfQRhO7J;mciZtvNTEiO?oacM&|Z<iw^vz@@riFDR?c&CP_oJogK~52n}$Alt@H
z7<$Lz_kx3>n)}B!(xfc)G}|`5y*udcyrm-8-P!Hc>e-*y?%!W7_goCdXTtnF*U8E3
z4OL|a;5!6S+u6~wb}^8<N(Q-ENX}s2f(5PL%xo0yu-0MakgL<SVI1oAd%d*wp{F;7
zOGRicY}I!&)*!E;1F!N}6aGSviLBL)g{E)hB-sT~2j|J%X{K|5u7r@G#G=88cH!^2
zVLag?LN%ctSE{#jOCnuzDEDCRcWx=PQok}K-ddY#8^mZ)(DUA*Ugw8Ap&D_jfVVGy
z-<4WZ;^cWpv_susa!PW4M^Y{I>VoH}f#Ch`^p^30eMmx63(LDfKi}FK=eK%(Jo6t8
zYcT~J)*^GScQ9Usb6Apr8T#v*;IKZ3ee*cz{)%&0ub^-2f9FDJqCY|x;7@C*#wU~S
zZexBsIoN4pX#BAf_<Oy0lb=YL)fh+-F~F#`vg(dD9G9DPba6$$4Jl~E-pVG-PSF}}
zi`vcbWwCJXEXt+4*3!1RyBcj?rlJ@i9!t9d5!$?;R@mFJ^m&PG6&NXV8dXNIh3#Jr
z@I${qk0x^?ws8g9D@(4%bUIr2s!$UIbOP%up<i?xt^hv=0e<>RYi5TWGMdJmAfsC9
z?%p%9^htgZz)wJ;(H$i0kS60T+pnQhSyu4DZ=DdO#5q~IPhdt9L)k(d?n+}brbJnX
z$(fK`w(h10+X+^+OJqc@7L$q@W!tdMvGo}SD9&p)A`OmgS?KV)-vwut62FDD-ZFUZ
z685Z_cN)78)X`mQmpfG#>bW*^^owa9^p|VHG2gqzq{|s!xdVL09n#I`5_u8m9D+02
zfuP;21bjQm_oe7h0>6_;cs=v9%JPr)XL_4MlP6bOkjitaa^t4V?#weNT<Irs#<<?S
zy^yc9PY7pL-KWtaD6`B?_2!-bV)IwKCPVxDC|w>dOo}eCT_1ybS09bwtxmfYfvK;V
z^rxr}2b}kwJb{fDFUT;rPNsA$G!~Y^edp#3a0;ra))t>xEeI#VKlpZP^6;<%cUtHD
z)r#`*@mZPerukMl5>jQVkLaBKnU<<HcTe-wZ2p6zHwwYc@?9Tq>Vr1UHH)LTf7)%@
zE~)#X*L&7XHYvQDd5>0kY7|TVzuY#hBTHF{$U%H3#z@hB`G8n?#|zAJ9gf>3KJ~xd
zHqEzh7yjRFn+wenz-<%vzuY$Q|HEz50Jv>h|F_$w-F^C17x<)|5qz5+nqek~NFg&;
zR<gwyWbNN4a!na<<up_8b^N@XRR{RJxkp9zH2>CV?u}MJMJ5Ch)FLK=OZHF+4Z5Q&
zAiJJ8a3&`9{GDyEE~}$e!WkR=YDJa(APF=js`*0qr<ZP14L~nvI-1+Mp-D|xQ$p{J
zsd_GFK~&Qj*D15bws%-Zjaa(i=1fn~u6(@X)hvX6MD=Bvxt0~*)Av7p4bT*7;MM{#
zk2m7Ip~4nOSYOfce7x-Gm2*jP75u&~<7D0O_8$7Y_<SL0Nmdx?;LN!H7#U-mo2Cw;
zaT*OLj(g)9%rPxVSlsyN{ri-@KnEfntvQFC#3ycOr5*hF;r~ZX5X&i=W2Y>=pK_d8
z|5Yow^K;H?OTFj6zwy%!9o)9kEp2Tw?7KHH2ogn*p0g`y(=5~8DDGq>AnR}R-h}xE
z<gicjLbkEi5{?1abM4ind&P0)pUBjXW?&&Vr)rF)TRbjcDdOWo{ZM;6{VuP3Xv}kk
z32QHO$;JDm%oq;mV<D$?gSt+2;lF=hR%jABP{U#BFP+)E(nei5y*4VSPMTAF|2=d@
z;R*`H4cAp)Ysgobe)|YoM0qzOZYD=BP>(O9ercvtWxI?~GO16Ze(RvgQv+3oLNREc
z`hO?@H1~1N;kibK){i7pWy^`1<Nx4QEdxjSc?QrUpt6jh2AZHm#zN8%yN0`Rh@aVM
z#jh8RsO+wr4ZSQ0>ly#hD2W(b5O5?U?w=ze(QEv)w=QVA97pt6VSf3VeZxaxkM##d
zjxH^VrIoPtNpE>9f%M|7o35G&;US`s*kc64mF|oBu3haT8-7YNSxf6=jZ9@#ue~T;
z@t#d<s5HiF7gkdesf^k+KWVd&+86(qU_9^J+SCv%lAy1=_GQ){J-_LAE<C@yb=1Ju
z4b4>e%Oow4YH$4IQF`sVQv-PX^WmQ=R_@(CdEsX!`6Y6yDn&t3sl?wG`WYQU7eP(L
zS8w*=M=1ULSy1~HoR*f34#*<)>FHC6LwB|Tn`)b)H*Wps@2t(gFiGoMv|FfD7gI;|
zB}Mf`Z7Uk&cvPDFPmf9~;8AG?JSqb_Y@UB|1Rj;e|I4HD`9Pw7E_Nxm{(kA@;~`Ss
zus_N*WkrgwHip|08~Ve2)VD#xEbe<-{ewrPL{?B&QtFH5t;uO#?#iIj%x!W(`?L@p
zUC;~>PuYf)HhLe8Rv%?Jfc?#91YweS0F;WE{(Gf=K6g@K;D!m^FZ``J=*W0=D4zl-
zr-QT)TeXb{@UPwKyl060Xswlwm8hQVAM&K<G83!c*9uow4)iXo4OvW!tW9@yZn&Vm
zBYcUIa;a*S-)BwZurQVR9;u@5TT&>k3zyKVPmvV+1=XSkSHpFpoXjalCC9bA7j8;_
zAfEZT3)M-GM=dsk=h4TjGf86Mup;4y5P#>-jxjEj7Yjnk$g!4siRn5&b%FtWUeFs9
ziEr%R$Uyf(h{Uvs%U^QKh*(X+{nlHPo^I&72d2fT8LRX2h-C5_Wv*GwZODE6=V$*l
zgN&GR?vClu*{O&haTLxuu3C3RgWtti87_Fa=`nR7x>@`eBg1PU%&wwAibr-M-zSyv
z)8V~3ZHWxQfWpE#$0hYZmj*KkOl{8^wU-owZgoL>jfJPc(Bt4Ao(E|6{vuw5>*cyh
zYGm>yqJoCn9`NHKm@0{AH)^hspa;2mSht<dCDY#!IM2@~c2H|gm7r~JPc4`W!s9%$
zp-9GlBwCVbG7z9VPenF5xHxQ)yuTAOt7E@9sCz7Mes<YDMn<Q&g%pkO-Bxp{r7t=Q
z&24-5_y6%<IH&Q&>d(fXkJdd-pP|E}sQa77i{C=j6r9Jv)yl+EZYRZdBrLp6ohW(Z
zD3P%XVr#Yesk?8fvTYsR8P%E?l2e54AGZuFe`lcV@Q~7xiykZb&S)VyE3Ox-m*-$z
zC|U5pb4iXW!a+F;N3!<eQiuDB@+mp^S@|`G(@#I`2;T_N?Mm#d-L%PefqnKJEz}RI
z>yLMkM)^HLq8Yt`;BPG~8myCQiBMr(D`-5gSd%D)z*(7h(ldu>9~y@JJpFD`T8POL
z^3)dux-Q~ALMzC#5}ra6^Wq-WP*wO%M-Bo-|177YT05bA@kcOda&gK-F1sT?67Y}6
z0j9Vje$?gBrkR;cBS)HN15IsD(sbW9sNwL*(<B75d+ml?uc@kB-Ds3Ba@+m3;&_2*
zIpWYF^K;!@$I6Bejl<Qc65}6chFAR^P~<{LawV-tH&06g>5yg{BTaE|Jm2y_7@5{b
zr#{BQ>{39P#~QZ@7g;^-bv!I|MPwFrd|g+z=**SOerIZ8cwcx!UJ&Jg@K}q)CrY2d
zZisEs&8160cDvAh`Q?Q(wGv6?gGmHU26~^P^K43?$9C@OMSoMB0<<P+X09h5I`nze
z<L3kXGi!p+ZO^$P_Wq(NazCO%>LDki)D|lK?jZlwEC@atZY?X5KTXhpb*^39Eau*9
zb$RcYFRaRY3M*VWKtFzrTIkq2T-i_dazi_Kw{61bbKQcxmX>19x#7#o3lB^l3@1dj
zaje!}NcWnl#$gBH;U!mHYGlj^)SF&WX?rTOsW#)}5Mr{-{v_e4GuyYr3^#&z<*=v;
zJ!L*a`2?8*+d6uRX=K&sbW~rkwJBaNxYZP#2EA|5^NJAynU9-}*zgR&O}{0?@616o
zTS_w%b`db@b6Klf!^DzGAiw);AV|(|f@Jlm_Mbn4gr5^6TkL;Z;8ZnHwr&CUrd|-Z
z+Zt601!R8@EU$vWx~&OS;kdiR>0UYYS&|WZ{e5GsOtqVJPGMVJ+^{Bb4P~CDHf3W3
zn;S54O<wmwEGA9Q$ynEGHyEc$%+DBrN;e)Qw3ZX&n7^dxro0(m>Hn~FmmcX<a>wG-
zq-{5uOVGQeK}Fy}A7ARk;;9a~22zogl^!<MVuz1763EZ14F^0|8!Gni@tZBW*ARb;
zSfn0E>^d3re88;3R)KwYbv|>*?p=s(BKb2^)>)DM+d?%ql2g3R`gkY&c#Yg0LD5pC
zTC@At)cd0akEx<;4Z}LF3ahd-Ls@sAdwLxWt<}yHZb%>ka$PDMOM3d%(7pUc{>!#T
zcpVB6cW=FJ49PTGoXwUSs%R)u7?NrMxzx3CvMStfbNIV)np%y-f!Gj{Gp@+q)wUri
zqIkFbWOZ9&;Zl*-(0Djs#f26eAWq0QTLykXBi18@r~G?)zc_57P3J@2;C)vU%>N`+
zgiiED=<BAH4~jOM>`D-)2FlNwH!{nd@8=h{ezNYN&$hnCQ!Y56eY!T?8;YW$q6oNC
z|KNHqwUZMJt=ZGEKjLRZmeXB}L?8N@Xn*`nmPdghz0ed_WW-l5rmF1NE@tQjgLUPI
zM--J5+e=7p`lQ$Pz+Ity>6u0Y%v+9@q%%Sf>1K=TU8k`*KEro$F~zLJ@WIs9!QR{p
zaN=ajL<!LZ;jnf1MzrOs2ykrAASssa+dX(gcfY@8ffm|K#uIJhEoeQicn`2;m1X$3
zlUnJ$B6fvId@$r)Q^yCdq#<XmXOoh|5i0>?+vlHPDo7dYhXJ!sL&c>DMycIxiKANY
z+>{*VyvVkDS98>i8f}$jKL-KSuP2!J%g6fV%MJZ1Ouql>Wa~QiZHtMCi9)_rid%TV
z`uq%2I`8W*zfnUTWEx4iV?UzhM^J%;^f|7IA|?`~)c|$)oO;R)xI_yEWcSJC>~f*M
zYkU}+>hiF1WZgcAFG*{Dt0Pth!gMIl#=7Q);)CYIJD$XyLNjvkcu1#%!g&NyXg;~g
z%8w9kRUJ>KA2-J=oKrwhcFji;s!_;Mk$ZcE77rw&_j@8YGW_^wPY68M+=e@SJshht
zT@cqC@5s8k&{o)Bqn}eec{<!wz?x7Xp0|<O+DE4cD%%&Vers|=dn2WZz5X)9h(PhT
zwXQ(yj1nhKXd^(aT9SWzE%>E&al)pfdHV2=^BCdcgbi23>z~!ikDtl%oEf3>@K^)w
zbdue+%J1q!06T`N1<<n!`=YTaR(IFeOe7tl>MA*pN_(WFPv_-3+MMZ9RsDiQqdK(A
z)5H<ZNVL~WbCSbm3fzP6akh2B>q*opW#nk+@yy!E_Ow2W)B)X=I<vH1bAhJCqf+g<
z!1k$VV`SQN^YKZ7oNn-yEg`9<m?PBPRrDxZY37#;IRVH54UMS`dDRb~S`~86(K@EK
zE0F<H2wb_<+(%z*Jtb2|pWc<a-FhWppV$65vv*6-S;f+#7aPv&oH;_i%5TdQS)N8t
z#%)|x*8bTCXl~)0)_uF5ebKMa^2sxZ|7wE-`0+`jTer~P?+VD7Nh!f3zrfuM$bFLU
z(2jAzXsB=Ibrcfe&AA$bW(a!m!e+z6RPE^;Y+I@)BbS|J76-w2Q(s`|Ik`r<zMe08
z2z{y}nQ1DUw5AJ#^uaFc)!hK>^UrxOq_&z;7dm{T$>(@^3ouklxzgpaOvxxFEj2H{
zR!P#|KmFwZ*Xm5^<e5@@<FJ@YbL-{HTVSlzP(NqE*-s_wZ`G?IlC1uAGiymzJM;qe
z;B2lN%z;o(_ipF}O;8ZpXJV<@=^q~FKm~AR0x?^qf8H6XXPn15vgog0qUGOTGJ>}Q
zV2bJ|@;SNs0Z*9B9f_9<z@n%K_F;CA1VF`<p}XE|w?!MHhnR{Q2e!dfYgsNnEnkA9
zw4J*;dg#4h&Y<Us3c#R<e5paz9P)`q)a+?Vjo0*YDqTvhlrjbHw{+)1{mW9qveKVI
zVO+6%dyZ?*7U&oF``He7y9q%|G0c__h)N`_D?gZgpe>oG4|Vpk?Ii5C;_-E!%?X9p
z0NbOrbA*28tN~Lko??RWCN@GORS-$!4ixuj(TliWbHdNNBzF*;!+!ze|Ng8}!JKp8
zD%|t$Z~Xk-z{Q+@`QAqbqc$o}O|$rv>U>&>M=G=5tyLmPmDvSuH2&7WTlEes+|BE~
z+`f#5J_$1f2l<Eo);S?DQWhr)ShGfqTLOqcJXvm=Z49I~xrP2xL5#QBL6D*)Tppb^
z(H37^p3oYSPcUNS)`xLg!MWNe;jr*?#A3ainHFA~PFJY_$h8#OvgLt90ffu++PxS{
zYlaB7vB8%Hnq4o6Ac#V?c<RUn@TsF7t7TDINJA*r?psksRD(Bd`zQ5PQ>_3r7lUa}
zMgPO_Z3}1krr|c^%#QflVxnkWIW~O7=yED7Fknm8JpV6;vSa`**pk6f{O^u-nYjfR
zoQ1~eV}t0;Wcv5$DDkyxs?*Y?e1Vpo#<@;YJojOJ*-JsS2v{#aJOVe{@gh!p=~i~F
zNuiKGarH@>SFQ>*y+=$ExovDnmu_#L`(3=!=WQ{hlvpYR&!MDDEIc?HE+X6*szMAm
zTMf*p3U8P^L${$PHL8MgKn6FLs^<S$Gg!JBlC+cAwV~M33&u32bD6P42Z<WcBK29e
z-?k!c(mMhuaff|wGRd~gJZ9fCB7jL>@nQw1{QAHC%Ow%!WDvrq>7PkwM1+%X`6DNO
zn{VB=C#S$zf8E3<kps5Hv|AibcT1FU+pKu8(C853ve##mwQeaI6;p{MwZ3kJN|-_r
zc8^FF#1k4t6=tqAsTsl-34~~;Od;ep_4T!9bNVu2FX$2RGN$>=jrqTs^m$5sBb}(S
zc)sX@>z<EO^BKCbd@EwX4E0e_`9Fx$WD571=<Wc5zUwL&aq)_SHT&WhkQDOxAuO5L
z$p^EO@sy<_^-CvL4oT`;Da(xDQ(F_RE?LP=6~Y7Rid6HbzDM^UA`U>*g49WA;1`>2
ze(68Y3VsBH`xOonb-3;6@8$!%^2@;PJ+8A;KTYU<ysA}ex<>zGfJ2?t-A&w#xJi3%
z(ELI^5o?7cwoHClN*0&)$c}}(tR@OWP~<a2&5bV8&880EpyFunf~B!u6g;Udvenl`
z_!5(&)Og9sbq5>FA>R|5C8ph!<Ujk|pVJe{U)F<1YddgX5ruHAJoOXtNo|Dr@1Oju
zp@HkMPl|qVX!9+z)$++?=3jaL)&lszMd^8nVYCwbVM$1WE!uh?WrGw!w&)$qw0A)}
z%<llBLVO;K4-U{=6sXr<LS+RX{T4^~|M67+H^j2CH4N&QY<(spD~aV4P&^aw+e<~f
zw?vfVsP;W#5Xt4jQGG~>*0Qmq5&dn6A8NUn^<F{je$0@o7toZmvvSUR@prKh1^Ap`
zVWioFR@+>#-AM|cJ|i=?d1-#v>eW@E-3N1pG9e2{FRyAo67~3o!f~sI!eP>7(?p81
zhKfvZohp%j->xA(e*O^edV}N{-Qt8@Yh4NtDH4bQ!$z}0IijPX>*|N~_!f(7OT^f+
zaeGo)vEu<^axaairn5YF*<VcL;o0A2oY)9XFED-E``OR1;o^i1SKYPWUP2^~qa(Hl
zAWn9w(=Tq~Qn#YJB49&nMso%j4Q5ZB(}rEu+Y*)=J?}}kD?!tvw>2C>`&%tud!bIm
z4Lv`;a%tYuTvA$P?U|$-R4Z_-iO@1aYa&S4S`nh5zJxGz%stqw;m1uz!ySCbe1_|u
zH6h2O$)>600}npUUKr&~xU2&NxYu#IHu?BJc_5Va-8mscrq#BhyVctsP<h^k+MMxw
zG)Wd`+zKgwf$nP|+F055Av1;43AfSS{6P`4c4N?;Pb&0~#37beL6ouCulf>(zdf3R
z?n|89vXr0B`|~71IYW_C9?unjwADX<1_AE{nBVI12O&sU)#<1=7>SH~QW=;;3eL(p
zu$ElknCiB^mON0p(68Ijms#1c%N`w2l8c|!5-V@fXf~V|ZtO{1i)7z<sL~sqsjQZR
zjTuedPmBn#d!!Ps?l3DFx?dli8sZn$XFApD-U*Tad}nZ$5X!%^68f-M_+?6fOi+sd
z71V>5?6){xOGL&PA%M~o&e){%na8UwCp=Q=QM?D`w%+z(Nna4U4MurERs-L$zR(^k
z%xn7w?$cvY^gSgCm5uPvp>>+EqfGMK5L1|lpB3D%Ikt){0#1VbIqLGy!xK6M-lXt!
z)7T%e^b01j{JaX(0wzUtyM}u6R^nTuGbby%+pM;g`Sv;YO0QXyn$sH-!Op@0QWTC1
zDBZO{-GqGA*!PLjgta-798;<=SgEzn{1S?#0Amlv+v4@;OjQUxx_j87&J^;=Zb+?7
zjg_6RvIL8p&a)Ge>Ed&Y2}*(G2-5&Z{D6%6WZiIb@WyNU?wowAPp{l?mh}R4SM&0@
z46hc?KysJ9BbqWT!u%d6!!&`h`a4MWXa}$I238yhlmEvjJGsDN^4RlLNL=sbjrqP#
zInCSpzZ{sKHMmuN*4JpiNyZ`}OA26nUf4(m7O)21>jgoU-}$tYumSb@C4xG~0LRVP
zkw7n-XJxbLFYOJbl_g|z9;vjcse|kCuPvh#=FoZqa)UO_TgsM}KFweSv{p6*q$;`7
zG7z*~{*~X+n>oFO-_3NFEq6Z&4fQ(A-6;!|CH6`)#27H$!n!+26GRlDnMoF8fI3JS
z;gKDbYXo<$dzmFu)7P66FSYbF6hXPOtnd)Uk6Vlx5L^xYoXUssq&C~5QTr#0;l2Qj
zkLkvK{&LrmJsO<_5IZk+dd!L6HqX1tFkk>_2u9m%OYi$XV&y*#kR}EAEjX={=R?@=
znoVb|Azq!?2?~of6V=SjEQySzL|AAqqP0Lc3C7}ARiQ65&gdJ?#qnW~w}w-}qfb7i
zuSl6O&I(VaPv@#N8!j6+&TBP=$C$2VL)2PynitH747#X+lp|;_lpv}fCehjD^+wiJ
zN~iA~;2BTXm9?`1z8hHSYDacPOCe5*o0>j(Qn>sJHZ_@Q27!3Bd1g0S4Xg3_u0?2l
znS;jS+Ne2pml<d)bc=yvC=A~3SU%IPnu8sp(<QJn{<@(8{7^>d`kMv)AE4AP@e%<>
zCCkIee<h%oza}8gwL5kE`EOsjWL>}Ik#RD~SXmaOLdq6D*`hjM^ae7RI&bEROqzYM
zi@9KsMGLa*yq639;VxF|g7a&4R3)QQDY%g{mt9&WExZb>pt3E#qG>TPlqOq6?G?HH
zN4B!W+K0!Jybz7ENZs-t)1L8)!i2Sk5QAX8l~cW&HDOND&brT3UU}qW{Riiwf+#+f
z{f~AX449j%9V!ELluRZ3a8qq+AGm2z^<v*YjpaPr32{qG*N>RcO4z&6-%fHv+jo$f
zw{G!7B$656SN%P#X8&(L;n@+Z?EnF{BAfh#yQPvjJwxoruwTmKe}Bo)`&aMeEyJFO
zUfs(3@12@Lg#iJs7Jgr_Gh%xf4EvEWKX+=*Vu-yk0S>e&4cey0#BeoQ0@<-ZzojuC
zrf6Hx_ynybq*aQjf`t>MdJJze?|Qk&Fx^hZF+^%Y4{Qqaaaku8qih%*v|uW2Z^+&~
ztmz)H+d{URJlz6~^i=FEx~ZfjYq~YFjbZV}2&%V7YSP3=25f?T3Lb$bQ<gg*(n#-F
z$MVi6QC?;cq1n_HI&ETN!qLQ}>}T2gvnB@5PvdD$ue~C#{WFj>1v!=SLwmE|LEu~%
z{lJy+dC~#$rns2ubnzQ(;zK8gfY+5=HrQfjFSQ+$D}xBk?f^wfzBGnN9We?;sM<wq
zb>wTK+X0kS_kY-X)37G2b!}Kg1uGJ$Tahs$RoYW)q>(Tt0a58bis-ggP$WWXqJ}|0
z5fYN9pwTi!>)tXNRCXO|FvJuQAq+A^UI>8=gfI`m5D0Tf2qA%Q(H_P2NYClM`n}it
zLx1HGCzfkH!~NXPeP<{yW#v6ek5U(LKfTDpKShP<69dQH>qtT`J9JElQZ?w!R3P*E
z-9q`kBjHlo$e|q<J@oZ@N*y0|$6ZLwMF`aeR!u7|`M}H{$`d33f^BGuWX%TW<>rBf
z_Nk`j8$=g}4zGF`u!Rtj#X-RXLu&W!8<z3|G!G;5$2P4f4I$&ged2Tbzr|6V#aYcP
z7^X1VW}<$P<C)qAj%RB2Bj*LU!SU1i<M|7|>OIG!(pmF-cIivo*zRgm06M_D%8=xy
z?Yr8*h=g%U{i837!s%Gao;=(z<jo8;fCo~95+Th@p9E5pnn_`V`XQ`uQO*pGuIk4K
z`dVXTdzq19SDO7eKGEt1MA4H2Q<=u|HMKLdqqz^H*5$OLP+_bci`JanVp3~5hF!A6
zQS#KT%aL4p!X%cSpTjxaK69xCYoPc`%<~I(VCp6)@@ZvC7sg7!1Ap>V<2St2N3^j*
zVY3NxR+?BwSJUyX!%JW8|LQ&8+SQU9#vpp!;9gH!^OpNL@)bCq^UHjq-WP?QZ$3lT
zDFu`1fX2lsF(?AL{zf&+;?7~ukQFa-pE!**@YG=Xsbq56CqDKFb#R)rnR>ya!8Z!=
zp<9PVM#_l|52jt^Y1Qf)eWycIka#mkhey_-o$8KN&?e6G$pLUhgf7DfrGWbyn`ouF
zurtTJe-FYRdCu=B6-l?BtcPMw1EQPT*n@SKEK5HSVvt649|$oY2r(ZBF&_vq9|$oY
z2r<6`Cq58j-nN(kj`%=``Bm@mfe`b75c5kb;P`<M^MMfa1~&OXh<OLO{^jEbLd*w3
z%m+fu2SUsTLd*w3%m+fu2SUvMHA2h>63hn@%m)(82NKK&63hn@%(4$8nE5ev><1Fe
z2NKKz@p2yD|3HHIK!W)|g885d^FbBngDT7iRhSQ|FdtN5KB&UHL#O{hg84v#ndf|e
zP=)!R3iF2O{y`Py%}LDDK0c_zyn7n++Y|q<kzlmcq1&<$Ki)sid}exW*WYSa)x4T0
z{0A)B^=R$U#I-J6x_isxgRjen&y_cAb=ZF8D@4hPLd5<be<Wug@tnpE|7VtX3uN8L
zu7`e6mC^cGg>$z#Ux9|-ayjXjMAO?*g5#hNaXv#5cR`w&(AWADPp>{%Ex}dN3sEsC
zuS2|R(s=Z{j2C^!ck{GWoK|1BtF0otB8Y5-Vg@pDB?FE%x^a&kW@D9Rb<V${puS1O
z-2?inE<#9XXdaL^h>3`Zm>B7(h<w=0!XP_(ezbVIld|zl=u)KHbBCu(-@C=4x3XQk
z^kp+v6HwU%^kfEZ;OdU@tpXBHHh3cuXD5T;L(B7^ZLXr40GK0bQYCe$J~l7zqEQ?b
zTusU_7!>2RT5Sr##ZJwRJl?-o`I3a1{HUn0nbx8vz?`Qa(T^W4)RV_v_HaGq_?&h|
z`DLGQ<cH_W&ZREjW1)+&{;`a={;a6#H4i@bFtXnVn`0w95^>jqd6|V58Js5xBtc{?
zGTBZvE$z!gy~s5r47Jnjd;M1o=A`RE!?ousW%2RVzb9y>2L#RRel2Kb^*gESIq5<P
zY(wGgFsIng5cAPs^@C(Hq_#m6RLR>1vnQz^Cvr^E*9*(r2uX(4%`AA1^<b)LUoNUh
znvpF?fIiDDa;nb`<7kg%KF1$XNGAOI0<TveQEjM^<~U8_5y|}s2s}(^t1R8|l=qR|
zb_lJfdkE?1EcE|g5*@cnf0vQ;ngX`Gcv;SDMNSf>?~_AZdr^A2eE&^TUl|9XhY)7`
zBTe6HmT?mqo&7q9JSEux2?W}e=U*llGAb-8iH8PfOwQeEYpEfjW)91j^pFhRtQ_~R
zn}xm60{HcXnqNQGc{v{QoAqP8Mc0qF@#_ScnHh|tZk?BOc+3SijQtL}J-0zghXY|`
zmi>g>K+PH+t;BWNI}5?8rs9f=%(M6zxl2@cQ17;)zU5$2v4WavKRxbA%bb2FXjPYE
zZEcC#45ThfZOQ?Ebb0pFeW35Pei?U)y^h#iL;n~u`|y+VrF~yQjf~FiIKV4y-b3JZ
z(R)0x2>Q0V8y-s}4WWEm2$fz84ZM|pJ42tSLF$c*);FFH9zGC!360R?-sKb_aOLXO
z@m-BayNET6c*Q`%;pS#El^P-LN?vT^&3oS+J$>)lmA~G216OE~jkh&xz!e&My&=ja
zR&TjJ@?YC`w#6nU;Yi;$<@3Pz<HBu{N~<>~nQ~`*Lv|PtaaXi$gDE$(j%P&=vseoD
z4VoH=j~gyS_NFG_pP?e<*<nvok+3jHT}YP`$tkC^%iQHYEq)i2(c^I4LSM(i<k$K#
zFlI4DQbJ!}5i@wWL}i5EC(AN<mY*|#H-PH6AkGO(O#)a^CggffWU=~hRQ?HV6ZE!X
zoVUBC3m1bbzA!di^X9(%=8hN}gF9kOPDpxZMcoY?jot;H@7^tk-yq4`mZ{GFlnfJ0
zFOSOu`r;yVu-J7bw=2yafmc7G-VUJV0x`RLP;#f_YtJn^R?D_EWb*eK$cub*&7GpY
zJ+5uaROPOtC@Er3gO_ILD^973UEW()T;i`EjIatfMOWX35hCo;bupvfn%Igs$h^MH
z>sMurvW>DM8-!;iOGQ7K(>nM32!|GZzB8id!Rp(yPuQ|}=*HuxSGG8!4M>{Qi=m0W
zA^4r6C08I%B|kBufjnSwoUnJx?52Zw19`kDYb%U3+w=R<&r@k_ZEeHodtb^wzct!9
zKCdt1Urago8+{q*9&k|5#q?!(%TU0_`lbmCr6m?pGC<_<KfQu0Rvu>&h(E3!c6H0K
zB`G>WRS)#cOZDmxBb_7u*6%?$r}__}wSb74h<IYZ0y?P<#PZ$R(><v{%v_hOJi}b2
zSg013(sGM9G0(3{je2{Yug7w0(z^7P`<taFPX_)<UMA*u<z-I1m6t)E{aIe-u6A0A
zE`IT1Hi=rY?|oSXR6sO02oN<s`fE{R<l>^nQ_E@vf}*r0I{XQ)PM;sURDFM7{242~
zg%Ttb9XgOV8ro&g7KsWFoqnyFUAi){=a#UH>LU`|A)xjkf={{+Os5(LHwN%aDjAG$
zplz`2AauN5SC%`+;6BA<a*I?xUCxyq1Vk10k}?DNcfCHh+2tFGy;N~4uh|o0xEClp
zc8pHH3Z4bq-5YdC+J^{v7MxMo2fXmqcRXu640lq8r9wZ-x8hgTWxASXjwyVwL$A+O
z=t+-?lqd?*$44N6uRIfr`6@cl#~Y=VZBJWd>$+;?<dU8$w7cG$RK8)U-ljU;xY*t;
zzQ3)Tz;mJoE)`^=(N0M6I3I)+afbmhEBFb1_s|c|M$;K#%R2^nowKL4(p(%rXzNUE
zYQ1sZptJ$OnjR}PL4TVV;hmV9X@PXEBqD^$l+nzU=1#8Wk>zqMo}cdnHxm4HOJE^T
zD9vYHoGlG}sb~9qRo~c0CKF!{rYv{!idpi?vv=d5E1fj4t)?m=QD=k9nSNR?Irpg~
zf{)c1WUZc4rDw{Ch-OBanzChZlxHl?&&l`XwW@1GYlZ6T)MF&W7}V|Y3eD1&=@gxS
zuim>@+<jFa9LZJGZqEgg1HBF4NOaw{?0V0U7_VO{U?5$9nDJ|%h?f=?rgxbUqRtv<
zx{qlM5Q9oW+o$fOAH&21mGG`W$s$RK_if}rR%`EgX|wt<!%rVUEZ_%_gT9Mq=i?3u
zof|zIO;E~&$5;d{7u86mL+?SNnWMKwHj*q!Y{j>beP>Lb`!6WUpstv_H1s<wBR)%C
z4{_@?C6L|i#MPe48#*L$qBY}4jXrU3O&KvUbNIfPDKeIEHs?kA&b&uaW_jFvjxMnJ
z9i<(RY3g~u7R4hjE{b=4{uK%J{!3AYa{Iq2$^`sjMVZ+?eBw41zS5)s|FWpEz)G>X
zm0KLvI%-dPNLo%VX}KRg;Z*p~Gl!9%6<!$lDZ(1qgot%W+W1e#4unEW&7_HIEfCfL
zV!x}<>(2U!IQmJe(Qek-l=K!lKWMeY{uUQ8cwFu$^rUsuQXoJ`1*o8g-{z|{YIVPZ
zgM<I6#ni8Ft^o<@CiOS!*B~LiU;TQveAx&^r>EL|jAc5<aK~)dHt2K3Ko*=irBJt;
zC&5t47|w(K_M+fsiCwMLuzk{cSpz3n`;8#~)rlhCkU*+qk?@~~HOZ!x$KgpY8go#H
zE2Kalo55?FDlJ-59(fxCS}5{$$Mrev+Vq|xYRVYUD@L0bn-S3l1lTWvGWnkt?Wm`I
zT^#!)bN@J=tCo4p0^zIdYO|=C@)W|Y0{R7*Zp)O-6-X>YU870^Kl6S;nE~dUtfL@)
zR0R!O$j0x+;WMtwz$J0*x_9$UIySoKF<<0ae|l>{#CG9p`h~XJK=PmR)ov3{aB+mj
z2i9qwr}0qT_WU5kkfEA2exeS`x3Z%tb5~~CbK9;)YP9HoLr?|^1ZCKPhFb?Ke6uik
zh-}l`!>y=t-P#OQ`kFDy*XT<M1>2C+N1uFbi4HWSe0ny?Hw4O1OPMSy%X`HnLDt-l
zJd6u52AD)_Z5GWri-Ab`W2y?$%JF{p+h5o>NV;%gjw?|rm2vj);y|Z4{Kstr|6YQg
zu8KE-6<M*UwcSvG^yYnh+kKU`Wp@m*Vk&rW$QPR2F()f7lKLE^(N^da0uv$<y)fbq
z7K(Y}8+>sdQqszWlDn0~SsqurFf1VaA>b_EN|kz3cKVN=FYZ|D^2{?{kFs}T_?a_?
zn~t0HEiX4Kh@I1;LcF(xwc_&ayX0YWU+SX8`21?`_8&2_n-Fuh^bze0LMhqAqfK;s
zlg%{Otf7}!Br&2)<L)nrMLTKUCn(dBFduSU<`(s=8k=0E8MQ~cMX5vUSH3+}VAlX5
z^kQ}mooiAsZlD=xGi`<sP2bl`w+d0`4rJmgEAJGinOY*7^vTUbrscC=mi?}k(*y6@
zR^fwLdBQCYrQVjD{!iw8xmc9OZKGTA3YgOh+gpycO!BRxDBQRF8Grc&v~~$ZzvHt0
z_1JLt@<PA=5|sIy#0Q<Ur11BgoJ>41_?Sa>wzHk@cXF!5jV<X(oV&w4HS^x*va`Et
zC1}2h7smQBe<LWP^E-kvB;`=w(9qxY^wBk{=oPEw1~be7y*yjet+v+tMBGm5%)d?*
zVVWn8$vn1(rzazIUC6C9mG|&mnCkjLbB<H91+!UCpVLuZz-FVI5_Wk~cDmRZloLfp
zxQLN{A9AAYl$k8eZ))AmPM0$)$K3qmxX`^<g{750Bv>bs$Tebr%;aO1tZ83@QT<U2
zR9Oievy@VW`(Le;H4N;nqg#rksK4O7f>f&3Wyl>{rj8$KCwS0{6^Xm(Fo@ABZD6Gd
z_z_B>me+57v)uGf3;`d#|8u@s`mVV5?U%c|=OfXXe{M=xPz-rf_H=vyXZMKCONR(8
z=n&Q!Y#*_i+$Z0&>?*PawdDBjoHlwQ#N%#Pnm-}Nx2<`kwKFKN&RWf>9Pu3k1|PEH
zc_=5LE3=B1fR055qJ)GD`!O5X6kHDx;lp!P`$YIT_$nUrbE7AVoA*w5=$m*bVR}o@
zX}N{lW~GH2D6`*{eDo1@QbzldmZQBeco|C;cz!`<Ca$JVN)F&DRv({14G|3Gk8SC>
zxO}AB*!%Qk{A<<mGMOwiG~{<Ynm`@=de7Mf9j`O%0UqOMz<c`Zv-{=9bY?AwUsuav
zwDMw{U+tadG}LLcd#MBeQ0iPj3YA!~$6PK^GnBm>lqkiK8eefNdi5+2ftTzo9-IWi
z;!Z{pt*eqc?}zjb%qZ_JD`HdumvQN}3O)BxUxx}!54T197?@W~wKH_N_8^wrg}%^R
zx!lm&A};>7u1u)KU70Xn+_}PL@)K*-HCOYUT%2;V9BAWNt*>8#2Dd<wS{3kxka06r
zJCGn?J$cgA-uYe3pPR%VyN@*_oQF%3@Aoi@PN&@)uE2Q-wv(Hfhl^WA;(XMPPbqB=
z*<CTULlYuo9;@S!l*S|ELui4+)^wviXh+4=WjPBU9$a*8^Pz$;Mp>GQvzz{kramJw
z(IiyhDE;I)dh5YSqu$rTYT`DDVod$zOsSJD#bC)2o*zPD{y^}2C~(ZqBvSbu34J{}
z;V$D61Y$I~t5}`oDO@j~N#@Dz);#V&o@)xj4O+K1tJU{-P;Qv&z+6z}V^HfYYQzL;
zy%xOz$A!mp13aFwuP$8n{LP;6&u__P>3N8eW_jG4sl8S>`E?ryICyazCil*4D?!N)
z1Q!h%YsT&hj$qFAO&m6?du-#N+i|4XLNx%?*ko{$&^ILd+TFbLUmTXoOhJ|EkQ^DL
zPl~?Y5W|S(pCIGnEFKpV&t9D(6_ZLbEu`$;A6zY_UAHHDjP4pck+`pIi-Smd5%Sft
zf-uk(H67&TDw^d!9#HN059{Ew2Fs|YtwqK`jKgSoHhw35t6Y_$WBx)><_qnhSde5`
z;F;G)auUab3?8c08*W+5lfbQH&c6(H_$jU^Ki?^OY9!F5L)Oen>i)Z>^#VlEjh*kQ
zuz!7RvVeOoQ~|RoOXeb#6R)S6#fk<4%6ko#WO_ipv|l&QH-s%I<Jspw6u5<wC)L-h
z(<D3$64_gR7n=xsHurg_n(!oS?${iX-B(KU>)VZ=^&Oc6)$1G)5tw*5l&pb%@`-C)
z3QsqBe>ewsd<}}PaC6Ip5txV)m2rZd)%roEyWviAqCEVHRzi)*6@PyGoSM_W<tnt^
ztW_hDY{=BLETgR)1Rhx_@yKZ)^$OIEVw}Yw&SZ9t(VG{6XZ|>ZSKnYsj*P4XdPLjB
z;lR|)b)DOgeICusG7;#CKO}#B0lH%}mw+SXg7<vWo-l;k<`%jdH>vLS6g+#`sjj>U
zWi!~1YiT;7^{Ve_?X{ft+Xtb75DSH=vVn!S@uv#z?W0Z@#ol%mroJwVTSotf;*3Rt
zZnz^3BBgwtzE9u(XM-iGdt4t4VSCPasP&aN`qf>Qq6IF(^19rugf$}7svS@4ujEo%
znSz8nQxs;^03|VRHpKx-t}4@AF5^tqFcmXF!c4&&q4T`vFMs{hs^K#fiV{@AQwfhv
zCw*-YQ=HvA#^zH*w(;2!b~bTn(gze{ziY7MI&ZK<P5z$^mbyCR-rrm9h^s0!+B*6J
z_wVqc7$dS{EMKKgIDOtuyX-qUw4@sA5vnnZO-fUJc{DSPal`%|gb-mGPcLNBAv=&2
zGiN-lKK20)BEG;R4S<I-tS23UFRf(g>CZ)z$yzOcb=x9PgwK3c=Tr0>Lm1sf4Pl~Y
zHPgWFV-@J6F!Qc~`oUe3voMP~Sz;Y}ICjZdRl`v)CQABKeT3ImQsKBwXVDoY^BNmf
z1YnZu^j4v5B~fT=HIudnjSB+kB*u{>tgH!dYr}@_!%sv(1v|;&M;D_Inrpd5l)-Uw
zj?Yl(%8{i`1}}SRs_q&qrOPX=((CZ~x&*5sReF3>d5cd(PyBHQJ;GEC<r8d_g`1_)
zAjXe`3cu@l2r9#Np+9$y;RhR{pOR!Uv~_{Hu^gJdW8X5%XD0BX=S8#AZRzH7PZBmS
zpbl?iFNnBN;UG~*O?cPoER@0S^Ks^m<DPZ@J<gP5rj^VwGBPt~mh^=0uZ!>+-5z`Y
zBq_(Y!67(nJ5gElSP*oct@KY{WnMJIuNd-(^$m#xfb?S+Xd1O+eOY<tR8pZY3puP}
zmicJNC%0919P>*jW#hjfiN<%)=nCJ65Ty_p9N_$A;+f;@?$|YZH|QOM{B^6L{?6dW
z@h@vyeMr7|?3nwjO<(ofC(nxh(sLSni0SPwm-0G^88j|iy^R$%=*b;OjrJ><cGBzr
z5(n&>+J%RCL1dwj2eH-*Y#(4^Fn)eTEk9}BYk0Bo%=Y<;ZhPjv*oFE9aLE7Xx_2_&
zeLQkS@dY=QJ-K=EtC`RBCJ)$%{MwH0E6y#(<qVE_gpMK*F^LW)&dZR_ib?WOsO7!e
zxzktiUZHu;!al6G!HhjG$iW>?j&M2HRoHh#>qEi|McGxI#Bv)c^K}9cqL01YNBbC3
zd(p?nzc$z8+tG?;^rT|Pp;YdAN*{ZiVgIZN|IFpglWTAj!ksnZ7FXDG4!q8na4S72
zl^FANjL%WvmuH>Vdj#F<x(Y!^t>!8oUA}|wrqyyd^V$3HW0^x<o`uu<FAT6N1C`w^
z*stx%z=c`Nu583=LyY|=vrgi9MQ!EH2Akk4B!Tj%gfi$mqJG{aj_p_<e%E8j67NM>
z!4-)Vob%~igqTTZn0-Wy85*xFk~}MN8ZWD5pu%N>@aBS~B-g9?J|vg`=N036Q&Hu$
zx*|h$_q?DcD#u4vx^i<}^+%UiWt)uEAv&?1j?ay%?q)^{P0h=ypUi00mDxqiaV%32
zJc$XG<>!c5mg%{v#zFcB&7;u-eniA!rKqWgXNHVCoys$%4jIIyrpQfM>g92FuP@w$
zcSZrg#a1`YW@f`XF1D`U160^*WzN_;zwGVDGoHu6uz;F0I1g|}?=K00DYoR<BOCM+
zRr>PQuIyUM=sAFR`UeROzP&x%uz9q#+Ur=j9Z&%c8D5h)EWumhv20du)d_OYW3-~>
z^H$gR=rL@tw^QzzLQ~5iXXCZsINY6D^F5eE7Me`#C+vfaRvc<0Mh(Bj()F+9Lix_B
zG2>>niaq65V}QlyUvo+^#%lJITA8!;3E`U8A;DfUI<ddnj4H0`@oj=1jkuNGjYr8M
zsLQC~8bt`%Sx&9hjidgK#l;^(^E|qz<^8q~9>9uHU$>c>oZlaG55K2)I~g3w91u-B
zoOm3|PcWjvP)t*O=VsK_ZAm_)f+_jOk8dl?s;#Jcq|?`{?^6Z+sX#87az-h^$e&Bv
znW@||GnYYrZ9>W_sIc>mz0y>H-fUH=p|vDHa$H~U^~ZyS>q%Q*4H-2)M3@&z0+jy}
zHL*~A?is$=JQT^j*Ct3fc)QAb%RShPy#s>mgM}xP<fgRZ^I?_uJ59~$Mn*#nTCQ#z
z9`1ka*s<b#?(28lE8aAK^HpsLdp>rsW3JUMgd0N-&_>dFd~UtH8w<7E#xql^^f9Zi
zLGgZ_#&`SE8K;OpX#XvDrKw&0w;lC}IK4<=O`lEPR2||+FOiMRw2NRhX1fdexqpJI
z|4IJ9MRv3kY||%`+dFi3=cvV4f3YyS7)6R(zZ26e;R$>O<<%=RmlY=ZIi`<cGvA=w
zju{RP;D>>;={Ra@or$Gl`h+fcoQFNpxN>=>K;1NtgnP9u?ydwT*7DDO?XCo_&7$r~
z9lFavHl~@P-0ox&Ehi5ZOod$}5r3rKz6b#wQ9au;sF9aBJNymZ5_zes$On7-nr(3y
zb71-zicnk1APVy`+Z~5xly-;uW@OQK=Mo;E>_rX9AzFLbw1w2yT;Sj3+lf&^NOK0G
zHWw;){p_yvbny8ST}w__&5i)&OHTW-zaRr$Q8MxJN$IN}_9wF|j~vE;qTg41Ed6{U
za5}@sJUW3SaPVGU0KdAu)-rN}g%F?yzqn=gD&7<`xk}$We)iov@fIrZ+yyRzr^3m3
z@7p0j)b@*38(hr-7NDuOzZzVo-SdD#GH03!pG5+9CFuXZ?n?a-$l1&kG6uHbu9Pfy
z9n$%hqeX2|x;0=5qHDhRXIMw+L{Pa6L*O@Z?e+iUt`t-$1E$ZRb0)!y)Utm#`;LvC
zgkcy|_@|VVFl21e$u!x(T^!#nBRAW!K_p`7S{5n8W*nDTl3Pcbon>aw@NK|^I`6?c
z;<woVV>`-JG`sdGgCxMmaDt5hKwNH-+U|4Jlfa=gT2#bQh$TKc=Xy80xAaxnMg9P9
z;=1f|y`APdr`=r~?&@l^6p^lATbBnqK#0P|oZ656>H;h>8XX+qls-jI*_QL9K%pze
zK+(8K5AHnjuDg<a?2WsU)doNA`0uzYd3%BmF@i)Y(0YC?Nl#C|d46>3GY>9BJ2+r?
z`1Ly>gfu@f;NDpKPB2;ci2AB~1encQi6Qd?$fI8L?XjJwmHLF8>6AhC-7I{10PML|
zBq_xil1f{$c%H?;kt^${teZ9O9^CisekfWtI?DU0<yt*GSJwsq)TC2>_wd*cMW`Af
zhE!kWO<q>ei%fxTvFK&LEJem~lCAS1VHKMmR&Vj?U9bA+fF-K(PT9V#XvVZ>t_#mB
z){-quTV)yeMGUeG_q>gSz{_N#`3a@9p0>qcT6fL|+mB)zPkp(c*5RtUE@Q#{=Zm(~
z#R`*+^M%Phdi{ZgN>*pS^j~7MXCdsq{hHgdD<!{#m3imK$;h^-&;~TOQ96)WiG!me
ziH}+uFu@sIQF+ehPXCCr`uUXG7grw;)NEiW#&`7t|7J~2wt{~xBr$z>R9%j2_|YMG
zYNJW4pYWw#z-}7<E}E0?nirjNje}xC)_spW<aj6A(LfJBT3XLmeh<u*{M<gh<mSx;
z=1Q9`C}3C4P1@M92eV5%+cRisHLs3j<~rrDCCtX1Cnu&dhN=i(;AI64deKI*EYIg_
ziux2=B-@0XzjYNq<h0k~I^`|JX?pry*!PO~{u_hpQ&%Xnn!d@&<q#uEMvv})Ggr#Q
z|1Zpys+m=Ew6mth6O`SyRxVEUvi>2{v3fy@R@3)M2-iW;Tv)zA%BAPl72qg;j~esb
zl)q|o^7MrZ57&I>Y*^%f#ATLZfHvbq$6ZXaSh_8fLO`9JA!)Qmz_Yb)XPtP|=_;@C
zP7#4XKfOl7?qRLIt;n^r5jH2m?sck#SfwA+8(;VWG(a<;0V?{_8lV(#ZQ@{hrER9J
zpSnqJ+_!GE3Oc*J&E|0}vIr<q4`lE5#2~_Iq#c6rHGy?-_)ym&UcwOXZrN^2ayC8D
zwUHM>4&NX(7JTc<QLxiP6C?OT(bwR#$eG%f>WhlmPLUnbZ;N`&p!i~+n|}B6I~VE?
z(2$q-WvklmlOm!5v<kQ$rTkOL!Q!QrG{=Y|P;L(YvKJbw(igEGaSV&}Nfiasct-9_
zQ?eR(h_hya+Z7rSIExU=LFpNaUyRIfb)L*1#s1pZ1H7okj6JMNinF*e(X~G_$?VEz
zPnq|(u(U!Z+o{1@D>ImRoSS%hjaDj0Ja7&)KJ7zGoejbTrc70siC&f3=z@P&IV*RJ
zGi8nrG!m-pYO0tpVz`}AQ04wi`Sog*??{X<FzB^V5vje<Et_M`Tw3V|^R!Z0tn+PN
z%DxXbDY@U_IO)Hbw^G0&-b$N(T8AHpr8;9%Ff~!<qN5d%Id_tB5xmLRXso!oy|Xi9
z&iEgx7<SB5(%cnd_=H;V_%~h+DjyJfR6dJ%HJ~?-RoP}{6h@5?0BlY?A8mf+t)%lF
zZzbp-@m4DP#apRjz3hZggZgyrU!uZ)nlyB|GU|~W#n`baW|g>1XGnim6eN96gb%2!
zbYt?4K+k2YWfw)K<{p@X!Bd({y~#pRjrJ~QkPeYSh6SE;(@jl^^BUdAMRN2XpT5rH
zO-)Qd{;`kUebVYLbq-$iJaR{k63eN4_T39I6_~$QRCeZ$Oa3MK-&!lt|C_avKj*I_
zYu{Ka!In%1zqH-^6|-I}TmBnsCC^2ym27~ulGPh)CDgmtO6RFY9;nlr;7Y2WpI^+J
z`TakSPWNAsQ+((O5LQNUb>_hlNO&MDm)td(@VWF5TB$rN^JLi*a1kx%YZH>5f8&|?
zESgV)6sfEU8Kl!pZJ)H>PRL<D<HgMF6}{?d$+2NTT?n-mX&0mR1saR9=^^|Rt0y7r
z)}S0qk8PkGettdq0B_5Z)4jTGsE<t!^hdYfqy_B51sN>yZI1rh<vH^o_L&5$Rr{&I
zDqfc+qnVShv=B~V4^Yub>jjtjNN1rCU-=|QNYlt#Bf8}S2{4I?Q75Q!JvP1<HUO@>
ze~_dar5tLhYH9fljO-f{;$1$SJlg>EVj;BuGBls_%$3<Tn^1?;y;xloLL)6h=urlT
z{t9hcM~4&%F^aw&IrVM903$qD6VJEjJQd!xdYM1Q#`{@voS2Hcvm}iX`4yHtT5e?r
zwFl9Kbmme)iQ=VIO7t;tEYtboxLu)9WcR(J&0r20wd7-gk8IU<rWn*yx`D_%)L^_Z
za5r!TS}!DMf*dUI6-hps_WAtk*5Yp^M~2nLw9HGL8YXfTTT(tB8|U+~V#%My33_e=
zUePnq2AQP03x1lAZINc}9vZ(-J%Uje3>0tPT>#PDovWZWoKIv%k}9v2g`hOASj_y!
zQ?^&4WLVo|eBfwntMuyK2klX$s+Kk06x@m_TQngq8VN5FA=fDFI~5Nd>PNJR4HQ<3
zN5|(<-C6|yrl4oj&u&V~_ddA2>IR()g@|OBPcG7lGx|ceP-b_|%9ZB*J2V#>-E*vC
zcFLplsM#g$HIyJ6VH=A*lzTugz5gl7c^SGqM*2t)M3&!_1y%L~R%&s6{`h|`W>Ch+
z011hqS#$Qn+wv9|l!1h_h(Vd{=AXM}!%I}YYRW);Zy<BG)Y4O$iQ}@Gn>)_{_vQX{
zB(h%_T!5g5DNnM(%6&2!!7>)HcGp%pm=e#FjpuIW_7>M{Tag~t_`?+i+pc|0nb`sF
zEq0Q+%Dv=3Bk@Cl<yFs=#B-enQ`)k)sl=n&{Ht|!GXXv%<Kag6n5<^k_}cGgv(%Pn
zwQ=8}Wlb39#Aq`<^q8;&ySdVj(@tI%WBRHHY8SJ9vJqbi?33EH|9L4gX1zXK@u)zO
zHaz0jcT`)2<$L3`n9<H-F}yjWMVt`D)&O@BPp`YZfO%V70_SDu&bD|L-hI<?b|Wu>
z<X<cpq?sm<+8@nAt*)Ou<TA6qyY>Vp;Cvl55f*DjP+oQViRGnY4s`7PNjy4tpok4<
zx|C(+y+MV@o)JEK)YA&EQc~-CJhOB07QodofH^DKSg97Rl|Ko4GL9i9PD@jF($_|u
zIRL9Q(>jxUVAG!Om?>qcjejvyqW<$2GbN9CGo_iaMa`6&O*1k6{@SwN_dgu9&&$iR
zWu{KAt)52Dn<@QU30mOo4>GhON*l3aZV@vj%$#BuFU{F?yPMA%Yz84nZ8l0#1SB$@
zXSl<5%_G|XZl>fxov@i87S9Yn5wVd+T*t7#F;haTNKt{;8W7dl(+v7dvZ)G?eveUl
z4{48N#)z)&@&-K=+X3c;`nw)=u%X-AVA?3A!#vMa0+}FMX{vfKRx)wfHo&OP!V7|!
zl)hcyzf^$xIpj=3T0dRn?mV#Vrm_ZfUN%tU_bv2>z>8~fGW-~$M6+}$#Hh3OIU@kL
zeTyc~G_btpw!;xCv`sZq>7(7!0-RujGTBraz~MmyHt#OhI%*%DB2RROddb@4!59aW
z^y&{N^5Eq4gHSFY8?2-ZrXX#nbBuxgPu7)ae169XJ`2q*55o-u6A(KaLg!SPo@PKV
z%1yd;=LL(uui7Yiy+fZgq>q|O{*tE-Th_gcf66NS1{CQu&OxCh8Ltn~xkUuSA*pf1
z_2yznwX>M>ozwVKkvb*WX9X$dCqa0_UAzyJt5DcmA;S@|ditRnz2QYMD(`)u;cn24
zvz`0PyRNHo^Ka}D`~3vZz7`JN7LR}6>ZS^)6u?iW;DPTo`Z=<N(=J3b!EMxS$@}Em
z7xzbxK*Mje6%Lt-1{!dPbx0Yxl$Oz&!q1l+=c3$FhBtTqzL`>9%4FxyW=b1}w8wY+
zWQf>$!r)Z93~M!|zK0<nV?_qWT?M95ISwJW(sMjnkpG;>!7D8|?SbRFrtUft0?T;K
zo2ABq`FfmQe{-THJ9G;%Ci;Tg$o#zM`SU3Gj7<{ay;<Bi>Te(bNBvE+mi`uy(z6AT
zDAwkSfVb$?o0tPwy?>h@-xsCIif@OpkKYM{-aVg&+2}S@rPNshztlkqidp{=80#Mq
zSGN{LHY;&!Vh!sv?IQ)3ASBsQJ>cZVmIQdAa2iu!d&u?|GcQ7;^D~`tQp=nr^}ICk
zi>e<n!B6;Eb6ni_&>hd$KczY?QPneFUmo}DUp_8ByzJ0^RTc*Qcc-{vy{};wG7{?a
z05&*CmE}NpmdmeSkOyEQQZUG9rhWCW&LwIOlSZGF`eYph#QP+_jB53n{ZrvWj2{L=
zB}K&US)>l$GCwKWg1Hy5FdrzJM|%StZ*5wb-7jz({tK#d`efD~jHJ23$pZ~W{JpH7
zAWMeW&!FZ|HLFRC549(1jI_C8ff-bDY7D<S!Om9w%>xKA=GDcN2LCgYh;wVayYe8L
z#uR&nwubKBTTuE$!Hdr%kWs!BMhgau{YndIwo~;nLv0=Mt5479_iXS>i2Z1vzQ~7w
z%`OJai49j3?2FEVlU7OtxfqYqxpy$fy7K7FRCj|*mak?{>)0op2o5<b#P6=*w^Ti{
z<T@olo3@(FH@Mk?y@mv~GNWe58y`bCcTOu&9_ss(llbaOnYhAq_u}oVrzXE?_)9Ph
zK_K2Ac#Pw!`H{Be|H622(CqK*YOYTErXPi#-Y_(tB^>0aql>~?05hiaQ86roio8jX
zXT#a8iE;~Jd8R#aC#sQFR@9B(f{?q6&QKc}_h?42JpVUdN|438lrH|_r4;p!mr}7S
zgP!U$Jo4yq68s>fr)WV&2227#t@r8s!^5k2FzOZRE8fD}qJIJ&kLS`Y3*KZ4w@AO;
z7;M>e1MY(0;XvN~2d#`?^}~VN_wlVX9i=b*wEP6Un+72Z)%R?Yi^DJYTjrZeg)aaL
z94dn!&1~V+hF9+~;CA%Y(c5KK(Auj$U~v8u)<aYsn<0_c0Av7e)90gY%JL}en(5G;
z?Q^5Ag}v^1)qgkNf(W|=Bb)`4%+lSE7`Kh0M7fPQi{bnvyO_Z<Q%mWvTwrjvL3MCd
zY0`0dp*l4bY2zG`%HtV`>awA=YN=8z0=Cf##ip)mQ;eU#KUwxaY?zo)^1rv2^ZER$
zg7YT-7JF5d#{r8t#a66L+!zot*wxk$?19p@8<6tYGEVXR;#LegXEe<bx&e5~*+WrJ
zs&<iA5M^1-G(X{X^z7h(v8|ycA%?BRj0-Uli8G_>(QBI^sJ@L3&cKWJK_1E(Y(p3m
z3W+lD+y?6&>vC7CSFzux+v}!}oqD3T^aa@$o2yevKb|mNvLC-Xd_!wpdNO>-VNU$m
z5~K6DArpyr*IX6WNq7i7FmYIq+Pfe9BcJCtRK;@x=nSE+0h|+NPIHA?xEMV1M|Vw5
zB{4>%91a}JO&*vg10I=#y(Ey8k8G5l{5!7BV>oN6#)!x|25)=J-)or8^u<nH)FBeK
zWi{)eiO<$5g$@kORYk(Fb0~w7%93Q)zDUOFkqmWIBq)M&GAT&&aW!e(IrUB2`k_8{
z?H1_fPokJin)tZI^)fq>+f-KT*&SmWYZ#ZKwW~IMg8s?rQT*}d-Btn*Lvpr&QEKHf
zYdDbusIwTO@N7G#q5((7fi*a+*S;x2p@LU9E!|^f^(nZqcwBZDo--RWi;)+JAAGfl
zKl;B>4a?;mPz@L3{rGnTX6*b-duQeLzc$1t-ie?GH(?*})SwvKHuiw$=bJuTpW0RU
z_;!11B9HDL5~MnknM!QzzZj>$PZwB}i?gnmMSP!(j65fct~>R>DxWFa8>*&|HAcPT
zS%&v!wIdAb_d`Y-_ZnU~6Ac^wA!Gb?thCHDsInRVbwT`q?fw|e5`QamqPThe*~aqZ
z7Iouf0@Il6lV0r;(|3X#V>I|#C(UKzdWpK0!B-FQgUR7OP(TlNT!m1ALPG$knWLd0
zqD9E6K;=viSp9AKwbdUOwJl=xS0e8hc<=MZfHyRk7G?*4nwk4k)Se6ep>bf+wCqk<
zX6NZZh5Lg<1|hsfoCqCPUIrtt1jTqRiWnEu_zVS52-LW!*-veUEu%Tkylmkh0R5uV
ziWK2|lQ$E!dC=T@bvdU8`28sk(nn(}0_XQmUIiE#;`bRQ=6J%kDMfLpYD*vaaUL*g
zwW+O4TZLIx;N(+)SK64CiI)uK;Jd}G@*As=Pt`uqnOWcZ9zsZj>PE*=%-qVBrU#n=
zAtZdGG>4lqUZGG3x;ooc=TH1u%*@7Rvr~N<O}n0ca_l7rf%w1_`25B4(~3@+|4`4t
z`;&16@wrp2exk7xp<8iKvzl-Y+(w8YU-L{ErrAQd9jZ1lpE!JqhqtWk9R=K&k&)ik
zb^?;nQkDdB2EA2U1Sf9<5CY^!pj~?L%b^*^mpVy_UxkOcZ8)8klpG+eY^`=SkA>{m
z>h8?SpXA-wKWxqkBu}JyqLo6i>ri47EjsZadeBQyBVJl7aB@tx1GQ)0vm$4ljPndd
z(RVTu@55`=y}c9s`@{6NjrBqs0OliE^Sx!(^j|FB=`H_Pb#Ir!cX@Et@@2&Afr9&<
ztr({}bhA=PYiGDRTWcTt4Gl^J(YS|Dm|tftt$*}jv`sBF8fNl6T?xd3CiZ41DNw|6
z!WFD^mZi6)swJD62YIb7959qq3T>?1@n7I4pQJ*!e1iUa)EUEav+?jJ+zlky=BTrp
ziU7e-#h48}af->#MsYeWMtEi9`{>?YFOWo6(QaR?J;G@}Thl1c>Md(kbJ|ztuWeQv
z_xtAfR{M=)dw;PEsf#|#xUF57<G)%25&q+I{3Sh)t;YpmW#DAov&;;uQ|80I@;%Fy
z2LY3Xmu&?ds=N*cV55$N3AnVP@<}GQZ7A0iPo8YtUnj=W9hCNYV8#TER8HOiq@9A!
zb7%Y9Ybshv(Fj7XIF;!ga{5zAIfP5XRmN7loZk=iKlG{JN$v&OvvDhzm!+4#GSt>^
zYDMe)BRfW$9YPc*5~0}a(5$)BM+KKHsly^BKjFAXPLDSkAH+y6c*=WXh!#rO2diCc
zRapFnn(_=mR1>gB|I^64)u5V*_<A1T1j~;&(j$C+_CV_HljWW%&9forlq41hAfAC7
z+y+@tCL+4oKV<Ox_|yQfi=U|qazM)+&Ev`0UR!0@quNIT|9XjUO)Qi^`ah2@v--~~
zhX_a+>%~fL=Jh`I%O37^+K~ui6zo~6u#8}0McVllQ+pEZiqfA8d30`nAa1=&wO37P
z!g?|0BPD3HeQt_j=Lv)()J7MKP-X6IDEN`llE!IYhL-zg&e*7KidpAn4XJYxRvR=}
z$->Kcr(WCn?`-(JS$f>kRr~yTY~UK?QS}c4>AO#A9u%h)onB^6z{NSnj0f=D>hhIg
z7sJY1+qjv@KEuprAEnAgbTHNrp(UY!6*@{8%W;@X<JtG)_(PUL(ScAvyYo}!C~Jj0
zTFj8Ktgs6?=4}|MZwG<vc{qNWyuZIf6yc7e-PxVnGG-6qBv(G6D6Ap9HD(2hmQ^1^
z12~69_fi6l$t|pW_CT3gdOp}4cGPg=;Rr>oC@Sv4@hMlPr3jTiJ~%k2<_~|-{MUD8
ztM7bFx;#Hv`rmH{Tr9x2sZM{TaTHG^=>zBHy$zoavsQ~jLk=QI<P=kVVvMvyNb@bF
zBg<w-nvya}GI&-*=M-3%kf)QVpqHJg;3uxOGs$}p{qT(zfKwsNd9>WA4(^h}!EJ`-
zb7^2P`=ynyKsCQ%^O@RbJg{$k2Ovu&@T;Rgv%dRaz-rs2CMZ;HmRAex&~3^$s9zw^
zl*+$lVi4V6{oL&W-v=Cwx@9DMzc-q|Dw19WjFckjLjla(2Ru|~wVe%PE=I_jN5z9$
z-%tE7b~KxZGt<25-QONpiTiw$uwniCyUl%oO9wJDx@JsgskTveC$E)DU)A1l5RBVm
zq>pilNyxw~)a+y^iwIy4jk3Z_w%2t!5$h$$1GGv*Wh19Z+gEuCGbJv%Rx~pH4HN6C
zcvQ+LIxAyESM|FITBDTe+KJhxRM8AR3aYbxYi~j%+9CNH-tzU*ltk>hk2ofv2)rjX
z7LWTvVRt+|w_bjcU@v^3P76g=n~k;>5?mE6F5*33$b8e0gwtl|>S3ld=O#5bT6rLp
z-RS0Dqq>K26ZuRo_zo{%1;&p5F@G9A3hDzEP9tlciCV9}=U4gZP1ZvE3@&8w=hDYV
zO((r)?v$Vi>K{$N<2I}63Be6W4p;bOplo*vKNdn#cRb2dayho^F!MAejODn{o`D>f
z9Dg>u<-E*Z4^`eaH^NXejfMJQ265}dkCrjcD<wI#4-s~dNMQmwlRu84M%|eyADSUv
zQyiDIdW_7l4;N<i2S7HY4^IWK_0ncr`PdNaM490&yp7d(j3nH9OYwIlH6>ke-!A77
z-ib9a*}<LK7sA7#TeaEVJ7kZuIzhex@Fr!Z_~ar;-5<`xalom0dO`z8sAUN<)5%>8
ze%=s!!irvI@Ni0HCB;%YmP>Er=}4swk;OvaX4UoByOdi6$lN*`LdR5ES73Ir#5xZT
zcZei>PtOIQT(+W#?pu0(Ew<UUJiU!5b*zrPyo|mUvfIiqXdn6(%@3B4)I-a7ZD^J(
z?zw1`)54^$wq92dUB|h9<=mmKTF2cde<;dN9k*dYpt$_DH5|z}_ThuAPAT<a)Cp#!
z&_M84GQsX>CJpj91)m-5YzWr&2IqIuR{WIo7GZi9&yI3lI{Q|SpsT$-qmXo-Z8@lr
z9rix|{6F4VA!$zsQD-EPxiCC<=MIgzFFg<DN{aQ=6flhJJWc$k>Et1fr;knR<U#ss
zOJth?sdSi!fFL47t7@%~C^bL)Ftp={9#t!Z-?OoeRjYidRP=rRz61&gflfEMV+;uQ
z5=@~8csAP_zmGC#BU(FJsyW_cL|<z-Vx7S?$j>Exw$=R@uJmJG$>FPmV|FVnBg3c1
zYtTP-I0@GeUCkBxNsS0SGE+oZM<>VWD26IHVGxOOo(7Y<Y(Qn43P^mOe9?JG0`@Ve
zx5s}j;Ql-ni(kS@C>|_h<+W9k(q{*L*zG;H9g#lHZrH<T%$^nxRcyXuKdwy6@_40?
z83bJ=;#Ndw(_zkd8C*;Y&JNvome3wVZMGdrJ;co~G|6Az_jDafAMPAvs7>X+&gYly
z%}`t;=Ug9RztrKE1vomAAW2EN$^VSD>RGzOco{KJyQdVU!=&0Vv!G7bz6o8elt^3~
zzuhfVGx--2?eRZs-f^?I|66Z=g45A1uG6bnA1LzW?XgWPyd90r_=kFS*X`Gl2suMA
z+XR{-E00CMx<5L!-V2}ng`667VN7fQ-B5Qpu@37s`jb{%18^xqqQ*6LmM~MmZaJTr
zl&ka&;r7(3>si5F4v5J{K;b^C{JS_*i@|wOH1$1r)F3Fq$3<1w{Ly&91v;g2sNdE$
zOvZgwEZMZeeU!|+47lA{<+14hs5-VSzeaD_&fEJN!^RZ<Y8{`#s_IktHU?+=j4n)1
z9+ls1>k^OBQeNY1Z7*3-1@5kh6^dg=NnfXT(^pf2!76d0DZ3~###kZDv*PpzlAXm(
z^UY9KyK3rBYlgtCIbe1>>37z4yX)+rZ(m)nJf4-+V&!{oWE^;|?+dkeRzJOl-91XV
zm2MQvNDY{K=8XFmZD@%YloH56eRoljvYWc@^r+3^)NFc33?YMn6YR-w`l;=Ft-m32
zYN|46peL}NhF7irL~q9u-ty%MNzOyYL00}EL`QnrDj6%&Y0PG~U8Z{NHdJ|PgIany
zcx#Z_w9K<4$?NvHv0b9iJ9l9wnH{X6Mofe+RpE&zYuLu}Jkv}8Y(tDo#3FZO=RBah
z6PlH^P}=Fv1G+jJZf$%Yplk5UI%5O?T80ziO_knljsnVX9xjoeN*To9MVRd1uhXTT
znR!l4#_{{hoNFfW@HJ(HFk#7VLn~7ss=}6%eL0icr817qsicD;Jh}d6{Kez&E9wlI
zU!@?tzq-}0MpDu|vu5tNT@P4?=q5T%<n-sfda>@R{q6iEh~dh+Q{NBP&_+M1_fwtn
zcu-6LgK?UE%8?z2T1c4{71w<fd#lZ~-X*6emg$s@x0;g3VRv&K<Ed4Rre&JI%E$l9
z1@p)m`okK{cdrZ1YaAMH-UKRKmZhJ$>{tN)OL!lHgW`Sve_-!BD2?4kZ=eFxR}t?G
za5}(kuDz3-=05ryDUzizPVaJo7!6hVlc&sQ2TFI3xlevWugz$jt~+802)nO147w(R
zkXWk6EfN7ik10t#)SNI}E6w)E);`ZIIyV-OJ-P+D^%Li~D95dpJ}{1C%Kc(;rDPK~
zWmYntFp`>08-0QIvVs~O_Z;KlJkSc{DlohXL<-dp#muV;el;^uO-(Ij)<z9-Dsdx_
z+uu-Qe5fa>DE0h)XR#QXvq+Bq_pm1x4iJGJn{MABzjLAJ6tQqvhI<B0w}19c<M2$|
zd9N)9<&#8*WCXRoM6EL3W6}TgR(@*J{3^2nc|VbY+i8Bz2cE-z@W2l}v7x5XGiI`c
zI9!Zp4K?FgFqAMaDQqguE1Y!)iHE$_ak@^`c@??_6|f^P(Fy~*lX<-kEDxnqZ?&1d
zD)9$6q(+)x3yV(3W1ytQ^6R?w7?&6J$<P+ZiHWf#bBdtK1mcvA6J1en!?+!d9K{vR
z#IBz>AP$AkihFx|XS%i}{#m<4DR1DX7&r(kQ4X=4C(~uA#-vBXGxza+?s;l<Uhxq$
zG20iOUR@M{J6oRZtp15lK*fwzKzzmR2eHGpp7bO(BQX~#nZdu@Z78^6Ij#};Mr;)t
zlt+9VzdjVSl3NLPs5vQPKkr->zPwzR;EdDRzXrNw;>Po<&H^#R)ga<aEOyDO7qwZf
zr6;nP(|&TF3u;0cdREe3$l&Mp=M+KX)iYt`QCovX>e<gw@W{)#s6I?HLpKvlMC?Fe
zaUbKh{^R#T2#$Z8q{_hy_SM$z1LONloL{^9-3RHjCyBWO$&n%z`p0AF{2~>$*#v4n
z#_sWiK64s7i1$`Md=?cmmOJ~St;wat&X5QnXnLT3(38}E<QgiBYA@4~;=vStKsH3t
zC8kL|tYjox<<;qj)5q;vV%M}Ue`2C6sR116Z<|&o(0eZD=$drAU<_}r)V&^6c?7e+
zMm2GR{B22R6!z+ab?{3Jb$O1z7+)~p_<3ZxnpqX>FPz;3Z$8~jchvl4Qi31$y=re8
z31Z`XUVftYr}2X<F9HNtp|g}LG9cdn2L|sBwGX5_XdBf3>hhYiw`(P@-}YnnTzV1V
z+uSzzK8r|sk0<2>|A&1pcI8K*F8Qu&NX^3Co(9O*m2G=!8Br5(_;d8MuT6~%?2(M5
z=CH<}cyg~rj)rC^Nqnn8e|PAaXQvo3hOp1tzw!PEcHDW`?`q7DHmbybZsW?B#x~EK
z6-4ZEn%7q%N0VN?e;Qs|-D8u+b5RkNOK?go{Ag@+;t5uwv&c1BQE#oXmUwuB1?BWi
zKRg^&3>d0>e&S&>ulFaUvA+2Q>AuW6x(f*@c0SI!huzxpo;ZuP`?-S-H_{L)i}7_P
zU`)Sb)N#k$b{Uylq`V@Irz5+D2AuLj+j655IG&_Ln@aU$&{1kr#MbcC&|B#uXcEhQ
zVC~$AD|VuUtgZG;dSVY_z3}R<43$RQTwew;<+$gg(9MOR?Sq0{aaTGaWv%fiA24Vb
z{MPSS`zN7IqjzMsUu%3>vp^#Wtdq!|uCRjJNzz`A*mPIBDYaL7%I-Ws!Hed9=J3Zq
ziObx8#7u{MbI|$zja`G@Rs@Q(Y>qfJ((5uyOIi5l-}Ha;ZK4GPY)V)N@}vtRw{D~P
z1g`(x>vwv~g^!~vYXAlX7UgT6$FN$=6sNA<&ueYrEjhn6eRTmS=3-1IeK?*qcgevo
z@m`~ddzREW`b1(y2zkOrWP}$FuRI@`L`F|^W68A%hUnATNU^kr2Ei&EOzecbCn@I>
zBNFEZ2{oRAPl(Kv*mz=?P}<y5Myx{r7!Mi00Joi$EGvXI(T|hK%rdKK8|`Tx-RBDQ
zquU@u(;lFlWsf~+($P-2w0Lm5Imrr)^3tpAmBqCx&BVkY6ewj5Es}<8HULsbK9`FO
z;McHxYUfhRBVYVm2|AiG(OVJE;>j}MDjr<@&w-X_pHZmKj5Gbm$?47{A@9W0oSFr5
z7B=?W)p?n=UhIc$XpWkC3?Y2m)G``O&yO7Sgg)1f0y(y+X2OWQP#$!#8mhhtz0o|=
z5qiENX}G@kBJ}1}3yTbol_@Ktb=Z|7-E*Z~Wo!0iJo63VPsOws*OUkV0eE6f-e9x3
zuWa`g;-Ga#A~(8f{I09&VCD*H;450Utn)d48})j#yxZGwZo&r&y#g8%OC$-0RoK9u
zwzg0a;`xwMORd|T`u@A)iqx4Sc>#{u?9sEA-d?IR`tvZvvWoEc{-&vA0MP->KxC!D
zfK)V4dY_g~0s5J#Y&$6nx7*X(en*!*X$8BuCI^y^oYjZhsfT$3o?fz>dQ`%ZE=K6g
zi*a|)EsBAI4`>-`X|{c}*VsYckW&>c(P#28)V{{0dUz{=qP?~$2~Nm-eT#1DD=%tx
z?e<2O=<Yagy|nL+pOGERWQPdrIo4AAcPAm;W(n-{KKb={jkM}orefT#e@h;5NO3IU
zxF<a&ws5wh9&o6>skv4>)x;|-|57B*BHv0kM3#ZSo5dQJ-r$(Jx<!f6Cqoy*sK9<O
zXt=>P()0uAlDD0B_lEg5W|XjLVU+#$Ya5o@zR@kyc?p42817}RWdNBe9j;=$e)jAU
z!?eDu=xo|(GuV(-UypB>oDh`k%S3S4Qs2>4sJ_O^pjvx9nL_7fki&RL5YyWbTYm#u
zzt2FIZH0(y$(V6Egb`P9D_?AG=2rZ3%Fu7A>vfZWQN1<y&gF!ChW$$H50yV}Hqj2s
zh`DQQc1{YLY1}YQdmNHT-v2!f$>~pdy)GX10#f0-#vE0IaHktpBU9E+wbqG4$=G^v
zweGU;VlX=bKhnFPVL!b$i(f6dIUj&;_Ohbh7Qc>;^O4Bn)JmIofQJA2sJi(v80C-g
z{pLW2uv|BBMxWcD`B*2=`x#_Oit!MTJSp2R&AZ=hh7l@r3!XWouRnWrmdPfqixC~|
zat0*4Bzp*9!cHtWPEVmL%<!u<ud1~*7x@-KJ32~e(d>0ddpaW6N;_(QQ)Be9;<~n4
zr-Y9C0+xVwhF#4p-k5XgB~+`vTVoxBzC-Ns>5?DV10`U~pxo%j)J)p449HAcnP#vG
zo9!C{)HYV(kuj5=JhR(s-;uL@y?#Pk?2Ba1Y_D3a2CL+Li_BoL^HU@2^vAas#Dpxa
z%(JD+*jwJY8*e{e_yww}wjO8AkEe6*)6=e;#1VfWFF8)n)rwSg)NCs>>2W<MQCOB#
zp{m<E77Y(faH?lHlk3DDhUFQ`OIdl3(xcQx<WDcM@J~@;`ozF-_d1f$%Z?fqs#Fbv
zAtN%c-z}8yI}$FXjkxc)=%KII6KL`EnH?pSN6ZP@WAxLy?f|lCjNUEJ!KXmc@|8xn
zFRixgOsg>nG#YYK9$xh@U<)B4i-Up(hScucH!S4`XdXu9kAVg^gp3RKiO=o-7Dojd
zUB4_%Z-oB2N&K`C5U%JjQ2%i1`2$uOShQ#RHo(0w_OhnXXD-&aW>2SSuYHpcu)9Xk
z+OFQO8$gHV9?EPI$P=qKm;Vd$|FQR`VNIWFySIu3EJ~nS5g8)IO4p+WX#`|QqQy$P
z6w$h>AV`4JL=A(0ObJOu6tE1@x|R%qpt34j!Vn`OLI7n5mW03p5+<1mNWu_FLI_FN
zckEi#^={qI<8$<VkNxi5Z#nP_hX4P%@9VnG^LHLn6NgozY(HvP-j%M<+=;Sn8hX3+
z%UcL@`3FceBYQAzaJfLf0e&gAQg+`mEe>8?!y%n(y#Uo&QD>i-zS#5vW?Qu>o^v^m
zH8KGC-V%)NhU#@z6Wf8O<eEd1N;58r=QNy+@j4lmn~m3BD6grRlz4=hlRA-9$<N@f
zXZ6<d;IUt;1()x2IrQ7h6T4Mwc>E|}__xR7wP0%BP=?m1MP4~f-tSrK0Pm6qcX$Bq
z0K5aSwv31W3)POW8W}&y<eOMjs{W=UooeRpso*>4k(A!~JxUHO>V~g>(B$;CWYU=b
zg5uo%2Czi`$-?ZZzvbAje5`+@Prj)YdkVnUM$`kdz!j^9r^o&Y;(>s0$J+?T@jeAW
zp1IBuKcw@~lh9mfPpqsnJVY&X<F|Q`<L@=5A$6YQpU{t9O`YiC#fwbavs>H{n7X7;
z^*O#r1(ZDiP`9Oai~g;O5paV0{%3BJxt71tv%^9|4-K%Y{##1cy4pNo%FzHF>#ju9
zo||^Pv{18`FD5YERp}@5)eh<|jWU5KXjohkc*B>zI2Z0|I|Xa=g|ZN1_wOu9j(bsd
zhfjKsrcN*aP@&1e^^*l;uN`r7RwkA0*?=0rlC=-l($c+0yL_R`dTZ7|tb~$1mVfQ1
zn|5FFii8`rO}A_=TDOz58l9$><bngeWYR!&ZeZ;q6bODl^v=_Woef4j9wa#;A38Tr
z>|xIZUQ`|lK?sAq5V}D`m5+5k_@1;-MAc~2zu$&cWO=KDQ|su72Y*d#_~cL6RW|qI
zvEyu0+UM9~>>u)A7tADqX5Y{F=RfKlPb#tcab4NU(sh6R`7E-CU#Mb4|Mah_yxUTH
zywk$kUvI1a*Vwl^&iKa#yw+C5tNyF?CMt)$Dh1&74i^+0$=M4jr+hf)KFNya2A4X*
zoP+OU(x2<;P8L5&^M|S?dyawn9sAOn4~y<v+_}O`2leu5U)+tV$f?nu^a4aZNhu3%
z5Y75@zVNaPD!a~hVa8_xpXq(ejKuIghHUZ5=ajP@Yo4U;By1GQ>{70(+Jt|%y?D|r
z&JE%$Ek_V^31Wq7bA67f8F_DWc~cqRiz>@DmJU!HoS&CU_|SP_fn8ke%>bgDmR(ND
z=PKtH$=s!k{7+v0=l^ZWp7FjSqgOy%4dK`_Z1k)yk)Og<12cBvH#z>ntMdrKMV78`
zKDf*!Cm`X%UwWmKR+aGN^cX+XjU<gg*9(-K&H@BvD;?P~IKIUadfA+Iy;{sD^5rES
za+NioI*G-1EQm&vjVRD4BiU@sg6jJB$wq+@J1?~m&e)Bo*+KU~TLWM<h=Sge2ayRQ
zqk3~MyW7lan{F0ttKskq?_j@ApRDioYZ|e(6OASw_L3m_uO+YM$H;^E*sxI1^?GG@
z`)IvS8DnDQ)4|fx(%Ra}K<Znsefs7G+S9!ybMm#ierTum4zwxb)LV<(KWVm4K(m2s
zYFxYd)--is`LYh4WvnbD8eK3X<BP6z>E$`%OP-ygIFTCqOj>CUpoI`9Cyieo=~Fg%
z^8hd$75RdlwhlTXHo)?FvwT7c1Tpu;LCe|E?7LxZ4o18rz&R6m!D}EJQ{k_SJ$rZO
zIy>)rYRRhWMz2@yhzZ~(T96}+DZ9;Zw(-VdVZb!4hw}Yeiq747S^@>f^RSgRPoat8
zCG1zprIp-akLWO>+UEP?`8f*o(dH{R>*WB5r{#we06+Y1zn9_Z=z0b3+2Ud)#K>0f
z1GqqX2zL61hk8^8Vu$0Oft0;k$%!_>&6Zb|4Yv&VaS*$}pc}iNUaS0wva=83g}_%y
zD%ez6Z$}2tC9QEVS(n-Wys^Aefal*&wm_X%06)$IChR$Y918)o9<tE@n4VTgw8^fH
zja=B%x!=OBo}ONw8Re)8z2tZCyno~iil=djBc@R~=0G8di`jAAW<`+s&4r{+DlMD+
zL2iEJIa@TQviMmDF^a>-h5&6>#FnPKR;8@5as2nh9Q<?CQ){{*469W!p6H12q&%pN
z*aLOA$Sr4$OMRDcx<!UasXP?CKCvJ}psnC25CVglLaz^%63drH7oj~7@`f^0Bqw_P
zdA?HxOvXJ>(nTqc0fi|?T<qa?vGqjj<VhIP`)kr?k|FaHhmmnV!d|)m!MRCAYCWwd
zb=bqwY}N<u3&c!16FIvh8M-d^H17P55LcZ%Al!eEb&u`Qm|QNyR<4iOULvz@Wd<;B
zRQCIVQxLC9nsj?*L3sT5F)5PJa_t@6>ib?6wZwzt?j!lI5-h+m0ZjBi9DA9<%n!wd
zwDA&(FC5XGZe`-qFc8ik!?vZSpF|QWdT=nHM7?+GCYx;;CdP$|sOynp@eAt;u<>Py
zCYuwpfK=;cFu#Ef^U3e;Jj}TQ#V>Hu^inTtRaY$f;YV%wm5`88c=V-2gKOr>Y-}FG
zzFPcvuoR3tS~eq_P7Ll}?s`ZwaMkoOe5j^Rk^<`Um95=wPBEt_CoM?yc68y5xLgUl
zbx+n6=X}Y}U?%wCTf2$fUuch{`;dQxzg~P>YZu?wRv5h2*}ri!idlUFNF*li4sdTe
z<>-CDk$=mJ@a=%5x1~^ama3mmi5L8_OEoVV0Re&Eg9v$9!s_q*)C2~aK0ZRy6G{?>
zJ8oP$LG|OaA1aULvu<;lS$asm{I5q1P`p`j4|tDIQS0$Yt7quT^#m(OxllUiA6#CX
zEU<Nxr(E@3YNsbcpy9<7D1q0=*%^I<nw4m3-&DIn%rH(Z+r~!C@c9okcVhr)$BAZ6
z`wq?o6vj0qArrCSF=xX@&GHLj%fvr)H2*)*(fpyE`9E1Z)2j7K77`B!<U0_%);12{
zRFmZoU(kB|aRO<eH3#So;Od!9-=%?`^{J(x<`<P_#ELfaXt9wywTeVpjt+EWnj8b%
z<NCNuyLG=@TUi{)b0tK2WB)?U(sRW%)$oL|`AD}mVvwB3YQUF8O<OIfySMwd&X?(3
z<;s`Jx^+Cs(?a`-t4&dQElgudEF!Yf<_7Ak0L;*AHa*N@Vf6l*8ouK!>7=O0DO1C@
zxh3m5GRrhAwX?IURYQ8;p~X9`6;ho>e5LpLdZwoxQ6vWJczYEd9&Gooaa+b5R_z3+
zGGhBKL5DjxCt)|v*YysAfzoq{pB|NmuK*jT=cQ462gF#w-F%R7^trV8!~#oL;SEGo
z&C@*`aLkUOLk7U*gD68En>*Rq?EsMoA6mM!z6`K>f^JN_maIeVpp07y3<}T+D{N(A
z(|By`mes+IBD8x-W2mK+elIZZ;~%2|BJo~WC`Q#Rs!#TrkvGueRGX&m9Wcb4@6UHD
z%5$iX{C4mJhd(h~{~tmh94({XZO<b-80D3&EdE!s^Lp&9Jw0d{7hZ9~U#)QgcHRb9
zOoNm0YGqf4MaeI3oG%O8!1qM3-u^}p{`zD5)w<_keGYGeVt{tOBFFNKE~`sy%ujJt
zccR@rc#ie{=av}UM6S8~BGZFHAu;>AJSzB4P_?qO$>wJ_5hVWLAmt2meE}4w7v1{3
zUG;=}>CgcpF{`*%e*1d9Qa`$puoLOMy8(SUk)V&Ya}S;N|KY&lOrNp_`?-&AyTqsM
zP0sTpxy@6~#$-6?x&{?HfTRC}0-wY^SFsS>$`=eqnkME^4v|EFT~pT7O7ym#Id#*p
z3be5T6t)_8+~Q%s+wwo5N>3lauKKhytm%i6fjeaUz4i`dIu{c!mVV1DtnJ-RU|b3G
ztY!%(jUv=8I%c<N*?R%oFtrs7ClrCc;9l~4vs2%o><Zz|cVV`(U)kzb(l0}vrWsP*
z$(YEv(D|L~vBV&tdnVA&?U_Hf$*^@Gu>d{&=^2{GqYH;uC(yi?znwd<LWEi?n)Emn
z)a9GVs&s}pWM3;s;35G$&F9{gwy{~~p6h}Wt^AlU!<SnCr}CUl{4<dcCy<W)sfK(6
z0IRsw6HKxLFzd134!V2)O-sjG^{*UFaMJIt2XPJGSxdb;Ttk+3!-!qd6V^!H&E;NA
zXt4Zb0lF9f&%+)uNm5+jLi##*RGSYp4?eE&UC#8m4ke#gWK)#%VlTJoh}!~Q4{WF)
z-+pQF**E?8u&L6xD`4aY#odbGs=$4g^5+PXgSPW4S01t15M>_EdH^8)n@GDb^ZGg#
z&Z`3uYJU8rd_l2fg{ka$cI75}Fw%&UzLzNATXt<zpzBd)E+QOyKfTlfwT~q$W{WGm
z^IK!1i0b(TCnpWj^mm-@>FJ{kFIK=}4_|1r_H=&$@18vU(BoJhA^ytVvJT($jGEw)
ztoEw>@ofz^v6$}K;tbOsihFXpi}D22EbcDlxpHhzn>FoOEJlQO8r(dQ(=-1O)^J*$
z$IR3bsaXs({*kwI*p#I6EWxNQeDBJF0z<-TYO={g&jsP!Q>6%Ns7g7)DI|T61_>8F
zK;Q$Z22@hhoN*cYDApq0SpGvyy9pe(P-G_)`0-Kdb{{A?xB;*)Cgu(F2U~OB(Ip#e
zyX5zX@^Jrk3Y?4D12SKNlGGiJtxVKXu@5@(PQFrLDnE`h>)NJlp9nb=)$mDYnITNw
z!)e$#o9a+@Ezv_4{9ad3xMA!p=%2R$tYg-7ACz<~XiIn6EyRRXri9tQc;C^4={zUX
zG$6eXDu!0Cf8?LxCU)L&zvP1;Pps_)&#LfA*56&`hpWEaWkTw0dojDY3NSTR-MMi!
zeZIbooo}k(XN^biml_5uw%`tlve~Rf)q&HWw~nB`h-%si76nuP#l75fjrD(kbcV$l
zi{*8)u`wW6^f>oR#v7}GIfi!4%lP}t)PEbv{Iew>9~`>wg>a6OjC6q299vs$e!{f5
zhC<|z?-ZVBZ`D~%xPN?5okYf$8H0nPs{m#bg?Ml*xirY)C4IsgIdK9IQ%mg}fewNd
zCuKLCsDj}|hjGZz;xLPNZ;@+DvcVNYE6a>jdwvUjk$8CMCq~>ic6Vyy+zJR7(Qws_
z&vkaPPPeg&(bMKd<ULJGPw=LcBc^t54<gQgfh*9UFguH2KtapMUUJ6*<uo7Kn@`bb
z$KtaJJ@Grv=veI;9b5C2&FeEdS(}LCet5@QCBm^@Ln@WH$Va^!jGNNi+&;S*mSYKa
zYT46lOnS)2QA--Yw@yuG;YPVXaZ$U<5Tu5W*p>8Cp_nM`2FM-yS6aSl`+f`l+F<dE
zKM5#q0K8xfg_rp+&Gu{uI&V=bMOKXNXJM}QZ$HiJagW<$IEGsBvhR{t)>ZEUw!mQ0
zW~-D&=@;gYKh*uAOh7pcL%NJUJ776l49vL=Zex3-f{ak^xQAm#wVPWV8BVn?7$ELx
zMH8hdSgb#<%5+w<B`LmB(U-RT_|YSU#_8biXPli=EzV!>=r9>v3(AVNHS87QF%AA_
zK__T>yseldo-XB6{BeAa@cwMBsYQ5E1|noW2Lg?kxbt@}bb2p6YcD|4vFH%Wq9(iS
zT0Jw+!wnhD&rNmEk>oaf(&P($p3|~<@>dvB)gHsrb5?c*89pmI8}u&3Z?(PMI{(N9
zQlHD|-n8O=$^6~ub3WT~2!Y$io0{G^O6{U^DK>K2nLf+Dts$A)(+sGD^K_6VcoOJP
z76s)KbrZk>30CvfFHDS*_Wk?p_n*Zk<Gl%0bK)N6btd!ZD-R?<i%!0{gUs;{QT}A%
zsG*z{c$L^`x@C=Q-S}Wddvb`Os<Y=h;^)sTq4CAFQ_n636jbz?^VxT@OsF`_sbY8d
zrO074?~w~8(p%)NUQk#mud<Z`S3oYqS%mjN`OxZ^1kq*q&iThpdOlIBM$xfW;<~RY
zO0ZQ|BrCSk7<`irfP4Kt)U?cLVABZL902WuJzb#a33X}x!GeLnfjEqE@-t3(uguyI
z`2lOuhp;h-dnFIlM(w#QTKV+qTk&pn@0(h8&I7zf!Nd!D>>LwmXT}9SZ64{}qn^tT
zYNRn8WY4r{sBYR>(ej<y%|6rewDrl);}zFXK9To24y~2&*@tX-4Fl!n?Z)n2l@j@n
zOdFbtvv$Ud#Mht4W8xWvZDL%t=t$V@=SyaVYJX<(<Ku05xgj|=`Sk}rjOn`m)FA7S
ztH~!&0@AWfQ2X^Ns7!85PZ;oi61e^&$JWb=mG=?@+!ZN8iJ|61LS?qPo5K(ANB7_g
z3>|r=i0Ac5DT{!;)1wsH2zo&DLMfRP89Dm5{cmId{kF*m#nsJOyH{GYd2@ArQ#-aj
zocrlp>g<r$!B>Dp^VQ2aT2H}O;3C)Nn$d>j;!&lgtYO6nn&(8ow@&v(hggn^+x<sV
z7zlVDAP(iG`U$Dy+vLfkI8S^dIXiHz<LKQ3>qKbuBby|L+cfVW&aL!pWy6-HBl)gI
zl$~axYSWpe<TbNq70O8CTelYK%jBQ*-kTT}WT%d7-=Ox8xlStAd`#vS)gs0QOL+s2
z=?UzEX_c7DC4I#gSBc0V#ZJJ|Nh{U<<Zr8|6+4YEQ%7UC4t>unn=6#p**W>G%4Hyq
zmsl*jAN*~u^lwMYe`DGY#1CNF|A%(w-y19K*ZWG``iFMr5ADnwkH#O`nYR_5KeRJ%
zJR-k-eBX7*AKID!f&lgp?F@+T_)R;roRLEUQM=PUKxZ{@27iaRDIi~V*AXSxCn?&n
z#da<ci`(@kyRK0aLW^;RDk%fOlx4$3J1VLh+WI^V)y=FK$#7bVtcQBQ)$tO`t@#Xs
zS1r7cfPI<Kg@U^@EU^aRK#3{!mV9fO5pS8(a%<re#r^$-Aver|rFD8+FFxOmyf2x$
zH`=Qd#nEq3G>UIiP06|!k>y5WeMeqV{vxo}!7}6GITzMFR}O=`17rqE#_&a<Ub1o}
zjpO5875|y~bvSdo5A0u_z`U9FZ?P|sUA68>kwke$8{vU^0DtZ{*1_YJ#h6tgmT<}<
zwM+*<O6ONT-BIB^KRlY_*NMGZfxr`+PkGLdmeMT4N7@)oCVk6xe*`G~-x8oS$W-Q=
z9*0db_Xp2lfdSj|AJQP}$$qr2tosE+b4nMnR`tUEIR6g$ywGX(tW8DqsH7m%%&dlw
zy<;hh+Y+eu(b(!q6rYXF<&J^9@pHW8`QCdTwj!4fY7GjCycDatn|PO8TQ!lt)%BA8
z^+YSbfdhm;VdEFKD9`CqB{I{lnIPqw4N&BTOm@<M!a>)<L2~LL!U1lL+Xv+fzt{+k
z^MOJy;eS{d&T!jWR>Q<H5rjzJe9+hed3o!_bU4IFL;62GK*=a8Iptq0fd9S1l*orb
zm@)CfIp@zNEAPbQ>^%x5!Sol@hetNU2||$LQ{_!4<z8Ngk_&_6x1Q{9a)kw{yE0=h
z^^js;w)dsi!UyOAT68==aEC^#lbNwC;j;M58*s7Wc0F53cXlF(S|fa609p@%rhw^b
z+ttL9<gF%pt8Y6_#hPM5=qx(ZUa@8DqrcDR93Th(aIV~bJKv@>PKpkLx7H7M6SD-n
zWd#FLj+^a}DmO9G6xI^r87eA5gJ=z)&AO^%KXaa6YG-RZ_&Z__XmCPwM0B*0do$Km
zt6~)7)Zp-cSN}~%dDl3&Wcu^M!Cn;1J4$h@A_lxlO;iJmi<WtKWlb@~u)Vc6zJYnC
z!q)=#l3|mi&Otw<-elHP=G_bPk0>V5SumWK|9u#I#P~cvV*hN;;*&35x?j<o*h4qA
zo9H#TzYuiMgN-tmbNtsLUv|gxHup`z`Yd(}8nROz+O9}~X_@ierjvje=*d0^NBjqZ
zUJPh~SAD~aq2aU-sO6mT0cGcxZLm4_iJn&$1OU;d_W5SKYheDqvNA1Baq~yZxgg~N
zpqZY%xc0D}=1}{W0Hkb346%Po@+5REpzFvpnA?zv{=s5pPZign8qW9dTK54QA&&)u
zGT*^mMIhD-S_zi9qLUsTmJNP%RwkCY4FPgA$L=Hr9a6PbVKHvrJ5*p^K6&c$)60B=
z*wbdS3~O`0l(9CRn<y=P_>@3RB90yds1$p?(otFZQ0CVS3@hATj=tk+Gfihqld!UK
zJ3%}(hfcS2E$57;A)|Gl9^@>h9apb<did>wtZT+VRDX?lHDmp6!DE)+0Ie`(wfAeC
z{Tr9(N7iLv^@jA2h3c}}-98I=n285TU$irq_Qzj}o1Q&}tzB^GTkr(%K;8ST@-x?C
zrpNEtR%V$3VXpiNFM1wEVKTY}y<_(g54-Y};*UdUjcy9Y!@^v!OeA4>HGHP#XKLHh
znr|$(n-3Vo-E}BTUI;1*fmcTlGdwOe^inVu@ro22QPoYb#UwG9{SD?Ird0D&043e~
zl7q7*qT=BlnFnkBRC=vsY>qya4Ty}MbFh3_CGsNDS%a@Y<Sotu;sF%)u3X6Xr)K|}
zU6&e$S&VLKwAetM?D>bC=isg{N0I6-uz>^SS?h-3R0vM@Vrx0YAkCUTFr%(+IE!U9
z-DeLzp=}<!|6*`H4g+Y(&|KD{z^%mD35S_2Ys$a_l$G#la(T={1Y!(L@t#o6B#<M@
z+*9JRoHsq)TY1UFu8C&wh3jgEpSek;aapWg(Xt{)oRK!XjOTw<p-(NxV_&XMoopd-
z(><X8Ha|WP-!wdXGM8~Lrm4w#_3EmL!09?U$ZkG<To4u-R(a^HQ{Yd|y)SXIA3SkD
zJO-8~G5aPL?_hKM&yYjvNRia39#K7K4=@wVK16UnB#BMsF{RNepky=6o38-~QtDv;
z5&_-bXBQe8oKo35Ol*&{X-%N@B;+~37MrKx4?w_yycyr5CDne@&i=u~nqmT=Ljl45
ztq0bufqO1oFs5r1S%ODV1EoAmE8TWM`Jx1NL#evIk{qc1U{!F_R12w#7oC}iSNafS
zUwKqh45VLq5J^3CfKt`fPBE3JCYU4#;3&m($ltmVNvUhsdehtEe=vOgZ5e8zZ+cI>
z-|Eyj7qPG+0m#P!lORTuh5mZ1t{I}=5RC?`>O<}*2i$qFv6)O#NG5cFgvFr>JH9t|
z<XM<G4qsCY@ML9$G}*L`)1jru&;?Iv6b0;;M(=s8lS_Z{C36oT^zi&9rXc3VLZ-TY
z09n7Je>2<|`(UZElI~(#w}%~U&ODsOn%fa$@)czhg{O>N33rM3Q|Bo<gWn~H7y0mG
z1;Ue~_jm)QsIxx2Ua`;74uwxBkf!FTinvS)KJ_Qvmq3pS{+>;@k#C(X9MP7LBg72D
zH%f@7wuJ2Wer@r3W9wF?Wo*uk2Ww)qUP%z|xC+Eo7hyh=`;U5*mU}L6<R_}`K+FOi
zAqeq{n8JbHg;tt(JgE66iBS!{f>?P2HL(Z$v5G<HtWnr<6=90G-`l#u-YBR!WF29k
zhg$Da(A(hF?E{k&9ob8&;e?s>%vsT={KR4$q;i(+FNvTf!!HCs987MsJgvkzQ7SL*
zDslCurN=hRXScu^s{dF8(;@S|CyE|HGd<_ZAI2?+PM}zo(h9_y;?fL!J~x&a7q>V~
zZhHp-&_kOu_C8@-YnC&#F|tmHBgp_;Hko>-l4f}p><xYTdhOHG)h=zrIA{e$r>(tk
znpDgzkyz=ut3k%m*;^j`$FmN#jVH)l_fQ@tRLtKB#m$4uho}h3yg2(GO(k(DP8G7Y
z@EdvtYb>{0rn#AS=aP0nD*ZQE)I*$GEOyzl>vgOGm_AUmFLy-G-^6;Z6Vb0e7)_i!
zK#YWqdiX;ToQMh=40n`$*z07(&Vo_Rn9nrbly+Uo4|<4zK#$q;PRyS-7p{ETWd@8E
z>rPwzc8<LHu*{v;hQ9-5cprJ+sow&3J3-(sZRXr}Z*XTGIf3m#znRa<H?%RoeH=<$
zJp=YiB74nFu#9ANNxz0o7Go%7`yae0v@~<UKQxtJ?4yKO1`Eqfa^d)RDRsOA@wnVj
zqXbF89*1;g5~fB&I!Mjir1o|#i`+&ShC}fmpr%Ci!Rm68JXNPh+4h0N#V1d#!0FTP
zzMEhgfm`_2@8V<5#ZNO5N{zaP(Q94AV=qUu$$zPeq}z8J<BGx2&wna_1t(Rpu#pdI
zG_;mY;`s9~!RGEnvP1Mt{pN5xov3cWL#oucjJ^^tXTL+BYyAmW!&)mhS-fT#n_tkn
zxmGYX{Pq>R76t7K(C>%u83M4Y)<?N}!z$7j9Mv5M(rKDA!H%Qo!pt1Fx~r)t)pIRw
zWZJ<a`Km}@+HEA`tbKU`iaOs4q9h=FCkAsT`Hy-uC0_loVtizrU4(t}sn6q$Fz36?
zmB0lXNlnh)En2@6VAX@Ztdo;mf9{;z(%b@P_szW9(+@6vqAzVwW?n?C@?H+|_CQ8_
zR5Y+z%;m=2eU?U-`A~JtaIJs#ytIwXdq%6~M?9<{L|)Zn0A{7@@Bx2bkRckrU8YWT
zX_*cd!t>QdaTn&`Nx#$5Itw%TPp0OIVYW8Gu5|M)HkiRIv9n(k0nguJoUU3Rk3lnM
zH(THU{2X7OCo4ep)r194-b(}$X7QicgUVV?j!IEb&x`K_^79eK_4O=LD{UoIoz??z
zog;k0QBZx?UL08RHelg|9#{0pfBCU0AR-&0pW<@s?&y%{r}EKR_FREI)nn6Sv(<|E
z7ZpPHidyy{#J+`l=+J7ohL#u`ymqSUq5Q7n6R4S{x6KD-1`8riD?XVj4ufNOjmq;)
zMIfFTcqAmVEvMglv=}AWXkp+s%d6i+rvFv@*!;l!{w<G<>dG4M*eD{5s`H*CuDWD-
zX7laoC;L5^@cUE!qu~FOH*og6^wfHG+JJh8la($UR<8+(;xv=YU4lE?1<LMbccPeY
zqj%9#a<B;oh{KEg-2x6Rb9dzFirHM2x%cdBx<yBQ<826U&g^T$ODi%AKHOvx)otDF
zR$UhI*eThBk3vQcd87p)WZMJcQ(%R%c7r~@ZYeB@a>0V?A{t69J6@eyGwD->A_7X!
zea#f5RjEK*3&UWDd~k+F|9&7qm1}QH=EN%{nF&ms|1g}U?hWH^roz;nwXJ2fC;IL>
zwo?#ckw05+yp<G{^@4}lmK2AgC#0LZeNm>F@=~2JKoV*t*1Cb|P_Tqo-nKE(d4gFh
zbB0u=<&U>!mRDwR6G|6sG*5z_>e*z~$s)!Ad4boWJ~zU-M6L|(O?RLDv@07j`0?$^
zxsIemWC2)=LyUKpUkc8JCc!nFx{9V96|mbe0rh%5ktcX=Gu#Q(m$>ka%Rk<OB`r3l
z9nZ`>zB~tgfX#o0G-xF-TXUzUr{&Ni+N6e<Sw+}g8=F#8t;@xu(U;y>+EP9R&k*I)
zzoC9}2flITSD;tr$G?2`EY$=si2ae;YGVfoUg3l?0dNNX5N)}o`#MWG<D}|HOdm>|
zEV9gVzBhlX+$H{F(N!!Qy67y}oCv`a84S#p8Eyg6k>8uw?wfpKDI7->4b`6*^g;N2
zeO_O3&M%GOkKxWHuChz#9>CkHxud4fVZM;TC|-^m!n`hHh{8=GO%XPN#GD2^U3P@+
zV=SU(`k2X<zex1SlXPO!x&2U=B8{R<)24}+=A%xYB(sqL@3`l)wP!SY{_{8DLwB#%
zN~taeIlp;w{p;dVM_4s6fkknr*kJT@`jT+(N@9mJwokwfMmpkxi|+O<RLtgh2a8Xd
zh1rH^ZYRhj);D&yp87lzRs@#RVpHW!sfv^0I8}xTKzn&rlE(IC-J>Wb6J)()o_|j%
z&mR>JgtwzJ4%9LKy@XcFUvwh2EU&scxGnzarH0M$8vi{=t6K~4V~)#!ReLpo1)|Ou
z+fBXvUv3J66WgqXR(iK<qXB6Jc|Uw?e0Zfs)RSf^o6(7|1nG5duJiZ-ZtQ}d{a8WM
zAVwtsPV0r*z~7O6F~Q5v&!yEUFrchRw5_3|0A?-!7IcEVM;Ak7=rD3QNqT~bam*x6
za3)iHqoil3f_TMHD)fF+WnojVSB9kp8g7Ooa29x%(#>h>Tt^leOram$G-YDzM*9I^
zqwwSJ`4z_0|3O6TWrH}=D9);z+Yl?ptiz3?Xl!`gCgJx@O)IWO<$07Rww&;puLSgM
znIMU*;_~9)R2(mmh}<Y!7)_D*b@vybLx>phhd5$$Z3$ct0W6R~;9}ufdtv9+x0cy+
z?@g#m!18E$xp{dn0XvclFr#03IjP&FXFKes%Ov3TK#Cwr*d=xd$02k*1rZ!MRM<+B
z9tn{shH&cdylhvSv7QUd5RQ%2-F~p`I12z{Fn|)8y6ma-C!kZcY)E^u8-L*t$Y?k+
z|0L+Xp3NfzKRa<kw!i_={PX%v(0YSFJ=@1o@IKEpy)BZo@|v4jl5y*$<_j!Ilabfw
znALFEl|WV#FS;ZAm^ek|bG@&cu0DV%=_-MSEB-Xe<@GX+aEHX8Hfqo1laSv{ALOci
zi$prB@eEVx!R@uJ7ZGP0EW?zAvY%?H8eGtWrJVtP@m+Qz3YyPWU~_kih4mEGFF6PD
zqJvT@5YZ8F+vFw1=^2~wzob`W=E5aoSj;){OXmJ80c<q&IV=!0dXj=)KRqzGdwL-U
z-pRU%7z*xiTQv9o_E8aSgMZ!m-b$mz?j^|umgcLE6n85q0qdkq9~x4xmWA6kK)$wE
zZT8e-7bRv+@F9mQW@8@e&Tnq<H;XEZvlSJ%&$)AwX-W>?30c{Si6;StDwS$hx+~`$
zmzHN*KhZPfUcJ|~R8L!H6GwLVyrs^PgI)m=$G0d1X=L6_yBy7#O9SBm0nT5-6Q|d)
zO`wFDo{q@S!H2l{O<0P2vqzc?fI>7sPxy^}F}TBtfiy?q{;^%tvKC!t>T&X{H`J^i
zZcjIsHGG6N4B>Rz=-Ou}`xC$z(|dw@ZV-7ecJNVGeyaXD7Bs2cr2P;aQrqgc0d;E<
z`Sajjf!AFH(_byKS|$<Y{8Q`PFhLxLmggRInF-=0<ND;ifTa`91wSd>dYYY_u=8mC
zV_ZqkOzT%QUHNW&)p`E%#Ph1uSp_ucb&LFFRXz8<RKRMRouDNLlmEb`aRQfr*UNnu
ztE&~E`zW#}xZ6UC8g04B&VdIRPUF@iaQF)2X~h!xuVFg??hg7SX}4LJ*CRrtc<GuR
zR0J4SiX*sbQx7a6ep69xC6E(EH&z1@p6WOXjlgefM>m@Lb*3`+*S1>n4`_~@j8D<a
zb(T2U45{yuR*OVv3wbm2#c@|s!xyT<lOW;+;U;VM0sFXp<OQ0?@^_TlXeqEm_V|@B
zmZO>`{;Oy78XShy7@^^9eb}LmnAJbjWBkS!hPVN4bch>&A-&~Bw{M8D2At3H*G=sF
z<Kh0xxlfR^b{kLLLr=*PGhHG5VYaWchl#MQS{9Ir?TkBykab4<hD{TjsWnaDlI0Cj
zG)Z9uPB{UoteYl#BpcP%`bU;BXjlV3O<TSyrFvkNRJA=in6eR~%Gx(JG-Uqgx?Rl%
zDGt$k%Mgtv&3ohlHv(5PF$z{MBmmFL%zyM<E#C&}7}O4uI)cUA0~wI<C;7@<iuLY@
z)u@H0kfg=LYMLH7LXpW<Dt2;kMDb(~%&Z6+cde^c16(Gcn~c#UI{xyG7wg3u#UKs{
zccp{3*T25`xNC<pR-fH?&BA#7Z~CtupE{jO6~N8dJ?{x|g!fBv9Y}6k`d+dF%mx3m
zv9hEGmZCnDMC=wzJhHB|hanFk&z{J4Q}}i$<?(%jbcjpPJ+FKh_*kb$7=U(M%y+@?
zzCi>x+(xPI1_JL%jL*EtYe#sl&(e;HcusQ;FsQ5~D_2??JvK1jqBnjqC9cxwsio^h
zp5`YGgJixk_DEz-vfr48*C7?1LUG1ccA-mWb97ws4d!DqyNsGv1s%+VS)~Z!r#GHh
zLP3{ueiDpP!-&Lm4@xd~XysFF!~M<~)%EotNb^+z`s&RB^uM&@#Qih>4<yiLN#@sX
z7MjX^Iv}B5a*)pKDdVJQ<Ue)9*Ot7f;)7q@(T<=St$dK3{uK|8nzJf&#6*@jdzV6t
zFjZG#&}d@Brqm2oN_5bs6j_-SN7&C}C^vfnHjzW+%;(!!F+(2>B~<GZkXc5>iRlMS
z-8U~Nv)HVf$>S(NQQju2+Z8nkak}>A)GkW=(M_BUXM+WBd^_>8)|~D+N%<Q5CGVLh
z^hbguOR~r;)e>d7<?2#n8d!?h4yZIK1)gubJa2rYX*(m@26E$XcAdH>+A=-#^?^<Q
z^WdT`|F7EM*)X9Ja9Ve4I^FLvnJ3KDHzM38uBb~3r~uJHNnh4Fu=tAm4@;kyvw9kC
zx=XR?&zVE@APpDLN+RfS-q$H$=T2ydrwexDhCKXdu!dkfkr5|l2p@&spE^#(%}<g`
zv&WK+Y?H(&!xf}mxVS)7d)!`?>f?luH)tjWkW+?%ODnq!*h(7Zgwos0Of$(XXjQpw
z9g6Q3m<x{sXcspEq}HHzi-rr3F8oQ5vt4Ly0^<M7J6X9hU?mrTNQR*w-*_F~`1sx~
z`(L{zl;IUJ7jy!p4#dt~`(S_<uCszbpJq2DYj83}k8ipqavynG!EDkaZ&qa+qd8Yd
zT`v+Xp%Ghz4@}Hip3fUP7N*_T#KW)4uDG|YPla3@V21v%SWjTGkCTInXDi`)cwB2l
zraSUH<f9MGzuc{FGJ5mk`c<HN@D|PD|6-;eL=3*!3d>1`*Q*rSUKb`e1gA*&-(!pt
z1N83Kp4hVv?L#%o189cG$moc(9$|)~9_1~U?d<iVMX>AjC+Kh+*ir|`x;uHYwvzSn
z;_uj9Ye(OSLxtK*Q9I9iII#-^R-|&ljzsyhPbrD{d<{c-yhH3o4_XTgBJqX%<jwj7
z)!lL>okR=sbF{iaIyW_IFoEKY^~Q@1(xXS+k{u-2bjxcH*>IVi!ZekuYF*Mm%L^y1
z8d{1oWdR(~u<VpPF;Z8xX~l|+%3zMuq5SZk#v!z=Sp4w<Y0La3clZZT%Po^2_RWJr
zw-+whQ6|vaj)B4H&!e19_eZ5N*;f=Kesr!t12zHh-_bJ-XtfHEY7)~a_3bzs!gC~c
zN)L6wrt4QM(LKr+?|aPECnIpg_G>LD=RKtv{cF$TPJ){-MV4L66Z>E*$3IOP2#uKZ
zn2Dl5u>0t|0l!{`m3Vybq4_wWLnip!M$k1=?N$S`>Y0_~h@0#mGGCq>n{V?oWSKn4
zbZ`k__6HQ`A+{Kcn-;I7ANR5l@KHSUI--=Fd4i*W8L94F4)7?8^H*~!XvTS!oKduH
z@FX7s7{W{8Vt~h0Du0{>$O~J$(i+)+(q*r!^?R1HC=?3Ez_n-k{C}gxR`vCOVFZdI
z@Y2S4C~r@{cxaVR3Qc15b<28C9jNJ2Xm^ZfE-0^+jle-57`u(o0caSJyDcsUN|s4e
z)+c8;)O2gee}pOh-x8*@OzT?aJj&Ud?+_G;1WTkdKi)Ah+dE;|_cQwtMP>(^3mo#I
zRNi+~7r<)cj=NTtn^B;w{_eSQ1Wb09r?W=Hdl>`r+&!$4C$`#wy)l3OX2&6TgpVM5
zK&n<MtQtl=EcU6Fp2L^7_E_!9GG9CV(!ckB^Jt4+dorv$t(12++N8tlrb4l@+Rahg
zRBAtY_lg};cJGC$kF~PQF_WQaZc!?>bRMmS#Ee-b$nxM+pk?b*j+G(675Uu8U@_<|
z7ybxS`u{XcDKdgYn$fw`vUe}ffz`1#2TXr4o`Vn4{{gPxr69)#B;5d{x8lB&2@|po
zI5xA5MWr<j)*N~Lb;>}fYFdI}$sdd|4bhSXppA)%2@jbmr<IEX*(MeUK9*bA;~N76
z0e}k$f~GEN<8jQ-!?#xM-eOdKgx#_ehn_x_2awWMnOpKeU={l4rJ{5n1|p7I040dR
zE#*y9_0>)Hpt3tyVff043G>_*K;Xee_@XSBG9O={%`#63FJzL4;o*zF<9hbxub!oj
zFx|#JQxLie5+YA_SWlOl1D8%fWJs8^ny<-u@^d|e1*-9!!vM$)kWO}XEQAoxr$qCG
z)-(s!^C@uAgWHP*=FI1-^JLuVgT(nCaWeFDo)5ZW8$o1Dxyif%!wWc&jXy&F?6zAk
zC_UC$;D426vfj-_GXlawgA~`;O$2`TvHYHyy2@>>e)NPxY1sMdvHI3MSkQ2|V5THT
zB!MAnpP5VjKj73U^E<lfr)(Gag&Qx@5}+=;SFKY?Ny%XUK*ZQPS|@L<`_H>(-^A;g
zM6$Les6V&kz*}Y#uQs(^R}~W=*<#n1eO`ws57OoI#h+F!ffymt=rIZ;8r^)^kP(yX
zuxKg`LJN2UA@bfdCIWx<vq=eqZMKxtrvzz9t^{SXc7Z$V;_`BfFld_PMs<)#K#r!9
z!-mL_<N-Kr^hwY#n33<X+rGi}fq$KQUo6F9c<9Tm$t0l<Hh8UF)y#qj_;&6$Q5gJ+
zc5->~#M6x0=wLo(f0<SHTwx8&k;gsRgFc=N#YwyGowCHL7%(GDP%E~23YgozeCre<
zBMmeI8REqAxxbCV=e`DRirB4nPk-wV-mve~StN`DGmi7mF|f&WFaTz<IziHx^q}>w
z5o->PTmdqP1wA!kc!m$`YScq7YBkQzDe74xrwr^Mz2YBI^W$>U8*BL6GG&ZnO((YW
z^!yIt6G}OJyz{AG-jyIPr^${#zck?W^-J&JIsaz&VrO`@iEoH#xZHpO|70tlv<uA3
zJ^VzY?14yoSX$orHeta2G>P2@gy4ox=+7jXRpk!F$f-O#oGRTW8T%bCn5*qm7wJ5;
zvFe#bP$hf8A?NGqFK0QwHh;c3Q21|<vj3S~7Y}QxfZ5L6?B2(_K{}(nW4w9!Md_W=
z%}<(gOsx!2@qizHzJ%x(V9t<7&rW=L%vI!Y1Fiw_I9oD3muWmOyrZax#N1k8IJeRV
zMgW`BPHLX1y$OQOV#*{|P(p*tYz#zoJ<;MzPCe&|k>M|&cE;Ju{jT;{-8~ZG7|*R2
z|HLRl5t|ctgYYt<{9=PgH@(aCdcOBQlpGfttSoE7*e(cRhUD3iG*1@H(b8&5Hynb~
zdkC_d{|Qctdh6uZDB*pb0<Y|Bn?C}Jl4|QOL2z@2^v_E;9XYk{FFb!JM)#s66kj0=
zJT`~smDLi;M<)i9oXOk;BEZ(Egad<SsRN|&NVGfWE5q5;R@ZPtDaTMu&wl0+I(rL*
z8kBkPVKrJh?GK1!)tlm~+j2T|(DM=gfBt&%%wxT@02!NI-Bdgergr-FDK#ZrN<O1=
zB6FR>KxAhW06T_~7m*%TnRj;ZdW-B_Mu>hl?OdkjTXgyP<0Tm+PRax_UseRL=T6jz
zZxws&S)HK;jAjUrp1=CrOLNXhYeCX)dV7a?{a0E81Qvf`4^rkbSsXn(x@tlCmt_|n
zDCmd^(3I}G6r{Qjkn8ZPYl(~|m-SwxQSXlV5F$S}5iX;LAuGds1?op(w@V3Nr?kn7
zc($z2?zs}@|I)dQ=}2SMFsp0DP`So*z+**v>h6N)JnpHk@RhnQn9;1uPsNw9l~teN
z8)D=6Y=g=6YX@%GqSMPuYJ|SL`%P7jvzxt$@>a#SEqFeLmy-kLSFYQ^jvp05BX;`k
zaJUKrnkP++95<?s|L6Gt_%?pfej8Jf=d*tMHs(%iOUSOLAHC6Jzy6r69Vpmg=WAga
zcp`{*+yLULQ4a2mh0TDmAMzOcP|)i@?AB+-%>{bZy2|)9G4h5H9H{wIMb-n4o0v8O
z<{a?H3S|lFl4F+!pC8S4c)HmtBf-c$6xTi9I$+K>?b;@M(wf7VWjYT`Kp^Myvxq1=
zhGp<cLNgI5{~>eUO}z4ZrW&zBzNZ6K703Df@8Qp%ybNxzrt$n{u8bcy&N5XHwuyY%
z>PNvBOUt=cD1mZ{`%|s#o72Ro&ZXccQA<lp*mB}K;;P?2U`rA6KpP`#x&e3`X?sz-
zxH9Qs5J%VA%g;CyEEXgfqLv;J%`X7!^a3s~DjnjyX$o7}cNC;i@`<I3pYxSC%LsyF
zBsgXly{X{xaRQ~z`Z)f$eKgm-y0SPqgX!k|^_;gPU~ITfC`HFL%bredA~pNW+zfZN
zwA5co<tn?4f*4di5TE6Zz5I6z=swgGm1>H7shkT0K~45JOJov$>c>P=iv=6rSuA%h
zx3gj+Qx>Nv`yq~>Q#iU4VpKAqfb`<_h<<wr{<SrHb$S$9|H=v1@(6wl+`Z*rOOl;W
zE{b@4?AEcgqo{%A4__b7Z&YXK)^iI6`Y4JdS*v|7zT=UzH_U->$>FvqQr6wp&g7Pv
z^pk?;17OLlA#wX?!QhS<S$lERoIslt9P!0nO1^Ai0o^NZm}K`R<iUCjW*6JGE51cR
zF``n|<X9o%;z@}mxSkkFyoZM@pZ2s|^{vVr`Ka^M#vS2n<1gPegreI5Z8D)eRY7ka
zI{it8H;xOA{*5)XKv@4YoXV8R7W|q5CJL?(f^D4(oe>G;rw~l<)`wcgH_HTo9Rvi+
zoOg+G-<x6q@N}!dMj*Ord@a5zq`KlozW-UN)C<itg}Smj#V<-7Tm6HByw``7I=fu*
zt8J}Ix{JkJ6(|+ABSCxwshh79?yG3x%43Klv@>1Q7Q(gEy|%dF#GM88!Zt9yr}epU
z8hrA*^$eZ?F;JVEc~T;CVQA8u@J-HyvF(-(dvDtCYd5Gqs#BWOyC|<+_m=Sk!a`f!
zJu%-G^Lov@y(5pE{bbi7;gEc+{039@oSNvC0^&US*PveFH%4v}`P`dDbpoLsY<5wM
z;_6(QwSSG%e?#Q6Wz~Bxs&}~~$)pIp@}izTvK6G(5xex^eCeS+Wa~i`m{m6OV3V~E
zYt5)c!K60;p7YIS=uma9oQQV!vN+H8z<N1r_{*pGV{E7eNmu|R=j$nXxs$R;`C7#!
zmO~;%d{i+&1=TmmNIJkiq2(I>*-cUKWB&)&TjKZZ>0I-bg&xYT*n*5qf~NPlJ>BDB
zxH8MD)&crh4cCxTd_to^R;*;fyaA0qJXl`tQNBjgJts(NRrY2Xi*Rg{BVk05J;4?L
z>-<lGcxE*>os9ZDz2+;QW+o0zueIE;Mf!DzQ3%A*C1?8DcN3N<K%bT#D=4s|?#4)G
z06ousGTT%hR)pR!A8iXP$f)77_ghY(D-g~`fGqI^tw-6-t!S#m$g3N&-K&Tb;_*5>
zIZT{oX}ggan>4s5V$14teuwKO@77yB5e{Dt>0mimmuZyQI>?|6^Y>6IN8NLsiz)uy
z!l!rg?c-OAyE}dKP?uOEC#7HUdeu`0)L_DOoP3_ohML)vsggyoi>>(mM9V|3$XgSy
z)MHtJ%Ma4$#R3wJ-<|uSP!pA;?&{rNeuX5BqaL+j=sVEs50V{W_MD}lb-`mp*Al?*
zH6l2n=vhjK+Uw&~VDZj3fmd$QcSPUi#WkN&?EoA?Zey@vJPRp-Y+SEJftF-iLkNbc
zbX<aWN47ygM<@t9zt<YCC^6z*&UZYotZFK;Bc)up_v!bes-0p9R=36hQ<-PX(lJ9c
z=XBtO;bDm7k4~gA6`2R~>^XMe(pFuqOkTbTUwTKUqpuH^M4@3}70W5VfOLi$0-Nj(
zca8((E#ut#)~^p_{rDX~^%1}0p6ZP?!EYbypz9T5*S!w;S1Y8zqZY2MHup@W8GVVY
zk{9=mJ(yqdgeLBasU6O@3|<Wm4%sB<n><Ky*Km<{vYTkJnODi*6yGLFO?S`<53^J=
z82p*E0hi8Rim%9556TD8kHcTyc27wj4N8-Jfg?dT#GVQE|3~VJFiYMftp~3tA@Ii}
z!z-d!lY<?lM+ccZ(daFFbTI|sE4&A*IlXt6Gfg>DX@v+}uu#+HBV#AalI0Tx%PNo$
z>Z)1k`i^`4`vRE<*6&6lm(CsociNo2*1I4dPEzl%`)WclOAJ6Q{pxv5E#O-Rp=Wzz
zBhSp6tfNz)jD~PqTsGC``3|Q*UYp)e6WIL^jwCzim=W;5$gCkx4-y+ZAasF-ApZs2
zRh1)XqG(f0Y0uV$4|^l!hb^z_ESg+UIS#Miwv|6Ak*!j$S;LyJu2=-|hzV=OvVvX?
zr8V~DkL*|xSSr{<oQ>4w1-_AB%4=;0fy|+J7|z`o=+$|USU1v>Etn5&szRn%K^-)X
zqqSf|RI|LU<M$i*yOA}jF{!lC36zyIZEN_jl4i=t>;;`*)5qtFpoFC&S%DzOfmtbb
z#qRg$|GB`cuUc5Ihf-a2XoWlQNfFY?O`;y}K6DLvTkzOiaJMm!lIJiH#NFd&!vISS
zj|$;^U8P>?8ffm2?bZ72e$6d+(HmDdNLFrvUP-+>?>6(Sey0tH*1A9!x&3V6$NwdV
z=Ro=3ZmpwgG>p_L>hU8Oik296YoQ)#6HkSf7B~?MeH;K)G*Q#ebBpJjOaNdiO!>hj
zt7~t(7q36QzcAH}AQz8`#eW5Qy)#-%1pe_0%AMm>(wXG+<$_+>bx|rZnkZqcgqo40
zfm9u2l>G0Mv#D%7l&BORVbwi3?U*cM{7Kj-%<=IN9fl11DY{`L89nBF<>6&GDFrdc
zsEJXM#d#s2C)s~H{U_5aUwu2Xrn)(T_Y2gNR{Z_35Sv4go7Uex(D`}L-^0&o+@Qkh
zN4=pBsvQsi{IlApJmV$1_irth_D}~v)*+m`SXC!`YMB*xax{_dk|43KHi{m)?JHnD
zZ-`y-5zkv>@PjD|ai6lb+bnFYq%&wgfT3*S<5a;;7TCrN06wndw)ED1FFY}=G)~UH
zIH01#4H&|PRshz?(bFH4tqA=3tw;ONCG9Zg5@Nr{>$lWZyTmp$I`GzJV@BW4-=7XF
z1dW(BSg{JXQF_E$9@~K|wo^ZsqShBYPhMHjtE_!dwf|TZe6%6Z2}&9}&i9*ou-?5|
z#<<=BW5k4noNs758d}X76JN1G!V;IRgZ`nKW{MKi)+}wF#dlIqFKC+1)C$D6W<Hi~
zZ*}Be=M8^)xoYa0;SUZL<{4b0u%M7`5o&7!1;3=v-xEe3DqFM0Y~oARh0eWYR`L7h
zWA(_zb^RPtFb21?lp!uZqDKXrNSD>fhIjx^2`0{87X>v<I5{C%l`Pqx-vh-|wjI=I
z@jFDV8EdqT6L7FYVH)Sen$yZcV>}yRzkQ%0S-F!rDqg&Z@#0ky`%1XzTzD_e+@4>E
z?Nb)fBCoZ?0~3+vTzv62r3xM_?Fq&_>Ruo*c<n+%+5XP;2hyA$*n_`!!|tg_y%A#!
zI?t(|xV&>17_rE<pX`#7Hu3%UxysyBE|Ev#FW+9iOImpnd257+mkE+pY*~+Qro&v;
z6??%B2y`V%H$v>O7OD%EWlJ2uPilX>X#oWeE#g#3C5EuuWbqjJrT2V?&+<fH#qmK2
zvf&*^+j;GCbN=5DUIguPW4WQ_t<Md@C=0xZ^YohhaP?lM!&HZnXIMFtvU0}H(JWd|
zEl_+h$-q#u+?RSU@p1-2_PJ^_&~dX=fV=Z3vubVXTR$^k&L)jLVJiW{iqv_6(A1s{
zfi_Kr*#^-mC+%l9Pi$W95@b<m-$=df^-N?V^!8F_vh2s&?@XX0E3t=E+%>VtpP^5b
zO7CR&OJ8MI29&WDxxoc&^dVlv^Zet$LO95pXeW1#mRi8U6xlHoCno1g7G<)kS|y~H
z>Gj)r{KhnH&+0=Lv~W%J(gK#QmA5V;um2j~uzvR`k2hK<g*Rx(72e-2e)Vtn>VLLY
zgWKkw+3<M&)v*!~;1Hs_9J@b%7rf805z2EM>DW#RK8ocjADL@V%d)T7IWBIy_IR&H
z=i-8un`cR~z;rqo`c2ylX4I2970VVDU#cW{E~^Po`~2LZJNc#cOJ&*8!bt|2@E~@G
zz4a44y@|uC?(Fs7Lua@u$a4#G4IcrwzVAF7x&VRA!ALifRSm_;a>QbpaVib3k3|Cm
zrRs#G>K+JUu^)4viwf(<WFebHadS4w<TyG7QeO=`#WXmRp}c0|Gc5)gAZNj4W&(M-
z;2i)W8V!7Bcl7kVmOppd`&;YToe0Jl@|)fnZ);%Z66(NAT&oEQht<=<@MSNC@1Urf
zGeC!{EXr<gKbqba!=>#N^I+n73<df0U>b=Xt~}DA9D6dD!>^bC_k{R1;{!xx=L@Ss
z1RjVL)~h=035Q+=T5nWOd8`9|m8zB;6glY1D5n=JebM{*)zDoKMF(W=LYsTa3g^#E
z_HkM+8_Bzk<1_3|WynVL>r!(%+{QjZ;v+_|#CVQ#OR*(^C@}ACw-#<GC5KC+ny?>7
zj?5Be_I8Z5a>eQV@jLFkG6Y^E!nxtcf^;E9+J^m|GcH>0Kfff+pIlx)aoyTb_2_q5
zynu9u$xKZJS@rSA(L&Q*9GIAS2ii{)gZ%|{D%)5+eV}lWbh0C+7*g3B;xAt-mY#u`
zrP5@KA@@Te9HC!inLl(3Ajr=)H7Un-ZnRi5o^IG_BnouT;>P8oWe&7{932<&-1i`U
zw(iq9oj7ATX{Xf*J+sU&l6K9=>?s705mQrg+|~ZeeLy4BZRXVC*<B#e`!uc_M#%69
zWhibhmG8y{)w2cLCXItC^_V06W_VRG2yc&%yRc^l%()&tevF@QvCeqMWGD7p?O^L$
z)yJ;^=~e4N*_nB}c4qcp+8Hp`IkB_t5v9$QYiGPg{{7O53#Ly(k&cM9mjNE5SaK=^
zRfQukuk1~p<ZZ6PK1l`?&_qytyywfdfpWeU1SNWxhV$zv)%`s4Zcd=Z{3Mzi{`~u{
zQb&QXec2!OYyoIz%zrQK%*&f^XlDSjcW_`}<n5D9{oD`1k(B$(n+X*GQ1B&nC!>Ad
zR<c&SvU!bXx{pA$RDGN$)L~sa2aJbT)LG(|7?NAdC*UOcu>v6PMY(F|k|!W{4b!kG
z@-`|;d6S)Np5i?Hfk)U;CyA7}ba)jCIMharqzxm9Hy7yCAkEx>Skjg6Eh2>S5(aXZ
zZewkb=ZTkA5q_8aCBy$`{t{wzK4vy_pqgy=@;{HLXe>Ru<6kU**G1=V+V`o^=l)xY
z4vGEB=~c9MZZxd|Hko;6m{xNZ>?#{Ep1fVeF8cA>9?MJK%AzxJn`8D#ruIl&q{w~U
zB{(>ph{upTCtIq~0pxBO<??(fHX@`Z3aDMeY4te@=6*_Zvhv*SjjFUp3~2(rOzAy(
z9wLbloq}(g$Hx-0)kC=}k-94`pl!|O(>t(!hW3gq16M*L3)<|~blB@jvYx&YDE`{5
zacPU{meIwmD_t|R$5XpuGNTzBk=Q;;8Q875OST{V4rr#|zIHmKT{|6mueB2xp=(w>
zT~7OdnI}W+{(X5eGrQm9$$-;5OszNF^A1CX&7Qht|9ZRQ_c1jfQjxGEKkND&_yZ3O
z{nf(ib>!v{T00{}e=~0KwsAa(x?(vRI4Q>kqq5Ppq?HLZrwNZknhW!(fwPX$#0-J-
z_>xEu081xyE`gFLtY<q^-sSBHBTAK5TXKYK6dXR%a0{Jo_i%apuRNKrmf?&s5CA{6
zAFJ`Pl=3~2m+_84>Bqx}D(Kd&{qCI61h>z?%BpNlz7W6Vrt1xdV`c#={iaQjwNd;n
zdbiiH;+*Tl=aDtNl8?(=)IE_K8z`sOg^+?HuksQyhU-^@UN)Z7NQ+<Fpaf4RB2UuD
z<$8rF*rMO*^7krB35;GrmJ*16=KUU7O3DAbW+@%gW+@$-@IC)}lUJsv?HcwnUS|ls
zaS0sKNoZ+FMe?R<G1b&}$Y^-~6&a1myJR$@zsYElU&&}JKRIZabS}<r`lnpU`2S$;
z&BK~J)Bb%G6<U=*ZHovbP+DoHR-`FANkkOdQ9x@)L69w#RKt#}*+eV>SyF2&J5gz+
zmLSB4NFjiNi4F;YB4L$X2!t(=gb+yh-O+hPXP_;8JHPkaKkaeg;luOX%XNLO^NbhN
z>ISe{F<+3AM@$ak7uI+|^<oEFx1D)hm)<UaEKZ?m6Wp@v-SC4a33#p154y>=)8Ev{
z8}hh7rxr*EbA#E&;;lAWNP%;+nakyR2L-pUFp*rK8c#2ne$QrUqP<P^u%vx%mzP<7
z-%){W88b6FD%OLFIj`MOH8S9Bb){ABDyc(#tzfF4EX$41cq)H5%TpRX;8aQI8*|@^
zCg6)GP$O7rk!y;C=4vN3PbYHPri>b@LZr0R%%^wC*xfk|gCb;JlALu!O%x#8iX|u>
z56t_}+f*9lux;mSGcP$9k2P&dL0DYnO|RkGwTUcsM2QUg(0!eIL7M!DOvR_HDXX(K
zW4f}tQvBdv3Ju9;6Y)pS$g(>1iC@n0TS<F0B{z~#7GLLR*aVpR<3qz|n!)6;^2BOT
z;wQi|<9lp*Vri6fFNwFy)D$3O5Gx>L$g4xh^!*<oWbpiAU|IhSgp4jY$yjB&Hrc;8
z%GB%v9M_UfD>Qn6NhvS)gl7&3{ys4SNVvfHrpFxdtMZ>~36C`_TBVnpgU5??X*LUu
zofWBDyazz{$e!YYAoPGm^(#yuvfsVAvnb7cu5D{Ak!#lJ-00rZ)$rKTwEQTF-<@e5
ziM>?@6=~RDt@8nQ-p6RptN)(07PhXwTzYPdnbF%M(gCVbomz^WMK^<WN6wM1X)q5R
z^4oI8&n|oTJy_&M8*ue#HakM0T!3If_RVncsHe~=2XoK=qww-FWT}>T^Fm`xq!f(z
zOD3Lhvu7u*!<NmByc6;_70>o>-q*sHiev<EDffk~U?zKxkRfG<!v6yy16egfCPwhT
zLCA#u8HCK!-$KYFsrU~`t3}B4I7%Y_-$clSJVVG3rdB}6M3*6{bFKg(Q@m0)#zcjX
zF%g^D{C(-H8>c$!o^`vh++w?XeIDr8MG}?$+3tXBFsgaMSsXBuem!{mRS{KrTK=<k
z04-Cyf9e6KpW6?2us5)@vB9&UUVfzvfN36>^l{x1)-Il$vx8U3+8_<x3s`7tPPREC
z$_?$r1OdMAzS<634;XBk?nImMovlGxw?X}&{$L|IwCid^GJW_QN7Fv_G@}m-^*2pD
zp%`_5)`9O$$k2HgdEdXNJ9DA#9r-QqaC9@-+#<Z(k{T+*>0kmzbLk?Dwf81s084=Y
z%+D23mciZC!!HfgzEp%sthu2oQQg2NH7wPrq^jr{!Rqo7@L=hC()brbW)gmLGO=+6
z9Q&ESDm%_9hAdhbt>nx&a3AUpBxJm`&;}oy^ct6eFBon!jD|`1meu8yS=O~O@2;*k
zt?-Mr^Veova?}tEHCwFz^u<oxSHN#Dc2Sa|sxe%;MtRHB5o&sSNL<ranUns;8?jjv
zYmMC$BD3O9A>NaU*t_{!F?MDEvr{s6QcZbZzG;11N=v%pXX?0-x<t&7jwYu?!*m46
zX#g=3C&9%0ln;aV&zWKrr@=re_xd<xx!<@}+$GgN{nFf<2201hG1VSjv63pM0(Z6s
zIABmJtH+Vz`0mrQ$Xy|>u99m1We_q^JO3m?W<Z6IAwNgRu>Tz)1NpBZWIj_ZA)oyT
zgba>_S`|XZ;T4389qo4!GHEXmGT~$YLde97Eg@u32`?dJ)PD;hL-`Mc3;+O*FJ4<=
zP{~CVvvPSQW>umBmyMmHFW*c^dFFPW&bAjRQnFPTbx&7_Id)?|EpR-8#UdIArb;QD
z?6m?xb7VE&y;b&2{8dnHM3gofW1m2>NbEn0kWu?12$|`U-$TgYRS201OTZi5-e|LQ
z-Fx}4KBDUAc2|?C6;59ab#`_#%7TmUIH-mtM>LN;ed#m9sj5=Ui*LOW!ug;7PyGI0
zE~QBfIP(XC1Ip&u!ggbtcA)$QJ0UGEFoD@CMQ5vLTaRtPP@ph{KQO-p6~$K*foS;R
zC40gGjZ_J1_BU}v@ioVC9(hIc$X@r-<#OQW8sBe%l4y@znDrr+ge0<GSD)2t@Ji_F
zV7{4tWf#LI3ElhQz6ja2cum{#h3FwzOP@Y=b7b9d?5;D3rBjm4*?mEi?Kwro)x#fe
zw1wp^fW{x+H#K*@#IdV>k3r;2uft7LLo^{GLgBv>1Y@-=r397c87x%KutR^qrG(vR
zu@3={2UTaCTmY*T)!yM-n*3rObf;Rdb@pIkw`X^<=jJf?O|bL21{P!`XK1=>$ahDB
zybkI1sno6S>`>os{T!yc6T9QUuXdD>wO2LPA?V5<d(+qOtGDr+C^>aMmu<v_heJ<)
zY>XxFhiX_^jL)}Tebf_v%cQt8r)aWUe-PNip?xm0Z(A7|wQjt>6Be&EgxO}tm|_+|
z?R#N^!wP3M8`YW3rsvvA+5&{?%m%se^yPi(MZNc#OR0TsZWH*S1Qoce&{06Y9@U`?
z^_TxVQtC*|vR^D!JZT%NaAY3`GoRfd7=@tq&ZM4R?C2E+(gycWQJInlpnyuj6dVT9
z>(uD6!F|P42ByXdg-)Bfbm^|7`?2@T8=!oL<nIMo#KZmfVBZh!%J3XgTX)Un{ZT7f
z>?ttEY_{+fXGnXaO_)XvUS2fUXfP?7b>M_CE^W1^R1X_M_2T6>ix59MPq7oKEza;;
zSt)MbwpEF-LJvxNI2}n9jSdYJRCjgDXHR~ztcESI=921*xkNgrx%A0Isz%jMgkIjc
z%*WVcrc!VLmlDi>>dKm{PQW6MD`{#9pwMh)WpBj$6qIc@Ahg$+<wv3FofGYOoD!0U
z0X$5ftf?0P9Lg5chhP<wM{!r2>@JBoe0ETkd4oA)_`L@Gj&WOzsXCvHL$k#pbU`hA
zLGNAly=&MTHl(E4jA;izz1l3EWY=yI7E`UKj2+FW^0#&)>oS|=g0I2Qf?T)OsV2=i
zH)3jk+lSrzy~VUA#Z`~J!`(>|Ck$bMt~~?$9fr)RKcD9n-S<Ectv01lSL)hn#UqZF
z`KNL-iK8U$3JjS!w?E2|x%b~^$h5XjDo0UY@sLYR=$Ar=+E#1VDQB~0CwqbywZG5w
zrsL-?FDArBO68Km)wkKGIm~F$2&m1?swij6$dm?Nktq=ai!{9-*bKV!oQMsjtloGp
z?*IS<!OaLLsilz^G5;z*wCi|}jjV(pbs3`b#`yn6rUYA(DYZ8Ij6%{#fh21=uZLMN
zmqw~_d2t7Ru|BAtlFOeeI2HSY2LPr+HMsHX<kv?;cZ##yi2-2p<8ahiaF02?t*ycW
zj5;ptR}&66fr;|^<3s*ORqY(O*nVU#Q#<gnFSmx3mlvjZ7{B`nOw^<%EM3fFhIvw%
zRWi388`cx7#Utjqv>e2D>Vtcf8w{(RW#?Z@GLOYG&l30Uot%3Zs03XpLp7Y@CySYU
zcwXh8S$C}biWA2{6AbMF)C%#-frs_AY74ClUHE9N`k)=q*F{GTNh-5N6A-_LPN|C-
zqD3%jqMQz1jZNuyTKK9U&Dg?%Do8`t4aPL;1%@Nwex{{_9&yTtf}<#@^qA18*c|I0
z-X7JEl6LnWPSiUwTrvdM!>~EH(=^4PpvjESpx<FH$PTtW>}xME&V$)v8y;lEMZ5TE
z4-`>?xF@%WpC{5z7?O|O{U-e|d*_<d{c3xVZ|EEzj_JBY_H_Y$%{A_=F<+?PrG0Ns
z#X>h7A_dCWJqtOljB=?ye-?ds(JE~l?`tl?h7T}mH%s{B1z|^c@61SwDUh{vi#KUF
zytC}r^d~NcfXW*g8Va%`3s&G__&VZ=*r~bDx%zf3Yw@sw{E_4V49L^k&Qi9Z<R#oV
zstxW}r_u)l@x_v3h;pp}abz|SuD?0s7tW>8B7P!=?81-f9%Bb+Vim_<1Zn&z8I&x@
z+m{f)X5Jg?3*l7W6xkomt&wf>(y$F_DiXE_`Pr>W!q6lez<@oh-D%@ks%1j-X)|NN
z4cE;=bK;%sG=`rOjhEFmbaLGL<M5(LMPjY1eK3)q_qAKN9|#$GsRFLCE5dd5s<!66
zu>Aa`>z{#YYgSMEaoMdoYCWjF@xevN4=%_&sx;pO7{$2C5h_1j86+=GYMQ7$dpJ<h
zBR*kV_#`j1za$%in*I>GE21OGs9WCl=xJtK#T^S9Kfwo<-CkkRx=Yl|dx}TA?Y>^T
z6w^rFc|vLwV$}IIjx=z)2P-`^`?~xsO!m;D;i+%$pOE}8weEUz!`Bbl-4yjPiRrgB
zPE5jj>=nzSA#LZ+r-mC5_lz30X(6x0RK`~y^$GGvSuo5qTHT}_KgDyy-C+jjV17vP
zW6YhZxknLZ1Arhy?e6N1{qgsEXiK$(-|w5%+fPw+7jr<EUeT<<9MDiS(<l;ohhCZ~
zQi^9340lxpwhoy!K*!C~wh5aVfr@|d${(Jrau4z&Syl0WIJPjX%kqJz{qh(fh!Svq
zZpNcY@3HhdGQjWKPhV25CemQg8?yVVNEuUAp@k?N?d`Fs%~;cGxv@}UZu$FFdz(mK
zRG+;`JtV>~<sfG^ARjBL-yY4W%fMbHQ_h;ISxb!*An^dEBg+DR;{91;8br<aIx?cw
zlYz)d#uuVuXmca9#hLNW!ry?%toBF;(*U-!g_xr~yt~RP?b{`%60etaw6oVl?aJO#
z5wFDJb;WKBC(czu;C+nqq{TG@(jsL#^+6C}+PF;%Gcf*IRB##^HQkFQG^A*vP8T5t
z1ROF1EwR)w<FjvOM5TtOE{<Y3PP}(xX&Ld!v7vlHYkO_%qn@9WA)>Qz6XnqQN>~fU
zhd`j!LgzkGoMuzp5@4_AqAz!n3y?O#LMO6dvU^5QJqozaP?!)P7|o@q2HApK{>1zD
zT4ys##XOwPS-9|Yf%;iM0S+WxUt3MmHCUB&9mbe~sB3Jc(juN@m+zXD7nt2o!RU!b
z-a_5E!N3qaH5ZE)<=4>82GH$>v?Q|za|`gbRLe^okLD`6r5V^+qByQ|F-_A*8O<E>
zLL+!@-(9$hn$wOUv?=Cqw$TyC?WWLgT#Szoe}8SWp{XIi&0ql~!$tcgHCxmd&E-+%
z$+|LKRJ{YS|ES_P72lS)-xYD5LANxuCVm7_J}$UN-8O9``^7Q{&Vda|>|~c}tL^w~
zvagpA?ZnG#cT+q}rai0SsswH`u-k`M=!m$wf_7uG+WCUTw{w?nnPc{#27_Bcg(%zO
z16qn8RnNJb=?ezC+QcEv#m<YLfaIm3g(DE$a1>Pd^9-fKx>8>T8|J&iv3kHt@zW{7
zbZ@Y;uyZER+Y%{A{1HhQ6@POC#w_&*hW616go!HcLzLtv#9+#woa7dxKz7z2;9jQ9
zjIrGiz&RdKkKQ9N+ILp}yG`#5J>9E;8`D6t(?4d*L)Z82=bnOwU4$X5MGPczDCg->
z3bP8UIVR8!|E9ItN^Ud2xL_@st&(S?yKThbZ}Y;MuVUO_Oo_xCiU>1{SJwz$P#<^h
zguQ&`TUv8nU7kNAlf^e*!b|>kp$bGl+uI*Jum+ExDr)}Y5E;4K??Ytl8vYW9jN*8X
zIlXTHyH%_~?}~R1E#87q@-5#+RN3t@oK4pC_B?TdIrmiCDSK%@`k(TF>KthI0Vu@S
zeW1MH^y0;NqG}gK{qSDOE62lUhsNHhzk^wo`<CGfU~m5DzYCGUY3MklnX0crWtCR$
zRthQ&iOLH#ufI+b3&|goOB82EzeW>yP9G6ysar_mp~Dy=^o<bY7*=zp(1ZeBN5q~f
z(;UfE6U+d6W)u_Ccrh95Sem0=4f5pd?Cjv+;Ly)jI0vhuQ7%spoLLHxl|WS0s#^Na
z<=(94GNtKyBN0V)6DS3OoP@9ZV}B&9@u8F|+GLHSA}9)1*fc;E6dREEvR;sXgZrge
zHx=6u06Sc>E=PJUzwAbKw7iP&eq1r;7BW;L)=vbi#C&HnQgpCXHtI@~Aj*dK1asY?
zVFL1m{oXjl`S=hs&A(Y0`JjtZOO-dBO5+Uq?2V&#`5+?2p-|`6C%W8A*cR;UzY$Pk
z4Cf0sJl=h|w7kiks%vJ6F)4@?5A7y?LH1PLa6z%zn)aY0{9^`+Dw=y<`PNwtL}u*o
zs$%c*B)DqyGZI{jp)8cusVhFv9OCM2?%X8xV*rqP)oFfVPXJ`^PDRTn^IHqI)uv=n
zOUor!H{OSW9SK=T9o9>CPW%y;BWK^AYlW9v^w?}Id}77(bzX4KcN%mcSm|#fvi#uH
zGxSBL@eh6>N0&=(K~rK7l~o*KNW)o}+L{`(^wc@l2z(cL8=muZF0;QI@+B1gQ$cU7
z+IkQ&QwlDcvlf(3MR-o#=_uC|5jmN$8ndNURRWPyus-oIF!cVcuHj&`{1Mnu)f<u8
z+qk?q&qTkg`kdbI>09nic_C9GIXYJZ+^965*~xkG6GSs|a|ti@i)>TedK6y3;OiKa
zFMO{i9(~B&Q^q$}C&~eVP0q=Sxa{HOCm7#BCJuVd%0e9LK<E5N1HJoR(7{ir7_V^f
zyES5u7DEmC705B@l!<yQE&2n96B5FG+KAJ}yXS*lX^TZ{ui6{;f^uN((UQlZfeMKo
zztM?=2Rc!d+CA!VjmY)c!!0~Ks1Ih=+adjH5`q*Ve5WXVHaKh+6`Rg^HOTtG4*pv*
zrLBfwMDV#xsk=LmNx+pplPQ_3##dbJ{9L9qtr}GMPni;X6*8r_f)(bicNecM=DAJx
zI_wI|hcE7g#0v9kNeDeUtFR2IguL;_gwc>_5A?e(nr_>9*KmYZqe1=l!Y#Xr>(MFd
z2{zbo)S42yD|7np&cVFLWv{#CD#xrh^*h~8ut43hemJ~`J>`2&emD?0<mZaq=to#^
zH>QH;1WHww3j+~<RSi!c@uW#dM-^kBs1kRkT=d#HuW;N?O-=7}uaG;OHpq;`UKRd#
zj%8=+Teve=6KZN=zK>%ugeVU9aI7fUZcbaMTQQ2?b~ZK6H0I&BU45;!L^KABqP{3a
ztVO?McIT+r1Y*|q2%YPWJP77Y-68CIR)%D>^z4LF>B#xs{TYZ&Gjg4MpAx?c|6J$Z
z%~ZQQvcCK{6%mh!Tre2)1qixo!@=WdH(>!+&e4dSWM}0}v_=alF*8l+c6NtKkT@Ra
zcs0*oF}F}XL}0sKT(<sixUN72v@LiAX#0Dy-ltC=P%#p3mARO=onB5gw~>DGS#xsg
zm2gU63%Y<UAJ&!ao+@B_x@Rk!GJ7fubGtfH*%Ys!0NHVBX6)nPxbqUsT(W-MK>jzi
z;oqhsA|r$`ji(Br<uu{JV0kEEL91VsuX#;bJCR5FHUOf%L*3zSWxDk92HCW|xDWVR
zh47ziABeZUk0h=!rEFn}u$yg8_tysyPRBa(6OlCT$(_jQTS%ma<ju)igP2c!2pFC}
zK{|8?X-%VmsCdo>Jsc>{jsWnIX<1po3Sjjks$ScXxi@l`(12sAhc&+f^dcGvJyeBX
zP!|U|O;D!^>=BDh^&5q$DqF#tGqPq6XBtv)yD8jx7p_ud+^veYB+-#opi1%$rGsz6
zishR?=d%u=`~zfK7;h^apT!C5>_i8<V5XyCynTd$8*$MV3rVF_#8H(aXzbo=6YH!u
z-|yo*x~eS|Y+ymN8!<6!u+TACc5-xGyW4O2lTgSHZSdScP1G%%P>3=j%OBUlviG{I
zH@Kt9^p?+!bar|y-b~rC?0T#Xgqa}KJMG%I_Qlp-b5j-b_^{#IWdie46+5P?G3n{)
z$US$VZ;CyeZMj!I=zs?B#m=4Yr{*DMfV#(l#%vwBpJ0j$H=A$txeP!Kbmiy)yZZqs
zyE(x)s|Om)$GX}gg}dJ-!M1azLv&h)yoB!c&`5k!9~un(XEP(foL458)kV7PR2k$S
z+P6A<o2<6(uwF#vW`+gdi{HKtuNC&%uQA*oQ5O5}c4WLIywqwZr<Xy8eS>L84mL-A
zI5^fHsuMzNxL2M6l1DqrBrRqh)KZDa;bGjiD5S7eWjwJ6BrSi$%h?R}q#RCx!0^SU
z<fEfX_HIBgdjzU!2kDoFUAr2djj;nLKRDA&W<gJpo}NXXUZ0J{)sK`(TQ?syAPUBx
zuo8+zLwm_roC@-)f&o|dHp2oYqK%9nWoO~Xl6<R&GRAiZXu(04(d=~3LKt?Ev%SK+
z-GdUnKDRWdsluOF@(tcp)T^Ip-v87SXD{_SI3<uJ*XFe+_c=lJCc#7=!5_C~ILj)W
zzR|`kk2~`%#8xdAobN_5Zm^vmkV`?ES}W|sn-b#&h7aR%Ik2xB*NELn6xi9$0~|)|
z?8FdvepY`aNXT2NT+sKXO-q>U8l>ulfv|5a`!H3lf-Ona+`F0f#<vxN;!iuj;$?aN
zt%MqTnT!mQ$b2jl08j_VcE3cmH?@dVj6Lx$=2{8!3lab-16N5eE-wmpStwx?P`cy{
zJMqnYV~F1_es?{?eJcz^pu>(hn3)g-PvCIq&bNsn=Ux-v+S|8RxWVpr>TH{~=B|BV
z0!&^6i#2sisJsiR6@ZSi4NK5d9P5nTH73Kd{R92i>z&&|8ns2wbaj0X)-V~}k&=6S
zD3k@WRrB336viqfuJwI?*=4u4PBn{Dhy0Yi^mS3*1<Q@ox}A2*bWSw7wB5k65}Y4v
z8{hpE^v&I!2M|E+#rtHhG4g(;G^&u%gUcPCzpj&QuI7%Jzx}8}8g?Yzle1Zv?=fG8
zshG=Tx4VsD1H;^5oudF;alwM;2VHRMJmT^Z9#PG}cnjT0EzSbP`FAOAX-<A^_c*J$
z7DsQn1NEwyYBS#JH}1sHMB?j8k;E~C4!pJvRD3i+!hG@b61L;c`&s&=yB>gdnvay-
zV)aCaMIV)L_&HB^$TE5IF4#S)KB>}!%3CM^*sj)<EEZc;7K^Q~SS-f&fW_8!&(8fX
zj(kfuOzmy!cvKY17DW<qcakzfBh(-4h`j^Oyq2krGFOs07+$yFb2LI_{k2(fSHi~!
z)(s?<md#t4(mUM2c$p}wq+nxtfP5AYX4vp!>X=}qIR)Fm&1$!$(et~<IEm#`zT>$?
z6v$kgF@LTE*Gtt8fS5tx>JC=#rym-A&=zj*Prl+<+CF6tVWhKe5+z2Ee(=3X+Bdxc
z^JN^JJV^A@CbSoq(?@EzXP0+n^Q;z_$#4rvLtFIuvp%zSG=nx|wrKQ8MYiQ+Pk8Q9
zoa5zhq4x{bYx2b_+@*O{9tNpjzwA**r8y}y5`jL+D*Q?G=l&$nJ^OuslB%xo+x{fv
zP2S4>B<VNH`IGD(Kl3N0|DHeTk?NoR=oNobq-u{ovHS9}&oAf6Gto&EwNGum{6?#N
za48O^bGM*C?hT*1TAT%rEs3deS#vdWl%DT2W&1Xk1{V!lrkNvp0FlhP?FdgUy`)z_
zctV-qA^(MajGiWXT(A)*|Fx)k=sl_$0z1$yw5^}77x_+7`yAFc-c5ve40L%OHPG?7
zg0@I=f1l$OeVLqm%_)VAAyl4)8kD~|`Z3>4IEt;3?8H`LXKn)dz+{SPDGd`SrQJBS
zu(OPDt=2`^GSu$GeDJwijM+dkSV7QD%T`%>e^9*}KOmjRFD)TER7;5Q&ZP;hm%f-b
zmG?y!X0eDEpuz=IseK%QFa8JoO<b`kzqR8!&L3BFqM4k!J6jzl6;~Vy9>-x^cUA#t
z%+)HJ{vxa$uAh4^K;aJMV>R)KWs6S`5_b@P=-;McHh3oiF*(Nd%{?6G2OXp7vXR*X
z1m)D8*(7VJ<PG6Heks{biY|_}=G8*?SaiZ_{UDzxO0(Hrd$+f$?c_Py_0Msh=D88y
zipz|v#@wok=%Uo`kR9)=WJeSgcYDe`sOR~|oS0ybsj8|{N=Z#C)aFc7r!$k84{Sbt
zv10u8@D-~%pNWr|<6e;wS=`O?Yo~4&kh8$ZJ^xPRK{UEr^Ng&6JwCAJjQCWAw~&U#
zKfHGcRbQKTTyU{;LY-TU1}}n983t|{iT##R3d(Rrk`{{ly{Na)t#)<Uov{L|`uMNc
zQ{I9&LNx<iP?yP`rYUKC<eaB#x2F&E#c7qa(<obv-mZvgWL!^(IQnUa$X@(oRe7e!
zxEKQSk7?V=7!rZ|^DgU*rclx}Et0>P_Za~Tjw579VFsos2B`_+gin6opETK1-J@d2
z0HsGe7!mDUHAAKvl%jOBs-Oe2sxyBXIG_NF(wH_s(L(VU?cl_-sPzh&r*q@E`qFa@
zCklnguzL(bDEGXpB`Jc3kFFqzd{j5(6k}^X467d5@TF<xutRb00RkbTs9JjM5>>7d
z`2e>Y<z`if{yH9~fiZOm8uz+z;841INuAl$Ti0yxDfZ-CPomunWi%wse50*jk-3gd
z9dQ38a6`&w0~+|PJ>k0XxfB;7*zklUtOkH5pE!9%vm$27s1=5(tor2_B0PNACG(w-
z)wYow{>6}~1#~-cWM_16Gm80GFhXVd!;z7(H`<%M19O;dbtOBxy~59Elq&(f;96d$
zy_awxxd9XxWWFB4?5$6>TXuSjlW^Dn5xi@1|E`VYw67ueQ#7+3NdDn5K{LCzVhDb)
zo$umkA$w**wrMtW$LFKR-#eA(bocC`^>KM_i=R&&SR?e_EEG7o__cV%Gs~?Z=9w2u
zk=Sq_G}rw`QsdyHb^E2(;|=_%V9jYmaK{KS!9NnZb9`x-AFD`*G3B}3%5(+^)Vr1E
zmM^+!TN$X%Y`MWrONZAQsOrq7{vhn-ed<L$^Hc)ySub`2_@PKu<nSNHVz*}7z(p%K
zp+$V$7{$G^*r5yxke<j#7ZEOd1m9&4#n{f-)GdgJMt4{);;GDIaoGJ5jC4kpNs-fv
zT<s#muC?;o;l24(Gxpr0&$?oRM~h>UK*<h<y$S-|?~8gVe-G0+xNBzZ+QTMqM(E?2
zw<8x6+lZg|&uFL_Sg-d%D)@Lo+N^Be2w*86C0$|nglkb!?Fp@XXv+>6y4G9IMu<f_
z(uxhd_kj^Y_E@<al@}cW(*IyELNWjGDm)DpZ-5QzrqzMB|8vNwW-{X$!b|-g1Rj0p
zY@@NW1JK6`zPjUdG#7_YvM*`&NKLB>=+9`Xpg!GEcLn3$R$Y{)Yn|pmPPLIAhv|Vh
z85nNd(`cOcDB53$w(QwHoYg+_21avSn#)KBEq^8*9edYJ+^4JD@~xWD*@1KG9GwiL
z8Ws@Kfb0ow-`A2>p1w>wKf_h=`ZicU=M+JF-$KVik<w@E!@k~NBYS7;t;uVqvHXc+
z-lN6kv}$=i1F39FoTKPcc_2Y*`<Hz_&#SoKs>Ft@md*18fjO9JsRx5KbPxq%scqgx
zfLAAQqLx{=XeS@4wc&^{@U6A@o%|X{O{lILNn%1Q`kKn@k!i=5uqdGKPH4K69Ona1
zkmry+S-k1q`VLRdP)+On*5}@rgT1lV(<Q?t4}W<((LA?&jm0?Y>g>0p9P;GrO`ft-
z4h7ZNF?l~(Bjfm9iv~z7l;q#*0Xl2CO|~U{@iglq40LvA#`J2bRWj+(W8K;XKb2f7
ziu4<3=bSYvfztf!<o`fq2=xFWWBcb?YpxCdg2>FPmYdJv0)sMj+==ERMPCiCJ%?y7
zoD8i+A=)&MiB+RbnU`#;?;Irq)8jO4*cdf@96e=UY-$0FfXo;%n{~Vb9xFT~v<fN;
zHo&`qvkQ4sl2i-Aey~k=lD~j_f9lt^${%!^d+hR>5DdxGiCNmCf!eiW8p^f+K|vM9
zm&MvcV;_e_<h(_%ipeZJya<73wCK7LfFM+X#k9a+d;o~jR}4>fKf$kTQ2KKPr(+EH
zJfNg3V^Fe{{x1wl);C`@C^`K_2Bp4b3`!)9j0A+Kq&ds$e_h-D#Rz~sh?0Sk*FR5@
zA>#i6ij3Nd6d98KpQFh9iHl(#!nWeB708bebHK&$>%1U&{z%Jp?+)LA#h)}4gYtgL
z32%Hr4LbowXd9|=%|(plcl3+ywF0h(r-nsr1s8BUF2vBw{g3i(9y?g+Af+jVXbW;F
zv1k#B+6S9<>#?Ofah$m7$&a7_trNm5QTO+1l^GVg_~192o;SEF;7bB5&7f!N;C%Tx
zKUO+r%vepz(sQsY&CnJ<Hc60dM|C>0-RZ`BjC0V;Evac{`OykuU0=Z!OB9y3mu5`|
zWSwU^6F}8}W7+Vfm62*|zDj92yi|YFRBg>_b)PT0HQTOBPuF>2P+H8|KzN*p=oY&Q
z50ESst#x0``qun(M;R=?d9fvkXBFDUCBx>vH&3@2uhR-90D0xXu@fG824>>#^ny*T
zas7{YoL=Q1CUti)hNV-1xeuH$P|1!CW_4)Cq&e;<+y=!3hV#r|c=Ts|H)B7KUfX<X
zc<&&3lC36{>wMOm-;F$H-l+GXRlwf+ta2@sVT4wI2CT`h`=0lQyDb^8?Dp*(>`q+Z
z<9kEpG>Yauh#4$)6b?wIgTG{m=2VleLBY&lSHWWX1AQ}KP-3T$8eTRiu~%hKn)%-w
zl)U#W8I(d_GAMz7YI>ah%Lb*|R}4zfmkdgC((#t41&G<wweUqP5}eakeWZh|2jMiO
zUEw6glhhcHD*t3(v&Z-t`mAj_H{pr>qIuQkSX#UBP-B%vALDwIUQ=52qSGA9uM9b-
z9gxTnNzYeUvgxpxDLNA4NQRa2^Fq%I)spG*?Bs1i^f68atDHrWm=EP+-as7X+}qEz
z!it4szRbbkmIvhMn#`@F@O9mkQKyo!yGLI89~M9rlJ84dxJ)bsImcSa*9~U%<F!X%
zxssNA2XWM7jM!Tu!-8vwB$NAe`#cPza&Ao&gBgLb6)OGD+GsJ0N`>yLHl_70tFS4R
zJ+mn>p4*g2*-JJh_A{Fj?72;e{6}p{q{>%qO2{!K;n-Lk^dqRuEa~CBd)D8bJ@t)_
z7IsWi30pwe(d$lSKjq_jY(?$n1)z~MLWLF*i(FNrp#nhVY|Bp9ufD8K8g1@%-8`p-
zf1+2WI|P}Ig)Thm^M(osYIhe)==m640F5}f|LC)Nt_ngm2kCf!g=bb^0$PtFYwtIc
zl3kYK-%>+Rfk3QaQ^Fep85giA!Th^8CBxa!fY`eut=CCex_a@-)Bb0~Ul@x|Ffdy4
zGn?m2+6O4Rx90bR<`5s>M#fB)U6+i{-6__CovHhrij0VTc!Sb?oYA!&6~W27q)Pi#
z%MaI9GP)*i4Yg9;`mGpJ_n^6qi{_K+Ts5Uw&CXD)_0As6e{Rs82{Ss6h+Iz{IFN}}
zSgo77HuMPqt5EWCWbQCnctcnr+pEW1JyM)#{ZQzwPskOyKgf~cya}8GJL3^Zz?m6o
zgwrV9a`|=&v^?XU+IiLN$%^AzCjWX!mq-_0&dC2}(Fy^QFk}7wIpFd0WT!T60Z)TA
zqF!c#yWH7vJ=T98Y5vz!Ro<=Q6TsmSmYt4Jvn6zJSl2Lwow9F^=rOEY^=Yl@8h}Dp
zL8l|FQ}#O%_t}~O^<|rue>im5jgV?GyIq*&Is5jdZrhO8ruKN9XTlC9^6#;JOfgEu
z5jX>0-r~YyVT((OR+EP}Ov(b_9jQQK{~1)u$wOcE*jXhYe)QWmB@prLUYK5uO=&{4
zb=m&<hU1H?<cs9Yl<j*VvupaY%asuL&9^syGGQ!snK`gN5z&rZ<KtM;NlAq`T<yv7
z!s6XKTPHfY1N<6|<e(+%KIIFLpdfN#&9|dHVyB?u5q?NMHphI**mM@IZV~Rrwv)Ss
zds@0n3b~~*;_B9e(}?rQM(lL8voP*)uWh6=URo&9exD6rqvR5YOouk&9?5-r)o}i0
zB%hUlik<lhj)J^q1(TYS=UOhY!RrXLH98HkG65yc+(yE%6FhuSPJ^gNfT=z}XW)Wi
z^1I7+13(jYm2>tr&kI*izX4koxD^}+;Rc6K;LKl<Yf9K1!~ndY`Y46UY!QeY#I0#4
zEPe{)-*nAbIf7%kNCD7*`?=umHFZ9Awj=Z)zpH75yHl;!Bj_?i0YZ2^1665>!%Ix~
z^1ROQD`i7FA=YAtS;MO}(EIjxx2eCCqg6uZvyPKm^E>uv3DIg1c};d>x<hOpe%-zT
zABU8(9q{;V>utYLw5&V5t-hm6K;xxkWHT-uv5gJihWgoIm+H3bLCw_X`;A*?wo`es
zh38f9Wc*(^X98}Qr?o)%d3>|{$5VF;inFeNg`>MS!vQs0*b;n4-RQFNbe1CNA1S_$
z99~D4{E(V21y*{L+QOSjt>01iE5t>C?pqLMdS(abCbb0R443Rs(wdB?uOju+HlWb-
z%$~Wn#eC_TPaG<{V%;IEN~o8&KgtSILs`3~H=~|~9}w%NJ8VV{-EZ&;omBsrV)ppR
zRNvZjz*I&OKirNcE>1@y{ryTS3U1mo97LR-Kkn@<mgQS&qDH+r(JgA{uYR-aF>b4|
zs!uX+XkhZ9O=R~iNKrvwE17!n$t<nM?}RvkYSlR~XoAYW-jkJg8h2+T|9TX#O2Ia^
zVGuua(-G%jNU^&xIn5JH+{Z=?`d{%7W~reFGyvW6=h@VMWNIdkyySoi0~B>DV?WSE
z|21ukuPG!fiw6f~0$$2DXbB*(iHNXBFc+(aI9mA~*_cWm3KK9js%TAMSK6qDm|C0U
zW7$9nsEi%Gdq)`y#R~FKRge8x)VN;PkJj6s<Iap?sz9xfa}o-J`#6*lK_AaH4Gj*S
z{MK~5DFz=3c5n~it&=W$7*4EtO$%u2rs}_^WrDaFue*xb;WE4WS(BRTTva_70Nt$O
zz4u%(?Z^w#n;seVZ>vZ>K^-txv?%3qfLJ=W#`m%ZZEh;mdDkes(F4Xr4&J&xCpzXz
zu?iKq4J3~*UMN#$VY^68B-fpw0;yBplu5d*4zx>s)p@CI11%n~MfKNSo7I|$HiY~=
zh`%}DenB}@Ly&edwPoWr)HySjnnSMn!?>>;g1s6-x)vzKk@yWX7m_q*gUI-}LpH2a
ze=z(CTDIFB3}V2-=_W8WI#Nly=n9?_C|l_%MK*uY;qO#h-h?1ISrutus}gtVz>Vuy
zT#k4w`06|VMu+kIbqiXt#V6pMh1`Rh*)(_bY~0#d>~6phTT!Oemm`mk9QcV>0<6$_
zB028u2>B)Qwy{Ba!%o<accW=E@_>*2H??NCJ+t{8XZB9L!^!(PMzQIgcTu;kZzTJ)
zIzo94nuH==-aV+TQggb*pT+Xl3M(?BNt*o${_B~uXlIvMY^8)<IVU&(g}(1bWn%n`
zdN2$nUg<qkHBj*B66NKk??fxES+y%S&%OOpFYb3@y}i@Z{XB-eST&S`Np0)mZ8yMW
z{V?*tv9X+eXO!NIR?KY1Z<95nZ_=C>1)SjS7MGxL)_{|#r3Jo-cMvf;v**5?v9MpW
zUv&6kpY@}9XvHrQJHhQE6i<G{bxXxvBvC^oJFI?q(Km{R`s@x_<5IklXZHcz2N?XE
zp*&<`wn(De(&s0C?M)c!Y&tukTV}q|z+80l4$>T9jNJ$04}JVLECw8G&c|Mu?Mt(J
zx1@@JVIXng9#nk*0EEIC&ZQzisrF2G_)L1I$DI{EuGNm<|7##;16Xw^&#c#Xg5@$D
zO@YKw)plBAvoKP$<0$M*hoF2%I-*;q9juDF)VaaDfphwyQ=o7w8Uf(p1n!S8xCK6u
zVVZ-$qW#Oq$LW>@@R&*p=315L@g6%pW!-UaltdNwkoK;RiqqfN7cw;1sDTr&LsOgu
z47;=DkjMq@e!KnvTKUxelI-|WoImPYGds;Inz)U~n+RBWqj4ccLWfb`GN>A|Aj8^0
zzM1-s1L1T(#o5T@oMtD;^mcVEh{wl^NXJ&e68AZ#ihR6<dGz9Hz7+43o!BbtVbs?j
zfEjv1UXQ&wlI!32CZLI9<<|qhbL8d4NHWKb_}$oW-`aF$c?RLD-Symt6j1ei59)gd
zmWLNd4g^yyg{1`s)QD}#)xfnBb2k|qUM!)VgxFRIz%>iBvAcf(f*IgP#lv>KjR(<&
z!7D<eM-SG<{gi6smEf+2H5CSIMrxF=AE_Mr6_)*uXCUW-<PjFCX!D@Vlvo~x4Vk+r
zezHWsDVwZN!@Zs$h2(LmQ$Csj2=xF=G`J_lmMRez77AC^eXM#89bgbK7#*GAp3N7)
zbm%4xaHffJrrfR$+XFK{$1P<(6?@EMHx_E5#L^&iZEJM+Rfop>Bd$GVk|v`L_iRcu
zUmRJ8c1B9;O1#4X4)F}%vJ5Wa9=O>;DUI?^eUdd+<YafQ;dp}zJn!~tReE%YX5DsC
z*iEJ(&U8ognS}?wys-yU#+1}q8oda~K%5PC&M9|O%iYEsig`rNjcWksyEB}}1Nr^6
z9UxDlQT|q|TzlBP#J%2gq6lna2sPB1yj%qa?#0AK%?v4UX)8DjR!jd=wGE0B>UzMX
z3GkEvq5p@#+Ze9tTWzk0dIwlpEWSj~0Zf832WXFYS9J6$h|(ZNtACE9>4<|pg@WjA
zYwZHV*2K2<W~U&~zKv~dx~OiZgPnZZPD`SI2z2?4s~KBS;)zUM$lIGxfVm#)el_H(
zWF54F1ttd6b>6WS!+ADnbaZ<J$rHGr)6I!M44$ei3`FQeE|j7f7VvXh?j@ikx%8Nz
ziGM;XY!=+|*)AW=SPf8e<92Tiw;uQh5Tw7k?6Mo;2M+!rey|?~mQFiPsxFH0+P9(q
z*+tp2enMj>SXRmoGjr{O0Z=?+{Kvefcdlc$U)6^Bdd*j~v`;b{q=aT5&Wxim2pxkb
zaOF1+?D9_lP76Xm<H-VNAYiAo)B;qM0wo1V-2QBg8H7k1|DXT}DSFx&;5(`w-61CK
z{g(YYd3G=KG<T$r*>>6kQhXwMOxuVq&39LaA^VTRP}02QOy9AcmS*Z8VNUv>4Q>3k
zuX7rztElLd;xG*FJ`ikYZC4oU4{W4c7dRNg1f|zC4b@%5!zh~pcuUAxVX=Kp#k6>h
zkdn64t&CJ%stpV;zw_eAxAd?yHpdO~sMK6)waouAm@xSz-ft_yL;mAPw&Pa|1=S$;
zy<QLNf8Gi&^5yPnESHAHh1PX+5^~br#%W-@OlI45B;M0PfkT2BHl#G3VY!&aHXruq
zjv4UV4hKj2*LliHqzzzF20x}P#J3@)Ts7~IGsv0oM*80!_-V#(tlW^{a45ecK$b;r
zKY%_~E&oP66nt;;u?<O-68FNW9VmKY)mUp+o7gv%>p8*2=qtM)=w`=a0_^tgDZxSc
zngL7Xq;i*~fA!0Y=jzEx;3WY9GSD-zeMgK3$Nu8m)fPV0<<62ZiLbw*Ky)?A1LnU0
zCEYw<0i4_uMZA=Txi)|h<pxiHPMTm`$I{ZG&U0|8N>I6Vcn@!^rXed6KPZI)!NF^|
zFA)Q(y21|v^n>J!>`g$pwcEmU_{a0-^RDA+G>($+9Bh{jtQAAiiWdkw7G$~y2*mcY
z)g{VxYc0@{lhvab+(UbWg2t3zGwx<@kYCG3RtNZik8@POPKj35yH{s<?}=udnqNwu
zzVsX4*ZZZ$0!i9nZrLz!{PuS#b?<zDSvUM}I`ex#G5-j2wDm$R{H&hHSMSRSFY4Wn
zrwKQWzTHx?ws^~TKc7Yw@(UK|kw4<jhI~T37QggU<5k%j`;~$;AUOiUiNuV557M;i
z${LSx!Lg^#k+3k*<0SzoUD<fDIX^RcT92KT7c689>5tvO5au7HHdjrs30nzI1`6HS
z(W6J=5rh%G_sqAvxV%!)m?Zb9;^bn<EN=?A?kmqa-Em^juEMlUyBp2)*gN0!H?^yO
zvcJigHNZf6?V+T3z8;~ArA0{0dtxt}cbCSrMvpS0Sn0?43=16p@h8N~o$gJ(CX1(M
z#`3%UZp2k)i1t^XEujmRh3bTSp<05zpyt;uJq;%n*dSl~@_$w%z>zUvJ@C`wt+N+%
zMU%Q>*ZC_oNUZ#4-3!cCSray}8Np!kZ;sSDW^m&nIQf$sWl|=?<ZW*uFYK7NfrxLO
zhY$_<+)?g~5}K<c>pB-F^5isazDDTg^V`BaYV)F`LnRGAS(rg0`6&b{SA--*Uzx8P
zn~zPB_y{{3Cg$nKDszT?A%@xGv%YloEM*559b}X$)Vz!_hKle*VXix?FVt{qdf@Io
zHWTcVTk%DK-HKoM$AWh$id^>!3-i0d9_8)jMVyD-USSPtQoRgKuLP|$RTT>Ll_<vd
zpVcFjAV}lOlKjyi&6DRr8XPy64qk+BIvJUI73PoF9iWWImyfb(y%iVeSZF^t5OF5w
z>Ak(@*ca4|A?g+duzH7^I*#lqhlViq)Oyj>9*wpDK084x`H7vt{Yb6NhwqNd4CSBq
zba7-CTgebc*Lafqj11hr)Ac!myQr9>w%CN>AF4{hai*614-SKGXF!fQ8zNzm8oktx
zFAZnCe4Vy4P_=YHfJO>CoEaPx<kHQoXw#H{D`tVM=l3sJ|0bNlbDDKLx^&`uDS{<4
zjH>{JiP#jdP^&adzYmcqFZ?%%Om+2N1d*9oHAJQwKx9+`&6OZBiK;+a;wxSPb=A(L
zwqk@6@a+I!6c_+8jh%r5Oy@=M=lKPs?b%#e+sKdpuB6gXso&PxtY{p!$!Jg>u_8o9
z_<s$N;XQ-M;3+HRXjUsuxvndpo4M57tOHI8q02#J^8Nrs#&ji!jP%b#WX4wqk;xT}
z%H_k8!9feF%F(E+ATsgGPq~r&)~T?F`s;%+tANPdg8fm5%={8WX5(L)qv=fHftGYt
z?n?RicT^4CYp*nP*Q&m#H7jU65}re3tieeqlJ(%<ax}&8v0}c(&(7j}UT4l|;{Km}
z4gBSd%p~7#9juSBI%PA+_iU}^-{*A)FC^N#4X}5cFscNP9_%U6bs#i2>>9w7&zub0
z<saTFR3wo~GN$gmwj+e8AJZ1@_T`C9by*FbYqBE;8gZXR4An+`{nf68+gF==%z>Q6
zVg136jP!=dz7!OEst7dZQUnHVQ}+BEKAeJ^nM-dxp7Wsk%h42HqS-*p)2A&cFh{%+
z+Sy5kb`HnkDge35pZH+<iLFv^^wA?gcTQUk-C3DYV?xD;P4_=20G@P;YPC7Qy%N<0
z9gA>wExnejt|9%hxN3gOqS(h6Y#cv3VO&P>U;QpahWIi=#$d0Vz7Cp}?mh#K0|(GE
z-+CP+%|tuSa`?4TPZ&EW5cLvc8JcmGD$n~`S5J)&#S$Ke9<7rPo#Z<zsyRMKF?JGn
zG<=r)j3I-%je;qL!K6u#2-3E~9xYPs(IR~EODASc)f75;B^^Uv&D>l&h|z?C(AD;<
zF^Bf_e1hnfM!-8M-0huz8<i@?D|WoChiheJAIPr$%7?I!_+DDLdwmyY6bzi>5|HmB
zQ1EN1HehV8t@+4JSd5ncs4+6uhbir09FqzetvWCuf4qz1?kGRjn8zSbpVfa@y=JiN
zHR^67Fc?v+)9CuC0MuN#sQSPyU-}foTKtJ;SeMf6SRSr0abnEFI54yOB&(hhpdS+x
zeHP%d(T>ddvpH<JK%3W4nHL4`R@iTz`$<%$yBHA~DpCYztfC~-dqs7~JG4BQ*Y#lU
z+{~~^L4j$NE?8Dne7D<N2`7>H7~CY`H?Mdo+B&_9U`#$OlY6qq8gA2n)PT@2WDY~h
z`pLA=i5qn3rF<v08;{iiol(GjjmenWv}ocO%~}VL^sJNir<5UoF;6#dM7bRVb4j37
z<<+;>%h7<b=BFgcnz>Is_vH?Ux<V7IGwEh)zC1B}c)a)4Q9k}=%+5WE(mohzCftiR
z)DiC1L)ouTSozuMSj-CCJgB-A_m9J-i?O^oUIDxcxLTr{O$|3EEgOZ`U%e<16l6>=
zm;x{Z>8eunHa0txK4Er<57-7Qz*=rnJ-rv`!eq)8S=&@Tq*GsZgJDAW!ov<JJ5Fl3
zwCSE>aG5oY;%sJW(aQPfadNE2@O^e(Xar{nU~lA;pf6=akubO7>hO>8B^l2K*;+T@
ze1?Fh^VaBk7JF)MTU>I`30~yZfwiC7p^Hr4_s7pYM1JfOTxnK!Bw5$qmEh-AEMh!4
zlk=9XAAvt;VTxV+HWOPabkZlj9y`O3?ySq&Y75pzmDr?J?XPlFfw^Mv70K7cc?E1l
zH2<@hafPy-&IVQ!!pP+H#jI`P$j#eY_=|vGe5+$z*F>{oZpyg&*3jn#x!d}SD7l__
zNlYv@-#8&JY+(F7jH}&TrfwH?fu=nq;mG`E54N>Nx8`^6tC+QPnP>V#B8sm-tU5n&
zMUvCsocP(~Yn|P>k-PRGr9?ZQV$#L+$kB0QH#H{xT<wl`19CQr)IL|gmoTNx9WYoZ
zT^A0Yr)L)3t7P43bu<XbtCtJ37PMxr79bfCuIo*PF4Y@Y5{HIZAEvHi!p~ks(Z8~M
zz?BLDt{^9Bt)Vm@=z$B8uamZ4jncnL%92!hdE;tD57>FZQgKda*?5N?t398|(nb?v
z?-W&!TI-Z^0H$gT!fwqHUs(LOc3S}JaQb#Wn-$`^8M_Zbugh@IgG-X^Q}U5fhEQJ%
zehj>87P7V5GDtG~&R&N}vhVo*+edh{#c-Vm$KIDyMxz=fTmPn{9U~DQR(n&K5$<Y~
z%x&S^uvzV?lZNxex+!1a;?nh2{mF-~b%=ZoIgbk_vaok5!Y>9(Oep54T*+c3E=pvu
z=&*thCrw50N_zzv9|D+!d#u*4kc^&v7NbEH0+>Tp>z|C#RQ-t<4eZ}yG|!_m7ynpv
z#v4RuVqzqa-)OvPs~T@zVEDYmf9TlG;l+b~&-4qc-=OVKF{1tl0P@DuT^P_M{3;IU
ze6t$Wndn+9t8&go2nTM>lN7Bw2H4T5#x=gqDWNy%BiPFM7P9%R(XrV(Y|o0>d`Oov
z>WqeHUT6*?4l#FXo<bClC=Z2-iLwemw)87e4dt_anwkw)*B^|pJnM#znp*6g>`Qvj
zrE_Q55Dq!v?ca+563V$G4+)l_(hMOaS`Do3%0bzo|GrDfYCRYo)j#LAG#>fV6|x4m
z4kQBY_C(tb#3mqm#6Hcn&eax*W=`8S@iBOQe!=#ulUa!PHgEqnG8alZpSevT9T4YV
zmpqEEHZKb1l@XrEt{7jIi*GbLxDdqrEHIpR11-%NtaaQeZ=q}-%6%G{ZeFdddxM=>
z$_uM!r_f@0u+XUjSnt}a6<TY<4(&?JNZ({MMmLs?dH+*i$kslqV_p#Ra6eHzSjUsg
zGQux=Af)n})+PB)9DA?Det|HB_qU<Cp7~L<m!IyKs0mr`OwRKKe|KwZwD@8BW~gDM
z2zJ|YrAb;lYjELqhG^w29659L#ZCNol;J9pd`@oe^cnyrMe(lq=J`_16}{3gd0`&F
zqMjlM_O{{93bU%Pgopb<?h@lu;F{g;CZ^49fQ6k#TMTE#OXO>O?_@_?TJTNCbiqT)
zS0)K@ZV<iu0SyZM!eY^&7y85{VYlC}IQ3m?p%0TwX5(LLvT3{fo!Jke#gv#XApr73
zFgud8-vQ33+U~pVLHD6d<ol1nkZm|8Ect=X6LLQ-X$#Cd`-)TIQz+*GE>IvUtD*};
zPuH$1_vXm@!GGLIidDz5yZFA|&r}QWXQE?EL!$aQU?tK_yM6xUl;6K<4hx^XrkeTk
zzqtr*2<PHhg!A2}h)HYcCY|bQI2w^a9pwAI*rOSnYKoojIMJEyyxC?SiQk6Ugaix&
zgE77dJBw^Smm$KGIC0pqsf>-p!KcKb8h=e;h7$~%Cfrd-EG@U70Mg@UM2$YbhsvjG
zdYu@Tby%=mojRVkwwrw)g{U|*q;&^&h#5kgocrlVN-4dM(rq`&;W?~pAQQO0M9CnX
zzq1UOYQAPbk@9?Ws*7T0lucOZE@7?xlX`bjs0w(@-Lh+ib1+?X4yM1t2iH{1fst2G
zR6LK)C_!|lHKqQ)9i55#S9HecFJZ`3{5wM?S2WksBFXObxJdbHH*s?fVwNaqqvF?3
zx|)wUAGytJqm5)<FV2#TT6X4Y9Uz%=m34n(?KU351O^d)iYsALju-Mqhv!%)xB88!
z7bvSjl#+utxn&J?r!5=8-L{hW0`0j&FwOaMRC*g{vT}0qFzy0$?{7qBPW-9p4Co}R
z9Gx*%MQ4ovM0AGa^j~JkbWi@Z44E?6%M6+6>CxYc&OF<}pGRl@Ro8qLoiSdG4H32D
zd2~hzqBEcTXLLrfis+2abB4^#ml-lq|IUzs?)^7`QfK;d0wv<A1WFPK?>7WW(W+WZ
z^egsEvZ}i2umbfhV@NQPhP1UE0DY6JQ0sW&Dd;9cX;!C0YMSGzjfls{ztupl&UTnH
zm>rzKl1EwQk+5x7$~MAd2~+tP4-j1(ctmmIwf$qbc1^%${3C~;VfTrK8x)LXntb#8
zNGn6TxEgb~02PyX&jl*vO#6cR_&;N<G+Aq{^%?4CP(M4HtT(+s=AO}7ZMb*ZA^XxV
z8j*p6B4BrGm5=F;(FZ0CAz1%_g$+in+iQ=b0{IxnMjVPic&3`=LE>anss{Vw&Pm#F
z{(L#XLdY9lG@rC3UU+wfT+wRlo6p72^E4$7;E%=b#ul>-M|R$hQ?YdIGZXZp*fFu&
z;>T*RjY@IGhuCJ6%}jPw=_QW}k*uj6C}4!}BNVyaHzmrQr1bb`{F`CXF4MQzH-ium
zoAJlS=@Gdj&OOBx*j_v0WBbR|Jx^v_zctu<{?R?HU6VgDzk^rdwFp-6T$w!Obd;H5
z{RIlFrXKAOys$k!Elc*X2Q@42qWLulHe5HEQVCp{dl3)jL!6**xPkVtJC#{p<f;jn
zffNYl9xG2>W03&1Ck1y)=L#FPo9eZ3du4*3tO^>{{su(m(a4A@apeu)^&BFj{Qn&y
zQ?B+0Au>IvS0FMKuR>(1lyjZgdaHxT{N@!itA^y#z~cdflJyD(rHa)VlqUWU3`%GC
z#Xzj~8wREAs*7aSD+VQd)oWz9?ZC3_ahE)R`wfeXlyk2{+p1RIR&d0P{Xy})8UWk|
z+#LU?pr^wd?iL}tS{9|JSH;TSWN;3e8!N9W0tVfN4tyQsdYOj-cA9RIpvXes$-cs<
zD$l(E9I{138WWBk<9`{9=+{2O4|4>x`FmhBNm3u)L(?`L?$~r|*6*AX+go4C@!E`<
zZj0t^?*t?t1FP1$%w+S%BvC+KI=)R;Kr^p*W*<Z#|AwR$q3UzL@dzz~h30L@F6BJ!
zmOtLx2%mBoZf_?68_e_b%u3lAeU-~Xzy4)&X76rQWpCSW8k81uLJ|LAP>Nc$L8)B$
zzcDBg|BOLt?zap|7gbS_i>oy#p`0W^|8E+U!k!tFm@_LFlw!+}xpURSYk^vB1+IEp
zqN*w*K%e<;>BhK5^)ankVJOZ>C9G5R*?KtB<0;9u?^`r6e)P_&I(42!k{6B?I+oD=
z9TRJHVEoPNbFna;ZB8`illhpWmWJ5Wla%Usg!#jh&DFy*;NpfxS>a}iV?4uy_?&Lv
zR0D}W#*y<i1Unf(z&~U|=?(Kw)D{PQ$XYYI!*`#L4|^@bD+QtRWu(UGFS56I&+NvX
z8XG+Zn>K8q(LJb4Ly@)xR?;wN@^(|YB1<nDNuy`hGv`ujdn&BZM<!EJoisEed9@vJ
z;|yJ(W4qbY)gAUyaCIrkps}xawOi2L`3<VT8EBNO!k|QWZcv*2BL<~O^WQTlReJxH
zL21`=2Bq@CX9gwS?-`WxRl9HgD+VR~^QtTKN`{=liM8uM9l3Th%&^gwsTo`NWd3dq
z0?|_4P(ub(O+lNn#pr<RqV#7FsJ$2LO`|u|UFxyoi}4;*^I;!Xgs{^!C`THBn#dLi
zp}<SPIzrt(HgW(Y#MAMbVp=Mucyi~Y={%W9N|@E&Gw@EsSF_>a?h&46<I>u#{IBlD
z^|?>%x&SqUQYE5wv1bN9|Eb;$T~t^+$7j$)H@Owy=P}_`k8kCbwll6@7csgTE@;}$
z9m~eRByS(sG6>k~@(t%x_b*Q@%U5BS^5yylJ6>eV?6SbqfTotLU#6h2&&OCbi&Nje
zFquN)T>(zV4N~{!W86byOcuopn>~>^UK;5Pv$!7s#kVz2x-d&8bHQB6anj`q`DkL<
zP0?7Ar8+}`DfcM0o-*oIM$JCPq?R})q7Cc5>D(@@WLT0T97~g8N*MlQ^8snIbG2$u
zO#FLV575*-TA^V*6lVWZI|yz~dq6cL8PO<i4T6SmI^`KvVy7oc9EPXk{O10#-hZPq
z?~$AzirSUkiw&HaXf3UZ4Ic?6ym8#yKmwpk^6Ba6&c!P$7?jdf2BoxD3`)OUb=s;l
z7=Kzn6TI;Om`}nq>NtlZ5RZXxf^nx5y<KlU;!5rR$KIPqHGQZ3-zq4yB1^3WWC=)>
z&Rq-ANLZ8LnsyY?+A0VVAeE>AkyS`YqJn}IjMf?1L1pSjFvN(6ED>3P10hf#3HuTZ
zfv{&Ggan>XoT)m`tuy1?&hLKaJiq@qdQOjg`~7~F>$={r7Y}g)qH{gpt4n<ddl+D7
z&ntZ<<ZVDf8Qq5?T`XS6OzO^Mck>IsMQ}kO?h*GOGI)944=INwhG8efHv}6EKKsP|
zfV)YYbCHYM+cKhJlk0g%#5K30ewUJTwmuDJAYh5!W5O+*%(Yw}>tigPmNca>xQ<ee
zh);iU!mBZpMY)mtWGG-KOZ}YD=>v7Ql@->85G@hZpxk2Nh;yS>V!=N)D4hrk)8Gu^
zBO@bcCVFaP?(k@6c+bE+^Vd_FC&R#6``GEhvNuQfew(p>s`HUX&Bnv1G}H%t!N`^1
zW?!~tVCvCUFE}hp8Uh_#UIOWI2c~X&XM$8Aa%wnCjKW!{WWJo_OWAs(0<2oCPKUWU
zDCsc)!@K3r2ngxNm2JGF4kgasb?z=D;9$9qB;njP_XEz4lTOON9^y{?@>n}MWBD#~
zEwuH$YL-b9fcUeZi+5s%y)i{L+(Tf9n0k(e<?EdyaD*X5H9XCMKPMUj-MV6Z+*o&#
z<DmbF(INmuicm+_i7#GkaC(=!52bPUq5j6*=e$I7R#_7CySF|K!^bbhY~?xNYS??i
zY%)}NJ8dmo-O3NCW9_kbBq$3~8OB*A+?p;NprZ3=&?4*64AY@vM5QPj3@bt&6<4~n
z6oxa@hw~m|56Ofx{zE~R8xAR~8bw7eQY<WO7-j$s=i17vwmtwxsm%sS1N~!gXIHNO
z&%(IGmAX3&MHgiD%bD6m3$;a;NJF0=sBq+GWl8p4HT4lQU^*~v_8&8KJr{DX!s7~G
zgb-(iRt7;tsqU#~Y2~@K=5_c3qw~hm*Sb0y35fZFfI~#kdq;upeH+!A*v(*|H9NPm
ze<`4^#-H{;J8q>oR<z0~P*97aInGG*l(g~5y5K%XS1t%-%FerqQOrlgK7R9log7(9
z$No!989BpoZW@)8H+Kh&tk+;{ZSm@CxE4Zb$^ifAn!?#zVD&WtVG;UgcwQsr6N802
zpP#B4`Wj+r7`=5LtBSV^$LgaDpfE7XrsgZ#mIzzJ*hweI6ec7Ha4EBO@hZ5^G~cA{
zROtA=(6dOGs`v(@5*A#e?3~`w=G%vF%)KZZNjb>lA<5)OL0?+SJ92+sd%$bsweXSa
z>sr6_7n;}R)3=8QR<8!H&D0AkaLm_Pt_%Nl^Y*TU)JwsHAKOb=;P-I@kv~zxhD)Xu
z^FAlG>fwXWtGh<iuc)1)_;>O_!1qcLAPalxYr_XKQm~H@F_OaY`x$WiaAEU_J{N*Z
zQE#7_+pVOFJ0Q6OPM6Jfmzo=Yy2*942vrmp8`u>Urf*MWg7PoLq&9x^;8TDo-6PI7
zepFgCg4Kg8b%RB7tBeC_vBty}MhsK=9hrSZ-3~(8)2yA1eZlbvu!oMnYv|cXbCNas
zo1tfY4gF8&o$5=)sfTIyoVl0NW5Il6sK9-`xG&QYhE?7r=LC|AAMFdh2_g0hzejD{
zx=OsMHIKbpPg3cvW#$t5V}QCnPf`3CNlp@=^q#Fng2uaShnL-ovuu;mNXrPI5y-K}
zMLJ|@p(njm3AKp^dp4aBzo@UytzIWSWW|jVF5^EmOX}Tq4+^RLa(m>!?NvDo_dzop
zvM%8GM;*>cJ%TFZOjxSV3GDXCr{@hG2p{Ig0RkX1kvq6?Vf}urp5&q_&CZ^-Fz|N-
zO3O3?C7`PtN8bEe^5wP3-s!%*UVHqRq-gEiW4dqb&5&K-K|yx?7xUGb_qQb%yi`*x
zZN%Kr)vLz#2sOSO@Gx8w{Ex4w5Xb{)IQ+de<L(|swgg#EnBumMS(Q%9LAYz=cf;Fo
z(Te}#T66G-naKN&D<D#35Qgp1orNNYP>bF2OZ1E70<Mx<l~i2Gh<|)pWH>nR*aTD2
znAxYZ+<$FWnlwn6#ezP;KC-M7=Q_s4JD;|wf@G~yx6N(@4Xb3Cw>bY2V;$GYo&g(O
zJhFn}D!9u5kVItE0rhmC`i6Q=gk(N>vhZ$ylJ<?LXTPxk{)J8~s325kwga;B+gwT|
zlm7#k(gV<Ke$%BS|3EIKp0~J^m}~{@;>C-T<m%1ufvEZiqjegnrVE@n%?3-1phpj%
zA9^3VbL^K#lUcdp%X>yyy$i?HqT*n7h~0csMvGC&sHhc2o13aKM*f%@>6KcXXAXC*
z!^61p^vS%B%v{{fVrnE9EW6YjYRLI^V^BGWVU$wOEK~(O)3JTLa%k#f<C(8V)0caA
z#xJQy4Xzt?rx0c~H9k*CU1}wEr5x8uD}Er11oZ7u+NwoGR-Ob8<K<Q>NgGEeSw@1=
zqEcW4R5tS0aFv(IhY9-eh@9zKFtCyZu!-Nib;<32{~=Wlz{$9{xxIK<#|{5~;bda|
z2RIo-8<_&RX%I)9%;DPz^MwhuKN{>gY5drquLY&y;xGSTy9sgL_?f<6lo<ag%f!HA
z&=g19;vi^1$*(LW2vV(c4*~G^=;~^GYTo!Q0hMngW^5>l^O;X;^eZ@w9Gu$UoRwFM
zwdQ8?!8)ngqsuHm*nH3_ZSWPnaw(B={@pkk;?s^>aWgLEe>!;({=4$iBM&33XXvwn
zr3CfG&!_f<L8{h@QrDQntOEsp$&kygy0ApbQOn7G+M4vN4hlPDmC*581#C1x;s>nZ
z{YmKta9KuS7%3u$t+C_`J2^S|AA67VxxPljpi}Gf;4N$JLXEZt!wOtVG}Fc0H(g4z
z@8wcT`v5Mbgx4-5^&2jwGL1{AWA+V~QrX|QlzMVryOf4|$}avLmy)}t`sV&OddzK_
zj;!@N7$D`gfB`Z!>!aQzn5hWHwcWPP>^+W!Xmyu{z{d2IwCN+w7`CNDlDzn%JjaTz
zWWe%6{@Lj>;C-Y7Y|Bn9vF)yKkpqDpMF!^ZRCkKyDfv(cBBj004+Kcdf_i}xa-o3c
z0D)f>(S!8uMr(cY(O3iV`o%kTh#IY?Y(>`UDbn}IvoaZ7pD;v`7FZyIOi5ovUGg~r
z$yJJ|!0B+4N#Nu!-eaNN@bMr8Z^z>=x(Xx>4FzO{K_|oOZO3^J?MtUmFIEWUa(SX7
zlo{l*i2bB%<X_vY=bm3Qwy(6Lk(>G<9MRQV*sfa&b;r(leC=%L=$H>At!GiptQ2|g
zPfA*$iwjDLO!Y(ydT0phl^?Lo61cFl0z&MUGxN74_n~Q}JZ}zTxgA;LMcVE^d5YPy
z#_bX6q7G^Ix`>k}_16ci9a>(qwk%;$hiu@rF}yRl)Ui(z4q7irFaX@()qM{wzG`4b
z7u`)d36l%gvyx`|y@+d77px&?X#@eRTD8TWlYn$lHDHMGCc<JwjC3p`wVhI4e;m8m
zk)m00+!nW(9eHcjdfk*%TQ%tjDDuj%mXBUN)u+~)Qn%r!4X=IQul~+MyLUC1a|9QI
zE|5kao4cixWqCqbJdy`O;MbX%rWWvaT_SJHv}WP!YD9=!VbfS6DuLXFI2L+YstS)0
z36<mGIvopo+ikBL%ZSnZ67EK)DlZGh@aGU%Pz#OJwrO%>Nf~ucW_!)Ki3<3Xh~OXD
z^Zt_4Nc9o}-JWy0mlGnk)Rg<_22w1lu#4Xby^)uel;3e-Z?l`px3wj4S*&bE_b8or
zihafc9;82`G)93Lssj$T3%v&+l1~}}C=>vuag_otcS&VsT|TNQcxuT&>f-f^cV@kw
ze+2Z!_|sEEc{jCQm-YUBT+1CGWQNAZ{-AMADdPTlgiM9~KSsz*d>Dib;!~_=h(gh+
z4d1$PHsC-vZX1OuOWi@SH!!SM2h{=jhH)5)T=Oo}ua{;4_WFrA`060s->+GTPQKlx
z<n^0N31m(F%?O!oz@;SrP%fp?);C;AVzD?Z?8M1$-}oHf`0<j)rF7|UTuLWRG_`NN
zxAXOv{-tbXpH#yP_G<zyBgFBwH#0{5C|`OS&Xr>X+ZK!Qs<FbI;E2MEQTYfGkgFCN
zlO2THnWNGz6ayE-$j+6QdT*T=9GREj(5?g(w;F5Fg<730lRi$hs)33QK>?D^o$b!m
zs&E8r$qmR8osX95Tbn0d4BuPz(NZ&9C{=a}es7gF9Rb@rY|5_A4J4@=Z9SqshSkL4
zzJ?}mDbngde|7yloytyaQUW5oi<?VvzEje4e&>s4;IdmL%Xl966*u>4hI%B01B&3F
z2L99gAY}fDO}t>sR4brPiqdWk<W?Tfyg6PQ450hOcIrW9$3&vHvf!B9_JG5AQwJn2
zQoL<dBAnEAh<E_Wak9%Y+=X<O&7PCcuo0n^(Hjnwh38ghDi}K{^-0Q;d}CEgZ7^w=
zxJc>TFEt!|!EL~A63V8OU(Z*$Xp!`mEMfV<gl4xnkH><h9E@Y+KM|0Z<5F(qo;5Hq
zlmggQK8kB1nNMR$9Dt<>9^D=uJZjy|Qz~z=AQj<?eTyM=1>mfA?yXH}b5l))p+jfH
z`Sr(h1$;bH-<&@8*7Td3CUK)$p1A0CTv<4B_YpP=aU6epBtsr}n#j%XjPI~f3~b9Q
zt`yb3pqXDkh&r+2N%4J`saBS<k&Bg6fs*c%ZDCF>Qk&T)tR(0<E;h_=oNp+fvAR9y
zF3D^F`Wlx5WSPita+WlE8tKxEsofRlJQH`+E~)oof5Y0GM?NQtTC^aSbz=mo`nrPK
zmvCa*F#SA2DcJQ@u*y_-p>1oC4d0zc5`t1;lb>+fK?@coPGTUQsGa4&6HO#OpN*(9
zPD?x3r~C&y_<8jGAK9;JoKHZF)1vBkZd+gR#FL-0H0gBK&wsXmRWN_OD(k8omM)Bs
zfod>~CBAK{TDFYXB9H32?1gly?hPGNj?qSFa-P9h*@h-S=;{t)CsA+_`|{58Dn&Bu
zG)FdtiO1Jm*v49m4q0TzifN^F>Qn03nx8=d@`_o`9JaL87h<s>?nrj@uaHfXFJGQA
z46-yB+VUKv-8~hXd0I<*Dyj6&B?8o@y4Zj_j1?}1p(1vJsXS|Oy8ROEbo&S=mtjTP
zjyo#BWF^GwN9jQ}+<~+UF?RAH43L`TInDqX?R^@VRE_kvef4(yO$wH!8LngfjW6i$
zkFIV;d7YAWbeMu;U#n)~ZkNP+37yw%c|2<K@1dd_@_kE5x)r?p8RPB28<IS^RQmkW
zB^8e8E#d?Syz66v*vyMmgRi^q3Rw|=>EC4;;l_zLwTI|l7T$*CdjXzKtQvmNRsDRM
zUd)U)_L{+JP%GzFhi}raA4rE^pWheiY8`77%z0M6u-xcpNN0B2jv|~5W!O5Yl8fa8
zP%Owgao$jjz+ShMYr<6?V<4bsd*|sJZqGaRDlxtB()9)gpHex!PzHCB;X_6&(&GB2
z_kaF@YMoOrLpgm|89CVRT{5M#e@3QM_AZ$c>6J`Lt&u5>8Lr!{fBs~g{rE50(=QT4
z)uthJJnZ*n7e{RO#;cb2TbkhoJd>!lnzRmOn>2-LMD)&T@QxokLX0;Y{atU8+sx&s
z%BEa4@S%kgBfKHti0r%)CI>OaNw7VEpdbGoY<`v|Kg^n0?}~c$EjepsIp*gvK5y(|
zuYP<g8RmHH@j?R>$YN%=gQk0bYnD84+CMCD;TS~wdUam!@gUij+o`#@hz>z2WLkcX
zf%Qz0O&25ZiSccZ5Wwh+nCA2Rln$8cB<J~O9Sm6TwXR-ELZs_e)_m-SQ8TYqHH-n^
z`;+abOeWL@Y3|<jfrk3nJ^HCdDEm!vej=j5!dnu+0(T3Wrn=0PXzel=?=r01#<W_n
zWV8s|FX)t9SqXoj^oGnY__Pe*PDCoM^!TC|Kk8_|y<vg>X~a5FQAPT6Eto9p>+M#Y
zI`W~em~Gk%kr5=)gjQn1mMt7m9M=PTQ&q5M-^0{jMIBHYg3(jkNdRtp#RDf}27ttr
zc4QcdX_YlLjq>WNl-?7n@#)|S`9lFiA2U6BqiW-+Q{kZ##ks{}fh=PS1khiUcKDvU
z)|DAosChPLH5E|vDEQ~4&Q^xS`&bQ|aG3EUIjL1T)@fEb;2C4~Cl;jo&=GO$d<a1t
zZYi%DtuC*-3z6Nz3d5HU51VH<qyu$$gfH5HA@lKtAQR1#!*4T4FZ0B$^4IUg8)50>
zr|%s@p8*t^s|-df=*4wuR^JM)^l+=qIL*8nl^PHk8s?(rE@W2St2U^p=;BW~_5y#9
zRMgfw8%m5yj^PSzavdvrM!m06;0|Lvb4HJLj*LCNn<)7iC&P^A_+Uyl5X455>x^qq
z&@?dk>}SaD-JNxUQe$0s{+BC^SG&6|3>IPKL5eG^Is(wL=XFdxE#1)MM?JGA1uH2Z
zs&4YY7J}1%@aXiu>A+C6&qQMPPdIh5WFwz?#BP>*`?IsTXCSVeriIr%{h_z+;QvBT
zAG8es4`Ue60yl5%^4ddrm@22v{jzNSF1A!GI6yIo!PKAAr=QApoHLaMVR)S0P<dwx
z1A#yOg=m`2GMmrrQVMGf+z85gFu-$o($#gwN*FX=;hyC<J-wT2>*V-p<X}=S94e>^
z8ql##_ptx+Q@e-$Pq%f&QY;4gw|<^P68d06^z6$fX2oVD$_I56I=7^STwFN(>=H93
zgd4oG$eKTOyAlfHun%`&4kkfxQvTf|mRJ=XY8V{Uge@O6Hax%etvAU_DVn42SVC0x
zt8&cLH{j?S`}xynZ$$H7uPqj5Ks9f{<sLZMr3$w!WmL2Q<bZUy&E`RyMjW}sb-sev
zQ5lA(`#>*8Kk~{d$JskYKd)^p0)0WR_(xfJaoMT0mD~+!GJ4@c8<uudvQbz?DTcpj
zd&ZNv5#+_WvV%Q|y<XqUcn?hZ*KY%SkaA<+Q1L+VN(y}4=Umceaep<+Pb^^dMmj)K
za$al@2JB3kwqH&NsaZ#TKAl!p>{y5#1x*N5s%;YX2Tlmv=fv5(IVwkOq<TKhE0c{h
zE^4@44)0>}Z`a&~w*QS8T}xAyS^9S&GN9)MATnWCzwRyc3%OsZf0cULY+h(Z17_mc
zR7dDm^GZb#V5j(j`3L8q@$p{HF5n~qm}Zs5*xfC5Sqtzyz=DR%S9N5O*@DbSMz9=o
zQSUgpL4)k#y$M*cU>ic791Vt@6}CEVi60&!6CE9`7Rs-Q-&*;#TK3*skS5ON_&I2r
z#Gw*%!|=Dj<%qXp%&FvVZUv%IPaBSqo)A}4`&qex<k{maPK7L^#bt87sHAd^UBPtv
ztU^5~tUI56(Y)6<=hUFND8qv91HDS=?%mdP2Np=7V&iFXPxC${Qez!vVsAL!)~OS|
zDF4Id=GG_!ld4e)B`(!>7*y?yf((g=vmi*!U5>rklra}=^)#4TId)JTa?0h-?Y!cH
z=%||c#~$dYw&Ao@RPb?HsMC!&WQ6!2hzz}3RcF3Rv-`5&RMqucX<i${l=W|&^0oa7
ztpO6OSaOCm8r|$W4$w6dBX<{~S0JQ6fcafZ`aTF*S#l5_Bh@9%2c<@D$W_(RZw+@T
zsV+K%QJ+3igy11<KD=)`dKUDT9CDRy0bb}QGF~~L8Dc}-2}EohxdS<-hL%&7tThhb
zS(ca8a8IyIFRHQ5Vdc4wmEhpFPntZfpi+#R^KH_$9<E!9J4|Gk<Q_>q724~Vs~pRj
z{^gpC%FcCkOwD@{a{%=FnVs(QcS^jETiFN4x7b^SY*fCLsbjuI^EBFrMVnrodiz^6
zccP<->)+gyUiE3s&S?B}O+qqOMOdM3MSM}j0j#C-L6eRo>7lMDP6(|Srz|oGmh@NW
zl1_~l5+}zl)bf;!?)HPI^5|5oSGh|%SV?>E>@x<_a%S0W1TN8WtGSl-`EG8}a888_
z6?)IJF(Jnh(}#^L=Rhn)2#5Jf{~$R3iTv_BX>5)Ca2#K&K6sw!J$B|6Ge(l``;Fj9
z!i$b%lzU!j_v!}Px=qlj+1=cdOY`9!+Gt$XDdv4yd)6+p_-eCq^v-NY3J>TQ`xbOU
z-@2x*JGoi&GQ1BYXlnAPJvx^R{eqMZ#w{z4W{O8{1hYM|iwiAU`Fxs|MWsA^-gya#
zPEYV$#cLrEo7y-LCAUAr|5ylWY`#<(&wWT9BCI>%IYWnmLR@jB(&0<R{h+bTq}WJb
z0}E_i(dB;nU{!tf8TJTk=Cb%)i-YPiqkD@W!rk3)87xaix2_3tGQe}&ikd$D)(t2z
z+MJxAq#@Zr^~O_#Ag((}Pu8|x2kJWEmD}EwIpA_P?5kk0WGZltgzD(U3beHHs{ola
z-f8Zum*8)%K3=HTJOUvwTVFjjY4>Pb1xY<RqJQwktG&nY3_*hrs<^V|jYjP29}(aD
zRi*^Sg}?}mCuMU&?{T><ZhIDKlzt;0n-ysPSj`t!1?v;4I`Ua4rq9GEkQ(*V`tUoW
zhJM@&L5e3QSr0odv`~t*+^`RfdnGpxPW@7eXyl>^EziA(+GT_AbjU{YLHe^Qcp@Xs
zx+KQFcKw}(joyPMijVhMAnLAH@3BMX&Y_CkSZfn3=-kYe7C}G+SRMShivYudb9`w^
zRTIjV3A%OB-k4zo)oAwXy-7XpipydeU<dj6Rc3rJiUq*iX@hpjxaMm3k7Y`voHMKT
zaT={?vgsYe08pzcDwMG=oJh?YpH$YsTkkog&8{;}@Z&zy3EY{)zJX+vx|hVIUtl2U
z;JgMu;CwyKSx*N$S=B<9|Gb%F<LB|kSr0EN`FD!-r)Bo%qop>s^wGkq-tO$A%*Ogd
zdBrY8bRo5E`_Y-%?6K##udw1WC!IJ$z^Qz^x^hUiQMifA_^yw62MpZ>_ewgL8fH4?
zn^y;oSF45QeR}Uk^-G!3kW>m}N~CNJdF!4Lo;s5Ah@72Kc^qGOB@f$74kbIm=I^)A
zxrl~Br*0plvUq&H?tHGRh)QY7jZhUXHc+2akglpm6p;($vTiOd;^8sVsTNMUS~c|f
zi3%sM`qo&9Dk#OxKoI(e*eTTd(v=(1=1!l!v-&4j{Yw8sZVMzm<XT2t;+ae4%Qoea
zaEPdRf=X@3=pGx|-Yl4ONoLhuuf*Xf$5*T91GH5+vSJ4tF7J~4&0ZxJBln|vVauO@
zAiz8b0#v?_P4@2w0e+Jyb(y+<;UT(m%evDtBx-Y)O+gd9vc`%(Qn(X^hJ`nZdN>iQ
zgPNhxvAzSWlrh$g>YWzELQ1N88>k9JSOK!ckM0Z^Ju56Vl06o80h$yu-_+4?Mz+w)
zcYynCR8HwJ&kT9!_CLOUx@BJy{4BeAW!Ei2WNe^X2Gt?ed?DP=TvnIl9C-**QN%vy
ziNq*$`SiOC{YqUzZJFp|Zt;A3ni6Lx2J&+%1qlmUfC(g^7aNBCU<1s5i8D6YTY*V3
zhw6o6X2TscH7KIEw0fz<dh-RvsmE8VMH1L;*C3<g-bon?A;CfEv$bpa^;I@n;NMk4
zE1qJ^njwP>xeABI=Tv)qgo9y7-QGOO<pzb%M7&Sd#SU`?o;(QIxIu#w^|MD=%FRFX
z;Vq-zf*L=))#EJn|1M{4>aca@N@S==dMfoWT4lI&|E~JFxj?>vqZf~BjBvBT>%ihK
zJKmNx3VP!g)<66VJ8hrgib)5k>*#+nV18oJ=#Lp_di?CA#q;=x89?58&xG34bKAV^
z^4RGSkTDl%R-3oDltA6<4VMz+P(k%Ux_%s2awRXa&_QvXXKV(59=+~L45qNhv?BUW
zF{FfBqK}{gd|maq?MeR=my-Q!m(mT!D8)c*FwQ|OYVw_@R9Z3b*rVUS`+AZ@lDAXA
znbr}MR4hMjcJicvaCoB}!>D`o(-R_j{{Ds9y58bx;jcpbwcZe9&;@}X_iHD{6A)$2
zy<zZs4kzVkzCLaROfLO{7-gB5p-iS&dehXiV}Ar^Raq@d$#t0UXM8)c=Hc+z4R<S@
z8T%!3q0el0e?x5%h?h%Oe}d<rPDnr^Tg#L$Mipm3a;AsYQ>MACI`AON2rDHHRU(|R
zF+=%VTJ|$@+3EWx5mv)=1ipp=r49F_oFW@;LmXFy){zhU`Nc1qy^l)iAB@&%{M{gW
zbuny3RhI_oY!(^`hX&af6Z@noUy2SO<?@4K6wMJA9NBTIDdp1RA5eLZ;@C+Bl?rQI
zHsLr`JtS%YRVVr*R{Y{_e*Hj4kxeed4cAngc_wyGkddH}a)NzimDJ#~)d=UR!&XTL
zA74(}$J)5$_@I^t;uGV2!*ShLlYq}GL~n@?FYbG{$J9SM=HV<??j?sRSbeH&9-~xl
z&Yi{VBO@=FaL%#eu3Rp*?mhsjsKlL-{Sr{R1*(=_=}O&g>)v{TfBzxXSov7T^Nx<+
zy{z4Wc!V^n72-*QsejcsTSOI$ZF$CI;7-G6Az&&|HB5&zI`%E3{WFR|B^NCl+FI1o
z6$-L)`x`H^9T^X}H!Po(PSLS`77Q1v?8X8?Wk{^Y5GQLa9UzWibs?NQTlQ4;%rZUh
zupoizdS=?8+%Ts9rY{euEMk{@!toZb{K*uJctFwPn}z93w*~D45DybBP8H&0fvvsd
zo#$A}Zs=tGC_FT-G)l@l+pD6&SJH(wnzd20FUyvEsF|S0HsC9Igz&g-oVA7Xa7MgQ
zl)rOq`WE>RT3I&2+_1CEKx=2QjNE!El^R2+yHI@sp{l1*OWTgwo{tq{Y}2qolbxNS
z<QuoUV+qeYR(p|xSIpWXafxwoXeA%MTJG2@yW`X{p-ycj(K@#Ed@0gug0Zi12G*Y|
z8~t`*`R>~}E3Z&0AO?If`tvgs{JbvLBaGT#^wCFV!&_CS+qM*0$8VR!>W~Ycb~lnj
zf^nOG@wj-OPS)@PgsV2PCSG(Gu>B=h#UXXWU_zByS~~sv{C9K}b2W5<T-E9~84P<h
zUBxfnu6eiJaB_B~E?WOAnXQ-wAjpxtogxdAC@;8z#^d##jGv|tXTjma^3XCEC0u@#
z7GC3>mm4ak;hT2YNq}f%zIwWNL&YGoanp*d@U~yh%jgc>tE<=U^V;YjY_8i)3^D}h
zc#C9IdTMm9-mJPhaW>UgU7Fn7JRj&yFdA=@Oo<zJOt1NAAzx_`rB3__DQ-tYW+r*q
zu*2M^m<@G)jBcWKylH(U#39~9+J>#;fj?3I{%lOVi7r%jw@jEhKH)dytA37Qdtuec
z$=<{9tVP3jC~yRtD2d>2i1FrU!SmAJLN|Zg4Wb`@25kOJ&S;Wp+N7gzK4Mji6u5Rw
z`kRh00#7xQQ|%Khaq?uBhcr(Gb);wKLjlOiSJJ`AE=k*LFr*wlFu|rzqAbBwN=C~7
zs<0Sq4tCx^>Vj}xosz#sazFh3G@6(?C(77PSrd73pMBF>wJX8fehw8qZEblH&^WSB
z&*m$Qs5DA6--i4r^ti&PVQSkAfTozAYC~a(pa-Y!Ay}#p!WTMQ1Q=p)WNF<351@kl
z{ngdv=3L@CwjpiJAP3N!*itj*)-=o^uk!zu2szlGIbQx?hXx_?$Q6sRJM%WfyI{4G
z9N1v%mz81ru^i>&u?6&^YzHgT)qS&v_i9WwE=0L@k|YaErGlc}xC3uOEz&Akw6NH!
zTEMd_>hQT=ot)c7p0Sz1Gv~+e^Xc$I?o*ggt|TNxezCOG%HE30w@@J!gxH`9t+0l|
zxm?OTXt#g?;KQWB1L{M08nciWxI@vM>|GFl`1k9R{t>|q)U*u@dz&8T26CL>eCf$n
zn&;wXC~Sqgy-_5(yHiva%(0TEnaTqhEJ)ynolLc}`pz-pOn;cCxJwd>c0!1fe?bsO
zrI+_ZDvANtjWn7Lx1B380@#xL^FUzSbA(Mp(rdzl$3fH9!3Nhm3w+-rI<X!iyX~jV
z|FCkM@WobLKm|w4r+v**hHLllU>~!LxB`K@OfwJ&VfKpyl!{86{+P%p@-mO<taKGH
zesY<ftyHF`d9NVEKjcKT-oSc80B7IP5*`6d(9sP8{6EjGw;HakmU-;~7w%TAMBBwr
zEneTm|3O^quiP@wk_xQjK#!(l`B+cnV|WKB@xt1nHp;HFJrebkTa$-CQ?;vn%#=UU
z8VvgkE+$qbWp}2tON9Xy2#@sf4ZW$Uvgd&tU1w}MF9cd~tIu!BibS$TaqeKIiZ}G6
zBwgBjX4h$*nRR38fUOVpVRlFKj&+MMmb1#6XyRd7Oi*Gn&_oqEow$}&grXVzeg^ag
z%t6z4ddKVyXIxM<i?=~!6jZ9i81y&8s|v$5;^X5^drTNZD<40894nc(xdeObE^ZY2
zou;<^ooWr`)%{Y(7OX@GHeUt4YOcL5T9Lnd3Czq8Gjqb}0oTJJH%?`u*LjRRmoHrc
zJ=+6pK_(xoxza;|hR(_uo;-MUf__V$V+`jk(8BxbfWbSuFwheL`s`yy61u;DdIl0#
zn&(oKQSB;hVPy)QJimtyz0b~HtO))Yvh}ga1G38!MGN)CxoOn!@@dII?E`xi`Do-H
zToT81zPC3Q6A;HoFrgtpbwhELNG_k21fnC;(eOAB5guQ9mOMaBqAZBK^Y?=x{7Zh>
z4a$>yXCt_1KQx+5h)j5U{(0TWjhb53M)b|d*S+{^O}#tN`P%xo_38gws&e@pu*xD<
zfHu*-Rzvn~+CzgSWAsN5Gl-JbF2II4;#G#~VgY9@M0IQmyEDbXR{6ti1AKh_ne<lw
zlTujpYTzF*SU)8L4G{e;UK<g*c+QjG2@NLMmT2{b;>uyUxv0>k;jq5C8UD=|Cv^v`
z{8AD=-lNO+#sPJ>cweYhvW$Mlm2=cmt|t*-5le6GFS4%ly_&H_@2o}r!tte!DMvz2
zL;*BIBfI1IU5g5r6iB<BvF3sc^db5<x;(pa3`k!{FYDe1hCc8nzUpjVFkm4vH?NwN
z{?Phqs67k^YTyOI6-suDZOyM}PX?0ylS5<joKKc7<ha$?bUt^Kp^U2x?*NlARd<>8
z*<|=toTLy+?@X1Lb8GS(@!Jt?N!6A8*o`oW+vGgCE%#>9<waI+=|o+$-$!XbU)lcY
zi}I(&hjL41)>E(zaRu}stYyGD|B!^n5}wh)vhHS+bsbC0raC?D-jf#}w|GG*{&M_-
z&(6F^k^CEGXDl4SNA`Ue!xIA9wbI@5o1P-T8&ElBq?)?HIfRZHnmMT7Twvp*)pLkv
zt{4HEuNX?;`kaWnaHAy4TzQ4iBd9h76W&f~F(JByxXZ2axpC|x#Nb5p0wz8xd6vK=
zJk2u~(FcEVH=lFgoVIOp$JCKjfHrgDi_RE)qg@tG`ccrnpH(d5NxZi~)YHFw23^q8
zCLg!v8-?T^L`n*=+p%^MMfy^+C$efENDs-JAjW_x#UX;@%js9mO8s|9t=0Ai9|TvH
zmb%2vPQ0YR4Wmx}`O@pc=ejAnrlL;&)6B(J3)dURB&OGCvKv7*I#w{P3}3+nxvz)t
z9@tPThh22atPC-aQx>RYTHt;vS^8{aiMM1xkm=Wky<URA6YGz7N(8iA%kaTwdYy6C
z;+nrOWN!VRWymaiEs%)CdA(B<-Uk{F*~D&XwNTHz*!9xCl=eaVOB4S){-xWDg%FK@
z>BT$!OaH=Yn!!jT=e3hL0H&Vj7!--bMU5T%`IfQSmSM}Td#pVa83#HQ*zZLteE?JE
zLz!_0-AaqiD3FS7{!}pnD!aqc`bf-~aRMbwly%bZ=k|oLQLf~A>mGQ74=<xvss^%~
z8Ue~;yL!F{zW8~E_4aggy@473&Rs5o2A!59C_jb9xf5gD>UCYASX%B5lh)B3M0YOO
zGh}y1Onq#WMX)rwqP{_?uxi_1Zg6VI`iv|Go+azZ>QW9BfnjOI$<IQ@;(*RXGdpwQ
z|IW_5Wp-vxCiCj+{*bdX&6?Snm>A*zot=5JPjT|)>`a=y7t``nKvw^^3z$e>O!u27
zI}X0^BW#iT@17DVE&@p6#Q~J1*`yD~ml#~8HJs@jNnhdWkjs|*Y~ZGq11>Bh>33PE
z+N5GY5Lg}Y<$ak=6C;3et+d-W?~pEj1xe)YHt&VaMjt-REUkD^|BhAoeTjiDi3irx
z91uA;n)oO$+wz#%xQ}Gla`}Ev1dml{2^p)q3>s*Y&bS$<sJ8BYUPaefu_=})ZQI){
zz)+mzjwPT+1&NVMulNEGLT_}`(3VCpo)rhf4GJ=-UMG%!0Y+;o2*Gs;wa+w@R{jUR
z@H<*@I_c50rQ5TrbKmHz8yQV}6aSc=NgiO{9!Z5@3d8ajkNa}YS&+y1RCY?hwxR(q
zA~qy9s|<j!^pRW<eSd>{lLCXaYOKj-J5T=qW_ITG-=Ccs*38b3vjDd%{lj%I|2nD|
z4{reRf{E+=?VM|*W6E1bYZpgow`gmt>M~8O_0jPl0~vLn=oes4m&Z&FuRq`>cDx2(
z(3iJarFkyqa-f2X6m|a?n<)%um-;{nNscjXSvjT-#t3Q!LpE&<A=J1|o-$BfO|aP7
zSlw7<sQ>5nZE+5AzsnugclL$C;@Q<>zt9WN#QFqhM%@Xb{A>-1Pi=R*n&-V8EytY*
zQ5Mw&+sz80`sB&M6weAM%+lJ54>!Q+JbL}jxPGv2MpFg6015W%HM%jJm3s{Ti@JE}
zJUjFrmSzCe0s(@GF6E{#6?81WucC80GK?4;)ikfcj*=oLCsTKXF&~%Gt%d87W_Jwd
zIP2hpbz-=ULpCL|%|L3vw-K9a=(M&wAYb~YxceVvkDQ^$x!AA&T)MeOYiE&Cfbkb_
z<Cq9SqRDnN52$IqM<op_ROe*Ix<#f1_VYg=yAJD*j$p^zjV-1TcFo2XvbiH#8bc2X
z8C)aDV=LpqiHrSCt@FRikWv3PhD_ss2t$Sgm_Q$vA#<@q#raQV$mG0a$Ygz3hD>__
zgQinE`>!x$QvY)qGMv1LlRsQ~eII=61O~CX&3u-=aWj1NV}HWSXl;Q52`K;+gLdgR
zP|<{GrulCyfWlx((awh>w=K<F@sCX9XS*n&mLb9-<7_xSUYhmdzJ}|vpad6P)SeZx
zX~x0=X?IqRiQ3z(C~^Z~01m+~M~{lDL)68_IjS~P(U-jmb5+l*Ex$DH-sVg&jlj)*
z=Xdr=<Jt9>&d?0o2QYfBV?#574D$D7kyHo15w5Vb*_!)|2Msx2R)LLtRJoAbU@{gT
zHRB8EIRsYoiR!iC_FB<=-~}sPa2LpGYhPq#yrZ>Xqv0~yC`~M0m#@rEYg!9S=%2oN
z9Is2F+XHm}qG$uP;p{D8C8@Ij4!$cjci~tFOn|wamI+t4*L7U<)WZ#qJED><i_=W`
zhO$PznL`kCR1@eT8gw1%%NB7TcP!lU>V_8LBjfBN9O{pJ6>k_E#Wz<%vl=3^k}{md
ztLFo(J22<8GLx!Lo|IdfTj1=!mAF4!p14j|TBA%mi(clv803vYMtoAxyLODtj=S?b
zg(~yO(lWy}{oXTi1DW$Yx11aCsFDzQSqF4=6Ws=O`E!EwG4L;C>Wi)o;~_$LmU<2p
zZ}qpmquKDjJ@4I6>0jg?v44el9ZYS;cuqc43mQRL3zw?eoUnkKFQa#yO1)GJ(wP+l
zP0AKpXrB{I+O`EtjFSIB5T?$<dXiKv16af;;}M7zJip+N#BxqkNOfbwwzlEoin~nV
z`W0IyiPUqwj*|SE1mu4`KfI~5QAc}w&fd20DcP@`)3X>wOFG*|FKWo}^qkaJa-*wH
zFqxG8BG}gUtR<PV#T~XncG#EjeO5nZ6*&|nkyB0Sl`-)~GH!__V>pQDDga6K+u)k`
z0bNP~FH6HFKzj1;b}4=QL0w7!E)QDWA8-my<5C)J*JPCbyGzObKf$G>0+eUSLV|qk
zT?>j;KbclqQPHzt^IssKJ~v^pxJouOBoj;CYmBDP_O~&bG+Lb)^f95LUxJ(6P8i6a
z+`4_JrAbSh@Zeyd`aBt5WCSp~?fFpKXvD(<Nwgq~8S1bNa`+HtY75OC#?`B-h?BDF
z4wXUi;=MTJ3Ba3=_ZGV~B(1!lZ*6($q64>qI!D~w{|i0tTl-tgIQM))uy~+s!sjY0
zNsDi!qIWcV5joFNQqOo(iV>sEUj`8+U*qx@@`5)NK!H(_o-w}-+YW(nA)R@t3k)DD
z4x7^%dq<k$ec8^jUj1WZFVYxF4a)34*`>rYU7Q5QfikqihqAyx(tk^C#lv-bn_`_3
zdXHv_GmHp#$LDWh{kD`S=_SlVNPM9W*i$MagQIE+U6l{nI7IwZt$~lAdp~B}7Dc&4
z&rL0c3+J)VcItD^TTH9?K9P3dor(P9qDdH_!r9@j|3ykRvCO6X*}3u**WjglS3{P}
zTzQ=A$`Rzc>qUNz!7QnN(v;s>b)=9w=O^(#t;AI$7lgy*x$NTMqDsg`<$QQetX;@N
z3;huS8gs4~F@)yjYUME-6`Iq(CvX;j{&r{a`=={3Vv6$kxIf!lshkCa`X9r4q^Q;c
zPv*nwy2X9t%IC6LNLi(Vf10uisVrij$#W(AiYl%ZB+z6B;iZNl(wMAjCI3@NP$Zj5
zjlPp~(k_0?^dKulA4j~iXo=honepy(qoW#8Y@LhGEwlUWPF57@1pD(8Rt0+k;`Qtk
zEgp-wvJfW+%hNSbuJUY9T^eP~MoV62w#~gb-ALMIdtSB{+2zUdq1$k=o<NNux6dd&
zP)4d5xP9FTiQ{agy3j$IU>E=$x;`jFrpf=lfuX22xEWfg`g$e66%)!w^0;XWCzP}c
zEfdwJ_l2taq=#(^dUC@Di?R%mGhgEDqB}2G_bLI(FN0t92<93j`khm+e}uf|YF<W_
z`Z;H9pg(XK$8Zvfsi)who(~CR!NWeBeDCbX%F_%_$xvkMw*&X_-^DI%JvO{`2s6pj
zk}HkB?a%K;oONtA`_egN>$AF2L!?!-VTdlI#l5!*{pBVn1|+LvZ6nCKgtk=)fjnBj
z%D@4FABFn%sfO?_0*0pU-`ySi%ZCEJX|2{!SnXF-F@r(AfY>7SvXNf0k$N$Dd173c
zGk8}d?A+YQ`A3JdSk8opJm(;)7v~XpTZY%A%>|cUP!A{$UG<;N!<r<pokza|Z;#2u
zg}~H1w%1G|k78~i9FoJ^hV?-lu+BB?{QN@Tv-!Hh1;6b_Me0q|isYElI7PJZrsCrr
zi~H0oo{+ZI=E+8B26MAwMu{D+-(fZ8zRv_=S*6~OeH0Uf9(WD{9QYH``Ymn<Junj3
zb~ut9bINX}aAAlpL<g(UnmL+=4?jmU|9^OnhVZsI8s_bPZjNTyH1F`gG)FUMl>NZw
zbz@sMej~Ud#c#Z;db57}Tbu3a<Z8vx)nQwE|8m9g@&%U!vU|Q)W^QQK;4Ic`dSp#s
z$z2AP=ohm{TU6e}cv@JlwW3~dXmW&suZ5{B+Ib*H-78PW&61>Nx)uR>l0>c$`eWdn
z&mOC8Am@zYD*Dv;gJXQluPhY~7wW63T>fzS*kxlw+?f6XL<M)J*Br}w!Hwsz)UA4|
zl)M*q$nXMEp%)^g=H_k7XC3^kG;_$G6OgiFQ?}>hbt@-QyYwVFad3l$p(%TcY&tNV
zr{uRVu&@KjnRNv@>f6vJz<VxPNPzwM9b5OvU-2l?zMHFGKcjz)AbP3=ytDVQe2J$4
z4BjmTk^y!~>K3vi)D?fvNO`{lnyijHPvnnHqtY+5gdz7Jj~~i&SNOIn<?&s-R0G$b
zyIy&&@S!$T7>IP9&2tUre5?5-(ds*ay*?*S`AEcor<3h7zp*5~u|9LQLb#NyTxx0f
zWTlan&Wp3jaixaOEZxp>7Jg}@lgyXK?u*P!@*6^V?NL!F6c=o1JBBuyspW>RF&~oI
zU#e_UP=ofUDrgAd`fF8|5HOt+B{Jor!idCF6s0`7N-I$VaD8XJ%GMSf{zjHQyGs5^
z|F;*#L;LS5oqy{GfcBI+B`>&n69*)mNGAyou%(5dinmi*VxJ?NkM`^X`{ufmxDIGh
z>uq+(Mm%@^tbt3hLslfa3Qs(}smrt6%uIZ>+B<3p^>B5y2Q_I`AZ(a)sht-aL8IS)
z9v$W|QlXW$#9(L#f4(a5s6~k1pG|&!%wxGv$N=Z!iT`+wt`V3Q3JmMs=oCothx}nE
zkTd2ITv|JLabjCIx8^*B=Gkmh6JZcsTLF_QeEYnmikT&6x<THH1T>Mt5|sHn5>8Wp
z(zK)hr1;YE6~b0u!{gLJ9eVagnCG`27p}kbe#3cWH$hO9hXAp4ax-)LY5vu5ttG+Q
zWoo`+)29HBQCyc+OdP*I&fc)X;wBO|mb)B~u}k!0#8)xw>dg2?1r)&EFcoz^TF99Q
zWMlv|DY`MA;>e1=`UA7mFAD`U)1M;~Pdfa#7_nq3-=|@vfYP*baG0h`y*`CvlD>%4
z?J~II@64TzZ~K+i$)7@nSw;(ot(Oj0R|+>V@iX4IYh7B}i_d%vAnF$S&fBDGZWg7^
zX|jRq6YW$av$AqQC|r^Dj<4x`QQ`f4E&dg*^FiOJaCI;A@P#A!x2!WW{EtDF@G+rC
z7($9JU~zhnOBL2i9H2`e6s`T76cfxIX~7<dRB>6$;dVv8D0Fl~Ze<wc_x)nf3^6~O
z>m6?>&5hpQ2<gp&S1MQIh@5ekX5YwbW#-Bogv)#T4WDg!Y@)L!+pvhvtvf{K<#&1*
ziZNQzxh?Kvrl8mxzij*MfNd!y8=wgQiF#SxzU;V3Lua>$%1KGjVqD$thL1Es-aBj;
ze_>0JZ(fEuH)z}?qa&|LF*Z7?WRDltqprSQNq+mkuUTu|UBJTYK4&Xh@~Q;$cfFzp
zyI&@~%(ao4b1>=H+KG{ZTfgh{4*^+Y0L{kBvc~r$|H8}+CI_v-q#H>Xuo6U@2Va0H
zY{$wZ@qz~*(WMFd$!O<A{05%T7aLS;Hta&ZfW%3Y<L?+G5vw@fA;MF=vx|4&I}EJ-
zPgGEKF#ZNKdj=#M+Rs|D<YeO!Ol7z-rNM3mBr*_7dpxU^!7>^BonmUq7PPbgiT^Rx
zfk}>Yhkyy4p8W?cu(vFq5esSdcvXv85=4e>a-LlJZ0}p+Oi$n6JpkHhRX~2;x34t}
zXm{aVVCKrrlk?C(Ym8ypE^M%@GJq(lvK=Tp@{1)Et`X4Y!f0?31}uU{2nIIi#kDjO
zeA)9GkWwBTk!?gr5F(GU&KITWxUh#acz$3;s-CVaKqbX8XUlX{&(BzX>Hp{IE1YeS
zE>eGOG*|SH9g&b~sW`p8$ZQw|^M^<K`I6xjM`;TLecVC7@t6YXdy6VzoD8ao*$Ka<
zP)v(%_#(4qE#oYD2_i-;-c@-JieQ$PD}g8e?@z+2BG%(x<pWzQNJP?mAzSCQ6(x*=
zw5H0nG|0<N?2fM1&}|5Hw;rK{E@m)qF+0)7qRC8Wh!t?k0SoQ@=R1fifFg;P<j38N
zTo@fOvemc1#naX3X)Zc4bv{fvd11W)Sf-s^LGa>s3Bpwc{6V;KyjZYkWj$bB<8E1>
z@N<@<R@T(9`#Q^>5PdMkOY0~BDbr8)Vpm02bv9?ELC2gH1qBx9r3I~daO@UUGPhaC
zg6Yhei%bx^_ag7HS$<>BSsozegd4I4&#7`@WYuD9&f7mEa|7@pnR7}+uanyShMEyR
z-Jf2(9$b9&ky$NkHHY`K*rO|l0EAP+u>B8~DY=R{LLgJ}{h%@>H^Ll1D$c%JrsV$5
z$ds=BZ_AX(Wng=n5T1X>hW*}Sp6=uYl_o$5%6c?YV@>xy48LfsFOuyP<;k}!aaD~J
zZa4sm>J*i3NQ3t(jKa{)1TNr6qCvp39u+EHje(0-Q;6(eAW&F*GQ&O_j>80(j*ruw
zZbReBDcGBp(`_E^W(zfk&`6mA;k{A*((b%s;G}S<S(hMPhM{<h7~N+a4PsR69qxl6
z)Y7RPMOg{Ogka>)4(|Hb^$9Bw_kk3<*`|OZqfh3ov8WWnk{})6z>|0RF!A^x#namM
ztbW(Um%3glo1IEN_@S)V2A=&$Ab7?iJRX~WD)no1V_*LrNKta7o?Tz0=E5bw<8zo=
z!4p0^Z%>GHm~RdM<a1N{!sssdXCX-UInj7spJf;q=jDbFZ~BZ3S=$(K%9tng7yC3=
z#>BS_V2Ir8tcqxGTFl@nHO~f^uUFS^;cff*qSmr~X3^z(3>ep++hG!K81d1saqM4^
zupN&()7OZv^4vj<$Z|L^jEZQ)Wh?iE;e#!WPm-FdN>egkJlaqqYj^O?E0#@ft3P9M
z%2muWHctDHm;(*(H*Ri5D&8_3qZvb_ITCr&Z|1+$k?ynM`*r#5VHPuki$<rmg-ya>
z@u^P6uG(-{nUo07TsL!y=aR9WVI{8IA&i&aydx{b3A7L*-S+pD4;@ki1_qa3_`DZi
zV<V!zNCBOKgmXhlpBOZq@wV}ADmMOcvR0dNiRnC+QDH(FqEF{KK5EB4ayxnd0@N6H
zeYK#&-F~hJ+U$e7mUSruAOC&4H<%}Jvo0AtgdB8V3Bv(HjO^~Y>)8IJCI(|Ms_w6H
z$PX%0GXLa1SEkgFA^~9NFJ5mtZ#2;Q>owTXdc-%Z*F*P|&p{IowQS>S+3FkHS+|il
zs1oMo<24md%TG6T?SeOi0yyAS8^p76`Kba%A0Y>nJdMG&>Vuts_`FOWu|LhP5s*K9
z=WDQKa~Z4-?=f6xgb$=^)Qc$p3C0PsRC#yp-vfg9Oa>M$_93@>iqwgpQ`YEDo^x-@
zY^^5H+aFo_mre0)wg!!(82X6#nqmZL3~mgq=KGuo(hsgNS^TbuwR7XMOmp%RUvOE?
z@11*4*B2WRdqCF6%?8rn434rJQk7>;uJp}oQk8(q9p%HdApg4D*76wfZlKEflczLf
zB<)t%+8fh(3&%lvJ%pNJG&oh8<fye}xRbTK&IlJaOY#pYX82<|1d{<?t0Fq2lXLD+
zP~9?U>Q&(^dD&Txj8oniR0Y6SMGjPVy7@vNGjtSHLYjSwbm4=OOCy-byzaL(#~8y|
zo?&rzZF_Jv&%M!qZJDw?$vs&kFT>h@6Q9UFQ~{m4utR!;DXhC?fC~{ugdqe|vvy7V
zHaCpGXxZ5wNl{F|{Ht%~{yVM!?=K(&dk=8U2G+f>Fv3>?iR!^lv{_MK_bt3!xe010
zRWz3s8Zgd62<O#3fJHnD4zk1LlhwUSq0{U_ueVfwG0V&>$Sxul9o2gQU{YcNu<YH4
z2!cUqerF>5LGHAsvhbahK3H2XILFPlG|5Vne7AM0S1UX~y8ww0I-bY@RXbGj7HM=S
zNtN;of*JA@?M*(jB#W+mfR-_OUR=*5as7!cMw0?SE8Lfdh5@hQsc0!?r~6_Dl`{+y
zr6HXQZ#|V6Ils55Zo<+E%og@>rj{;Kw~4QpbXHJScDL?VH|WKS3W8HF!GrP<3(_ze
z9z=*#^4hiH-R^U#7*9@#%qJ2|N--+cLv_c{vx3SCl@rrHP%-YZyH&ZBQDR!$^I;E8
zXRKV=G_&x4%%8``LY8i}8%&8oI;H)<T5cjrPsM!pF~d0b#l%gKkzm>fVt*ZlvOD)A
z#gY3&nHdIeSUcHSj&qlFxB;r9*e45)JH8g#FisT}T_qRC$@hiP+dTXm73F9TzPI$P
zz%u9m(gY*#aasaj73QAiYkbWuy1QOiU0(g2hc@hG_cfip*r>@$-X`u1$a5sN>(%z+
zRHEWXBe@;^IG!}nrcqdx1XoYA`Of!ttiDJCvyTO|OR?g$oZQ&RO`3^9S*8|baGZR~
zi^$c*B|5Lzs#jVV$Z;b?dSk!OO4o72)m3tYv3W@MW@3<>SW$y7iXOL~Rr9~}Z;}-0
zTxQGXi}+fe<Z+=x$>q9eod$*xB^D7`YI_a6BOthcGJ_gsF$*rEm0Z{)>9DxKDQ$sk
zdqdW~Z?e^tW^ZrLoHKZruKK8EQ9X*-q4RoC)zO3|69P8Ab<oUt;4cLQ{N8w^01xWk
zn|ZC<0Nm0U=j(QhPDksw#*Yi+;Y&cvsD~EKbwmsW+{puuqpzg(hd_;u=M7$j`tgp&
z)Sk>COeiSC;fONKfvLl_d`E+6;Ui1erkMciDoky{l_agKR>})&-pYK8!WvteQ1>D>
z)=E1BCdO<_u03HXrQQw9S@UxY=waRsI}xm^7gr|%X;Td~PGvHBcb9%}RCk_xL5^c}
z<ad3C8o9#*)&C{*!R216cK3LU7a)()mKMH^Jm#UDd+9Hn@R)hZokoD2w*{r~kR-fX
zsrnZfGHV53T<AZKA;bA!X2@i`iy;&Czs`_hbmVcg5+^sk^^5`#X73GO-G(HSBJj$y
z8WcEKbcyY{aISPu7qV$L+OdLL?*$bxA2H3ch&+)uF7E}`Y=R0=cgl&FZC(~pTol&J
zWr4dG#~orpEJ(t91P)w>a<WCTNV%Rugl!~|B0eeU%~In0gAAp;tV5#1P~`9375P7R
zFTdIl@8Qw*(GCk8w0)rk8F?O(+Ts4p1Es$--HYi6d7_3dkdl2)!~jI*^sIRe2D7)X
zxENLZ(E@*pcfLv4nQkP;v5fbH5ycJ!J1*!0&}d}kgs_fj|DjTDIv}dPWZ>eKshAZ8
z9~<KTbS(Lij+q5pUVkr=V(*|EgD+@lN%J&^;%6D%i6+uUz4?-M2b=kDQPDmWT8yzV
zkO5Jnxh}p2Y6{}?V?tknAC%xf*m$F-GEyE900?j~yA6ylBHXKKRxXCiobA2{h-wR@
z1W2ZyJsRmX_xC2N8_z%-ewu5eou0OC%I2c%Lm~rPIVOl@F(ISW1p8<H({{?6*m08V
zmjyscE<n191(eiuW|JZWoIF3^=om;t()@F#0WA*e*H}dEtc#Q5n2xxRCh7jgud5f1
zgQLcFq_UiS_mX$wT5jMiWLAcWkVszvi<qi^3jSTwxUW=W>N<)^q9X}3-o+Pl{q(f6
z9NLE6hrR~oXEawB1k<VP%~R-H{0NdAu#DGmB?+FigInxD9cf%%bj(S=BJF!DBK}~q
z@R^sHtNJj8XN=tbwC$4z;Up8e0;<)w766u#d(W(b{K!5AmppdLBY#v_>!aFrtI0%Y
z3~jRi7hOsS<k|f(iEos6DeJ-JL|Okw^jmVYMhfDxy!e^tK+iy)J6;YTXaApbDINRo
zE~O3;vJAMCu92U<3ptdefoBf;M!lYOIH{{S$Y|F_ym8%m{o|~5Q<Fc*r2x!!v#%Rv
z>MWOfwhBPDoT27Z>4i5>^z~KZg6Q;9q2;9y=Ps_`vMAnz&S}MsY^o*+jTI&QDuLQ`
z-l@(!lM08wP+rjqyoDId*Wuz8;e;b#W}7%ouZ&J9<AwZ8SU&DT_`;z6jB2F^DQoJZ
z)t}&`3j9)aVq&l4N|y=*x;<9NmHR@4D6D(jb4<Amfa%kd%##7Ups*B>!mp$y=_qJe
zXmDGZL46#RVmUq5D2{Uy^gwDZQ`VAmrWft(>?-Hiv>tu^yZ_BW%~lhuwq4YIGkpFB
z%@pQOj33{qPX6|z>dZ&4u0RR>;~H>$>Z8(JQ+iq_po!M4i7J2)<_l!`yi7+%>6jaK
zC#w4%utJs#t98(-%Z^QOM=mKsDl!pwcz0nc$s0n3rb75e97>Mka1h(W-Iks_%>{Iv
z2P>2>Kcs%U%hg}{)i>P1e73}KdZ`uU!o@oh_lf7#n`{9R;51e2e$T>>`{zuKBW3v=
zCQKy=BQ=RT{0REudHNkD1eG%UOlWC=6GJfvy~W!WqQ_mP<{DC7p7=jFL#83^Ht;e5
zrR>D@=2lPg=88_~F1HXBr2T%LA6f<6X_Qq8{#3p}m$~9D!<P8HuR8)*L))*etlAk?
z;zFf(I@rT_jekCrgx4K@#>x$kZWIFUjdF5&o79>jt5{8_iEoQ9N*}BGXkr;}B_Ti<
zooeu4RJ)EfwUvM7;)%nYnAL)%-?(E6?Y{_)pQ}fF9S~OTP_zG{=@u_y(Er2Un};=h
zrtRM-R<I(0T4hh5Sm`{qAQK5|5)_rrSj5)0f*@NesRl$qSrQUdEMQrpwIh3iG6ODw
zfGHrd3nW+wfdWa`mtY8lEkHsD1l~KHX?1=-ooVN>&+$I*+aCVG0eWcee!us9-Pd)V
z=f{ICVGLZz-r*QP<c=Y%aO>Y>;7Y}=#-um#3k=zw#?0-GwU^GLAUZYE8=hQ$`8?#;
z670^qsw89zwaY$1n~|O0TQPFUh9#`5wKK$t+5GiP{b`hzem8gBZOG<f@3eu1cIEP%
zdF?~tCj~kBqlM%gZ_2f594^m1o)RXQei!TRw47nkPhF+y3Z<>`fTfT4yeMAY;K9lz
z+oLPhfsl*zT!>xYK6g|?+S@btExyv*n-gJq5G5ly`O#x<Y(h;=n|r8Nmt1Msy(=ht
zt3>@1jr#aGUADkvwRB@Re5E9#u)d1<kayT5h|;1E>8$E3+%7;dq-^)1G&rgf^!h<(
z@`Rz=%N4tGW2!mp7&Z4reu*kYe}Cw$Juh+RqxW8}1cRag9WYd^RRLAk_Z^tEJFvb_
zOsuYv#RHoRa%gJ8zC5I_G&-5#N=PwhDi(vhV!OjF!!kl{W$|IDbeoAC>(TMn{Ny}K
z8yY!fgrd()#0OlnPCx`sZjaM<CC)g5HYRN$@X;)6cU4ILB<Il8_(4cRZ_<|qlmuU_
z<=6CMi?HsHT(QNctDf{Vz!w8sllb9gDBN0@`E15~xW!qfOdM&*EkMC*RNp!A)^~yi
z=k$B-12(*%$nkfECf%X9wbR^nDWIj6uR^S!Ux9wwFI0P~9aOc~QbIbO2k`s?0*-uz
zRznS4_F>pecIvo=lrqR0X1ozb5gJOK{EwoNKytdvO7B%p=3wwa$F()sGoz#d#h7cc
zSsSx&`^=#63TdpKrN}lg0k{eRvm*lnV@`%x2GGc-tY;0!4cEJQ>14{E7Co#r^rWM-
z4mu-2`c3T#J=o|5?9o;BmMHXnSiM5wk${{hD7sT&C0gjW9awwHA@0Nr+!KH)KU6*5
z5!)@Gn;^mX4v~hNils<;o;~YE|2qqLIDtTTk_lqove)6)rZ3Qasjy##UqD@UM@5t7
zN1Kv>I+Y5Sv*3!qPV|)hffQS&OZAZuvm6Lq*6F2n1>MSl+ck1~!;?&Xfj6d;7q#>N
zg8QPoXEvBz5i#oud!(ENSi>bAZpMbY5Olc(rnm{a!CM)iM>eHScZ^<!-Apt#&UV?7
zzBzhB33Fz6y?&@+`;lxws$eh0^rP8z91xy2zrB2trx<HEyazvNmYq@^{Zw+>Nq(HV
zIX0j<VOTu)h`l%VI&WdvU3-1r0|tu+Ve2MHLLf$JZuPLYC)Pm_19U!O^p|-bz0fpx
z;Y$hy+$Hk?2WR~Qhy6cSEdQFuK-dU$d``}Q?uU;@4lVk1Hn`OSuK?gOE}nqr<rNs-
zp3OwY@u^sT0vj58HA7!16D;QCOP|Ko+7yOxKvtYQ*Zh`Z@m{CPQQ{&u6Z91CVPx5=
z52@%T8v=fDM4C<QTH{-+j8aZm3oDrxt+Hwrz=k*6uGHBOcFZy{J#DMmREfEK%J+L?
zF-!N7o=rh?^C8mWSR+RvPY=K4g_J3Z?2GeUTlf2{kBWfS`@cYR(aI#oC%|Az(t&Dm
zOQ86JznjO4T5N7H03QZixI<pmqlyYsfizWf`+^te_WwHS_#ZO>08kp@$j|(51SpOF
z2v8!tE`So`M}QJ9T=~Bipu|>ya0YS6xz`F%0-i0a`2TMJl!{(6K&kF03Zg(&2mh}F
zDE%G+^Lq%)MXssFoo&_8_6?*3bWN{hN3nylCwylk`O9s=q@eKYoXe>r4V$EZfYsVW
ziP36Q0KC`lAuz;1z*Wb%9bLjzNm*6Pq9ah~dmhwkY+&Kg?;$Y1hrs+N0HxnUVE!io
zO23D|Ja2aX+#CKq1m?L%Ke6urr2wT*m%g6;DGT5yn9}coFuw=F{2mC?_T^G|xaURh
zOP5o7>;iA^C5(8^Sbhz)hEk=Hjra>=pWJQnz!W~9FLN0*NfEn}d7N4eujzV7DeYn8
z=S#r&?Q3nv<r7(0m~`inZDUQzzX!t9;KL_Eh;N<rHIbrz4}@{DkQO!t5uqqr0Hsto
zVb`jD^?}NhX4vlVk`}+_!Qlx_z%@S?5>mdN`2Eko-Mc*ce>)K7_Yj!hLttL0RsR0v
z?;$WibT_)k^XDnSb3te9?;$XM*MZ0X9s={za7pd~rjl}xPnHk8Ad&z1%m06dz^rqg
z=ahTw0y*UeZwU)yo(g)x2G8#Ct<gwN)N{<8pT5}GZE3qN{zF9F<|@Ro`}c{3Cta5@
z(|>mTdHMc+r>rAv93RK}woS4OP5@^Tz|ayq7o+-k>>xA(7xdt6-%|N(rbp1!DWed}
z;I%uKr4sX7c5SCW2!}t&dbWGYK#{w++M0-%EDrR;xVu-7#`dS*Bg;jXrM<BnpB_5L
z$2SJ(b_Fy0vc`_?C$vGoR}V8?-*|m!cg&NkjfTh?A7`}L?WLG8#QL6co9maWNuOpd
zcNn<)%<G3BiS6b>GmSg75g=&={V;Uw*~kV!oliE9&Zvh$fj7#@aREQbj#|;M9?N46
z1+Ma%nwlbO{a+~n5UB(JqF*imu)bX2PNig1P%C(ystjPmsqR4V;O4SV`j*@{kFK1P
zVnSj|0cVpDh)5%jw~7+IE-s$Q;>E~^lVA^-6$Q**_f)6}25E#Nv@UV3rWjMUIgT!u
zFofPTgT(P&JFN#5BCa>rIX1+4q<VY*=CG)*wniIVY~7f<8>Kd89;$nh!a_#t3%_78
z)vjO6aV?E&IqA7jAuLgo^5SDx*_>!(7LMajMDLU?2@)mV{Qf*lFfnlIO&qbgwg{<#
zqP9iZ0O9{*UuXTdUM_TgM>Y1pL+<$ar&lhqZi7lJt)_EC_h&o$&p&hC6km7K!u@Dl
z+fhJ}p$2;QAGlqRwe}^xbRsQ+F9&XBbVZFE$mU>1b0s6Lurm9(<5+ja-Lj~dxze@!
z7J64w2G50iz_J2-f{HT!QmQT0Y5R(d6ilYG{R<(|Awh!31u7<3$P$<DMu%AUs1~J2
zPgd6oFr8m?Z%HPPd{wNjH}IG;y_>0iJ&JkK_gJfZ{s!@jy1^(+V!=-M6^f#<*hhe^
zoUnU8qESJ68tlVedl$|-%Ol&ZzP%{KPJ1TWSVREbViU-AE7N#wh^h}RFDx*m8#Y$+
zweb0WiRD~Doo$4MC<>&1tIb-&1$?)%*Y8uWbz35@`D{5h+iptOKwkYm^GHraKq7GU
zhDGm|6&0qW>f^spDNoBrO2)8(=VRv?htqi=j&%U;?<+V(#&4e<9I~5^%tUtOTtN*7
zbvi8@`+V}~0p)F<x(mG(I?MbO$))PGLvP9NmXrOqEi&KK&bnS4YS{?+&}5U*6W4v@
z$T{Adt?VgQVA<vc!xkT-i^b8F;yjl*m(~P|qLpilu4n^k1w>_wILnB>FY^`V{Ei>J
z1nB)5&(CfRm0s~x=X$`#a_|f`naZP?wSoV+jOOAmlF^8Pj0X2A8O`i}Q$|B_5U-O~
zWTRed3F$BC%>m8cuXYsAZfON!OqkDyIFDlJJ%-XViTUNdJuJ0y%dBmcAP_LdV9|r&
z+IpK9`~>SZi@0MFyH1`@X*x%oH|OhM1=Cw1LsE(8`C$yPEm<3Vwh$>0wI)C?Qd>Q1
zE~_X#G9^4^eG=E|%Grg#n;w^h59Nw@Jq`G$==(_!$tAeOns8GUtefmdB+?q7%jU|n
zKqeUvdou@ft1qDd<sb%DcG2wMf~a;<!b^q1#2_upMh2w6s+>3Kzsq?80EU4rxIj`<
z*cxY7S!Z?3@~Gy~9^DtV6VxprV?^Ehl=Pw&>8Iyvn7jq(Tsv=q)GDHl54v?2#u44j
z$M)sRl|6@J@J&m>lT)6sw1IVTZH>s|ctXNvO<X{7c#4~^V1SOI-S`Y!TaFa=R>O$H
zvf4bC#35fgVCHZbZ&=2P+(`$0W+Q6{b~u)4Bx#U7d?)PudF^-o49DJRG^~tU*NBCH
z+?3wH3Y(#Y(Dgs6qXpQC7We-9zT%q@qY}}*g!2fQ@Lg8I{IEOGaP^uQ><XPAKs2oG
z_u<5$?N?hc#29^HDTvme%1G%ZS2dr-uJ<JCf!Hdq_5DVtU!hNvtMF9-sk0i=vE}DA
z`UNVi;SEo+Kq&asa=u0u^qit}f*QzV=GJB!m>|0~iM%O;#x;iqRFF(=-r6WChZVqV
z3f-Zrg=dI_nrSgp!=$9Ez&!^VHknt>-D6wtZo(Mf1w#aM&`Di;0sgp>wk)*(M?Q^s
z%L^6w1$)IOoQzhgEolyXrFlIrY=2{wx28YYq#nEeiO>U`s#bN^p6y~epJ!n~;<8xT
zjQ+_IUL^an2{J%?UZLmei;el*+G1_+1Z?507C$l>Bwacz0yiQcd@%D|+XCm*MoQOn
ztIw>wl#hLIxZ@u|J0j|x7j=9p%Fh11w_dtsWjjUBkBv=D{ar?L`Ztr&MDDyfXn%go
zoU_l>YS>4K+<NBUlFd>G#8!b1h`FGPyN@R8ba?r~WK2MqlZmAJ{{)q_QZTo?_SA?_
zZ)4qp<nrE4$OC(p{66o;xsYq6DTl~b5S?aa5c5G&QWCEgJ^JM<VijFg8?bAWujKil
z;JoT&xBKC(!~aLY2QH#>7Vn;4Q5z9gtYsPKZQX3Rq>C?Des^OdB?zXr*PK7iVkX>f
z4{@X0)X=7Jk-;GdYXD^P#4PQR1E~B(5LRN0g92wUlUfg$iDH{JL-~!gl??SPdm08x
zq}dl`(G=anUMI!Sncd4~SCh<E($p`(*e8ATV=wsVpkojDz3~-VA$7@c;gg)DPfBXW
z^KPNI%y=|@;Vv8v*<uHi*(5A?-(;O+^g~VMdTn^Qh@5KUAZ7GVG&fbyAQ~4rSmmTb
zp~%WI@_vP88l&=eVV2*@dHx(3$E!5c4JCVCw%J^YbtSB=t|pmD7F1Bylbx<^F8kos
zKcLi#S-k*GC93_LOs(z~0i`c56^)CTE2yU$STnOlCvs3CiJ3;gQ9^x3UzeK`aR~Ko
z9S`nFwcCU&k(-K;;{0@Ul`SDgYQa@d`oeR|g?l3H7hNK)Zr7PzjXQ6x{a<!wewacK
zo?PTwdfAlA+C1r$7tM#alBvs^5|7r$>xZ}nZU#;e)0GErbnU%WTG8PN{%TvSMM1=(
za4+f8N^kjFaen0}xIL|@H~fzbbdE%2xfVyx9z?y~L;RVk{0y_tVDU)jd3RqMw+>kV
zBOeQR^V|nRL6HacD7*KqY=5BNkep5}t&rZ{`~(V4B-8`yxKWy0;@@D|ij^nJJa`3S
z$YJ|~0XvSr+p1@t>zE7CZfYxu833<cs9ATN{sUf95+**4)L+0y5i^v-*&EQC)h=Ny
zjTTZmvEC8Z^7O5agr;g(vlH`}dwqh2Cg7YYJIry(%gPqPa{9II8Oq~HJGfM521g`z
z2*`tWt9N4&f<q9U_yaH9cvF*A&V#AA3)w%vJaf+A<%u$_d-5{#T-^tk`!qDyHa=NT
z%_QOQ_osXE$(e&^@cBf2KdSUD!dIqAlDA_EtsKIZ-`5az-^jXrt`Miax>y3F${9%U
zp7N^3_C7alWpnk6WF$Eea9EBwBCb|DHJ?Fos)P?w@B^vczDS40mFl4ZfxGtNG07*;
z)EH=H%k8Ci<PQ%Q1m7|WTCCI9b!ET~{ZKM_PtdCnN7HVT*W{lh8N_bBf-cpW(nN3`
zP?x#zJMgsVnAS_%1{5PS@;P*BHE;|0`pzS%l1Xra8?Emr$X<FeNUYP<nXBc^wfu#a
z0mN!Y2WzSUOmY5M(yxkXMenYw%|XVJ*1DsV`{I0^bFF$Q=Zxkj#sm44DW|AP8)f&J
z;xdufxUA-X%Zs)=7wTp?32*m;Rinlp<}XW5xRdQdMIM5r>GiM6*D`VavAkIKJ<)S!
zdKDcRAakHv+A&f~N%0VLd%@NTTed*Vgc4`yxBWB&{#EyIq)z*Ei{XQ9dr6xx$r|wv
zxa;a2@q<;_{<X_6kd^nQN6y-m{nk;}@8S{YGW+InXV#qm72xAQ2?N|wn*)fep61{J
zbrICVxHXBxYtl{U+v6YSaoXDCKi;3(a(y#d8xyOAvSWF9A7}1|l#<_^a}iZXu!HCb
zxP8#Wz?1=v&7#8kWFOe7sONLO*HF~FITs$$y}Vb=NZoh-dSCRd%J4}+Pf8xDfuxWI
zHHv3FyC&SB0mV024vZ@5_2JtOp{a49&f2W04Flw}om=XY_7ZjqrB;d8SKEbuwY+l5
zDB1~PzgUVQY$i;}9h)064UA&<H<vPtx$arg4Bf>+vW@)!UBZPe2=lC>qjLR-GD=1%
z3E&A9mSfo~x2W$t7mfc@$20Xm@bqvvYt|3eGXNJFg=-X&xFUY%E;lR0l{RGAXXG5H
z*cUt8P)CJ^pAJ^IVo3`{5n(u6C>mc;GJ+!pPJT?)c#BJYHXEixCLhq|{K-eg?=BqQ
zUyy?zdsqaoo>&2K9f>TmL!x4-(sAui4_y-X+Uq}gR{dRC7&8rW2ZAj&@TGn{ZJAGX
zmPpj2qJu;!zL@rpxBCW)k9Wc!9$xehw!}zoq)8?F?-oSCW}00#iX90EfI}+>kVfK^
zNHVgA&j)qhERV+<8t5-}`?-+&=au<NwdXuLav}BSJ?Ff>>cG}wJ$&iS;vbC&0SF$V
zgjxe;_DcRz?8qgbkgIEFV4HFqsDoz%r27j}D7dg5K?+PF`-*{eOO{GXLAH5JR~ZTb
zp+R0a&s$-QX-KeJdD6o`1m5Z!gc8CXZn9RQc263)Z);?XxYMN4<K)@urhuiR=Z%{E
zb+oZZwNr{+t@g_JS5Yk{9t(b~A@4@>HfH8l-%XYFzgk6u%#whEI}L0ptCfFzU5C@z
zjqCRIX!O#CC(m+o$H88_85~W1jQo(^!)HJReuCOF6EIzk&_l%Z0E~RXW=8*1Yohdo
z@2GCz%E(jK5Zg6b6vKzmEAdPyk*gABDk~o$mQHd`%8CU^+AuLg*gsY1*b>aH;<A<o
z1L_GD>CW1Zq2G8L>m>Hx6`W2lEs;HJV-Ck%KXSbdXQ?dt!;@|%&4XGc>>yW5?H~k<
z)Za(YMaFl+7am<&2-j{q-3q#06@~QF9tEwC3_GCR_^8vfw(8NNm{(W6zuLqOs@|u7
znmxgb8)a*eHeB|>DT*d;$WCYjPIPfaS$Q@I7t8kR9!VG+1RzYq5X%di_zRO0D`hB$
zgO0cbUEtd|caip#MbVexQhUx_X;TOz@@t}>mMThQZL|`vo7K`p*LKeqgKC_Ru=OeA
zU1+v?$>FMOoK^E+(iW&mY$zX2uwHG(2#}zY$O(!Z_TG-Q<T_h08PPuT{@7dwxNn%i
zrSiM-;xZ8SaNt~1DXB4fXAt*~X$0}{t@}B3kR0rfH>VRPc=Vxa!D~Y)f$F!#Owy1n
zHrRKd&;2O*yA&C1`EMIn?qMs$g3rm22u$-=+9i?MHp>Q!0T>=<Fj&@`%s}DKz9*8D
zu#8qR`xJnc<Va977XnD{tb@b6sSrG3PFXe*37~M=+Pob;nlOlj3kCy5R8Nc5`)^x*
z=Tqm>7ezK189uNpfh6?A25DJU&Mb+I$`ucp<PvUqM{H@~_><Jyh#+p@;bJrXTtN*S
z!C{~3!JJ5d;THM#PD8P)C2*a<fHrKE=vSeX{!Kme3~Vd<-Jq~LypVgT$7d1*7T^Il
zNTMq&t@Q#)tm2>{+iE_|pxL3Xz-_QJE$i`EK%fU~pw|M`$L2V-F#~*YH(M0^&toSU
zC%%i`xiHM?rG%Xw5ijQ;S59&i56&H!-MuUN?)fOIvD+XWWH70)Ogh*56$`5S77m?x
zac;!CNGie1R-_v++rqYo?=@%2)2<*90lM5VdCPQfCKo1cOS4&H-fUpp$Ce4fHI);?
z9beO28<UHt6&HlHz^xwJmi^MLQ`1;i74z1?6213x;XkaVig{B@{M%2xhJU&wxeQNq
z7FZM%aB3*ezzwPVSkN8pk=lL4PR*3{#S@(;Qv5LNWSs;n6wN@>frql(o9aQRTv~YR
zL5|e01sbbCID5S%KbA9|A!%Zf&dY?p3y*~Tw2bNoL&r&WTXOnV7<aHoA-_&W2IMSN
z64sv9YnuuEg?^eE&)%A>(kECpPw8~sMHtlx{bfJ!yXmO0{n?(Faui|zsCf`~GUuuL
zo;y}6Hns?&2L_%-STIPajSOYx4;mPeb#$gE38m_NSh$Zjz>krZQpK<G@E-sfqpbON
z9iE4X*lDR2DjwtcvO}wG+R8M>eiz8Si#~Fd5&{scf06MvPuZ5=qg10>wKgG9i|51*
zv|$#-KX&OXi&HJl=&+w%0XN2FHZY;@tX7T+nepjK#)En}k)y_<3=_U5{3f}7(53G#
z!k<jT#?UKR)VGOuqpatnZrc=SFon;mzP;Ywc>$tdKS?G>r+AGk6;rwaI>b|1Ff`^K
z$I56<kLzn%7f7p_I-v}Tw7*+GEj{6Tp>gGrv+sqj@w9C;@N$|c({(wqD6t+e9MNrq
zV_)%%Y*T%7c7e$B`7`pby*cF&9Z<u~V&!U=Ns|}by`~3QZ_G^GTU&aK5i&C%LZ<RJ
ziIAbNqq?n3gZ3z%Uyol{7~>tP)#x4<?R~x)^{U~C-_>_t`o<Wku0+1A!gaQs_uEIv
zq=5*TQ?EBdhG75_WL|fK3<Zr|{|_T%%Kv?YOjw9ny~}SLAv66iB4nUsRfNnyWn^FM
z!P7tTc2{Hpj$JKjR?yjhW+}nJ)6{S9N|w^O*bO89#8UbVq%(tnpY&h9nxEA7Z}~|M
zf@grABz}G2W&J4UVUTsz`pfu9L-1m=$qa+BQdEs7yO5I%D=V$B?<fpqC{IxzVNXhh
z^FCt%*IQ1?O<P69_KUy-JC1<BL%9~R!2=Hy-qhF!Nf;TPLfScSeZCP!U)`#CNJn%{
zYV}6#rsB1x;#AVuuFtD&_*q#C$8H*UiWvwE1ULIHnVN2El$*%t!e>FmC7~%KfVij`
z`6R81(qzoUe?GaQckxzVPb&enqH1_MYQ3VrAW^k!B{4}ypEqT+_k$xTA=l&irRaqi
zguU$czYk*t8-Rg725^~e4v+!ET1JL<o&ded`4%k&eR`G|IAr6%?Zs9|;~mAWwPnO1
ze*1Ba9BD_-@zh#rY>v&c#5IAse3#R!XvA1p;FZ}(b(F$@L8WFl7B1zlWv1x^-$=<$
zJg*h<7Gy1VS9$%|A7MH=7Y}^Qs^=ZSv4+Sat{4P)Z~F}wHDPB6JK<a`xfT`xQYo`F
z@vBG;317b}GI;vq;45gvYUyo84I;2n(JMLB<u!zFr6frwlJ$7J+L*|2!BE<(Fb!l?
z{x^ATi^KCvquqO|E%|Ni)0dph^6lFn5mh6$D0rO48=A-;_8shtOGynRe9>LO0-whb
z^esg#yHgFSS3J)h(834CEBhwXZz%09@bBi)r6o5K6#PPW?M=whjARgV9I;RsT9kpb
z3Kh1W8?q<Z7Y_~@Ip(h<9h#+%*j_i*++eKt_Fjj{V%Os6DF40-A=*~7T9UAitltzf
zd7@6PgFPzF(<`eep1^9sHaH?Ka_jZ{=}~&b4n{<+;*(hRX=OJoM=D_*ZXF7YL4nyI
zyY&^%$gfQ^*t<y{`Q12&1BTPKaLYhGI#}SeQaY4rgTN~8ts`G&h72KT%WTf;&X7@6
zZGg?t`R|gQX9uhM{sB;ueefed=~;{3ucDmCel&d39c3Rao9YA>b=K<#D6RZA0ZP6v
z0Vt8z7G66*X?1m~#ZzeqIDRSZPVeQ0WI{t$9%oFm0#kx_TwGa`o!Xw1QjHU^|Hk&+
zSBxS7LwN=5^tr%`AdCs=0{fOiHRw2O!qp0zn)m~c?4${o>cWu4J}a|5@2^OEK%R)S
z5YwL%c(eZxUvhd}qMfzJeAVXruDYjR_sC=Mwu&rvEmFw+Lh7@!&3`QBk<Y@>4uYpg
zpn}2z2)@y2%oz+D&at1lB2ufIoa$ncS=M=jMCUdPaWN5#_2E<+gshv!$8^d2lGh(U
zdL*B*{peM(RL~sIae^whU%2$V<8(~baeA-qo0q7o<}7y4Elzaa?Ciw)Lax}t2itOO
zdxiMGMxV1QH4_FW+6zfj({wJ`2ghv{KAZ&^4xtZHQNatD5Lk@Fg=@Fe<+1X#BM(Ev
zVuH!bYZ=8i8W{erPUr}3c9M;{B)jn)CcqJ9wit?LKiFLrd8N-;n||KRDlgSjt*cSv
zQp_&PJ8cV(EFcZpAQC|BVbQ|fi1VKB<4`=Oow;khbL84(dpb6J+MYJcy0b<ywx(>&
zB3z(>6Yvxek}UH|$Lq#HDj<Nf`7CXHZ6XhysK0kq{s8u@&g3Mo_ZBa7!rbTx<qz6M
z>#n6@3!Yx=lwuU4jzX-88W0+!$*DiVx_6QxHC$im*n#4XzF=)J=6Guo+lKLwdmH+s
zVy*=1ZNjjpNpG(aR&|KY7~*Urn5o%-MX3afQYU=^O^-e$h@&}NmRMKmL=4~Y;xPsq
zqtxEwc!;-tZQzS~NY>&Tg=k5-0uHwyr|NTYt3kFV*rrqus!avErMLDA;mK)*ZUXhn
z;3^HdwM5w1W@TEH4gv*aYW^R-^lCVqs1g7rq7J)0Z+UB&f@zw%^PWR55pL=}diOku
zREBcS)yvw?`EGvJv)wg?FK}D`u4XZ^GuACR0=7B%tav?t*3ffWmb^V-AVz+}*E9TH
z=TR*Qmvz*V(>PdK+M(;>ULlcv!?2*Nwrb6|len4-_`sMF!tN<tmH6Y3I|D051<Iq0
zgvZC*HL`;<EvOAg-i++N`DAPQQAfRZU<5R@m{<GZMwnElOS?SiQSZO~EkxT_@(uUm
z{9NRTLW%a;$;%ZPN`5QX59GY!^0X10)5Hs!q{L;gZaoU21+OQW1Jd21iQ$63yfWO{
z0i424ieHRgaQ|pn1^|Kjo6sE9#puoi^{~jqRYVP}rt^4%=VK%#<5@`LxGcC5K@OFD
zNe^xGpi+XxbbQ+(%LOncUTKh&?yerKZQHv!E41rx@zN6O{_PEhAG`0d7Pd1#A_nLP
z?s7~LUDH!84r)az8?HvCcquCq+uK+CJqWtfT?=#K)<cpVU$5mUOfD#|evKA)`@-gD
zdDxIs+&au|rZ=OXxGBb<xdvt(qrcdNW%9sxlz+Yw5u*>bvU`=n%;_2LF)!s)4BH*6
z910oodF}k9*w)Galb^&r&G3(Gk4>?PgW_a~_TSOn<g|%_!`}&J*FUZ)0i_CQlhJ5U
z6>?;TT{7zmjiGTeI!0UzOR>f|%X9v;HQ_r<1%JmvQD~9Gmzc6F$~Xww5q|z-t2RTW
z1Hr>;+4W`oq}adyGJX;dWT5}TGuqLg-AeapThC~Wc${YCYy7J+WUN&gGI$mK=10Qe
zs=$Ew!(ve1+qLMvM0dKp#w`aa7Cc;uRr2&qaFcWGYW{A?p+zMVxT=-z1e=GGQ%hwm
z@5-e-NdH>o1x?9{*k;L499>rT45EBWZWb$N$}0m{GCxTj<WC2+wcBoQ`Y5jIk_RSo
zZhd%m<l4JO`}ULz38)$0z+vp_p2+2EUQ!%!-rsyD5@`0AgH>blW6;%m?r~`AF_*cE
zA^m~r=w@;BoJB$`NH~KufKGWT1<5E;+|cu!o<e6y0{(S|43zr!3>or&kRb#A*BLUt
zuQfwvMglTqpub6mOpg}Sv`Pm1?v+g{Cx;E|1UJ<&e*DE_Tt{_`Ycjuip@H-KOCZ;z
zWM}8(%&U#87}U1r`cwR=Hp*ey7o0G!zE3&Hq7YvP_L4ZW253eP0pcFkufRR4$77MU
z^ad>KECw;287Eb!`Iluy*&?_W2_>Rt@|PCzmpvdxPlDQ%#t-O{F(1sSo8q>B9~?C-
zH$a<{ikITHbU5%IeQW*KP&zrfUz|jeUaaoDruz<FEN&Ql<azE1v>Nr^(*{aUH~@z<
z=?x@|(yncT`DW$1CO(6<eoY7#Ny=+VM3QG4HdavCQ5OL}NwM^5e$ri4XX@@R<|qAi
z(>a)F4B#ihe^Y*v<8Q`KTBiA)^7V}k505+Y{O<hXweVL1DnRlkhf0mL-UWt>AWagd
zxO*ls5JZG)sL4F~$SDvdZ&Jc2H$;*^rlACz0$JN9hnq9gw=3^=Y9LW#&aG#x?C@ES
zuNBPpCA=la?-p-Q$hFuB+f<DmczYpXDUeJDY>J_9g7zXvf458^iDuq?+wSUl9ZTl^
zH!L;<(Mn6WLqIv9)2QG(=V13i2=U7jI909V4}2X#;nP;r&Gp(}#Fkz%WIjaLI*8%s
zLgCa{SL&cKlYBO9t8ah~NLSyTQ0hTA8Yn9O(3i)LNy?d=SM!tpvqK#4lh{#?|NHn!
zoWLs3Y55iWqz^&!0kX*>>J_!#%KsEUiJ;;q{nzW~Cym2>00EH*(z-aP=OymXoo+A+
zvfBv4x(rDb-`Fg$+3cr%<$8S+J~c6+zlxv4Qt^{OGosdzP7MTU^Nasoe$wo#`AM->
zzX3l9T%d|TJ<LY?SiHD6&j$d%J_g#=J#w+9N5!}9RH^KaEO@Au@cN-=FYNm>Ty$IZ
z@dlD+HLoaRx;t=pf*Y4svQnp3ZIj+1j)Nil-Xw^P+)0giW|0GIvma*o2sF%*6Bc=t
z=u{cnh2^^gAyAYOndG2+>Y^1f?}5FwwEZooPq_`Dd$pTK(vi6<9|t>_Md=1|o>Z;9
zq5BQ2H@oXlG0vPkZkABP#d7?}Cb1gP9&n7nO0$Bi&sCgZpx{>qS4wsltk?`HFoQ9R
z??NDN(>Q~026vX>8H-w{M-R;(-}Q>#)j#^1b-FvEe#!#)#l6lsO5O5u4?0kaR^_T=
zQ~3QHLlZ*gUniOlw^y*rCQCXoO0iaqzPuAtL~~mgwT29KA3ZnC6u4U1B4P?TA0a0f
zoS!HdtEaR_B_B7B*gtK7Rz8+GiM~5d_U2y9w<Xr1NSYG)#~L56lOkE@KSgNj?$&U5
zRFx+Cq)k4*e{n<$ArQmw4>T=qe-A}cvm$S+mf*A;&W^SO5zpcea}!ZC_US#S`G+W!
zru6OE29xLy{fJmjAW<ePLxG%Bkhqxrh7kd3x~c>+&B`pJvRAB9iK+`+5_7HXx!Xir
z6)v7I;&JQeM#T$V;GdcjAjOpfI(+S#!9$B{R>tk(ly>xVoZ1C>r<WTICHk%-+|80u
zB{3hYIWMDKD?!z8UCGzUy<7_>o@)VJ$vlD%3<8}>6=;ds8rIi`2|0?LkAiUy5(W1z
zM<G_PmDZ3ZCDr8~Q-fR1soQHk8EJibTURD}g9*)Q$5yE0pi}a!q^QOokMNNsKU)pl
zQY&c}Cd$~^M5YzvO+ba+cKsYC#tfm~cZgvJYoi|$#A38rrJ}15mUZChCX+JI>O1AT
zKL4*#O277?QlXT_$H)IiP)dVdd!lAH{U#`-G=NfiougWJij%#)qoWdktSY14%CsE^
z;%t#WtbM<M*rkc!$!>LqOw$c$4y)~bl_}eN1?;c1_mhtzi9=l1gfFqds8P?(zQR<S
zW&ZXC65G1Zt=)5|zpcyGs^W7rcQC^y0{5^SD$#Vn+2=*FV?xZ9Z#Tw;n{pG=!l&Qp
zAz0Vv39PgUfmZRb=%6ZWO0YCzT00vz+S+6&YK%f~j-aNrE`a>Xd`vzRwgbim>b0ZI
zg^##oJI)pMNx+98o;4F0$Zs!9scuoD01YXvj5M}?#ksXpbrrZ})nWg0Iauef>gMb<
zZh2{`sH%j)Og}vosgjgEow!lfL9wa*)DJD)6G`l!l+>Tos%STpr80J-<9vdq6g`z}
zpR7=>tNXS$kSJLc#y8w+C|mB2b%#{|9*Fpqt1Gn8n^v8MW$Z>#o+`%j;{h+Wy%HPP
z@3kieJT0QrUp@JXyEW=dquCO3WADVVc8-%cIc4NDPe~#QKKJFyt+@(>f?g)|<^#hC
zySG&nvB_wyE0QU!sCb_+H93b#fjXA93X;(go1c8tx}2=1-1z!xn_{r7K=Sa8za>g(
z;OZ{Oe}+=3IQ1`4O4X+TN@)q8lsK<%8tFt-ECO;}4?row1*1EEQ<PF9=eIy91u>Jr
z%z!sL7@G4^bI8HrUkjUkqy$9tghmh|9&)XH0id?3e^~3iq!c2$8N7sy%ekzC!C+$g
zj#WN<YSw33UIB#p4&y{X-?go+SXyG<DfjK~=j(*uXjr+ka5P&T$xwI11<v2-BYbJp
zy?g40G<nu$Nq+MVWQWyZsMUAE#X5dfcG_ES;WKA8n0qKC*7Q(ul`j=}K<f@2w;;go
zkuINBUwfk1x{06Mou<4`own4FE;3}3NvTmVJyBAsV)fx=6|5%@1|MAp#)$ynew4nF
z(VVC9P2?@VZSs7zjIXME6IV)J-Yp)JZP*CvIi(iNwB5a08~<Qn<xw3H*}YD=3?X*Y
zI!auFx>(e;>CZq>aAl~*1Cw*jqBfK^v0R42wbfJb+;VEa-L#n0Z`;8`)_i?2xd3Iu
z?@T+Vw6OwIPfsI`&yeTfDH(*Yq%~`PiFqiyV`g0VaPpCwx(Oq+^?<+Z38Vki+sFVX
zlvwb_qNw?A$I?oeCr|h;6k<IEr?Mhb3Qz=W%)Qe{98ko%0UuY+4wHy^I)a0m{NR>h
zGsA$cc;jlyp_l7|^4?LchQion_s{7ePU)&aN^<e0m(|36<|<=NQqO9w!FuNY_3t2W
zPBHT7nYa0b6j(JEF#zwwO=qHluJ$;|iwlNw@VFsILV%<ch##fhx*?|oJ=;UH1I3)M
za-Z;Fmn!A#%sq~we~J#vInk`#W-1yRqAgB7yL|z`xA;pv#<TMY8jp{(*3i>DAZ10!
zu^JemsU;dJQ+wD$g6$;aPS6LOggbwDG~*YI7}e!qEteYSA858}ts-wq3k4)^L_M!p
zI6wz*BH<51ie2B;I7|`|f@k1A+x7if&wEHO7GlP~S}3*Z*t;-3?hE;P7VFK)waOIY
z@pnDpI@n+wYac=;c21xZ`%&7?uGF%X(zeIU1Y<2=^qIc*71UE)!&}{nQ`$f(kXaQ#
zZyG~m0~Kx|oz(hf%>(^Pq1j+R*M;Rd^TDpDyHR`R&-;ZdN}R^<{ui{+V|yao9~na+
zS1+*xi9wnre0Chg#)if?@Ixx(j+K<nPKHGj<$GHODCst2m<#ga)B5Dpm7Ca7Mqt#@
zNw1_Hg;R`2lM{~J8489aC+JFzX`9@OFS`*Z)(LchQ=*EnbnYjX5@?eHmeTTklfb0t
z`xhRQ$lc&+ax{PcpTveg{XFLSj|w{*CRiqRZh0p3%;xIuDP3+NLfM6JapfQye9o_w
zu;bXqvMUT%GMU8a?{+Qc*8A2<lSR!>b5SJj&=C0yV|yM9rxDTig;mwK3w`(qk(gds
zE4y=(s?dyRBJ3UVvTJntDvqFuwQ@N(?eq1KV`-knjn;EJ?l{CG?@!3_COIvT&qk)&
zY<3JNw9#{DJSoS=v(Hy91+{T`L*WK-Ipm`xzz!4_GuwzB<};^rwJU)igXfE_QmL1b
z;V&&S-Z_6zrMEl?%gcNIRH>^<{|%<M-ud~}dj2y_EtQ}QoW@zI$@FxYWH3J#f3Kqx
zox%=`nOgjWQBd1!M<}`G?^abU6zPO137ZiIk?=UscGk-QE*nWh8Q0e0vCX-%TJiR!
zj~)zq4<>nQg?Vm;T{SR4B&@Xx=lg~JyW13vgI*uXj*VOrf)XjaTEmsqd*lZv^7#$7
z0ehrm?Qg?rYTR0VZU;HL@qYPcLU=gz>>tf>M6R%onaTKM`|YPg;SVk7rP+nEgT`a~
z0or5asQeoqBfY_c^Jn7vowhK?tY{8)UDf<fFndMK_G^>(^9>Y#AIt&=duTjFNA%#Z
zs3bqKcP%tfaet!pFezjIdZ}`NKUH~{b#i4-`QUl1Qp78pH8R3a<}y$YgzqKgYjjZ2
zt%>H~FsY{(HEL??Af3v<*14iFvW1&BA4vzhd>7t|%Uwco56osR?;ouPyn95tw@`iK
zoultf+R5=}rsXTvt6#PXbvHYNY1YLk3YXibXC+H6tznFt+xL@e$4#L|af+fs<bAg}
zR(vhu0++{3_V9JANyLl2$UWgDAgpQ>I00sX6JX`FIRSvz9N;nZH-!Yw<*MCw&5Zw&
zP~6cGM5Z|`sXTH8<%TB2o<{4uNOX%^;(iXG40)NrAHou}jV=NM3}XHmtWx^)a;~e>
zO-U=4b*{#y&4w}lZkuuMv?JC^gS$e&ur9=wh?MZv&EKe-T@qZ`c-YlMrip-91!c{!
zN4}EsIL30_ymWWvoBFWP)-%M#C%|@~Odc`!W97Fw$lsaTF?+`f&z(8pJ4vsg)hhBB
zs5O4#a^H`<lbVcI)%CwRra_e<v$|{#4(32+lh#T>a5lD9=EYzNKSE1uv3%dc;7_we
zuGDh-Zr!9~4Gyh~SorpaDl2Z?VQr{^N37I>RQMIOdPuGtSIi{)9}OgS+)TRc2ai`|
zCwMbCVdE{m-mStq-pcmBXIFeQjJKaJ9xrZwyfe`zr$P-e&Ah$z&17rB?3*3l@-r?4
zwKy;sPtZ(1c>vJ{X@JHC4toKMxj~0x@kkuaz7Pvt5-wQXF11UFecENvunMZSmX-&x
z3P>-*{pYL9b1@WXL8V@LL47DZv1h2}S?z5~cGZ96F}JV)7IOtKso4p_Hdl9P;aSu5
zKD@<G-|vmS<mWD%tQ?wihaj#%?$GfUgnw;I;7-ncMsuM^W5&k4aat&mw27H{`H?Mo
zjqibrJRD+jcA8ZvEsTTUh}h^@vktSyhEQuJKEtLK@@CaOgw;gTqAeMFffIy`;URJJ
z^7CqrKrCjYxHs#WUSh2yF5$YGU=Ptkd;){J)?2g!FM=368$@`lh^7!UC|p(+I$}u|
zFDgG+zx2Am=CfO}sZ=6>DXGq$-wvkK8T5_gZv<1C{yR)5OX3TN14GLAGy7iAamw2c
zj-9;NE85SyO4@%09Vd+@&xbD-I{!F~)*3faP((an*G-A{gO^EVlIZj1B=e6157{CG
zZ$9oOS1Y>}9XNJokGCubo@aipyQ3i3XJI7Hiqvd4PBFxx?eQ0qr9rf5>ml@ZL|7DJ
zDsi0EmKk0WXiB;1(HI4e({N99Wp&flA5B*yJ1oaecUf<}lqpxcPHsHZ6%Ab)^H0BN
zV5IKMy$J2rw#1!gj|1Cam#@*9#1=g+4Jtw=NR=L4Lu7MixPLe~wN#o>@;*&!w*FXV
zERS&zbc2&r44A{ON${b+@gE%(m2V_7G<54%lyi!_iSB&gUVp**-3aBFVw8N!Hzuf#
z6%Qlwg>~*Z$cen(QAs^d@qps3iNIH~{fR+eN0(Fte$I91a<S7x$&w#n5DBHIu2?ec
z4kVg3o5MF3<_W8tzECa7BOksxoQ{jR{+Y#IRJ`63ZSM<Wd|8%0#Cg;JN8E2MXmOR@
z*gz1Zm{Cr)YT_riH{esK)A<4#Usuf7T^{YZlGf_|;1qgv?s$6^wG?Z{&E^A<ph}?H
z2Q}5Y_WZK*LJjh(eIw<Y+Bh7phUQ`bT$J(o8gi@Rt}dZ!g33)>JEx#u>zHY{^l`9q
zXz`T!g8@qDXmJ(<J^wz=@?!5bvq1&_>9Y)eWf{UDK=cROL7y;L<4tNtz49rz0Qhi{
zts*#Ai7AoDNw@C^v4Zc0&d82MzNxsxa9bD)kNVR{5&n~?4V`Dk4~$`ES?V%{-k*l^
z22odR+Kt|~3p((GS)qeAy{HqU3F~kgtoMC?uPp<X)nnL-+d~NMsuxz!$lCP~YZ!hK
z?lrVJ=8z=;N!M2NkaJZ(yb4L?szQ>v{&FPQwJrU?F|8LjJg&MJ`R-G8YE}z0m7TOD
zsiM~?)e0qxVHAw_*97x~)@{&fn^b*qCnH$-8K<K8bPa$?$J*6!|9WDTXTbD>r#|i~
zMj_$}0UqX)*WP6s_X66HR)DdzLS3TCC~3<YDT+;>D++yp*3&h_qqT5WcXIGhQclHt
zH3vFkKdp@`q8^iAs}+DX2K*$2ErwC8jp?{smE=oS>OD*5@sKzWh9l1e-|_uZdn!a7
zaN#ZjS<FCAQp^K%G;Mi;w!SjmmlU!L3wTAb>!d1nordnb0B?3t6}x8d-Fm6rqRL_~
zIH<{<M6_VOIuO@YV3s*}77J7Fe;kCE(pJzVr`s`XsC9y@bPLs{x-T(eRf+!Ib|)xR
z$bK%_DdiUZ)%G%Fa~xS}4|iC-TPjP=gTqkC-N32o0jmrc1Xax11G+T~c~f*dK-+S%
z$urLv3lYD&e%BJ!sNR+>&)Pmm`V@UdDlO3_jFA@s06M^c^xlP3&vP(}LPVoOP43hZ
zIC<;$S-y^VAh!v!<nh-X1Pj0PjJBX<EbnMpM&JC8JmhmvE!^EHNP-L;(0k)zo$}l>
zDZyEzOIRbx#EzlzdkiemJ7S%_uDFA7Gl3eK(ym#z*&x8%QmZIF{5i0%$<lF4q{Yj9
z>#5piq}Xbq4+hEE`DpbvdRaHRdPo^@Vu}yl1C^UyYp$=i|Mt?E>v}r4DeX1bD$=Q>
z@l4h;ZVZP7(9o;N)Mu9H&<CVKcT`a0odW2S9)4DuG3@&|wDioJMSP5A%}h$4)`CVf
z60$ZnXGNAu{L^^~eg^}K_#8d|&Vw8!==y_1(h#La@VBoxo&?*$WfF93CAEhvo=@5m
zRQfxYV|$)^wVwY>H_F`)xH~m8Ljt`y#p7AfApD~VUVbdFamTHl4ZN`Usrlk523BW9
zthG|yBOveHo;O6wCUt#>ik>UamrgI2(T!ji8b6_;F5;W-kq1HQ#wPT|R?5v7e&V58
z#m5a*jQ*L2LLL?H6B!_`WjXzZ%`Ab9Tw7G{H@~3wj<fdnZ|E+BnO#LjY@#ZUWMGtb
z8|Ur__dzO}$&_rlCkz(e7WRPUGi0L?v6yJzEcP`f=14r7vgHI{V(XDTaYz)9>rb@9
zY2-nL!jKHL&#G6y$^+p-uWVAeS`5e1CsfDy*DoI9Do2|}y~j%vLCyo|=FOW7#&K{J
zLkrRj_O-%6YX;U&nF40VtjP>r<@Aw)Wzwn6$U^WB5B8C1O)Z{*8zoVsHN!4PgIk5(
z;l(~M)7FUXvrML9Z0}B!W!>q<y*grlmvnXo6(hBw^y6r_umR7H@Z)vw)~QG9%1C?7
zPHGsX{V{&ujMSP;Aa>AeicUCMA2=97B=U`HTip10JdJlj)CU2)X(jSIE61{JN=5{@
z?TeZv{c)b5^livBuI)}_jgzzK5@=KbOr+2HT4LTSOy$tOs5(<SVw-+Wt*EP4WpxdI
zctrpI&T^}xep@%Kew9A10ME@H{V)4nMLEJWO&!8RqFP<DUpdSO7Jr}?z<K2l%jg58
z)jf^5E{oWd0md+(!gK4-5yNQF9yiG#Z~{ONX*@gJu&d7uRy#;ooEp7YB7Ai2;pB-d
z+=3{!AY&{+$1;A(S6hv=4;Ssf+7Z2fb#=$(9dECRc#zZD{wo{0x3Uxz@=1k<k<prn
zo!7SNv}-tq&odUD0Ps3?7~#^eubp@#5ADDeb#cN9%=N|}qKvzcROy4)&r(`mSg?w3
z1j9uvm=nQlwso{F{&_{M4vJeTk=$NCi6qHB&tpM4d>z+ll6t^U3vAR6zvFvR0s6ki
ziT2ZPxP~0Jl`Ilhj&1bid_f%5S!^5y7in5nz}np4l%$*LAts#TTprA1^gnBd3{+p;
zn4qKmq{;5?@YPExr3kK~6574_iU-W-?n1KApR*TD5^gtjc*7{5$|l30(UgCAioWw$
zg9lf57)uOn?9a~0?(N8GkbgWKHgZJk%7CJEtavAm^R#vC0(1QDuIcT|ulEp7iyJO5
z2*I{nxiuh(-TMypC9yLpXB786=_JO$mJ(o)opPrIXu$(WTp>5XP?G>oBn6E`3Gqgl
z-6EZzoZUL^%Ngs95r0IB5I7~+06`J-21GhiY$Z2HVz0KXtiehPL}raGg=td1R`H1R
zv@9-s^Qyj@T53g5tL;&0Xiw8H#&T+E#}dhOLEi=W1`KK{0wOb4GR<1JWJMmw?Ebux
zFnM3l+U4?yE|nf4qw#{dyfu)(g>=?`^Q9ZF-5*txvxkr$LVvz))~Tyrp37=m$^Ufm
z{KwDBRVp(1R?T(Cvx>rrdu7-x)LDGNM25`&5|Il~JU!;}5f^G{ji~t<-8lDz>$%O3
zON;F1I$0oS4=bZF`sd$r39+?bG+%nmN`Sw^#fDf;^L1qNrUlDR3jnj+s%igutW=~k
zyF`j4qwU*WnvO)<%}0M}nJ}0%++vsm5P!uT>agpY5dwgieNd2!6Vt~_;!z60kq-h_
z4K&xf4iua7o#-T?7bmgJTPU$sM_dpmFi?+`b~4b~AQGQ0#V{X$6FlVK(GVM~PCN|!
z+2A(-41TG@-<p^`Z`%!HR4aw~(=)yQdz*3Iw3e>69s!yW%O?cVPE`&;&6kA7!OaEK
zEdN<V1X0FYJh39y07i>(^{ZeT6gIGID(-TeLx_ut>n)i=mM;=H+ISn2VpX>O{-6R^
z6uN$D9a%C~pWr=q7`x^<vk1nt>v%*!%83x->g>C_oUW#`)T57uF#`Rzqu5es=W;6?
z4N)i8O}2*WPtx{lA2h-*gvBd`u`#8B_x&y^7~^{qVI79Ot9+p;Ro$c^Vaudz>2i7!
za#=r73Z72Y1xi&9FSEoiy(b(Tj#AB7qiPOWJa6&+%M&|YD4Iw`IXbH1JTigej&ugP
z)l`<*=aQ0o_{?Tx7wW(2Ah(x#Z5Y+P;C+6YX%hj{&n@2!#}nuBuwMQlM8Q+C2Z#UJ
zc!OGyR?JhEbK{;fZTHAn+f;?t$^?(0ORvR#T!4;FtUn4Bx6YFeTuJyIZ>P=NU~kOO
zxPZRzX0gfY$&_b0uh#Uyyi3;2$C?qrV-lyacAjF&V5&qgYYM>y2Ccqf#xra<i4Nvs
z54RK0+_4L_Ot0A1EOO1*$mJ{29zq~jK}3i-<LfrFUZk&gJ^%1O^|V!&ssDg1YKKOz
zuxM*oX1A7trkl0mnTK(|xv!e9>9EBA92tS9#pYawsK?@4|57>u%UNbu_C75fh*}jr
zW5&~^8TVX?&<{OgZ`HQ!cS5~s?_?1T0u;(A8aWY@H(DOIE#}YiSP(NPdeU@qXm&<!
z@l@OF$(WyJ+R_g`-vdKMA}YH+Fot-zv@)Hvv55s4epYhZmXxyJ)h#BY(A|yGY}k=d
zT9Mr3>ceGe+@_2YADKh8&}OH4fHJ5bC}gE2d8`D69|j~6)cOLMW@LB+;uS0NYp3=9
zXhb9fDs43A>KWdi&Kg|*N*!OVt0*AqT+)ukKe*Pdk%Pb&Jv~jfB{lZxwNY$94kS+@
z(w+afPtoYX0j5Xa@CjD(HrVLYRxGDC-SZrQFvXtu2s$gsxEtbRqr-_umvDLR$eN{{
zNdu1c!KMlO?XvCd_W{vv9Urq@u_w}x9cL07u1mHv!db@XP6_>{DLv#bw8-jr8z`5_
zIF763V)G=1IJJU3lt8awkGMvJ5S12RoS<gPF~^&)<u=Gbpq*Ik3$_%=?DwzhaJsi;
zb$o1fwO>OsE$#{hhc7SyM^hX-v*wJ^-#`WKLkz4;DqZUJ=FgoDu?&P6f<`smoa;-x
z=9)g8U;(QhkoO7L_~|n&tO;{;)+Nq!W@favABV*CG^AQNfJ;wiIHP<9#I`J)gbfjr
z-cY&!>_zww!$O@+&*r73`E!}QEe=L;kOP+c9q1K{tbENAMvMUBe5NZ}#uYeCrF17m
zryNI5x^Y?s8{0Vcc4^iC9X?i8;}9rjlmR`Ky^i20RyjX9I{!MyvrlhYSYWXQVE$$c
zm%p(IUpP^j@7n8Y4?xfL!rs9!MWNCr?z03Ko=^@ll&XN-L)38(2zdctd78#{b;98*
zyGwS%2myS$ePHDl2XR(khC=u*Z<5vP$Y7pxlX1<V`>`Kj7mG4xKiGx-HtM`~qoE|M
zsM?fZwL9v<YLh=_s%g%goU#P4>?p>-<#4y`3J>)heU32tX+qBBHgMm#(Ap))8*S)S
zF#5Mt?BFSM$32TZTfAoq-9OlbR7YQ+{CIQvN1%oItJH|UI?zI0HOGg*i?BdOhPFrk
zfaqli)83papgb!gdm&N$6f-aY8w}-+VcU~ZPN50qJvexqLUiwTE{g>XnZlhDXKhDM
zO--1Wg8^=}SkxSs4j!@jAZ{ZI<p1?|9c#S?!!NZa6Oz7CJuTI=V~^VL8z8{~WW?3D
ztv8Gn8Q7c>>#C{8Lv(<CZZSkNPYxYk?=GWkbzJK$@ys%)kN0b!D%$u?wvngFr%Xt+
z4otzV=xhnA%{l#=JymiC1UtXBdgd0`R{TE&g`E*QZet(;MBx-pWE}po(KVg7cJ88#
zKxYt#76TZ8rs5zfBAVxOZt|O?41eMU9914<i(arZN+K4zS&A`U%6lB24xwjj91KVJ
z{@z#g@krSe4k@NT-cp@)eeCv=k?QLSC&Te_kYrxDxrg|d$j3)Mc=}1?k%O1~ujGDU
zUo*Uku=%)MdLRF(UwYiuy+YyEFHG%iZhrbM+~zO$v+v(*Vg2<Rt9uRi?j65*+~sfj
zUb0<&ANrX#`hD25Nqu*db8@}j_2MZE#weL~uGDe>C0>q1_q7=Hd@?&YP+hoI{n-QF
z$yvM=4!M2{HKi<CBNRsz4pfPsU{W=&l|a}|{5hSzRlaqk@8Uk9xOh9J-CQ9*QlD)T
zqswgMSJ@#7mLELEw&)X-*G7E0JF^(tj`eL(!tqs2S)*NWsFTl1TK85>TQ2IYjb=J8
z`?dGLrmzkESD}Z?Uicj@rq_W_@lv|Z%m2)=Ey*b<f00NEdEAkj-h92=9tSz!;?GRx
z>%O^ukDgxyL;}{xE3h*D-h4BWF`>d49aA_xLr$WLlf8U}{J!*?aUMIBmFT794-niq
zxGl+uWxW#k(X7GAq5Cu330;hT10S9RGa9vaZDs5=nzJx6iq}t|q?iSL>vDI&uhrhP
z+U?k9-G%-*V?2cYSiz0AOGIM0Y>xMJzGhYlo-is%`m&`eg`J5=_JrRG7fd8nV@t4Z
z)kvK80cVd$baF5)m>xXYe!B;`uwZQQ!YBWy54`ukRBQ7o<)BRW`O-C*fwgHENq_I3
ze(TR`TP)vv^}+ksR&ZIKyAH5zZ92RDyi&G7%>Lj$wrCr2+kW!4(!SpI_xaWZo<jpg
znDPGAMbXqsaC+8|oH;`kCk^65F^qWqBz=lr4mJQLnh2)B^DUqy$OPPH-CM%{Iv}_b
zc!|2}R8iF4(WqQRzEL2%A^JVD+XW)%-YeZuBf%t3rd-Z2mz(xFAW#vCZ>Y9Lb6dqm
znjW1eyo7}{M+w%=1vwR7UKixxe~j0Kv2pfhA-%x|IxW&&LVL1~OSfqf9D+$#oi$(j
zD_QHZx3hkR>y4D>Kdw8bIR<oZdv|~M@;~!!(^k!@4gMj)KF+z6$H85nJ1&J?4nKRJ
z%#Gi6u{*iL+I3GCi=vqRoa2DsR7tXS?Gw1iDD{so1e2IkarVotA;=0+QTf8z!E0r0
zC7-qCp_iZ5XFtBMP#$^>>%#Gf74~vRe)wA~;|RHUc*8#J0CE``k?<L7!<QnFG*9o%
zYK@|X!TlZP3QVVuk25*d<IU(Zh4koB8=uNF?odgnSL{5zoOR1v2)7Mqj&;>)S61J_
z<jAKp3G~UfG~;G&Z^ZaEO_QY6|A)Fak7_d8w#5}uu#m>W5+p#RP^l_Wh)8Hd6cox*
zz$ywsLLU_|gh&qw1Q7%*2(c-p2N4D76Cv~g6iiflfh5vPB=l_{5D4(Tcutj^`_p&s
zz2m+&-fs;5_#|Nrva|PEYtA*-+~Q#}U;20VdtghbF6ur{{QR;l6j&!)=u6Qr{Q~f|
zxVoY35qaYuUv#HEBdoY<?6Gw-chEK`^ArrO6&$I|E@N~<{8-{tFOrJ|)qvk!8NgX~
zMXl>k4%<Z41}(b9)j~#_oua5-plu*QL1=&lo+geIg)7{YCO5k@8~7j-vUBwzfI!E6
z4VwDlH+*@<)8&O8Y_vaeie=90f!G+Pthz|;kC|F^frusX3PE(1ac&mOc3LvDVQpWd
zUQP9PVQG<6+_BoA6r1}NB<(V<Rc?|Km0Y3&-`ZRh7u<vD(bm%P>AQbb^~)zgMnu(Q
zznqLI=hsV{-l4fiq~eC=p4gpVIdr#X+Dp;N)uoSFh#n7g=V>c@OG#~{g6oVO0@AF&
zEzPKB=zD62J<7D`2};gZLYnMKTG5|uesfFNoqP0Z+ProsD2g@R%*s!`9~etOMD^Js
zrbfT>K(v<;!fVORQE}8=>Y}!V<&Ytg3vz|jdkN?4dmMa8iTB7$_o%XXn0CzKMU&af
zeY&Ij?$;Y0Ilv^JEIC+99wVz3%7Mp8I`nJ;yZ*eTqib6xThQRn+}F{o#&152!5=j$
zaZQ1a1ZqE%laZR5lbB+tus?5yf87NX)xi;ME|=RE^=!e%$7gu(#h9m6mA`pGALpK)
zsPX>4{yD!92B0^uhyD&P|N1~bC=55K@uB{1sV-Brw)VT@*YXloV|O!4tXdWHua&wp
zZX$?iMMkX45nZ1J)>WG*s$jI+kcDDS?^c4if26kv*0`0O1?)^EBxqvtja}eUl;ews
zg6_8D+Je(+M*Q83?^;j7Nu=Au-+%&SdCHNjLfj8hCmpdbhRo_OM30l&#grx*=0EJK
z&Bd->4Y4(A>Y^D(B}gEa+K#BV^d(dIlmMp{Qj3XN4ZocdBwySTB(K_X`B9u7+u0<)
z<64h43|5@YyZg13+WqNhEoeS}@cA9`BEk?P(h%{li~9E)esP`?5y6~b+4P)4clsj&
zG3{_l=V(s)m1fsqM$XeK79kWo!<AhxABt)Qy5ahEAXGFKtKij4Jfe@|b|C3?$pZ<a
zcD4E;cB$pKYm2mb`-aE68|_*97e;N1-7PWdOK3%`poutBXG{Xt<+xO`3%jXLSD&VQ
zZzw2Yo6xpqZZZC*&eoDzc}{y=!g8*Tm=CfT?EOv^h-frt0t9zZ&G>HZ>Lm+%pZCcF
z6_Dug1TgGnBI#fu4iZ^2{Xnq(nBh{U!?s}Xf2ZEKzD?q*3)C)5N10sp=lB2q{4(-8
zgbTFeRl`>n$Zi)5dVxkS^WOSly}SCx2?uRsf;OdtLF}-yF)z^eE{Bd670g^|u0;99
zIuz9xLVFzz#wi7>S0rIUZHeGi?O|5(#?MN!V4N>&A5jq7OoUG~oGMDC;_6HdLRQ$a
zvbDV4j~KR)YBb~+&m`b44$<PjyVRa&OZ$grhZTss$|NtjEVqpkRCoC{$lRDKL9sI?
z(vdUa&+0u>6U4ETePZkR?XPE8y+GdM<-5!%=yR(~i3tOK9=jJgI$-LmtD$30=j7xE
z5QifO$w~T3@`<QRl6}2BLOWFS{ic+*>%obm`*(fkcJtPzAO4-u@{uAjax#Uv;=C@}
zEs+QX_ir8-yf8H*!`_XjAY-Io>QlN#pEc5m%2clYq$qe{;rK*ZSG(#Oe$-Z#SjurD
z=zetT6EvJ?Q=L8&iscr2Rx?^5)YVt5@`Z?i7JI4K)sYp((-*IvgqsC^a{y$#g}!xr
zY@A`!Zbol4=}4tcq!`1|0O=e>bTwQ&;_NZ2mBnwD=&{Xr&z6=B^J8=-iXkE@hAx(z
zZe<0b&aOir@)0;+4n0jfIL)SKACSSBUH`j+&%$@B%c{Sl=f0hr@>yV^OyJP%G0!|%
zS@vZ%jnL;b-c#=NVWL(N1l^<HI$%Dp`d3)`J3js6VbD!{7S>&gz7OPhCv@<r>srYz
zZc`5yMazG0Wf@Weoyc>@%e5$BZv!E7>*Z9Uf=2m|qLjfac!(IPVenoU@Yf4^>{%CA
z2}(xd$jPg;C(OMt@>Oxv%ANEznX?=Elkbl~_fjFGMZvPP`VK|i6Mi1jW{Mn-z3y}o
zNH$E&x!G^64fnGjt-kcuRrN`GlWZ!IL3t&$TeBh}KV3RfkGD{#W2WSfJB2|?f}RlE
zjo7+6X|)j?SB>?1IUP}W6xvElE6Q_0VoIO*_b&Jk53yUe!iy5q(=}qpf?|eWgiG8)
z0hvrh`bWg3V|Gvm*lP#t{&4?tC1fbEb-lcvQGh7SIkd!tT7f8?$FI=~UU<?we?MI4
zv-L&NB%`!;FkQhz6m$x)I2wB<jZNrs$xDdRom!7>t+4}pw4oXmkP1V+y4}SzmLG0`
zqheF*lssU_(qxoMiOGpbn)E7)Wm2Nt*|>~4lVXkvEP+S!BDRb*N1+Ye&M9h0k>Z?N
zleVvY4A5A}Z<pah7^X_N(@hwAEc1131r+PIaz7n{q8ar&Qs|L$a~wfpwU(4p5;aYO
zv?-7OYa+@t89XH?<3E+8klK7jZF4=Kc7TK#SW7kUzj598cgUud`W&vr!(_irNJ%NL
zRG15E%;^3hf@8eZucI>%!8FIfph$+@uS^W453v7-1mxF}?YV><9J-W~fE8a6YhF|+
zW#D4bvE%7#wwb-EG*SW8l=CAqPFEbp->m`D^qiPUJPee>s2BpjIdkA1HeCHpPAkj2
z;w1E=#+JDwFX`q#$F?IUwwB0#i(NAFU^88G0PCBcsA~|o{@U%cifhf;lGp~_h7%<L
zN)DjLsC=+jMc|E)DxHwr%B3yuiTrle>C~D&Oj-HzHt^70b`XW?i^Z-)W@}oTANb07
zac<rTl*>u*n;x4EQsgf{trYo(){D>Cf77cBNEn$+K4w(2*!_pI6Iu+F3GE)jVjJwP
zP1NK7{x=l=rh+0yoE?g`Kzlx&qO623h|@>26{JBPWD`61$j7S_fd5S<1&8z?1Z||*
zsz&0FN?sfJT34K6-J@3<<k|;-y1<rm0#1^@KDZ?&&cpG;31w3y>Xz5HCAS3qtavJQ
z)yqOL2{LvubL;DBo^@AvqpdqzkMn#BzvpJ?B%u}GmyBF;0fgTC)wNkKr+hs#I!myS
ze>j$+f;aF7vpjOp0U_I7rd4mvxEK8&PS!vFTPMC7I6S+t^6!87e0p|;2?O<3SK}}L
z&WVF0m-@)x29CV}$?%v^s`#xW&+*Kht}MsyD<49w7suaFUZwe=$>c5R+LO=fp*#G?
z^UoCJwtzt%%>(1NZ;?#VWss)UBv*TeV#i^$^1RBV1PDdzY6sQZ)AMTSQtgqtoTYP3
zyV-YroFS~bt$USvwpF>T_{U1V8yBV3&z{KNCg)&K*kQ3Cwtu|@TKi~}JgkCybE9H?
zWzg~{RusmcbLm}Sx@RMc@>Mx*=RDZQc=1iPQ<eV9F4>QCjF3w=iy#*Pcwx0D@^Z1_
z#`!a+zPJO7og;)GOB@#Kaq#oLiaa6QHCrGmU-_N8bss;T!fg$+^H9+4c-yZ3C{BS)
zOI~qD=gefSD}b3)`SaEeYdU_+pQ}8Zb@BNiX@jA|Xm!6rc6crSqS`~8>olu(bT%W)
zJ{0vP5kO^Fg%LF)WJFD$R%w2f8UqnZx9+<=k>&(v#&=fb9Mn^yvmOTxy*GSv9RX7@
zyz#+)<U|8<x_+DgYRrMz+-c>TdTkSjbs4~AYpce=H$I-UH3^KS&F!iwsADY{d0>6o
z%4(V%RHaeVje=2`Nf~yA8l1`}SmxjEZb?XmRl9k%sQynMtXDew?X7nkp6`*R{3>U@
zcHDSM*LdwX8&54|L?UAd+5=5FdS#wHWUqx{)2hXKx}eh|xwflV!*ySglmXdD5#jUO
zVf+)o{kDTx{ZSK+IzF<jY1+w-Awujk)!;_a_>UvImQ@#4x&tK6uDR4bU7_$4PhA}i
z(Ts&fPki*@qFYarzx#t{y?A`Id*^pJS^*W>Fw@%FTOAt)2<yq?q$L^BQ<XLU<yq&p
z`{~LEWS7g#k)4G|6O++5mi^ERsXX54YDStar}sCyo3f#92y8><e-o&MkZk1QrA<Lv
zbC(d3?fT>PCYED!2$v8Y2g&q1nc)CVqs{l$%AQkJ2=vV58>jDk68u1mOxC++<STLV
z^^2wA=@3d!^aN`)YJTxDPym_PnoKU19qO%stV~6R6Zr47^e10;F#ti3GPH!zZ@Zk3
z?)R#^ARRf0K!jLSs<nB)l2_~u*D@X8c`{6l5RM+RVkr=^&Y{7OXGWr26jGV<x_GR|
zZ*ul2|54lfaT0F!BjCFaG$yA~tH4tT7_TssP7^H9yqi|sDX9=GpHb7=wnFY#OG9y)
zS#A=a&wrVaR%Xk9A8McSWESS^W?e4boZqfL2VmHTOJ`mk{e1E^AGoyCIvN3ad4f^E
z{5=oMpvAj&p0O%M{~8>MQ8A(nt)a&AFBTo5)~*yC(Wia<@ObM>dGMNIaaO^43j##@
zIj^|CN5O{)1N#j!fSaLaXTW8^wHQksdQf<Yn$h<~x87U1T~4K3jsZDZ>~|%3K@U2A
z1KbRi;0FqQG0@D8Nk{pyz8m0P*I`DcuKTfKh)#JJt}IbIxc$Dg3#N&1HkSSBMVesG
zGTX#Z6fv^mC$T8z)hEqsn2o0kSZ%Q=JfmGJn`vV(^!=1RcZy;TFow+4ThO;(UAAsn
zVA%kAW7X}h(&xBbrzwn3nm-&e{T#kOzj{JkUFI3)#GuH_n(iy8VotJx$F=etW)?mv
zO<Q5HYhm<Rj_I?iD;D)jKcg8gT6E<Mx>*$-KK0riKje(D;3Bwa2Oa3>>_NESc;}t_
zU~0uUNp`Zcy~=Wk9I3Iwh*P8$)K9CUgQw<R5n)x1Q4WUKCxog;`v$Y6owqR4Vz#{h
zLF`m)W0(vlUzN20ek(s!zx#%mc9vK4>EMNih86)!zF4X%xQT*BlH!yhJG|CjwKJ5H
zFT~!aj&#w=m)|8I*;pli{e|P)Or6@&l}xik*VrO2m22CkOZZ<oIw~ZNsG$0goD4(o
z>!od<57ob8K`z%vN?vw#O_31Cp$zOn+quUl@^i$>4pm82kxwr!MDrL=t%3*Qa;g}S
zwhhpuJ_-|^?i~{`X<oI?Cg+%=g!eS(UdI#9IxGx9vRqjcz=hh(o*osMK-7-tPgsN4
zA=Ym9p}zZL>@P2X75zhud#@gy_4iQhy(8u_y-oIUkS+WCiVUp+O7ki_vch0^RmBly
z+LN6?oRuyYwWfAd_&wdGu|A-xu3<ekNK4ndSWoLYG`c%jPmDU$tG&QVc5+%^d2bD4
zAy7Rq7>qhHhRE;!>Xu6SRtVBwrGMPCNWQ|j<ojf&{Ac#{^Q$C_o$8J!%1f0)ozNYU
zJHA=keJwjkcB`v-soa*)-HZY{Ei&so27t4ru?46A4>Z&Wh!XpXryWTyo_H?F6YpB$
zB`-@<#wqwT1jZuZKF((LEpEF2szjN671?sF`%E5&sR%M#J-8?ej=Zk<WaIjl*^I=-
zZAfCvHrEk^sNH#1CI<W`Bw}jY?;48SD!8{h(vv|l!zlXEM!w&=ilh=;f)^VgHcI|-
zGJ;!LU}$$HGS(tQiRatk>coi(uSEM*<NW=3l@)sDzW@BeHb)*AkxXM@z#cwx3H<pT
znu@}OQH;C&6%H+!Sc>lXX#JpJ8>P9^v_RXhbI+*`tHV><x1jQc>#~AcWL-o6qsymo
zOtM?7ByZ1hhw6&FY)D?m4j8oIM6CM}U2II{T=sNN%(tvcH7+~q5nT=>O2tj>S&SOF
z5?8=mP8tZQl3w8C*E{Z-YLh&0Kt7VRTZ(2180awMt7x`3x^-7r9kX%AcyFdxLPsny
zbq=^a%0;q$AZ6irunZ$?5+U(ALj#G-)PloYJ$M%9nC&2wjok59FZY5Y{J0&m_4cuS
zYB26xcZ;s?RsU8&_3OMtU-`VkQwH#4&ES*JO^au8P}szHmFWC=;WoWGkx(}Tk|`_{
z=P~_B(DA1~mS-0xJ-&(}@3YbZh*&nG&;oZ;W3g+`Dm!n~gead*CR0?zUMd=RQ=kQ@
zt9ge~2hYNE`K!0q%5dHu)unW%-&${!9<ZE%e2D*{O@lSom^3%FI%Rpy;+;!$6iRx6
zHrmsSIy<w?O`6rdWs4&6VnR_mwCl-8IDu^IR;atQb)Ok{{zumJttSx+1u*QBMMzDp
z;WSa%iJ5xeMhSNa{4%Jy=m>VQeIiPUuXZi@?e>UYRKBt#s;0tiGZ}Wt;Pa;^oddQF
z>D&!3=}oYI6Cyh;Bt3$+y$s9E>Q73#hAPd;%<@l4a@W{l>*ipcdc;T6z~fmlW3Li9
zxN$4iuOTY~#Z}m5fNrwH;IT_~Q4aRO&!!GV`Zsuvut;VNf+oVSK1$ptNTwrjx`J>S
zkByKopkjTaM-T~;v-c&B*ckqqteTe0xjqULFO6-lxDciE=_aX{m3X5|Yru_bWPZ<D
zf(dAfd{7R?J1&azR>@b*uW*`*1=!0}axDAu4n`YAx<xR$vX+pX?#D%)twvL((h~K2
zQ=P6dgT9KtM8%hbBr%1T&cStbY^0P^rv1xM%ueyiW1Eq@jP6BXxvoEd;wty0@FOGA
zYH?$xMaWfW*-aG@boQT@Lz|av=Xd&a<o8{1NM465cGaxaRiXsdH_k_;7R`~o&Z*CL
zv?YUq`tDfv9NET_po<@sM>ckA@sn!_*3Ib`LWvq)B$d77_I<TdI4n1_zNQaUvy!I+
z=WW}$HA;o%W#aiKE7m=KXZjF!|D%a`22&ewI9_N6%a1pm+|{7HK)Wox_G*Jw8CP(l
z%e^&)y5H!OPdNvGJ#!wTR~^rtcd||;kP~EykqKZN?e)WM|JD}e{`z?4|17<z=#ZDG
zcIZ&xwwLSOSFU9`CN+vgQ#cIZQmOMvrjnHSZ%8K3sQ%|L1yC47{rQ!qO1WKa$>GXW
zDC^ha0!^LT^#-%1Y)l^4bqnga$88gjRsG2+E6`FQnD5T$D8tn|;g%j-;D!e4^}U*`
zqQZA>eRz0^!;%MG@>%d~3$peDjCEwNOU481H^twGq0h~KpI>FFxMZ>m-Q1c&OYxgT
zH@KW@RjA$Ha4ke0HIl?1+YQ*>LLjMS>zty-R6=RPhnqL~iB)d2Zgde_Yuu^1D$VBZ
zS76zGQPU^@p~kipzqa^X6FSQa1Csn6*{^VBd&SRLSX9@>;m`MEbU!OLRiAc?jng~*
zuG3X@G^Lm^eleT2@-v#%M#`qyyT`1z?;9we(kDAG!3NhVF4i*y3m;YCatE56qAX*=
z;LvX%y=q>G#f61^()!FdX6oE-tK|N4uz_gk<m>QfP6<cm)LulYyu5@Ik6LO|eyfa7
zj)qRYa1BQ1<_2g^iT**5uB$JOblhNwDd~})>cI8-RFS7ZG}=2kP*5Tm6cPN#$cI?_
z1Ddr|oEF>%nVc@qaZ`dpCvRzU>`w%~pPZbO^zk|Ob<FY46sC>_Yel82r?1h-$H<pW
zg8DQ()!{lH=wWALWG7^7rA3!R3-Lw{(-k9W-ZRvthv1E6I?x&kU(~Qc4{F#vP%`lU
zliOlYBzUPIFxF`Wzq=@1`<-4UU~J{ZbO?BW37J3)lj+Kb>2Y%p+OH44(!hHKHKQD@
zTJ$IKy}RABC3ONHE5!p}mZIF*KR<`XO-Vt8bV&q>L|zUKK8!gL_^5OYAfrk>D>o#?
zI<cz3?(ADzd|6fqLJ@S-K9iGV%Lqh9)%tyC+Q&xXJ(`KiD#{hjL?XWlpu^GXQ==E_
zcfcoJCTcOVrK<FBou+W?P@wYCDf}AwWG{&KQM1;6oUCMf4to8@X)|azNe}tlJwk5<
zFK^7GnH-bLCC{2oE?#y(Fng%Ztw5W2<+|P$C(d!Ey;@X_-|}$~Kr7<~GQPA&Iy;P}
z@J&S_4)|`zCZe)CySS86+E-j0RRmb&2W&6?YRzRQB*rOtk+ZFECwK*W{)M@d(FG}`
zqr=RB=Q)D6+mqj#8c}0_5`ICvskJpeN*VjC*Nd(+jB;AF3tDJ5i`f`ij7{2l`kkC(
zpi9N_P)y@l$N78HH;s!^T*OnnMbiL6*_+#}6OX`9DNRkYyyXY?&6A-I%BWN5;d^I~
z<~Xt9itHbsng(!#F@E>w<FkqRGIq8VO;f*r|GwjiL6hUx$T{S!U-zIxbdWVU<nszJ
zpA|-y1+E5Pj8tckE_<qDH558s$}ETpwUk%jj56i4z)pW8hM<FF>}ISc*RXKyTM(^7
zEEd|x=VE=_kxIN1kI>)i$0CgN2$m()57-ux+Wqf0Aj41i5)73i`?YC`TMTd^q?6GH
ze_n+?<mLbP(vRQ>fqM}$m3+AT6AN9DHH%i3!3*N?5-j+tv(rka%S=AU#teg}0W77;
zj>q8i12ai!Y41DSxnBte#?F_-ZDY@797ST+qZ?j?3wFn^WV96K+<lLNK0h&-K~Gl?
zoeMB~%bd1bPMDLFi+zxH^!@MtwXcc8#y^P~58gFX{;{mjA5pQ!>uF>Y;WY>Lw}!5B
zt7;kRG@Tl93Vvnm>^#9s+%R4|m{**BWI({tY3!%sY%cd01Wc>jI0jv=7`!QQ;otz)
z;+}-~1b=K~@{7l#{s3wAP~RL1)f7UR8{X&Caz4PEP=e6|SS6QcGG(|Eu?h_bvN#r1
zcCr3KC^EyOEz`=fuZ-WWQm6%0UXSH}dqxR41ffR-fif)&PP*ZdJ@*I78?H^s<F3$v
zj%@{h)~qeDQJIQd3A;5||E*3-q`azf3t8;a^b1j9oRcDFL3x+KkZoXV0!8?}4=MtV
zBeWBAI<>-Sh-_ivR;WMeyYP{n;ablU__1VN564mJTdAZgN0EBKed00;$0yq=0ysUW
zWPPBfly-79`|_Uq9Mp9aQ)hYM#1Q^feos-;1G@Clz*x+W!zP&i-;Y*Zw|YOB9ik?y
z4pq7S$G7DpX}Gu9@U=1TrM`fG_}m>Z4u2%w>1eHB-kX!?#zBjR8^;d(EW11#1-DlY
zo_#TYKV5Lins;&IH~XL&+&~ZY@+IqU3)u&NA}tP#k5m3q*`fLSr_NO2$xvIMJ-){n
zVQE1qxy6eOvI<-5^kd}#*M&(=tjI_xxlZXKhdQ3Uy5eAfDod=&O6RxVH#tcpX!qxr
zk()8+CT-nX$}EJ+k12iqq5U-1$%@`&J+hZ2M-8gC2k9EsuLnarL+0wX=4M8H_l?*!
z>A|da$Q30Qw()^Tf0{dvaaFlAb!miIM7bQRRM3pc2(4mF$M{V;xHb1Kh@-?&tos9L
z+DpwBfy5+bKpVZN7VkAlc1w+HV{2XP`Mv+f`5(WMQk@%wJVG?=j;zN>%?73>_#@Y>
zaicPx_%ZFCO=?v}^~SsA;okU__FgO0zFT!zmAVbLfL<>%ev_L~$9LA!>|TwaH)r2|
zXJg;K_KHUU@vj<wE0Qf024CxdA0Zm8T-CciSeL8#M`$L~-p9OR;oVuA|HRgBtKRw{
zO8aQ2!XFy0<>yaej`%70Bd-CHr@7rLr8S7u#eQ_F9DLa-rkSO2v%6m(Jyc5RUEUp&
zb_MT?P7O@;_otDW@rzI$a#O1v$`a4{12z3hmj#K8N3kkHaf}tN9%ku$^TR`;7Yj*2
z(jT+B6GpEp=R2TuW-4bBRE=FHO|+z;h7C}-e^Z|v%zQw9vO#_!+GzbZO*cuW2nYnK
z5!dX#o;&^i7|k)%wcKV=h|VlXT4{Ve_)QqZ0-;D`u3rXNW&-8wJuVqx=QtzE>t;by
zmt}9^>bv%Nc&)z8m1U3t!J{y}Gi1;l)Hqz!Z(ll_<9tArp|Z6<c=nAY{&_EMhH3&^
z(;G?Ya4^<goh*)0(0O6(Tp(<9*ulddG^R_4AEra^nrx2ke?2qg{%&tz$3rOQ8fj??
z=<z4Jv704j<kDrA7)hkU%@%UJ#6mr@dwRWmxw55v@p2rMpr;poxxIGPr<LW3gz5UQ
z%e)keF|>uWjKzX+&s1f|UT7?=m`_$w_GvJbDBc?Soa_?qHTquurKw(ozBDam+q)i7
zYwJFRQot#oEk6%~jt*yOUFj1vZNE(*?aM1uGpdO$ZR%m=yVoaZ1HmK>&%*7+F*<vS
zX$M6k{Fdrjv~FH^7SJc_(}K5p{aZMn5(pmXHn1_mHj?N2LV|ZK70;h_^ZWt4{J?zp
zro$9H433gB7f<;^ls7ZrWHfi%@=t@A>f+^%Zq3%954YqVHfq#XpEEa?)ben>RrgQs
zr1tR}pRF#Z=MDvaiGQop|NfIUZQ|}s5&Fv9XlF3@vLxl*o;6iQa&e?4GqPVJpbcp<
zRSI4B#=ps(5l}Y40)i$?e-#fj*nvC(^sFD3Irg&hRcPNwj+`DzWQk$1po!SA+h!iE
zAMC9CUMjjTl>>a6+L`#n%CWl2&j@3Y7rED!fBAXz$4aqSX9}HGzCsBJ#dE}sqD$il
z#MGLPBbbCaiAJMY7jq}{>SEUux$xlb#419VRH%mB)tERz_4_&?kT(`7!G_k=CIWM7
zwz^nmHxoBE4>v#GRdLQZ8mfB}vew&cuNQdz1F?LvTU+}W&Y=~g_ZytB`nuWdZSz2a
zMpO`a#_Li(K6k0+tj@y#`|2Ezo^d*!4vGCq)B++Rs9mgR4JqvPZagwv7q;!NcVz*h
z?BU^}>gUzdenp3qbw;#R4~yuXv`GcZ$$b5J>$3?G;(3w!x4)QAEWCt48-PRoLbV0V
zujg5TzePxe_WMzJZnG4$(^|`vu1G!)M%47WFXm^OktXDPN@43jLm#3&z;SCbO1R%D
zz>_Z-F?)ivXHFqTSU+*v(*+-$EgUNOJ>?C>8E*M-AN0iav3IrapPJduZcz{;oArQ`
z>vP##j{7dGv`gIT-^O&Ac{I9vjqI+W@yN_f{Z@4egIV3JP}FyJVun>-0Ou$6AkQA<
zCMN44y~mxR`W)NI76Sifs*T^sS*c4XbQO0;MBM4G2m|YW7WVG$VijA<6N~y`HiaAS
z$n$Gr%U7ophnrGCZ^bs6v*vS)p${d4?c{cb`JHeEZjI^dk*-<on<*T14;_og=Txsv
zVKm&*f;fM0&dkc#9ucw?c28{JmcSAlaWC!q5^JHW{fPz4O`F~%q-&1XnUd3u%_*V*
z9nqNSu>y*JtdcQC(IdfX#-gTlI#sWRl>{Jce%A+#<60scvkS{*x?p-~bvr^Q22z3c
z_e=Q~#K=Jt4<B1@ORqd9C)XmjULR>!YwlM5C)o4qk49^y%8&bO4gBw~`8RzhJ%Ufz
z_S$t7Z`%}>MV+8QO7G;lOFzWbgS|p&-f<eC-naiVQaXn<RqR)R_+LV(G?&9d5EVLC
zkvV*JAVq_|T+S1nFVyi=p9!AIdX9WYoUs_ZGb|G*B|A7J=Cu4$?(GPCgFnB_CKipJ
z36yxb+P_reJ@-m3o(zE>a%%r`r?SXlVek3Eo|&W_t^bjO-2{%ZWwzFs^^~ILyRlEG
zlxBvh!|?&e?7>}M5a+SCT^&KE0X<U4)$s|Ej+z|yNpsbsptno`TG6#i2U+ZCF$95n
z0tpmN$+RJ%PY*z))@e|%KJOSw#<^mM7F{1n7_0ZbKNZ&A9(>1-6;At59=KnWq0VrV
zd=c-*e&lveid%BWp1z~~p@5b}k1KZ!epcVFm=2ATHh~4*K1qz@%4R#bo%2cms3S+^
zuMTLVh2lI)(Lcp`|3>DK5gq?m2&wGpD|E0@B{eQqZC`&xk6-88^1)>-57wl)cYAIR
zk2u-BjXK(6?}+QC9iyoQ-<8q5wNp{|`lDXo4)bAN4`yav8ZnkxGiHwYDc-^V;(IcZ
z{!8{R0vTH`;r<?qW~!eA_V>P(15#hy-><~gYqow!!sb&cO1T7#<MPW$Q#56uLDST}
z!vcmHefB=<qJ$@`)XP>Yk}}xTj?8pW;>~BGxXwimRc5{oPws*ZxJ#`Qzm>%i{Q=!`
zu^Q?_9~iqGF^@9Ate5UhUH)ihYhx(3R`>GI!^0lE<}94NYt?jyu4vHM_871vLM6A}
z6zrQX+Zg30$Q_@`Ty#-_*nofn^QcFkNf}8u0K?-j`$NX+^`%pnIc7|bOOyVHORR2u
zm_CCLE=jh?Lo*i^n$o(zUTa4S36!>a-Ifc=>G<aYX03sp=PFe0R2*`4S8kd8@eBRj
z$mZdZfY~{R1ELlVB2Me`@r^b$^AEgRVN3aMRa$}EIL|AqrKb2XF6Q0SIAiR5P*`{T
z^3I`$1uSx@;6Ch2ox8zK6;j~VFrEFAdFU+YwW=f4WuxgD$Tll@bJDBje5<p~DVU%I
zE(jbf&&Cw!=||X_p|~;1iwnnxlE4UG9w(a~M}gKt+9`Oyl@figrOt7}a7FZK)rS?N
zlcVkAD;;V5w$nYj3(JY%fv{W7jo(49DnjdNiB(>{v9JTLxZ+|mf9!8#PiSn%h+GYY
zG-WD5=BzPN9NHE5$0ugpf>^=}1tjkmi-_+-m)@k5bDrze`XFV*AaHDimdjcDCD&ac
zeTVsLrwi&mF|^ctZVq<qhaG#rUVMDg<BnWhn2C@OOXt(b^K(6M55Q|rLKokU7?j4(
zPY7WREYxZr*Q(Mj;LSC0L$#d%{1KKOlLNJ(*1TGuk(T+w0BT-J=sN$uw$hpxYA@{r
z4*;a~DvB#2;@2gv&FHj1z%48tv?+|&AG)8_mewR|PZYL8{Han^-Pdtb&zPmt$=VAa
z0ifv1_!Eg)SM@s=JlXEzW;m|}g|Fw!%2NG#(_2AP3u8pfbAoQ4`?Z7^>6`uB1PK5^
zUcL=-x^U;To9jMl@o4>wXGr!`h6BAn>Vrw9PMl`jZj&vvjzU6IVQ3sx`mt1%pX>Ld
z<N)w;v8ie;(#OVHja3{;MU6JiD8O9tO!Dc@<bmLY>6p1dv=u<DU=otKOHZ$Tb*WJn
zKuBc>b{n#HDC1Mgz=}UQRW%Z4)7lrxB`|_`<Zx~%HD?lg7tB>+s=t*9w2)nHtQ9oQ
zug!$k8VY9X^StBaYG!W@_s!q~g1Yh?DL?V=9T2^6Pgrgo=%Wx)CB#vU@b_P=rY)5I
zp<Yz$wgJg~BXjM^kI|mBbr~#WcfS_$D>0W;4bQe;;|X9GcEpdh(`a<eoq@^AG+S9~
zBbzD%9I1lW>()yCZNPY}_x}0<$E`0A=+I-AV$vb@Wz#7Yit<aXiv?%HW6p>XXZQRJ
zjo1>m?HhTepag)M4{|~HVs=UAQ~hamQs7sC<A^%epxZeva04INw!;FfECTc~wWLeM
zeO?t`jY%VO84m?$b#57Nw225qEgKe<Y5`h<!n}~La`%6!V6GhIE?QAG0duItS@}32
zG+#U-9`8_|<H6~u{8>EZrl^tNgLJ$YIG7~(sCG8k{Phj>Lx&E%#SN_X&v!Fx{OiQM
zB*Oku(MD451NaBp-XQU%U~F3?x~z=uDLvDFgH!~NgZb&D*VBR!nC1j+Tup|aUGidA
zp|!PI_pc-9bAI?L6DclmnUgtDI;1usT-){fn>s-OY#n`cGJlOG1&)CDA4k4J#iZFD
zkI)Wz-HMNX8mh$e*awQ~muF$|0<pc@q!b_Nmqw{d`9NbzkYNcOY1>GgO8hA7i9Xw<
z$N2bO|H6!pe#k_(D_~`2Z_H>Ft5?Kf2a_|Us$h@H$dQuoXvfpNQb4Uv#y(^@z{+gQ
zq?S^elbC3tvvSKn_3QEY#*K6)K={eg7OG#(51uqKIdb`vDq?u0=Vgd=b3Cy(xI|Ed
zTU++j+);$*M|w{^O>WdPSS$A=>CSx<_Ul1XHz2<zBh7+Zas5_~YvVS=pYBZ_7PUwM
zwr|Su+>sQQqx%g<lrKURzsPYs7KM8D+Ln6ud7Jn3uK_(wnw$<GlU(~YTgl3*puA<f
zXw9<>S|w#lW7$pV#g6t1Fn#2`kwBy$P#3FMRKbUeix_m+wg1aH$@|u!v<#DCCU?94
zS9h<kkl7eDln8ifc6DRzEI?}r#_bamtqp8zEAWq(W{&pQ_OFaL4<CnnDXRZoZR~tt
zXRv?`))?To1iW2eTeZ0y`mdCo)4hngUxcmm2T!U>$pHLA^VM))gnv1woxQz>#<7oA
zQ3k(*ZnfF}@W?Ys0W(oKcCna|Lb+fIPow%VmtE_7y_Ec2)tSMWVRM?t;H$^t$zxqE
zF`C)#;Vo+&s)cu>AOvkr@Wc}(FB$B-sw37}U3RKnMJTdttOUe=wg&Ey*JlhA>1}_h
zEHBzbG$_JKl}{L`WCVmZK=DA`w|`qz$g@$BNjBW;c4jTV<Rno(N<JEp@1T(UJBzAE
z<)lfNr7TP9CFT9AK)P$7c9gA7?Uf51G%@rBqC~ufrRBivo~+#4n*}DDpY!#E^EX_x
zSuM~qqrYOl9TE3nW*P;bUfoxG|3dXpljQKW+UGebwK2rW?^Ui}+g(2V5b;(ip!e75
zs+k&VJ=S}-bce$7p+CG^^hWZ3sX4GS?7;z`p?vsE02(<W^0Is0lD8Ro{{3tfRmWo4
z0+|krhPBspOEFB*C9eR<2Bnh`Vx?912sM>}a4Jx85{G2z?DeT(Wtc@d<sqBPY4tl0
zlXn=cdU~@@>B=sX)r8AJspc$diKcJ7%jejky`>xov?kh33tkC*sMq#M2wnGBHQ7e@
zPSmev8e3Gh+=*&9*;xS|X~@`j9}v~tXhJzzJEZx?6%s}g8bv;0B-SafBG)Q)=+pHA
zBlY<V6rj`uk0*B60zLSNZ;<Hdfw(>~DB@a=!@v!a8s@~a17FE+e-91zy=`APGZb3I
z|G9!6$M;UCP1h3LmzUn=z{NlxmTk;u9V0(o3&e=Oko{hikx-XOG_o_|zp;E+6uLH%
z_x%3ZqZLo8`OTQ4+3EO|+>dAP$=IF|R>k*xnNWWq(;eBk^u=DauAjIEi<EKhTr7Y|
z*MxjgY?5cq^^6P2Soh>x8`fQUYD|Eg0Y0rBR>8m11+>k;4>0Vq9wADWaxjYx#<rQI
zJwOx79C8#DH}(K3&6nZbB51S6M+q*4?5+W1)KwEjF76N~dhWFzN!~-Kh@A@S(+n}7
z?Qr)KVY>wGXN1KRDly&FR<_B6+9f-kUtrDOp<b%94-J`BlY`w%6D(_bu1%D5kZl;d
zxmt%xz4oo1y^`<mU?3n_wSm&fxEIWXeBiGamTW8b|EZ<6nMpg$3>~xOuW!SP>ZYu%
zy=;*j4##x=e$)_!Tzb)W{qdn+#PeZc6%`eqx-J^QA0$4p7nK=D5T$=ERgb`i{fcl7
z@5{++&w@{P06bB?yzrDjN>IwWpURcZ8l``MeqnFk+~$dhI1RQvOT4gr|F_OxRq-!O
z)=Ek{1GpK-jDWF~N4b?NnDN59{z_oZGTF0Qe{#HR>@JjXlau4O*4(O3?v?eS13oe4
z<?D=lTJ&^odxtK3ZlCJHR2unms<I1pF`)Md^xsQKGjG(co&Gk^IzYN#adh!JMU=5C
zAw;ENAq?UsdD2a>b+G3fKo+h+)f)w7O$)u08NKm9|AD1KGqJ>DxuA4gSwI+QfD4p%
z+Hv}eYz^?kzgoHpdV)**m{z4DPAi;Xy;2cyCUt@UYBX@F%9%{~s9FWo7y6>S={|&K
z<yh7{btVLJT6*yho9f5aQ)tZL{|1!-K)qaSrPwvxV`$B#47@^yzhVa9$x-WwK-H50
zTTcw9GX-h3i%x5ARhVK(gSmjraQ%Yix&L2lQG@4t=x;a5{R$^T123j$8nMIh>$jc?
zR+4q%nKjil+f~3FFx6~z!zJ-qPG9ZDYOPay*?s_)1k`X-hZl=NL-eLfI?`}=p0j0i
zrGWjcEA^+<sRt6`*{{Q!AYc57O>dq6wCJl7raT6;xLoC%MSj*T4c|%XF4EO^1!T|6
zbp?ciHlt}bvb=xq2dylBke3o}<9tm`escP<I4YXD&WJG3F|AedB0=Cd(<r5i?j$c?
zT74v=8zced78lBwE&9ZUpz>PJEQ#6`%7=$zuLI(r{$}iJx5gOB^&47;cr?*!>8>be
zJi4h~F$fw`6{l2l9K1&#q2w=}CKzoJn%q%+mNG-~=>2{Rtc3J_+qjD(JqcP@u1NKb
z%60oGZ=T)RB;t{g-ztK4G})?w#P+*h+(<Z8R^?EYW$GNCy}nmDJqSS8t;$ErLXt;F
z-XkH6r;)={49kA~l@xp)QDJ{uQ6%roU`CYkPr}}NV_EIm)bz%4ml6D8o|A*Hk@XzF
ze=boL)iSnP!Z>|p)W*;Yh|{`52R8o+e?Qx*0hOHMVMLiHHA{IZ>QmE@bp9`8>;P|}
zC?|6%Mgdh#DL6|_x_(q)KWiv69m$yWv7D-=xWty|2Vdm`^x1ZXApp0$7qy|iG|!M8
zu5U}s*Oal>{~uAtR=K^n72b+x+wzy=i4USetDmp3eud|(63RS&ichJ{iJkk=5#TaZ
zL;?mv0{9=*;1`8uM@HIsiciarGl6u2x5D~kK>1#%uF0)rXOxhkW9-@Z;}F2mefKJP
z@QeM~iCAD;i^$3Fx}b<;?SW2bt9o-Pbg=^%^LbX3Wi}G^w$ni?`$HpQPk#NCIG8b!
z=)Z>VzS|*ac+sE2p~u@EXScD>;>SC4RMg;D^ncLThRBymRrP*BU#phvP$+(f;C-T@
zTv6PmMgN_VA)v;|3;~Sy9?_0lOq@M8*+e8j$Ubp^RO>q=C>+L*K^oya>>!7DX*MAC
z(1bF{D^-`pY9jUvy2pviiO&dt@Ks=3)xk0QQY{ON>;Xf4|BxV8na$0z7pKHR1D*s=
z9fdzfyr<gF7t!9Xt}kYJ)5h?z<<I%w!bC5`Y}rVk+Yw<Iy3%oZpeDrRjDfbcwXnXM
z2jcbj@zRmT$4{Ex77|hKI^?Gv0rgI~q3n?_u}02o-wqPr0ksEEZDY_;s7&WHQ<%2X
z<oSs{{EK?lV=VR*ZsO&SH5huZOQz(yP@aqYEt`;9GrDg{0@~n9=ubfJqD^g&(4T53
zhCtwuh0`PP=L*>-CQWn&V@%V!d_lo_gJ+16Eb5JG+d%`Ul;`Vk&84uN?S}bYKZJ<0
z?Lll^=H3w0M7aaqEPAxLNYZBw_^vpkl#^$G4*7JZl!22+yHaawO1=vl4cPb9q=Y+q
zO)Fq0n~OBC9u+rEOcnq#xwN!??!u7^=&ynm^G{<+LmEDd9Tk?n_!2=gyyZc<Az2@{
zZ{W9qo3j|52aS#uIh{IUX2yemeqXoYj$4{OlD^WJ{njC%&$`@R`<aj?8lG>|(5MQS
zIf_K`>BoMcFB6W2b=BM;1#vmvUDh@abgDl{W=ah2d4CZAhu=#dqyHT~Hb2<<d?Gap
zK<{mOe2Y~8xi7HG%tfQM-#c!3WM*5Y3`*vOqs9wzD71%Uzp1#j>k44sXkP5a01Xx(
zDGRdIfkV1=V{e-gVFW!_Ls~()9!d4+h}I4iO_S(V0&&xxdeT*fiX&vM-NW9LHqn)T
z7pl8uxvgn9jBGZtmCQXNa^#1}_A=?W@-KN?bLHarec*}`hz^Pcuu1xCpSw5K$o(|U
z8thO)o>Y~D`1;F4Y0y+V#5B7`3a9T%*5KBk>?_sphZz{)`V<GAnSL=b32To?A;&Y7
zxjf$IGi>E#aG@qh8eCD3X7Ae%0PTaxjqeS5h~hRHp~r63{URF($Z#4z5&S?Rq$(N)
zUOzJ?q&Fs<Hdegf9E|_7!x9d|7}<VHm50ZRf8wND3})0<mu8$Eple4@Yy32WU#e<6
z?8JX-{iZDKJ^)X#_!Ye`LrBe?|CsZ%=}M696b>&kf^$qx9)~%V1a7^d*NpY>cvgFX
zm<kNXl1+elIUJ4UY#CPTG&+hrw@?7+Y3E2PJ6zA9UbG`R32?sw$3N>ButYFi6jsC9
zKiY@Neg-$x@$sP0nS$w_kViUhN<7!AQJ(u%UT8)Tu4_Vn(p4eRSlYC1gTh=X(HckS
z`4MG8eF|^|L#)~f-)~US>zpUqAHqpemj>)kNQLYJfl>i!AF?>WwKA?>e#ORGV{hs5
zejtaZ$#YyMjm8p*On)I_$35gSv#!N{RVH;ucn<D_9fkC6@Z0N$!_3muiAuJQ*~glL
zBwlW;*P?&IRJ0KV5BF(Kt7zU7<#0G}mui-%K<}{ZPavpQDH=8Pkkc<NPfTir@*5kI
z`xml=pz=@i<axm6%Kh^2@B3#v($|6WH6Sn-ig+Y8952}67i~f*_WtiL4{z59eDO=R
z-O?NoaQZgB5&hD{azx#oPmO|c1<z2lfCBobpxMs*lc2d-3>}N8(x2K{(`jQhNi2FS
z4RZ~q(HJyoZUWM*kda043GI3!8_b_g7OcHo?}6z-9edalmH6rU6qc4L@pY8o`l#IG
z!sX^=-WpF$TWw6Up`H@uhg_KAP@XP@6^l(?1q>0%>P<|`<ZJJ^FKD*;S~e-GH)1oT
z`FlLdZ#)7f2$W&(R^$hql$XqiMH4M=^5S6kr9V`2fKgxG=wf}GK$c=YEMojr<|~EG
zZdCw%qgGF>uQZx9+Ds>D1Prv&J@V8>rn=ALr)+c{gjOUI=Y>#Sc2Jsa$YUXg`*AZz
z;L9(h-)@sOJg<x$%{T^yUT_o)$;GD{1UxKm(a)>$B_Zi?&%KcA4k_KWyY(E-4g&4o
zVFm(oWMjc{<9Fqtk9U6?xYBo21K0FQx&OeY#u>Akqg@e9@_4K!2V`Z7IIH|GpXI?*
zqI)&=FYgdtPua7`==>c~+$?9<X<?-`^=ivReqL_z<v8akNw6_0CeF5IcnekEwWEy^
zL<mcTa<X;cR9r#*(W6G4{<0<pu4O(Rf=9jok1MLTSH_O<55E?Zwg{-|p`fmb`UhRZ
ze6U?RRq)tJd(3Ds4^F$*Q+ME7k%{On8?F3MB_~A+TFK@0uO@@;q5_?haF4kGc{%*|
zd1k_PB+>8K7iaTRx<!|pJbFsspvHe(V$wh|%QDSLo)YspBU$_ciHYt7BL7iS8Q3;}
zkS-@PPU31SL*s6r#w!4FYG$M@=eQAXJZCpuS_$cK5qBt*TSm_1cZ|=>9h8DLd=J$J
z27m!IyDtk+8QX*|a_IQ|DubF0x}L8I-zEdR*9R+mX;I&`cPo`U<iR(MR<@a>>P3f@
zNA{ObX4Ec&5lr%TB>kzxV!4K>t5VEh7Hxl;q*8Ot&T-(|hV1nj0>-V8t@1e<z8Y0-
zZqhRs2{z0A`@X6R9DE{f>j4N0)NUO%{ao;A&I`50AHlyuzc?2&tEf^3_D)Jj7?czT
zT!?ZASofn6`x!|Hz|JuVt)SiM_*0!!2Co}JrF1Ve)JePiXXMw6UQ3WAe7++;8?zJ%
zH=?=4wxL=Tj7Fm~(MnQ>06&$IWF*q#PIG(J$r0<Wv53KwqkR$~s}kQIc%g8=T705#
zH+@aU1i{tHhPWx=Kwk14#WW3ZvK^S#U2z4E6{U_K&z&17sO3+1yJa5nDu3jR=S(M(
z{d*>sV^?grg(Dh$UlEIa2J8Q)^w%yPR2_XbsLVmFbb|Fg>qDzTDJNSE%&*w*vaTO&
zw@X0&HTr|m?Zy;8zbSlMg@uu8A~UUfVO_vdSw@cVyNXLMsjxIpC3x)mFss~c@*df^
ztvwQE8(U;<?dLp7k^KQ`v_-mA0lS6(`+jVA*f03#ON`x(mIs}6^7wce?;$h)V_KA!
z_uV=HZ@L)>0cgA{FgCfsBFQlle71hLTwGkN)6@*v<j3@{2_p6zp{DDB+TD=P{Ak^E
zArXCD7a)v2|8Uc<{nOtIki3O;XQ47>x+}-lbrjD}5YEG={`(^63T+;(L@jQ_%km>L
zT`?M0uk6G{Wh?iDy}Gnb%+~jkmUyz(p=8s9OgVWUMucM&j6`!$!XZBpSraIAkKGKy
z3zi;L`V9D}*qtanNf3RSXghkBK@;RJ&3va+N`pp9zpvm^ijGnR9~;uNZzYK9GfEky
zIDg)(pO4Ra;qU*W6ZzU<YK<R1K9Q5T^3ylh3UgA0vSdjpay;wEpQf!THI$r=v?2<V
z<|>Kc&>k;6KB?qCu@KEiAOyRy6CZAyp>=qSKrK&HH`)D@EcuZX&dtkX5}IC-??T_J
z1O;S2HHpap;(~-EgMk%_*e3QY&ZDI70GYL4#zB=Bl@UN7M^Tt!pa|QWB^ac8Ytr}j
z%+c?-vP|7>hz@wwrLYLPP>{ZoJH4=Af7E$nGCX9=DylDmwOO1z5UBK@5GMm$<+b4-
z9-Dwdq)^fyc@uK-%bD-dKiOF)#IKWi!qFI%c^_a-R5N@-|5}7Lo$=5LGu5-pPRW0?
zpzn$#VvX>RJ5K!uIA&4hEv&$0t*lbS|3gaQR)HZR?u!Qn_~C!&d<iEPEAK74po=NL
zilbqA+VA#uYjMoCGpv{{MR5oiG=IWG-8Y)Tj=gP}xi{Hw3K%JxPQr7{ETy)?pp3xc
zej1=VAR|-t{67BIG`vTu-Ttp?cs<lUW9WxxfL-%&Cr~DD;+8)@lYV{_wC$yI-ncWm
z)6^&9M!(&-{v@sQoa&w-)dh4&nf?T|r@s<&jl8epPHCA%ayj~lPSEYsmOw+K)S}t~
zFfe9KG-8vJZ8>fQ6g9ZdEA1s$#YuUDl?5PG0cKY)+{D^0Yv$9PCjp^L|F()8Xjbx)
z^ORjx5c3vYard`Ka8eNIgGwo%jGV3+bzfn)sL>voEzHH=)I%+QAA6e|<mF+(wef3x
z2;r^B)>Ct{0f^#%Gj*=1mA`xPwpaI1U^P!8Pfo@&|KIno{|hb-kG_=$fey3Th@yge
zp*Yr<9G&*#;=4|B)jjK0PQb9@O9doW6z)NGIcL(Q$MX)uFWdF>f#sZ-`v5luav4NT
zjI6#A5IVgN;gK)q<|%;2A$iRS{aPh8)_nyXs<fApWH%@r+JKBpaC3nUT0)__AW|@p
z3G0Wb^CK@3d`@7KALZsE>KVEV%1M5U1(IGeI6$tSUa_CN8;V@yHPGeS9|nPvwbAm$
zSJX#n9n!c~*VZH~j!_<QgEWno@3HLxteS*Si!-8Uu_=!HOZag9U6_=f8Qz}UG$;`%
z)T~6-Lw^02xBev@Hg=wq6t}VY7Vy$3{y8EEb1f_90S~>6k&O7g)gFXZxTy@fRz}IN
zAt5b_YpNXREfxH+_V-IY03$F*=z}xmsEb3iE0U1C5JL_9)&`@tjviaLbC!m#I4Nds
zt}N&0D*E>3E$}my_H)h+b0^T}befW)xaW<HE!$zvqIobVt*dBim8)eod$PpO1Go$D
zARGf7lw;_~kg|$On-C$XJl8vx20mq_qqBhLVd?1W)?`UwY>R5x4H(CSK99==<PJRF
z?yoru%E<2ncvj70#P30yU{Qw9WGKV=+?~Ihj{oxT!~aKYIz22h()l~MKoT^byDt+N
zXZwr@TkI)F^IH)2UvrHsrKc~iK(aVJg4p+BKJ$qKSnoA^%t%+YEIJjLmtYn;e?MH$
zZ;XRsf7=?FMqY2C6x2UGyKyC6+2zHytBMWE=ui)-ytr*`ZS50g8hfzP_EFUE$7X=(
zFtz%IvJ!dE{5v}*?ln}kzeYhVl3lv~(an>1q@u~qlN0+UClv5yI!)J~>(O3v>`K+p
zy91C@Eg%{Fy<Z!uS3M1E3Da?}OIn*^hlh}l_K4W|#mFKfq7(*rP}+3838%n*1ub?s
z{y=I;s=SuuI;HL3X@~H&#1v4F<D}hKwsU<7HejCOH`6rtit$N$EEUQfZ&eIM0+x7E
zI5u<#bQ!TRog#?cO%ul-7X`Z}*Cz#VXquMRey)m)eH|-k{rabZ>n3OC#>y6DrfA*d
z<jFE*VW93(z2b?zJxlejQpcwpbmGXjemBRFdO_>atAIsmaL{29m?UoL5}vDDbSTvs
z<;muaXxCzq?ijpCl9Lj@lv#?pa)nc=*8Xppqu$Kr87D)#>7YAAx`jFz+rjbX)XpNy
z+)4*FSi$@lKwNjU_NrA-a|PaGsfnjn<z0f`b#2cO`Y$g4!A3CWXMR~x_wOwsW4D*Q
z0CX%T68`OSXSR_wZ>lHYx9OSS5rf9FPAl(ZyNv*?(lBt@O;O{)c>CXumJi;P?M{FF
z2}GxF@Y5TG$or6*TH{5xRBJ~-wwM0;$b<@MNHk4i1FwvmB+pM_LaSzHyjOWs!@WMO
zN8Hjwcz+aM)Yu6?9ID}1iq_}s@i_oEKm8{W#bg))rX&Rf4g3#<*^x<PC(-v+j0@+A
zY1Qaa5+$yuaqH;vW7_{2pUB!p<bO+wTCv>rhgWwByX%qT3EdL9MhPM+_KPwu;PW!#
z{#N4r2b;(=cH+j2CHTjI_jLMI3FEsPCd4l0t+WeoWBi{vjBaqh%TE3M!^RS?HGW_%
zl=$byb$-@-sS}S~nN3%?#CwlXJiIZCAwJk(Q<L9<oFLWZ;gbiARJMdo6xG%UM>$~f
z^f;x%@RfGrTfnWXQNnTdW?I?{F@Q~Zj$#&OkHzV{uL{8M@5A}`y%)P|;?HVO7XlBd
z6|je1m>JFAJqCk0q-_XBm>XKs4>Qe({&FDvL>WHMqj!|fS5rC`siJvYBy)XcB+g*^
z2k_dcS>s(*v$w5ly{!-E;LvJ=)zfkgzvJ0D_)J{ETAOoz#|hwcTY!V(l)fk!@)e1}
zoG8!Q(T@<0(-vfzCIM!cJ`s?iB>(Y?CT7jhX1nVXWI}xsB!9bGoHA%?oD>gsNEX9Q
zb;BO39wG=>iM64Q@s)nTB}flsD(qLcxboUt?_XMayeX2T@_X!jhgLK6C;k|D1h!>0
zc;6ya?Zio&crammqV{W0o#!%L4xjR4jfThhx$<XYovf)LB}RbT(=}iMuIW|*ZglV7
zk?Cfjw^5}LVmp!{EA-kjjJ-Hw7`uDq*m-&-F!Oz3?H9_Va7@r@^{YJOCwr_eoV@gU
zV2xmPW8!E2uv72(_0ilT+YTyownuD>0*Fb$!W-|2RG(qlvgQXBEAE#7^Q;Bip^|Sz
z%Y$d5LYJe4UrK1G*8&6Qdgo~_4krfRy_nfppNYSH`}Vv+E!SZ9phnOco1fPJ^26p6
z4JMqbZ8Yegiwon)XUo{`6v_Nw)V+CBllQhh&Lp59fqE(+L!h+MQx(L>OcE6<?NP)Y
zPZboIQi&QMLYR{fC<t1HXl<DxBFB+2rhv#im}nsc3WP}r5FmksF#}0R!tcd%Yd!bc
zyYBtozkdI?-nCo=vfs~V56^z~euT@MTh_&&6IQecXHLTv!nLs$#n|{Z^NG~f2e-DU
zqByQQ_zOdS-0I%~ywBSKpyeg#lBvT7FY>l6_Wl-7aSZ?}M#FTL56B*6?}3W?%Y8B!
zE;R$)PpX)V3nB0EZxK7c@$#~&l#;(h0$T_8-Y9{|u1mc0kG#ru#duXrco(O89}ddX
zF-b8uLpdzYXU;Zfx)Vv#RWonxTHnBAY9J(}u-*h%PUil1Kv`F1OIf#B`S+E*iDJVJ
zw^4&#{-U{nun@8PX@IiM7&a=m3$B_u{`p!Asrwen1}kuN)C|`blzKSrs_l%jrS=Xr
z{mAkkaN&!C-@JAqJq2>VfInNwV0qAG3%C&#zkChwJ#0%phvy|cGc6<i0ws*4KFjlB
z?{S{kmO|5m`4q$JOERQS{1KZW9W0qGWmXA>j(=jPU)*Cw>9f3kXxo6Ca3UOnJ{db9
zC_e8Hx`tT1fiYcHYv1Z_J;QH^4>`=yMyz4L=q<|^CMFX<o`_ue^?dU)POHgx34n%6
zRhPnpAoPIZH7%=|8Ykvi47j`l{u3Z-_7h7n&N={0GKPWZ`1SGgN<Kqb-l!B+*|vyL
zEzEx8!7av!QO3o_Kiu)VWDIz?M^Yh~5sBzowRS~KoNCgGYbog9$3+i)`aLhzu$D|K
z5wOQwG~YenXOVf_a@ND4tniJU0FkT&0(TMo|BvE(ZrQ+XY+H(z$ZB{qT5xCW1|i>;
zf;08Kj8O;|w?=h0CAIzWh6as^E6c1GWclOfrpY;Uch3CC-)jfppRJ`gIR3OL6!-s{
zUQDCKT4y(aAJ=Eu;M^od8=S5v5~<5X|8&NI-KgV}BRd`w&7l|GGEIn^65{3PT4nO%
zXIovgzAp`bMpZS{#u&5#NzSFHZ>6h5f^S&EV(lRa<ZNxo$lrTl8~n8-5boXvif`>Q
zo#{B?-7I-&n++mJI*QP!O&UQ?o86itCMY?CiKm+c@r1^?e*XU6ji<jZR#t>I>IMg$
zkLf?6`IC0Z=a#|x9l@U^Ztr-dwjPwc_vokkcdCu_KMm@%*qwAnBl$0fKMlUq5MuFZ
zeq!(E-&cRSU(a3pMEUNAUE>Z1TU(C|{We~?P{?Ummu?KOzV#fx_~j6BBksXjPGJm`
zC15?fxQX||S6E%YxSjtSi$sz=AzetAJ)dwnuIu8&GbQw6U4nJX60bQ-3gGj?Spj@g
z@U0^_v2`okKr0=~b+olqa!?<VMvv7~+c4B$0^4w?lgCt#5fAU|69<%*j+o~~Ev<g0
z*>)Oj?~+jBZVHKCN7V1I<K`KQ(PfAewd~%&(yV4C?S%OPq7LS)FT9C7R6HUZraRK=
zgT;-VdF~B(4u7^a9*gE5H1pdZFVSTr&K%L6j6I@STB?WDC`dD`^<1A@N%}*NS@+-d
znB7~mJd2`Mz8u~MOK;}-G?4I5;GAblKCwq8L0HXwhIj*=NL;D4`xC7R*W>qev>B|l
zRbNB>W(BR-H$i#ne72WtxU`Fgmq>;psT(IY88Mgql!ME#CbyNVwCprkUe3=pK%wB5
zFeEt<i!)i55#hCsvX4EoS=h~=XRTRrmz~2o&u~M8D9&1mt%%oZf^CjbF3rvs^uPwU
zrI>X5JQQlN;=6NTD?;RKadEn~PLVBG(Fbnw+Yzt{j0vEmg$!xo7Dq=BA7pERdzFTJ
z)eg@V{FSu!*RC=@(bH`T2H;_`2rm~p*F^rCqOLArwu6If-x}4u)I)-|068J_yfj=2
z3~2yemnt7lSw`q5*G=A@4OAeoU%)yWEGq$DNLU<72$hajDMpcs@fYV#y(rs$U7FZs
zMp};})$Mtac-@{9{k{&+?}CMs)fy7$=zRYpU^=hfu7?=7`AepN&q+WrhYRN)C0x_p
zD682y_=RjW-3;^8YIjL$RPH<@cyDUl#qy*~Q{O|?O1_ueR|k%5S+&v(%mjB7cFTai
zka}CNuE-fwp8@X5v_)a;3e^2cB#C?ac2H4(Mi0otTx_~KZ%B>&5CTf{YzXJ#zlxgc
zh)KO-BmbqOpJgA7Uv<|wb->buqxB!^)cc1Z_hSM&wDK?)7;Z~+4roiA8vflvMj#AE
z&C@ZoY3}g9Ld1Vq0<>CPL*6|1>(BdiP{DgJU_#;YnVde2*kG;G(zfsv9*_krYLPY%
z<YZ%E{8ww2{N2Lz`CUJ+hMLNV^_*90p6Jnjtm@QD_SkcR*uNz<PSmB?6Xr7^#j-zY
z>+m{2Qi4q{HBW=HOmwww1KTxJ&Q;dkXcg^w9JkSyLy+cFd2Y&i^E);#rYcKe3#Hk%
z8_#Sn4gzt1QJb~0lU0r5rX@UH>O#w@=>04KltsZ!TPIAfZS!B*W}?WndAzO;Us30M
zdDB*Q-}VBl`Fbf?`sE}#zqL}Sh+A)9HOYsGis7}bfR;|kk-8R`W+di-0wj~kpvtyO
zN1Tj08sA9}zNekmD$+J}jSg{6ke_ajjEl_BLG+%a--{_U&U-7hU7y%$8_6XX<LgY6
zWI#<p_S6G;dchY}q38e7WhRf|k<epLi#>rS1G>pe^isG3bF`@MV%mkVa15R|*>QnI
zc5A%NJ$EyW-DV`{=$1B}nRG`8Eb#{wbhhz0<RXX_$H;f{Gi}Y9B+^q87O=a6Lv%ai
z%SGSNd<=L6IX)&L>7)MKL1QmGbGRE{L0KSzc&J6Mor-ZoTfg{R|MpKmbe=8L8r<JH
z17vuUj<#1OT7`^%^~9>{q?b%I`m7P#I5>HLwLY`9z65)Q+kiLA)Y>0qp49Y@1OC}u
zgcE||`2O%Fx$UN6m2Md2xR!G1$a90gN#C4S8$#Vvwratu<*!Nd*Am0Wr)^`#?frH>
zv*q*@U2I+)YYvsZBFbOQmNhSwovQ%0XUDvryx1bTn6uupspyI!tjE}TWVs1q`U-~%
zHWynIbzLCkB*<nf6|KiDJW5!I*i<xTy54GC(jOjdfdg~;+%=t+6`d}B`Ah%uoWxk{
zs{&wih3Ht{Qt#N}-R>Na(^X*Q@P=R^@&ksDFMfJ`Vc@kE^)=XxJ#BRO7=R}>UyW~E
z<OSD)3+!us20}MBE*~Zj4>veW_>KYt{a$sVRjX{Lp34U?kTR35Z-*hmqw~@{gV2FM
zdMmY9CcC2rXzxxx&|+dXq1ej}Ff4wR+#HqR+8gqt`nFJK?B}3YNpe+-7Eeja_FMMx
zIJ}A?C1nB_5|ktAD;2jnpg~|00QGK;8}*_WSa>t;RT8(#Y`m}wG~%=tv8u8u4Wa6a
z=G150m>$H~=s9U)S@<R>=#@uiPR8oO>faXX;K^72OrC1&^xK#2aUFQ+#gm&@#_a5-
zLb0z4tCak@#(jQ#g+r)EO1S_5YEehqU+zQ8W=M(BAC|94m%xMwDO@@D^Xx{;LeK1S
zV`tU=Dsert64(KG|HrT#ZQrV-QHZi<S>Cg@^*Xx{L};yi3ap$ucGf0GyD~~ONk`51
zFT>es;DlJI6bQqj>Gm!^@v~5Y{d$Wez2&)_OH^`YbGchQpDt^{nzetw?PZNH>!eGH
z4G2WahAY`OP9Cwv&!5cMash>&6;<v58*6RAmYLDn=8dI`O<48zsCy5x-n+c-9<@Hb
zF68#jcHUxxGOIBNH<)HqpTiKuN`5Rg;p#?n)4{}@<9ynL@|xo2WqOE>7!bn-G|_?m
zl2y``HbeM#Ss1UKK^(!eXdvFwa2uxv@))URmTC4rcXj+VgTjIgNOT!@&X;+FaK&z_
zWEWp6BKC&XS|A{ZeneYk#(nzef6_yLTGP|$;mE<z(H}j5JIZ<Kpx*`2s~@L@WdVxl
zkCBYlV0<ut2MYfRUIo>H$ps<nS&kNki#xTGkAKjCN8daGB>ycScKq8Za(JBN*6gL0
zP2n0D9R8gYxXLfy25zD=CPX?~2P5OSUB!6SsTQ0fJ$sYSmcCfIwyM^?Df~Fb1}wG|
zoR2%d5xV>$vD)*Wib{j$e(Lt<Ba-4}Y4L0wVWTdGD9t7M*qSyjd|P#);5twfwqW93
z?(<tMceHR@X;trfg!}c88_%FAaRuP3(BD#rkR!;KXT6{`IMzCzwZ>~v@_@wS4ebCL
z$2Q5yX_3!TPV%(*x=EL08y%mOxGp_MOfApXHnPo@y%Xk;3Bl5Av@~0^yj0tyfM^u+
z)>Qp29f?i-woLmy{qx@+uR}B>X<?^}-P%m_0l6D_f=&Dj>1Vo4qr#J}A#(6jPk4Q^
z1Tka?7ITdyeQBY3@_~`Nuz#T3V3G?2=3Sk(6X-hUa-yf5t;10FufA#V+MM<@D5`VB
zl=<S^royjt0#d+|!FB;UvU99{^A)eVW(WB`O9FLlz+BvcfBFED@48@ZR}eAGkGS{+
zRsD7>)z|+_w`9$d-8E`Q_^R`4y0K-Jth2h9O^Y5hAexb3sI^_mSvBzQ=JFS1JL?9C
z#z)Z!%;J}nt{;HcZfvM;zNFS}ap(6hsQ<ofrP(LF+fq2o9nXQ%kfaoW_HTA<%93V1
zt6Xc}Y<_*dWpL7y6@FD3<0s_<>Yww3$VllkM#3sZZ!<eQaB7?gYm%c`*Ky9j)<rsg
z4*2q;XX?itwtRU4$CXvzD5^kTf~{lVG16{^yt}Mteb8Sq*p-GKPJ{B)+Tjwd&44(r
zrLyg5*{o|b+cg_5Nrrpd9$u-saLG%;qA$xTmoH2xmSSwt34#Jc<>2b4Y7M6Xa+FG3
zzazeX4XvcN_((Ry_YI}IGHCqfw7)!kcFP6iY(a+pTbsTvoru545D#5~O<o87ybAC)
zf9M6jyW|EE3#%<}E>%;*59!7~{P_{J-S%g)rSLrOB*76n*m-3=sP#;Rf~7o%tQ~`#
zHjNe-xF=lhd2rg*uJa<;wcc$Pc8GbxL)U-Om?7{X#jZghu?cIG6S*7+JAE7yNMc_C
ziM|-cC$N73UlE_t+VLV4qT=?svoY+S*OAb_;#8P7qt|W|o51GP9Pp<}AkmJAJ={!@
z+i*%sCdM)$ao}jRCGPgzsxj_jQhgo}MgTQ?44`H&2@?1MdZ3eOxge-0uL7MAQDn+q
zI+;`Kgq1!c9zOg*@z<NJq1JC-y4BW82g~vvWrL+7U0rnwPR#yIB{V@)3jjD1U0p*;
zhSvcwX8F#ntJ2Qa_)<0t&;NDpTOhng;NCzb;1>SB{JCz<?D~Xb$fo@DEL_gD>Vn4w
zFg8z+01xl@w=Y`8zMPETIRH3ec(c6IOWxUjIT;A!#5bnP>x9kq9Q39b?GI#auxoD%
zumv!{h?;#H*8!*pBc%c^d-k#|c7(e5rXEwah=7X`Ikt-5Y{$7(H7mb$7$!^^+7LFE
zHx;P*f2OydHW+@;0%vV1SOA&ac5`j*Gyk>Ecw_DwqM5s1HjVh1t#W{=1EXa@1)FKI
z!?s<SzOclzhWfIrA5^WZOKnw}05#pngd^2IGZ5~ujcew?B?Wu>+u!%|$99mX5DZ6b
ze9x*?8cJY<B#KQvGNL4h=rT%i;mjeHcV!U4sTr6IlE1dgXbU!tdJ>2a(OvJXJ~6QC
zWQOxEc4tXOolXk^-A=1+s!LUBvNEtenMzl>-R$k%XsZ?<1!Q(Q7!c48RcD0Yr)Bqe
z*8h<EFqE>}1Ry=&J<~LY*v;+fqNgR=s*i}RQbC%)DOj~1@(!E$@tzr2v;7o)p{Jf2
zjj>syD`&`iTNdRjG%$SgAi?17hg_e2(zxZ@lR?=!8Jin*uxi{Gh!7yf#(;e$BwyQJ
z$jU^IBp`hcOIU<kRnys`XKjR-&Ga0?`k;s77F7-X=6T9Ws+UXc8^y1s|H=+Z;e@!j
z2%M+9$X`A^+u=WZKFU#y1MZ^T>9}#&+qAF7f1_p=+p><$Axdr%y<t2G3^hgHwhWAS
zW|NfjBtKBsW%WHp(xCxBt7f|Mmgu8)B#w$KM}HLyOxe~c%Xo*65XOh_<7*4&TV&4Q
zpX$K!rDf&P8d2E?zrYK1CAq~#NK?EdDWOpt+HV}x8ieZ{pt|?UA;`Qo=VjvLtz+Tm
zC&(WvM<16w0YHJ-J`eDv2?^EFh9tg9iXQU@6sKF3)>NZy&qb*Q=D=U~?0(;k{>z%J
zEC)6APHpraWWskDIvdDG-;h$T#FrHTb05pkMyp*V4?xYj@#X6Y+l8m}7BRbEsQ5aA
z#ToW*DlOX2l-^-BR=2@zsZJ*7LM$d^<Bk@XhY609gxe4dYKlN$Dj#iw6VWPjW3n)r
zn|xIFPR6G%eC)J9jHKJfrqO^3Q(EUTKrIeG;$Yo8r`8DnM}ju9m*&F1!}*O7Ex&nL
za<l}KF)M4^=(vIxNi1az>uxeeyu7BA2FNteMPwGmw6XA0?Jr{_I*VklcgoOzxJjU>
zjZREt4f)nbTn?mnU))cF?<E&66=Qq&t$&3(Wo>1LZsY69E^DAH+w}E;wbo_0E0^}=
z%(h4iU9<f+llOJGCd{qHJ5RZ8rn>?srg;VKTwAy?<Yl`#)IjCfHygXTH2>VdSvL0p
z3cd;QoAp4Peayjmwf45yS%rMpRx)8Ny#tosndKxbak4?UfaNmD`KE<$yWS@6KdPX=
znv7^4!qJC9Y%G9;5bZs&sa&^he4V&SXM=m3F>~GRCOfaBCfG~?IM3R?mWcZ6Z7c|M
ztUz|y+uC6GW3`60br18#@R=<z+i>C^_Zz1_uJZQVlnvREB)3S9pT>Q1&>!}ko#mQ6
z)U*^;(53nO>SiNjqtX7Uj`ps`><`om$0zq{o0@E18(3x2fI<BUSIri;Qm_2tP|ash
zL4i4r`!TEb34*Fcrd{-pEGJ|7RP0FM-MYv9+2ahDtj8tdP`Q^4pZluKwm{q*$?DHs
zq{6B=Z!qPYwwT=t#pUcqp`{jVc%6WHIDZ|o9er-jeS5BEoGN*)S5LW(0P@-oDh=H~
zG>3(~aiz90B;+@^d!6+763JA6)o!RrKZH*|nT48dBgqa+3efwjWGeuqeS1i-;x@CA
zMw3YncBAlo?g+%B3><f7q(@n4*OQ^64cgEN{pn8v%%b(=x;=2k6{MFhtx0}LiEXi;
zpY%tou6Z`@Wvw;gaHK69|6LrJHF4DlVn+~iyle^Ump!N^2F17Xd@r1s+;(*Gw+AP?
zNQx0s#m@T1q$5-Q7YXwx{a^G}HyofguKir)%eq+|iUubc?oi#dS*hZ{Nd&^yKFAv_
zrCZzCvKyAB&wu^8Mmx5C^2wv(3!8QP_#99*Tw>9p<DYF~;hX;5ix0WL>rPuY7&jjg
zmT?j>Ebs(5K;H<_{ct+4Dgzyv+b8WZkyVaBZq6RqAr7R_z=3;Dv@AL)9$&?;O`<({
zV**c@;NY&4_-3a^X@xSb$hhm<m9sRy^Xs%sZy^QDIk@ay$vDIrB6&|cQN)1QjGYx`
z0!p`33e}yCbN3!kH2q2Icz2h&C7*01NTZp9G2P%S72Fw2J~Hbw>jWl^Rw$|WK;nfz
z)YIGY<Za|)2#k`ui$FRL7JS4rUg<k+jx%L?pz-)j58}$0IWY1dG8`?dg@5=uhq<b@
zQ~|dubn|nUKkoVSA6k#vfc1v~0l}4;55`4D&qPOVv0L2tI@-jH)lQ?s-4O1hhm3qb
zH1-)S;?meZ7#Uo&zY~33klzf{Azy|Go*@Gsc@>O!3(M=afg`RV95{u^BAjYq$obWg
zVQ-Qt^}ZGSevy%85Hv)a;#`O6Zl>PFW<_~cs;7SqGIiP(YXMGa0_W;iBxj}_N<F+J
zvLj;geT?Qxq^sSr<G}YFHgU`@tM;e@{cWupDK<saQ>W9HE`&2XQ;Bt+y;hxTrrkea
zL%FMU&1CNCteRRqkr=)#6>u1S_|6i~KQYg~BpZu2=j0y~-x+7<)9bxmT2=T(RL;gy
z1DZYvtdqEP`0|GUVW)#h3gDh(wqg*4q>p-^6MJ3h1={-9XH6=t83A=*6L9LW7W*cq
z<XLUicumtt=RJ2JGIN|V*)btwwuRv%y5qd>5{(I(K&ep9aY9Xc_!Touhr0vK1Y87t
z>cy|+q|i!w>1I;!kE|V2ZMPTG)Dyw^HMjtIpEOY--JN9o7bTYi`qi{uytP4|hlO36
zM}&q*N*#$V0$`v-5J<x0`a|Q&?X!8?GzgRBX+R<EU3wOtZDLmMlp~tDw<Pptx%y3Q
z)OO{BfBj(-Mc)8w$LQI+T+?@+FM!xe_k~%w16kGAKfE*CyZ^ROt4mdB@c@L}1{79f
z8`S3qHJg~iZ~FD=r>cH2RN<3r0n5m$2H8loeY{*>QNw2J0n4whAWvl2S<8GLf#Pwm
zfMpea*M$yIyS!L+hM%p7PBE?Zj(Y8fX~#2Od_e`n9I-f&HB(kRhPhWa=N%ToO<Ov1
zEa{@9X^Iy6-uJuI05r{;w;ccYoPKBg$dMxCVGuS|x(Xqw^!;^MpIz~~+d{ML?U=_-
zginD<ktojqgNcr~=7H8@r(FX|_aJ>f6S+67#v6M&SZqywzA^psB(loaK-&8!s99YR
zV5YDQk6zVxW^7GurTf7wzA@ByaJu-x;;i74>P^iQtrI`esIfR**@LUkA64Z)yn-eB
z^h1CQlsAG7aXhwPF?e`mSD8^qMlPwQUR0vlZVtajhfzoz6Pq&qlW-?d-3<W)84=nX
zxA$B_cyUKQu!07dxR6~R-Yw5~8Jxfg-830JD?E1-<Ona<LKK6lY$;$TWGhisWiq#m
zien3nZ3>KV-8YJwrYAtJ+^A=~+R}8iW%o&nJ}XRyR57)R>+ZZ3<8>*jFfU%4fx_ea
z*u)7Z`C~#v2ISHaqrd$4Ax~S4&;TF;1o$i3?;d7y+sVmuzAzO(pleVKKL(Bcz@@6o
zZB=g5U?r~PSV0v`;XlSGo?!c?e&H#sT`P=NasfYLC7E(3)iiTo&0f^&Ewge|ANL(H
zmCPgX!8{0-33%L(+|iECLaX&gS{mdNCK7G4IIJ&Tvv?$R6BKsIy0x8y34q`W35|}q
z33u+L{{Whudc`S;a}vU|o6GyIngCmt;wRNVY6~j_KU-aR!XA|g;>t^iO3B~TfxG%W
zyhfj|?Z7A_N#`K<Avtl4-2g-+Z}S0<N1I}Kh`Q$H8CNK^$<W3ZSJ2XHzVWHrdpG0V
zV}O>n1i!UIo{p2Q&CagU7*&rNIK>dx>%V6GQNY8VZ-2v|P2QTk?*h81b;lOe+O^gh
zfAcc@KyoVZNMsci!SD-h->j1DV%62~ed5Tm+g@<Tj)_pdETn3_O1!8gzO;+8Erslh
zpr;X05#NxKCV(hrnPX2Uwg7ryx7=xa{6mJ)>y(A4=l+8Pul;c=mWK6xd4&Cr@x0Ow
z0?dR=Evthm(?0rWVuu}3Ywg}lFuipzE}xf_7<O^aJ2Y|C{U9|q;4wwhSwECZ?=r3}
z*jydVs!AN3XB1N`5^gek=KxS;&AHdEG521=<8xpP*&3`)hAGSMxYC}l|MtMTXRV9(
zCsvEm2BZgLVCkoS$GKW{?zUC{)P$|&M_tLFwT2a-(bX>h>%x-{VD^#%i|gM-dH~hJ
zj{p|sK)qqd%>fk1f~xAF1KcY=1^2oyK2VeE$5&l~jFr((=@pdw0P<R@@u-8PLt60o
z+K<Id$71<SQASaepKdF)HOFlx+PsVIEL!DLzaa&}6*z}!(fa-cp*6^E_%))4>{fVt
zGWasgREwQxnl+;S0{rw_YYlM92<0FHZgFfa*}*!>fIs?*9rvoFN;Co)M$lMC&6(Z9
z5>?9~(~b-9P$u$3?*^{?^?X8Bo$_E6O!i}%&JHGWInRd|Gvv*JDhC_W;y(WRcWeB+
zGp=^sx`D2wFRkC*z#ATu=Ptn#fj*yKEF2CE|G*6-2sBO?xkw*=GYg_VchbZ&Z_*Xz
zedI@9=lg|d6k$Us=B`ktS5^{8oe<ysbNxKHNJ@7ddtEUeE9cHqQ>#RIPdxB8UwISu
zSN(d_4YtGC%{p!bao&-nRTRB&r|U(J@F9AL2C_7VFIX(BM{CLNeph!a<#n6B`9zwy
zq;Pdsy)O+ioKeL%6KZ}6o;1zYn(RQhqvfW_S^1Jf7fJcWckJ(jP#EKMVq-ZGbPW2E
zGi6-=RRA8z2*!)&YGD94X9k58ZZp9G6~Y{lW};hgd7*z|qJ3K?+DAIhdDqapabgk*
zRHkcXEwZw%El_f6WqB9RZ~etvoI<k$=d8N5!Tc?@JT`obL)ZG7q5h|RrvLRy9?=Nf
znFO$xY^+b40t#)*0NMz262=^x6shX*O$M?@P5Oy?g!r;sgIYxn@s+PH6CD#e#|(Rl
z?d_PfAsN?T?VB-Kr#C~^i6CL-X&F1g(|jEyV>FlSyDlCs=+AS55s~+sR|k%`nJ7Ci
z_`^jK^9%c<xf&ZurkYdN=Vp4fu|hQj(UXg)S4ElgB?alRog?0usq_FxE!28<!dKMm
z&WSF3V_*j)Zsr)V8^)wH<IhD(^2baQUM*ErZEBAUJld-q{!7Fs+-fs0djf!-V#j8?
zl;ygfA2#UqvF(wnQ?&#QGmGE-o}opObZzUB9`rx$6tmR#Gxzmf>ug|b?tuKhe3;zi
zFIcUOV0kae)jC;L9`Anay_jP1>54F7Vc@T}7QRMDg}(i+^m~6DH4kCpR1u|z<Hg++
z#&B2=*=jB*(-w=d!}bO2Kko_&QjFxprsO3=3i`$}Tc8u=oZ@KG>k)5x)0KnSC>W-@
zo)gb}mR95xDd{E`7Btxdc`bw?y5;(d_e$^f6Bb%Ups#K8w2y}ltOn-RkmpoaFb<mF
z6yF&Vn^U8deBM4tE%zoh&h-(SMDimUgK2SDXT1`(_P9I2Ig`HBjM+J#imI#;S$PE!
zd`z$N`7Q*WAr%<*RE{ctKWzX0WrvN`E*%-pBi>K`JzH2&vs?k7%~(E}mhCTl;D3RY
zq4J|NLUqGgc|mMrapbe#FZREEkfT>3p*2u$1p;NB0=No0wS^b@V?2pli`I#I+U7<l
zB4ic#g0}JwP*c;`@QVF}FIQj49q3;V#Yf(ZX3kj^+c%9b0I4a|j?XbgH0*HU6^!M{
z<~|$Z(?*fOndABV3J<sMdoJ{FFG0W;zDg+TOvYF+Z-O|ZTHh@vZ#OrCJMr`I2j#C2
zY$z&Z>+Q7G@9ps|Pdc4}6g19s^c+D}kbR@N2iWc}(`rPt2&<WMzC4dYWLxk7Onn`!
zMqj8a?~RKV$7F`j{VVgDdi5uzXr(?^t-TWWQIXZV^QN|S-fAXr2gjzufn2^bQdM=w
z2Y>o`+!mw5+$e9tmHNQ$N=hxM(EO^&qL1LA+Qt)FL_e*<9L%TQ26k00JE7Jf+?Ui!
zQqvf}#u%v22F~=d5kyC^bDfBO3mh#L-nj_G$R-~5RdQ~64P$ns{1y@U3|9Z7BzG5F
zxRhs{wp$16(xxp8ywR>s2ThiQHqx@LU$^|x9WLmG0Ha5)%XK^x$Bk!HqTNtkAEB1c
zY0qkj4q*nLsJ0wldDIMXV9+VgXq9?!CYOA+%dJO(Kw5Nn7Vcr6LjNyvu;lDkT>T_^
zVNG@AMdHfQ4Xc6VFaPcIyiHM7+;-&xfpp><*{U5k6VOwoGz|b<$oaezS2{g%Im)mo
zF_uBWvxGsEU<*MA$svy87q;+YdR`zt5<`*<S0>DbJM7-@E%0U195&99n(osnxms|h
z_@}cv{)}b*2ypjEQC7l$V?P#rthcNl_t^PS+Im~?7%q0P9YNH-RRhkCTA6Y$<gsZJ
z7&}OYS=YDSZ5c*v&^ByH=O^W_!)eOVd?t7SU`NO^t<#X-GD7HN-)(RJo#%M0Skuzi
zhpegc{BYGNGsNk4Dfz#}$G2UvXl@7h^WU>FT<=G*%{E|_Y8`FxFYpsk?+=7W2IO~-
zPPp<D)R8JxtU2^i9{A@sUrnJBWM%VZC#uQ8CvJ8af|<G+MJQWCBad=mQ*qp_!Jhc6
z%fyyssQs(U{Vg0pw`3Xtcftx7alV)^W;d+E)ODb&$k@&hRu1H{Y<HOWW|TNOO@23d
ze1{zfqUG-NIjE#Z3&Bu7<f>u+kFuTqf`c2q!-EXi%+W$0fLeq-I&BrgTqt_&wg0~D
zhO;9eDT#pOU<Jl$EsW_5&nAe2jitpf6ok^MZJ;_~R;M3O&R4EDeei1BZ2hkn3v^D6
z!I@PzidLOU7Fj>xe4zH5l<xgkNi*(2dtU8NDn`dYoZp(L5ElTLfgd<n^Luk}e4Qxp
z+zNtG-GZ%Ub0%cn+`>Bi@I|0GKQRGpFH8u>Al$pZ)FT-dF*==lA+FVw;Jx5_yk4k#
z%?|8$Fm~~rKH=}e;FnrfM9^W5uyq*c1O|45U)|afE~3#IsdPa!UaW0*v$>K^B#{R=
zbWM4yOj9j{y3m!tBrfjN5(z0{etK4{tsyr(O9t!+mm%t(l!77CQm;$^Vb@Hd{3)Um
zow`*I&y{j5em^zGC$qPF(1AAZ57$9_|1E|pF=J|*hU^LFD7pq~Yxw-pBiR$Xm6ED_
zdl&J|Oqry=1<E6rdaR7?Ms-70XB@Nap)4kn?mT>!Ars#<d4!(;t$!<wB31>Nv7dPD
z6bm0*B=nqwX~i?Cl%bgYAe*r?Xl!be_Pte$o-1`2LG?ncil$32JNHIAU!6ERceKxn
z%7*y+9U*4<?uatRlt+o|S-5QHiJCZ0>;ff*nsb3kaR3(5A5PdmM7iH_S~)T|k`|x&
zKr;fDfdv}qzux~K!~}F?fbV`9Z)&#pcmJ#X=I|D(a=87Y-^17+1r2Z$e+CM?lnvUP
z0wEtX5_$n5(=e3msqqg@Ly|sJXg`$F#H^g}IFU<F24Q96PaM~qDAv3EdBoX=%`Vdw
zC^zghy)8sRepAjdmFS~48?XzM6W&&xcKSiDLU&>(MhZGy+-rV_0}f5dMtPQ&v_swO
z)8MfopoQj81)Zq{V_&8T-1w^BQ4|jQ#Yg)68{)bT{B!C>((K4h4>wZ%n_XQO4RVbo
z*uA`qG{tqFZT_f&n1)KxV8KZO?{2Sb;c?86(Yo*R>r<g#rGEk|MW?p<$EXG(^+u1r
z=X&&xPtLsF)dlQt-eR<8<@qn0`D_lt62h~bstW!jC5YXvnm~+}37@2;PTjGy$vo<R
zm@dM#wdW@}p$c3dlF1}37u+IS9HHXU{3;wils6=~om`Tz-w}JQ#AEISHXj*O0q0oO
zAt8>@s2_<naX^y8D+5!$U*1pciM#1oC+ZE)cGuY+cFxTx&Z*j2QSCM(Z{->#+(y(V
zQ9Hs{k7y5vFlnj!>Emu(pR*k<kWUu@F4NyxZ@MLShSEWZ`jK4_&T7XQuS*dJOWD%b
zkTD;Ko3*IoWeDB|)*Vz_KX+^DAOOd@@oazLBr@OKnSTp8b;Nf~hu^DVR<rxJ&hJjt
z@yUnV3!TDoO^L0aX#fl{=V$9>U)!2Hu_8-8e8@n5SHlqwDet6d(b&*K)R%VLiiaNg
zN744!6#M(0aM5sYABA3R_$DDl5CBPQn&kJfOIhB4@^b-ivWkT}5jpeS88DoOUQWAO
zv#S)0(u(f+W&K7!gyUW{c@mG$t$?rJze|#7N5A9*z<#-Y69{5UmW6nu2-JE>toFho
zoopw~=41azBieDR?{<M0a`zf%nrX5bnOO*A69;h6j%&j#tOJtATdvP&TLL{3_0gle
z&yqNSna_d6*ZjG*G+$eDcCmnCTWE&)aH?JHu2Bh`vgJ?OwWya<_VFHQ*naMYiEP;$
zf1>}3_e>|<+gi0iwOys!c9>z&P^UvSW{p=cs!2KKrqCDbyc2*O;VkP)zYhdE1IgI2
z#APq)HjRnI>tS0Ix3N%mljkPxXmYXgYKU&+u=H3ew8b0J<NwT{1DMg$9n9xF!JA-l
z2Em$f6<(JjdzeTnXv~-7qW!}8v>8Q;^cT*p)mKAaT|R)*4~`r*l|c%+Fa>FGm0tXk
z8{awZGwpRVO--h(PjbCCZXae?DOI{HdUx?az=rEw!ol)Vuyaz$#2!9!a^RnOhlY@$
zdLiY``|J(!<xp$v+J&wW*%JMzdCCiBAOkXW(vK0Ohk))ADUO<Ti9+U}_F^P;TS^_`
ztM{(udymm+Du()|xY^Dd>Jy2R+fo82_|7$ky9;ADU%UJfC1V3WTA5Cwpj{_FX;1eP
z-WLV6_mz6k02_TjS+$*JtNKW!bJy3)>_hcnae)f!QAXV<Kn}Rit}!uy4fp@0*EMw0
ziPAKOsCTo|R1Aq@5R~OTW~fC(y*SmC=g}gD_;dL$&uA5iR%;%a65^ZgSko-vO702-
zEb_TXisjE7uOd;9tsZbht>Et6=hAwB{QH^a(Pe?RP7`Xb;3H7N*{{XPuP?(aEEZDk
zXC*U06=npuF8pw?KwI6+St9_Zn8R^v*CiWAGiI+@TYqm(U>tRG&=g&|h<$vn4Q!$u
z?e+0Dfdt_fC7&!*prOHxm$FVHq|K%H=|%aP%Lj`PgJCl@hA+&>pX*!iW@B`4`O>k;
z22*~IpUc6A4{OGyrmpWSYU`#Zcg)Mti;YjP%<2Z#k4>aj$E*T`w0*@Nc8iXu0ycs9
z0ISJ2M!ugP;of;@2~>lThsUfaJ<#S(i(%<UT4wl>PP@_=cy^h7a&cbZX01!`cdmM7
z4hviqK4hi@7R|e>ev}xymz`HZ9LHe_QNfIph0ec>#q{{;mDjCP_4=n?-cMt!=zgUK
z?5EcH%R!fgYLDu;*ub$!v>w=-py*Bl+x;LNU?i?u_7pNbY(p@C{R|_R27h?KN6SB@
zX_~@KFRs}b$&q1fcnl@CoCtRa@;gKw-)bP6{MnVZ(r7%>8t#o*Rhep6O;+@K`5O!5
z*(p$#bM(#y;(H}A=jT?O@j$w^-=TozS@q!K1!=%UnEeN<XKgq4L{=IA3~sT7wjc<x
z*O(I{VW}=Slb&ZAT)d}4c@0Rden=3;6`UQP$Z^5iS9F{r)N%qQcB2BUv~qOI;TvZ$
zl{ZLDEQvvKHI*26IvC$~H$5o;k}4}q^Q97JsW~<Ex%8wehL^nLWlGxVgKC^KD-c#M
zy&IL}-Jhq``fwb;SO4iEm~wSLY?v_GJHNcAp;=<7_AvW)rXV?x2#2gx*k$vK`&_H1
zlDnNNkml=ig0$WXg)hN}qNoSKV0QNn9Ya>1?L)0wAH)Xv+DX!eJ<KIwft_IDGmYlm
z?J(sGQ6b85J3;%S+_v>rV;8sG77<q+Qphe5kxf@7FRKR+`Tad$u4NvmhrU;k=i5Gj
z96mp)ChyRr5n0m7>x3<?FJEz=pLbI8yZb~_=rOOF`&l~L;_n#EV>>so{%ibMtF-2Y
zzP!6GLl??A&Xe`x<^*?07`mP0-jJaQN^^R`O@=^Jj2kyaJ+3ix9IDfUm5a=}I&^M@
z-H3HE&#;4c7qWD=!45lsf79w`xfS<8DWa94_43#3m#Tbi<!}i1Q8O}-N<C6ey8w<V
z{FvMvmsj)6W|rN5!}kTc-+$QQy~l>5tyGG1Itj%}Z2h_^<=)Qm#$eKWnVZ|D#@tB_
z!8UbU^Mh7BvK3YYhA$wjeR1O7Lim4tV2jyX@UYcsz7*kWntbAl&0l&QJ&ASr@oq7K
zLUl-g5lYyoy!DbgQL{St+nmYHaw3@A8E%8hEAScju52$Z0sW1^$hcCfhthNq3xDEy
zn5X2)ZswSK3$}gipy;z46OHiF$7N&T!(ra1B05xut_#nY-&U8ZA5k`;C&g+vI`yE<
zu*8I8$Cjn9LX~9Sp(C1NdC6!uu_t!zM_MdzKH1z3<P3D3N((SjOA`-28}msxiJn_B
zflDl;0hk-3$Bh(YzqEN&SNeGMM>{{fQZD^(sk47;r9y0X9bB#;ndj(<nG3~>kmmW3
z4eJ;*5AqMUcY(O^%=Q%)Qn{WB*^gtlO*~M?WmP7~oLbJ*i{8BVI^I1_p4h&k`1RH<
z8hDSAv(+DpFAc3kp5Q;IT`njN-}WD@RBlZ$Kug`|$?G$4<Z=5Q{-C91){{)3E>xTY
zQ=E$?Z8vdtGl}jLAdvKWZ-_qQ>-|BEK+aKLo}}yzYInCD2F<MO0L^qfM(kFxUsbgL
ze+0VUBY18N0tOO>jZ~gh3eJR1K07yutE}IDL{UElCI~QojJZ*aHw%;wypGOTn~<eG
zaxDxJeWM08LmDbpCjoGN46p$v1b`<#{cvgIt`XuZxUcFl))3OVEu~2mGFDO=^V557
z?tq%0K<{AqNUM%krDD0IqPO;)eg5tEUDS}kW`XP)_;qBvp5=o1`G@d)zfjo&GY2JT
z@FB_9Ury$w6L(66S4u%+rjjQVYy4woEN-PnS#E9keda_M#v5D^<QGzz_jA3TNWbR>
z5z1c3r3Y4^L@ah1*WH}Aaf)vs_(sqh^lZyoh2UXz2m^(?{X3uYdLNxfzVtFy<s(Ke
zPv-|?f7o}n#?_7!M$=DTX54!Ovn%IF$Uq0}W7i-&bH>3IMR?V1KPIx$gKuk+`e1hl
z(Qg&~57?Xm>Z216lADt0hI+*bqgCz2Wb(5+p<ZL8_v})aoVd9&ref1U(5}iEtwk@R
zX(MIEA4*4*4*E_}3o|&?B)<?%X#cNg5l6xHK}5%vfc_k1n5^nn-_py(k_#Ix^9?70
z8=&mYKu2)G%=tOrg<p2LH;Tx2yCCG4(9p=v-m_tiO*8yk>xMVW<KAONhSCa9&&%(R
za~w}^Bn5+_?%hK<jUD!arGftX#>Z<1xHWP#&SH(c-k~m*Cx5z9;s@72-E%y5{oja@
zH-9HaDys7;+T3W*hEAA;6nDwE`f`0i$s-s=ME9z^i+F>d|7{o2)?a)lb?={~B-_;p
z<DY4Oq`o`DWQX4imTm+M`7-2-_$L8a@nNoF85Tu<&z|o+4q3OZ{}qVf>mcHK=IVJw
zuc7DW;bY5A$2Jf1LYtb!sqAzjl*ONSu0xO2#AQ%CumELSCJebqU}9_{^3eOwli{ZR
zsNeP}XN;%;kgOL2)i8%tY>>Cr!mZD!rlYw}ymW(1MRA(b2EmA;^BqSw4^ACr2NTSX
zU*ReOyf-XHpKzu)d0H>ee=Y+Je%mYB^@Xw=Nx;8qxkPG;@=+(|8DTPK=iFO!l0r5N
zI<%6DW!;i|)P6_w*S%RFbzlG?isOrDa5j_%6V?E2Dzfq|VX)diHtWx3e}FrBqM%^d
zX+k7)jTC0RSBq48O<u^+9hmxUc|rEg9~Kw=*#Fz_y8zxZotD)>08xBsu=>i#P;7N|
z;1N21;u_Lco!?OIz}J&itzPa$(9P}A#P!=r_Dy3qqveXUwak}c_%*9xeI$Evdki`&
z6uvfz!1rY60UdBCo7<fRLWms=fo92nCCx1)Q%=Ac=FBu)<qL^E$O$uzKHa)eBD3`N
z2lJ{uiciAF0G{oX){Pz@?a=bVM>5Y7_4-&%oIV1R4amj8m`H~l6dx$UmbRv&5F3WW
z?(c`i_aY=;TeYPjuV5g0=8D-n6k7ZEq`t=7W+iW}%~ECedsh1$3~ANLZv`YSa@aH?
z+{vObCPRSewf1DxdajO9G9|(v&|?E56qv8W=0Zy|*ZXW*x~4WNC<Bw}`Ia_Te#Zyd
zQU{$I#lvK+iv*7}{g$R;41-*Z+*zpXCCP6#ilZ5B`=Ub}5131WKf05gjQL!(-@?{{
zIcz4^QJNP6Gu@f9qc}zymS!X|hG!SZJL$4|n6w&DoQ&5-BG7&jzWYGRfk$m5qcuy(
z3&$|~4EQTv+=_J?+>J>~3-se5JQ&3z-ilZ0-EWclU_i@x*gvTB)O!`xdymm~Tjge_
zGp{vBjia8vbMY&_8nWej&i%Uw-UZ6{Ec?bOX;l*__<^+bHzP5wKiL!Hs2CM`K@f;u
ze|kn%@wJp@lvp<?F8zD_Fn`q}_f{X;^)&q21(KWOV!up`8ym_5xdc7&BDp|k20YL}
z*I^qxs=N3uZusVx@QrUe8WHudu0nr8&@FcNC@q3c%jk|<Kb$7%2Tkgi6zHo)oH5t8
zvjwG8)3PQhiZgS$a8p&uy}84n`d7r_LWvI;jLDk4Kx}Hp=<&G*nA<~OQ+&~C-pfMC
zMx!h@$6FJN`-M3B)SXcci|6rBZt*iSM!<q`SHejB1=)LN<-K4Q@Myab-*cMaW@huw
zB))f#<a||i>$4BjkN{mZgmc`Q2GGhdX5X^Al8YQhdcvPWM*ze=^eOU$u+Fw<ZX?c<
z1q9|#>f%Nq)%}m?A^YQ*W8Z_EYwQXzJ#F#Li3e-TBq1T?UV4bWJK(<4y6R+ehm?`R
zG3Q`^_G>8Z#onQ$m;cn#D^zp44QihNow~_vqq-Zr?^&1S(wdsNNdF;9k&)&7x@H(3
zSaJXDFwippEN&Qr%>uXvt6#=cIH7_%Xk&Z120?Lp!7rN}gp!LaZ=obYHR%lv==;m1
z0%R3zx_9q;F5`du7@e_&Ev8Y)J(=MNF6NmV+D-k9w^Yd1V>&9`+R+>2)xgh%7yD5_
z(_mxt(pZ6~uFG)(a~P@v<5!@~_)KeBVVb=(cNJOf(M^lbqG%?}%u2hH=%!3NB8+KT
zS=KEZnHzPJfv@b9R_L4SjwApZeoK71w5Z@B&`lEBAou7LF+q8++cE@xMAS}h=9Ff`
znAB8wyx=heZn)hEEOt(l4&J3*K-BvkS<&i=mvD($_AVkseczpQj1O3E;WSaylmisj
zK$G?PpHPkdM^=f>Q9<v3Z&9$=DL~)3-3aIbdU(1YhBW==r&3KDO$fnpfnB?#ra|ti
zyKpEAj>4?~SKZi-TF6Bf!MLlIT0y6=ZGB?{o^JT9O}j%7ACi*>lq|8}LU~V(2$DDa
z)j^Us4;#ivn#f1gzb*m4aNoWy?8bF{^Ni#jr?rQ@QHY8bfU<K`pLbb3s<_XMZ#+k1
z;M9&k3UJS;+Y3oH(r~?vN2%IpTn-J31egxp^pV$3%$l4tfFT?k+^wV47fE@h%%DZ*
zyb+QSdnw(}wx}uM%Nh5(?|F#-?c?xKwGBX;J-~F4Y-bKmPPn>fX};{?Uq}5yn8H*2
z=jricld(+wlLULZvhxe-L901rXc+!+QZ<cufx_T(q^VtBbp8f9tq7fx3-Wvm(8ad~
z!wNaodzIyVR%<0N)7out1UZitH@2B7{!7!x(;ajWuPv9;!Rz8{^%$=pR8*Yip4qXS
z@TpyUHNlubWYzO^^+QCvfwL=9YTpCbh#-7ribx>Dx`83&(ebnA&5#ex+XWZ={e=Lp
zPY=F8GG(7K)YrW6!6Nv7WR2msT~C~PyMLB?Kibo)208|?^ISa{zZk0XDdtZHbD-aY
zVL~5XdY13owXzYAUV0Qgi3EhiS{Mas)@5&NCyc)94v%19aZXl20PEtntet_jpon}1
zgi&A4$heIV1JQI<3bd~zch$$sC1=dDaOU}G?#s!OU3-dZ$-aT5S}+R(J{2gzs)}7I
zE8ryB9vPQtTLaua3&~lXwyXd_qbv^%vvR@Y(Ykbpd+FdpQC}#HTnAt`ypzrSh&Nb(
z%U-wo#gG5*rnuQ^v+LfnR5*VYlm&q~XrhnYGZ-xnGg+JG)Fu)3pKpM53-XoMSP20v
z`=(*PBSu|=ES%)|UXaL`TS4>#NBH#1C1sC13Y{X$p<|+H0Bhe9cwWTXb<!O7*gY(A
z4jA7C_*E+;#)<OPg$m+kNlHrHv2J#f+voK@km~KExp<3vW7*E<OakQk8FuDI3*|@k
zj+?{_B2pLU2)G*dzJMqhg|q)A_`dxw(!hdboL;1^?cT@Wr-L+K{%hJ1098WG^w=#m
zMb6)%<k(_<`oGv>=_98@FG{_N-Cn<)j01eeNsNyQdFYM#waCMNgK$g4e^*V=ZW^l0
zTO17Do94+Z2UKWOn(TA?c*$Vs*bXeu#4DjQp4#JLs~LcpJZT=`3Ur<dWwFuh$Bb%H
z0?cGphTR<{yPIajpCR{no1gybI^_^JD>?j#9*wU$4jO#A>w8c;-zS#?*0+=%Ex7wa
zJ34e`)orGCNX9qjliAA_AXIROJn=RvE3ks(z=K$E@i690B%F4Ukb54Cf8DWd8;`Qy
zT`p=sl`kjAR|O!!|LuHK?%FDl3aG}L0U7CtUS#I*8^#_pZ2mvzU!Lf#r#bM*{RqX3
zk>udYBbsksfwC`;)krCNGnz>w`h|r^E|Bu#2RPrSh-hn1O*`48w>vOD=0KyP1aZAr
zADP#e^G=~<(RjK3^lGWz{RDJOEBx!|eaCZ6b*HBASHQmlRir-NDVZ*j=?>1d33q)C
zOHhHiIS8o?JMQCKwiMBmd1D_dS+zqBS@Nn&Cb1Yei!(32ldi#x5r+WO$1vXA4%u)Y
zyThlN3}{ZFY%aYJio0?~{!c+Rrxk#^b9Py00qR5RK%mv#Q?ghvk<g*qG@-5N_tQR-
z25%bdTu44`0v(!pMl*p=F9M{cd?Owkg%@f|ABW<D%8~eKGNWFIpr(St#WyI(&~EQa
zES687KV?p$LB3(dUIP{%6M`zLNbxw(f!(f=-z$#jC0}>KL|jRM#wU?!dxhjTiT0pq
zIsHqw>5%gJl`pFcl54QR@J|uXO^=v~b#cB}SVW0OFqns6!S=b}=%IS>@79?^gp`nl
zv%3f(JDd$7hqC~R_=A&Pjf-oS3FrQ-YWyH-_Md}r^<9l(KY%wkyDdeBee*qzlF)PP
z^UPwXfDfrH@WxirZ|w9J&jpF^w|Q4a2Y1RSwyW9{#mY=+oe2Tk=)-_6O1eA##Zf9i
zhKDZI7uWCuX@+Ki@1@s|T#VU2WH0aqv)t3SZEb>x=#}1{nNB=1aKa3n>SKZeGe?YY
z`VrfIi|cs+clh%8Xzs_nyF+d=a-BIR5M2)I#uUm*{6yWpHk0zgWQ;K+o0tEFd7c)6
zXEFgwo>tJCTR_qxm+BzThZ6or!Q{in84gtQ$TIZ-hHO`Rou=!z$fy7X{8GQw;zd1f
z>51z4+PcC76f5{3Z^a$G?BIaQbTo9)fVzl;_={k(`$aX<n@CS|oeOgY;ibFbOdGEJ
zzDG6}{jfRiwfzQJoCmNS_F{Pk#Cw!%Nc>QD+U_4&U#w1=-n5_Ys28h_Yy^DoK?CVw
zgTcD+wc%LCo-x4sCf6%(K@3s%cCkm?Y^BwZULVx{^JWl{<jiVdD9}&VuK##QX29{O
z_UZCns_;6X0ab@b78fZlAqwkbSAQGXcit)D17+O5QA*w`cmDHZK+JZ42oM`kxYC61
z-2)(_8?Wc@)b<tIqra#o#qW2-zgbvq3)8LdwG?Mj_QI3>Lin<g2D)ECIMc&x=Qb!z
z91D;DFR}_Hfk-cKJwTf3Z^+7WyIJqO;ag14m&ESn-7VPjgY&BUa&cbx74k~Su8bq#
zbDz8Q%2muqsaU?Ymf<JPLI}eRfsj-S5*nJrDFAoI2!l6KAjfbvd<lvc92%@)^8HT2
zf-6Gs#%&*#zp#SHG<U7(W@o^ofoa3;Cw4tT&6J~-e-!)w`5ydU-Ts+bqKjLBPgu|D
zfNf3M`+go!n-dS5X=uN8rbJuthE>s%up9><oIpON`(5#3|K8;{U7nXB>>%aDu%%t#
zu|bAg4>gE{y4xii4kj#6&i@j(TQEr*EsnT0#gi66H+&f~N?3~dsjng^?NfLQkUdAZ
z0viq~099Rz<r`R%#qJb6815zpFCWI*1gDY_^*=c08X)8)0mMx26np2TVSk`<bZ=U{
zoY}HEvr@jWdbE3a6vyO94W?fm#Rr|vSp9EVMgRG|zgOA)@yI{?2Z_jZ?TrzKb`P0v
zeibk=>+mr)9N#ao7#7A*4Z*TTV{MlqKbu~XsiXk4pHxH5>L&AFPX&1G#D&Tntz8r=
zWbhkEw>WS@5)p>W#iu$)KL*H;)4-6)D6o?iHiIC>K5QDd+?)vj5|57VHhsNc-5(3u
zh6Rb;dPjE-Uh5cg>xLbU7EwTP`bg$*1;g*QM7y9S9=WzFo!gbrlj#Wt_J_<);HXo}
zl!H7Xcse8Vq_#G!I1T9dEbn1=zf8~R@vCoV|KF;Wtub74BWv8-Ju3S=A-^aFn?qX@
zFa--mX}m8+^T>Vaq2|Fa<y`)9@uH;ukw?K6ZHTt^1z0@uWjA_h5el0*hKASIlP%{y
zNn_mVK~9@;^UQ{QAa{vxx^LDtjSou6c6tZ?(&V$+_KK}ecZOOxfO`NMdwl+qs+G55
z)vhXB(0GXiJ*IoV3MF78_lx2vD)58NNh$?o*)x&|(eU~xR8bDyxNnuv>^rHISuAsF
ziAK<0XE>4e@E`yv_<whr02>k5BV>gDM5TB2doA9p8?#po3cX6*xvw8`#+rGLsPVO>
zb?AZ-C!uzn!8*2~30~pM=)B8vVh(tC**c-H?N5*ZV>?`ewGkGl*EE;k843Om!cfsg
zLW7=j1udkJ;qZ^NyNey>HeKe2%{5{ZjK=EYyrbMy)Xga2-NypwR5J~B#COIDTPd*k
z$eF*tYRg4blvPRRDBY`-bXOX{=A$@Qph6cY0EJ`~8ERT@JZIiDNHR(>b``AJEp6?g
zIQIYUDfw<&Q&sE4<Yq!f%bw)sD<(3Z{)>x7UElJXsKkU2S#{AZJ1q!)m`XV@zz7$9
z*I;dHC$Y2YS$K7s0uS%Rn)ghP=DXJv--zp(0_f>=Fo>wy5)&F^fP0k*65tXr7m&H<
z?Lg7Yj8M|xss$nTUUFy1hD=}3HdmAOMvSPETrW<82B@TmbbOSr9Hk?|Ebkxyrqw+w
zKv>lrJn^^I@)qQ?=BPKIp>GE$;q(x5(Lg@02Mgpkrj(rBOM7@&8{g+EwU7G#Pia<e
zYk%qLR%rrg`u*ngG*bi=X?N*I3dtzMLri`Neu90H=v3>R1q-v)&eb8sWrAM#z-tSj
zQ7azhugi^2;)NLV2y88Cu#@G7!5rf8Mshz^%qgPHrw7B$r~Ce({kZ)Fr8hTWAD?2B
z3jWju7k9+GXD_xb)<?zU|6}dV!<tI7ZgCY9EEP~}nG+C|s&YVPfea!lWus7*U4o)S
z2m;C^1QC*uh@eOj2ox%FqEbp(f)J5OhJZi<8VHC&7{eGq!Vof$Iln{Q+u!YbZ})xr
z*M5I-9uo3|bKdved#}CrTK;GF;`Nz{35<+4lf=W5Zt*Bt%gHmAFv2u?pQx1)CqMit
zi)f6BU*%sY>4d0E$K5?P>45_&F#AbQg0SZH4c>u&If?#X2;l!KVgOnYs%@HUwHd(S
znJck9-aB-r%=Vq33*5mSZYL5yE{e#<g<@XM4a8h&Np5iTHgew@GM_g69Og7%WZ_Gd
z5N1n)ENg^St0)ljM7^4G&}+RB{u8g|XN@pMUom@laH<$~$AjmXqkYhLBCt(683Lju
zyA+QkPniAw;ehvqzWAH7CNSFL7LP-42p{MqDgRFrkB^>7%!K^*08>P{yzr?<&m@R6
zf5ol%3UY~WV@}Gyq-mqK(-%U6&M*;2oH<`po_Xl9sJEMpbO3P6Z!7xsLS5Ay8Fu|9
z%iz9Zh-EB_Lb|zm+WQkQ^7{JQml50&ic!l&6B~3_>*<JU3YS;8gz37g?H@nE#gm1c
z*YLtiTPI4c9{M{6hrh<bS<1a99Xs|q|6z!Wd6~w{?UMK(@)y^CyVC_IKU$i}Coyn+
z5kKxik@@)sJ666?#;2X~OXNyNTGVCK`RluFB^VDm_I$tC8xKnqLWwt*XL8H=Y79d#
z)Ao^3c*%<;?e8)3y7=n^o5>CDhOE9SV&wk43IQxE{-n|@*+V~;7>J^oXI4G6pbbNV
zb1hYF1*8ZWts%IHR8Rp9iPj9cC!EQ9MLDPY1QyR07nxHfzcUS;LndaVfMwMttiUGF
znc6Tbs+{zUkIH2RWe}NRCW@Shzn+f$p9~t%H)kz&-ZaMIf)~UxKk*Z*e2v2;J(;fS
zIK2^F$>A6x72FCW_Q1FVPY;G>-X0Zt`|cHoRFEhrV<&a|UB3Q&ZJ^dr+}be3nvO@T
z3>c=U&w2F^RJZ??CH#8{cvJXxU|rl$9r;{qMbb}%UEj2=hw)9P=)RMT0!R=(L>BiC
zHblBsz8?-gW31$q<BdkRZeyZRClmxI=10U?M5zeCsP_Rld0G%j*5Rmo2Yd|H&tUP$
zs9-l@VMF9U@L|d|uEVyD#jXn!Xx?O*vjl6xgcZ~v-ACYW9GA^cT9MI6hFjQ*Rf%Uw
zdFS0TR7pMS1(E8A&1(KJjFe^9*cU{E*FqA5@|b@;q&`vwujLf5GV5qHK|td+Z2r|h
zrI`M!RPz7Gw77>802g4iW4v@H0PqEDW#2wZu1w>j%2t0YQ+#H1+bj#utP}VmE8rL)
z;fzt_2#fTLt+Fdim?d4LFnK8;$2V0?H7Y#Dxby+_xP_?SYWQX0+G@#c$F#w+!zM(R
z>!C?{)Z_<41i8&vES0x{FP@H_RX4wZJF-$f)7@Ub>%LuK+`7=gG}k59KWxZH)&2g5
z8ee6c0J*CiT+ldMTGnOry4d~>F@{qM2vQjOkrbt_Ai&E@ZgwsRhFt=*UDkR{iPZc5
z#f|#^n_mMr<?_B8Toz?o%yR}C2Vs}=_2}hG1*4JqPiHD)!Wg!qAp}%5xa>(#ipLXY
zQ?+`MD`7+P0~$vDCM&Tp!BjarAL<_;-$BnysBs`F0T}nz$q19{Vf0R6X`*&WJbh*P
z*i#=fP`U<^p=~o${e+!N<G4z%Nb~77Z-c5pjeL?_TzyZ1Ni#Tqo8r^zflqGb=6%St
z&Wo(HTwp%iig}6cjrxgf2jkcm#}Nz;d0h^_!930Fuv%QJvs%1fWgPm?>x<pxL;sV3
zGLE6w*lvm+u@&^5>&zovPlon$8=|i;?d<P0GPrYX=Y#5TEpNWLxf5Gj26jq<&iH#0
zYUifUuT7Z;jTJG3J=bjXFj!V^P?w>Z_Pfxs+H6p_4+0<E4v@>G{?*DD<0_+FS;IG)
z?2MrgG^UO!*JXg~cJC3*@`URJx;xNJw{Sjj`t2s`@)_;FnBZm!7M5|{03t?ngYz@g
zdhijer+vxe>3*htNBU+t(oeKS6wqeU2VCnkh0x;D=Uc?cuABWVDhFtdMBw)|g#U}4
z^uM)4Vp9KpUczlXgzak;M?@a!hV=Qh*KXWr&*4VR;Y_>vIN~TMOrRN=K5){~9yUey
zfMP!KY(UO;h%?9~L+HCvDfe>`vb-7=5@O&6?Me!R8O0<Smr#6??bNIsDEEO0ylB*+
zkjL;hIlv5+NX@bSototEmz<5J>g&)x#|r`H9?(6<T#D7YfXg#a2Ai&y<`4(4mv)uI
zoVt>8*xILtAd~b9^78U9`gl?Lz>LK`Z$Lcf#^Gw^BCoKYpX&<=1;YR;YL$cO)*b)(
z9x3ltPX{=}1%SQ*FbC?iHU~<qiX?$TL|TGxLeMYChKb7S$LpXRPS42*d;6pULAvfs
zxKrzq`S5w38BNNVs)8x|UW11X`@n}@QibuG{CR#6mxEB=^A{DX=AnOyZ=bwS(gw03
zOIF`#$a@1cwqhR1<V~QQIN!-chEoF1Onj6jIn2?%SLqK~mlDJfZfqlzIh^x0uNaYX
zK6=DQlkVERBgJwrnI0`+UaW(wOLs60c^5`>BNUFKIg$f|DdRxB@%HxNZ~yZk+Qj~5
zL$OC;J>FPAv8uU!lx=s6`NkSy{W!v~2j~aM-cW#N(7>ZT<%3`KXE%n1AT2;9$K=D*
zbPq(}rWhcm&kyF*?y^@$U}(_&L4L8j0`Cc-+7&Z^<}_)ua|kC6TJ`exNi1zCUkjGW
zJ+BEK!v?QNGv1vjCgs7_g&cQ|Yp0L;>}wKf_yGfZ+Qh>?iARu%E9GG=CVzBlwC7!H
zHJh>_3Ts0T<1@tOK)$xAk}-|C5z{v-1b?W6RiK$+FcGXpUbTr&))&=TuF+AmEhiuS
zdvWuhh85Q3Kifl-N5*9U<!b&nLAbf#Y{m03!^kvJW2j(|7S)UD$|FT2H7;7vAFp0C
z+eL93^5sDRH`L1b;ZLSGShnNxIYzQ2Fa-<DCd5H(l&oCd%^F~Mx71$Hx&sMxL&F#a
zDf;S&Bv4G(nee0m@0rgxy5Xl|yK4r>8spuZyeCrAK^||J&q$ouzf+NX{WCv9{C8of
zt-?Iw1!u=)3$hJB5;y#ClV}o2Qe5IUU$Gz=K*2j}y`7mc(S6_#XCUZJPYaFvs?%|n
zpek)V0EGuhQggoM)&RcsKrWv4XD)6vn_qQ}Y?s!<uvZYLzZW3QyX^aWk!MsjX#ef2
z;sIh9*&)V%=X^zVV~kPdO#N)R&Cui-C^C0sK8T>07>qy9Y$t@L=kxt+^ctnIde@ts
zs2nxbfSyWib4vJmMsv#z(^ifAAnkeA#W-J?CpPdf`iZ&4nBvKbYk4D#6hcb4OPw(U
z#8+~G-ojWS{{XT!4i?tx4VKl@G;)K!psqDb`)<<M1+C-El95YOW2Kt65H&Y=$z)t!
z^nZSG018@rf#});MAu1ef^Oq2KnBX<nZe+5@xs7KtU!D@goQfegkcC>>3O(Nz>m75
z$6&^=LD*x)6}lCJ@-cy!#usI97^ih{pxdl9tgN%F(+2&@?uOJAFJnwUOATsHUwGc8
z#y<U2^5cf*+Yv|Y<@_64^JbtB3WNak&GN;P8`sL|e~SFv21I@)I?TsvVSvWZ)=^_q
z?|JRd-;;=d)Tlc}3&VeXaw)Fe5pK>*7;{xP)5~E&BtCJ$aEtSo$+E)wKEHVMpNaSY
zAo2e-hbdnjFi`}Gy>NmBt$e1S@jAL@fgJdJ1{k-n#|eHi7yN__dW`fe!3|Qj!&h^Q
zY|c{w9f#i&Iva2J4-6Rr1fSgGfr?%S4=tc_Gh`BS`cac^+qx1ug9;SOc7UEvV_&g-
zi+3Pd4?4j>cYRR)_|7lle0y_q;Ex<(6QHAWbot4^Br;vnvi-L9bq^rLCV*=*2j~qv
z(#@O3cm@Xbn15haXTpGE54O3<vq*Pggj&#!EVx$kdQNJQn=6Gpv*KD$f}NhuC?JdG
zvim>JK4S8k03V7+Sr(o*)&ui8B;%Inc<FC*70<KtF8GCIHQLKcbLS{kk?cyv$doCl
zfx_)fAq{gE6n#v^;jlbuC7_Wo8a`iFMRLqZak=k8sDxQ*;y4Z<wqtTk;PtLQxfp4d
z@3`onjRo3SAlq=!>QUn)ELV|nH`pW;^1uoh$eBliR;5oJb`90<BSs!;P2Put{fJ`l
ze=K`<f!BNQS8q{!N%1BOx8#N0+N_RITt}I<l9o1|r-7I+a%H%hXhhz(i_3b~FvBF{
zWuy<+=l_v+{%@7-|B#V5pIW2pCr;j&S<``meiXR#H>t^<&#6w%R-6oqaKgwJw80-f
zYe4UmLHlR*QI^&7Pa3~Z9}Nrn_;TUGeR`lVW~G9z?MED~s0b=8t9pWdL=LLl1c)Sa
zS&S!ei~v?<mwf%<1^CdVd^eR^=N{@`-l>_Y;FzUd6&GUqBtLt}x<@|Si**>9q3EcD
z+S_JllWddrc<FwJ+-!Dw)7Id3?YZ8j<LZ$%d(6+gYx?1oZO6volg5nWrUv;P>kLwk
z=$(CVX^+8CmtS(uY94=oB^32$PQR{BderNxLiCC)gH_62#^4cu`O#bjy7n2}hw@e3
z0{4xw(eqFbt##{iAe^Xo?$N*6Z054=Yr_-XfgHhqfFD?uyQYJFI`nP3qRAl<AfuOF
z>${4b@K5fN_f;Ry-|92tMl6M;j?kv6_g!TLdx8uDK(PWsn(A$vjVBJ)0&&=-`UD7@
zuQq4<zO(%%;eT^)`bX32fA2b3FJY)U0)biSFk-*{Ufz1$!3#AB$5fh${@PM8WB4?P
z3%VYlWAr=ks--;y?eMdC5ZE5E=SG>mb*TP+GKF`OTwT?76el<KNsU{sOm7Pp{)%Xb
zD{uCa_#^Bc6y;e3VB{31_z*Y6Gc@uYsP?9%C@C|h{nhb`^8FiYCih&~`Pb%*bw!C@
zGwPHq1b36VH8u1x!!XUpr6rKI>*zFVLgPXa1jp&u${3hhazP%#-rsh{01^;}8$asU
zfE&C5pHHH9NeNF(piX%)0%DmcJ>P*W>n`;<*0|^FKR2lSS7v<w_wOM|n!}QfNvkCv
zVU2@9UPz)Xre?&)ql`d`AK^*@Rc~UJ+f5z#{AU|F;wM<!JuwcK_oEVFNbIMOGI&(T
zuZX8<_nUDyzT_N-U`uohZ@#d36jx~n%<p9Qq&B)ozYAETx*f^|BihBHI>E0hL+-EP
zmNvJdP_K7!_RRH!xG!mV92M9)j2WeBPl?C<)%>)7zr&&7WCm)^wArz_PNMO#E<K&u
zjmFN}gbPKm_H_Hc;xxyU&G7j0&sq|}iEtB9dwHCHW%cUDq`Sv<{xkoZf8lxczud9@
z>kZ4@<~L>lbMg)Ez@>Kv%sWZptADK^=0iVcK%7LV3L;vGUXNald+B!1#A+_n9Hs3*
z$=u%SJ!{bGnx1ybIDliZD~Z7Ija;}tUGThf2YcEkti;o3-fUmJ-6RsnIffNI>UC{@
z-Vha_gC2aCa%VBS;6dAV=F^S6DOa`-OW(GIgEvL()BZNY)G*Z-KWSF??IYNo7Y+P2
zw-NtpbSE=e?Mc73flx=!AdP}5@7p_g{cqu0C&#p{&RgKxGviFRtL34R^b#%fRG%uC
zqjFRDi5>scB>4Yc2LJLmO)Z3VG7=fPLaTmd2yZk5FuIe$qL>P|!T3+yk(d@JIuD6<
z@SLP8uQ&d1n*kk89r5pMnB*MY2S?_T_1i0ZK)JyGCG<~ZAP|SClwnz#Nm%-LrlTIs
zhW_T3l7@I*44rNt#(QoJEzKp}J6#+1X!iQ?CJh%F#dOPFd&suJF-i~Uc819{=^twP
z+_c0?c>kx#3@fB*ks050Hx>Ne-@yc$RJtzWj*tj`M9IkS9~}(5#9jV*CV8gp!0)b}
ziGh~z`Mb%!)WLJWp(0QAMQ{H0=~o^qI<c|aV*?h_ae&2wcw-W<DY@6V*)eKxS^2fa
zC%)XOpkc*e=o_~gQYboF2a41r#k0d1{eTMp``Hmf*wz4BO#`$jzIQ)@`$8)Y^Tm`Z
z5}Tqz<K5r1olD==DHpIlGCYS*4bG=(`C|OX5(!88Ub9|qU%!|g7`gLg!X5vF^p3ly
zbqX{aD!VH>M#*okoYwV@<#uebB3<#;R;as|mlBOR2<~@qbhPo6WvQbEAE_3B<Cbjk
z5lDY>7G8O2g4P6_rF!@qH?BA*=eFcTcuQ|#MHNiB?SIRvNpDIs^2Eyi;E~H>P<E^L
z>u%+*45Th(Z)731bt)#rhwpI*ZYkbfU#z4N^>@T9P6qNTou)ar*i|>@mT)(?K*(T@
z-VjkIJzZhQG1s*Ao|iUMUiO!%`Acv5fm!+|aE^smOhydtTw{o(#IhNrF7eYe%~DgJ
z-gSmZ(Eh<F;Iuws{bla8cP!m4Mw5rH$u}+mY((StDG3LaUj%Nndw4!_i^<Hf1JUg%
zS3_ybIuQHTDoz{e3+xNz$K_(J3I9n*X+L(>bY*#Cl4U#~#tf5xbpO5RzhU9j;1tqI
zz{rb$I4W+v&McwfuCHE^fmwBqh9<3~>!N$TAxvcm_l?=TdeLG-UphczZ|`i&k)w!?
zRjp57RA_PAU#R>YMr&&jfJJZ}-8jDpjzm4~C*t}7&n#ZGu(!|P-wGGZmYj2}^4gbm
z*|EvQ?U#gt1NB!f+CDzwf`&(jQd|O!W4S`RL(tzW(YO7#J|SCWSe*>V(KrqyYjlX&
zK1fm_1R2e-hNG{pu<~w6uh6qW1r?MzVH*kk+qJ}{c`q4%Z8vEk&>hGVz0$9~Ei9dy
z_yt;;5qACf<V(pG&7B>}>-HxqsCn_d%iL!%MQ>!U=88KFN!S_R8=?2FF-hS_1D^(2
zb*4Fz0Ork_MRS+zH(5tZ-({&;zk(oFADElptD^mwUK%IduD#+zwEO7VUI@1e&QK7p
z5=JI|Rpl-J8h$JH-0XoJdpB+%IIVP-7kOzc1uO`8Es>#kLYw{$<5>8mFNZB+mRqgh
zkhqNxD6kFl`X&Lm*Z>=9J>pQ4o|81^9A?5hAI5roD-?$wM81Ry88%E@u<+~S@+VEm
zO1pVKAPUNh@HwI6TxY(bk*=+tm(6b=n2EeTyhP&dAhH)D5$Ri<r!tVSij)(HpNh@_
zVDIE^`pFT0Pp4R+XfTgF_$gNx9=DL@$yDCr+t4=s>Xlr;veAIV=xQst+0va`1|D|2
zdu4p($i*WYn_WFTNZ2o9l&eqsnl<P-I1j>++rOAVoWjP^UJ@P4+q8BcilTG=mcH%n
zTq2`jiq4i3I)jvZ2k#$|b~szoTi=mmms$B_mX5Vy498(6%l*G{m8ARs+!5;^-Ld}P
z*JI-+#(-2{wBmdD>~&@t4HRPUS{F2!CgSGec<Gl$48yBf-xl@L<40MY(23>6X&SAw
zU;G7GKj(&9jXOsav3{8CSc2V{=Co*#AcHkvV+6m&yg!0c9QPvM?w#wbAkw!z<!)D=
zNpJ6~)B75uZcqQ<m+{!x;!00=y_@#gBi0s0g^^r}o5c+vcWqyO*59w)ru@A(yf#$0
z;=Zx(NqRl5_6jYMB=!%13ZxUo@CGN;;gheR60?=xTl(ZQSGPolqICk8@-z+25qN%G
z=GNqz-n0=2#-qX1qfL#GqMuwB&63@S#sdJ!#4<{BkqN@AhPE(yhT*mgLa!N81dTOL
zB*<yIVNQlC17+in*u&{Tmty%};0xWkEk`(Hr};byuV~!Dkz{?d?5#z+Vn>^^S!$kD
zW={d@Q|H8IwQnHXtYKE`?w*lwdV*3sz*Cuem%?~JSBk0KHfS7z#QE!FStUVh_i(SZ
z2M>M^B!<S5o`)uyd%MjN$5NWJcimrQT}QlayuGaL1^()^#5Ju+INx6eRf>`9x4*2d
zh_&q@`k~hpEjr_hvubYmJm}Q-sNpl$ruYe}o^|k^thvW8anw6C-oO)=C#if=?E!2V
zSC7zkD~R=KVm`hvaa)w(aUxto1oGC`i53=Bt<D@c&1c`OX+P}Vm6qCH`8TY!8rrN4
z_LVYHtOD-{?6G5J(RaRh>lhdzjA*lF$R=|eZF>%R#lQ=JmH*W2UyU8~L*l64-rk08
z2RX-vriC<|(<&oEVH^i=<1+0jKB}^sT`w6<ju?45_3b~i0Q`S%iU0jokgqzRGWM>z
z<QsU^VCQF+b7x@i>g9?#a1^*EU%GH>;R4abN#t*o>}w6PUd?K$^E7e}Wkir1X}cuD
zAE3y`HX?t|$`)7F4o@RwQKG)9jkfiS?ewxOvYT03I(|w++W^?!={=Y8e!x+uTJKLL
z1)kn=d}b=cil*0;Suy9k{Mp>$xo%(yPUMb#-L~oDd0-HjXZC9rk3nqUKef<;2ArPn
z@i1Dbtn6o69=hV7y&E@h`=Wd$fyZk}A2t4jK~`3m0Wop;%hyNQ-?!KBH>%^-k2`ox
z0{V5LI9CDpVHJfss2EHg5uM}j-MCsP+rLq2p3TC<KhV{))`rAzkR{sId{Y$M!P-#P
z*a@HX*T_}*D#9y=nvGgO25}=O594xEhbVqge^6fvbS0NesY-2tZ0EY@oY-;*8cpa7
zcxYvnr_mzN+bK=mmu#G;3?FsSLUS1o^!8<;YqAD*p01q>ZY8Xbz+F!)rn8R-+L!60
zflyjMPCDu8TCDK*jJtp0&@AOM=?fsNdO-RQ_Tc}?`8j6hwsvMV#yyk_y^IgE6P>2k
z<jIQX%+MkaS8jD+S#>_3e+q1mGejtk)k}DG366GH(oN=Bv3HD|V9gRsae`K$@$TDh
zI7^{`LLyafBfE?8TfKAb{5^4^0w1DP`QG$B5jfPh{fj>}Y`pw_?h1ELpkLOl-EPjb
zU$e?Vv~_CbE8z@s1BH_7NXfPOyrl}sKgdtx==(IX)}5i|vK@bCm#$t+ujk+LXf-1{
z66FlfhOSd8i)`+THM`s52<P6tUmraDj*p23#qy~v2RYyvay~5_U{2V{im&NFt*HTH
zIfcEpw8f{7EFNJR#?v}r;gjE@_>GP4gH8wZb}7ENWB<?{%`3lIR*e&U3ZSyiDHbj1
z_?4*>foHzV?wv0{PIk|i5#lD63Iui0p0{OtEq*Xgy`yKF`kMo}9=t~+wszTPvFtGl
znB|ztH{PYxOL}Bx9YtAh^6k3hSl;cNkBo?g*|bTGJB4u>j^{lga>|oVL(1NLRb_Q8
zW#Q(_O%Yvuo}Kb_5V=9(=h6E0M@8VDM+N458nt$?^Xz`3rvpA+q-#Hr8a`)<E0b!=
z@)Rsvkq<HiSyqLqn41>1X^di1q4B3&e0^v-$Q7d@#n_ZBwYJ-3Dzp2PIEQUG?89V9
z-xRyO+J=lef>?c;Pqs?(J?2KZko?wb#E1Jbrl#q~b!RUSvRs~zp4z;t!P?@NgLaNq
zQ#5NWCzz@BAC7>su|_mjz<1qSW|euNLa5_OZX-2rEFz4`m){4OFg`$Vv8Y#49k-}g
zwBxW47cHQ4*$h;45I#5gzbBp)TAGTtXadv1Q1)V7ApS@z==xQlSX)xwh_;<h9l5Vy
zwe#FGYP|}eEL_}r$CwNXYaY5<Z0>fl;F`NJ-_#;Ije>bsdd6tdGOKg+t>CQZ0hB3F
ze$Hl&huEy{C=3uIQ?;C>2JB&XY}{^^V#h|qWd8$w?=m~GKAc&_9=)?$XEtTyn3&Q5
za+aI%+l_o0BnG|4Mr12VO3V7=*e@sUrQZWv$Kq0&ob>7>7ZRbAag#}R0@7nj$C0x4
z5G0OZ#kb@=0w3shZMEyyO~umz|1##||Ax(Ta!d+DTM%Au1%z*(my(U@B6nAA*1cj1
z&}N0Q7N6m8Jg)3Ku?srL?F_WEM^l3zho^YNuxgfk9C^b<VIC_+Y<cTlw{(*Ca^JQk
z<*k6(z5FjB+X!h13`*QGs;o{nNO2){8Mm8Gb<qpjrz_oJ_P$=;?+7lqe-&c!m|=Bj
zka4Q0|9m+l_yL&Sx?!D56O;9R*@fd$#md?y%CHg$)!y~L9qWuZjos@%maOG}8loT+
zZ8hSXx<*`@)=f6h0F5ADHcSGhI;z}kUw`!1r|9(nbhhE0L)ka*w}yysZ&*4QJssa`
zKjiv;IHFU3ZJ&s|>JXRU(ZEHBtN4m%1SI<XtXY8cyP{io2Z%)QbC<Wof9aQ^Qaha%
z#U$%{`r^|gvmJ@xG>TQHr4}tG@=e=n<Nc$n?mNF6zu%U#`8zkxp0SM@q>c@*^A`)d
z-?+hDF0>rn1ly3nFjNN;O#iK!;CCeb*41oHxoP=lrnEpeDi+^yh2nDn-7XhoL=xtV
zdmJtOU1rPa=P^-dEuf;=Ck`c|tMhs~IJA-QD^t>=nvhn_;l_B`V3z0T81Rv(N&rwS
zvj_0-kz(koPfHQf(r%kiqw$#XdUP*tn?pm)Vgs#9F+zJv*Yk<xTgI5vIK};a-d_&e
zYeR&YTb!p`ivf+dd<y1$CjcC?1)oQ2y1<S}3vbA%V-cX(FK?}Lr{1rBG<o3B5yH&z
zeV*f-fS+`9Zx=sFF3$yTwHDB-yuuIAW&@4mCX1^5JmaxCv*VweWoG;Htq7@Q(l!z&
z;WTDi^hH0Pe5CbnLAX#t*|tak4XuXDxSgs;x>jEgJ{u&sf#U^(NMeK1=X@I2C(Y8d
zW_#Wl*{?=Zfa<W}$8?a7=v)Qe(C22jobEQ@?~s3Oi?&Hv%pB=lA=F6@d^5w6zl<=b
z_wu1o;p5`safeeTl<A(9{S|H=9y6YhAK+80W9<)yB7Tucl8<WNIgsvuZRcV@AhtQL
z$?;S`1!&S(VYwkmU;I?<N8H&axy?Q!@snKq`|isD5uss}e8(PUoH+HH_8>@OcN0s#
zO#3ZnL3lPOlr}i*Eq4wd#V)o~hdX}WoARHeAOD!2j+vbpqor8@sfdX3Is6sv<gA_-
zl5AUVR5akTZ3%YWezk%)2<;!Vt~!GO=*k>_hZT3Vt>yU$<11U|JTEVYOOva$CazOi
zbziPR!VEmAj{EFojG)W2JPY_#HfXGEDj0xwb|?pTpS#uSD)ahmH1)FqyQTf<fs8vj
z-|Fs$p?_F+P#l{PZ1Dq734ynL+*AlRdUAT~b1pkptjnwsHyar_$4(qu)&<jOcUIlC
zI9{Ic5Z4G}pfxdVVq}DvfAbtDbSae48nI;@CpSnre&JmCJGH-S0lYC1MtogK2kf6v
z%}Z3AVsMfO7m<GMck_}lu5(`mvK^rLTr+Vk)2IRSYTP8mjR<m7CsJiJlM20|H2Ew?
zPy7B8s;p8-jtWTc1WMegMKueHFkp~C3}oK2uF`FoiDS|%-BB#TEHpEpjn3>b<%a|<
z)QP@P87_bG>Q?QMQ%O6!SWh!u(hGlIXYCi@q3=U)&7_A99*zsRLt&+rpG{wfZ-1)~
zpxEfEsUxxUsauCcv%xk*l=s9r=v0%26RjoN@^EZ7gT-?8Lf`C4v0AwKQXvs;(S-L}
znjYBmwRmf?VS*bdZfa216M~Zi(dTb<@O&uCUUaFY2(@&C`l!kGx~4(Wwg6);;H<R`
z9k4iGMbCzyu!QPQ#SN3Rwoz%fE1~qvXkPaRXN!Q0DnXWhR`R_v8GED-HWLV)BG+3z
ziv5t-B{8eB-9F}`bNAx?jlJNwsPB4{Pt}h5f}3>oVS6NPqZ>_;a>ZkP-4^YQIGS}M
z8g0m%GxL|MANfEoz$UDFjYB$FVuKEZM88VsO<w5+!~J)+(8PV|TZe#iR>Z_|D&UnK
zt^FwLlmDds@Lzq1f9GQP@a`u3TbxX^pvMM`p0GoIEKR<I))``+J*myb;X0b2eP1Za
zL7tV?p$`s<27AB;n2!VGG<YX;h%RpD1u<9m%-d#T-U-Q=(PAq43yS$x(&N&%8;<<0
z1?-Gnws^$%@`yNqJ~hB7Tl}clioG^7K6Wy0VxV9uGV0Ef`qm;adctZG1Pu#~ozk&}
z6E>S#^~4>W+h21o92aVe)YT&edhjRJu5BSg(NT~4v#shizK;w36ml6@KQ!7NQY4`{
z+k}&lq!a>Cd9GMR#V-%`H;T5!ulIYh{VVYS$Qw<_>M)ADX38e-Kc7JMUdVNQ!p*+N
z^4i91ydM01AT{lh39y^=>f+;WlN5c}?YH9xd(UG8ttUJajkCx(tf%>sOamrsQJY-F
zHFE&q){oj4RQF`DCA2aV>>qltJuSh*npD+3qDtTTw7(yB?ve<s=GzxBXtUkLRm*a{
z=5GY-E@JwGf$Yha_XLN9%3h5tW0lD>YWuXNH12?%=u>uZC>lTzCOSNwr`yMbk)Xc2
zAP}@cXjbeZ`a*f;(wFSvEY0QL43U2V>_wN9vqozV+7kBlL1{+<0G%LYf?~KL8Ssyd
zkahh$=H`V7w-cSIJIjU+2*RZZ?n!RZz3!f2@S<-heb#j0p?Tu1h$=K{y9TI%r&qVI
zvDo2NLu4`3Y7bZ6MjJITsf<!&&juti-?Xt$HZ0RVv*lm1J1)n(=iQ}~l<$u}mhD9{
zHak<05k2ph9_FWP_qtM!JZ+;5-h^~HxwuK$HhMJ#7H<*~R928<3uKFzSQ#27wkY(`
z91Vq_U(b<eiq1z)j9K^&?oM=LW?ME2s&Vs3xcpId{q#aA@vFnrljFAm3+|OHvYa)<
zRz6epe7`*Ta^zB4Lk~Cid55Lw&8bnv)a*cNSj#3~$3|Of&ErC=ImuHsb?w}9BoMsa
z*J$$0$b;=!91x1ThueL@2-sRT%N&tE_+VD*%CI*2Dt)y~8KceJX2m~Q`E>9N<}-Bt
zQg-0k4Gh5S>P~SmkS1E(v&@QI5rme^w8Sr5XT6~JiBq9r^8Q<cxoRenv%H%Sz7PAS
z2sEF+MUD017D-?`wIi~!NGld=w&KdMc*Q?LYfhJ6DK_Dm@@<}vcrP#&(lQlX)#kLB
zDi?+Q_3JBvao5|5F0#0lj#m^eVQ1LhpX2>2_0FT1j<TWw*DhFy=v;3FIG>}u?r^%U
z%+ScNvDKe#&+9g)lR$Uq9=W(y`lx(%L@!;-d8MVOC5F>K3IL-XEeOoy_ZG$IXa?9s
z@+Mc3E&kg}G<x;bkh3SZ$DL!rd6?2MY`OXVIvr-sE{3<kM&y1!<ko$6aU0CmNssiA
zLE!bxdPc~+A>~s!jU<8oNC-I{=JiY3efQJw;1D;hTra#(FsPrU-+HIyF6blK3Ri|$
z2wU^t6_Bw);KlyYx6g)t{rW>W!)$rYSwS__k6S><nO+yD4Tgwak15;p6g}Lsd&S8Q
zYF{7<jfyEqVx`qs@q%GEB?EB5-R3O1+G}H<ji&9er|ZwATqATCx#Qyvbivltn|{b}
zL2LOYKH%obAQIykWz;n+MIVv36@869e#ONj$tr7){cY*N9RiPEd^gzAJpSe!axT50
zY9*Yer#aEBJ|J%|_k$oy#sfdl@O-mGy2eL65CZky6AI}x#-%i~#1}Q7QK6I;?PK8u
z7m}U$ll(T-ELbsoOF2!IFJaZ*e?8!EQXLd8=m`N!+TE1AI<_JW{`QNk;WLSP&I0p%
z0HsAC<{>uRW(6(aLNKC>$kak>ZaUCQZ;X;pQBEXp-L2(xzhQ97!9K3riZ*(L<??>4
zl2X0N{|Y^}FKw$2>VW8~Y^i5H89JpuDrfbWqNh1W4|(FRT6a8D8;%V4sFOvxLR+_g
zj9|8f-gR%QGk1KW0W`{CMdo7Ga?eU5BMLcW-XBBpfvtCNfChlDJey4-8@Pye7^Zko
zHg4ZXyx8e>i7v3cpVOMaAZj_nHT>f_<3Kk;Y7Sp9$4{3jKjW9+-q^1sAn0t+-n)Sa
zG=3@pw?1uotBkEuYQNe5Z!k1c447}D1P#Xb;S3V2Iu&EfJ4B1-$w9<Q%IpB~3|53R
zQZu5x*Tbw>>ET-2&gb&7gUxSp=voFbI+6i55725d(mgy+?(YDe+^&I<KRg&y(X4&!
zm6r3AxW~t$AyROTu20>s+W}U;aQN;w#<~gJou@i_KOo%>-dRYtpEtJ`y`M^R@r8Z6
zR;RgCoJ{Kb&C==`P3Lc1Mi6fD;OA38kTAiMew=@iiPe}HdPRCwEq-oVudWSAQ0QU%
zZ^idhg|}3Tc%j;VL-SpKyEhwNBZ9K|4fuIFj_an({+S(g9^+>xx>%8%7e8Vz`fEj5
zKFB1kp_gk#-{c4d=Hl(grEYb#)t7KITDCX?&1Vii@S9ZLzy^j9EG`r`*f9s&BYZIv
zo<^|&v%nYM{@O9wd7?BwQfF+-z*3RB@<RYf-O;R>;_dHzYG1Oi4?GyH33w{+NU#FL
z%hb=1pABLO&z3&vW>X~7!Y9??p(!qw_7%SVN2N_Z6?VQm)iB8Sy@2rjW~0X2M?HOm
zIc{3xiK@v6%+Qc>nk`Oaiz5J|M!N6nNB5-Eua0NqE@PsFq5eMK8NJ4d{iBj4)tX6p
zM9F&+wRd>`BG4;w?`3^h-~`8^@z8ZfqR6`Bq4-fjuNKsL^+ro?`;6sIhQ19vrn}@U
zc#5{$9uk*!<}|%^&!&J8f?`D-M(d^(wBB}j1!I|+lNwohsdDK-(JMLYQtl5?R9lOy
z2Q0V&-|ld>u(SAu7{y(`F%O}xvu<Ky|81I{@x;;e&y$I#8^AlF+H0ovz+=S6mN_k2
zAK79N>x+A5SF>DdbJES2`_LTFuZBDEuNA8%-B(WlCP-9ybt7PV`6c9t)z|k3a&-Re
z#N$Ow<(wtH6R_Q6U%06dT@RfKV%r-%z6O+D4BR!*xjH<SGUR)mE*Pw%=X<vg_cpN3
z9f;)$EQpwzOcz>j;NVL)H*7r6afS!rqOQ1knm1BLjKWRaD>GrV@{<aKmn|;%fWG6Q
zGf@JsLyfI9J2J&C8IcFtQ+61Q(vE*S+JS_3qzn}Gj%u$*1Q3Xk>fPvabB%4el95>=
z^f$!`h}9d1T`{fxq4Dh{K{VGuT<A6V`vf5}#E1Lh(Rch0-?UN!SE#s3OK~$;-W(ww
zT~drL#mznQ=|AH5^|wi1XAFJ;Kb7hBO0lf1>c%VL0UvXf;*Ys=FDco1@t?W5B6xWa
z-gaAVl8LqGM;W-Y&cetjIs@tyYyWeICnTWtPO)1Aj@B)>T5_;)svm4p)qMi``hsOG
z!*a<us8HOK@q$hS>i@FwlY_`Dmd#9bN;2Vy+tA*(#ur%A^@~-cwzD~pkMJ%WAWiL5
zzbWvz2f8ialxinUFd*0KAa9~hZ$<v9?L0e6)cUxqLDG>>a8fIJ&`-_m9NinzU6j~u
zw8em5iHrTg5sLWnijsABUoq;+0o*JZJMY7mrUUl9D%sLVP2}Vm#W(Mc?fJ_5IyP9R
zCXUbPMezQzgjHF<B^~(2U(hj?dW$<}U{R~-=7D8z5TF}nm6#WE1Nmo`K=W<kfM{%o
zZ-^!wd6*<?FzGewZy0J%ZycoDGQ#A`-uG18DnJ}NdNPs0WGSZdC%U{<FTCzSA;&#E
zR?ZpK*Bpp3U!@{nf@5@$+_saBZ{4$+Ef->MJl6juYWL|b?ac;p-#!5Otlz1>k5Fiz
z3T?|1^}VEK>77R9A{?y<X$-aF21d$G;=xvZ>qm%hyVH3LssUS~VFFMlKBa*von>(A
z71vf|2^1=7pDRtHP<V=`+SoC*B}r9;Ohl~`hs1AQzw>KLe7L)M_{iIv3u{O-Ox#RX
zYAj*c2vzdSM{w^2$!C^DCn?ylH3vG%%|1`Vg$92qPZ&m)9>i2yzNYUQA*3;T$o1HS
zqmGU#z+#JT_1n7CxY8DW{L(4`nY^uPjpV~ehS*d^@@(Lh2A;W?o|L->)wNU1pic9D
zOYeNx5#XhDgP!Sc`isqT-SXfqG2GvHt}z7=bXdw31H`frx%El)E`EML78QEwYOBq2
zNm}Y9>s@hB{ZB@K&P#vtC4%B(%NsYkHzq7QIBN(X9ch<4G|rugkiG^?<MC2NqogxJ
zxr6Yvw@F7_aU4M7-Co6iIfoYyA%s68Bn~8;bWU~a^F$fA#&Zx*=u8Vl*dwEtMX6AL
zxKBKow5`>f>Uch#;m!Rl`k>j)L#ga}%YLB{^nDU^nDe*iWg-+|8!s58szdDi(NlZ7
zn$LARP=l}r9G_xuQ297fU;{_C<JR)<jwCOwa^qanyBCZp!#QPL5LVNc_Nk3-U<;t5
zCpU1V{RHRB#^1Vt5sDxWY=_PI&vbcur!&&bM&<9>n!SY((#at^KI}AJ&d^9g@_Q#W
zdWwP?5#q+xh9$QA30OL=613?dut^c$ocL;pB<OC_U@umtSW;<IRcc@{MRoJ@a`H=x
zgao)wihPDDEDTL#MI-bEmTsArfvjZUz(V%=;jFOGXj(bq=@||z6y=jD5!&rTw-+pn
zyPSAHbp_;~hepB}5x&u_!0n<0;$r#vdd>j^VdN`m7cMu<?t3J5@9w6=-CH!a#@;`5
z8kCD%D6Da!g}-&%v|S@tH-@Y6OB!!#t};<CntR^{>3Gs1zVAkbD=qmCQa#<!z=!Ch
zxX)aFw}8e%Qz-kQKb<<%{`NkGQMN5c%=TU=g$vKYg`^1SbNuR11iLYQA=B-~*H^!u
z+Uu1zLZ9mJ%d%XuWI1_MHoB@5yq9BMHk1R9(g3_u8Eo(D2{ORE8VOQNm>AJRY6g&r
zWmeC%tp|s*!aXK)vMBYu@)KH_U|jh7s*_g*oZXLpI}LRb{W4iLQbI3~Zl}lnVg3k}
z<>m%K9*i;PX80wKT0s}yA8!KsrF*{hxOnBj;O58K>XBavEv>^Do?8vALt?OuGI#^-
zy?z!Ml$$S3ad8du#Y{dXOFBc+uXzp^ksTlO^4&M<@Czh73sPivriL|H^4SbOxn^jG
zpVPyQ>oxM{8yDH)YKM8{=C7ra!}qF-JwHj9pHv-i30p<K)i8e<E`7JfQoi_C1pw8O
zpSy4$1}@oSo+vh~cbdw;G>-SUwzF=f6=MGAG0>>x?ZOP&gr5$O=8<DtZ?K*0Gh(K4
zB}7?WkKaqGVn>*y17Oi~6!kOZ1T$_Rj-xT|jzzEjT7(LP1WefQ0oeZ0-1L1@pdsYB
z-4@{H93*XaJS%YX5#HXg)Jh;~U#YnUhQ@^VIjD9NUQeKtFR^wQ`ENCeFBd*OOa<?N
z*-(|V)=|kBP=h2TY!OM+uA)mAaz=t=eqIh7T2C+&TN=l<D2Lbl<f%)*eM6|+v8Zpq
zG9YRuz^|!`SJun2@pIX@IXrr`j>@CM6?2~W&}l5r&VHam4?qlVI5_osjzR~-!5;we
zRhwP*G?J`@;<kw6I@()^mS;`T0k%~A!#9`H0k(*EdFsyZ$yNXtPoBYa?36FFfJM>2
ze4KOg1|z~_5{ZOJ=7`*n$NjYL5GH?1IW@lSIf0V(+l?uEx`4H8_5*=em{h2-A!_2N
zXqk@1m9uiRLC!Q0&G%{Ar%qP8`02XeK)AkZu*r*-$QkuA63E)Vp>kqN#J0f$JtxIa
zi;7<v5n<9<J=K(_a>@Za>Ch<i=}(bsT3A~|e{~Ir-=SHecwdcQoWY4)**p_Ak8jx^
z__$PNEMIBf^0F46N7_`2$fH2=m1YYgpCXp-%^Ikg$bNs=3FXp`0rq84E}Tz97RT|+
z^Uj`Iw3Bp}lZh@<F?EhuNXcy}xje!hzlPFU7JC@j{~8r${F3@NxEkVpq&`#o!{%+m
zYrESyQ_Dr`cRZ#<;&AS*HMHOQ5#2MfFFf;?$1Qhr6=Q+8sj1>!f(*$l<yrCr^L$CM
zN&PmXxS87HKBs5yZ=?Di<}<}Mss~1HknXc^R2;U_fx6m&S0H4{B^7g2wg%a`i#NP;
z%9QPXw_)E`F0UH6I*W`2aPTnvN-<3M!c)FLRVd)RNw{*7`uZuXVG#AQp=Rw6v)I<`
zN|-kI&|Be<M*<+K03F%u0aRB`d~fS5ywKkP6S`;h0+^q#=FAPkp^EY)Bf9Af`6Avy
z8~R&m<Yy)&Ccj1O2Iv<y>1Ne-$(Osp4RL|W?<~@JdKjRgpJ)n$G(SsDrxdC??K?Ss
z`uvXt^^bK>9v;4qxI1=K$Q4|4#?9{iE&cU^Ua%1oD5J3*aHKaJs<i1c92K6}Bp2B2
zx;f#X=;)M}gi(yf)q0AO196S@S8!;}fq5@Xi*%)V2sfso>_SMNN1#{x*=so~faFq7
zPJYn*>VEd6P3s$@muHKJ;Ru+R5d`B4m?}Abm8jyd<wVttaBmX(awM!`kpGh6NQN@G
z34uhL{Os`&w=|NX7x!eHi72B1q6C^(WZv?*<if@k06WKVC;K!Ut5|dHo|iToDJWMx
ztCd|YDg!m&TF3h~t7W=wb#0?3`fisg0XjE&!Y98rd)8KuU(^E3z1;fl^<#HO6T)}x
z9Y1bec)I&w-)Nd3$=T!Gk??K@m_mKXn_kdrf3GrlK9*CwNz*9hQs@Mn)~sy;rI^xL
z$2iITG&$!)dMKv=$=6M+p%w5Q`aU7c3XE~v$I}pk69~ccCFSChGH>k|$Mb;NvQYKK
zX$~>(kbdJ=@xGs^k4z1PUzLL_OYYvLhBo2RxcR=)1vs2~^MhhBgfA%du~ZJ0DG;g|
zH`oeXKEYPW@JlMOf~`_`9!i2W80ODOe%@e+DH_p_pdKF@4H5m-m792v{>Zo1I?FmR
z!d4_bAbMqG&n<fHz@|75qe4@XhieAAJ)Hsm$9I;H<Hm-VhG`0&oX6F}yhlQ~(?JJW
z9wzoXVr)+-pB`x^O#Ypy<j=U1_8n{2ivsNO>DGvNQ<VQ{tueENNLQ$nCO(?>z+#hi
zo+Psw7*n7z<+J*_GdcK_Ds2-ZK}NkqepG)y-_$SkVBZy3*!>RU6i<GtcIrs*gx}Vk
z0CC*vIm4<7xYfKicI?p5sOT<2B}Ay6;m0lI`#qt;PuUF%r4jM-KBI!?me|QG&&F|D
zh%bN80>RI7D}yV=lb)|Ezk__S+<RkvX8rGn8*znXj|)wusap`ix5X#3kg?OVW7o>!
zIz#M@0%UjRGXFB)6M~o1@%8cR{c+nj<gX;d>FYo7s#TY^dq*p8D(0j^3cBoIf6^kg
z6b=Dh#8)aq6%Fw08(~~Y(M%Z$j!`ZuT$d2u<}MBR32ik1SyCXE5E#|4?3PM&l+A{V
zZGOh%=axJbifhi>```-23o2aVQA(u>SF4rEJ~ms9*|K{7&npN>D)YhPQKe0lPpEL=
zYOzxJiA{!qmC84Z36>4wi7jNsBpf%_SHXnI7@heJaG9XjQ`G~M?_lf~Bv>Y1Qob*f
zzo)}iG7;k0wR&FB^VSv@QyFxA@~$qz=?cCElP^(&MWGF&R{fSNe;4s~M4$s^%_f2|
zqnbCWjiFXNB-^$=4$JdXK0{x?$-~5*4GVqA<fMZr+bT(i^XeUES_CbZ-$WZ0=v1`^
zLKJ<=0nQ<|@W>z>U7YE5ES*{6I`VSypy+4kOIO<W9DE1LZTn-@^)ClPiMr1~LspNn
zo&~u!YWxMc8El9?>K3FWOI@+7DD}Pm%%Inh=c3gq?~UnSR5^JGIM4P?7<^#W(O<PZ
z65B`H>_Yl?Njl$lyME~e2F+MlgM=Ea!FmuT^dZwJ<J>%#qK5}ustU4?=x#B9wHLsF
z#Rx@)1{y~mEiM4TJwY_Ft7ujsFV!}PEN`aE3D*b|fH-GvLv7^HMLFPnulErp%!l~9
z17E(!i!qF7`NE9P3|k@{63$>pX5_QLN+^~sHT1(r-7n&~Gb#OBmviQ+eTY)Hqy0sE
zwNjMV!D~Xl6b8+Evhi<};fl_i>!S|#NGpUh4Wn?h<u%2KG=Dy+pFo16m0u)$`KsPh
zF%&P9PeUvIVI`qeA7$AJ-)>p)C|syaDZb0Eh+bl&ReiE*g|dln)34FBnN);*^mIwl
zE6H0A!vDI2z!G`2%ZRH5_nBv?ab)-_e9C6OGA2Z+D4DA)w8rXZZP~4doLWhRrcwA_
zn;-N}A}{p?Whe#h!L0fl#dw_1e&sA+d*|A<5#BDB1y}cL7zt4EzY~toZqw5#aW67A
zeHTPH7yzZY-5br3{_X(6aq>_u_qqTgf7!6OVwI2J<U^}6Bt7}``u6T#!d(W0cGT_M
zE2=e`zu)KSpCd@=j~!jM1npj#dK#;FTm9+=movDr&>xcN<RcZn7R2;Tey+Hy%k2y`
z=041QT}_bD%HyK(5S#!QM|y<koCrJ=dtaY*q!@|ye>$UXWeE+yVITLG-ZP<?Mw#%7
z@}rQK9+34pLB6fY51MsDIP@-W8*NA}gUU)<{&|xp5=To4(i&Tmr%{jRhfgfY+dfN%
zCbww&6&3Q!K{x%wa6+kWs+^U$MN&A=K$Xc`UEMCXTEU=JOAp!7L-}lGz}?Y_Y`EN6
z>7;tAj8-ftdll6}I?gg!@fmo+x0qlkp7&cUPAO7$^Jj4JT!}1d3656XSOuOVRiJ#f
zYT1CFQ@Af7)}F6ke}4mh7C1M+XjQi?c@)0(22Z-eV(s`aq90uXV^p!Zil7Gkf?|LF
z*8B5rOJr3v8=j~*Ax8PGTo|60khh5;TYiU+sxlF8RDfd$HAhk#b9kQ$tD3UATOh7g
z9__08Yrs@%HnfaDx$8#r{@CRUwQmK`Aa4)`#e1eUMWbs$leXeGUT#_;E+@l(sFh?I
z@pHhK<yDh|PzvJ-+ltD!wS-ch<bs_I(f+v_MzNamPWP>fp7E9(CfHe+I-*&~>uGkK
zs<5B3fkSYN%^Q&XA!ZHBw0PIVOCN5ETMQy#eDyC=={6JsJ;3a0`oqoY&}|Kkch=uN
z?R&dt%O>miIWsxoNhrsw*iw`c`H8>&EO9KKjO(komtO{Oi;uS2I#|ynpElxK_FNXV
zHY4EZd`TMRZx*{jQBg<miuSVbE>wy`o^W(O9A~4I&WZHxdp2BvQgVuY7YOdBr^VKY
zNNYIs3<A*6^@M0TPd2%V1}7roXFFzCO8sOjTvZ!s`K|*sis(a=Ix#WR<eQVOHtAOH
z@i48XEteiIvm?jYamH36)|}XxOeM{XO-kUAYBm>V*y)M%AN$F#;Kph{_Oln^m-HSl
zQk}Kr&P(QmhL{-Df^uF_A*4$N2c#iXT-W@j{;e11nI;-#Pe|}fUOxB&=95LL@pk7<
zzGe#DW0k!~^@YDxk;+U)@O7#v7-K$go~V!qD=H_)pr7U~RzLS4W<rAJEz|E8a&D>v
ze==Xzhwz18#21#Clv3B?(shO7Qhq6QbsjmtWTMgk<0$-sSEUlhcJ;xdj&p6x%zuEy
z{CQ4Ed!#b#LhO(85#@J%J0&ym+c10-sf&4+_l93lLGH(MO|hnm@}EyKbBsBDr*Yhr
znQXOPb&^h=;OB_beDh>Mi^fxn#@b4<B;_tS+IZ4A#1!-!!PkjH_bM2-fVJlGEjHDf
zO*S#*Q}39Pm%U8MxQ1T@fO!<@>Y@4DlkMr^Tzahgo9$7-ob2L$6407+?c1xx8Y=14
z7mw;~pT(sdE7YXyyS-~xy?cvcy+&RBsKt%Gd#9cKU0d5Utds3DO&gr#gklq@)w<8#
zQ?JjXa>>31jacUs*4jw^b$1BAB_HgwvZG&4YxV^TKb;CiGUV>{+m)?P>AUjyJ^c`1
z=+=6$#~0h`mm3-*_TOSa9L<?HJbCRU)V@nQHwxRzlndNWKMFRF2d0Tjd4iT4>|hpK
z{AIS(0MroE7tlG|X@z`BmIT#frs-f4+XciK9I7|<nuJO2Y_*YF!j%8xqzKJszoOn+
zba~vPm_e~sb*j;L&vB=Z(juY8%*IdBd3nhvDSt8KE)xhNKKLpnRw8^Y^qMbY3Y9N}
zGb5`H`pBhJjB*x8Hi+3}7HDOS%(sV6mqgqvr6O>RYhh+YicvYQ3;F*3ygEK8nNy*G
z#p6eL*AxS5ktZf)R-w9+KutJWN@cEYU3xj}e#Gk{J}PNgvHBYLY&g{OB7R|p-tt-r
zc@=M2p}eYvd!=_-CCY8Ys?z#T^|Sf7JLyRETxcZc;?6?YRM0tR%JX5&XCQA_AS52N
z4wim5lXqe(&Fxt7@Wl?#5`&;^o=K$o@Wxw8ar=<2nom@Beh|gzjB|9?{8RZSVuPem
zH(`vIz;KB;jaH;s@ml+x?)x3MIyhf8>h$QtBRX;uW{9yAWH&kYQgK2;F{`%IJ$K;Y
z_>%m^())m>{Tkls72Xqvp9jyjZ@K4$wwT@Xc{2pr4jJs#)rQ|pg--wNUSYjx(9A;H
zYF+f;J9EJDwlovuxDDV}$5gmzU9<2kJLuF7;T#JDX<MU=h!n>_95BqJ0fN&qR#I1-
z@qAsQJQ(eHu^;llLWV2tZ2D;uXtza7YeKR<LLgzr_V#(x&eK`q*2<XJcm^``=KI1_
zN}9{1SUJ$g1Ar%|_{ySHF{V<IvQYmXtTe$F;xFTCeqEfZ%-oLcXPf9L7nG>R^RZpg
zs*$B9rSPtK&-64*scLNt3qZZnI^nJPB|h|_-MyK6*m=tg)(c_3#QU0}60EznM546U
z@(4_$!=hvo$RJ)l7`D9R!>ays9mwjRuRwD9GyB+&U!Ma$gz`~}f$v+}^S~<MyD<?^
zeCN$`Yd<I!okA3o{QoiaCQwaX-TSbut!PD}(t^qml~$yR2vi^pxl&YAlvI5!AVbuk
zs6Y|IJS4TK5kUe41!ahcippeU5`jcyNJL0LkRVfl009Do5JKjAzZ-qu-~U^CEdqCW
z17@GI_wzja?0ubx%Hc+u6wyGmqY+1*pC5J|N$9ml6RikO_=xk^aJAQ%If;S9CHXX8
zPgRv%sId!qX_`ftDoHl{jXyFtb%(^V*H^x>V{T25cFprz6<)hyCtQ(%k0}vGVuxM|
zRq~?HmVHn@l#!ArHZ8Ai+uY<(-TKR$K-Lu5-;qPHZdIv7CS?3oc%)hmjrG}Ha$1-T
zW@C*kFA~mos3zZnZT_Pgg}rMmd+YJN<j{1Ne^vt*Qhwoi7UE*X=K^=nt?0R<g!?#U
zq5GZxSu5PW(#b#fGN2A1Oe_&Rn{DXuVBqh`cdGi>s=jO_A(eC0AcO6>pv$;VRG0*4
zAL>01nxuXh|Bnee4V7}l;@;G=&u{qg_o7Yk|03g5aCbh_r}gs_C4KVjZ|V}Q+CJLJ
zdK@9_GDds#eUwdOo+#8$cAsn4E`AgZLx?f^qGVVD5SRha^2iwrLYY7{K)zN6SkOVC
zN3u8}DHPsK4W&vpAt)S@9Qz!{F*s^e1NLnQ&FhB)f~$bsi!@xR3Fe`|l$<U_>X(|v
zK^5hB8o2l&D#wYK&snGZOoasEdsYl5;@qtzRTZyO9H4RJvg)&#FGu%_Jv9EU4I7N>
zz2iij_gsRn!~Z~8+bNdD481gY1>aq*xmyU|-2mSm#pdce5i44=myW{Or69St*e@r^
zx*S+wh%p9>uh>zO@Zp=KGUCX4OR-5}T8An%Ag|B<sd2Q;QV!R%p9)@&>IUiwy~*u2
z-3gPftGaS1RCxl}%^8-bedt?eR$A-9`|W&{o0M2;;Js*_FQ;0SiEZHmEiXCmyAXo^
zR4H*L4QDG(1j3lvOXDPF$nLl~+e8PbT_p=lJ~MQX5H$!y1*EZqV?x#@zuN!9`A7ex
z82@f@I3*pIY-p9bwV(nWltMPI*QzCq$IV@tggd?6BHA#6I08Z^R`8n*ZM@P(oY5qk
z<hUEf@}0?WZ^&=VzV@}h|22CVr;V^uzr0rDL4w*57JK^M;V|vfANmyfb?Ktb?S_hT
z79hc<b?Dm?Vo9C|uB6p&CzT}UueyvQV15o?U=8$*=fDD~=O4Ds*{@~iNj`Cbd-d%3
zm-hHCF7+e=jt8`P@Lp0)VS@<*ng=0p4^b8c^NQ1aEDRm!%G$RHP2xr+JogePp9i_>
zDC|Hb_&Qq6Q3Tf2SAxEKE8(oZPgt{nhr_k1UVBfj#o6=XGq+iM;XHkah(g=#*b@tl
zStcImaO=u#&mKy2B*$ZK)Qg4jbE7hm=eId!KoqoX<uQAR#o5M%V%x*NFk1e+aveu|
zOOHB$&Vj=aSt~WU7g-9t4(YGY3JcQw(g`l4dG|BK{LoA4S}st3@oTD4&P!}K$F}sq
zVak@n%m=Ew&pBAcf_CK%D4Y5$0=krbe;1z4QTgJ}n_`Gviohh{o8d8+#Cp&@g)brv
z^@vo~wu>1dlddFaNd)qJZY3f8_so?d4fy1B{$-a7+wI|U&@Zdt4nlm21^(@yD95k|
z)JlA63ROR9^5I{Kw>Z~h(dtdSrf3#%ovruyOiA!qh@r^zrlg7IlKAq*MYtQ?bk%iw
z6)%tw!Qf;0<UG3(OyaF`?ybF-d|`zlH1oJY{N|iQ(cSlBWricECK>79wLQA)5P8yl
z1-6l+XTW<_QFBq!d{FB+-8T%>cUbx@8nHE2J+%#gqR>7XcNXR;OP!TNztkN=h2H77
zn1I;gZw<Gn6<X`tGvThIrxX!WeN>(Ybq(jr+LBQyQ(~9u4r#7Eq}~MVbL-zrdC$&0
zYs)XS2yJ%W+#vBxmbYa0O>Kp%L&Na08ncI=ak3BT^thaA(MI?7L(}cD8S;!`mBWis
zI?}_4sI2Xi*I0a<l#~nDsekjC#SLJTTEd(LIclgL_FR|Z3k6+&Nkcc4*8+=sxux`&
zBZDw#$Q`j?6O+263boZ6c6ob=Mij``9*CTQu?2z!lMo>%H6LJcZoo)Wc|^e0paXBB
zR253wG3@pGvWoimRU;=#ODxz&{wXyhpUz@$b|S`3*imeqh)b%*DwxEo2N#A%)sOjP
z4aJq|E9FgsfeS*YBoEDz3l(jG?@_OB9-i?nGM?~>YFK{Ml<(Qft0nQsuiKtBaEhOx
zOK;q{mRB#A<VBd}EH^h@ob)(U&TfZ+!fJy+jyn*PDz*e@Q|-{$*z=VSsGAL<7F%tM
zsUvem=HNyf_z*jvxB=`xW@HrzPaud^w&bICji)uxT5ESg^P#OFlO)?!k&CSy=}D&+
z$JGy3*f}dqFlA<i(Oa~>(fy~#AqH{Jw@#4$&DQG_IT@86mrf$R+*afSHgEi6yfv!`
z9evAgO8)IN3A?ZL2}h3@?LV_wfFVS$MpaGW%%@V42$PIIt@b$Gk?SJCU*+%jB_v%7
z8Y8v?3D3B-yO)0h#`gC;(q9{9)^rGhCq_`Rvjw*(_=YJlLksTh{Yae5EZTA8b1tBm
z4v7!yKp?t`DRTIrh?cHAZh}KsjdDdbdFZG-Y%Y*TR7!r@y;V^LIOzBRwY`z*i77iS
z{tc8%odWBS24dOOj<%TYuQ^3+cwfqacQ>3?s=;vc37C~c2}0)AIT3TYbcrg$50J4k
zaNp7RWFrIcrwq*sAm`IHDJPJA=xV~%gzvduF^QV?ezO&utXUSde=bYOAlNO|_h5*{
zH>4?=8)oHkfbFEbOOsK`U;+yhTQ*;ca6IK33HrD>5%-)S;@vx>`h9Nm#7|H*(#h&U
z&TLgdRA~`V3y+ZyKG4dSnu=9^P2KrE@t0cj!M<&#bi6a-J|*9$o#IEt@9FZDOE|8O
z7l596zitQvdI8jn2|exEKCnn|hy@phe(~=m8FjGX6VJ_&=czXb>eD)u7Ln&yVvZ@M
z5s2eXk+Kd&mp7x*ckE6kig@1V{_5qe%r)!TJD5NIfbep3MC<+*c<%S9O>5C-<F=Yd
zcCXpEJPDVGk_!K7%aSd9^RBqi7NEgn9I9o`J<h4qq;jndRmnF*)1qrB0dW5%*^&wH
zYi^nvwquCt7FEtu<Iml;+uFx2wT80dKcDkszRZ|Zm9qP(b(cWdc82~tRyK=5eSI#_
zJlW~<J8z5XNkH)^F|!Hh@LtudyEbe)eJ8z&ty0`4<vU8-LQ*b-J?L&&#D=SQ9-wtA
z91dKKi2Oj;ugPT4%#Q#GzzW`Wo24P5g&$N2_JxW(MT3`Nh2q1$Lz)d;(%=n)!HXTA
z#gKe>B%!;?j&n>{Ff-*1W6wpjJ(sRgH{XYT6Y4AJ*O0_JlKRVVK+#~6@?Hu*uuyuZ
zm$H@08*|FEWc;8>0yTnLy<BBXBNzHFNtx5@5_A4(jDs-;f8Ran9gRXdE3e?Q*?c~R
z!vce|9f~*yWpXKE{ugO1_-^?%cp$PKN(=EL1`wie87_|Vha-Mwd2>+Rz0vR_8z*X~
zfOLobnK@GGVO(q3W8QU{ZBg}V^5!iB`IvV?l4}W$AUI8;h)Gf4!pzj2n!dW159CSK
zVkAGrSb-w8vS2h2uD?Ma$wb)^C#IhL^l|vj`*ZpCk=_#v4As<D-f?fKre%kq?2x~L
zHZ8m&bPp$O`hZwv@Xe{4cUsuPM{w-xn+!0Ud26g3-)`j?6O3>5tU8yR>bW$Y9U1^W
zu}@gN(BGAVG)9hn=yvH(W2jndR?UuV<DGXav=KC2?BC4Do#YVihse`;u88CG%?O}X
zft>3)9yfW>Jz8X|Q#}#_Pjo9R{3}*G9gxsx0(Vx|&9+3IzvvjtWOL)03%DSMNlIu(
zh-2(rmCGtj!vYJQKcQOaS>v0@eck%*USzqd+nuHwWm7vvHAt<sw^{TX*EmMXGJqcl
z@YizsKF9eAzsi?G(u`!5u74@<4D`j<RSz|KW$H>MKSb6`dDtl?YLu+2aPe1Fh1;eB
zBS`7(e3*dF%i+xb8>gKY@vRq|>jbBT2Ci!yI2h`gbt9jyw+bEA4`&L$IJWY=i1raq
zK`@8y#fk~`<@)HNYIs#?_y_#XaH429J8Yp)vO!g&{freGIU+kM5Iz|mmY?ORJ^WPf
z%|M1q#<K-1f-Wg?xcpzjyNCPSRIkpwY#O$hnMpP$tha${hyes#8q#W2<oeK;1s!ML
z0?i$G{z4mqEUa|BxI5xhxwb>7CBOkL^&2FsbTP9Fi6!d*|JJ<a{*M@kpsn%s;0$?C
zwZMpOeq<yzz{W9}Uo+ueZN~D~mV?!HqTCT`k*6t2%-Y1HI`4QnGu^?vcGLW^Pfj5@
zOkB+H7>=bDq;uhu_Mcc<Aq2$l@lIPyzDMG6;OP6zwFs6p#%^f8(p!SnWyQI;rTaFM
zoSS}5Fo{-GxlB5Ckb`FK6wb}&vBOa5G)2K%Qe+n_0jm}jV=I&B;!0BhkBi@6rtc~a
zbP%_zrbK!2qPceRotTB3$A$(f<N<=<p*~UEKDf~K;eQm9CABFd`?=M^6WIiGv@fh8
z!N`ttxXjwFXop$Ie|Is=FkqOcbGYoue=8Z3pK{l(4=j2gSJqDZvJy6MJ{#I*Wa64a
zVS!U=!MHYFb)8oz5T>@(PrCb+T;#%A-hy$9<Hg<;H_>->5SBs}A40drn2*Y)6m^AG
z<+U05#qf|O_^RbtM6bBb4`pL$3;#J_nBieRH#_tjaQ<0);QV;YmE|v2Q=;=E^{+fq
z*D+uaTShn3`j@jYm0U)5_*MMCA%^-Ofy4cPCBjXoEsHN0NRD-U18W0*W7rm(@dq4W
zoT2L9^XWZ%Q{Q5YAhAQGq9)G5rzebE$Fp8q?}(*c`nz5J4EyMmAMbvXd~fwRix7<Q
z1HN6@dsKnTylO}J9k~%UliRmceIMGy_3Vx8IaOq1y}avv*L{OwRfXR~^D4X;qZ-|I
zegm#|)H7}l?%Qu!6(@#gxvh&0mmdGF9{b=R>YUBhwP^;lF6R_;WA2(Q8QocsFVf+g
zCb$n{Xm(1p;m4&ugO&0?;ZzsO2B>DJ#wW&OhpuRHmh6<)9mDljmwJzA^WiyL?Lx;r
zx2?qv$T3_pT>{UMpu~<)UHFDYLl?xlO)+~SlS7Qh9^@F;O5X7T(Xm@%Lw#p$^h0q$
zhA&sz!n#}vBE)E6Dyh)e$TH2_)V{UVclPF8c~{rcCwHgi<`q~boJzRt9u)zUeN1uF
z4!RR!I2NY5TtrB67gx9^ObPE2S#(u^Pop)gb34)<v%YHGPFPbX;I&^EbX9dlNE{+A
zM;w$wy+A3Q#rdhsRP)l^i{$gm=jnWLv(lXJCgqCd9~C$NTmRS9+^g}1TtGu9S}Z@p
zid2ArEl!BY+gJ+duPU>sCoh4;QY@@Zan`UAW%`<Lk~M&}A)r&L>VnBE1&%e~Xg%q=
z;JijVe;3-R%+d(z6Dpr7_oQL^ZtZwlxcQJWizHC56>LTuFeT=y)A_{D>=~N-`9Xn@
zYoYBxM$EpqxR2Z{k*jVP=P5BoLvT-o{LVSUVd&*wjl*)dYG3Mxo$YDjedtrACb<Rw
zD}sk<$OHNHOpG>Txp$wq5U0~@qN6^&$g}3z?=Tf_FO$E2Zk&&L!0k7}nRdi%iXwnx
ziB90ZuUV=osw+d)Wl0P+M2bynMw5s06`jt@3zL+6+vq=@m`&V%4enzz&!$@afOc=A
zX0&4bjGV@!k#o>S-MGfidv=r6Fz~xv(RWH)9GL7*6kFeWDNgM57+P|9N|@ZIXX$7+
zeqVn)*N}%x*{tgwJVI^a*uUI&&(aX1J@M%?yH9_j=HA`O1HFHrouuH@Z%+>EUZYA*
zY4MK8JT1ZkKm9c+wLTpXq`Kwo?!P!`vI=f~*hBz(2`30@cmYi2*2|Zo;@gEPkvTAx
z3m{+W(iezwOKlr*c1}GbM~2Fm{d1YYjdA`cXLNPR88P2!s-yx*g%TsB@SG}@Ap&yk
z<b!&~Z4QDl=uuDC`2O=3zW7bq8aTH^IAW0+7_tm%u1Z7KebT)6;4#Cv76FMDL(~Xd
zUsSMOIMFPrKEe70cYr6IR{Lu*PaR=iUdI>mtpB6=i5)QiKCUEMeRWVQm8&C#NN|Y@
zTuu4-uy}-wIFOQDMl|Hl9+X5&Wt_<8?(!j1w`08LQ6*4Hl6wPwA$hIlp!oKhNb$5=
zP;_7~JbeJ1<YcMREC*k+l|M!=KC-6se(4{V71sF0Ot27f7Z{snZiVL3t0$viE!mlY
zI=A*j^5dZXN7k#H@OmyW;u&GIVhkS-Kl;4M6-px8wEkvF%`383r+bTYk?5=)iGKZ}
zk-f=}_pfknz3zBxXaA9oBRg$Z;i9)ZHuPKA5wctT-3I#moPgy%*=UE|!c>rK|G4Q6
ze?xUzM=n#o@f$H`6;`cR_c;UU5S-SOV_^J_Y$I+$sttL7xP0_|ul>tVcWXpFE>3Kn
zPgqD3|Bh+L5dtZcZ7?}8Hdsxtndp{I*@}^5;L6DmZJghdJZIp{%O}&xsz)kWx*!`V
z=eNO!2Fq>elpB(}|EqV+a{iddQv%ha61qT0AkX}__@!O)fl;l8Pl)h=!NeN_%2&py
z$@aBaeT|w8Yn1heMutbW+}`(7kC+3x*YMf-KmuzD<`x&PCS>z(aCF8OPa(Kp14A#x
zXYE(DGJ!^_2GQjPvEbRCK7EY>uiWj>u6u7j9Srz-%m3kts)u|so6JYde_vv1fmbuM
zVxLGzmI)S9P9&-$%AySuL<XYc>utNNZ$_iv>A*94LN~KzJufU!UB}g1{)(m4zMLSA
zaVGn4Wb??Gl;poAUD4tXIFdUsW+=wtcB@~yPI?-QuMb_aq@g;o<0Qm7qwr>=k!5yy
zObQN--+S*_;!~a4(2-9(msuPEmy_j(j9uz)7j5MJ;z2S5X-SU}w{vrKx9vf$INR=s
z-^l!Qj^w1+yjCvatVlcO(j7vLO4y&0WDES}-%2vIwM;t~08W$QCmD=fYak5q1OFL(
zNZV$TRP-F5?-u^zy$lRmE7}@(x_q#&?vtNw_2eUt$LHb>_L1YpD!)0EY3hey@jg0k
z@l=gCN@r<uqwAP+^IP&E-!@4BDOH|6y%wXokBk$;k{jEx=QeWrR2jRSY##a;M+omr
zp1!b%<YPf2!2*|Tlgdt|v*=}jQvR0iOO(dxdtUVkho->+m=buvfn1CfT;Y5ic_(K0
z@J*VYN~A-tZ+QuX5m$F#`Jdnn<47z*UIU{Wx~HwPMyDM5TJS8;$j(#hrV9|*uL<ex
z(y#`ieYvR@Rti3sVj74u>Qh3>>n-y=Un}940sUAg($8XuEiPhopYEl^Z!BK|6D4yZ
zA)CpJi3de~7{`7e$ns{%hGFGD@+2*?kAqlz@LLMIJyD&>Tlu+=p=U*>)rCX)d3Y;&
zB=fz4WU&V&7Pt_`d~AT2+#3AW9dHR?Fc2Jn>LqQy|5}D(xBOKf)8nm$mxvjNcY3hC
z34c}=JEpergoR>JxgmCJOLBfpHlCW33et|8op<QWTS53+`~K=?|H;QY$oX4>j-7n@
zsmrCgmGj^Z+5Ihy;bOznY%&<DkgJhzZRq6rx<mh)1+eda$fPaJ9>)`C)%4w2s<1VU
zOp^y_BOZ7)<uc}DTE8_4CBsXG>^S}#;B?*30dAJkiddQ|<wi4~;9$L50VlZS3cU+r
zan$@&3HiZYZ@PHfaC^b9YSOVEg&bq40$)!&BBdl6`NzlNu$jmqxM%XNt`I+A>n?ZR
z1*d!#!<o+|IL#?4czeqcezs1B-hlbSj3FXRP&iL7uLnhrSJa_2VRW9T|Dy&6O7+QW
zW7!7e^m$;2SnnPVS3N&Oe528zcz1_^7$jV^pjb3OcD#}Pcgi2Oh(xcup2A!bLC*Ms
zL-*`21<t@nCF~$I2Y=oH)e8)}dc(5zYubXb73U|<XZkh0NM#*0DWmV2hXx#K0OK2o
z8ThT!ctoX=ol27GmlufN+`bVTDu81W3FmKYYV2TWF$AMuO$k;B*JOPH9(v%RQTuRM
zFB73{gwRy|&2)C$;Cb6x`&iY>6Rp&;c$iJq8~AtE*~hMi%<zQCUyNx>o$dRA_l$L%
z(-sTU;b*#4=|msCPg`oPxQr>EXF6EeD#aI8URYX>p0u(FyRf87Z0&3(x4+Kduuy+6
z(o>E*GT&VE;|d<xLLylc+q3td25}B$TiAO$*vE=pl2vv8iobVn#{cu}c=kVC4l%JS
zia3az+9W?LuxW|8V$DBM?W9Sq{o3Pc8n?zcja0h)MOadtF~tQhTr2tPnM&2g;w+yY
z3TNhKMamYx|9e{SO#wyT(oUrsvNuf@WtryhV|$JlrCzpWv|@J{ps+X?d^S*X>7o+3
z`!n5puGqQhZC6Myt&#F{c=~*wZZGpa#(ZJP8cKOmS`|n#yf2cRi-)@wt!`Qd5E3ez
zT6t`Cv%O@OM!^nk&1FNHzyR}&n_-UO>Iv;>`16<6Pom0*jscGD8n0ea*8<2&xB%@C
z4Nl8(z#fgJRLr;dQ`?CcYQ7NDRF%nt1!R}UQtaAQ!aNxIdH$Wm*LJ<lKdI3weBiou
z4LJGWZNwu!SsbBz><n?wdc7DnT+fvI^(!i*kXntS+eF{Fq)zZVb^9P(@7mYRyB-+8
zM)Gk_G~wxg@F7cZGatYXiERVdFyo#HE1N^h=r0QzJ}MHW=cY`-l*?i{r{P8GV_W!f
zH;$rs=tU`YYFh%;WEB<ecl>at6mN-8r#!bnUG~Gk!_9QI>xA`Um)2Xt#p>Q$?#RiI
z-GTzrRMMztJ^_63jfm;CJJ_O)9Mqd)j<XC)F&fYA8xJ?`)^ZTDCH$pN2!|`zm+n&l
zGy^q~Jg91|nuG-eKgD^sc=48%16qfEj_Dl#nNNCuAkD$dbk+K_h}Az^MXOVu&{urh
zW_gdMI9q%NO!<CG9B*qAVr>6j$dV#TDF6uLdsDSCmiwHWPmvlxrrpl8MwbO^z>1gd
zns4mQeA5$%Zzmg`{A-9ge;0}58Hq=<HZxFHLK5&`p94{yQh=navFWBz;lXX!7w$)F
z(+5;tn4EosW52E>-rB@m5P5#&Mo(5@pBh;9@*k;~B^$JO+v_|C=dXBx>I(g+xR=-8
z(Rt-?-QkWX*0LPwOJqs4Lp6uz;3HE6#Dq__fTGbL>)m64(4h--B<iak83ZH4?tRsq
z4>9WhF!r5_`KmfgPapW|y;<q1-i=PgJYmK#CSm?1x7<(z2)n+fep$+><Rf3Zb>{WO
zUxk|bcs{Uv`oLF_p-ZeKZT%`rD&e@~G>xxO6Zo?l;FwSMa#f~G$j9)#4f%AtzvipJ
z)+hx|5PAr6?AE^IutmJ^fqb+B_H&t)&4f#DYU+bqYc?Rg1?feuS_R_#Btt^KNkwbR
zU)NJ|$4yh^aPut5HNX+Ken6!mP|w}L^M&e$McqIad~7Cc@k6)nTKh@PDwJb~3Z{di
zUxrmGiLP4^)g`r5T$B1sKhy5~Gbecw5O!EzlC-JsjCF(RJW_kZ0_MT)!Lj?9x)=U+
zeWznEeaT`kVdvk69araRnd0KpH)I%lZ-GA0!Q`Q(rT%W-%EpRxzc{h3E12!Vz3}Su
zGt=I7%uv5^T>Ra00qAI6HrFnts%g~&dvz||ewKM7f78EK^uupuk5nwSsyEnC0*~;m
zO<nFgzMa2;$e4VaAAPDURrcFUXB&XM&vAqO?3C$!q!Fq!$F-hnONVFmw`SiopR<xD
zodAu5UrL<<MYp5|<^Wvy?3x0{IA@-5hG?#BXK@CWkeIMWh|;(X`#%5xGq~r{kOrb7
z0Eh>-QvJf`94|BwodAy|uvBy10Y2)ZIVe?@v_3(IWl1|VobLwy(f<L1Sm?jF0LBV@
zzH7e0<6$6=Vzgriw4F}G&nd5Pfc6~T{(quCW~z`os8yJ1d7Z+@*mrgApioZoc>wQ~
zHYU3@nzuFT6iuFfA}4ZKknRjmVI`<LuB}7&b(xSxlCB}I!;=Pn)D`0bw1c(=r#m3k
z7x&D*yjIfjdJ68uCFIg0&g14}`&06OhOqGUu{>|x2Fas}i|P*Qf1*aOBiF^LF7<tM
z%<nw@ZdldUA*{~?((?U@C&!!b|NZt~x2-Fjjl$MAncf1PpS$y|yN`1-BYLUXg=}t_
zX}JUW*hz68>#gb_Bf^-dY@`7*eyLg9v=6YchALfLec--CTJFQinu`jE(qKDq&ydk|
z5z3jB5{F;lLoc1oUdu`oZadHD%)42Y`Lpv1<eJbGl};}*E66s>X4{SixySb}e5#>{
z7WcDsQKIMK{Zr3`j-%alUU$B1xsY8*lVy&bdL)3HZmTXQQtgO}>B62p!OGF+buZv{
zP7JcTxh7Xkk@dthV?Pz%NjO5Re@9V-jMC3Qr;x|`M+NFYr%5Of(=Gux7=cg%hCq37
zNs@1=H=nU3D=CqDM84f~G30~Dqvz3c*9}?@0er8vHI{7lJa?Y!A$JwIinOTT@xT9%
zDnfBSpCY>v3HR#QJ(pF;GSq*l67tuzP+GVX$O+_Na%T#%jjpkI2s{mX!4@;DKWH$)
zEwY$YPbZuK@0hy(3hjYyUg^TcD!_NXpQS}KK%#yw#N>Y8nL-iL02t9>g^LynDVL%s
zB+eFC6CJeKNM-p9Pk3PvlYcxjHThq(7&`5ASX;r5eVVb{Q-jS{Gk>paJZs$3NZQ@v
ziv1S(rYS0@Z$L@C3@Fxz$&x-YsC#-xA*f{I=F9zmaM6=1rd|7K4x%FSr92>lUy6oL
zZYFG{@eW{P7Dm`M>P18Lc_&pNTIL{E1}w!qbf~T1n}Wq6%3jgaU)?!o$5uE-+czJv
zJU5={`-yS=E~j9r0Ar94{uI1ooX~cudt+SvvGBBW$5g<#on$9PK|(!KV6k*bC`*o5
zpK$)|eoTC8Ff#J3E_U;T2M3owg|ZQ)^S?oyB#t$?uxUv`!$#7iDxI`cAzMf<Jf5fJ
zIN>3=WbNv|mGAQ2a}&(lun9q1SE6ht(z{X>V{GbHwh7H9Z(z1b$Hu5Ad*PYOm`MfC
zBvGA2f8eUrL8{3kIFtDLG{~FCiRl6z*amDmi^Ag0Q|7s2WU=8{i~X`fnV?_4wc@KY
zIiDAPg?QR#(7Ux0SdC43Pf#W(&Dmw7MWM!av3ElDzdv1MPuyG-24XXb0OZ83IsryN
zQdjr%MYediIrL_%W09<}Kp>NN7dGF}i*n9p>m@0D(E_i%d_e9Y*Qb6f7{P$*jP7X@
zS;=P)IZ~xoTHAEp=L68+Z@D*0X3nwY10*9Rm-~R+RDm!OjU<i^|AX;Xp)UH52%>^<
zZ1mCo6kU|WL-Mw#I(i|!QLow*9Y0>gN~OO+IPuB8x8&T>ZhrJ;lj{i#6B<vSQoU(m
z>ntv?9}ntM2&)Iu#E%~%;+C#iidvpNW?Ozdgo&T+EDHHkA_DJTb2WMpX3Ad+3H<4u
z<55q;ALvr&++3Wswym^`QQU1wN@M*ei{SUI#rjuV`{2+nDpL8Ey?;x=^)y{>wN<6>
z-oAX<(l&-Q_Th4K(T~^|W%D;!VqXACR8)SiZ6(snm>>K+0qpwbjc^pV@+5hq_Y@%<
zWX|KN8+aC7O*ZQD_92Yz=qCp2oK_pHJ~o~J>4v0gd4-QWPd2VLh1c5h&Xyu>(+V2z
zF^z}GOCqn!Pr|69MlGH#h=~H>0QxLY3E30viA1)VK@flf&;mqBouwFQ2)wJm?Cj7D
z+#jR2evq4w2GD`CHL~I_mW*HVE4cIj>{qaUY<^5=jot~pUc9kbZvE%^3on6-+D8WH
zboM@%_-QWBqe_LBKU4`~=6)pV{hw`#@@9EHg5NS(vVw|68xUWJ9mXtrf8{9;tK0@v
zGoba;r%R0SV#RO7m)QfE5viH;1qoo~G(}dq%`N!dN|Md>vhT1CJ&lFeM})HFu5!l+
zf2!d1$TgBScwZb9pPaB%n3%HM+$T!sM(`iJVlRGDO=}^(b&Hp=D1?E2?~+8@i1ebl
zLG$!aQ9XGE5&l01bw`%W432)##WomW2e5zsAiJ>2*5z3K`&&38{##x_S;o#!q13)Z
ze=<sDn#$s%*IWHuL)&CIotRdH*)6)8h)7~5S0K=e^V<XS(C^33c-N(7FP)-n>K!e#
z4KA513^v+)DfL8ra7XA#j;$`&^0|w_t2?_lW&X=cv^c>>+TOB^D53L-<IR-U3wgp9
z#u5DsbA?Ol;^dStIL=26XIADRtvV~Wt%?`)KUp^?TS&Xs6N5n3mcP@tR;h$%E~)dB
zicfG9j{w8LFq}%I=HE{=7vuqXK=bK5x>OVZyB8xx*dCIy*^`vvTG_`~X^6&PhkJ-P
zLsIsb#xUETYF>B!Wka~=>&e%7!diJ^Sgn4K9#5wK|BYRD76kussFY>gDu83Y`1Zcf
z`h%O(BxCGuec8%KyFpr*HYbT@2EC3yr8=#W_^Br3_8)4q#);!9%U1bekc|)&)F~0W
zrB$-Nn<IEo-V{IaR7W-?vfJS{w=Gdew(Pa1H__DyrP$h*RGunh+S$x3vn{tJw>P`q
zv-vF;MM`3a+^dQz!ojJ|gDV#h2bfm^XOe{3J6kBU9Q(0i2e*i{Ye5b=N134?qJkEH
zFsOi$sA_(gS~`SGmPp3^X~T>A%yz)jKL+gG(N;7&;*t*H_f^9^Ck`<Jv#KK`dIHbR
zsXqRouQsz2lXLQScZaEy{Lx>M8(xr7gU36Y^upFh$oikAI#$DxHPFBSj?y|YOPOAu
z5<7pwYBQ4l7Qee0Iq{*JrdTpb_KjX1&<lxZ$OU5i7CO6Z9B+l9jAsQEm%SawbAiZ_
zU8Fq+2HxOrVvJ}BeZT*yI-Sst8Ccl5H%}{Kz=0NQnY-2|m!43*U}RnWvnZDyEJ|xC
z3%0C0NR+{)e8q04;);7%LlwwsC<g{ZqMxfda$f9|%89*>ee%o@Fa*r5l^znY6I9dr
zW}qE=Jt#=<R-I5ap1JB2&3$#~HvKl;2Qh4!|D=RG_SG!dH#O^Fe(n6~-fx@x7g#$%
zv`?6d5nU{+)0nDB{5Cqr<)4b~>Zp<cGj$8Mg<G<ga|m8d8Ve9b$zA388&1kisn;xV
zaw+xaRA^I37Exo+uqp>XwM$Bg8j6!6vOlH*?8EFMEcfwCIk<GZGR}MEY=6xQGM9dm
zG<8bLp}%!c!c<~#4q;}!dd$HUPf$S0<E`juCJytFRt<;#_{;Qnu2EyfB=Z?OSa~-K
zf$-uB>qkx%u|=P&Ln4e4Dr3?TH|>grpP=E$-0Hx`Q0$kEEKCZ?!O5iDNFxKsiIT+U
zxiXgSW<?K0R*^cGm7c1wN^DB2Hp}}lB6s_=_R)#7me2Q?-Hbw$i#hh!9f3B^bmiSb
zwB?`TZJ31Rq_ujyxB2Q~#nx!%AHVBTLXX8yq}@O?y6F7FUU^S-nT+ONUW0gm|1m2R
z$DoxrQ?h%_jB3E5b(ZdvzrS|@9y>nCNk;RJ*DA3&ct3@UljyR`Qeg5MSsN}R)U2rF
zm&GN~E&2<xP5h-c>%aOtbAeYOquoVDA1Ezay51~H)kMlc*>$xQmk5TaYlXW9h(Hvm
z2?ddGl~IqF%fBSj@A`jk@sRWJLH@%RykI<bQ0Kkagv)IMKEOs{_l*g^rsuC;`E_0O
zO|MjiU#wVFp{f%i{8LS9kvj`wuq-ang~1Xb2X-e2GOn0G7crScwOXD9{2{G(&=V@i
zb4V2Q+I2V%%GCwIpR`4PN@O~J#f{-xUyu^6PDxe1pNhDY^IR1heZg!x3S5eVj@PBS
zI4x|}3Z57@?>$G}Xe_`w#k92*nV(}bVv@+YJoQhqF-txEL9--)QErHLrjQ7-g-O+1
zw~m?yomLk}%kybJHihy`XEG}=P!jCwVnxLDQS9-v3scvVY)uaup|C$Jrnx_wcXQT>
z8R&`0{G|7b`+;G7H{X+~)jVAadUei58<0vpDmu5#0v#MWB6^q{%%oLBR9Ce`Qz!a%
zpso7;;8x@A(hnG0v9QWE&tC)SvdZ)g6h$r_cfk13oms=R5hA`yU-{DMLZb^7!o*J)
zn&7Sl3=rg%rML{Oc*dI-TF+fwyqSOSuLYf=;QK_TlO=39oy4|lQT`eqq?mulH}|Wg
zLn^K!5K5SnbL8Ff0kxPaD^wPJG5#(wS%btiMvjO6Us9I65z<?*|FeLg2(@HF;l0gq
zKKDy}|8JD<T`?ZBU+qdDo>2MzpLO_JJ?9dAhj&76*gz68<sj`>@amA)qTaj;1IXI8
z@wPnuD~E8Q1kXQFlq;o#C9AXbBPK6`$BhQkBA><GynW8Vi&|oWG0I6>e(tc!^3p&#
z{j$r*E<WV&O?-5}D|WMB=EUMdf#>`}m#Yr+&v643qv8c=9f6`v(L#+sFD}oQO(mDl
zo;P}Iv}J1BF5}?UzT;aL;Lp4NKZkN=V1M5>KWrqJI*X_qD=hCgtv>VZg2x8kb051m
z9BZ?A-4pC><&}3^+uqLk<K?!_L;4@RdK<G`QKFVVr8>xbS=;gWtCt+m7e*Y2qRW9F
zHpVEcoGHo2;=_xA_oiRlL9-db#P^S#)iR=11p*0ENBcc=(2k751L)vOaSE=y+mseo
zZ5EUE<oZs2{kWM65E<X&!jO=3g5#5OCwf9>moCShMha8xuO}E^Xf8s;InW}xO&-!>
zQI!EG85R!H32hLk|Kf2TqBnKvv!opBO)LeZdA|fUNzQ!+1EH9ju*vW*TQ*urK!Zy@
zbMQ%Y$#B&yXbvvKzuXP}3fmhR?|(>Y<{FKdFt4l$JqQO{QVi*W=7pcAdC?e&=xPD|
z3Y(R3N=ej!>cF>~uGv#f{I!qdSvPTs+fKnu?DFvC_pzZJp7)6G(b!r(7E-PyHr=*(
zSpJ6iQZlSqDLAeA5Hsoda^;Ebh#2q$g^!%81?N0ClJYzhQIr`PKXsC`%I10D+PQ@O
zrx+tQ#pGZ!W7Pq=EORkRdsYq&KRh1P5qg63be;ce@6K!U3+Wz*hFqf6jB2~gvA~Rz
zK}W+g3)ywSr;)OrZT>|mZ(R8`gc%xfu3L|o+C^|vECG>~<vR5iCi{s$S+2RH6Ys7Q
zl=mI7NcqY`BKkc|?3}9boAC_Zldfg9wn^XB*K2S3sFq~6C(#oFET)|B3ic{1D@36D
zGcz!#BZfz37ax9Tf-2rM*I-aVE}1jl^Rl{>H^>%!t-2`LqHv+HUsU8YToKH_)gV;?
z!S>jNiNFjSf9_{{C^<jJ0JRVUEl8kQeJ!uhofFB<1}Eo(5+LmOQ+1M16+pM^&x=+@
z??3g|_Ck{z6o{|5qV`qN)ltI$J|P_R378=a&j+*mSln){VcX0hAj|d*v5v@>_p1lg
zf#3-^Av=Qrn>1Fw>uEo)w4uY?8^%s8TeAP7iis(diRJO;UlxHqJwX2pm_~CEEnJUd
z4UB=foSlVV^0M-F&GWlNA8;oWO~bYUU(HVc!xsXcFJvs1?<(pSmo^;FJPk@Da?a8&
zsv|nmm$jT(xToPZGz}eAk#dC*V;!M;jaLu5FE<wHJdJ#YpM1*)<-%B%lJ^2Vc|@(l
zt}Q4(K0bcRJ^s9r$V2ih8L=lq(bcH4$U35GiS7H*HC_=J?;oG0)TZI0v~>}?`<E=;
zr|<4o>mpGRqe2k=_}h{~az2KZ%`{<qwnaP>%4GjgO%fr#vTM&13B0%8EtEeRs@DAm
z;VN6)$$!*shBtXwXyUv76gi6|h5=OAzkR7|hRn**_KwQrcRKb{fl+M_F#}nzUyyR6
z$BK8+V#f*r5w&pLOd6r_rg(xOZg+Jkj$JzOf;@z5<g~i-0kwsV&D&lCbBf46XMmc?
zJYP1$Q^RsAW?D7vqVL3?+0^Xk%c$FkNKoHmrIH=5A7_Rhk5_}%GM2np#6E$g6?ODU
z;hjbsP(k&O4*<M@CkBSV#a6fhwP6{nWLLbkCRsPz3lbHsLTq>ei?T~^7G_&!VBHvj
zxBQi8Yw(uXaPQ=H!Ye=6-CinR5N6Ez>9WyMAw4(m4|#yxG;qaNfn*P~EKE%xz7At8
z3P0#i`V4OF{p#7T0?X^Qa2ls8!K)J)<EID7vv-ap5T}(N$niwW`D)b**#I%9S+4#Q
zG%cHG4nQmAWM6+@Xr@ELHWn$Hc6T}J7(aQF**js9==g+B4#w$5?Ci?uJc0G<XP!+&
z-6~u+{;V65r?vU0stCxVM^C9%)9l>TogAI`nN$kQu{=22+@_<SSznYGLAlVZi}AO*
zA1$U(hZgdHH_VSU8MyuWn}aWtY$8N0J|$XciG_*Q(uGx|ZKl!}xjGMYTdoJ|=}D%8
zY<K-)bCDjqc-g`A=-gXZ?1Qkyw27AA>x?aKp@Rp=CDmrz`0VU7y!+Tdxw)Ia{G3x{
zbgpjf(s9*i`Wxd-Jyq~C<hCAFUh?+P$vJz=Vt%(#cdErI)#WG_cC+Z-l#5;iia5h`
z2vM=^B7GULwtM`mc+vWThbZ?=V-7^g&c=vDcSFXb;5IKJf|vwMRmf697?0;(zauKu
zKra1PIn*Dhc&Co40b$`po<g5z-GF@^GOycvtNFqG@qFc!+Ip@U>?h^{9)o98c*P?)
zWd{uF4gs7y1L`>WKW9X)azwyE5x+{`&O&rVE|hZVlMN?fw`;5s_4X7PAwQR&(ZUT3
zjW_9i|8su}63*z97E1p2Uqm%5EW2<gxJqHjMW2p@6L1`VZ$DxN)vNYOkI4CF47s-=
ztdb%%3rB7$c$?r7qfczd-&DBHBU!&pmrA5RP(t^YowhXE6>kj9ha}}%6~{7<#Y=K`
z1<#z~a=9;r2`Pq)=bsg+KerB#2PSVs8Bg9yS(bjZyqvW$CK!WuT$(Gqo+iB??5_s*
zhHlOPmKm!yja_op?qC0l<6PfU#7SXLUT}~-aYm83(P1gcdJgX33;wmjlN`EpCE}6O
z`{hb&CB1|-Liok<8zX@FOc?JU`dbF0cD>~DQ|v!vo$ruwW0wc2EmnIS_R{;;=54bM
zVl84Lx7sd1c-a*dd<Ee(;|NER3%<<ci1y7!ds_;1YWpJNscB75!+Lxl(|<s=d&r6f
z3nuV$;Zk#|*-L9*^&RNFLw|u0Vu?%!t0Y+qW>?R4xlv@WnEf)|hn#Z!5hjNv3|Q!D
zVdX*|Bi60tc0lz7e?@>ku!b!Zt3ULop<|(lFOb@Yx?RcN1AfiQn#}wwxTti6X^&~(
zNB|A^iKzd@@H&Slko?$eE?f)vx<|i$Eu$x75jFZ(e!6v3Vh@*Imiq%e?bLdgoPacZ
z{~p+tuLeJIi8PIPqFCn(yD~t|=VlQX-3bR(O->8xVxf6_(0--bEyzlUy;`4@PP&v#
zuID3SCxO0wVA11sC-~|0T<W&VIX3Ezv8fkQ*BURk=;xfQ>#uFXo=2c&ut{vCR=4Fj
zA`6Kgw|g$oot$_*>VgMn?1(|5MC#j6^>K%VDigix9qi>E@9iY*u$e}eKacU(-jvm?
z3nx4<oW&T#Hm%UbZ#<T!<rBSpB5Mlo({{{AaW!r2G4Cl8cGKFP+VirLRR^aJxsYrk
zg$vXAT5(ab<?{JLWW0aOR_w2KFt$@yKkr8D@HbMf4-T3W4~VE*2(Kv<8S|mFWmTa3
z2c-5TDgE`m)DQCQ!o=XKI~q@Eq1Anh3lA3i3$V~Fw<M$B6aBUlJ>}cKwa#IUqN8MO
z?hcfeD97_x!~vp&EMW(r3M?NHtJp_XatT-Az&WWD&WUTpMPicEw-I0Xkzd?sz?eqY
z#x9@K$lCl{0ZAggz(mIKi%5tdPNH=N$fhggM1F|IG%}ggLV7DINgDiL^`wY@&C)dR
z-J5__^<!-7d)Y*&+auF)unJU{%9M+11k9@O*zSPptiy8d;<dor>Zk0HDyW~BYmo==
z{muffJsjQaVI1%V*5fo7ps}`3O0iD0x@R@K#CqA_b6SO(?-^qQ2E+<u--?n?<+q_)
zBuaNu!7qDDv%DK!zK}KLa_>#`OKTxks`sRN2Q9wU<eb|{#zti;oe6(NDI#P7)7?1Y
z*1zb8OYGWm_>ovMb~|PvX^vx<15I2cbX};L-XxhYLgVszg*3QC$0#TXTROpaK7{Pd
zj~)BtJQn(ZEg>OcSew(W6FK^!a6Emg0=qe!u;!bk;?<_J?%%CNH@iumyzSnQ@_vmN
z@!i!*_wah=8R-+4#JOlCV+QQ4`mTGvg-RF%?6;Ad4dx&(vaDF~wlY<_x@)xHj#KM+
z_GKj*Ii;oht_)i7t-*Tr)HTGmV#=jtT;9puGo9YDrNks7krA>lO;(u)@bE#*{VZvz
z9B1I<|I9@}9AnFIaDa!o){FzXdNk1mDee<Z>r<o{qx%l={vxQEvFA5Y<9(G8RykFF
zBLt}SA!3utE&SjGB50U|y5X~p<pa<hokeFs9N5LMSQhwDRwOIe=#&)?H6mB>qHyfL
zMkAIcM|8opRaNm9gNgC~Oo-4VT{kXFkN@3dkm2A}1Q#9w1=u4s?RDcK`<xSqQ_2rw
zp|H;&zgSZtDY*e`CWc|5qbg{(QY<Yh?*-ry3OD0$r;!mcN+Bj)BrR`G<kq|?swYOq
z^K^qYh^L_>dY@L8)|{+w<l0-UjB1>7KJ}0DS@!CCJ*H^fh20CyKA&8)@~cOkD;poP
z39zc&vyC4DygC225c~m)I!gUh@-|9m%;C@+PPZWjR1&Ie)gh`<->aF02Rt5?=Aw({
zROxuI{lw<zsVn+Mhn*&W=Vs~NB>o}~%U$p3e$hSFT?f5r?`n`~*HNwGUDAY_>e4DG
zA1re<@P+Z<Hca04VI+2Ra}j}rK!%~u!cYBrv**BgOX2+MG`w*S^@(A`VZ#{~{FfMq
z`vw)qR+_aGl=;rU@~q^kkpK@)C1Hj_&5Df_BVBN3u||8>L&hLwy;1QAl?QYZj{3s|
znp+!vX9IaU#F?aNCFiE1Uw36(XPGHEjN!qNLr3Eo0-2<k_YsMwrG!*}s`4LXjW)<h
zTxEzFpaAoE%TNTeUHlXd1W{#LLZc5b7{jtV#}M0VIdByJDq>|t1<1J(QF?GFm#TU4
zy3L`dVIt)r=lpakF6zuZqF>Y{IVYXapaQY5lA^JRAsD+28GS8}OkmaED2lrqA}o`l
ziY~}G5u|%?$RE9?uFI=mWNS<)#z<R)w}7OO`nusZXt1Jup2&`!-L_Jcr}sb!jr&+F
z9gkOb(3=y>jUdYv!B@K|vf`Mu1g3K;KPWGjh4c#UL{OGfF_g&2_|{R?^IasJSE)JZ
z{<c$uABp{5S1`0D9YV%Sv)(dN$|9UHS39Io<bS-Y390TnO+1Yh7nK2@hSZj#szl>)
zC0A4xb2OognAfL&KhCP@yKKY9CeM^%&rDo$j$i_Q#UzO*-Ml(nNXVCN_UR|JuIO%_
zJHfp`Wz)kqV!e(sMJSz^sr^&V{dvF$$#(99^x#L*Y%@oXaDq&j$ku(l$7;sYJ|yVy
zOoARVfsdJf{mgoYs3p>;ZBKe)8s2fqnQ2vqA}XKO6DT&%6D`ht(8_6h*L08l!Z_j7
zpHROmYNDkm7r!3sea`{>i%dQ4C7PI9#9kA=rmFSO37sBnK-FEYvW4h=P$?asR|&DK
zSBHdyzS771oyu`*DLGbF0sEWb*(6J@`mS7@Wpq;2t?pJgZTVZn!x~IeOl||P6bi7#
zU7l@=^GdRE)g8@_ul;jUN*@#AF+Y8wUHNeZU%6Jh%bmin42z{~^!)fr#cQY9?OIqf
zUhCWdhlRlTyNl)GJ&mRll-%`db<vjyp>$l^Mu&tG+}6J*KhYIZgxK+?oJA9vD%ual
z^9=7GR@&mWM4#OPy~)xSn88m_NFhFRIc1z5mf5-{Wz8#dw3RLr?ReOWQQ{laWr}{4
zN*r_86HT)YKI4wPW^x%Z>?-Q|1ZBcyENoC)5++A$78NOHVZBoWvlvfh#jz<+gH-65
zPHNU)X>3&~0U|DqHJzHDQnf*L&&n%N!5!BUCqC>y6tv@TLRQ2W^LOULPE3+hZc*v!
z1m+*y;Oz*+Nm5J79Wysy@P+a9daEA(_D7{o7yfvKRu&mru`(>}Z2g}#WxV_zi@YsV
z6%Ae1Lak1i$xM49uH@2c-&5x*c!fpg5smcX;$n0E9biuez#!-23m>!P<ulH0oe#@s
z5l5LD4O`2hxdFKT`5FH2+<U`viIKCoHcw=I_hUyXLVp^dzI+4=i=9=F-4XY&kj{R%
z*1_=$?Fa|+11@QDw1^RLQ;+x)F<tjZqF>y*=y$JR&ALz}xNY{?Z2nGNtVlXhJSG(T
zm_s|E5pDA?Qi(nL!2Hd{@-N0-6bg?0R`YWAm&!CP>}cfeI9{0_m>~ZFaMqMPH5gnI
z%3ZifmP2|SRTKARci|uIE)!Jyq>rhkPedhDLmMf2X^s*RJ;j!h?GI3Zde@6%TTNCi
zw*zVEhStGw%S=el$@t)YQ?T+ziY&A3UD2N7$0nvJR&9zVf@s2Fk7SD8#O0T3M=rk+
z*B}PQqM>)E*b-9&&1TYY)UB<vH#Gu=+&%EIfJPEYhiy@STEKq$a`T1X(=wjU|2#U^
zEHgB5|3eQYx4&&;RsRPV!EE;IC?xCu@Z2RKHOc0&xpKMMYM~`GXhaO9Zbf>ni4TXz
zSf4)@Bg(uVJb8G4QQLX*l2GiyCGN8pHNM?}cx=>PzL1{7ds=2J>p!5g5gV6!AAMo;
zNL%tY%JPt1x(DAxh};|;c&hGv*PpBMgD2i5Zjv@ffp|2tfUgoR2*;Zkc+&|8?^F%4
zB%Ppxy7P;?i64T7=mEK*`j{Vyxd9hNoSz1^K*Ob3V{ClG0#{Rvkp3Vjkm*`v!jkq^
zcwMpT)&|W6WLC_NO)r*DWFP!emcG~86Qw-3x%U_xtFr=cNd5qC=>PxG_g9wODb1qM
zm()*$m?*9;_*57&Sw2}A#giztr2WN0WV~CB$Re1)cS9XXh!!gcQgYJLpE(?gPGM8~
zUDsey{e6*8*Ug<VBfAPyW%&BGUDg9}zVvNwL!l?PuYFz!s9m)d@-k#ImjY%S{*2xj
zmX^@BEamh+!tS0?V2vjXEv%NkYL2f-A{k3Q_d-lF%#gg;1hJX_4d&gB--2^<EfnP|
zu>SMCDLMH^{^lPDT@_(kwDK;+{r8&z_MOLfkh5lz8LNVWu7r#=>2pO}N$q<OhzGKs
z77v6YG<q#T7imzLr!VV+_s@+f7vo1d1%>NgzWovDz{19le`;JMaflE4NNV2|4^JIz
zUJtW?;pRrP;$E?0)7tpM@!@%ei>Fq7M#1&-D6sG0aU|kr^qckZGu3%ozkEl8<yUh>
zF5svbDF|GHR?O6s%JUYoy7eZYUaV5+=xyg<Pb{mb6xYDSS9&}2Hc<AuSSCnuNd}VX
zAAqv#0+nD8kxO1L-y!+j>N-LBuqJuI4c08R;@&YrP$hRXzNTBgLVM~aKy|7=U`<40
z(|PYVzmLrp!8aXxD#N4BZ6KI|_2(^mZw9X6{s?dNpNM&JkKkIQ1IpmF%WVMuZ9ut0
z1&rS+WJ(lwq-^BcE%Ofmybu8L+#g`=;KD9(2z!j23oz^NLLV{pZtlnO_O&BMrLq8O
zKFdKe5(jn|8lYc0GW$*MS=y+38c(y(tt((j4EatkLdLpdZ`17k$<=7M@<#3^UF2{s
z)N^0f(^%Jpoh1b;P0^bO#J8;GC>`d0g*GjFp|pvVb}DN*lYwSeeh;chKhB()F}S*w
zfdPItj%UV<I9wW|<YE`FTGF-0fcxQLdrRy7zWSY`QK5FQB0Td6uC;OD>O*($Pfe-u
z{cVCjsIqSWi}k+Iv|FbWDyfBzVcj=nOcO1$K;<}Ee0KxoMkTKh(Q9bnsJ~%xq#Hp-
zN2kqINZMTw4UFMj@@;}nouTJIMl@b8{50{Xe*8)lQL$}2=8}oq5b83HO3MKp4?Bf7
z-vfe^*@n&gbsm-Gd2vOXDL5CzNw%Cam;vdbV?Q?MN*2naX21^+A00YZ3Az(2;n92n
z)1OCUUQu8HB#XY3E+xkuMQ;Br$In@-ex5E~rWm8#IH`ffYN;WShdhF;g7R@EIO_>B
zs%e!O9F2d4%pfz+Dr`#WCX)W7?^FCp7}A>B+N;6JVj*$@%eg#iYzFOyaswN!Gw+@R
z6NcaeDxA+JR1u}gA9l51^NsRNzg9pvAwIW(^6rn;kKi?cFZ*7&{?DT#{!amLN(gX;
z^_M++%6}xrMn>oVNCZF2GPrq!-#~GR)aX^&gh&buKmSb%sn)T2p3EyLmaA+ki;SXs
z8-Glu78a}E68#0UZH%)93A2AgT!~ES9i6tEi*yY4t*I=iSx9e5?aS1qyaA)YvGTIS
z<{zW(_2FSBL$_SK>zn#)V}dTZsuDovu0mf+LtU#86RoFV#foT;g@T6vX!-EB4i~%x
zD{3Z)F>5-7+w;c9cZR0wEZult^q)U{TYo?>sDF1!CQ4?UXZ}B`-UTe_>yID*HdnS;
zQdwC`rRK_-rkR^5Dpa<)vZ8WjrbcN+PR-Q3gP+QZOcPy}H7{hY%vln7%Nt}~ur$y#
zHE$@Wcn3t~{`ve4y8ZvZ-*cWPydXUfhjY&R{kom!+`Yd%usw&f{VY5$4;f`+9nU%b
zaALN(n1&YP$zv-pT|hn5jnBhs#_X77J6>8bYOn&ZHFWJw(={1N3SwcMlXO+7D=;ec
zdfGXbW8fE@B+uV9;D8V#8Q9Ym!5O1f2`l?2<seYMGkZ#vqyGgTum2_#7T5h<01AL}
zIQdvyvA}fKY@RcyIRJj9tikc#&!CxcGx+)AnN#>TsJTj2!g6#aL8#ed{G^B{jZ?8y
zh9WOOj<`#>>k~5i%G7S4^BqvM03;k>WLe45*h#pGiCztnSXf7}ZGh#>qH9`YEGBXv
z$}Bsf1-D}Me4jKe!quY|%59<kHl&;>dH_9uz607K2*O5!FSUF#L6!4wcNSAm6^=IZ
zAb`5bWGoyU0Kbn`9#sE4DT0NWO|cN~t9ldUT_M_7R33%kjggf9MK`Emd$b?k6O`SK
z-*xg;%cB202^ikp4e|I5%yNFKNMtp_X4<;X9(CbL+}sK2BjO!~pa&W-0H|pB4GZ}g
zo^-hg?@b<Sp6GxKc(IYqGm9s`(BXU$p~2?YE0G%yM2$!%1QeNP!yb+Pj?A}%*`q&o
zCEbiwUaZ&}`GwhV+(~(5)iiVWfncw%#kCo><m!CYMhSUSQQg<Pn~ASpx7E=E7u5Z3
z7~3n6!*5PV_cZL~w=O{&!;EUsvD*VAUODKtGu+zG6WFl1I^?ej9)s0}Isp=y!qgQ_
zy2x)0U)D-hsaq(?y+W(LB4=+Tf0qPcM=E`ujGibT8AFU|b3}2<&3CN!WDyRbslc@_
zQz>)2C^+hLWIY2bUXB;yg;wKliy8k=!}b`%z%hQa93UEwE&$bV($4K3__#XEYbD!>
z4_c(qUPe~>JfsO!19iNPFAX0D%6_W?^;zS(cg1_O8bLoJtyb`T=26%ij9wXq$y%`~
zGvYeKjYlXjs(DlG2#UGsyW_V+tBz=odE(OXYgJ!q1!Yl5+Ad2w9zYNo{<vQCNF~F$
zg6>R*_J$MMEstPaf)JglMC2k@MZ-{qxYxtH567k-LL1HDf3O-(8Y7QlbmP#KO{yZH
z<Nfm*d+7Y<pHE9ffgIoZvIzN^GkTwfjj?mUX12`?tBH`h=o_*3cH3tc3ar}Q)Hk^;
zUu5Wzv7Pz>*Rqki?4qFKD9@xA4i9@klV?;(_;r~$VpXK0^k(aY*QuDgIUlD%atdZW
zMbMLn@4flzABxil&CqQ;8Ut?s`AeR(-`=|A?AhCNOL@cY&=(C~o>6TDSA|~BYruBW
z^S;_QvH!6kasW?aTdV3`wXF>toL7Juqr#H~!A(ijV<hD!$t-<mm-CV=Af7m_WIU}5
z89Rv7#F3C9W8LT?auIPquG8lb>B=*so#M7^>`)zH0zcrpOWoShN>i|AJKzdV28Y&Y
znDHf()r*rdN8l>HKIhvJQwe@vJOnULM!O?^K^{bZ2oBrnU*^>x9a6Ff0JP6)g$7|+
z_cGSlWc3K{{3|R_otrY`q-an2_I(iKh+Igp8kXJR)A?2c%SP=3=Nq)(u&e0v0&gu;
zr8*Ug3?cy%jwT~cqEw(XLXDq{RKtHpOAJrHK{Sii8ZWXr+^oM-rD*h6R?U;5cg)E<
zW`AU24A3zvZ13+nd_9Of=Zo?bZ=8%r1%1F*h*KzLJjs{v4A;S6<VY^zFXYHqG0jE>
zcAYmZgkJq0B|lQK<n2z#vr75Mq|^l!a{58n@mLO9atw1g;D{jsX>eyN{83DD;qQn(
zI-Qlcu2%H@7WTf(LE{3wuh!Sw5-b8Uf5llX2h~@8mR0zJnce|BdMn*n0?ubcD{R=(
zUJv%Ixe*sb(zz|r&s6MzZ@jb0`bS!y$vbbD9gRr*@afhTWH1BiRSo!{nR*5$fq}PC
zK)lkf9`$u>Mfgwj{L;&%ouE6=%<O5~WPQOK=XqG|?5B3=ezgTQ%H27mf(ZlW4vnSa
z>hl>#<ihC7NapFX_TLt^X73h7sPZfh5tgY^q-gU@R>xoOpiGu9Gc@|CitY4yVKdIW
z-&PJ~g<5m(csxKdusb>8(~MLC><+sx&{gV>_8X(p7D{qj#S;-B7p<+yhfj+O9-aqF
z)6l=xvGvWnW7wT9(&y*<+Mvff<yP3PYA3hHqr<&$LOrQIe>aj-PPZ5`ttlVXerx<&
z*5(&fz?7Oxn=-@5KR0rC976kT;S1G=`4^i1cK(IrU!)zy&jJrbMT}FKrDCV<qMV5U
z^SJGd5y}=6>0$w}c?Jsc#;<whn>GE%d{Es63FSA8Zdjn!r6$j1>fmN5&z#QJwU#_B
z=QptR!_XRtLQV8_#vfFOUvPsr?&@yX({P|&q^2g?j&vX&o;Zv*IOw|yt@L-^8}xNS
ze}t{*<CRvs)VKD;zT)h?@s{}dU=KUiRh8CIlifDzPC1r)^b=d}Iu|*B-K_sqO>}aA
zeVhXF@{Q(xFkB&6OJlmrXW~WcV4|d!ZHpqW*gPFzDfZrxAKe__pQbO_wtfTI^2pGL
zGolYMP#e(IKn%D7<5)C{3LAdzbbch_biQ&1_VXvwaHNYIUhu^YIOa_}O|FCra1$bV
z!$(;T`5do?<p~81IG`pl$h-)&CvBn(Y~L672^?CecjTohAtV%yqD9c$VHr?~3BMZy
zMD%?=)j#tJaB78E?$)lm!NeoryzWTc0BR~}N|jbS@(~ctb{%`bEE5&7`|c~9KZ-<s
zPsu>Z4e`(g<WFGR#?5H1b@M-1J=dPZ8*Gj|SU8RsU{XDy&%ELrGoo?>%5M0|&}V;F
zb&Ci;@t#XULQpEFeoJIP_N43YDTSzyCPMUSu`E__P!o@KN5sP!Q%C~Q)9_mUh!4ua
zfKZV@PLA#z$o?op4^0qW_&WBR3e}858?a#wa@lrLSP?#5xSceaa1E^IQN);Fuhe+k
z+iskxeYQ`A8$Zf{>!O>e<x+P;`+C00430|;ohVwb`}Ygm+EOG{c@sJRKUTu!6*o+u
zxjp(x&}oJ<{-<eGj9n^*v^3rBgjvFQ+#GpIY)rM%ttwk|(cjI3U0H78%eH;pdF^?E
z|LDoldqtbKkl1_61o_1HLszzKs(=3R%PmS`Xg0nZ>}Tb#lX!|8bFdQ&)hWS_Z7E@g
zi_Dmz?YDfNF2@c=KCht^?a#9$sf-;e{oK|EisS+Ng!zeqVcQ}|Z25W;d-?E-1Vd~V
zvrjinla6qmhLk}X2Bu(ElA^)MdR~+whjHO>hX04z9UboAv_^sG0#Ve7D@X?Mrewd2
zyM|ThGH0_IX>y2Yzds4vccj9Phm>RR==|6YWWW7~x560F0TFwCmu7>tEONSK2`cu#
z?1e8XPB`KM(!inn9U*nT=vt8ag_>!<<H}!Y=X=KjTry|$T7*KFB2<P>-%7BX*RLJU
zd@xLd!>>?rZ_6B@X5mV-Q(!VzY#QD%mU<LVx^e-wVVvmDNyqqpeh_|<Yk!g^AK6=B
z=_oO-@Xeb0oGu^Xlt>NHF=HNoczV0aN3P{1!h78JUYIk@2_!8Yu5~}L;e#au2oK%E
z`HkuFuI6WQF{EezocC49Zqk0t8ZW}t!w&<MW;E=TO~&@Byo5cyhyG4{^PqF!rnDyJ
ze61mI+Kd^dV*Em8(-Jxl{S$a494ML?hrh{sSi-2WQJo&h@kI-E>xM8y;p=pMQUDsN
zMfirXzjyH=?_Lkfxd<sOe8k<5>3b6y(~SF`dmeh*uSNkbEe5jG=~@@vWA3EE$L?~U
zjneh%cxNY)<3mJPe);2o;dmh}dR#QK9Qy}CR;#-^Rt8?2_6`-l<i?J@WVNIHb^bt#
z5$ty$B6KPEjZ<j9Cr#7l0JPm0sB@F{xYmvi<FVe~-piIXh|nsh0~`J#iM-_PL|mA4
zvLE>CE~vvKBxpeqUbabFv~lguQcW*9-wSG5#8Xb>POVQkI4=ul7gKsRXg7j7bkB-~
z$J+fdM!$ep^tGISMbWx*S}ExrR)N!C-`06nlz&Sut0(l(nu!7{(U7~$O4IpwhKxS_
z-~}$rm==4b&f~N5VGoYw#SbmS^jI!QtblCZuH6Y#&wCrbgWkF&VZSj!`OZ$X>F=Cr
zsfTN6VMDpg1Fxgvoi$Yoe|A~#0CW>67M*-#Fi5(93p1(z)n3x#;_lS7;%RgnkP9?f
znO=nq<A=Vk&NQGUwH%$PVW&uMdPZC;yPCX)cpM#lPnT&G%w{KPl5{QLYhP`+xoQ>9
z(1ICSc!NHX{RYk<cO}MIzYWc5YXR(}4mv9EQ{S!~wv0sz<YGT*pm(6A0~<C-7-$Vb
zhq&RHa*kj-;&6J>4tqfO4<b|KjH}&etqbC*y<m?|p&;L)%N$5Euj2cRu^3vldn^r-
zgBmMhs<;g4m;;mS5QBl3z&3&RFzYcCWg;IU;4F9=D8Uw%;egi!OlA_r`z4S9FX@mn
zcU;(tc<a_a(Jsbms!b9$qIULflC1==4T`E)K(KjF^+c^oG{3tUoXG(Bpa~`b?*I%n
zGn#A>iYt6#4e-l`0ww(ap<z}e-#_1&zS)(nb>O@dQOVE`r`4e7wx?j@=o9&Bd`zkh
zY`vwAiyO*hY3e`0Q(t&rrsQfJoy!|Vr_KS+2fw#oYG|TDy>K8YheYy`N61B#L$f(h
z-&4zlNQ|5W{UtqT(TW)G6c#Dnz=&b9R_KS@T+$EdY@<j60+OS17WE0~Ov%_4C`94C
z#yXb>(prr=t#m#A*KfZkb7<YxfzhJl<nJ?{SQ@u&iW>VvHsO?MfBt#gwG7g^I@$Tg
zP!d2WbMT~qy{RMr?6Q_&rX8?>XeC3Zx_dvVo@19BY;?vR|DozI?uLFj2l8=?FiCP&
z<&RrKl7SZ1I1u^ZB)tKau``>4hvM;NT(q%D_@?f6lQKVdlK#5iEXKN0a)IP4=9j+M
z+1iZhc5th@yhGV)mYN*fgyiD92nCzk!^cIAHR5DAxVH#7%xjwUF^2wA<gP=awj9};
zmD9`0#Z?j<ohzUOE$_gx)7{9`<$lywyc$(pgzos$1+6vsSEWAsi1_{HL8nu2u(C$}
z&f#y+EG-Oyf;7{og-w1$Ff7-Jm}|ybW#50}i-^Wq_bF(3QKIS4eTaq~Q`MB&D&bGE
zG_(eOX9AkvyJ}A%cS6?l<OgQ@`0qV+vG0WJxn{@lBAuWvwh6gwvCgpzW1CEeU!cDo
z$JNse&{4l7x`U<=Vzjtrh4^sFLwaKBaY^^EW1KkK!8fl2oo{JUm&2s<Mdn!2(z19f
z>Z(urn}1;X*7O0m2^7?f9H$SxOEj$1uaT!4YwRKqXZ@M>%QpkRnHa8ojd8a(`g)U2
z3oi3npz3}KPLeWk(>(tr#Qd_F2FFv45>_8$|B_(g=z4CWWZO$qQ|8I0^L+ZS^J%BZ
zkplpLIQ562cl|Hv*em_k^xn0hN88Knpswi?vyY8=C7K32NyreGQl>Ik<#h4qv-+1#
zOGe|07J)X0!d2ft?oN`6XV!;FNNFYD$Jrl&@gSt(1`Y8xFUV~7I<E=-FAIQI93<JV
zq8bPsJspD_T>~OuFYI(vFBc-)lD{ar!HC)HSnoHL&6#&ojbD;5XDu1MnixexVGe*q
zeI@b!&*XwT=K-)WKi-(X0q7_TfxXmqccXgO%WEo%<l{~FJ2>j*X*=gix5Qr(z@};=
zI|eGSw3w%=Qee#jt{fKbG%wK30AM4XA0ol0#LG~bBUha=t?wZtRh$&iYoWMJ)AVuA
z!&(6eYdiA8iT<;FXb+^vI2ogo;gtlimsj^Usf7AaydyJnC6Z6Eh;$=%eJYUyoz=NK
zU#>K$>s`rfaq&wNa?pTH`xokR_F+Hc7%B4ke-(~$p5h+|DO!@&xhW{U%<fmo{S=nK
z0bKNuyRTj0U?La4LLD_EtPk6|sk`fnMJmVD{v2aDQo7=vy7wpJ1h<V*q0@FtDb2ak
z)YiP#M_s4*?7eT}FI`Y3AE%X&^OZo7J7xfl@dj${73JKGr!EUrU9_=WYLf70iKf5&
z$n!WG$xB~1hlWGTB%gDggjVQ-hUl=R>EerSK;L7aoAtNx0eMm|0ALj2hqxP-(R6Y3
zTAswJeNU0GjoeXOoBdLAoGc!wddHjflU__eb{$zs3NvzF*pk1O<!Z&7nQmG3z(>OZ
z=;5kx`~tPKUcj*GF|GF~DkJpROfO7gd;Q7Z)w3D%3}G}rlC~NmMC3<o12`iQ4B;Bz
z=+jNo9DqZ1+q8x)NWJ!at$jQW|BTEpSHFxij@o5AdTPgm!Knq}2`K(H#1U&NaT9{d
zWWxN@-Y0DZ;HR1lv|V?-L^eVz;+&@hr|Ptc#UaFiSG7q}^dn=miCsh7Vrz~c7qfHK
zYXjg6+ytBmnCZF>!_*Za4dS=0S-}OdM@;O`)m~0anEfeM{^vuOW%W4UNs@e%VzQ2Z
z>PHsUm2~B~^bBp)pCa`@JRZ%g-4Z78OYkofBrHOE&-&#T{(}M^``OZ!I!c4VeZlX3
zFn($}np5B?_(eC%>T?Jq32S6$eAhD2<Xn_IyF%~Ear6&x9OFlRj%+QH%=gvtu5YxF
zC<qFd!vJ?#T4t|5mXwAa*5OKkMBCVGXY#t#8HsusHhd!+mE>rhp+k;<Y4XnNZ4AdU
zp_foyeHrFoThs!`6Fb|0>7I`e1ARjcfSKYL3JRrMie1NXsdA3e2qXFhabo&xzG#~i
zp%VZ%JVyZaFI58S-=S-O_ooqzp>WXVER55<?UmOm03TcdaYY+Lfp}j=|JM@(l$v~y
zt2wYe=7Cm?ryUtOt7d@*?zB(PWn#a9KzI5Z(aHnzsZE3ZEyH_C=67g87tY_+@wSHF
zm-6LbqRSkVWvn`MheiTzhxvU1%>kAau1TYnL3jNKbu8wF!PKAOS(i!9y=i@PpCf?Z
zB&C~`GauzK{8oHSm(=1Z>Iq)O)HyI%<j)eg6XT6S#P_pN-d!sKO@z|5*y%GWxHz9v
zo8~fVR~<ajFKyO^sJN84t;T?-Mji>C;w=J><`Vj9JDzo>Ci!u|JGT!B+Pq{ocd1$b
z-xd3%*GU6ONA0^t1_H($nO77=40?f;KSST7q}GMvQjy9}V4P&zjS7zPO5_b?OJCuQ
zyOTgIr99IdvCB%SX6Y`{*?ZV=<`pVFHzP3Mt$_}9->BTr&1DI8Ge)hmNIZ}SQq!0M
zMo>I@n$uz3(#~m%2mn$fmlICbuk6`)7P;$@T#UUA1ghK2;0&EG;9yj3SAW*rz|B^-
zB4TJUj77wBSsDWJNLb@NqiTgx$^s~JP(8Yr)yt}<E|jNr=z8x5ghyaat_H)4m-26Q
zD&lE>UvK;X%mEMg#%d!=!d2;D165)gL=}th3+zE1$k_?aLT4=3zGPp;1MLG0Kau+y
z|Cx};7*>44l8;X>7Xl(-lnT@VL9ezfkWOXWIZpFPbujL-Ei(;bTzJe|16`ecB!`kF
zr(j}igb*jJ?o~5(0h<p{=4gQaB8~OAK1=dYCaNt3OkD0=6HT&Q9J$f@nWj+qU3z#X
z-B!c?>Vqj;zBQ^gjMR@1of403Kxg7G4$SiW@mFTp$eDQmQ8i<;U!3GQ9vw)I!(wK*
zjMiWE|57%z%Gdx}j$bsg^;Pg2&gFxcU(0&4i&_RGJF@j#hMzWcEGfzB7Va&p=~z46
zaMtx;chXU#D{mjl^A(Y!BY2YG5_xi9z`<@lXibwBwMs<tX$FxdpE;X`g{v27I&;t=
z7Dc=oB6Ef9#;&p3`GJ!A*)N$7J6~ZXne3vw<e6=Cf32IgAkw5Acppok;2ZLkH~2>I
zbDYzEe&)?H8xqw<cn#p_xn+ptu4ptLxR_XTe=`F$I38|(v2vphNB;W4RN*?s)8ak?
zY{v<(591}gM>*;-HDDLOkSSp|m?xWGqF|Y#d~*17>7@yk3lDeO;A4vlZk1WJf3>f2
zkf*v$^Drw($qvlgZ~SD^SP$jYaYE8Dl&;+g=5KV;en{S!RhhaMvseQ+eyKydR~`pY
z*L(Y;YVz>9AvBVtZuFXt$bu%UM@(g?ofEDm7rD?tRH;Z|MUGJuEq2r7fD9=TDoYEJ
zu%QR}zBRy(+}}!X`p1O03^2d18zSK&J~YKUL;tah_g1~8t|A90HM_q63a(D8c{mEt
z#4OvbbuPLU%~Mch=Pw<>-&27Z#pZm!ba&UUhFJn2piwqc-U_|d;Xb>eJD2~|f2i-{
zXt!LqnwFHQ|Es%Gz#dGx5)P?#WB)>ZVHJl3RvPj({vS|ju>imywrwk2N$2k8qQ0WV
z%6;f#IoL2`bIl6OifGY*zltdKXiC(5XHo*-2Pwd>IeSbt|LqtUV0XANZ~VeOD(n|m
z5?i|3b;HQ}^zw$*`de=vRBZ2Bp=n(b$deUFkIUy(mpI-_Twgc05?nVoWv%X11|bnJ
z!+>LxD`lzZs!~<jn;f~wOSk@19jJoen9sbgbnvh$Dsu+D<FW_Zh2()+G45NiscWH$
z?PW<hV%2w>+ccqdTjVvGPa02kwecT4=k4cfB6o>l?gfdN&{-m5tWI)R4aBuxlCOhr
zGEVSthgq*q&Ajh%$jB@5aGqbs?v<wiC2>^E(2oxi);c<CyIxR&<J4Jh>ae;~+Kqie
z_qkkkCs#rd*11fhpo3HsNxeH8omf}No<0r>6!j<Dq;TPkcLicBEl5yfAyAO!an-)1
zdpx~d1D==ya_nzQK{nR+R3vsO-m?|y+I<T{eGQ~bSj1i4_4gIH^Dp_xfita3+|l;f
z1H&lvyCiZ^o=8feYk*~Y$3`V%@mZZGlXkU_UoJnNnycw<sD^FdF8bOQWk5@a!{~q7
zgt`16Uo{Xg)N*Yrxoj@}7jzimyRgfo^+lh9gPU`+HiyKJ8T!{n!=KhpyRq$Sx+QfL
zHM;*Z-d|BveIJk);l=^25ftvjYzNYgi3pe@(dRL}iR@f7ZimVFx{f7e;E1WqCH)L3
zli9Z6c`C~-*bu@s9GiI%+up?Ox4F<zR{1j`w!$5v4Iyalx#|lp-F~p)q#n?<uCIw&
zb~G9R4n#N_Ut!y6rJY6Gci^0TeXk(&DG&xwY)VwJ&b4*u#^rSc_r#;>;Nh(k`sAZv
zr2)gRFHg(f$E+p%XLm}2yo5fI2uZ1RiS@4hnsRbaCQYOAm#~Yu3!*J8-9JzH$1p&V
z)w-_r;l0midzsqCn9jkyl6@9ZS%<<joZ?D0fI|I+mozms4_F>gmS+V9uN{9(wkXOr
zCLC0~GG#jM*n-6rZBowLt&{ZDFU7I~*E)Nvwoc|8X00pAq$AY-m5kQdMka^X<#LHk
zXsG!pvIbjH3*O<C1kbLg+dnEqAtMf3fRM3EzWwPv#r88BZsU^J>;Fs=Z*E}6i?2MK
z9K8}Y;hbi;Tz}BjMgQH}*Wx^Bb8b>eU2RfWebe{OzuF6(J(msE$_O7iUE(K<nI-PB
zJ%Dl~1N*mMnr&G9nAh_-6i@QDb#2&fY}m*>D-&f~AbrdicEFN5eJqpZNry;6YEu#l
zwJL~BOmtj9F3HRZ&4&1`%o_GBOxG_DFd$GtY8b?zi5WV62}*9i!vZ#pL3Kegkj#%V
zy9DIU+%=*rNS5^-Vhxc`0~;%g&*LNiT0~KTYd|Yy)&9SIUZc@F>MZ~iDE17{LjJ<*
zL}!IC>U7Aje7&W-$P3X0?_|vFuq7DGxj4y^m>X5T-8S`A`yjB9qsHGAw`g^EQ7vFm
zA63^a_fWs@J<|koL@eS3xFNJgLuVngfcwRfrc^riLibo?a0d)X3`c?Yt-dCxtb1x2
z9XS?>9Gwy(so6A2MXNFi1*U{F#K`6r6`$0_k{hfal!`}P)_!^rHZvKgyQBozgQ>Qg
z1NS>h>K^*G-3o91ymr<e>RR!d-x_<9rQ+Et+cvQQ!f2*(1HRDvC{d|Foc!M3ty|aY
zSvl+S*V)poexqz}-vdm6&m5yM?bscWuXI~PC`}zD*VuJ%k{Gbcv8$6(M5&aA26O=d
z1%UoJ9l>`TCR@z<{xNwdu61|!a+S|za|P;_Olc|JiygcRn!Lk0XzaTP7(R6mk;cV!
zdoCp%@@fQ-5#wh`u^Be-w}U&Lx1zRLG0D^0GErnlj^A-~pu9P?0}+qrifrU#z>P##
zLoau=uO5sJ&}70F5pUsrA!Ynu7Tys=79v`$c?INQr9Ih#`%2s^Kr^X>(n@He2+`1M
zOFQ&JA;YaYqJE!uIqMs#%2fC@Q)0rffH57*;Zc<!<lU}M=+tH}u&#4)Vm$y)Y3+)W
z@Q?+-iGO$G*7B(~&mI!vWY5ooj@3}O1TQf&WA9hSt@=y#6s*sC+USSpT${DnO6|E@
z!9z#I9?=%yA-5uVK-o~TEn9mU^P>h7)#Yc%R}i(a%t|CMpAMQzq)tFXQ++tWn*>~c
zMXVP-%i0De`0zCFgLT9)fH&D8#yl(=!?jUn(0wm^JJ`<F8d74%Y~XiGra9>KLv7Ga
z);_c}JXYLRxQ`dh-cp~0V?UdyjUbKe7bj=mcvdMwF+)Jn`ZbWdTdH}#>cgdr`u=CX
zBxAR?aNx*qW=CCa+5RoKfKyJtYz3U{9`C&;zCwAd-8^ed*f8VF-*I}p>)D~qKV!pQ
zf>!fGOXN*D`TXgDR;w-HvwEAUQo?8Fq-iJ8gr9CyfS9^v<CXP==_fr?lYRHlFt3}=
z|A`T2;C8k}J+_C$LUrz;z@waUIS2x~nSAfLX@x)}W!3Pkp|6q8>KayGYrc$z&^k!t
zB9&BFrQyNj>T$IQWO_hJKr?X%ciZeSpRQ7C`_9n%o<fddKkTWFq9LILyS2>wf1_uy
z<B@sWD7$Q4DW_DmmKoX^yfIa)`kTrwXw|Iq-fyk6T`!{U2f=|zGBmcp*|hx^))T~1
zs!SQ|7>RC_9yLTIL;Icz+~(R{Zky`ujXH(`%8HHj0=b$l7xB<)tofGk7oI*Yq`>X%
zn}{2n28R`{ydvsyZTWNB;y~bg)mH3D$F9?#Dd;>0-7$X8K&$RiAK-c!+_*y|9`NHT
zex#ERm|RZ%Wyy7R4mtAA=n^RA{abj+r~R077;iS_u<?tgi8P8u*shg3i=w_clV=k=
z)XIMH<i>D9%w`?*Yg!1ub(f?#J_9oow;!Dzz_&5k4;z`<Zgd?pKp9V(=AiolTU%-0
zzBx8gFXqD$L-%Ea&q2%t|I}d;dk?Lo#ejzSy3d>xxN(;xC3ky)ZHhbl80pH!^W1hD
zrtcoZPfKQH;*{Cyr1Ak)A0$6ctAJ;X$;#wtP~4)iT^%fcJk6s72Kigt=Z*?_Wf9`V
zZHmxdmhyU`&h)bEJ^&*5t2@B9=&6=uK$lM_U*Q}b7N7>sx;Q(nqUm0R^UmQb)X4Bp
zqV)%=zz={)q02zqy!1THNC7=+2P~f23ie#vl8s4Qfmz7{K4+HkySi5v)P9wC4#e&_
zzj8?21eiIkXy$ax6See1#RnD#z!OoEC{fZh*Sw_PM5~Qe?iwV#2=f_5e?dm}W^HPd
z$?suB#;#lf2&b6rMM4uBelwsc6M;YB%ISf)TyOR*$9?HoDYc5=6d*=zF>0OB#U#te
zj(o}u?B>u)s5=b^7U#BrllL=F%ne8{#vG@X$cySIL}TyYNMm$y?y?Xl)kuyuuHAJx
zgLC~eBXRPj;ZxK5HOtCX8Ik+{v`VuLVg4XjkI)u3+HIUXrko%Jw3^jhQq&U$1Sg>d
zRvIDkb5E}z%$0;ZIOFVd)R2Y=;h-Ot4pWV$ySiK_?znEt^Hr^3N@awTeo(17WR((U
zRHL=|TI{3A#~hG&oCf)pzzo0W43ZY8Jw<4^Oeksef?Day)DR(eZj6KQNLQ_XApKB0
zZ}sc2{{&{twdwQxj0F$jYzlx~oByHLs_;<aQ+i_Q)&!Pi(0|oT^rZ#9e8B{!)v73D
zy97F%#i9Q&5khcI?4#K48$Y?b*K0*E<d+~$Njt`kwgcqn{~e?x>PMT8=0s+hP%uOz
zq(dMFQpt<hy=_uqWla|aQz4{6c_DTqwq&ZWG(7oU^1Tt7TqR0R$&_>?;n6#>NiLP~
zLEfa`Z7*}!>LP)<`U@ASi*7iS-u9Wcc{<6>F|v@!C6FervbY3Qt7VwxdLXdvqex?)
zYICtX+#IsiTF$z5`3`69>Bv@guIbP?>A>3iR)!9kQ{D#%--n%x^hzA_^&~|Cdu@&-
zntX1Xhhvwo5g(7-!N<Q4WD3}QMtbC~%N7n;l9)mK2IV<cFm{xp8_%L{=x#XU`sKJ&
z1LJLO((-XWCVX``x&C`RX)w?86W0`L_sN_D!m!WPebP;B7m4dgdNf8ePKcBWY%Yx8
zKO*~3I0ShFu4{5|YF7GdH1R6BrUS0g(Z=F{8r4JWAf*~GG}?3p?TFLGKy(pR{!SE5
z>Q;`42=WbMK#MS`c9QMY5~fg)SY!f35<F5lWJ#ES5dMsOf=A;R<j%vfIdXyHa_ycA
z2H1P)JhbK?9<mzBG+AK6euUrYAnAO3=;cOUCY0c>SV>YR^!%++&!W3GRzT1byiwp)
zt|?*J)JKi1bnZ}ZJe8A(W7vy$#)N>0O$lUcu)2(eKzVpTGV1KE_V57#3fC=)1g$5Q
zc!q+yPr0fjJ06JE9E78Kk`@Mt?Dy@J5#uXQwr%Q~e%oe3h7ygM(Hq|G>L(jvC}|9b
z?!_ZM*=Wj-3H!%q&US}<$fG)H?iDGxKBrvz>U{D7Cw+7j@j=F4w&^0<_dd9J*D3Ih
z|2C%P!|N3<O?5QOn2`@Iof0m2;JauXl$m7J*6h595Dvps^#{z)SFKdrLxXi7_40=<
z172`rw`9@<-`#F3a36?iIP!;s+TVK!ArjvFdI}VqC{@<aHt{7fz2!o8mFU|(FV9RI
zH-_VoRGdTY0tinT9tbl>wE9rk@m@H$y^L-b>Hu*cJ_CJ3htn}oGg@=s^Qq<nK}N>D
z4FrW|KkKMg{I4Cen%O%q9nto?qVBK~Sl)VdG~p@jo|q*(Cy|wJWv(RF{m>=<N3L>o
z@Y<EC6`B4w>f8HJ^*vf~VZq{#-@x(6b~O8dD@YW8@QqR5iP%|KP&Fyx)n-pAxF`E+
zT(XF(0(VSJ(}CZtZZ$dpAlDzZfshb+Qrs%CkI}e6hk`zp8*5!$#YGC`P3R4doqwM@
zsP?^9Ay0^{H^+u?y<JsXH_vRzW*2gyBpou@oZw_#%Q8>-5^OjwTV){kTuKxqk473F
zK>uX?%x%DpLfY2USa*TUxsRdhfkIGk*|J?(z-igivIWytEd-$!8X|Y|I4k;^NDbo8
z>Oq!Wiq(U;l+c5hj&-$dn=G7K=iXs`X#!7@0HNSs8g{ZeVrsf*IYE8gY3X`Ua}+VO
zeeAma3He<7(8*VuKte`@Tuc~Hq42L%D@pZ<RrGhXaVxcKK6s`W(elo$VNiXP`OL?Y
z$Uyh?A0h)V8P1{+A`_>rGZmBCs6cRBIl9FcZl1eI3<Ry+!jOe+Sqq(34HQC%`9j0c
zzFQ((AGQ|yj!g5{vKxlrU?V5E-@#dGLA~H@{&7|Bq+>GoIzmTpw^kv#1`7V864r>2
z2O?<V{762B)!H?hCgY>d69#gq=qONXs4i(nrJu<oc4h|}RJ?L^PN;@bBE-cGbl;Wt
zgD6n!?brrvU^Gjqp~On+j;<w-^BVzQ*;?P8feXBS%pu8@q^v6~um~J;>~Ew2?LlHZ
z^^hOmjWQ)>&>{WoS#)HQM<04yrW(BnTJ+&z<Q1mXuO^%I-ldsA41MDR$}o(QxzBJN
zrp<c<*x$(4x-z1tx7NA$E$)BlvD*P#X$)EZq<pn2un*LYSl?_XiMzBy(P)6qlnqn$
z!|yNF`wP^8F2YN2;`)QimUOxJVqBdw&M_;VZdo!zf1NPf{75sBV}`Zki(r=}f7#x@
z?-JjWKWp|t5Tl27XpoLjk1t2k@iR9?%W(6$eL9fo${h8o((KHuTszUAt_NKLfsF$Y
zDaee%2)^Z{L_IrV1(%bK{VT}Vit^uk?+|_9i_F_CfDY(a1-p35ZPUA(@0Rx3l%zGZ
zW`T@2QoD>B8u*_+KU*%SB)r*G>8gak$mUHQoO)of3YuCxbz_=pp0<NG%_*wt`5i7M
zT_rr8=K6o^H&AOilH+jL6bP9ce=%dZ4N-c*=e_p6_z)d(XaFBM)0k5UjQdVQp71WK
zX{I~X_GI$O_PWvxdBYi<Piw<#v-NpV7o8o$2IICfch1EFfc!P+%&)u91jqE#+oIOx
z$cuz;25NFL<kN;KYot_MyeUhXyE^?CGuD6-!gg8v`gdIuAoxf3ux>qU;_XXxaj_{-
zd>{NoP<(jw$)2ndt4K@_Mx!1v;(v7?2i?|RlCatXP7~kHAycS#-$Qy(JXVaTUM6`5
z9JzCC`B>0E#j6aQ?{1-uywfF??<+Eu@+4_pdjPmkE~O)xIE_dF`7C-u+d5hyMTnpa
zU=(u+>i8TM?he;+y{K1RgCh%KJ|ele9ss-ebLrb>oV8q)@}-orW(I+Im0%%qi(3>i
z^{aYu!srp$UVu#T#yLY1GZ~L9V9iO8HWFNr&PRnG0n&~R#rCVA*<dklsC2)>It*6T
z8c3ok16B(AG6yF!t@axDCUC>N^S5&^7Fs^vKsXw5Iu)`ov-lCL&<j>?aGe|a^6PlH
zR@yCg{>iL@iff(KG1r0X3XF8`;3++R9)Jz#Kz$Iz`ATYjV5*TC3+;woq|~R%Y!O=B
z`(9#gD+-%tfi_)`m@Z=}=NNFYss7HkY=x#;et_h238Z^<{gQ^g{Yf5&p@u}rXC`4{
zqKe1EUKgpiMLm{@K}4YPJezoM#p_`-M-LkgTu0OQ<M75F;|*7zlDnYPD?Om3Tr%Yv
zyhw3<TX068QKRYm+`EEJgrsP3vU3pg%3#XP(*q*GN}ly&O5n(L(!_+k=<^!dr(lO&
z6Q>N*j>XKy<71Lyex_Y+d%ABe@O3E1{G3Uz2JBIT7adM_wPhLxN{mZwpBV?<raQ@3
z1m2!&yO&!Dl2`qGyRr)kP9_;F6H+szkM;8!9g8J}^3Likt#!m4p&+ob2Er;+N|=RB
z$V*)N;x^!ndL`QMW-61z8ecZ5W^we}7sC%_!^|Wv=d7yKOja7o0cyW~vWUJRs=%-V
zuM(Ydm}LDI;b|V!CrSZlV)(57cDQ`1nNK%W{|GDB#wmNB%cVW0bvz<-?288+oSFIG
zfv0_}KQshn`gWSL6K8;Gw{FF}q3TqI@zjPW?XNS^vNC}K1N_~B;T0^)`sMY@Y?3+=
zIBpqy9i{n4eh-}!#}I7b_6*o$Il<T1kyXeAq*p<8EV*w$i~7TN7!4$qc@aC9#m1nR
z?&^`WbWd(Iw^b6Zq1MJ$_jw`WOp5QKZixe0xl!?9Y?rcs6HY^|ELW+A-2QOc(3#S|
zEy3xxtiUKY(F(O268skW7Fkn}l!F$QZ8f4>WyFqQi|)@Z_ILH3*v4%femZS+Xz=Bj
zpbjuz_6L@3fL$NtxsWY40vDTmN6nO{{7gJI<5ejTZ~Lknu8)K47mDpq;J%6s99b1P
znVVtT{7bvSvu_~3w3arQnI_dm?=|Ueo?(T9FxHjntI}soT{narZX0!j*D$A30f62(
zt<MXF)}j?+S_cbz?&EG{?@k0_fw&OisR0)43(`;uR9AflQ#nyc<kZP<5c)JBp^R(2
z$iOFY=ZmAeOwN;6{LAq-hQ5mdS^!`K2bD|JvH7?zjat(hTKKR2!?*t1+72*jf1L^1
zJw!tzs&xPNueIU;FcKc#vsv^b?5KGQX<Nr(Zw~;jf`}RQ$45ut;J$m>*?qBS1bN3p
z9#W)=F?mpzU|Crss~3POL3QYvZQM7xh|p+QWF=g;1<scSuwB@UYuof^!5(Sj8nXQI
zN8CudG@C2A?yueqF|q~~F6a-B*c<gwe|5IyS_EpN9DEG_noi`}j~WIiKb>;+^bn$g
zN_9o_jb=0M%PuVAZ#SF%bDgZW@m*~nyYX7TTLk9;^NjU?^o=+dOA5S-H+Bllb6^ig
z=1v{6ztRuP3l*tdIw~iUuxKC3aVXFY!}VTkWNUy)_I*5QS45<R09I_8E*^qbqdk*-
z)59W@eRHQCMj+j?ZwZJSN0Fo3JJ86J3{W7DDykVmRG>eom^-NwDPT#)7cM~oI)knj
zG+17ltRAOc9M?Jw!~uxB)dWyxo=wumS=Lqg#U64T>UxuJ2%TnrBK}JT^Rx>@T5$*f
zpui(8gP<RgN}q`ZKdE_cd855B^AsGV_(y&3^Cuppm0ZoMV}TBf3_WBV<Dut&#FJ{S
zomA&@2tHk9R3e!RU1Y66thb!oSl<xmbYN!0`PSUu@qU>wwcp%^i;m*^>Qw+F;-~W$
z6HtWp@}%`fV-Ya)GX(mgNUc4~UEbd_P>4JOg0`=z7;2I1kS3n4MsF9sMMid?zRHyh
zRFd~Rz7>}u*z>EsG3z81dwT2Ovz&rMLv=uMmmGLN0y0*M6dilIoPRB^ktNfnIX4;m
z`+w96N@|sC45iSk;)67%Qg?!fWFT&rMDh}OVrc(f(mHoJyWpceByVV?1UA@i{sCFT
zRJ$qLA~-=+$Tk#n##BCb><JnkO;JMyft8XzCC+Kicbwq;0ays>Qen?ZZHv}73DoGl
zVvwz(zYQ*%`hzr`B6s5*T_EbS9G(CgsZ=HF(bKZIwM*&<!dNk@K0RgwRvSxQEy|GV
z@Gh73k)daFxv%}%qYEm=GDB^P_6De!IhuY*5>Ncvu{-sMggr{(Q$x3F&%O}b)j+hG
z3iYxLhG@b}5LjJzLOZuT=^)JIOF#5+*Ic-QJ(>c!!F3K1PNX@FIbPAOY0Ug-zhl${
zp8H2+D^k+(NJ8(NNuVc|72AT|^a$F6`;DqOhm#XHoY(V@$v)b{k(2I0X%Woaxgo7!
zW;+(Z&tcnm>8$Y2drmK#om~^C0z3pKw3NajxE$uwH*|iNY;`<$=dWx%>Mz54kJT^!
z13hh7blho%Z2f^#5}xujiCMC(_$CK8{zx7=kaD#-OWxWyh6y-Jaj^%su>QDGfvGEP
zU6LQaVo`BLEz9#^DE#4&+Ws{AD#sYB=@%H(hYO)|AUeXuIO;a`+(W~!(H4x)rJ^bY
zYZ|G|!FHcHh_EQs0zsb!aS&H8MZ8QEh*B*511XE>cpX)SU<<(}H-7}7r#@<_TA!Uh
zPo`)c5+rd~9(Rr?n2!%%h%E$-0eybVD;Kpq0)G)x_9uFG?QJqb=9D(FXu$79;R5hq
zWc6>P#=LHA!L<AT|7cnSBEz!~0~vypUdE+EI}R_catEw0aWrOD<t{u>Ca9_KM7nZr
zG&_fvXyD5fsu5;I*i=^qP#*eHi3l7<!CB8KT5r|5@Dw%=N~a*Ly4Nu|Tx@&;7)9_T
z%}<hnvpO*mu*)3X)NH0>`9$~C%g?P22{9K4&yynb#pFlRTfMJ#g)Wl59^8iateBgW
zS01@?-_4!W{UFJ`8x$&g4BWh2&(}VZyP>c@4dt2F;MSgLZBm%$FMHTlcUeCnEMSFl
zlj~ThSJyqfCqT%KnS>+<N{apBn|icT#(PE;C3Qr2q}6I$C<Tw6xi9BuKHz0R^4zp(
zB#fh(08;N_!~t<6J3vmTawMzcy7kxQ^DLX@Y{0~5^>-;&)KA5NzP}{7V9(SZKcU;-
z+&XCnO!HV@+HaGrMl0nF@Pz0wwE|XA;7=~v?GHSM0-nPHmwhV6-v?(E%4<aQxi{fn
zc<pahvWSj5{(plOoLI1!yP|zRpmM0PgEG1qQD#NFG0vYppr8?Rg?@kl0JZ_C2<Hey
zQ`)^UbbI8j*M|W_5>p~?yr&hift2x%f40Ii6Elw60ZOSBb#0W&N~a7v8mP4d>FIWp
zq5Roh)~O(%B5(QN7SU(TF4ndDgupAZSrq;+xwv_;^M=kfJRafp(-(oRVL**bpQtUx
zHf~nlz|)EZjl{|ZKVXoE1}ZXj1}<c#mHm*QfWn*_%AD3g&NshNe=KsyWGMHlB`m80
zy50D)jtCRXh;PEGW4Zw*_kLGyRQB#3k#3Bj;AUImo@pFNS6+##e}LP7<UB&kww!i!
zBbZ>?QUqVX9m{#FTK(%3aM7KFt8nXp+j8|k#?Au7degYP<>o7a93;#FTb2hok122i
z6qOQ}K*yGB`~U<>6su{ZY>O8<LPf(i{H*x{`8fMa)oeuOQ>7NR@&!>AG~r>8L1abz
zeo*7nG^h!lJFNloZiVE8Iu8+>@B0F<$5u_~Bp_6@10(>$-j}u_RUsz?l+du%(0Ur^
ztYtuqHmWz*kVwy~0MQbKEHz6_16=%kJ8ox^fJ*~AV**YEN7Wyw#|uY~z<bp4M?CZh
zi_aa89aYK7s0*1FS~;;cG?p$0Aypq(YL{<u29T62&ykqf1u1xNg-BFuBUSwvCLqi_
z{z9!h8LG)I9QTLnd2J#ll<;$4b=(vmKe77^W{ZSj^+lv63@rFaBLMO+hyUUnH4;i(
zhwJ+Yv}T_*;|G=im@)E;#Sd)Pc<H7Cr{9wNW(s#~jXD|{taw7c1}u?*tyHJ3Gskpk
zaaS<_#BFF5?fsid<R@%{!q9?uOB@@HkzQp;Yh99rrt;2CA&&j@?&k2$+5%vj7b4pS
zKC2m<mP97ujmU-NNmw~hUXWubI3aZ^18A0$4pq4WQx+D4Y^_UGsV8e}$*fff2N@t>
zxk#GTNkbJ(ybCw|yABINO$b-u)5OC-VU{qj0VRB&bkA<XV?I@=Hedm}c@v;yv;pXR
zCsz-3aBrFNeAy7l)}7g-J@&G4Vv#X58SH#2A;#BxSC$Q^^@Hp@XZ2>MX<(qk-|eqM
z=c2Vjl}eWc76-W80haQa#{)vpb*-T_c7?!%x4bkzHv9B^z4-AkxSByV;|w5{QrSiD
zFStub!48G1_mB1}as@%L_%WWmr?fsQb<X;N0yt0fi$>$-r070R5we|h1>|B@CEx}`
za?XGya`g1F;jiuSVe3s_Pp7OzWA~v!uF?(U4>&^Jkl_6Oq52~oL_qetQAXmDXPy4h
zWfHA-HefCt7+k-Lguas7^9M|>{T~wkuFUQc<FFa`=J&L+BWcYy2Nfaxijb}3QJ+IG
zGtO=tOu|FVv=8IR3(r5aiTJ*Ga1yK0U)O%jfbhkEB+N;C(^%VDxrOOV6J$OtEFe$V
z|2o!n)y#HtQTH$5d{M}ZUpjDBMS#W{w-Z=>4%VL~%aE~Xb<UcxhP@z1n<9<&hkb4V
zajzZ-i`m{J6@o}QO~mA8&V3F|dMRr>zN&<NZ;sc|!>S-?qgvbdfoOxYH1kV>LC|8+
z=nbI7PJkR;?;v;PYilj$t8ISc^)`NRI{edx5tU$+Rz^_5k(%DP$gjpkXd&h-uSruR
z%K!J^qes!2r0-Y;5y%`k;~*Xa-#n@PR5ZS6eGTTbwKJwKw~i+)-%+p?FzZ_pxkf>;
zZgii*^$Ca~9Jjs{h<jVyLDDegD+5~RL2s^iqr0?}_bK#SPcRpLdg~<v@smc|GIPUo
zkrv9c$`J7@MV|~mxN+vW$`0M=2XsWIKAVvgo!Okomu`E-o0UXQnBayPVO`j5wS;fC
zEozV5gR~`I%+SEQXhrs$PRaZlJzZCRx&NAt#N+CU*DK1${E&iuzZ%W_5ZKzDB<CDm
zuk8K3ZIguC{_}}23)U*Mh3%%FB(kVh6g-2g%xvox(t9#$sB*+qenztltK|4v0VE@V
zF!ft3jFTm(2n6yujcEnlp&Phcc==LZn6ow-H@N)@oH2gYX;Bz_I=C-iu7``_O`O+C
zz+~JqT&I}>gYfwODk`ivi{>vPS$9qTSgz_>Bme4?ReP^_p;n)u9Xq%f{Uixmp>2ME
zp#_kjFLd6|Uq}F!P0t#DW1v6aI6Yql_3Lpzc>HH3eniYP6V4L;{i`7YPe|y?28xzw
zG@)YZpGg&J+2H0dBJ7JRw^@6Gd-5{_5HJr)whe7+EM!6Fx4=cf?JhLxld^n&p+p_>
z7RD!jjmJvgq_av!*t=FZF72&QpfjOy$Vkn@Fzqcft*B_G>eCgbUKZBycF4@0B63va
zjx0YHZ#c**xez*zvL`?D4ofir(SpmA&)q(;rMPi$4^mf${<PZs3B-K=h5BO7efA**
zqjiy8WeNNZLHyp>k7n4Cx4Fx!{=#Xxz<(ajd&f%0Jw#Wtr(DDg+59SIPUEDNQp8h=
zSYW3I2)a}Gv$Fg?Xx=lbjjcN(<c9XN0cA9m^*wy%qt?}M1%73K0h)qxs0jgQ0$2tG
z^5^n#H30c?fx<F=)9t67yQD_vCxI^AbAm4#isR!??A7X`rDZLem`tixTdCF*10jOo
zGmlp047ydYnrMRC3z(4zLTbq^JdmNNg5MsV58cTU++yOqWHmgo=9+^VKgh~jPW#9z
z^IR{Ak(kY8yQ{cN2U4tTLIkCxD|jG3ZjVYs*BA74Am+$DDsxulKT&yy)vRjJ#NDk>
zRG5UT?NRCjtj#6OaTa;3X&gw;P_weG3=?q8KksHo%k~a`b<XmG^4-No!Fl|K52oX;
zw6OD^Wpz2Z<bZb(o3i67H4$=f3Y|+`L(?CpRkPQk0Ogsa+eZ|NNSQ1_3szmB=*BD7
z!bBlU;EUu-*0-7?$WpjhCF|`0F?4F4G6vQ?L+8+_6UZEIT-yezR9bDLcBJiVj-;z7
z>2uS%VVwOVRa$&N)dAF@G;Q<q;_mv;kI}%wxj{yS`+FwUb$UQ>#Ue7VqhVx@6X<Zs
zoAO%IoQoh3p7&G2qqR-H-_JMdj=vXgz4}<?o>O04Tin%`?o@5Erw1*e$|<l7EU}?j
z!Ip%x95gbbcJWLO8pT!8Bv0j@>blc>w1h4vf=q?Dk&^%jDw}u=zV?K@fK$Ipcq9{d
z1>V8+y5Q~E0!88!b-ceIsp}w9<Wh-ygB3vN7SUg&(*$KyI1TFHI+3O6o~)-d`=x>v
zQ=di3qHcQZ)MP33&)AOs2<*jfz=S+YkUPBzUM@UV4o|q_0_V78DwU1CQ(`f7RoOFI
zF}P4qcm&C*OH%?NYK$FieRG~(iHx)~@pgFPQq%B6v>$T2$Duy#jmw3KdgtyJHtZ-j
z926Le$BoN7EZtDEQDsaFbt-}B&pniWD`ryTkzk$L(8jG2U5h=3O$+stc>rVCu7X)Y
z6g1N``+0u_cc&^3uclYA{JmnJt~VzsdXL5((!zmRPZ=}gYo@~Vm==0x7HPeByc~4K
z-28uy@hiou@^TS-#74#wy#_RezXLm|EZL9O<v0oKc(W5Y6?6;arx+4DWh-S30TJAm
zOXN8>kS7evb$=eo5Z-`9P71}oUJWxrO2;m(2~fdO6JRTZV%31~a8M1ko+aQ(s2z?v
zyy}}rqAfQIANK+Wp9yjss>Siq^6PRJwV;oS+%^UC=dK?AnfopxWK*hye)C#}f!7N>
z={XxGph>uLGv-EkJ(37z8C~zZ*mJ{eBM|+{!0P*=10`q*>AXfrqUS&zHhDBT_ShQ-
z-j2ctSlJ16nEv>LJU`C*wy);I3+jY2(*=}B>$oIk#x4zd61>%UH2cJesiWjPZd4JW
zRrJss=O2<6#3DKgIoPhCk2#v|rB<@uT53a~im`3w-Dc|BCC%%sbdn(T<sL4I>s8;1
z3){iN{qPta+`1#_;|0~vni6Z&K%ek9Zn7Zi5Dw}7GmpY}Q9V?dqij{FSQ{SkJTzm^
z_T`R0r~QfTqF3R{qeKcXrg`W}CAr<TMnYAV$=3Jf(}<D#aM7!0R8>=>GViG>BxcqI
zwI6xc-z7sKr82^tj0v<gjmRLBfUD#2t!!5y@<#}p#V1VMou+jwg245hnk*^hUtt`$
z-e`Vk(Qf>-MXcq`?Qc<yEbVZBM$}KGX`U>oMd2pIgL03>H6>nm-UP!dgMUAJP#C0l
zmxIQDXJtz%95kFL)#ZO84k7imL_Yc`KSf;=8EpkKpAt+$CpGbcIn}|DL8T~Ip{lHi
zRYt*{5@e)&CR^IB(2GV7@Ln*+S!~=ooPf?d4?$f(-uXqAKFJmX#-WBp%RPOIP1!rF
zD{z)nuTUxMLYrRL9A38dQ9k1%cC0`U*-?sjE_=!&rYm1o)b~sj<t1RG>x0sj-f_o_
zU1mS4LctZY0ZFv5_QCR}G^VEr*P&D4DPoNivqGt3-kKTSryz86P!%hB*nx}j?}>rJ
zUg--~j5T;UXs8e(#s%s+e1I>h(BiUUq#Mc&;)3^AoPS&Lo?OW0se@p5UVPPR=nk$_
zj+@Iy$0OJ4M+v>o@>YJ3q*NaB#Y93~T$8{{gtqf`Xr6{WzBB(J=hAQ$lz%rU8}K3i
zdJ+FCpFR`tVdihxLU@&wS*u+m;Nx7#LY|<sfkO-9>Y+MTBkqB5D&)<zzhL>*u_3gm
z5%;#G2X^OM@%oR#+`e##CxGTWI6;Sdi7v8Y5x#<t^)Y(qb*{jP$BPxlrwF3l$6pkV
z=i<F*Dv|<cOqn`EZ9y#Qv)FdA!i#I$-v1>$*qB{`ed;d?h2=4XVJg%-xoDBmBDG>s
zBwDm>rAW~~qhf4TG^<X*t2ADX!7r+#*L|}$)ApY2^5p5iVy_(1Na@jD2}t)f?tyO7
z;jR>KoUEWO!&4b$raVar%MAUU&^NSQ^Mb4T9xH9*cDdmMB%v|ludJilcl7aOzP&Cp
z6}KKLEtm*wIR*`@cri%njE$kh`xC^2tNqv(YHn4fh&3T1!?_ydXE=h_2sRlS;}map
zE%E^oB13=Hu{zY<PJ>xpiXd3F7rdLg%Q}ApGm=klj#v$GjlMb<PFp{}<+L+zLv<`M
zMZUjwozKB|$TD_7AvJO36C_r$J27VP8st+@Jx;)jY5H##-lDXr$Y*tj2<Je;-tday
z)zb~r+<P_`&CdJ|PM68k!6L1pe0&!UgIw^w5r%6;&eU+#@Jkl*tKzvPp~VTVj;<8G
zl$%nH;{@PB_MJ;s+Dv_f)~U>u62xb=9Ts|!vJ{Ebu?P;MX~?^1dwb<9oS11Vu-Pf>
z{>Dn-eUsSHznyG&cdc`OjW}hU$ffuHwD;y=O<nD~unHAhR79$P3{k0~Rf$MJ8Fv*c
zRYbJ(ttdkj)JPE#kui|1q5@?|Rb-GMRaCShh#-RuK^Y>0L=>4JGKM*XK*l|MYlr%t
z_jg_AkMG}e&TG7At~5KipFHas?)zTPg6>YnvNx@Wi?Uf(<Ch)1eD0SQk6w%iSqasr
z!p)}KlFZCjzS%cjk~>PBXyM%bV{$B6cI-ASdbNMfDAi~W*AyLTpWCi~FWtOoR=8B8
z_bFAzFK5ZL2mGI}o=L>)rg>8RW^!S|0U4-rrtw{J4%UfFS*t$IuvD+~I|_LE`1jaq
z82STdgBT97vkLvkXoagAvbXOGZCZ_6<h`awsisv6IZa#(cmkQr6N*82--2zBPw*h%
z>p_ToFj>GK(irL(B4zm`0Bo~_OiaPEgq^Kk36q*A7Vs!?z5QpS-G{u=5*%q$r%J5s
zq~fE)TzV>F7v5LGjE37I3NJXaIJ+hzCH=Z>C2W?K2~U^}jyxbaXbRl*Mml(1Y~{9x
zldK<f_n;ZLXHyHmbi4R2y>mtD;6)=JC&+o->{A$~cezD;2x&yk-o(IEL6uY=oVFIS
zbId*LXB++6p+~#^Cih3aeBc>R)mv62&EBum|7whC6b}3t9fEm!4w^^E8~QE$d)!zS
zT8<>nkd-`a@ujC+9(31eU~>={C(R59M1^P;o%eSt6@;a{C|O&NEXiyxzcy2r!k&ww
zxBk@P_~bBt4s}Z6o-cfe7mRZxn8x@tMSjBL7J3@4y(8jwl4?0F0!H!cxu1~~+BW<)
z9t{^8Bm#8!52%KDCu<cP!>W#yu={@lxl>79gZmdV7On;Hg8)S|eb?vGXOR*l=IjgQ
ztw2v#yatbl^9}pC0^hLRKu4kyco~erKoPmh1tJZbVCCm3@%kLP68B2w7MYa$rf<<(
zwS%AsDZcuy8Y~Y2dzM_CVenJo72{c9fe4#=g3RwDAtx7cz?o_0H{3kF<yQp{`%NPJ
zXJV>NTe&2cWObvbku_5Kh)H#7so6DFZ;F;hhLU>VY<7D|Z;K-o&KRNUdQW;X9`QGn
zRR$$_rG;tP{JpPFWyVvGQ{cz3f(DO-Z#Z|@EG;$i(9-x4f1AnfuAOuFHsJ+c*&zCd
z$;x!?qv_a6JJd-ffQdh@7@=m%nu8o5e_mK^{^|{rP24$>8=1e0SK5nVtouw;QZq;E
zngA@lGKm`vx0{Q|9e;?wM7w2J|0*mO<#fXxTu;!2C*jS^L0HI=I7saUJPX{P^(|p<
zj)c#VIs&(z`x(Ub@9rkR1LS_9S|KXY0c70@L9_K0cra|uy=VVWV}xq;w)15@tu31x
zz*Ja7e0gvKJ6Ui$aH;`1B)>wvgb}G**sUP|o9Ac9_lG(G;QzlKusyc_ocytn8a9BS
zo~>r=vP4+M{u&tWSy4aV0L+U3!-LR~`;+?kLxyo#(h#8EJ>NbRdh>lpgB;{~EEY8B
z^q%}E`^t6|KL;*X^hy2>n;WX=@Wf|}!<NQIs=mH#Y7zH`T8(^1s|}=2O7n|1|C>ze
zez^&iH1aY8jhTn)t~Z(&7y~Y!;b(rM0@u|X&;>DmR$dk>w&ssgt!w`tNTm0s1Zd$$
z`0&<%n|8Atu^lwiDi>y#amvNibUU!|u~+VhK*vGXorNR4eR!UTiIz`-s&Wz<aKH?4
z;Z4K<PsMApsv%MXJj0T55q=%}E#-AYSkf)kkRR}En8NY76821bhDyKf69b^#DvO4<
zSqiNFl9WzI!CQ6vDGk(Gh>J;ev}#z23>yTBqGdswaA(1S)km<ez9A;24snOOi2mTm
zv=)6L=6pqyOz|ASmKe}*jnQTt;UdXRlxKPDew$Q?M9|r~pHdNqvF{}QL`nWx&y6M$
z=rSrGVXp?<;$3H91#R$o>mntAK+jKyj}2O4N`Ju-(|#-B;$D&LG6fMd&LgJh;~16k
zMm2i3`?bL8lGq@V_jCtVC{Op&$xEelZbV?MJbUcrr762nu{LN<WemGlZ^M#ke2&nf
zb){ZWFK#j`KTo<xL3qc(Spl*(aYk~vSRRQB<z#sSHp@$3^}}7jk}Hxc$|Ob83p7RS
z!R_5V;J#9Bn~eb$WR0g*D3KbhZK{jCQ*bw%ufjkKA&HdUV9B&7xuTYFLDGSST^*lZ
znqIuSv2x>?36M9TJe6J7%DOJfZUF~3!9vd6BFRt5-b;vs)d+?WaEyZo2@GS1vc;$}
zbv~SrAg6~9f#KNLY_HI8<~&koH^|MgO$(hx#*d(B>Fa!Jpp1nf_V|>oZ#fjo>?1M8
z?6}=ky&T?jYJFr#E{f{$ou}08d7-RORv+u?+%gh6Wgxt=eaCW0@^eL2z_L$j{B>W8
zo0><?dS*<@kBhvQCTNLUIIeq9k+G(ADZO^b;*`*IN6P@2&2gwbPh=o#o)j9Z-0S8t
z{g#Bcgu~pfi#g)Q^x@}I)+o^=q|lbZwc!uwvuj6T6s>~f-Z(me3n3|x2mO&UqdI`-
z+xt*CYZE|C4bowj#0im3AfDo5!;qATI0FB@jUS^gfH!et@Hb~1ttxAU2A$8k^zpCm
zNWhc~u)mluHCc>4s8|SV<L-W6ZT%-^Xh4^tD44t)NFcPTo~sC#9;hz<ohD^R+au$H
z&Yg7yDIhk-?26z=!JtN&k29&kfHof{-Ag{yuwa2Dd;i|uzg{pD{7H3MKl6PTd>ziO
zrHPrGnaA{6s2&G`%M4T<tr)Nyw-e_u@zOU)AbYZ5r_j6_J&t%T?FXknO^#(^KG&0E
zsnv{Xm7gS0`G-=)@pHCayfo>RCnmm40?j!+J1Bsy|EXc0r|$h`zRXK(`JP?wA3yd}
z@WxIpyB^wHGnPo-dCgmHR5Y7k$az=+eE1$&_ROg%=m?(4$KBDQX_!IpT^KTqeuSs;
zz*KTobee-r$)SnCBe*yguftX^>Y#{%7@+%{0d|)o5LP1kSrAmyVmFfudPXH>P_pGp
z+9ri$(a(qh_PWD`=j%;=ZfF6!_$h5A5}U_fsY>a|nqR_(%9*(9VtpJWF2ZI!0|<|U
z(~UQRVsA#gO<{Z9sE#G>PF*G73&oA?q}qeQ*S?&7as<n3@|ca3{EU8A@sY+Uendt$
zVRd(zPnf(@xpH^Axu3Wg8nT?-LxWo-d_UuT=X(1|+0P^urF6lWG@16(`0}Y;2j(2D
z8~x+?HO^zRPhe3q?sHvJrt_7Os7lt1Tt2t<dZE;BRG1;nw$<^zAnoH>2b_v$WpR1;
z2gyU9*cSf&rTRlHK_Fh34Ie_WA=DbJfW|Q%dyPiwlOP!Pl*G7x<V(C|UZBRo-^wXf
z%*gh+h#G5DsF%W_(I3$L210T{tbjnAfJIyk(g+qQU1dJV!0Yg^Gsru9SP>m0zJPk+
zO@apRw3OGyBQb_?P~F)9`>HFd=YG=k!Uw|KCj2?zbS?1-L@1<V$Nw$7`L_UPKhyxJ
zX({L!7G#FkmQJv6`Ax({U!1{Y37#<p_~6j+@bJyVwpn>^;t6B6BX*LTDdN#Mb73~K
zn+qmo&Bi>FM8E8p<6uivYjSum_XEVdVp{QXK@-<#4P)PSZV>(8SnQ`@ZN}N}T1=OZ
zMeW;D3U=K7VAQ&=Iz8_XPLMt1zx_PjYvD<-rftNgXwp~oY~%6R@`p^nQhLS}f!q@G
zioe+0XXXL=-+0gv75C!WXf~P%#-8D4QI;J2h|?y?NEIw*QAY6>tO>H5mIklFNjzAR
zSR^^BSmkxN)m??{z*+JjA+ZFEfZxQ8V1e`4Y49)%T$hP(@*%hmyb0>(`PMN1i5DSL
zV$vTh(75w+am?{Q3=B6&O^hcUajAyQQRynYp<8On%BPQuVeP7iWuSQEAP6%c#owNV
zCM=OjQv}v>&!y-RZ<=op)10yxkwlsqaeYO`j`y%c%)B>*`)cqy{@d%r+nsxFszt8*
z{S^IY*+kK$Y|l-jPUooBr$nWTCqY-t_b)bgjkvhRbi8|qYcE64bb10b2`8354Be*9
z*R_`+WE1^Q%-N^HMEdYrMj5^h&3R{00eRjmn*GQKE5Kg<4y0lom(9M>?|ekt1mfio
z+#3&uY~cuh&srjpFa85E)CB5T?h4%5Y~dQ>#$BXA$UrFOd+sDD1$MGiG!k}*J?YA}
zYL-!sU})=|QibdJ&8UhZprGfmaJnS9^h#XCDrhBsyyDxff6iwiS=4;R>Jed_Pzo9g
zODue*0pz5}kR&j3s051D8=@E%eFtW6Cc-N%6K44Qn_x?VO$7c~tv3~xgPmcdVJlBK
zJI<;K57+OFk>&GzM{Hx)weUy5fW>Xt2evEwa8m%Ii)9y_$2v9~IcUve5A~R?>@>EB
z>tW=aoVwvrI<QHd{j78@H@w?npm$DakK^*<ALz1A1Fyz1dxHGCn`c4i$C(R<TT8Q;
zej_O|u{=|rLuU%XneC<HU7$S6ax1xx19oeRj3mWIS-x-|P6v%wH(G@Hf?WbZWNZld
zlO?yEFWAvpH|p24_iCYpEtg~!W8dIQ@d<*Fm5+h69KNp#oc;u^$jGz~#a4sa#qGj4
zRG<7bJx#v|kbJb`wxBh3LAGI`@hfp>NLWJ-#N^!^<^Uk@Ueo`Sw7ofTFAoDD@@zGL
zlLWaRK}XzALYmw_p{ou021qE+#SdT$X+Pv{_hnP)B6;RfYyKyWup$zF+BTz(dQ`P<
z7SEc9j`lM+cF~fw@$;zVoKvJwl08G3>bqV<$HQ{`mda_TaA%m4n(o_gd1#>W#1D%O
zEZyz-Vbc%a9{sT798+klKkU6XXVkUc4I20~ZdGqL$C2XZ!zasfgdm%7c>BZ#GRDcI
z5F2Q)?-&|y#}bl0apdpBL6`|2nzJOMjBp$zl}<PdKz_(woP%c!3U5kM@%d;+s$qeG
zh%$4JATTBDQPt1K{s@?k2I#<iW|>h+hc97$Ar>11H_MGr<I>0hLFN$2kQW7~JHIV?
zZZNJuoGmduU=lWKfGfEIDt0wtH26uNZ2TtD+q>Z4w$tcxqo_*lSWSFJdK-~uHgTQ#
z<$@&0=46HU;m~1FI*%0!d!CPqr=g6SA=z_Vz%C7|Ovy2Qha_s|uOgIf#gprHJMpAp
zoaoohNYK}0BsYrGbxSRKg47}RQufcN^-dLwhm8Z{fot(Rwnne=wqX2Xkkvg$a!3-i
zWymw=!wyGyCbAIyVL$7qOmioI0-!`0IVU_c?`R>Q{C-I!S|&{ZDVD2E1W+9joh8xk
zTa|SSfg&1sjSffy+n`GK_jbLO@Tu-^r~1}#(x5|)RBLqH<r@BCvroh?b=Y2yJCiI>
z2Ni+B$Sv=7`Hy8INT!g{1Q3$xq_)Owvue{Djm$R&unFMn<Dq&e{++<K-O#C6<tbS4
zwk|}eIgf~WBB|vwDToHVwJ5!8aXMp$QoBBJd@44isGo&r#Zu=uVAo3wEI8P{<{`f*
zi8Dss#w&Y>Ysti_Cy*^WxOXfx7kgPQ?tAoUdb`##!DDwBz;Np<Hh4F_EN6yl@wD)<
zNV7TN((_iGpcT|@{gou_-dX@XW#XAv`ItL8qRbYLh|%!Ht-FH_uiLcl%PEIsHC3|H
z(*iYNaqk=4U{0QGWeY}3D`H+Eqt?(p29|QgY}iwuej`+%vc=^Wu+mn8ZjnG~%ao$w
zY^%GjGLsp;gk95U1d5V>0w0lMo&AhKQF0XwuOeD(l2CXw?0c(xA-4&@w3?jH-1$vc
zUw*FAoCk36G@(jG4Rc2BDEm2Me~3uz+vn1_ySIv!B6mltLoR*KZ|1npoIPE^;-9W~
zmuyGJe;*!_QCdN@mu1u{-*TFsz?%80C~3w(*c*0sYP0EInX(t==eWG>no7-&-C{~|
zOn8qY%q@b44`(@8Clt^+ro!e9_kQG9$xP1&fG3WmS2o949M-tlJe)(5jnepX?g!3Y
zk1CS~xCp@2AT||+&E;b|@%#&2D6H@cYbga}J--;RbQJ4NGvs$fSR!PA0N$0qvHx*i
z!VVB@CJ?`l1@d)RN&iz<)vg5^;rj$Tft~(<U+bJl5yzZ94j0sKjy_j+d2GE0@D3<%
znbE{L!iJP;$dR=IxA9y|Uk^TL9t&~zzg}fpff#K7<F~#0oB&O<D0LHVQBs`&zo6Jy
z;JXsbvZY(3<giHU9Sx`o&S)kVd4vZvFWx9y$?lF}jSZ$eqtM{CM}xn#OrjLGnHTuo
z6IM|==ebcQ?h6`!ym2!sDc}G&XeQkJ=M%b<*;QKUqyTJOe~I#&zyq@4<c9opv8Q#t
zo9&`^H5E!-N77{B5O+U{Th|^bV!m|ML|dfLx`XJL`CW?Hs0*JjOURbSVt7C->k*gt
z067R&Ere2pL`&j}GcgKSs&)7YRS>dZgetx2Y3V9bvJ$SwPqVD5paGJic2gp4;aU7m
zp8L|)g&YHRUxmB+T`8{|G7kbkMJA%USPEh6Tm<>aXboX1MWH<8B#2ZXb(WZeE5THM
z4>tNuAt$9*=E1qsL*L*Zq%p1|`C?Ys_)+Oj0J9w9%H^72C%Mw!5W7gfzGvVV!SLXW
z6l#|U!2iOq#LUp<{UPIGjyBGTx{R5St=uoI=|M);Y}glZ^YYEMGHO#AFF8|sOLDlg
zcH>|1hj;jnF;T_{ucO7c&MM%!{(U;L%WQZ>RGK`S&V4P-5yxVb5P&6z!!rF4oby4g
zc2woMT%?JSO7Q~t0tfqXoxDo(qMHz(WQmvpxj{dSQ7282Lzw2b1gZd{8{tnDo(A%T
zz3PfvPg+*Za>OrF7BK8Ml$ZBr7#dYGjH=7aqha#WeiE-25LYbVa|Ar2R^kaJ88Q^l
z6(L{P9m+9yw=R}6v%mA^4F7snyv{QZP2jF2FmQ5mI294v;Au83sL--sjV3af6S}|6
z4Z~l)VOLWon*Bdo$7@#w!!^d;d;ymxOS2r{x<(q~u?uQhTmL*4YwP*`aG>YKwBVAy
z*XPggnbNa=a`N5WaPX|hAZA=?iq2Zbo2u6uM+WdhTeR&#jW%n}4nUt4Q|Czb<=Lif
zz}tfIN*^+%%zI4gtoCF4Ygx#0)~DPsxJ{kbmL@S7cBH|~piYtxUN7dO`LOtRIgSd*
zxHu4W2;esGhQ;lw@FK7aN)wO4sqXS#q)0+R+LDe}h>-~C5Od;jTi9r?RKv5TX9tp`
zXHCNr6?r8%0pT>Z&9Dp|yJ76gGp(SlfV3hZK=(7bO!RivFda^_$z%flpTo=prR8Z5
zDN+>>55U-zzr*sjFNl$})oBxff{s7r!cr$X7P)P`i90&Z^Tn8pD*FsL+^7iB5H3!Z
zZIP;^ou<QW_aEq;T*`@07S{(<zBMnL9PgNFZ`gzPLyKhO3V9gyLUL^-y3OFjip@8@
zTzfec$Jo=lj?u+=L8ygI+$X@uhBxLj<{mqy=jYJbM|wYStjszxWye%QeuF}TBPrqV
zB?HbFYYyY|vkI~x1UiGChA9IuK+5OcN?>uGNTHP1xFYrw=@XzT)PE^f<$#bw86Y}X
z0u)~bJmeX(Utp50sA#ouWP%GvDT<1J7N8!!n5ZstbL%0gQbg`&Qu~|<3r1SyA332`
zmhzvZcev1LhiX%2xjr5=kvr1H%Ws7YHHzV>A-1aH%+9+M?ZR4{Ww-LQR_wY62ElsY
zxUPSysrju~kduEVZM@<kGe8pa!h78BudC0S!xHW0OgMQhFVm$)Ryy8r0X+|OlZ8-N
zY!?Y!D+l+Q&*Ji6VjCnVG|5;VvH+XjBBdz4wfW*|h`YC{-xu-hczraDb?=Fy+9Yyd
z1AjFz$=bt+n`;ZRc}|$iz@>(PtHJ#%$}V!*NgheSIjsT=qe%l{-@}ujF`HR%bk;Up
zLYGFmHuJ?>Kr=ZZW~(`z#B#^l*!ff2FeTEDYC{P$nRY3Inq%=8l40?sh5AyRJ>0M)
z`vI1Oqb#9>;nJox*HTZd`Fh{=sHED)jl#nx*64e`X9vf{)2B=ic0MUB9Pj?Xm$4HX
ztgbe;aE_n1n#&({k@19o4QQi{b0s0Gm6$S82u^8+xL|p)2i$7#r?XrcHp**A3!IHb
ztrek}HB7*7L;-YE-w8Q}Enr2lzB?aUw_&tP%5y=UDy)H};Wf~5>cyY2AZbTG=S8F<
z6!~2wgPLi4cA0?F#$yTikQ{*aS&9dBnAXCxwpowCwGy!C7}kBOaBJ~CWGB|eVR8Jc
zh%y$EiW&8Q6RXGFd6q*^u3!_8mYCv^oUkM$DI7^bV&*z@#4}Ls<@ARVbKY^}^wP;F
z=NM?b-Hg3GkydNWoGano#~#z$tR5kyiz@59l`F5Q+P?Ygj9aGFT{1fB6<n~cscTsy
zjdxJ#H<b<j0EqY~(a!4r;9Kf#+bZSePU{wy+z|7d$@&$!-hZTf!-;gR3A&zDKTQeD
zK(~=TVRBtO2{+&0G5aIvjnyiMm0qJsfVs?@FafF$J{y8>ho|#^>ItN*`D|aqvcZ5O
zd`aW=(8fj83It-C;w&tqfB(crxUBJcp4tMIWD8aNJH-el$dr;TW<7`P+Y8KpKv{p|
zoqS5Z(T;#7S&Oe;T8LQ<uUEk3>*0<`ms4Hs7M%N`BKo$E*7kibb<)rT8hSSLQ*D^h
z&LlwWbK~}rJaoQpG?1lptg5Lyeik5QsvG)cD-HI~j9JS`pZH;|b9*!a`S5gBxO~I`
zmQV>#;LKbHwgJ5b6D$fM`+mu>62rW;pn<4ezM_8-HIV6t4a@!~;6hQ52^xXA;1>U#
zfom4Qu-8wKCN^a}F*BB&&bowskb(j5#FH7r43?H~`baBe2@dX6zjXC$7W16Z4)`^<
z&~6}?g@<hoQg6#Th5Nb5QEwTqeL%Fn@HL~Gg&CPDO>lW#^kWa;)r&6Q0(MaHcRDd~
zZm-~ewd7B)$^x2klFT)drWX3BS^pi`o1e-sAHn&4CF)*ItmTcsFm2n=irYFPTA}J~
z8M1I*?t6}jL4O^}e~*`PA(T2jD$gxP?kGU&sIQ112?9n8X%iM^gD2wi6*4IQ=ffcg
z2O!5v#8f7p1nWjmt(%9H|93yPkk{J1F{ID(nRno;=fG6aAn*|LhPZ=2yv5`!$|NkU
ztzD79%b(3;b3^v2U|)soWeGpS!&e(m>oI${N6)x*mW#NoK*abv^@WuOrVReNclFZ`
zFSIxLP&bTy<FDTJ!=c!luO13N4O#o^*^%}+?AHlMTQX<vUIpEyU?*Oi)xPT8>J~JX
z74NEJ*R>5j_bcysg&kz^r`>Ff!2leIMZ+={(6Hm3h8?gR0^qRm)NwkIQ-|RpZ?Fm&
zboLHBA5o&68a5f;_F3sS*8&IFf^8XZHU^R=h_Re-Dxo?Yr9Fb`@U5lqbBAF<^#QEq
zEv<?0sOWzxt5a}JnP4o6zm%;_t_K~%yV7k9tTr2C6;pme!cl_7CLZsCEjUkSH3$ap
z%cJ_LHW_<}s8%3uz1;k2Z4MNHr+ViVN;O4S{*vFNPx782Rem1yWpKbf1{UJzvSY=9
zw}U>))%yo(o^QWYUEwu-KD)eH%XFq;aFSGOu%<B8>t#l2WMxd|Pg*fyh4fzk3jF9e
zVEy-^VXA}q0y{QSf>BPx<uDhLL+C+FlQA72P;&#2FEz~<&ok(R1<cbbQ>s&s$G1?W
zN2F@WMfi`e0K(xC_#UH`Yd+#OlZN2c`#$?QoTEBk;XV^)A-({JF9o|tseOmRuKY$Y
zDF`)JBNQ0z1~b`1<{a3EdQgF2xXUZ`JPw`&|3~wCli{XU&hK7;p!<4XtjW|C`z~!K
za5WK+BnxYtufkws{;y}ife(3iPlE&=6Q@P(Iht5#vbeMk$D~*i|Jw9qC$724eM0A8
z#RvSIukoBrmoy4@q`qw_f#KN=K`U02S=x@hy0U;39DkB_GE7T1xd~cvA+7c;`h)v$
z$>N7-q6m<ZI;j?Dlz;AM76T7ovO!i3+e3r5LSj>8;jB#QedgSXdb?Q@9AeKU(y<_F
zJk1_@^^t^ia5-3HxUm?P^JllH{GdsB1~)T49~DA|hx(P=+YnaqOZ-sS^K~9)<z(P@
zZt?}(BZxUVwh)YntgMuH=x)XUwnNEcUVuN7`zgFDB>EoaZf)FZ(f~x;FCmAR?@<k8
z5JA{`X+z3UJ(v5!BvQ!7#!P}Q1Ja?7j+d|(5)JHyFsq4)q~{Twe_Gi+VcSPA-@jAp
z&C5+^VXC~`3wwHn>Nr{77sdFXd}+LERb`6W2^;vEO%}i22_$!Pwgbj68qx;?L3Jr1
zUoET~ypwZxYVGAC>({J#sB<~c?<JGg)xA}8<b&OlX40pmxe0&l<+8r+(WTC|dW`{?
zfy|8&_t=I<gW9ML8R278gx>-&`9Wo{OpbLxr6;8NDEp|CG<yTubPdMv@c}5X4O1dc
zOV34*A{3x8^B+!FyC=5NY|}fK+7sp^7hqc0N=nWUGoM(v&2*yb>4_W!oTSNc<Ez5^
z_%yv190<tau{1z%7qp>HpxvLcDIjV+<Dk};tI$ZXNd=ME<Q!&JIMMFQ2uR(Nu?|Ff
z_MmQl&a)9h$G8FXAyF_G62K|}--v*WQju}m3|V9{14vMhA2j#W`JZ%&Dm;VdW09t=
zjFRkuyKTKdu80gSR92q5a&KA5)yp^H7XJP~YZI&3k@VmiYxtf`+@+oU-sA6Y><R*^
zxNx8b?B2x~*|~ON`~ssfko|#B^TC5?h*1VfkQ?`(szB&I+|R^LXIaJ*%E3m3QZN$t
zmqYRfY&ueI(+`ApQ|1cAAE*MkCV;NJ4SLZsQNHAe(J9%{a3h6+5J;wW;-#W@22!em
zCJWJ{Mj5!ijV0IWDy~)FOIeZ#@+Pbz9Gh1Kx(k<vsc7yQ<zx)%Din)f8d=H;!a#F!
zHAUI{|5qwlCXyG;HaGS5?b!s~h9y=`96$)Pg&krtDyReavw#-cQCYn8UH86I&}5y)
zk|i@5PHRHHS{SQ;(!}d|x5k1Ew%rCFqqN6^cdkb*zLA{`N_S(V`uI|ponqRhhCX&g
z^_3@NUOadp)_`h#&Fs>}cOtu9{1_UGr^{fmJd4F=qAZaKW%NtI>^qZ&aM}bcg>48l
z63aj=K^63cgyH&ufmrh)NMRnH<mAY@bg+^n|AJt~7ku(d-#|z_Djc!h-NWLrJ5(4K
z1<k-2DZC9+XZ;HWhX#La>ja}PGWd>6ae`|>bOR>mFh-z9hWy=?YJ!ZCcT(+zX5TE1
zDgL_syN{2l>3(#jdasFD2SO8ux$@P~?7HJ4Kq`}MnI7kp@YZhhDDUXFW-9j~%toGq
zq@L?zgW%6lCQ8NqIUEbYq%Q;RfJKlGy)_>f!5E+41kd17d{jua#+d+u<>C0SkOlnP
zx3=sUS<(4`RL_+*6w3A<xF)ING_@Np2{?sWy<_He92zYHODd?g`xyI>LIdE7wLyXJ
z4G*uc1?M!q0Z?}T+9JU8$1mK`87bcvyOEOLB>4yD*oNgmW-W%ltd}+C0-foZ0CYJz
zg6PSj`y}_=Y?R<jlK6zd2aGZ5xtW+HOE9w0$Ju2IcdEX-Wwms5*@mkL=YBYF&Cm7L
z*;<P>zcr{0+Z60MUZ3M<56M>48sAtj=*&BW7EJng7ucwXV{KilO!aKd@xSl-jVj=-
zEFe4^gqw;NZj^GBuGz+F*D!C}KMw)~k(y}neYH<nwXEO5;uQKE`tV9n=oIC>X;%k8
za)Zuu03fTr{2t$RVmmk4=DtEVGBB$yYeE4BD)rwQt$=67!4WC^no>h>``CnuCBS89
zQ#Tdl2WS-+nqNz+cYVNwXN8Oz4zuJ}P!wfV{K7Ra`InT<p*;eh={a?iI-?f6<W0pz
z-<~cwwukrDt5+!J$d6mefpqW2pwf!Z5gVA1munkq7kTeoB0j&Spex59D~`@9S*J@a
z^>*H&)~6piy+xMtR6jiiV9S>tx6Pb=^)`nq@UP(1DtCEBd}}}$!*?=H#GNsfeT_!b
z*%w3NnJ9CBhajBw$4_iDQnboJAvZxlB=FC*X0^aKE*uQG74}Q7SIK%iM8j%W8WHS(
z5QOf;qGqG{jb5!8U(|WTe+gV_D{duJ7Va0GZ>UKlY9B(>I)tE_=yl%G?jWp%P_}OI
zcty5=$B}2kq9*Q-e+k)5BuIv+mwGtlq~yPoDEa<0auo8rYaE~7W4e{GPP30bLt%5I
z{_&IT$Trk_2tyAmFR+oiDp$70#8sbp|Gq=nse4mGy)MV1@!mU!QQg{7ffhKZ=n=9C
z9dm+o?pRDFyv<=!|9VF~u~id3J%(h;)>p)E4ygnPJoH*K-$@Dk@Y`2J7T}4LO2^Lz
z#RS(4n!zjoZWEZ&s@>}D$`xyap5H8-Vcb4SlyEN$>sd$7H%o1KYUxn+*$!!ywxQsr
zE1_a}PrTUv<9simXbPxUaq@snv!X@X&>z>oXd}?~mc1epb-M<k%D6@z0S4JQvEW`c
z`RzI)p?{sK&;vJ7Dnv+hacr@;8Xh*0O`2X59IrLrmohNwx!fn4?|k5t7%yn%)ufg5
z0#w9Ms;rD$U_QTOe||}n=?0xEwqNc1U^Y9WDnmBh*NMbR?xpaCPd0w%R$!8N%O>Ek
z-6rS&<n1>pE8(FdwvbpD5`@P3ZQY=92}g}1X?yj$Et!E+lNw30fUgdkdLp6#zSX|K
znf69<^4wM|t>V6diy(Lc>hhnux3dXHxCOm6EQp)oyrdE?(7<v$M4Z&;hB*{$#WRpR
zVPwq)OW54=r~j}{I!j^_7JQq!^fvT1Yl3JURn9${mmiv&2h6{5kqgkU%w!R$XCE~L
z*e`F!n&*h+ypXCS-z_a>J8PB{;=ggEWF9GJ)T(uF@ll4Dh6#_zjzQAB%1ANu@%@K8
zm49CPUG@3z&AKa&OnMqnx(*lSTLldJuX9rIIUjnUmVSqxF>sfj7Q=aKQa*=Skq5LJ
zLVF`r#bfv4FXYD0;s{!^SXV(aY=f>sC!w_;@iAY8yEqDt!bD~yY%xS?0Cn27DQ7UG
z%_qKxaE8IS;lwnSmk!Y!wn%|WBApe0Eq2_#uX4R5tbAR_`_~0<?7by?nt2H;Y;q;k
znm57u$6&p*FVy@X{g~nz0gk4u+hz&x^2z)n%mhVWjh+SUjICJyNvgUjjYpnd%%N1?
zkViK+LDA1*OKMr5G;@(VhEwiQmWNw~&U7r9-hG=Jv0(pwoj>_M_V8bCOxEdjI63Od
zGhTg<YdYMSleK)xEg~dmz?JRqn68?4DM#4*lso5Yhgun0=r{9EKH%(ZI}x7oZY~Ty
zkfy)k7S<**bnn9pQ7Y`6`-0K#I|=>iEZ+?35JDUlmz8iaPSH+=e0_&Z^SBtPklp~P
zqwZbRyfmKTh|YGUtKp4WZ^8k#poiOVXbn&+orovj<LiG1v$ISBzihR7eeYfA)&|yZ
z6Q_Vsl^~Metgi=T|7}}8?))kQ`%BC<M2gjy4(aOjt?=0B+}I9QW?MQmy=)^kv${eh
zz^MA7`1A$cYnXJIm;bVmKgBtH$<S_yb1Q7!qBRYge;@p`N_lwrLDRmB*L86|bt_wY
z-gj>~cYgUk*9QKC?oP|e7S?Tg#wvlENSvj2F^G>&mWr|1-5YO=J?IIQX|Dc!<r*w%
z!y51r&$-*O#mK{ODYpxBEfF=}!UH73wpYUnq4UI5Rlt>`8H+l>7^R%zmB4qpEx-@A
zZZ94Q^7z9lVr6q~r#oWqw;2#uLt0a}OQ;iD6dYC?i~-76@Ic78?d>XjC}3PC)Q=n3
zgdk}sxh?EbxB{;*!M<i!FP~PKc_-P~JX>v>u|Im`s1E~9FDB~Wi%Z3I-6o>EAc9|H
z#6z%<k5{aM+o_BSmT`=Eo$rs845`kqSu@`(vRJ?Wxo!KV0`2EzS(h}-**3##y0e{j
zEI+xecE`SZ9P=D|rZ?6g^ZUI5((+R?>c6xMj#>-^{f%5fQMxgKe|sIJ0L%2NV;xNS
z12B)sAUw80nFM4XYLrERg(e$;yL>v+eYE{LR!B5~s|zAQ0dW*M0;>2iwLz`gl^#)6
zRTaRIRB6pd&u@Y*+lhJ7^|jHUj^a**-D<Ti;aTEZXYoo@c1%96=_nz0+fJqQt3_=E
z24)WY!|_F8hbyipT{{{=X75ORPr}D|+-fx+0|kN1q^pzadf!uPS-Vd~3pUO}UC^A$
zj6>O8M9AsqhUrw?4r5sKmm{1&d78-pDPVXMFVDKv{gTf=p8YIimg#)ie&wQd7nByl
zA$sggrTaE~ueK+<GA_njo+o=w@bvv0I;Bq?hS$nNow%-TqVO;v+31WmyMwwFwlzSL
zte1}egp;J?D-&URGEN>$5y$qh35j>-ABCVPJQ0+>XyfN!|DiJ_i}o^~u+jv9vVV1n
z1%#lZK*Q$%?Uh!Cnx&_!qT1h#eOCR`Izx*(yIGi#Czk+-)6S*YY*P$0k>gaUoTf0A
zuRxP>dBkKc$)xuX>vy?L1<^SL-goeF)HINvq{ePhG~+d-u!S$!8UwL5r+ZBTNfb~Z
zpWV{A__QFhC*Ygp%T5Y#9h_XDx+44$cCof=^r#P)jYkWD%8%jLktJs@z%90O+o5%z
zgJ#G~t<MxFPx{QHi52CsbdOFO;=QT!rg@^pzy<x-bl7-k*Man90sLoKxalL6y?wY+
z#00<Fvi++!6-OQy5iI!^+UWSrBlL#!u#d0A3AK*(o2!4#0e(`|{gXVo@IFekd<qCN
zD5S2RpOU3v03;>lMZMCt=sU({3Jj2#=#idh%l*0g@Z)^PfA+9L^-v-e%q}y3DP8<F
z**}UQh`4w_5uoN}1{rSJq%+yu>4ao{{;`$3nKite^hE99RCz$~>bcDVKDU9zD|)QI
zXx;SgC7+l0osT-yWHz<#R+Q(ZwB9bBu6^e-%ft^c^lIal$^1C^Y{Wr{r|OczE5W{Q
zsd*22UU_aVAF<Q5?Xl@91{B(Gwa&Q}&yPHgN!bwIs%Jm?6V$IYChDjSmqav1?`&Ut
zBJ;4OiM=fQKR<F>B}K#c`R>Yn_l(XY&K?We`cM;%@_gJy)e-lp?J(>;5pg+gk6Yu`
z(fldr17w*x`*0D*Y^sWM>QLG1#S3+=ze+y#f!dRo;67^*fA2igr#ljQn-(0gY?0YF
z0mk_cIRE)iRD=IC7cACMKKJdI$C>@i0QN7T&5T_)UWFI>k+8M?{maajv~OyuX}o1K
z9{+ImKFM!sfc)Hm4YK>cH})S+@ZWFjf4L%~a8PI6XBBK8qdW8blINp{x9QG)-5vOP
zZ>(muXNnw-j|tS>7|>aq#SCz}ebJXGwi7ovkA36$?U+AGRIFg8E1AHEz+6Z{o`iPs
z4-go<XWsSbe@?#mudxG&(|3tzHH#DeD>i@b()_7Q#8FGfFmtJ&RGi{8DQ%@YCLY0F
zZr^2+Q}e7Wl6p}7Jt%Vj=Og$Xqn~S-)hiXz)!4CsG6b`*P-J{BIEwlu{AD&T(j?`@
z`etS2t_A_YMSZ(=-nDZV-oD<j|K$U<z6|;`GoHoyLZ_l0^F$HRlfV-Z_N94^SiA8g
zG_jj>3$MeQBz_%h*-+<KVwsvx?S~3;7LhD%iVJia`qeBSNg}LAY-demf2#h-h6??2
z(Ov8hHoRX50c5*MQlMuFev&;1KUWElqTeu^RE|BDb-vVp>!iQYX;9TigkSL5nJ6U%
z9>i2=?;}U3XFndQd>c4cX!(EOhw%8*P*~S@%6mSiuKnwFuf6Vzwo5JX19Lg%w9XX=
zbg?pUuwsbl*pAwm!VtY8&^RpjS#p|4#8m~`#)}RNhd6ZkmzfQh549wLjXxjtAH_Md
z{`EU8AvQ&`FtXjQC*V;95Td4vw)<4ep4|#@2d|56yk~KkGN4fP?TjeA`0o5f{;60^
zAECv0@<kuL&K33lT+pDn;G;-4H!j52eC{;Z+ENhdWzgz-r&E7}=kWE(b)q9d=}(9~
z1dpr_>g3U%p32Y!ua~cz<qNasf9+q-T=RA0TeSy%>MD!xig9&`G`qHA{(`O-#06~y
z)@*OjUYA4R0L$Mwd9pKV&gEgDU0rg>Nm^8RiyL*U0eivnQv0|soBMqVuLivCy9AXZ
z|NPpsTiPaSZR~4<o6T|oGu765Z`r-Z`3nja7nu5R1f9v^L??<U33Z?)n|YwWJ()bR
z<BWT|z6U9wEoI&gRR!t_YZ`;sb@t#k@ISw{v);5ck8{h|z2Mz=arxVq0cUMD<r9Yc
z-<UtV0u|`pVtu=C=O>CRw7hkh@`d|hG)!#Sxxfb@^AT>|;n2Rb>ata`G<!Wiw=s;b
z9ArJ)Tv((a$VH?IWjK>Bz|Pj=3*M+LOhWjJl(zoa&+*cz;eOQL$a#GT2)~Fu>#*!P
zp!SJ}nsC{H+$QJ*7<iZtcCvh?i1tZ&Z@^VEoR1spAxB!Wm4@YJ1=_I{Pov)hdx?mL
zhEWHH)zs}`^%-3F*YgL+c%x}OE72hV&M-Ry0?H^o*(x>t7ey=VhFPO~q+&jYCDq@*
z<XR;ZyWq;P{>4jM)H~Jd@sKCaUU^PtHJG=idzN~p%RNi%cXNRdtax<<&$;bE&;09I
z`nBu*9j3(QIWHLj@66e+{6#N6u%;IqZb0(!60*p8!2ON;qi2VYrd5@D_vN1p$_{VJ
zO!L0T;@pF9l^wZxE1f!P8eb&?J;pQ#_fl>D<_%g9({rZaVfchA+dS6qnFxGL&4F{3
z`@hCNo~hjHveKj;!CxeLZRs~L&Nn(^nb<+W;Lc^D9X<!-c|9*sm6f@9cXz$wXbtFZ
z!O)3@n#E}e6Z``0?ahe=<a!bJe_kr^{lDZ=xyAsAlXUGz@IAUIUpk+V-}IfXF3?&V
z>5)8(gR&>>K7yoFXqhA^Y<9Hlw@Ao8L>kcMttl|RL1RyOzsi|xI$h>tXNq3F5Vh-<
zCX4VsCYlF#+qNs4y(uqz!QU)f(Usm1+%*!EHh#Ft!V^RoHOuB3&%Zu*jplQ@X!B%!
zAa6%+Vdh<Q;hS~+Kbw!w5_172Na7V{SK=<@KAWKZVN*@K#Z0Eh1HZi~8APJ0Lj~*3
zEz;?8cj@psQ2L^$B(`Ys@frBbKLL;lByiCCHHQ-h-QHW|8TZxlh_}Si*(J+|vQ0LE
zSo2)NXGv=1zT&pu0#iTaoC`7<@Ui^6gS1w6eLT2Bg2`cHerhK*+Lwqs>npNGY!z?G
z<oe~<nvciUVK1PGy*h6;K3AW5d8g-5!4}0m#{Vu-SrQp#FqHkV4KS_$$D4s`AZPf2
z1^(lbur-S;_@k9RsRsg1d>rM_l_Gb)F%{9;{Bj09kk@Z<K4>+fUNlX4?PRrgo7~0h
z1-}TTv!9_w6JAq0jhhQQVJS)MKrr>W@AYTZ0VAPimdEZw=|wtId0G7oORtXR>Ii+m
z2AtSJ!lPekBe+xWHh$Ai5pCcxoxpYf07$nXx7BdOVAGtALeeDfR#V{BI;0ZeGt?dW
zyJy5($Xfqm;%xtJM)AD#*dHqPR(zDBAc&_UFZcVErH+pvk--+yM6-KwhkxHWPXrMk
z#jj_DVf8D5wH8LauF_bewTQp>$3=3OA;tOZHOgzJMl<6quDbo6T43G;=z9Ht+)UYy
zMDqdzd1ztjd07=H^(|)9HI#+++jxQbQqS)ooanEDCu~e{n#V6lh#n`%g}_4cqQRNQ
zPfA&U6z+-w2+B^(&qE#GRdS<ZJr>~cLjF<0?zHSY03Z=U(nXBESo@r9Kd={}b*NPA
zz{0_sZAu=|Hh^a@<hLba#hbq<$df4D1J~(0u#k&65?=IAh;Z=u)E)4wZpx9+xURU6
zJ3l9&4RIlrSp9_Gs5D%=_8xxiq00_so23iC{%*tmR~x>W$c&!|H+jN-@`2&}D&tf&
z7%_1(n9T`r^KL5t%@L0-O^&8YSQ{5~0Ob}g6t269t;g-J9m9YO9j!joO6c-@YCfPu
zmw$+|yBw5xg0<hkuOG5NPfOm6rD?fU-3J|dK(6yECego-Iz7=OI$g^8(LZzmqnRYQ
zC_CW!ByflPj5V;rhu^lo%mN}eZ`n6vif=3C@fv)+`vq<CqulL@Q6DE#=Rj#}>yp=!
zLFk}Iw}5#c;ECG(-;s#m*Qd*pE8aM-Ka}s=IzYl#<L`q`XzpKv_$@ieo?~0Ps(rhN
ztGuvo;c}+;#@oVGXYIaIZ*kc1-8TiB{oz+RyK8LP`fbp@+;rFcEI>nS6)z0}C<isC
zBgSTNTESC9?QB|fY+-@|E_8(a-Z8(06Z!9{7mfmO;q%U%$)tXMCmGSfcZGiyd{zf+
zdL&2+KUuUl_5*f>H-hYEe!W_8Pg}5%ZSHULrZohdk4LXYwvX7)Z!{Y<%#q%f7-kq?
zPdLgk|7iQlR+9&vCD9Vz=$6;E=Vl+y!$`9lZODE^gQJeOP_KgTzD;VlYvZ~Vi~jrf
ozZUqf1^yqhz_gmdG`=ud%kSOgeC4JE;LrY_4(-j^bK>g%2T0}<Hvj+t

literal 0
HcmV?d00001

diff --git a/static/img/developing/previewing/safari-responsive-design-mode.png b/static/img/developing/previewing/safari-responsive-design-mode.png
new file mode 100644
index 0000000000000000000000000000000000000000..f354511064a4699edb8e4d9f41624c44a9d0d732
GIT binary patch
literal 659018
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%0DN%}`0sl0v8{x!??pcJBJ;U9
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%0D!R^%kEza$^Q)p-(#3+z
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
VdakZ`YytSs@`&x>{DbFi{y(UqJy8Gv

literal 0
HcmV?d00001


From d239178fda9b920bb2a8be934f56a7c2ebc618bf Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 15 Nov 2022 14:40:10 -0500
Subject: [PATCH 131/469] docs(datetime): confirmation buttons use the confirm
 api (#2640)

---
 docs/api/datetime.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 74535d2af91..551deaa5afd 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -265,7 +265,7 @@ By default, `ionChange` is emitted with the new datetime value whenever a new da
 
 ### Showing Confirmation Buttons
 
-The default Done and Cancel buttons are already preconfigured to call the `done` and `cancel` methods, respectively.
+The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#confirm) and [`cancel`](#cancel) methods, respectively.
 
 <ShowingConfirmationButtons />
 

From 99d3f5222ffbfc340f268bf630572d37e9d9586b Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 15 Nov 2022 15:49:45 -0600
Subject: [PATCH 132/469] docs(config): add backButtonDefaultHref to interface
 table (#2645)

---
 docs/angular/config.md | 1 +
 docs/react/config.md   | 1 +
 docs/vue/config.md     | 1 +
 3 files changed, 3 insertions(+)

diff --git a/docs/angular/config.md b/docs/angular/config.md
index 5bf5b26f3e3..01844cc067c 100644
--- a/docs/angular/config.md
+++ b/docs/angular/config.md
@@ -228,6 +228,7 @@ Below are the config options that Ionic uses.
 | `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.                          |
diff --git a/docs/react/config.md b/docs/react/config.md
index b44aee85538..6df438834cb 100644
--- a/docs/react/config.md
+++ b/docs/react/config.md
@@ -86,6 +86,7 @@ Below are the config options that Ionic uses.
 | `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.                          |
diff --git a/docs/vue/config.md b/docs/vue/config.md
index 13f0d7d922a..a8a3ec5129d 100644
--- a/docs/vue/config.md
+++ b/docs/vue/config.md
@@ -87,6 +87,7 @@ Below are the config options that Ionic uses.
 | `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.                          |

From 8eb2205d450df6a2c2291f55e02ec6a66648ac83 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 17 Nov 2022 10:51:08 -0500
Subject: [PATCH 133/469] docs(support): add angular 15 (#2646)

This PR updates the Framework Support guide to note that Angular 15 is supported starting in Ionic v6.3.6
---
 docs/reference/support.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index f1eae9f7250..98f9fa64046 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -42,12 +42,12 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-|    v6     |           v12           |         v14.x^          |    4.0+    |
+|    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 support was added in Ionic v6.1.9.
+> ^ Angular 14.x supported starting in Ionic v6.1.9. Angular 15.x supported starting in Ionic v6.3.6.
 
 #### Ionic React
 

From c79c5dc6c6c81dc95302f1209e32a1bdc268d34f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 17 Nov 2022 11:38:58 -0500
Subject: [PATCH 134/469] docs(backdrop): playground examples (#2649)

---
 docs/api/backdrop.md                          | 210 +-----------------
 static/usage/backdrop/basic/angular.md        |  17 ++
 static/usage/backdrop/basic/demo.html         |  35 +++
 static/usage/backdrop/basic/index.md          |   8 +
 static/usage/backdrop/basic/javascript.md     |  17 ++
 static/usage/backdrop/basic/react.md          |  37 +++
 static/usage/backdrop/basic/vue.md            |  37 +++
 .../styling/angular/example_component_css.md  |  21 ++
 .../styling/angular/example_component_html.md |  21 ++
 static/usage/backdrop/styling/demo.html       |  57 +++++
 static/usage/backdrop/styling/index.md        |  32 +++
 static/usage/backdrop/styling/javascript.md   |  43 ++++
 .../usage/backdrop/styling/react/main_css.md  |  21 ++
 .../usage/backdrop/styling/react/main_tsx.md  |  35 +++
 static/usage/backdrop/styling/vue.md          |  53 +++++
 15 files changed, 443 insertions(+), 201 deletions(-)
 create mode 100644 static/usage/backdrop/basic/angular.md
 create mode 100644 static/usage/backdrop/basic/demo.html
 create mode 100644 static/usage/backdrop/basic/index.md
 create mode 100644 static/usage/backdrop/basic/javascript.md
 create mode 100644 static/usage/backdrop/basic/react.md
 create mode 100644 static/usage/backdrop/basic/vue.md
 create mode 100644 static/usage/backdrop/styling/angular/example_component_css.md
 create mode 100644 static/usage/backdrop/styling/angular/example_component_html.md
 create mode 100644 static/usage/backdrop/styling/demo.html
 create mode 100644 static/usage/backdrop/styling/index.md
 create mode 100644 static/usage/backdrop/styling/javascript.md
 create mode 100644 static/usage/backdrop/styling/react/main_css.md
 create mode 100644 static/usage/backdrop/styling/react/main_tsx.md
 create mode 100644 static/usage/backdrop/styling/vue.md

diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index 9a1cc9a01a2..b9f58e9d174 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-backdrop"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/backdrop/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/backdrop/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 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';
@@ -19,210 +12,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 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/backdrop/basic/index.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
-<!-- Default backdrop -->
-<ion-backdrop></ion-backdrop>
-
-<!-- Backdrop that is not tappable -->
-<ion-backdrop tappable="false"></ion-backdrop>
-
-<!-- Backdrop that is not visible -->
-<ion-backdrop visible="false"></ion-backdrop>
-
-<!-- Backdrop with propagation -->
-<ion-backdrop stopPropagation="false"></ion-backdrop>
-
-<!-- Backdrop that sets dynamic properties -->
-<ion-backdrop
-  [tappable]="enableBackdropDismiss"
-  [visible]="showBackdrop"
-  [stopPropagation]="shouldPropagate">
-</ion-backdrop>
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'backdrop-example',
-  templateUrl: 'backdrop-example.html',
-  styleUrls: ['./backdrop-example.css'],
-})
-export class BackdropExample {
-  enableBackdropDismiss = false;
-  showBackdrop = false;
-  shouldPropagate = false;
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<!-- Default backdrop -->
-<ion-backdrop></ion-backdrop>
-
-<!-- Backdrop that is not tappable -->
-<ion-backdrop tappable="false"></ion-backdrop>
-
-<!-- Backdrop that is not visible -->
-<ion-backdrop visible="false"></ion-backdrop>
-
-<!-- Backdrop with propagation -->
-<ion-backdrop stop-propagation="false"></ion-backdrop>
-
-<!-- Backdrop that sets dynamic properties -->
-<ion-backdrop id="customBackdrop"></ion-backdrop>
-```
-
-```javascript
-var backdrop = document.getElementById('customBackdrop');
-backdrop.visible = false;
-backdrop.tappable = false;
-backdrop.stopPropagation = false;
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonBackdrop, IonContent } from '@ionic/react';
-
-export const BackdropExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default backdrop --*/}
-    <IonBackdrop />
-
-    {/*-- Backdrop that is not tappable --*/}
-    <IonBackdrop tappable={false} />
-
-    {/*-- Backdrop that is not visible --*/}
-    <IonBackdrop visible={false} />
-
-    {/*-- Backdrop with propagation --*/}
-    <IonBackdrop stopPropagation={false} />
-
-    <IonBackdrop tappable={true} visible={true} stopPropagation={true} />
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'backdrop-example',
-  styleUrl: 'backdrop-example.css'
-})
-export class BackdropExample {
-  render() {
-    const enableBackdropDismiss = false;
-    const showBackdrop = false;
-    const shouldPropagate = false;
-
-    return [
-      // Default backdrop
-      <ion-backdrop></ion-backdrop>,
-
-      // Backdrop that is not tappable
-      <ion-backdrop tappable={false}></ion-backdrop>,
-
-      // Backdrop that is not visible
-      <ion-backdrop visible={false}></ion-backdrop>,
-
-      // Backdrop with propagation
-      <ion-backdrop stopPropagation={false}></ion-backdrop>,
-
-      // Backdrop that sets dynamic properties
-      <ion-backdrop
-        tappable={enableBackdropDismiss}
-        visible={showBackdrop}
-        stopPropagation={shouldPropagate}>
-      </ion-backdrop>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <!-- Default backdrop -->
-  <ion-backdrop></ion-backdrop>
-
-  <!-- Backdrop that is not tappable -->
-  <ion-backdrop tappable="false"></ion-backdrop>
-
-  <!-- Backdrop that is not visible -->
-  <ion-backdrop visible="false"></ion-backdrop>
-
-  <!-- Backdrop with propagation -->
-  <ion-backdrop stop-propagation="false"></ion-backdrop>
+<Basic />
 
-  <!-- Backdrop that sets dynamic properties -->
-  <ion-backdrop
-    :tappable="enableBackdropDismiss"
-    :visible="showBackdrop"
-    :stop-propagation="shouldPropagate">
-  </ion-backdrop>
-</template>
+## Styling
 
-<script>
-import { IonBackdrop } from '@ionic/vue';
-import { defineComponent } from 'vue';
+The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`. 
 
-export default defineComponent({
-  components: { IonBackdrop },
-  setup() {
-    return {
-      enableBackdropDismiss: true,
-      showBackdrop: true,
-      shouldPropagate: true
-    }
-  }
-});
-</script>
-```
+Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`).
 
-</TabItem>
+import Styling from '@site/static/usage/backdrop/styling/index.md';
 
-</Tabs>
+<Styling />
 
 ## Properties
 <Props />
diff --git a/static/usage/backdrop/basic/angular.md b/static/usage/backdrop/basic/angular.md
new file mode 100644
index 00000000000..c98b5316ebb
--- /dev/null
+++ b/static/usage/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/backdrop/basic/demo.html b/static/usage/backdrop/basic/demo.html
new file mode 100644
index 00000000000..e020f125604
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/backdrop/basic/index.md b/static/usage/backdrop/basic/index.md
new file mode 100644
index 00000000000..32ae7d2b841
--- /dev/null
+++ b/static/usage/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/backdrop/basic/demo.html" devicePreview={true} />
diff --git a/static/usage/backdrop/basic/javascript.md b/static/usage/backdrop/basic/javascript.md
new file mode 100644
index 00000000000..1a9d09c2da3
--- /dev/null
+++ b/static/usage/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/backdrop/basic/react.md b/static/usage/backdrop/basic/react.md
new file mode 100644
index 00000000000..9d6529c0cac
--- /dev/null
+++ b/static/usage/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/backdrop/basic/vue.md b/static/usage/backdrop/basic/vue.md
new file mode 100644
index 00000000000..a42da95a2e8
--- /dev/null
+++ b/static/usage/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/backdrop/styling/angular/example_component_css.md b/static/usage/backdrop/styling/angular/example_component_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/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/backdrop/styling/angular/example_component_html.md b/static/usage/backdrop/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..3c951690078
--- /dev/null
+++ b/static/usage/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/backdrop/styling/demo.html b/static/usage/backdrop/styling/demo.html
new file mode 100644
index 00000000000..c092db3c0a6
--- /dev/null
+++ b/static/usage/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>
diff --git a/static/usage/backdrop/styling/index.md b/static/usage/backdrop/styling/index.md
new file mode 100644
index 00000000000..c4a355e7075
--- /dev/null
+++ b/static/usage/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/backdrop/styling/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/backdrop/styling/javascript.md b/static/usage/backdrop/styling/javascript.md
new file mode 100644
index 00000000000..6c30f0c5c90
--- /dev/null
+++ b/static/usage/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/backdrop/styling/react/main_css.md b/static/usage/backdrop/styling/react/main_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/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/backdrop/styling/react/main_tsx.md b/static/usage/backdrop/styling/react/main_tsx.md
new file mode 100644
index 00000000000..978b47ce750
--- /dev/null
+++ b/static/usage/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/backdrop/styling/vue.md b/static/usage/backdrop/styling/vue.md
new file mode 100644
index 00000000000..7e884eb2fb4
--- /dev/null
+++ b/static/usage/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>
+```

From c4947cc40933aaa2eb7653525a28620030a8788a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 18 Nov 2022 13:46:09 -0500
Subject: [PATCH 135/469] docs(split-pane): add component playgrounds (#2654)

---
 docs/api/split-pane.md                        | 196 ++----------------
 .../spinner/theming/css-properties/angular.md |   3 -
 static/usage/split-pane/basic/angular.md      |  25 +++
 static/usage/split-pane/basic/demo.html       |  40 ++++
 static/usage/split-pane/basic/index.md        |   8 +
 static/usage/split-pane/basic/javascript.md   |  25 +++
 static/usage/split-pane/basic/react.md        |  33 +++
 static/usage/split-pane/basic/vue.md          |  36 ++++
 .../angular/example_component_css.md          |   8 +
 .../angular/example_component_html.md         |  25 +++
 .../theming/css-properties/demo.html          |  48 +++++
 .../theming/css-properties/index.md           |  32 +++
 .../theming/css-properties/javascript.md      |  34 +++
 .../theming/css-properties/react/main_css.md  |   8 +
 .../theming/css-properties/react/main_tsx.md  |  35 ++++
 .../split-pane/theming/css-properties/vue.md  |  45 ++++
 16 files changed, 415 insertions(+), 186 deletions(-)
 delete mode 100644 static/usage/spinner/theming/css-properties/angular.md
 create mode 100644 static/usage/split-pane/basic/angular.md
 create mode 100644 static/usage/split-pane/basic/demo.html
 create mode 100644 static/usage/split-pane/basic/index.md
 create mode 100644 static/usage/split-pane/basic/javascript.md
 create mode 100644 static/usage/split-pane/basic/react.md
 create mode 100644 static/usage/split-pane/basic/vue.md
 create mode 100644 static/usage/split-pane/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/split-pane/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/split-pane/theming/css-properties/demo.html
 create mode 100644 static/usage/split-pane/theming/css-properties/index.md
 create mode 100644 static/usage/split-pane/theming/css-properties/javascript.md
 create mode 100644 static/usage/split-pane/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/split-pane/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/split-pane/theming/css-properties/vue.md

diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 4c992665270..5c7955ac89e 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -1,10 +1,6 @@
 ---
 title: "ion-split-pane"
-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/split-pane/props.md';
 import Events from '@site/static/auto-generated/split-pane/events.md';
@@ -22,20 +18,20 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 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/split-pane/basic/index.md';
+
+<Basic />
 
 ## Setting Breakpoints
 
@@ -58,179 +54,13 @@ By default, the split pane will expand when the screen is larger than 992px. To
  | `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/split-pane/theming/css-properties/index.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-split-pane contentId="main">
-  <!--  the side menu  -->
-  <ion-menu contentId="main">
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  </ion-menu>
-
-  <!-- the main content -->
-  <ion-router-outlet id="main"></ion-router-outlet>
-</ion-split-pane>
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-split-pane content-id="main">
-  <!--  the side menu  -->
-  <ion-menu content-id="main">
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  </ion-menu>
-
-  <!-- the main content -->
-  <ion-content id="main">
-    <h1>Hello</h1>
-  </ion-content>
-</ion-split-pane>
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import {
-  IonSplitPane,
-  IonMenu,
-  IonHeader,
-  IonToolbar,
-  IonTitle,
-  IonRouterOutlet,
-  IonContent,
-  IonPage
-} from '@ionic/react';
-
-export const SplitPlaneExample: React.SFC<{}> = () => (
-  <IonContent>
-    <IonSplitPane contentId="main">
-      {/*--  the side menu  --*/}
-      <IonMenu contentId="main">
-        <IonHeader>
-          <IonToolbar>
-            <IonTitle>Menu</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-      </IonMenu>
-
-      {/*-- the main content --*/}
-      <IonPage id="main"/>
-    </IonSplitPane>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'split-pane-example',
-  styleUrl: 'split-pane-example.css'
-})
-export class SplitPaneExample {
-  render() {
-    return [
-      <ion-split-pane content-id="main">
-        {/*  the side menu */}
-        <ion-menu content-id="main">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Menu</ion-title>
-            </ion-toolbar>
-          </ion-header>
-        </ion-menu>
-
-        {/* the main content */}
-        <ion-router-outlet id="main"></ion-router-outlet>
-      </ion-split-pane>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-split-pane content-id="main">
-    <!--  the side menu  -->
-    <ion-menu content-id="main">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Menu</ion-title>
-        </ion-toolbar>
-      </ion-header>
-    </ion-menu>
-
-    <!-- the main content -->
-    <ion-router-outlet id="main"></ion-router-outlet>
-  </ion-split-pane>
-</template>
-
-<script>
-import { 
-  IonHeader, 
-  IonMenu, 
-  IonRouterOutlet, 
-  IonSplitPane, 
-  IonTitle, 
-  IonToolbar
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonHeader, 
-    IonMenu, 
-    IonRouterOutlet, 
-    IonSplitPane, 
-    IonTitle, 
-    IonToolbar
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
+<CSSProperties />
 
 ## Properties
 <Props />
diff --git a/static/usage/spinner/theming/css-properties/angular.md b/static/usage/spinner/theming/css-properties/angular.md
deleted file mode 100644
index 4b3b8d665b4..00000000000
--- a/static/usage/spinner/theming/css-properties/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-spinner></ion-spinner>
-```
diff --git a/static/usage/split-pane/basic/angular.md b/static/usage/split-pane/basic/angular.md
new file mode 100644
index 00000000000..0183d57a9fa
--- /dev/null
+++ b/static/usage/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/split-pane/basic/demo.html b/static/usage/split-pane/basic/demo.html
new file mode 100644
index 00000000000..2ebc18e6dbb
--- /dev/null
+++ b/static/usage/split-pane/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>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
new file mode 100644
index 00000000000..7e6b45c709b
--- /dev/null
+++ b/static/usage/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/split-pane/basic/demo.html" size="500px" />
diff --git a/static/usage/split-pane/basic/javascript.md b/static/usage/split-pane/basic/javascript.md
new file mode 100644
index 00000000000..626cc1ee03f
--- /dev/null
+++ b/static/usage/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/split-pane/basic/react.md b/static/usage/split-pane/basic/react.md
new file mode 100644
index 00000000000..4088c068f1d
--- /dev/null
+++ b/static/usage/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/split-pane/basic/vue.md b/static/usage/split-pane/basic/vue.md
new file mode 100644
index 00000000000..b514acbcf6e
--- /dev/null
+++ b/static/usage/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/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/split-pane/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/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/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/split-pane/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4772826c933
--- /dev/null
+++ b/static/usage/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/split-pane/theming/css-properties/demo.html b/static/usage/split-pane/theming/css-properties/demo.html
new file mode 100644
index 00000000000..e4e45f9765a
--- /dev/null
+++ b/static/usage/split-pane/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>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
new file mode 100644
index 00000000000..c2951a8ebaa
--- /dev/null
+++ b/static/usage/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/split-pane/theming/css-properties/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/split-pane/theming/css-properties/javascript.md b/static/usage/split-pane/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..943993aa380
--- /dev/null
+++ b/static/usage/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/split-pane/theming/css-properties/react/main_css.md b/static/usage/split-pane/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/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/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/split-pane/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7456a34359d
--- /dev/null
+++ b/static/usage/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/split-pane/theming/css-properties/vue.md b/static/usage/split-pane/theming/css-properties/vue.md
new file mode 100644
index 00000000000..cc891eaeda1
--- /dev/null
+++ b/static/usage/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>
+```

From c91ed30411507e3f57c7b2ed70ac62703550b456 Mon Sep 17 00:00:00 2001
From: OBE Rocks <33532265+oberocks@users.noreply.github.com>
Date: Thu, 1 Dec 2022 16:14:23 -0500
Subject: [PATCH 136/469] docs(vue): specify lang attribute for quickstart
 example (#2657)

---
 docs/vue/quickstart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 91af4c2f491..de98ac8bc6d 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -479,7 +479,7 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment.
   </ion-page>
 </template>
 
-<script>
+<script lang="ts">
   import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 

From 4019c3084b716584cf639b7303f2b60644121a92 Mon Sep 17 00:00:00 2001
From: Mohammadreza <moharnadreza@gmail.com>
Date: Fri, 2 Dec 2022 00:45:57 +0330
Subject: [PATCH 137/469] docs(content): code example comments (#2655)

---
 .../content/scroll-methods/angular/example_component_ts.md    | 2 +-
 static/usage/content/scroll-methods/demo.html                 | 2 +-
 static/usage/content/scroll-methods/javascript.md             | 2 +-
 static/usage/content/scroll-methods/react.md                  | 2 +-
 static/usage/content/scroll-methods/vue.md                    | 4 ++++
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/static/usage/content/scroll-methods/angular/example_component_ts.md b/static/usage/content/scroll-methods/angular/example_component_ts.md
index cd595635cd9..1975fe3b341 100644
--- a/static/usage/content/scroll-methods/angular/example_component_ts.md
+++ b/static/usage/content/scroll-methods/angular/example_component_ts.md
@@ -17,7 +17,7 @@ export class ExampleComponent {
 
   scrollToTop() {
     // Passing a duration to the method makes it so the scroll slowly
-    // goes to the bottom instead of instantly
+    // goes to the top instead of instantly
     this.content.scrollToTop(500);
   }
 }
diff --git a/static/usage/content/scroll-methods/demo.html b/static/usage/content/scroll-methods/demo.html
index c5983316135..44a052fbbdb 100644
--- a/static/usage/content/scroll-methods/demo.html
+++ b/static/usage/content/scroll-methods/demo.html
@@ -39,7 +39,7 @@ <h1>Click on the buttons to scroll the content.</h1>
 
     function scrollToTop() {
       // Passing a duration to the method makes it so the scroll slowly
-      // goes to the bottom instead of instantly
+      // goes to the top instead of instantly
       content.scrollToTop(500);
     }
   </script>
diff --git a/static/usage/content/scroll-methods/javascript.md b/static/usage/content/scroll-methods/javascript.md
index 81bf4ba4867..b8f3bb1e13e 100644
--- a/static/usage/content/scroll-methods/javascript.md
+++ b/static/usage/content/scroll-methods/javascript.md
@@ -24,7 +24,7 @@
 
   function scrollToTop() {
     // Passing a duration to the method makes it so the scroll slowly
-    // goes to the bottom instead of instantly
+    // goes to the top instead of instantly
     content.scrollToTop(500);
   }
 </script>
diff --git a/static/usage/content/scroll-methods/react.md b/static/usage/content/scroll-methods/react.md
index 4d7799f6ab3..9526a8884a4 100644
--- a/static/usage/content/scroll-methods/react.md
+++ b/static/usage/content/scroll-methods/react.md
@@ -13,7 +13,7 @@ function Example() {
 
   function scrollToTop() {
     // Passing a duration to the method makes it so the scroll slowly
-    // goes to the bottom instead of instantly
+    // goes to the top instead of instantly
     contentRef.current?.scrollToTop(500);
   }
 
diff --git a/static/usage/content/scroll-methods/vue.md b/static/usage/content/scroll-methods/vue.md
index 0dcfff9c7de..c3e63abb721 100644
--- a/static/usage/content/scroll-methods/vue.md
+++ b/static/usage/content/scroll-methods/vue.md
@@ -23,9 +23,13 @@
     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);
       },
     }

From 66516de9dff8edf4a5d35d290f97ebccc23c5ab0 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 7 Dec 2022 11:56:04 -0500
Subject: [PATCH 138/469] feat: version playground examples and docs (#2667)

---
 docs/api/accordion.md                         |    26 +-
 docs/api/action-sheet.md                      |     6 +-
 docs/api/alert.md                             |    10 +-
 docs/api/avatar.md                            |     8 +-
 docs/api/backdrop.md                          |     4 +-
 docs/api/badge.md                             |     6 +-
 docs/api/breadcrumbs.md                       |    18 +-
 docs/api/button.md                            |    16 +-
 docs/api/buttons.md                           |     8 +-
 docs/api/card.md                              |    12 +-
 docs/api/checkbox.md                          |     6 +-
 docs/api/chip.md                              |     8 +-
 docs/api/content.md                           |    18 +-
 docs/api/datetime-button.md                   |     2 +-
 docs/api/datetime.md                          |    40 +-
 docs/api/fab.md                               |    14 +-
 docs/api/footer.md                            |    10 +-
 docs/api/grid.md                              |    28 +-
 docs/api/header.md                            |    12 +-
 docs/api/img.md                               |     2 +-
 docs/api/infinite-scroll.md                   |     6 +-
 docs/api/input.md                             |    18 +-
 docs/api/item-divider.md                      |     6 +-
 docs/api/item-group.md                        |     4 +-
 docs/api/item-sliding.md                      |     6 +-
 docs/api/item.md                              |    28 +-
 docs/api/label.md                             |     8 +-
 docs/api/list-header.md                       |    10 +-
 docs/api/list.md                              |     6 +-
 docs/api/loading.md                           |     6 +-
 docs/api/menu.md                              |     8 +-
 docs/api/modal.md                             |    26 +-
 docs/api/nav.md                               |     2 +-
 docs/api/note.md                              |     8 +-
 docs/api/picker.md                            |     4 +-
 docs/api/popover.md                           |    16 +-
 docs/api/progress-bar.md                      |    14 +-
 docs/api/radio.md                             |    10 +-
 docs/api/range.md                             |    18 +-
 docs/api/refresher.md                         |    10 +-
 docs/api/reorder.md                           |    12 +-
 docs/api/ripple-effect.md                     |     6 +-
 docs/api/searchbar.md                         |    16 +-
 docs/api/segment-button.md                    |     8 +-
 docs/api/segment.md                           |    10 +-
 docs/api/select.md                            |    20 +-
 docs/api/skeleton-text.md                     |     4 +-
 docs/api/spinner.md                           |     6 +-
 docs/api/split-pane.md                        |     4 +-
 docs/api/text.md                              |     2 +-
 docs/api/textarea.md                          |     8 +-
 docs/api/thumbnail.md                         |     6 +-
 docs/api/title.md                             |     8 +-
 docs/api/toast.md                             |     8 +-
 docs/api/toggle.md                            |    10 +-
 docs/api/toolbar.md                           |    14 +-
 docusaurus.config.js                          |     2 +-
 src/components/global/Playground/index.tsx    |    28 +-
 .../global/Playground/stackblitz.utils.ts     |    66 +-
 .../stackblitz/{ => v6}/angular/angular.json  |     0
 .../{ => v6}/angular/app.component.css        |     0
 .../{ => v6}/angular/app.component.html       |     0
 .../{ => v6}/angular/app.component.ts         |     0
 .../angular/app.component.withContent.html    |     0
 .../stackblitz/{ => v6}/angular/app.module.ts |     0
 .../{ => v6}/angular/example.component.ts     |     0
 .../stackblitz/{ => v6}/angular/global.css    |     0
 .../code/stackblitz/{ => v6}/angular/main.ts  |     0
 .../code/stackblitz/v6/angular/package.json   |     6 +
 .../stackblitz/{ => v6}/angular/styles.css    |     0
 .../stackblitz/{ => v6}/angular/tsconfig.json |     0
 .../stackblitz/{ => v6}/angular/variables.css |     0
 .../code/stackblitz/{ => v6}/html/index.html  |     0
 static/code/stackblitz/{ => v6}/html/index.ts |     0
 .../{ => v6}/html/index.withContent.html      |     0
 static/code/stackblitz/v6/html/package.json   |     5 +
 .../stackblitz/{ => v6}/html/variables.css    |     0
 static/code/stackblitz/{ => v6}/react/app.tsx |     0
 .../{ => v6}/react/app.withContent.tsx        |     0
 .../code/stackblitz/{ => v6}/react/index.html |     0
 .../code/stackblitz/{ => v6}/react/index.tsx  |     0
 .../{ => v6}/react/package-lock.json          |     0
 .../stackblitz/{ => v6}/react/package.json    |     0
 .../stackblitz/{ => v6}/react/tsconfig.json   |     0
 .../stackblitz/{ => v6}/react/variables.css   |     0
 static/code/stackblitz/{ => v6}/vue/App.vue   |     0
 .../{ => v6}/vue/App.withContent.vue          |     0
 static/code/stackblitz/{ => v6}/vue/env.d.ts  |     0
 .../code/stackblitz/{ => v6}/vue/index.html   |     0
 static/code/stackblitz/{ => v6}/vue/main.ts   |     0
 .../stackblitz/{ => v6}/vue/package-lock.json |     0
 .../code/stackblitz/{ => v6}/vue/package.json |     0
 .../stackblitz/{ => v6}/vue/tsconfig.json     |     0
 .../{ => v6}/vue/tsconfig.node.json           |     0
 .../stackblitz/{ => v6}/vue/variables.css     |     0
 .../stackblitz/{ => v6}/vue/vite.config.ts    |     0
 .../code/stackblitz/v7/angular/angular.json   |   118 +
 .../stackblitz/v7/angular/app.component.css   |     0
 .../stackblitz/v7/angular/app.component.html  |     3 +
 .../stackblitz/v7/angular/app.component.ts    |     8 +
 .../v7/angular/app.component.withContent.html |     5 +
 .../code/stackblitz/v7/angular/app.module.ts  |    18 +
 .../v7/angular/example.component.ts           |     8 +
 static/code/stackblitz/v7/angular/global.css  |     0
 static/code/stackblitz/v7/angular/main.ts     |     7 +
 .../code/stackblitz/v7/angular/package.json   |     6 +
 static/code/stackblitz/v7/angular/styles.css  |    26 +
 .../code/stackblitz/v7/angular/tsconfig.json  |    22 +
 .../code/stackblitz/v7/angular/variables.css  |   236 +
 static/code/stackblitz/v7/html/index.html     |    22 +
 static/code/stackblitz/v7/html/index.ts       |    29 +
 .../stackblitz/v7/html/index.withContent.html |    24 +
 static/code/stackblitz/v7/html/package.json   |     5 +
 static/code/stackblitz/v7/html/variables.css  |   236 +
 static/code/stackblitz/v7/react/app.tsx       |    35 +
 .../stackblitz/v7/react/app.withContent.tsx   |    37 +
 static/code/stackblitz/v7/react/index.html    |     3 +
 static/code/stackblitz/v7/react/index.tsx     |    12 +
 .../stackblitz/v7/react/package-lock.json     | 27809 ++++++++++++++++
 static/code/stackblitz/v7/react/package.json  |    37 +
 static/code/stackblitz/v7/react/tsconfig.json |    20 +
 static/code/stackblitz/v7/react/variables.css |   236 +
 static/code/stackblitz/v7/vue/App.vue         |    18 +
 .../stackblitz/v7/vue/App.withContent.vue     |    20 +
 static/code/stackblitz/v7/vue/env.d.ts        |     8 +
 static/code/stackblitz/v7/vue/index.html      |    16 +
 static/code/stackblitz/v7/vue/main.ts         |    27 +
 .../code/stackblitz/v7/vue/package-lock.json  |  1403 +
 static/code/stackblitz/v7/vue/package.json    |    21 +
 static/code/stackblitz/v7/vue/tsconfig.json   |    18 +
 .../code/stackblitz/v7/vue/tsconfig.node.json |     8 +
 static/code/stackblitz/v7/vue/variables.css   |   236 +
 static/code/stackblitz/v7/vue/vite.config.ts  |     7 +
 .../accessibility/animations/demo.html        |    46 -
 .../accessibility/animations/index.md         |    16 -
 static/usage/accordion/basic/demo.html        |    46 -
 static/usage/accordion/basic/index.md         |    17 -
 .../advanced-expansion-styles/demo.html       |    79 -
 .../advanced-expansion-styles/index.md        |    34 -
 .../customization/expansion-styles/demo.html  |    46 -
 .../customization/expansion-styles/index.md   |    17 -
 .../accordion/customization/icons/demo.html   |    46 -
 .../accordion/customization/icons/index.md    |    17 -
 .../accordion/customization/theming/demo.html |    69 -
 .../accordion/customization/theming/index.md  |    32 -
 .../usage/accordion/disable-group/demo.html   |    46 -
 static/usage/accordion/disable-group/index.md |    16 -
 .../usage/accordion/disable/group/demo.html   |    46 -
 static/usage/accordion/disable/group/index.md |    16 -
 .../accordion/disable/individual/demo.html    |    46 -
 .../accordion/disable/individual/index.md     |    17 -
 .../usage/accordion/listen-changes/demo.html  |    70 -
 .../usage/accordion/listen-changes/index.md   |    24 -
 static/usage/accordion/multiple/demo.html     |    51 -
 static/usage/accordion/multiple/index.md      |    17 -
 .../usage/accordion/readonly/group/demo.html  |    46 -
 .../usage/accordion/readonly/group/index.md   |    17 -
 .../accordion/readonly/individual/demo.html   |    46 -
 .../accordion/readonly/individual/index.md    |    16 -
 static/usage/accordion/toggle/demo.html       |    66 -
 static/usage/accordion/toggle/index.md        |    24 -
 static/usage/action-sheet/basic/demo.html     |    70 -
 static/usage/action-sheet/basic/index.md      |    34 -
 .../theming/css-properties/demo.html          |    67 -
 .../theming/css-properties/index.md           |    34 -
 .../action-sheet/theming/styling/demo.html    |    84 -
 .../action-sheet/theming/styling/index.md     |    34 -
 static/usage/alert/buttons/demo.html          |    64 -
 static/usage/alert/buttons/index.md           |    24 -
 static/usage/alert/customization/demo.html    |    79 -
 static/usage/alert/customization/index.md     |    33 -
 static/usage/alert/inputs/radios/demo.html    |    52 -
 static/usage/alert/inputs/radios/index.md     |    24 -
 .../usage/alert/inputs/text-inputs/demo.html  |    56 -
 .../usage/alert/inputs/text-inputs/index.md   |    24 -
 .../alert/presenting/controller/demo.html     |    37 -
 .../alert/presenting/controller/index.md      |    24 -
 static/usage/avatar/basic/demo.html           |    27 -
 static/usage/avatar/basic/index.md            |     8 -
 static/usage/avatar/chip/demo.html            |    30 -
 static/usage/avatar/chip/index.md             |     8 -
 static/usage/avatar/item/demo.html            |    30 -
 static/usage/avatar/item/index.md             |     8 -
 .../avatar/theming/css-properties/demo.html   |    32 -
 .../avatar/theming/css-properties/index.md    |    32 -
 static/usage/backdrop/basic/demo.html         |    35 -
 static/usage/backdrop/basic/index.md          |     8 -
 static/usage/backdrop/styling/demo.html       |    57 -
 static/usage/backdrop/styling/index.md        |    32 -
 static/usage/badge/basic/demo.html            |    39 -
 static/usage/badge/basic/index.md             |    11 -
 static/usage/badge/theming/colors/demo.html   |    55 -
 static/usage/badge/theming/colors/index.md    |    12 -
 .../badge/theming/css-properties/demo.html    |    42 -
 .../badge/theming/css-properties/index.md     |    31 -
 static/usage/breadcrumbs/basic/demo.html      |    29 -
 static/usage/breadcrumbs/basic/index.md       |    11 -
 .../expand-on-click/demo.html                 |    39 -
 .../collapsing-items/expand-on-click/index.md |    23 -
 .../items-before-after/demo.html              |    68 -
 .../items-before-after/index.md               |    12 -
 .../collapsing-items/max-items/demo.html      |    31 -
 .../collapsing-items/max-items/index.md       |    11 -
 .../popover-on-click/demo.html                |    62 -
 .../popover-on-click/index.md                 |    24 -
 .../icons/custom-separators/demo.html         |    41 -
 .../icons/custom-separators/index.md          |    11 -
 .../icons/icons-on-items/demo.html            |    68 -
 .../breadcrumbs/icons/icons-on-items/index.md |    12 -
 .../breadcrumbs/theming/colors/demo.html      |    29 -
 .../usage/breadcrumbs/theming/colors/index.md |    11 -
 .../theming/css-properties/demo.html          |    37 -
 .../theming/css-properties/index.md           |    30 -
 static/usage/button/basic/demo.html           |    26 -
 static/usage/button/basic/index.md            |     8 -
 static/usage/button/expand/demo.html          |    32 -
 static/usage/button/expand/index.md           |     8 -
 static/usage/button/fill/demo.html            |    28 -
 static/usage/button/fill/index.md             |     8 -
 static/usage/button/icons/demo.html           |    37 -
 static/usage/button/icons/index.md            |     8 -
 static/usage/button/shape/demo.html           |    26 -
 static/usage/button/shape/index.md            |     8 -
 static/usage/button/size/demo.html            |    27 -
 static/usage/button/size/index.md             |     8 -
 static/usage/button/theming/colors/demo.html  |    41 -
 static/usage/button/theming/colors/index.md   |     8 -
 .../button/theming/css-properties/demo.html   |    47 -
 .../button/theming/css-properties/index.md    |    32 -
 static/usage/buttons/basic/demo.html          |    29 -
 static/usage/buttons/basic/index.md           |     8 -
 static/usage/buttons/placement/demo.html      |    49 -
 static/usage/buttons/placement/index.md       |     8 -
 static/usage/buttons/types/demo.html          |   106 -
 static/usage/buttons/types/index.md           |     8 -
 static/usage/card/basic/demo.html             |    46 -
 static/usage/card/basic/index.md              |    31 -
 static/usage/card/buttons/demo.html           |    49 -
 static/usage/card/buttons/index.md            |    32 -
 static/usage/card/list/demo.html              |    81 -
 static/usage/card/list/index.md               |    32 -
 static/usage/card/media/demo.html             |    47 -
 static/usage/card/media/index.md              |    32 -
 static/usage/card/theming/colors/demo.html    |   137 -
 static/usage/card/theming/colors/index.md     |    32 -
 .../card/theming/css-properties/demo.html     |    59 -
 .../card/theming/css-properties/index.md      |    31 -
 static/usage/checkbox/basic/demo.html         |    24 -
 static/usage/checkbox/basic/index.md          |    16 -
 static/usage/checkbox/indeterminate/demo.html |    24 -
 static/usage/checkbox/indeterminate/index.md  |    16 -
 .../checkbox/theming/css-properties/demo.html |    35 -
 .../checkbox/theming/css-properties/index.md  |    31 -
 static/usage/chip/basic/demo.html             |    27 -
 static/usage/chip/basic/index.md              |     8 -
 static/usage/chip/slots/demo.html             |    37 -
 static/usage/chip/slots/index.md              |     8 -
 static/usage/chip/theming/colors/demo.html    |    45 -
 static/usage/chip/theming/colors/index.md     |     8 -
 .../chip/theming/css-properties/demo.html     |    32 -
 .../chip/theming/css-properties/index.md      |    31 -
 static/usage/content/basic/demo.html          |    29 -
 static/usage/content/basic/index.md           |    13 -
 static/usage/content/fixed/demo.html          |    38 -
 static/usage/content/fixed/index.md           |    33 -
 static/usage/content/fullscreen/demo.html     |    48 -
 static/usage/content/fullscreen/index.md      |    33 -
 static/usage/content/header-footer/demo.html  |    43 -
 static/usage/content/header-footer/index.md   |    13 -
 static/usage/content/scroll-events/demo.html  |    39 -
 static/usage/content/scroll-events/index.md   |    25 -
 static/usage/content/scroll-methods/demo.html |    48 -
 static/usage/content/scroll-methods/index.md  |    25 -
 static/usage/content/theming/colors/demo.html |    69 -
 static/usage/content/theming/colors/index.md  |    13 -
 .../content/theming/css-properties/demo.html  |    36 -
 .../content/theming/css-properties/index.md   |    33 -
 .../theming/css-shadow-parts/demo.html        |    39 -
 .../content/theming/css-shadow-parts/index.md |    33 -
 static/usage/datetime-button/basic/demo.html  |    30 -
 static/usage/datetime-button/basic/index.md   |     8 -
 static/usage/datetime/basic/demo.html         |    26 -
 static/usage/datetime/basic/index.md          |     8 -
 .../customizing-button-texts/demo.html        |    31 -
 .../buttons/customizing-button-texts/index.md |     8 -
 .../buttons/customizing-buttons/demo.html     |    37 -
 .../buttons/customizing-buttons/index.md      |     8 -
 .../showing-confirmation-buttons/demo.html    |    27 -
 .../showing-confirmation-buttons/index.md     |     8 -
 .../date-constraints/advanced/demo.html       |    40 -
 .../date-constraints/advanced/index.md        |    24 -
 .../date-constraints/max-min/demo.html        |    30 -
 .../date-constraints/max-min/index.md         |     8 -
 .../date-constraints/values/demo.html         |    29 -
 .../datetime/date-constraints/values/index.md |     8 -
 .../localization/custom-locale/demo.html      |    26 -
 .../localization/custom-locale/index.md       |     8 -
 .../localization/first-day-of-week/demo.html  |    26 -
 .../localization/first-day-of-week/index.md   |     8 -
 .../localization/hour-cycle/demo.html         |    26 -
 .../datetime/localization/hour-cycle/index.md |     8 -
 .../locale-extension-tags/demo.html           |    26 -
 .../locale-extension-tags/index.md            |     8 -
 .../localization/time-label/demo.html         |    28 -
 .../datetime/localization/time-label/index.md |     8 -
 static/usage/datetime/multiple/demo.html      |    31 -
 static/usage/datetime/multiple/index.md       |     8 -
 .../datetime/presentation/date/demo.html      |    26 -
 .../usage/datetime/presentation/date/index.md |     8 -
 .../presentation/month-and-year/demo.html     |    26 -
 .../presentation/month-and-year/index.md      |     8 -
 .../datetime/presentation/time/demo.html      |    26 -
 .../usage/datetime/presentation/time/index.md |     8 -
 .../datetime/presentation/wheel/demo.html     |    26 -
 .../datetime/presentation/wheel/index.md      |     8 -
 static/usage/datetime/theming/demo.html       |    75 -
 static/usage/datetime/theming/index.md        |    32 -
 .../title/customizing-title/demo.html         |    28 -
 .../datetime/title/customizing-title/index.md |     8 -
 .../title/showing-default-title/demo.html     |    26 -
 .../title/showing-default-title/index.md      |     8 -
 static/usage/fab/basic/demo.html              |    29 -
 static/usage/fab/basic/index.md               |     8 -
 static/usage/fab/button-sizing/demo.html      |    40 -
 static/usage/fab/button-sizing/index.md       |     8 -
 static/usage/fab/list-side/demo.html          |    55 -
 static/usage/fab/list-side/index.md           |     8 -
 static/usage/fab/positioning/demo.html        |    77 -
 static/usage/fab/positioning/index.md         |    13 -
 static/usage/fab/theming/colors/demo.html     |    55 -
 static/usage/fab/theming/colors/index.md      |     8 -
 .../theming/css-custom-properties/demo.html   |    50 -
 .../theming/css-custom-properties/index.md    |    31 -
 .../fab/theming/css-shadow-parts/demo.html    |    56 -
 .../fab/theming/css-shadow-parts/index.md     |    31 -
 static/usage/footer/basic/demo.html           |    28 -
 static/usage/footer/basic/index.md            |    13 -
 .../footer/custom-scroll-target/demo.html     |    61 -
 .../footer/custom-scroll-target/index.md      |    33 -
 static/usage/footer/fade/demo.html            |    48 -
 static/usage/footer/fade/index.md             |    13 -
 static/usage/footer/no-border/demo.html       |    28 -
 static/usage/footer/no-border/index.md        |    13 -
 static/usage/footer/translucent/demo.html     |    48 -
 static/usage/footer/translucent/index.md      |    13 -
 static/usage/grid/basic/demo.html             |    77 -
 static/usage/grid/basic/index.md              |    32 -
 .../grid/customizing/column-number/demo.html  |    53 -
 .../grid/customizing/column-number/index.md   |    32 -
 .../usage/grid/customizing/padding/demo.html  |    65 -
 .../usage/grid/customizing/padding/index.md   |    32 -
 static/usage/grid/customizing/width/demo.html |    56 -
 static/usage/grid/customizing/width/index.md  |    32 -
 static/usage/grid/fixed/demo.html             |    48 -
 static/usage/grid/fixed/index.md              |    32 -
 .../usage/grid/horizontal-alignment/demo.html |   100 -
 .../usage/grid/horizontal-alignment/index.md  |    32 -
 static/usage/grid/offset-responsive/demo.html |    70 -
 static/usage/grid/offset-responsive/index.md  |    32 -
 static/usage/grid/offset/demo.html            |    69 -
 static/usage/grid/offset/index.md             |    32 -
 .../usage/grid/push-pull-responsive/demo.html |    71 -
 .../usage/grid/push-pull-responsive/index.md  |    32 -
 static/usage/grid/push-pull/demo.html         |    70 -
 static/usage/grid/push-pull/index.md          |    32 -
 static/usage/grid/size-auto/demo.html         |    78 -
 static/usage/grid/size-auto/index.md          |    32 -
 static/usage/grid/size-responsive/demo.html   |    72 -
 static/usage/grid/size-responsive/index.md    |    32 -
 static/usage/grid/size/demo.html              |    70 -
 static/usage/grid/size/index.md               |    32 -
 .../usage/grid/vertical-alignment/demo.html   |   103 -
 static/usage/grid/vertical-alignment/index.md |    32 -
 static/usage/header/basic/demo.html           |    28 -
 static/usage/header/basic/index.md            |    13 -
 static/usage/header/condense/demo.html        |    56 -
 static/usage/header/condense/index.md         |    13 -
 .../header/custom-scroll-target/demo.html     |    61 -
 .../header/custom-scroll-target/index.md      |    33 -
 static/usage/header/fade/demo.html            |    48 -
 static/usage/header/fade/index.md             |    13 -
 static/usage/header/no-border/demo.html       |    28 -
 static/usage/header/no-border/index.md        |    13 -
 static/usage/header/translucent/demo.html     |    48 -
 static/usage/header/translucent/index.md      |    13 -
 static/usage/img/basic/demo.html              |    30 -
 static/usage/img/basic/index.md               |     8 -
 static/usage/infinite-scroll/basic/demo.html  |    63 -
 static/usage/infinite-scroll/basic/index.md   |    23 -
 .../custom-infinite-scroll-content/demo.html  |    82 -
 .../custom-infinite-scroll-content/index.md   |    33 -
 .../infinite-scroll-content/demo.html         |    56 -
 .../infinite-scroll-content/index.md          |    23 -
 static/usage/input/basic/demo.html            |    55 -
 static/usage/input/basic/index.md             |     8 -
 static/usage/input/clear/demo.html            |    45 -
 static/usage/input/clear/index.md             |     8 -
 static/usage/input/fill/demo.html             |    44 -
 static/usage/input/fill/index.md              |     8 -
 static/usage/input/labels/demo.html           |    50 -
 static/usage/input/labels/index.md            |     8 -
 static/usage/input/theming/colors/demo.html   |    44 -
 static/usage/input/theming/colors/index.md    |     8 -
 .../input/theming/css-properties/demo.html    |    43 -
 .../input/theming/css-properties/index.md     |    32 -
 static/usage/input/types/demo.html            |    55 -
 static/usage/input/types/index.md             |     8 -
 static/usage/item-divider/basic/demo.html     |    66 -
 static/usage/item-divider/basic/index.md      |     8 -
 .../item-divider/theming/colors/demo.html     |    59 -
 .../item-divider/theming/colors/index.md      |     8 -
 .../theming/css-properties/demo.html          |    40 -
 .../theming/css-properties/index.md           |    32 -
 static/usage/item-group/basic/demo.html       |    60 -
 static/usage/item-group/basic/index.md        |     8 -
 .../usage/item-group/sliding-items/demo.html  |   122 -
 .../usage/item-group/sliding-items/index.md   |     8 -
 static/usage/item-sliding/basic/demo.html     |    66 -
 static/usage/item-sliding/basic/index.md      |     8 -
 .../usage/item-sliding/expandable/demo.html   |    45 -
 static/usage/item-sliding/expandable/index.md |     8 -
 static/usage/item-sliding/icons/demo.html     |   156 -
 static/usage/item-sliding/icons/index.md      |     8 -
 static/usage/item/basic/demo.html             |    69 -
 static/usage/item/basic/index.md              |     8 -
 static/usage/item/buttons/demo.html           |    74 -
 static/usage/item/buttons/index.md            |     8 -
 static/usage/item/clickable/demo.html         |    44 -
 static/usage/item/clickable/index.md          |     8 -
 static/usage/item/counter/demo.html           |    47 -
 static/usage/item/counter/index.md            |    23 -
 static/usage/item/detail-arrows/demo.html     |    64 -
 static/usage/item/detail-arrows/index.md      |     8 -
 static/usage/item/helper-error/demo.html      |    56 -
 static/usage/item/helper-error/index.md       |    19 -
 static/usage/item/icons/demo.html             |    56 -
 static/usage/item/icons/index.md              |     8 -
 static/usage/item/inputs/demo.html            |    86 -
 static/usage/item/inputs/index.md             |     8 -
 static/usage/item/lines/demo.html             |    70 -
 static/usage/item/lines/index.md              |     8 -
 static/usage/item/media/demo.html             |    46 -
 static/usage/item/media/index.md              |     8 -
 static/usage/item/theming/colors/demo.html    |    59 -
 static/usage/item/theming/colors/index.md     |     8 -
 .../item/theming/css-properties/demo.html     |    57 -
 .../item/theming/css-properties/index.md      |    31 -
 .../item/theming/css-shadow-parts/demo.html   |    57 -
 .../item/theming/css-shadow-parts/index.md    |    31 -
 .../item/theming/input-highlight/demo.html    |    50 -
 .../item/theming/input-highlight/index.md     |    32 -
 static/usage/label/basic/demo.html            |    24 -
 static/usage/label/basic/index.md             |     8 -
 static/usage/label/input/demo.html            |    59 -
 static/usage/label/input/index.md             |     8 -
 static/usage/label/item/demo.html             |    56 -
 static/usage/label/item/index.md              |     8 -
 static/usage/label/theming/colors/demo.html   |    39 -
 static/usage/label/theming/colors/index.md    |     8 -
 static/usage/list-header/basic/demo.html      |    49 -
 static/usage/list-header/basic/index.md       |     8 -
 static/usage/list-header/buttons/demo.html    |    50 -
 static/usage/list-header/buttons/index.md     |     8 -
 static/usage/list-header/lines/demo.html      |    64 -
 static/usage/list-header/lines/index.md       |     8 -
 .../list-header/theming/colors/demo.html      |    59 -
 .../usage/list-header/theming/colors/index.md |     8 -
 .../theming/css-properties/demo.html          |    37 -
 .../theming/css-properties/index.md           |    32 -
 static/usage/list/basic/demo.html             |    46 -
 static/usage/list/basic/index.md              |     8 -
 static/usage/list/inset/demo.html             |    51 -
 static/usage/list/inset/index.md              |     8 -
 static/usage/list/lines/demo.html             |    66 -
 static/usage/list/lines/index.md              |     8 -
 static/usage/loading/controller/demo.html     |    36 -
 static/usage/loading/controller/index.md      |    23 -
 static/usage/loading/spinners/demo.html       |    37 -
 static/usage/loading/spinners/index.md        |    23 -
 static/usage/loading/theming/demo.html        |    45 -
 static/usage/loading/theming/index.md         |    33 -
 static/usage/menu/basic/demo.html             |    37 -
 static/usage/menu/basic/index.md              |    17 -
 static/usage/menu/theming/demo.html           |    48 -
 static/usage/menu/theming/index.md            |    32 -
 static/usage/menu/toggle/demo.html            |    40 -
 static/usage/menu/toggle/index.md             |    17 -
 static/usage/menu/type/demo.html              |    71 -
 static/usage/menu/type/index.md               |    24 -
 .../usage/modal/can-dismiss/boolean/demo.html |    67 -
 .../usage/modal/can-dismiss/boolean/index.md  |    25 -
 .../modal/can-dismiss/function/demo.html      |    74 -
 .../usage/modal/can-dismiss/function/index.md |    25 -
 static/usage/modal/card/basic/demo.html       |    90 -
 static/usage/modal/card/basic/index.md        |    24 -
 static/usage/modal/controller/demo.html       |    78 -
 static/usage/modal/controller/index.md        |    38 -
 static/usage/modal/custom-dialogs/demo.html   |    81 -
 static/usage/modal/custom-dialogs/index.md    |    32 -
 static/usage/modal/inline/basic/demo.html     |    67 -
 static/usage/modal/inline/basic/index.md      |    25 -
 static/usage/modal/inline/is-open/demo.html   |    46 -
 static/usage/modal/inline/is-open/index.md    |    25 -
 .../usage/modal/performance/mount/demo.html   |    55 -
 static/usage/modal/performance/mount/index.md |    18 -
 .../modal/sheet/background-content/demo.html  |   106 -
 .../modal/sheet/background-content/index.md   |    27 -
 static/usage/modal/sheet/basic/demo.html      |    82 -
 static/usage/modal/sheet/basic/index.md       |    18 -
 .../modal/sheet/handle-behavior/demo.html     |    41 -
 .../modal/sheet/handle-behavior/index.md      |    18 -
 .../usage/modal/styling/animations/demo.html  |   117 -
 .../usage/modal/styling/animations/index.md   |    32 -
 static/usage/modal/styling/theming/demo.html  |   101 -
 static/usage/modal/styling/theming/index.md   |    32 -
 static/usage/nav/modal-navigation/demo.html   |   106 -
 static/usage/nav/modal-navigation/index.md    |    55 -
 static/usage/nav/nav-link/demo.html           |    84 -
 static/usage/nav/nav-link/index.md            |    54 -
 static/usage/note/basic/demo.html             |    25 -
 static/usage/note/basic/index.md              |     8 -
 static/usage/note/item/demo.html              |    38 -
 static/usage/note/item/index.md               |     8 -
 static/usage/note/theming/colors/demo.html    |    49 -
 static/usage/note/theming/colors/index.md     |     8 -
 .../note/theming/css-properties/demo.html     |    30 -
 .../note/theming/css-properties/index.md      |    31 -
 static/usage/picker/multiple-column/demo.html |    90 -
 static/usage/picker/multiple-column/index.md  |    24 -
 static/usage/picker/single-column/demo.html   |    65 -
 static/usage/picker/single-column/index.md    |    24 -
 .../customization/positioning/demo.html       |    52 -
 .../customization/positioning/index.md        |    33 -
 .../popover/customization/sizing/demo.html    |    32 -
 .../popover/customization/sizing/index.md     |    12 -
 .../popover/customization/styling/demo.html   |    45 -
 .../popover/customization/styling/index.md    |    31 -
 static/usage/popover/nested/demo.html         |    41 -
 static/usage/popover/nested/index.md          |    12 -
 .../usage/popover/performance/mount/demo.html |    27 -
 .../usage/popover/performance/mount/index.md  |    17 -
 .../popover/presenting/controller/demo.html   |    63 -
 .../popover/presenting/controller/index.md    |    37 -
 .../presenting/inline-isopen/demo.html        |    39 -
 .../popover/presenting/inline-isopen/index.md |    24 -
 .../presenting/inline-trigger/demo.html       |    37 -
 .../presenting/inline-trigger/index.md        |    12 -
 static/usage/progress-bar/buffer/demo.html    |    47 -
 static/usage/progress-bar/buffer/index.md     |    24 -
 .../usage/progress-bar/determinate/demo.html  |    42 -
 .../usage/progress-bar/determinate/index.md   |    24 -
 .../progress-bar/indeterminate/demo.html      |    25 -
 .../usage/progress-bar/indeterminate/index.md |     8 -
 .../progress-bar/theming/colors/demo.html     |    39 -
 .../progress-bar/theming/colors/index.md      |     8 -
 .../theming/css-properties/demo.html          |    37 -
 .../theming/css-properties/index.md           |    31 -
 .../theming/css-shadow-parts/demo.html        |    44 -
 .../theming/css-shadow-parts/index.md         |    31 -
 static/usage/radio/basic/demo.html            |    52 -
 static/usage/radio/basic/index.md             |     8 -
 static/usage/radio/empty-selection/demo.html  |    52 -
 static/usage/radio/empty-selection/index.md   |     8 -
 static/usage/radio/theming/colors/demo.html   |    54 -
 static/usage/radio/theming/colors/index.md    |     8 -
 .../radio/theming/css-properties/demo.html    |    49 -
 .../radio/theming/css-properties/index.md     |    32 -
 .../radio/theming/css-shadow-parts/demo.html  |    62 -
 .../radio/theming/css-shadow-parts/index.md   |    32 -
 static/usage/range/basic/demo.html            |    29 -
 static/usage/range/basic/index.md             |     8 -
 static/usage/range/dual-knobs/demo.html       |    36 -
 static/usage/range/dual-knobs/index.md        |     8 -
 static/usage/range/ion-change-event/demo.html |    40 -
 static/usage/range/ion-change-event/index.md  |    23 -
 .../usage/range/ion-knob-move-event/demo.html |    50 -
 .../usage/range/ion-knob-move-event/index.md  |    23 -
 static/usage/range/pins/demo.html             |    35 -
 static/usage/range/pins/index.md              |    23 -
 static/usage/range/slots/demo.html            |    32 -
 static/usage/range/slots/index.md             |     8 -
 static/usage/range/snapping-ticks/demo.html   |    29 -
 static/usage/range/snapping-ticks/index.md    |     8 -
 .../range/theming/css-properties/demo.html    |    38 -
 .../range/theming/css-properties/index.md     |    31 -
 .../range/theming/css-shadow-parts/demo.html  |    71 -
 .../range/theming/css-shadow-parts/index.md   |    31 -
 static/usage/refresher/advanced/demo.html     |    99 -
 static/usage/refresher/advanced/index.md      |    35 -
 static/usage/refresher/basic/demo.html        |    43 -
 static/usage/refresher/basic/index.md         |    25 -
 .../usage/refresher/custom-content/demo.html  |    48 -
 .../usage/refresher/custom-content/index.md   |    25 -
 .../refresher/custom-scroll-target/demo.html  |    56 -
 .../refresher/custom-scroll-target/index.md   |    33 -
 .../usage/refresher/pull-properties/demo.html |    43 -
 .../usage/refresher/pull-properties/index.md  |    25 -
 static/usage/reorder/basic/demo.html          |    83 -
 static/usage/reorder/basic/index.md           |    24 -
 static/usage/reorder/custom-icon/demo.html    |    93 -
 static/usage/reorder/custom-icon/index.md     |    24 -
 .../reorder/custom-scroll-target/demo.html    |    95 -
 .../reorder/custom-scroll-target/index.md     |    35 -
 .../usage/reorder/toggling-disabled/demo.html |    96 -
 .../usage/reorder/toggling-disabled/index.md  |    24 -
 static/usage/reorder/updating-data/demo.html  |    76 -
 static/usage/reorder/updating-data/index.md   |    24 -
 static/usage/reorder/wrapper/demo.html        |    88 -
 static/usage/reorder/wrapper/index.md         |    24 -
 static/usage/ripple-effect/basic/demo.html    |    82 -
 static/usage/ripple-effect/basic/index.md     |    32 -
 .../usage/ripple-effect/customizing/demo.html |    81 -
 .../usage/ripple-effect/customizing/index.md  |    32 -
 static/usage/ripple-effect/type/demo.html     |    81 -
 static/usage/ripple-effect/type/index.md      |    32 -
 static/usage/searchbar/basic/demo.html        |    34 -
 static/usage/searchbar/basic/index.md         |     8 -
 .../usage/searchbar/cancel-button/demo.html   |    33 -
 static/usage/searchbar/cancel-button/index.md |     8 -
 static/usage/searchbar/clear-button/demo.html |    33 -
 static/usage/searchbar/clear-button/index.md  |     8 -
 static/usage/searchbar/debounce/demo.html     |    64 -
 static/usage/searchbar/debounce/index.md      |    25 -
 static/usage/searchbar/search-icon/demo.html  |    31 -
 static/usage/searchbar/search-icon/index.md   |     8 -
 .../usage/searchbar/theming/colors/demo.html  |    39 -
 .../usage/searchbar/theming/colors/index.md   |     8 -
 .../theming/css-properties/demo.html          |    48 -
 .../searchbar/theming/css-properties/index.md |    31 -
 static/usage/segment-button/basic/demo.html   |    56 -
 static/usage/segment-button/basic/index.md    |     8 -
 static/usage/segment-button/layout/demo.html  |   104 -
 static/usage/segment-button/layout/index.md   |     8 -
 .../theming/css-properties/demo.html          |    59 -
 .../theming/css-properties/index.md           |    31 -
 .../theming/css-shadow-parts/demo.html        |    71 -
 .../theming/css-shadow-parts/index.md         |    31 -
 static/usage/segment/basic/demo.html          |    50 -
 static/usage/segment/basic/index.md           |     8 -
 static/usage/segment/scrollable/demo.html     |    66 -
 static/usage/segment/scrollable/index.md      |     8 -
 static/usage/segment/theming/colors/demo.html |   113 -
 static/usage/segment/theming/colors/index.md  |     8 -
 .../segment/theming/css-properties/demo.html  |    42 -
 .../segment/theming/css-properties/index.md   |    31 -
 .../select/basic/multiple-selection/demo.html |    32 -
 .../select/basic/multiple-selection/index.md  |    12 -
 .../basic/responding-to-interaction/demo.html |    62 -
 .../basic/responding-to-interaction/index.md  |    24 -
 .../select/basic/single-selection/demo.html   |    32 -
 .../select/basic/single-selection/index.md    |    12 -
 .../customization/button-text/demo.html       |    41 -
 .../select/customization/button-text/index.md |    12 -
 .../customization/interface-options/demo.html |    83 -
 .../customization/interface-options/index.md  |    24 -
 .../customization/styling-select/demo.html    |    60 -
 .../customization/styling-select/index.md     |    33 -
 .../select/interfaces/action-sheet/demo.html  |    32 -
 .../select/interfaces/action-sheet/index.md   |    12 -
 .../usage/select/interfaces/popover/demo.html |    32 -
 .../usage/select/interfaces/popover/index.md  |    12 -
 .../multiple-selection/demo.html              |    91 -
 .../multiple-selection/index.md               |    24 -
 .../using-comparewith/demo.html               |    79 -
 .../using-comparewith/index.md                |    24 -
 static/usage/skeleton-text/basic/demo.html    |    89 -
 static/usage/skeleton-text/basic/index.md     |    24 -
 .../theming/css-properties/demo.html          |    57 -
 .../theming/css-properties/index.md           |    32 -
 static/usage/spinner/basic/demo.html          |    79 -
 static/usage/spinner/basic/index.md           |     8 -
 static/usage/spinner/theming/colors/demo.html |    33 -
 static/usage/spinner/theming/colors/index.md  |     8 -
 .../spinner/theming/css-properties/demo.html  |    30 -
 .../spinner/theming/css-properties/index.md   |    31 -
 static/usage/split-pane/basic/demo.html       |    40 -
 static/usage/split-pane/basic/index.md        |     8 -
 .../theming/css-properties/demo.html          |    48 -
 .../theming/css-properties/index.md           |    32 -
 static/usage/text/basic/demo.html             |    57 -
 static/usage/text/basic/index.md              |     8 -
 static/usage/textarea/autogrow/demo.html      |    38 -
 static/usage/textarea/autogrow/index.md       |    12 -
 static/usage/textarea/basic/demo.html         |    43 -
 static/usage/textarea/basic/index.md          |    12 -
 static/usage/textarea/clear-on-edit/demo.html |    33 -
 static/usage/textarea/clear-on-edit/index.md  |    12 -
 static/usage/textarea/theming/demo.html       |    38 -
 static/usage/textarea/theming/index.md        |    32 -
 static/usage/thumbnail/basic/demo.html        |    27 -
 static/usage/thumbnail/basic/index.md         |     8 -
 static/usage/thumbnail/item/demo.html         |    30 -
 static/usage/thumbnail/item/index.md          |     8 -
 .../theming/css-properties/demo.html          |    33 -
 .../thumbnail/theming/css-properties/index.md |    32 -
 static/usage/title/basic/demo.html            |    25 -
 static/usage/title/basic/index.md             |    13 -
 .../collapsible-large-title/basic/demo.html   |    59 -
 .../collapsible-large-title/basic/index.md    |    14 -
 .../collapsible-large-title/buttons/demo.html |    65 -
 .../collapsible-large-title/buttons/index.md  |    14 -
 .../title/theming/css-properties/demo.html    |    69 -
 .../title/theming/css-properties/index.md     |    33 -
 static/usage/toast/buttons/demo.html          |    75 -
 static/usage/toast/buttons/index.md           |    24 -
 static/usage/toast/icon/demo.html             |    46 -
 static/usage/toast/icon/index.md              |    24 -
 .../toast/presenting/controller/demo.html     |    54 -
 .../toast/presenting/controller/index.md      |    24 -
 static/usage/toast/theming/demo.html          |    70 -
 static/usage/toast/theming/index.md           |    33 -
 static/usage/toggle/basic/demo.html           |    47 -
 static/usage/toggle/basic/index.md            |     8 -
 static/usage/toggle/on-off/demo.html          |    25 -
 static/usage/toggle/on-off/index.md           |     8 -
 static/usage/toggle/theming/colors/demo.html  |    33 -
 static/usage/toggle/theming/colors/index.md   |     8 -
 .../toggle/theming/css-properties/demo.html   |    52 -
 .../toggle/theming/css-properties/index.md    |    31 -
 .../toggle/theming/css-shadow-parts/demo.html |    59 -
 .../toggle/theming/css-shadow-parts/index.md  |    31 -
 static/usage/toolbar/basic/demo.html          |    31 -
 static/usage/toolbar/basic/index.md           |     8 -
 static/usage/toolbar/buttons/demo.html        |   120 -
 static/usage/toolbar/buttons/index.md         |     8 -
 static/usage/toolbar/progress-bars/demo.html  |    26 -
 static/usage/toolbar/progress-bars/index.md   |     8 -
 static/usage/toolbar/searchbars/demo.html     |    28 -
 static/usage/toolbar/searchbars/index.md      |     8 -
 static/usage/toolbar/segments/demo.html       |    32 -
 static/usage/toolbar/segments/index.md        |     8 -
 static/usage/toolbar/theming/colors/demo.html |    60 -
 static/usage/toolbar/theming/colors/index.md  |     8 -
 .../toolbar/theming/css-properties/demo.html  |    46 -
 .../toolbar/theming/css-properties/index.md   |    32 -
 .../accessibility/animations/angular.md       |     0
 .../accessibility/animations/demo.html        |    49 +
 .../accessibility/animations/index.md         |    16 +
 .../accessibility/animations/javascript.md    |     0
 .../accessibility/animations/react.md         |     0
 .../accordion/accessibility/animations/vue.md |     0
 .../usage/{ => v6}/accordion/basic/angular.md |     0
 static/usage/v6/accordion/basic/demo.html     |    49 +
 static/usage/v6/accordion/basic/index.md      |    17 +
 .../{ => v6}/accordion/basic/javascript.md    |     0
 .../usage/{ => v6}/accordion/basic/react.md   |     0
 static/usage/{ => v6}/accordion/basic/vue.md  |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../advanced-expansion-styles/demo.html       |    82 +
 .../advanced-expansion-styles/index.md        |    34 +
 .../advanced-expansion-styles/javascript.md   |     0
 .../react/main_css.md                         |     0
 .../react/main_tsx.md                         |     0
 .../advanced-expansion-styles/vue.md          |     0
 .../customization/expansion-styles/angular.md |     0
 .../customization/expansion-styles/demo.html  |    49 +
 .../customization/expansion-styles/index.md   |    17 +
 .../expansion-styles/javascript.md            |     0
 .../customization/expansion-styles/react.md   |     0
 .../customization/expansion-styles/vue.md     |     0
 .../accordion/customization/icons/angular.md  |     0
 .../accordion/customization/icons/demo.html   |    49 +
 .../v6/accordion/customization/icons/index.md |    17 +
 .../customization/icons/javascript.md         |     0
 .../accordion/customization/icons/react.md    |     0
 .../accordion/customization/icons/vue.md      |     0
 .../theming/angular/example_component_html.md |     0
 .../theming/angular/global_css.md             |     0
 .../accordion/customization/theming/demo.html |    72 +
 .../accordion/customization/theming/index.md  |    32 +
 .../customization/theming/javascript.md       |     0
 .../customization/theming/react/main_css.md   |     0
 .../customization/theming/react/main_tsx.md   |     0
 .../accordion/customization/theming/vue.md    |     0
 .../accordion/disable-group/angular.md        |     0
 .../v6/accordion/disable-group/demo.html      |    49 +
 .../usage/v6/accordion/disable-group/index.md |    16 +
 .../accordion/disable-group/javascript.md     |     0
 .../{ => v6}/accordion/disable-group/react.md |     0
 .../{ => v6}/accordion/disable-group/vue.md   |     0
 .../accordion/disable/group/angular.md        |     0
 .../v6/accordion/disable/group/demo.html      |    49 +
 .../usage/v6/accordion/disable/group/index.md |    16 +
 .../accordion/disable/group/javascript.md     |     0
 .../{ => v6}/accordion/disable/group/react.md |     0
 .../{ => v6}/accordion/disable/group/vue.md   |     0
 .../accordion/disable/individual/angular.md   |     0
 .../v6/accordion/disable/individual/demo.html |    49 +
 .../v6/accordion/disable/individual/index.md  |    17 +
 .../disable/individual/javascript.md          |     0
 .../accordion/disable/individual/react.md     |     0
 .../accordion/disable/individual/vue.md       |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/accordion/listen-changes/demo.html     |    73 +
 .../v6/accordion/listen-changes/index.md      |    24 +
 .../accordion/listen-changes/javascript.md    |     0
 .../accordion/listen-changes/react.md         |     0
 .../{ => v6}/accordion/listen-changes/vue.md  |     0
 .../{ => v6}/accordion/multiple/angular.md    |     0
 static/usage/v6/accordion/multiple/demo.html  |    54 +
 static/usage/v6/accordion/multiple/index.md   |    17 +
 .../{ => v6}/accordion/multiple/javascript.md |     0
 .../{ => v6}/accordion/multiple/react.md      |     0
 .../usage/{ => v6}/accordion/multiple/vue.md  |     0
 .../accordion/readonly/group/angular.md       |     0
 .../v6/accordion/readonly/group/demo.html     |    49 +
 .../v6/accordion/readonly/group/index.md      |    17 +
 .../accordion/readonly/group/javascript.md    |     0
 .../accordion/readonly/group/react.md         |     0
 .../{ => v6}/accordion/readonly/group/vue.md  |     0
 .../accordion/readonly/individual/angular.md  |     0
 .../accordion/readonly/individual/demo.html   |    49 +
 .../v6/accordion/readonly/individual/index.md |    16 +
 .../readonly/individual/javascript.md         |     0
 .../accordion/readonly/individual/react.md    |     0
 .../accordion/readonly/individual/vue.md      |     0
 .../toggle/angular/example_component_html.md  |     0
 .../toggle/angular/example_component_ts.md    |     0
 static/usage/v6/accordion/toggle/demo.html    |    69 +
 static/usage/v6/accordion/toggle/index.md     |    24 +
 .../{ => v6}/accordion/toggle/javascript.md   |     0
 .../usage/{ => v6}/accordion/toggle/react.md  |     0
 static/usage/{ => v6}/accordion/toggle/vue.md |     0
 .../basic/angular/example_component_css.md    |     0
 .../basic/angular/example_component_html.md   |     0
 .../basic/angular/example_component_ts.md     |     0
 static/usage/v6/action-sheet/basic/demo.html  |    70 +
 static/usage/v6/action-sheet/basic/index.md   |    34 +
 .../{ => v6}/action-sheet/basic/javascript.md |     0
 .../action-sheet/basic/react/main_css.md      |     0
 .../action-sheet/basic/react/main_tsx.md      |     0
 .../usage/{ => v6}/action-sheet/basic/vue.md  |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../css-properties/angular/global_css.md      |     0
 .../theming/css-properties/demo.html          |    67 +
 .../theming/css-properties/index.md           |    34 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../theming/css-properties/vue.md             |     0
 .../styling/angular/example_component_html.md |     0
 .../styling/angular/example_component_ts.md   |     0
 .../theming/styling/angular/global_css.md     |     0
 .../v6/action-sheet/theming/styling/demo.html |    84 +
 .../v6/action-sheet/theming/styling/index.md  |    34 +
 .../theming/styling/javascript.md             |     0
 .../theming/styling/react/main_css.md         |     0
 .../theming/styling/react/main_tsx.md         |     0
 .../action-sheet/theming/styling/vue.md       |     0
 .../buttons/angular/example_component_html.md |     0
 .../buttons/angular/example_component_ts.md   |     0
 static/usage/v6/alert/buttons/demo.html       |    64 +
 static/usage/v6/alert/buttons/index.md        |    24 +
 .../{ => v6}/alert/buttons/javascript.md      |     0
 static/usage/{ => v6}/alert/buttons/react.md  |     0
 static/usage/{ => v6}/alert/buttons/vue.md    |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../alert/customization/angular/global_css.md |     0
 static/usage/v6/alert/customization/demo.html |    79 +
 static/usage/v6/alert/customization/index.md  |    33 +
 .../alert/customization/javascript.md         |     0
 .../alert/customization/react/main_css.md     |     0
 .../alert/customization/react/main_tsx.md     |     0
 .../usage/{ => v6}/alert/customization/vue.md |     0
 .../radios/angular/example_component_html.md  |     0
 .../radios/angular/example_component_ts.md    |     0
 static/usage/v6/alert/inputs/radios/demo.html |    52 +
 static/usage/v6/alert/inputs/radios/index.md  |    24 +
 .../alert/inputs/radios/javascript.md         |     0
 .../{ => v6}/alert/inputs/radios/react.md     |     0
 .../usage/{ => v6}/alert/inputs/radios/vue.md |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/alert/inputs/text-inputs/demo.html     |    56 +
 .../v6/alert/inputs/text-inputs/index.md      |    24 +
 .../alert/inputs/text-inputs/javascript.md    |     0
 .../alert/inputs/text-inputs/react.md         |     0
 .../{ => v6}/alert/inputs/text-inputs/vue.md  |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/alert/presenting/controller/demo.html  |    37 +
 .../v6/alert/presenting/controller/index.md   |    24 +
 .../alert/presenting/controller/javascript.md |     0
 .../alert/presenting/controller/react.md      |     0
 .../alert/presenting/controller/vue.md        |     0
 static/usage/{ => v6}/avatar/basic/angular.md |     0
 static/usage/v6/avatar/basic/demo.html        |    27 +
 static/usage/v6/avatar/basic/index.md         |     8 +
 .../usage/{ => v6}/avatar/basic/javascript.md |     0
 static/usage/{ => v6}/avatar/basic/react.md   |     0
 static/usage/{ => v6}/avatar/basic/vue.md     |     0
 static/usage/{ => v6}/avatar/chip/angular.md  |     0
 static/usage/v6/avatar/chip/demo.html         |    30 +
 static/usage/v6/avatar/chip/index.md          |     8 +
 .../usage/{ => v6}/avatar/chip/javascript.md  |     0
 static/usage/{ => v6}/avatar/chip/react.md    |     0
 static/usage/{ => v6}/avatar/chip/vue.md      |     0
 static/usage/{ => v6}/avatar/item/angular.md  |     0
 static/usage/v6/avatar/item/demo.html         |    30 +
 static/usage/v6/avatar/item/index.md          |     8 +
 .../usage/{ => v6}/avatar/item/javascript.md  |     0
 static/usage/{ => v6}/avatar/item/react.md    |     0
 static/usage/{ => v6}/avatar/item/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../avatar/theming/css-properties/demo.html   |    32 +
 .../v6/avatar/theming/css-properties/index.md |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../avatar/theming/css-properties/vue.md      |     0
 .../usage/{ => v6}/backdrop/basic/angular.md  |     0
 static/usage/v6/backdrop/basic/demo.html      |    35 +
 static/usage/v6/backdrop/basic/index.md       |     8 +
 .../{ => v6}/backdrop/basic/javascript.md     |     0
 static/usage/{ => v6}/backdrop/basic/react.md |     0
 static/usage/{ => v6}/backdrop/basic/vue.md   |     0
 .../styling/angular/example_component_css.md  |     0
 .../styling/angular/example_component_html.md |     0
 static/usage/v6/backdrop/styling/demo.html    |    57 +
 static/usage/v6/backdrop/styling/index.md     |    32 +
 .../{ => v6}/backdrop/styling/javascript.md   |     0
 .../backdrop/styling/react/main_css.md        |     0
 .../backdrop/styling/react/main_tsx.md        |     0
 static/usage/{ => v6}/backdrop/styling/vue.md |     0
 static/usage/{ => v6}/badge/basic/angular.md  |     0
 static/usage/v6/badge/basic/demo.html         |    39 +
 static/usage/v6/badge/basic/index.md          |     8 +
 .../usage/{ => v6}/badge/basic/javascript.md  |     0
 static/usage/{ => v6}/badge/basic/react.md    |     0
 static/usage/{ => v6}/badge/basic/vue.md      |     0
 .../{ => v6}/badge/theming/colors/angular.md  |     0
 .../usage/v6/badge/theming/colors/demo.html   |    55 +
 static/usage/v6/badge/theming/colors/index.md |     8 +
 .../badge/theming/colors/javascript.md        |     0
 .../{ => v6}/badge/theming/colors/react.md    |     0
 .../{ => v6}/badge/theming/colors/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/badge/theming/css-properties/demo.html |    42 +
 .../v6/badge/theming/css-properties/index.md  |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../badge/theming/css-properties/vue.md       |     0
 .../{ => v6}/breadcrumbs/basic/angular.md     |     0
 static/usage/v6/breadcrumbs/basic/demo.html   |    29 +
 static/usage/v6/breadcrumbs/basic/index.md    |     8 +
 .../{ => v6}/breadcrumbs/basic/javascript.md  |     0
 .../usage/{ => v6}/breadcrumbs/basic/react.md |     0
 .../usage/{ => v6}/breadcrumbs/basic/vue.md   |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../expand-on-click/demo.html                 |    39 +
 .../collapsing-items/expand-on-click/index.md |    23 +
 .../expand-on-click/javascript.md             |     0
 .../collapsing-items/expand-on-click/react.md |     0
 .../collapsing-items/expand-on-click/vue.md   |     0
 .../items-before-after/angular.md             |     0
 .../items-before-after/demo.html              |    68 +
 .../items-before-after/index.md               |    12 +
 .../items-before-after/javascript.md          |     0
 .../items-before-after/react.md               |     0
 .../items-before-after/vue.md                 |     0
 .../collapsing-items/max-items/angular.md     |     0
 .../collapsing-items/max-items/demo.html      |    31 +
 .../collapsing-items/max-items/index.md       |    11 +
 .../collapsing-items/max-items/javascript.md  |     0
 .../collapsing-items/max-items/react.md       |     0
 .../collapsing-items/max-items/vue.md         |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../popover-on-click/demo.html                |    62 +
 .../popover-on-click/index.md                 |    24 +
 .../popover-on-click/javascript.md            |     0
 .../popover-on-click/react.md                 |     0
 .../collapsing-items/popover-on-click/vue.md  |     0
 .../icons/custom-separators/angular.md        |     0
 .../icons/custom-separators/demo.html         |    41 +
 .../icons/custom-separators/index.md          |     8 +
 .../icons/custom-separators/javascript.md     |     0
 .../icons/custom-separators/react.md          |     0
 .../icons/custom-separators/vue.md            |     0
 .../icons/icons-on-items/angular.md           |     0
 .../icons/icons-on-items/demo.html            |    68 +
 .../breadcrumbs/icons/icons-on-items/index.md |    12 +
 .../icons/icons-on-items/javascript.md        |     0
 .../breadcrumbs/icons/icons-on-items/react.md |     0
 .../breadcrumbs/icons/icons-on-items/vue.md   |     0
 .../breadcrumbs/theming/colors/angular.md     |     0
 .../v6/breadcrumbs/theming/colors/demo.html   |    29 +
 .../v6/breadcrumbs/theming/colors/index.md    |     8 +
 .../breadcrumbs/theming/colors/javascript.md  |     0
 .../breadcrumbs/theming/colors/react.md       |     0
 .../breadcrumbs/theming/colors/vue.md         |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    37 +
 .../theming/css-properties/index.md           |    30 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../breadcrumbs/theming/css-properties/vue.md |     0
 static/usage/{ => v6}/button/basic/angular.md |     0
 static/usage/v6/button/basic/demo.html        |    26 +
 static/usage/v6/button/basic/index.md         |     8 +
 .../usage/{ => v6}/button/basic/javascript.md |     0
 static/usage/{ => v6}/button/basic/react.md   |     0
 static/usage/{ => v6}/button/basic/vue.md     |     0
 .../usage/{ => v6}/button/expand/angular.md   |     0
 static/usage/v6/button/expand/demo.html       |    32 +
 static/usage/v6/button/expand/index.md        |     8 +
 .../{ => v6}/button/expand/javascript.md      |     0
 static/usage/{ => v6}/button/expand/react.md  |     0
 static/usage/{ => v6}/button/expand/vue.md    |     0
 static/usage/{ => v6}/button/fill/angular.md  |     0
 static/usage/v6/button/fill/demo.html         |    28 +
 static/usage/v6/button/fill/index.md          |     8 +
 .../usage/{ => v6}/button/fill/javascript.md  |     0
 static/usage/{ => v6}/button/fill/react.md    |     0
 static/usage/{ => v6}/button/fill/vue.md      |     0
 static/usage/{ => v6}/button/icons/angular.md |     0
 static/usage/v6/button/icons/demo.html        |    37 +
 static/usage/v6/button/icons/index.md         |     8 +
 .../usage/{ => v6}/button/icons/javascript.md |     0
 static/usage/{ => v6}/button/icons/react.md   |     0
 static/usage/{ => v6}/button/icons/vue.md     |     0
 static/usage/{ => v6}/button/shape/angular.md |     0
 static/usage/v6/button/shape/demo.html        |    26 +
 static/usage/v6/button/shape/index.md         |     8 +
 .../usage/{ => v6}/button/shape/javascript.md |     0
 static/usage/{ => v6}/button/shape/react.md   |     0
 static/usage/{ => v6}/button/shape/vue.md     |     0
 static/usage/{ => v6}/button/size/angular.md  |     0
 static/usage/v6/button/size/demo.html         |    27 +
 static/usage/v6/button/size/index.md          |     8 +
 .../usage/{ => v6}/button/size/javascript.md  |     0
 static/usage/{ => v6}/button/size/react.md    |     0
 static/usage/{ => v6}/button/size/vue.md      |     0
 .../{ => v6}/button/theming/colors/angular.md |     0
 .../usage/v6/button/theming/colors/demo.html  |    41 +
 .../usage/v6/button/theming/colors/index.md   |     8 +
 .../button/theming/colors/javascript.md       |     0
 .../{ => v6}/button/theming/colors/react.md   |     0
 .../{ => v6}/button/theming/colors/vue.md     |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../button/theming/css-properties/demo.html   |    47 +
 .../v6/button/theming/css-properties/index.md |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../button/theming/css-properties/vue.md      |     0
 .../usage/{ => v6}/buttons/basic/angular.md   |     0
 static/usage/v6/buttons/basic/demo.html       |    29 +
 static/usage/v6/buttons/basic/index.md        |     8 +
 .../{ => v6}/buttons/basic/javascript.md      |     0
 static/usage/{ => v6}/buttons/basic/react.md  |     0
 static/usage/{ => v6}/buttons/basic/vue.md    |     0
 .../{ => v6}/buttons/placement/angular.md     |     0
 static/usage/v6/buttons/placement/demo.html   |    49 +
 static/usage/v6/buttons/placement/index.md    |     8 +
 .../{ => v6}/buttons/placement/javascript.md  |     0
 .../usage/{ => v6}/buttons/placement/react.md |     0
 .../usage/{ => v6}/buttons/placement/vue.md   |     0
 .../usage/{ => v6}/buttons/types/angular.md   |     0
 static/usage/v6/buttons/types/demo.html       |   106 +
 static/usage/v6/buttons/types/index.md        |     8 +
 .../{ => v6}/buttons/types/javascript.md      |     0
 static/usage/{ => v6}/buttons/types/react.md  |     0
 static/usage/{ => v6}/buttons/types/vue.md    |     0
 .../basic/angular/example_component_css.md    |     0
 .../basic/angular/example_component_html.md   |     0
 static/usage/v6/card/basic/demo.html          |    46 +
 static/usage/v6/card/basic/index.md           |    31 +
 .../usage/{ => v6}/card/basic/javascript.md   |     0
 .../{ => v6}/card/basic/react/main_css.md     |     0
 .../{ => v6}/card/basic/react/main_tsx.md     |     0
 static/usage/{ => v6}/card/basic/vue.md       |     0
 .../buttons/angular/example_component_css.md  |     0
 .../buttons/angular/example_component_html.md |     0
 static/usage/v6/card/buttons/demo.html        |    49 +
 static/usage/v6/card/buttons/index.md         |    32 +
 .../usage/{ => v6}/card/buttons/javascript.md |     0
 .../{ => v6}/card/buttons/react/main_css.md   |     0
 .../{ => v6}/card/buttons/react/main_tsx.md   |     0
 static/usage/{ => v6}/card/buttons/vue.md     |     0
 .../list/angular/example_component_css.md     |     0
 .../list/angular/example_component_html.md    |     0
 static/usage/v6/card/list/demo.html           |    81 +
 static/usage/v6/card/list/index.md            |    32 +
 static/usage/{ => v6}/card/list/javascript.md |     0
 .../{ => v6}/card/list/react/main_css.md      |     0
 .../{ => v6}/card/list/react/main_tsx.md      |     0
 static/usage/{ => v6}/card/list/vue.md        |     0
 .../media/angular/example_component_css.md    |     0
 .../media/angular/example_component_html.md   |     0
 static/usage/v6/card/media/demo.html          |    47 +
 static/usage/v6/card/media/index.md           |    32 +
 .../usage/{ => v6}/card/media/javascript.md   |     0
 .../{ => v6}/card/media/react/main_css.md     |     0
 .../{ => v6}/card/media/react/main_tsx.md     |     0
 static/usage/{ => v6}/card/media/vue.md       |     0
 .../colors/angular/example_component_css.md   |     0
 .../colors/angular/example_component_html.md  |     0
 static/usage/v6/card/theming/colors/demo.html |   137 +
 static/usage/v6/card/theming/colors/index.md  |    32 +
 .../card/theming/colors/javascript.md         |     0
 .../card/theming/colors/react/main_css.md     |     0
 .../card/theming/colors/react/main_tsx.md     |     0
 .../usage/{ => v6}/card/theming/colors/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/card/theming/css-properties/demo.html  |    59 +
 .../v6/card/theming/css-properties/index.md   |    31 +
 .../card/theming/css-properties/javascript.md |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../card/theming/css-properties/vue.md        |     0
 .../usage/{ => v6}/checkbox/basic/angular.md  |     0
 static/usage/v6/checkbox/basic/demo.html      |    27 +
 static/usage/v6/checkbox/basic/index.md       |    16 +
 .../{ => v6}/checkbox/basic/javascript.md     |     0
 static/usage/{ => v6}/checkbox/basic/react.md |     0
 static/usage/{ => v6}/checkbox/basic/vue.md   |     0
 .../checkbox/indeterminate/angular.md         |     0
 .../usage/v6/checkbox/indeterminate/demo.html |    27 +
 .../usage/v6/checkbox/indeterminate/index.md  |    16 +
 .../checkbox/indeterminate/javascript.md      |     0
 .../{ => v6}/checkbox/indeterminate/react.md  |     0
 .../{ => v6}/checkbox/indeterminate/vue.md    |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../checkbox/theming/css-properties/demo.html |    38 +
 .../checkbox/theming/css-properties/index.md  |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../checkbox/theming/css-properties/vue.md    |     0
 static/usage/{ => v6}/chip/basic/angular.md   |     0
 static/usage/v6/chip/basic/demo.html          |    27 +
 static/usage/v6/chip/basic/index.md           |     8 +
 .../usage/{ => v6}/chip/basic/javascript.md   |     0
 static/usage/{ => v6}/chip/basic/react.md     |     0
 static/usage/{ => v6}/chip/basic/vue.md       |     0
 static/usage/{ => v6}/chip/slots/angular.md   |     0
 static/usage/v6/chip/slots/demo.html          |    37 +
 static/usage/v6/chip/slots/index.md           |     8 +
 .../usage/{ => v6}/chip/slots/javascript.md   |     0
 static/usage/{ => v6}/chip/slots/react.md     |     0
 static/usage/{ => v6}/chip/slots/vue.md       |     0
 .../{ => v6}/chip/theming/colors/angular.md   |     0
 static/usage/v6/chip/theming/colors/demo.html |    45 +
 static/usage/v6/chip/theming/colors/index.md  |     8 +
 .../chip/theming/colors/javascript.md         |     0
 .../{ => v6}/chip/theming/colors/react.md     |     0
 .../usage/{ => v6}/chip/theming/colors/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/chip/theming/css-properties/demo.html  |    32 +
 .../v6/chip/theming/css-properties/index.md   |    31 +
 .../chip/theming/css-properties/javascript.md |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../chip/theming/css-properties/vue.md        |     0
 .../usage/{ => v6}/content/basic/angular.md   |     0
 static/usage/v6/content/basic/demo.html       |    29 +
 static/usage/v6/content/basic/index.md        |    13 +
 .../{ => v6}/content/basic/javascript.md      |     0
 static/usage/{ => v6}/content/basic/react.md  |     0
 static/usage/{ => v6}/content/basic/vue.md    |     0
 .../usage/{ => v6}/content/fixed/angular.md   |     0
 .../fixed/angular/example_component_css.md    |     0
 .../fixed/angular/example_component_html.md   |     0
 static/usage/v6/content/fixed/demo.html       |    68 +
 static/usage/v6/content/fixed/index.md        |    33 +
 .../{ => v6}/content/fixed/javascript.md      |     0
 static/usage/{ => v6}/content/fixed/react.md  |     0
 .../{ => v6}/content/fixed/react/main_css.md  |     0
 .../{ => v6}/content/fixed/react/main_tsx.md  |     0
 static/usage/{ => v6}/content/fixed/vue.md    |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 static/usage/v6/content/fullscreen/demo.html  |    78 +
 static/usage/v6/content/fullscreen/index.md   |    33 +
 .../{ => v6}/content/fullscreen/javascript.md |     0
 .../content/fullscreen/react/main_css.md      |     0
 .../content/fullscreen/react/main_tsx.md      |     0
 .../usage/{ => v6}/content/fullscreen/vue.md  |     0
 .../{ => v6}/content/header-footer/angular.md |     0
 .../usage/v6/content/header-footer/demo.html  |    43 +
 .../usage/v6/content/header-footer/index.md   |    13 +
 .../content/header-footer/javascript.md       |     0
 .../{ => v6}/content/header-footer/react.md   |     0
 .../{ => v6}/content/header-footer/vue.md     |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../usage/v6/content/scroll-events/demo.html  |    69 +
 .../usage/v6/content/scroll-events/index.md   |    25 +
 .../content/scroll-events/javascript.md       |     0
 .../{ => v6}/content/scroll-events/react.md   |     0
 .../{ => v6}/content/scroll-events/vue.md     |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../usage/v6/content/scroll-methods/demo.html |    78 +
 .../usage/v6/content/scroll-methods/index.md  |    25 +
 .../content/scroll-methods/javascript.md      |     0
 .../{ => v6}/content/scroll-methods/react.md  |     0
 .../{ => v6}/content/scroll-methods/vue.md    |     0
 .../content/theming/colors/angular.md         |     0
 .../usage/v6/content/theming/colors/demo.html |    69 +
 .../usage/v6/content/theming/colors/index.md  |    13 +
 .../content/theming/colors/javascript.md      |     0
 .../{ => v6}/content/theming/colors/react.md  |     0
 .../{ => v6}/content/theming/colors/vue.md    |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../content/theming/css-properties/demo.html  |    36 +
 .../content/theming/css-properties/index.md   |    33 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../content/theming/css-properties/vue.md     |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-shadow-parts/demo.html        |    39 +
 .../content/theming/css-shadow-parts/index.md |    33 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../content/theming/css-shadow-parts/vue.md   |     0
 .../{ => v6}/datetime-button/basic/angular.md |     0
 .../usage/v6/datetime-button/basic/demo.html  |    33 +
 .../usage/v6/datetime-button/basic/index.md   |     8 +
 .../datetime-button/basic/javascript.md       |     0
 .../{ => v6}/datetime-button/basic/react.md   |     0
 .../{ => v6}/datetime-button/basic/vue.md     |     0
 .../usage/{ => v6}/datetime/basic/angular.md  |     0
 static/usage/v6/datetime/basic/demo.html      |    29 +
 static/usage/v6/datetime/basic/index.md       |     8 +
 .../{ => v6}/datetime/basic/javascript.md     |     0
 static/usage/{ => v6}/datetime/basic/react.md |     0
 static/usage/{ => v6}/datetime/basic/vue.md   |     0
 .../customizing-button-texts/angular.md       |     0
 .../customizing-button-texts/demo.html        |    30 +
 .../buttons/customizing-button-texts/index.md |    12 +
 .../customizing-button-texts/javascript.md    |     0
 .../buttons/customizing-button-texts/react.md |     0
 .../buttons/customizing-button-texts/vue.md   |     0
 .../buttons/customizing-buttons/angular.md    |     0
 .../buttons/customizing-buttons/demo.html     |    40 +
 .../buttons/customizing-buttons/index.md      |    12 +
 .../buttons/customizing-buttons/javascript.md |     0
 .../buttons/customizing-buttons/react.md      |     0
 .../buttons/customizing-buttons/vue.md        |     0
 .../showing-confirmation-buttons/angular.md   |     0
 .../showing-confirmation-buttons/demo.html    |    30 +
 .../showing-confirmation-buttons/index.md     |    12 +
 .../javascript.md                             |     0
 .../showing-confirmation-buttons/react.md     |     0
 .../showing-confirmation-buttons/vue.md       |     0
 .../angular/example_component_html.md         |     0
 .../advanced/angular/example_component_ts.md  |     0
 .../date-constraints/advanced/demo.html       |    43 +
 .../date-constraints/advanced/index.md        |    24 +
 .../date-constraints/advanced/javascript.md   |     0
 .../date-constraints/advanced/react.md        |     0
 .../datetime/date-constraints/advanced/vue.md |     0
 .../date-constraints/max-min/angular.md       |     0
 .../date-constraints/max-min/demo.html        |    29 +
 .../date-constraints/max-min/index.md         |    12 +
 .../date-constraints/max-min/javascript.md    |     0
 .../date-constraints/max-min/react.md         |     0
 .../datetime/date-constraints/max-min/vue.md  |     0
 .../date-constraints/values/angular.md        |     0
 .../date-constraints/values/demo.html         |    29 +
 .../datetime/date-constraints/values/index.md |    12 +
 .../date-constraints/values/javascript.md     |     0
 .../datetime/date-constraints/values/react.md |     0
 .../datetime/date-constraints/values/vue.md   |     0
 .../localization/custom-locale/angular.md     |     0
 .../localization/custom-locale/demo.html      |    29 +
 .../localization/custom-locale/index.md       |    12 +
 .../localization/custom-locale/javascript.md  |     0
 .../localization/custom-locale/react.md       |     0
 .../localization/custom-locale/vue.md         |     0
 .../localization/first-day-of-week/angular.md |     0
 .../localization/first-day-of-week/demo.html  |    29 +
 .../localization/first-day-of-week/index.md   |    12 +
 .../first-day-of-week/javascript.md           |     0
 .../localization/first-day-of-week/react.md   |     0
 .../localization/first-day-of-week/vue.md     |     0
 .../localization/hour-cycle/angular.md        |     0
 .../localization/hour-cycle/demo.html         |    29 +
 .../datetime/localization/hour-cycle/index.md |    12 +
 .../localization/hour-cycle/javascript.md     |     0
 .../datetime/localization/hour-cycle/react.md |     0
 .../datetime/localization/hour-cycle/vue.md   |     0
 .../locale-extension-tags/angular.md          |     0
 .../locale-extension-tags/demo.html           |    29 +
 .../locale-extension-tags/index.md            |    12 +
 .../locale-extension-tags/javascript.md       |     0
 .../locale-extension-tags/react.md            |     0
 .../localization/locale-extension-tags/vue.md |     0
 .../localization/time-label/angular.md        |     0
 .../localization/time-label/demo.html         |    31 +
 .../datetime/localization/time-label/index.md |    12 +
 .../localization/time-label/javascript.md     |     0
 .../datetime/localization/time-label/react.md |     0
 .../datetime/localization/time-label/vue.md   |     0
 .../{ => v6}/datetime/multiple/angular.md     |     0
 static/usage/v6/datetime/multiple/demo.html   |    34 +
 static/usage/v6/datetime/multiple/index.md    |     8 +
 .../{ => v6}/datetime/multiple/javascript.md  |     0
 .../usage/{ => v6}/datetime/multiple/react.md |     0
 .../usage/{ => v6}/datetime/multiple/vue.md   |     0
 .../datetime/presentation/date/angular.md     |     0
 .../v6/datetime/presentation/date/demo.html   |    29 +
 .../v6/datetime/presentation/date/index.md    |    12 +
 .../datetime/presentation/date/javascript.md  |     0
 .../datetime/presentation/date/react.md       |     0
 .../datetime/presentation/date/vue.md         |     0
 .../presentation/month-and-year/angular.md    |     0
 .../presentation/month-and-year/demo.html     |    29 +
 .../presentation/month-and-year/index.md      |    12 +
 .../presentation/month-and-year/javascript.md |     0
 .../presentation/month-and-year/react.md      |     0
 .../presentation/month-and-year/vue.md        |     0
 .../datetime/presentation/time/angular.md     |     0
 .../v6/datetime/presentation/time/demo.html   |    29 +
 .../v6/datetime/presentation/time/index.md    |     8 +
 .../datetime/presentation/time/javascript.md  |     0
 .../datetime/presentation/time/react.md       |     0
 .../datetime/presentation/time/vue.md         |     0
 .../datetime/presentation/wheel/angular.md    |     0
 .../v6/datetime/presentation/wheel/demo.html  |    29 +
 .../v6/datetime/presentation/wheel/index.md   |    12 +
 .../datetime/presentation/wheel/javascript.md |     0
 .../datetime/presentation/wheel/react.md      |     0
 .../datetime/presentation/wheel/vue.md        |     0
 .../theming/angular/example_component_html.md |     0
 .../datetime/theming/angular/global_css.md    |     0
 static/usage/v6/datetime/theming/demo.html    |    78 +
 static/usage/v6/datetime/theming/index.md     |    32 +
 .../{ => v6}/datetime/theming/javascript.md   |     0
 .../datetime/theming/react/main_css.md        |     0
 .../datetime/theming/react/main_tsx.md        |     0
 static/usage/{ => v6}/datetime/theming/vue.md |     0
 .../title/customizing-title/angular.md        |     0
 .../title/customizing-title/demo.html         |    31 +
 .../datetime/title/customizing-title/index.md |    12 +
 .../title/customizing-title/javascript.md     |     0
 .../datetime/title/customizing-title/react.md |     0
 .../datetime/title/customizing-title/vue.md   |     0
 .../title/showing-default-title/angular.md    |     0
 .../title/showing-default-title/demo.html     |    29 +
 .../title/showing-default-title/index.md      |    12 +
 .../title/showing-default-title/javascript.md |     0
 .../title/showing-default-title/react.md      |     0
 .../title/showing-default-title/vue.md        |     0
 static/usage/{ => v6}/fab/basic/angular.md    |     0
 static/usage/v6/fab/basic/demo.html           |    29 +
 static/usage/v6/fab/basic/index.md            |     8 +
 static/usage/{ => v6}/fab/basic/javascript.md |     0
 static/usage/{ => v6}/fab/basic/react.md      |     0
 static/usage/{ => v6}/fab/basic/vue.md        |     0
 .../{ => v6}/fab/button-sizing/angular.md     |     0
 static/usage/v6/fab/button-sizing/demo.html   |    40 +
 static/usage/v6/fab/button-sizing/index.md    |     8 +
 .../{ => v6}/fab/button-sizing/javascript.md  |     0
 .../usage/{ => v6}/fab/button-sizing/react.md |     0
 .../usage/{ => v6}/fab/button-sizing/vue.md   |     0
 .../usage/{ => v6}/fab/list-side/angular.md   |     0
 static/usage/v6/fab/list-side/demo.html       |    55 +
 static/usage/v6/fab/list-side/index.md        |     8 +
 .../{ => v6}/fab/list-side/javascript.md      |     0
 static/usage/{ => v6}/fab/list-side/react.md  |     0
 static/usage/{ => v6}/fab/list-side/vue.md    |     0
 .../usage/{ => v6}/fab/positioning/angular.md |     0
 static/usage/v6/fab/positioning/demo.html     |    77 +
 static/usage/v6/fab/positioning/index.md      |    13 +
 .../{ => v6}/fab/positioning/javascript.md    |     0
 .../usage/{ => v6}/fab/positioning/react.md   |     0
 static/usage/{ => v6}/fab/positioning/vue.md  |     0
 .../{ => v6}/fab/theming/colors/angular.md    |     0
 static/usage/v6/fab/theming/colors/demo.html  |    55 +
 static/usage/v6/fab/theming/colors/index.md   |     8 +
 .../{ => v6}/fab/theming/colors/javascript.md |     0
 .../{ => v6}/fab/theming/colors/react.md      |     0
 .../usage/{ => v6}/fab/theming/colors/vue.md  |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-custom-properties/demo.html   |    50 +
 .../theming/css-custom-properties/index.md    |    31 +
 .../css-custom-properties/javascript.md       |     0
 .../css-custom-properties/react/main_css.md   |     0
 .../css-custom-properties/react/main_tsx.md   |     0
 .../fab/theming/css-custom-properties/vue.md  |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/fab/theming/css-shadow-parts/demo.html |    56 +
 .../v6/fab/theming/css-shadow-parts/index.md  |    31 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../fab/theming/css-shadow-parts/vue.md       |     0
 static/usage/{ => v6}/footer/basic/angular.md |     0
 static/usage/v6/footer/basic/demo.html        |    28 +
 static/usage/v6/footer/basic/index.md         |    13 +
 .../usage/{ => v6}/footer/basic/javascript.md |     0
 static/usage/{ => v6}/footer/basic/react.md   |     0
 static/usage/{ => v6}/footer/basic/vue.md     |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/footer/custom-scroll-target/demo.html  |    78 +
 .../v6/footer/custom-scroll-target/index.md   |    33 +
 .../footer/custom-scroll-target/javascript.md |     0
 .../custom-scroll-target/react/main_css.md    |     0
 .../custom-scroll-target/react/main_tsx.md    |     0
 .../footer/custom-scroll-target/vue.md        |     0
 static/usage/{ => v6}/footer/fade/angular.md  |     0
 static/usage/v6/footer/fade/demo.html         |    65 +
 static/usage/v6/footer/fade/index.md          |    13 +
 .../usage/{ => v6}/footer/fade/javascript.md  |     0
 static/usage/{ => v6}/footer/fade/react.md    |     0
 static/usage/{ => v6}/footer/fade/vue.md      |     0
 .../{ => v6}/footer/no-border/angular.md      |     0
 static/usage/v6/footer/no-border/demo.html    |    28 +
 static/usage/v6/footer/no-border/index.md     |    13 +
 .../{ => v6}/footer/no-border/javascript.md   |     0
 .../usage/{ => v6}/footer/no-border/react.md  |     0
 static/usage/{ => v6}/footer/no-border/vue.md |     0
 .../{ => v6}/footer/translucent/angular.md    |     0
 static/usage/v6/footer/translucent/demo.html  |    65 +
 static/usage/v6/footer/translucent/index.md   |    13 +
 .../{ => v6}/footer/translucent/javascript.md |     0
 .../{ => v6}/footer/translucent/react.md      |     0
 .../usage/{ => v6}/footer/translucent/vue.md  |     0
 .../basic/angular/example_component_css.md    |     0
 .../basic/angular/example_component_html.md   |     0
 static/usage/v6/grid/basic/demo.html          |    77 +
 static/usage/v6/grid/basic/index.md           |    32 +
 .../usage/{ => v6}/grid/basic/javascript.md   |     0
 .../{ => v6}/grid/basic/react/main_css.md     |     0
 .../{ => v6}/grid/basic/react/main_tsx.md     |     0
 static/usage/{ => v6}/grid/basic/vue.md       |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../grid/customizing/column-number/demo.html  |    53 +
 .../grid/customizing/column-number/index.md   |    32 +
 .../customizing/column-number/javascript.md   |     0
 .../column-number/react/main_css.md           |     0
 .../column-number/react/main_tsx.md           |     0
 .../grid/customizing/column-number/vue.md     |     0
 .../padding/angular/example_component_css.md  |     0
 .../padding/angular/example_component_html.md |     0
 .../v6/grid/customizing/padding/demo.html     |    65 +
 .../v6/grid/customizing/padding/index.md      |    32 +
 .../grid/customizing/padding/javascript.md    |     0
 .../customizing/padding/react/main_css.md     |     0
 .../customizing/padding/react/main_tsx.md     |     0
 .../{ => v6}/grid/customizing/padding/vue.md  |     0
 .../width/angular/example_component_css.md    |     0
 .../width/angular/example_component_html.md   |     0
 .../usage/v6/grid/customizing/width/demo.html |    56 +
 .../usage/v6/grid/customizing/width/index.md  |    32 +
 .../grid/customizing/width/javascript.md      |     0
 .../grid/customizing/width/react/main_css.md  |     0
 .../grid/customizing/width/react/main_tsx.md  |     0
 .../{ => v6}/grid/customizing/width/vue.md    |     0
 .../fixed/angular/example_component_css.md    |     0
 .../fixed/angular/example_component_html.md   |     0
 static/usage/v6/grid/fixed/demo.html          |    48 +
 static/usage/v6/grid/fixed/index.md           |    32 +
 .../usage/{ => v6}/grid/fixed/javascript.md   |     0
 .../{ => v6}/grid/fixed/react/main_css.md     |     0
 .../{ => v6}/grid/fixed/react/main_tsx.md     |     0
 static/usage/{ => v6}/grid/fixed/vue.md       |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/grid/horizontal-alignment/demo.html    |   100 +
 .../v6/grid/horizontal-alignment/index.md     |    32 +
 .../grid/horizontal-alignment/javascript.md   |     0
 .../horizontal-alignment/react/main_css.md    |     0
 .../horizontal-alignment/react/main_tsx.md    |     0
 .../{ => v6}/grid/horizontal-alignment/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../usage/v6/grid/offset-responsive/demo.html |    70 +
 .../usage/v6/grid/offset-responsive/index.md  |    32 +
 .../grid/offset-responsive/javascript.md      |     0
 .../grid/offset-responsive/react/main_css.md  |     0
 .../grid/offset-responsive/react/main_tsx.md  |     0
 .../{ => v6}/grid/offset-responsive/vue.md    |     0
 .../offset/angular/example_component_css.md   |     0
 .../offset/angular/example_component_html.md  |     0
 static/usage/v6/grid/offset/demo.html         |    69 +
 static/usage/v6/grid/offset/index.md          |    32 +
 .../usage/{ => v6}/grid/offset/javascript.md  |     0
 .../{ => v6}/grid/offset/react/main_css.md    |     0
 .../{ => v6}/grid/offset/react/main_tsx.md    |     0
 static/usage/{ => v6}/grid/offset/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/grid/push-pull-responsive/demo.html    |    71 +
 .../v6/grid/push-pull-responsive/index.md     |    32 +
 .../grid/push-pull-responsive/javascript.md   |     0
 .../push-pull-responsive/react/main_css.md    |     0
 .../push-pull-responsive/react/main_tsx.md    |     0
 .../{ => v6}/grid/push-pull-responsive/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 static/usage/v6/grid/push-pull/demo.html      |    73 +
 static/usage/v6/grid/push-pull/index.md       |    32 +
 .../{ => v6}/grid/push-pull/javascript.md     |     0
 .../{ => v6}/grid/push-pull/react/main_css.md |     0
 .../{ => v6}/grid/push-pull/react/main_tsx.md |     0
 static/usage/{ => v6}/grid/push-pull/vue.md   |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 static/usage/v6/grid/size-auto/demo.html      |    78 +
 static/usage/v6/grid/size-auto/index.md       |    32 +
 .../{ => v6}/grid/size-auto/javascript.md     |     0
 .../{ => v6}/grid/size-auto/react/main_css.md |     0
 .../{ => v6}/grid/size-auto/react/main_tsx.md |     0
 static/usage/{ => v6}/grid/size-auto/vue.md   |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../usage/v6/grid/size-responsive/demo.html   |    72 +
 static/usage/v6/grid/size-responsive/index.md |    32 +
 .../grid/size-responsive/javascript.md        |     0
 .../grid/size-responsive/react/main_css.md    |     0
 .../grid/size-responsive/react/main_tsx.md    |     0
 .../{ => v6}/grid/size-responsive/vue.md      |     0
 .../size/angular/example_component_css.md     |     0
 .../size/angular/example_component_html.md    |     0
 static/usage/v6/grid/size/demo.html           |    70 +
 static/usage/v6/grid/size/index.md            |    32 +
 static/usage/{ => v6}/grid/size/javascript.md |     0
 .../{ => v6}/grid/size/react/main_css.md      |     0
 .../{ => v6}/grid/size/react/main_tsx.md      |     0
 static/usage/{ => v6}/grid/size/vue.md        |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/grid/vertical-alignment/demo.html      |   103 +
 .../usage/v6/grid/vertical-alignment/index.md |    32 +
 .../grid/vertical-alignment/javascript.md     |     0
 .../grid/vertical-alignment/react/main_css.md |     0
 .../grid/vertical-alignment/react/main_tsx.md |     0
 .../{ => v6}/grid/vertical-alignment/vue.md   |     0
 static/usage/{ => v6}/header/basic/angular.md |     0
 static/usage/v6/header/basic/demo.html        |    28 +
 static/usage/v6/header/basic/index.md         |    13 +
 .../usage/{ => v6}/header/basic/javascript.md |     0
 static/usage/{ => v6}/header/basic/react.md   |     0
 static/usage/{ => v6}/header/basic/vue.md     |     0
 .../usage/{ => v6}/header/condense/angular.md |     0
 static/usage/v6/header/condense/demo.html     |    73 +
 static/usage/v6/header/condense/index.md      |    13 +
 .../{ => v6}/header/condense/javascript.md    |     0
 .../usage/{ => v6}/header/condense/react.md   |     0
 static/usage/{ => v6}/header/condense/vue.md  |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/header/custom-scroll-target/demo.html  |    78 +
 .../v6/header/custom-scroll-target/index.md   |    33 +
 .../header/custom-scroll-target/javascript.md |     0
 .../custom-scroll-target/react/main_css.md    |     0
 .../custom-scroll-target/react/main_tsx.md    |     0
 .../header/custom-scroll-target/vue.md        |     0
 static/usage/{ => v6}/header/fade/angular.md  |     0
 static/usage/v6/header/fade/demo.html         |    65 +
 static/usage/v6/header/fade/index.md          |    13 +
 .../usage/{ => v6}/header/fade/javascript.md  |     0
 static/usage/{ => v6}/header/fade/react.md    |     0
 static/usage/{ => v6}/header/fade/vue.md      |     0
 .../{ => v6}/header/no-border/angular.md      |     0
 static/usage/v6/header/no-border/demo.html    |    28 +
 static/usage/v6/header/no-border/index.md     |    13 +
 .../{ => v6}/header/no-border/javascript.md   |     0
 .../usage/{ => v6}/header/no-border/react.md  |     0
 static/usage/{ => v6}/header/no-border/vue.md |     0
 .../{ => v6}/header/translucent/angular.md    |     0
 static/usage/v6/header/translucent/demo.html  |    65 +
 static/usage/v6/header/translucent/index.md   |    13 +
 .../{ => v6}/header/translucent/javascript.md |     0
 .../{ => v6}/header/translucent/react.md      |     0
 .../usage/{ => v6}/header/translucent/vue.md  |     0
 static/usage/{ => v6}/img/basic/angular.md    |     0
 static/usage/v6/img/basic/demo.html           |    31 +
 static/usage/v6/img/basic/index.md            |     8 +
 static/usage/{ => v6}/img/basic/javascript.md |     0
 static/usage/{ => v6}/img/basic/react.md      |     0
 static/usage/{ => v6}/img/basic/vue.md        |     0
 .../basic/angular/example_component_html.md   |     0
 .../basic/angular/example_component_ts.md     |     0
 .../usage/v6/infinite-scroll/basic/demo.html  |    63 +
 .../usage/v6/infinite-scroll/basic/index.md   |    23 +
 .../infinite-scroll/basic/javascript.md       |     0
 .../{ => v6}/infinite-scroll/basic/react.md   |     0
 .../{ => v6}/infinite-scroll/basic/vue.md     |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../custom-infinite-scroll-content/demo.html  |    82 +
 .../custom-infinite-scroll-content/index.md   |    33 +
 .../javascript.md                             |     0
 .../react/main_css.md                         |     0
 .../react/main_tsx.md                         |     0
 .../custom-infinite-scroll-content/vue.md     |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../infinite-scroll-content/demo.html         |    56 +
 .../infinite-scroll-content/index.md          |    23 +
 .../infinite-scroll-content/javascript.md     |     0
 .../infinite-scroll-content/react.md          |     0
 .../infinite-scroll-content/vue.md            |     0
 static/usage/{ => v6}/input/basic/angular.md  |     0
 static/usage/v6/input/basic/demo.html         |    55 +
 static/usage/v6/input/basic/index.md          |     8 +
 .../usage/{ => v6}/input/basic/javascript.md  |     0
 static/usage/{ => v6}/input/basic/react.md    |     0
 static/usage/{ => v6}/input/basic/vue.md      |     0
 static/usage/{ => v6}/input/clear/angular.md  |     0
 static/usage/v6/input/clear/demo.html         |    48 +
 static/usage/v6/input/clear/index.md          |     8 +
 .../usage/{ => v6}/input/clear/javascript.md  |     0
 static/usage/{ => v6}/input/clear/react.md    |     0
 static/usage/{ => v6}/input/clear/vue.md      |     0
 static/usage/{ => v6}/input/fill/angular.md   |     0
 static/usage/v6/input/fill/demo.html          |    44 +
 static/usage/v6/input/fill/index.md           |     8 +
 .../usage/{ => v6}/input/fill/javascript.md   |     0
 static/usage/{ => v6}/input/fill/react.md     |     0
 static/usage/{ => v6}/input/fill/vue.md       |     0
 static/usage/{ => v6}/input/labels/angular.md |     0
 static/usage/v6/input/labels/demo.html        |    50 +
 static/usage/v6/input/labels/index.md         |     8 +
 .../usage/{ => v6}/input/labels/javascript.md |     0
 static/usage/{ => v6}/input/labels/react.md   |     0
 static/usage/{ => v6}/input/labels/vue.md     |     0
 .../{ => v6}/input/theming/colors/angular.md  |     0
 .../usage/v6/input/theming/colors/demo.html   |    44 +
 static/usage/v6/input/theming/colors/index.md |     8 +
 .../input/theming/colors/javascript.md        |     0
 .../{ => v6}/input/theming/colors/react.md    |     0
 .../{ => v6}/input/theming/colors/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/input/theming/css-properties/demo.html |    43 +
 .../v6/input/theming/css-properties/index.md  |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../input/theming/css-properties/vue.md       |     0
 static/usage/{ => v6}/input/types/angular.md  |     0
 static/usage/v6/input/types/demo.html         |    55 +
 static/usage/v6/input/types/index.md          |     8 +
 .../usage/{ => v6}/input/types/javascript.md  |     0
 static/usage/{ => v6}/input/types/react.md    |     0
 static/usage/{ => v6}/input/types/vue.md      |     0
 .../{ => v6}/item-divider/basic/angular.md    |     0
 static/usage/v6/item-divider/basic/demo.html  |    66 +
 static/usage/v6/item-divider/basic/index.md   |     8 +
 .../{ => v6}/item-divider/basic/javascript.md |     0
 .../{ => v6}/item-divider/basic/react.md      |     0
 .../usage/{ => v6}/item-divider/basic/vue.md  |     0
 .../item-divider/theming/colors/angular.md    |     0
 .../v6/item-divider/theming/colors/demo.html  |    59 +
 .../v6/item-divider/theming/colors/index.md   |    12 +
 .../item-divider/theming/colors/javascript.md |     0
 .../item-divider/theming/colors/react.md      |     0
 .../item-divider/theming/colors/vue.md        |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    40 +
 .../theming/css-properties/index.md           |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../theming/css-properties/vue.md             |     0
 .../{ => v6}/item-group/basic/angular.md      |     0
 static/usage/v6/item-group/basic/demo.html    |    60 +
 static/usage/v6/item-group/basic/index.md     |     8 +
 .../{ => v6}/item-group/basic/javascript.md   |     0
 .../usage/{ => v6}/item-group/basic/react.md  |     0
 static/usage/{ => v6}/item-group/basic/vue.md |     0
 .../item-group/sliding-items/angular.md       |     0
 .../v6/item-group/sliding-items/demo.html     |   122 +
 .../v6/item-group/sliding-items/index.md      |    12 +
 .../item-group/sliding-items/javascript.md    |     0
 .../item-group/sliding-items/react.md         |     0
 .../{ => v6}/item-group/sliding-items/vue.md  |     0
 .../{ => v6}/item-sliding/basic/angular.md    |     0
 static/usage/v6/item-sliding/basic/demo.html  |    66 +
 static/usage/v6/item-sliding/basic/index.md   |     8 +
 .../{ => v6}/item-sliding/basic/javascript.md |     0
 .../{ => v6}/item-sliding/basic/react.md      |     0
 .../usage/{ => v6}/item-sliding/basic/vue.md  |     0
 .../item-sliding/expandable/angular.md        |     0
 .../v6/item-sliding/expandable/demo.html      |    45 +
 .../usage/v6/item-sliding/expandable/index.md |     8 +
 .../item-sliding/expandable/javascript.md     |     0
 .../{ => v6}/item-sliding/expandable/react.md |     0
 .../{ => v6}/item-sliding/expandable/vue.md   |     0
 .../{ => v6}/item-sliding/icons/angular.md    |     0
 static/usage/v6/item-sliding/icons/demo.html  |   156 +
 static/usage/v6/item-sliding/icons/index.md   |     8 +
 .../{ => v6}/item-sliding/icons/javascript.md |     0
 .../{ => v6}/item-sliding/icons/react.md      |     0
 .../usage/{ => v6}/item-sliding/icons/vue.md  |     0
 static/usage/{ => v6}/item/basic/angular.md   |     0
 static/usage/v6/item/basic/demo.html          |    69 +
 static/usage/v6/item/basic/index.md           |     8 +
 .../usage/{ => v6}/item/basic/javascript.md   |     0
 static/usage/{ => v6}/item/basic/react.md     |     0
 static/usage/{ => v6}/item/basic/vue.md       |     0
 static/usage/{ => v6}/item/buttons/angular.md |     0
 static/usage/v6/item/buttons/demo.html        |    74 +
 static/usage/v6/item/buttons/index.md         |     8 +
 .../usage/{ => v6}/item/buttons/javascript.md |     0
 static/usage/{ => v6}/item/buttons/react.md   |     0
 static/usage/{ => v6}/item/buttons/vue.md     |     0
 .../usage/{ => v6}/item/clickable/angular.md  |     0
 static/usage/v6/item/clickable/demo.html      |    44 +
 static/usage/v6/item/clickable/index.md       |     8 +
 .../{ => v6}/item/clickable/javascript.md     |     0
 static/usage/{ => v6}/item/clickable/react.md |     0
 static/usage/{ => v6}/item/clickable/vue.md   |     0
 .../counter/angular/example_component_html.md |     0
 .../counter/angular/example_component_ts.md   |     0
 static/usage/v6/item/counter/demo.html        |    47 +
 static/usage/v6/item/counter/index.md         |    23 +
 .../usage/{ => v6}/item/counter/javascript.md |     0
 static/usage/{ => v6}/item/counter/react.md   |     0
 static/usage/{ => v6}/item/counter/vue.md     |     0
 .../{ => v6}/item/detail-arrows/angular.md    |     0
 static/usage/v6/item/detail-arrows/demo.html  |    64 +
 static/usage/v6/item/detail-arrows/index.md   |     8 +
 .../{ => v6}/item/detail-arrows/javascript.md |     0
 .../{ => v6}/item/detail-arrows/react.md      |     0
 .../usage/{ => v6}/item/detail-arrows/vue.md  |     0
 .../{ => v6}/item/helper-error/angular.md     |     0
 static/usage/v6/item/helper-error/demo.html   |    56 +
 static/usage/v6/item/helper-error/index.md    |    17 +
 .../{ => v6}/item/helper-error/javascript.md  |     0
 .../usage/{ => v6}/item/helper-error/react.md |     0
 .../usage/{ => v6}/item/helper-error/vue.md   |     0
 static/usage/{ => v6}/item/icons/angular.md   |     0
 static/usage/v6/item/icons/demo.html          |    56 +
 static/usage/v6/item/icons/index.md           |     8 +
 .../usage/{ => v6}/item/icons/javascript.md   |     0
 static/usage/{ => v6}/item/icons/react.md     |     0
 static/usage/{ => v6}/item/icons/vue.md       |     0
 static/usage/{ => v6}/item/inputs/angular.md  |     0
 static/usage/v6/item/inputs/demo.html         |    86 +
 static/usage/v6/item/inputs/index.md          |     8 +
 .../usage/{ => v6}/item/inputs/javascript.md  |     0
 static/usage/{ => v6}/item/inputs/react.md    |     0
 static/usage/{ => v6}/item/inputs/vue.md      |     0
 static/usage/{ => v6}/item/lines/angular.md   |     0
 static/usage/v6/item/lines/demo.html          |    70 +
 static/usage/v6/item/lines/index.md           |     8 +
 .../usage/{ => v6}/item/lines/javascript.md   |     0
 static/usage/{ => v6}/item/lines/react.md     |     0
 static/usage/{ => v6}/item/lines/vue.md       |     0
 static/usage/{ => v6}/item/media/angular.md   |     0
 static/usage/v6/item/media/demo.html          |    46 +
 static/usage/v6/item/media/index.md           |     8 +
 .../usage/{ => v6}/item/media/javascript.md   |     0
 static/usage/{ => v6}/item/media/react.md     |     0
 static/usage/{ => v6}/item/media/vue.md       |     0
 .../{ => v6}/item/theming/colors/angular.md   |     0
 static/usage/v6/item/theming/colors/demo.html |    59 +
 static/usage/v6/item/theming/colors/index.md  |     8 +
 .../item/theming/colors/javascript.md         |     0
 .../{ => v6}/item/theming/colors/react.md     |     0
 .../usage/{ => v6}/item/theming/colors/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/item/theming/css-properties/demo.html  |    57 +
 .../v6/item/theming/css-properties/index.md   |    31 +
 .../item/theming/css-properties/javascript.md |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../item/theming/css-properties/vue.md        |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../item/theming/css-shadow-parts/demo.html   |    57 +
 .../v6/item/theming/css-shadow-parts/index.md |    31 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../item/theming/css-shadow-parts/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/item/theming/input-highlight/demo.html |    50 +
 .../v6/item/theming/input-highlight/index.md  |    32 +
 .../theming/input-highlight/javascript.md     |     0
 .../theming/input-highlight/react/main_css.md |     0
 .../theming/input-highlight/react/main_tsx.md |     0
 .../item/theming/input-highlight/vue.md       |     0
 static/usage/{ => v6}/label/basic/angular.md  |     0
 static/usage/v6/label/basic/demo.html         |    24 +
 static/usage/v6/label/basic/index.md          |     8 +
 .../usage/{ => v6}/label/basic/javascript.md  |     0
 static/usage/{ => v6}/label/basic/react.md    |     0
 static/usage/{ => v6}/label/basic/vue.md      |     0
 static/usage/{ => v6}/label/input/angular.md  |     0
 static/usage/v6/label/input/demo.html         |    59 +
 static/usage/v6/label/input/index.md          |     8 +
 .../usage/{ => v6}/label/input/javascript.md  |     0
 static/usage/{ => v6}/label/input/react.md    |     0
 static/usage/{ => v6}/label/input/vue.md      |     0
 static/usage/{ => v6}/label/item/angular.md   |     0
 static/usage/v6/label/item/demo.html          |    56 +
 static/usage/v6/label/item/index.md           |     8 +
 .../usage/{ => v6}/label/item/javascript.md   |     0
 static/usage/{ => v6}/label/item/react.md     |     0
 static/usage/{ => v6}/label/item/vue.md       |     0
 .../{ => v6}/label/theming/colors/angular.md  |     0
 .../usage/v6/label/theming/colors/demo.html   |    39 +
 static/usage/v6/label/theming/colors/index.md |     8 +
 .../label/theming/colors/javascript.md        |     0
 .../{ => v6}/label/theming/colors/react.md    |     0
 .../{ => v6}/label/theming/colors/vue.md      |     0
 .../{ => v6}/list-header/basic/angular.md     |     0
 static/usage/v6/list-header/basic/demo.html   |    49 +
 static/usage/v6/list-header/basic/index.md    |     8 +
 .../{ => v6}/list-header/basic/javascript.md  |     0
 .../usage/{ => v6}/list-header/basic/react.md |     0
 .../usage/{ => v6}/list-header/basic/vue.md   |     0
 .../{ => v6}/list-header/buttons/angular.md   |     0
 static/usage/v6/list-header/buttons/demo.html |    50 +
 static/usage/v6/list-header/buttons/index.md  |     8 +
 .../list-header/buttons/javascript.md         |     0
 .../{ => v6}/list-header/buttons/react.md     |     0
 .../usage/{ => v6}/list-header/buttons/vue.md |     0
 .../{ => v6}/list-header/lines/angular.md     |     0
 static/usage/v6/list-header/lines/demo.html   |    64 +
 static/usage/v6/list-header/lines/index.md    |     8 +
 .../{ => v6}/list-header/lines/javascript.md  |     0
 .../usage/{ => v6}/list-header/lines/react.md |     0
 .../usage/{ => v6}/list-header/lines/vue.md   |     0
 .../list-header/theming/colors/angular.md     |     0
 .../v6/list-header/theming/colors/demo.html   |    59 +
 .../v6/list-header/theming/colors/index.md    |    12 +
 .../list-header/theming/colors/javascript.md  |     0
 .../list-header/theming/colors/react.md       |     0
 .../list-header/theming/colors/vue.md         |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    37 +
 .../theming/css-properties/index.md           |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../list-header/theming/css-properties/vue.md |     0
 static/usage/{ => v6}/list/basic/angular.md   |     0
 static/usage/v6/list/basic/demo.html          |    46 +
 static/usage/v6/list/basic/index.md           |     8 +
 .../usage/{ => v6}/list/basic/javascript.md   |     0
 static/usage/{ => v6}/list/basic/react.md     |     0
 static/usage/{ => v6}/list/basic/vue.md       |     0
 static/usage/{ => v6}/list/inset/angular.md   |     0
 static/usage/v6/list/inset/demo.html          |    51 +
 static/usage/v6/list/inset/index.md           |     8 +
 .../usage/{ => v6}/list/inset/javascript.md   |     0
 static/usage/{ => v6}/list/inset/react.md     |     0
 static/usage/{ => v6}/list/inset/vue.md       |     0
 static/usage/{ => v6}/list/lines/angular.md   |     0
 static/usage/v6/list/lines/demo.html          |    66 +
 static/usage/v6/list/lines/index.md           |     8 +
 .../usage/{ => v6}/list/lines/javascript.md   |     0
 static/usage/{ => v6}/list/lines/react.md     |     0
 static/usage/{ => v6}/list/lines/vue.md       |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 static/usage/v6/loading/controller/demo.html  |    39 +
 static/usage/v6/loading/controller/index.md   |    23 +
 .../{ => v6}/loading/controller/javascript.md |     0
 .../{ => v6}/loading/controller/react.md      |     0
 .../usage/{ => v6}/loading/controller/vue.md  |     0
 .../angular/example_component_html.md         |     0
 .../spinners/angular/example_component_ts.md  |     0
 static/usage/v6/loading/spinners/demo.html    |    40 +
 static/usage/v6/loading/spinners/index.md     |    23 +
 .../{ => v6}/loading/spinners/javascript.md   |     0
 .../usage/{ => v6}/loading/spinners/react.md  |     0
 static/usage/{ => v6}/loading/spinners/vue.md |     0
 .../theming/angular/example_component_html.md |     0
 .../theming/angular/example_component_ts.md   |     0
 .../loading/theming/angular/global_css.md     |     0
 static/usage/v6/loading/theming/demo.html     |    48 +
 static/usage/v6/loading/theming/index.md      |    33 +
 .../{ => v6}/loading/theming/javascript.md    |     0
 .../usage/{ => v6}/loading/theming/react.md   |     0
 .../loading/theming/react/main_css.md         |     0
 .../loading/theming/react/main_tsx.md         |     0
 static/usage/{ => v6}/loading/theming/vue.md  |     0
 static/usage/{ => v6}/menu/basic/angular.md   |     0
 static/usage/v6/menu/basic/demo.html          |    40 +
 static/usage/v6/menu/basic/index.md           |    17 +
 .../usage/{ => v6}/menu/basic/javascript.md   |     0
 static/usage/{ => v6}/menu/basic/react.md     |     0
 static/usage/{ => v6}/menu/basic/vue.md       |     0
 .../theming/angular/example_component_css.md  |     0
 .../theming/angular/example_component_html.md |     0
 static/usage/v6/menu/theming/demo.html        |    51 +
 static/usage/v6/menu/theming/index.md         |    32 +
 .../usage/{ => v6}/menu/theming/javascript.md |     0
 .../{ => v6}/menu/theming/react/main_css.md   |     0
 .../{ => v6}/menu/theming/react/main_tsx.md   |     0
 static/usage/{ => v6}/menu/theming/vue.md     |     0
 static/usage/{ => v6}/menu/toggle/angular.md  |     0
 static/usage/v6/menu/toggle/demo.html         |    43 +
 static/usage/v6/menu/toggle/index.md          |    17 +
 .../usage/{ => v6}/menu/toggle/javascript.md  |     0
 static/usage/{ => v6}/menu/toggle/react.md    |     0
 static/usage/{ => v6}/menu/toggle/vue.md      |     0
 .../type/angular/example_component_html.md    |     0
 .../menu/type/angular/example_component_ts.md |     0
 static/usage/v6/menu/type/demo.html           |    74 +
 static/usage/v6/menu/type/index.md            |    24 +
 static/usage/{ => v6}/menu/type/javascript.md |     0
 static/usage/{ => v6}/menu/type/react.md      |     0
 static/usage/{ => v6}/menu/type/vue.md        |     0
 .../boolean/angular/example_component_html.md |     0
 .../boolean/angular/example_component_ts.md   |     0
 .../v6/modal/can-dismiss/boolean/demo.html    |    67 +
 .../v6/modal/can-dismiss/boolean/index.md     |    25 +
 .../modal/can-dismiss/boolean/javascript.md   |     0
 .../modal/can-dismiss/boolean/react.md        |     0
 .../{ => v6}/modal/can-dismiss/boolean/vue.md |     0
 .../angular/example_component_html.md         |     0
 .../function/angular/example_component_ts.md  |     0
 .../v6/modal/can-dismiss/function/demo.html   |    74 +
 .../v6/modal/can-dismiss/function/index.md    |    25 +
 .../modal/can-dismiss/function/javascript.md  |     0
 .../modal/can-dismiss/function/react.md       |     0
 .../modal/can-dismiss/function/vue.md         |     0
 .../basic/angular/example_component_html.md   |     0
 .../basic/angular/example_component_ts.md     |     0
 static/usage/v6/modal/card/basic/demo.html    |    90 +
 static/usage/v6/modal/card/basic/index.md     |    24 +
 .../{ => v6}/modal/card/basic/javascript.md   |     0
 .../usage/{ => v6}/modal/card/basic/react.md  |     0
 static/usage/{ => v6}/modal/card/basic/vue.md |     0
 .../modal/controller/angular/app_module_ts.md |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../angular/modal-example_component_html.md   |     0
 .../angular/modal-example_component_ts.md     |     0
 static/usage/v6/modal/controller/demo.html    |    78 +
 static/usage/v6/modal/controller/index.md     |    38 +
 .../{ => v6}/modal/controller/javascript.md   |     0
 .../usage/{ => v6}/modal/controller/react.md  |     0
 .../modal/controller/vue/example_vue.md       |     0
 .../modal/controller/vue/modal_vue.md         |     0
 .../angular/example_component_html.md         |     0
 .../custom-dialogs/angular/global_css.md      |     0
 .../usage/v6/modal/custom-dialogs/demo.html   |    83 +
 static/usage/v6/modal/custom-dialogs/index.md |    32 +
 .../modal/custom-dialogs/javascript.md        |     0
 .../modal/custom-dialogs/react/main_css.md    |     0
 .../modal/custom-dialogs/react/main_tsx.md    |     0
 .../{ => v6}/modal/custom-dialogs/vue.md      |     0
 .../basic/angular/example_component_html.md   |     0
 .../basic/angular/example_component_ts.md     |     0
 static/usage/v6/modal/inline/basic/demo.html  |    67 +
 static/usage/v6/modal/inline/basic/index.md   |    25 +
 .../{ => v6}/modal/inline/basic/javascript.md |     0
 .../{ => v6}/modal/inline/basic/react.md      |     0
 .../usage/{ => v6}/modal/inline/basic/vue.md  |     0
 .../is-open/angular/example_component_html.md |     0
 .../is-open/angular/example_component_ts.md   |     0
 .../usage/v6/modal/inline/is-open/demo.html   |    46 +
 static/usage/v6/modal/inline/is-open/index.md |    25 +
 .../modal/inline/is-open/javascript.md        |     0
 .../{ => v6}/modal/inline/is-open/react.md    |     0
 .../{ => v6}/modal/inline/is-open/vue.md      |     0
 .../modal/performance/mount/angular.md        |     0
 .../v6/modal/performance/mount/demo.html      |    55 +
 .../usage/v6/modal/performance/mount/index.md |    18 +
 .../modal/performance/mount/javascript.md     |     0
 .../{ => v6}/modal/performance/mount/react.md |     0
 .../{ => v6}/modal/performance/mount/vue.md   |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../modal/sheet/background-content/demo.html  |   106 +
 .../modal/sheet/background-content/index.md   |    27 +
 .../sheet/background-content/javascript.md    |     0
 .../modal/sheet/background-content/react.md   |     0
 .../modal/sheet/background-content/vue.md     |     0
 .../{ => v6}/modal/sheet/basic/angular.md     |     0
 static/usage/v6/modal/sheet/basic/demo.html   |    82 +
 static/usage/v6/modal/sheet/basic/index.md    |    18 +
 .../{ => v6}/modal/sheet/basic/javascript.md  |     0
 .../usage/{ => v6}/modal/sheet/basic/react.md |     0
 .../usage/{ => v6}/modal/sheet/basic/vue.md   |     0
 .../modal/sheet/handle-behavior/angular.md    |     0
 .../v6/modal/sheet/handle-behavior/demo.html  |    41 +
 .../v6/modal/sheet/handle-behavior/index.md   |    18 +
 .../modal/sheet/handle-behavior/javascript.md |     0
 .../modal/sheet/handle-behavior/react.md      |     0
 .../modal/sheet/handle-behavior/vue.md        |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/modal/styling/animations/demo.html     |   117 +
 .../v6/modal/styling/animations/index.md      |    32 +
 .../animations/javascript/index_html.md       |     0
 .../styling/animations/javascript/index_ts.md |     0
 .../modal/styling/animations/react.md         |     0
 .../{ => v6}/modal/styling/animations/vue.md  |     0
 .../theming/angular/example_component_html.md |     0
 .../styling/theming/angular/global_css.md     |     0
 .../usage/v6/modal/styling/theming/demo.html  |   101 +
 .../usage/v6/modal/styling/theming/index.md   |    32 +
 .../modal/styling/theming/javascript.md       |     0
 .../modal/styling/theming/react/main_css.md   |     0
 .../modal/styling/theming/react/main_tsx.md   |     0
 .../{ => v6}/modal/styling/theming/vue.md     |     0
 .../modal-navigation/angular/app_module_ts.md |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../angular/page_one_component_ts.md          |     0
 .../angular/page_three_component_ts.md        |     0
 .../angular/page_two_component_ts.md          |     0
 .../usage/v6/nav/modal-navigation/demo.html   |   106 +
 static/usage/v6/nav/modal-navigation/index.md |    55 +
 .../nav/modal-navigation/javascript.md        |     0
 .../nav/modal-navigation/react/main_tsx.md    |     0
 .../modal-navigation/react/page_one_tsx.md    |     0
 .../modal-navigation/react/page_three_tsx.md  |     0
 .../modal-navigation/react/page_two_tsx.md    |     0
 .../nav/modal-navigation/vue/example_vue.md   |     0
 .../nav/modal-navigation/vue/page_one_vue.md  |     0
 .../modal-navigation/vue/page_three_vue.md    |     0
 .../nav/modal-navigation/vue/page_two_vue.md  |     0
 .../nav/nav-link/angular/app_module_ts.md     |     0
 .../angular/example_component_html.md         |     0
 .../nav-link/angular/example_component_ts.md  |     0
 .../nav-link/angular/page_one_component_ts.md |     0
 .../angular/page_three_component_ts.md        |     0
 .../nav-link/angular/page_two_component_ts.md |     0
 static/usage/v6/nav/nav-link/demo.html        |    84 +
 static/usage/v6/nav/nav-link/index.md         |    54 +
 .../usage/{ => v6}/nav/nav-link/javascript.md |     0
 .../{ => v6}/nav/nav-link/react/main_tsx.md   |     0
 .../nav/nav-link/react/page_one_tsx.md        |     0
 .../nav/nav-link/react/page_three_tsx.md      |     0
 .../nav/nav-link/react/page_two_tsx.md        |     0
 .../{ => v6}/nav/nav-link/vue/example_vue.md  |     0
 .../{ => v6}/nav/nav-link/vue/page_one_vue.md |     0
 .../nav/nav-link/vue/page_three_vue.md        |     0
 .../{ => v6}/nav/nav-link/vue/page_two_vue.md |     0
 static/usage/{ => v6}/note/basic/angular.md   |     0
 static/usage/v6/note/basic/demo.html          |    25 +
 static/usage/v6/note/basic/index.md           |     8 +
 .../usage/{ => v6}/note/basic/javascript.md   |     0
 static/usage/{ => v6}/note/basic/react.md     |     0
 static/usage/{ => v6}/note/basic/vue.md       |     0
 static/usage/{ => v6}/note/item/angular.md    |     0
 static/usage/v6/note/item/demo.html           |    38 +
 static/usage/v6/note/item/index.md            |     8 +
 static/usage/{ => v6}/note/item/javascript.md |     0
 static/usage/{ => v6}/note/item/react.md      |     0
 static/usage/{ => v6}/note/item/vue.md        |     0
 .../{ => v6}/note/theming/colors/angular.md   |     0
 static/usage/v6/note/theming/colors/demo.html |    49 +
 static/usage/v6/note/theming/colors/index.md  |     8 +
 .../note/theming/colors/javascript.md         |     0
 .../{ => v6}/note/theming/colors/react.md     |     0
 .../usage/{ => v6}/note/theming/colors/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/note/theming/css-properties/demo.html  |    30 +
 .../v6/note/theming/css-properties/index.md   |    31 +
 .../note/theming/css-properties/javascript.md |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../note/theming/css-properties/vue.md        |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../usage/v6/picker/multiple-column/demo.html |    90 +
 .../usage/v6/picker/multiple-column/index.md  |    24 +
 .../picker/multiple-column/javascript.md      |     0
 .../{ => v6}/picker/multiple-column/react.md  |     0
 .../{ => v6}/picker/multiple-column/vue.md    |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../usage/v6/picker/single-column/demo.html   |    65 +
 static/usage/v6/picker/single-column/index.md |    24 +
 .../picker/single-column/javascript.md        |     0
 .../{ => v6}/picker/single-column/react.md    |     0
 .../{ => v6}/picker/single-column/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../customization/positioning/demo.html       |    52 +
 .../customization/positioning/index.md        |    33 +
 .../customization/positioning/javascript.md   |     0
 .../positioning/react/main_css.md             |     0
 .../positioning/react/main_tsx.md             |     0
 .../popover/customization/positioning/vue.md  |     0
 .../popover/customization/sizing/angular.md   |     0
 .../v6/popover/customization/sizing/demo.html |    32 +
 .../v6/popover/customization/sizing/index.md  |    12 +
 .../customization/sizing/javascript.md        |     0
 .../popover/customization/sizing/react.md     |     0
 .../popover/customization/sizing/vue.md       |     0
 .../styling/angular/example_component_html.md |     0
 .../styling/angular/global_css.md             |     0
 .../popover/customization/styling/demo.html   |    45 +
 .../v6/popover/customization/styling/index.md |    31 +
 .../customization/styling/javascript.md       |     0
 .../customization/styling/react/main_css.md   |     0
 .../customization/styling/react/main_tsx.md   |     0
 .../popover/customization/styling/vue.md      |     0
 .../usage/{ => v6}/popover/nested/angular.md  |     0
 static/usage/v6/popover/nested/demo.html      |    41 +
 static/usage/v6/popover/nested/index.md       |     8 +
 .../{ => v6}/popover/nested/javascript.md     |     0
 static/usage/{ => v6}/popover/nested/react.md |     0
 static/usage/{ => v6}/popover/nested/vue.md   |     0
 .../popover/performance/mount/angular.md      |     0
 .../v6/popover/performance/mount/demo.html    |    27 +
 .../v6/popover/performance/mount/index.md     |    17 +
 .../popover/performance/mount/javascript.md   |     0
 .../popover/performance/mount/react.md        |     0
 .../{ => v6}/popover/performance/mount/vue.md |     0
 .../controller/angular/app_module_ts.md       |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../angular/popover_component_html.md         |     0
 .../angular/popover_component_ts.md           |     0
 .../popover/presenting/controller/demo.html   |    63 +
 .../v6/popover/presenting/controller/index.md |    37 +
 .../presenting/controller/javascript.md       |     0
 .../popover/presenting/controller/react.md    |     0
 .../presenting/controller/vue/example_vue.md  |     0
 .../presenting/controller/vue/popover_vue.md  |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../presenting/inline-isopen/demo.html        |    39 +
 .../popover/presenting/inline-isopen/index.md |    24 +
 .../presenting/inline-isopen/javascript.md    |     0
 .../popover/presenting/inline-isopen/react.md |     0
 .../popover/presenting/inline-isopen/vue.md   |     0
 .../presenting/inline-trigger/angular.md      |     0
 .../presenting/inline-trigger/demo.html       |    37 +
 .../presenting/inline-trigger/index.md        |    12 +
 .../presenting/inline-trigger/javascript.md   |     0
 .../presenting/inline-trigger/react.md        |     0
 .../popover/presenting/inline-trigger/vue.md  |     0
 .../buffer/angular/example_component_html.md  |     0
 .../buffer/angular/example_component_ts.md    |     0
 static/usage/v6/progress-bar/buffer/demo.html |    47 +
 static/usage/v6/progress-bar/buffer/index.md  |    24 +
 .../progress-bar/buffer/javascript.md         |     0
 .../{ => v6}/progress-bar/buffer/react.md     |     0
 .../usage/{ => v6}/progress-bar/buffer/vue.md |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/progress-bar/determinate/demo.html     |    42 +
 .../v6/progress-bar/determinate/index.md      |    24 +
 .../progress-bar/determinate/javascript.md    |     0
 .../progress-bar/determinate/react.md         |     0
 .../{ => v6}/progress-bar/determinate/vue.md  |     0
 .../progress-bar/indeterminate/angular.md     |     0
 .../v6/progress-bar/indeterminate/demo.html   |    25 +
 .../v6/progress-bar/indeterminate/index.md    |     8 +
 .../progress-bar/indeterminate/javascript.md  |     0
 .../progress-bar/indeterminate/react.md       |     0
 .../progress-bar/indeterminate/vue.md         |     0
 .../progress-bar/theming/colors/angular.md    |     0
 .../v6/progress-bar/theming/colors/demo.html  |    39 +
 .../v6/progress-bar/theming/colors/index.md   |     8 +
 .../progress-bar/theming/colors/javascript.md |     0
 .../progress-bar/theming/colors/react.md      |     0
 .../progress-bar/theming/colors/vue.md        |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    37 +
 .../theming/css-properties/index.md           |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../theming/css-properties/vue.md             |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-shadow-parts/demo.html        |    44 +
 .../theming/css-shadow-parts/index.md         |    31 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../theming/css-shadow-parts/vue.md           |     0
 static/usage/{ => v6}/radio/basic/angular.md  |     0
 static/usage/v6/radio/basic/demo.html         |    52 +
 static/usage/v6/radio/basic/index.md          |     8 +
 .../usage/{ => v6}/radio/basic/javascript.md  |     0
 static/usage/{ => v6}/radio/basic/react.md    |     0
 static/usage/{ => v6}/radio/basic/vue.md      |     0
 .../{ => v6}/radio/empty-selection/angular.md |     0
 .../usage/v6/radio/empty-selection/demo.html  |    52 +
 .../usage/v6/radio/empty-selection/index.md   |     8 +
 .../radio/empty-selection/javascript.md       |     0
 .../{ => v6}/radio/empty-selection/react.md   |     0
 .../{ => v6}/radio/empty-selection/vue.md     |     0
 .../{ => v6}/radio/theming/colors/angular.md  |     0
 .../usage/v6/radio/theming/colors/demo.html   |    54 +
 static/usage/v6/radio/theming/colors/index.md |     8 +
 .../radio/theming/colors/javascript.md        |     0
 .../{ => v6}/radio/theming/colors/react.md    |     0
 .../{ => v6}/radio/theming/colors/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/radio/theming/css-properties/demo.html |    49 +
 .../v6/radio/theming/css-properties/index.md  |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../radio/theming/css-properties/vue.md       |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../radio/theming/css-shadow-parts/demo.html  |    62 +
 .../radio/theming/css-shadow-parts/index.md   |    32 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../radio/theming/css-shadow-parts/vue.md     |     0
 static/usage/{ => v6}/range/basic/angular.md  |     0
 static/usage/v6/range/basic/demo.html         |    29 +
 static/usage/v6/range/basic/index.md          |     8 +
 .../usage/{ => v6}/range/basic/javascript.md  |     0
 static/usage/{ => v6}/range/basic/react.md    |     0
 static/usage/{ => v6}/range/basic/vue.md      |     0
 .../{ => v6}/range/dual-knobs/angular.md      |     0
 static/usage/v6/range/dual-knobs/demo.html    |    36 +
 static/usage/v6/range/dual-knobs/index.md     |     8 +
 .../{ => v6}/range/dual-knobs/javascript.md   |     0
 .../usage/{ => v6}/range/dual-knobs/react.md  |     0
 static/usage/{ => v6}/range/dual-knobs/vue.md |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../usage/v6/range/ion-change-event/demo.html |    40 +
 .../usage/v6/range/ion-change-event/index.md  |    23 +
 .../range/ion-change-event/javascript.md      |     0
 .../{ => v6}/range/ion-change-event/react.md  |     0
 .../{ => v6}/range/ion-change-event/vue.md    |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/range/ion-knob-move-event/demo.html    |    50 +
 .../v6/range/ion-knob-move-event/index.md     |    23 +
 .../range/ion-knob-move-event/javascript.md   |     0
 .../range/ion-knob-move-event/react.md        |     0
 .../{ => v6}/range/ion-knob-move-event/vue.md |     0
 .../pins/angular/example_component_html.md    |     0
 .../pins/angular/example_component_ts.md      |     0
 static/usage/v6/range/pins/demo.html          |    35 +
 static/usage/v6/range/pins/index.md           |    23 +
 .../usage/{ => v6}/range/pins/javascript.md   |     0
 static/usage/{ => v6}/range/pins/react.md     |     0
 static/usage/{ => v6}/range/pins/vue.md       |     0
 static/usage/{ => v6}/range/slots/angular.md  |     0
 static/usage/v6/range/slots/demo.html         |    32 +
 static/usage/v6/range/slots/index.md          |     8 +
 .../usage/{ => v6}/range/slots/javascript.md  |     0
 static/usage/{ => v6}/range/slots/react.md    |     0
 static/usage/{ => v6}/range/slots/vue.md      |     0
 .../{ => v6}/range/snapping-ticks/angular.md  |     0
 .../usage/v6/range/snapping-ticks/demo.html   |    29 +
 static/usage/v6/range/snapping-ticks/index.md |     8 +
 .../range/snapping-ticks/javascript.md        |     0
 .../{ => v6}/range/snapping-ticks/react.md    |     0
 .../{ => v6}/range/snapping-ticks/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/range/theming/css-properties/demo.html |    38 +
 .../v6/range/theming/css-properties/index.md  |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../range/theming/css-properties/vue.md       |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../range/theming/css-shadow-parts/demo.html  |    71 +
 .../range/theming/css-shadow-parts/index.md   |    31 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../range/theming/css-shadow-parts/vue.md     |     0
 .../advanced/angular/example_component_css.md |     0
 .../angular/example_component_html.md         |     0
 .../advanced/angular/example_component_ts.md  |     0
 static/usage/v6/refresher/advanced/demo.html  |    99 +
 static/usage/v6/refresher/advanced/index.md   |    35 +
 .../{ => v6}/refresher/advanced/javascript.md |     0
 .../refresher/advanced/react/main_css.md      |     0
 .../refresher/advanced/react/main_tsx.md      |     0
 .../usage/{ => v6}/refresher/advanced/vue.md  |     0
 .../basic/angular/example_component_html.md   |     0
 .../basic/angular/example_component_ts.md     |     0
 static/usage/v6/refresher/basic/demo.html     |    43 +
 static/usage/v6/refresher/basic/index.md      |    25 +
 .../{ => v6}/refresher/basic/javascript.md    |     0
 .../usage/{ => v6}/refresher/basic/react.md   |     0
 static/usage/{ => v6}/refresher/basic/vue.md  |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/refresher/custom-content/demo.html     |    45 +
 .../v6/refresher/custom-content/index.md      |    25 +
 .../refresher/custom-content/javascript.md    |     0
 .../refresher/custom-content/react.md         |     0
 .../{ => v6}/refresher/custom-content/vue.md  |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../refresher/custom-scroll-target/demo.html  |    56 +
 .../refresher/custom-scroll-target/index.md   |    33 +
 .../custom-scroll-target/javascript.md        |     0
 .../custom-scroll-target/react/main_css.md    |     0
 .../custom-scroll-target/react/main_tsx.md    |     0
 .../refresher/custom-scroll-target/vue.md     |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/refresher/pull-properties/demo.html    |    43 +
 .../v6/refresher/pull-properties/index.md     |    25 +
 .../refresher/pull-properties/javascript.md   |     0
 .../refresher/pull-properties/react.md        |     0
 .../{ => v6}/refresher/pull-properties/vue.md |     0
 .../basic/angular/example_component_html.md   |     0
 .../basic/angular/example_component_ts.md     |     0
 static/usage/v6/reorder/basic/demo.html       |    83 +
 static/usage/v6/reorder/basic/index.md        |    24 +
 .../{ => v6}/reorder/basic/javascript.md      |     0
 static/usage/{ => v6}/reorder/basic/react.md  |     0
 static/usage/{ => v6}/reorder/basic/vue.md    |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 static/usage/v6/reorder/custom-icon/demo.html |    93 +
 static/usage/v6/reorder/custom-icon/index.md  |    24 +
 .../reorder/custom-icon/javascript.md         |     0
 .../{ => v6}/reorder/custom-icon/react.md     |     0
 .../usage/{ => v6}/reorder/custom-icon/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/reorder/custom-scroll-target/demo.html |    95 +
 .../v6/reorder/custom-scroll-target/index.md  |    35 +
 .../custom-scroll-target/javascript.md        |     0
 .../custom-scroll-target/react/main_css.md    |     0
 .../custom-scroll-target/react/main_tsx.md    |     0
 .../reorder/custom-scroll-target/vue.md       |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/reorder/toggling-disabled/demo.html    |    96 +
 .../v6/reorder/toggling-disabled/index.md     |    24 +
 .../reorder/toggling-disabled/javascript.md   |     0
 .../reorder/toggling-disabled/react.md        |     0
 .../{ => v6}/reorder/toggling-disabled/vue.md |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../usage/v6/reorder/updating-data/demo.html  |    76 +
 .../usage/v6/reorder/updating-data/index.md   |    24 +
 .../reorder/updating-data/javascript.md       |     0
 .../{ => v6}/reorder/updating-data/react.md   |     0
 .../{ => v6}/reorder/updating-data/vue.md     |     0
 .../wrapper/angular/example_component_html.md |     0
 .../wrapper/angular/example_component_ts.md   |     0
 static/usage/v6/reorder/wrapper/demo.html     |    88 +
 static/usage/v6/reorder/wrapper/index.md      |    24 +
 .../{ => v6}/reorder/wrapper/javascript.md    |     0
 .../usage/{ => v6}/reorder/wrapper/react.md   |     0
 static/usage/{ => v6}/reorder/wrapper/vue.md  |     0
 .../basic/angular/example_component_css.md    |     0
 .../basic/angular/example_component_html.md   |     0
 static/usage/v6/ripple-effect/basic/demo.html |    82 +
 static/usage/v6/ripple-effect/basic/index.md  |    32 +
 .../ripple-effect/basic/javascript.md         |     0
 .../ripple-effect/basic/react/main_css.md     |     0
 .../ripple-effect/basic/react/main_tsx.md     |     0
 .../usage/{ => v6}/ripple-effect/basic/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../v6/ripple-effect/customizing/demo.html    |    81 +
 .../v6/ripple-effect/customizing/index.md     |    32 +
 .../ripple-effect/customizing/javascript.md   |     0
 .../customizing/react/main_css.md             |     0
 .../customizing/react/main_tsx.md             |     0
 .../{ => v6}/ripple-effect/customizing/vue.md |     0
 .../type/angular/example_component_css.md     |     0
 .../type/angular/example_component_html.md    |     0
 static/usage/v6/ripple-effect/type/demo.html  |    81 +
 static/usage/v6/ripple-effect/type/index.md   |    32 +
 .../{ => v6}/ripple-effect/type/javascript.md |     0
 .../ripple-effect/type/react/main_css.md      |     0
 .../ripple-effect/type/react/main_tsx.md      |     0
 .../usage/{ => v6}/ripple-effect/type/vue.md  |     0
 .../usage/{ => v6}/searchbar/basic/angular.md |     0
 static/usage/v6/searchbar/basic/demo.html     |    34 +
 static/usage/v6/searchbar/basic/index.md      |     8 +
 .../{ => v6}/searchbar/basic/javascript.md    |     0
 .../usage/{ => v6}/searchbar/basic/react.md   |     0
 static/usage/{ => v6}/searchbar/basic/vue.md  |     0
 .../searchbar/cancel-button/angular.md        |     0
 .../v6/searchbar/cancel-button/demo.html      |    34 +
 .../usage/v6/searchbar/cancel-button/index.md |     8 +
 .../searchbar/cancel-button/javascript.md     |     0
 .../{ => v6}/searchbar/cancel-button/react.md |     0
 .../{ => v6}/searchbar/cancel-button/vue.md   |     0
 .../searchbar/clear-button/angular.md         |     0
 .../usage/v6/searchbar/clear-button/demo.html |    33 +
 .../usage/v6/searchbar/clear-button/index.md  |     8 +
 .../searchbar/clear-button/javascript.md      |     0
 .../{ => v6}/searchbar/clear-button/react.md  |     0
 .../{ => v6}/searchbar/clear-button/vue.md    |     0
 .../angular/example_component_html.md         |     0
 .../debounce/angular/example_component_ts.md  |     0
 static/usage/v6/searchbar/debounce/demo.html  |    64 +
 static/usage/v6/searchbar/debounce/index.md   |    25 +
 .../{ => v6}/searchbar/debounce/javascript.md |     0
 .../{ => v6}/searchbar/debounce/react.md      |     0
 .../usage/{ => v6}/searchbar/debounce/vue.md  |     0
 .../{ => v6}/searchbar/search-icon/angular.md |     0
 .../usage/v6/searchbar/search-icon/demo.html  |    31 +
 .../usage/v6/searchbar/search-icon/index.md   |     8 +
 .../searchbar/search-icon/javascript.md       |     0
 .../{ => v6}/searchbar/search-icon/react.md   |     0
 .../{ => v6}/searchbar/search-icon/vue.md     |     0
 .../searchbar/theming/colors/angular.md       |     0
 .../v6/searchbar/theming/colors/demo.html     |    39 +
 .../v6/searchbar/theming/colors/index.md      |     8 +
 .../searchbar/theming/colors/javascript.md    |     0
 .../searchbar/theming/colors/react.md         |     0
 .../{ => v6}/searchbar/theming/colors/vue.md  |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    48 +
 .../searchbar/theming/css-properties/index.md |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../searchbar/theming/css-properties/vue.md   |     0
 .../{ => v6}/segment-button/basic/angular.md  |     0
 .../usage/v6/segment-button/basic/demo.html   |    56 +
 static/usage/v6/segment-button/basic/index.md |     8 +
 .../segment-button/basic/javascript.md        |     0
 .../{ => v6}/segment-button/basic/react.md    |     0
 .../{ => v6}/segment-button/basic/vue.md      |     0
 .../{ => v6}/segment-button/layout/angular.md |     0
 .../usage/v6/segment-button/layout/demo.html  |   104 +
 .../usage/v6/segment-button/layout/index.md   |     8 +
 .../segment-button/layout/javascript.md       |     0
 .../{ => v6}/segment-button/layout/react.md   |     0
 .../{ => v6}/segment-button/layout/vue.md     |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    59 +
 .../theming/css-properties/index.md           |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../theming/css-properties/vue.md             |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-shadow-parts/demo.html        |    71 +
 .../theming/css-shadow-parts/index.md         |    31 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../theming/css-shadow-parts/vue.md           |     0
 .../usage/{ => v6}/segment/basic/angular.md   |     0
 static/usage/v6/segment/basic/demo.html       |    50 +
 static/usage/v6/segment/basic/index.md        |     8 +
 .../{ => v6}/segment/basic/javascript.md      |     0
 static/usage/{ => v6}/segment/basic/react.md  |     0
 static/usage/{ => v6}/segment/basic/vue.md    |     0
 .../{ => v6}/segment/scrollable/angular.md    |     0
 static/usage/v6/segment/scrollable/demo.html  |    66 +
 static/usage/v6/segment/scrollable/index.md   |     8 +
 .../{ => v6}/segment/scrollable/javascript.md |     0
 .../{ => v6}/segment/scrollable/react.md      |     0
 .../usage/{ => v6}/segment/scrollable/vue.md  |     0
 .../segment/theming/colors/angular.md         |     0
 .../usage/v6/segment/theming/colors/demo.html |   113 +
 .../usage/v6/segment/theming/colors/index.md  |     8 +
 .../segment/theming/colors/javascript.md      |     0
 .../{ => v6}/segment/theming/colors/react.md  |     0
 .../{ => v6}/segment/theming/colors/vue.md    |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../segment/theming/css-properties/demo.html  |    42 +
 .../segment/theming/css-properties/index.md   |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../segment/theming/css-properties/vue.md     |     0
 .../basic/multiple-selection/angular.md       |     0
 .../select/basic/multiple-selection/demo.html |    32 +
 .../select/basic/multiple-selection/index.md  |    12 +
 .../basic/multiple-selection/javascript.md    |     0
 .../select/basic/multiple-selection/react.md  |     0
 .../select/basic/multiple-selection/vue.md    |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../basic/responding-to-interaction/demo.html |    62 +
 .../basic/responding-to-interaction/index.md  |    24 +
 .../responding-to-interaction/javascript.md   |     0
 .../basic/responding-to-interaction/react.md  |     0
 .../basic/responding-to-interaction/vue.md    |     0
 .../select/basic/single-selection/angular.md  |     0
 .../select/basic/single-selection/demo.html   |    32 +
 .../v6/select/basic/single-selection/index.md |    12 +
 .../basic/single-selection/javascript.md      |     0
 .../select/basic/single-selection/react.md    |     0
 .../select/basic/single-selection/vue.md      |     0
 .../customization/button-text/angular.md      |     0
 .../customization/button-text/demo.html       |    41 +
 .../select/customization/button-text/index.md |    12 +
 .../customization/button-text/javascript.md   |     0
 .../select/customization/button-text/react.md |     0
 .../select/customization/button-text/vue.md   |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../customization/interface-options/demo.html |    83 +
 .../customization/interface-options/index.md  |    24 +
 .../interface-options/javascript.md           |     0
 .../customization/interface-options/react.md  |     0
 .../customization/interface-options/vue.md    |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../customization/styling-select/demo.html    |    60 +
 .../customization/styling-select/index.md     |    33 +
 .../styling-select/javascript.md              |     0
 .../styling-select/react/main_css.md          |     0
 .../styling-select/react/main_tsx.md          |     0
 .../customization/styling-select/vue.md       |     0
 .../select/interfaces/action-sheet/angular.md |     0
 .../select/interfaces/action-sheet/demo.html  |    32 +
 .../select/interfaces/action-sheet/index.md   |    12 +
 .../interfaces/action-sheet/javascript.md     |     0
 .../select/interfaces/action-sheet/react.md   |     0
 .../select/interfaces/action-sheet/vue.md     |     0
 .../select/interfaces/popover/angular.md      |     0
 .../v6/select/interfaces/popover/demo.html    |    32 +
 .../v6/select/interfaces/popover/index.md     |    12 +
 .../select/interfaces/popover/javascript.md   |     0
 .../select/interfaces/popover/react.md        |     0
 .../{ => v6}/select/interfaces/popover/vue.md |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../multiple-selection/demo.html              |    91 +
 .../multiple-selection/index.md               |    24 +
 .../multiple-selection/javascript.md          |     0
 .../multiple-selection/react.md               |     0
 .../multiple-selection/vue.md                 |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../using-comparewith/demo.html               |    79 +
 .../using-comparewith/index.md                |    24 +
 .../using-comparewith/javascript.md           |     0
 .../using-comparewith/react.md                |     0
 .../using-comparewith/vue.md                  |     0
 .../basic/angular/example_component_html.md   |     0
 .../basic/angular/example_component_ts.md     |     0
 static/usage/v6/skeleton-text/basic/demo.html |    92 +
 static/usage/v6/skeleton-text/basic/index.md  |    24 +
 .../skeleton-text/basic/javascript.md         |     0
 .../{ => v6}/skeleton-text/basic/react.md     |     0
 .../usage/{ => v6}/skeleton-text/basic/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    60 +
 .../theming/css-properties/index.md           |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../theming/css-properties/vue.md             |     0
 .../usage/{ => v6}/spinner/basic/angular.md   |     0
 static/usage/v6/spinner/basic/demo.html       |    79 +
 static/usage/v6/spinner/basic/index.md        |     8 +
 .../{ => v6}/spinner/basic/javascript.md      |     0
 static/usage/{ => v6}/spinner/basic/react.md  |     0
 static/usage/{ => v6}/spinner/basic/vue.md    |     0
 .../spinner/theming/colors/angular.md         |     0
 .../usage/v6/spinner/theming/colors/demo.html |    33 +
 .../usage/v6/spinner/theming/colors/index.md  |     8 +
 .../spinner/theming/colors/javascript.md      |     0
 .../{ => v6}/spinner/theming/colors/react.md  |     0
 .../{ => v6}/spinner/theming/colors/vue.md    |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../spinner/theming/css-properties/demo.html  |    30 +
 .../spinner/theming/css-properties/index.md   |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../spinner/theming/css-properties/react.md   |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../spinner/theming/css-properties/vue.md     |     0
 .../{ => v6}/split-pane/basic/angular.md      |     0
 static/usage/v6/split-pane/basic/demo.html    |    42 +
 static/usage/v6/split-pane/basic/index.md     |     8 +
 .../{ => v6}/split-pane/basic/javascript.md   |     0
 .../usage/{ => v6}/split-pane/basic/react.md  |     0
 static/usage/{ => v6}/split-pane/basic/vue.md |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    50 +
 .../theming/css-properties/index.md           |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../split-pane/theming/css-properties/vue.md  |     0
 static/usage/{ => v6}/text/basic/angular.md   |     0
 static/usage/v6/text/basic/demo.html          |    61 +
 static/usage/v6/text/basic/index.md           |     8 +
 .../usage/{ => v6}/text/basic/javascript.md   |     0
 static/usage/{ => v6}/text/basic/react.md     |     0
 static/usage/{ => v6}/text/basic/vue.md       |     0
 .../{ => v6}/textarea/autogrow/angular.md     |     0
 static/usage/v6/textarea/autogrow/demo.html   |    38 +
 static/usage/v6/textarea/autogrow/index.md    |     8 +
 .../{ => v6}/textarea/autogrow/javascript.md  |     0
 .../usage/{ => v6}/textarea/autogrow/react.md |     0
 .../usage/{ => v6}/textarea/autogrow/vue.md   |     0
 .../usage/{ => v6}/textarea/basic/angular.md  |     0
 static/usage/v6/textarea/basic/demo.html      |    43 +
 static/usage/v6/textarea/basic/index.md       |     8 +
 .../{ => v6}/textarea/basic/javascript.md     |     0
 static/usage/{ => v6}/textarea/basic/react.md |     0
 static/usage/{ => v6}/textarea/basic/vue.md   |     0
 .../textarea/clear-on-edit/angular.md         |     0
 .../usage/v6/textarea/clear-on-edit/demo.html |    31 +
 .../usage/v6/textarea/clear-on-edit/index.md  |     8 +
 .../textarea/clear-on-edit/javascript.md      |     0
 .../{ => v6}/textarea/clear-on-edit/react.md  |     0
 .../{ => v6}/textarea/clear-on-edit/vue.md    |     0
 .../theming/angular/example_component_css.md  |     0
 .../theming/angular/example_component_html.md |     0
 static/usage/v6/textarea/theming/demo.html    |    38 +
 static/usage/v6/textarea/theming/index.md     |    32 +
 .../{ => v6}/textarea/theming/javascript.md   |     0
 .../textarea/theming/react/main_css.md        |     0
 .../textarea/theming/react/main_tsx.md        |     0
 static/usage/{ => v6}/textarea/theming/vue.md |     0
 .../usage/{ => v6}/thumbnail/basic/angular.md |     0
 static/usage/v6/thumbnail/basic/demo.html     |    27 +
 static/usage/v6/thumbnail/basic/index.md      |     8 +
 .../{ => v6}/thumbnail/basic/javascript.md    |     0
 .../usage/{ => v6}/thumbnail/basic/react.md   |     0
 static/usage/{ => v6}/thumbnail/basic/vue.md  |     0
 .../usage/{ => v6}/thumbnail/item/angular.md  |     0
 static/usage/v6/thumbnail/item/demo.html      |    30 +
 static/usage/v6/thumbnail/item/index.md       |     8 +
 .../{ => v6}/thumbnail/item/javascript.md     |     0
 static/usage/{ => v6}/thumbnail/item/react.md |     0
 static/usage/{ => v6}/thumbnail/item/vue.md   |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../theming/css-properties/demo.html          |    33 +
 .../thumbnail/theming/css-properties/index.md |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../thumbnail/theming/css-properties/vue.md   |     0
 static/usage/{ => v6}/title/basic/angular.md  |     0
 static/usage/v6/title/basic/demo.html         |    25 +
 static/usage/v6/title/basic/index.md          |    13 +
 .../usage/{ => v6}/title/basic/javascript.md  |     0
 static/usage/{ => v6}/title/basic/react.md    |     0
 static/usage/{ => v6}/title/basic/vue.md      |     0
 .../collapsible-large-title/basic/angular.md  |     0
 .../collapsible-large-title/basic/demo.html   |    59 +
 .../collapsible-large-title/basic/index.md    |    14 +
 .../basic/javascript.md                       |     0
 .../collapsible-large-title/basic/react.md    |     0
 .../collapsible-large-title/basic/vue.md      |     0
 .../buttons/angular.md                        |     0
 .../collapsible-large-title/buttons/demo.html |    65 +
 .../collapsible-large-title/buttons/index.md  |    14 +
 .../buttons/javascript.md                     |     0
 .../collapsible-large-title/buttons/react.md  |     0
 .../collapsible-large-title/buttons/vue.md    |     0
 .../angular/example_component_html.md         |     0
 .../css-properties/angular/global_css.md      |     0
 .../v6/title/theming/css-properties/demo.html |    69 +
 .../v6/title/theming/css-properties/index.md  |    33 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../title/theming/css-properties/vue.md       |     0
 .../buttons/angular/example_component_html.md |     0
 .../buttons/angular/example_component_ts.md   |     0
 static/usage/v6/toast/buttons/demo.html       |    75 +
 static/usage/v6/toast/buttons/index.md        |    24 +
 .../{ => v6}/toast/buttons/javascript.md      |     0
 static/usage/{ => v6}/toast/buttons/react.md  |     0
 static/usage/{ => v6}/toast/buttons/vue.md    |     0
 .../icon/angular/example_component_html.md    |     0
 .../icon/angular/example_component_ts.md      |     0
 static/usage/v6/toast/icon/demo.html          |    46 +
 static/usage/v6/toast/icon/index.md           |    24 +
 .../usage/{ => v6}/toast/icon/javascript.md   |     0
 static/usage/{ => v6}/toast/icon/react.md     |     0
 static/usage/{ => v6}/toast/icon/vue.md       |     0
 .../angular/example_component_html.md         |     0
 .../angular/example_component_ts.md           |     0
 .../v6/toast/presenting/controller/demo.html  |    54 +
 .../v6/toast/presenting/controller/index.md   |    24 +
 .../toast/presenting/controller/javascript.md |     0
 .../toast/presenting/controller/react.md      |     0
 .../toast/presenting/controller/vue.md        |     0
 .../theming/angular/example_component_html.md |     0
 .../theming/angular/example_component_ts.md   |     0
 .../toast/theming/angular/global_css.md       |     0
 static/usage/v6/toast/theming/demo.html       |    70 +
 static/usage/v6/toast/theming/index.md        |    33 +
 .../{ => v6}/toast/theming/javascript.md      |     0
 .../{ => v6}/toast/theming/react/main_css.md  |     0
 .../{ => v6}/toast/theming/react/main_tsx.md  |     0
 static/usage/{ => v6}/toast/theming/vue.md    |     0
 static/usage/{ => v6}/toggle/basic/angular.md |     0
 static/usage/v6/toggle/basic/demo.html        |    47 +
 static/usage/v6/toggle/basic/index.md         |     8 +
 .../usage/{ => v6}/toggle/basic/javascript.md |     0
 static/usage/{ => v6}/toggle/basic/react.md   |     0
 static/usage/{ => v6}/toggle/basic/vue.md     |     0
 .../usage/{ => v6}/toggle/on-off/angular.md   |     0
 static/usage/v6/toggle/on-off/demo.html       |    25 +
 static/usage/v6/toggle/on-off/index.md        |     8 +
 .../{ => v6}/toggle/on-off/javascript.md      |     0
 static/usage/{ => v6}/toggle/on-off/react.md  |     0
 static/usage/{ => v6}/toggle/on-off/vue.md    |     0
 .../{ => v6}/toggle/theming/colors/angular.md |     0
 .../usage/v6/toggle/theming/colors/demo.html  |    33 +
 .../usage/v6/toggle/theming/colors/index.md   |     8 +
 .../toggle/theming/colors/javascript.md       |     0
 .../{ => v6}/toggle/theming/colors/react.md   |     0
 .../{ => v6}/toggle/theming/colors/vue.md     |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../toggle/theming/css-properties/demo.html   |    52 +
 .../v6/toggle/theming/css-properties/index.md |    31 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../toggle/theming/css-properties/vue.md      |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../toggle/theming/css-shadow-parts/demo.html |    59 +
 .../toggle/theming/css-shadow-parts/index.md  |    31 +
 .../theming/css-shadow-parts/javascript.md    |     0
 .../css-shadow-parts/react/main_css.md        |     0
 .../css-shadow-parts/react/main_tsx.md        |     0
 .../toggle/theming/css-shadow-parts/vue.md    |     0
 .../usage/{ => v6}/toolbar/basic/angular.md   |     0
 static/usage/v6/toolbar/basic/demo.html       |    31 +
 static/usage/v6/toolbar/basic/index.md        |    13 +
 .../{ => v6}/toolbar/basic/javascript.md      |     0
 static/usage/{ => v6}/toolbar/basic/react.md  |     0
 static/usage/{ => v6}/toolbar/basic/vue.md    |     0
 .../usage/{ => v6}/toolbar/buttons/angular.md |     0
 static/usage/v6/toolbar/buttons/demo.html     |   120 +
 static/usage/v6/toolbar/buttons/index.md      |     8 +
 .../{ => v6}/toolbar/buttons/javascript.md    |     0
 .../usage/{ => v6}/toolbar/buttons/react.md   |     0
 static/usage/{ => v6}/toolbar/buttons/vue.md  |     0
 .../{ => v6}/toolbar/progress-bars/angular.md |     0
 .../usage/v6/toolbar/progress-bars/demo.html  |    26 +
 .../usage/v6/toolbar/progress-bars/index.md   |    13 +
 .../toolbar/progress-bars/javascript.md       |     0
 .../{ => v6}/toolbar/progress-bars/react.md   |     0
 .../{ => v6}/toolbar/progress-bars/vue.md     |     0
 .../{ => v6}/toolbar/searchbars/angular.md    |     0
 static/usage/v6/toolbar/searchbars/demo.html  |    28 +
 static/usage/v6/toolbar/searchbars/index.md   |    13 +
 .../{ => v6}/toolbar/searchbars/javascript.md |     0
 .../{ => v6}/toolbar/searchbars/react.md      |     0
 .../usage/{ => v6}/toolbar/searchbars/vue.md  |     0
 .../{ => v6}/toolbar/segments/angular.md      |     0
 static/usage/v6/toolbar/segments/demo.html    |    32 +
 static/usage/v6/toolbar/segments/index.md     |    13 +
 .../{ => v6}/toolbar/segments/javascript.md   |     0
 .../usage/{ => v6}/toolbar/segments/react.md  |     0
 static/usage/{ => v6}/toolbar/segments/vue.md |     0
 .../toolbar/theming/colors/angular.md         |     0
 .../usage/v6/toolbar/theming/colors/demo.html |    60 +
 .../usage/v6/toolbar/theming/colors/index.md  |     8 +
 .../toolbar/theming/colors/javascript.md      |     0
 .../{ => v6}/toolbar/theming/colors/react.md  |     0
 .../{ => v6}/toolbar/theming/colors/vue.md    |     0
 .../angular/example_component_css.md          |     0
 .../angular/example_component_html.md         |     0
 .../toolbar/theming/css-properties/demo.html  |    46 +
 .../toolbar/theming/css-properties/index.md   |    32 +
 .../theming/css-properties/javascript.md      |     0
 .../theming/css-properties/react/main_css.md  |     0
 .../theming/css-properties/react/main_tsx.md  |     0
 .../toolbar/theming/css-properties/vue.md     |     0
 .../accessibility/animations/angular.md       |    22 +
 .../accessibility/animations/demo.html        |    49 +
 .../accessibility/animations/index.md         |    17 +
 .../accessibility/animations/javascript.md    |    28 +
 .../accessibility/animations/react.md         |    35 +
 .../accordion/accessibility/animations/vue.md |    37 +
 static/usage/v7/accordion/basic/angular.md    |    28 +
 static/usage/v7/accordion/basic/demo.html     |    49 +
 static/usage/v7/accordion/basic/index.md      |    18 +
 static/usage/v7/accordion/basic/javascript.md |    28 +
 static/usage/v7/accordion/basic/react.md      |    40 +
 static/usage/v7/accordion/basic/vue.md        |    49 +
 .../angular/example_component_css.md          |    24 +
 .../angular/example_component_html.md         |    28 +
 .../angular/example_component_ts.md           |    10 +
 .../advanced-expansion-styles/demo.html       |    82 +
 .../advanced-expansion-styles/index.md        |    35 +
 .../advanced-expansion-styles/javascript.md   |    53 +
 .../react/main_css.md                         |    24 +
 .../react/main_tsx.md                         |    38 +
 .../advanced-expansion-styles/vue.md          |    74 +
 .../customization/expansion-styles/angular.md |    28 +
 .../customization/expansion-styles/demo.html  |    49 +
 .../customization/expansion-styles/index.md   |    18 +
 .../expansion-styles/javascript.md            |    28 +
 .../customization/expansion-styles/react.md   |    40 +
 .../customization/expansion-styles/vue.md     |    49 +
 .../accordion/customization/icons/angular.md  |    22 +
 .../accordion/customization/icons/demo.html   |    49 +
 .../v7/accordion/customization/icons/index.md |    18 +
 .../customization/icons/javascript.md         |    28 +
 .../v7/accordion/customization/icons/react.md |    42 +
 .../v7/accordion/customization/icons/vue.md   |    53 +
 .../theming/angular/example_component_html.md |    28 +
 .../theming/angular/global_css.md             |    23 +
 .../accordion/customization/theming/demo.html |    72 +
 .../accordion/customization/theming/index.md  |    33 +
 .../customization/theming/javascript.md       |    52 +
 .../customization/theming/react/main_css.md   |    23 +
 .../customization/theming/react/main_tsx.md   |    43 +
 .../v7/accordion/customization/theming/vue.md |    77 +
 .../v7/accordion/disable-group/angular.md     |    22 +
 .../v7/accordion/disable-group/demo.html      |    49 +
 .../usage/v7/accordion/disable-group/index.md |    17 +
 .../v7/accordion/disable-group/javascript.md  |    22 +
 .../usage/v7/accordion/disable-group/react.md |    35 +
 .../usage/v7/accordion/disable-group/vue.md   |    37 +
 .../v7/accordion/disable/group/angular.md     |    22 +
 .../v7/accordion/disable/group/demo.html      |    49 +
 .../usage/v7/accordion/disable/group/index.md |    17 +
 .../v7/accordion/disable/group/javascript.md  |    22 +
 .../usage/v7/accordion/disable/group/react.md |    35 +
 .../usage/v7/accordion/disable/group/vue.md   |    37 +
 .../accordion/disable/individual/angular.md   |    22 +
 .../v7/accordion/disable/individual/demo.html |    49 +
 .../v7/accordion/disable/individual/index.md  |    18 +
 .../disable/individual/javascript.md          |    22 +
 .../v7/accordion/disable/individual/react.md  |    35 +
 .../v7/accordion/disable/individual/vue.md    |    37 +
 .../angular/example_component_html.md         |    24 +
 .../angular/example_component_ts.md           |    27 +
 .../v7/accordion/listen-changes/demo.html     |    73 +
 .../v7/accordion/listen-changes/index.md      |    25 +
 .../v7/accordion/listen-changes/javascript.md |    40 +
 .../v7/accordion/listen-changes/react.md      |    55 +
 .../usage/v7/accordion/listen-changes/vue.md  |    58 +
 static/usage/v7/accordion/multiple/angular.md |    22 +
 static/usage/v7/accordion/multiple/demo.html  |    54 +
 static/usage/v7/accordion/multiple/index.md   |    18 +
 .../usage/v7/accordion/multiple/javascript.md |    27 +
 static/usage/v7/accordion/multiple/react.md   |    45 +
 static/usage/v7/accordion/multiple/vue.md     |    38 +
 .../v7/accordion/readonly/group/angular.md    |    28 +
 .../v7/accordion/readonly/group/demo.html     |    49 +
 .../v7/accordion/readonly/group/index.md      |    18 +
 .../v7/accordion/readonly/group/javascript.md |    28 +
 .../v7/accordion/readonly/group/react.md      |    40 +
 .../usage/v7/accordion/readonly/group/vue.md  |    49 +
 .../accordion/readonly/individual/angular.md  |    28 +
 .../accordion/readonly/individual/demo.html   |    49 +
 .../v7/accordion/readonly/individual/index.md |    17 +
 .../readonly/individual/javascript.md         |    28 +
 .../v7/accordion/readonly/individual/react.md |    40 +
 .../v7/accordion/readonly/individual/vue.md   |    49 +
 .../toggle/angular/example_component_html.md  |    24 +
 .../toggle/angular/example_component_ts.md    |    21 +
 static/usage/v7/accordion/toggle/demo.html    |    69 +
 static/usage/v7/accordion/toggle/index.md     |    25 +
 .../usage/v7/accordion/toggle/javascript.md   |    35 +
 static/usage/v7/accordion/toggle/react.md     |    51 +
 static/usage/v7/accordion/toggle/vue.md       |    58 +
 .../basic/angular/example_component_css.md    |    13 +
 .../basic/angular/example_component_html.md   |     6 +
 .../basic/angular/example_component_ts.md     |    50 +
 static/usage/v7/action-sheet/basic/demo.html  |    70 +
 static/usage/v7/action-sheet/basic/index.md   |    35 +
 .../usage/v7/action-sheet/basic/javascript.md |    58 +
 .../v7/action-sheet/basic/react/main_css.md   |    13 +
 .../v7/action-sheet/basic/react/main_tsx.md   |    52 +
 static/usage/v7/action-sheet/basic/vue.md     |    73 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    46 +
 .../css-properties/angular/global_css.md      |    12 +
 .../theming/css-properties/demo.html          |    67 +
 .../theming/css-properties/index.md           |    35 +
 .../theming/css-properties/javascript.md      |    49 +
 .../theming/css-properties/react/main_css.md  |    11 +
 .../theming/css-properties/react/main_tsx.md  |    47 +
 .../theming/css-properties/vue.md             |    60 +
 .../styling/angular/example_component_html.md |     3 +
 .../styling/angular/example_component_ts.md   |    46 +
 .../theming/styling/angular/global_css.md     |    29 +
 .../v7/action-sheet/theming/styling/demo.html |    84 +
 .../v7/action-sheet/theming/styling/index.md  |    35 +
 .../theming/styling/javascript.md             |    66 +
 .../theming/styling/react/main_css.md         |    28 +
 .../theming/styling/react/main_tsx.md         |    47 +
 .../v7/action-sheet/theming/styling/vue.md    |    76 +
 .../buttons/angular/example_component_html.md |     5 +
 .../buttons/angular/example_component_ts.md   |    42 +
 static/usage/v7/alert/buttons/demo.html       |    64 +
 static/usage/v7/alert/buttons/index.md        |    25 +
 static/usage/v7/alert/buttons/javascript.md   |    33 +
 static/usage/v7/alert/buttons/react.md        |    44 +
 static/usage/v7/alert/buttons/vue.md          |    53 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    31 +
 .../alert/customization/angular/global_css.md |    33 +
 static/usage/v7/alert/customization/demo.html |    79 +
 static/usage/v7/alert/customization/index.md  |    34 +
 .../v7/alert/customization/javascript.md      |    58 +
 .../v7/alert/customization/react/main_css.md  |    33 +
 .../v7/alert/customization/react/main_tsx.md  |    34 +
 static/usage/v7/alert/customization/vue.md    |    69 +
 .../radios/angular/example_component_html.md  |     3 +
 .../radios/angular/example_component_ts.md    |    38 +
 static/usage/v7/alert/inputs/radios/demo.html |    52 +
 static/usage/v7/alert/inputs/radios/index.md  |    25 +
 .../v7/alert/inputs/radios/javascript.md      |    31 +
 static/usage/v7/alert/inputs/radios/react.md  |    39 +
 static/usage/v7/alert/inputs/radios/vue.md    |    42 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    42 +
 .../v7/alert/inputs/text-inputs/demo.html     |    56 +
 .../v7/alert/inputs/text-inputs/index.md      |    25 +
 .../v7/alert/inputs/text-inputs/javascript.md |    35 +
 .../v7/alert/inputs/text-inputs/react.md      |    43 +
 .../usage/v7/alert/inputs/text-inputs/vue.md  |    46 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    23 +
 .../v7/alert/presenting/controller/demo.html  |    37 +
 .../v7/alert/presenting/controller/index.md   |    25 +
 .../alert/presenting/controller/javascript.md |    16 +
 .../v7/alert/presenting/controller/react.md   |    24 +
 .../v7/alert/presenting/controller/vue.md     |    27 +
 static/usage/v7/avatar/basic/angular.md       |     5 +
 static/usage/v7/avatar/basic/demo.html        |    27 +
 static/usage/v7/avatar/basic/index.md         |     8 +
 static/usage/v7/avatar/basic/javascript.md    |     5 +
 static/usage/v7/avatar/basic/react.md         |    15 +
 static/usage/v7/avatar/basic/vue.md           |    16 +
 static/usage/v7/avatar/chip/angular.md        |     8 +
 static/usage/v7/avatar/chip/demo.html         |    30 +
 static/usage/v7/avatar/chip/index.md          |     8 +
 static/usage/v7/avatar/chip/javascript.md     |     8 +
 static/usage/v7/avatar/chip/react.md          |    17 +
 static/usage/v7/avatar/chip/vue.md            |    19 +
 static/usage/v7/avatar/item/angular.md        |     8 +
 static/usage/v7/avatar/item/demo.html         |    30 +
 static/usage/v7/avatar/item/index.md          |     8 +
 static/usage/v7/avatar/item/javascript.md     |     8 +
 static/usage/v7/avatar/item/react.md          |    17 +
 static/usage/v7/avatar/item/vue.md            |    19 +
 .../angular/example_component_css.md          |     5 +
 .../angular/example_component_html.md         |     5 +
 .../avatar/theming/css-properties/demo.html   |    32 +
 .../v7/avatar/theming/css-properties/index.md |    33 +
 .../theming/css-properties/javascript.md      |    11 +
 .../theming/css-properties/react/main_css.md  |     5 +
 .../theming/css-properties/react/main_tsx.md  |    18 +
 .../v7/avatar/theming/css-properties/vue.md   |    22 +
 static/usage/v7/backdrop/basic/angular.md     |    17 +
 static/usage/v7/backdrop/basic/demo.html      |    35 +
 static/usage/v7/backdrop/basic/index.md       |    13 +
 static/usage/v7/backdrop/basic/javascript.md  |    17 +
 static/usage/v7/backdrop/basic/react.md       |    37 +
 static/usage/v7/backdrop/basic/vue.md         |    37 +
 .../styling/angular/example_component_css.md  |    21 +
 .../styling/angular/example_component_html.md |    21 +
 static/usage/v7/backdrop/styling/demo.html    |    57 +
 static/usage/v7/backdrop/styling/index.md     |    33 +
 .../usage/v7/backdrop/styling/javascript.md   |    43 +
 .../v7/backdrop/styling/react/main_css.md     |    21 +
 .../v7/backdrop/styling/react/main_tsx.md     |    35 +
 static/usage/v7/backdrop/styling/vue.md       |    53 +
 static/usage/v7/badge/basic/angular.md        |    12 +
 static/usage/v7/badge/basic/demo.html         |    39 +
 static/usage/v7/badge/basic/index.md          |     8 +
 static/usage/v7/badge/basic/javascript.md     |    12 +
 static/usage/v7/badge/basic/react.md          |    19 +
 static/usage/v7/badge/basic/vue.md            |    23 +
 .../usage/v7/badge/theming/colors/angular.md  |    28 +
 .../usage/v7/badge/theming/colors/demo.html   |    55 +
 static/usage/v7/badge/theming/colors/index.md |    13 +
 .../v7/badge/theming/colors/javascript.md     |    28 +
 static/usage/v7/badge/theming/colors/react.md |    35 +
 static/usage/v7/badge/theming/colors/vue.md   |    39 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |     8 +
 .../v7/badge/theming/css-properties/demo.html |    42 +
 .../v7/badge/theming/css-properties/index.md  |    32 +
 .../theming/css-properties/javascript.md      |    17 +
 .../theming/css-properties/react/main_css.md  |     8 +
 .../theming/css-properties/react/main_tsx.md  |    18 +
 .../v7/badge/theming/css-properties/vue.md    |    28 +
 static/usage/v7/breadcrumbs/basic/angular.md  |     8 +
 static/usage/v7/breadcrumbs/basic/demo.html   |    29 +
 static/usage/v7/breadcrumbs/basic/index.md    |     8 +
 .../usage/v7/breadcrumbs/basic/javascript.md  |     8 +
 static/usage/v7/breadcrumbs/basic/react.md    |    15 +
 static/usage/v7/breadcrumbs/basic/vue.md      |    19 +
 .../angular/example_component_html.md         |    10 +
 .../angular/example_component_ts.md           |    15 +
 .../expand-on-click/demo.html                 |    39 +
 .../collapsing-items/expand-on-click/index.md |    24 +
 .../expand-on-click/javascript.md             |    18 +
 .../collapsing-items/expand-on-click/react.md |    20 +
 .../collapsing-items/expand-on-click/vue.md   |    31 +
 .../items-before-after/angular.md             |    41 +
 .../items-before-after/demo.html              |    68 +
 .../items-before-after/index.md               |    13 +
 .../items-before-after/javascript.md          |    41 +
 .../items-before-after/react.md               |    50 +
 .../items-before-after/vue.md                 |    52 +
 .../collapsing-items/max-items/angular.md     |    10 +
 .../collapsing-items/max-items/demo.html      |    31 +
 .../collapsing-items/max-items/index.md       |    12 +
 .../collapsing-items/max-items/javascript.md  |    10 +
 .../collapsing-items/max-items/react.md       |    17 +
 .../collapsing-items/max-items/vue.md         |    21 +
 .../angular/example_component_html.md         |    25 +
 .../angular/example_component_ts.md           |    20 +
 .../popover-on-click/demo.html                |    62 +
 .../popover-on-click/index.md                 |    25 +
 .../popover-on-click/javascript.md            |    41 +
 .../popover-on-click/react.md                 |    44 +
 .../collapsing-items/popover-on-click/vue.md  |    48 +
 .../icons/custom-separators/angular.md        |    20 +
 .../icons/custom-separators/demo.html         |    41 +
 .../icons/custom-separators/index.md          |    12 +
 .../icons/custom-separators/javascript.md     |    20 +
 .../icons/custom-separators/react.md          |    29 +
 .../icons/custom-separators/vue.md            |    35 +
 .../icons/icons-on-items/angular.md           |    41 +
 .../icons/icons-on-items/demo.html            |    68 +
 .../breadcrumbs/icons/icons-on-items/index.md |    13 +
 .../icons/icons-on-items/javascript.md        |    41 +
 .../breadcrumbs/icons/icons-on-items/react.md |    52 +
 .../breadcrumbs/icons/icons-on-items/vue.md   |    56 +
 .../v7/breadcrumbs/theming/colors/angular.md  |     8 +
 .../v7/breadcrumbs/theming/colors/demo.html   |    29 +
 .../v7/breadcrumbs/theming/colors/index.md    |    12 +
 .../breadcrumbs/theming/colors/javascript.md  |     8 +
 .../v7/breadcrumbs/theming/colors/react.md    |    15 +
 .../v7/breadcrumbs/theming/colors/vue.md      |    19 +
 .../angular/example_component_css.md          |     7 +
 .../angular/example_component_html.md         |     8 +
 .../theming/css-properties/demo.html          |    37 +
 .../theming/css-properties/index.md           |    31 +
 .../theming/css-properties/javascript.md      |    16 +
 .../theming/css-properties/react/main_css.md  |     7 +
 .../theming/css-properties/react/main_tsx.md  |    18 +
 .../breadcrumbs/theming/css-properties/vue.md |    27 +
 static/usage/v7/button/basic/angular.md       |     4 +
 static/usage/v7/button/basic/demo.html        |    26 +
 static/usage/v7/button/basic/index.md         |     8 +
 static/usage/v7/button/basic/javascript.md    |     4 +
 static/usage/v7/button/basic/react.md         |    14 +
 static/usage/v7/button/basic/vue.md           |    15 +
 static/usage/v7/button/expand/angular.md      |     4 +
 static/usage/v7/button/expand/demo.html       |    32 +
 static/usage/v7/button/expand/index.md        |     8 +
 static/usage/v7/button/expand/javascript.md   |     4 +
 static/usage/v7/button/expand/react.md        |    14 +
 static/usage/v7/button/expand/vue.md          |    15 +
 static/usage/v7/button/fill/angular.md        |     6 +
 static/usage/v7/button/fill/demo.html         |    28 +
 static/usage/v7/button/fill/index.md          |     8 +
 static/usage/v7/button/fill/javascript.md     |     6 +
 static/usage/v7/button/fill/react.md          |    16 +
 static/usage/v7/button/fill/vue.md            |    17 +
 static/usage/v7/button/icons/angular.md       |    15 +
 static/usage/v7/button/icons/demo.html        |    37 +
 static/usage/v7/button/icons/index.md         |     8 +
 static/usage/v7/button/icons/javascript.md    |    15 +
 static/usage/v7/button/icons/react.md         |    26 +
 static/usage/v7/button/icons/vue.md           |    30 +
 static/usage/v7/button/shape/angular.md       |     4 +
 static/usage/v7/button/shape/demo.html        |    26 +
 static/usage/v7/button/shape/index.md         |     8 +
 static/usage/v7/button/shape/javascript.md    |     4 +
 static/usage/v7/button/shape/react.md         |    14 +
 static/usage/v7/button/shape/vue.md           |    15 +
 static/usage/v7/button/size/angular.md        |     5 +
 static/usage/v7/button/size/demo.html         |    27 +
 static/usage/v7/button/size/index.md          |     8 +
 static/usage/v7/button/size/javascript.md     |     5 +
 static/usage/v7/button/size/react.md          |    15 +
 static/usage/v7/button/size/vue.md            |    16 +
 .../usage/v7/button/theming/colors/angular.md |    12 +
 .../usage/v7/button/theming/colors/demo.html  |    41 +
 .../usage/v7/button/theming/colors/index.md   |     8 +
 .../v7/button/theming/colors/javascript.md    |    12 +
 .../usage/v7/button/theming/colors/react.md   |    22 +
 static/usage/v7/button/theming/colors/vue.md  |    23 +
 .../angular/example_component_css.md          |    22 +
 .../angular/example_component_html.md         |     3 +
 .../button/theming/css-properties/demo.html   |    47 +
 .../v7/button/theming/css-properties/index.md |    33 +
 .../theming/css-properties/javascript.md      |    26 +
 .../theming/css-properties/react/main_css.md  |    23 +
 .../theming/css-properties/react/main_tsx.md  |    13 +
 .../v7/button/theming/css-properties/vue.md   |    37 +
 static/usage/v7/buttons/basic/angular.md      |     8 +
 static/usage/v7/buttons/basic/demo.html       |    29 +
 static/usage/v7/buttons/basic/index.md        |     8 +
 static/usage/v7/buttons/basic/javascript.md   |     8 +
 static/usage/v7/buttons/basic/react.md        |    16 +
 static/usage/v7/buttons/basic/vue.md          |    19 +
 static/usage/v7/buttons/placement/angular.md  |    21 +
 static/usage/v7/buttons/placement/demo.html   |    49 +
 static/usage/v7/buttons/placement/index.md    |     8 +
 .../usage/v7/buttons/placement/javascript.md  |    21 +
 static/usage/v7/buttons/placement/react.md    |    31 +
 static/usage/v7/buttons/placement/vue.md      |    32 +
 static/usage/v7/buttons/types/angular.md      |    78 +
 static/usage/v7/buttons/types/demo.html       |   106 +
 static/usage/v7/buttons/types/index.md        |    13 +
 static/usage/v7/buttons/types/javascript.md   |    78 +
 static/usage/v7/buttons/types/react.md        |    90 +
 static/usage/v7/buttons/types/vue.md          |    93 +
 .../basic/angular/example_component_css.md    |     7 +
 .../basic/angular/example_component_html.md   |    12 +
 static/usage/v7/card/basic/demo.html          |    46 +
 static/usage/v7/card/basic/index.md           |    32 +
 static/usage/v7/card/basic/javascript.md      |    20 +
 static/usage/v7/card/basic/react/main_css.md  |     7 +
 static/usage/v7/card/basic/react/main_tsx.md  |    22 +
 static/usage/v7/card/basic/vue.md             |    31 +
 .../buttons/angular/example_component_css.md  |     7 +
 .../buttons/angular/example_component_html.md |    15 +
 static/usage/v7/card/buttons/demo.html        |    49 +
 static/usage/v7/card/buttons/index.md         |    33 +
 static/usage/v7/card/buttons/javascript.md    |    23 +
 .../usage/v7/card/buttons/react/main_css.md   |     7 +
 .../usage/v7/card/buttons/react/main_tsx.md   |    25 +
 static/usage/v7/card/buttons/vue.md           |    34 +
 .../list/angular/example_component_css.md     |    11 +
 .../list/angular/example_component_html.md    |    39 +
 static/usage/v7/card/list/demo.html           |    81 +
 static/usage/v7/card/list/index.md            |    33 +
 static/usage/v7/card/list/javascript.md       |    51 +
 static/usage/v7/card/list/react/main_css.md   |    11 +
 static/usage/v7/card/list/react/main_tsx.md   |    49 +
 static/usage/v7/card/list/vue.md              |    62 +
 .../media/angular/example_component_css.md    |     7 +
 .../media/angular/example_component_html.md   |    13 +
 static/usage/v7/card/media/demo.html          |    47 +
 static/usage/v7/card/media/index.md           |    33 +
 static/usage/v7/card/media/javascript.md      |    21 +
 static/usage/v7/card/media/react/main_css.md  |     7 +
 static/usage/v7/card/media/react/main_tsx.md  |    23 +
 static/usage/v7/card/media/vue.md             |    32 +
 .../colors/angular/example_component_css.md   |     7 +
 .../colors/angular/example_component_html.md  |   100 +
 static/usage/v7/card/theming/colors/demo.html |   137 +
 static/usage/v7/card/theming/colors/index.md  |    33 +
 .../v7/card/theming/colors/javascript.md      |   108 +
 .../v7/card/theming/colors/react/main_css.md  |     7 +
 .../v7/card/theming/colors/react/main_tsx.md  |   112 +
 static/usage/v7/card/theming/colors/vue.md    |   119 +
 .../angular/example_component_css.md          |    20 +
 .../angular/example_component_html.md         |    12 +
 .../v7/card/theming/css-properties/demo.html  |    59 +
 .../v7/card/theming/css-properties/index.md   |    32 +
 .../card/theming/css-properties/javascript.md |    33 +
 .../theming/css-properties/react/main_css.md  |    20 +
 .../theming/css-properties/react/main_tsx.md  |    22 +
 .../v7/card/theming/css-properties/vue.md     |    44 +
 static/usage/v7/checkbox/basic/angular.md     |     6 +
 static/usage/v7/checkbox/basic/demo.html      |    27 +
 static/usage/v7/checkbox/basic/index.md       |    17 +
 static/usage/v7/checkbox/basic/javascript.md  |     6 +
 static/usage/v7/checkbox/basic/react.md       |    18 +
 static/usage/v7/checkbox/basic/vue.md         |    25 +
 .../v7/checkbox/indeterminate/angular.md      |     6 +
 .../usage/v7/checkbox/indeterminate/demo.html |    27 +
 .../usage/v7/checkbox/indeterminate/index.md  |    17 +
 .../v7/checkbox/indeterminate/javascript.md   |     6 +
 .../usage/v7/checkbox/indeterminate/react.md  |    18 +
 static/usage/v7/checkbox/indeterminate/vue.md |    25 +
 .../angular/example_component_css.md          |    11 +
 .../angular/example_component_html.md         |     6 +
 .../checkbox/theming/css-properties/demo.html |    38 +
 .../checkbox/theming/css-properties/index.md  |    32 +
 .../theming/css-properties/javascript.md      |    18 +
 .../theming/css-properties/react/main_css.md  |    11 +
 .../theming/css-properties/react/main_tsx.md  |    20 +
 .../v7/checkbox/theming/css-properties/vue.md |    37 +
 static/usage/v7/chip/basic/angular.md         |     5 +
 static/usage/v7/chip/basic/demo.html          |    27 +
 static/usage/v7/chip/basic/index.md           |     8 +
 static/usage/v7/chip/basic/javascript.md      |     5 +
 static/usage/v7/chip/basic/react.md           |    14 +
 static/usage/v7/chip/basic/vue.md             |    16 +
 static/usage/v7/chip/slots/angular.md         |    15 +
 static/usage/v7/chip/slots/demo.html          |    37 +
 static/usage/v7/chip/slots/index.md           |     8 +
 static/usage/v7/chip/slots/javascript.md      |    15 +
 static/usage/v7/chip/slots/react.md           |    26 +
 static/usage/v7/chip/slots/vue.md             |    34 +
 .../usage/v7/chip/theming/colors/angular.md   |    12 +
 static/usage/v7/chip/theming/colors/demo.html |    45 +
 static/usage/v7/chip/theming/colors/index.md  |     8 +
 .../v7/chip/theming/colors/javascript.md      |    12 +
 static/usage/v7/chip/theming/colors/react.md  |    21 +
 static/usage/v7/chip/theming/colors/vue.md    |    23 +
 .../angular/example_component_css.md          |     6 +
 .../angular/example_component_html.md         |     3 +
 .../v7/chip/theming/css-properties/demo.html  |    32 +
 .../v7/chip/theming/css-properties/index.md   |    32 +
 .../chip/theming/css-properties/javascript.md |    10 +
 .../theming/css-properties/react/main_css.md  |     6 +
 .../theming/css-properties/react/main_tsx.md  |    11 +
 .../v7/chip/theming/css-properties/vue.md     |    21 +
 static/usage/v7/content/basic/angular.md      |    12 +
 static/usage/v7/content/basic/demo.html       |    29 +
 static/usage/v7/content/basic/index.md        |    14 +
 static/usage/v7/content/basic/javascript.md   |    12 +
 static/usage/v7/content/basic/react.md        |    20 +
 static/usage/v7/content/basic/vue.md          |    23 +
 static/usage/v7/content/fixed/angular.md      |    14 +
 .../fixed/angular/example_component_css.md    |     6 +
 .../fixed/angular/example_component_html.md   |    14 +
 static/usage/v7/content/fixed/demo.html       |    68 +
 static/usage/v7/content/fixed/index.md        |    34 +
 static/usage/v7/content/fixed/javascript.md   |    21 +
 static/usage/v7/content/fixed/react.md        |    22 +
 .../usage/v7/content/fixed/react/main_css.md  |     6 +
 .../usage/v7/content/fixed/react/main_tsx.md  |    24 +
 static/usage/v7/content/fixed/vue.md          |    32 +
 .../angular/example_component_css.md          |     5 +
 .../angular/example_component_html.md         |    25 +
 static/usage/v7/content/fullscreen/demo.html  |    78 +
 static/usage/v7/content/fullscreen/index.md   |    34 +
 .../usage/v7/content/fullscreen/javascript.md |    31 +
 .../v7/content/fullscreen/react/main_css.md   |     5 +
 .../v7/content/fullscreen/react/main_tsx.md   |    37 +
 static/usage/v7/content/fullscreen/vue.md     |    42 +
 .../usage/v7/content/header-footer/angular.md |    26 +
 .../usage/v7/content/header-footer/demo.html  |    43 +
 .../usage/v7/content/header-footer/index.md   |    14 +
 .../v7/content/header-footer/javascript.md    |    26 +
 .../usage/v7/content/header-footer/react.md   |    36 +
 static/usage/v7/content/header-footer/vue.md  |    37 +
 .../angular/example_component_html.md         |    18 +
 .../angular/example_component_ts.md           |    22 +
 .../usage/v7/content/scroll-events/demo.html  |    69 +
 .../usage/v7/content/scroll-events/index.md   |    26 +
 .../v7/content/scroll-events/javascript.md    |    22 +
 .../usage/v7/content/scroll-events/react.md   |    37 +
 static/usage/v7/content/scroll-events/vue.md  |    39 +
 .../angular/example_component_html.md         |    15 +
 .../angular/example_component_ts.md           |    24 +
 .../usage/v7/content/scroll-methods/demo.html |    78 +
 .../usage/v7/content/scroll-methods/index.md  |    26 +
 .../v7/content/scroll-methods/javascript.md   |    31 +
 .../usage/v7/content/scroll-methods/react.md  |    37 +
 static/usage/v7/content/scroll-methods/vue.md |    38 +
 .../v7/content/theming/colors/angular.md      |    38 +
 .../usage/v7/content/theming/colors/demo.html |    69 +
 .../usage/v7/content/theming/colors/index.md  |    14 +
 .../v7/content/theming/colors/javascript.md   |    38 +
 .../usage/v7/content/theming/colors/react.md  |    48 +
 static/usage/v7/content/theming/colors/vue.md |    49 +
 .../angular/example_component_css.md          |     6 +
 .../angular/example_component_html.md         |    12 +
 .../content/theming/css-properties/demo.html  |    36 +
 .../content/theming/css-properties/index.md   |    34 +
 .../theming/css-properties/javascript.md      |    19 +
 .../theming/css-properties/react/main_css.md  |     6 +
 .../theming/css-properties/react/main_tsx.md  |    22 +
 .../v7/content/theming/css-properties/vue.md  |    30 +
 .../angular/example_component_css.md          |     9 +
 .../angular/example_component_html.md         |    12 +
 .../theming/css-shadow-parts/demo.html        |    39 +
 .../content/theming/css-shadow-parts/index.md |    34 +
 .../theming/css-shadow-parts/javascript.md    |    22 +
 .../css-shadow-parts/react/main_css.md        |     9 +
 .../css-shadow-parts/react/main_tsx.md        |    22 +
 .../content/theming/css-shadow-parts/vue.md   |    33 +
 .../usage/v7/datetime-button/basic/angular.md |     9 +
 .../usage/v7/datetime-button/basic/demo.html  |    33 +
 .../usage/v7/datetime-button/basic/index.md   |    13 +
 .../v7/datetime-button/basic/javascript.md    |     7 +
 .../usage/v7/datetime-button/basic/react.md   |    16 +
 static/usage/v7/datetime-button/basic/vue.md  |    18 +
 static/usage/v7/datetime/basic/angular.md     |     3 +
 static/usage/v7/datetime/basic/demo.html      |    29 +
 static/usage/v7/datetime/basic/index.md       |    13 +
 static/usage/v7/datetime/basic/javascript.md  |     3 +
 static/usage/v7/datetime/basic/react.md       |     8 +
 static/usage/v7/datetime/basic/vue.md         |    14 +
 .../customizing-button-texts/angular.md       |     8 +
 .../customizing-button-texts/demo.html        |    30 +
 .../buttons/customizing-button-texts/index.md |    13 +
 .../customizing-button-texts/javascript.md    |     7 +
 .../buttons/customizing-button-texts/react.md |    15 +
 .../buttons/customizing-button-texts/vue.md   |    18 +
 .../buttons/customizing-buttons/angular.md    |     9 +
 .../buttons/customizing-buttons/demo.html     |    40 +
 .../buttons/customizing-buttons/index.md      |    13 +
 .../buttons/customizing-buttons/javascript.md |    13 +
 .../buttons/customizing-buttons/react.md      |    26 +
 .../buttons/customizing-buttons/vue.md        |    27 +
 .../showing-confirmation-buttons/angular.md   |     3 +
 .../showing-confirmation-buttons/demo.html    |    30 +
 .../showing-confirmation-buttons/index.md     |    13 +
 .../javascript.md                             |     3 +
 .../showing-confirmation-buttons/react.md     |    10 +
 .../showing-confirmation-buttons/vue.md       |    14 +
 .../angular/example_component_html.md         |     3 +
 .../advanced/angular/example_component_ts.md  |    20 +
 .../date-constraints/advanced/demo.html       |    43 +
 .../date-constraints/advanced/index.md        |    25 +
 .../date-constraints/advanced/javascript.md   |    17 +
 .../date-constraints/advanced/react.md        |    21 +
 .../datetime/date-constraints/advanced/vue.md |    28 +
 .../date-constraints/max-min/angular.md       |     7 +
 .../date-constraints/max-min/demo.html        |    29 +
 .../date-constraints/max-min/index.md         |    13 +
 .../date-constraints/max-min/javascript.md    |     7 +
 .../date-constraints/max-min/react.md         |    14 +
 .../datetime/date-constraints/max-min/vue.md  |    18 +
 .../date-constraints/values/angular.md        |     6 +
 .../date-constraints/values/demo.html         |    29 +
 .../datetime/date-constraints/values/index.md |    13 +
 .../date-constraints/values/javascript.md     |     6 +
 .../datetime/date-constraints/values/react.md |    13 +
 .../datetime/date-constraints/values/vue.md   |    17 +
 .../localization/custom-locale/angular.md     |     3 +
 .../localization/custom-locale/demo.html      |    29 +
 .../localization/custom-locale/index.md       |    13 +
 .../localization/custom-locale/javascript.md  |     3 +
 .../localization/custom-locale/react.md       |    10 +
 .../localization/custom-locale/vue.md         |    14 +
 .../localization/first-day-of-week/angular.md |     3 +
 .../localization/first-day-of-week/demo.html  |    29 +
 .../localization/first-day-of-week/index.md   |    13 +
 .../first-day-of-week/javascript.md           |     3 +
 .../localization/first-day-of-week/react.md   |    10 +
 .../localization/first-day-of-week/vue.md     |    14 +
 .../localization/hour-cycle/angular.md        |     3 +
 .../localization/hour-cycle/demo.html         |    29 +
 .../datetime/localization/hour-cycle/index.md |    13 +
 .../localization/hour-cycle/javascript.md     |     3 +
 .../datetime/localization/hour-cycle/react.md |    10 +
 .../datetime/localization/hour-cycle/vue.md   |    14 +
 .../locale-extension-tags/angular.md          |     3 +
 .../locale-extension-tags/demo.html           |    29 +
 .../locale-extension-tags/index.md            |    13 +
 .../locale-extension-tags/javascript.md       |     3 +
 .../locale-extension-tags/react.md            |    10 +
 .../localization/locale-extension-tags/vue.md |    14 +
 .../localization/time-label/angular.md        |     5 +
 .../localization/time-label/demo.html         |    31 +
 .../datetime/localization/time-label/index.md |    13 +
 .../localization/time-label/javascript.md     |     5 +
 .../datetime/localization/time-label/react.md |    12 +
 .../datetime/localization/time-label/vue.md   |    16 +
 static/usage/v7/datetime/multiple/angular.md  |     7 +
 static/usage/v7/datetime/multiple/demo.html   |    34 +
 static/usage/v7/datetime/multiple/index.md    |    13 +
 .../usage/v7/datetime/multiple/javascript.md  |     8 +
 static/usage/v7/datetime/multiple/react.md    |    20 +
 static/usage/v7/datetime/multiple/vue.md      |    18 +
 .../v7/datetime/presentation/date/angular.md  |     3 +
 .../v7/datetime/presentation/date/demo.html   |    29 +
 .../v7/datetime/presentation/date/index.md    |    13 +
 .../datetime/presentation/date/javascript.md  |     3 +
 .../v7/datetime/presentation/date/react.md    |    10 +
 .../v7/datetime/presentation/date/vue.md      |    14 +
 .../presentation/month-and-year/angular.md    |     3 +
 .../presentation/month-and-year/demo.html     |    29 +
 .../presentation/month-and-year/index.md      |    13 +
 .../presentation/month-and-year/javascript.md |     3 +
 .../presentation/month-and-year/react.md      |    10 +
 .../presentation/month-and-year/vue.md        |    14 +
 .../v7/datetime/presentation/time/angular.md  |     3 +
 .../v7/datetime/presentation/time/demo.html   |    29 +
 .../v7/datetime/presentation/time/index.md    |    12 +
 .../datetime/presentation/time/javascript.md  |     3 +
 .../v7/datetime/presentation/time/react.md    |    10 +
 .../v7/datetime/presentation/time/vue.md      |    14 +
 .../v7/datetime/presentation/wheel/angular.md |     3 +
 .../v7/datetime/presentation/wheel/demo.html  |    29 +
 .../v7/datetime/presentation/wheel/index.md   |    13 +
 .../datetime/presentation/wheel/javascript.md |     3 +
 .../v7/datetime/presentation/wheel/react.md   |    10 +
 .../v7/datetime/presentation/wheel/vue.md     |    14 +
 .../theming/angular/example_component_html.md |     3 +
 .../v7/datetime/theming/angular/global_css.md |    66 +
 static/usage/v7/datetime/theming/demo.html    |    78 +
 static/usage/v7/datetime/theming/index.md     |    33 +
 .../usage/v7/datetime/theming/javascript.md   |    54 +
 .../v7/datetime/theming/react/main_css.md     |    50 +
 .../v7/datetime/theming/react/main_tsx.md     |    11 +
 static/usage/v7/datetime/theming/vue.md       |    65 +
 .../title/customizing-title/angular.md        |     5 +
 .../title/customizing-title/demo.html         |    31 +
 .../datetime/title/customizing-title/index.md |    13 +
 .../title/customizing-title/javascript.md     |     5 +
 .../datetime/title/customizing-title/react.md |    12 +
 .../datetime/title/customizing-title/vue.md   |    16 +
 .../title/showing-default-title/angular.md    |     3 +
 .../title/showing-default-title/demo.html     |    29 +
 .../title/showing-default-title/index.md      |    13 +
 .../title/showing-default-title/javascript.md |     3 +
 .../title/showing-default-title/react.md      |    10 +
 .../title/showing-default-title/vue.md        |    14 +
 static/usage/v7/fab/basic/angular.md          |     7 +
 static/usage/v7/fab/basic/demo.html           |    29 +
 static/usage/v7/fab/basic/index.md            |     8 +
 static/usage/v7/fab/basic/javascript.md       |     7 +
 static/usage/v7/fab/basic/react.md            |    16 +
 static/usage/v7/fab/basic/vue.md              |    22 +
 static/usage/v7/fab/button-sizing/angular.md  |    18 +
 static/usage/v7/fab/button-sizing/demo.html   |    40 +
 static/usage/v7/fab/button-sizing/index.md    |     8 +
 .../usage/v7/fab/button-sizing/javascript.md  |    18 +
 static/usage/v7/fab/button-sizing/react.md    |    27 +
 static/usage/v7/fab/button-sizing/vue.md      |    33 +
 static/usage/v7/fab/list-side/angular.md      |    33 +
 static/usage/v7/fab/list-side/demo.html       |    55 +
 static/usage/v7/fab/list-side/index.md        |     8 +
 static/usage/v7/fab/list-side/javascript.md   |    33 +
 static/usage/v7/fab/list-side/react.md        |    42 +
 static/usage/v7/fab/list-side/vue.md          |    48 +
 static/usage/v7/fab/positioning/angular.md    |    59 +
 static/usage/v7/fab/positioning/demo.html     |    77 +
 static/usage/v7/fab/positioning/index.md      |    14 +
 static/usage/v7/fab/positioning/javascript.md |    59 +
 static/usage/v7/fab/positioning/react.md      |    70 +
 static/usage/v7/fab/positioning/vue.md        |    74 +
 static/usage/v7/fab/theming/colors/angular.md |    33 +
 static/usage/v7/fab/theming/colors/demo.html  |    55 +
 static/usage/v7/fab/theming/colors/index.md   |     8 +
 .../usage/v7/fab/theming/colors/javascript.md |    33 +
 static/usage/v7/fab/theming/colors/react.md   |    42 +
 static/usage/v7/fab/theming/colors/vue.md     |    48 +
 .../angular/example_component_css.md          |    10 +
 .../angular/example_component_html.md         |    18 +
 .../theming/css-custom-properties/demo.html   |    50 +
 .../theming/css-custom-properties/index.md    |    32 +
 .../css-custom-properties/javascript.md       |    29 +
 .../css-custom-properties/react/main_css.md   |    10 +
 .../css-custom-properties/react/main_tsx.md   |    29 +
 .../fab/theming/css-custom-properties/vue.md  |    44 +
 .../angular/example_component_css.md          |    16 +
 .../angular/example_component_html.md         |    18 +
 .../v7/fab/theming/css-shadow-parts/demo.html |    56 +
 .../v7/fab/theming/css-shadow-parts/index.md  |    32 +
 .../theming/css-shadow-parts/javascript.md    |    35 +
 .../css-shadow-parts/react/main_css.md        |    16 +
 .../css-shadow-parts/react/main_tsx.md        |    29 +
 .../v7/fab/theming/css-shadow-parts/vue.md    |    50 +
 static/usage/v7/footer/basic/angular.md       |    10 +
 static/usage/v7/footer/basic/demo.html        |    28 +
 static/usage/v7/footer/basic/index.md         |    14 +
 static/usage/v7/footer/basic/javascript.md    |    10 +
 static/usage/v7/footer/basic/react.md         |    20 +
 static/usage/v7/footer/basic/vue.md           |    21 +
 .../angular/example_component_css.md          |    11 +
 .../angular/example_component_html.md         |    32 +
 .../v7/footer/custom-scroll-target/demo.html  |    78 +
 .../v7/footer/custom-scroll-target/index.md   |    34 +
 .../footer/custom-scroll-target/javascript.md |    44 +
 .../custom-scroll-target/react/main_css.md    |    11 +
 .../custom-scroll-target/react/main_tsx.md    |    44 +
 .../v7/footer/custom-scroll-target/vue.md     |    55 +
 static/usage/v7/footer/fade/angular.md        |    30 +
 static/usage/v7/footer/fade/demo.html         |    65 +
 static/usage/v7/footer/fade/index.md          |    14 +
 static/usage/v7/footer/fade/javascript.md     |    30 +
 static/usage/v7/footer/fade/react.md          |    40 +
 static/usage/v7/footer/fade/vue.md            |    41 +
 static/usage/v7/footer/no-border/angular.md   |    10 +
 static/usage/v7/footer/no-border/demo.html    |    28 +
 static/usage/v7/footer/no-border/index.md     |    14 +
 .../usage/v7/footer/no-border/javascript.md   |    10 +
 static/usage/v7/footer/no-border/react.md     |    20 +
 static/usage/v7/footer/no-border/vue.md       |    21 +
 static/usage/v7/footer/translucent/angular.md |    30 +
 static/usage/v7/footer/translucent/demo.html  |    65 +
 static/usage/v7/footer/translucent/index.md   |    14 +
 .../usage/v7/footer/translucent/javascript.md |    30 +
 static/usage/v7/footer/translucent/react.md   |    40 +
 static/usage/v7/footer/translucent/vue.md     |    41 +
 .../basic/angular/example_component_css.md    |     8 +
 .../basic/angular/example_component_html.md   |    37 +
 static/usage/v7/grid/basic/demo.html          |    77 +
 static/usage/v7/grid/basic/index.md           |    33 +
 static/usage/v7/grid/basic/javascript.md      |    46 +
 static/usage/v7/grid/basic/react/main_css.md  |     8 +
 static/usage/v7/grid/basic/react/main_tsx.md  |    49 +
 static/usage/v7/grid/basic/vue.md             |    57 +
 .../angular/example_component_css.md          |    12 +
 .../angular/example_component_html.md         |    11 +
 .../grid/customizing/column-number/demo.html  |    53 +
 .../grid/customizing/column-number/index.md   |    33 +
 .../customizing/column-number/javascript.md   |    24 +
 .../column-number/react/main_css.md           |    12 +
 .../column-number/react/main_tsx.md           |    23 +
 .../v7/grid/customizing/column-number/vue.md  |    35 +
 .../padding/angular/example_component_css.md  |    26 +
 .../padding/angular/example_component_html.md |     9 +
 .../v7/grid/customizing/padding/demo.html     |    65 +
 .../v7/grid/customizing/padding/index.md      |    33 +
 .../v7/grid/customizing/padding/javascript.md |    36 +
 .../customizing/padding/react/main_css.md     |    26 +
 .../customizing/padding/react/main_tsx.md     |    21 +
 .../usage/v7/grid/customizing/padding/vue.md  |    47 +
 .../width/angular/example_component_css.md    |    18 +
 .../width/angular/example_component_html.md   |     9 +
 .../usage/v7/grid/customizing/width/demo.html |    56 +
 .../usage/v7/grid/customizing/width/index.md  |    33 +
 .../v7/grid/customizing/width/javascript.md   |    28 +
 .../grid/customizing/width/react/main_css.md  |    18 +
 .../grid/customizing/width/react/main_tsx.md  |    19 +
 static/usage/v7/grid/customizing/width/vue.md |    39 +
 .../fixed/angular/example_component_css.md    |     8 +
 .../fixed/angular/example_component_html.md   |     9 +
 static/usage/v7/grid/fixed/demo.html          |    48 +
 static/usage/v7/grid/fixed/index.md           |    33 +
 static/usage/v7/grid/fixed/javascript.md      |    18 +
 static/usage/v7/grid/fixed/react/main_css.md  |     8 +
 static/usage/v7/grid/fixed/react/main_tsx.md  |    19 +
 static/usage/v7/grid/fixed/vue.md             |    29 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    61 +
 .../v7/grid/horizontal-alignment/demo.html    |   100 +
 .../v7/grid/horizontal-alignment/index.md     |    33 +
 .../grid/horizontal-alignment/javascript.md   |    70 +
 .../horizontal-alignment/react/main_css.md    |     8 +
 .../horizontal-alignment/react/main_tsx.md    |    73 +
 .../usage/v7/grid/horizontal-alignment/vue.md |    81 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    30 +
 .../usage/v7/grid/offset-responsive/demo.html |    70 +
 .../usage/v7/grid/offset-responsive/index.md  |    33 +
 .../v7/grid/offset-responsive/javascript.md   |    39 +
 .../grid/offset-responsive/react/main_css.md  |     8 +
 .../grid/offset-responsive/react/main_tsx.md  |    42 +
 static/usage/v7/grid/offset-responsive/vue.md |    50 +
 .../offset/angular/example_component_css.md   |     8 +
 .../offset/angular/example_component_html.md  |    29 +
 static/usage/v7/grid/offset/demo.html         |    69 +
 static/usage/v7/grid/offset/index.md          |    33 +
 static/usage/v7/grid/offset/javascript.md     |    38 +
 static/usage/v7/grid/offset/react/main_css.md |     8 +
 static/usage/v7/grid/offset/react/main_tsx.md |    41 +
 static/usage/v7/grid/offset/vue.md            |    49 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    31 +
 .../v7/grid/push-pull-responsive/demo.html    |    71 +
 .../v7/grid/push-pull-responsive/index.md     |    33 +
 .../grid/push-pull-responsive/javascript.md   |    40 +
 .../push-pull-responsive/react/main_css.md    |     8 +
 .../push-pull-responsive/react/main_tsx.md    |    43 +
 .../usage/v7/grid/push-pull-responsive/vue.md |    51 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    30 +
 static/usage/v7/grid/push-pull/demo.html      |    73 +
 static/usage/v7/grid/push-pull/index.md       |    33 +
 static/usage/v7/grid/push-pull/javascript.md  |    39 +
 .../usage/v7/grid/push-pull/react/main_css.md |     8 +
 .../usage/v7/grid/push-pull/react/main_tsx.md |    42 +
 static/usage/v7/grid/push-pull/vue.md         |    50 +
 .../angular/example_component_css.md          |    12 +
 .../angular/example_component_html.md         |    34 +
 static/usage/v7/grid/size-auto/demo.html      |    78 +
 static/usage/v7/grid/size-auto/index.md       |    33 +
 static/usage/v7/grid/size-auto/javascript.md  |    47 +
 .../usage/v7/grid/size-auto/react/main_css.md |    12 +
 .../usage/v7/grid/size-auto/react/main_tsx.md |    46 +
 static/usage/v7/grid/size-auto/vue.md         |    58 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    32 +
 .../usage/v7/grid/size-responsive/demo.html   |    72 +
 static/usage/v7/grid/size-responsive/index.md |    33 +
 .../v7/grid/size-responsive/javascript.md     |    41 +
 .../v7/grid/size-responsive/react/main_css.md |     8 +
 .../v7/grid/size-responsive/react/main_tsx.md |    44 +
 static/usage/v7/grid/size-responsive/vue.md   |    52 +
 .../size/angular/example_component_css.md     |     8 +
 .../size/angular/example_component_html.md    |    30 +
 static/usage/v7/grid/size/demo.html           |    70 +
 static/usage/v7/grid/size/index.md            |    33 +
 static/usage/v7/grid/size/javascript.md       |    39 +
 static/usage/v7/grid/size/react/main_css.md   |     8 +
 static/usage/v7/grid/size/react/main_tsx.md   |    42 +
 static/usage/v7/grid/size/vue.md              |    50 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    64 +
 .../v7/grid/vertical-alignment/demo.html      |   103 +
 .../usage/v7/grid/vertical-alignment/index.md |    33 +
 .../v7/grid/vertical-alignment/javascript.md  |    73 +
 .../grid/vertical-alignment/react/main_css.md |     8 +
 .../grid/vertical-alignment/react/main_tsx.md |    76 +
 .../usage/v7/grid/vertical-alignment/vue.md   |    84 +
 static/usage/v7/header/basic/angular.md       |    10 +
 static/usage/v7/header/basic/demo.html        |    28 +
 static/usage/v7/header/basic/index.md         |    14 +
 static/usage/v7/header/basic/javascript.md    |    10 +
 static/usage/v7/header/basic/react.md         |    20 +
 static/usage/v7/header/basic/vue.md           |    21 +
 static/usage/v7/header/condense/angular.md    |    38 +
 static/usage/v7/header/condense/demo.html     |    73 +
 static/usage/v7/header/condense/index.md      |    14 +
 static/usage/v7/header/condense/javascript.md |    38 +
 static/usage/v7/header/condense/react.md      |    48 +
 static/usage/v7/header/condense/vue.md        |    49 +
 .../angular/example_component_css.md          |    10 +
 .../angular/example_component_html.md         |    32 +
 .../v7/header/custom-scroll-target/demo.html  |    78 +
 .../v7/header/custom-scroll-target/index.md   |    34 +
 .../header/custom-scroll-target/javascript.md |    43 +
 .../custom-scroll-target/react/main_css.md    |    10 +
 .../custom-scroll-target/react/main_tsx.md    |    44 +
 .../v7/header/custom-scroll-target/vue.md     |    55 +
 static/usage/v7/header/fade/angular.md        |    30 +
 static/usage/v7/header/fade/demo.html         |    65 +
 static/usage/v7/header/fade/index.md          |    14 +
 static/usage/v7/header/fade/javascript.md     |    30 +
 static/usage/v7/header/fade/react.md          |    40 +
 static/usage/v7/header/fade/vue.md            |    41 +
 static/usage/v7/header/no-border/angular.md   |    10 +
 static/usage/v7/header/no-border/demo.html    |    28 +
 static/usage/v7/header/no-border/index.md     |    14 +
 .../usage/v7/header/no-border/javascript.md   |    10 +
 static/usage/v7/header/no-border/react.md     |    20 +
 static/usage/v7/header/no-border/vue.md       |    21 +
 static/usage/v7/header/translucent/angular.md |    30 +
 static/usage/v7/header/translucent/demo.html  |    65 +
 static/usage/v7/header/translucent/index.md   |    14 +
 .../usage/v7/header/translucent/javascript.md |    30 +
 static/usage/v7/header/translucent/react.md   |    40 +
 static/usage/v7/header/translucent/vue.md     |    41 +
 static/usage/v7/img/basic/angular.md          |     3 +
 static/usage/v7/img/basic/demo.html           |    31 +
 static/usage/v7/img/basic/index.md            |     8 +
 static/usage/v7/img/basic/javascript.md       |     3 +
 static/usage/v7/img/basic/react.md            |    11 +
 static/usage/v7/img/basic/vue.md              |    14 +
 .../basic/angular/example_component_html.md   |    15 +
 .../basic/angular/example_component_ts.md     |    32 +
 .../usage/v7/infinite-scroll/basic/demo.html  |    63 +
 .../usage/v7/infinite-scroll/basic/index.md   |    24 +
 .../v7/infinite-scroll/basic/javascript.md    |    46 +
 .../usage/v7/infinite-scroll/basic/react.md   |    53 +
 static/usage/v7/infinite-scroll/basic/vue.md  |    65 +
 .../angular/example_component_css.md          |    12 +
 .../angular/example_component_html.md         |    68 +
 .../angular/example_component_ts.md           |    20 +
 .../custom-infinite-scroll-content/demo.html  |    82 +
 .../custom-infinite-scroll-content/index.md   |    34 +
 .../javascript.md                             |   104 +
 .../react/main_css.md                         |    12 +
 .../react/main_tsx.md                         |    89 +
 .../custom-infinite-scroll-content/vue.md     |   121 +
 .../angular/example_component_html.md         |    15 +
 .../angular/example_component_ts.md           |    20 +
 .../infinite-scroll-content/demo.html         |    56 +
 .../infinite-scroll-content/index.md          |    24 +
 .../infinite-scroll-content/javascript.md     |    38 +
 .../infinite-scroll-content/react.md          |    44 +
 .../infinite-scroll-content/vue.md            |    58 +
 static/usage/v7/input/basic/angular.md        |    28 +
 static/usage/v7/input/basic/demo.html         |    55 +
 static/usage/v7/input/basic/index.md          |     8 +
 static/usage/v7/input/basic/javascript.md     |    28 +
 static/usage/v7/input/basic/react.md          |    36 +
 static/usage/v7/input/basic/vue.md            |    39 +
 static/usage/v7/input/clear/angular.md        |    18 +
 static/usage/v7/input/clear/demo.html         |    48 +
 static/usage/v7/input/clear/index.md          |     8 +
 static/usage/v7/input/clear/javascript.md     |    18 +
 static/usage/v7/input/clear/react.md          |    26 +
 static/usage/v7/input/clear/vue.md            |    29 +
 static/usage/v7/input/fill/angular.md         |    16 +
 static/usage/v7/input/fill/demo.html          |    44 +
 static/usage/v7/input/fill/index.md           |     8 +
 static/usage/v7/input/fill/javascript.md      |    16 +
 static/usage/v7/input/fill/react.md           |    26 +
 static/usage/v7/input/fill/vue.md             |    27 +
 static/usage/v7/input/labels/angular.md       |    23 +
 static/usage/v7/input/labels/demo.html        |    50 +
 static/usage/v7/input/labels/index.md         |     8 +
 static/usage/v7/input/labels/javascript.md    |    23 +
 static/usage/v7/input/labels/react.md         |    31 +
 static/usage/v7/input/labels/vue.md           |    34 +
 .../usage/v7/input/theming/colors/angular.md  |    11 +
 .../usage/v7/input/theming/colors/demo.html   |    44 +
 static/usage/v7/input/theming/colors/index.md |    13 +
 .../v7/input/theming/colors/javascript.md     |    11 +
 static/usage/v7/input/theming/colors/react.md |    21 +
 static/usage/v7/input/theming/colors/vue.md   |    22 +
 .../angular/example_component_css.md          |    13 +
 .../angular/example_component_html.md         |     3 +
 .../v7/input/theming/css-properties/demo.html |    43 +
 .../v7/input/theming/css-properties/index.md  |    33 +
 .../theming/css-properties/javascript.md      |    17 +
 .../theming/css-properties/react/main_css.md  |    13 +
 .../theming/css-properties/react/main_tsx.md  |    13 +
 .../v7/input/theming/css-properties/vue.md    |    28 +
 static/usage/v7/input/types/angular.md        |    28 +
 static/usage/v7/input/types/demo.html         |    55 +
 static/usage/v7/input/types/index.md          |     8 +
 static/usage/v7/input/types/javascript.md     |    28 +
 static/usage/v7/input/types/react.md          |    36 +
 static/usage/v7/input/types/vue.md            |    39 +
 static/usage/v7/item-divider/basic/angular.md |    39 +
 static/usage/v7/item-divider/basic/demo.html  |    66 +
 static/usage/v7/item-divider/basic/index.md   |    13 +
 .../usage/v7/item-divider/basic/javascript.md |    39 +
 static/usage/v7/item-divider/basic/react.md   |    47 +
 static/usage/v7/item-divider/basic/vue.md     |    50 +
 .../v7/item-divider/theming/colors/angular.md |    32 +
 .../v7/item-divider/theming/colors/demo.html  |    59 +
 .../v7/item-divider/theming/colors/index.md   |    13 +
 .../item-divider/theming/colors/javascript.md |    32 +
 .../v7/item-divider/theming/colors/react.md   |    42 +
 .../v7/item-divider/theming/colors/vue.md     |    43 +
 .../angular/example_component_css.md          |    11 +
 .../angular/example_component_html.md         |     7 +
 .../theming/css-properties/demo.html          |    40 +
 .../theming/css-properties/index.md           |    33 +
 .../theming/css-properties/javascript.md      |    19 +
 .../theming/css-properties/react/main_css.md  |    11 +
 .../theming/css-properties/react/main_tsx.md  |    18 +
 .../theming/css-properties/vue.md             |    30 +
 static/usage/v7/item-group/basic/angular.md   |    33 +
 static/usage/v7/item-group/basic/demo.html    |    60 +
 static/usage/v7/item-group/basic/index.md     |    13 +
 .../usage/v7/item-group/basic/javascript.md   |    33 +
 static/usage/v7/item-group/basic/react.md     |    43 +
 static/usage/v7/item-group/basic/vue.md       |    44 +
 .../v7/item-group/sliding-items/angular.md    |    95 +
 .../v7/item-group/sliding-items/demo.html     |   122 +
 .../v7/item-group/sliding-items/index.md      |    13 +
 .../v7/item-group/sliding-items/javascript.md |    95 +
 .../v7/item-group/sliding-items/react.md      |   105 +
 .../usage/v7/item-group/sliding-items/vue.md  |   106 +
 static/usage/v7/item-sliding/basic/angular.md |    39 +
 static/usage/v7/item-sliding/basic/demo.html  |    66 +
 static/usage/v7/item-sliding/basic/index.md   |     8 +
 .../usage/v7/item-sliding/basic/javascript.md |    39 +
 static/usage/v7/item-sliding/basic/react.md   |    47 +
 static/usage/v7/item-sliding/basic/vue.md     |    50 +
 .../v7/item-sliding/expandable/angular.md     |    18 +
 .../v7/item-sliding/expandable/demo.html      |    45 +
 .../usage/v7/item-sliding/expandable/index.md |    13 +
 .../v7/item-sliding/expandable/javascript.md  |    18 +
 .../usage/v7/item-sliding/expandable/react.md |    26 +
 .../usage/v7/item-sliding/expandable/vue.md   |    29 +
 static/usage/v7/item-sliding/icons/angular.md |   128 +
 static/usage/v7/item-sliding/icons/demo.html  |   156 +
 static/usage/v7/item-sliding/icons/index.md   |    13 +
 .../usage/v7/item-sliding/icons/javascript.md |   128 +
 static/usage/v7/item-sliding/icons/react.md   |   137 +
 static/usage/v7/item-sliding/icons/vue.md     |   143 +
 static/usage/v7/item/basic/angular.md         |    42 +
 static/usage/v7/item/basic/demo.html          |    69 +
 static/usage/v7/item/basic/index.md           |     8 +
 static/usage/v7/item/basic/javascript.md      |    42 +
 static/usage/v7/item/basic/react.md           |    52 +
 static/usage/v7/item/basic/vue.md             |    53 +
 static/usage/v7/item/buttons/angular.md       |    46 +
 static/usage/v7/item/buttons/demo.html        |    74 +
 static/usage/v7/item/buttons/index.md         |     8 +
 static/usage/v7/item/buttons/javascript.md    |    46 +
 static/usage/v7/item/buttons/react.md         |    57 +
 static/usage/v7/item/buttons/vue.md           |    61 +
 static/usage/v7/item/clickable/angular.md     |    17 +
 static/usage/v7/item/clickable/demo.html      |    44 +
 static/usage/v7/item/clickable/index.md       |     8 +
 static/usage/v7/item/clickable/javascript.md  |    17 +
 static/usage/v7/item/clickable/react.md       |    27 +
 static/usage/v7/item/clickable/vue.md         |    28 +
 .../counter/angular/example_component_html.md |    11 +
 .../counter/angular/example_component_ts.md   |    13 +
 static/usage/v7/item/counter/demo.html        |    47 +
 static/usage/v7/item/counter/index.md         |    24 +
 static/usage/v7/item/counter/javascript.md    |    16 +
 static/usage/v7/item/counter/react.md         |    21 +
 static/usage/v7/item/counter/vue.md           |    27 +
 static/usage/v7/item/detail-arrows/angular.md |    37 +
 static/usage/v7/item/detail-arrows/demo.html  |    64 +
 static/usage/v7/item/detail-arrows/index.md   |    13 +
 .../usage/v7/item/detail-arrows/javascript.md |    37 +
 static/usage/v7/item/detail-arrows/react.md   |    48 +
 static/usage/v7/item/detail-arrows/vue.md     |    53 +
 static/usage/v7/item/helper-error/angular.md  |     8 +
 static/usage/v7/item/helper-error/demo.html   |    56 +
 static/usage/v7/item/helper-error/index.md    |    18 +
 .../usage/v7/item/helper-error/javascript.md  |    35 +
 static/usage/v7/item/helper-error/react.md    |    39 +
 static/usage/v7/item/helper-error/vue.md      |    41 +
 static/usage/v7/item/icons/angular.md         |    29 +
 static/usage/v7/item/icons/demo.html          |    56 +
 static/usage/v7/item/icons/index.md           |     8 +
 static/usage/v7/item/icons/javascript.md      |    29 +
 static/usage/v7/item/icons/react.md           |    40 +
 static/usage/v7/item/icons/vue.md             |    44 +
 static/usage/v7/item/inputs/angular.md        |    59 +
 static/usage/v7/item/inputs/demo.html         |    86 +
 static/usage/v7/item/inputs/index.md          |     8 +
 static/usage/v7/item/inputs/javascript.md     |    59 +
 static/usage/v7/item/inputs/react.md          |    69 +
 static/usage/v7/item/inputs/vue.md            |    70 +
 static/usage/v7/item/lines/angular.md         |    43 +
 static/usage/v7/item/lines/demo.html          |    70 +
 static/usage/v7/item/lines/index.md           |     8 +
 static/usage/v7/item/lines/javascript.md      |    43 +
 static/usage/v7/item/lines/react.md           |    54 +
 static/usage/v7/item/lines/vue.md             |    58 +
 static/usage/v7/item/media/angular.md         |    19 +
 static/usage/v7/item/media/demo.html          |    46 +
 static/usage/v7/item/media/index.md           |     8 +
 static/usage/v7/item/media/javascript.md      |    19 +
 static/usage/v7/item/media/react.md           |    29 +
 static/usage/v7/item/media/vue.md             |    30 +
 .../usage/v7/item/theming/colors/angular.md   |    32 +
 static/usage/v7/item/theming/colors/demo.html |    59 +
 static/usage/v7/item/theming/colors/index.md  |    13 +
 .../v7/item/theming/colors/javascript.md      |    32 +
 static/usage/v7/item/theming/colors/react.md  |    42 +
 static/usage/v7/item/theming/colors/vue.md    |    43 +
 .../angular/example_component_css.md          |    18 +
 .../angular/example_component_html.md         |    13 +
 .../v7/item/theming/css-properties/demo.html  |    57 +
 .../v7/item/theming/css-properties/index.md   |    32 +
 .../item/theming/css-properties/javascript.md |    32 +
 .../theming/css-properties/react/main_css.md  |    18 +
 .../theming/css-properties/react/main_tsx.md  |    25 +
 .../v7/item/theming/css-properties/vue.md     |    43 +
 .../angular/example_component_css.md          |    18 +
 .../angular/example_component_html.md         |    13 +
 .../item/theming/css-shadow-parts/demo.html   |    57 +
 .../v7/item/theming/css-shadow-parts/index.md |    32 +
 .../theming/css-shadow-parts/javascript.md    |    32 +
 .../css-shadow-parts/react/main_css.md        |    18 +
 .../css-shadow-parts/react/main_tsx.md        |    25 +
 .../v7/item/theming/css-shadow-parts/vue.md   |    43 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    16 +
 .../v7/item/theming/input-highlight/demo.html |    50 +
 .../v7/item/theming/input-highlight/index.md  |    33 +
 .../theming/input-highlight/javascript.md     |    25 +
 .../theming/input-highlight/react/main_css.md |     8 +
 .../theming/input-highlight/react/main_tsx.md |    28 +
 .../v7/item/theming/input-highlight/vue.md    |    36 +
 static/usage/v7/label/basic/angular.md        |     3 +
 static/usage/v7/label/basic/demo.html         |    24 +
 static/usage/v7/label/basic/index.md          |     8 +
 static/usage/v7/label/basic/javascript.md     |     3 +
 static/usage/v7/label/basic/react.md          |    13 +
 static/usage/v7/label/basic/vue.md            |    14 +
 static/usage/v7/label/input/angular.md        |    31 +
 static/usage/v7/label/input/demo.html         |    59 +
 static/usage/v7/label/input/index.md          |     8 +
 static/usage/v7/label/input/javascript.md     |    31 +
 static/usage/v7/label/input/react.md          |    41 +
 static/usage/v7/label/input/vue.md            |    42 +
 static/usage/v7/label/item/angular.md         |    28 +
 static/usage/v7/label/item/demo.html          |    56 +
 static/usage/v7/label/item/index.md           |     8 +
 static/usage/v7/label/item/javascript.md      |    28 +
 static/usage/v7/label/item/react.md           |    38 +
 static/usage/v7/label/item/vue.md             |    39 +
 .../usage/v7/label/theming/colors/angular.md  |    12 +
 .../usage/v7/label/theming/colors/demo.html   |    39 +
 static/usage/v7/label/theming/colors/index.md |     8 +
 .../v7/label/theming/colors/javascript.md     |    12 +
 static/usage/v7/label/theming/colors/react.md |    22 +
 static/usage/v7/label/theming/colors/vue.md   |    23 +
 static/usage/v7/list-header/basic/angular.md  |    22 +
 static/usage/v7/list-header/basic/demo.html   |    49 +
 static/usage/v7/list-header/basic/index.md    |    13 +
 .../usage/v7/list-header/basic/javascript.md  |    22 +
 static/usage/v7/list-header/basic/react.md    |    30 +
 static/usage/v7/list-header/basic/vue.md      |    33 +
 .../usage/v7/list-header/buttons/angular.md   |    23 +
 static/usage/v7/list-header/buttons/demo.html |    50 +
 static/usage/v7/list-header/buttons/index.md  |    13 +
 .../v7/list-header/buttons/javascript.md      |    23 +
 static/usage/v7/list-header/buttons/react.md  |    31 +
 static/usage/v7/list-header/buttons/vue.md    |    34 +
 static/usage/v7/list-header/lines/angular.md  |    37 +
 static/usage/v7/list-header/lines/demo.html   |    64 +
 static/usage/v7/list-header/lines/index.md    |    13 +
 .../usage/v7/list-header/lines/javascript.md  |    37 +
 static/usage/v7/list-header/lines/react.md    |    47 +
 static/usage/v7/list-header/lines/vue.md      |    48 +
 .../v7/list-header/theming/colors/angular.md  |    32 +
 .../v7/list-header/theming/colors/demo.html   |    59 +
 .../v7/list-header/theming/colors/index.md    |    13 +
 .../list-header/theming/colors/javascript.md  |    32 +
 .../v7/list-header/theming/colors/react.md    |    42 +
 .../v7/list-header/theming/colors/vue.md      |    43 +
 .../angular/example_component_css.md          |    10 +
 .../angular/example_component_html.md         |     5 +
 .../theming/css-properties/demo.html          |    37 +
 .../theming/css-properties/index.md           |    33 +
 .../theming/css-properties/javascript.md      |    16 +
 .../theming/css-properties/react/main_css.md  |    10 +
 .../theming/css-properties/react/main_tsx.md  |    15 +
 .../list-header/theming/css-properties/vue.md |    27 +
 static/usage/v7/list/basic/angular.md         |    19 +
 static/usage/v7/list/basic/demo.html          |    46 +
 static/usage/v7/list/basic/index.md           |     8 +
 static/usage/v7/list/basic/javascript.md      |    19 +
 static/usage/v7/list/basic/react.md           |    27 +
 static/usage/v7/list/basic/vue.md             |    30 +
 static/usage/v7/list/inset/angular.md         |    19 +
 static/usage/v7/list/inset/demo.html          |    51 +
 static/usage/v7/list/inset/index.md           |     8 +
 static/usage/v7/list/inset/javascript.md      |    19 +
 static/usage/v7/list/inset/react.md           |    27 +
 static/usage/v7/list/inset/vue.md             |    30 +
 static/usage/v7/list/lines/angular.md         |    37 +
 static/usage/v7/list/lines/demo.html          |    66 +
 static/usage/v7/list/lines/index.md           |     8 +
 static/usage/v7/list/lines/javascript.md      |    37 +
 static/usage/v7/list/lines/react.md           |    47 +
 static/usage/v7/list/lines/vue.md             |    48 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    22 +
 static/usage/v7/loading/controller/demo.html  |    39 +
 static/usage/v7/loading/controller/index.md   |    24 +
 .../usage/v7/loading/controller/javascript.md |    14 +
 static/usage/v7/loading/controller/react.md   |    25 +
 static/usage/v7/loading/controller/vue.md     |    26 +
 .../angular/example_component_html.md         |     3 +
 .../spinners/angular/example_component_ts.md  |    23 +
 static/usage/v7/loading/spinners/demo.html    |    40 +
 static/usage/v7/loading/spinners/index.md     |    24 +
 .../usage/v7/loading/spinners/javascript.md   |    15 +
 static/usage/v7/loading/spinners/react.md     |    26 +
 static/usage/v7/loading/spinners/vue.md       |    27 +
 .../theming/angular/example_component_html.md |     3 +
 .../theming/angular/example_component_ts.md   |    23 +
 .../v7/loading/theming/angular/global_css.md  |     8 +
 static/usage/v7/loading/theming/demo.html     |    48 +
 static/usage/v7/loading/theming/index.md      |    34 +
 static/usage/v7/loading/theming/javascript.md |    24 +
 static/usage/v7/loading/theming/react.md      |    26 +
 .../v7/loading/theming/react/main_css.md      |     8 +
 .../v7/loading/theming/react/main_tsx.md      |    29 +
 static/usage/v7/loading/theming/vue.md        |    35 +
 static/usage/v7/menu/basic/angular.md         |    23 +
 static/usage/v7/menu/basic/demo.html          |    40 +
 static/usage/v7/menu/basic/index.md           |    18 +
 static/usage/v7/menu/basic/javascript.md      |    23 +
 static/usage/v7/menu/basic/react.md           |    41 +
 static/usage/v7/menu/basic/vue.md             |    52 +
 .../theming/angular/example_component_css.md  |    11 +
 .../theming/angular/example_component_html.md |    25 +
 static/usage/v7/menu/theming/demo.html        |    51 +
 static/usage/v7/menu/theming/index.md         |    33 +
 static/usage/v7/menu/theming/javascript.md    |    37 +
 .../usage/v7/menu/theming/react/main_css.md   |    11 +
 .../usage/v7/menu/theming/react/main_tsx.md   |    44 +
 static/usage/v7/menu/theming/vue.md           |    64 +
 static/usage/v7/menu/toggle/angular.md        |    26 +
 static/usage/v7/menu/toggle/demo.html         |    43 +
 static/usage/v7/menu/toggle/index.md          |    18 +
 static/usage/v7/menu/toggle/javascript.md     |    26 +
 static/usage/v7/menu/toggle/react.md          |    44 +
 static/usage/v7/menu/toggle/vue.md            |    55 +
 .../type/angular/example_component_html.md    |    48 +
 .../menu/type/angular/example_component_ts.md |    11 +
 static/usage/v7/menu/type/demo.html           |    74 +
 static/usage/v7/menu/type/index.md            |    25 +
 static/usage/v7/menu/type/javascript.md       |    57 +
 static/usage/v7/menu/type/react.md            |    78 +
 static/usage/v7/menu/type/vue.md              |    90 +
 .../boolean/angular/example_component_html.md |    31 +
 .../boolean/angular/example_component_ts.md   |    23 +
 .../v7/modal/can-dismiss/boolean/demo.html    |    67 +
 .../v7/modal/can-dismiss/boolean/index.md     |    26 +
 .../modal/can-dismiss/boolean/javascript.md   |    48 +
 .../v7/modal/can-dismiss/boolean/react.md     |    74 +
 .../usage/v7/modal/can-dismiss/boolean/vue.md |    83 +
 .../angular/example_component_html.md         |    27 +
 .../function/angular/example_component_ts.md  |    41 +
 .../v7/modal/can-dismiss/function/demo.html   |    74 +
 .../v7/modal/can-dismiss/function/index.md    |    26 +
 .../modal/can-dismiss/function/javascript.md  |    59 +
 .../v7/modal/can-dismiss/function/react.md    |    85 +
 .../v7/modal/can-dismiss/function/vue.md      |    78 +
 .../basic/angular/example_component_html.md   |    65 +
 .../basic/angular/example_component_ts.md     |    16 +
 static/usage/v7/modal/card/basic/demo.html    |    90 +
 static/usage/v7/modal/card/basic/index.md     |    25 +
 .../usage/v7/modal/card/basic/javascript.md   |    73 +
 static/usage/v7/modal/card/basic/react.md     |   100 +
 static/usage/v7/modal/card/basic/vue.md       |   115 +
 .../modal/controller/angular/app_module_ts.md |    19 +
 .../angular/example_component_html.md         |    11 +
 .../angular/example_component_ts.md           |    29 +
 .../angular/modal-example_component_html.md   |    19 +
 .../angular/modal-example_component_ts.md     |    23 +
 static/usage/v7/modal/controller/demo.html    |    78 +
 static/usage/v7/modal/controller/index.md     |    39 +
 .../usage/v7/modal/controller/javascript.md   |    57 +
 static/usage/v7/modal/controller/react.md     |    83 +
 .../v7/modal/controller/vue/example_vue.md    |    43 +
 .../v7/modal/controller/vue/modal_vue.md      |    50 +
 .../angular/example_component_html.md         |    33 +
 .../custom-dialogs/angular/global_css.md      |    28 +
 .../usage/v7/modal/custom-dialogs/demo.html   |    83 +
 static/usage/v7/modal/custom-dialogs/index.md |    33 +
 .../v7/modal/custom-dialogs/javascript.md     |    67 +
 .../v7/modal/custom-dialogs/react/main_css.md |    28 +
 .../v7/modal/custom-dialogs/react/main_tsx.md |    64 +
 static/usage/v7/modal/custom-dialogs/vue.md   |   102 +
 .../basic/angular/example_component_html.md   |    32 +
 .../basic/angular/example_component_ts.md     |    31 +
 static/usage/v7/modal/inline/basic/demo.html  |    67 +
 static/usage/v7/modal/inline/basic/index.md   |    26 +
 .../usage/v7/modal/inline/basic/javascript.md |    50 +
 static/usage/v7/modal/inline/basic/react.md   |    75 +
 static/usage/v7/modal/inline/basic/vue.md     |    83 +
 .../is-open/angular/example_component_html.md |    29 +
 .../is-open/angular/example_component_ts.md   |    15 +
 .../usage/v7/modal/inline/is-open/demo.html   |    46 +
 static/usage/v7/modal/inline/is-open/index.md |    26 +
 .../v7/modal/inline/is-open/javascript.md     |    31 +
 static/usage/v7/modal/inline/is-open/react.md |    42 +
 static/usage/v7/modal/inline/is-open/vue.md   |    49 +
 .../v7/modal/performance/mount/angular.md     |    25 +
 .../v7/modal/performance/mount/demo.html      |    55 +
 .../usage/v7/modal/performance/mount/index.md |    19 +
 .../v7/modal/performance/mount/javascript.md  |    32 +
 .../usage/v7/modal/performance/mount/react.md |    47 +
 .../usage/v7/modal/performance/mount/vue.md   |    55 +
 .../angular/example_component_css.md          |     7 +
 .../angular/example_component_html.md         |    72 +
 .../angular/example_component_ts.md           |    20 +
 .../modal/sheet/background-content/demo.html  |   106 +
 .../modal/sheet/background-content/index.md   |    28 +
 .../sheet/background-content/javascript.md    |    89 +
 .../modal/sheet/background-content/react.md   |   100 +
 .../v7/modal/sheet/background-content/vue.md  |   126 +
 static/usage/v7/modal/sheet/basic/angular.md  |    56 +
 static/usage/v7/modal/sheet/basic/demo.html   |    82 +
 static/usage/v7/modal/sheet/basic/index.md    |    19 +
 .../usage/v7/modal/sheet/basic/javascript.md  |    65 +
 static/usage/v7/modal/sheet/basic/react.md    |    82 +
 static/usage/v7/modal/sheet/basic/vue.md      |    91 +
 .../v7/modal/sheet/handle-behavior/angular.md |    25 +
 .../v7/modal/sheet/handle-behavior/demo.html  |    41 +
 .../v7/modal/sheet/handle-behavior/index.md   |    19 +
 .../modal/sheet/handle-behavior/javascript.md |    24 +
 .../v7/modal/sheet/handle-behavior/react.md   |    35 +
 .../v7/modal/sheet/handle-behavior/vue.md     |    42 +
 .../angular/example_component_html.md         |    63 +
 .../angular/example_component_ts.md           |    40 +
 .../v7/modal/styling/animations/demo.html     |   117 +
 .../v7/modal/styling/animations/index.md      |    33 +
 .../animations/javascript/index_html.md       |   106 +
 .../styling/animations/javascript/index_ts.md |     9 +
 .../v7/modal/styling/animations/react.md      |   123 +
 .../usage/v7/modal/styling/animations/vue.md  |   129 +
 .../theming/angular/example_component_html.md |    61 +
 .../styling/theming/angular/global_css.md     |    17 +
 .../usage/v7/modal/styling/theming/demo.html  |   101 +
 .../usage/v7/modal/styling/theming/index.md   |    33 +
 .../v7/modal/styling/theming/javascript.md    |    87 +
 .../modal/styling/theming/react/main_css.md   |    17 +
 .../modal/styling/theming/react/main_tsx.md   |    95 +
 static/usage/v7/modal/styling/theming/vue.md  |   119 +
 .../modal-navigation/angular/app_module_ts.md |    21 +
 .../angular/example_component_html.md         |    25 +
 .../angular/example_component_ts.md           |    18 +
 .../angular/page_one_component_ts.md          |    23 +
 .../angular/page_three_component_ts.md        |    26 +
 .../angular/page_two_component_ts.md          |    25 +
 .../usage/v7/nav/modal-navigation/demo.html   |   106 +
 static/usage/v7/nav/modal-navigation/index.md |    56 +
 .../v7/nav/modal-navigation/javascript.md     |    86 +
 .../v7/nav/modal-navigation/react/main_tsx.md |    60 +
 .../modal-navigation/react/page_one_tsx.md    |    18 +
 .../modal-navigation/react/page_three_tsx.md  |    19 +
 .../modal-navigation/react/page_two_tsx.md    |    19 +
 .../nav/modal-navigation/vue/example_vue.md   |    60 +
 .../nav/modal-navigation/vue/page_one_vue.md  |    24 +
 .../modal-navigation/vue/page_three_vue.md    |    28 +
 .../nav/modal-navigation/vue/page_two_vue.md  |    24 +
 .../v7/nav/nav-link/angular/app_module_ts.md  |    21 +
 .../angular/example_component_html.md         |     3 +
 .../nav-link/angular/example_component_ts.md  |    13 +
 .../nav-link/angular/page_one_component_ts.md |    25 +
 .../angular/page_three_component_ts.md        |    21 +
 .../nav-link/angular/page_two_component_ts.md |    30 +
 static/usage/v7/nav/nav-link/demo.html        |    84 +
 static/usage/v7/nav/nav-link/index.md         |    55 +
 static/usage/v7/nav/nav-link/javascript.md    |    67 +
 .../usage/v7/nav/nav-link/react/main_tsx.md   |    11 +
 .../v7/nav/nav-link/react/page_one_tsx.md     |    26 +
 .../v7/nav/nav-link/react/page_three_tsx.md   |    24 +
 .../v7/nav/nav-link/react/page_two_tsx.md     |    38 +
 .../usage/v7/nav/nav-link/vue/example_vue.md  |    19 +
 .../usage/v7/nav/nav-link/vue/page_one_vue.md |    29 +
 .../v7/nav/nav-link/vue/page_three_vue.md     |    23 +
 .../usage/v7/nav/nav-link/vue/page_two_vue.md |    50 +
 static/usage/v7/note/basic/angular.md         |     3 +
 static/usage/v7/note/basic/demo.html          |    25 +
 static/usage/v7/note/basic/index.md           |     8 +
 static/usage/v7/note/basic/javascript.md      |     3 +
 static/usage/v7/note/basic/react.md           |    13 +
 static/usage/v7/note/basic/vue.md             |    14 +
 static/usage/v7/note/item/angular.md          |    11 +
 static/usage/v7/note/item/demo.html           |    38 +
 static/usage/v7/note/item/index.md            |     8 +
 static/usage/v7/note/item/javascript.md       |    11 +
 static/usage/v7/note/item/react.md            |    21 +
 static/usage/v7/note/item/vue.md              |    22 +
 .../usage/v7/note/theming/colors/angular.md   |    12 +
 static/usage/v7/note/theming/colors/demo.html |    49 +
 static/usage/v7/note/theming/colors/index.md  |     8 +
 .../v7/note/theming/colors/javascript.md      |    12 +
 static/usage/v7/note/theming/colors/react.md  |    22 +
 static/usage/v7/note/theming/colors/vue.md    |    23 +
 .../angular/example_component_css.md          |     5 +
 .../angular/example_component_html.md         |     3 +
 .../v7/note/theming/css-properties/demo.html  |    30 +
 .../v7/note/theming/css-properties/index.md   |    32 +
 .../note/theming/css-properties/javascript.md |     9 +
 .../theming/css-properties/react/main_css.md  |     5 +
 .../theming/css-properties/react/main_tsx.md  |    15 +
 .../v7/note/theming/css-properties/vue.md     |    20 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    84 +
 .../usage/v7/picker/multiple-column/demo.html |    90 +
 .../usage/v7/picker/multiple-column/index.md  |    25 +
 .../v7/picker/multiple-column/javascript.md   |    76 +
 .../usage/v7/picker/multiple-column/react.md  |    82 +
 static/usage/v7/picker/multiple-column/vue.md |    93 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    54 +
 .../usage/v7/picker/single-column/demo.html   |    65 +
 static/usage/v7/picker/single-column/index.md |    25 +
 .../v7/picker/single-column/javascript.md     |    46 +
 static/usage/v7/picker/single-column/react.md |    52 +
 static/usage/v7/picker/single-column/vue.md   |    61 +
 .../angular/example_component_css.md          |    12 +
 .../angular/example_component_html.md         |    31 +
 .../angular/example_component_ts.md           |    10 +
 .../customization/positioning/demo.html       |    52 +
 .../customization/positioning/index.md        |    34 +
 .../customization/positioning/javascript.md   |    36 +
 .../positioning/react/main_css.md             |    12 +
 .../positioning/react/main_tsx.md             |    33 +
 .../popover/customization/positioning/vue.md  |    47 +
 .../popover/customization/sizing/angular.md   |    15 +
 .../v7/popover/customization/sizing/demo.html |    32 +
 .../v7/popover/customization/sizing/index.md  |    13 +
 .../customization/sizing/javascript.md        |    11 +
 .../v7/popover/customization/sizing/react.md  |    20 +
 .../v7/popover/customization/sizing/vue.md    |    22 +
 .../styling/angular/example_component_html.md |     8 +
 .../styling/angular/global_css.md             |    17 +
 .../popover/customization/styling/demo.html   |    45 +
 .../v7/popover/customization/styling/index.md |    32 +
 .../customization/styling/javascript.md       |    24 +
 .../customization/styling/react/main_css.md   |    17 +
 .../customization/styling/react/main_tsx.md   |    18 +
 .../v7/popover/customization/styling/vue.md   |    35 +
 static/usage/v7/popover/nested/angular.md     |    24 +
 static/usage/v7/popover/nested/demo.html      |    41 +
 static/usage/v7/popover/nested/index.md       |    13 +
 static/usage/v7/popover/nested/javascript.md  |    20 +
 static/usage/v7/popover/nested/react.md       |    37 +
 static/usage/v7/popover/nested/vue.md         |    31 +
 .../v7/popover/performance/mount/angular.md   |     8 +
 .../v7/popover/performance/mount/demo.html    |    27 +
 .../v7/popover/performance/mount/index.md     |    18 +
 .../popover/performance/mount/javascript.md   |     6 +
 .../v7/popover/performance/mount/react.md     |    15 +
 .../usage/v7/popover/performance/mount/vue.md |    19 +
 .../controller/angular/app_module_ts.md       |    19 +
 .../angular/example_component_html.md         |     4 +
 .../angular/example_component_ts.md           |    29 +
 .../angular/popover_component_html.md         |     3 +
 .../angular/popover_component_ts.md           |    10 +
 .../popover/presenting/controller/demo.html   |    63 +
 .../v7/popover/presenting/controller/index.md |    38 +
 .../presenting/controller/javascript.md       |    36 +
 .../v7/popover/presenting/controller/react.md |    30 +
 .../presenting/controller/vue/example_vue.md  |    32 +
 .../presenting/controller/vue/popover_vue.md  |    15 +
 .../angular/example_component_html.md         |     8 +
 .../angular/example_component_ts.md           |    18 +
 .../presenting/inline-isopen/demo.html        |    39 +
 .../popover/presenting/inline-isopen/index.md |    25 +
 .../presenting/inline-isopen/javascript.md    |    18 +
 .../popover/presenting/inline-isopen/react.md |    24 +
 .../popover/presenting/inline-isopen/vue.md   |    29 +
 .../presenting/inline-trigger/angular.md      |    22 +
 .../presenting/inline-trigger/demo.html       |    37 +
 .../presenting/inline-trigger/index.md        |    13 +
 .../presenting/inline-trigger/javascript.md   |    16 +
 .../presenting/inline-trigger/react.md        |    25 +
 .../popover/presenting/inline-trigger/vue.md  |    27 +
 .../buffer/angular/example_component_html.md  |     3 +
 .../buffer/angular/example_component_ts.md    |    29 +
 static/usage/v7/progress-bar/buffer/demo.html |    47 +
 static/usage/v7/progress-bar/buffer/index.md  |    25 +
 .../v7/progress-bar/buffer/javascript.md      |    25 +
 static/usage/v7/progress-bar/buffer/react.md  |    30 +
 static/usage/v7/progress-bar/buffer/vue.md    |    38 +
 .../angular/example_component_html.md         |     3 +
 .../angular/example_component_ts.md           |    26 +
 .../v7/progress-bar/determinate/demo.html     |    42 +
 .../v7/progress-bar/determinate/index.md      |    25 +
 .../v7/progress-bar/determinate/javascript.md |    20 +
 .../v7/progress-bar/determinate/react.md      |    27 +
 .../usage/v7/progress-bar/determinate/vue.md  |    34 +
 .../v7/progress-bar/indeterminate/angular.md  |     3 +
 .../v7/progress-bar/indeterminate/demo.html   |    25 +
 .../v7/progress-bar/indeterminate/index.md    |    12 +
 .../progress-bar/indeterminate/javascript.md  |     3 +
 .../v7/progress-bar/indeterminate/react.md    |    11 +
 .../v7/progress-bar/indeterminate/vue.md      |    14 +
 .../v7/progress-bar/theming/colors/angular.md |    11 +
 .../v7/progress-bar/theming/colors/demo.html  |    39 +
 .../v7/progress-bar/theming/colors/index.md   |    12 +
 .../progress-bar/theming/colors/javascript.md |    11 +
 .../v7/progress-bar/theming/colors/react.md   |    21 +
 .../v7/progress-bar/theming/colors/vue.md     |    22 +
 .../angular/example_component_css.md          |     6 +
 .../angular/example_component_html.md         |     4 +
 .../theming/css-properties/demo.html          |    37 +
 .../theming/css-properties/index.md           |    32 +
 .../theming/css-properties/javascript.md      |    11 +
 .../theming/css-properties/react/main_css.md  |     6 +
 .../theming/css-properties/react/main_tsx.md  |    17 +
 .../theming/css-properties/vue.md             |    22 +
 .../angular/example_component_css.md          |    13 +
 .../angular/example_component_html.md         |     4 +
 .../theming/css-shadow-parts/demo.html        |    44 +
 .../theming/css-shadow-parts/index.md         |    32 +
 .../theming/css-shadow-parts/javascript.md    |    18 +
 .../css-shadow-parts/react/main_css.md        |    13 +
 .../css-shadow-parts/react/main_tsx.md        |    17 +
 .../theming/css-shadow-parts/vue.md           |    29 +
 static/usage/v7/radio/basic/angular.md        |    25 +
 static/usage/v7/radio/basic/demo.html         |    52 +
 static/usage/v7/radio/basic/index.md          |     8 +
 static/usage/v7/radio/basic/javascript.md     |    25 +
 static/usage/v7/radio/basic/react.md          |    33 +
 static/usage/v7/radio/basic/vue.md            |    36 +
 .../usage/v7/radio/empty-selection/angular.md |    25 +
 .../usage/v7/radio/empty-selection/demo.html  |    52 +
 .../usage/v7/radio/empty-selection/index.md   |    13 +
 .../v7/radio/empty-selection/javascript.md    |    25 +
 .../usage/v7/radio/empty-selection/react.md   |    33 +
 static/usage/v7/radio/empty-selection/vue.md  |    36 +
 .../usage/v7/radio/theming/colors/angular.md  |    29 +
 .../usage/v7/radio/theming/colors/demo.html   |    54 +
 static/usage/v7/radio/theming/colors/index.md |    13 +
 .../v7/radio/theming/colors/javascript.md     |    29 +
 static/usage/v7/radio/theming/colors/react.md |    39 +
 static/usage/v7/radio/theming/colors/vue.md   |    40 +
 .../angular/example_component_css.md          |    21 +
 .../angular/example_component_html.md         |     6 +
 .../v7/radio/theming/css-properties/demo.html |    49 +
 .../v7/radio/theming/css-properties/index.md  |    33 +
 .../theming/css-properties/javascript.md      |    28 +
 .../theming/css-properties/react/main_css.md  |    21 +
 .../theming/css-properties/react/main_tsx.md  |    16 +
 .../v7/radio/theming/css-properties/vue.md    |    39 +
 .../angular/example_component_css.md          |    34 +
 .../angular/example_component_html.md         |     6 +
 .../radio/theming/css-shadow-parts/demo.html  |    62 +
 .../radio/theming/css-shadow-parts/index.md   |    33 +
 .../theming/css-shadow-parts/javascript.md    |    41 +
 .../css-shadow-parts/react/main_css.md        |    34 +
 .../css-shadow-parts/react/main_tsx.md        |    16 +
 .../v7/radio/theming/css-shadow-parts/vue.md  |    52 +
 static/usage/v7/range/basic/angular.md        |     3 +
 static/usage/v7/range/basic/demo.html         |    29 +
 static/usage/v7/range/basic/index.md          |     8 +
 static/usage/v7/range/basic/javascript.md     |     3 +
 static/usage/v7/range/basic/react.md          |     8 +
 static/usage/v7/range/basic/vue.md            |    14 +
 static/usage/v7/range/dual-knobs/angular.md   |     3 +
 static/usage/v7/range/dual-knobs/demo.html    |    36 +
 static/usage/v7/range/dual-knobs/index.md     |     8 +
 .../usage/v7/range/dual-knobs/javascript.md   |    11 +
 static/usage/v7/range/dual-knobs/react.md     |    16 +
 static/usage/v7/range/dual-knobs/vue.md       |    14 +
 .../angular/example_component_html.md         |     4 +
 .../angular/example_component_ts.md           |    18 +
 .../usage/v7/range/ion-change-event/demo.html |    40 +
 .../usage/v7/range/ion-change-event/index.md  |    24 +
 .../v7/range/ion-change-event/javascript.md   |    13 +
 .../usage/v7/range/ion-change-event/react.md  |    15 +
 static/usage/v7/range/ion-change-event/vue.md |    25 +
 .../angular/example_component_html.md         |     9 +
 .../angular/example_component_ts.md           |    23 +
 .../v7/range/ion-knob-move-event/demo.html    |    50 +
 .../v7/range/ion-knob-move-event/index.md     |    24 +
 .../range/ion-knob-move-event/javascript.md   |    23 +
 .../v7/range/ion-knob-move-event/react.md     |    24 +
 .../usage/v7/range/ion-knob-move-event/vue.md |    34 +
 .../pins/angular/example_component_html.md    |     3 +
 .../pins/angular/example_component_ts.md      |    13 +
 static/usage/v7/range/pins/demo.html          |    35 +
 static/usage/v7/range/pins/index.md           |    24 +
 static/usage/v7/range/pins/javascript.md      |    10 +
 static/usage/v7/range/pins/react.md           |     8 +
 static/usage/v7/range/pins/vue.md             |    19 +
 static/usage/v7/range/slots/angular.md        |     6 +
 static/usage/v7/range/slots/demo.html         |    32 +
 static/usage/v7/range/slots/index.md          |     8 +
 static/usage/v7/range/slots/javascript.md     |     6 +
 static/usage/v7/range/slots/react.md          |    15 +
 static/usage/v7/range/slots/vue.md            |    24 +
 .../usage/v7/range/snapping-ticks/angular.md  |     3 +
 .../usage/v7/range/snapping-ticks/demo.html   |    29 +
 static/usage/v7/range/snapping-ticks/index.md |     8 +
 .../v7/range/snapping-ticks/javascript.md     |     3 +
 static/usage/v7/range/snapping-ticks/react.md |     8 +
 static/usage/v7/range/snapping-ticks/vue.md   |    14 +
 .../angular/example_component_css.md          |    12 +
 .../angular/example_component_html.md         |     3 +
 .../v7/range/theming/css-properties/demo.html |    38 +
 .../v7/range/theming/css-properties/index.md  |    32 +
 .../theming/css-properties/javascript.md      |    16 +
 .../theming/css-properties/react/main_css.md  |    12 +
 .../theming/css-properties/react/main_tsx.md  |    11 +
 .../v7/range/theming/css-properties/vue.md    |    27 +
 .../angular/example_component_css.md          |    43 +
 .../angular/example_component_html.md         |     3 +
 .../range/theming/css-shadow-parts/demo.html  |    71 +
 .../range/theming/css-shadow-parts/index.md   |    32 +
 .../theming/css-shadow-parts/javascript.md    |    47 +
 .../css-shadow-parts/react/main_css.md        |    43 +
 .../css-shadow-parts/react/main_tsx.md        |    12 +
 .../v7/range/theming/css-shadow-parts/vue.md  |    58 +
 .../advanced/angular/example_component_css.md |    11 +
 .../angular/example_component_html.md         |    23 +
 .../advanced/angular/example_component_ts.md  |    37 +
 static/usage/v7/refresher/advanced/demo.html  |    99 +
 static/usage/v7/refresher/advanced/index.md   |    36 +
 .../usage/v7/refresher/advanced/javascript.md |    68 +
 .../v7/refresher/advanced/react/main_css.md   |    11 +
 .../v7/refresher/advanced/react/main_tsx.md   |    67 +
 static/usage/v7/refresher/advanced/vue.md     |    72 +
 .../basic/angular/example_component_html.md   |    15 +
 .../basic/angular/example_component_ts.md     |    16 +
 static/usage/v7/refresher/basic/demo.html     |    43 +
 static/usage/v7/refresher/basic/index.md      |    26 +
 static/usage/v7/refresher/basic/javascript.md |    26 +
 static/usage/v7/refresher/basic/react.md      |    33 +
 static/usage/v7/refresher/basic/vue.md        |    36 +
 .../angular/example_component_html.md         |    20 +
 .../angular/example_component_ts.md           |    16 +
 .../v7/refresher/custom-content/demo.html     |    45 +
 .../v7/refresher/custom-content/index.md      |    26 +
 .../v7/refresher/custom-content/javascript.md |    31 +
 .../v7/refresher/custom-content/react.md      |    39 +
 .../usage/v7/refresher/custom-content/vue.md  |    42 +
 .../angular/example_component_css.md          |    10 +
 .../angular/example_component_html.md         |    17 +
 .../angular/example_component_ts.md           |    17 +
 .../refresher/custom-scroll-target/demo.html  |    56 +
 .../refresher/custom-scroll-target/index.md   |    34 +
 .../custom-scroll-target/javascript.md        |    39 +
 .../custom-scroll-target/react/main_css.md    |    10 +
 .../custom-scroll-target/react/main_tsx.md    |    37 +
 .../v7/refresher/custom-scroll-target/vue.md  |    49 +
 .../angular/example_component_html.md         |    15 +
 .../angular/example_component_ts.md           |    16 +
 .../v7/refresher/pull-properties/demo.html    |    43 +
 .../v7/refresher/pull-properties/index.md     |    26 +
 .../refresher/pull-properties/javascript.md   |    26 +
 .../v7/refresher/pull-properties/react.md     |    33 +
 .../usage/v7/refresher/pull-properties/vue.md |    36 +
 .../basic/angular/example_component_html.md   |    42 +
 .../basic/angular/example_component_ts.md     |    22 +
 static/usage/v7/reorder/basic/demo.html       |    83 +
 static/usage/v7/reorder/basic/index.md        |    25 +
 static/usage/v7/reorder/basic/javascript.md   |    56 +
 static/usage/v7/reorder/basic/react.md        |    60 +
 static/usage/v7/reorder/basic/vue.md          |    66 +
 .../angular/example_component_html.md         |    52 +
 .../angular/example_component_ts.md           |    22 +
 static/usage/v7/reorder/custom-icon/demo.html |    93 +
 static/usage/v7/reorder/custom-icon/index.md  |    25 +
 .../v7/reorder/custom-icon/javascript.md      |    66 +
 static/usage/v7/reorder/custom-icon/react.md  |    71 +
 static/usage/v7/reorder/custom-icon/vue.md    |    76 +
 .../angular/example_component_css.md          |    11 +
 .../angular/example_component_html.md         |    46 +
 .../angular/example_component_ts.md           |    23 +
 .../v7/reorder/custom-scroll-target/demo.html |    95 +
 .../v7/reorder/custom-scroll-target/index.md  |    36 +
 .../custom-scroll-target/javascript.md        |    72 +
 .../custom-scroll-target/react/main_css.md    |    11 +
 .../custom-scroll-target/react/main_tsx.md    |    66 +
 .../v7/reorder/custom-scroll-target/vue.md    |    82 +
 .../angular/example_component_html.md         |    46 +
 .../angular/example_component_ts.md           |    28 +
 .../v7/reorder/toggling-disabled/demo.html    |    96 +
 .../v7/reorder/toggling-disabled/index.md     |    25 +
 .../reorder/toggling-disabled/javascript.md   |    64 +
 .../v7/reorder/toggling-disabled/react.md     |    72 +
 .../usage/v7/reorder/toggling-disabled/vue.md |    76 +
 .../angular/example_component_html.md         |    14 +
 .../angular/example_component_ts.md           |    27 +
 .../usage/v7/reorder/updating-data/demo.html  |    76 +
 .../usage/v7/reorder/updating-data/index.md   |    25 +
 .../v7/reorder/updating-data/javascript.md    |    49 +
 .../usage/v7/reorder/updating-data/react.md   |    39 +
 static/usage/v7/reorder/updating-data/vue.md  |    42 +
 .../wrapper/angular/example_component_html.md |    47 +
 .../wrapper/angular/example_component_ts.md   |    22 +
 static/usage/v7/reorder/wrapper/demo.html     |    88 +
 static/usage/v7/reorder/wrapper/index.md      |    25 +
 static/usage/v7/reorder/wrapper/javascript.md |    61 +
 static/usage/v7/reorder/wrapper/react.md      |    65 +
 static/usage/v7/reorder/wrapper/vue.md        |    71 +
 .../basic/angular/example_component_css.md    |    43 +
 .../basic/angular/example_component_html.md   |    17 +
 static/usage/v7/ripple-effect/basic/demo.html |    82 +
 static/usage/v7/ripple-effect/basic/index.md  |    33 +
 .../v7/ripple-effect/basic/javascript.md      |    61 +
 .../v7/ripple-effect/basic/react/main_css.md  |    43 +
 .../v7/ripple-effect/basic/react/main_tsx.md  |    27 +
 static/usage/v7/ripple-effect/basic/vue.md    |    72 +
 .../angular/example_component_css.md          |    44 +
 .../angular/example_component_html.md         |    15 +
 .../v7/ripple-effect/customizing/demo.html    |    81 +
 .../v7/ripple-effect/customizing/index.md     |    33 +
 .../ripple-effect/customizing/javascript.md   |    60 +
 .../customizing/react/main_css.md             |    44 +
 .../customizing/react/main_tsx.md             |    25 +
 .../usage/v7/ripple-effect/customizing/vue.md |    71 +
 .../type/angular/example_component_css.md     |    44 +
 .../type/angular/example_component_html.md    |    15 +
 static/usage/v7/ripple-effect/type/demo.html  |    81 +
 static/usage/v7/ripple-effect/type/index.md   |    33 +
 .../usage/v7/ripple-effect/type/javascript.md |    60 +
 .../v7/ripple-effect/type/react/main_css.md   |    44 +
 .../v7/ripple-effect/type/react/main_tsx.md   |    25 +
 static/usage/v7/ripple-effect/type/vue.md     |    71 +
 static/usage/v7/searchbar/basic/angular.md    |     7 +
 static/usage/v7/searchbar/basic/demo.html     |    34 +
 static/usage/v7/searchbar/basic/index.md      |    13 +
 static/usage/v7/searchbar/basic/javascript.md |     7 +
 static/usage/v7/searchbar/basic/react.md      |    17 +
 static/usage/v7/searchbar/basic/vue.md        |    18 +
 .../v7/searchbar/cancel-button/angular.md     |     6 +
 .../v7/searchbar/cancel-button/demo.html      |    34 +
 .../usage/v7/searchbar/cancel-button/index.md |    13 +
 .../v7/searchbar/cancel-button/javascript.md  |     6 +
 .../usage/v7/searchbar/cancel-button/react.md |    17 +
 .../usage/v7/searchbar/cancel-button/vue.md   |    21 +
 .../v7/searchbar/clear-button/angular.md      |     6 +
 .../usage/v7/searchbar/clear-button/demo.html |    33 +
 .../usage/v7/searchbar/clear-button/index.md  |    13 +
 .../v7/searchbar/clear-button/javascript.md   |     6 +
 .../usage/v7/searchbar/clear-button/react.md  |    17 +
 static/usage/v7/searchbar/clear-button/vue.md |    21 +
 .../angular/example_component_html.md         |     9 +
 .../debounce/angular/example_component_ts.md  |    17 +
 static/usage/v7/searchbar/debounce/demo.html  |    64 +
 static/usage/v7/searchbar/debounce/index.md   |    26 +
 .../usage/v7/searchbar/debounce/javascript.md |    37 +
 static/usage/v7/searchbar/debounce/react.md   |    30 +
 static/usage/v7/searchbar/debounce/vue.md     |    32 +
 .../usage/v7/searchbar/search-icon/angular.md |     4 +
 .../usage/v7/searchbar/search-icon/demo.html  |    31 +
 .../usage/v7/searchbar/search-icon/index.md   |     8 +
 .../v7/searchbar/search-icon/javascript.md    |     4 +
 .../usage/v7/searchbar/search-icon/react.md   |    15 +
 static/usage/v7/searchbar/search-icon/vue.md  |    19 +
 .../v7/searchbar/theming/colors/angular.md    |    12 +
 .../v7/searchbar/theming/colors/demo.html     |    39 +
 .../v7/searchbar/theming/colors/index.md      |    13 +
 .../v7/searchbar/theming/colors/javascript.md |    12 +
 .../v7/searchbar/theming/colors/react.md      |    22 +
 .../usage/v7/searchbar/theming/colors/vue.md  |    23 +
 .../angular/example_component_css.md          |    20 +
 .../angular/example_component_html.md         |     3 +
 .../theming/css-properties/demo.html          |    48 +
 .../searchbar/theming/css-properties/index.md |    32 +
 .../theming/css-properties/javascript.md      |    24 +
 .../theming/css-properties/react/main_css.md  |    20 +
 .../theming/css-properties/react/main_tsx.md  |    13 +
 .../searchbar/theming/css-properties/vue.md   |    35 +
 .../usage/v7/segment-button/basic/angular.md  |    25 +
 .../usage/v7/segment-button/basic/demo.html   |    56 +
 static/usage/v7/segment-button/basic/index.md |     8 +
 .../v7/segment-button/basic/javascript.md     |    25 +
 static/usage/v7/segment-button/basic/react.md |    35 +
 static/usage/v7/segment-button/basic/vue.md   |    36 +
 .../usage/v7/segment-button/layout/angular.md |    73 +
 .../usage/v7/segment-button/layout/demo.html  |   104 +
 .../usage/v7/segment-button/layout/index.md   |    13 +
 .../v7/segment-button/layout/javascript.md    |    73 +
 .../usage/v7/segment-button/layout/react.md   |    84 +
 static/usage/v7/segment-button/layout/vue.md  |    88 +
 .../angular/example_component_css.md          |    19 +
 .../angular/example_component_html.md         |    13 +
 .../theming/css-properties/demo.html          |    59 +
 .../theming/css-properties/index.md           |    32 +
 .../theming/css-properties/javascript.md      |    33 +
 .../theming/css-properties/react/main_css.md  |    19 +
 .../theming/css-properties/react/main_tsx.md  |    23 +
 .../theming/css-properties/vue.md             |    44 +
 .../angular/example_component_css.md          |    31 +
 .../angular/example_component_html.md         |    13 +
 .../theming/css-shadow-parts/demo.html        |    71 +
 .../theming/css-shadow-parts/index.md         |    32 +
 .../theming/css-shadow-parts/javascript.md    |    45 +
 .../css-shadow-parts/react/main_css.md        |    31 +
 .../css-shadow-parts/react/main_tsx.md        |    23 +
 .../theming/css-shadow-parts/vue.md           |    56 +
 static/usage/v7/segment/basic/angular.md      |    19 +
 static/usage/v7/segment/basic/demo.html       |    50 +
 static/usage/v7/segment/basic/index.md        |     8 +
 static/usage/v7/segment/basic/javascript.md   |    19 +
 static/usage/v7/segment/basic/react.md        |    29 +
 static/usage/v7/segment/basic/vue.md          |    30 +
 static/usage/v7/segment/scrollable/angular.md |    34 +
 static/usage/v7/segment/scrollable/demo.html  |    66 +
 static/usage/v7/segment/scrollable/index.md   |    13 +
 .../usage/v7/segment/scrollable/javascript.md |    34 +
 static/usage/v7/segment/scrollable/react.md   |    43 +
 static/usage/v7/segment/scrollable/vue.md     |    51 +
 .../v7/segment/theming/colors/angular.md      |    82 +
 .../usage/v7/segment/theming/colors/demo.html |   113 +
 .../usage/v7/segment/theming/colors/index.md  |    13 +
 .../v7/segment/theming/colors/javascript.md   |    82 +
 .../usage/v7/segment/theming/colors/react.md  |    92 +
 static/usage/v7/segment/theming/colors/vue.md |    93 +
 .../angular/example_component_css.md          |     5 +
 .../angular/example_component_html.md         |    10 +
 .../segment/theming/css-properties/demo.html  |    42 +
 .../segment/theming/css-properties/index.md   |    32 +
 .../theming/css-properties/javascript.md      |    16 +
 .../theming/css-properties/react/main_css.md  |     5 +
 .../theming/css-properties/react/main_tsx.md  |    22 +
 .../v7/segment/theming/css-properties/vue.md  |    27 +
 .../basic/multiple-selection/angular.md       |    11 +
 .../select/basic/multiple-selection/demo.html |    32 +
 .../select/basic/multiple-selection/index.md  |    13 +
 .../basic/multiple-selection/javascript.md    |    11 +
 .../select/basic/multiple-selection/react.md  |    18 +
 .../v7/select/basic/multiple-selection/vue.md |    22 +
 .../angular/example_component_html.md         |    19 +
 .../angular/example_component_ts.md           |    19 +
 .../basic/responding-to-interaction/demo.html |    62 +
 .../basic/responding-to-interaction/index.md  |    25 +
 .../responding-to-interaction/javascript.md   |    29 +
 .../basic/responding-to-interaction/react.md  |    38 +
 .../basic/responding-to-interaction/vue.md    |    40 +
 .../select/basic/single-selection/angular.md  |    11 +
 .../select/basic/single-selection/demo.html   |    32 +
 .../v7/select/basic/single-selection/index.md |    13 +
 .../basic/single-selection/javascript.md      |    11 +
 .../v7/select/basic/single-selection/react.md |    18 +
 .../v7/select/basic/single-selection/vue.md   |    22 +
 .../customization/button-text/angular.md      |    20 +
 .../customization/button-text/demo.html       |    41 +
 .../select/customization/button-text/index.md |    13 +
 .../customization/button-text/javascript.md   |    20 +
 .../select/customization/button-text/react.md |    27 +
 .../select/customization/button-text/vue.md   |    31 +
 .../angular/example_component_html.md         |    30 +
 .../angular/example_component_ts.md           |    27 +
 .../customization/interface-options/demo.html |    83 +
 .../customization/interface-options/index.md  |    25 +
 .../interface-options/javascript.md           |    56 +
 .../customization/interface-options/react.md  |    55 +
 .../customization/interface-options/vue.md    |    66 +
 .../angular/example_component_css.md          |    27 +
 .../angular/example_component_html.md         |     7 +
 .../angular/example_component_ts.md           |    10 +
 .../customization/styling-select/demo.html    |    60 +
 .../customization/styling-select/index.md     |    34 +
 .../styling-select/javascript.md              |    35 +
 .../styling-select/react/main_css.md          |    27 +
 .../styling-select/react/main_tsx.md          |    17 +
 .../customization/styling-select/vue.md       |    46 +
 .../select/interfaces/action-sheet/angular.md |    11 +
 .../select/interfaces/action-sheet/demo.html  |    32 +
 .../select/interfaces/action-sheet/index.md   |    13 +
 .../interfaces/action-sheet/javascript.md     |    11 +
 .../select/interfaces/action-sheet/react.md   |    18 +
 .../v7/select/interfaces/action-sheet/vue.md  |    22 +
 .../v7/select/interfaces/popover/angular.md   |    11 +
 .../v7/select/interfaces/popover/demo.html    |    32 +
 .../v7/select/interfaces/popover/index.md     |    13 +
 .../select/interfaces/popover/javascript.md   |    11 +
 .../v7/select/interfaces/popover/react.md     |    18 +
 .../usage/v7/select/interfaces/popover/vue.md |    22 +
 .../angular/example_component_html.md         |    17 +
 .../angular/example_component_ts.md           |    45 +
 .../multiple-selection/demo.html              |    91 +
 .../multiple-selection/index.md               |    25 +
 .../multiple-selection/javascript.md          |    60 +
 .../multiple-selection/react.md               |    67 +
 .../multiple-selection/vue.md                 |    63 +
 .../angular/example_component_html.md         |    16 +
 .../angular/example_component_ts.md           |    37 +
 .../using-comparewith/demo.html               |    79 +
 .../using-comparewith/index.md                |    25 +
 .../using-comparewith/javascript.md           |    52 +
 .../using-comparewith/react.md                |    58 +
 .../using-comparewith/vue.md                  |    54 +
 .../basic/angular/example_component_html.md   |    39 +
 .../basic/angular/example_component_ts.md     |    13 +
 static/usage/v7/skeleton-text/basic/demo.html |    92 +
 static/usage/v7/skeleton-text/basic/index.md  |    25 +
 .../v7/skeleton-text/basic/javascript.md      |    61 +
 static/usage/v7/skeleton-text/basic/react.md  |    61 +
 static/usage/v7/skeleton-text/basic/vue.md    |    78 +
 .../angular/example_component_css.md          |     7 +
 .../angular/example_component_html.md         |    23 +
 .../theming/css-properties/demo.html          |    60 +
 .../theming/css-properties/index.md           |    33 +
 .../theming/css-properties/javascript.md      |    31 +
 .../theming/css-properties/react/main_css.md  |     7 +
 .../theming/css-properties/react/main_tsx.md  |    40 +
 .../theming/css-properties/vue.md             |    56 +
 static/usage/v7/spinner/basic/angular.md      |    51 +
 static/usage/v7/spinner/basic/demo.html       |    79 +
 static/usage/v7/spinner/basic/index.md        |    13 +
 static/usage/v7/spinner/basic/javascript.md   |    51 +
 static/usage/v7/spinner/basic/react.md        |    61 +
 static/usage/v7/spinner/basic/vue.md          |    62 +
 .../v7/spinner/theming/colors/angular.md      |    12 +
 .../usage/v7/spinner/theming/colors/demo.html |    33 +
 .../usage/v7/spinner/theming/colors/index.md  |    13 +
 .../v7/spinner/theming/colors/javascript.md   |    12 +
 .../usage/v7/spinner/theming/colors/react.md  |    22 +
 static/usage/v7/spinner/theming/colors/vue.md |    23 +
 .../angular/example_component_css.md          |     5 +
 .../angular/example_component_html.md         |     3 +
 .../spinner/theming/css-properties/demo.html  |    30 +
 .../spinner/theming/css-properties/index.md   |    32 +
 .../theming/css-properties/javascript.md      |     9 +
 .../spinner/theming/css-properties/react.md   |    11 +
 .../theming/css-properties/react/main_css.md  |     5 +
 .../theming/css-properties/react/main_tsx.md  |    15 +
 .../v7/spinner/theming/css-properties/vue.md  |    20 +
 static/usage/v7/split-pane/basic/angular.md   |    25 +
 static/usage/v7/split-pane/basic/demo.html    |    42 +
 static/usage/v7/split-pane/basic/index.md     |    13 +
 .../usage/v7/split-pane/basic/javascript.md   |    25 +
 static/usage/v7/split-pane/basic/react.md     |    33 +
 static/usage/v7/split-pane/basic/vue.md       |    36 +
 .../angular/example_component_css.md          |     8 +
 .../angular/example_component_html.md         |    25 +
 .../theming/css-properties/demo.html          |    50 +
 .../theming/css-properties/index.md           |    33 +
 .../theming/css-properties/javascript.md      |    34 +
 .../theming/css-properties/react/main_css.md  |     8 +
 .../theming/css-properties/react/main_tsx.md  |    35 +
 .../split-pane/theming/css-properties/vue.md  |    45 +
 static/usage/v7/text/basic/angular.md         |    21 +
 static/usage/v7/text/basic/demo.html          |    61 +
 static/usage/v7/text/basic/index.md           |     8 +
 static/usage/v7/text/basic/javascript.md      |    21 +
 static/usage/v7/text/basic/react.md           |    32 +
 static/usage/v7/text/basic/vue.md             |    38 +
 static/usage/v7/textarea/autogrow/angular.md  |     7 +
 static/usage/v7/textarea/autogrow/demo.html   |    38 +
 static/usage/v7/textarea/autogrow/index.md    |    13 +
 .../usage/v7/textarea/autogrow/javascript.md  |     7 +
 static/usage/v7/textarea/autogrow/react.md    |    16 +
 static/usage/v7/textarea/autogrow/vue.md      |    18 +
 static/usage/v7/textarea/basic/angular.md     |    16 +
 static/usage/v7/textarea/basic/demo.html      |    43 +
 static/usage/v7/textarea/basic/index.md       |    13 +
 static/usage/v7/textarea/basic/javascript.md  |    16 +
 static/usage/v7/textarea/basic/react.md       |    23 +
 static/usage/v7/textarea/basic/vue.md         |    27 +
 .../v7/textarea/clear-on-edit/angular.md      |     6 +
 .../usage/v7/textarea/clear-on-edit/demo.html |    31 +
 .../usage/v7/textarea/clear-on-edit/index.md  |    13 +
 .../v7/textarea/clear-on-edit/javascript.md   |     6 +
 .../usage/v7/textarea/clear-on-edit/react.md  |    13 +
 static/usage/v7/textarea/clear-on-edit/vue.md |    17 +
 .../theming/angular/example_component_css.md  |    10 +
 .../theming/angular/example_component_html.md |     3 +
 static/usage/v7/textarea/theming/demo.html    |    38 +
 static/usage/v7/textarea/theming/index.md     |    33 +
 .../usage/v7/textarea/theming/javascript.md   |    14 +
 .../v7/textarea/theming/react/main_css.md     |    10 +
 .../v7/textarea/theming/react/main_tsx.md     |    11 +
 static/usage/v7/textarea/theming/vue.md       |    25 +
 static/usage/v7/thumbnail/basic/angular.md    |     5 +
 static/usage/v7/thumbnail/basic/demo.html     |    27 +
 static/usage/v7/thumbnail/basic/index.md      |     8 +
 static/usage/v7/thumbnail/basic/javascript.md |     5 +
 static/usage/v7/thumbnail/basic/react.md      |    15 +
 static/usage/v7/thumbnail/basic/vue.md        |    16 +
 static/usage/v7/thumbnail/item/angular.md     |     8 +
 static/usage/v7/thumbnail/item/demo.html      |    30 +
 static/usage/v7/thumbnail/item/index.md       |     8 +
 static/usage/v7/thumbnail/item/javascript.md  |     8 +
 static/usage/v7/thumbnail/item/react.md       |    18 +
 static/usage/v7/thumbnail/item/vue.md         |    19 +
 .../angular/example_component_css.md          |     7 +
 .../angular/example_component_html.md         |     6 +
 .../theming/css-properties/demo.html          |    33 +
 .../thumbnail/theming/css-properties/index.md |    33 +
 .../theming/css-properties/javascript.md      |    12 +
 .../theming/css-properties/react/main_css.md  |     6 +
 .../theming/css-properties/react/main_tsx.md  |    18 +
 .../thumbnail/theming/css-properties/vue.md   |    23 +
 static/usage/v7/title/basic/angular.md        |     7 +
 static/usage/v7/title/basic/demo.html         |    25 +
 static/usage/v7/title/basic/index.md          |    14 +
 static/usage/v7/title/basic/javascript.md     |     7 +
 static/usage/v7/title/basic/react.md          |    15 +
 static/usage/v7/title/basic/vue.md            |    18 +
 .../collapsible-large-title/basic/angular.md  |    39 +
 .../collapsible-large-title/basic/demo.html   |    59 +
 .../collapsible-large-title/basic/index.md    |    15 +
 .../basic/javascript.md                       |    39 +
 .../collapsible-large-title/basic/react.md    |    49 +
 .../collapsible-large-title/basic/vue.md      |    50 +
 .../buttons/angular.md                        |    45 +
 .../collapsible-large-title/buttons/demo.html |    65 +
 .../collapsible-large-title/buttons/index.md  |    15 +
 .../buttons/javascript.md                     |    45 +
 .../collapsible-large-title/buttons/react.md  |    55 +
 .../collapsible-large-title/buttons/vue.md    |    56 +
 .../angular/example_component_html.md         |    37 +
 .../css-properties/angular/global_css.md      |    14 +
 .../v7/title/theming/css-properties/demo.html |    69 +
 .../v7/title/theming/css-properties/index.md  |    34 +
 .../theming/css-properties/javascript.md      |    52 +
 .../theming/css-properties/react/main_css.md  |    14 +
 .../theming/css-properties/react/main_tsx.md  |    49 +
 .../v7/title/theming/css-properties/vue.md    |    62 +
 .../buttons/angular/example_component_html.md |     5 +
 .../buttons/angular/example_component_ts.md   |    39 +
 static/usage/v7/toast/buttons/demo.html       |    75 +
 static/usage/v7/toast/buttons/index.md        |    25 +
 static/usage/v7/toast/buttons/javascript.md   |    34 +
 static/usage/v7/toast/buttons/react.md        |    41 +
 static/usage/v7/toast/buttons/vue.md          |    46 +
 .../icon/angular/example_component_html.md    |     3 +
 .../icon/angular/example_component_ts.md      |    22 +
 static/usage/v7/toast/icon/demo.html          |    46 +
 static/usage/v7/toast/icon/index.md           |    25 +
 static/usage/v7/toast/icon/javascript.md      |    15 +
 static/usage/v7/toast/icon/react.md           |    24 +
 static/usage/v7/toast/icon/vue.md             |    28 +
 .../angular/example_component_html.md         |     5 +
 .../angular/example_component_ts.md           |    22 +
 .../v7/toast/presenting/controller/demo.html  |    54 +
 .../v7/toast/presenting/controller/index.md   |    25 +
 .../toast/presenting/controller/javascript.md |    17 +
 .../v7/toast/presenting/controller/react.md   |    25 +
 .../v7/toast/presenting/controller/vue.md     |    26 +
 .../theming/angular/example_component_html.md |     3 +
 .../theming/angular/example_component_ts.md   |    28 +
 .../v7/toast/theming/angular/global_css.md    |    17 +
 static/usage/v7/toast/theming/demo.html       |    70 +
 static/usage/v7/toast/theming/index.md        |    34 +
 static/usage/v7/toast/theming/javascript.md   |    39 +
 .../usage/v7/toast/theming/react/main_css.md  |    17 +
 .../usage/v7/toast/theming/react/main_tsx.md  |    31 +
 static/usage/v7/toast/theming/vue.md          |    48 +
 static/usage/v7/toggle/basic/angular.md       |    20 +
 static/usage/v7/toggle/basic/demo.html        |    47 +
 static/usage/v7/toggle/basic/index.md         |     8 +
 static/usage/v7/toggle/basic/javascript.md    |    20 +
 static/usage/v7/toggle/basic/react.md         |    28 +
 static/usage/v7/toggle/basic/vue.md           |    31 +
 static/usage/v7/toggle/on-off/angular.md      |     3 +
 static/usage/v7/toggle/on-off/demo.html       |    25 +
 static/usage/v7/toggle/on-off/index.md        |     8 +
 static/usage/v7/toggle/on-off/javascript.md   |     3 +
 static/usage/v7/toggle/on-off/react.md        |    11 +
 static/usage/v7/toggle/on-off/vue.md          |    14 +
 .../usage/v7/toggle/theming/colors/angular.md |    11 +
 .../usage/v7/toggle/theming/colors/demo.html  |    33 +
 .../usage/v7/toggle/theming/colors/index.md   |     8 +
 .../v7/toggle/theming/colors/javascript.md    |    11 +
 .../usage/v7/toggle/theming/colors/react.md   |    21 +
 static/usage/v7/toggle/theming/colors/vue.md  |    22 +
 .../angular/example_component_css.md          |    26 +
 .../angular/example_component_html.md         |     4 +
 .../toggle/theming/css-properties/demo.html   |    52 +
 .../v7/toggle/theming/css-properties/index.md |    32 +
 .../theming/css-properties/javascript.md      |    31 +
 .../theming/css-properties/react/main_css.md  |    26 +
 .../theming/css-properties/react/main_tsx.md  |    16 +
 .../v7/toggle/theming/css-properties/vue.md   |    42 +
 .../angular/example_component_css.md          |    33 +
 .../angular/example_component_html.md         |     4 +
 .../toggle/theming/css-shadow-parts/demo.html |    59 +
 .../toggle/theming/css-shadow-parts/index.md  |    32 +
 .../theming/css-shadow-parts/javascript.md    |    38 +
 .../css-shadow-parts/react/main_css.md        |    33 +
 .../css-shadow-parts/react/main_tsx.md        |    16 +
 .../v7/toggle/theming/css-shadow-parts/vue.md |    49 +
 static/usage/v7/toolbar/basic/angular.md      |    13 +
 static/usage/v7/toolbar/basic/demo.html       |    31 +
 static/usage/v7/toolbar/basic/index.md        |    14 +
 static/usage/v7/toolbar/basic/javascript.md   |    13 +
 static/usage/v7/toolbar/basic/react.md        |    23 +
 static/usage/v7/toolbar/basic/vue.md          |    24 +
 static/usage/v7/toolbar/buttons/angular.md    |    92 +
 static/usage/v7/toolbar/buttons/demo.html     |   120 +
 static/usage/v7/toolbar/buttons/index.md      |    13 +
 static/usage/v7/toolbar/buttons/javascript.md |    92 +
 static/usage/v7/toolbar/buttons/react.md      |   103 +
 static/usage/v7/toolbar/buttons/vue.md        |   107 +
 .../usage/v7/toolbar/progress-bars/angular.md |     8 +
 .../usage/v7/toolbar/progress-bars/demo.html  |    26 +
 .../usage/v7/toolbar/progress-bars/index.md   |    14 +
 .../v7/toolbar/progress-bars/javascript.md    |     8 +
 .../usage/v7/toolbar/progress-bars/react.md   |    16 +
 static/usage/v7/toolbar/progress-bars/vue.md  |    19 +
 static/usage/v7/toolbar/searchbars/angular.md |    10 +
 static/usage/v7/toolbar/searchbars/demo.html  |    28 +
 static/usage/v7/toolbar/searchbars/index.md   |    14 +
 .../usage/v7/toolbar/searchbars/javascript.md |    10 +
 static/usage/v7/toolbar/searchbars/react.md   |    18 +
 static/usage/v7/toolbar/searchbars/vue.md     |    21 +
 static/usage/v7/toolbar/segments/angular.md   |    14 +
 static/usage/v7/toolbar/segments/demo.html    |    32 +
 static/usage/v7/toolbar/segments/index.md     |    14 +
 .../usage/v7/toolbar/segments/javascript.md   |    14 +
 static/usage/v7/toolbar/segments/react.md     |    22 +
 static/usage/v7/toolbar/segments/vue.md       |    25 +
 .../v7/toolbar/theming/colors/angular.md      |    32 +
 .../usage/v7/toolbar/theming/colors/demo.html |    60 +
 .../usage/v7/toolbar/theming/colors/index.md  |    13 +
 .../v7/toolbar/theming/colors/javascript.md   |    32 +
 .../usage/v7/toolbar/theming/colors/react.md  |    42 +
 static/usage/v7/toolbar/theming/colors/vue.md |    43 +
 .../angular/example_component_css.md          |    14 +
 .../angular/example_component_html.md         |     5 +
 .../toolbar/theming/css-properties/demo.html  |    46 +
 .../toolbar/theming/css-properties/index.md   |    33 +
 .../theming/css-properties/javascript.md      |    20 +
 .../theming/css-properties/react/main_css.md  |    14 +
 .../theming/css-properties/react/main_tsx.md  |    15 +
 .../v7/toolbar/theming/css-properties/vue.md  |    31 +
 versioned_docs/version-v6/README.md           |    17 +
 versioned_docs/version-v6/angular/config.md   |   258 +
 .../version-v6/angular/lifecycle.md           |   101 +
 .../version-v6/angular/navigation.md          |   453 +
 versioned_docs/version-v6/angular/overview.md |    22 +
 .../version-v6/angular/performance.md         |    69 +
 versioned_docs/version-v6/angular/platform.md |   216 +
 versioned_docs/version-v6/angular/pwa.md      |   152 +
 versioned_docs/version-v6/angular/slides.md   |   441 +
 versioned_docs/version-v6/angular/storage.md  |    32 +
 versioned_docs/version-v6/angular/testing.md  |   595 +
 .../version-v6/angular/virtual-scroll.md      |   133 +
 .../version-v6/angular/your-first-app.md      |   176 +
 .../angular/your-first-app/2-taking-photos.md |   134 +
 .../angular/your-first-app/3-saving-photos.md |    81 +
 .../your-first-app/4-loading-photos.md        |    69 +
 .../angular/your-first-app/5-adding-mobile.md |   117 +
 .../your-first-app/6-deploying-mobile.md      |   114 +
 .../angular/your-first-app/7-live-reload.md   |   114 +
 .../angular/your-first-app/8-distribute.md    |   100 +
 versioned_docs/version-v6/api.md              |    17 +
 .../version-v6/api/accordion-group.md         |    59 +
 versioned_docs/version-v6/api/accordion.md    |   220 +
 versioned_docs/version-v6/api/action-sheet.md |   132 +
 versioned_docs/version-v6/api/alert.md        |   254 +
 versioned_docs/version-v6/api/app.md          |    47 +
 versioned_docs/version-v6/api/avatar.md       |    76 +
 versioned_docs/version-v6/api/back-button.md  |   371 +
 versioned_docs/version-v6/api/backdrop.md     |    58 +
 versioned_docs/version-v6/api/badge.md        |    68 +
 versioned_docs/version-v6/api/breadcrumb.md   |    60 +
 versioned_docs/version-v6/api/breadcrumbs.md  |   108 +
 versioned_docs/version-v6/api/button.md       |   106 +
 versioned_docs/version-v6/api/buttons.md      |    93 +
 versioned_docs/version-v6/api/card-content.md |    35 +
 versioned_docs/version-v6/api/card-header.md  |    37 +
 .../version-v6/api/card-subtitle.md           |    37 +
 versioned_docs/version-v6/api/card-title.md   |    42 +
 versioned_docs/version-v6/api/card.md         |    90 +
 versioned_docs/version-v6/api/checkbox.md     |    90 +
 versioned_docs/version-v6/api/chip.md         |    74 +
 versioned_docs/version-v6/api/col.md          |    49 +
 versioned_docs/version-v6/api/content.md      |   158 +
 .../version-v6/api/datetime-button.md         |    82 +
 versioned_docs/version-v6/api/datetime.md     |   437 +
 versioned_docs/version-v6/api/fab-button.md   |    43 +
 versioned_docs/version-v6/api/fab-list.md     |    35 +
 versioned_docs/version-v6/api/fab.md          |    98 +
 versioned_docs/version-v6/api/footer.md       |    84 +
 versioned_docs/version-v6/api/grid.md         |   217 +
 versioned_docs/version-v6/api/header.md       |    94 +
 versioned_docs/version-v6/api/img.md          |    54 +
 .../version-v6/api/infinite-scroll-content.md |    34 +
 .../version-v6/api/infinite-scroll.md         |   119 +
 versioned_docs/version-v6/api/input.md        |   143 +
 versioned_docs/version-v6/api/item-divider.md |    68 +
 versioned_docs/version-v6/api/item-group.md   |    58 +
 versioned_docs/version-v6/api/item-option.md  |    42 +
 versioned_docs/version-v6/api/item-options.md |    50 +
 versioned_docs/version-v6/api/item-sliding.md |    82 +
 versioned_docs/version-v6/api/item.md         |   168 +
 versioned_docs/version-v6/api/label.md        |    74 +
 versioned_docs/version-v6/api/list-header.md  |    76 +
 versioned_docs/version-v6/api/list.md         |    71 +
 versioned_docs/version-v6/api/loading.md      |   179 +
 versioned_docs/version-v6/api/menu-button.md  |    42 +
 versioned_docs/version-v6/api/menu-toggle.md  |    44 +
 versioned_docs/version-v6/api/menu.md         |    96 +
 versioned_docs/version-v6/api/modal.md        |   292 +
 versioned_docs/version-v6/api/nav-link.md     |    42 +
 versioned_docs/version-v6/api/nav.md          |    70 +
 versioned_docs/version-v6/api/note.md         |    74 +
 versioned_docs/version-v6/api/picker.md       |   327 +
 versioned_docs/version-v6/api/popover.md      |   262 +
 versioned_docs/version-v6/api/progress-bar.md |   100 +
 versioned_docs/version-v6/api/radio-group.md  |    60 +
 versioned_docs/version-v6/api/radio.md        |    84 +
 versioned_docs/version-v6/api/range.md        |   173 +
 .../version-v6/api/refresher-content.md       |    35 +
 versioned_docs/version-v6/api/refresher.md    |   123 +
 .../version-v6/api/reorder-group.md           |    64 +
 versioned_docs/version-v6/api/reorder.md      |   100 +
 .../version-v6/api/ripple-effect.md           |    72 +
 .../version-v6/api/route-redirect.md          |   125 +
 versioned_docs/version-v6/api/route.md        |   280 +
 versioned_docs/version-v6/api/router-link.md  |    59 +
 .../version-v6/api/router-outlet.md           |    69 +
 versioned_docs/version-v6/api/router.md       |   119 +
 versioned_docs/version-v6/api/row.md          |    49 +
 versioned_docs/version-v6/api/searchbar.md    |   143 +
 .../version-v6/api/segment-button.md          |    76 +
 versioned_docs/version-v6/api/segment.md      |   123 +
 .../version-v6/api/select-option.md           |    42 +
 versioned_docs/version-v6/api/select.md       |   179 +
 .../version-v6/api/skeleton-text.md           |    62 +
 versioned_docs/version-v6/api/spinner.md      |    70 +
 versioned_docs/version-v6/api/split-pane.md   |    89 +
 versioned_docs/version-v6/api/tab-bar.md      |   217 +
 versioned_docs/version-v6/api/tab-button.md   |   305 +
 versioned_docs/version-v6/api/tab.md          |    59 +
 versioned_docs/version-v6/api/tabs.md         |   500 +
 versioned_docs/version-v6/api/text.md         |    58 +
 versioned_docs/version-v6/api/textarea.md     |   101 +
 versioned_docs/version-v6/api/thumbnail.md    |    70 +
 versioned_docs/version-v6/api/title.md        |    92 +
 versioned_docs/version-v6/api/toast.md        |   202 +
 versioned_docs/version-v6/api/toggle.md       |   108 +
 versioned_docs/version-v6/api/toolbar.md      |   110 +
 versioned_docs/version-v6/cli.md              |    54 +
 .../version-v6/cli/commands/.gitignore        |     2 +
 .../version-v6/cli/configuration.md           |   243 +
 versioned_docs/version-v6/cli/livereload.md   |    66 +
 .../version-v6/cli/using-a-proxy.md           |    45 +
 versioned_docs/version-v6/components.md       |   156 +
 versioned_docs/version-v6/contributing/coc.md |    11 +
 .../contributing/how-to-contribute.md         |   252 +
 .../core-concepts/cross-platform.md           |   180 +
 .../version-v6/core-concepts/fundamentals.md  |    47 +
 .../version-v6/core-concepts/webview.md       |    50 +
 .../what-are-progressive-web-apps.md          |    68 +
 .../version-v6/deployment/app-store.md        |    74 +
 .../version-v6/deployment/desktop-app.md      |    48 +
 .../version-v6/deployment/play-store.mdx      |   167 +
 .../deployment/progressive-web-app.md         |    25 +
 .../version-v6/developer-resources/books.md   |    53 +
 .../version-v6/developer-resources/courses.md |    83 +
 .../version-v6/developer-resources/guides.md  |     9 +
 .../creating-photo-gallery-device-storage.md  |   195 +
 .../guides/first-app-v3/intro.md              |   117 +
 .../guides/first-app-v3/ios-android-camera.md |   156 +
 .../realtime-updates-ionic-deploy.md          |   193 +
 .../guides/first-app-v3/theming.md            |    47 +
 .../track-bugs-ionic-monitoring.md            |    92 +
 .../creating-photo-gallery-device-storage.md  |   202 +
 .../guides/first-app-v4/intro.md              |    97 +
 .../guides/first-app-v4/ios-android-camera.md |   154 +
 .../guides/first-app-v4/theming.md            |    56 +
 .../version-v6/developer-resources/posts.md   |    77 +
 .../version-v6/developer-resources/tools.md   |    21 +
 .../version-v6/developer-resources/videos.md  |    21 +
 .../version-v6/developing/android.md          |   222 +
 .../developing/hardware-back-button.md        |   345 +
 versioned_docs/version-v6/developing/ios.md   |   184 +
 .../version-v6/developing/keyboard.md         |   272 +
 .../version-v6/developing/previewing.md       |    82 +
 .../version-v6/developing/scaffolding.md      |    91 +
 .../version-v6/developing/starting.md         |    48 +
 versioned_docs/version-v6/developing/tips.md  |   152 +
 versioned_docs/version-v6/index.md            |   159 +
 versioned_docs/version-v6/intro/cdn.md        |   166 +
 versioned_docs/version-v6/intro/cli.md        |    64 +
 .../version-v6/intro/environment.md           |    67 +
 versioned_docs/version-v6/intro/first-app.md  |    24 +
 versioned_docs/version-v6/intro/next.md       |    32 +
 .../version-v6/intro/upgrading-to-ionic-6.md  |   461 +
 .../version-v6/intro/vscode-extension.md      |    39 +
 .../version-v6/layout/css-utilities.md        |   534 +
 .../version-v6/layout/global-stylesheets.md   |    73 +
 versioned_docs/version-v6/layout/structure.md |   236 +
 versioned_docs/version-v6/native-community.md |   200 +
 versioned_docs/version-v6/native-faq.md       |    85 +
 versioned_docs/version-v6/native.md           |    53 +
 versioned_docs/version-v6/native/.gitignore   |     2 +
 versioned_docs/version-v6/react.md            |   147 +
 versioned_docs/version-v6/react/config.md     |   116 +
 versioned_docs/version-v6/react/lifecycle.md  |   145 +
 versioned_docs/version-v6/react/navigation.md |   600 +
 versioned_docs/version-v6/react/overlays.md   |    91 +
 versioned_docs/version-v6/react/overview.md   |    45 +
 .../version-v6/react/performance.md           |    47 +
 versioned_docs/version-v6/react/platform.md   |    83 +
 versioned_docs/version-v6/react/pwa.md        |   125 +
 versioned_docs/version-v6/react/quickstart.md |   452 +
 versioned_docs/version-v6/react/slides.md     |   583 +
 versioned_docs/version-v6/react/storage.md    |    25 +
 versioned_docs/version-v6/react/testing.md    |     7 +
 .../version-v6/react/virtual-scroll.md        |    76 +
 .../version-v6/react/your-first-app.md        |   204 +
 .../react/your-first-app/2-taking-photos.md   |   146 +
 .../react/your-first-app/3-saving-photos.md   |    81 +
 .../react/your-first-app/4-loading-photos.md  |    65 +
 .../react/your-first-app/5-adding-mobile.md   |    73 +
 .../your-first-app/6-deploying-mobile.md      |   107 +
 .../react/your-first-app/7-live-reload.md     |   120 +
 .../react/your-first-app/8-distribute.md      |   100 +
 .../version-v6/reference/browser-support.md   |    50 +
 .../version-v6/reference/glossary.md          |   552 +
 .../version-v6/reference/migration.md         |   322 +
 .../version-v6/reference/release-notes.md     |     7 +
 .../version-v6/reference/support.md           |   115 +
 .../version-v6/reference/versioning.md        |    24 +
 versioned_docs/version-v6/studio.md           |    31 +
 versioned_docs/version-v6/studio/assets.md    |    17 +
 versioned_docs/version-v6/studio/code.md      |    40 +
 versioned_docs/version-v6/studio/designer.md  |   179 +
 versioned_docs/version-v6/studio/faq.md       |    23 +
 .../studio/guides/routing-and-navigation.md   |    29 +
 .../guides/using-native-functionality.md      |    17 +
 versioned_docs/version-v6/studio/running.md   |    66 +
 versioned_docs/version-v6/studio/settings.md  |    68 +
 .../version-v6/studio/setup/installation.md   |    17 +
 .../version-v6/studio/setup/native.md         |    13 +
 versioned_docs/version-v6/studio/start.md     |    13 +
 versioned_docs/version-v6/studio/support.md   |    15 +
 versioned_docs/version-v6/studio/terminal.md  |    36 +
 versioned_docs/version-v6/studio/theming.md   |    15 +
 .../version-v6/techniques/security.md         |   154 +
 versioned_docs/version-v6/test/page1.md       |     3 +
 versioned_docs/version-v6/test/page2.md       |     3 +
 versioned_docs/version-v6/theming/advanced.md |   182 +
 versioned_docs/version-v6/theming/basics.md   |    42 +
 .../version-v6/theming/color-generator.md     |    19 +
 versioned_docs/version-v6/theming/colors.md   |   116 +
 .../version-v6/theming/css-shadow-parts.md    |   161 +
 .../version-v6/theming/css-variables.md       |    98 +
 .../version-v6/theming/dark-mode.md           |   327 +
 .../version-v6/theming/platform-styles.md     |    51 +
 versioned_docs/version-v6/theming/themes.md   |    67 +
 .../version-v6/troubleshooting/build.md       |   208 +
 .../version-v6/troubleshooting/cors.md        |   300 +
 .../version-v6/troubleshooting/debugging.md   |   100 +
 .../version-v6/troubleshooting/native.md      |   102 +
 .../version-v6/troubleshooting/runtime.md     |   209 +
 .../version-v6/utilities/animations.md        |  1624 +
 .../version-v6/utilities/gestures.md          |   517 +
 versioned_docs/version-v6/vue/config.md       |   117 +
 versioned_docs/version-v6/vue/lifecycle.md    |   105 +
 versioned_docs/version-v6/vue/navigation.md   |   672 +
 versioned_docs/version-v6/vue/overview.md     |    61 +
 versioned_docs/version-v6/vue/performance.md  |    50 +
 versioned_docs/version-v6/vue/platform.md     |    87 +
 versioned_docs/version-v6/vue/pwa.md          |   214 +
 versioned_docs/version-v6/vue/quickstart.md   |   852 +
 versioned_docs/version-v6/vue/slides.md       |   562 +
 versioned_docs/version-v6/vue/storage.md      |    32 +
 versioned_docs/version-v6/vue/testing.md      |     3 +
 .../version-v6/vue/troubleshooting.md         |   134 +
 .../version-v6/vue/utility-functions.md       |   184 +
 .../version-v6/vue/virtual-scroll.md          |   143 +
 .../version-v6/vue/your-first-app.md          |   261 +
 .../vue/your-first-app/2-taking-photos.md     |   169 +
 .../vue/your-first-app/3-saving-photos.md     |    72 +
 .../vue/your-first-app/4-loading-photos.md    |    69 +
 .../vue/your-first-app/5-adding-mobile.md     |    79 +
 .../vue/your-first-app/6-deploying-mobile.md  |   118 +
 .../vue/your-first-app/7-live-reload.md       |   149 +
 .../vue/your-first-app/8-distribute.md        |   100 +
 versioned_sidebars/version-v6-sidebars.json   |  1364 +
 versions.json                                 |     5 +-
 5128 files changed, 152569 insertions(+), 21761 deletions(-)
 rename static/code/stackblitz/{ => v6}/angular/angular.json (100%)
 rename static/code/stackblitz/{ => v6}/angular/app.component.css (100%)
 rename static/code/stackblitz/{ => v6}/angular/app.component.html (100%)
 rename static/code/stackblitz/{ => v6}/angular/app.component.ts (100%)
 rename static/code/stackblitz/{ => v6}/angular/app.component.withContent.html (100%)
 rename static/code/stackblitz/{ => v6}/angular/app.module.ts (100%)
 rename static/code/stackblitz/{ => v6}/angular/example.component.ts (100%)
 rename static/code/stackblitz/{ => v6}/angular/global.css (100%)
 rename static/code/stackblitz/{ => v6}/angular/main.ts (100%)
 create mode 100644 static/code/stackblitz/v6/angular/package.json
 rename static/code/stackblitz/{ => v6}/angular/styles.css (100%)
 rename static/code/stackblitz/{ => v6}/angular/tsconfig.json (100%)
 rename static/code/stackblitz/{ => v6}/angular/variables.css (100%)
 rename static/code/stackblitz/{ => v6}/html/index.html (100%)
 rename static/code/stackblitz/{ => v6}/html/index.ts (100%)
 rename static/code/stackblitz/{ => v6}/html/index.withContent.html (100%)
 create mode 100644 static/code/stackblitz/v6/html/package.json
 rename static/code/stackblitz/{ => v6}/html/variables.css (100%)
 rename static/code/stackblitz/{ => v6}/react/app.tsx (100%)
 rename static/code/stackblitz/{ => v6}/react/app.withContent.tsx (100%)
 rename static/code/stackblitz/{ => v6}/react/index.html (100%)
 rename static/code/stackblitz/{ => v6}/react/index.tsx (100%)
 rename static/code/stackblitz/{ => v6}/react/package-lock.json (100%)
 rename static/code/stackblitz/{ => v6}/react/package.json (100%)
 rename static/code/stackblitz/{ => v6}/react/tsconfig.json (100%)
 rename static/code/stackblitz/{ => v6}/react/variables.css (100%)
 rename static/code/stackblitz/{ => v6}/vue/App.vue (100%)
 rename static/code/stackblitz/{ => v6}/vue/App.withContent.vue (100%)
 rename static/code/stackblitz/{ => v6}/vue/env.d.ts (100%)
 rename static/code/stackblitz/{ => v6}/vue/index.html (100%)
 rename static/code/stackblitz/{ => v6}/vue/main.ts (100%)
 rename static/code/stackblitz/{ => v6}/vue/package-lock.json (100%)
 rename static/code/stackblitz/{ => v6}/vue/package.json (100%)
 rename static/code/stackblitz/{ => v6}/vue/tsconfig.json (100%)
 rename static/code/stackblitz/{ => v6}/vue/tsconfig.node.json (100%)
 rename static/code/stackblitz/{ => v6}/vue/variables.css (100%)
 rename static/code/stackblitz/{ => v6}/vue/vite.config.ts (100%)
 create mode 100644 static/code/stackblitz/v7/angular/angular.json
 create mode 100644 static/code/stackblitz/v7/angular/app.component.css
 create mode 100644 static/code/stackblitz/v7/angular/app.component.html
 create mode 100644 static/code/stackblitz/v7/angular/app.component.ts
 create mode 100644 static/code/stackblitz/v7/angular/app.component.withContent.html
 create mode 100644 static/code/stackblitz/v7/angular/app.module.ts
 create mode 100644 static/code/stackblitz/v7/angular/example.component.ts
 create mode 100644 static/code/stackblitz/v7/angular/global.css
 create mode 100644 static/code/stackblitz/v7/angular/main.ts
 create mode 100644 static/code/stackblitz/v7/angular/package.json
 create mode 100644 static/code/stackblitz/v7/angular/styles.css
 create mode 100644 static/code/stackblitz/v7/angular/tsconfig.json
 create mode 100644 static/code/stackblitz/v7/angular/variables.css
 create mode 100644 static/code/stackblitz/v7/html/index.html
 create mode 100644 static/code/stackblitz/v7/html/index.ts
 create mode 100644 static/code/stackblitz/v7/html/index.withContent.html
 create mode 100644 static/code/stackblitz/v7/html/package.json
 create mode 100644 static/code/stackblitz/v7/html/variables.css
 create mode 100644 static/code/stackblitz/v7/react/app.tsx
 create mode 100644 static/code/stackblitz/v7/react/app.withContent.tsx
 create mode 100644 static/code/stackblitz/v7/react/index.html
 create mode 100644 static/code/stackblitz/v7/react/index.tsx
 create mode 100644 static/code/stackblitz/v7/react/package-lock.json
 create mode 100644 static/code/stackblitz/v7/react/package.json
 create mode 100644 static/code/stackblitz/v7/react/tsconfig.json
 create mode 100644 static/code/stackblitz/v7/react/variables.css
 create mode 100644 static/code/stackblitz/v7/vue/App.vue
 create mode 100644 static/code/stackblitz/v7/vue/App.withContent.vue
 create mode 100644 static/code/stackblitz/v7/vue/env.d.ts
 create mode 100644 static/code/stackblitz/v7/vue/index.html
 create mode 100644 static/code/stackblitz/v7/vue/main.ts
 create mode 100644 static/code/stackblitz/v7/vue/package-lock.json
 create mode 100644 static/code/stackblitz/v7/vue/package.json
 create mode 100644 static/code/stackblitz/v7/vue/tsconfig.json
 create mode 100644 static/code/stackblitz/v7/vue/tsconfig.node.json
 create mode 100644 static/code/stackblitz/v7/vue/variables.css
 create mode 100644 static/code/stackblitz/v7/vue/vite.config.ts
 delete mode 100644 static/usage/accordion/accessibility/animations/demo.html
 delete mode 100644 static/usage/accordion/accessibility/animations/index.md
 delete mode 100644 static/usage/accordion/basic/demo.html
 delete mode 100644 static/usage/accordion/basic/index.md
 delete mode 100644 static/usage/accordion/customization/advanced-expansion-styles/demo.html
 delete mode 100644 static/usage/accordion/customization/advanced-expansion-styles/index.md
 delete mode 100644 static/usage/accordion/customization/expansion-styles/demo.html
 delete mode 100644 static/usage/accordion/customization/expansion-styles/index.md
 delete mode 100644 static/usage/accordion/customization/icons/demo.html
 delete mode 100644 static/usage/accordion/customization/icons/index.md
 delete mode 100644 static/usage/accordion/customization/theming/demo.html
 delete mode 100644 static/usage/accordion/customization/theming/index.md
 delete mode 100644 static/usage/accordion/disable-group/demo.html
 delete mode 100644 static/usage/accordion/disable-group/index.md
 delete mode 100644 static/usage/accordion/disable/group/demo.html
 delete mode 100644 static/usage/accordion/disable/group/index.md
 delete mode 100644 static/usage/accordion/disable/individual/demo.html
 delete mode 100644 static/usage/accordion/disable/individual/index.md
 delete mode 100644 static/usage/accordion/listen-changes/demo.html
 delete mode 100644 static/usage/accordion/listen-changes/index.md
 delete mode 100644 static/usage/accordion/multiple/demo.html
 delete mode 100644 static/usage/accordion/multiple/index.md
 delete mode 100644 static/usage/accordion/readonly/group/demo.html
 delete mode 100644 static/usage/accordion/readonly/group/index.md
 delete mode 100644 static/usage/accordion/readonly/individual/demo.html
 delete mode 100644 static/usage/accordion/readonly/individual/index.md
 delete mode 100644 static/usage/accordion/toggle/demo.html
 delete mode 100644 static/usage/accordion/toggle/index.md
 delete mode 100644 static/usage/action-sheet/basic/demo.html
 delete mode 100644 static/usage/action-sheet/basic/index.md
 delete mode 100644 static/usage/action-sheet/theming/css-properties/demo.html
 delete mode 100644 static/usage/action-sheet/theming/css-properties/index.md
 delete mode 100644 static/usage/action-sheet/theming/styling/demo.html
 delete mode 100644 static/usage/action-sheet/theming/styling/index.md
 delete mode 100644 static/usage/alert/buttons/demo.html
 delete mode 100644 static/usage/alert/buttons/index.md
 delete mode 100644 static/usage/alert/customization/demo.html
 delete mode 100644 static/usage/alert/customization/index.md
 delete mode 100644 static/usage/alert/inputs/radios/demo.html
 delete mode 100644 static/usage/alert/inputs/radios/index.md
 delete mode 100644 static/usage/alert/inputs/text-inputs/demo.html
 delete mode 100644 static/usage/alert/inputs/text-inputs/index.md
 delete mode 100644 static/usage/alert/presenting/controller/demo.html
 delete mode 100644 static/usage/alert/presenting/controller/index.md
 delete mode 100644 static/usage/avatar/basic/demo.html
 delete mode 100644 static/usage/avatar/basic/index.md
 delete mode 100644 static/usage/avatar/chip/demo.html
 delete mode 100644 static/usage/avatar/chip/index.md
 delete mode 100644 static/usage/avatar/item/demo.html
 delete mode 100644 static/usage/avatar/item/index.md
 delete mode 100644 static/usage/avatar/theming/css-properties/demo.html
 delete mode 100644 static/usage/avatar/theming/css-properties/index.md
 delete mode 100644 static/usage/backdrop/basic/demo.html
 delete mode 100644 static/usage/backdrop/basic/index.md
 delete mode 100644 static/usage/backdrop/styling/demo.html
 delete mode 100644 static/usage/backdrop/styling/index.md
 delete mode 100644 static/usage/badge/basic/demo.html
 delete mode 100644 static/usage/badge/basic/index.md
 delete mode 100644 static/usage/badge/theming/colors/demo.html
 delete mode 100644 static/usage/badge/theming/colors/index.md
 delete mode 100644 static/usage/badge/theming/css-properties/demo.html
 delete mode 100644 static/usage/badge/theming/css-properties/index.md
 delete mode 100644 static/usage/breadcrumbs/basic/demo.html
 delete mode 100644 static/usage/breadcrumbs/basic/index.md
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/expand-on-click/demo.html
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/items-before-after/demo.html
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/items-before-after/index.md
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/max-items/demo.html
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/max-items/index.md
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/popover-on-click/demo.html
 delete mode 100644 static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md
 delete mode 100644 static/usage/breadcrumbs/icons/custom-separators/demo.html
 delete mode 100644 static/usage/breadcrumbs/icons/custom-separators/index.md
 delete mode 100644 static/usage/breadcrumbs/icons/icons-on-items/demo.html
 delete mode 100644 static/usage/breadcrumbs/icons/icons-on-items/index.md
 delete mode 100644 static/usage/breadcrumbs/theming/colors/demo.html
 delete mode 100644 static/usage/breadcrumbs/theming/colors/index.md
 delete mode 100644 static/usage/breadcrumbs/theming/css-properties/demo.html
 delete mode 100644 static/usage/breadcrumbs/theming/css-properties/index.md
 delete mode 100644 static/usage/button/basic/demo.html
 delete mode 100644 static/usage/button/basic/index.md
 delete mode 100644 static/usage/button/expand/demo.html
 delete mode 100644 static/usage/button/expand/index.md
 delete mode 100644 static/usage/button/fill/demo.html
 delete mode 100644 static/usage/button/fill/index.md
 delete mode 100644 static/usage/button/icons/demo.html
 delete mode 100644 static/usage/button/icons/index.md
 delete mode 100644 static/usage/button/shape/demo.html
 delete mode 100644 static/usage/button/shape/index.md
 delete mode 100644 static/usage/button/size/demo.html
 delete mode 100644 static/usage/button/size/index.md
 delete mode 100644 static/usage/button/theming/colors/demo.html
 delete mode 100644 static/usage/button/theming/colors/index.md
 delete mode 100644 static/usage/button/theming/css-properties/demo.html
 delete mode 100644 static/usage/button/theming/css-properties/index.md
 delete mode 100644 static/usage/buttons/basic/demo.html
 delete mode 100644 static/usage/buttons/basic/index.md
 delete mode 100644 static/usage/buttons/placement/demo.html
 delete mode 100644 static/usage/buttons/placement/index.md
 delete mode 100644 static/usage/buttons/types/demo.html
 delete mode 100644 static/usage/buttons/types/index.md
 delete mode 100644 static/usage/card/basic/demo.html
 delete mode 100644 static/usage/card/basic/index.md
 delete mode 100644 static/usage/card/buttons/demo.html
 delete mode 100644 static/usage/card/buttons/index.md
 delete mode 100644 static/usage/card/list/demo.html
 delete mode 100644 static/usage/card/list/index.md
 delete mode 100644 static/usage/card/media/demo.html
 delete mode 100644 static/usage/card/media/index.md
 delete mode 100644 static/usage/card/theming/colors/demo.html
 delete mode 100644 static/usage/card/theming/colors/index.md
 delete mode 100644 static/usage/card/theming/css-properties/demo.html
 delete mode 100644 static/usage/card/theming/css-properties/index.md
 delete mode 100644 static/usage/checkbox/basic/demo.html
 delete mode 100644 static/usage/checkbox/basic/index.md
 delete mode 100644 static/usage/checkbox/indeterminate/demo.html
 delete mode 100644 static/usage/checkbox/indeterminate/index.md
 delete mode 100644 static/usage/checkbox/theming/css-properties/demo.html
 delete mode 100644 static/usage/checkbox/theming/css-properties/index.md
 delete mode 100644 static/usage/chip/basic/demo.html
 delete mode 100644 static/usage/chip/basic/index.md
 delete mode 100644 static/usage/chip/slots/demo.html
 delete mode 100644 static/usage/chip/slots/index.md
 delete mode 100644 static/usage/chip/theming/colors/demo.html
 delete mode 100644 static/usage/chip/theming/colors/index.md
 delete mode 100644 static/usage/chip/theming/css-properties/demo.html
 delete mode 100644 static/usage/chip/theming/css-properties/index.md
 delete mode 100644 static/usage/content/basic/demo.html
 delete mode 100644 static/usage/content/basic/index.md
 delete mode 100644 static/usage/content/fixed/demo.html
 delete mode 100644 static/usage/content/fixed/index.md
 delete mode 100644 static/usage/content/fullscreen/demo.html
 delete mode 100644 static/usage/content/fullscreen/index.md
 delete mode 100644 static/usage/content/header-footer/demo.html
 delete mode 100644 static/usage/content/header-footer/index.md
 delete mode 100644 static/usage/content/scroll-events/demo.html
 delete mode 100644 static/usage/content/scroll-events/index.md
 delete mode 100644 static/usage/content/scroll-methods/demo.html
 delete mode 100644 static/usage/content/scroll-methods/index.md
 delete mode 100644 static/usage/content/theming/colors/demo.html
 delete mode 100644 static/usage/content/theming/colors/index.md
 delete mode 100644 static/usage/content/theming/css-properties/demo.html
 delete mode 100644 static/usage/content/theming/css-properties/index.md
 delete mode 100644 static/usage/content/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/content/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/datetime-button/basic/demo.html
 delete mode 100644 static/usage/datetime-button/basic/index.md
 delete mode 100644 static/usage/datetime/basic/demo.html
 delete mode 100644 static/usage/datetime/basic/index.md
 delete mode 100644 static/usage/datetime/buttons/customizing-button-texts/demo.html
 delete mode 100644 static/usage/datetime/buttons/customizing-button-texts/index.md
 delete mode 100644 static/usage/datetime/buttons/customizing-buttons/demo.html
 delete mode 100644 static/usage/datetime/buttons/customizing-buttons/index.md
 delete mode 100644 static/usage/datetime/buttons/showing-confirmation-buttons/demo.html
 delete mode 100644 static/usage/datetime/buttons/showing-confirmation-buttons/index.md
 delete mode 100644 static/usage/datetime/date-constraints/advanced/demo.html
 delete mode 100644 static/usage/datetime/date-constraints/advanced/index.md
 delete mode 100644 static/usage/datetime/date-constraints/max-min/demo.html
 delete mode 100644 static/usage/datetime/date-constraints/max-min/index.md
 delete mode 100644 static/usage/datetime/date-constraints/values/demo.html
 delete mode 100644 static/usage/datetime/date-constraints/values/index.md
 delete mode 100644 static/usage/datetime/localization/custom-locale/demo.html
 delete mode 100644 static/usage/datetime/localization/custom-locale/index.md
 delete mode 100644 static/usage/datetime/localization/first-day-of-week/demo.html
 delete mode 100644 static/usage/datetime/localization/first-day-of-week/index.md
 delete mode 100644 static/usage/datetime/localization/hour-cycle/demo.html
 delete mode 100644 static/usage/datetime/localization/hour-cycle/index.md
 delete mode 100644 static/usage/datetime/localization/locale-extension-tags/demo.html
 delete mode 100644 static/usage/datetime/localization/locale-extension-tags/index.md
 delete mode 100644 static/usage/datetime/localization/time-label/demo.html
 delete mode 100644 static/usage/datetime/localization/time-label/index.md
 delete mode 100644 static/usage/datetime/multiple/demo.html
 delete mode 100644 static/usage/datetime/multiple/index.md
 delete mode 100644 static/usage/datetime/presentation/date/demo.html
 delete mode 100644 static/usage/datetime/presentation/date/index.md
 delete mode 100644 static/usage/datetime/presentation/month-and-year/demo.html
 delete mode 100644 static/usage/datetime/presentation/month-and-year/index.md
 delete mode 100644 static/usage/datetime/presentation/time/demo.html
 delete mode 100644 static/usage/datetime/presentation/time/index.md
 delete mode 100644 static/usage/datetime/presentation/wheel/demo.html
 delete mode 100644 static/usage/datetime/presentation/wheel/index.md
 delete mode 100644 static/usage/datetime/theming/demo.html
 delete mode 100644 static/usage/datetime/theming/index.md
 delete mode 100644 static/usage/datetime/title/customizing-title/demo.html
 delete mode 100644 static/usage/datetime/title/customizing-title/index.md
 delete mode 100644 static/usage/datetime/title/showing-default-title/demo.html
 delete mode 100644 static/usage/datetime/title/showing-default-title/index.md
 delete mode 100644 static/usage/fab/basic/demo.html
 delete mode 100644 static/usage/fab/basic/index.md
 delete mode 100644 static/usage/fab/button-sizing/demo.html
 delete mode 100644 static/usage/fab/button-sizing/index.md
 delete mode 100644 static/usage/fab/list-side/demo.html
 delete mode 100644 static/usage/fab/list-side/index.md
 delete mode 100644 static/usage/fab/positioning/demo.html
 delete mode 100644 static/usage/fab/positioning/index.md
 delete mode 100644 static/usage/fab/theming/colors/demo.html
 delete mode 100644 static/usage/fab/theming/colors/index.md
 delete mode 100644 static/usage/fab/theming/css-custom-properties/demo.html
 delete mode 100644 static/usage/fab/theming/css-custom-properties/index.md
 delete mode 100644 static/usage/fab/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/fab/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/footer/basic/demo.html
 delete mode 100644 static/usage/footer/basic/index.md
 delete mode 100644 static/usage/footer/custom-scroll-target/demo.html
 delete mode 100644 static/usage/footer/custom-scroll-target/index.md
 delete mode 100644 static/usage/footer/fade/demo.html
 delete mode 100644 static/usage/footer/fade/index.md
 delete mode 100644 static/usage/footer/no-border/demo.html
 delete mode 100644 static/usage/footer/no-border/index.md
 delete mode 100644 static/usage/footer/translucent/demo.html
 delete mode 100644 static/usage/footer/translucent/index.md
 delete mode 100644 static/usage/grid/basic/demo.html
 delete mode 100644 static/usage/grid/basic/index.md
 delete mode 100644 static/usage/grid/customizing/column-number/demo.html
 delete mode 100644 static/usage/grid/customizing/column-number/index.md
 delete mode 100644 static/usage/grid/customizing/padding/demo.html
 delete mode 100644 static/usage/grid/customizing/padding/index.md
 delete mode 100644 static/usage/grid/customizing/width/demo.html
 delete mode 100644 static/usage/grid/customizing/width/index.md
 delete mode 100644 static/usage/grid/fixed/demo.html
 delete mode 100644 static/usage/grid/fixed/index.md
 delete mode 100644 static/usage/grid/horizontal-alignment/demo.html
 delete mode 100644 static/usage/grid/horizontal-alignment/index.md
 delete mode 100644 static/usage/grid/offset-responsive/demo.html
 delete mode 100644 static/usage/grid/offset-responsive/index.md
 delete mode 100644 static/usage/grid/offset/demo.html
 delete mode 100644 static/usage/grid/offset/index.md
 delete mode 100644 static/usage/grid/push-pull-responsive/demo.html
 delete mode 100644 static/usage/grid/push-pull-responsive/index.md
 delete mode 100644 static/usage/grid/push-pull/demo.html
 delete mode 100644 static/usage/grid/push-pull/index.md
 delete mode 100644 static/usage/grid/size-auto/demo.html
 delete mode 100644 static/usage/grid/size-auto/index.md
 delete mode 100644 static/usage/grid/size-responsive/demo.html
 delete mode 100644 static/usage/grid/size-responsive/index.md
 delete mode 100644 static/usage/grid/size/demo.html
 delete mode 100644 static/usage/grid/size/index.md
 delete mode 100644 static/usage/grid/vertical-alignment/demo.html
 delete mode 100644 static/usage/grid/vertical-alignment/index.md
 delete mode 100644 static/usage/header/basic/demo.html
 delete mode 100644 static/usage/header/basic/index.md
 delete mode 100644 static/usage/header/condense/demo.html
 delete mode 100644 static/usage/header/condense/index.md
 delete mode 100644 static/usage/header/custom-scroll-target/demo.html
 delete mode 100644 static/usage/header/custom-scroll-target/index.md
 delete mode 100644 static/usage/header/fade/demo.html
 delete mode 100644 static/usage/header/fade/index.md
 delete mode 100644 static/usage/header/no-border/demo.html
 delete mode 100644 static/usage/header/no-border/index.md
 delete mode 100644 static/usage/header/translucent/demo.html
 delete mode 100644 static/usage/header/translucent/index.md
 delete mode 100644 static/usage/img/basic/demo.html
 delete mode 100644 static/usage/img/basic/index.md
 delete mode 100644 static/usage/infinite-scroll/basic/demo.html
 delete mode 100644 static/usage/infinite-scroll/basic/index.md
 delete mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/demo.html
 delete mode 100644 static/usage/infinite-scroll/custom-infinite-scroll-content/index.md
 delete mode 100644 static/usage/infinite-scroll/infinite-scroll-content/demo.html
 delete mode 100644 static/usage/infinite-scroll/infinite-scroll-content/index.md
 delete mode 100644 static/usage/input/basic/demo.html
 delete mode 100644 static/usage/input/basic/index.md
 delete mode 100644 static/usage/input/clear/demo.html
 delete mode 100644 static/usage/input/clear/index.md
 delete mode 100644 static/usage/input/fill/demo.html
 delete mode 100644 static/usage/input/fill/index.md
 delete mode 100644 static/usage/input/labels/demo.html
 delete mode 100644 static/usage/input/labels/index.md
 delete mode 100644 static/usage/input/theming/colors/demo.html
 delete mode 100644 static/usage/input/theming/colors/index.md
 delete mode 100644 static/usage/input/theming/css-properties/demo.html
 delete mode 100644 static/usage/input/theming/css-properties/index.md
 delete mode 100644 static/usage/input/types/demo.html
 delete mode 100644 static/usage/input/types/index.md
 delete mode 100644 static/usage/item-divider/basic/demo.html
 delete mode 100644 static/usage/item-divider/basic/index.md
 delete mode 100644 static/usage/item-divider/theming/colors/demo.html
 delete mode 100644 static/usage/item-divider/theming/colors/index.md
 delete mode 100644 static/usage/item-divider/theming/css-properties/demo.html
 delete mode 100644 static/usage/item-divider/theming/css-properties/index.md
 delete mode 100644 static/usage/item-group/basic/demo.html
 delete mode 100644 static/usage/item-group/basic/index.md
 delete mode 100644 static/usage/item-group/sliding-items/demo.html
 delete mode 100644 static/usage/item-group/sliding-items/index.md
 delete mode 100644 static/usage/item-sliding/basic/demo.html
 delete mode 100644 static/usage/item-sliding/basic/index.md
 delete mode 100644 static/usage/item-sliding/expandable/demo.html
 delete mode 100644 static/usage/item-sliding/expandable/index.md
 delete mode 100644 static/usage/item-sliding/icons/demo.html
 delete mode 100644 static/usage/item-sliding/icons/index.md
 delete mode 100644 static/usage/item/basic/demo.html
 delete mode 100644 static/usage/item/basic/index.md
 delete mode 100644 static/usage/item/buttons/demo.html
 delete mode 100644 static/usage/item/buttons/index.md
 delete mode 100644 static/usage/item/clickable/demo.html
 delete mode 100644 static/usage/item/clickable/index.md
 delete mode 100644 static/usage/item/counter/demo.html
 delete mode 100644 static/usage/item/counter/index.md
 delete mode 100644 static/usage/item/detail-arrows/demo.html
 delete mode 100644 static/usage/item/detail-arrows/index.md
 delete mode 100644 static/usage/item/helper-error/demo.html
 delete mode 100644 static/usage/item/helper-error/index.md
 delete mode 100644 static/usage/item/icons/demo.html
 delete mode 100644 static/usage/item/icons/index.md
 delete mode 100644 static/usage/item/inputs/demo.html
 delete mode 100644 static/usage/item/inputs/index.md
 delete mode 100644 static/usage/item/lines/demo.html
 delete mode 100644 static/usage/item/lines/index.md
 delete mode 100644 static/usage/item/media/demo.html
 delete mode 100644 static/usage/item/media/index.md
 delete mode 100644 static/usage/item/theming/colors/demo.html
 delete mode 100644 static/usage/item/theming/colors/index.md
 delete mode 100644 static/usage/item/theming/css-properties/demo.html
 delete mode 100644 static/usage/item/theming/css-properties/index.md
 delete mode 100644 static/usage/item/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/item/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/item/theming/input-highlight/demo.html
 delete mode 100644 static/usage/item/theming/input-highlight/index.md
 delete mode 100644 static/usage/label/basic/demo.html
 delete mode 100644 static/usage/label/basic/index.md
 delete mode 100644 static/usage/label/input/demo.html
 delete mode 100644 static/usage/label/input/index.md
 delete mode 100644 static/usage/label/item/demo.html
 delete mode 100644 static/usage/label/item/index.md
 delete mode 100644 static/usage/label/theming/colors/demo.html
 delete mode 100644 static/usage/label/theming/colors/index.md
 delete mode 100644 static/usage/list-header/basic/demo.html
 delete mode 100644 static/usage/list-header/basic/index.md
 delete mode 100644 static/usage/list-header/buttons/demo.html
 delete mode 100644 static/usage/list-header/buttons/index.md
 delete mode 100644 static/usage/list-header/lines/demo.html
 delete mode 100644 static/usage/list-header/lines/index.md
 delete mode 100644 static/usage/list-header/theming/colors/demo.html
 delete mode 100644 static/usage/list-header/theming/colors/index.md
 delete mode 100644 static/usage/list-header/theming/css-properties/demo.html
 delete mode 100644 static/usage/list-header/theming/css-properties/index.md
 delete mode 100644 static/usage/list/basic/demo.html
 delete mode 100644 static/usage/list/basic/index.md
 delete mode 100644 static/usage/list/inset/demo.html
 delete mode 100644 static/usage/list/inset/index.md
 delete mode 100644 static/usage/list/lines/demo.html
 delete mode 100644 static/usage/list/lines/index.md
 delete mode 100644 static/usage/loading/controller/demo.html
 delete mode 100644 static/usage/loading/controller/index.md
 delete mode 100644 static/usage/loading/spinners/demo.html
 delete mode 100644 static/usage/loading/spinners/index.md
 delete mode 100644 static/usage/loading/theming/demo.html
 delete mode 100644 static/usage/loading/theming/index.md
 delete mode 100644 static/usage/menu/basic/demo.html
 delete mode 100644 static/usage/menu/basic/index.md
 delete mode 100644 static/usage/menu/theming/demo.html
 delete mode 100644 static/usage/menu/theming/index.md
 delete mode 100644 static/usage/menu/toggle/demo.html
 delete mode 100644 static/usage/menu/toggle/index.md
 delete mode 100644 static/usage/menu/type/demo.html
 delete mode 100644 static/usage/menu/type/index.md
 delete mode 100644 static/usage/modal/can-dismiss/boolean/demo.html
 delete mode 100644 static/usage/modal/can-dismiss/boolean/index.md
 delete mode 100644 static/usage/modal/can-dismiss/function/demo.html
 delete mode 100644 static/usage/modal/can-dismiss/function/index.md
 delete mode 100644 static/usage/modal/card/basic/demo.html
 delete mode 100644 static/usage/modal/card/basic/index.md
 delete mode 100644 static/usage/modal/controller/demo.html
 delete mode 100644 static/usage/modal/controller/index.md
 delete mode 100644 static/usage/modal/custom-dialogs/demo.html
 delete mode 100644 static/usage/modal/custom-dialogs/index.md
 delete mode 100644 static/usage/modal/inline/basic/demo.html
 delete mode 100644 static/usage/modal/inline/basic/index.md
 delete mode 100644 static/usage/modal/inline/is-open/demo.html
 delete mode 100644 static/usage/modal/inline/is-open/index.md
 delete mode 100644 static/usage/modal/performance/mount/demo.html
 delete mode 100644 static/usage/modal/performance/mount/index.md
 delete mode 100644 static/usage/modal/sheet/background-content/demo.html
 delete mode 100644 static/usage/modal/sheet/background-content/index.md
 delete mode 100644 static/usage/modal/sheet/basic/demo.html
 delete mode 100644 static/usage/modal/sheet/basic/index.md
 delete mode 100644 static/usage/modal/sheet/handle-behavior/demo.html
 delete mode 100644 static/usage/modal/sheet/handle-behavior/index.md
 delete mode 100644 static/usage/modal/styling/animations/demo.html
 delete mode 100644 static/usage/modal/styling/animations/index.md
 delete mode 100644 static/usage/modal/styling/theming/demo.html
 delete mode 100644 static/usage/modal/styling/theming/index.md
 delete mode 100644 static/usage/nav/modal-navigation/demo.html
 delete mode 100644 static/usage/nav/modal-navigation/index.md
 delete mode 100644 static/usage/nav/nav-link/demo.html
 delete mode 100644 static/usage/nav/nav-link/index.md
 delete mode 100644 static/usage/note/basic/demo.html
 delete mode 100644 static/usage/note/basic/index.md
 delete mode 100644 static/usage/note/item/demo.html
 delete mode 100644 static/usage/note/item/index.md
 delete mode 100644 static/usage/note/theming/colors/demo.html
 delete mode 100644 static/usage/note/theming/colors/index.md
 delete mode 100644 static/usage/note/theming/css-properties/demo.html
 delete mode 100644 static/usage/note/theming/css-properties/index.md
 delete mode 100644 static/usage/picker/multiple-column/demo.html
 delete mode 100644 static/usage/picker/multiple-column/index.md
 delete mode 100644 static/usage/picker/single-column/demo.html
 delete mode 100644 static/usage/picker/single-column/index.md
 delete mode 100644 static/usage/popover/customization/positioning/demo.html
 delete mode 100644 static/usage/popover/customization/positioning/index.md
 delete mode 100644 static/usage/popover/customization/sizing/demo.html
 delete mode 100644 static/usage/popover/customization/sizing/index.md
 delete mode 100644 static/usage/popover/customization/styling/demo.html
 delete mode 100644 static/usage/popover/customization/styling/index.md
 delete mode 100644 static/usage/popover/nested/demo.html
 delete mode 100644 static/usage/popover/nested/index.md
 delete mode 100644 static/usage/popover/performance/mount/demo.html
 delete mode 100644 static/usage/popover/performance/mount/index.md
 delete mode 100644 static/usage/popover/presenting/controller/demo.html
 delete mode 100644 static/usage/popover/presenting/controller/index.md
 delete mode 100644 static/usage/popover/presenting/inline-isopen/demo.html
 delete mode 100644 static/usage/popover/presenting/inline-isopen/index.md
 delete mode 100644 static/usage/popover/presenting/inline-trigger/demo.html
 delete mode 100644 static/usage/popover/presenting/inline-trigger/index.md
 delete mode 100644 static/usage/progress-bar/buffer/demo.html
 delete mode 100644 static/usage/progress-bar/buffer/index.md
 delete mode 100644 static/usage/progress-bar/determinate/demo.html
 delete mode 100644 static/usage/progress-bar/determinate/index.md
 delete mode 100644 static/usage/progress-bar/indeterminate/demo.html
 delete mode 100644 static/usage/progress-bar/indeterminate/index.md
 delete mode 100644 static/usage/progress-bar/theming/colors/demo.html
 delete mode 100644 static/usage/progress-bar/theming/colors/index.md
 delete mode 100644 static/usage/progress-bar/theming/css-properties/demo.html
 delete mode 100644 static/usage/progress-bar/theming/css-properties/index.md
 delete mode 100644 static/usage/progress-bar/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/progress-bar/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/radio/basic/demo.html
 delete mode 100644 static/usage/radio/basic/index.md
 delete mode 100644 static/usage/radio/empty-selection/demo.html
 delete mode 100644 static/usage/radio/empty-selection/index.md
 delete mode 100644 static/usage/radio/theming/colors/demo.html
 delete mode 100644 static/usage/radio/theming/colors/index.md
 delete mode 100644 static/usage/radio/theming/css-properties/demo.html
 delete mode 100644 static/usage/radio/theming/css-properties/index.md
 delete mode 100644 static/usage/radio/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/radio/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/range/basic/demo.html
 delete mode 100644 static/usage/range/basic/index.md
 delete mode 100644 static/usage/range/dual-knobs/demo.html
 delete mode 100644 static/usage/range/dual-knobs/index.md
 delete mode 100644 static/usage/range/ion-change-event/demo.html
 delete mode 100644 static/usage/range/ion-change-event/index.md
 delete mode 100644 static/usage/range/ion-knob-move-event/demo.html
 delete mode 100644 static/usage/range/ion-knob-move-event/index.md
 delete mode 100644 static/usage/range/pins/demo.html
 delete mode 100644 static/usage/range/pins/index.md
 delete mode 100644 static/usage/range/slots/demo.html
 delete mode 100644 static/usage/range/slots/index.md
 delete mode 100644 static/usage/range/snapping-ticks/demo.html
 delete mode 100644 static/usage/range/snapping-ticks/index.md
 delete mode 100644 static/usage/range/theming/css-properties/demo.html
 delete mode 100644 static/usage/range/theming/css-properties/index.md
 delete mode 100644 static/usage/range/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/range/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/refresher/advanced/demo.html
 delete mode 100644 static/usage/refresher/advanced/index.md
 delete mode 100644 static/usage/refresher/basic/demo.html
 delete mode 100644 static/usage/refresher/basic/index.md
 delete mode 100644 static/usage/refresher/custom-content/demo.html
 delete mode 100644 static/usage/refresher/custom-content/index.md
 delete mode 100644 static/usage/refresher/custom-scroll-target/demo.html
 delete mode 100644 static/usage/refresher/custom-scroll-target/index.md
 delete mode 100644 static/usage/refresher/pull-properties/demo.html
 delete mode 100644 static/usage/refresher/pull-properties/index.md
 delete mode 100644 static/usage/reorder/basic/demo.html
 delete mode 100644 static/usage/reorder/basic/index.md
 delete mode 100644 static/usage/reorder/custom-icon/demo.html
 delete mode 100644 static/usage/reorder/custom-icon/index.md
 delete mode 100644 static/usage/reorder/custom-scroll-target/demo.html
 delete mode 100644 static/usage/reorder/custom-scroll-target/index.md
 delete mode 100644 static/usage/reorder/toggling-disabled/demo.html
 delete mode 100644 static/usage/reorder/toggling-disabled/index.md
 delete mode 100644 static/usage/reorder/updating-data/demo.html
 delete mode 100644 static/usage/reorder/updating-data/index.md
 delete mode 100644 static/usage/reorder/wrapper/demo.html
 delete mode 100644 static/usage/reorder/wrapper/index.md
 delete mode 100644 static/usage/ripple-effect/basic/demo.html
 delete mode 100644 static/usage/ripple-effect/basic/index.md
 delete mode 100644 static/usage/ripple-effect/customizing/demo.html
 delete mode 100644 static/usage/ripple-effect/customizing/index.md
 delete mode 100644 static/usage/ripple-effect/type/demo.html
 delete mode 100644 static/usage/ripple-effect/type/index.md
 delete mode 100644 static/usage/searchbar/basic/demo.html
 delete mode 100644 static/usage/searchbar/basic/index.md
 delete mode 100644 static/usage/searchbar/cancel-button/demo.html
 delete mode 100644 static/usage/searchbar/cancel-button/index.md
 delete mode 100644 static/usage/searchbar/clear-button/demo.html
 delete mode 100644 static/usage/searchbar/clear-button/index.md
 delete mode 100644 static/usage/searchbar/debounce/demo.html
 delete mode 100644 static/usage/searchbar/debounce/index.md
 delete mode 100644 static/usage/searchbar/search-icon/demo.html
 delete mode 100644 static/usage/searchbar/search-icon/index.md
 delete mode 100644 static/usage/searchbar/theming/colors/demo.html
 delete mode 100644 static/usage/searchbar/theming/colors/index.md
 delete mode 100644 static/usage/searchbar/theming/css-properties/demo.html
 delete mode 100644 static/usage/searchbar/theming/css-properties/index.md
 delete mode 100644 static/usage/segment-button/basic/demo.html
 delete mode 100644 static/usage/segment-button/basic/index.md
 delete mode 100644 static/usage/segment-button/layout/demo.html
 delete mode 100644 static/usage/segment-button/layout/index.md
 delete mode 100644 static/usage/segment-button/theming/css-properties/demo.html
 delete mode 100644 static/usage/segment-button/theming/css-properties/index.md
 delete mode 100644 static/usage/segment-button/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/segment-button/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/segment/basic/demo.html
 delete mode 100644 static/usage/segment/basic/index.md
 delete mode 100644 static/usage/segment/scrollable/demo.html
 delete mode 100644 static/usage/segment/scrollable/index.md
 delete mode 100644 static/usage/segment/theming/colors/demo.html
 delete mode 100644 static/usage/segment/theming/colors/index.md
 delete mode 100644 static/usage/segment/theming/css-properties/demo.html
 delete mode 100644 static/usage/segment/theming/css-properties/index.md
 delete mode 100644 static/usage/select/basic/multiple-selection/demo.html
 delete mode 100644 static/usage/select/basic/multiple-selection/index.md
 delete mode 100644 static/usage/select/basic/responding-to-interaction/demo.html
 delete mode 100644 static/usage/select/basic/responding-to-interaction/index.md
 delete mode 100644 static/usage/select/basic/single-selection/demo.html
 delete mode 100644 static/usage/select/basic/single-selection/index.md
 delete mode 100644 static/usage/select/customization/button-text/demo.html
 delete mode 100644 static/usage/select/customization/button-text/index.md
 delete mode 100644 static/usage/select/customization/interface-options/demo.html
 delete mode 100644 static/usage/select/customization/interface-options/index.md
 delete mode 100644 static/usage/select/customization/styling-select/demo.html
 delete mode 100644 static/usage/select/customization/styling-select/index.md
 delete mode 100644 static/usage/select/interfaces/action-sheet/demo.html
 delete mode 100644 static/usage/select/interfaces/action-sheet/index.md
 delete mode 100644 static/usage/select/interfaces/popover/demo.html
 delete mode 100644 static/usage/select/interfaces/popover/index.md
 delete mode 100644 static/usage/select/objects-as-values/multiple-selection/demo.html
 delete mode 100644 static/usage/select/objects-as-values/multiple-selection/index.md
 delete mode 100644 static/usage/select/objects-as-values/using-comparewith/demo.html
 delete mode 100644 static/usage/select/objects-as-values/using-comparewith/index.md
 delete mode 100644 static/usage/skeleton-text/basic/demo.html
 delete mode 100644 static/usage/skeleton-text/basic/index.md
 delete mode 100644 static/usage/skeleton-text/theming/css-properties/demo.html
 delete mode 100644 static/usage/skeleton-text/theming/css-properties/index.md
 delete mode 100644 static/usage/spinner/basic/demo.html
 delete mode 100644 static/usage/spinner/basic/index.md
 delete mode 100644 static/usage/spinner/theming/colors/demo.html
 delete mode 100644 static/usage/spinner/theming/colors/index.md
 delete mode 100644 static/usage/spinner/theming/css-properties/demo.html
 delete mode 100644 static/usage/spinner/theming/css-properties/index.md
 delete mode 100644 static/usage/split-pane/basic/demo.html
 delete mode 100644 static/usage/split-pane/basic/index.md
 delete mode 100644 static/usage/split-pane/theming/css-properties/demo.html
 delete mode 100644 static/usage/split-pane/theming/css-properties/index.md
 delete mode 100644 static/usage/text/basic/demo.html
 delete mode 100644 static/usage/text/basic/index.md
 delete mode 100644 static/usage/textarea/autogrow/demo.html
 delete mode 100644 static/usage/textarea/autogrow/index.md
 delete mode 100644 static/usage/textarea/basic/demo.html
 delete mode 100644 static/usage/textarea/basic/index.md
 delete mode 100644 static/usage/textarea/clear-on-edit/demo.html
 delete mode 100644 static/usage/textarea/clear-on-edit/index.md
 delete mode 100644 static/usage/textarea/theming/demo.html
 delete mode 100644 static/usage/textarea/theming/index.md
 delete mode 100644 static/usage/thumbnail/basic/demo.html
 delete mode 100644 static/usage/thumbnail/basic/index.md
 delete mode 100644 static/usage/thumbnail/item/demo.html
 delete mode 100644 static/usage/thumbnail/item/index.md
 delete mode 100644 static/usage/thumbnail/theming/css-properties/demo.html
 delete mode 100644 static/usage/thumbnail/theming/css-properties/index.md
 delete mode 100644 static/usage/title/basic/demo.html
 delete mode 100644 static/usage/title/basic/index.md
 delete mode 100644 static/usage/title/collapsible-large-title/basic/demo.html
 delete mode 100644 static/usage/title/collapsible-large-title/basic/index.md
 delete mode 100644 static/usage/title/collapsible-large-title/buttons/demo.html
 delete mode 100644 static/usage/title/collapsible-large-title/buttons/index.md
 delete mode 100644 static/usage/title/theming/css-properties/demo.html
 delete mode 100644 static/usage/title/theming/css-properties/index.md
 delete mode 100644 static/usage/toast/buttons/demo.html
 delete mode 100644 static/usage/toast/buttons/index.md
 delete mode 100644 static/usage/toast/icon/demo.html
 delete mode 100644 static/usage/toast/icon/index.md
 delete mode 100644 static/usage/toast/presenting/controller/demo.html
 delete mode 100644 static/usage/toast/presenting/controller/index.md
 delete mode 100644 static/usage/toast/theming/demo.html
 delete mode 100644 static/usage/toast/theming/index.md
 delete mode 100644 static/usage/toggle/basic/demo.html
 delete mode 100644 static/usage/toggle/basic/index.md
 delete mode 100644 static/usage/toggle/on-off/demo.html
 delete mode 100644 static/usage/toggle/on-off/index.md
 delete mode 100644 static/usage/toggle/theming/colors/demo.html
 delete mode 100644 static/usage/toggle/theming/colors/index.md
 delete mode 100644 static/usage/toggle/theming/css-properties/demo.html
 delete mode 100644 static/usage/toggle/theming/css-properties/index.md
 delete mode 100644 static/usage/toggle/theming/css-shadow-parts/demo.html
 delete mode 100644 static/usage/toggle/theming/css-shadow-parts/index.md
 delete mode 100644 static/usage/toolbar/basic/demo.html
 delete mode 100644 static/usage/toolbar/basic/index.md
 delete mode 100644 static/usage/toolbar/buttons/demo.html
 delete mode 100644 static/usage/toolbar/buttons/index.md
 delete mode 100644 static/usage/toolbar/progress-bars/demo.html
 delete mode 100644 static/usage/toolbar/progress-bars/index.md
 delete mode 100644 static/usage/toolbar/searchbars/demo.html
 delete mode 100644 static/usage/toolbar/searchbars/index.md
 delete mode 100644 static/usage/toolbar/segments/demo.html
 delete mode 100644 static/usage/toolbar/segments/index.md
 delete mode 100644 static/usage/toolbar/theming/colors/demo.html
 delete mode 100644 static/usage/toolbar/theming/colors/index.md
 delete mode 100644 static/usage/toolbar/theming/css-properties/demo.html
 delete mode 100644 static/usage/toolbar/theming/css-properties/index.md
 rename static/usage/{ => v6}/accordion/accessibility/animations/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/accessibility/animations/demo.html
 create mode 100644 static/usage/v6/accordion/accessibility/animations/index.md
 rename static/usage/{ => v6}/accordion/accessibility/animations/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/accessibility/animations/react.md (100%)
 rename static/usage/{ => v6}/accordion/accessibility/animations/vue.md (100%)
 rename static/usage/{ => v6}/accordion/basic/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/basic/demo.html
 create mode 100644 static/usage/v6/accordion/basic/index.md
 rename static/usage/{ => v6}/accordion/basic/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/basic/react.md (100%)
 rename static/usage/{ => v6}/accordion/basic/vue.md (100%)
 rename static/usage/{ => v6}/accordion/customization/advanced-expansion-styles/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/accordion/customization/advanced-expansion-styles/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
 create mode 100644 static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
 rename static/usage/{ => v6}/accordion/customization/advanced-expansion-styles/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/customization/advanced-expansion-styles/react/main_css.md (100%)
 rename static/usage/{ => v6}/accordion/customization/advanced-expansion-styles/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/accordion/customization/advanced-expansion-styles/vue.md (100%)
 rename static/usage/{ => v6}/accordion/customization/expansion-styles/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/customization/expansion-styles/demo.html
 create mode 100644 static/usage/v6/accordion/customization/expansion-styles/index.md
 rename static/usage/{ => v6}/accordion/customization/expansion-styles/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/customization/expansion-styles/react.md (100%)
 rename static/usage/{ => v6}/accordion/customization/expansion-styles/vue.md (100%)
 rename static/usage/{ => v6}/accordion/customization/icons/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/customization/icons/demo.html
 create mode 100644 static/usage/v6/accordion/customization/icons/index.md
 rename static/usage/{ => v6}/accordion/customization/icons/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/customization/icons/react.md (100%)
 rename static/usage/{ => v6}/accordion/customization/icons/vue.md (100%)
 rename static/usage/{ => v6}/accordion/customization/theming/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/accordion/customization/theming/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/accordion/customization/theming/demo.html
 create mode 100644 static/usage/v6/accordion/customization/theming/index.md
 rename static/usage/{ => v6}/accordion/customization/theming/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/customization/theming/react/main_css.md (100%)
 rename static/usage/{ => v6}/accordion/customization/theming/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/accordion/customization/theming/vue.md (100%)
 rename static/usage/{ => v6}/accordion/disable-group/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/disable-group/demo.html
 create mode 100644 static/usage/v6/accordion/disable-group/index.md
 rename static/usage/{ => v6}/accordion/disable-group/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/disable-group/react.md (100%)
 rename static/usage/{ => v6}/accordion/disable-group/vue.md (100%)
 rename static/usage/{ => v6}/accordion/disable/group/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/disable/group/demo.html
 create mode 100644 static/usage/v6/accordion/disable/group/index.md
 rename static/usage/{ => v6}/accordion/disable/group/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/disable/group/react.md (100%)
 rename static/usage/{ => v6}/accordion/disable/group/vue.md (100%)
 rename static/usage/{ => v6}/accordion/disable/individual/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/disable/individual/demo.html
 create mode 100644 static/usage/v6/accordion/disable/individual/index.md
 rename static/usage/{ => v6}/accordion/disable/individual/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/disable/individual/react.md (100%)
 rename static/usage/{ => v6}/accordion/disable/individual/vue.md (100%)
 rename static/usage/{ => v6}/accordion/listen-changes/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/accordion/listen-changes/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/accordion/listen-changes/demo.html
 create mode 100644 static/usage/v6/accordion/listen-changes/index.md
 rename static/usage/{ => v6}/accordion/listen-changes/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/listen-changes/react.md (100%)
 rename static/usage/{ => v6}/accordion/listen-changes/vue.md (100%)
 rename static/usage/{ => v6}/accordion/multiple/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/multiple/demo.html
 create mode 100644 static/usage/v6/accordion/multiple/index.md
 rename static/usage/{ => v6}/accordion/multiple/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/multiple/react.md (100%)
 rename static/usage/{ => v6}/accordion/multiple/vue.md (100%)
 rename static/usage/{ => v6}/accordion/readonly/group/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/readonly/group/demo.html
 create mode 100644 static/usage/v6/accordion/readonly/group/index.md
 rename static/usage/{ => v6}/accordion/readonly/group/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/readonly/group/react.md (100%)
 rename static/usage/{ => v6}/accordion/readonly/group/vue.md (100%)
 rename static/usage/{ => v6}/accordion/readonly/individual/angular.md (100%)
 create mode 100644 static/usage/v6/accordion/readonly/individual/demo.html
 create mode 100644 static/usage/v6/accordion/readonly/individual/index.md
 rename static/usage/{ => v6}/accordion/readonly/individual/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/readonly/individual/react.md (100%)
 rename static/usage/{ => v6}/accordion/readonly/individual/vue.md (100%)
 rename static/usage/{ => v6}/accordion/toggle/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/accordion/toggle/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/accordion/toggle/demo.html
 create mode 100644 static/usage/v6/accordion/toggle/index.md
 rename static/usage/{ => v6}/accordion/toggle/javascript.md (100%)
 rename static/usage/{ => v6}/accordion/toggle/react.md (100%)
 rename static/usage/{ => v6}/accordion/toggle/vue.md (100%)
 rename static/usage/{ => v6}/action-sheet/basic/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/action-sheet/basic/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/action-sheet/basic/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/action-sheet/basic/demo.html
 create mode 100644 static/usage/v6/action-sheet/basic/index.md
 rename static/usage/{ => v6}/action-sheet/basic/javascript.md (100%)
 rename static/usage/{ => v6}/action-sheet/basic/react/main_css.md (100%)
 rename static/usage/{ => v6}/action-sheet/basic/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/action-sheet/basic/vue.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/css-properties/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/css-properties/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/css-properties/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/action-sheet/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/action-sheet/theming/css-properties/index.md
 rename static/usage/{ => v6}/action-sheet/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/styling/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/styling/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/styling/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/action-sheet/theming/styling/demo.html
 create mode 100644 static/usage/v6/action-sheet/theming/styling/index.md
 rename static/usage/{ => v6}/action-sheet/theming/styling/javascript.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/styling/react/main_css.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/styling/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/action-sheet/theming/styling/vue.md (100%)
 rename static/usage/{ => v6}/alert/buttons/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/alert/buttons/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/alert/buttons/demo.html
 create mode 100644 static/usage/v6/alert/buttons/index.md
 rename static/usage/{ => v6}/alert/buttons/javascript.md (100%)
 rename static/usage/{ => v6}/alert/buttons/react.md (100%)
 rename static/usage/{ => v6}/alert/buttons/vue.md (100%)
 rename static/usage/{ => v6}/alert/customization/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/alert/customization/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/alert/customization/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/alert/customization/demo.html
 create mode 100644 static/usage/v6/alert/customization/index.md
 rename static/usage/{ => v6}/alert/customization/javascript.md (100%)
 rename static/usage/{ => v6}/alert/customization/react/main_css.md (100%)
 rename static/usage/{ => v6}/alert/customization/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/alert/customization/vue.md (100%)
 rename static/usage/{ => v6}/alert/inputs/radios/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/alert/inputs/radios/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/alert/inputs/radios/demo.html
 create mode 100644 static/usage/v6/alert/inputs/radios/index.md
 rename static/usage/{ => v6}/alert/inputs/radios/javascript.md (100%)
 rename static/usage/{ => v6}/alert/inputs/radios/react.md (100%)
 rename static/usage/{ => v6}/alert/inputs/radios/vue.md (100%)
 rename static/usage/{ => v6}/alert/inputs/text-inputs/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/alert/inputs/text-inputs/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/alert/inputs/text-inputs/demo.html
 create mode 100644 static/usage/v6/alert/inputs/text-inputs/index.md
 rename static/usage/{ => v6}/alert/inputs/text-inputs/javascript.md (100%)
 rename static/usage/{ => v6}/alert/inputs/text-inputs/react.md (100%)
 rename static/usage/{ => v6}/alert/inputs/text-inputs/vue.md (100%)
 rename static/usage/{ => v6}/alert/presenting/controller/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/alert/presenting/controller/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/alert/presenting/controller/demo.html
 create mode 100644 static/usage/v6/alert/presenting/controller/index.md
 rename static/usage/{ => v6}/alert/presenting/controller/javascript.md (100%)
 rename static/usage/{ => v6}/alert/presenting/controller/react.md (100%)
 rename static/usage/{ => v6}/alert/presenting/controller/vue.md (100%)
 rename static/usage/{ => v6}/avatar/basic/angular.md (100%)
 create mode 100644 static/usage/v6/avatar/basic/demo.html
 create mode 100644 static/usage/v6/avatar/basic/index.md
 rename static/usage/{ => v6}/avatar/basic/javascript.md (100%)
 rename static/usage/{ => v6}/avatar/basic/react.md (100%)
 rename static/usage/{ => v6}/avatar/basic/vue.md (100%)
 rename static/usage/{ => v6}/avatar/chip/angular.md (100%)
 create mode 100644 static/usage/v6/avatar/chip/demo.html
 create mode 100644 static/usage/v6/avatar/chip/index.md
 rename static/usage/{ => v6}/avatar/chip/javascript.md (100%)
 rename static/usage/{ => v6}/avatar/chip/react.md (100%)
 rename static/usage/{ => v6}/avatar/chip/vue.md (100%)
 rename static/usage/{ => v6}/avatar/item/angular.md (100%)
 create mode 100644 static/usage/v6/avatar/item/demo.html
 create mode 100644 static/usage/v6/avatar/item/index.md
 rename static/usage/{ => v6}/avatar/item/javascript.md (100%)
 rename static/usage/{ => v6}/avatar/item/react.md (100%)
 rename static/usage/{ => v6}/avatar/item/vue.md (100%)
 rename static/usage/{ => v6}/avatar/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/avatar/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/avatar/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/avatar/theming/css-properties/index.md
 rename static/usage/{ => v6}/avatar/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/avatar/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/avatar/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/avatar/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/backdrop/basic/angular.md (100%)
 create mode 100644 static/usage/v6/backdrop/basic/demo.html
 create mode 100644 static/usage/v6/backdrop/basic/index.md
 rename static/usage/{ => v6}/backdrop/basic/javascript.md (100%)
 rename static/usage/{ => v6}/backdrop/basic/react.md (100%)
 rename static/usage/{ => v6}/backdrop/basic/vue.md (100%)
 rename static/usage/{ => v6}/backdrop/styling/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/backdrop/styling/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/backdrop/styling/demo.html
 create mode 100644 static/usage/v6/backdrop/styling/index.md
 rename static/usage/{ => v6}/backdrop/styling/javascript.md (100%)
 rename static/usage/{ => v6}/backdrop/styling/react/main_css.md (100%)
 rename static/usage/{ => v6}/backdrop/styling/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/backdrop/styling/vue.md (100%)
 rename static/usage/{ => v6}/badge/basic/angular.md (100%)
 create mode 100644 static/usage/v6/badge/basic/demo.html
 create mode 100644 static/usage/v6/badge/basic/index.md
 rename static/usage/{ => v6}/badge/basic/javascript.md (100%)
 rename static/usage/{ => v6}/badge/basic/react.md (100%)
 rename static/usage/{ => v6}/badge/basic/vue.md (100%)
 rename static/usage/{ => v6}/badge/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/badge/theming/colors/demo.html
 create mode 100644 static/usage/v6/badge/theming/colors/index.md
 rename static/usage/{ => v6}/badge/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/badge/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/badge/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/badge/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/badge/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/badge/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/badge/theming/css-properties/index.md
 rename static/usage/{ => v6}/badge/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/badge/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/badge/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/badge/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/basic/angular.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/basic/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/basic/index.md
 rename static/usage/{ => v6}/breadcrumbs/basic/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/basic/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/basic/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/expand-on-click/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/expand-on-click/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/expand-on-click/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/items-before-after/angular.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/items-before-after/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/items-before-after/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/items-before-after/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/max-items/angular.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/max-items/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/max-items/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/max-items/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/popover-on-click/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/popover-on-click/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/collapsing-items/popover-on-click/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/icons/custom-separators/angular.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/icons/custom-separators/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/icons/custom-separators/index.md
 rename static/usage/{ => v6}/breadcrumbs/icons/custom-separators/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/icons/custom-separators/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/icons/custom-separators/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/icons/icons-on-items/angular.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
 rename static/usage/{ => v6}/breadcrumbs/icons/icons-on-items/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/icons/icons-on-items/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/icons/icons-on-items/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/theming/colors/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/theming/colors/index.md
 rename static/usage/{ => v6}/breadcrumbs/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/breadcrumbs/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/breadcrumbs/theming/css-properties/index.md
 rename static/usage/{ => v6}/breadcrumbs/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/breadcrumbs/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/button/basic/angular.md (100%)
 create mode 100644 static/usage/v6/button/basic/demo.html
 create mode 100644 static/usage/v6/button/basic/index.md
 rename static/usage/{ => v6}/button/basic/javascript.md (100%)
 rename static/usage/{ => v6}/button/basic/react.md (100%)
 rename static/usage/{ => v6}/button/basic/vue.md (100%)
 rename static/usage/{ => v6}/button/expand/angular.md (100%)
 create mode 100644 static/usage/v6/button/expand/demo.html
 create mode 100644 static/usage/v6/button/expand/index.md
 rename static/usage/{ => v6}/button/expand/javascript.md (100%)
 rename static/usage/{ => v6}/button/expand/react.md (100%)
 rename static/usage/{ => v6}/button/expand/vue.md (100%)
 rename static/usage/{ => v6}/button/fill/angular.md (100%)
 create mode 100644 static/usage/v6/button/fill/demo.html
 create mode 100644 static/usage/v6/button/fill/index.md
 rename static/usage/{ => v6}/button/fill/javascript.md (100%)
 rename static/usage/{ => v6}/button/fill/react.md (100%)
 rename static/usage/{ => v6}/button/fill/vue.md (100%)
 rename static/usage/{ => v6}/button/icons/angular.md (100%)
 create mode 100644 static/usage/v6/button/icons/demo.html
 create mode 100644 static/usage/v6/button/icons/index.md
 rename static/usage/{ => v6}/button/icons/javascript.md (100%)
 rename static/usage/{ => v6}/button/icons/react.md (100%)
 rename static/usage/{ => v6}/button/icons/vue.md (100%)
 rename static/usage/{ => v6}/button/shape/angular.md (100%)
 create mode 100644 static/usage/v6/button/shape/demo.html
 create mode 100644 static/usage/v6/button/shape/index.md
 rename static/usage/{ => v6}/button/shape/javascript.md (100%)
 rename static/usage/{ => v6}/button/shape/react.md (100%)
 rename static/usage/{ => v6}/button/shape/vue.md (100%)
 rename static/usage/{ => v6}/button/size/angular.md (100%)
 create mode 100644 static/usage/v6/button/size/demo.html
 create mode 100644 static/usage/v6/button/size/index.md
 rename static/usage/{ => v6}/button/size/javascript.md (100%)
 rename static/usage/{ => v6}/button/size/react.md (100%)
 rename static/usage/{ => v6}/button/size/vue.md (100%)
 rename static/usage/{ => v6}/button/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/button/theming/colors/demo.html
 create mode 100644 static/usage/v6/button/theming/colors/index.md
 rename static/usage/{ => v6}/button/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/button/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/button/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/button/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/button/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/button/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/button/theming/css-properties/index.md
 rename static/usage/{ => v6}/button/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/button/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/button/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/button/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/buttons/basic/angular.md (100%)
 create mode 100644 static/usage/v6/buttons/basic/demo.html
 create mode 100644 static/usage/v6/buttons/basic/index.md
 rename static/usage/{ => v6}/buttons/basic/javascript.md (100%)
 rename static/usage/{ => v6}/buttons/basic/react.md (100%)
 rename static/usage/{ => v6}/buttons/basic/vue.md (100%)
 rename static/usage/{ => v6}/buttons/placement/angular.md (100%)
 create mode 100644 static/usage/v6/buttons/placement/demo.html
 create mode 100644 static/usage/v6/buttons/placement/index.md
 rename static/usage/{ => v6}/buttons/placement/javascript.md (100%)
 rename static/usage/{ => v6}/buttons/placement/react.md (100%)
 rename static/usage/{ => v6}/buttons/placement/vue.md (100%)
 rename static/usage/{ => v6}/buttons/types/angular.md (100%)
 create mode 100644 static/usage/v6/buttons/types/demo.html
 create mode 100644 static/usage/v6/buttons/types/index.md
 rename static/usage/{ => v6}/buttons/types/javascript.md (100%)
 rename static/usage/{ => v6}/buttons/types/react.md (100%)
 rename static/usage/{ => v6}/buttons/types/vue.md (100%)
 rename static/usage/{ => v6}/card/basic/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/card/basic/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/card/basic/demo.html
 create mode 100644 static/usage/v6/card/basic/index.md
 rename static/usage/{ => v6}/card/basic/javascript.md (100%)
 rename static/usage/{ => v6}/card/basic/react/main_css.md (100%)
 rename static/usage/{ => v6}/card/basic/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/card/basic/vue.md (100%)
 rename static/usage/{ => v6}/card/buttons/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/card/buttons/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/card/buttons/demo.html
 create mode 100644 static/usage/v6/card/buttons/index.md
 rename static/usage/{ => v6}/card/buttons/javascript.md (100%)
 rename static/usage/{ => v6}/card/buttons/react/main_css.md (100%)
 rename static/usage/{ => v6}/card/buttons/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/card/buttons/vue.md (100%)
 rename static/usage/{ => v6}/card/list/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/card/list/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/card/list/demo.html
 create mode 100644 static/usage/v6/card/list/index.md
 rename static/usage/{ => v6}/card/list/javascript.md (100%)
 rename static/usage/{ => v6}/card/list/react/main_css.md (100%)
 rename static/usage/{ => v6}/card/list/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/card/list/vue.md (100%)
 rename static/usage/{ => v6}/card/media/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/card/media/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/card/media/demo.html
 create mode 100644 static/usage/v6/card/media/index.md
 rename static/usage/{ => v6}/card/media/javascript.md (100%)
 rename static/usage/{ => v6}/card/media/react/main_css.md (100%)
 rename static/usage/{ => v6}/card/media/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/card/media/vue.md (100%)
 rename static/usage/{ => v6}/card/theming/colors/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/card/theming/colors/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/card/theming/colors/demo.html
 create mode 100644 static/usage/v6/card/theming/colors/index.md
 rename static/usage/{ => v6}/card/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/card/theming/colors/react/main_css.md (100%)
 rename static/usage/{ => v6}/card/theming/colors/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/card/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/card/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/card/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/card/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/card/theming/css-properties/index.md
 rename static/usage/{ => v6}/card/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/card/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/card/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/card/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/checkbox/basic/angular.md (100%)
 create mode 100644 static/usage/v6/checkbox/basic/demo.html
 create mode 100644 static/usage/v6/checkbox/basic/index.md
 rename static/usage/{ => v6}/checkbox/basic/javascript.md (100%)
 rename static/usage/{ => v6}/checkbox/basic/react.md (100%)
 rename static/usage/{ => v6}/checkbox/basic/vue.md (100%)
 rename static/usage/{ => v6}/checkbox/indeterminate/angular.md (100%)
 create mode 100644 static/usage/v6/checkbox/indeterminate/demo.html
 create mode 100644 static/usage/v6/checkbox/indeterminate/index.md
 rename static/usage/{ => v6}/checkbox/indeterminate/javascript.md (100%)
 rename static/usage/{ => v6}/checkbox/indeterminate/react.md (100%)
 rename static/usage/{ => v6}/checkbox/indeterminate/vue.md (100%)
 rename static/usage/{ => v6}/checkbox/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/checkbox/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/checkbox/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/checkbox/theming/css-properties/index.md
 rename static/usage/{ => v6}/checkbox/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/checkbox/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/checkbox/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/checkbox/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/chip/basic/angular.md (100%)
 create mode 100644 static/usage/v6/chip/basic/demo.html
 create mode 100644 static/usage/v6/chip/basic/index.md
 rename static/usage/{ => v6}/chip/basic/javascript.md (100%)
 rename static/usage/{ => v6}/chip/basic/react.md (100%)
 rename static/usage/{ => v6}/chip/basic/vue.md (100%)
 rename static/usage/{ => v6}/chip/slots/angular.md (100%)
 create mode 100644 static/usage/v6/chip/slots/demo.html
 create mode 100644 static/usage/v6/chip/slots/index.md
 rename static/usage/{ => v6}/chip/slots/javascript.md (100%)
 rename static/usage/{ => v6}/chip/slots/react.md (100%)
 rename static/usage/{ => v6}/chip/slots/vue.md (100%)
 rename static/usage/{ => v6}/chip/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/chip/theming/colors/demo.html
 create mode 100644 static/usage/v6/chip/theming/colors/index.md
 rename static/usage/{ => v6}/chip/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/chip/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/chip/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/chip/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/chip/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/chip/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/chip/theming/css-properties/index.md
 rename static/usage/{ => v6}/chip/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/chip/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/chip/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/chip/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/content/basic/angular.md (100%)
 create mode 100644 static/usage/v6/content/basic/demo.html
 create mode 100644 static/usage/v6/content/basic/index.md
 rename static/usage/{ => v6}/content/basic/javascript.md (100%)
 rename static/usage/{ => v6}/content/basic/react.md (100%)
 rename static/usage/{ => v6}/content/basic/vue.md (100%)
 rename static/usage/{ => v6}/content/fixed/angular.md (100%)
 rename static/usage/{ => v6}/content/fixed/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/content/fixed/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/content/fixed/demo.html
 create mode 100644 static/usage/v6/content/fixed/index.md
 rename static/usage/{ => v6}/content/fixed/javascript.md (100%)
 rename static/usage/{ => v6}/content/fixed/react.md (100%)
 rename static/usage/{ => v6}/content/fixed/react/main_css.md (100%)
 rename static/usage/{ => v6}/content/fixed/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/content/fixed/vue.md (100%)
 rename static/usage/{ => v6}/content/fullscreen/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/content/fullscreen/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/content/fullscreen/demo.html
 create mode 100644 static/usage/v6/content/fullscreen/index.md
 rename static/usage/{ => v6}/content/fullscreen/javascript.md (100%)
 rename static/usage/{ => v6}/content/fullscreen/react/main_css.md (100%)
 rename static/usage/{ => v6}/content/fullscreen/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/content/fullscreen/vue.md (100%)
 rename static/usage/{ => v6}/content/header-footer/angular.md (100%)
 create mode 100644 static/usage/v6/content/header-footer/demo.html
 create mode 100644 static/usage/v6/content/header-footer/index.md
 rename static/usage/{ => v6}/content/header-footer/javascript.md (100%)
 rename static/usage/{ => v6}/content/header-footer/react.md (100%)
 rename static/usage/{ => v6}/content/header-footer/vue.md (100%)
 rename static/usage/{ => v6}/content/scroll-events/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/content/scroll-events/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/content/scroll-events/demo.html
 create mode 100644 static/usage/v6/content/scroll-events/index.md
 rename static/usage/{ => v6}/content/scroll-events/javascript.md (100%)
 rename static/usage/{ => v6}/content/scroll-events/react.md (100%)
 rename static/usage/{ => v6}/content/scroll-events/vue.md (100%)
 rename static/usage/{ => v6}/content/scroll-methods/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/content/scroll-methods/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/content/scroll-methods/demo.html
 create mode 100644 static/usage/v6/content/scroll-methods/index.md
 rename static/usage/{ => v6}/content/scroll-methods/javascript.md (100%)
 rename static/usage/{ => v6}/content/scroll-methods/react.md (100%)
 rename static/usage/{ => v6}/content/scroll-methods/vue.md (100%)
 rename static/usage/{ => v6}/content/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/content/theming/colors/demo.html
 create mode 100644 static/usage/v6/content/theming/colors/index.md
 rename static/usage/{ => v6}/content/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/content/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/content/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/content/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/content/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/content/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/content/theming/css-properties/index.md
 rename static/usage/{ => v6}/content/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/content/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/content/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/content/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/content/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/content/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/content/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/content/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/content/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/content/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/content/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/content/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/datetime-button/basic/angular.md (100%)
 create mode 100644 static/usage/v6/datetime-button/basic/demo.html
 create mode 100644 static/usage/v6/datetime-button/basic/index.md
 rename static/usage/{ => v6}/datetime-button/basic/javascript.md (100%)
 rename static/usage/{ => v6}/datetime-button/basic/react.md (100%)
 rename static/usage/{ => v6}/datetime-button/basic/vue.md (100%)
 rename static/usage/{ => v6}/datetime/basic/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/basic/demo.html
 create mode 100644 static/usage/v6/datetime/basic/index.md
 rename static/usage/{ => v6}/datetime/basic/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/basic/react.md (100%)
 rename static/usage/{ => v6}/datetime/basic/vue.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/customizing-button-texts/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/buttons/customizing-button-texts/demo.html
 create mode 100644 static/usage/v6/datetime/buttons/customizing-button-texts/index.md
 rename static/usage/{ => v6}/datetime/buttons/customizing-button-texts/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/customizing-button-texts/react.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/customizing-button-texts/vue.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/customizing-buttons/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/buttons/customizing-buttons/demo.html
 create mode 100644 static/usage/v6/datetime/buttons/customizing-buttons/index.md
 rename static/usage/{ => v6}/datetime/buttons/customizing-buttons/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/customizing-buttons/react.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/customizing-buttons/vue.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/showing-confirmation-buttons/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html
 create mode 100644 static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
 rename static/usage/{ => v6}/datetime/buttons/showing-confirmation-buttons/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/showing-confirmation-buttons/react.md (100%)
 rename static/usage/{ => v6}/datetime/buttons/showing-confirmation-buttons/vue.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/advanced/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/advanced/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/datetime/date-constraints/advanced/demo.html
 create mode 100644 static/usage/v6/datetime/date-constraints/advanced/index.md
 rename static/usage/{ => v6}/datetime/date-constraints/advanced/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/advanced/react.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/advanced/vue.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/max-min/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/date-constraints/max-min/demo.html
 create mode 100644 static/usage/v6/datetime/date-constraints/max-min/index.md
 rename static/usage/{ => v6}/datetime/date-constraints/max-min/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/max-min/react.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/max-min/vue.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/values/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/date-constraints/values/demo.html
 create mode 100644 static/usage/v6/datetime/date-constraints/values/index.md
 rename static/usage/{ => v6}/datetime/date-constraints/values/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/values/react.md (100%)
 rename static/usage/{ => v6}/datetime/date-constraints/values/vue.md (100%)
 rename static/usage/{ => v6}/datetime/localization/custom-locale/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/localization/custom-locale/demo.html
 create mode 100644 static/usage/v6/datetime/localization/custom-locale/index.md
 rename static/usage/{ => v6}/datetime/localization/custom-locale/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/localization/custom-locale/react.md (100%)
 rename static/usage/{ => v6}/datetime/localization/custom-locale/vue.md (100%)
 rename static/usage/{ => v6}/datetime/localization/first-day-of-week/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/localization/first-day-of-week/demo.html
 create mode 100644 static/usage/v6/datetime/localization/first-day-of-week/index.md
 rename static/usage/{ => v6}/datetime/localization/first-day-of-week/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/localization/first-day-of-week/react.md (100%)
 rename static/usage/{ => v6}/datetime/localization/first-day-of-week/vue.md (100%)
 rename static/usage/{ => v6}/datetime/localization/hour-cycle/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/localization/hour-cycle/demo.html
 create mode 100644 static/usage/v6/datetime/localization/hour-cycle/index.md
 rename static/usage/{ => v6}/datetime/localization/hour-cycle/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/localization/hour-cycle/react.md (100%)
 rename static/usage/{ => v6}/datetime/localization/hour-cycle/vue.md (100%)
 rename static/usage/{ => v6}/datetime/localization/locale-extension-tags/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/localization/locale-extension-tags/demo.html
 create mode 100644 static/usage/v6/datetime/localization/locale-extension-tags/index.md
 rename static/usage/{ => v6}/datetime/localization/locale-extension-tags/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/localization/locale-extension-tags/react.md (100%)
 rename static/usage/{ => v6}/datetime/localization/locale-extension-tags/vue.md (100%)
 rename static/usage/{ => v6}/datetime/localization/time-label/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/localization/time-label/demo.html
 create mode 100644 static/usage/v6/datetime/localization/time-label/index.md
 rename static/usage/{ => v6}/datetime/localization/time-label/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/localization/time-label/react.md (100%)
 rename static/usage/{ => v6}/datetime/localization/time-label/vue.md (100%)
 rename static/usage/{ => v6}/datetime/multiple/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/multiple/demo.html
 create mode 100644 static/usage/v6/datetime/multiple/index.md
 rename static/usage/{ => v6}/datetime/multiple/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/multiple/react.md (100%)
 rename static/usage/{ => v6}/datetime/multiple/vue.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/date/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/presentation/date/demo.html
 create mode 100644 static/usage/v6/datetime/presentation/date/index.md
 rename static/usage/{ => v6}/datetime/presentation/date/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/date/react.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/date/vue.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/month-and-year/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/presentation/month-and-year/demo.html
 create mode 100644 static/usage/v6/datetime/presentation/month-and-year/index.md
 rename static/usage/{ => v6}/datetime/presentation/month-and-year/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/month-and-year/react.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/month-and-year/vue.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/time/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/presentation/time/demo.html
 create mode 100644 static/usage/v6/datetime/presentation/time/index.md
 rename static/usage/{ => v6}/datetime/presentation/time/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/time/react.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/time/vue.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/wheel/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/presentation/wheel/demo.html
 create mode 100644 static/usage/v6/datetime/presentation/wheel/index.md
 rename static/usage/{ => v6}/datetime/presentation/wheel/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/wheel/react.md (100%)
 rename static/usage/{ => v6}/datetime/presentation/wheel/vue.md (100%)
 rename static/usage/{ => v6}/datetime/theming/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/datetime/theming/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/datetime/theming/demo.html
 create mode 100644 static/usage/v6/datetime/theming/index.md
 rename static/usage/{ => v6}/datetime/theming/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/theming/react/main_css.md (100%)
 rename static/usage/{ => v6}/datetime/theming/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/datetime/theming/vue.md (100%)
 rename static/usage/{ => v6}/datetime/title/customizing-title/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/title/customizing-title/demo.html
 create mode 100644 static/usage/v6/datetime/title/customizing-title/index.md
 rename static/usage/{ => v6}/datetime/title/customizing-title/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/title/customizing-title/react.md (100%)
 rename static/usage/{ => v6}/datetime/title/customizing-title/vue.md (100%)
 rename static/usage/{ => v6}/datetime/title/showing-default-title/angular.md (100%)
 create mode 100644 static/usage/v6/datetime/title/showing-default-title/demo.html
 create mode 100644 static/usage/v6/datetime/title/showing-default-title/index.md
 rename static/usage/{ => v6}/datetime/title/showing-default-title/javascript.md (100%)
 rename static/usage/{ => v6}/datetime/title/showing-default-title/react.md (100%)
 rename static/usage/{ => v6}/datetime/title/showing-default-title/vue.md (100%)
 rename static/usage/{ => v6}/fab/basic/angular.md (100%)
 create mode 100644 static/usage/v6/fab/basic/demo.html
 create mode 100644 static/usage/v6/fab/basic/index.md
 rename static/usage/{ => v6}/fab/basic/javascript.md (100%)
 rename static/usage/{ => v6}/fab/basic/react.md (100%)
 rename static/usage/{ => v6}/fab/basic/vue.md (100%)
 rename static/usage/{ => v6}/fab/button-sizing/angular.md (100%)
 create mode 100644 static/usage/v6/fab/button-sizing/demo.html
 create mode 100644 static/usage/v6/fab/button-sizing/index.md
 rename static/usage/{ => v6}/fab/button-sizing/javascript.md (100%)
 rename static/usage/{ => v6}/fab/button-sizing/react.md (100%)
 rename static/usage/{ => v6}/fab/button-sizing/vue.md (100%)
 rename static/usage/{ => v6}/fab/list-side/angular.md (100%)
 create mode 100644 static/usage/v6/fab/list-side/demo.html
 create mode 100644 static/usage/v6/fab/list-side/index.md
 rename static/usage/{ => v6}/fab/list-side/javascript.md (100%)
 rename static/usage/{ => v6}/fab/list-side/react.md (100%)
 rename static/usage/{ => v6}/fab/list-side/vue.md (100%)
 rename static/usage/{ => v6}/fab/positioning/angular.md (100%)
 create mode 100644 static/usage/v6/fab/positioning/demo.html
 create mode 100644 static/usage/v6/fab/positioning/index.md
 rename static/usage/{ => v6}/fab/positioning/javascript.md (100%)
 rename static/usage/{ => v6}/fab/positioning/react.md (100%)
 rename static/usage/{ => v6}/fab/positioning/vue.md (100%)
 rename static/usage/{ => v6}/fab/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/fab/theming/colors/demo.html
 create mode 100644 static/usage/v6/fab/theming/colors/index.md
 rename static/usage/{ => v6}/fab/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/fab/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/fab/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-custom-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-custom-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/fab/theming/css-custom-properties/demo.html
 create mode 100644 static/usage/v6/fab/theming/css-custom-properties/index.md
 rename static/usage/{ => v6}/fab/theming/css-custom-properties/javascript.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-custom-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-custom-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-custom-properties/vue.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/fab/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/fab/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/fab/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/fab/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/footer/basic/angular.md (100%)
 create mode 100644 static/usage/v6/footer/basic/demo.html
 create mode 100644 static/usage/v6/footer/basic/index.md
 rename static/usage/{ => v6}/footer/basic/javascript.md (100%)
 rename static/usage/{ => v6}/footer/basic/react.md (100%)
 rename static/usage/{ => v6}/footer/basic/vue.md (100%)
 rename static/usage/{ => v6}/footer/custom-scroll-target/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/footer/custom-scroll-target/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/footer/custom-scroll-target/demo.html
 create mode 100644 static/usage/v6/footer/custom-scroll-target/index.md
 rename static/usage/{ => v6}/footer/custom-scroll-target/javascript.md (100%)
 rename static/usage/{ => v6}/footer/custom-scroll-target/react/main_css.md (100%)
 rename static/usage/{ => v6}/footer/custom-scroll-target/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/footer/custom-scroll-target/vue.md (100%)
 rename static/usage/{ => v6}/footer/fade/angular.md (100%)
 create mode 100644 static/usage/v6/footer/fade/demo.html
 create mode 100644 static/usage/v6/footer/fade/index.md
 rename static/usage/{ => v6}/footer/fade/javascript.md (100%)
 rename static/usage/{ => v6}/footer/fade/react.md (100%)
 rename static/usage/{ => v6}/footer/fade/vue.md (100%)
 rename static/usage/{ => v6}/footer/no-border/angular.md (100%)
 create mode 100644 static/usage/v6/footer/no-border/demo.html
 create mode 100644 static/usage/v6/footer/no-border/index.md
 rename static/usage/{ => v6}/footer/no-border/javascript.md (100%)
 rename static/usage/{ => v6}/footer/no-border/react.md (100%)
 rename static/usage/{ => v6}/footer/no-border/vue.md (100%)
 rename static/usage/{ => v6}/footer/translucent/angular.md (100%)
 create mode 100644 static/usage/v6/footer/translucent/demo.html
 create mode 100644 static/usage/v6/footer/translucent/index.md
 rename static/usage/{ => v6}/footer/translucent/javascript.md (100%)
 rename static/usage/{ => v6}/footer/translucent/react.md (100%)
 rename static/usage/{ => v6}/footer/translucent/vue.md (100%)
 rename static/usage/{ => v6}/grid/basic/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/basic/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/basic/demo.html
 create mode 100644 static/usage/v6/grid/basic/index.md
 rename static/usage/{ => v6}/grid/basic/javascript.md (100%)
 rename static/usage/{ => v6}/grid/basic/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/basic/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/basic/vue.md (100%)
 rename static/usage/{ => v6}/grid/customizing/column-number/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/customizing/column-number/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/customizing/column-number/demo.html
 create mode 100644 static/usage/v6/grid/customizing/column-number/index.md
 rename static/usage/{ => v6}/grid/customizing/column-number/javascript.md (100%)
 rename static/usage/{ => v6}/grid/customizing/column-number/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/customizing/column-number/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/customizing/column-number/vue.md (100%)
 rename static/usage/{ => v6}/grid/customizing/padding/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/customizing/padding/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/customizing/padding/demo.html
 create mode 100644 static/usage/v6/grid/customizing/padding/index.md
 rename static/usage/{ => v6}/grid/customizing/padding/javascript.md (100%)
 rename static/usage/{ => v6}/grid/customizing/padding/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/customizing/padding/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/customizing/padding/vue.md (100%)
 rename static/usage/{ => v6}/grid/customizing/width/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/customizing/width/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/customizing/width/demo.html
 create mode 100644 static/usage/v6/grid/customizing/width/index.md
 rename static/usage/{ => v6}/grid/customizing/width/javascript.md (100%)
 rename static/usage/{ => v6}/grid/customizing/width/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/customizing/width/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/customizing/width/vue.md (100%)
 rename static/usage/{ => v6}/grid/fixed/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/fixed/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/fixed/demo.html
 create mode 100644 static/usage/v6/grid/fixed/index.md
 rename static/usage/{ => v6}/grid/fixed/javascript.md (100%)
 rename static/usage/{ => v6}/grid/fixed/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/fixed/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/fixed/vue.md (100%)
 rename static/usage/{ => v6}/grid/horizontal-alignment/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/horizontal-alignment/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/horizontal-alignment/demo.html
 create mode 100644 static/usage/v6/grid/horizontal-alignment/index.md
 rename static/usage/{ => v6}/grid/horizontal-alignment/javascript.md (100%)
 rename static/usage/{ => v6}/grid/horizontal-alignment/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/horizontal-alignment/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/horizontal-alignment/vue.md (100%)
 rename static/usage/{ => v6}/grid/offset-responsive/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/offset-responsive/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/offset-responsive/demo.html
 create mode 100644 static/usage/v6/grid/offset-responsive/index.md
 rename static/usage/{ => v6}/grid/offset-responsive/javascript.md (100%)
 rename static/usage/{ => v6}/grid/offset-responsive/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/offset-responsive/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/offset-responsive/vue.md (100%)
 rename static/usage/{ => v6}/grid/offset/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/offset/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/offset/demo.html
 create mode 100644 static/usage/v6/grid/offset/index.md
 rename static/usage/{ => v6}/grid/offset/javascript.md (100%)
 rename static/usage/{ => v6}/grid/offset/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/offset/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/offset/vue.md (100%)
 rename static/usage/{ => v6}/grid/push-pull-responsive/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/push-pull-responsive/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/push-pull-responsive/demo.html
 create mode 100644 static/usage/v6/grid/push-pull-responsive/index.md
 rename static/usage/{ => v6}/grid/push-pull-responsive/javascript.md (100%)
 rename static/usage/{ => v6}/grid/push-pull-responsive/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/push-pull-responsive/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/push-pull-responsive/vue.md (100%)
 rename static/usage/{ => v6}/grid/push-pull/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/push-pull/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/push-pull/demo.html
 create mode 100644 static/usage/v6/grid/push-pull/index.md
 rename static/usage/{ => v6}/grid/push-pull/javascript.md (100%)
 rename static/usage/{ => v6}/grid/push-pull/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/push-pull/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/push-pull/vue.md (100%)
 rename static/usage/{ => v6}/grid/size-auto/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/size-auto/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/size-auto/demo.html
 create mode 100644 static/usage/v6/grid/size-auto/index.md
 rename static/usage/{ => v6}/grid/size-auto/javascript.md (100%)
 rename static/usage/{ => v6}/grid/size-auto/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/size-auto/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/size-auto/vue.md (100%)
 rename static/usage/{ => v6}/grid/size-responsive/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/size-responsive/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/size-responsive/demo.html
 create mode 100644 static/usage/v6/grid/size-responsive/index.md
 rename static/usage/{ => v6}/grid/size-responsive/javascript.md (100%)
 rename static/usage/{ => v6}/grid/size-responsive/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/size-responsive/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/size-responsive/vue.md (100%)
 rename static/usage/{ => v6}/grid/size/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/size/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/size/demo.html
 create mode 100644 static/usage/v6/grid/size/index.md
 rename static/usage/{ => v6}/grid/size/javascript.md (100%)
 rename static/usage/{ => v6}/grid/size/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/size/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/size/vue.md (100%)
 rename static/usage/{ => v6}/grid/vertical-alignment/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/grid/vertical-alignment/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/grid/vertical-alignment/demo.html
 create mode 100644 static/usage/v6/grid/vertical-alignment/index.md
 rename static/usage/{ => v6}/grid/vertical-alignment/javascript.md (100%)
 rename static/usage/{ => v6}/grid/vertical-alignment/react/main_css.md (100%)
 rename static/usage/{ => v6}/grid/vertical-alignment/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/grid/vertical-alignment/vue.md (100%)
 rename static/usage/{ => v6}/header/basic/angular.md (100%)
 create mode 100644 static/usage/v6/header/basic/demo.html
 create mode 100644 static/usage/v6/header/basic/index.md
 rename static/usage/{ => v6}/header/basic/javascript.md (100%)
 rename static/usage/{ => v6}/header/basic/react.md (100%)
 rename static/usage/{ => v6}/header/basic/vue.md (100%)
 rename static/usage/{ => v6}/header/condense/angular.md (100%)
 create mode 100644 static/usage/v6/header/condense/demo.html
 create mode 100644 static/usage/v6/header/condense/index.md
 rename static/usage/{ => v6}/header/condense/javascript.md (100%)
 rename static/usage/{ => v6}/header/condense/react.md (100%)
 rename static/usage/{ => v6}/header/condense/vue.md (100%)
 rename static/usage/{ => v6}/header/custom-scroll-target/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/header/custom-scroll-target/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/header/custom-scroll-target/demo.html
 create mode 100644 static/usage/v6/header/custom-scroll-target/index.md
 rename static/usage/{ => v6}/header/custom-scroll-target/javascript.md (100%)
 rename static/usage/{ => v6}/header/custom-scroll-target/react/main_css.md (100%)
 rename static/usage/{ => v6}/header/custom-scroll-target/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/header/custom-scroll-target/vue.md (100%)
 rename static/usage/{ => v6}/header/fade/angular.md (100%)
 create mode 100644 static/usage/v6/header/fade/demo.html
 create mode 100644 static/usage/v6/header/fade/index.md
 rename static/usage/{ => v6}/header/fade/javascript.md (100%)
 rename static/usage/{ => v6}/header/fade/react.md (100%)
 rename static/usage/{ => v6}/header/fade/vue.md (100%)
 rename static/usage/{ => v6}/header/no-border/angular.md (100%)
 create mode 100644 static/usage/v6/header/no-border/demo.html
 create mode 100644 static/usage/v6/header/no-border/index.md
 rename static/usage/{ => v6}/header/no-border/javascript.md (100%)
 rename static/usage/{ => v6}/header/no-border/react.md (100%)
 rename static/usage/{ => v6}/header/no-border/vue.md (100%)
 rename static/usage/{ => v6}/header/translucent/angular.md (100%)
 create mode 100644 static/usage/v6/header/translucent/demo.html
 create mode 100644 static/usage/v6/header/translucent/index.md
 rename static/usage/{ => v6}/header/translucent/javascript.md (100%)
 rename static/usage/{ => v6}/header/translucent/react.md (100%)
 rename static/usage/{ => v6}/header/translucent/vue.md (100%)
 rename static/usage/{ => v6}/img/basic/angular.md (100%)
 create mode 100644 static/usage/v6/img/basic/demo.html
 create mode 100644 static/usage/v6/img/basic/index.md
 rename static/usage/{ => v6}/img/basic/javascript.md (100%)
 rename static/usage/{ => v6}/img/basic/react.md (100%)
 rename static/usage/{ => v6}/img/basic/vue.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/basic/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/basic/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/infinite-scroll/basic/demo.html
 create mode 100644 static/usage/v6/infinite-scroll/basic/index.md
 rename static/usage/{ => v6}/infinite-scroll/basic/javascript.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/basic/react.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/basic/vue.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html
 create mode 100644 static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
 rename static/usage/{ => v6}/infinite-scroll/custom-infinite-scroll-content/javascript.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/custom-infinite-scroll-content/react/main_css.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/custom-infinite-scroll-content/vue.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/infinite-scroll-content/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
 create mode 100644 static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
 rename static/usage/{ => v6}/infinite-scroll/infinite-scroll-content/javascript.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/infinite-scroll-content/react.md (100%)
 rename static/usage/{ => v6}/infinite-scroll/infinite-scroll-content/vue.md (100%)
 rename static/usage/{ => v6}/input/basic/angular.md (100%)
 create mode 100644 static/usage/v6/input/basic/demo.html
 create mode 100644 static/usage/v6/input/basic/index.md
 rename static/usage/{ => v6}/input/basic/javascript.md (100%)
 rename static/usage/{ => v6}/input/basic/react.md (100%)
 rename static/usage/{ => v6}/input/basic/vue.md (100%)
 rename static/usage/{ => v6}/input/clear/angular.md (100%)
 create mode 100644 static/usage/v6/input/clear/demo.html
 create mode 100644 static/usage/v6/input/clear/index.md
 rename static/usage/{ => v6}/input/clear/javascript.md (100%)
 rename static/usage/{ => v6}/input/clear/react.md (100%)
 rename static/usage/{ => v6}/input/clear/vue.md (100%)
 rename static/usage/{ => v6}/input/fill/angular.md (100%)
 create mode 100644 static/usage/v6/input/fill/demo.html
 create mode 100644 static/usage/v6/input/fill/index.md
 rename static/usage/{ => v6}/input/fill/javascript.md (100%)
 rename static/usage/{ => v6}/input/fill/react.md (100%)
 rename static/usage/{ => v6}/input/fill/vue.md (100%)
 rename static/usage/{ => v6}/input/labels/angular.md (100%)
 create mode 100644 static/usage/v6/input/labels/demo.html
 create mode 100644 static/usage/v6/input/labels/index.md
 rename static/usage/{ => v6}/input/labels/javascript.md (100%)
 rename static/usage/{ => v6}/input/labels/react.md (100%)
 rename static/usage/{ => v6}/input/labels/vue.md (100%)
 rename static/usage/{ => v6}/input/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/input/theming/colors/demo.html
 create mode 100644 static/usage/v6/input/theming/colors/index.md
 rename static/usage/{ => v6}/input/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/input/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/input/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/input/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/input/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/input/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/input/theming/css-properties/index.md
 rename static/usage/{ => v6}/input/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/input/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/input/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/input/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/input/types/angular.md (100%)
 create mode 100644 static/usage/v6/input/types/demo.html
 create mode 100644 static/usage/v6/input/types/index.md
 rename static/usage/{ => v6}/input/types/javascript.md (100%)
 rename static/usage/{ => v6}/input/types/react.md (100%)
 rename static/usage/{ => v6}/input/types/vue.md (100%)
 rename static/usage/{ => v6}/item-divider/basic/angular.md (100%)
 create mode 100644 static/usage/v6/item-divider/basic/demo.html
 create mode 100644 static/usage/v6/item-divider/basic/index.md
 rename static/usage/{ => v6}/item-divider/basic/javascript.md (100%)
 rename static/usage/{ => v6}/item-divider/basic/react.md (100%)
 rename static/usage/{ => v6}/item-divider/basic/vue.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/item-divider/theming/colors/demo.html
 create mode 100644 static/usage/v6/item-divider/theming/colors/index.md
 rename static/usage/{ => v6}/item-divider/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/item-divider/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/item-divider/theming/css-properties/index.md
 rename static/usage/{ => v6}/item-divider/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/item-divider/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/item-group/basic/angular.md (100%)
 create mode 100644 static/usage/v6/item-group/basic/demo.html
 create mode 100644 static/usage/v6/item-group/basic/index.md
 rename static/usage/{ => v6}/item-group/basic/javascript.md (100%)
 rename static/usage/{ => v6}/item-group/basic/react.md (100%)
 rename static/usage/{ => v6}/item-group/basic/vue.md (100%)
 rename static/usage/{ => v6}/item-group/sliding-items/angular.md (100%)
 create mode 100644 static/usage/v6/item-group/sliding-items/demo.html
 create mode 100644 static/usage/v6/item-group/sliding-items/index.md
 rename static/usage/{ => v6}/item-group/sliding-items/javascript.md (100%)
 rename static/usage/{ => v6}/item-group/sliding-items/react.md (100%)
 rename static/usage/{ => v6}/item-group/sliding-items/vue.md (100%)
 rename static/usage/{ => v6}/item-sliding/basic/angular.md (100%)
 create mode 100644 static/usage/v6/item-sliding/basic/demo.html
 create mode 100644 static/usage/v6/item-sliding/basic/index.md
 rename static/usage/{ => v6}/item-sliding/basic/javascript.md (100%)
 rename static/usage/{ => v6}/item-sliding/basic/react.md (100%)
 rename static/usage/{ => v6}/item-sliding/basic/vue.md (100%)
 rename static/usage/{ => v6}/item-sliding/expandable/angular.md (100%)
 create mode 100644 static/usage/v6/item-sliding/expandable/demo.html
 create mode 100644 static/usage/v6/item-sliding/expandable/index.md
 rename static/usage/{ => v6}/item-sliding/expandable/javascript.md (100%)
 rename static/usage/{ => v6}/item-sliding/expandable/react.md (100%)
 rename static/usage/{ => v6}/item-sliding/expandable/vue.md (100%)
 rename static/usage/{ => v6}/item-sliding/icons/angular.md (100%)
 create mode 100644 static/usage/v6/item-sliding/icons/demo.html
 create mode 100644 static/usage/v6/item-sliding/icons/index.md
 rename static/usage/{ => v6}/item-sliding/icons/javascript.md (100%)
 rename static/usage/{ => v6}/item-sliding/icons/react.md (100%)
 rename static/usage/{ => v6}/item-sliding/icons/vue.md (100%)
 rename static/usage/{ => v6}/item/basic/angular.md (100%)
 create mode 100644 static/usage/v6/item/basic/demo.html
 create mode 100644 static/usage/v6/item/basic/index.md
 rename static/usage/{ => v6}/item/basic/javascript.md (100%)
 rename static/usage/{ => v6}/item/basic/react.md (100%)
 rename static/usage/{ => v6}/item/basic/vue.md (100%)
 rename static/usage/{ => v6}/item/buttons/angular.md (100%)
 create mode 100644 static/usage/v6/item/buttons/demo.html
 create mode 100644 static/usage/v6/item/buttons/index.md
 rename static/usage/{ => v6}/item/buttons/javascript.md (100%)
 rename static/usage/{ => v6}/item/buttons/react.md (100%)
 rename static/usage/{ => v6}/item/buttons/vue.md (100%)
 rename static/usage/{ => v6}/item/clickable/angular.md (100%)
 create mode 100644 static/usage/v6/item/clickable/demo.html
 create mode 100644 static/usage/v6/item/clickable/index.md
 rename static/usage/{ => v6}/item/clickable/javascript.md (100%)
 rename static/usage/{ => v6}/item/clickable/react.md (100%)
 rename static/usage/{ => v6}/item/clickable/vue.md (100%)
 rename static/usage/{ => v6}/item/counter/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/item/counter/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/item/counter/demo.html
 create mode 100644 static/usage/v6/item/counter/index.md
 rename static/usage/{ => v6}/item/counter/javascript.md (100%)
 rename static/usage/{ => v6}/item/counter/react.md (100%)
 rename static/usage/{ => v6}/item/counter/vue.md (100%)
 rename static/usage/{ => v6}/item/detail-arrows/angular.md (100%)
 create mode 100644 static/usage/v6/item/detail-arrows/demo.html
 create mode 100644 static/usage/v6/item/detail-arrows/index.md
 rename static/usage/{ => v6}/item/detail-arrows/javascript.md (100%)
 rename static/usage/{ => v6}/item/detail-arrows/react.md (100%)
 rename static/usage/{ => v6}/item/detail-arrows/vue.md (100%)
 rename static/usage/{ => v6}/item/helper-error/angular.md (100%)
 create mode 100644 static/usage/v6/item/helper-error/demo.html
 create mode 100644 static/usage/v6/item/helper-error/index.md
 rename static/usage/{ => v6}/item/helper-error/javascript.md (100%)
 rename static/usage/{ => v6}/item/helper-error/react.md (100%)
 rename static/usage/{ => v6}/item/helper-error/vue.md (100%)
 rename static/usage/{ => v6}/item/icons/angular.md (100%)
 create mode 100644 static/usage/v6/item/icons/demo.html
 create mode 100644 static/usage/v6/item/icons/index.md
 rename static/usage/{ => v6}/item/icons/javascript.md (100%)
 rename static/usage/{ => v6}/item/icons/react.md (100%)
 rename static/usage/{ => v6}/item/icons/vue.md (100%)
 rename static/usage/{ => v6}/item/inputs/angular.md (100%)
 create mode 100644 static/usage/v6/item/inputs/demo.html
 create mode 100644 static/usage/v6/item/inputs/index.md
 rename static/usage/{ => v6}/item/inputs/javascript.md (100%)
 rename static/usage/{ => v6}/item/inputs/react.md (100%)
 rename static/usage/{ => v6}/item/inputs/vue.md (100%)
 rename static/usage/{ => v6}/item/lines/angular.md (100%)
 create mode 100644 static/usage/v6/item/lines/demo.html
 create mode 100644 static/usage/v6/item/lines/index.md
 rename static/usage/{ => v6}/item/lines/javascript.md (100%)
 rename static/usage/{ => v6}/item/lines/react.md (100%)
 rename static/usage/{ => v6}/item/lines/vue.md (100%)
 rename static/usage/{ => v6}/item/media/angular.md (100%)
 create mode 100644 static/usage/v6/item/media/demo.html
 create mode 100644 static/usage/v6/item/media/index.md
 rename static/usage/{ => v6}/item/media/javascript.md (100%)
 rename static/usage/{ => v6}/item/media/react.md (100%)
 rename static/usage/{ => v6}/item/media/vue.md (100%)
 rename static/usage/{ => v6}/item/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/item/theming/colors/demo.html
 create mode 100644 static/usage/v6/item/theming/colors/index.md
 rename static/usage/{ => v6}/item/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/item/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/item/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/item/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/item/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/item/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/item/theming/css-properties/index.md
 rename static/usage/{ => v6}/item/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/item/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/item/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/item/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/item/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/item/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/item/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/item/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/item/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/item/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/item/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/item/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/item/theming/input-highlight/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/item/theming/input-highlight/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/item/theming/input-highlight/demo.html
 create mode 100644 static/usage/v6/item/theming/input-highlight/index.md
 rename static/usage/{ => v6}/item/theming/input-highlight/javascript.md (100%)
 rename static/usage/{ => v6}/item/theming/input-highlight/react/main_css.md (100%)
 rename static/usage/{ => v6}/item/theming/input-highlight/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/item/theming/input-highlight/vue.md (100%)
 rename static/usage/{ => v6}/label/basic/angular.md (100%)
 create mode 100644 static/usage/v6/label/basic/demo.html
 create mode 100644 static/usage/v6/label/basic/index.md
 rename static/usage/{ => v6}/label/basic/javascript.md (100%)
 rename static/usage/{ => v6}/label/basic/react.md (100%)
 rename static/usage/{ => v6}/label/basic/vue.md (100%)
 rename static/usage/{ => v6}/label/input/angular.md (100%)
 create mode 100644 static/usage/v6/label/input/demo.html
 create mode 100644 static/usage/v6/label/input/index.md
 rename static/usage/{ => v6}/label/input/javascript.md (100%)
 rename static/usage/{ => v6}/label/input/react.md (100%)
 rename static/usage/{ => v6}/label/input/vue.md (100%)
 rename static/usage/{ => v6}/label/item/angular.md (100%)
 create mode 100644 static/usage/v6/label/item/demo.html
 create mode 100644 static/usage/v6/label/item/index.md
 rename static/usage/{ => v6}/label/item/javascript.md (100%)
 rename static/usage/{ => v6}/label/item/react.md (100%)
 rename static/usage/{ => v6}/label/item/vue.md (100%)
 rename static/usage/{ => v6}/label/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/label/theming/colors/demo.html
 create mode 100644 static/usage/v6/label/theming/colors/index.md
 rename static/usage/{ => v6}/label/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/label/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/label/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/list-header/basic/angular.md (100%)
 create mode 100644 static/usage/v6/list-header/basic/demo.html
 create mode 100644 static/usage/v6/list-header/basic/index.md
 rename static/usage/{ => v6}/list-header/basic/javascript.md (100%)
 rename static/usage/{ => v6}/list-header/basic/react.md (100%)
 rename static/usage/{ => v6}/list-header/basic/vue.md (100%)
 rename static/usage/{ => v6}/list-header/buttons/angular.md (100%)
 create mode 100644 static/usage/v6/list-header/buttons/demo.html
 create mode 100644 static/usage/v6/list-header/buttons/index.md
 rename static/usage/{ => v6}/list-header/buttons/javascript.md (100%)
 rename static/usage/{ => v6}/list-header/buttons/react.md (100%)
 rename static/usage/{ => v6}/list-header/buttons/vue.md (100%)
 rename static/usage/{ => v6}/list-header/lines/angular.md (100%)
 create mode 100644 static/usage/v6/list-header/lines/demo.html
 create mode 100644 static/usage/v6/list-header/lines/index.md
 rename static/usage/{ => v6}/list-header/lines/javascript.md (100%)
 rename static/usage/{ => v6}/list-header/lines/react.md (100%)
 rename static/usage/{ => v6}/list-header/lines/vue.md (100%)
 rename static/usage/{ => v6}/list-header/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/list-header/theming/colors/demo.html
 create mode 100644 static/usage/v6/list-header/theming/colors/index.md
 rename static/usage/{ => v6}/list-header/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/list-header/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/list-header/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/list-header/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/list-header/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/list-header/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/list-header/theming/css-properties/index.md
 rename static/usage/{ => v6}/list-header/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/list-header/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/list-header/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/list-header/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/list/basic/angular.md (100%)
 create mode 100644 static/usage/v6/list/basic/demo.html
 create mode 100644 static/usage/v6/list/basic/index.md
 rename static/usage/{ => v6}/list/basic/javascript.md (100%)
 rename static/usage/{ => v6}/list/basic/react.md (100%)
 rename static/usage/{ => v6}/list/basic/vue.md (100%)
 rename static/usage/{ => v6}/list/inset/angular.md (100%)
 create mode 100644 static/usage/v6/list/inset/demo.html
 create mode 100644 static/usage/v6/list/inset/index.md
 rename static/usage/{ => v6}/list/inset/javascript.md (100%)
 rename static/usage/{ => v6}/list/inset/react.md (100%)
 rename static/usage/{ => v6}/list/inset/vue.md (100%)
 rename static/usage/{ => v6}/list/lines/angular.md (100%)
 create mode 100644 static/usage/v6/list/lines/demo.html
 create mode 100644 static/usage/v6/list/lines/index.md
 rename static/usage/{ => v6}/list/lines/javascript.md (100%)
 rename static/usage/{ => v6}/list/lines/react.md (100%)
 rename static/usage/{ => v6}/list/lines/vue.md (100%)
 rename static/usage/{ => v6}/loading/controller/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/loading/controller/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/loading/controller/demo.html
 create mode 100644 static/usage/v6/loading/controller/index.md
 rename static/usage/{ => v6}/loading/controller/javascript.md (100%)
 rename static/usage/{ => v6}/loading/controller/react.md (100%)
 rename static/usage/{ => v6}/loading/controller/vue.md (100%)
 rename static/usage/{ => v6}/loading/spinners/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/loading/spinners/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/loading/spinners/demo.html
 create mode 100644 static/usage/v6/loading/spinners/index.md
 rename static/usage/{ => v6}/loading/spinners/javascript.md (100%)
 rename static/usage/{ => v6}/loading/spinners/react.md (100%)
 rename static/usage/{ => v6}/loading/spinners/vue.md (100%)
 rename static/usage/{ => v6}/loading/theming/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/loading/theming/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/loading/theming/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/loading/theming/demo.html
 create mode 100644 static/usage/v6/loading/theming/index.md
 rename static/usage/{ => v6}/loading/theming/javascript.md (100%)
 rename static/usage/{ => v6}/loading/theming/react.md (100%)
 rename static/usage/{ => v6}/loading/theming/react/main_css.md (100%)
 rename static/usage/{ => v6}/loading/theming/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/loading/theming/vue.md (100%)
 rename static/usage/{ => v6}/menu/basic/angular.md (100%)
 create mode 100644 static/usage/v6/menu/basic/demo.html
 create mode 100644 static/usage/v6/menu/basic/index.md
 rename static/usage/{ => v6}/menu/basic/javascript.md (100%)
 rename static/usage/{ => v6}/menu/basic/react.md (100%)
 rename static/usage/{ => v6}/menu/basic/vue.md (100%)
 rename static/usage/{ => v6}/menu/theming/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/menu/theming/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/menu/theming/demo.html
 create mode 100644 static/usage/v6/menu/theming/index.md
 rename static/usage/{ => v6}/menu/theming/javascript.md (100%)
 rename static/usage/{ => v6}/menu/theming/react/main_css.md (100%)
 rename static/usage/{ => v6}/menu/theming/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/menu/theming/vue.md (100%)
 rename static/usage/{ => v6}/menu/toggle/angular.md (100%)
 create mode 100644 static/usage/v6/menu/toggle/demo.html
 create mode 100644 static/usage/v6/menu/toggle/index.md
 rename static/usage/{ => v6}/menu/toggle/javascript.md (100%)
 rename static/usage/{ => v6}/menu/toggle/react.md (100%)
 rename static/usage/{ => v6}/menu/toggle/vue.md (100%)
 rename static/usage/{ => v6}/menu/type/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/menu/type/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/menu/type/demo.html
 create mode 100644 static/usage/v6/menu/type/index.md
 rename static/usage/{ => v6}/menu/type/javascript.md (100%)
 rename static/usage/{ => v6}/menu/type/react.md (100%)
 rename static/usage/{ => v6}/menu/type/vue.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/boolean/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/boolean/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/can-dismiss/boolean/demo.html
 create mode 100644 static/usage/v6/modal/can-dismiss/boolean/index.md
 rename static/usage/{ => v6}/modal/can-dismiss/boolean/javascript.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/boolean/react.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/boolean/vue.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/function/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/function/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/can-dismiss/function/demo.html
 create mode 100644 static/usage/v6/modal/can-dismiss/function/index.md
 rename static/usage/{ => v6}/modal/can-dismiss/function/javascript.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/function/react.md (100%)
 rename static/usage/{ => v6}/modal/can-dismiss/function/vue.md (100%)
 rename static/usage/{ => v6}/modal/card/basic/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/card/basic/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/card/basic/demo.html
 create mode 100644 static/usage/v6/modal/card/basic/index.md
 rename static/usage/{ => v6}/modal/card/basic/javascript.md (100%)
 rename static/usage/{ => v6}/modal/card/basic/react.md (100%)
 rename static/usage/{ => v6}/modal/card/basic/vue.md (100%)
 rename static/usage/{ => v6}/modal/controller/angular/app_module_ts.md (100%)
 rename static/usage/{ => v6}/modal/controller/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/controller/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/modal/controller/angular/modal-example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/controller/angular/modal-example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/controller/demo.html
 create mode 100644 static/usage/v6/modal/controller/index.md
 rename static/usage/{ => v6}/modal/controller/javascript.md (100%)
 rename static/usage/{ => v6}/modal/controller/react.md (100%)
 rename static/usage/{ => v6}/modal/controller/vue/example_vue.md (100%)
 rename static/usage/{ => v6}/modal/controller/vue/modal_vue.md (100%)
 rename static/usage/{ => v6}/modal/custom-dialogs/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/custom-dialogs/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/modal/custom-dialogs/demo.html
 create mode 100644 static/usage/v6/modal/custom-dialogs/index.md
 rename static/usage/{ => v6}/modal/custom-dialogs/javascript.md (100%)
 rename static/usage/{ => v6}/modal/custom-dialogs/react/main_css.md (100%)
 rename static/usage/{ => v6}/modal/custom-dialogs/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/modal/custom-dialogs/vue.md (100%)
 rename static/usage/{ => v6}/modal/inline/basic/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/inline/basic/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/inline/basic/demo.html
 create mode 100644 static/usage/v6/modal/inline/basic/index.md
 rename static/usage/{ => v6}/modal/inline/basic/javascript.md (100%)
 rename static/usage/{ => v6}/modal/inline/basic/react.md (100%)
 rename static/usage/{ => v6}/modal/inline/basic/vue.md (100%)
 rename static/usage/{ => v6}/modal/inline/is-open/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/inline/is-open/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/inline/is-open/demo.html
 create mode 100644 static/usage/v6/modal/inline/is-open/index.md
 rename static/usage/{ => v6}/modal/inline/is-open/javascript.md (100%)
 rename static/usage/{ => v6}/modal/inline/is-open/react.md (100%)
 rename static/usage/{ => v6}/modal/inline/is-open/vue.md (100%)
 rename static/usage/{ => v6}/modal/performance/mount/angular.md (100%)
 create mode 100644 static/usage/v6/modal/performance/mount/demo.html
 create mode 100644 static/usage/v6/modal/performance/mount/index.md
 rename static/usage/{ => v6}/modal/performance/mount/javascript.md (100%)
 rename static/usage/{ => v6}/modal/performance/mount/react.md (100%)
 rename static/usage/{ => v6}/modal/performance/mount/vue.md (100%)
 rename static/usage/{ => v6}/modal/sheet/background-content/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/modal/sheet/background-content/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/sheet/background-content/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/sheet/background-content/demo.html
 create mode 100644 static/usage/v6/modal/sheet/background-content/index.md
 rename static/usage/{ => v6}/modal/sheet/background-content/javascript.md (100%)
 rename static/usage/{ => v6}/modal/sheet/background-content/react.md (100%)
 rename static/usage/{ => v6}/modal/sheet/background-content/vue.md (100%)
 rename static/usage/{ => v6}/modal/sheet/basic/angular.md (100%)
 create mode 100644 static/usage/v6/modal/sheet/basic/demo.html
 create mode 100644 static/usage/v6/modal/sheet/basic/index.md
 rename static/usage/{ => v6}/modal/sheet/basic/javascript.md (100%)
 rename static/usage/{ => v6}/modal/sheet/basic/react.md (100%)
 rename static/usage/{ => v6}/modal/sheet/basic/vue.md (100%)
 rename static/usage/{ => v6}/modal/sheet/handle-behavior/angular.md (100%)
 create mode 100644 static/usage/v6/modal/sheet/handle-behavior/demo.html
 create mode 100644 static/usage/v6/modal/sheet/handle-behavior/index.md
 rename static/usage/{ => v6}/modal/sheet/handle-behavior/javascript.md (100%)
 rename static/usage/{ => v6}/modal/sheet/handle-behavior/react.md (100%)
 rename static/usage/{ => v6}/modal/sheet/handle-behavior/vue.md (100%)
 rename static/usage/{ => v6}/modal/styling/animations/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/styling/animations/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/modal/styling/animations/demo.html
 create mode 100644 static/usage/v6/modal/styling/animations/index.md
 rename static/usage/{ => v6}/modal/styling/animations/javascript/index_html.md (100%)
 rename static/usage/{ => v6}/modal/styling/animations/javascript/index_ts.md (100%)
 rename static/usage/{ => v6}/modal/styling/animations/react.md (100%)
 rename static/usage/{ => v6}/modal/styling/animations/vue.md (100%)
 rename static/usage/{ => v6}/modal/styling/theming/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/modal/styling/theming/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/modal/styling/theming/demo.html
 create mode 100644 static/usage/v6/modal/styling/theming/index.md
 rename static/usage/{ => v6}/modal/styling/theming/javascript.md (100%)
 rename static/usage/{ => v6}/modal/styling/theming/react/main_css.md (100%)
 rename static/usage/{ => v6}/modal/styling/theming/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/modal/styling/theming/vue.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/angular/app_module_ts.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/angular/page_one_component_ts.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/angular/page_three_component_ts.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/angular/page_two_component_ts.md (100%)
 create mode 100644 static/usage/v6/nav/modal-navigation/demo.html
 create mode 100644 static/usage/v6/nav/modal-navigation/index.md
 rename static/usage/{ => v6}/nav/modal-navigation/javascript.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/react/page_one_tsx.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/react/page_three_tsx.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/react/page_two_tsx.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/vue/example_vue.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/vue/page_one_vue.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/vue/page_three_vue.md (100%)
 rename static/usage/{ => v6}/nav/modal-navigation/vue/page_two_vue.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/angular/app_module_ts.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/angular/page_one_component_ts.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/angular/page_three_component_ts.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/angular/page_two_component_ts.md (100%)
 create mode 100644 static/usage/v6/nav/nav-link/demo.html
 create mode 100644 static/usage/v6/nav/nav-link/index.md
 rename static/usage/{ => v6}/nav/nav-link/javascript.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/react/page_one_tsx.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/react/page_three_tsx.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/react/page_two_tsx.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/vue/example_vue.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/vue/page_one_vue.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/vue/page_three_vue.md (100%)
 rename static/usage/{ => v6}/nav/nav-link/vue/page_two_vue.md (100%)
 rename static/usage/{ => v6}/note/basic/angular.md (100%)
 create mode 100644 static/usage/v6/note/basic/demo.html
 create mode 100644 static/usage/v6/note/basic/index.md
 rename static/usage/{ => v6}/note/basic/javascript.md (100%)
 rename static/usage/{ => v6}/note/basic/react.md (100%)
 rename static/usage/{ => v6}/note/basic/vue.md (100%)
 rename static/usage/{ => v6}/note/item/angular.md (100%)
 create mode 100644 static/usage/v6/note/item/demo.html
 create mode 100644 static/usage/v6/note/item/index.md
 rename static/usage/{ => v6}/note/item/javascript.md (100%)
 rename static/usage/{ => v6}/note/item/react.md (100%)
 rename static/usage/{ => v6}/note/item/vue.md (100%)
 rename static/usage/{ => v6}/note/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/note/theming/colors/demo.html
 create mode 100644 static/usage/v6/note/theming/colors/index.md
 rename static/usage/{ => v6}/note/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/note/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/note/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/note/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/note/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/note/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/note/theming/css-properties/index.md
 rename static/usage/{ => v6}/note/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/note/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/note/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/note/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/picker/multiple-column/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/picker/multiple-column/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/picker/multiple-column/demo.html
 create mode 100644 static/usage/v6/picker/multiple-column/index.md
 rename static/usage/{ => v6}/picker/multiple-column/javascript.md (100%)
 rename static/usage/{ => v6}/picker/multiple-column/react.md (100%)
 rename static/usage/{ => v6}/picker/multiple-column/vue.md (100%)
 rename static/usage/{ => v6}/picker/single-column/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/picker/single-column/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/picker/single-column/demo.html
 create mode 100644 static/usage/v6/picker/single-column/index.md
 rename static/usage/{ => v6}/picker/single-column/javascript.md (100%)
 rename static/usage/{ => v6}/picker/single-column/react.md (100%)
 rename static/usage/{ => v6}/picker/single-column/vue.md (100%)
 rename static/usage/{ => v6}/popover/customization/positioning/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/popover/customization/positioning/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/popover/customization/positioning/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/popover/customization/positioning/demo.html
 create mode 100644 static/usage/v6/popover/customization/positioning/index.md
 rename static/usage/{ => v6}/popover/customization/positioning/javascript.md (100%)
 rename static/usage/{ => v6}/popover/customization/positioning/react/main_css.md (100%)
 rename static/usage/{ => v6}/popover/customization/positioning/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/popover/customization/positioning/vue.md (100%)
 rename static/usage/{ => v6}/popover/customization/sizing/angular.md (100%)
 create mode 100644 static/usage/v6/popover/customization/sizing/demo.html
 create mode 100644 static/usage/v6/popover/customization/sizing/index.md
 rename static/usage/{ => v6}/popover/customization/sizing/javascript.md (100%)
 rename static/usage/{ => v6}/popover/customization/sizing/react.md (100%)
 rename static/usage/{ => v6}/popover/customization/sizing/vue.md (100%)
 rename static/usage/{ => v6}/popover/customization/styling/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/popover/customization/styling/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/popover/customization/styling/demo.html
 create mode 100644 static/usage/v6/popover/customization/styling/index.md
 rename static/usage/{ => v6}/popover/customization/styling/javascript.md (100%)
 rename static/usage/{ => v6}/popover/customization/styling/react/main_css.md (100%)
 rename static/usage/{ => v6}/popover/customization/styling/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/popover/customization/styling/vue.md (100%)
 rename static/usage/{ => v6}/popover/nested/angular.md (100%)
 create mode 100644 static/usage/v6/popover/nested/demo.html
 create mode 100644 static/usage/v6/popover/nested/index.md
 rename static/usage/{ => v6}/popover/nested/javascript.md (100%)
 rename static/usage/{ => v6}/popover/nested/react.md (100%)
 rename static/usage/{ => v6}/popover/nested/vue.md (100%)
 rename static/usage/{ => v6}/popover/performance/mount/angular.md (100%)
 create mode 100644 static/usage/v6/popover/performance/mount/demo.html
 create mode 100644 static/usage/v6/popover/performance/mount/index.md
 rename static/usage/{ => v6}/popover/performance/mount/javascript.md (100%)
 rename static/usage/{ => v6}/popover/performance/mount/react.md (100%)
 rename static/usage/{ => v6}/popover/performance/mount/vue.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/angular/app_module_ts.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/angular/popover_component_html.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/angular/popover_component_ts.md (100%)
 create mode 100644 static/usage/v6/popover/presenting/controller/demo.html
 create mode 100644 static/usage/v6/popover/presenting/controller/index.md
 rename static/usage/{ => v6}/popover/presenting/controller/javascript.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/react.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/vue/example_vue.md (100%)
 rename static/usage/{ => v6}/popover/presenting/controller/vue/popover_vue.md (100%)
 rename static/usage/{ => v6}/popover/presenting/inline-isopen/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/popover/presenting/inline-isopen/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/popover/presenting/inline-isopen/demo.html
 create mode 100644 static/usage/v6/popover/presenting/inline-isopen/index.md
 rename static/usage/{ => v6}/popover/presenting/inline-isopen/javascript.md (100%)
 rename static/usage/{ => v6}/popover/presenting/inline-isopen/react.md (100%)
 rename static/usage/{ => v6}/popover/presenting/inline-isopen/vue.md (100%)
 rename static/usage/{ => v6}/popover/presenting/inline-trigger/angular.md (100%)
 create mode 100644 static/usage/v6/popover/presenting/inline-trigger/demo.html
 create mode 100644 static/usage/v6/popover/presenting/inline-trigger/index.md
 rename static/usage/{ => v6}/popover/presenting/inline-trigger/javascript.md (100%)
 rename static/usage/{ => v6}/popover/presenting/inline-trigger/react.md (100%)
 rename static/usage/{ => v6}/popover/presenting/inline-trigger/vue.md (100%)
 rename static/usage/{ => v6}/progress-bar/buffer/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/progress-bar/buffer/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/progress-bar/buffer/demo.html
 create mode 100644 static/usage/v6/progress-bar/buffer/index.md
 rename static/usage/{ => v6}/progress-bar/buffer/javascript.md (100%)
 rename static/usage/{ => v6}/progress-bar/buffer/react.md (100%)
 rename static/usage/{ => v6}/progress-bar/buffer/vue.md (100%)
 rename static/usage/{ => v6}/progress-bar/determinate/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/progress-bar/determinate/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/progress-bar/determinate/demo.html
 create mode 100644 static/usage/v6/progress-bar/determinate/index.md
 rename static/usage/{ => v6}/progress-bar/determinate/javascript.md (100%)
 rename static/usage/{ => v6}/progress-bar/determinate/react.md (100%)
 rename static/usage/{ => v6}/progress-bar/determinate/vue.md (100%)
 rename static/usage/{ => v6}/progress-bar/indeterminate/angular.md (100%)
 create mode 100644 static/usage/v6/progress-bar/indeterminate/demo.html
 create mode 100644 static/usage/v6/progress-bar/indeterminate/index.md
 rename static/usage/{ => v6}/progress-bar/indeterminate/javascript.md (100%)
 rename static/usage/{ => v6}/progress-bar/indeterminate/react.md (100%)
 rename static/usage/{ => v6}/progress-bar/indeterminate/vue.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/progress-bar/theming/colors/demo.html
 create mode 100644 static/usage/v6/progress-bar/theming/colors/index.md
 rename static/usage/{ => v6}/progress-bar/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/progress-bar/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/progress-bar/theming/css-properties/index.md
 rename static/usage/{ => v6}/progress-bar/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/progress-bar/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/progress-bar/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/radio/basic/angular.md (100%)
 create mode 100644 static/usage/v6/radio/basic/demo.html
 create mode 100644 static/usage/v6/radio/basic/index.md
 rename static/usage/{ => v6}/radio/basic/javascript.md (100%)
 rename static/usage/{ => v6}/radio/basic/react.md (100%)
 rename static/usage/{ => v6}/radio/basic/vue.md (100%)
 rename static/usage/{ => v6}/radio/empty-selection/angular.md (100%)
 create mode 100644 static/usage/v6/radio/empty-selection/demo.html
 create mode 100644 static/usage/v6/radio/empty-selection/index.md
 rename static/usage/{ => v6}/radio/empty-selection/javascript.md (100%)
 rename static/usage/{ => v6}/radio/empty-selection/react.md (100%)
 rename static/usage/{ => v6}/radio/empty-selection/vue.md (100%)
 rename static/usage/{ => v6}/radio/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/radio/theming/colors/demo.html
 create mode 100644 static/usage/v6/radio/theming/colors/index.md
 rename static/usage/{ => v6}/radio/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/radio/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/radio/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/radio/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/radio/theming/css-properties/index.md
 rename static/usage/{ => v6}/radio/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/radio/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/radio/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/radio/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/radio/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/range/basic/angular.md (100%)
 create mode 100644 static/usage/v6/range/basic/demo.html
 create mode 100644 static/usage/v6/range/basic/index.md
 rename static/usage/{ => v6}/range/basic/javascript.md (100%)
 rename static/usage/{ => v6}/range/basic/react.md (100%)
 rename static/usage/{ => v6}/range/basic/vue.md (100%)
 rename static/usage/{ => v6}/range/dual-knobs/angular.md (100%)
 create mode 100644 static/usage/v6/range/dual-knobs/demo.html
 create mode 100644 static/usage/v6/range/dual-knobs/index.md
 rename static/usage/{ => v6}/range/dual-knobs/javascript.md (100%)
 rename static/usage/{ => v6}/range/dual-knobs/react.md (100%)
 rename static/usage/{ => v6}/range/dual-knobs/vue.md (100%)
 rename static/usage/{ => v6}/range/ion-change-event/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/range/ion-change-event/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/range/ion-change-event/demo.html
 create mode 100644 static/usage/v6/range/ion-change-event/index.md
 rename static/usage/{ => v6}/range/ion-change-event/javascript.md (100%)
 rename static/usage/{ => v6}/range/ion-change-event/react.md (100%)
 rename static/usage/{ => v6}/range/ion-change-event/vue.md (100%)
 rename static/usage/{ => v6}/range/ion-knob-move-event/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/range/ion-knob-move-event/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/range/ion-knob-move-event/demo.html
 create mode 100644 static/usage/v6/range/ion-knob-move-event/index.md
 rename static/usage/{ => v6}/range/ion-knob-move-event/javascript.md (100%)
 rename static/usage/{ => v6}/range/ion-knob-move-event/react.md (100%)
 rename static/usage/{ => v6}/range/ion-knob-move-event/vue.md (100%)
 rename static/usage/{ => v6}/range/pins/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/range/pins/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/range/pins/demo.html
 create mode 100644 static/usage/v6/range/pins/index.md
 rename static/usage/{ => v6}/range/pins/javascript.md (100%)
 rename static/usage/{ => v6}/range/pins/react.md (100%)
 rename static/usage/{ => v6}/range/pins/vue.md (100%)
 rename static/usage/{ => v6}/range/slots/angular.md (100%)
 create mode 100644 static/usage/v6/range/slots/demo.html
 create mode 100644 static/usage/v6/range/slots/index.md
 rename static/usage/{ => v6}/range/slots/javascript.md (100%)
 rename static/usage/{ => v6}/range/slots/react.md (100%)
 rename static/usage/{ => v6}/range/slots/vue.md (100%)
 rename static/usage/{ => v6}/range/snapping-ticks/angular.md (100%)
 create mode 100644 static/usage/v6/range/snapping-ticks/demo.html
 create mode 100644 static/usage/v6/range/snapping-ticks/index.md
 rename static/usage/{ => v6}/range/snapping-ticks/javascript.md (100%)
 rename static/usage/{ => v6}/range/snapping-ticks/react.md (100%)
 rename static/usage/{ => v6}/range/snapping-ticks/vue.md (100%)
 rename static/usage/{ => v6}/range/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/range/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/range/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/range/theming/css-properties/index.md
 rename static/usage/{ => v6}/range/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/range/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/range/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/range/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/range/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/range/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/range/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/range/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/range/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/range/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/range/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/range/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/refresher/advanced/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/refresher/advanced/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/refresher/advanced/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/refresher/advanced/demo.html
 create mode 100644 static/usage/v6/refresher/advanced/index.md
 rename static/usage/{ => v6}/refresher/advanced/javascript.md (100%)
 rename static/usage/{ => v6}/refresher/advanced/react/main_css.md (100%)
 rename static/usage/{ => v6}/refresher/advanced/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/refresher/advanced/vue.md (100%)
 rename static/usage/{ => v6}/refresher/basic/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/refresher/basic/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/refresher/basic/demo.html
 create mode 100644 static/usage/v6/refresher/basic/index.md
 rename static/usage/{ => v6}/refresher/basic/javascript.md (100%)
 rename static/usage/{ => v6}/refresher/basic/react.md (100%)
 rename static/usage/{ => v6}/refresher/basic/vue.md (100%)
 rename static/usage/{ => v6}/refresher/custom-content/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/refresher/custom-content/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/refresher/custom-content/demo.html
 create mode 100644 static/usage/v6/refresher/custom-content/index.md
 rename static/usage/{ => v6}/refresher/custom-content/javascript.md (100%)
 rename static/usage/{ => v6}/refresher/custom-content/react.md (100%)
 rename static/usage/{ => v6}/refresher/custom-content/vue.md (100%)
 rename static/usage/{ => v6}/refresher/custom-scroll-target/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/refresher/custom-scroll-target/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/refresher/custom-scroll-target/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/refresher/custom-scroll-target/demo.html
 create mode 100644 static/usage/v6/refresher/custom-scroll-target/index.md
 rename static/usage/{ => v6}/refresher/custom-scroll-target/javascript.md (100%)
 rename static/usage/{ => v6}/refresher/custom-scroll-target/react/main_css.md (100%)
 rename static/usage/{ => v6}/refresher/custom-scroll-target/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/refresher/custom-scroll-target/vue.md (100%)
 rename static/usage/{ => v6}/refresher/pull-properties/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/refresher/pull-properties/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/refresher/pull-properties/demo.html
 create mode 100644 static/usage/v6/refresher/pull-properties/index.md
 rename static/usage/{ => v6}/refresher/pull-properties/javascript.md (100%)
 rename static/usage/{ => v6}/refresher/pull-properties/react.md (100%)
 rename static/usage/{ => v6}/refresher/pull-properties/vue.md (100%)
 rename static/usage/{ => v6}/reorder/basic/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/reorder/basic/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/reorder/basic/demo.html
 create mode 100644 static/usage/v6/reorder/basic/index.md
 rename static/usage/{ => v6}/reorder/basic/javascript.md (100%)
 rename static/usage/{ => v6}/reorder/basic/react.md (100%)
 rename static/usage/{ => v6}/reorder/basic/vue.md (100%)
 rename static/usage/{ => v6}/reorder/custom-icon/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/reorder/custom-icon/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/reorder/custom-icon/demo.html
 create mode 100644 static/usage/v6/reorder/custom-icon/index.md
 rename static/usage/{ => v6}/reorder/custom-icon/javascript.md (100%)
 rename static/usage/{ => v6}/reorder/custom-icon/react.md (100%)
 rename static/usage/{ => v6}/reorder/custom-icon/vue.md (100%)
 rename static/usage/{ => v6}/reorder/custom-scroll-target/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/reorder/custom-scroll-target/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/reorder/custom-scroll-target/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/reorder/custom-scroll-target/demo.html
 create mode 100644 static/usage/v6/reorder/custom-scroll-target/index.md
 rename static/usage/{ => v6}/reorder/custom-scroll-target/javascript.md (100%)
 rename static/usage/{ => v6}/reorder/custom-scroll-target/react/main_css.md (100%)
 rename static/usage/{ => v6}/reorder/custom-scroll-target/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/reorder/custom-scroll-target/vue.md (100%)
 rename static/usage/{ => v6}/reorder/toggling-disabled/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/reorder/toggling-disabled/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/reorder/toggling-disabled/demo.html
 create mode 100644 static/usage/v6/reorder/toggling-disabled/index.md
 rename static/usage/{ => v6}/reorder/toggling-disabled/javascript.md (100%)
 rename static/usage/{ => v6}/reorder/toggling-disabled/react.md (100%)
 rename static/usage/{ => v6}/reorder/toggling-disabled/vue.md (100%)
 rename static/usage/{ => v6}/reorder/updating-data/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/reorder/updating-data/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/reorder/updating-data/demo.html
 create mode 100644 static/usage/v6/reorder/updating-data/index.md
 rename static/usage/{ => v6}/reorder/updating-data/javascript.md (100%)
 rename static/usage/{ => v6}/reorder/updating-data/react.md (100%)
 rename static/usage/{ => v6}/reorder/updating-data/vue.md (100%)
 rename static/usage/{ => v6}/reorder/wrapper/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/reorder/wrapper/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/reorder/wrapper/demo.html
 create mode 100644 static/usage/v6/reorder/wrapper/index.md
 rename static/usage/{ => v6}/reorder/wrapper/javascript.md (100%)
 rename static/usage/{ => v6}/reorder/wrapper/react.md (100%)
 rename static/usage/{ => v6}/reorder/wrapper/vue.md (100%)
 rename static/usage/{ => v6}/ripple-effect/basic/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/ripple-effect/basic/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/ripple-effect/basic/demo.html
 create mode 100644 static/usage/v6/ripple-effect/basic/index.md
 rename static/usage/{ => v6}/ripple-effect/basic/javascript.md (100%)
 rename static/usage/{ => v6}/ripple-effect/basic/react/main_css.md (100%)
 rename static/usage/{ => v6}/ripple-effect/basic/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/ripple-effect/basic/vue.md (100%)
 rename static/usage/{ => v6}/ripple-effect/customizing/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/ripple-effect/customizing/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/ripple-effect/customizing/demo.html
 create mode 100644 static/usage/v6/ripple-effect/customizing/index.md
 rename static/usage/{ => v6}/ripple-effect/customizing/javascript.md (100%)
 rename static/usage/{ => v6}/ripple-effect/customizing/react/main_css.md (100%)
 rename static/usage/{ => v6}/ripple-effect/customizing/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/ripple-effect/customizing/vue.md (100%)
 rename static/usage/{ => v6}/ripple-effect/type/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/ripple-effect/type/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/ripple-effect/type/demo.html
 create mode 100644 static/usage/v6/ripple-effect/type/index.md
 rename static/usage/{ => v6}/ripple-effect/type/javascript.md (100%)
 rename static/usage/{ => v6}/ripple-effect/type/react/main_css.md (100%)
 rename static/usage/{ => v6}/ripple-effect/type/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/ripple-effect/type/vue.md (100%)
 rename static/usage/{ => v6}/searchbar/basic/angular.md (100%)
 create mode 100644 static/usage/v6/searchbar/basic/demo.html
 create mode 100644 static/usage/v6/searchbar/basic/index.md
 rename static/usage/{ => v6}/searchbar/basic/javascript.md (100%)
 rename static/usage/{ => v6}/searchbar/basic/react.md (100%)
 rename static/usage/{ => v6}/searchbar/basic/vue.md (100%)
 rename static/usage/{ => v6}/searchbar/cancel-button/angular.md (100%)
 create mode 100644 static/usage/v6/searchbar/cancel-button/demo.html
 create mode 100644 static/usage/v6/searchbar/cancel-button/index.md
 rename static/usage/{ => v6}/searchbar/cancel-button/javascript.md (100%)
 rename static/usage/{ => v6}/searchbar/cancel-button/react.md (100%)
 rename static/usage/{ => v6}/searchbar/cancel-button/vue.md (100%)
 rename static/usage/{ => v6}/searchbar/clear-button/angular.md (100%)
 create mode 100644 static/usage/v6/searchbar/clear-button/demo.html
 create mode 100644 static/usage/v6/searchbar/clear-button/index.md
 rename static/usage/{ => v6}/searchbar/clear-button/javascript.md (100%)
 rename static/usage/{ => v6}/searchbar/clear-button/react.md (100%)
 rename static/usage/{ => v6}/searchbar/clear-button/vue.md (100%)
 rename static/usage/{ => v6}/searchbar/debounce/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/searchbar/debounce/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/searchbar/debounce/demo.html
 create mode 100644 static/usage/v6/searchbar/debounce/index.md
 rename static/usage/{ => v6}/searchbar/debounce/javascript.md (100%)
 rename static/usage/{ => v6}/searchbar/debounce/react.md (100%)
 rename static/usage/{ => v6}/searchbar/debounce/vue.md (100%)
 rename static/usage/{ => v6}/searchbar/search-icon/angular.md (100%)
 create mode 100644 static/usage/v6/searchbar/search-icon/demo.html
 create mode 100644 static/usage/v6/searchbar/search-icon/index.md
 rename static/usage/{ => v6}/searchbar/search-icon/javascript.md (100%)
 rename static/usage/{ => v6}/searchbar/search-icon/react.md (100%)
 rename static/usage/{ => v6}/searchbar/search-icon/vue.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/searchbar/theming/colors/demo.html
 create mode 100644 static/usage/v6/searchbar/theming/colors/index.md
 rename static/usage/{ => v6}/searchbar/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/searchbar/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/searchbar/theming/css-properties/index.md
 rename static/usage/{ => v6}/searchbar/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/searchbar/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/segment-button/basic/angular.md (100%)
 create mode 100644 static/usage/v6/segment-button/basic/demo.html
 create mode 100644 static/usage/v6/segment-button/basic/index.md
 rename static/usage/{ => v6}/segment-button/basic/javascript.md (100%)
 rename static/usage/{ => v6}/segment-button/basic/react.md (100%)
 rename static/usage/{ => v6}/segment-button/basic/vue.md (100%)
 rename static/usage/{ => v6}/segment-button/layout/angular.md (100%)
 create mode 100644 static/usage/v6/segment-button/layout/demo.html
 create mode 100644 static/usage/v6/segment-button/layout/index.md
 rename static/usage/{ => v6}/segment-button/layout/javascript.md (100%)
 rename static/usage/{ => v6}/segment-button/layout/react.md (100%)
 rename static/usage/{ => v6}/segment-button/layout/vue.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/segment-button/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/segment-button/theming/css-properties/index.md
 rename static/usage/{ => v6}/segment-button/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/segment-button/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/segment-button/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/segment-button/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/segment/basic/angular.md (100%)
 create mode 100644 static/usage/v6/segment/basic/demo.html
 create mode 100644 static/usage/v6/segment/basic/index.md
 rename static/usage/{ => v6}/segment/basic/javascript.md (100%)
 rename static/usage/{ => v6}/segment/basic/react.md (100%)
 rename static/usage/{ => v6}/segment/basic/vue.md (100%)
 rename static/usage/{ => v6}/segment/scrollable/angular.md (100%)
 create mode 100644 static/usage/v6/segment/scrollable/demo.html
 create mode 100644 static/usage/v6/segment/scrollable/index.md
 rename static/usage/{ => v6}/segment/scrollable/javascript.md (100%)
 rename static/usage/{ => v6}/segment/scrollable/react.md (100%)
 rename static/usage/{ => v6}/segment/scrollable/vue.md (100%)
 rename static/usage/{ => v6}/segment/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/segment/theming/colors/demo.html
 create mode 100644 static/usage/v6/segment/theming/colors/index.md
 rename static/usage/{ => v6}/segment/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/segment/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/segment/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/segment/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/segment/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/segment/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/segment/theming/css-properties/index.md
 rename static/usage/{ => v6}/segment/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/segment/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/segment/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/segment/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/select/basic/multiple-selection/angular.md (100%)
 create mode 100644 static/usage/v6/select/basic/multiple-selection/demo.html
 create mode 100644 static/usage/v6/select/basic/multiple-selection/index.md
 rename static/usage/{ => v6}/select/basic/multiple-selection/javascript.md (100%)
 rename static/usage/{ => v6}/select/basic/multiple-selection/react.md (100%)
 rename static/usage/{ => v6}/select/basic/multiple-selection/vue.md (100%)
 rename static/usage/{ => v6}/select/basic/responding-to-interaction/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/select/basic/responding-to-interaction/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/select/basic/responding-to-interaction/demo.html
 create mode 100644 static/usage/v6/select/basic/responding-to-interaction/index.md
 rename static/usage/{ => v6}/select/basic/responding-to-interaction/javascript.md (100%)
 rename static/usage/{ => v6}/select/basic/responding-to-interaction/react.md (100%)
 rename static/usage/{ => v6}/select/basic/responding-to-interaction/vue.md (100%)
 rename static/usage/{ => v6}/select/basic/single-selection/angular.md (100%)
 create mode 100644 static/usage/v6/select/basic/single-selection/demo.html
 create mode 100644 static/usage/v6/select/basic/single-selection/index.md
 rename static/usage/{ => v6}/select/basic/single-selection/javascript.md (100%)
 rename static/usage/{ => v6}/select/basic/single-selection/react.md (100%)
 rename static/usage/{ => v6}/select/basic/single-selection/vue.md (100%)
 rename static/usage/{ => v6}/select/customization/button-text/angular.md (100%)
 create mode 100644 static/usage/v6/select/customization/button-text/demo.html
 create mode 100644 static/usage/v6/select/customization/button-text/index.md
 rename static/usage/{ => v6}/select/customization/button-text/javascript.md (100%)
 rename static/usage/{ => v6}/select/customization/button-text/react.md (100%)
 rename static/usage/{ => v6}/select/customization/button-text/vue.md (100%)
 rename static/usage/{ => v6}/select/customization/interface-options/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/select/customization/interface-options/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/select/customization/interface-options/demo.html
 create mode 100644 static/usage/v6/select/customization/interface-options/index.md
 rename static/usage/{ => v6}/select/customization/interface-options/javascript.md (100%)
 rename static/usage/{ => v6}/select/customization/interface-options/react.md (100%)
 rename static/usage/{ => v6}/select/customization/interface-options/vue.md (100%)
 rename static/usage/{ => v6}/select/customization/styling-select/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/select/customization/styling-select/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/select/customization/styling-select/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/select/customization/styling-select/demo.html
 create mode 100644 static/usage/v6/select/customization/styling-select/index.md
 rename static/usage/{ => v6}/select/customization/styling-select/javascript.md (100%)
 rename static/usage/{ => v6}/select/customization/styling-select/react/main_css.md (100%)
 rename static/usage/{ => v6}/select/customization/styling-select/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/select/customization/styling-select/vue.md (100%)
 rename static/usage/{ => v6}/select/interfaces/action-sheet/angular.md (100%)
 create mode 100644 static/usage/v6/select/interfaces/action-sheet/demo.html
 create mode 100644 static/usage/v6/select/interfaces/action-sheet/index.md
 rename static/usage/{ => v6}/select/interfaces/action-sheet/javascript.md (100%)
 rename static/usage/{ => v6}/select/interfaces/action-sheet/react.md (100%)
 rename static/usage/{ => v6}/select/interfaces/action-sheet/vue.md (100%)
 rename static/usage/{ => v6}/select/interfaces/popover/angular.md (100%)
 create mode 100644 static/usage/v6/select/interfaces/popover/demo.html
 create mode 100644 static/usage/v6/select/interfaces/popover/index.md
 rename static/usage/{ => v6}/select/interfaces/popover/javascript.md (100%)
 rename static/usage/{ => v6}/select/interfaces/popover/react.md (100%)
 rename static/usage/{ => v6}/select/interfaces/popover/vue.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/multiple-selection/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/multiple-selection/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/select/objects-as-values/multiple-selection/demo.html
 create mode 100644 static/usage/v6/select/objects-as-values/multiple-selection/index.md
 rename static/usage/{ => v6}/select/objects-as-values/multiple-selection/javascript.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/multiple-selection/react.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/multiple-selection/vue.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/using-comparewith/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/using-comparewith/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/select/objects-as-values/using-comparewith/demo.html
 create mode 100644 static/usage/v6/select/objects-as-values/using-comparewith/index.md
 rename static/usage/{ => v6}/select/objects-as-values/using-comparewith/javascript.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/using-comparewith/react.md (100%)
 rename static/usage/{ => v6}/select/objects-as-values/using-comparewith/vue.md (100%)
 rename static/usage/{ => v6}/skeleton-text/basic/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/skeleton-text/basic/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/skeleton-text/basic/demo.html
 create mode 100644 static/usage/v6/skeleton-text/basic/index.md
 rename static/usage/{ => v6}/skeleton-text/basic/javascript.md (100%)
 rename static/usage/{ => v6}/skeleton-text/basic/react.md (100%)
 rename static/usage/{ => v6}/skeleton-text/basic/vue.md (100%)
 rename static/usage/{ => v6}/skeleton-text/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/skeleton-text/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/skeleton-text/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/skeleton-text/theming/css-properties/index.md
 rename static/usage/{ => v6}/skeleton-text/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/skeleton-text/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/skeleton-text/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/skeleton-text/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/spinner/basic/angular.md (100%)
 create mode 100644 static/usage/v6/spinner/basic/demo.html
 create mode 100644 static/usage/v6/spinner/basic/index.md
 rename static/usage/{ => v6}/spinner/basic/javascript.md (100%)
 rename static/usage/{ => v6}/spinner/basic/react.md (100%)
 rename static/usage/{ => v6}/spinner/basic/vue.md (100%)
 rename static/usage/{ => v6}/spinner/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/spinner/theming/colors/demo.html
 create mode 100644 static/usage/v6/spinner/theming/colors/index.md
 rename static/usage/{ => v6}/spinner/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/spinner/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/spinner/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/spinner/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/spinner/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/spinner/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/spinner/theming/css-properties/index.md
 rename static/usage/{ => v6}/spinner/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/spinner/theming/css-properties/react.md (100%)
 rename static/usage/{ => v6}/spinner/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/spinner/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/spinner/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/split-pane/basic/angular.md (100%)
 create mode 100644 static/usage/v6/split-pane/basic/demo.html
 create mode 100644 static/usage/v6/split-pane/basic/index.md
 rename static/usage/{ => v6}/split-pane/basic/javascript.md (100%)
 rename static/usage/{ => v6}/split-pane/basic/react.md (100%)
 rename static/usage/{ => v6}/split-pane/basic/vue.md (100%)
 rename static/usage/{ => v6}/split-pane/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/split-pane/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/split-pane/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/split-pane/theming/css-properties/index.md
 rename static/usage/{ => v6}/split-pane/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/split-pane/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/split-pane/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/split-pane/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/text/basic/angular.md (100%)
 create mode 100644 static/usage/v6/text/basic/demo.html
 create mode 100644 static/usage/v6/text/basic/index.md
 rename static/usage/{ => v6}/text/basic/javascript.md (100%)
 rename static/usage/{ => v6}/text/basic/react.md (100%)
 rename static/usage/{ => v6}/text/basic/vue.md (100%)
 rename static/usage/{ => v6}/textarea/autogrow/angular.md (100%)
 create mode 100644 static/usage/v6/textarea/autogrow/demo.html
 create mode 100644 static/usage/v6/textarea/autogrow/index.md
 rename static/usage/{ => v6}/textarea/autogrow/javascript.md (100%)
 rename static/usage/{ => v6}/textarea/autogrow/react.md (100%)
 rename static/usage/{ => v6}/textarea/autogrow/vue.md (100%)
 rename static/usage/{ => v6}/textarea/basic/angular.md (100%)
 create mode 100644 static/usage/v6/textarea/basic/demo.html
 create mode 100644 static/usage/v6/textarea/basic/index.md
 rename static/usage/{ => v6}/textarea/basic/javascript.md (100%)
 rename static/usage/{ => v6}/textarea/basic/react.md (100%)
 rename static/usage/{ => v6}/textarea/basic/vue.md (100%)
 rename static/usage/{ => v6}/textarea/clear-on-edit/angular.md (100%)
 create mode 100644 static/usage/v6/textarea/clear-on-edit/demo.html
 create mode 100644 static/usage/v6/textarea/clear-on-edit/index.md
 rename static/usage/{ => v6}/textarea/clear-on-edit/javascript.md (100%)
 rename static/usage/{ => v6}/textarea/clear-on-edit/react.md (100%)
 rename static/usage/{ => v6}/textarea/clear-on-edit/vue.md (100%)
 rename static/usage/{ => v6}/textarea/theming/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/textarea/theming/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/textarea/theming/demo.html
 create mode 100644 static/usage/v6/textarea/theming/index.md
 rename static/usage/{ => v6}/textarea/theming/javascript.md (100%)
 rename static/usage/{ => v6}/textarea/theming/react/main_css.md (100%)
 rename static/usage/{ => v6}/textarea/theming/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/textarea/theming/vue.md (100%)
 rename static/usage/{ => v6}/thumbnail/basic/angular.md (100%)
 create mode 100644 static/usage/v6/thumbnail/basic/demo.html
 create mode 100644 static/usage/v6/thumbnail/basic/index.md
 rename static/usage/{ => v6}/thumbnail/basic/javascript.md (100%)
 rename static/usage/{ => v6}/thumbnail/basic/react.md (100%)
 rename static/usage/{ => v6}/thumbnail/basic/vue.md (100%)
 rename static/usage/{ => v6}/thumbnail/item/angular.md (100%)
 create mode 100644 static/usage/v6/thumbnail/item/demo.html
 create mode 100644 static/usage/v6/thumbnail/item/index.md
 rename static/usage/{ => v6}/thumbnail/item/javascript.md (100%)
 rename static/usage/{ => v6}/thumbnail/item/react.md (100%)
 rename static/usage/{ => v6}/thumbnail/item/vue.md (100%)
 rename static/usage/{ => v6}/thumbnail/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/thumbnail/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/thumbnail/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/thumbnail/theming/css-properties/index.md
 rename static/usage/{ => v6}/thumbnail/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/thumbnail/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/thumbnail/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/thumbnail/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/title/basic/angular.md (100%)
 create mode 100644 static/usage/v6/title/basic/demo.html
 create mode 100644 static/usage/v6/title/basic/index.md
 rename static/usage/{ => v6}/title/basic/javascript.md (100%)
 rename static/usage/{ => v6}/title/basic/react.md (100%)
 rename static/usage/{ => v6}/title/basic/vue.md (100%)
 rename static/usage/{ => v6}/title/collapsible-large-title/basic/angular.md (100%)
 create mode 100644 static/usage/v6/title/collapsible-large-title/basic/demo.html
 create mode 100644 static/usage/v6/title/collapsible-large-title/basic/index.md
 rename static/usage/{ => v6}/title/collapsible-large-title/basic/javascript.md (100%)
 rename static/usage/{ => v6}/title/collapsible-large-title/basic/react.md (100%)
 rename static/usage/{ => v6}/title/collapsible-large-title/basic/vue.md (100%)
 rename static/usage/{ => v6}/title/collapsible-large-title/buttons/angular.md (100%)
 create mode 100644 static/usage/v6/title/collapsible-large-title/buttons/demo.html
 create mode 100644 static/usage/v6/title/collapsible-large-title/buttons/index.md
 rename static/usage/{ => v6}/title/collapsible-large-title/buttons/javascript.md (100%)
 rename static/usage/{ => v6}/title/collapsible-large-title/buttons/react.md (100%)
 rename static/usage/{ => v6}/title/collapsible-large-title/buttons/vue.md (100%)
 rename static/usage/{ => v6}/title/theming/css-properties/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/title/theming/css-properties/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/title/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/title/theming/css-properties/index.md
 rename static/usage/{ => v6}/title/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/title/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/title/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/title/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/toast/buttons/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/toast/buttons/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/toast/buttons/demo.html
 create mode 100644 static/usage/v6/toast/buttons/index.md
 rename static/usage/{ => v6}/toast/buttons/javascript.md (100%)
 rename static/usage/{ => v6}/toast/buttons/react.md (100%)
 rename static/usage/{ => v6}/toast/buttons/vue.md (100%)
 rename static/usage/{ => v6}/toast/icon/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/toast/icon/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/toast/icon/demo.html
 create mode 100644 static/usage/v6/toast/icon/index.md
 rename static/usage/{ => v6}/toast/icon/javascript.md (100%)
 rename static/usage/{ => v6}/toast/icon/react.md (100%)
 rename static/usage/{ => v6}/toast/icon/vue.md (100%)
 rename static/usage/{ => v6}/toast/presenting/controller/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/toast/presenting/controller/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v6/toast/presenting/controller/demo.html
 create mode 100644 static/usage/v6/toast/presenting/controller/index.md
 rename static/usage/{ => v6}/toast/presenting/controller/javascript.md (100%)
 rename static/usage/{ => v6}/toast/presenting/controller/react.md (100%)
 rename static/usage/{ => v6}/toast/presenting/controller/vue.md (100%)
 rename static/usage/{ => v6}/toast/theming/angular/example_component_html.md (100%)
 rename static/usage/{ => v6}/toast/theming/angular/example_component_ts.md (100%)
 rename static/usage/{ => v6}/toast/theming/angular/global_css.md (100%)
 create mode 100644 static/usage/v6/toast/theming/demo.html
 create mode 100644 static/usage/v6/toast/theming/index.md
 rename static/usage/{ => v6}/toast/theming/javascript.md (100%)
 rename static/usage/{ => v6}/toast/theming/react/main_css.md (100%)
 rename static/usage/{ => v6}/toast/theming/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/toast/theming/vue.md (100%)
 rename static/usage/{ => v6}/toggle/basic/angular.md (100%)
 create mode 100644 static/usage/v6/toggle/basic/demo.html
 create mode 100644 static/usage/v6/toggle/basic/index.md
 rename static/usage/{ => v6}/toggle/basic/javascript.md (100%)
 rename static/usage/{ => v6}/toggle/basic/react.md (100%)
 rename static/usage/{ => v6}/toggle/basic/vue.md (100%)
 rename static/usage/{ => v6}/toggle/on-off/angular.md (100%)
 create mode 100644 static/usage/v6/toggle/on-off/demo.html
 create mode 100644 static/usage/v6/toggle/on-off/index.md
 rename static/usage/{ => v6}/toggle/on-off/javascript.md (100%)
 rename static/usage/{ => v6}/toggle/on-off/react.md (100%)
 rename static/usage/{ => v6}/toggle/on-off/vue.md (100%)
 rename static/usage/{ => v6}/toggle/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/toggle/theming/colors/demo.html
 create mode 100644 static/usage/v6/toggle/theming/colors/index.md
 rename static/usage/{ => v6}/toggle/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/toggle/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/toggle/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/toggle/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/toggle/theming/css-properties/index.md
 rename static/usage/{ => v6}/toggle/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-properties/vue.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-shadow-parts/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-shadow-parts/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/toggle/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v6/toggle/theming/css-shadow-parts/index.md
 rename static/usage/{ => v6}/toggle/theming/css-shadow-parts/javascript.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-shadow-parts/react/main_css.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-shadow-parts/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/toggle/theming/css-shadow-parts/vue.md (100%)
 rename static/usage/{ => v6}/toolbar/basic/angular.md (100%)
 create mode 100644 static/usage/v6/toolbar/basic/demo.html
 create mode 100644 static/usage/v6/toolbar/basic/index.md
 rename static/usage/{ => v6}/toolbar/basic/javascript.md (100%)
 rename static/usage/{ => v6}/toolbar/basic/react.md (100%)
 rename static/usage/{ => v6}/toolbar/basic/vue.md (100%)
 rename static/usage/{ => v6}/toolbar/buttons/angular.md (100%)
 create mode 100644 static/usage/v6/toolbar/buttons/demo.html
 create mode 100644 static/usage/v6/toolbar/buttons/index.md
 rename static/usage/{ => v6}/toolbar/buttons/javascript.md (100%)
 rename static/usage/{ => v6}/toolbar/buttons/react.md (100%)
 rename static/usage/{ => v6}/toolbar/buttons/vue.md (100%)
 rename static/usage/{ => v6}/toolbar/progress-bars/angular.md (100%)
 create mode 100644 static/usage/v6/toolbar/progress-bars/demo.html
 create mode 100644 static/usage/v6/toolbar/progress-bars/index.md
 rename static/usage/{ => v6}/toolbar/progress-bars/javascript.md (100%)
 rename static/usage/{ => v6}/toolbar/progress-bars/react.md (100%)
 rename static/usage/{ => v6}/toolbar/progress-bars/vue.md (100%)
 rename static/usage/{ => v6}/toolbar/searchbars/angular.md (100%)
 create mode 100644 static/usage/v6/toolbar/searchbars/demo.html
 create mode 100644 static/usage/v6/toolbar/searchbars/index.md
 rename static/usage/{ => v6}/toolbar/searchbars/javascript.md (100%)
 rename static/usage/{ => v6}/toolbar/searchbars/react.md (100%)
 rename static/usage/{ => v6}/toolbar/searchbars/vue.md (100%)
 rename static/usage/{ => v6}/toolbar/segments/angular.md (100%)
 create mode 100644 static/usage/v6/toolbar/segments/demo.html
 create mode 100644 static/usage/v6/toolbar/segments/index.md
 rename static/usage/{ => v6}/toolbar/segments/javascript.md (100%)
 rename static/usage/{ => v6}/toolbar/segments/react.md (100%)
 rename static/usage/{ => v6}/toolbar/segments/vue.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/colors/angular.md (100%)
 create mode 100644 static/usage/v6/toolbar/theming/colors/demo.html
 create mode 100644 static/usage/v6/toolbar/theming/colors/index.md
 rename static/usage/{ => v6}/toolbar/theming/colors/javascript.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/colors/react.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/colors/vue.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/css-properties/angular/example_component_css.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/css-properties/angular/example_component_html.md (100%)
 create mode 100644 static/usage/v6/toolbar/theming/css-properties/demo.html
 create mode 100644 static/usage/v6/toolbar/theming/css-properties/index.md
 rename static/usage/{ => v6}/toolbar/theming/css-properties/javascript.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/css-properties/react/main_css.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/css-properties/react/main_tsx.md (100%)
 rename static/usage/{ => v6}/toolbar/theming/css-properties/vue.md (100%)
 create mode 100644 static/usage/v7/accordion/accessibility/animations/angular.md
 create mode 100644 static/usage/v7/accordion/accessibility/animations/demo.html
 create mode 100644 static/usage/v7/accordion/accessibility/animations/index.md
 create mode 100644 static/usage/v7/accordion/accessibility/animations/javascript.md
 create mode 100644 static/usage/v7/accordion/accessibility/animations/react.md
 create mode 100644 static/usage/v7/accordion/accessibility/animations/vue.md
 create mode 100644 static/usage/v7/accordion/basic/angular.md
 create mode 100644 static/usage/v7/accordion/basic/demo.html
 create mode 100644 static/usage/v7/accordion/basic/index.md
 create mode 100644 static/usage/v7/accordion/basic/javascript.md
 create mode 100644 static/usage/v7/accordion/basic/react.md
 create mode 100644 static/usage/v7/accordion/basic/vue.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/index.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/javascript.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_css.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_tsx.md
 create mode 100644 static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
 create mode 100644 static/usage/v7/accordion/customization/expansion-styles/angular.md
 create mode 100644 static/usage/v7/accordion/customization/expansion-styles/demo.html
 create mode 100644 static/usage/v7/accordion/customization/expansion-styles/index.md
 create mode 100644 static/usage/v7/accordion/customization/expansion-styles/javascript.md
 create mode 100644 static/usage/v7/accordion/customization/expansion-styles/react.md
 create mode 100644 static/usage/v7/accordion/customization/expansion-styles/vue.md
 create mode 100644 static/usage/v7/accordion/customization/icons/angular.md
 create mode 100644 static/usage/v7/accordion/customization/icons/demo.html
 create mode 100644 static/usage/v7/accordion/customization/icons/index.md
 create mode 100644 static/usage/v7/accordion/customization/icons/javascript.md
 create mode 100644 static/usage/v7/accordion/customization/icons/react.md
 create mode 100644 static/usage/v7/accordion/customization/icons/vue.md
 create mode 100644 static/usage/v7/accordion/customization/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/accordion/customization/theming/angular/global_css.md
 create mode 100644 static/usage/v7/accordion/customization/theming/demo.html
 create mode 100644 static/usage/v7/accordion/customization/theming/index.md
 create mode 100644 static/usage/v7/accordion/customization/theming/javascript.md
 create mode 100644 static/usage/v7/accordion/customization/theming/react/main_css.md
 create mode 100644 static/usage/v7/accordion/customization/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/accordion/customization/theming/vue.md
 create mode 100644 static/usage/v7/accordion/disable-group/angular.md
 create mode 100644 static/usage/v7/accordion/disable-group/demo.html
 create mode 100644 static/usage/v7/accordion/disable-group/index.md
 create mode 100644 static/usage/v7/accordion/disable-group/javascript.md
 create mode 100644 static/usage/v7/accordion/disable-group/react.md
 create mode 100644 static/usage/v7/accordion/disable-group/vue.md
 create mode 100644 static/usage/v7/accordion/disable/group/angular.md
 create mode 100644 static/usage/v7/accordion/disable/group/demo.html
 create mode 100644 static/usage/v7/accordion/disable/group/index.md
 create mode 100644 static/usage/v7/accordion/disable/group/javascript.md
 create mode 100644 static/usage/v7/accordion/disable/group/react.md
 create mode 100644 static/usage/v7/accordion/disable/group/vue.md
 create mode 100644 static/usage/v7/accordion/disable/individual/angular.md
 create mode 100644 static/usage/v7/accordion/disable/individual/demo.html
 create mode 100644 static/usage/v7/accordion/disable/individual/index.md
 create mode 100644 static/usage/v7/accordion/disable/individual/javascript.md
 create mode 100644 static/usage/v7/accordion/disable/individual/react.md
 create mode 100644 static/usage/v7/accordion/disable/individual/vue.md
 create mode 100644 static/usage/v7/accordion/listen-changes/angular/example_component_html.md
 create mode 100644 static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
 create mode 100644 static/usage/v7/accordion/listen-changes/demo.html
 create mode 100644 static/usage/v7/accordion/listen-changes/index.md
 create mode 100644 static/usage/v7/accordion/listen-changes/javascript.md
 create mode 100644 static/usage/v7/accordion/listen-changes/react.md
 create mode 100644 static/usage/v7/accordion/listen-changes/vue.md
 create mode 100644 static/usage/v7/accordion/multiple/angular.md
 create mode 100644 static/usage/v7/accordion/multiple/demo.html
 create mode 100644 static/usage/v7/accordion/multiple/index.md
 create mode 100644 static/usage/v7/accordion/multiple/javascript.md
 create mode 100644 static/usage/v7/accordion/multiple/react.md
 create mode 100644 static/usage/v7/accordion/multiple/vue.md
 create mode 100644 static/usage/v7/accordion/readonly/group/angular.md
 create mode 100644 static/usage/v7/accordion/readonly/group/demo.html
 create mode 100644 static/usage/v7/accordion/readonly/group/index.md
 create mode 100644 static/usage/v7/accordion/readonly/group/javascript.md
 create mode 100644 static/usage/v7/accordion/readonly/group/react.md
 create mode 100644 static/usage/v7/accordion/readonly/group/vue.md
 create mode 100644 static/usage/v7/accordion/readonly/individual/angular.md
 create mode 100644 static/usage/v7/accordion/readonly/individual/demo.html
 create mode 100644 static/usage/v7/accordion/readonly/individual/index.md
 create mode 100644 static/usage/v7/accordion/readonly/individual/javascript.md
 create mode 100644 static/usage/v7/accordion/readonly/individual/react.md
 create mode 100644 static/usage/v7/accordion/readonly/individual/vue.md
 create mode 100644 static/usage/v7/accordion/toggle/angular/example_component_html.md
 create mode 100644 static/usage/v7/accordion/toggle/angular/example_component_ts.md
 create mode 100644 static/usage/v7/accordion/toggle/demo.html
 create mode 100644 static/usage/v7/accordion/toggle/index.md
 create mode 100644 static/usage/v7/accordion/toggle/javascript.md
 create mode 100644 static/usage/v7/accordion/toggle/react.md
 create mode 100644 static/usage/v7/accordion/toggle/vue.md
 create mode 100644 static/usage/v7/action-sheet/basic/angular/example_component_css.md
 create mode 100644 static/usage/v7/action-sheet/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/action-sheet/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/action-sheet/basic/demo.html
 create mode 100644 static/usage/v7/action-sheet/basic/index.md
 create mode 100644 static/usage/v7/action-sheet/basic/javascript.md
 create mode 100644 static/usage/v7/action-sheet/basic/react/main_css.md
 create mode 100644 static/usage/v7/action-sheet/basic/react/main_tsx.md
 create mode 100644 static/usage/v7/action-sheet/basic/vue.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/angular/global_css.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/index.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/action-sheet/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/angular/example_component_html.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/angular/global_css.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/demo.html
 create mode 100644 static/usage/v7/action-sheet/theming/styling/index.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/javascript.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/react/main_css.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
 create mode 100644 static/usage/v7/action-sheet/theming/styling/vue.md
 create mode 100644 static/usage/v7/alert/buttons/angular/example_component_html.md
 create mode 100644 static/usage/v7/alert/buttons/angular/example_component_ts.md
 create mode 100644 static/usage/v7/alert/buttons/demo.html
 create mode 100644 static/usage/v7/alert/buttons/index.md
 create mode 100644 static/usage/v7/alert/buttons/javascript.md
 create mode 100644 static/usage/v7/alert/buttons/react.md
 create mode 100644 static/usage/v7/alert/buttons/vue.md
 create mode 100644 static/usage/v7/alert/customization/angular/example_component_html.md
 create mode 100644 static/usage/v7/alert/customization/angular/example_component_ts.md
 create mode 100644 static/usage/v7/alert/customization/angular/global_css.md
 create mode 100644 static/usage/v7/alert/customization/demo.html
 create mode 100644 static/usage/v7/alert/customization/index.md
 create mode 100644 static/usage/v7/alert/customization/javascript.md
 create mode 100644 static/usage/v7/alert/customization/react/main_css.md
 create mode 100644 static/usage/v7/alert/customization/react/main_tsx.md
 create mode 100644 static/usage/v7/alert/customization/vue.md
 create mode 100644 static/usage/v7/alert/inputs/radios/angular/example_component_html.md
 create mode 100644 static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
 create mode 100644 static/usage/v7/alert/inputs/radios/demo.html
 create mode 100644 static/usage/v7/alert/inputs/radios/index.md
 create mode 100644 static/usage/v7/alert/inputs/radios/javascript.md
 create mode 100644 static/usage/v7/alert/inputs/radios/react.md
 create mode 100644 static/usage/v7/alert/inputs/radios/vue.md
 create mode 100644 static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md
 create mode 100644 static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
 create mode 100644 static/usage/v7/alert/inputs/text-inputs/demo.html
 create mode 100644 static/usage/v7/alert/inputs/text-inputs/index.md
 create mode 100644 static/usage/v7/alert/inputs/text-inputs/javascript.md
 create mode 100644 static/usage/v7/alert/inputs/text-inputs/react.md
 create mode 100644 static/usage/v7/alert/inputs/text-inputs/vue.md
 create mode 100644 static/usage/v7/alert/presenting/controller/angular/example_component_html.md
 create mode 100644 static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
 create mode 100644 static/usage/v7/alert/presenting/controller/demo.html
 create mode 100644 static/usage/v7/alert/presenting/controller/index.md
 create mode 100644 static/usage/v7/alert/presenting/controller/javascript.md
 create mode 100644 static/usage/v7/alert/presenting/controller/react.md
 create mode 100644 static/usage/v7/alert/presenting/controller/vue.md
 create mode 100644 static/usage/v7/avatar/basic/angular.md
 create mode 100644 static/usage/v7/avatar/basic/demo.html
 create mode 100644 static/usage/v7/avatar/basic/index.md
 create mode 100644 static/usage/v7/avatar/basic/javascript.md
 create mode 100644 static/usage/v7/avatar/basic/react.md
 create mode 100644 static/usage/v7/avatar/basic/vue.md
 create mode 100644 static/usage/v7/avatar/chip/angular.md
 create mode 100644 static/usage/v7/avatar/chip/demo.html
 create mode 100644 static/usage/v7/avatar/chip/index.md
 create mode 100644 static/usage/v7/avatar/chip/javascript.md
 create mode 100644 static/usage/v7/avatar/chip/react.md
 create mode 100644 static/usage/v7/avatar/chip/vue.md
 create mode 100644 static/usage/v7/avatar/item/angular.md
 create mode 100644 static/usage/v7/avatar/item/demo.html
 create mode 100644 static/usage/v7/avatar/item/index.md
 create mode 100644 static/usage/v7/avatar/item/javascript.md
 create mode 100644 static/usage/v7/avatar/item/react.md
 create mode 100644 static/usage/v7/avatar/item/vue.md
 create mode 100644 static/usage/v7/avatar/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/avatar/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/avatar/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/avatar/theming/css-properties/index.md
 create mode 100644 static/usage/v7/avatar/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/avatar/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/avatar/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/avatar/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/backdrop/basic/angular.md
 create mode 100644 static/usage/v7/backdrop/basic/demo.html
 create mode 100644 static/usage/v7/backdrop/basic/index.md
 create mode 100644 static/usage/v7/backdrop/basic/javascript.md
 create mode 100644 static/usage/v7/backdrop/basic/react.md
 create mode 100644 static/usage/v7/backdrop/basic/vue.md
 create mode 100644 static/usage/v7/backdrop/styling/angular/example_component_css.md
 create mode 100644 static/usage/v7/backdrop/styling/angular/example_component_html.md
 create mode 100644 static/usage/v7/backdrop/styling/demo.html
 create mode 100644 static/usage/v7/backdrop/styling/index.md
 create mode 100644 static/usage/v7/backdrop/styling/javascript.md
 create mode 100644 static/usage/v7/backdrop/styling/react/main_css.md
 create mode 100644 static/usage/v7/backdrop/styling/react/main_tsx.md
 create mode 100644 static/usage/v7/backdrop/styling/vue.md
 create mode 100644 static/usage/v7/badge/basic/angular.md
 create mode 100644 static/usage/v7/badge/basic/demo.html
 create mode 100644 static/usage/v7/badge/basic/index.md
 create mode 100644 static/usage/v7/badge/basic/javascript.md
 create mode 100644 static/usage/v7/badge/basic/react.md
 create mode 100644 static/usage/v7/badge/basic/vue.md
 create mode 100644 static/usage/v7/badge/theming/colors/angular.md
 create mode 100644 static/usage/v7/badge/theming/colors/demo.html
 create mode 100644 static/usage/v7/badge/theming/colors/index.md
 create mode 100644 static/usage/v7/badge/theming/colors/javascript.md
 create mode 100644 static/usage/v7/badge/theming/colors/react.md
 create mode 100644 static/usage/v7/badge/theming/colors/vue.md
 create mode 100644 static/usage/v7/badge/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/badge/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/badge/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/badge/theming/css-properties/index.md
 create mode 100644 static/usage/v7/badge/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/badge/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/badge/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/badge/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/basic/angular.md
 create mode 100644 static/usage/v7/breadcrumbs/basic/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/basic/index.md
 create mode 100644 static/usage/v7/breadcrumbs/basic/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/basic/react.md
 create mode 100644 static/usage/v7/breadcrumbs/basic/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/react.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/items-before-after/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/items-before-after/react.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/max-items/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/max-items/react.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md
 create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/angular.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/index.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/react.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/index.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/react.md
 create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/colors/angular.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/colors/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/theming/colors/index.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/colors/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/colors/react.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/colors/vue.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/index.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/button/basic/angular.md
 create mode 100644 static/usage/v7/button/basic/demo.html
 create mode 100644 static/usage/v7/button/basic/index.md
 create mode 100644 static/usage/v7/button/basic/javascript.md
 create mode 100644 static/usage/v7/button/basic/react.md
 create mode 100644 static/usage/v7/button/basic/vue.md
 create mode 100644 static/usage/v7/button/expand/angular.md
 create mode 100644 static/usage/v7/button/expand/demo.html
 create mode 100644 static/usage/v7/button/expand/index.md
 create mode 100644 static/usage/v7/button/expand/javascript.md
 create mode 100644 static/usage/v7/button/expand/react.md
 create mode 100644 static/usage/v7/button/expand/vue.md
 create mode 100644 static/usage/v7/button/fill/angular.md
 create mode 100644 static/usage/v7/button/fill/demo.html
 create mode 100644 static/usage/v7/button/fill/index.md
 create mode 100644 static/usage/v7/button/fill/javascript.md
 create mode 100644 static/usage/v7/button/fill/react.md
 create mode 100644 static/usage/v7/button/fill/vue.md
 create mode 100644 static/usage/v7/button/icons/angular.md
 create mode 100644 static/usage/v7/button/icons/demo.html
 create mode 100644 static/usage/v7/button/icons/index.md
 create mode 100644 static/usage/v7/button/icons/javascript.md
 create mode 100644 static/usage/v7/button/icons/react.md
 create mode 100644 static/usage/v7/button/icons/vue.md
 create mode 100644 static/usage/v7/button/shape/angular.md
 create mode 100644 static/usage/v7/button/shape/demo.html
 create mode 100644 static/usage/v7/button/shape/index.md
 create mode 100644 static/usage/v7/button/shape/javascript.md
 create mode 100644 static/usage/v7/button/shape/react.md
 create mode 100644 static/usage/v7/button/shape/vue.md
 create mode 100644 static/usage/v7/button/size/angular.md
 create mode 100644 static/usage/v7/button/size/demo.html
 create mode 100644 static/usage/v7/button/size/index.md
 create mode 100644 static/usage/v7/button/size/javascript.md
 create mode 100644 static/usage/v7/button/size/react.md
 create mode 100644 static/usage/v7/button/size/vue.md
 create mode 100644 static/usage/v7/button/theming/colors/angular.md
 create mode 100644 static/usage/v7/button/theming/colors/demo.html
 create mode 100644 static/usage/v7/button/theming/colors/index.md
 create mode 100644 static/usage/v7/button/theming/colors/javascript.md
 create mode 100644 static/usage/v7/button/theming/colors/react.md
 create mode 100644 static/usage/v7/button/theming/colors/vue.md
 create mode 100644 static/usage/v7/button/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/button/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/button/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/button/theming/css-properties/index.md
 create mode 100644 static/usage/v7/button/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/button/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/button/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/button/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/buttons/basic/angular.md
 create mode 100644 static/usage/v7/buttons/basic/demo.html
 create mode 100644 static/usage/v7/buttons/basic/index.md
 create mode 100644 static/usage/v7/buttons/basic/javascript.md
 create mode 100644 static/usage/v7/buttons/basic/react.md
 create mode 100644 static/usage/v7/buttons/basic/vue.md
 create mode 100644 static/usage/v7/buttons/placement/angular.md
 create mode 100644 static/usage/v7/buttons/placement/demo.html
 create mode 100644 static/usage/v7/buttons/placement/index.md
 create mode 100644 static/usage/v7/buttons/placement/javascript.md
 create mode 100644 static/usage/v7/buttons/placement/react.md
 create mode 100644 static/usage/v7/buttons/placement/vue.md
 create mode 100644 static/usage/v7/buttons/types/angular.md
 create mode 100644 static/usage/v7/buttons/types/demo.html
 create mode 100644 static/usage/v7/buttons/types/index.md
 create mode 100644 static/usage/v7/buttons/types/javascript.md
 create mode 100644 static/usage/v7/buttons/types/react.md
 create mode 100644 static/usage/v7/buttons/types/vue.md
 create mode 100644 static/usage/v7/card/basic/angular/example_component_css.md
 create mode 100644 static/usage/v7/card/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/card/basic/demo.html
 create mode 100644 static/usage/v7/card/basic/index.md
 create mode 100644 static/usage/v7/card/basic/javascript.md
 create mode 100644 static/usage/v7/card/basic/react/main_css.md
 create mode 100644 static/usage/v7/card/basic/react/main_tsx.md
 create mode 100644 static/usage/v7/card/basic/vue.md
 create mode 100644 static/usage/v7/card/buttons/angular/example_component_css.md
 create mode 100644 static/usage/v7/card/buttons/angular/example_component_html.md
 create mode 100644 static/usage/v7/card/buttons/demo.html
 create mode 100644 static/usage/v7/card/buttons/index.md
 create mode 100644 static/usage/v7/card/buttons/javascript.md
 create mode 100644 static/usage/v7/card/buttons/react/main_css.md
 create mode 100644 static/usage/v7/card/buttons/react/main_tsx.md
 create mode 100644 static/usage/v7/card/buttons/vue.md
 create mode 100644 static/usage/v7/card/list/angular/example_component_css.md
 create mode 100644 static/usage/v7/card/list/angular/example_component_html.md
 create mode 100644 static/usage/v7/card/list/demo.html
 create mode 100644 static/usage/v7/card/list/index.md
 create mode 100644 static/usage/v7/card/list/javascript.md
 create mode 100644 static/usage/v7/card/list/react/main_css.md
 create mode 100644 static/usage/v7/card/list/react/main_tsx.md
 create mode 100644 static/usage/v7/card/list/vue.md
 create mode 100644 static/usage/v7/card/media/angular/example_component_css.md
 create mode 100644 static/usage/v7/card/media/angular/example_component_html.md
 create mode 100644 static/usage/v7/card/media/demo.html
 create mode 100644 static/usage/v7/card/media/index.md
 create mode 100644 static/usage/v7/card/media/javascript.md
 create mode 100644 static/usage/v7/card/media/react/main_css.md
 create mode 100644 static/usage/v7/card/media/react/main_tsx.md
 create mode 100644 static/usage/v7/card/media/vue.md
 create mode 100644 static/usage/v7/card/theming/colors/angular/example_component_css.md
 create mode 100644 static/usage/v7/card/theming/colors/angular/example_component_html.md
 create mode 100644 static/usage/v7/card/theming/colors/demo.html
 create mode 100644 static/usage/v7/card/theming/colors/index.md
 create mode 100644 static/usage/v7/card/theming/colors/javascript.md
 create mode 100644 static/usage/v7/card/theming/colors/react/main_css.md
 create mode 100644 static/usage/v7/card/theming/colors/react/main_tsx.md
 create mode 100644 static/usage/v7/card/theming/colors/vue.md
 create mode 100644 static/usage/v7/card/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/card/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/card/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/card/theming/css-properties/index.md
 create mode 100644 static/usage/v7/card/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/card/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/card/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/card/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/checkbox/basic/angular.md
 create mode 100644 static/usage/v7/checkbox/basic/demo.html
 create mode 100644 static/usage/v7/checkbox/basic/index.md
 create mode 100644 static/usage/v7/checkbox/basic/javascript.md
 create mode 100644 static/usage/v7/checkbox/basic/react.md
 create mode 100644 static/usage/v7/checkbox/basic/vue.md
 create mode 100644 static/usage/v7/checkbox/indeterminate/angular.md
 create mode 100644 static/usage/v7/checkbox/indeterminate/demo.html
 create mode 100644 static/usage/v7/checkbox/indeterminate/index.md
 create mode 100644 static/usage/v7/checkbox/indeterminate/javascript.md
 create mode 100644 static/usage/v7/checkbox/indeterminate/react.md
 create mode 100644 static/usage/v7/checkbox/indeterminate/vue.md
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/index.md
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/checkbox/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/chip/basic/angular.md
 create mode 100644 static/usage/v7/chip/basic/demo.html
 create mode 100644 static/usage/v7/chip/basic/index.md
 create mode 100644 static/usage/v7/chip/basic/javascript.md
 create mode 100644 static/usage/v7/chip/basic/react.md
 create mode 100644 static/usage/v7/chip/basic/vue.md
 create mode 100644 static/usage/v7/chip/slots/angular.md
 create mode 100644 static/usage/v7/chip/slots/demo.html
 create mode 100644 static/usage/v7/chip/slots/index.md
 create mode 100644 static/usage/v7/chip/slots/javascript.md
 create mode 100644 static/usage/v7/chip/slots/react.md
 create mode 100644 static/usage/v7/chip/slots/vue.md
 create mode 100644 static/usage/v7/chip/theming/colors/angular.md
 create mode 100644 static/usage/v7/chip/theming/colors/demo.html
 create mode 100644 static/usage/v7/chip/theming/colors/index.md
 create mode 100644 static/usage/v7/chip/theming/colors/javascript.md
 create mode 100644 static/usage/v7/chip/theming/colors/react.md
 create mode 100644 static/usage/v7/chip/theming/colors/vue.md
 create mode 100644 static/usage/v7/chip/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/chip/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/chip/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/chip/theming/css-properties/index.md
 create mode 100644 static/usage/v7/chip/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/chip/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/chip/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/chip/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/content/basic/angular.md
 create mode 100644 static/usage/v7/content/basic/demo.html
 create mode 100644 static/usage/v7/content/basic/index.md
 create mode 100644 static/usage/v7/content/basic/javascript.md
 create mode 100644 static/usage/v7/content/basic/react.md
 create mode 100644 static/usage/v7/content/basic/vue.md
 create mode 100644 static/usage/v7/content/fixed/angular.md
 create mode 100644 static/usage/v7/content/fixed/angular/example_component_css.md
 create mode 100644 static/usage/v7/content/fixed/angular/example_component_html.md
 create mode 100644 static/usage/v7/content/fixed/demo.html
 create mode 100644 static/usage/v7/content/fixed/index.md
 create mode 100644 static/usage/v7/content/fixed/javascript.md
 create mode 100644 static/usage/v7/content/fixed/react.md
 create mode 100644 static/usage/v7/content/fixed/react/main_css.md
 create mode 100644 static/usage/v7/content/fixed/react/main_tsx.md
 create mode 100644 static/usage/v7/content/fixed/vue.md
 create mode 100644 static/usage/v7/content/fullscreen/angular/example_component_css.md
 create mode 100644 static/usage/v7/content/fullscreen/angular/example_component_html.md
 create mode 100644 static/usage/v7/content/fullscreen/demo.html
 create mode 100644 static/usage/v7/content/fullscreen/index.md
 create mode 100644 static/usage/v7/content/fullscreen/javascript.md
 create mode 100644 static/usage/v7/content/fullscreen/react/main_css.md
 create mode 100644 static/usage/v7/content/fullscreen/react/main_tsx.md
 create mode 100644 static/usage/v7/content/fullscreen/vue.md
 create mode 100644 static/usage/v7/content/header-footer/angular.md
 create mode 100644 static/usage/v7/content/header-footer/demo.html
 create mode 100644 static/usage/v7/content/header-footer/index.md
 create mode 100644 static/usage/v7/content/header-footer/javascript.md
 create mode 100644 static/usage/v7/content/header-footer/react.md
 create mode 100644 static/usage/v7/content/header-footer/vue.md
 create mode 100644 static/usage/v7/content/scroll-events/angular/example_component_html.md
 create mode 100644 static/usage/v7/content/scroll-events/angular/example_component_ts.md
 create mode 100644 static/usage/v7/content/scroll-events/demo.html
 create mode 100644 static/usage/v7/content/scroll-events/index.md
 create mode 100644 static/usage/v7/content/scroll-events/javascript.md
 create mode 100644 static/usage/v7/content/scroll-events/react.md
 create mode 100644 static/usage/v7/content/scroll-events/vue.md
 create mode 100644 static/usage/v7/content/scroll-methods/angular/example_component_html.md
 create mode 100644 static/usage/v7/content/scroll-methods/angular/example_component_ts.md
 create mode 100644 static/usage/v7/content/scroll-methods/demo.html
 create mode 100644 static/usage/v7/content/scroll-methods/index.md
 create mode 100644 static/usage/v7/content/scroll-methods/javascript.md
 create mode 100644 static/usage/v7/content/scroll-methods/react.md
 create mode 100644 static/usage/v7/content/scroll-methods/vue.md
 create mode 100644 static/usage/v7/content/theming/colors/angular.md
 create mode 100644 static/usage/v7/content/theming/colors/demo.html
 create mode 100644 static/usage/v7/content/theming/colors/index.md
 create mode 100644 static/usage/v7/content/theming/colors/javascript.md
 create mode 100644 static/usage/v7/content/theming/colors/react.md
 create mode 100644 static/usage/v7/content/theming/colors/vue.md
 create mode 100644 static/usage/v7/content/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/content/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/content/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/content/theming/css-properties/index.md
 create mode 100644 static/usage/v7/content/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/content/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/content/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/content/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/content/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/datetime-button/basic/angular.md
 create mode 100644 static/usage/v7/datetime-button/basic/demo.html
 create mode 100644 static/usage/v7/datetime-button/basic/index.md
 create mode 100644 static/usage/v7/datetime-button/basic/javascript.md
 create mode 100644 static/usage/v7/datetime-button/basic/react.md
 create mode 100644 static/usage/v7/datetime-button/basic/vue.md
 create mode 100644 static/usage/v7/datetime/basic/angular.md
 create mode 100644 static/usage/v7/datetime/basic/demo.html
 create mode 100644 static/usage/v7/datetime/basic/index.md
 create mode 100644 static/usage/v7/datetime/basic/javascript.md
 create mode 100644 static/usage/v7/datetime/basic/react.md
 create mode 100644 static/usage/v7/datetime/basic/vue.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/index.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/react.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/angular.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/demo.html
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/index.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/javascript.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/react.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/vue.md
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/javascript.md
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
 create mode 100644 static/usage/v7/datetime/date-constraints/advanced/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/date-constraints/advanced/demo.html
 create mode 100644 static/usage/v7/datetime/date-constraints/advanced/index.md
 create mode 100644 static/usage/v7/datetime/date-constraints/advanced/javascript.md
 create mode 100644 static/usage/v7/datetime/date-constraints/advanced/react.md
 create mode 100644 static/usage/v7/datetime/date-constraints/advanced/vue.md
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/angular.md
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/demo.html
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/index.md
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/javascript.md
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/react.md
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/vue.md
 create mode 100644 static/usage/v7/datetime/date-constraints/values/angular.md
 create mode 100644 static/usage/v7/datetime/date-constraints/values/demo.html
 create mode 100644 static/usage/v7/datetime/date-constraints/values/index.md
 create mode 100644 static/usage/v7/datetime/date-constraints/values/javascript.md
 create mode 100644 static/usage/v7/datetime/date-constraints/values/react.md
 create mode 100644 static/usage/v7/datetime/date-constraints/values/vue.md
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/angular.md
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/demo.html
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/index.md
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/javascript.md
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/react.md
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/vue.md
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/angular.md
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/demo.html
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/index.md
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/javascript.md
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/react.md
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/vue.md
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/angular.md
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/demo.html
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/index.md
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/javascript.md
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/react.md
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/vue.md
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/angular.md
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/demo.html
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/index.md
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/javascript.md
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/react.md
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/vue.md
 create mode 100644 static/usage/v7/datetime/localization/time-label/angular.md
 create mode 100644 static/usage/v7/datetime/localization/time-label/demo.html
 create mode 100644 static/usage/v7/datetime/localization/time-label/index.md
 create mode 100644 static/usage/v7/datetime/localization/time-label/javascript.md
 create mode 100644 static/usage/v7/datetime/localization/time-label/react.md
 create mode 100644 static/usage/v7/datetime/localization/time-label/vue.md
 create mode 100644 static/usage/v7/datetime/multiple/angular.md
 create mode 100644 static/usage/v7/datetime/multiple/demo.html
 create mode 100644 static/usage/v7/datetime/multiple/index.md
 create mode 100644 static/usage/v7/datetime/multiple/javascript.md
 create mode 100644 static/usage/v7/datetime/multiple/react.md
 create mode 100644 static/usage/v7/datetime/multiple/vue.md
 create mode 100644 static/usage/v7/datetime/presentation/date/angular.md
 create mode 100644 static/usage/v7/datetime/presentation/date/demo.html
 create mode 100644 static/usage/v7/datetime/presentation/date/index.md
 create mode 100644 static/usage/v7/datetime/presentation/date/javascript.md
 create mode 100644 static/usage/v7/datetime/presentation/date/react.md
 create mode 100644 static/usage/v7/datetime/presentation/date/vue.md
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/angular.md
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/demo.html
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/index.md
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/javascript.md
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/react.md
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/vue.md
 create mode 100644 static/usage/v7/datetime/presentation/time/angular.md
 create mode 100644 static/usage/v7/datetime/presentation/time/demo.html
 create mode 100644 static/usage/v7/datetime/presentation/time/index.md
 create mode 100644 static/usage/v7/datetime/presentation/time/javascript.md
 create mode 100644 static/usage/v7/datetime/presentation/time/react.md
 create mode 100644 static/usage/v7/datetime/presentation/time/vue.md
 create mode 100644 static/usage/v7/datetime/presentation/wheel/angular.md
 create mode 100644 static/usage/v7/datetime/presentation/wheel/demo.html
 create mode 100644 static/usage/v7/datetime/presentation/wheel/index.md
 create mode 100644 static/usage/v7/datetime/presentation/wheel/javascript.md
 create mode 100644 static/usage/v7/datetime/presentation/wheel/react.md
 create mode 100644 static/usage/v7/datetime/presentation/wheel/vue.md
 create mode 100644 static/usage/v7/datetime/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/theming/angular/global_css.md
 create mode 100644 static/usage/v7/datetime/theming/demo.html
 create mode 100644 static/usage/v7/datetime/theming/index.md
 create mode 100644 static/usage/v7/datetime/theming/javascript.md
 create mode 100644 static/usage/v7/datetime/theming/react/main_css.md
 create mode 100644 static/usage/v7/datetime/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/datetime/theming/vue.md
 create mode 100644 static/usage/v7/datetime/title/customizing-title/angular.md
 create mode 100644 static/usage/v7/datetime/title/customizing-title/demo.html
 create mode 100644 static/usage/v7/datetime/title/customizing-title/index.md
 create mode 100644 static/usage/v7/datetime/title/customizing-title/javascript.md
 create mode 100644 static/usage/v7/datetime/title/customizing-title/react.md
 create mode 100644 static/usage/v7/datetime/title/customizing-title/vue.md
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/angular.md
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/demo.html
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/index.md
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/javascript.md
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/react.md
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/vue.md
 create mode 100644 static/usage/v7/fab/basic/angular.md
 create mode 100644 static/usage/v7/fab/basic/demo.html
 create mode 100644 static/usage/v7/fab/basic/index.md
 create mode 100644 static/usage/v7/fab/basic/javascript.md
 create mode 100644 static/usage/v7/fab/basic/react.md
 create mode 100644 static/usage/v7/fab/basic/vue.md
 create mode 100644 static/usage/v7/fab/button-sizing/angular.md
 create mode 100644 static/usage/v7/fab/button-sizing/demo.html
 create mode 100644 static/usage/v7/fab/button-sizing/index.md
 create mode 100644 static/usage/v7/fab/button-sizing/javascript.md
 create mode 100644 static/usage/v7/fab/button-sizing/react.md
 create mode 100644 static/usage/v7/fab/button-sizing/vue.md
 create mode 100644 static/usage/v7/fab/list-side/angular.md
 create mode 100644 static/usage/v7/fab/list-side/demo.html
 create mode 100644 static/usage/v7/fab/list-side/index.md
 create mode 100644 static/usage/v7/fab/list-side/javascript.md
 create mode 100644 static/usage/v7/fab/list-side/react.md
 create mode 100644 static/usage/v7/fab/list-side/vue.md
 create mode 100644 static/usage/v7/fab/positioning/angular.md
 create mode 100644 static/usage/v7/fab/positioning/demo.html
 create mode 100644 static/usage/v7/fab/positioning/index.md
 create mode 100644 static/usage/v7/fab/positioning/javascript.md
 create mode 100644 static/usage/v7/fab/positioning/react.md
 create mode 100644 static/usage/v7/fab/positioning/vue.md
 create mode 100644 static/usage/v7/fab/theming/colors/angular.md
 create mode 100644 static/usage/v7/fab/theming/colors/demo.html
 create mode 100644 static/usage/v7/fab/theming/colors/index.md
 create mode 100644 static/usage/v7/fab/theming/colors/javascript.md
 create mode 100644 static/usage/v7/fab/theming/colors/react.md
 create mode 100644 static/usage/v7/fab/theming/colors/vue.md
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/demo.html
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/index.md
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/javascript.md
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/react/main_css.md
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/fab/theming/css-custom-properties/vue.md
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/fab/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/footer/basic/angular.md
 create mode 100644 static/usage/v7/footer/basic/demo.html
 create mode 100644 static/usage/v7/footer/basic/index.md
 create mode 100644 static/usage/v7/footer/basic/javascript.md
 create mode 100644 static/usage/v7/footer/basic/react.md
 create mode 100644 static/usage/v7/footer/basic/vue.md
 create mode 100644 static/usage/v7/footer/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/v7/footer/custom-scroll-target/demo.html
 create mode 100644 static/usage/v7/footer/custom-scroll-target/index.md
 create mode 100644 static/usage/v7/footer/custom-scroll-target/javascript.md
 create mode 100644 static/usage/v7/footer/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/v7/footer/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/v7/footer/custom-scroll-target/vue.md
 create mode 100644 static/usage/v7/footer/fade/angular.md
 create mode 100644 static/usage/v7/footer/fade/demo.html
 create mode 100644 static/usage/v7/footer/fade/index.md
 create mode 100644 static/usage/v7/footer/fade/javascript.md
 create mode 100644 static/usage/v7/footer/fade/react.md
 create mode 100644 static/usage/v7/footer/fade/vue.md
 create mode 100644 static/usage/v7/footer/no-border/angular.md
 create mode 100644 static/usage/v7/footer/no-border/demo.html
 create mode 100644 static/usage/v7/footer/no-border/index.md
 create mode 100644 static/usage/v7/footer/no-border/javascript.md
 create mode 100644 static/usage/v7/footer/no-border/react.md
 create mode 100644 static/usage/v7/footer/no-border/vue.md
 create mode 100644 static/usage/v7/footer/translucent/angular.md
 create mode 100644 static/usage/v7/footer/translucent/demo.html
 create mode 100644 static/usage/v7/footer/translucent/index.md
 create mode 100644 static/usage/v7/footer/translucent/javascript.md
 create mode 100644 static/usage/v7/footer/translucent/react.md
 create mode 100644 static/usage/v7/footer/translucent/vue.md
 create mode 100644 static/usage/v7/grid/basic/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/basic/demo.html
 create mode 100644 static/usage/v7/grid/basic/index.md
 create mode 100644 static/usage/v7/grid/basic/javascript.md
 create mode 100644 static/usage/v7/grid/basic/react/main_css.md
 create mode 100644 static/usage/v7/grid/basic/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/basic/vue.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/demo.html
 create mode 100644 static/usage/v7/grid/customizing/column-number/index.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/javascript.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/react/main_css.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/vue.md
 create mode 100644 static/usage/v7/grid/customizing/padding/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/customizing/padding/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/customizing/padding/demo.html
 create mode 100644 static/usage/v7/grid/customizing/padding/index.md
 create mode 100644 static/usage/v7/grid/customizing/padding/javascript.md
 create mode 100644 static/usage/v7/grid/customizing/padding/react/main_css.md
 create mode 100644 static/usage/v7/grid/customizing/padding/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/customizing/padding/vue.md
 create mode 100644 static/usage/v7/grid/customizing/width/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/customizing/width/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/customizing/width/demo.html
 create mode 100644 static/usage/v7/grid/customizing/width/index.md
 create mode 100644 static/usage/v7/grid/customizing/width/javascript.md
 create mode 100644 static/usage/v7/grid/customizing/width/react/main_css.md
 create mode 100644 static/usage/v7/grid/customizing/width/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/customizing/width/vue.md
 create mode 100644 static/usage/v7/grid/fixed/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/fixed/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/fixed/demo.html
 create mode 100644 static/usage/v7/grid/fixed/index.md
 create mode 100644 static/usage/v7/grid/fixed/javascript.md
 create mode 100644 static/usage/v7/grid/fixed/react/main_css.md
 create mode 100644 static/usage/v7/grid/fixed/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/fixed/vue.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/demo.html
 create mode 100644 static/usage/v7/grid/horizontal-alignment/index.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/javascript.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/react/main_css.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/vue.md
 create mode 100644 static/usage/v7/grid/offset-responsive/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/offset-responsive/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/offset-responsive/demo.html
 create mode 100644 static/usage/v7/grid/offset-responsive/index.md
 create mode 100644 static/usage/v7/grid/offset-responsive/javascript.md
 create mode 100644 static/usage/v7/grid/offset-responsive/react/main_css.md
 create mode 100644 static/usage/v7/grid/offset-responsive/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/offset-responsive/vue.md
 create mode 100644 static/usage/v7/grid/offset/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/offset/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/offset/demo.html
 create mode 100644 static/usage/v7/grid/offset/index.md
 create mode 100644 static/usage/v7/grid/offset/javascript.md
 create mode 100644 static/usage/v7/grid/offset/react/main_css.md
 create mode 100644 static/usage/v7/grid/offset/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/offset/vue.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/demo.html
 create mode 100644 static/usage/v7/grid/push-pull-responsive/index.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/javascript.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/react/main_css.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/vue.md
 create mode 100644 static/usage/v7/grid/push-pull/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/push-pull/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/push-pull/demo.html
 create mode 100644 static/usage/v7/grid/push-pull/index.md
 create mode 100644 static/usage/v7/grid/push-pull/javascript.md
 create mode 100644 static/usage/v7/grid/push-pull/react/main_css.md
 create mode 100644 static/usage/v7/grid/push-pull/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/push-pull/vue.md
 create mode 100644 static/usage/v7/grid/size-auto/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/size-auto/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/size-auto/demo.html
 create mode 100644 static/usage/v7/grid/size-auto/index.md
 create mode 100644 static/usage/v7/grid/size-auto/javascript.md
 create mode 100644 static/usage/v7/grid/size-auto/react/main_css.md
 create mode 100644 static/usage/v7/grid/size-auto/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/size-auto/vue.md
 create mode 100644 static/usage/v7/grid/size-responsive/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/size-responsive/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/size-responsive/demo.html
 create mode 100644 static/usage/v7/grid/size-responsive/index.md
 create mode 100644 static/usage/v7/grid/size-responsive/javascript.md
 create mode 100644 static/usage/v7/grid/size-responsive/react/main_css.md
 create mode 100644 static/usage/v7/grid/size-responsive/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/size-responsive/vue.md
 create mode 100644 static/usage/v7/grid/size/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/size/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/size/demo.html
 create mode 100644 static/usage/v7/grid/size/index.md
 create mode 100644 static/usage/v7/grid/size/javascript.md
 create mode 100644 static/usage/v7/grid/size/react/main_css.md
 create mode 100644 static/usage/v7/grid/size/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/size/vue.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/angular/example_component_css.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/angular/example_component_html.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/demo.html
 create mode 100644 static/usage/v7/grid/vertical-alignment/index.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/javascript.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/react/main_css.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/react/main_tsx.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/vue.md
 create mode 100644 static/usage/v7/header/basic/angular.md
 create mode 100644 static/usage/v7/header/basic/demo.html
 create mode 100644 static/usage/v7/header/basic/index.md
 create mode 100644 static/usage/v7/header/basic/javascript.md
 create mode 100644 static/usage/v7/header/basic/react.md
 create mode 100644 static/usage/v7/header/basic/vue.md
 create mode 100644 static/usage/v7/header/condense/angular.md
 create mode 100644 static/usage/v7/header/condense/demo.html
 create mode 100644 static/usage/v7/header/condense/index.md
 create mode 100644 static/usage/v7/header/condense/javascript.md
 create mode 100644 static/usage/v7/header/condense/react.md
 create mode 100644 static/usage/v7/header/condense/vue.md
 create mode 100644 static/usage/v7/header/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/v7/header/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/v7/header/custom-scroll-target/demo.html
 create mode 100644 static/usage/v7/header/custom-scroll-target/index.md
 create mode 100644 static/usage/v7/header/custom-scroll-target/javascript.md
 create mode 100644 static/usage/v7/header/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/v7/header/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/v7/header/custom-scroll-target/vue.md
 create mode 100644 static/usage/v7/header/fade/angular.md
 create mode 100644 static/usage/v7/header/fade/demo.html
 create mode 100644 static/usage/v7/header/fade/index.md
 create mode 100644 static/usage/v7/header/fade/javascript.md
 create mode 100644 static/usage/v7/header/fade/react.md
 create mode 100644 static/usage/v7/header/fade/vue.md
 create mode 100644 static/usage/v7/header/no-border/angular.md
 create mode 100644 static/usage/v7/header/no-border/demo.html
 create mode 100644 static/usage/v7/header/no-border/index.md
 create mode 100644 static/usage/v7/header/no-border/javascript.md
 create mode 100644 static/usage/v7/header/no-border/react.md
 create mode 100644 static/usage/v7/header/no-border/vue.md
 create mode 100644 static/usage/v7/header/translucent/angular.md
 create mode 100644 static/usage/v7/header/translucent/demo.html
 create mode 100644 static/usage/v7/header/translucent/index.md
 create mode 100644 static/usage/v7/header/translucent/javascript.md
 create mode 100644 static/usage/v7/header/translucent/react.md
 create mode 100644 static/usage/v7/header/translucent/vue.md
 create mode 100644 static/usage/v7/img/basic/angular.md
 create mode 100644 static/usage/v7/img/basic/demo.html
 create mode 100644 static/usage/v7/img/basic/index.md
 create mode 100644 static/usage/v7/img/basic/javascript.md
 create mode 100644 static/usage/v7/img/basic/react.md
 create mode 100644 static/usage/v7/img/basic/vue.md
 create mode 100644 static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/infinite-scroll/basic/demo.html
 create mode 100644 static/usage/v7/infinite-scroll/basic/index.md
 create mode 100644 static/usage/v7/infinite-scroll/basic/javascript.md
 create mode 100644 static/usage/v7/infinite-scroll/basic/react.md
 create mode 100644 static/usage/v7/infinite-scroll/basic/vue.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/javascript.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
 create mode 100644 static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
 create mode 100644 static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
 create mode 100644 static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
 create mode 100644 static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
 create mode 100644 static/usage/v7/infinite-scroll/infinite-scroll-content/index.md
 create mode 100644 static/usage/v7/infinite-scroll/infinite-scroll-content/javascript.md
 create mode 100644 static/usage/v7/infinite-scroll/infinite-scroll-content/react.md
 create mode 100644 static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
 create mode 100644 static/usage/v7/input/basic/angular.md
 create mode 100644 static/usage/v7/input/basic/demo.html
 create mode 100644 static/usage/v7/input/basic/index.md
 create mode 100644 static/usage/v7/input/basic/javascript.md
 create mode 100644 static/usage/v7/input/basic/react.md
 create mode 100644 static/usage/v7/input/basic/vue.md
 create mode 100644 static/usage/v7/input/clear/angular.md
 create mode 100644 static/usage/v7/input/clear/demo.html
 create mode 100644 static/usage/v7/input/clear/index.md
 create mode 100644 static/usage/v7/input/clear/javascript.md
 create mode 100644 static/usage/v7/input/clear/react.md
 create mode 100644 static/usage/v7/input/clear/vue.md
 create mode 100644 static/usage/v7/input/fill/angular.md
 create mode 100644 static/usage/v7/input/fill/demo.html
 create mode 100644 static/usage/v7/input/fill/index.md
 create mode 100644 static/usage/v7/input/fill/javascript.md
 create mode 100644 static/usage/v7/input/fill/react.md
 create mode 100644 static/usage/v7/input/fill/vue.md
 create mode 100644 static/usage/v7/input/labels/angular.md
 create mode 100644 static/usage/v7/input/labels/demo.html
 create mode 100644 static/usage/v7/input/labels/index.md
 create mode 100644 static/usage/v7/input/labels/javascript.md
 create mode 100644 static/usage/v7/input/labels/react.md
 create mode 100644 static/usage/v7/input/labels/vue.md
 create mode 100644 static/usage/v7/input/theming/colors/angular.md
 create mode 100644 static/usage/v7/input/theming/colors/demo.html
 create mode 100644 static/usage/v7/input/theming/colors/index.md
 create mode 100644 static/usage/v7/input/theming/colors/javascript.md
 create mode 100644 static/usage/v7/input/theming/colors/react.md
 create mode 100644 static/usage/v7/input/theming/colors/vue.md
 create mode 100644 static/usage/v7/input/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/input/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/input/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/input/theming/css-properties/index.md
 create mode 100644 static/usage/v7/input/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/input/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/input/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/input/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/input/types/angular.md
 create mode 100644 static/usage/v7/input/types/demo.html
 create mode 100644 static/usage/v7/input/types/index.md
 create mode 100644 static/usage/v7/input/types/javascript.md
 create mode 100644 static/usage/v7/input/types/react.md
 create mode 100644 static/usage/v7/input/types/vue.md
 create mode 100644 static/usage/v7/item-divider/basic/angular.md
 create mode 100644 static/usage/v7/item-divider/basic/demo.html
 create mode 100644 static/usage/v7/item-divider/basic/index.md
 create mode 100644 static/usage/v7/item-divider/basic/javascript.md
 create mode 100644 static/usage/v7/item-divider/basic/react.md
 create mode 100644 static/usage/v7/item-divider/basic/vue.md
 create mode 100644 static/usage/v7/item-divider/theming/colors/angular.md
 create mode 100644 static/usage/v7/item-divider/theming/colors/demo.html
 create mode 100644 static/usage/v7/item-divider/theming/colors/index.md
 create mode 100644 static/usage/v7/item-divider/theming/colors/javascript.md
 create mode 100644 static/usage/v7/item-divider/theming/colors/react.md
 create mode 100644 static/usage/v7/item-divider/theming/colors/vue.md
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/index.md
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/item-divider/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/item-group/basic/angular.md
 create mode 100644 static/usage/v7/item-group/basic/demo.html
 create mode 100644 static/usage/v7/item-group/basic/index.md
 create mode 100644 static/usage/v7/item-group/basic/javascript.md
 create mode 100644 static/usage/v7/item-group/basic/react.md
 create mode 100644 static/usage/v7/item-group/basic/vue.md
 create mode 100644 static/usage/v7/item-group/sliding-items/angular.md
 create mode 100644 static/usage/v7/item-group/sliding-items/demo.html
 create mode 100644 static/usage/v7/item-group/sliding-items/index.md
 create mode 100644 static/usage/v7/item-group/sliding-items/javascript.md
 create mode 100644 static/usage/v7/item-group/sliding-items/react.md
 create mode 100644 static/usage/v7/item-group/sliding-items/vue.md
 create mode 100644 static/usage/v7/item-sliding/basic/angular.md
 create mode 100644 static/usage/v7/item-sliding/basic/demo.html
 create mode 100644 static/usage/v7/item-sliding/basic/index.md
 create mode 100644 static/usage/v7/item-sliding/basic/javascript.md
 create mode 100644 static/usage/v7/item-sliding/basic/react.md
 create mode 100644 static/usage/v7/item-sliding/basic/vue.md
 create mode 100644 static/usage/v7/item-sliding/expandable/angular.md
 create mode 100644 static/usage/v7/item-sliding/expandable/demo.html
 create mode 100644 static/usage/v7/item-sliding/expandable/index.md
 create mode 100644 static/usage/v7/item-sliding/expandable/javascript.md
 create mode 100644 static/usage/v7/item-sliding/expandable/react.md
 create mode 100644 static/usage/v7/item-sliding/expandable/vue.md
 create mode 100644 static/usage/v7/item-sliding/icons/angular.md
 create mode 100644 static/usage/v7/item-sliding/icons/demo.html
 create mode 100644 static/usage/v7/item-sliding/icons/index.md
 create mode 100644 static/usage/v7/item-sliding/icons/javascript.md
 create mode 100644 static/usage/v7/item-sliding/icons/react.md
 create mode 100644 static/usage/v7/item-sliding/icons/vue.md
 create mode 100644 static/usage/v7/item/basic/angular.md
 create mode 100644 static/usage/v7/item/basic/demo.html
 create mode 100644 static/usage/v7/item/basic/index.md
 create mode 100644 static/usage/v7/item/basic/javascript.md
 create mode 100644 static/usage/v7/item/basic/react.md
 create mode 100644 static/usage/v7/item/basic/vue.md
 create mode 100644 static/usage/v7/item/buttons/angular.md
 create mode 100644 static/usage/v7/item/buttons/demo.html
 create mode 100644 static/usage/v7/item/buttons/index.md
 create mode 100644 static/usage/v7/item/buttons/javascript.md
 create mode 100644 static/usage/v7/item/buttons/react.md
 create mode 100644 static/usage/v7/item/buttons/vue.md
 create mode 100644 static/usage/v7/item/clickable/angular.md
 create mode 100644 static/usage/v7/item/clickable/demo.html
 create mode 100644 static/usage/v7/item/clickable/index.md
 create mode 100644 static/usage/v7/item/clickable/javascript.md
 create mode 100644 static/usage/v7/item/clickable/react.md
 create mode 100644 static/usage/v7/item/clickable/vue.md
 create mode 100644 static/usage/v7/item/counter/angular/example_component_html.md
 create mode 100644 static/usage/v7/item/counter/angular/example_component_ts.md
 create mode 100644 static/usage/v7/item/counter/demo.html
 create mode 100644 static/usage/v7/item/counter/index.md
 create mode 100644 static/usage/v7/item/counter/javascript.md
 create mode 100644 static/usage/v7/item/counter/react.md
 create mode 100644 static/usage/v7/item/counter/vue.md
 create mode 100644 static/usage/v7/item/detail-arrows/angular.md
 create mode 100644 static/usage/v7/item/detail-arrows/demo.html
 create mode 100644 static/usage/v7/item/detail-arrows/index.md
 create mode 100644 static/usage/v7/item/detail-arrows/javascript.md
 create mode 100644 static/usage/v7/item/detail-arrows/react.md
 create mode 100644 static/usage/v7/item/detail-arrows/vue.md
 create mode 100644 static/usage/v7/item/helper-error/angular.md
 create mode 100644 static/usage/v7/item/helper-error/demo.html
 create mode 100644 static/usage/v7/item/helper-error/index.md
 create mode 100644 static/usage/v7/item/helper-error/javascript.md
 create mode 100644 static/usage/v7/item/helper-error/react.md
 create mode 100644 static/usage/v7/item/helper-error/vue.md
 create mode 100644 static/usage/v7/item/icons/angular.md
 create mode 100644 static/usage/v7/item/icons/demo.html
 create mode 100644 static/usage/v7/item/icons/index.md
 create mode 100644 static/usage/v7/item/icons/javascript.md
 create mode 100644 static/usage/v7/item/icons/react.md
 create mode 100644 static/usage/v7/item/icons/vue.md
 create mode 100644 static/usage/v7/item/inputs/angular.md
 create mode 100644 static/usage/v7/item/inputs/demo.html
 create mode 100644 static/usage/v7/item/inputs/index.md
 create mode 100644 static/usage/v7/item/inputs/javascript.md
 create mode 100644 static/usage/v7/item/inputs/react.md
 create mode 100644 static/usage/v7/item/inputs/vue.md
 create mode 100644 static/usage/v7/item/lines/angular.md
 create mode 100644 static/usage/v7/item/lines/demo.html
 create mode 100644 static/usage/v7/item/lines/index.md
 create mode 100644 static/usage/v7/item/lines/javascript.md
 create mode 100644 static/usage/v7/item/lines/react.md
 create mode 100644 static/usage/v7/item/lines/vue.md
 create mode 100644 static/usage/v7/item/media/angular.md
 create mode 100644 static/usage/v7/item/media/demo.html
 create mode 100644 static/usage/v7/item/media/index.md
 create mode 100644 static/usage/v7/item/media/javascript.md
 create mode 100644 static/usage/v7/item/media/react.md
 create mode 100644 static/usage/v7/item/media/vue.md
 create mode 100644 static/usage/v7/item/theming/colors/angular.md
 create mode 100644 static/usage/v7/item/theming/colors/demo.html
 create mode 100644 static/usage/v7/item/theming/colors/index.md
 create mode 100644 static/usage/v7/item/theming/colors/javascript.md
 create mode 100644 static/usage/v7/item/theming/colors/react.md
 create mode 100644 static/usage/v7/item/theming/colors/vue.md
 create mode 100644 static/usage/v7/item/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/item/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/item/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/item/theming/css-properties/index.md
 create mode 100644 static/usage/v7/item/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/item/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/item/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/item/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/item/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
 create mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
 create mode 100644 static/usage/v7/item/theming/input-highlight/demo.html
 create mode 100644 static/usage/v7/item/theming/input-highlight/index.md
 create mode 100644 static/usage/v7/item/theming/input-highlight/javascript.md
 create mode 100644 static/usage/v7/item/theming/input-highlight/react/main_css.md
 create mode 100644 static/usage/v7/item/theming/input-highlight/react/main_tsx.md
 create mode 100644 static/usage/v7/item/theming/input-highlight/vue.md
 create mode 100644 static/usage/v7/label/basic/angular.md
 create mode 100644 static/usage/v7/label/basic/demo.html
 create mode 100644 static/usage/v7/label/basic/index.md
 create mode 100644 static/usage/v7/label/basic/javascript.md
 create mode 100644 static/usage/v7/label/basic/react.md
 create mode 100644 static/usage/v7/label/basic/vue.md
 create mode 100644 static/usage/v7/label/input/angular.md
 create mode 100644 static/usage/v7/label/input/demo.html
 create mode 100644 static/usage/v7/label/input/index.md
 create mode 100644 static/usage/v7/label/input/javascript.md
 create mode 100644 static/usage/v7/label/input/react.md
 create mode 100644 static/usage/v7/label/input/vue.md
 create mode 100644 static/usage/v7/label/item/angular.md
 create mode 100644 static/usage/v7/label/item/demo.html
 create mode 100644 static/usage/v7/label/item/index.md
 create mode 100644 static/usage/v7/label/item/javascript.md
 create mode 100644 static/usage/v7/label/item/react.md
 create mode 100644 static/usage/v7/label/item/vue.md
 create mode 100644 static/usage/v7/label/theming/colors/angular.md
 create mode 100644 static/usage/v7/label/theming/colors/demo.html
 create mode 100644 static/usage/v7/label/theming/colors/index.md
 create mode 100644 static/usage/v7/label/theming/colors/javascript.md
 create mode 100644 static/usage/v7/label/theming/colors/react.md
 create mode 100644 static/usage/v7/label/theming/colors/vue.md
 create mode 100644 static/usage/v7/list-header/basic/angular.md
 create mode 100644 static/usage/v7/list-header/basic/demo.html
 create mode 100644 static/usage/v7/list-header/basic/index.md
 create mode 100644 static/usage/v7/list-header/basic/javascript.md
 create mode 100644 static/usage/v7/list-header/basic/react.md
 create mode 100644 static/usage/v7/list-header/basic/vue.md
 create mode 100644 static/usage/v7/list-header/buttons/angular.md
 create mode 100644 static/usage/v7/list-header/buttons/demo.html
 create mode 100644 static/usage/v7/list-header/buttons/index.md
 create mode 100644 static/usage/v7/list-header/buttons/javascript.md
 create mode 100644 static/usage/v7/list-header/buttons/react.md
 create mode 100644 static/usage/v7/list-header/buttons/vue.md
 create mode 100644 static/usage/v7/list-header/lines/angular.md
 create mode 100644 static/usage/v7/list-header/lines/demo.html
 create mode 100644 static/usage/v7/list-header/lines/index.md
 create mode 100644 static/usage/v7/list-header/lines/javascript.md
 create mode 100644 static/usage/v7/list-header/lines/react.md
 create mode 100644 static/usage/v7/list-header/lines/vue.md
 create mode 100644 static/usage/v7/list-header/theming/colors/angular.md
 create mode 100644 static/usage/v7/list-header/theming/colors/demo.html
 create mode 100644 static/usage/v7/list-header/theming/colors/index.md
 create mode 100644 static/usage/v7/list-header/theming/colors/javascript.md
 create mode 100644 static/usage/v7/list-header/theming/colors/react.md
 create mode 100644 static/usage/v7/list-header/theming/colors/vue.md
 create mode 100644 static/usage/v7/list-header/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/list-header/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/list-header/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/list-header/theming/css-properties/index.md
 create mode 100644 static/usage/v7/list-header/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/list-header/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/list-header/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/list-header/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/list/basic/angular.md
 create mode 100644 static/usage/v7/list/basic/demo.html
 create mode 100644 static/usage/v7/list/basic/index.md
 create mode 100644 static/usage/v7/list/basic/javascript.md
 create mode 100644 static/usage/v7/list/basic/react.md
 create mode 100644 static/usage/v7/list/basic/vue.md
 create mode 100644 static/usage/v7/list/inset/angular.md
 create mode 100644 static/usage/v7/list/inset/demo.html
 create mode 100644 static/usage/v7/list/inset/index.md
 create mode 100644 static/usage/v7/list/inset/javascript.md
 create mode 100644 static/usage/v7/list/inset/react.md
 create mode 100644 static/usage/v7/list/inset/vue.md
 create mode 100644 static/usage/v7/list/lines/angular.md
 create mode 100644 static/usage/v7/list/lines/demo.html
 create mode 100644 static/usage/v7/list/lines/index.md
 create mode 100644 static/usage/v7/list/lines/javascript.md
 create mode 100644 static/usage/v7/list/lines/react.md
 create mode 100644 static/usage/v7/list/lines/vue.md
 create mode 100644 static/usage/v7/loading/controller/angular/example_component_html.md
 create mode 100644 static/usage/v7/loading/controller/angular/example_component_ts.md
 create mode 100644 static/usage/v7/loading/controller/demo.html
 create mode 100644 static/usage/v7/loading/controller/index.md
 create mode 100644 static/usage/v7/loading/controller/javascript.md
 create mode 100644 static/usage/v7/loading/controller/react.md
 create mode 100644 static/usage/v7/loading/controller/vue.md
 create mode 100644 static/usage/v7/loading/spinners/angular/example_component_html.md
 create mode 100644 static/usage/v7/loading/spinners/angular/example_component_ts.md
 create mode 100644 static/usage/v7/loading/spinners/demo.html
 create mode 100644 static/usage/v7/loading/spinners/index.md
 create mode 100644 static/usage/v7/loading/spinners/javascript.md
 create mode 100644 static/usage/v7/loading/spinners/react.md
 create mode 100644 static/usage/v7/loading/spinners/vue.md
 create mode 100644 static/usage/v7/loading/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/loading/theming/angular/example_component_ts.md
 create mode 100644 static/usage/v7/loading/theming/angular/global_css.md
 create mode 100644 static/usage/v7/loading/theming/demo.html
 create mode 100644 static/usage/v7/loading/theming/index.md
 create mode 100644 static/usage/v7/loading/theming/javascript.md
 create mode 100644 static/usage/v7/loading/theming/react.md
 create mode 100644 static/usage/v7/loading/theming/react/main_css.md
 create mode 100644 static/usage/v7/loading/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/loading/theming/vue.md
 create mode 100644 static/usage/v7/menu/basic/angular.md
 create mode 100644 static/usage/v7/menu/basic/demo.html
 create mode 100644 static/usage/v7/menu/basic/index.md
 create mode 100644 static/usage/v7/menu/basic/javascript.md
 create mode 100644 static/usage/v7/menu/basic/react.md
 create mode 100644 static/usage/v7/menu/basic/vue.md
 create mode 100644 static/usage/v7/menu/theming/angular/example_component_css.md
 create mode 100644 static/usage/v7/menu/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/menu/theming/demo.html
 create mode 100644 static/usage/v7/menu/theming/index.md
 create mode 100644 static/usage/v7/menu/theming/javascript.md
 create mode 100644 static/usage/v7/menu/theming/react/main_css.md
 create mode 100644 static/usage/v7/menu/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/menu/theming/vue.md
 create mode 100644 static/usage/v7/menu/toggle/angular.md
 create mode 100644 static/usage/v7/menu/toggle/demo.html
 create mode 100644 static/usage/v7/menu/toggle/index.md
 create mode 100644 static/usage/v7/menu/toggle/javascript.md
 create mode 100644 static/usage/v7/menu/toggle/react.md
 create mode 100644 static/usage/v7/menu/toggle/vue.md
 create mode 100644 static/usage/v7/menu/type/angular/example_component_html.md
 create mode 100644 static/usage/v7/menu/type/angular/example_component_ts.md
 create mode 100644 static/usage/v7/menu/type/demo.html
 create mode 100644 static/usage/v7/menu/type/index.md
 create mode 100644 static/usage/v7/menu/type/javascript.md
 create mode 100644 static/usage/v7/menu/type/react.md
 create mode 100644 static/usage/v7/menu/type/vue.md
 create mode 100644 static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/can-dismiss/boolean/demo.html
 create mode 100644 static/usage/v7/modal/can-dismiss/boolean/index.md
 create mode 100644 static/usage/v7/modal/can-dismiss/boolean/javascript.md
 create mode 100644 static/usage/v7/modal/can-dismiss/boolean/react.md
 create mode 100644 static/usage/v7/modal/can-dismiss/boolean/vue.md
 create mode 100644 static/usage/v7/modal/can-dismiss/function/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/can-dismiss/function/demo.html
 create mode 100644 static/usage/v7/modal/can-dismiss/function/index.md
 create mode 100644 static/usage/v7/modal/can-dismiss/function/javascript.md
 create mode 100644 static/usage/v7/modal/can-dismiss/function/react.md
 create mode 100644 static/usage/v7/modal/can-dismiss/function/vue.md
 create mode 100644 static/usage/v7/modal/card/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/card/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/card/basic/demo.html
 create mode 100644 static/usage/v7/modal/card/basic/index.md
 create mode 100644 static/usage/v7/modal/card/basic/javascript.md
 create mode 100644 static/usage/v7/modal/card/basic/react.md
 create mode 100644 static/usage/v7/modal/card/basic/vue.md
 create mode 100644 static/usage/v7/modal/controller/angular/app_module_ts.md
 create mode 100644 static/usage/v7/modal/controller/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/controller/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/controller/angular/modal-example_component_html.md
 create mode 100644 static/usage/v7/modal/controller/angular/modal-example_component_ts.md
 create mode 100644 static/usage/v7/modal/controller/demo.html
 create mode 100644 static/usage/v7/modal/controller/index.md
 create mode 100644 static/usage/v7/modal/controller/javascript.md
 create mode 100644 static/usage/v7/modal/controller/react.md
 create mode 100644 static/usage/v7/modal/controller/vue/example_vue.md
 create mode 100644 static/usage/v7/modal/controller/vue/modal_vue.md
 create mode 100644 static/usage/v7/modal/custom-dialogs/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/custom-dialogs/angular/global_css.md
 create mode 100644 static/usage/v7/modal/custom-dialogs/demo.html
 create mode 100644 static/usage/v7/modal/custom-dialogs/index.md
 create mode 100644 static/usage/v7/modal/custom-dialogs/javascript.md
 create mode 100644 static/usage/v7/modal/custom-dialogs/react/main_css.md
 create mode 100644 static/usage/v7/modal/custom-dialogs/react/main_tsx.md
 create mode 100644 static/usage/v7/modal/custom-dialogs/vue.md
 create mode 100644 static/usage/v7/modal/inline/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/inline/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/inline/basic/demo.html
 create mode 100644 static/usage/v7/modal/inline/basic/index.md
 create mode 100644 static/usage/v7/modal/inline/basic/javascript.md
 create mode 100644 static/usage/v7/modal/inline/basic/react.md
 create mode 100644 static/usage/v7/modal/inline/basic/vue.md
 create mode 100644 static/usage/v7/modal/inline/is-open/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/inline/is-open/demo.html
 create mode 100644 static/usage/v7/modal/inline/is-open/index.md
 create mode 100644 static/usage/v7/modal/inline/is-open/javascript.md
 create mode 100644 static/usage/v7/modal/inline/is-open/react.md
 create mode 100644 static/usage/v7/modal/inline/is-open/vue.md
 create mode 100644 static/usage/v7/modal/performance/mount/angular.md
 create mode 100644 static/usage/v7/modal/performance/mount/demo.html
 create mode 100644 static/usage/v7/modal/performance/mount/index.md
 create mode 100644 static/usage/v7/modal/performance/mount/javascript.md
 create mode 100644 static/usage/v7/modal/performance/mount/react.md
 create mode 100644 static/usage/v7/modal/performance/mount/vue.md
 create mode 100644 static/usage/v7/modal/sheet/background-content/angular/example_component_css.md
 create mode 100644 static/usage/v7/modal/sheet/background-content/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/sheet/background-content/demo.html
 create mode 100644 static/usage/v7/modal/sheet/background-content/index.md
 create mode 100644 static/usage/v7/modal/sheet/background-content/javascript.md
 create mode 100644 static/usage/v7/modal/sheet/background-content/react.md
 create mode 100644 static/usage/v7/modal/sheet/background-content/vue.md
 create mode 100644 static/usage/v7/modal/sheet/basic/angular.md
 create mode 100644 static/usage/v7/modal/sheet/basic/demo.html
 create mode 100644 static/usage/v7/modal/sheet/basic/index.md
 create mode 100644 static/usage/v7/modal/sheet/basic/javascript.md
 create mode 100644 static/usage/v7/modal/sheet/basic/react.md
 create mode 100644 static/usage/v7/modal/sheet/basic/vue.md
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/angular.md
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/demo.html
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/index.md
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/javascript.md
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/react.md
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/vue.md
 create mode 100644 static/usage/v7/modal/styling/animations/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/styling/animations/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/styling/animations/demo.html
 create mode 100644 static/usage/v7/modal/styling/animations/index.md
 create mode 100644 static/usage/v7/modal/styling/animations/javascript/index_html.md
 create mode 100644 static/usage/v7/modal/styling/animations/javascript/index_ts.md
 create mode 100644 static/usage/v7/modal/styling/animations/react.md
 create mode 100644 static/usage/v7/modal/styling/animations/vue.md
 create mode 100644 static/usage/v7/modal/styling/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/styling/theming/angular/global_css.md
 create mode 100644 static/usage/v7/modal/styling/theming/demo.html
 create mode 100644 static/usage/v7/modal/styling/theming/index.md
 create mode 100644 static/usage/v7/modal/styling/theming/javascript.md
 create mode 100644 static/usage/v7/modal/styling/theming/react/main_css.md
 create mode 100644 static/usage/v7/modal/styling/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/modal/styling/theming/vue.md
 create mode 100644 static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
 create mode 100644 static/usage/v7/nav/modal-navigation/angular/example_component_html.md
 create mode 100644 static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
 create mode 100644 static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
 create mode 100644 static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
 create mode 100644 static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
 create mode 100644 static/usage/v7/nav/modal-navigation/demo.html
 create mode 100644 static/usage/v7/nav/modal-navigation/index.md
 create mode 100644 static/usage/v7/nav/modal-navigation/javascript.md
 create mode 100644 static/usage/v7/nav/modal-navigation/react/main_tsx.md
 create mode 100644 static/usage/v7/nav/modal-navigation/react/page_one_tsx.md
 create mode 100644 static/usage/v7/nav/modal-navigation/react/page_three_tsx.md
 create mode 100644 static/usage/v7/nav/modal-navigation/react/page_two_tsx.md
 create mode 100644 static/usage/v7/nav/modal-navigation/vue/example_vue.md
 create mode 100644 static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
 create mode 100644 static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
 create mode 100644 static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
 create mode 100644 static/usage/v7/nav/nav-link/angular/app_module_ts.md
 create mode 100644 static/usage/v7/nav/nav-link/angular/example_component_html.md
 create mode 100644 static/usage/v7/nav/nav-link/angular/example_component_ts.md
 create mode 100644 static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
 create mode 100644 static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
 create mode 100644 static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
 create mode 100644 static/usage/v7/nav/nav-link/demo.html
 create mode 100644 static/usage/v7/nav/nav-link/index.md
 create mode 100644 static/usage/v7/nav/nav-link/javascript.md
 create mode 100644 static/usage/v7/nav/nav-link/react/main_tsx.md
 create mode 100644 static/usage/v7/nav/nav-link/react/page_one_tsx.md
 create mode 100644 static/usage/v7/nav/nav-link/react/page_three_tsx.md
 create mode 100644 static/usage/v7/nav/nav-link/react/page_two_tsx.md
 create mode 100644 static/usage/v7/nav/nav-link/vue/example_vue.md
 create mode 100644 static/usage/v7/nav/nav-link/vue/page_one_vue.md
 create mode 100644 static/usage/v7/nav/nav-link/vue/page_three_vue.md
 create mode 100644 static/usage/v7/nav/nav-link/vue/page_two_vue.md
 create mode 100644 static/usage/v7/note/basic/angular.md
 create mode 100644 static/usage/v7/note/basic/demo.html
 create mode 100644 static/usage/v7/note/basic/index.md
 create mode 100644 static/usage/v7/note/basic/javascript.md
 create mode 100644 static/usage/v7/note/basic/react.md
 create mode 100644 static/usage/v7/note/basic/vue.md
 create mode 100644 static/usage/v7/note/item/angular.md
 create mode 100644 static/usage/v7/note/item/demo.html
 create mode 100644 static/usage/v7/note/item/index.md
 create mode 100644 static/usage/v7/note/item/javascript.md
 create mode 100644 static/usage/v7/note/item/react.md
 create mode 100644 static/usage/v7/note/item/vue.md
 create mode 100644 static/usage/v7/note/theming/colors/angular.md
 create mode 100644 static/usage/v7/note/theming/colors/demo.html
 create mode 100644 static/usage/v7/note/theming/colors/index.md
 create mode 100644 static/usage/v7/note/theming/colors/javascript.md
 create mode 100644 static/usage/v7/note/theming/colors/react.md
 create mode 100644 static/usage/v7/note/theming/colors/vue.md
 create mode 100644 static/usage/v7/note/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/note/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/note/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/note/theming/css-properties/index.md
 create mode 100644 static/usage/v7/note/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/note/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/note/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/note/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/picker/multiple-column/angular/example_component_html.md
 create mode 100644 static/usage/v7/picker/multiple-column/angular/example_component_ts.md
 create mode 100644 static/usage/v7/picker/multiple-column/demo.html
 create mode 100644 static/usage/v7/picker/multiple-column/index.md
 create mode 100644 static/usage/v7/picker/multiple-column/javascript.md
 create mode 100644 static/usage/v7/picker/multiple-column/react.md
 create mode 100644 static/usage/v7/picker/multiple-column/vue.md
 create mode 100644 static/usage/v7/picker/single-column/angular/example_component_html.md
 create mode 100644 static/usage/v7/picker/single-column/angular/example_component_ts.md
 create mode 100644 static/usage/v7/picker/single-column/demo.html
 create mode 100644 static/usage/v7/picker/single-column/index.md
 create mode 100644 static/usage/v7/picker/single-column/javascript.md
 create mode 100644 static/usage/v7/picker/single-column/react.md
 create mode 100644 static/usage/v7/picker/single-column/vue.md
 create mode 100644 static/usage/v7/popover/customization/positioning/angular/example_component_css.md
 create mode 100644 static/usage/v7/popover/customization/positioning/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
 create mode 100644 static/usage/v7/popover/customization/positioning/demo.html
 create mode 100644 static/usage/v7/popover/customization/positioning/index.md
 create mode 100644 static/usage/v7/popover/customization/positioning/javascript.md
 create mode 100644 static/usage/v7/popover/customization/positioning/react/main_css.md
 create mode 100644 static/usage/v7/popover/customization/positioning/react/main_tsx.md
 create mode 100644 static/usage/v7/popover/customization/positioning/vue.md
 create mode 100644 static/usage/v7/popover/customization/sizing/angular.md
 create mode 100644 static/usage/v7/popover/customization/sizing/demo.html
 create mode 100644 static/usage/v7/popover/customization/sizing/index.md
 create mode 100644 static/usage/v7/popover/customization/sizing/javascript.md
 create mode 100644 static/usage/v7/popover/customization/sizing/react.md
 create mode 100644 static/usage/v7/popover/customization/sizing/vue.md
 create mode 100644 static/usage/v7/popover/customization/styling/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/customization/styling/angular/global_css.md
 create mode 100644 static/usage/v7/popover/customization/styling/demo.html
 create mode 100644 static/usage/v7/popover/customization/styling/index.md
 create mode 100644 static/usage/v7/popover/customization/styling/javascript.md
 create mode 100644 static/usage/v7/popover/customization/styling/react/main_css.md
 create mode 100644 static/usage/v7/popover/customization/styling/react/main_tsx.md
 create mode 100644 static/usage/v7/popover/customization/styling/vue.md
 create mode 100644 static/usage/v7/popover/nested/angular.md
 create mode 100644 static/usage/v7/popover/nested/demo.html
 create mode 100644 static/usage/v7/popover/nested/index.md
 create mode 100644 static/usage/v7/popover/nested/javascript.md
 create mode 100644 static/usage/v7/popover/nested/react.md
 create mode 100644 static/usage/v7/popover/nested/vue.md
 create mode 100644 static/usage/v7/popover/performance/mount/angular.md
 create mode 100644 static/usage/v7/popover/performance/mount/demo.html
 create mode 100644 static/usage/v7/popover/performance/mount/index.md
 create mode 100644 static/usage/v7/popover/performance/mount/javascript.md
 create mode 100644 static/usage/v7/popover/performance/mount/react.md
 create mode 100644 static/usage/v7/popover/performance/mount/vue.md
 create mode 100644 static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
 create mode 100644 static/usage/v7/popover/presenting/controller/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
 create mode 100644 static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
 create mode 100644 static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
 create mode 100644 static/usage/v7/popover/presenting/controller/demo.html
 create mode 100644 static/usage/v7/popover/presenting/controller/index.md
 create mode 100644 static/usage/v7/popover/presenting/controller/javascript.md
 create mode 100644 static/usage/v7/popover/presenting/controller/react.md
 create mode 100644 static/usage/v7/popover/presenting/controller/vue/example_vue.md
 create mode 100644 static/usage/v7/popover/presenting/controller/vue/popover_vue.md
 create mode 100644 static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
 create mode 100644 static/usage/v7/popover/presenting/inline-isopen/demo.html
 create mode 100644 static/usage/v7/popover/presenting/inline-isopen/index.md
 create mode 100644 static/usage/v7/popover/presenting/inline-isopen/javascript.md
 create mode 100644 static/usage/v7/popover/presenting/inline-isopen/react.md
 create mode 100644 static/usage/v7/popover/presenting/inline-isopen/vue.md
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/angular.md
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/demo.html
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/index.md
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/javascript.md
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/react.md
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/vue.md
 create mode 100644 static/usage/v7/progress-bar/buffer/angular/example_component_html.md
 create mode 100644 static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
 create mode 100644 static/usage/v7/progress-bar/buffer/demo.html
 create mode 100644 static/usage/v7/progress-bar/buffer/index.md
 create mode 100644 static/usage/v7/progress-bar/buffer/javascript.md
 create mode 100644 static/usage/v7/progress-bar/buffer/react.md
 create mode 100644 static/usage/v7/progress-bar/buffer/vue.md
 create mode 100644 static/usage/v7/progress-bar/determinate/angular/example_component_html.md
 create mode 100644 static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
 create mode 100644 static/usage/v7/progress-bar/determinate/demo.html
 create mode 100644 static/usage/v7/progress-bar/determinate/index.md
 create mode 100644 static/usage/v7/progress-bar/determinate/javascript.md
 create mode 100644 static/usage/v7/progress-bar/determinate/react.md
 create mode 100644 static/usage/v7/progress-bar/determinate/vue.md
 create mode 100644 static/usage/v7/progress-bar/indeterminate/angular.md
 create mode 100644 static/usage/v7/progress-bar/indeterminate/demo.html
 create mode 100644 static/usage/v7/progress-bar/indeterminate/index.md
 create mode 100644 static/usage/v7/progress-bar/indeterminate/javascript.md
 create mode 100644 static/usage/v7/progress-bar/indeterminate/react.md
 create mode 100644 static/usage/v7/progress-bar/indeterminate/vue.md
 create mode 100644 static/usage/v7/progress-bar/theming/colors/angular.md
 create mode 100644 static/usage/v7/progress-bar/theming/colors/demo.html
 create mode 100644 static/usage/v7/progress-bar/theming/colors/index.md
 create mode 100644 static/usage/v7/progress-bar/theming/colors/javascript.md
 create mode 100644 static/usage/v7/progress-bar/theming/colors/react.md
 create mode 100644 static/usage/v7/progress-bar/theming/colors/vue.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/index.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/radio/basic/angular.md
 create mode 100644 static/usage/v7/radio/basic/demo.html
 create mode 100644 static/usage/v7/radio/basic/index.md
 create mode 100644 static/usage/v7/radio/basic/javascript.md
 create mode 100644 static/usage/v7/radio/basic/react.md
 create mode 100644 static/usage/v7/radio/basic/vue.md
 create mode 100644 static/usage/v7/radio/empty-selection/angular.md
 create mode 100644 static/usage/v7/radio/empty-selection/demo.html
 create mode 100644 static/usage/v7/radio/empty-selection/index.md
 create mode 100644 static/usage/v7/radio/empty-selection/javascript.md
 create mode 100644 static/usage/v7/radio/empty-selection/react.md
 create mode 100644 static/usage/v7/radio/empty-selection/vue.md
 create mode 100644 static/usage/v7/radio/theming/colors/angular.md
 create mode 100644 static/usage/v7/radio/theming/colors/demo.html
 create mode 100644 static/usage/v7/radio/theming/colors/index.md
 create mode 100644 static/usage/v7/radio/theming/colors/javascript.md
 create mode 100644 static/usage/v7/radio/theming/colors/react.md
 create mode 100644 static/usage/v7/radio/theming/colors/vue.md
 create mode 100644 static/usage/v7/radio/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/radio/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/radio/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/radio/theming/css-properties/index.md
 create mode 100644 static/usage/v7/radio/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/radio/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/radio/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/radio/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/range/basic/angular.md
 create mode 100644 static/usage/v7/range/basic/demo.html
 create mode 100644 static/usage/v7/range/basic/index.md
 create mode 100644 static/usage/v7/range/basic/javascript.md
 create mode 100644 static/usage/v7/range/basic/react.md
 create mode 100644 static/usage/v7/range/basic/vue.md
 create mode 100644 static/usage/v7/range/dual-knobs/angular.md
 create mode 100644 static/usage/v7/range/dual-knobs/demo.html
 create mode 100644 static/usage/v7/range/dual-knobs/index.md
 create mode 100644 static/usage/v7/range/dual-knobs/javascript.md
 create mode 100644 static/usage/v7/range/dual-knobs/react.md
 create mode 100644 static/usage/v7/range/dual-knobs/vue.md
 create mode 100644 static/usage/v7/range/ion-change-event/angular/example_component_html.md
 create mode 100644 static/usage/v7/range/ion-change-event/angular/example_component_ts.md
 create mode 100644 static/usage/v7/range/ion-change-event/demo.html
 create mode 100644 static/usage/v7/range/ion-change-event/index.md
 create mode 100644 static/usage/v7/range/ion-change-event/javascript.md
 create mode 100644 static/usage/v7/range/ion-change-event/react.md
 create mode 100644 static/usage/v7/range/ion-change-event/vue.md
 create mode 100644 static/usage/v7/range/ion-knob-move-event/angular/example_component_html.md
 create mode 100644 static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
 create mode 100644 static/usage/v7/range/ion-knob-move-event/demo.html
 create mode 100644 static/usage/v7/range/ion-knob-move-event/index.md
 create mode 100644 static/usage/v7/range/ion-knob-move-event/javascript.md
 create mode 100644 static/usage/v7/range/ion-knob-move-event/react.md
 create mode 100644 static/usage/v7/range/ion-knob-move-event/vue.md
 create mode 100644 static/usage/v7/range/pins/angular/example_component_html.md
 create mode 100644 static/usage/v7/range/pins/angular/example_component_ts.md
 create mode 100644 static/usage/v7/range/pins/demo.html
 create mode 100644 static/usage/v7/range/pins/index.md
 create mode 100644 static/usage/v7/range/pins/javascript.md
 create mode 100644 static/usage/v7/range/pins/react.md
 create mode 100644 static/usage/v7/range/pins/vue.md
 create mode 100644 static/usage/v7/range/slots/angular.md
 create mode 100644 static/usage/v7/range/slots/demo.html
 create mode 100644 static/usage/v7/range/slots/index.md
 create mode 100644 static/usage/v7/range/slots/javascript.md
 create mode 100644 static/usage/v7/range/slots/react.md
 create mode 100644 static/usage/v7/range/slots/vue.md
 create mode 100644 static/usage/v7/range/snapping-ticks/angular.md
 create mode 100644 static/usage/v7/range/snapping-ticks/demo.html
 create mode 100644 static/usage/v7/range/snapping-ticks/index.md
 create mode 100644 static/usage/v7/range/snapping-ticks/javascript.md
 create mode 100644 static/usage/v7/range/snapping-ticks/react.md
 create mode 100644 static/usage/v7/range/snapping-ticks/vue.md
 create mode 100644 static/usage/v7/range/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/range/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/range/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/range/theming/css-properties/index.md
 create mode 100644 static/usage/v7/range/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/range/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/range/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/range/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/range/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/refresher/advanced/angular/example_component_css.md
 create mode 100644 static/usage/v7/refresher/advanced/angular/example_component_html.md
 create mode 100644 static/usage/v7/refresher/advanced/angular/example_component_ts.md
 create mode 100644 static/usage/v7/refresher/advanced/demo.html
 create mode 100644 static/usage/v7/refresher/advanced/index.md
 create mode 100644 static/usage/v7/refresher/advanced/javascript.md
 create mode 100644 static/usage/v7/refresher/advanced/react/main_css.md
 create mode 100644 static/usage/v7/refresher/advanced/react/main_tsx.md
 create mode 100644 static/usage/v7/refresher/advanced/vue.md
 create mode 100644 static/usage/v7/refresher/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/refresher/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/refresher/basic/demo.html
 create mode 100644 static/usage/v7/refresher/basic/index.md
 create mode 100644 static/usage/v7/refresher/basic/javascript.md
 create mode 100644 static/usage/v7/refresher/basic/react.md
 create mode 100644 static/usage/v7/refresher/basic/vue.md
 create mode 100644 static/usage/v7/refresher/custom-content/angular/example_component_html.md
 create mode 100644 static/usage/v7/refresher/custom-content/angular/example_component_ts.md
 create mode 100644 static/usage/v7/refresher/custom-content/demo.html
 create mode 100644 static/usage/v7/refresher/custom-content/index.md
 create mode 100644 static/usage/v7/refresher/custom-content/javascript.md
 create mode 100644 static/usage/v7/refresher/custom-content/react.md
 create mode 100644 static/usage/v7/refresher/custom-content/vue.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/demo.html
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/index.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/javascript.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/v7/refresher/custom-scroll-target/vue.md
 create mode 100644 static/usage/v7/refresher/pull-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
 create mode 100644 static/usage/v7/refresher/pull-properties/demo.html
 create mode 100644 static/usage/v7/refresher/pull-properties/index.md
 create mode 100644 static/usage/v7/refresher/pull-properties/javascript.md
 create mode 100644 static/usage/v7/refresher/pull-properties/react.md
 create mode 100644 static/usage/v7/refresher/pull-properties/vue.md
 create mode 100644 static/usage/v7/reorder/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/reorder/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/reorder/basic/demo.html
 create mode 100644 static/usage/v7/reorder/basic/index.md
 create mode 100644 static/usage/v7/reorder/basic/javascript.md
 create mode 100644 static/usage/v7/reorder/basic/react.md
 create mode 100644 static/usage/v7/reorder/basic/vue.md
 create mode 100644 static/usage/v7/reorder/custom-icon/angular/example_component_html.md
 create mode 100644 static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
 create mode 100644 static/usage/v7/reorder/custom-icon/demo.html
 create mode 100644 static/usage/v7/reorder/custom-icon/index.md
 create mode 100644 static/usage/v7/reorder/custom-icon/javascript.md
 create mode 100644 static/usage/v7/reorder/custom-icon/react.md
 create mode 100644 static/usage/v7/reorder/custom-icon/vue.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/angular/example_component_css.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/angular/example_component_html.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/demo.html
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/index.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/javascript.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/react/main_css.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md
 create mode 100644 static/usage/v7/reorder/custom-scroll-target/vue.md
 create mode 100644 static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md
 create mode 100644 static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
 create mode 100644 static/usage/v7/reorder/toggling-disabled/demo.html
 create mode 100644 static/usage/v7/reorder/toggling-disabled/index.md
 create mode 100644 static/usage/v7/reorder/toggling-disabled/javascript.md
 create mode 100644 static/usage/v7/reorder/toggling-disabled/react.md
 create mode 100644 static/usage/v7/reorder/toggling-disabled/vue.md
 create mode 100644 static/usage/v7/reorder/updating-data/angular/example_component_html.md
 create mode 100644 static/usage/v7/reorder/updating-data/angular/example_component_ts.md
 create mode 100644 static/usage/v7/reorder/updating-data/demo.html
 create mode 100644 static/usage/v7/reorder/updating-data/index.md
 create mode 100644 static/usage/v7/reorder/updating-data/javascript.md
 create mode 100644 static/usage/v7/reorder/updating-data/react.md
 create mode 100644 static/usage/v7/reorder/updating-data/vue.md
 create mode 100644 static/usage/v7/reorder/wrapper/angular/example_component_html.md
 create mode 100644 static/usage/v7/reorder/wrapper/angular/example_component_ts.md
 create mode 100644 static/usage/v7/reorder/wrapper/demo.html
 create mode 100644 static/usage/v7/reorder/wrapper/index.md
 create mode 100644 static/usage/v7/reorder/wrapper/javascript.md
 create mode 100644 static/usage/v7/reorder/wrapper/react.md
 create mode 100644 static/usage/v7/reorder/wrapper/vue.md
 create mode 100644 static/usage/v7/ripple-effect/basic/angular/example_component_css.md
 create mode 100644 static/usage/v7/ripple-effect/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/ripple-effect/basic/demo.html
 create mode 100644 static/usage/v7/ripple-effect/basic/index.md
 create mode 100644 static/usage/v7/ripple-effect/basic/javascript.md
 create mode 100644 static/usage/v7/ripple-effect/basic/react/main_css.md
 create mode 100644 static/usage/v7/ripple-effect/basic/react/main_tsx.md
 create mode 100644 static/usage/v7/ripple-effect/basic/vue.md
 create mode 100644 static/usage/v7/ripple-effect/customizing/angular/example_component_css.md
 create mode 100644 static/usage/v7/ripple-effect/customizing/angular/example_component_html.md
 create mode 100644 static/usage/v7/ripple-effect/customizing/demo.html
 create mode 100644 static/usage/v7/ripple-effect/customizing/index.md
 create mode 100644 static/usage/v7/ripple-effect/customizing/javascript.md
 create mode 100644 static/usage/v7/ripple-effect/customizing/react/main_css.md
 create mode 100644 static/usage/v7/ripple-effect/customizing/react/main_tsx.md
 create mode 100644 static/usage/v7/ripple-effect/customizing/vue.md
 create mode 100644 static/usage/v7/ripple-effect/type/angular/example_component_css.md
 create mode 100644 static/usage/v7/ripple-effect/type/angular/example_component_html.md
 create mode 100644 static/usage/v7/ripple-effect/type/demo.html
 create mode 100644 static/usage/v7/ripple-effect/type/index.md
 create mode 100644 static/usage/v7/ripple-effect/type/javascript.md
 create mode 100644 static/usage/v7/ripple-effect/type/react/main_css.md
 create mode 100644 static/usage/v7/ripple-effect/type/react/main_tsx.md
 create mode 100644 static/usage/v7/ripple-effect/type/vue.md
 create mode 100644 static/usage/v7/searchbar/basic/angular.md
 create mode 100644 static/usage/v7/searchbar/basic/demo.html
 create mode 100644 static/usage/v7/searchbar/basic/index.md
 create mode 100644 static/usage/v7/searchbar/basic/javascript.md
 create mode 100644 static/usage/v7/searchbar/basic/react.md
 create mode 100644 static/usage/v7/searchbar/basic/vue.md
 create mode 100644 static/usage/v7/searchbar/cancel-button/angular.md
 create mode 100644 static/usage/v7/searchbar/cancel-button/demo.html
 create mode 100644 static/usage/v7/searchbar/cancel-button/index.md
 create mode 100644 static/usage/v7/searchbar/cancel-button/javascript.md
 create mode 100644 static/usage/v7/searchbar/cancel-button/react.md
 create mode 100644 static/usage/v7/searchbar/cancel-button/vue.md
 create mode 100644 static/usage/v7/searchbar/clear-button/angular.md
 create mode 100644 static/usage/v7/searchbar/clear-button/demo.html
 create mode 100644 static/usage/v7/searchbar/clear-button/index.md
 create mode 100644 static/usage/v7/searchbar/clear-button/javascript.md
 create mode 100644 static/usage/v7/searchbar/clear-button/react.md
 create mode 100644 static/usage/v7/searchbar/clear-button/vue.md
 create mode 100644 static/usage/v7/searchbar/debounce/angular/example_component_html.md
 create mode 100644 static/usage/v7/searchbar/debounce/angular/example_component_ts.md
 create mode 100644 static/usage/v7/searchbar/debounce/demo.html
 create mode 100644 static/usage/v7/searchbar/debounce/index.md
 create mode 100644 static/usage/v7/searchbar/debounce/javascript.md
 create mode 100644 static/usage/v7/searchbar/debounce/react.md
 create mode 100644 static/usage/v7/searchbar/debounce/vue.md
 create mode 100644 static/usage/v7/searchbar/search-icon/angular.md
 create mode 100644 static/usage/v7/searchbar/search-icon/demo.html
 create mode 100644 static/usage/v7/searchbar/search-icon/index.md
 create mode 100644 static/usage/v7/searchbar/search-icon/javascript.md
 create mode 100644 static/usage/v7/searchbar/search-icon/react.md
 create mode 100644 static/usage/v7/searchbar/search-icon/vue.md
 create mode 100644 static/usage/v7/searchbar/theming/colors/angular.md
 create mode 100644 static/usage/v7/searchbar/theming/colors/demo.html
 create mode 100644 static/usage/v7/searchbar/theming/colors/index.md
 create mode 100644 static/usage/v7/searchbar/theming/colors/javascript.md
 create mode 100644 static/usage/v7/searchbar/theming/colors/react.md
 create mode 100644 static/usage/v7/searchbar/theming/colors/vue.md
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/index.md
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/searchbar/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/segment-button/basic/angular.md
 create mode 100644 static/usage/v7/segment-button/basic/demo.html
 create mode 100644 static/usage/v7/segment-button/basic/index.md
 create mode 100644 static/usage/v7/segment-button/basic/javascript.md
 create mode 100644 static/usage/v7/segment-button/basic/react.md
 create mode 100644 static/usage/v7/segment-button/basic/vue.md
 create mode 100644 static/usage/v7/segment-button/layout/angular.md
 create mode 100644 static/usage/v7/segment-button/layout/demo.html
 create mode 100644 static/usage/v7/segment-button/layout/index.md
 create mode 100644 static/usage/v7/segment-button/layout/javascript.md
 create mode 100644 static/usage/v7/segment-button/layout/react.md
 create mode 100644 static/usage/v7/segment-button/layout/vue.md
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/index.md
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/segment-button/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/segment/basic/angular.md
 create mode 100644 static/usage/v7/segment/basic/demo.html
 create mode 100644 static/usage/v7/segment/basic/index.md
 create mode 100644 static/usage/v7/segment/basic/javascript.md
 create mode 100644 static/usage/v7/segment/basic/react.md
 create mode 100644 static/usage/v7/segment/basic/vue.md
 create mode 100644 static/usage/v7/segment/scrollable/angular.md
 create mode 100644 static/usage/v7/segment/scrollable/demo.html
 create mode 100644 static/usage/v7/segment/scrollable/index.md
 create mode 100644 static/usage/v7/segment/scrollable/javascript.md
 create mode 100644 static/usage/v7/segment/scrollable/react.md
 create mode 100644 static/usage/v7/segment/scrollable/vue.md
 create mode 100644 static/usage/v7/segment/theming/colors/angular.md
 create mode 100644 static/usage/v7/segment/theming/colors/demo.html
 create mode 100644 static/usage/v7/segment/theming/colors/index.md
 create mode 100644 static/usage/v7/segment/theming/colors/javascript.md
 create mode 100644 static/usage/v7/segment/theming/colors/react.md
 create mode 100644 static/usage/v7/segment/theming/colors/vue.md
 create mode 100644 static/usage/v7/segment/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/segment/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/segment/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/segment/theming/css-properties/index.md
 create mode 100644 static/usage/v7/segment/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/segment/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/segment/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/segment/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/select/basic/multiple-selection/angular.md
 create mode 100644 static/usage/v7/select/basic/multiple-selection/demo.html
 create mode 100644 static/usage/v7/select/basic/multiple-selection/index.md
 create mode 100644 static/usage/v7/select/basic/multiple-selection/javascript.md
 create mode 100644 static/usage/v7/select/basic/multiple-selection/react.md
 create mode 100644 static/usage/v7/select/basic/multiple-selection/vue.md
 create mode 100644 static/usage/v7/select/basic/responding-to-interaction/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/basic/responding-to-interaction/demo.html
 create mode 100644 static/usage/v7/select/basic/responding-to-interaction/index.md
 create mode 100644 static/usage/v7/select/basic/responding-to-interaction/javascript.md
 create mode 100644 static/usage/v7/select/basic/responding-to-interaction/react.md
 create mode 100644 static/usage/v7/select/basic/responding-to-interaction/vue.md
 create mode 100644 static/usage/v7/select/basic/single-selection/angular.md
 create mode 100644 static/usage/v7/select/basic/single-selection/demo.html
 create mode 100644 static/usage/v7/select/basic/single-selection/index.md
 create mode 100644 static/usage/v7/select/basic/single-selection/javascript.md
 create mode 100644 static/usage/v7/select/basic/single-selection/react.md
 create mode 100644 static/usage/v7/select/basic/single-selection/vue.md
 create mode 100644 static/usage/v7/select/customization/button-text/angular.md
 create mode 100644 static/usage/v7/select/customization/button-text/demo.html
 create mode 100644 static/usage/v7/select/customization/button-text/index.md
 create mode 100644 static/usage/v7/select/customization/button-text/javascript.md
 create mode 100644 static/usage/v7/select/customization/button-text/react.md
 create mode 100644 static/usage/v7/select/customization/button-text/vue.md
 create mode 100644 static/usage/v7/select/customization/interface-options/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/customization/interface-options/demo.html
 create mode 100644 static/usage/v7/select/customization/interface-options/index.md
 create mode 100644 static/usage/v7/select/customization/interface-options/javascript.md
 create mode 100644 static/usage/v7/select/customization/interface-options/react.md
 create mode 100644 static/usage/v7/select/customization/interface-options/vue.md
 create mode 100644 static/usage/v7/select/customization/styling-select/angular/example_component_css.md
 create mode 100644 static/usage/v7/select/customization/styling-select/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/customization/styling-select/demo.html
 create mode 100644 static/usage/v7/select/customization/styling-select/index.md
 create mode 100644 static/usage/v7/select/customization/styling-select/javascript.md
 create mode 100644 static/usage/v7/select/customization/styling-select/react/main_css.md
 create mode 100644 static/usage/v7/select/customization/styling-select/react/main_tsx.md
 create mode 100644 static/usage/v7/select/customization/styling-select/vue.md
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/angular.md
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/demo.html
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/index.md
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/javascript.md
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/react.md
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/vue.md
 create mode 100644 static/usage/v7/select/interfaces/popover/angular.md
 create mode 100644 static/usage/v7/select/interfaces/popover/demo.html
 create mode 100644 static/usage/v7/select/interfaces/popover/index.md
 create mode 100644 static/usage/v7/select/interfaces/popover/javascript.md
 create mode 100644 static/usage/v7/select/interfaces/popover/react.md
 create mode 100644 static/usage/v7/select/interfaces/popover/vue.md
 create mode 100644 static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/objects-as-values/multiple-selection/demo.html
 create mode 100644 static/usage/v7/select/objects-as-values/multiple-selection/index.md
 create mode 100644 static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
 create mode 100644 static/usage/v7/select/objects-as-values/multiple-selection/react.md
 create mode 100644 static/usage/v7/select/objects-as-values/multiple-selection/vue.md
 create mode 100644 static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/objects-as-values/using-comparewith/demo.html
 create mode 100644 static/usage/v7/select/objects-as-values/using-comparewith/index.md
 create mode 100644 static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
 create mode 100644 static/usage/v7/select/objects-as-values/using-comparewith/react.md
 create mode 100644 static/usage/v7/select/objects-as-values/using-comparewith/vue.md
 create mode 100644 static/usage/v7/skeleton-text/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/skeleton-text/basic/demo.html
 create mode 100644 static/usage/v7/skeleton-text/basic/index.md
 create mode 100644 static/usage/v7/skeleton-text/basic/javascript.md
 create mode 100644 static/usage/v7/skeleton-text/basic/react.md
 create mode 100644 static/usage/v7/skeleton-text/basic/vue.md
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/index.md
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/spinner/basic/angular.md
 create mode 100644 static/usage/v7/spinner/basic/demo.html
 create mode 100644 static/usage/v7/spinner/basic/index.md
 create mode 100644 static/usage/v7/spinner/basic/javascript.md
 create mode 100644 static/usage/v7/spinner/basic/react.md
 create mode 100644 static/usage/v7/spinner/basic/vue.md
 create mode 100644 static/usage/v7/spinner/theming/colors/angular.md
 create mode 100644 static/usage/v7/spinner/theming/colors/demo.html
 create mode 100644 static/usage/v7/spinner/theming/colors/index.md
 create mode 100644 static/usage/v7/spinner/theming/colors/javascript.md
 create mode 100644 static/usage/v7/spinner/theming/colors/react.md
 create mode 100644 static/usage/v7/spinner/theming/colors/vue.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/spinner/theming/css-properties/index.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/react.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/spinner/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/split-pane/basic/angular.md
 create mode 100644 static/usage/v7/split-pane/basic/demo.html
 create mode 100644 static/usage/v7/split-pane/basic/index.md
 create mode 100644 static/usage/v7/split-pane/basic/javascript.md
 create mode 100644 static/usage/v7/split-pane/basic/react.md
 create mode 100644 static/usage/v7/split-pane/basic/vue.md
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/index.md
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/split-pane/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/text/basic/angular.md
 create mode 100644 static/usage/v7/text/basic/demo.html
 create mode 100644 static/usage/v7/text/basic/index.md
 create mode 100644 static/usage/v7/text/basic/javascript.md
 create mode 100644 static/usage/v7/text/basic/react.md
 create mode 100644 static/usage/v7/text/basic/vue.md
 create mode 100644 static/usage/v7/textarea/autogrow/angular.md
 create mode 100644 static/usage/v7/textarea/autogrow/demo.html
 create mode 100644 static/usage/v7/textarea/autogrow/index.md
 create mode 100644 static/usage/v7/textarea/autogrow/javascript.md
 create mode 100644 static/usage/v7/textarea/autogrow/react.md
 create mode 100644 static/usage/v7/textarea/autogrow/vue.md
 create mode 100644 static/usage/v7/textarea/basic/angular.md
 create mode 100644 static/usage/v7/textarea/basic/demo.html
 create mode 100644 static/usage/v7/textarea/basic/index.md
 create mode 100644 static/usage/v7/textarea/basic/javascript.md
 create mode 100644 static/usage/v7/textarea/basic/react.md
 create mode 100644 static/usage/v7/textarea/basic/vue.md
 create mode 100644 static/usage/v7/textarea/clear-on-edit/angular.md
 create mode 100644 static/usage/v7/textarea/clear-on-edit/demo.html
 create mode 100644 static/usage/v7/textarea/clear-on-edit/index.md
 create mode 100644 static/usage/v7/textarea/clear-on-edit/javascript.md
 create mode 100644 static/usage/v7/textarea/clear-on-edit/react.md
 create mode 100644 static/usage/v7/textarea/clear-on-edit/vue.md
 create mode 100644 static/usage/v7/textarea/theming/angular/example_component_css.md
 create mode 100644 static/usage/v7/textarea/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/theming/demo.html
 create mode 100644 static/usage/v7/textarea/theming/index.md
 create mode 100644 static/usage/v7/textarea/theming/javascript.md
 create mode 100644 static/usage/v7/textarea/theming/react/main_css.md
 create mode 100644 static/usage/v7/textarea/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/textarea/theming/vue.md
 create mode 100644 static/usage/v7/thumbnail/basic/angular.md
 create mode 100644 static/usage/v7/thumbnail/basic/demo.html
 create mode 100644 static/usage/v7/thumbnail/basic/index.md
 create mode 100644 static/usage/v7/thumbnail/basic/javascript.md
 create mode 100644 static/usage/v7/thumbnail/basic/react.md
 create mode 100644 static/usage/v7/thumbnail/basic/vue.md
 create mode 100644 static/usage/v7/thumbnail/item/angular.md
 create mode 100644 static/usage/v7/thumbnail/item/demo.html
 create mode 100644 static/usage/v7/thumbnail/item/index.md
 create mode 100644 static/usage/v7/thumbnail/item/javascript.md
 create mode 100644 static/usage/v7/thumbnail/item/react.md
 create mode 100644 static/usage/v7/thumbnail/item/vue.md
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/index.md
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/thumbnail/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/title/basic/angular.md
 create mode 100644 static/usage/v7/title/basic/demo.html
 create mode 100644 static/usage/v7/title/basic/index.md
 create mode 100644 static/usage/v7/title/basic/javascript.md
 create mode 100644 static/usage/v7/title/basic/react.md
 create mode 100644 static/usage/v7/title/basic/vue.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/basic/angular.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/basic/demo.html
 create mode 100644 static/usage/v7/title/collapsible-large-title/basic/index.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/basic/javascript.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/basic/react.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/basic/vue.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/buttons/angular.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/buttons/demo.html
 create mode 100644 static/usage/v7/title/collapsible-large-title/buttons/index.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/buttons/javascript.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/buttons/react.md
 create mode 100644 static/usage/v7/title/collapsible-large-title/buttons/vue.md
 create mode 100644 static/usage/v7/title/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/title/theming/css-properties/angular/global_css.md
 create mode 100644 static/usage/v7/title/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/title/theming/css-properties/index.md
 create mode 100644 static/usage/v7/title/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/title/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/title/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/title/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/toast/buttons/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/buttons/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/buttons/demo.html
 create mode 100644 static/usage/v7/toast/buttons/index.md
 create mode 100644 static/usage/v7/toast/buttons/javascript.md
 create mode 100644 static/usage/v7/toast/buttons/react.md
 create mode 100644 static/usage/v7/toast/buttons/vue.md
 create mode 100644 static/usage/v7/toast/icon/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/icon/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/icon/demo.html
 create mode 100644 static/usage/v7/toast/icon/index.md
 create mode 100644 static/usage/v7/toast/icon/javascript.md
 create mode 100644 static/usage/v7/toast/icon/react.md
 create mode 100644 static/usage/v7/toast/icon/vue.md
 create mode 100644 static/usage/v7/toast/presenting/controller/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/presenting/controller/demo.html
 create mode 100644 static/usage/v7/toast/presenting/controller/index.md
 create mode 100644 static/usage/v7/toast/presenting/controller/javascript.md
 create mode 100644 static/usage/v7/toast/presenting/controller/react.md
 create mode 100644 static/usage/v7/toast/presenting/controller/vue.md
 create mode 100644 static/usage/v7/toast/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/theming/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/theming/angular/global_css.md
 create mode 100644 static/usage/v7/toast/theming/demo.html
 create mode 100644 static/usage/v7/toast/theming/index.md
 create mode 100644 static/usage/v7/toast/theming/javascript.md
 create mode 100644 static/usage/v7/toast/theming/react/main_css.md
 create mode 100644 static/usage/v7/toast/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/toast/theming/vue.md
 create mode 100644 static/usage/v7/toggle/basic/angular.md
 create mode 100644 static/usage/v7/toggle/basic/demo.html
 create mode 100644 static/usage/v7/toggle/basic/index.md
 create mode 100644 static/usage/v7/toggle/basic/javascript.md
 create mode 100644 static/usage/v7/toggle/basic/react.md
 create mode 100644 static/usage/v7/toggle/basic/vue.md
 create mode 100644 static/usage/v7/toggle/on-off/angular.md
 create mode 100644 static/usage/v7/toggle/on-off/demo.html
 create mode 100644 static/usage/v7/toggle/on-off/index.md
 create mode 100644 static/usage/v7/toggle/on-off/javascript.md
 create mode 100644 static/usage/v7/toggle/on-off/react.md
 create mode 100644 static/usage/v7/toggle/on-off/vue.md
 create mode 100644 static/usage/v7/toggle/theming/colors/angular.md
 create mode 100644 static/usage/v7/toggle/theming/colors/demo.html
 create mode 100644 static/usage/v7/toggle/theming/colors/index.md
 create mode 100644 static/usage/v7/toggle/theming/colors/javascript.md
 create mode 100644 static/usage/v7/toggle/theming/colors/react.md
 create mode 100644 static/usage/v7/toggle/theming/colors/vue.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/toggle/theming/css-properties/index.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/vue.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_css.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/demo.html
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/index.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/react/main_css.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/react/main_tsx.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/vue.md
 create mode 100644 static/usage/v7/toolbar/basic/angular.md
 create mode 100644 static/usage/v7/toolbar/basic/demo.html
 create mode 100644 static/usage/v7/toolbar/basic/index.md
 create mode 100644 static/usage/v7/toolbar/basic/javascript.md
 create mode 100644 static/usage/v7/toolbar/basic/react.md
 create mode 100644 static/usage/v7/toolbar/basic/vue.md
 create mode 100644 static/usage/v7/toolbar/buttons/angular.md
 create mode 100644 static/usage/v7/toolbar/buttons/demo.html
 create mode 100644 static/usage/v7/toolbar/buttons/index.md
 create mode 100644 static/usage/v7/toolbar/buttons/javascript.md
 create mode 100644 static/usage/v7/toolbar/buttons/react.md
 create mode 100644 static/usage/v7/toolbar/buttons/vue.md
 create mode 100644 static/usage/v7/toolbar/progress-bars/angular.md
 create mode 100644 static/usage/v7/toolbar/progress-bars/demo.html
 create mode 100644 static/usage/v7/toolbar/progress-bars/index.md
 create mode 100644 static/usage/v7/toolbar/progress-bars/javascript.md
 create mode 100644 static/usage/v7/toolbar/progress-bars/react.md
 create mode 100644 static/usage/v7/toolbar/progress-bars/vue.md
 create mode 100644 static/usage/v7/toolbar/searchbars/angular.md
 create mode 100644 static/usage/v7/toolbar/searchbars/demo.html
 create mode 100644 static/usage/v7/toolbar/searchbars/index.md
 create mode 100644 static/usage/v7/toolbar/searchbars/javascript.md
 create mode 100644 static/usage/v7/toolbar/searchbars/react.md
 create mode 100644 static/usage/v7/toolbar/searchbars/vue.md
 create mode 100644 static/usage/v7/toolbar/segments/angular.md
 create mode 100644 static/usage/v7/toolbar/segments/demo.html
 create mode 100644 static/usage/v7/toolbar/segments/index.md
 create mode 100644 static/usage/v7/toolbar/segments/javascript.md
 create mode 100644 static/usage/v7/toolbar/segments/react.md
 create mode 100644 static/usage/v7/toolbar/segments/vue.md
 create mode 100644 static/usage/v7/toolbar/theming/colors/angular.md
 create mode 100644 static/usage/v7/toolbar/theming/colors/demo.html
 create mode 100644 static/usage/v7/toolbar/theming/colors/index.md
 create mode 100644 static/usage/v7/toolbar/theming/colors/javascript.md
 create mode 100644 static/usage/v7/toolbar/theming/colors/react.md
 create mode 100644 static/usage/v7/toolbar/theming/colors/vue.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/angular/example_component_css.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/angular/example_component_html.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/demo.html
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/index.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/javascript.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/react/main_css.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/react/main_tsx.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/vue.md
 create mode 100644 versioned_docs/version-v6/README.md
 create mode 100644 versioned_docs/version-v6/angular/config.md
 create mode 100644 versioned_docs/version-v6/angular/lifecycle.md
 create mode 100644 versioned_docs/version-v6/angular/navigation.md
 create mode 100644 versioned_docs/version-v6/angular/overview.md
 create mode 100644 versioned_docs/version-v6/angular/performance.md
 create mode 100644 versioned_docs/version-v6/angular/platform.md
 create mode 100644 versioned_docs/version-v6/angular/pwa.md
 create mode 100644 versioned_docs/version-v6/angular/slides.md
 create mode 100644 versioned_docs/version-v6/angular/storage.md
 create mode 100644 versioned_docs/version-v6/angular/testing.md
 create mode 100644 versioned_docs/version-v6/angular/virtual-scroll.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
 create mode 100644 versioned_docs/version-v6/angular/your-first-app/8-distribute.md
 create mode 100644 versioned_docs/version-v6/api.md
 create mode 100644 versioned_docs/version-v6/api/accordion-group.md
 create mode 100644 versioned_docs/version-v6/api/accordion.md
 create mode 100644 versioned_docs/version-v6/api/action-sheet.md
 create mode 100644 versioned_docs/version-v6/api/alert.md
 create mode 100644 versioned_docs/version-v6/api/app.md
 create mode 100644 versioned_docs/version-v6/api/avatar.md
 create mode 100644 versioned_docs/version-v6/api/back-button.md
 create mode 100644 versioned_docs/version-v6/api/backdrop.md
 create mode 100644 versioned_docs/version-v6/api/badge.md
 create mode 100644 versioned_docs/version-v6/api/breadcrumb.md
 create mode 100644 versioned_docs/version-v6/api/breadcrumbs.md
 create mode 100644 versioned_docs/version-v6/api/button.md
 create mode 100644 versioned_docs/version-v6/api/buttons.md
 create mode 100644 versioned_docs/version-v6/api/card-content.md
 create mode 100644 versioned_docs/version-v6/api/card-header.md
 create mode 100644 versioned_docs/version-v6/api/card-subtitle.md
 create mode 100644 versioned_docs/version-v6/api/card-title.md
 create mode 100644 versioned_docs/version-v6/api/card.md
 create mode 100644 versioned_docs/version-v6/api/checkbox.md
 create mode 100644 versioned_docs/version-v6/api/chip.md
 create mode 100644 versioned_docs/version-v6/api/col.md
 create mode 100644 versioned_docs/version-v6/api/content.md
 create mode 100644 versioned_docs/version-v6/api/datetime-button.md
 create mode 100644 versioned_docs/version-v6/api/datetime.md
 create mode 100644 versioned_docs/version-v6/api/fab-button.md
 create mode 100644 versioned_docs/version-v6/api/fab-list.md
 create mode 100644 versioned_docs/version-v6/api/fab.md
 create mode 100644 versioned_docs/version-v6/api/footer.md
 create mode 100644 versioned_docs/version-v6/api/grid.md
 create mode 100644 versioned_docs/version-v6/api/header.md
 create mode 100644 versioned_docs/version-v6/api/img.md
 create mode 100644 versioned_docs/version-v6/api/infinite-scroll-content.md
 create mode 100644 versioned_docs/version-v6/api/infinite-scroll.md
 create mode 100644 versioned_docs/version-v6/api/input.md
 create mode 100644 versioned_docs/version-v6/api/item-divider.md
 create mode 100644 versioned_docs/version-v6/api/item-group.md
 create mode 100644 versioned_docs/version-v6/api/item-option.md
 create mode 100644 versioned_docs/version-v6/api/item-options.md
 create mode 100644 versioned_docs/version-v6/api/item-sliding.md
 create mode 100644 versioned_docs/version-v6/api/item.md
 create mode 100644 versioned_docs/version-v6/api/label.md
 create mode 100644 versioned_docs/version-v6/api/list-header.md
 create mode 100644 versioned_docs/version-v6/api/list.md
 create mode 100644 versioned_docs/version-v6/api/loading.md
 create mode 100644 versioned_docs/version-v6/api/menu-button.md
 create mode 100644 versioned_docs/version-v6/api/menu-toggle.md
 create mode 100644 versioned_docs/version-v6/api/menu.md
 create mode 100644 versioned_docs/version-v6/api/modal.md
 create mode 100644 versioned_docs/version-v6/api/nav-link.md
 create mode 100644 versioned_docs/version-v6/api/nav.md
 create mode 100644 versioned_docs/version-v6/api/note.md
 create mode 100644 versioned_docs/version-v6/api/picker.md
 create mode 100644 versioned_docs/version-v6/api/popover.md
 create mode 100644 versioned_docs/version-v6/api/progress-bar.md
 create mode 100644 versioned_docs/version-v6/api/radio-group.md
 create mode 100644 versioned_docs/version-v6/api/radio.md
 create mode 100644 versioned_docs/version-v6/api/range.md
 create mode 100644 versioned_docs/version-v6/api/refresher-content.md
 create mode 100644 versioned_docs/version-v6/api/refresher.md
 create mode 100644 versioned_docs/version-v6/api/reorder-group.md
 create mode 100644 versioned_docs/version-v6/api/reorder.md
 create mode 100644 versioned_docs/version-v6/api/ripple-effect.md
 create mode 100644 versioned_docs/version-v6/api/route-redirect.md
 create mode 100644 versioned_docs/version-v6/api/route.md
 create mode 100644 versioned_docs/version-v6/api/router-link.md
 create mode 100644 versioned_docs/version-v6/api/router-outlet.md
 create mode 100644 versioned_docs/version-v6/api/router.md
 create mode 100644 versioned_docs/version-v6/api/row.md
 create mode 100644 versioned_docs/version-v6/api/searchbar.md
 create mode 100644 versioned_docs/version-v6/api/segment-button.md
 create mode 100644 versioned_docs/version-v6/api/segment.md
 create mode 100644 versioned_docs/version-v6/api/select-option.md
 create mode 100644 versioned_docs/version-v6/api/select.md
 create mode 100644 versioned_docs/version-v6/api/skeleton-text.md
 create mode 100644 versioned_docs/version-v6/api/spinner.md
 create mode 100644 versioned_docs/version-v6/api/split-pane.md
 create mode 100644 versioned_docs/version-v6/api/tab-bar.md
 create mode 100644 versioned_docs/version-v6/api/tab-button.md
 create mode 100644 versioned_docs/version-v6/api/tab.md
 create mode 100644 versioned_docs/version-v6/api/tabs.md
 create mode 100644 versioned_docs/version-v6/api/text.md
 create mode 100644 versioned_docs/version-v6/api/textarea.md
 create mode 100644 versioned_docs/version-v6/api/thumbnail.md
 create mode 100644 versioned_docs/version-v6/api/title.md
 create mode 100644 versioned_docs/version-v6/api/toast.md
 create mode 100644 versioned_docs/version-v6/api/toggle.md
 create mode 100644 versioned_docs/version-v6/api/toolbar.md
 create mode 100644 versioned_docs/version-v6/cli.md
 create mode 100644 versioned_docs/version-v6/cli/commands/.gitignore
 create mode 100644 versioned_docs/version-v6/cli/configuration.md
 create mode 100644 versioned_docs/version-v6/cli/livereload.md
 create mode 100644 versioned_docs/version-v6/cli/using-a-proxy.md
 create mode 100644 versioned_docs/version-v6/components.md
 create mode 100644 versioned_docs/version-v6/contributing/coc.md
 create mode 100644 versioned_docs/version-v6/contributing/how-to-contribute.md
 create mode 100644 versioned_docs/version-v6/core-concepts/cross-platform.md
 create mode 100644 versioned_docs/version-v6/core-concepts/fundamentals.md
 create mode 100644 versioned_docs/version-v6/core-concepts/webview.md
 create mode 100644 versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md
 create mode 100644 versioned_docs/version-v6/deployment/app-store.md
 create mode 100644 versioned_docs/version-v6/deployment/desktop-app.md
 create mode 100644 versioned_docs/version-v6/deployment/play-store.mdx
 create mode 100644 versioned_docs/version-v6/deployment/progressive-web-app.md
 create mode 100644 versioned_docs/version-v6/developer-resources/books.md
 create mode 100644 versioned_docs/version-v6/developer-resources/courses.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
 create mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
 create mode 100644 versioned_docs/version-v6/developer-resources/posts.md
 create mode 100644 versioned_docs/version-v6/developer-resources/tools.md
 create mode 100644 versioned_docs/version-v6/developer-resources/videos.md
 create mode 100644 versioned_docs/version-v6/developing/android.md
 create mode 100644 versioned_docs/version-v6/developing/hardware-back-button.md
 create mode 100644 versioned_docs/version-v6/developing/ios.md
 create mode 100644 versioned_docs/version-v6/developing/keyboard.md
 create mode 100644 versioned_docs/version-v6/developing/previewing.md
 create mode 100644 versioned_docs/version-v6/developing/scaffolding.md
 create mode 100644 versioned_docs/version-v6/developing/starting.md
 create mode 100644 versioned_docs/version-v6/developing/tips.md
 create mode 100644 versioned_docs/version-v6/index.md
 create mode 100644 versioned_docs/version-v6/intro/cdn.md
 create mode 100644 versioned_docs/version-v6/intro/cli.md
 create mode 100644 versioned_docs/version-v6/intro/environment.md
 create mode 100644 versioned_docs/version-v6/intro/first-app.md
 create mode 100644 versioned_docs/version-v6/intro/next.md
 create mode 100644 versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
 create mode 100644 versioned_docs/version-v6/intro/vscode-extension.md
 create mode 100644 versioned_docs/version-v6/layout/css-utilities.md
 create mode 100644 versioned_docs/version-v6/layout/global-stylesheets.md
 create mode 100644 versioned_docs/version-v6/layout/structure.md
 create mode 100644 versioned_docs/version-v6/native-community.md
 create mode 100644 versioned_docs/version-v6/native-faq.md
 create mode 100644 versioned_docs/version-v6/native.md
 create mode 100644 versioned_docs/version-v6/native/.gitignore
 create mode 100644 versioned_docs/version-v6/react.md
 create mode 100644 versioned_docs/version-v6/react/config.md
 create mode 100644 versioned_docs/version-v6/react/lifecycle.md
 create mode 100644 versioned_docs/version-v6/react/navigation.md
 create mode 100644 versioned_docs/version-v6/react/overlays.md
 create mode 100644 versioned_docs/version-v6/react/overview.md
 create mode 100644 versioned_docs/version-v6/react/performance.md
 create mode 100644 versioned_docs/version-v6/react/platform.md
 create mode 100644 versioned_docs/version-v6/react/pwa.md
 create mode 100644 versioned_docs/version-v6/react/quickstart.md
 create mode 100644 versioned_docs/version-v6/react/slides.md
 create mode 100644 versioned_docs/version-v6/react/storage.md
 create mode 100644 versioned_docs/version-v6/react/testing.md
 create mode 100644 versioned_docs/version-v6/react/virtual-scroll.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app/2-taking-photos.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app/3-saving-photos.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app/4-loading-photos.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app/7-live-reload.md
 create mode 100644 versioned_docs/version-v6/react/your-first-app/8-distribute.md
 create mode 100644 versioned_docs/version-v6/reference/browser-support.md
 create mode 100644 versioned_docs/version-v6/reference/glossary.md
 create mode 100644 versioned_docs/version-v6/reference/migration.md
 create mode 100644 versioned_docs/version-v6/reference/release-notes.md
 create mode 100644 versioned_docs/version-v6/reference/support.md
 create mode 100644 versioned_docs/version-v6/reference/versioning.md
 create mode 100644 versioned_docs/version-v6/studio.md
 create mode 100644 versioned_docs/version-v6/studio/assets.md
 create mode 100644 versioned_docs/version-v6/studio/code.md
 create mode 100644 versioned_docs/version-v6/studio/designer.md
 create mode 100644 versioned_docs/version-v6/studio/faq.md
 create mode 100644 versioned_docs/version-v6/studio/guides/routing-and-navigation.md
 create mode 100644 versioned_docs/version-v6/studio/guides/using-native-functionality.md
 create mode 100644 versioned_docs/version-v6/studio/running.md
 create mode 100644 versioned_docs/version-v6/studio/settings.md
 create mode 100644 versioned_docs/version-v6/studio/setup/installation.md
 create mode 100644 versioned_docs/version-v6/studio/setup/native.md
 create mode 100644 versioned_docs/version-v6/studio/start.md
 create mode 100644 versioned_docs/version-v6/studio/support.md
 create mode 100644 versioned_docs/version-v6/studio/terminal.md
 create mode 100644 versioned_docs/version-v6/studio/theming.md
 create mode 100644 versioned_docs/version-v6/techniques/security.md
 create mode 100644 versioned_docs/version-v6/test/page1.md
 create mode 100644 versioned_docs/version-v6/test/page2.md
 create mode 100644 versioned_docs/version-v6/theming/advanced.md
 create mode 100644 versioned_docs/version-v6/theming/basics.md
 create mode 100644 versioned_docs/version-v6/theming/color-generator.md
 create mode 100644 versioned_docs/version-v6/theming/colors.md
 create mode 100644 versioned_docs/version-v6/theming/css-shadow-parts.md
 create mode 100644 versioned_docs/version-v6/theming/css-variables.md
 create mode 100644 versioned_docs/version-v6/theming/dark-mode.md
 create mode 100644 versioned_docs/version-v6/theming/platform-styles.md
 create mode 100644 versioned_docs/version-v6/theming/themes.md
 create mode 100644 versioned_docs/version-v6/troubleshooting/build.md
 create mode 100644 versioned_docs/version-v6/troubleshooting/cors.md
 create mode 100644 versioned_docs/version-v6/troubleshooting/debugging.md
 create mode 100644 versioned_docs/version-v6/troubleshooting/native.md
 create mode 100644 versioned_docs/version-v6/troubleshooting/runtime.md
 create mode 100644 versioned_docs/version-v6/utilities/animations.md
 create mode 100644 versioned_docs/version-v6/utilities/gestures.md
 create mode 100644 versioned_docs/version-v6/vue/config.md
 create mode 100644 versioned_docs/version-v6/vue/lifecycle.md
 create mode 100644 versioned_docs/version-v6/vue/navigation.md
 create mode 100644 versioned_docs/version-v6/vue/overview.md
 create mode 100644 versioned_docs/version-v6/vue/performance.md
 create mode 100644 versioned_docs/version-v6/vue/platform.md
 create mode 100644 versioned_docs/version-v6/vue/pwa.md
 create mode 100644 versioned_docs/version-v6/vue/quickstart.md
 create mode 100644 versioned_docs/version-v6/vue/slides.md
 create mode 100644 versioned_docs/version-v6/vue/storage.md
 create mode 100644 versioned_docs/version-v6/vue/testing.md
 create mode 100644 versioned_docs/version-v6/vue/troubleshooting.md
 create mode 100644 versioned_docs/version-v6/vue/utility-functions.md
 create mode 100644 versioned_docs/version-v6/vue/virtual-scroll.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app/7-live-reload.md
 create mode 100644 versioned_docs/version-v6/vue/your-first-app/8-distribute.md
 create mode 100644 versioned_sidebars/version-v6-sidebars.json

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"
+]

From 2d27dbd339d3cd08767c43fa95d3170632a767fa Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 8 Dec 2022 13:23:54 -0500
Subject: [PATCH 139/469] chore(releases): revise release schedule (#2673)

The Framework team has moved to patch releases every week and minor releases every 6 weeks.
---
 docs/reference/versioning.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/versioning.md b/docs/reference/versioning.md
index c7e746da92b..87a269829fe 100644
--- a/docs/reference/versioning.md
+++ b/docs/reference/versioning.md
@@ -12,11 +12,11 @@ A major release will be published when there is a breaking change introduced in
 
 ### 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.
+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 6 weeks**, 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.
+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 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
 

From 780d09261f6101e0eeeebbe404d330cbbfa06efe Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 9 Dec 2022 12:48:11 -0500
Subject: [PATCH 140/469] chore(support): move v5 to end of support (#2675)

---
 docs/reference/support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index 98f9fa64046..1d5ce78c5e6 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -23,7 +23,7 @@ The current status of each Ionic Framework version is:
 | Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
 | :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
 |   V6    |      **Active**       | Dec 8, 2021  |       TBD        |        TBD        |
-|   V5    | Extended Support Only | Feb 11, 2020 |   June 8, 2022   |    Dec 8, 2022    |
+|   V5    |    End of Support     | 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    |

From 0d1bcb00f4acb6a67cd643b5d6d1f8af8e9d2ed7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 9 Dec 2022 14:21:16 -0500
Subject: [PATCH 141/469] docs(angular): add toastDuration and
 toggleOnOffLabels to config (#2670)

---
 docs/angular/config.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/angular/config.md b/docs/angular/config.md
index 01844cc067c..9e6849a3729 100644
--- a/docs/angular/config.md
+++ b/docs/angular/config.md
@@ -254,5 +254,7 @@ Below are the config options that Ionic uses.
 | `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.                     |
+| `toastDuration`          | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                         |
 | `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".               |
+| `toggleOnOffLabels`      | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |

From 0182c808a73cdf232aa1f457093f95683b52fad1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 9 Dec 2022 14:21:32 -0500
Subject: [PATCH 142/469] docs(react): add toastDuration and toggleOnOffLabels
 to config (#2671)

---
 docs/react/config.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/react/config.md b/docs/react/config.md
index 6df438834cb..b988b0e3925 100644
--- a/docs/react/config.md
+++ b/docs/react/config.md
@@ -112,5 +112,7 @@ Below are the config options that Ionic uses.
 | `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.                     |
+| `toastDuration`          | `number`                                                                        | Overrides the default `duration` for all `ion-toast` components.                                         |
 | `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".               |
+| `toggleOnOffLabels`      | `boolean`                                                                       | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |

From 241650b9ac00e64f3f45a40169940ff9a30c153e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 9 Dec 2022 14:21:43 -0500
Subject: [PATCH 143/469] docs(vue): add toastDuration and toggleOnOffLabels to
 config (#2672)

---
 docs/vue/config.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/vue/config.md b/docs/vue/config.md
index a8a3ec5129d..98b453cd612 100644
--- a/docs/vue/config.md
+++ b/docs/vue/config.md
@@ -113,5 +113,7 @@ Below are the config options that Ionic uses.
 | `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.                     |
+| `toastDuration`          | `number`                                                                      | Overrides the default `duration` for all `ion-toast` components.                                         |
 | `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".               |
+| `toggleOnOffLabels`      | `boolean`                                                                     | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |

From 1d3421043abb1a1af0876d1df5dfdcd6cf88cee9 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 14 Dec 2022 15:23:37 -0500
Subject: [PATCH 144/469] docs(browser-support): update min firefox version to
 70 (#2676)

---
 docs/reference/browser-support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md
index edb53a6e1d7..3b379c8ff3e 100644
--- a/docs/reference/browser-support.md
+++ b/docs/reference/browser-support.md
@@ -42,7 +42,7 @@ Because Ionic is based on web technologies, it works just as well on desktop bro
 | **Chrome**  | 79+      | 60+      | ✔        | ✔        |
 | **Safari**  | 14+      | 13+      | ✔        | ✔        |
 |  **Edge**   | 79+      | 79+      | 79+      | ✔        |
-| **Firefox** | 63+      | 63+      | ✔        | ✔        |
+| **Firefox** | 70+      | 63+      | ✔        | ✔        |
 |  **IE 11**  | **X**    | **X**    | **X**    | **X**    |
 
 :::note

From 6b70af53e24c60abc6ee7741e8ca1a02b0d5eeee Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 16 Dec 2022 15:48:12 -0500
Subject: [PATCH 145/469] docs(toast): add inline toast usage (#2677)

---
 docs/api/toast.md                             | 78 ++++---------------
 .../code/stackblitz/v7/angular/package.json   |  4 +-
 static/code/stackblitz/v7/html/package.json   |  2 +-
 static/code/stackblitz/v7/react/package.json  |  2 +-
 static/code/stackblitz/v7/vue/package.json    |  2 +-
 .../buttons/angular/example_component_html.md |  9 ++-
 .../buttons/angular/example_component_ts.md   | 35 ++++-----
 static/usage/v7/toast/buttons/demo.html       | 51 +++++-------
 static/usage/v7/toast/buttons/javascript.md   | 44 +++++------
 static/usage/v7/toast/buttons/react.md        | 45 +++++------
 static/usage/v7/toast/buttons/vue.md          | 75 +++++++++---------
 static/usage/v7/toast/icon/angular.md         |  4 +
 .../icon/angular/example_component_html.md    |  3 -
 .../icon/angular/example_component_ts.md      | 22 ------
 static/usage/v7/toast/icon/demo.html          | 26 ++-----
 static/usage/v7/toast/icon/index.md           | 11 +--
 static/usage/v7/toast/icon/javascript.md      | 15 +---
 static/usage/v7/toast/icon/react.md           | 19 ++---
 static/usage/v7/toast/icon/vue.md             | 30 +++----
 static/usage/v7/toast/inline/basic/angular.md | 12 +++
 static/usage/v7/toast/inline/basic/demo.html  | 29 +++++++
 static/usage/v7/toast/inline/basic/index.md   | 19 +++++
 .../usage/v7/toast/inline/basic/javascript.md | 12 +++
 static/usage/v7/toast/inline/basic/react.md   | 33 ++++++++
 static/usage/v7/toast/inline/basic/vue.md     | 37 +++++++++
 .../is-open/angular/example_component_html.md | 16 ++++
 .../is-open/angular/example_component_ts.md   | 15 ++++
 .../usage/v7/toast/inline/is-open/demo.html   | 35 +++++++++
 static/usage/v7/toast/inline/is-open/index.md | 26 +++++++
 .../v7/toast/inline/is-open/javascript.md     | 18 +++++
 static/usage/v7/toast/inline/is-open/react.md | 31 ++++++++
 static/usage/v7/toast/inline/is-open/vue.md   | 35 +++++++++
 .../theming/angular/example_component_html.md |  3 +-
 .../theming/angular/example_component_ts.md   | 24 ++----
 static/usage/v7/toast/theming/demo.html       | 38 ++++-----
 static/usage/v7/toast/theming/javascript.md   | 25 +++---
 .../usage/v7/toast/theming/react/main_tsx.md  | 36 ++++-----
 static/usage/v7/toast/theming/vue.md          | 34 ++++----
 38 files changed, 553 insertions(+), 402 deletions(-)
 create mode 100644 static/usage/v7/toast/icon/angular.md
 delete mode 100644 static/usage/v7/toast/icon/angular/example_component_html.md
 delete mode 100644 static/usage/v7/toast/icon/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/inline/basic/angular.md
 create mode 100644 static/usage/v7/toast/inline/basic/demo.html
 create mode 100644 static/usage/v7/toast/inline/basic/index.md
 create mode 100644 static/usage/v7/toast/inline/basic/javascript.md
 create mode 100644 static/usage/v7/toast/inline/basic/react.md
 create mode 100644 static/usage/v7/toast/inline/basic/vue.md
 create mode 100644 static/usage/v7/toast/inline/is-open/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/inline/is-open/demo.html
 create mode 100644 static/usage/v7/toast/inline/is-open/index.md
 create mode 100644 static/usage/v7/toast/inline/is-open/javascript.md
 create mode 100644 static/usage/v7/toast/inline/is-open/react.md
 create mode 100644 static/usage/v7/toast/inline/is-open/vue.md

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 028aa19411b..8d3c0ba3a4c 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -22,78 +22,29 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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
+## Inline Toasts (Recommended)
 
-### Positioning
+`ion-toast` 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 toast.
 
-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 InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/index.md';
 
-import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.md';
+<InlineToastTriggerExample />
 
-<ControllerExample />
+### Using `isOpen​`
 
-### Inline
+The `isOpen` property on `ion-toast` allows developers to control the presentation state of the toast from their application state. This means when `isOpen` is set to `true` the toast will be presented and when `isOpen` is set to `false` the toast will be dismissed.
 
-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.
+`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the toast is dismissed. Developers should listen for the `ionToastDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-toast` from being tightly coupled with the state of the application. With a one way data binding, the toast only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the toast 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.
 
-<Tabs defaultValue="react" values={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
-<TabItem value="react">
+import InlineToastIsOpenExample from '@site/static/usage/v7/toast/inline/is-open/index.md';
 
-```tsx
-import React, { useState } from 'react';
-import { IonButton, IonToast } from '@ionic/react';
+<InlineToastIsOpenExample />
 
-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}
-      />
-    </>
-  );
-}
-```
+## Controller Toasts
 
-</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>
-```
+import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.md';
 
-</TabItem>
-</Tabs>
+<ControllerExample />
 
 ## Dismissing
 
@@ -104,6 +55,11 @@ The following example demonstrates how to use the `buttons` property to add a bu
 import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
 
 <ButtonsPlayground />
+  
+
+## 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.
 
 ## Icons
 
diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index 94a8cb512bc..0cc3768e391 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/angular": "6.3.10-dev.11670298302.15d4a0a5",
-    "@ionic/core": "6.3.10-dev.11670298302.15d4a0a5"
+    "@ionic/angular": "6.4.1-dev.11670949653.116404ab",
+    "@ionic/core": "6.4.1-dev.11670949653.116404ab"
   }
 }
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
index 7f0a750e848..3d58f728e08 100644
--- a/static/code/stackblitz/v7/html/package.json
+++ b/static/code/stackblitz/v7/html/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "6.3.10-dev.11670298302.15d4a0a5"
+    "@ionic/core": "6.4.1-dev.11670949653.116404ab"
   }
 }
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index 107792e445b..992ec2991ee 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "6.3.10-dev.11670298302.15d4a0a5",
+    "@ionic/react": "6.4.1-dev.11670949653.116404ab",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index 052c760d4ec..0b46aaa5161 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "6.3.10-dev.11670298302.15d4a0a5",
+    "@ionic/vue": "6.4.1-dev.11670949653.116404ab",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
diff --git a/static/usage/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md
index 5d457cdbf2f..3245d44e8a4 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_html.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_html.md
@@ -1,5 +1,12 @@
 ```html
-<ion-button (click)="presentToast()">Click Me</ion-button>
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast
+  trigger="open-toast"
+  message="Hello World!" 
+  [duration]="3000" 
+  [buttons]="toastButtons"
+  (didDismiss)="setRoleMessage($event)"
+></ion-toast>
 <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
index 54dc88ac35c..19c8e6a7666 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -7,32 +7,25 @@ import { ToastController } from '@ionic/angular';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
+  public toastButtons = [
+    {
+      text: 'More Info',
+      role: 'info',
+      handler: () => { this.handlerMessage = 'More Info clicked'; }
+    },
+    {
+      text: 'Dismiss',
+      role: 'cancel',
+      handler: () => { this.handlerMessage = 'Dismiss clicked'; }
+    }
+  ];
   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();
+  setRoleMessage(ev) {
+    const { role } = ev.detail
     this.roleMessage = `Dismissed with role: ${role}`;
   }
 }
diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html
index 261a6e53cc7..56fcab31d5a 100644
--- a/static/usage/v7/toast/buttons/demo.html
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -30,46 +30,37 @@
     </ion-header>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentToast()">Click Me</ion-button>
+        <ion-button id="open-toast">Open Toast</ion-button>
+        <ion-toast trigger="open-toast" duration="3000" message="Hello World!"></ion-toast>
         <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 toast = document.querySelector('ion-toast');
     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'; }
-          }
-        ]
-      });
+    toast.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();
+    toast.addEventListener('ionToastDidDismiss', (ev) => {
+      const { role } = ev.detail;
       roleOutput.innerText = `Dismissed with role: ${role}`;
-    }
+    });
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md
index c5cea896bb3..86cf3cb0b68 100644
--- a/static/usage/v7/toast/buttons/javascript.md
+++ b/static/usage/v7/toast/buttons/javascript.md
@@ -1,34 +1,30 @@
 ```html
-<ion-button onclick="presentToast()">Click Me</ion-button>
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast trigger="open-toast" duration="3000" message="Hello World!"></ion-toast>
 <p id="handlerResult"></p>
 <p id="roleResult"></p>
 
 <script>
+  const toast = document.querySelector('ion-toast');
   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();
+  
+  toast.buttons = [
+    {
+      text: 'More Info',
+      role: 'info',
+      handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+    },
+    {
+      text: 'Dismiss',
+      role: 'cancel',
+      handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+    }
+  ];
+  
+  toast.addEventListener('ionToastDidDismiss', (ev) => {
+    const { role } = ev.detail;
     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
index ac08a9b543b..fc8b603fa20 100644
--- a/static/usage/v7/toast/buttons/react.md
+++ b/static/usage/v7/toast/buttons/react.md
@@ -1,37 +1,32 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, useIonToast } from '@ionic/react';
+import { IonButton, IonToast } 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>
+      <IonButton id="open-toast">Open Toast</IonButton>
+      <IonToast
+        trigger="open-toast"
+        message="Hello World!"
+        duration={3000}
+        buttons={[
+          {
+            text: 'More Info',
+            role: 'info',
+            handler: () => { setHandlerMessage('More Info clicked'); }
+          },
+          {
+            text: 'Dismiss',
+            role: 'cancel',
+            handler: () => { setHandlerMessage('Dismiss clicked'); }
+          }
+        ]}
+        onDidDismiss={(e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`)}
+      ></IonToast>
       <p>{handlerMessage}</p>
       <p>{roleMessage}</p>
     </>
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
index ec7da81c54c..3ae653988f6 100644
--- a/static/usage/v7/toast/buttons/vue.md
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -1,46 +1,51 @@
 ```html
 <template>
-  <ion-button @click="presentToast">Click Me</ion-button>
+  <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-toast
+    trigger="open-toast"
+    message="Hello World!" 
+    :duration="3000" 
+    :buttons="toastButtons"
+    @didDismiss="setRoleMessage($event)"
+  ></ion-toast>
   <p>{{ handlerMessage }}</p>
   <p>{{ roleMessage }}</p>
 </template>
 
 <script lang="ts">
-  import { IonButton, toastController } from '@ionic/vue';
+  import { IonButton, IonToast } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
 
-  export default {
-    components: { IonButton },
-    data() {
+  export default defineComponent({
+    components: { IonButton, IonToast },
+    setup() {
+      const handlerMessage = ref('');
+      const roleMessage = ref('');
+      const toastButtons = [
+        {
+          text: 'More Info',
+          role: 'info',
+          handler: () => { handlerMessage.value = 'More Info clicked'; }
+        },
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+          handler: () => { handlerMessage.value = 'Dismiss clicked'; }
+        }
+      ]
+      const setRoleMessage = (ev: CustomEvent) => {
+        const { role } = ev.detail
+        console.log('hi there')
+        roleMessage.value = `Dismissed with role: ${role}`;
+      }
+      
       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}`;
-      },
-    },
-  };
+        handlerMessage,
+        roleMessage,
+        toastButtons,
+        setRoleMessage
+      }
+    }
+  });
 </script>
 ```
diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular.md
new file mode 100644
index 00000000000..2dc76a51fa6
--- /dev/null
+++ b/static/usage/v7/toast/icon/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast trigger="open-toast" message="Hello World!" [duration]="3000" icon="globe"></ion-toast>
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/icon/angular/example_component_html.md b/static/usage/v7/toast/icon/angular/example_component_html.md
deleted file mode 100644
index 976194efc1e..00000000000
--- a/static/usage/v7/toast/icon/angular/example_component_html.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```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
deleted file mode 100644
index addffa2daf9..00000000000
--- a/static/usage/v7/toast/icon/angular/example_component_ts.md
+++ /dev/null
@@ -1,22 +0,0 @@
-```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
index efecadbf937..5b762ac3916 100644
--- a/static/usage/v7/toast/icon/demo.html
+++ b/static/usage/v7/toast/icon/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 </head>
 
 <body>
@@ -20,27 +20,11 @@
     </ion-header>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentToast()">Click Me</ion-button>
+        <ion-button id="open-toast">Open Toast</ion-button>
+        <ion-toast trigger="open-toast" message="Hello World!" duration="3000" icon="globe"></ion-toast>
       </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
+</html>
diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md
index bdc7b842c3f..1418e06b870 100644
--- a/static/usage/v7/toast/icon/index.md
+++ b/static/usage/v7/toast/icon/index.md
@@ -3,9 +3,7 @@ import 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';
+import angular from './angular.md';
 
 <Playground
   version="7"
@@ -14,12 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
     javascript,
     react,
     vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.ts': angular_example_component_ts,
-      },
-    },
+    angular
   }}
   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
index b63e8550ab3..1c694d9dde0 100644
--- a/static/usage/v7/toast/icon/javascript.md
+++ b/static/usage/v7/toast/icon/javascript.md
@@ -1,15 +1,4 @@
 ```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>
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast trigger="open-toast" message="Hello World!" duration="3000" icon="globe"></ion-toast>
 ```
diff --git a/static/usage/v7/toast/icon/react.md b/static/usage/v7/toast/icon/react.md
index 25d758c16b6..baa893d452e 100644
--- a/static/usage/v7/toast/icon/react.md
+++ b/static/usage/v7/toast/icon/react.md
@@ -1,23 +1,14 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonToast } from '@ionic/react';
+import { IonButton, IonToast } 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>
+    <>
+      <IonButton id="open-toast">Open Toast</IonButton>
+      <IonToast trigger="open-toast" message="Hello World!" duration={3000} icon={globe}></IonToast>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md
index d3a123f598b..634f18e7ff5 100644
--- a/static/usage/v7/toast/icon/vue.md
+++ b/static/usage/v7/toast/icon/vue.md
@@ -1,28 +1,20 @@
 ```html
 <template>
-  <ion-button @click="presentToast">Click Me</ion-button>
+  <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-toast trigger="open-toast" message="Hello World!" :duration="3000" :icon="globe"></ion-toast>
 </template>
 
 <script lang="ts">
-  import { IonButton, toastController } from '@ionic/vue';
+  import { IonButton, IonToast } from '@ionic/vue';
   import { globe } from 'ionicons/icons';
+  
+  import { defineComponent } from 'vue';
 
-  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}`;
-      },
-    },
-  };
+  export default defineComponent({
+    components: { IonButton, IonToast },
+    setup() {
+      return { globe };
+    }
+  });
 </script>
 ```
diff --git a/static/usage/v7/toast/inline/basic/angular.md b/static/usage/v7/toast/inline/basic/angular.md
new file mode 100644
index 00000000000..5756e5c7891
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Toast</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-toast" expand="block">Open</ion-button>
+  <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+  <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" [duration]="5000"></ion-toast>
+</ion-content>
+```
diff --git a/static/usage/v7/toast/inline/basic/demo.html b/static/usage/v7/toast/inline/basic/demo.html
new file mode 100644
index 00000000000..c3754dfa44e
--- /dev/null
+++ b/static/usage/v7/toast/inline/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>Toast | 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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Inline Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-toast" expand="block">Open</ion-button>
+      <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+      <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" duration="5000"></ion-toast>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md
new file mode 100644
index 00000000000..ad7f55c6e1e
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/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/toast/inline/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/toast/inline/basic/javascript.md b/static/usage/v7/toast/inline/basic/javascript.md
new file mode 100644
index 00000000000..27f1a967725
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Toast</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-toast" expand="block">Open</ion-button>
+  <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+  <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" duration="5000"></ion-toast>
+</ion-content>
+```
diff --git a/static/usage/v7/toast/inline/basic/react.md b/static/usage/v7/toast/inline/basic/react.md
new file mode 100644
index 00000000000..898603a0516
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import {
+  IonButton,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonToast,
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Inline Toast</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-toast" expand="block">
+          Open
+        </IonButton>
+        <p>This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+        <IonToast trigger="open-toast" message="This toast will disappear after 5 seconds" duration={5000}></IonToast>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md
new file mode 100644
index 00000000000..48c07b16d95
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Inline Toast</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-toast" expand="block">Open</ion-button>
+    <p>This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+    <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" :duration="5000"></ion-toast>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonToast,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+      IonToast,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/toast/inline/is-open/angular/example_component_html.md b/static/usage/v7/toast/inline/is-open/angular/example_component_html.md
new file mode 100644
index 00000000000..96014213ad0
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Toast</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button expand="block" (click)="setOpen(true)">Open</ion-button>
+  <ion-toast
+    [isOpen]="isToastOpen"
+    message="This toast will close in 5 seconds"
+    [duration]="5000"
+    (didDismiss)="setOpen(false)"
+  ></ion-toast>
+</ion-content>
+```
diff --git a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
new file mode 100644
index 00000000000..67fb0c7676c
--- /dev/null
+++ b/static/usage/v7/toast/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 {
+  isToastOpen = false;
+
+  setOpen(isOpen: boolean) {
+    this.isToastOpen = isOpen;
+  }
+}
+```
diff --git a/static/usage/v7/toast/inline/is-open/demo.html b/static/usage/v7/toast/inline/is-open/demo.html
new file mode 100644
index 00000000000..b77cf580230
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/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>Toast | 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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Inline Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button expand="block" onclick="toast.isOpen = true">Open</ion-button>
+      <ion-toast duration="5000" message="This toast will close in 5 seconds"></ion-toast>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const toast = document.querySelector('ion-toast');
+    toast.addEventListener('didDismiss', () => {
+      toast.isOpen = false;
+    });
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/toast/inline/is-open/index.md b/static/usage/v7/toast/inline/is-open/index.md
new file mode 100644
index 00000000000..5f5130a0a4d
--- /dev/null
+++ b/static/usage/v7/toast/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/toast/inline/is-open/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/toast/inline/is-open/javascript.md b/static/usage/v7/toast/inline/is-open/javascript.md
new file mode 100644
index 00000000000..eeb540d747a
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Toast</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button expand="block" onclick="toast.isOpen = true">Open</ion-button>
+  <ion-toast duration="5000" message="This toast will close in 5 seconds"></ion-toast>
+</ion-content>
+
+<script>
+  var toast = document.querySelector('ion-toast');
+  toast.addEventListener('didDismiss', () => {
+    toast.isOpen = false;
+  });
+</script>
+```
diff --git a/static/usage/v7/toast/inline/is-open/react.md b/static/usage/v7/toast/inline/is-open/react.md
new file mode 100644
index 00000000000..ed32e64ea70
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react';
+
+function Example() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Inline Toast</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton expand="block" onClick={() => setIsOpen(true)}>
+          Open
+        </IonButton>
+        <IonToast
+          isOpen={isOpen}
+          message="This toast will close in 5 seconds"
+          onDidDismiss={() => setIsOpen(false)}
+          duration={5000}
+        ></IonToast>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/toast/inline/is-open/vue.md b/static/usage/v7/toast/inline/is-open/vue.md
new file mode 100644
index 00000000000..add4a0fe8b3
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/vue.md
@@ -0,0 +1,35 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Inline Toast</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button expand="block" @click="setOpen(true)">Open</ion-button>
+    <ion-toast 
+      :is-open="isOpen"
+      message="This toast will close in 5 seconds"
+      :duration="5000"
+      @didDismiss="setOpen(false)"
+    ></ion-toast>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast },
+    setup() {
+      const isOpen = ref(false);
+      const setOpen = (state: boolean) => {
+        isOpen.value = state;
+      };
+
+      return { isOpen, setOpen };
+    }
+  });
+</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
index 91e6579dfa8..840cca6e877 100644
--- a/static/usage/v7/toast/theming/angular/example_component_html.md
+++ b/static/usage/v7/toast/theming/angular/example_component_html.md
@@ -1,3 +1,4 @@
 ```html
-<ion-button (click)="presentToast()">Click Me</ion-button>
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast trigger="open-toast" [duration]="3000" message="Hello Styled World!" class="custom-toast" [buttons]="toastButtons"></ion-toast>
 ```
diff --git a/static/usage/v7/toast/theming/angular/example_component_ts.md b/static/usage/v7/toast/theming/angular/example_component_ts.md
index 62c8151b0f4..336df2a14a9 100644
--- a/static/usage/v7/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v7/toast/theming/angular/example_component_ts.md
@@ -1,28 +1,18 @@
 ```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) {}
+  public toastButtons = [
+    {
+      text: 'Dismiss',
+      role: 'cancel'
+    }
+  ];
 
-  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();
-  }
+  constructor() {}
 }
 ```
diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html
index cdbffb5541c..881057dbd05 100644
--- a/static/usage/v7/toast/theming/demo.html
+++ b/static/usage/v7/toast/theming/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-toast.custom-toast {
@@ -38,33 +38,21 @@
     </ion-header>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentToast()">Click Me</ion-button>
+        <ion-button id="open-toast">Open Toast</ion-button>
+        <ion-toast trigger="open-toast" duration="3000" message="Hello Styled World!" class="custom-toast"></ion-toast>
       </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>
+    const toast = document.querySelector('ion-toast');
+    toast.buttons = [
+      {
+        text: 'Dismiss',
+        role: 'cancel'
+      }
+    ];
+    </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toast/theming/javascript.md b/static/usage/v7/toast/theming/javascript.md
index b540eccaaf7..9da97b92b4c 100644
--- a/static/usage/v7/toast/theming/javascript.md
+++ b/static/usage/v7/toast/theming/javascript.md
@@ -1,22 +1,15 @@
 ```html
-<ion-button onclick="presentToast()">Click Me</ion-button>
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast trigger="open-toast" duration="3000" message="Hello Styled World!" class="custom-toast"></ion-toast>
 
 <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();
-  }
+  const toast = document.querySelector('ion-toast');
+  toast.buttons = [
+    {
+      text: 'Dismiss',
+      role: 'cancel'
+    }
+  ];
 </script>
 
 <style>
diff --git a/static/usage/v7/toast/theming/react/main_tsx.md b/static/usage/v7/toast/theming/react/main_tsx.md
index fe88e64e8c7..b31953021ca 100644
--- a/static/usage/v7/toast/theming/react/main_tsx.md
+++ b/static/usage/v7/toast/theming/react/main_tsx.md
@@ -1,30 +1,26 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonToast } from '@ionic/react';
+import { IonButton, IonToast } 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>
+    <>
+      <IonButton id="open-toast">Open Toast</IonButton>
+      <IonToast
+        trigger="open-toast" 
+        duration={3000}
+        message="Hello Styled World!"
+        class="custom-toast"
+        buttons={[
+          {
+            text: 'Dismiss',
+            role: 'cancel'
+          }
+        ]}>
+      </IonToast>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/toast/theming/vue.md b/static/usage/v7/toast/theming/vue.md
index 99bcbb7cf18..14a6b0c1e3b 100644
--- a/static/usage/v7/toast/theming/vue.md
+++ b/static/usage/v7/toast/theming/vue.md
@@ -1,30 +1,24 @@
 ```html
 <template>
-  <ion-button @click="presentToast">Click Me</ion-button>
+  <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-toast trigger="open-toast" :duration="3000" message="Hello Styled World!" class="custom-toast" :buttons="toastButtons"></ion-toast>
 </template>
 
 <script lang="ts">
-  import { IonButton, toastController } from '@ionic/vue';
+  import { IonButton, IonToast } 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();
-      },
-    },
+    components: { IonButton, IonToast },
+    setup() {
+      const toastButtons = [
+        {
+          text: 'Dismiss',
+          role: 'cancel'
+        }
+      ];
+      
+      return { toastButtons };
+    }
   };
 </script>
 

From a9d7d71e1b3f94e53381414eb17bf2c80691c121 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 3 Jan 2023 15:24:19 -0500
Subject: [PATCH 146/469] docs(modal): canDismiss type definition (#2686)

---
 docs/api/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 0f5e5b95884..a8589764d5e 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -194,7 +194,7 @@ interface ModalOptions {
    * @deprecated - To prevent modals from dismissing, use canDismiss instead.
    */
   swipeToClose?: boolean;
-  canDismiss?: boolean | (() => Promise<boolean>);
+  canDismiss?: boolean | ((data?: any, role?: string) => Promise<boolean>);
 
   mode?: 'ios' | 'md';
   keyboardClose?: boolean;

From ceaa309b2c3736355fcf3f3e58ba8da382e05ac4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 5 Jan 2023 09:01:56 -0500
Subject: [PATCH 147/469] docs(input): add usage for new syntax (#2682)

---
 docs/api/input.md                             |  40 +++-
 docs/api/item.md                              |  18 --
 static/usage/v7/input/basic/angular.md        |  15 +-
 static/usage/v7/input/basic/demo.html         |  21 +-
 static/usage/v7/input/basic/javascript.md     |  15 +-
 static/usage/v7/input/basic/react.md          |  17 +-
 static/usage/v7/input/basic/vue.md            |  19 +-
 static/usage/v7/input/clear/angular.md        |  12 +-
 static/usage/v7/input/clear/demo.html         |  15 +-
 static/usage/v7/input/clear/javascript.md     |  12 +-
 static/usage/v7/input/clear/react.md          |  11 +-
 static/usage/v7/input/clear/vue.md            |  20 +-
 .../counter/angular/example_component_html.md |   5 +
 .../counter/angular/example_component_ts.md   |   0
 static/usage/v7/input/counter/demo.html       |  40 ++++
 .../usage/v7/{item => input}/counter/index.md |   2 +-
 static/usage/v7/input/counter/javascript.md   |  10 +
 static/usage/v7/input/counter/react.md        |  15 ++
 static/usage/v7/input/counter/vue.md          |  21 ++
 static/usage/v7/input/fill/angular.md         |  15 +-
 static/usage/v7/input/fill/demo.html          |  24 +-
 static/usage/v7/input/fill/javascript.md      |  15 +-
 static/usage/v7/input/fill/react.md           |  21 +-
 static/usage/v7/input/fill/vue.md             |  23 +-
 static/usage/v7/input/helper-error/angular.md |  12 +
 .../v7/{item => input}/helper-error/demo.html |  38 +--
 .../v7/{item => input}/helper-error/index.md  |   2 +-
 .../helper-error/javascript.md                |  25 +-
 .../v7/{item => input}/helper-error/react.md  |  19 +-
 static/usage/v7/input/helper-error/vue.md     |  46 ++++
 static/usage/v7/input/labels/angular.md       |  18 +-
 static/usage/v7/input/labels/demo.html        |  18 +-
 static/usage/v7/input/labels/javascript.md    |  18 +-
 static/usage/v7/input/labels/react.md         |  20 +-
 static/usage/v7/input/labels/vue.md           |  22 +-
 static/usage/v7/input/migration/index.md      | 224 ++++++++++++++++++
 .../usage/v7/input/theming/colors/angular.md  |  18 +-
 .../usage/v7/input/theming/colors/demo.html   |  24 +-
 .../v7/input/theming/colors/javascript.md     |  18 +-
 static/usage/v7/input/theming/colors/react.md |  18 +-
 static/usage/v7/input/theming/colors/vue.md   |  18 +-
 .../angular/example_component_html.md         |   2 +-
 .../v7/input/theming/css-properties/demo.html |   8 +-
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_tsx.md  |   2 +-
 .../v7/input/theming/css-properties/vue.md    |   2 +-
 static/usage/v7/input/types/angular.md        |  45 ++--
 static/usage/v7/input/types/demo.html         |  21 +-
 static/usage/v7/input/types/javascript.md     |  45 ++--
 static/usage/v7/input/types/react.md          |  25 +-
 static/usage/v7/input/types/vue.md            |  27 +--
 .../counter/angular/example_component_html.md |  11 -
 static/usage/v7/item/counter/demo.html        |  47 ----
 static/usage/v7/item/counter/javascript.md    |  16 --
 static/usage/v7/item/counter/react.md         |  21 --
 static/usage/v7/item/counter/vue.md           |  27 ---
 static/usage/v7/item/helper-error/angular.md  |   8 -
 static/usage/v7/item/helper-error/vue.md      |  41 ----
 58 files changed, 709 insertions(+), 605 deletions(-)
 create mode 100644 static/usage/v7/input/counter/angular/example_component_html.md
 rename static/usage/v7/{item => input}/counter/angular/example_component_ts.md (100%)
 create mode 100644 static/usage/v7/input/counter/demo.html
 rename static/usage/v7/{item => input}/counter/index.md (93%)
 create mode 100644 static/usage/v7/input/counter/javascript.md
 create mode 100644 static/usage/v7/input/counter/react.md
 create mode 100644 static/usage/v7/input/counter/vue.md
 create mode 100644 static/usage/v7/input/helper-error/angular.md
 rename static/usage/v7/{item => input}/helper-error/demo.html (58%)
 rename static/usage/v7/{item => input}/helper-error/index.md (87%)
 rename static/usage/v7/{item => input}/helper-error/javascript.md (50%)
 rename static/usage/v7/{item => input}/helper-error/react.md (61%)
 create mode 100644 static/usage/v7/input/helper-error/vue.md
 create mode 100644 static/usage/v7/input/migration/index.md
 delete mode 100644 static/usage/v7/item/counter/angular/example_component_html.md
 delete mode 100644 static/usage/v7/item/counter/demo.html
 delete mode 100644 static/usage/v7/item/counter/javascript.md
 delete mode 100644 static/usage/v7/item/counter/react.md
 delete mode 100644 static/usage/v7/item/counter/vue.md
 delete mode 100644 static/usage/v7/item/helper-error/angular.md
 delete mode 100644 static/usage/v7/item/helper-error/vue.md

diff --git a/docs/api/input.md b/docs/api/input.md
index 19e8f42f0b4..2b296ffec4f 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -57,7 +57,9 @@ import Clear from '@site/static/usage/v7/input/clear/index.md';
 
 ## 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"`.
+Material Design offers filled styles for an input. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
+
+Since the `fill` styles visually defines the input container, inputs that use `fill` should not be used in `ion-item`.
 
 import Fill from '@site/static/usage/v7/input/fill/index.md';
 
@@ -66,19 +68,17 @@ import Fill from '@site/static/usage/v7/input/fill/index.md';
 
 ## 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.
+Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-input`. 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/v7/item/helper-error/index.md';
+import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
 <HelperError />
 
-## Item Counter
+## Input 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.
+The input counter is 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/v7/item/counter/index.md';
+import Counter from '@site/static/usage/v7/input/counter/index.md';
 
 <Counter />
 
@@ -87,6 +87,8 @@ import Counter from '@site/static/usage/v7/item/counter/index.md';
 
 ### Colors
 
+Setting the `color` property changes the color palette for each input. On `ios` mode, this property changes the caret color. On `md` mode, this property changes the caret color and the highlight/underline color.
+
 import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
 <Colors />
@@ -99,6 +101,28 @@ import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.m
 
 <CSSProps />
 
+## Migrating from Legacy Input Syntax
+
+A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience.
+
+While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+
+### Using the Modern Syntax
+
+Using the modern syntax involves three steps:
+
+1. Remove `ion-label` and use the `label` property on `ion-input` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-input`.
+2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
+3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead.
+
+import Migration from '@site/static/usage/v7/input/migration/index.md';
+
+<Migration />
+
+### Using the Legacy Syntax
+
+Ionic uses heuristics to detect if an app is using the modern input syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-input` to `true` to force that instance of the input to use the legacy syntax.
 
 ## Interfaces
 
diff --git a/docs/api/item.md b/docs/api/item.md
index 8c3809a46fb..09f89b1132b 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -101,24 +101,6 @@ import Inputs from '@site/static/usage/v7/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/v7/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/v7/item/counter/index.md';
-
-<Counter />
-
 ## Theming
 
 ### Colors
diff --git a/static/usage/v7/input/basic/angular.md b/static/usage/v7/input/basic/angular.md
index faa0271acae..a8678178aa6 100644
--- a/static/usage/v7/input/basic/angular.md
+++ b/static/usage/v7/input/basic/angular.md
@@ -1,28 +1,23 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-label>Default input</ion-label>
-    <ion-input></ion-input>
+    <ion-input label="Default input"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label>Input with placeholder</ion-label>
-    <ion-input placeholder="Enter company name"></ion-input>
+    <ion-input label="Input with placeholder" 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-input label="Input with value" 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-input label="Readonly 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-input label="Disabled 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
index 264bbaa75e6..b5c87c52aea 100644
--- a/static/usage/v7/input/basic/demo.html
+++ b/static/usage/v7/input/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-list {
@@ -23,28 +23,23 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-label>Default input</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Default input"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-label>Input with placeholder</ion-label>
-            <ion-input placeholder="Enter company name"></ion-input>
+            <ion-input label="Input with placeholder" 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-input label="Input with value" 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-input label="Readonly 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-input label="Disabled input" value="53703" disabled="true"></ion-input>
           </ion-item>
         </ion-list>
       </div>
@@ -52,4 +47,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/input/basic/javascript.md b/static/usage/v7/input/basic/javascript.md
index 668cdbdf07e..75e521fa3b6 100644
--- a/static/usage/v7/input/basic/javascript.md
+++ b/static/usage/v7/input/basic/javascript.md
@@ -1,28 +1,23 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-label>Default input</ion-label>
-    <ion-input></ion-input>
+    <ion-input label="Default input"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label>Input with placeholder</ion-label>
-    <ion-input placeholder="Enter company name"></ion-input>
+    <ion-input label="Input with placeholder" 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-input label="Input with value" 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-input label="Readonly 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-input label="Disabled 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
index b3ad075a156..ff799a11f62 100644
--- a/static/usage/v7/input/basic/react.md
+++ b/static/usage/v7/input/basic/react.md
@@ -1,33 +1,28 @@
 ```tsx
 import React from 'react';
-import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
 
 function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonLabel>Default input</IonLabel>
-        <IonInput></IonInput>
+        <IonInput label="Default input"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Input with placeholder</IonLabel>
-        <IonInput placeholder="Enter company name"></IonInput>
+        <IonInput label="Input with placeholder" placeholder="Enter company name"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Input with value</IonLabel>
-        <IonInput value="121 S Pinckney St #300"></IonInput>
+        <IonInput label="Input with value" value="121 S Pinckney St #300"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Readonly input</IonLabel>
-        <IonInput value="Madison" readonly={true}></IonInput>
+        <IonInput label="Readonly input" value="Madison" readonly={true}></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Disabled input</IonLabel>
-        <IonInput value="53703" disabled={true}></IonInput>
+        <IonInput label="Disabled input" value="53703" disabled={true}></IonInput>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v7/input/basic/vue.md b/static/usage/v7/input/basic/vue.md
index 80ad1c0cd54..cfdca09244a 100644
--- a/static/usage/v7/input/basic/vue.md
+++ b/static/usage/v7/input/basic/vue.md
@@ -2,38 +2,33 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-label>Default input</ion-label>
-      <ion-input></ion-input>
+      <ion-input label="Default input"></ion-input>
     </ion-item>
 
     <ion-item>
-      <ion-label>Input with placeholder</ion-label>
-      <ion-input placeholder="Enter company name"></ion-input>
+      <ion-input label="Input with placeholder" 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-input label="Input with value" 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-input label="Readonly 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-input label="Disabled input" value="53703" :disabled="true"></ion-input>
     </ion-item>
   </ion-list>
 </template>
 
 <script lang="ts">
-  import { IonInput, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { IonInput, IonItem, IonList } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonInput, IonItem, IonLabel, IonList },
+    components: { IonInput, IonItem, IonList },
   });
 </script>
 ```
diff --git a/static/usage/v7/input/clear/angular.md b/static/usage/v7/input/clear/angular.md
index d198485925f..9c6af49b21d 100644
--- a/static/usage/v7/input/clear/angular.md
+++ b/static/usage/v7/input/clear/angular.md
@@ -1,18 +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-input label="Input with clear button" labelPlacement="stacked" [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-input label="Input with clear on edit" labelPlacement="stacked" [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-input label="Password input" labelPlacement="stacked" 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
index e46c310a3a4..c1c2b9749c9 100644
--- a/static/usage/v7/input/clear/demo.html
+++ b/static/usage/v7/input/clear/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-list {
@@ -23,20 +23,17 @@
       <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 label="Input with clear button" label-placement="stacked" 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 label="Input with clear on edit" label-placement="stacked" 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 label="Password input" label-placement="stacked" type="password" placeholder="Enter text, leave the input, come back and type to clear">
             </ion-input>
           </ion-item>
         </ion-list>
@@ -45,4 +42,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/input/clear/javascript.md b/static/usage/v7/input/clear/javascript.md
index 7a3a7fc2701..79ffd9d9f47 100644
--- a/static/usage/v7/input/clear/javascript.md
+++ b/static/usage/v7/input/clear/javascript.md
@@ -1,18 +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-input label="Input with clear button" label-placement="stacked" 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-input label="Input with clear on edit" label-placement="stacked" 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-input label="Password input" label-placement="stacked" 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
index c7205c903a4..5ac087eed19 100644
--- a/static/usage/v7/input/clear/react.md
+++ b/static/usage/v7/input/clear/react.md
@@ -1,23 +1,20 @@
 ```tsx
 import React from 'react';
-import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+import { IonInput, IonItem, 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>
+        <IonInput label="Input with clear button" labelPlacement="stacked" 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>
+        <IonInput label="Input with clear on edit" labelPlacement="stacked" 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>
+        <IonInput label="Password input" labelPlacement="stacked" type="password" placeholder="Enter text, leave the input, come back and type to clear"></IonInput>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v7/input/clear/vue.md b/static/usage/v7/input/clear/vue.md
index fecb1e831f1..15095b0cc91 100644
--- a/static/usage/v7/input/clear/vue.md
+++ b/static/usage/v7/input/clear/vue.md
@@ -2,28 +2,28 @@
 <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-input label="Input with clear button" label-placement="stacked" :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-input label="Input with clear on edit" label-placement="stacked" :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-input label="Password input" label-placement="stacked" 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 { IonInput, IonItem, IonList } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonInput, IonItem, IonLabel, IonList },
+    components: { IonInput, IonItem, IonList },
   });
 </script>
 ```
diff --git a/static/usage/v7/input/counter/angular/example_component_html.md b/static/usage/v7/input/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..e9f3d7dcaac
--- /dev/null
+++ b/static/usage/v7/input/counter/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-input label="Default counter" labelPlacement="floating" [counter]="true" maxlength="20"></ion-input>
+
+<ion-input id="custom-input" label="Custom Counter Format" labelPlacement="floating" [counter]="true" maxlength="20" [counterFormatter]="customCounterFormatter"></ion-input>
+```
diff --git a/static/usage/v7/item/counter/angular/example_component_ts.md b/static/usage/v7/input/counter/angular/example_component_ts.md
similarity index 100%
rename from static/usage/v7/item/counter/angular/example_component_ts.md
rename to static/usage/v7/input/counter/angular/example_component_ts.md
diff --git a/static/usage/v7/input/counter/demo.html b/static/usage/v7/input/counter/demo.html
new file mode 100644
index 00000000000..08748497c3f
--- /dev/null
+++ b/static/usage/v7/input/counter/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</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+
+      width: 300px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-input label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-input>
+
+        <ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" counter="true" maxlength="20"></ion-input>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  const customInput = document.querySelector('#custom-input');
+  customInput.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+</script>
+
+</html>
diff --git a/static/usage/v7/item/counter/index.md b/static/usage/v7/input/counter/index.md
similarity index 93%
rename from static/usage/v7/item/counter/index.md
rename to static/usage/v7/input/counter/index.md
index c37e7d4f654..72587aebe74 100644
--- a/static/usage/v7/item/counter/index.md
+++ b/static/usage/v7/input/counter/index.md
@@ -20,5 +20,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
       },
     },
   }}
-  src="usage/v7/item/counter/demo.html"
+  src="usage/v7/input/counter/demo.html"
 />
diff --git a/static/usage/v7/input/counter/javascript.md b/static/usage/v7/input/counter/javascript.md
new file mode 100644
index 00000000000..ce15cf6f7a1
--- /dev/null
+++ b/static/usage/v7/input/counter/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-input label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-input>
+
+<ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" counter="true" maxlength="20"></ion-input>
+
+<script>
+  const customInput = document.querySelector('#custom-input');
+  customInput.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+</script>
+```
diff --git a/static/usage/v7/input/counter/react.md b/static/usage/v7/input/counter/react.md
new file mode 100644
index 00000000000..f0b8f6e2344
--- /dev/null
+++ b/static/usage/v7/input/counter/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonInput label="Default counter" labelPlacement="floating" counter={true} maxlength={20}></IonInput>
+      
+      <IonInput id="custom-input" label="Custom Counter Format" labelPlacement="floating" counter={true} maxlength={20} counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}></IonInput>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
new file mode 100644
index 00000000000..2cca8bf2f03
--- /dev/null
+++ b/static/usage/v7/input/counter/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-input label="Default counter" label-placement="floating" :counter="true" maxlength="20"></ion-input>
+  
+  <ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" :counter="true" maxlength="20" :counter-formatter="customFormatter"></ion-input>
+</template>
+
+<script lang="ts">
+  import { IonInput } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput },
+    methods: {
+      customFormatter(inputLength, maxLength) {
+        return `${maxLength - inputLength} characters remaining`;
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/input/fill/angular.md b/static/usage/v7/input/fill/angular.md
index 54ff7eafb18..4f28a9ddb7b 100644
--- a/static/usage/v7/input/fill/angular.md
+++ b/static/usage/v7/input/fill/angular.md
@@ -1,16 +1,7 @@
 ```html
-<ion-item>
-  <ion-label position="floating">Default input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
+<ion-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
 
-<ion-item fill="solid">
-  <ion-label position="floating">Solid input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
+<br />
 
-<ion-item fill="outline">
-  <ion-label position="floating">Outline input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
+<ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 ```
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
index a7afe6c8d13..6ff7421a7b4 100644
--- a/static/usage/v7/input/fill/demo.html
+++ b/static/usage/v7/input/fill/demo.html
@@ -7,13 +7,16 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     .container {
       flex-flow: column;
       justify-content: space-evenly;
+
+      width: 300px;
+      margin: 0 auto;
     }
   </style>
 </head>
@@ -22,23 +25,12 @@
   <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-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
 
-        <ion-item fill="outline">
-          <ion-label position="floating">Outline input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
-        </ion-item>
+        <ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/input/fill/javascript.md b/static/usage/v7/input/fill/javascript.md
index 54ff7eafb18..4f28a9ddb7b 100644
--- a/static/usage/v7/input/fill/javascript.md
+++ b/static/usage/v7/input/fill/javascript.md
@@ -1,16 +1,7 @@
 ```html
-<ion-item>
-  <ion-label position="floating">Default input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
+<ion-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
 
-<ion-item fill="solid">
-  <ion-label position="floating">Solid input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
+<br />
 
-<ion-item fill="outline">
-  <ion-label position="floating">Outline input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
+<ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 ```
diff --git a/static/usage/v7/input/fill/react.md b/static/usage/v7/input/fill/react.md
index 00000a9ee97..095d60872b6 100644
--- a/static/usage/v7/input/fill/react.md
+++ b/static/usage/v7/input/fill/react.md
@@ -1,24 +1,15 @@
 ```tsx
 import React from 'react';
-import { IonInput, IonItem, IonLabel } from '@ionic/react';
+import { IonInput } 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>
+      <IonInput mode="md" label="Solid input" labelPlacement="floating" fill="solid" placeholder="Enter text"></IonInput>
+      
+      <br />
+      
+      <IonInput mode="md" label="Outline input" labelPlacement="floating" fill="outline" placeholder="Enter text"></IonInput>
     </>
   );
 }
diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md
index d76a7929fb2..4e23ca4b3d7 100644
--- a/static/usage/v7/input/fill/vue.md
+++ b/static/usage/v7/input/fill/vue.md
@@ -1,27 +1,18 @@
 ```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>
+  <ion-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
+  
+  <br />
+  
+  <ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 </template>
 
 <script lang="ts">
-  import { IonInput, IonItem, IonLabel } from '@ionic/vue';
+  import { IonInput } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonInput, IonItem, IonLabel },
+    components: { IonInput },
   });
 </script>
 ```
diff --git a/static/usage/v7/input/helper-error/angular.md b/static/usage/v7/input/helper-error/angular.md
new file mode 100644
index 00000000000..9f75f6b070f
--- /dev/null
+++ b/static/usage/v7/input/helper-error/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-input
+  type="email"
+  fill="solid"
+  label="Email"
+  labelPlacement="floating"
+  helperText="Enter a valid email"
+  errorText="Invalid email"
+  ngModel 
+  email
+></ion-input>
+```
diff --git a/static/usage/v7/item/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
similarity index 58%
rename from static/usage/v7/item/helper-error/demo.html
rename to static/usage/v7/input/helper-error/demo.html
index 399f66d1270..8c0fe929e35 100644
--- a/static/usage/v7/item/helper-error/demo.html
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -4,30 +4,36 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Item</title>
+  <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <style>
+    .container ion-input {
+      width: 300px;
+    }
+  </style>
 </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>
+        <ion-input
+          type="email"
+          fill="solid"
+          label="Email"
+          label-placement="floating"
+          helper-text="Enter a valid email"
+          error-text="Invalid email"
+        ></ion-input>
       </div>
     </ion-content>
   </ion-app>
 
   <script>
-    const item = document.querySelector('ion-item');
-    const input = item.querySelector('ion-input');
+    const input = document.querySelector('ion-input');
 
     input.addEventListener('ionInput', (ev) => validate(ev));
     input.addEventListener('ionBlur', () => markTouched());
@@ -39,18 +45,18 @@
     const validate = (ev) => {
       const value = ev.target.value;
 
-      item.classList.remove('ion-valid');
-      item.classList.remove('ion-invalid');
+      input.classList.remove('ion-valid');
+      input.classList.remove('ion-invalid');
 
       if (value === "") return;
 
-      validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid');
+      validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid');
     }
 
     const markTouched = () => {
-      item.classList.add('ion-touched');
+      input.classList.add('ion-touched');
     }
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/item/helper-error/index.md b/static/usage/v7/input/helper-error/index.md
similarity index 87%
rename from static/usage/v7/item/helper-error/index.md
rename to static/usage/v7/input/helper-error/index.md
index abf593b1021..03393f19b24 100644
--- a/static/usage/v7/item/helper-error/index.md
+++ b/static/usage/v7/input/helper-error/index.md
@@ -13,6 +13,6 @@ import angular from './angular.md';
     vue,
     angular,
   }}
-  src="usage/v7/item/helper-error/demo.html"
+  src="usage/v7/input/helper-error/demo.html"
   size="150px"
 />
diff --git a/static/usage/v7/item/helper-error/javascript.md b/static/usage/v7/input/helper-error/javascript.md
similarity index 50%
rename from static/usage/v7/item/helper-error/javascript.md
rename to static/usage/v7/input/helper-error/javascript.md
index eb0d43327d9..16cd161715d 100644
--- a/static/usage/v7/item/helper-error/javascript.md
+++ b/static/usage/v7/input/helper-error/javascript.md
@@ -1,14 +1,15 @@
 ```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>
+<ion-input
+  type="email"
+  fill="solid"
+  label="Email"
+  label-placement="floating"
+  helper-text="Enter a valid email"
+  error-text="Invalid email"
+></ion-input>
 
 <script>
-  const item = document.querySelector('ion-item');
-  const input = item.querySelector('ion-input');
+  const input = input.querySelector('ion-input');
 
   input.addEventListener('ionInput', (ev) => validate(ev));
   input.addEventListener('ionBlur', () => markTouched());
@@ -20,16 +21,16 @@
   const validate = (ev) => {
     const value = ev.target.value;
 
-    item.classList.remove('ion-valid');
-    item.classList.remove('ion-invalid');
+    input.classList.remove('ion-valid');
+    input.classList.remove('ion-invalid');
 
     if (value === "") return;
 
-    validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid');
+    validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid');
   }
 
   const markTouched = () => {
-    item.classList.add('ion-touched');
+    input.classList.add('ion-touched');
   }
 </script>
 ```
diff --git a/static/usage/v7/item/helper-error/react.md b/static/usage/v7/input/helper-error/react.md
similarity index 61%
rename from static/usage/v7/item/helper-error/react.md
rename to static/usage/v7/input/helper-error/react.md
index a1e0e1e1b25..0067c90dac9 100644
--- a/static/usage/v7/item/helper-error/react.md
+++ b/static/usage/v7/input/helper-error/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonInput, IonItem, IonLabel, IonNote } from '@ionic/react';
+import { IonInput } from '@ionic/react';
 
 function Example() {
   const [isTouched, setIsTouched] = useState(false);
@@ -27,12 +27,17 @@ function Example() {
   };
 
   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>
+    <IonInput
+      className={`${isValid && 'ion-valid'} ${isValid === false && 'ion-invalid'} ${isTouched && 'ion-touched'}`}
+      type="email"
+      fill="solid"
+      label="Email"
+      labelPlacement="floating"
+      helperText="Enter a valid email"
+      errorText="Invalid email"
+      onIonInput={(event) => validate(event)}
+      onIonBlur={() => markTouched()}
+    ></IonInput>
   );
 }
 export default Example;
diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md
new file mode 100644
index 00000000000..33934b31ae2
--- /dev/null
+++ b/static/usage/v7/input/helper-error/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-input
+    ref="input"
+    type="email"
+    fill="solid"
+    label="Email"
+    label-placement="floating"
+    helper-text="Enter a valid email"
+    error-text="Invalid email"
+    @ionInput="validate"
+    @ionBlur="markTouched"
+  ></ion-input>
+</template>
+
+<script lang="ts">
+  import { IonInput } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput },
+    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.input.$el.classList.remove('ion-valid');
+        this.$refs.input.$el.classList.remove('ion-invalid');
+
+        if (value === '') return;
+
+        this.validateEmail(value)
+          ? this.$refs.input.$el.classList.add('ion-valid')
+          : this.$refs.input.$el.classList.add('ion-invalid');
+      },
+
+      markTouched() {
+        this.$refs.input.$el.classList.add('ion-touched')
+      }
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/labels/angular.md b/static/usage/v7/input/labels/angular.md
index 9756b9c57cb..1257ff9c641 100644
--- a/static/usage/v7/input/labels/angular.md
+++ b/static/usage/v7/input/labels/angular.md
@@ -1,23 +1,19 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-label>Default label</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Default label" 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-input label="Fixed label" labelPlacement="fixed" 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-input label="Stacked label" labelPlacement="stacked" 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-input label="Floating label" labelPlacement="floating" 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
index ea089a533e8..da60ec5812d 100644
--- a/static/usage/v7/input/labels/demo.html
+++ b/static/usage/v7/input/labels/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-list {
@@ -23,23 +23,19 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-label>Default label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
+            <ion-input label="Default label" 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-input label="Fixed label" label-placement="fixed" 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-input label="Stacked label" label-placement="stacked" 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-input label="Floating label" label-placement="floating" placeholder="Enter text"></ion-input>
           </ion-item>
         </ion-list>
       </div>
@@ -47,4 +43,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/input/labels/javascript.md b/static/usage/v7/input/labels/javascript.md
index 9756b9c57cb..e08cf249e14 100644
--- a/static/usage/v7/input/labels/javascript.md
+++ b/static/usage/v7/input/labels/javascript.md
@@ -1,23 +1,19 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-label>Default label</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Default label" 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-input label="Fixed label" label-placement="fixed" 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-input label="Stacked label" label-placement="stacked" 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-input label="Floating label" label-placement="floating" 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
index 37a6bb8246b..59a819eaab4 100644
--- a/static/usage/v7/input/labels/react.md
+++ b/static/usage/v7/input/labels/react.md
@@ -1,28 +1,24 @@
 ```tsx
 import React from 'react';
-import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
 
 function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonLabel>Default label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Default label" placeholder="Enter text"></IonInput>
       </IonItem>
-
+      
       <IonItem>
-        <IonLabel position="fixed">Fixed label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></IonInput>
       </IonItem>
-
+      
       <IonItem>
-        <IonLabel position="stacked">Stacked label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></IonInput>
       </IonItem>
-
+      
       <IonItem>
-        <IonLabel position="floating">Floating label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Floating label" labelPlacement="floating" placeholder="Enter text"></IonInput>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v7/input/labels/vue.md b/static/usage/v7/input/labels/vue.md
index fae061af85f..782e77971c6 100644
--- a/static/usage/v7/input/labels/vue.md
+++ b/static/usage/v7/input/labels/vue.md
@@ -2,33 +2,29 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-label>Default label</ion-label>
-      <ion-input placeholder="Enter text"></ion-input>
+      <ion-input label="Default label" 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-input label="Fixed label" label-placement="fixed" 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-input label="Stacked label" label-placement="stacked" 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-input label="Floating label" label-placement="floating" placeholder="Enter text"></ion-input>
     </ion-item>
   </ion-list>
 </template>
 
 <script lang="ts">
-  import { IonInput, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { IonInput, IonItem, IonList } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonInput, IonItem, IonLabel, IonList },
+    components: { IonInput, IonItem, IonList },
   });
 </script>
 ```
diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md
new file mode 100644
index 00000000000..6423ae78f24
--- /dev/null
+++ b/static/usage/v7/input/migration/index.md
@@ -0,0 +1,224 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````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
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-input label="Email:" label-placement="floating"></ion-input>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+
+<!-- Inputs using `fill` should not be placed in ion-item -->
+<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>
+
+<!-- Input-specific features on ion-item -->
+
+<!-- Before -->
+<ion-item counter="true">
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input maxlength="100"></ion-input>
+  <div slot="helper">Enter an email</div>
+  <div slot="error">Please enter a valid email</div>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-input
+    label="Email:"
+    counter="true"
+    maxlength="100"
+    helper-text="Enter an email"
+    error-text="Please enter a valid email"
+  ></ion-input>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-input label="Email:" labelPlacement="floating"></ion-input>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+
+<!-- Inputs using `fill` should not be placed in ion-item -->
+<ion-input fill="outline" shape="round" label="Email:" labelPlacement="floating"></ion-input>
+
+<!-- Input-specific features on ion-item -->
+
+<!-- Before -->
+<ion-item [counter]="true">
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input maxlength="100"></ion-input>
+  <div slot="helper">Enter an email</div>
+  <div slot="error">Please enter a valid email</div>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-input
+    label="Email:"
+    [counter]="true"
+    maxlength="100"
+    helperText="Enter an email"
+    errorText="Please enter a valid email"
+  ></ion-input>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel position="floating">Email:</IonLabel>
+  <IonInput></IonInput>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonInput label="Email:" labelPlacement="floating"></IonInput>
+</IonItem>
+
+
+{/* Fill */}
+
+{/* Before */}
+<IonItem fill="outline" shape="round">
+  <IonLabel position="floating">Email:</IonLabel>
+  <IonInput></IonInput>
+</IonItem>
+
+{/* After */}
+
+{/* Inputs using `fill` should not be placed in IonItem */}
+<IonInput fill="outline" shape="round" label="Email:" labelPlacement="floating"></IonInput>
+
+{/* Input-specific features on IonItem */}
+
+{/* Before */}
+<IonItem counter={true}>
+  <IonLabel position="floating">Email:</IonLabel>
+  <IonInput maxlength="100"></IonInput>
+  <div slot="helper">Enter an email</div>
+  <div slot="error">Please enter a valid email</div>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonInput
+    label="Email:"
+    counter={true}
+    maxlength="100"
+    helperText="Enter an email"
+    errorText="Please enter a valid email"
+  ></IonInput>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-input label="Email:" label-placement="floating"></ion-input>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+
+<!-- Inputs using `fill` should not be placed in ion-item -->
+<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>
+
+<!-- Input-specific features on ion-item -->
+
+<!-- Before -->
+<ion-item :counter="true">
+  <ion-label position="floating">Email:</ion-label>
+  <ion-input maxlength="100"></ion-input>
+  <div slot="helper">Enter an email</div>
+  <div slot="error">Please enter a valid email</div>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-input
+    label="Email:"
+    :counter="true"
+    maxlength="100"
+    helper-text="Enter an email"
+    error-text="Please enter a valid email"
+  ></ion-input>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
\ No newline at end of file
diff --git a/static/usage/v7/input/theming/colors/angular.md b/static/usage/v7/input/theming/colors/angular.md
index cc4a5b35ed5..88a63e9a102 100644
--- a/static/usage/v7/input/theming/colors/angular.md
+++ b/static/usage/v7/input/theming/colors/angular.md
@@ -1,11 +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>
+<ion-input aria-label="Primary input" color="primary" placeholder="Primary input"></ion-input>
+<ion-input aria-label="Secondary input" color="secondary" placeholder="Secondary input"></ion-input>
+<ion-input aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></ion-input>
+<ion-input aria-label="Success input" color="success" placeholder="Success input"></ion-input>
+<ion-input aria-label="Warning input" color="warning" placeholder="Warning input"></ion-input>
+<ion-input aria-label="Danger input" color="danger" placeholder="Danger input"></ion-input>
+<ion-input aria-label="Light input" color="light" placeholder="Light input"></ion-input>
+<ion-input aria-label="Medium input" color="medium" placeholder="Medium input"></ion-input>
+<ion-input aria-label="Dark 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
index c0c93908ac6..2dd95b0fea2 100644
--- a/static/usage/v7/input/theming/colors/demo.html
+++ b/static/usage/v7/input/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -27,18 +27,18 @@
   <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>
+        <ion-input aria-label="Primary input" color="primary" placeholder="Primary input"></ion-input>
+        <ion-input aria-label="Secondary input" color="secondary" placeholder="Secondary input"></ion-input>
+        <ion-input aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></ion-input>
+        <ion-input aria-label="Success input" color="success" placeholder="Success input"></ion-input>
+        <ion-input aria-label="Warning input" color="warning" placeholder="Warning input"></ion-input>
+        <ion-input aria-label="Danger input" color="danger" placeholder="Danger input"></ion-input>
+        <ion-input aria-label="Light input" color="light" placeholder="Light input"></ion-input>
+        <ion-input aria-label="Medium input" color="medium" placeholder="Medium input"></ion-input>
+        <ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/input/theming/colors/javascript.md b/static/usage/v7/input/theming/colors/javascript.md
index cc4a5b35ed5..88a63e9a102 100644
--- a/static/usage/v7/input/theming/colors/javascript.md
+++ b/static/usage/v7/input/theming/colors/javascript.md
@@ -1,11 +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>
+<ion-input aria-label="Primary input" color="primary" placeholder="Primary input"></ion-input>
+<ion-input aria-label="Secondary input" color="secondary" placeholder="Secondary input"></ion-input>
+<ion-input aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></ion-input>
+<ion-input aria-label="Success input" color="success" placeholder="Success input"></ion-input>
+<ion-input aria-label="Warning input" color="warning" placeholder="Warning input"></ion-input>
+<ion-input aria-label="Danger input" color="danger" placeholder="Danger input"></ion-input>
+<ion-input aria-label="Light input" color="light" placeholder="Light input"></ion-input>
+<ion-input aria-label="Medium input" color="medium" placeholder="Medium input"></ion-input>
+<ion-input aria-label="Dark 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
index d9697d40c34..7242cd393d6 100644
--- a/static/usage/v7/input/theming/colors/react.md
+++ b/static/usage/v7/input/theming/colors/react.md
@@ -5,15 +5,15 @@ 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>
+      <IonInput aria-label="Primary input" color="primary" placeholder="Primary input"></IonInput>
+      <IonInput aria-label="Secondary input" color="secondary" placeholder="Secondary input"></IonInput>
+      <IonInput aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></IonInput>
+      <IonInput aria-label="Success input" color="success" placeholder="Success input"></IonInput>
+      <IonInput aria-label="Warning input" color="warning" placeholder="Warning input"></IonInput>
+      <IonInput aria-label="Danger input" color="danger" placeholder="Danger input"></IonInput>
+      <IonInput aria-label="Light input" color="light" placeholder="Light input"></IonInput>
+      <IonInput aria-label="Medium input" color="medium" placeholder="Medium input"></IonInput>
+      <IonInput aria-label="Dark input" color="dark" placeholder="Dark input"></IonInput>
     </>
   );
 }
diff --git a/static/usage/v7/input/theming/colors/vue.md b/static/usage/v7/input/theming/colors/vue.md
index b6229c74c63..e9d3a4e0ef4 100644
--- a/static/usage/v7/input/theming/colors/vue.md
+++ b/static/usage/v7/input/theming/colors/vue.md
@@ -1,14 +1,14 @@
 ```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>
+  <ion-input aria-label="Primary input" color="primary" placeholder="Primary input"></ion-input>
+  <ion-input aria-label="Secondary input" color="secondary" placeholder="Secondary input"></ion-input>
+  <ion-input aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></ion-input>
+  <ion-input aria-label="Success input" color="success" placeholder="Success input"></ion-input>
+  <ion-input aria-label="Warning input" color="warning" placeholder="Warning input"></ion-input>
+  <ion-input aria-label="Danger input" color="danger" placeholder="Danger input"></ion-input>
+  <ion-input aria-label="Light input" color="light" placeholder="Light input"></ion-input>
+  <ion-input aria-label="Medium input" color="medium" placeholder="Medium input"></ion-input>
+  <ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
 </template>
 
 <script lang="ts">
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
index b0f2c5bff5a..ca162b750d8 100644
--- 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
@@ -1,3 +1,3 @@
 ```html
-<ion-input placeholder="Custom input" class="custom"></ion-input>
+<ion-input aria-label="Custom 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
index 4414ead7bf6..d092342cc5f 100644
--- a/static/usage/v7/input/theming/css-properties/demo.html
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -34,10 +34,10 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-input placeholder="Custom input" class="custom"></ion-input>
+        <ion-input aria-label="Custom input" placeholder="Custom input" class="custom"></ion-input>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md
index 3b406ede42f..21bb54b3804 100644
--- a/static/usage/v7/input/theming/css-properties/javascript.md
+++ b/static/usage/v7/input/theming/css-properties/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-input placeholder="Custom input" class="custom"></ion-input>
+<ion-input aria-label="Custom input" placeholder="Custom input" class="custom"></ion-input>
 
 <style>
   ion-input.custom {
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
index e4ec0fb134a..242fb5e7751 100644
--- a/static/usage/v7/input/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/input/theming/css-properties/react/main_tsx.md
@@ -6,7 +6,7 @@ import './main.css';
 
 function Example() {
   return (
-    <IonInput placeholder="Custom input" class="custom"></IonInput>
+    <IonInput aria-label="Custom input" 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
index 6d5d5fa41cc..4b134a8b6d1 100644
--- a/static/usage/v7/input/theming/css-properties/vue.md
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-input placeholder="Custom input" class="custom"></ion-input>
+  <ion-input aria-label="Custom input" placeholder="Custom input" class="custom"></ion-input>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/input/types/angular.md b/static/usage/v7/input/types/angular.md
index 1c8ae75a5bc..6506b2ca271 100644
--- a/static/usage/v7/input/types/angular.md
+++ b/static/usage/v7/input/types/angular.md
@@ -1,28 +1,25 @@
 ```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>
+    <ion-item>
+      <ion-input label="Text input" placeholder="Enter text"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Number input" type="number" placeholder="000"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Password input" type="password" value="password"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
+    </ion-item>
+  </ion-list>
 </ion-list>
 ```
diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html
index 5955051f78f..bfa4a4035b3 100644
--- a/static/usage/v7/input/types/demo.html
+++ b/static/usage/v7/input/types/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-list {
@@ -23,28 +23,23 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-label>Text input</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
+            <ion-input label="Text 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-input label="Number 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-input label="Password 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-input label="Email 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-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
           </ion-item>
         </ion-list>
       </div>
@@ -52,4 +47,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/input/types/javascript.md b/static/usage/v7/input/types/javascript.md
index 1c8ae75a5bc..6506b2ca271 100644
--- a/static/usage/v7/input/types/javascript.md
+++ b/static/usage/v7/input/types/javascript.md
@@ -1,28 +1,25 @@
 ```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>
+    <ion-item>
+      <ion-input label="Text input" placeholder="Enter text"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Number input" type="number" placeholder="000"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Password input" type="password" value="password"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
+    </ion-item>
+  </ion-list>
 </ion-list>
 ```
diff --git a/static/usage/v7/input/types/react.md b/static/usage/v7/input/types/react.md
index 8ee7ad7044d..7a90e30e81a 100644
--- a/static/usage/v7/input/types/react.md
+++ b/static/usage/v7/input/types/react.md
@@ -1,33 +1,28 @@
 ```tsx
 import React from 'react';
-import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
 
 function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonLabel>Text input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Text input" placeholder="Enter text"></IonInput>
       </IonItem>
-
+    
       <IonItem>
-        <IonLabel>Number input</IonLabel>
-        <IonInput type="number" placeholder="000"></IonInput>
+        <IonInput label="Number input" type="number" placeholder="000"></IonInput>
       </IonItem>
-
+    
       <IonItem>
-        <IonLabel>Password input</IonLabel>
-        <IonInput type="password" value="password"></IonInput>
+        <IonInput label="Password input" type="password" value="password"></IonInput>
       </IonItem>
-
+    
       <IonItem>
-        <IonLabel>Email input</IonLabel>
-        <IonInput type="email" placeholder="email@domain.com"></IonInput>
+        <IonInput label="Email input" type="email" placeholder="email@domain.com"></IonInput>
       </IonItem>
-
+    
       <IonItem>
-        <IonLabel>Telephone input</IonLabel>
-        <IonInput type="tel" placeholder="888-888-8888"></IonInput>
+        <IonInput label="Telephone input" type="tel" placeholder="888-888-8888"></IonInput>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md
index 9f44a8e4ca5..2415bc71ea5 100644
--- a/static/usage/v7/input/types/vue.md
+++ b/static/usage/v7/input/types/vue.md
@@ -2,38 +2,33 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-label>Text input</ion-label>
-      <ion-input placeholder="Enter text"></ion-input>
+      <ion-input label="Text 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-input label="Number 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-input label="Password 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-input label="Email 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-input label="Telephone 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 { IonInput, IonItem, IonList } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonInput, IonItem, IonLabel, IonList },
+    components: { IonInput, IonItem, IonList },
   });
 </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
deleted file mode 100644
index 913d6644cfc..00000000000
--- a/static/usage/v7/item/counter/angular/example_component_html.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```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/demo.html b/static/usage/v7/item/counter/demo.html
deleted file mode 100644
index cb68d350bc2..00000000000
--- a/static/usage/v7/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>
\ No newline at end of file
diff --git a/static/usage/v7/item/counter/javascript.md b/static/usage/v7/item/counter/javascript.md
deleted file mode 100644
index 761f1819ef9..00000000000
--- a/static/usage/v7/item/counter/javascript.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```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
deleted file mode 100644
index 435701d5b53..00000000000
--- a/static/usage/v7/item/counter/react.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```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
deleted file mode 100644
index 3a97d40743a..00000000000
--- a/static/usage/v7/item/counter/vue.md
+++ /dev/null
@@ -1,27 +0,0 @@
-```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/helper-error/angular.md b/static/usage/v7/item/helper-error/angular.md
deleted file mode 100644
index 05959c95210..00000000000
--- a/static/usage/v7/item/helper-error/angular.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```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/vue.md b/static/usage/v7/item/helper-error/vue.md
deleted file mode 100644
index 0febb45cfe4..00000000000
--- a/static/usage/v7/item/helper-error/vue.md
+++ /dev/null
@@ -1,41 +0,0 @@
-```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>
-```

From b1bb1b7275f1bed13d5a879b762465cdd921e06e Mon Sep 17 00:00:00 2001
From: Nyll <52743522+NyllRE@users.noreply.github.com>
Date: Thu, 5 Jan 2023 17:02:36 +0300
Subject: [PATCH 148/469] docs(tabs): vue usage includes router outlet (#2685)

* Vue ion-router-outlet is missing, resulting in error

this isn't an edit about wrong stuff or not, but it's not clear why is it missing the ion-router-outlet while if I added it as-is it warns me of the lack of an ion router outlet. and it's confusing for why it's not referenced here. in addition to that it's not clear where should I add the tabs component and the schedule component etc

* docs(tabs): add router outlet imports to vue example
---
 docs/api/tabs.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index e12003025f7..61a5d964f5a 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -369,6 +369,8 @@ will match the following tab:
 <template>
   <ion-page>
     <ion-tabs @ionTabsWillChange="beforeTabChange" @ionTabsDidChange="afterTabChange">
+      <!-- https://ionicframework.com/docs/vue/navigation#working-with-tabs -->
+      <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom">
         <ion-tab-button tab="schedule" href="/tabs/schedule">
           <ion-icon :icon="calendar"></ion-icon>
@@ -391,6 +393,7 @@ import {
   IonIcon, 
   IonLabel, 
   IonPage,
+  IonRouterOutlet,
   IonTabBar, 
   IonTabButton, 
   IonTabs
@@ -398,7 +401,7 @@ import {
 import { calendar, personCircle } from 'ionicons/icons';
 
 export default defineComponent({
-  components: { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs },
+  components: { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs },
   setup() {
     const beforeTabChange = () => {
       // do something before tab change
@@ -497,4 +500,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From d147060ab7a1426355b2fc290bbc954fec9df35a Mon Sep 17 00:00:00 2001
From: Mike Hartington <mhartington@users.noreply.github.com>
Date: Thu, 5 Jan 2023 10:18:21 -0500
Subject: [PATCH 149/469] migrate native docs to use capacitor (#2684)

* migrate native docs to use capacitor

* test build fix

* fix native build
---
 docs/native-community.md                      | 200 ----------------
 docs/native-faq.md                            |  82 +------
 docs/native-setup.md                          | 146 ++++++++++++
 docs/native.md                                |  29 +--
 docusaurus.config.js                          |   2 +-
 package-lock.json                             |   9 +-
 scripts/native.js                             | 221 +++++++-----------
 sidebars.js                                   |   7 +-
 .../NativeEnterpriseCard/index.module.scss    |   4 +-
 .../native/NativeEnterpriseCard/index.tsx     |   6 +-
 10 files changed, 258 insertions(+), 448 deletions(-)
 delete mode 100644 docs/native-community.md
 create mode 100644 docs/native-setup.md

diff --git a/docs/native-community.md b/docs/native-community.md
deleted file mode 100644
index 0bd759f18e8..00000000000
--- a/docs/native-community.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-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/docs/native-faq.md b/docs/native-faq.md
index 80cb5b1ae89..ceaf06b6d38 100644
--- a/docs/native-faq.md
+++ b/docs/native-faq.md
@@ -3,83 +3,23 @@ sidebar_label: FAQ
 slug: /native/faq
 ---
 
-# Ionic Native FAQ
+# Frequently Asked Question
 
-## Cordova Management Tips
+## What is Capacitor? 
 
-**1) Use the [Ionic CLI](cli.md) to add/update/delete plugins.**
+Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. 
 
-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`).
+## Permission Issues
 
-**2) Upgrade plugins by removing, then re-adding them.**
+If you're using a plugin, it may require adding additional permissions to your native project after you install the plugin. For instance, the Capacitor Camera plugin requires the following permission for iOS:
 
-```shell
-$ ionic cordova plugin remove cordova-plugin-camera
-$ ionic cordova plugin add cordova-plugin-camera
-```
+- `NSCameraUsageDescription` (`Privacy - Camera Usage Description`)
+- `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
+- `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
 
-**3) Install explicit versions.**
+You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. 
 
-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
-```
+## Unexpected behaviour
 
-**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?
+If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
\ No newline at end of file
diff --git a/docs/native-setup.md b/docs/native-setup.md
new file mode 100644
index 00000000000..30a8ac5c0fc
--- /dev/null
+++ b/docs/native-setup.md
@@ -0,0 +1,146 @@
+---
+title: Capacitor Plugins
+sidebar_label: Setup
+hide_table_of_contents: true
+slug: /native/setup
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Capacitor Plugins | Capacitor Core Plugins for Ionic Apps</title>
+  <meta
+    name="description"
+    content="Capacitor offers a collection APIs that make adding native functionality to your Ionic app as simple as using any JavaScript library."
+  />
+  <style>{`
+    :root {
+      --doc-item-container-width: 60rem;
+    }
+  `}</style>
+</head>
+
+Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project.
+<intro-end />
+
+## Install
+
+To install a plugin, find the plugin you want to use and install it using your package manager, like npm:
+
+```shell
+# Install the Capacitor Plugins
+$ npm install @capacitor/camera
+```
+
+## Usage
+
+Once installed, plugins can be imported into a component and you can call the native functionality directly from your code.
+
+Using the [Camera plugin](native/camera.md) as an example, first install it:
+
+````mdx-code-block
+<Tabs
+  groupId="runtime"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'react', label: 'React' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+import { Camera, CameraResultType } from '@capacitor/camera';
+
+const takePicture = async () => {
+  const image = await Camera.getPhoto({
+    quality: 90,
+    allowEditing: true,
+    resultType: CameraResultType.Uri
+  });
+  const imageUrl = image.webPath;
+  imageElement.src = imageUrl;
+};
+```
+
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+import { Component } from '@angular/core';
+import { Camera, CameraResultType } from '@capacitor/camera';
+
+@Component({...})
+export class CameraComponent{
+  public imageSrc = '';
+
+  async takePicture() {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri
+    });
+    const imageUrl = image.webPath;
+    this.imageSrc = imageUrl;
+  };
+
+}
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```typescript
+
+<template>
+...
+</template>
+
+<script setup lang="typescript">
+import { ref } from 'vue';
+import { Camera, CameraResultType } from '@capacitor/camera';
+const imageSrc = ref('');
+
+const takePicture = async () => {
+  const image = await Camera.getPhoto({
+    quality: 90,
+    allowEditing: true,
+    resultType: CameraResultType.Uri
+  });
+  const imageUrl = image.webPath;
+  imageSrc.value = imageUrl;
+};
+
+</script>
+
+```
+
+</TabItem>
+<TabItem value="react">
+
+```javascript
+import { Camera, CameraResultType } from '@capacitor/camera';
+import { useState } from 'react';
+
+export function CameraComponent() {
+  const [imageSrc, setImageSrc] = usetState('');
+
+  const takePicture = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri
+    });
+    const imageUrl = image.webPath;
+    setImageSrc(imageUrl);
+  };
+  return (...)
+}
+```
+
+</TabItem>
+</Tabs>
+````
diff --git a/docs/native.md b/docs/native.md
index 1c5efecb489..f17ba591bf7 100644
--- a/docs/native.md
+++ b/docs/native.md
@@ -1,5 +1,5 @@
 ---
-title: Native APIs
+title: Capacitor
 hide_table_of_contents: true
 ---
 
@@ -21,33 +21,16 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
   `}</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.
+Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install of the core packages and add them to your project with ease. Capacitor offers a wide range of features and capabilities that developers can use to access features like the file system, native location services, or the device camera. All of this is powered by a unified TypeScript API that handled platform differences automatically. 
+
+While the core features of Capacitor are free and open source, some enterprises might find them selves needing more features or custom third-party integrations. If you find yourself needing these additional features, checkout [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
+
 
-:::
 
-<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/).
-:::
+> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) 
\ No newline at end of file
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4e94c18df89..367494c195b 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -274,7 +274,7 @@ module.exports = {
             )}.ts`;
           }
           if ((match = docPath.match(/native\/(.*)\.md/)) != null) {
-            return `https://github.com/ionic-team/ionic-native/edit/master/src/@awesome-cordova-plugins/plugins/${match[1]}/index.ts`;
+            return `https://github.com/ionic-team/capacitor-plugins/edit/main/${match[1]}/README.md`;
           }
           return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`;
         },
diff --git a/package-lock.json b/package-lock.json
index 235bfd45a15..80d09305544 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8733,8 +8733,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "2.2.3",
-      "license": "MIT",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "engines": {
         "node": ">=8.6"
       },
@@ -18257,7 +18258,9 @@
       "version": "1.0.0"
     },
     "picomatch": {
-      "version": "2.2.3"
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pify": {
       "version": "4.0.1"
diff --git a/scripts/native.js b/scripts/native.js
index 3be42be73f5..5470930d839 100644
--- a/scripts/native.js
+++ b/scripts/native.js
@@ -1,164 +1,105 @@
 const fs = require('fs');
-const nativeJSON = require('./data/native.json');
-const utils = require('./utils.js');
-const { native: nativeOverrides } = require('./data/meta-override.json');
-
-// Filter out some plugins
-const filteredPlugins = [
-  '@awesome-cordova-plugins/android-fingerprint-auth',
-  '@awesome-cordova-plugins/fingerprint-aio',
-  '@awesome-cordova-plugins/app-center-shared',
-  '@awesome-cordova-plugins/app-update',
-  '@awesome-cordova-plugins/hot-code-push',
-  '@awesome-cordova-plugins/in-app-update',
-  '@awesome-cordova-plugins/checkout',
-  '@awesome-cordova-plugins/secure-storage-echo',
-  '@awesome-cordova-plugins/secure-storage',
-  '@awesome-cordova-plugins/admob-pro',
-  '@awesome-cordova-plugins/approov-advanced-http'
+const fetch = require('node-fetch');
+
+const API_DIR = './docs/native/';
+
+
+// replace with latest once it's relased
+const tag = 'latest';
+
+const pluginApis = [
+  'action-sheet',
+  'app',
+  'app-launcher',
+  'browser',
+  'camera',
+  'clipboard',
+  'device',
+  'dialog',
+  'filesystem',
+  'geolocation',
+  'google-maps',
+  'haptics',
+  'keyboard',
+  'local-notifications',
+  'motion',
+  'network',
+  'preferences',
+  'push-notifications',
+  'screen-reader',
+  'share',
+  'splash-screen',
+  'status-bar',
+  'text-zoom',
+  'toast',
 ];
 
-let plugins = nativeJSON.filter((plugin) => !filteredPlugins.includes(plugin.packageName));
-const data = fs.writeFileSync('./scripts/data/native.json', JSON.stringify(plugins, null, 2));
-
-(async function () {
-  // console.log(cliJSON);
-
-  plugins.map(writePage);
-})();
-
-function writePage(page) {
-  const data = [
-    renderFrontmatter(page),
-    renderImports(page),
-    renderIntro(page),
-    renderSalesCTA(page),
-    renderInstallation(page),
-    renderSupportedPlatforms(page),
-    renderCapIncompat(page),
-    renderUsage(page),
-  ].join('');
-
-  const path = `docs/native/${page.packageName.replace('@awesome-cordova-plugins/', '')}.md`;
-  fs.writeFileSync(path, data);
+async function buildPluginApiDocs(pluginId) {
+  const [readme, pkgJson] = await Promise.all([getReadme(pluginId), getPkgJsonData(pluginId)]);
+
+  const apiContent = createApiPage(pluginId, readme, pkgJson);
+  const fileName = `${pluginId}.md`;
+  const filePath = `${API_DIR}${fileName}`
+  fs.writeFileSync(filePath, apiContent);
 }
 
-function renderFrontmatter({ displayName, packageName }) {
-  const slug = packageName.replace('@awesome-cordova-plugins/', '');
+function createApiPage(pluginId, readme, pkgJson) {
+  const title = `${toTitleCase(pluginId)} Capacitor Plugin API`;
+  const desc = pkgJson.description ? pkgJson.description.replace(/\n/g, ' ') : title;
+  const editUrl = `https://github.com/ionic-team/capacitor-plugins/blob/main/${pluginId}/README.md`;
+  const editApiUrl = `https://github.com/ionic-team/capacitor-plugins/blob/main/${pluginId}/src/definitions.ts`;
+  const sidebarLabel = toTitleCase(pluginId);
 
-  const frontmatter = {
-    title: displayName,
-  };
+  // removes JSDoc HTML comments as they break docusauurs
+  readme = readme.replaceAll(/<!--.*-->/g, '');
 
-  return `---
-${Object.entries(frontmatter)
-  .map(([key, value]) => `${key}: ${typeof value === 'string' ? `"${value.replace('"', '\\"')}"` : value}`)
-  .join('\n')}
+  return `
+---
+title: ${title}
+description: ${desc}
+editUrl: ${editUrl}
+editApiUrl: ${editApiUrl}
+sidebar_label: ${sidebarLabel}
 ---
-${utils.getHeadTag(nativeOverrides[slug])}
-`;
+${readme}`.trim();
 }
 
-function renderImports({}) {
-  return `
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-`;
+async function getReadme(pluginId) {
+  const url = `https://cdn.jsdelivr.net/npm/@capacitor/${pluginId}@${tag}/README.md`;
+  const rsp = await fetch(url);
+  return rsp.text();
 }
 
-function renderIntro({ description, repo }) {
-  return `
-${description}
-
-<p><a href="${repo}" target="_blank" rel="noopener" className="git-link">
-  ${utils.gitBranchSVG()} ${repo}
-</a></p>
-`;
+async function getPkgJsonData(pluginId) {
+  const url = `https://cdn.jsdelivr.net/npm/@capacitor/${pluginId}@${tag}/package.json`;
+  const rsp = await fetch(url);
+  return rsp.json();
 }
 
-function renderSalesCTA({}) {
-  return `
-<h2>Stuck on a Cordova issue?</h2>
-<DocsCard className="cordova-ee-card" header="Don't waste precious time on plugin issues." href="https://ionicframework.com/sales?product_of_interest=Ionic%20Native">
-  <div>
-    <img src="/docs/icons/native-cordova-bot.png" class="cordova-ee-img" />
-    <p>If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.</p>
-    <DocsButton className="native-ee-detail">Contact Us Today!</DocsButton>
-  </div>
-</DocsCard>
-
-`;
+async function main() {
+  await Promise.all(pluginApis.map(buildPluginApiDocs));
+  console.log(`Plugin API Files Updated 🎸`);
 }
 
-function renderInstallation({ cordovaPlugin, packageName }) {
-  return `
-<h2 id="installation">
-  <a href="#installation">Installation</a>
-</h2>
-<Tabs defaultValue="Capacitor" groupId="runtime" values={[
-  {value: 'Capacitor', label: 'Capacitor'},
-  {value: 'Cordova', label: 'Cordova'},
-  {value: 'Enterprise', label: 'Enterprise'},
-]}>
-  <TabItem value="Capacitor">
-    <CodeBlock className="language-shell">
-      $ npm install ${cordovaPlugin.name} {"\\n"}
-      $ npm install ${packageName} {"\\n"}
-      $ ionic cap sync
-    </CodeBlock>
-  </TabItem>
-  <TabItem value="Cordova">
-    <CodeBlock className="language-shell">
-      $ ionic cordova plugin add ${cordovaPlugin.name} {"\\n"}
-      $ npm install ${packageName} {"\\n"}
-    </CodeBlock>
-  </TabItem>
-  <TabItem value="Enterprise">
-    <blockquote>Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. &nbsp;
-      <a class="btn" href="https://ionic.io/docs/premier-plugins">Learn More</a> or if you're interested in an enterprise version of this plugin <a class="btn" href="https://ionicframework.com/sales?product_of_interest=Ionic%20Enterprise%20Engine">Contact Us</a></blockquote>
-  </TabItem>
-</Tabs>
-`;
+function toTitleCase(str) {
+  return str.replace(/(^\w|-\w)/g, (s) => {
+    return s.replace(/-/, ' ').toUpperCase();
+  });
 }
 
-function renderSupportedPlatforms({ platforms }) {
-  return `
-## Supported Platforms
+if (!String.prototype.replaceAll) {
+	String.prototype.replaceAll = function(str, newStr){
 
-${platforms.map((platform) => `- ${platform}`).join('\n')}
-`;
-}
+		// If a regex pattern
+		if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+			return this.replace(str, newStr);
+		}
 
-function renderCapIncompat({ capacitorIncompatible }) {
-  if (!capacitorIncompatible) {
-    return null;
-  }
+		// If a string
+		return this.replace(new RegExp(str, 'g'), newStr);
 
-  return `
-## Capacitor
-
-Not Compatible
-`;
+	};
 }
 
-function renderUsage({ usage }) {
-  if (!usage) {
-    return null;
-  }
-
-  return `
-## Usage
-
-### React
+main();
 
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-
-### Angular
-
-${usage.replace(/</g, '&lt;')}
-`;
-}
diff --git a/sidebars.js b/sidebars.js
index 999612d8c1e..0802f3a15b7 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -529,13 +529,8 @@ module.exports = {
       collapsed: false,
       items: [
         'native',
-        'native-community',
+        'native-setup',
         'native-faq',
-        {
-          type: 'link',
-          label: 'Community vs. Enterprise',
-          href: 'https://ionic.io/docs/premier-plugins',
-        },
       ],
     },
     {
diff --git a/src/components/page/native/NativeEnterpriseCard/index.module.scss b/src/components/page/native/NativeEnterpriseCard/index.module.scss
index a97390b222c..46db6241d58 100644
--- a/src/components/page/native/NativeEnterpriseCard/index.module.scss
+++ b/src/components/page/native/NativeEnterpriseCard/index.module.scss
@@ -77,6 +77,8 @@
 
   transition: transform 150ms ease, box-shadow 150ms ease;
 
+  height: 150px;
+
   @media (max-width: 767px) {
     flex-direction: column;
 
@@ -100,7 +102,7 @@
 
   :global {
     .heading-group {
-      padding: 2rem;
+      padding-right: 2rem;
       padding-left: 3rem;
     }
 
diff --git a/src/components/page/native/NativeEnterpriseCard/index.tsx b/src/components/page/native/NativeEnterpriseCard/index.tsx
index 75742e93c5c..28bfe3371e9 100644
--- a/src/components/page/native/NativeEnterpriseCard/index.tsx
+++ b/src/components/page/native/NativeEnterpriseCard/index.tsx
@@ -6,15 +6,15 @@ import styles from './index.module.scss';
 
 export default function NativeEnterpriseCard(props) {
   return (
-    <a className={clsx(props.className, styles.nativeEnterprise)} href="https://ionicframework.com/native">
+    <a className={clsx(props.className, styles.nativeEnterprise)} href="https://ionic.io/enterprise-sdk" target="_blank">
       <div className="image-wrapper">
         <img src={useBaseUrl('/img/native/native-enterprise@2x.png')} width="476" height="228" />
       </div>
 
       <div className="heading-group">
-        <header>Ionic Native Enterprise Edition</header>
+        <header>Ionic Enterprise SDK</header>
         <p>
-          Premium, supported Capacitor and Cordova plugins, third-party integrations, and pre-built native solutions for
+          Premium, supported plugins, third-party integrations, and pre-built native solutions for
           building enterprise-grade apps.
         </p>
       </div>

From 828dcf734e17cd73f554c7905e5944e7cc6ae3a8 Mon Sep 17 00:00:00 2001
From: Damian Tarnawsky <84595830+dtarnawsky@users.noreply.github.com>
Date: Fri, 6 Jan 2023 08:55:15 -0800
Subject: [PATCH 150/469] docs(live reload): include SSL and remove closed
 issues (#2687)

---
 docs/cli/livereload.md | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md
index d43ea298b02..23703954a9e 100644
--- a/docs/cli/livereload.md
+++ b/docs/cli/livereload.md
@@ -1,6 +1,6 @@
 # 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.
+Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
@@ -8,15 +8,13 @@ Live Reload is a conflated term. With `ionic serve`, Live Reload just refers to
 
 ## 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.
+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.
+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 IP address for the dev server using the `--external` flag.
 
 ```shell
 $ ionic capacitor run ios -l --external
@@ -43,10 +41,6 @@ ionic cordova run android -l
 
 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:
@@ -64,3 +58,14 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 - 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.
+
+### Using SSL
+
+Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS.
+
+For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:
+```shell
+ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
+```
+
+Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
\ No newline at end of file

From 0cf18e18398218772f5bac01e57938c24817d5af Mon Sep 17 00:00:00 2001
From: r-yanyo <honma.ryosuke@gmail.com>
Date: Sat, 7 Jan 2023 15:40:14 +0900
Subject: [PATCH 151/469] fix typo

---
 docs/core-concepts/webview.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md
index e888d749889..9a1344cc5af 100644
--- a/docs/core-concepts/webview.md
+++ b/docs/core-concepts/webview.md
@@ -24,7 +24,7 @@ Ionicアプリは[Web技術](../reference/glossary.md#web-standards)をつかっ
 
 ![webview architecture](/img/building/webview-architecture.png)
 
-Ionic Web Viewプラグインは、最新のJavaScriptアプリケーションに特化しています。iOSとAndroidの両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化されたHTTPサーバーしてホストされます。
+Ionic Web Viewプラグインは、最新のJavaScriptアプリケーションに特化しています。iOSとAndroidの両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化されたHTTPサーバーにホストされます。
 
 ### CORS
 
@@ -32,7 +32,7 @@ Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that
 
 ### Fileプロトコル
 
-CordovaとCapacitorのアプリはローカルのHTTPサーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルのHTTPサーバに書き換える必要がありあす。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
+CordovaとCapacitorのアプリはローカルのHTTPサーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルのHTTPサーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
 
 Capacitorアプリの場合、URIはこのように変換します。
 

From 36e4820f7e46a358df4ace29ef6efd420bfc9c27 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 9 Jan 2023 14:22:19 -0500
Subject: [PATCH 152/469] docs(tabs): icons are hidden in usage examples
 (#2691)

---
 docs/api/tab-button.md | 42 +++++++++++++++++++++---------------------
 docs/api/tabs.md       | 38 +++++++++++++++++++-------------------
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index 4c6b7a26f3d..d9410648161 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -46,22 +46,22 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
   <!-- Tab bar -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule">
-      <ion-icon name="calendar"></ion-icon>
+      <ion-icon name="calendar" aria-hidden="true"></ion-icon>
       <ion-label>Schedule</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="speakers">
-      <ion-icon name="person-circle"></ion-icon>
+      <ion-icon name="person-circle" aria-hidden="true"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="map">
-      <ion-icon name="map"></ion-icon>
+      <ion-icon name="map" aria-hidden="true"></ion-icon>
       <ion-label>Map</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="about">
-      <ion-icon name="information-circle"></ion-icon>
+      <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
@@ -96,22 +96,22 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
   <!-- Tab bar -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
-      <ion-icon name="calendar"></ion-icon>
+      <ion-icon name="calendar" aria-hidden="true"></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-icon name="person-circle" aria-hidden="true"></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-icon name="map" aria-hidden="true"></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-icon name="information-circle" aria-hidden="true"></ion-icon>
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
@@ -135,22 +135,22 @@ export const TabButtonExample: React.FC = () => (
       {/*-- Tab bar --*/}
       <IonTabBar slot="bottom">
         <IonTabButton tab="schedule">
-          <IonIcon icon={calendar} />
+          <IonIcon icon={calendar} aria-hidden="true" />
           <IonLabel>Schedule</IonLabel>
         </IonTabButton>
 
         <IonTabButton tab="speakers">
-          <IonIcon icon={personCircle} />
+          <IonIcon icon={personCircle} aria-hidden="true" />
           <IonLabel>Speakers</IonLabel>
         </IonTabButton>
 
         <IonTabButton tab="map">
-          <IonIcon icon={map} />
+          <IonIcon icon={map} aria-hidden="true" />
           <IonLabel>Map</IonLabel>
         </IonTabButton>
 
         <IonTabButton tab="about">
-          <IonIcon icon={informationCircle} />
+          <IonIcon icon={informationCircle} aria-hidden="true" />
           <IonLabel>About</IonLabel>
         </IonTabButton>
       </IonTabBar>
@@ -196,22 +196,22 @@ export class TabButtonExample {
         {/* Tab bar */}
         <ion-tab-bar slot="bottom">
           <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
-            <ion-icon name="calendar"></ion-icon>
+            <ion-icon name="calendar" aria-hidden="true"></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-icon name="person-circle" aria-hidden="true"></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-icon name="map" aria-hidden="true"></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-icon name="information-circle" aria-hidden="true"></ion-icon>
             <ion-label>About</ion-label>
           </ion-tab-button>
         </ion-tab-bar>
@@ -233,22 +233,22 @@ export class TabButtonExample {
     <!-- Tab bar -->
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="schedule" href="/tabs/schedule">
-        <ion-icon :icon="calendar"></ion-icon>
+        <ion-icon :icon="calendar" aria-hidden="true"></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-icon :icon="person-circle" aria-hidden="true"></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-icon :icon="map" aria-hidden="true"></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-icon :icon="informationCircle" aria-hidden="true"></ion-icon>
         <ion-label>About</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
@@ -302,4 +302,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 61a5d964f5a..1c35fa16c92 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -68,23 +68,23 @@ interface TabsCustomEvent extends CustomEvent {
 <ion-tabs>
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule">
-      <ion-icon name="calendar"></ion-icon>
+      <ion-icon name="calendar" aria-hidden="true"></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-icon name="person-circle" aria-hidden="true"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="map">
-      <ion-icon name="map"></ion-icon>
+      <ion-icon name="map" aria-hidden="true"></ion-icon>
       <ion-label>Map</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="about">
-      <ion-icon name="information-circle"></ion-icon>
+      <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
@@ -100,7 +100,7 @@ When used with Angular's router the `tab` property of the `ion-tab-button` shoul
 <ion-tabs>
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule">
-      <ion-icon name="calendar"></ion-icon>
+      <ion-icon name="calendar" aria-hidden="true"></ion-icon>
       <ion-label>Schedule</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
@@ -162,23 +162,23 @@ const routes: Routes = [
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab-schedule">
-      <ion-icon name="calendar"></ion-icon>
+      <ion-icon name="calendar" aria-hidden="true"></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-icon name="person-circle" aria-hidden="true"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab-map">
-      <ion-icon name="map"></ion-icon>
+      <ion-icon name="map" aria-hidden="true"></ion-icon>
       <ion-label>Map</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab-about">
-      <ion-icon name="information-circle"></ion-icon>
+      <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
@@ -237,23 +237,23 @@ export const TabsExample: React.FC = () => (
   <IonTabs>
     <IonTabBar slot="bottom">
       <IonTabButton tab="schedule">
-        <IonIcon icon={calendar} />
+        <IonIcon icon={calendar} aria-hidden="true" />
         <IonLabel>Schedule</IonLabel>
         <IonBadge>6</IonBadge>
       </IonTabButton>
 
       <IonTabButton tab="speakers">
-        <IonIcon icon={personCircle} />
+        <IonIcon icon={personCircle} aria-hidden="true" />
         <IonLabel>Speakers</IonLabel>
       </IonTabButton>
 
       <IonTabButton tab="map">
-        <IonIcon icon={map} />
+        <IonIcon icon={map} aria-hidden="true" />
         <IonLabel>Map</IonLabel>
       </IonTabButton>
 
       <IonTabButton tab="about">
-        <IonIcon icon={informationCircle} />
+        <IonIcon icon={informationCircle} aria-hidden="true" />
         <IonLabel>About</IonLabel>
       </IonTabButton>
     </IonTabBar>
@@ -296,23 +296,23 @@ export class TabsExample {
 
       <ion-tab-bar slot="bottom">
         <ion-tab-button tab="tab-schedule">
-          <ion-icon name="calendar"></ion-icon>
+          <ion-icon name="calendar" aria-hidden="true"></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-icon name="person-circle" aria-hidden="true"></ion-icon>
           <ion-label>Speakers</ion-label>
         </ion-tab-button>
 
         <ion-tab-button tab="tab-map">
-          <ion-icon name="map"></ion-icon>
+          <ion-icon name="map" aria-hidden="true"></ion-icon>
           <ion-label>Map</ion-label>
         </ion-tab-button>
 
         <ion-tab-button tab="tab-about">
-          <ion-icon name="information-circle"></ion-icon>
+          <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
           <ion-label>About</ion-label>
         </ion-tab-button>
       </ion-tab-bar>
@@ -373,13 +373,13 @@ will match the following tab:
       <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom">
         <ion-tab-button tab="schedule" href="/tabs/schedule">
-          <ion-icon :icon="calendar"></ion-icon>
+          <ion-icon :icon="calendar" aria-hidden="true"></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-icon :icon="personCircle" aria-hidden="true"></ion-icon>
           <ion-label>Speakers</ion-label>
         </ion-tab-button>
       </ion-tab-bar>

From 61ca7ec79677f0dfef58e8fa5e10cc53632e5a93 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 9 Jan 2023 14:28:23 -0500
Subject: [PATCH 153/469] docs(button): clarify display behavior for expand
 (#2693)

---
 docs/api/button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/button.md b/docs/api/button.md
index 28d6737e9d7..ec0748c82ee 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -27,7 +27,7 @@ import Basic from '@site/static/usage/button/basic/index.md';
 
 ## 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.
+This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`.
 
 import Expand from '@site/static/usage/button/expand/index.md';
 

From 8eae46cfd8d2ef84d07e8102d8e5612341d4306f Mon Sep 17 00:00:00 2001
From: Ken Sodemann <ken@ionic.io>
Date: Mon, 9 Jan 2023 18:31:27 -0600
Subject: [PATCH 154/469] docs(vue): bring the photo gallery app up to date
 (#2692)

---
 docs/vue/your-first-app.md                  | 51 ++---------------
 docs/vue/your-first-app/2-taking-photos.md  | 62 ++++++++-------------
 docs/vue/your-first-app/3-saving-photos.md  |  8 +--
 docs/vue/your-first-app/4-loading-photos.md |  4 +-
 docs/vue/your-first-app/5-adding-mobile.md  |  3 +-
 docs/vue/your-first-app/7-live-reload.md    | 21 +------
 6 files changed, 40 insertions(+), 109 deletions(-)

diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md
index ca3ad3dbd54..006d719f400 100644
--- a/docs/vue/your-first-app.md
+++ b/docs/vue/your-first-app.md
@@ -56,7 +56,7 @@ To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
 :::
 
 ```shell
-npm install -g @ionic/cli@latest native-run cordova-res
+npm install -g @ionic/cli@latest native-run
 ```
 
 :::note
@@ -70,7 +70,7 @@ Consider setting up npm to operate globally without elevated permissions. See [R
 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
+ionic start photo-gallery tabs --type vue
 ```
 
 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!
@@ -162,13 +162,13 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
 import ExploreContainer from '@/components/ExploreContainer.vue';
 ```
 
-Next, remove the component name (`ExploreContainer`) from the `components` list in the Default Export and the HTML:
+Next, remove the `ExploreContainer` node from the HTML markup in the `template`.
 
 ```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:
+We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the `<script setup>`  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';
@@ -188,36 +188,9 @@ import {
 } 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)):
+Since our pages are generated as [Vue Single File Components](https://vuejs.org/api/sfc-spec.html) using the [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html#script-setup) syntax these items are now exposed for use in our template.
 
-```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):
+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">
@@ -246,16 +219,4 @@ Within the tab bar (`<ion-tab-bar>`), change the label to "Photos" and the `elli
 </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/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
index 8fe97523339..ea83eea3cc3 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.md
@@ -16,7 +16,7 @@ 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
+```typescript
 import { ref, onMounted, watch } from 'vue';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
@@ -25,8 +25,8 @@ import { Preferences } from '@capacitor/preferences';
 
 Next, create a function named usePhotoGallery:
 
-```tsx
-export function usePhotoGallery() {
+```typescript
+export const usePhotoGallery = () => {
   const takePhoto = async () => {
     const photo = await Camera.getPhoto({
       resultType: CameraResultType.Uri,
@@ -45,40 +45,38 @@ Our `usePhotoGallery` function exposes a method called takePhoto, which in turn
 
 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:
+The last step we need to take is to use the new function from the Tab2 page. Go back to `Tab2Page.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:
+Destructure the `takePhoto` function from `usePhotoGallery` so we can use it in our `template`:
 
 ```tsx
-<script lang="ts">
+<script setup lang="ts">
+import {
+  IonContent,
+  IonCol,
+  IonFab,
+  IonFabButton,
+  IonGrid,
+  IonPage,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue';
 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
-    }
-  }
-}
+const { takePhoto } = usePhotoGallery();
 </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!
+Save the file. Start the development server via `ionic serve` if it is not already running. In your browser, 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)
 
@@ -97,13 +95,13 @@ export interface UserPhoto {
 }
 ```
 
-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).
+At the top of the `usePhotoGallery` function, 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:
+When the camera is done taking a picture, the resulting `Photo` returned from Capacitor will be added to the `photos` array. Update the `takePhoto` function, adding this code after the `Camera.getPhoto` line:
 
 ```tsx
 const fileName = new Date().getTime() + '.jpeg';
@@ -136,18 +134,6 @@ Then, get access to the photos array:
 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
diff --git a/docs/vue/your-first-app/3-saving-photos.md b/docs/vue/your-first-app/3-saving-photos.md
index 59b165ca9ab..429ae929645 100644
--- a/docs/vue/your-first-app/3-saving-photos.md
+++ b/docs/vue/your-first-app/3-saving-photos.md
@@ -8,9 +8,9 @@ We’re now able to take multiple photos and display them in a photo gallery on
 
 ## 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:
+Fortunately, saving them to the filesystem only takes a few steps. Begin by opening the `usePhotoGallery` function (`src/composables/usePhotoGallery.ts`).
 
-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:
+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) =>
@@ -30,12 +30,10 @@ Next we use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/fil
 
 ```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 base64Data = (await convertBlobToBase64(blob)) as string;
 
   const savedFile = await Filesystem.writeFile({
     path: fileName,
diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.md
index e5892ed65db..7cd07ef8794 100644
--- a/docs/vue/your-first-app/4-loading-photos.md
+++ b/docs/vue/your-first-app/4-loading-photos.md
@@ -54,13 +54,13 @@ const loadSaved = async () => {
 
 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:
+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). Earlier we had already imported `onMounted` from Vue:
 
 ```tsx
 import { ref, onMounted, watch } from 'vue';
 ```
 
-Then, within the `usePhotoGallery` function, add the `onMounted` function and call `loadSaved`:
+Within the `usePhotoGallery` function, add the `onMounted` function and call `loadSaved`:
 
 ```tsx
 onMounted(loadSaved);
diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.md
index 728e1ffb83c..4253e239d94 100644
--- a/docs/vue/your-first-app/5-adding-mobile.md
+++ b/docs/vue/your-first-app/5-adding-mobile.md
@@ -6,10 +6,11 @@ Let’s start with making some small code changes - then our app will "just work
 
 ## 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:
+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 and `Capacitor` from Capacitor's `core` package:
 
 ```tsx
 import { isPlatform } from '@ionic/vue';
+import { Capacitor } from '@capacitor/core';
 ```
 
 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.
diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.md
index a76c6e6622e..9c0cb476b80 100644
--- a/docs/vue/your-first-app/7-live-reload.md
+++ b/docs/vue/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## 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:
+With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2Page.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 {
@@ -50,9 +50,7 @@ import {
 Next, reference the `deletePhoto` function, which we'll create soon:
 
 ```tsx
-setup() {}
-  const { photos, takePhoto, deletePhoto } = usePhotoGallery();
-}
+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:
@@ -61,7 +59,7 @@ When a user clicks/taps on an image, we will show the action sheet. Add a click
 <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:
+Next, within `script 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) => {
@@ -90,19 +88,6 @@ const showActionSheet = async (photo: UserPhoto) => {
 };
 ```
 
-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

From bcc3db7e9470b3760b73749cec136ca37506b5c6 Mon Sep 17 00:00:00 2001
From: Damian Tarnawsky <84595830+dtarnawsky@users.noreply.github.com>
Date: Tue, 10 Jan 2023 09:32:35 -0800
Subject: [PATCH 155/469] fix(cli): Handle deprecated commands, replace tables
 with formatting similar to Capacitor CLI docs (#2697)

---
 scripts/cli.js        | 62 ++++++++++++++++--------------------------
 scripts/data/cli.json | 63 +++++++++----------------------------------
 scripts/utils.js      | 58 +++++++++++++++++++++++----------------
 3 files changed, 71 insertions(+), 112 deletions(-)

diff --git a/scripts/cli.js b/scripts/cli.js
index c604d477ee2..deefed3a59c 100644
--- a/scripts/cli.js
+++ b/scripts/cli.js
@@ -20,17 +20,17 @@ function writePage(page) {
   const data = [
     renderFrontmatter(page),
     renderIntro(page),
-    renderExamples(page),
     renderInputs(page),
     renderOptions(page),
     renderAdvancedOptions(page),
+    renderExamples(page),
   ].join('');
 
   const path = `docs/cli/commands/${commandToKebab(page.name)}.md`;
   fs.writeFileSync(path, data);
 }
 
-function renderFrontmatter({ name }) {
+function renderFrontmatter({ name, groups }) {
   const shortName = name.replace('ionic ', '');
   const slug = commandToKebab(shortName);
 
@@ -39,21 +39,37 @@ function renderFrontmatter({ name }) {
     sidebar_label: shortName,
   };
 
+  const deprecated = groups.includes('deprecated')
+    ? ':::warning\nThis command has been deprecated and will be removed in an upcoming major release of the Ionic CLI.\n:::'
+    : '';
+
   return `---
 ${Object.entries(frontmatter)
   .map(([key, value]) => `${key}: ${typeof value === 'string' ? `"${value.replace('"', '\\"')}"` : value}`)
   .join('\n')}
 ---
 ${utils.getHeadTag(cliOverrides[slug])}
+
+${deprecated}
 `;
 }
 
-function renderIntro({ description, summary, name }) {
+function renderIntro({ description, summary, name, options, inputs }) {
+  let args = '';
+  if (inputs && inputs.length > 0) {
+    for (let input of inputs) {
+      args += ` [${input.name}]`;
+    }
+  }
+  if (options && options.length > 0) {
+    args += ' [options]';
+  }
+
   return `
 ${summary}
 
 \`\`\`shell
-$ ${name} [options]
+$ ${name}${args}
 \`\`\`
 
 ${description}`;
@@ -78,15 +94,7 @@ function renderInputs({ inputs }) {
     return '';
   }
 
-  return `
-## Inputs
-
-${utils.renderReference(inputs, {
-  Head: (input) => input.name,
-  Description: (input) => utils.renderMarkdown(input.summary),
-})}
-
-`;
+  return utils.renderList('Inputs', inputs);
 }
 
 function renderOptions({ options }) {
@@ -95,19 +103,7 @@ function renderOptions({ options }) {
   if (options.length === 0) {
     return '';
   }
-
-  return `
-## Options
-
-${utils.renderReference(options, {
-  Head: (option) => utils.renderOptionSpec(option),
-  Description: (option) => utils.renderMarkdown(option.summary),
-  Aliases: (option) =>
-    option.aliases.length > 0 ? option.aliases.map((alias) => `<code>-${alias}</code>`).join(' ') : null,
-  Default: (option) => (option.default && option.type === 'string' ? option.default : null),
-})}
-
-`;
+  return utils.renderOptions('Options', options);
 }
 
 function renderAdvancedOptions({ options }) {
@@ -116,19 +112,7 @@ function renderAdvancedOptions({ options }) {
   if (options.length === 0) {
     return '';
   }
-
-  return `
-## Advanced Options
-
-${utils.renderReference(options, {
-  Head: (option) => utils.renderOptionSpec(option),
-  Description: (option) => `<div>${utils.renderMarkdown(option.summary)}</div>`,
-  Aliases: (option) =>
-    option.aliases.length > 0 ? option.aliases.map((alias) => `<code>-${alias}</code>`).join(' ') : null,
-  Default: (option) => (option.default && option.type === 'string' ? option.default : null),
-})}
-
-`;
+  return utils.renderOptions('Advanced Options', options);
 }
 
 // function renderProperties({ props: properties }) {
diff --git a/scripts/data/cli.json b/scripts/data/cli.json
index 56ab8ebe0f8..72f39a74b80 100644
--- a/scripts/data/cli.json
+++ b/scripts/data/cli.json
@@ -29,7 +29,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -150,7 +150,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -221,7 +221,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -409,7 +409,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -480,7 +480,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -815,7 +815,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -1068,7 +1068,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -1311,7 +1311,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -1559,7 +1559,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": ["advanced", "cordova"],
           "aliases": ["c"],
           "spec": {
@@ -1923,7 +1923,7 @@
       "summary": "Check the health of your Ionic project",
       "description": "This command detects and prints common issues and suggested steps to fix them.\n\nSome issues can be fixed automatically. See `ionic doctor treat --help`.\n\nOptionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.",
       "footnotes": [],
-      "groups": [],
+      "groups": ["deprecated"],
       "exampleCommands": ["ionic doctor check ", "ionic doctor check git-not-used"],
       "aliases": ["ionic doctor checkup", "ionic doctor validate"],
       "inputs": [
@@ -1942,7 +1942,7 @@
       "summary": "List all issues and their identifiers",
       "description": "Issues can have various tags:\n- **treatable**: `ionic doctor treat` can attempt to fix the issue\n- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`\n- **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`\n\nYou can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.",
       "footnotes": [],
-      "groups": [],
+      "groups": ["deprecated"],
       "exampleCommands": [],
       "aliases": ["ionic doctor ls"],
       "inputs": [],
@@ -1955,7 +1955,7 @@
       "summary": "Attempt to fix issues in your Ionic project",
       "description": "This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.\n\nOptionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.",
       "footnotes": [],
-      "groups": [],
+      "groups": ["deprecated"],
       "exampleCommands": ["ionic doctor treat ", "ionic doctor treat git-not-used"],
       "aliases": ["ionic doctor fix"],
       "inputs": [
@@ -2515,12 +2515,7 @@
       "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\nTry the `--lab` option to see multiple platforms at once.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
       "footnotes": [],
       "groups": [],
-      "exampleCommands": [
-        "ionic serve ",
-        "ionic serve --external",
-        "ionic serve --lab",
-        "ionic serve -- --proxy-config proxy.conf.json"
-      ],
+      "exampleCommands": ["ionic serve ", "ionic serve --external", "ionic serve -- --proxy-config proxy.conf.json"],
       "aliases": ["ionic s"],
       "inputs": [],
       "options": [
@@ -2637,28 +2632,6 @@
             "value": "true/false"
           }
         },
-        {
-          "name": "lab-host",
-          "type": "string",
-          "summary": "Use specific host for Ionic Lab server",
-          "default": "localhost",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "host"
-          }
-        },
-        {
-          "name": "lab-port",
-          "type": "string",
-          "summary": "Use specific port for Ionic Lab server",
-          "default": "8200",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "port"
-          }
-        },
         {
           "name": "open",
           "type": "boolean",
@@ -2689,16 +2662,6 @@
           "spec": {
             "value": "path"
           }
-        },
-        {
-          "name": "lab",
-          "type": "boolean",
-          "summary": "Test your apps on multiple platform types in the browser",
-          "groups": [],
-          "aliases": ["l"],
-          "spec": {
-            "value": "true/false"
-          }
         }
       ],
       "type": "project"
diff --git a/scripts/utils.js b/scripts/utils.js
index f31f50f2c53..4ca6ca4a115 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -10,48 +10,59 @@ function renderMarkdown(markdownString) {
 // https://github.com/ionic-team/ionic-docs/blob/master/src/components/reference/reference.tsx
 function renderReference(data, methodKeys) {
   return `
-<table className="reference-table">
+
   ${data
     .map((item) => {
       const { Head, ...keys } = methodKeys;
 
       return `
-      <thead>
-        <tr>
-          <th colSpan="2">
-            <h3>${Head(item)}</h3>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
+### ${Head(item)}
         ${Object.keys(keys)
           .map((name) => {
             const content = keys[name](item);
             if (content) {
               return `
-              <tr>
-                <th>${name}</th>
-                <td>${content}</td>
-              </tr>
+- \`${name}\`: ${content}
             `;
             }
           })
           .join(' ')}
-      </tbody>`;
+      `;
     })
     .join('')}
-</table>
 `;
 }
 
-// a String equivalent to this functional component
-// https://github.com/ionic-team/ionic-docs/blob/master/src/components/page/templates/cli.tsx#L146-L157
-function renderOptionSpec(option) {
+function renderList(title, data) {
   return `
-<a href="#option-${option.name}" id="option-${option.name}">
-  --${option.type === 'boolean' && option.default === true ? `no-${option.name}` : option.name}
-  ${option.type === 'string' ? `<span class="option-spec"> =&lt;${option.spec.value}&gt;</span>` : ''}
-</a>`.replace('\n', '');
+${data
+  .map((item) => {
+    return `
+### ${item.name}
+${item.summary}
+
+`;
+  })
+  .join('')}
+`;
+}
+
+function renderOptions(title, data) {
+  return `
+
+### ${title}
+${data
+  .map((item) => {
+    console.log(item);
+    const alias = item.aliases.length > 0 ? '(or ' + item.aliases.map((alias) => `\`-${alias}\``).join(' ') + ')' : '';
+    let name = item.type === 'boolean' && item.default === true ? `no-${item.name}` : item.name;
+    if (item.type === 'string') name += `=<${item.spec.value}>`;
+    return `
+ - \`--${name}\`: ${item.summary} ${alias}
+      `;
+  })
+  .join('')}
+`;
 }
 
 function gitBranchSVG() {
@@ -69,8 +80,9 @@ function getHeadTag({ title: metaTitle, description: metaDescription } = {}) {
 
 module.exports = {
   gitBranchSVG,
-  renderOptionSpec,
   renderMarkdown,
   renderReference,
+  renderOptions,
+  renderList,
   getHeadTag,
 };

From 2524ef9a9daa6375088980f555a4a84faa288d75 Mon Sep 17 00:00:00 2001
From: Damian Tarnawsky <84595830+dtarnawsky@users.noreply.github.com>
Date: Tue, 10 Jan 2023 13:41:08 -0800
Subject: [PATCH 156/469] fix(docs): Remove orphaned Ionic Studio page (#2700)

---
 docs/studio.md | 31 -------------------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 docs/studio.md

diff --git a/docs/studio.md b/docs/studio.md
deleted file mode 100644
index 10227880b2f..00000000000
--- a/docs/studio.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-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>

From abae085ae0b919616a14e91e950c5e8528a90cc6 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 12 Jan 2023 13:13:06 -0600
Subject: [PATCH 157/469] chore(modal, toast): remove unneeded controller
 imports (#2703)

---
 static/usage/v7/modal/performance/mount/demo.html             | 4 ----
 static/usage/v7/toast/buttons/angular/example_component_ts.md | 3 ---
 2 files changed, 7 deletions(-)

diff --git a/static/usage/v7/modal/performance/mount/demo.html b/static/usage/v7/modal/performance/mount/demo.html
index 03d47899733..fa84100fda3 100644
--- a/static/usage/v7/modal/performance/mount/demo.html
+++ b/static/usage/v7/modal/performance/mount/demo.html
@@ -9,10 +9,6 @@
   <script src="../../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/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>
diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md
index 19c8e6a7666..9adc2711591 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -1,6 +1,5 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -22,8 +21,6 @@ export class ExampleComponent {
   handlerMessage = '';
   roleMessage = '';
 
-  constructor(private toastController: ToastController) {}
-
   setRoleMessage(ev) {
     const { role } = ev.detail
     this.roleMessage = `Dismissed with role: ${role}`;

From b724b79981b7d34c41833b6ff8cce858e5d7dcc5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 17 Jan 2023 10:53:26 -0500
Subject: [PATCH 158/469] docs(loading): add accessibility section (#2694)

---
 docs/api/loading.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/api/loading.md b/docs/api/loading.md
index dbb4896bea4..b79554c5f4d 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -125,6 +125,13 @@ import Theming from '@site/static/usage/loading/theming/index.md';
  `ion-loading` is presented at the root of your application, so we recommend placing any `ion-loading` styles in a global stylesheet.
 :::
 
+## Accessibility
+  
+Ionic automatically sets Loading's `role` to [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role).
+
+If the `message` property is defined for Loading, then the `aria-labelledby` attribute will be automatically set to the message element's ID. Otherwise, `aria-labelledby` will not be set, and developers must provide an `aria-label` using the `htmlAttributes` property.
+  
+All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of Loading.
 
 ## Interfaces
 

From ddaff9bc38b66b3a6309c03d3eb358fda0ecc017 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 17 Jan 2023 12:13:46 -0500
Subject: [PATCH 159/469] docs(toggle): migrate playgrounds to new usage
 (#2698)

---
 docs/api/toggle.md                            |  49 +++++
 static/usage/v7/toggle/basic/angular.md       |  22 +-
 static/usage/v7/toggle/basic/demo.html        |  36 +---
 static/usage/v7/toggle/basic/index.md         |   2 +-
 static/usage/v7/toggle/basic/javascript.md    |  22 +-
 static/usage/v7/toggle/basic/react.md         |  26 +--
 static/usage/v7/toggle/basic/vue.md           |  26 +--
 static/usage/v7/toggle/justify/angular.md     |  13 ++
 static/usage/v7/toggle/justify/demo.html      |  38 ++++
 static/usage/v7/toggle/justify/index.md       |   8 +
 static/usage/v7/toggle/justify/javascript.md  |  13 ++
 static/usage/v7/toggle/justify/react.md       |  21 ++
 static/usage/v7/toggle/justify/vue.md         |  24 +++
 .../v7/toggle/label-placement/angular.md      |   5 +
 .../usage/v7/toggle/label-placement/demo.html |  28 +++
 .../usage/v7/toggle/label-placement/index.md  |   8 +
 .../v7/toggle/label-placement/javascript.md   |   5 +
 .../usage/v7/toggle/label-placement/react.md  |  15 ++
 static/usage/v7/toggle/label-placement/vue.md |  16 ++
 static/usage/v7/toggle/list/angular.md        |  13 ++
 static/usage/v7/toggle/list/demo.html         |  33 +++
 static/usage/v7/toggle/list/index.md          |   8 +
 static/usage/v7/toggle/list/javascript.md     |  13 ++
 static/usage/v7/toggle/list/react.md          |  21 ++
 static/usage/v7/toggle/list/vue.md            |  24 +++
 static/usage/v7/toggle/migration/index.md     | 188 ++++++++++++++++++
 static/usage/v7/toggle/on-off/angular.md      |   2 +-
 static/usage/v7/toggle/on-off/demo.html       |   8 +-
 static/usage/v7/toggle/on-off/javascript.md   |   2 +-
 static/usage/v7/toggle/on-off/react.md        |   2 +-
 static/usage/v7/toggle/on-off/vue.md          |   2 +-
 .../usage/v7/toggle/theming/colors/angular.md |  18 +-
 .../usage/v7/toggle/theming/colors/demo.html  |  24 +--
 .../v7/toggle/theming/colors/javascript.md    |  18 +-
 .../usage/v7/toggle/theming/colors/react.md   |  18 +-
 static/usage/v7/toggle/theming/colors/vue.md  |  18 +-
 .../angular/example_component_css.md          |  13 +-
 .../angular/example_component_html.md         |   4 +-
 .../toggle/theming/css-properties/demo.html   |  24 +--
 .../theming/css-properties/javascript.md      |  27 +--
 .../theming/css-properties/react/main_css.md  |  13 +-
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 .../v7/toggle/theming/css-properties/vue.md   |  27 +--
 .../angular/example_component_css.md          |  11 +-
 .../angular/example_component_html.md         |   4 +-
 .../toggle/theming/css-shadow-parts/demo.html |  21 +-
 .../theming/css-shadow-parts/javascript.md    |  21 +-
 .../css-shadow-parts/react/main_css.md        |  11 +-
 .../css-shadow-parts/react/main_tsx.md        |   4 +-
 .../v7/toggle/theming/css-shadow-parts/vue.md |  21 +-
 50 files changed, 737 insertions(+), 257 deletions(-)
 create mode 100644 static/usage/v7/toggle/justify/angular.md
 create mode 100644 static/usage/v7/toggle/justify/demo.html
 create mode 100644 static/usage/v7/toggle/justify/index.md
 create mode 100644 static/usage/v7/toggle/justify/javascript.md
 create mode 100644 static/usage/v7/toggle/justify/react.md
 create mode 100644 static/usage/v7/toggle/justify/vue.md
 create mode 100644 static/usage/v7/toggle/label-placement/angular.md
 create mode 100644 static/usage/v7/toggle/label-placement/demo.html
 create mode 100644 static/usage/v7/toggle/label-placement/index.md
 create mode 100644 static/usage/v7/toggle/label-placement/javascript.md
 create mode 100644 static/usage/v7/toggle/label-placement/react.md
 create mode 100644 static/usage/v7/toggle/label-placement/vue.md
 create mode 100644 static/usage/v7/toggle/list/angular.md
 create mode 100644 static/usage/v7/toggle/list/demo.html
 create mode 100644 static/usage/v7/toggle/list/index.md
 create mode 100644 static/usage/v7/toggle/list/javascript.md
 create mode 100644 static/usage/v7/toggle/list/react.md
 create mode 100644 static/usage/v7/toggle/list/vue.md
 create mode 100644 static/usage/v7/toggle/migration/index.md

diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index a7637d037c2..78119d191ae 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -36,6 +36,33 @@ import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
 <OnOff />
 
 
+## Toggles in a List
+
+Toggles can also be used in a list view by using the [Item](./item) and [List](./list) components.
+
+import List from '@site/static/usage/v7/toggle/list/index.md';
+
+<List />
+
+
+## Label Placement
+
+Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+
+import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.md';
+
+<LabelPlacement />
+
+
+## Justification
+
+Developers can use the `justify` property to control how the label and control are packed on a line.
+
+import Justify from '@site/static/usage/v7/toggle/justify/index.md';
+
+<Justify />
+
+
 ## Theming
 
 ### Colors
@@ -60,6 +87,28 @@ import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/inde
 
 <CSSParts />
 
+## Migrating from Legacy Toggle Syntax
+
+A simpler toggle syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an toggle, resolves accessibility issues, and improves the developer experience.
+
+While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+### Using the Modern Syntax
+
+Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-toggle`. The placement of the label can be configured using the `labelPlacement` property on `ion-toggle`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-toggle`.
+
+import Migration from '@site/static/usage/v7/toggle/migration/index.md';
+
+<Migration />
+  
+
+:::note
+In past versions of Ionic, `ion-item` was required for `ion-toggle` to function properly. Starting in Ionic 7.0, `ion-toggle` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-toggle` to function properly.
+:::
+
+### Using the Legacy Syntax
+
+Ionic uses heuristics to detect if an app is using the modern toggle syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-toggle` to `true` to force that instance of the toggle to use the legacy syntax.
 
 ## Interfaces
 
diff --git a/static/usage/v7/toggle/basic/angular.md b/static/usage/v7/toggle/basic/angular.md
index 696e4e2ca61..f6f9fd2bb1d 100644
--- a/static/usage/v7/toggle/basic/angular.md
+++ b/static/usage/v7/toggle/basic/angular.md
@@ -1,20 +1,6 @@
 ```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>
+<ion-toggle>Default Toggle</ion-toggle><br /><br />
+<ion-toggle [checked]="true">Checked Toggle</ion-toggle><br /><br />
+<ion-toggle [disabled]="true">Disabled Toggle</ion-toggle><br /><br />
+<ion-toggle [checked]="true" [disabled]="true">Disabled Checked Toggle</ion-toggle>
 ```
diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html
index 5e45931c3b4..e18942d6d98 100644
--- a/static/usage/v7/toggle/basic/demo.html
+++ b/static/usage/v7/toggle/basic/demo.html
@@ -7,41 +7,23 @@
   <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>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 </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-toggle>Default Toggle</ion-toggle><br /><br />
+          <ion-toggle checked="true">Checked Toggle</ion-toggle><br /><br />
+          <ion-toggle disabled="true">Disabled Toggle</ion-toggle><br /><br />
+          <ion-toggle checked="true" disabled="true">Disabled Checked Toggle</ion-toggle>
+        </div>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toggle/basic/index.md b/static/usage/v7/toggle/basic/index.md
index 10f5ccf1379..565b56f5591 100644
--- a/static/usage/v7/toggle/basic/index.md
+++ b/static/usage/v7/toggle/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/basic/demo.html" />
diff --git a/static/usage/v7/toggle/basic/javascript.md b/static/usage/v7/toggle/basic/javascript.md
index 043c09333f0..fc6565ee989 100644
--- a/static/usage/v7/toggle/basic/javascript.md
+++ b/static/usage/v7/toggle/basic/javascript.md
@@ -1,20 +1,6 @@
 ```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>
+<ion-toggle>Default Toggle</ion-toggle><br /><br />
+<ion-toggle checked="true">Checked Toggle</ion-toggle><br /><br />
+<ion-toggle disabled="true">Disabled Toggle</ion-toggle><br /><br />
+<ion-toggle checked="true" disabled="true">Disabled Checked Toggle</ion-toggle>
 ```
diff --git a/static/usage/v7/toggle/basic/react.md b/static/usage/v7/toggle/basic/react.md
index 21721d14467..c46130e97bc 100644
--- a/static/usage/v7/toggle/basic/react.md
+++ b/static/usage/v7/toggle/basic/react.md
@@ -1,27 +1,15 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList, IonToggle } from '@ionic/react';
+import { 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>
+    <>
+      <IonToggle>Default Toggle</IonToggle><br /><br />
+      <IonToggle checked={true}>Checked Toggle</IonToggle><br /><br />
+      <IonToggle disabled={true}>Disabled Toggle</IonToggle><br /><br />
+      <IonToggle checked={true} disabled={true}>Disabled Checked Toggle</IonToggle>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/toggle/basic/vue.md b/static/usage/v7/toggle/basic/vue.md
index 938dee314ed..cb5396e7abf 100644
--- a/static/usage/v7/toggle/basic/vue.md
+++ b/static/usage/v7/toggle/basic/vue.md
@@ -1,31 +1,17 @@
 ```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>
+  <ion-toggle>Default Toggle</ion-toggle><br /><br />
+  <ion-toggle :checked="true">Checked Toggle</ion-toggle><br /><br />
+  <ion-toggle :disabled="true">Disabled Toggle</ion-toggle><br /><br />
+  <ion-toggle :checked="true" :disabled="true">Disabled Checked Toggle</ion-toggle>
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList, IonToggle } from '@ionic/vue';
+  import { IonToggle } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonToggle },
+    components: { IonToggle },
   });
 </script>
 ```
diff --git a/static/usage/v7/toggle/justify/angular.md b/static/usage/v7/toggle/justify/angular.md
new file mode 100644
index 00000000000..0dbb0ebc9ad
--- /dev/null
+++ b/static/usage/v7/toggle/justify/angular.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html
new file mode 100644
index 00000000000..0b580ad51de
--- /dev/null
+++ b/static/usage/v7/toggle/justify/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>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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/toggle/justify/index.md b/static/usage/v7/toggle/justify/index.md
new file mode 100644
index 00000000000..63ae27756f0
--- /dev/null
+++ b/static/usage/v7/toggle/justify/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/justify/demo.html" />
diff --git a/static/usage/v7/toggle/justify/javascript.md b/static/usage/v7/toggle/justify/javascript.md
new file mode 100644
index 00000000000..0dbb0ebc9ad
--- /dev/null
+++ b/static/usage/v7/toggle/justify/javascript.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/justify/react.md b/static/usage/v7/toggle/justify/react.md
new file mode 100644
index 00000000000..ffe66a13f8f
--- /dev/null
+++ b/static/usage/v7/toggle/justify/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonToggle justify="start">Packed at the Start of Line</IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonToggle justify="end">Packed at the End of Line</IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonToggle justify="space-between">Space Between Label and Control</IonToggle>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/justify/vue.md b/static/usage/v7/toggle/justify/vue.md
new file mode 100644
index 00000000000..ca48ab5d311
--- /dev/null
+++ b/static/usage/v7/toggle/justify/vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonToggle },
+  });
+</script>
+```
diff --git a/static/usage/v7/toggle/label-placement/angular.md b/static/usage/v7/toggle/label-placement/angular.md
new file mode 100644
index 00000000000..cc9ad6fcafc
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-toggle labelPlacement="start">Label at the Start</ion-toggle><br /><br />
+<ion-toggle labelPlacement="end">Label at the End</ion-toggle><br /><br />
+<ion-toggle labelPlacement="fixed">Fixed Width Label</ion-toggle><br /><br />
+```
diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html
new file mode 100644
index 00000000000..890515b8a9d
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/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>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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div>
+          <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
+          <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
+          <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/toggle/label-placement/index.md b/static/usage/v7/toggle/label-placement/index.md
new file mode 100644
index 00000000000..c35a2fb5289
--- /dev/null
+++ b/static/usage/v7/toggle/label-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/toggle/label-placement/demo.html" />
diff --git a/static/usage/v7/toggle/label-placement/javascript.md b/static/usage/v7/toggle/label-placement/javascript.md
new file mode 100644
index 00000000000..86a03cc0971
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
+<ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
+<ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+```
diff --git a/static/usage/v7/toggle/label-placement/react.md b/static/usage/v7/toggle/label-placement/react.md
new file mode 100644
index 00000000000..3cbba667587
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonToggle labelPlacement="start">Label at the Start</IonToggle><br /><br />
+      <IonToggle labelPlacement="end">Label at the End</IonToggle><br /><br />
+      <IonToggle labelPlacement="fixed">Fixed Width Label</IonToggle><br /><br />
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/label-placement/vue.md b/static/usage/v7/toggle/label-placement/vue.md
new file mode 100644
index 00000000000..682472e8d05
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
+  <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
+  <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+</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/list/angular.md b/static/usage/v7/toggle/list/angular.md
new file mode 100644
index 00000000000..5a731705335
--- /dev/null
+++ b/static/usage/v7/toggle/list/angular.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle>Receive Push Notifications</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Emails</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Text Messages</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html
new file mode 100644
index 00000000000..3c86860f2b2
--- /dev/null
+++ b/static/usage/v7/toggle/list/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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+
+</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-toggle>Receive Push Notifications</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle>Receive Emails</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle>Receive Text Messages</ion-toggle>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/toggle/list/index.md b/static/usage/v7/toggle/list/index.md
new file mode 100644
index 00000000000..ad3aef2e129
--- /dev/null
+++ b/static/usage/v7/toggle/list/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/list/demo.html" />
diff --git a/static/usage/v7/toggle/list/javascript.md b/static/usage/v7/toggle/list/javascript.md
new file mode 100644
index 00000000000..5a731705335
--- /dev/null
+++ b/static/usage/v7/toggle/list/javascript.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle>Receive Push Notifications</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Emails</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Text Messages</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/list/react.md b/static/usage/v7/toggle/list/react.md
new file mode 100644
index 00000000000..f32920305ee
--- /dev/null
+++ b/static/usage/v7/toggle/list/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonToggle>Receive Push Notifications</IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonToggle>Receive Emails</IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonToggle>Receive Text Messages</IonToggle>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/list/vue.md b/static/usage/v7/toggle/list/vue.md
new file mode 100644
index 00000000000..98e183a7f4b
--- /dev/null
+++ b/static/usage/v7/toggle/list/vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-toggle>Receive Push Notifications</ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-toggle>Receive Emails</ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-toggle>Receive Text Messages</ion-toggle>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonToggle },
+  });
+</script>
+```
diff --git a/static/usage/v7/toggle/migration/index.md b/static/usage/v7/toggle/migration/index.md
new file mode 100644
index 00000000000..7224dd63088
--- /dev/null
+++ b/static/usage/v7/toggle/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````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
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Notifications</ion-label>
+  <ion-toggle></ion-toggle>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle>Notifications</ion-toggle>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Notifications</ion-label>
+  <ion-toggle></ion-toggle>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
+</ion-item>
+
+<!-- Toggle at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Notifications</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle label-placement="end">Notifications</ion-toggle>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Notifications</ion-label>
+  <ion-toggle></ion-toggle>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle>Notifications</ion-toggle>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Notifications</ion-label>
+  <ion-toggle></ion-toggle>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
+</ion-item>
+
+<!-- Toggle at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Notifications</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle label-placement="end">Notifications</ion-toggle>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel>Notifications</IonLabel>
+  <IonToggle></IonToggle>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonToggle>Notifications</IonToggle>
+</IonItem>
+
+{/* Fixed Labels */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel position="fixed">Notifications</IonLabel>
+  <IonToggle></IonToggle>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonToggle labelPlacement="fixed">Notifications</IonToggle>
+</IonItem>
+
+{/* Toggle at the start of line, Label at the end of line */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel slot="end">Notifications</IonLabel>
+  <ion-input></ion-input>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonToggle labelPlacement="end">Notifications</IonToggle>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Notifications</ion-label>
+  <ion-toggle></ion-toggle>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle>Notifications</ion-toggle>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Notifications</ion-label>
+  <ion-toggle></ion-toggle>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
+</ion-item>
+
+<!-- Toggle at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Notifications</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-toggle label-placement="end">Notifications</ion-toggle>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
\ No newline at end of file
diff --git a/static/usage/v7/toggle/on-off/angular.md b/static/usage/v7/toggle/on-off/angular.md
index d32c09c626f..2b2d75bcc3c 100644
--- a/static/usage/v7/toggle/on-off/angular.md
+++ b/static/usage/v7/toggle/on-off/angular.md
@@ -1,3 +1,3 @@
 ```html
-<ion-toggle [enableOnOffLabels]="true"></ion-toggle>
+<ion-toggle [enableOnOffLabels]="true">Enable Notifications</ion-toggle>
 ```
diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html
index 7622a018101..1c27778d31a 100644
--- a/static/usage/v7/toggle/on-off/demo.html
+++ b/static/usage/v7/toggle/on-off/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
 </head>
 
@@ -16,10 +16,10 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-toggle enable-on-off-labels="true"></ion-toggle>
+        <ion-toggle enable-on-off-labels="true">Enable Notifications</ion-toggle>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toggle/on-off/javascript.md b/static/usage/v7/toggle/on-off/javascript.md
index 5ae617f6e4a..398ae05dfb7 100644
--- a/static/usage/v7/toggle/on-off/javascript.md
+++ b/static/usage/v7/toggle/on-off/javascript.md
@@ -1,3 +1,3 @@
 ```html
-<ion-toggle enable-on-off-labels="true"></ion-toggle>
+<ion-toggle enable-on-off-labels="true">Enable Notifications</ion-toggle>
 ```
diff --git a/static/usage/v7/toggle/on-off/react.md b/static/usage/v7/toggle/on-off/react.md
index 6d24a2c2704..d1a2da3f651 100644
--- a/static/usage/v7/toggle/on-off/react.md
+++ b/static/usage/v7/toggle/on-off/react.md
@@ -4,7 +4,7 @@ import { IonToggle } from '@ionic/react';
 
 function Example() {
   return (
-    <IonToggle enableOnOffLabels={true}></IonToggle>
+    <IonToggle enableOnOffLabels={true}>Enable Notifications</IonToggle>
   );
 }
 export default Example;
diff --git a/static/usage/v7/toggle/on-off/vue.md b/static/usage/v7/toggle/on-off/vue.md
index a6958f0e1a5..040df1266da 100644
--- a/static/usage/v7/toggle/on-off/vue.md
+++ b/static/usage/v7/toggle/on-off/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-toggle :enable-on-off-labels="true"></ion-toggle>
+  <ion-toggle :enable-on-off-labels="true">Enable Notifications</ion-toggle>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/toggle/theming/colors/angular.md b/static/usage/v7/toggle/theming/colors/angular.md
index b8cb7076de3..20e1b2f0d19 100644
--- a/static/usage/v7/toggle/theming/colors/angular.md
+++ b/static/usage/v7/toggle/theming/colors/angular.md
@@ -1,11 +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>
+<ion-toggle aria-label="Primary toggle" color="primary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Secondary toggle" color="secondary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Tertiary toggle" color="tertiary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Success toggle" color="success" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Warning toggle" color="warning" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Danger toggle" color="danger" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Light toggle" color="light" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Medium toggle" color="medium" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Dark 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
index e2e115e84bf..b886268efb7 100644
--- a/static/usage/v7/toggle/theming/colors/demo.html
+++ b/static/usage/v7/toggle/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
 </head>
 
@@ -16,18 +16,18 @@
   <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>
+        <ion-toggle aria-label="Primary toggle" color="primary" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Secondary toggle" color="secondary" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Tertiary toggle" color="tertiary" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Success toggle" color="success" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Warning toggle" color="warning" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Danger toggle" color="danger" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Light toggle" color="light" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Medium toggle" color="medium" checked="true"></ion-toggle>
+        <ion-toggle aria-label="Dark toggle" color="dark" checked="true"></ion-toggle>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toggle/theming/colors/javascript.md b/static/usage/v7/toggle/theming/colors/javascript.md
index 26990bd1a4f..a07c1af5771 100644
--- a/static/usage/v7/toggle/theming/colors/javascript.md
+++ b/static/usage/v7/toggle/theming/colors/javascript.md
@@ -1,11 +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>
+<ion-toggle aria-label="Primary toggle" color="primary" checked="true"></ion-toggle>
+<ion-toggle aria-label="Secondary toggle" color="secondary" checked="true"></ion-toggle>
+<ion-toggle aria-label="Tertiary toggle" color="tertiary" checked="true"></ion-toggle>
+<ion-toggle aria-label="Success toggle" color="success" checked="true"></ion-toggle>
+<ion-toggle aria-label="Warning toggle" color="warning" checked="true"></ion-toggle>
+<ion-toggle aria-label="Danger toggle" color="danger" checked="true"></ion-toggle>
+<ion-toggle aria-label="Light toggle" color="light" checked="true"></ion-toggle>
+<ion-toggle aria-label="Medium toggle" color="medium" checked="true"></ion-toggle>
+<ion-toggle aria-label="Dark 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
index 6ba932092c4..74fad7619ea 100644
--- a/static/usage/v7/toggle/theming/colors/react.md
+++ b/static/usage/v7/toggle/theming/colors/react.md
@@ -5,15 +5,15 @@ 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>
+      <IonToggle aria-label="Primary toggle" color="primary" checked={true}></IonToggle>
+      <IonToggle aria-label="Secondary toggle" color="secondary" checked={true}></IonToggle>
+      <IonToggle aria-label="Tertiary toggle" color="tertiary" checked={true}></IonToggle>
+      <IonToggle aria-label="Success toggle" color="success" checked={true}></IonToggle>
+      <IonToggle aria-label="Warning toggle" color="warning" checked={true}></IonToggle>
+      <IonToggle aria-label="Danger toggle" color="danger" checked={true}></IonToggle>
+      <IonToggle aria-label="Light toggle" color="light" checked={true}></IonToggle>
+      <IonToggle aria-label="Medium toggle" color="medium" checked={true}></IonToggle>
+      <IonToggle aria-label="Dark toggle" color="dark" checked={true}></IonToggle>
     </>
   );
 }
diff --git a/static/usage/v7/toggle/theming/colors/vue.md b/static/usage/v7/toggle/theming/colors/vue.md
index 4b906d9da5d..453255eba8f 100644
--- a/static/usage/v7/toggle/theming/colors/vue.md
+++ b/static/usage/v7/toggle/theming/colors/vue.md
@@ -1,14 +1,14 @@
 ```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>
+  <ion-toggle aria-label="Primary toggle" color="primary" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Secondary toggle" color="secondary" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Tertiary toggle" color="tertiary" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Success toggle" color="success" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Warning toggle" color="warning" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Danger toggle" color="danger" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Light toggle" color="light" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Medium toggle" color="medium" :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Dark toggle" color="dark" :checked="true"></ion-toggle>
 </template>
 
 <script lang="ts">
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
index a5ac3b87533..a8e62a4d3e9 100644
--- 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
@@ -1,12 +1,9 @@
 ```css
 ion-toggle {
-  height: 10px;
-  width: 65px;
-
   padding: 12px;
 
-  --background: #ddd;
-  --background-checked: #ddd;
+  --track-background: #ddd;
+  --track-background-checked: #ddd;
 
   --handle-background: #eb7769;
   --handle-background-checked: #95c34e;
@@ -18,9 +15,13 @@ ion-toggle {
 
   --handle-border-radius: 4px;
   --handle-box-shadow: none;
+}
+
+ion-toggle::part(track) {
+  height: 10px;
+  width: 65px;
 
   /* 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
index b66cfc51480..de598209eaa 100644
--- 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
@@ -1,4 +1,4 @@
 ```html
-<ion-toggle></ion-toggle>
-<ion-toggle [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Enable Notifications"></ion-toggle>
+<ion-toggle [checked]="true" aria-label="Enable Notifications"></ion-toggle>
 ```
diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html
index b357ff59b4a..23037857290 100644
--- a/static/usage/v7/toggle/theming/css-properties/demo.html
+++ b/static/usage/v7/toggle/theming/css-properties/demo.html
@@ -7,18 +7,15 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-toggle {
-      height: 10px;
-      width: 65px;
-
       padding: 12px;
 
-      --background: #ddd;
-      --background-checked: #ddd;
+      --track-background: #ddd;
+      --track-background-checked: #ddd;
 
       --handle-background: #eb7769;
       --handle-background-checked: #95c34e;
@@ -30,10 +27,13 @@
 
       --handle-border-radius: 4px;
       --handle-box-shadow: none;
+    }
+
+    ion-toggle::part(track) {
+      height: 10px;
+      width: 65px;
 
-      /* Required for iOS handle to overflow the height of the track */
       overflow: visible;
-      contain: none;
     }
   </style>
 </head>
@@ -42,11 +42,11 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-toggle></ion-toggle>
-        <ion-toggle checked="true"></ion-toggle>
+        <ion-toggle aria-label="Enable Notifications"></ion-toggle>
+        <ion-toggle checked="true" aria-label="Enable Notifications"></ion-toggle>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toggle/theming/css-properties/javascript.md b/static/usage/v7/toggle/theming/css-properties/javascript.md
index ed02575807b..5483235b4c5 100644
--- a/static/usage/v7/toggle/theming/css-properties/javascript.md
+++ b/static/usage/v7/toggle/theming/css-properties/javascript.md
@@ -1,31 +1,32 @@
 ```html
-<ion-toggle></ion-toggle>
-<ion-toggle checked="true"></ion-toggle>
+<ion-toggle aria-label="Enable Notifications"></ion-toggle>
+<ion-toggle checked="true" aria-label="Enable Notifications"></ion-toggle>
 
 <style>
   ion-toggle {
-    height: 10px;
-    width: 65px;
-
     padding: 12px;
-
-    --background: #ddd;
-    --background-checked: #ddd;
-
+  
+    --track-background: #ddd;
+    --track-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;
-
+  }
+  
+  ion-toggle::part(track) {
+    height: 10px;
+    width: 65px;
+  
     /* 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
index a5ac3b87533..a8e62a4d3e9 100644
--- a/static/usage/v7/toggle/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/toggle/theming/css-properties/react/main_css.md
@@ -1,12 +1,9 @@
 ```css
 ion-toggle {
-  height: 10px;
-  width: 65px;
-
   padding: 12px;
 
-  --background: #ddd;
-  --background-checked: #ddd;
+  --track-background: #ddd;
+  --track-background-checked: #ddd;
 
   --handle-background: #eb7769;
   --handle-background-checked: #95c34e;
@@ -18,9 +15,13 @@ ion-toggle {
 
   --handle-border-radius: 4px;
   --handle-box-shadow: none;
+}
+
+ion-toggle::part(track) {
+  height: 10px;
+  width: 65px;
 
   /* 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
index 6548f53b021..aa988bb22d4 100644
--- a/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md
@@ -7,8 +7,8 @@ import './main.css';
 function Example() {
   return (
     <>
-      <IonToggle></IonToggle>
-      <IonToggle checked={true}></IonToggle>
+      <IonToggle aria-label="Enable Notifications"></IonToggle>
+      <IonToggle checked={true} aria-label="Enable Notifications"></IonToggle>
     </>
   );
 }
diff --git a/static/usage/v7/toggle/theming/css-properties/vue.md b/static/usage/v7/toggle/theming/css-properties/vue.md
index f66c8236836..e546b97d1a3 100644
--- a/static/usage/v7/toggle/theming/css-properties/vue.md
+++ b/static/usage/v7/toggle/theming/css-properties/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
-  <ion-toggle></ion-toggle>
-  <ion-toggle :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Enable Notifications"></ion-toggle>
+  <ion-toggle :checked="true" aria-label="Enable Notifications"></ion-toggle>
 </template>
 
 <script lang="ts">
@@ -15,28 +15,29 @@
 
 <style scoped>
   ion-toggle {
-    height: 10px;
-    width: 65px;
-
     padding: 12px;
-
-    --background: #ddd;
-    --background-checked: #ddd;
-
+  
+    --track-background: #ddd;
+    --track-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;
-
+  }
+  
+  ion-toggle::part(track) {
+    height: 10px;
+    width: 65px;
+  
     /* 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
index e34322115b6..0df6def7beb 100644
--- 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
@@ -1,8 +1,5 @@
 ```css
 ion-toggle {
-  height: 10px;
-  width: 65px;
-
   padding: 12px;
 
   --handle-width: 25px;
@@ -10,14 +7,18 @@ ion-toggle {
   --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) {
+  height: 10px;
+  width: 65px;
+
   background: #ddd;
+
+  /* Required for iOS handle to overflow the height of the track */
+  overflow: visible;
 }
 
 ion-toggle::part(handle) {
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
index b66cfc51480..de598209eaa 100644
--- 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
@@ -1,4 +1,4 @@
 ```html
-<ion-toggle></ion-toggle>
-<ion-toggle [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Enable Notifications"></ion-toggle>
+<ion-toggle [checked]="true" aria-label="Enable Notifications"></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
index 5647327547a..8fc263b25f2 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
@@ -7,14 +7,11 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-toggle {
-      height: 10px;
-      width: 65px;
-
       padding: 12px;
 
       --handle-width: 25px;
@@ -22,14 +19,18 @@
       --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) {
+      height: 10px;
+      width: 65px;
+
       background: #ddd;
+
+      /* Required for iOS handle to overflow the height of the track */
+      overflow: visible;
     }
 
     ion-toggle::part(handle) {
@@ -49,11 +50,11 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-toggle></ion-toggle>
-        <ion-toggle checked="true"></ion-toggle>
+        <ion-toggle aria-label="Enable Notifications"></ion-toggle>
+        <ion-toggle checked="true" aria-label="Enable Notifications"></ion-toggle>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</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
index bda83da747a..3329f6b386c 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
@@ -1,27 +1,28 @@
 ```html
-<ion-toggle></ion-toggle>
-<ion-toggle checked="true"></ion-toggle>
+<ion-toggle aria-label="Enable Notifications"></ion-toggle>
+<ion-toggle checked="true" aria-label="Enable Notifications"></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) {
+    height: 10px;
+    width: 65px;
+  
     background: #ddd;
+  
+    /* Required for iOS handle to overflow the height of the track */
+    overflow: visible;
   }
 
   ion-toggle::part(handle) {
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
index e34322115b6..0df6def7beb 100644
--- 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
@@ -1,8 +1,5 @@
 ```css
 ion-toggle {
-  height: 10px;
-  width: 65px;
-
   padding: 12px;
 
   --handle-width: 25px;
@@ -10,14 +7,18 @@ ion-toggle {
   --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) {
+  height: 10px;
+  width: 65px;
+
   background: #ddd;
+
+  /* Required for iOS handle to overflow the height of the track */
+  overflow: visible;
 }
 
 ion-toggle::part(handle) {
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
index 6548f53b021..aa988bb22d4 100644
--- 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
@@ -7,8 +7,8 @@ import './main.css';
 function Example() {
   return (
     <>
-      <IonToggle></IonToggle>
-      <IonToggle checked={true}></IonToggle>
+      <IonToggle aria-label="Enable Notifications"></IonToggle>
+      <IonToggle checked={true} aria-label="Enable Notifications"></IonToggle>
     </>
   );
 }
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
index dbf40a9ed62..a62511001cd 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
-  <ion-toggle></ion-toggle>
-  <ion-toggle :checked="true"></ion-toggle>
+  <ion-toggle aria-label="Enable Notifications"></ion-toggle>
+  <ion-toggle :checked="true" aria-label="Enable Notifications"></ion-toggle>
 </template>
 
 <script lang="ts">
@@ -15,24 +15,25 @@
 
 <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) {
+    height: 10px;
+    width: 65px;
+  
     background: #ddd;
+  
+    /* Required for iOS handle to overflow the height of the track */
+    overflow: visible;
   }
 
   ion-toggle::part(handle) {

From 8e8dc8d345e8895c5a4d52568a699cda837acaf5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 17 Jan 2023 14:05:01 -0500
Subject: [PATCH 160/469] docs(deps): update to latest v7 beta (#2706)

---
 static/code/stackblitz/v7/angular/package.json            | 4 ++--
 static/code/stackblitz/v7/html/package.json               | 2 +-
 static/code/stackblitz/v7/react/package.json              | 2 +-
 static/code/stackblitz/v7/vue/package.json                | 2 +-
 static/usage/v7/input/basic/demo.html                     | 4 ++--
 static/usage/v7/input/clear/demo.html                     | 4 ++--
 static/usage/v7/input/counter/demo.html                   | 4 ++--
 static/usage/v7/input/fill/demo.html                      | 4 ++--
 static/usage/v7/input/helper-error/demo.html              | 4 ++--
 static/usage/v7/input/labels/demo.html                    | 4 ++--
 static/usage/v7/input/theming/colors/demo.html            | 4 ++--
 static/usage/v7/input/theming/css-properties/demo.html    | 4 ++--
 static/usage/v7/input/types/demo.html                     | 4 ++--
 static/usage/v7/toast/buttons/demo.html                   | 4 ++--
 static/usage/v7/toast/icon/demo.html                      | 4 ++--
 static/usage/v7/toast/inline/basic/demo.html              | 4 ++--
 static/usage/v7/toast/inline/is-open/demo.html            | 4 ++--
 static/usage/v7/toast/theming/demo.html                   | 4 ++--
 static/usage/v7/toggle/basic/demo.html                    | 4 ++--
 static/usage/v7/toggle/justify/demo.html                  | 4 ++--
 static/usage/v7/toggle/label-placement/demo.html          | 4 ++--
 static/usage/v7/toggle/list/demo.html                     | 4 ++--
 static/usage/v7/toggle/on-off/demo.html                   | 4 ++--
 static/usage/v7/toggle/theming/colors/demo.html           | 4 ++--
 static/usage/v7/toggle/theming/css-properties/demo.html   | 4 ++--
 static/usage/v7/toggle/theming/css-shadow-parts/demo.html | 4 ++--
 26 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index 0cc3768e391..5bc244a7abd 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/angular": "6.4.1-dev.11670949653.116404ab",
-    "@ionic/core": "6.4.1-dev.11670949653.116404ab"
+    "@ionic/angular": "6.4.2-dev.11673981545.1e612253",
+    "@ionic/core": "6.4.2-dev.11673981545.1e612253"
   }
 }
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
index 3d58f728e08..56ad51525c0 100644
--- a/static/code/stackblitz/v7/html/package.json
+++ b/static/code/stackblitz/v7/html/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "6.4.1-dev.11670949653.116404ab"
+    "@ionic/core": "6.4.2-dev.11673981545.1e612253"
   }
 }
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index 992ec2991ee..530c529ee9a 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "6.4.1-dev.11670949653.116404ab",
+    "@ionic/react": "6.4.2-dev.11673981545.1e612253",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index 0b46aaa5161..da362e2f544 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "6.4.1-dev.11670949653.116404ab",
+    "@ionic/vue": "6.4.2-dev.11673981545.1e612253",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
diff --git a/static/usage/v7/input/basic/demo.html b/static/usage/v7/input/basic/demo.html
index b5c87c52aea..6fbf30ae506 100644
--- a/static/usage/v7/input/basic/demo.html
+++ b/static/usage/v7/input/basic/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/clear/demo.html b/static/usage/v7/input/clear/demo.html
index c1c2b9749c9..65f7ee30743 100644
--- a/static/usage/v7/input/clear/demo.html
+++ b/static/usage/v7/input/clear/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/counter/demo.html b/static/usage/v7/input/counter/demo.html
index 08748497c3f..204f37c8e69 100644
--- a/static/usage/v7/input/counter/demo.html
+++ b/static/usage/v7/input/counter/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
index 6ff7421a7b4..6684554b0d0 100644
--- a/static/usage/v7/input/fill/demo.html
+++ b/static/usage/v7/input/fill/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
index 8c0fe929e35..713540e37aa 100644
--- a/static/usage/v7/input/helper-error/demo.html
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
   <style>
     .container ion-input {
       width: 300px;
diff --git a/static/usage/v7/input/labels/demo.html b/static/usage/v7/input/labels/demo.html
index da60ec5812d..9ca4acb3489 100644
--- a/static/usage/v7/input/labels/demo.html
+++ b/static/usage/v7/input/labels/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/theming/colors/demo.html b/static/usage/v7/input/theming/colors/demo.html
index 2dd95b0fea2..22ef19e38d7 100644
--- a/static/usage/v7/input/theming/colors/demo.html
+++ b/static/usage/v7/input/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
index d092342cc5f..59ac7cbfa0f 100644
--- a/static/usage/v7/input/theming/css-properties/demo.html
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html
index bfa4a4035b3..32c268b67cf 100644
--- a/static/usage/v7/input/types/demo.html
+++ b/static/usage/v7/input/types/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html
index 56fcab31d5a..3c892c6675d 100644
--- a/static/usage/v7/toast/buttons/demo.html
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/toast/icon/demo.html b/static/usage/v7/toast/icon/demo.html
index 5b762ac3916..d79c31c9e78 100644
--- a/static/usage/v7/toast/icon/demo.html
+++ b/static/usage/v7/toast/icon/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/inline/basic/demo.html b/static/usage/v7/toast/inline/basic/demo.html
index c3754dfa44e..d7955e72e47 100644
--- a/static/usage/v7/toast/inline/basic/demo.html
+++ b/static/usage/v7/toast/inline/basic/demo.html
@@ -7,8 +7,8 @@
   <title>Toast | 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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/inline/is-open/demo.html b/static/usage/v7/toast/inline/is-open/demo.html
index b77cf580230..5e5446f0dfc 100644
--- a/static/usage/v7/toast/inline/is-open/demo.html
+++ b/static/usage/v7/toast/inline/is-open/demo.html
@@ -7,8 +7,8 @@
   <title>Toast | 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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html
index 881057dbd05..ea381113f73 100644
--- a/static/usage/v7/toast/theming/demo.html
+++ b/static/usage/v7/toast/theming/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-toast.custom-toast {
diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html
index e18942d6d98..9ba3a5598d2 100644
--- a/static/usage/v7/toggle/basic/demo.html
+++ b/static/usage/v7/toggle/basic/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html
index 0b580ad51de..fb293995615 100644
--- a/static/usage/v7/toggle/justify/demo.html
+++ b/static/usage/v7/toggle/justify/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html
index 890515b8a9d..843127abf4d 100644
--- a/static/usage/v7/toggle/label-placement/demo.html
+++ b/static/usage/v7/toggle/label-placement/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html
index 3c86860f2b2..a069d2925f6 100644
--- a/static/usage/v7/toggle/list/demo.html
+++ b/static/usage/v7/toggle/list/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
 </head>
   <body>
diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html
index 1c27778d31a..e6ba32f8b05 100644
--- a/static/usage/v7/toggle/on-off/demo.html
+++ b/static/usage/v7/toggle/on-off/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toggle/theming/colors/demo.html b/static/usage/v7/toggle/theming/colors/demo.html
index b886268efb7..e65d3ea1c0a 100644
--- a/static/usage/v7/toggle/theming/colors/demo.html
+++ b/static/usage/v7/toggle/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html
index 23037857290..474a0d145c4 100644
--- a/static/usage/v7/toggle/theming/css-properties/demo.html
+++ b/static/usage/v7/toggle/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     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
index 8fc263b25f2..e49bb4e9546 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-toggle {

From 7c0b14aef6b8d4fc8c80310a18bc8a590616baff Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 17 Jan 2023 16:17:54 -0500
Subject: [PATCH 161/469] docs(fab): add label notes for fab (#2707)

---
 docs/api/fab.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/api/fab.md b/docs/api/fab.md
index fe1139ac460..c921b2dc37c 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -68,6 +68,13 @@ import CSSCustomProperties from '@site/static/usage/fab/theming/css-custom-prope
 import CSSShadowParts from '@site/static/usage/fab/theming/css-shadow-parts/index.md';
 
 <CSSShadowParts />
+ 
+
+## Accessibility
+
+### Labels
+
+Since FABs are allowed to contain only icons, developers must provide an `aria-label` on each `ion-fab-button` instance. Without this label, assistive technologies will not be able to announce the purpose of each button.
 
 ## Properties
 <Props />
@@ -85,4 +92,4 @@ import CSSShadowParts from '@site/static/usage/fab/theming/css-shadow-parts/inde
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 5ef71efc5134aac167c25ebf367a5e4b4e0b7b20 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 19 Jan 2023 10:12:58 -0500
Subject: [PATCH 162/469] docs(upgrade-guides): add v7 migration, new upgrade
 guide links (#2705)

---
 .../migration.md => updating/4-0.md}          |  48 +------
 docs/updating/5-0.md                          |  37 ++++++
 .../6-0.md}                                   |  10 +-
 docs/updating/7-0.md                          | 122 ++++++++++++++++++
 sidebars.js                                   |  16 ++-
 5 files changed, 182 insertions(+), 51 deletions(-)
 rename docs/{reference/migration.md => updating/4-0.md} (89%)
 create mode 100644 docs/updating/5-0.md
 rename docs/{intro/upgrading-to-ionic-6.md => updating/6-0.md} (97%)
 create mode 100644 docs/updating/7-0.md

diff --git a/docs/reference/migration.md b/docs/updating/4-0.md
similarity index 89%
rename from docs/reference/migration.md
rename to docs/updating/4-0.md
index bb25242380d..26013aecfeb 100644
--- a/docs/reference/migration.md
+++ b/docs/updating/4-0.md
@@ -1,52 +1,8 @@
 ---
-title: Migration Guide
-sidebar_label: Migration
+title: Updating to 4.0
 ---
 
-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.
+# Updating from Ionic 1-3 to Ionic 4
 
 ## Migrating from Ionic 3.0 to Ionic 4.0
 
diff --git a/docs/updating/5-0.md b/docs/updating/5-0.md
new file mode 100644
index 00000000000..eecf8e47fd8
--- /dev/null
+++ b/docs/updating/5-0.md
@@ -0,0 +1,37 @@
+---
+title: Updating to 5.0
+---
+
+# Updating from Ionic 4 to Ionic 5
+
+Migrating an app from 4.x to 5.x requires a few updates to the API properties, CSS utilities, and the installed package dependencies.
+
+:::note
+This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Upgrading to Ionic 4 Guide](./4-0) before starting this guide.
+:::
+
+### 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.
\ No newline at end of file
diff --git a/docs/intro/upgrading-to-ionic-6.md b/docs/updating/6-0.md
similarity index 97%
rename from docs/intro/upgrading-to-ionic-6.md
rename to docs/updating/6-0.md
index 95b39f2350d..3ef03a1a1ca 100644
--- a/docs/intro/upgrading-to-ionic-6.md
+++ b/docs/updating/6-0.md
@@ -1,6 +1,12 @@
-# Upgrading to Ionic 6
+---
+title: Updating to 6.0
+---
 
-Follow this guide to upgrade your Ionic 5 apps to Ionic 6.
+# Updating from Ionic 5 to Ionic 6
+
+:::note
+This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Upgrading to Ionic 5 Guide](./5-0) before starting this guide.
+:::
 
 ## Getting Started
 
diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
new file mode 100644
index 00000000000..eef9226173b
--- /dev/null
+++ b/docs/updating/7-0.md
@@ -0,0 +1,122 @@
+---
+title: Updating to 7.0
+---
+
+# Updating from Ionic 6 to Ionic 7
+
+:::note
+Ionic 7 is in beta. Please report any issues on [the Ionic Framework GitHub Repo](https://github.com/ionic-team/ionic-framework).
+:::
+
+:::note
+This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
+:::
+
+## Getting Started
+
+### Angular
+
+1. Ionic 7 supports Angular 13+. 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 7:
+
+```shell
+npm install @ionic/angular@next
+```
+
+If you are using Ionic Angular Server, be sure to update that as well:
+
+```shell
+npm install @ionic/angular@next @ionic/angular-server@next
+```
+
+### React
+
+1. Ionic 7 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 7:
+
+```shell
+npm install @ionic/react@next @ionic/react-router@next
+```
+
+### Vue
+
+1. Ionic 7 supports Vue 3.0.6+. Update to the latest version of Vue:
+
+```shell
+npm install vue@latest vue-router@latest
+```
+
+3. Update to the latest version of Ionic 7:
+
+```shell
+npm install @ionic/vue@next @ionic/vue-router@next
+```
+
+### Core
+
+1. Update to the latest version of Ionic 7:
+
+```shell
+npm install @ionic/core@next
+```
+
+## Updating Your Code
+
+### Types
+
+1. `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
+
+
+### Checkbox
+
+1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--checkbox-background` and `--checkbox-background-checked`, respectively.
+
+### Datetime
+
+1. Remove any code that sets the `value` property to the empty string (`''`).
+2. Remove any code that accesses the time zone information on the `value` property. Datetime does not manage time zones, so any time zone information provided is ignored.
+
+### Modal
+
+1. Remove any usage of the `swipeToClose` property. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property to control when a modal can dismiss.
+2. Remove any code that sets the `canDismiss` property to `undefined`. The `canDismiss` property now defaults to `true`, so this code is no longer needed.
+
+### Picker
+
+1. Remove any code that accesses `refresh` on `ion-picker-column`. Developers should use the `columns` property on `ion-picker` to refresh the view instead.
+
+### Segment
+
+1. Remove any code that sets the `value` property to `null`. Developers should use either `''` or `undefined` instead.
+
+### Slides
+
+1. Remove `ion-slides`, `ion-slide`, and any associated types. These components have been removed in favor of using Swiper.js directly. The guides below contain more information about this migration:
+
+[Angular Migration Guide](https://ionicframework.com/docs/angular/slides)<br />
+[React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
+[Vue Migration Guide](https://ionicframework.com/docs/vue/slides)
+
+### Toggle
+
+1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--track-background` and `--track-background-checked`, respectively.
+
+### Virtual Scroll
+
+1. Remove `ion-virtual-scroll` and any associated types. This component has been removed in favor of using virtual scroll solutions provided by JavaScript Frameworks. The guides below contain more information about this migration:
+
+[Angular Migration Guide](https://ionicframework.com/docs/angular/virtual-scroll)<br />
+[React Migration Guide](https://ionicframework.com/docs/react/virtual-scroll)<br />
+[Vue Migration Guide](https://ionicframework.com/docs/vue/virtual-scroll)
+
+## Need Help Upgrading?
+
+Be sure to look at the [Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require 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/sidebars.js b/sidebars.js
index aa823d7ac7b..23fe2facdfd 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -4,7 +4,18 @@ module.exports = {
       type: 'category',
       label: 'Getting Started',
       collapsed: false,
-      items: ['index', 'intro/upgrading-to-ionic-6', 'intro/environment', 'intro/cli', 'intro/cdn', 'intro/vscode-extension', 'intro/next'],
+      items: ['index', 'intro/environment', 'intro/cli', 'intro/cdn', 'intro/vscode-extension', 'intro/next'],
+    },
+    {
+      type: 'category',
+      label: 'Upgrade Guides',
+      collapsed: false,
+      items: [
+        'updating/7-0',
+        'updating/6-0',
+        'updating/5-0',
+        'updating/4-0'
+      ]
     },
     {
       type: 'category',
@@ -219,8 +230,7 @@ module.exports = {
           href: 'https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md',
         },
         'reference/support',
-        'reference/browser-support',
-        'reference/migration',
+        'reference/browser-support'
       ],
     },
   ],

From 96ecac63c50cc1ea34de9ac0902f783ec988eff3 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 19 Jan 2023 11:45:06 -0500
Subject: [PATCH 163/469] docs(migration): add browserslist step (#2709)

---
 docs/updating/7-0.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index eef9226173b..3b5fc3a8d9c 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -67,6 +67,20 @@ npm install @ionic/core@next
 
 ## Updating Your Code
 
+### 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 >=79
+Firefox >=70
+Edge >=79
+Safari >=14
+iOS >=14
+```
+
 ### Types
 
 1. `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.

From 5eb83a9e32512dfd2714d5ca4791baf1f16209ff Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 20 Jan 2023 12:19:11 -0500
Subject: [PATCH 164/469] docs(angular): standalone component api (#2514)
 (#2711)

Co-authored-by: Sean Perkins <sean@ionic.io>
---
 docs/angular/navigation.md | 64 +++++++++++++++++++++++++++++++++-----
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md
index 0c249d9d055..eb05502309c 100644
--- a/docs/angular/navigation.md
+++ b/docs/angular/navigation.md
@@ -177,6 +177,54 @@ 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.
 
+## Standalone Components
+
+:::caution Experimental API
+
+Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable.
+
+:::
+
+Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module.
+
+To use standalone components with routing and Ionic Framework, you must first be on Ionic ^6.3.0. The experimental API requires developers to assign the `EnvironmentInjector` instance for each router outlet (`ion-router-outlet` and `ion-tabs`) that uses standalone component routing.
+
+```ts title="app.component.ts"
+import { Component, EnvironmentInjector } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: 'app.component.html',
+})
+export class AppComponent {
+  constructor(public environmentInjector: EnvironmentInjector) {}
+}
+```
+
+```html title="app.component.html"
+<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+<!-- or if you are using ion-tabs -->
+<ion-tabs [environmentInjector]="environmentInjector"> ... </ion-tabs>
+```
+
+Developers can use the existing syntax for standalone component routing from Angular:
+
+```ts
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: 'standalone-route',
+        loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent),
+      },
+    ]),
+  ],
+})
+export class AppRoutingModule {}
+```
+
+To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).
+
 ## 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.
@@ -191,8 +239,8 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/linear-routing-demo.mp4')}
@@ -217,8 +265,8 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/non-linear-routing-demo.mp4')}
@@ -432,8 +480,8 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/tabs-account-demo.mp4')}
@@ -448,6 +496,6 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |

From 95c0004a5c0f79475769bbb84be65b4b7e4a6092 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 20 Jan 2023 12:53:37 -0500
Subject: [PATCH 165/469] fix(docs): update upgrade guide cta (#2712)

---
 docusaurus.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index baab1190048..f3ffa205857 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -98,8 +98,8 @@ module.exports = {
         {
           type: 'cta',
           position: 'left',
-          text: 'Ionic v6.0.0 Upgrade Guide',
-          href: `/intro/upgrading-to-ionic-6`,
+          text: 'Ionic v7.0.0 Upgrade Guide',
+          href: `/updating/7-0`,
         },
         {
           type: 'docsVersionDropdown',

From d3d8ed3155fdd488ab40c8ec37c58721cb85d57b Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 23 Jan 2023 15:06:19 -0600
Subject: [PATCH 166/469] docs(picker): add inline usage (#2717)

---
 docs/api/picker.md                            |  27 +++-
 .../angular/example_component_html.md         |   0
 .../angular/example_component_ts.md           |   0
 .../{single-column => controller}/demo.html   |   2 +-
 .../{single-column => controller}/index.md    |   2 +-
 .../javascript.md                             |   0
 .../{single-column => controller}/react.md    |   0
 .../{single-column => controller}/vue.md      |   0
 .../isOpen/angular/example_component_html.md  |   9 ++
 .../isOpen/angular/example_component_ts.md    |  47 ++++++
 .../usage/v7/picker/inline/isOpen/demo.html   |  64 ++++++++
 static/usage/v7/picker/inline/isOpen/index.md |  25 +++
 .../v7/picker/inline/isOpen/javascript.md     |  44 +++++
 static/usage/v7/picker/inline/isOpen/react.md |  52 ++++++
 static/usage/v7/picker/inline/isOpen/vue.md   |  61 +++++++
 .../trigger/angular/example_component_html.md |   8 +
 .../trigger/angular/example_component_ts.md   |  41 +++++
 .../usage/v7/picker/inline/trigger/demo.html  |  60 +++++++
 .../usage/v7/picker/inline/trigger/index.md   |  25 +++
 .../v7/picker/inline/trigger/javascript.md    |  40 +++++
 .../usage/v7/picker/inline/trigger/react.md   |  49 ++++++
 static/usage/v7/picker/inline/trigger/vue.md  |  54 +++++++
 .../angular/example_component_html.md         |   7 +-
 .../angular/example_component_ts.md           | 128 +++++++--------
 .../usage/v7/picker/multiple-column/demo.html | 125 +++++++--------
 .../v7/picker/multiple-column/javascript.md   | 131 +++++++--------
 .../usage/v7/picker/multiple-column/react.md  | 138 ++++++++--------
 static/usage/v7/picker/multiple-column/vue.md | 150 ++++++++----------
 28 files changed, 917 insertions(+), 372 deletions(-)
 rename static/usage/v7/picker/{single-column => controller}/angular/example_component_html.md (100%)
 rename static/usage/v7/picker/{single-column => controller}/angular/example_component_ts.md (100%)
 rename static/usage/v7/picker/{single-column => controller}/demo.html (97%)
 rename static/usage/v7/picker/{single-column => controller}/index.md (92%)
 rename static/usage/v7/picker/{single-column => controller}/javascript.md (100%)
 rename static/usage/v7/picker/{single-column => controller}/react.md (100%)
 rename static/usage/v7/picker/{single-column => controller}/vue.md (100%)
 create mode 100644 static/usage/v7/picker/inline/isOpen/angular/example_component_html.md
 create mode 100644 static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
 create mode 100644 static/usage/v7/picker/inline/isOpen/demo.html
 create mode 100644 static/usage/v7/picker/inline/isOpen/index.md
 create mode 100644 static/usage/v7/picker/inline/isOpen/javascript.md
 create mode 100644 static/usage/v7/picker/inline/isOpen/react.md
 create mode 100644 static/usage/v7/picker/inline/isOpen/vue.md
 create mode 100644 static/usage/v7/picker/inline/trigger/angular/example_component_html.md
 create mode 100644 static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
 create mode 100644 static/usage/v7/picker/inline/trigger/demo.html
 create mode 100644 static/usage/v7/picker/inline/trigger/index.md
 create mode 100644 static/usage/v7/picker/inline/trigger/javascript.md
 create mode 100644 static/usage/v7/picker/inline/trigger/react.md
 create mode 100644 static/usage/v7/picker/inline/trigger/vue.md

diff --git a/docs/api/picker.md b/docs/api/picker.md
index 3dfd4ceedfe..b5adb0de323 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -22,18 +22,35 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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
+## Inline Pickers (Recommended)
 
-Display a list of options in a single, scrollable column.
+`ion-picker` 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 Picker.
 
-import SingleColumn from '@site/static/usage/v7/picker/single-column/index.md';
+import Trigger from '@site/static/usage/v7/picker/inline/trigger/index.md';
 
-<SingleColumn />
+<Trigger />
 
+### Using `isOpen`
+
+The `isOpen` property on `ion-picker` allows developers to control the presentation state of the Picker from their application state. This means when `isOpen` is set to `true` the Picker will be presented, and when `isOpen` is set to `false` the Picker will be dismissed.
+
+`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Picker is dismissed. Developers should listen for the `ionPickerDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-picker` from being tightly coupled with the state of the application. With a one way data binding, the Picker only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Picker 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 IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md';
+
+<IsOpen />
+
+## Controller Pickers
+
+The `pickerController` can be used in situations where more control is needed over when the Picker is presented and dismissed.
+
+import Controller from '@site/static/usage/v7/picker/controller/index.md';
+
+<Controller />
 
 ## Multiple Columns
 
-Display multiple columns of different options.
+The `columns` property can be used to display a Picker with multiple columns of different options.
 
 import MultipleColumn from '@site/static/usage/v7/picker/multiple-column/index.md';
 
diff --git a/static/usage/v7/picker/single-column/angular/example_component_html.md b/static/usage/v7/picker/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/picker/single-column/angular/example_component_html.md
rename to static/usage/v7/picker/controller/angular/example_component_html.md
diff --git a/static/usage/v7/picker/single-column/angular/example_component_ts.md b/static/usage/v7/picker/controller/angular/example_component_ts.md
similarity index 100%
rename from static/usage/v7/picker/single-column/angular/example_component_ts.md
rename to static/usage/v7/picker/controller/angular/example_component_ts.md
diff --git a/static/usage/v7/picker/single-column/demo.html b/static/usage/v7/picker/controller/demo.html
similarity index 97%
rename from static/usage/v7/picker/single-column/demo.html
rename to static/usage/v7/picker/controller/demo.html
index 6f81b1c6e8f..25d3cfc5662 100644
--- a/static/usage/v7/picker/single-column/demo.html
+++ b/static/usage/v7/picker/controller/demo.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Picker | Single Column</title>
+  <title>Picker | 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>
diff --git a/static/usage/v7/picker/single-column/index.md b/static/usage/v7/picker/controller/index.md
similarity index 92%
rename from static/usage/v7/picker/single-column/index.md
rename to static/usage/v7/picker/controller/index.md
index 2632a11802c..890436259bb 100644
--- a/static/usage/v7/picker/single-column/index.md
+++ b/static/usage/v7/picker/controller/index.md
@@ -20,6 +20,6 @@ import angular_example_component_html from './angular/example_component_html.md'
       },
     },
   }}
-  src="usage/v7/picker/single-column/demo.html"
+  src="usage/v7/picker/controller/demo.html"
   size="medium"
 />
diff --git a/static/usage/v7/picker/single-column/javascript.md b/static/usage/v7/picker/controller/javascript.md
similarity index 100%
rename from static/usage/v7/picker/single-column/javascript.md
rename to static/usage/v7/picker/controller/javascript.md
diff --git a/static/usage/v7/picker/single-column/react.md b/static/usage/v7/picker/controller/react.md
similarity index 100%
rename from static/usage/v7/picker/single-column/react.md
rename to static/usage/v7/picker/controller/react.md
diff --git a/static/usage/v7/picker/single-column/vue.md b/static/usage/v7/picker/controller/vue.md
similarity index 100%
rename from static/usage/v7/picker/single-column/vue.md
rename to static/usage/v7/picker/controller/vue.md
diff --git a/static/usage/v7/picker/inline/isOpen/angular/example_component_html.md b/static/usage/v7/picker/inline/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..da4d9f1584d
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-button (click)="setOpen(true)">Open</ion-button>
+<ion-picker
+  [isOpen]="isPickerOpen"
+  [columns]="pickerColumns"
+  [buttons]="pickerButtons"
+  (didDismiss)="setOpen(false)"
+></ion-picker>
+```
diff --git a/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..1c0f482b98f
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  isPickerOpen = false;
+
+  public pickerColumns = [{
+    name: 'languages',
+    options: [
+      {
+        text: 'JavaScript',
+        value: 'javascript'
+      }, {
+        text: 'TypeScript',
+        value: 'typescript'
+      }, {
+        text: 'Rust',
+        value: 'rust'
+      }, {
+        text: 'C#',
+        value: 'c#'
+      }
+    ]
+  }];
+
+  public pickerButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel'
+    },
+    {
+      text: 'Confirm',
+      handler: (value) => {
+        window.alert(`You selected: ${value.languages.value}`);
+      }
+    }
+  ];
+
+  setOpen(isOpen: boolean) {
+    this.isPickerOpen = isOpen;
+  }
+}
+```
diff --git a/static/usage/v7/picker/inline/isOpen/demo.html b/static/usage/v7/picker/inline/isOpen/demo.html
new file mode 100644
index 00000000000..4a787ce459b
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/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>Picker | isOpen</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="picker.isOpen = true">Open</ion-button>
+        <ion-picker></ion-picker>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    var picker = document.querySelector('ion-picker');
+
+    picker.columns = [{
+      name: 'languages',
+      options: [
+        {
+          text: 'JavaScript',
+          value: 'javascript'
+        }, {
+          text: 'TypeScript',
+          value: 'typescript'
+        }, {
+          text: 'Rust',
+          value: 'rust'
+        }, {
+          text: 'C#',
+          value: 'c#'
+        }
+      ]
+    }];
+
+    picker.buttons = [
+      {
+        text: 'Cancel',
+        role: 'cancel'
+      },
+      {
+        text: 'Confirm',
+        handler: (value) => {
+          window.alert(`You selected: ${value.languages.value}`);
+        }
+      }
+    ];
+
+    picker.addEventListener('ionPickerDidDismiss', (ev) => {
+      picker.isOpen = false;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/picker/inline/isOpen/index.md b/static/usage/v7/picker/inline/isOpen/index.md
new file mode 100644
index 00000000000..34a92521bad
--- /dev/null
+++ b/static/usage/v7/picker/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_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/inline/isOpen/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/picker/inline/isOpen/javascript.md b/static/usage/v7/picker/inline/isOpen/javascript.md
new file mode 100644
index 00000000000..c06d97cbf81
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/javascript.md
@@ -0,0 +1,44 @@
+```html
+<ion-button onclick="picker.isOpen = true">Open</ion-button>
+<ion-picker></ion-picker>
+
+<script>
+  var picker = document.querySelector('ion-picker');
+
+  picker.columns = [{
+    name: 'languages',
+    options: [
+      {
+        text: 'JavaScript',
+        value: 'javascript'
+      }, {
+        text: 'TypeScript',
+        value: 'typescript'
+      }, {
+        text: 'Rust',
+        value: 'rust'
+      }, {
+        text: 'C#',
+        value: 'c#'
+      }
+    ]
+  }];
+
+  picker.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel'
+    },
+    {
+      text: 'Confirm',
+      handler: (value) => {
+        window.alert(`You selected: ${value.languages.value}`);
+      }
+    }
+  ];
+
+  picker.addEventListener('ionPickerDidDismiss', (ev) => {
+    picker.isOpen = false;
+  });
+</script>
+```
diff --git a/static/usage/v7/picker/inline/isOpen/react.md b/static/usage/v7/picker/inline/isOpen/react.md
new file mode 100644
index 00000000000..0e4c82f84d9
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonPicker } from '@ionic/react';
+
+function Example() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <IonButton onClick={() => setIsOpen(true)}>Open</IonButton>
+      <IonPicker
+        isOpen={isOpen}
+        onDidDismiss={() => setIsOpen(false)}
+        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}`);
+            }
+          }
+        ]}
+      ></IonPicker>
+    </>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/inline/isOpen/vue.md b/static/usage/v7/picker/inline/isOpen/vue.md
new file mode 100644
index 00000000000..d806c4cc42d
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/vue.md
@@ -0,0 +1,61 @@
+```html
+<template>
+  <ion-button @click="setOpen(true)">Open</ion-button>
+  <ion-picker
+    :is-open="isOpen"
+    :columns="pickerColumns"
+    :buttons="pickerButtons"
+    @didDismiss="setOpen(false)"
+  ></ion-picker>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonPicker } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonPicker },
+    setup() {
+      const isOpen = ref(false);
+
+      const pickerColumns = [{
+        name: 'languages',
+        options: [
+          {
+            text: 'JavaScript',
+            value: 'javascript'
+          }, {
+            text: 'TypeScript',
+            value: 'typescript'
+          }, {
+            text: 'Rust',
+            value: 'rust'
+          }, {
+            text: 'C#',
+            value: 'c#'
+          }
+        ]
+      }];
+
+      const pickerButtons = [
+        {
+          text: 'Cancel',
+          role: 'cancel'
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected: ${value.languages.value}`);
+          }
+        }
+      ];
+
+      const setOpen = (state: boolean) => {
+        isOpen.value = state;
+      }
+
+      return { pickerColumns, pickerButtons, isOpen, setOpen };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..af47368a129
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-button id="open-picker">Open</ion-button>
+<ion-picker
+  trigger="open-picker"
+  [columns]="pickerColumns"
+  [buttons]="pickerButtons"
+></ion-picker>
+```
diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..ebd914649f4
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  public pickerColumns = [{
+    name: 'languages',
+    options: [
+      {
+        text: 'JavaScript',
+        value: 'javascript'
+      }, {
+        text: 'TypeScript',
+        value: 'typescript'
+      }, {
+        text: 'Rust',
+        value: 'rust'
+      }, {
+        text: 'C#',
+        value: 'c#'
+      }
+    ]
+  }];
+
+  public pickerButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel'
+    },
+    {
+      text: 'Confirm',
+      handler: (value) => {
+        window.alert(`You selected: ${value.languages.value}`);
+      }
+    }
+  ];
+}
+```
diff --git a/static/usage/v7/picker/inline/trigger/demo.html b/static/usage/v7/picker/inline/trigger/demo.html
new file mode 100644
index 00000000000..7423fd338db
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/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>Picker | Trigger</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="open-picker">Open</ion-button>
+        <ion-picker trigger="open-picker"></ion-picker>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const picker = document.querySelector('ion-picker');
+
+    picker.columns = [{
+      name: 'languages',
+      options: [
+        {
+          text: 'JavaScript',
+          value: 'javascript'
+        }, {
+          text: 'TypeScript',
+          value: 'typescript'
+        }, {
+          text: 'Rust',
+          value: 'rust'
+        }, {
+          text: 'C#',
+          value: 'c#'
+        }
+      ]
+    }];
+
+    picker.buttons = [
+      {
+        text: 'Cancel',
+        role: 'cancel'
+      },
+      {
+        text: 'Confirm',
+        handler: (value) => {
+          window.alert(`You selected: ${value.languages.value}`);
+        }
+      }
+    ];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/picker/inline/trigger/index.md b/static/usage/v7/picker/inline/trigger/index.md
new file mode 100644
index 00000000000..1bd0ab3950f
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/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/inline/trigger/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/picker/inline/trigger/javascript.md b/static/usage/v7/picker/inline/trigger/javascript.md
new file mode 100644
index 00000000000..2b7a20eb138
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/javascript.md
@@ -0,0 +1,40 @@
+```html
+<ion-button id="open-picker">Open</ion-button>
+<ion-picker trigger="open-picker"></ion-picker>
+
+<script>
+  var picker = document.querySelector('ion-picker');
+
+  picker.columns = [{
+    name: 'languages',
+    options: [
+      {
+        text: 'JavaScript',
+        value: 'javascript'
+      }, {
+        text: 'TypeScript',
+        value: 'typescript'
+      }, {
+        text: 'Rust',
+        value: 'rust'
+      }, {
+        text: 'C#',
+        value: 'c#'
+      }
+    ]
+  }];
+
+  picker.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel'
+    },
+    {
+      text: 'Confirm',
+      handler: (value) => {
+        window.alert(`You selected: ${value.languages.value}`);
+      }
+    }
+  ];
+</script>
+```
diff --git a/static/usage/v7/picker/inline/trigger/react.md b/static/usage/v7/picker/inline/trigger/react.md
new file mode 100644
index 00000000000..ec20daef156
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonButton, IonPicker } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton id="open-picker">Open</IonButton>
+      <IonPicker
+        trigger="open-picker"
+        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}`);
+            }
+          }
+        ]}
+      ></IonPicker>
+    </>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md
new file mode 100644
index 00000000000..d4681ff66f6
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/vue.md
@@ -0,0 +1,54 @@
+```html
+<template>
+  <ion-button id="open-picker">Open</ion-button>
+  <ion-picker
+    trigger="open-picker"
+    :columns="pickerColumns"
+    :buttons="pickerButtons"
+  ></ion-picker>
+</template>
+
+<script>
+  import { IonButton, IonPicker } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonPicker },
+    setup() {
+      const pickerColumns = [{
+        name: 'languages',
+        options: [
+          {
+            text: 'JavaScript',
+            value: 'javascript'
+          }, {
+            text: 'TypeScript',
+            value: 'typescript'
+          }, {
+            text: 'Rust',
+            value: 'rust'
+          }, {
+            text: 'C#',
+            value: 'c#'
+          }
+        ]
+      }];
+
+      const pickerButtons = [
+        {
+          text: 'Cancel',
+          role: 'cancel'
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected: ${value.languages.value}`);
+          }
+        }
+      ];
+
+      return { pickerColumns, pickerButtons };
+    }
+  });
+</script>
+```
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
index 1e25fa99c40..af47368a129 100644
--- a/static/usage/v7/picker/multiple-column/angular/example_component_html.md
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_html.md
@@ -1,3 +1,8 @@
 ```html
-<ion-button (click)="openPicker()">Open</ion-button>
+<ion-button id="open-picker">Open</ion-button>
+<ion-picker
+  trigger="open-picker"
+  [columns]="pickerColumns"
+  [buttons]="pickerButtons"
+></ion-picker>
 ```
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
index ce535b1391a..11cd65eb0fc 100644
--- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
@@ -1,84 +1,66 @@
 ```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) {}
+  public pickerColumns = [{
+    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'
+      }
+    ]
+  }];
 
-  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();
-  }
+  public pickerButtons = [
+    {
+      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}`);
+      }
+    }
+  ];
 }
 ```
diff --git a/static/usage/v7/picker/multiple-column/demo.html b/static/usage/v7/picker/multiple-column/demo.html
index 50b673172e2..a192ba97ae7 100644
--- a/static/usage/v7/picker/multiple-column/demo.html
+++ b/static/usage/v7/picker/multiple-column/demo.html
@@ -7,83 +7,78 @@
   <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>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 </head>
 
 <body>
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="openPicker()">Open</ion-button>
+        <ion-button id="open-picker">Open</ion-button>
+        <ion-picker trigger="open-picker"></ion-picker>
       </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'
-            }
-          ]
+    const picker = document.querySelector('ion-picker');
+
+    picker.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'
         }, {
-          name: 'veggies',
-          options: [
-            {
-              text: 'Red onion',
-              value: 'red-onion'
-            }, {
-              text: 'Peppers',
-              value: 'peppers'
-            }, {
-              text: 'Black olives',
-              value: 'black-olives'
-            }
-          ]
+          text: 'Peppers',
+          value: 'peppers'
         }, {
-          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();
-    }
+          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'
+        }
+      ]
+    }];
+
+    picker.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}`);
+        }
+      }
+    ];
   </script>
 </body>
 
diff --git a/static/usage/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md
index 5024f90a43f..ad8e838a8c0 100644
--- a/static/usage/v7/picker/multiple-column/javascript.md
+++ b/static/usage/v7/picker/multiple-column/javascript.md
@@ -1,76 +1,65 @@
 ```html
-<ion-button onclick="openPicker()">Open</ion-button>
+<ion-button id="open-picker">Open</ion-button>
+<ion-picker trigger="open-picker"></ion-picker>
 
 <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();
-  }
+  var picker = document.querySelector('ion-picker');
+
+  picker.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'
+      }
+    ]
+  }];
+
+  picker.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}`);
+      }
+    }
+  ];
 </script>
 ```
diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md
index 1d0a47e178c..cfa6465169e 100644
--- a/static/usage/v7/picker/multiple-column/react.md
+++ b/static/usage/v7/picker/multiple-column/react.md
@@ -1,81 +1,73 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonPicker } from '@ionic/react';
+import { IonButton, IonPicker } 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 id="open-picker">Open</IonButton>
+      <IonPicker
+        trigger="open-picker"
+        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'
           },
-        },
-      ],
-    });
-  };
-
-  return <IonButton onClick={openPicker}>Open</IonButton>;
+          {
+            text: 'Confirm',
+            handler: (value) => {
+              window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+            }
+          }
+        ]}
+      ></IonPicker>
+    </>
+  );
 }
 
 export default Example;
diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md
index 07418f16bbf..df54238bf66 100644
--- a/static/usage/v7/picker/multiple-column/vue.md
+++ b/static/usage/v7/picker/multiple-column/vue.md
@@ -1,93 +1,79 @@
 ```html
 <template>
-  <ion-button @click="openPicker()">Open</ion-button>
+  <ion-button id="open-picker">Open</ion-button>
+  <ion-picker
+    trigger="open-picker"
+    :columns="pickerColumns"
+    :buttons="pickerButtons"
+  ></ion-picker>
 </template>
 
 <script>
-  import { IonButton, pickerController } from '@ionic/vue';
+  import { IonButton, IonPicker } 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();
-      },
-    },
+    components: { IonButton, IonPicker },
+    setup() {
+      const pickerColumns = [{
+        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'
+          }
+        ]
+      }];
+
+      const pickerButtons = [
+        {
+          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 { pickerColumns, pickerButtons };
+    }
   });
 </script>
 ```

From 94da7634c604cdb226c5be0ae479afbf3fafbdc3 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 23 Jan 2023 16:10:09 -0600
Subject: [PATCH 167/469] docs(icon): add dedicated component page and
 playground (#2710)

---
 docs/api/icon.md                            | 21 ++++++++++++++++
 docs/components.md                          |  2 +-
 sidebars.js                                 | 14 ++---------
 static/usage/v6/icon/basic/angular.md       |  6 +++++
 static/usage/v6/icon/basic/demo.html        | 28 +++++++++++++++++++++
 static/usage/v6/icon/basic/index.md         |  8 ++++++
 static/usage/v6/icon/basic/javascript.md    |  6 +++++
 static/usage/v6/icon/basic/react.md         | 17 +++++++++++++
 static/usage/v6/icon/basic/vue.md           | 21 ++++++++++++++++
 static/usage/v7/icon/basic/angular.md       |  6 +++++
 static/usage/v7/icon/basic/demo.html        | 28 +++++++++++++++++++++
 static/usage/v7/icon/basic/index.md         |  8 ++++++
 static/usage/v7/icon/basic/javascript.md    |  6 +++++
 static/usage/v7/icon/basic/react.md         | 17 +++++++++++++
 static/usage/v7/icon/basic/vue.md           | 21 ++++++++++++++++
 versioned_docs/version-v6/api/icon.md       | 21 ++++++++++++++++
 versioned_docs/version-v6/components.md     |  2 +-
 versioned_sidebars/version-v6-sidebars.json | 10 +++-----
 18 files changed, 222 insertions(+), 20 deletions(-)
 create mode 100644 docs/api/icon.md
 create mode 100644 static/usage/v6/icon/basic/angular.md
 create mode 100644 static/usage/v6/icon/basic/demo.html
 create mode 100644 static/usage/v6/icon/basic/index.md
 create mode 100644 static/usage/v6/icon/basic/javascript.md
 create mode 100644 static/usage/v6/icon/basic/react.md
 create mode 100644 static/usage/v6/icon/basic/vue.md
 create mode 100644 static/usage/v7/icon/basic/angular.md
 create mode 100644 static/usage/v7/icon/basic/demo.html
 create mode 100644 static/usage/v7/icon/basic/index.md
 create mode 100644 static/usage/v7/icon/basic/javascript.md
 create mode 100644 static/usage/v7/icon/basic/react.md
 create mode 100644 static/usage/v7/icon/basic/vue.md
 create mode 100644 versioned_docs/version-v6/api/icon.md

diff --git a/docs/api/icon.md b/docs/api/icon.md
new file mode 100644
index 00000000000..0b7f2f8e2f4
--- /dev/null
+++ b/docs/api/icon.md
@@ -0,0 +1,21 @@
+---
+title: 'ion-icon'
+---
+
+<head>
+  <title>ion-icon: Icon Component for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="Ion-icon is a component for displaying premium designed icons with support for SVG and web font."
+  />
+</head>
+
+Icon is a simple component made available through the <a href="https://ionic.io/ionicons">Ionicons</a> library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
+
+For more information, including styling and all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v7/icon/basic/index.md';
+
+<Basic />
\ No newline at end of file
diff --git a/docs/components.md b/docs/components.md
index 4e6a648d899..9b5518e95d6 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -66,7 +66,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <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">
+<DocsCard header="Icons" href="api/icon" img="/icons/feature-component-icons-icon.png">
   <p>Beautifully designed icons for use in web, iOS, Android, and desktop apps.</p>
 </DocsCard>
 
diff --git a/sidebars.js b/sidebars.js
index 23fe2facdfd..d8ed916e762 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -330,13 +330,7 @@ module.exports = {
       type: 'category',
       label: 'Icons',
       collapsed: false,
-      items: [
-        {
-          type: 'link',
-          label: 'ion-icon',
-          href: 'https://ionicons.com',
-        },
-      ],
+      items: ['api/icon'],
     },
     {
       type: 'category',
@@ -371,11 +365,7 @@ module.exports = {
       collapsed: false,
       items: [
         'api/avatar',
-        {
-          type: 'link',
-          label: 'ion-icon',
-          href: 'https://ionicons.com',
-        },
+        'api/icon',
         'api/img',
         'api/thumbnail',
       ],
diff --git a/static/usage/v6/icon/basic/angular.md b/static/usage/v6/icon/basic/angular.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v6/icon/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-icon name="logo-ionic"></ion-icon>
+<ion-icon name="logo-ionic" size="large"></ion-icon>
+<ion-icon name="logo-ionic" color="primary"></ion-icon>
+<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+```
diff --git a/static/usage/v6/icon/basic/demo.html b/static/usage/v6/icon/basic/demo.html
new file mode 100644
index 00000000000..f2284770ab9
--- /dev/null
+++ b/static/usage/v6/icon/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>Icon</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.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-icon name="logo-ionic"></ion-icon>
+        <ion-icon name="logo-ionic" size="large"></ion-icon>
+        <ion-icon name="logo-ionic" color="primary"></ion-icon>
+        <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md
new file mode 100644
index 00000000000..a0a026e6e78
--- /dev/null
+++ b/static/usage/v6/icon/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="xsmall" code={{ javascript, react, vue, angular }} src="usage/v6/icon/basic/demo.html" />
diff --git a/static/usage/v6/icon/basic/javascript.md b/static/usage/v6/icon/basic/javascript.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v6/icon/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-icon name="logo-ionic"></ion-icon>
+<ion-icon name="logo-ionic" size="large"></ion-icon>
+<ion-icon name="logo-ionic" color="primary"></ion-icon>
+<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+```
diff --git a/static/usage/v6/icon/basic/react.md b/static/usage/v6/icon/basic/react.md
new file mode 100644
index 00000000000..57383875130
--- /dev/null
+++ b/static/usage/v6/icon/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import { logoIonic } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonIcon icon={logoIonic}></IonIcon>
+      <IonIcon icon={logoIonic} size="large"></IonIcon>
+      <IonIcon icon={logoIonic} color="primary"></IonIcon>
+      <IonIcon icon={logoIonic} size="large" color="primary"></IonIcon>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/icon/basic/vue.md b/static/usage/v6/icon/basic/vue.md
new file mode 100644
index 00000000000..c78d79fb041
--- /dev/null
+++ b/static/usage/v6/icon/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-icon :icon="logoIonic"></ion-icon>
+  <ion-icon :icon="logoIonic" size="large"></ion-icon>
+  <ion-icon :icon="logoIonic" color="primary"></ion-icon>
+  <ion-icon :icon="logoIonic" size="large" color="primary"></ion-icon>
+</template>
+
+<script lang="ts">
+  import { IonIcon } from '@ionic/vue';
+  import { logoIonic } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon },
+    setup() {
+      return { logoIonic };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/icon/basic/angular.md b/static/usage/v7/icon/basic/angular.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v7/icon/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-icon name="logo-ionic"></ion-icon>
+<ion-icon name="logo-ionic" size="large"></ion-icon>
+<ion-icon name="logo-ionic" color="primary"></ion-icon>
+<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+```
diff --git a/static/usage/v7/icon/basic/demo.html b/static/usage/v7/icon/basic/demo.html
new file mode 100644
index 00000000000..f2284770ab9
--- /dev/null
+++ b/static/usage/v7/icon/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>Icon</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.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-icon name="logo-ionic"></ion-icon>
+        <ion-icon name="logo-ionic" size="large"></ion-icon>
+        <ion-icon name="logo-ionic" color="primary"></ion-icon>
+        <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md
new file mode 100644
index 00000000000..f654aceed5e
--- /dev/null
+++ b/static/usage/v7/icon/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="xsmall" code={{ javascript, react, vue, angular }} src="usage/v7/icon/basic/demo.html" />
diff --git a/static/usage/v7/icon/basic/javascript.md b/static/usage/v7/icon/basic/javascript.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v7/icon/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-icon name="logo-ionic"></ion-icon>
+<ion-icon name="logo-ionic" size="large"></ion-icon>
+<ion-icon name="logo-ionic" color="primary"></ion-icon>
+<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+```
diff --git a/static/usage/v7/icon/basic/react.md b/static/usage/v7/icon/basic/react.md
new file mode 100644
index 00000000000..57383875130
--- /dev/null
+++ b/static/usage/v7/icon/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import { logoIonic } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonIcon icon={logoIonic}></IonIcon>
+      <IonIcon icon={logoIonic} size="large"></IonIcon>
+      <IonIcon icon={logoIonic} color="primary"></IonIcon>
+      <IonIcon icon={logoIonic} size="large" color="primary"></IonIcon>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/icon/basic/vue.md b/static/usage/v7/icon/basic/vue.md
new file mode 100644
index 00000000000..c78d79fb041
--- /dev/null
+++ b/static/usage/v7/icon/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-icon :icon="logoIonic"></ion-icon>
+  <ion-icon :icon="logoIonic" size="large"></ion-icon>
+  <ion-icon :icon="logoIonic" color="primary"></ion-icon>
+  <ion-icon :icon="logoIonic" size="large" color="primary"></ion-icon>
+</template>
+
+<script lang="ts">
+  import { IonIcon } from '@ionic/vue';
+  import { logoIonic } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon },
+    setup() {
+      return { logoIonic };
+    },
+  });
+</script>
+```
diff --git a/versioned_docs/version-v6/api/icon.md b/versioned_docs/version-v6/api/icon.md
new file mode 100644
index 00000000000..e0d413e94f3
--- /dev/null
+++ b/versioned_docs/version-v6/api/icon.md
@@ -0,0 +1,21 @@
+---
+title: 'ion-icon'
+---
+
+<head>
+  <title>ion-icon: Icon Component for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="Ion-icon is a component for displaying premium designed icons with support for SVG and web font."
+  />
+</head>
+
+Icon is a simple component made available through the <a href="https://ionic.io/ionicons">Ionicons</a> library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
+
+For more information, including styling and all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/icon/basic/index.md';
+
+<Basic />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/components.md b/versioned_docs/version-v6/components.md
index 4e6a648d899..9b5518e95d6 100644
--- a/versioned_docs/version-v6/components.md
+++ b/versioned_docs/version-v6/components.md
@@ -66,7 +66,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <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">
+<DocsCard header="Icons" href="api/icon" img="/icons/feature-component-icons-icon.png">
   <p>Beautifully designed icons for use in web, iOS, Android, and desktop apps.</p>
 </DocsCard>
 
diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json
index e3cef30cec7..3a00763e1bb 100644
--- a/versioned_sidebars/version-v6-sidebars.json
+++ b/versioned_sidebars/version-v6-sidebars.json
@@ -846,9 +846,8 @@
       "collapsed": false,
       "items": [
         {
-          "type": "link",
-          "label": "ion-icon",
-          "href": "https://ionicons.com"
+          "type": "doc",
+          "id": "version-v6/api/icon"
         }
       ],
       "collapsible": true
@@ -935,9 +934,8 @@
           "id": "version-v6/api/avatar"
         },
         {
-          "type": "link",
-          "label": "ion-icon",
-          "href": "https://ionicons.com"
+          "type": "doc",
+          "id": "version-v6/api/icon"
         },
         {
           "type": "doc",

From c407e8748f05283c60b379918978775b19cfce44 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 23 Jan 2023 16:10:18 -0600
Subject: [PATCH 168/469] docs(icon): add dedicated component page and
 playground (#2716)

---
 docs/api/icon.md                      | 21 ++++++++++++++++++++
 docs/components.md                    |  2 +-
 sidebars.js                           | 14 ++------------
 static/usage/icon/basic/angular.md    |  6 ++++++
 static/usage/icon/basic/demo.html     | 28 +++++++++++++++++++++++++++
 static/usage/icon/basic/index.md      |  8 ++++++++
 static/usage/icon/basic/javascript.md |  6 ++++++
 static/usage/icon/basic/react.md      | 16 +++++++++++++++
 static/usage/icon/basic/vue.md        | 20 +++++++++++++++++++
 9 files changed, 108 insertions(+), 13 deletions(-)
 create mode 100644 docs/api/icon.md
 create mode 100644 static/usage/icon/basic/angular.md
 create mode 100644 static/usage/icon/basic/demo.html
 create mode 100644 static/usage/icon/basic/index.md
 create mode 100644 static/usage/icon/basic/javascript.md
 create mode 100644 static/usage/icon/basic/react.md
 create mode 100644 static/usage/icon/basic/vue.md

diff --git a/docs/api/icon.md b/docs/api/icon.md
new file mode 100644
index 00000000000..93a3b43f113
--- /dev/null
+++ b/docs/api/icon.md
@@ -0,0 +1,21 @@
+---
+title: 'ion-icon'
+---
+
+<head>
+  <title>ion-icon: Icon Component for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="Ion-icon is a component for displaying premium designed icons with support for SVG and web font."
+  />
+</head>
+
+Icon is a simple component made available through the <a href="https://ionic.io/ionicons">Ionicons</a> library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
+
+For more information, including styling and all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/icon/basic/index.md';
+
+<Basic />
\ No newline at end of file
diff --git a/docs/components.md b/docs/components.md
index 2ae43fcf4fd..2959fa8c925 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -66,7 +66,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <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">
+<DocsCard header="Icons" href="api/icon" img="/icons/feature-component-icons-icon.png">
   <p>Beautifully designed icons for use in web, iOS, Android, and desktop apps.</p>
 </DocsCard>
 
diff --git a/sidebars.js b/sidebars.js
index 0802f3a15b7..1780e7b6fbb 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -320,13 +320,7 @@ module.exports = {
       type: 'category',
       label: 'Icons',
       collapsed: false,
-      items: [
-        {
-          type: 'link',
-          label: 'ion-icon',
-          href: 'https://ionicons.com',
-        },
-      ],
+      items: ['api/icon'],
     },
     {
       type: 'category',
@@ -361,11 +355,7 @@ module.exports = {
       collapsed: false,
       items: [
         'api/avatar',
-        {
-          type: 'link',
-          label: 'ion-icon',
-          href: 'https://ionicons.com',
-        },
+        'api/icon',
         'api/img',
         'api/thumbnail',
       ],
diff --git a/static/usage/icon/basic/angular.md b/static/usage/icon/basic/angular.md
new file mode 100644
index 00000000000..491062dae64
--- /dev/null
+++ b/static/usage/icon/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-icon name="logo-ionic"></ion-icon>
+<ion-icon name="logo-ionic" size="large"></ion-icon>
+<ion-icon name="logo-ionic" color="primary"></ion-icon>
+<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+```
\ No newline at end of file
diff --git a/static/usage/icon/basic/demo.html b/static/usage/icon/basic/demo.html
new file mode 100644
index 00000000000..4504eab70b8
--- /dev/null
+++ b/static/usage/icon/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>Icon</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.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-icon name="logo-ionic"></ion-icon>
+        <ion-icon name="logo-ionic" size="large"></ion-icon>
+        <ion-icon name="logo-ionic" color="primary"></ion-icon>
+        <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/icon/basic/index.md b/static/usage/icon/basic/index.md
new file mode 100644
index 00000000000..b1c2cba7497
--- /dev/null
+++ b/static/usage/icon/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="xsmall" code={{ javascript, react, vue, angular }} src="usage/icon/basic/demo.html" />
\ No newline at end of file
diff --git a/static/usage/icon/basic/javascript.md b/static/usage/icon/basic/javascript.md
new file mode 100644
index 00000000000..491062dae64
--- /dev/null
+++ b/static/usage/icon/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-icon name="logo-ionic"></ion-icon>
+<ion-icon name="logo-ionic" size="large"></ion-icon>
+<ion-icon name="logo-ionic" color="primary"></ion-icon>
+<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+```
\ No newline at end of file
diff --git a/static/usage/icon/basic/react.md b/static/usage/icon/basic/react.md
new file mode 100644
index 00000000000..facad70cbc4
--- /dev/null
+++ b/static/usage/icon/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import { logoIonic } from 'ionicons/icons';
+function Example() {
+  return (
+    <>
+      <IonIcon icon={logoIonic}></IonIcon>
+      <IonIcon icon={logoIonic} size="large"></IonIcon>
+      <IonIcon icon={logoIonic} color="primary"></IonIcon>
+      <IonIcon icon={logoIonic} size="large" color="primary"></IonIcon>
+    </>
+  );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/icon/basic/vue.md b/static/usage/icon/basic/vue.md
new file mode 100644
index 00000000000..3ced71f77af
--- /dev/null
+++ b/static/usage/icon/basic/vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-icon :icon="logoIonic"></ion-icon>
+  <ion-icon :icon="logoIonic" size="large"></ion-icon>
+  <ion-icon :icon="logoIonic" color="primary"></ion-icon>
+  <ion-icon :icon="logoIonic" size="large" color="primary"></ion-icon>
+</template>
+
+<script lang="ts">
+  import { IonIcon } from '@ionic/vue';
+  import { logoIonic } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    components: { IonIcon },
+    setup() {
+      return { logoIonic };
+    },
+  });
+</script>
+```
\ No newline at end of file

From efe74c78ab2d266cc5011966c40f41eed19952a2 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 24 Jan 2023 09:04:08 -0600
Subject: [PATCH 169/469] docs(action-sheet): add inline usage  (#2699)

---
 docs/api/action-sheet.md                      | 34 ++++++++-
 .../basic/angular/example_component_html.md   |  6 --
 .../v7/action-sheet/basic/react/main_tsx.md   | 52 -------------
 .../angular/example_component_html.md         |  3 +
 .../angular/example_component_ts.md           |  9 +--
 .../{basic => controller}/demo.html           | 19 +----
 .../usage/v7/action-sheet/controller/index.md | 27 +++++++
 .../{basic => controller}/javascript.md       | 27 +------
 .../usage/v7/action-sheet/controller/react.md | 43 +++++++++++
 .../action-sheet/{basic => controller}/vue.md | 33 +--------
 .../isOpen/angular/example_component_html.md  |  9 +++
 .../isOpen/angular/example_component_ts.md    | 37 ++++++++++
 .../v7/action-sheet/inline/isOpen/demo.html   | 55 ++++++++++++++
 .../v7/action-sheet/inline/isOpen/index.md    | 27 +++++++
 .../action-sheet/inline/isOpen/javascript.md  | 35 +++++++++
 .../v7/action-sheet/inline/isOpen/react.md    | 42 +++++++++++
 .../v7/action-sheet/inline/isOpen/vue.md      | 55 ++++++++++++++
 .../trigger/angular/example_component_html.md |  8 ++
 .../trigger/angular/example_component_ts.md   | 32 ++++++++
 .../v7/action-sheet/inline/trigger/demo.html  | 54 ++++++++++++++
 .../v7/action-sheet/inline/trigger/index.md   | 27 +++++++
 .../action-sheet/inline/trigger/javascript.md | 34 +++++++++
 .../v7/action-sheet/inline/trigger/react.md   | 39 ++++++++++
 .../v7/action-sheet/inline/trigger/vue.md     | 44 +++++++++++
 .../angular/example_component_css.md          |  0
 .../angular/example_component_html.md         | 14 ++++
 .../angular/example_component_ts.md           | 40 ++++++++++
 .../role-info-on-dismiss/demo.html            | 72 ++++++++++++++++++
 .../{basic => role-info-on-dismiss}/index.md  |  2 +-
 .../role-info-on-dismiss/javascript.md        | 58 +++++++++++++++
 .../react/main_css.md                         |  0
 .../role-info-on-dismiss/react/main_tsx.md    | 48 ++++++++++++
 .../action-sheet/role-info-on-dismiss/vue.md  | 74 +++++++++++++++++++
 .../angular/example_component_html.md         |  9 ++-
 .../angular/example_component_ts.md           | 57 ++++++--------
 .../theming/css-properties/demo.html          | 29 ++++----
 .../theming/css-properties/javascript.md      | 61 ++++++++-------
 .../theming/css-properties/react/main_tsx.md  | 68 ++++++++---------
 .../theming/css-properties/vue.md             | 68 +++++++++--------
 .../styling/angular/example_component_html.md |  9 ++-
 .../styling/angular/example_component_ts.md   | 57 ++++++--------
 .../v7/action-sheet/theming/styling/demo.html | 25 +++----
 .../theming/styling/javascript.md             | 61 ++++++++-------
 .../theming/styling/react/main_tsx.md         | 68 ++++++++---------
 .../v7/action-sheet/theming/styling/vue.md    | 67 +++++++++--------
 45 files changed, 1195 insertions(+), 443 deletions(-)
 delete mode 100644 static/usage/v7/action-sheet/basic/angular/example_component_html.md
 delete mode 100644 static/usage/v7/action-sheet/basic/react/main_tsx.md
 create mode 100644 static/usage/v7/action-sheet/controller/angular/example_component_html.md
 rename static/usage/v7/action-sheet/{basic => controller}/angular/example_component_ts.md (78%)
 rename static/usage/v7/action-sheet/{basic => controller}/demo.html (75%)
 create mode 100644 static/usage/v7/action-sheet/controller/index.md
 rename static/usage/v7/action-sheet/{basic => controller}/javascript.md (50%)
 create mode 100644 static/usage/v7/action-sheet/controller/react.md
 rename static/usage/v7/action-sheet/{basic => controller}/vue.md (57%)
 create mode 100644 static/usage/v7/action-sheet/inline/isOpen/angular/example_component_html.md
 create mode 100644 static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
 create mode 100644 static/usage/v7/action-sheet/inline/isOpen/demo.html
 create mode 100644 static/usage/v7/action-sheet/inline/isOpen/index.md
 create mode 100644 static/usage/v7/action-sheet/inline/isOpen/javascript.md
 create mode 100644 static/usage/v7/action-sheet/inline/isOpen/react.md
 create mode 100644 static/usage/v7/action-sheet/inline/isOpen/vue.md
 create mode 100644 static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
 create mode 100644 static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
 create mode 100644 static/usage/v7/action-sheet/inline/trigger/demo.html
 create mode 100644 static/usage/v7/action-sheet/inline/trigger/index.md
 create mode 100644 static/usage/v7/action-sheet/inline/trigger/javascript.md
 create mode 100644 static/usage/v7/action-sheet/inline/trigger/react.md
 create mode 100644 static/usage/v7/action-sheet/inline/trigger/vue.md
 rename static/usage/v7/action-sheet/{basic => role-info-on-dismiss}/angular/example_component_css.md (100%)
 create mode 100644 static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md
 create mode 100644 static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
 create mode 100644 static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
 rename static/usage/v7/action-sheet/{basic => role-info-on-dismiss}/index.md (93%)
 create mode 100644 static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
 rename static/usage/v7/action-sheet/{basic => role-info-on-dismiss}/react/main_css.md (100%)
 create mode 100644 static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
 create mode 100644 static/usage/v7/action-sheet/role-info-on-dismiss/vue.md

diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index fffce948f6e..64943f9fcf2 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -20,9 +20,31 @@ 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/v7/action-sheet/basic/index.md';
+## Inline Action Sheets (Recommended)
 
-<Basic />
+`ion-action-sheet` 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 Action Sheet.
+
+import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
+
+<Trigger />
+
+### Using `isOpen`
+
+The `isOpen` property on `ion-action-sheet` allows developers to control the presentation state of the Action Sheet from their application state. This means when `isOpen` is set to `true` the Action Sheet will be presented, and when `isOpen` is set to `false` the Action Sheet will be dismissed.
+
+`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet 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 IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
+
+<IsOpen />
+
+## Controller Action Sheets
+
+The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed.
+
+import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
+
+<Controller />
 
 ## Buttons
 
@@ -30,6 +52,14 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
 
 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.
 
+## Collecting Role Information on Dismiss
+
+When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed.
+
+import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
+
+<RoleInfo />
+
 ## 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.
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
deleted file mode 100644
index 0169d776c0f..00000000000
--- a/static/usage/v7/action-sheet/basic/angular/example_component_html.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```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/react/main_tsx.md b/static/usage/v7/action-sheet/basic/react/main_tsx.md
deleted file mode 100644
index c24b2e00076..00000000000
--- a/static/usage/v7/action-sheet/basic/react/main_tsx.md
+++ /dev/null
@@ -1,52 +0,0 @@
-```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/controller/angular/example_component_html.md b/static/usage/v7/action-sheet/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..2cc044fbee1
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/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/basic/angular/example_component_ts.md b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md
similarity index 78%
rename from static/usage/v7/action-sheet/basic/angular/example_component_ts.md
rename to static/usage/v7/action-sheet/controller/angular/example_component_ts.md
index 3961dc7ff5e..c7ecc272663 100644
--- a/static/usage/v7/action-sheet/basic/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md
@@ -6,17 +6,13 @@ 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',
+      header: 'Actions',
       buttons: [
         {
           text: 'Delete',
@@ -42,9 +38,6 @@ export class ExampleComponent {
     });
 
     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/controller/demo.html
similarity index 75%
rename from static/usage/v7/action-sheet/basic/demo.html
rename to static/usage/v7/action-sheet/controller/demo.html
index b41118e24ab..c3e407fa1f9 100644
--- a/static/usage/v7/action-sheet/basic/demo.html
+++ b/static/usage/v7/action-sheet/controller/demo.html
@@ -9,16 +9,6 @@
   <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/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>
@@ -26,17 +16,13 @@
     <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.header = 'Actions';
       actionSheet.buttons = [{
         text: 'Delete',
         role: 'destructive',
@@ -60,9 +46,6 @@
 
       document.body.appendChild(actionSheet);
       await actionSheet.present();
-
-      const result = await actionSheet.onDidDismiss();
-      action.innerText = JSON.stringify(result, null, 2);
     }
   </script>
 </body>
diff --git a/static/usage/v7/action-sheet/controller/index.md b/static/usage/v7/action-sheet/controller/index.md
new file mode 100644
index 00000000000..f761b958240
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/index.md
@@ -0,0 +1,27 @@
+import 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/action-sheet/controller/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/action-sheet/basic/javascript.md b/static/usage/v7/action-sheet/controller/javascript.md
similarity index 50%
rename from static/usage/v7/action-sheet/basic/javascript.md
rename to static/usage/v7/action-sheet/controller/javascript.md
index ec0dbca6eb3..e4c32b54f09 100644
--- a/static/usage/v7/action-sheet/basic/javascript.md
+++ b/static/usage/v7/action-sheet/controller/javascript.md
@@ -1,30 +1,10 @@
 ```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>
+<ion-button onclick="presentActionSheet()">Open</ion-button>
 
 <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.header = 'Actions';
     actionSheet.buttons = [
       {
         text: 'Delete',
@@ -50,9 +30,6 @@
 
     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/controller/react.md b/static/usage/v7/action-sheet/controller/react.md
new file mode 100644
index 00000000000..0fb6f90cbf7
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonActionSheet } from '@ionic/react';
+
+function Example() {
+  const [present] = useIonActionSheet();
+
+  return (
+    <IonButton
+      onClick={() =>
+        present({
+          header: 'Actions',
+          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/basic/vue.md b/static/usage/v7/action-sheet/controller/vue.md
similarity index 57%
rename from static/usage/v7/action-sheet/basic/vue.md
rename to static/usage/v7/action-sheet/controller/vue.md
index fa29fa1de89..8e98e65e36a 100644
--- a/static/usage/v7/action-sheet/basic/vue.md
+++ b/static/usage/v7/action-sheet/controller/vue.md
@@ -1,38 +1,17 @@
 ```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>
+  <ion-button @click="presentActionSheet">Open</ion-button>
 </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',
+          header: 'Actions',
           buttons: [
             {
               text: 'Delete',
@@ -58,15 +37,9 @@
         });
 
         await actionSheet.present();
-
-        const res = await actionSheet.onDidDismiss();
-        result.value = JSON.stringify(res, null, 2);
       };
 
-      return {
-        result,
-        presentActionSheet,
-      };
+      return { presentActionSheet };
     },
   };
 </script>
diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..a2af98772fd
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-button (click)="setOpen(true)">Open</ion-button>
+<ion-action-sheet
+  [isOpen]="isActionSheetOpen"
+  header="Actions"
+  [buttons]="actionSheetButtons"
+  (didDismiss)="setOpen(false)"
+></ion-action-sheet>
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..381691b1f0c
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/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 {
+  isActionSheetOpen = false;
+  public actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
+  
+  setOpen(isOpen: boolean) {
+    this.isActionSheetOpen = isOpen;
+  }
+}
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/demo.html b/static/usage/v7/action-sheet/inline/isOpen/demo.html
new file mode 100644
index 00000000000..6bfbc3ebb9e
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/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>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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="actionSheet.isOpen = true">Open</ion-button>
+        <ion-action-sheet header="Actions"></ion-action-sheet>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    var actionSheet = document.querySelector('ion-action-sheet');
+
+    actionSheet.buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }
+    ];
+
+    actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+      actionSheet.isOpen = false;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/inline/isOpen/index.md b/static/usage/v7/action-sheet/inline/isOpen/index.md
new file mode 100644
index 00000000000..86cf87ab2cd
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/index.md
@@ -0,0 +1,27 @@
+import 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/action-sheet/inline/isOpen/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/action-sheet/inline/isOpen/javascript.md b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
new file mode 100644
index 00000000000..6557f4f4c50
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-button onclick="actionSheet.isOpen = true">Open</ion-button>
+<ion-action-sheet header="Actions"></ion-action-sheet>
+
+<script>
+  var actionSheet = document.querySelector('ion-action-sheet');
+
+  actionSheet.buttons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
+
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+    actionSheet.isOpen = false;
+  });
+</script>
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/react.md b/static/usage/v7/action-sheet/inline/isOpen/react.md
new file mode 100644
index 00000000000..5497ad7b574
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React, { useState } from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+function Example() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <IonButton onClick={() => setIsOpen(true)}>Open</IonButton>
+      <IonActionSheet
+        isOpen={isOpen}
+        header="Actions"
+        buttons={[
+          {
+            text: 'Delete',
+            role: 'destructive',
+            data: {
+              action: 'delete'
+            }
+          },
+          {
+            text: 'Share',
+            data: {
+              action: 'share'
+            }
+          },
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            data: {
+              action: 'cancel'
+            }
+          }
+        ]}
+        onDidDismiss={() => setIsOpen(false)}
+      ></IonActionSheet>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md
new file mode 100644
index 00000000000..a3131033fff
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md
@@ -0,0 +1,55 @@
+```html
+<template>
+  <ion-button @click="setOpen(true)">Open</ion-button>
+  <ion-action-sheet
+    :is-open="isOpen"
+    header="Actions"
+    :buttons="actionSheetButtons"
+    @didDismiss="setOpen(false)"
+  ></ion-action-sheet>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { IonActionSheet, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonActionSheet, IonButton },
+    setup() {
+      const isOpen = ref(false);
+      const actionSheetButtons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
+
+      const setOpen = (state: boolean) => {
+        isOpen.value = state;
+      };
+
+      return {
+        actionSheetButtons,
+        isOpen,
+        setOpen
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..bf4d4580341
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-button id="open-action-sheet">Open</ion-button>
+<ion-action-sheet
+  trigger="open-action-sheet"
+  header="Actions"
+  [buttons]="actionSheetButtons"
+></ion-action-sheet>
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..2834f65e3e3
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  public actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
+}
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/demo.html b/static/usage/v7/action-sheet/inline/trigger/demo.html
new file mode 100644
index 00000000000..6c6b6c0b91c
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/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>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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="open-action-sheet">Open</ion-button>
+        <ion-action-sheet
+          trigger="open-action-sheet"
+          header="Actions"
+        ></ion-action-sheet>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const actionSheet = document.querySelector('ion-action-sheet');
+
+    actionSheet.buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }
+    ];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/inline/trigger/index.md b/static/usage/v7/action-sheet/inline/trigger/index.md
new file mode 100644
index 00000000000..b35cd485cbe
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/index.md
@@ -0,0 +1,27 @@
+import 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/action-sheet/inline/trigger/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/action-sheet/inline/trigger/javascript.md b/static/usage/v7/action-sheet/inline/trigger/javascript.md
new file mode 100644
index 00000000000..8e769fe0ed1
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/javascript.md
@@ -0,0 +1,34 @@
+```html
+<ion-button id="open-action-sheet">Open</ion-button>
+<ion-action-sheet
+  trigger="open-action-sheet"
+  header="Actions"
+></ion-action-sheet>
+
+<script>
+  var actionSheet = document.querySelector('ion-action-sheet');
+
+  actionSheet.buttons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
+</script>
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/react.md b/static/usage/v7/action-sheet/inline/trigger/react.md
new file mode 100644
index 00000000000..6890d0be7a8
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton id="open-action-sheet">Open</IonButton>
+      <IonActionSheet
+        trigger="open-action-sheet"
+        header="Actions"
+        buttons={[
+          {
+            text: 'Delete',
+            role: 'destructive',
+            data: {
+              action: 'delete'
+            }
+          },
+          {
+            text: 'Share',
+            data: {
+              action: 'share'
+            }
+          },
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            data: {
+              action: 'cancel'
+            }
+          }
+        ]}
+      ></IonActionSheet>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md
new file mode 100644
index 00000000000..4c681af50b6
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-button id="open-action-sheet">Open</ion-button>
+  <ion-action-sheet
+    trigger="open-action-sheet"
+    header="Actions"
+    :buttons="actionSheetButtons"
+  ></ion-action-sheet>
+</template>
+
+<script lang="ts">
+  import { IonActionSheet, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonActionSheet, IonButton },
+    setup() {
+      const actionSheetButtons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
+
+      return { actionSheetButtons };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/action-sheet/basic/angular/example_component_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md
similarity index 100%
rename from static/usage/v7/action-sheet/basic/angular/example_component_css.md
rename to static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md
new file mode 100644
index 00000000000..6a1d54531f9
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+<div class="container">
+  <ion-button id="open-action-sheet">Open</ion-button>
+  <ion-action-sheet
+    trigger="open-action-sheet"
+    header="Example header"
+    subHeader="Example subheader"
+    [buttons]="actionSheetButtons"
+    (didDismiss)="setResult($event)"
+  ></ion-action-sheet>
+
+  <code *ngIf="result">{{ result }}</code>
+</div>
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
new file mode 100644
index 00000000000..146729f88db
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  result: string;
+  public actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
+
+  constructor() {}
+
+  setResult(ev) {
+    this.result = JSON.stringify(ev.detail, null, 2);
+  }
+}
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
new file mode 100644
index 00000000000..ec13be6f6a5
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/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>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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/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 id="open-action-sheet">Open</ion-button>
+        <ion-action-sheet
+          trigger="open-action-sheet"
+          header="Example header"
+          sub-header="Example subheader"
+        ></ion-action-sheet>
+
+        <code id="action"></code>
+      </div>
+    </ion-content>
+  </ion-app>
+  <script>
+    const actionSheet = document.querySelector('ion-action-sheet');
+    const action = document.getElementById('action');
+
+    actionSheet.buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        data: {
+          action: 'delete'
+        }
+      },
+      {
+        text: 'Share',
+        data: {
+          action: 'share'
+        }
+      },
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        data: {
+          action: 'cancel'
+        }
+      }
+    ];
+
+    actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+      action.innerText = JSON.stringify(ev.detail, 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/role-info-on-dismiss/index.md
similarity index 93%
rename from static/usage/v7/action-sheet/basic/index.md
rename to static/usage/v7/action-sheet/role-info-on-dismiss/index.md
index 63c3f006c80..5554f51a928 100644
--- a/static/usage/v7/action-sheet/basic/index.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/index.md
@@ -30,6 +30,6 @@ import angular_example_component_css from './angular/example_component_css.md';
       },
     },
   }}
-  src="usage/v7/action-sheet/basic/demo.html"
+  src="usage/v7/action-sheet/role-info-on-dismiss/demo.html"
   devicePreview
 />
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
new file mode 100644
index 00000000000..7b1cbb0bdb4
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/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 id="open-action-sheet">Open</ion-button>
+  <ion-action-sheet
+    trigger="open-action-sheet"
+    header="Example header"
+    sub-header="Example subheader"
+  ></ion-action-sheet>
+
+  <code id="action"></code>
+</div>
+
+<script>
+  var actionSheet = document.querySelector('ion-action-sheet');
+  var action = document.getElementById('action');
+
+  actionSheet.buttons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
+
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+    action.innerText = JSON.stringify(ev.detail, null, 2);
+  });
+</script>
+```
diff --git a/static/usage/v7/action-sheet/basic/react/main_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md
similarity index 100%
rename from static/usage/v7/action-sheet/basic/react/main_css.md
rename to static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
new file mode 100644
index 00000000000..bbddaaece4e
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
@@ -0,0 +1,48 @@
+```tsx
+import React, { useState } from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+import type { OverlayEventDetail } from '@ionic/core';
+
+import './main.css';
+
+function Example() {
+  const [result, setResult] = useState<OverlayEventDetail>();
+
+  return (
+    <div className="container">
+      <IonButton id="open-action-sheet">Open</IonButton>
+      <IonActionSheet
+        trigger="open-action-sheet"
+        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)}
+      ></IonActionSheet>
+
+      {result && <code>{JSON.stringify(result, null, 2)}</code>}
+    </div>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
new file mode 100644
index 00000000000..dbc6b2923ed
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
@@ -0,0 +1,74 @@
+```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 id="open-action-sheet">Open</ion-button>
+    <ion-action-sheet
+      trigger="open-action-sheet"
+      header="Example header"
+      sub-header="Example subheader"
+      :buttons="actionSheetButtons"
+      @didDismiss="setResult($event)"
+    ></ion-action-sheet>
+
+    <code>{{ result }}</code>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { IonActionSheet, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonActionSheet, IonButton },
+    setup() {
+      const result = ref('');
+      const actionSheetButtons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
+
+      const setResult = (ev: CustomEvent) => {
+        result.value = JSON.stringify(ev.detail, null, 2);
+      };
+
+      return {
+        result,
+        actionSheetButtons,
+        setResult
+      };
+    },
+  };
+</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
index 2cc044fbee1..0aa27e460f6 100644
--- 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
@@ -1,3 +1,10 @@
 ```html
-<ion-button (click)="presentActionSheet()">Open</ion-button>
+<ion-button id="open-action-sheet">Open</ion-button>
+<ion-action-sheet
+  trigger="open-action-sheet"
+  class="my-custom-class"
+  header="Example header"
+  subHeader="Example subheader"
+  [buttons]="actionSheetButtons"
+></ion-action-sheet>
 ```
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
index d8f200f27ee..a23a02b2aca 100644
--- 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
@@ -1,46 +1,35 @@
 ```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',
-          },
-        },
-      ],
-    });
+  public actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
 
-    actionSheet.present();
-  }
+  constructor() {}
 }
 ```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/demo.html b/static/usage/v7/action-sheet/theming/css-properties/demo.html
index 86df5261230..7d4f02e92e6 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/demo.html
+++ b/static/usage/v7/action-sheet/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-action-sheet.my-custom-class {
@@ -27,17 +27,21 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentActionSheet()">Open</ion-button>
+        <ion-button id="open-action-sheet">Open</ion-button>
+        <ion-action-sheet
+          trigger="open-action-sheet"
+          class="my-custom-class"
+          header="Example header"
+          sub-header="Example subheader"
+        ></ion-action-sheet>
       </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 = [{
+    const actionSheet = document.querySelector('ion-action-sheet');
+
+    actionSheet.buttons = [
+      {
         text: 'Delete',
         role: 'destructive',
         data: {
@@ -56,11 +60,8 @@
         data: {
           action: 'cancel'
         }
-      }];
-
-      document.body.appendChild(actionSheet);
-      await actionSheet.present();
-    }
+      }
+    ];
   </script>
 </body>
 
diff --git a/static/usage/v7/action-sheet/theming/css-properties/javascript.md b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
index f7b87dca8b9..792697d267d 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/javascript.md
+++ b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
@@ -11,39 +11,38 @@
   }
 </style>
 
-<ion-button onclick="presentActionSheet()">Open</ion-button>
+<ion-button id="open-action-sheet">Open</ion-button>
+<ion-action-sheet
+  trigger="open-action-sheet"
+  class="my-custom-class"
+  header="Example header"
+  sub-header="Example subheader"
+></ion-action-sheet>
 
 <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',
-        },
-      },
-    ];
+  var actionSheet = document.querySelector('ion-action-sheet');
 
-    document.body.appendChild(actionSheet);
-    await actionSheet.present();
-  }
+  actionSheet.buttons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
 </script>
 ```
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
index bfcc13c92ea..d66211df842 100644
--- 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
@@ -1,46 +1,42 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonActionSheet } from '@ionic/react';
+import { IonActionSheet, IonButton } 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>
+    <>
+      <IonButton id="open-action-sheet">Open</IonButton>
+      <IonActionSheet
+        trigger="open-action-sheet"
+        className="my-custom-class"
+        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'
+            }
+          }
+        ]}
+      ></IonActionSheet>
+    </>
   );
 }
 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
index c2a422e14ac..2f8cc168f58 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/vue.md
+++ b/static/usage/v7/action-sheet/theming/css-properties/vue.md
@@ -12,48 +12,46 @@
 </style>
 
 <template>
-  <ion-button @click="presentActionSheet">Open</ion-button>
+  <ion-button id="open-action-sheet">Open</ion-button>
+  <ion-action-sheet
+    trigger="open-action-sheet"
+    class="my-custom-class"
+    header="Example header"
+    sub-header="Example subheader"
+    :buttons="actionSheetButtons"
+  ></ion-action-sheet>
 </template>
 
 <script lang="ts">
-  import { IonButton, actionSheetController } from '@ionic/vue';
+  import { IonActionSheet, IonButton } from '@ionic/vue';
 
   export default {
-    components: { IonButton },
+    components: { IonActionSheet, 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',
-              },
-            },
-          ],
-        });
+      const actionSheetButtons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
 
-        actionSheet.present();
-      };
-
-      return { presentActionSheet };
+      return { actionSheetButtons };
     },
   };
 </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
index 2cc044fbee1..0aa27e460f6 100644
--- 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
@@ -1,3 +1,10 @@
 ```html
-<ion-button (click)="presentActionSheet()">Open</ion-button>
+<ion-button id="open-action-sheet">Open</ion-button>
+<ion-action-sheet
+  trigger="open-action-sheet"
+  class="my-custom-class"
+  header="Example header"
+  subHeader="Example subheader"
+  [buttons]="actionSheetButtons"
+></ion-action-sheet>
 ```
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
index d8f200f27ee..a23a02b2aca 100644
--- 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
@@ -1,46 +1,35 @@
 ```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',
-          },
-        },
-      ],
-    });
+  public actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
 
-    actionSheet.present();
-  }
+  constructor() {}
 }
 ```
diff --git a/static/usage/v7/action-sheet/theming/styling/demo.html b/static/usage/v7/action-sheet/theming/styling/demo.html
index df397d1220f..f67bf3b8906 100644
--- a/static/usage/v7/action-sheet/theming/styling/demo.html
+++ b/static/usage/v7/action-sheet/theming/styling/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
 
   <style>
     ion-action-sheet.my-custom-class .action-sheet-group {
@@ -44,17 +44,17 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentActionSheet()">Open</ion-button>
+        <ion-button id="open-action-sheet">Open</ion-button>
+        <ion-action-sheet trigger="open-action-sheet" class="my-custom-class" header="Example header"
+          sub-header="Example subheader"></ion-action-sheet>
       </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 = [{
+    const actionSheet = document.querySelector('ion-action-sheet');
+
+    actionSheet.buttons = [
+      {
         text: 'Delete',
         role: 'destructive',
         data: {
@@ -73,11 +73,8 @@
         data: {
           action: 'cancel'
         }
-      }];
-
-      document.body.appendChild(actionSheet);
-      await actionSheet.present();
-    }
+      }
+    ];
   </script>
 </body>
 
diff --git a/static/usage/v7/action-sheet/theming/styling/javascript.md b/static/usage/v7/action-sheet/theming/styling/javascript.md
index c74b95b41f7..8d578dbb51e 100644
--- a/static/usage/v7/action-sheet/theming/styling/javascript.md
+++ b/static/usage/v7/action-sheet/theming/styling/javascript.md
@@ -28,39 +28,38 @@
   }
 </style>
 
-<ion-button onclick="presentActionSheet()">Open</ion-button>
+<ion-button id="open-action-sheet">Open</ion-button>
+<ion-action-sheet
+  trigger="open-action-sheet"
+  class="my-custom-class"
+  header="Example header"
+  sub-header="Example subheader"
+></ion-action-sheet>
 
 <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',
-        },
-      },
-    ];
+  var actionSheet = document.querySelector('ion-action-sheet');
 
-    document.body.appendChild(actionSheet);
-    await actionSheet.present();
-  }
+  actionSheet.buttons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete'
+      }
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share'
+      }
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel'
+      }
+    }
+  ];
 </script>
 ```
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
index bfcc13c92ea..d66211df842 100644
--- a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
+++ b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
@@ -1,46 +1,42 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonActionSheet } from '@ionic/react';
+import { IonActionSheet, IonButton } 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>
+    <>
+      <IonButton id="open-action-sheet">Open</IonButton>
+      <IonActionSheet
+        trigger="open-action-sheet"
+        className="my-custom-class"
+        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'
+            }
+          }
+        ]}
+      ></IonActionSheet>
+    </>
   );
 }
 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
index d0b199ba480..c46ae0bcbd3 100644
--- a/static/usage/v7/action-sheet/theming/styling/vue.md
+++ b/static/usage/v7/action-sheet/theming/styling/vue.md
@@ -29,47 +29,46 @@
 </style>
 
 <template>
-  <ion-button @click="presentActionSheet">Open</ion-button>
+  <ion-button id="open-action-sheet">Open</ion-button>
+  <ion-action-sheet
+    trigger="open-action-sheet"
+    class="my-custom-class"
+    header="Example header"
+    sub-header="Example subheader"
+    :buttons="actionSheetButtons"
+  ></ion-action-sheet>
 </template>
 
 <script lang="ts">
-  import { IonButton, actionSheetController } from '@ionic/vue';
+  import { IonActionSheet, IonButton } from '@ionic/vue';
 
   export default {
-    components: { IonButton },
+    components: { IonActionSheet, 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();
-      };
+      const actionSheetButtons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
 
-      return { presentActionSheet };
+      return { actionSheetButtons };
     },
   };
 </script>

From 52bf6e8b0d10425d7300f3e36621141f9cc9fcc0 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 24 Jan 2023 09:47:50 -0600
Subject: [PATCH 170/469] docs(scaffolding): add support note to ionic generate
 docs (#2718)

---
 docs/developing/scaffolding.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/developing/scaffolding.md b/docs/developing/scaffolding.md
index 5b51485a5a7..740d913a196 100644
--- a/docs/developing/scaffolding.md
+++ b/docs/developing/scaffolding.md
@@ -44,6 +44,10 @@ The `src/app/` directory contains the root app component and module as well as a
 
 ## Generating New Features
 
+:::note
+This command is only supported in Ionic Angular.
+:::
+
 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

From 9b14e5ba8c7bf295ae3a5014558946ad1c8fa411 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 25 Jan 2023 14:45:57 +0000
Subject: [PATCH 171/469] docs(config): latest version is v6

---
 docusaurus.config.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index adde3f4205e..2524d5e5070 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -279,12 +279,17 @@ module.exports = {
           return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`;
         },
         exclude: ['README.md'],
-        lastVersion: 'current',
+        lastVersion: 'v6',
         versions: {
           current: {
-            label: 'v7',
-            banner: 'none',
+            label: 'v7 (beta)',
+            banner: 'unreleased',
+            path: 'v7'
           },
+          'v6': {
+            label: 'v6',
+            banner: 'none'
+          }
         },
       },
     ],

From b2e6a101f3d3cffba4b3648aa568df30fe968e67 Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Wed, 25 Jan 2023 11:05:49 -0700
Subject: [PATCH 172/469] fix(translations): output under v6 (#2722)

---
 scripts/i18n.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index 51cdbd87420..fffa6cf41b6 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -3,8 +3,8 @@ set -o errexit
 set -o nounset
 
 if [ "${VERCEL_ENV:-preview}" == "production" ]; then
-    mkdir -p i18n/ja/docusaurus-plugin-content-docs/current/
+    mkdir -p i18n/ja/docusaurus-plugin-content-docs/v6/
     curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
-      tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/current/ --strip-components 2 ionic-docs-translation-jp/docs
+      tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/v6/ --strip-components 2 ionic-docs-translation-jp/docs
     node scripts/api-ja.js
 fi

From 55a28c00995c1929ba54ef4719acd53e8d2b0c56 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 25 Jan 2023 13:36:43 -0500
Subject: [PATCH 173/469] docs(select): update for Ionic 7 (#2719)

---
 docs/api/input.md                             |   2 +-
 docs/api/select.md                            |  50 +++++++
 .../basic/multiple-selection/angular.md       |   2 +-
 .../select/basic/multiple-selection/demo.html |   8 +-
 .../basic/multiple-selection/javascript.md    |   2 +-
 .../select/basic/multiple-selection/react.md  |   2 +-
 .../v7/select/basic/multiple-selection/vue.md |   2 +-
 .../angular/example_component_html.md         |   1 +
 .../basic/responding-to-interaction/demo.html |   8 +-
 .../responding-to-interaction/javascript.md   |   2 +-
 .../basic/responding-to-interaction/react.md  |   1 +
 .../basic/responding-to-interaction/vue.md    |   1 +
 .../select/basic/single-selection/angular.md  |   2 +-
 .../select/basic/single-selection/demo.html   |   8 +-
 .../basic/single-selection/javascript.md      |   2 +-
 .../v7/select/basic/single-selection/react.md |   2 +-
 .../v7/select/basic/single-selection/vue.md   |   2 +-
 .../customization/button-text/angular.md      |   6 +-
 .../customization/button-text/demo.html       |  12 +-
 .../customization/button-text/javascript.md   |   6 +-
 .../select/customization/button-text/react.md |   6 +-
 .../select/customization/button-text/vue.md   |   6 +-
 .../angular/example_component_html.md         |   9 +-
 .../customization/interface-options/demo.html |  15 +-
 .../interface-options/javascript.md           |   9 +-
 .../customization/interface-options/react.md  |   9 +-
 .../customization/interface-options/vue.md    |   9 +-
 .../angular/example_component_html.md         |   2 +-
 .../customization/styling-select/demo.html    |   8 +-
 .../styling-select/javascript.md              |   2 +-
 .../styling-select/react/main_tsx.md          |   2 +-
 .../customization/styling-select/vue.md       |   2 +-
 static/usage/v7/select/fill/angular.md        |  15 ++
 static/usage/v7/select/fill/demo.html         |  44 ++++++
 static/usage/v7/select/fill/index.md          |   8 +
 static/usage/v7/select/fill/javascript.md     |  15 ++
 static/usage/v7/select/fill/react.md          |  25 ++++
 static/usage/v7/select/fill/vue.md            |  26 ++++
 .../select/interfaces/action-sheet/angular.md |   2 +-
 .../select/interfaces/action-sheet/demo.html  |   8 +-
 .../interfaces/action-sheet/javascript.md     |   2 +-
 .../select/interfaces/action-sheet/react.md   |   2 +-
 .../v7/select/interfaces/action-sheet/vue.md  |   2 +-
 .../v7/select/interfaces/popover/angular.md   |   2 +-
 .../v7/select/interfaces/popover/demo.html    |   8 +-
 .../select/interfaces/popover/javascript.md   |   2 +-
 .../v7/select/interfaces/popover/react.md     |   2 +-
 .../usage/v7/select/interfaces/popover/vue.md |   8 +-
 static/usage/v7/select/justify/angular.md     |  23 +++
 static/usage/v7/select/justify/demo.html      |  50 +++++++
 static/usage/v7/select/justify/index.md       |   8 +
 static/usage/v7/select/justify/javascript.md  |  23 +++
 static/usage/v7/select/justify/react.md       |  33 +++++
 static/usage/v7/select/justify/vue.md         |  36 +++++
 static/usage/v7/select/labels/angular.md      |  35 +++++
 static/usage/v7/select/labels/demo.html       |  62 ++++++++
 static/usage/v7/select/labels/index.md        |   8 +
 static/usage/v7/select/labels/javascript.md   |  35 +++++
 static/usage/v7/select/labels/react.md        |  43 ++++++
 static/usage/v7/select/labels/vue.md          |  46 ++++++
 static/usage/v7/select/migration/index.md     | 140 ++++++++++++++++++
 .../angular/example_component_html.md         |   1 +
 .../multiple-selection/demo.html              |   8 +-
 .../multiple-selection/javascript.md          |   2 +-
 .../multiple-selection/react.md               |   1 +
 .../multiple-selection/vue.md                 |   1 +
 .../angular/example_component_html.md         |   1 +
 .../using-comparewith/demo.html               |   8 +-
 .../using-comparewith/javascript.md           |   2 +-
 .../using-comparewith/react.md                |   1 +
 .../using-comparewith/vue.md                  |   1 +
 71 files changed, 824 insertions(+), 115 deletions(-)
 create mode 100644 static/usage/v7/select/fill/angular.md
 create mode 100644 static/usage/v7/select/fill/demo.html
 create mode 100644 static/usage/v7/select/fill/index.md
 create mode 100644 static/usage/v7/select/fill/javascript.md
 create mode 100644 static/usage/v7/select/fill/react.md
 create mode 100644 static/usage/v7/select/fill/vue.md
 create mode 100644 static/usage/v7/select/justify/angular.md
 create mode 100644 static/usage/v7/select/justify/demo.html
 create mode 100644 static/usage/v7/select/justify/index.md
 create mode 100644 static/usage/v7/select/justify/javascript.md
 create mode 100644 static/usage/v7/select/justify/react.md
 create mode 100644 static/usage/v7/select/justify/vue.md
 create mode 100644 static/usage/v7/select/labels/angular.md
 create mode 100644 static/usage/v7/select/labels/demo.html
 create mode 100644 static/usage/v7/select/labels/index.md
 create mode 100644 static/usage/v7/select/labels/javascript.md
 create mode 100644 static/usage/v7/select/labels/react.md
 create mode 100644 static/usage/v7/select/labels/vue.md
 create mode 100644 static/usage/v7/select/migration/index.md

diff --git a/docs/api/input.md b/docs/api/input.md
index 2b296ffec4f..cd18b0f61e2 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -57,7 +57,7 @@ import Clear from '@site/static/usage/v7/input/clear/index.md';
 
 ## Filled Inputs
 
-Material Design offers filled styles for an input. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
+Material Design offers filled styles for an input. The `fill` property on the input can be set to either `"solid"` or `"outline"`.
 
 Since the `fill` styles visually defines the input container, inputs that use `fill` should not be used in `ion-item`.
 
diff --git a/docs/api/select.md b/docs/api/select.md
index b9f3446f7b7..047514ec039 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -83,6 +83,34 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val
 import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';
 
 <ObjectValuesAndMultipleSelectionExample />
+  
+
+## 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 LabelExample from '@site/static/usage/v7/select/labels/index.md';
+
+<LabelExample />
+  
+
+## Justification
+  
+Developers can use the `justify` property to control how the label and control are packed on a line.
+
+import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
+
+<JustifyExample />
+
+## Filled Selects
+
+Material Design offers filled styles for a select. The `fill` property on the select can be set to either `"solid"` or `"outline"`.
+
+Since the `fill` styles visually defines the select container, selects that use `fill` should not be used in `ion-item`.
+
+import FillExample from '@site/static/usage/v7/select/fill/index.md';
+
+<FillExample />
 
 ## Select Buttons
 
@@ -151,6 +179,28 @@ interface SelectCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
+## Migrating from Legacy Select Syntax
+
+A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.
+
+While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+
+### Using the Modern Syntax
+
+Using the modern syntax involves two steps:
+
+1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`.
+2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`.
+
+import Migration from '@site/static/usage/v7/select/migration/index.md';
+
+<Migration />
+
+### Using the Legacy Syntax
+
+Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax.
+
 ## Properties
 <Props />
 
diff --git a/static/usage/v7/select/basic/multiple-selection/angular.md b/static/usage/v7/select/basic/multiple-selection/angular.md
index d4d85ec8dc1..e65d1ace014 100644
--- a/static/usage/v7/select/basic/multiple-selection/angular.md
+++ b/static/usage/v7/select/basic/multiple-selection/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select placeholder="Select all fruits that apply" [multiple]="true">
+    <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/basic/multiple-selection/demo.html b/static/usage/v7/select/basic/multiple-selection/demo.html
index 9847cfa382b..ed6a32d120a 100644
--- a/static/usage/v7/select/basic/multiple-selection/demo.html
+++ b/static/usage/v7/select/basic/multiple-selection/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
@@ -17,7 +17,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-select placeholder="Select all fruits that apply" multiple="true">
+            <ion-select aria-label="Fruit" 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>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/select/basic/multiple-selection/javascript.md b/static/usage/v7/select/basic/multiple-selection/javascript.md
index bf9e764aa36..0150a273be4 100644
--- a/static/usage/v7/select/basic/multiple-selection/javascript.md
+++ b/static/usage/v7/select/basic/multiple-selection/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select placeholder="Select all fruits that apply" multiple="true">
+    <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/basic/multiple-selection/react.md b/static/usage/v7/select/basic/multiple-selection/react.md
index 2e1ae8df319..4533409e292 100644
--- a/static/usage/v7/select/basic/multiple-selection/react.md
+++ b/static/usage/v7/select/basic/multiple-selection/react.md
@@ -5,7 +5,7 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonSelect placeholder="Select all fruits that apply" multiple={true}>
+        <IonSelect aria-label="Fruit" placeholder="Select all fruits that apply" multiple={true}>
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/basic/multiple-selection/vue.md b/static/usage/v7/select/basic/multiple-selection/vue.md
index cfe163a5384..3287578bddc 100644
--- a/static/usage/v7/select/basic/multiple-selection/vue.md
+++ b/static/usage/v7/select/basic/multiple-selection/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-select placeholder="Select all fruits that apply" :multiple="true">
+      <ion-select aria-label="Fruit" 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>
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
index de30bdc02d0..035a3e3b6b6 100644
--- 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
@@ -2,6 +2,7 @@
 <ion-list>
   <ion-item>
     <ion-select
+      aria-label="Fruit"
       placeholder="Select fruit"
       (ionChange)="handleChange($event)"
       (ionCancel)="pushLog('ionCancel fired')"
diff --git a/static/usage/v7/select/basic/responding-to-interaction/demo.html b/static/usage/v7/select/basic/responding-to-interaction/demo.html
index dbea5d3b8df..51afc1bdf56 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/demo.html
+++ b/static/usage/v7/select/basic/responding-to-interaction/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     #log {
@@ -27,7 +27,7 @@
         <div>
           <ion-list>
             <ion-item>
-              <ion-select placeholder="Select fruit">
+              <ion-select aria-label="Fruit" 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>
@@ -59,4 +59,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</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
index 78ba1244101..ad72a16c545 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/javascript.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select placeholder="Select fruit">
+    <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/basic/responding-to-interaction/react.md b/static/usage/v7/select/basic/responding-to-interaction/react.md
index e6a85e2eef6..2753a2dc611 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/react.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/react.md
@@ -14,6 +14,7 @@ function Example() {
       <IonList>
         <IonItem>
           <IonSelect
+            aria-label="Fruit"
             placeholder="Select fruit"
             onIonChange={(e) => pushLog(`ionChange fired with value: ${e.detail.value}`)}
             onIonCancel={() => pushLog('ionCancel fired')}
diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md
index e8d2880e45e..1b5cdb45148 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/vue.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md
@@ -3,6 +3,7 @@
   <ion-list>
     <ion-item>
       <ion-select
+        aria-label="Fruit"
         placeholder="Select fruit"
         @ionChange="pushLog('ionChange fired with value: ' + $event.detail.value)"
         @ionCancel="pushLog('ionCancel fired')"
diff --git a/static/usage/v7/select/basic/single-selection/angular.md b/static/usage/v7/select/basic/single-selection/angular.md
index 463e001577c..9c587d71a67 100644
--- a/static/usage/v7/select/basic/single-selection/angular.md
+++ b/static/usage/v7/select/basic/single-selection/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select placeholder="Select fruit">
+    <ion-select aria-label="fruit" 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>
diff --git a/static/usage/v7/select/basic/single-selection/demo.html b/static/usage/v7/select/basic/single-selection/demo.html
index a8fb4f13e0a..1bcb1c75cd4 100644
--- a/static/usage/v7/select/basic/single-selection/demo.html
+++ b/static/usage/v7/select/basic/single-selection/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
@@ -17,7 +17,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-select placeholder="Select fruit">
+            <ion-select aria-label="fruit" 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>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/select/basic/single-selection/javascript.md b/static/usage/v7/select/basic/single-selection/javascript.md
index 463e001577c..9c587d71a67 100644
--- a/static/usage/v7/select/basic/single-selection/javascript.md
+++ b/static/usage/v7/select/basic/single-selection/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select placeholder="Select fruit">
+    <ion-select aria-label="fruit" 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>
diff --git a/static/usage/v7/select/basic/single-selection/react.md b/static/usage/v7/select/basic/single-selection/react.md
index 767a1b59a62..d30a1dbe40b 100644
--- a/static/usage/v7/select/basic/single-selection/react.md
+++ b/static/usage/v7/select/basic/single-selection/react.md
@@ -5,7 +5,7 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonSelect placeholder="Select fruit">
+        <IonSelect aria-label="fruit" placeholder="Select fruit">
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/basic/single-selection/vue.md b/static/usage/v7/select/basic/single-selection/vue.md
index e0a081117ba..637b8446a7b 100644
--- a/static/usage/v7/select/basic/single-selection/vue.md
+++ b/static/usage/v7/select/basic/single-selection/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-select placeholder="Select fruit">
+      <ion-select aria-label="fruit" 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>
diff --git a/static/usage/v7/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular.md
index bb133af75c4..f00ddf7ce99 100644
--- a/static/usage/v7/select/customization/button-text/angular.md
+++ b/static/usage/v7/select/customization/button-text/angular.md
@@ -1,16 +1,14 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-label>Alert Interface</ion-label>
-    <ion-select placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
+    <ion-select label="Alert Interface" 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 label="Action Sheet Interface" 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>
diff --git a/static/usage/v7/select/customization/button-text/demo.html b/static/usage/v7/select/customization/button-text/demo.html
index 1eb72b8dda5..a397d72997d 100644
--- a/static/usage/v7/select/customization/button-text/demo.html
+++ b/static/usage/v7/select/customization/button-text/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
@@ -17,16 +17,14 @@
       <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 label="Alert Interface" 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 label="Action Sheet Interface" 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>
@@ -38,4 +36,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/select/customization/button-text/javascript.md b/static/usage/v7/select/customization/button-text/javascript.md
index 23c6f0a87ae..9f548984202 100644
--- a/static/usage/v7/select/customization/button-text/javascript.md
+++ b/static/usage/v7/select/customization/button-text/javascript.md
@@ -1,16 +1,14 @@
 ```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 label="Alert Interface" 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 label="Action Sheet Interface" 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>
diff --git a/static/usage/v7/select/customization/button-text/react.md b/static/usage/v7/select/customization/button-text/react.md
index 79e4c94c0da..9175310c47d 100644
--- a/static/usage/v7/select/customization/button-text/react.md
+++ b/static/usage/v7/select/customization/button-text/react.md
@@ -5,16 +5,14 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonLabel>Alert Interface</IonLabel>
-        <IonSelect placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
+        <IonSelect label="Alert Interface" 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">
+        <IonSelect label="Action Sheet Interface" interface="action-sheet" placeholder="Select fruit" cancelText="Cancel Choice">
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/customization/button-text/vue.md b/static/usage/v7/select/customization/button-text/vue.md
index 9e6c1d1b47c..99b1a1558e6 100644
--- a/static/usage/v7/select/customization/button-text/vue.md
+++ b/static/usage/v7/select/customization/button-text/vue.md
@@ -2,16 +2,14 @@
 <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 label="Alert Interface" 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 label="Action Sheet Interface" 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>
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
index e1093bdf292..a05c69a39c0 100644
--- 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
@@ -1,8 +1,7 @@
 ```html
 <ion-list>        
   <ion-item>
-    <ion-label>Alert</ion-label>
-    <ion-select [interfaceOptions]="customAlertOptions" interface="alert" placeholder="Select One">
+    <ion-select label="Alert" [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>
@@ -10,8 +9,7 @@
   </ion-item>
         
   <ion-item>
-    <ion-label>Popover</ion-label>
-    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
+    <ion-select label="Popover" [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>
@@ -19,8 +17,7 @@
   </ion-item>
         
   <ion-item>
-    <ion-label>Action Sheet</ion-label>
-    <ion-select [interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+    <ion-select label="Action Sheet" [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>
diff --git a/static/usage/v7/select/customization/interface-options/demo.html b/static/usage/v7/select/customization/interface-options/demo.html
index 8cff7c7bbf0..d0df8cb5286 100644
--- a/static/usage/v7/select/customization/interface-options/demo.html
+++ b/static/usage/v7/select/customization/interface-options/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
@@ -23,8 +23,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-label>Alert</ion-label>
-            <ion-select id="customAlertSelect" interface="alert" placeholder="Select One">
+            <ion-select label="Alert" 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>
@@ -32,8 +31,7 @@
           </ion-item>
 
           <ion-item>
-            <ion-label>Popover</ion-label>
-            <ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
+            <ion-select label="Popover" 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>
@@ -41,8 +39,7 @@
           </ion-item>
 
           <ion-item>
-            <ion-label>Action Sheet</ion-label>
-            <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
+            <ion-select label="Action Sheet" 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>
@@ -80,4 +77,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/select/customization/interface-options/javascript.md b/static/usage/v7/select/customization/interface-options/javascript.md
index 9f48ee33cf9..e2d1974997e 100644
--- a/static/usage/v7/select/customization/interface-options/javascript.md
+++ b/static/usage/v7/select/customization/interface-options/javascript.md
@@ -1,8 +1,7 @@
 ```html
 <ion-list>        
   <ion-item>
-    <ion-label>Alert</ion-label>
-    <ion-select id="customAlertSelect" interface="alert" placeholder="Select One">
+    <ion-select label="Alert" 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>
@@ -10,8 +9,7 @@
   </ion-item>
         
   <ion-item>
-    <ion-label>Popover</ion-label>
-    <ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
+    <ion-select label="Popover" 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>
@@ -19,8 +17,7 @@
   </ion-item>
         
   <ion-item>
-    <ion-label>Action Sheet</ion-label>
-    <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
+    <ion-select label="Action Sheet" 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>
diff --git a/static/usage/v7/select/customization/interface-options/react.md b/static/usage/v7/select/customization/interface-options/react.md
index 57cdc7a9c9a..6b9d1f42cfb 100644
--- a/static/usage/v7/select/customization/interface-options/react.md
+++ b/static/usage/v7/select/customization/interface-options/react.md
@@ -23,8 +23,7 @@ function Example() {
   return (
     <IonList>        
       <IonItem>
-        <IonLabel>Alert</IonLabel>
-        <IonSelect interfaceOptions={customAlertOptions} interface="alert" placeholder="Select One">
+        <IonSelect label="Alert" interfaceOptions={customAlertOptions} interface="alert" placeholder="Select One">
           <IonSelectOption value="bacon">Bacon</IonSelectOption>
           <IonSelectOption value="onions">Onions</IonSelectOption>
           <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
@@ -32,8 +31,7 @@ function Example() {
       </IonItem>
           
       <IonItem>
-        <IonLabel>Popover</IonLabel>
-        <IonSelect interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
+        <IonSelect label="Popover" interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
           <IonSelectOption value="brown">Brown</IonSelectOption>
           <IonSelectOption value="blonde">Blonde</IonSelectOption>
           <IonSelectOption value="red">Red</IonSelectOption>
@@ -41,8 +39,7 @@ function Example() {
       </IonItem>
           
       <IonItem>
-        <IonLabel>Action Sheet</IonLabel>
-        <IonSelect interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One">
+        <IonSelect label="Action Sheet" interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One">
           <IonSelectOption value="red">Red</IonSelectOption>
           <IonSelectOption value="green">Green</IonSelectOption>
           <IonSelectOption value="blue">Blue</IonSelectOption>
diff --git a/static/usage/v7/select/customization/interface-options/vue.md b/static/usage/v7/select/customization/interface-options/vue.md
index 7488095006d..58513c464f0 100644
--- a/static/usage/v7/select/customization/interface-options/vue.md
+++ b/static/usage/v7/select/customization/interface-options/vue.md
@@ -2,8 +2,7 @@
 <template>
   <ion-list>        
     <ion-item>
-      <ion-label>Alert</ion-label>
-      <ion-select :interface-options="customAlertOptions" interface="alert" placeholder="Select One">
+      <ion-select label="Alert" :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>
@@ -11,8 +10,7 @@
     </ion-item>
         
     <ion-item>
-      <ion-label>Popover</ion-label>
-      <ion-select :interface-options="customPopoverOptions" interface="popover" placeholder="Select One">
+      <ion-select label="Popover" :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>
@@ -20,8 +18,7 @@
     </ion-item>
         
     <ion-item>
-      <ion-label>Action Sheet</ion-label>
-      <ion-select :interface-options="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+      <ion-select label="Action Sheet" :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>
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
index 99738781773..c2f19e70065 100644
--- 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
@@ -1,5 +1,5 @@
 ```html
-<ion-select placeholder="Select fruit">
+<ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/customization/styling-select/demo.html b/static/usage/v7/select/customization/styling-select/demo.html
index 429beab68c4..16ed3957495 100644
--- a/static/usage/v7/select/customization/styling-select/demo.html
+++ b/static/usage/v7/select/customization/styling-select/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     ion-select {
@@ -45,7 +45,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-select placeholder="Select fruit">
+            <ion-select aria-label="Fruit" 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>
@@ -57,4 +57,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/select/customization/styling-select/javascript.md b/static/usage/v7/select/customization/styling-select/javascript.md
index 9b35411552b..505b93f7282 100644
--- a/static/usage/v7/select/customization/styling-select/javascript.md
+++ b/static/usage/v7/select/customization/styling-select/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-select placeholder="Select fruit">
+<ion-select aria-label="Fruit" 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>
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
index 77b63bd6925..00e0e7a8027 100644
--- a/static/usage/v7/select/customization/styling-select/react/main_tsx.md
+++ b/static/usage/v7/select/customization/styling-select/react/main_tsx.md
@@ -6,7 +6,7 @@ import './main.css';
 
 function Example() {
   return (
-    <IonSelect placeholder="Select fruit">
+    <IonSelect aria-label="Fruit" placeholder="Select fruit">
       <IonSelectOption value="apples">Apples</IonSelectOption>
       <IonSelectOption value="oranges">Oranges</IonSelectOption>
       <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/customization/styling-select/vue.md b/static/usage/v7/select/customization/styling-select/vue.md
index 37eebb3164c..749540e895f 100644
--- a/static/usage/v7/select/customization/styling-select/vue.md
+++ b/static/usage/v7/select/customization/styling-select/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-select placeholder="Select fruit">
+  <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/fill/angular.md b/static/usage/v7/select/fill/angular.md
new file mode 100644
index 00000000000..a78df914e09
--- /dev/null
+++ b/static/usage/v7/select/fill/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+
+<br />
+
+<ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+```
diff --git a/static/usage/v7/select/fill/demo.html b/static/usage/v7/select/fill/demo.html
new file mode 100644
index 00000000000..121d63356fc
--- /dev/null
+++ b/static/usage/v7/select/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.5.1-dev.11674584015.19545cf0/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.1-dev.11674584015.19545cf0/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      width: 300px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+          <ion-select-option value="orange">Orange</ion-select-option>
+        </ion-select>
+
+        <ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+          <ion-select-option value="orange">Orange</ion-select-option>
+        </ion-select>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.md
new file mode 100644
index 00000000000..47fc0da2ec9
--- /dev/null
+++ b/static/usage/v7/select/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/select/fill/demo.html" size="300px" />
diff --git a/static/usage/v7/select/fill/javascript.md b/static/usage/v7/select/fill/javascript.md
new file mode 100644
index 00000000000..a78df914e09
--- /dev/null
+++ b/static/usage/v7/select/fill/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+
+<br />
+
+<ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+```
diff --git a/static/usage/v7/select/fill/react.md b/static/usage/v7/select/fill/react.md
new file mode 100644
index 00000000000..33b451d04a9
--- /dev/null
+++ b/static/usage/v7/select/fill/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonSelect mode="md" label="Solid select" labelPlacement="floating" fill="solid">
+        <IonSelectOption value="apple">Apple</IonSelectOption>
+        <IonSelectOption value="banana">Banana</IonSelectOption>
+        <IonSelectOption value="orange">Orange</IonSelectOption>
+      </IonSelect>
+      
+      <br />
+      
+      <IonSelect mode="md" label="Outline select" labelPlacement="floating" fill="outline">
+        <IonSelectOption value="apple">Apple</IonSelectOption>
+        <IonSelectOption value="banana">Banana</IonSelectOption>
+        <IonSelectOption value="orange">Orange</IonSelectOption>
+      </IonSelect>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/fill/vue.md b/static/usage/v7/select/fill/vue.md
new file mode 100644
index 00000000000..7e11918cf9c
--- /dev/null
+++ b/static/usage/v7/select/fill/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+  
+  <br />
+  
+  <ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</template>
+
+<script lang="ts">
+  import { IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSelect, IonSelectOption },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular.md b/static/usage/v7/select/interfaces/action-sheet/angular.md
index ceb18754196..f8d864e3a7c 100644
--- a/static/usage/v7/select/interfaces/action-sheet/angular.md
+++ b/static/usage/v7/select/interfaces/action-sheet/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select interface="action-sheet" placeholder="Select fruit">
+    <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/interfaces/action-sheet/demo.html b/static/usage/v7/select/interfaces/action-sheet/demo.html
index bd1dd427e85..f096106989b 100644
--- a/static/usage/v7/select/interfaces/action-sheet/demo.html
+++ b/static/usage/v7/select/interfaces/action-sheet/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
@@ -17,7 +17,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-select interface="action-sheet" placeholder="Select fruit">
+            <ion-select aria-label="Fruit" 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>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/select/interfaces/action-sheet/javascript.md b/static/usage/v7/select/interfaces/action-sheet/javascript.md
index ceb18754196..f8d864e3a7c 100644
--- a/static/usage/v7/select/interfaces/action-sheet/javascript.md
+++ b/static/usage/v7/select/interfaces/action-sheet/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select interface="action-sheet" placeholder="Select fruit">
+    <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/interfaces/action-sheet/react.md b/static/usage/v7/select/interfaces/action-sheet/react.md
index 279c16dedcd..b285c79f0b3 100644
--- a/static/usage/v7/select/interfaces/action-sheet/react.md
+++ b/static/usage/v7/select/interfaces/action-sheet/react.md
@@ -5,7 +5,7 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonSelect interface="action-sheet" placeholder="Select fruit">
+        <IonSelect aria-label="Fruit" interface="action-sheet" placeholder="Select fruit">
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/interfaces/action-sheet/vue.md b/static/usage/v7/select/interfaces/action-sheet/vue.md
index c99423cb0b8..df563aefa47 100644
--- a/static/usage/v7/select/interfaces/action-sheet/vue.md
+++ b/static/usage/v7/select/interfaces/action-sheet/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-select interface="action-sheet" placeholder="Select fruit">
+      <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/interfaces/popover/angular.md b/static/usage/v7/select/interfaces/popover/angular.md
index 17c212363c5..fe01597afa5 100644
--- a/static/usage/v7/select/interfaces/popover/angular.md
+++ b/static/usage/v7/select/interfaces/popover/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select interface="popover" placeholder="Select fruit">
+    <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/interfaces/popover/demo.html b/static/usage/v7/select/interfaces/popover/demo.html
index 9656b8e303d..5398d677415 100644
--- a/static/usage/v7/select/interfaces/popover/demo.html
+++ b/static/usage/v7/select/interfaces/popover/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 </head>
 
 <body>
@@ -17,7 +17,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-select interface="popover" placeholder="Select fruit">
+            <ion-select aria-label="Fruit" 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>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/select/interfaces/popover/javascript.md b/static/usage/v7/select/interfaces/popover/javascript.md
index 17c212363c5..fe01597afa5 100644
--- a/static/usage/v7/select/interfaces/popover/javascript.md
+++ b/static/usage/v7/select/interfaces/popover/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select interface="popover" placeholder="Select fruit">
+    <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/interfaces/popover/react.md b/static/usage/v7/select/interfaces/popover/react.md
index 8e2ee4451a5..2afe98eef3c 100644
--- a/static/usage/v7/select/interfaces/popover/react.md
+++ b/static/usage/v7/select/interfaces/popover/react.md
@@ -5,7 +5,7 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonSelect interface="popover" placeholder="Select fruit">
+        <IonSelect aria-label="Fruit" interface="popover" placeholder="Select fruit">
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/interfaces/popover/vue.md b/static/usage/v7/select/interfaces/popover/vue.md
index 8caea7f13d3..24b1f4b66d0 100644
--- a/static/usage/v7/select/interfaces/popover/vue.md
+++ b/static/usage/v7/select/interfaces/popover/vue.md
@@ -2,10 +2,10 @@
 <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 aria-label="Fruit" 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/justify/angular.md b/static/usage/v7/select/justify/angular.md
new file mode 100644
index 00000000000..a3951bb1a59
--- /dev/null
+++ b/static/usage/v7/select/justify/angular.md
@@ -0,0 +1,23 @@
+```html
+<ion-item>
+  <ion-select justify="start" label="Start" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="end" label="End" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+```
diff --git a/static/usage/v7/select/justify/demo.html b/static/usage/v7/select/justify/demo.html
new file mode 100644
index 00000000000..8c80c5564ca
--- /dev/null
+++ b/static/usage/v7/select/justify/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>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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select justify="start" label="Start" placeholder="Favorite fruit">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-select justify="end" label="End" placeholder="Favorite fruit">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.md
new file mode 100644
index 00000000000..6e263e9be07
--- /dev/null
+++ b/static/usage/v7/select/justify/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/select/justify/demo.html" size="300px" />
diff --git a/static/usage/v7/select/justify/javascript.md b/static/usage/v7/select/justify/javascript.md
new file mode 100644
index 00000000000..a3951bb1a59
--- /dev/null
+++ b/static/usage/v7/select/justify/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-item>
+  <ion-select justify="start" label="Start" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="end" label="End" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+```
diff --git a/static/usage/v7/select/justify/react.md b/static/usage/v7/select/justify/react.md
new file mode 100644
index 00000000000..3c9b16c3129
--- /dev/null
+++ b/static/usage/v7/select/justify/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect justify="start" label="Start" placeholder="Favorite fruit">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+      <IonItem>
+        <IonSelect justify="end" label="End" placeholder="Favorite fruit">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+      <IonItem>
+        <IonSelect justify="space-between" label="Space Between" placeholder="Favorite fruit">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/justify/vue.md b/static/usage/v7/select/justify/vue.md
new file mode 100644
index 00000000000..f9814d8b797
--- /dev/null
+++ b/static/usage/v7/select/justify/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select justify="start" label="Start" placeholder="Favorite fruit">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-select justify="end" label="End" placeholder="Favorite fruit">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  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/labels/angular.md b/static/usage/v7/select/labels/angular.md
new file mode 100644
index 00000000000..063c257914d
--- /dev/null
+++ b/static/usage/v7/select/labels/angular.md
@@ -0,0 +1,35 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select label="Default label" placeholder="Favorite Fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Stacked label" label-placement="stacked">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Floating label" label-placement="floating">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/labels/demo.html b/static/usage/v7/select/labels/demo.html
new file mode 100644
index 00000000000..24cdce8375d
--- /dev/null
+++ b/static/usage/v7/select/labels/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</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-select label="Default label" placeholder="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select label="Stacked label" label-placement="stacked">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select label="Floating label" label-placement="floating">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/select/labels/index.md b/static/usage/v7/select/labels/index.md
new file mode 100644
index 00000000000..502fbf3d973
--- /dev/null
+++ b/static/usage/v7/select/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/select/labels/demo.html" size="300px" />
diff --git a/static/usage/v7/select/labels/javascript.md b/static/usage/v7/select/labels/javascript.md
new file mode 100644
index 00000000000..063c257914d
--- /dev/null
+++ b/static/usage/v7/select/labels/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select label="Default label" placeholder="Favorite Fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Stacked label" label-placement="stacked">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Floating label" label-placement="floating">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/labels/react.md b/static/usage/v7/select/labels/react.md
new file mode 100644
index 00000000000..28e70627659
--- /dev/null
+++ b/static/usage/v7/select/labels/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect label="Default label" placeholder="Favorite Fruit">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    
+      <IonItem>
+        <IonSelect label="Fixed label" labelPlacement="fixed" placeholder="Favorite fruit">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    
+      <IonItem>
+        <IonSelect label="Stacked label" labelPlacement="stacked">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    
+      <IonItem>
+        <IonSelect label="Floating label" labelPlacement="floating">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/labels/vue.md b/static/usage/v7/select/labels/vue.md
new file mode 100644
index 00000000000..412441ca164
--- /dev/null
+++ b/static/usage/v7/select/labels/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select label="Default label" placeholder="Favorite Fruit">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
+    </ion-item>
+  
+    <ion-item>
+      <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
+    </ion-item>
+  
+    <ion-item>
+      <ion-select label="Stacked label" label-placement="stacked">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
+    </ion-item>
+  
+    <ion-item>
+      <ion-select label="Floating label" label-placement="floating">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  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/migration/index.md b/static/usage/v7/select/migration/index.md
new file mode 100644
index 00000000000..4df052802db
--- /dev/null
+++ b/static/usage/v7/select/migration/index.md
@@ -0,0 +1,140 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````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
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Favorite Fruit:</ion-label>
+  <ion-select>...</ion-select>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Favorite Fruit:</ion-label>
+  <ion-select>...</ion-select>
+</ion-item>
+
+<!-- After -->
+
+<!-- Inputs using `fill` should not be placed in ion-item -->
+<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Favorite Fruit:</ion-label>
+  <ion-select>...</ion-select>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-select label="Favorite Fruit:" labelPlacement="floating">...</ion-select>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Favorite Fruit:</ion-label>
+  <ion-select>...</ion-select>
+</ion-item>
+
+<!-- After -->
+
+<!-- Inputs using `fill` should not be placed in ion-item -->
+<ion-select fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</ion-select>
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel position="floating">Favorite Fruit:</IonLabel>
+  <IonSelect>...</IonSelect>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonSelect label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>
+</IonItem>
+
+
+{/* Fill */}
+
+{/* Before */}
+<IonItem fill="outline" shape="round">
+  <IonLabel position="floating">Favorite Fruit:</IonLabel>
+  <IonSelect>...</IonSelect>
+</IonItem>
+
+{/* After */}
+
+{/* Inputs using `fill` should not be placed in IonItem */}
+<IonSelect fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Favorite Fruit:</ion-label>
+  <ion-select>...</ion-select>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Favorite Fruit:</ion-label>
+  <ion-select>...</ion-select>
+</ion-item>
+
+<!-- After -->
+
+<!-- Inputs using `fill` should not be placed in ion-item -->
+<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>
+```
+</TabItem>
+</Tabs>
+````
\ No newline at end of file
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
index 4fcf064bcc4..81ac94abb5c 100644
--- 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
@@ -2,6 +2,7 @@
 <ion-list>
   <ion-item>
     <ion-select
+      aria-label="Food"
       [compareWith]="compareWith"
       placeholder="Select food"
       (ionChange)="handleChange($event)"
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
index 2c3dc70038b..745f7224a80 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
@@ -27,7 +27,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-select placeholder="Select food" multiple="true"></ion-select>
+            <ion-select aria-label="Food" placeholder="Select food" multiple="true"></ion-select>
           </ion-item>
           <ion-item lines="none">
             <ion-label>
@@ -88,4 +88,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</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
index 28209ccc6b3..8fed71dd03c 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select placeholder="Select food" multiple="true"></ion-select>
+    <ion-select aria-label="Food" placeholder="Select food" multiple="true"></ion-select>
   </ion-item>
   <ion-item lines="none">
     <ion-label>
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
index e6485198a86..9b1738ea7fe 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/react.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
@@ -45,6 +45,7 @@ function Example() {
     <IonList>
       <IonItem>
         <IonSelect
+          aria-label="Food"
           placeholder="Select food"
           compareWith={compareWith}
           onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))}
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
index 176adfe8eae..d556b9c5178 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
@@ -3,6 +3,7 @@
   <ion-list>
     <ion-item>
       <ion-select
+        aria-label="Food"
         placeholder="Select food"
         :compareWith="compareWith"
         @ionChange="currentFood = JSON.stringify($event.detail.value)"
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
index 340b7456d55..5b4e4ecb0bd 100644
--- 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
@@ -2,6 +2,7 @@
 <ion-list>
   <ion-item>
     <ion-select
+      aria-label="Food"
       [compareWith]="compareWith"
       placeholder="Select food"
       (ionChange)="handleChange($event)"
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
index ca59d32afb2..8dd2785043e 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
@@ -23,7 +23,7 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-select placeholder="Select food"></ion-select>
+            <ion-select aria-label="Food" placeholder="Select food"></ion-select>
           </ion-item>
           <ion-item lines="none">
             <ion-label>
@@ -76,4 +76,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</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
index 3f98524f6f2..f9b385d5474 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select placeholder="Select food"></ion-select>
+    <ion-select aria-label="Food" placeholder="Select food"></ion-select>
   </ion-item>
   <ion-item lines="none">
     <ion-label>
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
index 7cd468d5b0e..08512071f7a 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/react.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/react.md
@@ -37,6 +37,7 @@ function Example() {
     <IonList>
       <IonItem>
         <IonSelect
+          aria-label="Food"
           placeholder="Select food"
           compareWith={compareWith}
           onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))}
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
index d54f39474b5..99ed6f5c3d7 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
@@ -3,6 +3,7 @@
   <ion-list>
     <ion-item>
       <ion-select
+        aria-label="Food"
         placeholder="Select fruit"
         :compareWith="compareWith"
         @ionChange="currentFood = JSON.stringify($event.detail.value)"

From 1ec742b53009bea507bcd3ea37bba125d8922299 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 25 Jan 2023 14:53:48 -0500
Subject: [PATCH 174/469] docs(react): adding react to an existing app (#2715)

Resolves #2714

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/react.md                                 |   2 +-
 ...onic-react-to-an-existing-react-project.md | 213 ++++++++++++++++++
 sidebars.js                                   |   1 +
 3 files changed, 215 insertions(+), 1 deletion(-)
 create mode 100644 docs/react/adding-ionic-react-to-an-existing-react-project.md

diff --git a/docs/react.md b/docs/react.md
index 01dfbeddfd8..82da9dfb8be 100644
--- a/docs/react.md
+++ b/docs/react.md
@@ -128,7 +128,7 @@ $ ionic serve █
 
 <DocsCard
   header="Add Ionic to Existing React App"
-  href="https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib"
+  href="/docs/react/adding-ionic-react-to-an-existing-react-project"
   icon="/icons/logo-react-icon.png"
 >
   <p>Use individual components or the complete app experience.</p>
diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/docs/react/adding-ionic-react-to-an-existing-react-project.md
new file mode 100644
index 00000000000..94c253f3bed
--- /dev/null
+++ b/docs/react/adding-ionic-react-to-an-existing-react-project.md
@@ -0,0 +1,213 @@
+# Adding To An Existing React App
+
+This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic.
+
+### Using Individual Ionic Components
+
+Ionic React has around 100 components that you can begin using in your app immediately to help make it more mobile-friendly.
+
+To get started with using components install the `@ionic/react` package:
+
+```bash
+npm i @ionic/react
+```
+
+Import the stylesheets from Ionic in your main app file:
+
+```tsx title="App.tsx"
+import '@ionic/react/css/core.css';
+```
+
+Add the `setupIonicReact` function to your app:
+
+```tsx title="App.tsx"
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact();
+
+const App = () => {
+  return (
+    ...
+  );
+}
+
+export default App;
+```
+
+:::note
+
+`setupIonicReact` is a function that will set up the Ionic React components to work with your app. It is required to be called before using any of the Ionic React components.
+
+:::
+
+You can import any of the components and begin to use them right away. Here we are importing the `IonButton` and `IonDatetime` components and using them anywhere in our app:
+
+```tsx
+import React from 'react';
+import { IonButton, IonDatetime } from '@ionic/react';
+
+const MyComponent = () => {
+  return (
+    <>
+      <IonDatetime></IonDatetime>
+      <IonButton fill="clear">Start</IonButton>
+    </>
+  );
+};
+```
+
+### Using Ionic Pages
+
+If you want to convert part of your app and give it the whole Ionic experience, there are a few additional steps to take to get this setup.
+
+First, import some additional CSS files that help set up the overall structure of the page and some utility helpers:
+
+```js
+/* 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';
+```
+
+If you are using another CSS framework (like Bootstrap), you might want to isolate the Ionic pages away from them. This will help to ensure there aren't any CSS conflicts between the libraries.
+
+Next, install the `@ionic/react-router` library:
+
+```bash
+npm i @ionic/react-router
+```
+
+The Ionic React Router library is a small wrapper around the popular React Router library and helps provide the functionality we need for native-like page transitions. The Ionic React Router library is compatible with v5 of React Router.
+
+The main Ionic page will need a couple of base components. First, use a `IonApp` component (from `@ionic/react`) as the root component, and then use `IonReactRouter` (from `@ionic/react-router`).
+
+`IonApp` sets up our main container, with the necessary styling needed for our structural components. `IonReactRouter` is a small wrapper for React Routers `BrowserRouter` and should be used in its place.
+
+Then, wrap all your routes in an `IonRouterOutlet`, which is what manages our Ionic pages.
+
+```tsx
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+...
+
+<IonApp>
+  <IonReactRouter>
+    <IonRouterOutlet>
+      <Route path="/" exact component={Home} />
+      <Route path="/about" exact component={About} />
+    </IonRouterOutlet>
+  </IonReactRouter>
+</IonApp>
+```
+
+Now you can setup Ionic pages like so:
+
+```tsx
+<IonPage>
+  <IonHeader>
+    <IonToolbar>
+      <IonTitle>My Page</IonTitle>
+    </IonToolbar>
+  </IonHeader>
+  <IonContent>
+    <IonDatetime></IonDatetime>
+    <IonButton fill="clear">Start</IonButton>
+  </IonContent>
+</IonPage>
+```
+
+:::note
+
+`IonPage` is important to have as the base component for your "Ionic" pages. `IonPage` is the element Ionic performs page transitions on.
+
+:::
+
+For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation).
+
+### Customize the Theme
+
+To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file:
+
+```css title="main.css"
+:root {
+  --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;
+
+  --ion-color-secondary: #0cd1e8;
+  --ion-color-secondary-rgb: 12, 209, 232;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #0bb8cc;
+  --ion-color-secondary-tint: #24d6ea;
+
+  --ion-color-tertiary: #7044ff;
+  --ion-color-tertiary-rgb: 112, 68, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #633ce0;
+  --ion-color-tertiary-tint: #7e57ff;
+
+  --ion-color-success: #10dc60;
+  --ion-color-success-rgb: 16, 220, 96;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #0ec254;
+  --ion-color-success-tint: #28e070;
+
+  --ion-color-warning: #ffce00;
+  --ion-color-warning-rgb: 255, 206, 0;
+  --ion-color-warning-contrast: #ffffff;
+  --ion-color-warning-contrast-rgb: 255, 255, 255;
+  --ion-color-warning-shade: #e0b500;
+  --ion-color-warning-tint: #ffd31a;
+
+  --ion-color-danger: #f04141;
+  --ion-color-danger-rgb: 245, 61, 61;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #d33939;
+  --ion-color-danger-tint: #f25454;
+
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 34, 34;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 244, 244;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+```
+
+For more info on theming your Ionic app, see the guide [here](/docs/theming/themes).
+
+### Wrapping up
+
+Adding Ionic React to an existing React project is fairly simple and can be done in just a few minutes.
+
+The great thing about using individual components from Ionic React is that you only import the component you need. This makes Ionic React ideal for adding it to existing projects that need to look and work great on mobile devices.
diff --git a/sidebars.js b/sidebars.js
index 019a6a8b483..e9610cbdb0d 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -116,6 +116,7 @@ module.exports = {
             'react/your-first-app/distribute',
           ],
         },
+        'react/adding-ionic-react-to-an-existing-react-project',
         'react/lifecycle',
         'react/navigation',
         'react/virtual-scroll',

From b58219e21d6423858d7f6b6ff1b1b01fae59e789 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 25 Jan 2023 15:25:29 -0500
Subject: [PATCH 175/469] fix(upgrade-pill): revert back to v6 upgrade guide
 (#2723)

---
 docusaurus.config.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2524d5e5070..8746715cbe1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -98,8 +98,8 @@ module.exports = {
         {
           type: 'cta',
           position: 'left',
-          text: 'Ionic v7.0.0 Upgrade Guide',
-          href: `/updating/7-0`,
+          text: 'Ionic v6.0.0 Upgrade Guide',
+          href: `/intro/upgrading-to-ionic-6`,
         },
         {
           type: 'docsVersionDropdown',
@@ -284,12 +284,12 @@ module.exports = {
           current: {
             label: 'v7 (beta)',
             banner: 'unreleased',
-            path: 'v7'
+            path: 'v7',
           },
-          'v6': {
+          v6: {
             label: 'v6',
-            banner: 'none'
-          }
+            banner: 'none',
+          },
         },
       },
     ],

From 6ce138931fea18f111388e5f98e1db70993503c9 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 26 Jan 2023 15:20:01 -0600
Subject: [PATCH 176/469] docs(alert): add inline usage examples (#2726)

---
 docs/api/alert.md                             | 87 ++++---------------
 .../buttons/angular/example_component_html.md |  8 +-
 .../buttons/angular/example_component_ts.md   | 41 +++------
 static/usage/v7/alert/buttons/demo.html       | 48 +++++-----
 static/usage/v7/alert/buttons/javascript.md   | 40 ++++-----
 static/usage/v7/alert/buttons/react.md        | 51 +++++------
 static/usage/v7/alert/buttons/vue.md          | 59 ++++++-------
 .../angular/example_component_html.md         |  8 +-
 .../angular/example_component_ts.md           | 31 +++----
 static/usage/v7/alert/customization/demo.html | 35 ++++----
 .../v7/alert/customization/javascript.md      | 33 +++----
 .../v7/alert/customization/react/main_tsx.md  | 42 ++++-----
 static/usage/v7/alert/customization/vue.md    | 42 +++++----
 .../radios/angular/example_component_html.md  |  8 +-
 .../radios/angular/example_component_ts.md    | 46 ++++------
 static/usage/v7/alert/inputs/radios/demo.html | 50 +++++------
 .../v7/alert/inputs/radios/javascript.md      | 46 +++++-----
 static/usage/v7/alert/inputs/radios/react.md  | 56 ++++++------
 static/usage/v7/alert/inputs/radios/vue.md    | 57 ++++++------
 .../angular/example_component_html.md         |  8 +-
 .../angular/example_component_ts.md           | 54 +++++-------
 .../v7/alert/inputs/text-inputs/demo.html     | 58 ++++++-------
 .../v7/alert/inputs/text-inputs/javascript.md | 54 ++++++------
 .../v7/alert/inputs/text-inputs/react.md      | 62 +++++++------
 .../usage/v7/alert/inputs/text-inputs/vue.md  | 65 +++++++-------
 .../isOpen/angular/example_component_html.md  | 11 +++
 .../isOpen/angular/example_component_ts.md    | 16 ++++
 .../v7/alert/presenting/isOpen/demo.html      | 38 ++++++++
 .../usage/v7/alert/presenting/isOpen/index.md | 25 ++++++
 .../v7/alert/presenting/isOpen/javascript.md  | 17 ++++
 .../usage/v7/alert/presenting/isOpen/react.md | 23 +++++
 .../usage/v7/alert/presenting/isOpen/vue.md   | 32 +++++++
 .../trigger/angular/example_component_html.md | 10 +++
 .../trigger/angular/example_component_ts.md   | 11 +++
 .../v7/alert/presenting/trigger/demo.html     | 35 ++++++++
 .../v7/alert/presenting/trigger/index.md      | 25 ++++++
 .../v7/alert/presenting/trigger/javascript.md | 14 +++
 .../v7/alert/presenting/trigger/react.md      | 20 +++++
 .../usage/v7/alert/presenting/trigger/vue.md  | 25 ++++++
 39 files changed, 784 insertions(+), 607 deletions(-)
 create mode 100644 static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
 create mode 100644 static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
 create mode 100644 static/usage/v7/alert/presenting/isOpen/demo.html
 create mode 100644 static/usage/v7/alert/presenting/isOpen/index.md
 create mode 100644 static/usage/v7/alert/presenting/isOpen/javascript.md
 create mode 100644 static/usage/v7/alert/presenting/isOpen/react.md
 create mode 100644 static/usage/v7/alert/presenting/isOpen/vue.md
 create mode 100644 static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
 create mode 100644 static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
 create mode 100644 static/usage/v7/alert/presenting/trigger/demo.html
 create mode 100644 static/usage/v7/alert/presenting/trigger/index.md
 create mode 100644 static/usage/v7/alert/presenting/trigger/javascript.md
 create mode 100644 static/usage/v7/alert/presenting/trigger/react.md
 create mode 100644 static/usage/v7/alert/presenting/trigger/vue.md

diff --git a/docs/api/alert.md b/docs/api/alert.md
index 320524bc7ac..66cfe9e147b 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -20,84 +20,33 @@ 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`.
 
+## Inline Alerts (Recommended)
 
-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`.
+`ion-alert` 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 Alert.
 
-## Presenting
+import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md';
 
-### Controller
+<Trigger />
 
-import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
+### Using `isOpen`
 
-<Controller />
+The `isOpen` property on `ion-alert` allows developers to control the presentation state of the Alert from their application state. This means when `isOpen` is set to `true` the Alert will be presented, and when `isOpen` is set to `false` the Alert will be dismissed.
 
-### 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>
-  );
-}
-```
+`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert 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.
 
-</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>
-```
+import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
 
-</TabItem>
-</Tabs>
+<IsOpen />
+
+## Controller Alerts
+
+The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed.
+
+import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
+
+<Controller />
 
 ## Buttons
 
diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md
index 5cddcd596ed..bd9fb37882c 100644
--- a/static/usage/v7/alert/buttons/angular/example_component_html.md
+++ b/static/usage/v7/alert/buttons/angular/example_component_html.md
@@ -1,5 +1,11 @@
 ```html
-<ion-button (click)="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert
+  trigger="present-alert"
+  header="Alert!"
+  [buttons]="alertButtons"
+  (didDismiss)="setResult($event)"
+></ion-alert>
 <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
index f4a7b4e9a18..89b76aaed6a 100644
--- a/static/usage/v7/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md
@@ -1,6 +1,5 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -10,33 +9,21 @@ export class ExampleComponent {
   handlerMessage = '';
   roleMessage = '';
 
-  constructor(private alertController: AlertController) {}
+  public alertButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      handler: () => { this.handlerMessage = 'Alert canceled'; }
+    },
+    {
+      text: 'OK',
+      role: 'confirm',
+      handler: () => { this.handlerMessage = 'Alert confirmed'; }
+    }
+  ];
 
-  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}`;
+  setResult(ev) {
+    this.roleMessage = `Dismissed with role: ${ev.detail.role}`;
   }
 }
 ```
diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html
index bd5f4eb4367..8d60d9d2324 100644
--- a/static/usage/v7/alert/buttons/demo.html
+++ b/static/usage/v7/alert/buttons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -25,7 +25,8 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
+        <ion-button id="present-alert">Click Me</ion-button>
+        <ion-alert trigger="present-alert" header="Alert!"></ion-alert>
         <p id="handlerResult"></p>
         <p id="roleResult"></p>
       </div>
@@ -35,29 +36,24 @@
   <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}`;
-    }
+    const alert = document.querySelector('ion-alert');
+
+    alert.buttons = [
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        handler: () => { handlerOutput.innerText = 'Alert canceled'; }
+      },
+      {
+        text: 'OK',
+        role: 'confirm',
+        handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
+      }
+    ];
+
+    alert.addEventListener('ionAlertDidDismiss', (ev) => {
+      roleOutput.innerText = `Dismissed with role: ${ev.detail.role}`;
+    });
   </script>
 </body>
 
diff --git a/static/usage/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md
index 9550a72ca43..6f70843e204 100644
--- a/static/usage/v7/alert/buttons/javascript.md
+++ b/static/usage/v7/alert/buttons/javascript.md
@@ -1,33 +1,29 @@
 ```html
-<ion-button onclick="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert trigger="present-alert" header="Alert!"></ion-alert>
 <p id="handlerResult"></p>
 <p id="roleResult"></p>
 
 <script>
   const handlerOutput = document.querySelector('#handlerResult');
   const roleOutput = document.querySelector('#roleResult');
+  const alert = document.querySelector('ion-alert');
 
-  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'; }
-      }
-    ];
+  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}`;
-  }
+  alert.addEventListener('ionAlertDidDismiss', (ev) => {
+    roleOutput.innerText = `Dismissed with role: ${ev.detail.role}`;
+  });
 </script>
 ```
diff --git a/static/usage/v7/alert/buttons/react.md b/static/usage/v7/alert/buttons/react.md
index da6138b71c5..5512021adca 100644
--- a/static/usage/v7/alert/buttons/react.md
+++ b/static/usage/v7/alert/buttons/react.md
@@ -1,40 +1,35 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, useIonAlert } from '@ionic/react';
+import { IonAlert, IonButton } 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>
+      <IonButton id="present-alert">Click Me</IonButton>
+      <IonAlert
+        header="Alert!"
+        trigger="present-alert"
+        buttons={[
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            handler: () => {
+              setHandlerMessage('Alert canceled');
+            },
+          },
+          {
+            text: 'OK',
+            role: 'confirm',
+            handler: () => {
+              setHandlerMessage('Alert confirmed');
+            },
+          },
+        ]}
+        onDidDismiss={({ detail }) => setRoleMessage(`Dismissed with role: ${detail.role}`)}
+      ></IonAlert>
       <p>{handlerMessage}</p>
       <p>{roleMessage}</p>
     </>
diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
index 0e22b47e911..50cf42bb5a3 100644
--- a/static/usage/v7/alert/buttons/vue.md
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -1,51 +1,52 @@
 ```html
 <template>
-  <ion-button @click="presentAlert">Click Me</ion-button>
+  <ion-button id="present-alert">Click Me</ion-button>
+  <ion-alert
+    trigger="present-alert"
+    header="Alert!"
+    :buttons="alertButtons"
+    @didDismiss="setResult($event)"
+  ></ion-alert>
   <p>{{ handlerMessage }}</p>
   <p>{{ roleMessage }}</p>
 </template>
 
 <script lang="ts">
   import { ref } from 'vue';
-  import { IonButton, alertController } from '@ionic/vue';
+  import { IonAlert, IonButton } from '@ionic/vue';
 
   export default {
-    components: { IonButton },
+    components: { IonAlert, 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';
-              },
-            },
-          ],
-        });
+      const alertButtons = [
+        {
+          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}`;
-      };
+      const setResult = (ev: CustomEvent) => {
+        roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
+      }
 
       return {
         handlerMessage,
         roleMessage,
-        presentAlert,
+        alertButtons,
+        setResult
       };
     },
   };
diff --git a/static/usage/v7/alert/customization/angular/example_component_html.md b/static/usage/v7/alert/customization/angular/example_component_html.md
index 183dd98719d..0da962b2489 100644
--- a/static/usage/v7/alert/customization/angular/example_component_html.md
+++ b/static/usage/v7/alert/customization/angular/example_component_html.md
@@ -1,3 +1,9 @@
 ```html
-<ion-button (click)="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert
+  trigger="present-alert"
+  class="custom-alert"
+  header="Are you sure?"
+  [buttons]="alertButtons"
+></ion-alert>
 ```
diff --git a/static/usage/v7/alert/customization/angular/example_component_ts.md b/static/usage/v7/alert/customization/angular/example_component_ts.md
index 9606aeb72f4..51552ff9852 100644
--- a/static/usage/v7/alert/customization/angular/example_component_ts.md
+++ b/static/usage/v7/alert/customization/angular/example_component_ts.md
@@ -1,31 +1,20 @@
 ```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();
-  }
+  public alertButtons = [
+    {
+      text: 'No',
+      cssClass: 'alert-button-cancel',
+    },
+    {
+      text: 'Yes',
+      cssClass: 'alert-button-confirm',
+    },
+  ];
 }
 ```
diff --git a/static/usage/v7/alert/customization/demo.html b/static/usage/v7/alert/customization/demo.html
index a17881c7825..78ab38ce7b3 100644
--- a/static/usage/v7/alert/customization/demo.html
+++ b/static/usage/v7/alert/customization/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-alert.custom-alert {
@@ -49,30 +49,25 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
+        <ion-button id="present-alert">Click Me</ion-button>
+        <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?"></ion-alert>
       </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'
-        }
-      ];
+    const alert = document.querySelector('ion-alert');
 
-      document.body.appendChild(alert);
-      await alert.present();
-    }
+    alert.buttons = [
+      {
+        text: 'No',
+        cssClass: 'alert-button-cancel'
+      },
+      {
+        text: 'Yes',
+        cssClass: 'alert-button-confirm'
+      }
+    ];
   </script>
 </body>
 
diff --git a/static/usage/v7/alert/customization/javascript.md b/static/usage/v7/alert/customization/javascript.md
index f6280b08e3d..f57e9958bfb 100644
--- a/static/usage/v7/alert/customization/javascript.md
+++ b/static/usage/v7/alert/customization/javascript.md
@@ -1,25 +1,20 @@
 ```html
-<ion-button onclick="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?"></ion-alert>
 
 <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();
-  }
+  const alert = document.querySelector('ion-alert');
+
+  alert.buttons = [
+    {
+      text: 'No',
+      cssClass: 'alert-button-cancel'
+    },
+    {
+      text: 'Yes',
+      cssClass: 'alert-button-confirm'
+    }
+  ];
 </script>
 
 <style>
diff --git a/static/usage/v7/alert/customization/react/main_tsx.md b/static/usage/v7/alert/customization/react/main_tsx.md
index 7a04d967cea..b32663d5339 100644
--- a/static/usage/v7/alert/customization/react/main_tsx.md
+++ b/static/usage/v7/alert/customization/react/main_tsx.md
@@ -1,33 +1,29 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonAlert } from '@ionic/react';
+import { IonAlert, IonButton } 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>
+    <>
+      <IonButton id="present-alert">Click Me</IonButton>
+      <IonAlert
+        trigger="present-alert"
+        header="Are you sure?"
+        className="custom-alert"
+        buttons={[
+          {
+            text: 'No',
+            cssClass: 'alert-button-cancel',
+          },
+          {
+            text: 'Yes',
+            cssClass: 'alert-button-confirm',
+          },
+        ]}
+      ></IonAlert>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md
index bf3ae0d5edf..7bd279bd0c1 100644
--- a/static/usage/v7/alert/customization/vue.md
+++ b/static/usage/v7/alert/customization/vue.md
@@ -1,34 +1,32 @@
 ```html
 <template>
-  <ion-button @click="presentAlert">Click Me</ion-button>
+  <ion-button id="present-alert">Click Me</ion-button>
+  <ion-alert
+    trigger="present-alert"
+    class="custom-alert"
+    header="Are you sure?"
+    :buttons="alertButtons"
+  ></ion-alert>
 </template>
 
 <script lang="ts">
-  import { IonButton, alertController } from '@ionic/vue';
+  import { IonAlert, IonButton } from '@ionic/vue';
 
   export default {
-    components: { IonButton },
+    components: { IonAlert, 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',
-            },
-          ],
-        });
+      const alertButtons = [
+        {
+          text: 'No',
+          cssClass: 'alert-button-cancel',
+        },
+        {
+          text: 'Yes',
+          cssClass: 'alert-button-confirm',
+        },
+      ];
 
-        await alert.present();
-      };
-
-      return { presentAlert };
+      return { alertButtons };
     },
   };
 </script>
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
index e484d6c912d..6d70c3bd2c1 100644
--- a/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
@@ -1,3 +1,9 @@
 ```html
-<ion-button (click)="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert
+  trigger="present-alert"
+  header="Select your favorite color"
+  [buttons]="alertButtons"
+  [inputs]="alertInputs"
+></ion-alert>
 ```
\ 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
index 78b305a0f59..34f44b288da 100644
--- a/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
@@ -1,38 +1,28 @@
 ```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();
-  }
+  public alertButtons = ['OK'];
+  public alertInputs = [
+    {
+      label: 'Red',
+      type: 'radio',
+      value: 'red',
+    },
+    {
+      label: 'Blue',
+      type: 'radio',
+      value: 'blue',
+    },
+    {
+      label: 'Green',
+      type: 'radio',
+      value: 'green',
+    },
+  ];
 }
 ```
diff --git a/static/usage/v7/alert/inputs/radios/demo.html b/static/usage/v7/alert/inputs/radios/demo.html
index 5f5ebb0e8b9..0428ce98f22 100644
--- a/static/usage/v7/alert/inputs/radios/demo.html
+++ b/static/usage/v7/alert/inputs/radios/demo.html
@@ -7,45 +7,41 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
+        <ion-button id="present-alert">Click Me</ion-button>
+        <ion-alert trigger="present-alert" header="Select your favorite color"></ion-alert>
       </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'
-        }
-      ];
+    const alert = document.querySelector('ion-alert');
 
-      document.body.appendChild(alert);
-      await alert.present();
-    }
+    alert.buttons = ['OK'];
+    alert.inputs = [
+      {
+        label: 'Red',
+        type: 'radio',
+        value: 'red'
+      },
+      {
+        label: 'Blue',
+        type: 'radio',
+        value: 'blue'
+      },
+      {
+        label: 'Green',
+        type: 'radio',
+        value: 'green'
+      }
+    ];
   </script>
 </body>
 
diff --git a/static/usage/v7/alert/inputs/radios/javascript.md b/static/usage/v7/alert/inputs/radios/javascript.md
index 341bdf8b1eb..217b8c89054 100644
--- a/static/usage/v7/alert/inputs/radios/javascript.md
+++ b/static/usage/v7/alert/inputs/radios/javascript.md
@@ -1,31 +1,27 @@
 ```html
-<ion-button onclick="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert trigger="present-alert" header="Select your favorite color"></ion-alert>
 
 <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'
-      }
-    ];
+  const alert = document.querySelector('ion-alert');
 
-    document.body.appendChild(alert);
-    await alert.present();
-  }
+  alert.buttons = ['OK'];
+  alert.inputs = [
+    {
+      label: 'Red',
+      type: 'radio',
+      value: 'red'
+    },
+    {
+      label: 'Blue',
+      type: 'radio',
+      value: 'blue'
+    },
+    {
+      label: 'Green',
+      type: 'radio',
+      value: 'green'
+    }
+  ];
 </script>
 ```
diff --git a/static/usage/v7/alert/inputs/radios/react.md b/static/usage/v7/alert/inputs/radios/react.md
index 475135e63b1..13518c02aa4 100644
--- a/static/usage/v7/alert/inputs/radios/react.md
+++ b/static/usage/v7/alert/inputs/radios/react.md
@@ -1,38 +1,34 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonAlert } from '@ionic/react';
+import { IonAlert, IonButton } 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>
+    <>
+      <IonButton id="present-alert">Click Me</IonButton>
+      <IonAlert
+        trigger="present-alert"
+        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',
+          },
+        ]}
+      ></IonAlert>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/alert/inputs/radios/vue.md b/static/usage/v7/alert/inputs/radios/vue.md
index 2122acba635..994496c025e 100644
--- a/static/usage/v7/alert/inputs/radios/vue.md
+++ b/static/usage/v7/alert/inputs/radios/vue.md
@@ -1,41 +1,40 @@
 ```html
 <template>
-  <ion-button @click="presentAlert">Click Me</ion-button>
+  <ion-button id="present-alert">Click Me</ion-button>
+  <ion-alert
+    trigger="present-alert"
+    header="Select your favorite color"
+    :buttons="alertButtons"
+    :inputs="alertInputs"
+  ></ion-alert>
 </template>
 
 <script lang="ts">
-  import { IonButton, alertController } from '@ionic/vue';
+  import { IonAlert, IonButton } from '@ionic/vue';
 
   export default {
-    components: { IonButton },
+    components: { IonAlert, 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',
-            },
-          ],
-        });
+      const alertButtons = ['OK'];
+      const alertInputs = [
+        {
+          label: 'Red',
+          type: 'radio',
+          value: 'red',
+        },
+        {
+          label: 'Blue',
+          type: 'radio',
+          value: 'blue',
+        },
+        {
+          label: 'Green',
+          type: 'radio',
+          value: 'green',
+        },
+      ];
 
-        await alert.present();
-      };
-
-      return { presentAlert };
+      return { alertButtons, alertInputs };
     },
   };
 </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
index e484d6c912d..fec220f8ecc 100644
--- 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
@@ -1,3 +1,9 @@
 ```html
-<ion-button (click)="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert
+  trigger="present-alert"
+  header="Please enter your info"
+  [buttons]="alertButtons"
+  [inputs]="alertInputs"
+></ion-alert>
 ```
\ 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
index 2c4f2ab04d2..713dc9067fa 100644
--- 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
@@ -1,42 +1,32 @@
 ```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();
-  }
+  public alertButtons = ['OK'];
+  public alertInputs = [
+    {
+      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',
+    },
+  ];
 }
 ```
diff --git a/static/usage/v7/alert/inputs/text-inputs/demo.html b/static/usage/v7/alert/inputs/text-inputs/demo.html
index d2badb8c851..f60e3f2e887 100644
--- a/static/usage/v7/alert/inputs/text-inputs/demo.html
+++ b/static/usage/v7/alert/inputs/text-inputs/demo.html
@@ -7,49 +7,45 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="presentAlert()">Click Me</ion-button>
+        <ion-button id="present-alert">Click Me</ion-button>
+        <ion-alert trigger="present-alert" header="Please enter your info"></ion-alert>
       </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'
-        }
-      ];
+    const alert = document.querySelector('ion-alert');
 
-      document.body.appendChild(alert);
-      await alert.present();
-    }
+    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'
+      }
+    ];
   </script>
 </body>
 
diff --git a/static/usage/v7/alert/inputs/text-inputs/javascript.md b/static/usage/v7/alert/inputs/text-inputs/javascript.md
index 84f96bf5f8d..c75afba0a15 100644
--- a/static/usage/v7/alert/inputs/text-inputs/javascript.md
+++ b/static/usage/v7/alert/inputs/text-inputs/javascript.md
@@ -1,35 +1,31 @@
 ```html
-<ion-button onclick="presentAlert()">Click Me</ion-button>
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert trigger="present-alert" header="Please enter your info"></ion-alert>
 
 <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'
-      }
-    ];
+  const alert = document.querySelector('ion-alert');
 
-    document.body.appendChild(alert);
-    await alert.present();
-  }
+  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'
+    }
+  ];
 </script>
 ```
diff --git a/static/usage/v7/alert/inputs/text-inputs/react.md b/static/usage/v7/alert/inputs/text-inputs/react.md
index e496935f690..fbea607f2b3 100644
--- a/static/usage/v7/alert/inputs/text-inputs/react.md
+++ b/static/usage/v7/alert/inputs/text-inputs/react.md
@@ -1,42 +1,38 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonAlert } from '@ionic/react';
+import { IonAlert, IonButton } 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',
+    <>
+      <IonButton id="present-alert">Click Me</IonButton>
+      <IonAlert
+        trigger="present-alert"
+        header="Please enter your info"
+        buttons={['OK']}
+        inputs={[
+          {
+            placeholder: 'Name',
+          },
+          {
+            placeholder: 'Nickname (max 8 characters)',
+            attributes: {
+              maxlength: 8,
             },
-          ],
-        })
-      }
-    >
-      Click Me
-    </IonButton>
+          },
+          {
+            type: 'number',
+            placeholder: 'Age',
+            min: 1,
+            max: 100,
+          },
+          {
+            type: 'textarea',
+            placeholder: 'A little about yourself',
+          },
+        ]}
+      ></IonAlert>
+    </>
   );
 }
 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
index 32edc59e311..98a2b138607 100644
--- a/static/usage/v7/alert/inputs/text-inputs/vue.md
+++ b/static/usage/v7/alert/inputs/text-inputs/vue.md
@@ -1,45 +1,44 @@
 ```html
 <template>
-  <ion-button @click="presentAlert">Click Me</ion-button>
+  <ion-button id="present-alert">Click Me</ion-button>
+  <ion-alert
+    trigger="present-alert"
+    header="Please enter your info"
+    :buttons="alertButtons"
+    :inputs="alertInputs"
+  ></ion-alert>
 </template>
 
 <script lang="ts">
-  import { IonButton, alertController } from '@ionic/vue';
+  import { IonAlert, IonButton } from '@ionic/vue';
 
   export default {
-    components: { IonButton },
+    components: { IonAlert, 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',
-            },
-          ],
-        });
+      const alertButtons = ['OK'];
+      const alertInputs = [
+        {
+          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 };
+      return { alertButtons, alertInputs };
     },
   };
 </script>
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..6e4c36ec85b
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-button (click)="setOpen(true)">Click Me</ion-button>
+<ion-alert
+  [isOpen]="isAlertOpen"
+  header="Alert"
+  subHeader="Important message"
+  message="This is an alert!"
+  [buttons]="alertButtons"
+  (didDismiss)="setOpen(false)"
+></ion-alert>
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..789679a2ccc
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/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 {
+  isAlertOpen = false;
+  public alertButtons = ['OK'];
+
+  setOpen(isOpen: boolean) {
+    this.isAlertOpen = isOpen;
+  }
+}
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/demo.html b/static/usage/v7/alert/presenting/isOpen/demo.html
new file mode 100644
index 00000000000..a995ff78e35
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/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>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="alert.isOpen = true">Click Me</ion-button>
+        <ion-alert
+          header="Alert"
+          sub-header="Important message"
+          message="This is an alert!"
+        ></ion-alert>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const alert = document.querySelector('ion-alert');
+
+    alert.buttons = ['OK'];
+    alert.addEventListener('ionAlertDidDismiss', () => {
+      alert.isOpen = false;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/isOpen/index.md b/static/usage/v7/alert/presenting/isOpen/index.md
new file mode 100644
index 00000000000..e00b0e96f07
--- /dev/null
+++ b/static/usage/v7/alert/presenting/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/alert/presenting/isOpen/demo.html"
+/>
diff --git a/static/usage/v7/alert/presenting/isOpen/javascript.md b/static/usage/v7/alert/presenting/isOpen/javascript.md
new file mode 100644
index 00000000000..f48b512c452
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-button onclick="alert.isOpen = true">Click Me</ion-button>
+<ion-alert
+  header="Alert"
+  sub-header="Important message"
+  message="This is an alert!"
+></ion-alert>
+
+<script>
+  const alert = document.querySelector('ion-alert');
+
+  alert.buttons = ['OK'];
+  alert.addEventListener('ionAlertDidDismiss', () => {
+    alert.isOpen = false;
+  });
+</script>
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/react.md b/static/usage/v7/alert/presenting/isOpen/react.md
new file mode 100644
index 00000000000..5ce08ffe1d0
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React, { useState } from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <IonButton onClick={() => setIsOpen(true)}>Click Me</IonButton>
+      <IonAlert
+        isOpen={isOpen}
+        header="Alert"
+        subHeader="Important message"
+        message="This is an alert!"
+        buttons={['OK']}
+        onDidDismiss={() => setIsOpen(false)}
+      ></IonAlert>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/vue.md b/static/usage/v7/alert/presenting/isOpen/vue.md
new file mode 100644
index 00000000000..57b8ccc217a
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-button @click="setOpen(true)">Click Me</ion-button>
+  <ion-alert
+    :is-open="isOpen"
+    header="Alert"
+    sub-header="Important message"
+    message="This is an alert!"
+    :buttons="alertButtons"
+    @didDismiss="setOpen(false)"
+  ></ion-alert>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { IonAlert, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonAlert, IonButton },
+    setup() {
+      const isOpen = ref(false);
+      const alertButtons = ['OK'];
+
+      const setOpen = (state: boolean) => {
+        isOpen.value = state;
+      };
+
+      return { isOpen, alertButtons, setOpen };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..4d0cf868890
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert
+  trigger="present-alert"
+  header="Alert"
+  subHeader="Important message"
+  message="This is an alert!"
+  [buttons]="alertButtons"
+></ion-alert>
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..c63ce5858e4
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/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 {
+  public alertButtons = ['OK'];
+}
+```
diff --git a/static/usage/v7/alert/presenting/trigger/demo.html b/static/usage/v7/alert/presenting/trigger/demo.html
new file mode 100644
index 00000000000..a19fd9514f3
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/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>Alert</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="present-alert">Click Me</ion-button>
+        <ion-alert
+          trigger="present-alert"
+          header="Alert"
+          sub-header="Important message"
+          message="This is an alert!"
+        ></ion-alert>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const alert = document.querySelector('ion-alert');
+    alert.buttons = ['OK'];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/trigger/index.md b/static/usage/v7/alert/presenting/trigger/index.md
new file mode 100644
index 00000000000..1a45a1c51d4
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/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/trigger/demo.html"
+/>
diff --git a/static/usage/v7/alert/presenting/trigger/javascript.md b/static/usage/v7/alert/presenting/trigger/javascript.md
new file mode 100644
index 00000000000..82d43db4267
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-button id="present-alert">Click Me</ion-button>
+<ion-alert
+  trigger="present-alert"
+  header="Alert"
+  sub-header="Important message"
+  message="This is an alert!"
+></ion-alert>
+
+<script>
+  const alert = document.querySelector('ion-alert');
+  alert.buttons = ['OK'];
+</script>
+```
diff --git a/static/usage/v7/alert/presenting/trigger/react.md b/static/usage/v7/alert/presenting/trigger/react.md
new file mode 100644
index 00000000000..d096665527b
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton id="present-alert">Click Me</IonButton>
+      <IonAlert
+        trigger="present-alert"
+        header="Alert"
+        subHeader="Important message"
+        message="This is an alert!"
+        buttons={['OK']}
+      ></IonAlert>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/presenting/trigger/vue.md b/static/usage/v7/alert/presenting/trigger/vue.md
new file mode 100644
index 00000000000..86e93aaac1f
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-button id="present-alert">Click Me</ion-button>
+  <ion-alert
+    trigger="present-alert"
+    header="Alert"
+    sub-header="Important message"
+    message="This is an alert!"
+    :buttons="alertButtons"
+  ></ion-alert>
+</template>
+
+<script lang="ts">
+  import { IonAlert, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonAlert, IonButton },
+    setup() {
+      const alertButtons = ['OK'];
+
+      return { alertButtons };
+    },
+  };
+</script>
+```

From 86e1012f7b1b1da2513e7f2881d7d6d1e6425736 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 27 Jan 2023 13:30:16 -0600
Subject: [PATCH 177/469] docs(modal): note that 0 breakpoint is required for
 dismiss on swipe (#2732)

---
 docs/api/modal.md                      | 2 +-
 versioned_docs/version-v6/api/modal.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 5b022cfd8b8..6e68846652e 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -101,7 +101,7 @@ import CardExample from '@site/static/usage/v7/modal/card/basic/index.md';
 
 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 `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. Note that the modal cannot be dismissed on swipe if no `0` breakpoint is included, but it can still be dismissed by pressing `Esc` or the hardware back button.
 
 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.
 
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
index 38079cb6cc9..68d44332e4e 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.md
@@ -105,7 +105,7 @@ import CardExample from '@site/static/usage/v6/modal/card/basic/index.md';
 
 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 `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. Note that the modal cannot be dismissed on swipe if no `0` breakpoint is included, but it can still be dismissed by pressing `Esc` or the hardware back button.
 
 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.
 

From a2de1c7ec98549a7b421988d3cefd5160f0fd1d7 Mon Sep 17 00:00:00 2001
From: Lars Mikkelsen <lars@ionic.io>
Date: Fri, 27 Jan 2023 21:36:26 -0500
Subject: [PATCH 178/469] Auto generate docs for v6 (#2735)

---
 scripts/cli.js    | 5 +++--
 scripts/native.js | 7 ++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/scripts/cli.js b/scripts/cli.js
index deefed3a59c..6bb3ad18fea 100644
--- a/scripts/cli.js
+++ b/scripts/cli.js
@@ -26,8 +26,9 @@ function writePage(page) {
     renderExamples(page),
   ].join('');
 
-  const path = `docs/cli/commands/${commandToKebab(page.name)}.md`;
-  fs.writeFileSync(path, data);
+  const path = `cli/commands/${commandToKebab(page.name)}.md`;
+  fs.writeFileSync(`docs/${path}`, data);
+  fs.writeFileSync(`versioned_docs/version-v6/${path}`, data);
 }
 
 function renderFrontmatter({ name, groups }) {
diff --git a/scripts/native.js b/scripts/native.js
index 5470930d839..3688d2db901 100644
--- a/scripts/native.js
+++ b/scripts/native.js
@@ -1,9 +1,6 @@
 const fs = require('fs');
 const fetch = require('node-fetch');
 
-const API_DIR = './docs/native/';
-
-
 // replace with latest once it's relased
 const tag = 'latest';
 
@@ -39,8 +36,8 @@ async function buildPluginApiDocs(pluginId) {
 
   const apiContent = createApiPage(pluginId, readme, pkgJson);
   const fileName = `${pluginId}.md`;
-  const filePath = `${API_DIR}${fileName}`
-  fs.writeFileSync(filePath, apiContent);
+  fs.writeFileSync(`docs/native/${fileName}`, apiContent);
+  fs.writeFileSync(`versioned_docs/version-v6/native/${fileName}`, apiContent);
 }
 
 function createApiPage(pluginId, readme, pkgJson) {

From c3f7e525a6304312a97bd6244d3d4d4b746dc8dd Mon Sep 17 00:00:00 2001
From: Mike Hartington <mhartington@users.noreply.github.com>
Date: Mon, 30 Jan 2023 13:10:37 -0500
Subject: [PATCH 179/469] fix native getting started (#2736)

---
 versioned_docs/version-v6/native-community.md | 200 ------------------
 versioned_docs/version-v6/native-faq.md       |  82 +------
 versioned_docs/version-v6/native-setup.md     | 146 +++++++++++++
 versioned_docs/version-v6/native.md           |  29 +--
 versioned_sidebars/version-v6-sidebars.json   |   7 +-
 5 files changed, 164 insertions(+), 300 deletions(-)
 delete mode 100644 versioned_docs/version-v6/native-community.md
 create mode 100644 versioned_docs/version-v6/native-setup.md

diff --git a/versioned_docs/version-v6/native-community.md b/versioned_docs/version-v6/native-community.md
deleted file mode 100644
index 0bd759f18e8..00000000000
--- a/versioned_docs/version-v6/native-community.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-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
index 80cb5b1ae89..ceaf06b6d38 100644
--- a/versioned_docs/version-v6/native-faq.md
+++ b/versioned_docs/version-v6/native-faq.md
@@ -3,83 +3,23 @@ sidebar_label: FAQ
 slug: /native/faq
 ---
 
-# Ionic Native FAQ
+# Frequently Asked Question
 
-## Cordova Management Tips
+## What is Capacitor? 
 
-**1) Use the [Ionic CLI](cli.md) to add/update/delete plugins.**
+Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. 
 
-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`).
+## Permission Issues
 
-**2) Upgrade plugins by removing, then re-adding them.**
+If you're using a plugin, it may require adding additional permissions to your native project after you install the plugin. For instance, the Capacitor Camera plugin requires the following permission for iOS:
 
-```shell
-$ ionic cordova plugin remove cordova-plugin-camera
-$ ionic cordova plugin add cordova-plugin-camera
-```
+- `NSCameraUsageDescription` (`Privacy - Camera Usage Description`)
+- `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
+- `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
 
-**3) Install explicit versions.**
+You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. 
 
-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
-```
+## Unexpected behaviour
 
-**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?
+If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
\ No newline at end of file
diff --git a/versioned_docs/version-v6/native-setup.md b/versioned_docs/version-v6/native-setup.md
new file mode 100644
index 00000000000..30a8ac5c0fc
--- /dev/null
+++ b/versioned_docs/version-v6/native-setup.md
@@ -0,0 +1,146 @@
+---
+title: Capacitor Plugins
+sidebar_label: Setup
+hide_table_of_contents: true
+slug: /native/setup
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Capacitor Plugins | Capacitor Core Plugins for Ionic Apps</title>
+  <meta
+    name="description"
+    content="Capacitor offers a collection APIs that make adding native functionality to your Ionic app as simple as using any JavaScript library."
+  />
+  <style>{`
+    :root {
+      --doc-item-container-width: 60rem;
+    }
+  `}</style>
+</head>
+
+Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project.
+<intro-end />
+
+## Install
+
+To install a plugin, find the plugin you want to use and install it using your package manager, like npm:
+
+```shell
+# Install the Capacitor Plugins
+$ npm install @capacitor/camera
+```
+
+## Usage
+
+Once installed, plugins can be imported into a component and you can call the native functionality directly from your code.
+
+Using the [Camera plugin](native/camera.md) as an example, first install it:
+
+````mdx-code-block
+<Tabs
+  groupId="runtime"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'react', label: 'React' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+import { Camera, CameraResultType } from '@capacitor/camera';
+
+const takePicture = async () => {
+  const image = await Camera.getPhoto({
+    quality: 90,
+    allowEditing: true,
+    resultType: CameraResultType.Uri
+  });
+  const imageUrl = image.webPath;
+  imageElement.src = imageUrl;
+};
+```
+
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+import { Component } from '@angular/core';
+import { Camera, CameraResultType } from '@capacitor/camera';
+
+@Component({...})
+export class CameraComponent{
+  public imageSrc = '';
+
+  async takePicture() {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri
+    });
+    const imageUrl = image.webPath;
+    this.imageSrc = imageUrl;
+  };
+
+}
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```typescript
+
+<template>
+...
+</template>
+
+<script setup lang="typescript">
+import { ref } from 'vue';
+import { Camera, CameraResultType } from '@capacitor/camera';
+const imageSrc = ref('');
+
+const takePicture = async () => {
+  const image = await Camera.getPhoto({
+    quality: 90,
+    allowEditing: true,
+    resultType: CameraResultType.Uri
+  });
+  const imageUrl = image.webPath;
+  imageSrc.value = imageUrl;
+};
+
+</script>
+
+```
+
+</TabItem>
+<TabItem value="react">
+
+```javascript
+import { Camera, CameraResultType } from '@capacitor/camera';
+import { useState } from 'react';
+
+export function CameraComponent() {
+  const [imageSrc, setImageSrc] = usetState('');
+
+  const takePicture = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri
+    });
+    const imageUrl = image.webPath;
+    setImageSrc(imageUrl);
+  };
+  return (...)
+}
+```
+
+</TabItem>
+</Tabs>
+````
diff --git a/versioned_docs/version-v6/native.md b/versioned_docs/version-v6/native.md
index 1c5efecb489..f17ba591bf7 100644
--- a/versioned_docs/version-v6/native.md
+++ b/versioned_docs/version-v6/native.md
@@ -1,5 +1,5 @@
 ---
-title: Native APIs
+title: Capacitor
 hide_table_of_contents: true
 ---
 
@@ -21,33 +21,16 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
   `}</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.
+Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install of the core packages and add them to your project with ease. Capacitor offers a wide range of features and capabilities that developers can use to access features like the file system, native location services, or the device camera. All of this is powered by a unified TypeScript API that handled platform differences automatically. 
+
+While the core features of Capacitor are free and open source, some enterprises might find them selves needing more features or custom third-party integrations. If you find yourself needing these additional features, checkout [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
+
 
-:::
 
-<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/).
-:::
+> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) 
\ No newline at end of file
diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json
index 3a00763e1bb..b48b559f636 100644
--- a/versioned_sidebars/version-v6-sidebars.json
+++ b/versioned_sidebars/version-v6-sidebars.json
@@ -1332,16 +1332,11 @@
         },
         {
           "type": "doc",
-          "id": "version-v6/native-community"
+          "id": "version-v6/native-setup"
         },
         {
           "type": "doc",
           "id": "version-v6/native-faq"
-        },
-        {
-          "type": "link",
-          "label": "Community vs. Enterprise",
-          "href": "https://ionic.io/docs/premier-plugins"
         }
       ],
       "collapsible": true

From 07c1aaa4f78d53778f38a36ab95322d93eb614cc Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 30 Jan 2023 15:57:52 -0500
Subject: [PATCH 180/469] docs(many): restore slides and virtual scroll docs
 (#2737)

---
 versioned_docs/version-v6/angular/slides.md   |  10 +-
 .../version-v6/angular/virtual-scroll.md      |  10 +-
 versioned_docs/version-v6/api/slide.md        |  60 ++
 versioned_docs/version-v6/api/slides.md       | 745 ++++++++++++++++++
 .../version-v6/api/virtual-scroll.md          | 303 +++++++
 versioned_docs/version-v6/react/slides.md     |  10 +-
 .../version-v6/react/virtual-scroll.md        |  18 +-
 versioned_docs/version-v6/vue/slides.md       |  36 +-
 .../version-v6/vue/virtual-scroll.md          |   8 +-
 versioned_sidebars/version-v6-sidebars.json   |  20 +
 10 files changed, 1165 insertions(+), 55 deletions(-)
 create mode 100644 versioned_docs/version-v6/api/slide.md
 create mode 100644 versioned_docs/version-v6/api/slides.md
 create mode 100644 versioned_docs/version-v6/api/virtual-scroll.md

diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index 6f6d7554b31..b66ee3ce75e 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -10,13 +10,9 @@ title: Slides
   />
 </head>
 
-:::caution Looking for `ion-slides`?
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Angular directly.
 
-`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.
+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
 
@@ -438,4 +434,4 @@ Before opening an issue, please consider creating a post on the <a href="https:/
 
 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>
+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>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/angular/virtual-scroll.md b/versioned_docs/version-v6/angular/virtual-scroll.md
index 634821b18f6..3d0c0caebbb 100644
--- a/versioned_docs/version-v6/angular/virtual-scroll.md
+++ b/versioned_docs/version-v6/angular/virtual-scroll.md
@@ -1,12 +1,8 @@
 # Virtual Scroll
 
-:::caution Looking for `ion-virtual-scroll`?
+In the past, we have provided an `ion-virtual-scroll` component in Ionic Framework to help with list virtualization. At the time this was not available in Angular, but recently Angular has provided its own solution via the `@angular/cdk` package.
 
-`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
+## Setup
 
 To setup the CDK Scroller, first install `@angular/cdk`:
 
@@ -130,4 +126,4 @@ For example:
 
 ## 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).
+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).
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.md
new file mode 100644
index 00000000000..2a95e9eb3e8
--- /dev/null
+++ b/versioned_docs/version-v6/api/slide.md
@@ -0,0 +1,60 @@
+---
+title: "ion-slide"
+hide_table_of_contents: true
+---
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/slide/props.md';
+import Events from '@site/static/auto-generated/slide/events.md';
+import Methods from '@site/static/auto-generated/slide/methods.md';
+import Parts from '@site/static/auto-generated/slide/parts.md';
+import CustomProps from '@site/static/auto-generated/slide/custom-props.md';
+import Slots from '@site/static/auto-generated/slide/slots.md';
+
+<head>
+  <title>ion-slide | Slide API Component for Ionic Framework Apps</title>
+  <meta name="description" content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+:::note
+This component has been deprecated in favor of using Swiper.js directly. Please see the [Slides Documentation](./slides#migration) for a migration guide.
+:::
+
+
+The Slide component is a child component of [Slides](./slides). The template
+should be written as `ion-slide`. Any slide content should be written
+in this component and it should be used in conjunction with [Slides](./slides).
+
+See the [Slides API Docs](./slides) for more usage information.
+
+
+
+
+## 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/slides.md b/versioned_docs/version-v6/api/slides.md
new file mode 100644
index 00000000000..6cef08674c6
--- /dev/null
+++ b/versioned_docs/version-v6/api/slides.md
@@ -0,0 +1,745 @@
+---
+title: "ion-slides"
+hide_table_of_contents: true
+demoUrl: "/docs/demos/api/slides/index.html"
+demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/slides/props.md';
+import Events from '@site/static/auto-generated/slides/events.md';
+import Methods from '@site/static/auto-generated/slides/methods.md';
+import Parts from '@site/static/auto-generated/slides/parts.md';
+import CustomProps from '@site/static/auto-generated/slides/custom-props.md';
+import Slots from '@site/static/auto-generated/slides/slots.md';
+
+<head>
+  <title>Ion-Slides: Mobile Touch Slider with Built-In & Custom Animation</title>
+  <meta name="description" content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+:::note
+This component has been deprecated in favor of using Swiper.js directly. Please see the [migration guide](#migration) below.
+:::
+
+
+The Slides component is a multi-section container. Each section can be swiped
+or dragged between. It contains any number of [Slide](slide.md) components.
+
+This guide will cover migration from the deprecated `ion-slides` component to the framework-specific solutions that Swiper.js provides as well as the existing `ion-slides` API for developers who are still using that component.
+
+Adopted from Swiper.js:
+The most modern mobile touch slider and framework with hardware accelerated transitions.
+
+http://www.idangero.us/swiper/
+
+Copyright 2016, Vladimir Kharlampidi
+The iDangero.us
+http://www.idangero.us/
+
+Licensed under MIT
+
+## Migration
+
+With the release of Ionic Framework v6, the Ionic Team has deprecated the `ion-slides` and `ion-slide` components in favor of using the official framework integrations provided by Swiper. Fear not! You will still be able to use slides components in your application. Additionally, because you are still using Swiper, the functionality of your slides component should remain exactly the same.
+
+### What is Swiper.js?
+
+Swiper.js is the carousel/slider library that powers `ion-slides`. The library is bundled automatically with all versions of Ionic Framework. When Ionic Framework v4. was first released, Swiper did not have framework specific integrations of its library, so `ion-slides` was created as a way of bridging the gap between the core Swiper library and frameworks such as Angular, React, and Vue.
+
+Since then, the Swiper team has released framework specific integrations of Swiper.js for Angular, React, Vue, and more!
+
+### What are the benefits of this change?
+
+There are several benefits for members of the Ionic Framework community. By using the official Swiper.js framework integrations:
+
+- Developers can now be in control of the exact version of Swiper.js they want to use. Previously, developers would need to rely on the Ionic Team to update the version internally and release a new version of Ionic Framework.
+- The Ionic Team can spend more time triaging and fixing other non-slides issues, speeding up our development process so we can make the framework work better for our community.
+- Developers should experience fewer bugs.
+- Application bundle sizes can shrink in some cases. By installing Swiper.js as a 3rd party dependency in your application, bundlers such as Webpack or Rollup should be able to treeshake your code better.
+- Developers have access to new features that they previously did not have when using `ion-slides`.
+
+### How long do I have to migrate?
+
+We plan to remove `ion-slides` and `ion-slide` in Ionic Framework v7. `ion-slides` and `ion-slide` will continue to be available for the entire Ionic Framework v6 lifecycle but will only receive critical bug fixes.
+
+### How do I migrate?
+
+Since the underlying technology that powers your slides is the same, the migration process is easy! Follow the guides below for your specific framework.
+
+[Migration for Ionic Angular users](../angular/slides)
+
+[Migration for Ionic React users](../react/slides)
+
+[Migration for Ionic Vue users](../vue/slides)
+
+------
+
+The following documentation applies to the `ion-slides` component.
+
+## Custom Animations
+
+By default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.
+
+
+### Coverflow
+
+```typescript
+const slideOpts = {
+  slidesPerView: 3,
+  coverflowEffect: {
+    rotate: 50,
+    stretch: 0,
+    depth: 100,
+    modifier: 1,
+    slideShadows: true,
+  },
+  on: {
+    beforeInit() {
+      const swiper = this;
+
+      swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
+      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
+
+      swiper.params.watchSlidesProgress = true;
+      swiper.originalParams.watchSlidesProgress = true;
+    },
+    setTranslate() {
+      const swiper = this;
+      const {
+        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $
+      } = swiper;
+      const params = swiper.params.coverflowEffect;
+      const isHorizontal = swiper.isHorizontal();
+      const transform$$1 = swiper.translate;
+      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
+      const rotate = isHorizontal ? params.rotate : -params.rotate;
+      const translate = params.depth;
+      // Each slide offset from center
+      for (let i = 0, length = slides.length; i < length; i += 1) {
+        const $slideEl = slides.eq(i);
+        const slideSize = slidesSizesGrid[i];
+        const slideOffset = $slideEl[0].swiperSlideOffset;
+        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
+
+         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
+        let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
+        // var rotateZ = 0
+        let translateZ = -translate * Math.abs(offsetMultiplier);
+
+         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
+        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
+
+         // Fix for ultra small values
+        if (Math.abs(translateX) < 0.001) translateX = 0;
+        if (Math.abs(translateY) < 0.001) translateY = 0;
+        if (Math.abs(translateZ) < 0.001) translateZ = 0;
+        if (Math.abs(rotateY) < 0.001) rotateY = 0;
+        if (Math.abs(rotateX) < 0.001) rotateX = 0;
+
+         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+
+         $slideEl.transform(slideTransform);
+        $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
+        if (params.slideShadows) {
+          // Set shadows
+          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
+          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          if ($shadowBeforeEl.length === 0) {
+            $shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
+            $slideEl.append($shadowBeforeEl);
+          }
+          if ($shadowAfterEl.length === 0) {
+            $shadowAfterEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
+            $slideEl.append($shadowAfterEl);
+          }
+          if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
+          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
+        }
+      }
+
+       // Set correct perspective for IE10
+      if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
+        const ws = $wrapperEl[0].style;
+        ws.perspectiveOrigin = `${center}px 50%`;
+      }
+    },
+    setTransition(duration) {
+      const swiper = this;
+      swiper.slides
+        .transition(duration)
+        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .transition(duration);
+    }
+  }
+}
+```
+
+### Cube
+
+```typescript
+const slideOpts = {
+  grabCursor: true,
+  cubeEffect: {
+    shadow: true,
+    slideShadows: true,
+    shadowOffset: 20,
+    shadowScale: 0.94,
+  },
+  on: {
+    beforeInit: function() {
+      const swiper = this;
+      swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
+      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
+
+      const overwriteParams = {
+        slidesPerView: 1,
+        slidesPerColumn: 1,
+        slidesPerGroup: 1,
+        watchSlidesProgress: true,
+        resistanceRatio: 0,
+        spaceBetween: 0,
+        centeredSlides: false,
+        virtualTranslate: true,
+      };
+
+      this.params = Object.assign(this.params, overwriteParams);
+      this.originalParams = Object.assign(this.originalParams, overwriteParams);
+    },
+    setTranslate: function() {
+      const swiper = this;
+      const {
+        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,
+      } = swiper;
+      const params = swiper.params.cubeEffect;
+      const isHorizontal = swiper.isHorizontal();
+      const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
+      let wrapperRotate = 0;
+      let $cubeShadowEl;
+      if (params.shadow) {
+        if (isHorizontal) {
+          $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');
+          if ($cubeShadowEl.length === 0) {
+            $cubeShadowEl = swiper.$('<div class="swiper-cube-shadow"></div>');
+            $wrapperEl.append($cubeShadowEl);
+          }
+          $cubeShadowEl.css({ height: `${swiperWidth}px` });
+        } else {
+          $cubeShadowEl = $el.find('.swiper-cube-shadow');
+          if ($cubeShadowEl.length === 0) {
+            $cubeShadowEl = swiper.$('<div class="swiper-cube-shadow"></div>');
+            $el.append($cubeShadowEl);
+          }
+        }
+      }
+
+      for (let i = 0; i < slides.length; i += 1) {
+        const $slideEl = slides.eq(i);
+        let slideIndex = i;
+        if (isVirtual) {
+          slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);
+        }
+        let slideAngle = slideIndex * 90;
+        let round = Math.floor(slideAngle / 360);
+        if (rtl) {
+          slideAngle = -slideAngle;
+          round = Math.floor(-slideAngle / 360);
+        }
+        const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
+        let tx = 0;
+        let ty = 0;
+        let tz = 0;
+        if (slideIndex % 4 === 0) {
+          tx = -round * 4 * swiperSize;
+          tz = 0;
+        } else if ((slideIndex - 1) % 4 === 0) {
+          tx = 0;
+          tz = -round * 4 * swiperSize;
+        } else if ((slideIndex - 2) % 4 === 0) {
+          tx = swiperSize + (round * 4 * swiperSize);
+          tz = swiperSize;
+        } else if ((slideIndex - 3) % 4 === 0) {
+          tx = -swiperSize;
+          tz = (3 * swiperSize) + (swiperSize * 4 * round);
+        }
+        if (rtl) {
+          tx = -tx;
+        }
+
+         if (!isHorizontal) {
+          ty = tx;
+          tx = 0;
+        }
+
+         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
+        if (progress <= 1 && progress > -1) {
+          wrapperRotate = (slideIndex * 90) + (progress * 90);
+          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);
+        }
+        $slideEl.transform(transform$$1);
+        if (params.slideShadows) {
+          // Set shadows
+          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          if (shadowBefore.length === 0) {
+            shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
+            $slideEl.append(shadowBefore);
+          }
+          if (shadowAfter.length === 0) {
+            shadowAfter = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
+            $slideEl.append(shadowAfter);
+          }
+          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
+          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
+        }
+      }
+      $wrapperEl.css({
+        '-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,
+        '-moz-transform-origin': `50% 50% -${swiperSize / 2}px`,
+        '-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,
+        'transform-origin': `50% 50% -${swiperSize / 2}px`,
+      });
+
+       if (params.shadow) {
+        if (isHorizontal) {
+          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
+        } else {
+          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);
+          const multiplier = 1.5 - (
+            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)
+            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)
+          );
+          const scale1 = params.shadowScale;
+          const scale2 = params.shadowScale / multiplier;
+          const offset$$1 = params.shadowOffset;
+          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);
+        }
+      }
+
+      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;
+      $wrapperEl
+        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);
+    },
+    setTransition: function(duration) {
+      const swiper = this;
+      const { $el, slides } = swiper;
+      slides
+        .transition(duration)
+        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .transition(duration);
+      if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
+        $el.find('.swiper-cube-shadow').transition(duration);
+      }
+    },
+  }
+}
+```
+
+### Fade
+
+```typescript
+const slideOpts = {
+  on: {
+    beforeInit() {
+      const swiper = this;
+      swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);
+      const overwriteParams = {
+        slidesPerView: 1,
+        slidesPerColumn: 1,
+        slidesPerGroup: 1,
+        watchSlidesProgress: true,
+        spaceBetween: 0,
+        virtualTranslate: true,
+      };
+      swiper.params = Object.assign(swiper.params, overwriteParams);
+      swiper.params = Object.assign(swiper.originalParams, overwriteParams);
+    },
+    setTranslate() {
+      const swiper = this;
+      const { slides } = swiper;
+      for (let i = 0; i < slides.length; i += 1) {
+        const $slideEl = swiper.slides.eq(i);
+        const offset$$1 = $slideEl[0].swiperSlideOffset;
+        let tx = -offset$$1;
+        if (!swiper.params.virtualTranslate) tx -= swiper.translate;
+        let ty = 0;
+        if (!swiper.isHorizontal()) {
+          ty = tx;
+          tx = 0;
+        }
+        const slideOpacity = swiper.params.fadeEffect.crossFade
+          ? Math.max(1 - Math.abs($slideEl[0].progress), 0)
+          : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);
+        $slideEl
+          .css({
+            opacity: slideOpacity,
+          })
+          .transform(`translate3d(${tx}px, ${ty}px, 0px)`);
+      }
+    },
+    setTransition(duration) {
+      const swiper = this;
+      const { slides, $wrapperEl } = swiper;
+      slides.transition(duration);
+      if (swiper.params.virtualTranslate && duration !== 0) {
+        let eventTriggered = false;
+        slides.transitionEnd(() => {
+          if (eventTriggered) return;
+          if (!swiper || swiper.destroyed) return;
+          eventTriggered = true;
+          swiper.animating = false;
+          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
+          for (let i = 0; i < triggerEvents.length; i += 1) {
+            $wrapperEl.trigger(triggerEvents[i]);
+          }
+        });
+      }
+    },
+  }
+}
+```
+
+### Flip
+
+```typescript
+const slideOpts = {
+  on: {
+    beforeInit() {
+      const swiper = this;
+      swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);
+      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
+      const overwriteParams = {
+        slidesPerView: 1,
+        slidesPerColumn: 1,
+        slidesPerGroup: 1,
+        watchSlidesProgress: true,
+        spaceBetween: 0,
+        virtualTranslate: true,
+      };
+      swiper.params = Object.assign(swiper.params, overwriteParams);
+      swiper.originalParams = Object.assign(swiper.originalParams, overwriteParams);
+    },
+    setTranslate() {
+      const swiper = this;
+      const { $, slides, rtlTranslate: rtl } = swiper;
+      for (let i = 0; i < slides.length; i += 1) {
+        const $slideEl = slides.eq(i);
+        let progress = $slideEl[0].progress;
+        if (swiper.params.flipEffect.limitRotation) {
+          progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
+        }
+        const offset$$1 = $slideEl[0].swiperSlideOffset;
+        const rotate = -180 * progress;
+        let rotateY = rotate;
+        let rotateX = 0;
+        let tx = -offset$$1;
+        let ty = 0;
+        if (!swiper.isHorizontal()) {
+          ty = tx;
+          tx = 0;
+          rotateX = -rotateY;
+          rotateY = 0;
+        } else if (rtl) {
+          rotateY = -rotateY;
+        }
+
+         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
+
+         if (swiper.params.flipEffect.slideShadows) {
+          // Set shadows
+          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          if (shadowBefore.length === 0) {
+            shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`);
+            $slideEl.append(shadowBefore);
+          }
+          if (shadowAfter.length === 0) {
+            shadowAfter = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`);
+            $slideEl.append(shadowAfter);
+          }
+          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
+          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
+        }
+        $slideEl
+          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
+      }
+    },
+    setTransition(duration) {
+      const swiper = this;
+      const { slides, activeIndex, $wrapperEl } = swiper;
+      slides
+        .transition(duration)
+        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .transition(duration);
+      if (swiper.params.virtualTranslate && duration !== 0) {
+        let eventTriggered = false;
+        // eslint-disable-next-line
+        slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {
+          if (eventTriggered) return;
+          if (!swiper || swiper.destroyed) return;
+
+          eventTriggered = true;
+          swiper.animating = false;
+          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
+          for (let i = 0; i < triggerEvents.length; i += 1) {
+            $wrapperEl.trigger(triggerEvents[i]);
+          }
+        });
+      }
+    }
+  }
+};
+```
+
+
+
+## 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">
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'slides-example',
+  template: `
+    <ion-content>
+      <ion-slides pager="true" [options]="slideOpts">
+        <ion-slide>
+          <h1>Slide 1</h1>
+        </ion-slide>
+        <ion-slide>
+          <h1>Slide 2</h1>
+        </ion-slide>
+        <ion-slide>
+          <h1>Slide 3</h1>
+        </ion-slide>
+      </ion-slides>
+    </ion-content>
+  `
+})
+export class SlideExample {
+  // Optional parameters to pass to the swiper instance.
+  // See https://swiperjs.com/swiper-api for valid options.
+  slideOpts = {
+    initialSlide: 1,
+    speed: 400
+  };
+  constructor() {}
+}
+```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
+
+</TabItem>
+
+
+<TabItem value="javascript">
+
+```html
+<ion-content>
+  <ion-slides pager="true">
+    <ion-slide>
+      <h1>Slide 1</h1>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Slide 2</h1>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Slide 3</h1>
+    </ion-slide>
+  </ion-slides>
+</ion-content>
+```
+
+```javascript
+var slides = document.querySelector('ion-slides');
+
+// Optional parameters to pass to the swiper instance.
+// See https://swiperjs.com/swiper-api for valid options.
+slides.options = {
+  initialSlide: 1,
+  speed: 400
+}
+```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
+
+</TabItem>
+
+
+<TabItem value="react">
+
+```tsx
+import React from 'react';
+import { IonSlides, IonSlide, IonContent } from '@ionic/react';
+
+// Optional parameters to pass to the swiper instance.
+// See https://swiperjs.com/swiper-api for valid options.
+const slideOpts = {
+  initialSlide: 1,
+  speed: 400
+};
+
+export const SlidesExample: React.FC = () => (
+  <IonContent>
+    <IonSlides pager={true} options={slideOpts}>
+      <IonSlide>
+        <h1>Slide 1</h1>
+      </IonSlide>
+      <IonSlide>
+        <h1>Slide 2</h1>
+      </IonSlide>
+      <IonSlide>
+        <h1>Slide 3</h1>
+      </IonSlide>
+    </IonSlides>
+  </IonContent>
+);
+```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
+</TabItem>
+
+
+<TabItem value="stencil">
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'slides-example',
+  styleUrl: 'slides-example.css'
+})
+export class SlidesExample {
+  // Optional parameters to pass to the swiper instance.
+  // See https://swiperjs.com/swiper-api for valid options.
+  private slideOpts = {
+    initialSlide: 1,
+    speed: 400
+  };
+
+  render() {
+    return [
+      <ion-content>
+        <ion-slides pager={true} options={this.slideOpts}>
+          <ion-slide>
+            <h1>Slide 1</h1>
+          </ion-slide>
+
+          <ion-slide>
+            <h1>Slide 2</h1>
+          </ion-slide>
+
+          <ion-slide>
+            <h1>Slide 3</h1>
+          </ion-slide>
+        </ion-slides>
+      </ion-content>
+    ];
+  }
+}
+```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
+</TabItem>
+
+
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-slides pager="true" :options="slideOpts">
+    <ion-slide>
+      <h1>Slide 1</h1>
+    </ion-slide>
+    <ion-slide>
+      <h1>Slide 2</h1>
+    </ion-slide>
+    <ion-slide>
+      <h1>Slide 3</h1>
+    </ion-slide>
+  </ion-slides>
+</template>
+
+
+<script>
+import { IonSlides, IonSlide } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonSlides, IonSlide },
+  setup() {
+    // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
+    const slideOpts = {
+      initialSlide: 1,
+      speed: 400
+    };
+    return { slideOpts }
+  }
+});
+</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/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.md
new file mode 100644
index 00000000000..d3339f3aa6f
--- /dev/null
+++ b/versioned_docs/version-v6/api/virtual-scroll.md
@@ -0,0 +1,303 @@
+---
+title: "ion-virtual-scroll"
+hide_table_of_contents: true
+---
+import TOCInline from '@theme/TOCInline';
+
+import Props from '@site/static/auto-generated/virtual-scroll/props.md';
+import Events from '@site/static/auto-generated/virtual-scroll/events.md';
+import Methods from '@site/static/auto-generated/virtual-scroll/methods.md';
+import Parts from '@site/static/auto-generated/virtual-scroll/parts.md';
+import CustomProps from '@site/static/auto-generated/virtual-scroll/custom-props.md';
+import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
+
+<head>
+  <title>ion-virtual-scroll | Angular Virtual Scroll List for Ionic Apps</title>
+  <meta name="description" content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates." />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+<h2 className="table-of-contents__title">Contents</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+:::note
+This component has been deprecated in favor of using virtual scrolling libraries provided by each JavaScript Framework. See below for alternatives.
+:::
+
+
+Virtual Scroll displays a virtual, "infinite" list. An array of records
+is passed to the virtual scroll containing the data to create templates
+for. The template created for each record, referred to as a cell, can
+consist of items, headers, and footers. For performance reasons, not every record
+in the list is rendered at once; instead a small subset of records (enough to fill the viewport)
+are rendered and reused as the user scrolls.
+
+This guide will go over the recommended virtual scrolling packages for each framework integration as well as documentation for the deprecated `ion-virtual-scroll` component for Ionic Angular. We recommend using the framework-specific solutions listed below, but the `ion-virtual-scroll` documentation is available below for developers who are still using that component.
+
+## Angular
+
+For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll.md).
+
+## React
+
+For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll.md).
+
+## Vue
+
+For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.md).
+
+------
+
+The following documentation applies to the `ion-virtual-scroll` component.
+
+## Approximate Widths and Heights
+
+If the height of items in the virtual scroll are not close to the
+default size of `40px`, it is extremely important to provide a value for
+the `approxItemHeight` property. An exact pixel-perfect size is not necessary,
+but without an estimate the virtual scroll will not render correctly.
+
+The approximate width and height of each template is used to help
+determine how many cells should be created, and to help calculate
+the height of the scrollable area. Note that the actual rendered size
+of each cell comes from the app's CSS, whereas this approximation
+is only used to help calculate initial dimensions.
+
+It's also important to know that Ionic's default item sizes have
+slightly different heights between platforms, which is perfectly fine.
+
+## Images Within Virtual Scroll
+
+HTTP requests, image decoding, and image rendering can cause jank while
+scrolling. In order to better control images, Ionic provides `<ion-img>`
+to manage HTTP requests and image rendering. While scrolling through items
+quickly, `<ion-img>` knows when and when not to make requests, when and
+when not to render images, and only loads the images that are viewable
+after scrolling. [Read more about `ion-img`.](img.md)
+
+It's also important for app developers to ensure image sizes are locked in,
+and after images have fully loaded they do not change size and affect any
+other element sizes. Simply put, to ensure rendering bugs are not introduced,
+it's vital that elements within a virtual item does not dynamically change.
+
+For virtual scrolling, the natural effects of the `<img>` are not desirable
+features. We recommend using the `<ion-img>` component over the native
+`<img>` element because when an `<img>` element is added to the DOM, it
+immediately makes a HTTP request for the image file. Additionally, `<img>`
+renders whenever it wants which could be while the user is scrolling. However,
+`<ion-img>` is governed by the containing `ion-content` and does not render
+images while scrolling quickly.
+
+
+## Virtual Scroll Performance Tips
+
+### iOS Cordova WKWebView
+
+When deploying to iOS with Cordova, it's highly recommended to use the
+[WKWebView plugin](https://blog.ionicframework.com/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/)
+in order to take advantage of iOS's higher performing webview. Additionally,
+WKWebView is superior at scrolling efficiently in comparison to the older
+UIWebView.
+
+### Lock in element dimensions and locations
+
+In order for virtual scroll to efficiently size and locate every item, it's
+very important every element within each virtual item does not dynamically
+change its dimensions or location. The best way to ensure size and location
+does not change, it's recommended each virtual item has locked in its size
+via CSS.
+
+### Use `ion-img` for images
+
+When including images within Virtual Scroll, be sure to use
+[`ion-img`](img.md) rather than the standard `<img>` HTML element.
+With `ion-img`, images are lazy loaded so only the viewable ones are
+rendered, and HTTP requests are efficiently controlled while scrolling.
+
+### Set Approximate Widths and Heights
+
+As mentioned above, all elements should lock in their dimensions. However,
+virtual scroll isn't aware of the dimensions until after they have been
+rendered. For the initial render, virtual scroll still needs to set
+how many items should be built. With "approx" property inputs, such as
+`approxItemHeight`, we're able to give virtual scroll an approximate size,
+therefore allowing virtual scroll to decide how many items should be
+created.
+
+### Changing dataset should use `trackBy`
+
+It is possible for the identities of elements in the iterator to change
+while the data does not. This can happen, for example, if the iterator
+produced from an RPC to the server, and that RPC is re-run. Even if the
+"data" hasn't changed, the second response will produce objects with
+different identities, and Ionic will tear down the entire DOM and rebuild
+it. This is an expensive operation and should be avoided if possible.
+
+### Efficient headers and footer functions
+Each virtual item must stay extremely efficient, but one way to really
+kill its performance is to perform any DOM operations within section header
+and footer functions. These functions are called for every record in the
+dataset, so please make sure they're performant.
+
+
+
+## Usage
+
+```html
+<ion-content>
+  <ion-virtual-scroll [items]="items" approxItemHeight="320px">
+    <ion-card *virtualItem="let item; let itemBounds = bounds;">
+      <div>
+        <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
+      </div>
+    <ion-card-header>
+      <ion-card-title>{{ item.name }}</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>{{ item.content }}</ion-card-content>
+    </ion-card>
+  </ion-virtual-scroll>
+</ion-content>
+```
+
+```typescript
+export class VirtualScrollPageComponent {
+  items: any[] = [];
+
+  constructor() {
+    for (let i = 0; i < 1000; i++) {
+      this.items.push({
+        name: i + ' - ' + images[rotateImg],
+        imgSrc: getImgSrc(),
+        avatarSrc: getImgSrc(),
+        imgHeight: Math.floor(Math.random() * 50 + 150),
+        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
+      });
+
+      rotateImg++;
+      if (rotateImg === images.length) {
+        rotateImg = 0;
+      }
+    }
+  }
+}
+
+const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const images = [
+  'bandit',
+  'batmobile',
+  'blues-brothers',
+  'bueller',
+  'delorean',
+  'eleanor',
+  'general-lee',
+  'ghostbusters',
+  'knight-rider',
+  'mirth-mobile'
+];
+
+function getImgSrc() {
+  const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
+  rotateImg++;
+  if (rotateImg === images.length) {
+    rotateImg = 0;
+  }
+  return src;
+}
+
+let rotateImg = 0;
+```
+
+### Basic
+
+The array of records should be passed to the `items` property on the `ion-virtual-scroll` element.
+The data given to the `items` property must be an array. An item template with the `*virtualItem` property is required in the `ion-virtual-scroll`. The `*virtualItem` property can be added to any element.
+
+```html
+<ion-virtual-scroll [items]="items">
+  <ion-item *virtualItem="let item">
+    {{ item }}
+  </ion-item>
+</ion-virtual-scroll>
+```
+
+### Section Headers and Footers
+
+Section headers and footers are optional. They can be dynamically created
+from developer-defined functions. For example, a large list of contacts
+usually has a divider for each letter in the alphabet. Developers provide
+their own custom function to be called on each record. The logic in the
+custom function should determine whether to create the section template
+and what data to provide to the template. The custom function should
+return `null` if a template shouldn't be created.
+
+```html
+<ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn">
+  <ion-item-divider *virtualHeader="let header">
+    {{ header }}
+  </ion-item-divider>
+  <ion-item *virtualItem="let item">
+    Item: {{ item }}
+  </ion-item>
+</ion-virtual-scroll>
+```
+
+Below is an example of a custom function called on every record. It
+gets passed the individual record, the record's index number,
+and the entire array of records. In this example, after every 20
+records a header will be inserted. So between the 19th and 20th records,
+between the 39th and 40th, and so on, a `<ion-item-divider>` will
+be created and the template's data will come from the function's
+returned data.
+
+```ts
+myHeaderFn(record, recordIndex, records) {
+  if (recordIndex % 20 === 0) {
+    return 'Header ' + recordIndex;
+  }
+  return null;
+}
+```
+
+
+### Custom Components
+
+If a custom component is going to be used within Virtual Scroll, it's best
+to wrap it with a `<div>` to ensure the component is rendered correctly. Since
+each custom component's implementation and internals can be quite different, wrapping
+within a `<div>` is a safe way to make sure dimensions are measured correctly.
+
+```html
+<ion-virtual-scroll [items]="items">
+  <div *virtualItem="let item">
+    <my-custom-item [item]="item">
+      {{ item }}
+    </my-custom-item>
+  </div>
+</ion-virtual-scroll>
+```
+
+## 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/react/slides.md b/versioned_docs/version-v6/react/slides.md
index a04d37459c8..e44dcb8508a 100644
--- a/versioned_docs/version-v6/react/slides.md
+++ b/versioned_docs/version-v6/react/slides.md
@@ -10,13 +10,9 @@ title: Slides
   />
 </head>
 
-:::caution Looking for `IonSlides`?
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `IonSlides` component, but we now recommend that developers use Swiper for React directly.
 
-`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.
+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
 
@@ -580,4 +576,4 @@ Before opening an issue, please consider creating a post on the <a href="https:/
 
 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>
+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>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/react/virtual-scroll.md b/versioned_docs/version-v6/react/virtual-scroll.md
index b77bf341b69..a1051a42b6c 100644
--- a/versioned_docs/version-v6/react/virtual-scroll.md
+++ b/versioned_docs/version-v6/react/virtual-scroll.md
@@ -1,11 +1,5 @@
 # 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
@@ -57,6 +51,12 @@ From there, we can use the `itemContent` property to pass a function that will b
 
 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`.
 
+## A Note on Ionic Components
+
+Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling.
+
+We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437.
+
 ## 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.
@@ -66,11 +66,13 @@ For example:
 ```tsx
 <IonPage>
   <IonContent scrollY={false}>
-    <Virtuoso className="ion-content-scroll-host">{/* Your existing content and configurations */}</Virtuoso>
+    <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/).
+This guide only covers a small portion of what `Virtuoso` is capable of. For more details, please see the [Virtuoso documentation](https://virtuoso.dev/).
\ No newline at end of file
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index be20f812b09..1f6491741b3 100644
--- a/versioned_docs/version-v6/vue/slides.md
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -10,13 +10,9 @@ title: Slides
   />
 </head>
 
-:::caution Looking for `ion-slides`?
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Vue directly.
 
-`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.
+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
 
@@ -96,7 +92,7 @@ These components are imported from `swiper/vue` and provided to your Vue compone
     <ion-content>
       <swiper>
         <swiper-slide>Slide 1</swiper-slide>
-        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
         <swiper-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -136,7 +132,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
     <ion-content>
       <swiper>
         <swiper-slide>Slide 1</swiper-slide>
-        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
         <swiper-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -170,7 +166,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
     <ion-content>
       <swiper :modules="modules">
         <swiper-slide>Slide 1</swiper-slide>
-        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
         <swiper-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -209,7 +205,7 @@ Finally, we can turn these features on by using the appropriate properties:
     <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-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -256,7 +252,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
     <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-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -301,7 +297,7 @@ Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` opti
 <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-slide>Slide 3</ion-slide>
   </ion-slides>
 </template>
@@ -313,7 +309,7 @@ To migrate, we would move these options out of the `options` object and onto the
 <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-slide>Slide 3</swiper-slide>
   </swiper>
 </template>
@@ -342,7 +338,7 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 <template>
   <ion-slides @ionSlideDidChange="onSlideChange">
     <ion-slide>Slide 1</ion-slide>
-    <ion-slide>Slide 2</ion-slide>
+    <ion-slide>Slide 3</ion-slide>
     <ion-slide>Slide 3</ion-slide>
   </ion-slides>
 </template>
@@ -354,7 +350,7 @@ To migrate, we would change the name of the event to `slideChange`:
 <template>
   <swiper @slideChange="onSlideChange">
     <swiper-slide>Slide 1</swiper-slide>
-    <swiper-slide>Slide 2</swiper-slide>
+    <swiper-slide>Slide 3</swiper-slide>
     <swiper-slide>Slide 3</swiper-slide>
   </swiper>
 </template>
@@ -423,7 +419,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu
 | 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.                                          |
+| 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.                                                 |
@@ -439,7 +435,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
     <ion-content>
       <swiper :modules="modules">
         <swiper-slide>Slide 1</swiper-slide>
-        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
         <swiper-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -473,7 +469,7 @@ Next, we need to import the stylesheet associated with the effect:
     <ion-content>
       <swiper :modules="modules">
         <swiper-slide>Slide 1</swiper-slide>
-        <swiper-slide>Slide 2</swiper-slide>
+        <swiper-slide>Slide 3</swiper-slide>
         <swiper-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -508,7 +504,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
     <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-slide>Slide 3</swiper-slide>
       </swiper>
     </ion-content>
@@ -559,4 +555,4 @@ Before opening an issue, please consider creating a post on the <a href="https:/
 
 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>
+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>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/vue/virtual-scroll.md b/versioned_docs/version-v6/vue/virtual-scroll.md
index 24c90d7503b..78d56fc9313 100644
--- a/versioned_docs/version-v6/vue/virtual-scroll.md
+++ b/versioned_docs/version-v6/vue/virtual-scroll.md
@@ -1,10 +1,6 @@
 # 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.
-
-:::
+One virtual scrolling solution to consider for your Ionic Vue app is [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller/blob/next/packages/vue-virtual-scroller/README.md). This guide will go over how to install `vue-virtual-scroller` into your Ionic Vue application and use it with other Ionic components.
 
 ## Installation
 
@@ -140,4 +136,4 @@ For example:
 
 ## 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).
+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).
\ No newline at end of file
diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json
index b48b559f636..27bb0c446d3 100644
--- a/versioned_sidebars/version-v6-sidebars.json
+++ b/versioned_sidebars/version-v6-sidebars.json
@@ -920,6 +920,10 @@
         {
           "type": "doc",
           "id": "version-v6/api/list-header"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/virtual-scroll"
         }
       ],
       "collapsible": true
@@ -1172,6 +1176,22 @@
       ],
       "collapsible": true
     },
+    {
+      "type": "category",
+      "label": "Slides",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "doc",
+          "id": "version-v6/api/slides"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/slide"
+        }
+      ],
+      "collapsible": true
+    },
     {
       "type": "category",
       "label": "Tabs",

From 2749262a61540020ab577e98de66bfe7232c4223 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 08:32:34 -0500
Subject: [PATCH 181/469] docs(browser-support): update browser support for v6
 (#2739)

Some changes were lost during the Docusaurus versioning for v7. This PR restores the changes made to browser-support for v6.
---
 .../version-v6/reference/browser-support.md   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/versioned_docs/version-v6/reference/browser-support.md b/versioned_docs/version-v6/reference/browser-support.md
index edb53a6e1d7..6ec8794cdf1 100644
--- a/versioned_docs/version-v6/reference/browser-support.md
+++ b/versioned_docs/version-v6/reference/browser-support.md
@@ -10,7 +10,7 @@ title: 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.
+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
 
@@ -18,7 +18,6 @@ In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styli
 
 | 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+ |
@@ -29,21 +28,27 @@ Check the [latest Android stats](https://developer.android.com/about/dashboards/
 
 ### 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.
+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 whose manufacturer has locked the webview version and does not allow the webview to update. These webviews are typically stuck at the version that was available when the device initially shipped.
+
+As a result, Ionic Framework v6 only supports Android devices and emulators running Android 5.0+ with a webview of Chromium 60 or newer. For context, this is the version that Stencil can support with no polyfills: https://stenciljs.com/docs/browser-support
 
 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.
 
+### A Note on Angular 13+ Support
+
+Angular's support policy for iOS is the two most recent major versions. At the time of release that is iOS 14 and 15. 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.
+
 ## 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**    |
+|   Browser   | Ionic v6 | Ionic v5 | Ionic v4 |
+| :---------: | :------: | :------: | :------: |
+| **Chrome**  |   60+    |    ✔     |    ✔     |
+| **Safari**  |   13+    |    ✔     |    ✔     |
+|  **Edge**   |   79+    |   79+    |    ✔     |
+| **Firefox** |   63+    |    ✔     |    ✔     |
+|  **IE 11**  |  **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.

From fa480c71625fa0a8d5c166b9cc05c719dc5c3def Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 08:32:45 -0500
Subject: [PATCH 182/469] docs(support): update support policy for v6 (#2740)

Some changes were lost during the Docusaurus versioning for v7. This PR restores the changes made to the support policy page for v6.
---
 .../version-v6/reference/support.md           | 40 +++++++------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.md
index 32bd859a1c8..98f9fa64046 100644
--- a/versioned_docs/version-v6/reference/support.md
+++ b/versioned_docs/version-v6/reference/support.md
@@ -22,13 +22,12 @@ 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      |
+|   V6    |      **Active**       | 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).
@@ -43,36 +42,27 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | 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      |
+|    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+       |
+|    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+       |
+|    v6     |       v3.0.6+        |    3.9+    |
+|    v5     |        v3.0+         |    3.9+    |
 
 ### Native Bridges
 

From a889e729a85771490f60d3b2b0786dcaa1cadecc Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 09:21:55 -0500
Subject: [PATCH 183/469] docs(toggle): migration guide references toggles
 (#2741)

---
 static/usage/v7/toggle/migration/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/static/usage/v7/toggle/migration/index.md b/static/usage/v7/toggle/migration/index.md
index 7224dd63088..a1f855766b8 100644
--- a/static/usage/v7/toggle/migration/index.md
+++ b/static/usage/v7/toggle/migration/index.md
@@ -46,7 +46,7 @@ import TabItem from '@theme/TabItem';
 <!-- Before -->
 <ion-item>
   <ion-label slot="end">Notifications</ion-label>
-  <ion-input></ion-input>
+  <ion-toggle></ion-toggle>
 </ion-item>
 
 <!-- After -->
@@ -89,7 +89,7 @@ import TabItem from '@theme/TabItem';
 <!-- Before -->
 <ion-item>
   <ion-label slot="end">Notifications</ion-label>
-  <ion-input></ion-input>
+  <ion-toggle></ion-toggle>
 </ion-item>
 
 <!-- After -->
@@ -132,7 +132,7 @@ import TabItem from '@theme/TabItem';
 {/* Before */}
 <IonItem>
   <IonLabel slot="end">Notifications</IonLabel>
-  <ion-input></ion-input>
+  <IonToggle></IonToggle>
 </IonItem>
 
 {/* After */}
@@ -175,7 +175,7 @@ import TabItem from '@theme/TabItem';
 <!-- Before -->
 <ion-item>
   <ion-label slot="end">Notifications</ion-label>
-  <ion-input></ion-input>
+  <ion-toggle></ion-toggle>
 </ion-item>
 
 <!-- After -->
@@ -185,4 +185,4 @@ import TabItem from '@theme/TabItem';
 ```
 </TabItem>
 </Tabs>
-````
\ No newline at end of file
+````

From 90f23cfaf6a0f6ba295e195bde33e07ec209b28f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 11:07:12 -0500
Subject: [PATCH 184/469] docs(slides): clarify optional imports (#2743)

---
 docs/angular/slides.md                      | 6 +++++-
 docs/react/slides.md                        | 6 +++++-
 docs/vue/slides.md                          | 6 +++++-
 versioned_docs/version-v6/angular/slides.md | 6 +++++-
 versioned_docs/version-v6/react/slides.md   | 6 +++++-
 versioned_docs/version-v6/vue/slides.md     | 6 +++++-
 6 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index 6f6d7554b31..3fdc0dd24b7 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -79,6 +79,10 @@ export class HomePage {
 @import '~@ionic/angular/css/ionic-swiper';
 ```
 
+:::note
+Importing `@ionic/angular/css/ionic-swiper'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
 ### 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:
@@ -170,7 +174,7 @@ See <a href="https://swiperjs.com/angular#usage" target="_blank" rel="noopener n
 
 ## 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.
+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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 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`:
 
diff --git a/docs/react/slides.md b/docs/react/slides.md
index a04d37459c8..8905ad74ead 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -58,6 +58,10 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
+:::note
+Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
 :::note
 
 Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
@@ -270,7 +274,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
 
 ## 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.
+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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
 
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index be20f812b09..8c6b664532c 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -57,6 +57,10 @@ We recommend importing the styles in the component in which Swiper is being used
 </script>
 ```
 
+:::note
+Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
 ### 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:
@@ -246,7 +250,7 @@ See <a href="https://swiperjs.com/vue#usage" target="_blank" rel="noopener noref
 
 ## 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.
+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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 We can install the `IonicSlides` module by importing it from `@ionic/vue` and passing it in as the last item in the `modules` array:
 
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index b66ee3ce75e..b962766059a 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -75,6 +75,10 @@ export class HomePage {
 @import '~@ionic/angular/css/ionic-swiper';
 ```
 
+:::note
+Importing `@ionic/angular/css/ionic-swiper'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
 ### 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:
@@ -166,7 +170,7 @@ See <a href="https://swiperjs.com/angular#usage" target="_blank" rel="noopener n
 
 ## 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.
+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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 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`:
 
diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md
index e44dcb8508a..c6569c907ec 100644
--- a/versioned_docs/version-v6/react/slides.md
+++ b/versioned_docs/version-v6/react/slides.md
@@ -54,6 +54,10 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
+:::note
+Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
 :::note
 
 Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
@@ -266,7 +270,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
 
 ## 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.
+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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
 
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index 1f6491741b3..697a33ca92a 100644
--- a/versioned_docs/version-v6/vue/slides.md
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -53,6 +53,10 @@ We recommend importing the styles in the component in which Swiper is being used
 </script>
 ```
 
+:::note
+Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
 ### 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:
@@ -242,7 +246,7 @@ See <a href="https://swiperjs.com/vue#usage" target="_blank" rel="noopener noref
 
 ## 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.
+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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 We can install the `IonicSlides` module by importing it from `@ionic/vue` and passing it in as the last item in the `modules` array:
 

From 9c634c5400326002685d2b1b7c4d94d1f146ce13 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:42:18 -0500
Subject: [PATCH 185/469] chore(deps): update playgrounds to pull from next tag
 (#2728)

---
 .../code/stackblitz/v7/angular/package.json   |    4 +-
 static/code/stackblitz/v7/html/package.json   |    2 +-
 .../stackblitz/v7/react/package-lock.json     | 5761 +++++++++--------
 static/code/stackblitz/v7/react/package.json  |    2 +-
 .../code/stackblitz/v7/vue/package-lock.json  |  799 +--
 static/code/stackblitz/v7/vue/package.json    |    4 +-
 static/usage/v7/input/basic/demo.html         |    4 +-
 static/usage/v7/input/clear/demo.html         |    4 +-
 static/usage/v7/input/counter/demo.html       |    4 +-
 static/usage/v7/input/fill/demo.html          |    4 +-
 static/usage/v7/input/helper-error/demo.html  |    4 +-
 static/usage/v7/input/labels/demo.html        |    4 +-
 .../usage/v7/input/theming/colors/demo.html   |    4 +-
 .../v7/input/theming/css-properties/demo.html |    4 +-
 static/usage/v7/input/types/demo.html         |    4 +-
 .../select/basic/multiple-selection/demo.html |    4 +-
 .../basic/responding-to-interaction/demo.html |    4 +-
 .../select/basic/single-selection/demo.html   |    4 +-
 .../customization/button-text/demo.html       |    4 +-
 .../customization/interface-options/demo.html |    4 +-
 .../customization/styling-select/demo.html    |    4 +-
 .../select/interfaces/action-sheet/demo.html  |    4 +-
 .../v7/select/interfaces/popover/demo.html    |    4 +-
 static/usage/v7/select/justify/demo.html      |    4 +-
 static/usage/v7/select/labels/demo.html       |    4 +-
 .../multiple-selection/demo.html              |    4 +-
 .../using-comparewith/demo.html               |    4 +-
 static/usage/v7/toast/buttons/demo.html       |    4 +-
 static/usage/v7/toast/icon/demo.html          |    4 +-
 static/usage/v7/toast/inline/basic/demo.html  |    4 +-
 .../usage/v7/toast/inline/is-open/demo.html   |    4 +-
 static/usage/v7/toast/theming/demo.html       |    4 +-
 static/usage/v7/toggle/basic/demo.html        |    4 +-
 static/usage/v7/toggle/justify/demo.html      |    4 +-
 .../usage/v7/toggle/label-placement/demo.html |    4 +-
 static/usage/v7/toggle/list/demo.html         |    4 +-
 static/usage/v7/toggle/on-off/demo.html       |    4 +-
 .../usage/v7/toggle/theming/colors/demo.html  |    4 +-
 .../toggle/theming/css-properties/demo.html   |    4 +-
 .../toggle/theming/css-shadow-parts/demo.html |    4 +-
 40 files changed, 3638 insertions(+), 3070 deletions(-)

diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index 5bc244a7abd..a36950cee72 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/angular": "6.4.2-dev.11673981545.1e612253",
-    "@ionic/core": "6.4.2-dev.11673981545.1e612253"
+    "@ionic/angular": "^7.0.0-beta.0",
+    "@ionic/core": "^7.0.0-beta.0"
   }
 }
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
index 56ad51525c0..28444a19687 100644
--- a/static/code/stackblitz/v7/html/package.json
+++ b/static/code/stackblitz/v7/html/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "6.4.2-dev.11673981545.1e612253"
+    "@ionic/core": "^7.0.0-beta.0"
   }
 }
diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index 5dde9f664f2..aa4925c0113 100644
--- a/static/code/stackblitz/v7/react/package-lock.json
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -8,7 +8,7 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^6.3.2",
+        "@ionic/react": "^7.0.0-beta.0",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -59,32 +59,32 @@
       }
     },
     "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==",
+      "version": "7.20.14",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.14.tgz",
+      "integrity": "sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==",
       "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==",
+      "version": "7.20.12",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz",
+      "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==",
       "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",
+        "@babel/generator": "^7.20.7",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helpers": "^7.20.7",
+        "@babel/parser": "^7.20.7",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.12",
+        "@babel/types": "^7.20.7",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.1",
+        "json5": "^2.2.2",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -104,11 +104,11 @@
       }
     },
     "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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
+      "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
       "dependencies": {
-        "eslint-scope": "^5.1.1",
+        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "eslint-visitor-keys": "^2.1.0",
         "semver": "^6.3.0"
       },
@@ -120,18 +120,6 @@
         "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",
@@ -140,14 +128,6 @@
         "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",
@@ -157,11 +137,11 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.9.tgz",
-      "integrity": "sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==",
+      "version": "7.20.14",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.14.tgz",
+      "integrity": "sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==",
       "dependencies": {
-        "@babel/types": "^7.18.9",
+        "@babel/types": "^7.20.7",
         "@jridgewell/gen-mapping": "^0.3.2",
         "jsesc": "^2.5.1"
       },
@@ -206,13 +186,14 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
+      "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
       "dependencies": {
-        "@babel/compat-data": "^7.18.8",
+        "@babel/compat-data": "^7.20.5",
         "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.20.2",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -231,16 +212,17 @@
       }
     },
     "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==",
+      "version": "7.20.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.12.tgz",
+      "integrity": "sha512-9OunRkbT0JQcednL0UFvbfXpAsUXiGjUk0a7sN8fUXX7Mue79cUSMjHGDRRi/Vz9vYlpIhLV5fMD5dKoMhhsNQ==",
       "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-function-name": "^7.19.0",
+        "@babel/helper-member-expression-to-functions": "^7.20.7",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
         "@babel/helper-split-export-declaration": "^7.18.6"
       },
       "engines": {
@@ -251,12 +233,12 @@
       }
     },
     "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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.20.5.tgz",
+      "integrity": "sha512-m68B1lkg3XDGX5yCvGO0kPx3v9WIYLnzjKfPcQiwntEQa5ZeRkPmo2X/ISJc8qxWGfwUr+kvZAeEzAwLec2r2w==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
-        "regexpu-core": "^5.1.0"
+        "regexpu-core": "^5.2.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -266,9 +248,9 @@
       }
     },
     "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
+      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.17.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -309,12 +291,12 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
       "dependencies": {
-        "@babel/template": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/types": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -332,11 +314,11 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.20.7.tgz",
+      "integrity": "sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==",
       "dependencies": {
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -354,18 +336,18 @@
       }
     },
     "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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz",
+      "integrity": "sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==",
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-simple-access": "^7.20.2",
         "@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-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.10",
+        "@babel/types": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -383,9 +365,9 @@
       }
     },
     "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==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
+      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -408,37 +390,38 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
+      "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.20.7",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.7",
+        "@babel/types": "^7.20.7"
       },
       "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==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
+      "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.20.2"
       },
       "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
       "dependencies": {
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -455,10 +438,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -472,27 +463,27 @@
       }
     },
     "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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
+      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
       "dependencies": {
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.5",
+        "@babel/types": "^7.20.5"
       },
       "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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.13.tgz",
+      "integrity": "sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==",
       "dependencies": {
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.13",
+        "@babel/types": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -512,9 +503,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.13.tgz",
+      "integrity": "sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -537,13 +528,13 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
+      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
       "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"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -553,13 +544,13 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
+      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
       "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/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       },
       "engines": {
@@ -585,12 +576,12 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.20.7.tgz",
+      "integrity": "sha512-AveGOoi9DAjUYYuUAG//Ig69GlazLnoyzMw68VCDux+c1tsnnH/OkYcpz/5xzMkEFC6UxjR5Gw1c+iY2wOGVeQ==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.20.7",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       },
       "engines": {
@@ -601,15 +592,15 @@
       }
     },
     "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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.20.13.tgz",
+      "integrity": "sha512-7T6BKHa9Cpd7lCueHBBzP0nkXNina+h5giOZw+a8ZpMfPFY19VjJAjIxyFHuWkhCWgL6QMqRiY/wB1fLXzm6Mw==",
       "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-create-class-features-plugin": "^7.20.12",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/plugin-syntax-decorators": "^7.18.6"
+        "@babel/plugin-syntax-decorators": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -664,11 +655,11 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
+      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       },
       "engines": {
@@ -709,15 +700,15 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+      "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
       "dependencies": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.18.8"
+        "@babel/plugin-transform-parameters": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -742,12 +733,12 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.20.7.tgz",
+      "integrity": "sha512-T+A7b1kfjtRM51ssoOfS1+wbyCVqorfyZhT99TvxxLMirPShD8CzKMRepMlCBGM5RpHMbn8s+5MMHnPstJH6mQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       },
       "engines": {
@@ -773,13 +764,13 @@
       }
     },
     "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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.20.5.tgz",
+      "integrity": "sha512-Vq7b9dUA12ByzB4EjQTPo25sFhY+08pQDBSZRtUAkj7lb7jahaHR5igera16QZ+3my1nYR4dKsNdYj5IjPHilQ==",
       "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/helper-create-class-features-plugin": "^7.20.5",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       },
       "engines": {
@@ -852,11 +843,11 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.19.0.tgz",
+      "integrity": "sha512-xaBZUEDntt4faL1yN8oIFlhfXeQAWJW7CLKYsHTUqriCUbj8xOra8bfxxKGi/UwExPFBuPdH4XfHc9rGQhrVkQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -902,11 +893,11 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1046,11 +1037,11 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
+      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1060,11 +1051,11 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
+      "integrity": "sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1074,13 +1065,13 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-remap-async-to-generator": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1104,11 +1095,11 @@
       }
     },
     "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==",
+      "version": "7.20.14",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.14.tgz",
+      "integrity": "sha512-sMPepQtsOs5fM1bwNvuJJHvaCfOEQfmc01FGw0ELlTpTJj5Ql/zuNRRldYhAPys4ghXdBIQJbRVYi44/7QflQQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1118,16 +1109,17 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.7.tgz",
+      "integrity": "sha512-LWYbsiXTPKl+oBlXUGlwNlJZetXD5Am+CyBdqhPsDVjM9Jc8jwBJFrKhHf900Kfk2eZG1y9MAG3UNajol7A4VQ==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.20.7",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
         "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
       },
@@ -1139,11 +1131,12 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz",
+      "integrity": "sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/template": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1153,11 +1146,11 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz",
+      "integrity": "sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1211,11 +1204,11 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.19.0.tgz",
+      "integrity": "sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-flow": "^7.18.6"
       },
       "engines": {
@@ -1284,13 +1277,12 @@
       }
     },
     "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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1300,14 +1292,13 @@
       }
     },
     "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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.20.11.tgz",
+      "integrity": "sha512-S8e1f7WQ7cimJQ51JkAaDrEtohVEitXjgCGAS2N8S31Y42E+kWwfSz83LYz57QdBm7q9diARVqanIaH2oVgQnw==",
       "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"
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-simple-access": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1317,15 +1308,14 @@
       }
     },
     "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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
+      "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
       "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"
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-identifier": "^7.19.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1350,12 +1340,12 @@
       }
     },
     "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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
+      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1394,11 +1384,11 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz",
+      "integrity": "sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1422,11 +1412,11 @@
       }
     },
     "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==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz",
+      "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1450,15 +1440,15 @@
       }
     },
     "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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.20.13.tgz",
+      "integrity": "sha512-MmTZx/bkUrfJhhYAYt3Urjm+h8DQGrPrnKQ94jLo7NLuOU+T89a7IByhKmrb8SKhrIYIQ0FN0CHMbnFRen4qNw==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1497,12 +1487,12 @@
       }
     },
     "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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz",
+      "integrity": "sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "regenerator-transform": "^0.15.0"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "regenerator-transform": "^0.15.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1526,15 +1516,15 @@
       }
     },
     "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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz",
+      "integrity": "sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==",
       "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",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1567,12 +1557,12 @@
       }
     },
     "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1624,13 +1614,13 @@
       }
     },
     "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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.13.tgz",
+      "integrity": "sha512-O7I/THxarGcDZxkgWKMUrk7NK1/WbHAg3Xx86gqS6x9MTrNL6AwIluuZ96ms4xeDe6AVx6rjHbWHP7x26EPQBA==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-typescript": "^7.18.6"
+        "@babel/helper-create-class-features-plugin": "^7.20.12",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1640,11 +1630,11 @@
       }
     },
     "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==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1669,17 +1659,17 @@
       }
     },
     "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==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
+      "integrity": "sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==",
       "dependencies": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.20.1",
+        "@babel/helper-compilation-targets": "^7.20.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@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-async-generator-functions": "^7.20.1",
         "@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",
@@ -1688,7 +1678,7 @@
         "@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-object-rest-spread": "^7.20.2",
         "@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",
@@ -1699,7 +1689,7 @@
         "@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-import-assertions": "^7.20.0",
         "@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",
@@ -1712,10 +1702,10 @@
         "@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-block-scoping": "^7.20.2",
+        "@babel/plugin-transform-classes": "^7.20.2",
         "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.20.2",
         "@babel/plugin-transform-dotall-regex": "^7.18.6",
         "@babel/plugin-transform-duplicate-keys": "^7.18.9",
         "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
@@ -1723,30 +1713,30 @@
         "@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-amd": "^7.19.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
         "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
         "@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-parameters": "^7.20.1",
         "@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-spread": "^7.19.0",
         "@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-escapes": "^7.18.10",
         "@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",
+        "@babel/types": "^7.20.2",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "core-js-compat": "^3.25.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1815,54 +1805,42 @@
       }
     },
     "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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
       "dependencies": {
-        "core-js-pure": "^3.20.2",
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       },
       "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7"
       },
       "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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.13.tgz",
+      "integrity": "sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==",
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.9",
+        "@babel/generator": "^7.20.7",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@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",
+        "@babel/parser": "^7.20.13",
+        "@babel/types": "^7.20.7",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -1871,11 +1849,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.9.tgz",
-      "integrity": "sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
+      "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -1893,9 +1872,9 @@
       "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==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz",
+      "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==",
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.2",
         "postcss-selector-parser": "^6.0.10"
@@ -2004,6 +1983,24 @@
         "postcss": "^8.2"
       }
     },
+    "node_modules/@csstools/postcss-nested-calc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz",
+      "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==",
+      "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-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",
@@ -2073,6 +2070,24 @@
         "postcss": "^8.2"
       }
     },
+    "node_modules/@csstools/postcss-text-decoration-shorthand": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz",
+      "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==",
+      "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",
@@ -2107,30 +2122,30 @@
       }
     },
     "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==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz",
+      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
       "engines": {
-        "node": "^12 || ^14 || >=16"
+        "node": "^14 || ^16 || >=18"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "postcss": "^8.2",
+        "postcss": "^8.4",
         "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==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
+      "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.2",
-        "globals": "^13.15.0",
+        "espree": "^9.4.0",
+        "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -2139,6 +2154,9 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
@@ -2147,9 +2165,9 @@
       "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==",
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -2183,40 +2201,52 @@
       }
     },
     "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==",
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
+      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
-        "minimatch": "^3.0.4"
+        "minimatch": "^3.0.5"
       },
       "engines": {
         "node": ">=10.10.0"
       }
     },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "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==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
+      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "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==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-beta.0.tgz",
+      "integrity": "sha512-A2P3FotTZPcyqsGA9k0eydjqa7KpYlJA7qu6+dC1aDVpCD4xsREjJTDV6tttMe3dI7zNZEJEx0/jxt0bYKumQw==",
       "dependencies": {
-        "@ionic/core": "^6.3.2",
-        "ionicons": "^6.0.2",
+        "@ionic/core": "7.0.0-beta.0",
+        "ionicons": "^6.1.1",
         "tslib": "*"
       },
       "peerDependencies": {
@@ -2943,12 +2973,12 @@
       "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==",
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
     "node_modules/@leichtgewicht/ip-codec": {
@@ -2956,6 +2986,34 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
+      "version": "5.1.1-v1",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+      "dependencies": {
+        "eslint-scope": "5.1.1"
+      }
+    },
+    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/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/@nicolo-ribaudo/eslint-scope-5-internals/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/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2989,17 +3047,17 @@
       }
     },
     "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==",
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz",
+      "integrity": "sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==",
       "dependencies": {
         "ansi-html-community": "^0.0.8",
         "common-path-prefix": "^3.0.0",
-        "core-js-pure": "^3.8.1",
+        "core-js-pure": "^3.23.3",
         "error-stack-parser": "^2.0.6",
         "find-up": "^5.0.0",
         "html-entities": "^2.1.0",
-        "loader-utils": "^2.0.0",
+        "loader-utils": "^2.0.4",
         "schema-utils": "^3.0.0",
         "source-map": "^0.7.3"
       },
@@ -3010,7 +3068,7 @@
         "@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",
+        "type-fest": ">=0.17.0 <4.0.0",
         "webpack": ">=4.43.0 <6.0.0",
         "webpack-dev-server": "3.x || 4.x",
         "webpack-hot-middleware": "2.x",
@@ -3112,19 +3170,19 @@
       "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=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
+      "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
     },
     "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=="
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
     },
     "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==",
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
+      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
       "dependencies": {
         "type-detect": "4.0.8"
       }
@@ -3138,9 +3196,9 @@
       }
     },
     "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==",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3384,12 +3442,12 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
+      "integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==",
       "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0",
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
         "@types/babel__generator": "*",
         "@types/babel__template": "*",
         "@types/babel__traverse": "*"
@@ -3413,9 +3471,9 @@
       }
     },
     "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==",
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.3.tgz",
+      "integrity": "sha512-1kbcJ40lLB7MHsj39U4Sh1uTd2E7rLEa79kmDpI6cy+XiXsteB3POdQomoq4FxszMrO3ZYchkhYJw7A2862b3w==",
       "dependencies": {
         "@babel/types": "^7.3.0"
       }
@@ -3455,9 +3513,9 @@
       }
     },
     "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==",
+      "version": "8.4.10",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz",
+      "integrity": "sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -3478,20 +3536,20 @@
       "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==",
+      "version": "4.17.16",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.16.tgz",
+      "integrity": "sha512-LkKpqRZ7zqXJuvoELakaFYuETHjZkSol8EV6cNnyishutDBCCdv6+dsKPbKkCcIk57qRphOLY5sEgClw1bO3gA==",
       "dependencies": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.18",
+        "@types/express-serve-static-core": "^4.17.31",
         "@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==",
+      "version": "4.17.33",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz",
+      "integrity": "sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -3499,9 +3557,9 @@
       }
     },
     "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==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
+      "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
       "dependencies": {
         "@types/node": "*"
       }
@@ -3551,14 +3609,14 @@
       "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=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "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=="
+      "version": "16.18.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.11.tgz",
+      "integrity": "sha512-3oJbGBUWuS6ahSnEq1eN2XrCyf4YsWI8OyCvo7c64zQJNplk3mO84t53o8lfTk+2ji59g5ycfc6qQ3fdHliHuA=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3566,9 +3624,9 @@
       "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=="
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
+      "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
@@ -3591,9 +3649,9 @@
       "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==",
+      "version": "18.0.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
+      "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3601,9 +3659,9 @@
       }
     },
     "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==",
+      "version": "18.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
+      "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -3626,6 +3684,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "node_modules/@types/semver": {
+      "version": "7.3.13",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw=="
+    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -3635,11 +3698,11 @@
       }
     },
     "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==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
       "dependencies": {
-        "@types/mime": "^1",
+        "@types/mime": "*",
         "@types/node": "*"
       }
     },
@@ -3662,17 +3725,17 @@
       "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==",
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
       "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==",
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz",
+      "integrity": "sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -3683,16 +3746,16 @@
       "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.49.0.tgz",
+      "integrity": "sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/type-utils": "5.31.0",
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.49.0",
+        "@typescript-eslint/type-utils": "5.49.0",
+        "@typescript-eslint/utils": "5.49.0",
         "debug": "^4.3.4",
-        "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
         "regexpp": "^3.2.0",
         "semver": "^7.3.7",
         "tsutils": "^3.21.0"
@@ -3715,11 +3778,11 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.49.0.tgz",
+      "integrity": "sha512-veLpCJLYn44Fru7mSvi2doxQMzMCOFSDYdMUQhAzaH1vFYq2RVNpecZ8d18Wh6UMv07yahXkiv/aShWE48iE9Q==",
       "dependencies": {
-        "@typescript-eslint/utils": "5.31.0"
+        "@typescript-eslint/utils": "5.49.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3733,13 +3796,13 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.49.0.tgz",
+      "integrity": "sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/typescript-estree": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.49.0",
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/typescript-estree": "5.49.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -3759,12 +3822,12 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.49.0.tgz",
+      "integrity": "sha512-clpROBOiMIzpbWNxCe1xDK14uPZh35u4QaZO1GddilEzoCLAEz4szb51rBpdgurs5k2YzPtJeTEN3qVbG+LRUQ==",
       "dependencies": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0"
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/visitor-keys": "5.49.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3775,11 +3838,12 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.49.0.tgz",
+      "integrity": "sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==",
       "dependencies": {
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.49.0",
+        "@typescript-eslint/utils": "5.49.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -3800,9 +3864,9 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.49.0.tgz",
+      "integrity": "sha512-7If46kusG+sSnEpu0yOz2xFv5nRz158nzEXnJFCGVEHWnuzolXKwrH5Bsf9zsNlOQkyZuk0BZKKoJQI+1JPBBg==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -3812,12 +3876,12 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.49.0.tgz",
+      "integrity": "sha512-PBdx+V7deZT/3GjNYPVQv1Nc0U46dAHbIuOG8AZ3on3vuEKiPDwFE/lG1snN2eUB9IhF7EyF7K1hmTcLztNIsA==",
       "dependencies": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0",
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/visitor-keys": "5.49.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -3838,16 +3902,18 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.49.0.tgz",
+      "integrity": "sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==",
       "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",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.49.0",
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/typescript-estree": "5.49.0",
         "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
+        "eslint-utils": "^3.0.0",
+        "semver": "^7.3.7"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3881,11 +3947,11 @@
       }
     },
     "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.49.0.tgz",
+      "integrity": "sha512-v9jBMjpNWyn8B6k/Mjt6VbUS4J1GvUlR4x3Y+ibnP1z7y7V4n0WRz+50DY6+Myj0UaXVSuUlHohO+eZ8IJEnkg==",
       "dependencies": {
-        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/types": "5.49.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -4055,9 +4121,9 @@
       }
     },
     "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==",
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4131,9 +4197,9 @@
       }
     },
     "node_modules/address": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.0.tgz",
-      "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -4193,9 +4259,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -4265,9 +4331,9 @@
       }
     },
     "node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -4290,15 +4356,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
       "dependencies": {
-        "@babel/runtime": "^7.10.2",
-        "@babel/runtime-corejs3": "^7.10.2"
-      },
-      "engines": {
-        "node": ">=6.0"
+        "deep-equal": "^2.0.5"
       }
     },
     "node_modules/array-flatten": {
@@ -4307,14 +4369,14 @@
       "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==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5",
-        "get-intrinsic": "^1.1.1",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -4333,13 +4395,13 @@
       }
     },
     "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==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+      "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -4350,13 +4412,13 @@
       }
     },
     "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==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -4367,13 +4429,13 @@
       }
     },
     "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==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
+      "integrity": "sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-array-method-boxes-properly": "^1.0.0",
         "is-string": "^1.0.7"
       },
@@ -4384,6 +4446,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
+      "integrity": "sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -4413,9 +4487,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "version": "10.4.13",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
+      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4427,8 +4501,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
+        "browserslist": "^4.21.4",
+        "caniuse-lite": "^1.0.30001426",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -4444,18 +4518,32 @@
         "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==",
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
       "engines": {
-        "node": ">=4"
-      }
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
+      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
+      "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=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
+      "integrity": "sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==",
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
     },
     "node_modules/babel-jest": {
       "version": "27.5.1",
@@ -4543,9 +4631,9 @@
       }
     },
     "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==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
+      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
       "dependencies": {
         "find-cache-dir": "^3.3.1",
         "loader-utils": "^2.0.0",
@@ -4577,14 +4665,6 @@
         "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",
@@ -4637,12 +4717,12 @@
       }
     },
     "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
+      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
       "dependencies": {
         "@babel/compat-data": "^7.17.7",
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
         "semver": "^6.1.1"
       },
       "peerDependencies": {
@@ -4658,23 +4738,23 @@
       }
     },
     "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==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
+      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
-        "core-js-compat": "^3.21.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
+        "core-js-compat": "^3.25.1"
       },
       "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==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
+      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
+        "@babel/helper-define-polyfill-provider": "^0.3.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
@@ -4791,9 +4871,9 @@
       "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==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
@@ -4803,7 +4883,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "raw-body": "2.5.1",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -4846,9 +4926,9 @@
       "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==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.0.tgz",
+      "integrity": "sha512-LVRinRB3k1/K0XzZ2p58COnWvkQknIY6sf0zF2rpErvcJXpMBttEPQSxK+HEXSS9VmpZlDoDnQWv8ftJT20B0Q==",
       "dependencies": {
         "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
@@ -4887,9 +4967,9 @@
       "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==",
+      "version": "4.21.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
+      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
       "funding": [
         {
           "type": "opencollective",
@@ -4901,10 +4981,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001370",
-        "electron-to-chromium": "^1.4.202",
-        "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.5"
+        "caniuse-lite": "^1.0.30001449",
+        "electron-to-chromium": "^1.4.284",
+        "node-releases": "^2.0.8",
+        "update-browserslist-db": "^1.0.10"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5005,9 +5085,9 @@
       }
     },
     "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==",
+      "version": "1.0.30001449",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
+      "integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
       "funding": [
         {
           "type": "opencollective",
@@ -5049,9 +5129,9 @@
       }
     },
     "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=="
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
+      "integrity": "sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA=="
     },
     "node_modules/chokidar": {
       "version": "3.5.3",
@@ -5099,9 +5179,18 @@
       }
     },
     "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=="
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.7.1.tgz",
+      "integrity": "sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/cjs-module-lexer": {
       "version": "1.2.2",
@@ -5109,9 +5198,9 @@
       "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==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
+      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
       "dependencies": {
         "source-map": "~0.6.0"
       },
@@ -5178,9 +5267,9 @@
       "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=="
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
     "node_modules/colorette": {
       "version": "2.0.19",
@@ -5265,6 +5354,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/compression/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/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5294,40 +5388,18 @@
         "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==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "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"
-      }
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cookie": {
       "version": "0.5.0",
@@ -5343,9 +5415,9 @@
       "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==",
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
+      "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5353,30 +5425,21 @@
       }
     },
     "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==",
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.27.2.tgz",
+      "integrity": "sha512-welaYuF7ZtbYKGrIy7y3eb40d37rG1FvzEOfe7hSLd2iD6duMDqUhRfSvCGyC46HhR6Y8JXXdZ2lnRUMkPBpvg==",
       "dependencies": {
-        "browserslist": "^4.21.2",
-        "semver": "7.0.0"
+        "browserslist": "^4.21.4"
       },
       "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==",
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.27.2.tgz",
+      "integrity": "sha512-Cf2jqAbXgWH3VVzjyaaFkY1EBazxugUepGymDoeteyYr9ByX51kD2jdHZlsEF/xnJMyN3Prua7mQuzwMg6Zc9A==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5389,9 +5452,9 @@
       "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==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
@@ -5442,9 +5505,9 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
       "engines": {
         "node": "^10 || ^12 || >=14"
       },
@@ -5470,18 +5533,18 @@
       }
     },
     "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==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
       "dependencies": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.7",
+        "postcss": "^8.4.19",
         "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"
+        "semver": "^7.3.8"
       },
       "engines": {
         "node": ">= 12.13.0"
@@ -5532,9 +5595,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -5654,9 +5717,9 @@
       }
     },
     "node_modules/cssdb": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-6.6.3.tgz",
-      "integrity": "sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.4.1.tgz",
+      "integrity": "sha512-0Q8NOMpXJ3iTDDbUv9grcmQAfdDx4qz+fN/+Md2FGbevT+6+bJNQ2LjB2YIUlLbpBTM32idU1Sb+tb/uGt6/XQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/csstools"
@@ -5674,11 +5737,11 @@
       }
     },
     "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==",
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.14.tgz",
+      "integrity": "sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==",
       "dependencies": {
-        "cssnano-preset-default": "^5.2.12",
+        "cssnano-preset-default": "^5.2.13",
         "lilconfig": "^2.0.3",
         "yaml": "^1.10.2"
       },
@@ -5694,24 +5757,24 @@
       }
     },
     "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==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.13.tgz",
+      "integrity": "sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==",
       "dependencies": {
-        "css-declaration-sorter": "^6.3.0",
+        "css-declaration-sorter": "^6.3.1",
         "cssnano-utils": "^3.1.0",
         "postcss-calc": "^8.2.3",
         "postcss-colormin": "^5.3.0",
-        "postcss-convert-values": "^5.1.2",
+        "postcss-convert-values": "^5.1.3",
         "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-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.3",
         "postcss-minify-font-values": "^5.1.0",
         "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-params": "^5.1.4",
         "postcss-minify-selectors": "^5.2.1",
         "postcss-normalize-charset": "^5.1.0",
         "postcss-normalize-display-values": "^5.1.0",
@@ -5719,11 +5782,11 @@
         "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-unicode": "^5.1.1",
         "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-initial": "^5.1.1",
         "postcss-reduce-transforms": "^5.1.0",
         "postcss-svgo": "^5.1.0",
         "postcss-unique-selectors": "^5.1.1"
@@ -5804,9 +5867,9 @@
       "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=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -5843,24 +5906,51 @@
       }
     },
     "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=="
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "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-equal": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz",
+      "integrity": "sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "es-get-iterator": "^1.1.2",
+        "get-intrinsic": "^1.1.3",
+        "is-arguments": "^1.1.1",
+        "is-array-buffer": "^3.0.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.4.3",
+        "side-channel": "^1.0.4",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.9"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "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==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5900,9 +5990,12 @@
       }
     },
     "node_modules/defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
@@ -6168,9 +6261,9 @@
       }
     },
     "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=="
+      "version": "1.4.284",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
+      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -6205,9 +6298,9 @@
       }
     },
     "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==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -6241,33 +6334,43 @@
       }
     },
     "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==",
+      "version": "1.21.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
+      "integrity": "sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==",
       "dependencies": {
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.1",
+        "get-intrinsic": "^1.1.3",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.4",
+        "is-array-buffer": "^3.0.1",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6281,11 +6384,43 @@
       "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-get-iterator": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "is-arguments": "^1.1.1",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.7",
+        "isarray": "^2.0.5",
+        "stop-iteration-iterator": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "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-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-shim-unscopables": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -6409,12 +6544,14 @@
       }
     },
     "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",
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
+      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
+      "dependencies": {
+        "@eslint/eslintrc": "^1.4.1",
+        "@humanwhocodes/config-array": "^0.11.8",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -6424,18 +6561,21 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.2",
+        "espree": "^9.4.0",
         "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",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -6446,8 +6586,7 @@
         "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"
+        "text-table": "^0.2.0"
       },
       "bin": {
         "eslint": "bin/eslint.js"
@@ -6487,12 +6626,13 @@
       }
     },
     "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==",
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
       "dependencies": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.11.0",
+        "resolve": "^1.22.1"
       }
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
@@ -6504,15 +6644,19 @@
       }
     },
     "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==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz",
+      "integrity": "sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==",
       "dependencies": {
-        "debug": "^3.2.7",
-        "find-up": "^2.1.0"
+        "debug": "^3.2.7"
       },
       "engines": {
         "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-module-utils/node_modules/debug": {
@@ -6523,67 +6667,6 @@
         "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",
@@ -6602,22 +6685,24 @@
       }
     },
     "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==",
+      "version": "2.27.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "dependencies": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flat": "^1.2.5",
-        "debug": "^2.6.9",
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.3",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.7.4",
         "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.11.0",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
-        "resolve": "^1.22.0",
+        "object.values": "^1.1.6",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.0",
         "tsconfig-paths": "^3.14.1"
       },
       "engines": {
@@ -6628,11 +6713,11 @@
       }
     },
     "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==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "^2.1.1"
       }
     },
     "node_modules/eslint-plugin-import/node_modules/doctrine": {
@@ -6646,10 +6731,13 @@
         "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-import/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-jest": {
       "version": "25.7.0",
@@ -6675,22 +6763,25 @@
       }
     },
     "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==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
+      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
       "dependencies": {
-        "@babel/runtime": "^7.18.9",
-        "aria-query": "^4.2.2",
-        "array-includes": "^3.1.5",
+        "@babel/runtime": "^7.20.7",
+        "aria-query": "^5.1.3",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
         "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.4.3",
-        "axobject-query": "^2.2.0",
+        "axe-core": "^4.6.2",
+        "axobject-query": "^3.1.1",
         "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",
+        "jsx-ast-utils": "^3.3.3",
+        "language-tags": "=1.0.5",
         "minimatch": "^3.1.2",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -6709,24 +6800,25 @@
       }
     },
     "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==",
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
+      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
       "dependencies": {
-        "array-includes": "^3.1.5",
-        "array.prototype.flatmap": "^1.3.0",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "array.prototype.tosorted": "^1.1.1",
         "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",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "object.hasown": "^1.1.2",
+        "object.values": "^1.1.6",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.3",
+        "resolve": "^2.0.0-next.4",
         "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.7"
+        "string.prototype.matchall": "^4.0.8"
       },
       "engines": {
         "node": ">=4"
@@ -6782,11 +6874,11 @@
       }
     },
     "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==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.10.0.tgz",
+      "integrity": "sha512-aTOsCAEI9trrX3TLOnsskfhe57DmsjP/yMKLPqg4ftdRvfR4qut2PGWUa8TwP7whZbwMzJjh98tgAPcE8vdHow==",
       "dependencies": {
-        "@typescript-eslint/utils": "^5.13.0"
+        "@typescript-eslint/utils": "^5.43.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0",
@@ -6865,9 +6957,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -7010,9 +7102,9 @@
       }
     },
     "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==",
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -7065,16 +7157,19 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
+      "integrity": "sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==",
       "dependencies": {
-        "acorn": "^8.7.1",
+        "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/esprima": {
@@ -7198,13 +7293,13 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.5.0",
@@ -7223,7 +7318,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -7256,34 +7351,15 @@
       "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==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -7317,9 +7393,9 @@
       "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==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -7336,9 +7412,9 @@
       }
     },
     "node_modules/fb-watchman": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
-      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
       "dependencies": {
         "bser": "2.1.1"
       }
@@ -7390,9 +7466,9 @@
       }
     },
     "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==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -7493,14 +7569,14 @@
       }
     },
     "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=="
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "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==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
       "funding": [
         {
           "type": "individual",
@@ -7516,6 +7592,14 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "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",
@@ -7771,11 +7855,6 @@
         "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",
@@ -7801,9 +7880,9 @@
       }
     },
     "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==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -7930,6 +8009,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -7949,11 +8042,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "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/grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -8016,6 +8125,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "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",
@@ -8068,7 +8188,12 @@
         "wbuf": "^1.1.0"
       }
     },
-    "node_modules/hpack.js/node_modules/readable-stream": {
+    "node_modules/hpack.js/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/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==",
@@ -8082,6 +8207,11 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/hpack.js/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/hpack.js/node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -8288,9 +8418,9 @@
       }
     },
     "node_modules/idb": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.5.tgz",
-      "integrity": "sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw=="
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
     },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
@@ -8304,17 +8434,17 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "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==",
+      "version": "9.0.19",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
+      "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -8389,11 +8519,11 @@
       "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==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.4.tgz",
+      "integrity": "sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==",
       "dependencies": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.1.3",
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
       },
@@ -8402,23 +8532,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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"
+        "@stencil/core": "^2.18.0"
       }
     },
     "node_modules/ipaddr.js": {
@@ -8429,6 +8547,34 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "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-array-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.1.tgz",
+      "integrity": "sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-typed-array": "^1.1.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -8472,9 +8618,9 @@
       }
     },
     "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==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -8483,9 +8629,9 @@
       }
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -8556,6 +8702,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -8602,6 +8756,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -8649,6 +8811,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-set": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "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",
@@ -8699,11 +8869,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      },
+      "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-weakmap": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-weakref": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -8715,6 +8911,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-weakset": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
+      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "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",
@@ -8727,9 +8935,9 @@
       }
     },
     "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -8745,9 +8953,9 @@
       }
     },
     "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==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
       "dependencies": {
         "@babel/core": "^7.12.3",
         "@babel/parser": "^7.14.7",
@@ -9757,9 +9965,9 @@
       }
     },
     "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==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
       "engines": {
         "node": ">=6"
       },
@@ -10411,9 +10619,9 @@
       }
     },
     "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==",
+      "version": "17.0.20",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.20.tgz",
+      "integrity": "sha512-eknWrTHofQuPk2iuqDm1waA7V6xPlbgBoaaXEgYkClhLOnB0TtbW+srJaOToAgawPxPlHQzwypFA2bhZaUGP5A==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -10790,6 +10998,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/js-sdsl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
+      "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10884,9 +11101,9 @@
       "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==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -10914,12 +11131,12 @@
       }
     },
     "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==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
+      "integrity": "sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==",
       "dependencies": {
         "array-includes": "^3.1.5",
-        "object.assign": "^4.1.2"
+        "object.assign": "^4.1.3"
       },
       "engines": {
         "node": ">=4.0"
@@ -10942,9 +11159,9 @@
       }
     },
     "node_modules/klona": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
-      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
       "engines": {
         "node": ">= 8"
       }
@@ -11004,9 +11221,9 @@
       }
     },
     "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==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -11080,14 +11297,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "yallist": "^3.0.2"
       }
     },
     "node_modules/magic-string": {
@@ -11142,9 +11356,9 @@
       }
     },
     "node_modules/memfs": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",
-      "integrity": "sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz",
+      "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==",
       "dependencies": {
         "fs-monkey": "^1.0.3"
       },
@@ -11229,9 +11443,9 @@
       }
     },
     "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==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz",
+      "integrity": "sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==",
       "dependencies": {
         "schema-utils": "^4.0.0"
       },
@@ -11247,9 +11461,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -11312,9 +11526,12 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/mkdirp": {
       "version": "0.5.6",
@@ -11360,6 +11577,11 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "node_modules/natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -11396,9 +11618,9 @@
       "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=="
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
+      "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -11450,9 +11672,9 @@
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
-      "integrity": "sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg=="
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
+      "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -11471,9 +11693,24 @@
       }
     },
     "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==",
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -11487,13 +11724,13 @@
       }
     },
     "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==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -11504,26 +11741,26 @@
       }
     },
     "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==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
+      "integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "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==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
+      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11533,14 +11770,14 @@
       }
     },
     "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==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.5.tgz",
+      "integrity": "sha512-yDNzckpM6ntyQiGTik1fKV1DcVDRS+w8bvpWNCBanvH5LfRX9O8WTHqQzG4RZwRAM4I0oU7TV11Lj5v0g20ibw==",
       "dependencies": {
-        "array.prototype.reduce": "^1.0.4",
+        "array.prototype.reduce": "^1.0.5",
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.1"
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.8"
@@ -11550,25 +11787,25 @@
       }
     },
     "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==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
+      "integrity": "sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==",
       "dependencies": {
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "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==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11968,9 +12205,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "funding": [
         {
           "type": "opencollective",
@@ -12118,11 +12355,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
       "dependencies": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -12151,9 +12388,9 @@
       }
     },
     "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==",
+      "version": "12.1.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz",
+      "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
@@ -12165,7 +12402,7 @@
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "postcss": "^8.4"
+        "postcss": "^8.2"
       }
     },
     "node_modules/postcss-custom-selectors": {
@@ -12491,12 +12728,12 @@
       }
     },
     "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==",
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.0"
+        "stylehacks": "^5.1.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -12506,11 +12743,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.3.tgz",
+      "integrity": "sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^3.1.0",
         "postcss-selector-parser": "^6.0.5"
@@ -12553,11 +12790,11 @@
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "cssnano-utils": "^3.1.0",
         "postcss-value-parser": "^4.2.0"
       },
@@ -12638,11 +12875,11 @@
       }
     },
     "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==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "dependencies": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       },
       "engines": {
         "node": ">=12.0"
@@ -12656,9 +12893,9 @@
       }
     },
     "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==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
+      "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==",
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.0",
         "postcss-selector-parser": "^6.0.10"
@@ -12773,11 +13010,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -12817,9 +13054,9 @@
       }
     },
     "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==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz",
+      "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==",
       "funding": [
         {
           "type": "kofi",
@@ -12832,6 +13069,9 @@
       ],
       "engines": {
         "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
       }
     },
     "node_modules/postcss-ordered-values": {
@@ -12894,56 +13134,58 @@
       }
     },
     "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",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz",
+      "integrity": "sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==",
+      "dependencies": {
+        "@csstools/postcss-cascade-layers": "^1.1.1",
+        "@csstools/postcss-color-function": "^1.1.1",
+        "@csstools/postcss-font-format-keywords": "^1.0.1",
+        "@csstools/postcss-hwb-function": "^1.0.2",
+        "@csstools/postcss-ic-unit": "^1.0.1",
+        "@csstools/postcss-is-pseudo-class": "^2.0.7",
+        "@csstools/postcss-nested-calc": "^1.0.0",
+        "@csstools/postcss-normalize-display-values": "^1.0.1",
+        "@csstools/postcss-oklab-function": "^1.1.1",
         "@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",
+        "@csstools/postcss-stepped-value-functions": "^1.0.1",
+        "@csstools/postcss-text-decoration-shorthand": "^1.0.0",
+        "@csstools/postcss-trigonometric-functions": "^1.0.2",
+        "@csstools/postcss-unset-value": "^1.0.2",
+        "autoprefixer": "^10.4.13",
+        "browserslist": "^4.21.4",
         "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",
+        "cssdb": "^7.1.0",
+        "postcss-attribute-case-insensitive": "^5.0.2",
         "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^4.2.3",
+        "postcss-color-functional-notation": "^4.2.4",
         "postcss-color-hex-alpha": "^8.0.4",
-        "postcss-color-rebeccapurple": "^7.1.0",
+        "postcss-color-rebeccapurple": "^7.1.1",
         "postcss-custom-media": "^8.0.2",
-        "postcss-custom-properties": "^12.1.8",
+        "postcss-custom-properties": "^12.1.10",
         "postcss-custom-selectors": "^6.0.3",
-        "postcss-dir-pseudo-class": "^6.0.4",
-        "postcss-double-position-gradients": "^3.1.1",
+        "postcss-dir-pseudo-class": "^6.0.5",
+        "postcss-double-position-gradients": "^3.1.2",
         "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-gap-properties": "^3.0.5",
+        "postcss-image-set-function": "^4.0.7",
         "postcss-initial": "^4.0.1",
-        "postcss-lab-function": "^4.2.0",
+        "postcss-lab-function": "^4.2.1",
         "postcss-logical": "^5.0.4",
         "postcss-media-minmax": "^5.0.0",
-        "postcss-nesting": "^10.1.9",
+        "postcss-nesting": "^10.2.0",
         "postcss-opacity-percentage": "^1.1.2",
-        "postcss-overflow-shorthand": "^3.0.3",
+        "postcss-overflow-shorthand": "^3.0.4",
         "postcss-page-break": "^3.0.4",
-        "postcss-place": "^7.0.4",
-        "postcss-pseudo-class-any-link": "^7.1.5",
+        "postcss-place": "^7.0.5",
+        "postcss-pseudo-class-any-link": "^7.1.6",
         "postcss-replace-overflow-wrap": "^4.0.0",
-        "postcss-selector-not": "^6.0.0",
+        "postcss-selector-not": "^6.0.1",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -12976,11 +13218,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.1.tgz",
+      "integrity": "sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0"
       },
       "engines": {
@@ -13031,9 +13273,9 @@
       }
     },
     "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==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -13187,9 +13429,9 @@
       "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==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
+      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
       "dependencies": {
         "asap": "~2.0.6"
       }
@@ -13247,9 +13489,9 @@
       "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==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
       "engines": {
         "node": ">=6"
       }
@@ -13264,9 +13506,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
@@ -13277,6 +13519,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13490,9 +13737,9 @@
       }
     },
     "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==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
       "engines": {
         "node": ">= 12.13.0"
       }
@@ -13643,25 +13890,14 @@
       }
     },
     "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==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "minimatch": "^3.0.5"
       },
       "engines": {
-        "node": "*"
+        "node": ">=6.0.0"
       }
     },
     "node_modules/regenerate": {
@@ -13670,9 +13906,9 @@
       "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==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "dependencies": {
         "regenerate": "^1.4.2"
       },
@@ -13681,14 +13917,14 @@
       }
     },
     "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=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "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==",
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
       }
@@ -13726,30 +13962,30 @@
       }
     },
     "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==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz",
+      "integrity": "sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==",
       "dependencies": {
         "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.0.1",
-        "regjsgen": "^0.6.0",
-        "regjsparser": "^0.8.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsgen": "^0.7.1",
+        "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.0.0"
+        "unicode-match-property-value-ecmascript": "^2.1.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=="
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.7.1.tgz",
+      "integrity": "sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA=="
     },
     "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==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "dependencies": {
         "jsesc": "~0.5.0"
       },
@@ -13898,9 +14134,9 @@
       }
     },
     "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==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
+      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==",
       "engines": {
         "node": ">=10"
       }
@@ -13937,9 +14173,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -13954,6 +14190,7 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
       "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser",
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "jest-worker": "^26.2.1",
@@ -14027,9 +14264,36 @@
       }
     },
     "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=="
+      "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/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -14125,9 +14389,9 @@
       "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==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
+      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
       "dependencies": {
         "node-forge": "^1"
       },
@@ -14136,9 +14400,9 @@
       }
     },
     "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==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -14149,6 +14413,22 @@
         "node": ">=10"
       }
     },
+    "node_modules/semver/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/semver/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/send": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
@@ -14191,9 +14471,9 @@
       "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==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -14307,9 +14587,12 @@
       }
     },
     "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=="
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
+      "integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/side-channel": {
       "version": "1.0.4",
@@ -14374,9 +14657,9 @@
       }
     },
     "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==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
+      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
       "dependencies": {
         "abab": "^2.0.5",
         "iconv-lite": "^0.6.3",
@@ -14413,7 +14696,8 @@
     "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=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
     "node_modules/spdy": {
       "version": "4.0.2",
@@ -14455,9 +14739,9 @@
       "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==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
       "dependencies": {
         "escape-string-regexp": "^2.0.0"
       },
@@ -14486,6 +14770,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
+      "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
+      "dependencies": {
+        "internal-slot": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -14494,25 +14789,6 @@
         "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",
@@ -14549,17 +14825,17 @@
       "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==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1",
-        "get-intrinsic": "^1.1.1",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
-        "regexp.prototype.flags": "^1.4.1",
+        "regexp.prototype.flags": "^1.4.3",
         "side-channel": "^1.0.4"
       },
       "funding": {
@@ -14567,26 +14843,26 @@
       }
     },
     "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -14667,11 +14943,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-selector-parser": "^6.0.4"
       },
       "engines": {
@@ -14693,9 +14969,9 @@
       }
     },
     "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==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "dependencies": {
         "has-flag": "^4.0.0",
         "supports-color": "^7.0.0"
@@ -14825,9 +15101,9 @@
       "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==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
+      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
       "dependencies": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -14835,18 +15111,19 @@
         "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.5",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.18",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
+        "postcss-nested": "6.0.0",
         "postcss-selector-parser": "^6.0.10",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
@@ -14928,9 +15205,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "version": "5.16.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.2.tgz",
+      "integrity": "sha512-JKuM+KvvWVqT7muHVyrwv7FVRPnmHDwF6XwoIxdbF5Witi0vu99RYpxDexpJndXt3jbZZmmWr2/mQa6HvSNdSg==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -14945,15 +15222,15 @@
       }
     },
     "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==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz",
+      "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==",
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "terser": "^5.14.1"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -15001,9 +15278,9 @@
       "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=="
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
+      "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ=="
     },
     "node_modules/thunky": {
       "version": "1.1.0",
@@ -15043,22 +15320,23 @@
       }
     },
     "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==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
+      "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
       "dependencies": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
       },
       "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==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -15091,9 +15369,9 @@
       }
     },
     "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==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dependencies": {
         "minimist": "^1.2.0"
       },
@@ -15110,9 +15388,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -15175,6 +15453,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -15184,9 +15475,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -15230,17 +15521,17 @@
       }
     },
     "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==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
       "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==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "engines": {
         "node": ">=4"
       }
@@ -15287,9 +15578,9 @@
       }
     },
     "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==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
+      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -15319,6 +15610,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -15359,11 +15659,6 @@
         "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",
@@ -15389,6 +15684,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
       "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
       "dependencies": {
         "browser-process-hrtime": "^1.0.0"
       }
@@ -15446,9 +15742,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.74.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
-      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "version": "5.75.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
+      "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -15514,9 +15810,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -15563,9 +15859,9 @@
       }
     },
     "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==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
+      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -15590,7 +15886,7 @@
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.1",
+        "selfsigned": "^2.1.1",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
@@ -15617,9 +15913,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -15666,15 +15962,15 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
+      "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
       "engines": {
         "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -15845,6 +16141,39 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-collection": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
+      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "dependencies": {
+        "is-map": "^2.0.1",
+        "is-set": "^2.0.1",
+        "is-weakmap": "^2.0.1",
+        "is-weakset": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "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",
@@ -15854,26 +16183,26 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz",
+      "integrity": "sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==",
       "dependencies": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz",
+      "integrity": "sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.4.tgz",
+      "integrity": "sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==",
       "dependencies": {
         "@apideck/better-ajv-errors": "^0.3.1",
         "@babel/core": "^7.11.1",
@@ -15897,30 +16226,30 @@
         "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"
+        "workbox-background-sync": "6.5.4",
+        "workbox-broadcast-update": "6.5.4",
+        "workbox-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-google-analytics": "6.5.4",
+        "workbox-navigation-preload": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-range-requests": "6.5.4",
+        "workbox-recipes": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4",
+        "workbox-streams": "6.5.4",
+        "workbox-sw": "6.5.4",
+        "workbox-window": "6.5.4"
       },
       "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -15986,117 +16315,117 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz",
+      "integrity": "sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.4.tgz",
+      "integrity": "sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q=="
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.4.tgz",
+      "integrity": "sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==",
       "dependencies": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz",
+      "integrity": "sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==",
       "dependencies": {
-        "workbox-background-sync": "6.5.3",
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-background-sync": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz",
+      "integrity": "sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.4.tgz",
+      "integrity": "sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==",
       "dependencies": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz",
+      "integrity": "sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.4.tgz",
+      "integrity": "sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==",
       "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"
+        "workbox-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.4.tgz",
+      "integrity": "sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.4.tgz",
+      "integrity": "sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.4.tgz",
+      "integrity": "sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==",
       "dependencies": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.4.tgz",
+      "integrity": "sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA=="
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz",
+      "integrity": "sha512-LmWm/zoaahe0EGmMTrSLUi+BjyR3cdGEfU3fS6PN1zKFYbqAKuQ+Oy/27e4VSXsyIwAw8+QDfk1XHNGtZu9nQg==",
       "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"
+        "workbox-build": "6.5.4"
       },
       "engines": {
         "node": ">=10.0.0"
@@ -16123,12 +16452,12 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.4.tgz",
+      "integrity": "sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2",
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "node_modules/wrap-ansi": {
@@ -16240,9 +16569,9 @@
       }
     },
     "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -16318,29 +16647,29 @@
       }
     },
     "@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=="
+      "version": "7.20.14",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.14.tgz",
+      "integrity": "sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw=="
     },
     "@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==",
+      "version": "7.20.12",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz",
+      "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==",
       "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",
+        "@babel/generator": "^7.20.7",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helpers": "^7.20.7",
+        "@babel/parser": "^7.20.7",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.12",
+        "@babel/types": "^7.20.7",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.1",
+        "json5": "^2.2.2",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -16352,34 +16681,20 @@
       }
     },
     "@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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
+      "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
       "requires": {
-        "eslint-scope": "^5.1.1",
+        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "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",
@@ -16388,11 +16703,11 @@
       }
     },
     "@babel/generator": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.9.tgz",
-      "integrity": "sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==",
+      "version": "7.20.14",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.14.tgz",
+      "integrity": "sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==",
       "requires": {
-        "@babel/types": "^7.18.9",
+        "@babel/types": "^7.20.7",
         "@jridgewell/gen-mapping": "^0.3.2",
         "jsesc": "^2.5.1"
       },
@@ -16427,13 +16742,14 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
+      "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
       "requires": {
-        "@babel/compat-data": "^7.18.8",
+        "@babel/compat-data": "^7.20.5",
         "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.20.2",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -16445,32 +16761,33 @@
       }
     },
     "@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==",
+      "version": "7.20.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.12.tgz",
+      "integrity": "sha512-9OunRkbT0JQcednL0UFvbfXpAsUXiGjUk0a7sN8fUXX7Mue79cUSMjHGDRRi/Vz9vYlpIhLV5fMD5dKoMhhsNQ==",
       "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-function-name": "^7.19.0",
+        "@babel/helper-member-expression-to-functions": "^7.20.7",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
         "@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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.20.5.tgz",
+      "integrity": "sha512-m68B1lkg3XDGX5yCvGO0kPx3v9WIYLnzjKfPcQiwntEQa5ZeRkPmo2X/ISJc8qxWGfwUr+kvZAeEzAwLec2r2w==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
-        "regexpu-core": "^5.1.0"
+        "regexpu-core": "^5.2.1"
       }
     },
     "@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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
+      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
       "requires": {
         "@babel/helper-compilation-targets": "^7.17.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -16501,12 +16818,12 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
       "requires": {
-        "@babel/template": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/types": "^7.19.0"
       }
     },
     "@babel/helper-hoist-variables": {
@@ -16518,11 +16835,11 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.20.7.tgz",
+      "integrity": "sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==",
       "requires": {
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.20.7"
       }
     },
     "@babel/helper-module-imports": {
@@ -16534,18 +16851,18 @@
       }
     },
     "@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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz",
+      "integrity": "sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==",
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-simple-access": "^7.20.2",
         "@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-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.10",
+        "@babel/types": "^7.20.7"
       }
     },
     "@babel/helper-optimise-call-expression": {
@@ -16557,9 +16874,9 @@
       }
     },
     "@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=="
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
+      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ=="
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.18.9",
@@ -16573,31 +16890,32 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
+      "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.20.7",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.7",
+        "@babel/types": "^7.20.7"
       }
     },
     "@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==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
+      "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.20.2"
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
       "requires": {
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.20.0"
       }
     },
     "@babel/helper-split-export-declaration": {
@@ -16608,10 +16926,15 @@
         "@babel/types": "^7.18.6"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+    },
     "@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=="
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
     },
     "@babel/helper-validator-option": {
       "version": "7.18.6",
@@ -16619,24 +16942,24 @@
       "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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
+      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
       "requires": {
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.5",
+        "@babel/types": "^7.20.5"
       }
     },
     "@babel/helpers": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
-      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.13.tgz",
+      "integrity": "sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==",
       "requires": {
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.13",
+        "@babel/types": "^7.20.7"
       }
     },
     "@babel/highlight": {
@@ -16650,9 +16973,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.13.tgz",
+      "integrity": "sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.18.6",
@@ -16663,23 +16986,23 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
+      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
       "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/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
+      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
       "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/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       }
     },
@@ -16693,25 +17016,25 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.20.7.tgz",
+      "integrity": "sha512-AveGOoi9DAjUYYuUAG//Ig69GlazLnoyzMw68VCDux+c1tsnnH/OkYcpz/5xzMkEFC6UxjR5Gw1c+iY2wOGVeQ==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.20.7",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.20.13.tgz",
+      "integrity": "sha512-7T6BKHa9Cpd7lCueHBBzP0nkXNina+h5giOZw+a8ZpMfPFY19VjJAjIxyFHuWkhCWgL6QMqRiY/wB1fLXzm6Mw==",
       "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-create-class-features-plugin": "^7.20.12",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/plugin-syntax-decorators": "^7.18.6"
+        "@babel/plugin-syntax-decorators": "^7.19.0"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
@@ -16742,11 +17065,11 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
+      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       }
     },
@@ -16769,15 +17092,15 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+      "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
       "requires": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.18.8"
+        "@babel/plugin-transform-parameters": "^7.20.7"
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
@@ -16790,12 +17113,12 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.20.7.tgz",
+      "integrity": "sha512-T+A7b1kfjtRM51ssoOfS1+wbyCVqorfyZhT99TvxxLMirPShD8CzKMRepMlCBGM5RpHMbn8s+5MMHnPstJH6mQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       }
     },
@@ -16809,13 +17132,13 @@
       }
     },
     "@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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.20.5.tgz",
+      "integrity": "sha512-Vq7b9dUA12ByzB4EjQTPo25sFhY+08pQDBSZRtUAkj7lb7jahaHR5igera16QZ+3my1nYR4dKsNdYj5IjPHilQ==",
       "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/helper-create-class-features-plugin": "^7.20.5",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       }
     },
@@ -16861,11 +17184,11 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.19.0.tgz",
+      "integrity": "sha512-xaBZUEDntt4faL1yN8oIFlhfXeQAWJW7CLKYsHTUqriCUbj8xOra8bfxxKGi/UwExPFBuPdH4XfHc9rGQhrVkQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
@@ -16893,11 +17216,11 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-syntax-import-meta": {
@@ -16989,29 +17312,29 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
+      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
+      "integrity": "sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
       "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/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
@@ -17023,42 +17346,44 @@
       }
     },
     "@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==",
+      "version": "7.20.14",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.14.tgz",
+      "integrity": "sha512-sMPepQtsOs5fM1bwNvuJJHvaCfOEQfmc01FGw0ELlTpTJj5Ql/zuNRRldYhAPys4ghXdBIQJbRVYi44/7QflQQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.7.tgz",
+      "integrity": "sha512-LWYbsiXTPKl+oBlXUGlwNlJZetXD5Am+CyBdqhPsDVjM9Jc8jwBJFrKhHf900Kfk2eZG1y9MAG3UNajol7A4VQ==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.20.7",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
         "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz",
+      "integrity": "sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/template": "^7.20.7"
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz",
+      "integrity": "sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
@@ -17088,11 +17413,11 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.19.0.tgz",
+      "integrity": "sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-flow": "^7.18.6"
       }
     },
@@ -17131,36 +17456,33 @@
       }
     },
     "@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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.20.11.tgz",
+      "integrity": "sha512-S8e1f7WQ7cimJQ51JkAaDrEtohVEitXjgCGAS2N8S31Y42E+kWwfSz83LYz57QdBm7q9diARVqanIaH2oVgQnw==",
       "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/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-simple-access": "^7.20.2"
       }
     },
     "@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==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
+      "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
       "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/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-identifier": "^7.19.1"
       }
     },
     "@babel/plugin-transform-modules-umd": {
@@ -17173,12 +17495,12 @@
       }
     },
     "@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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
+      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-new-target": {
@@ -17199,11 +17521,11 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz",
+      "integrity": "sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-property-literals": {
@@ -17215,11 +17537,11 @@
       }
     },
     "@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==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz",
+      "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-react-display-name": {
@@ -17231,15 +17553,15 @@
       }
     },
     "@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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.20.13.tgz",
+      "integrity": "sha512-MmTZx/bkUrfJhhYAYt3Urjm+h8DQGrPrnKQ94jLo7NLuOU+T89a7IByhKmrb8SKhrIYIQ0FN0CHMbnFRen4qNw==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.20.7"
       }
     },
     "@babel/plugin-transform-react-jsx-development": {
@@ -17260,12 +17582,12 @@
       }
     },
     "@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==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz",
+      "integrity": "sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "regenerator-transform": "^0.15.0"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "regenerator-transform": "^0.15.1"
       }
     },
     "@babel/plugin-transform-reserved-words": {
@@ -17277,15 +17599,15 @@
       }
     },
     "@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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz",
+      "integrity": "sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==",
       "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",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -17305,12 +17627,12 @@
       }
     },
     "@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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
@@ -17338,21 +17660,21 @@
       }
     },
     "@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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.13.tgz",
+      "integrity": "sha512-O7I/THxarGcDZxkgWKMUrk7NK1/WbHAg3Xx86gqS6x9MTrNL6AwIluuZ96ms4xeDe6AVx6rjHbWHP7x26EPQBA==",
       "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/helper-create-class-features-plugin": "^7.20.12",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
       }
     },
     "@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==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
@@ -17365,17 +17687,17 @@
       }
     },
     "@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==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
+      "integrity": "sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==",
       "requires": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.20.1",
+        "@babel/helper-compilation-targets": "^7.20.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@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-async-generator-functions": "^7.20.1",
         "@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",
@@ -17384,7 +17706,7 @@
         "@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-object-rest-spread": "^7.20.2",
         "@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",
@@ -17395,7 +17717,7 @@
         "@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-import-assertions": "^7.20.0",
         "@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",
@@ -17408,10 +17730,10 @@
         "@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-block-scoping": "^7.20.2",
+        "@babel/plugin-transform-classes": "^7.20.2",
         "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.20.2",
         "@babel/plugin-transform-dotall-regex": "^7.18.6",
         "@babel/plugin-transform-duplicate-keys": "^7.18.9",
         "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
@@ -17419,30 +17741,30 @@
         "@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-amd": "^7.19.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
         "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
         "@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-parameters": "^7.20.1",
         "@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-spread": "^7.19.0",
         "@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-escapes": "^7.18.10",
         "@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",
+        "@babel/types": "^7.20.2",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "core-js-compat": "^3.25.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -17489,55 +17811,47 @@
       }
     },
     "@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==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
       "requires": {
-        "core-js-pure": "^3.20.2",
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/template": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.6.tgz",
-      "integrity": "sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
       "requires": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7"
       }
     },
     "@babel/traverse": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.9.tgz",
-      "integrity": "sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.13.tgz",
+      "integrity": "sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==",
       "requires": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.9",
+        "@babel/generator": "^7.20.7",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@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",
+        "@babel/parser": "^7.20.13",
+        "@babel/types": "^7.20.7",
         "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==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
+      "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -17552,9 +17866,9 @@
       "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==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz",
+      "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==",
       "requires": {
         "@csstools/selector-specificity": "^2.0.2",
         "postcss-selector-parser": "^6.0.10"
@@ -17603,6 +17917,14 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "@csstools/postcss-nested-calc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz",
+      "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
     "@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",
@@ -17636,6 +17958,14 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "@csstools/postcss-text-decoration-shorthand": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz",
+      "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==",
+      "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",
@@ -17650,19 +17980,19 @@
       "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=="
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz",
+      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw=="
     },
     "@eslint/eslintrc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
-      "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
+      "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.2",
-        "globals": "^13.15.0",
+        "espree": "^9.4.0",
+        "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -17676,9 +18006,9 @@
           "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==",
+          "version": "13.20.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+          "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
           "requires": {
             "type-fest": "^0.20.2"
           }
@@ -17699,37 +18029,42 @@
       }
     },
     "@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==",
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
+      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
-        "minimatch": "^3.0.4"
+        "minimatch": "^3.0.5"
       }
     },
+    "@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="
+    },
     "@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==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
+      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
       "requires": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "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==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-beta.0.tgz",
+      "integrity": "sha512-A2P3FotTZPcyqsGA9k0eydjqa7KpYlJA7qu6+dC1aDVpCD4xsREjJTDV6tttMe3dI7zNZEJEx0/jxt0bYKumQw==",
       "requires": {
-        "@ionic/core": "^6.3.2",
-        "ionicons": "^6.0.2",
+        "@ionic/core": "7.0.0-beta.0",
+        "ionicons": "^6.1.1",
         "tslib": "*"
       }
     },
@@ -18266,12 +18601,12 @@
       "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==",
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
     "@leichtgewicht/ip-codec": {
@@ -18279,6 +18614,30 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@nicolo-ribaudo/eslint-scope-5-internals": {
+      "version": "5.1.1-v1",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+      "requires": {
+        "eslint-scope": "5.1.1"
+      },
+      "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=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -18303,17 +18662,17 @@
       }
     },
     "@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==",
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz",
+      "integrity": "sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==",
       "requires": {
         "ansi-html-community": "^0.0.8",
         "common-path-prefix": "^3.0.0",
-        "core-js-pure": "^3.8.1",
+        "core-js-pure": "^3.23.3",
         "error-stack-parser": "^2.0.6",
         "find-up": "^5.0.0",
         "html-entities": "^2.1.0",
-        "loader-utils": "^2.0.0",
+        "loader-utils": "^2.0.4",
         "schema-utils": "^3.0.0",
         "source-map": "^0.7.3"
       }
@@ -18367,19 +18726,19 @@
       }
     },
     "@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=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
+      "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
     },
     "@sinclair/typebox": {
-      "version": "0.24.21",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.21.tgz",
-      "integrity": "sha512-II2SIjvxBVJmrGkkZYza/BqNjwx3PWROIA8CZ0/Hn7LV0Mv0CVpZxoyHGBVsQqfFLMv9DmArIeRHTwo76bE6oA=="
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
     },
     "@sinonjs/commons": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
-      "integrity": "sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==",
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
+      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
       "requires": {
         "type-detect": "4.0.8"
       }
@@ -18393,9 +18752,9 @@
       }
     },
     "@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=="
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
@@ -18528,12 +18887,12 @@
       "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
+      "integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==",
       "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0",
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
         "@types/babel__generator": "*",
         "@types/babel__template": "*",
         "@types/babel__traverse": "*"
@@ -18557,9 +18916,9 @@
       }
     },
     "@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==",
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.3.tgz",
+      "integrity": "sha512-1kbcJ40lLB7MHsj39U4Sh1uTd2E7rLEa79kmDpI6cy+XiXsteB3POdQomoq4FxszMrO3ZYchkhYJw7A2862b3w==",
       "requires": {
         "@babel/types": "^7.3.0"
       }
@@ -18599,9 +18958,9 @@
       }
     },
     "@types/eslint": {
-      "version": "8.4.5",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
-      "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
+      "version": "8.4.10",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz",
+      "integrity": "sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==",
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -18622,20 +18981,20 @@
       "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==",
+      "version": "4.17.16",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.16.tgz",
+      "integrity": "sha512-LkKpqRZ7zqXJuvoELakaFYuETHjZkSol8EV6cNnyishutDBCCdv6+dsKPbKkCcIk57qRphOLY5sEgClw1bO3gA==",
       "requires": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.18",
+        "@types/express-serve-static-core": "^4.17.31",
         "@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==",
+      "version": "4.17.33",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz",
+      "integrity": "sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==",
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -18643,9 +19002,9 @@
       }
     },
     "@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==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
+      "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
       "requires": {
         "@types/node": "*"
       }
@@ -18695,14 +19054,14 @@
       "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=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "@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=="
+      "version": "16.18.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.11.tgz",
+      "integrity": "sha512-3oJbGBUWuS6ahSnEq1eN2XrCyf4YsWI8OyCvo7c64zQJNplk3mO84t53o8lfTk+2ji59g5ycfc6qQ3fdHliHuA=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -18710,9 +19069,9 @@
       "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=="
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
+      "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
     },
     "@types/prop-types": {
       "version": "15.7.5",
@@ -18735,9 +19094,9 @@
       "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==",
+      "version": "18.0.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
+      "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -18745,9 +19104,9 @@
       }
     },
     "@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==",
+      "version": "18.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
+      "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
       "requires": {
         "@types/react": "*"
       }
@@ -18770,6 +19129,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/semver": {
+      "version": "7.3.13",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw=="
+    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -18779,11 +19143,11 @@
       }
     },
     "@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==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
       "requires": {
-        "@types/mime": "^1",
+        "@types/mime": "*",
         "@types/node": "*"
       }
     },
@@ -18806,17 +19170,17 @@
       "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==",
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
       "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==",
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz",
+      "integrity": "sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==",
       "requires": {
         "@types/yargs-parser": "*"
       }
@@ -18827,71 +19191,72 @@
       "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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.49.0.tgz",
+      "integrity": "sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/type-utils": "5.31.0",
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.49.0",
+        "@typescript-eslint/type-utils": "5.49.0",
+        "@typescript-eslint/utils": "5.49.0",
         "debug": "^4.3.4",
-        "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.49.0.tgz",
+      "integrity": "sha512-veLpCJLYn44Fru7mSvi2doxQMzMCOFSDYdMUQhAzaH1vFYq2RVNpecZ8d18Wh6UMv07yahXkiv/aShWE48iE9Q==",
       "requires": {
-        "@typescript-eslint/utils": "5.31.0"
+        "@typescript-eslint/utils": "5.49.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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.49.0.tgz",
+      "integrity": "sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/typescript-estree": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.49.0",
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/typescript-estree": "5.49.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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.49.0.tgz",
+      "integrity": "sha512-clpROBOiMIzpbWNxCe1xDK14uPZh35u4QaZO1GddilEzoCLAEz4szb51rBpdgurs5k2YzPtJeTEN3qVbG+LRUQ==",
       "requires": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0"
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/visitor-keys": "5.49.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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.49.0.tgz",
+      "integrity": "sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==",
       "requires": {
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.49.0",
+        "@typescript-eslint/utils": "5.49.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=="
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.49.0.tgz",
+      "integrity": "sha512-7If46kusG+sSnEpu0yOz2xFv5nRz158nzEXnJFCGVEHWnuzolXKwrH5Bsf9zsNlOQkyZuk0BZKKoJQI+1JPBBg=="
     },
     "@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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.49.0.tgz",
+      "integrity": "sha512-PBdx+V7deZT/3GjNYPVQv1Nc0U46dAHbIuOG8AZ3on3vuEKiPDwFE/lG1snN2eUB9IhF7EyF7K1hmTcLztNIsA==",
       "requires": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0",
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/visitor-keys": "5.49.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -18900,16 +19265,18 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.31.0.tgz",
-      "integrity": "sha512-kcVPdQS6VIpVTQ7QnGNKMFtdJdvnStkqS5LeALr4rcwx11G6OWb2HB17NMPnlRHvaZP38hL9iK8DdE9Fne7NYg==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.49.0.tgz",
+      "integrity": "sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==",
       "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",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.49.0",
+        "@typescript-eslint/types": "5.49.0",
+        "@typescript-eslint/typescript-estree": "5.49.0",
         "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
+        "eslint-utils": "^3.0.0",
+        "semver": "^7.3.7"
       },
       "dependencies": {
         "eslint-scope": {
@@ -18929,11 +19296,11 @@
       }
     },
     "@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==",
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.49.0.tgz",
+      "integrity": "sha512-v9jBMjpNWyn8B6k/Mjt6VbUS4J1GvUlR4x3Y+ibnP1z7y7V4n0WRz+50DY6+Myj0UaXVSuUlHohO+eZ8IJEnkg==",
       "requires": {
-        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/types": "5.49.0",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -19093,9 +19460,9 @@
       }
     },
     "acorn": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w=="
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
     },
     "acorn-globals": {
       "version": "6.0.0",
@@ -19146,9 +19513,9 @@
       "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=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA=="
     },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
@@ -19187,9 +19554,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -19236,9 +19603,9 @@
       }
     },
     "anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -19258,12 +19625,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
       "requires": {
-        "@babel/runtime": "^7.10.2",
-        "@babel/runtime-corejs3": "^7.10.2"
+        "deep-equal": "^2.0.5"
       }
     },
     "array-flatten": {
@@ -19272,14 +19638,14 @@
       "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==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5",
-        "get-intrinsic": "^1.1.1",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "is-string": "^1.0.7"
       }
     },
@@ -19289,39 +19655,51 @@
       "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==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+      "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "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==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "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==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
+      "integrity": "sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-array-method-boxes-properly": "^1.0.0",
         "is-string": "^1.0.7"
       }
     },
+    "array.prototype.tosorted": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
+      "integrity": "sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -19348,27 +19726,35 @@
       "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==",
+      "version": "10.4.13",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
+      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
       "requires": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
+        "browserslist": "^4.21.4",
+        "caniuse-lite": "^1.0.30001426",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
+    },
     "axe-core": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
-      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
+      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg=="
     },
     "axobject-query": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
-      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
+      "integrity": "sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==",
+      "requires": {
+        "deep-equal": "^2.0.5"
+      }
     },
     "babel-jest": {
       "version": "27.5.1",
@@ -19431,9 +19817,9 @@
       }
     },
     "babel-loader": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
-      "integrity": "sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
+      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
       "requires": {
         "find-cache-dir": "^3.3.1",
         "loader-utils": "^2.0.0",
@@ -19453,14 +19839,6 @@
         }
       }
     },
-    "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",
@@ -19500,12 +19878,12 @@
       "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
+      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
       "requires": {
         "@babel/compat-data": "^7.17.7",
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
         "semver": "^6.1.1"
       },
       "dependencies": {
@@ -19517,20 +19895,20 @@
       }
     },
     "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==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
+      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
-        "core-js-compat": "^3.21.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
+        "core-js-compat": "^3.25.1"
       }
     },
     "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==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
+      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
+        "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
     "babel-plugin-transform-react-remove-prop-types": {
@@ -19626,9 +20004,9 @@
       "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==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "requires": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
@@ -19638,7 +20016,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "raw-body": "2.5.1",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -19673,9 +20051,9 @@
       }
     },
     "bonjour-service": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.13.tgz",
-      "integrity": "sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.0.tgz",
+      "integrity": "sha512-LVRinRB3k1/K0XzZ2p58COnWvkQknIY6sf0zF2rpErvcJXpMBttEPQSxK+HEXSS9VmpZlDoDnQWv8ftJT20B0Q==",
       "requires": {
         "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
@@ -19711,14 +20089,14 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
     },
     "browserslist": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
-      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
+      "version": "4.21.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
+      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
       "requires": {
-        "caniuse-lite": "^1.0.30001370",
-        "electron-to-chromium": "^1.4.202",
-        "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.5"
+        "caniuse-lite": "^1.0.30001449",
+        "electron-to-chromium": "^1.4.284",
+        "node-releases": "^2.0.8",
+        "update-browserslist-db": "^1.0.10"
       }
     },
     "bser": {
@@ -19789,9 +20167,9 @@
       }
     },
     "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=="
+      "version": "1.0.30001449",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
+      "integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -19814,9 +20192,9 @@
       "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=="
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
+      "integrity": "sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA=="
     },
     "chokidar": {
       "version": "3.5.3",
@@ -19849,9 +20227,9 @@
       "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=="
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.7.1.tgz",
+      "integrity": "sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w=="
     },
     "cjs-module-lexer": {
       "version": "1.2.2",
@@ -19859,9 +20237,9 @@
       "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==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
+      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
       "requires": {
         "source-map": "~0.6.0"
       },
@@ -19917,9 +20295,9 @@
       "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=="
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
     "colorette": {
       "version": "2.0.19",
@@ -19988,6 +20366,11 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "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=="
         }
       }
     },
@@ -20012,27 +20395,17 @@
       "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=="
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
     },
     "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"
-      }
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "cookie": {
       "version": "0.5.0",
@@ -20045,30 +20418,22 @@
       "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=="
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
+      "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w=="
     },
     "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==",
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.27.2.tgz",
+      "integrity": "sha512-welaYuF7ZtbYKGrIy7y3eb40d37rG1FvzEOfe7hSLd2iD6duMDqUhRfSvCGyC46HhR6Y8JXXdZ2lnRUMkPBpvg==",
       "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=="
-        }
+        "browserslist": "^4.21.4"
       }
     },
     "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=="
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.27.2.tgz",
+      "integrity": "sha512-Cf2jqAbXgWH3VVzjyaaFkY1EBazxugUepGymDoeteyYr9ByX51kD2jdHZlsEF/xnJMyN3Prua7mQuzwMg6Zc9A=="
     },
     "core-util-is": {
       "version": "1.0.3",
@@ -20076,9 +20441,9 @@
       "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==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "requires": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
@@ -20111,9 +20476,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=="
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -20124,18 +20489,18 @@
       }
     },
     "css-loader": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
-      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
       "requires": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.7",
+        "postcss": "^8.4.19",
         "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"
+        "semver": "^7.3.8"
       }
     },
     "css-minimizer-webpack-plugin": {
@@ -20152,9 +20517,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -20237,9 +20602,9 @@
       "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=="
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.4.1.tgz",
+      "integrity": "sha512-0Q8NOMpXJ3iTDDbUv9grcmQAfdDx4qz+fN/+Md2FGbevT+6+bJNQ2LjB2YIUlLbpBTM32idU1Sb+tb/uGt6/XQ=="
     },
     "cssesc": {
       "version": "3.0.0",
@@ -20247,34 +20612,34 @@
       "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==",
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.14.tgz",
+      "integrity": "sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==",
       "requires": {
-        "cssnano-preset-default": "^5.2.12",
+        "cssnano-preset-default": "^5.2.13",
         "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==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.13.tgz",
+      "integrity": "sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==",
       "requires": {
-        "css-declaration-sorter": "^6.3.0",
+        "css-declaration-sorter": "^6.3.1",
         "cssnano-utils": "^3.1.0",
         "postcss-calc": "^8.2.3",
         "postcss-colormin": "^5.3.0",
-        "postcss-convert-values": "^5.1.2",
+        "postcss-convert-values": "^5.1.3",
         "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-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.3",
         "postcss-minify-font-values": "^5.1.0",
         "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-params": "^5.1.4",
         "postcss-minify-selectors": "^5.2.1",
         "postcss-normalize-charset": "^5.1.0",
         "postcss-normalize-display-values": "^5.1.0",
@@ -20282,11 +20647,11 @@
         "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-unicode": "^5.1.1",
         "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-initial": "^5.1.1",
         "postcss-reduce-transforms": "^5.1.0",
         "postcss-svgo": "^5.1.0",
         "postcss-unique-selectors": "^5.1.1"
@@ -20347,9 +20712,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -20375,24 +20740,48 @@
       }
     },
     "decimal.js": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
       "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
     },
+    "deep-equal": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz",
+      "integrity": "sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-get-iterator": "^1.1.2",
+        "get-intrinsic": "^1.1.3",
+        "is-arguments": "^1.1.1",
+        "is-array-buffer": "^3.0.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.4.3",
+        "side-channel": "^1.0.4",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.9"
+      }
+    },
     "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=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og=="
     },
     "default-gateway": {
       "version": "6.0.3",
@@ -20417,9 +20806,9 @@
       }
     },
     "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q=="
     },
     "delayed-stream": {
       "version": "1.0.0",
@@ -20618,9 +21007,9 @@
       }
     },
     "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=="
+      "version": "1.4.284",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
+      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
     "emittery": {
       "version": "0.8.1",
@@ -20643,9 +21032,9 @@
       "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==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
       "requires": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -20673,33 +21062,43 @@
       }
     },
     "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==",
+      "version": "1.21.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
+      "integrity": "sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==",
       "requires": {
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.1",
+        "get-intrinsic": "^1.1.3",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.4",
+        "is-array-buffer": "^3.0.1",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
       }
     },
     "es-array-method-boxes-properly": {
@@ -20707,11 +21106,37 @@
       "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-get-iterator": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "is-arguments": "^1.1.1",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.7",
+        "isarray": "^2.0.5",
+        "stop-iteration-iterator": "^1.0.0"
+      }
+    },
     "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-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "requires": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "es-shim-unscopables": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -20801,12 +21226,14 @@
       }
     },
     "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",
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
+      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
+      "requires": {
+        "@eslint/eslintrc": "^1.4.1",
+        "@humanwhocodes/config-array": "^0.11.8",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -20816,18 +21243,21 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.2",
+        "espree": "^9.4.0",
         "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",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -20838,8 +21268,7 @@
         "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"
+        "text-table": "^0.2.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -20883,9 +21312,9 @@
           "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==",
+          "version": "13.20.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+          "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
           "requires": {
             "type-fest": "^0.20.2"
           }
@@ -20940,12 +21369,13 @@
       }
     },
     "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==",
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
       "requires": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.11.0",
+        "resolve": "^1.22.1"
       },
       "dependencies": {
         "debug": {
@@ -20959,12 +21389,11 @@
       }
     },
     "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==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz",
+      "integrity": "sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==",
       "requires": {
-        "debug": "^3.2.7",
-        "find-up": "^2.1.0"
+        "debug": "^3.2.7"
       },
       "dependencies": {
         "debug": {
@@ -20974,49 +21403,6 @@
           "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=="
         }
       }
     },
@@ -21030,31 +21416,33 @@
       }
     },
     "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==",
+      "version": "2.27.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "requires": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flat": "^1.2.5",
-        "debug": "^2.6.9",
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.3",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.7.4",
         "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.11.0",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
-        "resolve": "^1.22.0",
+        "object.values": "^1.1.6",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.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==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
           }
         },
         "doctrine": {
@@ -21065,10 +21453,10 @@
             "esutils": "^2.0.2"
           }
         },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -21081,22 +21469,25 @@
       }
     },
     "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==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
+      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
       "requires": {
-        "@babel/runtime": "^7.18.9",
-        "aria-query": "^4.2.2",
-        "array-includes": "^3.1.5",
+        "@babel/runtime": "^7.20.7",
+        "aria-query": "^5.1.3",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
         "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.4.3",
-        "axobject-query": "^2.2.0",
+        "axe-core": "^4.6.2",
+        "axobject-query": "^3.1.1",
         "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",
+        "jsx-ast-utils": "^3.3.3",
+        "language-tags": "=1.0.5",
         "minimatch": "^3.1.2",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -21108,24 +21499,25 @@
       }
     },
     "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==",
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
+      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
       "requires": {
-        "array-includes": "^3.1.5",
-        "array.prototype.flatmap": "^1.3.0",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "array.prototype.tosorted": "^1.1.1",
         "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",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "object.hasown": "^1.1.2",
+        "object.values": "^1.1.6",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.3",
+        "resolve": "^2.0.0-next.4",
         "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.7"
+        "string.prototype.matchall": "^4.0.8"
       },
       "dependencies": {
         "doctrine": {
@@ -21159,11 +21551,11 @@
       "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==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.10.0.tgz",
+      "integrity": "sha512-aTOsCAEI9trrX3TLOnsskfhe57DmsjP/yMKLPqg4ftdRvfR4qut2PGWUa8TwP7whZbwMzJjh98tgAPcE8vdHow==",
       "requires": {
-        "@typescript-eslint/utils": "^5.13.0"
+        "@typescript-eslint/utils": "^5.43.0"
       }
     },
     "eslint-scope": {
@@ -21208,9 +21600,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -21268,11 +21660,11 @@
       }
     },
     "espree": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
+      "integrity": "sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==",
       "requires": {
-        "acorn": "^8.7.1",
+        "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       }
@@ -21361,13 +21753,13 @@
       }
     },
     "express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.5.0",
@@ -21386,7 +21778,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -21415,11 +21807,6 @@
           "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=="
         }
       }
     },
@@ -21429,9 +21816,9 @@
       "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==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -21461,9 +21848,9 @@
       "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==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -21477,9 +21864,9 @@
       }
     },
     "fb-watchman": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
-      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
       "requires": {
         "bser": "2.1.1"
       }
@@ -21518,9 +21905,9 @@
           }
         },
         "minimatch": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
           "requires": {
             "brace-expansion": "^2.0.1"
           }
@@ -21598,14 +21985,22 @@
       }
     },
     "flatted": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz",
-      "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ=="
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "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=="
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -21777,11 +22172,6 @@
         "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",
@@ -21798,9 +22188,9 @@
       "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==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -21890,6 +22280,14 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
     "globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -21903,11 +22301,24 @@
         "slash": "^3.0.0"
       }
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
+    "grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -21952,6 +22363,11 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+    },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -21986,6 +22402,11 @@
         "wbuf": "^1.1.0"
       },
       "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+        },
         "readable-stream": {
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -22000,6 +22421,11 @@
             "util-deprecate": "~1.0.1"
           }
         },
+        "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=="
+        },
         "string_decoder": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -22147,9 +22573,9 @@
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "idb": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.5.tgz",
-      "integrity": "sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw=="
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
     },
     "identity-obj-proxy": {
       "version": "3.0.0",
@@ -22160,14 +22586,14 @@
       }
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
     },
     "immer": {
-      "version": "9.0.15",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
-      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ=="
+      "version": "9.0.19",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
+      "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ=="
     },
     "import-fresh": {
       "version": "3.3.0",
@@ -22219,28 +22645,21 @@
       "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==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.4.tgz",
+      "integrity": "sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==",
       "requires": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.1.3",
         "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==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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=="
-        }
+        "@stencil/core": "^2.18.0"
       }
     },
     "ipaddr.js": {
@@ -22248,6 +22667,25 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
       "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng=="
     },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-array-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.1.tgz",
+      "integrity": "sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-typed-array": "^1.1.10"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -22279,14 +22717,14 @@
       }
     },
     "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=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "requires": {
         "has": "^1.0.3"
       }
@@ -22327,6 +22765,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg=="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -22355,6 +22798,11 @@
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="
     },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ=="
+    },
     "is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -22384,6 +22832,11 @@
       "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
       "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg=="
     },
+    "is-set": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g=="
+    },
     "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",
@@ -22413,11 +22866,28 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
+    "is-weakmap": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA=="
+    },
     "is-weakref": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -22426,6 +22896,15 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-weakset": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
+      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -22435,9 +22914,9 @@
       }
     },
     "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
     },
     "isexe": {
       "version": "2.0.0",
@@ -22450,9 +22929,9 @@
       "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==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
       "requires": {
         "@babel/core": "^7.12.3",
         "@babel/parser": "^7.14.7",
@@ -23184,9 +23663,9 @@
       }
     },
     "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=="
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w=="
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -23670,9 +24149,9 @@
           }
         },
         "@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==",
+          "version": "17.0.20",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.20.tgz",
+          "integrity": "sha512-eknWrTHofQuPk2iuqDm1waA7V6xPlbgBoaaXEgYkClhLOnB0TtbW+srJaOToAgawPxPlHQzwypFA2bhZaUGP5A==",
           "requires": {
             "@types/yargs-parser": "*"
           }
@@ -23945,6 +24424,11 @@
         }
       }
     },
+    "js-sdsl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
+      "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -24019,9 +24503,9 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
     "json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -24038,12 +24522,12 @@
       "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==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
+      "integrity": "sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==",
       "requires": {
         "array-includes": "^3.1.5",
-        "object.assign": "^4.1.2"
+        "object.assign": "^4.1.3"
       }
     },
     "kind-of": {
@@ -24057,9 +24541,9 @@
       "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=="
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
     },
     "language-subtag-registry": {
       "version": "0.3.22",
@@ -24104,9 +24588,9 @@
       "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==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -24168,11 +24652,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "requires": {
-        "yallist": "^4.0.0"
+        "yallist": "^3.0.2"
       }
     },
     "magic-string": {
@@ -24217,9 +24701,9 @@
       "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==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz",
+      "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==",
       "requires": {
         "fs-monkey": "^1.0.3"
       }
@@ -24277,17 +24761,17 @@
       "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==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz",
+      "integrity": "sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==",
       "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==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -24335,9 +24819,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
     },
     "mkdirp": {
       "version": "0.5.6",
@@ -24371,6 +24855,11 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -24401,9 +24890,9 @@
       "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=="
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
+      "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A=="
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -24437,9 +24926,9 @@
       }
     },
     "nwsapi": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
-      "integrity": "sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg=="
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
+      "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -24452,9 +24941,18 @@
       "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=="
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
+    },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
     },
     "object-keys": {
       "version": "1.1.1",
@@ -24462,64 +24960,64 @@
       "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==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "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==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
+      "integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "object.fromentries": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
-      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
+      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "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==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.5.tgz",
+      "integrity": "sha512-yDNzckpM6ntyQiGTik1fKV1DcVDRS+w8bvpWNCBanvH5LfRX9O8WTHqQzG4RZwRAM4I0oU7TV11Lj5v0g20ibw==",
       "requires": {
-        "array.prototype.reduce": "^1.0.4",
+        "array.prototype.reduce": "^1.0.5",
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.1"
+        "es-abstract": "^1.20.4"
       }
     },
     "object.hasown": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
-      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
+      "integrity": "sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==",
       "requires": {
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "object.values": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "obuf": {
@@ -24803,9 +25301,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -24878,11 +25376,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
       "requires": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       }
     },
@@ -24895,9 +25393,9 @@
       }
     },
     "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==",
+      "version": "12.1.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz",
+      "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==",
       "requires": {
         "postcss-value-parser": "^4.2.0"
       }
@@ -25056,20 +25554,20 @@
       "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==",
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
       "requires": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.0"
+        "stylehacks": "^5.1.1"
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.3.tgz",
+      "integrity": "sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^3.1.0",
         "postcss-selector-parser": "^6.0.5"
@@ -25094,11 +25592,11 @@
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "cssnano-utils": "^3.1.0",
         "postcss-value-parser": "^4.2.0"
       }
@@ -25143,17 +25641,17 @@
       }
     },
     "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==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "requires": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       }
     },
     "postcss-nesting": {
-      "version": "10.1.10",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.10.tgz",
-      "integrity": "sha512-lqd7LXCq0gWc0wKXtoKDru5wEUNjm3OryLVNRZ8OnW8km6fSNUuFrjEhU3nklxXE2jvd4qrox566acgh+xQt8w==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
+      "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==",
       "requires": {
         "@csstools/selector-specificity": "^2.0.0",
         "postcss-selector-parser": "^6.0.10"
@@ -25215,11 +25713,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       }
     },
@@ -25241,9 +25739,9 @@
       }
     },
     "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=="
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz",
+      "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A=="
     },
     "postcss-ordered-values": {
       "version": "5.1.3",
@@ -25276,56 +25774,58 @@
       }
     },
     "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",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz",
+      "integrity": "sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==",
+      "requires": {
+        "@csstools/postcss-cascade-layers": "^1.1.1",
+        "@csstools/postcss-color-function": "^1.1.1",
+        "@csstools/postcss-font-format-keywords": "^1.0.1",
+        "@csstools/postcss-hwb-function": "^1.0.2",
+        "@csstools/postcss-ic-unit": "^1.0.1",
+        "@csstools/postcss-is-pseudo-class": "^2.0.7",
+        "@csstools/postcss-nested-calc": "^1.0.0",
+        "@csstools/postcss-normalize-display-values": "^1.0.1",
+        "@csstools/postcss-oklab-function": "^1.1.1",
         "@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",
+        "@csstools/postcss-stepped-value-functions": "^1.0.1",
+        "@csstools/postcss-text-decoration-shorthand": "^1.0.0",
+        "@csstools/postcss-trigonometric-functions": "^1.0.2",
+        "@csstools/postcss-unset-value": "^1.0.2",
+        "autoprefixer": "^10.4.13",
+        "browserslist": "^4.21.4",
         "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",
+        "cssdb": "^7.1.0",
+        "postcss-attribute-case-insensitive": "^5.0.2",
         "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^4.2.3",
+        "postcss-color-functional-notation": "^4.2.4",
         "postcss-color-hex-alpha": "^8.0.4",
-        "postcss-color-rebeccapurple": "^7.1.0",
+        "postcss-color-rebeccapurple": "^7.1.1",
         "postcss-custom-media": "^8.0.2",
-        "postcss-custom-properties": "^12.1.8",
+        "postcss-custom-properties": "^12.1.10",
         "postcss-custom-selectors": "^6.0.3",
-        "postcss-dir-pseudo-class": "^6.0.4",
-        "postcss-double-position-gradients": "^3.1.1",
+        "postcss-dir-pseudo-class": "^6.0.5",
+        "postcss-double-position-gradients": "^3.1.2",
         "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-gap-properties": "^3.0.5",
+        "postcss-image-set-function": "^4.0.7",
         "postcss-initial": "^4.0.1",
-        "postcss-lab-function": "^4.2.0",
+        "postcss-lab-function": "^4.2.1",
         "postcss-logical": "^5.0.4",
         "postcss-media-minmax": "^5.0.0",
-        "postcss-nesting": "^10.1.9",
+        "postcss-nesting": "^10.2.0",
         "postcss-opacity-percentage": "^1.1.2",
-        "postcss-overflow-shorthand": "^3.0.3",
+        "postcss-overflow-shorthand": "^3.0.4",
         "postcss-page-break": "^3.0.4",
-        "postcss-place": "^7.0.4",
-        "postcss-pseudo-class-any-link": "^7.1.5",
+        "postcss-place": "^7.0.5",
+        "postcss-pseudo-class-any-link": "^7.1.6",
         "postcss-replace-overflow-wrap": "^4.0.0",
-        "postcss-selector-not": "^6.0.0",
+        "postcss-selector-not": "^6.0.1",
         "postcss-value-parser": "^4.2.0"
       }
     },
@@ -25338,11 +25838,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.1.tgz",
+      "integrity": "sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0"
       }
     },
@@ -25368,9 +25868,9 @@
       }
     },
     "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==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -25480,9 +25980,9 @@
       "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==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
+      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
       "requires": {
         "asap": "~2.0.6"
       }
@@ -25535,9 +26035,9 @@
       "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=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
     },
     "q": {
       "version": "1.5.1",
@@ -25545,13 +26045,18 @@
       "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==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "requires": {
         "side-channel": "^1.0.4"
       }
     },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -25702,9 +26207,9 @@
           "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=="
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+          "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw=="
         },
         "supports-color": {
           "version": "7.2.0",
@@ -25822,21 +26327,11 @@
       }
     },
     "recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "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"
-          }
-        }
+        "minimatch": "^3.0.5"
       }
     },
     "regenerate": {
@@ -25845,22 +26340,22 @@
       "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==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "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=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz",
-      "integrity": "sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==",
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
       "requires": {
         "@babel/runtime": "^7.8.4"
       }
@@ -25886,27 +26381,27 @@
       "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==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz",
+      "integrity": "sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==",
       "requires": {
         "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.0.1",
-        "regjsgen": "^0.6.0",
-        "regjsparser": "^0.8.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsgen": "^0.7.1",
+        "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.0.0"
+        "unicode-match-property-value-ecmascript": "^2.1.0"
       }
     },
     "regjsgen": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
-      "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA=="
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.7.1.tgz",
+      "integrity": "sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA=="
     },
     "regjsparser": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
-      "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "requires": {
         "jsesc": "~0.5.0"
       },
@@ -26007,9 +26502,9 @@
       }
     },
     "resolve.exports": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
-      "integrity": "sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
+      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ=="
     },
     "retry": {
       "version": "0.13.1",
@@ -26030,9 +26525,9 @@
       }
     },
     "rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -26090,9 +26585,19 @@
       }
     },
     "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=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
     },
     "safer-buffer": {
       "version": "2.1.2",
@@ -26150,19 +26655,34 @@
       "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==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
+      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
       "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==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
       "requires": {
         "lru-cache": "^6.0.0"
+      },
+      "dependencies": {
+        "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"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
       }
     },
     "send": {
@@ -26208,9 +26728,9 @@
       }
     },
     "serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "requires": {
         "randombytes": "^2.1.0"
       }
@@ -26305,9 +26825,9 @@
       "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=="
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
+      "integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw=="
     },
     "side-channel": {
       "version": "1.0.4",
@@ -26360,9 +26880,9 @@
       "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==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
+      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
       "requires": {
         "abab": "^2.0.5",
         "iconv-lite": "^0.6.3",
@@ -26426,9 +26946,9 @@
       "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==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
       "requires": {
         "escape-string-regexp": "^2.0.0"
       },
@@ -26450,19 +26970,20 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
+    "stop-iteration-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
+      "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
+      "requires": {
+        "internal-slot": "^1.0.4"
+      }
+    },
     "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": {
@@ -26497,38 +27018,38 @@
       }
     },
     "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==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1",
-        "get-intrinsic": "^1.1.1",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
-        "regexp.prototype.flags": "^1.4.1",
+        "regexp.prototype.flags": "^1.4.3",
         "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "stringify-object": {
@@ -26575,11 +27096,11 @@
       "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-selector-parser": "^6.0.4"
       }
     },
@@ -26592,9 +27113,9 @@
       }
     },
     "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==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "requires": {
         "has-flag": "^4.0.0",
         "supports-color": "^7.0.0"
@@ -26702,9 +27223,9 @@
       "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==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
+      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
       "requires": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -26712,18 +27233,19 @@
         "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.5",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.18",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
+        "postcss-nested": "6.0.0",
         "postcss-selector-parser": "^6.0.10",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
@@ -26775,9 +27297,9 @@
       }
     },
     "terser": {
-      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "version": "5.16.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.2.tgz",
+      "integrity": "sha512-JKuM+KvvWVqT7muHVyrwv7FVRPnmHDwF6XwoIxdbF5Witi0vu99RYpxDexpJndXt3jbZZmmWr2/mQa6HvSNdSg==",
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -26793,15 +27315,15 @@
       }
     },
     "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==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz",
+      "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==",
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "terser": "^5.14.1"
       }
     },
     "test-exclude": {
@@ -26820,9 +27342,9 @@
       "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=="
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
+      "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ=="
     },
     "thunky": {
       "version": "1.1.0",
@@ -26853,19 +27375,20 @@
       "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==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
+      "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
       "requires": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
       },
       "dependencies": {
         "universalify": {
-          "version": "0.1.2",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+          "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg=="
         }
       }
     },
@@ -26894,9 +27417,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -26909,9 +27432,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "tsutils": {
       "version": "3.21.0",
@@ -26955,6 +27478,16 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -26964,9 +27497,9 @@
       }
     },
     "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ=="
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
     },
     "unbox-primitive": {
       "version": "1.0.2",
@@ -26994,14 +27527,14 @@
       }
     },
     "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=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA=="
     },
     "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=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
     },
     "unique-string": {
       "version": "2.0.0",
@@ -27032,9 +27565,9 @@
       "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==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
+      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -27048,6 +27581,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -27079,11 +27621,6 @@
       "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",
@@ -27151,9 +27688,9 @@
       "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
     },
     "webpack": {
-      "version": "5.74.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
-      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "version": "5.75.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
+      "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -27215,9 +27752,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -27252,9 +27789,9 @@
       }
     },
     "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==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
+      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
       "requires": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -27279,7 +27816,7 @@
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.1",
+        "selfsigned": "^2.1.1",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
@@ -27288,9 +27825,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -27323,9 +27860,9 @@
           }
         },
         "ws": {
-          "version": "8.8.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
-          "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA=="
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
+          "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig=="
         }
       }
     },
@@ -27432,32 +27969,56 @@
         "is-symbol": "^1.0.3"
       }
     },
+    "which-collection": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
+      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "requires": {
+        "is-map": "^2.0.1",
+        "is-set": "^2.0.1",
+        "is-weakmap": "^2.0.1",
+        "is-weakset": "^2.0.1"
+      }
+    },
+    "which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz",
+      "integrity": "sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==",
       "requires": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz",
+      "integrity": "sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "workbox-build": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.3.tgz",
-      "integrity": "sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.4.tgz",
+      "integrity": "sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==",
       "requires": {
         "@apideck/better-ajv-errors": "^0.3.1",
         "@babel/core": "^7.11.1",
@@ -27481,27 +28042,27 @@
         "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"
+        "workbox-background-sync": "6.5.4",
+        "workbox-broadcast-update": "6.5.4",
+        "workbox-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-google-analytics": "6.5.4",
+        "workbox-navigation-preload": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-range-requests": "6.5.4",
+        "workbox-recipes": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4",
+        "workbox-streams": "6.5.4",
+        "workbox-sw": "6.5.4",
+        "workbox-window": "6.5.4"
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -27559,117 +28120,117 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz",
+      "integrity": "sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.4.tgz",
+      "integrity": "sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q=="
     },
     "workbox-expiration": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.3.tgz",
-      "integrity": "sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.4.tgz",
+      "integrity": "sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==",
       "requires": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz",
+      "integrity": "sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==",
       "requires": {
-        "workbox-background-sync": "6.5.3",
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-background-sync": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz",
+      "integrity": "sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.4.tgz",
+      "integrity": "sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==",
       "requires": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz",
+      "integrity": "sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "workbox-recipes": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.3.tgz",
-      "integrity": "sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.4.tgz",
+      "integrity": "sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==",
       "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-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.4.tgz",
+      "integrity": "sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "workbox-strategies": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.3.tgz",
-      "integrity": "sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.4.tgz",
+      "integrity": "sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.4.tgz",
+      "integrity": "sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==",
       "requires": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.4.tgz",
+      "integrity": "sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA=="
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz",
+      "integrity": "sha512-LmWm/zoaahe0EGmMTrSLUi+BjyR3cdGEfU3fS6PN1zKFYbqAKuQ+Oy/27e4VSXsyIwAw8+QDfk1XHNGtZu9nQg==",
       "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"
+        "workbox-build": "6.5.4"
       },
       "dependencies": {
         "source-map": {
@@ -27689,12 +28250,12 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.4.tgz",
+      "integrity": "sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==",
       "requires": {
         "@types/trusted-types": "^2.0.2",
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "wrap-ansi": {
@@ -27772,9 +28333,9 @@
       "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=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index 530c529ee9a..c3c2c1163bc 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "6.4.2-dev.11673981545.1e612253",
+    "@ionic/react": "^7.0.0-beta.0",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index a3c9968e5ba..6b549b79af5 100644
--- a/static/code/stackblitz/v7/vue/package-lock.json
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -8,7 +8,7 @@
       "name": "vite-vue-starter",
       "version": "0.0.0",
       "dependencies": {
-        "@ionic/vue": "^6.3.2",
+        "@ionic/vue": "^7.0.0-beta.0",
         "vue": "^3.2.25",
         "vue-router": "4.0.13"
       },
@@ -20,9 +20,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.13.tgz",
+      "integrity": "sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -30,29 +30,45 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
+      "integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@ionic/core": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
-      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
+      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "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==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-beta.0.tgz",
+      "integrity": "sha512-h4ppWoDIYTqfD1OOcBcwqxxurYYGMktYAkzOKW/JmAfFPKslgLhZdCuUg1c0+3d5bmmanCHJ1Y7wd4K+QKX20w==",
       "dependencies": {
-        "@ionic/core": "^6.3.2",
-        "ionicons": "^6.0.2"
+        "@ionic/core": "7.0.0-beta.0",
+        "ionicons": "^6.1.1"
       }
     },
     "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==",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -62,9 +78,9 @@
       }
     },
     "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==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
+      "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0"
@@ -116,36 +132,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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
+      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.37",
+        "@vue/shared": "3.2.45",
         "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
+      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
+      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
       "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",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/compiler-ssr": "3.2.45",
+        "@vue/reactivity-transform": "3.2.45",
+        "@vue/shared": "3.2.45",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -153,84 +169,84 @@
       }
     },
     "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
+      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "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=="
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
+      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
       "dependencies": {
-        "@vue/shared": "3.2.37"
+        "@vue/shared": "3.2.45"
       }
     },
     "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
+      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45",
         "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
+      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
       "dependencies": {
-        "@vue/reactivity": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/reactivity": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
+      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/runtime-core": "3.2.45",
+        "@vue/shared": "3.2.45",
         "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
+      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-ssr": "3.2.45",
+        "@vue/shared": "3.2.45"
       },
       "peerDependencies": {
-        "vue": "3.2.37"
+        "vue": "3.2.45"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.37",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
-      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
+      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
     },
     "node_modules/csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "node_modules/esbuild": {
-      "version": "0.14.50",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.50.tgz",
-      "integrity": "sha512-SbC3k35Ih2IC6trhbMYW7hYeGdjPKf9atTKwBUHqMCYFZZ9z8zhuvfnZihsnJypl74FjiAKjBRqFkBkAd0rS/w==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
+      "integrity": "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -240,32 +256,33 @@
         "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"
+        "@esbuild/linux-loong64": "0.14.54",
+        "esbuild-android-64": "0.14.54",
+        "esbuild-android-arm64": "0.14.54",
+        "esbuild-darwin-64": "0.14.54",
+        "esbuild-darwin-arm64": "0.14.54",
+        "esbuild-freebsd-64": "0.14.54",
+        "esbuild-freebsd-arm64": "0.14.54",
+        "esbuild-linux-32": "0.14.54",
+        "esbuild-linux-64": "0.14.54",
+        "esbuild-linux-arm": "0.14.54",
+        "esbuild-linux-arm64": "0.14.54",
+        "esbuild-linux-mips64le": "0.14.54",
+        "esbuild-linux-ppc64le": "0.14.54",
+        "esbuild-linux-riscv64": "0.14.54",
+        "esbuild-linux-s390x": "0.14.54",
+        "esbuild-netbsd-64": "0.14.54",
+        "esbuild-openbsd-64": "0.14.54",
+        "esbuild-sunos-64": "0.14.54",
+        "esbuild-windows-32": "0.14.54",
+        "esbuild-windows-64": "0.14.54",
+        "esbuild-windows-arm64": "0.14.54"
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
+      "integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
       "cpu": [
         "x64"
       ],
@@ -279,9 +296,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
+      "integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
       "cpu": [
         "arm64"
       ],
@@ -295,9 +312,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
+      "integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
       "cpu": [
         "x64"
       ],
@@ -311,9 +328,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
+      "integrity": "sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==",
       "cpu": [
         "arm64"
       ],
@@ -327,9 +344,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
+      "integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
       "cpu": [
         "x64"
       ],
@@ -343,9 +360,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
+      "integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
       "cpu": [
         "arm64"
       ],
@@ -359,9 +376,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
+      "integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
       "cpu": [
         "ia32"
       ],
@@ -375,9 +392,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
       "cpu": [
         "x64"
       ],
@@ -391,9 +408,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
+      "integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
       "cpu": [
         "arm"
       ],
@@ -407,9 +424,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
+      "integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
       "cpu": [
         "arm64"
       ],
@@ -423,9 +440,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
+      "integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
       "cpu": [
         "mips64el"
       ],
@@ -439,9 +456,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
+      "integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
       "cpu": [
         "ppc64"
       ],
@@ -455,9 +472,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
+      "integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
       "cpu": [
         "riscv64"
       ],
@@ -471,9 +488,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
+      "integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
       "cpu": [
         "s390x"
       ],
@@ -487,9 +504,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
+      "integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
       "cpu": [
         "x64"
       ],
@@ -503,9 +520,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
+      "integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
       "cpu": [
         "x64"
       ],
@@ -519,9 +536,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
+      "integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
       "cpu": [
         "x64"
       ],
@@ -535,9 +552,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
+      "integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
       "cpu": [
         "ia32"
       ],
@@ -551,9 +568,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
+      "integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
       "cpu": [
         "x64"
       ],
@@ -567,9 +584,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
+      "integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
       "cpu": [
         "arm64"
       ],
@@ -620,29 +637,17 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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"
+        "@stencil/core": "^2.18.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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dev": true,
       "dependencies": {
         "has": "^1.0.3"
@@ -682,9 +687,9 @@
       "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==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "funding": [
         {
           "type": "opencollective",
@@ -722,9 +727,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.77.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.3.tgz",
+      "integrity": "sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -755,7 +760,8 @@
     "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=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
@@ -770,14 +776,14 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -788,15 +794,15 @@
       }
     },
     "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==",
+      "version": "2.9.15",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
+      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
         "postcss": "^8.4.13",
         "resolve": "^1.22.0",
-        "rollup": "^2.59.0"
+        "rollup": ">=2.59.0 <2.78.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -825,15 +831,15 @@
       }
     },
     "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
+      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
       "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"
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/compiler-sfc": "3.2.45",
+        "@vue/runtime-dom": "3.2.45",
+        "@vue/server-renderer": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "node_modules/vue-router": {
@@ -868,38 +874,45 @@
   },
   "dependencies": {
     "@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.13.tgz",
+      "integrity": "sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw=="
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
+      "integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
+      "dev": true,
+      "optional": true
     },
     "@ionic/core": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
-      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
+      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
       "requires": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "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==",
+      "version": "7.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-beta.0.tgz",
+      "integrity": "sha512-h4ppWoDIYTqfD1OOcBcwqxxurYYGMktYAkzOKW/JmAfFPKslgLhZdCuUg1c0+3d5bmmanCHJ1Y7wd4K+QKX20w==",
       "requires": {
-        "@ionic/core": "^6.3.2",
-        "ionicons": "^6.0.2"
+        "@ionic/core": "7.0.0-beta.0",
+        "ionicons": "^6.1.1"
       }
     },
     "@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=="
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
     },
     "@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==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
+      "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
       "dev": true
     },
     "@volar/code-gen": {
@@ -944,36 +957,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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
+      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.37",
+        "@vue/shared": "3.2.45",
         "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
+      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
       "requires": {
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "@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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
+      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
       "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",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/compiler-ssr": "3.2.45",
+        "@vue/reactivity-transform": "3.2.45",
+        "@vue/shared": "3.2.45",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -981,242 +994,243 @@
       }
     },
     "@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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
+      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
       "requires": {
-        "@vue/compiler-dom": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-dom": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "@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=="
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
+      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
       "requires": {
-        "@vue/shared": "3.2.37"
+        "@vue/shared": "3.2.45"
       }
     },
     "@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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
+      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/compiler-core": "3.2.45",
+        "@vue/shared": "3.2.45",
         "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
+      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
       "requires": {
-        "@vue/reactivity": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/reactivity": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "@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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
+      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
       "requires": {
-        "@vue/runtime-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/runtime-core": "3.2.45",
+        "@vue/shared": "3.2.45",
         "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==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
+      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-ssr": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "@vue/shared": {
-      "version": "3.2.37",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
-      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
+      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
     },
     "csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "esbuild": {
-      "version": "0.14.50",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.50.tgz",
-      "integrity": "sha512-SbC3k35Ih2IC6trhbMYW7hYeGdjPKf9atTKwBUHqMCYFZZ9z8zhuvfnZihsnJypl74FjiAKjBRqFkBkAd0rS/w==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
+      "integrity": "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==",
       "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/linux-loong64": "0.14.54",
+        "esbuild-android-64": "0.14.54",
+        "esbuild-android-arm64": "0.14.54",
+        "esbuild-darwin-64": "0.14.54",
+        "esbuild-darwin-arm64": "0.14.54",
+        "esbuild-freebsd-64": "0.14.54",
+        "esbuild-freebsd-arm64": "0.14.54",
+        "esbuild-linux-32": "0.14.54",
+        "esbuild-linux-64": "0.14.54",
+        "esbuild-linux-arm": "0.14.54",
+        "esbuild-linux-arm64": "0.14.54",
+        "esbuild-linux-mips64le": "0.14.54",
+        "esbuild-linux-ppc64le": "0.14.54",
+        "esbuild-linux-riscv64": "0.14.54",
+        "esbuild-linux-s390x": "0.14.54",
+        "esbuild-netbsd-64": "0.14.54",
+        "esbuild-openbsd-64": "0.14.54",
+        "esbuild-sunos-64": "0.14.54",
+        "esbuild-windows-32": "0.14.54",
+        "esbuild-windows-64": "0.14.54",
+        "esbuild-windows-arm64": "0.14.54"
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
+      "integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
+      "integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
+      "integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
+      "integrity": "sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
+      "integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
+      "integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
+      "integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
+      "integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
+      "integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
+      "integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
+      "integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
+      "integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
+      "integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
+      "integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
+      "integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
+      "integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
+      "integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
+      "integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
+      "integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
       "dev": true,
       "optional": true
     },
@@ -1248,24 +1262,17 @@
       }
     },
     "ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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=="
-        }
+        "@stencil/core": "^2.18.0"
       }
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dev": true,
       "requires": {
         "has": "^1.0.3"
@@ -1296,9 +1303,9 @@
       "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==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -1317,9 +1324,9 @@
       }
     },
     "rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.77.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.3.tgz",
+      "integrity": "sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -1347,39 +1354,39 @@
       "dev": true
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "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==",
+      "version": "2.9.15",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
+      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.27",
         "fsevents": "~2.3.2",
         "postcss": "^8.4.13",
         "resolve": "^1.22.0",
-        "rollup": "^2.59.0"
+        "rollup": ">=2.59.0 <2.78.0"
       }
     },
     "vue": {
-      "version": "3.2.37",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
-      "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
+      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
       "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/compiler-dom": "3.2.45",
+        "@vue/compiler-sfc": "3.2.45",
+        "@vue/runtime-dom": "3.2.45",
+        "@vue/server-renderer": "3.2.45",
+        "@vue/shared": "3.2.45"
       }
     },
     "vue-router": {
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index da362e2f544..f3953eb8d5d 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,14 +8,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "6.4.2-dev.11673981545.1e612253",
+    "@ionic/vue": "^7.0.0-beta.0",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
-    "vite": "^2.9.9",
     "typescript": "^4.5.4",
+    "vite": "^2.9.9",
     "vue-tsc": "^0.34.7"
   }
 }
diff --git a/static/usage/v7/input/basic/demo.html b/static/usage/v7/input/basic/demo.html
index 6fbf30ae506..c510bdbe5f5 100644
--- a/static/usage/v7/input/basic/demo.html
+++ b/static/usage/v7/input/basic/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/clear/demo.html b/static/usage/v7/input/clear/demo.html
index 65f7ee30743..8b8816ed3dd 100644
--- a/static/usage/v7/input/clear/demo.html
+++ b/static/usage/v7/input/clear/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/counter/demo.html b/static/usage/v7/input/counter/demo.html
index 204f37c8e69..a2d782d3e3d 100644
--- a/static/usage/v7/input/counter/demo.html
+++ b/static/usage/v7/input/counter/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
index 6684554b0d0..8a710fd79b2 100644
--- a/static/usage/v7/input/fill/demo.html
+++ b/static/usage/v7/input/fill/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
index 713540e37aa..a22a6be90a4 100644
--- a/static/usage/v7/input/helper-error/demo.html
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     .container ion-input {
       width: 300px;
diff --git a/static/usage/v7/input/labels/demo.html b/static/usage/v7/input/labels/demo.html
index 9ca4acb3489..fae6d6ff849 100644
--- a/static/usage/v7/input/labels/demo.html
+++ b/static/usage/v7/input/labels/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/theming/colors/demo.html b/static/usage/v7/input/theming/colors/demo.html
index 22ef19e38d7..379dbae3746 100644
--- a/static/usage/v7/input/theming/colors/demo.html
+++ b/static/usage/v7/input/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
index 59ac7cbfa0f..660be60fee9 100644
--- a/static/usage/v7/input/theming/css-properties/demo.html
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html
index 32c268b67cf..e38f604302d 100644
--- a/static/usage/v7/input/types/demo.html
+++ b/static/usage/v7/input/types/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/select/basic/multiple-selection/demo.html b/static/usage/v7/select/basic/multiple-selection/demo.html
index ed6a32d120a..91d1f6ad230 100644
--- a/static/usage/v7/select/basic/multiple-selection/demo.html
+++ b/static/usage/v7/select/basic/multiple-selection/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/basic/responding-to-interaction/demo.html b/static/usage/v7/select/basic/responding-to-interaction/demo.html
index 51afc1bdf56..60ca694af44 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/demo.html
+++ b/static/usage/v7/select/basic/responding-to-interaction/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     #log {
diff --git a/static/usage/v7/select/basic/single-selection/demo.html b/static/usage/v7/select/basic/single-selection/demo.html
index 1bcb1c75cd4..29730f22166 100644
--- a/static/usage/v7/select/basic/single-selection/demo.html
+++ b/static/usage/v7/select/basic/single-selection/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/customization/button-text/demo.html b/static/usage/v7/select/customization/button-text/demo.html
index a397d72997d..63a6c4c87e6 100644
--- a/static/usage/v7/select/customization/button-text/demo.html
+++ b/static/usage/v7/select/customization/button-text/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/customization/interface-options/demo.html b/static/usage/v7/select/customization/interface-options/demo.html
index d0df8cb5286..6a9428dc885 100644
--- a/static/usage/v7/select/customization/interface-options/demo.html
+++ b/static/usage/v7/select/customization/interface-options/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
diff --git a/static/usage/v7/select/customization/styling-select/demo.html b/static/usage/v7/select/customization/styling-select/demo.html
index 16ed3957495..4c6ffa3a788 100644
--- a/static/usage/v7/select/customization/styling-select/demo.html
+++ b/static/usage/v7/select/customization/styling-select/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-select {
diff --git a/static/usage/v7/select/interfaces/action-sheet/demo.html b/static/usage/v7/select/interfaces/action-sheet/demo.html
index f096106989b..78447f2da4b 100644
--- a/static/usage/v7/select/interfaces/action-sheet/demo.html
+++ b/static/usage/v7/select/interfaces/action-sheet/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/interfaces/popover/demo.html b/static/usage/v7/select/interfaces/popover/demo.html
index 5398d677415..fbe0e7097a1 100644
--- a/static/usage/v7/select/interfaces/popover/demo.html
+++ b/static/usage/v7/select/interfaces/popover/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/justify/demo.html b/static/usage/v7/select/justify/demo.html
index 8c80c5564ca..80e1c10bbfe 100644
--- a/static/usage/v7/select/justify/demo.html
+++ b/static/usage/v7/select/justify/demo.html
@@ -7,8 +7,8 @@
   <title>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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/select/labels/demo.html b/static/usage/v7/select/labels/demo.html
index 24cdce8375d..3a5ac6d0ab0 100644
--- a/static/usage/v7/select/labels/demo.html
+++ b/static/usage/v7/select/labels/demo.html
@@ -7,8 +7,8 @@
   <title>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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
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
index 745f7224a80..7a46acbc1ac 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
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
index 8dd2785043e..63debebf56c 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html
index 3c892c6675d..d95ef6182a8 100644
--- a/static/usage/v7/toast/buttons/demo.html
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/toast/icon/demo.html b/static/usage/v7/toast/icon/demo.html
index d79c31c9e78..1a8ab774fb7 100644
--- a/static/usage/v7/toast/icon/demo.html
+++ b/static/usage/v7/toast/icon/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/inline/basic/demo.html b/static/usage/v7/toast/inline/basic/demo.html
index d7955e72e47..68f25b87d95 100644
--- a/static/usage/v7/toast/inline/basic/demo.html
+++ b/static/usage/v7/toast/inline/basic/demo.html
@@ -7,8 +7,8 @@
   <title>Toast | 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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/inline/is-open/demo.html b/static/usage/v7/toast/inline/is-open/demo.html
index 5e5446f0dfc..fb8ce3c2d2d 100644
--- a/static/usage/v7/toast/inline/is-open/demo.html
+++ b/static/usage/v7/toast/inline/is-open/demo.html
@@ -7,8 +7,8 @@
   <title>Toast | 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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html
index ea381113f73..84edd702e3a 100644
--- a/static/usage/v7/toast/theming/demo.html
+++ b/static/usage/v7/toast/theming/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-toast.custom-toast {
diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html
index 9ba3a5598d2..f6b5c53dbf6 100644
--- a/static/usage/v7/toggle/basic/demo.html
+++ b/static/usage/v7/toggle/basic/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html
index fb293995615..f8876f9a437 100644
--- a/static/usage/v7/toggle/justify/demo.html
+++ b/static/usage/v7/toggle/justify/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html
index 843127abf4d..af8592022ee 100644
--- a/static/usage/v7/toggle/label-placement/demo.html
+++ b/static/usage/v7/toggle/label-placement/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html
index a069d2925f6..af82a401834 100644
--- a/static/usage/v7/toggle/list/demo.html
+++ b/static/usage/v7/toggle/list/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
 </head>
   <body>
diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html
index e6ba32f8b05..d43dd0879c8 100644
--- a/static/usage/v7/toggle/on-off/demo.html
+++ b/static/usage/v7/toggle/on-off/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toggle/theming/colors/demo.html b/static/usage/v7/toggle/theming/colors/demo.html
index e65d3ea1c0a..c70545cfdbf 100644
--- a/static/usage/v7/toggle/theming/colors/demo.html
+++ b/static/usage/v7/toggle/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html
index 474a0d145c4..32c2f939a98 100644
--- a/static/usage/v7/toggle/theming/css-properties/demo.html
+++ b/static/usage/v7/toggle/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     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
index e49bb4e9546..19634b29acf 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-toggle {

From c3327ce6bd59a0d38c993cfd856a9d99f2911604 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 15:28:17 -0500
Subject: [PATCH 186/469] docs(input, select): make headings consistent (#2747)

---
 docs/api/input.md                                        | 8 ++++----
 docs/api/select.md                                       | 9 ++++-----
 .../v7/input/{labels => label-placement}/angular.md      | 0
 .../usage/v7/input/{labels => label-placement}/demo.html | 0
 .../usage/v7/input/{labels => label-placement}/index.md  | 2 +-
 .../v7/input/{labels => label-placement}/javascript.md   | 0
 .../usage/v7/input/{labels => label-placement}/react.md  | 0
 static/usage/v7/input/{labels => label-placement}/vue.md | 0
 .../v7/select/{labels => label-placement}/angular.md     | 0
 .../v7/select/{labels => label-placement}/demo.html      | 0
 .../usage/v7/select/{labels => label-placement}/index.md | 2 +-
 .../v7/select/{labels => label-placement}/javascript.md  | 0
 .../usage/v7/select/{labels => label-placement}/react.md | 0
 .../usage/v7/select/{labels => label-placement}/vue.md   | 0
 14 files changed, 10 insertions(+), 11 deletions(-)
 rename static/usage/v7/input/{labels => label-placement}/angular.md (100%)
 rename static/usage/v7/input/{labels => label-placement}/demo.html (100%)
 rename static/usage/v7/input/{labels => label-placement}/index.md (80%)
 rename static/usage/v7/input/{labels => label-placement}/javascript.md (100%)
 rename static/usage/v7/input/{labels => label-placement}/react.md (100%)
 rename static/usage/v7/input/{labels => label-placement}/vue.md (100%)
 rename static/usage/v7/select/{labels => label-placement}/angular.md (100%)
 rename static/usage/v7/select/{labels => label-placement}/demo.html (100%)
 rename static/usage/v7/select/{labels => label-placement}/index.md (80%)
 rename static/usage/v7/select/{labels => label-placement}/javascript.md (100%)
 rename static/usage/v7/select/{labels => label-placement}/react.md (100%)
 rename static/usage/v7/select/{labels => label-placement}/vue.md (100%)

diff --git a/docs/api/input.md b/docs/api/input.md
index cd18b0f61e2..040c3c2a7a8 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -37,13 +37,13 @@ import Types from '@site/static/usage/v7/input/types/index.md';
 <Types />
 
 
-## Label Positioning
+## Label Placement
 
-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.
+Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
-import Labels from '@site/static/usage/v7/input/labels/index.md';
+import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
 
-<Labels />
+<LabelPlacement />
 
 
 ## Clear Options
diff --git a/docs/api/select.md b/docs/api/select.md
index 047514ec039..1f3a5628a96 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -85,14 +85,13 @@ import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/selec
 <ObjectValuesAndMultipleSelectionExample />
   
 
-## Label Positioning
+## Label Placement
 
-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.
+Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
-import LabelExample from '@site/static/usage/v7/select/labels/index.md';
+import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
 
-<LabelExample />
-  
+<LabelPlacement />
 
 ## Justification
   
diff --git a/static/usage/v7/input/labels/angular.md b/static/usage/v7/input/label-placement/angular.md
similarity index 100%
rename from static/usage/v7/input/labels/angular.md
rename to static/usage/v7/input/label-placement/angular.md
diff --git a/static/usage/v7/input/labels/demo.html b/static/usage/v7/input/label-placement/demo.html
similarity index 100%
rename from static/usage/v7/input/labels/demo.html
rename to static/usage/v7/input/label-placement/demo.html
diff --git a/static/usage/v7/input/labels/index.md b/static/usage/v7/input/label-placement/index.md
similarity index 80%
rename from static/usage/v7/input/labels/index.md
rename to static/usage/v7/input/label-placement/index.md
index cfe1967e733..ffc814dbec5 100644
--- a/static/usage/v7/input/labels/index.md
+++ b/static/usage/v7/input/label-placement/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/label-placement/demo.html" size="300px" />
diff --git a/static/usage/v7/input/labels/javascript.md b/static/usage/v7/input/label-placement/javascript.md
similarity index 100%
rename from static/usage/v7/input/labels/javascript.md
rename to static/usage/v7/input/label-placement/javascript.md
diff --git a/static/usage/v7/input/labels/react.md b/static/usage/v7/input/label-placement/react.md
similarity index 100%
rename from static/usage/v7/input/labels/react.md
rename to static/usage/v7/input/label-placement/react.md
diff --git a/static/usage/v7/input/labels/vue.md b/static/usage/v7/input/label-placement/vue.md
similarity index 100%
rename from static/usage/v7/input/labels/vue.md
rename to static/usage/v7/input/label-placement/vue.md
diff --git a/static/usage/v7/select/labels/angular.md b/static/usage/v7/select/label-placement/angular.md
similarity index 100%
rename from static/usage/v7/select/labels/angular.md
rename to static/usage/v7/select/label-placement/angular.md
diff --git a/static/usage/v7/select/labels/demo.html b/static/usage/v7/select/label-placement/demo.html
similarity index 100%
rename from static/usage/v7/select/labels/demo.html
rename to static/usage/v7/select/label-placement/demo.html
diff --git a/static/usage/v7/select/labels/index.md b/static/usage/v7/select/label-placement/index.md
similarity index 80%
rename from static/usage/v7/select/labels/index.md
rename to static/usage/v7/select/label-placement/index.md
index 502fbf3d973..9a32e0b3b61 100644
--- a/static/usage/v7/select/labels/index.md
+++ b/static/usage/v7/select/label-placement/index.md
@@ -5,4 +5,4 @@ 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/select/labels/demo.html" size="300px" />
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/select/label-placement/demo.html" size="300px" />
diff --git a/static/usage/v7/select/labels/javascript.md b/static/usage/v7/select/label-placement/javascript.md
similarity index 100%
rename from static/usage/v7/select/labels/javascript.md
rename to static/usage/v7/select/label-placement/javascript.md
diff --git a/static/usage/v7/select/labels/react.md b/static/usage/v7/select/label-placement/react.md
similarity index 100%
rename from static/usage/v7/select/labels/react.md
rename to static/usage/v7/select/label-placement/react.md
diff --git a/static/usage/v7/select/labels/vue.md b/static/usage/v7/select/label-placement/vue.md
similarity index 100%
rename from static/usage/v7/select/labels/vue.md
rename to static/usage/v7/select/label-placement/vue.md

From ea99339e1dbb05cc10c7c4fd38bd39854ad82451 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 15:33:42 -0500
Subject: [PATCH 187/469] docs(input, select): add note about migrating (#2745)

---
 docs/api/input.md  | 3 +--
 docs/api/select.md | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/api/input.md b/docs/api/input.md
index 040c3c2a7a8..4ffff02b114 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -105,8 +105,7 @@ import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.m
 
 A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience.
 
-While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
+Developers can perform this migration one input at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
 ### Using the Modern Syntax
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 1f3a5628a96..8f2036af923 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -182,7 +182,7 @@ interface SelectCustomEvent<T = any> extends CustomEvent {
 
 A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.
 
-While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
 
 ### Using the Modern Syntax

From 41aee02d7a6e1cdd47e655edc958abf4955d0197 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 15:34:41 -0500
Subject: [PATCH 188/469] feat(playground): usage targets are now optional
 (#2744)

---
 src/components/global/Playground/index.tsx | 41 ++++++++++++++++------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 441f0814a55..d4a6c27afdb 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -48,7 +48,7 @@ const ControlButton = ({
   return controlButton;
 };
 
-const CodeBlockButton = ({ language, usageTarget, setUsageTarget }) => {
+const CodeBlockButton = ({ language, usageTarget, setUsageTarget, disabled }) => {
   const langValue = UsageTarget[language];
   return (
     <ControlButton
@@ -58,6 +58,7 @@ const CodeBlockButton = ({ language, usageTarget, setUsageTarget }) => {
       }}
       title={`Show ${language} code`}
       label={language}
+      disabled={disabled}
     />
   );
 };
@@ -154,12 +155,22 @@ export default function Playground({
 
   const defaultMode = typeof mode !== 'undefined' ? mode : Mode.iOS;
 
+  const getDefaultUsageTarget = () => {
+    // If defined, Angular target should be the default
+    if (code[UsageTarget.Angular] !== undefined) {
+      return UsageTarget.Angular;
+    }
+
+    // Otherwise, default to the first target passed.
+    return Object.keys(code)[0];
+  }
+
   /**
    * Developers can set a predefined size
    * or an explicit pixel value.
    */
   const frameSize = FRAME_SIZES[size] || size;
-  const [usageTarget, setUsageTarget] = useState(UsageTarget.Angular);
+  const [usageTarget, setUsageTarget] = useState(getDefaultUsageTarget());
   const [ionicMode, setIonicMode] = useState(defaultMode);
   const [codeSnippets, setCodeSnippets] = useState({});
   const [renderIframes, setRenderIframes] = useState(false);
@@ -435,14 +446,24 @@ export default function Playground({
       <div className="playground__container">
         <div className="playground__control-toolbar">
           <div className="playground__control-group">
-            {sortedUsageTargets.map((lang) => (
-              <CodeBlockButton
-                key={`code-block-${lang}`}
-                language={lang}
-                usageTarget={usageTarget}
-                setUsageTarget={setUsageTarget}
-              />
-            ))}
+            {sortedUsageTargets.map((lang) => {
+
+              /**
+               * If code was not passed for this target
+               * then we should disable the button.
+               */
+              const langValue = UsageTarget[lang];
+              const hasCode = code[langValue] !== undefined;
+              return (
+                  <CodeBlockButton
+                  key={`code-block-${lang}`}
+                  language={lang}
+                  usageTarget={usageTarget}
+                  setUsageTarget={setUsageTarget}
+                  disabled={!hasCode}
+                />)
+              ;
+            })}
           </div>
           <div className="playground__control-group">
             <ControlButton

From c778988c1c48f4346692f82ee08576d5fefdc23a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 31 Jan 2023 15:37:29 -0500
Subject: [PATCH 189/469] docs(back-button): add component playgrounds (#2633)

Co-authored-by: amandaejohnston <amandaejohnston@users.noreply.github.com>
---
 docs/api/back-button.md                       |  336 +-
 .../stackblitz/v6/react/package-lock.json     | 4080 +++++++++--------
 static/code/stackblitz/v6/react/package.json  |    3 +
 .../code/stackblitz/v6/vue/package-lock.json  |  770 ++--
 static/code/stackblitz/v6/vue/package.json    |    1 +
 .../basic/angular/app_module_ts.md            |   20 +
 .../basic/angular/example_component_html.md   |    3 +
 .../basic/angular/example_component_ts.md     |   13 +
 .../basic/angular/page_one_component_ts.md    |   26 +
 .../basic/angular/page_two_component_ts.md    |   24 +
 static/usage/v6/back-button/basic/demo.html   |   64 +
 static/usage/v6/back-button/basic/index.md    |   49 +
 .../usage/v6/back-button/basic/javascript.md  |   48 +
 .../v6/back-button/basic/react/main_tsx.md    |   11 +
 .../back-button/basic/react/page_one_tsx.md   |   27 +
 .../back-button/basic/react/page_two_tsx.md   |   25 +
 .../v6/back-button/basic/vue/example_vue.md   |   19 +
 .../v6/back-button/basic/vue/page_one_vue.md  |   30 +
 .../v6/back-button/basic/vue/page_two_vue.md  |   24 +
 .../custom/angular/app_module_ts.md           |   20 +
 .../custom/angular/example_component_html.md  |    3 +
 .../custom/angular/example_component_ts.md    |   13 +
 .../custom/angular/page_one_component_ts.md   |   26 +
 .../custom/angular/page_two_component_ts.md   |   24 +
 static/usage/v6/back-button/custom/demo.html  |   64 +
 static/usage/v6/back-button/custom/index.md   |   49 +
 .../usage/v6/back-button/custom/javascript.md |   48 +
 .../v6/back-button/custom/react/main_tsx.md   |   11 +
 .../back-button/custom/react/page_one_tsx.md  |   27 +
 .../back-button/custom/react/page_two_tsx.md  |   26 +
 .../v6/back-button/custom/vue/example_vue.md  |   19 +
 .../v6/back-button/custom/vue/page_one_vue.md |   30 +
 .../v6/back-button/custom/vue/page_two_vue.md |   28 +
 .../basic/angular/app_module_ts.md            |   20 +
 .../basic/angular/example_component_html.md   |    3 +
 .../basic/angular/example_component_ts.md     |   13 +
 .../basic/angular/page_one_component_ts.md    |   26 +
 .../basic/angular/page_two_component_ts.md    |   24 +
 static/usage/v7/back-button/basic/demo.html   |   64 +
 static/usage/v7/back-button/basic/index.md    |   49 +
 .../usage/v7/back-button/basic/javascript.md  |   48 +
 .../v7/back-button/basic/react/main_tsx.md    |   11 +
 .../back-button/basic/react/page_one_tsx.md   |   27 +
 .../back-button/basic/react/page_two_tsx.md   |   25 +
 .../v7/back-button/basic/vue/example_vue.md   |   19 +
 .../v7/back-button/basic/vue/page_one_vue.md  |   30 +
 .../v7/back-button/basic/vue/page_two_vue.md  |   24 +
 .../custom/angular/app_module_ts.md           |   20 +
 .../custom/angular/example_component_html.md  |    3 +
 .../custom/angular/example_component_ts.md    |   13 +
 .../custom/angular/page_one_component_ts.md   |   26 +
 .../custom/angular/page_two_component_ts.md   |   24 +
 static/usage/v7/back-button/custom/demo.html  |   64 +
 static/usage/v7/back-button/custom/index.md   |   49 +
 .../usage/v7/back-button/custom/javascript.md |   48 +
 .../v7/back-button/custom/react/main_tsx.md   |   11 +
 .../back-button/custom/react/page_one_tsx.md  |   27 +
 .../back-button/custom/react/page_two_tsx.md  |   26 +
 .../v7/back-button/custom/vue/example_vue.md  |   19 +
 .../v7/back-button/custom/vue/page_one_vue.md |   30 +
 .../v7/back-button/custom/vue/page_two_vue.md |   28 +
 versioned_docs/version-v6/api/back-button.md  |  336 +-
 62 files changed, 4147 insertions(+), 2921 deletions(-)
 create mode 100644 static/usage/v6/back-button/basic/angular/app_module_ts.md
 create mode 100644 static/usage/v6/back-button/basic/angular/example_component_html.md
 create mode 100644 static/usage/v6/back-button/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v6/back-button/basic/angular/page_one_component_ts.md
 create mode 100644 static/usage/v6/back-button/basic/angular/page_two_component_ts.md
 create mode 100644 static/usage/v6/back-button/basic/demo.html
 create mode 100644 static/usage/v6/back-button/basic/index.md
 create mode 100644 static/usage/v6/back-button/basic/javascript.md
 create mode 100644 static/usage/v6/back-button/basic/react/main_tsx.md
 create mode 100644 static/usage/v6/back-button/basic/react/page_one_tsx.md
 create mode 100644 static/usage/v6/back-button/basic/react/page_two_tsx.md
 create mode 100644 static/usage/v6/back-button/basic/vue/example_vue.md
 create mode 100644 static/usage/v6/back-button/basic/vue/page_one_vue.md
 create mode 100644 static/usage/v6/back-button/basic/vue/page_two_vue.md
 create mode 100644 static/usage/v6/back-button/custom/angular/app_module_ts.md
 create mode 100644 static/usage/v6/back-button/custom/angular/example_component_html.md
 create mode 100644 static/usage/v6/back-button/custom/angular/example_component_ts.md
 create mode 100644 static/usage/v6/back-button/custom/angular/page_one_component_ts.md
 create mode 100644 static/usage/v6/back-button/custom/angular/page_two_component_ts.md
 create mode 100644 static/usage/v6/back-button/custom/demo.html
 create mode 100644 static/usage/v6/back-button/custom/index.md
 create mode 100644 static/usage/v6/back-button/custom/javascript.md
 create mode 100644 static/usage/v6/back-button/custom/react/main_tsx.md
 create mode 100644 static/usage/v6/back-button/custom/react/page_one_tsx.md
 create mode 100644 static/usage/v6/back-button/custom/react/page_two_tsx.md
 create mode 100644 static/usage/v6/back-button/custom/vue/example_vue.md
 create mode 100644 static/usage/v6/back-button/custom/vue/page_one_vue.md
 create mode 100644 static/usage/v6/back-button/custom/vue/page_two_vue.md
 create mode 100644 static/usage/v7/back-button/basic/angular/app_module_ts.md
 create mode 100644 static/usage/v7/back-button/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/back-button/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/back-button/basic/angular/page_one_component_ts.md
 create mode 100644 static/usage/v7/back-button/basic/angular/page_two_component_ts.md
 create mode 100644 static/usage/v7/back-button/basic/demo.html
 create mode 100644 static/usage/v7/back-button/basic/index.md
 create mode 100644 static/usage/v7/back-button/basic/javascript.md
 create mode 100644 static/usage/v7/back-button/basic/react/main_tsx.md
 create mode 100644 static/usage/v7/back-button/basic/react/page_one_tsx.md
 create mode 100644 static/usage/v7/back-button/basic/react/page_two_tsx.md
 create mode 100644 static/usage/v7/back-button/basic/vue/example_vue.md
 create mode 100644 static/usage/v7/back-button/basic/vue/page_one_vue.md
 create mode 100644 static/usage/v7/back-button/basic/vue/page_two_vue.md
 create mode 100644 static/usage/v7/back-button/custom/angular/app_module_ts.md
 create mode 100644 static/usage/v7/back-button/custom/angular/example_component_html.md
 create mode 100644 static/usage/v7/back-button/custom/angular/example_component_ts.md
 create mode 100644 static/usage/v7/back-button/custom/angular/page_one_component_ts.md
 create mode 100644 static/usage/v7/back-button/custom/angular/page_two_component_ts.md
 create mode 100644 static/usage/v7/back-button/custom/demo.html
 create mode 100644 static/usage/v7/back-button/custom/index.md
 create mode 100644 static/usage/v7/back-button/custom/javascript.md
 create mode 100644 static/usage/v7/back-button/custom/react/main_tsx.md
 create mode 100644 static/usage/v7/back-button/custom/react/page_one_tsx.md
 create mode 100644 static/usage/v7/back-button/custom/react/page_two_tsx.md
 create mode 100644 static/usage/v7/back-button/custom/vue/example_vue.md
 create mode 100644 static/usage/v7/back-button/custom/vue/page_one_vue.md
 create mode 100644 static/usage/v7/back-button/custom/vue/page_two_vue.md

diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 89ae57ad0ee..6500a8ab781 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -1,13 +1,6 @@
 ---
 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';
@@ -24,333 +17,26 @@ 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">
+The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized.
 
-```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>
+## Basic Usage
 
-  <!-- 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>
+import Basic from '@site/static/usage/v7/back-button/basic/index.md';
 
-  <!-- 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>
+<Basic />
 
-  <!-- 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>
+## Custom Back Button
 
-  <!-- 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>
+By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the Config docs for [Angular](/docs/angular/config), [React](/docs/react/config), or [Vue](/docs/vue/config) for more information.
 
-<script>
-import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import Custom from '@site/static/usage/v7/back-button/custom/index.md';
 
-export default defineComponent({
-  components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }
-});
-</script>
-```
+<Custom />
 
-</TabItem>
+## Default Back History
 
-</Tabs>
+Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set.
 
 ## Properties
 <Props />
@@ -368,4 +54,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/code/stackblitz/v6/react/package-lock.json b/static/code/stackblitz/v6/react/package-lock.json
index 5dde9f664f2..62905669034 100644
--- a/static/code/stackblitz/v6/react/package-lock.json
+++ b/static/code/stackblitz/v6/react/package-lock.json
@@ -8,12 +8,15 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^6.3.2",
+        "@ionic/react": "^6.0.0",
+        "@ionic/react-router": "^6.0.0",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
+        "@types/react-router-dom": "^5.1.7",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-router-dom": "^5.2.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.6.4",
         "web-vitals": "^2.1.4"
@@ -59,28 +62,28 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.0.tgz",
+      "integrity": "sha512-Gt9jszFJYq7qzXVK4slhc6NzJXnOVmRECWcVjF/T23rNXD9NtWQ0W3qxdg+p9wWIB+VQw3GYV/U2Ha9bRTfs4w==",
       "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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.6.tgz",
+      "integrity": "sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==",
       "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",
+        "@babel/generator": "^7.19.6",
+        "@babel/helper-compilation-targets": "^7.19.3",
+        "@babel/helper-module-transforms": "^7.19.6",
+        "@babel/helpers": "^7.19.4",
+        "@babel/parser": "^7.19.6",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.6",
+        "@babel/types": "^7.19.4",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -104,11 +107,11 @@
       }
     },
     "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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
+      "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
       "dependencies": {
-        "eslint-scope": "^5.1.1",
+        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "eslint-visitor-keys": "^2.1.0",
         "semver": "^6.3.0"
       },
@@ -120,18 +123,6 @@
         "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",
@@ -140,14 +131,6 @@
         "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",
@@ -157,11 +140,11 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.9.tgz",
-      "integrity": "sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.0.tgz",
+      "integrity": "sha512-GUPcXxWibClgmYJuIwC2Bc2Lg+8b9VjaJ+HlNdACEVt+Wlr1eoU1OPZjZRm7Hzl0gaTsUZNQfeihvZJhG7oc3w==",
       "dependencies": {
-        "@babel/types": "^7.18.9",
+        "@babel/types": "^7.20.0",
         "@jridgewell/gen-mapping": "^0.3.2",
         "jsesc": "^2.5.1"
       },
@@ -206,13 +189,13 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz",
+      "integrity": "sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==",
       "dependencies": {
-        "@babel/compat-data": "^7.18.8",
+        "@babel/compat-data": "^7.20.0",
         "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.20.2",
+        "browserslist": "^4.21.3",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -231,13 +214,13 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz",
+      "integrity": "sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==",
       "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-function-name": "^7.19.0",
         "@babel/helper-member-expression-to-functions": "^7.18.9",
         "@babel/helper-optimise-call-expression": "^7.18.6",
         "@babel/helper-replace-supers": "^7.18.9",
@@ -251,9 +234,9 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz",
+      "integrity": "sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "regexpu-core": "^5.1.0"
@@ -266,9 +249,9 @@
       }
     },
     "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
+      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.17.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -309,12 +292,12 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
       "dependencies": {
-        "@babel/template": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/types": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -354,18 +337,18 @@
       }
     },
     "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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz",
+      "integrity": "sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==",
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-simple-access": "^7.19.4",
         "@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-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.6",
+        "@babel/types": "^7.19.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -383,9 +366,9 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz",
+      "integrity": "sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -408,37 +391,37 @@
       }
     },
     "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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.19.1.tgz",
+      "integrity": "sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==",
       "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"
+        "@babel/traverse": "^7.19.1",
+        "@babel/types": "^7.19.0"
       },
       "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==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz",
+      "integrity": "sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.19.4"
       },
       "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
       "dependencies": {
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -455,10 +438,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -472,27 +463,27 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.19.0.tgz",
+      "integrity": "sha512-txX8aN8CZyYGTwcLhlk87KRqncAzhh5TpQamZUa0/u3an36NtDpUP6bQgBCBcLeBs09R/OwQu3OjK0k/HwfNDg==",
       "dependencies": {
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0"
       },
       "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.0.tgz",
+      "integrity": "sha512-aGMjYraN0zosCEthoGLdqot1oRsmxVTQRHadsUPz5QM44Zej2PYRz7XiDE7GqnkZnNtLbOuxqoZw42vkU7+XEQ==",
       "dependencies": {
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.0",
+        "@babel/types": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -512,9 +503,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.0.tgz",
+      "integrity": "sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -553,13 +544,13 @@
       }
     },
     "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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.19.1.tgz",
+      "integrity": "sha512-0yu8vNATgLy4ivqMNBIwb1HebCelqN7YX8SL3FDXORv/RqT0zEEWUCH4GH44JsSrvCu6GqnAdR5EBFAPeNBB4Q==",
       "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/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       },
       "engines": {
@@ -601,15 +592,15 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.20.0.tgz",
+      "integrity": "sha512-vnuRRS20ygSxclEYikHzVrP9nZDFXaSzvJxGLQNAiBX041TmhS4hOUHWNIpq/q4muENuEP9XPJFXTNFejhemkg==",
       "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-create-class-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-replace-supers": "^7.19.1",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/plugin-syntax-decorators": "^7.18.6"
+        "@babel/plugin-syntax-decorators": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -709,13 +700,13 @@
       }
     },
     "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==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.19.4.tgz",
+      "integrity": "sha512-wHmj6LDxVDnL+3WhXteUBaoM1aVILZODAUjg11kHqG4cOlfgMQGxw6aCgvrXrmaJR3Bn14oZhImyCPZzRpC93Q==",
       "dependencies": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.19.4",
+        "@babel/helper-compilation-targets": "^7.19.3",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
         "@babel/plugin-transform-parameters": "^7.18.8"
       },
@@ -852,11 +843,11 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.19.0.tgz",
+      "integrity": "sha512-xaBZUEDntt4faL1yN8oIFlhfXeQAWJW7CLKYsHTUqriCUbj8xOra8bfxxKGi/UwExPFBuPdH4XfHc9rGQhrVkQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -902,11 +893,11 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1046,11 +1037,11 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
+      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1104,11 +1095,11 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.0.tgz",
+      "integrity": "sha512-sXOohbpHZSk7GjxK9b3dKB7CfqUD5DwOH+DggKzOQ7TXYP+RCSbRykfjQmn/zq+rBjycVRtLf9pYhAaEJA786w==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1118,15 +1109,16 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.19.0.tgz",
+      "integrity": "sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.19.0",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/helper-replace-supers": "^7.18.9",
         "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
@@ -1153,11 +1145,11 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.0.tgz",
+      "integrity": "sha512-1dIhvZfkDVx/zn2S1aFwlruspTt4189j7fEkH0Y0VyuDM6bQt7bD6kLcz3l4IlLG+e5OReaBz9ROAbttRtUHqA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1211,11 +1203,11 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.19.0.tgz",
+      "integrity": "sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-flow": "^7.18.6"
       },
       "engines": {
@@ -1284,13 +1276,12 @@
       }
     },
     "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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.19.6.tgz",
+      "integrity": "sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+        "@babel/helper-module-transforms": "^7.19.6",
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1300,14 +1291,13 @@
       }
     },
     "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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz",
+      "integrity": "sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==",
       "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"
+        "@babel/helper-module-transforms": "^7.19.6",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-simple-access": "^7.19.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1317,15 +1307,14 @@
       }
     },
     "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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz",
+      "integrity": "sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==",
       "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"
+        "@babel/helper-module-transforms": "^7.19.6",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-validator-identifier": "^7.19.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1350,12 +1339,12 @@
       }
     },
     "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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz",
+      "integrity": "sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1422,9 +1411,9 @@
       }
     },
     "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==",
+      "version": "7.18.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.18.12.tgz",
+      "integrity": "sha512-Q99U9/ttiu+LMnRU8psd23HhvwXmKWDQIpocm0JKaICcZHnw+mdQbHm6xnSy7dOl8I5PELakYtNBubNQlBXbZw==",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.18.9"
       },
@@ -1450,15 +1439,15 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz",
+      "integrity": "sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1526,15 +1515,15 @@
       }
     },
     "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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz",
+      "integrity": "sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==",
       "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",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1567,11 +1556,11 @@
       }
     },
     "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz",
+      "integrity": "sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
       },
       "engines": {
@@ -1624,13 +1613,13 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.0.tgz",
+      "integrity": "sha512-xOAsAFaun3t9hCwZ13Qe7gq423UgMZ6zAgmLxeGGapFqlT/X3L5qT2btjiVLlFn7gWtMaVyceS5VxGAuKbgizw==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-typescript": "^7.18.6"
+        "@babel/helper-create-class-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1640,11 +1629,11 @@
       }
     },
     "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==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1669,17 +1658,17 @@
       }
     },
     "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==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.19.4.tgz",
+      "integrity": "sha512-5QVOTXUdqTCjQuh2GGtdd7YEhoRXBMVGROAtsBeLGIbIz3obCBIfRMT1I3ZKkMgNzwkyCkftDXSSkHxnfVf4qg==",
       "dependencies": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.19.4",
+        "@babel/helper-compilation-targets": "^7.19.3",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@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-async-generator-functions": "^7.19.1",
         "@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",
@@ -1688,7 +1677,7 @@
         "@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-object-rest-spread": "^7.19.4",
         "@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",
@@ -1712,10 +1701,10 @@
         "@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-block-scoping": "^7.19.4",
+        "@babel/plugin-transform-classes": "^7.19.0",
         "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.19.4",
         "@babel/plugin-transform-dotall-regex": "^7.18.6",
         "@babel/plugin-transform-duplicate-keys": "^7.18.9",
         "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
@@ -1725,9 +1714,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-systemjs": "^7.19.0",
         "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
         "@babel/plugin-transform-new-target": "^7.18.6",
         "@babel/plugin-transform-object-super": "^7.18.6",
         "@babel/plugin-transform-parameters": "^7.18.8",
@@ -1735,18 +1724,18 @@
         "@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-spread": "^7.19.0",
         "@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-escapes": "^7.18.10",
         "@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",
+        "@babel/types": "^7.19.4",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "core-js-compat": "^3.25.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1815,54 +1804,54 @@
       }
     },
     "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.0.tgz",
+      "integrity": "sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.10"
       },
       "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.0.tgz",
+      "integrity": "sha512-v1JH7PeAAGBEyTQM9TqojVl+b20zXtesFKCJHu50xMxZKD1fX0TKaKHPsZfFkXfs7D1M9M6Eeqg1FkJ3a0x2dA==",
       "dependencies": {
-        "core-js-pure": "^3.20.2",
-        "regenerator-runtime": "^0.13.4"
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.10"
       },
       "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==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
+      "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/parser": "^7.18.10",
+        "@babel/types": "^7.18.10"
       },
       "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.0.tgz",
+      "integrity": "sha512-5+cAXQNARgjRUK0JWu2UBwja4JLSO/rBMPJzpsKb+oBF5xlUuCfljQepS4XypBQoiigL0VQjTZy6WiONtUdScQ==",
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.9",
+        "@babel/generator": "^7.20.0",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@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",
+        "@babel/parser": "^7.20.0",
+        "@babel/types": "^7.20.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -1871,11 +1860,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.9.tgz",
-      "integrity": "sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.0.tgz",
+      "integrity": "sha512-Jlgt3H0TajCW164wkTOTzHkZb075tMQMULzrLUoUeKmO7eFL96GgDxf7/Axhc5CAuKE3KFyVW1p6ysKsi2oXAg==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -1893,9 +1883,9 @@
       "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==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz",
+      "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==",
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.2",
         "postcss-selector-parser": "^6.0.10"
@@ -2004,6 +1994,24 @@
         "postcss": "^8.2"
       }
     },
+    "node_modules/@csstools/postcss-nested-calc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz",
+      "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==",
+      "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-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",
@@ -2073,6 +2081,24 @@
         "postcss": "^8.2"
       }
     },
+    "node_modules/@csstools/postcss-text-decoration-shorthand": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz",
+      "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==",
+      "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",
@@ -2123,13 +2149,13 @@
       }
     },
     "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==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
+      "integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.2",
+        "espree": "^9.4.0",
         "globals": "^13.15.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -2139,6 +2165,9 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
@@ -2183,27 +2212,39 @@
       }
     },
     "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==",
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
+      "integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
-        "minimatch": "^3.0.4"
+        "minimatch": "^3.0.5"
       },
       "engines": {
         "node": ">=10.10.0"
       }
     },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "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==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
+      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -2211,11 +2252,11 @@
       }
     },
     "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==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.3.tgz",
+      "integrity": "sha512-qWUFSwZKV1iXNPptPqahqLLrIV33+aueEGfC7UWchGq0P6re3UkUTyCNRPcXtdYiglbVD1A+goHYLnG1Wf6vLg==",
       "dependencies": {
-        "@ionic/core": "^6.3.2",
+        "@ionic/core": "^6.3.3",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -2224,6 +2265,21 @@
         "react-dom": ">=16.8.6"
       }
     },
+    "node_modules/@ionic/react-router": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.3.3.tgz",
+      "integrity": "sha512-IG7k1LTOTozOpgkKg6ZVw8cgXHKThohCdu+ZqI9YNH4j/KwcvsEpswfyGEJ48IdSVsyV7bnRStXC/csDRhBLtw==",
+      "dependencies": {
+        "@ionic/react": "^6.3.3",
+        "tslib": "*"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6",
+        "react-dom": ">=16.8.6",
+        "react-router": "^5.0.1",
+        "react-router-dom": "^5.0.1"
+      }
+    },
     "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",
@@ -2943,12 +2999,12 @@
       "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==",
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
     "node_modules/@leichtgewicht/ip-codec": {
@@ -2956,6 +3012,34 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
+      "version": "5.1.1-v1",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+      "dependencies": {
+        "eslint-scope": "5.1.1"
+      }
+    },
+    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/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/@nicolo-ribaudo/eslint-scope-5-internals/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/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2989,13 +3073,13 @@
       }
     },
     "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==",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.8.tgz",
+      "integrity": "sha512-wxXRwf+IQ6zvHSJZ+5T2RQNEsq+kx4jKRXfFvdt3nBIUzJUAvXEFsUeoaohDe/Kr84MTjGwcuIUPNcstNJORsA==",
       "dependencies": {
         "ansi-html-community": "^0.0.8",
         "common-path-prefix": "^3.0.0",
-        "core-js-pure": "^3.8.1",
+        "core-js-pure": "^3.23.3",
         "error-stack-parser": "^2.0.6",
         "find-up": "^5.0.0",
         "html-entities": "^2.1.0",
@@ -3010,7 +3094,7 @@
         "@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",
+        "type-fest": ">=0.17.0 <4.0.0",
         "webpack": ">=4.43.0 <6.0.0",
         "webpack-dev-server": "3.x || 4.x",
         "webpack-hot-middleware": "2.x",
@@ -3112,14 +3196,14 @@
       "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=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
+      "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
     },
     "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=="
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
     },
     "node_modules/@sinonjs/commons": {
       "version": "1.8.3",
@@ -3138,9 +3222,9 @@
       }
     },
     "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==",
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3413,9 +3497,9 @@
       }
     },
     "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==",
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.2.tgz",
+      "integrity": "sha512-FcFaxOr2V5KZCviw1TnutEMVUVsGt4D2hP1TAfXZAMKuHYW3xQhe3jTxNPWutgCJ3/X1c5yX8ZoGVEItxKbwBg==",
       "dependencies": {
         "@babel/types": "^7.3.0"
       }
@@ -3455,9 +3539,9 @@
       }
     },
     "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==",
+      "version": "8.4.9",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.9.tgz",
+      "integrity": "sha512-jFCSo4wJzlHQLCpceUhUnXdrPuCNOjGFMQ8Eg6JXxlz3QaCKOb7eGi2cephQdM4XTYsNej69P9JDJ1zqNIbncQ==",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -3478,9 +3562,9 @@
       "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==",
+      "version": "4.17.14",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.14.tgz",
+      "integrity": "sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==",
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.18",
@@ -3489,9 +3573,9 @@
       }
     },
     "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==",
+      "version": "4.17.31",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.31.tgz",
+      "integrity": "sha512-DxMhY+NAsTwMMFHBTtJFNp5qiHKJ7TeqOo23zVEM9alT1Ml27Q3xcTH0xwxn7Q0BbMcVEJOs/7aQtUWupUQN3Q==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -3506,6 +3590,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "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",
@@ -3551,14 +3640,14 @@
       "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=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "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=="
+      "version": "16.18.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.3.tgz",
+      "integrity": "sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3566,9 +3655,9 @@
       "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=="
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow=="
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
@@ -3591,9 +3680,9 @@
       "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==",
+      "version": "18.0.24",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.24.tgz",
+      "integrity": "sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3601,13 +3690,32 @@
       }
     },
     "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==",
+      "version": "18.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz",
+      "integrity": "sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router": {
+      "version": "5.1.19",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz",
+      "integrity": "sha512-Fv/5kb2STAEMT3wHzdKQK2z8xKq38EDIGVrutYLmQVVLe+4orDFquU52hQrULnEHinMKv9FSA6lf9+uNT1ITtA==",
       "dependencies": {
+        "@types/history": "^4.7.11",
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3626,6 +3734,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "node_modules/@types/semver": {
+      "version": "7.3.13",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw=="
+    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -3635,11 +3748,11 @@
       }
     },
     "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==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
       "dependencies": {
-        "@types/mime": "^1",
+        "@types/mime": "*",
         "@types/node": "*"
       }
     },
@@ -3683,16 +3796,16 @@
       "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.42.0.tgz",
+      "integrity": "sha512-5TJh2AgL6+wpL8H/GTSjNb4WrjKoR2rqvFxR/DDTqYNk6uXn8BJMEcncLSpMbf/XV1aS0jAjYwn98uvVCiAywQ==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/type-utils": "5.31.0",
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.42.0",
+        "@typescript-eslint/type-utils": "5.42.0",
+        "@typescript-eslint/utils": "5.42.0",
         "debug": "^4.3.4",
-        "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
         "regexpp": "^3.2.0",
         "semver": "^7.3.7",
         "tsutils": "^3.21.0"
@@ -3715,11 +3828,11 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.42.0.tgz",
+      "integrity": "sha512-B51HySW9wWIwLantEMqJi0FXVp1IMKRAyNASrYhJV3/nl4r6aEz6FJTJtscgu7YrGWigs7OypQExmcVqGQoDFQ==",
       "dependencies": {
-        "@typescript-eslint/utils": "5.31.0"
+        "@typescript-eslint/utils": "5.42.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3733,13 +3846,13 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.42.0.tgz",
+      "integrity": "sha512-Ixh9qrOTDRctFg3yIwrLkgf33AHyEIn6lhyf5cCfwwiGtkWhNpVKlEZApi3inGQR/barWnY7qY8FbGKBO7p3JA==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/typescript-estree": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.42.0",
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/typescript-estree": "5.42.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -3759,12 +3872,12 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.42.0.tgz",
+      "integrity": "sha512-l5/3IBHLH0Bv04y+H+zlcLiEMEMjWGaCX6WyHE5Uk2YkSGAMlgdUPsT/ywTSKgu9D1dmmKMYgYZijObfA39Wow==",
       "dependencies": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0"
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/visitor-keys": "5.42.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3775,11 +3888,12 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.42.0.tgz",
+      "integrity": "sha512-HW14TXC45dFVZxnVW8rnUGnvYyRC0E/vxXShFCthcC9VhVTmjqOmtqj6H5rm9Zxv+ORxKA/1aLGD7vmlLsdlOg==",
       "dependencies": {
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.42.0",
+        "@typescript-eslint/utils": "5.42.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -3800,9 +3914,9 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.42.0.tgz",
+      "integrity": "sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -3812,12 +3926,12 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz",
+      "integrity": "sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==",
       "dependencies": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0",
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/visitor-keys": "5.42.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -3838,16 +3952,18 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.42.0.tgz",
+      "integrity": "sha512-JZ++3+h1vbeG1NUECXQZE3hg0kias9kOtcQr3+JVQ3whnjvKuMyktJAAIj6743OeNPnGBmjj7KEmiDL7qsdnCQ==",
       "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",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.42.0",
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/typescript-estree": "5.42.0",
         "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
+        "eslint-utils": "^3.0.0",
+        "semver": "^7.3.7"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3881,11 +3997,11 @@
       }
     },
     "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.42.0.tgz",
+      "integrity": "sha512-QHbu5Hf/2lOEOwy+IUw0GoSCuAzByTAWWrOTKzTzsotiUnWFpuKnXcAhC9YztAf2EElQ0VvIK+pHJUPkM0q7jg==",
       "dependencies": {
-        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/types": "5.42.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -4055,9 +4171,9 @@
       }
     },
     "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==",
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
+      "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4131,9 +4247,9 @@
       }
     },
     "node_modules/address": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.0.tgz",
-      "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.1.tgz",
+      "integrity": "sha512-B+6bi5D34+fDYENiH5qOlA0cV2rAGKuWZ9LeyUUehbXy8e0VS9e498yO0Jeeh+iM+6KbfudHTFjXw2MmJD4QRA==",
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -4413,9 +4529,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "version": "10.4.13",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
+      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4427,8 +4543,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
+        "browserslist": "^4.21.4",
+        "caniuse-lite": "^1.0.30001426",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -4445,9 +4561,9 @@
       }
     },
     "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==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.0.tgz",
+      "integrity": "sha512-4+rr8eQ7+XXS5nZrKcMO/AikHL0hVqy+lHWAnE3xdHl+aguag8SOQ6eEqLexwLNWgXIMfunGuD3ON1/6Kyet0A==",
       "engines": {
         "node": ">=4"
       }
@@ -4577,14 +4693,6 @@
         "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",
@@ -4637,12 +4745,12 @@
       }
     },
     "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
+      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
       "dependencies": {
         "@babel/compat-data": "^7.17.7",
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
         "semver": "^6.1.1"
       },
       "peerDependencies": {
@@ -4658,23 +4766,23 @@
       }
     },
     "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==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
+      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
-        "core-js-compat": "^3.21.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
+        "core-js-compat": "^3.25.1"
       },
       "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==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
+      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
+        "@babel/helper-define-polyfill-provider": "^0.3.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
@@ -4791,9 +4899,9 @@
       "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==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
@@ -4803,7 +4911,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "raw-body": "2.5.1",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -4846,9 +4954,9 @@
       "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==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.14.tgz",
+      "integrity": "sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==",
       "dependencies": {
         "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
@@ -4887,9 +4995,9 @@
       "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==",
+      "version": "4.21.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
+      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
       "funding": [
         {
           "type": "opencollective",
@@ -4901,10 +5009,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001370",
-        "electron-to-chromium": "^1.4.202",
+        "caniuse-lite": "^1.0.30001400",
+        "electron-to-chromium": "^1.4.251",
         "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.5"
+        "update-browserslist-db": "^1.0.9"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5005,9 +5113,9 @@
       }
     },
     "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==",
+      "version": "1.0.30001427",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001427.tgz",
+      "integrity": "sha512-lfXQ73oB9c8DP5Suxaszm+Ta2sr/4tf8+381GkIm1MLj/YdLf+rEDyDSRCzeltuyTVGm+/s18gdZ0q+Wmp8VsQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5099,9 +5207,9 @@
       }
     },
     "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=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.5.0.tgz",
+      "integrity": "sha512-yH4RezKOGlOhxkmhbeNuC4eYZKAUsEaGtBuBzDDP1eFUKiccDWzBABxBfOx31IDwDIXMTxWuwAxUGModvkbuVw=="
     },
     "node_modules/cjs-module-lexer": {
       "version": "1.2.2",
@@ -5178,9 +5286,9 @@
       "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=="
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
     "node_modules/colorette": {
       "version": "2.0.19",
@@ -5265,6 +5373,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/compression/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/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5294,25 +5407,6 @@
         "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",
@@ -5322,12 +5416,9 @@
       }
     },
     "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"
-      }
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cookie": {
       "version": "0.5.0",
@@ -5343,9 +5434,9 @@
       "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==",
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.26.0.tgz",
+      "integrity": "sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5353,30 +5444,21 @@
       }
     },
     "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==",
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.26.0.tgz",
+      "integrity": "sha512-piOX9Go+Z4f9ZiBFLnZ5VrOpBl0h7IGCkiFUN11QTe6LjAvOT3ifL/5TdoizMh99hcGy5SoLyWbapIY/PIb/3A==",
       "dependencies": {
-        "browserslist": "^4.21.2",
-        "semver": "7.0.0"
+        "browserslist": "^4.21.4"
       },
       "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==",
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.26.0.tgz",
+      "integrity": "sha512-LiN6fylpVBVwT8twhhluD9TzXmZQQsr2I2eIKtWNbZI1XMfBT7CV18itaN6RA7EtQd/SDdRx/wzvAShX2HvhQA==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5442,9 +5524,9 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
       "engines": {
         "node": "^10 || ^12 || >=14"
       },
@@ -5654,9 +5736,9 @@
       }
     },
     "node_modules/cssdb": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-6.6.3.tgz",
-      "integrity": "sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.0.2.tgz",
+      "integrity": "sha512-Vm4b6P/PifADu0a76H0DKRNVWq3Rq9xa/Nx6oEMUBJlwTUuZoZ3dkZxo8Gob3UEL53Cq+Ma1GBgISed6XEBs3w==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/csstools"
@@ -5674,11 +5756,11 @@
       }
     },
     "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==",
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.14.tgz",
+      "integrity": "sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==",
       "dependencies": {
-        "cssnano-preset-default": "^5.2.12",
+        "cssnano-preset-default": "^5.2.13",
         "lilconfig": "^2.0.3",
         "yaml": "^1.10.2"
       },
@@ -5694,24 +5776,24 @@
       }
     },
     "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==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.13.tgz",
+      "integrity": "sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==",
       "dependencies": {
-        "css-declaration-sorter": "^6.3.0",
+        "css-declaration-sorter": "^6.3.1",
         "cssnano-utils": "^3.1.0",
         "postcss-calc": "^8.2.3",
         "postcss-colormin": "^5.3.0",
-        "postcss-convert-values": "^5.1.2",
+        "postcss-convert-values": "^5.1.3",
         "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-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.3",
         "postcss-minify-font-values": "^5.1.0",
         "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-params": "^5.1.4",
         "postcss-minify-selectors": "^5.2.1",
         "postcss-normalize-charset": "^5.1.0",
         "postcss-normalize-display-values": "^5.1.0",
@@ -5719,11 +5801,11 @@
         "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-unicode": "^5.1.1",
         "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-initial": "^5.1.1",
         "postcss-reduce-transforms": "^5.1.0",
         "postcss-svgo": "^5.1.0",
         "postcss-unique-selectors": "^5.1.1"
@@ -5804,9 +5886,9 @@
       "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=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -5843,9 +5925,9 @@
       }
     },
     "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=="
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.2.tgz",
+      "integrity": "sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA=="
     },
     "node_modules/dedent": {
       "version": "0.7.0",
@@ -5900,11 +5982,14 @@
       }
     },
     "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.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
@@ -6168,9 +6253,9 @@
       }
     },
     "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=="
+      "version": "1.4.284",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
+      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -6241,30 +6326,31 @@
       }
     },
     "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==",
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz",
+      "integrity": "sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==",
       "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-intrinsic": "^1.1.3",
         "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-callable": "^1.2.7",
         "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-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
+        "safe-regex-test": "^1.0.0",
         "string.prototype.trimend": "^1.0.5",
         "string.prototype.trimstart": "^1.0.5",
         "unbox-primitive": "^1.0.2"
@@ -6409,12 +6495,14 @@
       }
     },
     "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",
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz",
+      "integrity": "sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==",
+      "dependencies": {
+        "@eslint/eslintrc": "^1.3.3",
+        "@humanwhocodes/config-array": "^0.11.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -6424,18 +6512,21 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.2",
+        "espree": "^9.4.0",
         "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",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
         "globals": "^13.15.0",
+        "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -6446,8 +6537,7 @@
         "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"
+        "text-table": "^0.2.0"
       },
       "bin": {
         "eslint": "bin/eslint.js"
@@ -6504,15 +6594,19 @@
       }
     },
     "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==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz",
+      "integrity": "sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==",
       "dependencies": {
-        "debug": "^3.2.7",
-        "find-up": "^2.1.0"
+        "debug": "^3.2.7"
       },
       "engines": {
         "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-module-utils/node_modules/debug": {
@@ -6523,67 +6617,6 @@
         "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",
@@ -6709,9 +6742,9 @@
       }
     },
     "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==",
+      "version": "7.31.10",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz",
+      "integrity": "sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==",
       "dependencies": {
         "array-includes": "^3.1.5",
         "array.prototype.flatmap": "^1.3.0",
@@ -6782,9 +6815,9 @@
       }
     },
     "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==",
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.9.1.tgz",
+      "integrity": "sha512-6BQp3tmb79jLLasPHJmy8DnxREe+2Pgf7L+7o09TSWPfdqqtQfRZmZNetr5mOs3yqZk/MRNxpN3RUpJe0wB4LQ==",
       "dependencies": {
         "@typescript-eslint/utils": "^5.13.0"
       },
@@ -7065,16 +7098,19 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
+      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
       "dependencies": {
-        "acorn": "^8.7.1",
+        "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/esprima": {
@@ -7198,13 +7234,13 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.5.0",
@@ -7223,7 +7259,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -7256,24 +7292,10 @@
       "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/express/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/fast-deep-equal": {
       "version": "3.1.3",
@@ -7281,9 +7303,9 @@
       "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==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -7336,9 +7358,9 @@
       }
     },
     "node_modules/fb-watchman": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
-      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
       "dependencies": {
         "bser": "2.1.1"
       }
@@ -7493,14 +7515,14 @@
       }
     },
     "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=="
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "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==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
       "funding": [
         {
           "type": "individual",
@@ -7771,11 +7793,6 @@
         "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",
@@ -7801,9 +7818,9 @@
       }
     },
     "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==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -7954,6 +7971,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
+    "node_modules/grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -8049,6 +8071,27 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8068,6 +8111,11 @@
         "wbuf": "^1.1.0"
       }
     },
+    "node_modules/hpack.js/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/hpack.js/node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -8082,6 +8130,11 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/hpack.js/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/hpack.js/node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -8288,9 +8341,9 @@
       }
     },
     "node_modules/idb": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.5.tgz",
-      "integrity": "sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw=="
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.0.tgz",
+      "integrity": "sha512-Wsk07aAxDsntgYJY4h0knZJuTxM73eQ4reRAO+Z1liOh8eMCJ/MoDS8fCui1vGT9mnjtl1sOu3I2i/W1swPYZg=="
     },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
@@ -8312,9 +8365,9 @@
       }
     },
     "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==",
+      "version": "9.0.16",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
+      "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -8472,9 +8525,9 @@
       }
     },
     "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==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -8483,9 +8536,9 @@
       }
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -8602,6 +8655,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -8727,9 +8788,9 @@
       }
     },
     "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -8745,9 +8806,9 @@
       }
     },
     "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==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
       "dependencies": {
         "@babel/core": "^7.12.3",
         "@babel/parser": "^7.14.7",
@@ -10411,9 +10472,9 @@
       }
     },
     "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==",
+      "version": "17.0.13",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.13.tgz",
+      "integrity": "sha512-9sWaruZk2JGxIQU+IhI1fhPYRcQ0UuTNuKuCW9bR5fp7qi2Llf7WDzNa17Cy7TKnh3cdxDOiyTu6gaLS0eDatg==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -10790,6 +10851,11 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/js-sdsl": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
+      "integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10914,12 +10980,12 @@
       }
     },
     "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==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
+      "integrity": "sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==",
       "dependencies": {
         "array-includes": "^3.1.5",
-        "object.assign": "^4.1.2"
+        "object.assign": "^4.1.3"
       },
       "engines": {
         "node": ">=4.0"
@@ -11004,9 +11070,9 @@
       }
     },
     "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==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
+      "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -11142,9 +11208,9 @@
       }
     },
     "node_modules/memfs": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",
-      "integrity": "sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==",
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.9.tgz",
+      "integrity": "sha512-3rm8kbrzpUGRyPKSGuk387NZOwQ90O4rI9tsWQkzNW7BLSnKGp23RsEsKK8N8QVCrtJoAMqy3spxHC4os4G6PQ==",
       "dependencies": {
         "fs-monkey": "^1.0.3"
       },
@@ -11312,9 +11378,12 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/mkdirp": {
       "version": "0.5.6",
@@ -11360,6 +11429,11 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "node_modules/natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -11450,9 +11524,9 @@
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
-      "integrity": "sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg=="
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
+      "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -11487,13 +11561,13 @@
       }
     },
     "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==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -11792,9 +11866,12 @@
       "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=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -11968,9 +12045,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
       "funding": [
         {
           "type": "opencollective",
@@ -12118,11 +12195,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
       "dependencies": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -12151,9 +12228,9 @@
       }
     },
     "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==",
+      "version": "12.1.10",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.10.tgz",
+      "integrity": "sha512-U3BHdgrYhCrwTVcByFHs9EOBoqcKq4Lf3kXwbTi4hhq0qWhl/pDWq2THbv/ICX/Fl9KqeHBb8OVrTf2OaYF07A==",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
@@ -12165,7 +12242,7 @@
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "postcss": "^8.4"
+        "postcss": "^8.2"
       }
     },
     "node_modules/postcss-custom-selectors": {
@@ -12491,12 +12568,12 @@
       }
     },
     "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==",
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.0"
+        "stylehacks": "^5.1.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -12506,11 +12583,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.3.tgz",
+      "integrity": "sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^3.1.0",
         "postcss-selector-parser": "^6.0.5"
@@ -12553,11 +12630,11 @@
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "cssnano-utils": "^3.1.0",
         "postcss-value-parser": "^4.2.0"
       },
@@ -12638,11 +12715,11 @@
       }
     },
     "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==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "dependencies": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       },
       "engines": {
         "node": ">=12.0"
@@ -12656,9 +12733,9 @@
       }
     },
     "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==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
+      "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==",
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.0",
         "postcss-selector-parser": "^6.0.10"
@@ -12773,11 +12850,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -12894,56 +12971,58 @@
       }
     },
     "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",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.2.tgz",
+      "integrity": "sha512-rSMUEaOCnovKnwc5LvBDHUDzpGP+nrUeWZGWt9M72fBvckCi45JmnJigUr4QG4zZeOHmOCNCZnd2LKDvP++ZuQ==",
+      "dependencies": {
+        "@csstools/postcss-cascade-layers": "^1.1.0",
+        "@csstools/postcss-color-function": "^1.1.1",
+        "@csstools/postcss-font-format-keywords": "^1.0.1",
+        "@csstools/postcss-hwb-function": "^1.0.2",
+        "@csstools/postcss-ic-unit": "^1.0.1",
+        "@csstools/postcss-is-pseudo-class": "^2.0.7",
+        "@csstools/postcss-nested-calc": "^1.0.0",
+        "@csstools/postcss-normalize-display-values": "^1.0.1",
+        "@csstools/postcss-oklab-function": "^1.1.1",
         "@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",
+        "@csstools/postcss-stepped-value-functions": "^1.0.1",
+        "@csstools/postcss-text-decoration-shorthand": "^1.0.0",
+        "@csstools/postcss-trigonometric-functions": "^1.0.2",
+        "@csstools/postcss-unset-value": "^1.0.2",
+        "autoprefixer": "^10.4.11",
+        "browserslist": "^4.21.3",
         "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",
+        "cssdb": "^7.0.1",
+        "postcss-attribute-case-insensitive": "^5.0.2",
         "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^4.2.3",
+        "postcss-color-functional-notation": "^4.2.4",
         "postcss-color-hex-alpha": "^8.0.4",
-        "postcss-color-rebeccapurple": "^7.1.0",
+        "postcss-color-rebeccapurple": "^7.1.1",
         "postcss-custom-media": "^8.0.2",
-        "postcss-custom-properties": "^12.1.8",
+        "postcss-custom-properties": "^12.1.9",
         "postcss-custom-selectors": "^6.0.3",
-        "postcss-dir-pseudo-class": "^6.0.4",
-        "postcss-double-position-gradients": "^3.1.1",
+        "postcss-dir-pseudo-class": "^6.0.5",
+        "postcss-double-position-gradients": "^3.1.2",
         "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-gap-properties": "^3.0.5",
+        "postcss-image-set-function": "^4.0.7",
         "postcss-initial": "^4.0.1",
-        "postcss-lab-function": "^4.2.0",
+        "postcss-lab-function": "^4.2.1",
         "postcss-logical": "^5.0.4",
         "postcss-media-minmax": "^5.0.0",
-        "postcss-nesting": "^10.1.9",
+        "postcss-nesting": "^10.2.0",
         "postcss-opacity-percentage": "^1.1.2",
-        "postcss-overflow-shorthand": "^3.0.3",
+        "postcss-overflow-shorthand": "^3.0.4",
         "postcss-page-break": "^3.0.4",
-        "postcss-place": "^7.0.4",
-        "postcss-pseudo-class-any-link": "^7.1.5",
+        "postcss-place": "^7.0.5",
+        "postcss-pseudo-class-any-link": "^7.1.6",
         "postcss-replace-overflow-wrap": "^4.0.0",
-        "postcss-selector-not": "^6.0.0",
+        "postcss-selector-not": "^6.0.1",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -12976,11 +13055,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.1.tgz",
+      "integrity": "sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0"
       },
       "engines": {
@@ -13181,15 +13260,20 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/pretty-format/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/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==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
+      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
       "dependencies": {
         "asap": "~2.0.6"
       }
@@ -13216,11 +13300,6 @@
         "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",
@@ -13264,9 +13343,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
@@ -13277,6 +13356,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13526,9 +13610,9 @@
       "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=="
+      "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/react-refresh": {
       "version": "0.11.0",
@@ -13538,6 +13622,42 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -13643,25 +13763,14 @@
       }
     },
     "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==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "minimatch": "^3.0.5"
       },
       "engines": {
-        "node": "*"
+        "node": ">=6.0.0"
       }
     },
     "node_modules/regenerate": {
@@ -13670,9 +13779,9 @@
       "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==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "dependencies": {
         "regenerate": "^1.4.2"
       },
@@ -13681,9 +13790,9 @@
       }
     },
     "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=="
+      "version": "0.13.10",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -13726,14 +13835,14 @@
       }
     },
     "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==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.1.tgz",
+      "integrity": "sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==",
       "dependencies": {
         "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.0.1",
-        "regjsgen": "^0.6.0",
-        "regjsparser": "^0.8.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsgen": "^0.7.1",
+        "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.0.0"
       },
@@ -13742,14 +13851,14 @@
       }
     },
     "node_modules/regjsgen": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
-      "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA=="
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.7.1.tgz",
+      "integrity": "sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA=="
     },
     "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==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "dependencies": {
         "jsesc": "~0.5.0"
       },
@@ -13841,6 +13950,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -13937,9 +14051,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -14027,9 +14141,36 @@
       }
     },
     "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=="
+      "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/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -14125,9 +14266,9 @@
       "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==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
+      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
       "dependencies": {
         "node-forge": "^1"
       },
@@ -14136,9 +14277,9 @@
       }
     },
     "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==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -14307,9 +14448,12 @@
       }
     },
     "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=="
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
+      "integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/side-channel": {
       "version": "1.0.4",
@@ -14374,9 +14518,9 @@
       }
     },
     "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==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
+      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
       "dependencies": {
         "abab": "^2.0.5",
         "iconv-lite": "^0.6.3",
@@ -14494,25 +14638,6 @@
         "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",
@@ -14667,11 +14792,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-selector-parser": "^6.0.4"
       },
       "engines": {
@@ -14693,9 +14818,9 @@
       }
     },
     "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==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "dependencies": {
         "has-flag": "^4.0.0",
         "supports-color": "^7.0.0"
@@ -14825,9 +14950,9 @@
       "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==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.1.tgz",
+      "integrity": "sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==",
       "dependencies": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -14835,18 +14960,19 @@
         "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.5",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.17",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
+        "postcss-nested": "6.0.0",
         "postcss-selector-parser": "^6.0.10",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
@@ -14928,9 +15054,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz",
+      "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -14945,15 +15071,15 @@
       }
     },
     "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==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz",
+      "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==",
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "terser": "^5.14.1"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -15010,6 +15136,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -15043,22 +15179,23 @@
       }
     },
     "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==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
+      "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
       "dependencies": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
       },
       "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==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -15110,9 +15247,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -15184,9 +15321,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -15238,9 +15375,9 @@
       }
     },
     "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==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "engines": {
         "node": ">=4"
       }
@@ -15287,9 +15424,9 @@
       }
     },
     "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==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
+      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -15319,6 +15456,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -15359,11 +15505,6 @@
         "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",
@@ -15377,6 +15518,11 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -15389,6 +15535,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
       "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
       "dependencies": {
         "browser-process-hrtime": "^1.0.0"
       }
@@ -15563,9 +15710,9 @@
       }
     },
     "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==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
+      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -15590,7 +15737,7 @@
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.1",
+        "selfsigned": "^2.1.1",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
@@ -15666,9 +15813,9 @@
       }
     },
     "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==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.10.0.tgz",
+      "integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -15854,26 +16001,26 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz",
+      "integrity": "sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==",
       "dependencies": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz",
+      "integrity": "sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.4.tgz",
+      "integrity": "sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==",
       "dependencies": {
         "@apideck/better-ajv-errors": "^0.3.1",
         "@babel/core": "^7.11.1",
@@ -15897,21 +16044,21 @@
         "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"
+        "workbox-background-sync": "6.5.4",
+        "workbox-broadcast-update": "6.5.4",
+        "workbox-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-google-analytics": "6.5.4",
+        "workbox-navigation-preload": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-range-requests": "6.5.4",
+        "workbox-recipes": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4",
+        "workbox-streams": "6.5.4",
+        "workbox-sw": "6.5.4",
+        "workbox-window": "6.5.4"
       },
       "engines": {
         "node": ">=10.0.0"
@@ -15986,117 +16133,117 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz",
+      "integrity": "sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.4.tgz",
+      "integrity": "sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q=="
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.4.tgz",
+      "integrity": "sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==",
       "dependencies": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz",
+      "integrity": "sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==",
       "dependencies": {
-        "workbox-background-sync": "6.5.3",
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-background-sync": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz",
+      "integrity": "sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.4.tgz",
+      "integrity": "sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==",
       "dependencies": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz",
+      "integrity": "sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.4.tgz",
+      "integrity": "sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==",
       "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"
+        "workbox-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.4.tgz",
+      "integrity": "sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.4.tgz",
+      "integrity": "sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==",
       "dependencies": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.4.tgz",
+      "integrity": "sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==",
       "dependencies": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.4.tgz",
+      "integrity": "sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA=="
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz",
+      "integrity": "sha512-LmWm/zoaahe0EGmMTrSLUi+BjyR3cdGEfU3fS6PN1zKFYbqAKuQ+Oy/27e4VSXsyIwAw8+QDfk1XHNGtZu9nQg==",
       "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"
+        "workbox-build": "6.5.4"
       },
       "engines": {
         "node": ">=10.0.0"
@@ -16123,12 +16270,12 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.4.tgz",
+      "integrity": "sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2",
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "node_modules/wrap-ansi": {
@@ -16318,25 +16465,25 @@
       }
     },
     "@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=="
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.0.tgz",
+      "integrity": "sha512-Gt9jszFJYq7qzXVK4slhc6NzJXnOVmRECWcVjF/T23rNXD9NtWQ0W3qxdg+p9wWIB+VQw3GYV/U2Ha9bRTfs4w=="
     },
     "@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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.6.tgz",
+      "integrity": "sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==",
       "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",
+        "@babel/generator": "^7.19.6",
+        "@babel/helper-compilation-targets": "^7.19.3",
+        "@babel/helper-module-transforms": "^7.19.6",
+        "@babel/helpers": "^7.19.4",
+        "@babel/parser": "^7.19.6",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.6",
+        "@babel/types": "^7.19.4",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -16352,34 +16499,20 @@
       }
     },
     "@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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
+      "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
       "requires": {
-        "eslint-scope": "^5.1.1",
+        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "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",
@@ -16388,11 +16521,11 @@
       }
     },
     "@babel/generator": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.9.tgz",
-      "integrity": "sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.0.tgz",
+      "integrity": "sha512-GUPcXxWibClgmYJuIwC2Bc2Lg+8b9VjaJ+HlNdACEVt+Wlr1eoU1OPZjZRm7Hzl0gaTsUZNQfeihvZJhG7oc3w==",
       "requires": {
-        "@babel/types": "^7.18.9",
+        "@babel/types": "^7.20.0",
         "@jridgewell/gen-mapping": "^0.3.2",
         "jsesc": "^2.5.1"
       },
@@ -16427,13 +16560,13 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz",
+      "integrity": "sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==",
       "requires": {
-        "@babel/compat-data": "^7.18.8",
+        "@babel/compat-data": "^7.20.0",
         "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.20.2",
+        "browserslist": "^4.21.3",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -16445,13 +16578,13 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz",
+      "integrity": "sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==",
       "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-function-name": "^7.19.0",
         "@babel/helper-member-expression-to-functions": "^7.18.9",
         "@babel/helper-optimise-call-expression": "^7.18.6",
         "@babel/helper-replace-supers": "^7.18.9",
@@ -16459,18 +16592,18 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz",
+      "integrity": "sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==",
       "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
+      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
       "requires": {
         "@babel/helper-compilation-targets": "^7.17.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -16501,12 +16634,12 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
       "requires": {
-        "@babel/template": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/types": "^7.19.0"
       }
     },
     "@babel/helper-hoist-variables": {
@@ -16534,18 +16667,18 @@
       }
     },
     "@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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz",
+      "integrity": "sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==",
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-simple-access": "^7.19.4",
         "@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-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.6",
+        "@babel/types": "^7.19.4"
       }
     },
     "@babel/helper-optimise-call-expression": {
@@ -16557,9 +16690,9 @@
       }
     },
     "@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=="
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz",
+      "integrity": "sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw=="
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.18.9",
@@ -16573,31 +16706,31 @@
       }
     },
     "@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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.19.1.tgz",
+      "integrity": "sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==",
       "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/traverse": "^7.19.1",
+        "@babel/types": "^7.19.0"
       }
     },
     "@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==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz",
+      "integrity": "sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.19.4"
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
       "requires": {
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.20.0"
       }
     },
     "@babel/helper-split-export-declaration": {
@@ -16608,10 +16741,15 @@
         "@babel/types": "^7.18.6"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+    },
     "@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=="
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
     },
     "@babel/helper-validator-option": {
       "version": "7.18.6",
@@ -16619,24 +16757,24 @@
       "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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.19.0.tgz",
+      "integrity": "sha512-txX8aN8CZyYGTwcLhlk87KRqncAzhh5TpQamZUa0/u3an36NtDpUP6bQgBCBcLeBs09R/OwQu3OjK0k/HwfNDg==",
       "requires": {
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0"
       }
     },
     "@babel/helpers": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
-      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.0.tgz",
+      "integrity": "sha512-aGMjYraN0zosCEthoGLdqot1oRsmxVTQRHadsUPz5QM44Zej2PYRz7XiDE7GqnkZnNtLbOuxqoZw42vkU7+XEQ==",
       "requires": {
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.0",
+        "@babel/types": "^7.20.0"
       }
     },
     "@babel/highlight": {
@@ -16650,9 +16788,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.0.tgz",
+      "integrity": "sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.18.6",
@@ -16673,13 +16811,13 @@
       }
     },
     "@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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.19.1.tgz",
+      "integrity": "sha512-0yu8vNATgLy4ivqMNBIwb1HebCelqN7YX8SL3FDXORv/RqT0zEEWUCH4GH44JsSrvCu6GqnAdR5EBFAPeNBB4Q==",
       "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/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       }
     },
@@ -16703,15 +16841,15 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.20.0.tgz",
+      "integrity": "sha512-vnuRRS20ygSxclEYikHzVrP9nZDFXaSzvJxGLQNAiBX041TmhS4hOUHWNIpq/q4muENuEP9XPJFXTNFejhemkg==",
       "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-create-class-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-replace-supers": "^7.19.1",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/plugin-syntax-decorators": "^7.18.6"
+        "@babel/plugin-syntax-decorators": "^7.19.0"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
@@ -16769,13 +16907,13 @@
       }
     },
     "@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==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.19.4.tgz",
+      "integrity": "sha512-wHmj6LDxVDnL+3WhXteUBaoM1aVILZODAUjg11kHqG4cOlfgMQGxw6aCgvrXrmaJR3Bn14oZhImyCPZzRpC93Q==",
       "requires": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.19.4",
+        "@babel/helper-compilation-targets": "^7.19.3",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
         "@babel/plugin-transform-parameters": "^7.18.8"
       }
@@ -16861,11 +16999,11 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.19.0.tgz",
+      "integrity": "sha512-xaBZUEDntt4faL1yN8oIFlhfXeQAWJW7CLKYsHTUqriCUbj8xOra8bfxxKGi/UwExPFBuPdH4XfHc9rGQhrVkQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
@@ -16893,11 +17031,11 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-syntax-import-meta": {
@@ -16989,11 +17127,11 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
+      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
@@ -17023,23 +17161,24 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.0.tgz",
+      "integrity": "sha512-sXOohbpHZSk7GjxK9b3dKB7CfqUD5DwOH+DggKzOQ7TXYP+RCSbRykfjQmn/zq+rBjycVRtLf9pYhAaEJA786w==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.19.0.tgz",
+      "integrity": "sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.19.0",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/helper-replace-supers": "^7.18.9",
         "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
@@ -17054,11 +17193,11 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.0.tgz",
+      "integrity": "sha512-1dIhvZfkDVx/zn2S1aFwlruspTt4189j7fEkH0Y0VyuDM6bQt7bD6kLcz3l4IlLG+e5OReaBz9ROAbttRtUHqA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
@@ -17088,11 +17227,11 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.19.0.tgz",
+      "integrity": "sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-flow": "^7.18.6"
       }
     },
@@ -17131,36 +17270,33 @@
       }
     },
     "@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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.19.6.tgz",
+      "integrity": "sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+        "@babel/helper-module-transforms": "^7.19.6",
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz",
+      "integrity": "sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==",
       "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/helper-module-transforms": "^7.19.6",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-simple-access": "^7.19.4"
       }
     },
     "@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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz",
+      "integrity": "sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==",
       "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/helper-module-transforms": "^7.19.6",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-validator-identifier": "^7.19.1"
       }
     },
     "@babel/plugin-transform-modules-umd": {
@@ -17173,12 +17309,12 @@
       }
     },
     "@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==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz",
+      "integrity": "sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-transform-new-target": {
@@ -17215,9 +17351,9 @@
       }
     },
     "@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==",
+      "version": "7.18.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.18.12.tgz",
+      "integrity": "sha512-Q99U9/ttiu+LMnRU8psd23HhvwXmKWDQIpocm0JKaICcZHnw+mdQbHm6xnSy7dOl8I5PELakYtNBubNQlBXbZw==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.18.9"
       }
@@ -17231,15 +17367,15 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz",
+      "integrity": "sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.19.0"
       }
     },
     "@babel/plugin-transform-react-jsx-development": {
@@ -17277,15 +17413,15 @@
       }
     },
     "@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==",
+      "version": "7.19.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz",
+      "integrity": "sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==",
       "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",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -17305,11 +17441,11 @@
       }
     },
     "@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==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz",
+      "integrity": "sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
       }
     },
@@ -17338,21 +17474,21 @@
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.0.tgz",
+      "integrity": "sha512-xOAsAFaun3t9hCwZ13Qe7gq423UgMZ6zAgmLxeGGapFqlT/X3L5qT2btjiVLlFn7gWtMaVyceS5VxGAuKbgizw==",
       "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/helper-create-class-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
       }
     },
     "@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==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
@@ -17365,17 +17501,17 @@
       }
     },
     "@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==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.19.4.tgz",
+      "integrity": "sha512-5QVOTXUdqTCjQuh2GGtdd7YEhoRXBMVGROAtsBeLGIbIz3obCBIfRMT1I3ZKkMgNzwkyCkftDXSSkHxnfVf4qg==",
       "requires": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.19.4",
+        "@babel/helper-compilation-targets": "^7.19.3",
+        "@babel/helper-plugin-utils": "^7.19.0",
         "@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-async-generator-functions": "^7.19.1",
         "@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",
@@ -17384,7 +17520,7 @@
         "@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-object-rest-spread": "^7.19.4",
         "@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",
@@ -17408,10 +17544,10 @@
         "@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-block-scoping": "^7.19.4",
+        "@babel/plugin-transform-classes": "^7.19.0",
         "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.19.4",
         "@babel/plugin-transform-dotall-regex": "^7.18.6",
         "@babel/plugin-transform-duplicate-keys": "^7.18.9",
         "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
@@ -17421,9 +17557,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-systemjs": "^7.19.0",
         "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
         "@babel/plugin-transform-new-target": "^7.18.6",
         "@babel/plugin-transform-object-super": "^7.18.6",
         "@babel/plugin-transform-parameters": "^7.18.8",
@@ -17431,18 +17567,18 @@
         "@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-spread": "^7.19.0",
         "@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-escapes": "^7.18.10",
         "@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",
+        "@babel/types": "^7.19.4",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "core-js-compat": "^3.25.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -17489,55 +17625,56 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
-      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.0.tgz",
+      "integrity": "sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.10"
       }
     },
     "@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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.0.tgz",
+      "integrity": "sha512-v1JH7PeAAGBEyTQM9TqojVl+b20zXtesFKCJHu50xMxZKD1fX0TKaKHPsZfFkXfs7D1M9M6Eeqg1FkJ3a0x2dA==",
       "requires": {
-        "core-js-pure": "^3.20.2",
-        "regenerator-runtime": "^0.13.4"
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.10"
       }
     },
     "@babel/template": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.6.tgz",
-      "integrity": "sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
+      "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
       "requires": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.18.6",
-        "@babel/types": "^7.18.6"
+        "@babel/parser": "^7.18.10",
+        "@babel/types": "^7.18.10"
       }
     },
     "@babel/traverse": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.9.tgz",
-      "integrity": "sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.0.tgz",
+      "integrity": "sha512-5+cAXQNARgjRUK0JWu2UBwja4JLSO/rBMPJzpsKb+oBF5xlUuCfljQepS4XypBQoiigL0VQjTZy6WiONtUdScQ==",
       "requires": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.9",
+        "@babel/generator": "^7.20.0",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
         "@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",
+        "@babel/parser": "^7.20.0",
+        "@babel/types": "^7.20.0",
         "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==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.0.tgz",
+      "integrity": "sha512-Jlgt3H0TajCW164wkTOTzHkZb075tMQMULzrLUoUeKmO7eFL96GgDxf7/Axhc5CAuKE3KFyVW1p6ysKsi2oXAg==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -17552,9 +17689,9 @@
       "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==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz",
+      "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==",
       "requires": {
         "@csstools/selector-specificity": "^2.0.2",
         "postcss-selector-parser": "^6.0.10"
@@ -17603,6 +17740,14 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "@csstools/postcss-nested-calc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz",
+      "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
     "@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",
@@ -17636,6 +17781,14 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "@csstools/postcss-text-decoration-shorthand": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz",
+      "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==",
+      "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",
@@ -17655,13 +17808,13 @@
       "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==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
+      "integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.2",
+        "espree": "^9.4.0",
         "globals": "^13.15.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -17699,24 +17852,29 @@
       }
     },
     "@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==",
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
+      "integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
-        "minimatch": "^3.0.4"
+        "minimatch": "^3.0.5"
       }
     },
+    "@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="
+    },
     "@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==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
+      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -17724,15 +17882,24 @@
       }
     },
     "@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==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.3.tgz",
+      "integrity": "sha512-qWUFSwZKV1iXNPptPqahqLLrIV33+aueEGfC7UWchGq0P6re3UkUTyCNRPcXtdYiglbVD1A+goHYLnG1Wf6vLg==",
       "requires": {
-        "@ionic/core": "^6.3.2",
+        "@ionic/core": "^6.3.3",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
     },
+    "@ionic/react-router": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.3.3.tgz",
+      "integrity": "sha512-IG7k1LTOTozOpgkKg6ZVw8cgXHKThohCdu+ZqI9YNH4j/KwcvsEpswfyGEJ48IdSVsyV7bnRStXC/csDRhBLtw==",
+      "requires": {
+        "@ionic/react": "^6.3.3",
+        "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",
@@ -18266,19 +18433,43 @@
       "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==",
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
+    "@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=="
+    },
+    "@nicolo-ribaudo/eslint-scope-5-internals": {
+      "version": "5.1.1-v1",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+      "requires": {
+        "eslint-scope": "5.1.1"
+      },
+      "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=="
+        }
       }
     },
-    "@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",
@@ -18303,13 +18494,13 @@
       }
     },
     "@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==",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.8.tgz",
+      "integrity": "sha512-wxXRwf+IQ6zvHSJZ+5T2RQNEsq+kx4jKRXfFvdt3nBIUzJUAvXEFsUeoaohDe/Kr84MTjGwcuIUPNcstNJORsA==",
       "requires": {
         "ansi-html-community": "^0.0.8",
         "common-path-prefix": "^3.0.0",
-        "core-js-pure": "^3.8.1",
+        "core-js-pure": "^3.23.3",
         "error-stack-parser": "^2.0.6",
         "find-up": "^5.0.0",
         "html-entities": "^2.1.0",
@@ -18367,14 +18558,14 @@
       }
     },
     "@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=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
+      "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
     },
     "@sinclair/typebox": {
-      "version": "0.24.21",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.21.tgz",
-      "integrity": "sha512-II2SIjvxBVJmrGkkZYza/BqNjwx3PWROIA8CZ0/Hn7LV0Mv0CVpZxoyHGBVsQqfFLMv9DmArIeRHTwo76bE6oA=="
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
     },
     "@sinonjs/commons": {
       "version": "1.8.3",
@@ -18393,9 +18584,9 @@
       }
     },
     "@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=="
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
@@ -18557,9 +18748,9 @@
       }
     },
     "@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==",
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.2.tgz",
+      "integrity": "sha512-FcFaxOr2V5KZCviw1TnutEMVUVsGt4D2hP1TAfXZAMKuHYW3xQhe3jTxNPWutgCJ3/X1c5yX8ZoGVEItxKbwBg==",
       "requires": {
         "@babel/types": "^7.3.0"
       }
@@ -18599,9 +18790,9 @@
       }
     },
     "@types/eslint": {
-      "version": "8.4.5",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
-      "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
+      "version": "8.4.9",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.9.tgz",
+      "integrity": "sha512-jFCSo4wJzlHQLCpceUhUnXdrPuCNOjGFMQ8Eg6JXxlz3QaCKOb7eGi2cephQdM4XTYsNej69P9JDJ1zqNIbncQ==",
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -18622,9 +18813,9 @@
       "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==",
+      "version": "4.17.14",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.14.tgz",
+      "integrity": "sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==",
       "requires": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.18",
@@ -18633,9 +18824,9 @@
       }
     },
     "@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==",
+      "version": "4.17.31",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.31.tgz",
+      "integrity": "sha512-DxMhY+NAsTwMMFHBTtJFNp5qiHKJ7TeqOo23zVEM9alT1Ml27Q3xcTH0xwxn7Q0BbMcVEJOs/7aQtUWupUQN3Q==",
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -18650,6 +18841,11 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -18695,14 +18891,14 @@
       "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=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "@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=="
+      "version": "16.18.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.3.tgz",
+      "integrity": "sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -18710,9 +18906,9 @@
       "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=="
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow=="
     },
     "@types/prop-types": {
       "version": "15.7.5",
@@ -18735,9 +18931,9 @@
       "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==",
+      "version": "18.0.24",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.24.tgz",
+      "integrity": "sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -18745,13 +18941,32 @@
       }
     },
     "@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==",
+      "version": "18.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz",
+      "integrity": "sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router": {
+      "version": "5.1.19",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz",
+      "integrity": "sha512-Fv/5kb2STAEMT3wHzdKQK2z8xKq38EDIGVrutYLmQVVLe+4orDFquU52hQrULnEHinMKv9FSA6lf9+uNT1ITtA==",
       "requires": {
+        "@types/history": "^4.7.11",
         "@types/react": "*"
       }
     },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -18770,6 +18985,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/semver": {
+      "version": "7.3.13",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw=="
+    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -18779,11 +18999,11 @@
       }
     },
     "@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==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
       "requires": {
-        "@types/mime": "^1",
+        "@types/mime": "*",
         "@types/node": "*"
       }
     },
@@ -18827,71 +19047,72 @@
       "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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.42.0.tgz",
+      "integrity": "sha512-5TJh2AgL6+wpL8H/GTSjNb4WrjKoR2rqvFxR/DDTqYNk6uXn8BJMEcncLSpMbf/XV1aS0jAjYwn98uvVCiAywQ==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/type-utils": "5.31.0",
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.42.0",
+        "@typescript-eslint/type-utils": "5.42.0",
+        "@typescript-eslint/utils": "5.42.0",
         "debug": "^4.3.4",
-        "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.42.0.tgz",
+      "integrity": "sha512-B51HySW9wWIwLantEMqJi0FXVp1IMKRAyNASrYhJV3/nl4r6aEz6FJTJtscgu7YrGWigs7OypQExmcVqGQoDFQ==",
       "requires": {
-        "@typescript-eslint/utils": "5.31.0"
+        "@typescript-eslint/utils": "5.42.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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.42.0.tgz",
+      "integrity": "sha512-Ixh9qrOTDRctFg3yIwrLkgf33AHyEIn6lhyf5cCfwwiGtkWhNpVKlEZApi3inGQR/barWnY7qY8FbGKBO7p3JA==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.31.0",
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/typescript-estree": "5.31.0",
+        "@typescript-eslint/scope-manager": "5.42.0",
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/typescript-estree": "5.42.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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.42.0.tgz",
+      "integrity": "sha512-l5/3IBHLH0Bv04y+H+zlcLiEMEMjWGaCX6WyHE5Uk2YkSGAMlgdUPsT/ywTSKgu9D1dmmKMYgYZijObfA39Wow==",
       "requires": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0"
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/visitor-keys": "5.42.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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.42.0.tgz",
+      "integrity": "sha512-HW14TXC45dFVZxnVW8rnUGnvYyRC0E/vxXShFCthcC9VhVTmjqOmtqj6H5rm9Zxv+ORxKA/1aLGD7vmlLsdlOg==",
       "requires": {
-        "@typescript-eslint/utils": "5.31.0",
+        "@typescript-eslint/typescript-estree": "5.42.0",
+        "@typescript-eslint/utils": "5.42.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=="
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.42.0.tgz",
+      "integrity": "sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw=="
     },
     "@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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz",
+      "integrity": "sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==",
       "requires": {
-        "@typescript-eslint/types": "5.31.0",
-        "@typescript-eslint/visitor-keys": "5.31.0",
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/visitor-keys": "5.42.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -18900,16 +19121,18 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.31.0.tgz",
-      "integrity": "sha512-kcVPdQS6VIpVTQ7QnGNKMFtdJdvnStkqS5LeALr4rcwx11G6OWb2HB17NMPnlRHvaZP38hL9iK8DdE9Fne7NYg==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.42.0.tgz",
+      "integrity": "sha512-JZ++3+h1vbeG1NUECXQZE3hg0kias9kOtcQr3+JVQ3whnjvKuMyktJAAIj6743OeNPnGBmjj7KEmiDL7qsdnCQ==",
       "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",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.42.0",
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/typescript-estree": "5.42.0",
         "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
+        "eslint-utils": "^3.0.0",
+        "semver": "^7.3.7"
       },
       "dependencies": {
         "eslint-scope": {
@@ -18929,11 +19152,11 @@
       }
     },
     "@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==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.42.0.tgz",
+      "integrity": "sha512-QHbu5Hf/2lOEOwy+IUw0GoSCuAzByTAWWrOTKzTzsotiUnWFpuKnXcAhC9YztAf2EElQ0VvIK+pHJUPkM0q7jg==",
       "requires": {
-        "@typescript-eslint/types": "5.31.0",
+        "@typescript-eslint/types": "5.42.0",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -19093,9 +19316,9 @@
       }
     },
     "acorn": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w=="
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
+      "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA=="
     },
     "acorn-globals": {
       "version": "6.0.0",
@@ -19146,9 +19369,9 @@
       "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=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.1.tgz",
+      "integrity": "sha512-B+6bi5D34+fDYENiH5qOlA0cV2rAGKuWZ9LeyUUehbXy8e0VS9e498yO0Jeeh+iM+6KbfudHTFjXw2MmJD4QRA=="
     },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
@@ -19348,12 +19571,12 @@
       "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==",
+      "version": "10.4.13",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
+      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
       "requires": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
+        "browserslist": "^4.21.4",
+        "caniuse-lite": "^1.0.30001426",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -19361,9 +19584,9 @@
       }
     },
     "axe-core": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
-      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.0.tgz",
+      "integrity": "sha512-4+rr8eQ7+XXS5nZrKcMO/AikHL0hVqy+lHWAnE3xdHl+aguag8SOQ6eEqLexwLNWgXIMfunGuD3ON1/6Kyet0A=="
     },
     "axobject-query": {
       "version": "2.2.0",
@@ -19453,14 +19676,6 @@
         }
       }
     },
-    "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",
@@ -19500,12 +19715,12 @@
       "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
+      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
       "requires": {
         "@babel/compat-data": "^7.17.7",
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
         "semver": "^6.1.1"
       },
       "dependencies": {
@@ -19517,20 +19732,20 @@
       }
     },
     "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==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
+      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
-        "core-js-compat": "^3.21.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
+        "core-js-compat": "^3.25.1"
       }
     },
     "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==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
+      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
+        "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
     "babel-plugin-transform-react-remove-prop-types": {
@@ -19626,9 +19841,9 @@
       "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==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "requires": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
@@ -19638,7 +19853,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "raw-body": "2.5.1",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -19673,9 +19888,9 @@
       }
     },
     "bonjour-service": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.13.tgz",
-      "integrity": "sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.14.tgz",
+      "integrity": "sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==",
       "requires": {
         "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
@@ -19711,14 +19926,14 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
     },
     "browserslist": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
-      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
+      "version": "4.21.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
+      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
       "requires": {
-        "caniuse-lite": "^1.0.30001370",
-        "electron-to-chromium": "^1.4.202",
+        "caniuse-lite": "^1.0.30001400",
+        "electron-to-chromium": "^1.4.251",
         "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.5"
+        "update-browserslist-db": "^1.0.9"
       }
     },
     "bser": {
@@ -19789,9 +20004,9 @@
       }
     },
     "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=="
+      "version": "1.0.30001427",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001427.tgz",
+      "integrity": "sha512-lfXQ73oB9c8DP5Suxaszm+Ta2sr/4tf8+381GkIm1MLj/YdLf+rEDyDSRCzeltuyTVGm+/s18gdZ0q+Wmp8VsQ=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -19849,9 +20064,9 @@
       "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=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.5.0.tgz",
+      "integrity": "sha512-yH4RezKOGlOhxkmhbeNuC4eYZKAUsEaGtBuBzDDP1eFUKiccDWzBABxBfOx31IDwDIXMTxWuwAxUGModvkbuVw=="
     },
     "cjs-module-lexer": {
       "version": "1.2.2",
@@ -19917,9 +20132,9 @@
       "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=="
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
     "colorette": {
       "version": "2.0.19",
@@ -19988,6 +20203,11 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "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=="
         }
       }
     },
@@ -20012,13 +20232,6 @@
       "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": {
@@ -20027,12 +20240,9 @@
       "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"
-      }
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "cookie": {
       "version": "0.5.0",
@@ -20045,30 +20255,22 @@
       "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=="
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.26.0.tgz",
+      "integrity": "sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw=="
     },
     "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==",
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.26.0.tgz",
+      "integrity": "sha512-piOX9Go+Z4f9ZiBFLnZ5VrOpBl0h7IGCkiFUN11QTe6LjAvOT3ifL/5TdoizMh99hcGy5SoLyWbapIY/PIb/3A==",
       "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=="
-        }
+        "browserslist": "^4.21.4"
       }
     },
     "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=="
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.26.0.tgz",
+      "integrity": "sha512-LiN6fylpVBVwT8twhhluD9TzXmZQQsr2I2eIKtWNbZI1XMfBT7CV18itaN6RA7EtQd/SDdRx/wzvAShX2HvhQA=="
     },
     "core-util-is": {
       "version": "1.0.3",
@@ -20111,9 +20313,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=="
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -20237,9 +20439,9 @@
       "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=="
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.0.2.tgz",
+      "integrity": "sha512-Vm4b6P/PifADu0a76H0DKRNVWq3Rq9xa/Nx6oEMUBJlwTUuZoZ3dkZxo8Gob3UEL53Cq+Ma1GBgISed6XEBs3w=="
     },
     "cssesc": {
       "version": "3.0.0",
@@ -20247,34 +20449,34 @@
       "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==",
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.14.tgz",
+      "integrity": "sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==",
       "requires": {
-        "cssnano-preset-default": "^5.2.12",
+        "cssnano-preset-default": "^5.2.13",
         "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==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.13.tgz",
+      "integrity": "sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==",
       "requires": {
-        "css-declaration-sorter": "^6.3.0",
+        "css-declaration-sorter": "^6.3.1",
         "cssnano-utils": "^3.1.0",
         "postcss-calc": "^8.2.3",
         "postcss-colormin": "^5.3.0",
-        "postcss-convert-values": "^5.1.2",
+        "postcss-convert-values": "^5.1.3",
         "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-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.3",
         "postcss-minify-font-values": "^5.1.0",
         "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-params": "^5.1.4",
         "postcss-minify-selectors": "^5.2.1",
         "postcss-normalize-charset": "^5.1.0",
         "postcss-normalize-display-values": "^5.1.0",
@@ -20282,11 +20484,11 @@
         "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-unicode": "^5.1.1",
         "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-initial": "^5.1.1",
         "postcss-reduce-transforms": "^5.1.0",
         "postcss-svgo": "^5.1.0",
         "postcss-unique-selectors": "^5.1.1"
@@ -20347,9 +20549,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -20375,9 +20577,9 @@
       }
     },
     "decimal.js": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.2.tgz",
+      "integrity": "sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA=="
     },
     "dedent": {
       "version": "0.7.0",
@@ -20417,9 +20619,9 @@
       }
     },
     "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q=="
     },
     "delayed-stream": {
       "version": "1.0.0",
@@ -20618,9 +20820,9 @@
       }
     },
     "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=="
+      "version": "1.4.284",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
+      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
     "emittery": {
       "version": "0.8.1",
@@ -20673,30 +20875,31 @@
       }
     },
     "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==",
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz",
+      "integrity": "sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==",
       "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-intrinsic": "^1.1.3",
         "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-callable": "^1.2.7",
         "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-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
+        "safe-regex-test": "^1.0.0",
         "string.prototype.trimend": "^1.0.5",
         "string.prototype.trimstart": "^1.0.5",
         "unbox-primitive": "^1.0.2"
@@ -20801,12 +21004,14 @@
       }
     },
     "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",
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz",
+      "integrity": "sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==",
+      "requires": {
+        "@eslint/eslintrc": "^1.3.3",
+        "@humanwhocodes/config-array": "^0.11.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -20816,18 +21021,21 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.2",
+        "espree": "^9.4.0",
         "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",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
         "globals": "^13.15.0",
+        "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -20838,8 +21046,7 @@
         "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"
+        "text-table": "^0.2.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -20959,12 +21166,11 @@
       }
     },
     "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==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz",
+      "integrity": "sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==",
       "requires": {
-        "debug": "^3.2.7",
-        "find-up": "^2.1.0"
+        "debug": "^3.2.7"
       },
       "dependencies": {
         "debug": {
@@ -20974,49 +21180,6 @@
           "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=="
         }
       }
     },
@@ -21108,9 +21271,9 @@
       }
     },
     "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==",
+      "version": "7.31.10",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz",
+      "integrity": "sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==",
       "requires": {
         "array-includes": "^3.1.5",
         "array.prototype.flatmap": "^1.3.0",
@@ -21159,9 +21322,9 @@
       "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==",
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.9.1.tgz",
+      "integrity": "sha512-6BQp3tmb79jLLasPHJmy8DnxREe+2Pgf7L+7o09TSWPfdqqtQfRZmZNetr5mOs3yqZk/MRNxpN3RUpJe0wB4LQ==",
       "requires": {
         "@typescript-eslint/utils": "^5.13.0"
       }
@@ -21268,11 +21431,11 @@
       }
     },
     "espree": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
+      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
       "requires": {
-        "acorn": "^8.7.1",
+        "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       }
@@ -21361,13 +21524,13 @@
       }
     },
     "express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.5.0",
@@ -21386,7 +21549,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -21416,10 +21579,10 @@
           "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=="
+        "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=="
         }
       }
     },
@@ -21429,9 +21592,9 @@
       "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==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -21477,9 +21640,9 @@
       }
     },
     "fb-watchman": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
-      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
       "requires": {
         "bser": "2.1.1"
       }
@@ -21598,14 +21761,14 @@
       }
     },
     "flatted": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz",
-      "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ=="
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "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=="
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -21777,11 +21940,6 @@
         "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",
@@ -21798,9 +21956,9 @@
       "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==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -21908,6 +22066,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
+    "grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -21970,6 +22133,27 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -21986,6 +22170,11 @@
         "wbuf": "^1.1.0"
       },
       "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+        },
         "readable-stream": {
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -22000,6 +22189,11 @@
             "util-deprecate": "~1.0.1"
           }
         },
+        "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=="
+        },
         "string_decoder": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -22147,9 +22341,9 @@
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "idb": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.5.tgz",
-      "integrity": "sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw=="
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.0.tgz",
+      "integrity": "sha512-Wsk07aAxDsntgYJY4h0knZJuTxM73eQ4reRAO+Z1liOh8eMCJ/MoDS8fCui1vGT9mnjtl1sOu3I2i/W1swPYZg=="
     },
     "identity-obj-proxy": {
       "version": "3.0.0",
@@ -22165,9 +22359,9 @@
       "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=="
+      "version": "9.0.16",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
+      "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
     },
     "import-fresh": {
       "version": "3.3.0",
@@ -22279,14 +22473,14 @@
       }
     },
     "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=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "requires": {
         "has": "^1.0.3"
       }
@@ -22355,6 +22549,11 @@
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="
     },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ=="
+    },
     "is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -22435,9 +22634,9 @@
       }
     },
     "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
     },
     "isexe": {
       "version": "2.0.0",
@@ -22450,9 +22649,9 @@
       "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==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
       "requires": {
         "@babel/core": "^7.12.3",
         "@babel/parser": "^7.14.7",
@@ -23670,9 +23869,9 @@
           }
         },
         "@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==",
+          "version": "17.0.13",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.13.tgz",
+          "integrity": "sha512-9sWaruZk2JGxIQU+IhI1fhPYRcQ0UuTNuKuCW9bR5fp7qi2Llf7WDzNa17Cy7TKnh3cdxDOiyTu6gaLS0eDatg==",
           "requires": {
             "@types/yargs-parser": "*"
           }
@@ -23945,6 +24144,11 @@
         }
       }
     },
+    "js-sdsl": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
+      "integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -24038,12 +24242,12 @@
       "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==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
+      "integrity": "sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==",
       "requires": {
         "array-includes": "^3.1.5",
-        "object.assign": "^4.1.2"
+        "object.assign": "^4.1.3"
       }
     },
     "kind-of": {
@@ -24104,9 +24308,9 @@
       "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==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
+      "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -24217,9 +24421,9 @@
       "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==",
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.9.tgz",
+      "integrity": "sha512-3rm8kbrzpUGRyPKSGuk387NZOwQ90O4rI9tsWQkzNW7BLSnKGp23RsEsKK8N8QVCrtJoAMqy3spxHC4os4G6PQ==",
       "requires": {
         "fs-monkey": "^1.0.3"
       }
@@ -24335,9 +24539,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
     },
     "mkdirp": {
       "version": "0.5.6",
@@ -24371,6 +24575,11 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -24437,9 +24646,9 @@
       }
     },
     "nwsapi": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
-      "integrity": "sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg=="
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
+      "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -24462,13 +24671,13 @@
       "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==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       }
     },
@@ -24677,9 +24886,12 @@
       "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=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "requires": {
+        "isarray": "0.0.1"
+      }
     },
     "path-type": {
       "version": "4.0.0",
@@ -24803,9 +25015,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -24878,11 +25090,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
       "requires": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       }
     },
@@ -24895,9 +25107,9 @@
       }
     },
     "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==",
+      "version": "12.1.10",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.10.tgz",
+      "integrity": "sha512-U3BHdgrYhCrwTVcByFHs9EOBoqcKq4Lf3kXwbTi4hhq0qWhl/pDWq2THbv/ICX/Fl9KqeHBb8OVrTf2OaYF07A==",
       "requires": {
         "postcss-value-parser": "^4.2.0"
       }
@@ -25056,20 +25268,20 @@
       "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==",
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
       "requires": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.0"
+        "stylehacks": "^5.1.1"
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.3.tgz",
+      "integrity": "sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^3.1.0",
         "postcss-selector-parser": "^6.0.5"
@@ -25094,11 +25306,11 @@
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "cssnano-utils": "^3.1.0",
         "postcss-value-parser": "^4.2.0"
       }
@@ -25143,17 +25355,17 @@
       }
     },
     "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==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "requires": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       }
     },
     "postcss-nesting": {
-      "version": "10.1.10",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.10.tgz",
-      "integrity": "sha512-lqd7LXCq0gWc0wKXtoKDru5wEUNjm3OryLVNRZ8OnW8km6fSNUuFrjEhU3nklxXE2jvd4qrox566acgh+xQt8w==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
+      "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==",
       "requires": {
         "@csstools/selector-specificity": "^2.0.0",
         "postcss-selector-parser": "^6.0.10"
@@ -25215,11 +25427,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       }
     },
@@ -25276,56 +25488,58 @@
       }
     },
     "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",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.2.tgz",
+      "integrity": "sha512-rSMUEaOCnovKnwc5LvBDHUDzpGP+nrUeWZGWt9M72fBvckCi45JmnJigUr4QG4zZeOHmOCNCZnd2LKDvP++ZuQ==",
+      "requires": {
+        "@csstools/postcss-cascade-layers": "^1.1.0",
+        "@csstools/postcss-color-function": "^1.1.1",
+        "@csstools/postcss-font-format-keywords": "^1.0.1",
+        "@csstools/postcss-hwb-function": "^1.0.2",
+        "@csstools/postcss-ic-unit": "^1.0.1",
+        "@csstools/postcss-is-pseudo-class": "^2.0.7",
+        "@csstools/postcss-nested-calc": "^1.0.0",
+        "@csstools/postcss-normalize-display-values": "^1.0.1",
+        "@csstools/postcss-oklab-function": "^1.1.1",
         "@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",
+        "@csstools/postcss-stepped-value-functions": "^1.0.1",
+        "@csstools/postcss-text-decoration-shorthand": "^1.0.0",
+        "@csstools/postcss-trigonometric-functions": "^1.0.2",
+        "@csstools/postcss-unset-value": "^1.0.2",
+        "autoprefixer": "^10.4.11",
+        "browserslist": "^4.21.3",
         "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",
+        "cssdb": "^7.0.1",
+        "postcss-attribute-case-insensitive": "^5.0.2",
         "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^4.2.3",
+        "postcss-color-functional-notation": "^4.2.4",
         "postcss-color-hex-alpha": "^8.0.4",
-        "postcss-color-rebeccapurple": "^7.1.0",
+        "postcss-color-rebeccapurple": "^7.1.1",
         "postcss-custom-media": "^8.0.2",
-        "postcss-custom-properties": "^12.1.8",
+        "postcss-custom-properties": "^12.1.9",
         "postcss-custom-selectors": "^6.0.3",
-        "postcss-dir-pseudo-class": "^6.0.4",
-        "postcss-double-position-gradients": "^3.1.1",
+        "postcss-dir-pseudo-class": "^6.0.5",
+        "postcss-double-position-gradients": "^3.1.2",
         "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-gap-properties": "^3.0.5",
+        "postcss-image-set-function": "^4.0.7",
         "postcss-initial": "^4.0.1",
-        "postcss-lab-function": "^4.2.0",
+        "postcss-lab-function": "^4.2.1",
         "postcss-logical": "^5.0.4",
         "postcss-media-minmax": "^5.0.0",
-        "postcss-nesting": "^10.1.9",
+        "postcss-nesting": "^10.2.0",
         "postcss-opacity-percentage": "^1.1.2",
-        "postcss-overflow-shorthand": "^3.0.3",
+        "postcss-overflow-shorthand": "^3.0.4",
         "postcss-page-break": "^3.0.4",
-        "postcss-place": "^7.0.4",
-        "postcss-pseudo-class-any-link": "^7.1.5",
+        "postcss-place": "^7.0.5",
+        "postcss-pseudo-class-any-link": "^7.1.6",
         "postcss-replace-overflow-wrap": "^4.0.0",
-        "postcss-selector-not": "^6.0.0",
+        "postcss-selector-not": "^6.0.1",
         "postcss-value-parser": "^4.2.0"
       }
     },
@@ -25338,11 +25552,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.1.tgz",
+      "integrity": "sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0"
       }
     },
@@ -25471,6 +25685,11 @@
           "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": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
         }
       }
     },
@@ -25480,9 +25699,9 @@
       "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==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
+      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
       "requires": {
         "asap": "~2.0.6"
       }
@@ -25504,13 +25723,6 @@
         "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": {
@@ -25545,13 +25757,18 @@
       "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==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "requires": {
         "side-channel": "^1.0.4"
       }
     },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -25731,15 +25948,45 @@
       "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=="
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "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-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "requires": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -25822,21 +26069,11 @@
       }
     },
     "recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "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"
-          }
-        }
+        "minimatch": "^3.0.5"
       }
     },
     "regenerate": {
@@ -25845,17 +26082,17 @@
       "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==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "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=="
+      "version": "0.13.10",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -25886,27 +26123,27 @@
       "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==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.1.tgz",
+      "integrity": "sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==",
       "requires": {
         "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.0.1",
-        "regjsgen": "^0.6.0",
-        "regjsparser": "^0.8.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsgen": "^0.7.1",
+        "regjsparser": "^0.9.1",
         "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=="
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.7.1.tgz",
+      "integrity": "sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA=="
     },
     "regjsparser": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
-      "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "requires": {
         "jsesc": "~0.5.0"
       },
@@ -25973,6 +26210,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -26030,9 +26272,9 @@
       }
     },
     "rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -26090,9 +26332,19 @@
       }
     },
     "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=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
     },
     "safer-buffer": {
       "version": "2.1.2",
@@ -26150,17 +26402,17 @@
       "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==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
+      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
       "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==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -26305,9 +26557,9 @@
       "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=="
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
+      "integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw=="
     },
     "side-channel": {
       "version": "1.0.4",
@@ -26360,9 +26612,9 @@
       "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==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
+      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
       "requires": {
         "abab": "^2.0.5",
         "iconv-lite": "^0.6.3",
@@ -26456,13 +26708,6 @@
       "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": {
@@ -26575,11 +26820,11 @@
       "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-selector-parser": "^6.0.4"
       }
     },
@@ -26592,9 +26837,9 @@
       }
     },
     "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==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "requires": {
         "has-flag": "^4.0.0",
         "supports-color": "^7.0.0"
@@ -26702,9 +26947,9 @@
       "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==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.1.tgz",
+      "integrity": "sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==",
       "requires": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -26712,18 +26957,19 @@
         "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.5",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.17",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
+        "postcss-nested": "6.0.0",
         "postcss-selector-parser": "^6.0.10",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
@@ -26775,9 +27021,9 @@
       }
     },
     "terser": {
-      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz",
+      "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==",
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -26793,15 +27039,15 @@
       }
     },
     "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==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz",
+      "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==",
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "terser": "^5.14.1"
       }
     },
     "test-exclude": {
@@ -26829,6 +27075,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -26853,19 +27109,20 @@
       "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==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
+      "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
       "requires": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
       },
       "dependencies": {
         "universalify": {
-          "version": "0.1.2",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+          "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg=="
         }
       }
     },
@@ -26909,9 +27166,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "tsutils": {
       "version": "3.21.0",
@@ -26964,9 +27221,9 @@
       }
     },
     "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ=="
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ=="
     },
     "unbox-primitive": {
       "version": "1.0.2",
@@ -26999,9 +27256,9 @@
       "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=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
     },
     "unique-string": {
       "version": "2.0.0",
@@ -27032,9 +27289,9 @@
       "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==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
+      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -27048,6 +27305,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -27079,11 +27345,6 @@
       "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",
@@ -27094,6 +27355,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -27252,9 +27518,9 @@
       }
     },
     "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==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
+      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
       "requires": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -27279,7 +27545,7 @@
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.1",
+        "selfsigned": "^2.1.1",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
@@ -27323,9 +27589,9 @@
           }
         },
         "ws": {
-          "version": "8.8.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
-          "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA=="
+          "version": "8.10.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.10.0.tgz",
+          "integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw=="
         }
       }
     },
@@ -27438,26 +27704,26 @@
       "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz",
+      "integrity": "sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==",
       "requires": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz",
+      "integrity": "sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "workbox-build": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.3.tgz",
-      "integrity": "sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.4.tgz",
+      "integrity": "sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==",
       "requires": {
         "@apideck/better-ajv-errors": "^0.3.1",
         "@babel/core": "^7.11.1",
@@ -27481,21 +27747,21 @@
         "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"
+        "workbox-background-sync": "6.5.4",
+        "workbox-broadcast-update": "6.5.4",
+        "workbox-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-google-analytics": "6.5.4",
+        "workbox-navigation-preload": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-range-requests": "6.5.4",
+        "workbox-recipes": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4",
+        "workbox-streams": "6.5.4",
+        "workbox-sw": "6.5.4",
+        "workbox-window": "6.5.4"
       },
       "dependencies": {
         "ajv": {
@@ -27559,117 +27825,117 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz",
+      "integrity": "sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.4.tgz",
+      "integrity": "sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q=="
     },
     "workbox-expiration": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.3.tgz",
-      "integrity": "sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.4.tgz",
+      "integrity": "sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==",
       "requires": {
-        "idb": "^6.1.4",
-        "workbox-core": "6.5.3"
+        "idb": "^7.0.1",
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz",
+      "integrity": "sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==",
       "requires": {
-        "workbox-background-sync": "6.5.3",
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-background-sync": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz",
+      "integrity": "sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.4.tgz",
+      "integrity": "sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==",
       "requires": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3",
-        "workbox-strategies": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz",
+      "integrity": "sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "workbox-recipes": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.3.tgz",
-      "integrity": "sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.4.tgz",
+      "integrity": "sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==",
       "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-cacheable-response": "6.5.4",
+        "workbox-core": "6.5.4",
+        "workbox-expiration": "6.5.4",
+        "workbox-precaching": "6.5.4",
+        "workbox-routing": "6.5.4",
+        "workbox-strategies": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.4.tgz",
+      "integrity": "sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "workbox-strategies": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.3.tgz",
-      "integrity": "sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.4.tgz",
+      "integrity": "sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==",
       "requires": {
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.4.tgz",
+      "integrity": "sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==",
       "requires": {
-        "workbox-core": "6.5.3",
-        "workbox-routing": "6.5.3"
+        "workbox-core": "6.5.4",
+        "workbox-routing": "6.5.4"
       }
     },
     "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=="
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.4.tgz",
+      "integrity": "sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA=="
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz",
+      "integrity": "sha512-LmWm/zoaahe0EGmMTrSLUi+BjyR3cdGEfU3fS6PN1zKFYbqAKuQ+Oy/27e4VSXsyIwAw8+QDfk1XHNGtZu9nQg==",
       "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"
+        "workbox-build": "6.5.4"
       },
       "dependencies": {
         "source-map": {
@@ -27689,12 +27955,12 @@
       }
     },
     "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==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.4.tgz",
+      "integrity": "sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==",
       "requires": {
         "@types/trusted-types": "^2.0.2",
-        "workbox-core": "6.5.3"
+        "workbox-core": "6.5.4"
       }
     },
     "wrap-ansi": {
diff --git a/static/code/stackblitz/v6/react/package.json b/static/code/stackblitz/v6/react/package.json
index b7baa1c2353..90634435121 100644
--- a/static/code/stackblitz/v6/react/package.json
+++ b/static/code/stackblitz/v6/react/package.json
@@ -4,11 +4,14 @@
   "private": true,
   "dependencies": {
     "@ionic/react": "^6.0.0",
+    "@ionic/react-router": "^6.0.0",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@types/react-router-dom": "^5.1.7",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
diff --git a/static/code/stackblitz/v6/vue/package-lock.json b/static/code/stackblitz/v6/vue/package-lock.json
index a3c9968e5ba..2d57886e494 100644
--- a/static/code/stackblitz/v6/vue/package-lock.json
+++ b/static/code/stackblitz/v6/vue/package-lock.json
@@ -8,7 +8,8 @@
       "name": "vite-vue-starter",
       "version": "0.0.0",
       "dependencies": {
-        "@ionic/vue": "^6.3.2",
+        "@ionic/vue": "^6.0.0",
+        "@ionic/vue-router": "^6.0.0",
         "vue": "^3.2.25",
         "vue-router": "4.0.13"
       },
@@ -20,9 +21,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.0.tgz",
+      "integrity": "sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -30,10 +31,26 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
+      "integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@ionic/core": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
-      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
+      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -41,18 +58,26 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.2.tgz",
-      "integrity": "sha512-jvcqcVG6cgFBP+JtLW1dg8a77wYLsFpx1vcC0LK59OmFVLkEIcE6TodhXmfaJVglkXTVMbzPRvO7xIUVHydQzQ==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.3.tgz",
+      "integrity": "sha512-MIbnZ1A046ugZroeoK+Tsaykl134bFd5P072JhNQtMAbUFiEfhTkWenbge2DJV8hKPfYmWtZzPze6i0tyw0wlw==",
       "dependencies": {
-        "@ionic/core": "^6.3.2",
+        "@ionic/core": "^6.3.3",
         "ionicons": "^6.0.2"
       }
     },
+    "node_modules/@ionic/vue-router": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.3.3.tgz",
+      "integrity": "sha512-NtLqI0OCrjBrnNQKGVMPFZNhd5wE8ffXjThHcxQUyr+Gsh3EaMBWHr8vu7CPobxUWZMIMgXSMsgKJlFyJU6lCg==",
+      "dependencies": {
+        "@ionic/vue": "^6.3.3"
+      }
+    },
     "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==",
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -62,9 +87,9 @@
       }
     },
     "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==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
+      "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0"
@@ -116,36 +141,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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.41.tgz",
+      "integrity": "sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.37",
+        "@vue/shared": "3.2.41",
         "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz",
+      "integrity": "sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-core": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz",
+      "integrity": "sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==",
       "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",
+        "@vue/compiler-core": "3.2.41",
+        "@vue/compiler-dom": "3.2.41",
+        "@vue/compiler-ssr": "3.2.41",
+        "@vue/reactivity-transform": "3.2.41",
+        "@vue/shared": "3.2.41",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -153,84 +178,84 @@
       }
     },
     "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz",
+      "integrity": "sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-dom": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "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=="
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
     },
     "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
+      "integrity": "sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==",
       "dependencies": {
-        "@vue/shared": "3.2.37"
+        "@vue/shared": "3.2.41"
       }
     },
     "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz",
+      "integrity": "sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/compiler-core": "3.2.41",
+        "@vue/shared": "3.2.41",
         "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.41.tgz",
+      "integrity": "sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==",
       "dependencies": {
-        "@vue/reactivity": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/reactivity": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz",
+      "integrity": "sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/runtime-core": "3.2.41",
+        "@vue/shared": "3.2.41",
         "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.41.tgz",
+      "integrity": "sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-ssr": "3.2.41",
+        "@vue/shared": "3.2.41"
       },
       "peerDependencies": {
-        "vue": "3.2.37"
+        "vue": "3.2.41"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.37",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
-      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz",
+      "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw=="
     },
     "node_modules/csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "node_modules/esbuild": {
-      "version": "0.14.50",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.50.tgz",
-      "integrity": "sha512-SbC3k35Ih2IC6trhbMYW7hYeGdjPKf9atTKwBUHqMCYFZZ9z8zhuvfnZihsnJypl74FjiAKjBRqFkBkAd0rS/w==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
+      "integrity": "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -240,32 +265,33 @@
         "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"
+        "@esbuild/linux-loong64": "0.14.54",
+        "esbuild-android-64": "0.14.54",
+        "esbuild-android-arm64": "0.14.54",
+        "esbuild-darwin-64": "0.14.54",
+        "esbuild-darwin-arm64": "0.14.54",
+        "esbuild-freebsd-64": "0.14.54",
+        "esbuild-freebsd-arm64": "0.14.54",
+        "esbuild-linux-32": "0.14.54",
+        "esbuild-linux-64": "0.14.54",
+        "esbuild-linux-arm": "0.14.54",
+        "esbuild-linux-arm64": "0.14.54",
+        "esbuild-linux-mips64le": "0.14.54",
+        "esbuild-linux-ppc64le": "0.14.54",
+        "esbuild-linux-riscv64": "0.14.54",
+        "esbuild-linux-s390x": "0.14.54",
+        "esbuild-netbsd-64": "0.14.54",
+        "esbuild-openbsd-64": "0.14.54",
+        "esbuild-sunos-64": "0.14.54",
+        "esbuild-windows-32": "0.14.54",
+        "esbuild-windows-64": "0.14.54",
+        "esbuild-windows-arm64": "0.14.54"
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
+      "integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
       "cpu": [
         "x64"
       ],
@@ -279,9 +305,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
+      "integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
       "cpu": [
         "arm64"
       ],
@@ -295,9 +321,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
+      "integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
       "cpu": [
         "x64"
       ],
@@ -311,9 +337,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
+      "integrity": "sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==",
       "cpu": [
         "arm64"
       ],
@@ -327,9 +353,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
+      "integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
       "cpu": [
         "x64"
       ],
@@ -343,9 +369,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
+      "integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
       "cpu": [
         "arm64"
       ],
@@ -359,9 +385,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
+      "integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
       "cpu": [
         "ia32"
       ],
@@ -375,9 +401,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
       "cpu": [
         "x64"
       ],
@@ -391,9 +417,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
+      "integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
       "cpu": [
         "arm"
       ],
@@ -407,9 +433,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
+      "integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
       "cpu": [
         "arm64"
       ],
@@ -423,9 +449,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
+      "integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
       "cpu": [
         "mips64el"
       ],
@@ -439,9 +465,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
+      "integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
       "cpu": [
         "ppc64"
       ],
@@ -455,9 +481,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
+      "integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
       "cpu": [
         "riscv64"
       ],
@@ -471,9 +497,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
+      "integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
       "cpu": [
         "s390x"
       ],
@@ -487,9 +513,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
+      "integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
       "cpu": [
         "x64"
       ],
@@ -503,9 +529,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
+      "integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
       "cpu": [
         "x64"
       ],
@@ -519,9 +545,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
+      "integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
       "cpu": [
         "x64"
       ],
@@ -535,9 +561,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
+      "integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
       "cpu": [
         "ia32"
       ],
@@ -551,9 +577,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
+      "integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
       "cpu": [
         "x64"
       ],
@@ -567,9 +593,9 @@
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
+      "integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
       "cpu": [
         "arm64"
       ],
@@ -640,9 +666,9 @@
       }
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dev": true,
       "dependencies": {
         "has": "^1.0.3"
@@ -682,9 +708,9 @@
       "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==",
+      "version": "8.4.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
       "funding": [
         {
           "type": "opencollective",
@@ -722,9 +748,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.77.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.3.tgz",
+      "integrity": "sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -770,14 +796,14 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -788,15 +814,15 @@
       }
     },
     "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==",
+      "version": "2.9.15",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
+      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
         "postcss": "^8.4.13",
         "resolve": "^1.22.0",
-        "rollup": "^2.59.0"
+        "rollup": ">=2.59.0 <2.78.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -825,15 +851,15 @@
       }
     },
     "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.41.tgz",
+      "integrity": "sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==",
       "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"
+        "@vue/compiler-dom": "3.2.41",
+        "@vue/compiler-sfc": "3.2.41",
+        "@vue/runtime-dom": "3.2.41",
+        "@vue/server-renderer": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "node_modules/vue-router": {
@@ -868,14 +894,21 @@
   },
   "dependencies": {
     "@babel/parser": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
-      "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.0.tgz",
+      "integrity": "sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg=="
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
+      "integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
+      "dev": true,
+      "optional": true
     },
     "@ionic/core": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz",
-      "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
+      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -883,23 +916,31 @@
       }
     },
     "@ionic/vue": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.2.tgz",
-      "integrity": "sha512-jvcqcVG6cgFBP+JtLW1dg8a77wYLsFpx1vcC0LK59OmFVLkEIcE6TodhXmfaJVglkXTVMbzPRvO7xIUVHydQzQ==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.3.tgz",
+      "integrity": "sha512-MIbnZ1A046ugZroeoK+Tsaykl134bFd5P072JhNQtMAbUFiEfhTkWenbge2DJV8hKPfYmWtZzPze6i0tyw0wlw==",
       "requires": {
-        "@ionic/core": "^6.3.2",
+        "@ionic/core": "^6.3.3",
         "ionicons": "^6.0.2"
       }
     },
+    "@ionic/vue-router": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.3.3.tgz",
+      "integrity": "sha512-NtLqI0OCrjBrnNQKGVMPFZNhd5wE8ffXjThHcxQUyr+Gsh3EaMBWHr8vu7CPobxUWZMIMgXSMsgKJlFyJU6lCg==",
+      "requires": {
+        "@ionic/vue": "^6.3.3"
+      }
+    },
     "@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=="
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA=="
     },
     "@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==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
+      "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
       "dev": true
     },
     "@volar/code-gen": {
@@ -944,36 +985,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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.41.tgz",
+      "integrity": "sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.37",
+        "@vue/shared": "3.2.41",
         "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz",
+      "integrity": "sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==",
       "requires": {
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-core": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "@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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz",
+      "integrity": "sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==",
       "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",
+        "@vue/compiler-core": "3.2.41",
+        "@vue/compiler-dom": "3.2.41",
+        "@vue/compiler-ssr": "3.2.41",
+        "@vue/reactivity-transform": "3.2.41",
+        "@vue/shared": "3.2.41",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -981,242 +1022,243 @@
       }
     },
     "@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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz",
+      "integrity": "sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==",
       "requires": {
-        "@vue/compiler-dom": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-dom": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "@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=="
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
     },
     "@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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
+      "integrity": "sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==",
       "requires": {
-        "@vue/shared": "3.2.37"
+        "@vue/shared": "3.2.41"
       }
     },
     "@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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz",
+      "integrity": "sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/compiler-core": "3.2.41",
+        "@vue/shared": "3.2.41",
         "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.41.tgz",
+      "integrity": "sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==",
       "requires": {
-        "@vue/reactivity": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/reactivity": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "@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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz",
+      "integrity": "sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==",
       "requires": {
-        "@vue/runtime-core": "3.2.37",
-        "@vue/shared": "3.2.37",
+        "@vue/runtime-core": "3.2.41",
+        "@vue/shared": "3.2.41",
         "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==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.41.tgz",
+      "integrity": "sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.37",
-        "@vue/shared": "3.2.37"
+        "@vue/compiler-ssr": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "@vue/shared": {
-      "version": "3.2.37",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
-      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz",
+      "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw=="
     },
     "csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "esbuild": {
-      "version": "0.14.50",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.50.tgz",
-      "integrity": "sha512-SbC3k35Ih2IC6trhbMYW7hYeGdjPKf9atTKwBUHqMCYFZZ9z8zhuvfnZihsnJypl74FjiAKjBRqFkBkAd0rS/w==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
+      "integrity": "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==",
       "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/linux-loong64": "0.14.54",
+        "esbuild-android-64": "0.14.54",
+        "esbuild-android-arm64": "0.14.54",
+        "esbuild-darwin-64": "0.14.54",
+        "esbuild-darwin-arm64": "0.14.54",
+        "esbuild-freebsd-64": "0.14.54",
+        "esbuild-freebsd-arm64": "0.14.54",
+        "esbuild-linux-32": "0.14.54",
+        "esbuild-linux-64": "0.14.54",
+        "esbuild-linux-arm": "0.14.54",
+        "esbuild-linux-arm64": "0.14.54",
+        "esbuild-linux-mips64le": "0.14.54",
+        "esbuild-linux-ppc64le": "0.14.54",
+        "esbuild-linux-riscv64": "0.14.54",
+        "esbuild-linux-s390x": "0.14.54",
+        "esbuild-netbsd-64": "0.14.54",
+        "esbuild-openbsd-64": "0.14.54",
+        "esbuild-sunos-64": "0.14.54",
+        "esbuild-windows-32": "0.14.54",
+        "esbuild-windows-64": "0.14.54",
+        "esbuild-windows-arm64": "0.14.54"
       }
     },
     "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
+      "integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
+      "integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
+      "integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
+      "integrity": "sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
+      "integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
+      "integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
+      "integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
+      "integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
+      "integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
+      "integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
+      "integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
+      "integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
+      "integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
+      "integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
+      "integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
+      "integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
+      "integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
+      "integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
       "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==",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
+      "integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
       "dev": true,
       "optional": true
     },
@@ -1263,9 +1305,9 @@
       }
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dev": true,
       "requires": {
         "has": "^1.0.3"
@@ -1296,9 +1338,9 @@
       "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==",
+      "version": "8.4.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -1317,9 +1359,9 @@
       }
     },
     "rollup": {
-      "version": "2.77.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.2.tgz",
-      "integrity": "sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==",
+      "version": "2.77.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.3.tgz",
+      "integrity": "sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -1347,39 +1389,39 @@
       "dev": true
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
       "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==",
+      "version": "2.9.15",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
+      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.27",
         "fsevents": "~2.3.2",
         "postcss": "^8.4.13",
         "resolve": "^1.22.0",
-        "rollup": "^2.59.0"
+        "rollup": ">=2.59.0 <2.78.0"
       }
     },
     "vue": {
-      "version": "3.2.37",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
-      "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+      "version": "3.2.41",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.41.tgz",
+      "integrity": "sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==",
       "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/compiler-dom": "3.2.41",
+        "@vue/compiler-sfc": "3.2.41",
+        "@vue/runtime-dom": "3.2.41",
+        "@vue/server-renderer": "3.2.41",
+        "@vue/shared": "3.2.41"
       }
     },
     "vue-router": {
diff --git a/static/code/stackblitz/v6/vue/package.json b/static/code/stackblitz/v6/vue/package.json
index 2b7c6123eee..162ec504221 100644
--- a/static/code/stackblitz/v6/vue/package.json
+++ b/static/code/stackblitz/v6/vue/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@ionic/vue": "^6.0.0",
+    "@ionic/vue-router": "^6.0.0",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
diff --git a/static/usage/v6/back-button/basic/angular/app_module_ts.md b/static/usage/v6/back-button/basic/angular/app_module_ts.md
new file mode 100644
index 00000000000..3c20b511446
--- /dev/null
+++ b/static/usage/v6/back-button/basic/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```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';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/back-button/basic/angular/example_component_html.md b/static/usage/v6/back-button/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v6/back-button/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="component"></ion-nav>
+```
diff --git a/static/usage/v6/back-button/basic/angular/example_component_ts.md b/static/usage/v6/back-button/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v6/back-button/basic/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/v6/back-button/basic/angular/page_one_component_ts.md b/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..d181c5a5268
--- /dev/null
+++ b/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <p>Navigate to the next page to see the back button.</p>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Navigate</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..3c39508e72c
--- /dev/null
+++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <p>Use the back button to navigate to the previous page.</p>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+
+}
+```
diff --git a/static/usage/v6/back-button/basic/demo.html b/static/usage/v6/back-button/basic/demo.html
new file mode 100644
index 00000000000..0ae16403ab7
--- /dev/null
+++ b/static/usage/v6/back-button/basic/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>Back 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-nav root="page-one"></ion-nav>
+  </ion-app>
+
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <p>Navigate to the next page to see the back button.</p>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Navigate</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>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <p>Use the back button to navigate to the previous page.</p>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.md
new file mode 100644
index 00000000000..499a6dbad81
--- /dev/null
+++ b/static/usage/v6/back-button/basic/index.md
@@ -0,0 +1,49 @@
+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 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 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';
+
+<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/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,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+      },
+    },
+  }}
+  src="usage/v6/back-button/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v6/back-button/basic/javascript.md b/static/usage/v6/back-button/basic/javascript.md
new file mode 100644
index 00000000000..5a8817ab291
--- /dev/null
+++ b/static/usage/v6/back-button/basic/javascript.md
@@ -0,0 +1,48 @@
+```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>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <ion-nav-link router-direction="forward" component="page-two">
+          <ion-button>Navigate</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>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </ion-content>
+    `;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+</script>
+```
diff --git a/static/usage/v6/back-button/basic/react/main_tsx.md b/static/usage/v6/back-button/basic/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v6/back-button/basic/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/v6/back-button/basic/react/page_one_tsx.md b/static/usage/v6/back-button/basic/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v6/back-button/basic/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```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>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Navigate</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v6/back-button/basic/react/page_two_tsx.md b/static/usage/v6/back-button/basic/react/page_two_tsx.md
new file mode 100644
index 00000000000..dcfbd7ca20b
--- /dev/null
+++ b/static/usage/v6/back-button/basic/react/page_two_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageTwo() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v6/back-button/basic/vue/example_vue.md b/static/usage/v6/back-button/basic/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v6/back-button/basic/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/v6/back-button/basic/vue/page_one_vue.md b/static/usage/v6/back-button/basic/vue/page_one_vue.md
new file mode 100644
index 00000000000..337a6877548
--- /dev/null
+++ b/static/usage/v6/back-button/basic/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <p>Navigate to the next page to see the back button.</p>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Navigate</ion-button>
+    </ion-nav-link>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonHeader, IonNavLink, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonButton, IonContent, IonHeader, IonNavLink, IonPage, IonTitle, IonToolbar },
+    data() {
+      return {
+        component: PageTwo,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v6/back-button/basic/vue/page_two_vue.md b/static/usage/v6/back-button/basic/vue/page_two_vue.md
new file mode 100644
index 00000000000..1192ca2936c
--- /dev/null
+++ b/static/usage/v6/back-button/basic/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <p>Use the back button to navigate to the previous page.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+
+  export default {
+    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }
+  };
+</script>
+```
diff --git a/static/usage/v6/back-button/custom/angular/app_module_ts.md b/static/usage/v6/back-button/custom/angular/app_module_ts.md
new file mode 100644
index 00000000000..3c20b511446
--- /dev/null
+++ b/static/usage/v6/back-button/custom/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```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';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/back-button/custom/angular/example_component_html.md b/static/usage/v6/back-button/custom/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v6/back-button/custom/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="component"></ion-nav>
+```
diff --git a/static/usage/v6/back-button/custom/angular/example_component_ts.md b/static/usage/v6/back-button/custom/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v6/back-button/custom/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/v6/back-button/custom/angular/page_one_component_ts.md b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..d181c5a5268
--- /dev/null
+++ b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <p>Navigate to the next page to see the back button.</p>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Navigate</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..31f76ac219a
--- /dev/null
+++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button text="Previous" icon="caret-back"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <p>Use the back button to navigate to the previous page.</p>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+
+}
+```
diff --git a/static/usage/v6/back-button/custom/demo.html b/static/usage/v6/back-button/custom/demo.html
new file mode 100644
index 00000000000..6ffc58dc997
--- /dev/null
+++ b/static/usage/v6/back-button/custom/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>Back 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-nav root="page-one"></ion-nav>
+  </ion-app>
+
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <p>Navigate to the next page to see the back button.</p>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Navigate</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 text="Previous" icon="caret-back"></ion-back-button>
+            </ion-buttons>
+            <ion-title>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <p>Use the back button to navigate to the previous page.</p>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md
new file mode 100644
index 00000000000..437c5d5a6a3
--- /dev/null
+++ b/static/usage/v6/back-button/custom/index.md
@@ -0,0 +1,49 @@
+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 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 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';
+
+<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/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,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+      },
+    },
+  }}
+  src="usage/v6/back-button/custom/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v6/back-button/custom/javascript.md b/static/usage/v6/back-button/custom/javascript.md
new file mode 100644
index 00000000000..1558cb48ad5
--- /dev/null
+++ b/static/usage/v6/back-button/custom/javascript.md
@@ -0,0 +1,48 @@
+```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>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <ion-nav-link router-direction="forward" component="page-two">
+          <ion-button>Navigate</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 text="Previous" icon="caret-back"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </ion-content>
+    `;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+</script>
+```
diff --git a/static/usage/v6/back-button/custom/react/main_tsx.md b/static/usage/v6/back-button/custom/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v6/back-button/custom/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/v6/back-button/custom/react/page_one_tsx.md b/static/usage/v6/back-button/custom/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v6/back-button/custom/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```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>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Navigate</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v6/back-button/custom/react/page_two_tsx.md b/static/usage/v6/back-button/custom/react/page_two_tsx.md
new file mode 100644
index 00000000000..34d30119913
--- /dev/null
+++ b/static/usage/v6/back-button/custom/react/page_two_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+import { caretBack } from 'ionicons/icons';
+
+function PageTwo() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text="Previous" icon={caretBack}></IonBackButton>
+          </IonButtons>
+          <IonTitle>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v6/back-button/custom/vue/example_vue.md b/static/usage/v6/back-button/custom/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v6/back-button/custom/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/v6/back-button/custom/vue/page_one_vue.md b/static/usage/v6/back-button/custom/vue/page_one_vue.md
new file mode 100644
index 00000000000..2702c543f5c
--- /dev/null
+++ b/static/usage/v6/back-button/custom/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <p>Navigate to the next page to see the back button.</p>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Navigate</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/v6/back-button/custom/vue/page_two_vue.md b/static/usage/v6/back-button/custom/vue/page_two_vue.md
new file mode 100644
index 00000000000..05de62654cb
--- /dev/null
+++ b/static/usage/v6/back-button/custom/vue/page_two_vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button text="Previous" :icon="caretBack"></ion-back-button>
+      </ion-buttons>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <p>Use the back button to navigate to the previous page.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+  import { caretBack } from 'ionicons/icons';
+
+  export default {
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
+    setup() {
+      return { caretBack }
+    }
+  };
+</script>
+```
diff --git a/static/usage/v7/back-button/basic/angular/app_module_ts.md b/static/usage/v7/back-button/basic/angular/app_module_ts.md
new file mode 100644
index 00000000000..3c20b511446
--- /dev/null
+++ b/static/usage/v7/back-button/basic/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```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';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/back-button/basic/angular/example_component_html.md b/static/usage/v7/back-button/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v7/back-button/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="component"></ion-nav>
+```
diff --git a/static/usage/v7/back-button/basic/angular/example_component_ts.md b/static/usage/v7/back-button/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v7/back-button/basic/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/back-button/basic/angular/page_one_component_ts.md b/static/usage/v7/back-button/basic/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..d181c5a5268
--- /dev/null
+++ b/static/usage/v7/back-button/basic/angular/page_one_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <p>Navigate to the next page to see the back button.</p>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Navigate</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..3c39508e72c
--- /dev/null
+++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <p>Use the back button to navigate to the previous page.</p>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+
+}
+```
diff --git a/static/usage/v7/back-button/basic/demo.html b/static/usage/v7/back-button/basic/demo.html
new file mode 100644
index 00000000000..d2eb786b4b8
--- /dev/null
+++ b/static/usage/v7/back-button/basic/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>Back Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/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>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <p>Navigate to the next page to see the back button.</p>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Navigate</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>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <p>Use the back button to navigate to the previous page.</p>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md
new file mode 100644
index 00000000000..6a75d1be5f1
--- /dev/null
+++ b/static/usage/v7/back-button/basic/index.md
@@ -0,0 +1,49 @@
+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 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 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';
+
+<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/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,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+      },
+    },
+  }}
+  src="usage/v7/back-button/basic/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/back-button/basic/javascript.md b/static/usage/v7/back-button/basic/javascript.md
new file mode 100644
index 00000000000..5a8817ab291
--- /dev/null
+++ b/static/usage/v7/back-button/basic/javascript.md
@@ -0,0 +1,48 @@
+```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>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <ion-nav-link router-direction="forward" component="page-two">
+          <ion-button>Navigate</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>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </ion-content>
+    `;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+</script>
+```
diff --git a/static/usage/v7/back-button/basic/react/main_tsx.md b/static/usage/v7/back-button/basic/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v7/back-button/basic/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/back-button/basic/react/page_one_tsx.md b/static/usage/v7/back-button/basic/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v7/back-button/basic/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```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>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Navigate</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/back-button/basic/react/page_two_tsx.md b/static/usage/v7/back-button/basic/react/page_two_tsx.md
new file mode 100644
index 00000000000..dcfbd7ca20b
--- /dev/null
+++ b/static/usage/v7/back-button/basic/react/page_two_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageTwo() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/back-button/basic/vue/example_vue.md b/static/usage/v7/back-button/basic/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v7/back-button/basic/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/back-button/basic/vue/page_one_vue.md b/static/usage/v7/back-button/basic/vue/page_one_vue.md
new file mode 100644
index 00000000000..337a6877548
--- /dev/null
+++ b/static/usage/v7/back-button/basic/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <p>Navigate to the next page to see the back button.</p>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Navigate</ion-button>
+    </ion-nav-link>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonHeader, IonNavLink, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonButton, IonContent, IonHeader, IonNavLink, IonPage, IonTitle, IonToolbar },
+    data() {
+      return {
+        component: PageTwo,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md
new file mode 100644
index 00000000000..1192ca2936c
--- /dev/null
+++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <p>Use the back button to navigate to the previous page.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+
+  export default {
+    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }
+  };
+</script>
+```
diff --git a/static/usage/v7/back-button/custom/angular/app_module_ts.md b/static/usage/v7/back-button/custom/angular/app_module_ts.md
new file mode 100644
index 00000000000..3c20b511446
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```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';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/back-button/custom/angular/example_component_html.md b/static/usage/v7/back-button/custom/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="component"></ion-nav>
+```
diff --git a/static/usage/v7/back-button/custom/angular/example_component_ts.md b/static/usage/v7/back-button/custom/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v7/back-button/custom/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/back-button/custom/angular/page_one_component_ts.md b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..d181c5a5268
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <p>Navigate to the next page to see the back button.</p>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Navigate</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..31f76ac219a
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button text="Previous" icon="caret-back"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <p>Use the back button to navigate to the previous page.</p>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+
+}
+```
diff --git a/static/usage/v7/back-button/custom/demo.html b/static/usage/v7/back-button/custom/demo.html
new file mode 100644
index 00000000000..c2c7c6ce8f2
--- /dev/null
+++ b/static/usage/v7/back-button/custom/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>Back Button</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/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>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <p>Navigate to the next page to see the back button.</p>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Navigate</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 text="Previous" icon="caret-back"></ion-back-button>
+            </ion-buttons>
+            <ion-title>Back Button</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <p>Use the back button to navigate to the previous page.</p>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md
new file mode 100644
index 00000000000..d09cfdb97d7
--- /dev/null
+++ b/static/usage/v7/back-button/custom/index.md
@@ -0,0 +1,49 @@
+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 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 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';
+
+<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/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,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+      },
+    },
+  }}
+  src="usage/v7/back-button/custom/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/back-button/custom/javascript.md b/static/usage/v7/back-button/custom/javascript.md
new file mode 100644
index 00000000000..1558cb48ad5
--- /dev/null
+++ b/static/usage/v7/back-button/custom/javascript.md
@@ -0,0 +1,48 @@
+```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>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <ion-nav-link router-direction="forward" component="page-two">
+          <ion-button>Navigate</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 text="Previous" icon="caret-back"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </ion-content>
+    `;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+</script>
+```
diff --git a/static/usage/v7/back-button/custom/react/main_tsx.md b/static/usage/v7/back-button/custom/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v7/back-button/custom/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/back-button/custom/react/page_one_tsx.md b/static/usage/v7/back-button/custom/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v7/back-button/custom/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```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>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page One</h1>
+        <p>Navigate to the next page to see the back button.</p>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Navigate</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/back-button/custom/react/page_two_tsx.md b/static/usage/v7/back-button/custom/react/page_two_tsx.md
new file mode 100644
index 00000000000..34d30119913
--- /dev/null
+++ b/static/usage/v7/back-button/custom/react/page_two_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+import { caretBack } from 'ionicons/icons';
+
+function PageTwo() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text="Previous" icon={caretBack}></IonBackButton>
+          </IonButtons>
+          <IonTitle>Back Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/back-button/custom/vue/example_vue.md b/static/usage/v7/back-button/custom/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v7/back-button/custom/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/back-button/custom/vue/page_one_vue.md b/static/usage/v7/back-button/custom/vue/page_one_vue.md
new file mode 100644
index 00000000000..2702c543f5c
--- /dev/null
+++ b/static/usage/v7/back-button/custom/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <p>Navigate to the next page to see the back button.</p>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Navigate</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/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md
new file mode 100644
index 00000000000..05de62654cb
--- /dev/null
+++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button text="Previous" :icon="caretBack"></ion-back-button>
+      </ion-buttons>
+      <ion-title>Back Button</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <p>Use the back button to navigate to the previous page.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+  import { caretBack } from 'ionicons/icons';
+
+  export default {
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
+    setup() {
+      return { caretBack }
+    }
+  };
+</script>
+```
diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.md
index 89ae57ad0ee..d74db2d2cfa 100644
--- a/versioned_docs/version-v6/api/back-button.md
+++ b/versioned_docs/version-v6/api/back-button.md
@@ -1,13 +1,6 @@
 ---
 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';
@@ -24,333 +17,26 @@ 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">
+The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized.
 
-```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>
+## Basic Usage
 
-  <!-- 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>
+import Basic from '@site/static/usage/v6/back-button/basic/index.md';
 
-  <!-- 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>
+<Basic />
 
-  <!-- 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>
+## Custom Back Button
 
-  <!-- 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>
+By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the Config docs for [Angular](/docs/angular/config), [React](/docs/react/config), or [Vue](/docs/vue/config) for more information.
 
-<script>
-import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import Custom from '@site/static/usage/v6/back-button/custom/index.md';
 
-export default defineComponent({
-  components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }
-});
-</script>
-```
+<Custom />
 
-</TabItem>
+## Default Back History
 
-</Tabs>
+Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set.
 
 ## Properties
 <Props />
@@ -368,4 +54,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 8a5ccca2722ad5386c5cb16a3efb3bc6f8958401 Mon Sep 17 00:00:00 2001
From: Ken Sodemann <ken@ionic.io>
Date: Tue, 31 Jan 2023 18:07:48 -0600
Subject: [PATCH 190/469] doc(migration): add ChromeAndroid to the browser list
 file

---
 docs/updating/7-0.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index 3b5fc3a8d9c..21b5cc86e0a 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -75,6 +75,7 @@ If you have a `browserslist` or `.browserslistrc` file, update it with the follo
 
 ```
 Chrome >=79
+ChromeAndroid >=79
 Firefox >=70
 Edge >=79
 Safari >=14

From b67bb5e770a594234684163011d96d0c3db8b6d8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Feb 2023 10:12:32 -0500
Subject: [PATCH 191/469] docs(radio): update for new syntax, add migration
 guide (#2746)

---
 docs/api/radio.md                             |  44 ++++
 static/usage/v7/radio/basic/angular.md        |  29 +--
 static/usage/v7/radio/basic/demo.html         |  35 +---
 static/usage/v7/radio/basic/index.md          |   2 +-
 static/usage/v7/radio/basic/javascript.md     |  29 +--
 static/usage/v7/radio/basic/react.md          |  31 +--
 static/usage/v7/radio/basic/vue.md            |  33 +--
 .../usage/v7/radio/empty-selection/angular.md |  29 +--
 .../usage/v7/radio/empty-selection/demo.html  |  41 +---
 .../usage/v7/radio/empty-selection/index.md   |   1 -
 .../v7/radio/empty-selection/javascript.md    |  29 +--
 .../usage/v7/radio/empty-selection/react.md   |  31 +--
 static/usage/v7/radio/empty-selection/vue.md  |  33 +--
 static/usage/v7/radio/justify/angular.md      |  21 ++
 static/usage/v7/radio/justify/demo.html       |  46 +++++
 static/usage/v7/radio/justify/index.md        |   8 +
 static/usage/v7/radio/justify/javascript.md   |  21 ++
 static/usage/v7/radio/justify/react.md        |  29 +++
 static/usage/v7/radio/justify/vue.md          |  32 +++
 .../usage/v7/radio/label-placement/angular.md |  17 ++
 .../usage/v7/radio/label-placement/demo.html  |  40 ++++
 .../usage/v7/radio/label-placement/index.md   |   8 +
 .../v7/radio/label-placement/javascript.md    |  17 ++
 .../usage/v7/radio/label-placement/react.md   |  27 +++
 static/usage/v7/radio/label-placement/vue.md  |  28 +++
 static/usage/v7/radio/migration/index.md      | 188 ++++++++++++++++++
 .../usage/v7/radio/theming/colors/angular.md  |  18 +-
 .../usage/v7/radio/theming/colors/demo.html   |  28 ++-
 .../v7/radio/theming/colors/javascript.md     |  18 +-
 static/usage/v7/radio/theming/colors/react.md |  18 +-
 static/usage/v7/radio/theming/colors/vue.md   |  18 +-
 .../angular/example_component_css.md          |   4 +-
 .../angular/example_component_html.md         |   4 +-
 .../v7/radio/theming/css-properties/demo.html |  14 +-
 .../theming/css-properties/javascript.md      |  16 +-
 .../theming/css-properties/react/main_css.md  |   4 +-
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 .../v7/radio/theming/css-properties/vue.md    |  16 +-
 .../angular/example_component_css.md          |   6 +-
 .../angular/example_component_html.md         |   4 +-
 .../radio/theming/css-shadow-parts/demo.html  |  14 +-
 .../theming/css-shadow-parts/javascript.md    |  10 +-
 .../css-shadow-parts/react/main_css.md        |   6 +-
 .../css-shadow-parts/react/main_tsx.md        |   4 +-
 .../v7/radio/theming/css-shadow-parts/vue.md  |   8 +-
 45 files changed, 699 insertions(+), 364 deletions(-)
 create mode 100644 static/usage/v7/radio/justify/angular.md
 create mode 100644 static/usage/v7/radio/justify/demo.html
 create mode 100644 static/usage/v7/radio/justify/index.md
 create mode 100644 static/usage/v7/radio/justify/javascript.md
 create mode 100644 static/usage/v7/radio/justify/react.md
 create mode 100644 static/usage/v7/radio/justify/vue.md
 create mode 100644 static/usage/v7/radio/label-placement/angular.md
 create mode 100644 static/usage/v7/radio/label-placement/demo.html
 create mode 100644 static/usage/v7/radio/label-placement/index.md
 create mode 100644 static/usage/v7/radio/label-placement/javascript.md
 create mode 100644 static/usage/v7/radio/label-placement/react.md
 create mode 100644 static/usage/v7/radio/label-placement/vue.md
 create mode 100644 static/usage/v7/radio/migration/index.md

diff --git a/docs/api/radio.md b/docs/api/radio.md
index 326bcc3082d..b5f94c0b8fb 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -28,6 +28,26 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
 
 <Basic />
 
+## Label Placement
+
+Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+
+import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
+
+<LabelPlacement />
+
+## Justification
+
+Developers can use the `justify` property to control how the label and control are packed on a line.
+
+import Justify from '@site/static/usage/v7/radio/justify/index.md';
+
+<Justify />
+
+
+:::note
+`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
+:::
 
 ## Deselecting Radios
 
@@ -58,6 +78,30 @@ import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index
 
 <CSSParts />
 
+## Migrating from Legacy Radio Syntax
+
+A simpler radio syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an radio, resolves accessibility issues, and improves the developer experience.
+
+Developers can perform this migration one radio at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+### Using the Modern Syntax
+
+Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-radio`. The placement of the label can be configured using the `labelPlacement` property on `ion-radio`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-radio`.
+
+import Migration from '@site/static/usage/v7/radio/migration/index.md';
+
+<Migration />
+  
+
+:::note
+In past versions of Ionic, `ion-item` was required for `ion-radio` to function properly. Starting in Ionic 7.0, `ion-radio` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-radio` to function properly.
+:::
+
+### Using the Legacy Syntax
+
+Ionic uses heuristics to detect if an app is using the modern radio syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-radio` to `true` to force that instance of the radio to use the legacy syntax.
+
+
 
 ## Properties
 <Props />
diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md
index 6e14ab487f5..47f36bcad0e 100644
--- a/static/usage/v7/radio/basic/angular.md
+++ b/static/usage/v7/radio/basic/angular.md
@@ -1,25 +1,8 @@
 ```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>
+<ion-radio-group value="strawberries">
+  <ion-radio value="grapes">Grapes</ion-radio><br/>
+  <ion-radio value="strawberries">Strawberries</ion-radio><br />
+  <ion-radio value="pineapple">Pineapple</ion-radio><br />
+  <ion-radio value="cherries">Cherries</ion-radio>
+</ion-radio-group>
 ```
diff --git a/static/usage/v7/radio/basic/demo.html b/static/usage/v7/radio/basic/demo.html
index 896041e948e..7b8c23e8d4d 100644
--- a/static/usage/v7/radio/basic/demo.html
+++ b/static/usage/v7/radio/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-list {
@@ -21,32 +21,15 @@
   <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>
+        <ion-radio-group value="strawberries">
+          <ion-radio value="grapes">Grapes</ion-radio><br/>
+          <ion-radio value="strawberries">Strawberries</ion-radio><br />
+          <ion-radio value="pineapple">Pineapple</ion-radio><br />
+          <ion-radio value="cherries">Cherries</ion-radio>
+        </ion-radio-group>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/radio/basic/index.md b/static/usage/v7/radio/basic/index.md
index 51b959cf0d4..25f829a31fe 100644
--- a/static/usage/v7/radio/basic/index.md
+++ b/static/usage/v7/radio/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/radio/basic/demo.html" />
diff --git a/static/usage/v7/radio/basic/javascript.md b/static/usage/v7/radio/basic/javascript.md
index 23b545a77ba..47f36bcad0e 100644
--- a/static/usage/v7/radio/basic/javascript.md
+++ b/static/usage/v7/radio/basic/javascript.md
@@ -1,25 +1,8 @@
 ```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>
+<ion-radio-group value="strawberries">
+  <ion-radio value="grapes">Grapes</ion-radio><br/>
+  <ion-radio value="strawberries">Strawberries</ion-radio><br />
+  <ion-radio value="pineapple">Pineapple</ion-radio><br />
+  <ion-radio value="cherries">Cherries</ion-radio>
+</ion-radio-group>
 ```
diff --git a/static/usage/v7/radio/basic/react.md b/static/usage/v7/radio/basic/react.md
index 55c404e1d22..f826499e307 100644
--- a/static/usage/v7/radio/basic/react.md
+++ b/static/usage/v7/radio/basic/react.md
@@ -1,32 +1,15 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+import { 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>
+    <IonRadioGroup value="strawberries">
+      <IonRadio value="grapes">Grapes</IonRadio><br/>
+      <IonRadio value="strawberries">Strawberries</IonRadio><br />
+      <IonRadio value="pineapple">Pineapple</IonRadio><br />
+      <IonRadio value="cherries">Cherries</IonRadio>
+    </IonRadioGroup>
   );
 }
 export default Example;
diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md
index b0e7187361c..cf4878155af 100644
--- a/static/usage/v7/radio/basic/vue.md
+++ b/static/usage/v7/radio/basic/vue.md
@@ -1,36 +1,19 @@
 ```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>
+  <ion-radio-group value="strawberries">
+    <ion-radio value="grapes">Grapes</ion-radio><br/>
+    <ion-radio value="strawberries">Strawberries</ion-radio><br />
+    <ion-radio value="pineapple">Pineapple</ion-radio><br />
+    <ion-radio value="cherries">Cherries</ion-radio>
+  </ion-radio-group>
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { IonRadio, IonRadioGroup } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup },
+    components: { IonRadio, IonRadioGroup },
   });
 </script>
 ```
diff --git a/static/usage/v7/radio/empty-selection/angular.md b/static/usage/v7/radio/empty-selection/angular.md
index 3709479a101..61e5c0d4e4b 100644
--- a/static/usage/v7/radio/empty-selection/angular.md
+++ b/static/usage/v7/radio/empty-selection/angular.md
@@ -1,25 +1,8 @@
 ```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>
+<ion-radio-group [allowEmptySelection]="true" value="turtles">
+  <ion-radio value="dogs">Dogs</ion-radio><br />
+  <ion-radio value="cats">Cats</ion-radio><br />
+  <ion-radio value="turtles">Turtles</ion-radio><br />
+  <ion-radio value="fish">Fish</ion-radio><br />
+</ion-radio-group>
 ```
diff --git a/static/usage/v7/radio/empty-selection/demo.html b/static/usage/v7/radio/empty-selection/demo.html
index 29731178d61..93daaeba65c 100644
--- a/static/usage/v7/radio/empty-selection/demo.html
+++ b/static/usage/v7/radio/empty-selection/demo.html
@@ -7,46 +7,23 @@
   <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>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </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>
+        <ion-radio-group allow-empty-selection="true" value="turtles">
+          <ion-radio value="dogs">Dogs</ion-radio><br />
+          <ion-radio value="cats">Cats</ion-radio><br />
+          <ion-radio value="turtles">Turtles</ion-radio><br />
+          <ion-radio value="fish">Fish</ion-radio><br />
+        </ion-radio-group>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.md
index af0a093ef34..e2f9b7a8613 100644
--- a/static/usage/v7/radio/empty-selection/index.md
+++ b/static/usage/v7/radio/empty-selection/index.md
@@ -9,5 +9,4 @@ import angular from './angular.md';
   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
index 85c59f7fa91..0a045fc9bb1 100644
--- a/static/usage/v7/radio/empty-selection/javascript.md
+++ b/static/usage/v7/radio/empty-selection/javascript.md
@@ -1,25 +1,8 @@
 ```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>
+<ion-radio-group allow-empty-selection="true" value="turtles">
+  <ion-radio value="dogs">Dogs</ion-radio><br />
+  <ion-radio value="cats">Cats</ion-radio><br />
+  <ion-radio value="turtles">Turtles</ion-radio><br />
+  <ion-radio value="fish">Fish</ion-radio><br />
+</ion-radio-group>
 ```
diff --git a/static/usage/v7/radio/empty-selection/react.md b/static/usage/v7/radio/empty-selection/react.md
index e9b05a45be1..a5509313782 100644
--- a/static/usage/v7/radio/empty-selection/react.md
+++ b/static/usage/v7/radio/empty-selection/react.md
@@ -1,32 +1,15 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+import { 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>
+    <IonRadioGroup allowEmptySelection={true} value="turtles">
+      <IonRadio value="dogs">Dogs</IonRadio><br />
+      <IonRadio value="cats">Cats</IonRadio><br />
+      <IonRadio value="turtles">Turtles</IonRadio><br />
+      <IonRadio value="fish">Fish</IonRadio><br />
+    </IonRadioGroup>
   );
 }
 export default Example;
diff --git a/static/usage/v7/radio/empty-selection/vue.md b/static/usage/v7/radio/empty-selection/vue.md
index 7a0bd6e7140..b80bac834b6 100644
--- a/static/usage/v7/radio/empty-selection/vue.md
+++ b/static/usage/v7/radio/empty-selection/vue.md
@@ -1,36 +1,19 @@
 ```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>
+  <ion-radio-group allow-empty-selection="true" value="turtles">
+    <ion-radio value="dogs">Dogs</ion-radio><br />
+    <ion-radio value="cats">Cats</ion-radio><br />
+    <ion-radio value="turtles">Turtles</ion-radio><br />
+    <ion-radio value="fish">Fish</ion-radio><br />
+  </ion-radio-group>
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { IonRadio, IonRadioGroup } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup },
+    components: { IonRadio, IonRadioGroup },
   });
 </script>
 ```
diff --git a/static/usage/v7/radio/justify/angular.md b/static/usage/v7/radio/justify/angular.md
new file mode 100644
index 00000000000..8ca8e3c568b
--- /dev/null
+++ b/static/usage/v7/radio/justify/angular.md
@@ -0,0 +1,21 @@
+```html
+<ion-list>
+  <ion-radio-group value="start">
+    <ion-item>
+      <ion-radio value="start" justify="start">Packed at the Start of Line</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="end">
+    <ion-item>
+      <ion-radio value="end" justify="end">Packed at the End of Line</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="space-between">
+    <ion-item>
+      <ion-radio value="space-between" justify="space-between">Space Between Label and Control</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/justify/demo.html b/static/usage/v7/radio/justify/demo.html
new file mode 100644
index 00000000000..a7047195d20
--- /dev/null
+++ b/static/usage/v7/radio/justify/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>Radio</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/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="start">
+              <ion-item>
+                <ion-radio value="start" justify="start">Packed at the Start of Line</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+
+            <ion-radio-group value="end">
+              <ion-item>
+                <ion-radio value="end" justify="end">Packed at the End of Line</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+
+            <ion-radio-group value="space-between">
+              <ion-item>
+                <ion-radio value="space-between" justify="space-between">Space Between Label and Control</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/radio/justify/index.md b/static/usage/v7/radio/justify/index.md
new file mode 100644
index 00000000000..3105943de6f
--- /dev/null
+++ b/static/usage/v7/radio/justify/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/justify/demo.html" />
diff --git a/static/usage/v7/radio/justify/javascript.md b/static/usage/v7/radio/justify/javascript.md
new file mode 100644
index 00000000000..8ca8e3c568b
--- /dev/null
+++ b/static/usage/v7/radio/justify/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-list>
+  <ion-radio-group value="start">
+    <ion-item>
+      <ion-radio value="start" justify="start">Packed at the Start of Line</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="end">
+    <ion-item>
+      <ion-radio value="end" justify="end">Packed at the End of Line</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="space-between">
+    <ion-item>
+      <ion-radio value="space-between" justify="space-between">Space Between Label and Control</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/justify/react.md b/static/usage/v7/radio/justify/react.md
new file mode 100644
index 00000000000..629c7d896ac
--- /dev/null
+++ b/static/usage/v7/radio/justify/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonRadioGroup value="start">
+        <IonItem>
+          <IonRadio value="start" justify="start">Packed at the Start of Line</IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    
+      <IonRadioGroup value="end">
+        <IonItem>
+          <IonRadio value="end" justify="end">Packed at the End of Line</IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    
+      <IonRadioGroup value="space-between">
+        <IonItem>
+          <IonRadio value="space-between" justify="space-between">Space Between Label and Control</IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/justify/vue.md b/static/usage/v7/radio/justify/vue.md
new file mode 100644
index 00000000000..3921f552a39
--- /dev/null
+++ b/static/usage/v7/radio/justify/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group value="start">
+      <ion-item>
+        <ion-radio value="start" justify="start">Packed at the Start of Line</ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  
+    <ion-radio-group value="end">
+      <ion-item>
+        <ion-radio value="end" justify="end">Packed at the End of Line</ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  
+    <ion-radio-group value="space-between">
+      <ion-item>
+        <ion-radio value="space-between" justify="space-between">Space Between Label and Control</ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonRadio, IonRadioGroup },
+  });
+</script>
+```
diff --git a/static/usage/v7/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular.md
new file mode 100644
index 00000000000..9caedfee363
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/angular.md
@@ -0,0 +1,17 @@
+```html
+<ion-radio-group value="start">
+  <ion-radio value="start" labelPlacement="start">Label at the Start</ion-radio>
+</ion-radio-group>
+
+<br />
+
+<ion-radio-group value="end">
+  <ion-radio value="end" labelPlacement="end">Label at the End</ion-radio>
+</ion-radio-group>
+
+<br />
+
+<ion-radio-group value="fixed">
+  <ion-radio value="fixed" labelPlacement="fixed">Fixed Width Label</ion-radio>
+</ion-radio-group>
+```
diff --git a/static/usage/v7/radio/label-placement/demo.html b/static/usage/v7/radio/label-placement/demo.html
new file mode 100644
index 00000000000..ebdfc5ae5c5
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/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>Radio</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div>
+          <ion-radio-group value="start">
+            <ion-radio value="start" label-placement="start">Label at the Start</ion-radio>
+          </ion-radio-group>
+
+          <br />
+
+          <ion-radio-group value="end">
+            <ion-radio value="end" label-placement="end">Label at the End</ion-radio>
+          </ion-radio-group>
+
+          <br />
+
+          <ion-radio-group value="fixed">
+            <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</ion-radio>
+          </ion-radio-group>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/radio/label-placement/index.md b/static/usage/v7/radio/label-placement/index.md
new file mode 100644
index 00000000000..24df0d8ca22
--- /dev/null
+++ b/static/usage/v7/radio/label-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/radio/label-placement/demo.html" />
diff --git a/static/usage/v7/radio/label-placement/javascript.md b/static/usage/v7/radio/label-placement/javascript.md
new file mode 100644
index 00000000000..f19fa4b10ac
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-radio-group value="start">
+  <ion-radio value="start" label-placement="start">Label at the Start</ion-radio>
+</ion-radio-group>
+
+<br />
+
+<ion-radio-group value="end">
+  <ion-radio value="end" label-placement="end">Label at the End</ion-radio>
+</ion-radio-group>
+
+<br />
+
+<ion-radio-group value="fixed">
+  <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</ion-radio>
+</ion-radio-group>
+```
diff --git a/static/usage/v7/radio/label-placement/react.md b/static/usage/v7/radio/label-placement/react.md
new file mode 100644
index 00000000000..9771d026953
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonRadioGroup value="start">
+        <IonRadio value="start" labelPlacement="start">Label at the Start</IonRadio>
+      </IonRadioGroup>
+      
+      <br />
+      
+      <IonRadioGroup value="end">
+        <IonRadio value="end" labelPlacement="end">Label at the End</IonRadio>
+      </IonRadioGroup>
+      
+      <br />
+      
+      <IonRadioGroup value="fixed">
+        <IonRadio value="fixed" labelPlacement="fixed">Fixed Width Label</IonRadio>
+      </IonRadioGroup>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/label-placement/vue.md b/static/usage/v7/radio/label-placement/vue.md
new file mode 100644
index 00000000000..02403f2fdd7
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-radio-group value="start">
+    <ion-radio value="start" label-placement="start">Label at the Start</ion-radio>
+  </ion-radio-group>
+  
+  <br />
+  
+  <ion-radio-group value="end">
+    <ion-radio value="end" label-placement="end">Label at the End</ion-radio>
+  </ion-radio-group>
+  
+  <br />
+  
+  <ion-radio-group value="fixed">
+    <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</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/migration/index.md b/static/usage/v7/radio/migration/index.md
new file mode 100644
index 00000000000..4c0477f1e4a
--- /dev/null
+++ b/static/usage/v7/radio/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````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
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio>Radio Label</ion-radio>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio label-placement="fixed">Radio Label</ion-radio>
+</ion-item>
+
+<!-- Radio at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio label-placement="end">Radio Label</ion-radio>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio>Radio Label</ion-radio>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio labelPlacement="fixed">Radio Label</ion-radio>
+</ion-item>
+
+<!-- Radio at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio labelPlacement="end">Radio Label</ion-radio>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel>Radio Label</IonLabel>
+  <IonRadio></IonRadio>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonRadio>Radio Label</IonRadio>
+</IonItem>
+
+{/* Fixed Labels */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel position="fixed">Radio Label</IonLabel>
+  <IonRadio></IonRadio>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonRadio labelPlacement="fixed">Radio Label</IonRadio>
+</IonItem>
+
+{/* Radio at the start of line, Label at the end of line */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel slot="end">Radio Label</IonLabel>
+  <IonRadio></IonRadio>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonRadio labelPlacement="end">Radio Label</IonRadio>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio>Radio Label</ion-radio>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio label-placement="fixed">Radio Label</ion-radio>
+</ion-item>
+
+<!-- Radio at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Radio Label</ion-label>
+  <ion-radio></ion-radio>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-radio label-placement="end">Radio Label</ion-radio>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
diff --git a/static/usage/v7/radio/theming/colors/angular.md b/static/usage/v7/radio/theming/colors/angular.md
index ace9bab6018..d3389196bfa 100644
--- a/static/usage/v7/radio/theming/colors/angular.md
+++ b/static/usage/v7/radio/theming/colors/angular.md
@@ -1,29 +1,29 @@
 ```html
 <ion-radio-group value="primary">
-  <ion-radio color="primary" value="primary"></ion-radio>
+  <ion-radio aria-label="Primary" color="primary" value="primary"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="secondary">
-  <ion-radio color="secondary" value="secondary"></ion-radio>
+  <ion-radio aria-label="Secondary" color="secondary" value="secondary"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="tertiary">
-  <ion-radio color="tertiary" value="tertiary"></ion-radio>
+  <ion-radio aria-label="Tertiary" color="tertiary" value="tertiary"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="success">
-  <ion-radio color="success" value="success"></ion-radio>
+  <ion-radio aria-label="Success" color="success" value="success"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="warning">
-  <ion-radio color="warning" value="warning"></ion-radio>
+  <ion-radio aria-label="Warning" color="warning" value="warning"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="danger">
-  <ion-radio color="danger" value="danger"></ion-radio>
+  <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="light">
-  <ion-radio color="light" value="light"></ion-radio>
+  <ion-radio aria-label="Light" color="light" value="light"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="medium">
-  <ion-radio color="medium" value="medium"></ion-radio>
+  <ion-radio aria-label="Medium" color="medium" value="medium"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="dark">
-  <ion-radio color="dark" value="dark"></ion-radio>
+  <ion-radio aria-label="Dark" 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
index aa122b5f0ec..074f427ef1a 100644
--- a/static/usage/v7/radio/theming/colors/demo.html
+++ b/static/usage/v7/radio/theming/colors/demo.html
@@ -7,12 +7,8 @@
   <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>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
@@ -20,35 +16,35 @@
     <ion-content>
       <div class="container">
         <ion-radio-group value="primary">
-          <ion-radio color="primary" value="primary"></ion-radio>
+          <ion-radio aria-label="Primary" color="primary" value="primary"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="secondary">
-          <ion-radio color="secondary" value="secondary"></ion-radio>
+          <ion-radio aria-label="Secondary" color="secondary" value="secondary"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="tertiary">
-          <ion-radio color="tertiary" value="tertiary"></ion-radio>
+          <ion-radio aria-label="Tertiary" color="tertiary" value="tertiary"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="success">
-          <ion-radio color="success" value="success"></ion-radio>
+          <ion-radio aria-label="Success" color="success" value="success"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="warning">
-          <ion-radio color="warning" value="warning"></ion-radio>
+          <ion-radio aria-label="Warning" color="warning" value="warning"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="danger">
-          <ion-radio color="danger" value="danger"></ion-radio>
+          <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="light">
-          <ion-radio color="light" value="light"></ion-radio>
+          <ion-radio aria-label="Light" color="light" value="light"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="medium">
-          <ion-radio color="medium" value="medium"></ion-radio>
+          <ion-radio aria-label="Medium" color="medium" value="medium"></ion-radio>
         </ion-radio-group>
         <ion-radio-group value="dark">
-          <ion-radio color="dark" value="dark"></ion-radio>
+          <ion-radio aria-label="Dark" color="dark" value="dark"></ion-radio>
         </ion-radio-group>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/radio/theming/colors/javascript.md b/static/usage/v7/radio/theming/colors/javascript.md
index ace9bab6018..d3389196bfa 100644
--- a/static/usage/v7/radio/theming/colors/javascript.md
+++ b/static/usage/v7/radio/theming/colors/javascript.md
@@ -1,29 +1,29 @@
 ```html
 <ion-radio-group value="primary">
-  <ion-radio color="primary" value="primary"></ion-radio>
+  <ion-radio aria-label="Primary" color="primary" value="primary"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="secondary">
-  <ion-radio color="secondary" value="secondary"></ion-radio>
+  <ion-radio aria-label="Secondary" color="secondary" value="secondary"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="tertiary">
-  <ion-radio color="tertiary" value="tertiary"></ion-radio>
+  <ion-radio aria-label="Tertiary" color="tertiary" value="tertiary"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="success">
-  <ion-radio color="success" value="success"></ion-radio>
+  <ion-radio aria-label="Success" color="success" value="success"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="warning">
-  <ion-radio color="warning" value="warning"></ion-radio>
+  <ion-radio aria-label="Warning" color="warning" value="warning"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="danger">
-  <ion-radio color="danger" value="danger"></ion-radio>
+  <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="light">
-  <ion-radio color="light" value="light"></ion-radio>
+  <ion-radio aria-label="Light" color="light" value="light"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="medium">
-  <ion-radio color="medium" value="medium"></ion-radio>
+  <ion-radio aria-label="Medium" color="medium" value="medium"></ion-radio>
 </ion-radio-group>
 <ion-radio-group value="dark">
-  <ion-radio color="dark" value="dark"></ion-radio>
+  <ion-radio aria-label="Dark" 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
index 8a96c775064..cccf60c87da 100644
--- a/static/usage/v7/radio/theming/colors/react.md
+++ b/static/usage/v7/radio/theming/colors/react.md
@@ -6,31 +6,31 @@ function Example() {
   return (
     <>
       <IonRadioGroup value="primary">
-        <IonRadio color="primary" value="primary"></IonRadio>
+        <IonRadio aria-label="Primary" color="primary" value="primary"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="secondary">
-        <IonRadio color="secondary" value="secondary"></IonRadio>
+        <IonRadio aria-label="Secondary" color="secondary" value="secondary"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="tertiary">
-        <IonRadio color="tertiary" value="tertiary"></IonRadio>
+        <IonRadio aria-label="Tertiary" color="tertiary" value="tertiary"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="success">
-        <IonRadio color="success" value="success"></IonRadio>
+        <IonRadio aria-label="Success" color="success" value="success"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="warning">
-        <IonRadio color="warning" value="warning"></IonRadio>
+        <IonRadio aria-label="Warning" color="warning" value="warning"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="danger">
-        <IonRadio color="danger" value="danger"></IonRadio>
+        <IonRadio aria-label="Danger" color="danger" value="danger"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="light">
-        <IonRadio color="light" value="light"></IonRadio>
+        <IonRadio aria-label="Light" color="light" value="light"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="medium">
-        <IonRadio color="medium" value="medium"></IonRadio>
+        <IonRadio aria-label="Medium" color="medium" value="medium"></IonRadio>
       </IonRadioGroup>
       <IonRadioGroup value="dark">
-        <IonRadio color="dark" value="dark"></IonRadio>
+        <IonRadio aria-label="Dark" color="dark" value="dark"></IonRadio>
       </IonRadioGroup>
     </>
   );
diff --git a/static/usage/v7/radio/theming/colors/vue.md b/static/usage/v7/radio/theming/colors/vue.md
index 084d8f27a21..74b8aa3a73e 100644
--- a/static/usage/v7/radio/theming/colors/vue.md
+++ b/static/usage/v7/radio/theming/colors/vue.md
@@ -1,31 +1,31 @@
 ```html
 <template>
   <ion-radio-group value="primary">
-    <ion-radio color="primary" value="primary"></ion-radio>
+    <ion-radio aria-label="Primary" color="primary" value="primary"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="secondary">
-    <ion-radio color="secondary" value="secondary"></ion-radio>
+    <ion-radio aria-label="Secondary" color="secondary" value="secondary"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="tertiary">
-    <ion-radio color="tertiary" value="tertiary"></ion-radio>
+    <ion-radio aria-label="Tertiary" color="tertiary" value="tertiary"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="success">
-    <ion-radio color="success" value="success"></ion-radio>
+    <ion-radio aria-label="Success" color="success" value="success"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="warning">
-    <ion-radio color="warning" value="warning"></ion-radio>
+    <ion-radio aria-label="Warning" color="warning" value="warning"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="danger">
-    <ion-radio color="danger" value="danger"></ion-radio>
+    <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="light">
-    <ion-radio color="light" value="light"></ion-radio>
+    <ion-radio aria-label="Light" color="light" value="light"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="medium">
-    <ion-radio color="medium" value="medium"></ion-radio>
+    <ion-radio aria-label="Medium" color="medium" value="medium"></ion-radio>
   </ion-radio-group>
   <ion-radio-group value="dark">
-    <ion-radio color="dark" value="dark"></ion-radio>
+    <ion-radio aria-label="Dark" color="dark" value="dark"></ion-radio>
   </ion-radio-group>
 </template>
 
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
index 9e36e69c77d..fa96171282e 100644
--- 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
@@ -7,7 +7,7 @@ ion-radio {
   --color-checked: #6815ec;
 }
 
-ion-radio.ios {
+ion-radio.ios::part(container) {
   width: 20px;
   height: 20px;
 
@@ -15,7 +15,7 @@ ion-radio.ios {
   border-radius: 4px;
 }
 
-.radio-checked.ios {
+.radio-checked.ios::part(container) {
   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
index 3944db27fae..31e21f3f19b 100644
--- 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
@@ -1,6 +1,6 @@
 ```html
 <ion-radio-group value="custom-checked">
-  <ion-radio value="custom"></ion-radio>
-  <ion-radio value="custom-checked"></ion-radio>
+  <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
+  <ion-radio value="custom-checked" aria-label="Custom checkbox that is 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
index 8d2a07e5df6..5a2d6781802 100644
--- a/static/usage/v7/radio/theming/css-properties/demo.html
+++ b/static/usage/v7/radio/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     ion-radio {
@@ -19,7 +19,7 @@
       --color-checked: #6815ec;
     }
 
-    ion-radio.ios {
+    ion-radio.ios::part(container) {
       width: 20px;
       height: 20px;
 
@@ -27,7 +27,7 @@
       border-radius: 4px;
     }
 
-    .radio-checked.ios {
+    .radio-checked.ios::part(container) {
       border-color: #6815ec;
     }
   </style>
@@ -38,12 +38,12 @@
     <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 value="custom" aria-label="Custom checkbox"></ion-radio>
+          <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
         </ion-radio-group>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/radio/theming/css-properties/javascript.md b/static/usage/v7/radio/theming/css-properties/javascript.md
index 3900a4a863e..8fd97c95589 100644
--- a/static/usage/v7/radio/theming/css-properties/javascript.md
+++ b/static/usage/v7/radio/theming/css-properties/javascript.md
@@ -1,27 +1,27 @@
 ```html
 <ion-radio-group value="custom-checked">
-  <ion-radio value="custom"></ion-radio>
-  <ion-radio value="custom-checked"></ion-radio>
+  <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
+  <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
 </ion-radio-group>
 
 <style>
   ion-radio {
     --border-radius: 4px;
     --inner-border-radius: 4px;
-
+  
     --color: #ddd;
     --color-checked: #6815ec;
   }
-
-  ion-radio.ios {
+  
+  ion-radio.ios::part(container) {
     width: 20px;
     height: 20px;
-
+  
     border: 2px solid #ddd;
     border-radius: 4px;
   }
-
-  .radio-checked.ios {
+  
+  .radio-checked.ios::part(container) {
     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
index 9e36e69c77d..fa96171282e 100644
--- a/static/usage/v7/radio/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/radio/theming/css-properties/react/main_css.md
@@ -7,7 +7,7 @@ ion-radio {
   --color-checked: #6815ec;
 }
 
-ion-radio.ios {
+ion-radio.ios::part(container) {
   width: 20px;
   height: 20px;
 
@@ -15,7 +15,7 @@ ion-radio.ios {
   border-radius: 4px;
 }
 
-.radio-checked.ios {
+.radio-checked.ios::part(container) {
   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
index 188ac677707..2a0c72670a3 100644
--- a/static/usage/v7/radio/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/radio/theming/css-properties/react/main_tsx.md
@@ -7,8 +7,8 @@ import './main.css';
 function Example() {
   return (
     <IonRadioGroup value="custom-checked">
-      <IonRadio value="custom"></IonRadio>
-      <IonRadio value="custom-checked"></IonRadio>
+      <IonRadio value="custom" aria-label="Custom checkbox"></IonRadio>
+      <IonRadio value="custom-checked" aria-label="Custom checkbox that is checked"></IonRadio>
     </IonRadioGroup>
   );
 }
diff --git a/static/usage/v7/radio/theming/css-properties/vue.md b/static/usage/v7/radio/theming/css-properties/vue.md
index 557c0547e49..515876a8014 100644
--- a/static/usage/v7/radio/theming/css-properties/vue.md
+++ b/static/usage/v7/radio/theming/css-properties/vue.md
@@ -1,8 +1,8 @@
 ```html
 <template>
   <ion-radio-group value="custom-checked">
-    <ion-radio value="custom"></ion-radio>
-    <ion-radio value="custom-checked"></ion-radio>
+    <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
+    <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
   </ion-radio-group>
 </template>
 
@@ -19,20 +19,20 @@
   ion-radio {
     --border-radius: 4px;
     --inner-border-radius: 4px;
-
+  
     --color: #ddd;
     --color-checked: #6815ec;
   }
-
-  ion-radio.ios {
+  
+  ion-radio.ios::part(container) {
     width: 20px;
     height: 20px;
-
+  
     border: 2px solid #ddd;
     border-radius: 4px;
   }
-
-  .radio-checked.ios {
+  
+  .radio-checked.ios::part(container) {
     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
index 85c8747d6e5..ddc4bcc18ea 100644
--- 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
@@ -1,10 +1,8 @@
 ```css
-ion-radio {
+ion-radio::part(container) {
   width: 30px;
   height: 30px;
-}
-
-ion-radio::part(container) {
+  
   border-radius: 8px;
   border: 2px solid #ddd;
 }
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
index 3944db27fae..31e21f3f19b 100644
--- 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
@@ -1,6 +1,6 @@
 ```html
 <ion-radio-group value="custom-checked">
-  <ion-radio value="custom"></ion-radio>
-  <ion-radio value="custom-checked"></ion-radio>
+  <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
+  <ion-radio value="custom-checked" aria-label="Custom checkbox that is 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
index f2bc280fb83..218826c34b2 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
@@ -7,16 +7,14 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
-    ion-radio {
+    ion-radio::part(container) {
       width: 30px;
       height: 30px;
-    }
 
-    ion-radio::part(container) {
       border-radius: 8px;
       border: 2px solid #ddd;
     }
@@ -51,12 +49,12 @@
     <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 value="custom" aria-label="Custom checkbox"></ion-radio>
+          <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
         </ion-radio-group>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/javascript.md b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
index 728d1ad34ea..3a9f9c7ccc6 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
@@ -1,16 +1,14 @@
 ```html
 <ion-radio-group value="custom-checked">
-  <ion-radio value="custom"></ion-radio>
-  <ion-radio value="custom-checked"></ion-radio>
+  <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
+  <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
 </ion-radio-group>
 
 <style>
-  ion-radio {
+  ion-radio::part(container) {
     width: 30px;
     height: 30px;
-  }
-
-  ion-radio::part(container) {
+    
     border-radius: 8px;
     border: 2px solid #ddd;
   }
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
index 85c8747d6e5..ddc4bcc18ea 100644
--- 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
@@ -1,10 +1,8 @@
 ```css
-ion-radio {
+ion-radio::part(container) {
   width: 30px;
   height: 30px;
-}
-
-ion-radio::part(container) {
+  
   border-radius: 8px;
   border: 2px solid #ddd;
 }
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
index 188ac677707..2a0c72670a3 100644
--- 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
@@ -7,8 +7,8 @@ import './main.css';
 function Example() {
   return (
     <IonRadioGroup value="custom-checked">
-      <IonRadio value="custom"></IonRadio>
-      <IonRadio value="custom-checked"></IonRadio>
+      <IonRadio value="custom" aria-label="Custom checkbox"></IonRadio>
+      <IonRadio value="custom-checked" aria-label="Custom checkbox that is checked"></IonRadio>
     </IonRadioGroup>
   );
 }
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/vue.md b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
index e8078202f6c..24326a92a94 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
@@ -1,8 +1,8 @@
 ```html
 <template>
   <ion-radio-group value="custom-checked">
-    <ion-radio value="custom"></ion-radio>
-    <ion-radio value="custom-checked"></ion-radio>
+    <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
+    <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
   </ion-radio-group>
 </template>
 
@@ -16,12 +16,10 @@
 </script>
 
 <style scoped>
-  ion-radio {
+  ion-radio::part(container) {
     width: 30px;
     height: 30px;
-  }
 
-  ion-radio::part(container) {
     border-radius: 8px;
     border: 2px solid #ddd;
   }

From eec07f2ea79153b0c513fa53a72cb197b2d528b1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Feb 2023 10:14:35 -0500
Subject: [PATCH 192/469] docs(router): add playground (#2749)

---
 docs/api/router.md                         |  8 ++-
 static/usage/v6/router/basic/demo.html     | 65 ++++++++++++++++++++++
 static/usage/v6/router/basic/index.md      | 10 ++++
 static/usage/v6/router/basic/javascript.md | 47 ++++++++++++++++
 static/usage/v7/router/basic/demo.html     | 65 ++++++++++++++++++++++
 static/usage/v7/router/basic/index.md      | 10 ++++
 static/usage/v7/router/basic/javascript.md | 47 ++++++++++++++++
 versioned_docs/version-v6/api/router.md    |  8 ++-
 8 files changed, 258 insertions(+), 2 deletions(-)
 create mode 100644 static/usage/v6/router/basic/demo.html
 create mode 100644 static/usage/v6/router/basic/index.md
 create mode 100644 static/usage/v6/router/basic/javascript.md
 create mode 100644 static/usage/v7/router/basic/demo.html
 create mode 100644 static/usage/v7/router/basic/index.md
 create mode 100644 static/usage/v7/router/basic/javascript.md

diff --git a/docs/api/router.md b/docs/api/router.md
index eef5d1232de..df326aed58f 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -32,7 +32,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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.
+ Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
 :::
 
 
@@ -45,6 +45,12 @@ That means the `ion-router` never touches the DOM, it does NOT show the componen
 
 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.
 
+## Basic Usage
+
+import BasicExample from '@site/static/usage/v7/router/basic/index.md';
+
+<BasicExample />
+
 ## Interfaces
 
 ### RouterEventDetail
diff --git a/static/usage/v6/router/basic/demo.html b/static/usage/v6/router/basic/demo.html
new file mode 100644
index 00000000000..9dac309e25c
--- /dev/null
+++ b/static/usage/v6/router/basic/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>Router</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-router>
+      <ion-route url="/" component="page-one"></ion-route>
+      <ion-route url="/page-two" component="page-two"></ion-route>
+    </ion-router>
+
+    <ion-router-outlet></ion-router-outlet>
+
+    <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">
+          This is the content for page 1.
+          <ion-router-link href="#/page-two">
+            <ion-button>Go to Page 2</ion-button>
+          </ion-router-link>
+        </ion-content>`;
+        }
+      }
+
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button default-href="/"></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          This is the content for page 2.
+        </ion-content>`;
+        }
+      }
+
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+    </script>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v6/router/basic/index.md b/static/usage/v6/router/basic/index.md
new file mode 100644
index 00000000000..1addc30f5ab
--- /dev/null
+++ b/static/usage/v6/router/basic/index.md
@@ -0,0 +1,10 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+<Playground
+  code={{ javascript }}
+  src="usage/v6/router/basic/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v6/router/basic/javascript.md b/static/usage/v6/router/basic/javascript.md
new file mode 100644
index 00000000000..5de50702768
--- /dev/null
+++ b/static/usage/v6/router/basic/javascript.md
@@ -0,0 +1,47 @@
+```html
+<ion-router>
+  <ion-route url="/" component="page-one"></ion-route>
+  <ion-route url="/page-two" component="page-two"></ion-route>
+</ion-router>
+
+<ion-router-outlet></ion-router-outlet>
+
+<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">
+      This is the content for page 1.
+      <ion-router-link href="#/page-two">
+        <ion-button>Go to Page 2</ion-button>
+      </ion-router-link>
+    </ion-content>`;
+    }
+  }
+
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      This is the content for page 2.
+    </ion-content>`;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+</script>
+```
diff --git a/static/usage/v7/router/basic/demo.html b/static/usage/v7/router/basic/demo.html
new file mode 100644
index 00000000000..9210474adff
--- /dev/null
+++ b/static/usage/v7/router/basic/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>Router</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-router>
+      <ion-route url="/" component="page-one"></ion-route>
+      <ion-route url="/page-two" component="page-two"></ion-route>
+    </ion-router>
+
+    <ion-router-outlet></ion-router-outlet>
+
+    <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">
+          This is the content for page 1.
+          <ion-router-link href="#/page-two">
+            <ion-button>Go to Page 2</ion-button>
+          </ion-router-link>
+        </ion-content>`;
+        }
+      }
+
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button default-href="/"></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          This is the content for page 2.
+        </ion-content>`;
+        }
+      }
+
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+    </script>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/router/basic/index.md b/static/usage/v7/router/basic/index.md
new file mode 100644
index 00000000000..5fd52766bcb
--- /dev/null
+++ b/static/usage/v7/router/basic/index.md
@@ -0,0 +1,10 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+<Playground
+  code={{ javascript }}
+  src="usage/v7/router/basic/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/router/basic/javascript.md b/static/usage/v7/router/basic/javascript.md
new file mode 100644
index 00000000000..5de50702768
--- /dev/null
+++ b/static/usage/v7/router/basic/javascript.md
@@ -0,0 +1,47 @@
+```html
+<ion-router>
+  <ion-route url="/" component="page-one"></ion-route>
+  <ion-route url="/page-two" component="page-two"></ion-route>
+</ion-router>
+
+<ion-router-outlet></ion-router-outlet>
+
+<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">
+      This is the content for page 1.
+      <ion-router-link href="#/page-two">
+        <ion-button>Go to Page 2</ion-button>
+      </ion-router-link>
+    </ion-content>`;
+    }
+  }
+
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      This is the content for page 2.
+    </ion-content>`;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+</script>
+```
diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.md
index eef5d1232de..3a3ede58809 100644
--- a/versioned_docs/version-v6/api/router.md
+++ b/versioned_docs/version-v6/api/router.md
@@ -32,7 +32,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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.
+ Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
 :::
 
 
@@ -45,6 +45,12 @@ That means the `ion-router` never touches the DOM, it does NOT show the componen
 
 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.
 
+## Basic Usage
+
+import BasicExample from '@site/static/usage/v6/router/basic/index.md';
+
+<BasicExample />
+
 ## Interfaces
 
 ### RouterEventDetail

From 75c5838093eedfa52c4bd2b68cd5076216748f6b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Feb 2023 11:34:36 -0500
Subject: [PATCH 193/469] docs(range): update for new syntax, add migration
 guide (#2742)

---
 docs/api/range.md                             |  40 +++-
 static/usage/v7/range/basic/angular.md        |   2 +-
 static/usage/v7/range/basic/demo.html         |   8 +-
 static/usage/v7/range/basic/javascript.md     |   2 +-
 static/usage/v7/range/basic/react.md          |   2 +-
 static/usage/v7/range/basic/vue.md            |   2 +-
 static/usage/v7/range/dual-knobs/angular.md   |   2 +-
 static/usage/v7/range/dual-knobs/demo.html    |   8 +-
 .../usage/v7/range/dual-knobs/javascript.md   |   2 +-
 static/usage/v7/range/dual-knobs/react.md     |   1 +
 static/usage/v7/range/dual-knobs/vue.md       |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../usage/v7/range/ion-change-event/demo.html |   8 +-
 .../v7/range/ion-change-event/javascript.md   |   2 +-
 .../usage/v7/range/ion-change-event/react.md  |   2 +-
 static/usage/v7/range/ion-change-event/vue.md |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../v7/range/ion-knob-move-event/demo.html    |   8 +-
 .../range/ion-knob-move-event/javascript.md   |   2 +-
 .../v7/range/ion-knob-move-event/react.md     |   1 +
 .../usage/v7/range/ion-knob-move-event/vue.md |   2 +-
 static/usage/v7/range/labels/angular.md       |  17 ++
 static/usage/v7/range/labels/demo.html        |  45 ++++
 static/usage/v7/range/labels/index.md         |   8 +
 static/usage/v7/range/labels/javascript.md    |  17 ++
 static/usage/v7/range/labels/react.md         |  26 +++
 static/usage/v7/range/labels/vue.md           |  28 +++
 static/usage/v7/range/migration/index.md      | 212 ++++++++++++++++++
 .../pins/angular/example_component_html.md    |   2 +-
 static/usage/v7/range/pins/demo.html          |   8 +-
 static/usage/v7/range/pins/javascript.md      |   2 +-
 static/usage/v7/range/pins/react.md           |   2 +-
 static/usage/v7/range/pins/vue.md             |   2 +-
 static/usage/v7/range/slots/angular.md        |   2 +-
 static/usage/v7/range/slots/demo.html         |   8 +-
 static/usage/v7/range/slots/javascript.md     |   2 +-
 static/usage/v7/range/slots/react.md          |   2 +-
 static/usage/v7/range/slots/vue.md            |   2 +-
 .../usage/v7/range/snapping-ticks/angular.md  |   2 +-
 .../usage/v7/range/snapping-ticks/demo.html   |   8 +-
 .../v7/range/snapping-ticks/javascript.md     |   2 +-
 static/usage/v7/range/snapping-ticks/react.md |   2 +-
 static/usage/v7/range/snapping-ticks/vue.md   |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../v7/range/theming/css-properties/demo.html |   8 +-
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_tsx.md  |   2 +-
 .../v7/range/theming/css-properties/vue.md    |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../range/theming/css-shadow-parts/demo.html  |   8 +-
 .../theming/css-shadow-parts/javascript.md    |   2 +-
 .../css-shadow-parts/react/main_tsx.md        |   2 +-
 .../v7/range/theming/css-shadow-parts/vue.md  |   2 +-
 53 files changed, 461 insertions(+), 74 deletions(-)
 create mode 100644 static/usage/v7/range/labels/angular.md
 create mode 100644 static/usage/v7/range/labels/demo.html
 create mode 100644 static/usage/v7/range/labels/index.md
 create mode 100644 static/usage/v7/range/labels/javascript.md
 create mode 100644 static/usage/v7/range/labels/react.md
 create mode 100644 static/usage/v7/range/labels/vue.md
 create mode 100644 static/usage/v7/range/migration/index.md

diff --git a/docs/api/range.md b/docs/api/range.md
index 83927d2a463..d102bcbc971 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -28,13 +28,21 @@ import Basic from '@site/static/usage/v7/range/basic/index.md';
 
 <Basic />
 
-## Range Labels
+## Label Placement
 
-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 LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
 
-import SlotsPlayground from '@site/static/usage/v7/range/slots/index.md';
+<LabelsPlayground />
 
-<SlotsPlayground />
+## Decorations
+
+Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.
+
+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 DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md';
+
+<DecorationsPlayground />
 
 ## Dual Knobs
 
@@ -100,6 +108,30 @@ import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index
 
 <CSSParts />
 
+## Migrating from Legacy Range Syntax
+
+A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an range, resolves accessibility issues, and improves the developer experience.
+
+Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+### Using the Modern Syntax
+
+Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`.
+
+import Migration from '@site/static/usage/v7/range/migration/index.md';
+
+<Migration />
+
+
+:::note
+In past versions of Ionic, `ion-item` was required for `ion-range` to function properly. Starting in Ionic 7.0, `ion-range` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-range` to function properly.
+:::
+
+### Using the Legacy Syntax
+
+Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-range` to `true` to force that instance of the range to use the legacy syntax.
+
+
 ## Interfaces
 
 ### RangeChangeEventDetail
diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/basic/angular.md
index 207b74f1fc7..ea96f2e2dd3 100644
--- a/static/usage/v7/range/basic/angular.md
+++ b/static/usage/v7/range/basic/angular.md
@@ -1,3 +1,3 @@
 ```html
-<ion-range></ion-range>
+<ion-range aria-label="Volume"></ion-range>
 ```
diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html
index 2580a0cda5e..fa741aae84b 100644
--- a/static/usage/v7/range/basic/demo.html
+++ b/static/usage/v7/range/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
@@ -20,10 +20,10 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-range></ion-range>
+        <ion-range aria-label="Volume"></ion-range>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/range/basic/javascript.md b/static/usage/v7/range/basic/javascript.md
index 207b74f1fc7..ea96f2e2dd3 100644
--- a/static/usage/v7/range/basic/javascript.md
+++ b/static/usage/v7/range/basic/javascript.md
@@ -1,3 +1,3 @@
 ```html
-<ion-range></ion-range>
+<ion-range aria-label="Volume"></ion-range>
 ```
diff --git a/static/usage/v7/range/basic/react.md b/static/usage/v7/range/basic/react.md
index b2f57aed027..ed85af943b5 100644
--- a/static/usage/v7/range/basic/react.md
+++ b/static/usage/v7/range/basic/react.md
@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonRange } from '@ionic/react';
 function Example() {
-  return <IonRange></IonRange>;
+  return <IonRange aria-label="Volume"></IonRange>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md
index 73f55df111e..421bea060e4 100644
--- a/static/usage/v7/range/basic/vue.md
+++ b/static/usage/v7/range/basic/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-range></ion-range>
+  <ion-range aria-label="Volume"></ion-range>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/range/dual-knobs/angular.md b/static/usage/v7/range/dual-knobs/angular.md
index b5d6a592a92..96eb2e59a0e 100644
--- a/static/usage/v7/range/dual-knobs/angular.md
+++ b/static/usage/v7/range/dual-knobs/angular.md
@@ -1,3 +1,3 @@
 ```html
-<ion-range [dualKnobs]="true" [value]="{ lower: 20, upper: 80 }"></ion-range>
+<ion-range aria-label="Dual Knobs 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
index 2c324f0eb57..0ca60d5ad13 100644
--- a/static/usage/v7/range/dual-knobs/demo.html
+++ b/static/usage/v7/range/dual-knobs/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
@@ -20,7 +20,7 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-range dual-knobs="true"></ion-range>
+        <ion-range aria-label="Dual Knobs Range" dual-knobs="true"></ion-range>
       </div>
     </ion-content>
   </ion-app>
@@ -33,4 +33,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/range/dual-knobs/javascript.md b/static/usage/v7/range/dual-knobs/javascript.md
index 1227b5cc841..3c182c98e5b 100644
--- a/static/usage/v7/range/dual-knobs/javascript.md
+++ b/static/usage/v7/range/dual-knobs/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range dual-knobs="true"></ion-range>
+<ion-range aria-label="Dual Knobs Range" dual-knobs="true"></ion-range>
 
 <script>
   const range = document.querySelector('ion-range');
diff --git a/static/usage/v7/range/dual-knobs/react.md b/static/usage/v7/range/dual-knobs/react.md
index 7f72b8e1dc3..cdc8fb17534 100644
--- a/static/usage/v7/range/dual-knobs/react.md
+++ b/static/usage/v7/range/dual-knobs/react.md
@@ -4,6 +4,7 @@ import { IonRange } from '@ionic/react';
 function Example() {
   return (
     <IonRange
+      aria-label="Dual Knobs Range"
       dualKnobs={true}
       value={{
         lower: 20,
diff --git a/static/usage/v7/range/dual-knobs/vue.md b/static/usage/v7/range/dual-knobs/vue.md
index afc825a067c..5e23079bfa7 100644
--- a/static/usage/v7/range/dual-knobs/vue.md
+++ b/static/usage/v7/range/dual-knobs/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-range :dual-knobs="true" :value="{ lower: 20, upper: 80 }"></ion-range>
+  <ion-range aria-label="Dual Knobs Range" :dual-knobs="true" :value="{ lower: 20, upper: 80 }"></ion-range>
 </template>
 
 <script lang="ts">
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
index 1c7dedd0408..12a736de8dd 100644
--- 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
@@ -1,4 +1,4 @@
 ```html
-<ion-range (ionChange)="onIonChange($event)"></ion-range>
+<ion-range aria-label="Range with ionChange" (ionChange)="onIonChange($event)"></ion-range>
 <ion-label>ionChange emitted value: {{ lastEmittedValue }}</ion-label>
 ```
diff --git a/static/usage/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html
index 93e35b59ba7..f8e16912269 100644
--- a/static/usage/v7/range/ion-change-event/demo.html
+++ b/static/usage/v7/range/ion-change-event/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     .demo {
       max-width: 320px;
@@ -22,7 +22,7 @@
     <ion-content>
       <div class="container">
         <div class="demo">
-          <ion-range></ion-range>
+          <ion-range aria-label="Range with ionChange"></ion-range>
           <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
         </div>
     </ion-content>
@@ -37,4 +37,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/range/ion-change-event/javascript.md b/static/usage/v7/range/ion-change-event/javascript.md
index d483a43dd5a..4aebeb2defa 100644
--- a/static/usage/v7/range/ion-change-event/javascript.md
+++ b/static/usage/v7/range/ion-change-event/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range></ion-range>
+<ion-range aria-label="Range with ionChange"></ion-range>
 <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
 
 <script>
diff --git a/static/usage/v7/range/ion-change-event/react.md b/static/usage/v7/range/ion-change-event/react.md
index 3e1eed172b0..ff1826a5a80 100644
--- a/static/usage/v7/range/ion-change-event/react.md
+++ b/static/usage/v7/range/ion-change-event/react.md
@@ -6,7 +6,7 @@ function Example() {
   const [lastEmittedValue, setLastEmittedValue] = useState<RangeValue>();
   return (
     <>
-      <IonRange onIonChange={({ detail }) => setLastEmittedValue(detail.value)}></IonRange>
+      <IonRange aria-label="Range with ionChange" onIonChange={({ detail }) => setLastEmittedValue(detail.value)}></IonRange>
       <IonLabel>ionChange emitted value: {lastEmittedValue as number}</IonLabel>
     </>
   );
diff --git a/static/usage/v7/range/ion-change-event/vue.md b/static/usage/v7/range/ion-change-event/vue.md
index d043c11089d..306682ab7db 100644
--- a/static/usage/v7/range/ion-change-event/vue.md
+++ b/static/usage/v7/range/ion-change-event/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-range @ionChange="onIonChange"></ion-range>
+  <ion-range aria-label="Range with ionChange" @ionChange="onIonChange"></ion-range>
   <ion-label>ionChange emitted value: {{lastEmittedValue}}</ion-label>
 </template>
 
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
index d8b54e782eb..dba19f00874 100644
--- 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
@@ -1,5 +1,5 @@
 ```html
-<ion-range (ionKnobMoveStart)="onIonKnobMoveStart($event)" (ionKnobMoveEnd)="onIonKnobMoveEnd($event)"></ion-range>
+<ion-range aria-label="Range with knob events" (ionKnobMoveStart)="onIonKnobMoveStart($event)" (ionKnobMoveEnd)="onIonKnobMoveEnd($event)"></ion-range>
 <div>
   <ion-label>ionKnobMoveStart: {{ moveStart }}</ion-label>
 </div>
diff --git a/static/usage/v7/range/ion-knob-move-event/demo.html b/static/usage/v7/range/ion-knob-move-event/demo.html
index 0522fd9b1ff..bfa71670d30 100644
--- a/static/usage/v7/range/ion-knob-move-event/demo.html
+++ b/static/usage/v7/range/ion-knob-move-event/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     .demo {
       max-width: 320px;
@@ -22,7 +22,7 @@
     <ion-content>
       <div class="container">
         <div class="demo">
-          <ion-range></ion-range>
+          <ion-range aria-label="Range with knob events"></ion-range>
           <div>
             <ion-label>ionKnobMoveStart: <span id="moveStart"></span></ion-label>
           </div>
@@ -47,4 +47,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</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
index 70346efa5eb..aacaac60e37 100644
--- a/static/usage/v7/range/ion-knob-move-event/javascript.md
+++ b/static/usage/v7/range/ion-knob-move-event/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range></ion-range>
+<ion-range aria-label="Range with knob events"></ion-range>
 <div>
   <ion-label>ionKnobMoveStart: <span id="moveStart"></span></ion-label>
 </div>
diff --git a/static/usage/v7/range/ion-knob-move-event/react.md b/static/usage/v7/range/ion-knob-move-event/react.md
index 25d80caae72..f7f20048349 100644
--- a/static/usage/v7/range/ion-knob-move-event/react.md
+++ b/static/usage/v7/range/ion-knob-move-event/react.md
@@ -8,6 +8,7 @@ function Example() {
   return (
     <>
       <IonRange
+        aria-label="Range with knob events"
         onIonKnobMoveStart={({ detail }) => setMoveStartValue(detail.value)}
         onIonKnobMoveEnd={({ detail }) => setMoveEndValue(detail.value)}
       ></IonRange>
diff --git a/static/usage/v7/range/ion-knob-move-event/vue.md b/static/usage/v7/range/ion-knob-move-event/vue.md
index ffe8e9f5390..67edb3c7e91 100644
--- a/static/usage/v7/range/ion-knob-move-event/vue.md
+++ b/static/usage/v7/range/ion-knob-move-event/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-range @ionKnobMoveStart="onIonKnobMoveStart" @ionKnobMoveEnd="onIonKnobMoveEnd"></ion-range>
+  <ion-range aria-label="Range with knob events" @ionKnobMoveStart="onIonKnobMoveStart" @ionKnobMoveEnd="onIonKnobMoveEnd"></ion-range>
   <div>
     <ion-label>ionKnobMoveStart: {{moveStart}}</ion-label>
   </div>
diff --git a/static/usage/v7/range/labels/angular.md b/static/usage/v7/range/labels/angular.md
new file mode 100644
index 00000000000..54964fa0d0c
--- /dev/null
+++ b/static/usage/v7/range/labels/angular.md
@@ -0,0 +1,17 @@
+```html
+<ion-range labelPlacement="start">
+  <div slot="label">Label at the Start</div>
+</ion-range>
+
+<br />
+
+<ion-range labelPlacement="end">
+  <div slot="label">Label at the End</div>
+</ion-range>
+
+<br />
+
+<ion-range labelPlacement="fixed">
+  <div slot="label">Fixed Width Label</div>
+</ion-range>
+```
diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html
new file mode 100644
index 00000000000..13ba10fc27a
--- /dev/null
+++ b/static/usage/v7/range/labels/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>Range</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <style>
+    .wrapper {
+      width: calc(100% - 100px);
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div class="wrapper">
+          <ion-range label-placement="start">
+            <div slot="label">Label at the Start</div>
+          </ion-range>
+
+          <br />
+
+          <ion-range label-placement="end">
+            <div slot="label">Label at the End</div>
+          </ion-range>
+
+          <br />
+
+          <ion-range label-placement="fixed">
+            <div slot="label">Fixed Width Label</div>
+          </ion-range>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/range/labels/index.md b/static/usage/v7/range/labels/index.md
new file mode 100644
index 00000000000..0a450c0c603
--- /dev/null
+++ b/static/usage/v7/range/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/range/labels/demo.html" size="300px" />
diff --git a/static/usage/v7/range/labels/javascript.md b/static/usage/v7/range/labels/javascript.md
new file mode 100644
index 00000000000..1f08d5d29af
--- /dev/null
+++ b/static/usage/v7/range/labels/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-range label-placement="start">
+  <div slot="label">Label at the Start</div>
+</ion-range>
+
+<br />
+
+<ion-range label-placement="end">
+  <div slot="label">Label at the End</div>
+</ion-range>
+
+<br />
+
+<ion-range label-placement="fixed">
+  <div slot="label">Fixed Width Label</div>
+</ion-range>
+```
diff --git a/static/usage/v7/range/labels/react.md b/static/usage/v7/range/labels/react.md
new file mode 100644
index 00000000000..30df6a33349
--- /dev/null
+++ b/static/usage/v7/range/labels/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonRange labelPlacement="start">
+        <div slot="label">Label at the Start</div>
+      </IonRange>
+    
+      <br />
+    
+      <IonRange labelPlacement="end">
+        <div slot="label">Label at the End</div>
+      </IonRange>
+    
+      <br />
+    
+      <IonRange labelPlacement="fixed">
+        <div slot="label">Fixed Width Label</div>
+      </IonRange>
+   </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
new file mode 100644
index 00000000000..70d90e834d5
--- /dev/null
+++ b/static/usage/v7/range/labels/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-range label-placement="start">
+    <div slot="label">Label at the Start</div>
+  </ion-range>
+  
+  <br />
+  
+  <ion-range label-placement="end">
+    <div slot="label">Label at the End</div>
+  </ion-range>
+  
+  <br />
+  
+  <ion-range label-placement="fixed">
+    <div slot="label">Fixed Width Label</div>
+  </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/migration/index.md b/static/usage/v7/range/migration/index.md
new file mode 100644
index 00000000000..eb44f072a3f
--- /dev/null
+++ b/static/usage/v7/range/migration/index.md
@@ -0,0 +1,212 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````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
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range>
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range label-placement="fixed">
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+
+<!-- Range at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range label-placement="end">
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range>
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range labelPlacement="fixed">
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+
+<!-- Range at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range labelPlacement="end">
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel>Notifications</IonLabel>
+  <IonRange></IonRange>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonRange>
+    <div slot="label">Notifications</div>
+  </IonRange>
+</IonItem>
+
+{/* Fixed Labels */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel position="fixed">Notifications</IonLabel>
+  <IonRange></IonRange>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonRange labelPlacement="fixed">
+    <div slot="label">Notifications</div>
+  </IonRange>
+</IonItem>
+
+{/* Range at the start of line, Label at the end of line */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel slot="end">Notifications</IonLabel>
+  <IonRange></IonRange>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonRange labelPlacement="end">
+    <div slot="label">Notifications</div>
+  </IonRange>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range>
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range label-placement="fixed">
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+
+<!-- Range at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Notifications</ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range label-placement="end">
+    <div slot="label">Notifications</div>
+  </ion-range>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
\ No newline at end of file
diff --git a/static/usage/v7/range/pins/angular/example_component_html.md b/static/usage/v7/range/pins/angular/example_component_html.md
index c5f3c823b82..f27f095a636 100644
--- a/static/usage/v7/range/pins/angular/example_component_html.md
+++ b/static/usage/v7/range/pins/angular/example_component_html.md
@@ -1,3 +1,3 @@
 ```html
-<ion-range [pin]="true" [pinFormatter]="pinFormatter"></ion-range>
+<ion-range aria-label="Range with pin" [pin]="true" [pinFormatter]="pinFormatter"></ion-range>
 ```
diff --git a/static/usage/v7/range/pins/demo.html b/static/usage/v7/range/pins/demo.html
index 032a649d14d..be5fdfd5f75 100644
--- a/static/usage/v7/range/pins/demo.html
+++ b/static/usage/v7/range/pins/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
@@ -20,7 +20,7 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-range pin="true"></ion-range>
+        <ion-range pin="true" aria-label="Range with pin"></ion-range>
       </div>
     </ion-content>
   </ion-app>
@@ -32,4 +32,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/range/pins/javascript.md b/static/usage/v7/range/pins/javascript.md
index 45491f91514..494da8ff806 100644
--- a/static/usage/v7/range/pins/javascript.md
+++ b/static/usage/v7/range/pins/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range pin="true"></ion-range>
+<ion-range aria-label="Range with pin" pin="true"></ion-range>
 
 <script>
   const range = document.querySelector('ion-range');
diff --git a/static/usage/v7/range/pins/react.md b/static/usage/v7/range/pins/react.md
index 9da75eae26a..478d3cd20ed 100644
--- a/static/usage/v7/range/pins/react.md
+++ b/static/usage/v7/range/pins/react.md
@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonRange } from '@ionic/react';
 function Example() {
-  return <IonRange pin={true} pinFormatter={(value: number) => `${value}%`}></IonRange>;
+  return <IonRange aria-label="Range with pin" 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
index b2d49bc8300..1fabf896c76 100644
--- a/static/usage/v7/range/pins/vue.md
+++ b/static/usage/v7/range/pins/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-range :pin="true" :pin-formatter="pinFormatter"></ion-range>
+  <ion-range aria-label="Range with pin" :pin="true" :pin-formatter="pinFormatter"></ion-range>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/range/slots/angular.md b/static/usage/v7/range/slots/angular.md
index 792f7c9b2ee..253663f6c6e 100644
--- a/static/usage/v7/range/slots/angular.md
+++ b/static/usage/v7/range/slots/angular.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range>
+<ion-range aria-label="Temperature">
   <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
index a6c24e8da62..800f8cdc61d 100644
--- a/static/usage/v7/range/slots/demo.html
+++ b/static/usage/v7/range/slots/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
@@ -20,7 +20,7 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-range>
+        <ion-range aria-label="Temperature">
           <ion-icon slot="start" name="snow-outline"></ion-icon>
           <ion-icon slot="end" name="sunny-outline"></ion-icon>
         </ion-range>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/range/slots/javascript.md b/static/usage/v7/range/slots/javascript.md
index 792f7c9b2ee..253663f6c6e 100644
--- a/static/usage/v7/range/slots/javascript.md
+++ b/static/usage/v7/range/slots/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range>
+<ion-range aria-label="Temperature">
   <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
index c6c77e4ab6f..36a5228d0a1 100644
--- a/static/usage/v7/range/slots/react.md
+++ b/static/usage/v7/range/slots/react.md
@@ -5,7 +5,7 @@ import { snowOutline, sunnyOutline } from 'ionicons/icons';
 
 function Example() {
   return (
-    <IonRange>
+    <IonRange aria-label="Temperature">
       <IonIcon slot="start" icon={snowOutline}></IonIcon>
       <IonIcon slot="end" icon={sunnyOutline}></IonIcon>
     </IonRange>
diff --git a/static/usage/v7/range/slots/vue.md b/static/usage/v7/range/slots/vue.md
index 9b2f3de68e6..57d8edeb2ca 100644
--- a/static/usage/v7/range/slots/vue.md
+++ b/static/usage/v7/range/slots/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-range>
+  <ion-range aria-label="Temperature">
     <ion-icon slot="start" :icon="snowOutline"></ion-icon>
     <ion-icon slot="end" :icon="sunnyOutline"></ion-icon>
   </ion-range>
diff --git a/static/usage/v7/range/snapping-ticks/angular.md b/static/usage/v7/range/snapping-ticks/angular.md
index 4ec64a7d5c6..d52f5e4b119 100644
--- a/static/usage/v7/range/snapping-ticks/angular.md
+++ b/static/usage/v7/range/snapping-ticks/angular.md
@@ -1,3 +1,3 @@
 ```html
-<ion-range [ticks]="true" [snaps]="true" [min]="0" [max]="10"></ion-range>
+<ion-range aria-label="Range with ticks" [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
index 8b0ada20488..a55b139a33c 100644
--- a/static/usage/v7/range/snapping-ticks/demo.html
+++ b/static/usage/v7/range/snapping-ticks/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
@@ -20,10 +20,10 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
+        <ion-range aria-label="Range with ticks" ticks="true" snaps="true" min="0" max="10"></ion-range>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/range/snapping-ticks/javascript.md b/static/usage/v7/range/snapping-ticks/javascript.md
index d9ebe86597d..692bb3840a1 100644
--- a/static/usage/v7/range/snapping-ticks/javascript.md
+++ b/static/usage/v7/range/snapping-ticks/javascript.md
@@ -1,3 +1,3 @@
 ```html
-<ion-range ticks="true" snaps="true" min="0" max="10"></ion-range>
+<ion-range aria-label="Range with ticks" 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
index 37a0ca15ad4..aeeb784cfe6 100644
--- a/static/usage/v7/range/snapping-ticks/react.md
+++ b/static/usage/v7/range/snapping-ticks/react.md
@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonRange } from '@ionic/react';
 function Example() {
-  return <IonRange ticks={true} snaps={true} min={0} max={10}></IonRange>;
+  return <IonRange aria-label="Range with ticks" 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
index 5ea90c66f2c..69417e31d81 100644
--- a/static/usage/v7/range/snapping-ticks/vue.md
+++ b/static/usage/v7/range/snapping-ticks/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-range :ticks="true" :snaps="true" :min="0" :max="10"></ion-range>
+  <ion-range aria-label="Range with ticks" :ticks="true" :snaps="true" :min="0" :max="10"></ion-range>
 </template>
 
 <script lang="ts">
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
index 788c2c288d8..6c9011af30a 100644
--- 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
@@ -1,3 +1,3 @@
 ```html
-<ion-range [value]="50" [pin]="true"></ion-range>
+<ion-range aria-label="Custom 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
index 2bbf61e793b..af22e18133b 100644
--- a/static/usage/v7/range/theming/css-properties/demo.html
+++ b/static/usage/v7/range/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     ion-range {
       --bar-background: #a2d2ff;
@@ -29,10 +29,10 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-range value="50" pin="true"></ion-range>
+        <ion-range aria-label="Custom range" value="50" pin="true"></ion-range>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/range/theming/css-properties/javascript.md b/static/usage/v7/range/theming/css-properties/javascript.md
index 619c3e4f6e8..790f13b53e2 100644
--- a/static/usage/v7/range/theming/css-properties/javascript.md
+++ b/static/usage/v7/range/theming/css-properties/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range value="50" pin="true"></ion-range>
+<ion-range aria-label="Custom range" value="50" pin="true"></ion-range>
 
 <style>
   ion-range {
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
index 78261555c9b..958999027ab 100644
--- a/static/usage/v7/range/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/range/theming/css-properties/react/main_tsx.md
@@ -5,7 +5,7 @@ import { IonRange } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return <IonRange value={50} pin={true}></IonRange>;
+  return <IonRange aria-label="Custom range" 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
index 6c0aeff6268..c6f7b058b7a 100644
--- a/static/usage/v7/range/theming/css-properties/vue.md
+++ b/static/usage/v7/range/theming/css-properties/vue.md
@@ -13,7 +13,7 @@
 </style>
 
 <template>
-  <ion-range :value="50" :pin="true"></ion-range>
+  <ion-range aria-label="Custom range" :value="50" :pin="true"></ion-range>
 </template>
 
 <script lang="ts">
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
index 95fbcd6f6ab..5d41d25796b 100644
--- 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
@@ -1,3 +1,3 @@
 ```html
-<ion-range [min]="0" [max]="10" [value]="5" [pin]="true" [ticks]="true" [snaps]="true"></ion-range>
+<ion-range aria-label="Custom 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
index 8469ebda0a8..0f1af00c019 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/range/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
@@ -62,10 +62,10 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
+        <ion-range aria-label="Custom 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
+</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
index df02ec30fbd..87e968a80c8 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v7/range/theming/css-shadow-parts/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-range min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
+<ion-range aria-label="Custom range" min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
 
 <style>
   ion-range::part(tick) {
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
index b22ec8d6fd9..c5a4905c59d 100644
--- 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
@@ -5,7 +5,7 @@ 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>;
+  return <IonRange aria-label="Custom range" 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
index c0bccfc8df9..7c0c2247546 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/range/theming/css-shadow-parts/vue.md
@@ -44,7 +44,7 @@
 </style>
 
 <template>
-  <ion-range :min="0" :max="10" :value="5" :pin="true" :ticks="true" :snaps="true"></ion-range>
+  <ion-range aria-label="Custom range" :min="0" :max="10" :value="5" :pin="true" :ticks="true" :snaps="true"></ion-range>
 </template>
 
 <script lang="ts">

From bdba34cfbffb440f8b259c903d45eb2660683a5b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 2 Feb 2023 10:51:11 -0500
Subject: [PATCH 194/469] docs(checkbox): update for new syntax, add migration
 guide (#2751)

---
 docs/api/checkbox.md                          |  42 ++++
 static/usage/v7/checkbox/basic/angular.md     |   5 +-
 static/usage/v7/checkbox/basic/demo.html      |  11 +-
 static/usage/v7/checkbox/basic/javascript.md  |   5 +-
 static/usage/v7/checkbox/basic/react.md       |  11 +-
 static/usage/v7/checkbox/basic/vue.md         |  17 +-
 .../v7/checkbox/indeterminate/angular.md      |   5 +-
 .../usage/v7/checkbox/indeterminate/demo.html |  11 +-
 .../v7/checkbox/indeterminate/javascript.md   |   5 +-
 .../usage/v7/checkbox/indeterminate/react.md  |  11 +-
 static/usage/v7/checkbox/indeterminate/vue.md |  17 +-
 static/usage/v7/checkbox/justify/angular.md   |  15 ++
 static/usage/v7/checkbox/justify/demo.html    |  40 ++++
 static/usage/v7/checkbox/justify/index.md     |   8 +
 .../usage/v7/checkbox/justify/javascript.md   |  15 ++
 static/usage/v7/checkbox/justify/react.md     |  23 +++
 static/usage/v7/checkbox/justify/vue.md       |  26 +++
 .../v7/checkbox/label-placement/angular.md    |  11 +
 .../v7/checkbox/label-placement/demo.html     |  34 ++++
 .../v7/checkbox/label-placement/index.md      |   8 +
 .../v7/checkbox/label-placement/javascript.md |  11 +
 .../v7/checkbox/label-placement/react.md      |  21 ++
 .../usage/v7/checkbox/label-placement/vue.md  |  22 ++
 static/usage/v7/checkbox/migration/index.md   | 188 ++++++++++++++++++
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |   5 +-
 .../checkbox/theming/css-properties/demo.html |  13 +-
 .../theming/css-properties/javascript.md      |   7 +-
 .../theming/css-properties/react/main_css.md  |   2 +-
 .../theming/css-properties/react/main_tsx.md  |  11 +-
 .../v7/checkbox/theming/css-properties/vue.md |  19 +-
 31 files changed, 502 insertions(+), 119 deletions(-)
 create mode 100644 static/usage/v7/checkbox/justify/angular.md
 create mode 100644 static/usage/v7/checkbox/justify/demo.html
 create mode 100644 static/usage/v7/checkbox/justify/index.md
 create mode 100644 static/usage/v7/checkbox/justify/javascript.md
 create mode 100644 static/usage/v7/checkbox/justify/react.md
 create mode 100644 static/usage/v7/checkbox/justify/vue.md
 create mode 100644 static/usage/v7/checkbox/label-placement/angular.md
 create mode 100644 static/usage/v7/checkbox/label-placement/demo.html
 create mode 100644 static/usage/v7/checkbox/label-placement/index.md
 create mode 100644 static/usage/v7/checkbox/label-placement/javascript.md
 create mode 100644 static/usage/v7/checkbox/label-placement/react.md
 create mode 100644 static/usage/v7/checkbox/label-placement/vue.md
 create mode 100644 static/usage/v7/checkbox/migration/index.md

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index f8328821d6c..c861b994ff1 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -27,6 +27,27 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
 
 <Basic />
 
+## Label Placement
+
+Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+
+import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
+
+<LabelPlacement />
+
+## Justification
+
+Developers can use the `justify` property to control how the label and control are packed on a line.
+
+import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
+
+<Justify />
+
+
+:::note
+`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
+:::
+
 ## Indeterminate Checkboxes
 
 import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md';
@@ -63,7 +84,28 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
+## Migrating from Legacy Checkbox Syntax
+
+A simpler checkbox syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup a checkbox, resolves accessibility issues, and improves the developer experience.
+
+Developers can perform this migration one checkbox at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+### Using the Modern Syntax
+
+Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`.
+
+import Migration from '@site/static/usage/v7/checkbox/migration/index.md';
+
+<Migration />
+  
+
+:::note
+In past versions of Ionic, `ion-item` was required for `ion-checkbox` to function properly. Starting in Ionic 7.0, `ion-checkbox` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-checkbox` to function properly.
+:::
+
+### Using the Legacy Syntax
 
+Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-checkbox` to `true` to force that instance of the checkbox to use the legacy syntax.
 
 
 ## Properties
diff --git a/static/usage/v7/checkbox/basic/angular.md b/static/usage/v7/checkbox/basic/angular.md
index 29c262a3522..985ef4cdc1e 100644
--- a/static/usage/v7/checkbox/basic/angular.md
+++ b/static/usage/v7/checkbox/basic/angular.md
@@ -1,6 +1,3 @@
 ```html
-<ion-item>
-  <ion-checkbox slot="start"></ion-checkbox>
-  <ion-label>I agree to the terms and conditions</ion-label>
-</ion-item>
+<ion-checkbox>I agree to the terms and conditions</ion-checkbox>
 ```
diff --git a/static/usage/v7/checkbox/basic/demo.html b/static/usage/v7/checkbox/basic/demo.html
index 2df0497c4fe..a32e3504db1 100644
--- a/static/usage/v7/checkbox/basic/demo.html
+++ b/static/usage/v7/checkbox/basic/demo.html
@@ -7,21 +7,18 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/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>
+        <ion-checkbox>I agree to the terms and conditions</ion-checkbox>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/checkbox/basic/javascript.md b/static/usage/v7/checkbox/basic/javascript.md
index 29c262a3522..985ef4cdc1e 100644
--- a/static/usage/v7/checkbox/basic/javascript.md
+++ b/static/usage/v7/checkbox/basic/javascript.md
@@ -1,6 +1,3 @@
 ```html
-<ion-item>
-  <ion-checkbox slot="start"></ion-checkbox>
-  <ion-label>I agree to the terms and conditions</ion-label>
-</ion-item>
+<ion-checkbox>I agree to the terms and conditions</ion-checkbox>
 ```
diff --git a/static/usage/v7/checkbox/basic/react.md b/static/usage/v7/checkbox/basic/react.md
index 64dda9457bb..2d4159efbb2 100644
--- a/static/usage/v7/checkbox/basic/react.md
+++ b/static/usage/v7/checkbox/basic/react.md
@@ -1,17 +1,10 @@
 ```tsx
 import React from 'react';
-import {
-  IonCheckbox,
-  IonItem,
-  IonLabel
-} from '@ionic/react';
+import { IonCheckbox } from '@ionic/react';
 
 function Example() {
   return (
-    <IonItem>
-      <IonCheckbox slot="start"></IonCheckbox>
-      <IonLabel>I agree to the terms and conditions</IonLabel>
-    </IonItem>
+    <IonCheckbox>I agree to the terms and conditions</IonCheckbox>
   );
 }
 export default Example;
diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md
index 53cb1d16ccf..9bc17fdb9ea 100644
--- a/static/usage/v7/checkbox/basic/vue.md
+++ b/static/usage/v7/checkbox/basic/vue.md
@@ -1,25 +1,14 @@
 ```html
 <template>
-  <ion-item>
-    <ion-checkbox slot="start"></ion-checkbox>
-    <ion-label>I agree to the terms and conditions</ion-label>
-  </ion-item>
+  <ion-checkbox>I agree to the terms and conditions</ion-checkbox>
 </template>
 
 <script lang="ts">
-  import {
-    IonCheckbox,
-    IonItem,
-    IonLabel
-  } from '@ionic/vue';
+  import { IonCheckbox } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: {
-      IonCheckbox,
-      IonItem,
-      IonLabel
-    }
+    components: { IonCheckbox }
   });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/indeterminate/angular.md b/static/usage/v7/checkbox/indeterminate/angular.md
index 841851a904a..1ae617e7558 100644
--- a/static/usage/v7/checkbox/indeterminate/angular.md
+++ b/static/usage/v7/checkbox/indeterminate/angular.md
@@ -1,6 +1,3 @@
 ```html
-<ion-item>
-  <ion-checkbox slot="start" [indeterminate]="true"></ion-checkbox>
-  <ion-label>Indeterminate checkbox</ion-label>
-</ion-item>
+<ion-checkbox [indeterminate]="true">Indeterminate checkbox</ion-checkbox>
 ```
diff --git a/static/usage/v7/checkbox/indeterminate/demo.html b/static/usage/v7/checkbox/indeterminate/demo.html
index 4e726022577..84c30d8d9aa 100644
--- a/static/usage/v7/checkbox/indeterminate/demo.html
+++ b/static/usage/v7/checkbox/indeterminate/demo.html
@@ -7,21 +7,18 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/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>
+        <ion-checkbox indeterminate="true">Indeterminate checkbox</ion-checkbox>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/checkbox/indeterminate/javascript.md b/static/usage/v7/checkbox/indeterminate/javascript.md
index 9a216a7d8b0..ee9fb8c422a 100644
--- a/static/usage/v7/checkbox/indeterminate/javascript.md
+++ b/static/usage/v7/checkbox/indeterminate/javascript.md
@@ -1,6 +1,3 @@
 ```html
-<ion-item>
-  <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
-  <ion-label>Indeterminate checkbox</ion-label>
-</ion-item>
+<ion-checkbox indeterminate="true">Indeterminate checkbox</ion-checkbox>
 ```
diff --git a/static/usage/v7/checkbox/indeterminate/react.md b/static/usage/v7/checkbox/indeterminate/react.md
index 9e08f102560..117af56bc35 100644
--- a/static/usage/v7/checkbox/indeterminate/react.md
+++ b/static/usage/v7/checkbox/indeterminate/react.md
@@ -1,17 +1,10 @@
 ```tsx
 import React from 'react';
-import {
-  IonCheckbox,
-  IonItem,
-  IonLabel
-} from '@ionic/react';
+import { IonCheckbox } from '@ionic/react';
 
 function Example() {
   return (
-    <IonItem>
-      <IonCheckbox slot="start" indeterminate={true}></IonCheckbox>
-      <IonLabel>Indeterminate checkbox</IonLabel>
-    </IonItem>
+    <IonCheckbox indeterminate={true}>Indeterminate checkbox</IonCheckbox>
   );
 }
 export default Example;
diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md
index 0ad2ddbf62b..5d08480d9a3 100644
--- a/static/usage/v7/checkbox/indeterminate/vue.md
+++ b/static/usage/v7/checkbox/indeterminate/vue.md
@@ -1,25 +1,14 @@
 ```html
 <template>
-  <ion-item>
-    <ion-checkbox slot="start" :indeterminate="true"></ion-checkbox>
-    <ion-label>Indeterminate checkbox</ion-label>
-  </ion-item>
+  <ion-checkbox :indeterminate="true">Indeterminate checkbox</ion-checkbox>
 </template>
 
 <script lang="ts">
-  import {
-    IonCheckbox,
-    IonItem,
-    IonLabel
-  } from '@ionic/vue';
+  import { IonCheckbox } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: {
-      IonCheckbox,
-      IonItem,
-      IonLabel
-    }
+    components: { IonCheckbox }
   });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular.md
new file mode 100644
index 00000000000..f253722afec
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
+  </ion-item>
+  
+  <ion-item>
+    <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
+  </ion-item>
+  
+  <ion-item>
+    <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/checkbox/justify/demo.html b/static/usage/v7/checkbox/justify/demo.html
new file mode 100644
index 00000000000..7ebeb15fdf4
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/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>Checkbox</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
+            </ion-item>
+
+            <ion-item>
+              <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
+            </ion-item>
+
+            <ion-item>
+              <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/checkbox/justify/index.md b/static/usage/v7/checkbox/justify/index.md
new file mode 100644
index 00000000000..1128d74a9f6
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/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/checkbox/justify/demo.html" />
diff --git a/static/usage/v7/checkbox/justify/javascript.md b/static/usage/v7/checkbox/justify/javascript.md
new file mode 100644
index 00000000000..f253722afec
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
+  </ion-item>
+  
+  <ion-item>
+    <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
+  </ion-item>
+  
+  <ion-item>
+    <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/checkbox/justify/react.md b/static/usage/v7/checkbox/justify/react.md
new file mode 100644
index 00000000000..fd92e9f1fa0
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonCheckbox justify="start">Packed at the Start of Line</IonCheckbox>
+      </IonItem>
+      
+      <IonItem>
+        <IonCheckbox justify="end">Packed at the End of Line</IonCheckbox>
+      </IonItem>
+      
+      <IonItem>
+        <IonCheckbox justify="space-between">Space Between Label and Control</IonCheckbox>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md
new file mode 100644
index 00000000000..5659a826bc6
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
+    </ion-item>
+    
+    <ion-item>
+      <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
+    </ion-item>
+    
+    <ion-item>
+      <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonCheckbox, IonItem, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCheckbox, IonItem, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular.md
new file mode 100644
index 00000000000..f2cb87d8171
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-checkbox labelPlacement="start">Label at the Start</ion-checkbox>
+
+<br />
+
+<ion-checkbox labelPlacement="end">Label at the End</ion-checkbox>
+
+<br />
+
+<ion-checkbox labelPlacement="fixed">Fixed Width Label</ion-checkbox>
+```
diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html
new file mode 100644
index 00000000000..2adee164de5
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/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>Checkbox</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <div>
+          <ion-checkbox label-placement="start">Label at the Start</ion-checkbox>
+
+          <br />
+
+          <ion-checkbox label-placement="end">Label at the End</ion-checkbox>
+
+          <br />
+
+          <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+        </div>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/checkbox/label-placement/index.md b/static/usage/v7/checkbox/label-placement/index.md
new file mode 100644
index 00000000000..2534249529a
--- /dev/null
+++ b/static/usage/v7/checkbox/label-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/checkbox/label-placement/demo.html" />
diff --git a/static/usage/v7/checkbox/label-placement/javascript.md b/static/usage/v7/checkbox/label-placement/javascript.md
new file mode 100644
index 00000000000..e3321ed4f9b
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-checkbox label-placement="start">Label at the Start</ion-checkbox>
+
+<br />
+
+<ion-checkbox label-placement="end">Label at the End</ion-checkbox>
+
+<br />
+
+<ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+```
diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md
new file mode 100644
index 00000000000..42520178b60
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonCheckbox labelPlacement="start">Label at the Start</IonCheckbox>
+      
+      <br />
+      
+      <IonCheckbox labelPlacement="end">Label at the End</IonCheckbox>
+      
+      <br />
+      
+      <IonCheckbox labelPlacement="fixed">Fixed Width Label</IonCheckbox>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
new file mode 100644
index 00000000000..31697dd3694
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-checkbox label-placement="start">Label at the Start</ion-checkbox>
+  
+  <br />
+  
+  <ion-checkbox label-placement="end">Label at the End</ion-checkbox>
+  
+  <br />
+  
+  <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+</template>
+
+<script lang="ts">
+  import { IonCheckbox } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonCheckbox },
+  });
+</script>
+```
diff --git a/static/usage/v7/checkbox/migration/index.md b/static/usage/v7/checkbox/migration/index.md
new file mode 100644
index 00000000000..acf77957566
--- /dev/null
+++ b/static/usage/v7/checkbox/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````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
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox>Checkbox Label</ion-checkbox>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
+</ion-item>
+
+<!-- Checkbox at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox>Checkbox Label</ion-checkbox>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox labelPlacement="fixed">Checkbox Label</ion-checkbox>
+</ion-item>
+
+<!-- Checkbox at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox labelPlacement="end">Checkbox Label</ion-checkbox>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel>Checkbox Label</IonLabel>
+  <IonCheckbox></IonCheckbox>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonCheckbox>Checkbox Label</IonCheckbox>
+</IonItem>
+
+{/* Fixed Labels */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel position="fixed">Checkbox Label</IonLabel>
+  <IonCheckbox></IonCheckbox>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonCheckbox labelPlacement="fixed">Checkbox Label</IonCheckbox>
+</IonItem>
+
+{/* Checkbox at the start of line, Label at the end of line */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel slot="end">Checkbox Label</IonLabel>
+  <IonCheckbox></IonCheckbox>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonCheckbox labelPlacement="end">Checkbox Label</IonCheckbox>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<!-- Basic -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox>Checkbox Label</ion-checkbox>
+</ion-item>
+
+<!-- Fixed Labels -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="fixed">Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
+</ion-item>
+
+<!-- Checkbox at the start of line, Label at the end of line -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label slot="end">Checkbox Label</ion-label>
+  <ion-checkbox></ion-checkbox>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
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
index c8fbfdb86d8..f5f63bf8c22 100644
--- 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
@@ -1,7 +1,7 @@
 ```css
 ion-checkbox {
   --size: 32px;
-  --background-checked: #6815ec;
+  --checkbox-background-checked: #6815ec;
 }
 
 ion-checkbox::part(container) {
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
index a54828724aa..29d3d419b61 100644
--- 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
@@ -1,6 +1,3 @@
 ```html
-<ion-item>
-  <ion-checkbox slot="start"></ion-checkbox>
-  <ion-label>Themed checkbox</ion-label>
-</ion-item>
+<ion-checkbox>Themed checkbox</ion-checkbox>
 ```
\ 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
index b75f12c0655..706088a1d31 100644
--- a/static/usage/v7/checkbox/theming/css-properties/demo.html
+++ b/static/usage/v7/checkbox/theming/css-properties/demo.html
@@ -7,12 +7,12 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
   <style>
     ion-checkbox {
       --size: 32px;
-      --background-checked: #6815ec;
+      --checkbox-background-checked: #6815ec;
     }
 
     ion-checkbox::part(container) {
@@ -26,13 +26,10 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-item>
-          <ion-checkbox slot="start"></ion-checkbox>
-          <ion-label>Themed checkbox</ion-label>
-        </ion-item>
+        <ion-checkbox>Themed checkbox</ion-checkbox>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/checkbox/theming/css-properties/javascript.md b/static/usage/v7/checkbox/theming/css-properties/javascript.md
index 5ee2949135b..a247dee9a04 100644
--- a/static/usage/v7/checkbox/theming/css-properties/javascript.md
+++ b/static/usage/v7/checkbox/theming/css-properties/javascript.md
@@ -1,13 +1,10 @@
 ```html
-<ion-item>
-  <ion-checkbox slot="start"></ion-checkbox>
-  <ion-label>Themed checkbox</ion-label>
-</ion-item>
+<ion-checkbox>Themed checkbox</ion-checkbox>
 
 <style>
   ion-checkbox {
     --size: 32px;
-    --background-checked: #6815ec;
+    --checkbox-background-checked: #6815ec;
   }
   
   ion-checkbox::part(container) {
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
index c8fbfdb86d8..f5f63bf8c22 100644
--- a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
@@ -1,7 +1,7 @@
 ```css
 ion-checkbox {
   --size: 32px;
-  --background-checked: #6815ec;
+  --checkbox-background-checked: #6815ec;
 }
 
 ion-checkbox::part(container) {
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
index 28784175181..2fb46fb7ba5 100644
--- a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
@@ -1,19 +1,12 @@
 ```tsx
 import React from 'react';
-import {
-  IonCheckbox,
-  IonItem,
-  IonLabel
-} from '@ionic/react';
+import { IonCheckbox } from '@ionic/react';
 
 import './main.css';
 
 function Example() {
   return (
-    <IonItem>
-      <IonCheckbox slot="start"></IonCheckbox>
-      <IonLabel>Themed checkbox</IonLabel>
-    </IonItem>
+    <IonCheckbox>Themed checkbox</IonCheckbox>
   );
 }
 export default Example;
diff --git a/static/usage/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md
index 3bb88c82577..7c4f5fd698b 100644
--- a/static/usage/v7/checkbox/theming/css-properties/vue.md
+++ b/static/usage/v7/checkbox/theming/css-properties/vue.md
@@ -1,32 +1,21 @@
 ```html
 <template>
-  <ion-item>
-    <ion-checkbox slot="start"></ion-checkbox>
-    <ion-label>Themed checkbox</ion-label>
-  </ion-item>
+  <ion-checkbox>Themed checkbox</ion-checkbox>
 </template>
 
 <script lang="ts">
-  import {
-    IonCheckbox,
-    IonItem,
-    IonLabel
-  } from '@ionic/vue';
+  import { IonCheckbox } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: {
-      IonCheckbox,
-      IonItem,
-      IonLabel
-    }
+    components: { IonCheckbox }
   });
 </script>
 
 <style>
   ion-checkbox {
     --size: 32px;
-    --background-checked: #6815ec;
+    --checkbox-background-checked: #6815ec;
   }
   
   ion-checkbox::part(container) {

From 8ea7ec172d254e9fa333113c772f6d7828e377da Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 2 Feb 2023 14:39:48 -0500
Subject: [PATCH 195/469] fix(playground): demo container is visible on small
 viewports (#2754)

---
 src/components/global/Playground/playground.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css
index bfb31018c25..174fd6a9936 100644
--- a/src/components/global/Playground/playground.css
+++ b/src/components/global/Playground/playground.css
@@ -208,6 +208,10 @@
   width: 0%;
 }
 
+.playground .frame-visible {
+  width: 100%;
+}
+
 /** Tabs **/
 .playground .tabs-container {
   background: var(--playground-code-background);

From b3177f20cdb0f0f5008f0c3fb92c62374b3a32a6 Mon Sep 17 00:00:00 2001
From: Lars Mikkelsen <lars@ionic.io>
Date: Thu, 2 Feb 2023 20:44:56 -0500
Subject: [PATCH 196/469] Fix Japanese translation (#2755)

---
 scripts/i18n.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index fffa6cf41b6..cb4f06ec09c 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -3,8 +3,8 @@ set -o errexit
 set -o nounset
 
 if [ "${VERCEL_ENV:-preview}" == "production" ]; then
-    mkdir -p i18n/ja/docusaurus-plugin-content-docs/v6/
+    mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v6/
     curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
-      tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/v6/ --strip-components 2 ionic-docs-translation-jp/docs
+      tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v6/ --strip-components 2 ionic-docs-translation-jp/docs
     node scripts/api-ja.js
 fi

From 3cfff72856b4d13a338a0b6162023014ede68471 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 6 Feb 2023 16:50:10 -0600
Subject: [PATCH 197/469] docs(card): remove extra ios header styling from v7
 playgrounds (#2762)

---
 .../example_component_html.md => angular.md}  |  0
 .../basic/angular/example_component_css.md    |  7 -----
 static/usage/v7/card/basic/demo.html          | 10 ++-----
 static/usage/v7/card/basic/index.md           | 26 +++----------------
 static/usage/v7/card/basic/javascript.md      |  8 ------
 .../basic/{react/main_tsx.md => react.md}     |  2 --
 static/usage/v7/card/basic/react/main_css.md  |  7 -----
 static/usage/v7/card/basic/vue.md             |  8 ------
 .../example_component_html.md => angular.md}  |  0
 .../buttons/angular/example_component_css.md  |  7 -----
 static/usage/v7/card/buttons/demo.html        | 10 ++-----
 static/usage/v7/card/buttons/index.md         | 26 +++----------------
 static/usage/v7/card/buttons/javascript.md    |  8 ------
 .../buttons/{react/main_tsx.md => react.md}   |  2 --
 .../usage/v7/card/buttons/react/main_css.md   |  7 -----
 static/usage/v7/card/buttons/vue.md           |  8 ------
 .../list/angular/example_component_css.md     |  6 -----
 static/usage/v7/card/list/demo.html           | 10 ++-----
 static/usage/v7/card/list/javascript.md       |  6 -----
 static/usage/v7/card/list/react/main_css.md   |  6 -----
 static/usage/v7/card/list/vue.md              |  6 -----
 .../example_component_html.md => angular.md}  |  0
 .../media/angular/example_component_css.md    |  7 -----
 static/usage/v7/card/media/demo.html          | 10 ++-----
 static/usage/v7/card/media/index.md           | 26 +++----------------
 static/usage/v7/card/media/javascript.md      |  8 ------
 .../media/{react/main_tsx.md => react.md}     |  2 --
 static/usage/v7/card/media/react/main_css.md  |  7 -----
 static/usage/v7/card/media/vue.md             |  8 ------
 .../example_component_html.md => angular.md}  |  0
 .../colors/angular/example_component_css.md   |  7 -----
 static/usage/v7/card/theming/colors/demo.html | 10 ++-----
 static/usage/v7/card/theming/colors/index.md  | 26 +++----------------
 .../v7/card/theming/colors/javascript.md      |  8 ------
 .../colors/{react/main_tsx.md => react.md}    |  2 --
 .../v7/card/theming/colors/react/main_css.md  |  7 -----
 static/usage/v7/card/theming/colors/vue.md    |  8 ------
 .../angular/example_component_css.md          |  6 -----
 .../v7/card/theming/css-properties/demo.html  | 10 ++-----
 .../card/theming/css-properties/javascript.md |  6 -----
 .../theming/css-properties/react/main_css.md  |  6 -----
 .../v7/card/theming/css-properties/vue.md     |  6 -----
 42 files changed, 24 insertions(+), 316 deletions(-)
 rename static/usage/v7/card/basic/{angular/example_component_html.md => angular.md} (100%)
 delete mode 100644 static/usage/v7/card/basic/angular/example_component_css.md
 rename static/usage/v7/card/basic/{react/main_tsx.md => react.md} (95%)
 delete mode 100644 static/usage/v7/card/basic/react/main_css.md
 rename static/usage/v7/card/buttons/{angular/example_component_html.md => angular.md} (100%)
 delete mode 100644 static/usage/v7/card/buttons/angular/example_component_css.md
 rename static/usage/v7/card/buttons/{react/main_tsx.md => react.md} (96%)
 delete mode 100644 static/usage/v7/card/buttons/react/main_css.md
 rename static/usage/v7/card/media/{angular/example_component_html.md => angular.md} (100%)
 delete mode 100644 static/usage/v7/card/media/angular/example_component_css.md
 rename static/usage/v7/card/media/{react/main_tsx.md => react.md} (96%)
 delete mode 100644 static/usage/v7/card/media/react/main_css.md
 rename static/usage/v7/card/theming/colors/{angular/example_component_html.md => angular.md} (100%)
 delete mode 100644 static/usage/v7/card/theming/colors/angular/example_component_css.md
 rename static/usage/v7/card/theming/colors/{react/main_tsx.md => react.md} (99%)
 delete mode 100644 static/usage/v7/card/theming/colors/react/main_css.md

diff --git a/static/usage/v7/card/basic/angular/example_component_html.md b/static/usage/v7/card/basic/angular.md
similarity index 100%
rename from static/usage/v7/card/basic/angular/example_component_html.md
rename to static/usage/v7/card/basic/angular.md
diff --git a/static/usage/v7/card/basic/angular/example_component_css.md b/static/usage/v7/card/basic/angular/example_component_css.md
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/basic/angular/example_component_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/demo.html b/static/usage/v7/card/basic/demo.html
index e6464c335a9..329c4a3ce34 100644
--- a/static/usage/v7/card/basic/demo.html
+++ b/static/usage/v7/card/basic/demo.html
@@ -7,20 +7,14 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/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>
 
diff --git a/static/usage/v7/card/basic/index.md b/static/usage/v7/card/basic/index.md
index 88e1ee9de5b..41354dffa34 100644
--- a/static/usage/v7/card/basic/index.md
+++ b/static/usage/v7/card/basic/index.md
@@ -1,32 +1,12 @@
 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 react from './react.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 from './angular.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,
-      },
-    },
-  }}
+  code={{ javascript, react, vue, angular }}
   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
index 737c46c9224..d489fbc5e26 100644
--- a/static/usage/v7/card/basic/javascript.md
+++ b/static/usage/v7/card/basic/javascript.md
@@ -9,12 +9,4 @@
     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_tsx.md b/static/usage/v7/card/basic/react.md
similarity index 95%
rename from static/usage/v7/card/basic/react/main_tsx.md
rename to static/usage/v7/card/basic/react.md
index 251b18ce24d..e3f400dc659 100644
--- a/static/usage/v7/card/basic/react/main_tsx.md
+++ b/static/usage/v7/card/basic/react.md
@@ -2,8 +2,6 @@
 import React from 'react';
 import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
 
-import './main.css';
-
 function Example() {
   return (
     <IonCard>
diff --git a/static/usage/v7/card/basic/react/main_css.md b/static/usage/v7/card/basic/react/main_css.md
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/basic/react/main_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/vue.md b/static/usage/v7/card/basic/vue.md
index 4b2388246d5..aa44d9f0931 100644
--- a/static/usage/v7/card/basic/vue.md
+++ b/static/usage/v7/card/basic/vue.md
@@ -20,12 +20,4 @@
     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_html.md b/static/usage/v7/card/buttons/angular.md
similarity index 100%
rename from static/usage/v7/card/buttons/angular/example_component_html.md
rename to static/usage/v7/card/buttons/angular.md
diff --git a/static/usage/v7/card/buttons/angular/example_component_css.md b/static/usage/v7/card/buttons/angular/example_component_css.md
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/buttons/angular/example_component_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/demo.html b/static/usage/v7/card/buttons/demo.html
index 012bbc31321..0e5d5317575 100644
--- a/static/usage/v7/card/buttons/demo.html
+++ b/static/usage/v7/card/buttons/demo.html
@@ -7,20 +7,14 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/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>
 
diff --git a/static/usage/v7/card/buttons/index.md b/static/usage/v7/card/buttons/index.md
index 4861313847b..f0a1001a6cc 100644
--- a/static/usage/v7/card/buttons/index.md
+++ b/static/usage/v7/card/buttons/index.md
@@ -1,33 +1,13 @@
 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 react from './react.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 from './angular.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,
-      },
-    },
-  }}
+  code={{ javascript, react, vue, angular }}
   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
index f87b4e14c90..c597c1dca7a 100644
--- a/static/usage/v7/card/buttons/javascript.md
+++ b/static/usage/v7/card/buttons/javascript.md
@@ -12,12 +12,4 @@
   <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_tsx.md b/static/usage/v7/card/buttons/react.md
similarity index 96%
rename from static/usage/v7/card/buttons/react/main_tsx.md
rename to static/usage/v7/card/buttons/react.md
index a24ba6cd1e9..f90ab0d3cbb 100644
--- a/static/usage/v7/card/buttons/react/main_tsx.md
+++ b/static/usage/v7/card/buttons/react.md
@@ -2,8 +2,6 @@
 import React from 'react';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
 
-import './main.css';
-
 function Example() {
   return (
     <IonCard>
diff --git a/static/usage/v7/card/buttons/react/main_css.md b/static/usage/v7/card/buttons/react/main_css.md
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/buttons/react/main_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/vue.md b/static/usage/v7/card/buttons/vue.md
index 70db0d92201..2266589135f 100644
--- a/static/usage/v7/card/buttons/vue.md
+++ b/static/usage/v7/card/buttons/vue.md
@@ -23,12 +23,4 @@
     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
index fe56dd12b99..1e82c58ad8c 100644
--- a/static/usage/v7/card/list/angular/example_component_css.md
+++ b/static/usage/v7/card/list/angular/example_component_css.md
@@ -2,10 +2,4 @@
 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/demo.html b/static/usage/v7/card/list/demo.html
index 123db8876cf..a74d6923707 100644
--- a/static/usage/v7/card/list/demo.html
+++ b/static/usage/v7/card/list/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -23,12 +23,6 @@
     ion-item {
       --padding-start: 0;
     }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
   </style>
 </head>
 
diff --git a/static/usage/v7/card/list/javascript.md b/static/usage/v7/card/list/javascript.md
index 4103b7c3c48..e640c5e9966 100644
--- a/static/usage/v7/card/list/javascript.md
+++ b/static/usage/v7/card/list/javascript.md
@@ -41,11 +41,5 @@
   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
index fe56dd12b99..1e82c58ad8c 100644
--- a/static/usage/v7/card/list/react/main_css.md
+++ b/static/usage/v7/card/list/react/main_css.md
@@ -2,10 +2,4 @@
 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/vue.md b/static/usage/v7/card/list/vue.md
index 7d3e93d7770..1a565483588 100644
--- a/static/usage/v7/card/list/vue.md
+++ b/static/usage/v7/card/list/vue.md
@@ -52,11 +52,5 @@
   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_html.md b/static/usage/v7/card/media/angular.md
similarity index 100%
rename from static/usage/v7/card/media/angular/example_component_html.md
rename to static/usage/v7/card/media/angular.md
diff --git a/static/usage/v7/card/media/angular/example_component_css.md b/static/usage/v7/card/media/angular/example_component_css.md
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/media/angular/example_component_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/demo.html b/static/usage/v7/card/media/demo.html
index edc1a4b75a1..3af6c687963 100644
--- a/static/usage/v7/card/media/demo.html
+++ b/static/usage/v7/card/media/demo.html
@@ -7,20 +7,14 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/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>
 
diff --git a/static/usage/v7/card/media/index.md b/static/usage/v7/card/media/index.md
index 98101ce8e43..bded2602ff6 100644
--- a/static/usage/v7/card/media/index.md
+++ b/static/usage/v7/card/media/index.md
@@ -1,33 +1,13 @@
 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 react from './react.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 from './angular.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,
-      },
-    },
-  }}
+  code={{ javascript, react, vue, angular }}
   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
index eb6cfee9522..2e074cd5c6d 100644
--- a/static/usage/v7/card/media/javascript.md
+++ b/static/usage/v7/card/media/javascript.md
@@ -10,12 +10,4 @@
     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_tsx.md b/static/usage/v7/card/media/react.md
similarity index 96%
rename from static/usage/v7/card/media/react/main_tsx.md
rename to static/usage/v7/card/media/react.md
index 7c47833027f..33c5707bb15 100644
--- a/static/usage/v7/card/media/react/main_tsx.md
+++ b/static/usage/v7/card/media/react.md
@@ -2,8 +2,6 @@
 import React from 'react';
 import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
 
-import './main.css';
-
 function Example() {
   return (
     <IonCard>
diff --git a/static/usage/v7/card/media/react/main_css.md b/static/usage/v7/card/media/react/main_css.md
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/media/react/main_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/vue.md b/static/usage/v7/card/media/vue.md
index e433119f123..472b8a7d991 100644
--- a/static/usage/v7/card/media/vue.md
+++ b/static/usage/v7/card/media/vue.md
@@ -21,12 +21,4 @@
     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_html.md b/static/usage/v7/card/theming/colors/angular.md
similarity index 100%
rename from static/usage/v7/card/theming/colors/angular/example_component_html.md
rename to static/usage/v7/card/theming/colors/angular.md
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
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/theming/colors/angular/example_component_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/demo.html b/static/usage/v7/card/theming/colors/demo.html
index c0e5f88d827..c9cf360ea42 100644
--- a/static/usage/v7/card/theming/colors/demo.html
+++ b/static/usage/v7/card/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -18,12 +18,6 @@
     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>
 
diff --git a/static/usage/v7/card/theming/colors/index.md b/static/usage/v7/card/theming/colors/index.md
index c11eb4d6f18..30ce310e99c 100644
--- a/static/usage/v7/card/theming/colors/index.md
+++ b/static/usage/v7/card/theming/colors/index.md
@@ -1,33 +1,13 @@
 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 react from './react.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 from './angular.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,
-      },
-    },
-  }}
+  code={{ javascript, react, vue, angular }}
   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
index 6822cd586a4..bda4dbfe1dc 100644
--- a/static/usage/v7/card/theming/colors/javascript.md
+++ b/static/usage/v7/card/theming/colors/javascript.md
@@ -97,12 +97,4 @@
     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_tsx.md b/static/usage/v7/card/theming/colors/react.md
similarity index 99%
rename from static/usage/v7/card/theming/colors/react/main_tsx.md
rename to static/usage/v7/card/theming/colors/react.md
index efb556f7a01..cc2f4623a3a 100644
--- a/static/usage/v7/card/theming/colors/react/main_tsx.md
+++ b/static/usage/v7/card/theming/colors/react.md
@@ -2,8 +2,6 @@
 import React from 'react';
 import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
 
-import './main.css';
-
 function Example() {
   return (
     <>
diff --git a/static/usage/v7/card/theming/colors/react/main_css.md b/static/usage/v7/card/theming/colors/react/main_css.md
deleted file mode 100644
index e1d8e0d530e..00000000000
--- a/static/usage/v7/card/theming/colors/react/main_css.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```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/vue.md b/static/usage/v7/card/theming/colors/vue.md
index 9f8f76585c8..337df235251 100644
--- a/static/usage/v7/card/theming/colors/vue.md
+++ b/static/usage/v7/card/theming/colors/vue.md
@@ -108,12 +108,4 @@
     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
index 10b2ee69cb0..9e5b40683ac 100644
--- 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
@@ -11,10 +11,4 @@ ion-card-title {
 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/demo.html b/static/usage/v7/card/theming/css-properties/demo.html
index dc131842db3..140ca8f1e1c 100644
--- a/static/usage/v7/card/theming/css-properties/demo.html
+++ b/static/usage/v7/card/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -28,12 +28,6 @@
     ion-card-subtitle {
       --color: #d1fff8;
     }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
   </style>
 </head>
 
diff --git a/static/usage/v7/card/theming/css-properties/javascript.md b/static/usage/v7/card/theming/css-properties/javascript.md
index 5f7c4c56a3b..b8b50748719 100644
--- a/static/usage/v7/card/theming/css-properties/javascript.md
+++ b/static/usage/v7/card/theming/css-properties/javascript.md
@@ -23,11 +23,5 @@
   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
index 10b2ee69cb0..9e5b40683ac 100644
--- a/static/usage/v7/card/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/card/theming/css-properties/react/main_css.md
@@ -11,10 +11,4 @@ ion-card-title {
 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/vue.md b/static/usage/v7/card/theming/css-properties/vue.md
index 4099cc49de6..e2db7992d85 100644
--- a/static/usage/v7/card/theming/css-properties/vue.md
+++ b/static/usage/v7/card/theming/css-properties/vue.md
@@ -34,11 +34,5 @@
   ion-card-subtitle {
     --color: #d1fff8;
   }
-
-  /* iOS places the subtitle above the title */
-  ion-card-header.ios {
-    display: flex;
-    flex-flow: column-reverse;
-  }
 </style>
 ```

From 592061d072c124b95b0ae854a67a9597d8aac6ac Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 7 Feb 2023 14:47:08 -0600
Subject: [PATCH 198/469] docs(picker): remove Usage section (#2764)

---
 docs/api/picker.md                      | 205 ------------------------
 versioned_docs/version-v6/api/picker.md | 198 -----------------------
 2 files changed, 403 deletions(-)

diff --git a/docs/api/picker.md b/docs/api/picker.md
index b5adb0de323..8a1d4d59f64 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -1,9 +1,6 @@
 ---
 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';
@@ -122,208 +119,6 @@ interface PickerOptions {
 }
 ```
 
-
-
-
-## 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 />
 
diff --git a/versioned_docs/version-v6/api/picker.md b/versioned_docs/version-v6/api/picker.md
index 3bb5393194b..8eec3438db2 100644
--- a/versioned_docs/version-v6/api/picker.md
+++ b/versioned_docs/version-v6/api/picker.md
@@ -1,10 +1,6 @@
 ---
 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';
@@ -108,200 +104,6 @@ interface PickerOptions {
 }
 ```
 
-## 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 />

From 385e08b97754d07eedd9d4a7af315df22d2ea9ae Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 8 Feb 2023 10:33:07 -0500
Subject: [PATCH 199/469] docs(datetime): align basic demo container to the
 start (#2763)

---
 static/usage/v6/datetime/basic/demo.html | 4 ++++
 static/usage/v7/datetime/basic/demo.html | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/static/usage/v6/datetime/basic/demo.html b/static/usage/v6/datetime/basic/demo.html
index a3945e21ce9..bcd958a1058 100644
--- a/static/usage/v6/datetime/basic/demo.html
+++ b/static/usage/v6/datetime/basic/demo.html
@@ -13,6 +13,10 @@
     ion-datetime {
       width: 350px;
     }
+
+    .container {
+      align-items: flex-start;
+    }
   </style>
 </head>
 
diff --git a/static/usage/v7/datetime/basic/demo.html b/static/usage/v7/datetime/basic/demo.html
index a3945e21ce9..1e12e6d24fb 100644
--- a/static/usage/v7/datetime/basic/demo.html
+++ b/static/usage/v7/datetime/basic/demo.html
@@ -13,6 +13,10 @@
     ion-datetime {
       width: 350px;
     }
+
+    .container {
+      align-items: flex-start;
+    }
   </style>
 </head>
 
@@ -26,4 +30,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From 2e8b224618d0eb4082ef1803e7ff0b7ef9ecf4e9 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 8 Feb 2023 10:38:03 -0500
Subject: [PATCH 200/469] docs(tabs): component playground example (#2729)

---
 docs/api/tabs.md                              | 456 +----------------
 .../stackblitz/v6/react/package-lock.json     | 163 +++---
 static/code/stackblitz/v6/react/package.json  |   2 +
 .../code/stackblitz/v6/vue/package-lock.json  | 111 ++---
 .../stackblitz/v7/react/package-lock.json     | 303 +++++++++++-
 static/code/stackblitz/v7/react/package.json  |   5 +
 .../code/stackblitz/v7/vue/package-lock.json  |  45 +-
 static/code/stackblitz/v7/vue/package.json    |   1 +
 .../tabs/router/angular/app_component_html.md |   3 +
 .../v6/tabs/router/angular/app_module_ts.md   |  19 +
 .../router/angular/app_routing_module_ts.md   |  42 ++
 .../router/angular/example_component_html.md  |  24 +
 .../v6/tabs/router/angular/global_css.md      |   8 +
 .../angular/home_page_component_html.md       |  10 +
 .../router/angular/home_page_component_ts.md  |   9 +
 .../router/angular/home_page_module_ts.md     |  14 +
 .../angular/library_page_component_html.md    |  10 +
 .../angular/library_page_component_ts.md      |   9 +
 .../router/angular/library_page_module_ts.md  |  14 +
 .../angular/radio_page_component_html.md      |  10 +
 .../router/angular/radio_page_component_ts.md |   9 +
 .../router/angular/radio_page_module_ts.md    |  14 +
 .../angular/search_page_component_html.md     |  10 +
 .../angular/search_page_component_ts.md       |   9 +
 .../router/angular/search_page_module_ts.md   |  14 +
 static/usage/v6/tabs/router/demo.html         | 125 +++++
 static/usage/v6/tabs/router/index.md          |  93 ++++
 static/usage/v6/tabs/router/javascript.md     | 101 ++++
 .../v6/tabs/router/react/home_page_tsx.md     |  28 ++
 .../v6/tabs/router/react/library_page_tsx.md  |  28 ++
 static/usage/v6/tabs/router/react/main_tsx.md |  58 +++
 .../v6/tabs/router/react/radio_page_tsx.md    |  28 ++
 .../v6/tabs/router/react/search_page_tsx.md   |  28 ++
 static/usage/v6/tabs/router/vue.md            |  81 +++
 static/usage/v6/tabs/router/vue/app_vue.md    |  20 +
 .../usage/v6/tabs/router/vue/example_vue.md   |  48 ++
 .../usage/v6/tabs/router/vue/home_page_vue.md |  31 ++
 .../v6/tabs/router/vue/library_page_vue.md    |  31 ++
 static/usage/v6/tabs/router/vue/main_ts.md    |  32 ++
 .../v6/tabs/router/vue/radio_page_vue.md      |  31 ++
 static/usage/v6/tabs/router/vue/router_ts.md  |  46 ++
 .../v6/tabs/router/vue/search_page_vue.md     |  31 ++
 .../tabs/router/angular/app_component_html.md |   3 +
 .../v7/tabs/router/angular/app_module_ts.md   |  19 +
 .../router/angular/app_routing_module_ts.md   |  42 ++
 .../router/angular/example_component_html.md  |  24 +
 .../v7/tabs/router/angular/global_css.md      |   8 +
 .../angular/home_page_component_html.md       |  10 +
 .../router/angular/home_page_component_ts.md  |   9 +
 .../router/angular/home_page_module_ts.md     |  14 +
 .../angular/library_page_component_html.md    |  10 +
 .../angular/library_page_component_ts.md      |   9 +
 .../router/angular/library_page_module_ts.md  |  14 +
 .../angular/radio_page_component_html.md      |  10 +
 .../router/angular/radio_page_component_ts.md |   9 +
 .../router/angular/radio_page_module_ts.md    |  14 +
 .../angular/search_page_component_html.md     |  10 +
 .../angular/search_page_component_ts.md       |   9 +
 .../router/angular/search_page_module_ts.md   |  14 +
 static/usage/v7/tabs/router/demo.html         | 127 +++++
 static/usage/v7/tabs/router/index.md          |  93 ++++
 static/usage/v7/tabs/router/javascript.md     | 101 ++++
 .../v7/tabs/router/react/home_page_tsx.md     |  28 ++
 .../v7/tabs/router/react/library_page_tsx.md  |  28 ++
 static/usage/v7/tabs/router/react/main_tsx.md |  58 +++
 .../v7/tabs/router/react/radio_page_tsx.md    |  28 ++
 .../v7/tabs/router/react/search_page_tsx.md   |  28 ++
 static/usage/v7/tabs/router/vue.md            |  81 +++
 static/usage/v7/tabs/router/vue/app_vue.md    |  20 +
 .../usage/v7/tabs/router/vue/example_vue.md   |  48 ++
 .../usage/v7/tabs/router/vue/home_page_vue.md |  31 ++
 .../v7/tabs/router/vue/library_page_vue.md    |  31 ++
 static/usage/v7/tabs/router/vue/main_ts.md    |  32 ++
 .../v7/tabs/router/vue/radio_page_vue.md      |  31 ++
 static/usage/v7/tabs/router/vue/router_ts.md  |  46 ++
 .../v7/tabs/router/vue/search_page_vue.md     |  31 ++
 versioned_docs/version-v6/api/tabs.md         | 468 ++----------------
 77 files changed, 2654 insertions(+), 1038 deletions(-)
 create mode 100644 static/usage/v6/tabs/router/angular/app_component_html.md
 create mode 100644 static/usage/v6/tabs/router/angular/app_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/app_routing_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/example_component_html.md
 create mode 100644 static/usage/v6/tabs/router/angular/global_css.md
 create mode 100644 static/usage/v6/tabs/router/angular/home_page_component_html.md
 create mode 100644 static/usage/v6/tabs/router/angular/home_page_component_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/home_page_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/library_page_component_html.md
 create mode 100644 static/usage/v6/tabs/router/angular/library_page_component_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/library_page_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/radio_page_component_html.md
 create mode 100644 static/usage/v6/tabs/router/angular/radio_page_component_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/radio_page_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/search_page_component_html.md
 create mode 100644 static/usage/v6/tabs/router/angular/search_page_component_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/search_page_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/demo.html
 create mode 100644 static/usage/v6/tabs/router/index.md
 create mode 100644 static/usage/v6/tabs/router/javascript.md
 create mode 100644 static/usage/v6/tabs/router/react/home_page_tsx.md
 create mode 100644 static/usage/v6/tabs/router/react/library_page_tsx.md
 create mode 100644 static/usage/v6/tabs/router/react/main_tsx.md
 create mode 100644 static/usage/v6/tabs/router/react/radio_page_tsx.md
 create mode 100644 static/usage/v6/tabs/router/react/search_page_tsx.md
 create mode 100644 static/usage/v6/tabs/router/vue.md
 create mode 100644 static/usage/v6/tabs/router/vue/app_vue.md
 create mode 100644 static/usage/v6/tabs/router/vue/example_vue.md
 create mode 100644 static/usage/v6/tabs/router/vue/home_page_vue.md
 create mode 100644 static/usage/v6/tabs/router/vue/library_page_vue.md
 create mode 100644 static/usage/v6/tabs/router/vue/main_ts.md
 create mode 100644 static/usage/v6/tabs/router/vue/radio_page_vue.md
 create mode 100644 static/usage/v6/tabs/router/vue/router_ts.md
 create mode 100644 static/usage/v6/tabs/router/vue/search_page_vue.md
 create mode 100644 static/usage/v7/tabs/router/angular/app_component_html.md
 create mode 100644 static/usage/v7/tabs/router/angular/app_module_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/app_routing_module_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/example_component_html.md
 create mode 100644 static/usage/v7/tabs/router/angular/global_css.md
 create mode 100644 static/usage/v7/tabs/router/angular/home_page_component_html.md
 create mode 100644 static/usage/v7/tabs/router/angular/home_page_component_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/home_page_module_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/library_page_component_html.md
 create mode 100644 static/usage/v7/tabs/router/angular/library_page_component_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/library_page_module_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/radio_page_component_html.md
 create mode 100644 static/usage/v7/tabs/router/angular/radio_page_component_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/radio_page_module_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/search_page_component_html.md
 create mode 100644 static/usage/v7/tabs/router/angular/search_page_component_ts.md
 create mode 100644 static/usage/v7/tabs/router/angular/search_page_module_ts.md
 create mode 100644 static/usage/v7/tabs/router/demo.html
 create mode 100644 static/usage/v7/tabs/router/index.md
 create mode 100644 static/usage/v7/tabs/router/javascript.md
 create mode 100644 static/usage/v7/tabs/router/react/home_page_tsx.md
 create mode 100644 static/usage/v7/tabs/router/react/library_page_tsx.md
 create mode 100644 static/usage/v7/tabs/router/react/main_tsx.md
 create mode 100644 static/usage/v7/tabs/router/react/radio_page_tsx.md
 create mode 100644 static/usage/v7/tabs/router/react/search_page_tsx.md
 create mode 100644 static/usage/v7/tabs/router/vue.md
 create mode 100644 static/usage/v7/tabs/router/vue/app_vue.md
 create mode 100644 static/usage/v7/tabs/router/vue/example_vue.md
 create mode 100644 static/usage/v7/tabs/router/vue/home_page_vue.md
 create mode 100644 static/usage/v7/tabs/router/vue/library_page_vue.md
 create mode 100644 static/usage/v7/tabs/router/vue/main_ts.md
 create mode 100644 static/usage/v7/tabs/router/vue/radio_page_vue.md
 create mode 100644 static/usage/v7/tabs/router/vue/router_ts.md
 create mode 100644 static/usage/v7/tabs/router/vue/search_page_vue.md

diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 1c35fa16c92..0920727d489 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -1,13 +1,6 @@
 ---
 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';
@@ -24,15 +17,6 @@ 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.
 
@@ -42,448 +26,40 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don
 
 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;
-}
-```
-
+:::note Framework Support
 
+Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components.
 
+:::
 
-## Usage
+## Usage with Router
 
-<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' }]}>
+Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.
 
-<TabItem value="angular">
+import Router from '@site/static/usage/v7/tabs/router/index.md';
 
-```html
-<ion-tabs>
-  <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="schedule">
-      <ion-icon name="calendar" aria-hidden="true"></ion-icon>
-      <ion-label>Schedule</ion-label>
-      <ion-badge>6</ion-badge>
-    </ion-tab-button>
+<Router />
 
-    <ion-tab-button tab="speakers">
-      <ion-icon name="person-circle" aria-hidden="true"></ion-icon>
-      <ion-label>Speakers</ion-label>
-    </ion-tab-button>
+:::tip Best Practices
 
-    <ion-tab-button tab="map">
-      <ion-icon name="map" aria-hidden="true"></ion-icon>
-      <ion-label>Map</ion-label>
-    </ion-tab-button>
+Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
 
-    <ion-tab-button tab="about">
-      <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
-      <ion-label>About</ion-label>
-    </ion-tab-button>
-  </ion-tab-bar>
-</ion-tabs>
-```
+:::
 
 
-### Router integration
+## Interfaces
 
-When used with Angular's router the `tab` property of the `ion-tab-button` should be a reference to the route path.
+### TabsCustomEvent
 
-```html
-<ion-tabs>
-  <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="schedule">
-      <ion-icon name="calendar" aria-hidden="true"></ion-icon>
-      <ion-label>Schedule</ion-label>
-    </ion-tab-button>
-  </ion-tab-bar>
-</ion-tabs>
-```
+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
-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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
-      <ion-label>Speakers</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="tab-map">
-      <ion-icon name="map" aria-hidden="true"></ion-icon>
-      <ion-label>Map</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="tab-about">
-      <ion-icon name="information-circle" aria-hidden="true"></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} aria-hidden="true" />
-        <IonLabel>Schedule</IonLabel>
-        <IonBadge>6</IonBadge>
-      </IonTabButton>
-
-      <IonTabButton tab="speakers">
-        <IonIcon icon={personCircle} aria-hidden="true" />
-        <IonLabel>Speakers</IonLabel>
-      </IonTabButton>
-
-      <IonTabButton tab="map">
-        <IonIcon icon={map} aria-hidden="true" />
-        <IonLabel>Map</IonLabel>
-      </IonTabButton>
-
-      <IonTabButton tab="about">
-        <IonIcon icon={informationCircle} aria-hidden="true" />
-        <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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
-          <ion-label>Speakers</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="tab-map">
-          <ion-icon name="map" aria-hidden="true"></ion-icon>
-          <ion-label>Map</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="tab-about">
-          <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
-          <ion-label>About</ion-label>
-        </ion-tab-button>
-      </ion-tab-bar>
-
-    </ion-tabs>
-    ];
-  }
+interface TabsCustomEvent extends CustomEvent {
+  detail: { tab: string };
+  target: HTMLIonTabsElement;
 }
 ```
 
-
-### 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">
-      <!-- https://ionicframework.com/docs/vue/navigation#working-with-tabs -->
-      <ion-router-outlet></ion-router-outlet>
-      <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="schedule" href="/tabs/schedule">
-          <ion-icon :icon="calendar" aria-hidden="true"></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" aria-hidden="true"></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,
-  IonRouterOutlet,
-  IonTabBar, 
-  IonTabButton, 
-  IonTabs
-} from '@ionic/vue';
-import { calendar, personCircle } from 'ionicons/icons';
-
-export default defineComponent({
-  components: { IonIcon, IonLabel, IonPage, IonRouterOutlet, 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 />
 
diff --git a/static/code/stackblitz/v6/react/package-lock.json b/static/code/stackblitz/v6/react/package-lock.json
index 62905669034..3bfe515e761 100644
--- a/static/code/stackblitz/v6/react/package-lock.json
+++ b/static/code/stackblitz/v6/react/package-lock.json
@@ -13,9 +13,11 @@
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
+        "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.6.4",
@@ -2242,22 +2244,22 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.1.tgz",
+      "integrity": "sha512-O696r+4/f0Ly0XvPH1ZcsTBwiQLWf5gCDG1CoAn9W/F84DcvzGV9acV9nmpEDcrqaSLFYjJHGpeCec9y7L50iw==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.3.tgz",
-      "integrity": "sha512-qWUFSwZKV1iXNPptPqahqLLrIV33+aueEGfC7UWchGq0P6re3UkUTyCNRPcXtdYiglbVD1A+goHYLnG1Wf6vLg==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.5.1.tgz",
+      "integrity": "sha512-V9uu2M6wc3oj3h6oNU1z7p5u2V4sSILkGbej6IRcuU29fCaV/E7zLYnaxaBcI4g/oQwmCsTyjLmvON8aITuNjA==",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
-        "ionicons": "^6.0.2",
+        "@ionic/core": "6.5.1",
+        "ionicons": "^6.1.1",
         "tslib": "*"
       },
       "peerDependencies": {
@@ -2266,11 +2268,11 @@
       }
     },
     "node_modules/@ionic/react-router": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.3.3.tgz",
-      "integrity": "sha512-IG7k1LTOTozOpgkKg6ZVw8cgXHKThohCdu+ZqI9YNH4j/KwcvsEpswfyGEJ48IdSVsyV7bnRStXC/csDRhBLtw==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.5.1.tgz",
+      "integrity": "sha512-y0FjyEgk53gGUkeCE1+ucTdbiIlmNnIKuUp0Iw6Nw92bjwzWkzx0ntdxolJGPn5ErsnNzdhGJ043RsL6RHkl8Q==",
       "dependencies": {
-        "@ionic/react": "^6.3.3",
+        "@ionic/react": "6.5.1",
         "tslib": "*"
       },
       "peerDependencies": {
@@ -3222,9 +3224,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.19.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
-      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA==",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3698,9 +3700,9 @@
       }
     },
     "node_modules/@types/react-router": {
-      "version": "5.1.19",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz",
-      "integrity": "sha512-Fv/5kb2STAEMT3wHzdKQK2z8xKq38EDIGVrutYLmQVVLe+4orDFquU52hQrULnEHinMKv9FSA6lf9+uNT1ITtA==",
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
       "dependencies": {
         "@types/history": "^4.7.11",
         "@types/react": "*"
@@ -8092,6 +8094,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hoist-non-react-statics/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/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8455,23 +8462,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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"
+        "@stencil/core": "^2.18.0"
       }
     },
     "node_modules/ipaddr.js": {
@@ -13658,6 +13653,24 @@
         "react": ">=15"
       }
     },
+    "node_modules/react-router/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/react-router/node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/react-router/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/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -17872,31 +17885,31 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.1.tgz",
+      "integrity": "sha512-O696r+4/f0Ly0XvPH1ZcsTBwiQLWf5gCDG1CoAn9W/F84DcvzGV9acV9nmpEDcrqaSLFYjJHGpeCec9y7L50iw==",
       "requires": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/react": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.3.tgz",
-      "integrity": "sha512-qWUFSwZKV1iXNPptPqahqLLrIV33+aueEGfC7UWchGq0P6re3UkUTyCNRPcXtdYiglbVD1A+goHYLnG1Wf6vLg==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.5.1.tgz",
+      "integrity": "sha512-V9uu2M6wc3oj3h6oNU1z7p5u2V4sSILkGbej6IRcuU29fCaV/E7zLYnaxaBcI4g/oQwmCsTyjLmvON8aITuNjA==",
       "requires": {
-        "@ionic/core": "^6.3.3",
-        "ionicons": "^6.0.2",
+        "@ionic/core": "6.5.1",
+        "ionicons": "^6.1.1",
         "tslib": "*"
       }
     },
     "@ionic/react-router": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.3.3.tgz",
-      "integrity": "sha512-IG7k1LTOTozOpgkKg6ZVw8cgXHKThohCdu+ZqI9YNH4j/KwcvsEpswfyGEJ48IdSVsyV7bnRStXC/csDRhBLtw==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.5.1.tgz",
+      "integrity": "sha512-y0FjyEgk53gGUkeCE1+ucTdbiIlmNnIKuUp0Iw6Nw92bjwzWkzx0ntdxolJGPn5ErsnNzdhGJ043RsL6RHkl8Q==",
       "requires": {
-        "@ionic/react": "^6.3.3",
+        "@ionic/react": "6.5.1",
         "tslib": "*"
       }
     },
@@ -18584,9 +18597,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.19.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
-      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA=="
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
@@ -18949,9 +18962,9 @@
       }
     },
     "@types/react-router": {
-      "version": "5.1.19",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz",
-      "integrity": "sha512-Fv/5kb2STAEMT3wHzdKQK2z8xKq38EDIGVrutYLmQVVLe+4orDFquU52hQrULnEHinMKv9FSA6lf9+uNT1ITtA==",
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
       "requires": {
         "@types/history": "^4.7.11",
         "@types/react": "*"
@@ -22152,6 +22165,13 @@
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
       "requires": {
         "react-is": "^16.7.0"
+      },
+      "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=="
+        }
       }
     },
     "hoopy": {
@@ -22423,18 +22443,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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=="
-        }
+        "@stencil/core": "^2.18.0"
       }
     },
     "ipaddr.js": {
@@ -25971,6 +25984,26 @@
         "react-is": "^16.6.0",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "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=="
+        }
       }
     },
     "react-router-dom": {
diff --git a/static/code/stackblitz/v6/react/package.json b/static/code/stackblitz/v6/react/package.json
index 90634435121..5b7c3345008 100644
--- a/static/code/stackblitz/v6/react/package.json
+++ b/static/code/stackblitz/v6/react/package.json
@@ -8,9 +8,11 @@
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.6.4",
diff --git a/static/code/stackblitz/v6/vue/package-lock.json b/static/code/stackblitz/v6/vue/package-lock.json
index 2d57886e494..4818d2bde8c 100644
--- a/static/code/stackblitz/v6/vue/package-lock.json
+++ b/static/code/stackblitz/v6/vue/package-lock.json
@@ -48,36 +48,36 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.1.tgz",
+      "integrity": "sha512-O696r+4/f0Ly0XvPH1ZcsTBwiQLWf5gCDG1CoAn9W/F84DcvzGV9acV9nmpEDcrqaSLFYjJHGpeCec9y7L50iw==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.3.tgz",
-      "integrity": "sha512-MIbnZ1A046ugZroeoK+Tsaykl134bFd5P072JhNQtMAbUFiEfhTkWenbge2DJV8hKPfYmWtZzPze6i0tyw0wlw==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.5.1.tgz",
+      "integrity": "sha512-REmq+R2ZFnB5Q85KPy7768ef8pxPnxddDOR/hatAi9PzMwnSdYewnU2W/vQJvNRDqxwAIBGeaZ+HvAfJsT2UMw==",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
-        "ionicons": "^6.0.2"
+        "@ionic/core": "6.5.1",
+        "ionicons": "^6.1.1"
       }
     },
     "node_modules/@ionic/vue-router": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.3.3.tgz",
-      "integrity": "sha512-NtLqI0OCrjBrnNQKGVMPFZNhd5wE8ffXjThHcxQUyr+Gsh3EaMBWHr8vu7CPobxUWZMIMgXSMsgKJlFyJU6lCg==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.5.1.tgz",
+      "integrity": "sha512-Gu/9AETEtg8D9tt0vOUPzb7JzhSU/rJT0UeJwvxGCTjq4H8IDBs+kmanMhcZ2GIeFds4qqwnHcUkJv0XgvbJkQ==",
       "dependencies": {
-        "@ionic/vue": "^6.3.3"
+        "@ionic/vue": "6.5.1"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.19.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
-      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA==",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -646,23 +646,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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"
+        "@stencil/core": "^2.18.0"
       }
     },
     "node_modules/is-core-module": {
@@ -796,9 +784,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/typescript": {
       "version": "4.8.4",
@@ -906,36 +894,36 @@
       "optional": true
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.1.tgz",
+      "integrity": "sha512-O696r+4/f0Ly0XvPH1ZcsTBwiQLWf5gCDG1CoAn9W/F84DcvzGV9acV9nmpEDcrqaSLFYjJHGpeCec9y7L50iw==",
       "requires": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.1.1",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/vue": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.3.tgz",
-      "integrity": "sha512-MIbnZ1A046ugZroeoK+Tsaykl134bFd5P072JhNQtMAbUFiEfhTkWenbge2DJV8hKPfYmWtZzPze6i0tyw0wlw==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.5.1.tgz",
+      "integrity": "sha512-REmq+R2ZFnB5Q85KPy7768ef8pxPnxddDOR/hatAi9PzMwnSdYewnU2W/vQJvNRDqxwAIBGeaZ+HvAfJsT2UMw==",
       "requires": {
-        "@ionic/core": "^6.3.3",
-        "ionicons": "^6.0.2"
+        "@ionic/core": "6.5.1",
+        "ionicons": "^6.1.1"
       }
     },
     "@ionic/vue-router": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.3.3.tgz",
-      "integrity": "sha512-NtLqI0OCrjBrnNQKGVMPFZNhd5wE8ffXjThHcxQUyr+Gsh3EaMBWHr8vu7CPobxUWZMIMgXSMsgKJlFyJU6lCg==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.5.1.tgz",
+      "integrity": "sha512-Gu/9AETEtg8D9tt0vOUPzb7JzhSU/rJT0UeJwvxGCTjq4H8IDBs+kmanMhcZ2GIeFds4qqwnHcUkJv0XgvbJkQ==",
       "requires": {
-        "@ionic/vue": "^6.3.3"
+        "@ionic/vue": "6.5.1"
       }
     },
     "@stencil/core": {
-      "version": "2.19.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
-      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA=="
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
+      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
     },
     "@vitejs/plugin-vue": {
       "version": "2.3.4",
@@ -1290,18 +1278,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
+      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
       "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=="
-        }
+        "@stencil/core": "^2.18.0"
       }
     },
     "is-core-module": {
@@ -1389,9 +1370,9 @@
       "dev": true
     },
     "tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "typescript": {
       "version": "4.8.4",
diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index aa4925c0113..4af3f2ee029 100644
--- a/static/code/stackblitz/v7/react/package-lock.json
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -9,11 +9,16 @@
       "version": "0.1.0",
       "dependencies": {
         "@ionic/react": "^7.0.0-beta.0",
+        "@ionic/react-router": "^7.0.0-beta.0",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
+        "@types/react-router": "^5.1.11",
+        "@types/react-router-dom": "^5.1.7",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-router": "^5.2.0",
+        "react-router-dom": "^5.2.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.6.4",
         "web-vitals": "^2.1.4"
@@ -2231,9 +2236,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
-      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.1",
@@ -2241,11 +2246,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-beta.0.tgz",
-      "integrity": "sha512-A2P3FotTZPcyqsGA9k0eydjqa7KpYlJA7qu6+dC1aDVpCD4xsREjJTDV6tttMe3dI7zNZEJEx0/jxt0bYKumQw==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-KOj5UVLeRp62u6lsIuMD+YRzcSsEbCxs03ZR9zsg95lcAfcAtacjDZwQmzDDLl9C6nB331h7nXE61yR3Hy/JGQ==",
       "dependencies": {
-        "@ionic/core": "7.0.0-beta.0",
+        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
         "ionicons": "^6.1.1",
         "tslib": "*"
       },
@@ -2254,6 +2259,21 @@
         "react-dom": ">=16.8.6"
       }
     },
+    "node_modules/@ionic/react-router": {
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-IUkvnLvvqhVHNcEvA+kxkujR6+UArnOK4HUje7QBw18XPtUv53APkhS7HNRqteVYP7Qjcbqw6boDD2oiuzdqmw==",
+      "dependencies": {
+        "@ionic/react": "7.0.0-dev.11675196564.12c5f9a0",
+        "tslib": "*"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6",
+        "react-dom": ">=16.8.6",
+        "react-router": "^5.0.1",
+        "react-router-dom": "^5.0.1"
+      }
+    },
     "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",
@@ -3564,6 +3584,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "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",
@@ -3666,6 +3691,25 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -8169,6 +8213,32 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/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/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13785,6 +13855,60 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/react-router/node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/react-router/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/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14077,6 +14201,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -15287,6 +15416,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -15672,6 +15811,11 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -18049,9 +18193,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
-      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.1",
@@ -18059,15 +18203,24 @@
       }
     },
     "@ionic/react": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-beta.0.tgz",
-      "integrity": "sha512-A2P3FotTZPcyqsGA9k0eydjqa7KpYlJA7qu6+dC1aDVpCD4xsREjJTDV6tttMe3dI7zNZEJEx0/jxt0bYKumQw==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-KOj5UVLeRp62u6lsIuMD+YRzcSsEbCxs03ZR9zsg95lcAfcAtacjDZwQmzDDLl9C6nB331h7nXE61yR3Hy/JGQ==",
       "requires": {
-        "@ionic/core": "7.0.0-beta.0",
+        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
         "ionicons": "^6.1.1",
         "tslib": "*"
       }
     },
+    "@ionic/react-router": {
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-IUkvnLvvqhVHNcEvA+kxkujR6+UArnOK4HUje7QBw18XPtUv53APkhS7HNRqteVYP7Qjcbqw6boDD2oiuzdqmw==",
+      "requires": {
+        "@ionic/react": "7.0.0-dev.11675196564.12c5f9a0",
+        "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",
@@ -19009,6 +19162,11 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -19111,6 +19269,25 @@
         "@types/react": "*"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -22386,6 +22563,34 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "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=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26245,6 +26450,56 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "requires": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "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=="
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -26468,6 +26723,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -27351,6 +27611,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -27631,6 +27901,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index c3c2c1163bc..a6b85fc2d8b 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -4,11 +4,16 @@
   "private": true,
   "dependencies": {
     "@ionic/react": "^7.0.0-beta.0",
+    "@ionic/react-router": "^7.0.0-beta.0",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@types/react-router": "^5.1.11",
+    "@types/react-router-dom": "^5.1.7",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index 6b549b79af5..86dd203fe4f 100644
--- a/static/code/stackblitz/v7/vue/package-lock.json
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@ionic/vue": "^7.0.0-beta.0",
+        "@ionic/vue-router": "^7.0.0-beta.0",
         "vue": "^3.2.25",
         "vue-router": "4.0.13"
       },
@@ -47,9 +48,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
-      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.1",
@@ -57,14 +58,22 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-beta.0.tgz",
-      "integrity": "sha512-h4ppWoDIYTqfD1OOcBcwqxxurYYGMktYAkzOKW/JmAfFPKslgLhZdCuUg1c0+3d5bmmanCHJ1Y7wd4K+QKX20w==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-qqFXv/u4Wv2IkxAWXrDSpAED303Oac+vVz3c7eycOQtPbggrp+BjX71aNYBzkXyJ4CAObROvsOciFx4uvsggNQ==",
       "dependencies": {
-        "@ionic/core": "7.0.0-beta.0",
+        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
         "ionicons": "^6.1.1"
       }
     },
+    "node_modules/@ionic/vue-router": {
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-+Jlupnerwstdc233L18BFnxlYuBpFjY20tUGrM8ua9eHuK1zI1rByFbACLcrxJBZhBKX7RmDJhNQxkFsOKGiZw==",
+      "dependencies": {
+        "@ionic/vue": "7.0.0-dev.11675196564.12c5f9a0"
+      }
+    },
     "node_modules/@stencil/core": {
       "version": "2.22.2",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
@@ -886,9 +895,9 @@
       "optional": true
     },
     "@ionic/core": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-beta.0.tgz",
-      "integrity": "sha512-pIbuyVtvs5UscAqUNKgevttZknMbBPo8JaDzSME/O++a0tvra5TCQY5hwnlyNbkFpvEjOuyJqcHZeuinStRGqA==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.1",
@@ -896,14 +905,22 @@
       }
     },
     "@ionic/vue": {
-      "version": "7.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-beta.0.tgz",
-      "integrity": "sha512-h4ppWoDIYTqfD1OOcBcwqxxurYYGMktYAkzOKW/JmAfFPKslgLhZdCuUg1c0+3d5bmmanCHJ1Y7wd4K+QKX20w==",
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-qqFXv/u4Wv2IkxAWXrDSpAED303Oac+vVz3c7eycOQtPbggrp+BjX71aNYBzkXyJ4CAObROvsOciFx4uvsggNQ==",
       "requires": {
-        "@ionic/core": "7.0.0-beta.0",
+        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
         "ionicons": "^6.1.1"
       }
     },
+    "@ionic/vue-router": {
+      "version": "7.0.0-dev.11675196564.12c5f9a0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
+      "integrity": "sha512-+Jlupnerwstdc233L18BFnxlYuBpFjY20tUGrM8ua9eHuK1zI1rByFbACLcrxJBZhBKX7RmDJhNQxkFsOKGiZw==",
+      "requires": {
+        "@ionic/vue": "7.0.0-dev.11675196564.12c5f9a0"
+      }
+    },
     "@stencil/core": {
       "version": "2.22.2",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index f3953eb8d5d..665033eb5a1 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@ionic/vue": "^7.0.0-beta.0",
+    "@ionic/vue-router": "^7.0.0-beta.0",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
diff --git a/static/usage/v6/tabs/router/angular/app_component_html.md b/static/usage/v6/tabs/router/angular/app_component_html.md
new file mode 100644
index 00000000000..7636539f28a
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/app_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-router-outlet></ion-router-outlet>
+```
diff --git a/static/usage/v6/tabs/router/angular/app_module_ts.md b/static/usage/v6/tabs/router/angular/app_module_ts.md
new file mode 100644
index 00000000000..b2d3db7f33d
--- /dev/null
+++ b/static/usage/v6/tabs/router/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 { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()],
+  declarations: [AppComponent, ExampleComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/app_routing_module_ts.md b/static/usage/v6/tabs/router/angular/app_routing_module_ts.md
new file mode 100644
index 00000000000..7ff1067030f
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/app_routing_module_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ExampleComponent } from './example.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: '',
+        component: ExampleComponent,
+        children: [
+          {
+            path: '',
+            pathMatch: 'full',
+            redirectTo: 'home',
+          },
+          {
+            path: 'home',
+            loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule),
+          },
+          {
+            path: 'radio',
+            loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule),
+          },
+          {
+            path: 'library',
+            loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule),
+          },
+          {
+            path: 'search',
+            loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule),
+          },
+        ],
+      },
+    ]),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/example_component_html.md b/static/usage/v6/tabs/router/angular/example_component_html.md
new file mode 100644
index 00000000000..5b7b9b87a57
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+<ion-tabs>
+  <ion-router-outlet></ion-router-outlet>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
diff --git a/static/usage/v6/tabs/router/angular/global_css.md b/static/usage/v6/tabs/router/angular/global_css.md
new file mode 100644
index 00000000000..a782d2d7f90
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/global_css.md
@@ -0,0 +1,8 @@
+```css
+.example-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+```
diff --git a/static/usage/v6/tabs/router/angular/home_page_component_html.md b/static/usage/v6/tabs/router/angular/home_page_component_html.md
new file mode 100644
index 00000000000..7ef5bc47333
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/home_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Listen now</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Listen now content</div>
+</ion-content>
+```
diff --git a/static/usage/v6/tabs/router/angular/home_page_component_ts.md b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
new file mode 100644
index 00000000000..9e2ef0a3e8c
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home-page',
+  templateUrl: './home-page.component.html',
+})
+export class HomePageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/home_page_module_ts.md b/static/usage/v6/tabs/router/angular/home_page_module_ts.md
new file mode 100644
index 00000000000..2a1fb15b460
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/home_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { HomePageComponent } from './home-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])],
+  declarations: [HomePageComponent],
+  exports: [HomePageComponent],
+})
+export class HomePageModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/library_page_component_html.md b/static/usage/v6/tabs/router/angular/library_page_component_html.md
new file mode 100644
index 00000000000..a0df4a6d684
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/library_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Library</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Library content</div>
+</ion-content>
+```
diff --git a/static/usage/v6/tabs/router/angular/library_page_component_ts.md b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
new file mode 100644
index 00000000000..f5a92a4868a
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-library-page',
+  templateUrl: './library-page.component.html',
+})
+export class LibraryPageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/library_page_module_ts.md b/static/usage/v6/tabs/router/angular/library_page_module_ts.md
new file mode 100644
index 00000000000..8e2ab48cf39
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/library_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { LibraryPageComponent } from './library-page.component';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])],
+  declarations: [LibraryPageComponent],
+  exports: [LibraryPageComponent],
+})
+export class LibraryPageModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_component_html.md b/static/usage/v6/tabs/router/angular/radio_page_component_html.md
new file mode 100644
index 00000000000..e6affd4132f
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/radio_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Radio</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Radio content</div>
+</ion-content>
+```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_component_ts.md b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
new file mode 100644
index 00000000000..d29209c00dd
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-radio-page',
+  templateUrl: './radio-page.component.html',
+})
+export class RadioPageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_module_ts.md b/static/usage/v6/tabs/router/angular/radio_page_module_ts.md
new file mode 100644
index 00000000000..f50a0088632
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/radio_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { RadioPageComponent } from './radio-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])],
+  declarations: [RadioPageComponent],
+  exports: [RadioPageComponent],
+})
+export class RadioPageModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/search_page_component_html.md b/static/usage/v6/tabs/router/angular/search_page_component_html.md
new file mode 100644
index 00000000000..91cb5c6f2db
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/search_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Search</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Search content</div>
+</ion-content>
+```
diff --git a/static/usage/v6/tabs/router/angular/search_page_component_ts.md b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
new file mode 100644
index 00000000000..bd6e723d332
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-search-page',
+  templateUrl: './search-page.component.html',
+})
+export class SearchPageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/search_page_module_ts.md b/static/usage/v6/tabs/router/angular/search_page_module_ts.md
new file mode 100644
index 00000000000..a1d599c5d9b
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/search_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SearchPageComponent } from './search-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])],
+  declarations: [SearchPageComponent],
+  exports: [SearchPageComponent],
+})
+export class SearchPageModule {}
+```
diff --git a/static/usage/v6/tabs/router/demo.html b/static/usage/v6/tabs/router/demo.html
new file mode 100644
index 00000000000..335bdccc86f
--- /dev/null
+++ b/static/usage/v6/tabs/router/demo.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Tabs</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <style>
+    .example-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-tabs>
+      <ion-tab tab="home">
+        <ion-nav id="home-nav"></ion-nav>
+        <div id="home-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Listen now</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Listen now content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab tab="radio">
+        <ion-nav id="radio-nav"></ion-nav>
+        <div id="radio-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Radio</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Radio content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab tab="library">
+        <ion-nav id="library-nav"></ion-nav>
+        <div id="library-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Library</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Library content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab tab="search">
+        <ion-nav id="search-nav"></ion-nav>
+        <div id="search-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Search</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Search content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="home">
+          <ion-icon name="play-circle"></ion-icon>
+          Listen Now
+        </ion-tab-button>
+        <ion-tab-button tab="radio">
+          <ion-icon name="radio"></ion-icon>
+          Radio
+        </ion-tab-button>
+        <ion-tab-button tab="library">
+          <ion-icon name="library"></ion-icon>
+          Library
+        </ion-tab-button>
+        <ion-tab-button tab="search">
+          <ion-icon name="search"></ion-icon>
+          Search
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+
+  </ion-app>
+  <script>
+    const homeNav = document.querySelector('#home-nav');
+    const homePage = document.querySelector('#home-page');
+    homeNav.root = homePage;
+
+    const radioNav = document.querySelector('#radio-nav');
+    const radioPage = document.querySelector('#radio-page');
+    radioNav.root = radioPage;
+
+    const libraryNav = document.querySelector('#library-nav');
+    const libraryPage = document.querySelector('#library-page');
+    libraryNav.root = libraryPage;
+
+    const searchNav = document.querySelector('#search-nav');
+    const searchPage = document.querySelector('#search-page');
+    searchNav.root = searchPage;
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.md
new file mode 100644
index 00000000000..92bdc7799fe
--- /dev/null
+++ b/static/usage/v6/tabs/router/index.md
@@ -0,0 +1,93 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_component_html from './angular/app_component_html.md';
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_app_routing_module_ts from './angular/app_routing_module_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+
+import angular_home_page_module_ts from './angular/home_page_module_ts.md';
+import angular_home_page_component_ts from './angular/home_page_component_ts.md';
+import angular_home_page_component_html from './angular/home_page_component_html.md';
+
+import angular_library_page_module_ts from './angular/library_page_module_ts.md';
+import angular_library_page_component_ts from './angular/library_page_component_ts.md';
+import angular_library_page_component_html from './angular/library_page_component_html.md';
+
+import angular_radio_page_module_ts from './angular/radio_page_module_ts.md';
+import angular_radio_page_component_ts from './angular/radio_page_component_ts.md';
+import angular_radio_page_component_html from './angular/radio_page_component_html.md';
+
+import angular_search_page_module_ts from './angular/search_page_module_ts.md';
+import angular_search_page_component_ts from './angular/search_page_component_ts.md';
+import angular_search_page_component_html from './angular/search_page_component_html.md';
+
+import angular_global_css from './angular/global_css.md';
+
+import vue_app_vue from './vue/app_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+import vue_example_vue from './vue/example_vue.md';
+import vue_router_ts from './vue/router_ts.md';
+import vue_home_page_vue from './vue/home_page_vue.md';
+import vue_radio_page_vue from './vue/radio_page_vue.md';
+import vue_library_page_vue from './vue/library_page_vue.md';
+import vue_search_page_vue from './vue/search_page_vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_home_page_tsx from './react/home_page_tsx.md';
+import react_radio_page_tsx from './react/radio_page_tsx.md';
+import react_library_page_tsx from './react/library_page_tsx.md';
+import react_search_page_tsx from './react/search_page_tsx.md';
+
+<Playground
+  version={6}
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/home/home-page.component.ts': angular_home_page_component_ts,
+        'src/app/home/home-page.component.html': angular_home_page_component_html,
+        'src/global.css': angular_global_css,
+        'src/app/home/home-page.module.ts': angular_home_page_module_ts,
+        'src/app/library/library-page.component.ts': angular_library_page_component_ts,
+        'src/app/library/library-page.component.html': angular_library_page_component_html,
+        'src/app/library/library-page.module.ts': angular_library_page_module_ts,
+        'src/app/radio/radio-page.component.ts': angular_radio_page_component_ts,
+        'src/app/radio/radio-page.component.html': angular_radio_page_component_html,
+        'src/app/radio/radio-page.module.ts': angular_radio_page_module_ts,
+        'src/app/search/search-page.component.ts': angular_search_page_component_ts,
+        'src/app/search/search-page.component.html': angular_search_page_component_html,
+        'src/app/search/search-page.module.ts': angular_search_page_module_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app-routing.module.ts': angular_app_routing_module_ts,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example_vue,
+        'src/router.ts': vue_router_ts,
+        'src/App.vue': vue_app_vue,
+        'src/main.ts': vue_main_ts,
+        'src/views/HomePage.vue': vue_home_page_vue,
+        'src/views/RadioPage.vue': vue_radio_page_vue,
+        'src/views/LibraryPage.vue': vue_library_page_vue,
+        'src/views/SearchPage.vue': vue_search_page_vue,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/pages/HomePage.tsx': react_home_page_tsx,
+        'src/pages/RadioPage.tsx': react_radio_page_tsx,
+        'src/pages/LibraryPage.tsx': react_library_page_tsx,
+        'src/pages/SearchPage.tsx': react_search_page_tsx,
+      },
+    },
+  }}
+  src="usage/v6/tabs/router/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v6/tabs/router/javascript.md b/static/usage/v6/tabs/router/javascript.md
new file mode 100644
index 00000000000..ca1351100fd
--- /dev/null
+++ b/static/usage/v6/tabs/router/javascript.md
@@ -0,0 +1,101 @@
+```html
+<style>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<ion-tabs>
+  <ion-tab tab="home">
+    <ion-nav id="home-nav"></ion-nav>
+    <div id="home-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Listen now content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="radio">
+    <ion-nav id="radio-nav"></ion-nav>
+    <div id="radio-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Radio content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="library">
+    <ion-nav id="library-nav"></ion-nav>
+    <div id="library-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Library</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Library content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="search">
+    <ion-nav id="search-nav"></ion-nav>
+    <div id="search-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Search</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Search content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+
+<script>
+  const homeNav = document.querySelector('#home-nav');
+  const homePage = document.querySelector('#home-page');
+  homeNav.root = homePage;
+
+  const radioNav = document.querySelector('#radio-nav');
+  const radioPage = document.querySelector('#radio-page');
+  radioNav.root = radioPage;
+
+  const libraryNav = document.querySelector('#library-nav');
+  const libraryPage = document.querySelector('#library-page');
+  libraryNav.root = libraryPage;
+
+  const searchNav = document.querySelector('#search-nav');
+  const searchPage = document.querySelector('#search-page');
+  searchNav.root = searchPage;
+</script>
+```
diff --git a/static/usage/v6/tabs/router/react/home_page_tsx.md b/static/usage/v6/tabs/router/react/home_page_tsx.md
new file mode 100644
index 00000000000..f24b05e18b5
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/home_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const HomePage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Listen now</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Listen now content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default HomePage;
+```
diff --git a/static/usage/v6/tabs/router/react/library_page_tsx.md b/static/usage/v6/tabs/router/react/library_page_tsx.md
new file mode 100644
index 00000000000..383b6f115de
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/library_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const LibraryPage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Library</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Library content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default LibraryPage;
+```
diff --git a/static/usage/v6/tabs/router/react/main_tsx.md b/static/usage/v6/tabs/router/react/main_tsx.md
new file mode 100644
index 00000000000..b5005ef3778
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/main_tsx.md
@@ -0,0 +1,58 @@
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+import { Route, Redirect } from 'react-router';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import HomePage from './pages/HomePage';
+import RadioPage from './pages/RadioPage';
+import LibraryPage from './pages/LibraryPage';
+import SearchPage from './pages/SearchPage';
+
+function Example() {
+  return (
+    <IonReactRouter>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Redirect exact path="/" to="/home" />
+          {/*
+          Use the render method to reduce the number of renders your component will have due to a route change.
+
+          Use the component prop when your component depends on the RouterComponentProps passed in automatically.
+        */}
+          <Route path="/home" render={() => <HomePage />} exact={true} />
+          <Route path="/radio" render={() => <RadioPage />} exact={true} />
+          <Route path="/library" render={() => <LibraryPage />} exact={true} />
+          <Route path="/search" render={() => <SearchPage />} exact={true} />
+        </IonRouterOutlet>
+
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="home" href="/home">
+            <IonIcon icon={playCircle} />
+            <IonLabel>Listen now</IonLabel>
+          </IonTabButton>
+
+          <IonTabButton tab="radio" href="/radio">
+            <IonIcon icon={radio} />
+            <IonLabel>Radio</IonLabel>
+          </IonTabButton>
+
+          <IonTabButton tab="library" href="/library">
+            <IonIcon icon={library} />
+            <IonLabel>Library</IonLabel>
+          </IonTabButton>
+
+          <IonTabButton tab="search" href="/search">
+            <IonIcon icon={search} />
+            <IonLabel>Search</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonReactRouter>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/tabs/router/react/radio_page_tsx.md b/static/usage/v6/tabs/router/react/radio_page_tsx.md
new file mode 100644
index 00000000000..d0e432c3a58
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/radio_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const RadioPage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Radio</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Radio content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default RadioPage;
+```
diff --git a/static/usage/v6/tabs/router/react/search_page_tsx.md b/static/usage/v6/tabs/router/react/search_page_tsx.md
new file mode 100644
index 00000000000..3d51b374830
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/search_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const SearchPage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Search</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Search content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default SearchPage;
+```
diff --git a/static/usage/v6/tabs/router/vue.md b/static/usage/v6/tabs/router/vue.md
new file mode 100644
index 00000000000..091cabaa6f8
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue.md
@@ -0,0 +1,81 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+<template>
+  <ion-tabs>
+    <ion-tab tab="home">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Listen now content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab tab="radio">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Radio content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab tab="library">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Library</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Library content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab tab="search">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Search</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Search content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="home">
+        <ion-icon name="play-circle"></ion-icon>
+        Listen Now
+      </ion-tab-button>
+      <ion-tab-button tab="radio">
+        <ion-icon name="radio"></ion-icon>
+        Radio
+      </ion-tab-button>
+      <ion-tab-button tab="library">
+        <ion-icon name="library"></ion-icon>
+        Library
+      </ion-tab-button>
+      <ion-tab-button tab="search">
+        <ion-icon name="search"></ion-icon>
+        Search
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+
+<script lang="ts">
+  import { IonTabs, IonTabBar, IonTabButton, IonContent, IonHeader, IonTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTabs, IonTabBar, IonTabButton, IonContent, IonHeader, IonTitle },
+  });
+</script>
+```
diff --git a/static/usage/v6/tabs/router/vue/app_vue.md b/static/usage/v6/tabs/router/vue/app_vue.md
new file mode 100644
index 00000000000..b5f330406db
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/app_vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</template>
+
+<script lang="ts">
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+
+  import { defineComponent } from 'vue';
+
+  import Example from './components/Example.vue';
+
+  export default defineComponent({
+    name: 'App',
+    components: { IonApp, IonRouterOutlet },
+  });
+</script>
+```
diff --git a/static/usage/v6/tabs/router/vue/example_vue.md b/static/usage/v6/tabs/router/vue/example_vue.md
new file mode 100644
index 00000000000..846b8b4d621
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/example_vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-page>
+    <ion-tabs>
+      <ion-router-outlet></ion-router-outlet>
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="home" href="/home">
+          <ion-icon :icon="playCircle" />
+          <ion-label>Listen now</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="radio" href="/radio">
+          <ion-icon :icon="radio" />
+          <ion-label>Radio</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="library" href="/library">
+          <ion-icon :icon="library" />
+          <ion-label>Library</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="search" href="/search">
+          <ion-icon :icon="search" />
+          <ion-label>Search</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon } from '@ionic/vue';
+
+  import { playCircle, radio, library, search } from 'ionicons/icons';
+
+  export default {
+    components: { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon },
+    data() {
+      return {
+        playCircle,
+        radio,
+        library,
+        search,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v6/tabs/router/vue/home_page_vue.md b/static/usage/v6/tabs/router/vue/home_page_vue.md
new file mode 100644
index 00000000000..9d809b9a70d
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/home_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Listen now</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Listen now content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/static/usage/v6/tabs/router/vue/library_page_vue.md b/static/usage/v6/tabs/router/vue/library_page_vue.md
new file mode 100644
index 00000000000..b46e1dec9d7
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/library_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Library</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Library content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/static/usage/v6/tabs/router/vue/main_ts.md b/static/usage/v6/tabs/router/vue/main_ts.md
new file mode 100644
index 00000000000..d3253963fa5
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/main_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+import router from './router';
+
+/* 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';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+router.isReady().then(() => {
+  app.mount('#app');
+});
+```
diff --git a/static/usage/v6/tabs/router/vue/radio_page_vue.md b/static/usage/v6/tabs/router/vue/radio_page_vue.md
new file mode 100644
index 00000000000..5f65a8963cf
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/radio_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Radio</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Radio content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/static/usage/v6/tabs/router/vue/router_ts.md b/static/usage/v6/tabs/router/vue/router_ts.md
new file mode 100644
index 00000000000..3279c38def4
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/router_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Example from './components/Example.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/',
+    component: Example,
+    children: [
+      {
+        path: '',
+        redirect: '/home',
+      },
+      {
+        path: 'home',
+        component: () => import('./views/HomePage.vue'),
+      },
+      {
+        path: 'radio',
+        component: () => import('./views/RadioPage.vue'),
+      },
+      {
+        path: 'library',
+        component: () => import('./views/LibraryPage.vue'),
+      },
+      {
+        path: 'search',
+        component: () => import('./views/SearchPage.vue'),
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  // Use: createWebHistory(process.env.BASE_URL) in your app
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
+```
diff --git a/static/usage/v6/tabs/router/vue/search_page_vue.md b/static/usage/v6/tabs/router/vue/search_page_vue.md
new file mode 100644
index 00000000000..f85eeb9c649
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/search_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Search</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Search content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/static/usage/v7/tabs/router/angular/app_component_html.md b/static/usage/v7/tabs/router/angular/app_component_html.md
new file mode 100644
index 00000000000..7636539f28a
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/app_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-router-outlet></ion-router-outlet>
+```
diff --git a/static/usage/v7/tabs/router/angular/app_module_ts.md b/static/usage/v7/tabs/router/angular/app_module_ts.md
new file mode 100644
index 00000000000..b2d3db7f33d
--- /dev/null
+++ b/static/usage/v7/tabs/router/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 { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()],
+  declarations: [AppComponent, ExampleComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/app_routing_module_ts.md b/static/usage/v7/tabs/router/angular/app_routing_module_ts.md
new file mode 100644
index 00000000000..7ff1067030f
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/app_routing_module_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ExampleComponent } from './example.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: '',
+        component: ExampleComponent,
+        children: [
+          {
+            path: '',
+            pathMatch: 'full',
+            redirectTo: 'home',
+          },
+          {
+            path: 'home',
+            loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule),
+          },
+          {
+            path: 'radio',
+            loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule),
+          },
+          {
+            path: 'library',
+            loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule),
+          },
+          {
+            path: 'search',
+            loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule),
+          },
+        ],
+      },
+    ]),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/example_component_html.md b/static/usage/v7/tabs/router/angular/example_component_html.md
new file mode 100644
index 00000000000..5b7b9b87a57
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+<ion-tabs>
+  <ion-router-outlet></ion-router-outlet>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
diff --git a/static/usage/v7/tabs/router/angular/global_css.md b/static/usage/v7/tabs/router/angular/global_css.md
new file mode 100644
index 00000000000..a782d2d7f90
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/global_css.md
@@ -0,0 +1,8 @@
+```css
+.example-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+```
diff --git a/static/usage/v7/tabs/router/angular/home_page_component_html.md b/static/usage/v7/tabs/router/angular/home_page_component_html.md
new file mode 100644
index 00000000000..7ef5bc47333
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/home_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Listen now</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Listen now content</div>
+</ion-content>
+```
diff --git a/static/usage/v7/tabs/router/angular/home_page_component_ts.md b/static/usage/v7/tabs/router/angular/home_page_component_ts.md
new file mode 100644
index 00000000000..9e2ef0a3e8c
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/home_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home-page',
+  templateUrl: './home-page.component.html',
+})
+export class HomePageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/home_page_module_ts.md b/static/usage/v7/tabs/router/angular/home_page_module_ts.md
new file mode 100644
index 00000000000..2a1fb15b460
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/home_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { HomePageComponent } from './home-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])],
+  declarations: [HomePageComponent],
+  exports: [HomePageComponent],
+})
+export class HomePageModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/library_page_component_html.md b/static/usage/v7/tabs/router/angular/library_page_component_html.md
new file mode 100644
index 00000000000..a0df4a6d684
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/library_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Library</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Library content</div>
+</ion-content>
+```
diff --git a/static/usage/v7/tabs/router/angular/library_page_component_ts.md b/static/usage/v7/tabs/router/angular/library_page_component_ts.md
new file mode 100644
index 00000000000..f5a92a4868a
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/library_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-library-page',
+  templateUrl: './library-page.component.html',
+})
+export class LibraryPageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/library_page_module_ts.md b/static/usage/v7/tabs/router/angular/library_page_module_ts.md
new file mode 100644
index 00000000000..8e2ab48cf39
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/library_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { LibraryPageComponent } from './library-page.component';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])],
+  declarations: [LibraryPageComponent],
+  exports: [LibraryPageComponent],
+})
+export class LibraryPageModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/radio_page_component_html.md b/static/usage/v7/tabs/router/angular/radio_page_component_html.md
new file mode 100644
index 00000000000..e6affd4132f
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/radio_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Radio</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Radio content</div>
+</ion-content>
+```
diff --git a/static/usage/v7/tabs/router/angular/radio_page_component_ts.md b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md
new file mode 100644
index 00000000000..d29209c00dd
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-radio-page',
+  templateUrl: './radio-page.component.html',
+})
+export class RadioPageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/radio_page_module_ts.md b/static/usage/v7/tabs/router/angular/radio_page_module_ts.md
new file mode 100644
index 00000000000..f50a0088632
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/radio_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { RadioPageComponent } from './radio-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])],
+  declarations: [RadioPageComponent],
+  exports: [RadioPageComponent],
+})
+export class RadioPageModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/search_page_component_html.md b/static/usage/v7/tabs/router/angular/search_page_component_html.md
new file mode 100644
index 00000000000..91cb5c6f2db
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/search_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Search</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div class="example-content">Search content</div>
+</ion-content>
+```
diff --git a/static/usage/v7/tabs/router/angular/search_page_component_ts.md b/static/usage/v7/tabs/router/angular/search_page_component_ts.md
new file mode 100644
index 00000000000..bd6e723d332
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/search_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-search-page',
+  templateUrl: './search-page.component.html',
+})
+export class SearchPageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/search_page_module_ts.md b/static/usage/v7/tabs/router/angular/search_page_module_ts.md
new file mode 100644
index 00000000000..a1d599c5d9b
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/search_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SearchPageComponent } from './search-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])],
+  declarations: [SearchPageComponent],
+  exports: [SearchPageComponent],
+})
+export class SearchPageModule {}
+```
diff --git a/static/usage/v7/tabs/router/demo.html b/static/usage/v7/tabs/router/demo.html
new file mode 100644
index 00000000000..5836d4f4834
--- /dev/null
+++ b/static/usage/v7/tabs/router/demo.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Tabs</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <style>
+    .example-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-tabs>
+      <ion-tab tab="home">
+        <ion-nav id="home-nav"></ion-nav>
+        <div id="home-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Listen now</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Listen now content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab tab="radio">
+        <ion-nav id="radio-nav"></ion-nav>
+        <div id="radio-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Radio</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Radio content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab tab="library">
+        <ion-nav id="library-nav"></ion-nav>
+        <div id="library-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Library</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Library content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab tab="search">
+        <ion-nav id="search-nav"></ion-nav>
+        <div id="search-page">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Search</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="example-content">
+              Search content
+            </div>
+          </ion-content>
+        </div>
+      </ion-tab>
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="home">
+          <ion-icon name="play-circle"></ion-icon>
+          Listen Now
+        </ion-tab-button>
+        <ion-tab-button tab="radio">
+          <ion-icon name="radio"></ion-icon>
+          Radio
+        </ion-tab-button>
+        <ion-tab-button tab="library">
+          <ion-icon name="library"></ion-icon>
+          Library
+        </ion-tab-button>
+        <ion-tab-button tab="search">
+          <ion-icon name="search"></ion-icon>
+          Search
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+
+  </ion-app>
+  <script>
+    const homeNav = document.querySelector('#home-nav');
+    const homePage = document.querySelector('#home-page');
+    homeNav.root = homePage;
+
+    const radioNav = document.querySelector('#radio-nav');
+    const radioPage = document.querySelector('#radio-page');
+    radioNav.root = radioPage;
+
+    const libraryNav = document.querySelector('#library-nav');
+    const libraryPage = document.querySelector('#library-page');
+    libraryNav.root = libraryPage;
+
+    const searchNav = document.querySelector('#search-nav');
+    const searchPage = document.querySelector('#search-page');
+    searchNav.root = searchPage;
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.md
new file mode 100644
index 00000000000..c7e59ac79bc
--- /dev/null
+++ b/static/usage/v7/tabs/router/index.md
@@ -0,0 +1,93 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_component_html from './angular/app_component_html.md';
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_app_routing_module_ts from './angular/app_routing_module_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+
+import angular_home_page_module_ts from './angular/home_page_module_ts.md';
+import angular_home_page_component_ts from './angular/home_page_component_ts.md';
+import angular_home_page_component_html from './angular/home_page_component_html.md';
+
+import angular_library_page_module_ts from './angular/library_page_module_ts.md';
+import angular_library_page_component_ts from './angular/library_page_component_ts.md';
+import angular_library_page_component_html from './angular/library_page_component_html.md';
+
+import angular_radio_page_module_ts from './angular/radio_page_module_ts.md';
+import angular_radio_page_component_ts from './angular/radio_page_component_ts.md';
+import angular_radio_page_component_html from './angular/radio_page_component_html.md';
+
+import angular_search_page_module_ts from './angular/search_page_module_ts.md';
+import angular_search_page_component_ts from './angular/search_page_component_ts.md';
+import angular_search_page_component_html from './angular/search_page_component_html.md';
+
+import angular_global_css from './angular/global_css.md';
+
+import vue_app_vue from './vue/app_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+import vue_example_vue from './vue/example_vue.md';
+import vue_router_ts from './vue/router_ts.md';
+import vue_home_page_vue from './vue/home_page_vue.md';
+import vue_radio_page_vue from './vue/radio_page_vue.md';
+import vue_library_page_vue from './vue/library_page_vue.md';
+import vue_search_page_vue from './vue/search_page_vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_home_page_tsx from './react/home_page_tsx.md';
+import react_radio_page_tsx from './react/radio_page_tsx.md';
+import react_library_page_tsx from './react/library_page_tsx.md';
+import react_search_page_tsx from './react/search_page_tsx.md';
+
+<Playground
+  version={7}
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/home/home-page.component.ts': angular_home_page_component_ts,
+        'src/app/home/home-page.component.html': angular_home_page_component_html,
+        'src/global.css': angular_global_css,
+        'src/app/home/home-page.module.ts': angular_home_page_module_ts,
+        'src/app/library/library-page.component.ts': angular_library_page_component_ts,
+        'src/app/library/library-page.component.html': angular_library_page_component_html,
+        'src/app/library/library-page.module.ts': angular_library_page_module_ts,
+        'src/app/radio/radio-page.component.ts': angular_radio_page_component_ts,
+        'src/app/radio/radio-page.component.html': angular_radio_page_component_html,
+        'src/app/radio/radio-page.module.ts': angular_radio_page_module_ts,
+        'src/app/search/search-page.component.ts': angular_search_page_component_ts,
+        'src/app/search/search-page.component.html': angular_search_page_component_html,
+        'src/app/search/search-page.module.ts': angular_search_page_module_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app-routing.module.ts': angular_app_routing_module_ts,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example_vue,
+        'src/router.ts': vue_router_ts,
+        'src/App.vue': vue_app_vue,
+        'src/main.ts': vue_main_ts,
+        'src/views/HomePage.vue': vue_home_page_vue,
+        'src/views/RadioPage.vue': vue_radio_page_vue,
+        'src/views/LibraryPage.vue': vue_library_page_vue,
+        'src/views/SearchPage.vue': vue_search_page_vue,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/pages/HomePage.tsx': react_home_page_tsx,
+        'src/pages/RadioPage.tsx': react_radio_page_tsx,
+        'src/pages/LibraryPage.tsx': react_library_page_tsx,
+        'src/pages/SearchPage.tsx': react_search_page_tsx,
+      },
+    },
+  }}
+  src="usage/v6/tabs/router/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/tabs/router/javascript.md b/static/usage/v7/tabs/router/javascript.md
new file mode 100644
index 00000000000..ca1351100fd
--- /dev/null
+++ b/static/usage/v7/tabs/router/javascript.md
@@ -0,0 +1,101 @@
+```html
+<style>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<ion-tabs>
+  <ion-tab tab="home">
+    <ion-nav id="home-nav"></ion-nav>
+    <div id="home-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Listen now content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="radio">
+    <ion-nav id="radio-nav"></ion-nav>
+    <div id="radio-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Radio content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="library">
+    <ion-nav id="library-nav"></ion-nav>
+    <div id="library-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Library</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Library content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="search">
+    <ion-nav id="search-nav"></ion-nav>
+    <div id="search-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Search</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Search content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+
+<script>
+  const homeNav = document.querySelector('#home-nav');
+  const homePage = document.querySelector('#home-page');
+  homeNav.root = homePage;
+
+  const radioNav = document.querySelector('#radio-nav');
+  const radioPage = document.querySelector('#radio-page');
+  radioNav.root = radioPage;
+
+  const libraryNav = document.querySelector('#library-nav');
+  const libraryPage = document.querySelector('#library-page');
+  libraryNav.root = libraryPage;
+
+  const searchNav = document.querySelector('#search-nav');
+  const searchPage = document.querySelector('#search-page');
+  searchNav.root = searchPage;
+</script>
+```
diff --git a/static/usage/v7/tabs/router/react/home_page_tsx.md b/static/usage/v7/tabs/router/react/home_page_tsx.md
new file mode 100644
index 00000000000..f24b05e18b5
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/home_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const HomePage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Listen now</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Listen now content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default HomePage;
+```
diff --git a/static/usage/v7/tabs/router/react/library_page_tsx.md b/static/usage/v7/tabs/router/react/library_page_tsx.md
new file mode 100644
index 00000000000..383b6f115de
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/library_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const LibraryPage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Library</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Library content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default LibraryPage;
+```
diff --git a/static/usage/v7/tabs/router/react/main_tsx.md b/static/usage/v7/tabs/router/react/main_tsx.md
new file mode 100644
index 00000000000..b5005ef3778
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/main_tsx.md
@@ -0,0 +1,58 @@
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+import { Route, Redirect } from 'react-router';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import HomePage from './pages/HomePage';
+import RadioPage from './pages/RadioPage';
+import LibraryPage from './pages/LibraryPage';
+import SearchPage from './pages/SearchPage';
+
+function Example() {
+  return (
+    <IonReactRouter>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Redirect exact path="/" to="/home" />
+          {/*
+          Use the render method to reduce the number of renders your component will have due to a route change.
+
+          Use the component prop when your component depends on the RouterComponentProps passed in automatically.
+        */}
+          <Route path="/home" render={() => <HomePage />} exact={true} />
+          <Route path="/radio" render={() => <RadioPage />} exact={true} />
+          <Route path="/library" render={() => <LibraryPage />} exact={true} />
+          <Route path="/search" render={() => <SearchPage />} exact={true} />
+        </IonRouterOutlet>
+
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="home" href="/home">
+            <IonIcon icon={playCircle} />
+            <IonLabel>Listen now</IonLabel>
+          </IonTabButton>
+
+          <IonTabButton tab="radio" href="/radio">
+            <IonIcon icon={radio} />
+            <IonLabel>Radio</IonLabel>
+          </IonTabButton>
+
+          <IonTabButton tab="library" href="/library">
+            <IonIcon icon={library} />
+            <IonLabel>Library</IonLabel>
+          </IonTabButton>
+
+          <IonTabButton tab="search" href="/search">
+            <IonIcon icon={search} />
+            <IonLabel>Search</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonReactRouter>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/tabs/router/react/radio_page_tsx.md b/static/usage/v7/tabs/router/react/radio_page_tsx.md
new file mode 100644
index 00000000000..d0e432c3a58
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/radio_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const RadioPage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Radio</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Radio content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default RadioPage;
+```
diff --git a/static/usage/v7/tabs/router/react/search_page_tsx.md b/static/usage/v7/tabs/router/react/search_page_tsx.md
new file mode 100644
index 00000000000..3d51b374830
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/search_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const SearchPage = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Search</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+        }}
+      >
+        Search content
+      </div>
+    </IonContent>
+  </>
+);
+
+export default SearchPage;
+```
diff --git a/static/usage/v7/tabs/router/vue.md b/static/usage/v7/tabs/router/vue.md
new file mode 100644
index 00000000000..091cabaa6f8
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue.md
@@ -0,0 +1,81 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+<template>
+  <ion-tabs>
+    <ion-tab tab="home">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Listen now content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab tab="radio">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Radio content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab tab="library">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Library</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Library content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab tab="search">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Search</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Search content</div>
+      </ion-content>
+    </ion-tab>
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="home">
+        <ion-icon name="play-circle"></ion-icon>
+        Listen Now
+      </ion-tab-button>
+      <ion-tab-button tab="radio">
+        <ion-icon name="radio"></ion-icon>
+        Radio
+      </ion-tab-button>
+      <ion-tab-button tab="library">
+        <ion-icon name="library"></ion-icon>
+        Library
+      </ion-tab-button>
+      <ion-tab-button tab="search">
+        <ion-icon name="search"></ion-icon>
+        Search
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+
+<script lang="ts">
+  import { IonTabs, IonTabBar, IonTabButton, IonContent, IonHeader, IonTitle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTabs, IonTabBar, IonTabButton, IonContent, IonHeader, IonTitle },
+  });
+</script>
+```
diff --git a/static/usage/v7/tabs/router/vue/app_vue.md b/static/usage/v7/tabs/router/vue/app_vue.md
new file mode 100644
index 00000000000..b5f330406db
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/app_vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</template>
+
+<script lang="ts">
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+
+  import { defineComponent } from 'vue';
+
+  import Example from './components/Example.vue';
+
+  export default defineComponent({
+    name: 'App',
+    components: { IonApp, IonRouterOutlet },
+  });
+</script>
+```
diff --git a/static/usage/v7/tabs/router/vue/example_vue.md b/static/usage/v7/tabs/router/vue/example_vue.md
new file mode 100644
index 00000000000..846b8b4d621
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/example_vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-page>
+    <ion-tabs>
+      <ion-router-outlet></ion-router-outlet>
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="home" href="/home">
+          <ion-icon :icon="playCircle" />
+          <ion-label>Listen now</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="radio" href="/radio">
+          <ion-icon :icon="radio" />
+          <ion-label>Radio</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="library" href="/library">
+          <ion-icon :icon="library" />
+          <ion-label>Library</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="search" href="/search">
+          <ion-icon :icon="search" />
+          <ion-label>Search</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon } from '@ionic/vue';
+
+  import { playCircle, radio, library, search } from 'ionicons/icons';
+
+  export default {
+    components: { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon },
+    data() {
+      return {
+        playCircle,
+        radio,
+        library,
+        search,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/v7/tabs/router/vue/home_page_vue.md b/static/usage/v7/tabs/router/vue/home_page_vue.md
new file mode 100644
index 00000000000..9d809b9a70d
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/home_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Listen now</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Listen now content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/static/usage/v7/tabs/router/vue/library_page_vue.md b/static/usage/v7/tabs/router/vue/library_page_vue.md
new file mode 100644
index 00000000000..b46e1dec9d7
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/library_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Library</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Library content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/static/usage/v7/tabs/router/vue/main_ts.md b/static/usage/v7/tabs/router/vue/main_ts.md
new file mode 100644
index 00000000000..d3253963fa5
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/main_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+import router from './router';
+
+/* 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';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+router.isReady().then(() => {
+  app.mount('#app');
+});
+```
diff --git a/static/usage/v7/tabs/router/vue/radio_page_vue.md b/static/usage/v7/tabs/router/vue/radio_page_vue.md
new file mode 100644
index 00000000000..5f65a8963cf
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/radio_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Radio</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Radio content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/static/usage/v7/tabs/router/vue/router_ts.md b/static/usage/v7/tabs/router/vue/router_ts.md
new file mode 100644
index 00000000000..3279c38def4
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/router_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Example from './components/Example.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/',
+    component: Example,
+    children: [
+      {
+        path: '',
+        redirect: '/home',
+      },
+      {
+        path: 'home',
+        component: () => import('./views/HomePage.vue'),
+      },
+      {
+        path: 'radio',
+        component: () => import('./views/RadioPage.vue'),
+      },
+      {
+        path: 'library',
+        component: () => import('./views/LibraryPage.vue'),
+      },
+      {
+        path: 'search',
+        component: () => import('./views/SearchPage.vue'),
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  // Use: createWebHistory(process.env.BASE_URL) in your app
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
+```
diff --git a/static/usage/v7/tabs/router/vue/search_page_vue.md b/static/usage/v7/tabs/router/vue/search_page_vue.md
new file mode 100644
index 00000000000..f85eeb9c649
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/search_page_vue.md
@@ -0,0 +1,31 @@
+```html
+<style scoped>
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Search</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="example-content">Search content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
+  };
+</script>
+```
diff --git a/versioned_docs/version-v6/api/tabs.md b/versioned_docs/version-v6/api/tabs.md
index e12003025f7..c97ef582190 100644
--- a/versioned_docs/version-v6/api/tabs.md
+++ b/versioned_docs/version-v6/api/tabs.md
@@ -1,12 +1,6 @@
 ---
-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"
+title: 'ion-tabs'
 ---
-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';
@@ -17,22 +11,16 @@ 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." />
+  <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.
 
@@ -42,459 +30,59 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don
 
 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;
-}
-```
-
+:::note Framework Support
 
+Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components.
 
+:::
 
-## Usage
+## Usage with Router
 
-<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' }]}>
+Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.
 
-<TabItem value="angular">
+import Router from '@site/static/usage/v6/tabs/router/index.md';
 
-```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>
+<Router />
 
-    <ion-tab-button tab="speakers">
-      <ion-icon name="person-circle"></ion-icon>
-      <ion-label>Speakers</ion-label>
-    </ion-tab-button>
+:::tip Best Practices
 
-    <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>
-```
+Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
 
+:::
 
-### Router integration
+## Interfaces
 
-When used with Angular's router the `tab` property of the `ion-tab-button` should be a reference to the route path.
+### TabsCustomEvent
 
-```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>
-```
+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
-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>
-    ];
-  }
+interface TabsCustomEvent extends CustomEvent {
+  detail: { tab: string };
+  target: HTMLIonTabsElement;
 }
 ```
 
-
-### 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
+
+<Slots />

From e06dffd9dfa3c054c767d868b381b7d472b38905 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 8 Feb 2023 11:48:03 -0600
Subject: [PATCH 201/469] docs(many): add mode prop to playgrounds where needed
 (#2760)

---
 static/usage/v6/footer/custom-scroll-target/index.md      | 1 +
 static/usage/v6/footer/fade/index.md                      | 1 +
 static/usage/v6/footer/translucent/index.md               | 1 +
 static/usage/v6/header/condense/index.md                  | 1 +
 static/usage/v6/header/custom-scroll-target/index.md      | 1 +
 static/usage/v6/header/fade/index.md                      | 1 +
 static/usage/v6/header/translucent/index.md               | 1 +
 static/usage/v6/input/fill/index.md                       | 7 ++++++-
 static/usage/v6/modal/card/basic/index.md                 | 1 +
 .../usage/v6/title/collapsible-large-title/basic/index.md | 1 +
 static/usage/v7/footer/custom-scroll-target/index.md      | 1 +
 static/usage/v7/footer/fade/index.md                      | 1 +
 static/usage/v7/footer/translucent/index.md               | 1 +
 static/usage/v7/header/condense/index.md                  | 1 +
 static/usage/v7/header/custom-scroll-target/index.md      | 1 +
 static/usage/v7/header/fade/index.md                      | 1 +
 static/usage/v7/header/translucent/index.md               | 1 +
 static/usage/v7/input/fill/angular.md                     | 4 ++--
 static/usage/v7/input/fill/demo.html                      | 4 ++--
 static/usage/v7/input/fill/index.md                       | 8 +++++++-
 static/usage/v7/input/fill/javascript.md                  | 4 ++--
 static/usage/v7/input/fill/react.md                       | 4 ++--
 static/usage/v7/input/fill/vue.md                         | 4 ++--
 static/usage/v7/modal/card/basic/index.md                 | 1 +
 static/usage/v7/select/fill/angular.md                    | 4 ++--
 static/usage/v7/select/fill/demo.html                     | 4 ++--
 static/usage/v7/select/fill/index.md                      | 8 +++++++-
 static/usage/v7/select/fill/javascript.md                 | 4 ++--
 static/usage/v7/select/fill/react.md                      | 4 ++--
 static/usage/v7/select/fill/vue.md                        | 4 ++--
 .../usage/v7/title/collapsible-large-title/basic/index.md | 1 +
 31 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/static/usage/v6/footer/custom-scroll-target/index.md b/static/usage/v6/footer/custom-scroll-target/index.md
index 4fbda3e091a..03d078fe05c 100644
--- a/static/usage/v6/footer/custom-scroll-target/index.md
+++ b/static/usage/v6/footer/custom-scroll-target/index.md
@@ -30,4 +30,5 @@ import angular_example_component_css from './angular/example_component_css.md';
   src="usage/v6/footer/custom-scroll-target/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v6/footer/fade/index.md b/static/usage/v6/footer/fade/index.md
index 72472ad29cd..c5e53f9bcab 100644
--- a/static/usage/v6/footer/fade/index.md
+++ b/static/usage/v6/footer/fade/index.md
@@ -10,4 +10,5 @@ import angular from './angular.md';
   src="usage/v6/footer/fade/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v6/footer/translucent/index.md b/static/usage/v6/footer/translucent/index.md
index adcf2ff32c4..b15d0ab997b 100644
--- a/static/usage/v6/footer/translucent/index.md
+++ b/static/usage/v6/footer/translucent/index.md
@@ -10,4 +10,5 @@ import angular from './angular.md';
   src="usage/v6/footer/translucent/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v6/header/condense/index.md b/static/usage/v6/header/condense/index.md
index f1f8c0d8038..f094566695e 100644
--- a/static/usage/v6/header/condense/index.md
+++ b/static/usage/v6/header/condense/index.md
@@ -10,4 +10,5 @@ import angular from './angular.md';
   src="usage/v6/header/condense/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v6/header/custom-scroll-target/index.md b/static/usage/v6/header/custom-scroll-target/index.md
index 413db200c00..888eb83b0db 100644
--- a/static/usage/v6/header/custom-scroll-target/index.md
+++ b/static/usage/v6/header/custom-scroll-target/index.md
@@ -30,4 +30,5 @@ import angular_example_component_css from './angular/example_component_css.md';
   src="usage/v6/header/custom-scroll-target/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v6/header/fade/index.md b/static/usage/v6/header/fade/index.md
index 37d3c68df77..2898965ec85 100644
--- a/static/usage/v6/header/fade/index.md
+++ b/static/usage/v6/header/fade/index.md
@@ -10,4 +10,5 @@ import angular from './angular.md';
   src="usage/v6/header/fade/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.md
index 19f3e1a3d05..28a84431c50 100644
--- a/static/usage/v6/header/translucent/index.md
+++ b/static/usage/v6/header/translucent/index.md
@@ -10,4 +10,5 @@ import angular from './angular.md';
   src="usage/v6/header/translucent/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v6/input/fill/index.md b/static/usage/v6/input/fill/index.md
index cad46dc2dda..3b838e6d74d 100644
--- a/static/usage/v6/input/fill/index.md
+++ b/static/usage/v6/input/fill/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/input/fill/demo.html"
+  size="250px"
+  mode="md"
+/>
diff --git a/static/usage/v6/modal/card/basic/index.md b/static/usage/v6/modal/card/basic/index.md
index 1d68e0f9f07..dfea885fdc7 100644
--- a/static/usage/v6/modal/card/basic/index.md
+++ b/static/usage/v6/modal/card/basic/index.md
@@ -21,4 +21,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   }}
   src="usage/v6/modal/card/basic/demo.html"
   devicePreview
+  mode="ios"
 />
diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.md
index 18dc86dd256..4c83a3f1c8e 100644
--- a/static/usage/v6/title/collapsible-large-title/basic/index.md
+++ b/static/usage/v6/title/collapsible-large-title/basic/index.md
@@ -11,4 +11,5 @@ import angular from './angular.md';
   src="usage/v6/title/collapsible-large-title/basic/demo.html"
   devicePreview={true}
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/footer/custom-scroll-target/index.md b/static/usage/v7/footer/custom-scroll-target/index.md
index ab03916d220..df2b8f10214 100644
--- a/static/usage/v7/footer/custom-scroll-target/index.md
+++ b/static/usage/v7/footer/custom-scroll-target/index.md
@@ -31,4 +31,5 @@ import angular_example_component_css from './angular/example_component_css.md';
   src="usage/v7/footer/custom-scroll-target/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/footer/fade/index.md b/static/usage/v7/footer/fade/index.md
index fd980ba23c6..47248b6f35f 100644
--- a/static/usage/v7/footer/fade/index.md
+++ b/static/usage/v7/footer/fade/index.md
@@ -11,4 +11,5 @@ import angular from './angular.md';
   src="usage/v7/footer/fade/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/footer/translucent/index.md b/static/usage/v7/footer/translucent/index.md
index 1893af3c325..51e731fe97e 100644
--- a/static/usage/v7/footer/translucent/index.md
+++ b/static/usage/v7/footer/translucent/index.md
@@ -11,4 +11,5 @@ import angular from './angular.md';
   src="usage/v7/footer/translucent/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/header/condense/index.md b/static/usage/v7/header/condense/index.md
index 8c98b26a1af..5ae68be3af9 100644
--- a/static/usage/v7/header/condense/index.md
+++ b/static/usage/v7/header/condense/index.md
@@ -11,4 +11,5 @@ import angular from './angular.md';
   src="usage/v7/header/condense/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/header/custom-scroll-target/index.md b/static/usage/v7/header/custom-scroll-target/index.md
index 8e1dbed26df..cf5ad71dd63 100644
--- a/static/usage/v7/header/custom-scroll-target/index.md
+++ b/static/usage/v7/header/custom-scroll-target/index.md
@@ -31,4 +31,5 @@ import angular_example_component_css from './angular/example_component_css.md';
   src="usage/v7/header/custom-scroll-target/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/header/fade/index.md b/static/usage/v7/header/fade/index.md
index 797016cf1bb..328ba025ada 100644
--- a/static/usage/v7/header/fade/index.md
+++ b/static/usage/v7/header/fade/index.md
@@ -11,4 +11,5 @@ import angular from './angular.md';
   src="usage/v7/header/fade/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/header/translucent/index.md b/static/usage/v7/header/translucent/index.md
index 17a491b9e7a..fe8e8b04a8e 100644
--- a/static/usage/v7/header/translucent/index.md
+++ b/static/usage/v7/header/translucent/index.md
@@ -11,4 +11,5 @@ import angular from './angular.md';
   src="usage/v7/header/translucent/demo.html"
   devicePreview
   includeIonContent={false}
+  mode="ios"
 />
diff --git a/static/usage/v7/input/fill/angular.md b/static/usage/v7/input/fill/angular.md
index 4f28a9ddb7b..60af531cd45 100644
--- a/static/usage/v7/input/fill/angular.md
+++ b/static/usage/v7/input/fill/angular.md
@@ -1,7 +1,7 @@
 ```html
-<ion-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
+<ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
 
 <br />
 
-<ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
+<ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 ```
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
index 8a710fd79b2..ff6c1d146bf 100644
--- a/static/usage/v7/input/fill/demo.html
+++ b/static/usage/v7/input/fill/demo.html
@@ -25,9 +25,9 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
+        <ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
 
-        <ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
+        <ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
       </div>
     </ion-content>
   </ion-app>
diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md
index 534ebc41c25..10fcef1cb28 100644
--- a/static/usage/v7/input/fill/index.md
+++ b/static/usage/v7/input/fill/index.md
@@ -5,4 +5,10 @@ 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" />
+<Playground 
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/input/fill/demo.html"
+  size="250px"
+  mode="md"
+/>
diff --git a/static/usage/v7/input/fill/javascript.md b/static/usage/v7/input/fill/javascript.md
index 4f28a9ddb7b..60af531cd45 100644
--- a/static/usage/v7/input/fill/javascript.md
+++ b/static/usage/v7/input/fill/javascript.md
@@ -1,7 +1,7 @@
 ```html
-<ion-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
+<ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
 
 <br />
 
-<ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
+<ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 ```
diff --git a/static/usage/v7/input/fill/react.md b/static/usage/v7/input/fill/react.md
index 095d60872b6..834ca7f96ea 100644
--- a/static/usage/v7/input/fill/react.md
+++ b/static/usage/v7/input/fill/react.md
@@ -5,11 +5,11 @@ import { IonInput } from '@ionic/react';
 function Example() {
   return (
     <>
-      <IonInput mode="md" label="Solid input" labelPlacement="floating" fill="solid" placeholder="Enter text"></IonInput>
+      <IonInput label="Solid input" labelPlacement="floating" fill="solid" placeholder="Enter text"></IonInput>
       
       <br />
       
-      <IonInput mode="md" label="Outline input" labelPlacement="floating" fill="outline" placeholder="Enter text"></IonInput>
+      <IonInput label="Outline input" labelPlacement="floating" fill="outline" placeholder="Enter text"></IonInput>
     </>
   );
 }
diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md
index 4e23ca4b3d7..f17fd6e151d 100644
--- a/static/usage/v7/input/fill/vue.md
+++ b/static/usage/v7/input/fill/vue.md
@@ -1,10 +1,10 @@
 ```html
 <template>
-  <ion-input mode="md" label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
+  <ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
   
   <br />
   
-  <ion-input mode="md" label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
+  <ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/modal/card/basic/index.md b/static/usage/v7/modal/card/basic/index.md
index 782938e1d2f..d3fca17f0b1 100644
--- a/static/usage/v7/modal/card/basic/index.md
+++ b/static/usage/v7/modal/card/basic/index.md
@@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   }}
   src="usage/v7/modal/card/basic/demo.html"
   devicePreview
+  mode="ios"
 />
diff --git a/static/usage/v7/select/fill/angular.md b/static/usage/v7/select/fill/angular.md
index a78df914e09..fcfe25bfe2c 100644
--- a/static/usage/v7/select/fill/angular.md
+++ b/static/usage/v7/select/fill/angular.md
@@ -1,5 +1,5 @@
 ```html
-<ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+<ion-select label="Solid select" label-placement="floating" fill="solid">
   <ion-select-option value="apple">Apple</ion-select-option>
   <ion-select-option value="banana">Banana</ion-select-option>
   <ion-select-option value="orange">Orange</ion-select-option>
@@ -7,7 +7,7 @@
 
 <br />
 
-<ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+<ion-select label="Outline select" label-placement="floating" fill="outline">
   <ion-select-option value="apple">Apple</ion-select-option>
   <ion-select-option value="banana">Banana</ion-select-option>
   <ion-select-option value="orange">Orange</ion-select-option>
diff --git a/static/usage/v7/select/fill/demo.html b/static/usage/v7/select/fill/demo.html
index 121d63356fc..b34195cad90 100644
--- a/static/usage/v7/select/fill/demo.html
+++ b/static/usage/v7/select/fill/demo.html
@@ -25,13 +25,13 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+        <ion-select label="Solid select" label-placement="floating" fill="solid">
           <ion-select-option value="apple">Apple</ion-select-option>
           <ion-select-option value="banana">Banana</ion-select-option>
           <ion-select-option value="orange">Orange</ion-select-option>
         </ion-select>
 
-        <ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+        <ion-select label="Outline select" label-placement="floating" fill="outline">
           <ion-select-option value="apple">Apple</ion-select-option>
           <ion-select-option value="banana">Banana</ion-select-option>
           <ion-select-option value="orange">Orange</ion-select-option>
diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.md
index 47fc0da2ec9..393a8af448a 100644
--- a/static/usage/v7/select/fill/index.md
+++ b/static/usage/v7/select/fill/index.md
@@ -5,4 +5,10 @@ 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/select/fill/demo.html" size="300px" />
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/fill/demo.html"
+  size="300px"
+  mode="md"
+/>
diff --git a/static/usage/v7/select/fill/javascript.md b/static/usage/v7/select/fill/javascript.md
index a78df914e09..fcfe25bfe2c 100644
--- a/static/usage/v7/select/fill/javascript.md
+++ b/static/usage/v7/select/fill/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+<ion-select label="Solid select" label-placement="floating" fill="solid">
   <ion-select-option value="apple">Apple</ion-select-option>
   <ion-select-option value="banana">Banana</ion-select-option>
   <ion-select-option value="orange">Orange</ion-select-option>
@@ -7,7 +7,7 @@
 
 <br />
 
-<ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+<ion-select label="Outline select" label-placement="floating" fill="outline">
   <ion-select-option value="apple">Apple</ion-select-option>
   <ion-select-option value="banana">Banana</ion-select-option>
   <ion-select-option value="orange">Orange</ion-select-option>
diff --git a/static/usage/v7/select/fill/react.md b/static/usage/v7/select/fill/react.md
index 33b451d04a9..ffec8acdc07 100644
--- a/static/usage/v7/select/fill/react.md
+++ b/static/usage/v7/select/fill/react.md
@@ -5,7 +5,7 @@ import { IonSelect, IonSelectOption } from '@ionic/react';
 function Example() {
   return (
     <>
-      <IonSelect mode="md" label="Solid select" labelPlacement="floating" fill="solid">
+      <IonSelect label="Solid select" labelPlacement="floating" fill="solid">
         <IonSelectOption value="apple">Apple</IonSelectOption>
         <IonSelectOption value="banana">Banana</IonSelectOption>
         <IonSelectOption value="orange">Orange</IonSelectOption>
@@ -13,7 +13,7 @@ function Example() {
       
       <br />
       
-      <IonSelect mode="md" label="Outline select" labelPlacement="floating" fill="outline">
+      <IonSelect label="Outline select" labelPlacement="floating" fill="outline">
         <IonSelectOption value="apple">Apple</IonSelectOption>
         <IonSelectOption value="banana">Banana</IonSelectOption>
         <IonSelectOption value="orange">Orange</IonSelectOption>
diff --git a/static/usage/v7/select/fill/vue.md b/static/usage/v7/select/fill/vue.md
index 7e11918cf9c..ea96b7ca17b 100644
--- a/static/usage/v7/select/fill/vue.md
+++ b/static/usage/v7/select/fill/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-select mode="md" label="Solid select" label-placement="floating" fill="solid">
+  <ion-select label="Solid select" label-placement="floating" fill="solid">
     <ion-select-option value="apple">Apple</ion-select-option>
     <ion-select-option value="banana">Banana</ion-select-option>
     <ion-select-option value="orange">Orange</ion-select-option>
@@ -8,7 +8,7 @@
   
   <br />
   
-  <ion-select mode="md" label="Outline select" label-placement="floating" fill="outline">
+  <ion-select label="Outline select" label-placement="floating" fill="outline">
     <ion-select-option value="apple">Apple</ion-select-option>
     <ion-select-option value="banana">Banana</ion-select-option>
     <ion-select-option value="orange">Orange</ion-select-option>
diff --git a/static/usage/v7/title/collapsible-large-title/basic/index.md b/static/usage/v7/title/collapsible-large-title/basic/index.md
index b4cb25ad642..8cb9a0cd0a0 100644
--- a/static/usage/v7/title/collapsible-large-title/basic/index.md
+++ b/static/usage/v7/title/collapsible-large-title/basic/index.md
@@ -12,4 +12,5 @@ import angular from './angular.md';
   src="usage/v7/title/collapsible-large-title/basic/demo.html"
   devicePreview={true}
   includeIonContent={false}
+  mode="ios"
 />

From ec8c4bb633f7c796dfee1d2329ddd3b8f4b83a98 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 8 Feb 2023 13:36:22 -0500
Subject: [PATCH 202/469] docs(input, textarea): add bottom content styling
 example (#2759)

---
 .../angular/example_component_css.md          |  5 +++++
 .../angular/example_component_html.md         |  9 +++++++-
 .../v7/input/theming/css-properties/demo.html | 14 +++++++++++-
 .../theming/css-properties/javascript.md      | 14 +++++++++++-
 .../theming/css-properties/react/main_css.md  |  5 +++++
 .../theming/css-properties/react/main_tsx.md  |  9 +++++++-
 .../v7/input/theming/css-properties/vue.md    | 16 ++++++++++++--
 .../theming/angular/example_component_css.md  |  7 +++++-
 .../theming/angular/example_component_html.md |  9 +++++++-
 static/usage/v7/textarea/theming/demo.html    | 22 ++++++++++++++-----
 .../usage/v7/textarea/theming/javascript.md   | 16 ++++++++++++--
 .../v7/textarea/theming/react/main_css.md     |  7 +++++-
 .../v7/textarea/theming/react/main_tsx.md     | 11 +++++++++-
 static/usage/v7/textarea/theming/vue.md       | 16 ++++++++++++--
 14 files changed, 141 insertions(+), 19 deletions(-)

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
index bede6457325..154e20ad0cc 100644
--- 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
@@ -10,4 +10,9 @@ ion-input.custom {
   --padding-start: 10px;
   --padding-top: 10px;
 }
+
+ion-input.custom .helper-text,
+ion-input.custom .counter {
+  color: var(--ion-color-step-700, #373737);
+}
 ```
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
index ca162b750d8..c3ffd4077fe 100644
--- 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
@@ -1,3 +1,10 @@
 ```html
-<ion-input aria-label="Custom input" placeholder="Custom input" class="custom"></ion-input>
+<ion-input
+  aria-label="Custom input" 
+  placeholder="Custom input" 
+  class="custom" 
+  helperText="Helper text"
+  [counter]="true"
+  [maxlength]="20"
+></ion-input>
 ```
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
index 660be60fee9..f8e8df8f8fa 100644
--- a/static/usage/v7/input/theming/css-properties/demo.html
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -27,6 +27,11 @@
       --padding-start: 10px;
       --padding-top: 10px;
     }
+
+    ion-input.custom .helper-text,
+    ion-input.custom .counter {
+      color: var(--ion-color-step-700, #373737);
+    }
   </style>
 </head>
 
@@ -34,7 +39,14 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-input aria-label="Custom input" placeholder="Custom input" class="custom"></ion-input>
+        <ion-input
+          aria-label="Custom input"
+          placeholder="Custom input"
+          class="custom"
+          helper-text="Helper text"
+          counter="true"
+          maxlength="20"
+        ></ion-input>
       </div>
     </ion-content>
   </ion-app>
diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md
index 21bb54b3804..4cbd6339c3f 100644
--- a/static/usage/v7/input/theming/css-properties/javascript.md
+++ b/static/usage/v7/input/theming/css-properties/javascript.md
@@ -1,5 +1,12 @@
 ```html
-<ion-input aria-label="Custom input" placeholder="Custom input" class="custom"></ion-input>
+<ion-input
+  aria-label="Custom input" 
+  placeholder="Custom input" 
+  class="custom"
+  helper-text="Helper text"
+  counter="true"
+  maxlength="20"
+></ion-input>
 
 <style>
   ion-input.custom {
@@ -13,5 +20,10 @@
     --padding-start: 10px;
     --padding-top: 10px;
   }
+  
+  ion-input.custom .helper-text,
+  ion-input.custom .counter {
+    color: var(--ion-color-step-700, #373737);
+  }
 </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
index bede6457325..c83de40d5f0 100644
--- a/static/usage/v7/input/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/input/theming/css-properties/react/main_css.md
@@ -10,4 +10,9 @@ ion-input.custom {
   --padding-start: 10px;
   --padding-top: 10px;
 }
+
+ion-input.custom .helper-text,
+ion-input.custom .counter {
+  color: #373737;
+}
 ```
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
index 242fb5e7751..b1e91327713 100644
--- a/static/usage/v7/input/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/input/theming/css-properties/react/main_tsx.md
@@ -6,7 +6,14 @@ import './main.css';
 
 function Example() {
   return (
-    <IonInput aria-label="Custom input" placeholder="Custom input" class="custom"></IonInput>
+    <IonInput
+      aria-label="Custom input" 
+      placeholder="Custom input" 
+      class="custom"
+      helperText="Helper text"
+      counter={true}
+      maxlength={20}
+    ></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
index 4b134a8b6d1..8a7bd9d898e 100644
--- a/static/usage/v7/input/theming/css-properties/vue.md
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -1,6 +1,13 @@
 ```html
 <template>
-  <ion-input aria-label="Custom input" placeholder="Custom input" class="custom"></ion-input>
+  <ion-input
+    aria-label="Custom input" 
+    placeholder="Custom input" 
+    class="custom"
+    helper-text="Helper text"
+    :counter="true"
+    :maxlength="20"
+  ></ion-input>
 </template>
 
 <script lang="ts">
@@ -12,7 +19,7 @@
   });
 </script>
 
-<style scoped>
+<style>
   ion-input.custom {
     --background: #373737;
     --color: #fff;
@@ -24,5 +31,10 @@
     --padding-start: 10px;
     --padding-top: 10px;
   }
+  
+  ion-input.custom .helper-text,
+  ion-input.custom .counter {
+    color: var(--ion-color-step-700, #373737);
+  }
 </style>
 ```
diff --git a/static/usage/v7/textarea/theming/angular/example_component_css.md b/static/usage/v7/textarea/theming/angular/example_component_css.md
index f36f2d0f144..dae0d52310e 100644
--- a/static/usage/v7/textarea/theming/angular/example_component_css.md
+++ b/static/usage/v7/textarea/theming/angular/example_component_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-textarea.custom-textarea {
+ion-textarea.custom {
   --background: #373737;
   --color: #fff;
   --padding-end: 10px;
@@ -7,4 +7,9 @@ ion-textarea.custom-textarea {
   --placeholder-color: #ddd;
   --placeholder-opacity: 0.8;
 }
+
+ion-textarea.custom .helper-text,
+ion-textarea.custom .counter {
+  color: #373737;
+}
 ```
diff --git a/static/usage/v7/textarea/theming/angular/example_component_html.md b/static/usage/v7/textarea/theming/angular/example_component_html.md
index 639c4e22a1f..d5237b2cc36 100644
--- a/static/usage/v7/textarea/theming/angular/example_component_html.md
+++ b/static/usage/v7/textarea/theming/angular/example_component_html.md
@@ -1,3 +1,10 @@
 ```html
-<ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+<ion-textarea
+  aria-label="Custom textarea"
+  placeholder="Type something here"
+  class="custom"
+  helperText="Helper text"
+  [counter]="true"
+  [maxlength]="100"
+></ion-textarea>
 ```
diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html
index 556000b9591..2fce6484a38 100644
--- a/static/usage/v7/textarea/theming/demo.html
+++ b/static/usage/v7/textarea/theming/demo.html
@@ -7,14 +7,14 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <style>
     .container {
       padding: 0 40px;
     }
 
-    ion-textarea.custom-textarea {
+    ion-textarea.custom {
       --background: #373737;
       --color: #fff;
       --padding-end: 10px;
@@ -22,6 +22,11 @@
       --placeholder-color: #ddd;
       --placeholder-opacity: 0.8;
     }
+
+    ion-textarea.custom .helper-text,
+    ion-textarea.custom .counter {
+      color: #373737;
+    }
   </style>
 </head>
 
@@ -29,10 +34,17 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+        <ion-textarea
+          aria-label="Custom textarea"
+          placeholder="Type something here"
+          class="custom"
+          helper-text="Helper text"
+          counter="true"
+          maxlength="100"
+        ></ion-textarea>
       </div>
     </ion-content>
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md
index be7bfef12a7..ae34bb17a0f 100644
--- a/static/usage/v7/textarea/theming/javascript.md
+++ b/static/usage/v7/textarea/theming/javascript.md
@@ -1,8 +1,15 @@
 ```html
-<ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+<ion-textarea
+  aria-label="Custom textarea"
+  placeholder="Type something here"
+  class="custom"
+  helper-text="Helper text"
+  counter="true"
+  maxlength="100"
+></ion-textarea>
 
 <style>
-  ion-textarea.custom-textarea {
+  ion-textarea.custom {
     --background: #373737;
     --color: #fff;
     --padding-end: 10px;
@@ -10,5 +17,10 @@
     --placeholder-color: #ddd;
     --placeholder-opacity: 0.8;
   }
+  
+  ion-textarea.custom .helper-text,
+  ion-textarea.custom .counter {
+    color: #373737;
+  }
 </style>
 ```
diff --git a/static/usage/v7/textarea/theming/react/main_css.md b/static/usage/v7/textarea/theming/react/main_css.md
index f36f2d0f144..dae0d52310e 100644
--- a/static/usage/v7/textarea/theming/react/main_css.md
+++ b/static/usage/v7/textarea/theming/react/main_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-textarea.custom-textarea {
+ion-textarea.custom {
   --background: #373737;
   --color: #fff;
   --padding-end: 10px;
@@ -7,4 +7,9 @@ ion-textarea.custom-textarea {
   --placeholder-color: #ddd;
   --placeholder-opacity: 0.8;
 }
+
+ion-textarea.custom .helper-text,
+ion-textarea.custom .counter {
+  color: #373737;
+}
 ```
diff --git a/static/usage/v7/textarea/theming/react/main_tsx.md b/static/usage/v7/textarea/theming/react/main_tsx.md
index 2f5acbf2fdc..f0ca368dff6 100644
--- a/static/usage/v7/textarea/theming/react/main_tsx.md
+++ b/static/usage/v7/textarea/theming/react/main_tsx.md
@@ -5,7 +5,16 @@ import { IonTextarea } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return <IonTextarea className="custom-textarea" placeholder="Type something here"></IonTextarea>;
+  return (
+    <IonTextarea
+      aria-label="Custom textarea"
+      placeholder="Type something here"
+      class="custom"
+      helperText="Helper text"
+      counter={true}
+      maxlength={100}
+    ></IonTextarea>
+  );
 }
 export default Example;
 ```
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
index b8f6639d8e8..be3ad556a62 100644
--- a/static/usage/v7/textarea/theming/vue.md
+++ b/static/usage/v7/textarea/theming/vue.md
@@ -1,6 +1,6 @@
 ```html
 <style>
-  ion-textarea.custom-textarea {
+  ion-textarea.custom {
     --background: #373737;
     --color: #fff;
     --padding-end: 10px;
@@ -8,10 +8,22 @@
     --placeholder-color: #ddd;
     --placeholder-opacity: 0.8;
   }
+  
+  ion-textarea.custom .helper-text,
+  ion-textarea.custom .counter {
+    color: #373737;
+  }
 </style>
 
 <template>
-  <ion-textarea class="custom-textarea" placeholder="Type something here"></ion-textarea>
+  <ion-textarea
+    aria-label="Custom textarea"
+    placeholder="Type something here"
+    class="custom"
+    helper-text="Helper text"
+    :counter="true"
+    :maxlength="100"
+  ></ion-textarea>
 </template>
 
 <script lang="ts">

From 7475a77e5b422236fdae856a85de30a5f79a9d4b Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 9 Feb 2023 11:32:32 -0500
Subject: [PATCH 203/469] docs(loading): inline playground usage (#2669)

---
 docs/api/loading.md                           | 75 ++-----------------
 static/code/stackblitz/v7/html/index.html     |  4 +-
 .../stackblitz/v7/html/index.withContent.html |  4 +-
 static/usage/v7/loading/inline/angular.md     |  4 +
 static/usage/v7/loading/inline/demo.html      | 26 +++++++
 static/usage/v7/loading/inline/index.md       | 17 +++++
 static/usage/v7/loading/inline/javascript.md  |  4 +
 static/usage/v7/loading/inline/react.md       | 13 ++++
 static/usage/v7/loading/inline/vue.md         | 14 ++++
 static/usage/v7/loading/spinners/angular.md   |  4 +
 .../angular/example_component_html.md         |  3 -
 .../spinners/angular/example_component_ts.md  | 23 ------
 static/usage/v7/loading/spinners/demo.html    | 27 ++-----
 static/usage/v7/loading/spinners/index.md     | 11 +--
 .../usage/v7/loading/spinners/javascript.md   | 15 +---
 static/usage/v7/loading/spinners/react.md     | 21 +-----
 static/usage/v7/loading/spinners/vue.md       | 20 +----
 .../theming/angular/example_component_html.md |  3 +-
 .../theming/angular/example_component_ts.md   | 23 ------
 static/usage/v7/loading/theming/demo.html     | 23 ++----
 static/usage/v7/loading/theming/index.md      |  2 -
 static/usage/v7/loading/theming/javascript.md | 25 ++-----
 static/usage/v7/loading/theming/react.md      | 26 -------
 .../v7/loading/theming/react/main_tsx.md      | 23 ++----
 static/usage/v7/loading/theming/vue.md        | 20 +----
 25 files changed, 134 insertions(+), 296 deletions(-)
 create mode 100644 static/usage/v7/loading/inline/angular.md
 create mode 100644 static/usage/v7/loading/inline/demo.html
 create mode 100644 static/usage/v7/loading/inline/index.md
 create mode 100644 static/usage/v7/loading/inline/javascript.md
 create mode 100644 static/usage/v7/loading/inline/react.md
 create mode 100644 static/usage/v7/loading/inline/vue.md
 create mode 100644 static/usage/v7/loading/spinners/angular.md
 delete mode 100644 static/usage/v7/loading/spinners/angular/example_component_html.md
 delete mode 100644 static/usage/v7/loading/spinners/angular/example_component_ts.md
 delete mode 100644 static/usage/v7/loading/theming/angular/example_component_ts.md
 delete mode 100644 static/usage/v7/loading/theming/react.md

diff --git a/docs/api/loading.md b/docs/api/loading.md
index 7fe04b8e9d6..f4e4f04f00c 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -1,9 +1,6 @@
 ---
 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';
@@ -29,78 +26,18 @@ Once presented, the loading indicator will display indefinitely by default. Deve
 
 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.
 
+### Inline (Recommended)
+
+import Inline from '@site/static/usage/v7/loading/inline/index.md';
+
+<Inline />
+
 ### Controller
 
 import Controller from '@site/static/usage/v7/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
diff --git a/static/code/stackblitz/v7/html/index.html b/static/code/stackblitz/v7/html/index.html
index 1ba72a98949..1e612d923a0 100644
--- a/static/code/stackblitz/v7/html/index.html
+++ b/static/code/stackblitz/v7/html/index.html
@@ -1,8 +1,8 @@
 <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" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/ionic.bundle.css" />
 
   <script>
     window.Ionic = {
diff --git a/static/code/stackblitz/v7/html/index.withContent.html b/static/code/stackblitz/v7/html/index.withContent.html
index c13b3063615..4bcde74921d 100644
--- a/static/code/stackblitz/v7/html/index.withContent.html
+++ b/static/code/stackblitz/v7/html/index.withContent.html
@@ -1,8 +1,8 @@
 <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" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/ionic.bundle.css" />
 
   <script>
     window.Ionic = {
diff --git a/static/usage/v7/loading/inline/angular.md b/static/usage/v7/loading/inline/angular.md
new file mode 100644
index 00000000000..d0a24c72f61
--- /dev/null
+++ b/static/usage/v7/loading/inline/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-button id="open-loading">Show Loading</ion-button>
+<ion-loading trigger="open-loading" message="Dismissing after 3 seconds..." duration="3000"></ion-loading>
+```
diff --git a/static/usage/v7/loading/inline/demo.html b/static/usage/v7/loading/inline/demo.html
new file mode 100644
index 00000000000..ca6869bf5cf
--- /dev/null
+++ b/static/usage/v7/loading/inline/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>Loading</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="open-loading">Show Loading</ion-button>
+        <ion-loading trigger="open-loading" message="Dismissing after 3 seconds..." duration="3000"></ion-loading>
+      </div>
+    </ion-content>
+  </ion-app>
+
+</body>
+
+</html>
diff --git a/static/usage/v7/loading/inline/index.md b/static/usage/v7/loading/inline/index.md
new file mode 100644
index 00000000000..e4038ad027d
--- /dev/null
+++ b/static/usage/v7/loading/inline/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/loading/inline/demo.html"
+/>
diff --git a/static/usage/v7/loading/inline/javascript.md b/static/usage/v7/loading/inline/javascript.md
new file mode 100644
index 00000000000..d0a24c72f61
--- /dev/null
+++ b/static/usage/v7/loading/inline/javascript.md
@@ -0,0 +1,4 @@
+```html
+<ion-button id="open-loading">Show Loading</ion-button>
+<ion-loading trigger="open-loading" message="Dismissing after 3 seconds..." duration="3000"></ion-loading>
+```
diff --git a/static/usage/v7/loading/inline/react.md b/static/usage/v7/loading/inline/react.md
new file mode 100644
index 00000000000..54ab6144881
--- /dev/null
+++ b/static/usage/v7/loading/inline/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonButton, IonLoading } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonButton id="open-loading">Show Loading</IonButton>
+      <IonLoading trigger="open-loading" message="Dismissing after 3 seconds..." duration={3000} />
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/inline/vue.md b/static/usage/v7/loading/inline/vue.md
new file mode 100644
index 00000000000..9c924108af8
--- /dev/null
+++ b/static/usage/v7/loading/inline/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-button id="open-loading">Show Loading</ion-button>
+  <ion-loading trigger="open-loading" :duration="3000" message="Dismissing after 3 seconds..."> </ion-loading>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonLoading } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  export default defineComponent({
+    components: { IonButton, IonLoading },
+  });
+</script>
+```
diff --git a/static/usage/v7/loading/spinners/angular.md b/static/usage/v7/loading/spinners/angular.md
new file mode 100644
index 00000000000..9f4eb5f13a0
--- /dev/null
+++ b/static/usage/v7/loading/spinners/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-button id="open-loading">Show Loading</ion-button>
+<ion-loading trigger="open-loading" message="Loading..." [duration]="3000" spinner="circles"></ion-loading>
+```
diff --git a/static/usage/v7/loading/spinners/angular/example_component_html.md b/static/usage/v7/loading/spinners/angular/example_component_html.md
deleted file mode 100644
index f4f3d701d2f..00000000000
--- a/static/usage/v7/loading/spinners/angular/example_component_html.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```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
deleted file mode 100644
index 7e522cb3a64..00000000000
--- a/static/usage/v7/loading/spinners/angular/example_component_ts.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```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
index 01929a4e1f2..8bf40c93809 100644
--- a/static/usage/v7/loading/spinners/demo.html
+++ b/static/usage/v7/loading/spinners/demo.html
@@ -4,37 +4,22 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Datetime</title>
+  <title>Loading</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/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>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 </head>
 
 <body>
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="showLoading()">Show Loading</ion-button>
+        <ion-button id="open-loading">Show Loading</ion-button>
+        <ion-loading trigger="open-loading" message="Loading..." duration="3000" spinner="circles"></ion-loading>
       </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
+</html>
diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.md
index 503c5a488f4..c9aa963a5f1 100644
--- a/static/usage/v7/loading/spinners/index.md
+++ b/static/usage/v7/loading/spinners/index.md
@@ -1,24 +1,17 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
+import angular from './angular.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,
-      },
-    },
+    angular,
   }}
   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
index 09712e70a92..4e2105dcd5e 100644
--- a/static/usage/v7/loading/spinners/javascript.md
+++ b/static/usage/v7/loading/spinners/javascript.md
@@ -1,15 +1,4 @@
 ```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>
+<ion-button id="open-loading">Show Loading</ion-button>
+<ion-loading trigger="open-loading" message="Loading..." duration="3000" spinner="circles"></ion-loading>
 ```
diff --git a/static/usage/v7/loading/spinners/react.md b/static/usage/v7/loading/spinners/react.md
index e2c492f1431..2bfa2eb4aa1 100644
--- a/static/usage/v7/loading/spinners/react.md
+++ b/static/usage/v7/loading/spinners/react.md
@@ -2,24 +2,11 @@
 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>
+    <>
+      <IonButton id="open-loading">Show Loading</IonButton>
+      <IonLoading trigger="open-loading" message="Loading..." duration={3000} spinner="circles" />
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/loading/spinners/vue.md b/static/usage/v7/loading/spinners/vue.md
index 4d01e7fc869..5e3b62759ad 100644
--- a/static/usage/v7/loading/spinners/vue.md
+++ b/static/usage/v7/loading/spinners/vue.md
@@ -1,27 +1,15 @@
 ```html
 <template>
-  <ion-button @click="showLoading">Show Loading</ion-button>
+  <ion-button id="open-loading">Show Loading</ion-button>
+  <ion-loading trigger="open-loading" message="Loading..." duration="3000" spinner="circles"></ion-loading>
 </template>
 
 <script lang="ts">
-  import { IonButton, loadingController } from '@ionic/vue';
+  import { IonButton, IonLoading } 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 }
-    }
+    components: { IonButton, IonLoading },
   });
 </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
index f4f3d701d2f..0696c7c4342 100644
--- a/static/usage/v7/loading/theming/angular/example_component_html.md
+++ b/static/usage/v7/loading/theming/angular/example_component_html.md
@@ -1,3 +1,4 @@
 ```html
-<ion-button (click)="showLoading()">Show Loading</ion-button>
+<ion-button id="open-loading">Show Loading</ion-button>
+<ion-loading class="custom-loading" trigger="open-loading" message="Loading..." [duration]="3000"></ion-loading>
 ```
diff --git a/static/usage/v7/loading/theming/angular/example_component_ts.md b/static/usage/v7/loading/theming/angular/example_component_ts.md
deleted file mode 100644
index 800335c91ad..00000000000
--- a/static/usage/v7/loading/theming/angular/example_component_ts.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```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/demo.html b/static/usage/v7/loading/theming/demo.html
index d901557c331..8e8a1daa3fe 100644
--- a/static/usage/v7/loading/theming/demo.html
+++ b/static/usage/v7/loading/theming/demo.html
@@ -7,10 +7,10 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
   <script type="module">
-    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/index.esm.js';
     window.loadingController = loadingController;
   </script>
   <style>
@@ -27,22 +27,11 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-button onclick="showLoading()">Show Loading</ion-button>
+        <ion-button id="open-loading">Show Loading</ion-button>
+        <ion-loading class="custom-loading" trigger="open-loading" message="Loading..." duration="3000"></ion-loading>
       </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
+</html>
diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.md
index 0a36d4cd6e5..f0a5a379593 100644
--- a/static/usage/v7/loading/theming/index.md
+++ b/static/usage/v7/loading/theming/index.md
@@ -8,7 +8,6 @@ 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
@@ -25,7 +24,6 @@ import angular_global_css from './angular/global_css.md';
     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,
       },
     },
diff --git a/static/usage/v7/loading/theming/javascript.md b/static/usage/v7/loading/theming/javascript.md
index 68e0943cd3d..4fcaf2ff32d 100644
--- a/static/usage/v7/loading/theming/javascript.md
+++ b/static/usage/v7/loading/theming/javascript.md
@@ -1,24 +1,13 @@
 ```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>
+<ion-button id="open-loading">Show Loading</ion-button>
+<ion-loading class="custom-loading" trigger="open-loading" message="Loading..." duration="3000"></ion-loading>
 
 <style>
-ion-loading.custom-loading {
-  --background: #e3edff;
-  --spinner-color: #1c6dff;
+  ion-loading.custom-loading {
+    --background: #e3edff;
+    --spinner-color: #1c6dff;
 
-  color: #1c6dff;
-}
+    color: #1c6dff;
+  }
 </style>
 ```
diff --git a/static/usage/v7/loading/theming/react.md b/static/usage/v7/loading/theming/react.md
deleted file mode 100644
index e2c492f1431..00000000000
--- a/static/usage/v7/loading/theming/react.md
+++ /dev/null
@@ -1,26 +0,0 @@
-```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_tsx.md b/static/usage/v7/loading/theming/react/main_tsx.md
index cc57cc1dce8..01a84ed7f30 100644
--- a/static/usage/v7/loading/theming/react/main_tsx.md
+++ b/static/usage/v7/loading/theming/react/main_tsx.md
@@ -1,28 +1,15 @@
 ```tsx
 import React from 'react';
-import { IonButton, useIonLoading } from '@ionic/react';
+import { IonButton, IonLoading } 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>
+    <>
+      <IonButton id="open-loading">Show Loading</IonButton>
+      <IonLoading className="custom-loading" trigger="open-loading" message="Loading" duration={3000} />
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/loading/theming/vue.md b/static/usage/v7/loading/theming/vue.md
index 6f380da3f1f..7f4538b7068 100644
--- a/static/usage/v7/loading/theming/vue.md
+++ b/static/usage/v7/loading/theming/vue.md
@@ -1,27 +1,15 @@
 ```html
 <template>
-  <ion-button @click="showLoading()">Show Loading</ion-button>
+  <ion-button id="open-loading">Show Loading</ion-button>
+  <ion-loading class="custom-loading" trigger="open-loading" message="Loading..." duration="3000"></ion-loading>
 </template>
 
 <script lang="ts">
-  import { IonButton, loadingController } from '@ionic/vue';
+  import { IonButton, IonLoading } 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 }
-    }
+    components: { IonButton, IonLoading },
   });
 </script>
 <style>

From 5a4381c5f0f977ad2a4a1702a65fe4cba3dbd82b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 9 Feb 2023 12:37:10 -0500
Subject: [PATCH 204/469] docs(many): use sidebar TOC (#2761)

---
 docs/api/route-redirect.md                    |  11 -
 docs/api/route.md                             |  11 -
 docs/api/router-outlet.md                     |  10 -
 docs/api/router.md                            |  11 -
 docs/api/tab-bar.md                           |  10 -
 docs/api/tab-button.md                        |  10 -
 docs/api/tab.md                               |  10 -
 scripts/api-ja.js                             |   8 -
 scripts/api-playground-init.js                | 283 ------------------
 .../version-v6/api/route-redirect.md          |  11 -
 versioned_docs/version-v6/api/route.md        |  10 -
 versioned_docs/version-v6/api/router-link.md  |   2 +-
 .../version-v6/api/router-outlet.md           |  10 -
 versioned_docs/version-v6/api/router.md       |  12 -
 versioned_docs/version-v6/api/slide.md        |  11 -
 versioned_docs/version-v6/api/tab-bar.md      |  10 -
 versioned_docs/version-v6/api/tab-button.md   |  10 -
 versioned_docs/version-v6/api/tab.md          |  10 -
 .../version-v6/api/virtual-scroll.md          |  10 -
 19 files changed, 1 insertion(+), 459 deletions(-)
 delete mode 100644 scripts/api-playground-init.js

diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index d17f3832133..ac4febd161d 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -19,15 +17,6 @@ import Slots from '@site/static/auto-generated/route-redirect/slots.md';
 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
diff --git a/docs/api/route.md b/docs/api/route.md
index 52e2e294a2a..91b607971e4 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -1,10 +1,8 @@
 ---
 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';
@@ -21,15 +19,6 @@ import Slots from '@site/static/auto-generated/route/slots.md';
 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
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md
index b2cf5a86936..c15289ab77b 100644
--- a/docs/api/router-outlet.md
+++ b/docs/api/router-outlet.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -17,14 +15,6 @@ 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.
 
diff --git a/docs/api/router.md b/docs/api/router.md
index df326aed58f..48b8b522e04 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -20,15 +18,6 @@ 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
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index 491a74b30d2..5cd9d97fe3d 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -1,10 +1,8 @@
 ---
 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';
@@ -22,14 +20,6 @@ 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).
 
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index d9410648161..0fb186e0773 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -1,10 +1,8 @@
 ---
 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';
@@ -19,14 +17,6 @@ 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).
 
diff --git a/docs/api/tab.md b/docs/api/tab.md
index aff18a4a825..899e3c6c484 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -20,14 +18,6 @@ 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.
 
diff --git a/scripts/api-ja.js b/scripts/api-ja.js
index 67bf053b3e6..fbf9001f67c 100644
--- a/scripts/api-ja.js
+++ b/scripts/api-ja.js
@@ -41,7 +41,6 @@ function writePage(page) {
 function renderFrontmatter({ tag }) {
   const frontmatter = {
     title: tag,
-    hide_table_of_contents: true,
   };
 
   const demoPath = `api/${tag.slice(4)}/index.html`;
@@ -73,16 +72,9 @@ function renderReadme({ readme, encapsulation }) {
 
   return `
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import TOCInline from '@theme/TOCInline';
 
 ${encapsulation !== 'none' ? `<EncapsulationPill type="${encapsulation}" />` : ''}
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
 
 ${addAdmonitions(rest)}
   `;
diff --git a/scripts/api-playground-init.js b/scripts/api-playground-init.js
deleted file mode 100644
index c979662dbfd..00000000000
--- a/scripts/api-playground-init.js
+++ /dev/null
@@ -1,283 +0,0 @@
-const fetch = require('node-fetch');
-const fs = require('fs');
-const path = require('path');
-const { api: apiOverrides } = require('./data/meta-override.json');
-const utils = require('./utils');
-
-const DEMOS_PATH = path.resolve('static/demos');
-let COMPONENT_LINK_REGEXP;
-
-/**
- * This script will mass generate all the docs for the Ionic Framework components.
- * It will parse the contents of the core.json file and generate a markdown file for each component.
- *
- * Contents that continue to be autogenerated (props, events, methods, parts, custom props, slots) will
- * be written as separate markdown files that that main component file will import.
- *
- * The component file will not be gitignored and will become the source of truth for README documentation
- * and playground usage examples.
- *
- * The auto generated files will be gitignored and continued to be generated from the published core.json.
- * The script to generate those files will be run from the `generate-markdown` command and will be a separate
- * script from this script.
- */
-
-(async function () {
-  const response = await fetch('https://unpkg.com/@ionic/docs/core.json');
-  const { components } = await response.json();
-
-  const names = components.map((component) => component.tag.slice(4));
-  // matches all relative markdown links to a component, e.g. (../button)
-  COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
-
-  components.forEach((comp) => {
-    const compTag = comp.tag.slice(4);
-    writePage(comp);
-    writeAutoGeneratedPage(compTag, 'props', renderProperties(comp));
-    writeAutoGeneratedPage(compTag, 'events', renderEvents(comp));
-    writeAutoGeneratedPage(compTag, 'methods', renderMethods(comp));
-    writeAutoGeneratedPage(compTag, 'parts', renderParts(comp));
-    writeAutoGeneratedPage(compTag, 'custom-props', renderCustomProps(comp));
-    writeAutoGeneratedPage(compTag, 'slots', renderSlots(comp));
-  });
-
-  console.log('Finished one-time migration of component docs');
-})();
-
-function writePage(page) {
-  let data = [renderFrontmatter(page), renderReadme(page), renderUsage(page), renderComponentApi()].join('');
-
-  // fix relative links, e.g. (../button) -> (button.md)
-  data = data.replace(COMPONENT_LINK_REGEXP, '($1.md$2)');
-
-  const dir = './docs/api';
-  const path = `${dir}/${page.tag.slice(4)}.md`;
-  fs.mkdirSync(dir, { recursive: true });
-  fs.writeFileSync(path, data, {});
-}
-
-function writeAutoGeneratedPage(componentTag, fileName, data) {
-  const dir = `./static/auto-generated/${componentTag}`;
-  const path = `${dir}/${fileName}.md`;
-  fs.mkdirSync(dir, { recursive: true });
-  fs.writeFileSync(path, data);
-}
-
-function renderFrontmatter({ tag }) {
-  const frontmatter = {
-    title: tag,
-    hide_table_of_contents: true,
-  };
-
-  const demoPath = `api/${tag.slice(4)}/index.html`;
-  if (fs.existsSync(path.join(DEMOS_PATH, demoPath))) {
-    frontmatter.demoUrl = `/docs/demos/${demoPath}`;
-    frontmatter.demoSourceUrl = `https://github.com/ionic-team/ionic-docs/tree/main/static/demos/${demoPath}`;
-  }
-
-  return `---
-${Object.entries(frontmatter)
-  .map(([key, value]) => `${key}: ${typeof value === 'string' ? `"${value.replace('"', '\\"')}"` : value}`)
-  .join('\n')}
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
-import Props from '@site/static/auto-generated/${tag.slice(4)}/props.md';
-import Events from '@site/static/auto-generated/${tag.slice(4)}/events.md';
-import Methods from '@site/static/auto-generated/${tag.slice(4)}/methods.md';
-import Parts from '@site/static/auto-generated/${tag.slice(4)}/parts.md';
-import CustomProps from '@site/static/auto-generated/${tag.slice(4)}/custom-props.md';
-import Slots from '@site/static/auto-generated/${tag.slice(4)}/slots.md';
-
-${utils.getHeadTag(apiOverrides[tag])}
-`;
-}
-
-function renderReadme({ readme, encapsulation }) {
-  const endIndex = readme.indexOf('\n');
-
-  const rest = readme.substring(endIndex);
-
-  const addAdmonitions = (text) =>
-    text.replace(/\n\n>/gm, '\n\n:::note').replace(/:::note(.*?)\n(#|\n|^)/gm, ':::note\n$1\n:::\n\n$2');
-
-  return `
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-${encapsulation !== 'none' ? `<EncapsulationPill type="${encapsulation}" />` : ''}
-
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-${addAdmonitions(rest)}
-
-`;
-}
-
-function renderComponentApi() {
-  return `
-<Props />
-<Events />
-<Methods />
-<Parts />
-<CustomProps />
-<Slots />`;
-}
-
-function renderUsage({ usage }) {
-  function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-  }
-
-  const keys = Object.keys(usage);
-
-  if (keys.length === 0) {
-    return '';
-  }
-
-  if (keys.length === 1) {
-    return `
-## Usage
-
-${usage[keys[0]]}
-`;
-  }
-
-  return `
-## Usage
-
-<Tabs groupId="framework" defaultValue="${keys[0]}" values={[${keys
-    .map((key) => `{ value: '${key}', label: '${capitalizeFirstLetter(key)}' }`)
-    .join(', ')}]}>
-${Object.entries(usage)
-  .map(
-    ([key, value]) => `
-<TabItem value="${key}">
-
-${value}
-
-</TabItem>
-`
-  )
-  .join('\n')}
-</Tabs>
-`;
-}
-
-function renderProperties({ props: properties }) {
-  if (properties.length === 0) {
-    return '';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-## Properties
-
-${properties
-  .map(
-    (prop) => `
-### ${prop.name}
-
-| | |
-| --- | --- |
-| **Description** | ${prop.docs.split('\n').join('<br />')} |
-| **Attribute** | \`${prop.attr}\` |
-| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
-| **Default** | \`${prop.default}\` |
-
-`
-  )
-  .join('\n')}
-`;
-}
-
-function renderEvents({ events }) {
-  if (events.length === 0) {
-    return '';
-  }
-
-  return `
-## Events
-
-| Name | Description |
-| --- | --- |
-${events.map((event) => `| \`${event.event}\` | ${event.docs} |`).join('\n')}
-
-`;
-}
-
-function renderMethods({ methods }) {
-  if (methods.length === 0) {
-    return '';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-## Methods
-
-${methods
-  .map(
-    (method) => `
-### ${method.name}
-
-| | |
-| --- | --- |
-| **Description** | ${method.docs.split('\n').join('<br />')} |
-| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
-`
-  )
-  .join('\n')}
-
-`;
-}
-
-function renderParts({ parts }) {
-  if (parts.length === 0) {
-    return '';
-  }
-
-  return `
-## CSS Shadow Parts
-
-| Name | Description |
-| --- | --- |
-${parts.map((prop) => `| \`${prop.name}\` | ${prop.docs} |`).join('\n')}
-
-`;
-}
-
-function renderCustomProps({ styles: customProps }) {
-  if (customProps.length === 0) {
-    return '';
-  }
-
-  return `
-## CSS Custom Properties
-
-| Name | Description |
-| --- | --- |
-${customProps.map((prop) => `| \`${prop.name}\` | ${prop.docs} |`).join('\n')}
-
-`;
-}
-
-function renderSlots({ slots }) {
-  if (slots.length === 0) {
-    return '';
-  }
-
-  return `
-## Slots
-
-| Name | Description |
-| --- | --- |
-${slots.map((slot) => `| \`${slot.name}\` | ${slot.docs} |`).join('\n')}
-
-`;
-}
diff --git a/versioned_docs/version-v6/api/route-redirect.md b/versioned_docs/version-v6/api/route-redirect.md
index d17f3832133..ac4febd161d 100644
--- a/versioned_docs/version-v6/api/route-redirect.md
+++ b/versioned_docs/version-v6/api/route-redirect.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -19,15 +17,6 @@ import Slots from '@site/static/auto-generated/route-redirect/slots.md';
 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
diff --git a/versioned_docs/version-v6/api/route.md b/versioned_docs/version-v6/api/route.md
index 52e2e294a2a..46803354c95 100644
--- a/versioned_docs/version-v6/api/route.md
+++ b/versioned_docs/version-v6/api/route.md
@@ -1,10 +1,8 @@
 ---
 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';
@@ -21,14 +19,6 @@ import Slots from '@site/static/auto-generated/route/slots.md';
 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.
 
diff --git a/versioned_docs/version-v6/api/router-link.md b/versioned_docs/version-v6/api/router-link.md
index ea95869eea0..dd87a4c9354 100644
--- a/versioned_docs/version-v6/api/router-link.md
+++ b/versioned_docs/version-v6/api/router-link.md
@@ -21,7 +21,7 @@ import Slots from '@site/static/auto-generated/router-link/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
-
+  
 <h2 className="table-of-contents__title">Contents</h2>
 
 <TOCInline
diff --git a/versioned_docs/version-v6/api/router-outlet.md b/versioned_docs/version-v6/api/router-outlet.md
index b2cf5a86936..c15289ab77b 100644
--- a/versioned_docs/version-v6/api/router-outlet.md
+++ b/versioned_docs/version-v6/api/router-outlet.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -17,14 +15,6 @@ 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.
 
diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.md
index 3a3ede58809..1f70135b7d2 100644
--- a/versioned_docs/version-v6/api/router.md
+++ b/versioned_docs/version-v6/api/router.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -19,16 +17,6 @@ import Slots from '@site/static/auto-generated/router/slots.md';
 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
diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.md
index 2a95e9eb3e8..6fb9aedacdf 100644
--- a/versioned_docs/version-v6/api/slide.md
+++ b/versioned_docs/version-v6/api/slide.md
@@ -1,8 +1,6 @@
 ---
 title: "ion-slide"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/slide/props.md';
 import Events from '@site/static/auto-generated/slide/events.md';
@@ -18,15 +16,6 @@ import Slots from '@site/static/auto-generated/slide/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
 :::note
 This component has been deprecated in favor of using Swiper.js directly. Please see the [Slides Documentation](./slides#migration) for a migration guide.
 :::
diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.md
index 491a74b30d2..5cd9d97fe3d 100644
--- a/versioned_docs/version-v6/api/tab-bar.md
+++ b/versioned_docs/version-v6/api/tab-bar.md
@@ -1,10 +1,8 @@
 ---
 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';
@@ -22,14 +20,6 @@ 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).
 
diff --git a/versioned_docs/version-v6/api/tab-button.md b/versioned_docs/version-v6/api/tab-button.md
index 4c6b7a26f3d..1ac51b3c34e 100644
--- a/versioned_docs/version-v6/api/tab-button.md
+++ b/versioned_docs/version-v6/api/tab-button.md
@@ -1,10 +1,8 @@
 ---
 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';
@@ -19,14 +17,6 @@ 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).
 
diff --git a/versioned_docs/version-v6/api/tab.md b/versioned_docs/version-v6/api/tab.md
index aff18a4a825..899e3c6c484 100644
--- a/versioned_docs/version-v6/api/tab.md
+++ b/versioned_docs/version-v6/api/tab.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -20,14 +18,6 @@ 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.
 
diff --git a/versioned_docs/version-v6/api/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.md
index d3339f3aa6f..84f85ac329f 100644
--- a/versioned_docs/version-v6/api/virtual-scroll.md
+++ b/versioned_docs/version-v6/api/virtual-scroll.md
@@ -1,8 +1,6 @@
 ---
 title: "ion-virtual-scroll"
-hide_table_of_contents: true
 ---
-import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/virtual-scroll/props.md';
 import Events from '@site/static/auto-generated/virtual-scroll/events.md';
@@ -19,14 +17,6 @@ import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 :::note
 This component has been deprecated in favor of using virtual scrolling libraries provided by each JavaScript Framework. See below for alternatives.
 :::

From 9c7006126c1ffff8365f818f6fc52fda76129e1b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 15 Feb 2023 08:51:18 -0500
Subject: [PATCH 205/469] docs(slides): note migration guide is for swiper 8
 (#2772)

---
 docs/angular/slides.md                      | 6 +++++-
 docs/react/slides.md                        | 7 ++++++-
 docs/vue/slides.md                          | 7 ++++++-
 versioned_docs/version-v6/angular/slides.md | 6 +++++-
 versioned_docs/version-v6/react/slides.md   | 6 +++++-
 versioned_docs/version-v6/vue/slides.md     | 6 +++++-
 6 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index 3fdc0dd24b7..746be513f1c 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -16,6 +16,10 @@ title: Slides
 
 :::
 
+:::note
+This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
+:::
+
 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
@@ -29,7 +33,7 @@ npm install @ionic/angular@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper
+npm install swiper@8
 ```
 
 Once that is done, we need to import the `SwiperModule` module. This should be done in your component's module file:
diff --git a/docs/react/slides.md b/docs/react/slides.md
index 8905ad74ead..158e9933fe7 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -16,6 +16,11 @@ title: Slides
 
 :::
 
+:::note
+This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
+:::
+
+
 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
@@ -29,7 +34,7 @@ npm install @ionic/react@latest @ionic/react-router@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper
+npm install swiper@8
 ```
 
 :::note
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 8c6b664532c..6cda1c938de 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -16,6 +16,11 @@ title: Slides
 
 :::
 
+:::note
+This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
+:::
+
+
 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
@@ -35,7 +40,7 @@ vue upgrade --next
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper
+npm install swiper@8
 ```
 
 ## Swiping with Style
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index b962766059a..872b5eaae92 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -10,6 +10,10 @@ title: Slides
   />
 </head>
 
+:::note
+This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
+:::
+
 We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Angular directly.
 
 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.
@@ -25,7 +29,7 @@ npm install @ionic/angular@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper
+npm install swiper@8
 ```
 
 Once that is done, we need to import the `SwiperModule` module. This should be done in your component's module file:
diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md
index c6569c907ec..19d2b709458 100644
--- a/versioned_docs/version-v6/react/slides.md
+++ b/versioned_docs/version-v6/react/slides.md
@@ -10,6 +10,10 @@ title: Slides
   />
 </head>
 
+:::note
+This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
+:::
+
 We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `IonSlides` component, but we now recommend that developers use Swiper for React directly.
 
 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.
@@ -25,7 +29,7 @@ npm install @ionic/react@latest @ionic/react-router@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper
+npm install swiper@8
 ```
 
 :::note
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index 697a33ca92a..a55ca6c04b4 100644
--- a/versioned_docs/version-v6/vue/slides.md
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -10,6 +10,10 @@ title: Slides
   />
 </head>
 
+:::note
+This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
+:::
+
 We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Vue directly.
 
 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.
@@ -31,7 +35,7 @@ vue upgrade --next
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper
+npm install swiper@8
 ```
 
 ## Swiping with Style

From 74e54ce79783069f8b310f0c1a37b3c745863329 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 15 Feb 2023 09:21:41 -0600
Subject: [PATCH 206/469] docs(select): fix typo in object values and multiple
 selection React code (#2774)

---
 .../v6/select/objects-as-values/multiple-selection/react.md     | 2 +-
 .../v7/select/objects-as-values/multiple-selection/react.md     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/react.md b/static/usage/v6/select/objects-as-values/multiple-selection/react.md
index e6485198a86..c60b9d2fa7e 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/react.md
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/react.md
@@ -58,7 +58,7 @@ function Example() {
         </IonSelect>
       </IonItem>
       <IonItem lines="none">
-        <IonLabel>Current food: {currentFood}</IonLabel>
+        <IonLabel>Current value: {currentFood}</IonLabel>
       </IonItem>
     </IonList>
   );
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
index 9b1738ea7fe..2ab4681fa91 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/react.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
@@ -59,7 +59,7 @@ function Example() {
         </IonSelect>
       </IonItem>
       <IonItem lines="none">
-        <IonLabel>Current food: {currentFood}</IonLabel>
+        <IonLabel>Current value: {currentFood}</IonLabel>
       </IonItem>
     </IonList>
   );

From 40ef2f59ee4b2090b58edad3397ee3612e591b4a Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 15 Feb 2023 11:42:17 -0500
Subject: [PATCH 207/469] docs(textarea): migration guide and v7 playgrounds
 (#2720)

---
 docs/api/textarea.md                          |  57 +++++
 .../stackblitz/v7/react/package-lock.json     |  14 ++
 static/code/stackblitz/v7/react/package.json  |   1 +
 static/usage/v7/input/clear/demo.html         |   9 +-
 static/usage/v7/input/counter/demo.html       |   3 +-
 static/usage/v7/input/helper-error/demo.html  |  10 +-
 static/usage/v7/textarea/basic/angular.md     |   9 +-
 static/usage/v7/textarea/basic/demo.html      |  11 +-
 static/usage/v7/textarea/basic/javascript.md  |   9 +-
 static/usage/v7/textarea/basic/react.md       |  11 +-
 static/usage/v7/textarea/basic/vue.md         |  13 +-
 .../counter/angular/example_component_html.md |  11 +
 .../counter/angular/example_component_ts.md   |  13 +
 static/usage/v7/textarea/counter/demo.html    |  41 ++++
 static/usage/v7/textarea/counter/index.md     |  25 ++
 .../usage/v7/textarea/counter/javascript.md   |  16 ++
 static/usage/v7/textarea/counter/react.md     |  21 ++
 static/usage/v7/textarea/counter/vue.md       |  27 +++
 static/usage/v7/textarea/fill/angular.md      |   7 +
 static/usage/v7/textarea/fill/demo.html       |  38 +++
 static/usage/v7/textarea/fill/index.md        |  14 ++
 static/usage/v7/textarea/fill/javascript.md   |  12 +
 static/usage/v7/textarea/fill/react.md        |  21 ++
 static/usage/v7/textarea/fill/vue.md          |  23 ++
 .../usage/v7/textarea/helper-error/angular.md |  11 +
 .../usage/v7/textarea/helper-error/demo.html  |  56 +++++
 .../usage/v7/textarea/helper-error/index.md   |  18 ++
 .../v7/textarea/helper-error/javascript.md    |  37 +++
 .../usage/v7/textarea/helper-error/react.md   |  49 ++++
 static/usage/v7/textarea/helper-error/vue.md  |  47 ++++
 .../v7/textarea/label-placement/angular.md    |  16 ++
 .../v7/textarea/label-placement/demo.html     |  43 ++++
 .../v7/textarea/label-placement/index.md      |  13 +
 .../v7/textarea/label-placement/javascript.md |  16 ++
 .../v7/textarea/label-placement/react.md      |  24 ++
 .../usage/v7/textarea/label-placement/vue.md  |  27 +++
 static/usage/v7/textarea/migration/index.md   | 224 ++++++++++++++++++
 static/usage/v7/toast/theming/demo.html       |   2 +-
 static/usage/v7/toggle/justify/demo.html      |  40 ++--
 static/usage/v7/toggle/list/demo.html         |  40 ++--
 40 files changed, 994 insertions(+), 85 deletions(-)
 create mode 100644 static/usage/v7/textarea/counter/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/counter/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/counter/demo.html
 create mode 100644 static/usage/v7/textarea/counter/index.md
 create mode 100644 static/usage/v7/textarea/counter/javascript.md
 create mode 100644 static/usage/v7/textarea/counter/react.md
 create mode 100644 static/usage/v7/textarea/counter/vue.md
 create mode 100644 static/usage/v7/textarea/fill/angular.md
 create mode 100644 static/usage/v7/textarea/fill/demo.html
 create mode 100644 static/usage/v7/textarea/fill/index.md
 create mode 100644 static/usage/v7/textarea/fill/javascript.md
 create mode 100644 static/usage/v7/textarea/fill/react.md
 create mode 100644 static/usage/v7/textarea/fill/vue.md
 create mode 100644 static/usage/v7/textarea/helper-error/angular.md
 create mode 100644 static/usage/v7/textarea/helper-error/demo.html
 create mode 100644 static/usage/v7/textarea/helper-error/index.md
 create mode 100644 static/usage/v7/textarea/helper-error/javascript.md
 create mode 100644 static/usage/v7/textarea/helper-error/react.md
 create mode 100644 static/usage/v7/textarea/helper-error/vue.md
 create mode 100644 static/usage/v7/textarea/label-placement/angular.md
 create mode 100644 static/usage/v7/textarea/label-placement/demo.html
 create mode 100644 static/usage/v7/textarea/label-placement/index.md
 create mode 100644 static/usage/v7/textarea/label-placement/javascript.md
 create mode 100644 static/usage/v7/textarea/label-placement/react.md
 create mode 100644 static/usage/v7/textarea/label-placement/vue.md
 create mode 100644 static/usage/v7/textarea/migration/index.md

diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 52b1c2b4888..bfd0e16d1f6 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -29,6 +29,40 @@ import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
 
 <BasicPlayground />
 
+## Label Placement
+
+Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+
+import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
+
+<LabelPlacement />
+
+## Filled Textareas
+
+Material Design offers filled styles for a textarea. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
+
+Since the `fill` styles visually defines the textarea container, textareas that use `fill` should not be used in `ion-item`.
+
+import Fill from '@site/static/usage/v7/textarea/fill/index.md';
+
+<Fill />
+
+## Helper & Error Text
+
+Helper and error text can be used inside of a textarea with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-textarea`. 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/v7/textarea/helper-error/index.md';
+
+<HelperError />
+
+## Textarea Counter
+
+The textarea counter is text that displays under a textarea to notify the user of how many characters have been entered out of the total that the textarea 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/v7/textarea/counter/index.md';
+
+<Counter />
+
 ## Autogrow
 
 When the `autoGrow` property is set to `true`, the textarea will grow and shrink based on its contents.
@@ -45,6 +79,29 @@ import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/
 
 <ClearOnEditPlayground />
 
+## Migrating from Legacy Textarea Syntax
+
+A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an textarea, resolves accessibility issues, and improves the developer experience.
+
+Developers can perform this migration one textarea at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+
+### Using the Modern Syntax
+
+Using the modern syntax involves three steps:
+
+1. Remove `ion-label` and use the `label` property on `ion-textarea` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-textarea`.
+2. Move textarea-specific properties from `ion-item` on to `ion-textarea`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
+3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-textarea` instead.
+
+import Migration from '@site/static/usage/v7/textarea/migration/index.md';
+
+<Migration />
+
+### Using the Legacy Syntax
+
+Ionic uses heuristics to detect if an app is using the modern textarea syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-textarea` to `true` to force that instance of the textarea to use the legacy syntax.
+
 ## Theming
 
 import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.md';
diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index 4af3f2ee029..42af39cf1ba 100644
--- a/static/code/stackblitz/v7/react/package-lock.json
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -15,6 +15,7 @@
         "@types/react-dom": "^18.0.4",
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
+        "clsx": "^1.2.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-router": "^5.2.0",
@@ -5270,6 +5271,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -20438,6 +20447,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index a6b85fc2d8b..e9de0f9e74c 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -10,6 +10,7 @@
     "@types/react-dom": "^18.0.4",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
+    "clsx": "^1.2.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router": "^5.2.0",
diff --git a/static/usage/v7/input/clear/demo.html b/static/usage/v7/input/clear/demo.html
index 8b8816ed3dd..59d730c0e5c 100644
--- a/static/usage/v7/input/clear/demo.html
+++ b/static/usage/v7/input/clear/demo.html
@@ -23,17 +23,20 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-input label="Input with clear button" label-placement="stacked" clear-input="true" placeholder="Enter text to see clear button" value="Default value">
+            <ion-input label="Input with clear button" label-placement="stacked" clear-input="true"
+              placeholder="Enter text to see clear button" value="Default value">
             </ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-input label="Input with clear on edit" label-placement="stacked" clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear">
+            <ion-input label="Input with clear on edit" label-placement="stacked" clear-on-edit="true"
+              placeholder="Enter text, leave the input, come back and type to clear">
             </ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-input label="Password input" label-placement="stacked" type="password" placeholder="Enter text, leave the input, come back and type to clear">
+            <ion-input label="Password input" label-placement="stacked" 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/counter/demo.html b/static/usage/v7/input/counter/demo.html
index a2d782d3e3d..33a28913204 100644
--- a/static/usage/v7/input/counter/demo.html
+++ b/static/usage/v7/input/counter/demo.html
@@ -26,7 +26,8 @@
       <div class="container">
         <ion-input label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-input>
 
-        <ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" counter="true" maxlength="20"></ion-input>
+        <ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" counter="true"
+          maxlength="20"></ion-input>
       </div>
     </ion-content>
   </ion-app>
diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
index a22a6be90a4..1a5bf5440d3 100644
--- a/static/usage/v7/input/helper-error/demo.html
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -20,14 +20,8 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-input
-          type="email"
-          fill="solid"
-          label="Email"
-          label-placement="floating"
-          helper-text="Enter a valid email"
-          error-text="Invalid email"
-        ></ion-input>
+        <ion-input type="email" fill="solid" label="Email" label-placement="floating" helper-text="Enter a valid email"
+          error-text="Invalid email"></ion-input>
       </div>
     </ion-content>
   </ion-app>
diff --git a/static/usage/v7/textarea/basic/angular.md b/static/usage/v7/textarea/basic/angular.md
index 82392c0f2bc..af32fc35b03 100644
--- a/static/usage/v7/textarea/basic/angular.md
+++ b/static/usage/v7/textarea/basic/angular.md
@@ -1,16 +1,13 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-label>Regular textarea</ion-label>
-    <ion-textarea placeholder="Type something here"></ion-textarea>
+    <ion-textarea label="Regular 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-textarea [readonly]="true" label="Readonly textarea" 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-textarea [disabled]="true" label="Disabled textarea" 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
index 54d2bee2efb..671ebe50aa8 100644
--- a/static/usage/v7/textarea/basic/demo.html
+++ b/static/usage/v7/textarea/basic/demo.html
@@ -23,16 +23,13 @@
       <div class="container">
         <ion-list>
           <ion-item>
-            <ion-label>Regular textarea</ion-label>
-            <ion-textarea placeholder="Type something here"></ion-textarea>
+            <ion-textarea label="Regular 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-textarea readonly="true" label="Readonly textarea" 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-textarea disabled="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
           </ion-item>
         </ion-list>
       </div>
@@ -40,4 +37,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/textarea/basic/javascript.md b/static/usage/v7/textarea/basic/javascript.md
index fc1bdf3b50f..5f953f721cb 100644
--- a/static/usage/v7/textarea/basic/javascript.md
+++ b/static/usage/v7/textarea/basic/javascript.md
@@ -1,16 +1,13 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-label>Regular textarea</ion-label>
-    <ion-textarea placeholder="Type something here"></ion-textarea>
+    <ion-textarea label="Regular 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-textarea readonly="true" label="Readonly textarea" 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-textarea disabled="true" label="Disabled textarea" 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
index 37c11aa5137..5d47cf710dd 100644
--- a/static/usage/v7/textarea/basic/react.md
+++ b/static/usage/v7/textarea/basic/react.md
@@ -1,20 +1,17 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList, IonTextarea } from '@ionic/react';
+import { IonItem, IonList, IonTextarea } from '@ionic/react';
 function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonLabel>Regular textarea</IonLabel>
-        <IonTextarea placeholder="Type something here"></IonTextarea>
+        <IonTextarea label="Regular textarea" placeholder="Type something here"></IonTextarea>
       </IonItem>
       <IonItem>
-        <IonLabel>Readonly textarea</IonLabel>
-        <IonTextarea readonly={true} placeholder="Can't edit this"></IonTextarea>
+        <IonTextarea readonly={true} label="Readonly textarea" placeholder="Can't edit this"></IonTextarea>
       </IonItem>
       <IonItem>
-        <IonLabel>Disabled textarea</IonLabel>
-        <IonTextarea disabled={true} placeholder="Can't type here"></IonTextarea>
+        <IonTextarea disabled={true} label="Disabled textarea" placeholder="Can't type here"></IonTextarea>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v7/textarea/basic/vue.md b/static/usage/v7/textarea/basic/vue.md
index df9f8873ade..8b5c3a00746 100644
--- a/static/usage/v7/textarea/basic/vue.md
+++ b/static/usage/v7/textarea/basic/vue.md
@@ -2,26 +2,23 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-label>Regular textarea</ion-label>
-      <ion-textarea placeholder="Type something here"></ion-textarea>
+      <ion-textarea label="Regular 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-textarea :readonly="true" label="Readonly textarea" 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-textarea :disabled="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
     </ion-item>
   </ion-list>
 </template>
 
 <script>
-  import { IonItem, IonLabel, IonList, IonTextarea } from '@ionic/vue';
+  import { IonItem, IonList, IonTextarea } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonTextarea },
+    components: { IonItem, IonList, IonTextarea },
   });
 </script>
 ```
diff --git a/static/usage/v7/textarea/counter/angular/example_component_html.md b/static/usage/v7/textarea/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..436babf6fa4
--- /dev/null
+++ b/static/usage/v7/textarea/counter/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-textarea label="Default counter" labelPlacement="floating" [counter]="true" maxlength="20"></ion-textarea>
+
+<ion-textarea
+  label="Custom Counter Format"
+  labelPlacement="floating"
+  [counter]="true"
+  maxlength="20"
+  [counterFormatter]="customCounterFormatter"
+></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/counter/angular/example_component_ts.md b/static/usage/v7/textarea/counter/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c08dc06fc2
--- /dev/null
+++ b/static/usage/v7/textarea/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/textarea/counter/demo.html b/static/usage/v7/textarea/counter/demo.html
new file mode 100644
index 00000000000..228b0c3494d
--- /dev/null
+++ b/static/usage/v7/textarea/counter/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>Textarea</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+
+      width: 300px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-textarea label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-textarea>
+
+        <ion-textarea id="custom-textarea" label="Custom Counter Format" label-placement="floating" counter="true"
+          maxlength="20"></ion-textarea>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+<script>
+  const customTextarea = document.querySelector('#custom-textarea');
+  customTextarea.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+</script>
+
+</html>
diff --git a/static/usage/v7/textarea/counter/index.md b/static/usage/v7/textarea/counter/index.md
new file mode 100644
index 00000000000..811a12a70ca
--- /dev/null
+++ b/static/usage/v7/textarea/counter/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/textarea/counter/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/textarea/counter/javascript.md b/static/usage/v7/textarea/counter/javascript.md
new file mode 100644
index 00000000000..179965c25b7
--- /dev/null
+++ b/static/usage/v7/textarea/counter/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-textarea label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-textarea>
+
+<ion-textarea
+  id="custom-textarea"
+  label="Custom Counter Format"
+  label-placement="floating"
+  counter="true"
+  maxlength="20"
+></ion-textarea>
+
+<script>
+  const customTextarea = document.querySelector('#custom-textarea');
+  customTextarea.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+</script>
+```
diff --git a/static/usage/v7/textarea/counter/react.md b/static/usage/v7/textarea/counter/react.md
new file mode 100644
index 00000000000..26ec835498e
--- /dev/null
+++ b/static/usage/v7/textarea/counter/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonTextarea label="Default counter" labelPlacement="floating" counter={true} maxlength={20}></IonTextarea>
+
+      <IonTextarea
+        label="Custom Counter Format"
+        labelPlacement="floating"
+        counter={true}
+        maxlength={20}
+        counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}
+      ></IonTextarea>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/counter/vue.md b/static/usage/v7/textarea/counter/vue.md
new file mode 100644
index 00000000000..aa45a84b5f6
--- /dev/null
+++ b/static/usage/v7/textarea/counter/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-textarea label="Default counter" label-placement="floating" :counter="true" maxlength="20"></ion-textarea>
+
+  <ion-textarea
+    label="Custom Counter Format"
+    label-placement="floating"
+    :counter="true"
+    maxlength="20"
+    :counter-formatter="customFormatter"
+  ></ion-textarea>
+</template>
+
+<script lang="ts">
+  import { IonTextarea } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTextarea },
+    methods: {
+      customFormatter(inputLength, maxLength) {
+        return `${maxLength - inputLength} characters remaining`;
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/fill/angular.md b/static/usage/v7/textarea/fill/angular.md
new file mode 100644
index 00000000000..38bcfa1067d
--- /dev/null
+++ b/static/usage/v7/textarea/fill/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-textarea label="Solid textarea" labelPlacement="floating" fill="solid" placeholder="Enter text"></ion-textarea>
+
+<br />
+
+<ion-textarea label="Outline textarea" labelPlacement="floating" fill="outline" placeholder="Enter text"></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/fill/demo.html b/static/usage/v7/textarea/fill/demo.html
new file mode 100644
index 00000000000..8e3024d9d12
--- /dev/null
+++ b/static/usage/v7/textarea/fill/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</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-flow: column;
+      justify-content: space-evenly;
+
+      width: 300px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-textarea label="Solid textarea" label-placement="floating" fill="solid"
+          placeholder="Enter text"></ion-textarea>
+
+        <ion-textarea label="Outline textarea" label-placement="floating" fill="outline"
+          placeholder="Enter text"></ion-textarea>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.md
new file mode 100644
index 00000000000..bfc5b54da5d
--- /dev/null
+++ b/static/usage/v7/textarea/fill/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"
+  size="250px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/textarea/fill/demo.html"
+  mode="md"
+/>
diff --git a/static/usage/v7/textarea/fill/javascript.md b/static/usage/v7/textarea/fill/javascript.md
new file mode 100644
index 00000000000..09102160aaa
--- /dev/null
+++ b/static/usage/v7/textarea/fill/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-textarea label="Solid textarea" label-placement="floating" fill="solid" placeholder="Enter text"></ion-textarea>
+
+<br />
+
+<ion-textarea
+  label="Outline textarea"
+  label-placement="floating"
+  fill="outline"
+  placeholder="Enter text"
+></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/fill/react.md b/static/usage/v7/textarea/fill/react.md
new file mode 100644
index 00000000000..8ddf44ca19f
--- /dev/null
+++ b/static/usage/v7/textarea/fill/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonTextarea label="Solid textarea" labelPlacement="floating" fill="solid" placeholder="Enter text"></IonTextarea>
+
+      <br />
+
+      <IonTextarea
+        label="Outline textarea"
+        labelPlacement="floating"
+        fill="outline"
+        placeholder="Enter text"
+      ></IonTextarea>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/fill/vue.md b/static/usage/v7/textarea/fill/vue.md
new file mode 100644
index 00000000000..24c0f1b1d54
--- /dev/null
+++ b/static/usage/v7/textarea/fill/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-textarea label="Solid textarea" label-placement="floating" fill="solid" placeholder="Enter text"></ion-textarea>
+
+  <br />
+
+  <ion-textarea
+    label="Outline textarea"
+    label-placement="floating"
+    fill="outline"
+    placeholder="Enter text"
+  ></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/helper-error/angular.md b/static/usage/v7/textarea/helper-error/angular.md
new file mode 100644
index 00000000000..3095fd27ead
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-textarea
+  fill="solid"
+  label="Email"
+  labelPlacement="floating"
+  helperText="Enter a valid email"
+  errorText="Invalid email"
+  ngModel
+  email
+></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/helper-error/demo.html b/static/usage/v7/textarea/helper-error/demo.html
new file mode 100644
index 00000000000..55e70b43c79
--- /dev/null
+++ b/static/usage/v7/textarea/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>Textarea</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <style>
+    .container ion-textarea {
+      width: 300px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-textarea fill="solid" label="Email" label-placement="floating" helper-text="Enter a valid email"
+          error-text="Invalid email"></ion-textarea>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const textarea = document.querySelector('ion-textarea');
+
+    textarea.addEventListener('ionInput', (ev) => validate(ev));
+    textarea.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;
+
+      textarea.classList.remove('ion-valid');
+      textarea.classList.remove('ion-invalid');
+
+      if (value === "") return;
+
+      validateEmail(value) ? textarea.classList.add('ion-valid') : textarea.classList.add('ion-invalid');
+    }
+
+    const markTouched = () => {
+      textarea.classList.add('ion-touched');
+    }
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.md
new file mode 100644
index 00000000000..5d4ca92e487
--- /dev/null
+++ b/static/usage/v7/textarea/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/textarea/helper-error/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v7/textarea/helper-error/javascript.md b/static/usage/v7/textarea/helper-error/javascript.md
new file mode 100644
index 00000000000..112fdca3a10
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/javascript.md
@@ -0,0 +1,37 @@
+```html
+<ion-textarea
+  fill="solid"
+  label="Email"
+  label-placement="floating"
+  helper-text="Enter a valid email"
+  error-text="Invalid email"
+></ion-textarea>
+
+<script>
+  const textarea = textarea.querySelector('ion-textarea');
+
+  textarea.addEventListener('ionInput', (ev) => validate(ev));
+  textarea.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;
+
+    textarea.classList.remove('ion-valid');
+    textarea.classList.remove('ion-invalid');
+
+    if (value === '') return;
+
+    validateEmail(value) ? textarea.classList.add('ion-valid') : input.classList.add('ion-invalid');
+  };
+
+  const markTouched = () => {
+    textarea.classList.add('ion-touched');
+  };
+</script>
+```
diff --git a/static/usage/v7/textarea/helper-error/react.md b/static/usage/v7/textarea/helper-error/react.md
new file mode 100644
index 00000000000..01d3207dc85
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React, { useState } from 'react';
+import { clsx } from 'clsx';
+
+import { IonTextarea } 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 HTMLTextAreaElement).value;
+
+    setIsValid(undefined);
+
+    if (value === '') return;
+
+    validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+  };
+
+  const markTouched = () => {
+    setIsTouched(true);
+  };
+
+  return (
+    <IonTextarea
+      className={clsx({
+        'ion-valid': isValid,
+        'ion-invalid': isValid === false,
+        'ion-touched': isTouched,
+      })}
+      fill="solid"
+      label="Email"
+      labelPlacement="floating"
+      helperText="Enter a valid email"
+      errorText="Invalid email"
+      onIonInput={(event) => validate(event)}
+      onIonBlur={() => markTouched()}
+    ></IonTextarea>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/helper-error/vue.md b/static/usage/v7/textarea/helper-error/vue.md
new file mode 100644
index 00000000000..f0fe51ebee8
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/vue.md
@@ -0,0 +1,47 @@
+```html
+<template>
+  <ion-textarea
+    ref="input"
+    fill="solid"
+    label="Email"
+    label-placement="floating"
+    helper-text="Enter a valid email"
+    error-text="Invalid email"
+    @ionInput="validate"
+    @ionBlur="markTouched"
+  ></ion-textarea>
+</template>
+
+<script lang="ts">
+  import { IonTextarea } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTextarea },
+    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.input.$el.classList.remove('ion-valid');
+        this.$refs.input.$el.classList.remove('ion-invalid');
+
+        if (value === '') return;
+
+        this.validateEmail(value)
+          ? this.$refs.input.$el.classList.add('ion-valid')
+          : this.$refs.input.$el.classList.add('ion-invalid');
+      },
+
+      markTouched() {
+        this.$refs.input.$el.classList.add('ion-touched');
+      },
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/label-placement/angular.md b/static/usage/v7/textarea/label-placement/angular.md
new file mode 100644
index 00000000000..ef14c919fb8
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/angular.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/label-placement/demo.html b/static/usage/v7/textarea/label-placement/demo.html
new file mode 100644
index 00000000000..eabbc9d388e
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/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</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+
+  <style>
+    ion-list {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-textarea label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-textarea label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-textarea label="Floating label" label-placement="floating" placeholder="Enter text"></ion-textarea>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/v7/textarea/label-placement/index.md b/static/usage/v7/textarea/label-placement/index.md
new file mode 100644
index 00000000000..8ced2454c74
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/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/textarea/label-placement/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/textarea/label-placement/javascript.md b/static/usage/v7/textarea/label-placement/javascript.md
new file mode 100644
index 00000000000..ce524931d10
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Floating label" label-placement="floating" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/label-placement/react.md b/static/usage/v7/textarea/label-placement/react.md
new file mode 100644
index 00000000000..cf2b06229cf
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonTextarea, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonTextarea label="Default label" placeholder="Enter text"></IonTextarea>
+      </IonItem>
+      <IonItem>
+        <IonTextarea label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></IonTextarea>
+      </IonItem>
+      <IonItem>
+        <IonTextarea label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></IonTextarea>
+      </IonItem>
+      <IonItem>
+        <IonTextarea label="Floating label" labelPlacement="floating" placeholder="Enter text"></IonTextarea>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/label-placement/vue.md b/static/usage/v7/textarea/label-placement/vue.md
new file mode 100644
index 00000000000..fa6bf5ec893
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
+    </ion-item>
+    <ion-item>
+      <ion-textarea label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-textarea>
+    </ion-item>
+    <ion-item>
+      <ion-textarea label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-textarea>
+    </ion-item>
+    <ion-item>
+      <ion-textarea label="Floating label" label-placement="floating" placeholder="Enter text"></ion-textarea>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonTextarea, IonItem, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTextarea, IonItem, IonList },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md
new file mode 100644
index 00000000000..28207956484
--- /dev/null
+++ b/static/usage/v7/textarea/migration/index.md
@@ -0,0 +1,224 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````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
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea></ion-textarea>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-textarea label="Label:" label-placement="floating"></ion-textarea>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea></ion-textarea>
+</ion-item>
+
+<!-- After -->
+
+<!-- Textareas using `fill` should not be placed in ion-item -->
+<ion-textarea fill="outline" shape="round" label="Label:" label-placement="floating"></ion-textarea>
+
+<!-- Textarea-specific features on ion-item -->
+
+<!-- Before -->
+<ion-item counter="true">
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea maxlength="100"></ion-textarea>
+  <div slot="helper">Enter text</div>
+  <div slot="error">Please enter text</div>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-textarea
+    label="Label:"
+    counter="true"
+    maxlength="100"
+    helper-text="Enter text"
+    error-text="Please enter text"
+  ></ion-textarea>
+</ion-item>
+```
+</TabItem>
+<TabItem value="angular">
+
+```html
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea></ion-textarea>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-textarea label="Label:" labelPlacement="floating"></ion-textarea>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea></ion-textarea>
+</ion-item>
+
+<!-- After -->
+
+<!-- Textareas using `fill` should not be placed in ion-item -->
+<ion-textarea fill="outline" shape="round" label="Label:" labelPlacement="floating"></ion-textarea>
+
+<!-- Textarea-specific features on ion-item -->
+
+<!-- Before -->
+<ion-item [counter]="true">
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea maxlength="100"></ion-textarea>
+  <div slot="helper">Enter text</div>
+  <div slot="error">Please enter text</div>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-textarea
+    label="Label:"
+    [counter]="true"
+    maxlength="100"
+    helperText="Enter text"
+    errorText="Please enter text"
+  ></ion-textarea>
+</ion-item>
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel position="floating">Label:</IonLabel>
+  <IonTextarea></IonTextarea>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonTextarea label="Label:" labelPlacement="floating"></IonTextarea>
+</IonItem>
+
+
+{/* Fill */}
+
+{/* Before */}
+<IonItem fill="outline" shape="round">
+  <IonLabel position="floating">Label:</IonLabel>
+  <IonTextarea></IonTextarea>
+</IonItem>
+
+{/* After */}
+
+{/* Textareas using `fill` should not be placed in IonItem */}
+<IonTextarea fill="outline" shape="round" label="Label:" labelPlacement="floating"></IonTextarea>
+
+{/* Textarea-specific features on IonItem */}
+
+{/* Before */}
+<IonItem counter={true}>
+  <IonLabel position="floating">Label:</IonLabel>
+  <IonTextarea maxlength="100"></IonTextarea>
+  <div slot="helper">Enter text</div>
+  <div slot="error">Please enter text</div>
+</IonItem>
+
+{/* After */}
+<IonItem>
+  <IonTextarea
+    label="Label:"
+    counter={true}
+    maxlength="100"
+    helperText="Enter text"
+    errorText="Please enter text"
+  ></IonTextarea>
+</IonItem>
+```
+</TabItem>
+<TabItem value="vue">
+
+```html
+<!-- Label and Label Position -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea></ion-textarea>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-textarea label="Label:" label-placement="floating"></ion-textarea>
+</ion-item>
+
+
+<!-- Fill -->
+
+<!-- Before -->
+<ion-item fill="outline" shape="round">
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea></ion-textarea>
+</ion-item>
+
+<!-- After -->
+
+<!-- Textareas using `fill` should not be placed in ion-item -->
+<ion-textarea fill="outline" shape="round" label="Label:" label-placement="floating"></ion-textarea>
+
+<!-- Textarea-specific features on ion-item -->
+
+<!-- Before -->
+<ion-item :counter="true">
+  <ion-label position="floating">Label:</ion-label>
+  <ion-textarea maxlength="100"></ion-textarea>
+  <div slot="helper">Enter text</div>
+  <div slot="error">Please enter text</div>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-textarea
+    label="Label:"
+    :counter="true"
+    maxlength="100"
+    helper-text="Enter text"
+    error-text="Please enter text"
+  ></ion-textarea>
+</ion-item>
+```
+</TabItem>
+</Tabs>
+````
diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html
index 84edd702e3a..b45b2e6a73c 100644
--- a/static/usage/v7/toast/theming/demo.html
+++ b/static/usage/v7/toast/theming/demo.html
@@ -52,7 +52,7 @@
         role: 'cancel'
       }
     ];
-    </script>
+  </script>
 </body>
 
 </html>
diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html
index f8876f9a437..6627099b6a5 100644
--- a/static/usage/v7/toggle/justify/demo.html
+++ b/static/usage/v7/toggle/justify/demo.html
@@ -16,23 +16,25 @@
     }
   </style>
 </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-list>
-            <ion-item>
-              <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
-            </ion-item>
-            <ion-item>
-              <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
-            </ion-item>
-            <ion-item>
-              <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
-            </ion-item>
-          </ion-list>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
 </html>
diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html
index af82a401834..d8362f2cb00 100644
--- a/static/usage/v7/toggle/list/demo.html
+++ b/static/usage/v7/toggle/list/demo.html
@@ -11,23 +11,25 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
 </head>
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-list>
-            <ion-item>
-              <ion-toggle>Receive Push Notifications</ion-toggle>
-            </ion-item>
-            <ion-item>
-              <ion-toggle>Receive Emails</ion-toggle>
-            </ion-item>
-            <ion-item>
-              <ion-toggle>Receive Text Messages</ion-toggle>
-            </ion-item>
-          </ion-list>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-toggle>Receive Push Notifications</ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-toggle>Receive Emails</ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-toggle>Receive Text Messages</ion-toggle>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
 </html>

From e369a875c5276393033a256f67cb00f37647dc49 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 16 Feb 2023 14:40:20 -0500
Subject: [PATCH 208/469] docs(toast): add layout demos (#2768)

---
 docs/api/toast.md                             |  9 ++-
 .../layout/angular/example_component_html.md  |  4 ++
 .../layout/angular/example_component_ts.md    | 41 ++++++++++++
 static/usage/v6/toast/layout/demo.html        | 62 +++++++++++++++++++
 static/usage/v6/toast/layout/index.md         | 24 +++++++
 static/usage/v6/toast/layout/javascript.md    | 33 ++++++++++
 static/usage/v6/toast/layout/react.md         | 41 ++++++++++++
 static/usage/v6/toast/layout/vue.md           | 46 ++++++++++++++
 .../layout/angular/example_component_html.md  | 17 +++++
 .../layout/angular/example_component_ts.md    | 15 +++++
 static/usage/v7/toast/layout/demo.html        | 42 +++++++++++++
 static/usage/v7/toast/layout/index.md         | 25 ++++++++
 static/usage/v7/toast/layout/javascript.md    | 18 ++++++
 static/usage/v7/toast/layout/react.md         | 35 +++++++++++
 static/usage/v7/toast/layout/vue.md           | 37 +++++++++++
 versioned_docs/version-v6/api/toast.md        |  8 +++
 16 files changed, 456 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/v6/toast/layout/angular/example_component_html.md
 create mode 100644 static/usage/v6/toast/layout/angular/example_component_ts.md
 create mode 100644 static/usage/v6/toast/layout/demo.html
 create mode 100644 static/usage/v6/toast/layout/index.md
 create mode 100644 static/usage/v6/toast/layout/javascript.md
 create mode 100644 static/usage/v6/toast/layout/react.md
 create mode 100644 static/usage/v6/toast/layout/vue.md
 create mode 100644 static/usage/v7/toast/layout/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/layout/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/layout/demo.html
 create mode 100644 static/usage/v7/toast/layout/index.md
 create mode 100644 static/usage/v7/toast/layout/javascript.md
 create mode 100644 static/usage/v7/toast/layout/react.md
 create mode 100644 static/usage/v7/toast/layout/vue.md

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 8d3c0ba3a4c..bf74e97cdd6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -55,12 +55,19 @@ The following example demonstrates how to use the `buttons` property to add a bu
 import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
 
 <ButtonsPlayground />
-  
 
 ## 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.
 
+## Layout
+
+Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+
+import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
+
+<StackedPlayground />
+
 ## 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.
diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..8bd086f7ba5
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-button (click)="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+<ion-button (click)="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..6e8c63a9b58
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+import type { ToastOptions } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+
+  constructor(private toastController: ToastController) {}
+  
+  async presentToast(opts: ToastOptions) {
+    const toast = await this.toastController.create(opts);
+  
+    await toast.present();
+  }
+  
+  async presentBaselineToast() {
+    await this.presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the same line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ]
+    });
+  }
+  
+  async presentStackedToast() {
+    await this.presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the next line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ],
+      layout: "stacked"
+    });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
new file mode 100644
index 00000000000..dbeb624b0fb
--- /dev/null
+++ b/static/usage/v6/toast/layout/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>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 class="ion-padding">
+      <ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+      <ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676303024.114a8ff3/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast(opts) {
+      const toast = await toastController.create(opts);
+
+      await toast.present();
+    }
+
+    async function presentBaselineToast() {
+      await presentToast({
+        duration: 3000,
+        message: "This is a toast with a long message and a button that appears on the same line.",
+        buttons: [
+          { text: 'Action With Long Text'}
+        ]
+      });
+    }
+
+    async function presentStackedToast() {
+      await presentToast({
+        duration: 3000,
+        message: "This is a toast with a long message and a button that appears on the next line.",
+        buttons: [
+          { text: 'Action With Long Text'}
+        ],
+        layout: "stacked"
+      });
+    }
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.md
new file mode 100644
index 00000000000..7f420b26af4
--- /dev/null
+++ b/static/usage/v6/toast/layout/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/layout/demo.html"
+/>
diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md
new file mode 100644
index 00000000000..2350799f7e1
--- /dev/null
+++ b/static/usage/v6/toast/layout/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+<ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+
+<script>
+  async function presentToast(opts) {
+    const toast = await toastController.create(opts);
+  
+    await toast.present();
+  }
+  
+  async function presentBaselineToast() {
+    await presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the same line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ]
+    });
+  }
+  
+  async function presentStackedToast() {
+    await presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the next line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ],
+      layout: "stacked"
+    });
+  }
+</script>
+```
diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md
new file mode 100644
index 00000000000..68813f1eb1f
--- /dev/null
+++ b/static/usage/v6/toast/layout/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+  const [presentToast] = useIonToast();
+
+  return (
+    <>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            duration: 3000,
+            message: "This is a toast with a long message and a button that appears on the next line.",
+            buttons: [
+              { text: 'Action With Long Text'}
+            ]
+          })
+        }}
+      >
+        Open Baseline Layout Toast
+      </IonButton>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            duration: 3000,
+            message: "This is a toast with a long message and a button that appears on the next line.",
+            buttons: [
+              { text: 'Action With Long Text'}
+            ],
+            layout: "stacked"
+          })
+        }}
+      >
+        Open Stacked Layout Toast
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
new file mode 100644
index 00000000000..5b884ea7caf
--- /dev/null
+++ b/static/usage/v6/toast/layout/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-button @click="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+  <ion-button @click="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+  import type { ToastOptions } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    setup() {
+      const presentToast = async (opts: ToastOptions) => {
+        const toast = await toastController.create(opts);
+      
+        await toast.present();
+      }
+      
+      const presentBaselineToast = async () => {
+        await presentToast({
+          duration: 3000,
+          message: "This is a toast with a long message and a button that appears on the same line.",
+          buttons: [
+            { text: 'Action With Long Text'}
+          ]
+        });
+      }
+      
+      const presentStackedToast = async () => {
+        await presentToast({
+          duration: 3000,
+          message: "This is a toast with a long message and a button that appears on the next line.",
+          buttons: [
+            { text: 'Action With Long Text'}
+          ],
+          layout: "stacked"
+        });
+      }
+      
+      return { presentBaselineToast, presentStackedToast }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..6f33423b8a5
--- /dev/null
+++ b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
+<ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
+<ion-toast 
+  trigger="open-inline-toast" 
+  [duration]="3000"
+  [buttons]="toastButtons"
+  message="This is a toast with a long message and a button that appears on the same line."
+></ion-toast>
+<ion-toast
+  trigger="open-stacked-toast" 
+  [duration]="3000"
+  [buttons]="toastButtons"
+  message="This is a toast with a long message and a button that appears on the next line." 
+  layout="stacked"
+></ion-toast>
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..4070a210849
--- /dev/null
+++ b/static/usage/v7/toast/layout/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 {
+  toastButtons = [
+    {
+      text: 'Action With Long Text',
+    }
+  ];
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
new file mode 100644
index 00000000000..86d2dedafb4
--- /dev/null
+++ b/static/usage/v7/toast/layout/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>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
+      <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
+      <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
+      <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const toasts = document.querySelectorAll('ion-toast');
+
+    toasts.forEach((toast) => {
+      toast.buttons = [
+        {
+          text: 'Action With Long Text',
+        },
+      ];
+    });
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.md
new file mode 100644
index 00000000000..26d799850e4
--- /dev/null
+++ b/static/usage/v7/toast/layout/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/layout/demo.html"
+/>
diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md
new file mode 100644
index 00000000000..1ac30c76931
--- /dev/null
+++ b/static/usage/v7/toast/layout/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
+<ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
+<ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
+<ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
+
+<script>
+  const toasts = document.querySelectorAll('ion-toast');
+  
+  toasts.forEach((toast) => {
+    toast.buttons = [
+      {
+        text: 'Action With Long Text',
+      },
+    ];
+  });
+</script>
+```
diff --git a/static/usage/v7/toast/layout/react.md b/static/usage/v7/toast/layout/react.md
new file mode 100644
index 00000000000..f760997bf69
--- /dev/null
+++ b/static/usage/v7/toast/layout/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton id="open-stacked-toast">Open Stacked Layout Toast</IonButton>
+      <IonButton id="open-inline-toast">Open Baseline Layout Toast</IonButton>
+      <IonToast
+        trigger="open-inline-toast"
+        message="This is a toast with a long message and a button that appears on the same line."
+        duration={3000}
+        buttons={[
+          {
+            text: 'Action With Long Text',
+          }
+        ]}
+      ></IonToast>
+      <IonToast
+        trigger="open-stacked-toast"
+        message="This is a toast with a long message and a button that appears on the next line."
+        duration={3000}
+        buttons={[
+          {
+            text: 'Action With Long Text',
+          }
+        ]}
+        layout="stacked"
+      ></IonToast>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
new file mode 100644
index 00000000000..bbd103574c3
--- /dev/null
+++ b/static/usage/v7/toast/layout/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
+  <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
+  <ion-toast 
+    trigger="open-inline-toast" 
+    :duration="3000"
+    :buttons="toastButtons"
+    message="This is a toast with a long message and a button that appears on the same line."
+  ></ion-toast>
+  <ion-toast
+    trigger="open-stacked-toast" 
+    :duration="3000"
+    :buttons="toastButtons"
+    message="This is a toast with a long message and a button that appears on the next line." 
+    layout="stacked"
+  ></ion-toast>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonToast } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonToast },
+    setup() {
+      const toastButtons = [
+        {
+          text: 'Action With Long Text'
+        }
+      ]
+
+      return toastButtons }
+    }
+  });
+</script>
+```
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
index de515e72bbb..b0915d8cf8c 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -99,6 +99,14 @@ import ButtonsPlayground from '@site/static/usage/v6/toast/buttons/index.md';
 
 <ButtonsPlayground />
 
+## Layout
+
+Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+
+import StackedPlayground from '@site/static/usage/v6/toast/layout/index.md';
+
+<StackedPlayground />
+
 ## 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.

From 100cdad9319a1cb0a66d4db58dc798aa83f67c86 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 16 Feb 2023 17:09:49 -0500
Subject: [PATCH 209/469] docs(support): update version support (#2776)

---
 versioned_docs/version-v6/reference/support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.md
index 98f9fa64046..ab44f4018bf 100644
--- a/versioned_docs/version-v6/reference/support.md
+++ b/versioned_docs/version-v6/reference/support.md
@@ -23,7 +23,7 @@ The current status of each Ionic Framework version is:
 | Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
 | :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
 |   V6    |      **Active**       | Dec 8, 2021  |       TBD        |        TBD        |
-|   V5    | Extended Support Only | Feb 11, 2020 |   June 8, 2022   |    Dec 8, 2022    |
+|   V5    |    End of Support     | 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    |

From ac6a90eb33d66fe2c92286311e60691a4c37c5e7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 17 Feb 2023 13:39:15 -0500
Subject: [PATCH 210/469] docs(select): add autocomplete recipe (#2704)

---
 docs/api/select.md                            |   8 +
 .../typeahead/angular/angular_types_ts.md     |   6 +
 .../select/typeahead/angular/app_module_ts.md |  19 ++
 .../angular/example_component_html.md         |  23 ++
 .../typeahead/angular/example_component_ts.md |  59 +++++
 .../angular/modal-example_component_html.md   |  29 +++
 .../angular/modal-example_component_ts.md     |  85 +++++++
 static/usage/v6/select/typeahead/demo.html    | 223 ++++++++++++++++++
 static/usage/v6/select/typeahead/index.md     |  51 ++++
 .../usage/v6/select/typeahead/javascript.md   | 208 ++++++++++++++++
 .../v6/select/typeahead/react/main_tsx.md     |  81 +++++++
 .../select/typeahead/react/react_types_ts.md  |   6 +
 .../react/typeahead_component_tsx.md          | 112 +++++++++
 .../v6/select/typeahead/vue/example_vue.md    |  83 +++++++
 .../typeahead/vue/typeahead_component_vue.md  | 122 ++++++++++
 .../v6/select/typeahead/vue/vue_types_ts.md   |   6 +
 .../typeahead/angular/angular_types_ts.md     |   6 +
 .../select/typeahead/angular/app_module_ts.md |  19 ++
 .../angular/example_component_html.md         |  23 ++
 .../typeahead/angular/example_component_ts.md |  59 +++++
 .../angular/modal-example_component_html.md   |  29 +++
 .../angular/modal-example_component_ts.md     |  85 +++++++
 static/usage/v7/select/typeahead/demo.html    | 223 ++++++++++++++++++
 static/usage/v7/select/typeahead/index.md     |  51 ++++
 .../usage/v7/select/typeahead/javascript.md   | 208 ++++++++++++++++
 .../v7/select/typeahead/react/main_tsx.md     |  81 +++++++
 .../select/typeahead/react/react_types_ts.md  |   6 +
 .../react/typeahead_component_tsx.md          | 112 +++++++++
 .../v7/select/typeahead/vue/example_vue.md    |  83 +++++++
 .../typeahead/vue/typeahead_component_vue.md  | 122 ++++++++++
 .../v7/select/typeahead/vue/vue_types_ts.md   |   6 +
 versioned_docs/version-v6/api/select.md       |   8 +
 32 files changed, 2242 insertions(+)
 create mode 100644 static/usage/v6/select/typeahead/angular/angular_types_ts.md
 create mode 100644 static/usage/v6/select/typeahead/angular/app_module_ts.md
 create mode 100644 static/usage/v6/select/typeahead/angular/example_component_html.md
 create mode 100644 static/usage/v6/select/typeahead/angular/example_component_ts.md
 create mode 100644 static/usage/v6/select/typeahead/angular/modal-example_component_html.md
 create mode 100644 static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
 create mode 100644 static/usage/v6/select/typeahead/demo.html
 create mode 100644 static/usage/v6/select/typeahead/index.md
 create mode 100644 static/usage/v6/select/typeahead/javascript.md
 create mode 100644 static/usage/v6/select/typeahead/react/main_tsx.md
 create mode 100644 static/usage/v6/select/typeahead/react/react_types_ts.md
 create mode 100644 static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
 create mode 100644 static/usage/v6/select/typeahead/vue/example_vue.md
 create mode 100644 static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
 create mode 100644 static/usage/v6/select/typeahead/vue/vue_types_ts.md
 create mode 100644 static/usage/v7/select/typeahead/angular/angular_types_ts.md
 create mode 100644 static/usage/v7/select/typeahead/angular/app_module_ts.md
 create mode 100644 static/usage/v7/select/typeahead/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/typeahead/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/typeahead/angular/modal-example_component_html.md
 create mode 100644 static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
 create mode 100644 static/usage/v7/select/typeahead/demo.html
 create mode 100644 static/usage/v7/select/typeahead/index.md
 create mode 100644 static/usage/v7/select/typeahead/javascript.md
 create mode 100644 static/usage/v7/select/typeahead/react/main_tsx.md
 create mode 100644 static/usage/v7/select/typeahead/react/react_types_ts.md
 create mode 100644 static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
 create mode 100644 static/usage/v7/select/typeahead/vue/example_vue.md
 create mode 100644 static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
 create mode 100644 static/usage/v7/select/typeahead/vue/vue_types_ts.md

diff --git a/docs/api/select.md b/docs/api/select.md
index 8f2036af923..b632d936751 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -157,6 +157,14 @@ Customizing the interface dialog should be done by following the Customization s
 
 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.
 
+## Typeahead Component
+
+Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
+
+import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
+
+<TypeaheadExample />
+
 ## Interfaces
 
 ### SelectChangeEventDetail
diff --git a/static/usage/v6/select/typeahead/angular/angular_types_ts.md b/static/usage/v6/select/typeahead/angular/angular_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/angular_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+  text: string;
+  value: string;
+};
+```
diff --git a/static/usage/v6/select/typeahead/angular/app_module_ts.md b/static/usage/v6/select/typeahead/angular/app_module_ts.md
new file mode 100644
index 00000000000..0fa58037717
--- /dev/null
+++ b/static/usage/v6/select/typeahead/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 { TypeaheadComponent } from './typeahead.component';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/select/typeahead/angular/example_component_html.md b/static/usage/v6/select/typeahead/angular/example_component_html.md
new file mode 100644
index 00000000000..3c702c08d67
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-content color="light">
+  <ion-list [inset]="true">
+    <ion-item [button]="true" [detail]="false" id="select-fruits">
+      <ion-label>Favorite Fruits</ion-label>
+      <div slot="end" id="selected-fruits">{{ selectedFruitsText }}</div>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+<ion-modal trigger="select-fruits" #modal>
+  <ng-template>
+    <app-typeahead
+      class="ion-page"
+      title="Favorite Fruits"
+      [items]="fruits"
+      [selectedItems]="selectedFruits"
+      (selectionChange)="fruitSelectionChanged($event)"
+      (selectionCancel)="modal.dismiss()"
+    ></app-typeahead>
+  </ng-template>
+</ion-modal>
+```
\ No newline at end of file
diff --git a/static/usage/v6/select/typeahead/angular/example_component_ts.md b/static/usage/v6/select/typeahead/angular/example_component_ts.md
new file mode 100644
index 00000000000..ee7f5e29305
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/example_component_ts.md
@@ -0,0 +1,59 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { Item } from './types'; 
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('modal', { static: true }) modal!: IonModal;
+  
+  selectedFruitsText = '0 Items';
+  selectedFruits: string[] = [];
+  
+  fruits: Item[] = [
+    { text: 'Apple', value: 'apple' },
+    { text: 'Apricot', value: 'apricot' },
+    { text: 'Banana', value: 'banana' },
+    { text: 'Blackberry', value: 'blackberry' },
+    { text: 'Blueberry', value: 'blueberry' },
+    { text: 'Cherry', value: 'cherry' },
+    { text: 'Cranberry', value: 'cranberry' },
+    { text: 'Grape', value: 'grape' },
+    { text: 'Grapefruit', value: 'grapefruit' },
+    { text: 'Guava', value: 'guava' },
+    { text: 'Jackfruit', value: 'jackfruit' },
+    { text: 'Lime', value: 'lime' },
+    { text: 'Mango', value: 'mango' },
+    { text: 'Nectarine', value: 'nectarine' },
+    { text: 'Orange', value: 'orange' },
+    { text: 'Papaya', value: 'papaya' },
+    { text: 'Passionfruit', value: 'passionfruit' },
+    { text: 'Peach', value: 'peach' },
+    { text: 'Pear', value: 'pear' },
+    { text: 'Plantain', value: 'plantain' },
+    { text: 'Plum', value: 'plum' },
+    { text: 'Pineapple', value: 'pineapple' },
+    { text: 'Pomegranate', value: 'pomegranate' },
+    { text: 'Raspberry', value: 'raspberry' },
+    { text: 'Strawberry', value: 'strawberry' }
+  ];
+  
+  private formatData(data: string[]) {
+    if (data.length === 1) {
+      const fruit = this.fruits.find(fruit => fruit.value === data[0])
+      return fruit.text;
+    }
+  
+    return `${data.length} items`;
+  }
+  
+  fruitSelectionChanged(fruits: string[]) {
+    this.selectedFruits = fruits;
+    this.selectedFruitsText = this.formatData(this.selectedFruits);
+    this.modal.dismiss();
+  }
+}
+```
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_html.md b/static/usage/v6/select/typeahead/angular/modal-example_component_html.md
new file mode 100644
index 00000000000..ed5fc081852
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_html.md
@@ -0,0 +1,29 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="cancelChanges()">Cancel</ion-button>
+    </ion-buttons>
+    <ion-title>{{ title }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="confirmChanges()">Done</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar (ionInput)="searchbarInput($event)"></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content color="light" class="ion-padding">
+  <ion-list id="modal-list" [inset]="true">
+    <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
+      <ion-label>{{ item.text }}</ion-label>
+      <ion-checkbox
+        [value]="item.value" 
+        [checked]="isChecked(item.value)"
+        (ionChange)="checkboxChange($event)"
+      ></ion-checkbox>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
new file mode 100644
index 00000000000..e1b536e723e
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
@@ -0,0 +1,85 @@
+```ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import type { OnInit } from '@angular/core';
+import { Item } from './types';
+
+@Component({
+  selector: 'app-typeahead',
+  templateUrl: 'typeahead.component.html',
+})
+export class TypeaheadComponent implements OnInit {
+  @Input() items: Item[] = [];
+  @Input() selectedItems: string[] = [];
+  @Input() title = 'Select Items';
+
+  @Output() selectionCancel = new EventEmitter<void>();
+  @Output() selectionChange = new EventEmitter<string[]>();
+  
+  filteredItems: Item[] = [];
+  workingSelectedValues: string[] = [];
+  
+  ngOnInit() {
+    this.filteredItems = [...this.items];
+    this.workingSelectedValues = [...this.selectedItems];
+  }
+  
+  trackItems(index: number, item: Item) {
+    return item.value;
+  }
+  
+  cancelChanges() {
+    this.selectionCancel.emit();
+  }
+  
+  confirmChanges() {
+    this.selectionChange.emit(this.workingSelectedValues);
+  }
+  
+  searchbarInput(ev) {
+    this.filterList(ev.target.value);
+  }
+  
+  /**
+   * Update the rendered view with
+   * the provided search query. If no
+   * query is provided, all data
+   * will be rendered.
+   */
+  filterList(searchQuery: string | undefined) {
+    /**
+     * If no search query is defined,
+     * return all options.
+     */
+    if (searchQuery === undefined) {
+      this.filteredItems = [...this.items];
+    } else {
+      /**
+       * Otherwise, normalize the search
+       * query and check to see which items
+       * contain the search query as a substring.
+       */
+      const normalizedQuery = searchQuery.toLowerCase(); 
+      this.filteredItems = this.items.filter(item => {
+        return item.value.includes(normalizedQuery);
+      });
+    }
+  }
+
+  isChecked(value: string) {
+    return this.workingSelectedValues.find(item => item === value);
+  }
+  
+  checkboxChange(ev) {
+    const { checked, value } = ev.detail;
+    
+    if (checked) {
+      this.workingSelectedValues = [
+        ...this.workingSelectedValues,
+        value
+      ]
+    } else {
+      this.workingSelectedValues = this.workingSelectedValues.filter(item => item !== value);
+    }
+  }
+}
+```
diff --git a/static/usage/v6/select/typeahead/demo.html b/static/usage/v6/select/typeahead/demo.html
new file mode 100644
index 00000000000..2f7410fb810
--- /dev/null
+++ b/static/usage/v6/select/typeahead/demo.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>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" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content color="light">
+        <div class="container">
+          <ion-list inset="true">
+            <ion-item button="true" detail="false" id="select-fruits">
+              <ion-label>Favorite Fruits</ion-label>
+              <div slot="end" id="selected-fruits">0 Items</div>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+
+      <ion-modal trigger="select-fruits">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button onclick="cancelChanges()">Cancel</ion-button>
+            </ion-buttons>
+            <ion-title>Favorite Fruits</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="confirmChanges()">Done</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content color="light" class="ion-padding">
+          <ion-list id="modal-list" inset="true">
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-app>
+
+    <script>
+      const list = document.querySelector('ion-list#modal-list');
+      const modal = document.querySelector('ion-modal');
+      const searchbar = document.querySelector('ion-searchbar');
+      const selectedFruitsText = document.querySelector('#selected-fruits');
+      const fruits = [
+        { text: 'Apple', value: 'apple' },
+        { text: 'Apricot', value: 'apricot' },
+        { text: 'Banana', value: 'banana' },
+        { text: 'Blackberry', value: 'blackberry' },
+        { text: 'Blueberry', value: 'blueberry' },
+        { text: 'Cherry', value: 'cherry' },
+        { text: 'Cranberry', value: 'cranberry' },
+        { text: 'Grape', value: 'grape' },
+        { text: 'Grapefruit', value: 'grapefruit' },
+        { text: 'Guava', value: 'guava' },
+        { text: 'Jackfruit', value: 'jackfruit' },
+        { text: 'Lime', value: 'lime' },
+        { text: 'Mango', value: 'mango' },
+        { text: 'Nectarine', value: 'nectarine' },
+        { text: 'Orange', value: 'orange' },
+        { text: 'Papaya', value: 'papaya' },
+        { text: 'Passionfruit', value: 'passionfruit' },
+        { text: 'Peach', value: 'peach' },
+        { text: 'Pear', value: 'pear' },
+        { text: 'Plantain', value: 'plantain' },
+        { text: 'Plum', value: 'plum' },
+        { text: 'Pineapple', value: 'pineapple' },
+        { text: 'Pomegranate', value: 'pomegranate' },
+        { text: 'Raspberry', value: 'raspberry' },
+        { text: 'Strawberry', value: 'strawberry' }
+      ];
+
+      /**
+       * This is the confirmed
+       * list of selected fruits. It
+       * is only updated once the "Done"
+       * button is pressed in the modal.
+       */
+      var selectedFruits = [];
+
+      /**
+       * This is the working list of
+       * selected fruits. It tracks any
+       * uncommitted changes that the user
+       * makes in the modal. If the user pressed
+       * the "Cancel" button then this is
+       * reset to the value of the confirmed
+       * selected fruits.
+       */
+      var workingSelectedFruits = [];
+
+      /**
+       * Filter the list of fruits base
+       * on the search query. If no query
+       * is provided then the entire list
+       * will be returned.
+       */
+      const filterList = (searchQuery = undefined) => {
+        if (searchQuery === undefined) return fruits;
+
+        const normalizedQuery = searchQuery.toLowerCase();
+
+        return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+      }
+
+      /**
+       * Render a filtered list of fruits
+       * inside of the modal based on the
+       * search query.
+       */
+      const renderList = (searchQuery = undefined) => {
+        const data = filterList(searchQuery);
+        let template = '';
+
+        data.forEach((item, index) => {
+          const checked = workingSelectedFruits.includes(item.value);
+          template += `
+            <ion-item>
+              <ion-label>${item.text}</ion-label>
+              <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
+            </ion-item>
+          `
+        });
+
+        list.innerHTML = template;
+      }
+
+      /**
+       * Formats the selected fruits in
+       * an easier to read way. If only
+       * 1 fruit is selected, then the
+       * fruit name will be rendered.
+       * Otherwise the number of fruits
+       * selected will be rendered.
+       */
+      const formatData = (data) => {
+        if (data.length === 1) {
+          const fruit = fruits.find(fruit => fruit.value === data[0])
+          return fruit.text;
+        }
+
+        return `${data.length} items`;
+      }
+
+      /**
+       * Reset any working changes
+       * and dismiss the modal.
+       */
+      const cancelChanges = () => {
+        workingSelectedFruits = [...selectedFruits];
+        modal.dismiss(undefined, 'cancel');
+      }
+
+      /**
+       * Return the selected
+       * fruits to the parent page.
+       */
+      const confirmChanges = () => {
+        selectedFruits = [...workingSelectedFruits];
+        modal.dismiss(selectedFruits)
+      };
+
+      // Listen for all ionChange events from the checkbox
+      modal.addEventListener('ionChange', (ev) => {
+        if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+
+        const { checked, value } = ev.detail;
+
+        if (checked) {
+          workingSelectedFruits = [
+            ...workingSelectedFruits,
+            value
+          ]
+        } else {
+          workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+        }
+      });
+
+      /**
+       * As users type into the searchbar
+       * we need to update the view with
+       * the filtered list.
+       */
+      searchbar.addEventListener('ionInput', (ev) => {
+        renderList(ev.target.value);
+      });
+
+      /**
+       * When the modal is about to dismiss
+       * update the parent page with the
+       * selected fruits.
+       */
+      modal.addEventListener('ionModalWillDismiss', (ev) => {
+        const { data } = ev.detail;
+
+        if (data === undefined) return;
+
+        const selectedText = formatData(data);
+
+        selectedFruitsText.innerText = selectedText;
+      });
+
+      /**
+       * When the modal has completed we need to
+       * reset the filtered state of the list.
+       */
+      modal.addEventListener('ionModalDidDismiss', (ev) => {
+        searchbar.value = undefined;
+        renderList();
+      });
+
+      renderList();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/select/typeahead/index.md b/static/usage/v6/select/typeahead/index.md
new file mode 100644
index 00000000000..3eb44196348
--- /dev/null
+++ b/static/usage/v6/select/typeahead/index.md
@@ -0,0 +1,51 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_types_ts from './react/react_types_ts.md';
+import typeahead_component_tsx from './react/typeahead_component_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_types_ts from './vue/vue_types_ts.md';
+import vue_typeahead_component from './vue/typeahead_component_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';
+import angular_types_ts from './angular/angular_types_ts.md';
+
+<Playground
+  code={{ 
+    javascript, 
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/types.ts': react_types_ts,
+        'src/AppTypeahead.tsx': typeahead_component_tsx
+      }
+    }, 
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/types.ts': vue_types_ts,
+        'src/components/AppTypeahead.vue': vue_typeahead_component
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/typeahead.component.html': angular_modal_example_component_html,
+        'src/app/typeahead.component.ts': angular_modal_example_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/types.ts': angular_types_ts
+      },
+    }, 
+  }}
+  src="usage/v6/select/typeahead/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
\ No newline at end of file
diff --git a/static/usage/v6/select/typeahead/javascript.md b/static/usage/v6/select/typeahead/javascript.md
new file mode 100644
index 00000000000..247c8ed10f2
--- /dev/null
+++ b/static/usage/v6/select/typeahead/javascript.md
@@ -0,0 +1,208 @@
+```html
+<ion-content color="light">
+  <div class="container">
+    <ion-list inset="true">
+      <ion-item button="true" detail="false" id="select-fruits">
+        <ion-label>Favorite Fruits</ion-label>
+        <div slot="end" id="selected-fruits">0 Items</div>
+      </ion-item>
+    </ion-list>
+  </div>
+</ion-content>
+
+<ion-modal trigger="select-fruits">
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button onclick="cancelChanges()">Cancel</ion-button>
+      </ion-buttons>
+      <ion-title>Favorite Fruits</ion-title>
+      <ion-buttons slot="end">
+        <ion-button onclick="confirmChanges()">Done</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar></ion-searchbar>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content color="light" class="ion-padding">
+    <ion-list id="modal-list" inset="true">
+    </ion-list>
+  </ion-content>
+</ion-modal>
+
+<script>
+  const list = document.querySelector('ion-list#modal-list');
+  const modal = document.querySelector('ion-modal');
+  const searchbar = document.querySelector('ion-searchbar');
+  const selectedFruitsText = document.querySelector('#selected-fruits');
+  const fruits = [
+    { text: 'Apple', value: 'apple' },
+    { text: 'Apricot', value: 'apricot' },
+    { text: 'Banana', value: 'banana' },
+    { text: 'Blackberry', value: 'blackberry' },
+    { text: 'Blueberry', value: 'blueberry' },
+    { text: 'Cherry', value: 'cherry' },
+    { text: 'Cranberry', value: 'cranberry' },
+    { text: 'Grape', value: 'grape' },
+    { text: 'Grapefruit', value: 'grapefruit' },
+    { text: 'Guava', value: 'guava' },
+    { text: 'Jackfruit', value: 'jackfruit' },
+    { text: 'Lime', value: 'lime' },
+    { text: 'Mango', value: 'mango' },
+    { text: 'Nectarine', value: 'nectarine' },
+    { text: 'Orange', value: 'orange' },
+    { text: 'Papaya', value: 'papaya' },
+    { text: 'Passionfruit', value: 'passionfruit' },
+    { text: 'Peach', value: 'peach' },
+    { text: 'Pear', value: 'pear' },
+    { text: 'Plantain', value: 'plantain' },
+    { text: 'Plum', value: 'plum' },
+    { text: 'Pineapple', value: 'pineapple' },
+    { text: 'Pomegranate', value: 'pomegranate' },
+    { text: 'Raspberry', value: 'raspberry' },
+    { text: 'Strawberry', value: 'strawberry' }
+  ];
+
+  /**
+   * This is the confirmed
+   * list of selected fruits. It
+   * is only updated once the "Done"
+   * button is pressed in the modal.
+   */
+  var selectedFruits = [];
+
+  /**
+   * This is the working list of
+   * selected fruits. It tracks any
+   * uncommitted changes that the user
+   * makes in the modal. If the user pressed
+   * the "Cancel" button then this is
+   * reset to the value of the confirmed
+   * selected fruits.
+   */
+  var workingSelectedFruits = [];
+
+  /**
+   * Filter the list of fruits base
+   * on the search query. If no query
+   * is provided then the entire list
+   * will be returned.
+   */
+  function filterList(searchQuery = undefined) {
+    if (searchQuery === undefined) return fruits;
+
+    const normalizedQuery = searchQuery.toLowerCase();
+
+    return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+  }
+
+  /**
+   * Render a filtered list of fruits
+   * inside of the modal based on the
+   * search query.
+   */
+  function renderList(searchQuery = undefined) {
+    const data = filterList(searchQuery);
+    let template = '';
+
+    data.forEach((item, index) => {
+      const checked = workingSelectedFruits.includes(item.value);
+      template += `
+        <ion-item>
+          <ion-label>${item.text}</ion-label>
+          <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
+        </ion-item>
+      `
+    });
+
+    list.innerHTML = template;
+  }
+
+  /**
+   * Formats the selected fruits in
+   * an easier to read way. If only
+   * 1 fruit is selected, then the
+   * fruit name will be rendered.
+   * Otherwise the number of fruits
+   * selected will be rendered.
+   */
+  function formatData(data) {
+    if (data.length === 1) {
+      const fruit = fruits.find(fruit => fruit.value === data[0])
+      return fruit.text;
+    }
+
+    return `${data.length} items`;
+  }
+
+  /**
+   * Reset any working changes
+   * and dismiss the modal.
+   */
+  function cancelChanges() {
+    workingSelectedFruits = [...selectedFruits];
+    modal.dismiss(undefined, 'cancel');
+  }
+
+  /**
+   * Return the selected
+   * fruits to the parent page.
+   */
+  function confirmChanges() {
+    selectedFruits = [...workingSelectedFruits];
+    modal.dismiss(selectedFruits)
+  };
+
+  // Listen for all ionChange events from the checkbox
+  modal.addEventListener('ionChange', (ev) => {
+    if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+
+    const { checked, value } = ev.detail;
+
+    if (checked) {
+      workingSelectedFruits = [
+        ...workingSelectedFruits,
+        value
+      ]
+    } else {
+      workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+    }
+  });
+
+  /**
+   * As users type into the searchbar
+   * we need to update the view with
+   * the filtered list.
+   */
+  searchbar.addEventListener('ionInput', (ev) => {
+    renderList(ev.target.value);
+  });
+
+  /**
+   * When the modal is about to dismiss
+   * update the parent page with the
+   * selected fruits.
+   */
+  modal.addEventListener('ionModalWillDismiss', (ev) => {
+    const { data } = ev.detail;
+
+    if (data === undefined) return;
+
+    const selectedText = formatData(data);
+
+    selectedFruitsText.innerText = selectedText;
+  });
+
+  /**
+   * When the modal has completed we need to
+   * reset the filtered state of the list.
+   */
+  modal.addEventListener('ionModalDidDismiss', (ev) => {
+    searchbar.value = undefined;
+    renderList();
+  });
+
+  renderList();
+</script>
+```
diff --git a/static/usage/v6/select/typeahead/react/main_tsx.md b/static/usage/v6/select/typeahead/react/main_tsx.md
new file mode 100644
index 00000000000..14ab838bc18
--- /dev/null
+++ b/static/usage/v6/select/typeahead/react/main_tsx.md
@@ -0,0 +1,81 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/react';
+import AppTypeahead from './AppTypeahead';
+
+import type { Item } from './types';
+
+const fruits: Item[] = [
+  { text: 'Apple', value: 'apple' },
+  { text: 'Apricot', value: 'apricot' },
+  { text: 'Banana', value: 'banana' },
+  { text: 'Blackberry', value: 'blackberry' },
+  { text: 'Blueberry', value: 'blueberry' },
+  { text: 'Cherry', value: 'cherry' },
+  { text: 'Cranberry', value: 'cranberry' },
+  { text: 'Grape', value: 'grape' },
+  { text: 'Grapefruit', value: 'grapefruit' },
+  { text: 'Guava', value: 'guava' },
+  { text: 'Jackfruit', value: 'jackfruit' },
+  { text: 'Lime', value: 'lime' },
+  { text: 'Mango', value: 'mango' },
+  { text: 'Nectarine', value: 'nectarine' },
+  { text: 'Orange', value: 'orange' },
+  { text: 'Papaya', value: 'papaya' },
+  { text: 'Passionfruit', value: 'passionfruit' },
+  { text: 'Peach', value: 'peach' },
+  { text: 'Pear', value: 'pear' },
+  { text: 'Plantain', value: 'plantain' },
+  { text: 'Plum', value: 'plum' },
+  { text: 'Pineapple', value: 'pineapple' },
+  { text: 'Pomegranate', value: 'pomegranate' },
+  { text: 'Raspberry', value: 'raspberry' },
+  { text: 'Strawberry', value: 'strawberry' }
+];
+
+function Example() {
+  const [selectedFruitsText, setSelectedFruitsText] = useState<string>('0 Items');
+  const [selectedFruits, setSelectedFruits] = useState<string[]>([]);
+
+  const modal = useRef<HTMLIonModalElement>(null);
+  
+  const formatData = (data: string[]) => {
+    if (data.length === 1) {
+      const fruit = fruits.find(fruit => fruit.value === data[0])!;
+      return fruit.text;
+    }
+  
+    return `${data.length} items`;
+  }
+  
+  const fruitSelectionChanged = (fruits: string[]) => {
+    setSelectedFruits(fruits);
+    setSelectedFruitsText(formatData(fruits));
+    modal.current?.dismiss();
+  }
+
+  return (
+    <>
+      <IonContent color="light">
+        <IonList inset={true}>
+          <IonItem button={true} detail={false} id="select-fruits">
+            <IonLabel>Favorite Fruits</IonLabel>
+            <div slot="end" id="selected-fruits">{ selectedFruitsText }</div>
+          </IonItem>
+        </IonList>
+      </IonContent>
+      
+      <IonModal trigger="select-fruits" ref={modal}>
+        <AppTypeahead
+          title="Favorite Fruits"
+          items={fruits}
+          selectedItems={selectedFruits}
+          onSelectionCancel={() => modal.current?.dismiss()}
+          onSelectionChange={fruitSelectionChanged}
+        />
+      </IonModal>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/select/typeahead/react/react_types_ts.md b/static/usage/v6/select/typeahead/react/react_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v6/select/typeahead/react/react_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+  text: string;
+  value: string;
+};
+```
diff --git a/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
new file mode 100644
index 00000000000..1192f3bc2a3
--- /dev/null
+++ b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
@@ -0,0 +1,112 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
+import type { CheckboxCustomEvent } from '@ionic/react';
+import type { Item } from './types';
+
+interface TypeaheadProps {
+  items: Item[];
+  selectedItems: string[];
+  title?: string;
+  onSelectionCancel?: () => void;
+  onSelectionChange?: (items: string[]) => void;
+}
+
+function AppTypeahead(props: TypeaheadProps) {
+  const [filteredItems, setFilteredItems] = useState<Item[]>([...props.items]);
+  const [workingSelectedValues, setWorkingSelectedValues] = useState<string[]>([...props.selectedItems]);
+  
+  const isChecked = (value: string) => {
+    return workingSelectedValues.find(item => item === value) !== undefined;
+  }
+  
+  const cancelChanges = () => {
+    const { onSelectionCancel } = props;
+    if (onSelectionCancel !== undefined) {
+      onSelectionCancel();
+    }
+  }
+  
+  const confirmChanges = () => {
+    const { onSelectionChange } = props;
+    if (onSelectionChange !== undefined) {
+      onSelectionChange(workingSelectedValues);
+    }
+  }
+  
+  const searchbarInput = (ev: any) => {
+    filterList(ev.target.value);
+  }
+  
+  /**
+   * Update the rendered view with
+   * the provided search query. If no
+   * query is provided, all data
+   * will be rendered.
+   */
+  const filterList = (searchQuery: string | null | undefined) => {
+    /**
+     * If no search query is defined,
+     * return all options.
+     */
+    if (searchQuery === undefined || searchQuery === null) {
+      setFilteredItems([...props.items]);
+    } else {
+      /**
+       * Otherwise, normalize the search
+       * query and check to see which items
+       * contain the search query as a substring.
+       */
+      const normalizedQuery = searchQuery.toLowerCase();
+      setFilteredItems(props.items.filter(item => {
+        return item.value.includes(normalizedQuery);
+      }));
+    }
+  }
+  
+  const checkboxChange = (ev: CheckboxCustomEvent) => {
+    const { checked, value } = ev.detail;
+    
+    if (checked) {
+      setWorkingSelectedValues([...workingSelectedValues, value]);
+    } else {
+      setWorkingSelectedValues(workingSelectedValues.filter(item => item !== value));
+    }
+  }
+  
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton onClick={cancelChanges}>Cancel</IonButton>
+          </IonButtons>
+          <IonTitle>{props.title}</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={confirmChanges}>Done</IonButton>
+          </IonButtons>
+        </IonToolbar>
+        <IonToolbar>
+          <IonSearchbar onIonInput={searchbarInput}></IonSearchbar>
+        </IonToolbar>
+      </IonHeader>
+      
+      <IonContent color="light" class="ion-padding">
+        <IonList id="modal-list" inset={true}>
+          {filteredItems.map(item => (
+            <IonItem key={item.value}>
+              <IonLabel>{item.text}</IonLabel>
+              <IonCheckbox
+                value={item.value}
+                checked={isChecked(item.value)}
+                onIonChange={checkboxChange}
+              ></IonCheckbox>
+            </IonItem>
+          ))}
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default AppTypeahead;
+```
diff --git a/static/usage/v6/select/typeahead/vue/example_vue.md b/static/usage/v6/select/typeahead/vue/example_vue.md
new file mode 100644
index 00000000000..8086c2f0d6a
--- /dev/null
+++ b/static/usage/v6/select/typeahead/vue/example_vue.md
@@ -0,0 +1,83 @@
+```html
+<template>
+  <ion-content color="light">
+    <ion-list :inset="true">
+      <ion-item :button="true" :detail="false" id="select-fruits">
+        <ion-label>Favorite Fruits</ion-label>
+        <div slot="end" id="selected-fruits">{{ selectedFruitsText }}</div>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+  
+  <ion-modal trigger="select-fruits" ref="modal">
+    <app-typeahead
+      class="ion-page"
+      title="Favorite Fruits"
+      :items="fruits"
+      :selectedItems="selectedFruits"
+      @selection-change="fruitSelectionChanged($event)"
+      @selection-cancel="modal.$el.dismiss()"
+    ></app-typeahead>
+  </ion-modal>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  import type { Item } from '../types';
+  import AppTypeahead from './AppTypeahead.vue';
+
+  export default defineComponent({
+    components: { AppTypeahead, IonContent, IonItem, IonLabel, IonList, IonModal },
+    setup() {
+      const fruits: Item[] = [
+        { text: 'Apple', value: 'apple' },
+        { text: 'Apricot', value: 'apricot' },
+        { text: 'Banana', value: 'banana' },
+        { text: 'Blackberry', value: 'blackberry' },
+        { text: 'Blueberry', value: 'blueberry' },
+        { text: 'Cherry', value: 'cherry' },
+        { text: 'Cranberry', value: 'cranberry' },
+        { text: 'Grape', value: 'grape' },
+        { text: 'Grapefruit', value: 'grapefruit' },
+        { text: 'Guava', value: 'guava' },
+        { text: 'Jackfruit', value: 'jackfruit' },
+        { text: 'Lime', value: 'lime' },
+        { text: 'Mango', value: 'mango' },
+        { text: 'Nectarine', value: 'nectarine' },
+        { text: 'Orange', value: 'orange' },
+        { text: 'Papaya', value: 'papaya' },
+        { text: 'Passionfruit', value: 'passionfruit' },
+        { text: 'Peach', value: 'peach' },
+        { text: 'Pear', value: 'pear' },
+        { text: 'Plantain', value: 'plantain' },
+        { text: 'Plum', value: 'plum' },
+        { text: 'Pineapple', value: 'pineapple' },
+        { text: 'Pomegranate', value: 'pomegranate' },
+        { text: 'Raspberry', value: 'raspberry' },
+        { text: 'Strawberry', value: 'strawberry' }
+      ];
+      const modal = ref();
+      const selectedFruitsText = ref('0 Items');
+      const selectedFruits = ref([]);
+      
+      const formatData = (data: string[]) => {
+        if (data.length === 1) {
+          const fruit = fruits.find(fruit => fruit.value === data[0])
+          return fruit.text;
+        }
+      
+        return `${data.length} items`;
+      }
+      
+      const fruitSelectionChanged = (fruits: string[]) => {
+        selectedFruits.value = fruits;
+        selectedFruitsText.value = formatData(selectedFruits.value);
+        modal.value.$el.dismiss();
+      }
+      
+      return { modal, fruits, selectedFruitsText, selectedFruits, fruitSelectionChanged }; 
+    }
+  });
+</script>
+```
diff --git a/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
new file mode 100644
index 00000000000..c49e7113678
--- /dev/null
+++ b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
@@ -0,0 +1,122 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="cancelChanges()">Cancel</ion-button>
+      </ion-buttons>
+      <ion-title>{{ $props.title }}</ion-title>
+      <ion-buttons slot="end">
+        <ion-button @click="confirmChanges()">Done</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar @ionInput="searchbarInput($event)"></ion-searchbar>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content color="light" class="ion-padding">
+    <ion-list id="modal-list" :inset="true">
+      <ion-item
+        v-for="item in filteredItems"
+        :key="item.value"
+      >
+        <ion-label>{{ item.text }}</ion-label>
+        <ion-checkbox
+          :value="item.value" 
+          :checked="isChecked(item.value)"
+          @ionChange="checkboxChange($event)"
+        ></ion-checkbox>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/vue';
+  import type { CheckboxCustomEvent, SearchbarCustomEvent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    props: {
+      items: Array,
+      selectedItems: Array,
+      title: {
+        type: String,
+        default: 'Select Items'
+      }
+    },
+    emits: ['selection-cancel', 'selection-change'],
+    components: { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar },
+    setup(props, { emit }) {
+      const filteredItems = ref([...props.items]);
+      const workingSelectedValues = ref([...props.selectedItems]);
+      
+      const isChecked = (value: string) => {
+        return workingSelectedValues.value.find(item => item === value) !== undefined;
+      }
+      
+      const cancelChanges = () => {
+        emit('selection-cancel');
+      }
+      
+      const confirmChanges = () => {
+        emit('selection-change', workingSelectedValues.value);
+      }
+      
+      const searchbarInput = (ev: SearchbarCustomEvent) => {
+        filterList(ev.target.value);
+      }
+      
+      /**
+       * Update the rendered view with
+       * the provided search query. If no
+       * query is provided, all data
+       * will be rendered.
+       */
+      const filterList = (searchQuery: string | undefined) => {
+        /**
+         * If no search query is defined,
+         * return all options.
+         */
+        if (searchQuery === undefined) {
+          filteredItems.value = [...props.items];
+        } else {
+          /**
+           * Otherwise, normalize the search
+           * query and check to see which items
+           * contain the search query as a substring.
+           */
+          const normalizedQuery = searchQuery.toLowerCase(); 
+          filteredItems.value = props.items.filter(item => {
+            return item.value.includes(normalizedQuery);
+          });
+        }
+      }
+      
+      const checkboxChange = (ev: CheckboxCustomEvent) => {
+        const { checked, value } = ev.detail;
+        
+        if (checked) {
+          workingSelectedValues.value = [
+            ...workingSelectedValues.value,
+            value
+          ]
+        } else {
+          workingSelectedValues.value = workingSelectedValues.value.filter(item => item !== value);
+        }
+      }
+      
+      return { 
+        filteredItems, 
+        workingSelectedValues, 
+        isChecked, 
+        cancelChanges, 
+        confirmChanges, 
+        searchbarInput,
+        checkboxChange
+      }
+    }
+  });
+</script>
+```
\ No newline at end of file
diff --git a/static/usage/v6/select/typeahead/vue/vue_types_ts.md b/static/usage/v6/select/typeahead/vue/vue_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v6/select/typeahead/vue/vue_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+  text: string;
+  value: string;
+};
+```
diff --git a/static/usage/v7/select/typeahead/angular/angular_types_ts.md b/static/usage/v7/select/typeahead/angular/angular_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/angular_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+  text: string;
+  value: string;
+};
+```
diff --git a/static/usage/v7/select/typeahead/angular/app_module_ts.md b/static/usage/v7/select/typeahead/angular/app_module_ts.md
new file mode 100644
index 00000000000..0fa58037717
--- /dev/null
+++ b/static/usage/v7/select/typeahead/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 { TypeaheadComponent } from './typeahead.component';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/select/typeahead/angular/example_component_html.md b/static/usage/v7/select/typeahead/angular/example_component_html.md
new file mode 100644
index 00000000000..3c702c08d67
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-content color="light">
+  <ion-list [inset]="true">
+    <ion-item [button]="true" [detail]="false" id="select-fruits">
+      <ion-label>Favorite Fruits</ion-label>
+      <div slot="end" id="selected-fruits">{{ selectedFruitsText }}</div>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+<ion-modal trigger="select-fruits" #modal>
+  <ng-template>
+    <app-typeahead
+      class="ion-page"
+      title="Favorite Fruits"
+      [items]="fruits"
+      [selectedItems]="selectedFruits"
+      (selectionChange)="fruitSelectionChanged($event)"
+      (selectionCancel)="modal.dismiss()"
+    ></app-typeahead>
+  </ng-template>
+</ion-modal>
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md
new file mode 100644
index 00000000000..ee7f5e29305
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md
@@ -0,0 +1,59 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { Item } from './types'; 
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('modal', { static: true }) modal!: IonModal;
+  
+  selectedFruitsText = '0 Items';
+  selectedFruits: string[] = [];
+  
+  fruits: Item[] = [
+    { text: 'Apple', value: 'apple' },
+    { text: 'Apricot', value: 'apricot' },
+    { text: 'Banana', value: 'banana' },
+    { text: 'Blackberry', value: 'blackberry' },
+    { text: 'Blueberry', value: 'blueberry' },
+    { text: 'Cherry', value: 'cherry' },
+    { text: 'Cranberry', value: 'cranberry' },
+    { text: 'Grape', value: 'grape' },
+    { text: 'Grapefruit', value: 'grapefruit' },
+    { text: 'Guava', value: 'guava' },
+    { text: 'Jackfruit', value: 'jackfruit' },
+    { text: 'Lime', value: 'lime' },
+    { text: 'Mango', value: 'mango' },
+    { text: 'Nectarine', value: 'nectarine' },
+    { text: 'Orange', value: 'orange' },
+    { text: 'Papaya', value: 'papaya' },
+    { text: 'Passionfruit', value: 'passionfruit' },
+    { text: 'Peach', value: 'peach' },
+    { text: 'Pear', value: 'pear' },
+    { text: 'Plantain', value: 'plantain' },
+    { text: 'Plum', value: 'plum' },
+    { text: 'Pineapple', value: 'pineapple' },
+    { text: 'Pomegranate', value: 'pomegranate' },
+    { text: 'Raspberry', value: 'raspberry' },
+    { text: 'Strawberry', value: 'strawberry' }
+  ];
+  
+  private formatData(data: string[]) {
+    if (data.length === 1) {
+      const fruit = this.fruits.find(fruit => fruit.value === data[0])
+      return fruit.text;
+    }
+  
+    return `${data.length} items`;
+  }
+  
+  fruitSelectionChanged(fruits: string[]) {
+    this.selectedFruits = fruits;
+    this.selectedFruitsText = this.formatData(this.selectedFruits);
+    this.modal.dismiss();
+  }
+}
+```
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
new file mode 100644
index 00000000000..ed5fc081852
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
@@ -0,0 +1,29 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="cancelChanges()">Cancel</ion-button>
+    </ion-buttons>
+    <ion-title>{{ title }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="confirmChanges()">Done</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar (ionInput)="searchbarInput($event)"></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content color="light" class="ion-padding">
+  <ion-list id="modal-list" [inset]="true">
+    <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
+      <ion-label>{{ item.text }}</ion-label>
+      <ion-checkbox
+        [value]="item.value" 
+        [checked]="isChecked(item.value)"
+        (ionChange)="checkboxChange($event)"
+      ></ion-checkbox>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
new file mode 100644
index 00000000000..129db1ed94b
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
@@ -0,0 +1,85 @@
+```ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import type { OnInit } from '@angular/core';
+import { Item } from './types';
+
+@Component({
+  selector: 'app-typeahead',
+  templateUrl: 'typeahead.component.html',
+})
+export class TypeaheadComponentt implements OnInit {
+  @Input() items: Item[] = [];
+  @Input() selectedItems: string[] = [];
+  @Input() title = 'Select Items';
+
+  @Output() selectionCancel = new EventEmitter<void>();
+  @Output() selectionChange = new EventEmitter<string[]>();
+  
+  filteredItems: Item[] = [];
+  workingSelectedValues: string[] = [];
+  
+  ngOnInit() {
+    this.filteredItems = [...this.items];
+    this.workingSelectedValues = [...this.selectedItems];
+  }
+  
+  trackItems(index: number, item: Item) {
+    return item.value;
+  }
+  
+  cancelChanges() {
+    this.selectionCancel.emit();
+  }
+  
+  confirmChanges() {
+    this.selectionChange.emit(this.workingSelectedValues);
+  }
+  
+  searchbarInput(ev) {
+    this.filterList(ev.target.value);
+  }
+  
+  /**
+   * Update the rendered view with
+   * the provided search query. If no
+   * query is provided, all data
+   * will be rendered.
+   */
+  filterList(searchQuery: string | undefined) {
+    /**
+     * If no search query is defined,
+     * return all options.
+     */
+    if (searchQuery === undefined) {
+      this.filteredItems = [...this.items];
+    } else {
+      /**
+       * Otherwise, normalize the search
+       * query and check to see which items
+       * contain the search query as a substring.
+       */
+      const normalizedQuery = searchQuery.toLowerCase(); 
+      this.filteredItems = this.items.filter(item => {
+        return item.value.includes(normalizedQuery);
+      });
+    }
+  }
+
+  isChecked(value: string) {
+    return this.workingSelectedValues.find(item => item === value);
+  }
+  
+  checkboxChange(ev) {
+    const { checked, value } = ev.detail;
+    
+    if (checked) {
+      this.workingSelectedValues = [
+        ...this.workingSelectedValues,
+        value
+      ]
+    } else {
+      this.workingSelectedValues = this.workingSelectedValues.filter(item => item !== value);
+    }
+  }
+}
+```
diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html
new file mode 100644
index 00000000000..e9df1d455c5
--- /dev/null
+++ b/static/usage/v7/select/typeahead/demo.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Select</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content color="light">
+        <div class="container">
+          <ion-list inset="true">
+            <ion-item button="true" detail="false" id="select-fruits">
+              <ion-label>Favorite Fruits</ion-label>
+              <div slot="end" id="selected-fruits">0 Items</div>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+
+      <ion-modal trigger="select-fruits">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button onclick="cancelChanges()">Cancel</ion-button>
+            </ion-buttons>
+            <ion-title>Favorite Fruits</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="confirmChanges()">Done</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content color="light" class="ion-padding">
+          <ion-list id="modal-list" inset="true">
+          </ion-list>
+        </ion-content>
+      </ion-modal>
+    </ion-app>
+
+    <script>
+      const list = document.querySelector('ion-list#modal-list');
+      const modal = document.querySelector('ion-modal');
+      const searchbar = document.querySelector('ion-searchbar');
+      const selectedFruitsText = document.querySelector('#selected-fruits');
+      const fruits = [
+        { text: 'Apple', value: 'apple' },
+        { text: 'Apricot', value: 'apricot' },
+        { text: 'Banana', value: 'banana' },
+        { text: 'Blackberry', value: 'blackberry' },
+        { text: 'Blueberry', value: 'blueberry' },
+        { text: 'Cherry', value: 'cherry' },
+        { text: 'Cranberry', value: 'cranberry' },
+        { text: 'Grape', value: 'grape' },
+        { text: 'Grapefruit', value: 'grapefruit' },
+        { text: 'Guava', value: 'guava' },
+        { text: 'Jackfruit', value: 'jackfruit' },
+        { text: 'Lime', value: 'lime' },
+        { text: 'Mango', value: 'mango' },
+        { text: 'Nectarine', value: 'nectarine' },
+        { text: 'Orange', value: 'orange' },
+        { text: 'Papaya', value: 'papaya' },
+        { text: 'Passionfruit', value: 'passionfruit' },
+        { text: 'Peach', value: 'peach' },
+        { text: 'Pear', value: 'pear' },
+        { text: 'Plantain', value: 'plantain' },
+        { text: 'Plum', value: 'plum' },
+        { text: 'Pineapple', value: 'pineapple' },
+        { text: 'Pomegranate', value: 'pomegranate' },
+        { text: 'Raspberry', value: 'raspberry' },
+        { text: 'Strawberry', value: 'strawberry' }
+      ];
+
+      /**
+       * This is the confirmed
+       * list of selected fruits. It
+       * is only updated once the "Done"
+       * button is pressed in the modal.
+       */
+      var selectedFruits = [];
+
+      /**
+       * This is the working list of
+       * selected fruits. It tracks any
+       * uncommitted changes that the user
+       * makes in the modal. If the user pressed
+       * the "Cancel" button then this is
+       * reset to the value of the confirmed
+       * selected fruits.
+       */
+      var workingSelectedFruits = [];
+
+      /**
+       * Filter the list of fruits base
+       * on the search query. If no query
+       * is provided then the entire list
+       * will be returned.
+       */
+      const filterList = (searchQuery = undefined) => {
+        if (searchQuery === undefined) return fruits;
+
+        const normalizedQuery = searchQuery.toLowerCase();
+
+        return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+      }
+
+      /**
+       * Render a filtered list of fruits
+       * inside of the modal based on the
+       * search query.
+       */
+      const renderList = (searchQuery = undefined) => {
+        const data = filterList(searchQuery);
+        let template = '';
+
+        data.forEach((item, index) => {
+          const checked = workingSelectedFruits.includes(item.value);
+          template += `
+            <ion-item>
+              <ion-label>${item.text}</ion-label>
+              <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
+            </ion-item>
+          `
+        });
+
+        list.innerHTML = template;
+      }
+
+      /**
+       * Formats the selected fruits in
+       * an easier to read way. If only
+       * 1 fruit is selected, then the
+       * fruit name will be rendered.
+       * Otherwise the number of fruits
+       * selected will be rendered.
+       */
+      const formatData = (data) => {
+        if (data.length === 1) {
+          const fruit = fruits.find(fruit => fruit.value === data[0])
+          return fruit.text;
+        }
+
+        return `${data.length} items`;
+      }
+
+      /**
+       * Reset any working changes
+       * and dismiss the modal.
+       */
+      const cancelChanges = () => {
+        workingSelectedFruits = [...selectedFruits];
+        modal.dismiss(undefined, 'cancel');
+      }
+
+      /**
+       * Return the selected
+       * fruits to the parent page.
+       */
+      const confirmChanges = () => {
+        selectedFruits = [...workingSelectedFruits];
+        modal.dismiss(selectedFruits)
+      };
+
+      // Listen for all ionChange events from the checkbox
+      modal.addEventListener('ionChange', (ev) => {
+        if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+
+        const { checked, value } = ev.detail;
+
+        if (checked) {
+          workingSelectedFruits = [
+            ...workingSelectedFruits,
+            value
+          ]
+        } else {
+          workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+        }
+      });
+
+      /**
+       * As users type into the searchbar
+       * we need to update the view with
+       * the filtered list.
+       */
+      searchbar.addEventListener('ionInput', (ev) => {
+        renderList(ev.target.value);
+      });
+
+      /**
+       * When the modal is about to dismiss
+       * update the parent page with the
+       * selected fruits.
+       */
+      modal.addEventListener('ionModalWillDismiss', (ev) => {
+        const { data } = ev.detail;
+
+        if (data === undefined) return;
+
+        const selectedText = formatData(data);
+
+        selectedFruitsText.innerText = selectedText;
+      });
+
+      /**
+       * When the modal has completed we need to
+       * reset the filtered state of the list.
+       */
+      modal.addEventListener('ionModalDidDismiss', (ev) => {
+        searchbar.value = undefined;
+        renderList();
+      });
+
+      renderList();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md
new file mode 100644
index 00000000000..ac83a5daf96
--- /dev/null
+++ b/static/usage/v7/select/typeahead/index.md
@@ -0,0 +1,51 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_types_ts from './react/react_types_ts.md';
+import typeahead_component_tsx from './react/typeahead_component_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_types_ts from './vue/vue_types_ts.md';
+import vue_typeahead_component from './vue/typeahead_component_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';
+import angular_types_ts from './angular/angular_types_ts.md';
+
+<Playground
+  code={{ 
+    javascript, 
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/types.ts': react_types_ts,
+        'src/AppTypeahead.tsx': typeahead_component_tsx
+      }
+    }, 
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/types.ts': vue_types_ts,
+        'src/components/AppTypeahead.vue': vue_typeahead_component
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/typeahead.component.html': angular_modal_example_component_html,
+        'src/app/typeahead.component.ts': angular_modal_example_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/types.ts': angular_types_ts
+      },
+    }, 
+  }}
+  src="usage/v7/select/typeahead/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
\ No newline at end of file
diff --git a/static/usage/v7/select/typeahead/javascript.md b/static/usage/v7/select/typeahead/javascript.md
new file mode 100644
index 00000000000..247c8ed10f2
--- /dev/null
+++ b/static/usage/v7/select/typeahead/javascript.md
@@ -0,0 +1,208 @@
+```html
+<ion-content color="light">
+  <div class="container">
+    <ion-list inset="true">
+      <ion-item button="true" detail="false" id="select-fruits">
+        <ion-label>Favorite Fruits</ion-label>
+        <div slot="end" id="selected-fruits">0 Items</div>
+      </ion-item>
+    </ion-list>
+  </div>
+</ion-content>
+
+<ion-modal trigger="select-fruits">
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button onclick="cancelChanges()">Cancel</ion-button>
+      </ion-buttons>
+      <ion-title>Favorite Fruits</ion-title>
+      <ion-buttons slot="end">
+        <ion-button onclick="confirmChanges()">Done</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar></ion-searchbar>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content color="light" class="ion-padding">
+    <ion-list id="modal-list" inset="true">
+    </ion-list>
+  </ion-content>
+</ion-modal>
+
+<script>
+  const list = document.querySelector('ion-list#modal-list');
+  const modal = document.querySelector('ion-modal');
+  const searchbar = document.querySelector('ion-searchbar');
+  const selectedFruitsText = document.querySelector('#selected-fruits');
+  const fruits = [
+    { text: 'Apple', value: 'apple' },
+    { text: 'Apricot', value: 'apricot' },
+    { text: 'Banana', value: 'banana' },
+    { text: 'Blackberry', value: 'blackberry' },
+    { text: 'Blueberry', value: 'blueberry' },
+    { text: 'Cherry', value: 'cherry' },
+    { text: 'Cranberry', value: 'cranberry' },
+    { text: 'Grape', value: 'grape' },
+    { text: 'Grapefruit', value: 'grapefruit' },
+    { text: 'Guava', value: 'guava' },
+    { text: 'Jackfruit', value: 'jackfruit' },
+    { text: 'Lime', value: 'lime' },
+    { text: 'Mango', value: 'mango' },
+    { text: 'Nectarine', value: 'nectarine' },
+    { text: 'Orange', value: 'orange' },
+    { text: 'Papaya', value: 'papaya' },
+    { text: 'Passionfruit', value: 'passionfruit' },
+    { text: 'Peach', value: 'peach' },
+    { text: 'Pear', value: 'pear' },
+    { text: 'Plantain', value: 'plantain' },
+    { text: 'Plum', value: 'plum' },
+    { text: 'Pineapple', value: 'pineapple' },
+    { text: 'Pomegranate', value: 'pomegranate' },
+    { text: 'Raspberry', value: 'raspberry' },
+    { text: 'Strawberry', value: 'strawberry' }
+  ];
+
+  /**
+   * This is the confirmed
+   * list of selected fruits. It
+   * is only updated once the "Done"
+   * button is pressed in the modal.
+   */
+  var selectedFruits = [];
+
+  /**
+   * This is the working list of
+   * selected fruits. It tracks any
+   * uncommitted changes that the user
+   * makes in the modal. If the user pressed
+   * the "Cancel" button then this is
+   * reset to the value of the confirmed
+   * selected fruits.
+   */
+  var workingSelectedFruits = [];
+
+  /**
+   * Filter the list of fruits base
+   * on the search query. If no query
+   * is provided then the entire list
+   * will be returned.
+   */
+  function filterList(searchQuery = undefined) {
+    if (searchQuery === undefined) return fruits;
+
+    const normalizedQuery = searchQuery.toLowerCase();
+
+    return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+  }
+
+  /**
+   * Render a filtered list of fruits
+   * inside of the modal based on the
+   * search query.
+   */
+  function renderList(searchQuery = undefined) {
+    const data = filterList(searchQuery);
+    let template = '';
+
+    data.forEach((item, index) => {
+      const checked = workingSelectedFruits.includes(item.value);
+      template += `
+        <ion-item>
+          <ion-label>${item.text}</ion-label>
+          <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
+        </ion-item>
+      `
+    });
+
+    list.innerHTML = template;
+  }
+
+  /**
+   * Formats the selected fruits in
+   * an easier to read way. If only
+   * 1 fruit is selected, then the
+   * fruit name will be rendered.
+   * Otherwise the number of fruits
+   * selected will be rendered.
+   */
+  function formatData(data) {
+    if (data.length === 1) {
+      const fruit = fruits.find(fruit => fruit.value === data[0])
+      return fruit.text;
+    }
+
+    return `${data.length} items`;
+  }
+
+  /**
+   * Reset any working changes
+   * and dismiss the modal.
+   */
+  function cancelChanges() {
+    workingSelectedFruits = [...selectedFruits];
+    modal.dismiss(undefined, 'cancel');
+  }
+
+  /**
+   * Return the selected
+   * fruits to the parent page.
+   */
+  function confirmChanges() {
+    selectedFruits = [...workingSelectedFruits];
+    modal.dismiss(selectedFruits)
+  };
+
+  // Listen for all ionChange events from the checkbox
+  modal.addEventListener('ionChange', (ev) => {
+    if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+
+    const { checked, value } = ev.detail;
+
+    if (checked) {
+      workingSelectedFruits = [
+        ...workingSelectedFruits,
+        value
+      ]
+    } else {
+      workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+    }
+  });
+
+  /**
+   * As users type into the searchbar
+   * we need to update the view with
+   * the filtered list.
+   */
+  searchbar.addEventListener('ionInput', (ev) => {
+    renderList(ev.target.value);
+  });
+
+  /**
+   * When the modal is about to dismiss
+   * update the parent page with the
+   * selected fruits.
+   */
+  modal.addEventListener('ionModalWillDismiss', (ev) => {
+    const { data } = ev.detail;
+
+    if (data === undefined) return;
+
+    const selectedText = formatData(data);
+
+    selectedFruitsText.innerText = selectedText;
+  });
+
+  /**
+   * When the modal has completed we need to
+   * reset the filtered state of the list.
+   */
+  modal.addEventListener('ionModalDidDismiss', (ev) => {
+    searchbar.value = undefined;
+    renderList();
+  });
+
+  renderList();
+</script>
+```
diff --git a/static/usage/v7/select/typeahead/react/main_tsx.md b/static/usage/v7/select/typeahead/react/main_tsx.md
new file mode 100644
index 00000000000..14ab838bc18
--- /dev/null
+++ b/static/usage/v7/select/typeahead/react/main_tsx.md
@@ -0,0 +1,81 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/react';
+import AppTypeahead from './AppTypeahead';
+
+import type { Item } from './types';
+
+const fruits: Item[] = [
+  { text: 'Apple', value: 'apple' },
+  { text: 'Apricot', value: 'apricot' },
+  { text: 'Banana', value: 'banana' },
+  { text: 'Blackberry', value: 'blackberry' },
+  { text: 'Blueberry', value: 'blueberry' },
+  { text: 'Cherry', value: 'cherry' },
+  { text: 'Cranberry', value: 'cranberry' },
+  { text: 'Grape', value: 'grape' },
+  { text: 'Grapefruit', value: 'grapefruit' },
+  { text: 'Guava', value: 'guava' },
+  { text: 'Jackfruit', value: 'jackfruit' },
+  { text: 'Lime', value: 'lime' },
+  { text: 'Mango', value: 'mango' },
+  { text: 'Nectarine', value: 'nectarine' },
+  { text: 'Orange', value: 'orange' },
+  { text: 'Papaya', value: 'papaya' },
+  { text: 'Passionfruit', value: 'passionfruit' },
+  { text: 'Peach', value: 'peach' },
+  { text: 'Pear', value: 'pear' },
+  { text: 'Plantain', value: 'plantain' },
+  { text: 'Plum', value: 'plum' },
+  { text: 'Pineapple', value: 'pineapple' },
+  { text: 'Pomegranate', value: 'pomegranate' },
+  { text: 'Raspberry', value: 'raspberry' },
+  { text: 'Strawberry', value: 'strawberry' }
+];
+
+function Example() {
+  const [selectedFruitsText, setSelectedFruitsText] = useState<string>('0 Items');
+  const [selectedFruits, setSelectedFruits] = useState<string[]>([]);
+
+  const modal = useRef<HTMLIonModalElement>(null);
+  
+  const formatData = (data: string[]) => {
+    if (data.length === 1) {
+      const fruit = fruits.find(fruit => fruit.value === data[0])!;
+      return fruit.text;
+    }
+  
+    return `${data.length} items`;
+  }
+  
+  const fruitSelectionChanged = (fruits: string[]) => {
+    setSelectedFruits(fruits);
+    setSelectedFruitsText(formatData(fruits));
+    modal.current?.dismiss();
+  }
+
+  return (
+    <>
+      <IonContent color="light">
+        <IonList inset={true}>
+          <IonItem button={true} detail={false} id="select-fruits">
+            <IonLabel>Favorite Fruits</IonLabel>
+            <div slot="end" id="selected-fruits">{ selectedFruitsText }</div>
+          </IonItem>
+        </IonList>
+      </IonContent>
+      
+      <IonModal trigger="select-fruits" ref={modal}>
+        <AppTypeahead
+          title="Favorite Fruits"
+          items={fruits}
+          selectedItems={selectedFruits}
+          onSelectionCancel={() => modal.current?.dismiss()}
+          onSelectionChange={fruitSelectionChanged}
+        />
+      </IonModal>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/typeahead/react/react_types_ts.md b/static/usage/v7/select/typeahead/react/react_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v7/select/typeahead/react/react_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+  text: string;
+  value: string;
+};
+```
diff --git a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
new file mode 100644
index 00000000000..1192f3bc2a3
--- /dev/null
+++ b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
@@ -0,0 +1,112 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
+import type { CheckboxCustomEvent } from '@ionic/react';
+import type { Item } from './types';
+
+interface TypeaheadProps {
+  items: Item[];
+  selectedItems: string[];
+  title?: string;
+  onSelectionCancel?: () => void;
+  onSelectionChange?: (items: string[]) => void;
+}
+
+function AppTypeahead(props: TypeaheadProps) {
+  const [filteredItems, setFilteredItems] = useState<Item[]>([...props.items]);
+  const [workingSelectedValues, setWorkingSelectedValues] = useState<string[]>([...props.selectedItems]);
+  
+  const isChecked = (value: string) => {
+    return workingSelectedValues.find(item => item === value) !== undefined;
+  }
+  
+  const cancelChanges = () => {
+    const { onSelectionCancel } = props;
+    if (onSelectionCancel !== undefined) {
+      onSelectionCancel();
+    }
+  }
+  
+  const confirmChanges = () => {
+    const { onSelectionChange } = props;
+    if (onSelectionChange !== undefined) {
+      onSelectionChange(workingSelectedValues);
+    }
+  }
+  
+  const searchbarInput = (ev: any) => {
+    filterList(ev.target.value);
+  }
+  
+  /**
+   * Update the rendered view with
+   * the provided search query. If no
+   * query is provided, all data
+   * will be rendered.
+   */
+  const filterList = (searchQuery: string | null | undefined) => {
+    /**
+     * If no search query is defined,
+     * return all options.
+     */
+    if (searchQuery === undefined || searchQuery === null) {
+      setFilteredItems([...props.items]);
+    } else {
+      /**
+       * Otherwise, normalize the search
+       * query and check to see which items
+       * contain the search query as a substring.
+       */
+      const normalizedQuery = searchQuery.toLowerCase();
+      setFilteredItems(props.items.filter(item => {
+        return item.value.includes(normalizedQuery);
+      }));
+    }
+  }
+  
+  const checkboxChange = (ev: CheckboxCustomEvent) => {
+    const { checked, value } = ev.detail;
+    
+    if (checked) {
+      setWorkingSelectedValues([...workingSelectedValues, value]);
+    } else {
+      setWorkingSelectedValues(workingSelectedValues.filter(item => item !== value));
+    }
+  }
+  
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton onClick={cancelChanges}>Cancel</IonButton>
+          </IonButtons>
+          <IonTitle>{props.title}</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={confirmChanges}>Done</IonButton>
+          </IonButtons>
+        </IonToolbar>
+        <IonToolbar>
+          <IonSearchbar onIonInput={searchbarInput}></IonSearchbar>
+        </IonToolbar>
+      </IonHeader>
+      
+      <IonContent color="light" class="ion-padding">
+        <IonList id="modal-list" inset={true}>
+          {filteredItems.map(item => (
+            <IonItem key={item.value}>
+              <IonLabel>{item.text}</IonLabel>
+              <IonCheckbox
+                value={item.value}
+                checked={isChecked(item.value)}
+                onIonChange={checkboxChange}
+              ></IonCheckbox>
+            </IonItem>
+          ))}
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default AppTypeahead;
+```
diff --git a/static/usage/v7/select/typeahead/vue/example_vue.md b/static/usage/v7/select/typeahead/vue/example_vue.md
new file mode 100644
index 00000000000..8086c2f0d6a
--- /dev/null
+++ b/static/usage/v7/select/typeahead/vue/example_vue.md
@@ -0,0 +1,83 @@
+```html
+<template>
+  <ion-content color="light">
+    <ion-list :inset="true">
+      <ion-item :button="true" :detail="false" id="select-fruits">
+        <ion-label>Favorite Fruits</ion-label>
+        <div slot="end" id="selected-fruits">{{ selectedFruitsText }}</div>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+  
+  <ion-modal trigger="select-fruits" ref="modal">
+    <app-typeahead
+      class="ion-page"
+      title="Favorite Fruits"
+      :items="fruits"
+      :selectedItems="selectedFruits"
+      @selection-change="fruitSelectionChanged($event)"
+      @selection-cancel="modal.$el.dismiss()"
+    ></app-typeahead>
+  </ion-modal>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  import type { Item } from '../types';
+  import AppTypeahead from './AppTypeahead.vue';
+
+  export default defineComponent({
+    components: { AppTypeahead, IonContent, IonItem, IonLabel, IonList, IonModal },
+    setup() {
+      const fruits: Item[] = [
+        { text: 'Apple', value: 'apple' },
+        { text: 'Apricot', value: 'apricot' },
+        { text: 'Banana', value: 'banana' },
+        { text: 'Blackberry', value: 'blackberry' },
+        { text: 'Blueberry', value: 'blueberry' },
+        { text: 'Cherry', value: 'cherry' },
+        { text: 'Cranberry', value: 'cranberry' },
+        { text: 'Grape', value: 'grape' },
+        { text: 'Grapefruit', value: 'grapefruit' },
+        { text: 'Guava', value: 'guava' },
+        { text: 'Jackfruit', value: 'jackfruit' },
+        { text: 'Lime', value: 'lime' },
+        { text: 'Mango', value: 'mango' },
+        { text: 'Nectarine', value: 'nectarine' },
+        { text: 'Orange', value: 'orange' },
+        { text: 'Papaya', value: 'papaya' },
+        { text: 'Passionfruit', value: 'passionfruit' },
+        { text: 'Peach', value: 'peach' },
+        { text: 'Pear', value: 'pear' },
+        { text: 'Plantain', value: 'plantain' },
+        { text: 'Plum', value: 'plum' },
+        { text: 'Pineapple', value: 'pineapple' },
+        { text: 'Pomegranate', value: 'pomegranate' },
+        { text: 'Raspberry', value: 'raspberry' },
+        { text: 'Strawberry', value: 'strawberry' }
+      ];
+      const modal = ref();
+      const selectedFruitsText = ref('0 Items');
+      const selectedFruits = ref([]);
+      
+      const formatData = (data: string[]) => {
+        if (data.length === 1) {
+          const fruit = fruits.find(fruit => fruit.value === data[0])
+          return fruit.text;
+        }
+      
+        return `${data.length} items`;
+      }
+      
+      const fruitSelectionChanged = (fruits: string[]) => {
+        selectedFruits.value = fruits;
+        selectedFruitsText.value = formatData(selectedFruits.value);
+        modal.value.$el.dismiss();
+      }
+      
+      return { modal, fruits, selectedFruitsText, selectedFruits, fruitSelectionChanged }; 
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
new file mode 100644
index 00000000000..c49e7113678
--- /dev/null
+++ b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
@@ -0,0 +1,122 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="cancelChanges()">Cancel</ion-button>
+      </ion-buttons>
+      <ion-title>{{ $props.title }}</ion-title>
+      <ion-buttons slot="end">
+        <ion-button @click="confirmChanges()">Done</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar @ionInput="searchbarInput($event)"></ion-searchbar>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content color="light" class="ion-padding">
+    <ion-list id="modal-list" :inset="true">
+      <ion-item
+        v-for="item in filteredItems"
+        :key="item.value"
+      >
+        <ion-label>{{ item.text }}</ion-label>
+        <ion-checkbox
+          :value="item.value" 
+          :checked="isChecked(item.value)"
+          @ionChange="checkboxChange($event)"
+        ></ion-checkbox>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/vue';
+  import type { CheckboxCustomEvent, SearchbarCustomEvent } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    props: {
+      items: Array,
+      selectedItems: Array,
+      title: {
+        type: String,
+        default: 'Select Items'
+      }
+    },
+    emits: ['selection-cancel', 'selection-change'],
+    components: { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar },
+    setup(props, { emit }) {
+      const filteredItems = ref([...props.items]);
+      const workingSelectedValues = ref([...props.selectedItems]);
+      
+      const isChecked = (value: string) => {
+        return workingSelectedValues.value.find(item => item === value) !== undefined;
+      }
+      
+      const cancelChanges = () => {
+        emit('selection-cancel');
+      }
+      
+      const confirmChanges = () => {
+        emit('selection-change', workingSelectedValues.value);
+      }
+      
+      const searchbarInput = (ev: SearchbarCustomEvent) => {
+        filterList(ev.target.value);
+      }
+      
+      /**
+       * Update the rendered view with
+       * the provided search query. If no
+       * query is provided, all data
+       * will be rendered.
+       */
+      const filterList = (searchQuery: string | undefined) => {
+        /**
+         * If no search query is defined,
+         * return all options.
+         */
+        if (searchQuery === undefined) {
+          filteredItems.value = [...props.items];
+        } else {
+          /**
+           * Otherwise, normalize the search
+           * query and check to see which items
+           * contain the search query as a substring.
+           */
+          const normalizedQuery = searchQuery.toLowerCase(); 
+          filteredItems.value = props.items.filter(item => {
+            return item.value.includes(normalizedQuery);
+          });
+        }
+      }
+      
+      const checkboxChange = (ev: CheckboxCustomEvent) => {
+        const { checked, value } = ev.detail;
+        
+        if (checked) {
+          workingSelectedValues.value = [
+            ...workingSelectedValues.value,
+            value
+          ]
+        } else {
+          workingSelectedValues.value = workingSelectedValues.value.filter(item => item !== value);
+        }
+      }
+      
+      return { 
+        filteredItems, 
+        workingSelectedValues, 
+        isChecked, 
+        cancelChanges, 
+        confirmChanges, 
+        searchbarInput,
+        checkboxChange
+      }
+    }
+  });
+</script>
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/typeahead/vue/vue_types_ts.md b/static/usage/v7/select/typeahead/vue/vue_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v7/select/typeahead/vue/vue_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+  text: string;
+  value: string;
+};
+```
diff --git a/versioned_docs/version-v6/api/select.md b/versioned_docs/version-v6/api/select.md
index af0eb91e179..3682cc13f04 100644
--- a/versioned_docs/version-v6/api/select.md
+++ b/versioned_docs/version-v6/api/select.md
@@ -133,6 +133,14 @@ Customizing the interface dialog should be done by following the Customization s
 
 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.
 
+## Typeahead Component
+
+Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
+
+import TypeaheadExample from '@site/static/usage/v6/select/typeahead/index.md';
+
+<TypeaheadExample />
+
 ## Interfaces
 
 ### SelectChangeEventDetail

From c1c6b625752e4379b0012a078ff2d4d90d72b316 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 17 Feb 2023 21:18:59 -0500
Subject: [PATCH 211/469] docs(version): add more elements (#2779)

---
 scripts/release-notes.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/scripts/release-notes.js b/scripts/release-notes.js
index 8d83e1df023..8680e864a07 100644
--- a/scripts/release-notes.js
+++ b/scripts/release-notes.js
@@ -245,6 +245,21 @@ var versions = [
     minor: '6.3',
     symbol: 'Mn',
     element: 'Manganese'
+  },
+  {
+    minor: '6.4',
+    symbol: 'Fe',
+    element: 'Iron'
+  },
+  {
+    minor: '6.5',
+    symbol: 'Co',
+    element: 'Cobalt'
+  },
+  {
+    minor: '6.6',
+    symbol: 'Ni',
+    element: 'Nickel'
   }
 ];
 

From 13be9434d22c2143836c25f9603147a415901fe8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 20 Feb 2023 09:31:11 -0500
Subject: [PATCH 212/469] docs(react): remove old virtual scroll docs (#2780)

---
 versioned_docs/version-v6/react/virtual-scroll.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/versioned_docs/version-v6/react/virtual-scroll.md b/versioned_docs/version-v6/react/virtual-scroll.md
index a1051a42b6c..81caf093e7d 100644
--- a/versioned_docs/version-v6/react/virtual-scroll.md
+++ b/versioned_docs/version-v6/react/virtual-scroll.md
@@ -51,12 +51,6 @@ From there, we can use the `itemContent` property to pass a function that will b
 
 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`.
 
-## A Note on Ionic Components
-
-Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling.
-
-We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437.
-
 ## 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.

From 80a52d6f7c22db8861f622e1e5009233e00d1c8e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 20 Feb 2023 09:36:11 -0500
Subject: [PATCH 213/469] docs(select): use new rendering syntax for typeahead
 (#2781)

---
 .../typeahead/angular/modal-example_component_html.md      | 3 +--
 static/usage/v7/select/typeahead/demo.html                 | 5 ++---
 static/usage/v7/select/typeahead/javascript.md             | 3 +--
 .../v7/select/typeahead/react/typeahead_component_tsx.md   | 5 ++---
 .../v7/select/typeahead/vue/typeahead_component_vue.md     | 7 +++----
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
index ed5fc081852..43c768f7d18 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
@@ -17,12 +17,11 @@
 <ion-content color="light" class="ion-padding">
   <ion-list id="modal-list" [inset]="true">
     <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
-      <ion-label>{{ item.text }}</ion-label>
       <ion-checkbox
         [value]="item.value" 
         [checked]="isChecked(item.value)"
         (ionChange)="checkboxChange($event)"
-      ></ion-checkbox>
+      >{{ item.text }}</ion-checkbox>
     </ion-item>
   </ion-list>
 </ion-content>
diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html
index e9df1d455c5..df815850f89 100644
--- a/static/usage/v7/select/typeahead/demo.html
+++ b/static/usage/v7/select/typeahead/demo.html
@@ -13,7 +13,7 @@
   <body>
     <ion-app>
       <ion-content color="light">
-        <div class="container">
+        <div class="container">
           <ion-list inset="true">
             <ion-item button="true" detail="false" id="select-fruits">
               <ion-label>Favorite Fruits</ion-label>
@@ -124,8 +124,7 @@
           const checked = workingSelectedFruits.includes(item.value);
           template += `
             <ion-item>
-              <ion-label>${item.text}</ion-label>
-              <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
+              <ion-checkbox value="${item.value}" checked="${checked}">${item.text}</ion-checkbox>
             </ion-item>
           `
         });
diff --git a/static/usage/v7/select/typeahead/javascript.md b/static/usage/v7/select/typeahead/javascript.md
index 247c8ed10f2..9d5e5f7bc4a 100644
--- a/static/usage/v7/select/typeahead/javascript.md
+++ b/static/usage/v7/select/typeahead/javascript.md
@@ -110,8 +110,7 @@
       const checked = workingSelectedFruits.includes(item.value);
       template += `
         <ion-item>
-          <ion-label>${item.text}</ion-label>
-          <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
+          <ion-checkbox value="${item.value}" checked="${checked}">${item.text}</ion-checkbox>
         </ion-item>
       `
     });
diff --git a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
index 1192f3bc2a3..7c0f89d905e 100644
--- a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
+++ b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
@@ -1,6 +1,6 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
 import type { CheckboxCustomEvent } from '@ionic/react';
 import type { Item } from './types';
 
@@ -95,12 +95,11 @@ function AppTypeahead(props: TypeaheadProps) {
         <IonList id="modal-list" inset={true}>
           {filteredItems.map(item => (
             <IonItem key={item.value}>
-              <IonLabel>{item.text}</IonLabel>
               <IonCheckbox
                 value={item.value}
                 checked={isChecked(item.value)}
                 onIonChange={checkboxChange}
-              ></IonCheckbox>
+              >{item.text}</IonCheckbox>
             </IonItem>
           ))}
         </IonList>
diff --git a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
index c49e7113678..486bb000586 100644
--- a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
@@ -21,19 +21,18 @@
         v-for="item in filteredItems"
         :key="item.value"
       >
-        <ion-label>{{ item.text }}</ion-label>
         <ion-checkbox
           :value="item.value" 
           :checked="isChecked(item.value)"
           @ionChange="checkboxChange($event)"
-        ></ion-checkbox>
+        >{{ item.text }}</ion-checkbox>
       </ion-item>
     </ion-list>
   </ion-content>
 </template>
 
 <script lang="ts">
-  import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/vue';
+  import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/vue';
   import type { CheckboxCustomEvent, SearchbarCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
@@ -47,7 +46,7 @@
       }
     },
     emits: ['selection-cancel', 'selection-change'],
-    components: { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar },
+    components: { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonTitle, IonSearchbar, IonToolbar },
     setup(props, { emit }) {
       const filteredItems = ref([...props.items]);
       const workingSelectedValues = ref([...props.selectedItems]);

From 27db2c2caa7ee2d3a0f426a8c26bffd365dc7759 Mon Sep 17 00:00:00 2001
From: Roland <skofgar@users.noreply.github.com>
Date: Tue, 21 Feb 2023 14:54:09 -0700
Subject: [PATCH 214/469] chore(migration): update ionic-framework breaking
 change links (#2783)

---
 versioned_docs/version-v6/reference/migration.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/versioned_docs/version-v6/reference/migration.md b/versioned_docs/version-v6/reference/migration.md
index bb25242380d..b7f5c132cad 100644
--- a/versioned_docs/version-v6/reference/migration.md
+++ b/versioned_docs/version-v6/reference/migration.md
@@ -24,7 +24,7 @@ Migrating an app from 4.x to 5.x requires a few updates to the API properties, C
 
 ### 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.
+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/main/BREAKING.md#version-5x) in the Ionic core repo.
 
 ### Packages and Dependencies
 
@@ -51,7 +51,7 @@ If you would like a fresh project starter, a new project base can be created fro
 ## 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.
+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/main/angular/BREAKING.md) in the Ionic core repo.
 :::
 
 We suggest the following general process when migrating an existing application from Ionic 3 to 4:
@@ -283,7 +283,7 @@ For a detailed explanation of lazy loading in V4 project, check out the [Angular
 
 ## 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>.
+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/main/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.
 

From 3c816de16d36c1ff4e8f7395a3063cda8e74c12c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 22 Feb 2023 08:32:09 -0500
Subject: [PATCH 215/469] docs(input): add playground for filtering value
 (#2782)

---
 docs/api/input.md                             |  9 ++++
 .../angular/example_component_html.md         | 12 +++++
 .../filtering/angular/example_component_ts.md | 27 +++++++++++
 static/usage/v6/input/filtering/demo.html     | 39 ++++++++++++++++
 static/usage/v6/input/filtering/index.md      | 20 ++++++++
 static/usage/v6/input/filtering/javascript.md | 17 +++++++
 static/usage/v6/input/filtering/react.md      | 41 +++++++++++++++++
 static/usage/v6/input/filtering/vue.md        | 46 +++++++++++++++++++
 .../angular/example_component_html.md         | 12 +++++
 .../filtering/angular/example_component_ts.md | 27 +++++++++++
 static/usage/v7/input/filtering/demo.html     | 38 +++++++++++++++
 static/usage/v7/input/filtering/index.md      | 20 ++++++++
 static/usage/v7/input/filtering/javascript.md | 16 +++++++
 static/usage/v7/input/filtering/react.md      | 41 +++++++++++++++++
 static/usage/v7/input/filtering/vue.md        | 46 +++++++++++++++++++
 versioned_docs/version-v6/api/input.md        | 10 ++++
 16 files changed, 421 insertions(+)
 create mode 100644 static/usage/v6/input/filtering/angular/example_component_html.md
 create mode 100644 static/usage/v6/input/filtering/angular/example_component_ts.md
 create mode 100644 static/usage/v6/input/filtering/demo.html
 create mode 100644 static/usage/v6/input/filtering/index.md
 create mode 100644 static/usage/v6/input/filtering/javascript.md
 create mode 100644 static/usage/v6/input/filtering/react.md
 create mode 100644 static/usage/v6/input/filtering/vue.md
 create mode 100644 static/usage/v7/input/filtering/angular/example_component_html.md
 create mode 100644 static/usage/v7/input/filtering/angular/example_component_ts.md
 create mode 100644 static/usage/v7/input/filtering/demo.html
 create mode 100644 static/usage/v7/input/filtering/index.md
 create mode 100644 static/usage/v7/input/filtering/javascript.md
 create mode 100644 static/usage/v7/input/filtering/react.md
 create mode 100644 static/usage/v7/input/filtering/vue.md

diff --git a/docs/api/input.md b/docs/api/input.md
index 4ffff02b114..4d7df8eef12 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -82,6 +82,15 @@ import Counter from '@site/static/usage/v7/input/counter/index.md';
 
 <Counter />
 
+## Filtering User Input
+
+Developers can use the `ionInput` event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters.
+
+When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync.
+
+import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
+
+<FilteringData />
 
 ## Theming
 
diff --git a/static/usage/v6/input/filtering/angular/example_component_html.md b/static/usage/v6/input/filtering/angular/example_component_html.md
new file mode 100644
index 00000000000..354c1e65610
--- /dev/null
+++ b/static/usage/v6/input/filtering/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Alphanumeric Characters</ion-label>
+    <ion-input
+      [value]="inputModel"
+      (ionInput)="onInput($event)"
+      #ionInputEl
+    ></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v6/input/filtering/angular/example_component_ts.md b/static/usage/v6/input/filtering/angular/example_component_ts.md
new file mode 100644
index 00000000000..03f71066cc3
--- /dev/null
+++ b/static/usage/v6/input/filtering/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonInput } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  inputModel = '';
+  
+  @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
+  
+  onInput(ev) {
+    const value = ev.target!.value;
+    
+    // Removes non alphanumeric characters
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+    
+    /**
+     * Update both the state variable and
+     * the component to keep them in sync.
+     */
+    this.ionInputEl.value = this.inputModel = filteredValue;
+  }
+}
+```
diff --git a/static/usage/v6/input/filtering/demo.html b/static/usage/v6/input/filtering/demo.html
new file mode 100644
index 00000000000..ae4cb5381f9
--- /dev/null
+++ b/static/usage/v6/input/filtering/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>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" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-label>Alphanumeric Characters</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const input = document.querySelector('ion-input');
+    input.addEventListener('ionInput', (ev) => {
+      const value = ev.target.value;
+
+      // Removes non alphanumeric characters
+      input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
+    });
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v6/input/filtering/index.md b/static/usage/v6/input/filtering/index.md
new file mode 100644
index 00000000000..41b9ef2f591
--- /dev/null
+++ b/static/usage/v6/input/filtering/index.md
@@ -0,0 +1,20 @@
+import 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="6" 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/input/filtering/demo.html" />
diff --git a/static/usage/v6/input/filtering/javascript.md b/static/usage/v6/input/filtering/javascript.md
new file mode 100644
index 00000000000..007a211e40f
--- /dev/null
+++ b/static/usage/v6/input/filtering/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-label>Alphanumeric Characters</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+</ion-list>
+
+<script>
+  var input = document.querySelector('ion-input');
+  input.addEventListener('ionInput', (ev) => {
+    const value = ev.target.value;
+    // Removes non alphanumeric characters
+    input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
+  });
+</script>
+```
\ No newline at end of file
diff --git a/static/usage/v6/input/filtering/react.md b/static/usage/v6/input/filtering/react.md
new file mode 100644
index 00000000000..ae2df1a1cdd
--- /dev/null
+++ b/static/usage/v6/input/filtering/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+  const [inputModel, setInputModel ] = useState('');
+  const ionInputEl = useRef<HTMLIonInputElement>(null);
+  
+  const onInput = (ev: Event) => {
+    const value = (ev.target as HTMLIonInputElement).value as string;
+    
+    // Removes non alphanumeric characters
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+    
+    /**
+     * Update both the state variable and
+     * the component to keep them in sync.
+     */
+    setInputModel(filteredValue);
+    
+    const inputCmp = ionInputEl.current;
+    if (inputCmp !== null) {
+      inputCmp.value = filteredValue;
+    }
+  }
+  
+  return (
+    <IonList>
+      <IonItem>
+        <IonLabel>Alphanumeric Characters</IonLabel>
+        <IonInput
+          value={inputModel}
+          onIonInput={onInput}
+          ref={ionInputEl}
+        ></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/filtering/vue.md b/static/usage/v6/input/filtering/vue.md
new file mode 100644
index 00000000000..bfce3c9c58b
--- /dev/null
+++ b/static/usage/v6/input/filtering/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>Alphanumeric Characters</ion-label>
+      <ion-input
+        :value="inputModel"
+        @ionInput="onInput($event)"
+        ref="ionInputEl"
+      ></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonLabel, IonList },
+    setup() {
+      const ionInputEl = ref();
+      const inputModel = ref('');
+      const onInput = (ev) => {
+        const value = ev.target!.value;
+        
+        // Removes non alphanumeric characters
+        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+        
+        /**
+         * Update both the state variable and
+         * the component to keep them in sync.
+         */
+        inputModel.value = filteredValue;
+        
+        const inputCmp = ionInputEl.value;
+        if (inputCmp !== undefined) {
+          inputCmp.$el.value = filteredValue;
+        }
+      }
+      
+      return { ionInputEl, inputModel, onInput };
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/input/filtering/angular/example_component_html.md b/static/usage/v7/input/filtering/angular/example_component_html.md
new file mode 100644
index 00000000000..da2f4776bd2
--- /dev/null
+++ b/static/usage/v7/input/filtering/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input
+      label="Alphanumeric Characters" 
+      [value]="inputModel"
+      (ionInput)="onInput($event)"
+      #ionInputEl
+    ></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/filtering/angular/example_component_ts.md b/static/usage/v7/input/filtering/angular/example_component_ts.md
new file mode 100644
index 00000000000..03f71066cc3
--- /dev/null
+++ b/static/usage/v7/input/filtering/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonInput } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  inputModel = '';
+  
+  @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
+  
+  onInput(ev) {
+    const value = ev.target!.value;
+    
+    // Removes non alphanumeric characters
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+    
+    /**
+     * Update both the state variable and
+     * the component to keep them in sync.
+     */
+    this.ionInputEl.value = this.inputModel = filteredValue;
+  }
+}
+```
diff --git a/static/usage/v7/input/filtering/demo.html b/static/usage/v7/input/filtering/demo.html
new file mode 100644
index 00000000000..f7a4c1b3aa7
--- /dev/null
+++ b/static/usage/v7/input/filtering/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>Input</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-list>
+          <ion-item>
+            <ion-input label="Alphanumeric Characters"></ion-input>
+          </ion-item>
+        </ion-list>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const input = document.querySelector('ion-input');
+    input.addEventListener('ionInput', (ev) => {
+      const value = ev.target.value;
+
+      // Removes non alphanumeric characters
+      input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
+    });
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/input/filtering/index.md b/static/usage/v7/input/filtering/index.md
new file mode 100644
index 00000000000..f5f4019cf97
--- /dev/null
+++ b/static/usage/v7/input/filtering/index.md
@@ -0,0 +1,20 @@
+import 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/input/filtering/demo.html" />
diff --git a/static/usage/v7/input/filtering/javascript.md b/static/usage/v7/input/filtering/javascript.md
new file mode 100644
index 00000000000..b70d42c6dd1
--- /dev/null
+++ b/static/usage/v7/input/filtering/javascript.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input label="Alphanumeric Characters"></ion-input>
+  </ion-item>
+</ion-list>
+
+<script>
+  var input = document.querySelector('ion-input');
+  input.addEventListener('ionInput', (ev) => {
+    const value = ev.target.value;
+    // Removes non alphanumeric characters
+    input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
+  });
+</script>
+```
\ No newline at end of file
diff --git a/static/usage/v7/input/filtering/react.md b/static/usage/v7/input/filtering/react.md
new file mode 100644
index 00000000000..7218199a3d2
--- /dev/null
+++ b/static/usage/v7/input/filtering/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  const [inputModel, setInputModel ] = useState('');
+  const ionInputEl = useRef<HTMLIonInputElement>(null);
+  
+  const onInput = (ev: Event) => {
+    const value = (ev.target as HTMLIonInputElement).value as string;
+    
+    // Removes non alphanumeric characters
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+    
+    /**
+     * Update both the state variable and
+     * the component to keep them in sync.
+     */
+    setInputModel(filteredValue);
+    
+    const inputCmp = ionInputEl.current;
+    if (inputCmp !== null) {
+      inputCmp.value = filteredValue;
+    }
+  }
+  
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput
+          label="Alphanumeric Characters"
+          value={inputModel}
+          onIonInput={onInput}
+          ref={ionInputEl}
+        ></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md
new file mode 100644
index 00000000000..dd93e9bb2c7
--- /dev/null
+++ b/static/usage/v7/input/filtering/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input
+        label="Alphanumeric Characters" 
+        :value="inputModel"
+        @ionInput="onInput($event)"
+        ref="ionInputEl"
+      ></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonList } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonList },
+    setup() {
+      const ionInputEl = ref();
+      const inputModel = ref('');
+      const onInput = (ev) => {
+        const value = ev.target!.value;
+        
+        // Removes non alphanumeric characters
+        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+        
+        /**
+         * Update both the state variable and
+         * the component to keep them in sync.
+         */
+        inputModel.value = filteredValue;
+        
+        const inputCmp = ionInputEl.value;
+        if (inputCmp !== undefined) {
+          inputCmp.$el.value = filteredValue;
+        }
+      }
+      
+      return { ionInputEl, inputModel, onInput };
+    }
+  });
+</script>
+```
diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.md
index 94ff562caff..f9c328996e7 100644
--- a/versioned_docs/version-v6/api/input.md
+++ b/versioned_docs/version-v6/api/input.md
@@ -81,6 +81,16 @@ import Counter from '@site/static/usage/v6/item/counter/index.md';
 
 <Counter />
 
+## Filtering User Input
+
+Developers can use the `ionInput` event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters.
+
+When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync.
+
+import FilteringData from '@site/static/usage/v6/input/filtering/index.md';
+
+<FilteringData />
+
 ## Theming
 
 ### Colors

From 8036f636c27eec9f3a407dc65c0c1ebfba85e63f Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 22 Feb 2023 09:01:51 -0600
Subject: [PATCH 216/469] docs(datetime): add highlightedDates playgrounds
 (#2769)

---
 docs/api/datetime.md                          | 27 +++++++++
 .../array/angular/example_component_html.md   |  7 +++
 .../array/angular/example_component_ts.md     | 32 +++++++++++
 .../datetime/highlightedDates/array/demo.html | 55 +++++++++++++++++++
 .../datetime/highlightedDates/array/index.md  | 25 +++++++++
 .../highlightedDates/array/javascript.md      | 29 ++++++++++
 .../datetime/highlightedDates/array/react.md  | 35 ++++++++++++
 .../v6/datetime/highlightedDates/array/vue.md | 44 +++++++++++++++
 .../angular/example_component_html.md         |  3 +
 .../callback/angular/example_component_ts.md  | 30 ++++++++++
 .../highlightedDates/callback/demo.html       | 53 ++++++++++++++++++
 .../highlightedDates/callback/index.md        | 25 +++++++++
 .../highlightedDates/callback/javascript.md   | 27 +++++++++
 .../highlightedDates/callback/react.md        | 32 +++++++++++
 .../datetime/highlightedDates/callback/vue.md | 38 +++++++++++++
 .../array/angular/example_component_html.md   |  7 +++
 .../array/angular/example_component_ts.md     | 32 +++++++++++
 .../datetime/highlightedDates/array/demo.html | 55 +++++++++++++++++++
 .../datetime/highlightedDates/array/index.md  | 25 +++++++++
 .../highlightedDates/array/javascript.md      | 29 ++++++++++
 .../datetime/highlightedDates/array/react.md  | 35 ++++++++++++
 .../v7/datetime/highlightedDates/array/vue.md | 44 +++++++++++++++
 .../angular/example_component_html.md         |  3 +
 .../callback/angular/example_component_ts.md  | 30 ++++++++++
 .../highlightedDates/callback/demo.html       | 53 ++++++++++++++++++
 .../highlightedDates/callback/index.md        | 25 +++++++++
 .../highlightedDates/callback/javascript.md   | 27 +++++++++
 .../highlightedDates/callback/react.md        | 32 +++++++++++
 .../datetime/highlightedDates/callback/vue.md | 38 +++++++++++++
 versioned_docs/version-v6/api/datetime.md     | 27 +++++++++
 30 files changed, 924 insertions(+)
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/demo.html
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/index.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/javascript.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/react.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/vue.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/demo.html
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/index.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/javascript.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/react.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/vue.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/demo.html
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/index.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/javascript.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/react.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/vue.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/demo.html
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/index.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/javascript.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/react.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/vue.md

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index ab856254cac..082d75358ba 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -31,6 +31,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/s
 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 HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md';
+import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md';
+
 import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
 
 import Theming from '@site/static/usage/v7/datetime/theming/index.md';
@@ -283,6 +286,30 @@ Developers can provide their own buttons for advanced custom behavior.
 
 <CustomizingButtons />
 
+## Highlighting Specific Dates
+
+Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
+
+When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
+
+To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
+
+:::note
+This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
+:::
+
+### Using Array
+
+An array is better when the highlights apply to fixed dates, such as due dates.
+
+<HighlightedDatesArray />
+
+### Using Callback
+
+A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
+
+<HighlightedDatesCallback />
+
 ## 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`.
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
new file mode 100644
index 00000000000..46de9b8c9a6
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  presentation="date"
+  value="2023-01-01"
+  [highlightedDates]="highlightedDates"
+></ion-datetime>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
new file mode 100644
index 00000000000..4b46ab4c705
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  highlightedDates = [
+    {
+      date: '2023-01-05',
+      textColor: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      textColor: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
+    },
+    {
+      date: '2023-01-23',
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
+    }
+  ];
+}
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/demo.html b/static/usage/v6/datetime/highlightedDates/array/demo.html
new file mode 100644
index 00000000000..d8faeba5b8b
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/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>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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = [
+      {
+        date: '2023-01-05',
+        textColor: '#800080',
+        backgroundColor: '#ffc0cb',
+      },
+      {
+        date: '2023-01-10',
+        textColor: '#09721b',
+        backgroundColor: '#c8e5d0',
+      },
+      {
+        date: '2023-01-20',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
+      },
+      {
+        date: '2023-01-23',
+        textColor: 'rgb(68, 10, 184)',
+        backgroundColor: 'rgb(211, 200, 229)'
+      }
+    ];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/highlightedDates/array/index.md b/static/usage/v6/datetime/highlightedDates/array/index.md
new file mode 100644
index 00000000000..6eb7c9ec130
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/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
+  size="medium"
+  version={6}
+  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/highlightedDates/array/demo.html"
+/>
diff --git a/static/usage/v6/datetime/highlightedDates/array/javascript.md b/static/usage/v6/datetime/highlightedDates/array/javascript.md
new file mode 100644
index 00000000000..5a702fbfab1
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+
+<script>
+  var datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = [
+    {
+      date: '2023-01-05',
+      textColor: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      textColor: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
+    },
+    {
+      date: '2023-01-23',
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
+    }
+  ];
+</script>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/react.md b/static/usage/v6/datetime/highlightedDates/array/react.md
new file mode 100644
index 00000000000..a9ef5c776d9
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      value="2023-01-01"
+      highlightedDates={[
+        {
+          date: '2023-01-05',
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          textColor: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        },
+        {
+          date: '2023-01-23',
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
+        }
+      ]}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/vue.md b/static/usage/v6/datetime/highlightedDates/array/vue.md
new file mode 100644
index 00000000000..62dbec39055
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-datetime
+    presentation="date"
+    value="2023-01-01"
+    :highlighted-dates="highlightedDates"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = [
+        {
+          date: '2023-01-05',
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          textColor: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        },
+        {
+          date: '2023-01-23',
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
+        }
+      ];
+      
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md
new file mode 100644
index 00000000000..634090ab0ab
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
new file mode 100644
index 00000000000..7186ae3cc64
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        textColor: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
+      };
+    }
+
+    return undefined;
+  };
+}
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/demo.html b/static/usage/v6/datetime/highlightedDates/callback/demo.html
new file mode 100644
index 00000000000..50c62e09c5f
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/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>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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/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>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = (isoString) => {
+      const date = new Date(isoString);
+      const utcDay = date.getUTCDate();
+
+      if(utcDay % 5 === 0) {
+        return {
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        };
+      }
+
+      if(utcDay % 3 === 0) {
+        return {
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        };
+      }
+
+      return undefined;
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/highlightedDates/callback/index.md b/static/usage/v6/datetime/highlightedDates/callback/index.md
new file mode 100644
index 00000000000..106ec4476e7
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/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
+  size="medium"
+  version={6}
+  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/highlightedDates/callback/demo.html"
+/>
diff --git a/static/usage/v6/datetime/highlightedDates/callback/javascript.md b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
new file mode 100644
index 00000000000..270967cccd8
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
@@ -0,0 +1,27 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+
+<script>
+  var datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        textColor: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
+      };
+    }
+
+    return undefined;
+  };
+</script>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/react.md b/static/usage/v6/datetime/highlightedDates/callback/react.md
new file mode 100644
index 00000000000..6830e55eeff
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      highlightedDates={(isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            textColor: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
+          };
+        }
+
+        return undefined;
+      }}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/vue.md b/static/usage/v6/datetime/highlightedDates/callback/vue.md
new file mode 100644
index 00000000000..54873e03eaa
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = (isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            textColor: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
+          };
+        }
+
+        return undefined;
+      };
+
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
new file mode 100644
index 00000000000..46de9b8c9a6
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  presentation="date"
+  value="2023-01-01"
+  [highlightedDates]="highlightedDates"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
new file mode 100644
index 00000000000..4b46ab4c705
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  highlightedDates = [
+    {
+      date: '2023-01-05',
+      textColor: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      textColor: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
+    },
+    {
+      date: '2023-01-23',
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
+    }
+  ];
+}
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
new file mode 100644
index 00000000000..d8faeba5b8b
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/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>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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = [
+      {
+        date: '2023-01-05',
+        textColor: '#800080',
+        backgroundColor: '#ffc0cb',
+      },
+      {
+        date: '2023-01-10',
+        textColor: '#09721b',
+        backgroundColor: '#c8e5d0',
+      },
+      {
+        date: '2023-01-20',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
+      },
+      {
+        date: '2023-01-23',
+        textColor: 'rgb(68, 10, 184)',
+        backgroundColor: 'rgb(211, 200, 229)'
+      }
+    ];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/highlightedDates/array/index.md b/static/usage/v7/datetime/highlightedDates/array/index.md
new file mode 100644
index 00000000000..6438d84fcf3
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/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
+  size="medium"
+  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/datetime/highlightedDates/array/demo.html"
+/>
diff --git a/static/usage/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md
new file mode 100644
index 00000000000..5a702fbfab1
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+
+<script>
+  var datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = [
+    {
+      date: '2023-01-05',
+      textColor: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      textColor: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
+    },
+    {
+      date: '2023-01-23',
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
+    }
+  ];
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/react.md b/static/usage/v7/datetime/highlightedDates/array/react.md
new file mode 100644
index 00000000000..a9ef5c776d9
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      value="2023-01-01"
+      highlightedDates={[
+        {
+          date: '2023-01-05',
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          textColor: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        },
+        {
+          date: '2023-01-23',
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
+        }
+      ]}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
new file mode 100644
index 00000000000..62dbec39055
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-datetime
+    presentation="date"
+    value="2023-01-01"
+    :highlighted-dates="highlightedDates"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = [
+        {
+          date: '2023-01-05',
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          textColor: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        },
+        {
+          date: '2023-01-23',
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
+        }
+      ];
+      
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
new file mode 100644
index 00000000000..634090ab0ab
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
new file mode 100644
index 00000000000..7186ae3cc64
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        textColor: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
+      };
+    }
+
+    return undefined;
+  };
+}
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html
new file mode 100644
index 00000000000..50c62e09c5f
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/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>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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/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>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = (isoString) => {
+      const date = new Date(isoString);
+      const utcDay = date.getUTCDate();
+
+      if(utcDay % 5 === 0) {
+        return {
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        };
+      }
+
+      if(utcDay % 3 === 0) {
+        return {
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        };
+      }
+
+      return undefined;
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/highlightedDates/callback/index.md b/static/usage/v7/datetime/highlightedDates/callback/index.md
new file mode 100644
index 00000000000..106f90210cf
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/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
+  size="medium"
+  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/datetime/highlightedDates/callback/demo.html"
+/>
diff --git a/static/usage/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
new file mode 100644
index 00000000000..270967cccd8
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
@@ -0,0 +1,27 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+
+<script>
+  var datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        textColor: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
+      };
+    }
+
+    return undefined;
+  };
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/react.md b/static/usage/v7/datetime/highlightedDates/callback/react.md
new file mode 100644
index 00000000000..6830e55eeff
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      highlightedDates={(isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            textColor: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
+          };
+        }
+
+        return undefined;
+      }}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
new file mode 100644
index 00000000000..54873e03eaa
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = (isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            textColor: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
+          };
+        }
+
+        return undefined;
+      };
+
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index 021146d87ff..a4f93b4655c 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -32,6 +32,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v6/datetime/buttons/s
 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 HighlightedDatesArray from '@site/static/usage/v6/datetime/highlightedDates/array/index.md';
+import HighlightedDatesCallback from '@site/static/usage/v6/datetime/highlightedDates/callback/index.md';
+
 import MultipleDateSelection from '@site/static/usage/v6/datetime/multiple/index.md';
 
 import Theming from '@site/static/usage/v6/datetime/theming/index.md';
@@ -286,6 +289,30 @@ Developers can provide their own buttons for advanced custom behavior.
 
 <CustomizingButtons />
 
+## Highlighting Specific Dates
+
+Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
+
+When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
+
+To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
+
+:::note
+This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
+:::
+
+### Using Array
+
+An array is better when the highlights apply to fixed dates, such as due dates.
+
+<HighlightedDatesArray />
+
+### Using Callback
+
+A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
+
+<HighlightedDatesCallback />
+
 ## 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`.

From 0d42cda464b747207a4d86e95c8411a3a2f3097d Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 23 Feb 2023 11:18:32 -0600
Subject: [PATCH 217/469] fix(icon): add explicit playground versions, remove
 stray files (#2788)

---
 static/usage/icon/basic/angular.md    |  6 ------
 static/usage/icon/basic/demo.html     | 28 ---------------------------
 static/usage/icon/basic/index.md      |  8 --------
 static/usage/icon/basic/javascript.md |  6 ------
 static/usage/icon/basic/react.md      | 16 ---------------
 static/usage/icon/basic/vue.md        | 20 -------------------
 static/usage/v6/icon/basic/index.md   |  7 ++++++-
 static/usage/v7/icon/basic/index.md   |  7 ++++++-
 8 files changed, 12 insertions(+), 86 deletions(-)
 delete mode 100644 static/usage/icon/basic/angular.md
 delete mode 100644 static/usage/icon/basic/demo.html
 delete mode 100644 static/usage/icon/basic/index.md
 delete mode 100644 static/usage/icon/basic/javascript.md
 delete mode 100644 static/usage/icon/basic/react.md
 delete mode 100644 static/usage/icon/basic/vue.md

diff --git a/static/usage/icon/basic/angular.md b/static/usage/icon/basic/angular.md
deleted file mode 100644
index 491062dae64..00000000000
--- a/static/usage/icon/basic/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-icon name="logo-ionic"></ion-icon>
-<ion-icon name="logo-ionic" size="large"></ion-icon>
-<ion-icon name="logo-ionic" color="primary"></ion-icon>
-<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
-```
\ No newline at end of file
diff --git a/static/usage/icon/basic/demo.html b/static/usage/icon/basic/demo.html
deleted file mode 100644
index 4504eab70b8..00000000000
--- a/static/usage/icon/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>Icon</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.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-icon name="logo-ionic"></ion-icon>
-        <ion-icon name="logo-ionic" size="large"></ion-icon>
-        <ion-icon name="logo-ionic" color="primary"></ion-icon>
-        <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/usage/icon/basic/index.md b/static/usage/icon/basic/index.md
deleted file mode 100644
index b1c2cba7497..00000000000
--- a/static/usage/icon/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="xsmall" code={{ javascript, react, vue, angular }} src="usage/icon/basic/demo.html" />
\ No newline at end of file
diff --git a/static/usage/icon/basic/javascript.md b/static/usage/icon/basic/javascript.md
deleted file mode 100644
index 491062dae64..00000000000
--- a/static/usage/icon/basic/javascript.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-icon name="logo-ionic"></ion-icon>
-<ion-icon name="logo-ionic" size="large"></ion-icon>
-<ion-icon name="logo-ionic" color="primary"></ion-icon>
-<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
-```
\ No newline at end of file
diff --git a/static/usage/icon/basic/react.md b/static/usage/icon/basic/react.md
deleted file mode 100644
index facad70cbc4..00000000000
--- a/static/usage/icon/basic/react.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```tsx
-import React from 'react';
-import { IonIcon } from '@ionic/react';
-import { logoIonic } from 'ionicons/icons';
-function Example() {
-  return (
-    <>
-      <IonIcon icon={logoIonic}></IonIcon>
-      <IonIcon icon={logoIonic} size="large"></IonIcon>
-      <IonIcon icon={logoIonic} color="primary"></IonIcon>
-      <IonIcon icon={logoIonic} size="large" color="primary"></IonIcon>
-    </>
-  );
-}
-export default Example;
-```
\ No newline at end of file
diff --git a/static/usage/icon/basic/vue.md b/static/usage/icon/basic/vue.md
deleted file mode 100644
index 3ced71f77af..00000000000
--- a/static/usage/icon/basic/vue.md
+++ /dev/null
@@ -1,20 +0,0 @@
-```html
-<template>
-  <ion-icon :icon="logoIonic"></ion-icon>
-  <ion-icon :icon="logoIonic" size="large"></ion-icon>
-  <ion-icon :icon="logoIonic" color="primary"></ion-icon>
-  <ion-icon :icon="logoIonic" size="large" color="primary"></ion-icon>
-</template>
-
-<script lang="ts">
-  import { IonIcon } from '@ionic/vue';
-  import { logoIonic } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-  export default defineComponent({
-    components: { IonIcon },
-    setup() {
-      return { logoIonic };
-    },
-  });
-</script>
-```
\ No newline at end of file
diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md
index a0a026e6e78..ccb83aec3df 100644
--- a/static/usage/v6/icon/basic/index.md
+++ b/static/usage/v6/icon/basic/index.md
@@ -5,4 +5,9 @@ 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/icon/basic/demo.html" />
+<Playground
+  version={6}
+  size="xsmall"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/icon/basic/demo.html"
+/>
diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md
index f654aceed5e..c26fa6e35ac 100644
--- a/static/usage/v7/icon/basic/index.md
+++ b/static/usage/v7/icon/basic/index.md
@@ -5,4 +5,9 @@ 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/v7/icon/basic/demo.html" />
+<Playground
+  version={7}
+  size="xsmall"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/icon/basic/demo.html"
+/>

From 8b0fc89d47a9a7a63bddb46d9d76afd8064cd2d2 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 24 Feb 2023 11:04:47 -0500
Subject: [PATCH 218/469] docs(picker): add ariaLabel to PickerColumnOption

Part of https://github.com/ionic-team/ionic-framework/pull/26749
---
 docs/api/picker.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/api/picker.md b/docs/api/picker.md
index 8a1d4d59f64..eca018fb227 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -95,6 +95,10 @@ interface PickerColumnOption {
   duration?: number;
   transform?: string;
   selected?: boolean;
+  /**
+   * The optional text to assign as the aria-label on the picker column option.
+   */
+  ariaLabel?: string;
 }
 ```
 

From 997f0afc3f7a666254440ce4c82b453958343553 Mon Sep 17 00:00:00 2001
From: Mark Tiahrt <Mark.Tiahrt@Outlook.com>
Date: Mon, 27 Feb 2023 07:48:01 -0700
Subject: [PATCH 219/469] docs(react): update router quick start for react
 router 5 (#2334)

---
 docs/react/quickstart.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index a4338661e06..07d300a5a73 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -235,19 +235,21 @@ import { add } from ‘ionicons/icons’;
 
 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.
+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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. 
 
 ```tsx
 import { add } from 'ionicons/icons';
+import { useHistory } from 'react-router';
 ...
-const Home: React.FC<RouteComponentProps> = (props) => {
+const Home: React.FC<RouteComponentProps> = () => {
+  const history = useHistory();
   return (
     <IonPage>
       <IonHeader>...</IonHeader>
       <IonContent>
         <IonList>...</IonList>
         <IonFab vertical="bottom" horizontal="end" slot="fixed">
-          <IonFabButton onClick={() => props.history.push('/new')}>
+          <IonFabButton onClick={() => history.push('/new')}>
             <IonIcon icon={add} />
           </IonFabButton>
         </IonFab>

From a9772286ec6a0f75e13f3a4865e03c26e7687a2e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 27 Feb 2023 11:54:03 -0500
Subject: [PATCH 220/469] docs(migrate): update guide for v7 beta 5 (#2792)

---
 docs/reference/support.md |  2 +-
 docs/updating/7-0.md      | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index 652d24305fe..e7a0ee5da74 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -43,7 +43,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-| v7        | v13                     | v15.x^                   | 4.4+       |   
+| v7        | v14                     | v15.x^                  | 4.6+       |   
 | v6        | v12                     | v15.x^                  | 4.0+       |
 | v5        | v8.2                    | v12.x                   | 3.5+       |
 | v4        | v8.2                    | v11.x                   | 3.5+       |
diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index 21b5cc86e0a..a6a4eca0875 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -16,7 +16,7 @@ This guide assumes that you have already updated your app to the latest version
 
 ### Angular
 
-1. Ionic 7 supports Angular 13+. Update to the latest version of Angular by following the [Angular Update Guide](https://update.angular.io/).
+1. Ionic 7 supports Angular 14+. 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 7:
 
 ```shell
@@ -96,6 +96,10 @@ iOS >=14
 1. Remove any code that sets the `value` property to the empty string (`''`).
 2. Remove any code that accesses the time zone information on the `value` property. Datetime does not manage time zones, so any time zone information provided is ignored.
 
+### Input
+
+1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
+
 ### Modal
 
 1. Remove any usage of the `swipeToClose` property. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property to control when a modal can dismiss.
@@ -105,6 +109,10 @@ iOS >=14
 
 1. Remove any code that accesses `refresh` on `ion-picker-column`. Developers should use the `columns` property on `ion-picker` to refresh the view instead.
 
+### Searchbar
+
+1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
+
 ### Segment
 
 1. Remove any code that sets the `value` property to `null`. Developers should use either `''` or `undefined` instead.
@@ -117,6 +125,11 @@ iOS >=14
 [React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
 [Vue Migration Guide](https://ionicframework.com/docs/vue/slides)
 
+### Textarea
+
+1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
+
+
 ### Toggle
 
 1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--track-background` and `--track-background-checked`, respectively.

From 739161ec7a2047209b1d75445d5efa33ba5659fc Mon Sep 17 00:00:00 2001
From: Samson <61533410+samsonkumawong@users.noreply.github.com>
Date: Tue, 28 Feb 2023 02:57:42 +0800
Subject: [PATCH 221/469] fix(gestures): update ionic v5 angular gesture
 example (#2328)

Fixed ElementRef paragraph using nativeElement in angular example
Added missing gestureName to Angular gesture config in angular example
---
 versioned_docs/version-v5/utilities/gestures.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/versioned_docs/version-v5/utilities/gestures.md b/versioned_docs/version-v5/utilities/gestures.md
index 82248595ed7..1d5a5689eda 100644
--- a/versioned_docs/version-v5/utilities/gestures.md
+++ b/versioned_docs/version-v5/utilities/gestures.md
@@ -173,6 +173,7 @@ const onMove = (detail) => {
 
 ngOnInit() {
   const gesture = this.gestureCtrl.create({
+    gestureName: 'my-gesture',
     el: this.rectangle.nativeElement,
     onMove: (detail) => { this.onMove(detail); }
   })
@@ -186,7 +187,7 @@ private onMove(detail) {
   const deltaX = detail.deltaX;
   const velocityX = detail.velocityX;
 
-  this.p.innerHTML = `
+  this.p.nativeElement.innerHTML = `
     <div>Type: ${type}</div>
     <div>Current X: ${currentX}</div>
     <div>Delta X: ${deltaX}</div>

From ea2109d9aca7f16fd5182edbfbbe560a8cbdc154 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 27 Feb 2023 16:54:19 -0500
Subject: [PATCH 222/469] fix(playground): warn if version not specified
 (#2668)

---
 docs/api/select.md                                |  4 ++--
 src/components/global/Playground/index.tsx        | 15 +++++++++------
 .../accordion/accessibility/animations/index.md   |  1 +
 static/usage/v6/accordion/basic/index.md          |  1 +
 .../advanced-expansion-styles/index.md            |  1 +
 .../customization/expansion-styles/index.md       |  1 +
 .../v6/accordion/customization/icons/index.md     |  1 +
 .../v6/accordion/customization/theming/index.md   |  1 +
 static/usage/v6/accordion/disable-group/index.md  |  1 +
 static/usage/v6/accordion/disable/group/index.md  |  1 +
 .../v6/accordion/disable/individual/index.md      |  1 +
 static/usage/v6/accordion/listen-changes/index.md |  1 +
 static/usage/v6/accordion/multiple/index.md       |  1 +
 static/usage/v6/accordion/readonly/group/index.md |  1 +
 .../v6/accordion/readonly/individual/index.md     |  1 +
 static/usage/v6/accordion/toggle/index.md         |  1 +
 static/usage/v6/action-sheet/basic/index.md       |  1 +
 .../action-sheet/theming/css-properties/index.md  |  1 +
 .../v6/action-sheet/theming/styling/index.md      |  1 +
 static/usage/v6/alert/buttons/index.md            |  1 +
 static/usage/v6/alert/customization/index.md      |  1 +
 static/usage/v6/alert/inputs/radios/index.md      |  1 +
 static/usage/v6/alert/inputs/text-inputs/index.md |  1 +
 .../usage/v6/alert/presenting/controller/index.md |  1 +
 static/usage/v6/avatar/basic/index.md             |  2 +-
 static/usage/v6/avatar/chip/index.md              |  2 +-
 static/usage/v6/avatar/item/index.md              |  2 +-
 .../v6/avatar/theming/css-properties/index.md     |  1 +
 static/usage/v6/back-button/basic/index.md        |  1 +
 static/usage/v6/back-button/custom/index.md       |  1 +
 static/usage/v6/backdrop/basic/index.md           |  7 ++++++-
 static/usage/v6/backdrop/styling/index.md         |  1 +
 static/usage/v6/badge/basic/index.md              |  2 +-
 static/usage/v6/badge/theming/colors/index.md     |  7 ++++++-
 .../v6/badge/theming/css-properties/index.md      |  1 +
 static/usage/v6/breadcrumbs/basic/index.md        |  2 +-
 .../collapsing-items/expand-on-click/index.md     |  1 +
 .../collapsing-items/items-before-after/index.md  |  1 +
 .../collapsing-items/max-items/index.md           |  1 +
 .../collapsing-items/popover-on-click/index.md    |  1 +
 .../breadcrumbs/icons/custom-separators/index.md  |  6 +++++-
 .../v6/breadcrumbs/icons/icons-on-items/index.md  |  1 +
 .../usage/v6/breadcrumbs/theming/colors/index.md  |  6 +++++-
 .../breadcrumbs/theming/css-properties/index.md   |  1 +
 static/usage/v6/button/basic/index.md             |  2 +-
 static/usage/v6/button/expand/index.md            |  2 +-
 static/usage/v6/button/fill/index.md              |  2 +-
 static/usage/v6/button/icons/index.md             |  2 +-
 static/usage/v6/button/shape/index.md             |  2 +-
 static/usage/v6/button/size/index.md              |  2 +-
 static/usage/v6/button/theming/colors/index.md    |  2 +-
 .../v6/button/theming/css-properties/index.md     |  1 +
 static/usage/v6/buttons/basic/index.md            |  2 +-
 static/usage/v6/buttons/placement/index.md        |  2 +-
 static/usage/v6/buttons/types/index.md            |  7 ++++++-
 static/usage/v6/card/basic/index.md               |  1 +
 static/usage/v6/card/buttons/index.md             |  1 +
 static/usage/v6/card/list/index.md                |  1 +
 static/usage/v6/card/media/index.md               |  1 +
 static/usage/v6/card/theming/colors/index.md      |  1 +
 .../usage/v6/card/theming/css-properties/index.md |  1 +
 static/usage/v6/checkbox/basic/index.md           |  1 +
 static/usage/v6/checkbox/indeterminate/index.md   |  1 +
 .../v6/checkbox/theming/css-properties/index.md   |  1 +
 static/usage/v6/chip/basic/index.md               |  2 +-
 static/usage/v6/chip/slots/index.md               |  2 +-
 static/usage/v6/chip/theming/colors/index.md      |  2 +-
 .../usage/v6/chip/theming/css-properties/index.md |  1 +
 static/usage/v6/content/basic/index.md            |  1 +
 static/usage/v6/content/fixed/index.md            |  1 +
 static/usage/v6/content/fullscreen/index.md       |  1 +
 static/usage/v6/content/header-footer/index.md    |  1 +
 static/usage/v6/content/scroll-events/index.md    |  1 +
 static/usage/v6/content/scroll-methods/index.md   |  1 +
 static/usage/v6/content/theming/colors/index.md   |  1 +
 .../v6/content/theming/css-properties/index.md    |  1 +
 .../v6/content/theming/css-shadow-parts/index.md  |  1 +
 static/usage/v6/datetime-button/basic/index.md    |  7 ++++++-
 static/usage/v6/datetime/basic/index.md           |  7 ++++++-
 .../buttons/customizing-button-texts/index.md     |  1 +
 .../datetime/buttons/customizing-buttons/index.md |  1 +
 .../buttons/showing-confirmation-buttons/index.md |  1 +
 .../datetime/date-constraints/advanced/index.md   |  1 +
 .../v6/datetime/date-constraints/max-min/index.md |  1 +
 .../v6/datetime/date-constraints/values/index.md  |  1 +
 .../datetime/localization/custom-locale/index.md  |  1 +
 .../localization/first-day-of-week/index.md       |  1 +
 .../v6/datetime/localization/hour-cycle/index.md  |  1 +
 .../localization/locale-extension-tags/index.md   |  1 +
 .../v6/datetime/localization/time-label/index.md  |  1 +
 static/usage/v6/datetime/multiple/index.md        |  7 ++++++-
 .../usage/v6/datetime/presentation/date/index.md  |  1 +
 .../datetime/presentation/month-and-year/index.md |  1 +
 .../usage/v6/datetime/presentation/time/index.md  |  6 +++++-
 .../usage/v6/datetime/presentation/wheel/index.md |  1 +
 static/usage/v6/datetime/theming/index.md         |  1 +
 .../v6/datetime/title/customizing-title/index.md  |  1 +
 .../datetime/title/showing-default-title/index.md |  1 +
 static/usage/v6/fab/basic/index.md                |  2 +-
 static/usage/v6/fab/button-sizing/index.md        |  2 +-
 static/usage/v6/fab/list-side/index.md            |  2 +-
 static/usage/v6/fab/positioning/index.md          |  1 +
 static/usage/v6/fab/theming/colors/index.md       |  2 +-
 .../v6/fab/theming/css-custom-properties/index.md |  1 +
 .../v6/fab/theming/css-shadow-parts/index.md      |  1 +
 static/usage/v6/footer/basic/index.md             |  1 +
 .../usage/v6/footer/custom-scroll-target/index.md |  1 +
 static/usage/v6/footer/fade/index.md              |  1 +
 static/usage/v6/footer/no-border/index.md         |  1 +
 static/usage/v6/footer/translucent/index.md       |  1 +
 static/usage/v6/grid/basic/index.md               |  1 +
 .../v6/grid/customizing/column-number/index.md    |  1 +
 static/usage/v6/grid/customizing/padding/index.md |  1 +
 static/usage/v6/grid/customizing/width/index.md   |  1 +
 static/usage/v6/grid/fixed/index.md               |  1 +
 .../usage/v6/grid/horizontal-alignment/index.md   |  1 +
 static/usage/v6/grid/offset-responsive/index.md   |  1 +
 static/usage/v6/grid/offset/index.md              |  1 +
 .../usage/v6/grid/push-pull-responsive/index.md   |  1 +
 static/usage/v6/grid/push-pull/index.md           |  1 +
 static/usage/v6/grid/size-auto/index.md           |  1 +
 static/usage/v6/grid/size-responsive/index.md     |  1 +
 static/usage/v6/grid/size/index.md                |  1 +
 static/usage/v6/grid/vertical-alignment/index.md  |  1 +
 static/usage/v6/header/basic/index.md             |  1 +
 static/usage/v6/header/condense/index.md          |  1 +
 .../usage/v6/header/custom-scroll-target/index.md |  1 +
 static/usage/v6/header/fade/index.md              |  1 +
 static/usage/v6/header/no-border/index.md         |  1 +
 static/usage/v6/header/translucent/index.md       |  1 +
 static/usage/v6/img/basic/index.md                |  2 +-
 static/usage/v6/infinite-scroll/basic/index.md    |  1 +
 .../custom-infinite-scroll-content/index.md       |  1 +
 .../infinite-scroll-content/index.md              |  1 +
 static/usage/v6/input/basic/index.md              |  2 +-
 static/usage/v6/input/clear/index.md              |  2 +-
 static/usage/v6/input/fill/index.md               |  1 +
 static/usage/v6/input/labels/index.md             |  2 +-
 static/usage/v6/input/theming/colors/index.md     |  7 ++++++-
 .../v6/input/theming/css-properties/index.md      |  1 +
 static/usage/v6/input/types/index.md              |  2 +-
 static/usage/v6/item-divider/basic/index.md       |  7 ++++++-
 .../usage/v6/item-divider/theming/colors/index.md |  1 +
 .../item-divider/theming/css-properties/index.md  |  1 +
 static/usage/v6/item-group/basic/index.md         |  7 ++++++-
 static/usage/v6/item-group/sliding-items/index.md |  1 +
 static/usage/v6/item-sliding/basic/index.md       |  2 +-
 static/usage/v6/item-sliding/expandable/index.md  |  7 ++++++-
 static/usage/v6/item-sliding/icons/index.md       |  7 ++++++-
 static/usage/v6/item/basic/index.md               |  2 +-
 static/usage/v6/item/buttons/index.md             |  2 +-
 static/usage/v6/item/clickable/index.md           |  2 +-
 static/usage/v6/item/counter/index.md             |  1 +
 static/usage/v6/item/detail-arrows/index.md       |  7 ++++++-
 static/usage/v6/item/helper-error/index.md        |  1 +
 static/usage/v6/item/icons/index.md               |  2 +-
 static/usage/v6/item/inputs/index.md              |  2 +-
 static/usage/v6/item/lines/index.md               |  2 +-
 static/usage/v6/item/media/index.md               |  2 +-
 static/usage/v6/item/theming/colors/index.md      |  7 ++++++-
 .../usage/v6/item/theming/css-properties/index.md |  1 +
 .../v6/item/theming/css-shadow-parts/index.md     |  1 +
 .../v6/item/theming/input-highlight/index.md      |  1 +
 static/usage/v6/label/basic/index.md              |  2 +-
 static/usage/v6/label/input/index.md              |  2 +-
 static/usage/v6/label/item/index.md               |  2 +-
 static/usage/v6/label/theming/colors/index.md     |  2 +-
 static/usage/v6/list-header/basic/index.md        |  7 ++++++-
 static/usage/v6/list-header/buttons/index.md      |  7 ++++++-
 static/usage/v6/list-header/lines/index.md        |  7 ++++++-
 .../usage/v6/list-header/theming/colors/index.md  |  1 +
 .../list-header/theming/css-properties/index.md   |  1 +
 static/usage/v6/list/basic/index.md               |  2 +-
 static/usage/v6/list/inset/index.md               |  2 +-
 static/usage/v6/list/lines/index.md               |  2 +-
 static/usage/v6/loading/controller/index.md       |  1 +
 static/usage/v6/loading/spinners/index.md         |  1 +
 static/usage/v6/loading/theming/index.md          |  1 +
 static/usage/v6/menu/basic/index.md               |  1 +
 static/usage/v6/menu/theming/index.md             |  1 +
 static/usage/v6/menu/toggle/index.md              |  1 +
 static/usage/v6/menu/type/index.md                |  1 +
 .../usage/v6/modal/can-dismiss/boolean/index.md   |  1 +
 .../usage/v6/modal/can-dismiss/function/index.md  |  1 +
 static/usage/v6/modal/card/basic/index.md         |  1 +
 static/usage/v6/modal/controller/index.md         |  1 +
 static/usage/v6/modal/custom-dialogs/index.md     |  1 +
 static/usage/v6/modal/inline/basic/index.md       |  1 +
 static/usage/v6/modal/inline/is-open/index.md     |  1 +
 static/usage/v6/modal/performance/mount/index.md  |  1 +
 .../v6/modal/sheet/background-content/index.md    |  1 +
 static/usage/v6/modal/sheet/basic/index.md        |  1 +
 .../usage/v6/modal/sheet/handle-behavior/index.md |  1 +
 static/usage/v6/modal/styling/animations/index.md |  1 +
 static/usage/v6/modal/styling/theming/index.md    |  1 +
 static/usage/v6/nav/modal-navigation/index.md     |  1 +
 static/usage/v6/nav/nav-link/index.md             |  1 +
 static/usage/v6/note/basic/index.md               |  2 +-
 static/usage/v6/note/item/index.md                |  2 +-
 static/usage/v6/note/theming/colors/index.md      |  2 +-
 .../usage/v6/note/theming/css-properties/index.md |  1 +
 static/usage/v6/picker/multiple-column/index.md   |  1 +
 static/usage/v6/picker/single-column/index.md     |  1 +
 .../v6/popover/customization/positioning/index.md |  1 +
 .../v6/popover/customization/sizing/index.md      |  1 +
 .../v6/popover/customization/styling/index.md     |  1 +
 static/usage/v6/popover/nested/index.md           |  7 ++++++-
 .../usage/v6/popover/performance/mount/index.md   |  1 +
 .../v6/popover/presenting/controller/index.md     |  1 +
 .../v6/popover/presenting/inline-isopen/index.md  |  1 +
 .../v6/popover/presenting/inline-trigger/index.md |  1 +
 static/usage/v6/progress-bar/buffer/index.md      |  1 +
 static/usage/v6/progress-bar/determinate/index.md |  1 +
 .../usage/v6/progress-bar/indeterminate/index.md  |  6 +++++-
 .../usage/v6/progress-bar/theming/colors/index.md |  6 +++++-
 .../progress-bar/theming/css-properties/index.md  |  1 +
 .../theming/css-shadow-parts/index.md             |  1 +
 static/usage/v6/radio/basic/index.md              |  2 +-
 static/usage/v6/radio/empty-selection/index.md    |  7 ++++++-
 static/usage/v6/radio/theming/colors/index.md     |  7 ++++++-
 .../v6/radio/theming/css-properties/index.md      |  1 +
 .../v6/radio/theming/css-shadow-parts/index.md    |  1 +
 static/usage/v6/range/basic/index.md              |  2 +-
 static/usage/v6/range/dual-knobs/index.md         |  2 +-
 static/usage/v6/range/ion-change-event/index.md   |  1 +
 .../usage/v6/range/ion-knob-move-event/index.md   |  1 +
 static/usage/v6/range/pins/index.md               |  1 +
 static/usage/v6/range/slots/index.md              |  2 +-
 static/usage/v6/range/snapping-ticks/index.md     |  2 +-
 .../v6/range/theming/css-properties/index.md      |  1 +
 .../v6/range/theming/css-shadow-parts/index.md    |  1 +
 static/usage/v6/refresher/advanced/index.md       |  1 +
 static/usage/v6/refresher/basic/index.md          |  1 +
 static/usage/v6/refresher/custom-content/index.md |  1 +
 .../v6/refresher/custom-scroll-target/index.md    |  1 +
 .../usage/v6/refresher/pull-properties/index.md   |  1 +
 static/usage/v6/reorder/basic/index.md            |  1 +
 static/usage/v6/reorder/custom-icon/index.md      |  1 +
 .../v6/reorder/custom-scroll-target/index.md      |  1 +
 .../usage/v6/reorder/toggling-disabled/index.md   |  1 +
 static/usage/v6/reorder/updating-data/index.md    |  1 +
 static/usage/v6/reorder/wrapper/index.md          |  1 +
 static/usage/v6/ripple-effect/basic/index.md      |  1 +
 .../usage/v6/ripple-effect/customizing/index.md   |  1 +
 static/usage/v6/ripple-effect/type/index.md       |  1 +
 static/usage/v6/router/basic/index.md             |  1 +
 static/usage/v6/searchbar/basic/index.md          |  7 ++++++-
 static/usage/v6/searchbar/cancel-button/index.md  |  7 ++++++-
 static/usage/v6/searchbar/clear-button/index.md   |  7 ++++++-
 static/usage/v6/searchbar/debounce/index.md       |  1 +
 static/usage/v6/searchbar/search-icon/index.md    |  2 +-
 static/usage/v6/searchbar/theming/colors/index.md |  7 ++++++-
 .../v6/searchbar/theming/css-properties/index.md  |  1 +
 static/usage/v6/segment-button/basic/index.md     |  2 +-
 static/usage/v6/segment-button/layout/index.md    |  7 ++++++-
 .../theming/css-properties/index.md               |  1 +
 .../theming/css-shadow-parts/index.md             |  1 +
 static/usage/v6/segment/basic/index.md            |  2 +-
 static/usage/v6/segment/scrollable/index.md       |  7 ++++++-
 static/usage/v6/segment/theming/colors/index.md   |  7 ++++++-
 .../v6/segment/theming/css-properties/index.md    |  1 +
 .../v6/select/basic/multiple-selection/index.md   |  1 +
 .../basic/responding-to-interaction/index.md      |  1 +
 .../v6/select/basic/single-selection/index.md     |  1 +
 .../v6/select/customization/button-text/index.md  |  1 +
 .../customization/interface-options/index.md      |  1 +
 .../select/customization/styling-select/index.md  |  1 +
 .../v6/select/interfaces/action-sheet/index.md    |  1 +
 .../usage/v6/select/interfaces/popover/index.md   |  1 +
 .../objects-as-values/multiple-selection/index.md |  1 +
 .../objects-as-values/using-comparewith/index.md  |  1 +
 static/usage/v6/select/typeahead/index.md         |  1 +
 static/usage/v6/skeleton-text/basic/index.md      |  1 +
 .../skeleton-text/theming/css-properties/index.md |  1 +
 static/usage/v6/spinner/basic/index.md            |  7 ++++++-
 static/usage/v6/spinner/theming/colors/index.md   |  7 ++++++-
 .../v6/spinner/theming/css-properties/index.md    |  1 +
 static/usage/v6/split-pane/basic/index.md         |  7 ++++++-
 .../v6/split-pane/theming/css-properties/index.md |  1 +
 static/usage/v6/text/basic/index.md               |  2 +-
 static/usage/v6/textarea/autogrow/index.md        |  7 ++++++-
 static/usage/v6/textarea/basic/index.md           |  7 ++++++-
 static/usage/v6/textarea/clear-on-edit/index.md   |  7 ++++++-
 static/usage/v6/textarea/theming/index.md         |  1 +
 static/usage/v6/thumbnail/basic/index.md          |  2 +-
 static/usage/v6/thumbnail/item/index.md           |  2 +-
 .../v6/thumbnail/theming/css-properties/index.md  |  1 +
 static/usage/v6/title/basic/index.md              |  1 +
 .../title/collapsible-large-title/basic/index.md  |  1 +
 .../collapsible-large-title/buttons/index.md      |  1 +
 .../v6/title/theming/css-properties/index.md      |  1 +
 static/usage/v6/toast/buttons/index.md            |  1 +
 static/usage/v6/toast/icon/index.md               |  1 +
 .../usage/v6/toast/presenting/controller/index.md |  1 +
 static/usage/v6/toast/theming/index.md            |  1 +
 static/usage/v6/toggle/basic/index.md             |  2 +-
 static/usage/v6/toggle/on-off/index.md            |  2 +-
 static/usage/v6/toggle/theming/colors/index.md    |  2 +-
 .../v6/toggle/theming/css-properties/index.md     |  1 +
 .../v6/toggle/theming/css-shadow-parts/index.md   |  1 +
 static/usage/v6/toolbar/basic/index.md            |  1 +
 static/usage/v6/toolbar/buttons/index.md          |  7 ++++++-
 static/usage/v6/toolbar/progress-bars/index.md    |  1 +
 static/usage/v6/toolbar/searchbars/index.md       |  1 +
 static/usage/v6/toolbar/segments/index.md         |  1 +
 static/usage/v6/toolbar/theming/colors/index.md   |  7 ++++++-
 .../v6/toolbar/theming/css-properties/index.md    |  1 +
 static/usage/v7/back-button/basic/index.md        |  1 +
 static/usage/v7/back-button/custom/index.md       |  1 +
 static/usage/v7/router/basic/index.md             |  1 +
 static/usage/v7/select/typeahead/index.md         |  1 +
 311 files changed, 510 insertions(+), 105 deletions(-)

diff --git a/docs/api/select.md b/docs/api/select.md
index b632d936751..d3792bfe52a 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -54,9 +54,9 @@ 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/v7/select/basic/multiple-selection/index.md';
+import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
 
-<MulipleSelectionExample />
+<MultipleSelectionExample />
 
 ## Responding to Interaction
 
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index d4a6c27afdb..781b65e0bdb 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -96,11 +96,6 @@ 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;
 }
 
 /**
@@ -120,7 +115,7 @@ export default function Playground({
   mode,
   devicePreview,
   includeIonContent = true,
-  version = 6,
+  version,
 }: {
   code: { [key in UsageTarget]?: MdxContent | UsageTargetOptions };
   title?: string;
@@ -135,6 +130,10 @@ export default function Playground({
   description?: string;
   devicePreview?: boolean;
   includeIonContent: boolean;
+  /**
+   * 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;
 }) {
   if (!code || Object.keys(code).length === 0) {
@@ -145,6 +144,10 @@ export default function Playground({
     console.warn(`Invalid mode provided: ${mode}. Accepted values are: "ios" or "md".`);
     return;
   }
+  if (typeof version === 'undefined') {
+    console.warn('You must specify a `version` for the Playground example. For example: <Playground version="7" />');
+    return;
+  }
 
   const { isDarkTheme } = useThemeContext();
 
diff --git a/static/usage/v6/accordion/accessibility/animations/index.md b/static/usage/v6/accordion/accessibility/animations/index.md
index ea858fcddee..37f6bcddd93 100644
--- a/static/usage/v6/accordion/accessibility/animations/index.md
+++ b/static/usage/v6/accordion/accessibility/animations/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/basic/index.md b/static/usage/v6/accordion/basic/index.md
index 1ade912b468..ec5c7e61e3b 100644
--- a/static/usage/v6/accordion/basic/index.md
+++ b/static/usage/v6/accordion/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
index f1f583205bf..32e5cc12ce2 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
@@ -12,6 +12,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/accordion/customization/expansion-styles/index.md b/static/usage/v6/accordion/customization/expansion-styles/index.md
index c80478a0d42..1b08eaa20c5 100644
--- a/static/usage/v6/accordion/customization/expansion-styles/index.md
+++ b/static/usage/v6/accordion/customization/expansion-styles/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md
index bad8bdf71b9..691d4b933b1 100644
--- a/static/usage/v6/accordion/customization/icons/index.md
+++ b/static/usage/v6/accordion/customization/icons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/customization/theming/index.md b/static/usage/v6/accordion/customization/theming/index.md
index c87341a846a..eba76679a03 100644
--- a/static/usage/v6/accordion/customization/theming/index.md
+++ b/static/usage/v6/accordion/customization/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/accordion/disable-group/index.md b/static/usage/v6/accordion/disable-group/index.md
index 79366ce5f7a..aaad754781f 100644
--- a/static/usage/v6/accordion/disable-group/index.md
+++ b/static/usage/v6/accordion/disable-group/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/disable/group/index.md b/static/usage/v6/accordion/disable/group/index.md
index ccff0c07398..beb29908e79 100644
--- a/static/usage/v6/accordion/disable/group/index.md
+++ b/static/usage/v6/accordion/disable/group/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/disable/individual/index.md b/static/usage/v6/accordion/disable/individual/index.md
index 547959c608a..2323a1b3b15 100644
--- a/static/usage/v6/accordion/disable/individual/index.md
+++ b/static/usage/v6/accordion/disable/individual/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/listen-changes/index.md b/static/usage/v6/accordion/listen-changes/index.md
index 4084b33fed0..481f9f47795 100644
--- a/static/usage/v6/accordion/listen-changes/index.md
+++ b/static/usage/v6/accordion/listen-changes/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/multiple/index.md b/static/usage/v6/accordion/multiple/index.md
index f34ed0e3808..6a56c3fe4fa 100644
--- a/static/usage/v6/accordion/multiple/index.md
+++ b/static/usage/v6/accordion/multiple/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/readonly/group/index.md b/static/usage/v6/accordion/readonly/group/index.md
index 921c640de03..263e18eb79d 100644
--- a/static/usage/v6/accordion/readonly/group/index.md
+++ b/static/usage/v6/accordion/readonly/group/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/readonly/individual/index.md b/static/usage/v6/accordion/readonly/individual/index.md
index ad6bb9e64a1..6a5f0d991f8 100644
--- a/static/usage/v6/accordion/readonly/individual/index.md
+++ b/static/usage/v6/accordion/readonly/individual/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/toggle/index.md b/static/usage/v6/accordion/toggle/index.md
index ad7487404fc..fb5331bf14b 100644
--- a/static/usage/v6/accordion/toggle/index.md
+++ b/static/usage/v6/accordion/toggle/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/action-sheet/basic/index.md b/static/usage/v6/action-sheet/basic/index.md
index c96980b1b83..25da44bf4c6 100644
--- a/static/usage/v6/action-sheet/basic/index.md
+++ b/static/usage/v6/action-sheet/basic/index.md
@@ -12,6 +12,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/action-sheet/theming/css-properties/index.md b/static/usage/v6/action-sheet/theming/css-properties/index.md
index 9c53afca208..7d9eebab14a 100644
--- a/static/usage/v6/action-sheet/theming/css-properties/index.md
+++ b/static/usage/v6/action-sheet/theming/css-properties/index.md
@@ -12,6 +12,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/action-sheet/theming/styling/index.md b/static/usage/v6/action-sheet/theming/styling/index.md
index c2c3d7c42c6..ef07b833a7c 100644
--- a/static/usage/v6/action-sheet/theming/styling/index.md
+++ b/static/usage/v6/action-sheet/theming/styling/index.md
@@ -12,6 +12,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/alert/buttons/index.md b/static/usage/v6/alert/buttons/index.md
index 18c070e5d1c..d0c16fbccaa 100644
--- a/static/usage/v6/alert/buttons/index.md
+++ b/static/usage/v6/alert/buttons/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/customization/index.md b/static/usage/v6/alert/customization/index.md
index bcb94e81898..4da97de4af4 100644
--- a/static/usage/v6/alert/customization/index.md
+++ b/static/usage/v6/alert/customization/index.md
@@ -11,6 +11,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/inputs/radios/index.md b/static/usage/v6/alert/inputs/radios/index.md
index f76eebd547b..d92d2862601 100644
--- a/static/usage/v6/alert/inputs/radios/index.md
+++ b/static/usage/v6/alert/inputs/radios/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/inputs/text-inputs/index.md b/static/usage/v6/alert/inputs/text-inputs/index.md
index ab42a98fe97..1e70ed5db98 100644
--- a/static/usage/v6/alert/inputs/text-inputs/index.md
+++ b/static/usage/v6/alert/inputs/text-inputs/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="450px"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/presenting/controller/index.md b/static/usage/v6/alert/presenting/controller/index.md
index 5f84fadb3d8..de4bf3866ef 100644
--- a/static/usage/v6/alert/presenting/controller/index.md
+++ b/static/usage/v6/alert/presenting/controller/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/avatar/basic/index.md b/static/usage/v6/avatar/basic/index.md
index cfb4d046b72..fbaaeecd149 100644
--- a/static/usage/v6/avatar/basic/index.md
+++ b/static/usage/v6/avatar/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/avatar/basic/demo.html" />
diff --git a/static/usage/v6/avatar/chip/index.md b/static/usage/v6/avatar/chip/index.md
index 25c8aeff123..b87c62d255b 100644
--- a/static/usage/v6/avatar/chip/index.md
+++ b/static/usage/v6/avatar/chip/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/avatar/chip/demo.html" />
diff --git a/static/usage/v6/avatar/item/index.md b/static/usage/v6/avatar/item/index.md
index 67f97708b02..d592bf249c3 100644
--- a/static/usage/v6/avatar/item/index.md
+++ b/static/usage/v6/avatar/item/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/avatar/item/demo.html" />
diff --git a/static/usage/v6/avatar/theming/css-properties/index.md b/static/usage/v6/avatar/theming/css-properties/index.md
index 51f2c0650ce..4ff0ecd1679 100644
--- a/static/usage/v6/avatar/theming/css-properties/index.md
+++ b/static/usage/v6/avatar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.md
index 499a6dbad81..6c29748fe6f 100644
--- a/static/usage/v6/back-button/basic/index.md
+++ b/static/usage/v6/back-button/basic/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md
index 437c5d5a6a3..30f58541ecb 100644
--- a/static/usage/v6/back-button/custom/index.md
+++ b/static/usage/v6/back-button/custom/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/backdrop/basic/index.md b/static/usage/v6/backdrop/basic/index.md
index be1bca17132..63ff609c996 100644
--- a/static/usage/v6/backdrop/basic/index.md
+++ b/static/usage/v6/backdrop/basic/index.md
@@ -5,4 +5,9 @@ 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} />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/backdrop/basic/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v6/backdrop/styling/index.md b/static/usage/v6/backdrop/styling/index.md
index 8d16c744a02..7d3aad9224c 100644
--- a/static/usage/v6/backdrop/styling/index.md
+++ b/static/usage/v6/backdrop/styling/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/badge/basic/index.md b/static/usage/v6/badge/basic/index.md
index 7395983f861..7b2955c229d 100644
--- a/static/usage/v6/badge/basic/index.md
+++ b/static/usage/v6/badge/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/badge/basic/demo.html" />
diff --git a/static/usage/v6/badge/theming/colors/index.md b/static/usage/v6/badge/theming/colors/index.md
index da0a5d660aa..47aa8b9e1b4 100644
--- a/static/usage/v6/badge/theming/colors/index.md
+++ b/static/usage/v6/badge/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/badge/theming/colors/demo.html"
+/>
diff --git a/static/usage/v6/badge/theming/css-properties/index.md b/static/usage/v6/badge/theming/css-properties/index.md
index 48ac100bf66..711d4f0a38d 100644
--- a/static/usage/v6/badge/theming/css-properties/index.md
+++ b/static/usage/v6/badge/theming/css-properties/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/breadcrumbs/basic/index.md b/static/usage/v6/breadcrumbs/basic/index.md
index f05247a2f80..0493778d17f 100644
--- a/static/usage/v6/breadcrumbs/basic/index.md
+++ b/static/usage/v6/breadcrumbs/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/basic/demo.html" />
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
index fd50385529a..fc5c8a29061 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
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
index 26448ff6079..eccdbd8d512 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html"
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
index 3f7616b8358..284c2a429a4 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/breadcrumbs/collapsing-items/max-items/demo.html"
 />
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
index a5e3fe3aeec..a0b924e8127 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{
     javascript,
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
index 1656c92b639..a9305b79feb 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
@@ -5,4 +5,8 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/breadcrumbs/icons/custom-separators/demo.html"
+/>
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
index d46f6c6ba52..0f2e9ac47cc 100644
--- a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/breadcrumbs/icons/icons-on-items/demo.html"
diff --git a/static/usage/v6/breadcrumbs/theming/colors/index.md b/static/usage/v6/breadcrumbs/theming/colors/index.md
index 22df9ce3cb4..632b91c2cbb 100644
--- a/static/usage/v6/breadcrumbs/theming/colors/index.md
+++ b/static/usage/v6/breadcrumbs/theming/colors/index.md
@@ -5,4 +5,8 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/breadcrumbs/theming/colors/demo.html"
+/>
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/index.md b/static/usage/v6/breadcrumbs/theming/css-properties/index.md
index de65ba9677f..013c1e19024 100644
--- a/static/usage/v6/breadcrumbs/theming/css-properties/index.md
+++ b/static/usage/v6/breadcrumbs/theming/css-properties/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/button/basic/index.md b/static/usage/v6/button/basic/index.md
index a18c429e9d3..c24928dc654 100644
--- a/static/usage/v6/button/basic/index.md
+++ b/static/usage/v6/button/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/basic/demo.html" />
diff --git a/static/usage/v6/button/expand/index.md b/static/usage/v6/button/expand/index.md
index 9f6db466051..13e7cabce8d 100644
--- a/static/usage/v6/button/expand/index.md
+++ b/static/usage/v6/button/expand/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/expand/demo.html" />
diff --git a/static/usage/v6/button/fill/index.md b/static/usage/v6/button/fill/index.md
index b042cc0c615..00419cc7e00 100644
--- a/static/usage/v6/button/fill/index.md
+++ b/static/usage/v6/button/fill/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/fill/demo.html" />
diff --git a/static/usage/v6/button/icons/index.md b/static/usage/v6/button/icons/index.md
index 518188e64e0..591563be9a0 100644
--- a/static/usage/v6/button/icons/index.md
+++ b/static/usage/v6/button/icons/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/icons/demo.html" />
diff --git a/static/usage/v6/button/shape/index.md b/static/usage/v6/button/shape/index.md
index 76562ba231e..8f2fd028d0c 100644
--- a/static/usage/v6/button/shape/index.md
+++ b/static/usage/v6/button/shape/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/shape/demo.html" />
diff --git a/static/usage/v6/button/size/index.md b/static/usage/v6/button/size/index.md
index a606debb051..7a17c6f7464 100644
--- a/static/usage/v6/button/size/index.md
+++ b/static/usage/v6/button/size/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/size/demo.html" />
diff --git a/static/usage/v6/button/theming/colors/index.md b/static/usage/v6/button/theming/colors/index.md
index 3c5760b1e32..af3ba6d2ea5 100644
--- a/static/usage/v6/button/theming/colors/index.md
+++ b/static/usage/v6/button/theming/colors/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/theming/colors/demo.html" />
diff --git a/static/usage/v6/button/theming/css-properties/index.md b/static/usage/v6/button/theming/css-properties/index.md
index 9e0fcb66c2b..06905de166a 100644
--- a/static/usage/v6/button/theming/css-properties/index.md
+++ b/static/usage/v6/button/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/buttons/basic/index.md b/static/usage/v6/buttons/basic/index.md
index 59f77161471..ab43ddf246d 100644
--- a/static/usage/v6/buttons/basic/index.md
+++ b/static/usage/v6/buttons/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/buttons/basic/demo.html" />
diff --git a/static/usage/v6/buttons/placement/index.md b/static/usage/v6/buttons/placement/index.md
index ed4a5d80d7e..a73fed1921b 100644
--- a/static/usage/v6/buttons/placement/index.md
+++ b/static/usage/v6/buttons/placement/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/buttons/placement/demo.html" />
diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md
index 910b6526fc7..f0bee55af1c 100644
--- a/static/usage/v6/buttons/types/index.md
+++ b/static/usage/v6/buttons/types/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/buttons/types/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/card/basic/index.md b/static/usage/v6/card/basic/index.md
index 2b73d2d8788..37aa8c0cd1a 100644
--- a/static/usage/v6/card/basic/index.md
+++ b/static/usage/v6/card/basic/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/buttons/index.md b/static/usage/v6/card/buttons/index.md
index 36626c8371f..fd6b3b2e745 100644
--- a/static/usage/v6/card/buttons/index.md
+++ b/static/usage/v6/card/buttons/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/list/index.md b/static/usage/v6/card/list/index.md
index 7ca1159169c..d65a355826c 100644
--- a/static/usage/v6/card/list/index.md
+++ b/static/usage/v6/card/list/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/media/index.md b/static/usage/v6/card/media/index.md
index 2a6ba671517..04c0a8a05ad 100644
--- a/static/usage/v6/card/media/index.md
+++ b/static/usage/v6/card/media/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/theming/colors/index.md b/static/usage/v6/card/theming/colors/index.md
index 07b04db71bc..d89e8b65362 100644
--- a/static/usage/v6/card/theming/colors/index.md
+++ b/static/usage/v6/card/theming/colors/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/theming/css-properties/index.md b/static/usage/v6/card/theming/css-properties/index.md
index fe3114dbdef..85d28e10e0c 100644
--- a/static/usage/v6/card/theming/css-properties/index.md
+++ b/static/usage/v6/card/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/checkbox/basic/index.md b/static/usage/v6/checkbox/basic/index.md
index f7ce86204f3..98776d2e36c 100644
--- a/static/usage/v6/checkbox/basic/index.md
+++ b/static/usage/v6/checkbox/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/checkbox/indeterminate/index.md b/static/usage/v6/checkbox/indeterminate/index.md
index 48cd83db7f2..a70a99b7543 100644
--- a/static/usage/v6/checkbox/indeterminate/index.md
+++ b/static/usage/v6/checkbox/indeterminate/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/checkbox/theming/css-properties/index.md b/static/usage/v6/checkbox/theming/css-properties/index.md
index df00b8a7342..8d442940849 100644
--- a/static/usage/v6/checkbox/theming/css-properties/index.md
+++ b/static/usage/v6/checkbox/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/chip/basic/index.md b/static/usage/v6/chip/basic/index.md
index 1d79e0856a0..f9c31c8e5ac 100644
--- a/static/usage/v6/chip/basic/index.md
+++ b/static/usage/v6/chip/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/chip/basic/demo.html" />
diff --git a/static/usage/v6/chip/slots/index.md b/static/usage/v6/chip/slots/index.md
index 7b6ef1233ee..71be95fe594 100644
--- a/static/usage/v6/chip/slots/index.md
+++ b/static/usage/v6/chip/slots/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/chip/slots/demo.html" />
diff --git a/static/usage/v6/chip/theming/colors/index.md b/static/usage/v6/chip/theming/colors/index.md
index d5561ca8b75..096cfc43691 100644
--- a/static/usage/v6/chip/theming/colors/index.md
+++ b/static/usage/v6/chip/theming/colors/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/chip/theming/colors/demo.html" />
diff --git a/static/usage/v6/chip/theming/css-properties/index.md b/static/usage/v6/chip/theming/css-properties/index.md
index 5851a62f350..0ee9a98de33 100644
--- a/static/usage/v6/chip/theming/css-properties/index.md
+++ b/static/usage/v6/chip/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/basic/index.md b/static/usage/v6/content/basic/index.md
index eb5222bb206..57d00ac1a61 100644
--- a/static/usage/v6/content/basic/index.md
+++ b/static/usage/v6/content/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/content/basic/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/content/fixed/index.md b/static/usage/v6/content/fixed/index.md
index 5088699b439..f43bcffead6 100644
--- a/static/usage/v6/content/fixed/index.md
+++ b/static/usage/v6/content/fixed/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/fullscreen/index.md b/static/usage/v6/content/fullscreen/index.md
index 108bab52b60..33339463732 100644
--- a/static/usage/v6/content/fullscreen/index.md
+++ b/static/usage/v6/content/fullscreen/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/header-footer/index.md b/static/usage/v6/content/header-footer/index.md
index 991dbe74d83..a64430448eb 100644
--- a/static/usage/v6/content/header-footer/index.md
+++ b/static/usage/v6/content/header-footer/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/content/header-footer/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/content/scroll-events/index.md b/static/usage/v6/content/scroll-events/index.md
index 732a6ab9032..0f3adcd2f76 100644
--- a/static/usage/v6/content/scroll-events/index.md
+++ b/static/usage/v6/content/scroll-events/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/content/scroll-methods/index.md b/static/usage/v6/content/scroll-methods/index.md
index b1aa61e2bf7..6814aac5c57 100644
--- a/static/usage/v6/content/scroll-methods/index.md
+++ b/static/usage/v6/content/scroll-methods/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/content/theming/colors/index.md b/static/usage/v6/content/theming/colors/index.md
index b233f63b61d..c1226c11f2d 100644
--- a/static/usage/v6/content/theming/colors/index.md
+++ b/static/usage/v6/content/theming/colors/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/content/theming/colors/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/content/theming/css-properties/index.md b/static/usage/v6/content/theming/css-properties/index.md
index 3a95fce44eb..e30e48ba4c2 100644
--- a/static/usage/v6/content/theming/css-properties/index.md
+++ b/static/usage/v6/content/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/theming/css-shadow-parts/index.md b/static/usage/v6/content/theming/css-shadow-parts/index.md
index 72303692b02..0c80aec61dd 100644
--- a/static/usage/v6/content/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/content/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/datetime-button/basic/index.md b/static/usage/v6/datetime-button/basic/index.md
index c835c072c58..a362732431b 100644
--- a/static/usage/v6/datetime-button/basic/index.md
+++ b/static/usage/v6/datetime-button/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime-button/basic/demo.html"
+/>
diff --git a/static/usage/v6/datetime/basic/index.md b/static/usage/v6/datetime/basic/index.md
index d63897a88e0..e7a042f3159 100644
--- a/static/usage/v6/datetime/basic/index.md
+++ b/static/usage/v6/datetime/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/basic/demo.html"
+/>
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/index.md b/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
index 01c27026f13..a7bd0d9395d 100644
--- a/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/buttons/customizing-button-texts/demo.html"
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/index.md b/static/usage/v6/datetime/buttons/customizing-buttons/index.md
index 8ae133878d9..325b683dfca 100644
--- a/static/usage/v6/datetime/buttons/customizing-buttons/index.md
+++ b/static/usage/v6/datetime/buttons/customizing-buttons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/buttons/customizing-buttons/demo.html"
diff --git a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
index eac02cfaf31..ccb24b7303e 100644
--- a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
+++ b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html"
diff --git a/static/usage/v6/datetime/date-constraints/advanced/index.md b/static/usage/v6/datetime/date-constraints/advanced/index.md
index 559f102f49c..85abd71ab06 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/index.md
+++ b/static/usage/v6/datetime/date-constraints/advanced/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{
     javascript,
diff --git a/static/usage/v6/datetime/date-constraints/max-min/index.md b/static/usage/v6/datetime/date-constraints/max-min/index.md
index efebb40972c..cdc01de7a05 100644
--- a/static/usage/v6/datetime/date-constraints/max-min/index.md
+++ b/static/usage/v6/datetime/date-constraints/max-min/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/date-constraints/max-min/demo.html"
diff --git a/static/usage/v6/datetime/date-constraints/values/index.md b/static/usage/v6/datetime/date-constraints/values/index.md
index e1bc1900d1f..0f4ddb066e3 100644
--- a/static/usage/v6/datetime/date-constraints/values/index.md
+++ b/static/usage/v6/datetime/date-constraints/values/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/date-constraints/values/demo.html"
diff --git a/static/usage/v6/datetime/localization/custom-locale/index.md b/static/usage/v6/datetime/localization/custom-locale/index.md
index 4b099f67d75..920c0ac7c50 100644
--- a/static/usage/v6/datetime/localization/custom-locale/index.md
+++ b/static/usage/v6/datetime/localization/custom-locale/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/custom-locale/demo.html"
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
index d837e73176f..9b3e02d1788 100644
--- a/static/usage/v6/datetime/localization/first-day-of-week/index.md
+++ b/static/usage/v6/datetime/localization/first-day-of-week/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/first-day-of-week/demo.html"
diff --git a/static/usage/v6/datetime/localization/hour-cycle/index.md b/static/usage/v6/datetime/localization/hour-cycle/index.md
index 528447c273c..e713c87c8c2 100644
--- a/static/usage/v6/datetime/localization/hour-cycle/index.md
+++ b/static/usage/v6/datetime/localization/hour-cycle/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/hour-cycle/demo.html"
diff --git a/static/usage/v6/datetime/localization/locale-extension-tags/index.md b/static/usage/v6/datetime/localization/locale-extension-tags/index.md
index ed3ef3875f9..b6cd9010013 100644
--- a/static/usage/v6/datetime/localization/locale-extension-tags/index.md
+++ b/static/usage/v6/datetime/localization/locale-extension-tags/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/locale-extension-tags/demo.html"
diff --git a/static/usage/v6/datetime/localization/time-label/index.md b/static/usage/v6/datetime/localization/time-label/index.md
index 8f879d68807..2120a29270e 100644
--- a/static/usage/v6/datetime/localization/time-label/index.md
+++ b/static/usage/v6/datetime/localization/time-label/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/time-label/demo.html"
diff --git a/static/usage/v6/datetime/multiple/index.md b/static/usage/v6/datetime/multiple/index.md
index 89d02155e38..7ea0ef4feff 100644
--- a/static/usage/v6/datetime/multiple/index.md
+++ b/static/usage/v6/datetime/multiple/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/multiple/demo.html"
+/>
diff --git a/static/usage/v6/datetime/presentation/date/index.md b/static/usage/v6/datetime/presentation/date/index.md
index da12ceaaf60..200134a198d 100644
--- a/static/usage/v6/datetime/presentation/date/index.md
+++ b/static/usage/v6/datetime/presentation/date/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/presentation/date/demo.html"
diff --git a/static/usage/v6/datetime/presentation/month-and-year/index.md b/static/usage/v6/datetime/presentation/month-and-year/index.md
index 949de3ccdba..166e1a49eca 100644
--- a/static/usage/v6/datetime/presentation/month-and-year/index.md
+++ b/static/usage/v6/datetime/presentation/month-and-year/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="240px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/presentation/month-and-year/demo.html"
diff --git a/static/usage/v6/datetime/presentation/time/index.md b/static/usage/v6/datetime/presentation/time/index.md
index 9b556ffda89..7e3437f4100 100644
--- a/static/usage/v6/datetime/presentation/time/index.md
+++ b/static/usage/v6/datetime/presentation/time/index.md
@@ -5,4 +5,8 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/presentation/time/demo.html"
+/>
diff --git a/static/usage/v6/datetime/presentation/wheel/index.md b/static/usage/v6/datetime/presentation/wheel/index.md
index e187340b607..781bc20a7d8 100644
--- a/static/usage/v6/datetime/presentation/wheel/index.md
+++ b/static/usage/v6/datetime/presentation/wheel/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/presentation/wheel/demo.html"
diff --git a/static/usage/v6/datetime/theming/index.md b/static/usage/v6/datetime/theming/index.md
index 280d490b5c3..8f8bed3d091 100644
--- a/static/usage/v6/datetime/theming/index.md
+++ b/static/usage/v6/datetime/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   size="450px"
   code={{
     javascript,
diff --git a/static/usage/v6/datetime/title/customizing-title/index.md b/static/usage/v6/datetime/title/customizing-title/index.md
index a9aa5d8b67e..61eec1b44bd 100644
--- a/static/usage/v6/datetime/title/customizing-title/index.md
+++ b/static/usage/v6/datetime/title/customizing-title/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="large"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/title/customizing-title/demo.html"
diff --git a/static/usage/v6/datetime/title/showing-default-title/index.md b/static/usage/v6/datetime/title/showing-default-title/index.md
index f4ad4c455cd..7574a75b845 100644
--- a/static/usage/v6/datetime/title/showing-default-title/index.md
+++ b/static/usage/v6/datetime/title/showing-default-title/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="large"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/title/showing-default-title/demo.html"
diff --git a/static/usage/v6/fab/basic/index.md b/static/usage/v6/fab/basic/index.md
index 37811091d30..289afe07917 100644
--- a/static/usage/v6/fab/basic/index.md
+++ b/static/usage/v6/fab/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/basic/demo.html" />
diff --git a/static/usage/v6/fab/button-sizing/index.md b/static/usage/v6/fab/button-sizing/index.md
index 4ce8f551be2..8827cbf550e 100644
--- a/static/usage/v6/fab/button-sizing/index.md
+++ b/static/usage/v6/fab/button-sizing/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/button-sizing/demo.html" />
diff --git a/static/usage/v6/fab/list-side/index.md b/static/usage/v6/fab/list-side/index.md
index cf72e0722be..4d5152c90f7 100644
--- a/static/usage/v6/fab/list-side/index.md
+++ b/static/usage/v6/fab/list-side/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/list-side/demo.html" />
diff --git a/static/usage/v6/fab/positioning/index.md b/static/usage/v6/fab/positioning/index.md
index e3270c0b23d..4fe63f013b7 100644
--- a/static/usage/v6/fab/positioning/index.md
+++ b/static/usage/v6/fab/positioning/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/fab/positioning/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/fab/theming/colors/index.md b/static/usage/v6/fab/theming/colors/index.md
index abeac1f6ffa..cefc7f7dc8e 100644
--- a/static/usage/v6/fab/theming/colors/index.md
+++ b/static/usage/v6/fab/theming/colors/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/theming/colors/demo.html" />
diff --git a/static/usage/v6/fab/theming/css-custom-properties/index.md b/static/usage/v6/fab/theming/css-custom-properties/index.md
index 6ef760440ae..71f8958cef6 100644
--- a/static/usage/v6/fab/theming/css-custom-properties/index.md
+++ b/static/usage/v6/fab/theming/css-custom-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/index.md b/static/usage/v6/fab/theming/css-shadow-parts/index.md
index 0353c1eec7f..78bc7981b34 100644
--- a/static/usage/v6/fab/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/fab/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/footer/basic/index.md b/static/usage/v6/footer/basic/index.md
index 4f91c2bd6ab..401c9171919 100644
--- a/static/usage/v6/footer/basic/index.md
+++ b/static/usage/v6/footer/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/basic/demo.html"
   devicePreview
diff --git a/static/usage/v6/footer/custom-scroll-target/index.md b/static/usage/v6/footer/custom-scroll-target/index.md
index 03d078fe05c..7ffe8324089 100644
--- a/static/usage/v6/footer/custom-scroll-target/index.md
+++ b/static/usage/v6/footer/custom-scroll-target/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/footer/fade/index.md b/static/usage/v6/footer/fade/index.md
index c5e53f9bcab..3b2bf18a87c 100644
--- a/static/usage/v6/footer/fade/index.md
+++ b/static/usage/v6/footer/fade/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/fade/demo.html"
   devicePreview
diff --git a/static/usage/v6/footer/no-border/index.md b/static/usage/v6/footer/no-border/index.md
index 5230bfac7e8..e929bfc5f5c 100644
--- a/static/usage/v6/footer/no-border/index.md
+++ b/static/usage/v6/footer/no-border/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/no-border/demo.html"
   devicePreview
diff --git a/static/usage/v6/footer/translucent/index.md b/static/usage/v6/footer/translucent/index.md
index b15d0ab997b..13282edb815 100644
--- a/static/usage/v6/footer/translucent/index.md
+++ b/static/usage/v6/footer/translucent/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/translucent/demo.html"
   devicePreview
diff --git a/static/usage/v6/grid/basic/index.md b/static/usage/v6/grid/basic/index.md
index 8b8773e605b..20f2d5b879a 100644
--- a/static/usage/v6/grid/basic/index.md
+++ b/static/usage/v6/grid/basic/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/customizing/column-number/index.md b/static/usage/v6/grid/customizing/column-number/index.md
index 65bea72c7bf..62f7b0e71dc 100644
--- a/static/usage/v6/grid/customizing/column-number/index.md
+++ b/static/usage/v6/grid/customizing/column-number/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/customizing/padding/index.md b/static/usage/v6/grid/customizing/padding/index.md
index 4ff00c1135c..97fff788e70 100644
--- a/static/usage/v6/grid/customizing/padding/index.md
+++ b/static/usage/v6/grid/customizing/padding/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/customizing/width/index.md b/static/usage/v6/grid/customizing/width/index.md
index 9a5c4a4ddd3..69e4ff8c84e 100644
--- a/static/usage/v6/grid/customizing/width/index.md
+++ b/static/usage/v6/grid/customizing/width/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/fixed/index.md b/static/usage/v6/grid/fixed/index.md
index 5c671422a22..9a1d0eed6d8 100644
--- a/static/usage/v6/grid/fixed/index.md
+++ b/static/usage/v6/grid/fixed/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/horizontal-alignment/index.md b/static/usage/v6/grid/horizontal-alignment/index.md
index 1a8e23ad7c6..5953e3c8f07 100644
--- a/static/usage/v6/grid/horizontal-alignment/index.md
+++ b/static/usage/v6/grid/horizontal-alignment/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/offset-responsive/index.md b/static/usage/v6/grid/offset-responsive/index.md
index c1fd31f0254..7fd32b3fbb6 100644
--- a/static/usage/v6/grid/offset-responsive/index.md
+++ b/static/usage/v6/grid/offset-responsive/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/offset/index.md b/static/usage/v6/grid/offset/index.md
index d7229800569..cd618e8e008 100644
--- a/static/usage/v6/grid/offset/index.md
+++ b/static/usage/v6/grid/offset/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/push-pull-responsive/index.md b/static/usage/v6/grid/push-pull-responsive/index.md
index 87192579f8c..eaafef7ebda 100644
--- a/static/usage/v6/grid/push-pull-responsive/index.md
+++ b/static/usage/v6/grid/push-pull-responsive/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/push-pull/index.md b/static/usage/v6/grid/push-pull/index.md
index a2749ef09a3..596adfa6bb5 100644
--- a/static/usage/v6/grid/push-pull/index.md
+++ b/static/usage/v6/grid/push-pull/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/size-auto/index.md b/static/usage/v6/grid/size-auto/index.md
index 92a37d7f116..29feee97342 100644
--- a/static/usage/v6/grid/size-auto/index.md
+++ b/static/usage/v6/grid/size-auto/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/size-responsive/index.md b/static/usage/v6/grid/size-responsive/index.md
index 2d8c019868d..e83caa0d71b 100644
--- a/static/usage/v6/grid/size-responsive/index.md
+++ b/static/usage/v6/grid/size-responsive/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/size/index.md b/static/usage/v6/grid/size/index.md
index 58594977f92..0016c253e13 100644
--- a/static/usage/v6/grid/size/index.md
+++ b/static/usage/v6/grid/size/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/vertical-alignment/index.md b/static/usage/v6/grid/vertical-alignment/index.md
index 954af27bfea..b0c35e1bde0 100644
--- a/static/usage/v6/grid/vertical-alignment/index.md
+++ b/static/usage/v6/grid/vertical-alignment/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/header/basic/index.md b/static/usage/v6/header/basic/index.md
index 67bc5d4fd6c..00e86ef4b6c 100644
--- a/static/usage/v6/header/basic/index.md
+++ b/static/usage/v6/header/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/basic/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/condense/index.md b/static/usage/v6/header/condense/index.md
index f094566695e..5ecb94e0fb4 100644
--- a/static/usage/v6/header/condense/index.md
+++ b/static/usage/v6/header/condense/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/condense/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/custom-scroll-target/index.md b/static/usage/v6/header/custom-scroll-target/index.md
index 888eb83b0db..ec1dcc23991 100644
--- a/static/usage/v6/header/custom-scroll-target/index.md
+++ b/static/usage/v6/header/custom-scroll-target/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/header/fade/index.md b/static/usage/v6/header/fade/index.md
index 2898965ec85..eb5ba017071 100644
--- a/static/usage/v6/header/fade/index.md
+++ b/static/usage/v6/header/fade/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/fade/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/no-border/index.md b/static/usage/v6/header/no-border/index.md
index d81316d4c33..3cce680ca39 100644
--- a/static/usage/v6/header/no-border/index.md
+++ b/static/usage/v6/header/no-border/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/no-border/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.md
index 28a84431c50..5a0054584ca 100644
--- a/static/usage/v6/header/translucent/index.md
+++ b/static/usage/v6/header/translucent/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/translucent/demo.html"
   devicePreview
diff --git a/static/usage/v6/img/basic/index.md b/static/usage/v6/img/basic/index.md
index 2988f9ce3b8..563aaf951f0 100644
--- a/static/usage/v6/img/basic/index.md
+++ b/static/usage/v6/img/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/img/basic/demo.html" />
diff --git a/static/usage/v6/infinite-scroll/basic/index.md b/static/usage/v6/infinite-scroll/basic/index.md
index 9082f9eed87..43a3abf2881 100644
--- a/static/usage/v6/infinite-scroll/basic/index.md
+++ b/static/usage/v6/infinite-scroll/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
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
index 12ee6e7d975..ade9cc84531 100644
--- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -12,6 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
index 4a391e1ec3a..506aa28f20d 100644
--- a/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/input/basic/index.md b/static/usage/v6/input/basic/index.md
index aec74aa5fe6..48508afa6d4 100644
--- a/static/usage/v6/input/basic/index.md
+++ b/static/usage/v6/input/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/basic/demo.html" size="300px" />
diff --git a/static/usage/v6/input/clear/index.md b/static/usage/v6/input/clear/index.md
index 1bd98995375..f6bac9b0fbb 100644
--- a/static/usage/v6/input/clear/index.md
+++ b/static/usage/v6/input/clear/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/clear/demo.html" size="250px" />
diff --git a/static/usage/v6/input/fill/index.md b/static/usage/v6/input/fill/index.md
index 3b838e6d74d..68c94cd6714 100644
--- a/static/usage/v6/input/fill/index.md
+++ b/static/usage/v6/input/fill/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/input/fill/demo.html"
   size="250px"
diff --git a/static/usage/v6/input/labels/index.md b/static/usage/v6/input/labels/index.md
index 95cb588ac19..1da820e911e 100644
--- a/static/usage/v6/input/labels/index.md
+++ b/static/usage/v6/input/labels/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/labels/demo.html" size="300px" />
diff --git a/static/usage/v6/input/theming/colors/index.md b/static/usage/v6/input/theming/colors/index.md
index c20a64153fe..9f3861e073b 100644
--- a/static/usage/v6/input/theming/colors/index.md
+++ b/static/usage/v6/input/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/input/theming/colors/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v6/input/theming/css-properties/index.md b/static/usage/v6/input/theming/css-properties/index.md
index a2e6ef2484b..c67d8ddf1bc 100644
--- a/static/usage/v6/input/theming/css-properties/index.md
+++ b/static/usage/v6/input/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/input/types/index.md b/static/usage/v6/input/types/index.md
index a5cddfe6f48..678dc4d9737 100644
--- a/static/usage/v6/input/types/index.md
+++ b/static/usage/v6/input/types/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/types/demo.html" size="300px" />
diff --git a/static/usage/v6/item-divider/basic/index.md b/static/usage/v6/item-divider/basic/index.md
index 0e88dd9accf..c50ecfe1199 100644
--- a/static/usage/v6/item-divider/basic/index.md
+++ b/static/usage/v6/item-divider/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-divider/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/item-divider/theming/colors/index.md b/static/usage/v6/item-divider/theming/colors/index.md
index d883aabbdf7..912ef18df03 100644
--- a/static/usage/v6/item-divider/theming/colors/index.md
+++ b/static/usage/v6/item-divider/theming/colors/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/item-divider/theming/colors/demo.html"
   size="medium"
diff --git a/static/usage/v6/item-divider/theming/css-properties/index.md b/static/usage/v6/item-divider/theming/css-properties/index.md
index 0b3763560e2..499d29749cc 100644
--- a/static/usage/v6/item-divider/theming/css-properties/index.md
+++ b/static/usage/v6/item-divider/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/item-group/basic/index.md b/static/usage/v6/item-group/basic/index.md
index 456e85a4064..d8486d97536 100644
--- a/static/usage/v6/item-group/basic/index.md
+++ b/static/usage/v6/item-group/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-group/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/item-group/sliding-items/index.md b/static/usage/v6/item-group/sliding-items/index.md
index b63a864a248..c5d90b9bc8a 100644
--- a/static/usage/v6/item-group/sliding-items/index.md
+++ b/static/usage/v6/item-group/sliding-items/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/item-group/sliding-items/demo.html"
   size="medium"
diff --git a/static/usage/v6/item-sliding/basic/index.md b/static/usage/v6/item-sliding/basic/index.md
index 4735020120d..0b03726eb1b 100644
--- a/static/usage/v6/item-sliding/basic/index.md
+++ b/static/usage/v6/item-sliding/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/basic/demo.html" />
diff --git a/static/usage/v6/item-sliding/expandable/index.md b/static/usage/v6/item-sliding/expandable/index.md
index fe0929ce8b2..d5025c568ac 100644
--- a/static/usage/v6/item-sliding/expandable/index.md
+++ b/static/usage/v6/item-sliding/expandable/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-sliding/expandable/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/item-sliding/icons/index.md b/static/usage/v6/item-sliding/icons/index.md
index 208b70bb14f..6345bb374fb 100644
--- a/static/usage/v6/item-sliding/icons/index.md
+++ b/static/usage/v6/item-sliding/icons/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-sliding/icons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v6/item/basic/index.md b/static/usage/v6/item/basic/index.md
index 11fec7eecf2..7faf05b21e5 100644
--- a/static/usage/v6/item/basic/index.md
+++ b/static/usage/v6/item/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/basic/demo.html" size="medium" />
diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md
index b079b352558..d46337926bc 100644
--- a/static/usage/v6/item/buttons/index.md
+++ b/static/usage/v6/item/buttons/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/buttons/demo.html" size="250px" />
diff --git a/static/usage/v6/item/clickable/index.md b/static/usage/v6/item/clickable/index.md
index 909f021eb38..91e3cc80ba6 100644
--- a/static/usage/v6/item/clickable/index.md
+++ b/static/usage/v6/item/clickable/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/clickable/demo.html" />
diff --git a/static/usage/v6/item/counter/index.md b/static/usage/v6/item/counter/index.md
index 2dae9aa08ff..b06fb2ecf1a 100644
--- a/static/usage/v6/item/counter/index.md
+++ b/static/usage/v6/item/counter/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/item/detail-arrows/index.md b/static/usage/v6/item/detail-arrows/index.md
index b1404bf636b..7ef7323e95e 100644
--- a/static/usage/v6/item/detail-arrows/index.md
+++ b/static/usage/v6/item/detail-arrows/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item/detail-arrows/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/v6/item/helper-error/index.md b/static/usage/v6/item/helper-error/index.md
index 69cbae09c2a..021ea8858cf 100644
--- a/static/usage/v6/item/helper-error/index.md
+++ b/static/usage/v6/item/helper-error/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md
index ecccb7f12e3..97b18d73650 100644
--- a/static/usage/v6/item/icons/index.md
+++ b/static/usage/v6/item/icons/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/icons/demo.html" size="250px" />
diff --git a/static/usage/v6/item/inputs/index.md b/static/usage/v6/item/inputs/index.md
index 1468e3c5bc1..069052abc58 100644
--- a/static/usage/v6/item/inputs/index.md
+++ b/static/usage/v6/item/inputs/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/inputs/demo.html" size="large" />
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
index 79afa46163e..f1ccef30f7e 100644
--- a/static/usage/v6/item/lines/index.md
+++ b/static/usage/v6/item/lines/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/lines/demo.html" size="medium" />
diff --git a/static/usage/v6/item/media/index.md b/static/usage/v6/item/media/index.md
index 7f6f5bcf2f5..25b0bbf0ebd 100644
--- a/static/usage/v6/item/media/index.md
+++ b/static/usage/v6/item/media/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/media/demo.html" />
diff --git a/static/usage/v6/item/theming/colors/index.md b/static/usage/v6/item/theming/colors/index.md
index 88b26e3a529..c646ae03dbe 100644
--- a/static/usage/v6/item/theming/colors/index.md
+++ b/static/usage/v6/item/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item/theming/colors/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/item/theming/css-properties/index.md b/static/usage/v6/item/theming/css-properties/index.md
index 0a0793092c4..5db040f5834 100644
--- a/static/usage/v6/item/theming/css-properties/index.md
+++ b/static/usage/v6/item/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/item/theming/css-shadow-parts/index.md b/static/usage/v6/item/theming/css-shadow-parts/index.md
index bc82df768ea..a0f2c064b09 100644
--- a/static/usage/v6/item/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/item/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/item/theming/input-highlight/index.md b/static/usage/v6/item/theming/input-highlight/index.md
index 3932ef07433..e74a8267a28 100644
--- a/static/usage/v6/item/theming/input-highlight/index.md
+++ b/static/usage/v6/item/theming/input-highlight/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/label/basic/index.md b/static/usage/v6/label/basic/index.md
index 0841cbe71ee..d6c1819f1b6 100644
--- a/static/usage/v6/label/basic/index.md
+++ b/static/usage/v6/label/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/basic/demo.html" />
diff --git a/static/usage/v6/label/input/index.md b/static/usage/v6/label/input/index.md
index 714a8b2d253..7f825e38e93 100644
--- a/static/usage/v6/label/input/index.md
+++ b/static/usage/v6/label/input/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/input/demo.html" size="medium" />
diff --git a/static/usage/v6/label/item/index.md b/static/usage/v6/label/item/index.md
index 41a5421ab0b..25b333ac424 100644
--- a/static/usage/v6/label/item/index.md
+++ b/static/usage/v6/label/item/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/item/demo.html" size="medium" />
diff --git a/static/usage/v6/label/theming/colors/index.md b/static/usage/v6/label/theming/colors/index.md
index 79b5ebbc946..2e055eab680 100644
--- a/static/usage/v6/label/theming/colors/index.md
+++ b/static/usage/v6/label/theming/colors/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/theming/colors/demo.html" />
diff --git a/static/usage/v6/list-header/basic/index.md b/static/usage/v6/list-header/basic/index.md
index d3abe151a87..78b84e21387 100644
--- a/static/usage/v6/list-header/basic/index.md
+++ b/static/usage/v6/list-header/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/list-header/basic/demo.html"
+  size="325px"
+/>
diff --git a/static/usage/v6/list-header/buttons/index.md b/static/usage/v6/list-header/buttons/index.md
index f3eef534dd0..368b68089d1 100644
--- a/static/usage/v6/list-header/buttons/index.md
+++ b/static/usage/v6/list-header/buttons/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/list-header/buttons/demo.html"
+  size="325px"
+/>
diff --git a/static/usage/v6/list-header/lines/index.md b/static/usage/v6/list-header/lines/index.md
index 54598147a4f..53f77fb4ff3 100644
--- a/static/usage/v6/list-header/lines/index.md
+++ b/static/usage/v6/list-header/lines/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/list-header/lines/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/list-header/theming/colors/index.md b/static/usage/v6/list-header/theming/colors/index.md
index 10be0e14877..828041239f3 100644
--- a/static/usage/v6/list-header/theming/colors/index.md
+++ b/static/usage/v6/list-header/theming/colors/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/list-header/theming/colors/demo.html"
   size="650px"
diff --git a/static/usage/v6/list-header/theming/css-properties/index.md b/static/usage/v6/list-header/theming/css-properties/index.md
index f9a497142e7..0a63f448d35 100644
--- a/static/usage/v6/list-header/theming/css-properties/index.md
+++ b/static/usage/v6/list-header/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/list/basic/index.md b/static/usage/v6/list/basic/index.md
index 04da67f403d..906f3f91880 100644
--- a/static/usage/v6/list/basic/index.md
+++ b/static/usage/v6/list/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/list/basic/demo.html" size="300px" />
diff --git a/static/usage/v6/list/inset/index.md b/static/usage/v6/list/inset/index.md
index a98a9f03e82..cbab47db1ea 100644
--- a/static/usage/v6/list/inset/index.md
+++ b/static/usage/v6/list/inset/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/list/inset/demo.html" size="350px" />
diff --git a/static/usage/v6/list/lines/index.md b/static/usage/v6/list/lines/index.md
index bc8750c13c8..2f622d7723a 100644
--- a/static/usage/v6/list/lines/index.md
+++ b/static/usage/v6/list/lines/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/list/lines/demo.html" size="500px" />
diff --git a/static/usage/v6/loading/controller/index.md b/static/usage/v6/loading/controller/index.md
index 7d62fd4f345..43c62e88258 100644
--- a/static/usage/v6/loading/controller/index.md
+++ b/static/usage/v6/loading/controller/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/loading/spinners/index.md b/static/usage/v6/loading/spinners/index.md
index 2fded40331d..e29eca69331 100644
--- a/static/usage/v6/loading/spinners/index.md
+++ b/static/usage/v6/loading/spinners/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/loading/theming/index.md b/static/usage/v6/loading/theming/index.md
index 8f96b3a28e0..61dc8c20be3 100644
--- a/static/usage/v6/loading/theming/index.md
+++ b/static/usage/v6/loading/theming/index.md
@@ -12,6 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/menu/basic/index.md b/static/usage/v6/menu/basic/index.md
index ebfb7a81a3a..b54e840574d 100644
--- a/static/usage/v6/menu/basic/index.md
+++ b/static/usage/v6/menu/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/menu/theming/index.md b/static/usage/v6/menu/theming/index.md
index be01c7e08a8..5ff9842fe38 100644
--- a/static/usage/v6/menu/theming/index.md
+++ b/static/usage/v6/menu/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/menu/toggle/index.md b/static/usage/v6/menu/toggle/index.md
index b56daf9751f..417ec9471e7 100644
--- a/static/usage/v6/menu/toggle/index.md
+++ b/static/usage/v6/menu/toggle/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/menu/type/index.md b/static/usage/v6/menu/type/index.md
index b05232459c0..1316b5662e9 100644
--- a/static/usage/v6/menu/type/index.md
+++ b/static/usage/v6/menu/type/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/can-dismiss/boolean/index.md b/static/usage/v6/modal/can-dismiss/boolean/index.md
index 29fc2404f17..c464c42ccc4 100644
--- a/static/usage/v6/modal/can-dismiss/boolean/index.md
+++ b/static/usage/v6/modal/can-dismiss/boolean/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/can-dismiss/function/index.md b/static/usage/v6/modal/can-dismiss/function/index.md
index 37de40102aa..9bd485ac4fb 100644
--- a/static/usage/v6/modal/can-dismiss/function/index.md
+++ b/static/usage/v6/modal/can-dismiss/function/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/card/basic/index.md b/static/usage/v6/modal/card/basic/index.md
index dfea885fdc7..bb314c4d574 100644
--- a/static/usage/v6/modal/card/basic/index.md
+++ b/static/usage/v6/modal/card/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/controller/index.md b/static/usage/v6/modal/controller/index.md
index 5b98f7a0a37..2f1d5c9b961 100644
--- a/static/usage/v6/modal/controller/index.md
+++ b/static/usage/v6/modal/controller/index.md
@@ -13,6 +13,7 @@ import angular_modal_example_component_ts from './angular/modal-example_componen
 import angular_modal_example_component_html from './angular/modal-example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/custom-dialogs/index.md b/static/usage/v6/modal/custom-dialogs/index.md
index f1dd66838a2..a67a23d1dd3 100644
--- a/static/usage/v6/modal/custom-dialogs/index.md
+++ b/static/usage/v6/modal/custom-dialogs/index.md
@@ -10,6 +10,7 @@ import angular_global_css from './angular/global_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     vue,
diff --git a/static/usage/v6/modal/inline/basic/index.md b/static/usage/v6/modal/inline/basic/index.md
index af73ad2fc9b..e0a5c191430 100644
--- a/static/usage/v6/modal/inline/basic/index.md
+++ b/static/usage/v6/modal/inline/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/inline/is-open/index.md b/static/usage/v6/modal/inline/is-open/index.md
index 8ecbcd11c04..026b443d9a8 100644
--- a/static/usage/v6/modal/inline/is-open/index.md
+++ b/static/usage/v6/modal/inline/is-open/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/performance/mount/index.md b/static/usage/v6/modal/performance/mount/index.md
index 08401681fa3..6e850c913b1 100644
--- a/static/usage/v6/modal/performance/mount/index.md
+++ b/static/usage/v6/modal/performance/mount/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/sheet/background-content/index.md b/static/usage/v6/modal/sheet/background-content/index.md
index 28fca16d4be..ef44efa7104 100644
--- a/static/usage/v6/modal/sheet/background-content/index.md
+++ b/static/usage/v6/modal/sheet/background-content/index.md
@@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/sheet/basic/index.md b/static/usage/v6/modal/sheet/basic/index.md
index bdbfd4d93e9..3525336234e 100644
--- a/static/usage/v6/modal/sheet/basic/index.md
+++ b/static/usage/v6/modal/sheet/basic/index.md
@@ -6,6 +6,7 @@ import react from './react.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/sheet/handle-behavior/index.md b/static/usage/v6/modal/sheet/handle-behavior/index.md
index e6406ba35aa..319f0e86dfe 100644
--- a/static/usage/v6/modal/sheet/handle-behavior/index.md
+++ b/static/usage/v6/modal/sheet/handle-behavior/index.md
@@ -6,6 +6,7 @@ import react from './react.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/styling/animations/index.md b/static/usage/v6/modal/styling/animations/index.md
index def0fe99908..9198d960c17 100644
--- a/static/usage/v6/modal/styling/animations/index.md
+++ b/static/usage/v6/modal/styling/animations/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript: {
       files: {
diff --git a/static/usage/v6/modal/styling/theming/index.md b/static/usage/v6/modal/styling/theming/index.md
index ac8d2b95877..883a0197744 100644
--- a/static/usage/v6/modal/styling/theming/index.md
+++ b/static/usage/v6/modal/styling/theming/index.md
@@ -10,6 +10,7 @@ import angular_global_css from './angular/global_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     vue,
diff --git a/static/usage/v6/nav/modal-navigation/index.md b/static/usage/v6/nav/modal-navigation/index.md
index 8ba2cf1132b..37de19ca71a 100644
--- a/static/usage/v6/nav/modal-navigation/index.md
+++ b/static/usage/v6/nav/modal-navigation/index.md
@@ -20,6 +20,7 @@ import vue_page_two from './vue/page_two_vue.md';
 import vue_page_three from './vue/page_three_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/nav/nav-link/index.md b/static/usage/v6/nav/nav-link/index.md
index f0ff7bb0415..2fdeadbbbdd 100644
--- a/static/usage/v6/nav/nav-link/index.md
+++ b/static/usage/v6/nav/nav-link/index.md
@@ -20,6 +20,7 @@ import vue_page_two from './vue/page_two_vue.md';
 import vue_page_three from './vue/page_three_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/note/basic/index.md b/static/usage/v6/note/basic/index.md
index be75c1214e7..893b26095d4 100644
--- a/static/usage/v6/note/basic/index.md
+++ b/static/usage/v6/note/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/note/basic/demo.html" />
diff --git a/static/usage/v6/note/item/index.md b/static/usage/v6/note/item/index.md
index d829308cdec..8327141e7d3 100644
--- a/static/usage/v6/note/item/index.md
+++ b/static/usage/v6/note/item/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/note/item/demo.html" />
diff --git a/static/usage/v6/note/theming/colors/index.md b/static/usage/v6/note/theming/colors/index.md
index 62d29bd2be9..ae6f093a75c 100644
--- a/static/usage/v6/note/theming/colors/index.md
+++ b/static/usage/v6/note/theming/colors/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/note/theming/colors/demo.html" />
diff --git a/static/usage/v6/note/theming/css-properties/index.md b/static/usage/v6/note/theming/css-properties/index.md
index c1e731f8d1b..7055e40a026 100644
--- a/static/usage/v6/note/theming/css-properties/index.md
+++ b/static/usage/v6/note/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/picker/multiple-column/index.md b/static/usage/v6/picker/multiple-column/index.md
index 3ec3e30f391..a8709df973c 100644
--- a/static/usage/v6/picker/multiple-column/index.md
+++ b/static/usage/v6/picker/multiple-column/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/picker/single-column/index.md b/static/usage/v6/picker/single-column/index.md
index 4f012f8e3f6..a2ee8ee48e3 100644
--- a/static/usage/v6/picker/single-column/index.md
+++ b/static/usage/v6/picker/single-column/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/popover/customization/positioning/index.md b/static/usage/v6/popover/customization/positioning/index.md
index 1162f540336..6907af6ceb8 100644
--- a/static/usage/v6/popover/customization/positioning/index.md
+++ b/static/usage/v6/popover/customization/positioning/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="400px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/customization/sizing/index.md b/static/usage/v6/popover/customization/sizing/index.md
index 7adf62d0847..45fec0f6b58 100644
--- a/static/usage/v6/popover/customization/sizing/index.md
+++ b/static/usage/v6/popover/customization/sizing/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/popover/customization/sizing/demo.html"
diff --git a/static/usage/v6/popover/customization/styling/index.md b/static/usage/v6/popover/customization/styling/index.md
index f4615883312..47d131c44c3 100644
--- a/static/usage/v6/popover/customization/styling/index.md
+++ b/static/usage/v6/popover/customization/styling/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/nested/index.md b/static/usage/v6/popover/nested/index.md
index 5a987c633a5..24fb460b14a 100644
--- a/static/usage/v6/popover/nested/index.md
+++ b/static/usage/v6/popover/nested/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/popover/nested/demo.html"
+/>
diff --git a/static/usage/v6/popover/performance/mount/index.md b/static/usage/v6/popover/performance/mount/index.md
index c201dea3154..cfa394abec0 100644
--- a/static/usage/v6/popover/performance/mount/index.md
+++ b/static/usage/v6/popover/performance/mount/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/popover/presenting/controller/index.md b/static/usage/v6/popover/presenting/controller/index.md
index 868abdc93b9..4906017d235 100644
--- a/static/usage/v6/popover/presenting/controller/index.md
+++ b/static/usage/v6/popover/presenting/controller/index.md
@@ -13,6 +13,7 @@ import angular_popover_component_ts from './angular/popover_component_ts.md';
 import angular_app_module from './angular/app_module_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/presenting/inline-isopen/index.md b/static/usage/v6/popover/presenting/inline-isopen/index.md
index 3a57a188e15..b5aaac58ac1 100644
--- a/static/usage/v6/popover/presenting/inline-isopen/index.md
+++ b/static/usage/v6/popover/presenting/inline-isopen/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/presenting/inline-trigger/index.md b/static/usage/v6/popover/presenting/inline-trigger/index.md
index d481ddbde3f..973dea6fa41 100644
--- a/static/usage/v6/popover/presenting/inline-trigger/index.md
+++ b/static/usage/v6/popover/presenting/inline-trigger/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/popover/presenting/inline-trigger/demo.html"
diff --git a/static/usage/v6/progress-bar/buffer/index.md b/static/usage/v6/progress-bar/buffer/index.md
index 29d9991adcc..dda56114b78 100644
--- a/static/usage/v6/progress-bar/buffer/index.md
+++ b/static/usage/v6/progress-bar/buffer/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/progress-bar/determinate/index.md b/static/usage/v6/progress-bar/determinate/index.md
index d94f1595579..43fdf15b741 100644
--- a/static/usage/v6/progress-bar/determinate/index.md
+++ b/static/usage/v6/progress-bar/determinate/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/progress-bar/indeterminate/index.md b/static/usage/v6/progress-bar/indeterminate/index.md
index 098def69854..4596d5a54b9 100644
--- a/static/usage/v6/progress-bar/indeterminate/index.md
+++ b/static/usage/v6/progress-bar/indeterminate/index.md
@@ -5,4 +5,8 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/progress-bar/indeterminate/demo.html"
+/>
diff --git a/static/usage/v6/progress-bar/theming/colors/index.md b/static/usage/v6/progress-bar/theming/colors/index.md
index 5f0d2092c55..e4defcbfc84 100644
--- a/static/usage/v6/progress-bar/theming/colors/index.md
+++ b/static/usage/v6/progress-bar/theming/colors/index.md
@@ -5,4 +5,8 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/progress-bar/theming/colors/demo.html"
+/>
diff --git a/static/usage/v6/progress-bar/theming/css-properties/index.md b/static/usage/v6/progress-bar/theming/css-properties/index.md
index 1c4a9cf15da..cb943ed9e51 100644
--- a/static/usage/v6/progress-bar/theming/css-properties/index.md
+++ b/static/usage/v6/progress-bar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
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
index 50fcfab3159..35baa022fa2 100644
--- a/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/radio/basic/index.md b/static/usage/v6/radio/basic/index.md
index ef39cf54ae1..2abde833f2e 100644
--- a/static/usage/v6/radio/basic/index.md
+++ b/static/usage/v6/radio/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/radio/basic/demo.html" size="250px" />
diff --git a/static/usage/v6/radio/empty-selection/index.md b/static/usage/v6/radio/empty-selection/index.md
index 2f789c60bee..fd6d995816d 100644
--- a/static/usage/v6/radio/empty-selection/index.md
+++ b/static/usage/v6/radio/empty-selection/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/radio/empty-selection/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/radio/theming/colors/index.md b/static/usage/v6/radio/theming/colors/index.md
index a8b20257d2e..fe4ef66c18e 100644
--- a/static/usage/v6/radio/theming/colors/index.md
+++ b/static/usage/v6/radio/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/radio/theming/colors/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/radio/theming/css-properties/index.md b/static/usage/v6/radio/theming/css-properties/index.md
index 78ce4589761..844b06a04f2 100644
--- a/static/usage/v6/radio/theming/css-properties/index.md
+++ b/static/usage/v6/radio/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/index.md b/static/usage/v6/radio/theming/css-shadow-parts/index.md
index f9d30b28015..84c388f35f3 100644
--- a/static/usage/v6/radio/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/radio/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/range/basic/index.md b/static/usage/v6/range/basic/index.md
index 3c8a5863952..46bb7648339 100644
--- a/static/usage/v6/range/basic/index.md
+++ b/static/usage/v6/range/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/basic/demo.html" />
diff --git a/static/usage/v6/range/dual-knobs/index.md b/static/usage/v6/range/dual-knobs/index.md
index ab7b43f4d48..70792168ada 100644
--- a/static/usage/v6/range/dual-knobs/index.md
+++ b/static/usage/v6/range/dual-knobs/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/dual-knobs/demo.html" />
diff --git a/static/usage/v6/range/ion-change-event/index.md b/static/usage/v6/range/ion-change-event/index.md
index d14edf576b4..f4376e63985 100644
--- a/static/usage/v6/range/ion-change-event/index.md
+++ b/static/usage/v6/range/ion-change-event/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/range/ion-knob-move-event/index.md b/static/usage/v6/range/ion-knob-move-event/index.md
index 4f615970535..5e0475a5781 100644
--- a/static/usage/v6/range/ion-knob-move-event/index.md
+++ b/static/usage/v6/range/ion-knob-move-event/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/range/pins/index.md b/static/usage/v6/range/pins/index.md
index a453df0297e..6cd4afa65c3 100644
--- a/static/usage/v6/range/pins/index.md
+++ b/static/usage/v6/range/pins/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/range/slots/index.md b/static/usage/v6/range/slots/index.md
index 786745fcf35..b5c41e0f8dc 100644
--- a/static/usage/v6/range/slots/index.md
+++ b/static/usage/v6/range/slots/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/slots/demo.html" />
diff --git a/static/usage/v6/range/snapping-ticks/index.md b/static/usage/v6/range/snapping-ticks/index.md
index 9c701956179..aab3bbecead 100644
--- a/static/usage/v6/range/snapping-ticks/index.md
+++ b/static/usage/v6/range/snapping-ticks/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/snapping-ticks/demo.html" />
diff --git a/static/usage/v6/range/theming/css-properties/index.md b/static/usage/v6/range/theming/css-properties/index.md
index b85f6df20a1..1f5aa7529f7 100644
--- a/static/usage/v6/range/theming/css-properties/index.md
+++ b/static/usage/v6/range/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/range/theming/css-shadow-parts/index.md b/static/usage/v6/range/theming/css-shadow-parts/index.md
index 9ed3c33a790..a319fbcfaaa 100644
--- a/static/usage/v6/range/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/range/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/refresher/advanced/index.md b/static/usage/v6/refresher/advanced/index.md
index 748023fd227..287a2d7dc66 100644
--- a/static/usage/v6/refresher/advanced/index.md
+++ b/static/usage/v6/refresher/advanced/index.md
@@ -12,6 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/refresher/basic/index.md b/static/usage/v6/refresher/basic/index.md
index 551f36d11ff..7d5881fdc1c 100644
--- a/static/usage/v6/refresher/basic/index.md
+++ b/static/usage/v6/refresher/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/refresher/custom-content/index.md b/static/usage/v6/refresher/custom-content/index.md
index 9f9f011336c..535914c3215 100644
--- a/static/usage/v6/refresher/custom-content/index.md
+++ b/static/usage/v6/refresher/custom-content/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/refresher/custom-scroll-target/index.md b/static/usage/v6/refresher/custom-scroll-target/index.md
index 77b21184550..6f10357cca7 100644
--- a/static/usage/v6/refresher/custom-scroll-target/index.md
+++ b/static/usage/v6/refresher/custom-scroll-target/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/refresher/pull-properties/index.md b/static/usage/v6/refresher/pull-properties/index.md
index de1272a96d3..0d7f17cc547 100644
--- a/static/usage/v6/refresher/pull-properties/index.md
+++ b/static/usage/v6/refresher/pull-properties/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/basic/index.md b/static/usage/v6/reorder/basic/index.md
index 76f7d2c783a..7e5b9512ad7 100644
--- a/static/usage/v6/reorder/basic/index.md
+++ b/static/usage/v6/reorder/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/custom-icon/index.md b/static/usage/v6/reorder/custom-icon/index.md
index d946399ba25..4a5490803bf 100644
--- a/static/usage/v6/reorder/custom-icon/index.md
+++ b/static/usage/v6/reorder/custom-icon/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/custom-scroll-target/index.md b/static/usage/v6/reorder/custom-scroll-target/index.md
index 46fb210234b..7e0c4c1e05f 100644
--- a/static/usage/v6/reorder/custom-scroll-target/index.md
+++ b/static/usage/v6/reorder/custom-scroll-target/index.md
@@ -12,6 +12,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/reorder/toggling-disabled/index.md b/static/usage/v6/reorder/toggling-disabled/index.md
index 461db158d64..c4f5dac0112 100644
--- a/static/usage/v6/reorder/toggling-disabled/index.md
+++ b/static/usage/v6/reorder/toggling-disabled/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/updating-data/index.md b/static/usage/v6/reorder/updating-data/index.md
index 7311c655001..6ff98a45bf2 100644
--- a/static/usage/v6/reorder/updating-data/index.md
+++ b/static/usage/v6/reorder/updating-data/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/wrapper/index.md b/static/usage/v6/reorder/wrapper/index.md
index 12b42e73c48..e598b393527 100644
--- a/static/usage/v6/reorder/wrapper/index.md
+++ b/static/usage/v6/reorder/wrapper/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/ripple-effect/basic/index.md b/static/usage/v6/ripple-effect/basic/index.md
index 3958e27a96f..037e23e5936 100644
--- a/static/usage/v6/ripple-effect/basic/index.md
+++ b/static/usage/v6/ripple-effect/basic/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/ripple-effect/customizing/index.md b/static/usage/v6/ripple-effect/customizing/index.md
index 8a5b6b3ac15..61cf6350323 100644
--- a/static/usage/v6/ripple-effect/customizing/index.md
+++ b/static/usage/v6/ripple-effect/customizing/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/ripple-effect/type/index.md b/static/usage/v6/ripple-effect/type/index.md
index cf2d9f32720..f1af22ddf2b 100644
--- a/static/usage/v6/ripple-effect/type/index.md
+++ b/static/usage/v6/ripple-effect/type/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/router/basic/index.md b/static/usage/v6/router/basic/index.md
index 1addc30f5ab..a0b89f7644e 100644
--- a/static/usage/v6/router/basic/index.md
+++ b/static/usage/v6/router/basic/index.md
@@ -3,6 +3,7 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 
 <Playground
+  version="6"
   code={{ javascript }}
   src="usage/v6/router/basic/demo.html"
   devicePreview={true}
diff --git a/static/usage/v6/searchbar/basic/index.md b/static/usage/v6/searchbar/basic/index.md
index ae771b76c6e..b61097ef839 100644
--- a/static/usage/v6/searchbar/basic/index.md
+++ b/static/usage/v6/searchbar/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
index c00d5e7b908..4ad2c30b731 100644
--- a/static/usage/v6/searchbar/cancel-button/index.md
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/cancel-button/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md
index 1341421c264..aa821ec048b 100644
--- a/static/usage/v6/searchbar/clear-button/index.md
+++ b/static/usage/v6/searchbar/clear-button/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/clear-button/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/searchbar/debounce/index.md b/static/usage/v6/searchbar/debounce/index.md
index c674ac98016..d161cc8b140 100644
--- a/static/usage/v6/searchbar/debounce/index.md
+++ b/static/usage/v6/searchbar/debounce/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md
index 3dccfc29464..c3611623923 100644
--- a/static/usage/v6/searchbar/search-icon/index.md
+++ b/static/usage/v6/searchbar/search-icon/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/search-icon/demo.html" />
diff --git a/static/usage/v6/searchbar/theming/colors/index.md b/static/usage/v6/searchbar/theming/colors/index.md
index 99500b6e111..c13f364ca20 100644
--- a/static/usage/v6/searchbar/theming/colors/index.md
+++ b/static/usage/v6/searchbar/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v6/searchbar/theming/css-properties/index.md b/static/usage/v6/searchbar/theming/css-properties/index.md
index 0f86b4f2c2b..c6c51b8f352 100644
--- a/static/usage/v6/searchbar/theming/css-properties/index.md
+++ b/static/usage/v6/searchbar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/segment-button/basic/index.md b/static/usage/v6/segment-button/basic/index.md
index ecc96441dbc..7f655ea0adc 100644
--- a/static/usage/v6/segment-button/basic/index.md
+++ b/static/usage/v6/segment-button/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/segment-button/basic/demo.html" />
diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md
index 2764e5f39bd..5ddcc6a17b8 100644
--- a/static/usage/v6/segment-button/layout/index.md
+++ b/static/usage/v6/segment-button/layout/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/segment-button/layout/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/segment-button/theming/css-properties/index.md b/static/usage/v6/segment-button/theming/css-properties/index.md
index e5d344492c4..3bfdd96bb1d 100644
--- a/static/usage/v6/segment-button/theming/css-properties/index.md
+++ b/static/usage/v6/segment-button/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
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
index 1bdbf9bbe01..7008dbc3c4c 100644
--- a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/segment/basic/index.md b/static/usage/v6/segment/basic/index.md
index 7e333956461..6486c6e66f6 100644
--- a/static/usage/v6/segment/basic/index.md
+++ b/static/usage/v6/segment/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/segment/basic/demo.html" />
diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md
index 7f7e45f94a7..de206ca652a 100644
--- a/static/usage/v6/segment/scrollable/index.md
+++ b/static/usage/v6/segment/scrollable/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/segment/scrollable/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/segment/theming/colors/index.md b/static/usage/v6/segment/theming/colors/index.md
index 268e4516c4c..1896c85f8f3 100644
--- a/static/usage/v6/segment/theming/colors/index.md
+++ b/static/usage/v6/segment/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/segment/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v6/segment/theming/css-properties/index.md b/static/usage/v6/segment/theming/css-properties/index.md
index 2e18d975045..f8dfa374ba9 100644
--- a/static/usage/v6/segment/theming/css-properties/index.md
+++ b/static/usage/v6/segment/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/select/basic/multiple-selection/index.md b/static/usage/v6/select/basic/multiple-selection/index.md
index 17ce6401317..57f3380c18f 100644
--- a/static/usage/v6/select/basic/multiple-selection/index.md
+++ b/static/usage/v6/select/basic/multiple-selection/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/basic/multiple-selection/demo.html"
diff --git a/static/usage/v6/select/basic/responding-to-interaction/index.md b/static/usage/v6/select/basic/responding-to-interaction/index.md
index bb8790eb2a1..1e43625767a 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/index.md
+++ b/static/usage/v6/select/basic/responding-to-interaction/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/select/basic/single-selection/index.md b/static/usage/v6/select/basic/single-selection/index.md
index 6f72ef51461..b697188b540 100644
--- a/static/usage/v6/select/basic/single-selection/index.md
+++ b/static/usage/v6/select/basic/single-selection/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/basic/single-selection/demo.html"
diff --git a/static/usage/v6/select/customization/button-text/index.md b/static/usage/v6/select/customization/button-text/index.md
index 55f07c1545f..06e014afb5c 100644
--- a/static/usage/v6/select/customization/button-text/index.md
+++ b/static/usage/v6/select/customization/button-text/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="350px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/customization/button-text/demo.html"
diff --git a/static/usage/v6/select/customization/interface-options/index.md b/static/usage/v6/select/customization/interface-options/index.md
index 9649137159c..ac291deb492 100644
--- a/static/usage/v6/select/customization/interface-options/index.md
+++ b/static/usage/v6/select/customization/interface-options/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="large"
   code={{
     javascript,
diff --git a/static/usage/v6/select/customization/styling-select/index.md b/static/usage/v6/select/customization/styling-select/index.md
index 9ee413b42b3..188a777bf0b 100644
--- a/static/usage/v6/select/customization/styling-select/index.md
+++ b/static/usage/v6/select/customization/styling-select/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/select/interfaces/action-sheet/index.md b/static/usage/v6/select/interfaces/action-sheet/index.md
index 96274b7068e..86bfc5a6723 100644
--- a/static/usage/v6/select/interfaces/action-sheet/index.md
+++ b/static/usage/v6/select/interfaces/action-sheet/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/interfaces/action-sheet/demo.html"
diff --git a/static/usage/v6/select/interfaces/popover/index.md b/static/usage/v6/select/interfaces/popover/index.md
index 57d63aa5633..3aef2c12272 100644
--- a/static/usage/v6/select/interfaces/popover/index.md
+++ b/static/usage/v6/select/interfaces/popover/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="400px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/interfaces/popover/demo.html"
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
index 88e711472a3..6868120f239 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/index.md
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
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
index 20f14d19051..cbe6f0fe783 100644
--- a/static/usage/v6/select/objects-as-values/using-comparewith/index.md
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/select/typeahead/index.md b/static/usage/v6/select/typeahead/index.md
index 3eb44196348..8919f00671f 100644
--- a/static/usage/v6/select/typeahead/index.md
+++ b/static/usage/v6/select/typeahead/index.md
@@ -18,6 +18,7 @@ import angular_modal_example_component_html from './angular/modal-example_compon
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
+  version="6"
   code={{ 
     javascript, 
     react: {
diff --git a/static/usage/v6/skeleton-text/basic/index.md b/static/usage/v6/skeleton-text/basic/index.md
index a018bee692b..2e3371fb890 100644
--- a/static/usage/v6/skeleton-text/basic/index.md
+++ b/static/usage/v6/skeleton-text/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/index.md b/static/usage/v6/skeleton-text/theming/css-properties/index.md
index 699559e1649..4ff16bd3470 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/index.md
+++ b/static/usage/v6/skeleton-text/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/spinner/basic/index.md b/static/usage/v6/spinner/basic/index.md
index 123fc60c553..db7b7e0e8e2 100644
--- a/static/usage/v6/spinner/basic/index.md
+++ b/static/usage/v6/spinner/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/spinner/basic/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/spinner/theming/colors/index.md b/static/usage/v6/spinner/theming/colors/index.md
index c8c2337257b..243c7ead7bf 100644
--- a/static/usage/v6/spinner/theming/colors/index.md
+++ b/static/usage/v6/spinner/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/spinner/theming/colors/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/spinner/theming/css-properties/index.md b/static/usage/v6/spinner/theming/css-properties/index.md
index 647bccd452a..bdc0e36afd4 100644
--- a/static/usage/v6/spinner/theming/css-properties/index.md
+++ b/static/usage/v6/spinner/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/split-pane/basic/index.md b/static/usage/v6/split-pane/basic/index.md
index 3b389f6f910..5f07ca49a5d 100644
--- a/static/usage/v6/split-pane/basic/index.md
+++ b/static/usage/v6/split-pane/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/split-pane/basic/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/split-pane/theming/css-properties/index.md b/static/usage/v6/split-pane/theming/css-properties/index.md
index 606294ff0f1..d92888173f0 100644
--- a/static/usage/v6/split-pane/theming/css-properties/index.md
+++ b/static/usage/v6/split-pane/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/text/basic/index.md b/static/usage/v6/text/basic/index.md
index e54442bcb2d..06efaf44145 100644
--- a/static/usage/v6/text/basic/index.md
+++ b/static/usage/v6/text/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/text/basic/demo.html" />
diff --git a/static/usage/v6/textarea/autogrow/index.md b/static/usage/v6/textarea/autogrow/index.md
index c4f40666a42..9d0efc4679e 100644
--- a/static/usage/v6/textarea/autogrow/index.md
+++ b/static/usage/v6/textarea/autogrow/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="small"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/textarea/autogrow/demo.html"
+/>
diff --git a/static/usage/v6/textarea/basic/index.md b/static/usage/v6/textarea/basic/index.md
index 102465599b8..3325f10b870 100644
--- a/static/usage/v6/textarea/basic/index.md
+++ b/static/usage/v6/textarea/basic/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="250px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/textarea/basic/demo.html"
+/>
diff --git a/static/usage/v6/textarea/clear-on-edit/index.md b/static/usage/v6/textarea/clear-on-edit/index.md
index a6f9da7f7df..4bb42164650 100644
--- a/static/usage/v6/textarea/clear-on-edit/index.md
+++ b/static/usage/v6/textarea/clear-on-edit/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  size="xsmall"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/textarea/clear-on-edit/demo.html"
+/>
diff --git a/static/usage/v6/textarea/theming/index.md b/static/usage/v6/textarea/theming/index.md
index a0a2e12b661..3570856f99e 100644
--- a/static/usage/v6/textarea/theming/index.md
+++ b/static/usage/v6/textarea/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   size="xsmall"
   code={{
     javascript,
diff --git a/static/usage/v6/thumbnail/basic/index.md b/static/usage/v6/thumbnail/basic/index.md
index 2d616020ba8..b47ec05ade4 100644
--- a/static/usage/v6/thumbnail/basic/index.md
+++ b/static/usage/v6/thumbnail/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/basic/demo.html" />
diff --git a/static/usage/v6/thumbnail/item/index.md b/static/usage/v6/thumbnail/item/index.md
index bd9b1ced946..eeec0a10cd5 100644
--- a/static/usage/v6/thumbnail/item/index.md
+++ b/static/usage/v6/thumbnail/item/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/item/demo.html" />
diff --git a/static/usage/v6/thumbnail/theming/css-properties/index.md b/static/usage/v6/thumbnail/theming/css-properties/index.md
index 11823306607..af98370979e 100644
--- a/static/usage/v6/thumbnail/theming/css-properties/index.md
+++ b/static/usage/v6/thumbnail/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/title/basic/index.md b/static/usage/v6/title/basic/index.md
index e4c3b2dbdfb..8348f2ab712 100644
--- a/static/usage/v6/title/basic/index.md
+++ b/static/usage/v6/title/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/title/basic/demo.html"
   devicePreview={true}
diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.md
index 4c83a3f1c8e..11869e671e5 100644
--- a/static/usage/v6/title/collapsible-large-title/basic/index.md
+++ b/static/usage/v6/title/collapsible-large-title/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   mode="ios"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/title/collapsible-large-title/basic/demo.html"
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/index.md b/static/usage/v6/title/collapsible-large-title/buttons/index.md
index 723de799c4c..f427df176fb 100644
--- a/static/usage/v6/title/collapsible-large-title/buttons/index.md
+++ b/static/usage/v6/title/collapsible-large-title/buttons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   mode="ios"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/title/collapsible-large-title/buttons/demo.html"
diff --git a/static/usage/v6/title/theming/css-properties/index.md b/static/usage/v6/title/theming/css-properties/index.md
index 148a0bd5d9e..c08b16c85e7 100644
--- a/static/usage/v6/title/theming/css-properties/index.md
+++ b/static/usage/v6/title/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/toast/buttons/index.md b/static/usage/v6/toast/buttons/index.md
index 436ac3e16b7..5bd8e1f56ce 100644
--- a/static/usage/v6/toast/buttons/index.md
+++ b/static/usage/v6/toast/buttons/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md
index 55fe84650eb..d636c54d905 100644
--- a/static/usage/v6/toast/icon/index.md
+++ b/static/usage/v6/toast/icon/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toast/presenting/controller/index.md b/static/usage/v6/toast/presenting/controller/index.md
index 82ba56fdde3..492699916c0 100644
--- a/static/usage/v6/toast/presenting/controller/index.md
+++ b/static/usage/v6/toast/presenting/controller/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toast/theming/index.md b/static/usage/v6/toast/theming/index.md
index 0d6efeba58e..0e5b1b56e72 100644
--- a/static/usage/v6/toast/theming/index.md
+++ b/static/usage/v6/toast/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toggle/basic/index.md b/static/usage/v6/toggle/basic/index.md
index 0d6975540e7..87505db9a20 100644
--- a/static/usage/v6/toggle/basic/index.md
+++ b/static/usage/v6/toggle/basic/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/toggle/basic/demo.html" size="250px" />
diff --git a/static/usage/v6/toggle/on-off/index.md b/static/usage/v6/toggle/on-off/index.md
index a3a005e883f..3e716535563 100644
--- a/static/usage/v6/toggle/on-off/index.md
+++ b/static/usage/v6/toggle/on-off/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/toggle/on-off/demo.html" />
diff --git a/static/usage/v6/toggle/theming/colors/index.md b/static/usage/v6/toggle/theming/colors/index.md
index 4229ac88a7a..e5a56aa4452 100644
--- a/static/usage/v6/toggle/theming/colors/index.md
+++ b/static/usage/v6/toggle/theming/colors/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/toggle/theming/colors/demo.html" />
diff --git a/static/usage/v6/toggle/theming/css-properties/index.md b/static/usage/v6/toggle/theming/css-properties/index.md
index 9342c5eba77..6a78a059e49 100644
--- a/static/usage/v6/toggle/theming/css-properties/index.md
+++ b/static/usage/v6/toggle/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/index.md b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
index 2b7ab7d590f..137b6d4c1d9 100644
--- a/static/usage/v6/toggle/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/toolbar/basic/index.md b/static/usage/v6/toolbar/basic/index.md
index 582ec8c8532..3262c3c2847 100644
--- a/static/usage/v6/toolbar/basic/index.md
+++ b/static/usage/v6/toolbar/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/basic/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md
index 29c741b1bc8..2ac28550f9d 100644
--- a/static/usage/v6/toolbar/buttons/index.md
+++ b/static/usage/v6/toolbar/buttons/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/buttons/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/toolbar/progress-bars/index.md b/static/usage/v6/toolbar/progress-bars/index.md
index 5af902934c1..b6e14d7faac 100644
--- a/static/usage/v6/toolbar/progress-bars/index.md
+++ b/static/usage/v6/toolbar/progress-bars/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/progress-bars/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/searchbars/index.md b/static/usage/v6/toolbar/searchbars/index.md
index 6593e3f9c07..46b45f13b54 100644
--- a/static/usage/v6/toolbar/searchbars/index.md
+++ b/static/usage/v6/toolbar/searchbars/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/searchbars/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/segments/index.md b/static/usage/v6/toolbar/segments/index.md
index 2f660e05d3f..f7eb713a371 100644
--- a/static/usage/v6/toolbar/segments/index.md
+++ b/static/usage/v6/toolbar/segments/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/segments/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/theming/colors/index.md b/static/usage/v6/toolbar/theming/colors/index.md
index f9a44fe6cc5..e61569c60d4 100644
--- a/static/usage/v6/toolbar/theming/colors/index.md
+++ b/static/usage/v6/toolbar/theming/colors/index.md
@@ -5,4 +5,9 @@ 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" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v6/toolbar/theming/css-properties/index.md b/static/usage/v6/toolbar/theming/css-properties/index.md
index b67029ee5de..95b9a7db1ce 100644
--- a/static/usage/v6/toolbar/theming/css-properties/index.md
+++ b/static/usage/v6/toolbar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md
index 6a75d1be5f1..27c7d6b0c0c 100644
--- a/static/usage/v7/back-button/basic/index.md
+++ b/static/usage/v7/back-button/basic/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="7"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md
index d09cfdb97d7..d90a901513f 100644
--- a/static/usage/v7/back-button/custom/index.md
+++ b/static/usage/v7/back-button/custom/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="7"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v7/router/basic/index.md b/static/usage/v7/router/basic/index.md
index 5fd52766bcb..d02afbe2a35 100644
--- a/static/usage/v7/router/basic/index.md
+++ b/static/usage/v7/router/basic/index.md
@@ -3,6 +3,7 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 
 <Playground
+  version="7"
   code={{ javascript }}
   src="usage/v7/router/basic/demo.html"
   devicePreview={true}
diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md
index ac83a5daf96..70fb4890262 100644
--- a/static/usage/v7/select/typeahead/index.md
+++ b/static/usage/v7/select/typeahead/index.md
@@ -18,6 +18,7 @@ import angular_modal_example_component_html from './angular/modal-example_compon
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
+  version="7"
   code={{ 
     javascript, 
     react: {

From 0ab28402c0985c239bdacac882da32d0ff159eca Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 27 Feb 2023 17:16:17 -0500
Subject: [PATCH 223/469] docs(angular): supported angular versions (#2785)

---
 docs/angular/overview.md                      | 22 ++++++++++++++++++-
 versioned_docs/version-v6/angular/overview.md | 22 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/docs/angular/overview.md b/docs/angular/overview.md
index ce6cd60c6be..10bae7ff7b0 100644
--- a/docs/angular/overview.md
+++ b/docs/angular/overview.md
@@ -11,12 +11,32 @@ sidebar_label: Overview
   />
 </head>
 
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
 `@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.
+Ionic v7 supports Angular v14+. 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.
+
+## 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 Angular 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/angular/overview.md b/versioned_docs/version-v6/angular/overview.md
index ce6cd60c6be..b457d1c402b 100644
--- a/versioned_docs/version-v6/angular/overview.md
+++ b/versioned_docs/version-v6/angular/overview.md
@@ -11,12 +11,32 @@ sidebar_label: Overview
   />
 </head>
 
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
 `@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.
+Ionic v6 supports Angular v12-v15. 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.
+
+## 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 Angular 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>

From 52741587c2052d17786a978190a0f3dab24082aa Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 27 Feb 2023 17:06:47 -0600
Subject: [PATCH 224/469] fix(playground): prevent horizontal scrollbar on ios
 device frame view (#2789)

---
 src/components/global/Playground/playground.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css
index 174fd6a9936..1a52fa7108e 100644
--- a/src/components/global/Playground/playground.css
+++ b/src/components/global/Playground/playground.css
@@ -208,8 +208,10 @@
   width: 0%;
 }
 
-.playground .frame-visible {
-  width: 100%;
+@media only screen and (max-width: 600px) {
+  .playground .frame-visible {
+    width: 100%;
+  }
 }
 
 /** Tabs **/

From 07d1fc9c527f25023ea45c626ccb84493ea0a191 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Mar 2023 10:19:13 -0500
Subject: [PATCH 225/469] docs(toast): add version to layout (#2800)

---
 static/usage/v6/toast/layout/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.md
index 7f420b26af4..331eef6b0f5 100644
--- a/static/usage/v6/toast/layout/index.md
+++ b/static/usage/v6/toast/layout/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,

From ec9c5c631cc2c69f52bfb276366ffac473b69981 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Mar 2023 11:01:18 -0500
Subject: [PATCH 226/469] docs(toast): update cdn version (#2801)

---
 static/usage/v6/toast/layout/demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
index dbeb624b0fb..79942ae2484 100644
--- a/static/usage/v6/toast/layout/demo.html
+++ b/static/usage/v6/toast/layout/demo.html
@@ -25,7 +25,7 @@
   </ion-app>
 
   <script type="module">
-    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676303024.114a8ff3/dist/ionic/index.esm.js';
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
     window.toastController = toastController;
   </script>
 

From 630c5f14146b5c06be65cf0ea2ee877f0ba84891 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 2 Mar 2023 10:22:23 -0500
Subject: [PATCH 227/469] fix(playground): hidden iframes are hidden from
 screen readers (#2802)

---
 src/components/global/Playground/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 781b65e0bdb..209a0369971 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -591,12 +591,12 @@ export default function Playground({
             */}
                 {devicePreview
                   ? [
-                      <div className={!isIOS ? 'frame-hidden' : 'frame-visible'}>
+                      <div className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
                         <device-preview mode="ios">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
                         </device-preview>
                       </div>,
-                      <div className={!isMD ? 'frame-hidden' : 'frame-visible'}>
+                      <div className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
                         <device-preview mode="md">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
                         </device-preview>
@@ -608,12 +608,14 @@ export default function Playground({
                         className={!isIOS ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'ios')}
                         src={sourceiOS}
+                        aria-hidden={!isIOS ? 'true' : null}
                       ></iframe>,
                       <iframe
                         height={frameSize}
                         className={!isMD ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'md')}
                         src={sourceMD}
+                        aria-hidden={!isMD ? 'true' : null}
                       ></iframe>,
                     ]}
               </div>,

From b44c54db5331f135b79659c2c351b9f71a018ed7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 2 Mar 2023 13:09:27 -0500
Subject: [PATCH 228/469] chore(version): update v5 and v6 docs to use the
 versioned docs demo deployment (#2796)

---
 static/usage/v6/img/basic/angular.md    | 2 +-
 static/usage/v6/img/basic/demo.html     | 4 ++--
 static/usage/v6/img/basic/javascript.md | 2 +-
 static/usage/v6/img/basic/react.md      | 2 +-
 static/usage/v6/img/basic/vue.md        | 2 +-
 versioned_docs/version-v5/index.md      | 4 ++--
 versioned_docs/version-v6/index.md      | 4 ++--
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/static/usage/v6/img/basic/angular.md b/static/usage/v6/img/basic/angular.md
index ce4d3d19e0d..fc408402024 100644
--- a/static/usage/v6/img/basic/angular.md
+++ b/static/usage/v6/img/basic/angular.md
@@ -1,3 +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>
+<ion-img src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
 ```
diff --git a/static/usage/v6/img/basic/demo.html b/static/usage/v6/img/basic/demo.html
index 63f7703963c..8b292725825 100644
--- a/static/usage/v6/img/basic/demo.html
+++ b/static/usage/v6/img/basic/demo.html
@@ -21,11 +21,11 @@
   <ion-app>
     <ion-content>
       <div class="container">
-        <ion-img src="https://docs-demo.ionic.io/assets/madison.jpg"
+        <ion-img src="https://ionic-docs-demo-v6.vercel.app/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
+</html>
diff --git a/static/usage/v6/img/basic/javascript.md b/static/usage/v6/img/basic/javascript.md
index ce4d3d19e0d..fc408402024 100644
--- a/static/usage/v6/img/basic/javascript.md
+++ b/static/usage/v6/img/basic/javascript.md
@@ -1,3 +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>
+<ion-img src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
 ```
diff --git a/static/usage/v6/img/basic/react.md b/static/usage/v6/img/basic/react.md
index 04c4c086b15..6637dfacef0 100644
--- a/static/usage/v6/img/basic/react.md
+++ b/static/usage/v6/img/basic/react.md
@@ -4,7 +4,7 @@ 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>
+    <IonImg src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></IonImg>
   );
 }
 export default Example;
diff --git a/static/usage/v6/img/basic/vue.md b/static/usage/v6/img/basic/vue.md
index d8cb2cd2d7f..a92ec67a3a5 100644
--- a/static/usage/v6/img/basic/vue.md
+++ b/static/usage/v6/img/basic/vue.md
@@ -1,6 +1,6 @@
 ```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>
+  <ion-img src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
 </template>
 
 <script lang="ts">
diff --git a/versioned_docs/version-v5/index.md b/versioned_docs/version-v5/index.md
index 81cd24667a2..7aa0afc0f01 100644
--- a/versioned_docs/version-v5/index.md
+++ b/versioned_docs/version-v5/index.md
@@ -4,8 +4,8 @@ slug: /
 title: Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps
 description: Ionic Framework is an open-source UI toolkit to create your own mobile and desktop apps using web technologies with integrations for popular frameworks.
 hide_table_of_contents: true
-demoUrl: https://ionic-docs-demo.herokuapp.com/
-demoSourceUrl: https://github.com/ionic-team/docs-demo
+demoUrl: https://ionic-docs-demo-v5.vercel.app/
+demoSourceUrl: https://github.com/ionic-team/docs-demo/tree/5.x
 ---
 
 import DocsCard from '@components/global/DocsCard';
diff --git a/versioned_docs/version-v6/index.md b/versioned_docs/version-v6/index.md
index 5a5909b1b3e..af662eecdb2 100644
--- a/versioned_docs/version-v6/index.md
+++ b/versioned_docs/version-v6/index.md
@@ -3,8 +3,8 @@ 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
+demoUrl: https://ionic-docs-demo-v6.vercel.app/
+demoSourceUrl: https://github.com/ionic-team/docs-demo/tree/6.x
 ---
 
 import DocsCard from '@components/global/DocsCard';

From f623fc900b9a91e19627ffcead672e62f4e65d56 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 6 Mar 2023 12:01:21 -0500
Subject: [PATCH 229/469] docs(api): add accessibility section for icons
 (#2807)

---
 docs/api/icon.md | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/docs/api/icon.md b/docs/api/icon.md
index 0b7f2f8e2f4..81d815746f3 100644
--- a/docs/api/icon.md
+++ b/docs/api/icon.md
@@ -18,4 +18,28 @@ For more information, including styling and all available icons, see <a href="ht
 
 import Basic from '@site/static/usage/v7/icon/basic/index.md';
 
-<Basic />
\ No newline at end of file
+<Basic />
+
+
+## Accessibility
+
+Icons that are purely decorative content should have <code>aria-hidden="true"</code>. This will not visually hide the icon, but it will hide the element from assistive technology.
+
+```html
+<ion-icon name="heart" aria-hidden="true"></ion-icon>
+```
+
+
+If the icon is interactive, it should have alternate text defined by adding an <code>aria-label</code>.
+
+```html
+<ion-icon name="heart" aria-label="Favorite"></ion-icon>
+```
+
+Alternatively, if the icon is inside of another element that it is describing, that element should have the <code>aria-label</code> added to it, and the icon should be hidden using <code>aria-hidden</code>.
+
+```html
+<ion-button aria-label="Favorite">
+  <ion-icon name="heart" aria-hidden="true"></ion-icon>
+</ion-button>
+```

From 358cfdc03a1e649650f947501684d460fd2ff27f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 7 Mar 2023 10:57:32 -0500
Subject: [PATCH 230/469] docs(layout): update css-utilities to show float
 properly (#2808)

closes #265
---
 docs/layout/css-utilities.md | 40 +++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
index e19ad5e04b4..d23ea52b4b4 100644
--- a/docs/layout/css-utilities.md
+++ b/docs/layout/css-utilities.md
@@ -134,17 +134,37 @@ The float CSS property specifies that an element should be placed along the left
 ```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>
+      <h3>no float</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
     </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>
+      <h3>float-left</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+        class="ion-float-left"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
+    </ion-col>
+    <ion-col>
+      <h3>float-right</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+        class="ion-float-right"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
     </ion-col>
   </ion-row>
 </ion-grid>

From cb7a23543b144be8044579b9c2793334d58b5fe6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 7 Mar 2023 11:04:20 -0500
Subject: [PATCH 231/469] fix(playground): iframe is hidden using display
 (#2809)

resolves #2778
---
 src/components/global/Playground/playground.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css
index 1a52fa7108e..46e77dc40c0 100644
--- a/src/components/global/Playground/playground.css
+++ b/src/components/global/Playground/playground.css
@@ -204,8 +204,7 @@
 }
 
 .playground .frame-hidden {
-  visibility: hidden;
-  width: 0%;
+  display: none;
 }
 
 @media only screen and (max-width: 600px) {

From 5045ed48106bcb415350b5aeb256bea9f6aca54f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 7 Mar 2023 21:48:33 -0500
Subject: [PATCH 232/469] chore: clear docs/native directory when generating
 markdown (#2812)

---
 scripts/native.js | 29 +++++++++++++++++------------
 scripts/utils.js  |  1 -
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/scripts/native.js b/scripts/native.js
index 3688d2db901..ddd0fa68674 100644
--- a/scripts/native.js
+++ b/scripts/native.js
@@ -36,6 +36,14 @@ async function buildPluginApiDocs(pluginId) {
 
   const apiContent = createApiPage(pluginId, readme, pkgJson);
   const fileName = `${pluginId}.md`;
+
+  // Delete all existing generated markdown files in docs/native
+  fs.readdirSync('docs/native').forEach((file) => {
+    if (file.endsWith('.md')) {
+      fs.rmSync(`docs/native/${file}`);
+    }
+  });
+
   fs.writeFileSync(`docs/native/${fileName}`, apiContent);
   fs.writeFileSync(`versioned_docs/version-v6/native/${fileName}`, apiContent);
 }
@@ -85,18 +93,15 @@ function toTitleCase(str) {
 }
 
 if (!String.prototype.replaceAll) {
-	String.prototype.replaceAll = function(str, newStr){
-
-		// If a regex pattern
-		if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
-			return this.replace(str, newStr);
-		}
-
-		// If a string
-		return this.replace(new RegExp(str, 'g'), newStr);
-
-	};
+  String.prototype.replaceAll = function (str, newStr) {
+    // If a regex pattern
+    if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+      return this.replace(str, newStr);
+    }
+
+    // If a string
+    return this.replace(new RegExp(str, 'g'), newStr);
+  };
 }
 
 main();
-
diff --git a/scripts/utils.js b/scripts/utils.js
index 4ca6ca4a115..b98cdc034f3 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -53,7 +53,6 @@ function renderOptions(title, data) {
 ### ${title}
 ${data
   .map((item) => {
-    console.log(item);
     const alias = item.aliases.length > 0 ? '(or ' + item.aliases.map((alias) => `\`-${alias}\``).join(' ') + ')' : '';
     let name = item.type === 'boolean' && item.default === true ? `no-${item.name}` : item.name;
     if (item.type === 'string') name += `=<${item.spec.value}>`;

From 8faf7b1873b615faac53fc439840d19427049047 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 9 Mar 2023 11:37:59 -0500
Subject: [PATCH 233/469] docs(segment): wrap text in labels for segments in
 toolbar playground (#2815)

---
 static/usage/v6/toolbar/segments/angular.md    | 4 ++--
 static/usage/v6/toolbar/segments/demo.html     | 6 +++---
 static/usage/v6/toolbar/segments/javascript.md | 4 ++--
 static/usage/v6/toolbar/segments/react.md      | 6 +++---
 static/usage/v6/toolbar/segments/vue.md        | 8 ++++----
 static/usage/v7/toolbar/segments/angular.md    | 4 ++--
 static/usage/v7/toolbar/segments/demo.html     | 6 +++---
 static/usage/v7/toolbar/segments/javascript.md | 4 ++--
 static/usage/v7/toolbar/segments/react.md      | 6 +++---
 static/usage/v7/toolbar/segments/vue.md        | 8 ++++----
 10 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/static/usage/v6/toolbar/segments/angular.md b/static/usage/v6/toolbar/segments/angular.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v6/toolbar/segments/angular.md
+++ b/static/usage/v6/toolbar/segments/angular.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v6/toolbar/segments/demo.html b/static/usage/v6/toolbar/segments/demo.html
index 8eb5e3cff7b..42452b90dd8 100644
--- a/static/usage/v6/toolbar/segments/demo.html
+++ b/static/usage/v6/toolbar/segments/demo.html
@@ -18,10 +18,10 @@
       <ion-toolbar>
         <ion-segment value="all">
           <ion-segment-button value="all">
-            All
+            <ion-label>All</ion-label>
           </ion-segment-button>
           <ion-segment-button value="favorites">
-            Favorites
+            <ion-label>Favorites</ion-label>
           </ion-segment-button>
         </ion-segment>
       </ion-toolbar>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v6/toolbar/segments/javascript.md b/static/usage/v6/toolbar/segments/javascript.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v6/toolbar/segments/javascript.md
+++ b/static/usage/v6/toolbar/segments/javascript.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v6/toolbar/segments/react.md b/static/usage/v6/toolbar/segments/react.md
index 54a63e7f8f8..f2fad4d0ec5 100644
--- a/static/usage/v6/toolbar/segments/react.md
+++ b/static/usage/v6/toolbar/segments/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
 
 function Example() {
   return (
@@ -8,10 +8,10 @@ function Example() {
       <IonToolbar>
         <IonSegment value="all">
           <IonSegmentButton value="all">
-            All
+            <IonLabel>All</IonLabel>
           </IonSegmentButton>
           <IonSegmentButton value="favorites">
-            Favorites
+            <IonLabel>Favorites</IonLabel>
           </IonSegmentButton>
         </IonSegment>
       </IonToolbar>
diff --git a/static/usage/v6/toolbar/segments/vue.md b/static/usage/v6/toolbar/segments/vue.md
index 3be08612557..b31855bf734 100644
--- a/static/usage/v6/toolbar/segments/vue.md
+++ b/static/usage/v6/toolbar/segments/vue.md
@@ -4,10 +4,10 @@
     <ion-toolbar>
       <ion-segment value="all">
         <ion-segment-button value="all">
-          All
+          <ion-label>All</ion-label>
         </ion-segment-button>
         <ion-segment-button value="favorites">
-          Favorites
+          <ion-label>Favorites</ion-label>
         </ion-segment-button>
       </ion-segment>
     </ion-toolbar>
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-  import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
+    components: { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
   });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/segments/angular.md b/static/usage/v7/toolbar/segments/angular.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v7/toolbar/segments/angular.md
+++ b/static/usage/v7/toolbar/segments/angular.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v7/toolbar/segments/demo.html b/static/usage/v7/toolbar/segments/demo.html
index 8eb5e3cff7b..42452b90dd8 100644
--- a/static/usage/v7/toolbar/segments/demo.html
+++ b/static/usage/v7/toolbar/segments/demo.html
@@ -18,10 +18,10 @@
       <ion-toolbar>
         <ion-segment value="all">
           <ion-segment-button value="all">
-            All
+            <ion-label>All</ion-label>
           </ion-segment-button>
           <ion-segment-button value="favorites">
-            Favorites
+            <ion-label>Favorites</ion-label>
           </ion-segment-button>
         </ion-segment>
       </ion-toolbar>
@@ -29,4 +29,4 @@
   </ion-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/toolbar/segments/javascript.md b/static/usage/v7/toolbar/segments/javascript.md
index 179f75c3ae4..e7cce4323dc 100644
--- a/static/usage/v7/toolbar/segments/javascript.md
+++ b/static/usage/v7/toolbar/segments/javascript.md
@@ -3,10 +3,10 @@
   <ion-toolbar>
     <ion-segment value="all">
       <ion-segment-button value="all">
-        All
+        <ion-label>All</ion-label>
       </ion-segment-button>
       <ion-segment-button value="favorites">
-        Favorites
+        <ion-label>Favorites</ion-label>
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
diff --git a/static/usage/v7/toolbar/segments/react.md b/static/usage/v7/toolbar/segments/react.md
index 54a63e7f8f8..f2fad4d0ec5 100644
--- a/static/usage/v7/toolbar/segments/react.md
+++ b/static/usage/v7/toolbar/segments/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
 
 function Example() {
   return (
@@ -8,10 +8,10 @@ function Example() {
       <IonToolbar>
         <IonSegment value="all">
           <IonSegmentButton value="all">
-            All
+            <IonLabel>All</IonLabel>
           </IonSegmentButton>
           <IonSegmentButton value="favorites">
-            Favorites
+            <IonLabel>Favorites</IonLabel>
           </IonSegmentButton>
         </IonSegment>
       </IonToolbar>
diff --git a/static/usage/v7/toolbar/segments/vue.md b/static/usage/v7/toolbar/segments/vue.md
index 3be08612557..b31855bf734 100644
--- a/static/usage/v7/toolbar/segments/vue.md
+++ b/static/usage/v7/toolbar/segments/vue.md
@@ -4,10 +4,10 @@
     <ion-toolbar>
       <ion-segment value="all">
         <ion-segment-button value="all">
-          All
+          <ion-label>All</ion-label>
         </ion-segment-button>
         <ion-segment-button value="favorites">
-          Favorites
+          <ion-label>Favorites</ion-label>
         </ion-segment-button>
       </ion-segment>
     </ion-toolbar>
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-  import { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonHeader, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
+    components: { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
   });
 </script>
 ```

From 733c827627bebbbc598d946773be8557c88c3e80 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 9 Mar 2023 11:38:31 -0500
Subject: [PATCH 234/469] docs(security): clarify sanitizer (#2814)

---
 docs/techniques/security.md                      | 2 +-
 versioned_docs/version-v5/techniques/security.md | 2 +-
 versioned_docs/version-v6/techniques/security.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/techniques/security.md b/docs/techniques/security.md
index 7a5d8513256..cfbe5a15fc0 100644
--- a/docs/techniques/security.md
+++ b/docs/techniques/security.md
@@ -18,7 +18,7 @@ import TabItem from '@theme/TabItem';
 
 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.
+Ionic comes built in with a basic sanitization implementation for the components it provides. However, it is not a comprehensive solution. It is up to the developer to make sure all data that is passed 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.
 
diff --git a/versioned_docs/version-v5/techniques/security.md b/versioned_docs/version-v5/techniques/security.md
index 42766c98ccd..256117ae702 100644
--- a/versioned_docs/version-v5/techniques/security.md
+++ b/versioned_docs/version-v5/techniques/security.md
@@ -11,7 +11,7 @@ import TabItem from '@theme/TabItem';
 
 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.
+Ionic comes built in with a basic sanitization implementation for the components it provides. However, it is not a comprehensive solution. It is up to the developer to make sure all data that is passed 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.
 
diff --git a/versioned_docs/version-v6/techniques/security.md b/versioned_docs/version-v6/techniques/security.md
index 7a5d8513256..cfbe5a15fc0 100644
--- a/versioned_docs/version-v6/techniques/security.md
+++ b/versioned_docs/version-v6/techniques/security.md
@@ -18,7 +18,7 @@ import TabItem from '@theme/TabItem';
 
 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.
+Ionic comes built in with a basic sanitization implementation for the components it provides. However, it is not a comprehensive solution. It is up to the developer to make sure all data that is passed 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.
 

From 2da36dad9f5589c5e6b1f58999c05c7e5d9ee5c8 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 10 Mar 2023 12:52:23 -0500
Subject: [PATCH 235/469] docs(gestures): remove browser support section
 (#2817)

---
 docs/reference/browser-support.md                    |  3 ---
 docs/utilities/gestures.md                           | 12 ------------
 .../version-v5/reference/browser-support.md          |  4 ----
 versioned_docs/version-v5/utilities/gestures.md      | 12 ------------
 .../version-v6/reference/browser-support.md          |  3 ---
 versioned_docs/version-v6/utilities/gestures.md      | 12 ------------
 6 files changed, 46 deletions(-)

diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md
index 3b379c8ff3e..fe10d28861b 100644
--- a/docs/reference/browser-support.md
+++ b/docs/reference/browser-support.md
@@ -45,6 +45,3 @@ Because Ionic is based on web technologies, it works just as well on desktop bro
 | **Firefox** | 70+      | 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/docs/utilities/gestures.md b/docs/utilities/gestures.md
index 5fe3f5fbeb5..ab65cfb8f7b 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -448,18 +448,6 @@ In the example above, we want to be able to detect double clicks on an element.
 
 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                                        |
diff --git a/versioned_docs/version-v5/reference/browser-support.md b/versioned_docs/version-v5/reference/browser-support.md
index 1a6775689d5..c4894f28f7a 100644
--- a/versioned_docs/version-v5/reference/browser-support.md
+++ b/versioned_docs/version-v5/reference/browser-support.md
@@ -26,7 +26,3 @@ Because Ionic is based on web technologies, it works just as well on desktop bro
 |  **Edge**   |   79+    |    ✔     |
 | **Firefox** |    ✔     |    ✔     |
 |  **IE 11**  |  **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-v5/utilities/gestures.md b/versioned_docs/version-v5/utilities/gestures.md
index 1d5a5689eda..80c96f088e1 100644
--- a/versioned_docs/version-v5/utilities/gestures.md
+++ b/versioned_docs/version-v5/utilities/gestures.md
@@ -439,18 +439,6 @@ In the example above, we want to be able to detect double clicks on an element.
 
 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                                        |
diff --git a/versioned_docs/version-v6/reference/browser-support.md b/versioned_docs/version-v6/reference/browser-support.md
index 6ec8794cdf1..98df3aa96b3 100644
--- a/versioned_docs/version-v6/reference/browser-support.md
+++ b/versioned_docs/version-v6/reference/browser-support.md
@@ -50,6 +50,3 @@ Because Ionic is based on web technologies, it works just as well on desktop bro
 | **Firefox** |   63+    |    ✔     |    ✔     |
 |  **IE 11**  |  **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/utilities/gestures.md b/versioned_docs/version-v6/utilities/gestures.md
index 5fe3f5fbeb5..ab65cfb8f7b 100644
--- a/versioned_docs/version-v6/utilities/gestures.md
+++ b/versioned_docs/version-v6/utilities/gestures.md
@@ -448,18 +448,6 @@ In the example above, we want to be able to detect double clicks on an element.
 
 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                                        |

From 4edfc27aab75dd3fbffef9935c30a1b46154e57c Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 10 Mar 2023 12:01:14 -0600
Subject: [PATCH 236/469] docs(icon): indicate where to find custom SVG usage
 (#2816)

---
 docs/api/icon.md                      | 2 +-
 versioned_docs/version-v6/api/icon.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/api/icon.md b/docs/api/icon.md
index 81d815746f3..fa9830ebc46 100644
--- a/docs/api/icon.md
+++ b/docs/api/icon.md
@@ -12,7 +12,7 @@ title: 'ion-icon'
 
 Icon is a simple component made available through the <a href="https://ionic.io/ionicons">Ionicons</a> library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
 
-For more information, including styling and all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>.
+For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a>.
 
 ## Basic Usage
 
diff --git a/versioned_docs/version-v6/api/icon.md b/versioned_docs/version-v6/api/icon.md
index e0d413e94f3..92984ef6acd 100644
--- a/versioned_docs/version-v6/api/icon.md
+++ b/versioned_docs/version-v6/api/icon.md
@@ -12,7 +12,7 @@ title: 'ion-icon'
 
 Icon is a simple component made available through the <a href="https://ionic.io/ionicons">Ionicons</a> library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
 
-For more information, including styling and all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>.
+For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a>.
 
 ## Basic Usage
 

From a44bce643409c7ac3bc54124928466bc6b37132f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Sun, 12 Mar 2023 17:08:03 +0900
Subject: [PATCH 237/469] =?UTF-8?q?chore():=20=E7=BF=BB=E8=A8=B3=E3=83=9F?=
 =?UTF-8?q?=E3=82=B9=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/api/content.md                     | 7 -------
 docs/api/fab.md                         | 4 ----
 docs/developing/hardware-back-button.md | 1 -
 3 files changed, 12 deletions(-)

diff --git a/docs/api/content.md b/docs/api/content.md
index c0056e4de7c..7f52d9bef9c 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -52,9 +52,6 @@ import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md';
 
 ## Fixed Content
 
-<<<<<<< HEAD
-スクロール可能な領域の外側に要素を配置するために、要素に `slot="fixed"` を追加することができます。これは、要素を左上に絶対配置します。それ以外の場所に配置するには、[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) でスタイルを指定します。
-=======
 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/v7/content/fixed/index.md';
@@ -98,7 +95,6 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index
 
 <CSSProps />
 
->>>>>>> 99d3f5222ffbfc340f268bf630572d37e9d9586b
 
 ## Interfaces
 
@@ -296,10 +292,7 @@ export default defineComponent({
 
 </Tabs>
 
-## プロパティ
-=======
 ## Properties
->>>>>>> 99d3f5222ffbfc340f268bf630572d37e9d9586b
 <Props />
 
 ## イベント
diff --git a/docs/api/fab.md b/docs/api/fab.md
index bce0456a626..449cd5c63e7 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -31,11 +31,7 @@ The `side` property of the [fab list](./fab-list) component controls where it ap
 
 import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
 
-<<<<<<< HEAD
-## 使い方
-=======
 <ListSide />
->>>>>>> 99d3f5222ffbfc340f268bf630572d37e9d9586b
 
 ## Positioning
 
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index c2db6ca4adf..60df8f8ac3c 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -234,7 +234,6 @@ document.addEventListener('ionBackButton', (ev) => {
 上の例では、ハンドラAとBの両方の優先度は10です。ハンドラBは最後に登録されているため、Ionic FrameworkはハンドラAを呼び出す前にハンドラBを呼び出します。
 
 ## アプリの終了
->>>>>>> main
 
 場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordovaが提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。
 

From 7cb9826c9abde3c9b9db8ec96b4aec51c001db80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Sun, 12 Mar 2023 17:12:20 +0900
Subject: [PATCH 238/469] updated

---
 package-lock.json | 5859 +++++++++++++++++++++++----------------------
 1 file changed, 3043 insertions(+), 2816 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 30bbf8d5866..7584aa35d5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,87 +53,99 @@
       }
     },
     "node_modules/@algolia/autocomplete-core": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.6.3.tgz",
-      "integrity": "sha512-dqQqRt01fX3YuVFrkceHsoCnzX0bLhrrg8itJI1NM68KjrPYQPYsE+kY8EZTCM4y8VDnhqJErR73xe/ZsV+qAA==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.7.4.tgz",
+      "integrity": "sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.7.4"
+      }
+    },
+    "node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.4.tgz",
+      "integrity": "sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==",
       "dependencies": {
-        "@algolia/autocomplete-shared": "1.6.3"
+        "@algolia/autocomplete-shared": "1.7.4"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
       }
     },
     "node_modules/@algolia/autocomplete-shared": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.6.3.tgz",
-      "integrity": "sha512-UV46bnkTztyADFaETfzFC5ryIdGVb2zpAoYgu0tfcuYWjhg1KbLXveFffZIrGVoboqmAk1b+jMrl6iCja1i3lg=="
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.4.tgz",
+      "integrity": "sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg=="
     },
     "node_modules/@algolia/cache-browser-local-storage": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.13.1.tgz",
-      "integrity": "sha512-UAUVG2PEfwd/FfudsZtYnidJ9eSCpS+LW9cQiesePQLz41NAcddKxBak6eP2GErqyFagSlnVXe/w2E9h2m2ttg==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.15.0.tgz",
+      "integrity": "sha512-uxxFhTWh4JJDb2+FFSmNMfEQ8p9o2vjSpU7iW007QX3OvqljPPN68lk3bpZVaG8pwr5MU1DqpkZ71FcQdVTjgQ==",
       "dependencies": {
-        "@algolia/cache-common": "4.13.1"
+        "@algolia/cache-common": "4.15.0"
       }
     },
     "node_modules/@algolia/cache-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.13.1.tgz",
-      "integrity": "sha512-7Vaf6IM4L0Jkl3sYXbwK+2beQOgVJ0mKFbz/4qSxKd1iy2Sp77uTAazcX+Dlexekg1fqGUOSO7HS4Sx47ZJmjA=="
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.15.0.tgz",
+      "integrity": "sha512-Me3PbI4QurAM+3D+htIE0l1xt6+bl/18SG6Wc7bPQEZAtN7DTGz22HqhKNyLF2lR/cOfpaH7umXZlZEhIHf7gQ=="
     },
     "node_modules/@algolia/cache-in-memory": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.13.1.tgz",
-      "integrity": "sha512-pZzybCDGApfA/nutsFK1P0Sbsq6fYJU3DwIvyKg4pURerlJM4qZbB9bfLRef0FkzfQu7W11E4cVLCIOWmyZeuQ==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.15.0.tgz",
+      "integrity": "sha512-B9mg1wd7CKMfpkbiTQ8KlcKkH6ut/goVaI6XmDCUczOOqeuZlV34tuEi7o3Xo1j66KWr/d9pMjjGYcoVPCVeOA==",
       "dependencies": {
-        "@algolia/cache-common": "4.13.1"
+        "@algolia/cache-common": "4.15.0"
       }
     },
     "node_modules/@algolia/client-account": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.13.1.tgz",
-      "integrity": "sha512-TFLiZ1KqMiir3FNHU+h3b0MArmyaHG+eT8Iojio6TdpeFcAQ1Aiy+2gb3SZk3+pgRJa/BxGmDkRUwE5E/lv3QQ==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.15.0.tgz",
+      "integrity": "sha512-8wqI33HRZy5ydfFt6F5vMhtkOiAUhVfSCYXx4U3Go5RALqWLgVUp6wzOo0mr1z08POCkHDpbQMQvyayb1CZ/kw==",
       "dependencies": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/client-search": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/client-search": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.13.1.tgz",
-      "integrity": "sha512-iOS1JBqh7xaL5x00M5zyluZ9+9Uy9GqtYHv/2SMuzNW1qP7/0doz1lbcsP3S7KBbZANJTFHUOfuqyRLPk91iFA==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.15.0.tgz",
+      "integrity": "sha512-jrPjEeNEIIQKeA1XCZXx3f3aybtwF7wjYlnfHbLARuZ9AuHzimOKjX0ZwqvMmvTsHivpcZ2rqY+j1E8HoH1ELA==",
       "dependencies": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/client-search": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/client-search": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.13.1.tgz",
-      "integrity": "sha512-LcDoUE0Zz3YwfXJL6lJ2OMY2soClbjrrAKB6auYVMNJcoKZZ2cbhQoFR24AYoxnGUYBER/8B+9sTBj5bj/Gqbg==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.15.0.tgz",
+      "integrity": "sha512-PlsJMObZuYw4JlG5EhYv1PHDOv7n5mD5PzqFyoNfSOYaEPRZepa3W579ya29yOu3FZ0VGMNJmB7Q5v/+/fwvIw==",
       "dependencies": {
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.13.1.tgz",
-      "integrity": "sha512-1CqrOW1ypVrB4Lssh02hP//YxluoIYXAQCpg03L+/RiXJlCs+uIqlzC0ctpQPmxSlTK6h07kr50JQoYH/TIM9w==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.15.0.tgz",
+      "integrity": "sha512-Bf0bhRAiNL9LWurzyHRH8UBi4fDt3VbCNkInxVngKQT1uCZWXecwoPWGhcSSpdanBqFJA/1WBt+BWx7a50Bhlg==",
       "dependencies": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.13.1.tgz",
-      "integrity": "sha512-YQKYA83MNRz3FgTNM+4eRYbSmHi0WWpo019s5SeYcL3HUan/i5R09VO9dk3evELDFJYciiydSjbsmhBzbpPP2A==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.15.0.tgz",
+      "integrity": "sha512-dTwZD4u53WdmexnMcoO2Qd/+YCP3ESXKOtD2MryQ1a9dHwB2Y3Qob0kyS1PG82idwM3enbznvscI9Sf4o9PUWQ==",
       "dependencies": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "node_modules/@algolia/events": {
@@ -142,47 +154,47 @@
       "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
     },
     "node_modules/@algolia/logger-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.13.1.tgz",
-      "integrity": "sha512-L6slbL/OyZaAXNtS/1A8SAbOJeEXD5JcZeDCPYDqSTYScfHu+2ePRTDMgUTY4gQ7HsYZ39N1LujOd8WBTmM2Aw=="
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.15.0.tgz",
+      "integrity": "sha512-D8OFwn/HpvQz66goIcjxOKsYBMuxiruxJ3cA/bnc0EiDvSA2P2z6bNQWgS5gbstuTZIJmbhr+53NyOxFkmMNAA=="
     },
     "node_modules/@algolia/logger-console": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.13.1.tgz",
-      "integrity": "sha512-7jQOTftfeeLlnb3YqF8bNgA2GZht7rdKkJ31OCeSH2/61haO0tWPoNRjZq9XLlgMQZH276pPo0NdiArcYPHjCA==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.15.0.tgz",
+      "integrity": "sha512-pQOvVaRSEJQJRXKTnxEA6nN1hipSQadJJ4einw0nIlfMOGZh/kps1ybh8vRUlUGyfEuN/3dyFs0W3Ac7hIItlg==",
       "dependencies": {
-        "@algolia/logger-common": "4.13.1"
+        "@algolia/logger-common": "4.15.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.13.1.tgz",
-      "integrity": "sha512-oa0CKr1iH6Nc7CmU6RE7TnXMjHnlyp7S80pP/LvZVABeJHX3p/BcSCKovNYWWltgTxUg0U1o+2uuy8BpMKljwA==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.15.0.tgz",
+      "integrity": "sha512-va186EfALF+6msYZXaoBSxcnFCg3SoWJ+uv1yMyhQRJRe7cZSHWSVT3s40vmar90gxlBu80KMVwVlsvJhJv6ew==",
       "dependencies": {
-        "@algolia/requester-common": "4.13.1"
+        "@algolia/requester-common": "4.15.0"
       }
     },
     "node_modules/@algolia/requester-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.13.1.tgz",
-      "integrity": "sha512-eGVf0ID84apfFEuXsaoSgIxbU3oFsIbz4XiotU3VS8qGCJAaLVUC5BUJEkiFENZIhon7hIB4d0RI13HY4RSA+w=="
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.15.0.tgz",
+      "integrity": "sha512-w0UUzxElbo4hrKg4QP/jiXDNbIJuAthxdlkos9nS8KAPK2XI3R9BlUjLz/ZVs4F9TDGI0mhjrNHhZ12KXcoyhg=="
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.13.1.tgz",
-      "integrity": "sha512-7C0skwtLdCz5heKTVe/vjvrqgL/eJxmiEjHqXdtypcE5GCQCYI15cb+wC4ytYioZDMiuDGeVYmCYImPoEgUGPw==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.15.0.tgz",
+      "integrity": "sha512-eeEOhFtgwKcgAlKAZpgBRZJ0ILSEBCXxZ9uwfVWPD24W1b6z08gVoTJ6J7lCeCnJmudg+tMElDnGzHkjup9CJA==",
       "dependencies": {
-        "@algolia/requester-common": "4.13.1"
+        "@algolia/requester-common": "4.15.0"
       }
     },
     "node_modules/@algolia/transporter": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.13.1.tgz",
-      "integrity": "sha512-pICnNQN7TtrcYJqqPEXByV8rJ8ZRU2hCiIKLTLRyNpghtQG3VAFk6fVtdzlNfdUGZcehSKGarPIZEHlQXnKjgw==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.15.0.tgz",
+      "integrity": "sha512-JoWR+ixG3EmA0UPntQFN/FV5TasYcYu93d5+oKzHFeZ6Z7rtW5Im9iy/Oh/ggk1AAN5fTdqKewtbBpdaYDbKsQ==",
       "dependencies": {
-        "@algolia/cache-common": "4.13.1",
-        "@algolia/logger-common": "4.13.1",
-        "@algolia/requester-common": "4.13.1"
+        "@algolia/cache-common": "4.15.0",
+        "@algolia/logger-common": "4.15.0",
+        "@algolia/requester-common": "4.15.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -198,43 +210,43 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
-      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
+      "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.16.7"
+        "@babel/highlight": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.5.tgz",
-      "integrity": "sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.0.tgz",
+      "integrity": "sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.5.tgz",
-      "integrity": "sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==",
-      "dependencies": {
-        "@ampproject/remapping": "^2.1.0",
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.18.2",
-        "@babel/helper-compilation-targets": "^7.18.2",
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helpers": "^7.18.2",
-        "@babel/parser": "^7.18.5",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.18.5",
-        "@babel/types": "^7.18.4",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.0.tgz",
+      "integrity": "sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.21.0",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-module-transforms": "^7.21.0",
+        "@babel/helpers": "^7.21.0",
+        "@babel/parser": "^7.21.0",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.21.0",
+        "@babel/types": "^7.21.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.1",
+        "json5": "^2.2.2",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -254,12 +266,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.2.tgz",
-      "integrity": "sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==",
+      "version": "7.21.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.1.tgz",
+      "integrity": "sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==",
       "dependencies": {
-        "@babel/types": "^7.18.2",
-        "@jridgewell/gen-mapping": "^0.3.0",
+        "@babel/types": "^7.21.0",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
       },
       "engines": {
@@ -267,11 +280,11 @@
       }
     },
     "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
-      "integrity": "sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==",
+      "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.0",
+        "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
         "@jridgewell/trace-mapping": "^0.3.9"
       },
@@ -280,36 +293,37 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
-      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz",
-      "integrity": "sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==",
+      "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.16.7",
-        "@babel/types": "^7.16.7"
+        "@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.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz",
-      "integrity": "sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==",
-      "dependencies": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.20.2",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
+      "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
+      "dependencies": {
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-validator-option": "^7.18.6",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -328,17 +342,18 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz",
-      "integrity": "sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz",
+      "integrity": "sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-member-expression-to-functions": "^7.17.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-member-expression-to-functions": "^7.21.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/helper-split-export-declaration": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -348,12 +363,12 @@
       }
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.12.tgz",
-      "integrity": "sha512-b2aZrV4zvutr9AIa6/gA3wsZKRwTKYoDxYiFKcESS3Ug2GTXzwBEvMuuFLhCQpEnRXs1zng4ISAXSUxxKBIcxw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.0.tgz",
+      "integrity": "sha512-N+LaFW/auRSWdx7SHD/HiARwXQju1vXTW4fKr4u5SgBUTm51OKEjKgj+cs00ggW3kEvNqwErnlwuq7Y3xBe4eg==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "regexpu-core": "^5.0.1"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -363,14 +378,12 @@
       }
     },
     "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
-      "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.13.0",
-        "@babel/helper-module-imports": "^7.12.13",
-        "@babel/helper-plugin-utils": "^7.13.0",
-        "@babel/traverse": "^7.13.0",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
+      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
+      "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",
@@ -389,216 +402,229 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz",
-      "integrity": "sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==",
+      "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.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz",
-      "integrity": "sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
-      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
       "dependencies": {
-        "@babel/template": "^7.16.7",
-        "@babel/types": "^7.17.0"
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
-      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
-      "integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
+      "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
       "dependencies": {
-        "@babel/types": "^7.17.0"
+        "@babel/types": "^7.21.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
-      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz",
-      "integrity": "sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+      "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-simple-access": "^7.17.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.18.0",
-        "@babel/types": "^7.18.0"
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-simple-access": "^7.20.2",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.21.2",
+        "@babel/types": "^7.21.2"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
-      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
-      "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
+      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
-      "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
+      "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.16.7",
-        "@babel/helper-wrap-function": "^7.16.8",
-        "@babel/types": "^7.16.8"
+        "@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.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.18.2.tgz",
-      "integrity": "sha512-XzAIyxx+vFnrOxiQrToSUOzUOn0e1J2Li40ntddek1Y69AXUTXoDJ40/D5RdjFu7s7qHiaeoTiempZcbuVXh2Q==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
+      "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.18.2",
-        "@babel/helper-member-expression-to-functions": "^7.17.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/traverse": "^7.18.2",
-        "@babel/types": "^7.18.2"
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.20.7",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.7",
+        "@babel/types": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-simple-access": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz",
-      "integrity": "sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
+      "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
       "dependencies": {
-        "@babel/types": "^7.18.2"
+        "@babel/types": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz",
-      "integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
       "dependencies": {
-        "@babel/types": "^7.16.0"
+        "@babel/types": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
-      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
-      "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
+      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
       "dependencies": {
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.8",
-        "@babel/types": "^7.16.8"
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.5",
+        "@babel/types": "^7.20.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.2.tgz",
-      "integrity": "sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.0.tgz",
+      "integrity": "sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==",
       "dependencies": {
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.18.2",
-        "@babel/types": "^7.18.2"
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.21.0",
+        "@babel/types": "^7.21.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.12.tgz",
-      "integrity": "sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==",
+      "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.16.7",
+        "@babel/helper-validator-identifier": "^7.18.6",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       },
@@ -671,9 +697,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
-      "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -682,11 +708,11 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.17.12",
-      "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.17.12.tgz",
-      "integrity": "sha512-xCJQXl4EeQ3J9C4yOmpTrtVGmzpm2iSzyxbkZHw7UCnZBftHpF/hpII80uWVyVrc40ytIClHjgWGTG1g/yB+aw==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -696,13 +722,13 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.17.12.tgz",
-      "integrity": "sha512-/vt0hpIw0x4b6BLKUkwlvEoiGZYYLNZ96CzyHYPbtG2jZGz6LBe7/V+drYrc/d+ovrF9NBi0pmtvmNb/FsWtRQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
+      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -712,12 +738,13 @@
       }
     },
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.17.12.tgz",
-      "integrity": "sha512-RWVvqD1ooLKP6IqWTA5GyFVX2isGEgC5iFxKzfYOIy/QEFdxYyCybBDtIGjipHpb9bDWHzcqGqFakf+mVmBTdQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
+      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-remap-async-to-generator": "^7.16.8",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       },
       "engines": {
@@ -728,12 +755,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-class-properties": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.17.12.tgz",
-      "integrity": "sha512-U0mI9q8pW5Q9EaTHFPwSVusPMV/DV9Mm8p7csqROFLtIE9rBF5piLqyrBGigftALrBcsBGu4m38JneAe7ZDLXw==",
+      "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.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -743,12 +770,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-class-static-block": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.0.tgz",
-      "integrity": "sha512-t+8LsRMMDE74c6sV7KShIw13sqbqd58tlqNrsWoWBTIMw7SVQ0cZ905wLNS/FBCy/3PyooRHLFFlfrUNyyz5lA==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
+      "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       },
       "engines": {
@@ -759,11 +786,11 @@
       }
     },
     "node_modules/@babel/plugin-proposal-dynamic-import": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz",
-      "integrity": "sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==",
+      "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.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       },
       "engines": {
@@ -774,11 +801,11 @@
       }
     },
     "node_modules/@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz",
-      "integrity": "sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==",
+      "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.17.12",
+        "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       },
       "engines": {
@@ -789,11 +816,11 @@
       }
     },
     "node_modules/@babel/plugin-proposal-json-strings": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.17.12.tgz",
-      "integrity": "sha512-rKJ+rKBoXwLnIn7n6o6fulViHMrOThz99ybH+hKHcOZbnN14VuMnH9fo2eHE69C8pO4uX1Q7t2HYYIDmv8VYkg==",
+      "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.17.12",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
       },
       "engines": {
@@ -804,11 +831,11 @@
       }
     },
     "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.17.12.tgz",
-      "integrity": "sha512-EqFo2s1Z5yy+JeJu7SFfbIUtToJTVlC61/C7WLKDntSw4Sz6JNAIfL7zQ74VvirxpjB5kz/kIx0gCcb+5OEo2Q==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
+      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       },
       "engines": {
@@ -819,11 +846,11 @@
       }
     },
     "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.17.12.tgz",
-      "integrity": "sha512-ws/g3FSGVzv+VH86+QvgtuJL/kR67xaEIF2x0iPqdDfYW6ra6JF3lKVBkWynRLcNtIC1oCTfDRVxmm2mKzy+ag==",
+      "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.17.12",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       },
       "engines": {
@@ -834,11 +861,11 @@
       }
     },
     "node_modules/@babel/plugin-proposal-numeric-separator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
-      "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
+      "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.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
       },
       "engines": {
@@ -849,15 +876,15 @@
       }
     },
     "node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.0.tgz",
-      "integrity": "sha512-nbTv371eTrFabDfHLElkn9oyf9VG+VKK6WMzhY2o4eHKaG19BToD9947zzGMO6I/Irstx9d8CwX6njPNIAR/yw==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+      "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
       "dependencies": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-compilation-targets": "^7.17.10",
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.17.12"
+        "@babel/plugin-transform-parameters": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -867,11 +894,11 @@
       }
     },
     "node_modules/@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz",
-      "integrity": "sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==",
+      "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.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
       },
       "engines": {
@@ -882,12 +909,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-optional-chaining": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.17.12.tgz",
-      "integrity": "sha512-7wigcOs/Z4YWlK7xxjkvaIw84vGhDv/P1dFGQap0nHkc8gFKY/r+hXc8Qzf5k1gY7CvGIcHqAnOagVKJJ1wVOQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       },
       "engines": {
@@ -898,12 +925,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-methods": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.17.12.tgz",
-      "integrity": "sha512-SllXoxo19HmxhDWm3luPz+cPhtoTSKLJE9PXshsfrOzBqs60QP0r8OaJItrPhAj0d7mZMnNF0Y1UUggCDgMz1A==",
+      "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.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -913,13 +940,13 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.17.12.tgz",
-      "integrity": "sha512-/6BtVi57CJfrtDNKfK5b66ydK2J5pXUKBKSPD2G1whamMuEnZWgoOIfO8Vf9F/DoD4izBLD/Au4NMQfruzzykg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz",
+      "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-create-class-features-plugin": "^7.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       },
       "engines": {
@@ -930,12 +957,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.17.12.tgz",
-      "integrity": "sha512-Wb9qLjXf3ZazqXA7IvI7ozqRIXIGPtSo+L5coFmEkhTQK18ao4UDDD0zdTGAarmbLj2urpRwrc6893cu5Bfh0A==",
+      "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.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=4"
@@ -1003,11 +1030,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.17.12.tgz",
-      "integrity": "sha512-n/loy2zkq9ZEM8tEOwON9wTQSTNDTDEz6NujPtJGLU7qObzT1N4c4YZZf8E6ATB2AjNQg/Ib2AIpO03EZaCehw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1028,11 +1055,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz",
-      "integrity": "sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1136,11 +1163,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.12.tgz",
-      "integrity": "sha512-TYY0SXFiO31YXtNg3HtFwNJHjLsAyIIhAhNWkQ5whPPS7HWUFlg9z0Ta4qAQNjQbP1wsSt/oKkmZ/4/WWdMUpw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
+      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.19.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1150,11 +1177,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.17.12.tgz",
-      "integrity": "sha512-PHln3CNi/49V+mza4xMwrg+WGYevSF1oaiXaC2EQfdp4HWlSjRsrDXWJiQBKpP7749u6vQ9mcry2uuFOv5CXvA==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
+      "integrity": "sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1164,13 +1191,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.17.12.tgz",
-      "integrity": "sha512-J8dbrWIOO3orDzir57NRsjg4uxucvhby0L/KZuGsWDj0g7twWK3g7JhJhOrXtuXiw8MeiSdJ3E0OW9H8LYEzLQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-remap-async-to-generator": "^7.16.8"
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1180,11 +1207,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz",
-      "integrity": "sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1194,11 +1221,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.4.tgz",
-      "integrity": "sha512-+Hq10ye+jlvLEogSOtq4mKvtk7qwcUQ1f0Mrueai866C82f844Yom2cttfJdMdqRLTxWpsbfbkIkOIfovyUQXw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
+      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1208,17 +1235,18 @@
       }
     },
     "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.4.tgz",
-      "integrity": "sha512-e42NSG2mlKWgxKUAD9EJJSkZxR67+wZqzNxLSpc51T8tRU5SLFHsPmgYR5yr7sdgX4u+iHA1C5VafJ6AyImV3A==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.18.2",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-replace-supers": "^7.18.2",
-        "@babel/helper-split-export-declaration": "^7.16.7",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
+      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -1229,11 +1257,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.17.12.tgz",
-      "integrity": "sha512-a7XINeplB5cQUWMg1E/GI1tFz3LfK021IjV1rj1ypE+R7jHm+pIHmHl25VNkZxtx9uuYp7ThGk8fur1HHG7PgQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz",
+      "integrity": "sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/template": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1243,11 +1272,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.0.tgz",
-      "integrity": "sha512-Mo69klS79z6KEfrLg/1WkmVnB8javh75HX4pi2btjvlIoasuxilEyjtsQW6XPrubNd7AQy0MMaNIaQE4e7+PQw==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz",
+      "integrity": "sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1257,12 +1286,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz",
-      "integrity": "sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1272,11 +1301,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.17.12.tgz",
-      "integrity": "sha512-EA5eYFUG6xeerdabina/xIoB95jJ17mAkR8ivx6ZSu9frKShBjpOGZPn511MTDTkiCO+zXnzNczvUM69YSf3Zw==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1286,12 +1315,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz",
-      "integrity": "sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1301,11 +1330,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.18.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.1.tgz",
-      "integrity": "sha512-+TTB5XwvJ5hZbO8xvl2H4XaMDOAK57zF4miuC9qQJgysPNEAZZ9Z69rdF5LJkozGdZrjBIUAIyKUWRMmebI7vg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz",
+      "integrity": "sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1315,13 +1344,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz",
-      "integrity": "sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==",
+      "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.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@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"
@@ -1331,11 +1360,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.17.12.tgz",
-      "integrity": "sha512-8iRkvaTjJciWycPIZ9k9duu663FT7VrBdNqNgxnVXEFwOIp55JWcZd23VBRySYbnS3PwQ3rGiabJBBBGj5APmQ==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1345,11 +1374,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz",
-      "integrity": "sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1359,13 +1388,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.0.tgz",
-      "integrity": "sha512-h8FjOlYmdZwl7Xm2Ug4iX2j7Qy63NANI+NQVWQzv6r25fqgg7k2dZl03p95kvqNclglHs4FZ+isv4p1uXMA+QA==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1374,23 +1402,14 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/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-transform-modules-commonjs": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.2.tgz",
-      "integrity": "sha512-f5A865gFPAJAEE0K7F/+nm5CmAE3y8AWlMBG9unu5j9+tk50UQVK0QS8RNxSp7MJf0wh97uYyLWt3Zvu71zyOQ==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz",
+      "integrity": "sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-simple-access": "^7.18.2",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+        "@babel/helper-module-transforms": "^7.21.2",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-simple-access": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1399,24 +1418,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/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-transform-modules-systemjs": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.5.tgz",
-      "integrity": "sha512-SEewrhPpcqMF1V7DhnEbhVJLrC+nnYfe1E0piZMZXBpxi9WvZqWGwpsk7JYP7wPWeqaBh4gyKlBhHJu3uz5g4Q==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
+      "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
       "dependencies": {
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-identifier": "^7.19.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1425,21 +1435,13 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/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-transform-modules-umd": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.0.tgz",
-      "integrity": "sha512-d/zZ8I3BWli1tmROLxXLc9A6YXvGK8egMxHp+E/rRwMh1Kip0AP77VwZae3snEJ33iiWwvNv2+UIIhfalqhzZA==",
+      "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.0",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1449,12 +1451,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.12.tgz",
-      "integrity": "sha512-vWoWFM5CKaTeHrdUJ/3SIOTRV+MBVGybOC9mhJkaprGNt5demMymDW24yC74avb915/mIRe3TgNb/d8idvnCRA==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
+      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1464,11 +1466,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.5.tgz",
-      "integrity": "sha512-TuRL5uGW4KXU6OsRj+mLp9BM7pO8e7SGNTEokQRRxHFkXYMFiy2jlKSZPFtI/mKORDzciH+hneskcSOp0gU8hg==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1478,12 +1480,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz",
-      "integrity": "sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==",
+      "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.16.7",
-        "@babel/helper-replace-supers": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1493,11 +1495,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.17.12.tgz",
-      "integrity": "sha512-6qW4rWo1cyCdq1FkYri7AHpauchbGLXpdwnYsfxFb+KtddHENfsY5JZb35xUwkK5opOLcJ3BNd2l7PhRYGlwIA==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz",
+      "integrity": "sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1507,11 +1509,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz",
-      "integrity": "sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1521,11 +1523,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-constant-elements": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.12.tgz",
-      "integrity": "sha512-maEkX2xs2STuv2Px8QuqxqjhV2LsFobT1elCgyU5704fcyTu9DyD/bJXxD/mrRiVyhpHweOQ00OJ5FKhHq9oEw==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz",
+      "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1535,11 +1537,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-display-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz",
-      "integrity": "sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1549,15 +1551,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.12.tgz",
-      "integrity": "sha512-Lcaw8bxd1DKht3thfD4A12dqo1X16he1Lm8rIv8sTwjAYNInRS1qHa9aJoqvzpscItXvftKDCfaEQzwoVyXpEQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz",
+      "integrity": "sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/plugin-syntax-jsx": "^7.17.12",
-        "@babel/types": "^7.17.12"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-jsx": "^7.18.6",
+        "@babel/types": "^7.21.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1567,11 +1569,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-development": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz",
-      "integrity": "sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==",
+      "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.16.7"
+        "@babel/plugin-transform-react-jsx": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1581,12 +1583,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.0.tgz",
-      "integrity": "sha512-6+0IK6ouvqDn9bmEG7mEyF/pwlJXVj5lwydybpyyH3D0A7Hftk+NCTdYjnLNZksn261xaOV5ksmp20pQEmc2RQ==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1596,12 +1598,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.0.tgz",
-      "integrity": "sha512-C8YdRw9uzx25HSIzwA7EM7YP0FhCe5wNvJbZzjVNHHPGVcDJ3Aie+qGYYdS1oVQgn+B3eAIJbWFLrJ4Jipv7nw==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz",
+      "integrity": "sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "regenerator-transform": "^0.15.0"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "regenerator-transform": "^0.15.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1611,11 +1613,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.17.12.tgz",
-      "integrity": "sha512-1KYqwbJV3Co03NIi14uEHW8P50Md6KqFgt0FfpHdK6oyAHQVTosgPuPSiWud1HX0oYJ1hGRRlk0fP87jFpqXZA==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1625,15 +1627,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.5.tgz",
-      "integrity": "sha512-Q17hHxXr2fplrE+5BSC1j1Fo5cOA8YeP8XW3/1paI8MzF/faZGh0MaH1KC4jLAvqLPamQWHB5/B7KqSLY1kuHA==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.5.0",
-        "babel-plugin-polyfill-regenerator": "^0.3.0",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz",
+      "integrity": "sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1652,11 +1654,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz",
-      "integrity": "sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1666,12 +1668,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.17.12.tgz",
-      "integrity": "sha512-9pgmuQAtFi3lpNUstvG9nGfk9DkrdmWNp9KeKPFmuZCpEnxRzYlS8JgwPjYj+1AWDOSvoGN0H30p1cBOmT/Svg==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1681,11 +1683,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz",
-      "integrity": "sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1695,11 +1697,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.2.tgz",
-      "integrity": "sha512-/cmuBVw9sZBGZVOMkpAEaVLwm4JmK2GZ1dFKOGGpMzEHWFmyZZ59lUU0PdRr8YNYeQdNzTDwuxP2X2gzydTc9g==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1709,11 +1711,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.17.12.tgz",
-      "integrity": "sha512-Q8y+Jp7ZdtSPXCThB6zjQ74N3lj0f6TDh1Hnf5B+sYlzQ8i5Pjp8gW0My79iekSpT4WnI06blqP6DT0OmaXXmw==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1723,13 +1725,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.4.tgz",
-      "integrity": "sha512-l4vHuSLUajptpHNEOUDEGsnpl9pfRLsN1XUoDQDD/YBuXTM+v37SHGS+c6n4jdcZy96QtuUuSvZYMLSSsjH8Mw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz",
+      "integrity": "sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/plugin-syntax-typescript": "^7.17.12"
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1739,11 +1741,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
-      "integrity": "sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1753,12 +1755,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz",
-      "integrity": "sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1768,37 +1770,37 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.2.tgz",
-      "integrity": "sha512-PfpdxotV6afmXMU47S08F9ZKIm2bJIQ0YbAAtDfIENX7G1NUAXigLREh69CWDjtgUy7dYn7bsMzkgdtAlmS68Q==",
-      "dependencies": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-compilation-targets": "^7.18.2",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.17.12",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.17.12",
-        "@babel/plugin-proposal-async-generator-functions": "^7.17.12",
-        "@babel/plugin-proposal-class-properties": "^7.17.12",
-        "@babel/plugin-proposal-class-static-block": "^7.18.0",
-        "@babel/plugin-proposal-dynamic-import": "^7.16.7",
-        "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
-        "@babel/plugin-proposal-json-strings": "^7.17.12",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.17.12",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-        "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
-        "@babel/plugin-proposal-optional-chaining": "^7.17.12",
-        "@babel/plugin-proposal-private-methods": "^7.17.12",
-        "@babel/plugin-proposal-private-property-in-object": "^7.17.12",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.17.12",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
+      "integrity": "sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==",
+      "dependencies": {
+        "@babel/compat-data": "^7.20.1",
+        "@babel/helper-compilation-targets": "^7.20.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@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.20.1",
+        "@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.20.2",
+        "@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.17.12",
+        "@babel/plugin-syntax-import-assertions": "^7.20.0",
         "@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",
@@ -1808,44 +1810,44 @@
         "@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.17.12",
-        "@babel/plugin-transform-async-to-generator": "^7.17.12",
-        "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
-        "@babel/plugin-transform-block-scoping": "^7.17.12",
-        "@babel/plugin-transform-classes": "^7.17.12",
-        "@babel/plugin-transform-computed-properties": "^7.17.12",
-        "@babel/plugin-transform-destructuring": "^7.18.0",
-        "@babel/plugin-transform-dotall-regex": "^7.16.7",
-        "@babel/plugin-transform-duplicate-keys": "^7.17.12",
-        "@babel/plugin-transform-exponentiation-operator": "^7.16.7",
-        "@babel/plugin-transform-for-of": "^7.18.1",
-        "@babel/plugin-transform-function-name": "^7.16.7",
-        "@babel/plugin-transform-literals": "^7.17.12",
-        "@babel/plugin-transform-member-expression-literals": "^7.16.7",
-        "@babel/plugin-transform-modules-amd": "^7.18.0",
-        "@babel/plugin-transform-modules-commonjs": "^7.18.2",
-        "@babel/plugin-transform-modules-systemjs": "^7.18.0",
-        "@babel/plugin-transform-modules-umd": "^7.18.0",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.17.12",
-        "@babel/plugin-transform-new-target": "^7.17.12",
-        "@babel/plugin-transform-object-super": "^7.16.7",
-        "@babel/plugin-transform-parameters": "^7.17.12",
-        "@babel/plugin-transform-property-literals": "^7.16.7",
-        "@babel/plugin-transform-regenerator": "^7.18.0",
-        "@babel/plugin-transform-reserved-words": "^7.17.12",
-        "@babel/plugin-transform-shorthand-properties": "^7.16.7",
-        "@babel/plugin-transform-spread": "^7.17.12",
-        "@babel/plugin-transform-sticky-regex": "^7.16.7",
-        "@babel/plugin-transform-template-literals": "^7.18.2",
-        "@babel/plugin-transform-typeof-symbol": "^7.17.12",
-        "@babel/plugin-transform-unicode-escapes": "^7.16.7",
-        "@babel/plugin-transform-unicode-regex": "^7.16.7",
+        "@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.20.2",
+        "@babel/plugin-transform-classes": "^7.20.2",
+        "@babel/plugin-transform-computed-properties": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.20.2",
+        "@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.19.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
+        "@babel/plugin-transform-new-target": "^7.18.6",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-parameters": "^7.20.1",
+        "@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.19.0",
+        "@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.10",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
         "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.18.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.5.0",
-        "babel-plugin-polyfill-regenerator": "^0.3.0",
-        "core-js-compat": "^3.22.1",
+        "@babel/types": "^7.20.2",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "core-js-compat": "^3.25.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1879,16 +1881,16 @@
       }
     },
     "node_modules/@babel/preset-react": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.17.12.tgz",
-      "integrity": "sha512-h5U+rwreXtZaRBEQhW1hOJLMq8XNJBQ/9oymXiCXTuT/0uOwpbT0gUt+sXeOqoXBgNuUKI7TaObVwoEyWkpFgA==",
+      "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.17.12",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-transform-react-display-name": "^7.16.7",
-        "@babel/plugin-transform-react-jsx": "^7.17.12",
-        "@babel/plugin-transform-react-jsx-development": "^7.16.7",
-        "@babel/plugin-transform-react-pure-annotations": "^7.16.7"
+        "@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"
@@ -1898,13 +1900,13 @@
       }
     },
     "node_modules/@babel/preset-typescript": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.17.12.tgz",
-      "integrity": "sha512-S1ViF8W2QwAKUGJXxP9NAfNaqGDdEBJKpYkxHf5Yy2C4NPPzXGeR3Lhk7G8xJaaLcFTRfNjVbtbVtm8Gb0mqvg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz",
+      "integrity": "sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-transform-typescript": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-transform-typescript": "^7.21.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1913,55 +1915,60 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+    },
     "node_modules/@babel/runtime": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
-      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/runtime-corejs3": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz",
-      "integrity": "sha512-l4ddFwrc9rnR+EJsHsh+TJ4A35YqQz/UqcjtlX2ov53hlJYG5CxtQmNZxyajwDVmCxwy++rtvGU5HazCK4W41Q==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.21.0.tgz",
+      "integrity": "sha512-TDD4UJzos3JJtM+tHX+w2Uc+KWj7GV+VKKFdMVd2Rx8sdA19hcc3P3AHFYd5LVOw+pYuSd5lICC3gm52B6Rwxw==",
       "dependencies": {
-        "core-js-pure": "^3.20.2",
-        "regenerator-runtime": "^0.13.4"
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.11"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
-      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
       "dependencies": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/parser": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.5.tgz",
-      "integrity": "sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==",
-      "dependencies": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.18.2",
-        "@babel/helper-environment-visitor": "^7.18.2",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.18.5",
-        "@babel/types": "^7.18.4",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.2.tgz",
+      "integrity": "sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.21.1",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.21.2",
+        "@babel/types": "^7.21.2",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -1970,11 +1977,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.4.tgz",
-      "integrity": "sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
+      "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -2003,24 +2011,44 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@docsearch/css": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.1.0.tgz",
-      "integrity": "sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA=="
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.3.tgz",
+      "integrity": "sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg=="
     },
     "node_modules/@docsearch/react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.1.0.tgz",
-      "integrity": "sha512-bjB6ExnZzf++5B7Tfoi6UXgNwoUnNOfZ1NyvnvPhWgCMy5V/biAtLL4o7owmZSYdAKeFSvZ5Lxm0is4su/dBWg==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.3.tgz",
+      "integrity": "sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==",
       "dependencies": {
-        "@algolia/autocomplete-core": "1.6.3",
-        "@docsearch/css": "3.1.0",
+        "@algolia/autocomplete-core": "1.7.4",
+        "@algolia/autocomplete-preset-algolia": "1.7.4",
+        "@docsearch/css": "3.3.3",
         "algoliasearch": "^4.0.0"
       },
       "peerDependencies": {
         "@types/react": ">= 16.8.0 < 19.0.0",
         "react": ">= 16.8.0 < 19.0.0",
         "react-dom": ">= 16.8.0 < 19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/@docusaurus/core": {
@@ -2738,17 +2766,17 @@
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz",
-      "integrity": "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==",
+      "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.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz",
-      "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==",
+      "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"
       }
@@ -2763,11 +2791,11 @@
       }
     },
     "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
-      "integrity": "sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==",
+      "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.0",
+        "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
         "@jridgewell/trace-mapping": "^0.3.9"
       },
@@ -2776,17 +2804,17 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
-      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w=="
+      "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.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz",
-      "integrity": "sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==",
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
     "node_modules/@leichtgewicht/ip-codec": {
@@ -2960,34 +2988,33 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
       }
     },
     "node_modules/@prismicio/client": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.5.1.tgz",
-      "integrity": "sha512-SrluBNcTQ34UZI1oa+DLTWohaE8U2BU2QRpjZ9GOYa9Kty1RqWxFxr+qUTk7LS0QSbmVPEq1AngL5IR2HFZw2A==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.7.3.tgz",
+      "integrity": "sha512-zQVZhuQDYIgdaY636u+QNk2tvvbtpkaKsEiLT0Ef51nFW/y5fqpOG5U0eU3cVsikZaYNlZ17x6O1wmvVCLdimQ==",
       "dependencies": {
-        "@prismicio/helpers": "^2.3.0",
-        "@prismicio/types": "^0.1.27"
+        "@prismicio/helpers": "^2.3.8",
+        "@prismicio/types": "^0.2.7"
       },
       "engines": {
         "node": ">=12.13.0"
       }
     },
     "node_modules/@prismicio/helpers": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.1.tgz",
-      "integrity": "sha512-J37WpIUINZ0wT3a2h4fc9ATZqjmQjziPwjETG7QLYEVULpQXsWbgM+C6aoOqdlRwCbZ3Wfhel26+++ZaqOX/0Q==",
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.9.tgz",
+      "integrity": "sha512-p7Y1sG83A2YPZvptfAzuZA8xH1bdM2wGRjqSKW9Qa0rAnBq2OfVKRvwl9OMCZML4eLUMxSEUAEWRVSoKpQnJvA==",
       "dependencies": {
-        "@prismicio/richtext": "^2.0.1",
-        "@prismicio/types": "^0.1.27",
-        "escape-html": "^1.0.3",
+        "@prismicio/richtext": "^2.1.4",
+        "@prismicio/types": "^0.2.7",
         "imgix-url-builder": "^0.0.3"
       },
       "engines": {
@@ -2995,18 +3022,19 @@
       }
     },
     "node_modules/@prismicio/react": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.4.2.tgz",
-      "integrity": "sha512-KyCZBdJosE93S7sl+Z//eDdbT7vYNGNZ60rOs1VETbDXJtJhh7ymSZul5cvb8MrSrH8yn9DiR4rGVVXLobnHSA==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.5.2.tgz",
+      "integrity": "sha512-X00mT3/mHDnnb9NKUeAZnBWDDngXhr84RVzh9+eSeZjJKIVYEHHgfZqex4R6LgjZzeueaGp0UCLhwrUeiRp5DA==",
       "dependencies": {
-        "@prismicio/helpers": "^2.3.1",
-        "@prismicio/richtext": "^2.0.1"
+        "@prismicio/helpers": "^2.3.8",
+        "@prismicio/richtext": "^2.1.3",
+        "@prismicio/types": "^0.2.7"
       },
       "engines": {
         "node": ">=12.7.0"
       },
       "peerDependencies": {
-        "@prismicio/client": "^6.0.0",
+        "@prismicio/client": "^6",
         "react": "^16.8 || ^17 || ^18"
       },
       "peerDependenciesMeta": {
@@ -3016,20 +3044,20 @@
       }
     },
     "node_modules/@prismicio/richtext": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.0.tgz",
-      "integrity": "sha512-uxJaR3soPr356stoLEIcgn+68lfolwxRmlDLTF4gYDcF30rB0YFLPcdRJmhtkU6LGZXIhwUUmwMWXkhT+DV3hA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.4.tgz",
+      "integrity": "sha512-hyC8XItj+2yMmLGNjg9xGA/lRMO5UgbPF132VFrpZHzHhtIKvHN3iYxCZxnrEoPaTcT6JjA8vWyYLjmmB49bvw==",
       "dependencies": {
-        "@prismicio/types": "^0.1.22"
+        "@prismicio/types": "^0.2.7"
       },
       "engines": {
         "node": ">=12.7.0"
       }
     },
     "node_modules/@prismicio/types": {
-      "version": "0.1.29",
-      "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.1.29.tgz",
-      "integrity": "sha512-wp7DHqMK0FDMcFQfJbqTAzWNBkM6/rRq71jMw6x9m07nWCUqytJQQKg6/15uduIeSqPXmyfJW21drsmChGaxsQ==",
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.7.tgz",
+      "integrity": "sha512-xHPBWg+lPcl8U97VB/2oYK3MJlQoVPZq91hbeQO8WRyvq+zgpNST3xFOTk8SkQpgoH6wd50AxGZELvPrpojajQ==",
       "engines": {
         "node": ">=12.7.0"
       }
@@ -3081,9 +3109,9 @@
       }
     },
     "node_modules/@sideway/formula": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.0.tgz",
-      "integrity": "sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
     },
     "node_modules/@sideway/pinpoint": {
       "version": "2.0.0",
@@ -3112,9 +3140,9 @@
       }
     },
     "node_modules/@stackblitz/sdk": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.8.0.tgz",
-      "integrity": "sha512-hbS4CpQVF3bxJ+ZD8qu8lAjTZVLTPToLbMtgxbxUmp1AIgqm7i0gMFM1POBA8BqY84CT1A3z74gdCd1bsro7qA=="
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.8.2.tgz",
+      "integrity": "sha512-3aTg0Tb9dNs1huPkpdYxPEX/yc8A28eZneUMOEJzOLi7EJwl5onr9gCAVjIOkN4WLYu1iBSiJiGBYT629bZIJQ=="
     },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
@@ -3355,9 +3383,9 @@
       }
     },
     "node_modules/@tsconfig/docusaurus": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@tsconfig/docusaurus/-/docusaurus-1.0.6.tgz",
-      "integrity": "sha512-1QxDaP54hpzM6bq9E+yFEo4F9WbWHhsDe4vktZXF/iDlc9FqGr9qlg+3X/nuKQXx8QxHV7ue8NXFazzajsxFBA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@tsconfig/docusaurus/-/docusaurus-1.0.7.tgz",
+      "integrity": "sha512-ffTXxGIP/IRMCjuzHd6M4/HdIrw1bMfC7Bv8hMkTadnePkpe0lG0oDSdbRpSDZb2rQMAgpbWiR10BvxvNYwYrg==",
       "dev": true
     },
     "node_modules/@tsconfig/node10": {
@@ -3367,15 +3395,15 @@
       "dev": true
     },
     "node_modules/@tsconfig/node12": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.10.tgz",
-      "integrity": "sha512-N+srakvPaYMGkwjNDx3ASx65Zl3QG8dJgVtIB+YMOkucU+zctlv/hdP5250VKdDHSDoW9PFZoCqbqNcAPjCjXA==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
       "dev": true
     },
     "node_modules/@tsconfig/node14": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.2.tgz",
-      "integrity": "sha512-YwrUA5ysDXHFYfL0Xed9x3sNS4P+aKlCOnnbqUa2E5HdQshHFleCJVrj1PlGTb4GgFUCDyte1v3JWLy2sz8Oqg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
       "dev": true
     },
     "node_modules/@tsconfig/node16": {
@@ -3419,18 +3447,18 @@
       }
     },
     "node_modules/@types/eslint": {
-      "version": "8.4.3",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.3.tgz",
-      "integrity": "sha512-YP1S7YJRMPs+7KZKDb9G63n8YejIwW9BALq7a5j2+H4yl6iOv9CB29edho+cuFRrvmJbbaH2yiVChKLJVysDGw==",
+      "version": "8.21.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
+      "integrity": "sha512-rc9K8ZpVjNcLs8Fp0dkozd5Pt2Apk1glO4Vgz8ix1u6yFByxfqo5Yavpy65o+93TAe24jr7v+eSBtFLvOQtCRQ==",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
     "node_modules/@types/eslint-scope": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
-      "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
+      "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": "*"
@@ -3442,20 +3470,20 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
     },
     "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==",
+      "version": "4.17.17",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
+      "integrity": "sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==",
       "dependencies": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.18",
+        "@types/express-serve-static-core": "^4.17.33",
         "@types/qs": "*",
         "@types/serve-static": "*"
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.29",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.29.tgz",
-      "integrity": "sha512-uMd++6dMKS32EOuw1Uli3e3BPgdLIXmezcfHv7N4c1s3gkhikBplORPpMq3fuWkxncZN1reb16d5n8yhQ80x7Q==",
+      "version": "4.17.33",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz",
+      "integrity": "sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -3487,9 +3515,9 @@
       "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==",
+      "version": "1.17.10",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
+      "integrity": "sha512-Qs5aULi+zV1bwKAg5z1PWnDXWmsn+LxIvUGv6E2+OOMYhclZMO+OXd9pYVf2gLykf2I7IV2u7oTHwChPNsvJ7g==",
       "dependencies": {
         "@types/node": "*"
       }
@@ -3508,14 +3536,14 @@
       }
     },
     "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=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "node_modules/@types/node": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.43.tgz",
-      "integrity": "sha512-jnUpgw8fL9kP2iszfIDyBQtw5Mf4/XSqy0Loc1J9pI14ejL83XcCEvSf50Gs/4ET0I9VCCDoOfufQysj0S66xA=="
+      "version": "18.15.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.0.tgz",
+      "integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3548,9 +3576,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "17.0.45",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz",
-      "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==",
+      "version": "17.0.53",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.53.tgz",
+      "integrity": "sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3558,18 +3586,18 @@
       }
     },
     "node_modules/@types/react-helmet": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.5.tgz",
-      "integrity": "sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
+      "integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
     },
     "node_modules/@types/react-router": {
-      "version": "5.1.18",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
-      "integrity": "sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==",
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
       "dev": true,
       "dependencies": {
         "@types/history": "^4.7.11",
@@ -3625,11 +3653,11 @@
       }
     },
     "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==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
+      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
       "dependencies": {
-        "@types/mime": "^1",
+        "@types/mime": "*",
         "@types/node": "*"
       }
     },
@@ -3647,9 +3675,9 @@
       "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
     },
     "node_modules/@types/ws": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
-      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
       "dependencies": {
         "@types/node": "*"
       }
@@ -3822,6 +3850,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
       "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
+      "deprecated": "This is probably built in to whatever tool you're using. If you still need it... idk",
       "peerDependencies": {
         "acorn": "^6.0.0"
       }
@@ -3851,9 +3880,9 @@
       }
     },
     "node_modules/address": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.0.tgz",
-      "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -3902,9 +3931,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -3930,35 +3959,35 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.13.1.tgz",
-      "integrity": "sha512-dtHUSE0caWTCE7liE1xaL+19AFf6kWEcyn76uhcitWpntqvicFHXKFoZe5JJcv9whQOTRM6+B8qJz6sFj+rDJA==",
-      "dependencies": {
-        "@algolia/cache-browser-local-storage": "4.13.1",
-        "@algolia/cache-common": "4.13.1",
-        "@algolia/cache-in-memory": "4.13.1",
-        "@algolia/client-account": "4.13.1",
-        "@algolia/client-analytics": "4.13.1",
-        "@algolia/client-common": "4.13.1",
-        "@algolia/client-personalization": "4.13.1",
-        "@algolia/client-search": "4.13.1",
-        "@algolia/logger-common": "4.13.1",
-        "@algolia/logger-console": "4.13.1",
-        "@algolia/requester-browser-xhr": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/requester-node-http": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.15.0.tgz",
+      "integrity": "sha512-+vgKQF5944dYsz9zhKk07JbOYeNdKisoD5GeG0woBL3nLzbn2a+nGwki60DXg7CXvaFXBcTXyJG4C+VaBVd44g==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.15.0",
+        "@algolia/cache-common": "4.15.0",
+        "@algolia/cache-in-memory": "4.15.0",
+        "@algolia/client-account": "4.15.0",
+        "@algolia/client-analytics": "4.15.0",
+        "@algolia/client-common": "4.15.0",
+        "@algolia/client-personalization": "4.15.0",
+        "@algolia/client-search": "4.15.0",
+        "@algolia/logger-common": "4.15.0",
+        "@algolia/logger-console": "4.15.0",
+        "@algolia/requester-browser-xhr": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/requester-node-http": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "node_modules/algoliasearch-helper": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.8.2.tgz",
-      "integrity": "sha512-AXxiF0zT9oYwl8ZBgU/eRXvfYhz7cBA5YrLPlw9inZHdaYF0QEya/f1Zp1mPYMXc1v6VkHwBq4pk6/vayBLICg==",
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.12.0.tgz",
+      "integrity": "sha512-/j1U3PEwdan0n6P/QqSnSpNSLC5+cEMvyljd5CnmNmUjDlGrys+vFEOwjVEnqELIiAGMHEA/Nl3CiKVFBUYqyQ==",
       "dependencies": {
         "@algolia/events": "^4.0.1"
       },
       "peerDependencies": {
-        "algoliasearch": ">= 3.1 < 5"
+        "algoliasearch": ">= 3.1 < 6"
       }
     },
     "node_modules/ansi-align": {
@@ -4003,9 +4032,9 @@
       }
     },
     "node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -4038,13 +4067,13 @@
       }
     },
     "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==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
+      "integrity": "sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-array-method-boxes-properly": "^1.0.0",
         "is-string": "^1.0.7"
       },
@@ -4074,9 +4103,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4088,8 +4117,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -4105,6 +4134,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/axios": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
@@ -4114,9 +4154,9 @@
       }
     },
     "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==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
+      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
       "dependencies": {
         "find-cache-dir": "^3.3.1",
         "loader-utils": "^2.0.0",
@@ -4178,12 +4218,12 @@
       "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
-      "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
+      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
       "dependencies": {
-        "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
         "semver": "^6.1.1"
       },
       "peerDependencies": {
@@ -4199,23 +4239,23 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz",
-      "integrity": "sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
+      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1",
-        "core-js-compat": "^3.21.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
+        "core-js-compat": "^3.25.1"
       },
       "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==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
+      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
+        "@babel/helper-define-polyfill-provider": "^0.3.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
@@ -4262,9 +4302,9 @@
       }
     },
     "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==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
@@ -4274,7 +4314,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "raw-body": "2.5.1",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -4306,9 +4346,9 @@
       "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==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.0.tgz",
+      "integrity": "sha512-LVRinRB3k1/K0XzZ2p58COnWvkQknIY6sf0zF2rpErvcJXpMBttEPQSxK+HEXSS9VmpZlDoDnQWv8ftJT20B0Q==",
       "dependencies": {
         "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
@@ -4363,9 +4403,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.20.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.4.tgz",
-      "integrity": "sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw==",
+      "version": "4.21.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
+      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
       "funding": [
         {
           "type": "opencollective",
@@ -4377,11 +4417,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001349",
-        "electron-to-chromium": "^1.4.147",
-        "escalade": "^3.1.1",
-        "node-releases": "^2.0.5",
-        "picocolors": "^1.0.0"
+        "caniuse-lite": "^1.0.30001449",
+        "electron-to-chromium": "^1.4.284",
+        "node-releases": "^2.0.8",
+        "update-browserslist-db": "^1.0.10"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -4495,11 +4534,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/buble-jsx-only/node_modules/regjsgen": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
-    },
     "node_modules/buble-jsx-only/node_modules/regjsparser": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.7.0.tgz",
@@ -4634,9 +4668,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001353",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001353.tgz",
-      "integrity": "sha512-GqItFu1lCW4OGd4f47TVQXAGxca8K9Bz3cBb872ZskMo6FIQhiHCc7QjBL7Bb4XannbV+Gq0yHhFVxONW6C/XQ==",
+      "version": "1.0.30001464",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz",
+      "integrity": "sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==",
       "funding": [
         {
           "type": "opencollective",
@@ -4776,14 +4810,23 @@
       }
     },
     "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=="
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/clean-css": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
-      "integrity": "sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
+      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
       "dependencies": {
         "source-map": "~0.6.0"
       },
@@ -4842,17 +4885,20 @@
       }
     },
     "node_modules/clone-response": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
       "dependencies": {
         "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/clsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
       "engines": {
         "node": ">=6"
       }
@@ -4960,9 +5006,9 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colord": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
-      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ=="
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
     "node_modules/colorette": {
       "version": "2.0.19",
@@ -5051,6 +5097,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/compression/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/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5108,9 +5159,9 @@
       }
     },
     "node_modules/connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "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"
       }
@@ -5138,20 +5189,17 @@
       }
     },
     "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==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "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"
-      }
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cookie": {
       "version": "0.5.0",
@@ -5167,9 +5215,9 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
     "node_modules/copy-text-to-clipboard": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz",
-      "integrity": "sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
+      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==",
       "engines": {
         "node": ">=12"
       },
@@ -5229,9 +5277,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.1.tgz",
-      "integrity": "sha512-wfMYHWi1WQjpgZNC9kAlN4ut04TM9fUTdi7CqIoTVM7yaiOUQTklOzfb+oWH3r9edQcT3F887swuVmxrV+CC8w==",
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.29.0.tgz",
+      "integrity": "sha512-VG23vuEisJNkGl6XQmFJd3rEG/so/CNatqeE+7uZAwTSwFeB/qaO0be8xZYUNWprJ/GIwL8aMt9cj1kvbpTZhg==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5239,30 +5287,21 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.23.1.tgz",
-      "integrity": "sha512-KeYrEc8t6FJsKYB2qnDwRHWaC0cJNaqlHfCpMe5q3j/W1nje3moib/txNklddLPCtGb+etcBIyJ8zuMa/LN5/A==",
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.29.0.tgz",
+      "integrity": "sha512-ScMn3uZNAFhK2DGoEfErguoiAHhV2Ju+oJo/jK08p7B3f3UhocUrCCkTvnZaiS+edl5nlIoiBXKcwMc6elv4KQ==",
       "dependencies": {
-        "browserslist": "^4.20.4",
-        "semver": "7.0.0"
+        "browserslist": "^4.21.5"
       },
       "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.23.1",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.1.tgz",
-      "integrity": "sha512-3qNgf6TqI3U1uhuSYRzJZGfFd4T+YlbyVPl+jgRiKjdZopvG4keZQwWZDAWpu1UH9nCgTpUzIV3GFawC7cJsqg==",
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.29.0.tgz",
+      "integrity": "sha512-v94gUjN5UTe1n0yN/opTihJ8QBWD2O8i19RfTZR7foONPWArnjB96QA/wk5ozu1mm6ja3udQCzOzwQXTxi3xOQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5275,9 +5314,9 @@
       "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==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
@@ -5367,9 +5406,9 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
       "engines": {
         "node": "^10 || ^12 || >=14"
       },
@@ -5459,9 +5498,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -5562,11 +5601,11 @@
       }
     },
     "node_modules/cssnano": {
-      "version": "5.1.11",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.11.tgz",
-      "integrity": "sha512-2nx+O6LvewPo5EBtYrKc8762mMkZRk9cMGIOP4UlkmxHm7ObxH+zvsJJ+qLwPkUc4/yumL/qJkavYi9NlodWIQ==",
+      "version": "5.1.15",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
       "dependencies": {
-        "cssnano-preset-default": "^5.2.11",
+        "cssnano-preset-default": "^5.2.14",
         "lilconfig": "^2.0.3",
         "yaml": "^1.10.2"
       },
@@ -5582,12 +5621,12 @@
       }
     },
     "node_modules/cssnano-preset-advanced": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.7.tgz",
-      "integrity": "sha512-VNOdTMRA60KhaURZhnkTGeluHQBHWDMwY7TIDu1Qydf88X6k8xZbV2I+Wlm8JRaj2oi18xvoIOAW17JneoZzEg==",
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.10.tgz",
+      "integrity": "sha512-fnYJyCS9jgMU+cmHO1rPSPf9axbQyD7iUhLO5Df6O4G+fKIOMps+ZbU0PdGFejFBBZ3Pftf18fn1eG7MAPUSWQ==",
       "dependencies": {
-        "autoprefixer": "^10.3.7",
-        "cssnano-preset-default": "^5.2.11",
+        "autoprefixer": "^10.4.12",
+        "cssnano-preset-default": "^5.2.14",
         "postcss-discard-unused": "^5.1.0",
         "postcss-merge-idents": "^5.1.1",
         "postcss-reduce-idents": "^5.2.0",
@@ -5601,36 +5640,36 @@
       }
     },
     "node_modules/cssnano-preset-default": {
-      "version": "5.2.11",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.11.tgz",
-      "integrity": "sha512-4PadR1NtuaIK8MvLNuY7MznK4WJteldGlzCiMaaTiOUP+apeiIvUDIXykzUOoqgOOUAHrU64ncdD90NfZR3LSQ==",
+      "version": "5.2.14",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
       "dependencies": {
-        "css-declaration-sorter": "^6.2.2",
+        "css-declaration-sorter": "^6.3.1",
         "cssnano-utils": "^3.1.0",
         "postcss-calc": "^8.2.3",
-        "postcss-colormin": "^5.3.0",
-        "postcss-convert-values": "^5.1.2",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
         "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.5",
-        "postcss-merge-rules": "^5.1.2",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
         "postcss-minify-font-values": "^5.1.0",
         "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-params": "^5.1.4",
         "postcss-minify-selectors": "^5.2.1",
         "postcss-normalize-charset": "^5.1.0",
         "postcss-normalize-display-values": "^5.1.0",
-        "postcss-normalize-positions": "^5.1.0",
-        "postcss-normalize-repeat-style": "^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-unicode": "^5.1.1",
         "postcss-normalize-url": "^5.1.0",
         "postcss-normalize-whitespace": "^5.1.1",
-        "postcss-ordered-values": "^5.1.2",
-        "postcss-reduce-initial": "^5.1.0",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
         "postcss-reduce-transforms": "^5.1.0",
         "postcss-svgo": "^5.1.0",
         "postcss-unique-selectors": "^5.1.1"
@@ -5682,9 +5721,9 @@
       "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
     },
     "node_modules/csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "node_modules/dag-map": {
       "version": "1.0.2",
@@ -5692,9 +5731,9 @@
       "integrity": "sha512-+LSAiGFwQ9dRnRdOeaj7g47ZFJcOUPukAP8J3A3fuZ1g9Y44BG+P1sgApjLXTQPOzC4+7S9Wr8kXsfpINM4jpw=="
     },
     "node_modules/date-fns": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
-      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
       "engines": {
         "node": ">=0.11"
       },
@@ -5739,9 +5778,9 @@
       }
     },
     "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==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5771,9 +5810,9 @@
       }
     },
     "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==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -5849,19 +5888,16 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
     },
     "node_modules/detect-port": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
-      "integrity": "sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+      "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
       "dependencies": {
         "address": "^1.0.1",
-        "debug": "^2.6.0"
+        "debug": "4"
       },
       "bin": {
-        "detect": "bin/detect-port",
-        "detect-port": "bin/detect-port"
-      },
-      "engines": {
-        "node": ">= 4.2.1"
+        "detect": "bin/detect-port.js",
+        "detect-port": "bin/detect-port.js"
       }
     },
     "node_modules/detect-port-alt": {
@@ -5893,19 +5929,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/detect-port/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/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -5954,9 +5977,9 @@
       }
     },
     "node_modules/docusaurus-plugin-sass": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.2.tgz",
-      "integrity": "sha512-ZZBpj3PrhGpYE2kAnkZB9NRwy/CDi4rGun1oec6PYR8YvGzqxYGtXvLgHi6FFbu8/N483klk8udqyYMh6Ted+A==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.3.tgz",
+      "integrity": "sha512-FbaE06K8NF8SPUYTwiG+83/jkXrwHJ/Afjqz3SUIGon6QvFwSSoKOcoxGQmUBnjTOk+deUONDx8jNWsegFJcBQ==",
       "dependencies": {
         "sass-loader": "^10.1.1"
       },
@@ -6057,9 +6080,9 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "node_modules/duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha512-CEj8FwwNA4cVH2uFCoHUrmojhYh1vmCdOaneKJXwkeY1i9jnlslVo9dx+hQ5Hl9GnH/Bwy/IjxAyOePyPKYnzA=="
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz",
+      "integrity": "sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA=="
     },
     "node_modules/ee-first": {
       "version": "1.1.1",
@@ -6067,9 +6090,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.155",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.155.tgz",
-      "integrity": "sha512-niPzKBSYPG06gxLKO0c2kEmgdRMTtIbNrBlvD31Ld8Q57b/K0218U4j8u/OOt25XE1eFOn47FcmQVdx9R1qqxA=="
+      "version": "1.4.328",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.328.tgz",
+      "integrity": "sha512-DE9tTy2PNmy1v55AZAO542ui+MLC2cvINMK4P2LXGsJdput/ThVG9t+QGecPuAZZSgC8XoI+Jh9M1OG9IoNSCw=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -6110,9 +6133,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
-      "integrity": "sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -6138,33 +6161,43 @@
       }
     },
     "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==",
+      "version": "1.21.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
+      "integrity": "sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==",
       "dependencies": {
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.1",
+        "get-intrinsic": "^1.1.3",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.4",
+        "is-array-buffer": "^3.0.1",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6183,6 +6216,19 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -6296,9 +6342,9 @@
       }
     },
     "node_modules/eta": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/eta/-/eta-1.12.3.tgz",
-      "integrity": "sha512-qHixwbDLtekO/d51Yr4glcaUJCIjGVJyTzuqV4GPlgZo1YpgOKG+avQynErZIYrfM6JIJdtiG2Kox8tbb+DoGg==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-1.14.2.tgz",
+      "integrity": "sha512-wZmJAV7EFUG5W8XNXSazIdichnWEhGB1OWg4tnXWPj0CPNUcFdgorGNO6N9p6WBUgoUe4P0OziJYn1+6zxP2aQ==",
       "engines": {
         "node": ">=6.0.0"
       },
@@ -6373,13 +6419,13 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.5.0",
@@ -6398,7 +6444,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -6455,25 +6501,6 @@
         "node": ">= 0.6"
       }
     },
-    "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/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -6496,9 +6523,9 @@
       "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==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -6524,9 +6551,9 @@
       }
     },
     "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==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -6706,9 +6733,9 @@
       }
     },
     "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==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
       "funding": [
         {
           "type": "individual",
@@ -6724,10 +6751,18 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "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==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
+      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
       "dependencies": {
         "@babel/code-frame": "^7.8.3",
         "@types/json-schema": "^7.0.5",
@@ -6927,9 +6962,9 @@
       }
     },
     "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==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -6971,9 +7006,9 @@
       }
     },
     "node_modules/github-slugger": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
-      "integrity": "sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
+      "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
     },
     "node_modules/glob": {
       "version": "7.2.3",
@@ -7011,9 +7046,9 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
     "node_modules/global-dirs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz",
-      "integrity": "sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
       "dependencies": {
         "ini": "2.0.0"
       },
@@ -7075,6 +7110,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -7094,6 +7143,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/got": {
       "version": "9.6.0",
       "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
@@ -7209,6 +7269,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "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",
@@ -7445,9 +7516,9 @@
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
     "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==",
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -7458,6 +7529,11 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/hpack.js/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/hpack.js/node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -7633,9 +7709,9 @@
       }
     },
     "node_modules/http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
@@ -7658,9 +7734,9 @@
       }
     },
     "node_modules/http-parser-js": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.6.tgz",
-      "integrity": "sha512-vDlkRPDJn93swjcjqMSaGSPABbIarsr1TLAui/gLDXzV5VsJNdXNzMYDyNBLQkjWQCJ1uizu8T2oDMhmGt0PRA=="
+      "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",
@@ -7740,9 +7816,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "engines": {
         "node": ">= 4"
       }
@@ -7756,18 +7832,18 @@
       }
     },
     "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==",
+      "version": "9.0.19",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
+      "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
       }
     },
     "node_modules/immutable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -7841,11 +7917,11 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
     "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==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
       "dependencies": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
       },
@@ -7891,6 +7967,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -7939,9 +8028,9 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "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==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -7966,9 +8055,9 @@
       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -8278,6 +8367,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      },
+      "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",
@@ -8393,14 +8500,14 @@
       }
     },
     "node_modules/joi": {
-      "version": "17.6.0",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.0.tgz",
-      "integrity": "sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==",
+      "version": "17.8.3",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.8.3.tgz",
+      "integrity": "sha512-q5Fn6Tj/jR8PfrLrx4fpGH4v9qM6o+vDUfD4/3vxxyg34OmKcNqYZ1qn2mpLza96S8tL0p0rIw2gOZX+/cTg9w==",
       "dependencies": {
         "@hapi/hoek": "^9.0.0",
         "@hapi/topo": "^5.0.0",
         "@sideway/address": "^4.1.3",
-        "@sideway/formula": "^3.0.0",
+        "@sideway/formula": "^3.0.1",
         "@sideway/pinpoint": "^2.0.0"
       }
     },
@@ -8465,9 +8572,9 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "node_modules/json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -8511,9 +8618,9 @@
       }
     },
     "node_modules/klona": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
-      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
       "engines": {
         "node": ">= 8"
       }
@@ -8538,9 +8645,9 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
       "engines": {
         "node": ">=10"
       }
@@ -8559,9 +8666,9 @@
       }
     },
     "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==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -8645,14 +8752,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "yallist": "^3.0.2"
       }
     },
     "node_modules/magic-string": {
@@ -8781,11 +8885,11 @@
       }
     },
     "node_modules/memfs": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.4.tgz",
-      "integrity": "sha512-W4gHNUE++1oSJVn8Y68jPXi+mkx3fXR5ITE/Ubz6EQ3xRpCN5k2CQ4AUR8094Z7211F876TyoBACGsIveqgiGA==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz",
+      "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==",
       "dependencies": {
-        "fs-monkey": "1.0.3"
+        "fs-monkey": "^1.0.3"
       },
       "engines": {
         "node": ">= 4.0.0"
@@ -8880,19 +8984,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/mini-css-extract-plugin": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -8956,9 +9047,12 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/mkdirp": {
       "version": "0.5.6",
@@ -9075,9 +9169,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
-      "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q=="
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
+      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -9139,9 +9233,9 @@
       }
     },
     "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==",
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -9155,13 +9249,13 @@
       }
     },
     "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==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -9172,14 +9266,14 @@
       }
     },
     "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==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.5.tgz",
+      "integrity": "sha512-yDNzckpM6ntyQiGTik1fKV1DcVDRS+w8bvpWNCBanvH5LfRX9O8WTHqQzG4RZwRAM4I0oU7TV11Lj5v0g20ibw==",
       "dependencies": {
-        "array.prototype.reduce": "^1.0.4",
+        "array.prototype.reduce": "^1.0.5",
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.1"
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.8"
@@ -9189,13 +9283,13 @@
       }
     },
     "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==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9589,9 +9683,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "funding": [
         {
           "type": "opencollective",
@@ -9624,11 +9718,11 @@
       }
     },
     "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==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
         "colord": "^2.9.1",
         "postcss-value-parser": "^4.2.0"
@@ -9641,11 +9735,11 @@
       }
     },
     "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
       "dependencies": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -9750,12 +9844,12 @@
       }
     },
     "node_modules/postcss-merge-longhand": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.5.tgz",
-      "integrity": "sha512-NOG1grw9wIO+60arKa2YYsrbgvP6tp+jqc7+ZD5/MalIw234ooH2C6KlR6FEn4yle7GqZoBxSK1mLBE9KPur6w==",
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.0"
+        "stylehacks": "^5.1.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -9765,11 +9859,11 @@
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^3.1.0",
         "postcss-selector-parser": "^6.0.5"
@@ -9812,11 +9906,11 @@
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "cssnano-utils": "^3.1.0",
         "postcss-value-parser": "^4.2.0"
       },
@@ -9922,9 +10016,9 @@
       }
     },
     "node_modules/postcss-normalize-positions": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.0.tgz",
-      "integrity": "sha512-8gmItgA4H5xiUxgN/3TVvXRoJxkAWLW6f/KKhdsH03atg0cB8ilXnrB5PpSshwVu/dD2ZsRFQcR1OEmSBDAgcQ==",
+      "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"
       },
@@ -9936,9 +10030,9 @@
       }
     },
     "node_modules/postcss-normalize-repeat-style": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.0.tgz",
-      "integrity": "sha512-IR3uBjc+7mcWGL6CtniKNQ4Rr5fTxwkaDHwMBDGGs1x9IVRkYIT/M4NelZWkAOBdV6v3Z9S46zqaKGlyzHSchw==",
+      "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"
       },
@@ -9978,11 +10072,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -10033,9 +10127,9 @@
       }
     },
     "node_modules/postcss-ordered-values": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.2.tgz",
-      "integrity": "sha512-wr2avRbW4HS2XE2ZCqpfp4N/tDC6GZKZ+SVP8UBTOVS8QWrc4TD8MYrebJrvVVlGPKszmiSCzue43NDiVtgDmg==",
+      "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"
@@ -10062,11 +10156,11 @@
       }
     },
     "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==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0"
       },
       "engines": {
@@ -10091,9 +10185,9 @@
       }
     },
     "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==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10103,17 +10197,17 @@
       }
     },
     "node_modules/postcss-sort-media-queries": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.2.1.tgz",
-      "integrity": "sha512-9VYekQalFZ3sdgcTjXMa0dDjsfBVHXlraYJEMiOJ/2iMmI2JGCMavP16z3kWOaRu8NSaJCTgVpB/IVpH5yT9YQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.3.0.tgz",
+      "integrity": "sha512-jAl8gJM2DvuIJiI9sL1CuiHtKM4s5aEIomkU8G3LFvbP+p8i7Sz8VV63uieTgoewGqKbi+hxBTiOKJlB35upCg==",
       "dependencies": {
-        "sort-css-media-queries": "2.0.4"
+        "sort-css-media-queries": "2.1.0"
       },
       "engines": {
         "node": ">=10.0.0"
       },
       "peerDependencies": {
-        "postcss": "^8.4.4"
+        "postcss": "^8.4.16"
       }
     },
     "node_modules/postcss-svgo": {
@@ -10215,9 +10309,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.0.tgz",
-      "integrity": "sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==",
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -10247,17 +10341,17 @@
       }
     },
     "node_modules/prism-react-renderer": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.3.tgz",
-      "integrity": "sha512-Viur/7tBTCH2HmYzwCHmt2rEFn+rdIWNIINXyg0StiISbDiIhHKhrFuEK8eMkKgvsIYSjgGqy/hNyucHp6FpoQ==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
+      "integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==",
       "peerDependencies": {
         "react": ">=0.14.9"
       }
     },
     "node_modules/prismjs": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
-      "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==",
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
       "engines": {
         "node": ">=6"
       }
@@ -10369,9 +10463,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
@@ -10695,15 +10789,14 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.3.tgz",
-      "integrity": "sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
         "path-to-regexp": "^1.7.0",
         "prop-types": "^15.6.2",
         "react-is": "^16.6.0",
@@ -10727,15 +10820,15 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.3.3",
+        "react-router": "5.3.4",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       },
@@ -10744,17 +10837,17 @@
       }
     },
     "node_modules/react-side-effect": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
-      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
       "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0"
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/react-textarea-autosize": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
-      "integrity": "sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
+      "integrity": "sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.2",
         "use-composed-ref": "^1.3.0",
@@ -10768,9 +10861,9 @@
       }
     },
     "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==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -10808,25 +10901,14 @@
       }
     },
     "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==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "dependencies": {
-        "minimatch": "3.0.4"
+        "minimatch": "^3.0.5"
       },
       "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": ">=6.0.0"
       }
     },
     "node_modules/regenerate": {
@@ -10835,9 +10917,9 @@
       "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==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "dependencies": {
         "regenerate": "^1.4.2"
       },
@@ -10846,14 +10928,14 @@
       }
     },
     "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=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "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==",
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
       }
@@ -10875,27 +10957,27 @@
       }
     },
     "node_modules/regexpu-core": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.0.1.tgz",
-      "integrity": "sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
       "dependencies": {
+        "@babel/regjsgen": "^0.8.0",
         "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.0.1",
-        "regjsgen": "^0.6.0",
-        "regjsparser": "^0.8.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.0.0"
+        "unicode-match-property-value-ecmascript": "^2.1.0"
       },
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/registry-auth-token": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
-      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.2.tgz",
+      "integrity": "sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==",
       "dependencies": {
-        "rc": "^1.2.8"
+        "rc": "1.2.8"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -10913,14 +10995,14 @@
       }
     },
     "node_modules/regjsgen": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
-      "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA=="
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
     },
     "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==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "dependencies": {
         "jsesc": "~0.5.0"
       },
@@ -11260,11 +11342,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
     "node_modules/resolve": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
-      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "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.8.1",
+        "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -11442,9 +11524,36 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "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=="
+      "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/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -11452,9 +11561,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.52.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.3.tgz",
-      "integrity": "sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==",
+      "version": "1.59.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.59.2.tgz",
+      "integrity": "sha512-jJyO6SmbzkJexF8MUorHx5tAilcgabioYxT/BHbY4+OvoqmbHxsYlrjZ8Adhqcgl6Zqwie0TgMXLCAmPFxXOuw==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -11468,9 +11577,9 @@
       }
     },
     "node_modules/sass-loader": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz",
-      "integrity": "sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz",
+      "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==",
       "dependencies": {
         "klona": "^2.0.4",
         "loader-utils": "^2.0.0",
@@ -11487,7 +11596,7 @@
       },
       "peerDependencies": {
         "fibers": ">= 3.1.0",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
         "sass": "^1.3.0",
         "webpack": "^4.36.0 || ^5.0.0"
       },
@@ -11569,9 +11678,9 @@
       "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==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
+      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
       "dependencies": {
         "node-forge": "^1"
       },
@@ -11580,9 +11689,9 @@
       }
     },
     "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==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -11612,6 +11721,22 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/semver/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/semver/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/send": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
@@ -11671,23 +11796,23 @@
       }
     },
     "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==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "dependencies": {
         "randombytes": "^2.1.0"
       }
     },
     "node_modules/serve-handler": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.3.tgz",
-      "integrity": "sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
       "dependencies": {
         "bytes": "3.0.0",
         "content-disposition": "0.5.2",
         "fast-url-parser": "1.1.3",
         "mime-types": "2.1.18",
-        "minimatch": "3.0.4",
+        "minimatch": "3.1.2",
         "path-is-inside": "1.0.2",
         "path-to-regexp": "2.2.1",
         "range-parser": "1.2.0"
@@ -11712,17 +11837,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/serve-handler/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/serve-handler/node_modules/path-to-regexp": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
@@ -11853,9 +11967,12 @@
       }
     },
     "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=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.0.tgz",
+      "integrity": "sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/shelljs": {
       "version": "0.8.5",
@@ -11927,6 +12044,11 @@
         "npm": ">=5.6.0"
       }
     },
+    "node_modules/sitemap/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -11954,9 +12076,9 @@
       }
     },
     "node_modules/sort-css-media-queries": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.0.4.tgz",
-      "integrity": "sha512-PAIsEK/XupCQwitjv7XxoMvYhT7EAfyzI3hsy/MyDgTvc+Ft55ctdkctJLOy6cQejaIC+zjpUL4djFVm2ivOOw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz",
+      "integrity": "sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA==",
       "engines": {
         "node": ">= 6.3.0"
       }
@@ -11994,7 +12116,8 @@
     "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=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
     "node_modules/space-separated-tokens": {
       "version": "1.1.5",
@@ -12046,7 +12169,8 @@
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
+      "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/state-toggle": {
       "version": "1.0.3",
@@ -12081,25 +12205,6 @@
         "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-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -12114,26 +12219,26 @@
       }
     },
     "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -12213,11 +12318,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-selector-parser": "^6.0.4"
       },
       "engines": {
@@ -12436,9 +12541,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
-      "integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.6.tgz",
+      "integrity": "sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -12453,15 +12558,15 @@
       }
     },
     "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==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz",
+      "integrity": "sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==",
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.16.5"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -12503,9 +12608,9 @@
       }
     },
     "node_modules/terser/node_modules/acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -12529,9 +12634,9 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
     "node_modules/tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
@@ -12604,9 +12709,12 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/traverse": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
-      "integrity": "sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw=="
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.7.tgz",
+      "integrity": "sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/tree-kill": {
       "version": "1.2.2",
@@ -12619,7 +12727,8 @@
     "node_modules/trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-      "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ=="
+      "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==",
+      "deprecated": "Use String.prototype.trim() instead"
     },
     "node_modules/trim-trailing-lines": {
       "version": "1.1.4",
@@ -12640,9 +12749,9 @@
       }
     },
     "node_modules/ts-node": {
-      "version": "10.8.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.8.1.tgz",
-      "integrity": "sha512-Wwsnao4DQoJsN034wePSg5nZiw4YKXf56mPIAeD6wVmiv+RytNSWqc2f3fKvcUoV+Yn2+yocD71VOfQHbmVX4g==",
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
       "dev": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
@@ -12683,9 +12792,9 @@
       }
     },
     "node_modules/ts-node/node_modules/acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -12701,9 +12810,9 @@
       "dev": true
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/type-fest": {
       "version": "0.20.2",
@@ -12728,6 +12837,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -12737,9 +12859,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
-      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12749,9 +12872,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "0.7.31",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
-      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",
+      "integrity": "sha512-cJMeh/eOILyGu0ejgTKB95yKT3zOenSe9UGE3vj6WfiOwgGYnmATUsnDixMFvdU+rNMvWih83hrUP8VwhF9yXQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -12814,17 +12937,17 @@
       }
     },
     "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==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
       "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==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "engines": {
         "node": ">=4"
       }
@@ -12999,6 +13122,31 @@
       "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
       "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
+      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "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/update-notifier": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
@@ -13048,9 +13196,9 @@
       }
     },
     "node_modules/uri-js/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==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
       "engines": {
         "node": ">=6"
       }
@@ -13296,9 +13444,9 @@
       }
     },
     "node_modules/wait-on/node_modules/rxjs": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz",
-      "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
+      "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -13338,20 +13486,20 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack": {
-      "version": "5.73.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.73.0.tgz",
-      "integrity": "sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==",
+      "version": "5.76.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
+      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
       "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.4.1",
+        "acorn": "^8.7.1",
         "acorn-import-assertions": "^1.7.6",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.9.3",
+        "enhanced-resolve": "^5.10.0",
         "es-module-lexer": "^0.9.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -13364,7 +13512,7 @@
         "schema-utils": "^3.1.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.1.3",
-        "watchpack": "^2.3.1",
+        "watchpack": "^2.4.0",
         "webpack-sources": "^3.2.3"
       },
       "bin": {
@@ -13384,10 +13532,11 @@
       }
     },
     "node_modules/webpack-bundle-analyzer": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz",
-      "integrity": "sha512-GUMZlM3SKwS8Z+CKeIFx7CVoHn3dXFcUAjT/dcZQQmfSZGvitPfMob2ipjai7ovFFqPvTqkEZ/leL4O0YOdAYQ==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
+      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
       "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
         "acorn": "^8.0.4",
         "acorn-walk": "^8.0.0",
         "chalk": "^4.1.0",
@@ -13406,9 +13555,9 @@
       }
     },
     "node_modules/webpack-bundle-analyzer/node_modules/acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -13461,9 +13610,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -13518,9 +13667,9 @@
       }
     },
     "node_modules/webpack-dev-server": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.2.tgz",
-      "integrity": "sha512-H95Ns95dP24ZsEzO6G9iT+PNw4Q7ltll1GfJHV4fKphuHWgKFzGHWi4alTlTnpk1SPPk41X+l2RB7rLfIhnB9Q==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
+      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -13534,7 +13683,7 @@
         "chokidar": "^3.5.3",
         "colorette": "^2.0.10",
         "compression": "^1.7.4",
-        "connect-history-api-fallback": "^1.6.0",
+        "connect-history-api-fallback": "^2.0.0",
         "default-gateway": "^6.0.3",
         "express": "^4.17.3",
         "graceful-fs": "^4.2.6",
@@ -13545,7 +13694,7 @@
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.1",
+        "selfsigned": "^2.1.1",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
@@ -13558,6 +13707,10 @@
       "engines": {
         "node": ">= 12.13.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
       "peerDependencies": {
         "webpack": "^4.37.0 || ^5.0.0"
       },
@@ -13568,9 +13721,9 @@
       }
     },
     "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==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -13599,9 +13752,9 @@
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/webpack-dev-server/node_modules/open": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
       "dependencies": {
         "define-lazy-prop": "^2.0.0",
         "is-docker": "^2.1.1",
@@ -13633,15 +13786,15 @@
       }
     },
     "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
-      "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
       "engines": {
         "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -13678,9 +13831,9 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
     },
     "node_modules/webpack/node_modules/acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -13723,9 +13876,9 @@
       }
     },
     "node_modules/webpackbar/node_modules/std-env": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.1.1.tgz",
-      "integrity": "sha512-/c645XdExBypL01TpFKiG/3RAa/Qmu+zRi0MwAmrdEkwHNuN0ebo8ccAXBBDa5Z0QOJgBskUIbuCK91x0sCVEw=="
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
+      "integrity": "sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA=="
     },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
@@ -13786,6 +13939,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/widest-line": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
@@ -13835,9 +14007,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
-      "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
       "engines": {
         "node": ">=8.3.0"
       },
@@ -13890,9 +14062,9 @@
       }
     },
     "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -13959,87 +14131,95 @@
   },
   "dependencies": {
     "@algolia/autocomplete-core": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.6.3.tgz",
-      "integrity": "sha512-dqQqRt01fX3YuVFrkceHsoCnzX0bLhrrg8itJI1NM68KjrPYQPYsE+kY8EZTCM4y8VDnhqJErR73xe/ZsV+qAA==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.7.4.tgz",
+      "integrity": "sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==",
+      "requires": {
+        "@algolia/autocomplete-shared": "1.7.4"
+      }
+    },
+    "@algolia/autocomplete-preset-algolia": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.4.tgz",
+      "integrity": "sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==",
       "requires": {
-        "@algolia/autocomplete-shared": "1.6.3"
+        "@algolia/autocomplete-shared": "1.7.4"
       }
     },
     "@algolia/autocomplete-shared": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.6.3.tgz",
-      "integrity": "sha512-UV46bnkTztyADFaETfzFC5ryIdGVb2zpAoYgu0tfcuYWjhg1KbLXveFffZIrGVoboqmAk1b+jMrl6iCja1i3lg=="
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.4.tgz",
+      "integrity": "sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg=="
     },
     "@algolia/cache-browser-local-storage": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.13.1.tgz",
-      "integrity": "sha512-UAUVG2PEfwd/FfudsZtYnidJ9eSCpS+LW9cQiesePQLz41NAcddKxBak6eP2GErqyFagSlnVXe/w2E9h2m2ttg==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.15.0.tgz",
+      "integrity": "sha512-uxxFhTWh4JJDb2+FFSmNMfEQ8p9o2vjSpU7iW007QX3OvqljPPN68lk3bpZVaG8pwr5MU1DqpkZ71FcQdVTjgQ==",
       "requires": {
-        "@algolia/cache-common": "4.13.1"
+        "@algolia/cache-common": "4.15.0"
       }
     },
     "@algolia/cache-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.13.1.tgz",
-      "integrity": "sha512-7Vaf6IM4L0Jkl3sYXbwK+2beQOgVJ0mKFbz/4qSxKd1iy2Sp77uTAazcX+Dlexekg1fqGUOSO7HS4Sx47ZJmjA=="
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.15.0.tgz",
+      "integrity": "sha512-Me3PbI4QurAM+3D+htIE0l1xt6+bl/18SG6Wc7bPQEZAtN7DTGz22HqhKNyLF2lR/cOfpaH7umXZlZEhIHf7gQ=="
     },
     "@algolia/cache-in-memory": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.13.1.tgz",
-      "integrity": "sha512-pZzybCDGApfA/nutsFK1P0Sbsq6fYJU3DwIvyKg4pURerlJM4qZbB9bfLRef0FkzfQu7W11E4cVLCIOWmyZeuQ==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.15.0.tgz",
+      "integrity": "sha512-B9mg1wd7CKMfpkbiTQ8KlcKkH6ut/goVaI6XmDCUczOOqeuZlV34tuEi7o3Xo1j66KWr/d9pMjjGYcoVPCVeOA==",
       "requires": {
-        "@algolia/cache-common": "4.13.1"
+        "@algolia/cache-common": "4.15.0"
       }
     },
     "@algolia/client-account": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.13.1.tgz",
-      "integrity": "sha512-TFLiZ1KqMiir3FNHU+h3b0MArmyaHG+eT8Iojio6TdpeFcAQ1Aiy+2gb3SZk3+pgRJa/BxGmDkRUwE5E/lv3QQ==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.15.0.tgz",
+      "integrity": "sha512-8wqI33HRZy5ydfFt6F5vMhtkOiAUhVfSCYXx4U3Go5RALqWLgVUp6wzOo0mr1z08POCkHDpbQMQvyayb1CZ/kw==",
       "requires": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/client-search": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/client-search": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "@algolia/client-analytics": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.13.1.tgz",
-      "integrity": "sha512-iOS1JBqh7xaL5x00M5zyluZ9+9Uy9GqtYHv/2SMuzNW1qP7/0doz1lbcsP3S7KBbZANJTFHUOfuqyRLPk91iFA==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.15.0.tgz",
+      "integrity": "sha512-jrPjEeNEIIQKeA1XCZXx3f3aybtwF7wjYlnfHbLARuZ9AuHzimOKjX0ZwqvMmvTsHivpcZ2rqY+j1E8HoH1ELA==",
       "requires": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/client-search": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/client-search": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "@algolia/client-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.13.1.tgz",
-      "integrity": "sha512-LcDoUE0Zz3YwfXJL6lJ2OMY2soClbjrrAKB6auYVMNJcoKZZ2cbhQoFR24AYoxnGUYBER/8B+9sTBj5bj/Gqbg==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.15.0.tgz",
+      "integrity": "sha512-PlsJMObZuYw4JlG5EhYv1PHDOv7n5mD5PzqFyoNfSOYaEPRZepa3W579ya29yOu3FZ0VGMNJmB7Q5v/+/fwvIw==",
       "requires": {
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "@algolia/client-personalization": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.13.1.tgz",
-      "integrity": "sha512-1CqrOW1ypVrB4Lssh02hP//YxluoIYXAQCpg03L+/RiXJlCs+uIqlzC0ctpQPmxSlTK6h07kr50JQoYH/TIM9w==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.15.0.tgz",
+      "integrity": "sha512-Bf0bhRAiNL9LWurzyHRH8UBi4fDt3VbCNkInxVngKQT1uCZWXecwoPWGhcSSpdanBqFJA/1WBt+BWx7a50Bhlg==",
       "requires": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "@algolia/client-search": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.13.1.tgz",
-      "integrity": "sha512-YQKYA83MNRz3FgTNM+4eRYbSmHi0WWpo019s5SeYcL3HUan/i5R09VO9dk3evELDFJYciiydSjbsmhBzbpPP2A==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.15.0.tgz",
+      "integrity": "sha512-dTwZD4u53WdmexnMcoO2Qd/+YCP3ESXKOtD2MryQ1a9dHwB2Y3Qob0kyS1PG82idwM3enbznvscI9Sf4o9PUWQ==",
       "requires": {
-        "@algolia/client-common": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+        "@algolia/client-common": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "@algolia/events": {
@@ -14048,47 +14228,47 @@
       "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
     },
     "@algolia/logger-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.13.1.tgz",
-      "integrity": "sha512-L6slbL/OyZaAXNtS/1A8SAbOJeEXD5JcZeDCPYDqSTYScfHu+2ePRTDMgUTY4gQ7HsYZ39N1LujOd8WBTmM2Aw=="
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.15.0.tgz",
+      "integrity": "sha512-D8OFwn/HpvQz66goIcjxOKsYBMuxiruxJ3cA/bnc0EiDvSA2P2z6bNQWgS5gbstuTZIJmbhr+53NyOxFkmMNAA=="
     },
     "@algolia/logger-console": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.13.1.tgz",
-      "integrity": "sha512-7jQOTftfeeLlnb3YqF8bNgA2GZht7rdKkJ31OCeSH2/61haO0tWPoNRjZq9XLlgMQZH276pPo0NdiArcYPHjCA==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.15.0.tgz",
+      "integrity": "sha512-pQOvVaRSEJQJRXKTnxEA6nN1hipSQadJJ4einw0nIlfMOGZh/kps1ybh8vRUlUGyfEuN/3dyFs0W3Ac7hIItlg==",
       "requires": {
-        "@algolia/logger-common": "4.13.1"
+        "@algolia/logger-common": "4.15.0"
       }
     },
     "@algolia/requester-browser-xhr": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.13.1.tgz",
-      "integrity": "sha512-oa0CKr1iH6Nc7CmU6RE7TnXMjHnlyp7S80pP/LvZVABeJHX3p/BcSCKovNYWWltgTxUg0U1o+2uuy8BpMKljwA==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.15.0.tgz",
+      "integrity": "sha512-va186EfALF+6msYZXaoBSxcnFCg3SoWJ+uv1yMyhQRJRe7cZSHWSVT3s40vmar90gxlBu80KMVwVlsvJhJv6ew==",
       "requires": {
-        "@algolia/requester-common": "4.13.1"
+        "@algolia/requester-common": "4.15.0"
       }
     },
     "@algolia/requester-common": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.13.1.tgz",
-      "integrity": "sha512-eGVf0ID84apfFEuXsaoSgIxbU3oFsIbz4XiotU3VS8qGCJAaLVUC5BUJEkiFENZIhon7hIB4d0RI13HY4RSA+w=="
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.15.0.tgz",
+      "integrity": "sha512-w0UUzxElbo4hrKg4QP/jiXDNbIJuAthxdlkos9nS8KAPK2XI3R9BlUjLz/ZVs4F9TDGI0mhjrNHhZ12KXcoyhg=="
     },
     "@algolia/requester-node-http": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.13.1.tgz",
-      "integrity": "sha512-7C0skwtLdCz5heKTVe/vjvrqgL/eJxmiEjHqXdtypcE5GCQCYI15cb+wC4ytYioZDMiuDGeVYmCYImPoEgUGPw==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.15.0.tgz",
+      "integrity": "sha512-eeEOhFtgwKcgAlKAZpgBRZJ0ILSEBCXxZ9uwfVWPD24W1b6z08gVoTJ6J7lCeCnJmudg+tMElDnGzHkjup9CJA==",
       "requires": {
-        "@algolia/requester-common": "4.13.1"
+        "@algolia/requester-common": "4.15.0"
       }
     },
     "@algolia/transporter": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.13.1.tgz",
-      "integrity": "sha512-pICnNQN7TtrcYJqqPEXByV8rJ8ZRU2hCiIKLTLRyNpghtQG3VAFk6fVtdzlNfdUGZcehSKGarPIZEHlQXnKjgw==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.15.0.tgz",
+      "integrity": "sha512-JoWR+ixG3EmA0UPntQFN/FV5TasYcYu93d5+oKzHFeZ6Z7rtW5Im9iy/Oh/ggk1AAN5fTdqKewtbBpdaYDbKsQ==",
       "requires": {
-        "@algolia/cache-common": "4.13.1",
-        "@algolia/logger-common": "4.13.1",
-        "@algolia/requester-common": "4.13.1"
+        "@algolia/cache-common": "4.15.0",
+        "@algolia/logger-common": "4.15.0",
+        "@algolia/requester-common": "4.15.0"
       }
     },
     "@ampproject/remapping": {
@@ -14101,37 +14281,37 @@
       }
     },
     "@babel/code-frame": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
-      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
+      "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.16.7"
+        "@babel/highlight": "^7.18.6"
       }
     },
     "@babel/compat-data": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.5.tgz",
-      "integrity": "sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg=="
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.0.tgz",
+      "integrity": "sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g=="
     },
     "@babel/core": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.5.tgz",
-      "integrity": "sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==",
-      "requires": {
-        "@ampproject/remapping": "^2.1.0",
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.18.2",
-        "@babel/helper-compilation-targets": "^7.18.2",
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helpers": "^7.18.2",
-        "@babel/parser": "^7.18.5",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.18.5",
-        "@babel/types": "^7.18.4",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.0.tgz",
+      "integrity": "sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==",
+      "requires": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.21.0",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-module-transforms": "^7.21.0",
+        "@babel/helpers": "^7.21.0",
+        "@babel/parser": "^7.21.0",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.21.0",
+        "@babel/types": "^7.21.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.1",
+        "json5": "^2.2.2",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -14143,21 +14323,22 @@
       }
     },
     "@babel/generator": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.2.tgz",
-      "integrity": "sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==",
+      "version": "7.21.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.1.tgz",
+      "integrity": "sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==",
       "requires": {
-        "@babel/types": "^7.18.2",
-        "@jridgewell/gen-mapping": "^0.3.0",
+        "@babel/types": "^7.21.0",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
       },
       "dependencies": {
         "@jridgewell/gen-mapping": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
-          "integrity": "sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==",
+          "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.0",
+            "@jridgewell/set-array": "^1.0.1",
             "@jridgewell/sourcemap-codec": "^1.4.10",
             "@jridgewell/trace-mapping": "^0.3.9"
           }
@@ -14165,30 +14346,31 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
-      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz",
-      "integrity": "sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==",
+      "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.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-explode-assignable-expression": "^7.18.6",
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz",
-      "integrity": "sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==",
-      "requires": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.20.2",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
+      "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
+      "requires": {
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-validator-option": "^7.18.6",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -14200,37 +14382,36 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz",
-      "integrity": "sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz",
+      "integrity": "sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-member-expression-to-functions": "^7.17.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-member-expression-to-functions": "^7.21.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/helper-split-export-declaration": "^7.18.6"
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.12.tgz",
-      "integrity": "sha512-b2aZrV4zvutr9AIa6/gA3wsZKRwTKYoDxYiFKcESS3Ug2GTXzwBEvMuuFLhCQpEnRXs1zng4ISAXSUxxKBIcxw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.0.tgz",
+      "integrity": "sha512-N+LaFW/auRSWdx7SHD/HiARwXQju1vXTW4fKr4u5SgBUTm51OKEjKgj+cs00ggW3kEvNqwErnlwuq7Y3xBe4eg==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "regexpu-core": "^5.0.1"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.3.1"
       }
     },
     "@babel/helper-define-polyfill-provider": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
-      "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
-      "requires": {
-        "@babel/helper-compilation-targets": "^7.13.0",
-        "@babel/helper-module-imports": "^7.12.13",
-        "@babel/helper-plugin-utils": "^7.13.0",
-        "@babel/traverse": "^7.13.0",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
+      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
+      "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",
@@ -14245,162 +14426,169 @@
       }
     },
     "@babel/helper-environment-visitor": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz",
-      "integrity": "sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ=="
+      "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.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz",
-      "integrity": "sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
-      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
       "requires": {
-        "@babel/template": "^7.16.7",
-        "@babel/types": "^7.17.0"
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.0"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
-      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
-      "integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
+      "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
       "requires": {
-        "@babel/types": "^7.17.0"
+        "@babel/types": "^7.21.0"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
-      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz",
-      "integrity": "sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+      "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
       "requires": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-simple-access": "^7.17.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.18.0",
-        "@babel/types": "^7.18.0"
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-simple-access": "^7.20.2",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.21.2",
+        "@babel/types": "^7.21.2"
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
-      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
-      "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA=="
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
+      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ=="
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
-      "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
+      "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.16.7",
-        "@babel/helper-wrap-function": "^7.16.8",
-        "@babel/types": "^7.16.8"
+        "@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.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.18.2.tgz",
-      "integrity": "sha512-XzAIyxx+vFnrOxiQrToSUOzUOn0e1J2Li40ntddek1Y69AXUTXoDJ40/D5RdjFu7s7qHiaeoTiempZcbuVXh2Q==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
+      "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
       "requires": {
-        "@babel/helper-environment-visitor": "^7.18.2",
-        "@babel/helper-member-expression-to-functions": "^7.17.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/traverse": "^7.18.2",
-        "@babel/types": "^7.18.2"
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.20.7",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.7",
+        "@babel/types": "^7.20.7"
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz",
-      "integrity": "sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
+      "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
       "requires": {
-        "@babel/types": "^7.18.2"
+        "@babel/types": "^7.20.2"
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz",
-      "integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
       "requires": {
-        "@babel/types": "^7.16.0"
+        "@babel/types": "^7.20.0"
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
-      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
+      "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.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+    },
     "@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
     },
     "@babel/helper-validator-option": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ=="
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ=="
     },
     "@babel/helper-wrap-function": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
-      "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
+      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
       "requires": {
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.8",
-        "@babel/types": "^7.16.8"
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.5",
+        "@babel/types": "^7.20.5"
       }
     },
     "@babel/helpers": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.2.tgz",
-      "integrity": "sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.0.tgz",
+      "integrity": "sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==",
       "requires": {
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.18.2",
-        "@babel/types": "^7.18.2"
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.21.0",
+        "@babel/types": "^7.21.0"
       }
     },
     "@babel/highlight": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.12.tgz",
-      "integrity": "sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==",
+      "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.16.7",
+        "@babel/helper-validator-identifier": "^7.18.6",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       },
@@ -14457,169 +14645,170 @@
       }
     },
     "@babel/parser": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
-      "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw=="
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.17.12",
-      "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.17.12.tgz",
-      "integrity": "sha512-xCJQXl4EeQ3J9C4yOmpTrtVGmzpm2iSzyxbkZHw7UCnZBftHpF/hpII80uWVyVrc40ytIClHjgWGTG1g/yB+aw==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.17.12.tgz",
-      "integrity": "sha512-/vt0hpIw0x4b6BLKUkwlvEoiGZYYLNZ96CzyHYPbtG2jZGz6LBe7/V+drYrc/d+ovrF9NBi0pmtvmNb/FsWtRQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
+      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
       }
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.17.12.tgz",
-      "integrity": "sha512-RWVvqD1ooLKP6IqWTA5GyFVX2isGEgC5iFxKzfYOIy/QEFdxYyCybBDtIGjipHpb9bDWHzcqGqFakf+mVmBTdQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
+      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-remap-async-to-generator": "^7.16.8",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       }
     },
     "@babel/plugin-proposal-class-properties": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.17.12.tgz",
-      "integrity": "sha512-U0mI9q8pW5Q9EaTHFPwSVusPMV/DV9Mm8p7csqROFLtIE9rBF5piLqyrBGigftALrBcsBGu4m38JneAe7ZDLXw==",
+      "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.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@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.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.0.tgz",
-      "integrity": "sha512-t+8LsRMMDE74c6sV7KShIw13sqbqd58tlqNrsWoWBTIMw7SVQ0cZ905wLNS/FBCy/3PyooRHLFFlfrUNyyz5lA==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
+      "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz",
-      "integrity": "sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==",
+      "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.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz",
-      "integrity": "sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==",
+      "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.17.12",
+        "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-json-strings": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.17.12.tgz",
-      "integrity": "sha512-rKJ+rKBoXwLnIn7n6o6fulViHMrOThz99ybH+hKHcOZbnN14VuMnH9fo2eHE69C8pO4uX1Q7t2HYYIDmv8VYkg==",
+      "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.17.12",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.17.12.tgz",
-      "integrity": "sha512-EqFo2s1Z5yy+JeJu7SFfbIUtToJTVlC61/C7WLKDntSw4Sz6JNAIfL7zQ74VvirxpjB5kz/kIx0gCcb+5OEo2Q==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
+      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.17.12.tgz",
-      "integrity": "sha512-ws/g3FSGVzv+VH86+QvgtuJL/kR67xaEIF2x0iPqdDfYW6ra6JF3lKVBkWynRLcNtIC1oCTfDRVxmm2mKzy+ag==",
+      "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.17.12",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
-      "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
+      "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.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.0.tgz",
-      "integrity": "sha512-nbTv371eTrFabDfHLElkn9oyf9VG+VKK6WMzhY2o4eHKaG19BToD9947zzGMO6I/Irstx9d8CwX6njPNIAR/yw==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+      "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
       "requires": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-compilation-targets": "^7.17.10",
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.17.12"
+        "@babel/plugin-transform-parameters": "^7.20.7"
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz",
-      "integrity": "sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==",
+      "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.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.17.12.tgz",
-      "integrity": "sha512-7wigcOs/Z4YWlK7xxjkvaIw84vGhDv/P1dFGQap0nHkc8gFKY/r+hXc8Qzf5k1gY7CvGIcHqAnOagVKJJ1wVOQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-private-methods": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.17.12.tgz",
-      "integrity": "sha512-SllXoxo19HmxhDWm3luPz+cPhtoTSKLJE9PXshsfrOzBqs60QP0r8OaJItrPhAj0d7mZMnNF0Y1UUggCDgMz1A==",
+      "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.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@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.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.17.12.tgz",
-      "integrity": "sha512-/6BtVi57CJfrtDNKfK5b66ydK2J5pXUKBKSPD2G1whamMuEnZWgoOIfO8Vf9F/DoD4izBLD/Au4NMQfruzzykg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz",
+      "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-create-class-features-plugin": "^7.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12",
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       }
     },
     "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.17.12.tgz",
-      "integrity": "sha512-Wb9qLjXf3ZazqXA7IvI7ozqRIXIGPtSo+L5coFmEkhTQK18ao4UDDD0zdTGAarmbLj2urpRwrc6893cu5Bfh0A==",
+      "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.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-syntax-async-generators": {
@@ -14663,11 +14852,11 @@
       }
     },
     "@babel/plugin-syntax-import-assertions": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.17.12.tgz",
-      "integrity": "sha512-n/loy2zkq9ZEM8tEOwON9wTQSTNDTDEz6NujPtJGLU7qObzT1N4c4YZZf8E6ATB2AjNQg/Ib2AIpO03EZaCehw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-syntax-json-strings": {
@@ -14679,11 +14868,11 @@
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz",
-      "integrity": "sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-syntax-logical-assignment-operators": {
@@ -14751,324 +14940,293 @@
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.12.tgz",
-      "integrity": "sha512-TYY0SXFiO31YXtNg3HtFwNJHjLsAyIIhAhNWkQ5whPPS7HWUFlg9z0Ta4qAQNjQbP1wsSt/oKkmZ/4/WWdMUpw==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
+      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.17.12.tgz",
-      "integrity": "sha512-PHln3CNi/49V+mza4xMwrg+WGYevSF1oaiXaC2EQfdp4HWlSjRsrDXWJiQBKpP7749u6vQ9mcry2uuFOv5CXvA==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
+      "integrity": "sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.17.12.tgz",
-      "integrity": "sha512-J8dbrWIOO3orDzir57NRsjg4uxucvhby0L/KZuGsWDj0g7twWK3g7JhJhOrXtuXiw8MeiSdJ3E0OW9H8LYEzLQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
       "requires": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-remap-async-to-generator": "^7.16.8"
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz",
-      "integrity": "sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.4.tgz",
-      "integrity": "sha512-+Hq10ye+jlvLEogSOtq4mKvtk7qwcUQ1f0Mrueai866C82f844Yom2cttfJdMdqRLTxWpsbfbkIkOIfovyUQXw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
+      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.4.tgz",
-      "integrity": "sha512-e42NSG2mlKWgxKUAD9EJJSkZxR67+wZqzNxLSpc51T8tRU5SLFHsPmgYR5yr7sdgX4u+iHA1C5VafJ6AyImV3A==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.18.2",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-replace-supers": "^7.18.2",
-        "@babel/helper-split-export-declaration": "^7.16.7",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
+      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.17.12.tgz",
-      "integrity": "sha512-a7XINeplB5cQUWMg1E/GI1tFz3LfK021IjV1rj1ypE+R7jHm+pIHmHl25VNkZxtx9uuYp7ThGk8fur1HHG7PgQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz",
+      "integrity": "sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/template": "^7.20.7"
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.0.tgz",
-      "integrity": "sha512-Mo69klS79z6KEfrLg/1WkmVnB8javh75HX4pi2btjvlIoasuxilEyjtsQW6XPrubNd7AQy0MMaNIaQE4e7+PQw==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz",
+      "integrity": "sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz",
-      "integrity": "sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.17.12.tgz",
-      "integrity": "sha512-EA5eYFUG6xeerdabina/xIoB95jJ17mAkR8ivx6ZSu9frKShBjpOGZPn511MTDTkiCO+zXnzNczvUM69YSf3Zw==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz",
-      "integrity": "sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.18.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.1.tgz",
-      "integrity": "sha512-+TTB5XwvJ5hZbO8xvl2H4XaMDOAK57zF4miuC9qQJgysPNEAZZ9Z69rdF5LJkozGdZrjBIUAIyKUWRMmebI7vg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz",
+      "integrity": "sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz",
-      "integrity": "sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==",
+      "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.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@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.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.17.12.tgz",
-      "integrity": "sha512-8iRkvaTjJciWycPIZ9k9duu663FT7VrBdNqNgxnVXEFwOIp55JWcZd23VBRySYbnS3PwQ3rGiabJBBBGj5APmQ==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz",
-      "integrity": "sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.0.tgz",
-      "integrity": "sha512-h8FjOlYmdZwl7Xm2Ug4iX2j7Qy63NANI+NQVWQzv6r25fqgg7k2dZl03p95kvqNclglHs4FZ+isv4p1uXMA+QA==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "dependencies": {
-        "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/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.2.tgz",
-      "integrity": "sha512-f5A865gFPAJAEE0K7F/+nm5CmAE3y8AWlMBG9unu5j9+tk50UQVK0QS8RNxSp7MJf0wh97uYyLWt3Zvu71zyOQ==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz",
+      "integrity": "sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-simple-access": "^7.18.2",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "dependencies": {
-        "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/helper-module-transforms": "^7.21.2",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-simple-access": "^7.20.2"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.5.tgz",
-      "integrity": "sha512-SEewrhPpcqMF1V7DhnEbhVJLrC+nnYfe1E0piZMZXBpxi9WvZqWGwpsk7JYP7wPWeqaBh4gyKlBhHJu3uz5g4Q==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
+      "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
       "requires": {
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-module-transforms": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "dependencies": {
-        "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/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-identifier": "^7.19.1"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.0.tgz",
-      "integrity": "sha512-d/zZ8I3BWli1tmROLxXLc9A6YXvGK8egMxHp+E/rRwMh1Kip0AP77VwZae3snEJ33iiWwvNv2+UIIhfalqhzZA==",
+      "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.0",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.12.tgz",
-      "integrity": "sha512-vWoWFM5CKaTeHrdUJ/3SIOTRV+MBVGybOC9mhJkaprGNt5demMymDW24yC74avb915/mIRe3TgNb/d8idvnCRA==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
+      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.17.12",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.5.tgz",
-      "integrity": "sha512-TuRL5uGW4KXU6OsRj+mLp9BM7pO8e7SGNTEokQRRxHFkXYMFiy2jlKSZPFtI/mKORDzciH+hneskcSOp0gU8hg==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz",
-      "integrity": "sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==",
+      "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.16.7",
-        "@babel/helper-replace-supers": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.17.12.tgz",
-      "integrity": "sha512-6qW4rWo1cyCdq1FkYri7AHpauchbGLXpdwnYsfxFb+KtddHENfsY5JZb35xUwkK5opOLcJ3BNd2l7PhRYGlwIA==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz",
+      "integrity": "sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz",
-      "integrity": "sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-react-constant-elements": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.12.tgz",
-      "integrity": "sha512-maEkX2xs2STuv2Px8QuqxqjhV2LsFobT1elCgyU5704fcyTu9DyD/bJXxD/mrRiVyhpHweOQ00OJ5FKhHq9oEw==",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz",
+      "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-react-display-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz",
-      "integrity": "sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-react-jsx": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.12.tgz",
-      "integrity": "sha512-Lcaw8bxd1DKht3thfD4A12dqo1X16he1Lm8rIv8sTwjAYNInRS1qHa9aJoqvzpscItXvftKDCfaEQzwoVyXpEQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz",
+      "integrity": "sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/plugin-syntax-jsx": "^7.17.12",
-        "@babel/types": "^7.17.12"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-jsx": "^7.18.6",
+        "@babel/types": "^7.21.0"
       }
     },
     "@babel/plugin-transform-react-jsx-development": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz",
-      "integrity": "sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==",
+      "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.16.7"
+        "@babel/plugin-transform-react-jsx": "^7.18.6"
       }
     },
     "@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.0.tgz",
-      "integrity": "sha512-6+0IK6ouvqDn9bmEG7mEyF/pwlJXVj5lwydybpyyH3D0A7Hftk+NCTdYjnLNZksn261xaOV5ksmp20pQEmc2RQ==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.0.tgz",
-      "integrity": "sha512-C8YdRw9uzx25HSIzwA7EM7YP0FhCe5wNvJbZzjVNHHPGVcDJ3Aie+qGYYdS1oVQgn+B3eAIJbWFLrJ4Jipv7nw==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz",
+      "integrity": "sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "regenerator-transform": "^0.15.0"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "regenerator-transform": "^0.15.1"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.17.12.tgz",
-      "integrity": "sha512-1KYqwbJV3Co03NIi14uEHW8P50Md6KqFgt0FfpHdK6oyAHQVTosgPuPSiWud1HX0oYJ1hGRRlk0fP87jFpqXZA==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-runtime": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.5.tgz",
-      "integrity": "sha512-Q17hHxXr2fplrE+5BSC1j1Fo5cOA8YeP8XW3/1paI8MzF/faZGh0MaH1KC4jLAvqLPamQWHB5/B7KqSLY1kuHA==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.5.0",
-        "babel-plugin-polyfill-regenerator": "^0.3.0",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz",
+      "integrity": "sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -15080,105 +15238,105 @@
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz",
-      "integrity": "sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.17.12.tgz",
-      "integrity": "sha512-9pgmuQAtFi3lpNUstvG9nGfk9DkrdmWNp9KeKPFmuZCpEnxRzYlS8JgwPjYj+1AWDOSvoGN0H30p1cBOmT/Svg==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz",
-      "integrity": "sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==",
+      "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.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.2.tgz",
-      "integrity": "sha512-/cmuBVw9sZBGZVOMkpAEaVLwm4JmK2GZ1dFKOGGpMzEHWFmyZZ59lUU0PdRr8YNYeQdNzTDwuxP2X2gzydTc9g==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.17.12.tgz",
-      "integrity": "sha512-Q8y+Jp7ZdtSPXCThB6zjQ74N3lj0f6TDh1Hnf5B+sYlzQ8i5Pjp8gW0My79iekSpT4WnI06blqP6DT0OmaXXmw==",
+      "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.17.12"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.4.tgz",
-      "integrity": "sha512-l4vHuSLUajptpHNEOUDEGsnpl9pfRLsN1XUoDQDD/YBuXTM+v37SHGS+c6n4jdcZy96QtuUuSvZYMLSSsjH8Mw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz",
+      "integrity": "sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.0",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/plugin-syntax-typescript": "^7.17.12"
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
       }
     },
     "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
-      "integrity": "sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz",
-      "integrity": "sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==",
+      "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.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/preset-env": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.2.tgz",
-      "integrity": "sha512-PfpdxotV6afmXMU47S08F9ZKIm2bJIQ0YbAAtDfIENX7G1NUAXigLREh69CWDjtgUy7dYn7bsMzkgdtAlmS68Q==",
-      "requires": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-compilation-targets": "^7.18.2",
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.17.12",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.17.12",
-        "@babel/plugin-proposal-async-generator-functions": "^7.17.12",
-        "@babel/plugin-proposal-class-properties": "^7.17.12",
-        "@babel/plugin-proposal-class-static-block": "^7.18.0",
-        "@babel/plugin-proposal-dynamic-import": "^7.16.7",
-        "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
-        "@babel/plugin-proposal-json-strings": "^7.17.12",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.17.12",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-        "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
-        "@babel/plugin-proposal-optional-chaining": "^7.17.12",
-        "@babel/plugin-proposal-private-methods": "^7.17.12",
-        "@babel/plugin-proposal-private-property-in-object": "^7.17.12",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.17.12",
+      "version": "7.20.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
+      "integrity": "sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==",
+      "requires": {
+        "@babel/compat-data": "^7.20.1",
+        "@babel/helper-compilation-targets": "^7.20.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@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.20.1",
+        "@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.20.2",
+        "@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.17.12",
+        "@babel/plugin-syntax-import-assertions": "^7.20.0",
         "@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",
@@ -15188,44 +15346,44 @@
         "@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.17.12",
-        "@babel/plugin-transform-async-to-generator": "^7.17.12",
-        "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
-        "@babel/plugin-transform-block-scoping": "^7.17.12",
-        "@babel/plugin-transform-classes": "^7.17.12",
-        "@babel/plugin-transform-computed-properties": "^7.17.12",
-        "@babel/plugin-transform-destructuring": "^7.18.0",
-        "@babel/plugin-transform-dotall-regex": "^7.16.7",
-        "@babel/plugin-transform-duplicate-keys": "^7.17.12",
-        "@babel/plugin-transform-exponentiation-operator": "^7.16.7",
-        "@babel/plugin-transform-for-of": "^7.18.1",
-        "@babel/plugin-transform-function-name": "^7.16.7",
-        "@babel/plugin-transform-literals": "^7.17.12",
-        "@babel/plugin-transform-member-expression-literals": "^7.16.7",
-        "@babel/plugin-transform-modules-amd": "^7.18.0",
-        "@babel/plugin-transform-modules-commonjs": "^7.18.2",
-        "@babel/plugin-transform-modules-systemjs": "^7.18.0",
-        "@babel/plugin-transform-modules-umd": "^7.18.0",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.17.12",
-        "@babel/plugin-transform-new-target": "^7.17.12",
-        "@babel/plugin-transform-object-super": "^7.16.7",
-        "@babel/plugin-transform-parameters": "^7.17.12",
-        "@babel/plugin-transform-property-literals": "^7.16.7",
-        "@babel/plugin-transform-regenerator": "^7.18.0",
-        "@babel/plugin-transform-reserved-words": "^7.17.12",
-        "@babel/plugin-transform-shorthand-properties": "^7.16.7",
-        "@babel/plugin-transform-spread": "^7.17.12",
-        "@babel/plugin-transform-sticky-regex": "^7.16.7",
-        "@babel/plugin-transform-template-literals": "^7.18.2",
-        "@babel/plugin-transform-typeof-symbol": "^7.17.12",
-        "@babel/plugin-transform-unicode-escapes": "^7.16.7",
-        "@babel/plugin-transform-unicode-regex": "^7.16.7",
+        "@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.20.2",
+        "@babel/plugin-transform-classes": "^7.20.2",
+        "@babel/plugin-transform-computed-properties": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.20.2",
+        "@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.19.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
+        "@babel/plugin-transform-new-target": "^7.18.6",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-parameters": "^7.20.1",
+        "@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.19.0",
+        "@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.10",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
         "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.18.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.5.0",
-        "babel-plugin-polyfill-regenerator": "^0.3.0",
-        "core-js-compat": "^3.22.1",
+        "@babel/types": "^7.20.2",
+        "babel-plugin-polyfill-corejs2": "^0.3.3",
+        "babel-plugin-polyfill-corejs3": "^0.6.0",
+        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "core-js-compat": "^3.25.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -15249,78 +15407,84 @@
       }
     },
     "@babel/preset-react": {
-      "version": "7.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.17.12.tgz",
-      "integrity": "sha512-h5U+rwreXtZaRBEQhW1hOJLMq8XNJBQ/9oymXiCXTuT/0uOwpbT0gUt+sXeOqoXBgNuUKI7TaObVwoEyWkpFgA==",
+      "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.17.12",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-transform-react-display-name": "^7.16.7",
-        "@babel/plugin-transform-react-jsx": "^7.17.12",
-        "@babel/plugin-transform-react-jsx-development": "^7.16.7",
-        "@babel/plugin-transform-react-pure-annotations": "^7.16.7"
+        "@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.17.12",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.17.12.tgz",
-      "integrity": "sha512-S1ViF8W2QwAKUGJXxP9NAfNaqGDdEBJKpYkxHf5Yy2C4NPPzXGeR3Lhk7G8xJaaLcFTRfNjVbtbVtm8Gb0mqvg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz",
+      "integrity": "sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.17.12",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-transform-typescript": "^7.17.12"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-transform-typescript": "^7.21.0"
       }
     },
+    "@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+    },
     "@babel/runtime": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
-      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/runtime-corejs3": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz",
-      "integrity": "sha512-l4ddFwrc9rnR+EJsHsh+TJ4A35YqQz/UqcjtlX2ov53hlJYG5CxtQmNZxyajwDVmCxwy++rtvGU5HazCK4W41Q==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.21.0.tgz",
+      "integrity": "sha512-TDD4UJzos3JJtM+tHX+w2Uc+KWj7GV+VKKFdMVd2Rx8sdA19hcc3P3AHFYd5LVOw+pYuSd5lICC3gm52B6Rwxw==",
       "requires": {
-        "core-js-pure": "^3.20.2",
-        "regenerator-runtime": "^0.13.4"
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/template": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
-      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
       "requires": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/parser": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7"
       }
     },
     "@babel/traverse": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.5.tgz",
-      "integrity": "sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==",
-      "requires": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.18.2",
-        "@babel/helper-environment-visitor": "^7.18.2",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.18.5",
-        "@babel/types": "^7.18.4",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.2.tgz",
+      "integrity": "sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==",
+      "requires": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.21.1",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.21.2",
+        "@babel/types": "^7.21.2",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.4.tgz",
-      "integrity": "sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
+      "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -15345,18 +15509,24 @@
         }
       }
     },
+    "@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
+    },
     "@docsearch/css": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.1.0.tgz",
-      "integrity": "sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA=="
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.3.tgz",
+      "integrity": "sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg=="
     },
     "@docsearch/react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.1.0.tgz",
-      "integrity": "sha512-bjB6ExnZzf++5B7Tfoi6UXgNwoUnNOfZ1NyvnvPhWgCMy5V/biAtLL4o7owmZSYdAKeFSvZ5Lxm0is4su/dBWg==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.3.tgz",
+      "integrity": "sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==",
       "requires": {
-        "@algolia/autocomplete-core": "1.6.3",
-        "@docsearch/css": "3.1.0",
+        "@algolia/autocomplete-core": "1.7.4",
+        "@algolia/autocomplete-preset-algolia": "1.7.4",
+        "@docsearch/css": "3.3.3",
         "algoliasearch": "^4.0.0"
       }
     },
@@ -15903,8 +16073,7 @@
     "@ionic-internal/docusaurus-plugin-tag-manager": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@ionic-internal/docusaurus-plugin-tag-manager/-/docusaurus-plugin-tag-manager-2.0.0.tgz",
-      "integrity": "sha512-jiJI8dWNRBVVoPOdVjjM9MqjOfMA96BZdken6JMQY0eLDg5N5wwm3MHYTVGebLugXIfCflb2hD+Q5cZik1r0hg==",
-      "requires": {}
+      "integrity": "sha512-jiJI8dWNRBVVoPOdVjjM9MqjOfMA96BZdken6JMQY0eLDg5N5wwm3MHYTVGebLugXIfCflb2hD+Q5cZik1r0hg=="
     },
     "@ionic-internal/ionic-ds": {
       "version": "7.1.0",
@@ -15918,8 +16087,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz",
       "integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
@@ -15931,14 +16099,14 @@
       }
     },
     "@jridgewell/resolve-uri": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz",
-      "integrity": "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA=="
+      "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.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz",
-      "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ=="
+      "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",
@@ -15950,11 +16118,11 @@
       },
       "dependencies": {
         "@jridgewell/gen-mapping": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
-          "integrity": "sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==",
+          "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.0",
+            "@jridgewell/set-array": "^1.0.1",
             "@jridgewell/sourcemap-codec": "^1.4.10",
             "@jridgewell/trace-mapping": "^0.3.9"
           }
@@ -15962,17 +16130,17 @@
       }
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
-      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w=="
+      "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.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz",
-      "integrity": "sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==",
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
     "@leichtgewicht/ip-codec": {
@@ -16052,8 +16220,7 @@
     "@mdx-js/react": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
-      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-      "requires": {}
+      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg=="
     },
     "@mdx-js/runtime": {
       "version": "1.6.22",
@@ -16099,51 +16266,51 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
     "@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
     "@prismicio/client": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.5.1.tgz",
-      "integrity": "sha512-SrluBNcTQ34UZI1oa+DLTWohaE8U2BU2QRpjZ9GOYa9Kty1RqWxFxr+qUTk7LS0QSbmVPEq1AngL5IR2HFZw2A==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.7.3.tgz",
+      "integrity": "sha512-zQVZhuQDYIgdaY636u+QNk2tvvbtpkaKsEiLT0Ef51nFW/y5fqpOG5U0eU3cVsikZaYNlZ17x6O1wmvVCLdimQ==",
       "requires": {
-        "@prismicio/helpers": "^2.3.0",
-        "@prismicio/types": "^0.1.27"
+        "@prismicio/helpers": "^2.3.8",
+        "@prismicio/types": "^0.2.7"
       }
     },
     "@prismicio/helpers": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.1.tgz",
-      "integrity": "sha512-J37WpIUINZ0wT3a2h4fc9ATZqjmQjziPwjETG7QLYEVULpQXsWbgM+C6aoOqdlRwCbZ3Wfhel26+++ZaqOX/0Q==",
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.9.tgz",
+      "integrity": "sha512-p7Y1sG83A2YPZvptfAzuZA8xH1bdM2wGRjqSKW9Qa0rAnBq2OfVKRvwl9OMCZML4eLUMxSEUAEWRVSoKpQnJvA==",
       "requires": {
-        "@prismicio/richtext": "^2.0.1",
-        "@prismicio/types": "^0.1.27",
-        "escape-html": "^1.0.3",
+        "@prismicio/richtext": "^2.1.4",
+        "@prismicio/types": "^0.2.7",
         "imgix-url-builder": "^0.0.3"
       }
     },
     "@prismicio/react": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.4.2.tgz",
-      "integrity": "sha512-KyCZBdJosE93S7sl+Z//eDdbT7vYNGNZ60rOs1VETbDXJtJhh7ymSZul5cvb8MrSrH8yn9DiR4rGVVXLobnHSA==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.5.2.tgz",
+      "integrity": "sha512-X00mT3/mHDnnb9NKUeAZnBWDDngXhr84RVzh9+eSeZjJKIVYEHHgfZqex4R6LgjZzeueaGp0UCLhwrUeiRp5DA==",
       "requires": {
-        "@prismicio/helpers": "^2.3.1",
-        "@prismicio/richtext": "^2.0.1"
+        "@prismicio/helpers": "^2.3.8",
+        "@prismicio/richtext": "^2.1.3",
+        "@prismicio/types": "^0.2.7"
       }
     },
     "@prismicio/richtext": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.0.tgz",
-      "integrity": "sha512-uxJaR3soPr356stoLEIcgn+68lfolwxRmlDLTF4gYDcF30rB0YFLPcdRJmhtkU6LGZXIhwUUmwMWXkhT+DV3hA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.4.tgz",
+      "integrity": "sha512-hyC8XItj+2yMmLGNjg9xGA/lRMO5UgbPF132VFrpZHzHhtIKvHN3iYxCZxnrEoPaTcT6JjA8vWyYLjmmB49bvw==",
       "requires": {
-        "@prismicio/types": "^0.1.22"
+        "@prismicio/types": "^0.2.7"
       }
     },
     "@prismicio/types": {
-      "version": "0.1.29",
-      "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.1.29.tgz",
-      "integrity": "sha512-wp7DHqMK0FDMcFQfJbqTAzWNBkM6/rRq71jMw6x9m07nWCUqytJQQKg6/15uduIeSqPXmyfJW21drsmChGaxsQ=="
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.7.tgz",
+      "integrity": "sha512-xHPBWg+lPcl8U97VB/2oYK3MJlQoVPZq91hbeQO8WRyvq+zgpNST3xFOTk8SkQpgoH6wd50AxGZELvPrpojajQ=="
     },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
@@ -16173,9 +16340,9 @@
       }
     },
     "@sideway/formula": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.0.tgz",
-      "integrity": "sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
     },
     "@sideway/pinpoint": {
       "version": "2.0.0",
@@ -16198,9 +16365,9 @@
       }
     },
     "@stackblitz/sdk": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.8.0.tgz",
-      "integrity": "sha512-hbS4CpQVF3bxJ+ZD8qu8lAjTZVLTPToLbMtgxbxUmp1AIgqm7i0gMFM1POBA8BqY84CT1A3z74gdCd1bsro7qA=="
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.8.2.tgz",
+      "integrity": "sha512-3aTg0Tb9dNs1huPkpdYxPEX/yc8A28eZneUMOEJzOLi7EJwl5onr9gCAVjIOkN4WLYu1iBSiJiGBYT629bZIJQ=="
     },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
@@ -16333,9 +16500,9 @@
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
     },
     "@tsconfig/docusaurus": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@tsconfig/docusaurus/-/docusaurus-1.0.6.tgz",
-      "integrity": "sha512-1QxDaP54hpzM6bq9E+yFEo4F9WbWHhsDe4vktZXF/iDlc9FqGr9qlg+3X/nuKQXx8QxHV7ue8NXFazzajsxFBA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@tsconfig/docusaurus/-/docusaurus-1.0.7.tgz",
+      "integrity": "sha512-ffTXxGIP/IRMCjuzHd6M4/HdIrw1bMfC7Bv8hMkTadnePkpe0lG0oDSdbRpSDZb2rQMAgpbWiR10BvxvNYwYrg==",
       "dev": true
     },
     "@tsconfig/node10": {
@@ -16345,15 +16512,15 @@
       "dev": true
     },
     "@tsconfig/node12": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.10.tgz",
-      "integrity": "sha512-N+srakvPaYMGkwjNDx3ASx65Zl3QG8dJgVtIB+YMOkucU+zctlv/hdP5250VKdDHSDoW9PFZoCqbqNcAPjCjXA==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
       "dev": true
     },
     "@tsconfig/node14": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.2.tgz",
-      "integrity": "sha512-YwrUA5ysDXHFYfL0Xed9x3sNS4P+aKlCOnnbqUa2E5HdQshHFleCJVrj1PlGTb4GgFUCDyte1v3JWLy2sz8Oqg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
       "dev": true
     },
     "@tsconfig/node16": {
@@ -16397,18 +16564,18 @@
       }
     },
     "@types/eslint": {
-      "version": "8.4.3",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.3.tgz",
-      "integrity": "sha512-YP1S7YJRMPs+7KZKDb9G63n8YejIwW9BALq7a5j2+H4yl6iOv9CB29edho+cuFRrvmJbbaH2yiVChKLJVysDGw==",
+      "version": "8.21.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
+      "integrity": "sha512-rc9K8ZpVjNcLs8Fp0dkozd5Pt2Apk1glO4Vgz8ix1u6yFByxfqo5Yavpy65o+93TAe24jr7v+eSBtFLvOQtCRQ==",
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
     "@types/eslint-scope": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
-      "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
+      "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": "*"
@@ -16420,20 +16587,20 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
     },
     "@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==",
+      "version": "4.17.17",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
+      "integrity": "sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==",
       "requires": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.18",
+        "@types/express-serve-static-core": "^4.17.33",
         "@types/qs": "*",
         "@types/serve-static": "*"
       }
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.29",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.29.tgz",
-      "integrity": "sha512-uMd++6dMKS32EOuw1Uli3e3BPgdLIXmezcfHv7N4c1s3gkhikBplORPpMq3fuWkxncZN1reb16d5n8yhQ80x7Q==",
+      "version": "4.17.33",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz",
+      "integrity": "sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==",
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -16465,9 +16632,9 @@
       "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==",
+      "version": "1.17.10",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
+      "integrity": "sha512-Qs5aULi+zV1bwKAg5z1PWnDXWmsn+LxIvUGv6E2+OOMYhclZMO+OXd9pYVf2gLykf2I7IV2u7oTHwChPNsvJ7g==",
       "requires": {
         "@types/node": "*"
       }
@@ -16486,14 +16653,14 @@
       }
     },
     "@types/mime": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
-      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "@types/node": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.43.tgz",
-      "integrity": "sha512-jnUpgw8fL9kP2iszfIDyBQtw5Mf4/XSqy0Loc1J9pI14ejL83XcCEvSf50Gs/4ET0I9VCCDoOfufQysj0S66xA=="
+      "version": "18.15.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.0.tgz",
+      "integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -16526,9 +16693,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "17.0.45",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz",
-      "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==",
+      "version": "17.0.53",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.53.tgz",
+      "integrity": "sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -16536,18 +16703,18 @@
       }
     },
     "@types/react-helmet": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.5.tgz",
-      "integrity": "sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
+      "integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
       "dev": true,
       "requires": {
         "@types/react": "*"
       }
     },
     "@types/react-router": {
-      "version": "5.1.18",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
-      "integrity": "sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==",
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
       "dev": true,
       "requires": {
         "@types/history": "^4.7.11",
@@ -16603,11 +16770,11 @@
       }
     },
     "@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==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
+      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
       "requires": {
-        "@types/mime": "^1",
+        "@types/mime": "*",
         "@types/node": "*"
       }
     },
@@ -16625,9 +16792,9 @@
       "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
     },
     "@types/ws": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
-      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
       "requires": {
         "@types/node": "*"
       }
@@ -16790,20 +16957,17 @@
     "acorn-dynamic-import": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
-      "requires": {}
+      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
     },
     "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==",
-      "requires": {}
+      "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==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -16811,9 +16975,9 @@
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
     },
     "address": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.0.tgz",
-      "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA=="
     },
     "aggregate-error": {
       "version": "3.1.0",
@@ -16844,9 +17008,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -16864,34 +17028,33 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "algoliasearch": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.13.1.tgz",
-      "integrity": "sha512-dtHUSE0caWTCE7liE1xaL+19AFf6kWEcyn76uhcitWpntqvicFHXKFoZe5JJcv9whQOTRM6+B8qJz6sFj+rDJA==",
-      "requires": {
-        "@algolia/cache-browser-local-storage": "4.13.1",
-        "@algolia/cache-common": "4.13.1",
-        "@algolia/cache-in-memory": "4.13.1",
-        "@algolia/client-account": "4.13.1",
-        "@algolia/client-analytics": "4.13.1",
-        "@algolia/client-common": "4.13.1",
-        "@algolia/client-personalization": "4.13.1",
-        "@algolia/client-search": "4.13.1",
-        "@algolia/logger-common": "4.13.1",
-        "@algolia/logger-console": "4.13.1",
-        "@algolia/requester-browser-xhr": "4.13.1",
-        "@algolia/requester-common": "4.13.1",
-        "@algolia/requester-node-http": "4.13.1",
-        "@algolia/transporter": "4.13.1"
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.15.0.tgz",
+      "integrity": "sha512-+vgKQF5944dYsz9zhKk07JbOYeNdKisoD5GeG0woBL3nLzbn2a+nGwki60DXg7CXvaFXBcTXyJG4C+VaBVd44g==",
+      "requires": {
+        "@algolia/cache-browser-local-storage": "4.15.0",
+        "@algolia/cache-common": "4.15.0",
+        "@algolia/cache-in-memory": "4.15.0",
+        "@algolia/client-account": "4.15.0",
+        "@algolia/client-analytics": "4.15.0",
+        "@algolia/client-common": "4.15.0",
+        "@algolia/client-personalization": "4.15.0",
+        "@algolia/client-search": "4.15.0",
+        "@algolia/logger-common": "4.15.0",
+        "@algolia/logger-console": "4.15.0",
+        "@algolia/requester-browser-xhr": "4.15.0",
+        "@algolia/requester-common": "4.15.0",
+        "@algolia/requester-node-http": "4.15.0",
+        "@algolia/transporter": "4.15.0"
       }
     },
     "algoliasearch-helper": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.8.2.tgz",
-      "integrity": "sha512-AXxiF0zT9oYwl8ZBgU/eRXvfYhz7cBA5YrLPlw9inZHdaYF0QEya/f1Zp1mPYMXc1v6VkHwBq4pk6/vayBLICg==",
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.12.0.tgz",
+      "integrity": "sha512-/j1U3PEwdan0n6P/QqSnSpNSLC5+cEMvyljd5CnmNmUjDlGrys+vFEOwjVEnqELIiAGMHEA/Nl3CiKVFBUYqyQ==",
       "requires": {
         "@algolia/events": "^4.0.1"
       }
@@ -16923,9 +17086,9 @@
       }
     },
     "anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -16952,13 +17115,13 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
     "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==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
+      "integrity": "sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-array-method-boxes-properly": "^1.0.0",
         "is-string": "^1.0.7"
       }
@@ -16979,18 +17142,23 @@
       "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==",
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
       "requires": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
+    },
     "axios": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
@@ -17000,9 +17168,9 @@
       }
     },
     "babel-loader": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
-      "integrity": "sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
+      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
       "requires": {
         "find-cache-dir": "^3.3.1",
         "loader-utils": "^2.0.0",
@@ -17050,12 +17218,12 @@
       }
     },
     "babel-plugin-polyfill-corejs2": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
-      "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
+      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
       "requires": {
-        "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
         "semver": "^6.1.1"
       },
       "dependencies": {
@@ -17067,20 +17235,20 @@
       }
     },
     "babel-plugin-polyfill-corejs3": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz",
-      "integrity": "sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
+      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1",
-        "core-js-compat": "^3.21.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
+        "core-js-compat": "^3.25.1"
       }
     },
     "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==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
+      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
+        "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
     "bail": {
@@ -17114,9 +17282,9 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
     "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==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "requires": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
@@ -17126,7 +17294,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "raw-body": "2.5.1",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -17153,9 +17321,9 @@
       }
     },
     "bonjour-service": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.13.tgz",
-      "integrity": "sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.0.tgz",
+      "integrity": "sha512-LVRinRB3k1/K0XzZ2p58COnWvkQknIY6sf0zF2rpErvcJXpMBttEPQSxK+HEXSS9VmpZlDoDnQWv8ftJT20B0Q==",
       "requires": {
         "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
@@ -17201,15 +17369,14 @@
       }
     },
     "browserslist": {
-      "version": "4.20.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.4.tgz",
-      "integrity": "sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw==",
+      "version": "4.21.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
+      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
       "requires": {
-        "caniuse-lite": "^1.0.30001349",
-        "electron-to-chromium": "^1.4.147",
-        "escalade": "^3.1.1",
-        "node-releases": "^2.0.5",
-        "picocolors": "^1.0.0"
+        "caniuse-lite": "^1.0.30001449",
+        "electron-to-chromium": "^1.4.284",
+        "node-releases": "^2.0.8",
+        "update-browserslist-db": "^1.0.10"
       }
     },
     "buble-jsx-only": {
@@ -17293,11 +17460,6 @@
             "unicode-match-property-value-ecmascript": "^2.0.0"
           }
         },
-        "regjsgen": {
-          "version": "0.5.2",
-          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-          "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
-        },
         "regjsparser": {
           "version": "0.7.0",
           "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.7.0.tgz",
@@ -17400,9 +17562,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001353",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001353.tgz",
-      "integrity": "sha512-GqItFu1lCW4OGd4f47TVQXAGxca8K9Bz3cBb872ZskMo6FIQhiHCc7QjBL7Bb4XannbV+Gq0yHhFVxONW6C/XQ=="
+      "version": "1.0.30001464",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz",
+      "integrity": "sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g=="
     },
     "ccount": {
       "version": "1.1.0",
@@ -17489,14 +17651,14 @@
       "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=="
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw=="
     },
     "clean-css": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
-      "integrity": "sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
+      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
       "requires": {
         "source-map": "~0.6.0"
       }
@@ -17537,17 +17699,17 @@
       }
     },
     "clone-response": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
       "requires": {
         "mimic-response": "^1.0.0"
       }
     },
     "clsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
     },
     "coa": {
       "version": "2.0.2",
@@ -17629,9 +17791,9 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "colord": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
-      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ=="
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
     "colorette": {
       "version": "2.0.19",
@@ -17700,6 +17862,11 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "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=="
         }
       }
     },
@@ -17747,9 +17914,9 @@
       }
     },
     "connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
+      "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=="
     },
     "consola": {
       "version": "2.15.3",
@@ -17771,17 +17938,14 @@
       "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA=="
     },
     "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=="
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
     },
     "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"
-      }
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "cookie": {
       "version": "0.5.0",
@@ -17794,9 +17958,9 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
     "copy-text-to-clipboard": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz",
-      "integrity": "sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
+      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng=="
     },
     "copy-webpack-plugin": {
       "version": "9.1.0",
@@ -17832,30 +17996,22 @@
       }
     },
     "core-js": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.1.tgz",
-      "integrity": "sha512-wfMYHWi1WQjpgZNC9kAlN4ut04TM9fUTdi7CqIoTVM7yaiOUQTklOzfb+oWH3r9edQcT3F887swuVmxrV+CC8w=="
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.29.0.tgz",
+      "integrity": "sha512-VG23vuEisJNkGl6XQmFJd3rEG/so/CNatqeE+7uZAwTSwFeB/qaO0be8xZYUNWprJ/GIwL8aMt9cj1kvbpTZhg=="
     },
-    "core-js-compat": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.23.1.tgz",
-      "integrity": "sha512-KeYrEc8t6FJsKYB2qnDwRHWaC0cJNaqlHfCpMe5q3j/W1nje3moib/txNklddLPCtGb+etcBIyJ8zuMa/LN5/A==",
-      "requires": {
-        "browserslist": "^4.20.4",
-        "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-compat": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.29.0.tgz",
+      "integrity": "sha512-ScMn3uZNAFhK2DGoEfErguoiAHhV2Ju+oJo/jK08p7B3f3UhocUrCCkTvnZaiS+edl5nlIoiBXKcwMc6elv4KQ==",
+      "requires": {
+        "browserslist": "^4.21.5"
       }
     },
     "core-js-pure": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.1.tgz",
-      "integrity": "sha512-3qNgf6TqI3U1uhuSYRzJZGfFd4T+YlbyVPl+jgRiKjdZopvG4keZQwWZDAWpu1UH9nCgTpUzIV3GFawC7cJsqg=="
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.29.0.tgz",
+      "integrity": "sha512-v94gUjN5UTe1n0yN/opTihJ8QBWD2O8i19RfTZR7foONPWArnjB96QA/wk5ozu1mm6ja3udQCzOzwQXTxi3xOQ=="
     },
     "core-util-is": {
       "version": "1.0.3",
@@ -17863,9 +18019,9 @@
       "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==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "requires": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
@@ -17942,10 +18098,9 @@
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
     },
     "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==",
-      "requires": {}
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
     },
     "css-loader": {
       "version": "5.2.7",
@@ -17990,9 +18145,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -18063,22 +18218,22 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
     "cssnano": {
-      "version": "5.1.11",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.11.tgz",
-      "integrity": "sha512-2nx+O6LvewPo5EBtYrKc8762mMkZRk9cMGIOP4UlkmxHm7ObxH+zvsJJ+qLwPkUc4/yumL/qJkavYi9NlodWIQ==",
+      "version": "5.1.15",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
       "requires": {
-        "cssnano-preset-default": "^5.2.11",
+        "cssnano-preset-default": "^5.2.14",
         "lilconfig": "^2.0.3",
         "yaml": "^1.10.2"
       }
     },
     "cssnano-preset-advanced": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.7.tgz",
-      "integrity": "sha512-VNOdTMRA60KhaURZhnkTGeluHQBHWDMwY7TIDu1Qydf88X6k8xZbV2I+Wlm8JRaj2oi18xvoIOAW17JneoZzEg==",
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.10.tgz",
+      "integrity": "sha512-fnYJyCS9jgMU+cmHO1rPSPf9axbQyD7iUhLO5Df6O4G+fKIOMps+ZbU0PdGFejFBBZ3Pftf18fn1eG7MAPUSWQ==",
       "requires": {
-        "autoprefixer": "^10.3.7",
-        "cssnano-preset-default": "^5.2.11",
+        "autoprefixer": "^10.4.12",
+        "cssnano-preset-default": "^5.2.14",
         "postcss-discard-unused": "^5.1.0",
         "postcss-merge-idents": "^5.1.1",
         "postcss-reduce-idents": "^5.2.0",
@@ -18086,36 +18241,36 @@
       }
     },
     "cssnano-preset-default": {
-      "version": "5.2.11",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.11.tgz",
-      "integrity": "sha512-4PadR1NtuaIK8MvLNuY7MznK4WJteldGlzCiMaaTiOUP+apeiIvUDIXykzUOoqgOOUAHrU64ncdD90NfZR3LSQ==",
+      "version": "5.2.14",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
       "requires": {
-        "css-declaration-sorter": "^6.2.2",
+        "css-declaration-sorter": "^6.3.1",
         "cssnano-utils": "^3.1.0",
         "postcss-calc": "^8.2.3",
-        "postcss-colormin": "^5.3.0",
-        "postcss-convert-values": "^5.1.2",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
         "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.5",
-        "postcss-merge-rules": "^5.1.2",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
         "postcss-minify-font-values": "^5.1.0",
         "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.3",
+        "postcss-minify-params": "^5.1.4",
         "postcss-minify-selectors": "^5.2.1",
         "postcss-normalize-charset": "^5.1.0",
         "postcss-normalize-display-values": "^5.1.0",
-        "postcss-normalize-positions": "^5.1.0",
-        "postcss-normalize-repeat-style": "^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-unicode": "^5.1.1",
         "postcss-normalize-url": "^5.1.0",
         "postcss-normalize-whitespace": "^5.1.1",
-        "postcss-ordered-values": "^5.1.2",
-        "postcss-reduce-initial": "^5.1.0",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
         "postcss-reduce-transforms": "^5.1.0",
         "postcss-svgo": "^5.1.0",
         "postcss-unique-selectors": "^5.1.1"
@@ -18124,8 +18279,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA=="
     },
     "csso": {
       "version": "4.2.0",
@@ -18152,9 +18306,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "dag-map": {
       "version": "1.0.2",
@@ -18162,9 +18316,9 @@
       "integrity": "sha512-+LSAiGFwQ9dRnRdOeaj7g47ZFJcOUPukAP8J3A3fuZ1g9Y44BG+P1sgApjLXTQPOzC4+7S9Wr8kXsfpINM4jpw=="
     },
     "date-fns": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
-      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
     },
     "debug": {
       "version": "4.3.4",
@@ -18188,9 +18342,9 @@
       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
     },
     "deepmerge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og=="
     },
     "default-gateway": {
       "version": "6.0.3",
@@ -18211,9 +18365,9 @@
       "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==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -18263,27 +18417,12 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
     },
     "detect-port": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
-      "integrity": "sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+      "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
       "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=="
-        }
+        "debug": "4"
       }
     },
     "detect-port-alt": {
@@ -18346,9 +18485,9 @@
       }
     },
     "docusaurus-plugin-sass": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.2.tgz",
-      "integrity": "sha512-ZZBpj3PrhGpYE2kAnkZB9NRwy/CDi4rGun1oec6PYR8YvGzqxYGtXvLgHi6FFbu8/N483klk8udqyYMh6Ted+A==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.3.tgz",
+      "integrity": "sha512-FbaE06K8NF8SPUYTwiG+83/jkXrwHJ/Afjqz3SUIGon6QvFwSSoKOcoxGQmUBnjTOk+deUONDx8jNWsegFJcBQ==",
       "requires": {
         "sass-loader": "^10.1.1"
       }
@@ -18423,9 +18562,9 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha512-CEj8FwwNA4cVH2uFCoHUrmojhYh1vmCdOaneKJXwkeY1i9jnlslVo9dx+hQ5Hl9GnH/Bwy/IjxAyOePyPKYnzA=="
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz",
+      "integrity": "sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA=="
     },
     "ee-first": {
       "version": "1.1.1",
@@ -18433,9 +18572,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "electron-to-chromium": {
-      "version": "1.4.155",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.155.tgz",
-      "integrity": "sha512-niPzKBSYPG06gxLKO0c2kEmgdRMTtIbNrBlvD31Ld8Q57b/K0218U4j8u/OOt25XE1eFOn47FcmQVdx9R1qqxA=="
+      "version": "1.4.328",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.328.tgz",
+      "integrity": "sha512-DE9tTy2PNmy1v55AZAO542ui+MLC2cvINMK4P2LXGsJdput/ThVG9t+QGecPuAZZSgC8XoI+Jh9M1OG9IoNSCw=="
     },
     "emoji-regex": {
       "version": "8.0.0",
@@ -18466,9 +18605,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
-      "integrity": "sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
       "requires": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -18488,33 +18627,43 @@
       }
     },
     "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==",
+      "version": "1.21.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
+      "integrity": "sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==",
       "requires": {
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.1",
+        "get-intrinsic": "^1.1.3",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.4",
+        "is-array-buffer": "^3.0.1",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
       }
     },
     "es-array-method-boxes-properly": {
@@ -18527,6 +18676,16 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
+    "es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "requires": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -18602,9 +18761,9 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
     "eta": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/eta/-/eta-1.12.3.tgz",
-      "integrity": "sha512-qHixwbDLtekO/d51Yr4glcaUJCIjGVJyTzuqV4GPlgZo1YpgOKG+avQynErZIYrfM6JIJdtiG2Kox8tbb+DoGg=="
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-1.14.2.tgz",
+      "integrity": "sha512-wZmJAV7EFUG5W8XNXSazIdichnWEhGB1OWg4tnXWPj0CPNUcFdgorGNO6N9p6WBUgoUe4P0OziJYn1+6zxP2aQ=="
     },
     "etag": {
       "version": "1.8.1",
@@ -18654,13 +18813,13 @@
       }
     },
     "express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.5.0",
@@ -18679,7 +18838,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -18726,11 +18885,6 @@
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
           "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-        },
-        "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=="
         }
       }
     },
@@ -18753,9 +18907,9 @@
       "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==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -18778,9 +18932,9 @@
       }
     },
     "fastq": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
-      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -18920,14 +19074,22 @@
       }
     },
     "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=="
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
     },
     "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==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
+      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
       "requires": {
         "@babel/code-frame": "^7.8.3",
         "@types/json-schema": "^7.0.5",
@@ -19057,9 +19219,9 @@
       "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==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -19089,9 +19251,9 @@
       }
     },
     "github-slugger": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
-      "integrity": "sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
+      "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
     },
     "glob": {
       "version": "7.2.3",
@@ -19120,9 +19282,9 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
     "global-dirs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz",
-      "integrity": "sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
       "requires": {
         "ini": "2.0.0"
       },
@@ -19167,6 +19329,14 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
     "globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -19180,6 +19350,14 @@
         "slash": "^3.0.0"
       }
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "got": {
       "version": "9.6.0",
       "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
@@ -19273,6 +19451,11 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+    },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -19451,9 +19634,9 @@
           "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
         },
         "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==",
+          "version": "2.3.8",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -19464,6 +19647,11 @@
             "util-deprecate": "~1.0.1"
           }
         },
+        "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=="
+        },
         "string_decoder": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -19597,9 +19785,9 @@
       }
     },
     "http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
     "http-deceiver": {
       "version": "1.2.7",
@@ -19619,9 +19807,9 @@
       }
     },
     "http-parser-js": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.6.tgz",
-      "integrity": "sha512-vDlkRPDJn93swjcjqMSaGSPABbIarsr1TLAui/gLDXzV5VsJNdXNzMYDyNBLQkjWQCJ1uizu8T2oDMhmGt0PRA=="
+      "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",
@@ -19668,13 +19856,12 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "requires": {}
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
     },
     "imgix-url-builder": {
       "version": "0.0.3",
@@ -19682,14 +19869,14 @@
       "integrity": "sha512-8Oc2Cn4+jF06sEfJcVPlWYfD2F6RjrwIMbk1xEzux8unoB5LsvFc/GL1BQ47HPaeE12ReX2nMUcjUslGYWLxHA=="
     },
     "immer": {
-      "version": "9.0.15",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
-      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ=="
+      "version": "9.0.19",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
+      "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ=="
     },
     "immutable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
     },
     "import-fresh": {
       "version": "3.3.0",
@@ -19745,11 +19932,11 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
     "internal-slot": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
       "requires": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
       }
@@ -19778,6 +19965,16 @@
         "is-decimal": "^1.0.0"
       }
     },
+    "is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -19814,9 +20011,9 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "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=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="
     },
     "is-ci": {
       "version": "2.0.0",
@@ -19834,9 +20031,9 @@
       }
     },
     "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==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "requires": {
         "has": "^1.0.3"
       }
@@ -20026,6 +20223,18 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -20114,14 +20323,14 @@
       }
     },
     "joi": {
-      "version": "17.6.0",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.0.tgz",
-      "integrity": "sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==",
+      "version": "17.8.3",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.8.3.tgz",
+      "integrity": "sha512-q5Fn6Tj/jR8PfrLrx4fpGH4v9qM6o+vDUfD4/3vxxyg34OmKcNqYZ1qn2mpLza96S8tL0p0rIw2gOZX+/cTg9w==",
       "requires": {
         "@hapi/hoek": "^9.0.0",
         "@hapi/topo": "^5.0.0",
         "@sideway/address": "^4.1.3",
-        "@sideway/formula": "^3.0.0",
+        "@sideway/formula": "^3.0.1",
         "@sideway/pinpoint": "^2.0.0"
       }
     },
@@ -20174,9 +20383,9 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -20206,9 +20415,9 @@
       "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=="
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
     },
     "latest-version": {
       "version": "5.1.0",
@@ -20224,9 +20433,9 @@
       "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="
     },
     "lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
     },
     "lines-and-columns": {
       "version": "1.2.4",
@@ -20239,9 +20448,9 @@
       "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==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -20313,11 +20522,11 @@
       "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "requires": {
-        "yallist": "^4.0.0"
+        "yallist": "^3.0.2"
       }
     },
     "magic-string": {
@@ -20416,11 +20625,11 @@
       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
     "memfs": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.4.tgz",
-      "integrity": "sha512-W4gHNUE++1oSJVn8Y68jPXi+mkx3fXR5ITE/Ubz6EQ3xRpCN5k2CQ4AUR8094Z7211F876TyoBACGsIveqgiGA==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz",
+      "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==",
       "requires": {
-        "fs-monkey": "1.0.3"
+        "fs-monkey": "^1.0.3"
       }
     },
     "memory-cache": {
@@ -20485,15 +20694,6 @@
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
     "mini-css-extract-plugin": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -20539,9 +20739,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
     },
     "mkdirp": {
       "version": "0.5.6",
@@ -20620,9 +20820,9 @@
       "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
     },
     "node-releases": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
-      "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q=="
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
+      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -20666,9 +20866,9 @@
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
     "object-keys": {
       "version": "1.1.1",
@@ -20676,35 +20876,35 @@
       "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==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.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==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.5.tgz",
+      "integrity": "sha512-yDNzckpM6ntyQiGTik1fKV1DcVDRS+w8bvpWNCBanvH5LfRX9O8WTHqQzG4RZwRAM4I0oU7TV11Lj5v0g20ibw==",
       "requires": {
-        "array.prototype.reduce": "^1.0.4",
+        "array.prototype.reduce": "^1.0.5",
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.1"
+        "es-abstract": "^1.20.4"
       }
     },
     "object.values": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "obuf": {
@@ -20990,9 +21190,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -21009,48 +21209,44 @@
       }
     },
     "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==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "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==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
       "requires": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       }
     },
     "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==",
-      "requires": {}
+      "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==",
-      "requires": {}
+      "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==",
-      "requires": {}
+      "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==",
-      "requires": {}
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw=="
     },
     "postcss-discard-unused": {
       "version": "5.1.0",
@@ -21080,20 +21276,20 @@
       }
     },
     "postcss-merge-longhand": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.5.tgz",
-      "integrity": "sha512-NOG1grw9wIO+60arKa2YYsrbgvP6tp+jqc7+ZD5/MalIw234ooH2C6KlR6FEn4yle7GqZoBxSK1mLBE9KPur6w==",
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
       "requires": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.0"
+        "stylehacks": "^5.1.1"
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^3.1.0",
         "postcss-selector-parser": "^6.0.5"
@@ -21118,11 +21314,11 @@
       }
     },
     "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==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "cssnano-utils": "^3.1.0",
         "postcss-value-parser": "^4.2.0"
       }
@@ -21138,8 +21334,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -21170,8 +21365,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg=="
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -21182,17 +21376,17 @@
       }
     },
     "postcss-normalize-positions": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.0.tgz",
-      "integrity": "sha512-8gmItgA4H5xiUxgN/3TVvXRoJxkAWLW6f/KKhdsH03atg0cB8ilXnrB5PpSshwVu/dD2ZsRFQcR1OEmSBDAgcQ==",
+      "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.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.0.tgz",
-      "integrity": "sha512-IR3uBjc+7mcWGL6CtniKNQ4Rr5fTxwkaDHwMBDGGs1x9IVRkYIT/M4NelZWkAOBdV6v3Z9S46zqaKGlyzHSchw==",
+      "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"
       }
@@ -21214,11 +21408,11 @@
       }
     },
     "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==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       }
     },
@@ -21247,9 +21441,9 @@
       }
     },
     "postcss-ordered-values": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.2.tgz",
-      "integrity": "sha512-wr2avRbW4HS2XE2ZCqpfp4N/tDC6GZKZ+SVP8UBTOVS8QWrc4TD8MYrebJrvVVlGPKszmiSCzue43NDiVtgDmg==",
+      "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"
@@ -21264,11 +21458,11 @@
       }
     },
     "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==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0"
       }
     },
@@ -21281,20 +21475,20 @@
       }
     },
     "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==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
       }
     },
     "postcss-sort-media-queries": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.2.1.tgz",
-      "integrity": "sha512-9VYekQalFZ3sdgcTjXMa0dDjsfBVHXlraYJEMiOJ/2iMmI2JGCMavP16z3kWOaRu8NSaJCTgVpB/IVpH5yT9YQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.3.0.tgz",
+      "integrity": "sha512-jAl8gJM2DvuIJiI9sL1CuiHtKM4s5aEIomkU8G3LFvbP+p8i7Sz8VV63uieTgoewGqKbi+hxBTiOKJlB35upCg==",
       "requires": {
-        "sort-css-media-queries": "2.0.4"
+        "sort-css-media-queries": "2.1.0"
       }
     },
     "postcss-svgo": {
@@ -21357,8 +21551,7 @@
     "postcss-zindex": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-5.1.0.tgz",
-      "integrity": "sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==",
-      "requires": {}
+      "integrity": "sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A=="
     },
     "prepend-http": {
       "version": "2.0.0",
@@ -21366,9 +21559,9 @@
       "integrity": "sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA=="
     },
     "prettier": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.0.tgz",
-      "integrity": "sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==",
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
       "dev": true
     },
     "pretty-error": {
@@ -21386,15 +21579,14 @@
       "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA=="
     },
     "prism-react-renderer": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.3.tgz",
-      "integrity": "sha512-Viur/7tBTCH2HmYzwCHmt2rEFn+rdIWNIINXyg0StiISbDiIhHKhrFuEK8eMkKgvsIYSjgGqy/hNyucHp6FpoQ==",
-      "requires": {}
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
+      "integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg=="
     },
     "prismjs": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
-      "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw=="
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -21485,9 +21677,9 @@
       "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==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "requires": {
         "side-channel": "^1.0.4"
       }
@@ -21735,15 +21927,14 @@
       }
     },
     "react-router": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.3.tgz",
-      "integrity": "sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
       "requires": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
         "path-to-regexp": "^1.7.0",
         "prop-types": "^15.6.2",
         "react-is": "^16.6.0",
@@ -21760,29 +21951,28 @@
       }
     },
     "react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
       "requires": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.3.3",
+        "react-router": "5.3.4",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       }
     },
     "react-side-effect": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
-      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
-      "requires": {}
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw=="
     },
     "react-textarea-autosize": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
-      "integrity": "sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
+      "integrity": "sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==",
       "requires": {
         "@babel/runtime": "^7.10.2",
         "use-composed-ref": "^1.3.0",
@@ -21790,9 +21980,9 @@
       }
     },
     "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==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "requires": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -21821,21 +22011,11 @@
       }
     },
     "recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "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"
-          }
-        }
+        "minimatch": "^3.0.5"
       }
     },
     "regenerate": {
@@ -21844,22 +22024,22 @@
       "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==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "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=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz",
-      "integrity": "sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==",
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
       "requires": {
         "@babel/runtime": "^7.8.4"
       }
@@ -21875,24 +22055,24 @@
       }
     },
     "regexpu-core": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.0.1.tgz",
-      "integrity": "sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
       "requires": {
+        "@babel/regjsgen": "^0.8.0",
         "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.0.1",
-        "regjsgen": "^0.6.0",
-        "regjsparser": "^0.8.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.0.0"
+        "unicode-match-property-value-ecmascript": "^2.1.0"
       }
     },
     "registry-auth-token": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
-      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.2.tgz",
+      "integrity": "sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==",
       "requires": {
-        "rc": "^1.2.8"
+        "rc": "1.2.8"
       }
     },
     "registry-url": {
@@ -21904,14 +22084,14 @@
       }
     },
     "regjsgen": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
-      "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA=="
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
     },
     "regjsparser": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
-      "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "requires": {
         "jsesc": "~0.5.0"
       },
@@ -22175,11 +22355,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
     "resolve": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
-      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "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.8.1",
+        "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -22295,9 +22475,19 @@
       }
     },
     "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=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
     },
     "safer-buffer": {
       "version": "2.1.2",
@@ -22305,9 +22495,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.52.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.3.tgz",
-      "integrity": "sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==",
+      "version": "1.59.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.59.2.tgz",
+      "integrity": "sha512-jJyO6SmbzkJexF8MUorHx5tAilcgabioYxT/BHbY4+OvoqmbHxsYlrjZ8Adhqcgl6Zqwie0TgMXLCAmPFxXOuw==",
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -22315,9 +22505,9 @@
       }
     },
     "sass-loader": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz",
-      "integrity": "sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz",
+      "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==",
       "requires": {
         "klona": "^2.0.4",
         "loader-utils": "^2.0.0",
@@ -22377,19 +22567,34 @@
       "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==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
+      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
       "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==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
       "requires": {
         "lru-cache": "^6.0.0"
+      },
+      "dependencies": {
+        "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"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
       }
     },
     "semver-diff": {
@@ -22464,23 +22669,23 @@
       }
     },
     "serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "requires": {
         "randombytes": "^2.1.0"
       }
     },
     "serve-handler": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.3.tgz",
-      "integrity": "sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
       "requires": {
         "bytes": "3.0.0",
         "content-disposition": "0.5.2",
         "fast-url-parser": "1.1.3",
         "mime-types": "2.1.18",
-        "minimatch": "3.0.4",
+        "minimatch": "3.1.2",
         "path-is-inside": "1.0.2",
         "path-to-regexp": "2.2.1",
         "range-parser": "1.2.0"
@@ -22499,14 +22704,6 @@
             "mime-db": "~1.33.0"
           }
         },
-        "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"
-          }
-        },
         "path-to-regexp": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
@@ -22617,9 +22814,9 @@
       "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=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.0.tgz",
+      "integrity": "sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ=="
     },
     "shelljs": {
       "version": "0.8.5",
@@ -22670,6 +22867,13 @@
         "@types/sax": "^1.2.1",
         "arg": "^5.0.0",
         "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "17.0.45",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+          "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+        }
       }
     },
     "slash": {
@@ -22696,9 +22900,9 @@
       }
     },
     "sort-css-media-queries": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.0.4.tgz",
-      "integrity": "sha512-PAIsEK/XupCQwitjv7XxoMvYhT7EAfyzI3hsy/MyDgTvc+Ft55ctdkctJLOy6cQejaIC+zjpUL4djFVm2ivOOw=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz",
+      "integrity": "sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA=="
     },
     "source-list-map": {
       "version": "2.0.1",
@@ -22798,13 +23002,6 @@
       "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-width": {
@@ -22818,23 +23015,23 @@
       }
     },
     "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "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==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "stringify-entities": {
@@ -22889,11 +23086,11 @@
       }
     },
     "stylehacks": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
-      "integrity": "sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.21.4",
         "postcss-selector-parser": "^6.0.4"
       }
     },
@@ -23067,9 +23264,9 @@
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
     },
     "terser": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
-      "integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.6.tgz",
+      "integrity": "sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg==",
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -23078,9 +23275,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.7.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A=="
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
         },
         "commander": {
           "version": "2.20.3",
@@ -23090,15 +23287,15 @@
       }
     },
     "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==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz",
+      "integrity": "sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==",
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.16.5"
       },
       "dependencies": {
         "schema-utils": {
@@ -23124,9 +23321,9 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
     "tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
     "tiny-warning": {
       "version": "1.0.3",
@@ -23184,9 +23381,9 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "traverse": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
-      "integrity": "sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw=="
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.7.tgz",
+      "integrity": "sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg=="
     },
     "tree-kill": {
       "version": "1.2.2",
@@ -23209,9 +23406,9 @@
       "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
     },
     "ts-node": {
-      "version": "10.8.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.8.1.tgz",
-      "integrity": "sha512-Wwsnao4DQoJsN034wePSg5nZiw4YKXf56mPIAeD6wVmiv+RytNSWqc2f3fKvcUoV+Yn2+yocD71VOfQHbmVX4g==",
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
       "dev": true,
       "requires": {
         "@cspotcode/source-map-support": "^0.8.0",
@@ -23230,9 +23427,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.7.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
           "dev": true
         },
         "arg": {
@@ -23244,9 +23441,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "type-fest": {
       "version": "0.20.2",
@@ -23262,6 +23459,16 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -23271,14 +23478,15 @@
       }
     },
     "typescript": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
-      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA=="
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true
     },
     "ua-parser-js": {
-      "version": "0.7.31",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
-      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",
+      "integrity": "sha512-cJMeh/eOILyGu0ejgTKB95yKT3zOenSe9UGE3vj6WfiOwgGYnmATUsnDixMFvdU+rNMvWih83hrUP8VwhF9yXQ=="
     },
     "unbox-primitive": {
       "version": "1.0.2",
@@ -23315,14 +23523,14 @@
       }
     },
     "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=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA=="
     },
     "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=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
     },
     "unified": {
       "version": "9.2.0",
@@ -23430,6 +23638,15 @@
       "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
       "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
     },
+    "update-browserslist-db": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
+      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
     "update-notifier": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
@@ -23473,9 +23690,9 @@
       },
       "dependencies": {
         "punycode": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+          "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
         }
       }
     },
@@ -23512,14 +23729,12 @@
     "use-composed-ref": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
-      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
-      "requires": {}
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ=="
     },
     "use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
-      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
-      "requires": {}
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
     },
     "use-latest": {
       "version": "1.2.1",
@@ -23631,9 +23846,9 @@
       },
       "dependencies": {
         "rxjs": {
-          "version": "7.5.5",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz",
-          "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==",
+          "version": "7.8.0",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
+          "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
           "requires": {
             "tslib": "^2.1.0"
           }
@@ -23668,20 +23883,20 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "webpack": {
-      "version": "5.73.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.73.0.tgz",
-      "integrity": "sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==",
+      "version": "5.76.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
+      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
       "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.4.1",
+        "acorn": "^8.7.1",
         "acorn-import-assertions": "^1.7.6",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.9.3",
+        "enhanced-resolve": "^5.10.0",
         "es-module-lexer": "^0.9.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -23694,7 +23909,7 @@
         "schema-utils": "^3.1.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.1.3",
-        "watchpack": "^2.3.1",
+        "watchpack": "^2.4.0",
         "webpack-sources": "^3.2.3"
       },
       "dependencies": {
@@ -23704,9 +23919,9 @@
           "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
         },
         "acorn": {
-          "version": "8.7.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A=="
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
         },
         "schema-utils": {
           "version": "3.1.1",
@@ -23721,10 +23936,11 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz",
-      "integrity": "sha512-GUMZlM3SKwS8Z+CKeIFx7CVoHn3dXFcUAjT/dcZQQmfSZGvitPfMob2ipjai7ovFFqPvTqkEZ/leL4O0YOdAYQ==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
+      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
       "requires": {
+        "@discoveryjs/json-ext": "0.5.7",
         "acorn": "^8.0.4",
         "acorn-walk": "^8.0.0",
         "chalk": "^4.1.0",
@@ -23737,9 +23953,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.7.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A=="
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
         },
         "commander": {
           "version": "7.2.0",
@@ -23769,9 +23985,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -23811,9 +24027,9 @@
       }
     },
     "webpack-dev-server": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.2.tgz",
-      "integrity": "sha512-H95Ns95dP24ZsEzO6G9iT+PNw4Q7ltll1GfJHV4fKphuHWgKFzGHWi4alTlTnpk1SPPk41X+l2RB7rLfIhnB9Q==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
+      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
       "requires": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -23827,7 +24043,7 @@
         "chokidar": "^3.5.3",
         "colorette": "^2.0.10",
         "compression": "^1.7.4",
-        "connect-history-api-fallback": "^1.6.0",
+        "connect-history-api-fallback": "^2.0.0",
         "default-gateway": "^6.0.3",
         "express": "^4.17.3",
         "graceful-fs": "^4.2.6",
@@ -23838,7 +24054,7 @@
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.1",
+        "selfsigned": "^2.1.1",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
@@ -23847,9 +24063,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -23871,9 +24087,9 @@
           "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
         },
         "open": {
-          "version": "8.4.0",
-          "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-          "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+          "version": "8.4.2",
+          "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+          "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
           "requires": {
             "define-lazy-prop": "^2.0.0",
             "is-docker": "^2.1.1",
@@ -23892,10 +24108,9 @@
           }
         },
         "ws": {
-          "version": "8.8.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
-          "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
-          "requires": {}
+          "version": "8.13.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+          "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA=="
         }
       }
     },
@@ -23925,9 +24140,9 @@
       },
       "dependencies": {
         "std-env": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.1.1.tgz",
-          "integrity": "sha512-/c645XdExBypL01TpFKiG/3RAa/Qmu+zRi0MwAmrdEkwHNuN0ebo8ccAXBBDa5Z0QOJgBskUIbuCK91x0sCVEw=="
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
+          "integrity": "sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA=="
         }
       }
     },
@@ -23975,6 +24190,19 @@
         "is-symbol": "^1.0.3"
       }
     },
+    "which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
     "widest-line": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
@@ -24015,10 +24243,9 @@
       }
     },
     "ws": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
-      "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
-      "requires": {}
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
     },
     "xdg-basedir": {
       "version": "4.0.0",
@@ -24044,9 +24271,9 @@
       "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=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "yaml": {
       "version": "1.10.2",

From 508579165a414e73652f7e4c3d4a877575155459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Sun, 12 Mar 2023 20:46:22 +0900
Subject: [PATCH 239/469] build

---
 .../reference/ReleaseNotes/release-notes.json | 80 +++++++++++--------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/src/components/page/reference/ReleaseNotes/release-notes.json b/src/components/page/reference/ReleaseNotes/release-notes.json
index d1000d34839..6221be13cb6 100644
--- a/src/components/page/reference/ReleaseNotes/release-notes.json
+++ b/src/components/page/reference/ReleaseNotes/release-notes.json
@@ -1,52 +1,62 @@
 [
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.13...v6.1.14\">6.1.14</a> (2022-07-13)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> datetime works within stencil apps (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25592\">#25592</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7b10fa6476c2c2896c6810c57b3160f8c8896faa\">7b10fa6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25591\">#25591</a></li>\n<li><strong>react:</strong> IonNav works with react (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25565\">#25565</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/420f9bbebd41f3eab6def795bcdd1933d5c5a47a\">420f9bb</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24002\">#24002</a></li>\n</ul>\n",
-    "element": "Vanadium",
-    "name": "v6.1.14",
-    "published_at": "July 13 2022",
-    "symbol": "V",
-    "tag_name": "v6.1.14",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v6.6.1\">6.6.1</a> (2023-03-08)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> keepContentsMounted modal is sized correctly (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26917\">#26917</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572\">8d184c8</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26916\">#26916</a></li>\n<li><strong>button:</strong> show correct activated state for ios (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26900\">#26900</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c\">67815cc</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22468\">#22468</a></li>\n<li><strong>datetime-button:</strong> time-only values are parsed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26852\">#26852</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f54fc188843af52e723e06402e01ef92717e541f\">f54fc18</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26851\">#26851</a></li>\n<li><strong>datetime:</strong> resolve import error in stencil apps (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26909\">#26909</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69\">48c45af</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26908\">#26908</a></li>\n<li><strong>menu, split-pane:</strong> ssr does not fail on null customElements check (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26854\">#26854</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475\">451d220</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24714\">#24714</a></li>\n<li><strong>modal:</strong> avoid chrome memory leak bug (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26911\">#26911</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd\">a3f8e28</a>)</li>\n<li><strong>react:</strong> inline overlays dismiss when parent component unmounts (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26245\">#26245</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8\">c0e1bf9</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25775\">#25775</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/26185\">#26185</a></li>\n</ul>\n",
+    "element": "Nickel",
+    "name": "v6.6.1",
+    "published_at": "March 8 2023",
+    "symbol": "Ni",
+    "tag_name": "v6.6.1",
     "type": "patch",
-    "version": "6.1.14"
+    "version": "6.6.1"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.12...v6.1.13\">6.1.13</a> (2022-07-06)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>all:</strong> long press now preserves activated state (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25551\">#25551</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a8286f6e42f734a027416ac6cd659e3dce4edccb\">a8286f6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25544\">#25544</a></li>\n<li><strong>datetime:</strong> typing in time now updates value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25561\">#25561</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1b1b1a3800c4d044b4a3e7418f534e9271770ec6\">1b1b1a3</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25560\">#25560</a></li>\n</ul>\n",
-    "element": "Vanadium",
-    "name": "v6.1.13",
-    "published_at": "July 6 2022",
-    "symbol": "V",
-    "tag_name": "v6.1.13",
+    "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.7...v6.6.0\">6.6.0</a> (2023-03-01)</h1>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>modal:</strong> dialog styles work on old chrome versions (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26746\">#26746</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/00d10f5f6ad53850505bdad94b659b8801a3309d\">00d10f5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26745\">#26745</a></li>\n</ul>\n<h3>Features</h3>\n<ul>\n<li><strong>datetime:</strong> add ability to specify custom colors for specific dates (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26775\">#26775</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de\">2a761af</a>)</li>\n<li><strong>picker-column:</strong> assign custom aria-labels to column options (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26749\">#26749</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/daa89a26ac8fa655c56c9447a8635e7c436e4f63\">daa89a2</a>)</li>\n<li><strong>toast:</strong> add stacked buttons functionality (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26790\">#26790</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fc5fcc064dec5256836e9622125b5e499ef00975\">fc5fcc0</a>)</li>\n</ul>\n",
+    "element": "Nickel",
+    "name": "v6.6.0",
+    "published_at": "March 1 2023",
+    "symbol": "Ni",
+    "tag_name": "v6.6.0",
+    "type": "minor",
+    "version": "6.6.0"
+  },
+  {
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.6...v6.5.7\">6.5.7</a> (2023-03-01)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>content:</strong> fullscreen values are recomputed on visible content (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26847\">#26847</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6dcd98b26ab8fd3bf0092416d613bf051fbdeacf\">6dcd98b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26844\">#26844</a></li>\n<li><strong>modal:</strong> keyboard listener removed on dismiss (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26856\">#26856</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b4bcba353386b4d5d8d396e61ece421a15d42ff0\">b4bcba3</a>)</li>\n<li><strong>overlays:</strong> focus trap refs cleared on dismiss (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26855\">#26855</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8d1d0fa0c7a42a3c21a471131ba454774b26c314\">8d1d0fa</a>)</li>\n</ul>\n",
+    "element": "Cobalt",
+    "name": "v6.5.7",
+    "published_at": "March 1 2023",
+    "symbol": "Co",
+    "tag_name": "v6.5.7",
     "type": "patch",
-    "version": "6.1.13"
+    "version": "6.5.7"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.11...v6.1.12\">6.1.12</a> (2022-06-29)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> warn devs that standalone components are not supported (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25516\">#25516</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c53785c0c786113f3516c09fa512687ecb84c717\">c53785c</a>)</li>\n<li><strong>datetime:</strong> add dev warnings when setting out of bounds value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25513\">#25513</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5dfaf63c6582811b61339a6fa50cf551cd8724d0\">5dfaf63</a>)</li>\n</ul>\n",
-    "element": "Vanadium",
-    "name": "v6.1.12",
-    "published_at": "June 29 2022",
-    "symbol": "V",
-    "tag_name": "v6.1.12",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.5...v6.5.6\">6.5.6</a> (2023-02-22)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>card:</strong> border radius does not overflow on paint in Safari (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26539\">#26539</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/df5c8e231825b5e5b6923f322c94224a00d3b309\">df5c8e2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26529\">#26529</a></li>\n</ul>\n",
+    "element": "Cobalt",
+    "name": "v6.5.6",
+    "published_at": "February 22 2023",
+    "symbol": "Co",
+    "tag_name": "v6.5.6",
     "type": "patch",
-    "version": "6.1.12"
+    "version": "6.5.6"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.10...v6.1.11\">6.1.11</a> (2022-06-22)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> closing time picker no longer changes month (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25478\">#25478</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f9ab9b54ddb5a3004673e4aaa9cb62fd8e97ba07\">f9ab9b5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25438\">#25438</a></li>\n<li><strong>item:</strong> multiple input appearance when using datetime (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25498\">#25498</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1a8d23da8125d54c3119eacb51206f7541c9f410\">1a8d23d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25484\">#25484</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/25483\">#25483</a></li>\n<li><strong>overlays:</strong> focus is not moved if active element is in overlay (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25481\">#25481</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/dcc2da2800e69d938b4a62db436d9f07d9663dce\">dcc2da2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24127\">#24127</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/24820\">#24820</a></li>\n<li><strong>refresher:</strong> quickly swiping down no longer causes duplicate refresh (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25476\">#25476</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3abfa780ccb32484b4d9f1b509e7ab910dfb901a\">3abfa78</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25418\">#25418</a></li>\n<li><strong>vue:</strong> adding class to IonPage no longer hides component (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25490\">#25490</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/cbaa9711f094975569e2fcb28060f8e456804073\">cbaa971</a>)</li>\n<li><strong>vue:</strong> components have correct type definitions (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25499\">#25499</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b1821e9d0a55f20f74696f119de724ab70647977\">b1821e9</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25485\">#25485</a></li>\n</ul>\n",
-    "element": "Vanadium",
-    "name": "v6.1.11",
-    "published_at": "June 22 2022",
-    "symbol": "V",
-    "tag_name": "v6.1.11",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.4...v6.5.5\">6.5.5</a> (2023-02-20)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> days of week and spacing buttons are not announced by screen readers (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26813\">#26813</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1a346b62068076d0b0cc6b2dea4136e0f06576b8\">1a346b6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26811\">#26811</a></li>\n<li><strong>hide-caret:</strong> blur listener correctly removed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26808\">#26808</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fef634f7f055f1672af50b56610f84c76e626814\">fef634f</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26807\">#26807</a></li>\n<li><strong>input:</strong> compositionend event is removed on unmount (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26806\">#26806</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/caa8719cea2f4b3b460551224a8c4a69bd29afeb\">caa8719</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26805\">#26805</a></li>\n<li><strong>sanitizer:</strong> improve reliability of sanitizer (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26820\">#26820</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5e41391ed2585072095f42f7a6d40497f0e129d2\">5e41391</a>)</li>\n<li><strong>swipe-back:</strong> gesture rtl setting is reactive (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26795\">#26795</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3a64de49dbf470d470cb4516df2a5226ba751051\">3a64de4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26794\">#26794</a></li>\n</ul>\n",
+    "element": "Cobalt",
+    "name": "v6.5.5",
+    "published_at": "February 20 2023",
+    "symbol": "Co",
+    "tag_name": "v6.5.5",
     "type": "patch",
-    "version": "6.1.11"
+    "version": "6.5.5"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.9...v6.1.10\">6.1.10</a> (2022-06-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> router compatibility with Angular 12/13 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25456\">#25456</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7b105a3471e5bc588ba63f820b707e131c878b6f\">7b105a3</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25448\">#25448</a></li>\n<li><strong>fab-button:</strong> improve ripple effect behavior on click (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25413\">#25413</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/efdaf90c5a767211e0034bab7cce5bd463ff5aa0\">efdaf90</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/21772\">#21772</a></li>\n<li><strong>modal:</strong> backdrop animation when backdropBreakpoint is 1 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25430\">#25430</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c10df52f39c527dd7e03176c56a2e6cb0ebe455f\">c10df52</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25402\">#25402</a></li>\n<li><strong>modal:</strong> status bar color now correct with sheet modal (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25424\">#25424</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/377c4f597b972818d90132017d50c33074ddadab\">377c4f5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/20501\">#20501</a></li>\n<li><strong>picker-column-internal:</strong> switching off an input mode column preserves scroll (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25467\">#25467</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/989429d65cf57ef8fb69854639f8eac1a12369bc\">989429d</a>)</li>\n<li><strong>popover:</strong> ensure popover does not go offscreen when adjusting top position (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25350\">#25350</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/692653842b43b5e36c51163f8261fde3b5bea40d\">6926538</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25349\">#25349</a></li>\n</ul>\n",
-    "element": "Vanadium",
-    "name": "v6.1.10",
-    "published_at": "June 15 2022",
-    "symbol": "V",
-    "tag_name": "v6.1.10",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.3...v6.5.4\">6.5.4</a> (2023-02-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>content:</strong> fullscreen works when rotating device (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26782\">#26782</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7b879fec3d30b61c00faad035698ff643afaa78e\">7b879fe</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26743\">#26743</a></li>\n<li><strong>deps:</strong> update ionicons usage to v6.1.2 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26752\">#26752</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c07933cb69b0c31d3e44263769a7a26ee81223f8\">c07933c</a>)</li>\n<li><strong>deps:</strong> update ionicons usage to v6.1.3 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26772\">#26772</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1c719833292d4cfbdecadf9838d8c783785222ad\">1c71983</a>)</li>\n<li><strong>tap-click:</strong> instant activate does not use a setTimeout (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26748\">#26748</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/21c0806bbd1417b1e6239bc56272e18b3ff38f2e\">21c0806</a>)</li>\n</ul>\n",
+    "element": "Cobalt",
+    "name": "v6.5.4",
+    "published_at": "February 15 2023",
+    "symbol": "Co",
+    "tag_name": "v6.5.4",
     "type": "patch",
-    "version": "6.1.10"
+    "version": "6.5.4"
   }
 ]

From e6ea85f223e0234cef0a65b1b88787b50b23bac3 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 13 Mar 2023 10:20:51 -0400
Subject: [PATCH 240/469] docs(datetime): clarify timezone usage (#2822)

---
 docs/api/datetime.md                      | 2 +-
 versioned_docs/version-v6/api/datetime.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 082d75358ba..36f2946b919 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -86,7 +86,7 @@ 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.
+While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored.
 :::
 
 ## Basic Usage
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index a4f93b4655c..ffe8e673934 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -90,7 +90,7 @@ 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.
+While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored.
 :::
 
 ## Basic Usage

From ad86befd4999642d76015165245c001bf050cab8 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 13 Mar 2023 13:25:13 -0400
Subject: [PATCH 241/469] docs(animations): add type interfaces (#2811)

---
 docs/utilities/animations.md                  | 57 +++++++++++--------
 .../version-v5/utilities/animations.md        | 57 +++++++++++--------
 .../version-v6/utilities/animations.md        | 57 +++++++++++--------
 3 files changed, 102 insertions(+), 69 deletions(-)

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 10da9763b82..92c6eebc67a 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -16,11 +16,11 @@ import TabItem from '@theme/TabItem';
 
 ## 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.
+Ionic Animations is a tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
 
-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.
+Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use 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.
+Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
 
 ## Installation
 
@@ -1535,30 +1535,37 @@ const animation = createAnimation('my-animation-identifier')
   .fromTo('opacity', '1', '0');
 ```
 
-## Browser Support
+## API
 
-| Browser/Platform | Supported Versions |
-| ---------------- | ------------------ |
-| **Chrome**       | 43+                |
-| **Safari**       | 9+                 |
-| **Firefox**      | 32+                |
-| **IE/Edge**      | 11+                |
-| **Opera**        | 30+                |
-| **iOS**          | 9+                 |
-| **Android**      | 5+                 |
+This section provides a list of all the methods and properties available on the `Animation` class.
+
+### Interfaces
+
+#### AnimationDirection
+
+```tsx
+type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+```
+
+#### AnimationFill
+
+```tsx
+type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
+```
+
+#### AnimationBuilder
+
+```tsx
+type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+```
 
 :::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
+`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
 
-| Name                 | Value                                                         |
-| -------------------- | ------------------------------------------------------------- |
-| `AnimationDirection` | `'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'` |
-| `AnimationFill`      | `'auto' \| 'none' \| 'forwards' \| 'backwards' \| 'both'`     |
+:::
 
-## Interfaces
+#### AnimationCallbackOptions
 
 ```tsx
 interface AnimationCallbackOptions {
@@ -1567,7 +1574,11 @@ interface AnimationCallbackOptions {
    */
   oneTimeCallback: boolean;
 }
+```
 
+#### AnimationPlayOptions
+
+```tsx
 interface AnimationPlayOptions {
   /**
    * If true, the animation will play synchronously.
@@ -1578,7 +1589,7 @@ interface AnimationPlayOptions {
 }
 ```
 
-## Properties
+### Properties
 
 | Name                           | Description                                       |
 | ------------------------------ | ------------------------------------------------- |
@@ -1586,7 +1597,7 @@ interface AnimationPlayOptions {
 | `elements: HTMLElement[]`      | All elements attached to an animation.            |
 | `parentAnimation?: Animation`  | The parent animation of a given animation object. |
 
-## Methods
+### Methods
 
 | Name                                                                                                                 | Description                                                                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/versioned_docs/version-v5/utilities/animations.md b/versioned_docs/version-v5/utilities/animations.md
index d41178a40ad..9387b9639c6 100644
--- a/versioned_docs/version-v5/utilities/animations.md
+++ b/versioned_docs/version-v5/utilities/animations.md
@@ -6,11 +6,11 @@ import TabItem from '@theme/TabItem';
 
 ## 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.
+Ionic Animations is a tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
 
-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.
+Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use 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.
+Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
 
 ## Installation
 
@@ -1517,30 +1517,37 @@ const animation = createAnimation('my-animation-identifier')
   .fromTo('opacity', '1', '0');
 ```
 
-## Browser Support
+## API
 
-| Browser/Platform | Supported Versions |
-| ---------------- | ------------------ |
-| **Chrome**       | 43+                |
-| **Safari**       | 9+                 |
-| **Firefox**      | 32+                |
-| **IE/Edge**      | 11+                |
-| **Opera**        | 30+                |
-| **iOS**          | 9+                 |
-| **Android**      | 5+                 |
+This section provides a list of all the methods and properties available on the `Animation` class.
+
+### Interfaces
+
+#### AnimationDirection
+
+```tsx
+type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+```
+
+#### AnimationFill
+
+```tsx
+type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
+```
+
+#### AnimationBuilder
+
+```tsx
+type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+```
 
 :::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
+`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
 
-| Name                 | Value                                                         |
-| -------------------- | ------------------------------------------------------------- |
-| `AnimationDirection` | `'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'` |
-| `AnimationFill`      | `'auto' \| 'none' \| 'forwards' \| 'backwards' \| 'both'`     |
+:::
 
-## Interfaces
+#### AnimationCallbackOptions
 
 ```tsx
 interface AnimationCallbackOptions {
@@ -1549,7 +1556,11 @@ interface AnimationCallbackOptions {
    */
   oneTimeCallback: boolean;
 }
+```
 
+#### AnimationPlayOptions
+
+```tsx
 interface AnimationPlayOptions {
   /**
    * If true, the animation will play synchronously.
@@ -1560,7 +1571,7 @@ interface AnimationPlayOptions {
 }
 ```
 
-## Properties
+### Properties
 
 | Name                           | Description                                       |
 | ------------------------------ | ------------------------------------------------- |
@@ -1568,7 +1579,7 @@ interface AnimationPlayOptions {
 | `elements: HTMLElement[]`      | All elements attached to an animation.            |
 | `parentAnimation?: Animation`  | The parent animation of a given animation object. |
 
-## Methods
+### Methods
 
 | Name                                                                                                                 | Description                                                                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/versioned_docs/version-v6/utilities/animations.md b/versioned_docs/version-v6/utilities/animations.md
index 10da9763b82..dd2678b8086 100644
--- a/versioned_docs/version-v6/utilities/animations.md
+++ b/versioned_docs/version-v6/utilities/animations.md
@@ -16,11 +16,11 @@ import TabItem from '@theme/TabItem';
 
 ## 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.
+Ionic Animations is a tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
 
-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.
+Creating efficient animations can be challenging, as it is limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use 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.
+Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
 
 ## Installation
 
@@ -1535,30 +1535,37 @@ const animation = createAnimation('my-animation-identifier')
   .fromTo('opacity', '1', '0');
 ```
 
-## Browser Support
+## API
 
-| Browser/Platform | Supported Versions |
-| ---------------- | ------------------ |
-| **Chrome**       | 43+                |
-| **Safari**       | 9+                 |
-| **Firefox**      | 32+                |
-| **IE/Edge**      | 11+                |
-| **Opera**        | 30+                |
-| **iOS**          | 9+                 |
-| **Android**      | 5+                 |
+This section provides a list of all the methods and properties available on the `Animation` class.
+
+### Interfaces
+
+#### AnimationDirection
+
+```tsx
+type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+```
+
+#### AnimationFill
+
+```tsx
+type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
+```
+
+#### AnimationBuilder
+
+```tsx
+type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+```
 
 :::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
+`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
 
-| Name                 | Value                                                         |
-| -------------------- | ------------------------------------------------------------- |
-| `AnimationDirection` | `'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'` |
-| `AnimationFill`      | `'auto' \| 'none' \| 'forwards' \| 'backwards' \| 'both'`     |
+:::
 
-## Interfaces
+#### AnimationCallbackOptions
 
 ```tsx
 interface AnimationCallbackOptions {
@@ -1567,7 +1574,11 @@ interface AnimationCallbackOptions {
    */
   oneTimeCallback: boolean;
 }
+```
 
+#### AnimationPlayOptions
+
+```tsx
 interface AnimationPlayOptions {
   /**
    * If true, the animation will play synchronously.
@@ -1578,7 +1589,7 @@ interface AnimationPlayOptions {
 }
 ```
 
-## Properties
+### Properties
 
 | Name                           | Description                                       |
 | ------------------------------ | ------------------------------------------------- |
@@ -1586,7 +1597,7 @@ interface AnimationPlayOptions {
 | `elements: HTMLElement[]`      | All elements attached to an animation.            |
 | `parentAnimation?: Animation`  | The parent animation of a given animation object. |
 
-## Methods
+### Methods
 
 | Name                                                                                                                 | Description                                                                                                                                                                             |
 | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

From 305b6d9a3a111386e43f64637c345502eb1e4b84 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 13 Mar 2023 13:39:10 -0400
Subject: [PATCH 242/469] docs(alert): alert input label is only for
 radio/checkbox (#2810)

---
 docs/api/alert.md                      | 3 +++
 versioned_docs/version-v6/api/alert.md | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/docs/api/alert.md b/docs/api/alert.md
index 66cfe9e147b..3aa37fd64d2 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -142,6 +142,9 @@ interface AlertInput {
   name?: string;
   placeholder?: string;
   value?: any;
+  /**
+   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+   */
   label?: string;
   checked?: boolean;
   disabled?: boolean;
diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.md
index a90625feb27..19b8bd7177a 100644
--- a/versioned_docs/version-v6/api/alert.md
+++ b/versioned_docs/version-v6/api/alert.md
@@ -192,6 +192,9 @@ interface AlertInput {
   name?: string;
   placeholder?: string;
   value?: any;
+  /**
+   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+   */
   label?: string;
   checked?: boolean;
   disabled?: boolean;

From cb056e961aef9d7386cbdfe992d4d47ec03f86f5 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 13 Mar 2023 17:12:40 -0400
Subject: [PATCH 243/469]  feat: docusaurus plugin to generate component api
 docs (#2797)

---
 docs/api/accordion-group.md                   |  12 +-
 docs/api/accordion.md                         |  12 +-
 docs/api/action-sheet.md                      |  12 +-
 docs/api/alert.md                             |  12 +-
 docs/api/app.md                               |  12 +-
 docs/api/avatar.md                            |  12 +-
 docs/api/back-button.md                       |  12 +-
 docs/api/backdrop.md                          |  12 +-
 docs/api/badge.md                             |  12 +-
 docs/api/breadcrumb.md                        |  12 +-
 docs/api/breadcrumbs.md                       |  12 +-
 docs/api/button.md                            |  12 +-
 docs/api/buttons.md                           |  12 +-
 docs/api/card-content.md                      |  12 +-
 docs/api/card-header.md                       |  12 +-
 docs/api/card-subtitle.md                     |  12 +-
 docs/api/card-title.md                        |  12 +-
 docs/api/card.md                              |  12 +-
 docs/api/checkbox.md                          |  12 +-
 docs/api/chip.md                              |  12 +-
 docs/api/col.md                               |  12 +-
 docs/api/content.md                           |  12 +-
 docs/api/datetime-button.md                   |  12 +-
 docs/api/datetime.md                          |  12 +-
 docs/api/fab-button.md                        |  12 +-
 docs/api/fab-list.md                          |  12 +-
 docs/api/fab.md                               |  12 +-
 docs/api/footer.md                            |  12 +-
 docs/api/grid.md                              |  12 +-
 docs/api/header.md                            |  12 +-
 docs/api/img.md                               |  12 +-
 docs/api/infinite-scroll-content.md           |  12 +-
 docs/api/infinite-scroll.md                   |  12 +-
 docs/api/input.md                             |  12 +-
 docs/api/item-divider.md                      |  12 +-
 docs/api/item-group.md                        |  12 +-
 docs/api/item-option.md                       |  12 +-
 docs/api/item-options.md                      |  12 +-
 docs/api/item-sliding.md                      |  12 +-
 docs/api/item.md                              |  12 +-
 docs/api/label.md                             |  12 +-
 docs/api/list-header.md                       |  12 +-
 docs/api/list.md                              |  12 +-
 docs/api/loading.md                           |  12 +-
 docs/api/menu-button.md                       |  12 +-
 docs/api/menu-toggle.md                       |  12 +-
 docs/api/menu.md                              |  12 +-
 docs/api/modal.md                             |  12 +-
 docs/api/nav-link.md                          |  12 +-
 docs/api/nav.md                               |  12 +-
 docs/api/note.md                              |  12 +-
 docs/api/picker.md                            |  12 +-
 docs/api/popover.md                           |  12 +-
 docs/api/progress-bar.md                      |  12 +-
 docs/api/radio-group.md                       |  12 +-
 docs/api/radio.md                             |  12 +-
 docs/api/range.md                             |  12 +-
 docs/api/refresher-content.md                 |  12 +-
 docs/api/refresher.md                         |  12 +-
 docs/api/reorder-group.md                     |  12 +-
 docs/api/reorder.md                           |  12 +-
 docs/api/ripple-effect.md                     |  12 +-
 docs/api/route-redirect.md                    |  12 +-
 docs/api/route.md                             |  12 +-
 docs/api/router-link.md                       |  12 +-
 docs/api/router-outlet.md                     |  12 +-
 docs/api/router.md                            |  12 +-
 docs/api/row.md                               |  12 +-
 docs/api/searchbar.md                         |  12 +-
 docs/api/segment-button.md                    |  12 +-
 docs/api/segment.md                           |  12 +-
 docs/api/select-option.md                     |  12 +-
 docs/api/select.md                            |  12 +-
 docs/api/skeleton-text.md                     |  12 +-
 docs/api/spinner.md                           |  12 +-
 docs/api/split-pane.md                        |  12 +-
 docs/api/tab-bar.md                           |  12 +-
 docs/api/tab-button.md                        |  12 +-
 docs/api/tab.md                               |  12 +-
 docs/api/tabs.md                              |  12 +-
 docs/api/text.md                              |  12 +-
 docs/api/textarea.md                          |  12 +-
 docs/api/thumbnail.md                         |  12 +-
 docs/api/title.md                             |  12 +-
 docs/api/toast.md                             |  12 +-
 docs/api/toggle.md                            |  12 +-
 docs/api/toolbar.md                           |  12 +-
 docusaurus.config.js                          |   8 +
 package.json                                  |   2 +-
 .../index.js                                  | 220 ++++++++++++++++
 scripts/api.js                                | 156 -----------
 static/.gitignore                             |   1 -
 .../version-v6/api/accordion-group.md         |  24 +-
 versioned_docs/version-v6/api/accordion.md    |  12 +-
 versioned_docs/version-v6/api/action-sheet.md |  12 +-
 versioned_docs/version-v6/api/alert.md        |  12 +-
 versioned_docs/version-v6/api/app.md          |  40 +--
 versioned_docs/version-v6/api/avatar.md       |  12 +-
 versioned_docs/version-v6/api/back-button.md  |  27 +-
 versioned_docs/version-v6/api/backdrop.md     |  12 +-
 versioned_docs/version-v6/api/badge.md        |  12 +-
 versioned_docs/version-v6/api/breadcrumb.md   |  25 +-
 versioned_docs/version-v6/api/breadcrumbs.md  |  12 +-
 versioned_docs/version-v6/api/button.md       |  12 +-
 versioned_docs/version-v6/api/buttons.md      |  12 +-
 versioned_docs/version-v6/api/card-content.md |  23 +-
 versioned_docs/version-v6/api/card-header.md  |  23 +-
 .../version-v6/api/card-subtitle.md           |  23 +-
 versioned_docs/version-v6/api/card-title.md   |  28 +-
 versioned_docs/version-v6/api/card.md         |  12 +-
 versioned_docs/version-v6/api/checkbox.md     |  12 +-
 versioned_docs/version-v6/api/chip.md         |  12 +-
 versioned_docs/version-v6/api/col.md          |  31 ++-
 versioned_docs/version-v6/api/content.md      |  12 +-
 .../version-v6/api/datetime-button.md         |  12 +-
 versioned_docs/version-v6/api/datetime.md     |  12 +-
 versioned_docs/version-v6/api/fab-button.md   |  29 +-
 versioned_docs/version-v6/api/fab-list.md     |  23 +-
 versioned_docs/version-v6/api/fab.md          |  12 +-
 versioned_docs/version-v6/api/footer.md       |  12 +-
 versioned_docs/version-v6/api/grid.md         |  12 +-
 versioned_docs/version-v6/api/header.md       |  12 +-
 versioned_docs/version-v6/api/img.md          |  12 +-
 .../version-v6/api/infinite-scroll-content.md |  22 +-
 .../version-v6/api/infinite-scroll.md         |  12 +-
 versioned_docs/version-v6/api/input.md        |  12 +-
 versioned_docs/version-v6/api/item-divider.md |  12 +-
 versioned_docs/version-v6/api/item-group.md   |  12 +-
 versioned_docs/version-v6/api/item-option.md  |  28 +-
 versioned_docs/version-v6/api/item-options.md |  33 ++-
 versioned_docs/version-v6/api/item-sliding.md |  12 +-
 versioned_docs/version-v6/api/item.md         |  12 +-
 versioned_docs/version-v6/api/label.md        |  12 +-
 versioned_docs/version-v6/api/list-header.md  |  12 +-
 versioned_docs/version-v6/api/list.md         |  12 +-
 versioned_docs/version-v6/api/loading.md      |  12 +-
 versioned_docs/version-v6/api/menu-button.md  |  28 +-
 versioned_docs/version-v6/api/menu-toggle.md  |  28 +-
 versioned_docs/version-v6/api/menu.md         |  12 +-
 versioned_docs/version-v6/api/modal.md        |  12 +-
 versioned_docs/version-v6/api/nav-link.md     |  28 +-
 versioned_docs/version-v6/api/nav.md          |  12 +-
 versioned_docs/version-v6/api/note.md         |  12 +-
 versioned_docs/version-v6/api/picker.md       |  13 +-
 versioned_docs/version-v6/api/popover.md      |  12 +-
 versioned_docs/version-v6/api/progress-bar.md |  12 +-
 versioned_docs/version-v6/api/radio-group.md  |  29 +-
 versioned_docs/version-v6/api/radio.md        |  12 +-
 versioned_docs/version-v6/api/range.md        |  12 +-
 .../version-v6/api/refresher-content.md       |  23 +-
 versioned_docs/version-v6/api/refresher.md    |  12 +-
 .../version-v6/api/reorder-group.md           |  29 +-
 versioned_docs/version-v6/api/reorder.md      |  12 +-
 .../version-v6/api/ripple-effect.md           |  12 +-
 .../version-v6/api/route-redirect.md          |  40 +--
 versioned_docs/version-v6/api/route.md        | 114 ++++----
 versioned_docs/version-v6/api/router-link.md  |  46 ++--
 .../version-v6/api/router-outlet.md           |  32 ++-
 versioned_docs/version-v6/api/router.md       |  35 +--
 versioned_docs/version-v6/api/row.md          |  30 ++-
 versioned_docs/version-v6/api/searchbar.md    |  12 +-
 .../version-v6/api/segment-button.md          |  12 +-
 versioned_docs/version-v6/api/segment.md      |  12 +-
 .../version-v6/api/select-option.md           |  30 ++-
 versioned_docs/version-v6/api/select.md       |  12 +-
 .../version-v6/api/skeleton-text.md           |  12 +-
 versioned_docs/version-v6/api/slide.md        |  31 ++-
 versioned_docs/version-v6/api/slides.md       | 248 ++++++++++--------
 versioned_docs/version-v6/api/spinner.md      |  12 +-
 versioned_docs/version-v6/api/split-pane.md   |  12 +-
 versioned_docs/version-v6/api/tab-bar.md      |  62 ++---
 versioned_docs/version-v6/api/tab-button.md   |  80 +++---
 versioned_docs/version-v6/api/tab.md          |  33 ++-
 versioned_docs/version-v6/api/tabs.md         |  12 +-
 versioned_docs/version-v6/api/text.md         |  12 +-
 versioned_docs/version-v6/api/textarea.md     |  12 +-
 versioned_docs/version-v6/api/thumbnail.md    |  12 +-
 versioned_docs/version-v6/api/title.md        |  12 +-
 versioned_docs/version-v6/api/toast.md        |  12 +-
 versioned_docs/version-v6/api/toggle.md       |  12 +-
 versioned_docs/version-v6/api/toolbar.md      |  12 +-
 .../version-v6/api/virtual-scroll.md          |  67 +++--
 182 files changed, 1877 insertions(+), 1631 deletions(-)
 create mode 100644 plugins/docusaurus-plugin-ionic-component-api/index.js
 delete mode 100644 scripts/api.js
 delete mode 100644 static/.gitignore

diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index 2880703001c..312f8acd762 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 0fb249825c8..f64573d9c64 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/accordion/props.md';
+import Events from '@ionic-internal/component-api/v7/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
 
 <head>
   <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 64943f9fcf2..a11e669c194 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
 
 <head>
   <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 3aa37fd64d2..f6e5d5ee581 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -4,12 +4,12 @@ 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';
+import Props from '@ionic-internal/component-api/v7/alert/props.md';
+import Events from '@ionic-internal/component-api/v7/alert/events.md';
+import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
 
 <head>
   <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
diff --git a/docs/api/app.md b/docs/api/app.md
index 98125d4aa8e..1ac4dc6805e 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/app/props.md';
+import Events from '@ionic-internal/component-api/v7/app/events.md';
+import Methods from '@ionic-internal/component-api/v7/app/methods.md';
+import Parts from '@ionic-internal/component-api/v7/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/app/slots.md';
 
 <head>
   <title>ion-app: Container Element for an Ionic Application</title>
diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index ed6cd9db893..0f61597f61c 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/avatar/props.md';
+import Events from '@ionic-internal/component-api/v7/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v7/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
 
 <head>
   <title>ion-avatar: Circular Application Avatar Icon Component</title>
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 6500a8ab781..ca39063c3b5 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-back-button"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/back-button/props.md';
+import Events from '@ionic-internal/component-api/v7/back-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/back-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/back-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
 
 <head>
   <title>Back Button | ion-back-button: Custom Menu Icon for Applications</title>
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index e23d11b0588..4684f53e6e3 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/backdrop/props.md';
+import Events from '@ionic-internal/component-api/v7/backdrop/events.md';
+import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md';
+import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 21e2f298355..4f956169fa7 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/badge/props.md';
+import Events from '@ionic-internal/component-api/v7/badge/events.md';
+import Methods from '@ionic-internal/component-api/v7/badge/methods.md';
+import Parts from '@ionic-internal/component-api/v7/badge/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
 
 <head>
   <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index 5be2aa6c695..5679d17a3c9 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/breadcrumb/props.md';
+import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md';
+import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md';
+import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index d9a12c4c9a4..cff44c2f872 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md';
+import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md';
+import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md';
+import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md';
 
 
 
diff --git a/docs/api/button.md b/docs/api/button.md
index b3161ccb0ec..c538075468d 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/button/props.md';
+import Events from '@ionic-internal/component-api/v7/button/events.md';
+import Methods from '@ionic-internal/component-api/v7/button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/button/slots.md';
 
 <head>
   <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 3e4db87783f..cc8f5cf401c 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/buttons/props.md';
+import Events from '@ionic-internal/component-api/v7/buttons/events.md';
+import Methods from '@ionic-internal/component-api/v7/buttons/methods.md';
+import Parts from '@ionic-internal/component-api/v7/buttons/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/buttons/slots.md';
 
 <head>
   <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index 647cba00897..ad6e5e51be8 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-content/props.md';
+import Events from '@ionic-internal/component-api/v7/card-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index 2e52467ed43..c247d37e667 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-header/props.md';
+import Events from '@ionic-internal/component-api/v7/card-header/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-header/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index ec72784cd99..692caa70759 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-subtitle/props.md';
+import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 33b24158eb5..9263fe91136 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-title/props.md';
+import Events from '@ionic-internal/component-api/v7/card-title/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-title/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-title/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card.md b/docs/api/card.md
index b9419281ab6..183166599b2 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card/props.md';
+import Events from '@ionic-internal/component-api/v7/card/events.md';
+import Methods from '@ionic-internal/component-api/v7/card/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index c861b994ff1..0f62607010d 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v7/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
 
 <head>
   <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
diff --git a/docs/api/chip.md b/docs/api/chip.md
index e032f7e5e0e..e05495b6493 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/chip/props.md';
+import Events from '@ionic-internal/component-api/v7/chip/events.md';
+import Methods from '@ionic-internal/component-api/v7/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v7/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
 
 <head>
   <title>ion-chip:  Name, Text, Icon and Avatar for Ionic Framework Apps</title>
diff --git a/docs/api/col.md b/docs/api/col.md
index e5872b4f6a1..2f6ac3e552f 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/col/props.md';
+import Events from '@ionic-internal/component-api/v7/col/events.md';
+import Methods from '@ionic-internal/component-api/v7/col/methods.md';
+import Parts from '@ionic-internal/component-api/v7/col/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/col/slots.md';
 
 <head>
   <title>ion-col: Column Component Padding, Size and Other Properties</title>
diff --git a/docs/api/content.md b/docs/api/content.md
index a0feb3f2ccd..a257b0e51ee 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/content/props.md';
+import Events from '@ionic-internal/component-api/v7/content/events.md';
+import Methods from '@ionic-internal/component-api/v7/content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/content/slots.md';
 
 <head>
   <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index a17b50b498f..554e74d2b01 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
+import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md';
 
 <head>
   <title>ion-datetime-button: Ionic API Input for interacting with Datetime picker</title>
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 36f2946b919..784c151cf0c 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/datetime/props.md';
+import Events from '@ionic-internal/component-api/v7/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v7/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v7/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/datetime/slots.md';
 
 import Basic from '@site/static/usage/v7/datetime/basic/index.md';
 
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index ab86a48426e..d864c6c3f38 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v7/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
 
 <head>
   <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index a0659a394d7..e97540df9d3 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v7/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab-list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab-list/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 55ce35332fb..06201e3bde6 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/fab/props.md';
+import Events from '@ionic-internal/component-api/v7/fab/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
 
 <head>
   <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
diff --git a/docs/api/footer.md b/docs/api/footer.md
index b5298d7bccd..5127287d601 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/footer/props.md';
+import Events from '@ionic-internal/component-api/v7/footer/events.md';
+import Methods from '@ionic-internal/component-api/v7/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v7/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
 
 <head>
   <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
diff --git a/docs/api/grid.md b/docs/api/grid.md
index 30b504cd3cf..e80e3642bb7 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/grid/props.md';
+import Events from '@ionic-internal/component-api/v7/grid/events.md';
+import Methods from '@ionic-internal/component-api/v7/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v7/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
 
 <head>
   <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
diff --git a/docs/api/header.md b/docs/api/header.md
index 7288b636abe..584a5207d05 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/header/props.md';
+import Events from '@ionic-internal/component-api/v7/header/events.md';
+import Methods from '@ionic-internal/component-api/v7/header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/header/slots.md';
 
 <head>
   <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
diff --git a/docs/api/img.md b/docs/api/img.md
index 14c697c760d..441c9f4f27c 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/img/props.md';
+import Events from '@ionic-internal/component-api/v7/img/events.md';
+import Methods from '@ionic-internal/component-api/v7/img/methods.md';
+import Parts from '@ionic-internal/component-api/v7/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/img/slots.md';
 
 <head>
   <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md
index 2647dffdb87..39da6e7165f 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 5675984b447..12f68542b8a 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
 
 <head>
   <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
diff --git a/docs/api/input.md b/docs/api/input.md
index 4d7df8eef12..2e263cbf3c8 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/input/props.md';
+import Events from '@ionic-internal/component-api/v7/input/events.md';
+import Methods from '@ionic-internal/component-api/v7/input/methods.md';
+import Parts from '@ionic-internal/component-api/v7/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/input/slots.md';
 
 <head>
   <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 0f4dd8c40f8..79554071252 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v7/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
 
 <head>
   <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 60cf8b09383..5d440ed3ce8 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-group/props.md';
+import Events from '@ionic-internal/component-api/v7/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-group/slots.md';
 
 <head>
   <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index 800d1030f50..413e993de64 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-option/props.md';
+import Events from '@ionic-internal/component-api/v7/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index cbee8f5289b..e242c9d1012 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-options/props.md';
+import Events from '@ionic-internal/component-api/v7/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-options/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-options/slots.md';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 526f4d1263b..61cd5f58f20 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v7/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
 
 <head>
   <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
diff --git a/docs/api/item.md b/docs/api/item.md
index 09f89b1132b..6aaf0dd0609 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item/props.md';
+import Events from '@ionic-internal/component-api/v7/item/events.md';
+import Methods from '@ionic-internal/component-api/v7/item/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item/slots.md';
 
 <head>
   <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
diff --git a/docs/api/label.md b/docs/api/label.md
index a7b6422775e..e7ed495d15c 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/label/props.md';
+import Events from '@ionic-internal/component-api/v7/label/events.md';
+import Methods from '@ionic-internal/component-api/v7/label/methods.md';
+import Parts from '@ionic-internal/component-api/v7/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/label/slots.md';
 
 <head>
   <title>Item Label Color and Properties for Applications | ion-label</title>
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index f2ecb781627..4d684f1d4b8 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/list-header/props.md';
+import Events from '@ionic-internal/component-api/v7/list-header/events.md';
+import Methods from '@ionic-internal/component-api/v7/list-header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/list-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/list-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/list-header/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/list.md b/docs/api/list.md
index b5907823923..6aee4eaa556 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/list/props.md';
+import Events from '@ionic-internal/component-api/v7/list/events.md';
+import Methods from '@ionic-internal/component-api/v7/list/methods.md';
+import Parts from '@ionic-internal/component-api/v7/list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/list/slots.md';
 
 <head>
   <title>ion-list: Item List View Component for iOS and Android Apps</title>
diff --git a/docs/api/loading.md b/docs/api/loading.md
index f4e4f04f00c..2a9309c4ba7 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-loading"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/loading/props.md';
+import Events from '@ionic-internal/component-api/v7/loading/events.md';
+import Methods from '@ionic-internal/component-api/v7/loading/methods.md';
+import Parts from '@ionic-internal/component-api/v7/loading/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
 
 <head>
   <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index adba980b958..7d2be77fef0 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/menu-button/props.md';
+import Events from '@ionic-internal/component-api/v7/menu-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu-button/slots.md';
 
 <head>
   <title>Menu Button | ion-menu-button to Open an App Menu on A Page</title>
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index e6a10201362..3f6cef6f6fd 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md';
+import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
 
 <head>
   <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 8a12ff43350..1918527a15a 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/menu/props.md';
+import Events from '@ionic-internal/component-api/v7/menu/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu/slots.md';
 
 <head>
   <title>ion-menu: API Framework Docs for Types of Menu Components</title>
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 6e68846652e..7271d8368f6 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/modal/props.md';
+import Events from '@ionic-internal/component-api/v7/modal/events.md';
+import Methods from '@ionic-internal/component-api/v7/modal/methods.md';
+import Parts from '@ionic-internal/component-api/v7/modal/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/modal/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/modal/slots.md';
 
 <head>
   <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 30a8f3264ed..9e333a98ede 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/nav-link/props.md';
+import Events from '@ionic-internal/component-api/v7/nav-link/events.md';
+import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md';
+import Parts from '@ionic-internal/component-api/v7/nav-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
 
 <head>
   <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 727add0a05f..7a5d975232f 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/nav/props.md';
+import Events from '@ionic-internal/component-api/v7/nav/events.md';
+import Methods from '@ionic-internal/component-api/v7/nav/methods.md';
+import Parts from '@ionic-internal/component-api/v7/nav/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
 
 <head>
   <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
diff --git a/docs/api/note.md b/docs/api/note.md
index 5d142dd53b8..d5f00591b4d 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/note/props.md';
+import Events from '@ionic-internal/component-api/v7/note/events.md';
+import Methods from '@ionic-internal/component-api/v7/note/methods.md';
+import Parts from '@ionic-internal/component-api/v7/note/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/note/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/note/slots.md';
 
 <head>
   <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
diff --git a/docs/api/picker.md b/docs/api/picker.md
index eca018fb227..b2efb4c7bf2 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-picker"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/picker/props.md';
+import Events from '@ionic-internal/component-api/v7/picker/events.md';
+import Methods from '@ionic-internal/component-api/v7/picker/methods.md';
+import Parts from '@ionic-internal/component-api/v7/picker/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
 
 <head>
   <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
diff --git a/docs/api/popover.md b/docs/api/popover.md
index 33017292870..2878ce602b1 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/popover/props.md';
+import Events from '@ionic-internal/component-api/v7/popover/events.md';
+import Methods from '@ionic-internal/component-api/v7/popover/methods.md';
+import Parts from '@ionic-internal/component-api/v7/popover/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
 
 <head>
   <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 15a7c27fbca..73c3253f3ca 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/progress-bar/props.md';
+import Events from '@ionic-internal/component-api/v7/progress-bar/events.md';
+import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
 
 <head>
   <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index b083ee208b2..91969c1ed39 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/radio-group/props.md';
+import Events from '@ionic-internal/component-api/v7/radio-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/radio-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
 
 <head>
   <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
diff --git a/docs/api/radio.md b/docs/api/radio.md
index b5f94c0b8fb..66890457bef 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/radio/props.md';
+import Events from '@ionic-internal/component-api/v7/radio/events.md';
+import Methods from '@ionic-internal/component-api/v7/radio/methods.md';
+import Parts from '@ionic-internal/component-api/v7/radio/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
 
 <head>
   <title>ion-radio Component: Radio Property for iOS and Android</title>
diff --git a/docs/api/range.md b/docs/api/range.md
index d102bcbc971..fd091246945 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/range/props.md';
+import Events from '@ionic-internal/component-api/v7/range/events.md';
+import Methods from '@ionic-internal/component-api/v7/range/methods.md';
+import Parts from '@ionic-internal/component-api/v7/range/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/range/slots.md';
 
 <head>
   <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 1b80d4ef40c..263a057ce78 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/refresher-content/props.md';
+import Events from '@ionic-internal/component-api/v7/refresher-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/refresher-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/refresher-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 744200a218b..e6552ab795d 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/refresher/props.md';
+import Events from '@ionic-internal/component-api/v7/refresher/events.md';
+import Methods from '@ionic-internal/component-api/v7/refresher/methods.md';
+import Parts from '@ionic-internal/component-api/v7/refresher/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/refresher/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
 
 <head>
   <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index 674bc2561b9..07d1ccd5ddc 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
+import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
 
 <head>
   <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 1043f82b811..708b9202eb0 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/reorder/props.md';
+import Events from '@ionic-internal/component-api/v7/reorder/events.md';
+import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
+import Parts from '@ionic-internal/component-api/v7/reorder/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
 
 <head>
   <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 1861b13a117..5ab5bf38930 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/ripple-effect/props.md';
+import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md';
+import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md';
+import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/ripple-effect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/ripple-effect/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index ac4febd161d..591c39c28a1 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -2,12 +2,12 @@
 title: "ion-route-redirect"
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v7/route-redirect/props.md';
+import Events from '@ionic-internal/component-api/v7/route-redirect/events.md';
+import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.md';
+import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.md';
 
 <head>
   <title>ion-route-redirect Plugin: Redirect 'from' a URL 'to' Another URL</title>
diff --git a/docs/api/route.md b/docs/api/route.md
index 91b607971e4..b49c8766b0d 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -4,12 +4,12 @@ title: "ion-route"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v7/route/props.md';
+import Events from '@ionic-internal/component-api/v7/route/events.md';
+import Methods from '@ionic-internal/component-api/v7/route/methods.md';
+import Parts from '@ionic-internal/component-api/v7/route/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/route/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/route/slots.md';
 
 <head>
   <title>ion-route: API Route Component for Ionic Framework Apps</title>
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index ea95869eea0..96b22e69af5 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -6,12 +6,12 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/router-link/props.md';
+import Events from '@ionic-internal/component-api/v7/router-link/events.md';
+import Methods from '@ionic-internal/component-api/v7/router-link/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
 
 <head>
   <title>Router Link | Navigating The ion-router-link Component</title>
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md
index c15289ab77b..70c153815ed 100644
--- a/docs/api/router-outlet.md
+++ b/docs/api/router-outlet.md
@@ -2,12 +2,12 @@
 title: "ion-router-outlet"
 ---
 
-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 Props from '@ionic-internal/component-api/v7/router-outlet/props.md';
+import Events from '@ionic-internal/component-api/v7/router-outlet/events.md';
+import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md';
 
 
 
diff --git a/docs/api/router.md b/docs/api/router.md
index 48b8b522e04..dd386016be9 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -2,12 +2,12 @@
 title: "ion-router"
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v7/router/props.md';
+import Events from '@ionic-internal/component-api/v7/router/events.md';
+import Methods from '@ionic-internal/component-api/v7/router/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router/slots.md';
 
 <head>
   <title>ion-router: Router Component to Coordinate URL Navigation</title>
diff --git a/docs/api/row.md b/docs/api/row.md
index 48fc21c4ba0..3f8759fb490 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/row/props.md';
+import Events from '@ionic-internal/component-api/v7/row/events.md';
+import Methods from '@ionic-internal/component-api/v7/row/methods.md';
+import Parts from '@ionic-internal/component-api/v7/row/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/row/slots.md';
 
 <head>
   <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index c11c14c4c74..bbca192fdb6 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/searchbar/props.md';
+import Events from '@ionic-internal/component-api/v7/searchbar/events.md';
+import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/searchbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
 
 <head>
   <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index 2567e2ecbeb..04c383655b3 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/segment-button/props.md';
+import Events from '@ionic-internal/component-api/v7/segment-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/segment-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/segment-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md';
 
 <head>
   <title>ion-segment-button | Segment Button Icon and Segment Value</title>
diff --git a/docs/api/segment.md b/docs/api/segment.md
index 0ff953288d5..b4bdb45b6cb 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/segment/props.md';
+import Events from '@ionic-internal/component-api/v7/segment/events.md';
+import Methods from '@ionic-internal/component-api/v7/segment/methods.md';
+import Parts from '@ionic-internal/component-api/v7/segment/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/segment/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/segment/slots.md';
 
 <head>
   <title>ion-segment: API Documentation for Segmented Controls</title>
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index 73dbf015e2b..bb2d2e7e6f9 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/select-option/props.md';
+import Events from '@ionic-internal/component-api/v7/select-option/events.md';
+import Methods from '@ionic-internal/component-api/v7/select-option/methods.md';
+import Parts from '@ionic-internal/component-api/v7/select-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
 
 <head>
   <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
diff --git a/docs/api/select.md b/docs/api/select.md
index d3792bfe52a..92ab5b6e70f 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/select/props.md';
+import Events from '@ionic-internal/component-api/v7/select/events.md';
+import Methods from '@ionic-internal/component-api/v7/select/methods.md';
+import Parts from '@ionic-internal/component-api/v7/select/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/select/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/select/slots.md';
 
 <head>
   <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index 7b627127105..438a5b98ef9 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md';
+import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md';
+import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md';
+import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
 
 <head>
   <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index 7d805fa697e..dc5b55a36c3 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/spinner/props.md';
+import Events from '@ionic-internal/component-api/v7/spinner/events.md';
+import Methods from '@ionic-internal/component-api/v7/spinner/methods.md';
+import Parts from '@ionic-internal/component-api/v7/spinner/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
 
 <head>
   <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 87ffe6c1ae0..00f000e10c4 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
+import Events from '@ionic-internal/component-api/v7/split-pane/events.md';
+import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md';
+import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/split-pane/slots.md';
 
 <head>
   <title>ion-split-pane: Split Plane View for Menus and Multi-View Layouts</title>
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index 5cd9d97fe3d..cb69107d111 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -4,12 +4,12 @@ title: "ion-tab-bar"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v7/tab-bar/props.md';
+import Events from '@ionic-internal/component-api/v7/tab-bar/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
 
 <head>
   <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</title>
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index 0fb186e0773..d22b0db8699 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -4,12 +4,12 @@ title: "ion-tab-button"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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 Props from '@ionic-internal/component-api/v7/tab-button/props.md';
+import Events from '@ionic-internal/component-api/v7/tab-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md';
 
 
 
diff --git a/docs/api/tab.md b/docs/api/tab.md
index 899e3c6c484..3dd6576e4a8 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -2,12 +2,12 @@
 title: "ion-tab"
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v7/tab/props.md';
+import Events from '@ionic-internal/component-api/v7/tab/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
 
 <head>
   <title>ion-tab - Ionic Framework Application Component</title>
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 0920727d489..3da90b12e70 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-tabs"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/tabs/props.md';
+import Events from '@ionic-internal/component-api/v7/tabs/events.md';
+import Methods from '@ionic-internal/component-api/v7/tabs/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tabs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
 
 <head>
   <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
diff --git a/docs/api/text.md b/docs/api/text.md
index ea9db032f6c..30f03bd454f 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/text/props.md';
+import Events from '@ionic-internal/component-api/v7/text/events.md';
+import Methods from '@ionic-internal/component-api/v7/text/methods.md';
+import Parts from '@ionic-internal/component-api/v7/text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/text/slots.md';
 
 <head>
   <title>ion-text: Ionic App Component to Style or Change Text Color</title>
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index bfd0e16d1f6..bf611656010 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/textarea/props.md';
+import Events from '@ionic-internal/component-api/v7/textarea/events.md';
+import Methods from '@ionic-internal/component-api/v7/textarea/methods.md';
+import Parts from '@ionic-internal/component-api/v7/textarea/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/textarea/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/textarea/slots.md';
 
 <head>
   <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index cf353200805..05d9bc86d5d 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/thumbnail/props.md';
+import Events from '@ionic-internal/component-api/v7/thumbnail/events.md';
+import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.md';
+import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
 
 <head>
   <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
diff --git a/docs/api/title.md b/docs/api/title.md
index 4eb8eee4ac1..bde08e3b21f 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/title/props.md';
+import Events from '@ionic-internal/component-api/v7/title/events.md';
+import Methods from '@ionic-internal/component-api/v7/title/methods.md';
+import Parts from '@ionic-internal/component-api/v7/title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/title/slots.md';
 
 <head>
   <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
diff --git a/docs/api/toast.md b/docs/api/toast.md
index bf74e97cdd6..eab8f3f70e8 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -4,12 +4,12 @@ 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';
+import Props from '@ionic-internal/component-api/v7/toast/props.md';
+import Events from '@ionic-internal/component-api/v7/toast/events.md';
+import Methods from '@ionic-internal/component-api/v7/toast/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toast/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
 
 <head>
   <title>ion-toast Component: A Dismissible App Notification Alert</title>
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index 78119d191ae..bf8925e2fb6 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/toggle/props.md';
+import Events from '@ionic-internal/component-api/v7/toggle/events.md';
+import Methods from '@ionic-internal/component-api/v7/toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
 
 <head>
   <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index 9db8ed00aa8..c6c9790ce6e 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/toolbar/props.md';
+import Events from '@ionic-internal/component-api/v7/toolbar/events.md';
+import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toolbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
 
 <head>
   <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8746715cbe1..260bea66bec 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -2,6 +2,8 @@ const path = require('path');
 const prismic = require('@prismicio/client');
 const fetch = require('node-fetch');
 
+const VERSIONS_JSON = require('./versions.json');
+
 const BASE_URL = '/docs';
 
 module.exports = {
@@ -314,6 +316,12 @@ module.exports = {
         },
       };
     },
+    [
+      path.resolve(__dirname, 'plugins', 'docusaurus-plugin-ionic-component-api'),
+      {
+        versions: VERSIONS_JSON,
+      },
+    ],
   ],
   themes: [
     [
diff --git a/package.json b/package.json
index 8121f2287bb..9dfee0ace00 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "crowdin:sync": "docusaurus write-translations && crowdin upload && crowdin download",
     "deploy": "docusaurus deploy",
     "docusaurus": "docusaurus",
-    "generate-markdown": "node scripts/native && concurrently \"node scripts/api\" \"node scripts/cli\" \"node scripts/release-notes\"",
+    "generate-markdown": "node scripts/native && concurrently \"node scripts/cli\" \"node scripts/release-notes\"",
     "serve": "docusaurus serve",
     "prestart": "npm run generate-markdown",
     "start": "docusaurus start",
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
new file mode 100644
index 00000000000..8e12c52ad3a
--- /dev/null
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -0,0 +1,220 @@
+const fetch = require('node-fetch');
+
+module.exports = function (context, options) {
+  return {
+    name: 'docusaurus-plugin-ionic-component-api',
+    async loadContent() {
+      // Finds the plugin options for @docusaurus/plugin-content-docs
+      const docsPluginOptions = context.siteConfig.plugins.find(
+        (plugin) => Array.isArray(plugin) && plugin[0] === '@docusaurus/plugin-content-docs'
+      )[1];
+
+      const data = [];
+      const currentVersion = docsPluginOptions.versions.current;
+
+      /**
+       * Generates the markdown files for all components in a given version.
+       * @param {*} version The version, e.g.: v6
+       * @param {*} npmTag The npm tag, e.g.: 6 or next
+       * @param {*} isCurrentVersion Whether or not this is the current version of the docs
+       */
+      const generateMarkdownForVersion = async (version, npmTag, isCurrentVersion) => {
+        const response = await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
+        const { components } = await response.json();
+
+        const names = components.map((component) => component.tag.slice(4));
+        // matches all relative markdown links to a component, e.g. (../button)
+        COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
+
+        components.forEach((comp) => {
+          const compTag = comp.tag.slice(4);
+          const outDir = getDirectoryPath(compTag, version, isCurrentVersion);
+
+          data.push({
+            outDir,
+            componentTag: compTag,
+            version,
+            props: renderProperties(comp),
+            events: renderEvents(comp),
+            methods: renderMethods(comp),
+            parts: renderParts(comp),
+            customProps: renderCustomProps(comp),
+            slots: renderSlots(comp),
+          });
+        });
+      };
+
+      for (const version of options.versions) {
+        const npmTag = version.slice(1);
+        await generateMarkdownForVersion(version, npmTag, false);
+      }
+
+      const npmTag = currentVersion.banner === 'unreleased' ? 'next' : currentVersion.path.slice(1);
+      // Latest version
+      await generateMarkdownForVersion(currentVersion.path, npmTag, true);
+
+      return data;
+    },
+    async contentLoaded({ content, actions }) {
+      const { createData } = actions;
+      const promises = [];
+
+      for (const data of content) {
+        const basePath = `${data.version}/${data.componentTag}`;
+        /**
+         * createData will create a file within the generated ./docusaurus
+         * directory within the plugin directory.
+         */
+        promises.push(
+          createData(`${basePath}/props.md`, data.props),
+          createData(`${basePath}/events.md`, data.events),
+          createData(`${basePath}/methods.md`, data.methods),
+          createData(`${basePath}/parts.md`, data.parts),
+          createData(`${basePath}/custom-props.md`, data.customProps),
+          createData(`${basePath}/slots.md`, data.slots)
+        );
+      }
+
+      await Promise.all(promises);
+    },
+    configureWebpack(config, isServer, utils) {
+      /**
+       * Adds a custom import alias to the webpack configuration, so that the markdown files
+       * can import the auto-generated markdown files from: @ionic-internal/component-api/{version}/{componentTag}
+       */
+      return {
+        resolve: {
+          alias: {
+            '@ionic-internal/component-api': `${context.siteDir}/.docusaurus/docusaurus-plugin-ionic-component-api/default`,
+          },
+        },
+      };
+    },
+  };
+};
+
+/**
+ * Calculates the path to the directory where the auto-generated markdown files are stored.
+ * @param {*} componentTag The tag name of the component, e.g.: ion-button
+ * @param {*} version The version of Ionic that the file pertains to, e.g.: v6
+ * @param {*} isCurrentVersion Whether the version is the current version of the docs
+ * @returns The path to the directory where the auto-generated markdown files are stored.
+ */
+function getDirectoryPath(componentTag, version, isCurrentVersion) {
+  if (isCurrentVersion) {
+    return `./docs/api/auto-generated/${componentTag}`;
+  }
+  return `./versioned_docs/version-${version}/api/auto-generated/${componentTag}`;
+}
+
+/**
+ * Formats line breaks in a multiline string to be displayed in a table.
+ * @param {*} str The string to format
+ * @returns The formatted string
+ */
+function formatMultiline(str) {
+  return str.split('\n\n').join('<br /><br />').split('\n').join(' ');
+}
+
+function renderProperties({ props: properties }) {
+  if (properties.length === 0) {
+    return 'No properties available for this component.';
+  }
+
+  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
+  return `
+${properties
+  .map((prop) => {
+    const isDeprecated = prop.deprecation !== undefined;
+
+    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
+
+    return `
+### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
+
+| | |
+| --- | --- |
+| **Description** | ${formatMultiline(docs)} |
+| **Attribute** | \`${prop.attr}\` |
+| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
+| **Default** | \`${prop.default}\` |
+
+`;
+  })
+  .join('\n')}`;
+}
+
+function renderEvents({ events }) {
+  if (events.length === 0) {
+    return 'No events available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderMethods({ methods }) {
+  if (methods.length === 0) {
+    return 'No public methods available for this component.';
+  }
+
+  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
+  return `
+${methods
+  .map(
+    (method) => `
+### ${method.name}
+
+| | |
+| --- | --- |
+| **Description** | ${formatMultiline(method.docs)} |
+| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
+`
+  )
+  .join('\n')}
+
+`;
+}
+
+function renderParts({ parts }) {
+  if (parts.length === 0) {
+    return 'No CSS shadow parts available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${parts.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderCustomProps({ styles: customProps }) {
+  if (customProps.length === 0) {
+    return 'No CSS custom properties available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${customProps.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderSlots({ slots }) {
+  if (slots.length === 0) {
+    return 'No slots available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')}
+
+`;
+}
diff --git a/scripts/api.js b/scripts/api.js
deleted file mode 100644
index 470aadb449f..00000000000
--- a/scripts/api.js
+++ /dev/null
@@ -1,156 +0,0 @@
-const fetch = require('node-fetch');
-const fs = require('fs');
-
-/**
- *
- * This script will create the autogenerated MDX files for each component.
- *
- * Creates files for:
- * - Properties
- * - Events
- * - Methods
- * - CSS Shadow Parts
- * - Custom Properties
- * - Slots
- *
- * The auto-generated directory & files should be gitignored, since they are created from the published core.json
- * and should never be edited manually.
- */
-
-(async function () {
-  const response = await fetch('https://unpkg.com/@ionic/docs/core.json');
-  const { components } = await response.json();
-
-  const names = components.map((component) => component.tag.slice(4));
-  // matches all relative markdown links to a component, e.g. (../button)
-  COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
-
-  components.forEach((comp) => {
-    const compTag = comp.tag.slice(4);
-    writeAutoGeneratedPage(compTag, 'props', renderProperties(comp));
-    writeAutoGeneratedPage(compTag, 'events', renderEvents(comp));
-    writeAutoGeneratedPage(compTag, 'methods', renderMethods(comp));
-    writeAutoGeneratedPage(compTag, 'parts', renderParts(comp));
-    writeAutoGeneratedPage(compTag, 'custom-props', renderCustomProps(comp));
-    writeAutoGeneratedPage(compTag, 'slots', renderSlots(comp));
-  });
-})();
-
-function writeAutoGeneratedPage(componentTag, fileName, data) {
-  const dir = `./static/auto-generated/${componentTag}`;
-  const path = `${dir}/${fileName}.md`;
-  fs.mkdirSync(dir, { recursive: true });
-  fs.writeFileSync(path, data);
-}
-
-/**
- * Formats line breaks in a multiline string to be displayed in a table.
- * @param {*} str The string to format
- * @returns The formatted string
- */
-function formatMultiline(str) {
-  return str.split('\n\n').join('<br /><br />').split('\n').join(' ');
-}
-
-function renderProperties({ props: properties }) {
-  if (properties.length === 0) {
-    return 'No properties available for this component.';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-${properties
-  .map((prop) => {
-    const isDeprecated = prop.deprecation !== undefined;
-
-    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
-
-    return `
-### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
-
-| | |
-| --- | --- |
-| **Description** | ${formatMultiline(docs)} |
-| **Attribute** | \`${prop.attr}\` |
-| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
-| **Default** | \`${prop.default}\` |
-
-`;
-  })
-  .join('\n')}`;
-}
-
-function renderEvents({ events }) {
-  if (events.length === 0) {
-    return 'No events available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderMethods({ methods }) {
-  if (methods.length === 0) {
-    return 'No public methods available for this component.';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-${methods
-  .map(
-    (method) => `
-### ${method.name}
-
-| | |
-| --- | --- |
-| **Description** | ${formatMultiline(method.docs)} |
-| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
-`
-  )
-  .join('\n')}
-
-`;
-}
-
-function renderParts({ parts }) {
-  if (parts.length === 0) {
-    return 'No CSS shadow parts available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${parts.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderCustomProps({ styles: customProps }) {
-  if (customProps.length === 0) {
-    return 'No CSS custom properties available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${customProps.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderSlots({ slots }) {
-  if (slots.length === 0) {
-    return 'No slots available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')}
-
-`;
-}
diff --git a/static/.gitignore b/static/.gitignore
deleted file mode 100644
index 6dddbb371e3..00000000000
--- a/static/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-auto-generated/
diff --git a/versioned_docs/version-v6/api/accordion-group.md b/versioned_docs/version-v6/api/accordion-group.md
index 2880703001c..80dac608394 100644
--- a/versioned_docs/version-v6/api/accordion-group.md
+++ b/versioned_docs/version-v6/api/accordion-group.md
@@ -1,12 +1,13 @@
 ---
-title: "ion-accordion-group"
+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 Props from '@ionic-internal/component-api/v6/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v6/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/accordion-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -16,7 +17,6 @@ Accordion group is a container for accordion instances. It manages the state of
 
 See the [Accordion](./accordion) documentation for more information.
 
-
 ## Interfaces
 
 ### AccordionGroupChangeEventDetail
@@ -38,22 +38,26 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
-
 ## 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
index 803f0efbfe4..3cf53e1823f 100644
--- a/versioned_docs/version-v6/api/accordion.md
+++ b/versioned_docs/version-v6/api/accordion.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/accordion/props.md';
+import Events from '@ionic-internal/component-api/v6/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v6/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v6/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/accordion/slots.md';
 
 <head>
   <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
diff --git a/versioned_docs/version-v6/api/action-sheet.md b/versioned_docs/version-v6/api/action-sheet.md
index 3f2917d979f..67d0b6d193b 100644
--- a/versioned_docs/version-v6/api/action-sheet.md
+++ b/versioned_docs/version-v6/api/action-sheet.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v6/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v6/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v6/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/action-sheet/slots.md';
 
 <head>
   <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.md
index 19b8bd7177a..6a045bd3afc 100644
--- a/versioned_docs/version-v6/api/alert.md
+++ b/versioned_docs/version-v6/api/alert.md
@@ -5,12 +5,12 @@ 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';
+import Props from '@ionic-internal/component-api/v6/alert/props.md';
+import Events from '@ionic-internal/component-api/v6/alert/events.md';
+import Methods from '@ionic-internal/component-api/v6/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v6/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/alert/slots.md';
 
 <head>
   <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.md
index 98125d4aa8e..144734dd1c6 100644
--- a/versioned_docs/version-v6/api/app.md
+++ b/versioned_docs/version-v6/api/app.md
@@ -1,47 +1,55 @@
 ---
-title: "ion-app"
+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';
+
+import Props from '@ionic-internal/component-api/v6/app/props.md';
+import Events from '@ionic-internal/component-api/v6/app/events.md';
+import Methods from '@ionic-internal/component-api/v6/app/methods.md';
+import Parts from '@ionic-internal/component-api/v6/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
-
+- [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
index 0f32507e1d7..da0f858dabc 100644
--- a/versioned_docs/version-v6/api/avatar.md
+++ b/versioned_docs/version-v6/api/avatar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/avatar/props.md';
+import Events from '@ionic-internal/component-api/v6/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v6/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/avatar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/avatar/slots.md';
 
 <head>
   <title>ion-avatar: Circular Application Avatar Icon Component</title>
diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.md
index d74db2d2cfa..6d7472f98ef 100644
--- a/versioned_docs/version-v6/api/back-button.md
+++ b/versioned_docs/version-v6/api/back-button.md
@@ -1,23 +1,26 @@
 ---
-title: "ion-back-button"
+title: 'ion-back-button'
 ---
-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';
+
+import Props from '@ionic-internal/component-api/v6/back-button/props.md';
+import Events from '@ionic-internal/component-api/v6/back-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/back-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/back-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/back-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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" />
 
-
 The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized.
 
 ## Basic Usage
@@ -39,19 +42,25 @@ import Custom from '@site/static/usage/v6/back-button/custom/index.md';
 Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set.
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/versioned_docs/version-v6/api/backdrop.md b/versioned_docs/version-v6/api/backdrop.md
index 97217b36b59..ae1ecd965b4 100644
--- a/versioned_docs/version-v6/api/backdrop.md
+++ b/versioned_docs/version-v6/api/backdrop.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/backdrop/props.md';
+import Events from '@ionic-internal/component-api/v6/backdrop/events.md';
+import Methods from '@ionic-internal/component-api/v6/backdrop/methods.md';
+import Parts from '@ionic-internal/component-api/v6/backdrop/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/backdrop/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/backdrop/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/badge.md b/versioned_docs/version-v6/api/badge.md
index 202b2f32878..539e07309f4 100644
--- a/versioned_docs/version-v6/api/badge.md
+++ b/versioned_docs/version-v6/api/badge.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/badge/props.md';
+import Events from '@ionic-internal/component-api/v6/badge/events.md';
+import Methods from '@ionic-internal/component-api/v6/badge/methods.md';
+import Parts from '@ionic-internal/component-api/v6/badge/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/badge/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/badge/slots.md';
 
 <head>
   <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
diff --git a/versioned_docs/version-v6/api/breadcrumb.md b/versioned_docs/version-v6/api/breadcrumb.md
index 5be2aa6c695..c964549933b 100644
--- a/versioned_docs/version-v6/api/breadcrumb.md
+++ b/versioned_docs/version-v6/api/breadcrumb.md
@@ -1,18 +1,18 @@
 ---
-title: "ion-breadcrumb"
+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 Props from '@ionic-internal/component-api/v6/breadcrumb/props.md';
+import Events from '@ionic-internal/component-api/v6/breadcrumb/events.md';
+import Methods from '@ionic-internal/component-api/v6/breadcrumb/methods.md';
+import Parts from '@ionic-internal/component-api/v6/breadcrumb/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/breadcrumb/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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.
@@ -38,23 +38,26 @@ interface BreadcrumbCustomEvent extends CustomEvent {
 }
 ```
 
-
-
-
 ## 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
index 561539a973e..471f5dd4291 100644
--- a/versioned_docs/version-v6/api/breadcrumbs.md
+++ b/versioned_docs/version-v6/api/breadcrumbs.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/breadcrumbs/props.md';
+import Events from '@ionic-internal/component-api/v6/breadcrumbs/events.md';
+import Methods from '@ionic-internal/component-api/v6/breadcrumbs/methods.md';
+import Parts from '@ionic-internal/component-api/v6/breadcrumbs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/breadcrumbs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/breadcrumbs/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/button.md b/versioned_docs/version-v6/api/button.md
index a78f98da7a8..897d4d3f8e5 100644
--- a/versioned_docs/version-v6/api/button.md
+++ b/versioned_docs/version-v6/api/button.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/button/props.md';
+import Events from '@ionic-internal/component-api/v6/button/events.md';
+import Methods from '@ionic-internal/component-api/v6/button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/button/slots.md';
 
 <head>
   <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
diff --git a/versioned_docs/version-v6/api/buttons.md b/versioned_docs/version-v6/api/buttons.md
index c22bd4c0ad5..d20c05adee6 100644
--- a/versioned_docs/version-v6/api/buttons.md
+++ b/versioned_docs/version-v6/api/buttons.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/buttons/props.md';
+import Events from '@ionic-internal/component-api/v6/buttons/events.md';
+import Methods from '@ionic-internal/component-api/v6/buttons/methods.md';
+import Parts from '@ionic-internal/component-api/v6/buttons/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/buttons/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/buttons/slots.md';
 
 <head>
   <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
diff --git a/versioned_docs/version-v6/api/card-content.md b/versioned_docs/version-v6/api/card-content.md
index 647cba00897..58f621b3d89 100644
--- a/versioned_docs/version-v6/api/card-content.md
+++ b/versioned_docs/version-v6/api/card-content.md
@@ -1,35 +1,40 @@
 ---
-title: "ion-card-content"
+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';
+import Props from '@ionic-internal/component-api/v6/card-content/props.md';
+import Events from '@ionic-internal/component-api/v6/card-content/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index 2e52467ed43..0461d60b54e 100644
--- a/versioned_docs/version-v6/api/card-header.md
+++ b/versioned_docs/version-v6/api/card-header.md
@@ -1,37 +1,42 @@
 ---
-title: "ion-card-header"
+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 Props from '@ionic-internal/component-api/v6/card-header/props.md';
+import Events from '@ionic-internal/component-api/v6/card-header/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-header/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index ec72784cd99..2779735e71f 100644
--- a/versioned_docs/version-v6/api/card-subtitle.md
+++ b/versioned_docs/version-v6/api/card-subtitle.md
@@ -1,37 +1,42 @@
 ---
-title: "ion-card-subtitle"
+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 Props from '@ionic-internal/component-api/v6/card-subtitle/props.md';
+import Events from '@ionic-internal/component-api/v6/card-subtitle/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-subtitle/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-subtitle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-subtitle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index 33b24158eb5..ee72f051ed3 100644
--- a/versioned_docs/version-v6/api/card-title.md
+++ b/versioned_docs/version-v6/api/card-title.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-card-title"
+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 Props from '@ionic-internal/component-api/v6/card-title/props.md';
+import Events from '@ionic-internal/component-api/v6/card-title/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-title/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index fda33f2e804..c67dd2a27b8 100644
--- a/versioned_docs/version-v6/api/card.md
+++ b/versioned_docs/version-v6/api/card.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/card/props.md';
+import Events from '@ionic-internal/component-api/v6/card/events.md';
+import Methods from '@ionic-internal/component-api/v6/card/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/card/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.md
index 7344a77f0d1..727c09811c9 100644
--- a/versioned_docs/version-v6/api/checkbox.md
+++ b/versioned_docs/version-v6/api/checkbox.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v6/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v6/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v6/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/checkbox/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/checkbox/slots.md';
 
 <head>
   <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
diff --git a/versioned_docs/version-v6/api/chip.md b/versioned_docs/version-v6/api/chip.md
index 46e13e98292..91f6bb5e264 100644
--- a/versioned_docs/version-v6/api/chip.md
+++ b/versioned_docs/version-v6/api/chip.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/chip/props.md';
+import Events from '@ionic-internal/component-api/v6/chip/events.md';
+import Methods from '@ionic-internal/component-api/v6/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v6/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/chip/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/chip/slots.md';
 
 <head>
   <title>ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.md
index e5872b4f6a1..5a19f67b49b 100644
--- a/versioned_docs/version-v6/api/col.md
+++ b/versioned_docs/version-v6/api/col.md
@@ -1,49 +1,54 @@
 ---
-title: "ion-col"
+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';
+
+import Props from '@ionic-internal/component-api/v6/col/props.md';
+import Events from '@ionic-internal/component-api/v6/col/events.md';
+import Methods from '@ionic-internal/component-api/v6/col/methods.md';
+import Parts from '@ionic-internal/component-api/v6/col/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/col/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index 528f39b7958..912c05d4515 100644
--- a/versioned_docs/version-v6/api/content.md
+++ b/versioned_docs/version-v6/api/content.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/content/props.md';
+import Events from '@ionic-internal/component-api/v6/content/events.md';
+import Methods from '@ionic-internal/component-api/v6/content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/content/slots.md';
 
 <head>
   <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
diff --git a/versioned_docs/version-v6/api/datetime-button.md b/versioned_docs/version-v6/api/datetime-button.md
index 78e691b231d..dd76005abc2 100644
--- a/versioned_docs/version-v6/api/datetime-button.md
+++ b/versioned_docs/version-v6/api/datetime-button.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/datetime-button/props.md';
+import Events from '@ionic-internal/component-api/v6/datetime-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/datetime-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/datetime-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/datetime-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/datetime-button/slots.md';
 
 <head>
   <title>ion-datetime-button: Ionic API Input for interacting with Datetime picker</title>
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index ffe8e673934..a4abc8d33a6 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/datetime/props.md';
+import Events from '@ionic-internal/component-api/v6/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v6/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v6/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/datetime/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/datetime/slots.md';
 
 import Basic from '@site/static/usage/v6/datetime/basic/index.md';
 
diff --git a/versioned_docs/version-v6/api/fab-button.md b/versioned_docs/version-v6/api/fab-button.md
index ab86a48426e..bd1c98cc848 100644
--- a/versioned_docs/version-v6/api/fab-button.md
+++ b/versioned_docs/version-v6/api/fab-button.md
@@ -1,23 +1,26 @@
 ---
-title: "ion-fab-button"
+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';
+
+import Props from '@ionic-internal/component-api/v6/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v6/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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.
@@ -25,19 +28,25 @@ As the name suggests, FABs generally float over the content in a fixed position.
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/fab-list.md b/versioned_docs/version-v6/api/fab-list.md
index a0659a394d7..36d1040bda6 100644
--- a/versioned_docs/version-v6/api/fab-list.md
+++ b/versioned_docs/version-v6/api/fab-list.md
@@ -1,12 +1,13 @@
 ---
-title: "ion-fab-list"
+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 Props from '@ionic-internal/component-api/v6/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v6/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab-list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/fab-list/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -17,19 +18,25 @@ The fab list component is a container for multiple [fab buttons](./fab-button).
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/fab.md b/versioned_docs/version-v6/api/fab.md
index 5ecfbbd012d..008063d0f2e 100644
--- a/versioned_docs/version-v6/api/fab.md
+++ b/versioned_docs/version-v6/api/fab.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/fab/props.md';
+import Events from '@ionic-internal/component-api/v6/fab/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/fab/slots.md';
 
 <head>
   <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/footer.md b/versioned_docs/version-v6/api/footer.md
index 0a4820b5713..a2c7b74fad8 100644
--- a/versioned_docs/version-v6/api/footer.md
+++ b/versioned_docs/version-v6/api/footer.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/footer/props.md';
+import Events from '@ionic-internal/component-api/v6/footer/events.md';
+import Methods from '@ionic-internal/component-api/v6/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v6/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/footer/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/footer/slots.md';
 
 <head>
   <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
diff --git a/versioned_docs/version-v6/api/grid.md b/versioned_docs/version-v6/api/grid.md
index 22ea8c2f0f1..9eedd1955ab 100644
--- a/versioned_docs/version-v6/api/grid.md
+++ b/versioned_docs/version-v6/api/grid.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/grid/props.md';
+import Events from '@ionic-internal/component-api/v6/grid/events.md';
+import Methods from '@ionic-internal/component-api/v6/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v6/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/grid/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/grid/slots.md';
 
 <head>
   <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
diff --git a/versioned_docs/version-v6/api/header.md b/versioned_docs/version-v6/api/header.md
index a746f955361..d3305b4c027 100644
--- a/versioned_docs/version-v6/api/header.md
+++ b/versioned_docs/version-v6/api/header.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/header/props.md';
+import Events from '@ionic-internal/component-api/v6/header/events.md';
+import Methods from '@ionic-internal/component-api/v6/header/methods.md';
+import Parts from '@ionic-internal/component-api/v6/header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/header/slots.md';
 
 <head>
   <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/img.md b/versioned_docs/version-v6/api/img.md
index aa1010e46b5..44e3adbb1d3 100644
--- a/versioned_docs/version-v6/api/img.md
+++ b/versioned_docs/version-v6/api/img.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/img/props.md';
+import Events from '@ionic-internal/component-api/v6/img/events.md';
+import Methods from '@ionic-internal/component-api/v6/img/methods.md';
+import Parts from '@ionic-internal/component-api/v6/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/img/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/img/slots.md';
 
 <head>
   <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.md b/versioned_docs/version-v6/api/infinite-scroll-content.md
index 2647dffdb87..53b4829e731 100644
--- a/versioned_docs/version-v6/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v6/api/infinite-scroll-content.md
@@ -1,13 +1,13 @@
 ---
-title: "ion-infinite-scroll-content"
+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 Props from '@ionic-internal/component-api/v6/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/infinite-scroll-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -16,19 +16,25 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/infinite-scroll.md b/versioned_docs/version-v6/api/infinite-scroll.md
index 0ea2be497e9..e8788dde143 100644
--- a/versioned_docs/version-v6/api/infinite-scroll.md
+++ b/versioned_docs/version-v6/api/infinite-scroll.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/infinite-scroll/props.md';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/infinite-scroll/slots.md';
 
 <head>
   <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.md
index f9c328996e7..3f439459ada 100644
--- a/versioned_docs/version-v6/api/input.md
+++ b/versioned_docs/version-v6/api/input.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/input/props.md';
+import Events from '@ionic-internal/component-api/v6/input/events.md';
+import Methods from '@ionic-internal/component-api/v6/input/methods.md';
+import Parts from '@ionic-internal/component-api/v6/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/input/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/input/slots.md';
 
 <head>
   <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
diff --git a/versioned_docs/version-v6/api/item-divider.md b/versioned_docs/version-v6/api/item-divider.md
index 381d9eb414a..cf5cb8cad4a 100644
--- a/versioned_docs/version-v6/api/item-divider.md
+++ b/versioned_docs/version-v6/api/item-divider.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v6/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-divider/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-divider/slots.md';
 
 <head>
   <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/item-group.md b/versioned_docs/version-v6/api/item-group.md
index c7920c017dd..c4909aa35b8 100644
--- a/versioned_docs/version-v6/api/item-group.md
+++ b/versioned_docs/version-v6/api/item-group.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item-group/props.md';
+import Events from '@ionic-internal/component-api/v6/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-group/slots.md';
 
 <head>
   <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
diff --git a/versioned_docs/version-v6/api/item-option.md b/versioned_docs/version-v6/api/item-option.md
index 800d1030f50..8ef658c9bd8 100644
--- a/versioned_docs/version-v6/api/item-option.md
+++ b/versioned_docs/version-v6/api/item-option.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-item-option"
+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';
+
+import Props from '@ionic-internal/component-api/v6/item-option/props.md';
+import Events from '@ionic-internal/component-api/v6/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index cbee8f5289b..6035574119c 100644
--- a/versioned_docs/version-v6/api/item-options.md
+++ b/versioned_docs/version-v6/api/item-options.md
@@ -1,50 +1,55 @@
 ---
-title: "ion-item-options"
+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';
+
+import Props from '@ionic-internal/component-api/v6/item-options/props.md';
+import Events from '@ionic-internal/component-api/v6/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-options/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index dba424f2b7f..62e496d51e8 100644
--- a/versioned_docs/version-v6/api/item-sliding.md
+++ b/versioned_docs/version-v6/api/item-sliding.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v6/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-sliding/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-sliding/slots.md';
 
 <head>
   <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.md
index eb3df16d32e..cb318d9fb04 100644
--- a/versioned_docs/version-v6/api/item.md
+++ b/versioned_docs/version-v6/api/item.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item/props.md';
+import Events from '@ionic-internal/component-api/v6/item/events.md';
+import Methods from '@ionic-internal/component-api/v6/item/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item/slots.md';
 
 <head>
   <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
diff --git a/versioned_docs/version-v6/api/label.md b/versioned_docs/version-v6/api/label.md
index 329f40c56a4..4b17032fe56 100644
--- a/versioned_docs/version-v6/api/label.md
+++ b/versioned_docs/version-v6/api/label.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/label/props.md';
+import Events from '@ionic-internal/component-api/v6/label/events.md';
+import Methods from '@ionic-internal/component-api/v6/label/methods.md';
+import Parts from '@ionic-internal/component-api/v6/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/label/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/label/slots.md';
 
 <head>
   <title>Item Label Color and Properties for Applications | ion-label</title>
diff --git a/versioned_docs/version-v6/api/list-header.md b/versioned_docs/version-v6/api/list-header.md
index 2410ffc044f..bf16332d0fc 100644
--- a/versioned_docs/version-v6/api/list-header.md
+++ b/versioned_docs/version-v6/api/list-header.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/list-header/props.md';
+import Events from '@ionic-internal/component-api/v6/list-header/events.md';
+import Methods from '@ionic-internal/component-api/v6/list-header/methods.md';
+import Parts from '@ionic-internal/component-api/v6/list-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/list-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/list-header/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/list.md b/versioned_docs/version-v6/api/list.md
index 336fe851f08..054686768c7 100644
--- a/versioned_docs/version-v6/api/list.md
+++ b/versioned_docs/version-v6/api/list.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/list/props.md';
+import Events from '@ionic-internal/component-api/v6/list/events.md';
+import Methods from '@ionic-internal/component-api/v6/list/methods.md';
+import Parts from '@ionic-internal/component-api/v6/list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/list/slots.md';
 
 <head>
   <title>ion-list: Item List View Component for iOS and Android Apps</title>
diff --git a/versioned_docs/version-v6/api/loading.md b/versioned_docs/version-v6/api/loading.md
index c9bd57dd163..2c61ce88c14 100644
--- a/versioned_docs/version-v6/api/loading.md
+++ b/versioned_docs/version-v6/api/loading.md
@@ -5,12 +5,12 @@ 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';
+import Props from '@ionic-internal/component-api/v6/loading/props.md';
+import Events from '@ionic-internal/component-api/v6/loading/events.md';
+import Methods from '@ionic-internal/component-api/v6/loading/methods.md';
+import Parts from '@ionic-internal/component-api/v6/loading/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/loading/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/loading/slots.md';
 
 <head>
   <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
diff --git a/versioned_docs/version-v6/api/menu-button.md b/versioned_docs/version-v6/api/menu-button.md
index adba980b958..180f59dab48 100644
--- a/versioned_docs/version-v6/api/menu-button.md
+++ b/versioned_docs/version-v6/api/menu-button.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-menu-button"
+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';
+
+import Props from '@ionic-internal/component-api/v6/menu-button/props.md';
+import Events from '@ionic-internal/component-api/v6/menu-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/menu-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/menu-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/menu-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index e6a10201362..a68507aa4f4 100644
--- a/versioned_docs/version-v6/api/menu-toggle.md
+++ b/versioned_docs/version-v6/api/menu-toggle.md
@@ -1,44 +1,52 @@
 ---
-title: "ion-menu-toggle"
+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';
+
+import Props from '@ionic-internal/component-api/v6/menu-toggle/props.md';
+import Events from '@ionic-internal/component-api/v6/menu-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v6/menu-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v6/menu-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/menu-toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index 323f90dd18b..e6ba58d6e82 100644
--- a/versioned_docs/version-v6/api/menu.md
+++ b/versioned_docs/version-v6/api/menu.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/menu/props.md';
+import Events from '@ionic-internal/component-api/v6/menu/events.md';
+import Methods from '@ionic-internal/component-api/v6/menu/methods.md';
+import Parts from '@ionic-internal/component-api/v6/menu/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/menu/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/menu/slots.md';
 
 <head>
   <title>ion-menu: API Framework Docs for Types of Menu Components</title>
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
index 68d44332e4e..0ad556d9173 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/modal/props.md';
+import Events from '@ionic-internal/component-api/v6/modal/events.md';
+import Methods from '@ionic-internal/component-api/v6/modal/methods.md';
+import Parts from '@ionic-internal/component-api/v6/modal/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/modal/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/modal/slots.md';
 
 <head>
   <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
diff --git a/versioned_docs/version-v6/api/nav-link.md b/versioned_docs/version-v6/api/nav-link.md
index 30a8f3264ed..8d5857465dc 100644
--- a/versioned_docs/version-v6/api/nav-link.md
+++ b/versioned_docs/version-v6/api/nav-link.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-nav-link"
+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';
+
+import Props from '@ionic-internal/component-api/v6/nav-link/props.md';
+import Events from '@ionic-internal/component-api/v6/nav-link/events.md';
+import Methods from '@ionic-internal/component-api/v6/nav-link/methods.md';
+import Parts from '@ionic-internal/component-api/v6/nav-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/nav-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index 0e4262885d2..330f38561c4 100644
--- a/versioned_docs/version-v6/api/nav.md
+++ b/versioned_docs/version-v6/api/nav.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/nav/props.md';
+import Events from '@ionic-internal/component-api/v6/nav/events.md';
+import Methods from '@ionic-internal/component-api/v6/nav/methods.md';
+import Parts from '@ionic-internal/component-api/v6/nav/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/nav/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/nav/slots.md';
 
 <head>
   <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/note.md b/versioned_docs/version-v6/api/note.md
index f512aaf7753..fd8cbc92fdf 100644
--- a/versioned_docs/version-v6/api/note.md
+++ b/versioned_docs/version-v6/api/note.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/note/props.md';
+import Events from '@ionic-internal/component-api/v6/note/events.md';
+import Methods from '@ionic-internal/component-api/v6/note/methods.md';
+import Parts from '@ionic-internal/component-api/v6/note/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/note/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/note/slots.md';
 
 <head>
   <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/picker.md b/versioned_docs/version-v6/api/picker.md
index 8eec3438db2..1c3ab46eab4 100644
--- a/versioned_docs/version-v6/api/picker.md
+++ b/versioned_docs/version-v6/api/picker.md
@@ -1,12 +1,13 @@
 ---
 title: 'ion-picker'
 ---
-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';
+
+import Props from '@ionic-internal/component-api/v6/picker/props.md';
+import Events from '@ionic-internal/component-api/v6/picker/events.md';
+import Methods from '@ionic-internal/component-api/v6/picker/methods.md';
+import Parts from '@ionic-internal/component-api/v6/picker/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/picker/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/picker/slots.md';
 
 <head>
   <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/popover.md b/versioned_docs/version-v6/api/popover.md
index a65065904f5..041db143901 100644
--- a/versioned_docs/version-v6/api/popover.md
+++ b/versioned_docs/version-v6/api/popover.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/popover/props.md';
+import Events from '@ionic-internal/component-api/v6/popover/events.md';
+import Methods from '@ionic-internal/component-api/v6/popover/methods.md';
+import Parts from '@ionic-internal/component-api/v6/popover/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/popover/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/popover/slots.md';
 
 <head>
   <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
diff --git a/versioned_docs/version-v6/api/progress-bar.md b/versioned_docs/version-v6/api/progress-bar.md
index f28e826e60d..e5f75f384ef 100644
--- a/versioned_docs/version-v6/api/progress-bar.md
+++ b/versioned_docs/version-v6/api/progress-bar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/progress-bar/props.md';
+import Events from '@ionic-internal/component-api/v6/progress-bar/events.md';
+import Methods from '@ionic-internal/component-api/v6/progress-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/progress-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/progress-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/progress-bar/slots.md';
 
 <head>
   <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
diff --git a/versioned_docs/version-v6/api/radio-group.md b/versioned_docs/version-v6/api/radio-group.md
index b083ee208b2..dcfb8138e77 100644
--- a/versioned_docs/version-v6/api/radio-group.md
+++ b/versioned_docs/version-v6/api/radio-group.md
@@ -1,24 +1,26 @@
 ---
-title: "ion-radio-group"
+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';
+
+import Props from '@ionic-internal/component-api/v6/radio-group/props.md';
+import Events from '@ionic-internal/component-api/v6/radio-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/radio-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/radio-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/radio-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
@@ -40,21 +42,26 @@ interface RadioGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
 ## 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
index a841a557642..ab82907bea1 100644
--- a/versioned_docs/version-v6/api/radio.md
+++ b/versioned_docs/version-v6/api/radio.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/radio/props.md';
+import Events from '@ionic-internal/component-api/v6/radio/events.md';
+import Methods from '@ionic-internal/component-api/v6/radio/methods.md';
+import Parts from '@ionic-internal/component-api/v6/radio/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/radio/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/radio/slots.md';
 
 <head>
   <title>ion-radio Component: Radio Property for iOS and Android</title>
diff --git a/versioned_docs/version-v6/api/range.md b/versioned_docs/version-v6/api/range.md
index 98492b83314..75a7c4af8fa 100644
--- a/versioned_docs/version-v6/api/range.md
+++ b/versioned_docs/version-v6/api/range.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/range/props.md';
+import Events from '@ionic-internal/component-api/v6/range/events.md';
+import Methods from '@ionic-internal/component-api/v6/range/methods.md';
+import Parts from '@ionic-internal/component-api/v6/range/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/range/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/range/slots.md';
 
 <head>
   <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
diff --git a/versioned_docs/version-v6/api/refresher-content.md b/versioned_docs/version-v6/api/refresher-content.md
index 1b80d4ef40c..c0091c89d0f 100644
--- a/versioned_docs/version-v6/api/refresher-content.md
+++ b/versioned_docs/version-v6/api/refresher-content.md
@@ -1,35 +1,40 @@
 ---
-title: "ion-refresher-content"
+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';
+import Props from '@ionic-internal/component-api/v6/refresher-content/props.md';
+import Events from '@ionic-internal/component-api/v6/refresher-content/events.md';
+import Methods from '@ionic-internal/component-api/v6/refresher-content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/refresher-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/refresher-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index 1f69dd3d268..31914ee2e7d 100644
--- a/versioned_docs/version-v6/api/refresher.md
+++ b/versioned_docs/version-v6/api/refresher.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/refresher/props.md';
+import Events from '@ionic-internal/component-api/v6/refresher/events.md';
+import Methods from '@ionic-internal/component-api/v6/refresher/methods.md';
+import Parts from '@ionic-internal/component-api/v6/refresher/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/refresher/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/refresher/slots.md';
 
 <head>
   <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/reorder-group.md b/versioned_docs/version-v6/api/reorder-group.md
index 674bc2561b9..2c8615cee46 100644
--- a/versioned_docs/version-v6/api/reorder-group.md
+++ b/versioned_docs/version-v6/api/reorder-group.md
@@ -1,26 +1,28 @@
 ---
-title: "ion-reorder-group"
+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';
+
+import Props from '@ionic-internal/component-api/v6/reorder-group/props.md';
+import Events from '@ionic-internal/component-api/v6/reorder-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/reorder-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/reorder-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/reorder-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
@@ -44,21 +46,26 @@ interface ItemReorderCustomEvent extends CustomEvent {
 }
 ```
 
-
 ## 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
index e7d57830079..38301d71bbe 100644
--- a/versioned_docs/version-v6/api/reorder.md
+++ b/versioned_docs/version-v6/api/reorder.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/reorder/props.md';
+import Events from '@ionic-internal/component-api/v6/reorder/events.md';
+import Methods from '@ionic-internal/component-api/v6/reorder/methods.md';
+import Parts from '@ionic-internal/component-api/v6/reorder/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/reorder/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/reorder/slots.md';
 
 <head>
   <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
diff --git a/versioned_docs/version-v6/api/ripple-effect.md b/versioned_docs/version-v6/api/ripple-effect.md
index 83f5e0b8486..e2def63ac03 100644
--- a/versioned_docs/version-v6/api/ripple-effect.md
+++ b/versioned_docs/version-v6/api/ripple-effect.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/ripple-effect/props.md';
+import Events from '@ionic-internal/component-api/v6/ripple-effect/events.md';
+import Methods from '@ionic-internal/component-api/v6/ripple-effect/methods.md';
+import Parts from '@ionic-internal/component-api/v6/ripple-effect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/ripple-effect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/ripple-effect/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/route-redirect.md b/versioned_docs/version-v6/api/route-redirect.md
index ac4febd161d..a2ace00dbea 100644
--- a/versioned_docs/version-v6/api/route-redirect.md
+++ b/versioned_docs/version-v6/api/route-redirect.md
@@ -1,35 +1,36 @@
 ---
-title: "ion-route-redirect"
+title: 'ion-route-redirect'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/route-redirect/props.md';
+import Events from '@ionic-internal/component-api/v6/route-redirect/events.md';
+import Methods from '@ionic-internal/component-api/v6/route-redirect/methods.md';
+import Parts from '@ionic-internal/component-api/v6/route-redirect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/route-redirect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
 
-
 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.
+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.
+- `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
 
@@ -48,9 +49,6 @@ Take the following two redirects:
 
 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
@@ -96,19 +94,25 @@ 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/route.md b/versioned_docs/version-v6/api/route.md
index 46803354c95..e8be6cb3627 100644
--- a/versioned_docs/version-v6/api/route.md
+++ b/versioned_docs/version-v6/api/route.md
@@ -1,32 +1,33 @@
 ---
-title: "ion-route"
+title: 'ion-route'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v6/route/props.md';
+import Events from '@ionic-internal/component-api/v6/route/events.md';
+import Methods from '@ionic-internal/component-api/v6/route/methods.md';
+import Parts from '@ionic-internal/component-api/v6/route/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/route/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
 
-
-
 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.
+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.
@@ -42,9 +43,6 @@ interface NavigationHookOptions {
 }
 ```
 
-
-
-
 ## Usage
 
 <Tabs groupId="framework" defaultValue="javascript" values={[{ value: 'javascript', label: 'Javascript' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
@@ -69,23 +67,23 @@ 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');
@@ -99,23 +97,21 @@ const confirmDiscardChanges = async () => {
     {
       text: 'Discard',
       role: 'destructive',
-    }
+    },
   ];
-  
+
   document.body.appendChild(alert);
-  
+
   await alert.present();
-  
+
   const { role } = await alert.onDidDismiss();
-  
-  return (role === 'Cancel') ? false : true;
-}
-```
 
+  return role === 'Cancel' ? false : true;
+};
+```
 
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```typescript
@@ -124,7 +120,7 @@ import { alertController } from '@ionic/core';
 
 @Component({
   tag: 'router-example',
-  styleUrl: 'router-example.css'
+  styleUrl: 'router-example.css',
 })
 export class RouterExample {
   render() {
@@ -135,29 +131,29 @@ export class RouterExample {
         <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({
@@ -171,22 +167,20 @@ const confirmDiscardChanges = async () => {
       {
         text: 'Discard',
         role: 'destructive',
-      }
-    ]
+      },
+    ],
   });
-  
+
   await alert.present();
-  
+
   const { role } = await alert.onDidDismiss();
-  
-  return (role === 'Cancel') ? false : true;
-}
-```
 
+  return role === 'Cancel' ? false : true;
+};
+```
 
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -204,24 +198,24 @@ const confirmDiscardChanges = async () => {
 
   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?',
@@ -234,16 +228,16 @@ const confirmDiscardChanges = async () => {
         {
           text: 'Discard',
           role: 'destructive',
-        }
-      ]
+        },
+      ],
     });
-    
+
     await alert.present();
-    
+
     const { role } = await alert.onDidDismiss();
-    
-    return (role === 'Cancel') ? false : true;
-  }
+
+    return role === 'Cancel' ? false : true;
+  };
 </script>
 ```
 
@@ -252,19 +246,25 @@ const confirmDiscardChanges = async () => {
 </Tabs>
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/router-link.md b/versioned_docs/version-v6/api/router-link.md
index dd87a4c9354..bcccd576c42 100644
--- a/versioned_docs/version-v6/api/router-link.md
+++ b/versioned_docs/version-v6/api/router-link.md
@@ -1,59 +1,61 @@
 ---
-title: "ion-router-link"
+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"
+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';
+import Props from '@ionic-internal/component-api/v6/router-link/props.md';
+import Events from '@ionic-internal/component-api/v6/router-link/events.md';
+import Methods from '@ionic-internal/component-api/v6/router-link/methods.md';
+import Parts from '@ionic-internal/component-api/v6/router-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/router-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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}
-/>
 
+<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.
+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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/router-outlet.md b/versioned_docs/version-v6/api/router-outlet.md
index c15289ab77b..882aaaa1b29 100644
--- a/versioned_docs/version-v6/api/router-outlet.md
+++ b/versioned_docs/version-v6/api/router-outlet.md
@@ -1,21 +1,18 @@
 ---
-title: "ion-router-outlet"
+title: 'ion-router-outlet'
 ---
 
-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 Props from '@ionic-internal/component-api/v6/router-outlet/props.md';
+import Events from '@ionic-internal/component-api/v6/router-outlet/events.md';
+import Methods from '@ionic-internal/component-api/v6/router-outlet/methods.md';
+import Parts from '@ionic-internal/component-api/v6/router-outlet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/router-outlet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/router-outlet/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 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.
@@ -24,36 +21,37 @@ Although router outlet has methods for navigating around, it's recommended to us
 
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.md
index 1f70135b7d2..32c31f6d4e9 100644
--- a/versioned_docs/version-v6/api/router.md
+++ b/versioned_docs/version-v6/api/router.md
@@ -1,29 +1,30 @@
 ---
-title: "ion-router"
+title: 'ion-router'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/router/props.md';
+import Events from '@ionic-internal/component-api/v6/router/events.md';
+import Methods from '@ionic-internal/component-api/v6/router/methods.md';
+import Parts from '@ionic-internal/component-api/v6/router/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/router/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
 
-
 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. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
+Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
 :::
 
-
 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.
 
@@ -62,8 +63,6 @@ interface RouterCustomEvent extends CustomEvent {
 }
 ```
 
-
-
 ## Usage
 
 ```html
@@ -90,24 +89,28 @@ interface RouterCustomEvent extends CustomEvent {
   <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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/row.md b/versioned_docs/version-v6/api/row.md
index 48fc21c4ba0..4a01eb80f00 100644
--- a/versioned_docs/version-v6/api/row.md
+++ b/versioned_docs/version-v6/api/row.md
@@ -1,16 +1,20 @@
 ---
-title: "ion-row"
+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';
+
+import Props from '@ionic-internal/component-api/v6/row/props.md';
+import Events from '@ionic-internal/component-api/v6/row/events.md';
+import Methods from '@ionic-internal/component-api/v6/row/methods.md';
+import Parts from '@ionic-internal/component-api/v6/row/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/row/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
@@ -22,28 +26,30 @@ Rows are horizontal components of the [grid](./grid) system and contain varying
 
 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
index 5e75b8dc412..ce0c62b2a41 100644
--- a/versioned_docs/version-v6/api/searchbar.md
+++ b/versioned_docs/version-v6/api/searchbar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/searchbar/props.md';
+import Events from '@ionic-internal/component-api/v6/searchbar/events.md';
+import Methods from '@ionic-internal/component-api/v6/searchbar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/searchbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/searchbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/searchbar/slots.md';
 
 <head>
   <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
diff --git a/versioned_docs/version-v6/api/segment-button.md b/versioned_docs/version-v6/api/segment-button.md
index a5a87ccd7d9..0e7d688742b 100644
--- a/versioned_docs/version-v6/api/segment-button.md
+++ b/versioned_docs/version-v6/api/segment-button.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/segment-button/props.md';
+import Events from '@ionic-internal/component-api/v6/segment-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/segment-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/segment-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/segment-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/segment-button/slots.md';
 
 <head>
   <title>ion-segment-button | Segment Button Icon and Segment Value</title>
diff --git a/versioned_docs/version-v6/api/segment.md b/versioned_docs/version-v6/api/segment.md
index 14f795ac0ed..1283792ad65 100644
--- a/versioned_docs/version-v6/api/segment.md
+++ b/versioned_docs/version-v6/api/segment.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/segment/props.md';
+import Events from '@ionic-internal/component-api/v6/segment/events.md';
+import Methods from '@ionic-internal/component-api/v6/segment/methods.md';
+import Parts from '@ionic-internal/component-api/v6/segment/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/segment/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/segment/slots.md';
 
 <head>
   <title>ion-segment: API Documentation for Segmented Controls</title>
diff --git a/versioned_docs/version-v6/api/select-option.md b/versioned_docs/version-v6/api/select-option.md
index 73dbf015e2b..4d4b3e2c90d 100644
--- a/versioned_docs/version-v6/api/select-option.md
+++ b/versioned_docs/version-v6/api/select-option.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-select-option"
+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';
+
+import Props from '@ionic-internal/component-api/v6/select-option/props.md';
+import Events from '@ionic-internal/component-api/v6/select-option/events.md';
+import Methods from '@ionic-internal/component-api/v6/select-option/methods.md';
+import Parts from '@ionic-internal/component-api/v6/select-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/select-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/select.md b/versioned_docs/version-v6/api/select.md
index 3682cc13f04..89509c1becc 100644
--- a/versioned_docs/version-v6/api/select.md
+++ b/versioned_docs/version-v6/api/select.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/select/props.md';
+import Events from '@ionic-internal/component-api/v6/select/events.md';
+import Methods from '@ionic-internal/component-api/v6/select/methods.md';
+import Parts from '@ionic-internal/component-api/v6/select/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/select/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/select/slots.md';
 
 <head>
   <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
diff --git a/versioned_docs/version-v6/api/skeleton-text.md b/versioned_docs/version-v6/api/skeleton-text.md
index 86ec40d8a6f..f26f3d1f6ac 100644
--- a/versioned_docs/version-v6/api/skeleton-text.md
+++ b/versioned_docs/version-v6/api/skeleton-text.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/skeleton-text/props.md';
+import Events from '@ionic-internal/component-api/v6/skeleton-text/events.md';
+import Methods from '@ionic-internal/component-api/v6/skeleton-text/methods.md';
+import Parts from '@ionic-internal/component-api/v6/skeleton-text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/skeleton-text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/skeleton-text/slots.md';
 
 <head>
   <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.md
index 6fb9aedacdf..58f5ec52068 100644
--- a/versioned_docs/version-v6/api/slide.md
+++ b/versioned_docs/version-v6/api/slide.md
@@ -1,17 +1,20 @@
 ---
-title: "ion-slide"
+title: 'ion-slide'
 ---
 
-import Props from '@site/static/auto-generated/slide/props.md';
-import Events from '@site/static/auto-generated/slide/events.md';
-import Methods from '@site/static/auto-generated/slide/methods.md';
-import Parts from '@site/static/auto-generated/slide/parts.md';
-import CustomProps from '@site/static/auto-generated/slide/custom-props.md';
-import Slots from '@site/static/auto-generated/slide/slots.md';
+import Props from '@ionic-internal/component-api/v6/slide/props.md';
+import Events from '@ionic-internal/component-api/v6/slide/events.md';
+import Methods from '@ionic-internal/component-api/v6/slide/methods.md';
+import Parts from '@ionic-internal/component-api/v6/slide/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/slide/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/slide/slots.md';
 
 <head>
   <title>ion-slide | Slide API Component for Ionic Framework Apps</title>
-  <meta name="description" content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides." />
+  <meta
+    name="description"
+    content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides."
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -20,30 +23,32 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 This component has been deprecated in favor of using Swiper.js directly. Please see the [Slides Documentation](./slides#migration) for a migration guide.
 :::
 
-
 The Slide component is a child component of [Slides](./slides). The template
 should be written as `ion-slide`. Any slide content should be written
 in this component and it should be used in conjunction with [Slides](./slides).
 
 See the [Slides API Docs](./slides) for more usage information.
 
-
-
-
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/slides.md b/versioned_docs/version-v6/api/slides.md
index 6cef08674c6..0c8ee78edc8 100644
--- a/versioned_docs/version-v6/api/slides.md
+++ b/versioned_docs/version-v6/api/slides.md
@@ -1,40 +1,39 @@
 ---
-title: "ion-slides"
+title: 'ion-slides'
 hide_table_of_contents: true
-demoUrl: "/docs/demos/api/slides/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html"
+demoUrl: '/docs/demos/api/slides/index.html'
+demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import TOCInline from '@theme/TOCInline';
 
-import Props from '@site/static/auto-generated/slides/props.md';
-import Events from '@site/static/auto-generated/slides/events.md';
-import Methods from '@site/static/auto-generated/slides/methods.md';
-import Parts from '@site/static/auto-generated/slides/parts.md';
-import CustomProps from '@site/static/auto-generated/slides/custom-props.md';
-import Slots from '@site/static/auto-generated/slides/slots.md';
+import Props from '@ionic-internal/component-api/v6/slides/props.md';
+import Events from '@ionic-internal/component-api/v6/slides/events.md';
+import Methods from '@ionic-internal/component-api/v6/slides/methods.md';
+import Parts from '@ionic-internal/component-api/v6/slides/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/slides/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/slides/slots.md';
 
 <head>
   <title>Ion-Slides: Mobile Touch Slider with Built-In & Custom Animation</title>
-  <meta name="description" content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android." />
+  <meta
+    name="description"
+    content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android."
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+<TOCInline toc={toc} maxHeadingLevel={2} />
 
 :::note
 This component has been deprecated in favor of using Swiper.js directly. Please see the [migration guide](#migration) below.
 :::
 
-
 The Slides component is a multi-section container. Each section can be swiped
 or dragged between. It contains any number of [Slide](slide.md) components.
 
@@ -85,7 +84,7 @@ Since the underlying technology that powers your slides is the same, the migrati
 
 [Migration for Ionic Vue users](../vue/slides)
 
-------
+---
 
 The following documentation applies to the `ion-slides` component.
 
@@ -93,7 +92,6 @@ The following documentation applies to the `ion-slides` component.
 
 By default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.
 
-
 ### Coverflow
 
 ```typescript
@@ -118,13 +116,11 @@ const slideOpts = {
     },
     setTranslate() {
       const swiper = this;
-      const {
-        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $
-      } = swiper;
+      const { width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $ } = swiper;
       const params = swiper.params.coverflowEffect;
       const isHorizontal = swiper.isHorizontal();
       const transform$$1 = swiper.translate;
-      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
+      const center = isHorizontal ? -transform$$1 + swiperWidth / 2 : -transform$$1 + swiperHeight / 2;
       const rotate = isHorizontal ? params.rotate : -params.rotate;
       const translate = params.depth;
       // Each slide offset from center
@@ -132,31 +128,35 @@ const slideOpts = {
         const $slideEl = slides.eq(i);
         const slideSize = slidesSizesGrid[i];
         const slideOffset = $slideEl[0].swiperSlideOffset;
-        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
+        const offsetMultiplier = ((center - slideOffset - slideSize / 2) / slideSize) * params.modifier;
 
-         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
+        let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
         let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
         // var rotateZ = 0
         let translateZ = -translate * Math.abs(offsetMultiplier);
 
-         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
-        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
+        let translateY = isHorizontal ? 0 : params.stretch * offsetMultiplier;
+        let translateX = isHorizontal ? params.stretch * offsetMultiplier : 0;
 
-         // Fix for ultra small values
+        // Fix for ultra small values
         if (Math.abs(translateX) < 0.001) translateX = 0;
         if (Math.abs(translateY) < 0.001) translateY = 0;
         if (Math.abs(translateZ) < 0.001) translateZ = 0;
         if (Math.abs(rotateY) < 0.001) rotateY = 0;
         if (Math.abs(rotateX) < 0.001) rotateX = 0;
 
-         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
 
-         $slideEl.transform(slideTransform);
+        $slideEl.transform(slideTransform);
         $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
         if (params.slideShadows) {
           // Set shadows
-          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          let $shadowBeforeEl = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-left')
+            : $slideEl.find('.swiper-slide-shadow-top');
+          let $shadowAfterEl = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-right')
+            : $slideEl.find('.swiper-slide-shadow-bottom');
           if ($shadowBeforeEl.length === 0) {
             $shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
             $slideEl.append($shadowBeforeEl);
@@ -166,11 +166,11 @@ const slideOpts = {
             $slideEl.append($shadowAfterEl);
           }
           if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
-          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
+          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
         }
       }
 
-       // Set correct perspective for IE10
+      // Set correct perspective for IE10
       if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
         const ws = $wrapperEl[0].style;
         ws.perspectiveOrigin = `${center}px 50%`;
@@ -180,11 +180,13 @@ const slideOpts = {
       const swiper = this;
       swiper.slides
         .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .find(
+          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
+        )
         .transition(duration);
-    }
-  }
-}
+    },
+  },
+};
 ```
 
 ### Cube
@@ -199,7 +201,7 @@ const slideOpts = {
     shadowScale: 0.94,
   },
   on: {
-    beforeInit: function() {
+    beforeInit: function () {
       const swiper = this;
       swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
       swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
@@ -218,10 +220,16 @@ const slideOpts = {
       this.params = Object.assign(this.params, overwriteParams);
       this.originalParams = Object.assign(this.originalParams, overwriteParams);
     },
-    setTranslate: function() {
+    setTranslate: function () {
       const swiper = this;
       const {
-        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,
+        $el,
+        $wrapperEl,
+        slides,
+        width: swiperWidth,
+        height: swiperHeight,
+        rtlTranslate: rtl,
+        size: swiperSize,
       } = swiper;
       const params = swiper.params.cubeEffect;
       const isHorizontal = swiper.isHorizontal();
@@ -268,31 +276,37 @@ const slideOpts = {
           tx = 0;
           tz = -round * 4 * swiperSize;
         } else if ((slideIndex - 2) % 4 === 0) {
-          tx = swiperSize + (round * 4 * swiperSize);
+          tx = swiperSize + round * 4 * swiperSize;
           tz = swiperSize;
         } else if ((slideIndex - 3) % 4 === 0) {
           tx = -swiperSize;
-          tz = (3 * swiperSize) + (swiperSize * 4 * round);
+          tz = 3 * swiperSize + swiperSize * 4 * round;
         }
         if (rtl) {
           tx = -tx;
         }
 
-         if (!isHorizontal) {
+        if (!isHorizontal) {
           ty = tx;
           tx = 0;
         }
 
-         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
+        const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${
+          isHorizontal ? slideAngle : 0
+        }deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
         if (progress <= 1 && progress > -1) {
-          wrapperRotate = (slideIndex * 90) + (progress * 90);
-          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);
+          wrapperRotate = slideIndex * 90 + progress * 90;
+          if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
         }
         $slideEl.transform(transform$$1);
         if (params.slideShadows) {
           // Set shadows
-          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          let shadowBefore = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-left')
+            : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-right')
+            : $slideEl.find('.swiper-slide-shadow-bottom');
           if (shadowBefore.length === 0) {
             shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
             $slideEl.append(shadowBefore);
@@ -312,39 +326,50 @@ const slideOpts = {
         'transform-origin': `50% 50% -${swiperSize / 2}px`,
       });
 
-       if (params.shadow) {
+      if (params.shadow) {
         if (isHorizontal) {
-          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
-        } else {
-          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);
-          const multiplier = 1.5 - (
-            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)
-            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)
+          $cubeShadowEl.transform(
+            `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${
+              -swiperWidth / 2
+            }px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`
           );
+        } else {
+          const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
+          const multiplier =
+            1.5 - (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2 + Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2);
           const scale1 = params.shadowScale;
           const scale2 = params.shadowScale / multiplier;
           const offset$$1 = params.shadowOffset;
-          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);
+          $cubeShadowEl.transform(
+            `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset$$1}px, ${
+              -swiperHeight / 2 / scale2
+            }px) rotateX(-90deg)`
+          );
         }
       }
 
-      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;
-      $wrapperEl
-        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);
+      const zFactor = swiper.browser.isSafari || swiper.browser.isUiWebView ? -swiperSize / 2 : 0;
+      $wrapperEl.transform(
+        `translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${
+          swiper.isHorizontal() ? -wrapperRotate : 0
+        }deg)`
+      );
     },
-    setTransition: function(duration) {
+    setTransition: function (duration) {
       const swiper = this;
       const { $el, slides } = swiper;
       slides
         .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .find(
+          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
+        )
         .transition(duration);
       if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
         $el.find('.swiper-cube-shadow').transition(duration);
       }
     },
-  }
-}
+  },
+};
 ```
 
 ### Fade
@@ -407,8 +432,8 @@ const slideOpts = {
         });
       }
     },
-  }
-}
+  },
+};
 ```
 
 ### Flip
@@ -455,25 +480,32 @@ const slideOpts = {
           rotateY = -rotateY;
         }
 
-         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
+        $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
 
-         if (swiper.params.flipEffect.slideShadows) {
+        if (swiper.params.flipEffect.slideShadows) {
           // Set shadows
-          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          let shadowBefore = swiper.isHorizontal()
+            ? $slideEl.find('.swiper-slide-shadow-left')
+            : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = swiper.isHorizontal()
+            ? $slideEl.find('.swiper-slide-shadow-right')
+            : $slideEl.find('.swiper-slide-shadow-bottom');
           if (shadowBefore.length === 0) {
-            shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`);
+            shadowBefore = swiper.$(
+              `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`
+            );
             $slideEl.append(shadowBefore);
           }
           if (shadowAfter.length === 0) {
-            shadowAfter = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`);
+            shadowAfter = swiper.$(
+              `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`
+            );
             $slideEl.append(shadowAfter);
           }
           if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
           if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
         }
-        $slideEl
-          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
+        $slideEl.transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
       }
     },
     setTransition(duration) {
@@ -481,7 +513,9 @@ const slideOpts = {
       const { slides, activeIndex, $wrapperEl } = swiper;
       slides
         .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .find(
+          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
+        )
         .transition(duration);
       if (swiper.params.virtualTranslate && duration !== 0) {
         let eventTriggered = false;
@@ -498,13 +532,11 @@ const slideOpts = {
           }
         });
       }
-    }
-  }
+    },
+  },
 };
 ```
 
-
-
 ## 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' }]}>
@@ -530,14 +562,14 @@ import { Component } from '@angular/core';
         </ion-slide>
       </ion-slides>
     </ion-content>
-  `
+  `,
 })
 export class SlideExample {
   // Optional parameters to pass to the swiper instance.
   // See https://swiperjs.com/swiper-api for valid options.
   slideOpts = {
     initialSlide: 1,
-    speed: 400
+    speed: 400,
   };
   constructor() {}
 }
@@ -550,10 +582,8 @@ ion-slides {
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -581,8 +611,8 @@ var slides = document.querySelector('ion-slides');
 // See https://swiperjs.com/swiper-api for valid options.
 slides.options = {
   initialSlide: 1,
-  speed: 400
-}
+  speed: 400,
+};
 ```
 
 ```css
@@ -592,10 +622,8 @@ ion-slides {
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -606,7 +634,7 @@ import { IonSlides, IonSlide, IonContent } from '@ionic/react';
 // See https://swiperjs.com/swiper-api for valid options.
 const slideOpts = {
   initialSlide: 1,
-  speed: 400
+  speed: 400,
 };
 
 export const SlidesExample: React.FC = () => (
@@ -635,7 +663,6 @@ ion-slides {
 
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -643,14 +670,14 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'slides-example',
-  styleUrl: 'slides-example.css'
+  styleUrl: 'slides-example.css',
 })
 export class SlidesExample {
   // Optional parameters to pass to the swiper instance.
   // See https://swiperjs.com/swiper-api for valid options.
   private slideOpts = {
     initialSlide: 1,
-    speed: 400
+    speed: 400,
   };
 
   render() {
@@ -669,7 +696,7 @@ export class SlidesExample {
             <h1>Slide 3</h1>
           </ion-slide>
         </ion-slides>
-      </ion-content>
+      </ion-content>,
     ];
   }
 }
@@ -684,7 +711,6 @@ ion-slides {
 
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -702,44 +728,48 @@ ion-slides {
   </ion-slides>
 </template>
 
-
 <script>
-import { IonSlides, IonSlide } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonSlides, IonSlide },
-  setup() {
-    // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
-    const slideOpts = {
-      initialSlide: 1,
-      speed: 400
-    };
-    return { slideOpts }
-  }
-});
+  import { IonSlides, IonSlide } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSlides, IonSlide },
+    setup() {
+      // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
+      const slideOpts = {
+        initialSlide: 1,
+        speed: 400,
+      };
+      return { slideOpts };
+    },
+  });
 </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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/spinner.md b/versioned_docs/version-v6/api/spinner.md
index abe69520719..e6bf760869c 100644
--- a/versioned_docs/version-v6/api/spinner.md
+++ b/versioned_docs/version-v6/api/spinner.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/spinner/props.md';
+import Events from '@ionic-internal/component-api/v6/spinner/events.md';
+import Methods from '@ionic-internal/component-api/v6/spinner/methods.md';
+import Parts from '@ionic-internal/component-api/v6/spinner/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/spinner/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/spinner/slots.md';
 
 <head>
   <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
diff --git a/versioned_docs/version-v6/api/split-pane.md b/versioned_docs/version-v6/api/split-pane.md
index fa5f03fc403..87b29ff3b2f 100644
--- a/versioned_docs/version-v6/api/split-pane.md
+++ b/versioned_docs/version-v6/api/split-pane.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/split-pane/props.md';
+import Events from '@ionic-internal/component-api/v6/split-pane/events.md';
+import Methods from '@ionic-internal/component-api/v6/split-pane/methods.md';
+import Parts from '@ionic-internal/component-api/v6/split-pane/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/split-pane/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/split-pane/slots.md';
 
 <head>
   <title>ion-split-pane: Split Plane View for Menus and Multi-View Layouts</title>
diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.md
index 5cd9d97fe3d..cbf15815ba7 100644
--- a/versioned_docs/version-v6/api/tab-bar.md
+++ b/versioned_docs/version-v6/api/tab-bar.md
@@ -1,31 +1,31 @@
 ---
-title: "ion-tab-bar"
+title: 'ion-tab-bar'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v6/tab-bar/props.md';
+import Events from '@ionic-internal/component-api/v6/tab-bar/events.md';
+import Methods from '@ionic-internal/component-api/v6/tab-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tab-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tab-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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" />
 
-
 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' }]}>
@@ -51,7 +51,6 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
 
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -78,7 +77,6 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
 
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -106,10 +104,8 @@ export const TabBarExample: React.FC = () => (
 );
 ```
 
-
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -117,7 +113,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-bar-example',
-  styleUrl: 'tab-bar-example.css'
+  styleUrl: 'tab-bar-example.css',
 })
 export class TabBarExample {
   render() {
@@ -140,16 +136,14 @@ export class TabBarExample {
             <ion-icon name="settings"></ion-icon>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>
+      </ion-tabs>,
     ];
   }
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -171,16 +165,16 @@ export class TabBarExample {
 </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 }
-  }
-});
+  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>
 ```
 
@@ -189,19 +183,25 @@ export default defineComponent({
 </Tabs>
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/tab-button.md b/versioned_docs/version-v6/api/tab-button.md
index 1ac51b3c34e..a989563be88 100644
--- a/versioned_docs/version-v6/api/tab-button.md
+++ b/versioned_docs/version-v6/api/tab-button.md
@@ -1,30 +1,25 @@
 ---
-title: "ion-tab-button"
+title: 'ion-tab-button'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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 Props from '@ionic-internal/component-api/v6/tab-button/props.md';
+import Events from '@ionic-internal/component-api/v6/tab-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/tab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/tab-button/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 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' }]}>
@@ -58,10 +53,8 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
 </ion-tabs>
 ```
 
-
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -108,10 +101,8 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
 </ion-tabs>
 ```
 
-
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -149,10 +140,8 @@ export const TabButtonExample: React.FC = () => (
 );
 ```
 
-
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -160,7 +149,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-button-example',
-  styleUrl: 'tab-button-example.css'
+  styleUrl: 'tab-button-example.css',
 })
 export class TabButtonExample {
   render() {
@@ -205,16 +194,14 @@ export class TabButtonExample {
             <ion-label>About</ion-label>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>
+      </ion-tabs>,
     ];
   }
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -246,50 +233,49 @@ export class TabButtonExample {
 </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 }
-  }
-});
+  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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/tab.md b/versioned_docs/version-v6/api/tab.md
index 899e3c6c484..deafa889116 100644
--- a/versioned_docs/version-v6/api/tab.md
+++ b/versioned_docs/version-v6/api/tab.md
@@ -1,49 +1,54 @@
 ---
-title: "ion-tab"
+title: 'ion-tab'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/tab/props.md';
+import Events from '@ionic-internal/component-api/v6/tab/events.md';
+import Methods from '@ionic-internal/component-api/v6/tab/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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" />
 
-
 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.
+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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/tabs.md b/versioned_docs/version-v6/api/tabs.md
index c97ef582190..8c200d9a226 100644
--- a/versioned_docs/version-v6/api/tabs.md
+++ b/versioned_docs/version-v6/api/tabs.md
@@ -2,12 +2,12 @@
 title: 'ion-tabs'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/tabs/props.md';
+import Events from '@ionic-internal/component-api/v6/tabs/events.md';
+import Methods from '@ionic-internal/component-api/v6/tabs/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tabs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tabs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/tabs/slots.md';
 
 <head>
   <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
diff --git a/versioned_docs/version-v6/api/text.md b/versioned_docs/version-v6/api/text.md
index c6fcee4c2db..ac2d82988e3 100644
--- a/versioned_docs/version-v6/api/text.md
+++ b/versioned_docs/version-v6/api/text.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/text/props.md';
+import Events from '@ionic-internal/component-api/v6/text/events.md';
+import Methods from '@ionic-internal/component-api/v6/text/methods.md';
+import Parts from '@ionic-internal/component-api/v6/text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/text/slots.md';
 
 <head>
   <title>ion-text: Ionic App Component to Style or Change Text Color</title>
diff --git a/versioned_docs/version-v6/api/textarea.md b/versioned_docs/version-v6/api/textarea.md
index 5b6def11096..169ba5f1372 100644
--- a/versioned_docs/version-v6/api/textarea.md
+++ b/versioned_docs/version-v6/api/textarea.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/textarea/props.md';
+import Events from '@ionic-internal/component-api/v6/textarea/events.md';
+import Methods from '@ionic-internal/component-api/v6/textarea/methods.md';
+import Parts from '@ionic-internal/component-api/v6/textarea/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/textarea/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/textarea/slots.md';
 
 <head>
   <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
diff --git a/versioned_docs/version-v6/api/thumbnail.md b/versioned_docs/version-v6/api/thumbnail.md
index f21d2f25b59..759c793a7cf 100644
--- a/versioned_docs/version-v6/api/thumbnail.md
+++ b/versioned_docs/version-v6/api/thumbnail.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/thumbnail/props.md';
+import Events from '@ionic-internal/component-api/v6/thumbnail/events.md';
+import Methods from '@ionic-internal/component-api/v6/thumbnail/methods.md';
+import Parts from '@ionic-internal/component-api/v6/thumbnail/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/thumbnail/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/thumbnail/slots.md';
 
 <head>
   <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
diff --git a/versioned_docs/version-v6/api/title.md b/versioned_docs/version-v6/api/title.md
index 07a1a36eb03..69d24cfb592 100644
--- a/versioned_docs/version-v6/api/title.md
+++ b/versioned_docs/version-v6/api/title.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/title/props.md';
+import Events from '@ionic-internal/component-api/v6/title/events.md';
+import Methods from '@ionic-internal/component-api/v6/title/methods.md';
+import Parts from '@ionic-internal/component-api/v6/title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/title/slots.md';
 
 <head>
   <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
index b0915d8cf8c..463a73f6e99 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -5,12 +5,12 @@ 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';
+import Props from '@ionic-internal/component-api/v6/toast/props.md';
+import Events from '@ionic-internal/component-api/v6/toast/events.md';
+import Methods from '@ionic-internal/component-api/v6/toast/methods.md';
+import Parts from '@ionic-internal/component-api/v6/toast/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/toast/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/toast/slots.md';
 
 <head>
   <title>ion-toast Component: A Dismissible App Notification Alert</title>
diff --git a/versioned_docs/version-v6/api/toggle.md b/versioned_docs/version-v6/api/toggle.md
index bb22c827d6f..513dbae47d4 100644
--- a/versioned_docs/version-v6/api/toggle.md
+++ b/versioned_docs/version-v6/api/toggle.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/toggle/props.md';
+import Events from '@ionic-internal/component-api/v6/toggle/events.md';
+import Methods from '@ionic-internal/component-api/v6/toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v6/toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/toggle/slots.md';
 
 <head>
   <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
diff --git a/versioned_docs/version-v6/api/toolbar.md b/versioned_docs/version-v6/api/toolbar.md
index dbd61f85818..96464f3e46c 100644
--- a/versioned_docs/version-v6/api/toolbar.md
+++ b/versioned_docs/version-v6/api/toolbar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/toolbar/props.md';
+import Events from '@ionic-internal/component-api/v6/toolbar/events.md';
+import Methods from '@ionic-internal/component-api/v6/toolbar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/toolbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/toolbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/toolbar/slots.md';
 
 <head>
   <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
diff --git a/versioned_docs/version-v6/api/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.md
index 84f85ac329f..54d1a78f01b 100644
--- a/versioned_docs/version-v6/api/virtual-scroll.md
+++ b/versioned_docs/version-v6/api/virtual-scroll.md
@@ -1,27 +1,28 @@
 ---
-title: "ion-virtual-scroll"
+title: 'ion-virtual-scroll'
 ---
 
-import Props from '@site/static/auto-generated/virtual-scroll/props.md';
-import Events from '@site/static/auto-generated/virtual-scroll/events.md';
-import Methods from '@site/static/auto-generated/virtual-scroll/methods.md';
-import Parts from '@site/static/auto-generated/virtual-scroll/parts.md';
-import CustomProps from '@site/static/auto-generated/virtual-scroll/custom-props.md';
-import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
+import Props from '@ionic-internal/component-api/v6/virtual-scroll/props.md';
+import Events from '@ionic-internal/component-api/v6/virtual-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v6/virtual-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v6/virtual-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/virtual-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/virtual-scroll/slots.md';
 
 <head>
   <title>ion-virtual-scroll | Angular Virtual Scroll List for Ionic Apps</title>
-  <meta name="description" content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates." />
+  <meta
+    name="description"
+    content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates."
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 :::note
 This component has been deprecated in favor of using virtual scrolling libraries provided by each JavaScript Framework. See below for alternatives.
 :::
 
-
 Virtual Scroll displays a virtual, "infinite" list. An array of records
 is passed to the virtual scroll containing the data to create templates
 for. The template created for each record, referred to as a cell, can
@@ -43,7 +44,7 @@ For virtual scrolling options in Ionic React, please see [React Virtual Scroll G
 
 For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.md).
 
-------
+---
 
 The following documentation applies to the `ion-virtual-scroll` component.
 
@@ -85,7 +86,6 @@ renders whenever it wants which could be while the user is scrolling. However,
 `<ion-img>` is governed by the containing `ion-content` and does not render
 images while scrolling quickly.
 
-
 ## Virtual Scroll Performance Tips
 
 ### iOS Cordova WKWebView
@@ -131,13 +131,12 @@ different identities, and Ionic will tear down the entire DOM and rebuild
 it. This is an expensive operation and should be avoided if possible.
 
 ### Efficient headers and footer functions
+
 Each virtual item must stay extremely efficient, but one way to really
 kill its performance is to perform any DOM operations within section header
 and footer functions. These functions are called for every record in the
 dataset, so please make sure they're performant.
 
-
-
 ## Usage
 
 ```html
@@ -147,10 +146,10 @@ dataset, so please make sure they're performant.
       <div>
         <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
       </div>
-    <ion-card-header>
-      <ion-card-title>{{ item.name }}</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>{{ item.content }}</ion-card-content>
+      <ion-card-header>
+        <ion-card-title>{{ item.name }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>{{ item.content }}</ion-card-content>
     </ion-card>
   </ion-virtual-scroll>
 </ion-content>
@@ -167,7 +166,7 @@ export class VirtualScrollPageComponent {
         imgSrc: getImgSrc(),
         avatarSrc: getImgSrc(),
         imgHeight: Math.floor(Math.random() * 50 + 150),
-        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
+        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100),
       });
 
       rotateImg++;
@@ -178,7 +177,8 @@ export class VirtualScrollPageComponent {
   }
 }
 
-const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+const lorem =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
 const images = [
   'bandit',
@@ -190,7 +190,7 @@ const images = [
   'general-lee',
   'ghostbusters',
   'knight-rider',
-  'mirth-mobile'
+  'mirth-mobile',
 ];
 
 function getImgSrc() {
@@ -212,9 +212,7 @@ The data given to the `items` property must be an array. An item template with t
 
 ```html
 <ion-virtual-scroll [items]="items">
-  <ion-item *virtualItem="let item">
-    {{ item }}
-  </ion-item>
+  <ion-item *virtualItem="let item"> {{ item }} </ion-item>
 </ion-virtual-scroll>
 ```
 
@@ -230,12 +228,8 @@ return `null` if a template shouldn't be created.
 
 ```html
 <ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn">
-  <ion-item-divider *virtualHeader="let header">
-    {{ header }}
-  </ion-item-divider>
-  <ion-item *virtualItem="let item">
-    Item: {{ item }}
-  </ion-item>
+  <ion-item-divider *virtualHeader="let header"> {{ header }} </ion-item-divider>
+  <ion-item *virtualItem="let item"> Item: {{ item }} </ion-item>
 </ion-virtual-scroll>
 ```
 
@@ -256,7 +250,6 @@ myHeaderFn(record, recordIndex, records) {
 }
 ```
 
-
 ### Custom Components
 
 If a custom component is going to be used within Virtual Scroll, it's best
@@ -267,27 +260,31 @@ within a `<div>` is a safe way to make sure dimensions are measured correctly.
 ```html
 <ion-virtual-scroll [items]="items">
   <div *virtualItem="let item">
-    <my-custom-item [item]="item">
-      {{ item }}
-    </my-custom-item>
+    <my-custom-item [item]="item"> {{ item }} </my-custom-item>
   </div>
 </ion-virtual-scroll>
 ```
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />

From c79ba3941dc464b56915412a319ce00720608153 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 13 Mar 2023 17:44:44 -0400
Subject: [PATCH 244/469] Revert " feat: docusaurus plugin to generate
 component api docs (#2797)" (#2824)

This reverts commit cb056e961aef9d7386cbdfe992d4d47ec03f86f5.
---
 docs/api/accordion-group.md                   |  12 +-
 docs/api/accordion.md                         |  12 +-
 docs/api/action-sheet.md                      |  12 +-
 docs/api/alert.md                             |  12 +-
 docs/api/app.md                               |  12 +-
 docs/api/avatar.md                            |  12 +-
 docs/api/back-button.md                       |  12 +-
 docs/api/backdrop.md                          |  12 +-
 docs/api/badge.md                             |  12 +-
 docs/api/breadcrumb.md                        |  12 +-
 docs/api/breadcrumbs.md                       |  12 +-
 docs/api/button.md                            |  12 +-
 docs/api/buttons.md                           |  12 +-
 docs/api/card-content.md                      |  12 +-
 docs/api/card-header.md                       |  12 +-
 docs/api/card-subtitle.md                     |  12 +-
 docs/api/card-title.md                        |  12 +-
 docs/api/card.md                              |  12 +-
 docs/api/checkbox.md                          |  12 +-
 docs/api/chip.md                              |  12 +-
 docs/api/col.md                               |  12 +-
 docs/api/content.md                           |  12 +-
 docs/api/datetime-button.md                   |  12 +-
 docs/api/datetime.md                          |  12 +-
 docs/api/fab-button.md                        |  12 +-
 docs/api/fab-list.md                          |  12 +-
 docs/api/fab.md                               |  12 +-
 docs/api/footer.md                            |  12 +-
 docs/api/grid.md                              |  12 +-
 docs/api/header.md                            |  12 +-
 docs/api/img.md                               |  12 +-
 docs/api/infinite-scroll-content.md           |  12 +-
 docs/api/infinite-scroll.md                   |  12 +-
 docs/api/input.md                             |  12 +-
 docs/api/item-divider.md                      |  12 +-
 docs/api/item-group.md                        |  12 +-
 docs/api/item-option.md                       |  12 +-
 docs/api/item-options.md                      |  12 +-
 docs/api/item-sliding.md                      |  12 +-
 docs/api/item.md                              |  12 +-
 docs/api/label.md                             |  12 +-
 docs/api/list-header.md                       |  12 +-
 docs/api/list.md                              |  12 +-
 docs/api/loading.md                           |  12 +-
 docs/api/menu-button.md                       |  12 +-
 docs/api/menu-toggle.md                       |  12 +-
 docs/api/menu.md                              |  12 +-
 docs/api/modal.md                             |  12 +-
 docs/api/nav-link.md                          |  12 +-
 docs/api/nav.md                               |  12 +-
 docs/api/note.md                              |  12 +-
 docs/api/picker.md                            |  12 +-
 docs/api/popover.md                           |  12 +-
 docs/api/progress-bar.md                      |  12 +-
 docs/api/radio-group.md                       |  12 +-
 docs/api/radio.md                             |  12 +-
 docs/api/range.md                             |  12 +-
 docs/api/refresher-content.md                 |  12 +-
 docs/api/refresher.md                         |  12 +-
 docs/api/reorder-group.md                     |  12 +-
 docs/api/reorder.md                           |  12 +-
 docs/api/ripple-effect.md                     |  12 +-
 docs/api/route-redirect.md                    |  12 +-
 docs/api/route.md                             |  12 +-
 docs/api/router-link.md                       |  12 +-
 docs/api/router-outlet.md                     |  12 +-
 docs/api/router.md                            |  12 +-
 docs/api/row.md                               |  12 +-
 docs/api/searchbar.md                         |  12 +-
 docs/api/segment-button.md                    |  12 +-
 docs/api/segment.md                           |  12 +-
 docs/api/select-option.md                     |  12 +-
 docs/api/select.md                            |  12 +-
 docs/api/skeleton-text.md                     |  12 +-
 docs/api/spinner.md                           |  12 +-
 docs/api/split-pane.md                        |  12 +-
 docs/api/tab-bar.md                           |  12 +-
 docs/api/tab-button.md                        |  12 +-
 docs/api/tab.md                               |  12 +-
 docs/api/tabs.md                              |  12 +-
 docs/api/text.md                              |  12 +-
 docs/api/textarea.md                          |  12 +-
 docs/api/thumbnail.md                         |  12 +-
 docs/api/title.md                             |  12 +-
 docs/api/toast.md                             |  12 +-
 docs/api/toggle.md                            |  12 +-
 docs/api/toolbar.md                           |  12 +-
 docusaurus.config.js                          |   8 -
 package.json                                  |   2 +-
 .../index.js                                  | 220 ----------------
 scripts/api.js                                | 156 +++++++++++
 static/.gitignore                             |   1 +
 .../version-v6/api/accordion-group.md         |  24 +-
 versioned_docs/version-v6/api/accordion.md    |  12 +-
 versioned_docs/version-v6/api/action-sheet.md |  12 +-
 versioned_docs/version-v6/api/alert.md        |  12 +-
 versioned_docs/version-v6/api/app.md          |  40 ++-
 versioned_docs/version-v6/api/avatar.md       |  12 +-
 versioned_docs/version-v6/api/back-button.md  |  27 +-
 versioned_docs/version-v6/api/backdrop.md     |  12 +-
 versioned_docs/version-v6/api/badge.md        |  12 +-
 versioned_docs/version-v6/api/breadcrumb.md   |  25 +-
 versioned_docs/version-v6/api/breadcrumbs.md  |  12 +-
 versioned_docs/version-v6/api/button.md       |  12 +-
 versioned_docs/version-v6/api/buttons.md      |  12 +-
 versioned_docs/version-v6/api/card-content.md |  23 +-
 versioned_docs/version-v6/api/card-header.md  |  23 +-
 .../version-v6/api/card-subtitle.md           |  23 +-
 versioned_docs/version-v6/api/card-title.md   |  28 +-
 versioned_docs/version-v6/api/card.md         |  12 +-
 versioned_docs/version-v6/api/checkbox.md     |  12 +-
 versioned_docs/version-v6/api/chip.md         |  12 +-
 versioned_docs/version-v6/api/col.md          |  31 +--
 versioned_docs/version-v6/api/content.md      |  12 +-
 .../version-v6/api/datetime-button.md         |  12 +-
 versioned_docs/version-v6/api/datetime.md     |  12 +-
 versioned_docs/version-v6/api/fab-button.md   |  29 +-
 versioned_docs/version-v6/api/fab-list.md     |  23 +-
 versioned_docs/version-v6/api/fab.md          |  12 +-
 versioned_docs/version-v6/api/footer.md       |  12 +-
 versioned_docs/version-v6/api/grid.md         |  12 +-
 versioned_docs/version-v6/api/header.md       |  12 +-
 versioned_docs/version-v6/api/img.md          |  12 +-
 .../version-v6/api/infinite-scroll-content.md |  22 +-
 .../version-v6/api/infinite-scroll.md         |  12 +-
 versioned_docs/version-v6/api/input.md        |  12 +-
 versioned_docs/version-v6/api/item-divider.md |  12 +-
 versioned_docs/version-v6/api/item-group.md   |  12 +-
 versioned_docs/version-v6/api/item-option.md  |  28 +-
 versioned_docs/version-v6/api/item-options.md |  33 +--
 versioned_docs/version-v6/api/item-sliding.md |  12 +-
 versioned_docs/version-v6/api/item.md         |  12 +-
 versioned_docs/version-v6/api/label.md        |  12 +-
 versioned_docs/version-v6/api/list-header.md  |  12 +-
 versioned_docs/version-v6/api/list.md         |  12 +-
 versioned_docs/version-v6/api/loading.md      |  12 +-
 versioned_docs/version-v6/api/menu-button.md  |  28 +-
 versioned_docs/version-v6/api/menu-toggle.md  |  28 +-
 versioned_docs/version-v6/api/menu.md         |  12 +-
 versioned_docs/version-v6/api/modal.md        |  12 +-
 versioned_docs/version-v6/api/nav-link.md     |  28 +-
 versioned_docs/version-v6/api/nav.md          |  12 +-
 versioned_docs/version-v6/api/note.md         |  12 +-
 versioned_docs/version-v6/api/picker.md       |  13 +-
 versioned_docs/version-v6/api/popover.md      |  12 +-
 versioned_docs/version-v6/api/progress-bar.md |  12 +-
 versioned_docs/version-v6/api/radio-group.md  |  29 +-
 versioned_docs/version-v6/api/radio.md        |  12 +-
 versioned_docs/version-v6/api/range.md        |  12 +-
 .../version-v6/api/refresher-content.md       |  23 +-
 versioned_docs/version-v6/api/refresher.md    |  12 +-
 .../version-v6/api/reorder-group.md           |  29 +-
 versioned_docs/version-v6/api/reorder.md      |  12 +-
 .../version-v6/api/ripple-effect.md           |  12 +-
 .../version-v6/api/route-redirect.md          |  40 ++-
 versioned_docs/version-v6/api/route.md        | 114 ++++----
 versioned_docs/version-v6/api/router-link.md  |  46 ++--
 .../version-v6/api/router-outlet.md           |  32 +--
 versioned_docs/version-v6/api/router.md       |  35 ++-
 versioned_docs/version-v6/api/row.md          |  30 +--
 versioned_docs/version-v6/api/searchbar.md    |  12 +-
 .../version-v6/api/segment-button.md          |  12 +-
 versioned_docs/version-v6/api/segment.md      |  12 +-
 .../version-v6/api/select-option.md           |  30 +--
 versioned_docs/version-v6/api/select.md       |  12 +-
 .../version-v6/api/skeleton-text.md           |  12 +-
 versioned_docs/version-v6/api/slide.md        |  31 +--
 versioned_docs/version-v6/api/slides.md       | 248 ++++++++----------
 versioned_docs/version-v6/api/spinner.md      |  12 +-
 versioned_docs/version-v6/api/split-pane.md   |  12 +-
 versioned_docs/version-v6/api/tab-bar.md      |  62 ++---
 versioned_docs/version-v6/api/tab-button.md   |  80 +++---
 versioned_docs/version-v6/api/tab.md          |  33 +--
 versioned_docs/version-v6/api/tabs.md         |  12 +-
 versioned_docs/version-v6/api/text.md         |  12 +-
 versioned_docs/version-v6/api/textarea.md     |  12 +-
 versioned_docs/version-v6/api/thumbnail.md    |  12 +-
 versioned_docs/version-v6/api/title.md        |  12 +-
 versioned_docs/version-v6/api/toast.md        |  12 +-
 versioned_docs/version-v6/api/toggle.md       |  12 +-
 versioned_docs/version-v6/api/toolbar.md      |  12 +-
 .../version-v6/api/virtual-scroll.md          |  67 ++---
 182 files changed, 1631 insertions(+), 1877 deletions(-)
 delete mode 100644 plugins/docusaurus-plugin-ionic-component-api/index.js
 create mode 100644 scripts/api.js
 create mode 100644 static/.gitignore

diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index 312f8acd762..2880703001c 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-accordion-group"
 ---
-import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
+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';
 
diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index f64573d9c64..0fb249825c8 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-accordion"
 ---
-import Props from '@ionic-internal/component-api/v7/accordion/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
+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>
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index a11e669c194..64943f9fcf2 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-action-sheet"
 ---
-import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
+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>
diff --git a/docs/api/alert.md b/docs/api/alert.md
index f6e5d5ee581..3aa37fd64d2 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -4,12 +4,12 @@ title: "ion-alert"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/alert/props.md';
-import Events from '@ionic-internal/component-api/v7/alert/events.md';
-import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
-import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
+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>
diff --git a/docs/api/app.md b/docs/api/app.md
index 1ac4dc6805e..98125d4aa8e 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-app"
 ---
-import Props from '@ionic-internal/component-api/v7/app/props.md';
-import Events from '@ionic-internal/component-api/v7/app/events.md';
-import Methods from '@ionic-internal/component-api/v7/app/methods.md';
-import Parts from '@ionic-internal/component-api/v7/app/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/app/slots.md';
+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>
diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index 0f61597f61c..ed6cd9db893 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -2,12 +2,12 @@
 title: "ion-avatar"
 ---
 
-import Props from '@ionic-internal/component-api/v7/avatar/props.md';
-import Events from '@ionic-internal/component-api/v7/avatar/events.md';
-import Methods from '@ionic-internal/component-api/v7/avatar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/avatar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
+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>
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index ca39063c3b5..6500a8ab781 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-back-button"
 ---
-import Props from '@ionic-internal/component-api/v7/back-button/props.md';
-import Events from '@ionic-internal/component-api/v7/back-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/back-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/back-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
+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>
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index 4684f53e6e3..e23d11b0588 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-backdrop"
 ---
-import Props from '@ionic-internal/component-api/v7/backdrop/props.md';
-import Events from '@ionic-internal/component-api/v7/backdrop/events.md';
-import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md';
-import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md';
+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';
 
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 4f956169fa7..21e2f298355 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-badge"
 ---
-import Props from '@ionic-internal/component-api/v7/badge/props.md';
-import Events from '@ionic-internal/component-api/v7/badge/events.md';
-import Methods from '@ionic-internal/component-api/v7/badge/methods.md';
-import Parts from '@ionic-internal/component-api/v7/badge/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
+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>
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index 5679d17a3c9..5be2aa6c695 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-breadcrumb"
 ---
-import Props from '@ionic-internal/component-api/v7/breadcrumb/props.md';
-import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md';
-import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md';
-import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md';
+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';
 
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index cff44c2f872..d9a12c4c9a4 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-breadcrumbs"
 ---
-import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md';
-import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md';
-import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md';
-import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md';
+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';
 
 
 
diff --git a/docs/api/button.md b/docs/api/button.md
index c538075468d..b3161ccb0ec 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-button"
 ---
-import Props from '@ionic-internal/component-api/v7/button/props.md';
-import Events from '@ionic-internal/component-api/v7/button/events.md';
-import Methods from '@ionic-internal/component-api/v7/button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/button/slots.md';
+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>
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index cc8f5cf401c..3e4db87783f 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-buttons"
 ---
-import Props from '@ionic-internal/component-api/v7/buttons/props.md';
-import Events from '@ionic-internal/component-api/v7/buttons/events.md';
-import Methods from '@ionic-internal/component-api/v7/buttons/methods.md';
-import Parts from '@ionic-internal/component-api/v7/buttons/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/buttons/slots.md';
+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>
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index ad6e5e51be8..647cba00897 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-card-content"
 ---
-import Props from '@ionic-internal/component-api/v7/card-content/props.md';
-import Events from '@ionic-internal/component-api/v7/card-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card-content/slots.md';
+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';
 
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index c247d37e667..2e52467ed43 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-card-header"
 ---
-import Props from '@ionic-internal/component-api/v7/card-header/props.md';
-import Events from '@ionic-internal/component-api/v7/card-header/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card-header/slots.md';
+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';
 
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index 692caa70759..ec72784cd99 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-card-subtitle"
 ---
-import Props from '@ionic-internal/component-api/v7/card-subtitle/props.md';
-import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md';
+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';
 
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 9263fe91136..33b24158eb5 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-card-title"
 ---
-import Props from '@ionic-internal/component-api/v7/card-title/props.md';
-import Events from '@ionic-internal/component-api/v7/card-title/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-title/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-title/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card-title/slots.md';
+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';
 
diff --git a/docs/api/card.md b/docs/api/card.md
index 183166599b2..b9419281ab6 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-card"
 ---
-import Props from '@ionic-internal/component-api/v7/card/props.md';
-import Events from '@ionic-internal/component-api/v7/card/events.md';
-import Methods from '@ionic-internal/component-api/v7/card/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card/slots.md';
+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';
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 0f62607010d..c861b994ff1 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -2,12 +2,12 @@
 title: "ion-checkbox"
 ---
 
-import Props from '@ionic-internal/component-api/v7/checkbox/props.md';
-import Events from '@ionic-internal/component-api/v7/checkbox/events.md';
-import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md';
-import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
+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>
diff --git a/docs/api/chip.md b/docs/api/chip.md
index e05495b6493..e032f7e5e0e 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-chip"
 ---
-import Props from '@ionic-internal/component-api/v7/chip/props.md';
-import Events from '@ionic-internal/component-api/v7/chip/events.md';
-import Methods from '@ionic-internal/component-api/v7/chip/methods.md';
-import Parts from '@ionic-internal/component-api/v7/chip/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
+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>
diff --git a/docs/api/col.md b/docs/api/col.md
index 2f6ac3e552f..e5872b4f6a1 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-col"
 ---
-import Props from '@ionic-internal/component-api/v7/col/props.md';
-import Events from '@ionic-internal/component-api/v7/col/events.md';
-import Methods from '@ionic-internal/component-api/v7/col/methods.md';
-import Parts from '@ionic-internal/component-api/v7/col/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/col/slots.md';
+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>
diff --git a/docs/api/content.md b/docs/api/content.md
index a257b0e51ee..a0feb3f2ccd 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-content"
 ---
-import Props from '@ionic-internal/component-api/v7/content/props.md';
-import Events from '@ionic-internal/component-api/v7/content/events.md';
-import Methods from '@ionic-internal/component-api/v7/content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/content/slots.md';
+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>
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index 554e74d2b01..a17b50b498f 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-datetime-button"
 ---
-import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
-import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md';
+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>
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 784c151cf0c..36f2946b919 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-datetime"
 ---
-import Props from '@ionic-internal/component-api/v7/datetime/props.md';
-import Events from '@ionic-internal/component-api/v7/datetime/events.md';
-import Methods from '@ionic-internal/component-api/v7/datetime/methods.md';
-import Parts from '@ionic-internal/component-api/v7/datetime/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/datetime/slots.md';
+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/v7/datetime/basic/index.md';
 
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index d864c6c3f38..ab86a48426e 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-fab-button"
 ---
-import Props from '@ionic-internal/component-api/v7/fab-button/props.md';
-import Events from '@ionic-internal/component-api/v7/fab-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
+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>
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index e97540df9d3..a0659a394d7 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-fab-list"
 ---
-import Props from '@ionic-internal/component-api/v7/fab-list/props.md';
-import Events from '@ionic-internal/component-api/v7/fab-list/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab-list/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/fab-list/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/fab-list/slots.md';
+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';
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 06201e3bde6..55ce35332fb 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-fab"
 ---
-import Props from '@ionic-internal/component-api/v7/fab/props.md';
-import Events from '@ionic-internal/component-api/v7/fab/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
+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>
diff --git a/docs/api/footer.md b/docs/api/footer.md
index 5127287d601..b5298d7bccd 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-footer"
 ---
-import Props from '@ionic-internal/component-api/v7/footer/props.md';
-import Events from '@ionic-internal/component-api/v7/footer/events.md';
-import Methods from '@ionic-internal/component-api/v7/footer/methods.md';
-import Parts from '@ionic-internal/component-api/v7/footer/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
+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>
diff --git a/docs/api/grid.md b/docs/api/grid.md
index e80e3642bb7..30b504cd3cf 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-grid"
 ---
-import Props from '@ionic-internal/component-api/v7/grid/props.md';
-import Events from '@ionic-internal/component-api/v7/grid/events.md';
-import Methods from '@ionic-internal/component-api/v7/grid/methods.md';
-import Parts from '@ionic-internal/component-api/v7/grid/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
+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>
diff --git a/docs/api/header.md b/docs/api/header.md
index 584a5207d05..7288b636abe 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-header"
 ---
-import Props from '@ionic-internal/component-api/v7/header/props.md';
-import Events from '@ionic-internal/component-api/v7/header/events.md';
-import Methods from '@ionic-internal/component-api/v7/header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/header/slots.md';
+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>
diff --git a/docs/api/img.md b/docs/api/img.md
index 441c9f4f27c..14c697c760d 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -2,12 +2,12 @@
 title: "ion-img"
 ---
 
-import Props from '@ionic-internal/component-api/v7/img/props.md';
-import Events from '@ionic-internal/component-api/v7/img/events.md';
-import Methods from '@ionic-internal/component-api/v7/img/methods.md';
-import Parts from '@ionic-internal/component-api/v7/img/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/img/slots.md';
+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>
diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md
index 39da6e7165f..2647dffdb87 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.md
@@ -2,12 +2,12 @@
 title: "ion-infinite-scroll-content"
 ---
 
-import Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md';
-import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.md';
+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';
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 12f68542b8a..5675984b447 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -2,12 +2,12 @@
 title: "ion-infinite-scroll"
 ---
 
-import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md';
-import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
+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>
diff --git a/docs/api/input.md b/docs/api/input.md
index 2e263cbf3c8..4d7df8eef12 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-input"
 ---
-import Props from '@ionic-internal/component-api/v7/input/props.md';
-import Events from '@ionic-internal/component-api/v7/input/events.md';
-import Methods from '@ionic-internal/component-api/v7/input/methods.md';
-import Parts from '@ionic-internal/component-api/v7/input/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/input/slots.md';
+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>
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 79554071252..0f4dd8c40f8 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-item-divider"
 ---
-import Props from '@ionic-internal/component-api/v7/item-divider/props.md';
-import Events from '@ionic-internal/component-api/v7/item-divider/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-divider/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
+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>
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 5d440ed3ce8..60cf8b09383 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-item-group"
 ---
-import Props from '@ionic-internal/component-api/v7/item-group/props.md';
-import Events from '@ionic-internal/component-api/v7/item-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-group/slots.md';
+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>
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index 413e993de64..800d1030f50 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-item-option"
 ---
-import Props from '@ionic-internal/component-api/v7/item-option/props.md';
-import Events from '@ionic-internal/component-api/v7/item-option/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-option/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-option/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
+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>
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index e242c9d1012..cbee8f5289b 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-item-options"
 ---
-import Props from '@ionic-internal/component-api/v7/item-options/props.md';
-import Events from '@ionic-internal/component-api/v7/item-options/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-options/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-options/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-options/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-options/slots.md';
+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>
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 61cd5f58f20..526f4d1263b 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-item-sliding"
 ---
-import Props from '@ionic-internal/component-api/v7/item-sliding/props.md';
-import Events from '@ionic-internal/component-api/v7/item-sliding/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
+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>
diff --git a/docs/api/item.md b/docs/api/item.md
index 6aaf0dd0609..09f89b1132b 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-item"
 ---
-import Props from '@ionic-internal/component-api/v7/item/props.md';
-import Events from '@ionic-internal/component-api/v7/item/events.md';
-import Methods from '@ionic-internal/component-api/v7/item/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item/slots.md';
+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>
diff --git a/docs/api/label.md b/docs/api/label.md
index e7ed495d15c..a7b6422775e 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-label"
 ---
-import Props from '@ionic-internal/component-api/v7/label/props.md';
-import Events from '@ionic-internal/component-api/v7/label/events.md';
-import Methods from '@ionic-internal/component-api/v7/label/methods.md';
-import Parts from '@ionic-internal/component-api/v7/label/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/label/slots.md';
+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>
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 4d684f1d4b8..f2ecb781627 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-list-header"
 ---
-import Props from '@ionic-internal/component-api/v7/list-header/props.md';
-import Events from '@ionic-internal/component-api/v7/list-header/events.md';
-import Methods from '@ionic-internal/component-api/v7/list-header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/list-header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/list-header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/list-header/slots.md';
+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';
 
diff --git a/docs/api/list.md b/docs/api/list.md
index 6aee4eaa556..b5907823923 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-list"
 ---
-import Props from '@ionic-internal/component-api/v7/list/props.md';
-import Events from '@ionic-internal/component-api/v7/list/events.md';
-import Methods from '@ionic-internal/component-api/v7/list/methods.md';
-import Parts from '@ionic-internal/component-api/v7/list/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/list/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/list/slots.md';
+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>
diff --git a/docs/api/loading.md b/docs/api/loading.md
index 2a9309c4ba7..f4e4f04f00c 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-loading"
 ---
-import Props from '@ionic-internal/component-api/v7/loading/props.md';
-import Events from '@ionic-internal/component-api/v7/loading/events.md';
-import Methods from '@ionic-internal/component-api/v7/loading/methods.md';
-import Parts from '@ionic-internal/component-api/v7/loading/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
+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>
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index 7d2be77fef0..adba980b958 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-menu-button"
 ---
-import Props from '@ionic-internal/component-api/v7/menu-button/props.md';
-import Events from '@ionic-internal/component-api/v7/menu-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/menu-button/slots.md';
+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>
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 3f6cef6f6fd..e6a10201362 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-menu-toggle"
 ---
-import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md';
-import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
+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>
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 1918527a15a..8a12ff43350 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-menu"
 ---
-import Props from '@ionic-internal/component-api/v7/menu/props.md';
-import Events from '@ionic-internal/component-api/v7/menu/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/menu/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/menu/slots.md';
+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>
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 7271d8368f6..6e68846652e 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-modal"
 ---
-import Props from '@ionic-internal/component-api/v7/modal/props.md';
-import Events from '@ionic-internal/component-api/v7/modal/events.md';
-import Methods from '@ionic-internal/component-api/v7/modal/methods.md';
-import Parts from '@ionic-internal/component-api/v7/modal/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/modal/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/modal/slots.md';
+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>
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 9e333a98ede..30a8f3264ed 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-nav-link"
 ---
-import Props from '@ionic-internal/component-api/v7/nav-link/props.md';
-import Events from '@ionic-internal/component-api/v7/nav-link/events.md';
-import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md';
-import Parts from '@ionic-internal/component-api/v7/nav-link/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
+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>
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 7a5d975232f..727add0a05f 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-nav"
 ---
-import Props from '@ionic-internal/component-api/v7/nav/props.md';
-import Events from '@ionic-internal/component-api/v7/nav/events.md';
-import Methods from '@ionic-internal/component-api/v7/nav/methods.md';
-import Parts from '@ionic-internal/component-api/v7/nav/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
+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>
diff --git a/docs/api/note.md b/docs/api/note.md
index d5f00591b4d..5d142dd53b8 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-note"
 ---
-import Props from '@ionic-internal/component-api/v7/note/props.md';
-import Events from '@ionic-internal/component-api/v7/note/events.md';
-import Methods from '@ionic-internal/component-api/v7/note/methods.md';
-import Parts from '@ionic-internal/component-api/v7/note/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/note/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/note/slots.md';
+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>
diff --git a/docs/api/picker.md b/docs/api/picker.md
index b2efb4c7bf2..eca018fb227 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-picker"
 ---
-import Props from '@ionic-internal/component-api/v7/picker/props.md';
-import Events from '@ionic-internal/component-api/v7/picker/events.md';
-import Methods from '@ionic-internal/component-api/v7/picker/methods.md';
-import Parts from '@ionic-internal/component-api/v7/picker/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
+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>
diff --git a/docs/api/popover.md b/docs/api/popover.md
index 2878ce602b1..33017292870 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-popover"
 ---
-import Props from '@ionic-internal/component-api/v7/popover/props.md';
-import Events from '@ionic-internal/component-api/v7/popover/events.md';
-import Methods from '@ionic-internal/component-api/v7/popover/methods.md';
-import Parts from '@ionic-internal/component-api/v7/popover/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
+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>
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 73c3253f3ca..15a7c27fbca 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-progress-bar"
 ---
-import Props from '@ionic-internal/component-api/v7/progress-bar/props.md';
-import Events from '@ionic-internal/component-api/v7/progress-bar/events.md';
-import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
+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>
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index 91969c1ed39..b083ee208b2 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-radio-group"
 ---
-import Props from '@ionic-internal/component-api/v7/radio-group/props.md';
-import Events from '@ionic-internal/component-api/v7/radio-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/radio-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
+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>
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 66890457bef..b5f94c0b8fb 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-radio"
 ---
-import Props from '@ionic-internal/component-api/v7/radio/props.md';
-import Events from '@ionic-internal/component-api/v7/radio/events.md';
-import Methods from '@ionic-internal/component-api/v7/radio/methods.md';
-import Parts from '@ionic-internal/component-api/v7/radio/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
+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>
diff --git a/docs/api/range.md b/docs/api/range.md
index fd091246945..d102bcbc971 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-range"
 ---
-import Props from '@ionic-internal/component-api/v7/range/props.md';
-import Events from '@ionic-internal/component-api/v7/range/events.md';
-import Methods from '@ionic-internal/component-api/v7/range/methods.md';
-import Parts from '@ionic-internal/component-api/v7/range/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/range/slots.md';
+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>
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 263a057ce78..1b80d4ef40c 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-refresher-content"
 ---
-import Props from '@ionic-internal/component-api/v7/refresher-content/props.md';
-import Events from '@ionic-internal/component-api/v7/refresher-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/refresher-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/refresher-content/slots.md';
+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';
 
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index e6552ab795d..744200a218b 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-refresher"
 ---
-import Props from '@ionic-internal/component-api/v7/refresher/props.md';
-import Events from '@ionic-internal/component-api/v7/refresher/events.md';
-import Methods from '@ionic-internal/component-api/v7/refresher/methods.md';
-import Parts from '@ionic-internal/component-api/v7/refresher/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/refresher/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
+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>
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index 07d1ccd5ddc..674bc2561b9 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-reorder-group"
 ---
-import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
-import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
+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>
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 708b9202eb0..1043f82b811 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-reorder"
 ---
-import Props from '@ionic-internal/component-api/v7/reorder/props.md';
-import Events from '@ionic-internal/component-api/v7/reorder/events.md';
-import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
-import Parts from '@ionic-internal/component-api/v7/reorder/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
+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>
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 5ab5bf38930..1861b13a117 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-ripple-effect"
 ---
-import Props from '@ionic-internal/component-api/v7/ripple-effect/props.md';
-import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md';
-import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md';
-import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/ripple-effect/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/ripple-effect/slots.md';
+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';
 
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index 591c39c28a1..ac4febd161d 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -2,12 +2,12 @@
 title: "ion-route-redirect"
 ---
 
-import Props from '@ionic-internal/component-api/v7/route-redirect/props.md';
-import Events from '@ionic-internal/component-api/v7/route-redirect/events.md';
-import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.md';
-import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.md';
+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>
diff --git a/docs/api/route.md b/docs/api/route.md
index b49c8766b0d..91b607971e4 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -4,12 +4,12 @@ title: "ion-route"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/route/props.md';
-import Events from '@ionic-internal/component-api/v7/route/events.md';
-import Methods from '@ionic-internal/component-api/v7/route/methods.md';
-import Parts from '@ionic-internal/component-api/v7/route/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/route/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/route/slots.md';
+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>
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index 96b22e69af5..ea95869eea0 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -6,12 +6,12 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import TOCInline from '@theme/TOCInline';
 
-import Props from '@ionic-internal/component-api/v7/router-link/props.md';
-import Events from '@ionic-internal/component-api/v7/router-link/events.md';
-import Methods from '@ionic-internal/component-api/v7/router-link/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router-link/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
+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>
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md
index 70c153815ed..c15289ab77b 100644
--- a/docs/api/router-outlet.md
+++ b/docs/api/router-outlet.md
@@ -2,12 +2,12 @@
 title: "ion-router-outlet"
 ---
 
-import Props from '@ionic-internal/component-api/v7/router-outlet/props.md';
-import Events from '@ionic-internal/component-api/v7/router-outlet/events.md';
-import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md';
+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';
 
 
 
diff --git a/docs/api/router.md b/docs/api/router.md
index dd386016be9..48b8b522e04 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -2,12 +2,12 @@
 title: "ion-router"
 ---
 
-import Props from '@ionic-internal/component-api/v7/router/props.md';
-import Events from '@ionic-internal/component-api/v7/router/events.md';
-import Methods from '@ionic-internal/component-api/v7/router/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/router/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/router/slots.md';
+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>
diff --git a/docs/api/row.md b/docs/api/row.md
index 3f8759fb490..48fc21c4ba0 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-row"
 ---
-import Props from '@ionic-internal/component-api/v7/row/props.md';
-import Events from '@ionic-internal/component-api/v7/row/events.md';
-import Methods from '@ionic-internal/component-api/v7/row/methods.md';
-import Parts from '@ionic-internal/component-api/v7/row/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/row/slots.md';
+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>
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index bbca192fdb6..c11c14c4c74 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-searchbar"
 ---
-import Props from '@ionic-internal/component-api/v7/searchbar/props.md';
-import Events from '@ionic-internal/component-api/v7/searchbar/events.md';
-import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/searchbar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
+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>
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index 04c383655b3..2567e2ecbeb 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-segment-button"
 ---
-import Props from '@ionic-internal/component-api/v7/segment-button/props.md';
-import Events from '@ionic-internal/component-api/v7/segment-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/segment-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/segment-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md';
+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>
diff --git a/docs/api/segment.md b/docs/api/segment.md
index b4bdb45b6cb..0ff953288d5 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-segment"
 ---
-import Props from '@ionic-internal/component-api/v7/segment/props.md';
-import Events from '@ionic-internal/component-api/v7/segment/events.md';
-import Methods from '@ionic-internal/component-api/v7/segment/methods.md';
-import Parts from '@ionic-internal/component-api/v7/segment/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/segment/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/segment/slots.md';
+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>
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index bb2d2e7e6f9..73dbf015e2b 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-select-option"
 ---
-import Props from '@ionic-internal/component-api/v7/select-option/props.md';
-import Events from '@ionic-internal/component-api/v7/select-option/events.md';
-import Methods from '@ionic-internal/component-api/v7/select-option/methods.md';
-import Parts from '@ionic-internal/component-api/v7/select-option/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
+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>
diff --git a/docs/api/select.md b/docs/api/select.md
index 92ab5b6e70f..d3792bfe52a 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-select"
 ---
-import Props from '@ionic-internal/component-api/v7/select/props.md';
-import Events from '@ionic-internal/component-api/v7/select/events.md';
-import Methods from '@ionic-internal/component-api/v7/select/methods.md';
-import Parts from '@ionic-internal/component-api/v7/select/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/select/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/select/slots.md';
+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>
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index 438a5b98ef9..7b627127105 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-skeleton-text"
 ---
-import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md';
-import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md';
-import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md';
-import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
+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>
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index dc5b55a36c3..7d805fa697e 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-spinner"
 ---
-import Props from '@ionic-internal/component-api/v7/spinner/props.md';
-import Events from '@ionic-internal/component-api/v7/spinner/events.md';
-import Methods from '@ionic-internal/component-api/v7/spinner/methods.md';
-import Parts from '@ionic-internal/component-api/v7/spinner/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
+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>
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 00f000e10c4..87ffe6c1ae0 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -2,12 +2,12 @@
 title: "ion-split-pane"
 ---
 
-import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
-import Events from '@ionic-internal/component-api/v7/split-pane/events.md';
-import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md';
-import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/split-pane/slots.md';
+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>
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index cb69107d111..5cd9d97fe3d 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -4,12 +4,12 @@ title: "ion-tab-bar"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/tab-bar/props.md';
-import Events from '@ionic-internal/component-api/v7/tab-bar/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
+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>
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index d22b0db8699..0fb186e0773 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -4,12 +4,12 @@ title: "ion-tab-button"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/tab-button/props.md';
-import Events from '@ionic-internal/component-api/v7/tab-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md';
+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';
 
 
 
diff --git a/docs/api/tab.md b/docs/api/tab.md
index 3dd6576e4a8..899e3c6c484 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -2,12 +2,12 @@
 title: "ion-tab"
 ---
 
-import Props from '@ionic-internal/component-api/v7/tab/props.md';
-import Events from '@ionic-internal/component-api/v7/tab/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
+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>
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 3da90b12e70..0920727d489 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-tabs"
 ---
-import Props from '@ionic-internal/component-api/v7/tabs/props.md';
-import Events from '@ionic-internal/component-api/v7/tabs/events.md';
-import Methods from '@ionic-internal/component-api/v7/tabs/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tabs/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
+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>
diff --git a/docs/api/text.md b/docs/api/text.md
index 30f03bd454f..ea9db032f6c 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-text"
 ---
-import Props from '@ionic-internal/component-api/v7/text/props.md';
-import Events from '@ionic-internal/component-api/v7/text/events.md';
-import Methods from '@ionic-internal/component-api/v7/text/methods.md';
-import Parts from '@ionic-internal/component-api/v7/text/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/text/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/text/slots.md';
+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>
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index bf611656010..bfd0e16d1f6 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-textarea"
 ---
-import Props from '@ionic-internal/component-api/v7/textarea/props.md';
-import Events from '@ionic-internal/component-api/v7/textarea/events.md';
-import Methods from '@ionic-internal/component-api/v7/textarea/methods.md';
-import Parts from '@ionic-internal/component-api/v7/textarea/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/textarea/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/textarea/slots.md';
+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>
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index 05d9bc86d5d..cf353200805 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -2,12 +2,12 @@
 title: "ion-thumbnail"
 ---
 
-import Props from '@ionic-internal/component-api/v7/thumbnail/props.md';
-import Events from '@ionic-internal/component-api/v7/thumbnail/events.md';
-import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.md';
-import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
+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>
diff --git a/docs/api/title.md b/docs/api/title.md
index bde08e3b21f..4eb8eee4ac1 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-title"
 ---
-import Props from '@ionic-internal/component-api/v7/title/props.md';
-import Events from '@ionic-internal/component-api/v7/title/events.md';
-import Methods from '@ionic-internal/component-api/v7/title/methods.md';
-import Parts from '@ionic-internal/component-api/v7/title/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/title/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/title/slots.md';
+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>
diff --git a/docs/api/toast.md b/docs/api/toast.md
index eab8f3f70e8..bf74e97cdd6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -4,12 +4,12 @@ title: "ion-toast"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/toast/props.md';
-import Events from '@ionic-internal/component-api/v7/toast/events.md';
-import Methods from '@ionic-internal/component-api/v7/toast/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toast/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
+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>
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index bf8925e2fb6..78119d191ae 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-toggle"
 ---
-import Props from '@ionic-internal/component-api/v7/toggle/props.md';
-import Events from '@ionic-internal/component-api/v7/toggle/events.md';
-import Methods from '@ionic-internal/component-api/v7/toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toggle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
+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>
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index c6c9790ce6e..9db8ed00aa8 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-toolbar"
 ---
-import Props from '@ionic-internal/component-api/v7/toolbar/props.md';
-import Events from '@ionic-internal/component-api/v7/toolbar/events.md';
-import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toolbar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
+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>
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 260bea66bec..8746715cbe1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -2,8 +2,6 @@ const path = require('path');
 const prismic = require('@prismicio/client');
 const fetch = require('node-fetch');
 
-const VERSIONS_JSON = require('./versions.json');
-
 const BASE_URL = '/docs';
 
 module.exports = {
@@ -316,12 +314,6 @@ module.exports = {
         },
       };
     },
-    [
-      path.resolve(__dirname, 'plugins', 'docusaurus-plugin-ionic-component-api'),
-      {
-        versions: VERSIONS_JSON,
-      },
-    ],
   ],
   themes: [
     [
diff --git a/package.json b/package.json
index 9dfee0ace00..8121f2287bb 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "crowdin:sync": "docusaurus write-translations && crowdin upload && crowdin download",
     "deploy": "docusaurus deploy",
     "docusaurus": "docusaurus",
-    "generate-markdown": "node scripts/native && concurrently \"node scripts/cli\" \"node scripts/release-notes\"",
+    "generate-markdown": "node scripts/native && concurrently \"node scripts/api\" \"node scripts/cli\" \"node scripts/release-notes\"",
     "serve": "docusaurus serve",
     "prestart": "npm run generate-markdown",
     "start": "docusaurus start",
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
deleted file mode 100644
index 8e12c52ad3a..00000000000
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ /dev/null
@@ -1,220 +0,0 @@
-const fetch = require('node-fetch');
-
-module.exports = function (context, options) {
-  return {
-    name: 'docusaurus-plugin-ionic-component-api',
-    async loadContent() {
-      // Finds the plugin options for @docusaurus/plugin-content-docs
-      const docsPluginOptions = context.siteConfig.plugins.find(
-        (plugin) => Array.isArray(plugin) && plugin[0] === '@docusaurus/plugin-content-docs'
-      )[1];
-
-      const data = [];
-      const currentVersion = docsPluginOptions.versions.current;
-
-      /**
-       * Generates the markdown files for all components in a given version.
-       * @param {*} version The version, e.g.: v6
-       * @param {*} npmTag The npm tag, e.g.: 6 or next
-       * @param {*} isCurrentVersion Whether or not this is the current version of the docs
-       */
-      const generateMarkdownForVersion = async (version, npmTag, isCurrentVersion) => {
-        const response = await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
-        const { components } = await response.json();
-
-        const names = components.map((component) => component.tag.slice(4));
-        // matches all relative markdown links to a component, e.g. (../button)
-        COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
-
-        components.forEach((comp) => {
-          const compTag = comp.tag.slice(4);
-          const outDir = getDirectoryPath(compTag, version, isCurrentVersion);
-
-          data.push({
-            outDir,
-            componentTag: compTag,
-            version,
-            props: renderProperties(comp),
-            events: renderEvents(comp),
-            methods: renderMethods(comp),
-            parts: renderParts(comp),
-            customProps: renderCustomProps(comp),
-            slots: renderSlots(comp),
-          });
-        });
-      };
-
-      for (const version of options.versions) {
-        const npmTag = version.slice(1);
-        await generateMarkdownForVersion(version, npmTag, false);
-      }
-
-      const npmTag = currentVersion.banner === 'unreleased' ? 'next' : currentVersion.path.slice(1);
-      // Latest version
-      await generateMarkdownForVersion(currentVersion.path, npmTag, true);
-
-      return data;
-    },
-    async contentLoaded({ content, actions }) {
-      const { createData } = actions;
-      const promises = [];
-
-      for (const data of content) {
-        const basePath = `${data.version}/${data.componentTag}`;
-        /**
-         * createData will create a file within the generated ./docusaurus
-         * directory within the plugin directory.
-         */
-        promises.push(
-          createData(`${basePath}/props.md`, data.props),
-          createData(`${basePath}/events.md`, data.events),
-          createData(`${basePath}/methods.md`, data.methods),
-          createData(`${basePath}/parts.md`, data.parts),
-          createData(`${basePath}/custom-props.md`, data.customProps),
-          createData(`${basePath}/slots.md`, data.slots)
-        );
-      }
-
-      await Promise.all(promises);
-    },
-    configureWebpack(config, isServer, utils) {
-      /**
-       * Adds a custom import alias to the webpack configuration, so that the markdown files
-       * can import the auto-generated markdown files from: @ionic-internal/component-api/{version}/{componentTag}
-       */
-      return {
-        resolve: {
-          alias: {
-            '@ionic-internal/component-api': `${context.siteDir}/.docusaurus/docusaurus-plugin-ionic-component-api/default`,
-          },
-        },
-      };
-    },
-  };
-};
-
-/**
- * Calculates the path to the directory where the auto-generated markdown files are stored.
- * @param {*} componentTag The tag name of the component, e.g.: ion-button
- * @param {*} version The version of Ionic that the file pertains to, e.g.: v6
- * @param {*} isCurrentVersion Whether the version is the current version of the docs
- * @returns The path to the directory where the auto-generated markdown files are stored.
- */
-function getDirectoryPath(componentTag, version, isCurrentVersion) {
-  if (isCurrentVersion) {
-    return `./docs/api/auto-generated/${componentTag}`;
-  }
-  return `./versioned_docs/version-${version}/api/auto-generated/${componentTag}`;
-}
-
-/**
- * Formats line breaks in a multiline string to be displayed in a table.
- * @param {*} str The string to format
- * @returns The formatted string
- */
-function formatMultiline(str) {
-  return str.split('\n\n').join('<br /><br />').split('\n').join(' ');
-}
-
-function renderProperties({ props: properties }) {
-  if (properties.length === 0) {
-    return 'No properties available for this component.';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-${properties
-  .map((prop) => {
-    const isDeprecated = prop.deprecation !== undefined;
-
-    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
-
-    return `
-### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
-
-| | |
-| --- | --- |
-| **Description** | ${formatMultiline(docs)} |
-| **Attribute** | \`${prop.attr}\` |
-| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
-| **Default** | \`${prop.default}\` |
-
-`;
-  })
-  .join('\n')}`;
-}
-
-function renderEvents({ events }) {
-  if (events.length === 0) {
-    return 'No events available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderMethods({ methods }) {
-  if (methods.length === 0) {
-    return 'No public methods available for this component.';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-${methods
-  .map(
-    (method) => `
-### ${method.name}
-
-| | |
-| --- | --- |
-| **Description** | ${formatMultiline(method.docs)} |
-| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
-`
-  )
-  .join('\n')}
-
-`;
-}
-
-function renderParts({ parts }) {
-  if (parts.length === 0) {
-    return 'No CSS shadow parts available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${parts.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderCustomProps({ styles: customProps }) {
-  if (customProps.length === 0) {
-    return 'No CSS custom properties available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${customProps.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderSlots({ slots }) {
-  if (slots.length === 0) {
-    return 'No slots available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')}
-
-`;
-}
diff --git a/scripts/api.js b/scripts/api.js
new file mode 100644
index 00000000000..470aadb449f
--- /dev/null
+++ b/scripts/api.js
@@ -0,0 +1,156 @@
+const fetch = require('node-fetch');
+const fs = require('fs');
+
+/**
+ *
+ * This script will create the autogenerated MDX files for each component.
+ *
+ * Creates files for:
+ * - Properties
+ * - Events
+ * - Methods
+ * - CSS Shadow Parts
+ * - Custom Properties
+ * - Slots
+ *
+ * The auto-generated directory & files should be gitignored, since they are created from the published core.json
+ * and should never be edited manually.
+ */
+
+(async function () {
+  const response = await fetch('https://unpkg.com/@ionic/docs/core.json');
+  const { components } = await response.json();
+
+  const names = components.map((component) => component.tag.slice(4));
+  // matches all relative markdown links to a component, e.g. (../button)
+  COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
+
+  components.forEach((comp) => {
+    const compTag = comp.tag.slice(4);
+    writeAutoGeneratedPage(compTag, 'props', renderProperties(comp));
+    writeAutoGeneratedPage(compTag, 'events', renderEvents(comp));
+    writeAutoGeneratedPage(compTag, 'methods', renderMethods(comp));
+    writeAutoGeneratedPage(compTag, 'parts', renderParts(comp));
+    writeAutoGeneratedPage(compTag, 'custom-props', renderCustomProps(comp));
+    writeAutoGeneratedPage(compTag, 'slots', renderSlots(comp));
+  });
+})();
+
+function writeAutoGeneratedPage(componentTag, fileName, data) {
+  const dir = `./static/auto-generated/${componentTag}`;
+  const path = `${dir}/${fileName}.md`;
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(path, data);
+}
+
+/**
+ * Formats line breaks in a multiline string to be displayed in a table.
+ * @param {*} str The string to format
+ * @returns The formatted string
+ */
+function formatMultiline(str) {
+  return str.split('\n\n').join('<br /><br />').split('\n').join(' ');
+}
+
+function renderProperties({ props: properties }) {
+  if (properties.length === 0) {
+    return 'No properties available for this component.';
+  }
+
+  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
+  return `
+${properties
+  .map((prop) => {
+    const isDeprecated = prop.deprecation !== undefined;
+
+    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
+
+    return `
+### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
+
+| | |
+| --- | --- |
+| **Description** | ${formatMultiline(docs)} |
+| **Attribute** | \`${prop.attr}\` |
+| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
+| **Default** | \`${prop.default}\` |
+
+`;
+  })
+  .join('\n')}`;
+}
+
+function renderEvents({ events }) {
+  if (events.length === 0) {
+    return 'No events available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderMethods({ methods }) {
+  if (methods.length === 0) {
+    return 'No public methods available for this component.';
+  }
+
+  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
+  return `
+${methods
+  .map(
+    (method) => `
+### ${method.name}
+
+| | |
+| --- | --- |
+| **Description** | ${formatMultiline(method.docs)} |
+| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
+`
+  )
+  .join('\n')}
+
+`;
+}
+
+function renderParts({ parts }) {
+  if (parts.length === 0) {
+    return 'No CSS shadow parts available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${parts.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderCustomProps({ styles: customProps }) {
+  if (customProps.length === 0) {
+    return 'No CSS custom properties available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${customProps.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderSlots({ slots }) {
+  if (slots.length === 0) {
+    return 'No slots available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')}
+
+`;
+}
diff --git a/static/.gitignore b/static/.gitignore
new file mode 100644
index 00000000000..6dddbb371e3
--- /dev/null
+++ b/static/.gitignore
@@ -0,0 +1 @@
+auto-generated/
diff --git a/versioned_docs/version-v6/api/accordion-group.md b/versioned_docs/version-v6/api/accordion-group.md
index 80dac608394..2880703001c 100644
--- a/versioned_docs/version-v6/api/accordion-group.md
+++ b/versioned_docs/version-v6/api/accordion-group.md
@@ -1,13 +1,12 @@
 ---
-title: 'ion-accordion-group'
+title: "ion-accordion-group"
 ---
-
-import Props from '@ionic-internal/component-api/v6/accordion-group/props.md';
-import Events from '@ionic-internal/component-api/v6/accordion-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/accordion-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/accordion-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/accordion-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/accordion-group/slots.md';
+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';
 
@@ -17,6 +16,7 @@ Accordion group is a container for accordion instances. It manages the state of
 
 See the [Accordion](./accordion) documentation for more information.
 
+
 ## Interfaces
 
 ### AccordionGroupChangeEventDetail
@@ -38,26 +38,22 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## Properties
 
+
+## 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
index 3cf53e1823f..803f0efbfe4 100644
--- a/versioned_docs/version-v6/api/accordion.md
+++ b/versioned_docs/version-v6/api/accordion.md
@@ -2,12 +2,12 @@
 title: 'ion-accordion'
 ---
 
-import Props from '@ionic-internal/component-api/v6/accordion/props.md';
-import Events from '@ionic-internal/component-api/v6/accordion/events.md';
-import Methods from '@ionic-internal/component-api/v6/accordion/methods.md';
-import Parts from '@ionic-internal/component-api/v6/accordion/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/accordion/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/accordion/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/action-sheet.md b/versioned_docs/version-v6/api/action-sheet.md
index 67d0b6d193b..3f2917d979f 100644
--- a/versioned_docs/version-v6/api/action-sheet.md
+++ b/versioned_docs/version-v6/api/action-sheet.md
@@ -2,12 +2,12 @@
 title: 'ion-action-sheet'
 ---
 
-import Props from '@ionic-internal/component-api/v6/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v6/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v6/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v6/action-sheet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/action-sheet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/action-sheet/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.md
index 6a045bd3afc..19b8bd7177a 100644
--- a/versioned_docs/version-v6/api/alert.md
+++ b/versioned_docs/version-v6/api/alert.md
@@ -5,12 +5,12 @@ title: 'ion-alert'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v6/alert/props.md';
-import Events from '@ionic-internal/component-api/v6/alert/events.md';
-import Methods from '@ionic-internal/component-api/v6/alert/methods.md';
-import Parts from '@ionic-internal/component-api/v6/alert/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/alert/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/alert/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.md
index 144734dd1c6..98125d4aa8e 100644
--- a/versioned_docs/version-v6/api/app.md
+++ b/versioned_docs/version-v6/api/app.md
@@ -1,55 +1,47 @@
 ---
-title: 'ion-app'
+title: "ion-app"
 ---
-
-import Props from '@ionic-internal/component-api/v6/app/props.md';
-import Events from '@ionic-internal/component-api/v6/app/events.md';
-import Methods from '@ionic-internal/component-api/v6/app/methods.md';
-import Parts from '@ionic-internal/component-api/v6/app/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/app/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/app/slots.md';
+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."
-  />
+  <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
+* [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
 
+## 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
index da0f858dabc..0f32507e1d7 100644
--- a/versioned_docs/version-v6/api/avatar.md
+++ b/versioned_docs/version-v6/api/avatar.md
@@ -2,12 +2,12 @@
 title: 'ion-avatar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/avatar/props.md';
-import Events from '@ionic-internal/component-api/v6/avatar/events.md';
-import Methods from '@ionic-internal/component-api/v6/avatar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/avatar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/avatar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/avatar/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.md
index 6d7472f98ef..d74db2d2cfa 100644
--- a/versioned_docs/version-v6/api/back-button.md
+++ b/versioned_docs/version-v6/api/back-button.md
@@ -1,26 +1,23 @@
 ---
-title: 'ion-back-button'
+title: "ion-back-button"
 ---
-
-import Props from '@ionic-internal/component-api/v6/back-button/props.md';
-import Events from '@ionic-internal/component-api/v6/back-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/back-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/back-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/back-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/back-button/slots.md';
+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."
-  />
+  <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" />
 
+
 The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized.
 
 ## Basic Usage
@@ -42,25 +39,19 @@ import Custom from '@site/static/usage/v6/back-button/custom/index.md';
 Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set.
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
 <Slots />
diff --git a/versioned_docs/version-v6/api/backdrop.md b/versioned_docs/version-v6/api/backdrop.md
index ae1ecd965b4..97217b36b59 100644
--- a/versioned_docs/version-v6/api/backdrop.md
+++ b/versioned_docs/version-v6/api/backdrop.md
@@ -2,12 +2,12 @@
 title: 'ion-backdrop'
 ---
 
-import Props from '@ionic-internal/component-api/v6/backdrop/props.md';
-import Events from '@ionic-internal/component-api/v6/backdrop/events.md';
-import Methods from '@ionic-internal/component-api/v6/backdrop/methods.md';
-import Parts from '@ionic-internal/component-api/v6/backdrop/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/backdrop/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/backdrop/slots.md';
+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';
 
diff --git a/versioned_docs/version-v6/api/badge.md b/versioned_docs/version-v6/api/badge.md
index 539e07309f4..202b2f32878 100644
--- a/versioned_docs/version-v6/api/badge.md
+++ b/versioned_docs/version-v6/api/badge.md
@@ -2,12 +2,12 @@
 title: 'ion-badge'
 ---
 
-import Props from '@ionic-internal/component-api/v6/badge/props.md';
-import Events from '@ionic-internal/component-api/v6/badge/events.md';
-import Methods from '@ionic-internal/component-api/v6/badge/methods.md';
-import Parts from '@ionic-internal/component-api/v6/badge/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/badge/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/badge/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/breadcrumb.md b/versioned_docs/version-v6/api/breadcrumb.md
index c964549933b..5be2aa6c695 100644
--- a/versioned_docs/version-v6/api/breadcrumb.md
+++ b/versioned_docs/version-v6/api/breadcrumb.md
@@ -1,18 +1,18 @@
 ---
-title: 'ion-breadcrumb'
+title: "ion-breadcrumb"
 ---
-
-import Props from '@ionic-internal/component-api/v6/breadcrumb/props.md';
-import Events from '@ionic-internal/component-api/v6/breadcrumb/events.md';
-import Methods from '@ionic-internal/component-api/v6/breadcrumb/methods.md';
-import Parts from '@ionic-internal/component-api/v6/breadcrumb/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/breadcrumb/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/breadcrumb/slots.md';
+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.
@@ -38,26 +38,23 @@ interface BreadcrumbCustomEvent extends CustomEvent {
 }
 ```
 
-## Properties
 
+
+
+## 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
index 471f5dd4291..561539a973e 100644
--- a/versioned_docs/version-v6/api/breadcrumbs.md
+++ b/versioned_docs/version-v6/api/breadcrumbs.md
@@ -2,12 +2,12 @@
 title: 'ion-breadcrumbs'
 ---
 
-import Props from '@ionic-internal/component-api/v6/breadcrumbs/props.md';
-import Events from '@ionic-internal/component-api/v6/breadcrumbs/events.md';
-import Methods from '@ionic-internal/component-api/v6/breadcrumbs/methods.md';
-import Parts from '@ionic-internal/component-api/v6/breadcrumbs/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/breadcrumbs/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/breadcrumbs/slots.md';
+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';
 
diff --git a/versioned_docs/version-v6/api/button.md b/versioned_docs/version-v6/api/button.md
index 897d4d3f8e5..a78f98da7a8 100644
--- a/versioned_docs/version-v6/api/button.md
+++ b/versioned_docs/version-v6/api/button.md
@@ -2,12 +2,12 @@
 title: 'ion-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/button/props.md';
-import Events from '@ionic-internal/component-api/v6/button/events.md';
-import Methods from '@ionic-internal/component-api/v6/button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/button/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/buttons.md b/versioned_docs/version-v6/api/buttons.md
index d20c05adee6..c22bd4c0ad5 100644
--- a/versioned_docs/version-v6/api/buttons.md
+++ b/versioned_docs/version-v6/api/buttons.md
@@ -2,12 +2,12 @@
 title: 'ion-buttons'
 ---
 
-import Props from '@ionic-internal/component-api/v6/buttons/props.md';
-import Events from '@ionic-internal/component-api/v6/buttons/events.md';
-import Methods from '@ionic-internal/component-api/v6/buttons/methods.md';
-import Parts from '@ionic-internal/component-api/v6/buttons/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/buttons/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/buttons/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/card-content.md b/versioned_docs/version-v6/api/card-content.md
index 58f621b3d89..647cba00897 100644
--- a/versioned_docs/version-v6/api/card-content.md
+++ b/versioned_docs/version-v6/api/card-content.md
@@ -1,40 +1,35 @@
 ---
-title: 'ion-card-content'
+title: "ion-card-content"
 ---
-
-import Props from '@ionic-internal/component-api/v6/card-content/props.md';
-import Events from '@ionic-internal/component-api/v6/card-content/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/card-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/card-content/slots.md';
+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
 
+## 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
index 0461d60b54e..2e52467ed43 100644
--- a/versioned_docs/version-v6/api/card-header.md
+++ b/versioned_docs/version-v6/api/card-header.md
@@ -1,42 +1,37 @@
 ---
-title: 'ion-card-header'
+title: "ion-card-header"
 ---
-
-import Props from '@ionic-internal/component-api/v6/card-header/props.md';
-import Events from '@ionic-internal/component-api/v6/card-header/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-header/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/card-header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/card-header/slots.md';
+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
 
+## 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
index 2779735e71f..ec72784cd99 100644
--- a/versioned_docs/version-v6/api/card-subtitle.md
+++ b/versioned_docs/version-v6/api/card-subtitle.md
@@ -1,42 +1,37 @@
 ---
-title: 'ion-card-subtitle'
+title: "ion-card-subtitle"
 ---
-
-import Props from '@ionic-internal/component-api/v6/card-subtitle/props.md';
-import Events from '@ionic-internal/component-api/v6/card-subtitle/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-subtitle/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-subtitle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/card-subtitle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/card-subtitle/slots.md';
+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
 
+## 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
index ee72f051ed3..33b24158eb5 100644
--- a/versioned_docs/version-v6/api/card-title.md
+++ b/versioned_docs/version-v6/api/card-title.md
@@ -1,50 +1,42 @@
 ---
-title: 'ion-card-title'
+title: "ion-card-title"
 ---
-
-import Props from '@ionic-internal/component-api/v6/card-title/props.md';
-import Events from '@ionic-internal/component-api/v6/card-title/events.md';
-import Methods from '@ionic-internal/component-api/v6/card-title/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card-title/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/card-title/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/card-title/slots.md';
+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."
-  />
+  <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
 
+## 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
index c67dd2a27b8..fda33f2e804 100644
--- a/versioned_docs/version-v6/api/card.md
+++ b/versioned_docs/version-v6/api/card.md
@@ -2,12 +2,12 @@
 title: 'ion-card'
 ---
 
-import Props from '@ionic-internal/component-api/v6/card/props.md';
-import Events from '@ionic-internal/component-api/v6/card/events.md';
-import Methods from '@ionic-internal/component-api/v6/card/methods.md';
-import Parts from '@ionic-internal/component-api/v6/card/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/card/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/card/slots.md';
+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';
 
diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.md
index 727c09811c9..7344a77f0d1 100644
--- a/versioned_docs/version-v6/api/checkbox.md
+++ b/versioned_docs/version-v6/api/checkbox.md
@@ -2,12 +2,12 @@
 title: 'ion-checkbox'
 ---
 
-import Props from '@ionic-internal/component-api/v6/checkbox/props.md';
-import Events from '@ionic-internal/component-api/v6/checkbox/events.md';
-import Methods from '@ionic-internal/component-api/v6/checkbox/methods.md';
-import Parts from '@ionic-internal/component-api/v6/checkbox/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/checkbox/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/checkbox/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/chip.md b/versioned_docs/version-v6/api/chip.md
index 91f6bb5e264..46e13e98292 100644
--- a/versioned_docs/version-v6/api/chip.md
+++ b/versioned_docs/version-v6/api/chip.md
@@ -2,12 +2,12 @@
 title: 'ion-chip'
 ---
 
-import Props from '@ionic-internal/component-api/v6/chip/props.md';
-import Events from '@ionic-internal/component-api/v6/chip/events.md';
-import Methods from '@ionic-internal/component-api/v6/chip/methods.md';
-import Parts from '@ionic-internal/component-api/v6/chip/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/chip/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/chip/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.md
index 5a19f67b49b..e5872b4f6a1 100644
--- a/versioned_docs/version-v6/api/col.md
+++ b/versioned_docs/version-v6/api/col.md
@@ -1,54 +1,49 @@
 ---
-title: 'ion-col'
+title: "ion-col"
 ---
-
-import Props from '@ionic-internal/component-api/v6/col/props.md';
-import Events from '@ionic-internal/component-api/v6/col/events.md';
-import Methods from '@ionic-internal/component-api/v6/col/methods.md';
-import Parts from '@ionic-internal/component-api/v6/col/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/col/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/col/slots.md';
+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."
-  />
+  <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
 
+
+
+## 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
index 912c05d4515..528f39b7958 100644
--- a/versioned_docs/version-v6/api/content.md
+++ b/versioned_docs/version-v6/api/content.md
@@ -2,12 +2,12 @@
 title: 'ion-content'
 ---
 
-import Props from '@ionic-internal/component-api/v6/content/props.md';
-import Events from '@ionic-internal/component-api/v6/content/events.md';
-import Methods from '@ionic-internal/component-api/v6/content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/content/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/datetime-button.md b/versioned_docs/version-v6/api/datetime-button.md
index dd76005abc2..78e691b231d 100644
--- a/versioned_docs/version-v6/api/datetime-button.md
+++ b/versioned_docs/version-v6/api/datetime-button.md
@@ -2,12 +2,12 @@
 title: 'ion-datetime-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/datetime-button/props.md';
-import Events from '@ionic-internal/component-api/v6/datetime-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/datetime-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/datetime-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/datetime-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/datetime-button/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index a4abc8d33a6..ffe8e673934 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -2,12 +2,12 @@
 title: 'ion-datetime'
 ---
 
-import Props from '@ionic-internal/component-api/v6/datetime/props.md';
-import Events from '@ionic-internal/component-api/v6/datetime/events.md';
-import Methods from '@ionic-internal/component-api/v6/datetime/methods.md';
-import Parts from '@ionic-internal/component-api/v6/datetime/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/datetime/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/datetime/slots.md';
+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';
 
diff --git a/versioned_docs/version-v6/api/fab-button.md b/versioned_docs/version-v6/api/fab-button.md
index bd1c98cc848..ab86a48426e 100644
--- a/versioned_docs/version-v6/api/fab-button.md
+++ b/versioned_docs/version-v6/api/fab-button.md
@@ -1,26 +1,23 @@
 ---
-title: 'ion-fab-button'
+title: "ion-fab-button"
 ---
-
-import Props from '@ionic-internal/component-api/v6/fab-button/props.md';
-import Events from '@ionic-internal/component-api/v6/fab-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/fab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/fab-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/fab-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/fab-button/slots.md';
+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."
-  />
+  <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.
@@ -28,25 +25,19 @@ As the name suggests, FABs generally float over the content in a fixed position.
 For usage examples, see the [fab documentation](./fab).
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index 36d1040bda6..a0659a394d7 100644
--- a/versioned_docs/version-v6/api/fab-list.md
+++ b/versioned_docs/version-v6/api/fab-list.md
@@ -1,13 +1,12 @@
 ---
-title: 'ion-fab-list'
+title: "ion-fab-list"
 ---
-
-import Props from '@ionic-internal/component-api/v6/fab-list/props.md';
-import Events from '@ionic-internal/component-api/v6/fab-list/events.md';
-import Methods from '@ionic-internal/component-api/v6/fab-list/methods.md';
-import Parts from '@ionic-internal/component-api/v6/fab-list/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/fab-list/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/fab-list/slots.md';
+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';
 
@@ -18,25 +17,19 @@ The fab list component is a container for multiple [fab buttons](./fab-button).
 For usage examples, see the [fab documentation](./fab).
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index 008063d0f2e..5ecfbbd012d 100644
--- a/versioned_docs/version-v6/api/fab.md
+++ b/versioned_docs/version-v6/api/fab.md
@@ -2,12 +2,12 @@
 title: 'ion-fab'
 ---
 
-import Props from '@ionic-internal/component-api/v6/fab/props.md';
-import Events from '@ionic-internal/component-api/v6/fab/events.md';
-import Methods from '@ionic-internal/component-api/v6/fab/methods.md';
-import Parts from '@ionic-internal/component-api/v6/fab/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/fab/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/fab/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/footer.md b/versioned_docs/version-v6/api/footer.md
index a2c7b74fad8..0a4820b5713 100644
--- a/versioned_docs/version-v6/api/footer.md
+++ b/versioned_docs/version-v6/api/footer.md
@@ -2,12 +2,12 @@
 title: 'ion-footer'
 ---
 
-import Props from '@ionic-internal/component-api/v6/footer/props.md';
-import Events from '@ionic-internal/component-api/v6/footer/events.md';
-import Methods from '@ionic-internal/component-api/v6/footer/methods.md';
-import Parts from '@ionic-internal/component-api/v6/footer/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/footer/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/footer/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/grid.md b/versioned_docs/version-v6/api/grid.md
index 9eedd1955ab..22ea8c2f0f1 100644
--- a/versioned_docs/version-v6/api/grid.md
+++ b/versioned_docs/version-v6/api/grid.md
@@ -2,12 +2,12 @@
 title: 'ion-grid'
 ---
 
-import Props from '@ionic-internal/component-api/v6/grid/props.md';
-import Events from '@ionic-internal/component-api/v6/grid/events.md';
-import Methods from '@ionic-internal/component-api/v6/grid/methods.md';
-import Parts from '@ionic-internal/component-api/v6/grid/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/grid/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/grid/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/header.md b/versioned_docs/version-v6/api/header.md
index d3305b4c027..a746f955361 100644
--- a/versioned_docs/version-v6/api/header.md
+++ b/versioned_docs/version-v6/api/header.md
@@ -2,12 +2,12 @@
 title: 'ion-header'
 ---
 
-import Props from '@ionic-internal/component-api/v6/header/props.md';
-import Events from '@ionic-internal/component-api/v6/header/events.md';
-import Methods from '@ionic-internal/component-api/v6/header/methods.md';
-import Parts from '@ionic-internal/component-api/v6/header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/header/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/img.md b/versioned_docs/version-v6/api/img.md
index 44e3adbb1d3..aa1010e46b5 100644
--- a/versioned_docs/version-v6/api/img.md
+++ b/versioned_docs/version-v6/api/img.md
@@ -2,12 +2,12 @@
 title: 'ion-img'
 ---
 
-import Props from '@ionic-internal/component-api/v6/img/props.md';
-import Events from '@ionic-internal/component-api/v6/img/events.md';
-import Methods from '@ionic-internal/component-api/v6/img/methods.md';
-import Parts from '@ionic-internal/component-api/v6/img/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/img/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/img/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.md b/versioned_docs/version-v6/api/infinite-scroll-content.md
index 53b4829e731..2647dffdb87 100644
--- a/versioned_docs/version-v6/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v6/api/infinite-scroll-content.md
@@ -1,13 +1,13 @@
 ---
-title: 'ion-infinite-scroll-content'
+title: "ion-infinite-scroll-content"
 ---
 
-import Props from '@ionic-internal/component-api/v6/infinite-scroll-content/props.md';
-import Events from '@ionic-internal/component-api/v6/infinite-scroll-content/events.md';
-import Methods from '@ionic-internal/component-api/v6/infinite-scroll-content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/infinite-scroll-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/infinite-scroll-content/slots.md';
+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';
 
@@ -16,25 +16,19 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
 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 />
+<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
index e8788dde143..0ea2be497e9 100644
--- a/versioned_docs/version-v6/api/infinite-scroll.md
+++ b/versioned_docs/version-v6/api/infinite-scroll.md
@@ -2,12 +2,12 @@
 title: 'ion-infinite-scroll'
 ---
 
-import Props from '@ionic-internal/component-api/v6/infinite-scroll/props.md';
-import Events from '@ionic-internal/component-api/v6/infinite-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v6/infinite-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v6/infinite-scroll/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/infinite-scroll/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.md
index 3f439459ada..f9c328996e7 100644
--- a/versioned_docs/version-v6/api/input.md
+++ b/versioned_docs/version-v6/api/input.md
@@ -2,12 +2,12 @@
 title: 'ion-input'
 ---
 
-import Props from '@ionic-internal/component-api/v6/input/props.md';
-import Events from '@ionic-internal/component-api/v6/input/events.md';
-import Methods from '@ionic-internal/component-api/v6/input/methods.md';
-import Parts from '@ionic-internal/component-api/v6/input/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/input/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/input/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/item-divider.md b/versioned_docs/version-v6/api/item-divider.md
index cf5cb8cad4a..381d9eb414a 100644
--- a/versioned_docs/version-v6/api/item-divider.md
+++ b/versioned_docs/version-v6/api/item-divider.md
@@ -2,12 +2,12 @@
 title: 'ion-item-divider'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-divider/props.md';
-import Events from '@ionic-internal/component-api/v6/item-divider/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-divider/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-divider/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/item-divider/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/item-divider/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/item-group.md b/versioned_docs/version-v6/api/item-group.md
index c4909aa35b8..c7920c017dd 100644
--- a/versioned_docs/version-v6/api/item-group.md
+++ b/versioned_docs/version-v6/api/item-group.md
@@ -2,12 +2,12 @@
 title: 'ion-item-group'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-group/props.md';
-import Events from '@ionic-internal/component-api/v6/item-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/item-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/item-group/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/item-option.md b/versioned_docs/version-v6/api/item-option.md
index 8ef658c9bd8..800d1030f50 100644
--- a/versioned_docs/version-v6/api/item-option.md
+++ b/versioned_docs/version-v6/api/item-option.md
@@ -1,50 +1,42 @@
 ---
-title: 'ion-item-option'
+title: "ion-item-option"
 ---
-
-import Props from '@ionic-internal/component-api/v6/item-option/props.md';
-import Events from '@ionic-internal/component-api/v6/item-option/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-option/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-option/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/item-option/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/item-option/slots.md';
+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."
-  />
+  <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
 
+## 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
index 6035574119c..cbee8f5289b 100644
--- a/versioned_docs/version-v6/api/item-options.md
+++ b/versioned_docs/version-v6/api/item-options.md
@@ -1,55 +1,50 @@
 ---
-title: 'ion-item-options'
+title: "ion-item-options"
 ---
-
-import Props from '@ionic-internal/component-api/v6/item-options/props.md';
-import Events from '@ionic-internal/component-api/v6/item-options/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-options/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-options/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/item-options/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/item-options/slots.md';
+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."
-  />
+  <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
 
+
+
+## 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
index 62e496d51e8..dba424f2b7f 100644
--- a/versioned_docs/version-v6/api/item-sliding.md
+++ b/versioned_docs/version-v6/api/item-sliding.md
@@ -2,12 +2,12 @@
 title: 'ion-item-sliding'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item-sliding/props.md';
-import Events from '@ionic-internal/component-api/v6/item-sliding/events.md';
-import Methods from '@ionic-internal/component-api/v6/item-sliding/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item-sliding/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/item-sliding/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/item-sliding/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.md
index cb318d9fb04..eb3df16d32e 100644
--- a/versioned_docs/version-v6/api/item.md
+++ b/versioned_docs/version-v6/api/item.md
@@ -2,12 +2,12 @@
 title: 'ion-item'
 ---
 
-import Props from '@ionic-internal/component-api/v6/item/props.md';
-import Events from '@ionic-internal/component-api/v6/item/events.md';
-import Methods from '@ionic-internal/component-api/v6/item/methods.md';
-import Parts from '@ionic-internal/component-api/v6/item/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/item/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/item/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/label.md b/versioned_docs/version-v6/api/label.md
index 4b17032fe56..329f40c56a4 100644
--- a/versioned_docs/version-v6/api/label.md
+++ b/versioned_docs/version-v6/api/label.md
@@ -2,12 +2,12 @@
 title: 'ion-label'
 ---
 
-import Props from '@ionic-internal/component-api/v6/label/props.md';
-import Events from '@ionic-internal/component-api/v6/label/events.md';
-import Methods from '@ionic-internal/component-api/v6/label/methods.md';
-import Parts from '@ionic-internal/component-api/v6/label/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/label/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/label/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/list-header.md b/versioned_docs/version-v6/api/list-header.md
index bf16332d0fc..2410ffc044f 100644
--- a/versioned_docs/version-v6/api/list-header.md
+++ b/versioned_docs/version-v6/api/list-header.md
@@ -2,12 +2,12 @@
 title: 'ion-list-header'
 ---
 
-import Props from '@ionic-internal/component-api/v6/list-header/props.md';
-import Events from '@ionic-internal/component-api/v6/list-header/events.md';
-import Methods from '@ionic-internal/component-api/v6/list-header/methods.md';
-import Parts from '@ionic-internal/component-api/v6/list-header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/list-header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/list-header/slots.md';
+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';
 
diff --git a/versioned_docs/version-v6/api/list.md b/versioned_docs/version-v6/api/list.md
index 054686768c7..336fe851f08 100644
--- a/versioned_docs/version-v6/api/list.md
+++ b/versioned_docs/version-v6/api/list.md
@@ -2,12 +2,12 @@
 title: 'ion-list'
 ---
 
-import Props from '@ionic-internal/component-api/v6/list/props.md';
-import Events from '@ionic-internal/component-api/v6/list/events.md';
-import Methods from '@ionic-internal/component-api/v6/list/methods.md';
-import Parts from '@ionic-internal/component-api/v6/list/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/list/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/list/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/loading.md b/versioned_docs/version-v6/api/loading.md
index 2c61ce88c14..c9bd57dd163 100644
--- a/versioned_docs/version-v6/api/loading.md
+++ b/versioned_docs/version-v6/api/loading.md
@@ -5,12 +5,12 @@ title: 'ion-loading'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v6/loading/props.md';
-import Events from '@ionic-internal/component-api/v6/loading/events.md';
-import Methods from '@ionic-internal/component-api/v6/loading/methods.md';
-import Parts from '@ionic-internal/component-api/v6/loading/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/loading/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/loading/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/menu-button.md b/versioned_docs/version-v6/api/menu-button.md
index 180f59dab48..adba980b958 100644
--- a/versioned_docs/version-v6/api/menu-button.md
+++ b/versioned_docs/version-v6/api/menu-button.md
@@ -1,50 +1,42 @@
 ---
-title: 'ion-menu-button'
+title: "ion-menu-button"
 ---
-
-import Props from '@ionic-internal/component-api/v6/menu-button/props.md';
-import Events from '@ionic-internal/component-api/v6/menu-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/menu-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/menu-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/menu-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/menu-button/slots.md';
+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."
-  />
+  <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
 
+## 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
index a68507aa4f4..e6a10201362 100644
--- a/versioned_docs/version-v6/api/menu-toggle.md
+++ b/versioned_docs/version-v6/api/menu-toggle.md
@@ -1,52 +1,44 @@
 ---
-title: 'ion-menu-toggle'
+title: "ion-menu-toggle"
 ---
-
-import Props from '@ionic-internal/component-api/v6/menu-toggle/props.md';
-import Events from '@ionic-internal/component-api/v6/menu-toggle/events.md';
-import Methods from '@ionic-internal/component-api/v6/menu-toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v6/menu-toggle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/menu-toggle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/menu-toggle/slots.md';
+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."
-  />
+  <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
 
+## 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
index e6ba58d6e82..323f90dd18b 100644
--- a/versioned_docs/version-v6/api/menu.md
+++ b/versioned_docs/version-v6/api/menu.md
@@ -2,12 +2,12 @@
 title: 'ion-menu'
 ---
 
-import Props from '@ionic-internal/component-api/v6/menu/props.md';
-import Events from '@ionic-internal/component-api/v6/menu/events.md';
-import Methods from '@ionic-internal/component-api/v6/menu/methods.md';
-import Parts from '@ionic-internal/component-api/v6/menu/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/menu/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/menu/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
index 0ad556d9173..68d44332e4e 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.md
@@ -2,12 +2,12 @@
 title: 'ion-modal'
 ---
 
-import Props from '@ionic-internal/component-api/v6/modal/props.md';
-import Events from '@ionic-internal/component-api/v6/modal/events.md';
-import Methods from '@ionic-internal/component-api/v6/modal/methods.md';
-import Parts from '@ionic-internal/component-api/v6/modal/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/modal/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/modal/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/nav-link.md b/versioned_docs/version-v6/api/nav-link.md
index 8d5857465dc..30a8f3264ed 100644
--- a/versioned_docs/version-v6/api/nav-link.md
+++ b/versioned_docs/version-v6/api/nav-link.md
@@ -1,50 +1,42 @@
 ---
-title: 'ion-nav-link'
+title: "ion-nav-link"
 ---
-
-import Props from '@ionic-internal/component-api/v6/nav-link/props.md';
-import Events from '@ionic-internal/component-api/v6/nav-link/events.md';
-import Methods from '@ionic-internal/component-api/v6/nav-link/methods.md';
-import Parts from '@ionic-internal/component-api/v6/nav-link/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/nav-link/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/nav-link/slots.md';
+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."
-  />
+  <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
 
+## 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
index 330f38561c4..0e4262885d2 100644
--- a/versioned_docs/version-v6/api/nav.md
+++ b/versioned_docs/version-v6/api/nav.md
@@ -2,12 +2,12 @@
 title: 'ion-nav'
 ---
 
-import Props from '@ionic-internal/component-api/v6/nav/props.md';
-import Events from '@ionic-internal/component-api/v6/nav/events.md';
-import Methods from '@ionic-internal/component-api/v6/nav/methods.md';
-import Parts from '@ionic-internal/component-api/v6/nav/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/nav/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/nav/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/note.md b/versioned_docs/version-v6/api/note.md
index fd8cbc92fdf..f512aaf7753 100644
--- a/versioned_docs/version-v6/api/note.md
+++ b/versioned_docs/version-v6/api/note.md
@@ -2,12 +2,12 @@
 title: 'ion-note'
 ---
 
-import Props from '@ionic-internal/component-api/v6/note/props.md';
-import Events from '@ionic-internal/component-api/v6/note/events.md';
-import Methods from '@ionic-internal/component-api/v6/note/methods.md';
-import Parts from '@ionic-internal/component-api/v6/note/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/note/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/note/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/picker.md b/versioned_docs/version-v6/api/picker.md
index 1c3ab46eab4..8eec3438db2 100644
--- a/versioned_docs/version-v6/api/picker.md
+++ b/versioned_docs/version-v6/api/picker.md
@@ -1,13 +1,12 @@
 ---
 title: 'ion-picker'
 ---
-
-import Props from '@ionic-internal/component-api/v6/picker/props.md';
-import Events from '@ionic-internal/component-api/v6/picker/events.md';
-import Methods from '@ionic-internal/component-api/v6/picker/methods.md';
-import Parts from '@ionic-internal/component-api/v6/picker/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/picker/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/picker/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/popover.md b/versioned_docs/version-v6/api/popover.md
index 041db143901..a65065904f5 100644
--- a/versioned_docs/version-v6/api/popover.md
+++ b/versioned_docs/version-v6/api/popover.md
@@ -2,12 +2,12 @@
 title: 'ion-popover'
 ---
 
-import Props from '@ionic-internal/component-api/v6/popover/props.md';
-import Events from '@ionic-internal/component-api/v6/popover/events.md';
-import Methods from '@ionic-internal/component-api/v6/popover/methods.md';
-import Parts from '@ionic-internal/component-api/v6/popover/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/popover/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/popover/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/progress-bar.md b/versioned_docs/version-v6/api/progress-bar.md
index e5f75f384ef..f28e826e60d 100644
--- a/versioned_docs/version-v6/api/progress-bar.md
+++ b/versioned_docs/version-v6/api/progress-bar.md
@@ -2,12 +2,12 @@
 title: 'ion-progress-bar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/progress-bar/props.md';
-import Events from '@ionic-internal/component-api/v6/progress-bar/events.md';
-import Methods from '@ionic-internal/component-api/v6/progress-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/progress-bar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/progress-bar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/progress-bar/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/radio-group.md b/versioned_docs/version-v6/api/radio-group.md
index dcfb8138e77..b083ee208b2 100644
--- a/versioned_docs/version-v6/api/radio-group.md
+++ b/versioned_docs/version-v6/api/radio-group.md
@@ -1,26 +1,24 @@
 ---
-title: 'ion-radio-group'
+title: "ion-radio-group"
 ---
-
-import Props from '@ionic-internal/component-api/v6/radio-group/props.md';
-import Events from '@ionic-internal/component-api/v6/radio-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/radio-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/radio-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/radio-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/radio-group/slots.md';
+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."
-  />
+  <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
@@ -42,26 +40,21 @@ interface RadioGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## Properties
 
+## 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
index ab82907bea1..a841a557642 100644
--- a/versioned_docs/version-v6/api/radio.md
+++ b/versioned_docs/version-v6/api/radio.md
@@ -2,12 +2,12 @@
 title: 'ion-radio'
 ---
 
-import Props from '@ionic-internal/component-api/v6/radio/props.md';
-import Events from '@ionic-internal/component-api/v6/radio/events.md';
-import Methods from '@ionic-internal/component-api/v6/radio/methods.md';
-import Parts from '@ionic-internal/component-api/v6/radio/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/radio/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/radio/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/range.md b/versioned_docs/version-v6/api/range.md
index 75a7c4af8fa..98492b83314 100644
--- a/versioned_docs/version-v6/api/range.md
+++ b/versioned_docs/version-v6/api/range.md
@@ -2,12 +2,12 @@
 title: 'ion-range'
 ---
 
-import Props from '@ionic-internal/component-api/v6/range/props.md';
-import Events from '@ionic-internal/component-api/v6/range/events.md';
-import Methods from '@ionic-internal/component-api/v6/range/methods.md';
-import Parts from '@ionic-internal/component-api/v6/range/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/range/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/range/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/refresher-content.md b/versioned_docs/version-v6/api/refresher-content.md
index c0091c89d0f..1b80d4ef40c 100644
--- a/versioned_docs/version-v6/api/refresher-content.md
+++ b/versioned_docs/version-v6/api/refresher-content.md
@@ -1,40 +1,35 @@
 ---
-title: 'ion-refresher-content'
+title: "ion-refresher-content"
 ---
-
-import Props from '@ionic-internal/component-api/v6/refresher-content/props.md';
-import Events from '@ionic-internal/component-api/v6/refresher-content/events.md';
-import Methods from '@ionic-internal/component-api/v6/refresher-content/methods.md';
-import Parts from '@ionic-internal/component-api/v6/refresher-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/refresher-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/refresher-content/slots.md';
+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
 
+## 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
index 31914ee2e7d..1f69dd3d268 100644
--- a/versioned_docs/version-v6/api/refresher.md
+++ b/versioned_docs/version-v6/api/refresher.md
@@ -2,12 +2,12 @@
 title: 'ion-refresher'
 ---
 
-import Props from '@ionic-internal/component-api/v6/refresher/props.md';
-import Events from '@ionic-internal/component-api/v6/refresher/events.md';
-import Methods from '@ionic-internal/component-api/v6/refresher/methods.md';
-import Parts from '@ionic-internal/component-api/v6/refresher/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/refresher/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/refresher/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/reorder-group.md b/versioned_docs/version-v6/api/reorder-group.md
index 2c8615cee46..674bc2561b9 100644
--- a/versioned_docs/version-v6/api/reorder-group.md
+++ b/versioned_docs/version-v6/api/reorder-group.md
@@ -1,28 +1,26 @@
 ---
-title: 'ion-reorder-group'
+title: "ion-reorder-group"
 ---
-
-import Props from '@ionic-internal/component-api/v6/reorder-group/props.md';
-import Events from '@ionic-internal/component-api/v6/reorder-group/events.md';
-import Methods from '@ionic-internal/component-api/v6/reorder-group/methods.md';
-import Parts from '@ionic-internal/component-api/v6/reorder-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/reorder-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/reorder-group/slots.md';
+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."
-  />
+  <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
@@ -46,26 +44,21 @@ interface ItemReorderCustomEvent extends CustomEvent {
 }
 ```
 
-## Properties
 
+## 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
index 38301d71bbe..e7d57830079 100644
--- a/versioned_docs/version-v6/api/reorder.md
+++ b/versioned_docs/version-v6/api/reorder.md
@@ -2,12 +2,12 @@
 title: 'ion-reorder'
 ---
 
-import Props from '@ionic-internal/component-api/v6/reorder/props.md';
-import Events from '@ionic-internal/component-api/v6/reorder/events.md';
-import Methods from '@ionic-internal/component-api/v6/reorder/methods.md';
-import Parts from '@ionic-internal/component-api/v6/reorder/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/reorder/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/reorder/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/ripple-effect.md b/versioned_docs/version-v6/api/ripple-effect.md
index e2def63ac03..83f5e0b8486 100644
--- a/versioned_docs/version-v6/api/ripple-effect.md
+++ b/versioned_docs/version-v6/api/ripple-effect.md
@@ -2,12 +2,12 @@
 title: 'ion-ripple-effect'
 ---
 
-import Props from '@ionic-internal/component-api/v6/ripple-effect/props.md';
-import Events from '@ionic-internal/component-api/v6/ripple-effect/events.md';
-import Methods from '@ionic-internal/component-api/v6/ripple-effect/methods.md';
-import Parts from '@ionic-internal/component-api/v6/ripple-effect/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/ripple-effect/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/ripple-effect/slots.md';
+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';
 
diff --git a/versioned_docs/version-v6/api/route-redirect.md b/versioned_docs/version-v6/api/route-redirect.md
index a2ace00dbea..ac4febd161d 100644
--- a/versioned_docs/version-v6/api/route-redirect.md
+++ b/versioned_docs/version-v6/api/route-redirect.md
@@ -1,37 +1,36 @@
 ---
-title: 'ion-route-redirect'
+title: "ion-route-redirect"
 ---
 
-import Props from '@ionic-internal/component-api/v6/route-redirect/props.md';
-import Events from '@ionic-internal/component-api/v6/route-redirect/events.md';
-import Methods from '@ionic-internal/component-api/v6/route-redirect/methods.md';
-import Parts from '@ionic-internal/component-api/v6/route-redirect/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/route-redirect/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/route-redirect/slots.md';
+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."
-  />
+  <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';
 
+
 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.
+ 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`
+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.
@@ -49,6 +48,9 @@ Take the following two redirects:
 
 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
@@ -94,25 +96,19 @@ routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');
 ```
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index e8be6cb3627..46803354c95 100644
--- a/versioned_docs/version-v6/api/route.md
+++ b/versioned_docs/version-v6/api/route.md
@@ -1,33 +1,32 @@
 ---
-title: 'ion-route'
+title: "ion-route"
 ---
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v6/route/props.md';
-import Events from '@ionic-internal/component-api/v6/route/events.md';
-import Methods from '@ionic-internal/component-api/v6/route/methods.md';
-import Parts from '@ionic-internal/component-api/v6/route/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/route/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/route/slots.md';
+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."
-  />
+  <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';
 
+
+
 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.
+ 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.
@@ -43,6 +42,9 @@ interface NavigationHookOptions {
 }
 ```
 
+
+
+
 ## Usage
 
 <Tabs groupId="framework" defaultValue="javascript" values={[{ value: 'javascript', label: 'Javascript' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
@@ -67,23 +69,23 @@ 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');
@@ -97,21 +99,23 @@ const confirmDiscardChanges = async () => {
     {
       text: 'Discard',
       role: 'destructive',
-    },
+    }
   ];
-
+  
   document.body.appendChild(alert);
-
+  
   await alert.present();
-
+  
   const { role } = await alert.onDidDismiss();
-
-  return role === 'Cancel' ? false : true;
-};
+  
+  return (role === 'Cancel') ? false : true;
+}
 ```
 
+
 </TabItem>
 
+
 <TabItem value="stencil">
 
 ```typescript
@@ -120,7 +124,7 @@ import { alertController } from '@ionic/core';
 
 @Component({
   tag: 'router-example',
-  styleUrl: 'router-example.css',
+  styleUrl: 'router-example.css'
 })
 export class RouterExample {
   render() {
@@ -131,29 +135,29 @@ export class RouterExample {
         <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({
@@ -167,20 +171,22 @@ const confirmDiscardChanges = async () => {
       {
         text: 'Discard',
         role: 'destructive',
-      },
-    ],
+      }
+    ]
   });
-
+  
   await alert.present();
-
+  
   const { role } = await alert.onDidDismiss();
-
-  return role === 'Cancel' ? false : true;
-};
+  
+  return (role === 'Cancel') ? false : true;
+}
 ```
 
+
 </TabItem>
 
+
 <TabItem value="vue">
 
 ```html
@@ -198,24 +204,24 @@ const confirmDiscardChanges = async () => {
 
   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?',
@@ -228,16 +234,16 @@ const confirmDiscardChanges = async () => {
         {
           text: 'Discard',
           role: 'destructive',
-        },
-      ],
+        }
+      ]
     });
-
+    
     await alert.present();
-
+    
     const { role } = await alert.onDidDismiss();
-
-    return role === 'Cancel' ? false : true;
-  };
+    
+    return (role === 'Cancel') ? false : true;
+  }
 </script>
 ```
 
@@ -246,25 +252,19 @@ const confirmDiscardChanges = async () => {
 </Tabs>
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index bcccd576c42..dd87a4c9354 100644
--- a/versioned_docs/version-v6/api/router-link.md
+++ b/versioned_docs/version-v6/api/router-link.md
@@ -1,61 +1,59 @@
 ---
-title: 'ion-router-link'
+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'
+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 '@ionic-internal/component-api/v6/router-link/props.md';
-import Events from '@ionic-internal/component-api/v6/router-link/events.md';
-import Methods from '@ionic-internal/component-api/v6/router-link/methods.md';
-import Parts from '@ionic-internal/component-api/v6/router-link/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/router-link/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/router-link/slots.md';
+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."
-  />
+  <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} />
+<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.
+ 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
 
+
+
+## Properties
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index 882aaaa1b29..c15289ab77b 100644
--- a/versioned_docs/version-v6/api/router-outlet.md
+++ b/versioned_docs/version-v6/api/router-outlet.md
@@ -1,18 +1,21 @@
 ---
-title: 'ion-router-outlet'
+title: "ion-router-outlet"
 ---
 
-import Props from '@ionic-internal/component-api/v6/router-outlet/props.md';
-import Events from '@ionic-internal/component-api/v6/router-outlet/events.md';
-import Methods from '@ionic-internal/component-api/v6/router-outlet/methods.md';
-import Parts from '@ionic-internal/component-api/v6/router-outlet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/router-outlet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/router-outlet/slots.md';
+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" />
 
+
 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.
@@ -21,37 +24,36 @@ Although router outlet has methods for navigating around, it's recommended to us
 
 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
 
+
+
+## Properties
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index 32c31f6d4e9..1f70135b7d2 100644
--- a/versioned_docs/version-v6/api/router.md
+++ b/versioned_docs/version-v6/api/router.md
@@ -1,30 +1,29 @@
 ---
-title: 'ion-router'
+title: "ion-router"
 ---
 
-import Props from '@ionic-internal/component-api/v6/router/props.md';
-import Events from '@ionic-internal/component-api/v6/router/events.md';
-import Methods from '@ionic-internal/component-api/v6/router/methods.md';
-import Parts from '@ionic-internal/component-api/v6/router/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/router/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/router/slots.md';
+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."
-  />
+  <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';
 
+
 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. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
+ Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
 :::
 
+
 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.
 
@@ -63,6 +62,8 @@ interface RouterCustomEvent extends CustomEvent {
 }
 ```
 
+
+
 ## Usage
 
 ```html
@@ -89,28 +90,24 @@ interface RouterCustomEvent extends CustomEvent {
   <ion-route url="/signup" component="page-signup"></ion-route>
   <ion-route url="/support" component="page-support"></ion-route>
 </ion-router>
+
 ```
 
-## Properties
 
+## Properties
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index 4a01eb80f00..48fc21c4ba0 100644
--- a/versioned_docs/version-v6/api/row.md
+++ b/versioned_docs/version-v6/api/row.md
@@ -1,20 +1,16 @@
 ---
-title: 'ion-row'
+title: "ion-row"
 ---
-
-import Props from '@ionic-internal/component-api/v6/row/props.md';
-import Events from '@ionic-internal/component-api/v6/row/events.md';
-import Methods from '@ionic-internal/component-api/v6/row/methods.md';
-import Parts from '@ionic-internal/component-api/v6/row/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/row/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/row/slots.md';
+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."
-  />
+  <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';
@@ -26,30 +22,28 @@ Rows are horizontal components of the [grid](./grid) system and contain varying
 
 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
 
+
+
+## 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
index ce0c62b2a41..5e75b8dc412 100644
--- a/versioned_docs/version-v6/api/searchbar.md
+++ b/versioned_docs/version-v6/api/searchbar.md
@@ -2,12 +2,12 @@
 title: 'ion-searchbar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/searchbar/props.md';
-import Events from '@ionic-internal/component-api/v6/searchbar/events.md';
-import Methods from '@ionic-internal/component-api/v6/searchbar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/searchbar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/searchbar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/searchbar/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/segment-button.md b/versioned_docs/version-v6/api/segment-button.md
index 0e7d688742b..a5a87ccd7d9 100644
--- a/versioned_docs/version-v6/api/segment-button.md
+++ b/versioned_docs/version-v6/api/segment-button.md
@@ -2,12 +2,12 @@
 title: 'ion-segment-button'
 ---
 
-import Props from '@ionic-internal/component-api/v6/segment-button/props.md';
-import Events from '@ionic-internal/component-api/v6/segment-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/segment-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/segment-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/segment-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/segment-button/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/segment.md b/versioned_docs/version-v6/api/segment.md
index 1283792ad65..14f795ac0ed 100644
--- a/versioned_docs/version-v6/api/segment.md
+++ b/versioned_docs/version-v6/api/segment.md
@@ -2,12 +2,12 @@
 title: 'ion-segment'
 ---
 
-import Props from '@ionic-internal/component-api/v6/segment/props.md';
-import Events from '@ionic-internal/component-api/v6/segment/events.md';
-import Methods from '@ionic-internal/component-api/v6/segment/methods.md';
-import Parts from '@ionic-internal/component-api/v6/segment/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/segment/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/segment/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/select-option.md b/versioned_docs/version-v6/api/select-option.md
index 4d4b3e2c90d..73dbf015e2b 100644
--- a/versioned_docs/version-v6/api/select-option.md
+++ b/versioned_docs/version-v6/api/select-option.md
@@ -1,50 +1,42 @@
 ---
-title: 'ion-select-option'
+title: "ion-select-option"
 ---
-
-import Props from '@ionic-internal/component-api/v6/select-option/props.md';
-import Events from '@ionic-internal/component-api/v6/select-option/events.md';
-import Methods from '@ionic-internal/component-api/v6/select-option/methods.md';
-import Parts from '@ionic-internal/component-api/v6/select-option/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/select-option/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/select-option/slots.md';
+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."
-  />
+  <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
 
+## Properties
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index 89509c1becc..3682cc13f04 100644
--- a/versioned_docs/version-v6/api/select.md
+++ b/versioned_docs/version-v6/api/select.md
@@ -2,12 +2,12 @@
 title: 'ion-select'
 ---
 
-import Props from '@ionic-internal/component-api/v6/select/props.md';
-import Events from '@ionic-internal/component-api/v6/select/events.md';
-import Methods from '@ionic-internal/component-api/v6/select/methods.md';
-import Parts from '@ionic-internal/component-api/v6/select/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/select/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/select/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/skeleton-text.md b/versioned_docs/version-v6/api/skeleton-text.md
index f26f3d1f6ac..86ec40d8a6f 100644
--- a/versioned_docs/version-v6/api/skeleton-text.md
+++ b/versioned_docs/version-v6/api/skeleton-text.md
@@ -2,12 +2,12 @@
 title: 'ion-skeleton-text'
 ---
 
-import Props from '@ionic-internal/component-api/v6/skeleton-text/props.md';
-import Events from '@ionic-internal/component-api/v6/skeleton-text/events.md';
-import Methods from '@ionic-internal/component-api/v6/skeleton-text/methods.md';
-import Parts from '@ionic-internal/component-api/v6/skeleton-text/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/skeleton-text/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/skeleton-text/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.md
index 58f5ec52068..6fb9aedacdf 100644
--- a/versioned_docs/version-v6/api/slide.md
+++ b/versioned_docs/version-v6/api/slide.md
@@ -1,20 +1,17 @@
 ---
-title: 'ion-slide'
+title: "ion-slide"
 ---
 
-import Props from '@ionic-internal/component-api/v6/slide/props.md';
-import Events from '@ionic-internal/component-api/v6/slide/events.md';
-import Methods from '@ionic-internal/component-api/v6/slide/methods.md';
-import Parts from '@ionic-internal/component-api/v6/slide/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/slide/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/slide/slots.md';
+import Props from '@site/static/auto-generated/slide/props.md';
+import Events from '@site/static/auto-generated/slide/events.md';
+import Methods from '@site/static/auto-generated/slide/methods.md';
+import Parts from '@site/static/auto-generated/slide/parts.md';
+import CustomProps from '@site/static/auto-generated/slide/custom-props.md';
+import Slots from '@site/static/auto-generated/slide/slots.md';
 
 <head>
   <title>ion-slide | Slide API Component for Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides."
-  />
+  <meta name="description" content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides." />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -23,32 +20,30 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 This component has been deprecated in favor of using Swiper.js directly. Please see the [Slides Documentation](./slides#migration) for a migration guide.
 :::
 
+
 The Slide component is a child component of [Slides](./slides). The template
 should be written as `ion-slide`. Any slide content should be written
 in this component and it should be used in conjunction with [Slides](./slides).
 
 See the [Slides API Docs](./slides) for more usage information.
 
-## Properties
 
+
+
+## Properties
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<Slots />
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/slides.md b/versioned_docs/version-v6/api/slides.md
index 0c8ee78edc8..6cef08674c6 100644
--- a/versioned_docs/version-v6/api/slides.md
+++ b/versioned_docs/version-v6/api/slides.md
@@ -1,39 +1,40 @@
 ---
-title: 'ion-slides'
+title: "ion-slides"
 hide_table_of_contents: true
-demoUrl: '/docs/demos/api/slides/index.html'
-demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html'
+demoUrl: "/docs/demos/api/slides/index.html"
+demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html"
 ---
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import TOCInline from '@theme/TOCInline';
 
-import Props from '@ionic-internal/component-api/v6/slides/props.md';
-import Events from '@ionic-internal/component-api/v6/slides/events.md';
-import Methods from '@ionic-internal/component-api/v6/slides/methods.md';
-import Parts from '@ionic-internal/component-api/v6/slides/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/slides/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/slides/slots.md';
+import Props from '@site/static/auto-generated/slides/props.md';
+import Events from '@site/static/auto-generated/slides/events.md';
+import Methods from '@site/static/auto-generated/slides/methods.md';
+import Parts from '@site/static/auto-generated/slides/parts.md';
+import CustomProps from '@site/static/auto-generated/slides/custom-props.md';
+import Slots from '@site/static/auto-generated/slides/slots.md';
 
 <head>
   <title>Ion-Slides: Mobile Touch Slider with Built-In & Custom Animation</title>
-  <meta
-    name="description"
-    content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android."
-  />
+  <meta name="description" content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android." />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
+
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline toc={toc} maxHeadingLevel={2} />
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
 
 :::note
 This component has been deprecated in favor of using Swiper.js directly. Please see the [migration guide](#migration) below.
 :::
 
+
 The Slides component is a multi-section container. Each section can be swiped
 or dragged between. It contains any number of [Slide](slide.md) components.
 
@@ -84,7 +85,7 @@ Since the underlying technology that powers your slides is the same, the migrati
 
 [Migration for Ionic Vue users](../vue/slides)
 
----
+------
 
 The following documentation applies to the `ion-slides` component.
 
@@ -92,6 +93,7 @@ The following documentation applies to the `ion-slides` component.
 
 By default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.
 
+
 ### Coverflow
 
 ```typescript
@@ -116,11 +118,13 @@ const slideOpts = {
     },
     setTranslate() {
       const swiper = this;
-      const { width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $ } = swiper;
+      const {
+        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $
+      } = swiper;
       const params = swiper.params.coverflowEffect;
       const isHorizontal = swiper.isHorizontal();
       const transform$$1 = swiper.translate;
-      const center = isHorizontal ? -transform$$1 + swiperWidth / 2 : -transform$$1 + swiperHeight / 2;
+      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
       const rotate = isHorizontal ? params.rotate : -params.rotate;
       const translate = params.depth;
       // Each slide offset from center
@@ -128,35 +132,31 @@ const slideOpts = {
         const $slideEl = slides.eq(i);
         const slideSize = slidesSizesGrid[i];
         const slideOffset = $slideEl[0].swiperSlideOffset;
-        const offsetMultiplier = ((center - slideOffset - slideSize / 2) / slideSize) * params.modifier;
+        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
 
-        let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
+         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
         let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
         // var rotateZ = 0
         let translateZ = -translate * Math.abs(offsetMultiplier);
 
-        let translateY = isHorizontal ? 0 : params.stretch * offsetMultiplier;
-        let translateX = isHorizontal ? params.stretch * offsetMultiplier : 0;
+         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
+        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
 
-        // Fix for ultra small values
+         // Fix for ultra small values
         if (Math.abs(translateX) < 0.001) translateX = 0;
         if (Math.abs(translateY) < 0.001) translateY = 0;
         if (Math.abs(translateZ) < 0.001) translateZ = 0;
         if (Math.abs(rotateY) < 0.001) rotateY = 0;
         if (Math.abs(rotateX) < 0.001) rotateX = 0;
 
-        const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
 
-        $slideEl.transform(slideTransform);
+         $slideEl.transform(slideTransform);
         $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
         if (params.slideShadows) {
           // Set shadows
-          let $shadowBeforeEl = isHorizontal
-            ? $slideEl.find('.swiper-slide-shadow-left')
-            : $slideEl.find('.swiper-slide-shadow-top');
-          let $shadowAfterEl = isHorizontal
-            ? $slideEl.find('.swiper-slide-shadow-right')
-            : $slideEl.find('.swiper-slide-shadow-bottom');
+          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
+          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
           if ($shadowBeforeEl.length === 0) {
             $shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
             $slideEl.append($shadowBeforeEl);
@@ -166,11 +166,11 @@ const slideOpts = {
             $slideEl.append($shadowAfterEl);
           }
           if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
-          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
+          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
         }
       }
 
-      // Set correct perspective for IE10
+       // Set correct perspective for IE10
       if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
         const ws = $wrapperEl[0].style;
         ws.perspectiveOrigin = `${center}px 50%`;
@@ -180,13 +180,11 @@ const slideOpts = {
       const swiper = this;
       swiper.slides
         .transition(duration)
-        .find(
-          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
-        )
+        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
         .transition(duration);
-    },
-  },
-};
+    }
+  }
+}
 ```
 
 ### Cube
@@ -201,7 +199,7 @@ const slideOpts = {
     shadowScale: 0.94,
   },
   on: {
-    beforeInit: function () {
+    beforeInit: function() {
       const swiper = this;
       swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
       swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
@@ -220,16 +218,10 @@ const slideOpts = {
       this.params = Object.assign(this.params, overwriteParams);
       this.originalParams = Object.assign(this.originalParams, overwriteParams);
     },
-    setTranslate: function () {
+    setTranslate: function() {
       const swiper = this;
       const {
-        $el,
-        $wrapperEl,
-        slides,
-        width: swiperWidth,
-        height: swiperHeight,
-        rtlTranslate: rtl,
-        size: swiperSize,
+        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,
       } = swiper;
       const params = swiper.params.cubeEffect;
       const isHorizontal = swiper.isHorizontal();
@@ -276,37 +268,31 @@ const slideOpts = {
           tx = 0;
           tz = -round * 4 * swiperSize;
         } else if ((slideIndex - 2) % 4 === 0) {
-          tx = swiperSize + round * 4 * swiperSize;
+          tx = swiperSize + (round * 4 * swiperSize);
           tz = swiperSize;
         } else if ((slideIndex - 3) % 4 === 0) {
           tx = -swiperSize;
-          tz = 3 * swiperSize + swiperSize * 4 * round;
+          tz = (3 * swiperSize) + (swiperSize * 4 * round);
         }
         if (rtl) {
           tx = -tx;
         }
 
-        if (!isHorizontal) {
+         if (!isHorizontal) {
           ty = tx;
           tx = 0;
         }
 
-        const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${
-          isHorizontal ? slideAngle : 0
-        }deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
+         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
         if (progress <= 1 && progress > -1) {
-          wrapperRotate = slideIndex * 90 + progress * 90;
-          if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
+          wrapperRotate = (slideIndex * 90) + (progress * 90);
+          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);
         }
         $slideEl.transform(transform$$1);
         if (params.slideShadows) {
           // Set shadows
-          let shadowBefore = isHorizontal
-            ? $slideEl.find('.swiper-slide-shadow-left')
-            : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = isHorizontal
-            ? $slideEl.find('.swiper-slide-shadow-right')
-            : $slideEl.find('.swiper-slide-shadow-bottom');
+          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
           if (shadowBefore.length === 0) {
             shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
             $slideEl.append(shadowBefore);
@@ -326,50 +312,39 @@ const slideOpts = {
         'transform-origin': `50% 50% -${swiperSize / 2}px`,
       });
 
-      if (params.shadow) {
+       if (params.shadow) {
         if (isHorizontal) {
-          $cubeShadowEl.transform(
-            `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${
-              -swiperWidth / 2
-            }px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`
-          );
+          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
         } else {
-          const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
-          const multiplier =
-            1.5 - (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2 + Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2);
+          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);
+          const multiplier = 1.5 - (
+            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)
+            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)
+          );
           const scale1 = params.shadowScale;
           const scale2 = params.shadowScale / multiplier;
           const offset$$1 = params.shadowOffset;
-          $cubeShadowEl.transform(
-            `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset$$1}px, ${
-              -swiperHeight / 2 / scale2
-            }px) rotateX(-90deg)`
-          );
+          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);
         }
       }
 
-      const zFactor = swiper.browser.isSafari || swiper.browser.isUiWebView ? -swiperSize / 2 : 0;
-      $wrapperEl.transform(
-        `translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${
-          swiper.isHorizontal() ? -wrapperRotate : 0
-        }deg)`
-      );
+      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;
+      $wrapperEl
+        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);
     },
-    setTransition: function (duration) {
+    setTransition: function(duration) {
       const swiper = this;
       const { $el, slides } = swiper;
       slides
         .transition(duration)
-        .find(
-          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
-        )
+        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
         .transition(duration);
       if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
         $el.find('.swiper-cube-shadow').transition(duration);
       }
     },
-  },
-};
+  }
+}
 ```
 
 ### Fade
@@ -432,8 +407,8 @@ const slideOpts = {
         });
       }
     },
-  },
-};
+  }
+}
 ```
 
 ### Flip
@@ -480,32 +455,25 @@ const slideOpts = {
           rotateY = -rotateY;
         }
 
-        $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
+         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
 
-        if (swiper.params.flipEffect.slideShadows) {
+         if (swiper.params.flipEffect.slideShadows) {
           // Set shadows
-          let shadowBefore = swiper.isHorizontal()
-            ? $slideEl.find('.swiper-slide-shadow-left')
-            : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = swiper.isHorizontal()
-            ? $slideEl.find('.swiper-slide-shadow-right')
-            : $slideEl.find('.swiper-slide-shadow-bottom');
+          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
           if (shadowBefore.length === 0) {
-            shadowBefore = swiper.$(
-              `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`
-            );
+            shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`);
             $slideEl.append(shadowBefore);
           }
           if (shadowAfter.length === 0) {
-            shadowAfter = swiper.$(
-              `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`
-            );
+            shadowAfter = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`);
             $slideEl.append(shadowAfter);
           }
           if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
           if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
         }
-        $slideEl.transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
+        $slideEl
+          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
       }
     },
     setTransition(duration) {
@@ -513,9 +481,7 @@ const slideOpts = {
       const { slides, activeIndex, $wrapperEl } = swiper;
       slides
         .transition(duration)
-        .find(
-          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
-        )
+        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
         .transition(duration);
       if (swiper.params.virtualTranslate && duration !== 0) {
         let eventTriggered = false;
@@ -532,11 +498,13 @@ const slideOpts = {
           }
         });
       }
-    },
-  },
+    }
+  }
 };
 ```
 
+
+
 ## 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' }]}>
@@ -562,14 +530,14 @@ import { Component } from '@angular/core';
         </ion-slide>
       </ion-slides>
     </ion-content>
-  `,
+  `
 })
 export class SlideExample {
   // Optional parameters to pass to the swiper instance.
   // See https://swiperjs.com/swiper-api for valid options.
   slideOpts = {
     initialSlide: 1,
-    speed: 400,
+    speed: 400
   };
   constructor() {}
 }
@@ -582,8 +550,10 @@ ion-slides {
 }
 ```
 
+
 </TabItem>
 
+
 <TabItem value="javascript">
 
 ```html
@@ -611,8 +581,8 @@ var slides = document.querySelector('ion-slides');
 // See https://swiperjs.com/swiper-api for valid options.
 slides.options = {
   initialSlide: 1,
-  speed: 400,
-};
+  speed: 400
+}
 ```
 
 ```css
@@ -622,8 +592,10 @@ ion-slides {
 }
 ```
 
+
 </TabItem>
 
+
 <TabItem value="react">
 
 ```tsx
@@ -634,7 +606,7 @@ import { IonSlides, IonSlide, IonContent } from '@ionic/react';
 // See https://swiperjs.com/swiper-api for valid options.
 const slideOpts = {
   initialSlide: 1,
-  speed: 400,
+  speed: 400
 };
 
 export const SlidesExample: React.FC = () => (
@@ -663,6 +635,7 @@ ion-slides {
 
 </TabItem>
 
+
 <TabItem value="stencil">
 
 ```tsx
@@ -670,14 +643,14 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'slides-example',
-  styleUrl: 'slides-example.css',
+  styleUrl: 'slides-example.css'
 })
 export class SlidesExample {
   // Optional parameters to pass to the swiper instance.
   // See https://swiperjs.com/swiper-api for valid options.
   private slideOpts = {
     initialSlide: 1,
-    speed: 400,
+    speed: 400
   };
 
   render() {
@@ -696,7 +669,7 @@ export class SlidesExample {
             <h1>Slide 3</h1>
           </ion-slide>
         </ion-slides>
-      </ion-content>,
+      </ion-content>
     ];
   }
 }
@@ -711,6 +684,7 @@ ion-slides {
 
 </TabItem>
 
+
 <TabItem value="vue">
 
 ```html
@@ -728,48 +702,44 @@ ion-slides {
   </ion-slides>
 </template>
 
+
 <script>
-  import { IonSlides, IonSlide } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSlides, IonSlide },
-    setup() {
-      // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
-      const slideOpts = {
-        initialSlide: 1,
-        speed: 400,
-      };
-      return { slideOpts };
-    },
-  });
+import { IonSlides, IonSlide } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonSlides, IonSlide },
+  setup() {
+    // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
+    const slideOpts = {
+      initialSlide: 1,
+      speed: 400
+    };
+    return { slideOpts }
+  }
+});
 </script>
 ```
 
+
 </TabItem>
 
 </Tabs>
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<Slots />
+<Slots />
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/spinner.md b/versioned_docs/version-v6/api/spinner.md
index e6bf760869c..abe69520719 100644
--- a/versioned_docs/version-v6/api/spinner.md
+++ b/versioned_docs/version-v6/api/spinner.md
@@ -2,12 +2,12 @@
 title: 'ion-spinner'
 ---
 
-import Props from '@ionic-internal/component-api/v6/spinner/props.md';
-import Events from '@ionic-internal/component-api/v6/spinner/events.md';
-import Methods from '@ionic-internal/component-api/v6/spinner/methods.md';
-import Parts from '@ionic-internal/component-api/v6/spinner/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/spinner/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/spinner/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/split-pane.md b/versioned_docs/version-v6/api/split-pane.md
index 87b29ff3b2f..fa5f03fc403 100644
--- a/versioned_docs/version-v6/api/split-pane.md
+++ b/versioned_docs/version-v6/api/split-pane.md
@@ -2,12 +2,12 @@
 title: 'ion-split-pane'
 ---
 
-import Props from '@ionic-internal/component-api/v6/split-pane/props.md';
-import Events from '@ionic-internal/component-api/v6/split-pane/events.md';
-import Methods from '@ionic-internal/component-api/v6/split-pane/methods.md';
-import Parts from '@ionic-internal/component-api/v6/split-pane/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/split-pane/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/split-pane/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.md
index cbf15815ba7..5cd9d97fe3d 100644
--- a/versioned_docs/version-v6/api/tab-bar.md
+++ b/versioned_docs/version-v6/api/tab-bar.md
@@ -1,31 +1,31 @@
 ---
-title: 'ion-tab-bar'
+title: "ion-tab-bar"
 ---
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v6/tab-bar/props.md';
-import Events from '@ionic-internal/component-api/v6/tab-bar/events.md';
-import Methods from '@ionic-internal/component-api/v6/tab-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tab-bar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/tab-bar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/tab-bar/slots.md';
+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."
-  />
+  <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" />
 
+
 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' }]}>
@@ -51,6 +51,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
 
 </TabItem>
 
+
 <TabItem value="javascript">
 
 ```html
@@ -77,6 +78,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
 
 </TabItem>
 
+
 <TabItem value="react">
 
 ```tsx
@@ -104,8 +106,10 @@ export const TabBarExample: React.FC = () => (
 );
 ```
 
+
 </TabItem>
 
+
 <TabItem value="stencil">
 
 ```tsx
@@ -113,7 +117,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-bar-example',
-  styleUrl: 'tab-bar-example.css',
+  styleUrl: 'tab-bar-example.css'
 })
 export class TabBarExample {
   render() {
@@ -136,14 +140,16 @@ export class TabBarExample {
             <ion-icon name="settings"></ion-icon>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>,
+      </ion-tabs>
     ];
   }
 }
 ```
 
+
 </TabItem>
 
+
 <TabItem value="vue">
 
 ```html
@@ -165,16 +171,16 @@ export class TabBarExample {
 </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 };
-    },
-  });
+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>
 ```
 
@@ -183,25 +189,19 @@ export class TabBarExample {
 </Tabs>
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index a989563be88..1ac51b3c34e 100644
--- a/versioned_docs/version-v6/api/tab-button.md
+++ b/versioned_docs/version-v6/api/tab-button.md
@@ -1,25 +1,30 @@
 ---
-title: 'ion-tab-button'
+title: "ion-tab-button"
 ---
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v6/tab-button/props.md';
-import Events from '@ionic-internal/component-api/v6/tab-button/events.md';
-import Methods from '@ionic-internal/component-api/v6/tab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tab-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/tab-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/tab-button/slots.md';
+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" />
 
+
 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' }]}>
@@ -53,8 +58,10 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
 </ion-tabs>
 ```
 
+
 </TabItem>
 
+
 <TabItem value="javascript">
 
 ```html
@@ -101,8 +108,10 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
 </ion-tabs>
 ```
 
+
 </TabItem>
 
+
 <TabItem value="react">
 
 ```tsx
@@ -140,8 +149,10 @@ export const TabButtonExample: React.FC = () => (
 );
 ```
 
+
 </TabItem>
 
+
 <TabItem value="stencil">
 
 ```tsx
@@ -149,7 +160,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-button-example',
-  styleUrl: 'tab-button-example.css',
+  styleUrl: 'tab-button-example.css'
 })
 export class TabButtonExample {
   render() {
@@ -194,14 +205,16 @@ export class TabButtonExample {
             <ion-label>About</ion-label>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>,
+      </ion-tabs>
     ];
   }
 }
 ```
 
+
 </TabItem>
 
+
 <TabItem value="vue">
 
 ```html
@@ -233,49 +246,50 @@ export class TabButtonExample {
 </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 };
-    },
-  });
+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 />
+<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
index deafa889116..899e3c6c484 100644
--- a/versioned_docs/version-v6/api/tab.md
+++ b/versioned_docs/version-v6/api/tab.md
@@ -1,54 +1,49 @@
 ---
-title: 'ion-tab'
+title: "ion-tab"
 ---
 
-import Props from '@ionic-internal/component-api/v6/tab/props.md';
-import Events from '@ionic-internal/component-api/v6/tab/events.md';
-import Methods from '@ionic-internal/component-api/v6/tab/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tab/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/tab/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/tab/slots.md';
+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."
-  />
+  <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" />
 
+
 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.
+ 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
 
+
+## Properties
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<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
index 8c200d9a226..c97ef582190 100644
--- a/versioned_docs/version-v6/api/tabs.md
+++ b/versioned_docs/version-v6/api/tabs.md
@@ -2,12 +2,12 @@
 title: 'ion-tabs'
 ---
 
-import Props from '@ionic-internal/component-api/v6/tabs/props.md';
-import Events from '@ionic-internal/component-api/v6/tabs/events.md';
-import Methods from '@ionic-internal/component-api/v6/tabs/methods.md';
-import Parts from '@ionic-internal/component-api/v6/tabs/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/tabs/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/tabs/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/text.md b/versioned_docs/version-v6/api/text.md
index ac2d82988e3..c6fcee4c2db 100644
--- a/versioned_docs/version-v6/api/text.md
+++ b/versioned_docs/version-v6/api/text.md
@@ -2,12 +2,12 @@
 title: 'ion-text'
 ---
 
-import Props from '@ionic-internal/component-api/v6/text/props.md';
-import Events from '@ionic-internal/component-api/v6/text/events.md';
-import Methods from '@ionic-internal/component-api/v6/text/methods.md';
-import Parts from '@ionic-internal/component-api/v6/text/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/text/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/text/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/textarea.md b/versioned_docs/version-v6/api/textarea.md
index 169ba5f1372..5b6def11096 100644
--- a/versioned_docs/version-v6/api/textarea.md
+++ b/versioned_docs/version-v6/api/textarea.md
@@ -2,12 +2,12 @@
 title: 'ion-textarea'
 ---
 
-import Props from '@ionic-internal/component-api/v6/textarea/props.md';
-import Events from '@ionic-internal/component-api/v6/textarea/events.md';
-import Methods from '@ionic-internal/component-api/v6/textarea/methods.md';
-import Parts from '@ionic-internal/component-api/v6/textarea/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/textarea/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/textarea/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/thumbnail.md b/versioned_docs/version-v6/api/thumbnail.md
index 759c793a7cf..f21d2f25b59 100644
--- a/versioned_docs/version-v6/api/thumbnail.md
+++ b/versioned_docs/version-v6/api/thumbnail.md
@@ -2,12 +2,12 @@
 title: 'ion-thumbnail'
 ---
 
-import Props from '@ionic-internal/component-api/v6/thumbnail/props.md';
-import Events from '@ionic-internal/component-api/v6/thumbnail/events.md';
-import Methods from '@ionic-internal/component-api/v6/thumbnail/methods.md';
-import Parts from '@ionic-internal/component-api/v6/thumbnail/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/thumbnail/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/thumbnail/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/title.md b/versioned_docs/version-v6/api/title.md
index 69d24cfb592..07a1a36eb03 100644
--- a/versioned_docs/version-v6/api/title.md
+++ b/versioned_docs/version-v6/api/title.md
@@ -2,12 +2,12 @@
 title: 'ion-title'
 ---
 
-import Props from '@ionic-internal/component-api/v6/title/props.md';
-import Events from '@ionic-internal/component-api/v6/title/events.md';
-import Methods from '@ionic-internal/component-api/v6/title/methods.md';
-import Parts from '@ionic-internal/component-api/v6/title/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/title/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/title/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
index 463a73f6e99..b0915d8cf8c 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -5,12 +5,12 @@ title: 'ion-toast'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v6/toast/props.md';
-import Events from '@ionic-internal/component-api/v6/toast/events.md';
-import Methods from '@ionic-internal/component-api/v6/toast/methods.md';
-import Parts from '@ionic-internal/component-api/v6/toast/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/toast/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/toast/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/toggle.md b/versioned_docs/version-v6/api/toggle.md
index 513dbae47d4..bb22c827d6f 100644
--- a/versioned_docs/version-v6/api/toggle.md
+++ b/versioned_docs/version-v6/api/toggle.md
@@ -2,12 +2,12 @@
 title: 'ion-toggle'
 ---
 
-import Props from '@ionic-internal/component-api/v6/toggle/props.md';
-import Events from '@ionic-internal/component-api/v6/toggle/events.md';
-import Methods from '@ionic-internal/component-api/v6/toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v6/toggle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/toggle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/toggle/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/toolbar.md b/versioned_docs/version-v6/api/toolbar.md
index 96464f3e46c..dbd61f85818 100644
--- a/versioned_docs/version-v6/api/toolbar.md
+++ b/versioned_docs/version-v6/api/toolbar.md
@@ -2,12 +2,12 @@
 title: 'ion-toolbar'
 ---
 
-import Props from '@ionic-internal/component-api/v6/toolbar/props.md';
-import Events from '@ionic-internal/component-api/v6/toolbar/events.md';
-import Methods from '@ionic-internal/component-api/v6/toolbar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/toolbar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/toolbar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/toolbar/slots.md';
+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>
diff --git a/versioned_docs/version-v6/api/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.md
index 54d1a78f01b..84f85ac329f 100644
--- a/versioned_docs/version-v6/api/virtual-scroll.md
+++ b/versioned_docs/version-v6/api/virtual-scroll.md
@@ -1,28 +1,27 @@
 ---
-title: 'ion-virtual-scroll'
+title: "ion-virtual-scroll"
 ---
 
-import Props from '@ionic-internal/component-api/v6/virtual-scroll/props.md';
-import Events from '@ionic-internal/component-api/v6/virtual-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v6/virtual-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v6/virtual-scroll/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/virtual-scroll/custom-props.md';
-import Slots from '@ionic-internal/component-api/v6/virtual-scroll/slots.md';
+import Props from '@site/static/auto-generated/virtual-scroll/props.md';
+import Events from '@site/static/auto-generated/virtual-scroll/events.md';
+import Methods from '@site/static/auto-generated/virtual-scroll/methods.md';
+import Parts from '@site/static/auto-generated/virtual-scroll/parts.md';
+import CustomProps from '@site/static/auto-generated/virtual-scroll/custom-props.md';
+import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
 
 <head>
   <title>ion-virtual-scroll | Angular Virtual Scroll List for Ionic Apps</title>
-  <meta
-    name="description"
-    content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates."
-  />
+  <meta name="description" content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates." />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
+
 :::note
 This component has been deprecated in favor of using virtual scrolling libraries provided by each JavaScript Framework. See below for alternatives.
 :::
 
+
 Virtual Scroll displays a virtual, "infinite" list. An array of records
 is passed to the virtual scroll containing the data to create templates
 for. The template created for each record, referred to as a cell, can
@@ -44,7 +43,7 @@ For virtual scrolling options in Ionic React, please see [React Virtual Scroll G
 
 For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.md).
 
----
+------
 
 The following documentation applies to the `ion-virtual-scroll` component.
 
@@ -86,6 +85,7 @@ renders whenever it wants which could be while the user is scrolling. However,
 `<ion-img>` is governed by the containing `ion-content` and does not render
 images while scrolling quickly.
 
+
 ## Virtual Scroll Performance Tips
 
 ### iOS Cordova WKWebView
@@ -131,12 +131,13 @@ different identities, and Ionic will tear down the entire DOM and rebuild
 it. This is an expensive operation and should be avoided if possible.
 
 ### Efficient headers and footer functions
-
 Each virtual item must stay extremely efficient, but one way to really
 kill its performance is to perform any DOM operations within section header
 and footer functions. These functions are called for every record in the
 dataset, so please make sure they're performant.
 
+
+
 ## Usage
 
 ```html
@@ -146,10 +147,10 @@ dataset, so please make sure they're performant.
       <div>
         <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
       </div>
-      <ion-card-header>
-        <ion-card-title>{{ item.name }}</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>{{ item.content }}</ion-card-content>
+    <ion-card-header>
+      <ion-card-title>{{ item.name }}</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>{{ item.content }}</ion-card-content>
     </ion-card>
   </ion-virtual-scroll>
 </ion-content>
@@ -166,7 +167,7 @@ export class VirtualScrollPageComponent {
         imgSrc: getImgSrc(),
         avatarSrc: getImgSrc(),
         imgHeight: Math.floor(Math.random() * 50 + 150),
-        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100),
+        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
       });
 
       rotateImg++;
@@ -177,8 +178,7 @@ export class VirtualScrollPageComponent {
   }
 }
 
-const lorem =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
 const images = [
   'bandit',
@@ -190,7 +190,7 @@ const images = [
   'general-lee',
   'ghostbusters',
   'knight-rider',
-  'mirth-mobile',
+  'mirth-mobile'
 ];
 
 function getImgSrc() {
@@ -212,7 +212,9 @@ The data given to the `items` property must be an array. An item template with t
 
 ```html
 <ion-virtual-scroll [items]="items">
-  <ion-item *virtualItem="let item"> {{ item }} </ion-item>
+  <ion-item *virtualItem="let item">
+    {{ item }}
+  </ion-item>
 </ion-virtual-scroll>
 ```
 
@@ -228,8 +230,12 @@ return `null` if a template shouldn't be created.
 
 ```html
 <ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn">
-  <ion-item-divider *virtualHeader="let header"> {{ header }} </ion-item-divider>
-  <ion-item *virtualItem="let item"> Item: {{ item }} </ion-item>
+  <ion-item-divider *virtualHeader="let header">
+    {{ header }}
+  </ion-item-divider>
+  <ion-item *virtualItem="let item">
+    Item: {{ item }}
+  </ion-item>
 </ion-virtual-scroll>
 ```
 
@@ -250,6 +256,7 @@ myHeaderFn(record, recordIndex, records) {
 }
 ```
 
+
 ### Custom Components
 
 If a custom component is going to be used within Virtual Scroll, it's best
@@ -260,31 +267,27 @@ within a `<div>` is a safe way to make sure dimensions are measured correctly.
 ```html
 <ion-virtual-scroll [items]="items">
   <div *virtualItem="let item">
-    <my-custom-item [item]="item"> {{ item }} </my-custom-item>
+    <my-custom-item [item]="item">
+      {{ item }}
+    </my-custom-item>
   </div>
 </ion-virtual-scroll>
 ```
 
 ## Properties
-
 <Props />
 
 ## Events
-
 <Events />
 
 ## Methods
-
 <Methods />
 
 ## CSS Shadow Parts
-
 <Parts />
 
 ## CSS Custom Properties
-
 <CustomProps />
 
 ## Slots
-
-<Slots />
+<Slots />
\ No newline at end of file

From faad29833ce5828558275fd8fce032e42a4f06f7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 15 Mar 2023 14:04:44 -0400
Subject: [PATCH 245/469] docs(input, textarea): update migration guide for
 proper metadata usage (#2827)

---
 static/usage/v7/input/migration/index.md    | 96 +++++++++++++--------
 static/usage/v7/textarea/migration/index.md | 96 +++++++++++++--------
 2 files changed, 120 insertions(+), 72 deletions(-)

diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md
index 6423ae78f24..e28bf81ce00 100644
--- a/static/usage/v7/input/migration/index.md
+++ b/static/usage/v7/input/migration/index.md
@@ -53,15 +53,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-input
-    label="Email:"
-    counter="true"
-    maxlength="100"
-    helper-text="Enter an email"
-    error-text="Please enter a valid email"
-  ></ion-input>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-input
+  label="Email:"
+  counter="true"
+  maxlength="100"
+  helper-text="Enter an email"
+  error-text="Please enter a valid email"
+></ion-input>
 ```
 </TabItem>
 <TabItem value="angular">
@@ -105,15 +111,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-input
-    label="Email:"
-    [counter]="true"
-    maxlength="100"
-    helperText="Enter an email"
-    errorText="Please enter a valid email"
-  ></ion-input>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-input
+  label="Email:"
+  [counter]="true"
+  maxlength="100"
+  helperText="Enter an email"
+  errorText="Please enter a valid email"
+></ion-input>
 ```
 </TabItem>
 <TabItem value="react">
@@ -157,15 +169,21 @@ import TabItem from '@theme/TabItem';
 </IonItem>
 
 {/* After */}
-<IonItem>
-  <IonInput
-    label="Email:"
-    counter={true}
-    maxlength="100"
-    helperText="Enter an email"
-    errorText="Please enter a valid email"
-  ></IonInput>
-</IonItem>
+
+{/*
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an IonNote
+  underneath the IonList.
+*/}
+
+<IonInput
+  label="Email:"
+  counter={true}
+  maxlength="100"
+  helperText="Enter an email"
+  errorText="Please enter a valid email"
+></IonInput>
 ```
 </TabItem>
 <TabItem value="vue">
@@ -209,15 +227,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-input
-    label="Email:"
-    :counter="true"
-    maxlength="100"
-    helper-text="Enter an email"
-    error-text="Please enter a valid email"
-  ></ion-input>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-input
+  label="Email:"
+  :counter="true"
+  maxlength="100"
+  helper-text="Enter an email"
+  error-text="Please enter a valid email"
+></ion-input>
 ```
 </TabItem>
 </Tabs>
diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md
index 28207956484..6413224a286 100644
--- a/static/usage/v7/textarea/migration/index.md
+++ b/static/usage/v7/textarea/migration/index.md
@@ -53,15 +53,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-textarea
-    label="Label:"
-    counter="true"
-    maxlength="100"
-    helper-text="Enter text"
-    error-text="Please enter text"
-  ></ion-textarea>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-textarea
+  label="Label:"
+  counter="true"
+  maxlength="100"
+  helper-text="Enter text"
+  error-text="Please enter text"
+></ion-textarea>
 ```
 </TabItem>
 <TabItem value="angular">
@@ -105,15 +111,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-textarea
-    label="Label:"
-    [counter]="true"
-    maxlength="100"
-    helperText="Enter text"
-    errorText="Please enter text"
-  ></ion-textarea>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-textarea
+  label="Label:"
+  [counter]="true"
+  maxlength="100"
+  helperText="Enter text"
+  errorText="Please enter text"
+></ion-textarea>
 ```
 </TabItem>
 <TabItem value="react">
@@ -157,15 +169,21 @@ import TabItem from '@theme/TabItem';
 </IonItem>
 
 {/* After */}
-<IonItem>
-  <IonTextarea
-    label="Label:"
-    counter={true}
-    maxlength="100"
-    helperText="Enter text"
-    errorText="Please enter text"
-  ></IonTextarea>
-</IonItem>
+
+{/* 
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an IonNote
+  underneath the IonList.
+*/}
+
+<IonTextarea
+  label="Label:"
+  counter={true}
+  maxlength="100"
+  helperText="Enter text"
+  errorText="Please enter text"
+></IonTextarea>
 ```
 </TabItem>
 <TabItem value="vue">
@@ -209,15 +227,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-textarea
-    label="Label:"
-    :counter="true"
-    maxlength="100"
-    helper-text="Enter text"
-    error-text="Please enter text"
-  ></ion-textarea>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-textarea
+  label="Label:"
+  :counter="true"
+  maxlength="100"
+  helper-text="Enter text"
+  error-text="Please enter text"
+></ion-textarea>
 ```
 </TabItem>
 </Tabs>

From ef3836ef629e80423a6e56f71edb915c880ce54e Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 17 Mar 2023 10:15:57 -0500
Subject: [PATCH 246/469] docs(slides): update migration guides to use Swiper 9
 (#2833)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/angular/slides.md                      | 400 +++++++------------
 docs/react/slides.md                        |  39 +-
 docs/vue/slides.md                          |  17 +-
 versioned_docs/version-v6/angular/slides.md | 402 +++++++-------------
 versioned_docs/version-v6/react/slides.md   |  40 +-
 versioned_docs/version-v6/vue/slides.md     |  16 +-
 6 files changed, 338 insertions(+), 576 deletions(-)

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index 746be513f1c..eb2586540a8 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating from ion-slides to Swiper.js
 ---
 
 <head>
@@ -11,16 +11,10 @@ title: Slides
 </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.
-
 :::
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
-
-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.
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. Swiper 9 introduced <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element.
 
 ## Getting Started
 
@@ -33,180 +27,143 @@ npm install @ionic/angular@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
-Once that is done, we need to import the `SwiperModule` module. This should be done in your component's module file:
+Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper.
 
 ```typescript
-// home.module.ts
-import { SwiperModule } from 'swiper/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 @NgModule({
-  imports: [..., SwiperModule]
+  schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
 });
 ...
 ```
 
-## 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:
+Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`.
 
 ```typescript
-// home.page.ts
-import { Component, ViewEncapsulation } from '@angular/core';
+import { register } from 'swiper/element/bundle';
+
+register();
 
 @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';
+From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own.
+
+```html
+<swiper-container>
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
-:::note
-Importing `@ionic/angular/css/ionic-swiper'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
-:::
+## Bundled vs. Core Versions
 
-### Updating Selectors
+By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features.
 
-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:
+If you would like to use the Core version instead, which does not include additional modules automatically, see <a href="https://swiperjs.com/element#core-version-and-modules" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#core-version-and-modules</a>. The rest of this migration guide will assume you are using the bundled version.
 
-| ion-slides Selector | Swiper Selector |
-| ------------------- | --------------- |
-| `ion-slides`        | `.swiper`       |
-| `ion-slide`         | `.swiper-slide` |
+## Swiping with Style
 
-### Vanilla CSS (Optional)
+To migrate over your CSS, first update your selectors to target the new custom elements instead:
 
-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.
+| ion-slides Selector | Swiper Selector    |
+| ------------------- | ------------------ | 
+| `ion-slides`        | `swiper-container` |
+| `ion-slide`         | `swiper-slide`     |
 
-```javascript
-// slides.component.css
-@import 'swiper/css';
-@import '@ionic/angular/css/ionic-swiper';
-```
+If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper.
 
-## Using Components
+| `ion-slides` CSS property          | `swiper-container` CSS property             |
+| ---------------------------------- | ------------------------------------------- |
+| `--bullet-background`              | `--swiper-pagination-bullet-inactive-color` |
+| `--bullet-background-active`       | `--swiper-pagination-color`                 |
+| `--progress-bar-background`        | `--swiper-pagination-progressbar-bg-color`  |
+| `--progress-bar-background-active` | `--swiper-pagination-color`                 |
+| `--scroll-bar-background`          | `--swiper-scrollbar-bg-color`               |
+| `--scroll-bar-background-active`   | `--swiper-scrollbar-drag-bg-color`          |
 
-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:
+For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See see <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
 
-```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>
-```
+### Additional `ion-slides` Styles
 
-## Using Modules
+The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`:
 
-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.
+```css
+swiper-container {
+  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+  --swiper-pagination-color: var(--ion-color-primary, #3880ff);
+  --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
+  --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+  --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+}
 
-`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.
+swiper-slide {
+  display: flex;
+  position: relative;
 
-To begin, we need to import the modules and provide them to Swiper:
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
 
-```typescript
-// home.page.ts
-import { Component } from '@angular/core';
-import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  width: 100%;
+  height: 100%;
 
-SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom]);
+  font-size: 18px;
 
-@Component({
-  selector: 'app-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss']
-})
-export class HomePage {
-  ...
+  text-align: center;
+  box-sizing: border-box;
 }
-```
-
-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>
+swiper-slide img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
 ```
 
-:::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. However, using this module is **not** required to use Swiper.js in Ionic.
 
-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`:
+We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array:
 
-```javascript
+```typescript
 // 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]);
+import { IonicSlides } from '@ionic/angular';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss']
+  ...
 })
 export class HomePage {
-  ...
+  swiperModules = [IonicSlides];
 }
 ```
 
+```html
+<!-- home.page.html -->
+
+<swiper-container [modules]="swiperModules">
+  ...
+</swiper-container>
+```
+
 :::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.
+If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is 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.
+Swiper options should be provided as individual properties directly on the `<swiper-container>` component.
 
 Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
 
@@ -218,42 +175,31 @@ Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` opti
 </ion-slides>
 ```
 
-To set these options as properties directly on `<swiper>` we would do the following:
+To set these options as properties directly on `<swiper-container>` 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>
+<swiper-container [slidesPerView]="3" [loop]="true">
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
-To set these options using the `config` object, we would do:
+Below is a full list of property changes when going from `ion-slides` to Swiper Element:
 
-```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.                 |
+| Name      | Notes                                                                                                                                   |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager     | Use the `pagination` property instead.                                                                                                  |
 
 :::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>.
+All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
 :::
 
 ## Events
 
-Since the `Swiper` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them.
+Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase.
 
 Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 
@@ -265,170 +211,110 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 </ion-slides>
 ```
 
-To migrate, we would change the name of the event to `slideChange`:
+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>
+<swiper-container (slidechange)="onSlideChange()">
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
 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                   |
+| 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              |
+| 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>.
+All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#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)`:
+Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `<swiper-container>` element (such as through `ViewChild`), then access its `swiper` prop:
 
 ```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>
+<swiper-container #swiper>
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
-```javascript
+```typescript
 // slides.component.ts
-import { Component } from '@angular/core';
+
+import { ..., ElementRef, ViewChild } from '@angular/core';
 
 @Component({
-  selector: 'app-slides-example',
-  templateUrl: 'slides.component.html',
-  styleUrls: ['slides.component.scss']
+  ...
 })
 export class SlidesExample {
-  private slides: any;
+  @ViewChild('swiper')
+  swiperRef: ElementRef | undefined;
 
-  constructor() {}
-  setSwiperInstance(swiper: any) {
-    this.slides = swiper;
+  logActiveIndex() {
+    console.log(this.swiperRef?.nativeElement.swiper.activeIndex);
   }
 }
 ```
 
-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:
+Below is a full list of method changes when going from `ion-slides` to Swiper Element:
 
 | 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.          |
+| getSwiper()        | Get a reference to the Swiper instance using the `swiper` prop. 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)                     |
+| length()           | Use the `slides` property instead. (i.e swiper.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:
+:::note
+All methods and properties available on the Swiper instance can be found at <a href="https://swiperjs.com/swiper-api#methods-and-properties" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#methods-and-properties</a>.
+:::
 
-```scss
-// global.scss
-@import '~swiper/scss/effect-fade';
-```
+## Effects
 
-After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
+Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
 
 ```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() {}
-}
+<swiper-container effect="flip">
+  ...
+</swiper-container>
 ```
 
 :::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>.
+For more information on effects in Swiper, please see <a href="https://swiperjs.com/swiper-api#fade-effect" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#fade-effect</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>.
+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/element" target="_blank" rel="noopener noreferrer">Swiper Element documentation</a> and then referencing <a href="https://swiperjs.com/swiper-api" target="_blank" rel="noopener noreferrer">the Swiper API docs</a>.
 
 ## FAQ
 
diff --git a/docs/react/slides.md b/docs/react/slides.md
index 158e9933fe7..104226d47db 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating From IonSlides to Swiper.js
 ---
 
 <head>
@@ -16,12 +16,13 @@ title: Slides
 
 :::
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
+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.
 
+:::note
+Swiper's React component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
 
-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.
+Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
+:::
 
 ## Getting Started
 
@@ -34,7 +35,7 @@ npm install @ionic/react@latest @ionic/react-router@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
 :::note
@@ -43,7 +44,7 @@ Create React App does not support pure ESM packages yet. Developers can still us
 
 ## 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`.
+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 `IonSlides`.
 
 We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
 
@@ -64,13 +65,11 @@ export default Home;
 ```
 
 :::note
-Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
 :::note
-
 Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
-
 :::
 
 ### Updating Selectors
@@ -153,16 +152,14 @@ 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.
+`IonSlides` 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:
 
@@ -197,9 +194,7 @@ 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:
@@ -279,7 +274,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
 
 ## 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. However, using this module is **not** required to use Swiper.js in Ionic.
+With `IonSlides`, 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
 
@@ -428,7 +423,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper
 | 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>.
+All events available in Swiper can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
 :::
 
 ## Methods
@@ -460,7 +455,7 @@ From here, if you wanted to access a property on the Swiper instance you would a
 
 Below is a full list of method changes when going from `IonSlides` to Swiper React:
 
-| ion-slides Method  | Notes                                                                                |
+| IonSlides Method   | Notes                                                                                |
 | ------------------ | ------------------------------------------------------------------------------------ |
 | getActiveIndex()   | Use the `activeIndex` property instead.                                              |
 | getPreviousIndex() | Use the `previousIndex` property instead.                                            |
@@ -491,7 +486,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]}>
+        <Swiper modules={[EffectFade, IonicSlides]}>
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
@@ -519,7 +514,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]}>
+        <Swiper modules={[EffectFade, IonicSlides]}>
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
@@ -532,9 +527,7 @@ 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"`:
@@ -553,7 +546,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]} swiper="fade">
+        <Swiper modules={[EffectFade, IonicSlides]} effect="fade">
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 6cda1c938de..4f02bd9813c 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating From ion-slides to Swiper.js
 ---
 
 <head>
@@ -11,17 +11,16 @@ title: Slides
 </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.
-
 :::
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
+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.
 
+:::note
+Swiper's Vue component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
 
-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.
+Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
+:::
 
 ## Getting Started
 
@@ -40,7 +39,7 @@ vue upgrade --next
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
 ## Swiping with Style
@@ -63,7 +62,7 @@ We recommend importing the styles in the component in which Swiper is being used
 ```
 
 :::note
-Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
 ### Updating Selectors
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index 872b5eaae92..90310419958 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating from ion-slides to Swiper.js
 ---
 
 <head>
@@ -10,13 +10,9 @@ title: Slides
   />
 </head>
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
+We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper directly.
 
-We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Angular directly.
-
-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.
+Swiper 9 introduced <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element.
 
 ## Getting Started
 
@@ -29,180 +25,143 @@ npm install @ionic/angular@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
-Once that is done, we need to import the `SwiperModule` module. This should be done in your component's module file:
+Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper.
 
 ```typescript
-// home.module.ts
-import { SwiperModule } from 'swiper/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 @NgModule({
-  imports: [..., SwiperModule]
+  schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
 });
 ...
 ```
 
-## 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:
+Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`.
 
 ```typescript
-// home.page.ts
-import { Component, ViewEncapsulation } from '@angular/core';
+import { register } from 'swiper/element/bundle';
+
+register();
 
 @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';
+From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own.
+
+```html
+<swiper-container>
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
-:::note
-Importing `@ionic/angular/css/ionic-swiper'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
-:::
+## Bundled vs. Core Versions
 
-### Updating Selectors
+By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features.
 
-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:
+If you would like to use the Core version instead, which does not include additional modules automatically, see <a href="https://swiperjs.com/element#core-version-and-modules" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#core-version-and-modules</a>. The rest of this migration guide will assume you are using the bundled version.
 
-| ion-slides Selector | Swiper Selector |
-| ------------------- | --------------- |
-| `ion-slides`        | `.swiper`       |
-| `ion-slide`         | `.swiper-slide` |
+## Swiping with Style
 
-### Vanilla CSS (Optional)
+To migrate over your CSS, first update your selectors to target the new custom elements instead:
 
-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.
+| ion-slides Selector | Swiper Selector    |
+| ------------------- | ------------------ | 
+| `ion-slides`        | `swiper-container` |
+| `ion-slide`         | `swiper-slide`     |
 
-```javascript
-// slides.component.css
-@import 'swiper/css';
-@import '@ionic/angular/css/ionic-swiper';
-```
+If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper.
 
-## Using Components
+| `ion-slides` CSS property          | `swiper-container` CSS property             |
+| ---------------------------------- | ------------------------------------------- |
+| `--bullet-background`              | `--swiper-pagination-bullet-inactive-color` |
+| `--bullet-background-active`       | `--swiper-pagination-color`                 |
+| `--progress-bar-background`        | `--swiper-pagination-progressbar-bg-color`  |
+| `--progress-bar-background-active` | `--swiper-pagination-color`                 |
+| `--scroll-bar-background`          | `--swiper-scrollbar-bg-color`               |
+| `--scroll-bar-background-active`   | `--swiper-scrollbar-drag-bg-color`          |
 
-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:
+For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See see <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
 
-```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>
-```
+### Additional `ion-slides` Styles
 
-## Using Modules
+The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`:
 
-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.
+```css
+swiper-container {
+  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+  --swiper-pagination-color: var(--ion-color-primary, #3880ff);
+  --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
+  --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+  --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+}
 
-`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.
+swiper-slide {
+  display: flex;
+  position: relative;
 
-To begin, we need to import the modules and provide them to Swiper:
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
 
-```typescript
-// home.page.ts
-import { Component } from '@angular/core';
-import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  width: 100%;
+  height: 100%;
 
-SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom]);
+  font-size: 18px;
 
-@Component({
-  selector: 'app-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss']
-})
-export class HomePage {
-  ...
+  text-align: center;
+  box-sizing: border-box;
 }
-```
-
-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>
+swiper-slide img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
 ```
 
-:::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. However, using this module is **not** required to use Swiper.js in Ionic.
 
-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`:
+We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array:
 
-```javascript
+```typescript
 // 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]);
+import { IonicSlides } from '@ionic/angular';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss']
+  ...
 })
 export class HomePage {
-  ...
+  swiperModules = [IonicSlides];
 }
 ```
 
+```html
+<!-- home.page.html -->
+
+<swiper-container [modules]="swiperModules">
+  ...
+</swiper-container>
+```
+
 :::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.
+If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is 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.
+Swiper options should be provided as individual properties directly on the `<swiper-container>` component.
 
 Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
 
@@ -214,42 +173,31 @@ Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` opti
 </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:
+To set these options as properties directly on `<swiper-container>` we would do the following:
 
 ```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>
+<swiper-container [slidesPerView]="3" [loop]="true">
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
-Below is a full list of property changes when going from `ion-slides` to Swiper Angular:
+Below is a full list of property changes when going from `ion-slides` to Swiper Element:
 
-| 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.                 |
+| Name      | Notes                                                                                                                                   |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager     | Use the `pagination` property instead.                                                                                                  |
 
 :::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>.
+All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
 :::
 
 ## Events
 
-Since the `Swiper` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them.
+Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase.
 
 Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 
@@ -261,170 +209,110 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 </ion-slides>
 ```
 
-To migrate, we would change the name of the event to `slideChange`:
+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>
+<swiper-container (slidechange)="onSlideChange()">
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
 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                   |
+| 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              |
+| 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>.
+All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#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)`:
+Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `<swiper-container>` element (such as through `ViewChild`), then access its `swiper` prop:
 
 ```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>
+<swiper-container #swiper>
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
 ```
 
-```javascript
+```typescript
 // slides.component.ts
-import { Component } from '@angular/core';
+
+import { ..., ElementRef, ViewChild } from '@angular/core';
 
 @Component({
-  selector: 'app-slides-example',
-  templateUrl: 'slides.component.html',
-  styleUrls: ['slides.component.scss']
+  ...
 })
 export class SlidesExample {
-  private slides: any;
+  @ViewChild('swiper')
+  swiperRef: ElementRef | undefined;
 
-  constructor() {}
-  setSwiperInstance(swiper: any) {
-    this.slides = swiper;
+  logActiveIndex() {
+    console.log(this.swiperRef?.nativeElement.swiper.activeIndex);
   }
 }
 ```
 
-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:
+Below is a full list of method changes when going from `ion-slides` to Swiper Element:
 
 | 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.          |
+| getSwiper()        | Get a reference to the Swiper instance using the `swiper` prop. 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)                     |
+| length()           | Use the `slides` property instead. (i.e swiper.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:
+:::note
+All methods and properties available on the Swiper instance can be found at <a href="https://swiperjs.com/swiper-api#methods-and-properties" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#methods-and-properties</a>.
+:::
 
-```scss
-// global.scss
-@import '~swiper/scss/effect-fade';
-```
+## Effects
 
-After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
+Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
 
 ```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() {}
-}
+<swiper-container effect="flip">
+  ...
+</swiper-container>
 ```
 
 :::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>.
+For more information on effects in Swiper, please see <a href="https://swiperjs.com/swiper-api#fade-effect" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#fade-effect</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>.
+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/element" target="_blank" rel="noopener noreferrer">Swiper Element documentation</a> and then referencing <a href="https://swiperjs.com/swiper-api" target="_blank" rel="noopener noreferrer">the Swiper API docs</a>.
 
 ## FAQ
 
@@ -442,4 +330,4 @@ Before opening an issue, please consider creating a post on the <a href="https:/
 
 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>
\ No newline at end of file
+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/slides.md b/versioned_docs/version-v6/react/slides.md
index 19d2b709458..c78b701e9b7 100644
--- a/versioned_docs/version-v6/react/slides.md
+++ b/versioned_docs/version-v6/react/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating From IonSlides to Swiper.js
 ---
 
 <head>
@@ -10,14 +10,16 @@ title: Slides
   />
 </head>
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
-
 We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `IonSlides` component, but we now recommend that developers use Swiper for React directly.
 
 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.
 
+:::note
+Swiper's React component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
+
+Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
+:::
+
 ## Getting Started
 
 First, update to the latest version of Ionic:
@@ -29,7 +31,7 @@ npm install @ionic/react@latest @ionic/react-router@latest
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
 :::note
@@ -38,7 +40,7 @@ Create React App does not support pure ESM packages yet. Developers can still us
 
 ## 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`.
+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 `IonSlides`.
 
 We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
 
@@ -59,13 +61,11 @@ export default Home;
 ```
 
 :::note
-Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
 :::note
-
 Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
-
 :::
 
 ### Updating Selectors
@@ -148,16 +148,14 @@ 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.
+`IonSlides` 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:
 
@@ -192,9 +190,7 @@ 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:
@@ -274,7 +270,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
 
 ## 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. However, using this module is **not** required to use Swiper.js in Ionic.
+With `IonSlides`, 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
 We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
 
@@ -423,7 +419,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper
 | 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>.
+All events available in Swiper can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
 :::
 
 ## Methods
@@ -455,7 +451,7 @@ From here, if you wanted to access a property on the Swiper instance you would a
 
 Below is a full list of method changes when going from `IonSlides` to Swiper React:
 
-| ion-slides Method  | Notes                                                                                |
+| IonSlides Method   | Notes                                                                                |
 | ------------------ | ------------------------------------------------------------------------------------ |
 | getActiveIndex()   | Use the `activeIndex` property instead.                                              |
 | getPreviousIndex() | Use the `previousIndex` property instead.                                            |
@@ -486,7 +482,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]}>
+        <Swiper modules={[EffectFade, IonicSlides]}>
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
@@ -514,7 +510,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]}>
+        <Swiper modules={[EffectFade, IonicSlides]}>
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
@@ -527,9 +523,7 @@ 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"`:
@@ -548,7 +542,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent>
-        <Swiper modules={[EffectFact, IonicSlides]} swiper="fade">
+        <Swiper modules={[EffectFade, IonicSlides]} effect="fade">
           <SwiperSlide>Slide 1</SwiperSlide>
           <SwiperSlide>Slide 2</SwiperSlide>
           <SwiperSlide>Slide 3</SwiperSlide>
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index a55ca6c04b4..7f63df400be 100644
--- a/versioned_docs/version-v6/vue/slides.md
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -1,5 +1,5 @@
 ---
-title: Slides
+title: Migrating From ion-slides to Swiper.js
 ---
 
 <head>
@@ -10,14 +10,16 @@ title: Slides
   />
 </head>
 
-:::note
-This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
-:::
-
 We recommend <a href="http://swiperjs.com/" target="_blank" rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Vue directly.
 
 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.
 
+:::note
+Swiper's Vue component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
+
+Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
+:::
+
 ## Getting Started
 
 First, update to the latest version of Ionic:
@@ -35,7 +37,7 @@ vue upgrade --next
 Once that is done, install the Swiper dependency in your project:
 
 ```shell
-npm install swiper@8
+npm install swiper@latest
 ```
 
 ## Swiping with Style
@@ -58,7 +60,7 @@ We recommend importing the styles in the component in which Swiper is being used
 ```
 
 :::note
-Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
 ### Updating Selectors

From 6857ca53f0e206f22c48fc0b4a9582b060e6b2ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 10:58:07 +0900
Subject: [PATCH 247/469] feat(translate): update translate

---
 scripts/data/translated-api.json              | 256 ++++++++++++------
 scripts/data/translated-cli.json              |  71 ++---
 scripts/data/translated-native.json           |   2 +-
 .../.detection/api/action-sheet.json          |   2 +-
 src/translate/.detection/api/alert.json       |   2 +-
 src/translate/.detection/api/breadcrumbs.json |  13 +-
 src/translate/.detection/api/button.json      |  30 +-
 src/translate/.detection/api/content.json     |   6 +
 src/translate/.detection/api/datetime.json    |  46 +++-
 src/translate/.detection/api/input.json       |  42 +--
 src/translate/.detection/api/label.json       |   2 +-
 src/translate/.detection/api/loading.json     |   2 +-
 src/translate/.detection/api/modal.json       |  11 +-
 src/translate/.detection/api/nav.json         |  22 +-
 src/translate/.detection/api/picker.json      |   2 +-
 src/translate/.detection/api/popover.json     |   4 +-
 .../.detection/api/reorder-group.json         |   2 +-
 src/translate/.detection/api/router.json      |   2 +-
 src/translate/.detection/api/searchbar.json   |  30 +-
 src/translate/.detection/api/select.json      |   2 +-
 src/translate/.detection/api/slides.json      |   8 +-
 src/translate/.detection/api/toast.json       |  26 +-
 src/translate/.detection/api/toggle.json      |   2 +-
 src/translate/.detection/cli/build.json       |   2 +-
 .../.detection/cli/capacitor-build.json       |   4 +-
 .../.detection/cli/capacitor-build.readme.md  |   2 +-
 .../.detection/cli/capacitor-copy.json        |   2 +-
 .../.detection/cli/capacitor-run.json         |   2 +-
 .../.detection/cli/capacitor-sync.json        |   2 +-
 .../.detection/cli/cordova-build.json         |   2 +-
 .../.detection/cli/cordova-emulate.json       |   2 +-
 .../.detection/cli/cordova-prepare.json       |   2 +-
 src/translate/.detection/cli/cordova-run.json |   2 +-
 .../.detection/cli/doctor-check.json          |   4 +-
 src/translate/.detection/cli/doctor-list.json |   4 +-
 .../.detection/cli/doctor-treat.json          |   4 +-
 src/translate/.detection/cli/serve.json       |  39 ---
 ...esome-cordova-plugins-iamport-cordova.json |   2 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   2 +-
 src/translate/api/action-sheet.json           |   2 +-
 src/translate/api/alert.json                  |   2 +-
 src/translate/api/breadcrumbs.json            |  13 +-
 src/translate/api/button.json                 |  30 +-
 src/translate/api/content.json                |   6 +
 src/translate/api/datetime.json               |  46 +++-
 src/translate/api/input.json                  |  42 +--
 src/translate/api/label.json                  |   2 +-
 src/translate/api/loading.json                |   2 +-
 src/translate/api/modal.json                  |  11 +-
 src/translate/api/nav.json                    |  22 +-
 src/translate/api/picker.json                 |   2 +-
 src/translate/api/popover.json                |   4 +-
 src/translate/api/reorder-group.json          |   2 +-
 src/translate/api/router.json                 |   2 +-
 src/translate/api/searchbar.json              |  30 +-
 src/translate/api/select.json                 |   2 +-
 src/translate/api/slides.json                 |   8 +-
 src/translate/api/toast.json                  |  26 +-
 src/translate/api/toggle.json                 |   2 +-
 src/translate/cli/build.json                  |   2 +-
 src/translate/cli/capacitor-build.json        |   4 +-
 src/translate/cli/capacitor-build.readme.md   |   2 +-
 src/translate/cli/capacitor-copy.json         |   2 +-
 src/translate/cli/capacitor-run.json          |   2 +-
 src/translate/cli/capacitor-sync.json         |   2 +-
 src/translate/cli/cordova-build.json          |   2 +-
 src/translate/cli/cordova-emulate.json        |   2 +-
 src/translate/cli/cordova-prepare.json        |   2 +-
 src/translate/cli/cordova-run.json            |   2 +-
 src/translate/cli/doctor-check.json           |   4 +-
 src/translate/cli/doctor-list.json            |   4 +-
 src/translate/cli/doctor-treat.json           |   4 +-
 src/translate/cli/serve.json                  |  39 ---
 ...esome-cordova-plugins-iamport-cordova.json |   2 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   2 +-
 75 files changed, 583 insertions(+), 412 deletions(-)

diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 370284af857..03837e5aa89 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -606,7 +606,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "Dismiss the action sheet overlay after it has been presented.",
           "docsTags": [
@@ -1112,7 +1112,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "Dismiss the alert overlay after it has been presented.",
           "docsTags": [
@@ -2485,18 +2485,7 @@
           "passive": false
         }
       ],
-      "styles": [
-        {
-          "name": "--background",
-          "annotation": "prop",
-          "docs": "Background of the breadcrumbs"
-        },
-        {
-          "name": "--color",
-          "annotation": "prop",
-          "docs": "Text color of the breadcrumbs"
-        }
-      ],
+      "styles": [],
       "slots": [],
       "parts": [],
       "dependents": [],
@@ -2650,7 +2639,7 @@
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": true,
-          "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.",
+          "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.",
           "docsTags": [],
           "values": [
             {
@@ -2674,7 +2663,7 @@
           "mutable": true,
           "attr": "fill",
           "reflectToAttr": true,
-          "docs": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\na toolbar, where the default is `\"clear\"`.",
+          "docs": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.",
           "docsTags": [],
           "values": [
             {
@@ -2700,6 +2689,28 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "form",
+          "type": "HTMLFormElement | string | undefined",
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": false,
+          "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLFormElement"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "href",
           "type": "string | undefined",
@@ -2809,7 +2820,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": true,
-          "docs": "The button shape.",
+          "docs": "Set to `\"round\"` for a button with more rounded corners.",
           "docsTags": [],
           "values": [
             {
@@ -2829,7 +2840,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": true,
-          "docs": "The button size.",
+          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
           "docsTags": [],
           "values": [
             {
@@ -5071,6 +5082,12 @@
           "target": "window",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "resize",
+          "target": "window",
+          "capture": false,
+          "passive": true
         }
       ],
       "styles": [
@@ -5504,6 +5521,30 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "highlightedDates",
+          "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "((dateIsoString: string) => DatetimeHighlightStyle"
+            },
+            {
+              "type": "undefined)"
+            },
+            {
+              "type": "DatetimeHighlight[]"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "hourCycle",
           "type": "\"h12\" | \"h23\" | undefined",
@@ -5864,7 +5905,7 @@
           "mutable": false,
           "attr": "show-default-title",
           "reflectToAttr": false,
-          "docs": "If `true`, a header will be shown above the calendar\npicker. On `ios` mode this will include the\nslotted title, and on `md` mode this will include\nthe slotted title and the selected date.",
+          "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5897,6 +5938,24 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "titleSelectedDatesFormatter",
+          "type": "((selectedDates: string[]) => string) | undefined",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "((selectedDates: string[]) => string)"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "value",
           "type": "null | string | string[] | undefined",
@@ -5977,7 +6036,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "reset(startDate?: string | undefined) => Promise<void>",
+          "signature": "reset(startDate?: string) => Promise<void>",
           "parameters": [],
           "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
           "docsTags": []
@@ -7402,7 +7461,7 @@
         },
         {
           "name": "autocomplete",
-          "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+          "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
@@ -7411,7 +7470,19 @@
           "default": "'off'",
           "values": [
             {
-              "value": "off",
+              "value": "name",
+              "type": "string"
+            },
+            {
+              "value": "email",
+              "type": "string"
+            },
+            {
+              "value": "tel",
+              "type": "string"
+            },
+            {
+              "value": "url",
               "type": "string"
             },
             {
@@ -7419,7 +7490,7 @@
               "type": "string"
             },
             {
-              "value": "name",
+              "value": "off",
               "type": "string"
             },
             {
@@ -7446,10 +7517,6 @@
               "value": "nickname",
               "type": "string"
             },
-            {
-              "value": "email",
-              "type": "string"
-            },
             {
               "value": "username",
               "type": "string"
@@ -7590,10 +7657,6 @@
               "value": "sex",
               "type": "string"
             },
-            {
-              "value": "tel",
-              "type": "string"
-            },
             {
               "value": "tel-country-code",
               "type": "string"
@@ -7618,10 +7681,6 @@
               "value": "impp",
               "type": "string"
             },
-            {
-              "value": "url",
-              "type": "string"
-            },
             {
               "value": "photo",
               "type": "string"
@@ -8261,7 +8320,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.",
+          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.",
           "docsTags": []
         }
       ],
@@ -8359,8 +8418,14 @@
       "slots": [],
       "parts": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "ion-icon"
+      ],
+      "dependencyGraph": {
+        "ion-input": [
+          "ion-icon"
+        ]
+      }
     },
     {
       "filePath": "./src/components/item-divider/item-divider.tsx",
@@ -9859,7 +9924,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the label"
+          "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`."
         }
       ],
       "slots": [],
@@ -10448,7 +10513,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "Dismiss the loading overlay after it has been presented.",
           "docsTags": [
@@ -11387,7 +11452,7 @@
         },
         {
           "name": "canDismiss",
-          "type": "(() => Promise<boolean>) | boolean | undefined",
+          "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean | undefined",
           "mutable": false,
           "attr": "can-dismiss",
           "reflectToAttr": false,
@@ -11395,7 +11460,10 @@
           "docsTags": [],
           "values": [
             {
-              "type": "(() => Promise<boolean>)"
+              "type": "((data?: any, role?: string"
+            },
+            {
+              "type": "undefined) => Promise<boolean>)"
             },
             {
               "type": "boolean"
@@ -11681,7 +11749,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "Dismiss the modal overlay after it has been presented.",
           "docsTags": [
@@ -11767,7 +11835,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has presented.\nShorthand for ionModalWillDismiss.",
+          "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.",
           "docsTags": []
         },
         {
@@ -12158,7 +12226,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "canGoBack(view?: ViewController | undefined) => Promise<boolean>",
+          "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
           "parameters": [],
           "docs": "Returns `true` if the current view can go back.",
           "docsTags": [
@@ -12201,7 +12269,7 @@
             "type": "Promise<ViewController | undefined>",
             "docs": ""
           },
-          "signature": "getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>",
+          "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
           "parameters": [],
           "docs": "Get the previous view.",
           "docsTags": [
@@ -12217,7 +12285,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
           "docsTags": [
@@ -12249,7 +12317,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
           "docsTags": [
@@ -12277,7 +12345,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
           "docsTags": [
@@ -12297,7 +12365,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Pop to a specific index in the navigation stack.",
           "docsTags": [
@@ -12321,7 +12389,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Navigate back to the root of the stack, no matter how far back that is.",
           "docsTags": [
@@ -12341,7 +12409,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
           "docsTags": [
@@ -12369,7 +12437,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Removes a component from the navigation stack at the specified index.",
           "docsTags": [
@@ -12397,7 +12465,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
           "docsTags": [
@@ -12421,7 +12489,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+          "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "Set the root for the current navigation stack to a component.",
           "docsTags": [
@@ -12819,7 +12887,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "Dismiss the picker overlay after it has been presented.",
           "docsTags": [
@@ -13485,7 +13553,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "dismiss(data?: any, role?: string | undefined, dismissParentPopover?: boolean) => Promise<boolean>",
+          "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
           "parameters": [],
           "docs": "Dismiss the popover overlay after it has been presented.",
           "docsTags": [
@@ -13531,7 +13599,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent<any> | undefined) => Promise<void>",
+          "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
           "parameters": [],
           "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
           "docsTags": []
@@ -15087,7 +15155,7 @@
             "type": "Promise<any>",
             "docs": ""
           },
-          "signature": "complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>",
+          "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
           "parameters": [],
           "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
           "docsTags": [
@@ -15789,7 +15857,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>",
+          "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
           "parameters": [],
           "docs": "Navigate to the specified path.",
           "docsTags": [
@@ -15895,7 +15963,7 @@
         },
         {
           "name": "autocomplete",
-          "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+          "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
@@ -15904,7 +15972,19 @@
           "default": "'off'",
           "values": [
             {
-              "value": "off",
+              "value": "name",
+              "type": "string"
+            },
+            {
+              "value": "email",
+              "type": "string"
+            },
+            {
+              "value": "tel",
+              "type": "string"
+            },
+            {
+              "value": "url",
               "type": "string"
             },
             {
@@ -15912,7 +15992,7 @@
               "type": "string"
             },
             {
-              "value": "name",
+              "value": "off",
               "type": "string"
             },
             {
@@ -15939,10 +16019,6 @@
               "value": "nickname",
               "type": "string"
             },
-            {
-              "value": "email",
-              "type": "string"
-            },
             {
               "value": "username",
               "type": "string"
@@ -16083,10 +16159,6 @@
               "value": "sex",
               "type": "string"
             },
-            {
-              "value": "tel",
-              "type": "string"
-            },
             {
               "value": "tel-country-code",
               "type": "string"
@@ -16111,10 +16183,6 @@
               "value": "impp",
               "type": "string"
             },
-            {
-              "value": "url",
-              "type": "string"
-            },
             {
               "value": "photo",
               "type": "string"
@@ -17567,7 +17635,7 @@
             "type": "Promise<any>",
             "docs": ""
           },
-          "signature": "open(event?: UIEvent | undefined) => Promise<any>",
+          "signature": "open(event?: UIEvent) => Promise<any>",
           "parameters": [],
           "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
           "docsTags": [
@@ -17992,7 +18060,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+          "signature": "slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
           "docs": "Transition to the next slide.",
           "docsTags": [
@@ -18012,7 +18080,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+          "signature": "slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
           "docs": "Transition to the previous slide.",
           "docsTags": [
@@ -18032,7 +18100,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+          "signature": "slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
           "docs": "Transition to the specified slide.",
           "docsTags": [
@@ -18089,7 +18157,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "updateAutoHeight(speed?: number | undefined) => Promise<void>",
+          "signature": "updateAutoHeight(speed?: number) => Promise<void>",
           "parameters": [],
           "docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.",
           "docsTags": [
@@ -20212,7 +20280,7 @@
           "reflectToAttr": false,
           "docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.",
           "docsTags": [],
-          "default": "0",
+          "default": "config.getNumber('toastDuration', 0)",
           "values": [
             {
               "type": "number"
@@ -20312,6 +20380,28 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "layout",
+          "type": "\"baseline\" | \"stacked\"",
+          "mutable": false,
+          "attr": "layout",
+          "reflectToAttr": false,
+          "docs": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.",
+          "docsTags": [],
+          "default": "'baseline'",
+          "values": [
+            {
+              "value": "baseline",
+              "type": "string"
+            },
+            {
+              "value": "stacked",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
@@ -20424,7 +20514,7 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
-          "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+          "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "Dismiss the toast overlay after it has been presented.",
           "docsTags": [
@@ -20751,7 +20841,7 @@
           "reflectToAttr": false,
           "docs": "Enables the on/off accessibility switch labels within the toggle.",
           "docsTags": [],
-          "default": "undefined",
+          "default": "config.get('toggleOnOffLabels')",
           "values": [
             {
               "type": "boolean"
diff --git a/scripts/data/translated-cli.json b/scripts/data/translated-cli.json
index 03f22fb0563..3f16ac8ec14 100644
--- a/scripts/data/translated-cli.json
+++ b/scripts/data/translated-cli.json
@@ -37,7 +37,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -130,7 +130,7 @@
         "capacitor"
       ],
       "summary": "Build an Ionic project for a given platform",
-      "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).",
+      "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).",
       "footnotes": [],
       "groups": [
         "beta"
@@ -186,7 +186,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -272,7 +272,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -494,7 +494,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -580,7 +580,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -988,7 +988,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -1298,7 +1298,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -1605,7 +1605,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -1907,7 +1907,7 @@
         {
           "name": "configuration",
           "type": "string",
-          "summary": "Specify the configuration to use.",
+          "summary": "Specify the configuration to use",
           "groups": [
             "advanced",
             "cordova"
@@ -2349,7 +2349,9 @@
       "summary": "Check the health of your Ionic project",
       "description": "This command detects and prints common issues and suggested steps to fix them.\n\nSome issues can be fixed automatically. See `ionic doctor treat --help`.\n\nOptionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.",
       "footnotes": [],
-      "groups": [],
+      "groups": [
+        "deprecated"
+      ],
       "exampleCommands": [
         "ionic doctor check ",
         "ionic doctor check git-not-used"
@@ -2377,7 +2379,9 @@
       "summary": "List all issues and their identifiers",
       "description": "Issues can have various tags:\n- **treatable**: `ionic doctor treat` can attempt to fix the issue\n- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`\n- **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`\n\nYou can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.",
       "footnotes": [],
-      "groups": [],
+      "groups": [
+        "deprecated"
+      ],
       "exampleCommands": [],
       "aliases": [
         "ionic doctor ls"
@@ -2395,7 +2399,9 @@
       "summary": "Attempt to fix issues in your Ionic project",
       "description": "This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.\n\nOptionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.",
       "footnotes": [],
-      "groups": [],
+      "groups": [
+        "deprecated"
+      ],
       "exampleCommands": [
         "ionic doctor treat ",
         "ionic doctor treat git-not-used"
@@ -3048,7 +3054,6 @@
       "exampleCommands": [
         "ionic serve ",
         "ionic serve --external",
-        "ionic serve --lab",
         "ionic serve -- --proxy-config proxy.conf.json"
       ],
       "aliases": [
@@ -3196,32 +3201,6 @@
             "value": "true/false"
           }
         },
-        {
-          "name": "lab-host",
-          "type": "string",
-          "summary": "Use specific host for Ionic Lab server",
-          "default": "localhost",
-          "groups": [
-            "advanced"
-          ],
-          "aliases": [],
-          "spec": {
-            "value": "host"
-          }
-        },
-        {
-          "name": "lab-port",
-          "type": "string",
-          "summary": "Use specific port for Ionic Lab server",
-          "default": "8200",
-          "groups": [
-            "advanced"
-          ],
-          "aliases": [],
-          "spec": {
-            "value": "port"
-          }
-        },
         {
           "name": "open",
           "type": "boolean",
@@ -3260,18 +3239,6 @@
           "spec": {
             "value": "path"
           }
-        },
-        {
-          "name": "lab",
-          "type": "boolean",
-          "summary": "Test your apps on multiple platform types in the browser",
-          "groups": [],
-          "aliases": [
-            "l"
-          ],
-          "spec": {
-            "value": "true/false"
-          }
         }
       ],
       "type": "project"
diff --git a/scripts/data/translated-native.json b/scripts/data/translated-native.json
index e6029d313e9..d825982deec 100644
--- a/scripts/data/translated-native.json
+++ b/scripts/data/translated-native.json
@@ -2089,7 +2089,7 @@
   {
     "packageName": "@awesome-cordova-plugins/iamport-cordova",
     "displayName": "Iamport Cordova",
-    "description": "\nThis plugin does something\n",
+    "description": "\nCordova plugin that integrates with and handles multiple payment gateways.\n",
     "usage": "\n```typescript\nimport { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx';\n\n\nconstructor(private iamportCordova: IamportCordova) { }\n\n...\n\n\nthis.iamportCordova.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "ios",
diff --git a/src/translate/.detection/api/action-sheet.json b/src/translate/.detection/api/action-sheet.json
index e97e408e0b5..1b9497fe6bb 100644
--- a/src/translate/.detection/api/action-sheet.json
+++ b/src/translate/.detection/api/action-sheet.json
@@ -241,7 +241,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the action sheet overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/.detection/api/alert.json b/src/translate/.detection/api/alert.json
index 0df78eb9be1..81e5fc8c880 100644
--- a/src/translate/.detection/api/alert.json
+++ b/src/translate/.detection/api/alert.json
@@ -279,7 +279,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the alert overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/.detection/api/breadcrumbs.json b/src/translate/.detection/api/breadcrumbs.json
index bd31eaae0b1..66231eed210 100644
--- a/src/translate/.detection/api/breadcrumbs.json
+++ b/src/translate/.detection/api/breadcrumbs.json
@@ -160,18 +160,7 @@
       "passive": false
     }
   ],
-  "styles": [
-    {
-      "name": "--background",
-      "annotation": "prop",
-      "docs": "Background of the breadcrumbs"
-    },
-    {
-      "name": "--color",
-      "annotation": "prop",
-      "docs": "Text color of the breadcrumbs"
-    }
-  ],
+  "styles": [],
   "slots": [],
   "parts": [],
   "dependents": [],
diff --git a/src/translate/.detection/api/button.json b/src/translate/.detection/api/button.json
index 012dca01d11..cbb1b55b027 100644
--- a/src/translate/.detection/api/button.json
+++ b/src/translate/.detection/api/button.json
@@ -145,7 +145,7 @@
       "mutable": false,
       "attr": "expand",
       "reflectToAttr": true,
-      "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.",
+      "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.",
       "docsTags": [],
       "values": [
         {
@@ -169,7 +169,7 @@
       "mutable": true,
       "attr": "fill",
       "reflectToAttr": true,
-      "docs": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\na toolbar, where the default is `\"clear\"`.",
+      "docs": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.",
       "docsTags": [],
       "values": [
         {
@@ -195,6 +195,28 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "form",
+      "type": "HTMLFormElement | string | undefined",
+      "mutable": false,
+      "attr": "form",
+      "reflectToAttr": false,
+      "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "HTMLFormElement"
+        },
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "href",
       "type": "string | undefined",
@@ -304,7 +326,7 @@
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": true,
-      "docs": "The button shape.",
+      "docs": "Set to `\"round\"` for a button with more rounded corners.",
       "docsTags": [],
       "values": [
         {
@@ -324,7 +346,7 @@
       "mutable": false,
       "attr": "size",
       "reflectToAttr": true,
-      "docs": "The button size.",
+      "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/.detection/api/content.json b/src/translate/.detection/api/content.json
index 51a126ce004..d3286e49ef8 100644
--- a/src/translate/.detection/api/content.json
+++ b/src/translate/.detection/api/content.json
@@ -294,6 +294,12 @@
       "target": "window",
       "capture": false,
       "passive": false
+    },
+    {
+      "event": "resize",
+      "target": "window",
+      "capture": false,
+      "passive": true
     }
   ],
   "styles": [
diff --git a/src/translate/.detection/api/datetime.json b/src/translate/.detection/api/datetime.json
index 92702d67b49..fe6c70ac29b 100644
--- a/src/translate/.detection/api/datetime.json
+++ b/src/translate/.detection/api/datetime.json
@@ -189,6 +189,30 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "highlightedDates",
+      "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((dateIsoString: string) => DatetimeHighlightStyle"
+        },
+        {
+          "type": "undefined)"
+        },
+        {
+          "type": "DatetimeHighlight[]"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "hourCycle",
       "type": "\"h12\" | \"h23\" | undefined",
@@ -549,7 +573,7 @@
       "mutable": false,
       "attr": "show-default-title",
       "reflectToAttr": false,
-      "docs": "If `true`, a header will be shown above the calendar\npicker. On `ios` mode this will include the\nslotted title, and on `md` mode this will include\nthe slotted title and the selected date.",
+      "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.",
       "docsTags": [],
       "default": "false",
       "values": [
@@ -582,6 +606,24 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "titleSelectedDatesFormatter",
+      "type": "((selectedDates: string[]) => string) | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((selectedDates: string[]) => string)"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "value",
       "type": "null | string | string[] | undefined",
@@ -662,7 +704,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "reset(startDate?: string | undefined) => Promise<void>",
+      "signature": "reset(startDate?: string) => Promise<void>",
       "parameters": [],
       "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
       "docsTags": []
diff --git a/src/translate/.detection/api/input.json b/src/translate/.detection/api/input.json
index 0735f16c4b6..dd397faf275 100644
--- a/src/translate/.detection/api/input.json
+++ b/src/translate/.detection/api/input.json
@@ -54,7 +54,7 @@
     },
     {
       "name": "autocomplete",
-      "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+      "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -63,7 +63,19 @@
       "default": "'off'",
       "values": [
         {
-          "value": "off",
+          "value": "name",
+          "type": "string"
+        },
+        {
+          "value": "email",
+          "type": "string"
+        },
+        {
+          "value": "tel",
+          "type": "string"
+        },
+        {
+          "value": "url",
           "type": "string"
         },
         {
@@ -71,7 +83,7 @@
           "type": "string"
         },
         {
-          "value": "name",
+          "value": "off",
           "type": "string"
         },
         {
@@ -98,10 +110,6 @@
           "value": "nickname",
           "type": "string"
         },
-        {
-          "value": "email",
-          "type": "string"
-        },
         {
           "value": "username",
           "type": "string"
@@ -242,10 +250,6 @@
           "value": "sex",
           "type": "string"
         },
-        {
-          "value": "tel",
-          "type": "string"
-        },
         {
           "value": "tel-country-code",
           "type": "string"
@@ -270,10 +274,6 @@
           "value": "impp",
           "type": "string"
         },
-        {
-          "value": "url",
-          "type": "string"
-        },
         {
           "value": "photo",
           "type": "string"
@@ -913,7 +913,7 @@
       },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
-      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.",
+      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.",
       "docsTags": []
     }
   ],
@@ -1011,6 +1011,12 @@
   "slots": [],
   "parts": [],
   "dependents": [],
-  "dependencies": [],
-  "dependencyGraph": {}
+  "dependencies": [
+    "ion-icon"
+  ],
+  "dependencyGraph": {
+    "ion-input": [
+      "ion-icon"
+    ]
+  }
 }
\ No newline at end of file
diff --git a/src/translate/.detection/api/label.json b/src/translate/.detection/api/label.json
index ca4dc0f666f..9a83429e564 100644
--- a/src/translate/.detection/api/label.json
+++ b/src/translate/.detection/api/label.json
@@ -123,7 +123,7 @@
     {
       "name": "--color",
       "annotation": "prop",
-      "docs": "Color of the label"
+      "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`."
     }
   ],
   "slots": [],
diff --git a/src/translate/.detection/api/loading.json b/src/translate/.detection/api/loading.json
index 5efe29b1f36..42403de595b 100644
--- a/src/translate/.detection/api/loading.json
+++ b/src/translate/.detection/api/loading.json
@@ -295,7 +295,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the loading overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/.detection/api/modal.json b/src/translate/.detection/api/modal.json
index 334f1c8f558..61a8d2a8e09 100644
--- a/src/translate/.detection/api/modal.json
+++ b/src/translate/.detection/api/modal.json
@@ -98,7 +98,7 @@
     },
     {
       "name": "canDismiss",
-      "type": "(() => Promise<boolean>) | boolean | undefined",
+      "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean | undefined",
       "mutable": false,
       "attr": "can-dismiss",
       "reflectToAttr": false,
@@ -106,7 +106,10 @@
       "docsTags": [],
       "values": [
         {
-          "type": "(() => Promise<boolean>)"
+          "type": "((data?: any, role?: string"
+        },
+        {
+          "type": "undefined) => Promise<boolean>)"
         },
         {
           "type": "boolean"
@@ -392,7 +395,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the modal overlay after it has been presented.",
       "docsTags": [
@@ -478,7 +481,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted after the modal has presented.\nShorthand for ionModalWillDismiss.",
+      "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.",
       "docsTags": []
     },
     {
diff --git a/src/translate/.detection/api/nav.json b/src/translate/.detection/api/nav.json
index 84629ca96bf..5f63d8b1ecc 100644
--- a/src/translate/.detection/api/nav.json
+++ b/src/translate/.detection/api/nav.json
@@ -117,7 +117,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "canGoBack(view?: ViewController | undefined) => Promise<boolean>",
+      "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` if the current view can go back.",
       "docsTags": [
@@ -160,7 +160,7 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
-      "signature": "getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>",
+      "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the previous view.",
       "docsTags": [
@@ -176,7 +176,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
       "docsTags": [
@@ -208,7 +208,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
       "docsTags": [
@@ -236,7 +236,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
       "docsTags": [
@@ -256,7 +256,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop to a specific index in the navigation stack.",
       "docsTags": [
@@ -280,7 +280,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate back to the root of the stack, no matter how far back that is.",
       "docsTags": [
@@ -300,7 +300,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
       "docsTags": [
@@ -328,7 +328,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Removes a component from the navigation stack at the specified index.",
       "docsTags": [
@@ -356,7 +356,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
       "docsTags": [
@@ -380,7 +380,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the root for the current navigation stack to a component.",
       "docsTags": [
diff --git a/src/translate/.detection/api/picker.json b/src/translate/.detection/api/picker.json
index 520bf433501..590a7bb0efb 100644
--- a/src/translate/.detection/api/picker.json
+++ b/src/translate/.detection/api/picker.json
@@ -233,7 +233,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the picker overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/.detection/api/popover.json b/src/translate/.detection/api/popover.json
index f1116eea336..96581aa8e34 100644
--- a/src/translate/.detection/api/popover.json
+++ b/src/translate/.detection/api/popover.json
@@ -480,7 +480,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined, dismissParentPopover?: boolean) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the popover overlay after it has been presented.",
       "docsTags": [
@@ -526,7 +526,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent<any> | undefined) => Promise<void>",
+      "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
       "parameters": [],
       "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
       "docsTags": []
diff --git a/src/translate/.detection/api/reorder-group.json b/src/translate/.detection/api/reorder-group.json
index fedcfc980a2..f974008bc8e 100644
--- a/src/translate/.detection/api/reorder-group.json
+++ b/src/translate/.detection/api/reorder-group.json
@@ -31,7 +31,7 @@
         "type": "Promise<any>",
         "docs": ""
       },
-      "signature": "complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>",
+      "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
       "parameters": [],
       "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
       "docsTags": [
diff --git a/src/translate/.detection/api/router.json b/src/translate/.detection/api/router.json
index ddd6031e50f..10cb2ac1abb 100644
--- a/src/translate/.detection/api/router.json
+++ b/src/translate/.detection/api/router.json
@@ -59,7 +59,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>",
+      "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate to the specified path.",
       "docsTags": [
diff --git a/src/translate/.detection/api/searchbar.json b/src/translate/.detection/api/searchbar.json
index 758bd3bef92..7342bfabec2 100644
--- a/src/translate/.detection/api/searchbar.json
+++ b/src/translate/.detection/api/searchbar.json
@@ -30,7 +30,7 @@
     },
     {
       "name": "autocomplete",
-      "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+      "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -39,7 +39,19 @@
       "default": "'off'",
       "values": [
         {
-          "value": "off",
+          "value": "name",
+          "type": "string"
+        },
+        {
+          "value": "email",
+          "type": "string"
+        },
+        {
+          "value": "tel",
+          "type": "string"
+        },
+        {
+          "value": "url",
           "type": "string"
         },
         {
@@ -47,7 +59,7 @@
           "type": "string"
         },
         {
-          "value": "name",
+          "value": "off",
           "type": "string"
         },
         {
@@ -74,10 +86,6 @@
           "value": "nickname",
           "type": "string"
         },
-        {
-          "value": "email",
-          "type": "string"
-        },
         {
           "value": "username",
           "type": "string"
@@ -218,10 +226,6 @@
           "value": "sex",
           "type": "string"
         },
-        {
-          "value": "tel",
-          "type": "string"
-        },
         {
           "value": "tel-country-code",
           "type": "string"
@@ -246,10 +250,6 @@
           "value": "impp",
           "type": "string"
         },
-        {
-          "value": "url",
-          "type": "string"
-        },
         {
           "value": "photo",
           "type": "string"
diff --git a/src/translate/.detection/api/select.json b/src/translate/.detection/api/select.json
index 8ef521b8244..b66a7127111 100644
--- a/src/translate/.detection/api/select.json
+++ b/src/translate/.detection/api/select.json
@@ -262,7 +262,7 @@
         "type": "Promise<any>",
         "docs": ""
       },
-      "signature": "open(event?: UIEvent | undefined) => Promise<any>",
+      "signature": "open(event?: UIEvent) => Promise<any>",
       "parameters": [],
       "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
       "docsTags": [
diff --git a/src/translate/.detection/api/slides.json b/src/translate/.detection/api/slides.json
index c39d9e9938a..6db5becd242 100644
--- a/src/translate/.detection/api/slides.json
+++ b/src/translate/.detection/api/slides.json
@@ -205,7 +205,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+      "signature": "slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Transition to the next slide.",
       "docsTags": [
@@ -225,7 +225,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+      "signature": "slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Transition to the previous slide.",
       "docsTags": [
@@ -245,7 +245,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+      "signature": "slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Transition to the specified slide.",
       "docsTags": [
@@ -302,7 +302,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "updateAutoHeight(speed?: number | undefined) => Promise<void>",
+      "signature": "updateAutoHeight(speed?: number) => Promise<void>",
       "parameters": [],
       "docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.",
       "docsTags": [
diff --git a/src/translate/.detection/api/toast.json b/src/translate/.detection/api/toast.json
index f92ca1fc884..25c218dd8df 100644
--- a/src/translate/.detection/api/toast.json
+++ b/src/translate/.detection/api/toast.json
@@ -154,7 +154,7 @@
       "reflectToAttr": false,
       "docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.",
       "docsTags": [],
-      "default": "0",
+      "default": "config.getNumber('toastDuration', 0)",
       "values": [
         {
           "type": "number"
@@ -254,6 +254,28 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "layout",
+      "type": "\"baseline\" | \"stacked\"",
+      "mutable": false,
+      "attr": "layout",
+      "reflectToAttr": false,
+      "docs": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.",
+      "docsTags": [],
+      "default": "'baseline'",
+      "values": [
+        {
+          "value": "baseline",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
@@ -366,7 +388,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the toast overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/.detection/api/toggle.json b/src/translate/.detection/api/toggle.json
index 98455462cf3..0ce4065fd6f 100644
--- a/src/translate/.detection/api/toggle.json
+++ b/src/translate/.detection/api/toggle.json
@@ -116,7 +116,7 @@
       "reflectToAttr": false,
       "docs": "Enables the on/off accessibility switch labels within the toggle.",
       "docsTags": [],
-      "default": "undefined",
+      "default": "config.get('toggleOnOffLabels')",
       "values": [
         {
           "type": "boolean"
diff --git a/src/translate/.detection/cli/build.json b/src/translate/.detection/cli/build.json
index 1b0780ab22d..89ebee9acfc 100644
--- a/src/translate/.detection/cli/build.json
+++ b/src/translate/.detection/cli/build.json
@@ -30,7 +30,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/capacitor-build.json b/src/translate/.detection/cli/capacitor-build.json
index 5a671a3c068..fe459b4057c 100644
--- a/src/translate/.detection/cli/capacitor-build.json
+++ b/src/translate/.detection/cli/capacitor-build.json
@@ -5,7 +5,7 @@
     "capacitor"
   ],
   "summary": "Build an Ionic project for a given platform",
-  "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).",
+  "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).",
   "footnotes": [],
   "groups": [
     "beta"
@@ -61,7 +61,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/capacitor-build.readme.md b/src/translate/.detection/cli/capacitor-build.readme.md
index ed5cb6ecdf2..0ccb955a383 100644
--- a/src/translate/.detection/cli/capacitor-build.readme.md
+++ b/src/translate/.detection/cli/capacitor-build.readme.md
@@ -5,4 +5,4 @@
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-copy.json b/src/translate/.detection/cli/capacitor-copy.json
index 6b6063f93e4..c6d18d32187 100644
--- a/src/translate/.detection/cli/capacitor-copy.json
+++ b/src/translate/.detection/cli/capacitor-copy.json
@@ -44,7 +44,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/capacitor-run.json b/src/translate/.detection/cli/capacitor-run.json
index 8ca8e6427eb..5149616c212 100644
--- a/src/translate/.detection/cli/capacitor-run.json
+++ b/src/translate/.detection/cli/capacitor-run.json
@@ -158,7 +158,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/capacitor-sync.json b/src/translate/.detection/cli/capacitor-sync.json
index 75561763bc1..2ef30a79f1d 100644
--- a/src/translate/.detection/cli/capacitor-sync.json
+++ b/src/translate/.detection/cli/capacitor-sync.json
@@ -44,7 +44,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/cordova-build.json b/src/translate/.detection/cli/cordova-build.json
index 312de93b919..fff9c53d41b 100644
--- a/src/translate/.detection/cli/cordova-build.json
+++ b/src/translate/.detection/cli/cordova-build.json
@@ -125,7 +125,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/cordova-emulate.json b/src/translate/.detection/cli/cordova-emulate.json
index 0e4e298bae8..0517c213709 100644
--- a/src/translate/.detection/cli/cordova-emulate.json
+++ b/src/translate/.detection/cli/cordova-emulate.json
@@ -185,7 +185,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/cordova-prepare.json b/src/translate/.detection/cli/cordova-prepare.json
index d7432aac777..4d8fe09bbb9 100644
--- a/src/translate/.detection/cli/cordova-prepare.json
+++ b/src/translate/.detection/cli/cordova-prepare.json
@@ -48,7 +48,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/cordova-run.json b/src/translate/.detection/cli/cordova-run.json
index b90cbed8085..f1ca8c02d5d 100644
--- a/src/translate/.detection/cli/cordova-run.json
+++ b/src/translate/.detection/cli/cordova-run.json
@@ -185,7 +185,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/.detection/cli/doctor-check.json b/src/translate/.detection/cli/doctor-check.json
index 98b43dc8d41..c35d4df5d45 100644
--- a/src/translate/.detection/cli/doctor-check.json
+++ b/src/translate/.detection/cli/doctor-check.json
@@ -7,7 +7,9 @@
   "summary": "Check the health of your Ionic project",
   "description": "This command detects and prints common issues and suggested steps to fix them.\n\nSome issues can be fixed automatically. See `ionic doctor treat --help`.\n\nOptionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.",
   "footnotes": [],
-  "groups": [],
+  "groups": [
+    "deprecated"
+  ],
   "exampleCommands": [
     "ionic doctor check ",
     "ionic doctor check git-not-used"
diff --git a/src/translate/.detection/cli/doctor-list.json b/src/translate/.detection/cli/doctor-list.json
index c4034428709..dd76ae236a2 100644
--- a/src/translate/.detection/cli/doctor-list.json
+++ b/src/translate/.detection/cli/doctor-list.json
@@ -7,7 +7,9 @@
   "summary": "List all issues and their identifiers",
   "description": "Issues can have various tags:\n- **treatable**: `ionic doctor treat` can attempt to fix the issue\n- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`\n- **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`\n\nYou can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.",
   "footnotes": [],
-  "groups": [],
+  "groups": [
+    "deprecated"
+  ],
   "exampleCommands": [],
   "aliases": [
     "ionic doctor ls"
diff --git a/src/translate/.detection/cli/doctor-treat.json b/src/translate/.detection/cli/doctor-treat.json
index e51023f7289..aba45dd507d 100644
--- a/src/translate/.detection/cli/doctor-treat.json
+++ b/src/translate/.detection/cli/doctor-treat.json
@@ -7,7 +7,9 @@
   "summary": "Attempt to fix issues in your Ionic project",
   "description": "This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.\n\nOptionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.",
   "footnotes": [],
-  "groups": [],
+  "groups": [
+    "deprecated"
+  ],
   "exampleCommands": [
     "ionic doctor treat ",
     "ionic doctor treat git-not-used"
diff --git a/src/translate/.detection/cli/serve.json b/src/translate/.detection/cli/serve.json
index d3a65b74712..03b95b8e464 100644
--- a/src/translate/.detection/cli/serve.json
+++ b/src/translate/.detection/cli/serve.json
@@ -10,7 +10,6 @@
   "exampleCommands": [
     "ionic serve ",
     "ionic serve --external",
-    "ionic serve --lab",
     "ionic serve -- --proxy-config proxy.conf.json"
   ],
   "aliases": [
@@ -158,32 +157,6 @@
         "value": "true/false"
       }
     },
-    {
-      "name": "lab-host",
-      "type": "string",
-      "summary": "Use specific host for Ionic Lab server",
-      "default": "localhost",
-      "groups": [
-        "advanced"
-      ],
-      "aliases": [],
-      "spec": {
-        "value": "host"
-      }
-    },
-    {
-      "name": "lab-port",
-      "type": "string",
-      "summary": "Use specific port for Ionic Lab server",
-      "default": "8200",
-      "groups": [
-        "advanced"
-      ],
-      "aliases": [],
-      "spec": {
-        "value": "port"
-      }
-    },
     {
       "name": "open",
       "type": "boolean",
@@ -222,18 +195,6 @@
       "spec": {
         "value": "path"
       }
-    },
-    {
-      "name": "lab",
-      "type": "boolean",
-      "summary": "Test your apps on multiple platform types in the browser",
-      "groups": [],
-      "aliases": [
-        "l"
-      ],
-      "spec": {
-        "value": "true/false"
-      }
     }
   ],
   "type": "project"
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.json b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.json
index 1dc3b4f35b9..f75987cb34c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.json
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.json
@@ -1,7 +1,7 @@
 {
   "packageName": "@awesome-cordova-plugins/iamport-cordova",
   "displayName": "Iamport Cordova",
-  "description": "\nThis plugin does something\n",
+  "description": "\nCordova plugin that integrates with and handles multiple payment gateways.\n",
   "usage": "\n```typescript\nimport { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx';\n\n\nconstructor(private iamportCordova: IamportCordova) { }\n\n...\n\n\nthis.iamportCordova.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
   "platforms": [
     "ios",
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index 7066b964568..d223513c705 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1,2 @@
 
-This plugin does something
+Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/api/action-sheet.json b/src/translate/api/action-sheet.json
index e97e408e0b5..1b9497fe6bb 100644
--- a/src/translate/api/action-sheet.json
+++ b/src/translate/api/action-sheet.json
@@ -241,7 +241,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the action sheet overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/api/alert.json b/src/translate/api/alert.json
index 0df78eb9be1..81e5fc8c880 100644
--- a/src/translate/api/alert.json
+++ b/src/translate/api/alert.json
@@ -279,7 +279,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the alert overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/api/breadcrumbs.json b/src/translate/api/breadcrumbs.json
index bd31eaae0b1..66231eed210 100644
--- a/src/translate/api/breadcrumbs.json
+++ b/src/translate/api/breadcrumbs.json
@@ -160,18 +160,7 @@
       "passive": false
     }
   ],
-  "styles": [
-    {
-      "name": "--background",
-      "annotation": "prop",
-      "docs": "Background of the breadcrumbs"
-    },
-    {
-      "name": "--color",
-      "annotation": "prop",
-      "docs": "Text color of the breadcrumbs"
-    }
-  ],
+  "styles": [],
   "slots": [],
   "parts": [],
   "dependents": [],
diff --git a/src/translate/api/button.json b/src/translate/api/button.json
index 012dca01d11..cbb1b55b027 100644
--- a/src/translate/api/button.json
+++ b/src/translate/api/button.json
@@ -145,7 +145,7 @@
       "mutable": false,
       "attr": "expand",
       "reflectToAttr": true,
-      "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.",
+      "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.",
       "docsTags": [],
       "values": [
         {
@@ -169,7 +169,7 @@
       "mutable": true,
       "attr": "fill",
       "reflectToAttr": true,
-      "docs": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\na toolbar, where the default is `\"clear\"`.",
+      "docs": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.",
       "docsTags": [],
       "values": [
         {
@@ -195,6 +195,28 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "form",
+      "type": "HTMLFormElement | string | undefined",
+      "mutable": false,
+      "attr": "form",
+      "reflectToAttr": false,
+      "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "HTMLFormElement"
+        },
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "href",
       "type": "string | undefined",
@@ -304,7 +326,7 @@
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": true,
-      "docs": "The button shape.",
+      "docs": "Set to `\"round\"` for a button with more rounded corners.",
       "docsTags": [],
       "values": [
         {
@@ -324,7 +346,7 @@
       "mutable": false,
       "attr": "size",
       "reflectToAttr": true,
-      "docs": "The button size.",
+      "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/api/content.json b/src/translate/api/content.json
index 51a126ce004..d3286e49ef8 100644
--- a/src/translate/api/content.json
+++ b/src/translate/api/content.json
@@ -294,6 +294,12 @@
       "target": "window",
       "capture": false,
       "passive": false
+    },
+    {
+      "event": "resize",
+      "target": "window",
+      "capture": false,
+      "passive": true
     }
   ],
   "styles": [
diff --git a/src/translate/api/datetime.json b/src/translate/api/datetime.json
index 92702d67b49..fe6c70ac29b 100644
--- a/src/translate/api/datetime.json
+++ b/src/translate/api/datetime.json
@@ -189,6 +189,30 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "highlightedDates",
+      "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((dateIsoString: string) => DatetimeHighlightStyle"
+        },
+        {
+          "type": "undefined)"
+        },
+        {
+          "type": "DatetimeHighlight[]"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "hourCycle",
       "type": "\"h12\" | \"h23\" | undefined",
@@ -549,7 +573,7 @@
       "mutable": false,
       "attr": "show-default-title",
       "reflectToAttr": false,
-      "docs": "If `true`, a header will be shown above the calendar\npicker. On `ios` mode this will include the\nslotted title, and on `md` mode this will include\nthe slotted title and the selected date.",
+      "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.",
       "docsTags": [],
       "default": "false",
       "values": [
@@ -582,6 +606,24 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "titleSelectedDatesFormatter",
+      "type": "((selectedDates: string[]) => string) | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((selectedDates: string[]) => string)"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "value",
       "type": "null | string | string[] | undefined",
@@ -662,7 +704,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "reset(startDate?: string | undefined) => Promise<void>",
+      "signature": "reset(startDate?: string) => Promise<void>",
       "parameters": [],
       "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
       "docsTags": []
diff --git a/src/translate/api/input.json b/src/translate/api/input.json
index 0735f16c4b6..dd397faf275 100644
--- a/src/translate/api/input.json
+++ b/src/translate/api/input.json
@@ -54,7 +54,7 @@
     },
     {
       "name": "autocomplete",
-      "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+      "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -63,7 +63,19 @@
       "default": "'off'",
       "values": [
         {
-          "value": "off",
+          "value": "name",
+          "type": "string"
+        },
+        {
+          "value": "email",
+          "type": "string"
+        },
+        {
+          "value": "tel",
+          "type": "string"
+        },
+        {
+          "value": "url",
           "type": "string"
         },
         {
@@ -71,7 +83,7 @@
           "type": "string"
         },
         {
-          "value": "name",
+          "value": "off",
           "type": "string"
         },
         {
@@ -98,10 +110,6 @@
           "value": "nickname",
           "type": "string"
         },
-        {
-          "value": "email",
-          "type": "string"
-        },
         {
           "value": "username",
           "type": "string"
@@ -242,10 +250,6 @@
           "value": "sex",
           "type": "string"
         },
-        {
-          "value": "tel",
-          "type": "string"
-        },
         {
           "value": "tel-country-code",
           "type": "string"
@@ -270,10 +274,6 @@
           "value": "impp",
           "type": "string"
         },
-        {
-          "value": "url",
-          "type": "string"
-        },
         {
           "value": "photo",
           "type": "string"
@@ -913,7 +913,7 @@
       },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
-      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.",
+      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.",
       "docsTags": []
     }
   ],
@@ -1011,6 +1011,12 @@
   "slots": [],
   "parts": [],
   "dependents": [],
-  "dependencies": [],
-  "dependencyGraph": {}
+  "dependencies": [
+    "ion-icon"
+  ],
+  "dependencyGraph": {
+    "ion-input": [
+      "ion-icon"
+    ]
+  }
 }
\ No newline at end of file
diff --git a/src/translate/api/label.json b/src/translate/api/label.json
index ca4dc0f666f..9a83429e564 100644
--- a/src/translate/api/label.json
+++ b/src/translate/api/label.json
@@ -123,7 +123,7 @@
     {
       "name": "--color",
       "annotation": "prop",
-      "docs": "Color of the label"
+      "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`."
     }
   ],
   "slots": [],
diff --git a/src/translate/api/loading.json b/src/translate/api/loading.json
index 5efe29b1f36..42403de595b 100644
--- a/src/translate/api/loading.json
+++ b/src/translate/api/loading.json
@@ -295,7 +295,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the loading overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/api/modal.json b/src/translate/api/modal.json
index 334f1c8f558..61a8d2a8e09 100644
--- a/src/translate/api/modal.json
+++ b/src/translate/api/modal.json
@@ -98,7 +98,7 @@
     },
     {
       "name": "canDismiss",
-      "type": "(() => Promise<boolean>) | boolean | undefined",
+      "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean | undefined",
       "mutable": false,
       "attr": "can-dismiss",
       "reflectToAttr": false,
@@ -106,7 +106,10 @@
       "docsTags": [],
       "values": [
         {
-          "type": "(() => Promise<boolean>)"
+          "type": "((data?: any, role?: string"
+        },
+        {
+          "type": "undefined) => Promise<boolean>)"
         },
         {
           "type": "boolean"
@@ -392,7 +395,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the modal overlay after it has been presented.",
       "docsTags": [
@@ -478,7 +481,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted after the modal has presented.\nShorthand for ionModalWillDismiss.",
+      "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.",
       "docsTags": []
     },
     {
diff --git a/src/translate/api/nav.json b/src/translate/api/nav.json
index 84629ca96bf..5f63d8b1ecc 100644
--- a/src/translate/api/nav.json
+++ b/src/translate/api/nav.json
@@ -117,7 +117,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "canGoBack(view?: ViewController | undefined) => Promise<boolean>",
+      "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` if the current view can go back.",
       "docsTags": [
@@ -160,7 +160,7 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
-      "signature": "getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>",
+      "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the previous view.",
       "docsTags": [
@@ -176,7 +176,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
       "docsTags": [
@@ -208,7 +208,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
       "docsTags": [
@@ -236,7 +236,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
       "docsTags": [
@@ -256,7 +256,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop to a specific index in the navigation stack.",
       "docsTags": [
@@ -280,7 +280,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate back to the root of the stack, no matter how far back that is.",
       "docsTags": [
@@ -300,7 +300,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
       "docsTags": [
@@ -328,7 +328,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Removes a component from the navigation stack at the specified index.",
       "docsTags": [
@@ -356,7 +356,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
       "docsTags": [
@@ -380,7 +380,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>",
+      "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the root for the current navigation stack to a component.",
       "docsTags": [
diff --git a/src/translate/api/picker.json b/src/translate/api/picker.json
index 520bf433501..590a7bb0efb 100644
--- a/src/translate/api/picker.json
+++ b/src/translate/api/picker.json
@@ -233,7 +233,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the picker overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/api/popover.json b/src/translate/api/popover.json
index f1116eea336..96581aa8e34 100644
--- a/src/translate/api/popover.json
+++ b/src/translate/api/popover.json
@@ -480,7 +480,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined, dismissParentPopover?: boolean) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the popover overlay after it has been presented.",
       "docsTags": [
@@ -526,7 +526,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent<any> | undefined) => Promise<void>",
+      "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
       "parameters": [],
       "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
       "docsTags": []
diff --git a/src/translate/api/reorder-group.json b/src/translate/api/reorder-group.json
index fedcfc980a2..f974008bc8e 100644
--- a/src/translate/api/reorder-group.json
+++ b/src/translate/api/reorder-group.json
@@ -31,7 +31,7 @@
         "type": "Promise<any>",
         "docs": ""
       },
-      "signature": "complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>",
+      "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
       "parameters": [],
       "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
       "docsTags": [
diff --git a/src/translate/api/router.json b/src/translate/api/router.json
index ddd6031e50f..10cb2ac1abb 100644
--- a/src/translate/api/router.json
+++ b/src/translate/api/router.json
@@ -59,7 +59,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>",
+      "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate to the specified path.",
       "docsTags": [
diff --git a/src/translate/api/searchbar.json b/src/translate/api/searchbar.json
index 758bd3bef92..7342bfabec2 100644
--- a/src/translate/api/searchbar.json
+++ b/src/translate/api/searchbar.json
@@ -30,7 +30,7 @@
     },
     {
       "name": "autocomplete",
-      "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+      "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -39,7 +39,19 @@
       "default": "'off'",
       "values": [
         {
-          "value": "off",
+          "value": "name",
+          "type": "string"
+        },
+        {
+          "value": "email",
+          "type": "string"
+        },
+        {
+          "value": "tel",
+          "type": "string"
+        },
+        {
+          "value": "url",
           "type": "string"
         },
         {
@@ -47,7 +59,7 @@
           "type": "string"
         },
         {
-          "value": "name",
+          "value": "off",
           "type": "string"
         },
         {
@@ -74,10 +86,6 @@
           "value": "nickname",
           "type": "string"
         },
-        {
-          "value": "email",
-          "type": "string"
-        },
         {
           "value": "username",
           "type": "string"
@@ -218,10 +226,6 @@
           "value": "sex",
           "type": "string"
         },
-        {
-          "value": "tel",
-          "type": "string"
-        },
         {
           "value": "tel-country-code",
           "type": "string"
@@ -246,10 +250,6 @@
           "value": "impp",
           "type": "string"
         },
-        {
-          "value": "url",
-          "type": "string"
-        },
         {
           "value": "photo",
           "type": "string"
diff --git a/src/translate/api/select.json b/src/translate/api/select.json
index 8ef521b8244..b66a7127111 100644
--- a/src/translate/api/select.json
+++ b/src/translate/api/select.json
@@ -262,7 +262,7 @@
         "type": "Promise<any>",
         "docs": ""
       },
-      "signature": "open(event?: UIEvent | undefined) => Promise<any>",
+      "signature": "open(event?: UIEvent) => Promise<any>",
       "parameters": [],
       "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
       "docsTags": [
diff --git a/src/translate/api/slides.json b/src/translate/api/slides.json
index c39d9e9938a..6db5becd242 100644
--- a/src/translate/api/slides.json
+++ b/src/translate/api/slides.json
@@ -205,7 +205,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+      "signature": "slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Transition to the next slide.",
       "docsTags": [
@@ -225,7 +225,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+      "signature": "slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Transition to the previous slide.",
       "docsTags": [
@@ -245,7 +245,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
+      "signature": "slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Transition to the specified slide.",
       "docsTags": [
@@ -302,7 +302,7 @@
         "type": "Promise<void>",
         "docs": ""
       },
-      "signature": "updateAutoHeight(speed?: number | undefined) => Promise<void>",
+      "signature": "updateAutoHeight(speed?: number) => Promise<void>",
       "parameters": [],
       "docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.",
       "docsTags": [
diff --git a/src/translate/api/toast.json b/src/translate/api/toast.json
index f92ca1fc884..25c218dd8df 100644
--- a/src/translate/api/toast.json
+++ b/src/translate/api/toast.json
@@ -154,7 +154,7 @@
       "reflectToAttr": false,
       "docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.",
       "docsTags": [],
-      "default": "0",
+      "default": "config.getNumber('toastDuration', 0)",
       "values": [
         {
           "type": "number"
@@ -254,6 +254,28 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "layout",
+      "type": "\"baseline\" | \"stacked\"",
+      "mutable": false,
+      "attr": "layout",
+      "reflectToAttr": false,
+      "docs": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.",
+      "docsTags": [],
+      "default": "'baseline'",
+      "values": [
+        {
+          "value": "baseline",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
@@ -366,7 +388,7 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
-      "signature": "dismiss(data?: any, role?: string | undefined) => Promise<boolean>",
+      "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the toast overlay after it has been presented.",
       "docsTags": [
diff --git a/src/translate/api/toggle.json b/src/translate/api/toggle.json
index 98455462cf3..0ce4065fd6f 100644
--- a/src/translate/api/toggle.json
+++ b/src/translate/api/toggle.json
@@ -116,7 +116,7 @@
       "reflectToAttr": false,
       "docs": "Enables the on/off accessibility switch labels within the toggle.",
       "docsTags": [],
-      "default": "undefined",
+      "default": "config.get('toggleOnOffLabels')",
       "values": [
         {
           "type": "boolean"
diff --git a/src/translate/cli/build.json b/src/translate/cli/build.json
index 1b0780ab22d..89ebee9acfc 100644
--- a/src/translate/cli/build.json
+++ b/src/translate/cli/build.json
@@ -30,7 +30,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/capacitor-build.json b/src/translate/cli/capacitor-build.json
index 5a671a3c068..fe459b4057c 100644
--- a/src/translate/cli/capacitor-build.json
+++ b/src/translate/cli/capacitor-build.json
@@ -5,7 +5,7 @@
     "capacitor"
   ],
   "summary": "Build an Ionic project for a given platform",
-  "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).",
+  "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).",
   "footnotes": [],
   "groups": [
     "beta"
@@ -61,7 +61,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/capacitor-build.readme.md b/src/translate/cli/capacitor-build.readme.md
index ed5cb6ecdf2..0ccb955a383 100644
--- a/src/translate/cli/capacitor-build.readme.md
+++ b/src/translate/cli/capacitor-build.readme.md
@@ -5,4 +5,4 @@
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-copy.json b/src/translate/cli/capacitor-copy.json
index 6b6063f93e4..c6d18d32187 100644
--- a/src/translate/cli/capacitor-copy.json
+++ b/src/translate/cli/capacitor-copy.json
@@ -44,7 +44,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/capacitor-run.json b/src/translate/cli/capacitor-run.json
index 8ca8e6427eb..5149616c212 100644
--- a/src/translate/cli/capacitor-run.json
+++ b/src/translate/cli/capacitor-run.json
@@ -158,7 +158,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/capacitor-sync.json b/src/translate/cli/capacitor-sync.json
index 75561763bc1..2ef30a79f1d 100644
--- a/src/translate/cli/capacitor-sync.json
+++ b/src/translate/cli/capacitor-sync.json
@@ -44,7 +44,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/cordova-build.json b/src/translate/cli/cordova-build.json
index 312de93b919..fff9c53d41b 100644
--- a/src/translate/cli/cordova-build.json
+++ b/src/translate/cli/cordova-build.json
@@ -125,7 +125,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/cordova-emulate.json b/src/translate/cli/cordova-emulate.json
index 0e4e298bae8..0517c213709 100644
--- a/src/translate/cli/cordova-emulate.json
+++ b/src/translate/cli/cordova-emulate.json
@@ -185,7 +185,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/cordova-prepare.json b/src/translate/cli/cordova-prepare.json
index d7432aac777..4d8fe09bbb9 100644
--- a/src/translate/cli/cordova-prepare.json
+++ b/src/translate/cli/cordova-prepare.json
@@ -48,7 +48,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/cordova-run.json b/src/translate/cli/cordova-run.json
index b90cbed8085..f1ca8c02d5d 100644
--- a/src/translate/cli/cordova-run.json
+++ b/src/translate/cli/cordova-run.json
@@ -185,7 +185,7 @@
     {
       "name": "configuration",
       "type": "string",
-      "summary": "Specify the configuration to use.",
+      "summary": "Specify the configuration to use",
       "groups": [
         "advanced",
         "cordova"
diff --git a/src/translate/cli/doctor-check.json b/src/translate/cli/doctor-check.json
index 98b43dc8d41..c35d4df5d45 100644
--- a/src/translate/cli/doctor-check.json
+++ b/src/translate/cli/doctor-check.json
@@ -7,7 +7,9 @@
   "summary": "Check the health of your Ionic project",
   "description": "This command detects and prints common issues and suggested steps to fix them.\n\nSome issues can be fixed automatically. See `ionic doctor treat --help`.\n\nOptionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.",
   "footnotes": [],
-  "groups": [],
+  "groups": [
+    "deprecated"
+  ],
   "exampleCommands": [
     "ionic doctor check ",
     "ionic doctor check git-not-used"
diff --git a/src/translate/cli/doctor-list.json b/src/translate/cli/doctor-list.json
index c4034428709..dd76ae236a2 100644
--- a/src/translate/cli/doctor-list.json
+++ b/src/translate/cli/doctor-list.json
@@ -7,7 +7,9 @@
   "summary": "List all issues and their identifiers",
   "description": "Issues can have various tags:\n- **treatable**: `ionic doctor treat` can attempt to fix the issue\n- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`\n- **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`\n\nYou can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.",
   "footnotes": [],
-  "groups": [],
+  "groups": [
+    "deprecated"
+  ],
   "exampleCommands": [],
   "aliases": [
     "ionic doctor ls"
diff --git a/src/translate/cli/doctor-treat.json b/src/translate/cli/doctor-treat.json
index e51023f7289..aba45dd507d 100644
--- a/src/translate/cli/doctor-treat.json
+++ b/src/translate/cli/doctor-treat.json
@@ -7,7 +7,9 @@
   "summary": "Attempt to fix issues in your Ionic project",
   "description": "This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.\n\nOptionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.",
   "footnotes": [],
-  "groups": [],
+  "groups": [
+    "deprecated"
+  ],
   "exampleCommands": [
     "ionic doctor treat ",
     "ionic doctor treat git-not-used"
diff --git a/src/translate/cli/serve.json b/src/translate/cli/serve.json
index d3a65b74712..03b95b8e464 100644
--- a/src/translate/cli/serve.json
+++ b/src/translate/cli/serve.json
@@ -10,7 +10,6 @@
   "exampleCommands": [
     "ionic serve ",
     "ionic serve --external",
-    "ionic serve --lab",
     "ionic serve -- --proxy-config proxy.conf.json"
   ],
   "aliases": [
@@ -158,32 +157,6 @@
         "value": "true/false"
       }
     },
-    {
-      "name": "lab-host",
-      "type": "string",
-      "summary": "Use specific host for Ionic Lab server",
-      "default": "localhost",
-      "groups": [
-        "advanced"
-      ],
-      "aliases": [],
-      "spec": {
-        "value": "host"
-      }
-    },
-    {
-      "name": "lab-port",
-      "type": "string",
-      "summary": "Use specific port for Ionic Lab server",
-      "default": "8200",
-      "groups": [
-        "advanced"
-      ],
-      "aliases": [],
-      "spec": {
-        "value": "port"
-      }
-    },
     {
       "name": "open",
       "type": "boolean",
@@ -222,18 +195,6 @@
       "spec": {
         "value": "path"
       }
-    },
-    {
-      "name": "lab",
-      "type": "boolean",
-      "summary": "Test your apps on multiple platform types in the browser",
-      "groups": [],
-      "aliases": [
-        "l"
-      ],
-      "spec": {
-        "value": "true/false"
-      }
     }
   ],
   "type": "project"
diff --git a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.json b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.json
index 1dc3b4f35b9..f75987cb34c 100644
--- a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.json
+++ b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.json
@@ -1,7 +1,7 @@
 {
   "packageName": "@awesome-cordova-plugins/iamport-cordova",
   "displayName": "Iamport Cordova",
-  "description": "\nThis plugin does something\n",
+  "description": "\nCordova plugin that integrates with and handles multiple payment gateways.\n",
   "usage": "\n```typescript\nimport { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx';\n\n\nconstructor(private iamportCordova: IamportCordova) { }\n\n...\n\n\nthis.iamportCordova.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
   "platforms": [
     "ios",
diff --git a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index 7066b964568..d223513c705 100644
--- a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1,2 @@
 
-This plugin does something
+Cordova plugin that integrates with and handles multiple payment gateways.

From 51dc415a74ce32cd2cc7d704e6b07c2ef6888cd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 13:16:37 +0900
Subject: [PATCH 248/469] feat(translate): add auto translation by DeepL

---
 package-lock.json                             |   41 +
 package.json                                  |    1 +
 scripts/build-translate/deepl.config.json     |    5 +
 scripts/build-translate/index.ts              |   80 +-
 scripts/build-translate/translate-type.ts     |   40 +
 scripts/data/translated-api.json              | 2688 ++++++++---------
 scripts/data/translated-cache.json            | 1147 +++++++
 scripts/data/translated-cli.json              |   86 +-
 .../reference/ReleaseNotes/release-notes.json |   30 +-
 9 files changed, 2677 insertions(+), 1441 deletions(-)
 create mode 100644 scripts/build-translate/deepl.config.json
 create mode 100644 scripts/build-translate/translate-type.ts
 create mode 100644 scripts/data/translated-cache.json

diff --git a/package-lock.json b/package-lock.json
index 7584aa35d5a..0f65095ccc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "@ionic/prettier-config": "^2.0.0",
         "@tsconfig/docusaurus": "^1.0.4",
         "@types/react": "^17.0.37",
+        "deepl": "^1.0.13",
         "html-loader": "^3.1.0",
         "prettier": "^2.5.0",
         "ts-node": "^10.4.0",
@@ -5777,6 +5778,25 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/deepl": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/deepl/-/deepl-1.0.13.tgz",
+      "integrity": "sha512-ieaHKo+Y2u1jTpbX3SkhFGaOLgXB20gYoLqPhqtjxr612GC9wSMUqrHIfhvQzpevTVcI6H4kgElXActg3DHnqg==",
+      "dev": true,
+      "dependencies": {
+        "axios": "^0.21.1",
+        "querystring": "^0.2.0"
+      }
+    },
+    "node_modules/deepl/node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
@@ -18341,6 +18361,27 @@
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
     },
+    "deepl": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/deepl/-/deepl-1.0.13.tgz",
+      "integrity": "sha512-ieaHKo+Y2u1jTpbX3SkhFGaOLgXB20gYoLqPhqtjxr612GC9wSMUqrHIfhvQzpevTVcI6H4kgElXActg3DHnqg==",
+      "dev": true,
+      "requires": {
+        "axios": "^0.21.1",
+        "querystring": "^0.2.0"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.21.4",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+          "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+          "dev": true,
+          "requires": {
+            "follow-redirects": "^1.14.0"
+          }
+        }
+      }
+    },
     "deepmerge": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
diff --git a/package.json b/package.json
index 217202c95ac..8f5210868ed 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@ionic/prettier-config": "^2.0.0",
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/react": "^17.0.37",
+    "deepl": "^1.0.13",
     "html-loader": "^3.1.0",
     "prettier": "^2.5.0",
     "ts-node": "^10.4.0",
diff --git a/scripts/build-translate/deepl.config.json b/scripts/build-translate/deepl.config.json
new file mode 100644
index 00000000000..d59cf4dde1e
--- /dev/null
+++ b/scripts/build-translate/deepl.config.json
@@ -0,0 +1,5 @@
+{
+  "fromLanguage": "EN",
+  "toLanguage": "JA",
+  "ulr": "https://www.deepl.com/docs-api"
+}
diff --git a/scripts/build-translate/index.ts b/scripts/build-translate/index.ts
index 2d7f97fa335..f704fda3c8e 100644
--- a/scripts/build-translate/index.ts
+++ b/scripts/build-translate/index.ts
@@ -1,42 +1,15 @@
 import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'fs';
-const fetch = require('node-fetch');
-import { commands } from '../data/cli.json';
-
-const getTranslateType = async () => {
-  const response = await fetch('https://unpkg.com/@ionic/docs/core.json');
-  const { components } = await response.json();
-
-  return [
-    {
-      type: 'api',
-      contents: components,
-      key: 'tag',
-      contentsKey: 'components',
-      markdown: 'docs',
-      resource: response,
-    },
-    {
-      type: 'cli',
-      contents: commands,
-      key: 'name',
-      contentsKey: 'commands',
-      markdown: 'description',
-      resource: require('../data/cli.json'),
-    },
-    {
-      type: 'native',
-      contents: require('../data/native.json'),
-      key: 'packageName',
-      contentsKey: '',
-      markdown: 'description',
-      resource: require('../data/native.json'),
-    }
-  ];
-}
+import { getTranslateType } from './translate-type';
+const translate = require('deepl');
+import DeeplConfig from './deepl.config.json';
+import TranslatedCache from '../data/translated-cache.json';
 
 const apply = async () => {
   const translateTypes = await getTranslateType();
 
+  const cacheTranslated = TranslatedCache.cache as { [key: string]: string };
+  const translatedNow = {} as { [key: string]: string };
+
   for (const translateType of translateTypes) {
     const directory = process.cwd() + '/src/translate/' + translateType.type;
     if (!existsSync(directory)) {
@@ -58,6 +31,39 @@ const apply = async () => {
       if (existsSync(readmePath)) {
         componentObject[translateType.markdown] = readFileSync(readmePath, { encoding: 'utf8' });
       }
+      await Promise.all(translateType.translateTarget.map(async (target: string) => {
+        if (componentObject[target]) {
+          await Promise.all(componentObject[target].map(async (ob: any) => {
+            if (ob[translateType.translateTargetKey]) {
+              const translateText = ob[translateType.translateTargetKey].replace(/\n/g, ' ');
+
+              // キャッシュデータにあるか確認
+              if (cacheTranslated.hasOwnProperty(translateText)) {
+                ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${cacheTranslated[translateText]}`;
+                return;
+              }
+
+              // 今回翻訳データにあるか確認
+              if (translatedNow.hasOwnProperty(ob[translateType.translateTargetKey])) {
+                ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translatedNow[translateText]}`;
+                return;
+              }
+
+              const response = await translate({
+                free_api: true,
+                text: translateText,
+                source_lang: DeeplConfig.fromLanguage,
+                target_lang: DeeplConfig.toLanguage,
+                auth_key: process.env.DEEPLAUTHKEY,
+              });
+              const translated = response.data.translations[0].text;
+              translatedNow[translateText] = translated;
+
+              ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translated}`;
+            }
+          }));
+        }
+      }));
       componentsObject.push(componentObject);
     }
     let resource = translateType.resource;
@@ -70,6 +76,12 @@ const apply = async () => {
 
     writeFileSync(process.cwd() + '/scripts/data/translated-' + translateType.type + '.json', JSON.stringify(resource, null, 2), { encoding: 'utf8' });
   }
+
+  // 翻訳データの結合
+  const writeTranslateCache = {
+    cache: Object.assign(cacheTranslated, translatedNow)
+  };
+  writeFileSync(process.cwd() + '/scripts/data/translated-cache.json', JSON.stringify(writeTranslateCache, null, 2), { encoding: 'utf8' });
 };
 
 const create = async () => {
diff --git a/scripts/build-translate/translate-type.ts b/scripts/build-translate/translate-type.ts
new file mode 100644
index 00000000000..e4a79044778
--- /dev/null
+++ b/scripts/build-translate/translate-type.ts
@@ -0,0 +1,40 @@
+const fetch = require('node-fetch');
+import { commands } from '../data/cli.json';
+
+export const getTranslateType = async () => {
+  const response = await fetch('https://unpkg.com/@ionic/docs/core.json');
+  const { components } = await response.json();
+
+  return [
+    {
+      type: 'api',
+      contents: components,
+      key: 'tag',
+      contentsKey: 'components',
+      markdown: 'docs',
+      translateTarget: ['props', 'methods', 'events', 'listeners', 'styles', 'slots', 'parts'],
+      translateTargetKey: 'docs',
+      resource: response,
+    },
+    {
+      type: 'cli',
+      contents: commands,
+      key: 'name',
+      contentsKey: 'commands',
+      markdown: 'description',
+      translateTarget: ["inputs"],
+      translateTargetKey: 'summary',
+      resource: require('../data/cli.json'),
+    },
+    {
+      type: 'native',
+      contents: require('../data/native.json'),
+      key: 'packageName',
+      contentsKey: '',
+      markdown: 'description',
+      translateTarget: [],
+      translateTargetKey: 'undefined',
+      resource: require('../data/native.json'),
+    }
+  ];
+}
diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 03837e5aa89..eb54ae78ab6 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -21,7 +21,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing.",
+          "docs": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing.\n\n自動翻訳: `true`の場合、アコーディオングループ内のすべてのアコーディオンが拡大・縮小時にアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -38,7 +38,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion group cannot be interacted with.",
+          "docs": "If `true`, the accordion group cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオングループと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -55,7 +55,7 @@
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": false,
-          "docs": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.",
+          "docs": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.\n\n自動翻訳: 各アコーディオンの拡張動作を記述する。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
           "docsTags": [],
           "default": "'compact'",
           "values": [
@@ -77,7 +77,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -98,7 +98,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time.",
+          "docs": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time.\n\n自動翻訳: `true`の場合、アコーディオングループは複数のアコーディオンコンポーネントを同時に展開することができます。",
           "docsTags": [],
           "values": [
             {
@@ -117,7 +117,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity.",
+          "docs": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity.\n\n自動翻訳: `true`の場合、アコーディオングループはインタラクティブに操作できないが、不透明度は変更されない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -134,7 +134,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the accordion group.",
+          "docs": "The value of the accordion group.\n\n自動翻訳: アコーディオングループの値です。",
           "docsTags": [],
           "values": [
             {
@@ -162,7 +162,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.",
+          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行される。",
           "docsTags": []
         }
       ],
@@ -219,7 +219,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion cannot be interacted with.",
+          "docs": "If `true`, the accordion cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオンは対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -236,7 +236,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -257,7 +257,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity.",
+          "docs": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity.\n\n自動翻訳: `true`の場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -274,7 +274,7 @@
           "mutable": false,
           "attr": "toggle-icon",
           "reflectToAttr": false,
-          "docs": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed.",
+          "docs": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed.\n\n自動翻訳: 使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。",
           "docsTags": [],
           "default": "chevronDown",
           "values": [
@@ -291,7 +291,7 @@
           "mutable": false,
           "attr": "toggle-icon-slot",
           "reflectToAttr": false,
-          "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.",
+          "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.\n\n自動翻訳: トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `'end'` です。",
           "docsTags": [],
           "default": "'end'",
           "values": [
@@ -313,7 +313,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the accordion. Defaults to an autogenerated\nvalue.",
+          "docs": "The value of the accordion. Defaults to an autogenerated\nvalue.\n\n自動翻訳: アコーディオンの値です。デフォルトは自動生成された値です。",
           "docsTags": [],
           "default": "`ion-accordion-${accordionIds++}`",
           "values": [
@@ -332,25 +332,25 @@
       "slots": [
         {
           "name": "content",
-          "docs": "Content is placed below the header and is\nshown or hidden based on expanded state."
+          "docs": "Content is placed below the header and is\nshown or hidden based on expanded state.\n\n自動翻訳: コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。"
         },
         {
           "name": "header",
-          "docs": "Content is placed at the top and is used to\nexpand or collapse the accordion item."
+          "docs": "Content is placed at the top and is used to\nexpand or collapse the accordion item.\n\n自動翻訳: コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。"
         }
       ],
       "parts": [
         {
           "name": "content",
-          "docs": "The wrapper element for the content slot."
+          "docs": "The wrapper element for the content slot.\n\n自動翻訳: コンテンツスロットのラッパー要素。"
         },
         {
           "name": "expanded",
-          "docs": "The expanded element. Can be used in combination\nwith the `header` and `content` parts (i.e. `::part(header expanded)`)."
+          "docs": "The expanded element. Can be used in combination\nwith the `header` and `content` parts (i.e. `::part(header expanded)`).\n\n自動翻訳: 拡張された要素です。ヘッダ`とコンテンツ`の部分と組み合わせて使用することができます（例：`::part(header expanded)`）。"
         },
         {
           "name": "header",
-          "docs": "The wrapper element for the header slot."
+          "docs": "The wrapper element for the header slot.\n\n自動翻訳: ヘッダースロットのラッパーの要素です。"
         }
       ],
       "dependents": [],
@@ -382,7 +382,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will animate.",
+          "docs": "If `true`, the action sheet will animate.\n\n自動翻訳: `true`の場合、アクションシートはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -399,7 +399,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will be dismissed when the backdrop is clicked.",
+          "docs": "If `true`, the action sheet will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとアクションシートが解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -415,7 +415,7 @@
           "type": "(string | ActionSheetButton<any>)[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An array of buttons for the action sheet.",
+          "docs": "An array of buttons for the action sheet.\n\n自動翻訳: アクションシートのボタンの配列です。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -435,7 +435,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
+          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -456,7 +456,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the action sheet is presented.",
+          "docs": "Animation to use when the action sheet is presented.\n\n自動翻訳: アクションシートの提示時に使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -475,7 +475,7 @@
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
-          "docs": "Title for the action sheet.",
+          "docs": "Title for the action sheet.\n\n自動翻訳: アクションシートのタイトルです。",
           "docsTags": [],
           "values": [
             {
@@ -493,7 +493,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the action sheet.",
+          "docs": "Additional attributes to pass to the action sheet.\n\n自動翻訳: アクションシートに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -512,7 +512,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -528,7 +528,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the action sheet is dismissed.",
+          "docs": "Animation to use when the action sheet is dismissed.\n\n自動翻訳: アクションシートが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -547,7 +547,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -568,7 +568,7 @@
           "mutable": false,
           "attr": "sub-header",
           "reflectToAttr": false,
-          "docs": "Subtitle for the action sheet.",
+          "docs": "Subtitle for the action sheet.\n\n自動翻訳: アクションシートのサブタイトルです。",
           "docsTags": [],
           "values": [
             {
@@ -587,7 +587,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アクションシートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -608,7 +608,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the action sheet overlay after it has been presented.",
+          "docs": "Dismiss the action sheet overlay after it has been presented.\n\n自動翻訳: アクションシートのオーバーレイが提示された後、それを解除する。",
           "docsTags": [
             {
               "name": "param",
@@ -628,7 +628,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the action sheet did dismiss.",
+          "docs": "Returns a promise that resolves when the action sheet did dismiss.\n\n自動翻訳: アクションシートが解散したときに解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -639,7 +639,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the action sheet will dismiss.",
+          "docs": "Returns a promise that resolves when the action sheet will dismiss.\n\n自動翻訳: アクションシートが解散するタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -650,7 +650,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the action sheet overlay after it has been created.",
+          "docs": "Present the action sheet overlay after it has been created.\n\n自動翻訳: アクションシートのオーバーレイを作成後に提示する。",
           "docsTags": []
         }
       ],
@@ -661,7 +661,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has dismissed.",
+          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発せられる。",
           "docsTags": []
         },
         {
@@ -670,7 +670,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has presented.",
+          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発せられる。",
           "docsTags": []
         },
         {
@@ -679,7 +679,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has dismissed.",
+          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発せられる。",
           "docsTags": []
         },
         {
@@ -688,7 +688,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has presented.",
+          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発せられる。",
           "docsTags": []
         }
       ],
@@ -697,117 +697,117 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop"
+          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the action sheet group"
+          "docs": "Background of the action sheet group\n\n自動翻訳: アクションシートグループの背景"
         },
         {
           "name": "--button-background",
           "annotation": "prop",
-          "docs": "Background of the action sheet button"
+          "docs": "Background of the action sheet button\n\n自動翻訳: アクションシートボタンの背景"
         },
         {
           "name": "--button-background-activated",
           "annotation": "prop",
-          "docs": "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple."
+          "docs": "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: アクションシートボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
         },
         {
           "name": "--button-background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the action sheet button background when pressed"
+          "docs": "Opacity of the action sheet button background when pressed\n\n自動翻訳: アクションシートボタンが押されたときの背景の不透明度"
         },
         {
           "name": "--button-background-focused",
           "annotation": "prop",
-          "docs": "Background of the action sheet button when tabbed to"
+          "docs": "Background of the action sheet button when tabbed to\n\n自動翻訳: にタブしたときのアクションシートボタンの背景。"
         },
         {
           "name": "--button-background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the action sheet button background when tabbed to"
+          "docs": "Opacity of the action sheet button background when tabbed to\n\n自動翻訳: にタブしたときのアクションシートボタンの背景の不透明度。"
         },
         {
           "name": "--button-background-hover",
           "annotation": "prop",
-          "docs": "Background of the action sheet button on hover"
+          "docs": "Background of the action sheet button on hover\n\n自動翻訳: ホバー時のアクションシートボタンの背景"
         },
         {
           "name": "--button-background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the action sheet button background on hover"
+          "docs": "Opacity of the action sheet button background on hover\n\n自動翻訳: ホバー時のアクションシートボタンの背景の不透明度"
         },
         {
           "name": "--button-background-selected",
           "annotation": "prop",
-          "docs": "Background of the selected action sheet button"
+          "docs": "Background of the selected action sheet button\n\n自動翻訳: 選択したアクションシートボタンの背景"
         },
         {
           "name": "--button-background-selected-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the selected action sheet button background"
+          "docs": "Opacity of the selected action sheet button background\n\n自動翻訳: 選択されたアクションシートボタンの背景の不透明度"
         },
         {
           "name": "--button-color",
           "annotation": "prop",
-          "docs": "Color of the action sheet button"
+          "docs": "Color of the action sheet button\n\n自動翻訳: アクションシートボタンの色"
         },
         {
           "name": "--button-color-activated",
           "annotation": "prop",
-          "docs": "Color of the action sheet button when pressed"
+          "docs": "Color of the action sheet button when pressed\n\n自動翻訳: アクションシートボタンが押されたときの色"
         },
         {
           "name": "--button-color-focused",
           "annotation": "prop",
-          "docs": "Color of the action sheet button when tabbed to"
+          "docs": "Color of the action sheet button when tabbed to\n\n自動翻訳: にタブで移動したときのアクションシートのボタンの色。"
         },
         {
           "name": "--button-color-hover",
           "annotation": "prop",
-          "docs": "Color of the action sheet button on hover"
+          "docs": "Color of the action sheet button on hover\n\n自動翻訳: ホバー時のアクションシートボタンの色"
         },
         {
           "name": "--button-color-selected",
           "annotation": "prop",
-          "docs": "Color of the selected action sheet button"
+          "docs": "Color of the selected action sheet button\n\n自動翻訳: 選択されたアクションシートのボタンの色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the action sheet text"
+          "docs": "Color of the action sheet text\n\n自動翻訳: アクションシートテキストの色"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "height of the action sheet"
+          "docs": "height of the action sheet\n\n自動翻訳: アクションシートの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the action sheet"
+          "docs": "Maximum height of the action sheet\n\n自動翻訳: アクションシートの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the action sheet"
+          "docs": "Maximum width of the action sheet\n\n自動翻訳: アクションシートの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the action sheet"
+          "docs": "Minimum height of the action sheet\n\n自動翻訳: アクションシートの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the action sheet"
+          "docs": "Minimum width of the action sheet\n\n自動翻訳: アクションシートの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the action sheet"
+          "docs": "Width of the action sheet\n\n自動翻訳: アクションシートの横幅"
         }
       ],
       "slots": [],
@@ -850,7 +850,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will animate.",
+          "docs": "If `true`, the alert will animate.\n\n自動翻訳: `true`の場合、アラートはアニメーションで表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -867,7 +867,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will be dismissed when the backdrop is clicked.",
+          "docs": "If `true`, the alert will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとアラートが解除される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -883,7 +883,7 @@
           "type": "(string | AlertButton)[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of buttons to be added to the alert.",
+          "docs": "Array of buttons to be added to the alert.\n\n自動翻訳: アラートに追加されるボタンの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -903,7 +903,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
+          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -924,7 +924,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the alert is presented.",
+          "docs": "Animation to use when the alert is presented.\n\n自動翻訳: アラート提示時に使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -943,7 +943,7 @@
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
-          "docs": "The main title in the heading of the alert.",
+          "docs": "The main title in the heading of the alert.\n\n自動翻訳: アラートの見出しにあるメインタイトルです。",
           "docsTags": [],
           "values": [
             {
@@ -961,7 +961,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the alert.",
+          "docs": "Additional attributes to pass to the alert.\n\n自動翻訳: アラートに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -979,7 +979,7 @@
           "type": "AlertInput[]",
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "Array of input to show in the alert.",
+          "docs": "Array of input to show in the alert.\n\n自動翻訳: アラートに表示する入力の配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -996,7 +996,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1012,7 +1012,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the alert is dismissed.",
+          "docs": "Animation to use when the alert is dismissed.\n\n自動翻訳: アラートが解除されたときに使用するアニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -1031,7 +1031,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+          "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "values": [
             {
@@ -1053,7 +1053,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1074,7 +1074,7 @@
           "mutable": false,
           "attr": "sub-header",
           "reflectToAttr": false,
-          "docs": "The subtitle in the heading of the alert. Displayed under the title.",
+          "docs": "The subtitle in the heading of the alert. Displayed under the title.\n\n自動翻訳: アラートの見出しにあるサブタイトルです。タイトルの下に表示されます。",
           "docsTags": [],
           "values": [
             {
@@ -1093,7 +1093,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アラートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1114,7 +1114,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the alert overlay after it has been presented.",
+          "docs": "Dismiss the alert overlay after it has been presented.\n\n自動翻訳: アラートオーバーレイが表示された後、解除する。",
           "docsTags": [
             {
               "name": "param",
@@ -1134,7 +1134,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the alert did dismiss.",
+          "docs": "Returns a promise that resolves when the alert did dismiss.\n\n自動翻訳: アラートが解除されたことを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -1145,7 +1145,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the alert will dismiss.",
+          "docs": "Returns a promise that resolves when the alert will dismiss.\n\n自動翻訳: アラートが解除されるタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -1156,7 +1156,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the alert overlay after it has been created.",
+          "docs": "Present the alert overlay after it has been created.\n\n自動翻訳: アラートオーバーレイを作成した後に提示する。",
           "docsTags": []
         }
       ],
@@ -1167,7 +1167,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has dismissed.",
+          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発せられる。",
           "docsTags": []
         },
         {
@@ -1176,7 +1176,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has presented.",
+          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発せられる。",
           "docsTags": []
         },
         {
@@ -1185,7 +1185,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has dismissed.",
+          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発せられる。",
           "docsTags": []
         },
         {
@@ -1194,7 +1194,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has presented.",
+          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発せられる。",
           "docsTags": []
         }
       ],
@@ -1210,42 +1210,42 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop"
+          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the alert"
+          "docs": "Background of the alert\n\n自動翻訳: 注意喚起の背景"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the alert"
+          "docs": "Height of the alert\n\n自動翻訳: アラートの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the alert"
+          "docs": "Maximum height of the alert\n\n自動翻訳: アラートの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the alert"
+          "docs": "Maximum width of the alert\n\n自動翻訳: アラートの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the alert"
+          "docs": "Minimum height of the alert\n\n自動翻訳: アラートの最低高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the alert"
+          "docs": "Minimum width of the alert\n\n自動翻訳: アラートの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the alert"
+          "docs": "Width of the alert\n\n自動翻訳: アラートの幅"
         }
       ],
       "slots": [],
@@ -1300,7 +1300,7 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the avatar and inner image"
+          "docs": "Border radius of the avatar and inner image\n\n自動翻訳: アバターとインナーイメージの境界半径"
         }
       ],
       "slots": [],
@@ -1340,7 +1340,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -1395,7 +1395,7 @@
           "mutable": true,
           "attr": "default-href",
           "reflectToAttr": false,
-          "docs": "The url to navigate back to by default when there is no history.",
+          "docs": "The url to navigate back to by default when there is no history.\n\n自動翻訳: 履歴がない場合に、デフォルトで戻るためのURL。",
           "docsTags": [],
           "values": [
             {
@@ -1414,7 +1414,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.",
+          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1431,7 +1431,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button.",
+          "docs": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button.\n\n自動翻訳: 戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定する。",
           "docsTags": [],
           "values": [
             {
@@ -1453,7 +1453,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1473,7 +1473,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page.",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page.\n\n自動翻訳: ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -1492,7 +1492,7 @@
           "mutable": false,
           "attr": "text",
           "reflectToAttr": false,
-          "docs": "The text to display in the back button.",
+          "docs": "The text to display in the back button.\n\n自動翻訳: バックボタンに表示するテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -1514,7 +1514,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.",
+          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -1542,177 +1542,177 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the button"
+          "docs": "Background of the button\n\n自動翻訳: ボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the button when focused with the tab key"
+          "docs": "Background of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background when focused with the tab key"
+          "docs": "Opacity of the button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the button on hover"
+          "docs": "Background of the button on hover\n\n自動翻訳: ホバー時のボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background on hover"
+          "docs": "Opacity of the background on hover\n\n自動翻訳: ホバー時の背景の不透明度"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the button"
+          "docs": "Border radius of the button\n\n自動翻訳: ボタンの境界半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the button"
+          "docs": "Text color of the button\n\n自動翻訳: ボタンの文字色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the button when focused with the tab key"
+          "docs": "Text color of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの文字色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the button on hover"
+          "docs": "Text color of the button on hover\n\n自動翻訳: ホバー時のボタンの文字色"
         },
         {
           "name": "--icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the button icon"
+          "docs": "Font size of the button icon\n\n自動翻訳: ボタンアイコンのフォントサイズ"
         },
         {
           "name": "--icon-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the button icon"
+          "docs": "Font weight of the button icon\n\n自動翻訳: ボタンアイコンのフォントの太さ"
         },
         {
           "name": "--icon-margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the button icon"
+          "docs": "Bottom margin of the button icon\n\n自動翻訳: ボタンアイコンの下端マージン"
         },
         {
           "name": "--icon-margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon"
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合は右マージン、右から左の場合は左マージン"
         },
         {
           "name": "--icon-margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon"
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合は左マージン、右から左の場合は右マージン"
         },
         {
           "name": "--icon-margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the button icon"
+          "docs": "Top margin of the button icon\n\n自動翻訳: ボタンアイコンの上マージン"
         },
         {
           "name": "--icon-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button icon"
+          "docs": "Bottom padding of the button icon\n\n自動翻訳: ボタンアイコンの下パディング"
         },
         {
           "name": "--icon-padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。"
         },
         {
           "name": "--icon-padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。"
         },
         {
           "name": "--icon-padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button icon"
+          "docs": "Top padding of the button icon\n\n自動翻訳: ボタンアイコンの上部パディング"
         },
         {
           "name": "--margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the button"
+          "docs": "Bottom margin of the button\n\n自動翻訳: ボタンの下端マージン"
         },
         {
           "name": "--margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button"
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右マージン、右から左の場合は左マージン"
         },
         {
           "name": "--margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button"
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左マージン、右から左の場合は右マージン"
         },
         {
           "name": "--margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the button"
+          "docs": "Top margin of the button\n\n自動翻訳: ボタンの上マージン"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the button"
+          "docs": "Minimum height of the button\n\n自動翻訳: ボタンの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the button"
+          "docs": "Minimum width of the button\n\n自動翻訳: ボタンの最小幅"
         },
         {
           "name": "--opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button"
+          "docs": "Opacity of the button\n\n自動翻訳: ボタンの不透明度"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect"
+          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the button"
+          "docs": "Transition of the button\n\n自動翻訳: ボタンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "icon",
-          "docs": "The back button icon (uses ion-icon)."
+          "docs": "The back button icon (uses ion-icon).\n\n自動翻訳: 戻るボタンのアイコン（ion-iconを使用）。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button element that wraps all child elements."
+          "docs": "The native HTML button element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。"
         },
         {
           "name": "text",
-          "docs": "The back button text."
+          "docs": "The back button text.\n\n自動翻訳: 戻るボタンのテキストです。"
         }
       ],
       "dependents": [],
@@ -1741,7 +1741,7 @@
           "mutable": false,
           "attr": "stop-propagation",
           "reflectToAttr": false,
-          "docs": "If `true`, the backdrop will stop propagation on tap.",
+          "docs": "If `true`, the backdrop will stop propagation on tap.\n\n自動翻訳: `true`の場合、バックドロップはタップ時に伝搬を停止します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1758,7 +1758,7 @@
           "mutable": false,
           "attr": "tappable",
           "reflectToAttr": false,
-          "docs": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.",
+          "docs": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.\n\n自動翻訳: `true`の場合、背景をクリックすることができ、`ionBackdropTap`イベントを発生させます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1775,7 +1775,7 @@
           "mutable": false,
           "attr": "visible",
           "reflectToAttr": false,
-          "docs": "If `true`, the backdrop will be visible.",
+          "docs": "If `true`, the backdrop will be visible.\n\n自動翻訳: `true`の場合、バックドロップが表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1795,7 +1795,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the backdrop is tapped.",
+          "docs": "Emitted when the backdrop is tapped.\n\n自動翻訳: バックドロップがタップされたときに発せられる。",
           "docsTags": []
         }
       ],
@@ -1862,7 +1862,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -1917,7 +1917,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1940,32 +1940,32 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the badge"
+          "docs": "Background of the badge\n\n自動翻訳: バッジの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the badge"
+          "docs": "Text color of the badge\n\n自動翻訳: バッジの文字色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the badge"
+          "docs": "Bottom padding of the badge\n\n自動翻訳: バッジの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the badge"
+          "docs": "Top padding of the badge\n\n自動翻訳: バッジの上部パディング"
         }
       ],
       "slots": [],
@@ -2005,7 +2005,7 @@
           "mutable": false,
           "attr": "active",
           "reflectToAttr": false,
-          "docs": "If `true`, the breadcrumb will take on a different look to show that\nit is the currently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any.",
+          "docs": "If `true`, the breadcrumb will take on a different look to show that\nit is the currently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any.\n\n自動翻訳: `true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2022,7 +2022,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2077,7 +2077,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the breadcrumb.",
+          "docs": "If `true`, the user cannot interact with the breadcrumb.\n\n自動翻訳: `true`の場合、ユーザーはパンくずと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2094,7 +2094,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
+          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -2113,7 +2113,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -2132,7 +2132,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2153,7 +2153,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -2171,7 +2171,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
           "docsTags": [],
           "values": [
             {
@@ -2190,7 +2190,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -2216,7 +2216,7 @@
           "mutable": false,
           "attr": "separator",
           "reflectToAttr": false,
-          "docs": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.",
+          "docs": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.\n\n自動翻訳: trueの場合、このパンくずと次のパンくずの間にセパレータを表示する。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
           "docsTags": [],
           "values": [
             {
@@ -2235,7 +2235,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -2257,7 +2257,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the breadcrumb loses focus.",
+          "docs": "Emitted when the breadcrumb loses focus.\n\n自動翻訳: パンくずのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -2266,7 +2266,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the breadcrumb has focus.",
+          "docs": "Emitted when the breadcrumb has focus.\n\n自動翻訳: パンくずがフォーカスされたときに発せられる。",
           "docsTags": []
         }
       ],
@@ -2275,42 +2275,42 @@
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background color of the breadcrumb when focused"
+          "docs": "Background color of the breadcrumb when focused\n\n自動翻訳: フォーカス時のパンくずの背景色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the breadcrumb"
+          "docs": "Text color of the breadcrumb\n\n自動翻訳: パンくずの文字色"
         },
         {
           "name": "--color-active",
           "annotation": "prop",
-          "docs": "Text color of the active breadcrumb"
+          "docs": "Text color of the active breadcrumb\n\n自動翻訳: アクティブなパンくずのテキスト色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the breadcrumb when focused"
+          "docs": "Text color of the breadcrumb when focused\n\n自動翻訳: フォーカスされたときのパンくずのテキスト色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the breadcrumb on hover"
+          "docs": "Text color of the breadcrumb on hover\n\n自動翻訳: ホバー時のパンくずのテキスト色"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "collapsed-indicator",
-          "docs": "The indicator element that shows the breadcrumbs are collapsed."
+          "docs": "The indicator element that shows the breadcrumbs are collapsed.\n\n自動翻訳: パンくずが折りたたまれていることを示すインジケーター要素です。"
         },
         {
           "name": "native",
-          "docs": "The native HTML anchor or div element that wraps all child elements."
+          "docs": "The native HTML anchor or div element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブHTMLのアンカーまたはdiv要素です。"
         },
         {
           "name": "separator",
-          "docs": "The separator element between each breadcrumb."
+          "docs": "The separator element between each breadcrumb.\n\n自動翻訳: 各パンくずの間のセパレータ要素です。"
         }
       ],
       "dependents": [],
@@ -2342,7 +2342,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2397,7 +2397,7 @@
           "mutable": false,
           "attr": "items-after-collapse",
           "reflectToAttr": false,
-          "docs": "The number of breadcrumbs to show after the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.",
+          "docs": "The number of breadcrumbs to show after the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.\n\n自動翻訳: 折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -2414,7 +2414,7 @@
           "mutable": false,
           "attr": "items-before-collapse",
           "reflectToAttr": false,
-          "docs": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.",
+          "docs": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.\n\n自動翻訳: 折りたたんだインジケータの前に表示するパンくずの数を指定する。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -2431,7 +2431,7 @@
           "mutable": false,
           "attr": "max-items",
           "reflectToAttr": false,
-          "docs": "The maximum number of breadcrumbs to show before collapsing.",
+          "docs": "The maximum number of breadcrumbs to show before collapsing.\n\n自動翻訳: 折りたたむ前に表示するパンくずの最大数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -2450,7 +2450,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2474,7 +2474,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the collapsed indicator is clicked on.",
+          "docs": "Emitted when the collapsed indicator is clicked on.\n\n自動翻訳: 折りたたみインジケータがクリックされたときに発する。",
           "docsTags": []
         }
       ],
@@ -2531,7 +2531,7 @@
           "mutable": true,
           "attr": "button-type",
           "reflectToAttr": false,
-          "docs": "The type of button.",
+          "docs": "The type of button.\n\n自動翻訳: ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -2548,7 +2548,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2603,7 +2603,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.",
+          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2620,7 +2620,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
+          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -2639,7 +2639,7 @@
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": true,
-          "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.",
+          "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.\n\n自動翻訳: 全角のボタンなら`\"block\"`、角が四角く左右のボーダーがない全角のボタンなら`\"full\"`に設定します。",
           "docsTags": [],
           "values": [
             {
@@ -2663,7 +2663,7 @@
           "mutable": true,
           "attr": "fill",
           "reflectToAttr": true,
-          "docs": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.",
+          "docs": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.\n\n自動翻訳: フラットなボタンに似た透明なボタンには `\"clear\"` を、ボーダーのある透明なボタンには `\"outline\"` を、背景を塗りつぶしたボタンには `\"solid\"` を設定します。デフォルトの塗りつぶしは `\"solid\"` です。ただし、ツールバーの内側では `\"clear\"` となります。",
           "docsTags": [],
           "values": [
             {
@@ -2695,7 +2695,7 @@
           "mutable": false,
           "attr": "form",
           "reflectToAttr": false,
-          "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
+          "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.\n\n自動翻訳: HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。",
           "docsTags": [],
           "values": [
             {
@@ -2717,7 +2717,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -2736,7 +2736,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2757,7 +2757,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -2775,7 +2775,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
           "docsTags": [],
           "values": [
             {
@@ -2794,7 +2794,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -2820,7 +2820,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": true,
-          "docs": "Set to `\"round\"` for a button with more rounded corners.",
+          "docs": "Set to `\"round\"` for a button with more rounded corners.\n\n自動翻訳: round\"` に設定すると、より角が丸いボタンになります。",
           "docsTags": [],
           "values": [
             {
@@ -2840,7 +2840,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": true,
-          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
+          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.\n\n自動翻訳: ボタンの高さとパディングが少ない場合は `\"small\"` に、ボタンの高さとパディングがデフォルトの場合は `\"default\"` に、ボタンの高さとパディングが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
           "docsTags": [],
           "values": [
             {
@@ -2868,7 +2868,7 @@
           "mutable": false,
           "attr": "strong",
           "reflectToAttr": false,
-          "docs": "If `true`, activates a button with a heavier font weight.",
+          "docs": "If `true`, activates a button with a heavier font weight.\n\n自動翻訳: `true`の場合、より重いフォントウェイトを持つボタンをアクティブにする。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2885,7 +2885,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -2904,7 +2904,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.",
+          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -2933,7 +2933,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button loses focus.",
+          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -2942,7 +2942,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button has focus.",
+          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発せられる。",
           "docsTags": []
         }
       ],
@@ -2951,141 +2951,141 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the button"
+          "docs": "Background of the button\n\n自動翻訳: ボタンの背景"
         },
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
+          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button when pressed"
+          "docs": "Opacity of the button when pressed\n\n自動翻訳: ボタンが押されたときの不透明度"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the button when focused with the tab key"
+          "docs": "Background of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button when focused with the tab key"
+          "docs": "Opacity of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the button on hover"
+          "docs": "Background of the button on hover\n\n自動翻訳: ホバー時のボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background on hover"
+          "docs": "Opacity of the background on hover\n\n自動翻訳: ホバー時の背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the button"
+          "docs": "Border color of the button\n\n自動翻訳: ボタンのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the button"
+          "docs": "Border radius of the button\n\n自動翻訳: ボタンの境界半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the button"
+          "docs": "Border style of the button\n\n自動翻訳: ボタンのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the button"
+          "docs": "Border width of the button\n\n自動翻訳: ボタンのボーダー幅"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the button"
+          "docs": "Box shadow of the button\n\n自動翻訳: ボタンのボックスシャドウ"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the button"
+          "docs": "Text color of the button\n\n自動翻訳: ボタンの文字色"
         },
         {
           "name": "--color-activated",
           "annotation": "prop",
-          "docs": "Text color of the button when pressed"
+          "docs": "Text color of the button when pressed\n\n自動翻訳: ボタンが押されたときの文字色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the button when focused with the tab key"
+          "docs": "Text color of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの文字色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the button when hover"
+          "docs": "Text color of the button when hover\n\n自動翻訳: ホバー時のボタンの文字色"
         },
         {
           "name": "--opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button"
+          "docs": "Opacity of the button\n\n自動翻訳: ボタンの不透明度"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect"
+          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the button"
+          "docs": "Transition of the button\n\n自動翻訳: ボタンの遷移"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot."
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the button text in LTR, and to the left in RTL."
+          "docs": "Content is placed to the right of the button text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。"
         },
         {
           "name": "icon-only",
-          "docs": "Should be used on an icon in a button that has no text."
+          "docs": "Should be used on an icon in a button that has no text.\n\n自動翻訳: テキストを持たないボタン内のアイコンに対して使用されるべきである。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the button text in LTR, and to the right in RTL."
+          "docs": "Content is placed to the left of the button text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button or anchor element that wraps all child elements."
+          "docs": "The native HTML button or anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
         }
       ],
       "dependents": [
@@ -3117,7 +3117,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
+          "docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` モードにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3164,7 +3164,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3209,7 +3209,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3264,7 +3264,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3285,7 +3285,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、カードヘッダは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3326,7 +3326,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3381,7 +3381,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3404,7 +3404,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the card subtitle"
+          "docs": "Color of the card subtitle\n\n自動翻訳: カードサブタイトルの色"
         }
       ],
       "slots": [],
@@ -3432,7 +3432,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3487,7 +3487,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3510,7 +3510,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the card title"
+          "docs": "Color of the card title\n\n自動翻訳: カードタイトルの色"
         }
       ],
       "slots": [],
@@ -3542,7 +3542,7 @@
           "mutable": false,
           "attr": "button",
           "reflectToAttr": false,
-          "docs": "If `true`, a button tag will be rendered and the card will be tappable.",
+          "docs": "If `true`, a button tag will be rendered and the card will be tappable.\n\n自動翻訳: `true`の場合、ボタンタグがレンダリングされ、カードはタップ可能になる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3559,7 +3559,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3614,7 +3614,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the card.",
+          "docs": "If `true`, the user cannot interact with the card.\n\n自動翻訳: `true`の場合、ユーザはカードと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3631,7 +3631,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
+          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -3650,7 +3650,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -3669,7 +3669,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3690,7 +3690,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -3708,7 +3708,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
           "docsTags": [],
           "values": [
             {
@@ -3727,7 +3727,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -3753,7 +3753,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -3772,7 +3772,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
+          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.\n\n自動翻訳: ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -3800,19 +3800,19 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the card"
+          "docs": "Background of the card\n\n自動翻訳: カードの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the card"
+          "docs": "Color of the card\n\n自動翻訳: カードの色"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button, anchor, or div element that wraps all child elements."
+          "docs": "The native HTML button, anchor, or div element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。"
         }
       ],
       "dependents": [],
@@ -3852,7 +3852,7 @@
           "mutable": true,
           "attr": "checked",
           "reflectToAttr": false,
-          "docs": "If `true`, the checkbox is selected.",
+          "docs": "If `true`, the checkbox is selected.\n\n自動翻訳: `true`の場合、チェックボックスが選択される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3869,7 +3869,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3924,7 +3924,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the checkbox.",
+          "docs": "If `true`, the user cannot interact with the checkbox.\n\n自動翻訳: `true`の場合、ユーザはチェックボックスと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3941,7 +3941,7 @@
           "mutable": true,
           "attr": "indeterminate",
           "reflectToAttr": false,
-          "docs": "If `true`, the checkbox will visually appear as indeterminate.",
+          "docs": "If `true`, the checkbox will visually appear as indeterminate.\n\n自動翻訳: `true`の場合、チェックボックスは視覚的に不定形と表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3958,7 +3958,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3979,7 +3979,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -3996,7 +3996,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`.",
+          "docs": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`.\n\n自動翻訳: チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。  チェックボックスの値は `<input type=\"checkbox\">` の値に似ており、チェックボックスがネイティブの `<form>` に参加する場合にのみ使用されます。",
           "docsTags": [],
           "default": "'on'",
           "values": [
@@ -4016,7 +4016,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checkbox loses focus.",
+          "docs": "Emitted when the checkbox loses focus.\n\n自動翻訳: チェックボックスのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -4025,7 +4025,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checked property has changed.",
+          "docs": "Emitted when the checked property has changed.\n\n自動翻訳: チェックされたプロパティが変更されたときに発行される。",
           "docsTags": []
         },
         {
@@ -4034,7 +4034,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checkbox has focus.",
+          "docs": "Emitted when the checkbox has focus.\n\n自動翻訳: チェックボックスにフォーカスが当たったときに発せられる。",
           "docsTags": []
         }
       ],
@@ -4043,68 +4043,68 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the checkbox icon"
+          "docs": "Background of the checkbox icon\n\n自動翻訳: チェックボックスアイコンの背景"
         },
         {
           "name": "--background-checked",
           "annotation": "prop",
-          "docs": "Background of the checkbox icon when checked"
+          "docs": "Background of the checkbox icon when checked\n\n自動翻訳: チェックしたときのチェックボックスアイコンの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the checkbox icon"
+          "docs": "Border color of the checkbox icon\n\n自動翻訳: チェックボックスアイコンのボーダーカラー"
         },
         {
           "name": "--border-color-checked",
           "annotation": "prop",
-          "docs": "Border color of the checkbox icon when checked"
+          "docs": "Border color of the checkbox icon when checked\n\n自動翻訳: チェックボックスのアイコンがチェックされたときのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the checkbox icon"
+          "docs": "Border radius of the checkbox icon\n\n自動翻訳: チェックボックスアイコンの境界半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the checkbox icon"
+          "docs": "Border style of the checkbox icon\n\n自動翻訳: チェックボックスアイコンのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the checkbox icon"
+          "docs": "Border width of the checkbox icon\n\n自動翻訳: チェックボックスアイコンのボーダー幅"
         },
         {
           "name": "--checkmark-color",
           "annotation": "prop",
-          "docs": "Color of the checkbox checkmark when checked"
+          "docs": "Color of the checkbox checkmark when checked\n\n自動翻訳: チェックボックスのチェックマークがチェックされたときの色"
         },
         {
           "name": "--checkmark-width",
           "annotation": "prop",
-          "docs": "Stroke width of the checkbox checkmark"
+          "docs": "Stroke width of the checkbox checkmark\n\n自動翻訳: チェックボックス・チェックマークのストローク幅"
         },
         {
           "name": "--size",
           "annotation": "prop",
-          "docs": "Size of the checkbox icon"
+          "docs": "Size of the checkbox icon\n\n自動翻訳: チェックボックスのアイコンの大きさ"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the checkbox icon"
+          "docs": "Transition of the checkbox icon\n\n自動翻訳: チェックボックスアイコンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "container",
-          "docs": "The container for the checkbox mark."
+          "docs": "The container for the checkbox mark.\n\n自動翻訳: チェックボックスマークのコンテナです。"
         },
         {
           "name": "mark",
-          "docs": "The checkmark used to indicate the checked state."
+          "docs": "The checkmark used to indicate the checked state.\n\n自動翻訳: チェックされた状態を示すために使用されるチェックマークです。"
         }
       ],
       "dependents": [
@@ -4136,7 +4136,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -4191,7 +4191,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the chip.",
+          "docs": "If `true`, the user cannot interact with the chip.\n\n自動翻訳: `true`の場合、ユーザはチップと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4208,7 +4208,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -4229,7 +4229,7 @@
           "mutable": false,
           "attr": "outline",
           "reflectToAttr": false,
-          "docs": "Display an outline style button.",
+          "docs": "Display an outline style button.\n\n自動翻訳: アウトラインスタイルボタンを表示する。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4248,12 +4248,12 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the chip"
+          "docs": "Background of the chip\n\n自動翻訳: チップの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the chip"
+          "docs": "Color of the chip\n\n自動翻訳: チップの色"
         }
       ],
       "slots": [],
@@ -4282,7 +4282,7 @@
           "mutable": false,
           "attr": "offset",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.",
+          "docs": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.\n\n自動翻訳: オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4301,7 +4301,7 @@
           "mutable": false,
           "attr": "offset-lg",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: Lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4320,7 +4320,7 @@
           "mutable": false,
           "attr": "offset-md",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4339,7 +4339,7 @@
           "mutable": false,
           "attr": "offset-sm",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4358,7 +4358,7 @@
           "mutable": false,
           "attr": "offset-xl",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4377,7 +4377,7 @@
           "mutable": false,
           "attr": "offset-xs",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4396,7 +4396,7 @@
           "mutable": false,
           "attr": "pull",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.",
+          "docs": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.\n\n自動翻訳: 列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4415,7 +4415,7 @@
           "mutable": false,
           "attr": "pull-lg",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.",
+          "docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: LGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4434,7 +4434,7 @@
           "mutable": false,
           "attr": "pull-md",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.",
+          "docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4453,7 +4453,7 @@
           "mutable": false,
           "attr": "pull-sm",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.",
+          "docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4472,7 +4472,7 @@
           "mutable": false,
           "attr": "pull-xl",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.",
+          "docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4491,7 +4491,7 @@
           "mutable": false,
           "attr": "pull-xs",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.",
+          "docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4510,7 +4510,7 @@
           "mutable": false,
           "attr": "push",
           "reflectToAttr": false,
-          "docs": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.",
+          "docs": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.\n\n自動翻訳: カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4529,7 +4529,7 @@
           "mutable": false,
           "attr": "push-lg",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: LGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4548,7 +4548,7 @@
           "mutable": false,
           "attr": "push-md",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4567,7 +4567,7 @@
           "mutable": false,
           "attr": "push-sm",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4586,7 +4586,7 @@
           "mutable": false,
           "attr": "push-xl",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4605,7 +4605,7 @@
           "mutable": false,
           "attr": "push-xs",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
+          "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定する。",
           "docsTags": [],
           "values": [
             {
@@ -4624,7 +4624,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.",
+          "docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4643,7 +4643,7 @@
           "mutable": false,
           "attr": "size-lg",
           "reflectToAttr": false,
-          "docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
+          "docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4662,7 +4662,7 @@
           "mutable": false,
           "attr": "size-md",
           "reflectToAttr": false,
-          "docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
+          "docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4681,7 +4681,7 @@
           "mutable": false,
           "attr": "size-sm",
           "reflectToAttr": false,
-          "docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
+          "docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4700,7 +4700,7 @@
           "mutable": false,
           "attr": "size-xl",
           "reflectToAttr": false,
-          "docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
+          "docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4719,7 +4719,7 @@
           "mutable": false,
           "attr": "size-xs",
           "reflectToAttr": false,
-          "docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.",
+          "docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
           "docsTags": [],
           "values": [
             {
@@ -4747,37 +4747,37 @@
         {
           "name": "--ion-grid-column-padding",
           "annotation": "prop",
-          "docs": "Padding for the Column"
+          "docs": "Padding for the Column\n\n自動翻訳: カラムのパディング"
         },
         {
           "name": "--ion-grid-column-padding-lg",
           "annotation": "prop",
-          "docs": "Padding for the Column on lg screens and up"
+          "docs": "Padding for the Column on lg screens and up\n\n自動翻訳: LG以上の画面でのコラムのパディング"
         },
         {
           "name": "--ion-grid-column-padding-md",
           "annotation": "prop",
-          "docs": "Padding for the Column on md screens and up"
+          "docs": "Padding for the Column on md screens and up\n\n自動翻訳: mdスクリーン以上のカラムのパディングについて"
         },
         {
           "name": "--ion-grid-column-padding-sm",
           "annotation": "prop",
-          "docs": "Padding for the Column on sm screens and up"
+          "docs": "Padding for the Column on sm screens and up\n\n自動翻訳: スマートフォン以上の画面では、コラムにパッドを入れる。"
         },
         {
           "name": "--ion-grid-column-padding-xl",
           "annotation": "prop",
-          "docs": "Padding for the Column on xl screens and up"
+          "docs": "Padding for the Column on xl screens and up\n\n自動翻訳: XL以上の画面でのカラムのパディングについて"
         },
         {
           "name": "--ion-grid-column-padding-xs",
           "annotation": "prop",
-          "docs": "Padding for the Column on xs screens and up"
+          "docs": "Padding for the Column on xs screens and up\n\n自動翻訳: xsスクリーン以上のカラムのパディングについて"
         },
         {
           "name": "--ion-grid-columns",
           "annotation": "prop",
-          "docs": "The number of total Columns in the Grid"
+          "docs": "The number of total Columns in the Grid\n\n自動翻訳: グリッドのカラムの総数"
         }
       ],
       "slots": [],
@@ -4817,7 +4817,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -4872,7 +4872,7 @@
           "mutable": true,
           "attr": "force-overscroll",
           "reflectToAttr": false,
-          "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting.",
+          "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting.\n\n自動翻訳: `true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。",
           "docsTags": [],
           "values": [
             {
@@ -4891,7 +4891,7 @@
           "mutable": false,
           "attr": "fullscreen",
           "reflectToAttr": false,
-          "docs": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent.",
+          "docs": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent.\n\n自動翻訳: `true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4908,7 +4908,7 @@
           "mutable": false,
           "attr": "scroll-events",
           "reflectToAttr": false,
-          "docs": "Because of performance reasons, ionScroll events are disabled by default, in order to enable them\nand start listening from (ionScroll), set this property to `true`.",
+          "docs": "Because of performance reasons, ionScroll events are disabled by default, in order to enable them\nand start listening from (ionScroll), set this property to `true`.\n\n自動翻訳: パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4925,7 +4925,7 @@
           "mutable": false,
           "attr": "scroll-x",
           "reflectToAttr": false,
-          "docs": "If you want to enable the content scrolling in the X axis, set this property to `true`.",
+          "docs": "If you want to enable the content scrolling in the X axis, set this property to `true`.\n\n自動翻訳: X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4942,7 +4942,7 @@
           "mutable": false,
           "attr": "scroll-y",
           "reflectToAttr": false,
-          "docs": "If you want to disable the content scrolling in the Y axis, set this property to `false`.",
+          "docs": "If you want to disable the content scrolling in the Y axis, set this property to `false`.\n\n自動翻訳: Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -4963,7 +4963,7 @@
           },
           "signature": "getScrollElement() => Promise<HTMLElement>",
           "parameters": [],
-          "docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `ion-content`:\n\ni.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events\nand `scrollToPoint()` to scroll the content into a certain point.",
+          "docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `ion-content`:\n\ni.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events\nand `scrollToPoint()` to scroll the content into a certain point.\n\n自動翻訳: 実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。",
           "docsTags": []
         },
         {
@@ -4974,7 +4974,7 @@
           },
           "signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll by a specified X/Y distance in the component.",
+          "docs": "Scroll by a specified X/Y distance in the component.\n\n自動翻訳: コンポーネントを指定したX/Y距離だけスクロールさせる。",
           "docsTags": [
             {
               "name": "param",
@@ -4998,7 +4998,7 @@
           },
           "signature": "scrollToBottom(duration?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll to the bottom of the component.",
+          "docs": "Scroll to the bottom of the component.\n\n自動翻訳: コンポーネントの一番下までスクロールします。",
           "docsTags": [
             {
               "name": "param",
@@ -5014,7 +5014,7 @@
           },
           "signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll to a specified X/Y location in the component.",
+          "docs": "Scroll to a specified X/Y location in the component.\n\n自動翻訳: コンポーネント内の指定したX/Y位置までスクロールする。",
           "docsTags": [
             {
               "name": "param",
@@ -5038,7 +5038,7 @@
           },
           "signature": "scrollToTop(duration?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll to the top of the component.",
+          "docs": "Scroll to the top of the component.\n\n自動翻訳: コンポーネントの上部にスクロールします。",
           "docsTags": [
             {
               "name": "param",
@@ -5054,7 +5054,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
+          "docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロール中に発せられる。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
           "docsTags": []
         },
         {
@@ -5063,7 +5063,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
+          "docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロールが終了したときに発せられる。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
           "docsTags": []
         },
         {
@@ -5072,7 +5072,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the scroll has started. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
+          "docs": "Emitted when the scroll has started. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。",
           "docsTags": []
         }
       ],
@@ -5094,67 +5094,67 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the content"
+          "docs": "Background of the content\n\n自動翻訳: コンテンツの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the content"
+          "docs": "Color of the content\n\n自動翻訳: コンテンツの色"
         },
         {
           "name": "--keyboard-offset",
           "annotation": "prop",
-          "docs": "Keyboard offset of the content"
+          "docs": "Keyboard offset of the content\n\n自動翻訳: コンテンツのキーボードオフセット"
         },
         {
           "name": "--offset-bottom",
           "annotation": "prop",
-          "docs": "Offset bottom of the content"
+          "docs": "Offset bottom of the content\n\n自動翻訳: コンテンツのオフセットボトム"
         },
         {
           "name": "--offset-top",
           "annotation": "prop",
-          "docs": "Offset top of the content"
+          "docs": "Offset top of the content\n\n自動翻訳: コンテンツのオフセットトップ"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the content"
+          "docs": "Bottom padding of the content\n\n自動翻訳: コンテンツのボトムパディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the content"
+          "docs": "Top padding of the content\n\n自動翻訳: コンテンツのトップパディング"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed in the scrollable area if provided without a slot."
+          "docs": "Content is placed in the scrollable area if provided without a slot.\n\n自動翻訳: スロットなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。"
         },
         {
           "name": "fixed",
-          "docs": "Should be used for fixed content that should not scroll."
+          "docs": "Should be used for fixed content that should not scroll.\n\n自動翻訳: スクロールしてはいけない固定コンテンツに使用する必要があります。"
         }
       ],
       "parts": [
         {
           "name": "background",
-          "docs": "The background of the content."
+          "docs": "The background of the content.\n\n自動翻訳: コンテンツの背景です。"
         },
         {
           "name": "scroll",
-          "docs": "The scrollable container of the content."
+          "docs": "The scrollable container of the content.\n\n自動翻訳: コンテンツのスクロール可能なコンテナ。"
         }
       ],
       "dependents": [],
@@ -5192,7 +5192,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "default": "'primary'",
           "values": [
@@ -5248,7 +5248,7 @@
           "mutable": false,
           "attr": "datetime",
           "reflectToAttr": false,
-          "docs": "The ID of the `ion-datetime` instance\nassociated with the datetime button.",
+          "docs": "The ID of the `ion-datetime` instance\nassociated with the datetime button.\n\n自動翻訳: datetime ボタンに関連付けられた `ion-datetime` インスタンスの ID。",
           "docsTags": [],
           "values": [
             {
@@ -5267,7 +5267,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.",
+          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5284,7 +5284,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -5307,17 +5307,17 @@
       "slots": [
         {
           "name": "date-target",
-          "docs": "Content displayed inside of the date button."
+          "docs": "Content displayed inside of the date button.\n\n自動翻訳: 日付ボタンの内側に表示されるコンテンツです。"
         },
         {
           "name": "time-target",
-          "docs": "Content displayed inside of the time button."
+          "docs": "Content displayed inside of the time button.\n\n自動翻訳: 時刻ボタンの内側に表示される内容。"
         }
       ],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button that wraps the slotted text."
+          "docs": "The native HTML button that wraps the slotted text.\n\n自動翻訳: スロットされたテキストをラップするネイティブHTMLボタンです。"
         }
       ],
       "dependents": [],
@@ -5361,7 +5361,7 @@
           "mutable": false,
           "attr": "cancel-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the picker's cancel button.",
+          "docs": "The text to display on the picker's cancel button.\n\n自動翻訳: ピッカーのキャンセルボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [
@@ -5378,7 +5378,7 @@
           "mutable": false,
           "attr": "clear-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the picker's \"Clear\" button.",
+          "docs": "The text to display on the picker's \"Clear\" button.\n\n自動翻訳: ピッカーの「クリア」ボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'Clear'",
           "values": [
@@ -5395,7 +5395,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "default": "'primary'",
           "values": [
@@ -5451,7 +5451,7 @@
           "mutable": false,
           "attr": "day-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month.",
+          "docs": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month.\n\n自動翻訳: 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
           "docsTags": [],
           "values": [
             {
@@ -5476,7 +5476,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the datetime.",
+          "docs": "If `true`, the user cannot interact with the datetime.\n\n自動翻訳: `true`の場合、ユーザはdatetimeを操作することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5493,7 +5493,7 @@
           "mutable": false,
           "attr": "done-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the picker's \"Done\" button.",
+          "docs": "The text to display on the picker's \"Done\" button.\n\n自動翻訳: ピッカーの \"Done \"ボタンに表示するテキスト。",
           "docsTags": [],
           "default": "'Done'",
           "values": [
@@ -5510,7 +5510,7 @@
           "mutable": false,
           "attr": "first-day-of-week",
           "reflectToAttr": false,
-          "docs": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday.",
+          "docs": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday.\n\n自動翻訳: ion-datetime`に使用する週の最初の曜日を指定する。デフォルト値は `0` で、日曜日を表す。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -5526,7 +5526,7 @@
           "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.",
+          "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.\n\n自動翻訳: 特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel=\"false\"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -5551,7 +5551,7 @@
           "mutable": false,
           "attr": "hour-cycle",
           "reflectToAttr": false,
-          "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.",
+          "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.\n\n自動翻訳: ion-datetime`の時間周期を指定する。値が設定されていない場合、現在のロケールによって指定される。",
           "docsTags": [],
           "values": [
             {
@@ -5575,7 +5575,7 @@
           "mutable": false,
           "attr": "hour-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers.",
+          "docs": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers.\n\n自動翻訳: 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
           "docsTags": [],
           "values": [
             {
@@ -5599,7 +5599,7 @@
           "type": "((dateIsoString: string) => boolean) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.",
+          "docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.\n\n自動翻訳: 個々の日付(暦日)が有効か無効かを返す。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブである。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -5618,7 +5618,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `'default'` value refers to the default\nlocale set by your device.",
+          "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `'default'` value refers to the default\nlocale set by your device.\n\n自動翻訳: ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
           "docsTags": [],
           "default": "'default'",
           "values": [
@@ -5635,7 +5635,7 @@
           "mutable": true,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.",
+          "docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.\n\n自動翻訳: 許容される最大のdatetimeを指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。",
           "docsTags": [],
           "values": [
             {
@@ -5654,7 +5654,7 @@
           "mutable": true,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.",
+          "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.\n\n自動翻訳: 許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでよい。デフォルトは、今日から100年前の年頭です。",
           "docsTags": [],
           "values": [
             {
@@ -5673,7 +5673,7 @@
           "mutable": false,
           "attr": "minute-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`.",
+          "docs": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`.\n\n自動翻訳: 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
           "docsTags": [],
           "values": [
             {
@@ -5698,7 +5698,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -5719,7 +5719,7 @@
           "mutable": false,
           "attr": "month-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`.",
+          "docs": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`.\n\n自動翻訳: 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
           "docsTags": [],
           "values": [
             {
@@ -5744,7 +5744,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.",
+          "docs": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.\n\n自動翻訳: `true`の場合、複数の日付を一度に選択することができる。presentation=\"date\"`と `preferWheel=\"false\"` にのみ適用される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5761,7 +5761,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -5778,7 +5778,7 @@
           "mutable": false,
           "attr": "prefer-wheel",
           "reflectToAttr": false,
-          "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `'date'`, `'date-time'`, or `'time-date'`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`'time'`, `'month'`, `'month-year'`, or `'year'`.",
+          "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `'date'`, `'date-time'`, or `'time-date'`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`'time'`, `'month'`, `'month-year'`, or `'year'`.\n\n自動翻訳: `true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。time'`, `month'`, `'month-year'`, または `-year'`.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5795,7 +5795,7 @@
           "mutable": false,
           "attr": "presentation",
           "reflectToAttr": false,
-          "docs": "Which values you want to select. `'date'` will show\na calendar picker to select the month, day, and year. `'time'`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `'date-time'` will show the date picker first and time picker second.\n`'time-date'` will show the time picker first and date picker second.",
+          "docs": "Which values you want to select. `'date'` will show\na calendar picker to select the month, day, and year. `'time'`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `'date-time'` will show the date picker first and time picker second.\n`'time-date'` will show the time picker first and date picker second.\n\n自動翻訳: どの値を選択するか。date'`はカレンダーピッカーを表示し、月、日、年を選択します。time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
           "docsTags": [],
           "default": "'date-time'",
           "values": [
@@ -5837,7 +5837,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the datetime appears normal but is not interactive.",
+          "docs": "If `true`, the datetime appears normal but is not interactive.\n\n自動翻訳: `true`の場合、datetimeは正常に表示されるが、インタラクティブにはならない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5854,7 +5854,7 @@
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
-          "docs": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.",
+          "docs": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` スロットを使用することもできる。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5871,7 +5871,7 @@
           "mutable": false,
           "attr": "show-default-buttons",
           "reflectToAttr": false,
-          "docs": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.",
+          "docs": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`スロットを使用することもできます。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5888,7 +5888,7 @@
           "mutable": false,
           "attr": "show-default-time-label",
           "reflectToAttr": false,
-          "docs": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered.",
+          "docs": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`スロットを使用することもできます。time-label`スロットにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -5905,7 +5905,7 @@
           "mutable": false,
           "attr": "show-default-title",
           "reflectToAttr": false,
-          "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.",
+          "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.\n\n自動翻訳: `true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、スロットされたタイトルと、選択された日付の両方が含まれます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5922,7 +5922,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width.",
+          "docs": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width.\n\n自動翻訳: cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。fixed`の場合、`ion-datetime`は固定幅になる。",
           "docsTags": [],
           "default": "'fixed'",
           "values": [
@@ -5943,7 +5943,7 @@
           "type": "((selectedDates: string[]) => string) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
+          "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".\n\n自動翻訳: 選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは \"numberOfDates days \"に設定されています。",
           "docsTags": [],
           "values": [
             {
@@ -5962,7 +5962,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.",
+          "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.\n\n自動翻訳: datetimeの値を有効なISO 8601 datetime文字列として指定する。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
           "docsTags": [],
           "values": [
             {
@@ -5987,7 +5987,7 @@
           "mutable": false,
           "attr": "year-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.",
+          "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.\n\n自動翻訳: 選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` 入力には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
           "docsTags": [],
           "values": [
             {
@@ -6016,7 +6016,7 @@
           },
           "signature": "cancel(closeOverlay?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
+          "docs": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.\n\n自動翻訳: ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。",
           "docsTags": []
         },
         {
@@ -6027,7 +6027,7 @@
           },
           "signature": "confirm(closeOverlay?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Confirms the selected datetime value, updates the\n`value` property, and optionally closes the popover\nor modal that the datetime was presented in.",
+          "docs": "Confirms the selected datetime value, updates the\n`value` property, and optionally closes the popover\nor modal that the datetime was presented in.\n\n自動翻訳: 選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。",
           "docsTags": []
         },
         {
@@ -6038,7 +6038,7 @@
           },
           "signature": "reset(startDate?: string) => Promise<void>",
           "parameters": [],
-          "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
+          "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.\n\n自動翻訳: datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
           "docsTags": []
         }
       ],
@@ -6049,7 +6049,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime loses focus.",
+          "docs": "Emitted when the datetime loses focus.\n\n自動翻訳: datetimeのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -6058,7 +6058,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime selection was cancelled.",
+          "docs": "Emitted when the datetime selection was cancelled.\n\n自動翻訳: datetimeの選択がキャンセルされたときに発生する。",
           "docsTags": []
         },
         {
@@ -6067,7 +6067,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value (selected date) has changed.",
+          "docs": "Emitted when the value (selected date) has changed.\n\n自動翻訳: 値（選択された日付）が変化したときに発せられる。",
           "docsTags": []
         },
         {
@@ -6076,7 +6076,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime has focus.",
+          "docs": "Emitted when the datetime has focus.\n\n自動翻訳: datetimeにフォーカスが当たったときに発行される。",
           "docsTags": []
         }
       ],
@@ -6085,31 +6085,31 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "The primary background of the datetime component."
+          "docs": "The primary background of the datetime component.\n\n自動翻訳: datetimeコンポーネントの主な背景。"
         },
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "The primary background of the datetime component in RGB format."
+          "docs": "The primary background of the datetime component in RGB format.\n\n自動翻訳: datetimeコンポーネントの主な背景をRGBフォーマットで示す。"
         },
         {
           "name": "--title-color",
           "annotation": "prop",
-          "docs": "The text color of the title."
+          "docs": "The text color of the title.\n\n自動翻訳: タイトルの文字色です。"
         }
       ],
       "slots": [
         {
           "name": "buttons",
-          "docs": "The buttons in the datetime."
+          "docs": "The buttons in the datetime.\n\n自動翻訳: datetimeのボタンです。"
         },
         {
           "name": "time-label",
-          "docs": "The label for the time selector in the datetime."
+          "docs": "The label for the time selector in the datetime.\n\n自動翻訳: datetimeの時間セレクタのラベルです。"
         },
         {
           "name": "title",
-          "docs": "The title of the datetime."
+          "docs": "The title of the datetime.\n\n自動翻訳: datetimeのタイトルです。"
         }
       ],
       "parts": [],
@@ -6175,7 +6175,7 @@
           "mutable": false,
           "attr": "activated",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab button will be show a close icon.",
+          "docs": "If `true`, the fab button will be show a close icon.\n\n自動翻訳: `true`の場合、ファブボタンにクローズアイコンを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6192,7 +6192,7 @@
           "mutable": false,
           "attr": "close-icon",
           "reflectToAttr": false,
-          "docs": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list.",
+          "docs": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list.\n\n自動翻訳: クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。",
           "docsTags": [],
           "default": "close",
           "values": [
@@ -6209,7 +6209,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -6264,7 +6264,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the fab button.",
+          "docs": "If `true`, the user cannot interact with the fab button.\n\n自動翻訳: `true`の場合、ユーザーはファブボタンを操作することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6281,7 +6281,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
+          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -6300,7 +6300,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -6319,7 +6319,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -6340,7 +6340,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -6358,7 +6358,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
           "docsTags": [],
           "values": [
             {
@@ -6377,7 +6377,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -6403,7 +6403,7 @@
           "mutable": false,
           "attr": "show",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab button will show when in a fab-list.",
+          "docs": "If `true`, the fab button will show when in a fab-list.\n\n自動翻訳: `true`の場合、fabボタンがfab-listにあるときに表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6420,7 +6420,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The size of the button. Set this to `small` in order to have a mini fab button.",
+          "docs": "The size of the button. Set this to `small` in order to have a mini fab button.\n\n自動翻訳: ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。",
           "docsTags": [],
           "values": [
             {
@@ -6440,7 +6440,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -6459,7 +6459,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ファブボタンが半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6476,7 +6476,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.",
+          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -6505,7 +6505,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button loses focus.",
+          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -6514,7 +6514,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button has focus.",
+          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発せられる。",
           "docsTags": []
         }
       ],
@@ -6523,128 +6523,128 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the button"
+          "docs": "Background of the button\n\n自動翻訳: ボタンの背景"
         },
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple."
+          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background when pressed"
+          "docs": "Opacity of the button background when pressed\n\n自動翻訳: 押されたときのボタンの背景の不透明度"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the button when focused with the tab key"
+          "docs": "Background of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background when focused with the tab key"
+          "docs": "Opacity of the button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the button on hover"
+          "docs": "Background of the button on hover\n\n自動翻訳: ホバー時のボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background on hover"
+          "docs": "Opacity of the button background on hover\n\n自動翻訳: ホバー時のボタン背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the button"
+          "docs": "Border color of the button\n\n自動翻訳: ボタンのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the button"
+          "docs": "Border radius of the button\n\n自動翻訳: ボタンの境界半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the button"
+          "docs": "Border style of the button\n\n自動翻訳: ボタンのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the button"
+          "docs": "Border width of the button\n\n自動翻訳: ボタンのボーダー幅"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the button"
+          "docs": "Box shadow of the button\n\n自動翻訳: ボタンのボックスシャドウ"
         },
         {
           "name": "--close-icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the close icon"
+          "docs": "Font size of the close icon\n\n自動翻訳: クローズアイコンのフォントサイズ"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the button"
+          "docs": "Text color of the button\n\n自動翻訳: ボタンの文字色"
         },
         {
           "name": "--color-activated",
           "annotation": "prop",
-          "docs": "Text color of the button when pressed"
+          "docs": "Text color of the button when pressed\n\n自動翻訳: ボタンが押されたときの文字色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the button when focused with the tab key"
+          "docs": "Text color of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの文字色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the button on hover"
+          "docs": "Text color of the button on hover\n\n自動翻訳: ホバー時のボタンの文字色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect"
+          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the button"
+          "docs": "Transition of the button\n\n自動翻訳: ボタンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "close-icon",
-          "docs": "The close icon that is displayed when a fab list opens (uses ion-icon)."
+          "docs": "The close icon that is displayed when a fab list opens (uses ion-icon).\n\n自動翻訳: ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button or anchor element that wraps all child elements."
+          "docs": "The native HTML button or anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
         }
       ],
       "dependents": [],
@@ -6673,7 +6673,7 @@
           "mutable": false,
           "attr": "activated",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab list will show all fab buttons in the list.",
+          "docs": "If `true`, the fab list will show all fab buttons in the list.\n\n自動翻訳: `true`の場合、ファブリストに全てのファブボタンが表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6690,7 +6690,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "The side the fab list will show on relative to the main fab button.",
+          "docs": "The side the fab list will show on relative to the main fab button.\n\n自動翻訳: メインファブボタンに対して、ファブリストが表示される側を指定します。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -6739,7 +6739,7 @@
           "mutable": true,
           "attr": "activated",
           "reflectToAttr": false,
-          "docs": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.",
+          "docs": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.\n\n自動翻訳: もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6756,7 +6756,7 @@
           "mutable": false,
           "attr": "edge",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.",
+          "docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.\n\n自動翻訳: `true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。fixed` スロットと一緒に使用する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6773,7 +6773,7 @@
           "mutable": false,
           "attr": "horizontal",
           "reflectToAttr": false,
-          "docs": "Where to align the fab horizontally in the viewport.",
+          "docs": "Where to align the fab horizontally in the viewport.\n\n自動翻訳: ビューポートでファブを水平に揃える場所。",
           "docsTags": [],
           "values": [
             {
@@ -6801,7 +6801,7 @@
           "mutable": false,
           "attr": "vertical",
           "reflectToAttr": false,
-          "docs": "Where to align the fab vertically in the viewport.",
+          "docs": "Where to align the fab vertically in the viewport.\n\n自動翻訳: ビューポートでファブを縦に並べる場所。",
           "docsTags": [],
           "values": [
             {
@@ -6833,7 +6833,7 @@
           },
           "signature": "close() => Promise<void>",
           "parameters": [],
-          "docs": "Close an active FAB list container.",
+          "docs": "Close an active FAB list container.\n\n自動翻訳: アクティブなFABリストコンテナを閉じる。",
           "docsTags": []
         }
       ],
@@ -6865,7 +6865,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode.",
+          "docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode.\n\n自動翻訳: フッターに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -6885,7 +6885,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -6906,7 +6906,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content.",
+          "docs": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、フッターは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6942,7 +6942,7 @@
           "mutable": false,
           "attr": "fixed",
           "reflectToAttr": false,
-          "docs": "If `true`, the grid will have a fixed width based on the screen size.",
+          "docs": "If `true`, the grid will have a fixed width based on the screen size.\n\n自動翻訳: `true`の場合、グリッドの幅は画面サイズに応じた固定幅となる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6961,62 +6961,62 @@
         {
           "name": "--ion-grid-padding",
           "annotation": "prop",
-          "docs": "Padding for the Grid"
+          "docs": "Padding for the Grid\n\n自動翻訳: グリッドのパディング"
         },
         {
           "name": "--ion-grid-padding-lg",
           "annotation": "prop",
-          "docs": "Padding for the Grid on lg screens"
+          "docs": "Padding for the Grid on lg screens\n\n自動翻訳: LG画面でのグリッドのパディングについて"
         },
         {
           "name": "--ion-grid-padding-md",
           "annotation": "prop",
-          "docs": "Padding for the Grid on md screens"
+          "docs": "Padding for the Grid on md screens\n\n自動翻訳: md画面におけるグリッドのパディングについて"
         },
         {
           "name": "--ion-grid-padding-sm",
           "annotation": "prop",
-          "docs": "Padding for the Grid on sm screens"
+          "docs": "Padding for the Grid on sm screens\n\n自動翻訳: スマートスクリーンにおけるグリッドのパディング"
         },
         {
           "name": "--ion-grid-padding-xl",
           "annotation": "prop",
-          "docs": "Padding for the Grid on xl screens"
+          "docs": "Padding for the Grid on xl screens\n\n自動翻訳: XL画面でのグリッドのパディングについて"
         },
         {
           "name": "--ion-grid-padding-xs",
           "annotation": "prop",
-          "docs": "Padding for the Grid on xs screens"
+          "docs": "Padding for the Grid on xs screens\n\n自動翻訳: xs画面でのGridのパディングについて"
         },
         {
           "name": "--ion-grid-width",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid"
+          "docs": "Width of the fixed Grid\n\n自動翻訳: 固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-lg",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on lg screens"
+          "docs": "Width of the fixed Grid on lg screens\n\n自動翻訳: LGスクリーンで固定されたGridの幅"
         },
         {
           "name": "--ion-grid-width-md",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on md screens"
+          "docs": "Width of the fixed Grid on md screens\n\n自動翻訳: md画面での固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-sm",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on sm screens"
+          "docs": "Width of the fixed Grid on sm screens\n\n自動翻訳: sm画面での固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-xl",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on xl screens"
+          "docs": "Width of the fixed Grid on xl screens\n\n自動翻訳: xl画面での固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-xs",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on xs screens"
+          "docs": "Width of the fixed Grid on xs screens\n\n自動翻訳: xsスクリーンで固定されたGridの幅"
         }
       ],
       "slots": [],
@@ -7044,7 +7044,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
+          "docs": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: ヘッダーに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。  通常、[折りたたみ式大型タイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
           "docsTags": [],
           "values": [
             {
@@ -7068,7 +7068,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -7089,7 +7089,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content.",
+          "docs": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、ヘッダーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7130,7 +7130,7 @@
           "mutable": false,
           "attr": "alt",
           "reflectToAttr": false,
-          "docs": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded.",
+          "docs": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded.\n\n自動翻訳: この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。",
           "docsTags": [],
           "values": [
             {
@@ -7149,7 +7149,7 @@
           "mutable": false,
           "attr": "src",
           "reflectToAttr": false,
-          "docs": "The image URL. This attribute is mandatory for the `<img>` element.",
+          "docs": "The image URL. This attribute is mandatory for the `<img>` element.\n\n自動翻訳: 画像のURL。この属性は `<img>` 要素では必須である。",
           "docsTags": [],
           "values": [
             {
@@ -7171,7 +7171,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the img fails to load",
+          "docs": "Emitted when the img fails to load\n\n自動翻訳: imgの読み込みに失敗したときに発せられる",
           "docsTags": []
         },
         {
@@ -7180,7 +7180,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the image has finished loading",
+          "docs": "Emitted when the image has finished loading\n\n自動翻訳: 画像の読み込みが終了したときに発せられる",
           "docsTags": []
         },
         {
@@ -7189,7 +7189,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the img src has been set",
+          "docs": "Emitted when the img src has been set\n\n自動翻訳: img srcが設定されたときに発せられる。",
           "docsTags": []
         }
       ],
@@ -7199,7 +7199,7 @@
       "parts": [
         {
           "name": "image",
-          "docs": "The inner `img` element."
+          "docs": "The inner `img` element.\n\n自動翻訳: 内側の `img` 要素。"
         }
       ],
       "dependents": [],
@@ -7220,7 +7220,7 @@
           "mutable": true,
           "attr": "loading-spinner",
           "reflectToAttr": false,
-          "docs": "An animated SVG spinner that shows while loading.",
+          "docs": "An animated SVG spinner that shows while loading.\n\n自動翻訳: ロード中に表示されるアニメーションSVGスピナーです。",
           "docsTags": [],
           "values": [
             {
@@ -7275,7 +7275,7 @@
           "mutable": false,
           "attr": "loading-text",
           "reflectToAttr": false,
-          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "values": [
             {
@@ -7322,7 +7322,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.",
+          "docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.\n\n自動翻訳: `true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。  trueを設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7339,7 +7339,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.",
+          "docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.\n\n自動翻訳: 無限スクロール要素の位置を指定する。値は `top` または `bottom` のどちらかである。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -7361,7 +7361,7 @@
           "mutable": false,
           "attr": "threshold",
           "reflectToAttr": false,
-          "docs": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page.",
+          "docs": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page.\n\n自動翻訳: スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、`100px`という値を使用します。",
           "docsTags": [],
           "default": "'15%'",
           "values": [
@@ -7382,7 +7382,7 @@
           },
           "signature": "complete() => Promise<void>",
           "parameters": [],
-          "docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.",
+          "docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.\n\n自動翻訳: 非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。",
           "docsTags": []
         }
       ],
@@ -7393,7 +7393,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the scroll reaches\nthe threshold distance. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.",
+          "docs": "Emitted when the scroll reaches\nthe threshold distance. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.\n\n自動翻訳: スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。",
           "docsTags": []
         }
       ],
@@ -7424,7 +7424,7 @@
           "mutable": false,
           "attr": "accept",
           "reflectToAttr": false,
-          "docs": "This attribute is ignored.",
+          "docs": "This attribute is ignored.\n\n自動翻訳: この属性は無視されます。",
           "docsTags": [
             {
               "name": "deprecated"
@@ -7448,7 +7448,7 @@
           "mutable": false,
           "attr": "autocapitalize",
           "reflectToAttr": false,
-          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n\n自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -7465,7 +7465,7 @@
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
-          "docs": "Indicates whether the value of the control can be automatically completed by the browser.",
+          "docs": "Indicates whether the value of the control can be automatically completed by the browser.\n\n自動翻訳: コントロールの値が、ブラウザによって自動的に補完されるかどうかを示す。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -7695,7 +7695,7 @@
           "mutable": false,
           "attr": "autocorrect",
           "reflectToAttr": false,
-          "docs": "Whether auto correction should be enabled when the user is entering/editing the text value.",
+          "docs": "Whether auto correction should be enabled when the user is entering/editing the text value.\n\n自動翻訳: ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -7717,7 +7717,7 @@
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
-          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
+          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7734,7 +7734,7 @@
           "mutable": false,
           "attr": "clear-input",
           "reflectToAttr": false,
-          "docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
+          "docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n\n自動翻訳: `true`の場合、値があるときに入力にクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7751,7 +7751,7 @@
           "mutable": false,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
-          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
+          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n\n自動翻訳: `true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
           "docsTags": [],
           "values": [
             {
@@ -7770,7 +7770,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -7825,7 +7825,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -7842,7 +7842,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the input.",
+          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザは入力と対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7859,7 +7859,7 @@
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.\n\n自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
           "docsTags": [],
           "values": [
             {
@@ -7903,7 +7903,7 @@
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\n自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
           "docsTags": [],
           "values": [
             {
@@ -7951,7 +7951,7 @@
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "The maximum value, which must not be less than its minimum (min attribute) value.",
+          "docs": "The maximum value, which must not be less than its minimum (min attribute) value.\n\n自動翻訳: 最大値で、その最小値（min属性）より小さくてはならない。",
           "docsTags": [],
           "values": [
             {
@@ -7973,7 +7973,7 @@
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
+          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -7992,7 +7992,7 @@
           "mutable": false,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "The minimum value, which must not be greater than its maximum (max attribute) value.",
+          "docs": "The minimum value, which must not be greater than its maximum (max attribute) value.\n\n自動翻訳: 最小値で、その最大値（max属性）より大きくてはならない。",
           "docsTags": [],
           "values": [
             {
@@ -8014,7 +8014,7 @@
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
+          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -8033,7 +8033,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8054,7 +8054,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.",
+          "docs": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.\n\n自動翻訳: `true`の場合、ユーザは複数の値を入力することができる。この属性は、type属性が `\"email\"` に設定されている場合に適用され、それ以外の場合は無視される。",
           "docsTags": [],
           "values": [
             {
@@ -8073,7 +8073,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -8090,7 +8090,7 @@
           "mutable": false,
           "attr": "pattern",
           "reflectToAttr": false,
-          "docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.",
+          "docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n\n自動翻訳: 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` 入力タイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8109,7 +8109,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.",
+          "docs": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n\n自動翻訳: 入力が値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
           "docsTags": [],
           "values": [
             {
@@ -8128,7 +8128,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot modify the value.",
+          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8145,7 +8145,7 @@
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
-          "docs": "If `true`, the user must fill in a value before submitting a form.",
+          "docs": "If `true`, the user must fill in a value before submitting a form.\n\n自動翻訳: `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8162,7 +8162,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
+          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n\n自動翻訳: コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数である。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
           "docsTags": [],
           "values": [
             {
@@ -8181,7 +8181,7 @@
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
-          "docs": "If `true`, the element will have its spelling and grammar checked.",
+          "docs": "If `true`, the element will have its spelling and grammar checked.\n\n自動翻訳: `true`の場合、その要素のスペルチェックと文法チェックが行われる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8198,7 +8198,7 @@
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
-          "docs": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.",
+          "docs": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.\n\n自動翻訳: min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any\"`または正の浮動小数点数。",
           "docsTags": [],
           "values": [
             {
@@ -8217,7 +8217,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of control to display. The default type is text.",
+          "docs": "The type of control to display. The default type is text.\n\n自動翻訳: 表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。",
           "docsTags": [],
           "default": "'text'",
           "values": [
@@ -8279,7 +8279,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the input.",
+          "docs": "The value of the input.\n\n自動翻訳: 入力された値です。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -8309,7 +8309,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
-          "docs": "Returns the native `<input>` element used under the hood.",
+          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: フードの下で使用されているネイティブの `<input>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -8320,7 +8320,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.",
+          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\n自動翻訳: ion-input` のネイティブ `input` にフォーカスを設定する。グローバルな `input.focus()` の代わりに、このメソッドを使用します。  ページが入ったときに入力にフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
           "docsTags": []
         }
       ],
@@ -8331,7 +8331,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.",
+          "docs": "Emitted when the input loses focus.\n\n自動翻訳: 入力のフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -8340,7 +8340,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
           "docsTags": []
         },
         {
@@ -8349,7 +8349,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.",
+          "docs": "Emitted when the input has focus.\n\n自動翻訳: 入力にフォーカスが当たったときに発せられる。",
           "docsTags": []
         },
         {
@@ -8358,7 +8358,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.",
+          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発する。",
           "docsTags": []
         }
       ],
@@ -8367,52 +8367,52 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the input"
+          "docs": "Background of the input\n\n自動翻訳: 入力の背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the input text"
+          "docs": "Color of the input text\n\n自動翻訳: 入力テキストの色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the input"
+          "docs": "Bottom padding of the input\n\n自動翻訳: 入力の下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the input"
+          "docs": "Top padding of the input\n\n自動翻訳: 入力のトップパディング"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the input placeholder text"
+          "docs": "Color of the input placeholder text\n\n自動翻訳: 入力用プレースホルダーテキストの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the input placeholder text"
+          "docs": "Font style of the input placeholder text\n\n自動翻訳: 入力用プレースホルダーテキストのフォントスタイル"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the input placeholder text"
+          "docs": "Font weight of the input placeholder text\n\n自動翻訳: 入力用プレースホルダーテキストのフォントウェイト"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the input placeholder text"
+          "docs": "Opacity of the input placeholder text\n\n自動翻訳: 入力プレースホルダーテキストの不透明度"
         }
       ],
       "slots": [],
@@ -8458,7 +8458,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8513,7 +8513,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8534,7 +8534,7 @@
           "mutable": false,
           "attr": "sticky",
           "reflectToAttr": false,
-          "docs": "When it's set to `true`, the item-divider will stay visible when it reaches the top\nof the viewport until the next `ion-item-divider` replaces it.\n\nThis feature relies in `position:sticky`:\nhttps://caniuse.com/#feat=css-sticky",
+          "docs": "When it's set to `true`, the item-divider will stay visible when it reaches the top\nof the viewport until the next `ion-item-divider` replaces it.\n\nThis feature relies in `position:sticky`:\nhttps://caniuse.com/#feat=css-sticky\n\n自動翻訳: `true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。  この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8553,66 +8553,66 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the item divider"
+          "docs": "Background of the item divider\n\n自動翻訳: アイテムディバイダーの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the item divider"
+          "docs": "Color of the item divider\n\n自動翻訳: アイテムディバイダーの色"
         },
         {
           "name": "--inner-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom inner padding of the item divider"
+          "docs": "Bottom inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのボトムインナーパディング"
         },
         {
           "name": "--inner-padding-end",
           "annotation": "prop",
-          "docs": "End inner padding of the item divider"
+          "docs": "End inner padding of the item divider\n\n自動翻訳: アイテムディバイダーの内側パディングを終了する"
         },
         {
           "name": "--inner-padding-start",
           "annotation": "prop",
-          "docs": "Start inner padding of the item divider"
+          "docs": "Start inner padding of the item divider\n\n自動翻訳: アイテムディバイダーの内側パディングを開始する"
         },
         {
           "name": "--inner-padding-top",
           "annotation": "prop",
-          "docs": "Top inner padding of the item divider"
+          "docs": "Top inner padding of the item divider\n\n自動翻訳: アイテムディバイダーの上部内側パディング"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item divider"
+          "docs": "Bottom padding of the item divider\n\n自動翻訳: アイテムディバイダーのボトムパディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合は右パディング、右から左の場合は左パディング"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item divider"
+          "docs": "Top padding of the item divider\n\n自動翻訳: アイテムディバイダーのトップパディング"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot."
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the divider text in LTR, and to the left in RTL."
+          "docs": "Content is placed to the right of the divider text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the divider text in LTR, and to the right in RTL."
+          "docs": "Content is placed to the left of the divider text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRでは仕切り文字の左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [],
@@ -8685,7 +8685,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8740,7 +8740,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the item option.",
+          "docs": "If `true`, the user cannot interact with the item option.\n\n自動翻訳: `true`の場合、ユーザーはアイテムオプションと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8757,7 +8757,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
+          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -8776,7 +8776,7 @@
           "mutable": false,
           "attr": "expandable",
           "reflectToAttr": false,
-          "docs": "If `true`, the option will expand to take up the available width and cover any other options.",
+          "docs": "If `true`, the option will expand to take up the available width and cover any other options.\n\n自動翻訳: `true`の場合、オプションは利用可能な幅を占めるように展開し、他のオプションをカバーします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8793,7 +8793,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -8812,7 +8812,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8833,7 +8833,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -8852,7 +8852,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -8871,7 +8871,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.",
+          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -8899,44 +8899,44 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the item option"
+          "docs": "Background of the item option\n\n自動翻訳: アイテムオプションの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the item option"
+          "docs": "Color of the item option\n\n自動翻訳: アイテムオプションのカラー"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot."
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
         },
         {
           "name": "bottom",
-          "docs": "Content is placed below the option text."
+          "docs": "Content is placed below the option text.\n\n自動翻訳: コンテンツは、オプションテキストの下に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the option text in LTR, and to the left in RTL."
+          "docs": "Content is placed to the right of the option text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRではオプションテキストの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "icon-only",
-          "docs": "Should be used on an icon in an option that has no text."
+          "docs": "Should be used on an icon in an option that has no text.\n\n自動翻訳: テキストを持たないオプションのアイコンに使用されるべきです。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the option text in LTR, and to the right in RTL."
+          "docs": "Content is placed to the left of the option text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではオプションテキストの左側に、RTLでは右側に配置されます。"
         },
         {
           "name": "top",
-          "docs": "Content is placed above the option text."
+          "docs": "Content is placed above the option text.\n\n自動翻訳: オプションテキストの上にコンテンツが配置されます。"
         }
       ],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button or anchor element that wraps all child elements."
+          "docs": "The native HTML button or anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
         }
       ],
       "dependents": [],
@@ -8963,7 +8963,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.",
+          "docs": "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.\n\n自動翻訳: オプションボタンを配置する側を指定します。指定可能な値。start\"` と `\"end\"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。",
           "docsTags": [],
           "default": "'end'",
           "values": [
@@ -8988,7 +8988,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the item has been fully swiped.",
+          "docs": "Emitted when the item has been fully swiped.\n\n自動翻訳: アイテムが完全にスワイプされたときに発せられる。",
           "docsTags": []
         }
       ],
@@ -9014,7 +9014,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the sliding item.",
+          "docs": "If `true`, the user cannot interact with the sliding item.\n\n自動翻訳: `true`の場合、ユーザーはスライドアイテムを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9035,7 +9035,7 @@
           },
           "signature": "close() => Promise<void>",
           "parameters": [],
-          "docs": "Close the sliding item. Items can also be closed from the [List](./list).",
+          "docs": "Close the sliding item. Items can also be closed from the [List](./list).\n\n自動翻訳: スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。",
           "docsTags": []
         },
         {
@@ -9046,7 +9046,7 @@
           },
           "signature": "closeOpened() => Promise<boolean>",
           "parameters": [],
-          "docs": "Close all of the sliding items in the list. Items can also be closed from the [List](./list).",
+          "docs": "Close all of the sliding items in the list. Items can also be closed from the [List](./list).\n\n自動翻訳: リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。",
           "docsTags": []
         },
         {
@@ -9057,7 +9057,7 @@
           },
           "signature": "getOpenAmount() => Promise<number>",
           "parameters": [],
-          "docs": "Get the amount the item is open in pixels.",
+          "docs": "Get the amount the item is open in pixels.\n\n自動翻訳: アイテムが開いている量をピクセル単位で取得します。",
           "docsTags": []
         },
         {
@@ -9068,7 +9068,7 @@
           },
           "signature": "getSlidingRatio() => Promise<number>",
           "parameters": [],
-          "docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.",
+          "docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.\n\n自動翻訳: オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いている。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
           "docsTags": []
         },
         {
@@ -9079,7 +9079,7 @@
           },
           "signature": "open(side: Side | undefined) => Promise<void>",
           "parameters": [],
-          "docs": "Open the sliding item.",
+          "docs": "Open the sliding item.\n\n自動翻訳: スライド式の項目を開く。",
           "docsTags": [
             {
               "name": "param",
@@ -9095,7 +9095,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the sliding position changes.",
+          "docs": "Emitted when the sliding position changes.\n\n自動翻訳: スライド位置が変化したときに発せられる。",
           "docsTags": []
         }
       ],
@@ -9154,7 +9154,7 @@
           "mutable": false,
           "attr": "button",
           "reflectToAttr": false,
-          "docs": "If `true`, a button tag will be rendered and the item will be tappable.",
+          "docs": "If `true`, a button tag will be rendered and the item will be tappable.\n\n自動翻訳: `true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9171,7 +9171,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -9226,7 +9226,7 @@
           "mutable": false,
           "attr": "counter",
           "reflectToAttr": false,
-          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.",
+          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.\n\n自動翻訳: `true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9242,7 +9242,7 @@
           "type": "((inputLength: number, maxLength: number) => string) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
+          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\n自動翻訳: カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは「itemLength / maxLength」に設定されています。",
           "docsTags": [],
           "values": [
             {
@@ -9261,7 +9261,7 @@
           "mutable": false,
           "attr": "detail",
           "reflectToAttr": false,
-          "docs": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present.",
+          "docs": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present.\n\n自動翻訳: `true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。",
           "docsTags": [],
           "values": [
             {
@@ -9280,7 +9280,7 @@
           "mutable": false,
           "attr": "detail-icon",
           "reflectToAttr": false,
-          "docs": "The icon to use when `detail` is set to `true`.",
+          "docs": "The icon to use when `detail` is set to `true`.\n\n自動翻訳: detail` が `true` に設定されているときに使用するアイコンです。",
           "docsTags": [],
           "default": "chevronForward",
           "values": [
@@ -9297,7 +9297,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the item.",
+          "docs": "If `true`, the user cannot interact with the item.\n\n自動翻訳: `true`の場合、ユーザはそのアイテムと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9314,7 +9314,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
+          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -9333,7 +9333,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border. Only available in `md` mode.",
+          "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border. Only available in `md` mode.\n\n自動翻訳: アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`モードでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -9357,7 +9357,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -9376,7 +9376,7 @@
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
-          "docs": "How the bottom border should be displayed on the item.",
+          "docs": "How the bottom border should be displayed on the item.\n\n自動翻訳: アイテムに表示される下枠の表示方法。",
           "docsTags": [],
           "values": [
             {
@@ -9404,7 +9404,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9425,7 +9425,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -9443,7 +9443,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
           "docsTags": [],
           "values": [
             {
@@ -9462,7 +9462,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -9488,7 +9488,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
-          "docs": "The shape of the item. If \"round\" it will have increased\nborder radius.",
+          "docs": "The shape of the item. If \"round\" it will have increased\nborder radius.\n\n自動翻訳: アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。",
           "docsTags": [],
           "values": [
             {
@@ -9508,7 +9508,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -9527,7 +9527,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.",
+          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.\n\n自動翻訳: ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -9571,209 +9571,209 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the item"
+          "docs": "Background of the item\n\n自動翻訳: アイテムの背景"
         },
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple."
+          "docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: 押されたときのアイテムの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the item background when pressed"
+          "docs": "Opacity of the item background when pressed\n\n自動翻訳: 押されたときのアイテム背景の不透明度"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the item when focused with the tab key"
+          "docs": "Background of the item when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのアイテムの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the item background when focused with the tab key"
+          "docs": "Opacity of the item background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのアイテムの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the item on hover"
+          "docs": "Background of the item on hover\n\n自動翻訳: ホバー時のアイテムの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background of the item on hover"
+          "docs": "Opacity of the background of the item on hover\n\n自動翻訳: ホバー時のアイテムの背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the item border"
+          "docs": "Color of the item border\n\n自動翻訳: アイテムの縁取りの色"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Radius of the item border"
+          "docs": "Radius of the item border\n\n自動翻訳: アイテムの境界線の半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the item border"
+          "docs": "Style of the item border\n\n自動翻訳: アイテムの枠のスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the item border"
+          "docs": "Width of the item border\n\n自動翻訳: アイテムの枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the item"
+          "docs": "Color of the item\n\n自動翻訳: アイテムのカラー"
         },
         {
           "name": "--color-activated",
           "annotation": "prop",
-          "docs": "Color of the item when pressed"
+          "docs": "Color of the item when pressed\n\n自動翻訳: 押したときのアイテムの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the item when focused with the tab key"
+          "docs": "Color of the item when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのアイテムの色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Color of the item on hover"
+          "docs": "Color of the item on hover\n\n自動翻訳: ホバー時のアイテムの色"
         },
         {
           "name": "--detail-icon-color",
           "annotation": "prop",
-          "docs": "Color of the item detail icon"
+          "docs": "Color of the item detail icon\n\n自動翻訳: アイテム詳細アイコンの色"
         },
         {
           "name": "--detail-icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the item detail icon"
+          "docs": "Font size of the item detail icon\n\n自動翻訳: アイテム詳細アイコンのフォントサイズ"
         },
         {
           "name": "--detail-icon-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the item detail icon"
+          "docs": "Opacity of the item detail icon\n\n自動翻訳: アイテム詳細アイコンの不透明度"
         },
         {
           "name": "--highlight-color-focused",
           "annotation": "prop",
-          "docs": "The color of the highlight on the item when focused"
+          "docs": "The color of the highlight on the item when focused\n\n自動翻訳: フォーカスされたときのアイテムのハイライトの色"
         },
         {
           "name": "--highlight-color-invalid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the item when invalid"
+          "docs": "The color of the highlight on the item when invalid\n\n自動翻訳: 無効時のアイテムのハイライトの色"
         },
         {
           "name": "--highlight-color-valid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the item when valid"
+          "docs": "The color of the highlight on the item when valid\n\n自動翻訳: 有効時のアイテム上のハイライトの色"
         },
         {
           "name": "--highlight-height",
           "annotation": "prop",
-          "docs": "The height of the highlight on the item"
+          "docs": "The height of the highlight on the item\n\n自動翻訳: アイテムに表示されるハイライトの高さ"
         },
         {
           "name": "--inner-border-width",
           "annotation": "prop",
-          "docs": "Width of the item inner border"
+          "docs": "Width of the item inner border\n\n自動翻訳: アイテム内枠の幅"
         },
         {
           "name": "--inner-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the item inner"
+          "docs": "Box shadow of the item inner\n\n自動翻訳: アイテム内側のボックスシャドウ"
         },
         {
           "name": "--inner-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item inner"
+          "docs": "Bottom padding of the item inner\n\n自動翻訳: アイテム内側のボトムパディング"
         },
         {
           "name": "--inner-padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合は右パディング、方向がアイテムの内側の右から左の場合は左パディングとなる"
         },
         {
           "name": "--inner-padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングがアイテム内側に入る"
         },
         {
           "name": "--inner-padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item inner"
+          "docs": "Top padding of the item inner\n\n自動翻訳: アイテム内側のトップパディング"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the item"
+          "docs": "Minimum height of the item\n\n自動翻訳: アイテムの最小高さ"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item"
+          "docs": "Bottom padding of the item\n\n自動翻訳: アイテムの底面パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合は右パディング、方向が右から左の場合は左パディングで項目を囲む"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングで項目を囲む"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item"
+          "docs": "Top padding of the item\n\n自動翻訳: アイテムのトップパディング"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the item ripple effect"
+          "docs": "Color of the item ripple effect\n\n自動翻訳: アイテム波及効果の色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the item"
+          "docs": "Transition of the item\n\n自動翻訳: アイテムの変遷"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot."
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the item text in LTR, and to the left in RTL."
+          "docs": "Content is placed to the right of the item text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "error",
-          "docs": "Content is placed under the item and displayed when an error is detected."
+          "docs": "Content is placed under the item and displayed when an error is detected.\n\n自動翻訳: 項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。"
         },
         {
           "name": "helper",
-          "docs": "Content is placed under the item and displayed when no error is detected."
+          "docs": "Content is placed under the item and displayed when no error is detected.\n\n自動翻訳: 項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the item text in LTR, and to the right in RTL."
+          "docs": "Content is placed to the left of the item text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "detail-icon",
-          "docs": "The chevron icon for the item. Only applies when `detail=\"true\"`."
+          "docs": "The chevron icon for the item. Only applies when `detail=\"true\"`.\n\n自動翻訳: アイテムのシェブロンアイコンを表示します。detail=\"true\"`のときのみ適用されます。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button, anchor or div element that wraps all child elements."
+          "docs": "The native HTML button, anchor or div element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。"
         }
       ],
       "dependents": [
@@ -9818,7 +9818,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -9873,7 +9873,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9894,7 +9894,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position determines where and how the label behaves inside an item.",
+          "docs": "The position determines where and how the label behaves inside an item.\n\n自動翻訳: 位置は、ラベルがアイテム内のどこで、どのように動作するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9924,7 +9924,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`."
+          "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.\n\n自動翻訳: ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能である。"
         }
       ],
       "slots": [],
@@ -9962,7 +9962,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -10017,7 +10017,7 @@
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
-          "docs": "How the bottom border should be displayed on the list header.",
+          "docs": "How the bottom border should be displayed on the list header.\n\n自動翻訳: リストヘッダーの下辺のボーダーをどのように表示するか。",
           "docsTags": [],
           "values": [
             {
@@ -10045,7 +10045,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10068,32 +10068,32 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the list header"
+          "docs": "Background of the list header\n\n自動翻訳: リストヘッダーの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the list header border"
+          "docs": "Color of the list header border\n\n自動翻訳: リストヘッダーボーダーの色"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the list header border"
+          "docs": "Style of the list header border\n\n自動翻訳: リストヘッダーボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the list header border"
+          "docs": "Width of the list header border\n\n自動翻訳: リストヘッダー枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the list header text"
+          "docs": "Color of the list header text\n\n自動翻訳: リストヘッダーテキストの色"
         },
         {
           "name": "--inner-border-width",
           "annotation": "prop",
-          "docs": "Width of the inner list header border"
+          "docs": "Width of the inner list header border\n\n自動翻訳: リストヘッダー内枠の幅"
         }
       ],
       "slots": [],
@@ -10127,7 +10127,7 @@
           "mutable": false,
           "attr": "inset",
           "reflectToAttr": false,
-          "docs": "If `true`, the list will have margin around it and rounded corners.",
+          "docs": "If `true`, the list will have margin around it and rounded corners.\n\n自動翻訳: `true`の場合、リストの周囲に余白ができ、角が丸くなる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10144,7 +10144,7 @@
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
-          "docs": "How the bottom border should be displayed on all items.",
+          "docs": "How the bottom border should be displayed on all items.\n\n自動翻訳: すべてのアイテムで、下のボーダーをどのように表示させるか。",
           "docsTags": [],
           "values": [
             {
@@ -10172,7 +10172,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10197,7 +10197,7 @@
           },
           "signature": "closeSlidingItems() => Promise<boolean>",
           "parameters": [],
-          "docs": "If `ion-item-sliding` are used inside the list, this method closes\nany open sliding item.\n\nReturns `true` if an actual `ion-item-sliding` is closed.",
+          "docs": "If `ion-item-sliding` are used inside the list, this method closes\nany open sliding item.\n\nReturns `true` if an actual `ion-item-sliding` is closed.\n\n自動翻訳: リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。  実際に `ion-item-sliding` が閉じられた場合は `true` を返します。",
           "docsTags": []
         }
       ],
@@ -10235,7 +10235,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will animate.",
+          "docs": "If `true`, the loading indicator will animate.\n\n自動翻訳: `true`の場合、ロードインジケータをアニメーションで表示します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10252,7 +10252,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will be dismissed when the backdrop is clicked.",
+          "docs": "If `true`, the loading indicator will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10269,7 +10269,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
+          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -10291,7 +10291,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "Number of milliseconds to wait before dismissing the loading indicator.",
+          "docs": "Number of milliseconds to wait before dismissing the loading indicator.\n\n自動翻訳: ローディングインジケータを解除するまでの待ち時間（ミリ秒）。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -10307,7 +10307,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the loading indicator is presented.",
+          "docs": "Animation to use when the loading indicator is presented.\n\n自動翻訳: ローディングインジケータが表示されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -10325,7 +10325,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the loader.",
+          "docs": "Additional attributes to pass to the loader.\n\n自動翻訳: ローダーに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -10344,7 +10344,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10360,7 +10360,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the loading indicator is dismissed.",
+          "docs": "Animation to use when the loading indicator is dismissed.\n\n自動翻訳: ローディングインジケータが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -10379,7 +10379,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "Optional text content to display in the loading indicator.",
+          "docs": "Optional text content to display in the loading indicator.\n\n自動翻訳: ロードインジケータに表示するテキストコンテンツは任意です。",
           "docsTags": [],
           "values": [
             {
@@ -10401,7 +10401,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10422,7 +10422,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the loading indicator.",
+          "docs": "If `true`, a backdrop will be displayed behind the loading indicator.\n\n自動翻訳: `true`の場合、ロードインジケータの後ろにバックドロップが表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10439,7 +10439,7 @@
           "mutable": true,
           "attr": "spinner",
           "reflectToAttr": false,
-          "docs": "The name of the spinner to display.",
+          "docs": "The name of the spinner to display.\n\n自動翻訳: 表示するスピナーの名前。",
           "docsTags": [],
           "values": [
             {
@@ -10494,7 +10494,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ロードインジケータは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10515,7 +10515,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the loading overlay after it has been presented.",
+          "docs": "Dismiss the loading overlay after it has been presented.\n\n自動翻訳: ローディングオーバーレイが提示された後、それを解除する。",
           "docsTags": [
             {
               "name": "param",
@@ -10535,7 +10535,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the loading did dismiss.",
+          "docs": "Returns a promise that resolves when the loading did dismiss.\n\n自動翻訳: ローディングが解除されたタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -10546,7 +10546,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the loading will dismiss.",
+          "docs": "Returns a promise that resolves when the loading will dismiss.\n\n自動翻訳: ローディングが解除されるタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -10557,7 +10557,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the loading overlay after it has been created.",
+          "docs": "Present the loading overlay after it has been created.\n\n自動翻訳: 作成後のローディングオーバーレイを提示する。",
           "docsTags": []
         }
       ],
@@ -10568,7 +10568,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading has dismissed.",
+          "docs": "Emitted after the loading has dismissed.\n\n自動翻訳: ローディングが解除された後に発せられる。",
           "docsTags": []
         },
         {
@@ -10577,7 +10577,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading has presented.",
+          "docs": "Emitted after the loading has presented.\n\n自動翻訳: ローディングが提示された後に発せられる。",
           "docsTags": []
         },
         {
@@ -10586,7 +10586,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading has dismissed.",
+          "docs": "Emitted before the loading has dismissed.\n\n自動翻訳: ローディングが解除される前に発せられる。",
           "docsTags": []
         },
         {
@@ -10595,7 +10595,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading has presented.",
+          "docs": "Emitted before the loading has presented.\n\n自動翻訳: ローディングが提示される前に発せられる。",
           "docsTags": []
         }
       ],
@@ -10604,47 +10604,47 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop"
+          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the loading dialog"
+          "docs": "Background of the loading dialog\n\n自動翻訳: ローディングダイアログの背景"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the loading dialog"
+          "docs": "Height of the loading dialog\n\n自動翻訳: ローディングダイアログの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the loading dialog"
+          "docs": "Maximum height of the loading dialog\n\n自動翻訳: ローディングダイアログの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the loading dialog"
+          "docs": "Maximum width of the loading dialog\n\n自動翻訳: ローディングダイアログの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the loading dialog"
+          "docs": "Minimum height of the loading dialog\n\n自動翻訳: ローディングダイアログの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the loading dialog"
+          "docs": "Minimum width of the loading dialog\n\n自動翻訳: ローディングダイアログの最小幅"
         },
         {
           "name": "--spinner-color",
           "annotation": "prop",
-          "docs": "Color of the loading spinner"
+          "docs": "Color of the loading spinner\n\n自動翻訳: ローディングスピナーの色"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the loading dialog"
+          "docs": "Width of the loading dialog\n\n自動翻訳: ローディングダイアログの幅"
         }
       ],
       "slots": [],
@@ -10688,7 +10688,7 @@
           "mutable": false,
           "attr": "auto-hide",
           "reflectToAttr": false,
-          "docs": "Automatically hides the menu button when the corresponding menu is not active",
+          "docs": "Automatically hides the menu button when the corresponding menu is not active\n\n自動翻訳: 対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10705,7 +10705,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -10760,7 +10760,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the menu button.",
+          "docs": "If `true`, the user cannot interact with the menu button.\n\n自動翻訳: `true`の場合、ユーザはメニューボタンを操作することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10777,7 +10777,7 @@
           "mutable": false,
           "attr": "menu",
           "reflectToAttr": false,
-          "docs": "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle",
+          "docs": "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle\n\n自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。",
           "docsTags": [],
           "values": [
             {
@@ -10796,7 +10796,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10817,7 +10817,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.",
+          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -10858,78 +10858,78 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the menu button"
+          "docs": "Background of the menu button\n\n自動翻訳: メニューボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the menu button when focused with the tab key"
+          "docs": "Background of the menu button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景色"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the menu button background when focused with the tab key"
+          "docs": "Opacity of the menu button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the menu button on hover"
+          "docs": "Background of the menu button on hover\n\n自動翻訳: ホバー時のメニューボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background on hover"
+          "docs": "Opacity of the background on hover\n\n自動翻訳: ホバー時の背景の不透明度"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the menu button"
+          "docs": "Border radius of the menu button\n\n自動翻訳: メニューボタンのボーダー半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the menu button"
+          "docs": "Color of the menu button\n\n自動翻訳: メニューボタンの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the menu button when focused with the tab key"
+          "docs": "Color of the menu button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのメニューボタンの色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Color of the menu button on hover"
+          "docs": "Color of the menu button on hover\n\n自動翻訳: ホバー時のメニューボタンの色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "icon",
-          "docs": "The menu button icon (uses ion-icon)."
+          "docs": "The menu button icon (uses ion-icon).\n\n自動翻訳: メニューボタンのアイコン（ion-iconを使用）です。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button element that wraps all child elements."
+          "docs": "The native HTML button element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。"
         }
       ],
       "dependents": [],
@@ -10963,7 +10963,7 @@
           "mutable": false,
           "attr": "auto-hide",
           "reflectToAttr": false,
-          "docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu.",
+          "docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu.\n\n自動翻訳: 対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にする。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10980,7 +10980,7 @@
           "mutable": false,
           "attr": "menu",
           "reflectToAttr": false,
-          "docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active.",
+          "docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active.\n\n自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルする。",
           "docsTags": [],
           "values": [
             {
@@ -11014,7 +11014,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed inside the toggle to act as the click target."
+          "docs": "Content is placed inside the toggle to act as the click target.\n\n自動翻訳: トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。"
         }
       ],
       "parts": [],
@@ -11045,7 +11045,7 @@
           "mutable": false,
           "attr": "content-id",
           "reflectToAttr": true,
-          "docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.",
+          "docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.\n\n自動翻訳: メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
           "docsTags": [],
           "values": [
             {
@@ -11064,7 +11064,7 @@
           "mutable": true,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the menu is disabled.",
+          "docs": "If `true`, the menu is disabled.\n\n自動翻訳: `true`の場合、メニューは無効化される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -11081,7 +11081,7 @@
           "mutable": false,
           "attr": "max-edge-start",
           "reflectToAttr": false,
-          "docs": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered.",
+          "docs": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered.\n\n自動翻訳: ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。",
           "docsTags": [],
           "default": "50",
           "values": [
@@ -11098,7 +11098,7 @@
           "mutable": false,
           "attr": "menu-id",
           "reflectToAttr": true,
-          "docs": "An id for the menu.",
+          "docs": "An id for the menu.\n\n自動翻訳: メニューのIDです。",
           "docsTags": [],
           "values": [
             {
@@ -11117,7 +11117,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": true,
-          "docs": "Which side of the view the menu should be placed.",
+          "docs": "Which side of the view the menu should be placed.\n\n自動翻訳: メニューがビューのどの側に配置されるべきか。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -11139,7 +11139,7 @@
           "mutable": false,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
-          "docs": "If `true`, swiping the menu is enabled.",
+          "docs": "If `true`, swiping the menu is enabled.\n\n自動翻訳: `true`の場合、スワイプによるメニュー操作が有効になる。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11156,7 +11156,7 @@
           "mutable": true,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.",
+          "docs": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.\n\n自動翻訳: メニューの表示形式を指定します。利用可能なオプション。overlay\"`, `\"reveal\"`, `\"push\"`.",
           "docsTags": [],
           "values": [
             {
@@ -11179,7 +11179,7 @@
           },
           "signature": "close(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.",
+          "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.\n\n自動翻訳: メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返す。",
           "docsTags": []
         },
         {
@@ -11190,7 +11190,7 @@
           },
           "signature": "isActive() => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.",
+          "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.\n\n自動翻訳: メニューがアクティブであれば `true` を返す。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味する。",
           "docsTags": []
         },
         {
@@ -11201,7 +11201,7 @@
           },
           "signature": "isOpen() => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` is the menu is open.",
+          "docs": "Returns `true` is the menu is open.\n\n自動翻訳: メニューが開いている場合は `true` を返す。",
           "docsTags": []
         },
         {
@@ -11212,7 +11212,7 @@
           },
           "signature": "open(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.",
+          "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.\n\n自動翻訳: メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返す。",
           "docsTags": []
         },
         {
@@ -11223,7 +11223,7 @@
           },
           "signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.",
+          "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: ボタンを開いたり閉じたりする。操作が正常に完了しない場合は `false` を返す。",
           "docsTags": []
         },
         {
@@ -11234,7 +11234,7 @@
           },
           "signature": "toggle(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.",
+          "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとする。操作が正常に完了しない場合は、`false`を返す。",
           "docsTags": []
         }
       ],
@@ -11245,7 +11245,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is closed.",
+          "docs": "Emitted when the menu is closed.\n\n自動翻訳: メニューが閉じられたときに発する。",
           "docsTags": []
         },
         {
@@ -11254,7 +11254,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is open.",
+          "docs": "Emitted when the menu is open.\n\n自動翻訳: メニューが開いているときに発せられる。",
           "docsTags": []
         },
         {
@@ -11263,7 +11263,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is about to be closed.",
+          "docs": "Emitted when the menu is about to be closed.\n\n自動翻訳: メニューが閉じられようとするときに発する。",
           "docsTags": []
         },
         {
@@ -11272,7 +11272,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is about to be opened.",
+          "docs": "Emitted when the menu is about to be opened.\n\n自動翻訳: メニューが開かれようとするときに発する。",
           "docsTags": []
         }
       ],
@@ -11298,48 +11298,48 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the menu"
+          "docs": "Background of the menu\n\n自動翻訳: メニューの背景"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the menu"
+          "docs": "Height of the menu\n\n自動翻訳: メニューの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the menu"
+          "docs": "Maximum height of the menu\n\n自動翻訳: メニューの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the menu"
+          "docs": "Maximum width of the menu\n\n自動翻訳: メニューの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the menu"
+          "docs": "Minimum height of the menu\n\n自動翻訳: メニューの高さの最小値"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the menu"
+          "docs": "Minimum width of the menu\n\n自動翻訳: メニューの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the menu"
+          "docs": "Width of the menu\n\n自動翻訳: メニューの幅"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "backdrop",
-          "docs": "The backdrop that appears over the main content when the menu is open."
+          "docs": "The backdrop that appears over the main content when the menu is open.\n\n自動翻訳: メニューを開いているときに、メインコンテンツの上に表示される背景です。"
         },
         {
           "name": "container",
-          "docs": "The container for the menu content."
+          "docs": "The container for the menu content.\n\n自動翻訳: メニューの内容を格納するコンテナです。"
         }
       ],
       "dependents": [],
@@ -11387,7 +11387,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal will animate.",
+          "docs": "If `true`, the modal will animate.\n\n自動翻訳: `true`の場合、モーダルはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11404,7 +11404,7 @@
           "mutable": false,
           "attr": "backdrop-breakpoint",
           "reflectToAttr": false,
-          "docs": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified.",
+          "docs": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified.\n\n自動翻訳: シートモーダル使用時に背景がフェードインし始めるポイントを示す0～1の10進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -11421,7 +11421,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal will be dismissed when the backdrop is clicked.",
+          "docs": "If `true`, the modal will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとモーダルは解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11437,7 +11437,7 @@
           "type": "number[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]",
+          "docs": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]\n\n自動翻訳: シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1]",
           "docsTags": [],
           "values": [
             {
@@ -11456,7 +11456,7 @@
           "mutable": false,
           "attr": "can-dismiss",
           "reflectToAttr": false,
-          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.",
+          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\n自動翻訳: モーダルが `dismiss` メソッドを呼び出したときに、退出できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
           "docsTags": [],
           "values": [
             {
@@ -11480,7 +11480,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the modal is presented.",
+          "docs": "Animation to use when the modal is presented.\n\n自動翻訳: モーダルが表示されたときに使用するアニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -11499,7 +11499,7 @@
           "mutable": false,
           "attr": "handle",
           "reflectToAttr": false,
-          "docs": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties.",
+          "docs": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties.\n\n自動翻訳: シートモーダルの上部に表示される水平線です。breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
           "docsTags": [],
           "values": [
             {
@@ -11518,7 +11518,7 @@
           "mutable": false,
           "attr": "handle-behavior",
           "reflectToAttr": false,
-          "docs": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal).",
+          "docs": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal).\n\n自動翻訳: ハンドルが押されたときのシートモーダルのインタラクション動作です。  デフォルトは `\"none\"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle\"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle` プロパティが `false` に設定されている場合、または `breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。",
           "docsTags": [],
           "default": "'none'",
           "values": [
@@ -11542,7 +11542,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the modal.",
+          "docs": "Additional attributes to pass to the modal.\n\n自動翻訳: モーダルに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -11561,7 +11561,7 @@
           "mutable": false,
           "attr": "initial-breakpoint",
           "reflectToAttr": false,
-          "docs": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array.",
+          "docs": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array.\n\n自動翻訳: シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -11580,7 +11580,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code.",
+          "docs": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code.\n\n自動翻訳: `true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -11597,7 +11597,7 @@
           "mutable": false,
           "attr": "keep-contents-mounted",
           "reflectToAttr": false,
-          "docs": "If `true`, the component passed into `ion-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue.",
+          "docs": "If `true`, the component passed into `ion-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue.\n\n自動翻訳: `true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。  注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -11614,7 +11614,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11630,7 +11630,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the modal is dismissed.",
+          "docs": "Animation to use when the modal is dismissed.\n\n自動翻訳: モーダルが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -11649,7 +11649,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -11669,7 +11669,7 @@
           "type": "HTMLElement | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.",
+          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.\n\n自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSモードでのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -11688,7 +11688,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.",
+          "docs": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.\n\n自動翻訳: `true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11705,7 +11705,7 @@
           "mutable": false,
           "attr": "swipe-to-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.",
+          "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.\n\n自動翻訳: `true`の場合、スワイプでモーダルを解除することができます。iOSモードでのみ適用されます。",
           "docsTags": [
             {
               "name": "deprecated",
@@ -11728,7 +11728,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked.",
+          "docs": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked.\n\n自動翻訳: クリックされたときにモーダルを開かせるトリガー要素に対応するIDです。",
           "docsTags": [],
           "values": [
             {
@@ -11751,7 +11751,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the modal overlay after it has been presented.",
+          "docs": "Dismiss the modal overlay after it has been presented.\n\n自動翻訳: モーダルオーバーレイが表示された後、それを解除する。",
           "docsTags": [
             {
               "name": "param",
@@ -11771,7 +11771,7 @@
           },
           "signature": "getCurrentBreakpoint() => Promise<number | undefined>",
           "parameters": [],
-          "docs": "Returns the current breakpoint of a sheet style modal",
+          "docs": "Returns the current breakpoint of a sheet style modal\n\n自動翻訳: シートスタイルモーダルの現在のブレークポイントを返します。",
           "docsTags": []
         },
         {
@@ -11782,7 +11782,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the modal did dismiss.",
+          "docs": "Returns a promise that resolves when the modal did dismiss.\n\n自動翻訳: モーダルが解除されたときに解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -11793,7 +11793,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the modal will dismiss.",
+          "docs": "Returns a promise that resolves when the modal will dismiss.\n\n自動翻訳: モーダルがいつ解散するかを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -11804,7 +11804,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the modal overlay after it has been created.",
+          "docs": "Present the modal overlay after it has been created.\n\n自動翻訳: モーダルオーバーレイを作成した後に提示する。",
           "docsTags": []
         },
         {
@@ -11815,7 +11815,7 @@
           },
           "signature": "setCurrentBreakpoint(breakpoint: number) => Promise<void>",
           "parameters": [],
-          "docs": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
+          "docs": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.\n\n自動翻訳: シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。",
           "docsTags": []
         }
       ],
@@ -11826,7 +11826,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.",
+          "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.\n\n自動翻訳: モーダルが解散した後に発せられる。ionModalDidDismiss の略記です。",
           "docsTags": []
         },
         {
@@ -11835,7 +11835,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.",
+          "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.\n\n自動翻訳: モードが提示された後に発せられる。ionModalDidPresent の略記です。",
           "docsTags": []
         },
         {
@@ -11844,7 +11844,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal breakpoint has changed.",
+          "docs": "Emitted after the modal breakpoint has changed.\n\n自動翻訳: モードブレークポイントが変更された後に発せられる。",
           "docsTags": []
         },
         {
@@ -11853,7 +11853,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has dismissed.",
+          "docs": "Emitted after the modal has dismissed.\n\n自動翻訳: モーダルが終了した後に発行されます。",
           "docsTags": []
         },
         {
@@ -11862,7 +11862,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has presented.",
+          "docs": "Emitted after the modal has presented.\n\n自動翻訳: モードが提示された後に発せられる。",
           "docsTags": []
         },
         {
@@ -11871,7 +11871,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has dismissed.",
+          "docs": "Emitted before the modal has dismissed.\n\n自動翻訳: モーダルが解散する前に発行される。",
           "docsTags": []
         },
         {
@@ -11880,7 +11880,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has presented.",
+          "docs": "Emitted before the modal has presented.\n\n自動翻訳: モーダルが提示される前に発せられる。",
           "docsTags": []
         },
         {
@@ -11889,7 +11889,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.",
+          "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.\n\n自動翻訳: モーダルが解散する前に発せられる。ionModalWillDismiss の略記です。",
           "docsTags": []
         },
         {
@@ -11898,7 +11898,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.",
+          "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.\n\n自動翻訳: モーダルが提示される前に発せられる。ionModalWillPresent の略記です。",
           "docsTags": []
         }
       ],
@@ -11907,82 +11907,82 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop"
+          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the modal content"
+          "docs": "Background of the modal content\n\n自動翻訳: モーダルコンテンツの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the modal content"
+          "docs": "Border color of the modal content\n\n自動翻訳: モーダルコンテンツのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the modal content"
+          "docs": "Border radius of the modal content\n\n自動翻訳: モーダルコンテンツのボーダー半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the modal content"
+          "docs": "Border style of the modal content\n\n自動翻訳: モーダルコンテンツのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the modal content"
+          "docs": "Border width of the modal content\n\n自動翻訳: モーダルコンテンツのボーダー幅"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the modal"
+          "docs": "Height of the modal\n\n自動翻訳: モーダルの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the modal"
+          "docs": "Maximum height of the modal\n\n自動翻訳: モーダルの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the modal"
+          "docs": "Maximum width of the modal\n\n自動翻訳: モーダルの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the modal"
+          "docs": "Minimum height of the modal\n\n自動翻訳: モーダルの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the modal"
+          "docs": "Minimum width of the modal\n\n自動翻訳: モーダルの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the modal"
+          "docs": "Width of the modal\n\n自動翻訳: モーダルの幅"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed inside of the `.modal-content` element."
+          "docs": "Content is placed inside of the `.modal-content` element.\n\n自動翻訳: コンテンツは `.modal-content` 要素の内側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "backdrop",
-          "docs": "The `ion-backdrop` element."
+          "docs": "The `ion-backdrop` element.\n\n自動翻訳: ion-backdrop`要素です。"
         },
         {
           "name": "content",
-          "docs": "The wrapper element for the default slot."
+          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトスロットのラッパー要素です。"
         },
         {
           "name": "handle",
-          "docs": "The handle that is displayed at the top of the sheet modal when `handle=\"true\"`."
+          "docs": "The handle that is displayed at the top of the sheet modal when `handle=\"true\"`.\n\n自動翻訳: handle=\"true\"`のときにシートモーダルの上部に表示されるハンドルです。"
         }
       ],
       "dependents": [],
@@ -12009,7 +12009,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.",
+          "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用する。",
           "docsTags": [],
           "values": [
             {
@@ -12039,7 +12039,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.",
+          "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用する。",
           "docsTags": [],
           "values": [
             {
@@ -12057,7 +12057,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The transition animation when navigating to another page.",
+          "docs": "The transition animation when navigating to another page.\n\n自動翻訳: 別ページに移動する際の遷移アニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -12076,7 +12076,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "The transition direction when navigating to another page.",
+          "docs": "The transition direction when navigating to another page.\n\n自動翻訳: 別ページに移動する際の遷移方向です。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -12121,7 +12121,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the nav should animate the transition of components.",
+          "docs": "If `true`, the nav should animate the transition of components.\n\n自動翻訳: `true`の場合、コンポーネントの遷移をアニメーションで表現する。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12137,7 +12137,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions.",
+          "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions.\n\n自動翻訳: デフォルトでは、`ion-nav` はモード（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
           "docsTags": [],
           "values": [
             {
@@ -12156,7 +12156,7 @@
           "mutable": false,
           "attr": "root",
           "reflectToAttr": false,
-          "docs": "Root NavComponent to load",
+          "docs": "Root NavComponent to load\n\n自動翻訳: ロードするルートNavComponent",
           "docsTags": [],
           "values": [
             {
@@ -12186,7 +12186,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Any parameters for the root component",
+          "docs": "Any parameters for the root component\n\n自動翻訳: ルートコンポーネントの任意のパラメータ",
           "docsTags": [],
           "values": [
             {
@@ -12205,7 +12205,7 @@
           "mutable": true,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
-          "docs": "If the nav component should allow for swipe-to-go-back.",
+          "docs": "If the nav component should allow for swipe-to-go-back.\n\n自動翻訳: ナビコンポーネントがスワイプで戻ることができるようにする場合。",
           "docsTags": [],
           "values": [
             {
@@ -12228,7 +12228,7 @@
           },
           "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` if the current view can go back.",
+          "docs": "Returns `true` if the current view can go back.\n\n自動翻訳: 現在のビューが戻ることができる場合は `true` を返します。",
           "docsTags": [
             {
               "name": "param",
@@ -12244,7 +12244,7 @@
           },
           "signature": "getActive() => Promise<ViewController | undefined>",
           "parameters": [],
-          "docs": "Get the active view.",
+          "docs": "Get the active view.\n\n自動翻訳: アクティブビューを取得します。",
           "docsTags": []
         },
         {
@@ -12255,7 +12255,7 @@
           },
           "signature": "getByIndex(index: number) => Promise<ViewController | undefined>",
           "parameters": [],
-          "docs": "Get the view at the specified index.",
+          "docs": "Get the view at the specified index.\n\n自動翻訳: 指定されたインデックスにあるビューを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -12271,7 +12271,7 @@
           },
           "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
           "parameters": [],
-          "docs": "Get the previous view.",
+          "docs": "Get the previous view.\n\n自動翻訳: 前のビューを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -12287,7 +12287,7 @@
           },
           "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
+          "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.\n\n自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。",
           "docsTags": [
             {
               "name": "param",
@@ -12319,7 +12319,7 @@
           },
           "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
+          "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.\n\n自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入する。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
           "docsTags": [
             {
               "name": "param",
@@ -12347,7 +12347,7 @@
           },
           "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
+          "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.\n\n自動翻訳: ナビゲーションスタックからコンポーネントをポップオフする。現在のコンポーネントからナビゲートして戻る。",
           "docsTags": [
             {
               "name": "param",
@@ -12367,7 +12367,7 @@
           },
           "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Pop to a specific index in the navigation stack.",
+          "docs": "Pop to a specific index in the navigation stack.\n\n自動翻訳: ナビゲーションスタック内の特定のインデックスにポップします。",
           "docsTags": [
             {
               "name": "param",
@@ -12391,7 +12391,7 @@
           },
           "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Navigate back to the root of the stack, no matter how far back that is.",
+          "docs": "Navigate back to the root of the stack, no matter how far back that is.\n\n自動翻訳: スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。",
           "docsTags": [
             {
               "name": "param",
@@ -12411,7 +12411,7 @@
           },
           "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
+          "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.\n\n自動翻訳: 新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。",
           "docsTags": [
             {
               "name": "param",
@@ -12439,7 +12439,7 @@
           },
           "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Removes a component from the navigation stack at the specified index.",
+          "docs": "Removes a component from the navigation stack at the specified index.\n\n自動翻訳: 指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。",
           "docsTags": [
             {
               "name": "param",
@@ -12467,7 +12467,7 @@
           },
           "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
+          "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.\n\n自動翻訳: 現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。",
           "docsTags": [
             {
               "name": "param",
@@ -12491,7 +12491,7 @@
           },
           "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Set the root for the current navigation stack to a component.",
+          "docs": "Set the root for the current navigation stack to a component.\n\n自動翻訳: 現在のナビゲーションスタックのルートをコンポーネントに設定します。",
           "docsTags": [
             {
               "name": "param",
@@ -12519,7 +12519,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the nav has changed components",
+          "docs": "Event fired when the nav has changed components\n\n自動翻訳: ナビのコンポーネントが変更されたときに発生するイベント",
           "docsTags": []
         },
         {
@@ -12528,7 +12528,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the nav will change components",
+          "docs": "Event fired when the nav will change components\n\n自動翻訳: ナビコンポーネントが変更されたときに発生するイベント",
           "docsTags": []
         }
       ],
@@ -12559,7 +12559,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -12614,7 +12614,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -12637,7 +12637,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the note"
+          "docs": "Color of the note\n\n自動翻訳: ノートの色"
         }
       ],
       "slots": [],
@@ -12671,7 +12671,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the picker will animate.",
+          "docs": "If `true`, the picker will animate.\n\n自動翻訳: `true`の場合、ピッカーはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12688,7 +12688,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the picker will be dismissed when the backdrop is clicked.",
+          "docs": "If `true`, the picker will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとピッカーが解除される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12704,7 +12704,7 @@
           "type": "PickerButton[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of buttons to be displayed at the top of the picker.",
+          "docs": "Array of buttons to be displayed at the top of the picker.\n\n自動翻訳: ピッカーの上部に表示されるボタンの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -12720,7 +12720,7 @@
           "type": "PickerColumn[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of columns to be displayed in the picker.",
+          "docs": "Array of columns to be displayed in the picker.\n\n自動翻訳: ピッカーに表示されるカラムの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -12737,7 +12737,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
+          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -12759,7 +12759,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "Number of milliseconds to wait before dismissing the picker.",
+          "docs": "Number of milliseconds to wait before dismissing the picker.\n\n自動翻訳: ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -12775,7 +12775,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the picker is presented.",
+          "docs": "Animation to use when the picker is presented.\n\n自動翻訳: ピッカーが表示されたときに使用するアニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -12793,7 +12793,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the picker.",
+          "docs": "Additional attributes to pass to the picker.\n\n自動翻訳: ピッカーに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -12812,7 +12812,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12828,7 +12828,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the picker is dismissed.",
+          "docs": "Animation to use when the picker is dismissed.\n\n自動翻訳: ピッカーが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -12847,7 +12847,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -12868,7 +12868,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the picker.",
+          "docs": "If `true`, a backdrop will be displayed behind the picker.\n\n自動翻訳: `true`の場合、ピッカーの後ろに背景が表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12889,7 +12889,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the picker overlay after it has been presented.",
+          "docs": "Dismiss the picker overlay after it has been presented.\n\n自動翻訳: ピッカー・オーバーレイが表示された後、それを解除する。",
           "docsTags": [
             {
               "name": "param",
@@ -12909,7 +12909,7 @@
           },
           "signature": "getColumn(name: string) => Promise<PickerColumn | undefined>",
           "parameters": [],
-          "docs": "Get the column that matches the specified name.",
+          "docs": "Get the column that matches the specified name.\n\n自動翻訳: 指定された名前に一致するカラムを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -12925,7 +12925,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the picker did dismiss.",
+          "docs": "Returns a promise that resolves when the picker did dismiss.\n\n自動翻訳: ピッカーが解散したことを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -12936,7 +12936,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the picker will dismiss.",
+          "docs": "Returns a promise that resolves when the picker will dismiss.\n\n自動翻訳: ピッカーが解散するタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -12947,7 +12947,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the picker overlay after it has been created.",
+          "docs": "Present the picker overlay after it has been created.\n\n自動翻訳: ピッカー・オーバーレイを作成した後に提示する。",
           "docsTags": []
         }
       ],
@@ -12958,7 +12958,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has dismissed.",
+          "docs": "Emitted after the picker has dismissed.\n\n自動翻訳: ピッカーが解散した後に発せられる。",
           "docsTags": []
         },
         {
@@ -12967,7 +12967,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has presented.",
+          "docs": "Emitted after the picker has presented.\n\n自動翻訳: ピッカーが提示された後に発せられる。",
           "docsTags": []
         },
         {
@@ -12976,7 +12976,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has dismissed.",
+          "docs": "Emitted before the picker has dismissed.\n\n自動翻訳: ピッカーが解散する前に発行される。",
           "docsTags": []
         },
         {
@@ -12985,7 +12985,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has presented.",
+          "docs": "Emitted before the picker has presented.\n\n自動翻訳: ピッカーが提示される前に発せられる。",
           "docsTags": []
         }
       ],
@@ -12994,67 +12994,67 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop"
+          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the picker"
+          "docs": "Background of the picker\n\n自動翻訳: ピッカーの背景"
         },
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "Background of the picker in rgb format"
+          "docs": "Background of the picker in rgb format\n\n自動翻訳: ピッカーの背景（rgb形式"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the picker"
+          "docs": "Border color of the picker\n\n自動翻訳: ピッカーのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the picker"
+          "docs": "Border radius of the picker\n\n自動翻訳: ピッカーのボーダー半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the picker"
+          "docs": "Border style of the picker\n\n自動翻訳: ピッカーのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the picker"
+          "docs": "Border width of the picker\n\n自動翻訳: ピッカーのボーダー幅"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the picker"
+          "docs": "Height of the picker\n\n自動翻訳: ピッカーの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the picker"
+          "docs": "Maximum height of the picker\n\n自動翻訳: ピッカーの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the picker"
+          "docs": "Maximum width of the picker\n\n自動翻訳: ピッカーの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the picker"
+          "docs": "Minimum height of the picker\n\n自動翻訳: ピッカーの最低高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the picker"
+          "docs": "Minimum width of the picker\n\n自動翻訳: ピッカーの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the picker"
+          "docs": "Width of the picker\n\n自動翻訳: ピッカーの幅"
         }
       ],
       "slots": [],
@@ -13106,7 +13106,7 @@
           "mutable": true,
           "attr": "alignment",
           "reflectToAttr": false,
-          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.",
+          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.\n\n自動翻訳: ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `'center'` で、`md` モードでは `'start'` です。",
           "docsTags": [],
           "values": [
             {
@@ -13134,7 +13134,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will animate.",
+          "docs": "If `true`, the popover will animate.\n\n自動翻訳: `true`の場合、ポップオーバーはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13151,7 +13151,7 @@
           "mutable": false,
           "attr": "arrow",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode.",
+          "docs": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode.\n\n自動翻訳: `true`の場合、`ios`モードで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。md` モードでは適用されない。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13168,7 +13168,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will be dismissed when the backdrop is clicked.",
+          "docs": "If `true`, the popover will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされたときにポップオーバーが解除される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13185,7 +13185,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`.",
+          "docs": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`.\n\n自動翻訳: ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでよい。",
           "docsTags": [],
           "values": [
             {
@@ -13212,7 +13212,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component.",
+          "docs": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component.\n\n自動翻訳: ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。",
           "docsTags": [],
           "values": [
             {
@@ -13231,7 +13231,7 @@
           "mutable": false,
           "attr": "dismiss-on-select",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will be automatically\ndismissed when the content has been clicked.",
+          "docs": "If `true`, the popover will be automatically\ndismissed when the content has been clicked.\n\n自動翻訳: `true`の場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13247,7 +13247,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the popover is presented.",
+          "docs": "Animation to use when the popover is presented.\n\n自動翻訳: ポップオーバーが表示されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -13266,7 +13266,7 @@
           "mutable": false,
           "attr": "event",
           "reflectToAttr": false,
-          "docs": "The event to pass to the popover animation.",
+          "docs": "The event to pass to the popover animation.\n\n自動翻訳: ポップオーバー・アニメーションに渡すイベントです。",
           "docsTags": [],
           "values": [
             {
@@ -13281,7 +13281,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the popover.",
+          "docs": "Additional attributes to pass to the popover.\n\n自動翻訳: ポップオーバーに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -13300,7 +13300,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will open. If `false`, the popover will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the popoverController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe popover dismisses. You will need to do that in your code.",
+          "docs": "If `true`, the popover will open. If `false`, the popover will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the popoverController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe popover dismisses. You will need to do that in your code.\n\n自動翻訳: `true`の場合、ポップオーバーは開く。もし `false` ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または `trigger` プロパティを使用します。注意: ポップオーバーが閉じると `isOpen` は自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13317,7 +13317,7 @@
           "mutable": false,
           "attr": "keep-contents-mounted",
           "reflectToAttr": false,
-          "docs": "If `true`, the component passed into `ion-popover` will\nautomatically be mounted when the popover is created. The\ncomponent will remain mounted even when the popover is dismissed.\nHowever, the component will be destroyed when the popover is\ndestroyed. This property is not reactive and should only be\nused when initially creating a popover.\n\nNote: This feature only applies to inline popovers in JavaScript\nframeworks such as Angular, React, and Vue.",
+          "docs": "If `true`, the component passed into `ion-popover` will\nautomatically be mounted when the popover is created. The\ncomponent will remain mounted even when the popover is dismissed.\nHowever, the component will be destroyed when the popover is\ndestroyed. This property is not reactive and should only be\nused when initially creating a popover.\n\nNote: This feature only applies to inline popovers in JavaScript\nframeworks such as Angular, React, and Vue.\n\n自動翻訳: `true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。  注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13334,7 +13334,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13350,7 +13350,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the popover is dismissed.",
+          "docs": "Animation to use when the popover is dismissed.\n\n自動翻訳: ポップオーバーが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -13369,7 +13369,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -13390,7 +13390,7 @@
           "mutable": false,
           "attr": "reference",
           "reflectToAttr": false,
-          "docs": "Describes what to position the popover relative to.\nIf `'trigger'`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `'event'`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
+          "docs": "Describes what to position the popover relative to.\nIf `'trigger'`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `'event'`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.\n\n自動翻訳: ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
           "docsTags": [],
           "default": "'trigger'",
           "values": [
@@ -13412,7 +13412,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the popover.\nThis property controls whether or not the backdrop\ndarkens the screen when the popover is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.",
+          "docs": "If `true`, a backdrop will be displayed behind the popover.\nThis property controls whether or not the backdrop\ndarkens the screen when the popover is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.\n\n自動翻訳: `true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、またはDOMに存在するかどうかを制御しません。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13429,7 +13429,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.",
+          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.\n\n自動翻訳: ポップオーバーを `reference` ポイントのどちら側に配置するかを記述する。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -13467,7 +13467,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "Describes how to calculate the popover width.\nIf `'cover'`, the popover width will match the width of the trigger.\nIf `'auto'`, the popover width will be determined by the content in\nthe popover.",
+          "docs": "Describes how to calculate the popover width.\nIf `'cover'`, the popover width will match the width of the trigger.\nIf `'auto'`, the popover width will be determined by the content in\nthe popover.\n\n自動翻訳: ポップオーバーの幅を計算する方法を説明します。cover'` の場合、ポップオーバーの幅はトリガーの幅と一致します。auto'` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定されます。",
           "docsTags": [],
           "default": "'auto'",
           "values": [
@@ -13489,7 +13489,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ポップオーバーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13506,7 +13506,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the popover to open. Use the `trigger-action`\nproperty to customize the interaction that results in\nthe popover opening.",
+          "docs": "An ID corresponding to the trigger element that\ncauses the popover to open. Use the `trigger-action`\nproperty to customize the interaction that results in\nthe popover opening.\n\n自動翻訳: ポップオーバーを開かせるトリガー要素に対応するIDです。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。",
           "docsTags": [],
           "values": [
             {
@@ -13525,7 +13525,7 @@
           "mutable": false,
           "attr": "trigger-action",
           "reflectToAttr": false,
-          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
+          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.\n\n自動翻訳: どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述する。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
           "docsTags": [],
           "default": "'click'",
           "values": [
@@ -13555,7 +13555,7 @@
           },
           "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the popover overlay after it has been presented.",
+          "docs": "Dismiss the popover overlay after it has been presented.\n\n自動翻訳: ポップオーバーオーバーレイが提示された後、それを解除する。",
           "docsTags": [
             {
               "name": "param",
@@ -13579,7 +13579,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the popover did dismiss.",
+          "docs": "Returns a promise that resolves when the popover did dismiss.\n\n自動翻訳: ポップオーバーが解除されたタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -13590,7 +13590,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the popover will dismiss.",
+          "docs": "Returns a promise that resolves when the popover will dismiss.\n\n自動翻訳: ポップオーバーが解除されるタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -13601,7 +13601,7 @@
           },
           "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
           "parameters": [],
-          "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
+          "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.\n\n自動翻訳: ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。",
           "docsTags": []
         }
       ],
@@ -13612,7 +13612,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has dismissed.\nShorthand for ionPopoverDidDismiss.",
+          "docs": "Emitted after the popover has dismissed.\nShorthand for ionPopoverDidDismiss.\n\n自動翻訳: ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13621,7 +13621,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has presented.\nShorthand for ionPopoverWillDismiss.",
+          "docs": "Emitted after the popover has presented.\nShorthand for ionPopoverWillDismiss.\n\n自動翻訳: ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13630,7 +13630,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has dismissed.",
+          "docs": "Emitted after the popover has dismissed.\n\n自動翻訳: ポップオーバーが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -13639,7 +13639,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has presented.",
+          "docs": "Emitted after the popover has presented.\n\n自動翻訳: ポップオーバーが表示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -13648,7 +13648,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has dismissed.",
+          "docs": "Emitted before the popover has dismissed.\n\n自動翻訳: ポップオーバーが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -13657,7 +13657,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has presented.",
+          "docs": "Emitted before the popover has presented.\n\n自動翻訳: ポップオーバーが表示される前に発行されます。",
           "docsTags": []
         },
         {
@@ -13666,7 +13666,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.",
+          "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.\n\n自動翻訳: ポップオーバーが解散する前に発せられる。ionPopoverWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13675,7 +13675,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has presented.\nShorthand for ionPopoverWillPresent.",
+          "docs": "Emitted before the popover has presented.\nShorthand for ionPopoverWillPresent.\n\n自動翻訳: ポップオーバーが提示される前に発行されます。ionPopoverWillPresentの略記です。",
           "docsTags": []
         }
       ],
@@ -13684,77 +13684,77 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop"
+          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the popover"
+          "docs": "Background of the popover\n\n自動翻訳: ポップオーバーの背景"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the popover"
+          "docs": "Box shadow of the popover\n\n自動翻訳: ポップオーバーのボックスシャドウ"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the popover"
+          "docs": "Height of the popover\n\n自動翻訳: ポップオーバーの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the popover"
+          "docs": "Maximum height of the popover\n\n自動翻訳: ポップオーバーの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the popover"
+          "docs": "Maximum width of the popover\n\n自動翻訳: ポップオーバーの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the popover"
+          "docs": "Minimum height of the popover\n\n自動翻訳: ポップオーバーの高さの最小値"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the popover"
+          "docs": "Minimum width of the popover\n\n自動翻訳: ポップオーバーの最小幅"
         },
         {
           "name": "--offset-x",
           "annotation": "prop",
-          "docs": "The amount to move the popover by on the x-axis"
+          "docs": "The amount to move the popover by on the x-axis\n\n自動翻訳: ポップオーバーをX軸方向に移動させる量"
         },
         {
           "name": "--offset-y",
           "annotation": "prop",
-          "docs": "The amount to move the popover by on the y-axis"
+          "docs": "The amount to move the popover by on the y-axis\n\n自動翻訳: ポップオーバーをY軸方向に移動させる量を指定します。"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the popover"
+          "docs": "Width of the popover\n\n自動翻訳: ポップオーバーの幅"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed inside of the `.popover-content` element."
+          "docs": "Content is placed inside of the `.popover-content` element.\n\n自動翻訳: コンテンツは `.popover-content` 要素の内部に配置される。"
         }
       ],
       "parts": [
         {
           "name": "arrow",
-          "docs": "The arrow that points to the reference element. Only applies on `ios` mode."
+          "docs": "The arrow that points to the reference element. Only applies on `ios` mode.\n\n自動翻訳: 参照要素を指し示す矢印。ios`モード時のみ適用される。"
         },
         {
           "name": "backdrop",
-          "docs": "The `ion-backdrop` element."
+          "docs": "The `ion-backdrop` element.\n\n自動翻訳: ion-backdrop`要素です。"
         },
         {
           "name": "content",
-          "docs": "The wrapper element for the default slot."
+          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトスロットのラッパー要素です。"
         }
       ],
       "dependents": [
@@ -13807,7 +13807,7 @@
           "mutable": false,
           "attr": "buffer",
           "reflectToAttr": false,
-          "docs": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1].",
+          "docs": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1].\n\n自動翻訳: バッファと値が1より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -13824,7 +13824,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -13879,7 +13879,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -13900,7 +13900,7 @@
           "mutable": false,
           "attr": "reversed",
           "reflectToAttr": false,
-          "docs": "If true, reverse the progress bar direction.",
+          "docs": "If true, reverse the progress bar direction.\n\n自動翻訳: true の場合、プログレスバーの方向を反転させます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13917,7 +13917,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).",
+          "docs": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).\n\n自動翻訳: 処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate\"` (アニメーションなし), `\"indeterminate\"` (左から右へアニメーションする).",
           "docsTags": [],
           "default": "'determinate'",
           "values": [
@@ -13939,7 +13939,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].",
+          "docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].\n\n自動翻訳: この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものである。値は [0, 1] の間であるべきです。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -13958,32 +13958,32 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the progress track, or the buffer bar if `buffer` is set"
+          "docs": "Background of the progress track, or the buffer bar if `buffer` is set\n\n自動翻訳: プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。"
         },
         {
           "name": "--buffer-background",
           "annotation": "prop",
-          "docs": "DEPRECATED, use `--background` instead"
+          "docs": "DEPRECATED, use `--background` instead\n\n自動翻訳: DEPRECATED、代わりに `--background` を使用する。"
         },
         {
           "name": "--progress-background",
           "annotation": "prop",
-          "docs": "Background of the progress bar representing the current value"
+          "docs": "Background of the progress bar representing the current value\n\n自動翻訳: 現在値を表すプログレスバーの背景"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "progress",
-          "docs": "The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`."
+          "docs": "The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`.\n\n自動翻訳: type`が`\"determinate\"`のときは現在値を表示し、`type`が`\"indeterminate\"`のときは前後にスライドするプログレスバーです。"
         },
         {
           "name": "stream",
-          "docs": "The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`."
+          "docs": "The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`.\n\n自動翻訳: バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `\"determinate\"` のときのみ表示される。"
         },
         {
           "name": "track",
-          "docs": "The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the\nwidth of the `buffer` value."
+          "docs": "The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the\nwidth of the `buffer` value.\n\n自動翻訳: プログレスバーの後ろにあるトラックバーです。buffer`プロパティが設定され、`type`が `\"determinate\"` である場合、トラックは `buffer` 値の幅となる。"
         }
       ],
       "dependents": [],
@@ -14004,7 +14004,7 @@
           "mutable": false,
           "attr": "allow-empty-selection",
           "reflectToAttr": false,
-          "docs": "If `true`, the radios can be deselected.",
+          "docs": "If `true`, the radios can be deselected.\n\n自動翻訳: `true`の場合、ラジオを非選択にすることができる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14021,7 +14021,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -14038,7 +14038,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the radio group.",
+          "docs": "the value of the radio group.\n\n自動翻訳: 無線グループの値です。",
           "docsTags": [],
           "values": [
             {
@@ -14057,7 +14057,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
           "docsTags": []
         }
       ],
@@ -14109,7 +14109,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -14164,7 +14164,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the radio.",
+          "docs": "If `true`, the user cannot interact with the radio.\n\n自動翻訳: `true`の場合、ユーザはラジオと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14181,7 +14181,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -14202,7 +14202,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -14219,7 +14219,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the radio.",
+          "docs": "the value of the radio.\n\n自動翻訳: は、無線機の値です。",
           "docsTags": [],
           "values": [
             {
@@ -14238,7 +14238,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the radio button loses focus.",
+          "docs": "Emitted when the radio button loses focus.\n\n自動翻訳: ラジオボタンのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -14247,7 +14247,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the radio button has focus.",
+          "docs": "Emitted when the radio button has focus.\n\n自動翻訳: ラジオボタンにフォーカスが当たったときに発せられる。",
           "docsTags": []
         }
       ],
@@ -14256,33 +14256,33 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the radio"
+          "docs": "Border radius of the radio\n\n自動翻訳: 無線機のボーダー半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the radio"
+          "docs": "Color of the radio\n\n自動翻訳: ラジオのカラー"
         },
         {
           "name": "--color-checked",
           "annotation": "prop",
-          "docs": "Color of the checked radio"
+          "docs": "Color of the checked radio\n\n自動翻訳: チェックしたラジオの色"
         },
         {
           "name": "--inner-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the inner checked radio"
+          "docs": "Border radius of the inner checked radio\n\n自動翻訳: 内側のチェック付きラジオのボーダー半径"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "container",
-          "docs": "The container for the radio mark."
+          "docs": "The container for the radio mark.\n\n自動翻訳: ラジオマークの入れ物です。"
         },
         {
           "name": "mark",
-          "docs": "The checkmark or dot used to indicate the checked state."
+          "docs": "The checkmark or dot used to indicate the checked state.\n\n自動翻訳: チェックされた状態を示すために使用されるチェックマークまたはドットです。"
         }
       ],
       "dependents": [
@@ -14346,7 +14346,7 @@
           "mutable": true,
           "attr": "active-bar-start",
           "reflectToAttr": false,
-          "docs": "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\").\nValid values are greater than or equal to the min value and less than or equal to the max value.",
+          "docs": "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\").\nValid values are greater than or equal to the min value and less than or equal to the max value.\n\n自動翻訳: レンジアクティブバーの開始位置です。この機能は、ノブが1つの場合のみ有効です（dualKnobs=\"false\"）。有効な値は、min値以上、max値以下です。",
           "docsTags": [],
           "values": [
             {
@@ -14365,7 +14365,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -14420,7 +14420,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.",
+          "docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: 範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -14437,7 +14437,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the range.",
+          "docs": "If `true`, the user cannot interact with the range.\n\n自動翻訳: `true`の場合、ユーザは範囲と対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14454,7 +14454,7 @@
           "mutable": false,
           "attr": "dual-knobs",
           "reflectToAttr": false,
-          "docs": "Show two knobs.",
+          "docs": "Show two knobs.\n\n自動翻訳: 2つのノブを表示する。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14471,7 +14471,7 @@
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "Maximum integer value of the range.",
+          "docs": "Maximum integer value of the range.\n\n自動翻訳: 範囲の最大整数値。",
           "docsTags": [],
           "default": "100",
           "values": [
@@ -14488,7 +14488,7 @@
           "mutable": false,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "Minimum integer value of the range.",
+          "docs": "Minimum integer value of the range.\n\n自動翻訳: 範囲の最小の整数値。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -14505,7 +14505,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -14526,7 +14526,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -14543,7 +14543,7 @@
           "mutable": false,
           "attr": "pin",
           "reflectToAttr": false,
-          "docs": "If `true`, a pin with integer value is shown when the knob\nis pressed.",
+          "docs": "If `true`, a pin with integer value is shown when the knob\nis pressed.\n\n自動翻訳: `true`の場合、ノブを押したときに整数値のピンが表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14559,7 +14559,7 @@
           "type": "(value: number) => string | number",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.",
+          "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.\n\n自動翻訳: ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。",
           "docsTags": [],
           "default": "(value: number): number => Math.round(value)",
           "values": [
@@ -14579,7 +14579,7 @@
           "mutable": false,
           "attr": "snaps",
           "reflectToAttr": false,
-          "docs": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value.",
+          "docs": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value.\n\n自動翻訳: `true`の場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14596,7 +14596,7 @@
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
-          "docs": "Specifies the value granularity.",
+          "docs": "Specifies the value granularity.\n\n自動翻訳: 値の粒度を指定する。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -14613,7 +14613,7 @@
           "mutable": false,
           "attr": "ticks",
           "reflectToAttr": false,
-          "docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.",
+          "docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.\n\n自動翻訳: `true`の場合、ステップの値に基づいてティックマークを表示する。snaps`が `true` の場合のみ適用される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -14630,7 +14630,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the range.",
+          "docs": "the value of the range.\n\n自動翻訳: 範囲の値です。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -14653,7 +14653,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the range loses focus.",
+          "docs": "Emitted when the range loses focus.\n\n自動翻訳: レンジの焦点が合わなくなったときに発する。",
           "docsTags": []
         },
         {
@@ -14662,7 +14662,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.",
+          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行される。",
           "docsTags": []
         },
         {
@@ -14671,7 +14671,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the range has focus.",
+          "docs": "Emitted when the range has focus.\n\n自動翻訳: レンジのフォーカスが合ったときに発する。",
           "docsTags": []
         },
         {
@@ -14680,7 +14680,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user finishes moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
+          "docs": "Emitted when the user finishes moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.\n\n自動翻訳: マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -14689,7 +14689,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user starts moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
+          "docs": "Emitted when the user starts moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.\n\n自動翻訳: マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。",
           "docsTags": []
         }
       ],
@@ -14698,93 +14698,93 @@
         {
           "name": "--bar-background",
           "annotation": "prop",
-          "docs": "Background of the range bar"
+          "docs": "Background of the range bar\n\n自動翻訳: レンジバーの背景"
         },
         {
           "name": "--bar-background-active",
           "annotation": "prop",
-          "docs": "Background of the active range bar"
+          "docs": "Background of the active range bar\n\n自動翻訳: アクティブレンジバーの背景"
         },
         {
           "name": "--bar-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the range bar"
+          "docs": "Border radius of the range bar\n\n自動翻訳: レンジバーのボーダー半径"
         },
         {
           "name": "--bar-height",
           "annotation": "prop",
-          "docs": "Height of the range bar"
+          "docs": "Height of the range bar\n\n自動翻訳: レンジバーの高さ"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the range"
+          "docs": "Height of the range\n\n自動翻訳: レンジの高さ"
         },
         {
           "name": "--knob-background",
           "annotation": "prop",
-          "docs": "Background of the range knob"
+          "docs": "Background of the range knob\n\n自動翻訳: レンジノブの背景"
         },
         {
           "name": "--knob-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the range knob"
+          "docs": "Border radius of the range knob\n\n自動翻訳: レンジツマミのボーダー半径"
         },
         {
           "name": "--knob-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the range knob"
+          "docs": "Box shadow of the range knob\n\n自動翻訳: レンジノブのボックスシャドウ"
         },
         {
           "name": "--knob-size",
           "annotation": "prop",
-          "docs": "Size of the range knob"
+          "docs": "Size of the range knob\n\n自動翻訳: レンジツマミの大きさ"
         },
         {
           "name": "--pin-background",
           "annotation": "prop",
-          "docs": "Background of the range pin (only available in MD mode)"
+          "docs": "Background of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの背景（MDモード時のみ有効）"
         },
         {
           "name": "--pin-color",
           "annotation": "prop",
-          "docs": "Color of the range pin (only available in MD mode)"
+          "docs": "Color of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの色（MDモード時のみ有効）"
         }
       ],
       "slots": [
         {
           "name": "end",
-          "docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL."
+          "docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL."
+          "docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "bar",
-          "docs": "The inactive part of the bar."
+          "docs": "The inactive part of the bar.\n\n自動翻訳: バーの非アクティブな部分。"
         },
         {
           "name": "bar-active",
-          "docs": "The active part of the bar."
+          "docs": "The active part of the bar.\n\n自動翻訳: バーのアクティブな部分です。"
         },
         {
           "name": "knob",
-          "docs": "The handle that is used to drag the range."
+          "docs": "The handle that is used to drag the range.\n\n自動翻訳: 範囲をドラッグする際に使用するハンドル。"
         },
         {
           "name": "pin",
-          "docs": "The counter that appears above a knob."
+          "docs": "The counter that appears above a knob.\n\n自動翻訳: ノブの上に表示されるカウンターです。"
         },
         {
           "name": "tick",
-          "docs": "An inactive tick mark."
+          "docs": "An inactive tick mark.\n\n自動翻訳: 非アクティブなティックマークです。"
         },
         {
           "name": "tick-active",
-          "docs": "An active tick mark."
+          "docs": "An active tick mark.\n\n自動翻訳: アクティブなティックマークです。"
         }
       ],
       "dependents": [],
@@ -14805,7 +14805,7 @@
           "mutable": true,
           "attr": "pulling-icon",
           "reflectToAttr": false,
-          "docs": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices.",
+          "docs": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices.\n\n自動翻訳: プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOSデバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。",
           "docsTags": [],
           "values": [
             {
@@ -14827,7 +14827,7 @@
           "mutable": false,
           "attr": "pulling-text",
           "reflectToAttr": false,
-          "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+          "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "values": [
             {
@@ -14849,7 +14849,7 @@
           "mutable": true,
           "attr": "refreshing-spinner",
           "reflectToAttr": false,
-          "docs": "An animated SVG spinner that shows when refreshing begins",
+          "docs": "An animated SVG spinner that shows when refreshing begins\n\n自動翻訳: リフレッシュ開始を示すアニメーションSVGスピナー",
           "docsTags": [],
           "values": [
             {
@@ -14904,7 +14904,7 @@
           "mutable": false,
           "attr": "refreshing-text",
           "reflectToAttr": false,
-          "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+          "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "values": [
             {
@@ -14953,7 +14953,7 @@
           "mutable": false,
           "attr": "close-duration",
           "reflectToAttr": false,
-          "docs": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
+          "docs": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
           "docsTags": [],
           "default": "'280ms'",
           "values": [
@@ -14970,7 +14970,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the refresher will be hidden.",
+          "docs": "If `true`, the refresher will be hidden.\n\n自動翻訳: `true`の場合、リフレッシャーは非表示となる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14987,7 +14987,7 @@
           "mutable": false,
           "attr": "pull-factor",
           "reflectToAttr": false,
-          "docs": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
+          "docs": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: 引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。  例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。  リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -15004,7 +15004,7 @@
           "mutable": false,
           "attr": "pull-max",
           "reflectToAttr": false,
-          "docs": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when  the refresher content uses a spinner,\nenabling the native refresher.",
+          "docs": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when  the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果である。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
           "docsTags": [],
           "default": "this.pullMin + 60",
           "values": [
@@ -15021,7 +15021,7 @@
           "mutable": false,
           "attr": "pull-min",
           "reflectToAttr": false,
-          "docs": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
+          "docs": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。",
           "docsTags": [],
           "default": "60",
           "values": [
@@ -15038,7 +15038,7 @@
           "mutable": false,
           "attr": "snapback-duration",
           "reflectToAttr": false,
-          "docs": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
+          "docs": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが `refreshing` 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。",
           "docsTags": [],
           "default": "'280ms'",
           "values": [
@@ -15059,7 +15059,7 @@
           },
           "signature": "cancel() => Promise<void>",
           "parameters": [],
-          "docs": "Changes the refresher's state from `refreshing` to `cancelling`.",
+          "docs": "Changes the refresher's state from `refreshing` to `cancelling`.\n\n自動翻訳: リフレッシュの状態を `refreshing` から `cancelling` に変更する。",
           "docsTags": []
         },
         {
@@ -15070,7 +15070,7 @@
           },
           "signature": "complete() => Promise<void>",
           "parameters": [],
-          "docs": "Call `complete()` when your async operation has completed.\nFor example, the `refreshing` state is while the app is performing\nan asynchronous operation, such as receiving more data from an\nAJAX request. Once the data has been received, you then call this\nmethod to signify that the refreshing has completed and to close\nthe refresher. This method also changes the refresher's state from\n`refreshing` to `completing`.",
+          "docs": "Call `complete()` when your async operation has completed.\nFor example, the `refreshing` state is while the app is performing\nan asynchronous operation, such as receiving more data from an\nAJAX request. Once the data has been received, you then call this\nmethod to signify that the refreshing has completed and to close\nthe refresher. This method also changes the refresher's state from\n`refreshing` to `completing`.\n\n自動翻訳: 非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。",
           "docsTags": []
         },
         {
@@ -15081,7 +15081,7 @@
           },
           "signature": "getProgress() => Promise<number>",
           "parameters": [],
-          "docs": "A number representing how far down the user has pulled.\nThe number `0` represents the user hasn't pulled down at all. The\nnumber `1`, and anything greater than `1`, represents that the user\nhas pulled far enough down that when they let go then the refresh will\nhappen. If they let go and the number is less than `1`, then the\nrefresh will not happen, and the content will return to it's original\nposition.",
+          "docs": "A number representing how far down the user has pulled.\nThe number `0` represents the user hasn't pulled down at all. The\nnumber `1`, and anything greater than `1`, represents that the user\nhas pulled far enough down that when they let go then the refresh will\nhappen. If they let go and the number is less than `1`, then the\nrefresh will not happen, and the content will return to it's original\nposition.\n\n自動翻訳: ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。",
           "docsTags": []
         }
       ],
@@ -15092,7 +15092,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted while the user is pulling down the content and exposing the refresher.",
+          "docs": "Emitted while the user is pulling down the content and exposing the refresher.\n\n自動翻訳: ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発する。",
           "docsTags": []
         },
         {
@@ -15101,7 +15101,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.",
+          "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.\n\n自動翻訳: ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発せられる。リフレッシャーの状態を `refreshing` に更新する。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
           "docsTags": []
         },
         {
@@ -15110,7 +15110,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user begins to start pulling down.",
+          "docs": "Emitted when the user begins to start pulling down.\n\n自動翻訳: ユーザーが引き下げを開始するときに発する。",
           "docsTags": []
         }
       ],
@@ -15136,7 +15136,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the reorder will be hidden.",
+          "docs": "If `true`, the reorder will be hidden.\n\n自動翻訳: `true`の場合、リオーダーは非表示になる。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15157,7 +15157,7 @@
           },
           "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
           "parameters": [],
-          "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
+          "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.\n\n自動翻訳: 再注文操作を完了する。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
           "docsTags": [
             {
               "name": "param",
@@ -15173,7 +15173,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
+          "docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.\n\n自動翻訳: 再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。",
           "docsTags": []
         }
       ],
@@ -15212,7 +15212,7 @@
       "parts": [
         {
           "name": "icon",
-          "docs": "The icon of the reorder handle (uses ion-icon)."
+          "docs": "The icon of the reorder handle (uses ion-icon).\n\n自動翻訳: リオーダーハンドルのアイコンです（ion-iconを使用）。"
         }
       ],
       "dependents": [],
@@ -15239,7 +15239,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible.",
+          "docs": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible.\n\n自動翻訳: リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。  注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。",
           "docsTags": [],
           "default": "'bounded'",
           "values": [
@@ -15265,7 +15265,7 @@
           },
           "signature": "addRipple(x: number, y: number) => Promise<() => void>",
           "parameters": [],
-          "docs": "Adds the ripple effect to the parent element.",
+          "docs": "Adds the ripple effect to the parent element.\n\n自動翻訳: 親要素に波及効果を付加する。",
           "docsTags": [
             {
               "name": "param",
@@ -15359,7 +15359,7 @@
           "mutable": false,
           "attr": "from",
           "reflectToAttr": false,
-          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.",
+          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その「from」URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
           "docsTags": [],
           "values": [
             {
@@ -15375,7 +15375,7 @@
           "mutable": false,
           "attr": "to",
           "reflectToAttr": false,
-          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.",
+          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLである。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトする。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできない。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
           "docsTags": [],
           "values": [
             {
@@ -15400,7 +15400,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`ion-router` captures this event in order to update his internal registry of router rules.",
+          "docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`ion-router` captures this event in order to update his internal registry of router rules.\n\n自動翻訳: このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。",
           "docsTags": []
         }
       ],
@@ -15425,7 +15425,7 @@
           "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
+          "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.\n\n自動翻訳: ルートが入力しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
           "docsTags": [],
           "values": [
             {
@@ -15446,7 +15446,7 @@
           "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
+          "docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.\n\n自動翻訳: ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
           "docsTags": [],
           "values": [
             {
@@ -15468,7 +15468,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select.",
+          "docs": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select.\n\n自動翻訳: ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。  このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。",
           "docsTags": [],
           "values": [
             {
@@ -15483,7 +15483,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.",
+          "docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.\n\n自動翻訳: キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。",
           "docsTags": [],
           "values": [
             {
@@ -15502,7 +15502,7 @@
           "mutable": false,
           "attr": "url",
           "reflectToAttr": false,
-          "docs": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props.",
+          "docs": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props.\n\n自動翻訳: このルートを適用するために一致させる必要がある相対パスです。  expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -15522,7 +15522,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Used internally by `ion-router` to know when this route did change.",
+          "docs": "Used internally by `ion-router` to know when this route did change.\n\n自動翻訳: このルートがいつ変更されたかを知るために `ion-router` が内部で使用する。",
           "docsTags": []
         }
       ],
@@ -15548,7 +15548,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -15603,7 +15603,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -15622,7 +15622,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -15640,7 +15640,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
           "docsTags": [],
           "values": [
             {
@@ -15659,7 +15659,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -15685,7 +15685,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -15706,12 +15706,12 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the router link"
+          "docs": "Background of the router link\n\n自動翻訳: ルーターリンクの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the router link"
+          "docs": "Text color of the router link\n\n自動翻訳: ルーターリンクの文字色"
         }
       ],
       "slots": [],
@@ -15734,7 +15734,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the router-outlet should animate the transition of components.",
+          "docs": "If `true`, the router-outlet should animate the transition of components.\n\n自動翻訳: `true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15750,7 +15750,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "This property allows to create custom transition using AnimationBuilder functions.",
+          "docs": "This property allows to create custom transition using AnimationBuilder functions.\n\n自動翻訳: このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
           "docsTags": [],
           "values": [
             {
@@ -15769,7 +15769,7 @@
           "mutable": true,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "default": "getIonMode(this)",
           "values": [
@@ -15810,7 +15810,7 @@
           "mutable": false,
           "attr": "root",
           "reflectToAttr": false,
-          "docs": "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify\nan alternate prefix for all URL paths.",
+          "docs": "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify\nan alternate prefix for all URL paths.\n\n自動翻訳: URLのマッチング時に使用するルートパスです。デフォルトでは\"/\"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。",
           "docsTags": [],
           "default": "'/'",
           "values": [
@@ -15827,7 +15827,7 @@
           "mutable": false,
           "attr": "use-hash",
           "reflectToAttr": false,
-          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.",
+          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.\n\n自動翻訳: ルーターは2つの \"モード \"で動作します。- ハッシュを使用する。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15848,7 +15848,7 @@
           },
           "signature": "back() => Promise<void>",
           "parameters": [],
-          "docs": "Go back to previous page in the window.history.",
+          "docs": "Go back to previous page in the window.history.\n\n自動翻訳: window.historyで前ページに戻る。",
           "docsTags": []
         },
         {
@@ -15859,7 +15859,7 @@
           },
           "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
           "parameters": [],
-          "docs": "Navigate to the specified path.",
+          "docs": "Navigate to the specified path.\n\n自動翻訳: 指定されたパスに移動する。",
           "docsTags": [
             {
               "name": "param",
@@ -15879,7 +15879,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the route had changed",
+          "docs": "Emitted when the route had changed\n\n自動翻訳: ルートが変更されたときに発する",
           "docsTags": []
         },
         {
@@ -15888,7 +15888,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted when the route is about to change",
+          "docs": "Event emitted when the route is about to change\n\n自動翻訳: ルートが変更されようとするときに発せられるイベント",
           "docsTags": []
         }
       ],
@@ -15950,7 +15950,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, enable searchbar animation.",
+          "docs": "If `true`, enable searchbar animation.\n\n自動翻訳: `true`の場合、検索バーのアニメーションを有効にする。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -15967,7 +15967,7 @@
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
-          "docs": "Set the input's autocomplete property.",
+          "docs": "Set the input's autocomplete property.\n\n自動翻訳: 入力のオートコンプリートプロパティを設定します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -16197,7 +16197,7 @@
           "mutable": false,
           "attr": "autocorrect",
           "reflectToAttr": false,
-          "docs": "Set the input's autocorrect property.",
+          "docs": "Set the input's autocorrect property.\n\n自動翻訳: 入力のオートコレクトプロパティを設定します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -16219,7 +16219,7 @@
           "mutable": false,
           "attr": "cancel-button-icon",
           "reflectToAttr": false,
-          "docs": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`.",
+          "docs": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`.\n\n自動翻訳: キャンセルボタンのアイコンを設定する。md`モードのみに適用されます。デフォルトは `arrow-back-sharp` です。",
           "docsTags": [],
           "default": "config.get('backButtonIcon', arrowBackSharp) as string",
           "values": [
@@ -16236,7 +16236,7 @@
           "mutable": false,
           "attr": "cancel-button-text",
           "reflectToAttr": false,
-          "docs": "Set the the cancel button text. Only applies to `ios` mode.",
+          "docs": "Set the the cancel button text. Only applies to `ios` mode.\n\n自動翻訳: キャンセルボタンのテキストを設定します。ios`モードのみ適用されます。",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [
@@ -16253,7 +16253,7 @@
           "mutable": false,
           "attr": "clear-icon",
           "reflectToAttr": false,
-          "docs": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.",
+          "docs": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.\n\n自動翻訳: クリアアイコンを設定する。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
           "docsTags": [],
           "values": [
             {
@@ -16272,7 +16272,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -16327,7 +16327,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "250",
           "values": [
@@ -16344,7 +16344,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the input.",
+          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザは入力と対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16361,7 +16361,7 @@
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.\n\n自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
           "docsTags": [],
           "values": [
             {
@@ -16405,7 +16405,7 @@
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\n自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
           "docsTags": [],
           "values": [
             {
@@ -16453,7 +16453,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -16474,7 +16474,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: 入力のプレースホルダーを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "default": "'Search'",
           "values": [
@@ -16491,7 +16491,7 @@
           "mutable": false,
           "attr": "search-icon",
           "reflectToAttr": false,
-          "docs": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode.",
+          "docs": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode.\n\n自動翻訳: 検索アイコンとして使用するアイコンです。デフォルトは `ios` モードでは `search-outline` 、`md` モードでは `search-sharp` である。",
           "docsTags": [],
           "values": [
             {
@@ -16510,7 +16510,7 @@
           "mutable": false,
           "attr": "show-cancel-button",
           "reflectToAttr": false,
-          "docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.",
+          "docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.\n\n自動翻訳: キャンセルボタンに関する動作を設定する。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にする。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示する。",
           "docsTags": [],
           "default": "'never'",
           "values": [
@@ -16536,7 +16536,7 @@
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
-          "docs": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.",
+          "docs": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.\n\n自動翻訳: クリアボタンに関する動作を設定する。デフォルトは `\"focus\"` です。focus\"`に設定すると、入力が空でない場合、フォーカス時にクリアボタンを表示します。never\"`に設定すると、クリアボタンを非表示にします。always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、入力が空でない場合にのみクリアボタンを表示する。",
           "docsTags": [],
           "default": "'always'",
           "values": [
@@ -16562,7 +16562,7 @@
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
-          "docs": "If `true`, enable spellcheck on the input.",
+          "docs": "If `true`, enable spellcheck on the input.\n\n自動翻訳: `true`の場合、入力のスペルチェックを有効にする。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16579,7 +16579,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "Set the type of the input.",
+          "docs": "Set the type of the input.\n\n自動翻訳: 入力の種類を設定します。",
           "docsTags": [],
           "default": "'search'",
           "values": [
@@ -16621,7 +16621,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the searchbar.",
+          "docs": "the value of the searchbar.\n\n自動翻訳: サーチバーの値。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -16648,7 +16648,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
-          "docs": "Returns the native `<input>` element used under the hood.",
+          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: フードの下で使用されているネイティブの `<input>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -16659,7 +16659,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the specified `ion-searchbar`. Use this method instead of the global\n`input.focus()`.",
+          "docs": "Sets focus on the specified `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\n自動翻訳: 指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。",
           "docsTags": []
         }
       ],
@@ -16670,7 +16670,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.",
+          "docs": "Emitted when the input loses focus.\n\n自動翻訳: 入力のフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -16679,7 +16679,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the cancel button is clicked.",
+          "docs": "Emitted when the cancel button is clicked.\n\n自動翻訳: キャンセルボタンがクリックされたときに発せられる。",
           "docsTags": []
         },
         {
@@ -16688,7 +16688,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
           "docsTags": []
         },
         {
@@ -16697,7 +16697,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the clear input button is clicked.",
+          "docs": "Emitted when the clear input button is clicked.\n\n自動翻訳: クリア入力ボタンがクリックされたときに発せられる。",
           "docsTags": []
         },
         {
@@ -16706,7 +16706,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.",
+          "docs": "Emitted when the input has focus.\n\n自動翻訳: 入力にフォーカスが当たったときに発せられる。",
           "docsTags": []
         },
         {
@@ -16715,7 +16715,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.",
+          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発する。",
           "docsTags": []
         }
       ],
@@ -16724,57 +16724,57 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the searchbar input"
+          "docs": "Background of the searchbar input\n\n自動翻訳: サーチバー入力の背景"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the searchbar input"
+          "docs": "Border radius of the searchbar input\n\n自動翻訳: サーチバー入力のボーダー半径"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the searchbar input"
+          "docs": "Box shadow of the searchbar input\n\n自動翻訳: サーチバー入力のボックスシャドウ"
         },
         {
           "name": "--cancel-button-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar cancel button"
+          "docs": "Color of the searchbar cancel button\n\n自動翻訳: サーチバーキャンセルボタンの色"
         },
         {
           "name": "--clear-button-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar clear button"
+          "docs": "Color of the searchbar clear button\n\n自動翻訳: サーチバークリアボタンの色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the searchbar text"
+          "docs": "Color of the searchbar text\n\n自動翻訳: サーチバーテキストの色"
         },
         {
           "name": "--icon-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar icon"
+          "docs": "Color of the searchbar icon\n\n自動翻訳: 検索バーのアイコンの色"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar placeholder"
+          "docs": "Color of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the searchbar placeholder"
+          "docs": "Font style of the searchbar placeholder\n\n自動翻訳: サーチバー・プレースホルダーのフォントスタイル"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the searchbar placeholder"
+          "docs": "Font weight of the searchbar placeholder\n\n自動翻訳: サーチバー・プレースホルダーのフォントの太さ"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the searchbar placeholder"
+          "docs": "Opacity of the searchbar placeholder\n\n自動翻訳: サーチバー・プレースホルダーの不透明度"
         }
       ],
       "slots": [],
@@ -16820,7 +16820,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the segment button.",
+          "docs": "If `true`, the user cannot interact with the segment button.\n\n自動翻訳: `true`の場合、ユーザーはセグメントボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16837,7 +16837,7 @@
           "mutable": false,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Set the layout of the text and icon in the segment.",
+          "docs": "Set the layout of the text and icon in the segment.\n\n自動翻訳: セグメント内のテキストとアイコンのレイアウトを設定します。",
           "docsTags": [],
           "default": "'icon-top'",
           "values": [
@@ -16878,7 +16878,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -16899,7 +16899,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.",
+          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -16925,7 +16925,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the segment button.",
+          "docs": "The value of the segment button.\n\n自動翻訳: セグメントボタンの値です。",
           "docsTags": [],
           "default": "'ion-sb-' + ids++",
           "values": [
@@ -16944,157 +16944,157 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the segment button"
+          "docs": "Background of the segment button\n\n自動翻訳: セグメントボタンの背景"
         },
         {
           "name": "--background-checked",
           "annotation": "prop",
-          "docs": "Background of the checked segment button"
+          "docs": "Background of the checked segment button\n\n自動翻訳: チェックしたセグメントボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the segment button when focused with the tab key"
+          "docs": "Background of the segment button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスされたときのセグメントボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the segment button background when focused with the tab key"
+          "docs": "Opacity of the segment button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのセグメントボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the segment button on hover"
+          "docs": "Background of the segment button on hover\n\n自動翻訳: セグメントボタンがホバーされたときの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the segment button background on hover"
+          "docs": "Opacity of the segment button background on hover\n\n自動翻訳: ホバー時のセグメントボタンの背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the segment button border"
+          "docs": "Color of the segment button border\n\n自動翻訳: セグメントボタンのボーダーの色"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Radius of the segment button border"
+          "docs": "Radius of the segment button border\n\n自動翻訳: セグメントボタンのボーダーの半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the segment button border"
+          "docs": "Style of the segment button border\n\n自動翻訳: セグメントボタンのボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the segment button border"
+          "docs": "Width of the segment button border\n\n自動翻訳: セグメントボタンの枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the segment button"
+          "docs": "Color of the segment button\n\n自動翻訳: セグメントボタンの色"
         },
         {
           "name": "--color-checked",
           "annotation": "prop",
-          "docs": "Color of the checked segment button"
+          "docs": "Color of the checked segment button\n\n自動翻訳: チェックしたセグメントボタンの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the segment button when focused with the tab key"
+          "docs": "Color of the segment button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのセグメントボタンの色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Color of the segment button on hover"
+          "docs": "Color of the segment button on hover\n\n自動翻訳: ホバー時のセグメントボタンの色"
         },
         {
           "name": "--indicator-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow on the indicator for the checked segment button"
+          "docs": "Box shadow on the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける"
         },
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "Color of the indicator for the checked segment button"
+          "docs": "Color of the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケーターの色"
         },
         {
           "name": "--indicator-height",
           "annotation": "prop",
-          "docs": "Height of the indicator for the checked segment button"
+          "docs": "Height of the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケータの高さ"
         },
         {
           "name": "--indicator-transform",
           "annotation": "prop",
-          "docs": "Transform of the indicator for the checked segment button"
+          "docs": "Transform of the indicator for the checked segment button\n\n自動翻訳: チェックされたセグメントボタンのインジケータのトランスフォーム"
         },
         {
           "name": "--indicator-transition",
           "annotation": "prop",
-          "docs": "Transition of the indicator for the checked segment button"
+          "docs": "Transition of the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケーターの遷移"
         },
         {
           "name": "--margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the segment button"
+          "docs": "Bottom margin of the segment button\n\n自動翻訳: セグメントボタンの下端マージン"
         },
         {
           "name": "--margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button"
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合は右マージン、右から左の場合は左マージン"
         },
         {
           "name": "--margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button"
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合は左マージン、右から左の場合は右マージン"
         },
         {
           "name": "--margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the segment button"
+          "docs": "Top margin of the segment button\n\n自動翻訳: セグメントボタンの上マージン"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the segment button"
+          "docs": "Bottom padding of the segment button\n\n自動翻訳: セグメントボタンの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the segment button"
+          "docs": "Top padding of the segment button\n\n自動翻訳: セグメントボタンのトップパディング"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the segment button"
+          "docs": "Transition of the segment button\n\n自動翻訳: セグメントボタンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "indicator",
-          "docs": "The indicator displayed on the checked segment button."
+          "docs": "The indicator displayed on the checked segment button.\n\n自動翻訳: チェックしたセグメントボタンに表示されるインジケーターです。"
         },
         {
           "name": "indicator-background",
-          "docs": "The background element for the indicator displayed on the checked segment button."
+          "docs": "The background element for the indicator displayed on the checked segment button.\n\n自動翻訳: チェックしたセグメントボタンに表示されるインジケータの背景要素です。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button element that wraps all child elements."
+          "docs": "The native HTML button element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。"
         }
       ],
       "dependents": [],
@@ -17126,7 +17126,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -17181,7 +17181,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the segment.",
+          "docs": "If `true`, the user cannot interact with the segment.\n\n自動翻訳: `true`の場合、ユーザーはセグメントと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17198,7 +17198,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17219,7 +17219,7 @@
           "mutable": false,
           "attr": "scrollable",
           "reflectToAttr": false,
-          "docs": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons.",
+          "docs": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons.\n\n自動翻訳: `true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17236,7 +17236,7 @@
           "mutable": false,
           "attr": "select-on-focus",
           "reflectToAttr": false,
-          "docs": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element.",
+          "docs": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element.\n\n自動翻訳: `true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17253,7 +17253,7 @@
           "mutable": false,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
-          "docs": "If `true`, users will be able to swipe between segment buttons to activate them.",
+          "docs": "If `true`, users will be able to swipe between segment buttons to activate them.\n\n自動翻訳: `true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -17270,7 +17270,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the segment.",
+          "docs": "the value of the segment.\n\n自動翻訳: セグメントの価値",
           "docsTags": [],
           "values": [
             {
@@ -17295,7 +17295,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.",
+          "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.\n\n自動翻訳: valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行される。",
           "docsTags": []
         }
       ],
@@ -17310,7 +17310,7 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the segment button"
+          "docs": "Background of the segment button\n\n自動翻訳: セグメントボタンの背景"
         }
       ],
       "slots": [],
@@ -17333,7 +17333,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.",
+          "docs": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.\n\n自動翻訳: `true`の場合、ユーザは選択オプションと対話することができない。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからである。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17350,7 +17350,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The text value of the option.",
+          "docs": "The text value of the option.\n\n自動翻訳: オプションのテキスト値です。",
           "docsTags": [],
           "values": [
             {
@@ -17402,7 +17402,7 @@
           "mutable": false,
           "attr": "cancel-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the cancel button.",
+          "docs": "The text to display on the cancel button.\n\n自動翻訳: キャンセルボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [
@@ -17419,7 +17419,7 @@
           "mutable": false,
           "attr": "compare-with",
           "reflectToAttr": false,
-          "docs": "A property name or function used to compare object values",
+          "docs": "A property name or function used to compare object values\n\n自動翻訳: オブジェクトの値を比較するために使用されるプロパティ名または関数。",
           "docsTags": [],
           "values": [
             {
@@ -17444,7 +17444,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the select.",
+          "docs": "If `true`, the user cannot interact with the select.\n\n自動翻訳: `true`の場合、ユーザはセレクトと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17461,7 +17461,7 @@
           "mutable": false,
           "attr": "interface",
           "reflectToAttr": false,
-          "docs": "The interface the select should use: `action-sheet`, `popover` or `alert`.",
+          "docs": "The interface the select should use: `action-sheet`, `popover` or `alert`.\n\n自動翻訳: selectが使用するインターフェース。action-sheet`, `popover` または `alert`.",
           "docsTags": [],
           "default": "'alert'",
           "values": [
@@ -17487,7 +17487,7 @@
           "mutable": false,
           "attr": "interface-options",
           "reflectToAttr": false,
-          "docs": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet) and the\n[ion-popover docs](./popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.",
+          "docs": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet) and the\n[ion-popover docs](./popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.\n\n自動翻訳: alert`、`action-sheet`、`popover` インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意: `interfaceOptions` は `alert` インターフェースで `inputs` や `buttons` をオーバーライドしません。",
           "docsTags": [],
           "default": "{}",
           "values": [
@@ -17504,7 +17504,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17525,7 +17525,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, the select can accept multiple values.",
+          "docs": "If `true`, the select can accept multiple values.\n\n自動翻訳: `true`の場合、selectは複数の値を受け入れることができる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17542,7 +17542,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -17559,7 +17559,7 @@
           "mutable": false,
           "attr": "ok-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the ok button.",
+          "docs": "The text to display on the ok button.\n\n自動翻訳: okボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'OK'",
           "values": [
@@ -17576,7 +17576,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "The text to display when the select is empty.",
+          "docs": "The text to display when the select is empty.\n\n自動翻訳: セレクトが空のときに表示するテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -17595,7 +17595,7 @@
           "mutable": false,
           "attr": "selected-text",
           "reflectToAttr": false,
-          "docs": "The text to display instead of the selected option's value.",
+          "docs": "The text to display instead of the selected option's value.\n\n自動翻訳: 選択されたオプションの値の代わりに表示するテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -17617,7 +17617,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the select.",
+          "docs": "the value of the select.\n\n自動翻訳: セレクトの値です。",
           "docsTags": [],
           "values": [
             {
@@ -17637,7 +17637,7 @@
           },
           "signature": "open(event?: UIEvent) => Promise<any>",
           "parameters": [],
-          "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
+          "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.\n\n自動翻訳: セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。",
           "docsTags": [
             {
               "name": "param",
@@ -17653,7 +17653,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the select loses focus.",
+          "docs": "Emitted when the select loses focus.\n\n自動翻訳: セレクトのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -17662,7 +17662,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the selection is cancelled.",
+          "docs": "Emitted when the selection is cancelled.\n\n自動翻訳: 選択がキャンセルされたときに発する。",
           "docsTags": []
         },
         {
@@ -17671,7 +17671,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
           "docsTags": []
         },
         {
@@ -17680,7 +17680,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the overlay is dismissed.",
+          "docs": "Emitted when the overlay is dismissed.\n\n自動翻訳: オーバーレイが解除されたときに発せられる。",
           "docsTags": []
         },
         {
@@ -17689,7 +17689,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the select has focus.",
+          "docs": "Emitted when the select has focus.\n\n自動翻訳: セレクトにフォーカスが当たったときに発する。",
           "docsTags": []
         }
       ],
@@ -17698,47 +17698,47 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the select"
+          "docs": "Bottom padding of the select\n\n自動翻訳: セレクトの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合は右パディング、右から左の場合は左パディングを行う"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合は左パディング、右から左の場合は右パディング"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the select"
+          "docs": "Top padding of the select\n\n自動翻訳: セレクトのトップパディング"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the select placeholder text"
+          "docs": "Color of the select placeholder text\n\n自動翻訳: セレクトプレースホルダーテキストの色"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the select placeholder text"
+          "docs": "Opacity of the select placeholder text\n\n自動翻訳: 選択プレースホルダーテキストの不透明度"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "icon",
-          "docs": "The select icon container."
+          "docs": "The select icon container.\n\n自動翻訳: セレクトアイコンのコンテナです。"
         },
         {
           "name": "placeholder",
-          "docs": "The text displayed in the select when there is no value."
+          "docs": "The text displayed in the select when there is no value.\n\n自動翻訳: 値がないときにセレクトに表示されるテキスト。"
         },
         {
           "name": "text",
-          "docs": "The displayed value of the select."
+          "docs": "The displayed value of the select.\n\n自動翻訳: セレクトの表示値です。"
         }
       ],
       "dependents": [],
@@ -17797,7 +17797,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the skeleton text will animate.",
+          "docs": "If `true`, the skeleton text will animate.\n\n自動翻訳: `true`の場合、スケルトンテキストをアニメーションさせる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17816,17 +17816,17 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the skeleton text"
+          "docs": "Background of the skeleton text\n\n自動翻訳: スケルトンテキストの背景"
         },
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "Background of the skeleton text in rgb format"
+          "docs": "Background of the skeleton text in rgb format\n\n自動翻訳: スケルトンテキストの背景（rgb形式"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the skeleton text"
+          "docs": "Border radius of the skeleton text\n\n自動翻訳: スケルトンテキストのボーダー半径"
         }
       ],
       "slots": [],
@@ -17872,7 +17872,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17893,7 +17893,7 @@
           "mutable": false,
           "attr": "options",
           "reflectToAttr": false,
-          "docs": "Options to pass to the swiper instance.\nSee https://swiperjs.com/swiper-api for valid options",
+          "docs": "Options to pass to the swiper instance.\nSee https://swiperjs.com/swiper-api for valid options\n\n自動翻訳: swiperインスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。",
           "docsTags": [],
           "default": "{}",
           "values": [
@@ -17910,7 +17910,7 @@
           "mutable": false,
           "attr": "pager",
           "reflectToAttr": false,
-          "docs": "If `true`, show the pagination.",
+          "docs": "If `true`, show the pagination.\n\n自動翻訳: もし `true` ならば、ページネーションを表示する。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17927,7 +17927,7 @@
           "mutable": false,
           "attr": "scrollbar",
           "reflectToAttr": false,
-          "docs": "If `true`, show the scrollbar.",
+          "docs": "If `true`, show the scrollbar.\n\n自動翻訳: `true`の場合、スクロールバーを表示する。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17948,7 +17948,7 @@
           },
           "signature": "getActiveIndex() => Promise<number>",
           "parameters": [],
-          "docs": "Get the index of the active slide.",
+          "docs": "Get the index of the active slide.\n\n自動翻訳: アクティブなスライドのインデックスを取得します。",
           "docsTags": []
         },
         {
@@ -17959,7 +17959,7 @@
           },
           "signature": "getPreviousIndex() => Promise<number>",
           "parameters": [],
-          "docs": "Get the index of the previous slide.",
+          "docs": "Get the index of the previous slide.\n\n自動翻訳: 前のスライドのインデックスを取得します。",
           "docsTags": []
         },
         {
@@ -17970,7 +17970,7 @@
           },
           "signature": "getSwiper() => Promise<any>",
           "parameters": [],
-          "docs": "Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://swiperjs.com/swiper-api for all API options.",
+          "docs": "Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://swiperjs.com/swiper-api for all API options.\n\n自動翻訳: Swiperのインスタンスを取得します。これを使用して、SwiperのフルAPIにアクセスします。すべてのAPIオプションについては、https://swiperjs.com/swiper-api を参照してください。",
           "docsTags": []
         },
         {
@@ -17981,7 +17981,7 @@
           },
           "signature": "isBeginning() => Promise<boolean>",
           "parameters": [],
-          "docs": "Get whether or not the current slide is the first slide.",
+          "docs": "Get whether or not the current slide is the first slide.\n\n自動翻訳: 現在のスライドが最初のスライドであるか否かを取得する。",
           "docsTags": []
         },
         {
@@ -17992,7 +17992,7 @@
           },
           "signature": "isEnd() => Promise<boolean>",
           "parameters": [],
-          "docs": "Get whether or not the current slide is the last slide.",
+          "docs": "Get whether or not the current slide is the last slide.\n\n自動翻訳: 現在のスライドが最後のスライドであるか否かを取得する。",
           "docsTags": []
         },
         {
@@ -18003,7 +18003,7 @@
           },
           "signature": "length() => Promise<number>",
           "parameters": [],
-          "docs": "Get the total number of slides.",
+          "docs": "Get the total number of slides.\n\n自動翻訳: スライドの総枚数を取得する。",
           "docsTags": []
         },
         {
@@ -18014,7 +18014,7 @@
           },
           "signature": "lockSwipeToNext(lock: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Lock or unlock the ability to slide to the next slide.",
+          "docs": "Lock or unlock the ability to slide to the next slide.\n\n自動翻訳: 次のスライドにスライドする機能をロックまたはアンロックする。",
           "docsTags": [
             {
               "name": "param",
@@ -18030,7 +18030,7 @@
           },
           "signature": "lockSwipeToPrev(lock: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Lock or unlock the ability to slide to the previous slide.",
+          "docs": "Lock or unlock the ability to slide to the previous slide.\n\n自動翻訳: 前のスライドにスライドする機能をロックまたはアンロックします。",
           "docsTags": [
             {
               "name": "param",
@@ -18046,7 +18046,7 @@
           },
           "signature": "lockSwipes(lock: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Lock or unlock the ability to slide to the next or previous slide.",
+          "docs": "Lock or unlock the ability to slide to the next or previous slide.\n\n自動翻訳: 次のスライドや前のスライドにスライドする機能をロックまたはアンロックします。",
           "docsTags": [
             {
               "name": "param",
@@ -18062,7 +18062,7 @@
           },
           "signature": "slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Transition to the next slide.",
+          "docs": "Transition to the next slide.\n\n自動翻訳: 次のスライドに遷移します。",
           "docsTags": [
             {
               "name": "param",
@@ -18082,7 +18082,7 @@
           },
           "signature": "slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Transition to the previous slide.",
+          "docs": "Transition to the previous slide.\n\n自動翻訳: 前のスライドに遷移します。",
           "docsTags": [
             {
               "name": "param",
@@ -18102,7 +18102,7 @@
           },
           "signature": "slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Transition to the specified slide.",
+          "docs": "Transition to the specified slide.\n\n自動翻訳: 指定されたスライドに遷移する。",
           "docsTags": [
             {
               "name": "param",
@@ -18126,7 +18126,7 @@
           },
           "signature": "startAutoplay() => Promise<void>",
           "parameters": [],
-          "docs": "Start auto play.",
+          "docs": "Start auto play.\n\n自動翻訳: オートプレイを開始する。",
           "docsTags": []
         },
         {
@@ -18137,7 +18137,7 @@
           },
           "signature": "stopAutoplay() => Promise<void>",
           "parameters": [],
-          "docs": "Stop auto play.",
+          "docs": "Stop auto play.\n\n自動翻訳: 自動再生を停止する。",
           "docsTags": []
         },
         {
@@ -18148,7 +18148,7 @@
           },
           "signature": "update() => Promise<void>",
           "parameters": [],
-          "docs": "Update the underlying slider implementation. Call this if you've added or removed\nchild slides.",
+          "docs": "Update the underlying slider implementation. Call this if you've added or removed\nchild slides.\n\n自動翻訳: 基礎となるスライダーの実装を更新します。子スライダーを追加または削除した場合に呼び出します。",
           "docsTags": []
         },
         {
@@ -18159,7 +18159,7 @@
           },
           "signature": "updateAutoHeight(speed?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.",
+          "docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.\n\n自動翻訳: speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeightが有効な場合）。",
           "docsTags": [
             {
               "name": "param",
@@ -18175,7 +18175,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the active slide has changed.",
+          "docs": "Emitted after the active slide has changed.\n\n自動翻訳: アクティブスライドが変更された後に発せられる。",
           "docsTags": []
         },
         {
@@ -18184,7 +18184,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user double taps on the slide's container.",
+          "docs": "Emitted when the user double taps on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをダブルタップしたときに発生する。",
           "docsTags": []
         },
         {
@@ -18193,7 +18193,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is actively being moved.",
+          "docs": "Emitted when the slider is actively being moved.\n\n自動翻訳: スライダーがアクティブに移動しているときに発せられる。",
           "docsTags": []
         },
         {
@@ -18202,7 +18202,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the next slide has ended.",
+          "docs": "Emitted when the next slide has ended.\n\n自動翻訳: 次のスライドが終了したときに発せられる。",
           "docsTags": []
         },
         {
@@ -18211,7 +18211,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the next slide has started.",
+          "docs": "Emitted when the next slide has started.\n\n自動翻訳: 次のスライドが開始されたときに発せられる。",
           "docsTags": []
         },
         {
@@ -18220,7 +18220,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the previous slide has ended.",
+          "docs": "Emitted when the previous slide has ended.\n\n自動翻訳: 前のスライドが終了したときに発せられる。",
           "docsTags": []
         },
         {
@@ -18229,7 +18229,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the previous slide has started.",
+          "docs": "Emitted when the previous slide has started.\n\n自動翻訳: 前のスライドが開始されたときに発せられる。",
           "docsTags": []
         },
         {
@@ -18238,7 +18238,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is at the last slide.",
+          "docs": "Emitted when the slider is at the last slide.\n\n自動翻訳: スライダーが最後のスライドになったときに発せられる。",
           "docsTags": []
         },
         {
@@ -18247,7 +18247,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is at its initial position.",
+          "docs": "Emitted when the slider is at its initial position.\n\n自動翻訳: スライダーが初期位置にあるときに発せられる。",
           "docsTags": []
         },
         {
@@ -18256,7 +18256,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after Swiper initialization",
+          "docs": "Emitted after Swiper initialization\n\n自動翻訳: Swiperの初期化後に発せられる",
           "docsTags": []
         },
         {
@@ -18265,7 +18265,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user taps/clicks on the slide's container.",
+          "docs": "Emitted when the user taps/clicks on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをタップ/クリックしたときに発せられる。",
           "docsTags": []
         },
         {
@@ -18274,7 +18274,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user releases the touch.",
+          "docs": "Emitted when the user releases the touch.\n\n自動翻訳: ユーザーがタッチを離したときに発せられる。",
           "docsTags": []
         },
         {
@@ -18283,7 +18283,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user first touches the slider.",
+          "docs": "Emitted when the user first touches the slider.\n\n自動翻訳: ユーザーがスライダーに初めて触れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -18292,7 +18292,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slide transition has ended.",
+          "docs": "Emitted when the slide transition has ended.\n\n自動翻訳: スライド遷移が終了したときに発せられる。",
           "docsTags": []
         },
         {
@@ -18301,7 +18301,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slide transition has started.",
+          "docs": "Emitted when the slide transition has started.\n\n自動翻訳: スライド遷移が開始されたときに発せられる。",
           "docsTags": []
         },
         {
@@ -18310,7 +18310,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the active slide has changed.",
+          "docs": "Emitted before the active slide has changed.\n\n自動翻訳: アクティブスライドが変更される前に発せられる。",
           "docsTags": []
         }
       ],
@@ -18319,32 +18319,32 @@
         {
           "name": "--bullet-background",
           "annotation": "prop",
-          "docs": "Background of the pagination bullets"
+          "docs": "Background of the pagination bullets\n\n自動翻訳: ページネーションの箇条書きの背景"
         },
         {
           "name": "--bullet-background-active",
           "annotation": "prop",
-          "docs": "Background of the active pagination bullet"
+          "docs": "Background of the active pagination bullet\n\n自動翻訳: アクティブなページネーションバレットの背景"
         },
         {
           "name": "--progress-bar-background",
           "annotation": "prop",
-          "docs": "Background of the pagination progress-bar"
+          "docs": "Background of the pagination progress-bar\n\n自動翻訳: ページネーションの進行バーの背景"
         },
         {
           "name": "--progress-bar-background-active",
           "annotation": "prop",
-          "docs": "Background of the active pagination progress-bar"
+          "docs": "Background of the active pagination progress-bar\n\n自動翻訳: アクティブなページネーションの進行バーの背景"
         },
         {
           "name": "--scroll-bar-background",
           "annotation": "prop",
-          "docs": "Background of the pagination scroll-bar"
+          "docs": "Background of the pagination scroll-bar\n\n自動翻訳: ページネーション用スクロールバーの背景"
         },
         {
           "name": "--scroll-bar-background-active",
           "annotation": "prop",
-          "docs": "Background of the active pagination scroll-bar"
+          "docs": "Background of the active pagination scroll-bar\n\n自動翻訳: アクティブなページネーションのスクロールバーの背景"
         }
       ],
       "slots": [],
@@ -18367,7 +18367,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -18422,7 +18422,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "Duration of the spinner animation in milliseconds. The default varies based on the spinner.",
+          "docs": "Duration of the spinner animation in milliseconds. The default varies based on the spinner.\n\n自動翻訳: スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。",
           "docsTags": [],
           "values": [
             {
@@ -18441,7 +18441,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used.",
+          "docs": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used.\n\n自動翻訳: 使用するSVGスピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。",
           "docsTags": [],
           "values": [
             {
@@ -18493,7 +18493,7 @@
           "mutable": false,
           "attr": "paused",
           "reflectToAttr": false,
-          "docs": "If `true`, the spinner's animation will be paused.",
+          "docs": "If `true`, the spinner's animation will be paused.\n\n自動翻訳: `true`の場合、スピナーのアニメーションは一時停止されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18512,7 +18512,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the spinner"
+          "docs": "Color of the spinner\n\n自動翻訳: スピナーの色"
         }
       ],
       "slots": [],
@@ -18549,7 +18549,7 @@
           "mutable": false,
           "attr": "content-id",
           "reflectToAttr": true,
-          "docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.",
+          "docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.\n\n自動翻訳: メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
           "docsTags": [],
           "values": [
             {
@@ -18568,7 +18568,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the split pane will be hidden.",
+          "docs": "If `true`, the split pane will be hidden.\n\n自動翻訳: `true`の場合、分割ペインが非表示になります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18585,7 +18585,7 @@
           "mutable": false,
           "attr": "when",
           "reflectToAttr": false,
-          "docs": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression.",
+          "docs": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression.\n\n自動翻訳: 分割パネルを表示するタイミング。CSSメディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。",
           "docsTags": [],
           "default": "QUERY['lg']",
           "values": [
@@ -18608,7 +18608,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Expression to be called when the split-pane visibility has changed",
+          "docs": "Expression to be called when the split-pane visibility has changed\n\n自動翻訳: 分割画面の表示が変わったときに呼び出される式",
           "docsTags": []
         }
       ],
@@ -18617,22 +18617,22 @@
         {
           "name": "--border",
           "annotation": "prop",
-          "docs": "Border between panes"
+          "docs": "Border between panes\n\n自動翻訳: ペイン間のボーダー"
         },
         {
           "name": "--side-max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the side pane. Does not apply when split pane is collapsed."
+          "docs": "Maximum width of the side pane. Does not apply when split pane is collapsed.\n\n自動翻訳: サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
         },
         {
           "name": "--side-min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the side pane. Does not apply when split pane is collapsed."
+          "docs": "Minimum width of the side pane. Does not apply when split pane is collapsed.\n\n自動翻訳: サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
         },
         {
           "name": "--side-width",
           "annotation": "prop",
-          "docs": "Width of the side pane. Does not apply when split pane is collapsed."
+          "docs": "Width of the side pane. Does not apply when split pane is collapsed.\n\n自動翻訳: サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
         }
       ],
       "slots": [],
@@ -18660,7 +18660,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -18715,7 +18715,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -18736,7 +18736,7 @@
           "mutable": false,
           "attr": "selected-tab",
           "reflectToAttr": false,
-          "docs": "The selected tab component",
+          "docs": "The selected tab component\n\n自動翻訳: 選択されたタブコンポーネント",
           "docsTags": [],
           "values": [
             {
@@ -18755,7 +18755,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、タブバーを半透明にする。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18774,17 +18774,17 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the tab bar"
+          "docs": "Background of the tab bar\n\n自動翻訳: タブバーの背景"
         },
         {
           "name": "--border",
           "annotation": "prop",
-          "docs": "Border of the tab bar"
+          "docs": "Border of the tab bar\n\n自動翻訳: タブバーの境界線"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the tab bar"
+          "docs": "Color of the tab bar\n\n自動翻訳: タブバーの色"
         }
       ],
       "slots": [],
@@ -18816,7 +18816,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the tab button.",
+          "docs": "If `true`, the user cannot interact with the tab button.\n\n自動翻訳: `true`の場合、ユーザはタブボタンを操作することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18833,7 +18833,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
+          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -18852,7 +18852,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -18871,7 +18871,7 @@
           "mutable": true,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.",
+          "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.\n\n自動翻訳: タブバーのテキストとアイコンのレイアウトを設定する。デフォルトは `'icon-top'` です。",
           "docsTags": [],
           "values": [
             {
@@ -18911,7 +18911,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -18932,7 +18932,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
           "docsTags": [],
           "values": [
             {
@@ -18951,7 +18951,7 @@
           "mutable": true,
           "attr": "selected",
           "reflectToAttr": false,
-          "docs": "The selected tab component",
+          "docs": "The selected tab component\n\n自動翻訳: 選択されたタブコンポーネント",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18968,7 +18968,7 @@
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": false,
-          "docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.",
+          "docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.\n\n自動翻訳: 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
           "docsTags": [],
           "values": [
             {
@@ -18987,7 +18987,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19015,64 +19015,64 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the tab button"
+          "docs": "Background of the tab button\n\n自動翻訳: タブボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the tab button when focused with the tab key"
+          "docs": "Background of the tab button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスされたときのタブボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the tab button background when focused with the tab key"
+          "docs": "Opacity of the tab button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのタブボタンの背景の不透明度"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the tab button"
+          "docs": "Color of the tab button\n\n自動翻訳: タブボタンの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the tab button when focused with the tab key"
+          "docs": "Color of the tab button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのタブボタンの色"
         },
         {
           "name": "--color-selected",
           "annotation": "prop",
-          "docs": "Color of the selected tab button"
+          "docs": "Color of the selected tab button\n\n自動翻訳: 選択されたタブボタンの色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the tab button"
+          "docs": "Bottom padding of the tab button\n\n自動翻訳: タブボタンの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the tab button"
+          "docs": "Top padding of the tab button\n\n自動翻訳: タブボタンのトップパディング"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect"
+          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML anchor element that wraps all child elements."
+          "docs": "The native HTML anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブHTMLのアンカー要素です。"
         }
       ],
       "dependents": [],
@@ -19099,7 +19099,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "The component to display inside of the tab.",
+          "docs": "The component to display inside of the tab.\n\n自動翻訳: タブの内側に表示するコンポーネントです。",
           "docsTags": [],
           "values": [
             {
@@ -19127,7 +19127,7 @@
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": false,
-          "docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.",
+          "docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.\n\n自動翻訳: 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
           "docsTags": [],
           "values": [
             {
@@ -19147,7 +19147,7 @@
           },
           "signature": "setActive() => Promise<void>",
           "parameters": [],
-          "docs": "Set the active component for the tab",
+          "docs": "Set the active component for the tab\n\n自動翻訳: タブのアクティブコンポーネントを設定する",
           "docsTags": []
         }
       ],
@@ -19190,7 +19190,7 @@
           },
           "signature": "getSelected() => Promise<string | undefined>",
           "parameters": [],
-          "docs": "Get the currently selected tab.",
+          "docs": "Get the currently selected tab.\n\n自動翻訳: 現在選択されているタブを取得します。",
           "docsTags": []
         },
         {
@@ -19201,7 +19201,7 @@
           },
           "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
           "parameters": [],
-          "docs": "Get a specific tab by the value of its `tab` property or an element reference.",
+          "docs": "Get a specific tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得する。",
           "docsTags": [
             {
               "name": "param",
@@ -19217,7 +19217,7 @@
           },
           "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
           "parameters": [],
-          "docs": "Select a tab by the value of its `tab` property or an element reference.",
+          "docs": "Select a tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によってタブを選択する。",
           "docsTags": [
             {
               "name": "param",
@@ -19233,7 +19233,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the navigation has finished transitioning to a new component.",
+          "docs": "Emitted when the navigation has finished transitioning to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに遷移し終わったときに発せられる。",
           "docsTags": []
         },
         {
@@ -19242,7 +19242,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the navigation is about to transition to a new component.",
+          "docs": "Emitted when the navigation is about to transition to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに移行しようとするときに発せられる。",
           "docsTags": []
         }
       ],
@@ -19251,15 +19251,15 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot."
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
         },
         {
           "name": "bottom",
-          "docs": "Content is placed at the bottom of the screen."
+          "docs": "Content is placed at the bottom of the screen.\n\n自動翻訳: コンテンツは画面下部に配置されます。"
         },
         {
           "name": "top",
-          "docs": "Content is placed at the top of the screen."
+          "docs": "Content is placed at the top of the screen.\n\n自動翻訳: コンテンツは画面上部に配置されます。"
         }
       ],
       "parts": [],
@@ -19286,7 +19286,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -19341,7 +19341,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -19386,7 +19386,7 @@
           "mutable": false,
           "attr": "auto-grow",
           "reflectToAttr": true,
-          "docs": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea.",
+          "docs": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea.\n\n自動翻訳: `true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小する。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19403,7 +19403,7 @@
           "mutable": false,
           "attr": "autocapitalize",
           "reflectToAttr": false,
-          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n\n自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
           "docsTags": [],
           "default": "'none'",
           "values": [
@@ -19420,7 +19420,7 @@
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
-          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
+          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19437,7 +19437,7 @@
           "mutable": true,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
-          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
+          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n\n自動翻訳: `true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19454,7 +19454,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -19509,7 +19509,7 @@
           "mutable": false,
           "attr": "cols",
           "reflectToAttr": false,
-          "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.",
+          "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n\n自動翻訳: テキストコントロールの可視幅を、平均文字幅で指定する。指定する場合は、正の整数である必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -19528,7 +19528,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -19545,7 +19545,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the textarea.",
+          "docs": "If `true`, the user cannot interact with the textarea.\n\n自動翻訳: `true`の場合、ユーザはテキストエリアと対話することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19562,7 +19562,7 @@
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.\n\n自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19606,7 +19606,7 @@
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\n自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19654,7 +19654,7 @@
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
+          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -19673,7 +19673,7 @@
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
+          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -19692,7 +19692,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -19713,7 +19713,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -19730,7 +19730,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Instructional text that shows before the input has a value.",
+          "docs": "Instructional text that shows before the input has a value.\n\n自動翻訳: 入力が値を持つ前に表示される指示文。",
           "docsTags": [],
           "values": [
             {
@@ -19749,7 +19749,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot modify the value.",
+          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19766,7 +19766,7 @@
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
-          "docs": "If `true`, the user must fill in a value before submitting a form.",
+          "docs": "If `true`, the user must fill in a value before submitting a form.\n\n自動翻訳: `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19783,7 +19783,7 @@
           "mutable": false,
           "attr": "rows",
           "reflectToAttr": false,
-          "docs": "The number of visible text lines for the control.",
+          "docs": "The number of visible text lines for the control.\n\n自動翻訳: コントロールの可視テキスト行数。",
           "docsTags": [],
           "values": [
             {
@@ -19802,7 +19802,7 @@
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
-          "docs": "If `true`, the element will have its spelling and grammar checked.",
+          "docs": "If `true`, the element will have its spelling and grammar checked.\n\n自動翻訳: `true`の場合、その要素のスペルチェックと文法チェックが行われる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19819,7 +19819,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the textarea.",
+          "docs": "The value of the textarea.\n\n自動翻訳: textareaの値です。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -19842,7 +19842,7 @@
           "mutable": false,
           "attr": "wrap",
           "reflectToAttr": false,
-          "docs": "Indicates how the control wraps text.",
+          "docs": "Indicates how the control wraps text.\n\n自動翻訳: コントロールがテキストをどのように折り返すかを示す。",
           "docsTags": [],
           "values": [
             {
@@ -19874,7 +19874,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLTextAreaElement>",
           "parameters": [],
-          "docs": "Returns the native `<textarea>` element used under the hood.",
+          "docs": "Returns the native `<textarea>` element used under the hood.\n\n自動翻訳: フードの下で使用されるネイティブの `<textarea>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -19885,7 +19885,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.",
+          "docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.\n\n自動翻訳: ion-textarea` のネイティブ `textarea` にフォーカスを設定する。グローバルな `textarea.focus()` の代わりに、このメソッドを使用する。",
           "docsTags": []
         }
       ],
@@ -19896,7 +19896,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.",
+          "docs": "Emitted when the input loses focus.\n\n自動翻訳: 入力のフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -19905,7 +19905,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input value has changed.",
+          "docs": "Emitted when the input value has changed.\n\n自動翻訳: 入力値が変化したときに発せられる。",
           "docsTags": []
         },
         {
@@ -19914,7 +19914,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.",
+          "docs": "Emitted when the input has focus.\n\n自動翻訳: 入力にフォーカスが当たったときに発せられる。",
           "docsTags": []
         },
         {
@@ -19923,7 +19923,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.",
+          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発する。",
           "docsTags": []
         }
       ],
@@ -19932,57 +19932,57 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the textarea"
+          "docs": "Background of the textarea\n\n自動翻訳: textareaの背景"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the textarea"
+          "docs": "Border radius of the textarea\n\n自動翻訳: テキストエリアの境界半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the text"
+          "docs": "Color of the text\n\n自動翻訳: 本文の色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the textarea"
+          "docs": "Bottom padding of the textarea\n\n自動翻訳: テキストエリアの底面パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea\n\n自動翻訳: テキストエリアの方向が左から右の場合は右パディング、右から左の場合は左パディングを使用します。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea\n\n自動翻訳: textareaの方向が左から右の場合は左パディング、右から左の場合は右パディング。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the textarea"
+          "docs": "Top padding of the textarea\n\n自動翻訳: textareaのトップパディング"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the placeholder text"
+          "docs": "Color of the placeholder text\n\n自動翻訳: プレースホルダーテキストの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Style of the placeholder text"
+          "docs": "Style of the placeholder text\n\n自動翻訳: プレースホルダーテキストのスタイル"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Weight of the placeholder text"
+          "docs": "Weight of the placeholder text\n\n自動翻訳: プレースホルダーテキストの重さ"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the placeholder text"
+          "docs": "Opacity of the placeholder text\n\n自動翻訳: プレースホルダーテキストの不透明度"
         }
       ],
       "slots": [],
@@ -20006,12 +20006,12 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the thumbnail"
+          "docs": "Border radius of the thumbnail\n\n自動翻訳: サムネイルのボーダー半径"
         },
         {
           "name": "--size",
           "annotation": "prop",
-          "docs": "Size of the thumbnail"
+          "docs": "Size of the thumbnail\n\n自動翻訳: サムネイルの大きさ"
         }
       ],
       "slots": [],
@@ -20034,7 +20034,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20089,7 +20089,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The size of the toolbar title.",
+          "docs": "The size of the toolbar title.\n\n自動翻訳: ツールバーのタイトルの大きさを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -20115,7 +20115,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the title"
+          "docs": "Text color of the title\n\n自動翻訳: タイトルの文字色"
         }
       ],
       "slots": [],
@@ -20163,7 +20163,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the toast will animate.",
+          "docs": "If `true`, the toast will animate.\n\n自動翻訳: `true`の場合、トーストはアニメーションします。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -20179,7 +20179,7 @@
           "type": "(string | ToastButton)[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An array of buttons for the toast.",
+          "docs": "An array of buttons for the toast.\n\n自動翻訳: トースト用のボタンがずらり。",
           "docsTags": [],
           "values": [
             {
@@ -20201,7 +20201,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20256,7 +20256,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
+          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -20278,7 +20278,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.",
+          "docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.\n\n自動翻訳: トーストを隠すまでに何ミリ秒待つかを指定します。デフォルトでは、`dismiss()`が呼ばれるまで表示されます。",
           "docsTags": [],
           "default": "config.getNumber('toastDuration', 0)",
           "values": [
@@ -20294,7 +20294,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the toast is presented.",
+          "docs": "Animation to use when the toast is presented.\n\n自動翻訳: 乾杯の音頭をとるときに使うアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -20313,7 +20313,7 @@
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
-          "docs": "Header to be shown in the toast.",
+          "docs": "Header to be shown in the toast.\n\n自動翻訳: トーストに表示されるヘッダー。",
           "docsTags": [],
           "values": [
             {
@@ -20331,7 +20331,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the toast.",
+          "docs": "Additional attributes to pass to the toast.\n\n自動翻訳: トーストに渡す追加の属性。",
           "docsTags": [],
           "values": [
             {
@@ -20350,7 +20350,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons",
+          "docs": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons\n\n自動翻訳: 表示するアイコンの名前、または有効なSVGファイルへのパスを指定する。ion-icon`を参照。https://ionic.io/ionicons",
           "docsTags": [],
           "values": [
             {
@@ -20369,7 +20369,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20386,7 +20386,7 @@
           "mutable": false,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.",
+          "docs": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.\n\n自動翻訳: トーストのメッセージやボタンの配置を定義します。'baseline'を指定します。メッセージとボタンは同じ行に表示されます。メッセージテキストはメッセージコンテナ内で折り返すことができます。'stacked':ボタンコンテナとメッセージが重なるように表示されます。ボタンに長いテキストがある場合に使用します。",
           "docsTags": [],
           "default": "'baseline'",
           "values": [
@@ -20407,7 +20407,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the toast is dismissed.",
+          "docs": "Animation to use when the toast is dismissed.\n\n自動翻訳: トーストの解散時に使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -20426,7 +20426,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "Message to be shown in the toast.",
+          "docs": "Message to be shown in the toast.\n\n自動翻訳: 乾杯の際に表示するメッセージ",
           "docsTags": [],
           "values": [
             {
@@ -20448,7 +20448,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -20469,7 +20469,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position of the toast on the screen.",
+          "docs": "The position of the toast on the screen.\n\n自動翻訳: 画面上のトーストの位置です。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -20495,7 +20495,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).",
+          "docs": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、トーストは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20516,7 +20516,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the toast overlay after it has been presented.",
+          "docs": "Dismiss the toast overlay after it has been presented.\n\n自動翻訳: トーストのオーバーレイが提示された後、それを解除する。",
           "docsTags": [
             {
               "name": "param",
@@ -20536,7 +20536,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the toast did dismiss.",
+          "docs": "Returns a promise that resolves when the toast did dismiss.\n\n自動翻訳: トーストが解散したことを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -20547,7 +20547,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the toast will dismiss.",
+          "docs": "Returns a promise that resolves when the toast will dismiss.\n\n自動翻訳: トーストが解散するタイミングを解決するプロミスを返します。",
           "docsTags": []
         },
         {
@@ -20558,7 +20558,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the toast overlay after it has been created.",
+          "docs": "Present the toast overlay after it has been created.\n\n自動翻訳: トーストのオーバーレイを作成した後に提示する。",
           "docsTags": []
         }
       ],
@@ -20569,7 +20569,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has dismissed.",
+          "docs": "Emitted after the toast has dismissed.\n\n自動翻訳: トーストが解散した後に発せられる。",
           "docsTags": []
         },
         {
@@ -20578,7 +20578,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has presented.",
+          "docs": "Emitted after the toast has presented.\n\n自動翻訳: トーストが提示された後に発する。",
           "docsTags": []
         },
         {
@@ -20587,7 +20587,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has dismissed.",
+          "docs": "Emitted before the toast has dismissed.\n\n自動翻訳: 乾杯が解散する前に発する。",
           "docsTags": []
         },
         {
@@ -20596,7 +20596,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has presented.",
+          "docs": "Emitted before the toast has presented.\n\n自動翻訳: トーストが提示される前に発せられる。",
           "docsTags": []
         }
       ],
@@ -20605,110 +20605,110 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the toast"
+          "docs": "Background of the toast\n\n自動翻訳: 乾杯の背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the toast"
+          "docs": "Border color of the toast\n\n自動翻訳: トーストのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the toast"
+          "docs": "Border radius of the toast\n\n自動翻訳: トーストのボーダー半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the toast"
+          "docs": "Border style of the toast\n\n自動翻訳: トーストのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the toast"
+          "docs": "Border width of the toast\n\n自動翻訳: トーストのボーダー幅"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the toast"
+          "docs": "Box shadow of the toast\n\n自動翻訳: 乾杯の箱影"
         },
         {
           "name": "--button-color",
           "annotation": "prop",
-          "docs": "Color of the button text"
+          "docs": "Color of the button text\n\n自動翻訳: ボタンテキストの色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the toast text"
+          "docs": "Color of the toast text\n\n自動翻訳: トーストの文字色"
         },
         {
           "name": "--end",
           "annotation": "prop",
-          "docs": "Position from the right if direction is left-to-right, and from the left if direction is right-to-left"
+          "docs": "Position from the right if direction is left-to-right, and from the left if direction is right-to-left\n\n自動翻訳: 方向が左から右の場合は右から、方向が右から左の場合は左から位置すること"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the toast"
+          "docs": "Height of the toast\n\n自動翻訳: トーストの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the toast"
+          "docs": "Maximum height of the toast\n\n自動翻訳: トーストの最大高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the toast"
+          "docs": "Maximum width of the toast\n\n自動翻訳: トーストの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the toast"
+          "docs": "Minimum height of the toast\n\n自動翻訳: トーストの最低高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the toast"
+          "docs": "Minimum width of the toast\n\n自動翻訳: トーストの最小幅"
         },
         {
           "name": "--start",
           "annotation": "prop",
-          "docs": "Position from the left if direction is left-to-right, and from the right if direction is right-to-left"
+          "docs": "Position from the left if direction is left-to-right, and from the right if direction is right-to-left\n\n自動翻訳: 方向が左から右の場合は左から、方向が右から左の場合は右から位置すること"
         },
         {
           "name": "--white-space",
           "annotation": "prop",
-          "docs": "White space of the toast message"
+          "docs": "White space of the toast message\n\n自動翻訳: 乾杯メッセージのホワイトスペース"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the toast"
+          "docs": "Width of the toast\n\n自動翻訳: トーストの幅"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "button",
-          "docs": "Any button element that is displayed inside of the toast."
+          "docs": "Any button element that is displayed inside of the toast.\n\n自動翻訳: トーストの内側に表示される任意のボタン要素。"
         },
         {
           "name": "container",
-          "docs": "The element that wraps all child elements."
+          "docs": "The element that wraps all child elements.\n\n自動翻訳: すべての子要素を包む要素。"
         },
         {
           "name": "header",
-          "docs": "The header text of the toast."
+          "docs": "The header text of the toast.\n\n自動翻訳: 乾杯のヘッダーテキストです。"
         },
         {
           "name": "icon",
-          "docs": "The icon that appears next to the toast content."
+          "docs": "The icon that appears next to the toast content.\n\n自動翻訳: トーストの内容の横に表示されるアイコンです。"
         },
         {
           "name": "message",
-          "docs": "The body text of the toast."
+          "docs": "The body text of the toast.\n\n自動翻訳: 乾杯の音頭の本文です。"
         }
       ],
       "dependents": [],
@@ -20750,7 +20750,7 @@
           "mutable": true,
           "attr": "checked",
           "reflectToAttr": false,
-          "docs": "If `true`, the toggle is selected.",
+          "docs": "If `true`, the toggle is selected.\n\n自動翻訳: `true`の場合、トグルが選択されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20767,7 +20767,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20822,7 +20822,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the toggle.",
+          "docs": "If `true`, the user cannot interact with the toggle.\n\n自動翻訳: `true`の場合、ユーザーはトグルを操作することができない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20839,7 +20839,7 @@
           "mutable": false,
           "attr": "enable-on-off-labels",
           "reflectToAttr": false,
-          "docs": "Enables the on/off accessibility switch labels within the toggle.",
+          "docs": "Enables the on/off accessibility switch labels within the toggle.\n\n自動翻訳: トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。",
           "docsTags": [],
           "default": "config.get('toggleOnOffLabels')",
           "values": [
@@ -20859,7 +20859,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -20880,7 +20880,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.",
+          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -20897,7 +20897,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`.",
+          "docs": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`.\n\n自動翻訳: トグルの値は、チェックされているかどうかを意味するものではありません。  トグルの値は `<input type=\"checkbox\">` の値に類似しており、トグルがネイティブの `<form>` に参加する場合にのみ使用されます。",
           "docsTags": [],
           "default": "'on'",
           "values": [
@@ -20923,7 +20923,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the toggle loses focus.",
+          "docs": "Emitted when the toggle loses focus.\n\n自動翻訳: トグルのフォーカスが外れたときに発せられる。",
           "docsTags": []
         },
         {
@@ -20932,7 +20932,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.",
+          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行される。",
           "docsTags": []
         },
         {
@@ -20941,7 +20941,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the toggle has focus.",
+          "docs": "Emitted when the toggle has focus.\n\n自動翻訳: トグルにフォーカスが当たったときに発せられる。",
           "docsTags": []
         }
       ],
@@ -20950,73 +20950,73 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the toggle"
+          "docs": "Background of the toggle\n\n自動翻訳: トグルの背景"
         },
         {
           "name": "--background-checked",
           "annotation": "prop",
-          "docs": "Background of the toggle when checked"
+          "docs": "Background of the toggle when checked\n\n自動翻訳: チェックしたときのトグルの背景"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the toggle track"
+          "docs": "Border radius of the toggle track\n\n自動翻訳: トグルトラックのボーダー半径"
         },
         {
           "name": "--handle-background",
           "annotation": "prop",
-          "docs": "Background of the toggle handle"
+          "docs": "Background of the toggle handle\n\n自動翻訳: トグルハンドルの背景"
         },
         {
           "name": "--handle-background-checked",
           "annotation": "prop",
-          "docs": "Background of the toggle handle when checked"
+          "docs": "Background of the toggle handle when checked\n\n自動翻訳: チェックしたときのトグルハンドルの背景"
         },
         {
           "name": "--handle-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the toggle handle"
+          "docs": "Border radius of the toggle handle\n\n自動翻訳: トグルハンドルのボーダー半径"
         },
         {
           "name": "--handle-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the toggle handle"
+          "docs": "Box shadow of the toggle handle\n\n自動翻訳: トグルハンドルのボックスシャドウ"
         },
         {
           "name": "--handle-height",
           "annotation": "prop",
-          "docs": "Height of the toggle handle"
+          "docs": "Height of the toggle handle\n\n自動翻訳: トグルハンドルの高さ"
         },
         {
           "name": "--handle-max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the toggle handle"
+          "docs": "Maximum height of the toggle handle\n\n自動翻訳: トグルハンドルの最大高さ"
         },
         {
           "name": "--handle-spacing",
           "annotation": "prop",
-          "docs": "Horizontal spacing around the toggle handle"
+          "docs": "Horizontal spacing around the toggle handle\n\n自動翻訳: トグルハンドル周辺の横方向の間隔"
         },
         {
           "name": "--handle-transition",
           "annotation": "prop",
-          "docs": "Transition of the toggle handle"
+          "docs": "Transition of the toggle handle\n\n自動翻訳: トグルハンドルの変遷"
         },
         {
           "name": "--handle-width",
           "annotation": "prop",
-          "docs": "Width of the toggle handle"
+          "docs": "Width of the toggle handle\n\n自動翻訳: トグルハンドルの幅"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "handle",
-          "docs": "The toggle handle, or knob, used to change the checked state."
+          "docs": "The toggle handle, or knob, used to change the checked state.\n\n自動翻訳: チェックした状態を変更するために使用するトグルハンドル（つまみ）です。"
         },
         {
           "name": "track",
-          "docs": "The background track of the toggle."
+          "docs": "The background track of the toggle.\n\n自動翻訳: トグルの背景トラックです。"
         }
       ],
       "dependents": [],
@@ -21068,7 +21068,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -21123,7 +21123,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -21152,79 +21152,79 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the toolbar"
+          "docs": "Background of the toolbar\n\n自動翻訳: ツールバーの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the toolbar border"
+          "docs": "Color of the toolbar border\n\n自動翻訳: ツールバーの枠の色"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the toolbar border"
+          "docs": "Style of the toolbar border\n\n自動翻訳: ツールバーのボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the toolbar border"
+          "docs": "Width of the toolbar border\n\n自動翻訳: ツールバーの枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the toolbar text"
+          "docs": "Color of the toolbar text\n\n自動翻訳: ツールバーテキストの色"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the toolbar"
+          "docs": "Minimum height of the toolbar\n\n自動翻訳: ツールバーの最小高さ"
         },
         {
           "name": "--opacity",
           "annotation": "prop",
-          "docs": "Opacity of the toolbar background"
+          "docs": "Opacity of the toolbar background\n\n自動翻訳: ツールバーの背景の不透明度"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the toolbar"
+          "docs": "Bottom padding of the toolbar\n\n自動翻訳: ツールバーの下パディング"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the toolbar"
+          "docs": "Top padding of the toolbar\n\n自動翻訳: ツールバーの上部パディング"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot."
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the toolbar text in LTR, and to the left in RTL."
+          "docs": "Content is placed to the right of the toolbar text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "primary",
-          "docs": "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode."
+          "docs": "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.\n\n自動翻訳: コンテンツは、`ios`モードではツールバーテキストの右側に、`md`モードでは右端に配置されます。"
         },
         {
           "name": "secondary",
-          "docs": "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode."
+          "docs": "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.\n\n自動翻訳: コンテンツは、`ios`モードではツールバーテキストの左側に、`md`モードでは右側に直接配置されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the toolbar text in LTR, and to the right in RTL."
+          "docs": "Content is placed to the left of the toolbar text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [],
@@ -21246,7 +21246,7 @@
           "mutable": false,
           "attr": "approx-footer-height",
           "reflectToAttr": false,
-          "docs": "The approximate width of each footer template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.",
+          "docs": "The approximate width of each footer template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.\n\n自動翻訳: 各フッターテンプレートのセルのおおよその幅を指定します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
           "docsTags": [],
           "default": "30",
           "values": [
@@ -21263,7 +21263,7 @@
           "mutable": false,
           "attr": "approx-header-height",
           "reflectToAttr": false,
-          "docs": "The approximate height of each header template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.",
+          "docs": "The approximate height of each header template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.\n\n自動翻訳: 各ヘッダーテンプレートのセルのおおよその高さを表します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
           "docsTags": [],
           "default": "30",
           "values": [
@@ -21280,7 +21280,7 @@
           "mutable": false,
           "attr": "approx-item-height",
           "reflectToAttr": false,
-          "docs": "It is important to provide this\nif virtual item height will be significantly larger than the default\nThe approximate height of each virtual item template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.",
+          "docs": "It is important to provide this\nif virtual item height will be significantly larger than the default\nThe approximate height of each virtual item template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.\n\n自動翻訳: 仮想アイテムの高さがデフォルトよりかなり大きくなる場合は、これを指定することが重要です。 各仮想アイテムテンプレートのセルのおおよその高さ。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られるもので、この近似値はアイテムがレンダリングされる前に初期寸法を計算するのに役立つものであることに注意してください。",
           "docsTags": [],
           "default": "45",
           "values": [
@@ -21296,7 +21296,7 @@
           "type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Section footers and the data used within its given\ntemplate can be dynamically created by passing a function to `footerFn`.\nThe logic within the footer function can decide if the footer template\nshould be used, and what data to give to the footer template. The function\nmust return `null` if a footer cell shouldn't be created.",
+          "docs": "Section footers and the data used within its given\ntemplate can be dynamically created by passing a function to `footerFn`.\nThe logic within the footer function can decide if the footer template\nshould be used, and what data to give to the footer template. The function\nmust return `null` if a footer cell shouldn't be created.\n\n自動翻訳: セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければならない。",
           "docsTags": [],
           "values": [
             {
@@ -21320,7 +21320,7 @@
           "type": "((item: any, index: number) => number) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An optional function that maps each item footer within their height.",
+          "docs": "An optional function that maps each item footer within their height.\n\n自動翻訳: 各項目のフッターをその高さ内にマッピングするオプション関数。",
           "docsTags": [],
           "values": [
             {
@@ -21338,7 +21338,7 @@
           "type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Section headers and the data used within its given\ntemplate can be dynamically created by passing a function to `headerFn`.\nFor example, a large list of contacts usually has dividers between each\nletter in the alphabet. App's can provide their own custom `headerFn`\nwhich is called with each record within the dataset. The logic within\nthe header function can decide if the header template should be used,\nand what data to give to the header template. The function must return\n`null` if a header cell shouldn't be created.",
+          "docs": "Section headers and the data used within its given\ntemplate can be dynamically created by passing a function to `headerFn`.\nFor example, a large list of contacts usually has dividers between each\nletter in the alphabet. App's can provide their own custom `headerFn`\nwhich is called with each record within the dataset. The logic within\nthe header function can decide if the header template should be used,\nand what data to give to the header template. The function must return\n`null` if a header cell shouldn't be created.\n\n自動翻訳: セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければならない。",
           "docsTags": [],
           "values": [
             {
@@ -21362,7 +21362,7 @@
           "type": "((item: any, index: number) => number) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An optional function that maps each item header within their height.",
+          "docs": "An optional function that maps each item header within their height.\n\n自動翻訳: 各項目のヘッダを高さの範囲内でマッピングするオプション関数。",
           "docsTags": [],
           "values": [
             {
@@ -21380,7 +21380,7 @@
           "type": "((item: any, index: number) => number) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An optional function that maps each item within their height.\nWhen this function is provides, heavy optimizations and fast path can be taked by\n`ion-virtual-scroll` leading to massive performance improvements.\n\nThis function allows to skip all DOM reads, which can be Doing so leads\nto massive performance",
+          "docs": "An optional function that maps each item within their height.\nWhen this function is provides, heavy optimizations and fast path can be taked by\n`ion-virtual-scroll` leading to massive performance improvements.\n\nThis function allows to skip all DOM reads, which can be Doing so leads\nto massive performance\n\n自動翻訳: 各アイテムをその高さ内にマッピングするオプションの関数です。この関数が提供されると、`ion-virtual-scroll`によって重い最適化と高速パスが取られるようになり、大幅な性能向上が期待できる。  この関数は、DOMの読み込みをすべてスキップすることができ、Doingすることで大幅なパフォーマンスの向上につながります。",
           "docsTags": [],
           "values": [
             {
@@ -21398,7 +21398,7 @@
           "type": "any[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The data that builds the templates within the virtual scroll.\nIt's important to note that when this data has changed, then the\nentire virtual scroll is reset, which is an expensive operation and\nshould be avoided if possible.",
+          "docs": "The data that builds the templates within the virtual scroll.\nIt's important to note that when this data has changed, then the\nentire virtual scroll is reset, which is an expensive operation and\nshould be avoided if possible.\n\n自動翻訳: 仮想スクロール内のテンプレートを構築するためのデータです。このデータが変更された場合、仮想スクロール全体がリセットされることになります。",
           "docsTags": [],
           "values": [
             {
@@ -21416,7 +21416,7 @@
           "type": "((el: HTMLElement | null, cell: Cell, domIndex: number) => HTMLElement) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only Vanilla JS API.",
+          "docs": "NOTE: only Vanilla JS API.\n\n自動翻訳: 注：Vanilla JS APIのみです。",
           "docsTags": [],
           "values": [
             {
@@ -21437,7 +21437,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the footer to be rendered. Returns a JSX virtual-dom.",
+          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the footer to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供する。JSXのvirtual-domを返す。",
           "docsTags": [],
           "values": [
             {
@@ -21455,7 +21455,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the header to be rendered. Returns a JSX virtual-dom.",
+          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the header to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供する。JSXのvirtual-domを返す。",
           "docsTags": [],
           "values": [
             {
@@ -21473,7 +21473,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the items to be rendered. Returns a JSX virtual-dom.",
+          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the items to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意する。JSXのvirtual-domを返す。",
           "docsTags": [],
           "values": [
             {
@@ -21496,7 +21496,7 @@
           },
           "signature": "checkEnd() => Promise<void>",
           "parameters": [],
-          "docs": "This method marks the tail the items array as dirty, so they can be re-rendered.\n\nIt's equivalent to calling:\n\n```js\nvirtualScroll.checkRange(lastItemLen);\n```",
+          "docs": "This method marks the tail the items array as dirty, so they can be re-rendered.\n\nIt's equivalent to calling:\n\n```js\nvirtualScroll.checkRange(lastItemLen);\n```\n\n自動翻訳: このメソッドは、アイテム配列の末尾をダーティとしてマークし、再レンダリングできるようにします。  これは次のように呼び出すのと同じです： ``js virtualScroll.checkRange(lastItemLen); ```。",
           "docsTags": []
         },
         {
@@ -21507,7 +21507,7 @@
           },
           "signature": "checkRange(offset: number, len?: number) => Promise<void>",
           "parameters": [],
-          "docs": "This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as\ndirty any time the content or their style changes.\n\nThe subset of items to be updated can are specifying by an offset and a length.",
+          "docs": "This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as\ndirty any time the content or their style changes.\n\nThe subset of items to be updated can are specifying by an offset and a length.\n\n自動翻訳: このメソッドは、アイテムのサブセットをダーティとしてマークし、再レンダリングができるようにします。アイテムは、コンテンツまたはそのスタイルが変更されるたびに、ダーティとしてマークされる必要があります。  更新されるアイテムのサブセットは、オフセットと長さで指定することができます。",
           "docsTags": []
         },
         {
@@ -21518,7 +21518,7 @@
           },
           "signature": "positionForItem(index: number) => Promise<number>",
           "parameters": [],
-          "docs": "Returns the position of the virtual item at the given index.",
+          "docs": "Returns the position of the virtual item at the given index.\n\n自動翻訳: 指定されたインデックスの位置にある仮想アイテムの位置を返します。",
           "docsTags": []
         }
       ],
diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
new file mode 100644
index 00000000000..10a944ef262
--- /dev/null
+++ b/scripts/data/translated-cache.json
@@ -0,0 +1,1147 @@
+{
+  "cache": {
+    "If `true`, the accordion group cannot be interacted with.": "`true`の場合、アコーディオングループと対話することができない。",
+    "The value of the accordion group.": "アコーディオングループの値です。",
+    "The mode determines which platform styles to use.": "モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+    "Emitted when the value property has changed.": "valueプロパティが変更されたときに発行される。",
+    "If `true`, the accordion group can have multiple accordion components expanded at the same time.": "`true`の場合、アコーディオングループは複数のアコーディオンコンポーネントを同時に展開することができます。",
+    "Describes the expansion behavior for each accordion. Possible values are `\"compact\"` and `\"inset\"`. Defaults to `\"compact\"`.": "各アコーディオンの拡張動作を記述する。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
+    "If `true`, the accordion group cannot be interacted with, but does not alter the opacity.": "`true`の場合、アコーディオングループはインタラクティブに操作できないが、不透明度は変更されない。",
+    "If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.": "`true`の場合、アコーディオングループ内のすべてのアコーディオンが拡大・縮小時にアニメーションを行います。",
+    "The wrapper element for the content slot.": "コンテンツスロットのラッパー要素。",
+    "The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.": "使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。",
+    "The wrapper element for the header slot.": "ヘッダースロットのラッパーの要素です。",
+    "If `true`, the accordion cannot be interacted with.": "`true`の場合、アコーディオンは対話することができない。",
+    "Content is placed at the top and is used to expand or collapse the accordion item.": "コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。",
+    "The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.": "トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `'end'` です。",
+    "Content is placed below the header and is shown or hidden based on expanded state.": "コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。",
+    "If `true`, the accordion cannot be interacted with, but does not alter the opacity.": "`true`の場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。",
+    "The value of the accordion. Defaults to an autogenerated value.": "アコーディオンの値です。デフォルトは自動生成された値です。",
+    "The expanded element. Can be used in combination with the `header` and `content` parts (i.e. `::part(header expanded)`).": "拡張された要素です。ヘッダ`とコンテンツ`の部分と組み合わせて使用することができます（例：`::part(header expanded)`）。",
+    "Title for the action sheet.": "アクションシートのタイトルです。",
+    "Emitted after the alert has dismissed.": "アラートが解除された後に発せられる。",
+    "Emitted after the alert has presented.": "アラートが提示された後に発せられる。",
+    "Emitted before the alert has presented.": "アラートが提示される前に発せられる。",
+    "Animation to use when the action sheet is dismissed.": "アクションシートが解除されたときに使用するアニメーションです。",
+    "Present the action sheet overlay after it has been created.": "アクションシートのオーバーレイを作成後に提示する。",
+    "Returns a promise that resolves when the action sheet will dismiss.": "アクションシートが解散するタイミングを解決するプロミスを返します。",
+    "An array of buttons for the action sheet.": "アクションシートのボタンの配列です。",
+    "Dismiss the action sheet overlay after it has been presented.": "アクションシートのオーバーレイが提示された後、それを解除する。",
+    "Emitted before the alert has dismissed.": "アラートが解除される前に発せられる。",
+    "Returns a promise that resolves when the action sheet did dismiss.": "アクションシートが解散したときに解決するプロミスを返します。",
+    "If `true`, the action sheet will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、アクションシートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Subtitle for the action sheet.": "アクションシートのサブタイトルです。",
+    "If `true`, the keyboard will be automatically dismissed when the overlay is presented.": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+    "Animation to use when the action sheet is presented.": "アクションシートの提示時に使用するアニメーションです。",
+    "Additional attributes to pass to the action sheet.": "アクションシートに渡す追加属性。",
+    "If `true`, the action sheet will animate.": "`true`の場合、アクションシートはアニメーションを行います。",
+    "Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.": "カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
+    "If `true`, the action sheet will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとアクションシートが解除されます。",
+    "Background of the action sheet button": "アクションシートボタンの背景",
+    "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.": "アクションシートボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。",
+    "Minimum height of the action sheet": "アクションシートの最小高さ",
+    "Minimum width of the action sheet": "アクションシートの最小幅",
+    "Color of the action sheet button when tabbed to": "にタブで移動したときのアクションシートのボタンの色。",
+    "Color of the action sheet button": "アクションシートボタンの色",
+    "Color of the selected action sheet button": "選択されたアクションシートのボタンの色",
+    "Background of the selected action sheet button": "選択したアクションシートボタンの背景",
+    "Background of the action sheet button on hover": "ホバー時のアクションシートボタンの背景",
+    "height of the action sheet": "アクションシートの高さ",
+    "Opacity of the action sheet button background when pressed": "アクションシートボタンが押されたときの背景の不透明度",
+    "Opacity of the action sheet button background when tabbed to": "にタブしたときのアクションシートボタンの背景の不透明度。",
+    "Maximum height of the action sheet": "アクションシートの最大高さ",
+    "Color of the action sheet text": "アクションシートテキストの色",
+    "Maximum width of the action sheet": "アクションシートの最大幅",
+    "Width of the action sheet": "アクションシートの横幅",
+    "Background of the action sheet button when tabbed to": "にタブしたときのアクションシートボタンの背景。",
+    "Color of the action sheet button when pressed": "アクションシートボタンが押されたときの色",
+    "Color of the action sheet button on hover": "ホバー時のアクションシートボタンの色",
+    "Opacity of the selected action sheet button background": "選択されたアクションシートボタンの背景の不透明度",
+    "Opacity of the action sheet button background on hover": "ホバー時のアクションシートボタンの背景の不透明度",
+    "Opacity of the backdrop": "背景の不透明度",
+    "Background of the action sheet group": "アクションシートグループの背景",
+    "Returns a promise that resolves when the alert will dismiss.": "アラートが解除されるタイミングを解決するプロミスを返します。",
+    "Dismiss the alert overlay after it has been presented.": "アラートオーバーレイが表示された後、解除する。",
+    "Returns a promise that resolves when the alert did dismiss.": "アラートが解除されたことを解決するプロミスを返します。",
+    "Maximum height of the alert": "アラートの最大高さ",
+    "Height of the alert": "アラートの高さ",
+    "Additional attributes to pass to the alert.": "アラートに渡す追加属性。",
+    "Animation to use when the alert is dismissed.": "アラートが解除されたときに使用するアニメーション。",
+    "Array of input to show in the alert.": "アラートに表示する入力の配列。",
+    "Background of the alert": "注意喚起の背景",
+    "The main title in the heading of the alert.": "アラートの見出しにあるメインタイトルです。",
+    "Array of buttons to be added to the alert.": "アラートに追加されるボタンの配列。",
+    "The subtitle in the heading of the alert. Displayed under the title.": "アラートの見出しにあるサブタイトルです。タイトルの下に表示されます。",
+    "Present the alert overlay after it has been created.": "アラートオーバーレイを作成した後に提示する。",
+    "If `true`, the alert will animate.": "`true`の場合、アラートはアニメーションで表示されます。",
+    "If `true`, the alert will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとアラートが解除される。",
+    "If `true`, the alert will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、アラートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Animation to use when the alert is presented.": "アラート提示時に使用するアニメーションです。",
+    "The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "Maximum width of the alert": "アラートの最大幅",
+    "Minimum width of the alert": "アラートの最小幅",
+    "Width of the alert": "アラートの幅",
+    "Minimum height of the alert": "アラートの最低高さ",
+    "Border radius of the avatar and inner image": "アバターとインナーイメージの境界半径",
+    "Font weight of the button icon": "ボタンアイコンのフォントの太さ",
+    "The text to display in the back button.": "バックボタンに表示するテキストです。",
+    "Background of the button on hover": "ホバー時のボタンの背景",
+    "The type of the button.": "ボタンの種類です。",
+    "Text color of the button when focused with the tab key": "タブキーでフォーカスしたときのボタンの文字色",
+    "Background of the button": "ボタンの背景",
+    "Text color of the button on hover": "ホバー時のボタンの文字色",
+    "Background of the button when focused with the tab key": "タブキーでフォーカスしたときのボタンの背景",
+    "Text color of the button": "ボタンの文字色",
+    "Opacity of the background on hover": "ホバー時の背景の不透明度",
+    "Opacity of the button background when focused with the tab key": "タブキーでフォーカスしたときのボタンの背景の不透明度",
+    "If `true`, the user cannot interact with the button.": "`true`の場合、ユーザはボタンと対話することができない。",
+    "The url to navigate back to by default when there is no history.": "履歴がない場合に、デフォルトで戻るためのURL。",
+    "Border radius of the button": "ボタンの境界半径",
+    "Font size of the button icon": "ボタンアイコンのフォントサイズ",
+    "The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.": "戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定する。",
+    "Bottom margin of the button icon": "ボタンアイコンの下端マージン",
+    "The color to use from your application's color palette. Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`. For more information on colors, see [theming](/docs/theming/basics).": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+    "When using a router, it specifies the transition animation when navigating to another page.": "ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。",
+    "Transition of the button": "ボタンの遷移",
+    "Bottom padding of the button": "ボタンの下パディング",
+    "Minimum width of the button": "ボタンの最小幅",
+    "Top padding of the button": "ボタンの上部パディング",
+    "Top padding of the button icon": "ボタンアイコンの上部パディング",
+    "Top margin of the button": "ボタンの上マージン",
+    "Minimum height of the button": "ボタンの最小高さ",
+    "Color of the button ripple effect": "ボタンリプルエフェクトの色",
+    "The native HTML button element that wraps all child elements.": "すべての子要素を包むネイティブ HTML ボタン要素。",
+    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合は右マージン、右から左の場合は左マージン",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "Opacity of the button": "ボタンの不透明度",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Bottom margin of the button": "ボタンの下端マージン",
+    "The back button icon (uses ion-icon).": "戻るボタンのアイコン（ion-iconを使用）。",
+    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合は左マージン、右から左の場合は右マージン",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon": "ボタンアイコンの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。",
+    "The back button text.": "戻るボタンのテキストです。",
+    "Top margin of the button icon": "ボタンアイコンの上マージン",
+    "Bottom padding of the button icon": "ボタンアイコンの下パディング",
+    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合は左マージン、右から左の場合は右マージン",
+    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合は右マージン、右から左の場合は左マージン",
+    "Emitted when the backdrop is tapped.": "バックドロップがタップされたときに発せられる。",
+    "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.": "`true`の場合、背景をクリックすることができ、`ionBackdropTap`イベントを発生させます。",
+    "If `true`, the backdrop will stop propagation on tap.": "`true`の場合、バックドロップはタップ時に伝搬を停止します。",
+    "If `true`, the backdrop will be visible.": "`true`の場合、バックドロップが表示されます。",
+    "Bottom padding of the badge": "バッジの下パディング",
+    "Text color of the badge": "バッジの文字色",
+    "Top padding of the badge": "バッジの上部パディング",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "Background of the badge": "バッジの背景",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Emitted when the breadcrumb loses focus.": "パンくずのフォーカスが外れたときに発せられる。",
+    "Text color of the breadcrumb on hover": "ホバー時のパンくずのテキスト色",
+    "The indicator element that shows the breadcrumbs are collapsed.": "パンくずが折りたたまれていることを示すインジケーター要素です。",
+    "When using a router, it specifies the transition direction when navigating to another page using `href`.": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
+    "If `true`, the user cannot interact with the breadcrumb.": "`true`の場合、ユーザーはパンくずと対話することができない。",
+    "Text color of the breadcrumb when focused": "フォーカスされたときのパンくずのテキスト色",
+    "Text color of the active breadcrumb": "アクティブなパンくずのテキスト色",
+    "Background color of the breadcrumb when focused": "フォーカス時のパンくずの背景色",
+    "Emitted when the breadcrumb has focus.": "パンくずがフォーカスされたときに発せられる。",
+    "If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.": "trueの場合、このパンくずと次のパンくずの間にセパレータを表示する。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
+    "Text color of the breadcrumb": "パンくずの文字色",
+    "When using a router, it specifies the transition animation when navigating to another page using `href`.": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+    "The native HTML anchor or div element that wraps all child elements.": "すべての子要素を包むネイティブHTMLのアンカーまたはdiv要素です。",
+    "Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.": "リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+    "Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.": "ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+    "Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).": "ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+    "This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+    "If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.": "`true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。",
+    "The separator element between each breadcrumb.": "各パンくずの間のセパレータ要素です。",
+    "The maximum number of breadcrumbs to show before collapsing.": "折りたたむ前に表示するパンくずの最大数を指定します。",
+    "Emitted when the collapsed indicator is clicked on.": "折りたたみインジケータがクリックされたときに発する。",
+    "The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.": "折りたたんだインジケータの前に表示するパンくずの数を指定する。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
+    "The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.": "折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
+    "Opacity of the button when pressed": "ボタンが押されたときの不透明度",
+    "The type of button.": "ボタンの種類です。",
+    "Set to `\"round\"` for a button with more rounded corners.": "round\"` に設定すると、より角が丸いボタンになります。",
+    "Emitted when the button loses focus.": "ボタンのフォーカスが外れたときに発せられる。",
+    "Opacity of the button when focused with the tab key": "タブキーでフォーカスしたときのボタンの不透明度",
+    "Emitted when the button has focus.": "ボタンにフォーカスが当たっているときに発せられる。",
+    "If `true`, activates a button with a heavier font weight.": "`true`の場合、より重いフォントウェイトを持つボタンをアクティブにする。",
+    "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"` for a transparent button with a border, or to `\"solid\"` for a button with a filled background. The default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.": "フラットなボタンに似た透明なボタンには `\"clear\"` を、ボーダーのある透明なボタンには `\"outline\"` を、背景を塗りつぶしたボタンには `\"solid\"` を設定します。デフォルトの塗りつぶしは `\"solid\"` です。ただし、ツールバーの内側では `\"clear\"` となります。",
+    "Set to `\"small\"` for a button with less height and padding, to `\"default\"` for a button with the default height and padding, or to `\"large\"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `\"small\"` by default. Set the size to `\"default\"` inside of an item to make it a standard size button.": "ボタンの高さとパディングが少ない場合は `\"small\"` に、ボタンの高さとパディングがデフォルトの場合は `\"default\"` に、ボタンの高さとパディングが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
+    "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button with square corners and no left or right borders.": "全角のボタンなら`\"block\"`、角が四角く左右のボーダーがない全角のボタンなら`\"full\"`に設定します。",
+    "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.": "HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。",
+    "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.": "ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。",
+    "Text color of the button when pressed": "ボタンが押されたときの文字色",
+    "Should be used on an icon in a button that has no text.": "テキストを持たないボタン内のアイコンに対して使用されるべきである。",
+    "The native HTML button or anchor element that wraps all child elements.": "すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。",
+    "Text color of the button when hover": "ホバー時のボタンの文字色",
+    "Content is placed between the named slots if provided without a slot.": "スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。",
+    "Box shadow of the button": "ボタンのボックスシャドウ",
+    "Content is placed to the right of the button text in LTR, and to the left in RTL.": "コンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。",
+    "Content is placed to the left of the button text in LTR, and to the right in RTL.": "コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。",
+    "Border style of the button": "ボタンのボーダースタイル",
+    "Border width of the button": "ボタンのボーダー幅",
+    "Border color of the button": "ボタンのボーダーカラー",
+    "If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)": "trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` モードにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
+    "If `true`, the card header will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、カードヘッダは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Color of the card subtitle": "カードサブタイトルの色",
+    "Color of the card title": "カードタイトルの色",
+    "If `true`, the user cannot interact with the card.": "`true`の場合、ユーザはカードと対話することができない。",
+    "Color of the card": "カードの色",
+    "Background of the card": "カードの背景",
+    "The native HTML button, anchor, or div element that wraps all child elements.": "すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。",
+    "The type of the button. Only used when an `onclick` or `button` property is present.": "ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。",
+    "If `true`, a button tag will be rendered and the card will be tappable.": "`true`の場合、ボタンタグがレンダリングされ、カードはタップ可能になる。",
+    "If `true`, the checkbox is selected.": "`true`の場合、チェックボックスが選択される。",
+    "Border style of the checkbox icon": "チェックボックスアイコンのボーダースタイル",
+    "Border width of the checkbox icon": "チェックボックスアイコンのボーダー幅",
+    "If `true`, the checkbox will visually appear as indeterminate.": "`true`の場合、チェックボックスは視覚的に不定形と表示されます。",
+    "Border color of the checkbox icon": "チェックボックスアイコンのボーダーカラー",
+    "Border radius of the checkbox icon": "チェックボックスアイコンの境界半径",
+    "Background of the checkbox icon": "チェックボックスアイコンの背景",
+    "The name of the control, which is submitted with the form data.": "フォームデータとともに送信されるコントロールの名前。",
+    "Size of the checkbox icon": "チェックボックスのアイコンの大きさ",
+    "If `true`, the user cannot interact with the checkbox.": "`true`の場合、ユーザはチェックボックスと対話することができない。",
+    "Emitted when the checkbox loses focus.": "チェックボックスのフォーカスが外れたときに発せられる。",
+    "Color of the checkbox checkmark when checked": "チェックボックスのチェックマークがチェックされたときの色",
+    "Emitted when the checkbox has focus.": "チェックボックスにフォーカスが当たったときに発せられる。",
+    "Border color of the checkbox icon when checked": "チェックボックスのアイコンがチェックされたときのボーダーカラー",
+    "Background of the checkbox icon when checked": "チェックしたときのチェックボックスアイコンの背景",
+    "Emitted when the checked property has changed.": "チェックされたプロパティが変更されたときに発行される。",
+    "Stroke width of the checkbox checkmark": "チェックボックス・チェックマークのストローク幅",
+    "The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`, it's only used when the checkbox participates in a native `<form>`.": "チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。  チェックボックスの値は `<input type=\"checkbox\">` の値に似ており、チェックボックスがネイティブの `<form>` に参加する場合にのみ使用されます。",
+    "The checkmark used to indicate the checked state.": "チェックされた状態を示すために使用されるチェックマークです。",
+    "The container for the checkbox mark.": "チェックボックスマークのコンテナです。",
+    "Transition of the checkbox icon": "チェックボックスアイコンの遷移",
+    "Color of the chip": "チップの色",
+    "If `true`, the user cannot interact with the chip.": "`true`の場合、ユーザはチップと対話することができない。",
+    "Display an outline style button.": "アウトラインスタイルボタンを表示する。",
+    "Background of the chip": "チップの背景",
+    "The amount to offset the column, in terms of how many columns it should shift to the end of the total available.": "オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。",
+    "The size of the column, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.": "LGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+    "The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.": "xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+    "The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.": "mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。",
+    "The amount to pull the column, in terms of how many columns it should shift to the start of the total available.": "列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。",
+    "The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.": "xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。",
+    "The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.": "LGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。",
+    "The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.": "xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+    "The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.": "xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定する。",
+    "The amount to push the column, in terms of how many columns it should shift to the end of the total available.": "カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+    "The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.": "xs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。",
+    "The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.": "xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+    "The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.": "smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+    "The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.": "mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。",
+    "The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.": "mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+    "The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.": "smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+    "The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.": "smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+    "The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.": "Lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+    "The number of total Columns in the Grid": "グリッドのカラムの総数",
+    "Padding for the Column on sm screens and up": "スマートフォン以上の画面では、コラムにパッドを入れる。",
+    "Padding for the Column on lg screens and up": "LG以上の画面でのコラムのパディング",
+    "Padding for the Column on md screens and up": "mdスクリーン以上のカラムのパディングについて",
+    "Padding for the Column on xs screens and up": "xsスクリーン以上のカラムのパディングについて",
+    "Padding for the Column on xl screens and up": "XL以上の画面でのカラムのパディングについて",
+    "The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "Padding for the Column": "カラムのパディング",
+    "The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
+    "Offset bottom of the content": "コンテンツのオフセットボトム",
+    "Scroll to the top of the component.": "コンポーネントの上部にスクロールします。",
+    "Scroll to a specified X/Y location in the component.": "コンポーネント内の指定したX/Y位置までスクロールする。",
+    "Scroll to the bottom of the component.": "コンポーネントの一番下までスクロールします。",
+    "Background of the content": "コンテンツの背景",
+    "Offset top of the content": "コンテンツのオフセットトップ",
+    "Scroll by a specified X/Y distance in the component.": "コンポーネントを指定したX/Y距離だけスクロールさせる。",
+    "Color of the content": "コンテンツの色",
+    "Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロールが終了したときに発せられる。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
+    "Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。",
+    "Keyboard offset of the content": "コンテンツのキーボードオフセット",
+    "If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.": "`true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。",
+    "If you want to enable the content scrolling in the X axis, set this property to `true`.": "X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。",
+    "Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.": "パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。",
+    "Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロール中に発せられる。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
+    "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。",
+    "Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`:  i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.": "実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。",
+    "If you want to disable the content scrolling in the Y axis, set this property to `false`.": "Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。",
+    "Top padding of the content": "コンテンツのトップパディング",
+    "The background of the content.": "コンテンツの背景です。",
+    "Bottom padding of the content": "コンテンツのボトムパディング",
+    "The scrollable container of the content.": "コンテンツのスクロール可能なコンテナ。",
+    "Should be used for fixed content that should not scroll.": "スクロールしてはいけない固定コンテンツに使用する必要があります。",
+    "Content is placed in the scrollable area if provided without a slot.": "スロットなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Content displayed inside of the time button.": "時刻ボタンの内側に表示される内容。",
+    "The native HTML button that wraps the slotted text.": "スロットされたテキストをラップするネイティブHTMLボタンです。",
+    "Content displayed inside of the date button.": "日付ボタンの内側に表示されるコンテンツです。",
+    "The ID of the `ion-datetime` instance associated with the datetime button.": "datetime ボタンに関連付けられた `ion-datetime` インスタンスの ID。",
+    "The text to display on the picker's cancel button.": "ピッカーのキャンセルボタンに表示するテキストです。",
+    "The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.": "ion-datetime`に使用する週の最初の曜日を指定する。デフォルト値は `0` で、日曜日を表す。",
+    "If `true`, the user cannot interact with the datetime.": "`true`の場合、ユーザはdatetimeを操作することができない。",
+    "Returns if an individual date (calendar day) is enabled or disabled.  If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.  The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.  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.": "個々の日付(暦日)が有効か無効かを返す。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブである。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
+    "The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.": "ion-datetime`の時間周期を指定する。値が設定されていない場合、現在のロケールによって指定される。",
+    "If `true`, multiple dates can be selected at once. Only applies to `presentation=\"date\"` and `preferWheel=\"false\"`.": "`true`の場合、複数の日付を一度に選択することができる。presentation=\"date\"`と `preferWheel=\"false\"` にのみ適用される。",
+    "Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.": "選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
+    "Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues=\"0,15,30,45\"`.": "選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
+    "The text to display on the picker's \"Clear\" button.": "ピッカーの「クリア」ボタンに表示するテキストです。",
+    "Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel=\"false\"`.": "特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel=\"false\"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。",
+    "The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.": "許容される最大のdatetimeを指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。",
+    "The text to display on the picker's \"Done\" button.": "ピッカーの \"Done \"ボタンに表示するテキスト。",
+    "If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。time'`, `month'`, `'month-year'`, または `-year'`.",
+    "Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.": "選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
+    "The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.": "許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでよい。デフォルトは、今日から100年前の年頭です。",
+    "Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.": "選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
+    "The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.": "ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
+    "Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.": "どの値を選択するか。date'`はカレンダーピッカーを表示し、月、日、年を選択します。time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
+    "Emitted when the datetime loses focus.": "datetimeのフォーカスが外れたときに発せられる。",
+    "Emitted when the value (selected date) has changed.": "値（選択された日付）が変化したときに発せられる。",
+    "The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple=\"true\"`.": "datetimeの値を有効なISO 8601 datetime文字列として指定する。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
+    "Emitted when the datetime selection was cancelled.": "datetimeの選択がキャンセルされたときに発生する。",
+    "Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.": "ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。",
+    "Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.": "datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
+    "A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to \"numberOfDates days\".": "選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは \"numberOfDates days \"に設定されています。",
+    "Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.": "選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。",
+    "If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.": "cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。fixed`の場合、`ion-datetime`は固定幅になる。",
+    "If `true`, the default \"Time\" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`スロットを使用することもできます。time-label`スロットにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
+    "Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.": "選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` 入力には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
+    "Emitted when the datetime has focus.": "datetimeにフォーカスが当たったときに発行される。",
+    "If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.": "`true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、スロットされたタイトルと、選択された日付の両方が含まれます。",
+    "The title of the datetime.": "datetimeのタイトルです。",
+    "The buttons in the datetime.": "datetimeのボタンです。",
+    "The label for the time selector in the datetime.": "datetimeの時間セレクタのラベルです。",
+    "The text color of the title.": "タイトルの文字色です。",
+    "The primary background of the datetime component.": "datetimeコンポーネントの主な背景。",
+    "If `true`, the datetime appears normal but is not interactive.": "`true`の場合、datetimeは正常に表示されるが、インタラクティブにはならない。",
+    "The primary background of the datetime component in RGB format.": "datetimeコンポーネントの主な背景をRGBフォーマットで示す。",
+    "If `true`, the default \"Cancel\" and \"OK\" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`スロットを使用することもできます。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
+    "If `true`, a \"Clear\" button will be rendered alongside the default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` スロットを使用することもできる。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
+    "The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.": "クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。",
+    "The close icon that is displayed when a fab list opens (uses ion-icon).": "ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。",
+    "Font size of the close icon": "クローズアイコンのフォントサイズ",
+    "Opacity of the button background when pressed": "押されたときのボタンの背景の不透明度",
+    "If `true`, the user cannot interact with the fab button.": "`true`の場合、ユーザーはファブボタンを操作することができない。",
+    "The size of the button. Set this to `small` in order to have a mini fab button.": "ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。",
+    "Opacity of the button background on hover": "ホバー時のボタン背景の不透明度",
+    "If `true`, the fab button will be show a close icon.": "`true`の場合、ファブボタンにクローズアイコンを表示します。",
+    "If `true`, the fab button will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ファブボタンが半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "If `true`, the fab button will show when in a fab-list.": "`true`の場合、fabボタンがfab-listにあるときに表示されます。",
+    "The side the fab list will show on relative to the main fab button.": "メインファブボタンに対して、ファブリストが表示される側を指定します。",
+    "If `true`, the fab list will show all fab buttons in the list.": "`true`の場合、ファブリストに全てのファブボタンが表示されます。",
+    "Where to align the fab vertically in the viewport.": "ビューポートでファブを縦に並べる場所。",
+    "Where to align the fab horizontally in the viewport.": "ビューポートでファブを水平に揃える場所。",
+    "Close an active FAB list container.": "アクティブなFABリストコンテナを閉じる。",
+    "If `true`, the fab will display on the edge of the header if `vertical` is `\"top\"`, and on the edge of the footer if it is `\"bottom\"`. Should be used with a `fixed` slot.": "`true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。fixed` スロットと一緒に使用する必要があります。",
+    "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.": "もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。",
+    "Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.": "フッターに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。",
+    "If `true`, the footer will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.": "`true`の場合、フッターは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+    "Padding for the Grid on xs screens": "xs画面でのGridのパディングについて",
+    "Padding for the Grid on lg screens": "LG画面でのグリッドのパディングについて",
+    "Width of the fixed Grid on xs screens": "xsスクリーンで固定されたGridの幅",
+    "Padding for the Grid on md screens": "md画面におけるグリッドのパディングについて",
+    "Padding for the Grid": "グリッドのパディング",
+    "Width of the fixed Grid": "固定Gridの幅",
+    "Padding for the Grid on sm screens": "スマートスクリーンにおけるグリッドのパディング",
+    "Padding for the Grid on xl screens": "XL画面でのグリッドのパディングについて",
+    "Width of the fixed Grid on md screens": "md画面での固定Gridの幅",
+    "Width of the fixed Grid on lg screens": "LGスクリーンで固定されたGridの幅",
+    "Width of the fixed Grid on sm screens": "sm画面での固定Gridの幅",
+    "Width of the fixed Grid on xl screens": "xl画面での固定Gridの幅",
+    "If `true`, the grid will have a fixed width based on the screen size.": "`true`の場合、グリッドの幅は画面サイズに応じた固定幅となる。",
+    "Describes the scroll effect that will be applied to the header. Only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)": "ヘッダーに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。  通常、[折りたたみ式大型タイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
+    "If `true`, the header will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.": "`true`の場合、ヘッダーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+    "Emitted when the img fails to load": "imgの読み込みに失敗したときに発せられる",
+    "The inner `img` element.": "内側の `img` 要素。",
+    "Emitted when the image has finished loading": "画像の読み込みが終了したときに発せられる",
+    "Emitted when the img src has been set": "img srcが設定されたときに発せられる。",
+    "The image URL. This attribute is mandatory for the `<img>` element.": "画像のURL。この属性は `<img>` 要素では必須である。",
+    "This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.": "この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。",
+    "An animated SVG spinner that shows while loading.": "ロード中に表示されるアニメーションSVGスピナーです。",
+    "Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.": "`true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。  trueを設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
+    "The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.": "スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、`100px`という値を使用します。",
+    "The position of the infinite scroll element. The value can be either `top` or `bottom`.": "無限スクロール要素の位置を指定する。値は `top` または `bottom` のどちらかである。",
+    "Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed.": "スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。",
+    "Call `complete()` within the `ionInfinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`.": "非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。",
+    "Indicates whether the value of the control can be automatically completed by the browser.": "コントロールの値が、ブラウザによって自動的に補完されるかどうかを示す。",
+    "Whether auto correction should be enabled when the user is entering/editing the text value.": "ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。",
+    "This attribute is ignored.": "この属性は無視されます。",
+    "If `true`, the user cannot interact with the input.": "`true`の場合、ユーザは入力と対話することができない。",
+    "The maximum value, which must not be less than its minimum (min attribute) value.": "最大値で、その最小値（min属性）より小さくてはならない。",
+    "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.": "`true`の場合、値があるときに入力にクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
+    "The minimum value, which must not be greater than its maximum (max attribute) value.": "最小値で、その最大値（max属性）より大きくてはならない。",
+    "This Boolean attribute lets you specify that a form control should have input focus when the page loads.": "この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。",
+    "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.": "`true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
+    "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.": "`true`の場合、ユーザは複数の値を入力することができる。この属性は、type属性が `\"email\"` に設定されている場合に適用され、それ以外の場合は無視される。",
+    "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+    "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.": "テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+    "A hint to the browser for which enter key to display. Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.": "どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
+    "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
+    "A hint to the browser for which keyboard to display. Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.": "どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+    "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
+    "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.": "値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` 入力タイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
+    "Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.": "入力が値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
+    "Font weight of the input placeholder text": "入力用プレースホルダーテキストのフォントウェイト",
+    "The value of the input.": "入力された値です。",
+    "Background of the input": "入力の背景",
+    "Emitted when the input loses focus.": "入力のフォーカスが外れたときに発せられる。",
+    "Top padding of the input": "入力のトップパディング",
+    "Emitted when the input has focus.": "入力にフォーカスが当たったときに発せられる。",
+    "Opacity of the input placeholder text": "入力プレースホルダーテキストの不透明度",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input": "入力の方向が左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "Emitted when a keyboard input occurred.": "キーボード入力が発生したときに発する。",
+    "Color of the input text": "入力テキストの色",
+    "Font style of the input placeholder text": "入力用プレースホルダーテキストのフォントスタイル",
+    "Returns the native `<input>` element used under the hood.": "フードの下で使用されているネイティブの `<input>` 要素を返します。",
+    "Bottom padding of the input": "入力の下パディング",
+    "Emitted when the value has changed.": "値が変更されたときに発せられる。",
+    "The type of control to display. The default type is text.": "表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。",
+    "Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `\"any\"` or a positive floating point number.": "min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any\"`または正の浮動小数点数。",
+    "Color of the input placeholder text": "入力用プレースホルダーテキストの色",
+    "Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.": "ion-input` のネイティブ `input` にフォーカスを設定する。グローバルな `input.focus()` の代わりに、このメソッドを使用します。  ページが入ったときに入力にフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input": "入力の方向が左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "If `true`, the user cannot modify the value.": "`true`の場合、ユーザーは値を変更することができない。",
+    "If `true`, the element will have its spelling and grammar checked.": "`true`の場合、その要素のスペルチェックと文法チェックが行われる。",
+    "If `true`, the user must fill in a value before submitting a form.": "`true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
+    "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.": "コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数である。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
+    "Top padding of the item divider": "アイテムディバイダーのトップパディング",
+    "Bottom inner padding of the item divider": "アイテムディバイダーのボトムインナーパディング",
+    "Top inner padding of the item divider": "アイテムディバイダーの上部内側パディング",
+    "End inner padding of the item divider": "アイテムディバイダーの内側パディングを終了する",
+    "Background of the item divider": "アイテムディバイダーの背景",
+    "Color of the item divider": "アイテムディバイダーの色",
+    "Content is placed to the left of the divider text in LTR, and to the right in RTL.": "コンテンツは、LTRでは仕切り文字の左側に、RTLでは右側に配置されます。",
+    "Bottom padding of the item divider": "アイテムディバイダーのボトムパディング",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合は右パディング、右から左の場合は左パディング",
+    "When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky": "`true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。  この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky",
+    "Start inner padding of the item divider": "アイテムディバイダーの内側パディングを開始する",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Content is placed to the right of the divider text in LTR, and to the left in RTL.": "コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。",
+    "Background of the item option": "アイテムオプションの背景",
+    "Color of the item option": "アイテムオプションのカラー",
+    "Should be used on an icon in an option that has no text.": "テキストを持たないオプションのアイコンに使用されるべきです。",
+    "If `true`, the user cannot interact with the item option.": "`true`の場合、ユーザーはアイテムオプションと対話することができない。",
+    "Content is placed to the right of the option text in LTR, and to the left in RTL.": "コンテンツは、LTRではオプションテキストの右側に、RTLでは左側に配置されます。",
+    "If `true`, the option will expand to take up the available width and cover any other options.": "`true`の場合、オプションは利用可能な幅を占めるように展開し、他のオプションをカバーします。",
+    "Content is placed below the option text.": "コンテンツは、オプションテキストの下に配置されます。",
+    "Content is placed above the option text.": "オプションテキストの上にコンテンツが配置されます。",
+    "Content is placed to the left of the option text in LTR, and to the right in RTL.": "コンテンツは、LTRではオプションテキストの左側に、RTLでは右側に配置されます。",
+    "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.": "オプションボタンを配置する側を指定します。指定可能な値。start\"` と `\"end\"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。",
+    "Emitted when the item has been fully swiped.": "アイテムが完全にスワイプされたときに発せられる。",
+    "Open the sliding item.": "スライド式の項目を開く。",
+    "Emitted when the sliding position changes.": "スライド位置が変化したときに発せられる。",
+    "Get the amount the item is open in pixels.": "アイテムが開いている量をピクセル単位で取得します。",
+    "Close the sliding item. Items can also be closed from the [List](./list).": "スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。",
+    "Close all of the sliding items in the list. Items can also be closed from the [List](./list).": "リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。",
+    "Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.": "オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いている。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
+    "If `true`, the user cannot interact with the sliding item.": "`true`の場合、ユーザーはスライドアイテムを操作することができません。",
+    "The icon to use when `detail` is set to `true`.": "detail` が `true` に設定されているときに使用するアイコンです。",
+    "If `true`, the user cannot interact with the item.": "`true`の場合、ユーザはそのアイテムと対話することができない。",
+    "Background of the item": "アイテムの背景",
+    "How the bottom border should be displayed on the item.": "アイテムに表示される下枠の表示方法。",
+    "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.": "押されたときのアイテムの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。",
+    "The shape of the item. If \"round\" it will have increased border radius.": "アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。",
+    "If `true`, a button tag will be rendered and the item will be tappable.": "`true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。",
+    "The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.": "アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`モードでのみ使用可能です。",
+    "A callback used to format the counter text. By default the counter text is set to \"itemLength / maxLength\".": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは「itemLength / maxLength」に設定されています。",
+    "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。",
+    "Opacity of the item background when pressed": "押されたときのアイテム背景の不透明度",
+    "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.": "`true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。",
+    "Width of the item inner border": "アイテム内枠の幅",
+    "Top padding of the item": "アイテムのトップパディング",
+    "Minimum height of the item": "アイテムの最小高さ",
+    "Bottom padding of the item": "アイテムの底面パディング",
+    "Bottom padding of the item inner": "アイテム内側のボトムパディング",
+    "Top padding of the item inner": "アイテム内側のトップパディング",
+    "Content is placed under the item and displayed when no error is detected.": "項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。",
+    "Content is placed under the item and displayed when an error is detected.": "項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。",
+    "The native HTML button, anchor or div element that wraps all child elements.": "すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner": "方向が左から右の場合は右パディング、方向がアイテムの内側の右から左の場合は左パディングとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item": "方向が左から右の場合は左パディング、方向が右から左の場合は右パディングで項目を囲む",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item": "方向が左から右の場合は右パディング、方向が右から左の場合は左パディングで項目を囲む",
+    "Transition of the item": "アイテムの変遷",
+    "Box shadow of the item inner": "アイテム内側のボックスシャドウ",
+    "Color of the item ripple effect": "アイテム波及効果の色",
+    "Content is placed to the left of the item text in LTR, and to the right in RTL.": "コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。",
+    "The chevron icon for the item. Only applies when `detail=\"true\"`.": "アイテムのシェブロンアイコンを表示します。detail=\"true\"`のときのみ適用されます。",
+    "Content is placed to the right of the item text in LTR, and to the left in RTL.": "コンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner": "方向が左から右の場合は左パディング、方向が右から左の場合は右パディングがアイテム内側に入る",
+    "The color of the highlight on the item when valid": "有効時のアイテム上のハイライトの色",
+    "Opacity of the item detail icon": "アイテム詳細アイコンの不透明度",
+    "Color of the item border": "アイテムの縁取りの色",
+    "The height of the highlight on the item": "アイテムに表示されるハイライトの高さ",
+    "Color of the item detail icon": "アイテム詳細アイコンの色",
+    "Font size of the item detail icon": "アイテム詳細アイコンのフォントサイズ",
+    "Radius of the item border": "アイテムの境界線の半径",
+    "Color of the item on hover": "ホバー時のアイテムの色",
+    "Color of the item": "アイテムのカラー",
+    "The color of the highlight on the item when focused": "フォーカスされたときのアイテムのハイライトの色",
+    "Style of the item border": "アイテムの枠のスタイル",
+    "Opacity of the item background when focused with the tab key": "タブキーでフォーカスしたときのアイテムの背景の不透明度",
+    "Color of the item when pressed": "押したときのアイテムの色",
+    "Opacity of the background of the item on hover": "ホバー時のアイテムの背景の不透明度",
+    "The color of the highlight on the item when invalid": "無効時のアイテムのハイライトの色",
+    "Color of the item when focused with the tab key": "タブキーでフォーカスしたときのアイテムの色",
+    "Width of the item border": "アイテムの枠の幅",
+    "Background of the item on hover": "ホバー時のアイテムの背景",
+    "Background of the item when focused with the tab key": "タブキーでフォーカスしたときのアイテムの背景",
+    "The position determines where and how the label behaves inside an item.": "位置は、ラベルがアイテム内のどこで、どのように動作するかを決定します。",
+    "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.": "ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能である。",
+    "How the bottom border should be displayed on the list header.": "リストヘッダーの下辺のボーダーをどのように表示するか。",
+    "Style of the list header border": "リストヘッダーボーダーのスタイル",
+    "Color of the list header border": "リストヘッダーボーダーの色",
+    "Background of the list header": "リストヘッダーの背景",
+    "Width of the inner list header border": "リストヘッダー内枠の幅",
+    "Color of the list header text": "リストヘッダーテキストの色",
+    "Width of the list header border": "リストヘッダー枠の幅",
+    "If `true`, the list will have margin around it and rounded corners.": "`true`の場合、リストの周囲に余白ができ、角が丸くなる。",
+    "If `ion-item-sliding` are used inside the list, this method closes any open sliding item.  Returns `true` if an actual `ion-item-sliding` is closed.": "リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。  実際に `ion-item-sliding` が閉じられた場合は `true` を返します。",
+    "How the bottom border should be displayed on all items.": "すべてのアイテムで、下のボーダーをどのように表示させるか。",
+    "Additional attributes to pass to the loader.": "ローダーに渡す追加属性。",
+    "Animation to use when the loading indicator is dismissed.": "ローディングインジケータが解除されたときに使用するアニメーションです。",
+    "Returns a promise that resolves when the loading did dismiss.": "ローディングが解除されたタイミングを解決するプロミスを返します。",
+    "The name of the spinner to display.": "表示するスピナーの名前。",
+    "Animation to use when the loading indicator is presented.": "ローディングインジケータが表示されたときに使用するアニメーションです。",
+    "If `true`, a backdrop will be displayed behind the loading indicator.": "`true`の場合、ロードインジケータの後ろにバックドロップが表示されます。",
+    "Emitted after the loading has dismissed.": "ローディングが解除された後に発せられる。",
+    "Returns a promise that resolves when the loading will dismiss.": "ローディングが解除されるタイミングを解決するプロミスを返します。",
+    "Emitted before the loading has presented.": "ローディングが提示される前に発せられる。",
+    "Emitted after the loading has presented.": "ローディングが提示された後に発せられる。",
+    "Emitted before the loading has dismissed.": "ローディングが解除される前に発せられる。",
+    "Present the loading overlay after it has been created.": "作成後のローディングオーバーレイを提示する。",
+    "Optional text content to display in the loading indicator.": "ロードインジケータに表示するテキストコンテンツは任意です。",
+    "If `true`, the loading indicator will animate.": "`true`の場合、ロードインジケータをアニメーションで表示します。",
+    "Number of milliseconds to wait before dismissing the loading indicator.": "ローディングインジケータを解除するまでの待ち時間（ミリ秒）。",
+    "Dismiss the loading overlay after it has been presented.": "ローディングオーバーレイが提示された後、それを解除する。",
+    "If `true`, the loading indicator will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。",
+    "If `true`, the loading indicator will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ロードインジケータは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Color of the loading spinner": "ローディングスピナーの色",
+    "Minimum height of the loading dialog": "ローディングダイアログの最小高さ",
+    "Height of the loading dialog": "ローディングダイアログの高さ",
+    "Maximum height of the loading dialog": "ローディングダイアログの最大高さ",
+    "Width of the loading dialog": "ローディングダイアログの幅",
+    "Background of the loading dialog": "ローディングダイアログの背景",
+    "Minimum width of the loading dialog": "ローディングダイアログの最小幅",
+    "Maximum width of the loading dialog": "ローディングダイアログの最大幅",
+    "Background of the menu button on hover": "ホバー時のメニューボタンの背景",
+    "Opacity of the menu button background when focused with the tab key": "タブキーでフォーカスしたときのメニューボタンの背景の不透明度",
+    "Background of the menu button": "メニューボタンの背景",
+    "Border radius of the menu button": "メニューボタンのボーダー半径",
+    "Background of the menu button when focused with the tab key": "タブキーでフォーカスしたときのメニューボタンの背景色",
+    "Color of the menu button on hover": "ホバー時のメニューボタンの色",
+    "If `true`, the user cannot interact with the menu button.": "`true`の場合、ユーザはメニューボタンを操作することができない。",
+    "Color of the menu button when focused with the tab key": "タブキーでフォーカスしたときのメニューボタンの色",
+    "The menu button icon (uses ion-icon).": "メニューボタンのアイコン（ion-iconを使用）です。",
+    "Automatically hides the menu button when the corresponding menu is not active": "対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。",
+    "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle": "メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。",
+    "Color of the menu button": "メニューボタンの色",
+    "Content is placed inside the toggle to act as the click target.": "トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。",
+    "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.": "メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルする。",
+    "Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.": "対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にする。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
+    "An id for the menu.": "メニューのIDです。",
+    "Background of the menu": "メニューの背景",
+    "If `true`, swiping the menu is enabled.": "`true`の場合、スワイプによるメニュー操作が有効になる。",
+    "Emitted when the menu is about to be closed.": "メニューが閉じられようとするときに発する。",
+    "Height of the menu": "メニューの高さ",
+    "Emitted when the menu is closed.": "メニューが閉じられたときに発する。",
+    "The display type of the menu. Available options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.": "メニューの表示形式を指定します。利用可能なオプション。overlay\"`, `\"reveal\"`, `\"push\"`.",
+    "Emitted when the menu is about to be opened.": "メニューが開かれようとするときに発する。",
+    "Emitted when the menu is open.": "メニューが開いているときに発せられる。",
+    "The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.": "メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
+    "Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.": "メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返す。",
+    "Which side of the view the menu should be placed.": "メニューがビューのどの側に配置されるべきか。",
+    "Returns `true` is the menu is open.": "メニューが開いている場合は `true` を返す。",
+    "Opens or closes the button. If the operation can't be completed successfully, it returns `false`.": "ボタンを開いたり閉じたりする。操作が正常に完了しない場合は `false` を返す。",
+    "The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.": "ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。",
+    "Opens the menu. If the menu is already open or it can't be opened, it returns `false`.": "メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返す。",
+    "Returns `true` is the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.": "メニューがアクティブであれば `true` を返す。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味する。",
+    "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.": "メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとする。操作が正常に完了しない場合は、`false`を返す。",
+    "If `true`, the menu is disabled.": "`true`の場合、メニューは無効化される。",
+    "Width of the menu": "メニューの幅",
+    "Minimum width of the menu": "メニューの最小幅",
+    "The container for the menu content.": "メニューの内容を格納するコンテナです。",
+    "Maximum height of the menu": "メニューの最大高さ",
+    "Maximum width of the menu": "メニューの最大幅",
+    "Minimum height of the menu": "メニューの高さの最小値",
+    "The backdrop that appears over the main content when the menu is open.": "メニューを開いているときに、メインコンテンツの上に表示される背景です。",
+    "Additional attributes to pass to the modal.": "モーダルに渡す追加属性。",
+    "Animation to use when the modal is dismissed.": "モーダルが解除されたときに使用するアニメーションです。",
+    "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.": "`true`の場合、スワイプでモーダルを解除することができます。iOSモードでのみ適用されます。",
+    "Returns the current breakpoint of a sheet style modal": "シートスタイルモーダルの現在のブレークポイントを返します。",
+    "An ID corresponding to the trigger element that causes the modal to open when clicked.": "クリックされたときにモーダルを開かせるトリガー要素に対応するIDです。",
+    "Animation to use when the modal is presented.": "モーダルが表示されたときに使用するアニメーション。",
+    "If `true`, the modal will animate.": "`true`の場合、モーダルはアニメーションを行います。",
+    "If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.": "`true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。",
+    "Dismiss the modal overlay after it has been presented.": "モーダルオーバーレイが表示された後、それを解除する。",
+    "The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.": "シートモーダルの上部に表示される水平線です。breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
+    "A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array.": "シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。",
+    "Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.": "モーダルが `dismiss` メソッドを呼び出したときに、退出できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
+    "If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.": "`true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
+    "The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]": "シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1]",
+    "If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.": "`true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。  注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。",
+    "The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.": "モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSモードでのみ適用されます。",
+    "If `true`, the modal will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとモーダルは解除されます。",
+    "A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.": "シートモーダル使用時に背景がフェードインし始めるポイントを示す0～1の10進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。",
+    "The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed. Set to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).": "ハンドルが押されたときのシートモーダルのインタラクション動作です。  デフォルトは `\"none\"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle\"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle` プロパティが `false` に設定されている場合、または `breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。",
+    "Width of the modal": "モーダルの幅",
+    "Background of the modal content": "モーダルコンテンツの背景",
+    "Border radius of the modal content": "モーダルコンテンツのボーダー半径",
+    "Emitted before the modal has dismissed.": "モーダルが解散する前に発行される。",
+    "Emitted before the modal has presented.": "モーダルが提示される前に発せられる。",
+    "Minimum height of the modal": "モーダルの最小高さ",
+    "Border color of the modal content": "モーダルコンテンツのボーダーカラー",
+    "Emitted before the modal has presented. Shorthand for ionModalWillPresent.": "モーダルが提示される前に発せられる。ionModalWillPresent の略記です。",
+    "Border width of the modal content": "モーダルコンテンツのボーダー幅",
+    "Content is placed inside of the `.modal-content` element.": "コンテンツは `.modal-content` 要素の内側に配置されます。",
+    "Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.": "モーダルが解散する前に発せられる。ionModalWillDismiss の略記です。",
+    "Maximum height of the modal": "モーダルの最大高さ",
+    "Maximum width of the modal": "モーダルの最大幅",
+    "Minimum width of the modal": "モーダルの最小幅",
+    "Height of the modal": "モーダルの高さ",
+    "Border style of the modal content": "モーダルコンテンツのボーダースタイル",
+    "Emitted after the modal has dismissed.": "モーダルが終了した後に発行されます。",
+    "Present the modal overlay after it has been created.": "モーダルオーバーレイを作成した後に提示する。",
+    "Emitted after the modal breakpoint has changed.": "モードブレークポイントが変更された後に発せられる。",
+    "Emitted after the modal has presented.": "モードが提示された後に発せられる。",
+    "The `ion-backdrop` element.": "ion-backdrop`要素です。",
+    "The wrapper element for the default slot.": "デフォルトスロットのラッパー要素です。",
+    "Returns a promise that resolves when the modal will dismiss.": "モーダルがいつ解散するかを解決するプロミスを返します。",
+    "Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.": "モーダルが解散した後に発せられる。ionModalDidDismiss の略記です。",
+    "Returns a promise that resolves when the modal did dismiss.": "モーダルが解除されたときに解決するプロミスを返します。",
+    "The handle that is displayed at the top of the sheet modal when `handle=\"true\"`.": "handle=\"true\"`のときにシートモーダルの上部に表示されるハンドルです。",
+    "Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.": "シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。",
+    "Emitted after the modal has presented. Shorthand for ionModalDidPresent.": "モードが提示された後に発せられる。ionModalDidPresent の略記です。",
+    "The transition animation when navigating to another page.": "別ページに移動する際の遷移アニメーション。",
+    "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.": "コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用する。",
+    "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.": "ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用する。",
+    "The transition direction when navigating to another page.": "別ページに移動する際の遷移方向です。",
+    "Get the view at the specified index.": "指定されたインデックスにあるビューを取得します。",
+    "Removes a component from the navigation stack at the specified index.": "指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。",
+    "Set the root for the current navigation stack to a component.": "現在のナビゲーションスタックのルートをコンポーネントに設定します。",
+    "If the nav component should allow for swipe-to-go-back.": "ナビコンポーネントがスワイプで戻ることができるようにする場合。",
+    "Get the previous view.": "前のビューを取得します。",
+    "Root NavComponent to load": "ロードするルートNavComponent",
+    "If `true`, the nav should animate the transition of components.": "`true`の場合、コンポーネントの遷移をアニメーションで表現する。",
+    "Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.": "指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入する。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
+    "Pop to a specific index in the navigation stack.": "ナビゲーションスタック内の特定のインデックスにポップします。",
+    "Get the active view.": "アクティブビューを取得します。",
+    "Returns `true` if the current view can go back.": "現在のビューが戻ることができる場合は `true` を返します。",
+    "Event fired when the nav has changed components": "ナビのコンポーネントが変更されたときに発生するイベント",
+    "Pop a component off of the navigation stack. Navigates back from the current component.": "ナビゲーションスタックからコンポーネントをポップオフする。現在のコンポーネントからナビゲートして戻る。",
+    "Any parameters for the root component": "ルートコンポーネントの任意のパラメータ",
+    "Navigate back to the root of the stack, no matter how far back that is.": "スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。",
+    "Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.": "指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。",
+    "Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.": "新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。",
+    "Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.": "現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。",
+    "By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.": "デフォルトでは、`ion-nav` はモード（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
+    "Event fired when the nav will change components": "ナビコンポーネントが変更されたときに発生するイベント",
+    "Color of the note": "ノートの色",
+    "If `true`, the picker will animate.": "`true`の場合、ピッカーはアニメーションを行います。",
+    "Returns a promise that resolves when the picker did dismiss.": "ピッカーが解散したことを解決するプロミスを返します。",
+    "Array of columns to be displayed in the picker.": "ピッカーに表示されるカラムの配列。",
+    "Emitted before the picker has dismissed.": "ピッカーが解散する前に発行される。",
+    "Emitted before the picker has presented.": "ピッカーが提示される前に発せられる。",
+    "Present the picker overlay after it has been created.": "ピッカー・オーバーレイを作成した後に提示する。",
+    "Emitted after the picker has dismissed.": "ピッカーが解散した後に発せられる。",
+    "Additional attributes to pass to the picker.": "ピッカーに渡す追加属性。",
+    "Number of milliseconds to wait before dismissing the picker.": "ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。",
+    "Animation to use when the picker is dismissed.": "ピッカーが解除されたときに使用するアニメーションです。",
+    "If `true`, a backdrop will be displayed behind the picker.": "`true`の場合、ピッカーの後ろに背景が表示されます。",
+    "Get the column that matches the specified name.": "指定された名前に一致するカラムを取得します。",
+    "Emitted after the picker has presented.": "ピッカーが提示された後に発せられる。",
+    "Animation to use when the picker is presented.": "ピッカーが表示されたときに使用するアニメーション。",
+    "Returns a promise that resolves when the picker will dismiss.": "ピッカーが解散するタイミングを解決するプロミスを返します。",
+    "Array of buttons to be displayed at the top of the picker.": "ピッカーの上部に表示されるボタンの配列。",
+    "Dismiss the picker overlay after it has been presented.": "ピッカー・オーバーレイが表示された後、それを解除する。",
+    "If `true`, the picker will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとピッカーが解除される。",
+    "Minimum width of the picker": "ピッカーの最小幅",
+    "Border width of the picker": "ピッカーのボーダー幅",
+    "Width of the picker": "ピッカーの幅",
+    "Maximum width of the picker": "ピッカーの最大幅",
+    "Minimum height of the picker": "ピッカーの最低高さ",
+    "Maximum height of the picker": "ピッカーの最大高さ",
+    "Height of the picker": "ピッカーの高さ",
+    "Background of the picker in rgb format": "ピッカーの背景（rgb形式",
+    "Border style of the picker": "ピッカーのボーダースタイル",
+    "Background of the picker": "ピッカーの背景",
+    "Border color of the picker": "ピッカーのボーダーカラー",
+    "Border radius of the picker": "ピッカーのボーダー半径",
+    "Animation to use when the popover is presented.": "ポップオーバーが表示されたときに使用するアニメーションです。",
+    "Describes how to calculate the popover width. If `'cover'`, the popover width will match the width of the trigger. If `'auto'`, the popover width will be determined by the content in the popover.": "ポップオーバーの幅を計算する方法を説明します。cover'` の場合、ポップオーバーの幅はトリガーの幅と一致します。auto'` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定されます。",
+    "Animation to use when the popover is dismissed.": "ポップオーバーが解除されたときに使用するアニメーションです。",
+    "If `true`, the popover will be automatically dismissed when the content has been clicked.": "`true`の場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。",
+    "If `true`, the popover will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされたときにポップオーバーが解除される。",
+    "If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.": "`true`の場合、`ios`モードで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。md` モードでは適用されない。",
+    "If `true`, the popover will animate.": "`true`の場合、ポップオーバーはアニメーションを行います。",
+    "The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.": "ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。",
+    "If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.": "`true`の場合、ポップオーバーは開く。もし `false` ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または `trigger` プロパティを使用します。注意: ポップオーバーが閉じると `isOpen` は自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
+    "If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.": "`true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、またはDOMに存在するかどうかを制御しません。",
+    "Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `'center'` で、`md` モードでは `'start'` です。",
+    "The event to pass to the popover animation.": "ポップオーバー・アニメーションに渡すイベントです。",
+    "Additional attributes to pass to the popover.": "ポップオーバーに渡す追加属性。",
+    "Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
+    "If `true`, the popover will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ポップオーバーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述する。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
+    "The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.": "ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでよい。",
+    "If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.": "`true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。  注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。",
+    "Maximum width of the popover": "ポップオーバーの最大幅",
+    "Box shadow of the popover": "ポップオーバーのボックスシャドウ",
+    "Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.": "ポップオーバーが提示される前に発行されます。ionPopoverWillPresentの略記です。",
+    "Height of the popover": "ポップオーバーの高さ",
+    "Minimum width of the popover": "ポップオーバーの最小幅",
+    "The amount to move the popover by on the x-axis": "ポップオーバーをX軸方向に移動させる量",
+    "Maximum height of the popover": "ポップオーバーの最大高さ",
+    "Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.": "ポップオーバーが解散する前に発せられる。ionPopoverWillDismissの略記です。",
+    "Minimum height of the popover": "ポップオーバーの高さの最小値",
+    "Background of the popover": "ポップオーバーの背景",
+    "The arrow that points to the reference element. Only applies on `ios` mode.": "参照要素を指し示す矢印。ios`モード時のみ適用される。",
+    "Width of the popover": "ポップオーバーの幅",
+    "Emitted before the popover has dismissed.": "ポップオーバーが解除される前に発行されます。",
+    "Emitted after the popover has dismissed.": "ポップオーバーが解除された後に発行されます。",
+    "The amount to move the popover by on the y-axis": "ポップオーバーをY軸方向に移動させる量を指定します。",
+    "Emitted before the popover has presented.": "ポップオーバーが表示される前に発行されます。",
+    "Emitted after the popover has presented.": "ポップオーバーが表示された後に発行されます。",
+    "Content is placed inside of the `.popover-content` element.": "コンテンツは `.popover-content` 要素の内部に配置される。",
+    "Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.": "ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。",
+    "Returns a promise that resolves when the popover will dismiss.": "ポップオーバーが解除されるタイミングを解決するプロミスを返します。",
+    "Dismiss the popover overlay after it has been presented.": "ポップオーバーオーバーレイが提示された後、それを解除する。",
+    "Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.": "ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。",
+    "Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述する。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
+    "Returns a promise that resolves when the popover did dismiss.": "ポップオーバーが解除されたタイミングを解決するプロミスを返します。",
+    "Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.": "ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。",
+    "An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.": "ポップオーバーを開かせるトリガー要素に対応するIDです。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。",
+    "Background of the progress bar representing the current value": "現在値を表すプログレスバーの背景",
+    "Background of the progress track, or the buffer bar if `buffer` is set": "プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。",
+    "If true, reverse the progress bar direction.": "true の場合、プログレスバーの方向を反転させます。",
+    "The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the width of the `buffer` value.": "プログレスバーの後ろにあるトラックバーです。buffer`プロパティが設定され、`type`が `\"determinate\"` である場合、トラックは `buffer` 値の幅となる。",
+    "The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`.": "バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `\"determinate\"` のときのみ表示される。",
+    "The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`.": "type`が`\"determinate\"`のときは現在値を表示し、`type`が`\"indeterminate\"`のときは前後にスライドするプログレスバーです。",
+    "The state of the progress bar, based on if the time the process takes is known or not. Default options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).": "処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate\"` (アニメーションなし), `\"indeterminate\"` (左から右へアニメーションする).",
+    "The value determines how much of the active bar should display when the `type` is `\"determinate\"`. The value should be between [0, 1].": "この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものである。値は [0, 1] の間であるべきです。",
+    "DEPRECATED, use `--background` instead": "DEPRECATED、代わりに `--background` を使用する。",
+    "If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].": "バッファと値が1より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。",
+    "the value of the radio group.": "無線グループの値です。",
+    "If `true`, the radios can be deselected.": "`true`の場合、ラジオを非選択にすることができる。",
+    "The checkmark or dot used to indicate the checked state.": "チェックされた状態を示すために使用されるチェックマークまたはドットです。",
+    "Color of the checked radio": "チェックしたラジオの色",
+    "The container for the radio mark.": "ラジオマークの入れ物です。",
+    "Emitted when the radio button has focus.": "ラジオボタンにフォーカスが当たったときに発せられる。",
+    "Border radius of the radio": "無線機のボーダー半径",
+    "Color of the radio": "ラジオのカラー",
+    "Border radius of the inner checked radio": "内側のチェック付きラジオのボーダー半径",
+    "Emitted when the radio button loses focus.": "ラジオボタンのフォーカスが外れたときに発せられる。",
+    "the value of the radio.": "は、無線機の値です。",
+    "If `true`, the user cannot interact with the radio.": "`true`の場合、ユーザはラジオと対話することができない。",
+    "Background of the range bar": "レンジバーの背景",
+    "Minimum integer value of the range.": "範囲の最小の整数値。",
+    "Emitted when the range has focus.": "レンジのフォーカスが合ったときに発する。",
+    "Maximum integer value of the range.": "範囲の最大整数値。",
+    "Show two knobs.": "2つのノブを表示する。",
+    "If `true`, the user cannot interact with the range.": "`true`の場合、ユーザは範囲と対話することができない。",
+    "Emitted when the range loses focus.": "レンジの焦点が合わなくなったときに発する。",
+    "If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.": "`true`の場合、ステップの値に基づいてティックマークを表示する。snaps`が `true` の場合のみ適用される。",
+    "How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.": "範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。",
+    "the value of the range.": "範囲の値です。",
+    "If `true`, the knob snaps to tick marks evenly spaced based on the step property value.": "`true`の場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。",
+    "Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。",
+    "Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。",
+    "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\"). Valid values are greater than or equal to the min value and less than or equal to the max value.": "レンジアクティブバーの開始位置です。この機能は、ノブが1つの場合のみ有効です（dualKnobs=\"false\"）。有効な値は、min値以上、max値以下です。",
+    "Specifies the value granularity.": "値の粒度を指定する。",
+    "If `true`, a pin with integer value is shown when the knob is pressed.": "`true`の場合、ノブを押したときに整数値のピンが表示されます。",
+    "A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.": "ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。",
+    "An inactive tick mark.": "非アクティブなティックマークです。",
+    "Box shadow of the range knob": "レンジノブのボックスシャドウ",
+    "The active part of the bar.": "バーのアクティブな部分です。",
+    "The handle that is used to drag the range.": "範囲をドラッグする際に使用するハンドル。",
+    "Color of the range pin (only available in MD mode)": "レンジピンの色（MDモード時のみ有効）",
+    "The counter that appears above a knob.": "ノブの上に表示されるカウンターです。",
+    "Size of the range knob": "レンジツマミの大きさ",
+    "Background of the range knob": "レンジノブの背景",
+    "Height of the range": "レンジの高さ",
+    "The inactive part of the bar.": "バーの非アクティブな部分。",
+    "Border radius of the range knob": "レンジツマミのボーダー半径",
+    "Background of the range pin (only available in MD mode)": "レンジピンの背景（MDモード時のみ有効）",
+    "Content is placed to the left of the range slider in LTR, and to the right in RTL.": "コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。",
+    "Content is placed to the right of the range slider in LTR, and to the left in RTL.": "コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。",
+    "Background of the active range bar": "アクティブレンジバーの背景",
+    "Border radius of the range bar": "レンジバーのボーダー半径",
+    "Height of the range bar": "レンジバーの高さ",
+    "An active tick mark.": "アクティブなティックマークです。",
+    "An animated SVG spinner that shows when refreshing begins": "リフレッシュ開始を示すアニメーションSVGスピナー",
+    "A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.": "プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOSデバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。",
+    "The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "Emitted while the user is pulling down the content and exposing the refresher.": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発する。",
+    "If `true`, the refresher will be hidden.": "`true`の場合、リフレッシャーは非表示となる。",
+    "Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+    "Changes the refresher's state from `refreshing` to `cancelling`.": "リフレッシュの状態を `refreshing` から `cancelling` に変更する。",
+    "Emitted when the user begins to start pulling down.": "ユーザーが引き下げを開始するときに発する。",
+    "Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`.": "非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。",
+    "The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。",
+    "The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果である。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+    "A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.": "ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。",
+    "Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.": "ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発せられる。リフレッシャーの状態を `refreshing` に更新する。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
+    "Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが `refreshing` 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。",
+    "How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.": "引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。  例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。  リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+    "Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.": "再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。",
+    "Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.": "再注文操作を完了する。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
+    "If `true`, the reorder will be hidden.": "`true`の場合、リオーダーは非表示になる。",
+    "The icon of the reorder handle (uses ion-icon).": "リオーダーハンドルのアイコンです（ion-iconを使用）。",
+    "Adds the ripple effect to the parent element.": "親要素に波及効果を付加する。",
+    "Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.": "リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。  注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。",
+    "Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.  `ion-router` captures this event in order to update his internal registry of router rules.": "このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。",
+    "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その「from」URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
+    "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.  The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.  Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.  When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the \"from\" value matches.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLである。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトする。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできない。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
+    "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.": "キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。",
+    "Used internally by `ion-router` to know when this route did change.": "このルートがいつ変更されたかを知るために `ion-router` が内部で使用する。",
+    "Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.": "このルートを適用するために一致させる必要がある相対パスです。  expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。",
+    "A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.": "ルートが入力しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
+    "A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.": "ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
+    "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.": "ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。  このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。",
+    "Text color of the router link": "ルーターリンクの文字色",
+    "Background of the router link": "ルーターリンクの背景",
+    "If `true`, the router-outlet should animate the transition of components.": "`true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。",
+    "This property allows to create custom transition using AnimationBuilder functions.": "このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
+    "Emitted when the route had changed": "ルートが変更されたときに発する",
+    "Navigate to the specified path.": "指定されたパスに移動する。",
+    "Event emitted when the route is about to change": "ルートが変更されようとするときに発せられるイベント",
+    "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify an alternate prefix for all URL paths.": "URLのマッチング時に使用するルートパスです。デフォルトでは\"/\"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。",
+    "Go back to previous page in the window.history.": "window.historyで前ページに戻る。",
+    "The router can work in two \"modes\": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.": "ルーターは2つの \"モード \"で動作します。- ハッシュを使用する。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
+    "If `true`, enable searchbar animation.": "`true`の場合、検索バーのアニメーションを有効にする。",
+    "Set the the cancel button text. Only applies to `ios` mode.": "キャンセルボタンのテキストを設定します。ios`モードのみ適用されます。",
+    "Set the input's autocomplete property.": "入力のオートコンプリートプロパティを設定します。",
+    "Emitted when the cancel button is clicked.": "キャンセルボタンがクリックされたときに発せられる。",
+    "Set the input's autocorrect property.": "入力のオートコレクトプロパティを設定します。",
+    "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.": "クリアアイコンを設定する。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
+    "The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.": "検索アイコンとして使用するアイコンです。デフォルトは `ios` モードでは `search-outline` 、`md` モードでは `search-sharp` である。",
+    "If `true`, enable spellcheck on the input.": "`true`の場合、入力のスペルチェックを有効にする。",
+    "the value of the searchbar.": "サーチバーの値。",
+    "Sets the behavior for the cancel button. Defaults to `\"never\"`. Setting to `\"focus\"` shows the cancel button on focus. Setting to `\"never\"` hides the cancel button. Setting to `\"always\"` shows the cancel button regardless of focus state.": "キャンセルボタンに関する動作を設定する。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にする。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示する。",
+    "Set the type of the input.": "入力の種類を設定します。",
+    "Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "入力のプレースホルダーを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.": "キャンセルボタンのアイコンを設定する。md`モードのみに適用されます。デフォルトは `arrow-back-sharp` です。",
+    "Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`.": "指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。",
+    "Sets the behavior for the clear button. Defaults to `\"focus\"`. Setting to `\"focus\"` shows the clear button on focus if the input is not empty. Setting to `\"never\"` hides the clear button. Setting to `\"always\"` shows the clear button regardless of focus state, but only if the input is not empty.": "クリアボタンに関する動作を設定する。デフォルトは `\"focus\"` です。focus\"`に設定すると、入力が空でない場合、フォーカス時にクリアボタンを表示します。never\"`に設定すると、クリアボタンを非表示にします。always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、入力が空でない場合にのみクリアボタンを表示する。",
+    "Color of the searchbar clear button": "サーチバークリアボタンの色",
+    "Border radius of the searchbar input": "サーチバー入力のボーダー半径",
+    "Color of the searchbar cancel button": "サーチバーキャンセルボタンの色",
+    "Background of the searchbar input": "サーチバー入力の背景",
+    "Box shadow of the searchbar input": "サーチバー入力のボックスシャドウ",
+    "Opacity of the searchbar placeholder": "サーチバー・プレースホルダーの不透明度",
+    "Font style of the searchbar placeholder": "サーチバー・プレースホルダーのフォントスタイル",
+    "Color of the searchbar text": "サーチバーテキストの色",
+    "Color of the searchbar placeholder": "検索バーのプレースホルダーの色",
+    "Color of the searchbar icon": "検索バーのアイコンの色",
+    "Font weight of the searchbar placeholder": "サーチバー・プレースホルダーのフォントの太さ",
+    "Emitted when the clear input button is clicked.": "クリア入力ボタンがクリックされたときに発せられる。",
+    "Color of the segment button border": "セグメントボタンのボーダーの色",
+    "Color of the checked segment button": "チェックしたセグメントボタンの色",
+    "Radius of the segment button border": "セグメントボタンのボーダーの半径",
+    "The value of the segment button.": "セグメントボタンの値です。",
+    "Set the layout of the text and icon in the segment.": "セグメント内のテキストとアイコンのレイアウトを設定します。",
+    "Width of the segment button border": "セグメントボタンの枠の幅",
+    "Background of the segment button": "セグメントボタンの背景",
+    "Color of the segment button": "セグメントボタンの色",
+    "Background of the checked segment button": "チェックしたセグメントボタンの背景",
+    "Color of the segment button on hover": "ホバー時のセグメントボタンの色",
+    "Style of the segment button border": "セグメントボタンのボーダーのスタイル",
+    "Color of the segment button when focused with the tab key": "タブキーでフォーカスしたときのセグメントボタンの色",
+    "Opacity of the segment button background on hover": "ホバー時のセグメントボタンの背景の不透明度",
+    "Background of the segment button when focused with the tab key": "タブキーでフォーカスされたときのセグメントボタンの背景",
+    "Background of the segment button on hover": "セグメントボタンがホバーされたときの背景",
+    "Opacity of the segment button background when focused with the tab key": "タブキーでフォーカスしたときのセグメントボタンの背景の不透明度",
+    "If `true`, the user cannot interact with the segment button.": "`true`の場合、ユーザーはセグメントボタンを操作することができません。",
+    "Bottom margin of the segment button": "セグメントボタンの下端マージン",
+    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button": "セグメントボタンの方向が左から右の場合は左マージン、右から左の場合は右マージン",
+    "Top margin of the segment button": "セグメントボタンの上マージン",
+    "Bottom padding of the segment button": "セグメントボタンの下パディング",
+    "Transition of the segment button": "セグメントボタンの遷移",
+    "Top padding of the segment button": "セグメントボタンのトップパディング",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button": "セグメントボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなります。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button": "セグメントボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなります。",
+    "Transform of the indicator for the checked segment button": "チェックされたセグメントボタンのインジケータのトランスフォーム",
+    "Height of the indicator for the checked segment button": "チェックしたセグメントボタンのインジケータの高さ",
+    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button": "セグメントボタンの方向が左から右の場合は右マージン、右から左の場合は左マージン",
+    "Transition of the indicator for the checked segment button": "チェックしたセグメントボタンのインジケーターの遷移",
+    "Color of the indicator for the checked segment button": "チェックしたセグメントボタンのインジケーターの色",
+    "Box shadow on the indicator for the checked segment button": "チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける",
+    "The background element for the indicator displayed on the checked segment button.": "チェックしたセグメントボタンに表示されるインジケータの背景要素です。",
+    "The indicator displayed on the checked segment button.": "チェックしたセグメントボタンに表示されるインジケーターです。",
+    "If `true`, users will be able to swipe between segment buttons to activate them.": "`true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。",
+    "If `true`, the user cannot interact with the segment.": "`true`の場合、ユーザーはセグメントと対話することができません。",
+    "the value of the segment.": "セグメントの価値",
+    "Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.": "valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行される。",
+    "If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.": "`true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。",
+    "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.": "`true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。",
+    "The text value of the option.": "オプションのテキスト値です。",
+    "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.": "`true`の場合、ユーザは選択オプションと対話することができない。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからである。",
+    "the value of the select.": "セレクトの値です。",
+    "The text to display on the ok button.": "okボタンに表示するテキストです。",
+    "Bottom padding of the select": "セレクトの下パディング",
+    "The text to display when the select is empty.": "セレクトが空のときに表示するテキストです。",
+    "The text to display instead of the selected option's value.": "選択されたオプションの値の代わりに表示するテキストです。",
+    "Emitted when the select loses focus.": "セレクトのフォーカスが外れたときに発せられる。",
+    "The interface the select should use: `action-sheet`, `popover` or `alert`.": "selectが使用するインターフェース。action-sheet`, `popover` または `alert`.",
+    "Emitted when the selection is cancelled.": "選択がキャンセルされたときに発する。",
+    "The text to display on the cancel button.": "キャンセルボタンに表示するテキストです。",
+    "Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.": "セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。",
+    "Emitted when the overlay is dismissed.": "オーバーレイが解除されたときに発せられる。",
+    "Emitted when the select has focus.": "セレクトにフォーカスが当たったときに発する。",
+    "Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.": "alert`、`action-sheet`、`popover` インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意: `interfaceOptions` は `alert` インターフェースで `inputs` や `buttons` をオーバーライドしません。",
+    "If `true`, the user cannot interact with the select.": "`true`の場合、ユーザはセレクトと対話することができない。",
+    "If `true`, the select can accept multiple values.": "`true`の場合、selectは複数の値を受け入れることができる。",
+    "A property name or function used to compare object values": "オブジェクトの値を比較するために使用されるプロパティ名または関数。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select": "セレクトの方向が左から右の場合は右パディング、右から左の場合は左パディングを行う",
+    "The select icon container.": "セレクトアイコンのコンテナです。",
+    "The text displayed in the select when there is no value.": "値がないときにセレクトに表示されるテキスト。",
+    "Top padding of the select": "セレクトのトップパディング",
+    "Opacity of the select placeholder text": "選択プレースホルダーテキストの不透明度",
+    "Color of the select placeholder text": "セレクトプレースホルダーテキストの色",
+    "The displayed value of the select.": "セレクトの表示値です。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select": "セレクトの方向が左から右の場合は左パディング、右から左の場合は右パディング",
+    "If `true`, the skeleton text will animate.": "`true`の場合、スケルトンテキストをアニメーションさせる。",
+    "Background of the skeleton text": "スケルトンテキストの背景",
+    "Border radius of the skeleton text": "スケルトンテキストのボーダー半径",
+    "Background of the skeleton text in rgb format": "スケルトンテキストの背景（rgb形式",
+    "Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options": "swiperインスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。",
+    "Get whether or not the current slide is the first slide.": "現在のスライドが最初のスライドであるか否かを取得する。",
+    "If `true`, show the scrollbar.": "`true`の場合、スクロールバーを表示する。",
+    "Get the index of the previous slide.": "前のスライドのインデックスを取得します。",
+    "Start auto play.": "オートプレイを開始する。",
+    "Transition to the specified slide.": "指定されたスライドに遷移する。",
+    "If `true`, show the pagination.": "もし `true` ならば、ページネーションを表示する。",
+    "Transition to the previous slide.": "前のスライドに遷移します。",
+    "Update the underlying slider implementation. Call this if you've added or removed child slides.": "基礎となるスライダーの実装を更新します。子スライダーを追加または削除した場合に呼び出します。",
+    "Lock or unlock the ability to slide to the previous slide.": "前のスライドにスライドする機能をロックまたはアンロックします。",
+    "Get whether or not the current slide is the last slide.": "現在のスライドが最後のスライドであるか否かを取得する。",
+    "Lock or unlock the ability to slide to the next slide.": "次のスライドにスライドする機能をロックまたはアンロックする。",
+    "Lock or unlock the ability to slide to the next or previous slide.": "次のスライドや前のスライドにスライドする機能をロックまたはアンロックします。",
+    "Get the index of the active slide.": "アクティブなスライドのインデックスを取得します。",
+    "Get the total number of slides.": "スライドの総枚数を取得する。",
+    "Get the Swiper instance. Use this to access the full Swiper API. See https://swiperjs.com/swiper-api for all API options.": "Swiperのインスタンスを取得します。これを使用して、SwiperのフルAPIにアクセスします。すべてのAPIオプションについては、https://swiperjs.com/swiper-api を参照してください。",
+    "Stop auto play.": "自動再生を停止する。",
+    "Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.": "speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeightが有効な場合）。",
+    "Transition to the next slide.": "次のスライドに遷移します。",
+    "Emitted when the user first touches the slider.": "ユーザーがスライダーに初めて触れたときに発せられる。",
+    "Background of the active pagination bullet": "アクティブなページネーションバレットの背景",
+    "Background of the active pagination progress-bar": "アクティブなページネーションの進行バーの背景",
+    "Background of the pagination bullets": "ページネーションの箇条書きの背景",
+    "Background of the pagination progress-bar": "ページネーションの進行バーの背景",
+    "Emitted when the slide transition has ended.": "スライド遷移が終了したときに発せられる。",
+    "Emitted after Swiper initialization": "Swiperの初期化後に発せられる",
+    "Emitted when the slider is at its initial position.": "スライダーが初期位置にあるときに発せられる。",
+    "Emitted when the user releases the touch.": "ユーザーがタッチを離したときに発せられる。",
+    "Emitted before the active slide has changed.": "アクティブスライドが変更される前に発せられる。",
+    "Emitted when the user taps/clicks on the slide's container.": "ユーザがスライドのコンテナをタップ/クリックしたときに発せられる。",
+    "Emitted when the slide transition has started.": "スライド遷移が開始されたときに発せられる。",
+    "Emitted when the next slide has ended.": "次のスライドが終了したときに発せられる。",
+    "Emitted when the next slide has started.": "次のスライドが開始されたときに発せられる。",
+    "Emitted when the slider is actively being moved.": "スライダーがアクティブに移動しているときに発せられる。",
+    "Emitted when the user double taps on the slide's container.": "ユーザがスライドのコンテナをダブルタップしたときに発生する。",
+    "Emitted when the previous slide has started.": "前のスライドが開始されたときに発せられる。",
+    "Emitted after the active slide has changed.": "アクティブスライドが変更された後に発せられる。",
+    "Emitted when the previous slide has ended.": "前のスライドが終了したときに発せられる。",
+    "Background of the pagination scroll-bar": "ページネーション用スクロールバーの背景",
+    "Emitted when the slider is at the last slide.": "スライダーが最後のスライドになったときに発せられる。",
+    "Background of the active pagination scroll-bar": "アクティブなページネーションのスクロールバーの背景",
+    "The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.": "使用するSVGスピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。",
+    "Duration of the spinner animation in milliseconds. The default varies based on the spinner.": "スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。",
+    "Color of the spinner": "スピナーの色",
+    "If `true`, the spinner's animation will be paused.": "`true`の場合、スピナーのアニメーションは一時停止されます。",
+    "Expression to be called when the split-pane visibility has changed": "分割画面の表示が変わったときに呼び出される式",
+    "Border between panes": "ペイン間のボーダー",
+    "Minimum width of the side pane. Does not apply when split pane is collapsed.": "サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。",
+    "If `true`, the split pane will be hidden.": "`true`の場合、分割ペインが非表示になります。",
+    "Maximum width of the side pane. Does not apply when split pane is collapsed.": "サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。",
+    "Width of the side pane. Does not apply when split pane is collapsed.": "サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。",
+    "When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.": "分割パネルを表示するタイミング。CSSメディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。",
+    "The selected tab component": "選択されたタブコンポーネント",
+    "Border of the tab bar": "タブバーの境界線",
+    "Color of the tab bar": "タブバーの色",
+    "Background of the tab bar": "タブバーの背景",
+    "If `true`, the tab bar will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、タブバーを半透明にする。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Color of the selected tab button": "選択されたタブボタンの色",
+    "Color of the tab button": "タブボタンの色",
+    "Bottom padding of the tab button": "タブボタンの下パディング",
+    "If `true`, the user cannot interact with the tab button.": "`true`の場合、ユーザはタブボタンを操作することができない。",
+    "Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.": "タブバーのテキストとアイコンのレイアウトを設定する。デフォルトは `'icon-top'` です。",
+    "Top padding of the tab button": "タブボタンのトップパディング",
+    "Background of the tab button": "タブボタンの背景",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Opacity of the tab button background when focused with the tab key": "タブキーでフォーカスしたときのタブボタンの背景の不透明度",
+    "A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.": "各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
+    "Color of the tab button when focused with the tab key": "タブキーでフォーカスしたときのタブボタンの色",
+    "Background of the tab button when focused with the tab key": "タブキーでフォーカスされたときのタブボタンの背景",
+    "The native HTML anchor element that wraps all child elements.": "すべての子要素を包むネイティブHTMLのアンカー要素です。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "The component to display inside of the tab.": "タブの内側に表示するコンポーネントです。",
+    "Set the active component for the tab": "タブのアクティブコンポーネントを設定する",
+    "Get the currently selected tab.": "現在選択されているタブを取得します。",
+    "Content is placed at the bottom of the screen.": "コンテンツは画面下部に配置されます。",
+    "Select a tab by the value of its `tab` property or an element reference.": "タブの `tab` プロパティの値、または要素の参照によってタブを選択する。",
+    "Content is placed at the top of the screen.": "コンテンツは画面上部に配置されます。",
+    "Emitted when the navigation has finished transitioning to a new component.": "ナビゲーションが新しいコンポーネントに遷移し終わったときに発せられる。",
+    "Get a specific tab by the value of its `tab` property or an element reference.": "タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得する。",
+    "Emitted when the navigation is about to transition to a new component.": "ナビゲーションが新しいコンポーネントに移行しようとするときに発せられる。",
+    "Bottom padding of the textarea": "テキストエリアの底面パディング",
+    "Color of the text": "本文の色",
+    "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.": "テキストコントロールの可視幅を、平均文字幅で指定する。指定する場合は、正の整数である必要があります。",
+    "Background of the textarea": "textareaの背景",
+    "Border radius of the textarea": "テキストエリアの境界半径",
+    "Emitted when the input value has changed.": "入力値が変化したときに発せられる。",
+    "Indicates how the control wraps text.": "コントロールがテキストをどのように折り返すかを示す。",
+    "If `true`, the user cannot interact with the textarea.": "`true`の場合、ユーザはテキストエリアと対話することができない。",
+    "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.": "ion-textarea` のネイティブ `textarea` にフォーカスを設定する。グローバルな `textarea.focus()` の代わりに、このメソッドを使用する。",
+    "Returns the native `<textarea>` element used under the hood.": "フードの下で使用されるネイティブの `<textarea>` 要素を返します。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea": "テキストエリアの方向が左から右の場合は右パディング、右から左の場合は左パディングを使用します。",
+    "If `true`, the textarea container will grow and shrink based on the contents of the textarea.": "`true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小する。",
+    "The number of visible text lines for the control.": "コントロールの可視テキスト行数。",
+    "The value of the textarea.": "textareaの値です。",
+    "Instructional text that shows before the input has a value.": "入力が値を持つ前に表示される指示文。",
+    "Color of the placeholder text": "プレースホルダーテキストの色",
+    "Style of the placeholder text": "プレースホルダーテキストのスタイル",
+    "Opacity of the placeholder text": "プレースホルダーテキストの不透明度",
+    "Weight of the placeholder text": "プレースホルダーテキストの重さ",
+    "Top padding of the textarea": "textareaのトップパディング",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea": "textareaの方向が左から右の場合は左パディング、右から左の場合は右パディング。",
+    "Size of the thumbnail": "サムネイルの大きさ",
+    "Border radius of the thumbnail": "サムネイルのボーダー半径",
+    "The size of the toolbar title.": "ツールバーのタイトルの大きさを指定します。",
+    "Text color of the title": "タイトルの文字色",
+    "An array of buttons for the toast.": "トースト用のボタンがずらり。",
+    "The position of the toast on the screen.": "画面上のトーストの位置です。",
+    "Message to be shown in the toast.": "乾杯の際に表示するメッセージ",
+    "Animation to use when the toast is presented.": "乾杯の音頭をとるときに使うアニメーションです。",
+    "Animation to use when the toast is dismissed.": "トーストの解散時に使用するアニメーションです。",
+    "Header to be shown in the toast.": "トーストに表示されるヘッダー。",
+    "If `true`, the toast will animate.": "`true`の場合、トーストはアニメーションします。",
+    "Returns a promise that resolves when the toast did dismiss.": "トーストが解散したことを解決するプロミスを返します。",
+    "Returns a promise that resolves when the toast will dismiss.": "トーストが解散するタイミングを解決するプロミスを返します。",
+    "Additional attributes to pass to the toast.": "トーストに渡す追加の属性。",
+    "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons": "表示するアイコンの名前、または有効なSVGファイルへのパスを指定する。ion-icon`を参照。https://ionic.io/ionicons",
+    "Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.": "トーストのメッセージやボタンの配置を定義します。'baseline'を指定します。メッセージとボタンは同じ行に表示されます。メッセージテキストはメッセージコンテナ内で折り返すことができます。'stacked':ボタンコンテナとメッセージが重なるように表示されます。ボタンに長いテキストがある場合に使用します。",
+    "How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.": "トーストを隠すまでに何ミリ秒待つかを指定します。デフォルトでは、`dismiss()`が呼ばれるまで表示されます。",
+    "If `true`, the toast will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、トーストは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Dismiss the toast overlay after it has been presented.": "トーストのオーバーレイが提示された後、それを解除する。",
+    "Maximum width of the toast": "トーストの最大幅",
+    "Color of the button text": "ボタンテキストの色",
+    "Any button element that is displayed inside of the toast.": "トーストの内側に表示される任意のボタン要素。",
+    "Maximum height of the toast": "トーストの最大高さ",
+    "Width of the toast": "トーストの幅",
+    "Color of the toast text": "トーストの文字色",
+    "Position from the left if direction is left-to-right, and from the right if direction is right-to-left": "方向が左から右の場合は左から、方向が右から左の場合は右から位置すること",
+    "Height of the toast": "トーストの高さ",
+    "Minimum width of the toast": "トーストの最小幅",
+    "The element that wraps all child elements.": "すべての子要素を包む要素。",
+    "White space of the toast message": "乾杯メッセージのホワイトスペース",
+    "Minimum height of the toast": "トーストの最低高さ",
+    "Box shadow of the toast": "乾杯の箱影",
+    "Position from the right if direction is left-to-right, and from the left if direction is right-to-left": "方向が左から右の場合は右から、方向が右から左の場合は左から位置すること",
+    "Border color of the toast": "トーストのボーダーカラー",
+    "Border width of the toast": "トーストのボーダー幅",
+    "Background of the toast": "乾杯の背景",
+    "Border style of the toast": "トーストのボーダースタイル",
+    "Emitted before the toast has presented.": "トーストが提示される前に発せられる。",
+    "Emitted after the toast has dismissed.": "トーストが解散した後に発せられる。",
+    "The body text of the toast.": "乾杯の音頭の本文です。",
+    "Present the toast overlay after it has been created.": "トーストのオーバーレイを作成した後に提示する。",
+    "Border radius of the toast": "トーストのボーダー半径",
+    "The icon that appears next to the toast content.": "トーストの内容の横に表示されるアイコンです。",
+    "The header text of the toast.": "乾杯のヘッダーテキストです。",
+    "Emitted before the toast has dismissed.": "乾杯が解散する前に発する。",
+    "Emitted after the toast has presented.": "トーストが提示された後に発する。",
+    "Background of the toggle when checked": "チェックしたときのトグルの背景",
+    "Horizontal spacing around the toggle handle": "トグルハンドル周辺の横方向の間隔",
+    "Border radius of the toggle handle": "トグルハンドルのボーダー半径",
+    "Width of the toggle handle": "トグルハンドルの幅",
+    "Height of the toggle handle": "トグルハンドルの高さ",
+    "Background of the toggle handle": "トグルハンドルの背景",
+    "Maximum height of the toggle handle": "トグルハンドルの最大高さ",
+    "Transition of the toggle handle": "トグルハンドルの変遷",
+    "Emitted when the toggle has focus.": "トグルにフォーカスが当たったときに発せられる。",
+    "Enables the on/off accessibility switch labels within the toggle.": "トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。",
+    "Background of the toggle": "トグルの背景",
+    "If `true`, the user cannot interact with the toggle.": "`true`の場合、ユーザーはトグルを操作することができない。",
+    "Box shadow of the toggle handle": "トグルハンドルのボックスシャドウ",
+    "Border radius of the toggle track": "トグルトラックのボーダー半径",
+    "Background of the toggle handle when checked": "チェックしたときのトグルハンドルの背景",
+    "Emitted when the toggle loses focus.": "トグルのフォーカスが外れたときに発せられる。",
+    "If `true`, the toggle is selected.": "`true`の場合、トグルが選択されます。",
+    "The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`, it's only used when the toggle participates in a native `<form>`.": "トグルの値は、チェックされているかどうかを意味するものではありません。  トグルの値は `<input type=\"checkbox\">` の値に類似しており、トグルがネイティブの `<form>` に参加する場合にのみ使用されます。",
+    "The background track of the toggle.": "トグルの背景トラックです。",
+    "The toggle handle, or knob, used to change the checked state.": "チェックした状態を変更するために使用するトグルハンドル（つまみ）です。",
+    "Color of the toolbar border": "ツールバーの枠の色",
+    "Background of the toolbar": "ツールバーの背景",
+    "Minimum height of the toolbar": "ツールバーの最小高さ",
+    "Top padding of the toolbar": "ツールバーの上部パディング",
+    "Width of the toolbar border": "ツールバーの枠の幅",
+    "Opacity of the toolbar background": "ツールバーの背景の不透明度",
+    "Style of the toolbar border": "ツールバーのボーダーのスタイル",
+    "Bottom padding of the toolbar": "ツールバーの下パディング",
+    "Content is placed to the left of the toolbar text in LTR, and to the right in RTL.": "コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar": "ツールバーの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。",
+    "Color of the toolbar text": "ツールバーテキストの色",
+    "Content is placed to the right of the toolbar text in LTR, and to the left in RTL.": "コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar": "ツールバーの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。",
+    "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.": "コンテンツは、`ios`モードではツールバーテキストの右側に、`md`モードでは右端に配置されます。",
+    "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.": "コンテンツは、`ios`モードではツールバーテキストの左側に、`md`モードでは右側に直接配置されます。",
+    "NOTE: only Vanilla JS API.": "注：Vanilla JS APIのみです。",
+    "NOTE: only JSX API for stencil.  Provide a render function for the footer to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供する。JSXのvirtual-domを返す。",
+    "An optional function that maps each item header within their height.": "各項目のヘッダを高さの範囲内でマッピングするオプション関数。",
+    "An optional function that maps each item footer within their height.": "各項目のフッターをその高さ内にマッピングするオプション関数。",
+    "NOTE: only JSX API for stencil.  Provide a render function for the header to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供する。JSXのvirtual-domを返す。",
+    "NOTE: only JSX API for stencil.  Provide a render function for the items to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意する。JSXのvirtual-domを返す。",
+    "This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.  The subset of items to be updated can are specifying by an offset and a length.": "このメソッドは、アイテムのサブセットをダーティとしてマークし、再レンダリングができるようにします。アイテムは、コンテンツまたはそのスタイルが変更されるたびに、ダーティとしてマークされる必要があります。  更新されるアイテムのサブセットは、オフセットと長さで指定することができます。",
+    "Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created.": "セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければならない。",
+    "An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements.  This function allows to skip all DOM reads, which can be Doing so leads to massive performance": "各アイテムをその高さ内にマッピングするオプションの関数です。この関数が提供されると、`ion-virtual-scroll`によって重い最適化と高速パスが取られるようになり、大幅な性能向上が期待できる。  この関数は、DOMの読み込みをすべてスキップすることができ、Doingすることで大幅なパフォーマンスの向上につながります。",
+    "This method marks the tail the items array as dirty, so they can be re-rendered.  It's equivalent to calling:  ```js virtualScroll.checkRange(lastItemLen); ```": "このメソッドは、アイテム配列の末尾をダーティとしてマークし、再レンダリングできるようにします。  これは次のように呼び出すのと同じです： ``js virtualScroll.checkRange(lastItemLen); ```。",
+    "Returns the position of the virtual item at the given index.": "指定されたインデックスの位置にある仮想アイテムの位置を返します。",
+    "It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.": "仮想アイテムの高さがデフォルトよりかなり大きくなる場合は、これを指定することが重要です。 各仮想アイテムテンプレートのセルのおおよその高さ。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られるもので、この近似値はアイテムがレンダリングされる前に初期寸法を計算するのに役立つものであることに注意してください。",
+    "The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible.": "仮想スクロール内のテンプレートを構築するためのデータです。このデータが変更された場合、仮想スクロール全体がリセットされることになります。",
+    "The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.": "各フッターテンプレートのセルのおおよその幅を指定します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
+    "Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created.": "セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければならない。",
+    "The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.": "各ヘッダーテンプレートのセルのおおよその高さを表します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
+    "The platform to add (e.g. `android`, `ios`)": "追加するプラットフォーム（例：`android`、`ios`）。",
+    "The platform to build for (e.g. `android`, `ios`)": "ビルドするプラットフォーム（例：`android`、`ios`）を指定します。",
+    "The platform to copy (e.g. `android`, `ios`)": "コピーするプラットフォーム（例：`android`、`ios`）。",
+    "The platform to open (e.g. `android`, `ios`)": "開くプラットフォーム（例：`android`、`ios`）。",
+    "The platform to run (e.g. `android`, `ios`)": "実行するプラットフォーム（例：`android`、`ios`）。",
+    "The platform to sync (e.g. `android`, `ios`)": "同期するプラットフォーム（例：`android`、`ios`）。",
+    "The platform to update (e.g. `android`, `ios`)": "アップデートするプラットフォーム（例：`android`、`ios`）。",
+    "The property name you wish to get": "取得したいプロパティ名",
+    "The property name you wish to set": "設定したいプロパティ名",
+    "The new value of the given property": "与えられたプロパティの新しい値",
+    "The property name you wish to delete": "削除したいプロパティ名",
+    "The platform to build (e.g. `android`, `ios`)": "ビルドするプラットフォーム（例：`android`、`ios`）。",
+    "The platform to compile (`android`, `ios`)": "コンパイルするプラットフォーム（`android`、`ios`）。",
+    "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms": "プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存する。",
+    "The platform that you would like to add (`android`, `ios`)": "追加したいプラットフォーム（`android`、`ios`）を指定します。",
+    "The name of the plugin (corresponds to `add` and `remove`)": "プラグインの名前 (`add` と `remove` に対応する)",
+    "`add` or `remove` a plugin; `ls` or `save` all project plugins": "プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` する。",
+    "The platform you would like to prepare (e.g. `android`, `ios`)": "用意したいプラットフォーム（例：`android`、`ios`）。",
+    "The platform for which you would like to gather requirements (`android`, `ios`)": "要件を収集したいプラットフォーム（`android`、`ios`）。",
+    "The platform for which you would like to generate resources (`ios`, `android`)": "リソースを生成したいプラットフォーム（`ios`、`android`）を指定します。",
+    "The native platform (e.g. `ios`, `android`)": "ネイティブプラットフォーム（例：`ios`、`android`）。",
+    "The issue identifier": "課題識別子",
+    "The name/path of the feature being generated": "生成されるフィーチャの名前/パス",
+    "The type of feature (e.g. `page`, `component`, `directive`, `service`)": "機能の種類（例：`page`、`component`、`directive`、`service`）を指定します。",
+    "The name of your project (e.g. `myApp`, `\"My App\"`)": "プロジェクト名（例：`myApp`、`\"My App\"`）を指定します。",
+    "The integration to disable (e.g. `capacitor`, `cordova`, `enterprise`)": "無効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
+    "The integration to enable (e.g. `capacitor`, `cordova`, `enterprise`)": "有効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
+    "The Appflow ID of the app to link (e.g. `a1b2c3d4`)": "リンクするアプリのAppflow ID (例: `a1b2c3d4`)",
+    "Your email address (deprecated)": "お客様のEメールアドレス（非推奨）",
+    "Your password (deprecated)": "お客様のパスワード（非推奨）",
+    "The platform to package (`android`, `ios`)": "パッケージングするプラットフォーム（`android`、`ios`）。",
+    "The build type (`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise`)": "ビルドタイプ（`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise` ）。",
+    "The build id of the desired successful package build": "成功したパッケージのビルドを示すビルドID",
+    "The destination to deploy the build artifact to the app store": "ビルドアーティファクトをアプリストアにデプロイするための保存先",
+    "Location of public key file to add to Ionic": "Ionicに追加する公開鍵ファイルの場所",
+    "The ID of the public key to delete": "削除する公開鍵のID",
+    "Destination of private key file": "秘密鍵ファイルの保存先",
+    "Location of private key file to use": "使用する秘密鍵のファイルの場所",
+    "The name of your new project (e.g. `myApp`, `\"My App\"`)": "新しいプロジェクトの名前（例：`myApp`、`\"My App\"`）を指定します。",
+    "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)": "使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）"
+  }
+}
\ No newline at end of file
diff --git a/scripts/data/translated-cli.json b/scripts/data/translated-cli.json
index 3f16ac8ec14..ba5d02b2717 100644
--- a/scripts/data/translated-cli.json
+++ b/scripts/data/translated-cli.json
@@ -116,7 +116,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to add (e.g. `android`, `ios`)",
+          "summary": "The platform to add (e.g. `android`, `ios`)\n\n自動翻訳: 追加するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -144,7 +144,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to build for (e.g. `android`, `ios`)",
+          "summary": "The platform to build for (e.g. `android`, `ios`)\n\n自動翻訳: ビルドするプラットフォーム（例：`android`、`ios`）を指定します。",
           "required": true
         }
       ],
@@ -241,7 +241,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to copy (e.g. `android`, `ios`)",
+          "summary": "The platform to copy (e.g. `android`, `ios`)\n\n自動翻訳: コピーするプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -327,7 +327,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to open (e.g. `android`, `ios`)",
+          "summary": "The platform to open (e.g. `android`, `ios`)\n\n自動翻訳: 開くプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -355,7 +355,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to run (e.g. `android`, `ios`)",
+          "summary": "The platform to run (e.g. `android`, `ios`)\n\n自動翻訳: 実行するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -549,7 +549,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to sync (e.g. `android`, `ios`)",
+          "summary": "The platform to sync (e.g. `android`, `ios`)\n\n自動翻訳: 同期するプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -635,7 +635,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to update (e.g. `android`, `ios`)",
+          "summary": "The platform to update (e.g. `android`, `ios`)\n\n自動翻訳: アップデートするプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -682,7 +682,7 @@
       "inputs": [
         {
           "name": "property",
-          "summary": "The property name you wish to get",
+          "summary": "The property name you wish to get\n\n自動翻訳: 取得したいプロパティ名",
           "required": false
         }
       ],
@@ -745,12 +745,12 @@
       "inputs": [
         {
           "name": "property",
-          "summary": "The property name you wish to set",
+          "summary": "The property name you wish to set\n\n自動翻訳: 設定したいプロパティ名",
           "required": true
         },
         {
           "name": "value",
-          "summary": "The new value of the given property",
+          "summary": "The new value of the given property\n\n自動翻訳: 与えられたプロパティの新しい値",
           "required": true
         }
       ],
@@ -829,7 +829,7 @@
       "inputs": [
         {
           "name": "property",
-          "summary": "The property name you wish to delete",
+          "summary": "The property name you wish to delete\n\n自動翻訳: 削除したいプロパティ名",
           "required": true
         }
       ],
@@ -889,7 +889,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to build (e.g. `android`, `ios`)",
+          "summary": "The platform to build (e.g. `android`, `ios`)\n\n自動翻訳: ビルドするプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -1035,7 +1035,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to compile (`android`, `ios`)",
+          "summary": "The platform to compile (`android`, `ios`)\n\n自動翻訳: コンパイルするプラットフォーム（`android`、`ios`）。",
           "required": true
         }
       ],
@@ -1142,7 +1142,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to run (e.g. `android`, `ios`)",
+          "summary": "The platform to run (e.g. `android`, `ios`)\n\n自動翻訳: 実行するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -1469,12 +1469,12 @@
       "inputs": [
         {
           "name": "action",
-          "summary": "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms",
+          "summary": "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms\n\n自動翻訳: プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存する。",
           "required": false
         },
         {
           "name": "platform",
-          "summary": "The platform that you would like to add (`android`, `ios`)",
+          "summary": "The platform that you would like to add (`android`, `ios`)\n\n自動翻訳: 追加したいプラットフォーム（`android`、`ios`）を指定します。",
           "required": false
         }
       ],
@@ -1515,12 +1515,12 @@
       "inputs": [
         {
           "name": "action",
-          "summary": "`add` or `remove` a plugin; `ls` or `save` all project plugins",
+          "summary": "`add` or `remove` a plugin; `ls` or `save` all project plugins\n\n自動翻訳: プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` する。",
           "required": false
         },
         {
           "name": "plugin",
-          "summary": "The name of the plugin (corresponds to `add` and `remove`)",
+          "summary": "The name of the plugin (corresponds to `add` and `remove`)\n\n自動翻訳: プラグインの名前 (`add` と `remove` に対応する)",
           "required": false
         }
       ],
@@ -1574,7 +1574,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform you would like to prepare (e.g. `android`, `ios`)",
+          "summary": "The platform you would like to prepare (e.g. `android`, `ios`)\n\n自動翻訳: 用意したいプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -1660,7 +1660,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform for which you would like to gather requirements (`android`, `ios`)",
+          "summary": "The platform for which you would like to gather requirements (`android`, `ios`)\n\n自動翻訳: 要件を収集したいプラットフォーム（`android`、`ios`）。",
           "required": false
         }
       ],
@@ -1688,7 +1688,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform for which you would like to generate resources (`ios`, `android`)",
+          "summary": "The platform for which you would like to generate resources (`ios`, `android`)\n\n自動翻訳: リソースを生成したいプラットフォーム（`ios`、`android`）を指定します。",
           "required": false
         }
       ],
@@ -1751,7 +1751,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to run (e.g. `android`, `ios`)",
+          "summary": "The platform to run (e.g. `android`, `ios`)\n\n自動翻訳: 実行するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -2230,7 +2230,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The native platform (e.g. `ios`, `android`)",
+          "summary": "The native platform (e.g. `ios`, `android`)\n\n自動翻訳: ネイティブプラットフォーム（例：`ios`、`android`）。",
           "required": false
         }
       ],
@@ -2363,7 +2363,7 @@
       "inputs": [
         {
           "name": "id",
-          "summary": "The issue identifier",
+          "summary": "The issue identifier\n\n自動翻訳: 課題識別子",
           "required": false
         }
       ],
@@ -2412,7 +2412,7 @@
       "inputs": [
         {
           "name": "id",
-          "summary": "The issue identifier",
+          "summary": "The issue identifier\n\n自動翻訳: 課題識別子",
           "required": false
         }
       ],
@@ -2482,12 +2482,12 @@
       "inputs": [
         {
           "name": "type",
-          "summary": "The type of feature (e.g. `page`, `component`, `directive`, `service`)",
+          "summary": "The type of feature (e.g. `page`, `component`, `directive`, `service`)\n\n自動翻訳: 機能の種類（例：`page`、`component`、`directive`、`service`）を指定します。",
           "required": true
         },
         {
           "name": "name",
-          "summary": "The name/path of the feature being generated",
+          "summary": "The name/path of the feature being generated\n\n自動翻訳: 生成されるフィーチャの名前/パス",
           "required": true
         }
       ],
@@ -2559,7 +2559,7 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The name of your project (e.g. `myApp`, `\"My App\"`)",
+          "summary": "The name of your project (e.g. `myApp`, `\"My App\"`)\n\n自動翻訳: プロジェクト名（例：`myApp`、`\"My App\"`）を指定します。",
           "required": false
         }
       ],
@@ -2646,7 +2646,7 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The integration to disable (e.g. `capacitor`, `cordova`, `enterprise`)",
+          "summary": "The integration to disable (e.g. `capacitor`, `cordova`, `enterprise`)\n\n自動翻訳: 無効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
           "required": true
         }
       ],
@@ -2671,7 +2671,7 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The integration to enable (e.g. `capacitor`, `cordova`, `enterprise`)",
+          "summary": "The integration to enable (e.g. `capacitor`, `cordova`, `enterprise`)\n\n自動翻訳: 有効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
           "required": true
         }
       ],
@@ -2746,7 +2746,7 @@
       "inputs": [
         {
           "name": "id",
-          "summary": "The Appflow ID of the app to link (e.g. `a1b2c3d4`)",
+          "summary": "The Appflow ID of the app to link (e.g. `a1b2c3d4`)\n\n自動翻訳: リンクするアプリのAppflow ID (例: `a1b2c3d4`)",
           "required": false
         }
       ],
@@ -2769,12 +2769,12 @@
       "inputs": [
         {
           "name": "email",
-          "summary": "Your email address (deprecated)",
+          "summary": "Your email address (deprecated)\n\n自動翻訳: お客様のEメールアドレス（非推奨）",
           "required": false
         },
         {
           "name": "password",
-          "summary": "Your password (deprecated)",
+          "summary": "Your password (deprecated)\n\n自動翻訳: お客様のパスワード（非推奨）",
           "required": false
         }
       ],
@@ -2826,12 +2826,12 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to package (`android`, `ios`)",
+          "summary": "The platform to package (`android`, `ios`)\n\n自動翻訳: パッケージングするプラットフォーム（`android`、`ios`）。",
           "required": true
         },
         {
           "name": "type",
-          "summary": "The build type (`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise`)",
+          "summary": "The build type (`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise`)\n\n自動翻訳: ビルドタイプ（`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise` ）。",
           "required": true
         }
       ],
@@ -3004,12 +3004,12 @@
       "inputs": [
         {
           "name": "build-id",
-          "summary": "The build id of the desired successful package build",
+          "summary": "The build id of the desired successful package build\n\n自動翻訳: 成功したパッケージのビルドを示すビルドID",
           "required": true
         },
         {
           "name": "destination",
-          "summary": "The destination to deploy the build artifact to the app store",
+          "summary": "The destination to deploy the build artifact to the app store\n\n自動翻訳: ビルドアーティファクトをアプリストアにデプロイするための保存先",
           "required": true
         }
       ],
@@ -3273,7 +3273,7 @@
       "inputs": [
         {
           "name": "pubkey-path",
-          "summary": "Location of public key file to add to Ionic",
+          "summary": "Location of public key file to add to Ionic\n\n自動翻訳: Ionicに追加する公開鍵ファイルの場所",
           "required": true
         }
       ],
@@ -3309,7 +3309,7 @@
       "inputs": [
         {
           "name": "key-id",
-          "summary": "The ID of the public key to delete",
+          "summary": "The ID of the public key to delete\n\n自動翻訳: 削除する公開鍵のID",
           "required": true
         }
       ],
@@ -3333,7 +3333,7 @@
       "inputs": [
         {
           "name": "key-path",
-          "summary": "Destination of private key file",
+          "summary": "Destination of private key file\n\n自動翻訳: 秘密鍵ファイルの保存先",
           "required": false
         }
       ],
@@ -3445,7 +3445,7 @@
       "inputs": [
         {
           "name": "key-path",
-          "summary": "Location of private key file to use",
+          "summary": "Location of private key file to use\n\n自動翻訳: 使用する秘密鍵のファイルの場所",
           "required": true
         }
       ],
@@ -3601,12 +3601,12 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The name of your new project (e.g. `myApp`, `\"My App\"`)",
+          "summary": "The name of your new project (e.g. `myApp`, `\"My App\"`)\n\n自動翻訳: 新しいプロジェクトの名前（例：`myApp`、`\"My App\"`）を指定します。",
           "required": true
         },
         {
           "name": "template",
-          "summary": "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)",
+          "summary": "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)\n\n自動翻訳: 使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）",
           "required": true
         }
       ],
diff --git a/src/components/page/reference/ReleaseNotes/release-notes.json b/src/components/page/reference/ReleaseNotes/release-notes.json
index 6221be13cb6..231bdaf43ba 100644
--- a/src/components/page/reference/ReleaseNotes/release-notes.json
+++ b/src/components/page/reference/ReleaseNotes/release-notes.json
@@ -1,4 +1,14 @@
 [
+  {
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v6.6.2\">6.6.2</a> (2023-03-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>accordion:</strong> include margins during expand animation (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26390\">#26390</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f80991813ae8873d8ef6038b0aeb763d727f402e\">f809918</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26381\">#26381</a></li>\n<li><strong>IonicSlides:</strong> remove unnecessary autoplay option (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26935\">#26935</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b8f893731471052df198824b7ece47606ffcc500\">b8f8937</a>)</li>\n<li><strong>radio:</strong> checked state is updated when value changes (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26936\">#26936</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/27a5356fa2b72073d565e9d6f527107869faa3ee\">27a5356</a>)</li>\n<li><strong>react/vue:</strong> properly switch ionicon based on the mode when ios/md is set (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26924\">#26924</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae\">1eb9a08</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26207\">#26207</a></li>\n<li><strong>textarea:</strong> inherit tabindex to inner textarea (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26945\">#26945</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2c68d01b898a2f879445b8b64014189afe1255d7\">2c68d01</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26944\">#26944</a></li>\n</ul>\n",
+    "element": "Nickel",
+    "name": "v6.6.2",
+    "published_at": "March 15 2023",
+    "symbol": "Ni",
+    "tag_name": "v6.6.2",
+    "type": "patch",
+    "version": "6.6.2"
+  },
   {
     "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v6.6.1\">6.6.1</a> (2023-03-08)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> keepContentsMounted modal is sized correctly (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26917\">#26917</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572\">8d184c8</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26916\">#26916</a></li>\n<li><strong>button:</strong> show correct activated state for ios (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26900\">#26900</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c\">67815cc</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22468\">#22468</a></li>\n<li><strong>datetime-button:</strong> time-only values are parsed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26852\">#26852</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f54fc188843af52e723e06402e01ef92717e541f\">f54fc18</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26851\">#26851</a></li>\n<li><strong>datetime:</strong> resolve import error in stencil apps (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26909\">#26909</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69\">48c45af</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26908\">#26908</a></li>\n<li><strong>menu, split-pane:</strong> ssr does not fail on null customElements check (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26854\">#26854</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475\">451d220</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24714\">#24714</a></li>\n<li><strong>modal:</strong> avoid chrome memory leak bug (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26911\">#26911</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd\">a3f8e28</a>)</li>\n<li><strong>react:</strong> inline overlays dismiss when parent component unmounts (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26245\">#26245</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8\">c0e1bf9</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25775\">#25775</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/26185\">#26185</a></li>\n</ul>\n",
     "element": "Nickel",
@@ -38,25 +48,5 @@
     "tag_name": "v6.5.6",
     "type": "patch",
     "version": "6.5.6"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.4...v6.5.5\">6.5.5</a> (2023-02-20)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> days of week and spacing buttons are not announced by screen readers (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26813\">#26813</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1a346b62068076d0b0cc6b2dea4136e0f06576b8\">1a346b6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26811\">#26811</a></li>\n<li><strong>hide-caret:</strong> blur listener correctly removed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26808\">#26808</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fef634f7f055f1672af50b56610f84c76e626814\">fef634f</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26807\">#26807</a></li>\n<li><strong>input:</strong> compositionend event is removed on unmount (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26806\">#26806</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/caa8719cea2f4b3b460551224a8c4a69bd29afeb\">caa8719</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26805\">#26805</a></li>\n<li><strong>sanitizer:</strong> improve reliability of sanitizer (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26820\">#26820</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5e41391ed2585072095f42f7a6d40497f0e129d2\">5e41391</a>)</li>\n<li><strong>swipe-back:</strong> gesture rtl setting is reactive (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26795\">#26795</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3a64de49dbf470d470cb4516df2a5226ba751051\">3a64de4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26794\">#26794</a></li>\n</ul>\n",
-    "element": "Cobalt",
-    "name": "v6.5.5",
-    "published_at": "February 20 2023",
-    "symbol": "Co",
-    "tag_name": "v6.5.5",
-    "type": "patch",
-    "version": "6.5.5"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.3...v6.5.4\">6.5.4</a> (2023-02-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>content:</strong> fullscreen works when rotating device (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26782\">#26782</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7b879fec3d30b61c00faad035698ff643afaa78e\">7b879fe</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26743\">#26743</a></li>\n<li><strong>deps:</strong> update ionicons usage to v6.1.2 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26752\">#26752</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c07933cb69b0c31d3e44263769a7a26ee81223f8\">c07933c</a>)</li>\n<li><strong>deps:</strong> update ionicons usage to v6.1.3 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26772\">#26772</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1c719833292d4cfbdecadf9838d8c783785222ad\">1c71983</a>)</li>\n<li><strong>tap-click:</strong> instant activate does not use a setTimeout (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26748\">#26748</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/21c0806bbd1417b1e6239bc56272e18b3ff38f2e\">21c0806</a>)</li>\n</ul>\n",
-    "element": "Cobalt",
-    "name": "v6.5.4",
-    "published_at": "February 15 2023",
-    "symbol": "Co",
-    "tag_name": "v6.5.4",
-    "type": "patch",
-    "version": "6.5.4"
   }
 ]

From 1a2656191f28f4c74fba2dc86c6e7bf7129806a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 14:26:31 +0900
Subject: [PATCH 249/469] feat(translate): h2 is translated

---
 docs/api/action-sheet.md    |  8 ++++----
 docs/api/alert.md           |  2 +-
 docs/api/avatar.md          |  6 +++---
 docs/api/back-button.md     |  2 +-
 docs/api/backdrop.md        |  2 +-
 docs/api/badge.md           |  4 ++--
 docs/api/breadcrumbs.md     |  4 ++--
 docs/api/button.md          |  6 +++---
 docs/api/buttons.md         |  2 +-
 docs/api/card.md            |  6 +++---
 docs/api/checkbox.md        |  8 ++++----
 docs/api/chip.md            |  6 +++---
 docs/api/content.md         |  8 ++++----
 docs/api/datetime-button.md |  6 +++---
 docs/api/datetime.md        |  2 +-
 docs/api/fab.md             |  8 ++++----
 docs/api/footer.md          |  2 +-
 docs/api/grid.md            |  2 +-
 docs/api/header.md          |  2 +-
 docs/api/icon.md            |  4 ++--
 docs/api/img.md             |  2 +-
 docs/api/infinite-scroll.md |  4 ++--
 docs/api/input.md           |  8 ++++----
 docs/api/item-divider.md    |  6 +++---
 docs/api/item-group.md      |  4 ++--
 docs/api/item-sliding.md    |  4 ++--
 docs/api/item.md            |  6 +++---
 docs/api/label.md           |  4 ++--
 docs/api/list-header.md     |  6 +++---
 docs/api/list.md            |  2 +-
 docs/api/loading.md         |  2 +-
 docs/api/menu.md            |  4 ++--
 docs/api/modal.md           |  2 +-
 docs/api/note.md            |  6 +++---
 docs/api/picker.md          |  2 +-
 docs/api/progress-bar.md    |  4 ++--
 docs/api/radio-group.md     |  2 +-
 docs/api/radio.md           |  6 +++---
 docs/api/range.md           |  8 ++++----
 docs/api/refresher.md       |  4 ++--
 docs/api/reorder-group.md   |  2 +-
 docs/api/reorder.md         |  2 +-
 docs/api/ripple-effect.md   |  2 +-
 docs/api/router.md          |  2 +-
 docs/api/searchbar.md       |  8 ++++----
 docs/api/segment-button.md  |  6 +++---
 docs/api/segment.md         | 10 +++++-----
 docs/api/select-option.md   |  2 +-
 docs/api/select.md          |  2 +-
 docs/api/skeleton-text.md   |  6 +++---
 docs/api/spinner.md         |  6 +++---
 docs/api/split-pane.md      |  6 +++---
 docs/api/tabs.md            |  2 +-
 docs/api/text.md            |  4 ++--
 docs/api/textarea.md        |  6 +++---
 docs/api/thumbnail.md       |  6 +++---
 docs/api/title.md           |  4 ++--
 docs/api/toast.md           |  4 ++--
 docs/api/toggle.md          |  8 ++++----
 docs/api/toolbar.md         |  8 ++++----
 60 files changed, 136 insertions(+), 136 deletions(-)

diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index f2e5f9fd5c2..a912b32fbd4 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -60,7 +60,7 @@ import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/in
 
 <RoleInfo />
 
-## Theming
+## テーマ
 
 Action Sheetはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
 
@@ -84,7 +84,7 @@ import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md
 
 <Styling />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 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.
 
@@ -92,7 +92,7 @@ import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-
 
 <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.
 
@@ -134,7 +134,7 @@ interface ActionSheetOptions {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 4366456b99f..78413468b8b 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -109,7 +109,7 @@ import Customization from '@site/static/usage/v7/alert/customization/index.md';
 IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。
 :::
 
-## 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.
 
diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index 076b2f1105c..0e588e0aedb 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -22,7 +22,7 @@ Avatarは通常、写真やアイコンをラップする円形のコンポー
 
 Avatarは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-chip` または `ion-item` の内部に配置すると、Avatarは親コンポーネントに合わせてサイズ変更します。Avatarをitemの左側または右側に配置するには、`slot` を `start` か `end` に設定します。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/avatar/basic/index.md';
 
@@ -40,9 +40,9 @@ import Item from '@site/static/usage/v7/avatar/item/index.md';
 
 <Item />
 
-## Theming
+## テーマ
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md';
 
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 853b77f39bc..221e56afc6b 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized.
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/back-button/basic/index.md';
 
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index 5d6b871a68c..62c531ee1fc 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -14,7 +14,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
 
-## Basic Usage
+## 基本的な使い方
 
 The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
 
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 70c11a4426c..7af4b4eb00f 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -19,13 +19,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Badgeは、通常は別の要素の近くに表示されるinline-block要素です。通常は、数字またはその他の文字とともに利用します。これらは、要素に関連付けられた未読のアイテムがあることの通知として使用でき、アイテムの数を示します。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/badge/basic/index.md';
 
 <Basic />
 
-## Theming
+## テーマ
 
 ### Colors
 
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index d1358886673..8228d7d733a 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -70,7 +70,7 @@ import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/p
 
 <PopoverOnClick />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -78,7 +78,7 @@ import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md';
 
diff --git a/docs/api/button.md b/docs/api/button.md
index 9e170395dfe..0c41cbd001d 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/button/basic/index.md';
 
@@ -64,7 +64,7 @@ import Icons from '@site/static/usage/v7/button/icons/index.md';
 
 <Icons />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -72,7 +72,7 @@ import Colors from '@site/static/usage/v7/button/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md';
 
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index d91d45a8931..832ee083346 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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/v7/buttons/basic/index.md';
 
diff --git a/docs/api/card.md b/docs/api/card.md
index 99047634db9..a8ee0f67420 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -25,7 +25,7 @@ and content. Cards are broken up into several components to accommodate this str
 and [card content](./card-content).
 
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/card/basic/index.md';
 
@@ -53,7 +53,7 @@ import List from '@site/static/usage/v7/card/list/index.md';
 <List />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -61,7 +61,7 @@ import Colors from '@site/static/usage/v7/card/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md';
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index cc140197ba4..e0fffcca61d 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
 
@@ -54,9 +54,9 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md
 
 <Indeterminate />
 
-## Theming
+## テーマ
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md';
 
@@ -108,7 +108,7 @@ In past versions of Ionic, `ion-item` was required for `ion-checkbox` to functio
 Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-checkbox` to `true` to force that instance of the checkbox to use the legacy syntax.
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/chip.md b/docs/api/chip.md
index 29aa68c5aa0..590cf0ca287 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Chipは連絡先などを複数の小さなエンティティで表示します。 Chipにはavatars, text, や iconsなど、いくつかの異なる要素を含めることができます。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/chip/basic/index.md';
 
@@ -31,7 +31,7 @@ import SlotExample from '@site/static/usage/v7/chip/slots/index.md';
 
 <SlotExample />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -39,7 +39,7 @@ import Colors from '@site/static/usage/v7/chip/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md';
 
diff --git a/docs/api/content.md b/docs/api/content.md
index 7f52d9bef9c..b9bae3404fd 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -25,7 +25,7 @@ Contentコンポーネントは、スクロール可能領域を制御するい
 Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
 
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/content/basic/index.md';
 
@@ -75,7 +75,7 @@ import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
 <ScrollEvents />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -89,7 +89,7 @@ import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/ind
 
 <CSSParts />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.md';
 
@@ -292,7 +292,7 @@ export default defineComponent({
 
 </Tabs>
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index 82ac48f1baf..c1c7521b734 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -48,15 +48,15 @@ TODO
 
 TODO
 
-### Theming
+### テーマ
 
 TODO
 -->
 
-## Properties
+## プロパティ
 <Props />
 
-## Events
+## イベント
 <Events />
 
 ## Methods
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index c0c324c5f81..e3f5fd4ef12 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -310,7 +310,7 @@ A callback is better when the highlighted dates are recurring, such as birthdays
 
 <HighlightedDatesCallback />
 
-## Theming
+## テーマ
 
 Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 449cd5c63e7..97041cb8919 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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/v7/fab/basic/index.md';
 
@@ -49,7 +49,7 @@ import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md';
 
 <ButtonSizing />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -57,7 +57,7 @@ import Colors from '@site/static/usage/v7/fab/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.md';
 
@@ -70,7 +70,7 @@ import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/i
 <CSSShadowParts />
  
 
-## Accessibility
+## アクセシビリティ
 
 ### Labels
 
diff --git a/docs/api/footer.md b/docs/api/footer.md
index 167a1dd4029..085b5659211 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上の [ツールバー](./toolbar) のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/footer/basic/index.md';
 
diff --git a/docs/api/grid.md b/docs/api/grid.md
index f46887b4597..5a69a35f450 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -50,7 +50,7 @@ The default breakpoints for the grid and the corresponding properties are define
 | 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.
 
diff --git a/docs/api/header.md b/docs/api/header.md
index 68a7711543c..b9ddc5aae2d 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -19,7 +19,7 @@ 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/v7/header/basic/index.md';
 
diff --git a/docs/api/icon.md b/docs/api/icon.md
index fa9830ebc46..2119d43ee71 100644
--- a/docs/api/icon.md
+++ b/docs/api/icon.md
@@ -14,14 +14,14 @@ Icon is a simple component made available through the <a href="https://ionic.io/
 
 For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a>.
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/icon/basic/index.md';
 
 <Basic />
 
 
-## Accessibility
+## アクセシビリティ
 
 Icons that are purely decorative content should have <code>aria-hidden="true"</code>. This will not visually hide the icon, but it will hide the element from assistive technology.
 
diff --git a/docs/api/img.md b/docs/api/img.md
index ce9c7f845f2..bdd1b71a2fe 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Img は、タグがビューポートに表示されているときに画像をLazy Loadするタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) を内部的に使用します。Intersection Observerは、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は `setTimeout` で処理されます。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/img/basic/index.md';
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 2c4f72abc66..16fa42922d4 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -56,7 +56,7 @@ Infinite scroll requires a scroll container to function. When using a virtual sc
 </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.
 
@@ -96,7 +96,7 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/input.md b/docs/api/input.md
index c52af89436e..372c4143aea 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 inputコンポーネントは、カスタム・スタイル設定と追加機能を持つHTMLのInput要素のラッパーです。HTML Inputとほとんど同じプロパティーを受け入れますが、デスクトップ・デバイスでは優れた動作をし、モバイル・デバイスではキーボードと統合されます。
 
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/input/basic/index.md';
 
@@ -92,7 +92,7 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 <FilteringData />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -102,7 +102,7 @@ import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 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.
 
@@ -154,7 +154,7 @@ interface InputCustomEvent extends CustomEvent {
 ```
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 47b104f1fcd..e4bf859f470 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -21,14 +21,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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/v7/item-divider/basic/index.md';
 
 <Basic />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -37,7 +37,7 @@ import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.md';
 <Colors />
 
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.md';
 
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index ed0746622f5..e9f2a67862f 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -18,7 +18,7 @@ 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/v7/item-group/basic/index.md';
 
@@ -31,7 +31,7 @@ import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.m
 <SlidingItems />
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 5760ed03175..508cf5a79fe 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -19,7 +19,7 @@ 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
+## 基本的な使い方
 
 スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。
 
@@ -58,7 +58,7 @@ interface ItemSlidingCustomEvent extends CustomEvent {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/item.md b/docs/api/item.md
index 04a1089c836..9a5be8aa390 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 アイテムは、テキスト、アイコン、アバター、画像、入力、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒に[list](./list)に配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。
 
-## Basic Usage
+## 基本的な使い方
 
 アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では `.ion-text-wrap` を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照してください。
 
@@ -101,7 +101,7 @@ import Inputs from '@site/static/usage/v7/item/inputs/index.md';
 
 <Inputs />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -115,7 +115,7 @@ import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.
 
 <CSSParts />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md';
 
diff --git a/docs/api/label.md b/docs/api/label.md
index ac4af6b8e89..dc3c8f82244 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 Labelは `ion-item`、`ion-input`、`ion-toggle` 等と共に使用できるラッパー(wrapper)要素です。item内のlabelの位置はinline、fixed、stacked、またはfloatingにすることができます。
 
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/label/basic/index.md';
 
@@ -38,7 +38,7 @@ import Input from '@site/static/usage/v7/label/input/index.md';
 
 <Input />
 
-## Theming
+## テーマ
 
 ### Colors
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index ccd862dd0d2..4b4112547e7 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -15,7 +15,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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/v7/list-header/basic/index.md';
 
@@ -39,7 +39,7 @@ import Lines from '@site/static/usage/v7/list-header/lines/index.md';
 
 <Lines />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -47,7 +47,7 @@ import Colors from '@site/static/usage/v7/list-header/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.md';
 
diff --git a/docs/api/list.md b/docs/api/list.md
index 45bda1929f9..727b3c17285 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -21,7 +21,7 @@ icons, thumbnails, and much more. Lists generally contain items with similar dat
 
 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/v7/list/basic/index.md';
 
diff --git a/docs/api/loading.md b/docs/api/loading.md
index 8fe3ea7c63c..8d05ebac381 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -62,7 +62,7 @@ import Theming from '@site/static/usage/v7/loading/theming/index.md';
  `ion-loading` is presented at the root of your application, so we recommend placing any `ion-loading` styles in a global stylesheet.
 :::
 
-## Accessibility
+## アクセシビリティ
   
 Ionic automatically sets Loading's `role` to [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role).
 
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 0fa7bde7606..f7d7b8cedc7 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -25,7 +25,7 @@ menu要素は、root content要素と同じ深度である必要があります
 コンテンツにつけるMenuの数に制限はありません。
 これらはテンプレートから、またはプログラムでMenuControllerを使用して制御できます。
 
-## Basic Usage
+## 基本的な使い方
 
 import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
 
@@ -47,7 +47,7 @@ import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
 <MenuType />
 
-## Theming
+## テーマ
 
 ### CSS Shadow Parts
 
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 5df59174d64..d344d8c1b57 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -211,7 +211,7 @@ interface ModalCustomEvent extends CustomEvent {
 }
 ```
 
-## Accessibility
+## アクセシビリティ
 
 ### Keyboard Navigation
 
diff --git a/docs/api/note.md b/docs/api/note.md
index 63ce27b5c40..033c1e6818e 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Noteは、一般的に詳細情報を提供するサブタイトルとして使用されるテキスト要素です。デフォルトではグレーで表示されるように設計されています。Noteは、メタデータテキストとしてアイテム内で使用することができます。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/note/basic/index.md';
 
@@ -31,7 +31,7 @@ import Item from '@site/static/usage/v7/note/item/index.md';
 
 <Item />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -39,7 +39,7 @@ import Colors from '@site/static/usage/v7/note/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.md';
 
diff --git a/docs/api/picker.md b/docs/api/picker.md
index 190c83133b9..da2fc22751a 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -123,7 +123,7 @@ interface PickerOptions {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 5ded29ad47f..c1cce073098 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -54,7 +54,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 <Toolbar />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -63,7 +63,7 @@ import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.md';
 <Colors />
 
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.md';
 
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index 9049331bd7d..29c6448ffba 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -41,7 +41,7 @@ interface RadioGroupCustomEvent<T = any> extends CustomEvent {
 ```
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 9cb59a2d2ac..293ea0bf5c8 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -22,7 +22,7 @@ Radios should be used inside of a [radio group](./radio-group). Pressing a 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/v7/radio/basic/index.md';
 
@@ -58,7 +58,7 @@ import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md
 <EmptySelection />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -66,7 +66,7 @@ import Colors from '@site/static/usage/v7/radio/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.md';
 
diff --git a/docs/api/range.md b/docs/api/range.md
index 9cddd2dcf39..f6b0d7aa007 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -22,7 +22,7 @@ Rangeスライダは、スライダノブを動かして、ユーザーが値の
 
 デフォルトでは、Rangeスライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/range/basic/index.md';
 
@@ -72,7 +72,7 @@ import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
 
 <SnappingTicks />
 
-## Event Handling
+## イベントハンドリング
 
 ### Using `ionChange`
 
@@ -90,9 +90,9 @@ import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/in
 
 <IonKnobMoveEvent />
 
-## Theming
+## テーマ
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。
 
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 95d7c03e47a..b22f427fd8d 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -21,7 +21,7 @@ Refresher provides pull-to-refresh functionality on a content component. The pul
 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/v7/refresher/basic/index.md';
 
@@ -102,7 +102,7 @@ interface RefresherCustomEvent extends CustomEvent {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index 8d237595773..33d480dec58 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -45,7 +45,7 @@ interface ItemReorderCustomEvent extends CustomEvent {
 ```
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 14217db1211..afe8c6c63e0 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -23,7 +23,7 @@ Reorder is a component that allows an item to be dragged to change its order wit
 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.
 
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index d3ad263a646..22fb531dad1 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -23,7 +23,7 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
 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/v7/ripple-effect/basic/index.md';
 
diff --git a/docs/api/router.md b/docs/api/router.md
index d0923a51a83..7ce016d6073 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -34,7 +34,7 @@ The router is a component for handling routing inside vanilla and Stencil JavaSc
 
 コンポーネント(ロード/選択)とURLの間の関係を設定するために、`ion-router` はJSX/HTMLを使ってルートのツリーを定義する宣言的な構文を利用します。
 
-## Basic Usage
+## 基本的な使い方
 
 import BasicExample from '@site/static/usage/v7/router/basic/index.md';
 
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index 6800c92f05b..afa040ed548 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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/v7/searchbar/basic/index.md';
 
@@ -73,7 +73,7 @@ import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 <Debounce />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -81,7 +81,7 @@ import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 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.
 
@@ -122,7 +122,7 @@ interface SearchbarCustomEvent extends CustomEvent {
 ```
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index 4e2ec378d3f..71fab43698d 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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/v7/segment-button/basic/index.md';
 
@@ -37,7 +37,7 @@ import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
 <Layout />
 
 
-## Theming
+## テーマ
 ### CSS Shadow Parts
 
 import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.md';
@@ -45,7 +45,7 @@ import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-pa
 <CSSParts />
 
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.md';
 
diff --git a/docs/api/segment.md b/docs/api/segment.md
index 8990a7d0d61..b4682317c03 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -23,7 +23,7 @@ Segmentsは、関連するボタンのグループを水平方向の行に表示
 これらの機能は、1つを選択すると他のすべてが選択解除されるTabsと似ています。Segmentsは、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segmentsの代わりにTabsを使用してください。
 
 
-## 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.
 
@@ -49,7 +49,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md';
 <Toolbar />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -57,14 +57,14 @@ import Colors from '@site/static/usage/v7/segment/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.md';
 
 <CSSProps />
 
 
-## Accessibility
+## アクセシビリティ
 
 ### キーボードナビゲーション
 
@@ -100,7 +100,7 @@ interface SegmentCustomEvent extends CustomEvent {
 ```
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index 4423a0d5be2..722cc062068 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -23,7 +23,7 @@ Select Options are components that are child elements of a Select. Each option d
 For usage examples, see the [Select](./select) documentation.
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/select.md b/docs/api/select.md
index fa229b09f62..9e9daaac753 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -208,7 +208,7 @@ import Migration from '@site/static/usage/v7/select/migration/index.md';
 
 Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax.
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index 40075d2ca51..77b5af0a7d6 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -21,15 +21,15 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Skeleton Textは、placeholderコンテンツをレンダリングするためのコンポーネントです。要素は、指定した幅でグレーのブロックをレンダリングします。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md';
 
 <Basic />
 
-## Theming
+## テーマ
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.md';
 
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index c4249b1bd0c..48cc97ebdb7 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 Spinnerコンポーネントには、さまざまなアニメーションつきのSVG Spinnerが用意されています。Spinnerは、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
 
 
-## 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.
 
@@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/spinner/basic/index.md';
 
 <Basic />
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -37,7 +37,7 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
 
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 430a785c93e..5d58778e4cc 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -23,7 +23,7 @@ displayed as the viewport width increases.
 
 デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。
 
-## 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. 
@@ -54,9 +54,9 @@ import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
  | `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
+## CSSカスタムプロパティ
 
 import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md';
 
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 10d37192944..e5a4c236774 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -60,7 +60,7 @@ interface TabsCustomEvent extends CustomEvent {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/text.md b/docs/api/text.md
index 21930d59fe6..da3a400977f 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -19,14 +19,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 textコンポーネントは、任意の要素のテキストカラーのスタイル設定に使用できる単純なコンポーネントです。テキストカラーを変更するには、要素を `ion-text` 要素で囲む必要があります。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/text/basic/index.md';
 
 <Basic />
 
 
-## Theming
+## テーマ
 
 The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index a1ad3a9a369..e4f8e12a7f0 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -23,7 +23,7 @@ The textarea component is used for multi-line text input. A native textarea elem
 
 textareaコンポーネントはIonicのプロパティに加えて [ネイティブのtextareaの属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) に対応します。
 
-## Basic Usage
+## 基本的な使い方
 
 import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
 
@@ -102,7 +102,7 @@ import Migration from '@site/static/usage/v7/textarea/migration/index.md';
 
 Ionic uses heuristics to detect if an app is using the modern textarea syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-textarea` to `true` to force that instance of the textarea to use the legacy syntax.
 
-## Theming
+## テーマ
 
 import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.md';
 
@@ -129,7 +129,7 @@ interface TextareaCustomEvent extends CustomEvent {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index e1f968ce3c1..492e139c2f5 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -22,7 +22,7 @@ Thumbnailsは、通常、画像またはアイコンをラップする四角形
 
 Thumbnailsは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-item` の内部に配置すると、Thumbnailsのサイズが親コンポーネントに合わせて変更されます。Thumbnailsをアイテムの左側または右側に配置するには、slotをそれぞれ `start` または `end` に設定します。
 
-## Basic Usage
+## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/thumbnail/basic/index.md';
 
@@ -34,9 +34,9 @@ import Item from '@site/static/usage/v7/thumbnail/item/index.md';
 
 <Item />
 
-## Theming
+## テーマ
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.md';
 
diff --git a/docs/api/title.md b/docs/api/title.md
index f233290e76b..fc2ccaae3a7 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -49,7 +49,7 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsibl
 
 <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.
 
@@ -59,7 +59,7 @@ You can change the background color of the toolbar with the standard title by se
 
 ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.md';
 
diff --git a/docs/api/toast.md b/docs/api/toast.md
index ba156697b7b..be9c0d370a4 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -76,7 +76,7 @@ import IconPlayground from '@site/static/usage/v7/toast/icon/index.md';
 
 <IconPlayground />
 
-## Theming
+## テーマ
 
 import ThemingPlayground from '@site/static/usage/v7/toast/theming/index.md';
 
@@ -146,7 +146,7 @@ interface ToastOptions {
 
 * 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index 2557ef58a89..76d88646fb3 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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/v7/toggle/basic/index.md';
 
@@ -63,7 +63,7 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
 <Justify />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -71,7 +71,7 @@ import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 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.
 
@@ -133,7 +133,7 @@ interface ToggleCustomEvent<T = any> extends CustomEvent {
 ```
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index f91a2373f5b..19f7dc3a8c6 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -23,7 +23,7 @@ Toolbars are generally positioned above or below content and provide content and
 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.
 
@@ -70,7 +70,7 @@ import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 <ProgressBars />
 
 
-## Theming
+## テーマ
 
 ### Colors
 
@@ -78,7 +78,7 @@ import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.md';
 
 <Colors />
 
-### CSS Custom Properties
+## CSSカスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.md';
 
@@ -90,7 +90,7 @@ import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index
 `md` モードでは、`<ion-header>` は下部にボックスシャドウを、`<ion-footer>` は上部にボックスシャドウを表示します。 `ios` モードでは、`<ion-header>` の下部にボーダーが、`<ion-footer>` の上部にボーダーが表示されます。
 
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント

From c252eda64ee22005525b7ebf8c379aa4b04c9c71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 14:57:17 +0900
Subject: [PATCH 250/469] feat(v7): translate api

---
 docs/api/action-sheet.md    |  20 ++---
 docs/api/alert.md           |  18 ++--
 docs/api/app.md             |  16 ++--
 docs/api/back-button.md     |  10 +--
 docs/api/backdrop.md        |   8 +-
 docs/api/button.md          |   2 +-
 docs/api/buttons.md         |  12 +--
 docs/api/card-content.md    |   4 +-
 docs/api/card-header.md     |   4 +-
 docs/api/card-subtitle.md   |   4 +-
 docs/api/card-title.md      |   4 +-
 docs/api/card.md            |  10 +--
 docs/api/checkbox.md        |  22 ++---
 docs/api/col.md             |   2 +-
 docs/api/content.md         | 169 ++----------------------------------
 docs/api/datetime-button.md |   2 +-
 docs/api/fab-button.md      |   6 +-
 docs/api/fab-list.md        |   2 +-
 docs/api/fab.md             |  16 ++--
 docs/api/footer.md          |  12 +--
 docs/api/input.md           |   4 +-
 docs/api/radio.md           |   6 +-
 docs/api/range.md           |   2 +-
 docs/api/select.md          |   6 +-
 docs/api/textarea.md        |   4 +-
 docs/api/toggle.md          |   6 +-
 26 files changed, 108 insertions(+), 263 deletions(-)

diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index a912b32fbd4..eed049a1a1c 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -22,17 +22,17 @@ Action Sheetは複数の選択肢を表示するダイアログです。アプ
 
 ## Inline Action Sheets (Recommended)
 
-`ion-action-sheet` 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 Action Sheet.
+`ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
 
 import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
 
 <Trigger />
 
-### Using `isOpen`
+### `isOpen` を使う
 
-The `isOpen` property on `ion-action-sheet` allows developers to control the presentation state of the Action Sheet from their application state. This means when `isOpen` is set to `true` the Action Sheet will be presented, and when `isOpen` is set to `false` the Action Sheet will be dismissed.
+`ion-action-sheet` の `isOpen` プロパティは、開発者がアプリケーションの状態からアクションシートの表示状態を制御することを可能にします。つまり、`isOpen`が`true`に設定されるとアクションシートが表示され、`isOpen`が`false`に設定されるとアクションシートは解除されます。
 
-`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet 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.
+`isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
 
 import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
 
@@ -40,7 +40,7 @@ import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
 
 ## Controller Action Sheets
 
-The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed.
+アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
 
 import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
 
@@ -54,7 +54,7 @@ Buttonは `ActionSheetButton` の `data` プロパティを介してデータを
 
 ## Collecting Role Information on Dismiss
 
-When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed.
+`didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
 
 import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
 
@@ -64,7 +64,7 @@ import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/in
 
 Action Sheetはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
 
-### Styling
+### スタイリング
 
 私たちは、 `create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
 
@@ -86,7 +86,7 @@ import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md
 
 ## CSSカスタムプロパティ
 
-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.
+[CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
 
 import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
 
@@ -94,9 +94,9 @@ import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-
 
 ## アクセシビリティ
 
-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.
+アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が与えられます。ARIA仕様に合わせるため、`aria-label`属性または`aria-labelledby`属性のいずれかを設定する必要があります。
 
-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.
+Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することが強く推奨されています。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使用して、説明的な`aria-label`を提供するか、カスタム`aria-labelledby`値を設定することも可能です。
 
 ## Interfaces
 
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 78413468b8b..6783b9e51e9 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -24,17 +24,17 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 ## Inline Alerts (Recommended)
 
-`ion-alert` 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 Alert.
+`ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
 
 import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md';
 
 <Trigger />
 
-### Using `isOpen`
+### `isOpen` を使う
 
-The `isOpen` property on `ion-alert` allows developers to control the presentation state of the Alert from their application state. This means when `isOpen` is set to `true` the Alert will be presented, and when `isOpen` is set to `false` the Alert will be dismissed.
+`ion-alert` の `isOpen` プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、`isOpen` を `true` に設定するとアラートが表示され、`isOpen` を `false` に設定するとアラートは解除されます。
 
-`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert 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.
+`isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。
 
 import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
 
@@ -42,7 +42,7 @@ import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
 
 ## Controller Alerts
 
-The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed.
+`alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。
 
 import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
 
@@ -111,13 +111,13 @@ IonicのAngularアプリを構築する場合、スタイルはグローバル
 
 ## アクセシビリティ
 
-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.
+Ionicは、アラートの `role` を、入力やボタンがある場合は [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) に、何もない場合は [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) のいずれかに自動的に設定します。
 
-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.
+アラートに対して `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header`が定義されていない場合は、`subHeader`要素がフォールバックとして使用されます。同様に、`aria-describedby`属性は、`message`要素のIDが定義されていれば自動的に設定されます。
 
-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.
+ARIAの仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。
 
-All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
+すべてのARIA属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することにより、手動で上書きすることができます。
 
 
 ## Interfaces
diff --git a/docs/api/app.md b/docs/api/app.md
index c30ba1c1219..8501de6df35 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -18,14 +18,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 AppはIonicアプリケーションのコンテナ要素です。プロジェクトごとに `<ion-app>` 要素は1つだけにしてください。アプリケーションには、menus, headers, content, footersなど、多くのIonicコンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `<ion-app>` に追加されます。
 
-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
+`ion-app`を使用すると、以下の動作が可能になります。
+
+* [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。
+* Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます
+* Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。
+* テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。
+* Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
+* Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
 
 
 ## プロパティ
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 221e56afc6b..de8ab001d4b 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized.
+Back Buttonは、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。
 
 ## 基本的な使い方
 
@@ -26,17 +26,17 @@ import Basic from '@site/static/usage/v7/back-button/basic/index.md';
 
 <Basic />
 
-## Custom Back Button
+## カスタムのBack Button
 
-By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the Config docs for [Angular](/docs/angular/config), [React](/docs/react/config), or [Vue](/docs/vue/config) for more information.
+デフォルトでは、Back Buttonはテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Angular](/docs/angular/config), [React](/docs/react/config), または [Vue](/docs/vue/config) の Config docs を参照してください。
 
 import Custom from '@site/static/usage/v7/back-button/custom/index.md';
 
 <Custom />
 
-## Default Back History
+## デフォルトのBack履歴
 
-Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set.
+時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index 62c531ee1fc..772cf5faa2e 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -16,17 +16,17 @@ Backdropは、他のコンポーネントをオーバーレイするためフル
 
 ## 基本的な使い方
 
-The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
+バックドロップは、デフォルトで透明です。バックドロップは、その背後にあるコンテンツのクリックやタップを防ぐことができます。
 
 import Basic from '@site/static/usage/v7/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`. 
+バックドロップは、CSSプロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには `background-color`, `background`, `opacity` があります。
 
-Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`).
+コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。
 
 import Styling from '@site/static/usage/v7/backdrop/styling/index.md';
 
diff --git a/docs/api/button.md b/docs/api/button.md
index 0c41cbd001d..92ab2afbc19 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -27,7 +27,7 @@ import Basic from '@site/static/usage/v7/button/basic/index.md';
 
 ## Expand
 
-This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`.
+このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは `display: inline-block` を持ちますが、このプロパティを設定すると、ボタンは `display: block` を持つ全角要素に変更されます。
 
 import Expand from '@site/static/usage/v7/button/expand/index.md';
 
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 832ee083346..283d2ca1dbe 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -18,7 +18,7 @@ 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).
+Buttonsコンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。
 
 ## 基本的な使い方
 
@@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/buttons/basic/index.md';
 
 ## 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                                                                                              |
 |--------------|----------------------------------------------------------------------------------------------------------|
@@ -43,9 +43,9 @@ import Placement from '@site/static/usage/v7/buttons/placement/index.md';
 <Placement />
 
 
-## Types of Buttons
+## 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.
+ツールバーのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例で [バックボタン](./back-button) と [メニューボタン](./menu-button) に含まれるプロパティは表示目的であり、正しい使用方法はそれぞれのドキュメントをご覧ください。
 
 import Types from '@site/static/usage/v7/buttons/types/index.md';
 
@@ -54,11 +54,11 @@ import Types from '@site/static/usage/v7/buttons/types/index.md';
 
 ## 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).
+ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[collapsible large titles](./title#collapsible-large-titles) と共に使用します。
 
 :::info
 
-This feature is only available for iOS.
+この機能はiOS modeでのみ有効です。
 
 :::
 
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index cdb4978fb15..239b690832f 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -11,9 +11,9 @@ 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.
+詳しくは、[Card](./card)のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index d4c5f8cf169..fc7dfd1bc51 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -13,9 +13,9 @@ 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).
+カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。
 
-See the [Card](./card) documentation for more information.
+詳しくは、[Card](./card)のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index 01fc3cee2e4..6a852b58e14 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -13,9 +13,9 @@ 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).
+カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、cardの子コンポーネントです。
 
-See the [Card](./card) documentation for more information.
+詳しくは、[Card](./card)のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 9e93a128e2f..56addedab77 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -18,9 +18,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-Card title is a child component of card that should be placed inside of a [card header](./card-header).
+Card titleはcardの子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。
 
-See the [Card](./card) documentation for more information.
+詳しくは、[Card](./card)のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/card.md b/docs/api/card.md
index a8ee0f67420..ea9fa938dc7 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -18,11 +18,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <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).
+カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。
+カードは1つのコンポーネントで構成することもできますが、
+多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。
+カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。
+[カードヘッダ](./card-header)、[カードタイトル](./card-title)、[カードサブタイトル](./card-subtitle)、[カードコンテンツ](./card-content)。
 
 
 ## 基本的な使い方
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index e0fffcca61d..91e950e5656 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
 
 ## Label Placement
 
-Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
 
@@ -37,7 +37,7 @@ import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index
 
 ## Justification
 
-Developers can use the `justify` property to control how the label and control are packed on a line.
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
 
 import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
 
@@ -45,7 +45,7 @@ import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
 
 
 :::note
-`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
+`ion-item`は、 `justify` がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
 :::
 
 ## Indeterminate Checkboxes
@@ -84,15 +84,15 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## Migrating from Legacy Checkbox Syntax
+## レガシーなチェックボックス構文からのマイグレーション
 
-A simpler checkbox syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup a checkbox, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-Developers can perform this migration one checkbox at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
-### Using the Modern Syntax
+### モダンな構文の使い方
 
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`.
+最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。
 
 import Migration from '@site/static/usage/v7/checkbox/migration/index.md';
 
@@ -100,12 +100,12 @@ import Migration from '@site/static/usage/v7/checkbox/migration/index.md';
   
 
 :::note
-In past versions of Ionic, `ion-item` was required for `ion-checkbox` to function properly. Starting in Ionic 7.0, `ion-checkbox` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-checkbox` to function properly.
+Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。
 :::
 
-### Using the Legacy Syntax
+### レガシーな構文の使い方
 
-Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-checkbox` to `true` to force that instance of the checkbox to use the legacy syntax.
+Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
 
 
 ## プロパティ
diff --git a/docs/api/col.md b/docs/api/col.md
index f273ca948c7..aff47ac9745 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -25,7 +25,7 @@ Columnは、[Grid](./grid) システムのセルラーコンポーネントで
 
 ## 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.
+デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。
 
 
 
diff --git a/docs/api/content.md b/docs/api/content.md
index b9bae3404fd..1d8eba379f8 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -34,7 +34,7 @@ import Basic from '@site/static/usage/v7/content/basic/index.md';
 
 ## 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.
+コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。
 
 import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
 
@@ -43,24 +43,24 @@ import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
 
 ## 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`.
+デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。
 
 import Fullscreen from '@site/static/usage/v7/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.
+スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSSの[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。
 
 import Fixed from '@site/static/usage/v7/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.
+コンテンツには [メソッド](#methods) が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには `duration` を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。
 
 import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md';
 
@@ -68,7 +68,7 @@ import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md
 
 ## 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).
+スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、`scrollEvents` を `true` に設定することで、有効にすることができます。これは、 スクロール [イベント](#events) を聞く前に必要です。
 
 import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
 
@@ -137,161 +137,6 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent {
 ```
 
 
-<<<<<<< HEAD
-
-
-## 使い方
-
-<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-content
-  [scrollEvents]="true"
-  (ionScrollStart)="logScrollStart()"
-  (ionScroll)="logScrolling($event)"
-  (ionScrollEnd)="logScrollEnd()">
-    <h1>Main Content</h1>
-
-    <div slot="fixed">
-      <h1>Fixed Content</h1>
-    </div>
-</ion-content>
-```
-
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-content>
-  <h1>Main Content</h1>
-
-  <div slot="fixed">
-    <h1>Fixed Content</h1>
-  </div>
-</ion-content>
-```
-
-```javascript
-var content = document.querySelector('ion-content');
-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'));
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonContent } from '@ionic/react';
-
-const ContentExample: React.FC = () => (
-  <IonContent
-    scrollEvents={true}
-    onIonScrollStart={() => {}}
-    onIonScroll={() => {}}
-    onIonScrollEnd={() => {}}>
-      <h1>Main Content</h1>
-
-      <div slot="fixed">
-        <h1>Fixed Content</h1>
-      </div>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'content-example',
-  styleUrl: 'content-example.css'
-})
-export class ContentExample {
-  logScrollStart() {
-    console.log('Scroll start');
-  }
-
-  logScrolling(ev) {
-    console.log('Scrolling', ev);
-  }
-
-  logScrollEnd() {
-    console.log('Scroll end');
-  }
-
-  render() {
-    return [
-      <ion-content
-        scrollEvents={true}
-        onIonScrollStart={() => this.logScrollStart()}
-        onIonScroll={(ev) => this.logScrolling(ev)}
-        onIonScrollEnd={() => this.logScrollEnd()}>
-          <h1>Main Content</h1>
-
-          <div slot="fixed">
-            <h1>Fixed Content</h1>
-          </div>
-      </ion-content>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-content
-    :scroll-events="true"
-    @ionScrollStart="logScrollStart()"
-    @ionScroll="logScrolling($event)"
-    @ionScrollEnd="logScrollEnd()">
-      <h1>Main Content</h1>
-
-      <div slot="fixed">
-        <h1>Fixed Content</h1>
-      </div>
-  </ion-content>
-</template>
-
-<script>
-import { IonContent } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonContent }
-});
-</script>
-
-```
-
-
-
-</TabItem>
-
-</Tabs>
-
 ## プロパティ
 <Props />
 
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index c1c7521b734..9d5c608cc68 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';
 
 ## ローカライゼーション
 
-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.
+`ion-datetime-button` のローカライズされたテキストは、関連する `ion-datetime` インスタンスの `locale` プロパティによって決まります。詳しくは、[Datetime Localization](./datetime#localization) を参照してください。
 
 ## モーダルやポップオーバーと使う
 
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index 6a39bc22811..06f1d615f58 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -18,11 +18,11 @@ 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.
+フローティングアクションボタン（FAB）は、アプリケーションの主要なアクションを表します。デフォルトでは、円形の形をしています。ボタンが押されると、関連するアクションがさらに開かれることもあります。
 
-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.
+その名が示すように、FABは一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FABボタンを[fab](./fab)コンポーネントで包むことで実現されます。もしボタンがfabで包まれていない場合は、コンテンツと一緒にスクロールします。
 
-For usage examples, see the [fab documentation](./fab).
+使用例については、[fab documentation](./fab)を参照してください。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index f7d681b5b09..e3b0af38daa 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -14,7 +14,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 `ion-fab-list` 要素は、複数のfab buttonのコンテナです。この一連のfab buttonには、メインのfab buttonに関連するアクションが含まれ、メインのfab buttonをクリックすると表示されます。ボタンを表示する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に設定します。
 
-For usage examples, see the [fab documentation](./fab).
+使用例については、[fab documentation](./fab)を参照してください。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 97041cb8919..b84aa62b77c 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -17,7 +17,7 @@ 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.
+Fabは、1つ以上の[fabボタン](./fab-button)を含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fabは1つのメインFabボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む1つ以上の[fabリスト](./fab-list)を含むことができます。
 
 ## 基本的な使い方
 
@@ -27,23 +27,23 @@ import BasicUsage from '@site/static/usage/v7/fab/basic/index.md';
 
 ## 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`.
+[fabリスト](./fab-list)コンポーネントの`side`プロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、`side`の値が全て異なる限り、複数のfabリストを持つことができます。
 
 import ListSide from '@site/static/usage/v7/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.
+fabを固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。
 
 import Positioning from '@site/static/usage/v7/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.
+メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。
 
 import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md';
 
@@ -72,9 +72,9 @@ import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/i
 
 ## アクセシビリティ
 
-### Labels
+### ラベル
 
-Since FABs are allowed to contain only icons, developers must provide an `aria-label` on each `ion-fab-button` instance. Without this label, assistive technologies will not be able to announce the purpose of each button.
+FABはアイコンのみを含むことができるため、開発者は各`ion-fab-button`インスタンスに `aria-label` を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/footer.md b/docs/api/footer.md
index 085b5659211..81a4b28e85e 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -25,9 +25,9 @@ import Basic from '@site/static/usage/v7/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).
+フッターは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
 
 import Translucent from '@site/static/usage/v7/footer/translucent/index.md';
 
@@ -36,7 +36,7 @@ import Translucent from '@site/static/usage/v7/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"`.
+多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。
 
 import Fade from '@site/static/usage/v7/footer/fade/index.md';
 
@@ -45,15 +45,15 @@ import Fade from '@site/static/usage/v7/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.
+フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
 
 import CustomScrollTarget from '@site/static/usage/v7/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.
+`"md"`モードでは、フッターは上部に `box-shadow` が表示されます。`"ios"`モードでは、上部に `border` が表示されます。これらは、フッターに `.ion-no-border` クラスを追加することで削除することができます。
 
 import NoBorder from '@site/static/usage/v7/footer/no-border/index.md';
 
diff --git a/docs/api/input.md b/docs/api/input.md
index 372c4143aea..81fc6fb431a 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -39,7 +39,7 @@ import Types from '@site/static/usage/v7/input/types/index.md';
 
 ## Label Placement
 
-Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+Labels will take up the width of their content by default. 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
 
@@ -116,7 +116,7 @@ A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the
 
 Developers can perform this migration one input at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
-### Using the Modern Syntax
+### モダンな構文の使い方
 
 Using the modern syntax involves three steps:
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 293ea0bf5c8..f527d76b2d4 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
 
 ## Label Placement
 
-Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
 
@@ -38,7 +38,7 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
 
 ## Justification
 
-Developers can use the `justify` property to control how the label and control are packed on a line.
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
 
 import Justify from '@site/static/usage/v7/radio/justify/index.md';
 
@@ -84,7 +84,7 @@ A simpler radio syntax was introduced in Ionic 7.0. This new syntax reduces the
 
 Developers can perform this migration one radio at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
-### Using the Modern Syntax
+### モダンな構文の使い方
 
 Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-radio`. The placement of the label can be configured using the `labelPlacement` property on `ion-radio`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-radio`.
 
diff --git a/docs/api/range.md b/docs/api/range.md
index f6b0d7aa007..9674d47b539 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -114,7 +114,7 @@ A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the
 
 Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
-### Using the Modern Syntax
+### モダンな構文の使い方
 
 Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`.
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 9e9daaac753..37c37de7497 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -87,7 +87,7 @@ import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/selec
 
 ## Label Placement
 
-Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+Labels will take up the width of their content by default. 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
 
@@ -95,7 +95,7 @@ import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.m
 
 ## Justification
   
-Developers can use the `justify` property to control how the label and control are packed on a line.
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
 
 import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
 
@@ -193,7 +193,7 @@ A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the
 Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
 
-### Using the Modern Syntax
+### モダンな構文の使い方
 
 Using the modern syntax involves two steps:
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index e4f8e12a7f0..4e0424557c9 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -31,7 +31,7 @@ import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
 
 ## Label Placement
 
-Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+Labels will take up the width of their content by default. 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
 
@@ -86,7 +86,7 @@ A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces t
 Developers can perform this migration one textarea at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
 
-### Using the Modern Syntax
+### モダンな構文の使い方
 
 Using the modern syntax involves three steps:
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index 76d88646fb3..b9e462c2ebe 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -47,7 +47,7 @@ import List from '@site/static/usage/v7/toggle/list/index.md';
 
 ## Label Placement
 
-Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.md';
 
@@ -56,7 +56,7 @@ import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.m
 
 ## Justification
 
-Developers can use the `justify` property to control how the label and control are packed on a line.
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
 
 import Justify from '@site/static/usage/v7/toggle/justify/index.md';
 
@@ -93,7 +93,7 @@ A simpler toggle syntax was introduced in Ionic 7.0. This new syntax reduces the
 
 While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
-### Using the Modern Syntax
+### モダンな構文の使い方
 
 Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-toggle`. The placement of the label can be configured using the `labelPlacement` property on `ion-toggle`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-toggle`.
 

From ba30df74c27dd8abaf435c5f53b5bfca33502f0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 15:36:55 +0900
Subject: [PATCH 251/469] feat(translate): translate api

---
 docs/api/grid.md            | 106 ++++++++++++++++++------------------
 docs/api/header.md          |  18 +++---
 docs/api/icon.md            |  10 ++--
 docs/api/infinite-scroll.md |  12 ++--
 docs/api/input.md           |  40 +++++++-------
 docs/api/item-divider.md    |   2 +-
 docs/api/item-group.md      |   2 +-
 docs/api/item-option.md     |   4 +-
 docs/api/item-options.md    |   4 +-
 docs/api/item-sliding.md    |   2 +-
 docs/api/item.md            |   8 +--
 docs/api/list-header.md     |  10 ++--
 docs/api/list.md            |  10 ++--
 docs/api/loading.md         |  10 ++--
 docs/api/menu-button.md     |   4 +-
 docs/api/menu-toggle.md     |   6 +-
 docs/api/menu.md            |   4 +-
 docs/api/modal.md           |  10 ++--
 docs/api/nav.md             |   4 +-
 19 files changed, 133 insertions(+), 133 deletions(-)

diff --git a/docs/api/grid.md b/docs/api/grid.md
index 5a69a35f450..3670b8d5817 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -18,28 +18,28 @@ 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.
+グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の3つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ12列のレイアウトをベースにしています。カラムの数は、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).
+- グリッドは、すべての行と列のコンテナとして機能します。グリッドは、そのコンテナの幅を完全に占有します。
+  が、`fixed`プロパティを追加すると、画面サイズに応じた幅が設定されます。後述の[Fixed Grid](#fixed-grid)を参照してください。
+- 行は、列を適切に並べるための水平方向のグループです。
+- コンテンツは列の中に配置されるべきで、列だけが行の直属の子になることができる。
+- `size`プロパティは、1行あたりデフォルトの12列のうち、使用する列の数を示します。
+  つまり、`size="4"`をカラムに追加することで、グリッドの1/3、つまり12カラムのうち4カラムを占有することができます。
+- sizeに値を指定しないカラムは、自動的に等しい幅を持つようになります。例えば、4つのカラムは、それぞれ自動的に25％の幅になります。
+- カラムの幅はパーセンテージで設定されるため、常に流動的で親要素からの相対的なサイズになります。
+- 個々のカラムの間にはパディングがあります。しかし、パディングはグリッドから削除することができます。
+  カラムを表示するには、グリッドに `ion-no-padding` クラスを追加します。グリッドに適用できるその他のスタイルについては、[CSS Utilities](../layout/css-utilities) を参照してください。
+- グリッドの階層は5つあり、レスポンシブ・ブレークポイントごとに1つずつ、すべてのブレークポイント（特小）、小、中、大、特大が用意されています。
+- グリッドの階層は最小幅を基準としており、その階層とそれよりも大きい階層に適用されます。
+  (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
+- グリッドはCSS変数でカスタマイズすることができます。 [グリッドのカスタマイズ](#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).
+グリッドのデフォルトのブレークポイントとそれに対応するプロパティは、以下の表で定義されています。ブレイクポイントの値は、現時点ではカスタマイズすることができません。カスタマイズできない理由については、 [メディアクエリの変数](../theming/advanced#variables-in-media-queries) を参照してください。
 
 | Name | Value  | Width Property | Offset Property | Push Property | Pull Property | Description                          |
 | ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ |
@@ -52,16 +52,16 @@ 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/v7/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.
+グリッドはコンテナの幅を100%占有します。グリッドに `fixed` プロパティを追加することで、画面サイズに応じた幅を設定することができます。各ブレイクポイントのグリッドの幅は以下の表に記載されていますが、カスタマイズすることも可能です。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化することを確認できます。
 
 | Name | Value  | Description                                       |
 | ---- | ------ | ------------------------------------------------- |
@@ -76,72 +76,72 @@ import Fixed from '@site/static/usage/v7/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.
+カラムは、全体のカラム数のうち特定の数を占めるように特定のサイズに設定したり、コンテンツに応じて幅を変更したりすることができます。デフォルトのカラム数は12ですが、これはカスタマイズ可能です。詳しくは、下記の [カラム数](#number-of-columns) の項を参照してください。
 
-### 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.
+`size`を`"auto"`に設定することで、カラムはコンテンツの自然な幅に基づいたサイズを設定することができます。これは、カラムを特定のピクセル数のような絶対的な幅に設定するときに必要です。自動幅のカラムの隣にあるカラムは、行を埋めるようにリサイズされます。
 
 import SizeAuto from '@site/static/usage/v7/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.
+カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。
 
 import Size from '@site/static/usage/v7/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.
+`size`プロパティは、すべての [ブレークポイント](#default-breakpoints) の列幅を変更します。また、Columnでは、"size" の末尾にブレークポイント名を付加したいくつかのsizeプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムの幅を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムの幅が変化するのがわかります。
 
 import SizeResponsive from '@site/static/usage/v7/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.
+カラムは、`offset`プロパティを用いて右に移動させることができます。このプロパティは、カラムの左マージンを指定したカラムの数だけ増やします。また、その右側にカラムが存在する場合は、そのカラムを移動させます。
 
 import Offset from '@site/static/usage/v7/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.
+`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの左マージンを変更します。また、カラムには、"offset"の末尾にブレークポイント名が付加されたいくつかのoffsetプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムのオフセットを変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムのオフセットが変化するのを確認できます。
 
 import OffsetResponsive from '@site/static/usage/v7/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.
+`push`と`pull`のプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、指定された列数だけ列の `left` と `right` を調整し、列の並び替えを簡単に行うことができます。この場合、他のカラムが配置されている場所にカラムを移動させると、カラムが重なることになります。
 
 import PushPull from '@site/static/usage/v7/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.
+`push`と`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの位置を変更します。また、カラムには、"push" / "pull "の末尾にブレークポイント名を付加した `push` と `pull` プロパティがいくつかあります。これらのプロパティは、画面サイズに応じてカラムの位置を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、列の位置が変化するのがわかります。
 
 import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md';
 
@@ -149,38 +149,38 @@ import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/
 
 ## 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).
+行に異なるクラスを追加することで、すべての列を行の内側に垂直に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities#flex-container-properties) を参照してください。
 
 import VerticalAlignment from '@site/static/usage/v7/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).
+行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities.md#flex-container-properties) を参照してください。
 
 import HorizontalAlignment from '@site/static/usage/v7/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.
+組み込みのCSS変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。
 
-### 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.
+固定グリッドの幅は、CSS変数 `--ion-grid-width` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS変数を使用します。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化するのが確認できます。
 
 import Width from '@site/static/usage/v7/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.
+グリッドのカラム数は `--ion-grid-columns` というCSS変数で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。
 
 import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md';
 
@@ -188,9 +188,9 @@ import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/i
 
 ### 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.
+グリッドコンテナのpaddingは、CSS変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS変数を使用します。
 
-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.
+列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS変数を使用します。
 
 import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md';
 
diff --git a/docs/api/header.md b/docs/api/header.md
index b9ddc5aae2d..cb5565931a8 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -16,7 +16,7 @@ import Slots from '@site/static/auto-generated/header/slots.md';
 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.
+ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上の[ツールバー](./toolbar)のラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
 
 
 ## 基本的な使い方
@@ -26,18 +26,18 @@ import Basic from '@site/static/usage/v7/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).
+ヘッダーは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
 
 import Translucent from '@site/static/usage/v7/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".
+Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
 
 import Condense from '@site/static/usage/v7/header/condense/index.md';
 
@@ -46,9 +46,9 @@ import Condense from '@site/static/usage/v7/header/condense/index.md';
 
 ## フェードヘッダー
 
-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".
+多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの `collapse` プロパティを `"fade"` に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「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.
+この機能は、[Condensed Header](#condensed-header)と組み合わせることができます。collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用されるはずです。
 
 import Fade from '@site/static/usage/v7/header/fade/index.md';
 
@@ -57,7 +57,7 @@ import Fade from '@site/static/usage/v7/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.
+フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
 
 import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.md';
 
@@ -66,7 +66,7 @@ import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-targe
 
 ## 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.
+`"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。
 
 import NoBorder from '@site/static/usage/v7/header/no-border/index.md';
 
diff --git a/docs/api/icon.md b/docs/api/icon.md
index 2119d43ee71..14d903a5e5f 100644
--- a/docs/api/icon.md
+++ b/docs/api/icon.md
@@ -10,9 +10,9 @@ title: 'ion-icon'
   />
 </head>
 
-Icon is a simple component made available through the <a href="https://ionic.io/ionicons">Ionicons</a> library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
+Iconは、<a href="https://ionic.io/ionicons">Ionicons</a>ライブラリを通じて利用できるシンプルなコンポーネントで、すべてのIonic Frameworkアプリケーションにデフォルトでプリパッケージされています。Ioniconsのセットから任意のアイコン、またはカスタムSVGを表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。
 
-For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a>.
+利用可能なアイコンのリストは <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a> をご覧ください。
 
 ## 基本的な使い方
 
@@ -23,20 +23,20 @@ import Basic from '@site/static/usage/v7/icon/basic/index.md';
 
 ## アクセシビリティ
 
-Icons that are purely decorative content should have <code>aria-hidden="true"</code>. This will not visually hide the icon, but it will hide the element from assistive technology.
+純粋に装飾的なコンテンツであるアイコンは、<code>aria-hidden="true"</code>を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。
 
 ```html
 <ion-icon name="heart" aria-hidden="true"></ion-icon>
 ```
 
 
-If the icon is interactive, it should have alternate text defined by adding an <code>aria-label</code>.
+アイコンがインタラクティブな場合は、<code>aria-label</code>を追加することで代替テキストを定義する必要があります。
 
 ```html
 <ion-icon name="heart" aria-label="Favorite"></ion-icon>
 ```
 
-Alternatively, if the icon is inside of another element that it is describing, that element should have the <code>aria-label</code> added to it, and the icon should be hidden using <code>aria-hidden</code>.
+また、アイコンが説明する他の要素の中にある場合は、その要素に <code>aria-label</code> を付加し、 <code>aria-hidden</code> でアイコンを非表示とします。
 
 ```html
 <ion-button aria-label="Favorite">
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 16fa42922d4..b1641609eb5 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -41,9 +41,9 @@ import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite
 
 <CustomContent />
 
-## Usage with Virtual Scroll
+## 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.
+無限スクロールを機能させるには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content`のスクロールを無効にし、`.ion-content-scroll-host`クラスのターゲットで、どの要素コンテナがスクロールコンテナを担当するのかを指定する必要があります。
 
 ```html
 <ion-content scroll-y="false">
@@ -58,11 +58,11 @@ Infinite scroll requires a scroll container to function. When using a virtual sc
 
 ## アクセシビリティ
 
-Developers should assign the `role="feed"` attribute to the scrollable list of items that are added to or removed from as the user scrolls.
+開発者は、ユーザーがスクロールすると追加されたり削除されたりするスクロール可能なリストアイテムに `role="feed"` 属性を割り当てる必要があります。
 
-Individual list items should either have `role="article"` or use the `<article>` element directly.
+個々のリストアイテムは `role="article"` を持つか、`<article>` 要素を直接使用しなければならない。
 
-For example, when rendering a collection of items in an `ion-list`:
+例えば、`ion-list`でアイテムのコレクションをレンダリングする場合。
 
 ```html
 <ion-content role="feed">
@@ -82,7 +82,7 @@ For example, when rendering a collection of items in an `ion-list`:
 </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.
+その他の情報については、[ARIA: feed role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role) のドキュメントを参照してください。
 
 ## Interfaces
 
diff --git a/docs/api/input.md b/docs/api/input.md
index 81fc6fb431a..77b35899df7 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/input/basic/index.md';
 
 ## 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"`.
+input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
 
 import Types from '@site/static/usage/v7/input/types/index.md';
 
@@ -39,7 +39,7 @@ import Types from '@site/static/usage/v7/input/types/index.md';
 
 ## Label Placement
 
-Labels will take up the width of their content by default. 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
 
@@ -48,7 +48,7 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md
 
 ## 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.
+Inputsには、入力の操作方法に応じて、入力をクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、入力に `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力がぼかされた後、再度入力されるとクリアされます。 `type` が `"password"` に設定されている入力は、デフォルトで `clearOnEdit` が有効になっています。
 
 import Clear from '@site/static/usage/v7/input/clear/index.md';
 
@@ -57,9 +57,9 @@ import Clear from '@site/static/usage/v7/input/clear/index.md';
 
 ## Filled Inputs
 
-Material Design offers filled styles for an input. The `fill` property on the input can be set to either `"solid"` or `"outline"`.
+Material Design では、入力に塗りつぶしのスタイルが用意されています。入力の `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
-Since the `fill` styles visually defines the input container, inputs that use `fill` should not be used in `ion-item`.
+`fill` スタイルは入力コンテナを視覚的に定義するため、`fill` を使用する入力は `ion-item` で使用すべきではありません。
 
 import Fill from '@site/static/usage/v7/input/fill/index.md';
 
@@ -68,7 +68,7 @@ import Fill from '@site/static/usage/v7/input/fill/index.md';
 
 ## Helper & Error Text
 
-Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-input`. 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.
+ヘルパーテキストとエラーテキストは `helperText` と `errorText` プロパティを用いて入力の内部で使用することができます。エラーテキストは `ion-invalid` クラスが `ion-input` に追加されない限り表示されません。Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいて、このクラスを手動で追加する必要があります。
 
 import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
@@ -76,7 +76,7 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
 ## Input Counter
 
-The input counter is 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.
+Input Counterは、入力の下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
 
 import Counter from '@site/static/usage/v7/input/counter/index.md';
 
@@ -84,9 +84,9 @@ import Counter from '@site/static/usage/v7/input/counter/index.md';
 
 ## Filtering User Input
 
-Developers can use the `ionInput` event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters.
+開発者は `ionInput` イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。
 
-When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync.
+ステート変数に値を格納する場合、ステート変数と `ion-input` コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と `ion-input` コンポーネントの値が確実に同期されます。
 
 import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
@@ -96,7 +96,7 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 ### Colors
 
-Setting the `color` property changes the color palette for each input. On `ios` mode, this property changes the caret color. On `md` mode, this property changes the caret color and the highlight/underline color.
+`color`プロパティを設定すると、各入力のカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
 
 import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
@@ -104,33 +104,33 @@ import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
 ## CSSカスタムプロパティ
 
-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.
+Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
 
 import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md';
 
 <CSSProps />
 
-## Migrating from Legacy Input Syntax
+## レガシーな Input 構文からの移行
 
-A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-Developers can perform this migration one input at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者は、この移行を一度に1つの入力で実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### モダンな構文の使い方
 
-Using the modern syntax involves three steps:
+モダンシンタックスを使うには、3つのステップがあります。
 
-1. Remove `ion-label` and use the `label` property on `ion-input` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-input`.
-2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
-3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead.
+1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用する。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
+2. 入力固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
+3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
 
 import Migration from '@site/static/usage/v7/input/migration/index.md';
 
 <Migration />
 
-### Using the Legacy Syntax
+### レガシーシンタックスの使用
 
-Ionic uses heuristics to detect if an app is using the modern input syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-input` to `true` to force that instance of the input to use the legacy syntax.
+Ionicは、アプリが最新の入力構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、その入力のインスタンスにレガシー構文を使用するように強制できます。
 
 ## Interfaces
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index e4bf859f470..1e905decc9a 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -18,7 +18,7 @@ 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.
+アイテムディバイダは、リスト内の [アイテム](./item) を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。
 
 
 ## 基本的な使い方
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index e9f2a67862f..74e91cc46f2 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -16,7 +16,7 @@ import Slots from '@site/static/auto-generated/item-group/slots.md';
 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).
+アイテムグループとは、類似の[アイテム](./item)をまとめて整理するためのコンテナです。アイテムグループには、アイテムを複数のセクションに分けるための[アイテムディバイダー](./item-divider)を含めることができます。また、[スライドアイテム](./item-sliding)をグループ化するために使用することができます。
 
 ## 基本的な使い方
 
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index b1026fe8ec0..e9dcb580955 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -18,9 +18,9 @@ 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.
+アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。アイテムオプション](./item-options)の中に配置する必要があります。ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。
 
-See the [item sliding](./item-sliding) documentation for more information.
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index 2015247ff13..eb6e0164622 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -16,9 +16,9 @@ import Slots from '@site/static/auto-generated/item-options/slots.md';
 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).
+アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[startまたはend](#side-description)のいずれかに配置することができます。
 
-See the [item sliding](./item-sliding) documentation for more information.
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
 
 
 ## Side Description
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 508cf5a79fe..eb9cce4cd86 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -16,7 +16,7 @@ import Slots from '@site/static/auto-generated/item-sliding/slots.md';
 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.
+スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として [item](./item) コンポーネントが必要です。表示させるオプションはすべて [item options](./item-options) 要素に記述する必要があります。
 
 
 ## 基本的な使い方
diff --git a/docs/api/item.md b/docs/api/item.md
index 9a5be8aa390..cd440bb836c 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -81,7 +81,7 @@ import Media from '@site/static/usage/v7/item/media/index.md';
 
 ## 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"`.
+Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
 
 import Buttons from '@site/static/usage/v7/item/buttons/index.md';
 
@@ -122,11 +122,11 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md
 <CSSProps />
 
 
-### Input Highlight
+### Inputハイライト
 
-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`.
+input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、入力の下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `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.
+ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、入力のハイライトは `primary` カラーを使用します。入力が有効な場合は `success` カラーが使用され、無効な入力は `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。
 
 import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 4b4112547e7..547edd926fb 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -13,7 +13,7 @@ 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).
+リストヘッダーは、[リスト](./list)の内容を記述するために使用されるブロック要素です。アイテムディバイダー](./item-divider)とは異なり、リストヘッダーは[アイテム](./item)のリストの先頭で一度だけ使用する必要があります。
 
 ## 基本的な使い方
 
@@ -22,18 +22,18 @@ import Basic from '@site/static/usage/v7/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.
+リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。
 
 import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
 
 <Buttons />
 
 
-## List Header Lines
+## List Headerの下線
 
-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.
+リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。
 
 import Lines from '@site/static/usage/v7/list-header/lines/index.md';
 
diff --git a/docs/api/list.md b/docs/api/list.md
index 727b3c17285..9671d64d043 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -16,10 +16,10 @@ import Slots from '@site/static/auto-generated/list/slots.md';
 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.
+リストは、Text、Buttons、Toggleを含むこと [アイテム](./item) の複数の行で構成されています。
+アイコンやサムネイルなど、さまざまな機能を備えています。リストには一般的に、画像やテキストなど、類似したデータ内容を持つアイテムが含まれます。
 
-Lists support several interactions including swiping items to reveal options, dragging to [reorder](./reorder) items within the list, and deleting items.
+リストは、アイテムをスワイプしてオプションを表示したり、ドラッグしてリスト内のアイテムを[並び替え](./reorder)したり、アイテムを削除したりするなどの操作をサポートしています。
 
 ## 基本的な使い方
 
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/list/basic/index.md';
 
 ## 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.
+リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。
 
 import Inset from '@site/static/usage/v7/list/inset/index.md';
 
@@ -39,7 +39,7 @@ import Inset from '@site/static/usage/v7/list/inset/index.md';
 
 ## 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.
+リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左paddingで調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。
 
 import Lines from '@site/static/usage/v7/list/lines/index.md';
 
diff --git a/docs/api/loading.md b/docs/api/loading.md
index 8d05ebac381..a3d5cd03338 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -63,12 +63,12 @@ import Theming from '@site/static/usage/v7/loading/theming/index.md';
 :::
 
 ## アクセシビリティ
-  
-Ionic automatically sets Loading's `role` to [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role).
 
-If the `message` property is defined for Loading, then the `aria-labelledby` attribute will be automatically set to the message element's ID. Otherwise, `aria-labelledby` will not be set, and developers must provide an `aria-label` using the `htmlAttributes` property.
-  
-All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of Loading.
+Ionicは自動的にLoadingの`role`を[`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)に設定します。
+
+Loadingに`message`プロパティが定義されている場合、`aria-labelledby`属性は自動的にmessage要素のIDに設定されます。そうでない場合、`aria-labelledby`は設定されず、開発者は `htmlAttributes` プロパティを使用して `aria-label` を提供する必要があります。
+
+すべてのARIA属性は、Loadingの`htmlAttributes`プロパティにカスタム値を定義することによって、手動で上書きすることができます。
 
 ## Interfaces
 
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index 80056b9f287..e7e996d5720 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -18,9 +18,9 @@ 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.
+Menu Buttonコンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。
 
-See the [menu](./menu) documentation for more information.
+詳しくは、[menu](./menu)のドキュメントをご覧ください。
 
 
 ## プロパティ
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 950d2e8defe..fdb2eacc2cb 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -18,11 +18,11 @@ 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 Toggleコンポーネントは、メニューの開閉を切り替えるために使用することができます。
 
-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`.
+メニュートグルは、選択されたメニューが有効な場合にのみ表示されます。メニューが無効になっている場合や、分割ペインとして表示されている場合は、メニュートグルは非表示になります。常にメニュートグルを表示するには、`autoHide`プロパティを`false`に設定します。
 
-See the [menu](./menu#menu-toggle) documentation for more information.
+詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/menu.md b/docs/api/menu.md
index f7d7b8cedc7..c187d8cb8dc 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -33,7 +33,7 @@ import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
 
 ## Menu Toggle
 
-The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
+[ion-menu-toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
 
 import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
@@ -41,7 +41,7 @@ import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
 ## Menu Types
 
-The `type` property can be used to customize how menus display in your application.
+`type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
 
 import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
diff --git a/docs/api/modal.md b/docs/api/modal.md
index d344d8c1b57..8f91499180a 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -101,7 +101,7 @@ import CardExample from '@site/static/usage/v7/modal/card/basic/index.md';
 
 マップアプリのドロワーコンポーネントに似たシートモーダルエフェクトを作成します。シートモーダルを作成するには、`ion-modal` に `breakpoints` と `initialBreakpoint` プロパティを設定する必要があります。
 
-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. Note that the modal cannot be dismissed on swipe if no `0` breakpoint is included, but it can still be dismissed by pressing `Esc` or the hardware back button.
+`breakpoints`プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。 `breakpoints` プロパティが `[0, 0.5, 1]` の場合、シートをスワイプすると、モーダルの 0%、50%、100%を表示することができることを示します。モーダルが0%にスワイプされると、モーダルは自動的にディスクローズされます。 `0` ブレークポイントが含まれていない場合、スワイプ時にモーダルを解除することはできませんが、`Esc` またはハードウェアの戻るボタンを押すことで解除することができることに注意してください。
 
 `initialBreakpoint` プロパティは、シート モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。 `initialBreakpoint` の値は、 `breakpoints` 配列にも存在する必要があります。例えば、 `breakpoints` の値が `[0, 0.5, 1]` である場合、 `initialBreakpoint` の値が `0.5` であれば、 `breakpoints` 配列に `0.5` が存在するため有効であると考えられます。 `0.25` は `breakpoints` 配列に存在しないので、 `initialBreakpoint` の値は無効になります。
 
@@ -159,16 +159,16 @@ import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/in
 
 ## 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.
+`ion-modal`は、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、[ion-alert](./alert)や[ion-loading](./loading)などのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。
 
 import CustomDialogs from '@site/static/usage/v7/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.
+* `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。
+* カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。
 
 ## Interfaces
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 2d6736cb794..5f5d29e85b9 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -21,9 +21,9 @@ Navは、任意のコンポーネントをロードし、スタックに新し
 
 RouterOutletとは異なり、Navは特定のルーターに関連付けられていません。つまり、Navコンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリのURLに縛られないモーダルを持つことができるユースケースに適しています。
 
-## Using NavLink
+## 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.
+NavLinkは、Navと対話する際の簡略化されたAPIです。開発者は、コンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
 
 import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
 

From bcdb4e0ccf682bf03357cee83c55a84c9053af35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 16:02:21 +0900
Subject: [PATCH 252/469] feat(translate): translate api

---
 docs/api/action-sheet.md    |   2 +-
 docs/api/alert.md           |   2 +-
 docs/api/grid.md            | 106 ++++++++++++++++++------------------
 docs/api/header.md          |  18 +++---
 docs/api/icon.md            |  10 ++--
 docs/api/infinite-scroll.md |  12 ++--
 docs/api/input.md           |  40 +++++++-------
 docs/api/item-divider.md    |   2 +-
 docs/api/item-group.md      |   2 +-
 docs/api/item-option.md     |   4 +-
 docs/api/item-options.md    |   4 +-
 docs/api/item-sliding.md    |   2 +-
 docs/api/item.md            |   8 +--
 docs/api/list-header.md     |  10 ++--
 docs/api/list.md            |  10 ++--
 docs/api/loading.md         |  12 ++--
 docs/api/menu-button.md     |   4 +-
 docs/api/menu-toggle.md     |   6 +-
 docs/api/menu.md            |   4 +-
 docs/api/modal.md           |  10 ++--
 docs/api/nav.md             |   4 +-
 docs/api/picker.md          |  14 ++---
 docs/api/popover.md         |  14 ++---
 docs/api/progress-bar.md    |   2 +-
 docs/api/radio.md           |  22 ++++----
 docs/api/segment-button.md  |   4 +-
 docs/api/segment.md         |   2 +-
 docs/api/select-option.md   |   4 +-
 docs/api/select.md          |  24 ++++----
 docs/api/spinner.md         |   2 +-
 docs/api/split-pane.md      |   8 +--
 docs/api/tabs.md            |  12 ++--
 docs/api/text.md            |   2 +-
 docs/api/textarea.md        |  34 ++++++------
 docs/api/title.md           |  16 +++---
 docs/api/toast.md           |  16 +++---
 docs/api/toggle.md          |  24 ++++----
 docs/api/toolbar.md         |  20 +++----
 38 files changed, 246 insertions(+), 246 deletions(-)

diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index eed049a1a1c..382a9b6eaf7 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
 
-## Inline Action Sheets (Recommended)
+## インライン Action Sheets (推奨)
 
 `ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
 
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 6783b9e51e9..ab763f2d571 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 アラートは、ユーザーに情報を提示したり、入力を使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
 
-## Inline Alerts (Recommended)
+## インライン Alerts (推奨)
 
 `ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
 
diff --git a/docs/api/grid.md b/docs/api/grid.md
index 5a69a35f450..3670b8d5817 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -18,28 +18,28 @@ 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.
+グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の3つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ12列のレイアウトをベースにしています。カラムの数は、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).
+- グリッドは、すべての行と列のコンテナとして機能します。グリッドは、そのコンテナの幅を完全に占有します。
+  が、`fixed`プロパティを追加すると、画面サイズに応じた幅が設定されます。後述の[Fixed Grid](#fixed-grid)を参照してください。
+- 行は、列を適切に並べるための水平方向のグループです。
+- コンテンツは列の中に配置されるべきで、列だけが行の直属の子になることができる。
+- `size`プロパティは、1行あたりデフォルトの12列のうち、使用する列の数を示します。
+  つまり、`size="4"`をカラムに追加することで、グリッドの1/3、つまり12カラムのうち4カラムを占有することができます。
+- sizeに値を指定しないカラムは、自動的に等しい幅を持つようになります。例えば、4つのカラムは、それぞれ自動的に25％の幅になります。
+- カラムの幅はパーセンテージで設定されるため、常に流動的で親要素からの相対的なサイズになります。
+- 個々のカラムの間にはパディングがあります。しかし、パディングはグリッドから削除することができます。
+  カラムを表示するには、グリッドに `ion-no-padding` クラスを追加します。グリッドに適用できるその他のスタイルについては、[CSS Utilities](../layout/css-utilities) を参照してください。
+- グリッドの階層は5つあり、レスポンシブ・ブレークポイントごとに1つずつ、すべてのブレークポイント（特小）、小、中、大、特大が用意されています。
+- グリッドの階層は最小幅を基準としており、その階層とそれよりも大きい階層に適用されます。
+  (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
+- グリッドはCSS変数でカスタマイズすることができます。 [グリッドのカスタマイズ](#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).
+グリッドのデフォルトのブレークポイントとそれに対応するプロパティは、以下の表で定義されています。ブレイクポイントの値は、現時点ではカスタマイズすることができません。カスタマイズできない理由については、 [メディアクエリの変数](../theming/advanced#variables-in-media-queries) を参照してください。
 
 | Name | Value  | Width Property | Offset Property | Push Property | Pull Property | Description                          |
 | ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ |
@@ -52,16 +52,16 @@ 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/v7/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.
+グリッドはコンテナの幅を100%占有します。グリッドに `fixed` プロパティを追加することで、画面サイズに応じた幅を設定することができます。各ブレイクポイントのグリッドの幅は以下の表に記載されていますが、カスタマイズすることも可能です。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化することを確認できます。
 
 | Name | Value  | Description                                       |
 | ---- | ------ | ------------------------------------------------- |
@@ -76,72 +76,72 @@ import Fixed from '@site/static/usage/v7/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.
+カラムは、全体のカラム数のうち特定の数を占めるように特定のサイズに設定したり、コンテンツに応じて幅を変更したりすることができます。デフォルトのカラム数は12ですが、これはカスタマイズ可能です。詳しくは、下記の [カラム数](#number-of-columns) の項を参照してください。
 
-### 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.
+`size`を`"auto"`に設定することで、カラムはコンテンツの自然な幅に基づいたサイズを設定することができます。これは、カラムを特定のピクセル数のような絶対的な幅に設定するときに必要です。自動幅のカラムの隣にあるカラムは、行を埋めるようにリサイズされます。
 
 import SizeAuto from '@site/static/usage/v7/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.
+カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。
 
 import Size from '@site/static/usage/v7/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.
+`size`プロパティは、すべての [ブレークポイント](#default-breakpoints) の列幅を変更します。また、Columnでは、"size" の末尾にブレークポイント名を付加したいくつかのsizeプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムの幅を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムの幅が変化するのがわかります。
 
 import SizeResponsive from '@site/static/usage/v7/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.
+カラムは、`offset`プロパティを用いて右に移動させることができます。このプロパティは、カラムの左マージンを指定したカラムの数だけ増やします。また、その右側にカラムが存在する場合は、そのカラムを移動させます。
 
 import Offset from '@site/static/usage/v7/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.
+`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの左マージンを変更します。また、カラムには、"offset"の末尾にブレークポイント名が付加されたいくつかのoffsetプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムのオフセットを変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムのオフセットが変化するのを確認できます。
 
 import OffsetResponsive from '@site/static/usage/v7/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.
+`push`と`pull`のプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、指定された列数だけ列の `left` と `right` を調整し、列の並び替えを簡単に行うことができます。この場合、他のカラムが配置されている場所にカラムを移動させると、カラムが重なることになります。
 
 import PushPull from '@site/static/usage/v7/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.
+`push`と`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの位置を変更します。また、カラムには、"push" / "pull "の末尾にブレークポイント名を付加した `push` と `pull` プロパティがいくつかあります。これらのプロパティは、画面サイズに応じてカラムの位置を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、列の位置が変化するのがわかります。
 
 import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md';
 
@@ -149,38 +149,38 @@ import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/
 
 ## 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).
+行に異なるクラスを追加することで、すべての列を行の内側に垂直に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities#flex-container-properties) を参照してください。
 
 import VerticalAlignment from '@site/static/usage/v7/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).
+行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities.md#flex-container-properties) を参照してください。
 
 import HorizontalAlignment from '@site/static/usage/v7/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.
+組み込みのCSS変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。
 
-### 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.
+固定グリッドの幅は、CSS変数 `--ion-grid-width` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS変数を使用します。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化するのが確認できます。
 
 import Width from '@site/static/usage/v7/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.
+グリッドのカラム数は `--ion-grid-columns` というCSS変数で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。
 
 import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md';
 
@@ -188,9 +188,9 @@ import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/i
 
 ### 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.
+グリッドコンテナのpaddingは、CSS変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS変数を使用します。
 
-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.
+列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS変数を使用します。
 
 import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md';
 
diff --git a/docs/api/header.md b/docs/api/header.md
index b9ddc5aae2d..cb5565931a8 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -16,7 +16,7 @@ import Slots from '@site/static/auto-generated/header/slots.md';
 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.
+ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上の[ツールバー](./toolbar)のラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
 
 
 ## 基本的な使い方
@@ -26,18 +26,18 @@ import Basic from '@site/static/usage/v7/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).
+ヘッダーは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
 
 import Translucent from '@site/static/usage/v7/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".
+Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
 
 import Condense from '@site/static/usage/v7/header/condense/index.md';
 
@@ -46,9 +46,9 @@ import Condense from '@site/static/usage/v7/header/condense/index.md';
 
 ## フェードヘッダー
 
-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".
+多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの `collapse` プロパティを `"fade"` に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「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.
+この機能は、[Condensed Header](#condensed-header)と組み合わせることができます。collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用されるはずです。
 
 import Fade from '@site/static/usage/v7/header/fade/index.md';
 
@@ -57,7 +57,7 @@ import Fade from '@site/static/usage/v7/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.
+フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
 
 import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.md';
 
@@ -66,7 +66,7 @@ import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-targe
 
 ## 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.
+`"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。
 
 import NoBorder from '@site/static/usage/v7/header/no-border/index.md';
 
diff --git a/docs/api/icon.md b/docs/api/icon.md
index 2119d43ee71..14d903a5e5f 100644
--- a/docs/api/icon.md
+++ b/docs/api/icon.md
@@ -10,9 +10,9 @@ title: 'ion-icon'
   />
 </head>
 
-Icon is a simple component made available through the <a href="https://ionic.io/ionicons">Ionicons</a> library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
+Iconは、<a href="https://ionic.io/ionicons">Ionicons</a>ライブラリを通じて利用できるシンプルなコンポーネントで、すべてのIonic Frameworkアプリケーションにデフォルトでプリパッケージされています。Ioniconsのセットから任意のアイコン、またはカスタムSVGを表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。
 
-For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a>.
+利用可能なアイコンのリストは <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a> をご覧ください。
 
 ## 基本的な使い方
 
@@ -23,20 +23,20 @@ import Basic from '@site/static/usage/v7/icon/basic/index.md';
 
 ## アクセシビリティ
 
-Icons that are purely decorative content should have <code>aria-hidden="true"</code>. This will not visually hide the icon, but it will hide the element from assistive technology.
+純粋に装飾的なコンテンツであるアイコンは、<code>aria-hidden="true"</code>を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。
 
 ```html
 <ion-icon name="heart" aria-hidden="true"></ion-icon>
 ```
 
 
-If the icon is interactive, it should have alternate text defined by adding an <code>aria-label</code>.
+アイコンがインタラクティブな場合は、<code>aria-label</code>を追加することで代替テキストを定義する必要があります。
 
 ```html
 <ion-icon name="heart" aria-label="Favorite"></ion-icon>
 ```
 
-Alternatively, if the icon is inside of another element that it is describing, that element should have the <code>aria-label</code> added to it, and the icon should be hidden using <code>aria-hidden</code>.
+また、アイコンが説明する他の要素の中にある場合は、その要素に <code>aria-label</code> を付加し、 <code>aria-hidden</code> でアイコンを非表示とします。
 
 ```html
 <ion-button aria-label="Favorite">
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 16fa42922d4..b1641609eb5 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -41,9 +41,9 @@ import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite
 
 <CustomContent />
 
-## Usage with Virtual Scroll
+## 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.
+無限スクロールを機能させるには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content`のスクロールを無効にし、`.ion-content-scroll-host`クラスのターゲットで、どの要素コンテナがスクロールコンテナを担当するのかを指定する必要があります。
 
 ```html
 <ion-content scroll-y="false">
@@ -58,11 +58,11 @@ Infinite scroll requires a scroll container to function. When using a virtual sc
 
 ## アクセシビリティ
 
-Developers should assign the `role="feed"` attribute to the scrollable list of items that are added to or removed from as the user scrolls.
+開発者は、ユーザーがスクロールすると追加されたり削除されたりするスクロール可能なリストアイテムに `role="feed"` 属性を割り当てる必要があります。
 
-Individual list items should either have `role="article"` or use the `<article>` element directly.
+個々のリストアイテムは `role="article"` を持つか、`<article>` 要素を直接使用しなければならない。
 
-For example, when rendering a collection of items in an `ion-list`:
+例えば、`ion-list`でアイテムのコレクションをレンダリングする場合。
 
 ```html
 <ion-content role="feed">
@@ -82,7 +82,7 @@ For example, when rendering a collection of items in an `ion-list`:
 </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.
+その他の情報については、[ARIA: feed role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role) のドキュメントを参照してください。
 
 ## Interfaces
 
diff --git a/docs/api/input.md b/docs/api/input.md
index 81fc6fb431a..77b35899df7 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/input/basic/index.md';
 
 ## 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"`.
+input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
 
 import Types from '@site/static/usage/v7/input/types/index.md';
 
@@ -39,7 +39,7 @@ import Types from '@site/static/usage/v7/input/types/index.md';
 
 ## Label Placement
 
-Labels will take up the width of their content by default. 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
 
@@ -48,7 +48,7 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md
 
 ## 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.
+Inputsには、入力の操作方法に応じて、入力をクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、入力に `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力がぼかされた後、再度入力されるとクリアされます。 `type` が `"password"` に設定されている入力は、デフォルトで `clearOnEdit` が有効になっています。
 
 import Clear from '@site/static/usage/v7/input/clear/index.md';
 
@@ -57,9 +57,9 @@ import Clear from '@site/static/usage/v7/input/clear/index.md';
 
 ## Filled Inputs
 
-Material Design offers filled styles for an input. The `fill` property on the input can be set to either `"solid"` or `"outline"`.
+Material Design では、入力に塗りつぶしのスタイルが用意されています。入力の `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
-Since the `fill` styles visually defines the input container, inputs that use `fill` should not be used in `ion-item`.
+`fill` スタイルは入力コンテナを視覚的に定義するため、`fill` を使用する入力は `ion-item` で使用すべきではありません。
 
 import Fill from '@site/static/usage/v7/input/fill/index.md';
 
@@ -68,7 +68,7 @@ import Fill from '@site/static/usage/v7/input/fill/index.md';
 
 ## Helper & Error Text
 
-Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-input`. 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.
+ヘルパーテキストとエラーテキストは `helperText` と `errorText` プロパティを用いて入力の内部で使用することができます。エラーテキストは `ion-invalid` クラスが `ion-input` に追加されない限り表示されません。Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいて、このクラスを手動で追加する必要があります。
 
 import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
@@ -76,7 +76,7 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
 ## Input Counter
 
-The input counter is 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.
+Input Counterは、入力の下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
 
 import Counter from '@site/static/usage/v7/input/counter/index.md';
 
@@ -84,9 +84,9 @@ import Counter from '@site/static/usage/v7/input/counter/index.md';
 
 ## Filtering User Input
 
-Developers can use the `ionInput` event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters.
+開発者は `ionInput` イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。
 
-When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync.
+ステート変数に値を格納する場合、ステート変数と `ion-input` コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と `ion-input` コンポーネントの値が確実に同期されます。
 
 import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
@@ -96,7 +96,7 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 ### Colors
 
-Setting the `color` property changes the color palette for each input. On `ios` mode, this property changes the caret color. On `md` mode, this property changes the caret color and the highlight/underline color.
+`color`プロパティを設定すると、各入力のカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
 
 import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
@@ -104,33 +104,33 @@ import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
 ## CSSカスタムプロパティ
 
-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.
+Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
 
 import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md';
 
 <CSSProps />
 
-## Migrating from Legacy Input Syntax
+## レガシーな Input 構文からの移行
 
-A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-Developers can perform this migration one input at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者は、この移行を一度に1つの入力で実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### モダンな構文の使い方
 
-Using the modern syntax involves three steps:
+モダンシンタックスを使うには、3つのステップがあります。
 
-1. Remove `ion-label` and use the `label` property on `ion-input` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-input`.
-2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
-3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead.
+1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用する。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
+2. 入力固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
+3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
 
 import Migration from '@site/static/usage/v7/input/migration/index.md';
 
 <Migration />
 
-### Using the Legacy Syntax
+### レガシーシンタックスの使用
 
-Ionic uses heuristics to detect if an app is using the modern input syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-input` to `true` to force that instance of the input to use the legacy syntax.
+Ionicは、アプリが最新の入力構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、その入力のインスタンスにレガシー構文を使用するように強制できます。
 
 ## Interfaces
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index e4bf859f470..1e905decc9a 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -18,7 +18,7 @@ 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.
+アイテムディバイダは、リスト内の [アイテム](./item) を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。
 
 
 ## 基本的な使い方
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index e9f2a67862f..74e91cc46f2 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -16,7 +16,7 @@ import Slots from '@site/static/auto-generated/item-group/slots.md';
 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).
+アイテムグループとは、類似の[アイテム](./item)をまとめて整理するためのコンテナです。アイテムグループには、アイテムを複数のセクションに分けるための[アイテムディバイダー](./item-divider)を含めることができます。また、[スライドアイテム](./item-sliding)をグループ化するために使用することができます。
 
 ## 基本的な使い方
 
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index b1026fe8ec0..e9dcb580955 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -18,9 +18,9 @@ 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.
+アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。アイテムオプション](./item-options)の中に配置する必要があります。ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。
 
-See the [item sliding](./item-sliding) documentation for more information.
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index 2015247ff13..eb6e0164622 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -16,9 +16,9 @@ import Slots from '@site/static/auto-generated/item-options/slots.md';
 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).
+アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[startまたはend](#side-description)のいずれかに配置することができます。
 
-See the [item sliding](./item-sliding) documentation for more information.
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
 
 
 ## Side Description
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 508cf5a79fe..eb9cce4cd86 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -16,7 +16,7 @@ import Slots from '@site/static/auto-generated/item-sliding/slots.md';
 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.
+スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として [item](./item) コンポーネントが必要です。表示させるオプションはすべて [item options](./item-options) 要素に記述する必要があります。
 
 
 ## 基本的な使い方
diff --git a/docs/api/item.md b/docs/api/item.md
index 9a5be8aa390..cd440bb836c 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -81,7 +81,7 @@ import Media from '@site/static/usage/v7/item/media/index.md';
 
 ## 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"`.
+Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
 
 import Buttons from '@site/static/usage/v7/item/buttons/index.md';
 
@@ -122,11 +122,11 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md
 <CSSProps />
 
 
-### Input Highlight
+### Inputハイライト
 
-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`.
+input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、入力の下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `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.
+ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、入力のハイライトは `primary` カラーを使用します。入力が有効な場合は `success` カラーが使用され、無効な入力は `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。
 
 import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 4b4112547e7..547edd926fb 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -13,7 +13,7 @@ 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).
+リストヘッダーは、[リスト](./list)の内容を記述するために使用されるブロック要素です。アイテムディバイダー](./item-divider)とは異なり、リストヘッダーは[アイテム](./item)のリストの先頭で一度だけ使用する必要があります。
 
 ## 基本的な使い方
 
@@ -22,18 +22,18 @@ import Basic from '@site/static/usage/v7/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.
+リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。
 
 import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
 
 <Buttons />
 
 
-## List Header Lines
+## List Headerの下線
 
-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.
+リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。
 
 import Lines from '@site/static/usage/v7/list-header/lines/index.md';
 
diff --git a/docs/api/list.md b/docs/api/list.md
index 727b3c17285..9671d64d043 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -16,10 +16,10 @@ import Slots from '@site/static/auto-generated/list/slots.md';
 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.
+リストは、Text、Buttons、Toggleを含むこと [アイテム](./item) の複数の行で構成されています。
+アイコンやサムネイルなど、さまざまな機能を備えています。リストには一般的に、画像やテキストなど、類似したデータ内容を持つアイテムが含まれます。
 
-Lists support several interactions including swiping items to reveal options, dragging to [reorder](./reorder) items within the list, and deleting items.
+リストは、アイテムをスワイプしてオプションを表示したり、ドラッグしてリスト内のアイテムを[並び替え](./reorder)したり、アイテムを削除したりするなどの操作をサポートしています。
 
 ## 基本的な使い方
 
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/list/basic/index.md';
 
 ## 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.
+リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。
 
 import Inset from '@site/static/usage/v7/list/inset/index.md';
 
@@ -39,7 +39,7 @@ import Inset from '@site/static/usage/v7/list/inset/index.md';
 
 ## 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.
+リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左paddingで調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。
 
 import Lines from '@site/static/usage/v7/list/lines/index.md';
 
diff --git a/docs/api/loading.md b/docs/api/loading.md
index 8d05ebac381..67ea14d0d0f 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 また、ロードオプションの `duration` に表示するミリ秒数を渡すことで、特定の時間が経過した後にロードインジケータを自動的に解除するよう設定することもできます。
 
-### Inline (Recommended)
+### インラインロード (推奨)
 
 import Inline from '@site/static/usage/v7/loading/inline/index.md';
 
@@ -63,12 +63,12 @@ import Theming from '@site/static/usage/v7/loading/theming/index.md';
 :::
 
 ## アクセシビリティ
-  
-Ionic automatically sets Loading's `role` to [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role).
 
-If the `message` property is defined for Loading, then the `aria-labelledby` attribute will be automatically set to the message element's ID. Otherwise, `aria-labelledby` will not be set, and developers must provide an `aria-label` using the `htmlAttributes` property.
-  
-All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of Loading.
+Ionicは自動的にLoadingの`role`を[`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)に設定します。
+
+Loadingに`message`プロパティが定義されている場合、`aria-labelledby`属性は自動的にmessage要素のIDに設定されます。そうでない場合、`aria-labelledby`は設定されず、開発者は `htmlAttributes` プロパティを使用して `aria-label` を提供する必要があります。
+
+すべてのARIA属性は、Loadingの`htmlAttributes`プロパティにカスタム値を定義することによって、手動で上書きすることができます。
 
 ## Interfaces
 
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index 80056b9f287..e7e996d5720 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -18,9 +18,9 @@ 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.
+Menu Buttonコンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。
 
-See the [menu](./menu) documentation for more information.
+詳しくは、[menu](./menu)のドキュメントをご覧ください。
 
 
 ## プロパティ
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 950d2e8defe..fdb2eacc2cb 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -18,11 +18,11 @@ 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 Toggleコンポーネントは、メニューの開閉を切り替えるために使用することができます。
 
-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`.
+メニュートグルは、選択されたメニューが有効な場合にのみ表示されます。メニューが無効になっている場合や、分割ペインとして表示されている場合は、メニュートグルは非表示になります。常にメニュートグルを表示するには、`autoHide`プロパティを`false`に設定します。
 
-See the [menu](./menu#menu-toggle) documentation for more information.
+詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/menu.md b/docs/api/menu.md
index f7d7b8cedc7..c187d8cb8dc 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -33,7 +33,7 @@ import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
 
 ## Menu Toggle
 
-The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
+[ion-menu-toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
 
 import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
@@ -41,7 +41,7 @@ import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
 ## Menu Types
 
-The `type` property can be used to customize how menus display in your application.
+`type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
 
 import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
diff --git a/docs/api/modal.md b/docs/api/modal.md
index d344d8c1b57..8f91499180a 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -101,7 +101,7 @@ import CardExample from '@site/static/usage/v7/modal/card/basic/index.md';
 
 マップアプリのドロワーコンポーネントに似たシートモーダルエフェクトを作成します。シートモーダルを作成するには、`ion-modal` に `breakpoints` と `initialBreakpoint` プロパティを設定する必要があります。
 
-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. Note that the modal cannot be dismissed on swipe if no `0` breakpoint is included, but it can still be dismissed by pressing `Esc` or the hardware back button.
+`breakpoints`プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。 `breakpoints` プロパティが `[0, 0.5, 1]` の場合、シートをスワイプすると、モーダルの 0%、50%、100%を表示することができることを示します。モーダルが0%にスワイプされると、モーダルは自動的にディスクローズされます。 `0` ブレークポイントが含まれていない場合、スワイプ時にモーダルを解除することはできませんが、`Esc` またはハードウェアの戻るボタンを押すことで解除することができることに注意してください。
 
 `initialBreakpoint` プロパティは、シート モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。 `initialBreakpoint` の値は、 `breakpoints` 配列にも存在する必要があります。例えば、 `breakpoints` の値が `[0, 0.5, 1]` である場合、 `initialBreakpoint` の値が `0.5` であれば、 `breakpoints` 配列に `0.5` が存在するため有効であると考えられます。 `0.25` は `breakpoints` 配列に存在しないので、 `initialBreakpoint` の値は無効になります。
 
@@ -159,16 +159,16 @@ import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/in
 
 ## 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.
+`ion-modal`は、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、[ion-alert](./alert)や[ion-loading](./loading)などのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。
 
 import CustomDialogs from '@site/static/usage/v7/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.
+* `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。
+* カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。
 
 ## Interfaces
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 2d6736cb794..5f5d29e85b9 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -21,9 +21,9 @@ Navは、任意のコンポーネントをロードし、スタックに新し
 
 RouterOutletとは異なり、Navは特定のルーターに関連付けられていません。つまり、Navコンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリのURLに縛られないモーダルを持つことができるユースケースに適しています。
 
-## Using NavLink
+## 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.
+NavLinkは、Navと対話する際の簡略化されたAPIです。開発者は、コンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
 
 import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
 
diff --git a/docs/api/picker.md b/docs/api/picker.md
index da2fc22751a..d4cbc0b01cd 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -19,19 +19,19 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Pickerは、画面下にボタンと列の行を表示するダイアログです。アプリケーションのコンテンツの上部とビューポートの下部に表示されます。
 
-## Inline Pickers (Recommended)
+## インラインピッカー（推奨）
 
-`ion-picker` 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 Picker.
+`ion-picker`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ピッカーを表示するために必要なハンドラの数を減らすことができます。
 
 import Trigger from '@site/static/usage/v7/picker/inline/trigger/index.md';
 
 <Trigger />
 
-### Using `isOpen`
+### `isOpen` を使う
 
-The `isOpen` property on `ion-picker` allows developers to control the presentation state of the Picker from their application state. This means when `isOpen` is set to `true` the Picker will be presented, and when `isOpen` is set to `false` the Picker will be dismissed.
+`ion-picker` の `isOpen` プロパティにより、開発者はアプリケーションの状態からピッカーの表示状態を制御することができます。つまり、`isOpen` を `true` に設定するとピッカーが表示され、`isOpen` を `false` に設定するとピッカーは退場します。
 
-`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Picker is dismissed. Developers should listen for the `ionPickerDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-picker` from being tightly coupled with the state of the application. With a one way data binding, the Picker only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Picker 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.
+`isOpen` は一方通行のデータバインディングを使用しているため、ピッカーが終了したときに自動的に `false` に設定されることはありません。開発者は `ionPickerDidDismiss` または `didDismiss` イベントを待ち、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-picker`の内部がアプリケーションの状態と密に結合するのを防ぐためです。一方通行のデータバインディングでは、ピッカーはリアクティブ変数が提供するブーリアン値のみに関心を持つ必要があります。一方通行のデータバインディングでは、ピッカーはリアクティブ変数のブール値だけでなく、リアクティブ変数の存在も気にする必要があります。このため、非決定的な動作が発生し、アプリケーションのデバッグが困難になる可能性があります。
 
 import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md';
 
@@ -39,7 +39,7 @@ import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md';
 
 ## Controller Pickers
 
-The `pickerController` can be used in situations where more control is needed over when the Picker is presented and dismissed.
+`pickerController`は、ピッカーの表示・非表示をより細かく制御する必要がある場合に使用することができます。
 
 import Controller from '@site/static/usage/v7/picker/controller/index.md';
 
@@ -47,7 +47,7 @@ import Controller from '@site/static/usage/v7/picker/controller/index.md';
 
 ## マルチカラム
 
-The `columns` property can be used to display a Picker with multiple columns of different options.
+`columns`プロパティは、異なる選択肢を複数の列で表示するピッカーを表示するために使用することができます。
 
 import MultipleColumn from '@site/static/usage/v7/picker/multiple-column/index.md';
 
diff --git a/docs/api/popover.md b/docs/api/popover.md
index 2928cddcd19..f19288f8533 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -222,23 +222,23 @@ type PositionAlign = 'start' | 'center' | 'end';
 
 ## Performance
 
-### Mounting Inner Contents
+### Innerコンテンツのマウント
 
-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.
+インライン `ion-popover` のコンテンツは、閉じるとマウントされなくなります。このコンテンツのレンダリングにコストがかかる場合、開発者は `keepContentsMounted` プロパティを使用して、ポップオーバーがマウントされると同時にコンテンツをマウントすることができます。これにより、ポップオーバーが開いたときに内部コンテンツがすでにマウントされているため、アプリケーションの応答性を最適化することができます。
 
 import Mount from '@site/static/usage/v7/popover/performance/mount/index.md';
 
 <Mount />
 
-Developers should keep the following in mind when using `keepContentsMounted`:
+開発者は `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.
+- この機能は、JavaScriptフレームワークを使用する場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをポップオーバーに渡すことができ、コンテンツは自動的にレンダリングされます。
 
-- 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.
+- この機能はインラインポップオーバーでのみ機能します。 `popoverController`で作成されたポップオーバーは先に作成されないので、内部のコンテンツも作成されません。
 
-- Any JavaScript Framework lifecycle hooks on the inner component will run as soon as the popover is mounted, not when the popover is presented.
+- 内部コンポーネントの JavaScript Framework ライフサイクルフックは、ポップオーバーが表示されたときではなく、ポップオーバーがマウントされたときにすぐに実行されます。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index c1cce073098..a7ffce6ccb6 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -30,7 +30,7 @@ import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md
 
 ### 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.
+`buffer`プロパティが設定されている場合、バッファーストリームがアニメーションの円と共に表示され、アクティビティを示します。また、`buffer`プロパティの値は、目に見えるトラックの量によって表されます。もし `buffer` の値が `value` プロパティより小さければ、目に見えるトラックはありません。もし `buffer` が `1` に等しければ、バッファースリームは隠されます。
 
 import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md';
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index f527d76b2d4..71bb28ecb24 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -18,9 +18,9 @@ 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.
+ラジオは、[ラジオグループ](./radio-group)の中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
 
-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.
+ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、[checkboxes](./checkbox)を代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
 
 ## 基本的な使い方
 
@@ -49,9 +49,9 @@ import Justify from '@site/static/usage/v7/radio/justify/index.md';
 `ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
 :::
 
-## 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.
+デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの `allowEmptySelection` プロパティを使用することで変更することができ、ラジオを非選択にすることができます。
 
 import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md';
 
@@ -78,15 +78,15 @@ import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index
 
 <CSSParts />
 
-## Migrating from Legacy Radio Syntax
+## Legacy Radio Syntaxからの移行
 
-A simpler radio syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an radio, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-Developers can perform this migration one radio at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### モダンな構文の使い方
 
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-radio`. The placement of the label can be configured using the `labelPlacement` property on `ion-radio`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-radio`.
+最新の構文を使用するには、`ion-label`を削除して、`ion-radio`の内部にラベルを直接渡します。ラベルの配置は `ion-radio` の `labelPlacement` プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、`ion-radio` の `justify` プロパティを使用して制御することができます。
 
 import Migration from '@site/static/usage/v7/radio/migration/index.md';
 
@@ -94,12 +94,12 @@ import Migration from '@site/static/usage/v7/radio/migration/index.md';
   
 
 :::note
-In past versions of Ionic, `ion-item` was required for `ion-radio` to function properly. Starting in Ionic 7.0, `ion-radio` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-radio` to function properly.
+Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
 :::
 
-### Using the Legacy Syntax
+### レガシーシンタックスの使用
 
-Ionic uses heuristics to detect if an app is using the modern radio syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-radio` to `true` to force that instance of the radio to use the legacy syntax.
+Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
 
 
 
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index 71fab43698d..e40e73ef4e8 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -18,7 +18,7 @@ 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.
+セグメントボタンは、[segment](segment.md)の中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの `value` をセグメントボタンの `value` に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは1つだけです。
 
 
 ## 基本的な使い方
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/segment-button/basic/index.md';
 
 ## 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.
+`layout`プロパティは、デフォルトで `"icon-top"` に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は `layout` プロパティを `"icon-bottom"`, `"icon-start"`, `"icon-end"` に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、ラベルの末尾（LTRでは右、RTLでは左）に表示することができます。
 
 import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
 
diff --git a/docs/api/segment.md b/docs/api/segment.md
index b4682317c03..2046c1f258e 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -25,7 +25,7 @@ Segmentsは、関連するボタンのグループを水平方向の行に表示
 
 ## 基本的な使い方
 
-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.
+セグメントは[セグメントボタン](./segment-button)からなり、各ボタンには`value`プロパティが設定されています。セグメントの `value` プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。
 
 import Basic from '@site/static/usage/v7/segment/basic/index.md';
 
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index 722cc062068..397e60da5cd 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -18,9 +18,9 @@ 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.
+セレクトオプションは、セレクトの子要素となるコンポーネントです。定義された各オプションは、Selectダイアログに渡され表示されます。
 
-For usage examples, see the [Select](./select) documentation.
+使用例については、[Select](./select)のドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/select.md b/docs/api/select.md
index 37c37de7497..7219c41602b 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -87,7 +87,7 @@ import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/selec
 
 ## Label Placement
 
-Labels will take up the width of their content by default. 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+Labelsは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
 
@@ -103,9 +103,9 @@ import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
 
 ## Filled Selects
 
-Material Design offers filled styles for a select. The `fill` property on the select can be set to either `"solid"` or `"outline"`.
+Material Designでは、セレクトに塗りつぶしのスタイルが用意されています。セレクトの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
-Since the `fill` styles visually defines the select container, selects that use `fill` should not be used in `ion-item`.
+`fill` スタイルはセレクトコンテナを視覚的に定義するため、`fill` を使用するセレクトは `ion-item` で使用すべきではありません。
 
 import FillExample from '@site/static/usage/v7/select/fill/index.md';
 
@@ -159,7 +159,7 @@ import StylingSelectExample from '@site/static/usage/v7/select/customization/sty
 
 ## Typeahead Component
 
-Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
+Typeaheadやオートコンプリートの機能は、既存のIonicコンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。
 
 import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
 
@@ -186,27 +186,27 @@ interface SelectCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## Migrating from Legacy Select Syntax
+## Legacy Select Syntaxからの移行
 
-A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなselect構文が導入されました。この新しい構文は、selectの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者は、この移行を一度に1つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 
 ### モダンな構文の使い方
 
-Using the modern syntax involves two steps:
+モダンシンタックスを使うには、2つのステップがあります。
 
-1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`.
-2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`.
+1. ion-label` を削除して、代わりに `ion-select` の `label` プロパティを使用する。ラベルの配置は `ion-select` の `labelPlacement` プロパティを使用して設定することができる。
+2. fill` と `shape` の使い方を `ion-item` から `ion-select` に移動する。
 
 import Migration from '@site/static/usage/v7/select/migration/index.md';
 
 <Migration />
 
-### Using the Legacy Syntax
+### レガシーシンタックスの使用
 
-Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax.
+Ionicは、アプリがモダンなセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、その入力インスタンスでレガシー構文を使用するように強制できます。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index 48cc97ebdb7..bcfa6714394 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -23,7 +23,7 @@ Spinnerコンポーネントには、さまざまなアニメーションつき
 
 ## 基本的な使い方
 
-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.
+デフォルトのスピナーは、モードに基づいて決定されます。モードが `ios` の場合、スピナーは `"lines"` となり、モードが `md` の場合、スピナーは `"circular"` となります。 `name` プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。
 
 import Basic from '@site/static/usage/v7/spinner/basic/index.md';
 
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 5d58778e4cc..33fb56656a5 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -18,22 +18,22 @@ 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.
+分割ペインは、マルチビューレイアウトを作成する際に便利です。
+メニューのようなUI要素は、分割されたペインで表示することができます。ビューポートの幅が大きくなるにつれて表示されます。
 
 デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。
 
 ## 基本的な使い方
 
 :::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. 
+このデモでは `when` プロパティを `'xs'` に設定し、分割ペインが常に表示されるようにしています。小さなビューポートで分割ペインを折りたたみたい場合は、Ionicアプリケーションにこの設定は必要ありません。詳しくは、[ブレークポイントの設定](#setting-breakpoints)を参照してください。
 :::
 
 import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
 
 <Basic />
 
-## Setting Breakpoints
+## ブレイキング・ポイントを決める
 
 デフォルトでは、画面が992pxを超えると分割ペインが拡張表示されます。これをカスタマイズするには、 `when` プロパティにブレークポイントを渡します。`when` プロパティには、真偽値、有効なメディア・クエリー、またはIonicの事前定義サイズのいずれかを指定できます。
 
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index e5a4c236774..7a0d5df422a 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -17,8 +17,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Tabs are a top level navigation component to implement a tab-based navigation.
-The component is a container of individual [Tab](tab.md) components.
+タブは、タブベースのナビゲーションを実装するためのトップレベルのナビゲーションコンポーネントです。
+このコンポーネントは、個々の[Tab](tab.md)コンポーネントのコンテナである。
 
 `ion-tabs` コンポーネントはスタイルを持たず、ナビゲーションを処理するためのルータアウトレットとして動作します。また、UI フィードバックやタブを切り替えるための機構は提供しない。タブを切り替えるには、`ion-tabs` の直接の子として `ion-tab-bar` を用意しなければなりません。
 
@@ -28,13 +28,13 @@ The component is a container of individual [Tab](tab.md) components.
 
 :::note Framework Support
 
-Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components.
+Angular、React、Vueで `ion-tabs` を使用するには、 `ion-router-outlet` または `ion-nav` コンポーネントを使用する必要があります。
 
 :::
 
-## Usage with Router
+## ルーターとの併用
 
-Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.
+タブはIonicルーターと一緒に使うことで、タブベースのナビゲーションを実装することができます。タブバーとアクティブなタブは、urlに基づいて自動的に解決されます。これはタブナビゲーションで最も一般的なパターンです。
 
 import Router from '@site/static/usage/v7/tabs/router/index.md';
 
@@ -42,7 +42,7 @@ import Router from '@site/static/usage/v7/tabs/router/index.md';
 
 :::tip Best Practices
 
-Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
+Ionicでは、タブを使ったルーティングパターンのベストプラクティスに関するガイドを用意しています。 Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
 
 :::
 
diff --git a/docs/api/text.md b/docs/api/text.md
index da3a400977f..f2b3b3fc666 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v7/text/basic/index.md';
 
 ## テーマ
 
-The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
+テキストコンポーネントは、Ionicが提供するデフォルトの[colors](../../docs/theming/colors)のいずれかを変更することでカスタマイズすることが可能です。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 4e0424557c9..9b6b6fde43a 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -17,7 +17,7 @@ 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.
+textareaコンポーネントは、複数行のテキスト入力に使用されます。ネイティブの textarea 要素は、コンポーネントの内部でレンダリングされます。ネイティブのtextareaを制御することで、textareaコンポーネントのユーザーエクスペリエンスとインタラクティブ性を向上させることができます。
 
 ネイティブのtextarea要素とは異なり、Ionicのtextareaは要素内部のコンテンツからその値を読み込むことをサポートしていません。textareaの値は`value`属性で設定しなくてはなりません。
 
@@ -31,7 +31,7 @@ import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
 
 ## Label Placement
 
-Labels will take up the width of their content by default. 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
 
@@ -39,9 +39,9 @@ import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
 
 ## Filled Textareas
 
-Material Design offers filled styles for a textarea. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
+Material Designでは、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
-Since the `fill` styles visually defines the textarea container, textareas that use `fill` should not be used in `ion-item`.
+`fill` スタイルはテキストエリアのコンテナを視覚的に定義するため、`fill` を使用するテキストエリアは `ion-item` で使用すべきではありません。
 
 import Fill from '@site/static/usage/v7/textarea/fill/index.md';
 
@@ -49,7 +49,7 @@ import Fill from '@site/static/usage/v7/textarea/fill/index.md';
 
 ## Helper & Error Text
 
-Helper and error text can be used inside of a textarea with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-textarea`. 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.
+ヘルパーテキストとエラーテキストは、`helperText`と`errorText`プロパティを使ってテキストエリア内で使用することができます。エラーテキストは `ion-textarea` に `ion-invalid` クラスが追加されない限り表示されません。Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてこのクラスを手動で追加する必要があります。
 
 import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
 
@@ -57,7 +57,7 @@ import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
 
 ## Textarea Counter
 
-The textarea counter is text that displays under a textarea to notify the user of how many characters have been entered out of the total that the textarea 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.
+textareaカウンターは、textareaの下に表示されるテキストで、textareaが受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
 
 import Counter from '@site/static/usage/v7/textarea/counter/index.md';
 
@@ -65,7 +65,7 @@ import Counter from '@site/static/usage/v7/textarea/counter/index.md';
 
 ## Autogrow
 
-When the `autoGrow` property is set to `true`, the textarea will grow and shrink based on its contents.
+`autoGrow`プロパティが`true`に設定されている場合、テキストエリアはその内容に基づいて拡大・縮小します。
 
 import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md';
 
@@ -73,34 +73,34 @@ import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md
 
 ## Clear on Edit
 
-Setting the `clearOnEdit` property to `true` will clear the textarea after it has been blurred and then typed in again.
+`clearOnEdit`プロパティを`true`に設定すると、テキストエリアがぼかされた後、再度入力されるとクリアされます。
 
 import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.md';
 
 <ClearOnEditPlayground />
 
-## Migrating from Legacy Textarea Syntax
+## レガシーtextareaシンタックスからの移行
 
-A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an textarea, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなtextareaの構文が導入されました。この新しい構文は、textareaを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。
 
-Developers can perform this migration one textarea at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者はこの移行を一度に1つのtextareaで行うことができます。開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 
 ### モダンな構文の使い方
 
-Using the modern syntax involves three steps:
+モダンシンタックスを使うには、3つのステップがあります。
 
-1. Remove `ion-label` and use the `label` property on `ion-textarea` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-textarea`.
-2. Move textarea-specific properties from `ion-item` on to `ion-textarea`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
-3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-textarea` instead.
+1. `ion-label` を削除して、代わりに `ion-textarea` の `label` プロパティを使用する。ラベルの配置は `ion-textarea` の `labelPlacement` プロパティを使用して設定することができる。
+2. テキストエリア固有のプロパティを `ion-item` から `ion-textarea` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれます。
+3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-textarea` の `helperText` と `errorText` プロパティを使用します。
 
 import Migration from '@site/static/usage/v7/textarea/migration/index.md';
 
 <Migration />
 
-### Using the Legacy Syntax
+### レガシーシンタックスの使用
 
-Ionic uses heuristics to detect if an app is using the modern textarea syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-textarea` to `true` to force that instance of the textarea to use the legacy syntax.
+Ionicは、アプリが最新のtextarea構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-textarea`の`legacy`プロパティを`true`に設定することで、そのインスタンスのtextareaがレガシー構文を使用するように強制できます。
 
 ## テーマ
 
diff --git a/docs/api/title.md b/docs/api/title.md
index fc2ccaae3a7..748730e4ebf 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -18,7 +18,7 @@ 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.
+Titleは、[ツールバー](./toolbar)のタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。
 
 ## Basic
 
@@ -26,9 +26,9 @@ import Basic from '@site/static/usage/v7/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.
+大きなタイトルは、[content](./content)がスクロールコンテナの開始位置までスクロールされたときに表示されます。タイトルがヘッダーの後ろにスクロールされると、縮小されたタイトルがフェードインします。
 
 :::info
 
@@ -40,9 +40,9 @@ import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large
 
 <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.
+[buttons](./buttons.md)コンポーネントは、[`collapse`](./buttons.md#collapse)プロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。
 
 
 import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
@@ -51,11 +51,11 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsibl
 
 ## テーマ
 
-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.
+デフォルトでは、標準タイトルを含むツールバーは `opacity: 0` を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。
 
-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.
+標準タイトルのあるツールバーの背景色は、CSS変数に `--background` を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。
 
 ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
 
diff --git a/docs/api/toast.md b/docs/api/toast.md
index be9c0d370a4..a2c36d21ca6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -22,9 +22,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 トーストは、最近のアプリケーションでよく使われる小さな通知です。操作に関するフィードバックを提供したり、システムメッセージを表示したりするために使用されます。トーストは、アプリケーションのコンテンツの上に表示され、アプリケーションによって解除されると、アプリケーションとの対話を再開することができます。
 
-## Inline Toasts (Recommended)
+## インラインToasts (推奨)
 
-`ion-toast` 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 toast.
+`ion-toast`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。
 
 import InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/index.md';
 
@@ -32,9 +32,9 @@ import InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/
 
 ### Using `isOpen​`
 
-The `isOpen` property on `ion-toast` allows developers to control the presentation state of the toast from their application state. This means when `isOpen` is set to `true` the toast will be presented and when `isOpen` is set to `false` the toast will be dismissed.
+`ion-toast` の `isOpen` プロパティは、開発者がアプリケーションの状態からトーストの表示状態を制御できるようにするものです。つまり、`isOpen` を `true` に設定するとトーストが表示され、`isOpen` を `false` に設定するとトーストは破棄されます。
 
-`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the toast is dismissed. Developers should listen for the `ionToastDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-toast` from being tightly coupled with the state of the application. With a one way data binding, the toast only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the toast 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.
+`isOpen` は一方通行のデータバインディングを使用しているため、トーストが破棄されたときに自動的に `false` に設定されることはありません。開発者は `ionToastDidDismiss` または `didDismiss` イベントをリスニングして `isOpen` を `false` に設定する必要があります。この理由は、`ion-toast` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、トーストはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、トーストはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
 
 import InlineToastIsOpenExample from '@site/static/usage/v7/toast/inline/is-open/index.md';
 
@@ -56,13 +56,13 @@ import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
 
 <ButtonsPlayground />
 
-## 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.
+トーストは、ビューポートの上部、下部、中部に配置することができます。位置は作成時に渡すことができます。指定できる値は `top`, `bottom`, `middle` です。位置が指定されない場合、トーストはビューポートの一番下に表示されます。
 
-## Layout
+## レイアウト
 
-Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+トースト内のボタンコンテナは、`layout`プロパティを使用して、メッセージと同じ行に表示するか、別々の行に積み重ねて表示することができます。スタックレイアウトは、長いテキスト値を持つボタンで使用する必要があります。さらに、スタックトーストレイアウトのボタンは `side` の値として `start` または `end` のどちらかを使用できますが、両方を使用することはできません。
 
 import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index b9e462c2ebe..e1628f44307 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -18,7 +18,7 @@ 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.
+トグルは、1つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、`checked`プロパティを設定することで、プログラムによってチェックすることも可能です。
 
 ## 基本的な使い方
 
@@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/toggle/basic/index.md';
 
 ## 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.
+トグルは、`enableOnOffLabels`プロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。
 
 import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
 
@@ -38,7 +38,7 @@ import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
 
 ## Toggles in a List
 
-Toggles can also be used in a list view by using the [Item](./item) and [List](./list) components.
+[アイテム](./item)と[リスト](./list)コンポーネントを使用すると、リストビューでトグルを使用することも可能です。
 
 import List from '@site/static/usage/v7/toggle/list/index.md';
 
@@ -73,7 +73,7 @@ import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
 
 ## CSSカスタムプロパティ
 
-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.
+CSSカスタムプロパティは、標準CSSと組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの `width` と `height` を直接変更してトラックのサイズを変更し、`--handle-width` と `--handle-height` カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。
 
 import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.md';
 
@@ -81,21 +81,21 @@ import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.
 
 ### 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.
+トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのようなCSSプロパティでもスタイルを設定でき、CSSカスタムプロパティと組み合わせることも可能です。
 
 import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
-## Migrating from Legacy Toggle Syntax
+## レガシーなトグル構文からの移行
 
-A simpler toggle syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an toggle, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなトグル構文が導入されました。この新しい構文は、トグルの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### モダンな構文の使い方
 
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-toggle`. The placement of the label can be configured using the `labelPlacement` property on `ion-toggle`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-toggle`.
+最新の構文を使用するには、`ion-label`を削除して、`ion-toggle`の内部にラベルを直接渡します。ラベルの配置は `ion-toggle` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-toggle` の `justify` プロパティを使用して制御することができます。
 
 import Migration from '@site/static/usage/v7/toggle/migration/index.md';
 
@@ -103,12 +103,12 @@ import Migration from '@site/static/usage/v7/toggle/migration/index.md';
   
 
 :::note
-In past versions of Ionic, `ion-item` was required for `ion-toggle` to function properly. Starting in Ionic 7.0, `ion-toggle` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-toggle` to function properly.
+Ionic の過去のバージョンでは、`ion-toggle` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-toggle` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-toggle`が正しく機能するためには、`ion-item`はもはや必須ではありません。
 :::
 
-### Using the Legacy Syntax
+### レガシーシンタックスの使用
 
-Ionic uses heuristics to detect if an app is using the modern toggle syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-toggle` to `true` to force that instance of the toggle to use the legacy syntax.
+Ionicは、アプリが最新のトグル構文を使用しているかどうかを検出するためにヒューリスティックを使用しています。場合によっては、レガシー構文を使い続けることが望ましいこともあります。開発者は、`ion-toggle`の`legacy`プロパティを`true`に設定することで、そのトグルのインスタンスがレガシー構文を使用するように強制できます。
 
 ## Interfaces
 
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index 19f7dc3a8c6..989f2a6f630 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -18,14 +18,14 @@ 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.
+ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。コンテンツ](./content)内に配置された場合、ツールバーはコンテンツと一緒にスクロールします。
 
-Toolbars can contain several different components including titles, buttons, icons, back buttons, menu buttons, searchbars, segments, progress bars, and more.
+ツールバーには、タイトル、ボタン、アイコン、戻るボタン、メニューボタン、検索バー、セグメント、プログレスバーなど、さまざまなコンポーネントを含めることができます。
 
 
 ## 基本的な使い方
 
-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.
+ツールバーを正しく配置するために、[header](./header)または[footer](./footer)の内部に配置することをお勧めします。ツールバーをヘッダーに配置すると、コンテンツの上部に固定されて表示されます。フッターに配置された場合は、下側に固定されて表示されます。フルスクリーンのコンテンツは、ヘッダーやフッターにあるツールバーの後ろでスクロールします。 [title](./title) コンポーネントを使用すると、ツールバーの内側にテキストを表示することができます。
 
 import Basic from '@site/static/usage/v7/toolbar/basic/index.md';
 
@@ -34,9 +34,9 @@ import Basic from '@site/static/usage/v7/toolbar/basic/index.md';
 
 ## 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.
+ツールバーに配置するボタンは、[buttons](./buttons)コンポーネントの内部に配置する必要があります。ボタンコンポーネントは、名前付きの [スロット](#slots) を使ってツールバーの内側に配置することができます。スロットの `"primary"` と `"secondary"` は `ios` モードと `md` モードで異なる動作をします。
 
-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.
+buttons コンポーネントは、標準的な [ボタン](./button)、[戻るボタン](./back-button)、[メニューボタン](./menu-button)、またはそれらのいずれかをラップすることができます。ツールバーのボタンはデフォルトで透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例でバックボタンとメニューボタンに含まれているプロパティは表示目的であり、適切な使用方法についてはそれぞれのドキュメントを参照してください。
 
 import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
 
@@ -45,25 +45,25 @@ import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
 
 ## 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.
+[searchbar](./searchbar)は、ツールバーの中に配置することで、コンテンツを検索することができます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さを完全に占有します。
 
 import Searchbars from '@site/static/usage/v7/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.
+[セグメント](./segment)は、一般的にツールバーで、同じページ内の2つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。
 
 import Segments from '@site/static/usage/v7/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.
+[プログレスバー](./progress-bar)は、アプリで進行中のプロセスを示すローディングインジケータとして使用されます。プログレスバーは、ツールバーの下部に配置されるため、ツールバーの中の他のコンポーネントと一緒に配置することができます。
 
 import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 

From 986abad046b2ae91a997f19c025c0a4108abb845 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 16:58:00 +0900
Subject: [PATCH 253/469] fix(api): fixed spelling

---
 docs/api/accordion.md    |  4 ++--
 docs/api/action-sheet.md | 10 +++++-----
 docs/api/alert.md        | 10 +++++-----
 docs/api/checkbox.md     |  2 +-
 docs/api/datetime.md     |  2 +-
 docs/api/input.md        | 26 +++++++++++++-------------
 docs/api/item.md         |  6 +++---
 docs/api/radio.md        |  4 ++--
 docs/api/range.md        |  2 +-
 docs/api/searchbar.md    |  4 ++--
 docs/api/select.md       | 12 ++++++------
 docs/api/textarea.md     | 12 ++++++------
 docs/api/toggle.md       |  4 ++--
 13 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index b1d56d1cfd5..28a63064243 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -186,9 +186,9 @@ import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibili
 
 例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slotの高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。
 
-1. 遅延読み込みを行わない `img` 要素を使用する。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。
+1. 遅延読み込みを行わない `img` 要素を使用します。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。
 
-2. `ion-img` に最小の幅と高さを設定する。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して `ion-img` に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 `img` 要素を `loading="lazy"` と共に使用する場合にも有効です!
+2. `ion-img` に最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して `ion-img` に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 `img` 要素を `loading="lazy"` と共に使用する場合にも有効です!
 
 3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。
 
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 382a9b6eaf7..a67b6755494 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -10,7 +10,7 @@ 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はアプリのコンテンツの上に一連のオプションを表示するダイアログで、手動で解除する必要があります。iOSとAndroidのデバイスでの使用方法については、こちらをご覧ください。" />
+  <meta name="description" content="アクションシートはアプリのコンテンツの上に一連のオプションを表示するダイアログで、手動で解除する必要があります。iOSとAndroidのデバイスでの使用方法については、こちらをご覧ください。" />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
 
-## インライン Action Sheets (推奨)
+## インラインアクションシート (推奨)
 
 `ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
 
@@ -38,7 +38,7 @@ import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
 
 <IsOpen />
 
-## Controller Action Sheets
+## Controller アクションシート
 
 アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
 
@@ -48,7 +48,7 @@ import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
 
 ## Buttons
 
-Buttonの `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つButtonは、配列 `buttons` のどこに配置してもAction Sheetの最下部に表示されます。 Note: `destructive` roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてAction Sheetを破棄した場合、cancel role に設定されているhandlerが実行されます。
+Buttonの `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つButtonは、配列 `buttons` のどこに配置してもアクションシートの最下部に表示されます。 Note: `destructive` roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。
 
 Buttonは `ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これは `onDidDismiss` メソッドの戻り値にある `data` フィールドにデータを入力します。
 
@@ -62,7 +62,7 @@ import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/in
 
 ## テーマ
 
-Action Sheetはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
 
 ### スタイリング
 
diff --git a/docs/api/alert.md b/docs/api/alert.md
index ab763f2d571..6ab33863093 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -13,16 +13,16 @@ 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ダイアログは、入力を使用して情報を提示または収集します。カスタムアラートボタンメッセージは、アプリのコンテンツの上に表示され、手動で解除する必要があります。" />
+  <meta name="description" content="ion-alertダイアログは、Inputを使用して情報を提示または収集します。カスタムアラートボタンメッセージは、アプリのコンテンツの上に表示され、手動で解除する必要があります。" />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-アラートは、ユーザーに情報を提示したり、入力を使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
+アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
 
-## インライン Alerts (推奨)
+## インラインアラート(推奨)
 
 `ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
 
@@ -61,7 +61,7 @@ import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
 
 ## Inputs
 
-Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 `url`, `email`, `text` などの複数のtypeを混ぜて利用することはできます。 Alertのガイドラインに収まらない複雑なForm UIが必要な場合は、代わりにModal内でFormを構築することをお勧めします。
+Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 `url`, `email`, `text` などの複数のtypeを混ぜて利用することはできます。アラートのガイドラインに収まらない複雑なForm UIが必要な場合は、代わりにModal内でFormを構築することをお勧めします。
 
 ### Text Inputs Example
 
@@ -111,7 +111,7 @@ IonicのAngularアプリを構築する場合、スタイルはグローバル
 
 ## アクセシビリティ
 
-Ionicは、アラートの `role` を、入力やボタンがある場合は [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) に、何もない場合は [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) のいずれかに自動的に設定します。
+Ionicは、アラートの `role` を、Inputやボタンがある場合は [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) に、何もない場合は [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) のいずれかに自動的に設定します。
 
 アラートに対して `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header`が定義されていない場合は、`subHeader`要素がフォールバックとして使用されます。同様に、`aria-describedby`属性は、`message`要素のIDが定義されていれば自動的に設定されます。
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 91e950e5656..83b7b4cfcbe 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -90,7 +90,7 @@ Ionic 7.0では、よりシンプルなチェックボックス構文が導入
 
 開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
-### モダンな構文の使い方
+### 最新の構文の使い方
 
 最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。
 
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index e3f5fd4ef12..406b1016a05 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -142,7 +142,7 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U
 
 ### 時間サイクル
 
-`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は12時間のサイクルを使用する。
+`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は12時間のサイクルを使用します。
 
 時間サイクルには4つのタイプがあります。
 
diff --git a/docs/api/input.md b/docs/api/input.md
index 77b35899df7..45ebfb17394 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -48,7 +48,7 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md
 
 ## Clear Options
 
-Inputsには、入力の操作方法に応じて、入力をクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、入力に `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力がぼかされた後、再度入力されるとクリアされます。 `type` が `"password"` に設定されている入力は、デフォルトで `clearOnEdit` が有効になっています。
+Inputsには、入力の操作方法に応じて、Inputをクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Inputに `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されているInputは、デフォルトで `clearOnEdit` が有効になっています。
 
 import Clear from '@site/static/usage/v7/input/clear/index.md';
 
@@ -57,9 +57,9 @@ import Clear from '@site/static/usage/v7/input/clear/index.md';
 
 ## Filled Inputs
 
-Material Design では、入力に塗りつぶしのスタイルが用意されています。入力の `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
-`fill` スタイルは入力コンテナを視覚的に定義するため、`fill` を使用する入力は `ion-item` で使用すべきではありません。
+`fill` スタイルはInputコンテナを視覚的に定義するため、`fill` を使用するInputは `ion-item` で使用すべきではありません。
 
 import Fill from '@site/static/usage/v7/input/fill/index.md';
 
@@ -68,7 +68,7 @@ import Fill from '@site/static/usage/v7/input/fill/index.md';
 
 ## Helper & Error Text
 
-ヘルパーテキストとエラーテキストは `helperText` と `errorText` プロパティを用いて入力の内部で使用することができます。エラーテキストは `ion-invalid` クラスが `ion-input` に追加されない限り表示されません。Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいて、このクラスを手動で追加する必要があります。
+ヘルパーテキストとエラーテキストは `helperText` と `errorText` プロパティを用いてInputの内部で使用することができます。エラーテキストは `ion-invalid` クラスが `ion-input` に追加されない限り表示されません。Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいて、このクラスを手動で追加する必要があります。
 
 import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
@@ -76,7 +76,7 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
 ## Input Counter
 
-Input Counterは、入力の下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
+Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
 
 import Counter from '@site/static/usage/v7/input/counter/index.md';
 
@@ -96,7 +96,7 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 ### Colors
 
-`color`プロパティを設定すると、各入力のカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
+`color`プロパティを設定すると、各Inputのカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
 
 import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
@@ -114,23 +114,23 @@ import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.m
 
 Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-開発者は、この移行を一度に1つの入力で実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+開発者は、この移行を一度に1つのInputで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
-### モダンな構文の使い方
+### 最新の構文の使い方
 
-モダンシンタックスを使うには、3つのステップがあります。
+最新の構文を使うには、3つのステップがあります。
 
-1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用する。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
-2. 入力固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
+1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用します。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
+2. Input固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
 3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
 
 import Migration from '@site/static/usage/v7/input/migration/index.md';
 
 <Migration />
 
-### レガシーシンタックスの使用
+### レガシー構文の使用
 
-Ionicは、アプリが最新の入力構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、その入力のインスタンスにレガシー構文を使用するように強制できます。
+Ionicは、アプリが最新のInput構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、そのInputのインスタンスにレガシー構文を使用するように強制できます。
 
 ## Interfaces
 
diff --git a/docs/api/item.md b/docs/api/item.md
index cd440bb836c..c2e903ad622 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-アイテムは、テキスト、アイコン、アバター、画像、入力、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒に[list](./list)に配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。
+アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒に[list](./list)に配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。
 
 ## 基本的な使い方
 
@@ -124,9 +124,9 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md
 
 ### Inputハイライト
 
-input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、入力の下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。
+input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Inputの下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。
 
-ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、入力のハイライトは `primary` カラーを使用します。入力が有効な場合は `success` カラーが使用され、無効な入力は `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。
+ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、Inputのハイライトは `primary` カラーを使用します。Inputが有効な場合は `success` カラーが使用され、無効なInputは `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。
 
 import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 71bb28ecb24..623cb574545 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -84,7 +84,7 @@ Ionic 7.0では、よりシンプルなラジオ構文が導入されました
 
 開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
-### モダンな構文の使い方
+### 最新の構文の使い方
 
 最新の構文を使用するには、`ion-label`を削除して、`ion-radio`の内部にラベルを直接渡します。ラベルの配置は `ion-radio` の `labelPlacement` プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、`ion-radio` の `justify` プロパティを使用して制御することができます。
 
@@ -97,7 +97,7 @@ import Migration from '@site/static/usage/v7/radio/migration/index.md';
 Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
 :::
 
-### レガシーシンタックスの使用
+### レガシー構文の使用
 
 Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
 
diff --git a/docs/api/range.md b/docs/api/range.md
index 9674d47b539..462ecfa9f8f 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -114,7 +114,7 @@ A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the
 
 Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
-### モダンな構文の使い方
+### 最新の構文の使い方
 
 Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`.
 
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index afa040ed548..e7846d38821 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -94,11 +94,11 @@ import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/ind
 
 ### Android
 
-デフォルトでは、入力をタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からarriage returnに変更されます。
+デフォルトでは、Inputをタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からarriage returnに変更されます。
 
 ### iOS
 
-デフォルトでは、入力をタップするとキーボードが表示され、グレーのSubmitボタンに「return」のテキストが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、テキストが "return" から "go" に変わり、ボタンの色もグレーから青に変わります。また、`ion-searchbar` を `form` 要素でラップして、 `action` プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青いSubmitボタンが表示されるようになります。
+デフォルトでは、Inputをタップするとキーボードが表示され、グレーのSubmitボタンに「return」のテキストが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、テキストが "return" から "go" に変わり、ボタンの色もグレーから青に変わります。また、`ion-searchbar` を `form` 要素でラップして、 `action` プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青いSubmitボタンが表示されるようになります。
 
 ## Interfaces
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 7219c41602b..95ea384e4f2 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -193,20 +193,20 @@ Ionic 7.0では、よりシンプルなselect構文が導入されました。
 開発者は、この移行を一度に1つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 
-### モダンな構文の使い方
+### 最新の構文の使い方
 
-モダンシンタックスを使うには、2つのステップがあります。
+最新の構文を使うには、2つのステップがあります。
 
-1. ion-label` を削除して、代わりに `ion-select` の `label` プロパティを使用する。ラベルの配置は `ion-select` の `labelPlacement` プロパティを使用して設定することができる。
-2. fill` と `shape` の使い方を `ion-item` から `ion-select` に移動する。
+1. ion-label` を削除して、代わりに `ion-select` の `label` プロパティを使用します。ラベルの配置は `ion-select` の `labelPlacement` プロパティを使用して設定することができる。
+2. fill` と `shape` の使い方を `ion-item` から `ion-select` に移動します。
 
 import Migration from '@site/static/usage/v7/select/migration/index.md';
 
 <Migration />
 
-### レガシーシンタックスの使用
+### レガシー構文の使用
 
-Ionicは、アプリがモダンなセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、その入力インスタンスでレガシー構文を使用するように強制できます。
+Ionicは、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、そのInputインスタンスでレガシー構文を使用するように強制できます。
 
 ## プロパティ
 <Props />
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 9b6b6fde43a..fe8b5fcca55 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -73,24 +73,24 @@ import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md
 
 ## Clear on Edit
 
-`clearOnEdit`プロパティを`true`に設定すると、テキストエリアがぼかされた後、再度入力されるとクリアされます。
+`clearOnEdit`プロパティを`true`に設定すると、テキストエリアが編集削除された後、再度入力されるとクリアされます。
 
 import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.md';
 
 <ClearOnEditPlayground />
 
-## レガシーtextareaシンタックスからの移行
+## レガシーtextarea構文からの移行
 
 Ionic 7.0では、よりシンプルなtextareaの構文が導入されました。この新しい構文は、textareaを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。
 
 開発者はこの移行を一度に1つのtextareaで行うことができます。開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 
-### モダンな構文の使い方
+### 最新の構文の使い方
 
-モダンシンタックスを使うには、3つのステップがあります。
+最新の構文を使うには、3つのステップがあります。
 
-1. `ion-label` を削除して、代わりに `ion-textarea` の `label` プロパティを使用する。ラベルの配置は `ion-textarea` の `labelPlacement` プロパティを使用して設定することができる。
+1. `ion-label` を削除して、代わりに `ion-textarea` の `label` プロパティを使用します。ラベルの配置は `ion-textarea` の `labelPlacement` プロパティを使用して設定することができる。
 2. テキストエリア固有のプロパティを `ion-item` から `ion-textarea` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれます。
 3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-textarea` の `helperText` と `errorText` プロパティを使用します。
 
@@ -98,7 +98,7 @@ import Migration from '@site/static/usage/v7/textarea/migration/index.md';
 
 <Migration />
 
-### レガシーシンタックスの使用
+### レガシー構文の使用
 
 Ionicは、アプリが最新のtextarea構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-textarea`の`legacy`プロパティを`true`に設定することで、そのインスタンスのtextareaがレガシー構文を使用するように強制できます。
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index e1628f44307..5f2cae42e61 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -93,7 +93,7 @@ Ionic 7.0では、よりシンプルなトグル構文が導入されました
 
 開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
-### モダンな構文の使い方
+### 最新の構文の使い方
 
 最新の構文を使用するには、`ion-label`を削除して、`ion-toggle`の内部にラベルを直接渡します。ラベルの配置は `ion-toggle` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-toggle` の `justify` プロパティを使用して制御することができます。
 
@@ -106,7 +106,7 @@ import Migration from '@site/static/usage/v7/toggle/migration/index.md';
 Ionic の過去のバージョンでは、`ion-toggle` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-toggle` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-toggle`が正しく機能するためには、`ion-item`はもはや必須ではありません。
 :::
 
-### レガシーシンタックスの使用
+### レガシー構文の使用
 
 Ionicは、アプリが最新のトグル構文を使用しているかどうかを検出するためにヒューリスティックを使用しています。場合によっては、レガシー構文を使い続けることが望ましいこともあります。開発者は、`ion-toggle`の`legacy`プロパティを`true`に設定することで、そのトグルのインスタンスがレガシー構文を使用するように強制できます。
 

From ed4d3674e3dd90dcc6ac8d5417c2f4ae0d114f90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 18:01:14 +0900
Subject: [PATCH 254/469] feat(translation): partial retranslation

---
 docs/core-concepts/fundamentals.md            |   2 +-
 .../what-are-progressive-web-apps.md          |   4 +-
 docs/developing/android.md                    |   8 +-
 docs/developing/previewing.md                 |  28 ++---
 docs/reference/browser-support.md             |  10 +-
 docs/reference/versioning.md                  |   4 +-
 docs/theming/color-generator.md               |   4 +-
 docs/updating/6-0.md                          | 119 +++++++++---------
 docs/updating/7-0.md                          |  66 +++++-----
 docs/vue/overview.md                          |   4 +-
 sidebars.js                                   |   2 +-
 11 files changed, 125 insertions(+), 126 deletions(-)

diff --git a/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.md
index b98ed6d873e..1c73465725e 100644
--- a/docs/core-concepts/fundamentals.md
+++ b/docs/core-concepts/fundamentals.md
@@ -40,7 +40,7 @@ Webテクノロジで構築されたアプリ（Ionicアプリなど）の素晴
 
 Ionicの最も一般的な使用例の1つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOSとAndroidの両方のソフトウェア開発キット（SDK）は、完全なネイティブSDKアクセスを可能にしながら、あらゆるIonicアプリをレンダリングする [Web Views](webview.md) を提供します。
 
-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.
+<a href="https://capacitorjs.com/" target="_blank">Capacitor</a> や <a href="https://cordova.apache.org/" target="_blank">Cordova</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
 
 ## テーマ
 
diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/docs/core-concepts/what-are-progressive-web-apps.md
index e963be9cd96..2517935b7b1 100644
--- a/docs/core-concepts/what-are-progressive-web-apps.md
+++ b/docs/core-concepts/what-are-progressive-web-apps.md
@@ -18,8 +18,8 @@ title: Progressive Web Apps
 Progressive Web App (PWA) は、最新の Web 機能を使用して、ユーザーにアプリのようなエクスペリエンスを提供する Web アプリです。
 これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URLからアクセスでき、検索エンジンにインデックスされます。
 
-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.
+[Capacitor](https://capacitorjs.com)と連携して、すべてのユーザーに複数のデプロイ対象を提供することができます。
+アプリをPWAとしてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。
 
 Ionicでは、アプリストアへのリリースだけでなく、PWAとしてモバイルWebにデプロイすることも可能です。
 
diff --git a/docs/developing/android.md b/docs/developing/android.md
index 771c3b9ef15..8874bb90f0e 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -141,17 +141,17 @@ Cordovaがプログラムビルドをサポートするには、追加のセッ
    $ ionic capacitor add android
    ```
 
-   For Cordova, run the following:
+   Cordovaでは以下のように実行します。
 
    ```shell
    $ ionic cordova prepare android
    ```
 
-2. **Set the [Package ID](../reference/glossary.md#package-id).**
+2. **[Package ID](../reference/glossary.md#package-id) を設定します。**
 
-   For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
+Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId` プロパティを修正します。
 
-   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.
+Cordovaの場合は、`config.xml`ファイルを開き、ルート要素である `<widget>` の `id` 属性を変更します。詳しくは、[Cordovaのドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。
 
 ## Capacitorでの実行
 
diff --git a/docs/developing/previewing.md b/docs/developing/previewing.md
index 83ad3b7506e..a2f494f10e1 100644
--- a/docs/developing/previewing.md
+++ b/docs/developing/previewing.md
@@ -38,45 +38,45 @@ $ ionic serve
 
 `ionic serve` を起動したまま、アプリの開発を続けます。変更を保存すると、その変更が適用された状態でアプリがリロードされます。
 
-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).
+ネイティブ機能を実装する場合は、[Platform Detection](../core-concepts/cross-platform.md) を使用します。
+実機でテストする場合は、[iOS](ios.md) と [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.
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linuxでは`Ctrl+Shift+I`、Macでは`Cmd+Opt+I`を押して、Chrome開発者ツールを開きます。
 
 <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/.
+その他の機能および情報については、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.
+前提条件：Safariの詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。
 
 :::
 
-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`.
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safariの**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `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/.
+その他の機能および情報については、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.
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/LinuxではCtrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefoxの開発者ツールを開きます。
 
 <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/.
+その他の機能および情報については、https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/ を参照してください。
diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md
index 7f2682b5842..1b11c8063b2 100644
--- a/docs/reference/browser-support.md
+++ b/docs/reference/browser-support.md
@@ -27,15 +27,15 @@ Ionicの本来の目標は、HTML、CSS、JavaScriptといったWeb技術を使
 最新のプラットフォームの情報については [latest Android stats](https://developer.android.com/about/dashboards/) と [latest iOS stats](https://developer.apple.com/support/app-store/) をご確認ください。
 :::
 
-### A Note on Android Support
+### 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.
+Android 5.0から、WebviewはAndroidから独立して更新できる別のアプリケーションに移されました。これは、ほとんどのAndroid 5.0以上のデバイスがChromiumの最新バージョンを実行していることを意味します。しかし、ウェブビューを更新することができないAndroidデバイスがまだ存在しています。これらのウェブビューは、通常、デバイスが最初に出荷されたときに利用可能だったバージョンに留まっています。
 
-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.
+デバイスが実行しているWebViewのバージョンを調べるには、Chrome Dev Toolsを使用してアプリケーションを検査する際に、コンソールに`window.navigator.userAgent`を記録してください。
 
-## 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).
+Ionicはウェブ技術をベースにしているため、モバイルデバイスと同じようにデスクトップブラウザーでも動作します。デスクトップのレイアウトについては、[クロスプラットフォーム](../core-concepts/cross-platform.md#desktop)を参照してください。
 
 |   Browser   | Ionic v7 | Ionic v6 | Ionic v5 | Ionic v4 |
 | :---------: | :------: | :------: | :------: | :------: |
diff --git a/docs/reference/versioning.md b/docs/reference/versioning.md
index 7a698111179..7f046f84893 100644
--- a/docs/reference/versioning.md
+++ b/docs/reference/versioning.md
@@ -12,11 +12,11 @@ Ionic Frameworkは<a href="https://semver.org/" target="_blank">Semantic Version
 
 ### マイナーリリース
 
-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 6 weeks**, if any features or API changes were made.
+マイナーリリースは、新しい機能が追加されたり、APIが変更されたりした場合に公開されます。私たちは、リリースに自信を持てるよう、すべての変更点を徹底的にテストしますが、新しいコードには新しい問題が発生する可能性があります。マイナーバージョンのリリースは、機能追加やAPIの変更があった場合、**6週間ごと**に行う予定です。
 
 ### パッチリリース
 
-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 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.
+パッチリリースは、バグフィックスが含まれているが、APIが変更されておらず、破壊的な変更が導入されていない場合に公開されます。私たちは新しいパッチバージョンを**毎週**リリースする予定ですが、予定より早く、または遅くリリースする必要がある場合があります。パッチリリースでは、新機能による新たな問題を発生させることなく、既存のコードを修正できるように、パッチリリースは常にマイナーリリースより前に公開されます。
 
 ## Changelog
 
diff --git a/docs/theming/color-generator.md b/docs/theming/color-generator.md
index bc1d0ccd188..10b2704f82e 100644
--- a/docs/theming/color-generator.md
+++ b/docs/theming/color-generator.md
@@ -10,10 +10,10 @@ import ColorGenerator from '@components/page/theming/ColorGenerator';
   <title>カラージェネレーター: Ionicアプリのカスタムカラーをつくる</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."
+    content="カラージェネレーターでAndroidやiOSアプリのUIにカスタムカラーパレットを作成しましょう。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.
+アプリのUIにカスタムカラーパレットを作成します。色の16進数値を更新し、右のデモアプリで確認した後、生成されたコードをIonicプロジェクトに直接コピー＆ペーストしてください。
 
 <ColorGenerator />
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md
index 3ef03a1a1ca..01a1cf6663d 100644
--- a/docs/updating/6-0.md
+++ b/docs/updating/6-0.md
@@ -1,48 +1,48 @@
 ---
-title: Updating to 6.0
+title: 6.0へのアップデート
 ---
 
-# Updating from Ionic 5 to Ionic 6
+# Ionic 5 から Ionic 6 へのアップデート
 
 :::note
-This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Upgrading to Ionic 5 Guide](./5-0) before starting this guide.
+このガイドは、アプリを最新バージョンの Ionic 5 に更新済みであることを前提としています。このガイドを開始する前に、[Ionic 5 へのアップグレード ガイド](./5-0) に従っていることを確認してください。
 :::
 
-## 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:
+1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンのAngularに更新します。.
+2. Ionic6の最新バージョンに更新します。
 
 ```shell
 npm install @ionic/angular@6
 ```
 
-If you are using Ionic Angular Server, be sure to update that as well:
+Ionic Angular Serverを使用している場合は、それも必ず更新してください:
 
 ```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.
+3. `Config.set()` を削除します。そして代わりに `IonicModule.forRoot()` を使いましょう。くわしくは [Angular Config Documentation](../angular/config) をご覧ください。
+4. 以前に `@ionic/angular` からエクスポートされた `setupConfig` 関数の使用をすべて削除します。代わりに `IonicModule.forRoot()` で設定を行います。
 
 ### React
 
-1. Ionic 6 supports React 17+. Update to the latest version of React:
+1. Ionic 6 は React 17+ をサポートしています。Reactの最新バージョンに更新します:
 
 ```shell
 npm install react@latest react-dom@latest
 ```
 
-2. Update to the latest version of Ionic 6:
+2. 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`:
+3. `package.json` の `scripts` オブジェクトにある `test` フィールドを更新して、 `transformIgnorePatterns` を含めます:
 
 ```json
 "scripts": {
@@ -51,7 +51,7 @@ npm install @ionic/react@6 @ionic/react-router@6
 }
 ```
 
-4. Import and call `setupIonicReact` in your `App` component file. If you are also using `setupConfig`, pass your config to `setupIonicReact` instead:
+4. あなたの `App` コンポーネントで `setupIonicReact` を呼び出して下さい。もう `setupConfig` を利用している場合は、 `setupIonicReact` に置き換えてください:
 
 **Before**
 ```tsx title="App.tsx"
@@ -76,12 +76,12 @@ setupIonicReact({
 ```
 
 :::note
-Developers must import and call `setupIonicReact` even if they are not setting custom config.
+開発者は、 `setupIonicReact` カスタム構成を設定していない場合でも、インポートして呼び出す必要があります。
 :::
 
-See the [React Config Documentation](../react/config) for more examples.
+詳しくは [React Config Documentation](../react/config) をご覧ください。
 
-5. Update all controller imports from `@ionic/core` to `@ionic/core/components`. As an example, here is a migration for `menuController`:
+5.すべてのコントローラのインポートを `@ionic/core` から `@ionic/core/components` に更新します。例として、`menuController` のマイグレーションを紹介します。
 
 **Before**
 ```tsx
@@ -95,31 +95,31 @@ import { menuController } from '@ionic/core/components';
 
 ### Vue
 
-1. Ionic 6 supports Vue 3.0.6+. Update to the latest version of Vue:
+1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vueの最新バージョンに更新ください。
 
 ```shell
 npm install vue@3 vue-router@4
 ```
 
-2. For apps that use the Vue CLI, install Vue CLI 5:
+2. Vue CLIを使用するアプリの場合は、Vue CLI 5をインストールします。
 
 ```shell
 npm install -g @vue/cli@next
 ```
 
-Then, upgrade all Vue CLI plugins:
+次に、すべてのVue CLIプラグインをアップグレードします。
 
 ```shell
 vue upgrade --next
 ```
 
-3. Update to the latest version of Ionic 6:
+3. 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`:
+4. `package.json` の`jest.config.js` か `jest` のどちらかに `transformIgnorePatterns` を含めます。
 
 ```js title="jest.config.js"
 module.exports = {
@@ -137,15 +137,15 @@ module.exports = {
   }
 ```
 
-See the [Testing section below](#testing) for more information.
+詳しくは [Testing section below](#testing) をご覧ください。
 
-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.
+5. `@ionic/vue` からエクスポートしていた `setupConfig` 関数を削除してください。そして、設定するときは `IonicVue` を代わりに利用してください。詳しくは [Vue Config Documentation](../vue/config) をご覧ください。
 
-6. Rename the `IonRouter` type for `useIonRouter` to `UseIonRouterResult`.
+6. `useIonRouter` で利用してる型 `IonRouter` を `UseIonRouterResult` に変更してください。
 
-7. Rename the `IonKeyboardRef` type for `useKeyboard` to `UseKeyboardResult`.
+7. `useKeyboard` で利用してる型 `IonKeyboardRef` を `UseKeyboardResult` に変更してください。
 
-8. Rename any overlay event listeners to use the new format:
+8. すべてのオーバーレイイベントリスナーの名前を変更し、新しいフォーマットを使用するようにします。
 
 **Before**
 ```html
@@ -174,10 +174,10 @@ See the [Testing section below](#testing) for more information.
 ```
 
 :::note
-This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-picker`, `ion-popover`, and `ion-toast`.
+これらは `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-picker`, `ion-popover`, `ion-toast` に適用されます。
 :::
 
-9. Pass in an `ion-router-outlet` into any `ion-tabs` that are being used:
+9.  `ion-router-outlet` を `ion-tabs` の中にいれて利用します。
 
 **Before**
 ```html
@@ -216,7 +216,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
 </script>
 ```
 
-10. Additional routes inside of tabs should be re-written as sibling routes instead of child routes:
+10. タブ内の追加ルートは、子ルートではなく兄弟ルートとして書き直す必要があります。
 
 **Before**
 ```ts
@@ -294,41 +294,41 @@ const routes: Array<RouteRecordRaw> = [
 
 ### Core
 
-1. Update to the latest version of Ionic 6:
+1. 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.
+1. `placeholder`, `pickerOptions`, `pickerFormat`, `monthNames`, `monthShortNames`, `dayNames`, `dayShortNames`プロパティの使用をすべて削除してください。`ion-datetime` は、デバイスに設定されている言語と地域に応じて、コンポーネント内に表示される月名、日名、時刻を自動的にフォーマットするようになりました。詳細は、[ion-datetime Localization Documentation](../api/datetime#localization) を参照してください。
 
-2. Remove any usages of the `text` and `placeholder` CSS Shadow Parts.
+2. `text` と `placeholder` の CSS シャドウパーツの使用をすべて削除します。
 
-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.
+3. CSS変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSSプロパティのいずれかを使用することができます。
 
-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.
+4. `open` メソッドの使用はすべて削除します。datetime をオーバーレイで表示するには、 `ion-modal` または `ion-popover` コンポーネントの中に配置する。詳細は、[ion-datetime Usage Examples](../api/datetime#usage) を参照してください。
 
-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.
+5. `displayFormat` プロパティまたは `displayTimezone` プロパティの使用をすべて削除します。ionChange` イベントのペイロードで提供される UTC 文字列をパースするには、[date-fns](https://date-fns.org/) を使用することをお勧めします。例としては、[ion-datetime Parsing Dates Documentation](../api/datetime#parsing-dates) を参照してください。
 
 :::note
-See the [Datetime Migration Sample Application](https://github.com/ionic-team/datetime-migration-samples) for more migration examples.
+マイグレーション例は [Datetime Migration Sample Application](https://github.com/ionic-team/datetime-migration-samples) をご覧ください。
 :::
 
 ### 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.
+Ionic 6には、Ionicons 6が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
 
 ### Input
 
-Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead.
+`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
 
 ### 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):
+`ion-modal` は Shadow DOM を使用するようになりました。 `ion-modal` の内部をターゲットとするスタイルは、[ion-modal CSS Variables](../api/modal#css-custom-properties) または [ion-modal CSS Shadow Parts](../api/modal#css-shadow-parts) を使用して更新してください。
 
 **Before**
 ```css
@@ -354,7 +354,7 @@ 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):
+`ion-popover` は Shadow DOM を使用するようになりました。 `ion-popover` の内部をターゲットとするスタイルは、[ion-popover CSS Variables](../api/popover#css-custom-properties) または [ion-popover CSS Shadow Parts](../api/popover#css-shadow-parts) を使用するように更新してください。
 
 
 **Before**
@@ -389,19 +389,19 @@ ion-popover::part(content) {
 
 ### Radio
 
-Remove any usage of the `RadioChangeEventDetail` interface.
+`RadioChangeEventDetail` インターフェースのすべての使用法を削除します。
 
 ### Select
 
-Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead.
+`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
 
 ### Textarea
 
-Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead.
+`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
 
-### 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.
+Ionicがサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
 
 If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
 
@@ -414,15 +414,15 @@ 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.
+Ionic 6は、ESモジュールとして出荷されるようになりました。ESモジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jestでテストする開発者は、Jest 27の時点でJestがES Modulesを完全にサポートしていないため、Jestの設定を更新する必要があります。
 
-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.
+このアップデートでは、Babelを使用してIonicのESモジュールをJestが理解できるCommonJS (CJS) 形式にコンパイルする必要があります。JestがESモジュールをサポートするようになれば、この変更は必要なくなります。JestのESモジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
 
-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:
+新しいIonicアプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存のIonicアプリをお持ちの方は、以下の手順でJestを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`:
+1. Jest の設定に、関連する Ionic パッケージを含む `transformIgnorePatterns` フィールドを追加します。これは通常 `jest.config.js` または `package.json` の `jest` フィールドに含まれています。
 
 ```js title="jest.config.js"
 module.exports = {
@@ -441,10 +441,10 @@ module.exports = {
 ```
 
 :::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`.
+Ionic ReactまたはIonic Vueを使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic Reactの場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vueの場合は、 `@ionic/vue` と `@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:
+Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これはCRAの制限であり、Ionicがコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
 
 ```json title="package.json"
 "scripts": {
@@ -453,15 +453,14 @@ For developers using Create React App (CRA), there is currently no way to update
 }
 ```
 
-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`.
+1. `@babel/preset-env` が [file-relative configuration](https://babeljs.io/docs/en/config-files#file-relative-configuration) ではなく、 [project-wide configuration](https://babeljs.io/docs/en/config-files#project-wide-configuration) に含まれていることを確認します。これは通常、 `<project-root>/babel.config.json` で Babel 設定を定義することを意味します。
 
-2. If you have a `browserslist/test` field in `package.json` file, make sure it is set to `current node`.
+2. `package.json` ファイルに `browserslist/test` フィールドがある場合、それが `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/).
+[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティとCSS変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
 
+アップグレードに助けが必要な場合、 [Ionic Forum](https://forum.ionicframework.com/) にスレッドを立ててください。
diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index a6a4eca0875..6ed30f228b4 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -1,29 +1,29 @@
 ---
-title: Updating to 7.0
+title: 7.0へのアップデート
 ---
 
-# Updating from Ionic 6 to Ionic 7
+# Ionic 6 から Ionic 7 へのアップデート
 
 :::note
 Ionic 7 is in beta. Please report any issues on [the Ionic Framework GitHub Repo](https://github.com/ionic-team/ionic-framework).
 :::
 
 :::note
-This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
+このガイドでは、アプリを最新バージョンの Ionic 6 に更新済みであることを前提としています。このガイドを開始する前に、[Ionic 6 へのアップグレード ガイド](./6-0) に従っていることを確認してください。
 :::
 
-## Getting Started
+## はじめ方
 
 ### Angular
 
-1. Ionic 7 supports Angular 14+. 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 7:
+1. Ionic 7はAngular 14+に対応しています。 [Angular Update Guide](https://update.angular.io/)に従い、 Angularの最新バージョンにアップデートしてください。
+2. Ionic 7の最新バージョンにアップデートしてください。
 
 ```shell
 npm install @ionic/angular@next
 ```
 
-If you are using Ionic Angular Server, be sure to update that as well:
+Ionic Angular Serverを使用している場合は、必ずそちらも更新してください。
 
 ```shell
 npm install @ionic/angular@next @ionic/angular-server@next
@@ -31,13 +31,13 @@ npm install @ionic/angular@next @ionic/angular-server@next
 
 ### React
 
-1. Ionic 7 supports React 17+. Update to the latest version of React:
+1. Ionic 7はReact 17+に対応しています。Reactの最新バージョンにアップデートしてください。
 
 ```shell
 npm install react@latest react-dom@latest
 ```
 
-2. Update to the latest version of Ionic 7:
+2. Ionic 7の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/react@next @ionic/react-router@next
@@ -45,13 +45,13 @@ npm install @ionic/react@next @ionic/react-router@next
 
 ### Vue
 
-1. Ionic 7 supports Vue 3.0.6+. Update to the latest version of Vue:
+1. Ionic 7はVue 3.0.6+をサポートしています。Vueの最新バージョンにアップデートしてください。
 
 ```shell
 npm install vue@latest vue-router@latest
 ```
 
-3. Update to the latest version of Ionic 7:
+3. Ionic 7の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/vue@next @ionic/vue-router@next
@@ -59,19 +59,19 @@ npm install @ionic/vue@next @ionic/vue-router@next
 
 ### Core
 
-1. Update to the latest version of Ionic 7:
+1. Ionic 7の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/core@next
 ```
 
-## Updating Your Code
+## あなたのコードのアップデート
 
-### 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.
+Ionicがサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
 
-If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
+`browserslist` または `.browserslistrc` ファイルをお持ちの場合は、以下の内容で更新してください。
 
 ```
 Chrome >=79
@@ -82,36 +82,36 @@ Safari >=14
 iOS >=14
 ```
 
-### Types
+### 型
 
-1. `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
+1.  `ActionSheetAttributes`、`AlertAttributes`、`AlertTextareaAttributes`、`AlertInputAttributes`、`LoadingAttributes`、`ModalAttributes`、`PickerAttributes`、`PopoverAttributes`および `ToastAttributes` は削除されました。開発者は、代わりに `{ [key: string]: any }` を使用する必要があります。
 
 
 ### Checkbox
 
-1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--checkbox-background` and `--checkbox-background-checked`, respectively.
+1. CSS 変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--checkbox-background` と `--checkbox-background-checked` にリネームします。
 
 ### Datetime
 
-1. Remove any code that sets the `value` property to the empty string (`''`).
-2. Remove any code that accesses the time zone information on the `value` property. Datetime does not manage time zones, so any time zone information provided is ignored.
+1. `value` プロパティに空文字列(`''`)を設定するコードを削除します
+2.  `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetimeはタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
 
 ### Input
 
-1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
+1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの `detail` ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
 
 ### Modal
 
-1. Remove any usage of the `swipeToClose` property. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property to control when a modal can dismiss.
-2. Remove any code that sets the `canDismiss` property to `undefined`. The `canDismiss` property now defaults to `true`, so this code is no longer needed.
+1. `swipeToClose` プロパティの使用を削除します。 [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) プロパティを使用して、モーダルが解除できるタイミングを制御します。
+2. `canDismiss` プロパティを `undefined` に設定するコードをすべて削除します。 `canDismiss`プロパティのデフォルトが`true`になったので、このコードはもう必要ありません。
 
 ### Picker
 
-1. Remove any code that accesses `refresh` on `ion-picker-column`. Developers should use the `columns` property on `ion-picker` to refresh the view instead.
+1. `ion-picker-column` の `refresh` にアクセスするコードをすべて削除する。代わりに `ion-picker` の `columns` プロパティを使用してビューをリフレッシュする必要があります。
 
 ### Searchbar
 
-1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
+1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの`detail`ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
 
 ### Segment
 
@@ -119,7 +119,7 @@ iOS >=14
 
 ### Slides
 
-1. Remove `ion-slides`, `ion-slide`, and any associated types. These components have been removed in favor of using Swiper.js directly. The guides below contain more information about this migration:
+1. `ion-slides`、`ion-slide`、および関連する型を削除する。これらのコンポーネントは、Swiper.jsを直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
 
 [Angular Migration Guide](https://ionicframework.com/docs/angular/slides)<br />
 [React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
@@ -127,24 +127,24 @@ iOS >=14
 
 ### Textarea
 
-1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
+1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの`detail`ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
 
 
 ### Toggle
 
-1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--track-background` and `--track-background-checked`, respectively.
+1. CSS変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--track-background` と `--track-background-checked` にリネームします。
 
 ### Virtual Scroll
 
-1. Remove `ion-virtual-scroll` and any associated types. This component has been removed in favor of using virtual scroll solutions provided by JavaScript Frameworks. The guides below contain more information about this migration:
+`ion-virtual-scroll`とそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworksが提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
 
 [Angular Migration Guide](https://ionicframework.com/docs/angular/virtual-scroll)<br />
 [React Migration Guide](https://ionicframework.com/docs/react/virtual-scroll)<br />
 [Vue Migration Guide](https://ionicframework.com/docs/vue/virtual-scroll)
 
-## Need Help Upgrading?
+## アップグレードに助けが必要？
 
-Be sure to look at the [Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require user action are listed on this page.
+[Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) を必ず見てください。デフォルトのプロパティとCSS Variableの値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。
 
-If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).
+アップグレードのヘルプが必要な場合は、[Ionic Forum](https://forum.ionicframework.com/)にスレッドを投稿してください。
 
diff --git a/docs/vue/overview.md b/docs/vue/overview.md
index 6a3a77901f4..f5148e490a9 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -1,6 +1,6 @@
 ---
-title: 'Ionic Vue Overview'
-sidebar_label: Overview
+title: 'Ionic Vueの概要'
+sidebar_label: 概要
 ---
 
 <head>
diff --git a/sidebars.js b/sidebars.js
index 8585c10f30d..2d5d421aa3a 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -8,7 +8,7 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Upgrade Guides',
+      label: 'アップグレードガイド',
       collapsed: false,
       items: [
         'updating/7-0',

From 527908edba91e3355ed505f8ebcc3cd34de27577 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 21 Mar 2023 18:23:18 +0900
Subject: [PATCH 255/469] chore(): remove unused file

---
 docs/native-community.md | 199 ---------------------------------------
 1 file changed, 199 deletions(-)
 delete mode 100644 docs/native-community.md

diff --git a/docs/native-community.md b/docs/native-community.md
deleted file mode 100644
index 4c0a1dac70d..00000000000
--- a/docs/native-community.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: Cordovaコミュニティプラグイン
-sidebar_label: セットアップ
-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/) は、開発者がHTML、CSS、JavaScriptでネイティブモバイルアプリを構築できるようにするオープンソースのネイティブランタイムです。Ionic独自のネイティブランタイムである[Capacitor](https://capacitorjs.com/) と同様に、Cordovaではプラグインシステムを使用して、カメラ、キーボード、ジオロケーションなどのネイティブデバイス機能にアクセスすることができます。プラグインは、ネイティブコンポーネントへの JavaScript インターフェースを提供する少量のアドオンコードです。プラグインを使用すると、純粋なウェブアプリで利用できる機能以上に、アプリでネイティブデバイスの機能を使用できるようになります。
-
-IonicとCordovaを使用する開発者のために、Ionicアプリにネイティブ機能を簡単に追加できる、オープンソースのCordovaプラグイン用のTypeScriptラッパーコレクションを開発しました。 [Ionic Native](https://github.com/ionic-team/ionic-native)を参照してください。
-
-これらのプラグインは、Ionicコミュニティによって投稿され、メンテナンスされています。コミュニティメンバーは通常、問題の発見と修正に迅速に対応していますが、一部のプラグインは正常に機能しない場合があります。
-
-ネイティブプラグインのサポートとSLA、継続的なメンテナンス、セキュリティパッチを必要とするプロの開発者やチームには、一般的なネイティブユースケースのプラグインサポートやビルド済みソリューションなどの [プレミアムオプション](https://ionicframework.com/native) をご検討ください。
-<intro-end />
-
-:::note
-このドキュメントは、Ionic Framework 4.0.0以降でビルドされたアプリを対象としています。古い Ionic v3 プロジェクトについては、[こちら](https://ionicframework.com/docs/v3/native) を参照してください。
-:::
-
-## Capacitor サポート
-
-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).
-
-## 使い方
-
-すべてのプラグインは、ネイティブコード（Cordova）とTypeScriptコード（Ionic Native）の2つのコンポーネントを持っています。
-Cordovaプラグインは、共通のプラグインインターフェースと近代的な開発アプローチを提供するために、`Promise`または`Observable`でラップされています。
-
-[Camera plugin](native/camera.md) を例として、まずインストールします。
-
-````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>
-````
-
-次に、以下の様々なフレームワークの使用方法に従って、プラグインの使用を開始します。FAQについては、[こちら](native-faq.md)を参照してください。
-
-## Angular
-
-AngularアプリはCordovaまたはCapacitorを使用してネイティブモバイルアプリを構築することができます。プラグインを `@NgModule` でインポートして、Providers のリストに追加します。Angularの場合、インポートパスは `/ngx` で終わっている必要があります。Angularの変更検出は自動的に処理されます。
-
-```tsx
-// app.module.ts
-import { Camera } from '@awesome-cordova-plugins/camera/ngx';
-
-...
-
-@NgModule({
-  ...
-
-  providers: [
-    ...
-    Camera
-    ...
-  ]
-  ...
-})
-export class AppModule { }
-```
-
-プラグインを宣言した後は、他のサービスと同じようにインポートやインジェクションが可能です。
-
-```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アプリは、ネイティブモバイルアプリを構築するためにCapacitorを使用する必要があります。ただし、Ionic Native（したがって、Cordovaプラグイン）も引き続き使用可能です。
-
-```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
-```
-
-プラグインオブジェクトをインポートし、その静的メソッドを使用します。
-
-```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
-
-ES2015+ や TypeScript をターゲットとする Vanilla JavaScript アプリは、Cordova や Capacitor を使用してネイティブモバイルアプリを構築することができます。プラグインを使用するには、適切なパッケージからクラスをインポートし、その静的メソッドを使用します。
-
-```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));
-});
-```

From 4951d131365fe3d4cdb0664a64b715fa0455acf0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 21 Mar 2023 11:01:38 -0400
Subject: [PATCH 256/469] docs(modal): clarify swipeToClose migration (#2839)

---
 docs/updating/7-0.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index a6a4eca0875..d407e203724 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -102,7 +102,7 @@ iOS >=14
 
 ### Modal
 
-1. Remove any usage of the `swipeToClose` property. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property to control when a modal can dismiss.
+1. Remove any usage of the `swipeToClose` property. Card modals are swipeable by default, so you can remove `swipeToClose` if you want your card modal to remain swipeable. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property if you want to prevent a modal from dismissing.
 2. Remove any code that sets the `canDismiss` property to `undefined`. The `canDismiss` property now defaults to `true`, so this code is no longer needed.
 
 ### Picker

From 8c65f1adfd3d3949ff04d935d871ff8fddb699d9 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 21 Mar 2023 11:02:02 -0400
Subject: [PATCH 257/469] docs(select): fix typeahead search (#2840)

Co-authored-by: BlackHakwDC <BlackHakwDC@users.noreply.github.com>
---
 .../v6/select/typeahead/angular/modal-example_component_ts.md | 2 +-
 static/usage/v6/select/typeahead/demo.html                    | 2 +-
 static/usage/v6/select/typeahead/javascript.md                | 2 +-
 .../v6/select/typeahead/react/typeahead_component_tsx.md      | 2 +-
 .../usage/v6/select/typeahead/vue/typeahead_component_vue.md  | 2 +-
 .../v7/select/typeahead/angular/modal-example_component_ts.md | 4 ++--
 static/usage/v7/select/typeahead/demo.html                    | 4 ++--
 static/usage/v7/select/typeahead/javascript.md                | 2 +-
 .../v7/select/typeahead/react/typeahead_component_tsx.md      | 2 +-
 .../usage/v7/select/typeahead/vue/typeahead_component_vue.md  | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
index e1b536e723e..5631319f98c 100644
--- a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
@@ -60,7 +60,7 @@ export class TypeaheadComponent implements OnInit {
        */
       const normalizedQuery = searchQuery.toLowerCase(); 
       this.filteredItems = this.items.filter(item => {
-        return item.value.includes(normalizedQuery);
+        return item.text.toLowerCase().includes(normalizedQuery);
       });
     }
   }
diff --git a/static/usage/v6/select/typeahead/demo.html b/static/usage/v6/select/typeahead/demo.html
index 2f7410fb810..f4687ec9959 100644
--- a/static/usage/v6/select/typeahead/demo.html
+++ b/static/usage/v6/select/typeahead/demo.html
@@ -108,7 +108,7 @@
 
         const normalizedQuery = searchQuery.toLowerCase();
 
-        return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+        return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
       }
 
       /**
diff --git a/static/usage/v6/select/typeahead/javascript.md b/static/usage/v6/select/typeahead/javascript.md
index 247c8ed10f2..c7aa9352267 100644
--- a/static/usage/v6/select/typeahead/javascript.md
+++ b/static/usage/v6/select/typeahead/javascript.md
@@ -94,7 +94,7 @@
 
     const normalizedQuery = searchQuery.toLowerCase();
 
-    return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+    return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
   }
 
   /**
diff --git a/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
index 1192f3bc2a3..0df268e172b 100644
--- a/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
+++ b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
@@ -59,7 +59,7 @@ function AppTypeahead(props: TypeaheadProps) {
        */
       const normalizedQuery = searchQuery.toLowerCase();
       setFilteredItems(props.items.filter(item => {
-        return item.value.includes(normalizedQuery);
+        return item.text.toLowerCase().includes(normalizedQuery);
       }));
     }
   }
diff --git a/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
index c49e7113678..e80c0fc09cd 100644
--- a/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
@@ -89,7 +89,7 @@
            */
           const normalizedQuery = searchQuery.toLowerCase(); 
           filteredItems.value = props.items.filter(item => {
-            return item.value.includes(normalizedQuery);
+            return item.text.toLowerCase().includes(normalizedQuery);
           });
         }
       }
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
index 129db1ed94b..5631319f98c 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
@@ -7,7 +7,7 @@ import { Item } from './types';
   selector: 'app-typeahead',
   templateUrl: 'typeahead.component.html',
 })
-export class TypeaheadComponentt implements OnInit {
+export class TypeaheadComponent implements OnInit {
   @Input() items: Item[] = [];
   @Input() selectedItems: string[] = [];
   @Input() title = 'Select Items';
@@ -60,7 +60,7 @@ export class TypeaheadComponentt implements OnInit {
        */
       const normalizedQuery = searchQuery.toLowerCase(); 
       this.filteredItems = this.items.filter(item => {
-        return item.value.includes(normalizedQuery);
+        return item.text.toLowerCase().includes(normalizedQuery);
       });
     }
   }
diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html
index df815850f89..9fa9bb8e5af 100644
--- a/static/usage/v7/select/typeahead/demo.html
+++ b/static/usage/v7/select/typeahead/demo.html
@@ -13,7 +13,7 @@
   <body>
     <ion-app>
       <ion-content color="light">
-        <div class="container">
+        <div class="container">
           <ion-list inset="true">
             <ion-item button="true" detail="false" id="select-fruits">
               <ion-label>Favorite Fruits</ion-label>
@@ -108,7 +108,7 @@
 
         const normalizedQuery = searchQuery.toLowerCase();
 
-        return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+        return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
       }
 
       /**
diff --git a/static/usage/v7/select/typeahead/javascript.md b/static/usage/v7/select/typeahead/javascript.md
index 9d5e5f7bc4a..51438ee8d84 100644
--- a/static/usage/v7/select/typeahead/javascript.md
+++ b/static/usage/v7/select/typeahead/javascript.md
@@ -94,7 +94,7 @@
 
     const normalizedQuery = searchQuery.toLowerCase();
 
-    return fruits.filter(fruit => fruit.value.includes(normalizedQuery));
+    return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
   }
 
   /**
diff --git a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
index 7c0f89d905e..c87cc1d926b 100644
--- a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
+++ b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
@@ -59,7 +59,7 @@ function AppTypeahead(props: TypeaheadProps) {
        */
       const normalizedQuery = searchQuery.toLowerCase();
       setFilteredItems(props.items.filter(item => {
-        return item.value.includes(normalizedQuery);
+        return item.text.toLowerCase().includes(normalizedQuery);
       }));
     }
   }
diff --git a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
index 486bb000586..07bac7f44e5 100644
--- a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
@@ -88,7 +88,7 @@
            */
           const normalizedQuery = searchQuery.toLowerCase(); 
           filteredItems.value = props.items.filter(item => {
-            return item.value.includes(normalizedQuery);
+            return item.text.toLowerCase().includes(normalizedQuery);
           });
         }
       }

From 45f7febd0d289cec74f3aa37deec13ae17f8b691 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 21 Mar 2023 17:19:56 -0400
Subject: [PATCH 258/469] docs(updating): clean up verbiage and broken links on
 migration guides (#2842)

---
 docs/updating/4-0.md | 28 ++++++++++++++++------------
 docs/updating/5-0.md | 22 +++++++++++-----------
 docs/updating/6-0.md | 14 +++++++++-----
 docs/updating/7-0.md | 10 +++++++---
 4 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/docs/updating/4-0.md b/docs/updating/4-0.md
index 26013aecfeb..ac769548707 100644
--- a/docs/updating/4-0.md
+++ b/docs/updating/4-0.md
@@ -1,13 +1,17 @@
 ---
-title: Updating to 4.0
+title: Updating to v4
 ---
 
-# Updating from Ionic 1-3 to Ionic 4
+# Updating to Ionic 4
 
-## Migrating from Ionic 3.0 to Ionic 4.0
+## Updating from Ionic 3 to 4
 
 :::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.
+This guide assumes that you have already updated your app to the latest version of Ionic 3. If you are using Ionic 1 or 2, Make sure to follow the [Updating from Ionic 1 to 4 Guide](#updating-from-ionic-1-to-4) instead.
+:::
+
+:::info Breaking Changes
+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-framework/blob/main/BREAKING_ARCHIVE/v4.md) in the Ionic Framework repository.
 :::
 
 We suggest the following general process when migrating an existing application from Ionic 3 to 4:
@@ -32,7 +36,7 @@ In Ionic 4, the package name is `@ionic/angular`. Uninstall Ionic 3 and install
 
 ```shell
 $ npm uninstall ionic-angular
-$ npm install @ionic/angular
+$ npm install @ionic/angular@v4-lts
 ```
 
 While migrating an app, update the imports from `ionic-angular` to `@ionic/angular`.
@@ -243,11 +247,11 @@ Since v4 moved to Custom Elements, there's been a significant change to the mark
 
 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
+## Updating from Ionic 1 to 4
 
-### Ionic 1.0 to Ionic 4.0: What’s Involved?
+### Ionic 1 to Ionic 4: 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.
+Migrating from Ionic 1 to Ionic 4 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.
 
@@ -261,9 +265,9 @@ Here are some considerations to review before beginning the upgrade:
 
 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 Ionic 1 app is stable, create a new Ionic 4 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.
+Once the team is comfortable that the Ionic 4 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
 
@@ -271,8 +275,8 @@ Please reference official [Angular upgrade guide](https://angular.io/guide/upgra
 
 ### 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!
+Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 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.
+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 training, architecture reviews, and migration assistance.
diff --git a/docs/updating/5-0.md b/docs/updating/5-0.md
index eecf8e47fd8..6a5f621b4e9 100644
--- a/docs/updating/5-0.md
+++ b/docs/updating/5-0.md
@@ -1,37 +1,37 @@
 ---
-title: Updating to 5.0
+title: Updating to v5
 ---
 
-# Updating from Ionic 4 to Ionic 5
+# Updating from Ionic 4 to 5
 
-Migrating an app from 4.x to 5.x requires a few updates to the API properties, CSS utilities, and the installed package dependencies.
+Migrating an app from Ionic 4 to 5 requires a few updates to the API properties, CSS utilities, and the installed package dependencies.
 
 :::note
-This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Upgrading to Ionic 4 Guide](./4-0) before starting this guide.
+This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide.
 :::
 
-### 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.
+:::info Breaking Changes
+For a **complete list of breaking changes** from Ionic 4 to Ionic 5, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md) in the Ionic Framework repository.
+:::
 
 ### Packages and Dependencies
 
 For Angular based projects, you can simply run:
 
 ```shell
-npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save
+npm install @ionic/angular@v5-lts @ionic/angular-toolkit@4.0.0 --save
 ```
 
 For React projects, you can run:
 
 ```shell
-npm install @ionic/react@latest @ionic/react-router@latest ionicons@latest
+npm install @ionic/react@v5-lts @ionic/react-router@v5-lts ionicons@5.5.3
 ```
 
 For Stencil / vanilla JS projects, you can run:
 
 ```shell
-npm i @ionic/core@latest --save
+npm i @ionic/core@v5-lts --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.
\ No newline at end of file
+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.
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md
index 3ef03a1a1ca..f2d60a7647a 100644
--- a/docs/updating/6-0.md
+++ b/docs/updating/6-0.md
@@ -1,11 +1,15 @@
 ---
-title: Updating to 6.0
+title: Updating to v6
 ---
 
-# Updating from Ionic 5 to Ionic 6
+# Updating from Ionic 5 to 6
 
 :::note
-This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Upgrading to Ionic 5 Guide](./5-0) before starting this guide.
+This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide.
+:::
+
+:::info Breaking Changes
+For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) in the Ionic Framework repository.
 :::
 
 ## Getting Started
@@ -190,7 +194,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
 <script>
   import { IonTabs, IonTabBar } from '@ionic/vue';
   import { defineComponent } from 'vue';
-  
+
   export default defineComponent({
     components: { IonTabs, IonTabBar }
   });
@@ -209,7 +213,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
 <script>
   import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
   import { defineComponent } from 'vue';
-  
+
   export default defineComponent({
     components: { IonTabs, IonTabBar, IonRouterOutlet }
   });
diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index d407e203724..a1c553999f4 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -1,15 +1,19 @@
 ---
-title: Updating to 7.0
+title: Updating to v7
 ---
 
-# Updating from Ionic 6 to Ionic 7
+# Updating from Ionic 6 to 7
 
 :::note
 Ionic 7 is in beta. Please report any issues on [the Ionic Framework GitHub Repo](https://github.com/ionic-team/ionic-framework).
 :::
 
 :::note
-This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
+This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Updating to Ionic 6 Guide](./6-0) before starting this guide.
+:::
+
+:::info Breaking Changes
+For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) in the Ionic Framework repository.
 :::
 
 ## Getting Started

From 079ca83a117fb08ec47d0c65c0ccae96b51de226 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 22 Mar 2023 11:43:37 +0900
Subject: [PATCH 259/469] fix(translate): proofread the translation of DeepL

---
 scripts/data/translated-cache.json | 806 ++++++++++++++---------------
 1 file changed, 403 insertions(+), 403 deletions(-)

diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
index 10a944ef262..b982378f777 100644
--- a/scripts/data/translated-cache.json
+++ b/scripts/data/translated-cache.json
@@ -1,35 +1,35 @@
 {
   "cache": {
-    "If `true`, the accordion group cannot be interacted with.": "`true`の場合、アコーディオングループと対話することができない。",
+    "If `true`, the accordion group cannot be interacted with.": "`true`の場合、アコーディオングループと対話することができません。",
     "The value of the accordion group.": "アコーディオングループの値です。",
-    "The mode determines which platform styles to use.": "モードは、どのプラットフォームのスタイルを使用するかを決定します。",
-    "Emitted when the value property has changed.": "valueプロパティが変更されたときに発行される。",
+    "The mode determines which platform styles to use.": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+    "Emitted when the value property has changed.": "valueプロパティが変更されたときに発行されます。",
     "If `true`, the accordion group can have multiple accordion components expanded at the same time.": "`true`の場合、アコーディオングループは複数のアコーディオンコンポーネントを同時に展開することができます。",
-    "Describes the expansion behavior for each accordion. Possible values are `\"compact\"` and `\"inset\"`. Defaults to `\"compact\"`.": "各アコーディオンの拡張動作を記述する。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
+    "Describes the expansion behavior for each accordion. Possible values are `\"compact\"` and `\"inset\"`. Defaults to `\"compact\"`.": "各アコーディオンの拡張動作を記述します。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
     "If `true`, the accordion group cannot be interacted with, but does not alter the opacity.": "`true`の場合、アコーディオングループはインタラクティブに操作できないが、不透明度は変更されない。",
     "If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.": "`true`の場合、アコーディオングループ内のすべてのアコーディオンが拡大・縮小時にアニメーションを行います。",
-    "The wrapper element for the content slot.": "コンテンツスロットのラッパー要素。",
+    "The wrapper element for the content slot.": "content slotのラッパー要素。",
     "The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.": "使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。",
-    "The wrapper element for the header slot.": "ヘッダースロットのラッパーの要素です。",
-    "If `true`, the accordion cannot be interacted with.": "`true`の場合、アコーディオンは対話することができない。",
+    "The wrapper element for the header slot.": "header slotのラッパーの要素です。",
+    "If `true`, the accordion cannot be interacted with.": "`true`の場合、アコーディオンは対話することができません。",
     "Content is placed at the top and is used to expand or collapse the accordion item.": "コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。",
-    "The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.": "トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `'end'` です。",
+    "The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.": "トグルアイコンを配置する `ion-item` の内側のslot。デフォルトは `'end'` です。",
     "Content is placed below the header and is shown or hidden based on expanded state.": "コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。",
     "If `true`, the accordion cannot be interacted with, but does not alter the opacity.": "`true`の場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。",
     "The value of the accordion. Defaults to an autogenerated value.": "アコーディオンの値です。デフォルトは自動生成された値です。",
     "The expanded element. Can be used in combination with the `header` and `content` parts (i.e. `::part(header expanded)`).": "拡張された要素です。ヘッダ`とコンテンツ`の部分と組み合わせて使用することができます（例：`::part(header expanded)`）。",
     "Title for the action sheet.": "アクションシートのタイトルです。",
-    "Emitted after the alert has dismissed.": "アラートが解除された後に発せられる。",
-    "Emitted after the alert has presented.": "アラートが提示された後に発せられる。",
-    "Emitted before the alert has presented.": "アラートが提示される前に発せられる。",
+    "Emitted after the alert has dismissed.": "アラートが解除された後に発行されます。",
+    "Emitted after the alert has presented.": "アラートが提示された後に発行されます。",
+    "Emitted before the alert has presented.": "アラートが提示される前に発行されます。",
     "Animation to use when the action sheet is dismissed.": "アクションシートが解除されたときに使用するアニメーションです。",
-    "Present the action sheet overlay after it has been created.": "アクションシートのオーバーレイを作成後に提示する。",
-    "Returns a promise that resolves when the action sheet will dismiss.": "アクションシートが解散するタイミングを解決するプロミスを返します。",
+    "Present the action sheet overlay after it has been created.": "アクションシートのオーバーレイを作成後に提示します。",
+    "Returns a promise that resolves when the action sheet will dismiss.": "アクションシートが解散するタイミングを解決するPromiseを返します。",
     "An array of buttons for the action sheet.": "アクションシートのボタンの配列です。",
-    "Dismiss the action sheet overlay after it has been presented.": "アクションシートのオーバーレイが提示された後、それを解除する。",
-    "Emitted before the alert has dismissed.": "アラートが解除される前に発せられる。",
-    "Returns a promise that resolves when the action sheet did dismiss.": "アクションシートが解散したときに解決するプロミスを返します。",
-    "If `true`, the action sheet will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、アクションシートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Dismiss the action sheet overlay after it has been presented.": "アクションシートのオーバーレイが提示された後、それを解除します。",
+    "Emitted before the alert has dismissed.": "アラートが解除される前に発行されます。",
+    "Returns a promise that resolves when the action sheet did dismiss.": "アクションシートが解散したときに解決するPromiseを返します。",
+    "If `true`, the action sheet will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、アクションシートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
     "Subtitle for the action sheet.": "アクションシートのサブタイトルです。",
     "If `true`, the keyboard will be automatically dismissed when the overlay is presented.": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
     "Animation to use when the action sheet is presented.": "アクションシートの提示時に使用するアニメーションです。",
@@ -38,7 +38,7 @@
     "Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.": "カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
     "If `true`, the action sheet will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとアクションシートが解除されます。",
     "Background of the action sheet button": "アクションシートボタンの背景",
-    "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.": "アクションシートボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。",
+    "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.": "アクションシートボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。",
     "Minimum height of the action sheet": "アクションシートの最小高さ",
     "Minimum width of the action sheet": "アクションシートの最小幅",
     "Color of the action sheet button when tabbed to": "にタブで移動したときのアクションシートのボタンの色。",
@@ -49,7 +49,7 @@
     "height of the action sheet": "アクションシートの高さ",
     "Opacity of the action sheet button background when pressed": "アクションシートボタンが押されたときの背景の不透明度",
     "Opacity of the action sheet button background when tabbed to": "にタブしたときのアクションシートボタンの背景の不透明度。",
-    "Maximum height of the action sheet": "アクションシートの最大高さ",
+    "Maximum height of the action sheet": "アクションシートの最大の高さ",
     "Color of the action sheet text": "アクションシートテキストの色",
     "Maximum width of the action sheet": "アクションシートの最大幅",
     "Width of the action sheet": "アクションシートの横幅",
@@ -60,28 +60,28 @@
     "Opacity of the action sheet button background on hover": "ホバー時のアクションシートボタンの背景の不透明度",
     "Opacity of the backdrop": "背景の不透明度",
     "Background of the action sheet group": "アクションシートグループの背景",
-    "Returns a promise that resolves when the alert will dismiss.": "アラートが解除されるタイミングを解決するプロミスを返します。",
-    "Dismiss the alert overlay after it has been presented.": "アラートオーバーレイが表示された後、解除する。",
-    "Returns a promise that resolves when the alert did dismiss.": "アラートが解除されたことを解決するプロミスを返します。",
-    "Maximum height of the alert": "アラートの最大高さ",
+    "Returns a promise that resolves when the alert will dismiss.": "アラートが解除されるタイミングを解決するPromiseを返します。",
+    "Dismiss the alert overlay after it has been presented.": "アラートオーバーレイが表示された後、解除します。",
+    "Returns a promise that resolves when the alert did dismiss.": "アラートが解除されたことを解決するPromiseを返します。",
+    "Maximum height of the alert": "アラートの最大の高さ",
     "Height of the alert": "アラートの高さ",
     "Additional attributes to pass to the alert.": "アラートに渡す追加属性。",
     "Animation to use when the alert is dismissed.": "アラートが解除されたときに使用するアニメーション。",
-    "Array of input to show in the alert.": "アラートに表示する入力の配列。",
+    "Array of input to show in the alert.": "アラートに表示するInputの配列。",
     "Background of the alert": "注意喚起の背景",
     "The main title in the heading of the alert.": "アラートの見出しにあるメインタイトルです。",
     "Array of buttons to be added to the alert.": "アラートに追加されるボタンの配列。",
     "The subtitle in the heading of the alert. Displayed under the title.": "アラートの見出しにあるサブタイトルです。タイトルの下に表示されます。",
-    "Present the alert overlay after it has been created.": "アラートオーバーレイを作成した後に提示する。",
+    "Present the alert overlay after it has been created.": "アラートオーバーレイを作成した後に提示します。",
     "If `true`, the alert will animate.": "`true`の場合、アラートはアニメーションで表示されます。",
     "If `true`, the alert will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとアラートが解除される。",
-    "If `true`, the alert will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、アラートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "If `true`, the alert will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、アラートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
     "Animation to use when the alert is presented.": "アラート提示時に使用するアニメーションです。",
     "The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
     "Maximum width of the alert": "アラートの最大幅",
     "Minimum width of the alert": "アラートの最小幅",
     "Width of the alert": "アラートの幅",
-    "Minimum height of the alert": "アラートの最低高さ",
+    "Minimum height of the alert": "アラートの最小の高さ",
     "Border radius of the avatar and inner image": "アバターとインナーイメージの境界半径",
     "Font weight of the button icon": "ボタンアイコンのフォントの太さ",
     "The text to display in the back button.": "バックボタンに表示するテキストです。",
@@ -94,98 +94,98 @@
     "Text color of the button": "ボタンの文字色",
     "Opacity of the background on hover": "ホバー時の背景の不透明度",
     "Opacity of the button background when focused with the tab key": "タブキーでフォーカスしたときのボタンの背景の不透明度",
-    "If `true`, the user cannot interact with the button.": "`true`の場合、ユーザはボタンと対話することができない。",
+    "If `true`, the user cannot interact with the button.": "`true`の場合、ユーザはボタンと対話することができません。",
     "The url to navigate back to by default when there is no history.": "履歴がない場合に、デフォルトで戻るためのURL。",
     "Border radius of the button": "ボタンの境界半径",
     "Font size of the button icon": "ボタンアイコンのフォントサイズ",
-    "The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.": "戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定する。",
-    "Bottom margin of the button icon": "ボタンアイコンの下端マージン",
-    "The color to use from your application's color palette. Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`. For more information on colors, see [theming](/docs/theming/basics).": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+    "The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.": "戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定します。",
+    "Bottom margin of the button icon": "ボタンアイコンのBottom Margin",
+    "The color to use from your application's color palette. Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`. For more information on colors, see [theming](/docs/theming/basics).": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
     "When using a router, it specifies the transition animation when navigating to another page.": "ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。",
     "Transition of the button": "ボタンの遷移",
-    "Bottom padding of the button": "ボタンの下パディング",
+    "Bottom padding of the button": "ボタンのBottom Padding",
     "Minimum width of the button": "ボタンの最小幅",
-    "Top padding of the button": "ボタンの上部パディング",
-    "Top padding of the button icon": "ボタンアイコンの上部パディング",
-    "Top margin of the button": "ボタンの上マージン",
+    "Top padding of the button": "ボタンのTop Padding",
+    "Top padding of the button icon": "ボタンアイコンのTop Padding",
+    "Top margin of the button": "ボタンのTop Margin",
     "Minimum height of the button": "ボタンの最小高さ",
     "Color of the button ripple effect": "ボタンリプルエフェクトの色",
     "The native HTML button element that wraps all child elements.": "すべての子要素を包むネイティブ HTML ボタン要素。",
-    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合は右マージン、右から左の場合は左マージン",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
     "Opacity of the button": "ボタンの不透明度",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる",
-    "Bottom margin of the button": "ボタンの下端マージン",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Bottom margin of the button": "ボタンのBottom Margin",
     "The back button icon (uses ion-icon).": "戻るボタンのアイコン（ion-iconを使用）。",
-    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合は左マージン、右から左の場合は右マージン",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon": "ボタンアイコンの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。",
+    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon": "ボタンアイコンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。",
     "The back button text.": "戻るボタンのテキストです。",
-    "Top margin of the button icon": "ボタンアイコンの上マージン",
-    "Bottom padding of the button icon": "ボタンアイコンの下パディング",
-    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合は左マージン、右から左の場合は右マージン",
-    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合は右マージン、右から左の場合は左マージン",
-    "Emitted when the backdrop is tapped.": "バックドロップがタップされたときに発せられる。",
+    "Top margin of the button icon": "ボタンアイコンのTop Margin",
+    "Bottom padding of the button icon": "ボタンアイコンのBottom Padding",
+    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin",
+    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon": "ボタンアイコンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin",
+    "Emitted when the backdrop is tapped.": "バックドロップがタップされたときに発行されます。",
     "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.": "`true`の場合、背景をクリックすることができ、`ionBackdropTap`イベントを発生させます。",
     "If `true`, the backdrop will stop propagation on tap.": "`true`の場合、バックドロップはタップ時に伝搬を停止します。",
     "If `true`, the backdrop will be visible.": "`true`の場合、バックドロップが表示されます。",
-    "Bottom padding of the badge": "バッジの下パディング",
+    "Bottom padding of the badge": "バッジのBottom Padding",
     "Text color of the badge": "バッジの文字色",
-    "Top padding of the badge": "バッジの上部パディング",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "Top padding of the badge": "バッジのTop Padding",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
     "Background of the badge": "バッジの背景",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる",
-    "Emitted when the breadcrumb loses focus.": "パンくずのフォーカスが外れたときに発せられる。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Emitted when the breadcrumb loses focus.": "パンくずのフォーカスが外れたときに発行されます。",
     "Text color of the breadcrumb on hover": "ホバー時のパンくずのテキスト色",
     "The indicator element that shows the breadcrumbs are collapsed.": "パンくずが折りたたまれていることを示すインジケーター要素です。",
-    "When using a router, it specifies the transition direction when navigating to another page using `href`.": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
-    "If `true`, the user cannot interact with the breadcrumb.": "`true`の場合、ユーザーはパンくずと対話することができない。",
+    "When using a router, it specifies the transition direction when navigating to another page using `href`.": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
+    "If `true`, the user cannot interact with the breadcrumb.": "`true`の場合、ユーザーはパンくずと対話することができません。",
     "Text color of the breadcrumb when focused": "フォーカスされたときのパンくずのテキスト色",
     "Text color of the active breadcrumb": "アクティブなパンくずのテキスト色",
     "Background color of the breadcrumb when focused": "フォーカス時のパンくずの背景色",
-    "Emitted when the breadcrumb has focus.": "パンくずがフォーカスされたときに発せられる。",
-    "If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.": "trueの場合、このパンくずと次のパンくずの間にセパレータを表示する。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
+    "Emitted when the breadcrumb has focus.": "パンくずがフォーカスされたときに発行されます。",
+    "If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.": "trueの場合、このパンくずと次のパンくずの間にセパレータを表示します。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
     "Text color of the breadcrumb": "パンくずの文字色",
-    "When using a router, it specifies the transition animation when navigating to another page using `href`.": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+    "When using a router, it specifies the transition animation when navigating to another page using `href`.": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
     "The native HTML anchor or div element that wraps all child elements.": "すべての子要素を包むネイティブHTMLのアンカーまたはdiv要素です。",
-    "Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.": "リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
-    "Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.": "ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
-    "Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).": "ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+    "Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+    "Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+    "Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
     "This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
     "If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.": "`true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。",
     "The separator element between each breadcrumb.": "各パンくずの間のセパレータ要素です。",
     "The maximum number of breadcrumbs to show before collapsing.": "折りたたむ前に表示するパンくずの最大数を指定します。",
-    "Emitted when the collapsed indicator is clicked on.": "折りたたみインジケータがクリックされたときに発する。",
-    "The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.": "折りたたんだインジケータの前に表示するパンくずの数を指定する。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
+    "Emitted when the collapsed indicator is clicked on.": "折りたたみインジケータがクリックされたときに発します。",
+    "The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.": "折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
     "The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.": "折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
     "Opacity of the button when pressed": "ボタンが押されたときの不透明度",
     "The type of button.": "ボタンの種類です。",
     "Set to `\"round\"` for a button with more rounded corners.": "round\"` に設定すると、より角が丸いボタンになります。",
-    "Emitted when the button loses focus.": "ボタンのフォーカスが外れたときに発せられる。",
+    "Emitted when the button loses focus.": "ボタンのフォーカスが外れたときに発行されます。",
     "Opacity of the button when focused with the tab key": "タブキーでフォーカスしたときのボタンの不透明度",
-    "Emitted when the button has focus.": "ボタンにフォーカスが当たっているときに発せられる。",
-    "If `true`, activates a button with a heavier font weight.": "`true`の場合、より重いフォントウェイトを持つボタンをアクティブにする。",
+    "Emitted when the button has focus.": "ボタンにフォーカスが当たっているときに発行されます。",
+    "If `true`, activates a button with a heavier font weight.": "`true`の場合、より重いフォントウェイトを持つボタンをアクティブにします。",
     "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"` for a transparent button with a border, or to `\"solid\"` for a button with a filled background. The default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.": "フラットなボタンに似た透明なボタンには `\"clear\"` を、ボーダーのある透明なボタンには `\"outline\"` を、背景を塗りつぶしたボタンには `\"solid\"` を設定します。デフォルトの塗りつぶしは `\"solid\"` です。ただし、ツールバーの内側では `\"clear\"` となります。",
-    "Set to `\"small\"` for a button with less height and padding, to `\"default\"` for a button with the default height and padding, or to `\"large\"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `\"small\"` by default. Set the size to `\"default\"` inside of an item to make it a standard size button.": "ボタンの高さとパディングが少ない場合は `\"small\"` に、ボタンの高さとパディングがデフォルトの場合は `\"default\"` に、ボタンの高さとパディングが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
+    "Set to `\"small\"` for a button with less height and padding, to `\"default\"` for a button with the default height and padding, or to `\"large\"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `\"small\"` by default. Set the size to `\"default\"` inside of an item to make it a standard size button.": "ボタンの高さとPaddingが少ない場合は `\"small\"` に、ボタンの高さとPaddingがデフォルトの場合は `\"default\"` に、ボタンの高さとPaddingが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
     "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button with square corners and no left or right borders.": "全角のボタンなら`\"block\"`、角が四角く左右のボーダーがない全角のボタンなら`\"full\"`に設定します。",
     "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.": "HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。",
-    "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.": "ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。",
+    "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.": "ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。",
     "Text color of the button when pressed": "ボタンが押されたときの文字色",
-    "Should be used on an icon in a button that has no text.": "テキストを持たないボタン内のアイコンに対して使用されるべきである。",
+    "Should be used on an icon in a button that has no text.": "テキストを持たないボタン内のアイコンに対して使用されるべきです。",
     "The native HTML button or anchor element that wraps all child elements.": "すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。",
     "Text color of the button when hover": "ホバー時のボタンの文字色",
-    "Content is placed between the named slots if provided without a slot.": "スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。",
+    "Content is placed between the named slots if provided without a slot.": "slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。",
     "Box shadow of the button": "ボタンのボックスシャドウ",
     "Content is placed to the right of the button text in LTR, and to the left in RTL.": "コンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。",
     "Content is placed to the left of the button text in LTR, and to the right in RTL.": "コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。",
     "Border style of the button": "ボタンのボーダースタイル",
     "Border width of the button": "ボタンのボーダー幅",
     "Border color of the button": "ボタンのボーダーカラー",
-    "If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)": "trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` モードにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
-    "If `true`, the card header will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、カードヘッダは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)": "trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` modeにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
+    "If `true`, the card header will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、カードヘッダは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
     "Color of the card subtitle": "カードサブタイトルの色",
     "Color of the card title": "カードタイトルの色",
-    "If `true`, the user cannot interact with the card.": "`true`の場合、ユーザはカードと対話することができない。",
+    "If `true`, the user cannot interact with the card.": "`true`の場合、ユーザはカードと対話することができません。",
     "Color of the card": "カードの色",
     "Background of the card": "カードの背景",
     "The native HTML button, anchor, or div element that wraps all child elements.": "すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。",
@@ -200,24 +200,24 @@
     "Background of the checkbox icon": "チェックボックスアイコンの背景",
     "The name of the control, which is submitted with the form data.": "フォームデータとともに送信されるコントロールの名前。",
     "Size of the checkbox icon": "チェックボックスのアイコンの大きさ",
-    "If `true`, the user cannot interact with the checkbox.": "`true`の場合、ユーザはチェックボックスと対話することができない。",
-    "Emitted when the checkbox loses focus.": "チェックボックスのフォーカスが外れたときに発せられる。",
+    "If `true`, the user cannot interact with the checkbox.": "`true`の場合、ユーザはチェックボックスと対話することができません。",
+    "Emitted when the checkbox loses focus.": "チェックボックスのフォーカスが外れたときに発行されます。",
     "Color of the checkbox checkmark when checked": "チェックボックスのチェックマークがチェックされたときの色",
-    "Emitted when the checkbox has focus.": "チェックボックスにフォーカスが当たったときに発せられる。",
+    "Emitted when the checkbox has focus.": "チェックボックスにフォーカスが当たったときに発行されます。",
     "Border color of the checkbox icon when checked": "チェックボックスのアイコンがチェックされたときのボーダーカラー",
     "Background of the checkbox icon when checked": "チェックしたときのチェックボックスアイコンの背景",
-    "Emitted when the checked property has changed.": "チェックされたプロパティが変更されたときに発行される。",
+    "Emitted when the checked property has changed.": "チェックされたプロパティが変更されたときに発行されます。",
     "Stroke width of the checkbox checkmark": "チェックボックス・チェックマークのストローク幅",
     "The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`, it's only used when the checkbox participates in a native `<form>`.": "チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。  チェックボックスの値は `<input type=\"checkbox\">` の値に似ており、チェックボックスがネイティブの `<form>` に参加する場合にのみ使用されます。",
     "The checkmark used to indicate the checked state.": "チェックされた状態を示すために使用されるチェックマークです。",
     "The container for the checkbox mark.": "チェックボックスマークのコンテナです。",
     "Transition of the checkbox icon": "チェックボックスアイコンの遷移",
     "Color of the chip": "チップの色",
-    "If `true`, the user cannot interact with the chip.": "`true`の場合、ユーザはチップと対話することができない。",
-    "Display an outline style button.": "アウトラインスタイルボタンを表示する。",
+    "If `true`, the user cannot interact with the chip.": "`true`の場合、ユーザはチップと対話することができません。",
+    "Display an outline style button.": "アウトラインスタイルボタンを表示します。",
     "Background of the chip": "チップの背景",
     "The amount to offset the column, in terms of how many columns it should shift to the end of the total available.": "オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。",
-    "The size of the column, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The size of the column, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
     "The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.": "LGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
     "The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.": "xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
     "The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.": "mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。",
@@ -225,7 +225,7 @@
     "The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.": "xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。",
     "The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.": "LGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。",
     "The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.": "xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
-    "The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.": "xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定する。",
+    "The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.": "xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。",
     "The amount to push the column, in terms of how many columns it should shift to the end of the total available.": "カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
     "The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.": "xs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。",
     "The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.": "xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
@@ -237,141 +237,141 @@
     "The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.": "Lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
     "The number of total Columns in the Grid": "グリッドのカラムの総数",
     "Padding for the Column on sm screens and up": "スマートフォン以上の画面では、コラムにパッドを入れる。",
-    "Padding for the Column on lg screens and up": "LG以上の画面でのコラムのパディング",
-    "Padding for the Column on md screens and up": "mdスクリーン以上のカラムのパディングについて",
-    "Padding for the Column on xs screens and up": "xsスクリーン以上のカラムのパディングについて",
-    "Padding for the Column on xl screens and up": "XL以上の画面でのカラムのパディングについて",
-    "The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
-    "The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
-    "Padding for the Column": "カラムのパディング",
-    "The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
-    "The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
-    "The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
+    "Padding for the Column on lg screens and up": "LG以上の画面でのコラムのPadding",
+    "Padding for the Column on md screens and up": "mdスクリーン以上のカラムのPadding",
+    "Padding for the Column on xs screens and up": "xsスクリーン以上のカラムのPadding",
+    "Padding for the Column on xl screens and up": "XL以上の画面でのカラムのPadding",
+    "The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "Padding for the Column": "カラムのPadding",
+    "The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+    "The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `\"auto\"` is passed, the column will be the size of its content.": "xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
     "Offset bottom of the content": "コンテンツのオフセットボトム",
     "Scroll to the top of the component.": "コンポーネントの上部にスクロールします。",
-    "Scroll to a specified X/Y location in the component.": "コンポーネント内の指定したX/Y位置までスクロールする。",
+    "Scroll to a specified X/Y location in the component.": "コンポーネント内の指定したX/Y位置までスクロールします。",
     "Scroll to the bottom of the component.": "コンポーネントの一番下までスクロールします。",
     "Background of the content": "コンテンツの背景",
     "Offset top of the content": "コンテンツのオフセットトップ",
     "Scroll by a specified X/Y distance in the component.": "コンポーネントを指定したX/Y距離だけスクロールさせる。",
     "Color of the content": "コンテンツの色",
-    "Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロールが終了したときに発せられる。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
+    "Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
     "Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。",
     "Keyboard offset of the content": "コンテンツのキーボードオフセット",
     "If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.": "`true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。",
     "If you want to enable the content scrolling in the X axis, set this property to `true`.": "X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。",
     "Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.": "パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。",
-    "Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロール中に発せられる。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
+    "Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.": "スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
     "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。",
     "Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`:  i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.": "実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。",
     "If you want to disable the content scrolling in the Y axis, set this property to `false`.": "Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。",
-    "Top padding of the content": "コンテンツのトップパディング",
+    "Top padding of the content": "コンテンツのTop Padding",
     "The background of the content.": "コンテンツの背景です。",
-    "Bottom padding of the content": "コンテンツのボトムパディング",
+    "Bottom padding of the content": "コンテンツのBottom Padding",
     "The scrollable container of the content.": "コンテンツのスクロール可能なコンテナ。",
     "Should be used for fixed content that should not scroll.": "スクロールしてはいけない固定コンテンツに使用する必要があります。",
-    "Content is placed in the scrollable area if provided without a slot.": "スロットなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合は右パディング、右から左の場合は左パディングとなる",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Content is placed in the scrollable area if provided without a slot.": "slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
     "Content displayed inside of the time button.": "時刻ボタンの内側に表示される内容。",
-    "The native HTML button that wraps the slotted text.": "スロットされたテキストをラップするネイティブHTMLボタンです。",
+    "The native HTML button that wraps the slotted text.": "slotされたテキストをラップするネイティブHTMLボタンです。",
     "Content displayed inside of the date button.": "日付ボタンの内側に表示されるコンテンツです。",
     "The ID of the `ion-datetime` instance associated with the datetime button.": "datetime ボタンに関連付けられた `ion-datetime` インスタンスの ID。",
     "The text to display on the picker's cancel button.": "ピッカーのキャンセルボタンに表示するテキストです。",
-    "The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.": "ion-datetime`に使用する週の最初の曜日を指定する。デフォルト値は `0` で、日曜日を表す。",
-    "If `true`, the user cannot interact with the datetime.": "`true`の場合、ユーザはdatetimeを操作することができない。",
-    "Returns if an individual date (calendar day) is enabled or disabled.  If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.  The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.  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.": "個々の日付(暦日)が有効か無効かを返す。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブである。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
-    "The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.": "ion-datetime`の時間周期を指定する。値が設定されていない場合、現在のロケールによって指定される。",
+    "The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.": "ion-datetime`に使用する週の最初の曜日を指定します。デフォルト値は `0` で、日曜日を表す。",
+    "If `true`, the user cannot interact with the datetime.": "`true`の場合、ユーザはdatetimeを操作することができません。",
+    "Returns if an individual date (calendar day) is enabled or disabled.  If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.  The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.  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.": "個々の日付(暦日)が有効か無効かを返します。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブです。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
+    "The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.": "ion-datetime`の時間周期を指定します。値が設定されていない場合、現在のロケールによって指定される。",
     "If `true`, multiple dates can be selected at once. Only applies to `presentation=\"date\"` and `preferWheel=\"false\"`.": "`true`の場合、複数の日付を一度に選択することができる。presentation=\"date\"`と `preferWheel=\"false\"` にのみ適用される。",
-    "Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.": "選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
-    "Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues=\"0,15,30,45\"`.": "選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
+    "Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.": "選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
+    "Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues=\"0,15,30,45\"`.": "選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
     "The text to display on the picker's \"Clear\" button.": "ピッカーの「クリア」ボタンに表示するテキストです。",
     "Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel=\"false\"`.": "特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel=\"false\"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。",
     "The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.": "許容される最大のdatetimeを指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。",
     "The text to display on the picker's \"Done\" button.": "ピッカーの \"Done \"ボタンに表示するテキスト。",
-    "If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。time'`, `month'`, `'month-year'`, または `-year'`.",
-    "Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.": "選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
+    "If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。`'time'`, `'month'`, `'month-year'`, または `'year'`.",
+    "Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.": "選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
     "The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.": "許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでよい。デフォルトは、今日から100年前の年頭です。",
-    "Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.": "選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
-    "The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.": "ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
-    "Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.": "どの値を選択するか。date'`はカレンダーピッカーを表示し、月、日、年を選択します。time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
-    "Emitted when the datetime loses focus.": "datetimeのフォーカスが外れたときに発せられる。",
-    "Emitted when the value (selected date) has changed.": "値（選択された日付）が変化したときに発せられる。",
-    "The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple=\"true\"`.": "datetimeの値を有効なISO 8601 datetime文字列として指定する。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
-    "Emitted when the datetime selection was cancelled.": "datetimeの選択がキャンセルされたときに発生する。",
+    "Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.": "選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
+    "The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.": "`ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`'default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
+    "Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.": "どの値を選択するか。`'date'`はカレンダーピッカーを表示し、月、日、年を選択します。`'time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。`'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
+    "Emitted when the datetime loses focus.": "datetimeのフォーカスが外れたときに発行されます。",
+    "Emitted when the value (selected date) has changed.": "値（選択された日付）が変化したときに発行されます。",
+    "The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple=\"true\"`.": "datetimeの値を有効なISO 8601 datetime文字列として指定します。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
+    "Emitted when the datetime selection was cancelled.": "datetimeの選択がキャンセルされたときに発生します。",
     "Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.": "ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。",
     "Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.": "datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
     "A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to \"numberOfDates days\".": "選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは \"numberOfDates days \"に設定されています。",
     "Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.": "選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。",
-    "If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.": "cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。fixed`の場合、`ion-datetime`は固定幅になる。",
-    "If `true`, the default \"Time\" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`スロットを使用することもできます。time-label`スロットにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
-    "Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.": "選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` 入力には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
-    "Emitted when the datetime has focus.": "datetimeにフォーカスが当たったときに発行される。",
-    "If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.": "`true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、スロットされたタイトルと、選択された日付の両方が含まれます。",
+    "If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.": "cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。`fixed`の場合、`ion-datetime`は固定幅になる。",
+    "If `true`, the default \"Time\" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`slotを使用することもできます。 `time-label` slotにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
+    "Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.": "選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
+    "Emitted when the datetime has focus.": "datetimeにフォーカスが当たったときに発行されます。",
+    "If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.": "`true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、slotされたタイトルと、選択された日付の両方が含まれます。",
     "The title of the datetime.": "datetimeのタイトルです。",
     "The buttons in the datetime.": "datetimeのボタンです。",
     "The label for the time selector in the datetime.": "datetimeの時間セレクタのラベルです。",
     "The text color of the title.": "タイトルの文字色です。",
     "The primary background of the datetime component.": "datetimeコンポーネントの主な背景。",
-    "If `true`, the datetime appears normal but is not interactive.": "`true`の場合、datetimeは正常に表示されるが、インタラクティブにはならない。",
-    "The primary background of the datetime component in RGB format.": "datetimeコンポーネントの主な背景をRGBフォーマットで示す。",
-    "If `true`, the default \"Cancel\" and \"OK\" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`スロットを使用することもできます。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
-    "If `true`, a \"Clear\" button will be rendered alongside the default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` スロットを使用することもできる。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
+    "If `true`, the datetime appears normal but is not interactive.": "`true`の場合、datetimeは正常に表示されるが、インタラクティブにはなりません。",
+    "The primary background of the datetime component in RGB format.": "datetimeコンポーネントの主な背景をRGBフォーマットで示します。",
+    "If `true`, the default \"Cancel\" and \"OK\" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`slotを使用することもできます。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
+    "If `true`, a \"Clear\" button will be rendered alongside the default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` slotを使用することもできる。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
     "The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.": "クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。",
     "The close icon that is displayed when a fab list opens (uses ion-icon).": "ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。",
     "Font size of the close icon": "クローズアイコンのフォントサイズ",
     "Opacity of the button background when pressed": "押されたときのボタンの背景の不透明度",
-    "If `true`, the user cannot interact with the fab button.": "`true`の場合、ユーザーはファブボタンを操作することができない。",
+    "If `true`, the user cannot interact with the fab button.": "`true`の場合、ユーザーはファブボタンを操作することができません。",
     "The size of the button. Set this to `small` in order to have a mini fab button.": "ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。",
     "Opacity of the button background on hover": "ホバー時のボタン背景の不透明度",
     "If `true`, the fab button will be show a close icon.": "`true`の場合、ファブボタンにクローズアイコンを表示します。",
-    "If `true`, the fab button will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ファブボタンが半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "If `true`, the fab button will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ファブボタンが半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
     "If `true`, the fab button will show when in a fab-list.": "`true`の場合、fabボタンがfab-listにあるときに表示されます。",
     "The side the fab list will show on relative to the main fab button.": "メインファブボタンに対して、ファブリストが表示される側を指定します。",
     "If `true`, the fab list will show all fab buttons in the list.": "`true`の場合、ファブリストに全てのファブボタンが表示されます。",
     "Where to align the fab vertically in the viewport.": "ビューポートでファブを縦に並べる場所。",
     "Where to align the fab horizontally in the viewport.": "ビューポートでファブを水平に揃える場所。",
     "Close an active FAB list container.": "アクティブなFABリストコンテナを閉じる。",
-    "If `true`, the fab will display on the edge of the header if `vertical` is `\"top\"`, and on the edge of the footer if it is `\"bottom\"`. Should be used with a `fixed` slot.": "`true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。fixed` スロットと一緒に使用する必要があります。",
+    "If `true`, the fab will display on the edge of the header if `vertical` is `\"top\"`, and on the edge of the footer if it is `\"bottom\"`. Should be used with a `fixed` slot.": "`true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。 `fixed` slotと一緒に使用する必要があります。",
     "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.": "もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。",
-    "Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.": "フッターに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。",
-    "If `true`, the footer will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.": "`true`の場合、フッターは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
-    "Padding for the Grid on xs screens": "xs画面でのGridのパディングについて",
-    "Padding for the Grid on lg screens": "LG画面でのグリッドのパディングについて",
+    "Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.": "フッターに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。",
+    "If `true`, the footer will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.": "`true`の場合、フッターは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+    "Padding for the Grid on xs screens": "xs画面でのGridのPadding",
+    "Padding for the Grid on lg screens": "LG画面でのグリッドのPadding",
     "Width of the fixed Grid on xs screens": "xsスクリーンで固定されたGridの幅",
-    "Padding for the Grid on md screens": "md画面におけるグリッドのパディングについて",
-    "Padding for the Grid": "グリッドのパディング",
+    "Padding for the Grid on md screens": "md画面におけるグリッドのPadding",
+    "Padding for the Grid": "グリッドのPadding",
     "Width of the fixed Grid": "固定Gridの幅",
-    "Padding for the Grid on sm screens": "スマートスクリーンにおけるグリッドのパディング",
-    "Padding for the Grid on xl screens": "XL画面でのグリッドのパディングについて",
+    "Padding for the Grid on sm screens": "スマートスクリーンにおけるグリッドのPadding",
+    "Padding for the Grid on xl screens": "XL画面でのグリッドのPadding",
     "Width of the fixed Grid on md screens": "md画面での固定Gridの幅",
     "Width of the fixed Grid on lg screens": "LGスクリーンで固定されたGridの幅",
     "Width of the fixed Grid on sm screens": "sm画面での固定Gridの幅",
     "Width of the fixed Grid on xl screens": "xl画面での固定Gridの幅",
     "If `true`, the grid will have a fixed width based on the screen size.": "`true`の場合、グリッドの幅は画面サイズに応じた固定幅となる。",
-    "Describes the scroll effect that will be applied to the header. Only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)": "ヘッダーに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。  通常、[折りたたみ式大型タイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
-    "If `true`, the header will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.": "`true`の場合、ヘッダーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
-    "Emitted when the img fails to load": "imgの読み込みに失敗したときに発せられる",
+    "Describes the scroll effect that will be applied to the header. Only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)": "ヘッダーに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。  通常、[折りたたみ式ラージタイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
+    "If `true`, the header will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.": "`true`の場合、ヘッダーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+    "Emitted when the img fails to load": "imgの読み込みに失敗したときに発行されます。",
     "The inner `img` element.": "内側の `img` 要素。",
-    "Emitted when the image has finished loading": "画像の読み込みが終了したときに発せられる",
-    "Emitted when the img src has been set": "img srcが設定されたときに発せられる。",
-    "The image URL. This attribute is mandatory for the `<img>` element.": "画像のURL。この属性は `<img>` 要素では必須である。",
+    "Emitted when the image has finished loading": "画像の読み込みが終了したときに発行されます。",
+    "Emitted when the img src has been set": "img srcが設定されたときに発行されます。",
+    "The image URL. This attribute is mandatory for the `<img>` element.": "画像のURL。この属性は `<img>` 要素では必須です。",
     "This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.": "この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。",
     "An animated SVG spinner that shows while loading.": "ロード中に表示されるアニメーションSVGスピナーです。",
     "Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
-    "If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.": "`true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。  trueを設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
+    "If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.": "`true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 `true` を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
     "The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.": "スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、`100px`という値を使用します。",
-    "The position of the infinite scroll element. The value can be either `top` or `bottom`.": "無限スクロール要素の位置を指定する。値は `top` または `bottom` のどちらかである。",
+    "The position of the infinite scroll element. The value can be either `top` or `bottom`.": "無限スクロール要素の位置を指定します。値は `top` または `bottom` のどちらかです。",
     "Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed.": "スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。",
     "Call `complete()` within the `ionInfinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`.": "非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。",
-    "Indicates whether the value of the control can be automatically completed by the browser.": "コントロールの値が、ブラウザによって自動的に補完されるかどうかを示す。",
+    "Indicates whether the value of the control can be automatically completed by the browser.": "コントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。",
     "Whether auto correction should be enabled when the user is entering/editing the text value.": "ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。",
     "This attribute is ignored.": "この属性は無視されます。",
-    "If `true`, the user cannot interact with the input.": "`true`の場合、ユーザは入力と対話することができない。",
-    "The maximum value, which must not be less than its minimum (min attribute) value.": "最大値で、その最小値（min属性）より小さくてはならない。",
-    "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.": "`true`の場合、値があるときに入力にクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
-    "The minimum value, which must not be greater than its maximum (max attribute) value.": "最小値で、その最大値（max属性）より大きくてはならない。",
-    "This Boolean attribute lets you specify that a form control should have input focus when the page loads.": "この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。",
+    "If `true`, the user cannot interact with the input.": "`true`の場合、ユーザはInputと対話することができません。",
+    "The maximum value, which must not be less than its minimum (min attribute) value.": "最大値で、その最小値（min属性）より小さくてはなりません。",
+    "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.": "`true`の場合、値があるときにInputにクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
+    "The minimum value, which must not be greater than its maximum (max attribute) value.": "最小値で、その最大値（max属性）より大きくてはなりません。",
+    "This Boolean attribute lets you specify that a form control should have input focus when the page loads.": "この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。",
     "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.": "`true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
     "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.": "`true`の場合、ユーザは複数の値を入力することができる。この属性は、type属性が `\"email\"` に設定されている場合に適用され、それ以外の場合は無視される。",
     "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
@@ -380,93 +380,93 @@
     "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
     "A hint to the browser for which keyboard to display. Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.": "どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
     "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
-    "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.": "値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` 入力タイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
-    "Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.": "入力が値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
-    "Font weight of the input placeholder text": "入力用プレースホルダーテキストのフォントウェイト",
+    "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.": "値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` Inputタイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
+    "Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.": "Inputが値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
+    "Font weight of the input placeholder text": "Inputのplaceholderのテキストのフォントウェイト",
     "The value of the input.": "入力された値です。",
-    "Background of the input": "入力の背景",
-    "Emitted when the input loses focus.": "入力のフォーカスが外れたときに発せられる。",
-    "Top padding of the input": "入力のトップパディング",
-    "Emitted when the input has focus.": "入力にフォーカスが当たったときに発せられる。",
-    "Opacity of the input placeholder text": "入力プレースホルダーテキストの不透明度",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input": "入力の方向が左から右の場合は右パディング、右から左の場合は左パディングとなる",
-    "Emitted when a keyboard input occurred.": "キーボード入力が発生したときに発する。",
-    "Color of the input text": "入力テキストの色",
-    "Font style of the input placeholder text": "入力用プレースホルダーテキストのフォントスタイル",
+    "Background of the input": "Inputの背景",
+    "Emitted when the input loses focus.": "Inputのフォーカスが外れたときに発行されます。",
+    "Top padding of the input": "InputのTop Padding",
+    "Emitted when the input has focus.": "Inputにフォーカスが当たったときに発行されます。",
+    "Opacity of the input placeholder text": "Inputのプレースホルダーテキストの不透明度",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input": "入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
+    "Emitted when a keyboard input occurred.": "キーボード入力が発生したときに発します。",
+    "Color of the input text": "Inputのテキストの色",
+    "Font style of the input placeholder text": "Inputのplaceholderのテキストのフォントスタイル",
     "Returns the native `<input>` element used under the hood.": "フードの下で使用されているネイティブの `<input>` 要素を返します。",
-    "Bottom padding of the input": "入力の下パディング",
-    "Emitted when the value has changed.": "値が変更されたときに発せられる。",
+    "Bottom padding of the input": "InputのBottom Padding",
+    "Emitted when the value has changed.": "値が変更されたときに発行されます。",
     "The type of control to display. The default type is text.": "表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。",
     "Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `\"any\"` or a positive floating point number.": "min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any\"`または正の浮動小数点数。",
-    "Color of the input placeholder text": "入力用プレースホルダーテキストの色",
-    "Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.": "ion-input` のネイティブ `input` にフォーカスを設定する。グローバルな `input.focus()` の代わりに、このメソッドを使用します。  ページが入ったときに入力にフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input": "入力の方向が左から右の場合は左パディング、右から左の場合は右パディングとなる",
-    "If `true`, the user cannot modify the value.": "`true`の場合、ユーザーは値を変更することができない。",
+    "Color of the input placeholder text": "Inputのplaceholderのテキストの色",
+    "Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.": "`ion-input` のネイティブ `input` にフォーカスを設定します。グローバルな `input.focus()` の代わりに、このメソッドを使用します。 ページが入ったときにInputにフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input": "入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "If `true`, the user cannot modify the value.": "`true`の場合、ユーザーは値を変更することができません。",
     "If `true`, the element will have its spelling and grammar checked.": "`true`の場合、その要素のスペルチェックと文法チェックが行われる。",
     "If `true`, the user must fill in a value before submitting a form.": "`true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
-    "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.": "コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数である。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
-    "Top padding of the item divider": "アイテムディバイダーのトップパディング",
-    "Bottom inner padding of the item divider": "アイテムディバイダーのボトムインナーパディング",
-    "Top inner padding of the item divider": "アイテムディバイダーの上部内側パディング",
-    "End inner padding of the item divider": "アイテムディバイダーの内側パディングを終了する",
+    "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.": "コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数です。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
+    "Top padding of the item divider": "アイテムディバイダーのTop Padding",
+    "Bottom inner padding of the item divider": "アイテムディバイダーのBottom Inner Padding",
+    "Top inner padding of the item divider": "アイテムディバイダーのTop Inner Padding",
+    "End inner padding of the item divider": "アイテムディバイダーのEnd Inner Padding",
     "Background of the item divider": "アイテムディバイダーの背景",
     "Color of the item divider": "アイテムディバイダーの色",
     "Content is placed to the left of the divider text in LTR, and to the right in RTL.": "コンテンツは、LTRでは仕切り文字の左側に、RTLでは右側に配置されます。",
-    "Bottom padding of the item divider": "アイテムディバイダーのボトムパディング",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合は右パディング、右から左の場合は左パディング",
+    "Bottom padding of the item divider": "アイテムディバイダーのBottom Padding",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合はRight Padding、右から左の場合はLeft Padding",
     "When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky": "`true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。  この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky",
-    "Start inner padding of the item divider": "アイテムディバイダーの内側パディングを開始する",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Start inner padding of the item divider": "アイテムディバイダーのStart Inner Padding",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
     "Content is placed to the right of the divider text in LTR, and to the left in RTL.": "コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。",
     "Background of the item option": "アイテムオプションの背景",
     "Color of the item option": "アイテムオプションのカラー",
     "Should be used on an icon in an option that has no text.": "テキストを持たないオプションのアイコンに使用されるべきです。",
-    "If `true`, the user cannot interact with the item option.": "`true`の場合、ユーザーはアイテムオプションと対話することができない。",
+    "If `true`, the user cannot interact with the item option.": "`true`の場合、ユーザーはアイテムオプションと対話することができません。",
     "Content is placed to the right of the option text in LTR, and to the left in RTL.": "コンテンツは、LTRではオプションテキストの右側に、RTLでは左側に配置されます。",
     "If `true`, the option will expand to take up the available width and cover any other options.": "`true`の場合、オプションは利用可能な幅を占めるように展開し、他のオプションをカバーします。",
     "Content is placed below the option text.": "コンテンツは、オプションテキストの下に配置されます。",
     "Content is placed above the option text.": "オプションテキストの上にコンテンツが配置されます。",
     "Content is placed to the left of the option text in LTR, and to the right in RTL.": "コンテンツは、LTRではオプションテキストの左側に、RTLでは右側に配置されます。",
     "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.": "オプションボタンを配置する側を指定します。指定可能な値。start\"` と `\"end\"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。",
-    "Emitted when the item has been fully swiped.": "アイテムが完全にスワイプされたときに発せられる。",
+    "Emitted when the item has been fully swiped.": "アイテムが完全にスワイプされたときに発行されます。",
     "Open the sliding item.": "スライド式の項目を開く。",
-    "Emitted when the sliding position changes.": "スライド位置が変化したときに発せられる。",
+    "Emitted when the sliding position changes.": "スライド位置が変化したときに発行されます。",
     "Get the amount the item is open in pixels.": "アイテムが開いている量をピクセル単位で取得します。",
     "Close the sliding item. Items can also be closed from the [List](./list).": "スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。",
     "Close all of the sliding items in the list. Items can also be closed from the [List](./list).": "リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。",
     "Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.": "オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いている。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
     "If `true`, the user cannot interact with the sliding item.": "`true`の場合、ユーザーはスライドアイテムを操作することができません。",
     "The icon to use when `detail` is set to `true`.": "detail` が `true` に設定されているときに使用するアイコンです。",
-    "If `true`, the user cannot interact with the item.": "`true`の場合、ユーザはそのアイテムと対話することができない。",
+    "If `true`, the user cannot interact with the item.": "`true`の場合、ユーザはそのアイテムと対話することができません。",
     "Background of the item": "アイテムの背景",
     "How the bottom border should be displayed on the item.": "アイテムに表示される下枠の表示方法。",
-    "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.": "押されたときのアイテムの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。",
+    "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.": "押されたときのアイテムの背景。注意：これを設定すると、Material Designの波紋に干渉します。",
     "The shape of the item. If \"round\" it will have increased border radius.": "アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。",
     "If `true`, a button tag will be rendered and the item will be tappable.": "`true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。",
-    "The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.": "アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`モードでのみ使用可能です。",
+    "The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.": "アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`modeでのみ使用可能です。",
     "A callback used to format the counter text. By default the counter text is set to \"itemLength / maxLength\".": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは「itemLength / maxLength」に設定されています。",
     "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。",
     "Opacity of the item background when pressed": "押されたときのアイテム背景の不透明度",
     "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.": "`true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。",
     "Width of the item inner border": "アイテム内枠の幅",
-    "Top padding of the item": "アイテムのトップパディング",
+    "Top padding of the item": "アイテムのTop Padding",
     "Minimum height of the item": "アイテムの最小高さ",
-    "Bottom padding of the item": "アイテムの底面パディング",
-    "Bottom padding of the item inner": "アイテム内側のボトムパディング",
-    "Top padding of the item inner": "アイテム内側のトップパディング",
+    "Bottom padding of the item": "アイテムのBottom Padding",
+    "Bottom padding of the item inner": "アイテム内側のBottom Padding",
+    "Top padding of the item inner": "アイテム内側のTop Padding",
     "Content is placed under the item and displayed when no error is detected.": "項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。",
     "Content is placed under the item and displayed when an error is detected.": "項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。",
     "The native HTML button, anchor or div element that wraps all child elements.": "すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner": "方向が左から右の場合は右パディング、方向がアイテムの内側の右から左の場合は左パディングとなる",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item": "方向が左から右の場合は左パディング、方向が右から左の場合は右パディングで項目を囲む",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item": "方向が左から右の場合は右パディング、方向が右から左の場合は左パディングで項目を囲む",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner": "方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item": "方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingで項目を囲む",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item": "方向が左から右の場合はRight Padding、方向が右から左の場合はLeft Paddingで項目を囲む",
     "Transition of the item": "アイテムの変遷",
     "Box shadow of the item inner": "アイテム内側のボックスシャドウ",
     "Color of the item ripple effect": "アイテム波及効果の色",
     "Content is placed to the left of the item text in LTR, and to the right in RTL.": "コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。",
     "The chevron icon for the item. Only applies when `detail=\"true\"`.": "アイテムのシェブロンアイコンを表示します。detail=\"true\"`のときのみ適用されます。",
     "Content is placed to the right of the item text in LTR, and to the left in RTL.": "コンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner": "方向が左から右の場合は左パディング、方向が右から左の場合は右パディングがアイテム内側に入る",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner": "方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingがアイテム内側に入る",
     "The color of the highlight on the item when valid": "有効時のアイテム上のハイライトの色",
     "Opacity of the item detail icon": "アイテム詳細アイコンの不透明度",
     "Color of the item border": "アイテムの縁取りの色",
@@ -487,7 +487,7 @@
     "Background of the item on hover": "ホバー時のアイテムの背景",
     "Background of the item when focused with the tab key": "タブキーでフォーカスしたときのアイテムの背景",
     "The position determines where and how the label behaves inside an item.": "位置は、ラベルがアイテム内のどこで、どのように動作するかを決定します。",
-    "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.": "ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能である。",
+    "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.": "ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能です。",
     "How the bottom border should be displayed on the list header.": "リストヘッダーの下辺のボーダーをどのように表示するか。",
     "Style of the list header border": "リストヘッダーボーダーのスタイル",
     "Color of the list header border": "リストヘッダーボーダーの色",
@@ -500,26 +500,26 @@
     "How the bottom border should be displayed on all items.": "すべてのアイテムで、下のボーダーをどのように表示させるか。",
     "Additional attributes to pass to the loader.": "ローダーに渡す追加属性。",
     "Animation to use when the loading indicator is dismissed.": "ローディングインジケータが解除されたときに使用するアニメーションです。",
-    "Returns a promise that resolves when the loading did dismiss.": "ローディングが解除されたタイミングを解決するプロミスを返します。",
+    "Returns a promise that resolves when the loading did dismiss.": "ローディングが解除されたタイミングを解決するPromiseを返します。",
     "The name of the spinner to display.": "表示するスピナーの名前。",
     "Animation to use when the loading indicator is presented.": "ローディングインジケータが表示されたときに使用するアニメーションです。",
     "If `true`, a backdrop will be displayed behind the loading indicator.": "`true`の場合、ロードインジケータの後ろにバックドロップが表示されます。",
-    "Emitted after the loading has dismissed.": "ローディングが解除された後に発せられる。",
-    "Returns a promise that resolves when the loading will dismiss.": "ローディングが解除されるタイミングを解決するプロミスを返します。",
-    "Emitted before the loading has presented.": "ローディングが提示される前に発せられる。",
-    "Emitted after the loading has presented.": "ローディングが提示された後に発せられる。",
-    "Emitted before the loading has dismissed.": "ローディングが解除される前に発せられる。",
-    "Present the loading overlay after it has been created.": "作成後のローディングオーバーレイを提示する。",
+    "Emitted after the loading has dismissed.": "ローディングが解除された後に発行されます。",
+    "Returns a promise that resolves when the loading will dismiss.": "ローディングが解除されるタイミングを解決するPromiseを返します。",
+    "Emitted before the loading has presented.": "ローディングが提示される前に発行されます。",
+    "Emitted after the loading has presented.": "ローディングが提示された後に発行されます。",
+    "Emitted before the loading has dismissed.": "ローディングが解除される前に発行されます。",
+    "Present the loading overlay after it has been created.": "作成後のローディングオーバーレイを提示します。",
     "Optional text content to display in the loading indicator.": "ロードインジケータに表示するテキストコンテンツは任意です。",
     "If `true`, the loading indicator will animate.": "`true`の場合、ロードインジケータをアニメーションで表示します。",
     "Number of milliseconds to wait before dismissing the loading indicator.": "ローディングインジケータを解除するまでの待ち時間（ミリ秒）。",
-    "Dismiss the loading overlay after it has been presented.": "ローディングオーバーレイが提示された後、それを解除する。",
+    "Dismiss the loading overlay after it has been presented.": "ローディングオーバーレイが提示された後、それを解除します。",
     "If `true`, the loading indicator will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。",
-    "If `true`, the loading indicator will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ロードインジケータは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "If `true`, the loading indicator will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ロードインジケータは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
     "Color of the loading spinner": "ローディングスピナーの色",
     "Minimum height of the loading dialog": "ローディングダイアログの最小高さ",
     "Height of the loading dialog": "ローディングダイアログの高さ",
-    "Maximum height of the loading dialog": "ローディングダイアログの最大高さ",
+    "Maximum height of the loading dialog": "ローディングダイアログの最大の高さ",
     "Width of the loading dialog": "ローディングダイアログの幅",
     "Background of the loading dialog": "ローディングダイアログの背景",
     "Minimum width of the loading dialog": "ローディングダイアログの最小幅",
@@ -530,91 +530,91 @@
     "Border radius of the menu button": "メニューボタンのボーダー半径",
     "Background of the menu button when focused with the tab key": "タブキーでフォーカスしたときのメニューボタンの背景色",
     "Color of the menu button on hover": "ホバー時のメニューボタンの色",
-    "If `true`, the user cannot interact with the menu button.": "`true`の場合、ユーザはメニューボタンを操作することができない。",
+    "If `true`, the user cannot interact with the menu button.": "`true`の場合、ユーザはメニューボタンを操作することができません。",
     "Color of the menu button when focused with the tab key": "タブキーでフォーカスしたときのメニューボタンの色",
     "The menu button icon (uses ion-icon).": "メニューボタンのアイコン（ion-iconを使用）です。",
     "Automatically hides the menu button when the corresponding menu is not active": "対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。",
     "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle": "メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。",
     "Color of the menu button": "メニューボタンの色",
     "Content is placed inside the toggle to act as the click target.": "トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。",
-    "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.": "メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルする。",
-    "Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.": "対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にする。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
+    "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.": "メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルします。",
+    "Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.": "対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にします。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
     "An id for the menu.": "メニューのIDです。",
     "Background of the menu": "メニューの背景",
     "If `true`, swiping the menu is enabled.": "`true`の場合、スワイプによるメニュー操作が有効になる。",
-    "Emitted when the menu is about to be closed.": "メニューが閉じられようとするときに発する。",
+    "Emitted when the menu is about to be closed.": "メニューが閉じられようとするときに発します。",
     "Height of the menu": "メニューの高さ",
-    "Emitted when the menu is closed.": "メニューが閉じられたときに発する。",
+    "Emitted when the menu is closed.": "メニューが閉じられたときに発します。",
     "The display type of the menu. Available options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.": "メニューの表示形式を指定します。利用可能なオプション。overlay\"`, `\"reveal\"`, `\"push\"`.",
-    "Emitted when the menu is about to be opened.": "メニューが開かれようとするときに発する。",
-    "Emitted when the menu is open.": "メニューが開いているときに発せられる。",
+    "Emitted when the menu is about to be opened.": "メニューが開かれようとするときに発します。",
+    "Emitted when the menu is open.": "メニューが開いているときに発行されます。",
     "The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.": "メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
-    "Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.": "メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返す。",
+    "Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.": "メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。",
     "Which side of the view the menu should be placed.": "メニューがビューのどの側に配置されるべきか。",
-    "Returns `true` is the menu is open.": "メニューが開いている場合は `true` を返す。",
-    "Opens or closes the button. If the operation can't be completed successfully, it returns `false`.": "ボタンを開いたり閉じたりする。操作が正常に完了しない場合は `false` を返す。",
+    "Returns `true` is the menu is open.": "メニューが開いている場合は `true` を返します。",
+    "Opens or closes the button. If the operation can't be completed successfully, it returns `false`.": "ボタンを開いたり閉じたりします。操作が正常に完了しない場合は `false` を返します。",
     "The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.": "ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。",
-    "Opens the menu. If the menu is already open or it can't be opened, it returns `false`.": "メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返す。",
-    "Returns `true` is the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.": "メニューがアクティブであれば `true` を返す。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味する。",
-    "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.": "メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとする。操作が正常に完了しない場合は、`false`を返す。",
+    "Opens the menu. If the menu is already open or it can't be opened, it returns `false`.": "メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返します。",
+    "Returns `true` is the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.": "メニューがアクティブであれば `true` を返します。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味します。",
+    "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.": "メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、`false`を返します。",
     "If `true`, the menu is disabled.": "`true`の場合、メニューは無効化される。",
     "Width of the menu": "メニューの幅",
     "Minimum width of the menu": "メニューの最小幅",
     "The container for the menu content.": "メニューの内容を格納するコンテナです。",
-    "Maximum height of the menu": "メニューの最大高さ",
+    "Maximum height of the menu": "メニューの最大の高さ",
     "Maximum width of the menu": "メニューの最大幅",
     "Minimum height of the menu": "メニューの高さの最小値",
     "The backdrop that appears over the main content when the menu is open.": "メニューを開いているときに、メインコンテンツの上に表示される背景です。",
     "Additional attributes to pass to the modal.": "モーダルに渡す追加属性。",
     "Animation to use when the modal is dismissed.": "モーダルが解除されたときに使用するアニメーションです。",
-    "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.": "`true`の場合、スワイプでモーダルを解除することができます。iOSモードでのみ適用されます。",
+    "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.": "`true`の場合、スワイプでモーダルを解除することができます。iOS modeでのみ適用されます。",
     "Returns the current breakpoint of a sheet style modal": "シートスタイルモーダルの現在のブレークポイントを返します。",
     "An ID corresponding to the trigger element that causes the modal to open when clicked.": "クリックされたときにモーダルを開かせるトリガー要素に対応するIDです。",
     "Animation to use when the modal is presented.": "モーダルが表示されたときに使用するアニメーション。",
     "If `true`, the modal will animate.": "`true`の場合、モーダルはアニメーションを行います。",
     "If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.": "`true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。",
-    "Dismiss the modal overlay after it has been presented.": "モーダルオーバーレイが表示された後、それを解除する。",
+    "Dismiss the modal overlay after it has been presented.": "モーダルオーバーレイが表示された後、それを解除します。",
     "The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.": "シートモーダルの上部に表示される水平線です。breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
     "A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array.": "シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。",
     "Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.": "モーダルが `dismiss` メソッドを呼び出したときに、退出できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
     "If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.": "`true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
     "The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]": "シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1]",
     "If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.": "`true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。  注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。",
-    "The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.": "モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSモードでのみ適用されます。",
+    "The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.": "モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSmodeでのみ適用されます。",
     "If `true`, the modal will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとモーダルは解除されます。",
     "A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.": "シートモーダル使用時に背景がフェードインし始めるポイントを示す0～1の10進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。",
     "The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed. Set to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).": "ハンドルが押されたときのシートモーダルのインタラクション動作です。  デフォルトは `\"none\"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle\"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle` プロパティが `false` に設定されている場合、または `breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。",
     "Width of the modal": "モーダルの幅",
     "Background of the modal content": "モーダルコンテンツの背景",
     "Border radius of the modal content": "モーダルコンテンツのボーダー半径",
-    "Emitted before the modal has dismissed.": "モーダルが解散する前に発行される。",
-    "Emitted before the modal has presented.": "モーダルが提示される前に発せられる。",
+    "Emitted before the modal has dismissed.": "モーダルが解散する前に発行されます。",
+    "Emitted before the modal has presented.": "モーダルが提示される前に発行されます。",
     "Minimum height of the modal": "モーダルの最小高さ",
     "Border color of the modal content": "モーダルコンテンツのボーダーカラー",
-    "Emitted before the modal has presented. Shorthand for ionModalWillPresent.": "モーダルが提示される前に発せられる。ionModalWillPresent の略記です。",
+    "Emitted before the modal has presented. Shorthand for ionModalWillPresent.": "モーダルが提示される前に発行されます。ionModalWillPresent の略記です。",
     "Border width of the modal content": "モーダルコンテンツのボーダー幅",
     "Content is placed inside of the `.modal-content` element.": "コンテンツは `.modal-content` 要素の内側に配置されます。",
-    "Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.": "モーダルが解散する前に発せられる。ionModalWillDismiss の略記です。",
-    "Maximum height of the modal": "モーダルの最大高さ",
+    "Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.": "モーダルが解散する前に発行されます。ionModalWillDismiss の略記です。",
+    "Maximum height of the modal": "モーダルの最大の高さ",
     "Maximum width of the modal": "モーダルの最大幅",
     "Minimum width of the modal": "モーダルの最小幅",
     "Height of the modal": "モーダルの高さ",
     "Border style of the modal content": "モーダルコンテンツのボーダースタイル",
     "Emitted after the modal has dismissed.": "モーダルが終了した後に発行されます。",
-    "Present the modal overlay after it has been created.": "モーダルオーバーレイを作成した後に提示する。",
-    "Emitted after the modal breakpoint has changed.": "モードブレークポイントが変更された後に発せられる。",
-    "Emitted after the modal has presented.": "モードが提示された後に発せられる。",
+    "Present the modal overlay after it has been created.": "モーダルオーバーレイを作成した後に提示します。",
+    "Emitted after the modal breakpoint has changed.": "モーダルブレークポイントが変更された後に発行されます。",
+    "Emitted after the modal has presented.": "モーダルが提示された後に発行されます。",
     "The `ion-backdrop` element.": "ion-backdrop`要素です。",
-    "The wrapper element for the default slot.": "デフォルトスロットのラッパー要素です。",
-    "Returns a promise that resolves when the modal will dismiss.": "モーダルがいつ解散するかを解決するプロミスを返します。",
-    "Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.": "モーダルが解散した後に発せられる。ionModalDidDismiss の略記です。",
-    "Returns a promise that resolves when the modal did dismiss.": "モーダルが解除されたときに解決するプロミスを返します。",
+    "The wrapper element for the default slot.": "デフォルトslotのラッパー要素です。",
+    "Returns a promise that resolves when the modal will dismiss.": "モーダルがいつ解散するかを解決するPromiseを返します。",
+    "Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.": "モーダルが解散した後に発行されます。ionModalDidDismiss の略記です。",
+    "Returns a promise that resolves when the modal did dismiss.": "モーダルが解除されたときに解決するPromiseを返します。",
     "The handle that is displayed at the top of the sheet modal when `handle=\"true\"`.": "handle=\"true\"`のときにシートモーダルの上部に表示されるハンドルです。",
     "Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.": "シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。",
-    "Emitted after the modal has presented. Shorthand for ionModalDidPresent.": "モードが提示された後に発せられる。ionModalDidPresent の略記です。",
+    "Emitted after the modal has presented. Shorthand for ionModalDidPresent.": "モーダルが提示された後に発行されます。ionModalDidPresent の略記です。",
     "The transition animation when navigating to another page.": "別ページに移動する際の遷移アニメーション。",
-    "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.": "コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用する。",
-    "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.": "ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用する。",
+    "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.": "コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用します。",
+    "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.": "ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
     "The transition direction when navigating to another page.": "別ページに移動する際の遷移方向です。",
     "Get the view at the specified index.": "指定されたインデックスにあるビューを取得します。",
     "Removes a component from the navigation stack at the specified index.": "指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。",
@@ -622,47 +622,47 @@
     "If the nav component should allow for swipe-to-go-back.": "ナビコンポーネントがスワイプで戻ることができるようにする場合。",
     "Get the previous view.": "前のビューを取得します。",
     "Root NavComponent to load": "ロードするルートNavComponent",
-    "If `true`, the nav should animate the transition of components.": "`true`の場合、コンポーネントの遷移をアニメーションで表現する。",
-    "Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.": "指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入する。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
+    "If `true`, the nav should animate the transition of components.": "`true`の場合、コンポーネントの遷移をアニメーションで表現します。",
+    "Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.": "指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
     "Pop to a specific index in the navigation stack.": "ナビゲーションスタック内の特定のインデックスにポップします。",
     "Get the active view.": "アクティブビューを取得します。",
     "Returns `true` if the current view can go back.": "現在のビューが戻ることができる場合は `true` を返します。",
     "Event fired when the nav has changed components": "ナビのコンポーネントが変更されたときに発生するイベント",
-    "Pop a component off of the navigation stack. Navigates back from the current component.": "ナビゲーションスタックからコンポーネントをポップオフする。現在のコンポーネントからナビゲートして戻る。",
+    "Pop a component off of the navigation stack. Navigates back from the current component.": "ナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。",
     "Any parameters for the root component": "ルートコンポーネントの任意のパラメータ",
     "Navigate back to the root of the stack, no matter how far back that is.": "スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。",
     "Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.": "指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。",
     "Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.": "新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。",
     "Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.": "現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。",
-    "By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.": "デフォルトでは、`ion-nav` はモード（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
+    "By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.": "デフォルトでは、`ion-nav` はmode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
     "Event fired when the nav will change components": "ナビコンポーネントが変更されたときに発生するイベント",
     "Color of the note": "ノートの色",
     "If `true`, the picker will animate.": "`true`の場合、ピッカーはアニメーションを行います。",
-    "Returns a promise that resolves when the picker did dismiss.": "ピッカーが解散したことを解決するプロミスを返します。",
+    "Returns a promise that resolves when the picker did dismiss.": "ピッカーが解散したことを解決するPromiseを返します。",
     "Array of columns to be displayed in the picker.": "ピッカーに表示されるカラムの配列。",
-    "Emitted before the picker has dismissed.": "ピッカーが解散する前に発行される。",
-    "Emitted before the picker has presented.": "ピッカーが提示される前に発せられる。",
-    "Present the picker overlay after it has been created.": "ピッカー・オーバーレイを作成した後に提示する。",
-    "Emitted after the picker has dismissed.": "ピッカーが解散した後に発せられる。",
+    "Emitted before the picker has dismissed.": "ピッカーが解散する前に発行されます。",
+    "Emitted before the picker has presented.": "ピッカーが提示される前に発行されます。",
+    "Present the picker overlay after it has been created.": "ピッカー・オーバーレイを作成した後に提示します。",
+    "Emitted after the picker has dismissed.": "ピッカーが解散した後に発行されます。",
     "Additional attributes to pass to the picker.": "ピッカーに渡す追加属性。",
     "Number of milliseconds to wait before dismissing the picker.": "ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。",
     "Animation to use when the picker is dismissed.": "ピッカーが解除されたときに使用するアニメーションです。",
     "If `true`, a backdrop will be displayed behind the picker.": "`true`の場合、ピッカーの後ろに背景が表示されます。",
     "Get the column that matches the specified name.": "指定された名前に一致するカラムを取得します。",
-    "Emitted after the picker has presented.": "ピッカーが提示された後に発せられる。",
+    "Emitted after the picker has presented.": "ピッカーが提示された後に発行されます。",
     "Animation to use when the picker is presented.": "ピッカーが表示されたときに使用するアニメーション。",
-    "Returns a promise that resolves when the picker will dismiss.": "ピッカーが解散するタイミングを解決するプロミスを返します。",
+    "Returns a promise that resolves when the picker will dismiss.": "ピッカーが解散するタイミングを解決するPromiseを返します。",
     "Array of buttons to be displayed at the top of the picker.": "ピッカーの上部に表示されるボタンの配列。",
-    "Dismiss the picker overlay after it has been presented.": "ピッカー・オーバーレイが表示された後、それを解除する。",
+    "Dismiss the picker overlay after it has been presented.": "ピッカー・オーバーレイが表示された後、それを解除します。",
     "If `true`, the picker will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとピッカーが解除される。",
     "Minimum width of the picker": "ピッカーの最小幅",
     "Border width of the picker": "ピッカーのボーダー幅",
     "Width of the picker": "ピッカーの幅",
     "Maximum width of the picker": "ピッカーの最大幅",
-    "Minimum height of the picker": "ピッカーの最低高さ",
-    "Maximum height of the picker": "ピッカーの最大高さ",
+    "Minimum height of the picker": "ピッカーの最小の高さ",
+    "Maximum height of the picker": "ピッカーの最大の高さ",
     "Height of the picker": "ピッカーの高さ",
-    "Background of the picker in rgb format": "ピッカーの背景（rgb形式",
+    "Background of the picker in rgb format": "ピッカーの背景（rgb形式）",
     "Border style of the picker": "ピッカーのボーダースタイル",
     "Background of the picker": "ピッカーの背景",
     "Border color of the picker": "ピッカーのボーダーカラー",
@@ -672,17 +672,17 @@
     "Animation to use when the popover is dismissed.": "ポップオーバーが解除されたときに使用するアニメーションです。",
     "If `true`, the popover will be automatically dismissed when the content has been clicked.": "`true`の場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。",
     "If `true`, the popover will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされたときにポップオーバーが解除される。",
-    "If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.": "`true`の場合、`ios`モードで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。md` モードでは適用されない。",
+    "If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.": "`true`の場合、`ios` modeで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。 `md` modeでは適用されない。",
     "If `true`, the popover will animate.": "`true`の場合、ポップオーバーはアニメーションを行います。",
     "The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.": "ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。",
     "If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.": "`true`の場合、ポップオーバーは開く。もし `false` ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または `trigger` プロパティを使用します。注意: ポップオーバーが閉じると `isOpen` は自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
     "If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.": "`true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、またはDOMに存在するかどうかを制御しません。",
-    "Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `'center'` で、`md` モードでは `'start'` です。",
+    "Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` modeでは `'center'` で、`md` modeでは `'start'` です。",
     "The event to pass to the popover animation.": "ポップオーバー・アニメーションに渡すイベントです。",
     "Additional attributes to pass to the popover.": "ポップオーバーに渡す追加属性。",
     "Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
-    "If `true`, the popover will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ポップオーバーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
-    "Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述する。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
+    "If `true`, the popover will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ポップオーバーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
     "The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.": "ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでよい。",
     "If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.": "`true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。  注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。",
     "Maximum width of the popover": "ポップオーバーの最大幅",
@@ -691,11 +691,11 @@
     "Height of the popover": "ポップオーバーの高さ",
     "Minimum width of the popover": "ポップオーバーの最小幅",
     "The amount to move the popover by on the x-axis": "ポップオーバーをX軸方向に移動させる量",
-    "Maximum height of the popover": "ポップオーバーの最大高さ",
-    "Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.": "ポップオーバーが解散する前に発せられる。ionPopoverWillDismissの略記です。",
+    "Maximum height of the popover": "ポップオーバーの最大の高さ",
+    "Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.": "ポップオーバーが解散する前に発行されます。ionPopoverWillDismissの略記です。",
     "Minimum height of the popover": "ポップオーバーの高さの最小値",
     "Background of the popover": "ポップオーバーの背景",
-    "The arrow that points to the reference element. Only applies on `ios` mode.": "参照要素を指し示す矢印。ios`モード時のみ適用される。",
+    "The arrow that points to the reference element. Only applies on `ios` mode.": "参照要素を指し示す矢印。`ios` mode時のみ適用される。",
     "Width of the popover": "ポップオーバーの幅",
     "Emitted before the popover has dismissed.": "ポップオーバーが解除される前に発行されます。",
     "Emitted after the popover has dismissed.": "ポップオーバーが解除された後に発行されます。",
@@ -704,11 +704,11 @@
     "Emitted after the popover has presented.": "ポップオーバーが表示された後に発行されます。",
     "Content is placed inside of the `.popover-content` element.": "コンテンツは `.popover-content` 要素の内部に配置される。",
     "Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.": "ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。",
-    "Returns a promise that resolves when the popover will dismiss.": "ポップオーバーが解除されるタイミングを解決するプロミスを返します。",
-    "Dismiss the popover overlay after it has been presented.": "ポップオーバーオーバーレイが提示された後、それを解除する。",
+    "Returns a promise that resolves when the popover will dismiss.": "ポップオーバーが解除されるタイミングを解決するPromiseを返します。",
+    "Dismiss the popover overlay after it has been presented.": "ポップオーバーオーバーレイが提示された後、それを解除します。",
     "Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.": "ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。",
-    "Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述する。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
-    "Returns a promise that resolves when the popover did dismiss.": "ポップオーバーが解除されたタイミングを解決するプロミスを返します。",
+    "Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
+    "Returns a promise that resolves when the popover did dismiss.": "ポップオーバーが解除されたタイミングを解決するPromiseを返します。",
     "Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.": "ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。",
     "An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.": "ポップオーバーを開かせるトリガー要素に対応するIDです。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。",
     "Background of the progress bar representing the current value": "現在値を表すプログレスバーの背景",
@@ -718,50 +718,50 @@
     "The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`.": "バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `\"determinate\"` のときのみ表示される。",
     "The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`.": "type`が`\"determinate\"`のときは現在値を表示し、`type`が`\"indeterminate\"`のときは前後にスライドするプログレスバーです。",
     "The state of the progress bar, based on if the time the process takes is known or not. Default options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).": "処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate\"` (アニメーションなし), `\"indeterminate\"` (左から右へアニメーションする).",
-    "The value determines how much of the active bar should display when the `type` is `\"determinate\"`. The value should be between [0, 1].": "この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものである。値は [0, 1] の間であるべきです。",
-    "DEPRECATED, use `--background` instead": "DEPRECATED、代わりに `--background` を使用する。",
+    "The value determines how much of the active bar should display when the `type` is `\"determinate\"`. The value should be between [0, 1].": "この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものです。値は [0, 1] の間であるべきです。",
+    "DEPRECATED, use `--background` instead": "DEPRECATED、代わりに `--background` を使用します。",
     "If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].": "バッファと値が1より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。",
     "the value of the radio group.": "無線グループの値です。",
     "If `true`, the radios can be deselected.": "`true`の場合、ラジオを非選択にすることができる。",
     "The checkmark or dot used to indicate the checked state.": "チェックされた状態を示すために使用されるチェックマークまたはドットです。",
     "Color of the checked radio": "チェックしたラジオの色",
     "The container for the radio mark.": "ラジオマークの入れ物です。",
-    "Emitted when the radio button has focus.": "ラジオボタンにフォーカスが当たったときに発せられる。",
+    "Emitted when the radio button has focus.": "ラジオボタンにフォーカスが当たったときに発行されます。",
     "Border radius of the radio": "無線機のボーダー半径",
     "Color of the radio": "ラジオのカラー",
     "Border radius of the inner checked radio": "内側のチェック付きラジオのボーダー半径",
-    "Emitted when the radio button loses focus.": "ラジオボタンのフォーカスが外れたときに発せられる。",
+    "Emitted when the radio button loses focus.": "ラジオボタンのフォーカスが外れたときに発行されます。",
     "the value of the radio.": "は、無線機の値です。",
-    "If `true`, the user cannot interact with the radio.": "`true`の場合、ユーザはラジオと対話することができない。",
+    "If `true`, the user cannot interact with the radio.": "`true`の場合、ユーザはラジオと対話することができません。",
     "Background of the range bar": "レンジバーの背景",
     "Minimum integer value of the range.": "範囲の最小の整数値。",
-    "Emitted when the range has focus.": "レンジのフォーカスが合ったときに発する。",
+    "Emitted when the range has focus.": "レンジのフォーカスが合ったときに発します。",
     "Maximum integer value of the range.": "範囲の最大整数値。",
-    "Show two knobs.": "2つのノブを表示する。",
-    "If `true`, the user cannot interact with the range.": "`true`の場合、ユーザは範囲と対話することができない。",
-    "Emitted when the range loses focus.": "レンジの焦点が合わなくなったときに発する。",
-    "If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.": "`true`の場合、ステップの値に基づいてティックマークを表示する。snaps`が `true` の場合のみ適用される。",
+    "Show two knobs.": "2つのノブを表示します。",
+    "If `true`, the user cannot interact with the range.": "`true`の場合、ユーザは範囲と対話することができません。",
+    "Emitted when the range loses focus.": "レンジの焦点が合わなくなったときに発します。",
+    "If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.": "`true`の場合、ステップの値に基づいてティックマークを表示します。snaps`が `true` の場合のみ適用される。",
     "How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.": "範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。",
     "the value of the range.": "範囲の値です。",
     "If `true`, the knob snaps to tick marks evenly spaced based on the step property value.": "`true`の場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。",
     "Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。",
     "Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。",
     "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\"). Valid values are greater than or equal to the min value and less than or equal to the max value.": "レンジアクティブバーの開始位置です。この機能は、ノブが1つの場合のみ有効です（dualKnobs=\"false\"）。有効な値は、min値以上、max値以下です。",
-    "Specifies the value granularity.": "値の粒度を指定する。",
+    "Specifies the value granularity.": "値の粒度を指定します。",
     "If `true`, a pin with integer value is shown when the knob is pressed.": "`true`の場合、ノブを押したときに整数値のピンが表示されます。",
     "A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.": "ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。",
     "An inactive tick mark.": "非アクティブなティックマークです。",
     "Box shadow of the range knob": "レンジノブのボックスシャドウ",
     "The active part of the bar.": "バーのアクティブな部分です。",
     "The handle that is used to drag the range.": "範囲をドラッグする際に使用するハンドル。",
-    "Color of the range pin (only available in MD mode)": "レンジピンの色（MDモード時のみ有効）",
+    "Color of the range pin (only available in MD mode)": "レンジピンの色（MD mode時のみ有効）",
     "The counter that appears above a knob.": "ノブの上に表示されるカウンターです。",
     "Size of the range knob": "レンジツマミの大きさ",
     "Background of the range knob": "レンジノブの背景",
     "Height of the range": "レンジの高さ",
     "The inactive part of the bar.": "バーの非アクティブな部分。",
     "Border radius of the range knob": "レンジツマミのボーダー半径",
-    "Background of the range pin (only available in MD mode)": "レンジピンの背景（MDモード時のみ有効）",
+    "Background of the range pin (only available in MD mode)": "レンジピンの背景（MD mode時のみ有効）",
     "Content is placed to the left of the range slider in LTR, and to the right in RTL.": "コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。",
     "Content is placed to the right of the range slider in LTR, and to the left in RTL.": "コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。",
     "Background of the active range bar": "アクティブレンジバーの背景",
@@ -772,31 +772,31 @@
     "A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.": "プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOSデバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。",
     "The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
     "The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
-    "Emitted while the user is pulling down the content and exposing the refresher.": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発する。",
+    "Emitted while the user is pulling down the content and exposing the refresher.": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発します。",
     "If `true`, the refresher will be hidden.": "`true`の場合、リフレッシャーは非表示となる。",
     "Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
-    "Changes the refresher's state from `refreshing` to `cancelling`.": "リフレッシュの状態を `refreshing` から `cancelling` に変更する。",
-    "Emitted when the user begins to start pulling down.": "ユーザーが引き下げを開始するときに発する。",
+    "Changes the refresher's state from `refreshing` to `cancelling`.": "リフレッシュの状態を `refreshing` から `cancelling` に変更します。",
+    "Emitted when the user begins to start pulling down.": "ユーザーが引き下げを開始するときに発します。",
     "Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`.": "非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。",
     "The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。",
-    "The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果である。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+    "The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果です。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
     "A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.": "ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。",
-    "Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.": "ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発せられる。リフレッシャーの状態を `refreshing` に更新する。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
+    "Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.": "ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発行されます。リフレッシャーの状態を `refreshing` に更新します。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
     "Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが `refreshing` 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。",
     "How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.": "引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。  例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。  リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
     "Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.": "再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。",
-    "Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.": "再注文操作を完了する。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
+    "Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.": "再注文操作を完了します。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
     "If `true`, the reorder will be hidden.": "`true`の場合、リオーダーは非表示になる。",
     "The icon of the reorder handle (uses ion-icon).": "リオーダーハンドルのアイコンです（ion-iconを使用）。",
-    "Adds the ripple effect to the parent element.": "親要素に波及効果を付加する。",
+    "Adds the ripple effect to the parent element.": "親要素に波及効果を付加します。",
     "Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.": "リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。  注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。",
     "Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.  `ion-router` captures this event in order to update his internal registry of router rules.": "このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。",
     "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その「from」URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
-    "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.  The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.  Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.  When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the \"from\" value matches.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLである。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトする。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできない。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
+    "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.  The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.  Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.  When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the \"from\" value matches.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLです。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
     "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.": "キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。",
-    "Used internally by `ion-router` to know when this route did change.": "このルートがいつ変更されたかを知るために `ion-router` が内部で使用する。",
+    "Used internally by `ion-router` to know when this route did change.": "このルートがいつ変更されたかを知るために `ion-router` が内部で使用します。",
     "Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.": "このルートを適用するために一致させる必要がある相対パスです。  expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。",
-    "A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.": "ルートが入力しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
+    "A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.": "ルーターがアクセスしようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
     "A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.": "ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
     "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.": "ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。  このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。",
     "Text color of the router link": "ルーターリンクの文字色",
@@ -804,38 +804,38 @@
     "If `true`, the router-outlet should animate the transition of components.": "`true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。",
     "This property allows to create custom transition using AnimationBuilder functions.": "このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
     "Emitted when the route had changed": "ルートが変更されたときに発する",
-    "Navigate to the specified path.": "指定されたパスに移動する。",
-    "Event emitted when the route is about to change": "ルートが変更されようとするときに発せられるイベント",
+    "Navigate to the specified path.": "指定されたパスに移動します。",
+    "Event emitted when the route is about to change": "ルートが変更されようとするときに発行されます。イベント",
     "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify an alternate prefix for all URL paths.": "URLのマッチング時に使用するルートパスです。デフォルトでは\"/\"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。",
     "Go back to previous page in the window.history.": "window.historyで前ページに戻る。",
-    "The router can work in two \"modes\": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.": "ルーターは2つの \"モード \"で動作します。- ハッシュを使用する。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
-    "If `true`, enable searchbar animation.": "`true`の場合、検索バーのアニメーションを有効にする。",
-    "Set the the cancel button text. Only applies to `ios` mode.": "キャンセルボタンのテキストを設定します。ios`モードのみ適用されます。",
-    "Set the input's autocomplete property.": "入力のオートコンプリートプロパティを設定します。",
-    "Emitted when the cancel button is clicked.": "キャンセルボタンがクリックされたときに発せられる。",
-    "Set the input's autocorrect property.": "入力のオートコレクトプロパティを設定します。",
-    "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.": "クリアアイコンを設定する。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
-    "The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.": "検索アイコンとして使用するアイコンです。デフォルトは `ios` モードでは `search-outline` 、`md` モードでは `search-sharp` である。",
-    "If `true`, enable spellcheck on the input.": "`true`の場合、入力のスペルチェックを有効にする。",
-    "the value of the searchbar.": "サーチバーの値。",
-    "Sets the behavior for the cancel button. Defaults to `\"never\"`. Setting to `\"focus\"` shows the cancel button on focus. Setting to `\"never\"` hides the cancel button. Setting to `\"always\"` shows the cancel button regardless of focus state.": "キャンセルボタンに関する動作を設定する。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にする。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示する。",
-    "Set the type of the input.": "入力の種類を設定します。",
-    "Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "入力のプレースホルダーを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
-    "Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.": "キャンセルボタンのアイコンを設定する。md`モードのみに適用されます。デフォルトは `arrow-back-sharp` です。",
+    "The router can work in two \"modes\": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.": "ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
+    "If `true`, enable searchbar animation.": "`true`の場合、検索バーのアニメーションを有効にします。",
+    "Set the the cancel button text. Only applies to `ios` mode.": "キャンセルボタンのテキストを設定します。 `ios` modeのみ適用されます。",
+    "Set the input's autocomplete property.": "Inputのオートコンプリートプロパティを設定します。",
+    "Emitted when the cancel button is clicked.": "キャンセルボタンがクリックされたときに発行されます。",
+    "Set the input's autocorrect property.": "Inputのオートコレクトプロパティを設定します。",
+    "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.": "クリアアイコンを設定します。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
+    "The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.": "検索アイコンとして使用するアイコンです。デフォルトは `ios` modeでは `search-outline` 、`md` modeでは `search-sharp` です。",
+    "If `true`, enable spellcheck on the input.": "`true`の場合、入力値のスペルチェックを有効にします。",
+    "the value of the searchbar.": "検索バーの値。",
+    "Sets the behavior for the cancel button. Defaults to `\"never\"`. Setting to `\"focus\"` shows the cancel button on focus. Setting to `\"never\"` hides the cancel button. Setting to `\"always\"` shows the cancel button regardless of focus state.": "キャンセルボタンに関する動作を設定します。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にします。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。",
+    "Set the type of the input.": "Inputの種類を設定します。",
+    "Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.": "キャンセルボタンのアイコンを設定します。 `md` modeのみに適用されます。デフォルトは `arrow-back-sharp` です。",
     "Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`.": "指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。",
-    "Sets the behavior for the clear button. Defaults to `\"focus\"`. Setting to `\"focus\"` shows the clear button on focus if the input is not empty. Setting to `\"never\"` hides the clear button. Setting to `\"always\"` shows the clear button regardless of focus state, but only if the input is not empty.": "クリアボタンに関する動作を設定する。デフォルトは `\"focus\"` です。focus\"`に設定すると、入力が空でない場合、フォーカス時にクリアボタンを表示します。never\"`に設定すると、クリアボタンを非表示にします。always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、入力が空でない場合にのみクリアボタンを表示する。",
-    "Color of the searchbar clear button": "サーチバークリアボタンの色",
-    "Border radius of the searchbar input": "サーチバー入力のボーダー半径",
-    "Color of the searchbar cancel button": "サーチバーキャンセルボタンの色",
-    "Background of the searchbar input": "サーチバー入力の背景",
-    "Box shadow of the searchbar input": "サーチバー入力のボックスシャドウ",
-    "Opacity of the searchbar placeholder": "サーチバー・プレースホルダーの不透明度",
-    "Font style of the searchbar placeholder": "サーチバー・プレースホルダーのフォントスタイル",
-    "Color of the searchbar text": "サーチバーテキストの色",
+    "Sets the behavior for the clear button. Defaults to `\"focus\"`. Setting to `\"focus\"` shows the clear button on focus if the input is not empty. Setting to `\"never\"` hides the clear button. Setting to `\"always\"` shows the clear button regardless of focus state, but only if the input is not empty.": "クリアボタンに関する動作を設定します。デフォルトは `\"focus\"` です。`\"focus\"`に設定すると、Inputが空でない場合、フォーカス時にクリアボタンを表示します。`\"never\"`に設定すると、クリアボタンを非表示にします。`\"always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Inputが空でない場合にのみクリアボタンを表示します。",
+    "Color of the searchbar clear button": "検索バーのクリアボタンの色",
+    "Border radius of the searchbar input": "検索バーのInputのボーダー半径",
+    "Color of the searchbar cancel button": "検索バーのキャンセルボタンの色",
+    "Background of the searchbar input": "検索バーのInputの背景",
+    "Box shadow of the searchbar input": "検索バーのInputのボックスシャドウ",
+    "Opacity of the searchbar placeholder": "検索バーのプレースホルダーの不透明度",
+    "Font style of the searchbar placeholder": "検索バーのプレースホルダーのフォントスタイル",
+    "Color of the searchbar text": "検索バーのテキストの色",
     "Color of the searchbar placeholder": "検索バーのプレースホルダーの色",
     "Color of the searchbar icon": "検索バーのアイコンの色",
-    "Font weight of the searchbar placeholder": "サーチバー・プレースホルダーのフォントの太さ",
-    "Emitted when the clear input button is clicked.": "クリア入力ボタンがクリックされたときに発せられる。",
+    "Font weight of the searchbar placeholder": "検索バーのプレースホルダーのフォントの太さ",
+    "Emitted when the clear input button is clicked.": "Clear Inputボタンがクリックされたときに発行されます。",
     "Color of the segment button border": "セグメントボタンのボーダーの色",
     "Color of the checked segment button": "チェックしたセグメントボタンの色",
     "Radius of the segment button border": "セグメントボタンのボーダーの半径",
@@ -853,17 +853,17 @@
     "Background of the segment button on hover": "セグメントボタンがホバーされたときの背景",
     "Opacity of the segment button background when focused with the tab key": "タブキーでフォーカスしたときのセグメントボタンの背景の不透明度",
     "If `true`, the user cannot interact with the segment button.": "`true`の場合、ユーザーはセグメントボタンを操作することができません。",
-    "Bottom margin of the segment button": "セグメントボタンの下端マージン",
-    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button": "セグメントボタンの方向が左から右の場合は左マージン、右から左の場合は右マージン",
-    "Top margin of the segment button": "セグメントボタンの上マージン",
-    "Bottom padding of the segment button": "セグメントボタンの下パディング",
+    "Bottom margin of the segment button": "セグメントボタンのBottom Margin",
+    "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button": "セグメントボタンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin",
+    "Top margin of the segment button": "セグメントボタンのTop Margin",
+    "Bottom padding of the segment button": "セグメントボタンのBottom Padding",
     "Transition of the segment button": "セグメントボタンの遷移",
-    "Top padding of the segment button": "セグメントボタンのトップパディング",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button": "セグメントボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなります。",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button": "セグメントボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなります。",
+    "Top padding of the segment button": "セグメントボタンのTop Padding",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button": "セグメントボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button": "セグメントボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。",
     "Transform of the indicator for the checked segment button": "チェックされたセグメントボタンのインジケータのトランスフォーム",
     "Height of the indicator for the checked segment button": "チェックしたセグメントボタンのインジケータの高さ",
-    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button": "セグメントボタンの方向が左から右の場合は右マージン、右から左の場合は左マージン",
+    "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button": "セグメントボタンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin",
     "Transition of the indicator for the checked segment button": "チェックしたセグメントボタンのインジケーターの遷移",
     "Color of the indicator for the checked segment button": "チェックしたセグメントボタンのインジケーターの色",
     "Box shadow on the indicator for the checked segment button": "チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける",
@@ -872,79 +872,79 @@
     "If `true`, users will be able to swipe between segment buttons to activate them.": "`true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。",
     "If `true`, the user cannot interact with the segment.": "`true`の場合、ユーザーはセグメントと対話することができません。",
     "the value of the segment.": "セグメントの価値",
-    "Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.": "valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行される。",
+    "Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.": "valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行されます。",
     "If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.": "`true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。",
     "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.": "`true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。",
     "The text value of the option.": "オプションのテキスト値です。",
-    "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.": "`true`の場合、ユーザは選択オプションと対話することができない。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからである。",
+    "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.": "`true`の場合、ユーザは選択オプションと対話することができません。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからです。",
     "the value of the select.": "セレクトの値です。",
     "The text to display on the ok button.": "okボタンに表示するテキストです。",
-    "Bottom padding of the select": "セレクトの下パディング",
+    "Bottom padding of the select": "セレクトのBottom Padding",
     "The text to display when the select is empty.": "セレクトが空のときに表示するテキストです。",
     "The text to display instead of the selected option's value.": "選択されたオプションの値の代わりに表示するテキストです。",
-    "Emitted when the select loses focus.": "セレクトのフォーカスが外れたときに発せられる。",
+    "Emitted when the select loses focus.": "セレクトのフォーカスが外れたときに発行されます。",
     "The interface the select should use: `action-sheet`, `popover` or `alert`.": "selectが使用するインターフェース。action-sheet`, `popover` または `alert`.",
-    "Emitted when the selection is cancelled.": "選択がキャンセルされたときに発する。",
+    "Emitted when the selection is cancelled.": "選択がキャンセルされたときに発します。",
     "The text to display on the cancel button.": "キャンセルボタンに表示するテキストです。",
     "Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.": "セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。",
-    "Emitted when the overlay is dismissed.": "オーバーレイが解除されたときに発せられる。",
-    "Emitted when the select has focus.": "セレクトにフォーカスが当たったときに発する。",
+    "Emitted when the overlay is dismissed.": "オーバーレイが解除されたときに発行されます。",
+    "Emitted when the select has focus.": "セレクトにフォーカスが当たったときに発します。",
     "Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.": "alert`、`action-sheet`、`popover` インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意: `interfaceOptions` は `alert` インターフェースで `inputs` や `buttons` をオーバーライドしません。",
-    "If `true`, the user cannot interact with the select.": "`true`の場合、ユーザはセレクトと対話することができない。",
+    "If `true`, the user cannot interact with the select.": "`true`の場合、ユーザはセレクトと対話することができません。",
     "If `true`, the select can accept multiple values.": "`true`の場合、selectは複数の値を受け入れることができる。",
     "A property name or function used to compare object values": "オブジェクトの値を比較するために使用されるプロパティ名または関数。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select": "セレクトの方向が左から右の場合は右パディング、右から左の場合は左パディングを行う",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select": "セレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う",
     "The select icon container.": "セレクトアイコンのコンテナです。",
     "The text displayed in the select when there is no value.": "値がないときにセレクトに表示されるテキスト。",
-    "Top padding of the select": "セレクトのトップパディング",
+    "Top padding of the select": "セレクトのTop Padding",
     "Opacity of the select placeholder text": "選択プレースホルダーテキストの不透明度",
     "Color of the select placeholder text": "セレクトプレースホルダーテキストの色",
     "The displayed value of the select.": "セレクトの表示値です。",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select": "セレクトの方向が左から右の場合は左パディング、右から左の場合は右パディング",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select": "セレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding",
     "If `true`, the skeleton text will animate.": "`true`の場合、スケルトンテキストをアニメーションさせる。",
     "Background of the skeleton text": "スケルトンテキストの背景",
     "Border radius of the skeleton text": "スケルトンテキストのボーダー半径",
     "Background of the skeleton text in rgb format": "スケルトンテキストの背景（rgb形式",
     "Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options": "swiperインスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。",
-    "Get whether or not the current slide is the first slide.": "現在のスライドが最初のスライドであるか否かを取得する。",
-    "If `true`, show the scrollbar.": "`true`の場合、スクロールバーを表示する。",
+    "Get whether or not the current slide is the first slide.": "現在のスライドが最初のスライドであるか否かを取得します。",
+    "If `true`, show the scrollbar.": "`true`の場合、スクロールバーを表示します。",
     "Get the index of the previous slide.": "前のスライドのインデックスを取得します。",
-    "Start auto play.": "オートプレイを開始する。",
-    "Transition to the specified slide.": "指定されたスライドに遷移する。",
-    "If `true`, show the pagination.": "もし `true` ならば、ページネーションを表示する。",
+    "Start auto play.": "オートプレイを開始します。",
+    "Transition to the specified slide.": "指定されたスライドに遷移します。",
+    "If `true`, show the pagination.": "もし `true` ならば、ページネーションを表示します。",
     "Transition to the previous slide.": "前のスライドに遷移します。",
     "Update the underlying slider implementation. Call this if you've added or removed child slides.": "基礎となるスライダーの実装を更新します。子スライダーを追加または削除した場合に呼び出します。",
     "Lock or unlock the ability to slide to the previous slide.": "前のスライドにスライドする機能をロックまたはアンロックします。",
-    "Get whether or not the current slide is the last slide.": "現在のスライドが最後のスライドであるか否かを取得する。",
-    "Lock or unlock the ability to slide to the next slide.": "次のスライドにスライドする機能をロックまたはアンロックする。",
+    "Get whether or not the current slide is the last slide.": "現在のスライドが最後のスライドであるか否かを取得します。",
+    "Lock or unlock the ability to slide to the next slide.": "次のスライドにスライドする機能をロックまたはアンロックします。",
     "Lock or unlock the ability to slide to the next or previous slide.": "次のスライドや前のスライドにスライドする機能をロックまたはアンロックします。",
     "Get the index of the active slide.": "アクティブなスライドのインデックスを取得します。",
-    "Get the total number of slides.": "スライドの総枚数を取得する。",
+    "Get the total number of slides.": "スライドの総枚数を取得します。",
     "Get the Swiper instance. Use this to access the full Swiper API. See https://swiperjs.com/swiper-api for all API options.": "Swiperのインスタンスを取得します。これを使用して、SwiperのフルAPIにアクセスします。すべてのAPIオプションについては、https://swiperjs.com/swiper-api を参照してください。",
-    "Stop auto play.": "自動再生を停止する。",
+    "Stop auto play.": "自動再生を停止します。",
     "Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.": "speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeightが有効な場合）。",
     "Transition to the next slide.": "次のスライドに遷移します。",
-    "Emitted when the user first touches the slider.": "ユーザーがスライダーに初めて触れたときに発せられる。",
+    "Emitted when the user first touches the slider.": "ユーザーがスライダーに初めて触れたときに発行されます。",
     "Background of the active pagination bullet": "アクティブなページネーションバレットの背景",
     "Background of the active pagination progress-bar": "アクティブなページネーションの進行バーの背景",
     "Background of the pagination bullets": "ページネーションの箇条書きの背景",
     "Background of the pagination progress-bar": "ページネーションの進行バーの背景",
-    "Emitted when the slide transition has ended.": "スライド遷移が終了したときに発せられる。",
-    "Emitted after Swiper initialization": "Swiperの初期化後に発せられる",
-    "Emitted when the slider is at its initial position.": "スライダーが初期位置にあるときに発せられる。",
-    "Emitted when the user releases the touch.": "ユーザーがタッチを離したときに発せられる。",
-    "Emitted before the active slide has changed.": "アクティブスライドが変更される前に発せられる。",
-    "Emitted when the user taps/clicks on the slide's container.": "ユーザがスライドのコンテナをタップ/クリックしたときに発せられる。",
-    "Emitted when the slide transition has started.": "スライド遷移が開始されたときに発せられる。",
-    "Emitted when the next slide has ended.": "次のスライドが終了したときに発せられる。",
-    "Emitted when the next slide has started.": "次のスライドが開始されたときに発せられる。",
-    "Emitted when the slider is actively being moved.": "スライダーがアクティブに移動しているときに発せられる。",
-    "Emitted when the user double taps on the slide's container.": "ユーザがスライドのコンテナをダブルタップしたときに発生する。",
-    "Emitted when the previous slide has started.": "前のスライドが開始されたときに発せられる。",
-    "Emitted after the active slide has changed.": "アクティブスライドが変更された後に発せられる。",
-    "Emitted when the previous slide has ended.": "前のスライドが終了したときに発せられる。",
+    "Emitted when the slide transition has ended.": "スライド遷移が終了したときに発行されます。",
+    "Emitted after Swiper initialization": "Swiperの初期化後に発行されます。",
+    "Emitted when the slider is at its initial position.": "スライダーが初期位置にあるときに発行されます。",
+    "Emitted when the user releases the touch.": "ユーザーがタッチを離したときに発行されます。",
+    "Emitted before the active slide has changed.": "アクティブスライドが変更される前に発行されます。",
+    "Emitted when the user taps/clicks on the slide's container.": "ユーザがスライドのコンテナをタップ/クリックしたときに発行されます。",
+    "Emitted when the slide transition has started.": "スライド遷移が開始されたときに発行されます。",
+    "Emitted when the next slide has ended.": "次のスライドが終了したときに発行されます。",
+    "Emitted when the next slide has started.": "次のスライドが開始されたときに発行されます。",
+    "Emitted when the slider is actively being moved.": "スライダーがアクティブに移動しているときに発行されます。",
+    "Emitted when the user double taps on the slide's container.": "ユーザがスライドのコンテナをダブルタップしたときに発生します。",
+    "Emitted when the previous slide has started.": "前のスライドが開始されたときに発行されます。",
+    "Emitted after the active slide has changed.": "アクティブスライドが変更された後に発行されます。",
+    "Emitted when the previous slide has ended.": "前のスライドが終了したときに発行されます。",
     "Background of the pagination scroll-bar": "ページネーション用スクロールバーの背景",
-    "Emitted when the slider is at the last slide.": "スライダーが最後のスライドになったときに発せられる。",
+    "Emitted when the slider is at the last slide.": "スライダーが最後のスライドになったときに発行されます。",
     "Background of the active pagination scroll-bar": "アクティブなページネーションのスクロールバーの背景",
     "The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.": "使用するSVGスピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。",
     "Duration of the spinner animation in milliseconds. The default varies based on the spinner.": "スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。",
@@ -961,42 +961,42 @@
     "Border of the tab bar": "タブバーの境界線",
     "Color of the tab bar": "タブバーの色",
     "Background of the tab bar": "タブバーの背景",
-    "If `true`, the tab bar will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、タブバーを半透明にする。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "If `true`, the tab bar will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、タブバーを半透明にします。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
     "Color of the selected tab button": "選択されたタブボタンの色",
     "Color of the tab button": "タブボタンの色",
-    "Bottom padding of the tab button": "タブボタンの下パディング",
-    "If `true`, the user cannot interact with the tab button.": "`true`の場合、ユーザはタブボタンを操作することができない。",
-    "Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.": "タブバーのテキストとアイコンのレイアウトを設定する。デフォルトは `'icon-top'` です。",
-    "Top padding of the tab button": "タブボタンのトップパディング",
+    "Bottom padding of the tab button": "タブボタンのBottom Padding",
+    "If `true`, the user cannot interact with the tab button.": "`true`の場合、ユーザはタブボタンを操作することができません。",
+    "Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.": "タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは `'icon-top'` です。",
+    "Top padding of the tab button": "タブボタンのTop Padding",
     "Background of the tab button": "タブボタンの背景",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
     "Opacity of the tab button background when focused with the tab key": "タブキーでフォーカスしたときのタブボタンの背景の不透明度",
     "A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.": "各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
     "Color of the tab button when focused with the tab key": "タブキーでフォーカスしたときのタブボタンの色",
     "Background of the tab button when focused with the tab key": "タブキーでフォーカスされたときのタブボタンの背景",
     "The native HTML anchor element that wraps all child elements.": "すべての子要素を包むネイティブHTMLのアンカー要素です。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
     "The component to display inside of the tab.": "タブの内側に表示するコンポーネントです。",
     "Set the active component for the tab": "タブのアクティブコンポーネントを設定する",
     "Get the currently selected tab.": "現在選択されているタブを取得します。",
     "Content is placed at the bottom of the screen.": "コンテンツは画面下部に配置されます。",
-    "Select a tab by the value of its `tab` property or an element reference.": "タブの `tab` プロパティの値、または要素の参照によってタブを選択する。",
+    "Select a tab by the value of its `tab` property or an element reference.": "タブの `tab` プロパティの値、または要素の参照によってタブを選択します。",
     "Content is placed at the top of the screen.": "コンテンツは画面上部に配置されます。",
-    "Emitted when the navigation has finished transitioning to a new component.": "ナビゲーションが新しいコンポーネントに遷移し終わったときに発せられる。",
-    "Get a specific tab by the value of its `tab` property or an element reference.": "タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得する。",
-    "Emitted when the navigation is about to transition to a new component.": "ナビゲーションが新しいコンポーネントに移行しようとするときに発せられる。",
-    "Bottom padding of the textarea": "テキストエリアの底面パディング",
+    "Emitted when the navigation has finished transitioning to a new component.": "ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。",
+    "Get a specific tab by the value of its `tab` property or an element reference.": "タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得します。",
+    "Emitted when the navigation is about to transition to a new component.": "ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。",
+    "Bottom padding of the textarea": "テキストエリアのBottom Padding",
     "Color of the text": "本文の色",
-    "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.": "テキストコントロールの可視幅を、平均文字幅で指定する。指定する場合は、正の整数である必要があります。",
+    "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.": "テキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。",
     "Background of the textarea": "textareaの背景",
     "Border radius of the textarea": "テキストエリアの境界半径",
-    "Emitted when the input value has changed.": "入力値が変化したときに発せられる。",
-    "Indicates how the control wraps text.": "コントロールがテキストをどのように折り返すかを示す。",
-    "If `true`, the user cannot interact with the textarea.": "`true`の場合、ユーザはテキストエリアと対話することができない。",
-    "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.": "ion-textarea` のネイティブ `textarea` にフォーカスを設定する。グローバルな `textarea.focus()` の代わりに、このメソッドを使用する。",
+    "Emitted when the input value has changed.": "入力値が変化したときに発行されます。",
+    "Indicates how the control wraps text.": "コントロールがテキストをどのように折り返すかを示します。",
+    "If `true`, the user cannot interact with the textarea.": "`true`の場合、ユーザはテキストエリアと対話することができません。",
+    "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.": "ion-textarea` のネイティブ `textarea` にフォーカスを設定します。グローバルな `textarea.focus()` の代わりに、このメソッドを使用します。",
     "Returns the native `<textarea>` element used under the hood.": "フードの下で使用されるネイティブの `<textarea>` 要素を返します。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea": "テキストエリアの方向が左から右の場合は右パディング、右から左の場合は左パディングを使用します。",
-    "If `true`, the textarea container will grow and shrink based on the contents of the textarea.": "`true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小する。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea": "テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。",
+    "If `true`, the textarea container will grow and shrink based on the contents of the textarea.": "`true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。",
     "The number of visible text lines for the control.": "コントロールの可視テキスト行数。",
     "The value of the textarea.": "textareaの値です。",
     "Instructional text that shows before the input has a value.": "入力が値を持つ前に表示される指示文。",
@@ -1004,8 +1004,8 @@
     "Style of the placeholder text": "プレースホルダーテキストのスタイル",
     "Opacity of the placeholder text": "プレースホルダーテキストの不透明度",
     "Weight of the placeholder text": "プレースホルダーテキストの重さ",
-    "Top padding of the textarea": "textareaのトップパディング",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea": "textareaの方向が左から右の場合は左パディング、右から左の場合は右パディング。",
+    "Top padding of the textarea": "textareaのTop Padding",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea": "textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。",
     "Size of the thumbnail": "サムネイルの大きさ",
     "Border radius of the thumbnail": "サムネイルのボーダー半径",
     "The size of the toolbar title.": "ツールバーのタイトルの大きさを指定します。",
@@ -1017,18 +1017,18 @@
     "Animation to use when the toast is dismissed.": "トーストの解散時に使用するアニメーションです。",
     "Header to be shown in the toast.": "トーストに表示されるヘッダー。",
     "If `true`, the toast will animate.": "`true`の場合、トーストはアニメーションします。",
-    "Returns a promise that resolves when the toast did dismiss.": "トーストが解散したことを解決するプロミスを返します。",
-    "Returns a promise that resolves when the toast will dismiss.": "トーストが解散するタイミングを解決するプロミスを返します。",
+    "Returns a promise that resolves when the toast did dismiss.": "トーストが解散したことを解決するPromiseを返します。",
+    "Returns a promise that resolves when the toast will dismiss.": "トーストが解散するタイミングを解決するPromiseを返します。",
     "Additional attributes to pass to the toast.": "トーストに渡す追加の属性。",
-    "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons": "表示するアイコンの名前、または有効なSVGファイルへのパスを指定する。ion-icon`を参照。https://ionic.io/ionicons",
+    "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons": "表示するアイコンの名前、または有効なSVGファイルへのパスを指定します。ion-icon`を参照。https://ionic.io/ionicons",
     "Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.": "トーストのメッセージやボタンの配置を定義します。'baseline'を指定します。メッセージとボタンは同じ行に表示されます。メッセージテキストはメッセージコンテナ内で折り返すことができます。'stacked':ボタンコンテナとメッセージが重なるように表示されます。ボタンに長いテキストがある場合に使用します。",
     "How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.": "トーストを隠すまでに何ミリ秒待つかを指定します。デフォルトでは、`dismiss()`が呼ばれるまで表示されます。",
-    "If `true`, the toast will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、トーストは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
-    "Dismiss the toast overlay after it has been presented.": "トーストのオーバーレイが提示された後、それを解除する。",
+    "If `true`, the toast will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、トーストは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+    "Dismiss the toast overlay after it has been presented.": "トーストのオーバーレイが提示された後、それを解除します。",
     "Maximum width of the toast": "トーストの最大幅",
     "Color of the button text": "ボタンテキストの色",
     "Any button element that is displayed inside of the toast.": "トーストの内側に表示される任意のボタン要素。",
-    "Maximum height of the toast": "トーストの最大高さ",
+    "Maximum height of the toast": "トーストの最大の高さ",
     "Width of the toast": "トーストの幅",
     "Color of the toast text": "トーストの文字色",
     "Position from the left if direction is left-to-right, and from the right if direction is right-to-left": "方向が左から右の場合は左から、方向が右から左の場合は右から位置すること",
@@ -1036,38 +1036,38 @@
     "Minimum width of the toast": "トーストの最小幅",
     "The element that wraps all child elements.": "すべての子要素を包む要素。",
     "White space of the toast message": "乾杯メッセージのホワイトスペース",
-    "Minimum height of the toast": "トーストの最低高さ",
+    "Minimum height of the toast": "トーストの最小の高さ",
     "Box shadow of the toast": "乾杯の箱影",
     "Position from the right if direction is left-to-right, and from the left if direction is right-to-left": "方向が左から右の場合は右から、方向が右から左の場合は左から位置すること",
     "Border color of the toast": "トーストのボーダーカラー",
     "Border width of the toast": "トーストのボーダー幅",
     "Background of the toast": "乾杯の背景",
     "Border style of the toast": "トーストのボーダースタイル",
-    "Emitted before the toast has presented.": "トーストが提示される前に発せられる。",
-    "Emitted after the toast has dismissed.": "トーストが解散した後に発せられる。",
+    "Emitted before the toast has presented.": "トーストが提示される前に発行されます。",
+    "Emitted after the toast has dismissed.": "トーストが解散した後に発行されます。",
     "The body text of the toast.": "乾杯の音頭の本文です。",
-    "Present the toast overlay after it has been created.": "トーストのオーバーレイを作成した後に提示する。",
+    "Present the toast overlay after it has been created.": "トーストのオーバーレイを作成した後に提示します。",
     "Border radius of the toast": "トーストのボーダー半径",
     "The icon that appears next to the toast content.": "トーストの内容の横に表示されるアイコンです。",
     "The header text of the toast.": "乾杯のヘッダーテキストです。",
-    "Emitted before the toast has dismissed.": "乾杯が解散する前に発する。",
-    "Emitted after the toast has presented.": "トーストが提示された後に発する。",
+    "Emitted before the toast has dismissed.": "乾杯が解散する前に発します。",
+    "Emitted after the toast has presented.": "トーストが提示された後に発します。",
     "Background of the toggle when checked": "チェックしたときのトグルの背景",
     "Horizontal spacing around the toggle handle": "トグルハンドル周辺の横方向の間隔",
     "Border radius of the toggle handle": "トグルハンドルのボーダー半径",
     "Width of the toggle handle": "トグルハンドルの幅",
     "Height of the toggle handle": "トグルハンドルの高さ",
     "Background of the toggle handle": "トグルハンドルの背景",
-    "Maximum height of the toggle handle": "トグルハンドルの最大高さ",
+    "Maximum height of the toggle handle": "トグルハンドルの最大の高さ",
     "Transition of the toggle handle": "トグルハンドルの変遷",
-    "Emitted when the toggle has focus.": "トグルにフォーカスが当たったときに発せられる。",
+    "Emitted when the toggle has focus.": "トグルにフォーカスが当たったときに発行されます。",
     "Enables the on/off accessibility switch labels within the toggle.": "トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。",
     "Background of the toggle": "トグルの背景",
-    "If `true`, the user cannot interact with the toggle.": "`true`の場合、ユーザーはトグルを操作することができない。",
+    "If `true`, the user cannot interact with the toggle.": "`true`の場合、ユーザーはトグルを操作することができません。",
     "Box shadow of the toggle handle": "トグルハンドルのボックスシャドウ",
     "Border radius of the toggle track": "トグルトラックのボーダー半径",
     "Background of the toggle handle when checked": "チェックしたときのトグルハンドルの背景",
-    "Emitted when the toggle loses focus.": "トグルのフォーカスが外れたときに発せられる。",
+    "Emitted when the toggle loses focus.": "トグルのフォーカスが外れたときに発行されます。",
     "If `true`, the toggle is selected.": "`true`の場合、トグルが選択されます。",
     "The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`, it's only used when the toggle participates in a native `<form>`.": "トグルの値は、チェックされているかどうかを意味するものではありません。  トグルの値は `<input type=\"checkbox\">` の値に類似しており、トグルがネイティブの `<form>` に参加する場合にのみ使用されます。",
     "The background track of the toggle.": "トグルの背景トラックです。",
@@ -1075,33 +1075,33 @@
     "Color of the toolbar border": "ツールバーの枠の色",
     "Background of the toolbar": "ツールバーの背景",
     "Minimum height of the toolbar": "ツールバーの最小高さ",
-    "Top padding of the toolbar": "ツールバーの上部パディング",
+    "Top padding of the toolbar": "ツールバーのTop Padding",
     "Width of the toolbar border": "ツールバーの枠の幅",
     "Opacity of the toolbar background": "ツールバーの背景の不透明度",
     "Style of the toolbar border": "ツールバーのボーダーのスタイル",
-    "Bottom padding of the toolbar": "ツールバーの下パディング",
+    "Bottom padding of the toolbar": "ツールバーのBottom Padding",
     "Content is placed to the left of the toolbar text in LTR, and to the right in RTL.": "コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar": "ツールバーの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar": "ツールバーの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。",
     "Color of the toolbar text": "ツールバーテキストの色",
     "Content is placed to the right of the toolbar text in LTR, and to the left in RTL.": "コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar": "ツールバーの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。",
-    "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.": "コンテンツは、`ios`モードではツールバーテキストの右側に、`md`モードでは右端に配置されます。",
-    "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.": "コンテンツは、`ios`モードではツールバーテキストの左側に、`md`モードでは右側に直接配置されます。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar": "ツールバーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。",
+    "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.": "コンテンツは、`ios` modeではツールバーテキストの右側に、`md` modeでは右端に配置されます。",
+    "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.": "コンテンツは、`ios` modeではツールバーテキストの左側に、`md` modeでは右側に直接配置されます。",
     "NOTE: only Vanilla JS API.": "注：Vanilla JS APIのみです。",
-    "NOTE: only JSX API for stencil.  Provide a render function for the footer to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供する。JSXのvirtual-domを返す。",
+    "NOTE: only JSX API for stencil.  Provide a render function for the footer to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供します。JSXのvirtual-domを返します。",
     "An optional function that maps each item header within their height.": "各項目のヘッダを高さの範囲内でマッピングするオプション関数。",
     "An optional function that maps each item footer within their height.": "各項目のフッターをその高さ内にマッピングするオプション関数。",
-    "NOTE: only JSX API for stencil.  Provide a render function for the header to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供する。JSXのvirtual-domを返す。",
-    "NOTE: only JSX API for stencil.  Provide a render function for the items to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意する。JSXのvirtual-domを返す。",
+    "NOTE: only JSX API for stencil.  Provide a render function for the header to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供します。JSXのvirtual-domを返します。",
+    "NOTE: only JSX API for stencil.  Provide a render function for the items to be rendered. Returns a JSX virtual-dom.": "注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意します。JSXのvirtual-domを返します。",
     "This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.  The subset of items to be updated can are specifying by an offset and a length.": "このメソッドは、アイテムのサブセットをダーティとしてマークし、再レンダリングができるようにします。アイテムは、コンテンツまたはそのスタイルが変更されるたびに、ダーティとしてマークされる必要があります。  更新されるアイテムのサブセットは、オフセットと長さで指定することができます。",
-    "Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created.": "セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければならない。",
+    "Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created.": "セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければなりません。",
     "An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements.  This function allows to skip all DOM reads, which can be Doing so leads to massive performance": "各アイテムをその高さ内にマッピングするオプションの関数です。この関数が提供されると、`ion-virtual-scroll`によって重い最適化と高速パスが取られるようになり、大幅な性能向上が期待できる。  この関数は、DOMの読み込みをすべてスキップすることができ、Doingすることで大幅なパフォーマンスの向上につながります。",
     "This method marks the tail the items array as dirty, so they can be re-rendered.  It's equivalent to calling:  ```js virtualScroll.checkRange(lastItemLen); ```": "このメソッドは、アイテム配列の末尾をダーティとしてマークし、再レンダリングできるようにします。  これは次のように呼び出すのと同じです： ``js virtualScroll.checkRange(lastItemLen); ```。",
     "Returns the position of the virtual item at the given index.": "指定されたインデックスの位置にある仮想アイテムの位置を返します。",
     "It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.": "仮想アイテムの高さがデフォルトよりかなり大きくなる場合は、これを指定することが重要です。 各仮想アイテムテンプレートのセルのおおよその高さ。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られるもので、この近似値はアイテムがレンダリングされる前に初期寸法を計算するのに役立つものであることに注意してください。",
     "The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible.": "仮想スクロール内のテンプレートを構築するためのデータです。このデータが変更された場合、仮想スクロール全体がリセットされることになります。",
     "The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.": "各フッターテンプレートのセルのおおよその幅を指定します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
-    "Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created.": "セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければならない。",
+    "Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created.": "セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければなりません。",
     "The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.": "各ヘッダーテンプレートのセルのおおよその高さを表します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
     "The platform to add (e.g. `android`, `ios`)": "追加するプラットフォーム（例：`android`、`ios`）。",
     "The platform to build for (e.g. `android`, `ios`)": "ビルドするプラットフォーム（例：`android`、`ios`）を指定します。",
@@ -1116,10 +1116,10 @@
     "The property name you wish to delete": "削除したいプロパティ名",
     "The platform to build (e.g. `android`, `ios`)": "ビルドするプラットフォーム（例：`android`、`ios`）。",
     "The platform to compile (`android`, `ios`)": "コンパイルするプラットフォーム（`android`、`ios`）。",
-    "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms": "プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存する。",
+    "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms": "プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存します。",
     "The platform that you would like to add (`android`, `ios`)": "追加したいプラットフォーム（`android`、`ios`）を指定します。",
     "The name of the plugin (corresponds to `add` and `remove`)": "プラグインの名前 (`add` と `remove` に対応する)",
-    "`add` or `remove` a plugin; `ls` or `save` all project plugins": "プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` する。",
+    "`add` or `remove` a plugin; `ls` or `save` all project plugins": "プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` します。",
     "The platform you would like to prepare (e.g. `android`, `ios`)": "用意したいプラットフォーム（例：`android`、`ios`）。",
     "The platform for which you would like to gather requirements (`android`, `ios`)": "要件を収集したいプラットフォーム（`android`、`ios`）。",
     "The platform for which you would like to generate resources (`ios`, `android`)": "リソースを生成したいプラットフォーム（`ios`、`android`）を指定します。",
@@ -1144,4 +1144,4 @@
     "The name of your new project (e.g. `myApp`, `\"My App\"`)": "新しいプロジェクトの名前（例：`myApp`、`\"My App\"`）を指定します。",
     "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)": "使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）"
   }
-}
\ No newline at end of file
+}

From acb85c2630b81a3882ef33bce3ad9cdda0adf696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 22 Mar 2023 11:57:56 +0900
Subject: [PATCH 260/469] chore(translate): run translate

---
 scripts/data/translated-api.json   | 1114 ++++++++++++++--------------
 scripts/data/translated-cache.json |    2 +-
 scripts/data/translated-cli.json   |    4 +-
 3 files changed, 560 insertions(+), 560 deletions(-)

diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index eb54ae78ab6..11d84da5b0a 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -38,7 +38,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion group cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオングループと対話することができない。",
+          "docs": "If `true`, the accordion group cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオングループと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -55,7 +55,7 @@
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": false,
-          "docs": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.\n\n自動翻訳: 各アコーディオンの拡張動作を記述する。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
+          "docs": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.\n\n自動翻訳: 各アコーディオンの拡張動作を記述します。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
           "docsTags": [],
           "default": "'compact'",
           "values": [
@@ -77,7 +77,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -162,7 +162,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行される。",
+          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -219,7 +219,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオンは対話することができない。",
+          "docs": "If `true`, the accordion cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオンは対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -236,7 +236,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -291,7 +291,7 @@
           "mutable": false,
           "attr": "toggle-icon-slot",
           "reflectToAttr": false,
-          "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.\n\n自動翻訳: トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `'end'` です。",
+          "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.\n\n自動翻訳: トグルアイコンを配置する `ion-item` の内側のslot。デフォルトは `'end'` です。",
           "docsTags": [],
           "default": "'end'",
           "values": [
@@ -342,7 +342,7 @@
       "parts": [
         {
           "name": "content",
-          "docs": "The wrapper element for the content slot.\n\n自動翻訳: コンテンツスロットのラッパー要素。"
+          "docs": "The wrapper element for the content slot.\n\n自動翻訳: content slotのラッパー要素。"
         },
         {
           "name": "expanded",
@@ -350,7 +350,7 @@
         },
         {
           "name": "header",
-          "docs": "The wrapper element for the header slot.\n\n自動翻訳: ヘッダースロットのラッパーの要素です。"
+          "docs": "The wrapper element for the header slot.\n\n自動翻訳: header slotのラッパーの要素です。"
         }
       ],
       "dependents": [],
@@ -547,7 +547,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -587,7 +587,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アクションシートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アクションシートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -608,7 +608,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the action sheet overlay after it has been presented.\n\n自動翻訳: アクションシートのオーバーレイが提示された後、それを解除する。",
+          "docs": "Dismiss the action sheet overlay after it has been presented.\n\n自動翻訳: アクションシートのオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -628,7 +628,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the action sheet did dismiss.\n\n自動翻訳: アクションシートが解散したときに解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the action sheet did dismiss.\n\n自動翻訳: アクションシートが解散したときに解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -639,7 +639,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the action sheet will dismiss.\n\n自動翻訳: アクションシートが解散するタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the action sheet will dismiss.\n\n自動翻訳: アクションシートが解散するタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -650,7 +650,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the action sheet overlay after it has been created.\n\n自動翻訳: アクションシートのオーバーレイを作成後に提示する。",
+          "docs": "Present the action sheet overlay after it has been created.\n\n自動翻訳: アクションシートのオーバーレイを作成後に提示します。",
           "docsTags": []
         }
       ],
@@ -661,7 +661,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発せられる。",
+          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -670,7 +670,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発せられる。",
+          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -679,7 +679,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発せられる。",
+          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -688,7 +688,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発せられる。",
+          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -712,7 +712,7 @@
         {
           "name": "--button-background-activated",
           "annotation": "prop",
-          "docs": "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: アクションシートボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
+          "docs": "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: アクションシートボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--button-background-activated-opacity",
@@ -787,7 +787,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the action sheet\n\n自動翻訳: アクションシートの最大高さ"
+          "docs": "Maximum height of the action sheet\n\n自動翻訳: アクションシートの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -979,7 +979,7 @@
           "type": "AlertInput[]",
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "Array of input to show in the alert.\n\n自動翻訳: アラートに表示する入力の配列。",
+          "docs": "Array of input to show in the alert.\n\n自動翻訳: アラートに表示するInputの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -1053,7 +1053,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1093,7 +1093,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アラートは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アラートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1114,7 +1114,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the alert overlay after it has been presented.\n\n自動翻訳: アラートオーバーレイが表示された後、解除する。",
+          "docs": "Dismiss the alert overlay after it has been presented.\n\n自動翻訳: アラートオーバーレイが表示された後、解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -1134,7 +1134,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the alert did dismiss.\n\n自動翻訳: アラートが解除されたことを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the alert did dismiss.\n\n自動翻訳: アラートが解除されたことを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -1145,7 +1145,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the alert will dismiss.\n\n自動翻訳: アラートが解除されるタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the alert will dismiss.\n\n自動翻訳: アラートが解除されるタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -1156,7 +1156,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the alert overlay after it has been created.\n\n自動翻訳: アラートオーバーレイを作成した後に提示する。",
+          "docs": "Present the alert overlay after it has been created.\n\n自動翻訳: アラートオーバーレイを作成した後に提示します。",
           "docsTags": []
         }
       ],
@@ -1167,7 +1167,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発せられる。",
+          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -1176,7 +1176,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発せられる。",
+          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -1185,7 +1185,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発せられる。",
+          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -1194,7 +1194,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発せられる。",
+          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -1225,7 +1225,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the alert\n\n自動翻訳: アラートの最大高さ"
+          "docs": "Maximum height of the alert\n\n自動翻訳: アラートの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -1235,7 +1235,7 @@
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the alert\n\n自動翻訳: アラートの最低高さ"
+          "docs": "Minimum height of the alert\n\n自動翻訳: アラートの最小の高さ"
         },
         {
           "name": "--min-width",
@@ -1340,7 +1340,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -1414,7 +1414,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1431,7 +1431,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button.\n\n自動翻訳: 戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定する。",
+          "docs": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button.\n\n自動翻訳: 戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -1453,7 +1453,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1597,62 +1597,62 @@
         {
           "name": "--icon-margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the button icon\n\n自動翻訳: ボタンアイコンの下端マージン"
+          "docs": "Bottom margin of the button icon\n\n自動翻訳: ボタンアイコンのBottom Margin"
         },
         {
           "name": "--icon-margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合は右マージン、右から左の場合は左マージン"
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin"
         },
         {
           "name": "--icon-margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合は左マージン、右から左の場合は右マージン"
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin"
         },
         {
           "name": "--icon-margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the button icon\n\n自動翻訳: ボタンアイコンの上マージン"
+          "docs": "Top margin of the button icon\n\n自動翻訳: ボタンアイコンのTop Margin"
         },
         {
           "name": "--icon-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button icon\n\n自動翻訳: ボタンアイコンの下パディング"
+          "docs": "Bottom padding of the button icon\n\n自動翻訳: ボタンアイコンのBottom Padding"
         },
         {
           "name": "--icon-padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
         },
         {
           "name": "--icon-padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。"
         },
         {
           "name": "--icon-padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button icon\n\n自動翻訳: ボタンアイコンの上部パディング"
+          "docs": "Top padding of the button icon\n\n自動翻訳: ボタンアイコンのTop Padding"
         },
         {
           "name": "--margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the button\n\n自動翻訳: ボタンの下端マージン"
+          "docs": "Bottom margin of the button\n\n自動翻訳: ボタンのBottom Margin"
         },
         {
           "name": "--margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右マージン、右から左の場合は左マージン"
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin"
         },
         {
           "name": "--margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左マージン、右から左の場合は右マージン"
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin"
         },
         {
           "name": "--margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the button\n\n自動翻訳: ボタンの上マージン"
+          "docs": "Top margin of the button\n\n自動翻訳: ボタンのTop Margin"
         },
         {
           "name": "--min-height",
@@ -1672,22 +1672,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
@@ -1795,7 +1795,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the backdrop is tapped.\n\n自動翻訳: バックドロップがタップされたときに発せられる。",
+          "docs": "Emitted when the backdrop is tapped.\n\n自動翻訳: バックドロップがタップされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -1862,7 +1862,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -1917,7 +1917,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1950,22 +1950,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the badge\n\n自動翻訳: バッジの下パディング"
+          "docs": "Bottom padding of the badge\n\n自動翻訳: バッジのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the badge\n\n自動翻訳: バッジの上部パディング"
+          "docs": "Top padding of the badge\n\n自動翻訳: バッジのTop Padding"
         }
       ],
       "slots": [],
@@ -2022,7 +2022,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2077,7 +2077,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the breadcrumb.\n\n自動翻訳: `true`の場合、ユーザーはパンくずと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the breadcrumb.\n\n自動翻訳: `true`の場合、ユーザーはパンくずと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2113,7 +2113,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -2132,7 +2132,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2153,7 +2153,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -2171,7 +2171,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -2190,7 +2190,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -2216,7 +2216,7 @@
           "mutable": false,
           "attr": "separator",
           "reflectToAttr": false,
-          "docs": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.\n\n自動翻訳: trueの場合、このパンくずと次のパンくずの間にセパレータを表示する。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
+          "docs": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.\n\n自動翻訳: trueの場合、このパンくずと次のパンくずの間にセパレータを表示します。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
           "docsTags": [],
           "values": [
             {
@@ -2235,7 +2235,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -2257,7 +2257,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the breadcrumb loses focus.\n\n自動翻訳: パンくずのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the breadcrumb loses focus.\n\n自動翻訳: パンくずのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -2266,7 +2266,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the breadcrumb has focus.\n\n自動翻訳: パンくずがフォーカスされたときに発せられる。",
+          "docs": "Emitted when the breadcrumb has focus.\n\n自動翻訳: パンくずがフォーカスされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -2342,7 +2342,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2414,7 +2414,7 @@
           "mutable": false,
           "attr": "items-before-collapse",
           "reflectToAttr": false,
-          "docs": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.\n\n自動翻訳: 折りたたんだインジケータの前に表示するパンくずの数を指定する。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
+          "docs": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.\n\n自動翻訳: 折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -2450,7 +2450,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2474,7 +2474,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the collapsed indicator is clicked on.\n\n自動翻訳: 折りたたみインジケータがクリックされたときに発する。",
+          "docs": "Emitted when the collapsed indicator is clicked on.\n\n自動翻訳: 折りたたみインジケータがクリックされたときに発します。",
           "docsTags": []
         }
       ],
@@ -2548,7 +2548,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2603,7 +2603,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2717,7 +2717,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -2736,7 +2736,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2757,7 +2757,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -2775,7 +2775,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -2794,7 +2794,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -2840,7 +2840,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": true,
-          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.\n\n自動翻訳: ボタンの高さとパディングが少ない場合は `\"small\"` に、ボタンの高さとパディングがデフォルトの場合は `\"default\"` に、ボタンの高さとパディングが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
+          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.\n\n自動翻訳: ボタンの高さとPaddingが少ない場合は `\"small\"` に、ボタンの高さとPaddingがデフォルトの場合は `\"default\"` に、ボタンの高さとPaddingが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
           "docsTags": [],
           "values": [
             {
@@ -2868,7 +2868,7 @@
           "mutable": false,
           "attr": "strong",
           "reflectToAttr": false,
-          "docs": "If `true`, activates a button with a heavier font weight.\n\n自動翻訳: `true`の場合、より重いフォントウェイトを持つボタンをアクティブにする。",
+          "docs": "If `true`, activates a button with a heavier font weight.\n\n自動翻訳: `true`の場合、より重いフォントウェイトを持つボタンをアクティブにします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2885,7 +2885,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -2933,7 +2933,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -2942,7 +2942,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発せられる。",
+          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発行されます。",
           "docsTags": []
         }
       ],
@@ -2956,7 +2956,7 @@
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
+          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
@@ -3036,22 +3036,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
@@ -3067,7 +3067,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
@@ -3075,7 +3075,7 @@
         },
         {
           "name": "icon-only",
-          "docs": "Should be used on an icon in a button that has no text.\n\n自動翻訳: テキストを持たないボタン内のアイコンに対して使用されるべきである。"
+          "docs": "Should be used on an icon in a button that has no text.\n\n自動翻訳: テキストを持たないボタン内のアイコンに対して使用されるべきです。"
         },
         {
           "name": "start",
@@ -3117,7 +3117,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` モードにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
+          "docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` modeにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3164,7 +3164,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3209,7 +3209,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3264,7 +3264,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3285,7 +3285,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、カードヘッダは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、カードヘッダは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3326,7 +3326,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3381,7 +3381,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3432,7 +3432,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3487,7 +3487,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3559,7 +3559,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3614,7 +3614,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the card.\n\n自動翻訳: `true`の場合、ユーザはカードと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the card.\n\n自動翻訳: `true`の場合、ユーザはカードと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3650,7 +3650,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -3669,7 +3669,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3690,7 +3690,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -3708,7 +3708,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -3727,7 +3727,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -3753,7 +3753,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -3869,7 +3869,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3924,7 +3924,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the checkbox.\n\n自動翻訳: `true`の場合、ユーザはチェックボックスと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the checkbox.\n\n自動翻訳: `true`の場合、ユーザはチェックボックスと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3958,7 +3958,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -4016,7 +4016,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checkbox loses focus.\n\n自動翻訳: チェックボックスのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the checkbox loses focus.\n\n自動翻訳: チェックボックスのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -4025,7 +4025,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checked property has changed.\n\n自動翻訳: チェックされたプロパティが変更されたときに発行される。",
+          "docs": "Emitted when the checked property has changed.\n\n自動翻訳: チェックされたプロパティが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -4034,7 +4034,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checkbox has focus.\n\n自動翻訳: チェックボックスにフォーカスが当たったときに発せられる。",
+          "docs": "Emitted when the checkbox has focus.\n\n自動翻訳: チェックボックスにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -4136,7 +4136,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -4191,7 +4191,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the chip.\n\n自動翻訳: `true`の場合、ユーザはチップと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the chip.\n\n自動翻訳: `true`の場合、ユーザはチップと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4208,7 +4208,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -4229,7 +4229,7 @@
           "mutable": false,
           "attr": "outline",
           "reflectToAttr": false,
-          "docs": "Display an outline style button.\n\n自動翻訳: アウトラインスタイルボタンを表示する。",
+          "docs": "Display an outline style button.\n\n自動翻訳: アウトラインスタイルボタンを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4605,7 +4605,7 @@
           "mutable": false,
           "attr": "push-xs",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定する。",
+          "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4624,7 +4624,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4643,7 +4643,7 @@
           "mutable": false,
           "attr": "size-lg",
           "reflectToAttr": false,
-          "docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4662,7 +4662,7 @@
           "mutable": false,
           "attr": "size-md",
           "reflectToAttr": false,
-          "docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4681,7 +4681,7 @@
           "mutable": false,
           "attr": "size-sm",
           "reflectToAttr": false,
-          "docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4700,7 +4700,7 @@
           "mutable": false,
           "attr": "size-xl",
           "reflectToAttr": false,
-          "docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4719,7 +4719,7 @@
           "mutable": false,
           "attr": "size-xs",
           "reflectToAttr": false,
-          "docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定する。auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
+          "docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
           "docsTags": [],
           "values": [
             {
@@ -4747,17 +4747,17 @@
         {
           "name": "--ion-grid-column-padding",
           "annotation": "prop",
-          "docs": "Padding for the Column\n\n自動翻訳: カラムのパディング"
+          "docs": "Padding for the Column\n\n自動翻訳: カラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-lg",
           "annotation": "prop",
-          "docs": "Padding for the Column on lg screens and up\n\n自動翻訳: LG以上の画面でのコラムのパディング"
+          "docs": "Padding for the Column on lg screens and up\n\n自動翻訳: LG以上の画面でのコラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-md",
           "annotation": "prop",
-          "docs": "Padding for the Column on md screens and up\n\n自動翻訳: mdスクリーン以上のカラムのパディングについて"
+          "docs": "Padding for the Column on md screens and up\n\n自動翻訳: mdスクリーン以上のカラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-sm",
@@ -4767,12 +4767,12 @@
         {
           "name": "--ion-grid-column-padding-xl",
           "annotation": "prop",
-          "docs": "Padding for the Column on xl screens and up\n\n自動翻訳: XL以上の画面でのカラムのパディングについて"
+          "docs": "Padding for the Column on xl screens and up\n\n自動翻訳: XL以上の画面でのカラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-xs",
           "annotation": "prop",
-          "docs": "Padding for the Column on xs screens and up\n\n自動翻訳: xsスクリーン以上のカラムのパディングについて"
+          "docs": "Padding for the Column on xs screens and up\n\n自動翻訳: xsスクリーン以上のカラムのPadding"
         },
         {
           "name": "--ion-grid-columns",
@@ -4817,7 +4817,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -5014,7 +5014,7 @@
           },
           "signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll to a specified X/Y location in the component.\n\n自動翻訳: コンポーネント内の指定したX/Y位置までスクロールする。",
+          "docs": "Scroll to a specified X/Y location in the component.\n\n自動翻訳: コンポーネント内の指定したX/Y位置までスクロールします。",
           "docsTags": [
             {
               "name": "param",
@@ -5054,7 +5054,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロール中に発せられる。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
+          "docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
           "docsTags": []
         },
         {
@@ -5063,7 +5063,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロールが終了したときに発せられる。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
+          "docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
           "docsTags": []
         },
         {
@@ -5119,28 +5119,28 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the content\n\n自動翻訳: コンテンツのボトムパディング"
+          "docs": "Bottom padding of the content\n\n自動翻訳: コンテンツのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the content\n\n自動翻訳: コンテンツのトップパディング"
+          "docs": "Top padding of the content\n\n自動翻訳: コンテンツのTop Padding"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed in the scrollable area if provided without a slot.\n\n自動翻訳: スロットなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。"
+          "docs": "Content is placed in the scrollable area if provided without a slot.\n\n自動翻訳: slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。"
         },
         {
           "name": "fixed",
@@ -5192,7 +5192,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "default": "'primary'",
           "values": [
@@ -5267,7 +5267,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5284,7 +5284,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -5317,7 +5317,7 @@
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button that wraps the slotted text.\n\n自動翻訳: スロットされたテキストをラップするネイティブHTMLボタンです。"
+          "docs": "The native HTML button that wraps the slotted text.\n\n自動翻訳: slotされたテキストをラップするネイティブHTMLボタンです。"
         }
       ],
       "dependents": [],
@@ -5395,7 +5395,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "default": "'primary'",
           "values": [
@@ -5451,7 +5451,7 @@
           "mutable": false,
           "attr": "day-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month.\n\n自動翻訳: 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
+          "docs": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month.\n\n自動翻訳: 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
           "docsTags": [],
           "values": [
             {
@@ -5476,7 +5476,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the datetime.\n\n自動翻訳: `true`の場合、ユーザはdatetimeを操作することができない。",
+          "docs": "If `true`, the user cannot interact with the datetime.\n\n自動翻訳: `true`の場合、ユーザはdatetimeを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5510,7 +5510,7 @@
           "mutable": false,
           "attr": "first-day-of-week",
           "reflectToAttr": false,
-          "docs": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday.\n\n自動翻訳: ion-datetime`に使用する週の最初の曜日を指定する。デフォルト値は `0` で、日曜日を表す。",
+          "docs": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday.\n\n自動翻訳: ion-datetime`に使用する週の最初の曜日を指定します。デフォルト値は `0` で、日曜日を表す。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -5551,7 +5551,7 @@
           "mutable": false,
           "attr": "hour-cycle",
           "reflectToAttr": false,
-          "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.\n\n自動翻訳: ion-datetime`の時間周期を指定する。値が設定されていない場合、現在のロケールによって指定される。",
+          "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.\n\n自動翻訳: ion-datetime`の時間周期を指定します。値が設定されていない場合、現在のロケールによって指定される。",
           "docsTags": [],
           "values": [
             {
@@ -5575,7 +5575,7 @@
           "mutable": false,
           "attr": "hour-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers.\n\n自動翻訳: 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
+          "docs": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers.\n\n自動翻訳: 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
           "docsTags": [],
           "values": [
             {
@@ -5599,7 +5599,7 @@
           "type": "((dateIsoString: string) => boolean) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.\n\n自動翻訳: 個々の日付(暦日)が有効か無効かを返す。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブである。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
+          "docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.\n\n自動翻訳: 個々の日付(暦日)が有効か無効かを返します。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブです。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -5618,7 +5618,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `'default'` value refers to the default\nlocale set by your device.\n\n自動翻訳: ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
+          "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `'default'` value refers to the default\nlocale set by your device.\n\n自動翻訳: `ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`'default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
           "docsTags": [],
           "default": "'default'",
           "values": [
@@ -5673,7 +5673,7 @@
           "mutable": false,
           "attr": "minute-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`.\n\n自動翻訳: 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
+          "docs": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`.\n\n自動翻訳: 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
           "docsTags": [],
           "values": [
             {
@@ -5698,7 +5698,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -5719,7 +5719,7 @@
           "mutable": false,
           "attr": "month-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`.\n\n自動翻訳: 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
+          "docs": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`.\n\n自動翻訳: 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
           "docsTags": [],
           "values": [
             {
@@ -5778,7 +5778,7 @@
           "mutable": false,
           "attr": "prefer-wheel",
           "reflectToAttr": false,
-          "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `'date'`, `'date-time'`, or `'time-date'`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`'time'`, `'month'`, `'month-year'`, or `'year'`.\n\n自動翻訳: `true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。time'`, `month'`, `'month-year'`, または `-year'`.",
+          "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `'date'`, `'date-time'`, or `'time-date'`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`'time'`, `'month'`, `'month-year'`, or `'year'`.\n\n自動翻訳: `true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。`'time'`, `'month'`, `'month-year'`, または `'year'`.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5795,7 +5795,7 @@
           "mutable": false,
           "attr": "presentation",
           "reflectToAttr": false,
-          "docs": "Which values you want to select. `'date'` will show\na calendar picker to select the month, day, and year. `'time'`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `'date-time'` will show the date picker first and time picker second.\n`'time-date'` will show the time picker first and date picker second.\n\n自動翻訳: どの値を選択するか。date'`はカレンダーピッカーを表示し、月、日、年を選択します。time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
+          "docs": "Which values you want to select. `'date'` will show\na calendar picker to select the month, day, and year. `'time'`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `'date-time'` will show the date picker first and time picker second.\n`'time-date'` will show the time picker first and date picker second.\n\n自動翻訳: どの値を選択するか。`'date'`はカレンダーピッカーを表示し、月、日、年を選択します。`'time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。`'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
           "docsTags": [],
           "default": "'date-time'",
           "values": [
@@ -5837,7 +5837,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the datetime appears normal but is not interactive.\n\n自動翻訳: `true`の場合、datetimeは正常に表示されるが、インタラクティブにはならない。",
+          "docs": "If `true`, the datetime appears normal but is not interactive.\n\n自動翻訳: `true`の場合、datetimeは正常に表示されるが、インタラクティブにはなりません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5854,7 +5854,7 @@
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
-          "docs": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` スロットを使用することもできる。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
+          "docs": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` slotを使用することもできる。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5871,7 +5871,7 @@
           "mutable": false,
           "attr": "show-default-buttons",
           "reflectToAttr": false,
-          "docs": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`スロットを使用することもできます。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。",
+          "docs": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`slotを使用することもできます。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5888,7 +5888,7 @@
           "mutable": false,
           "attr": "show-default-time-label",
           "reflectToAttr": false,
-          "docs": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`スロットを使用することもできます。time-label`スロットにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
+          "docs": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`slotを使用することもできます。 `time-label` slotにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -5905,7 +5905,7 @@
           "mutable": false,
           "attr": "show-default-title",
           "reflectToAttr": false,
-          "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.\n\n自動翻訳: `true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、スロットされたタイトルと、選択された日付の両方が含まれます。",
+          "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.\n\n自動翻訳: `true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、slotされたタイトルと、選択された日付の両方が含まれます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5922,7 +5922,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width.\n\n自動翻訳: cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。fixed`の場合、`ion-datetime`は固定幅になる。",
+          "docs": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width.\n\n自動翻訳: cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。`fixed`の場合、`ion-datetime`は固定幅になる。",
           "docsTags": [],
           "default": "'fixed'",
           "values": [
@@ -5962,7 +5962,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.\n\n自動翻訳: datetimeの値を有効なISO 8601 datetime文字列として指定する。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
+          "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.\n\n自動翻訳: datetimeの値を有効なISO 8601 datetime文字列として指定します。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
           "docsTags": [],
           "values": [
             {
@@ -5987,7 +5987,7 @@
           "mutable": false,
           "attr": "year-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.\n\n自動翻訳: 選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` 入力には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
+          "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.\n\n自動翻訳: 選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
           "docsTags": [],
           "values": [
             {
@@ -6049,7 +6049,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime loses focus.\n\n自動翻訳: datetimeのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the datetime loses focus.\n\n自動翻訳: datetimeのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -6058,7 +6058,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime selection was cancelled.\n\n自動翻訳: datetimeの選択がキャンセルされたときに発生する。",
+          "docs": "Emitted when the datetime selection was cancelled.\n\n自動翻訳: datetimeの選択がキャンセルされたときに発生します。",
           "docsTags": []
         },
         {
@@ -6067,7 +6067,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value (selected date) has changed.\n\n自動翻訳: 値（選択された日付）が変化したときに発せられる。",
+          "docs": "Emitted when the value (selected date) has changed.\n\n自動翻訳: 値（選択された日付）が変化したときに発行されます。",
           "docsTags": []
         },
         {
@@ -6076,7 +6076,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime has focus.\n\n自動翻訳: datetimeにフォーカスが当たったときに発行される。",
+          "docs": "Emitted when the datetime has focus.\n\n自動翻訳: datetimeにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -6090,7 +6090,7 @@
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "The primary background of the datetime component in RGB format.\n\n自動翻訳: datetimeコンポーネントの主な背景をRGBフォーマットで示す。"
+          "docs": "The primary background of the datetime component in RGB format.\n\n自動翻訳: datetimeコンポーネントの主な背景をRGBフォーマットで示します。"
         },
         {
           "name": "--title-color",
@@ -6209,7 +6209,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -6264,7 +6264,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the fab button.\n\n自動翻訳: `true`の場合、ユーザーはファブボタンを操作することができない。",
+          "docs": "If `true`, the user cannot interact with the fab button.\n\n自動翻訳: `true`の場合、ユーザーはファブボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6300,7 +6300,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -6319,7 +6319,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -6340,7 +6340,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -6358,7 +6358,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -6377,7 +6377,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -6440,7 +6440,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -6459,7 +6459,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ファブボタンが半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ファブボタンが半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6505,7 +6505,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -6514,7 +6514,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発せられる。",
+          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発行されます。",
           "docsTags": []
         }
       ],
@@ -6528,7 +6528,7 @@
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
+          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
@@ -6608,22 +6608,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
@@ -6756,7 +6756,7 @@
           "mutable": false,
           "attr": "edge",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.\n\n自動翻訳: `true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。fixed` スロットと一緒に使用する必要があります。",
+          "docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.\n\n自動翻訳: `true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。 `fixed` slotと一緒に使用する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6865,7 +6865,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode.\n\n自動翻訳: フッターに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。",
+          "docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode.\n\n自動翻訳: フッターに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -6885,7 +6885,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -6906,7 +6906,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、フッターは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+          "docs": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、フッターは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6961,32 +6961,32 @@
         {
           "name": "--ion-grid-padding",
           "annotation": "prop",
-          "docs": "Padding for the Grid\n\n自動翻訳: グリッドのパディング"
+          "docs": "Padding for the Grid\n\n自動翻訳: グリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-lg",
           "annotation": "prop",
-          "docs": "Padding for the Grid on lg screens\n\n自動翻訳: LG画面でのグリッドのパディングについて"
+          "docs": "Padding for the Grid on lg screens\n\n自動翻訳: LG画面でのグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-md",
           "annotation": "prop",
-          "docs": "Padding for the Grid on md screens\n\n自動翻訳: md画面におけるグリッドのパディングについて"
+          "docs": "Padding for the Grid on md screens\n\n自動翻訳: md画面におけるグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-sm",
           "annotation": "prop",
-          "docs": "Padding for the Grid on sm screens\n\n自動翻訳: スマートスクリーンにおけるグリッドのパディング"
+          "docs": "Padding for the Grid on sm screens\n\n自動翻訳: スマートスクリーンにおけるグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-xl",
           "annotation": "prop",
-          "docs": "Padding for the Grid on xl screens\n\n自動翻訳: XL画面でのグリッドのパディングについて"
+          "docs": "Padding for the Grid on xl screens\n\n自動翻訳: XL画面でのグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-xs",
           "annotation": "prop",
-          "docs": "Padding for the Grid on xs screens\n\n自動翻訳: xs画面でのGridのパディングについて"
+          "docs": "Padding for the Grid on xs screens\n\n自動翻訳: xs画面でのGridのPadding"
         },
         {
           "name": "--ion-grid-width",
@@ -7044,7 +7044,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: ヘッダーに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。  通常、[折りたたみ式大型タイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
+          "docs": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: ヘッダーに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。  通常、[折りたたみ式ラージタイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
           "docsTags": [],
           "values": [
             {
@@ -7068,7 +7068,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -7089,7 +7089,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、ヘッダーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+          "docs": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、ヘッダーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7149,7 +7149,7 @@
           "mutable": false,
           "attr": "src",
           "reflectToAttr": false,
-          "docs": "The image URL. This attribute is mandatory for the `<img>` element.\n\n自動翻訳: 画像のURL。この属性は `<img>` 要素では必須である。",
+          "docs": "The image URL. This attribute is mandatory for the `<img>` element.\n\n自動翻訳: 画像のURL。この属性は `<img>` 要素では必須です。",
           "docsTags": [],
           "values": [
             {
@@ -7171,7 +7171,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the img fails to load\n\n自動翻訳: imgの読み込みに失敗したときに発せられる",
+          "docs": "Emitted when the img fails to load\n\n自動翻訳: imgの読み込みに失敗したときに発行されます。",
           "docsTags": []
         },
         {
@@ -7180,7 +7180,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the image has finished loading\n\n自動翻訳: 画像の読み込みが終了したときに発せられる",
+          "docs": "Emitted when the image has finished loading\n\n自動翻訳: 画像の読み込みが終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -7189,7 +7189,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the img src has been set\n\n自動翻訳: img srcが設定されたときに発せられる。",
+          "docs": "Emitted when the img src has been set\n\n自動翻訳: img srcが設定されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -7322,7 +7322,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.\n\n自動翻訳: `true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。  trueを設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
+          "docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.\n\n自動翻訳: `true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 `true` を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7339,7 +7339,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.\n\n自動翻訳: 無限スクロール要素の位置を指定する。値は `top` または `bottom` のどちらかである。",
+          "docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.\n\n自動翻訳: 無限スクロール要素の位置を指定します。値は `top` または `bottom` のどちらかです。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -7465,7 +7465,7 @@
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
-          "docs": "Indicates whether the value of the control can be automatically completed by the browser.\n\n自動翻訳: コントロールの値が、ブラウザによって自動的に補完されるかどうかを示す。",
+          "docs": "Indicates whether the value of the control can be automatically completed by the browser.\n\n自動翻訳: コントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -7717,7 +7717,7 @@
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
-          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。",
+          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7734,7 +7734,7 @@
           "mutable": false,
           "attr": "clear-input",
           "reflectToAttr": false,
-          "docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n\n自動翻訳: `true`の場合、値があるときに入力にクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
+          "docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n\n自動翻訳: `true`の場合、値があるときにInputにクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7770,7 +7770,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -7842,7 +7842,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザは入力と対話することができない。",
+          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザはInputと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7951,7 +7951,7 @@
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "The maximum value, which must not be less than its minimum (min attribute) value.\n\n自動翻訳: 最大値で、その最小値（min属性）より小さくてはならない。",
+          "docs": "The maximum value, which must not be less than its minimum (min attribute) value.\n\n自動翻訳: 最大値で、その最小値（min属性）より小さくてはなりません。",
           "docsTags": [],
           "values": [
             {
@@ -7992,7 +7992,7 @@
           "mutable": false,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "The minimum value, which must not be greater than its maximum (max attribute) value.\n\n自動翻訳: 最小値で、その最大値（max属性）より大きくてはならない。",
+          "docs": "The minimum value, which must not be greater than its maximum (max attribute) value.\n\n自動翻訳: 最小値で、その最大値（max属性）より大きくてはなりません。",
           "docsTags": [],
           "values": [
             {
@@ -8033,7 +8033,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8090,7 +8090,7 @@
           "mutable": false,
           "attr": "pattern",
           "reflectToAttr": false,
-          "docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n\n自動翻訳: 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` 入力タイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
+          "docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n\n自動翻訳: 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` Inputタイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8109,7 +8109,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n\n自動翻訳: 入力が値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
+          "docs": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n\n自動翻訳: Inputが値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
           "docsTags": [],
           "values": [
             {
@@ -8128,7 +8128,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができない。",
+          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8162,7 +8162,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n\n自動翻訳: コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数である。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
+          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n\n自動翻訳: コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数です。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
           "docsTags": [],
           "values": [
             {
@@ -8320,7 +8320,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\n自動翻訳: ion-input` のネイティブ `input` にフォーカスを設定する。グローバルな `input.focus()` の代わりに、このメソッドを使用します。  ページが入ったときに入力にフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
+          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\n自動翻訳: `ion-input` のネイティブ `input` にフォーカスを設定します。グローバルな `input.focus()` の代わりに、このメソッドを使用します。 ページが入ったときにInputにフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
           "docsTags": []
         }
       ],
@@ -8331,7 +8331,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.\n\n自動翻訳: 入力のフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the input loses focus.\n\n自動翻訳: Inputのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -8340,7 +8340,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -8349,7 +8349,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.\n\n自動翻訳: 入力にフォーカスが当たったときに発せられる。",
+          "docs": "Emitted when the input has focus.\n\n自動翻訳: Inputにフォーカスが当たったときに発行されます。",
           "docsTags": []
         },
         {
@@ -8358,7 +8358,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発する。",
+          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発します。",
           "docsTags": []
         }
       ],
@@ -8367,52 +8367,52 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the input\n\n自動翻訳: 入力の背景"
+          "docs": "Background of the input\n\n自動翻訳: Inputの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the input text\n\n自動翻訳: 入力テキストの色"
+          "docs": "Color of the input text\n\n自動翻訳: Inputのテキストの色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the input\n\n自動翻訳: 入力の下パディング"
+          "docs": "Bottom padding of the input\n\n自動翻訳: InputのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the input\n\n自動翻訳: 入力のトップパディング"
+          "docs": "Top padding of the input\n\n自動翻訳: InputのTop Padding"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the input placeholder text\n\n自動翻訳: 入力用プレースホルダーテキストの色"
+          "docs": "Color of the input placeholder text\n\n自動翻訳: Inputのplaceholderのテキストの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the input placeholder text\n\n自動翻訳: 入力用プレースホルダーテキストのフォントスタイル"
+          "docs": "Font style of the input placeholder text\n\n自動翻訳: Inputのplaceholderのテキストのフォントスタイル"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the input placeholder text\n\n自動翻訳: 入力用プレースホルダーテキストのフォントウェイト"
+          "docs": "Font weight of the input placeholder text\n\n自動翻訳: Inputのplaceholderのテキストのフォントウェイト"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the input placeholder text\n\n自動翻訳: 入力プレースホルダーテキストの不透明度"
+          "docs": "Opacity of the input placeholder text\n\n自動翻訳: Inputのプレースホルダーテキストの不透明度"
         }
       ],
       "slots": [],
@@ -8458,7 +8458,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8513,7 +8513,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8563,48 +8563,48 @@
         {
           "name": "--inner-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのボトムインナーパディング"
+          "docs": "Bottom inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのBottom Inner Padding"
         },
         {
           "name": "--inner-padding-end",
           "annotation": "prop",
-          "docs": "End inner padding of the item divider\n\n自動翻訳: アイテムディバイダーの内側パディングを終了する"
+          "docs": "End inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのEnd Inner Padding"
         },
         {
           "name": "--inner-padding-start",
           "annotation": "prop",
-          "docs": "Start inner padding of the item divider\n\n自動翻訳: アイテムディバイダーの内側パディングを開始する"
+          "docs": "Start inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのStart Inner Padding"
         },
         {
           "name": "--inner-padding-top",
           "annotation": "prop",
-          "docs": "Top inner padding of the item divider\n\n自動翻訳: アイテムディバイダーの上部内側パディング"
+          "docs": "Top inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのTop Inner Padding"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item divider\n\n自動翻訳: アイテムディバイダーのボトムパディング"
+          "docs": "Bottom padding of the item divider\n\n自動翻訳: アイテムディバイダーのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合は右パディング、右から左の場合は左パディング"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合はRight Padding、右から左の場合はLeft Padding"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item divider\n\n自動翻訳: アイテムディバイダーのトップパディング"
+          "docs": "Top padding of the item divider\n\n自動翻訳: アイテムディバイダーのTop Padding"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
@@ -8685,7 +8685,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8740,7 +8740,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the item option.\n\n自動翻訳: `true`の場合、ユーザーはアイテムオプションと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the item option.\n\n自動翻訳: `true`の場合、ユーザーはアイテムオプションと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8793,7 +8793,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -8812,7 +8812,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8833,7 +8833,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -8852,7 +8852,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -8910,7 +8910,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "bottom",
@@ -8988,7 +8988,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the item has been fully swiped.\n\n自動翻訳: アイテムが完全にスワイプされたときに発せられる。",
+          "docs": "Emitted when the item has been fully swiped.\n\n自動翻訳: アイテムが完全にスワイプされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -9095,7 +9095,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the sliding position changes.\n\n自動翻訳: スライド位置が変化したときに発せられる。",
+          "docs": "Emitted when the sliding position changes.\n\n自動翻訳: スライド位置が変化したときに発行されます。",
           "docsTags": []
         }
       ],
@@ -9171,7 +9171,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -9297,7 +9297,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the item.\n\n自動翻訳: `true`の場合、ユーザはそのアイテムと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the item.\n\n自動翻訳: `true`の場合、ユーザはそのアイテムと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9333,7 +9333,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border. Only available in `md` mode.\n\n自動翻訳: アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`モードでのみ使用可能です。",
+          "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border. Only available in `md` mode.\n\n自動翻訳: アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`modeでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -9357,7 +9357,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -9404,7 +9404,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9425,7 +9425,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -9443,7 +9443,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -9462,7 +9462,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -9508,7 +9508,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -9576,7 +9576,7 @@
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: 押されたときのアイテムの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。"
+          "docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: 押されたときのアイテムの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
@@ -9691,22 +9691,22 @@
         {
           "name": "--inner-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item inner\n\n自動翻訳: アイテム内側のボトムパディング"
+          "docs": "Bottom padding of the item inner\n\n自動翻訳: アイテム内側のBottom Padding"
         },
         {
           "name": "--inner-padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合は右パディング、方向がアイテムの内側の右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--inner-padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングがアイテム内側に入る"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingがアイテム内側に入る"
         },
         {
           "name": "--inner-padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item inner\n\n自動翻訳: アイテム内側のトップパディング"
+          "docs": "Top padding of the item inner\n\n自動翻訳: アイテム内側のTop Padding"
         },
         {
           "name": "--min-height",
@@ -9716,22 +9716,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item\n\n自動翻訳: アイテムの底面パディング"
+          "docs": "Bottom padding of the item\n\n自動翻訳: アイテムのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合は右パディング、方向が右から左の場合は左パディングで項目を囲む"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合はRight Padding、方向が右から左の場合はLeft Paddingで項目を囲む"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングで項目を囲む"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingで項目を囲む"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item\n\n自動翻訳: アイテムのトップパディング"
+          "docs": "Top padding of the item\n\n自動翻訳: アイテムのTop Padding"
         },
         {
           "name": "--ripple-color",
@@ -9747,7 +9747,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
@@ -9818,7 +9818,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -9873,7 +9873,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9924,7 +9924,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.\n\n自動翻訳: ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能である。"
+          "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.\n\n自動翻訳: ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能です。"
         }
       ],
       "slots": [],
@@ -9962,7 +9962,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -10045,7 +10045,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10172,7 +10172,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10401,7 +10401,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10494,7 +10494,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ロードインジケータは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ロードインジケータは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10515,7 +10515,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the loading overlay after it has been presented.\n\n自動翻訳: ローディングオーバーレイが提示された後、それを解除する。",
+          "docs": "Dismiss the loading overlay after it has been presented.\n\n自動翻訳: ローディングオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -10535,7 +10535,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the loading did dismiss.\n\n自動翻訳: ローディングが解除されたタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the loading did dismiss.\n\n自動翻訳: ローディングが解除されたタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -10546,7 +10546,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the loading will dismiss.\n\n自動翻訳: ローディングが解除されるタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the loading will dismiss.\n\n自動翻訳: ローディングが解除されるタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -10557,7 +10557,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the loading overlay after it has been created.\n\n自動翻訳: 作成後のローディングオーバーレイを提示する。",
+          "docs": "Present the loading overlay after it has been created.\n\n自動翻訳: 作成後のローディングオーバーレイを提示します。",
           "docsTags": []
         }
       ],
@@ -10568,7 +10568,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading has dismissed.\n\n自動翻訳: ローディングが解除された後に発せられる。",
+          "docs": "Emitted after the loading has dismissed.\n\n自動翻訳: ローディングが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -10577,7 +10577,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading has presented.\n\n自動翻訳: ローディングが提示された後に発せられる。",
+          "docs": "Emitted after the loading has presented.\n\n自動翻訳: ローディングが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -10586,7 +10586,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading has dismissed.\n\n自動翻訳: ローディングが解除される前に発せられる。",
+          "docs": "Emitted before the loading has dismissed.\n\n自動翻訳: ローディングが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -10595,7 +10595,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading has presented.\n\n自動翻訳: ローディングが提示される前に発せられる。",
+          "docs": "Emitted before the loading has presented.\n\n自動翻訳: ローディングが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -10619,7 +10619,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the loading dialog\n\n自動翻訳: ローディングダイアログの最大高さ"
+          "docs": "Maximum height of the loading dialog\n\n自動翻訳: ローディングダイアログの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -10705,7 +10705,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -10760,7 +10760,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the menu button.\n\n自動翻訳: `true`の場合、ユーザはメニューボタンを操作することができない。",
+          "docs": "If `true`, the user cannot interact with the menu button.\n\n自動翻訳: `true`の場合、ユーザはメニューボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10796,7 +10796,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10903,22 +10903,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンの下パディング"
+          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンの上部パディング"
+          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
         }
       ],
       "slots": [],
@@ -10963,7 +10963,7 @@
           "mutable": false,
           "attr": "auto-hide",
           "reflectToAttr": false,
-          "docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu.\n\n自動翻訳: 対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にする。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
+          "docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu.\n\n自動翻訳: 対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にします。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10980,7 +10980,7 @@
           "mutable": false,
           "attr": "menu",
           "reflectToAttr": false,
-          "docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active.\n\n自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルする。",
+          "docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active.\n\n自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルします。",
           "docsTags": [],
           "values": [
             {
@@ -11179,7 +11179,7 @@
           },
           "signature": "close(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.\n\n自動翻訳: メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返す。",
+          "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.\n\n自動翻訳: メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。",
           "docsTags": []
         },
         {
@@ -11190,7 +11190,7 @@
           },
           "signature": "isActive() => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.\n\n自動翻訳: メニューがアクティブであれば `true` を返す。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味する。",
+          "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.\n\n自動翻訳: メニューがアクティブであれば `true` を返します。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味します。",
           "docsTags": []
         },
         {
@@ -11201,7 +11201,7 @@
           },
           "signature": "isOpen() => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` is the menu is open.\n\n自動翻訳: メニューが開いている場合は `true` を返す。",
+          "docs": "Returns `true` is the menu is open.\n\n自動翻訳: メニューが開いている場合は `true` を返します。",
           "docsTags": []
         },
         {
@@ -11212,7 +11212,7 @@
           },
           "signature": "open(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.\n\n自動翻訳: メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返す。",
+          "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.\n\n自動翻訳: メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返します。",
           "docsTags": []
         },
         {
@@ -11223,7 +11223,7 @@
           },
           "signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: ボタンを開いたり閉じたりする。操作が正常に完了しない場合は `false` を返す。",
+          "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: ボタンを開いたり閉じたりします。操作が正常に完了しない場合は `false` を返します。",
           "docsTags": []
         },
         {
@@ -11234,7 +11234,7 @@
           },
           "signature": "toggle(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとする。操作が正常に完了しない場合は、`false`を返す。",
+          "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、`false`を返します。",
           "docsTags": []
         }
       ],
@@ -11245,7 +11245,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is closed.\n\n自動翻訳: メニューが閉じられたときに発する。",
+          "docs": "Emitted when the menu is closed.\n\n自動翻訳: メニューが閉じられたときに発します。",
           "docsTags": []
         },
         {
@@ -11254,7 +11254,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is open.\n\n自動翻訳: メニューが開いているときに発せられる。",
+          "docs": "Emitted when the menu is open.\n\n自動翻訳: メニューが開いているときに発行されます。",
           "docsTags": []
         },
         {
@@ -11263,7 +11263,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is about to be closed.\n\n自動翻訳: メニューが閉じられようとするときに発する。",
+          "docs": "Emitted when the menu is about to be closed.\n\n自動翻訳: メニューが閉じられようとするときに発します。",
           "docsTags": []
         },
         {
@@ -11272,7 +11272,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is about to be opened.\n\n自動翻訳: メニューが開かれようとするときに発する。",
+          "docs": "Emitted when the menu is about to be opened.\n\n自動翻訳: メニューが開かれようとするときに発します。",
           "docsTags": []
         }
       ],
@@ -11308,7 +11308,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the menu\n\n自動翻訳: メニューの最大高さ"
+          "docs": "Maximum height of the menu\n\n自動翻訳: メニューの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -11649,7 +11649,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -11669,7 +11669,7 @@
           "type": "HTMLElement | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.\n\n自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSモードでのみ適用されます。",
+          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.\n\n自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSmodeでのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -11705,7 +11705,7 @@
           "mutable": false,
           "attr": "swipe-to-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.\n\n自動翻訳: `true`の場合、スワイプでモーダルを解除することができます。iOSモードでのみ適用されます。",
+          "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.\n\n自動翻訳: `true`の場合、スワイプでモーダルを解除することができます。iOS modeでのみ適用されます。",
           "docsTags": [
             {
               "name": "deprecated",
@@ -11751,7 +11751,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the modal overlay after it has been presented.\n\n自動翻訳: モーダルオーバーレイが表示された後、それを解除する。",
+          "docs": "Dismiss the modal overlay after it has been presented.\n\n自動翻訳: モーダルオーバーレイが表示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -11782,7 +11782,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the modal did dismiss.\n\n自動翻訳: モーダルが解除されたときに解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the modal did dismiss.\n\n自動翻訳: モーダルが解除されたときに解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -11793,7 +11793,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the modal will dismiss.\n\n自動翻訳: モーダルがいつ解散するかを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the modal will dismiss.\n\n自動翻訳: モーダルがいつ解散するかを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -11804,7 +11804,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the modal overlay after it has been created.\n\n自動翻訳: モーダルオーバーレイを作成した後に提示する。",
+          "docs": "Present the modal overlay after it has been created.\n\n自動翻訳: モーダルオーバーレイを作成した後に提示します。",
           "docsTags": []
         },
         {
@@ -11826,7 +11826,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.\n\n自動翻訳: モーダルが解散した後に発せられる。ionModalDidDismiss の略記です。",
+          "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.\n\n自動翻訳: モーダルが解散した後に発行されます。ionModalDidDismiss の略記です。",
           "docsTags": []
         },
         {
@@ -11835,7 +11835,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.\n\n自動翻訳: モードが提示された後に発せられる。ionModalDidPresent の略記です。",
+          "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.\n\n自動翻訳: モーダルが提示された後に発行されます。ionModalDidPresent の略記です。",
           "docsTags": []
         },
         {
@@ -11844,7 +11844,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal breakpoint has changed.\n\n自動翻訳: モードブレークポイントが変更された後に発せられる。",
+          "docs": "Emitted after the modal breakpoint has changed.\n\n自動翻訳: モーダルブレークポイントが変更された後に発行されます。",
           "docsTags": []
         },
         {
@@ -11862,7 +11862,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has presented.\n\n自動翻訳: モードが提示された後に発せられる。",
+          "docs": "Emitted after the modal has presented.\n\n自動翻訳: モーダルが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -11871,7 +11871,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has dismissed.\n\n自動翻訳: モーダルが解散する前に発行される。",
+          "docs": "Emitted before the modal has dismissed.\n\n自動翻訳: モーダルが解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -11880,7 +11880,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has presented.\n\n自動翻訳: モーダルが提示される前に発せられる。",
+          "docs": "Emitted before the modal has presented.\n\n自動翻訳: モーダルが提示される前に発行されます。",
           "docsTags": []
         },
         {
@@ -11889,7 +11889,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.\n\n自動翻訳: モーダルが解散する前に発せられる。ionModalWillDismiss の略記です。",
+          "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.\n\n自動翻訳: モーダルが解散する前に発行されます。ionModalWillDismiss の略記です。",
           "docsTags": []
         },
         {
@@ -11898,7 +11898,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.\n\n自動翻訳: モーダルが提示される前に発せられる。ionModalWillPresent の略記です。",
+          "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.\n\n自動翻訳: モーダルが提示される前に発行されます。ionModalWillPresent の略記です。",
           "docsTags": []
         }
       ],
@@ -11942,7 +11942,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the modal\n\n自動翻訳: モーダルの最大高さ"
+          "docs": "Maximum height of the modal\n\n自動翻訳: モーダルの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -11978,7 +11978,7 @@
         },
         {
           "name": "content",
-          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトスロットのラッパー要素です。"
+          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトslotのラッパー要素です。"
         },
         {
           "name": "handle",
@@ -12009,7 +12009,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用する。",
+          "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
           "docsTags": [],
           "values": [
             {
@@ -12039,7 +12039,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用する。",
+          "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用します。",
           "docsTags": [],
           "values": [
             {
@@ -12121,7 +12121,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the nav should animate the transition of components.\n\n自動翻訳: `true`の場合、コンポーネントの遷移をアニメーションで表現する。",
+          "docs": "If `true`, the nav should animate the transition of components.\n\n自動翻訳: `true`の場合、コンポーネントの遷移をアニメーションで表現します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12137,7 +12137,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions.\n\n自動翻訳: デフォルトでは、`ion-nav` はモード（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
+          "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions.\n\n自動翻訳: デフォルトでは、`ion-nav` はmode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
           "docsTags": [],
           "values": [
             {
@@ -12319,7 +12319,7 @@
           },
           "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.\n\n自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入する。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
+          "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.\n\n自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
           "docsTags": [
             {
               "name": "param",
@@ -12347,7 +12347,7 @@
           },
           "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.\n\n自動翻訳: ナビゲーションスタックからコンポーネントをポップオフする。現在のコンポーネントからナビゲートして戻る。",
+          "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.\n\n自動翻訳: ナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。",
           "docsTags": [
             {
               "name": "param",
@@ -12559,7 +12559,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -12614,7 +12614,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -12847,7 +12847,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -12889,7 +12889,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the picker overlay after it has been presented.\n\n自動翻訳: ピッカー・オーバーレイが表示された後、それを解除する。",
+          "docs": "Dismiss the picker overlay after it has been presented.\n\n自動翻訳: ピッカー・オーバーレイが表示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -12925,7 +12925,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the picker did dismiss.\n\n自動翻訳: ピッカーが解散したことを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the picker did dismiss.\n\n自動翻訳: ピッカーが解散したことを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -12936,7 +12936,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the picker will dismiss.\n\n自動翻訳: ピッカーが解散するタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the picker will dismiss.\n\n自動翻訳: ピッカーが解散するタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -12947,7 +12947,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the picker overlay after it has been created.\n\n自動翻訳: ピッカー・オーバーレイを作成した後に提示する。",
+          "docs": "Present the picker overlay after it has been created.\n\n自動翻訳: ピッカー・オーバーレイを作成した後に提示します。",
           "docsTags": []
         }
       ],
@@ -12958,7 +12958,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has dismissed.\n\n自動翻訳: ピッカーが解散した後に発せられる。",
+          "docs": "Emitted after the picker has dismissed.\n\n自動翻訳: ピッカーが解散した後に発行されます。",
           "docsTags": []
         },
         {
@@ -12967,7 +12967,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has presented.\n\n自動翻訳: ピッカーが提示された後に発せられる。",
+          "docs": "Emitted after the picker has presented.\n\n自動翻訳: ピッカーが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -12976,7 +12976,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has dismissed.\n\n自動翻訳: ピッカーが解散する前に発行される。",
+          "docs": "Emitted before the picker has dismissed.\n\n自動翻訳: ピッカーが解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -12985,7 +12985,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has presented.\n\n自動翻訳: ピッカーが提示される前に発せられる。",
+          "docs": "Emitted before the picker has presented.\n\n自動翻訳: ピッカーが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -13004,7 +13004,7 @@
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "Background of the picker in rgb format\n\n自動翻訳: ピッカーの背景（rgb形式"
+          "docs": "Background of the picker in rgb format\n\n自動翻訳: ピッカーの背景（rgb形式）"
         },
         {
           "name": "--border-color",
@@ -13034,7 +13034,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the picker\n\n自動翻訳: ピッカーの最大高さ"
+          "docs": "Maximum height of the picker\n\n自動翻訳: ピッカーの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -13044,7 +13044,7 @@
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the picker\n\n自動翻訳: ピッカーの最低高さ"
+          "docs": "Minimum height of the picker\n\n自動翻訳: ピッカーの最小の高さ"
         },
         {
           "name": "--min-width",
@@ -13106,7 +13106,7 @@
           "mutable": true,
           "attr": "alignment",
           "reflectToAttr": false,
-          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.\n\n自動翻訳: ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `'center'` で、`md` モードでは `'start'` です。",
+          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.\n\n自動翻訳: ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` modeでは `'center'` で、`md` modeでは `'start'` です。",
           "docsTags": [],
           "values": [
             {
@@ -13151,7 +13151,7 @@
           "mutable": false,
           "attr": "arrow",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode.\n\n自動翻訳: `true`の場合、`ios`モードで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。md` モードでは適用されない。",
+          "docs": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode.\n\n自動翻訳: `true`の場合、`ios` modeで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。 `md` modeでは適用されない。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13369,7 +13369,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -13429,7 +13429,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.\n\n自動翻訳: ポップオーバーを `reference` ポイントのどちら側に配置するかを記述する。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
+          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.\n\n自動翻訳: ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -13489,7 +13489,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ポップオーバーは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ポップオーバーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13525,7 +13525,7 @@
           "mutable": false,
           "attr": "trigger-action",
           "reflectToAttr": false,
-          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.\n\n自動翻訳: どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述する。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
+          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.\n\n自動翻訳: どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
           "docsTags": [],
           "default": "'click'",
           "values": [
@@ -13555,7 +13555,7 @@
           },
           "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the popover overlay after it has been presented.\n\n自動翻訳: ポップオーバーオーバーレイが提示された後、それを解除する。",
+          "docs": "Dismiss the popover overlay after it has been presented.\n\n自動翻訳: ポップオーバーオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -13579,7 +13579,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the popover did dismiss.\n\n自動翻訳: ポップオーバーが解除されたタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the popover did dismiss.\n\n自動翻訳: ポップオーバーが解除されたタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -13590,7 +13590,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the popover will dismiss.\n\n自動翻訳: ポップオーバーが解除されるタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the popover will dismiss.\n\n自動翻訳: ポップオーバーが解除されるタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -13666,7 +13666,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.\n\n自動翻訳: ポップオーバーが解散する前に発せられる。ionPopoverWillDismissの略記です。",
+          "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.\n\n自動翻訳: ポップオーバーが解散する前に発行されます。ionPopoverWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13704,7 +13704,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the popover\n\n自動翻訳: ポップオーバーの最大高さ"
+          "docs": "Maximum height of the popover\n\n自動翻訳: ポップオーバーの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -13746,7 +13746,7 @@
       "parts": [
         {
           "name": "arrow",
-          "docs": "The arrow that points to the reference element. Only applies on `ios` mode.\n\n自動翻訳: 参照要素を指し示す矢印。ios`モード時のみ適用される。"
+          "docs": "The arrow that points to the reference element. Only applies on `ios` mode.\n\n自動翻訳: 参照要素を指し示す矢印。`ios` mode時のみ適用される。"
         },
         {
           "name": "backdrop",
@@ -13754,7 +13754,7 @@
         },
         {
           "name": "content",
-          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトスロットのラッパー要素です。"
+          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトslotのラッパー要素です。"
         }
       ],
       "dependents": [
@@ -13824,7 +13824,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -13879,7 +13879,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -13939,7 +13939,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].\n\n自動翻訳: この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものである。値は [0, 1] の間であるべきです。",
+          "docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].\n\n自動翻訳: この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものです。値は [0, 1] の間であるべきです。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -13963,7 +13963,7 @@
         {
           "name": "--buffer-background",
           "annotation": "prop",
-          "docs": "DEPRECATED, use `--background` instead\n\n自動翻訳: DEPRECATED、代わりに `--background` を使用する。"
+          "docs": "DEPRECATED, use `--background` instead\n\n自動翻訳: DEPRECATED、代わりに `--background` を使用します。"
         },
         {
           "name": "--progress-background",
@@ -14057,7 +14057,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -14109,7 +14109,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -14164,7 +14164,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the radio.\n\n自動翻訳: `true`の場合、ユーザはラジオと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the radio.\n\n自動翻訳: `true`の場合、ユーザはラジオと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14181,7 +14181,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -14238,7 +14238,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the radio button loses focus.\n\n自動翻訳: ラジオボタンのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the radio button loses focus.\n\n自動翻訳: ラジオボタンのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -14247,7 +14247,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the radio button has focus.\n\n自動翻訳: ラジオボタンにフォーカスが当たったときに発せられる。",
+          "docs": "Emitted when the radio button has focus.\n\n自動翻訳: ラジオボタンにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -14365,7 +14365,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -14437,7 +14437,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the range.\n\n自動翻訳: `true`の場合、ユーザは範囲と対話することができない。",
+          "docs": "If `true`, the user cannot interact with the range.\n\n自動翻訳: `true`の場合、ユーザは範囲と対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14454,7 +14454,7 @@
           "mutable": false,
           "attr": "dual-knobs",
           "reflectToAttr": false,
-          "docs": "Show two knobs.\n\n自動翻訳: 2つのノブを表示する。",
+          "docs": "Show two knobs.\n\n自動翻訳: 2つのノブを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14505,7 +14505,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -14596,7 +14596,7 @@
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
-          "docs": "Specifies the value granularity.\n\n自動翻訳: 値の粒度を指定する。",
+          "docs": "Specifies the value granularity.\n\n自動翻訳: 値の粒度を指定します。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -14613,7 +14613,7 @@
           "mutable": false,
           "attr": "ticks",
           "reflectToAttr": false,
-          "docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.\n\n自動翻訳: `true`の場合、ステップの値に基づいてティックマークを表示する。snaps`が `true` の場合のみ適用される。",
+          "docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.\n\n自動翻訳: `true`の場合、ステップの値に基づいてティックマークを表示します。snaps`が `true` の場合のみ適用される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -14653,7 +14653,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the range loses focus.\n\n自動翻訳: レンジの焦点が合わなくなったときに発する。",
+          "docs": "Emitted when the range loses focus.\n\n自動翻訳: レンジの焦点が合わなくなったときに発します。",
           "docsTags": []
         },
         {
@@ -14662,7 +14662,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行される。",
+          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -14671,7 +14671,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the range has focus.\n\n自動翻訳: レンジのフォーカスが合ったときに発する。",
+          "docs": "Emitted when the range has focus.\n\n自動翻訳: レンジのフォーカスが合ったときに発します。",
           "docsTags": []
         },
         {
@@ -14743,12 +14743,12 @@
         {
           "name": "--pin-background",
           "annotation": "prop",
-          "docs": "Background of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの背景（MDモード時のみ有効）"
+          "docs": "Background of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの背景（MD mode時のみ有効）"
         },
         {
           "name": "--pin-color",
           "annotation": "prop",
-          "docs": "Color of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの色（MDモード時のみ有効）"
+          "docs": "Color of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの色（MD mode時のみ有効）"
         }
       ],
       "slots": [
@@ -15004,7 +15004,7 @@
           "mutable": false,
           "attr": "pull-max",
           "reflectToAttr": false,
-          "docs": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when  the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果である。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+          "docs": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when  the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果です。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
           "docsTags": [],
           "default": "this.pullMin + 60",
           "values": [
@@ -15059,7 +15059,7 @@
           },
           "signature": "cancel() => Promise<void>",
           "parameters": [],
-          "docs": "Changes the refresher's state from `refreshing` to `cancelling`.\n\n自動翻訳: リフレッシュの状態を `refreshing` から `cancelling` に変更する。",
+          "docs": "Changes the refresher's state from `refreshing` to `cancelling`.\n\n自動翻訳: リフレッシュの状態を `refreshing` から `cancelling` に変更します。",
           "docsTags": []
         },
         {
@@ -15092,7 +15092,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted while the user is pulling down the content and exposing the refresher.\n\n自動翻訳: ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発する。",
+          "docs": "Emitted while the user is pulling down the content and exposing the refresher.\n\n自動翻訳: ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発します。",
           "docsTags": []
         },
         {
@@ -15101,7 +15101,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.\n\n自動翻訳: ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発せられる。リフレッシャーの状態を `refreshing` に更新する。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
+          "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.\n\n自動翻訳: ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発行されます。リフレッシャーの状態を `refreshing` に更新します。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
           "docsTags": []
         },
         {
@@ -15110,7 +15110,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user begins to start pulling down.\n\n自動翻訳: ユーザーが引き下げを開始するときに発する。",
+          "docs": "Emitted when the user begins to start pulling down.\n\n自動翻訳: ユーザーが引き下げを開始するときに発します。",
           "docsTags": []
         }
       ],
@@ -15157,7 +15157,7 @@
           },
           "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
           "parameters": [],
-          "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.\n\n自動翻訳: 再注文操作を完了する。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
+          "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.\n\n自動翻訳: 再注文操作を完了します。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
           "docsTags": [
             {
               "name": "param",
@@ -15265,7 +15265,7 @@
           },
           "signature": "addRipple(x: number, y: number) => Promise<() => void>",
           "parameters": [],
-          "docs": "Adds the ripple effect to the parent element.\n\n自動翻訳: 親要素に波及効果を付加する。",
+          "docs": "Adds the ripple effect to the parent element.\n\n自動翻訳: 親要素に波及効果を付加します。",
           "docsTags": [
             {
               "name": "param",
@@ -15375,7 +15375,7 @@
           "mutable": false,
           "attr": "to",
           "reflectToAttr": false,
-          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLである。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトする。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできない。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
+          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLです。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
           "docsTags": [],
           "values": [
             {
@@ -15425,7 +15425,7 @@
           "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.\n\n自動翻訳: ルートが入力しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
+          "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.\n\n自動翻訳: ルーターがアクセスしようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
           "docsTags": [],
           "values": [
             {
@@ -15522,7 +15522,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Used internally by `ion-router` to know when this route did change.\n\n自動翻訳: このルートがいつ変更されたかを知るために `ion-router` が内部で使用する。",
+          "docs": "Used internally by `ion-router` to know when this route did change.\n\n自動翻訳: このルートがいつ変更されたかを知るために `ion-router` が内部で使用します。",
           "docsTags": []
         }
       ],
@@ -15548,7 +15548,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -15603,7 +15603,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -15622,7 +15622,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -15640,7 +15640,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。",
+          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -15659,7 +15659,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。",
+          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -15685,7 +15685,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -15769,7 +15769,7 @@
           "mutable": true,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "default": "getIonMode(this)",
           "values": [
@@ -15827,7 +15827,7 @@
           "mutable": false,
           "attr": "use-hash",
           "reflectToAttr": false,
-          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.\n\n自動翻訳: ルーターは2つの \"モード \"で動作します。- ハッシュを使用する。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
+          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.\n\n自動翻訳: ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15859,7 +15859,7 @@
           },
           "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
           "parameters": [],
-          "docs": "Navigate to the specified path.\n\n自動翻訳: 指定されたパスに移動する。",
+          "docs": "Navigate to the specified path.\n\n自動翻訳: 指定されたパスに移動します。",
           "docsTags": [
             {
               "name": "param",
@@ -15888,7 +15888,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted when the route is about to change\n\n自動翻訳: ルートが変更されようとするときに発せられるイベント",
+          "docs": "Event emitted when the route is about to change\n\n自動翻訳: ルートが変更されようとするときに発行されます。イベント",
           "docsTags": []
         }
       ],
@@ -15950,7 +15950,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, enable searchbar animation.\n\n自動翻訳: `true`の場合、検索バーのアニメーションを有効にする。",
+          "docs": "If `true`, enable searchbar animation.\n\n自動翻訳: `true`の場合、検索バーのアニメーションを有効にします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -15967,7 +15967,7 @@
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
-          "docs": "Set the input's autocomplete property.\n\n自動翻訳: 入力のオートコンプリートプロパティを設定します。",
+          "docs": "Set the input's autocomplete property.\n\n自動翻訳: Inputのオートコンプリートプロパティを設定します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -16197,7 +16197,7 @@
           "mutable": false,
           "attr": "autocorrect",
           "reflectToAttr": false,
-          "docs": "Set the input's autocorrect property.\n\n自動翻訳: 入力のオートコレクトプロパティを設定します。",
+          "docs": "Set the input's autocorrect property.\n\n自動翻訳: Inputのオートコレクトプロパティを設定します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -16219,7 +16219,7 @@
           "mutable": false,
           "attr": "cancel-button-icon",
           "reflectToAttr": false,
-          "docs": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`.\n\n自動翻訳: キャンセルボタンのアイコンを設定する。md`モードのみに適用されます。デフォルトは `arrow-back-sharp` です。",
+          "docs": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`.\n\n自動翻訳: キャンセルボタンのアイコンを設定します。 `md` modeのみに適用されます。デフォルトは `arrow-back-sharp` です。",
           "docsTags": [],
           "default": "config.get('backButtonIcon', arrowBackSharp) as string",
           "values": [
@@ -16236,7 +16236,7 @@
           "mutable": false,
           "attr": "cancel-button-text",
           "reflectToAttr": false,
-          "docs": "Set the the cancel button text. Only applies to `ios` mode.\n\n自動翻訳: キャンセルボタンのテキストを設定します。ios`モードのみ適用されます。",
+          "docs": "Set the the cancel button text. Only applies to `ios` mode.\n\n自動翻訳: キャンセルボタンのテキストを設定します。 `ios` modeのみ適用されます。",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [
@@ -16253,7 +16253,7 @@
           "mutable": false,
           "attr": "clear-icon",
           "reflectToAttr": false,
-          "docs": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.\n\n自動翻訳: クリアアイコンを設定する。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
+          "docs": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.\n\n自動翻訳: クリアアイコンを設定します。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
           "docsTags": [],
           "values": [
             {
@@ -16272,7 +16272,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -16344,7 +16344,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザは入力と対話することができない。",
+          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザはInputと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16453,7 +16453,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -16474,7 +16474,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: 入力のプレースホルダーを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "default": "'Search'",
           "values": [
@@ -16491,7 +16491,7 @@
           "mutable": false,
           "attr": "search-icon",
           "reflectToAttr": false,
-          "docs": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode.\n\n自動翻訳: 検索アイコンとして使用するアイコンです。デフォルトは `ios` モードでは `search-outline` 、`md` モードでは `search-sharp` である。",
+          "docs": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode.\n\n自動翻訳: 検索アイコンとして使用するアイコンです。デフォルトは `ios` modeでは `search-outline` 、`md` modeでは `search-sharp` です。",
           "docsTags": [],
           "values": [
             {
@@ -16510,7 +16510,7 @@
           "mutable": false,
           "attr": "show-cancel-button",
           "reflectToAttr": false,
-          "docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.\n\n自動翻訳: キャンセルボタンに関する動作を設定する。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にする。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示する。",
+          "docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.\n\n自動翻訳: キャンセルボタンに関する動作を設定します。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にします。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。",
           "docsTags": [],
           "default": "'never'",
           "values": [
@@ -16536,7 +16536,7 @@
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
-          "docs": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.\n\n自動翻訳: クリアボタンに関する動作を設定する。デフォルトは `\"focus\"` です。focus\"`に設定すると、入力が空でない場合、フォーカス時にクリアボタンを表示します。never\"`に設定すると、クリアボタンを非表示にします。always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、入力が空でない場合にのみクリアボタンを表示する。",
+          "docs": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.\n\n自動翻訳: クリアボタンに関する動作を設定します。デフォルトは `\"focus\"` です。`\"focus\"`に設定すると、Inputが空でない場合、フォーカス時にクリアボタンを表示します。`\"never\"`に設定すると、クリアボタンを非表示にします。`\"always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Inputが空でない場合にのみクリアボタンを表示します。",
           "docsTags": [],
           "default": "'always'",
           "values": [
@@ -16562,7 +16562,7 @@
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
-          "docs": "If `true`, enable spellcheck on the input.\n\n自動翻訳: `true`の場合、入力のスペルチェックを有効にする。",
+          "docs": "If `true`, enable spellcheck on the input.\n\n自動翻訳: `true`の場合、入力値のスペルチェックを有効にします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16579,7 +16579,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "Set the type of the input.\n\n自動翻訳: 入力の種類を設定します。",
+          "docs": "Set the type of the input.\n\n自動翻訳: Inputの種類を設定します。",
           "docsTags": [],
           "default": "'search'",
           "values": [
@@ -16621,7 +16621,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the searchbar.\n\n自動翻訳: サーチバーの値。",
+          "docs": "the value of the searchbar.\n\n自動翻訳: 検索バーの値。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -16670,7 +16670,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.\n\n自動翻訳: 入力のフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the input loses focus.\n\n自動翻訳: Inputのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16679,7 +16679,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the cancel button is clicked.\n\n自動翻訳: キャンセルボタンがクリックされたときに発せられる。",
+          "docs": "Emitted when the cancel button is clicked.\n\n自動翻訳: キャンセルボタンがクリックされたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16688,7 +16688,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16697,7 +16697,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the clear input button is clicked.\n\n自動翻訳: クリア入力ボタンがクリックされたときに発せられる。",
+          "docs": "Emitted when the clear input button is clicked.\n\n自動翻訳: Clear Inputボタンがクリックされたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16706,7 +16706,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.\n\n自動翻訳: 入力にフォーカスが当たったときに発せられる。",
+          "docs": "Emitted when the input has focus.\n\n自動翻訳: Inputにフォーカスが当たったときに発行されます。",
           "docsTags": []
         },
         {
@@ -16715,7 +16715,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発する。",
+          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発します。",
           "docsTags": []
         }
       ],
@@ -16724,32 +16724,32 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the searchbar input\n\n自動翻訳: サーチバー入力の背景"
+          "docs": "Background of the searchbar input\n\n自動翻訳: 検索バーのInputの背景"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the searchbar input\n\n自動翻訳: サーチバー入力のボーダー半径"
+          "docs": "Border radius of the searchbar input\n\n自動翻訳: 検索バーのInputのボーダー半径"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the searchbar input\n\n自動翻訳: サーチバー入力のボックスシャドウ"
+          "docs": "Box shadow of the searchbar input\n\n自動翻訳: 検索バーのInputのボックスシャドウ"
         },
         {
           "name": "--cancel-button-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar cancel button\n\n自動翻訳: サーチバーキャンセルボタンの色"
+          "docs": "Color of the searchbar cancel button\n\n自動翻訳: 検索バーのキャンセルボタンの色"
         },
         {
           "name": "--clear-button-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar clear button\n\n自動翻訳: サーチバークリアボタンの色"
+          "docs": "Color of the searchbar clear button\n\n自動翻訳: 検索バーのクリアボタンの色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the searchbar text\n\n自動翻訳: サーチバーテキストの色"
+          "docs": "Color of the searchbar text\n\n自動翻訳: 検索バーのテキストの色"
         },
         {
           "name": "--icon-color",
@@ -16764,17 +16764,17 @@
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the searchbar placeholder\n\n自動翻訳: サーチバー・プレースホルダーのフォントスタイル"
+          "docs": "Font style of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーのフォントスタイル"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the searchbar placeholder\n\n自動翻訳: サーチバー・プレースホルダーのフォントの太さ"
+          "docs": "Font weight of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーのフォントの太さ"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the searchbar placeholder\n\n自動翻訳: サーチバー・プレースホルダーの不透明度"
+          "docs": "Opacity of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーの不透明度"
         }
       ],
       "slots": [],
@@ -16878,7 +16878,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17039,42 +17039,42 @@
         {
           "name": "--margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the segment button\n\n自動翻訳: セグメントボタンの下端マージン"
+          "docs": "Bottom margin of the segment button\n\n自動翻訳: セグメントボタンのBottom Margin"
         },
         {
           "name": "--margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合は右マージン、右から左の場合は左マージン"
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin"
         },
         {
           "name": "--margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合は左マージン、右から左の場合は右マージン"
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin"
         },
         {
           "name": "--margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the segment button\n\n自動翻訳: セグメントボタンの上マージン"
+          "docs": "Top margin of the segment button\n\n自動翻訳: セグメントボタンのTop Margin"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the segment button\n\n自動翻訳: セグメントボタンの下パディング"
+          "docs": "Bottom padding of the segment button\n\n自動翻訳: セグメントボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなります。"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなります。"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the segment button\n\n自動翻訳: セグメントボタンのトップパディング"
+          "docs": "Top padding of the segment button\n\n自動翻訳: セグメントボタンのTop Padding"
         },
         {
           "name": "--transition",
@@ -17126,7 +17126,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -17198,7 +17198,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17295,7 +17295,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.\n\n自動翻訳: valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行される。",
+          "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.\n\n自動翻訳: valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -17333,7 +17333,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.\n\n自動翻訳: `true`の場合、ユーザは選択オプションと対話することができない。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからである。",
+          "docs": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.\n\n自動翻訳: `true`の場合、ユーザは選択オプションと対話することができません。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからです。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17444,7 +17444,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the select.\n\n自動翻訳: `true`の場合、ユーザはセレクトと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the select.\n\n自動翻訳: `true`の場合、ユーザはセレクトと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17504,7 +17504,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17653,7 +17653,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the select loses focus.\n\n自動翻訳: セレクトのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the select loses focus.\n\n自動翻訳: セレクトのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17662,7 +17662,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the selection is cancelled.\n\n自動翻訳: 選択がキャンセルされたときに発する。",
+          "docs": "Emitted when the selection is cancelled.\n\n自動翻訳: 選択がキャンセルされたときに発します。",
           "docsTags": []
         },
         {
@@ -17671,7 +17671,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発せられる。",
+          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17680,7 +17680,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the overlay is dismissed.\n\n自動翻訳: オーバーレイが解除されたときに発せられる。",
+          "docs": "Emitted when the overlay is dismissed.\n\n自動翻訳: オーバーレイが解除されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17689,7 +17689,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the select has focus.\n\n自動翻訳: セレクトにフォーカスが当たったときに発する。",
+          "docs": "Emitted when the select has focus.\n\n自動翻訳: セレクトにフォーカスが当たったときに発します。",
           "docsTags": []
         }
       ],
@@ -17698,22 +17698,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the select\n\n自動翻訳: セレクトの下パディング"
+          "docs": "Bottom padding of the select\n\n自動翻訳: セレクトのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合は右パディング、右から左の場合は左パディングを行う"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合は左パディング、右から左の場合は右パディング"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the select\n\n自動翻訳: セレクトのトップパディング"
+          "docs": "Top padding of the select\n\n自動翻訳: セレクトのTop Padding"
         },
         {
           "name": "--placeholder-color",
@@ -17872,7 +17872,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17910,7 +17910,7 @@
           "mutable": false,
           "attr": "pager",
           "reflectToAttr": false,
-          "docs": "If `true`, show the pagination.\n\n自動翻訳: もし `true` ならば、ページネーションを表示する。",
+          "docs": "If `true`, show the pagination.\n\n自動翻訳: もし `true` ならば、ページネーションを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17927,7 +17927,7 @@
           "mutable": false,
           "attr": "scrollbar",
           "reflectToAttr": false,
-          "docs": "If `true`, show the scrollbar.\n\n自動翻訳: `true`の場合、スクロールバーを表示する。",
+          "docs": "If `true`, show the scrollbar.\n\n自動翻訳: `true`の場合、スクロールバーを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17981,7 +17981,7 @@
           },
           "signature": "isBeginning() => Promise<boolean>",
           "parameters": [],
-          "docs": "Get whether or not the current slide is the first slide.\n\n自動翻訳: 現在のスライドが最初のスライドであるか否かを取得する。",
+          "docs": "Get whether or not the current slide is the first slide.\n\n自動翻訳: 現在のスライドが最初のスライドであるか否かを取得します。",
           "docsTags": []
         },
         {
@@ -17992,7 +17992,7 @@
           },
           "signature": "isEnd() => Promise<boolean>",
           "parameters": [],
-          "docs": "Get whether or not the current slide is the last slide.\n\n自動翻訳: 現在のスライドが最後のスライドであるか否かを取得する。",
+          "docs": "Get whether or not the current slide is the last slide.\n\n自動翻訳: 現在のスライドが最後のスライドであるか否かを取得します。",
           "docsTags": []
         },
         {
@@ -18003,7 +18003,7 @@
           },
           "signature": "length() => Promise<number>",
           "parameters": [],
-          "docs": "Get the total number of slides.\n\n自動翻訳: スライドの総枚数を取得する。",
+          "docs": "Get the total number of slides.\n\n自動翻訳: スライドの総枚数を取得します。",
           "docsTags": []
         },
         {
@@ -18014,7 +18014,7 @@
           },
           "signature": "lockSwipeToNext(lock: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Lock or unlock the ability to slide to the next slide.\n\n自動翻訳: 次のスライドにスライドする機能をロックまたはアンロックする。",
+          "docs": "Lock or unlock the ability to slide to the next slide.\n\n自動翻訳: 次のスライドにスライドする機能をロックまたはアンロックします。",
           "docsTags": [
             {
               "name": "param",
@@ -18102,7 +18102,7 @@
           },
           "signature": "slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Transition to the specified slide.\n\n自動翻訳: 指定されたスライドに遷移する。",
+          "docs": "Transition to the specified slide.\n\n自動翻訳: 指定されたスライドに遷移します。",
           "docsTags": [
             {
               "name": "param",
@@ -18126,7 +18126,7 @@
           },
           "signature": "startAutoplay() => Promise<void>",
           "parameters": [],
-          "docs": "Start auto play.\n\n自動翻訳: オートプレイを開始する。",
+          "docs": "Start auto play.\n\n自動翻訳: オートプレイを開始します。",
           "docsTags": []
         },
         {
@@ -18137,7 +18137,7 @@
           },
           "signature": "stopAutoplay() => Promise<void>",
           "parameters": [],
-          "docs": "Stop auto play.\n\n自動翻訳: 自動再生を停止する。",
+          "docs": "Stop auto play.\n\n自動翻訳: 自動再生を停止します。",
           "docsTags": []
         },
         {
@@ -18175,7 +18175,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the active slide has changed.\n\n自動翻訳: アクティブスライドが変更された後に発せられる。",
+          "docs": "Emitted after the active slide has changed.\n\n自動翻訳: アクティブスライドが変更された後に発行されます。",
           "docsTags": []
         },
         {
@@ -18184,7 +18184,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user double taps on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをダブルタップしたときに発生する。",
+          "docs": "Emitted when the user double taps on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをダブルタップしたときに発生します。",
           "docsTags": []
         },
         {
@@ -18193,7 +18193,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is actively being moved.\n\n自動翻訳: スライダーがアクティブに移動しているときに発せられる。",
+          "docs": "Emitted when the slider is actively being moved.\n\n自動翻訳: スライダーがアクティブに移動しているときに発行されます。",
           "docsTags": []
         },
         {
@@ -18202,7 +18202,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the next slide has ended.\n\n自動翻訳: 次のスライドが終了したときに発せられる。",
+          "docs": "Emitted when the next slide has ended.\n\n自動翻訳: 次のスライドが終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18211,7 +18211,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the next slide has started.\n\n自動翻訳: 次のスライドが開始されたときに発せられる。",
+          "docs": "Emitted when the next slide has started.\n\n自動翻訳: 次のスライドが開始されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18220,7 +18220,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the previous slide has ended.\n\n自動翻訳: 前のスライドが終了したときに発せられる。",
+          "docs": "Emitted when the previous slide has ended.\n\n自動翻訳: 前のスライドが終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18229,7 +18229,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the previous slide has started.\n\n自動翻訳: 前のスライドが開始されたときに発せられる。",
+          "docs": "Emitted when the previous slide has started.\n\n自動翻訳: 前のスライドが開始されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18238,7 +18238,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is at the last slide.\n\n自動翻訳: スライダーが最後のスライドになったときに発せられる。",
+          "docs": "Emitted when the slider is at the last slide.\n\n自動翻訳: スライダーが最後のスライドになったときに発行されます。",
           "docsTags": []
         },
         {
@@ -18247,7 +18247,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is at its initial position.\n\n自動翻訳: スライダーが初期位置にあるときに発せられる。",
+          "docs": "Emitted when the slider is at its initial position.\n\n自動翻訳: スライダーが初期位置にあるときに発行されます。",
           "docsTags": []
         },
         {
@@ -18256,7 +18256,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after Swiper initialization\n\n自動翻訳: Swiperの初期化後に発せられる",
+          "docs": "Emitted after Swiper initialization\n\n自動翻訳: Swiperの初期化後に発行されます。",
           "docsTags": []
         },
         {
@@ -18265,7 +18265,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user taps/clicks on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをタップ/クリックしたときに発せられる。",
+          "docs": "Emitted when the user taps/clicks on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをタップ/クリックしたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18274,7 +18274,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user releases the touch.\n\n自動翻訳: ユーザーがタッチを離したときに発せられる。",
+          "docs": "Emitted when the user releases the touch.\n\n自動翻訳: ユーザーがタッチを離したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18283,7 +18283,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user first touches the slider.\n\n自動翻訳: ユーザーがスライダーに初めて触れたときに発せられる。",
+          "docs": "Emitted when the user first touches the slider.\n\n自動翻訳: ユーザーがスライダーに初めて触れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18292,7 +18292,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slide transition has ended.\n\n自動翻訳: スライド遷移が終了したときに発せられる。",
+          "docs": "Emitted when the slide transition has ended.\n\n自動翻訳: スライド遷移が終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18301,7 +18301,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slide transition has started.\n\n自動翻訳: スライド遷移が開始されたときに発せられる。",
+          "docs": "Emitted when the slide transition has started.\n\n自動翻訳: スライド遷移が開始されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18310,7 +18310,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the active slide has changed.\n\n自動翻訳: アクティブスライドが変更される前に発せられる。",
+          "docs": "Emitted before the active slide has changed.\n\n自動翻訳: アクティブスライドが変更される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -18367,7 +18367,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -18660,7 +18660,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -18715,7 +18715,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -18755,7 +18755,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、タブバーを半透明にする。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、タブバーを半透明にします。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18816,7 +18816,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the tab button.\n\n自動翻訳: `true`の場合、ユーザはタブボタンを操作することができない。",
+          "docs": "If `true`, the user cannot interact with the tab button.\n\n自動翻訳: `true`の場合、ユーザはタブボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18852,7 +18852,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -18871,7 +18871,7 @@
           "mutable": true,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.\n\n自動翻訳: タブバーのテキストとアイコンのレイアウトを設定する。デフォルトは `'icon-top'` です。",
+          "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.\n\n自動翻訳: タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは `'icon-top'` です。",
           "docsTags": [],
           "values": [
             {
@@ -18911,7 +18911,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -18932,7 +18932,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。",
+          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -18987,7 +18987,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19045,22 +19045,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the tab button\n\n自動翻訳: タブボタンの下パディング"
+          "docs": "Bottom padding of the tab button\n\n自動翻訳: タブボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the tab button\n\n自動翻訳: タブボタンのトップパディング"
+          "docs": "Top padding of the tab button\n\n自動翻訳: タブボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
@@ -19201,7 +19201,7 @@
           },
           "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
           "parameters": [],
-          "docs": "Get a specific tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得する。",
+          "docs": "Get a specific tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -19217,7 +19217,7 @@
           },
           "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
           "parameters": [],
-          "docs": "Select a tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によってタブを選択する。",
+          "docs": "Select a tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によってタブを選択します。",
           "docsTags": [
             {
               "name": "param",
@@ -19233,7 +19233,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the navigation has finished transitioning to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに遷移し終わったときに発せられる。",
+          "docs": "Emitted when the navigation has finished transitioning to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。",
           "docsTags": []
         },
         {
@@ -19242,7 +19242,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the navigation is about to transition to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに移行しようとするときに発せられる。",
+          "docs": "Emitted when the navigation is about to transition to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。",
           "docsTags": []
         }
       ],
@@ -19251,7 +19251,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "bottom",
@@ -19286,7 +19286,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -19341,7 +19341,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -19386,7 +19386,7 @@
           "mutable": false,
           "attr": "auto-grow",
           "reflectToAttr": true,
-          "docs": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea.\n\n自動翻訳: `true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小する。",
+          "docs": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea.\n\n自動翻訳: `true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19420,7 +19420,7 @@
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
-          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。",
+          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19454,7 +19454,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -19509,7 +19509,7 @@
           "mutable": false,
           "attr": "cols",
           "reflectToAttr": false,
-          "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n\n自動翻訳: テキストコントロールの可視幅を、平均文字幅で指定する。指定する場合は、正の整数である必要があります。",
+          "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n\n自動翻訳: テキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -19545,7 +19545,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the textarea.\n\n自動翻訳: `true`の場合、ユーザはテキストエリアと対話することができない。",
+          "docs": "If `true`, the user cannot interact with the textarea.\n\n自動翻訳: `true`の場合、ユーザはテキストエリアと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19692,7 +19692,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -19749,7 +19749,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができない。",
+          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19842,7 +19842,7 @@
           "mutable": false,
           "attr": "wrap",
           "reflectToAttr": false,
-          "docs": "Indicates how the control wraps text.\n\n自動翻訳: コントロールがテキストをどのように折り返すかを示す。",
+          "docs": "Indicates how the control wraps text.\n\n自動翻訳: コントロールがテキストをどのように折り返すかを示します。",
           "docsTags": [],
           "values": [
             {
@@ -19885,7 +19885,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.\n\n自動翻訳: ion-textarea` のネイティブ `textarea` にフォーカスを設定する。グローバルな `textarea.focus()` の代わりに、このメソッドを使用する。",
+          "docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.\n\n自動翻訳: ion-textarea` のネイティブ `textarea` にフォーカスを設定します。グローバルな `textarea.focus()` の代わりに、このメソッドを使用します。",
           "docsTags": []
         }
       ],
@@ -19896,7 +19896,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.\n\n自動翻訳: 入力のフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the input loses focus.\n\n自動翻訳: Inputのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -19905,7 +19905,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input value has changed.\n\n自動翻訳: 入力値が変化したときに発せられる。",
+          "docs": "Emitted when the input value has changed.\n\n自動翻訳: 入力値が変化したときに発行されます。",
           "docsTags": []
         },
         {
@@ -19914,7 +19914,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.\n\n自動翻訳: 入力にフォーカスが当たったときに発せられる。",
+          "docs": "Emitted when the input has focus.\n\n自動翻訳: Inputにフォーカスが当たったときに発行されます。",
           "docsTags": []
         },
         {
@@ -19923,7 +19923,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発する。",
+          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発します。",
           "docsTags": []
         }
       ],
@@ -19947,22 +19947,22 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the textarea\n\n自動翻訳: テキストエリアの底面パディング"
+          "docs": "Bottom padding of the textarea\n\n自動翻訳: テキストエリアのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea\n\n自動翻訳: テキストエリアの方向が左から右の場合は右パディング、右から左の場合は左パディングを使用します。"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea\n\n自動翻訳: テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea\n\n自動翻訳: textareaの方向が左から右の場合は左パディング、右から左の場合は右パディング。"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea\n\n自動翻訳: textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the textarea\n\n自動翻訳: textareaのトップパディング"
+          "docs": "Top padding of the textarea\n\n自動翻訳: textareaのTop Padding"
         },
         {
           "name": "--placeholder-color",
@@ -20034,7 +20034,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20201,7 +20201,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20350,7 +20350,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons\n\n自動翻訳: 表示するアイコンの名前、または有効なSVGファイルへのパスを指定する。ion-icon`を参照。https://ionic.io/ionicons",
+          "docs": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons\n\n自動翻訳: 表示するアイコンの名前、または有効なSVGファイルへのパスを指定します。ion-icon`を参照。https://ionic.io/ionicons",
           "docsTags": [],
           "values": [
             {
@@ -20448,7 +20448,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -20495,7 +20495,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、トーストは半透明になります。モードが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、トーストは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20516,7 +20516,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the toast overlay after it has been presented.\n\n自動翻訳: トーストのオーバーレイが提示された後、それを解除する。",
+          "docs": "Dismiss the toast overlay after it has been presented.\n\n自動翻訳: トーストのオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -20536,7 +20536,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the toast did dismiss.\n\n自動翻訳: トーストが解散したことを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the toast did dismiss.\n\n自動翻訳: トーストが解散したことを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -20547,7 +20547,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the toast will dismiss.\n\n自動翻訳: トーストが解散するタイミングを解決するプロミスを返します。",
+          "docs": "Returns a promise that resolves when the toast will dismiss.\n\n自動翻訳: トーストが解散するタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -20558,7 +20558,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the toast overlay after it has been created.\n\n自動翻訳: トーストのオーバーレイを作成した後に提示する。",
+          "docs": "Present the toast overlay after it has been created.\n\n自動翻訳: トーストのオーバーレイを作成した後に提示します。",
           "docsTags": []
         }
       ],
@@ -20569,7 +20569,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has dismissed.\n\n自動翻訳: トーストが解散した後に発せられる。",
+          "docs": "Emitted after the toast has dismissed.\n\n自動翻訳: トーストが解散した後に発行されます。",
           "docsTags": []
         },
         {
@@ -20578,7 +20578,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has presented.\n\n自動翻訳: トーストが提示された後に発する。",
+          "docs": "Emitted after the toast has presented.\n\n自動翻訳: トーストが提示された後に発します。",
           "docsTags": []
         },
         {
@@ -20587,7 +20587,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has dismissed.\n\n自動翻訳: 乾杯が解散する前に発する。",
+          "docs": "Emitted before the toast has dismissed.\n\n自動翻訳: 乾杯が解散する前に発します。",
           "docsTags": []
         },
         {
@@ -20596,7 +20596,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has presented.\n\n自動翻訳: トーストが提示される前に発せられる。",
+          "docs": "Emitted before the toast has presented.\n\n自動翻訳: トーストが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -20655,7 +20655,7 @@
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the toast\n\n自動翻訳: トーストの最大高さ"
+          "docs": "Maximum height of the toast\n\n自動翻訳: トーストの最大の高さ"
         },
         {
           "name": "--max-width",
@@ -20665,7 +20665,7 @@
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the toast\n\n自動翻訳: トーストの最低高さ"
+          "docs": "Minimum height of the toast\n\n自動翻訳: トーストの最小の高さ"
         },
         {
           "name": "--min-width",
@@ -20767,7 +20767,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20822,7 +20822,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the toggle.\n\n自動翻訳: `true`の場合、ユーザーはトグルを操作することができない。",
+          "docs": "If `true`, the user cannot interact with the toggle.\n\n自動翻訳: `true`の場合、ユーザーはトグルを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20859,7 +20859,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -20923,7 +20923,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the toggle loses focus.\n\n自動翻訳: トグルのフォーカスが外れたときに発せられる。",
+          "docs": "Emitted when the toggle loses focus.\n\n自動翻訳: トグルのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -20932,7 +20932,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行される。",
+          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -20941,7 +20941,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the toggle has focus.\n\n自動翻訳: トグルにフォーカスが当たったときに発せられる。",
+          "docs": "Emitted when the toggle has focus.\n\n自動翻訳: トグルにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -20990,7 +20990,7 @@
         {
           "name": "--handle-max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the toggle handle\n\n自動翻訳: トグルハンドルの最大高さ"
+          "docs": "Maximum height of the toggle handle\n\n自動翻訳: トグルハンドルの最大の高さ"
         },
         {
           "name": "--handle-spacing",
@@ -21068,7 +21068,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色\"`、二次色\"`、三次色\"`、成功色\"`、警告色\"`、危険色\"`、明色\"`、中色\"`、暗色\"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -21123,7 +21123,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -21187,28 +21187,28 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the toolbar\n\n自動翻訳: ツールバーの下パディング"
+          "docs": "Bottom padding of the toolbar\n\n自動翻訳: ツールバーのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the toolbar\n\n自動翻訳: ツールバーの上部パディング"
+          "docs": "Top padding of the toolbar\n\n自動翻訳: ツールバーのTop Padding"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。"
+          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
@@ -21216,11 +21216,11 @@
         },
         {
           "name": "primary",
-          "docs": "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.\n\n自動翻訳: コンテンツは、`ios`モードではツールバーテキストの右側に、`md`モードでは右端に配置されます。"
+          "docs": "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.\n\n自動翻訳: コンテンツは、`ios` modeではツールバーテキストの右側に、`md` modeでは右端に配置されます。"
         },
         {
           "name": "secondary",
-          "docs": "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.\n\n自動翻訳: コンテンツは、`ios`モードではツールバーテキストの左側に、`md`モードでは右側に直接配置されます。"
+          "docs": "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.\n\n自動翻訳: コンテンツは、`ios` modeではツールバーテキストの左側に、`md` modeでは右側に直接配置されます。"
         },
         {
           "name": "start",
@@ -21296,7 +21296,7 @@
           "type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Section footers and the data used within its given\ntemplate can be dynamically created by passing a function to `footerFn`.\nThe logic within the footer function can decide if the footer template\nshould be used, and what data to give to the footer template. The function\nmust return `null` if a footer cell shouldn't be created.\n\n自動翻訳: セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければならない。",
+          "docs": "Section footers and the data used within its given\ntemplate can be dynamically created by passing a function to `footerFn`.\nThe logic within the footer function can decide if the footer template\nshould be used, and what data to give to the footer template. The function\nmust return `null` if a footer cell shouldn't be created.\n\n自動翻訳: セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければなりません。",
           "docsTags": [],
           "values": [
             {
@@ -21338,7 +21338,7 @@
           "type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Section headers and the data used within its given\ntemplate can be dynamically created by passing a function to `headerFn`.\nFor example, a large list of contacts usually has dividers between each\nletter in the alphabet. App's can provide their own custom `headerFn`\nwhich is called with each record within the dataset. The logic within\nthe header function can decide if the header template should be used,\nand what data to give to the header template. The function must return\n`null` if a header cell shouldn't be created.\n\n自動翻訳: セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければならない。",
+          "docs": "Section headers and the data used within its given\ntemplate can be dynamically created by passing a function to `headerFn`.\nFor example, a large list of contacts usually has dividers between each\nletter in the alphabet. App's can provide their own custom `headerFn`\nwhich is called with each record within the dataset. The logic within\nthe header function can decide if the header template should be used,\nand what data to give to the header template. The function must return\n`null` if a header cell shouldn't be created.\n\n自動翻訳: セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければなりません。",
           "docsTags": [],
           "values": [
             {
@@ -21437,7 +21437,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the footer to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供する。JSXのvirtual-domを返す。",
+          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the footer to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供します。JSXのvirtual-domを返します。",
           "docsTags": [],
           "values": [
             {
@@ -21455,7 +21455,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the header to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供する。JSXのvirtual-domを返す。",
+          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the header to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供します。JSXのvirtual-domを返します。",
           "docsTags": [],
           "values": [
             {
@@ -21473,7 +21473,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the items to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意する。JSXのvirtual-domを返す。",
+          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the items to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意します。JSXのvirtual-domを返します。",
           "docsTags": [],
           "values": [
             {
diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
index b982378f777..e4531af065f 100644
--- a/scripts/data/translated-cache.json
+++ b/scripts/data/translated-cache.json
@@ -1144,4 +1144,4 @@
     "The name of your new project (e.g. `myApp`, `\"My App\"`)": "新しいプロジェクトの名前（例：`myApp`、`\"My App\"`）を指定します。",
     "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)": "使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）"
   }
-}
+}
\ No newline at end of file
diff --git a/scripts/data/translated-cli.json b/scripts/data/translated-cli.json
index ba5d02b2717..d995b14310a 100644
--- a/scripts/data/translated-cli.json
+++ b/scripts/data/translated-cli.json
@@ -1469,7 +1469,7 @@
       "inputs": [
         {
           "name": "action",
-          "summary": "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms\n\n自動翻訳: プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存する。",
+          "summary": "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms\n\n自動翻訳: プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存します。",
           "required": false
         },
         {
@@ -1515,7 +1515,7 @@
       "inputs": [
         {
           "name": "action",
-          "summary": "`add` or `remove` a plugin; `ls` or `save` all project plugins\n\n自動翻訳: プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` する。",
+          "summary": "`add` or `remove` a plugin; `ls` or `save` all project plugins\n\n自動翻訳: プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` します。",
           "required": false
         },
         {

From 6d3bae1ca12acee188e6700969364418020b4798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 22 Mar 2023 11:58:11 +0900
Subject: [PATCH 261/469] feat(translate): translate searchbar

---
 docs/api/searchbar.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index e7846d38821..0934fd894e5 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -17,7 +17,7 @@ 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.
+検索バーは、コレクションを検索するために使用できるテキストフィールドを表します。ツールバーやメインコンテンツの中に表示することができます。検索バーは、検索リストへの入力の代わりに使用する必要があります。
 
 
 ## 基本的な使い方
@@ -27,36 +27,36 @@ import Basic from '@site/static/usage/v7/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/).
+検索バーのInputフィールドの左に表示される検索アイコンです。任意の [Ionicon](https://ionic.io/ionicons/) にカスタマイズすることが可能です。
 
 import SearchIcon from '@site/static/usage/v7/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/).
+検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意の[Ionicon](https://ionic.io/ionicons/)にカスタマイズすることができます。
 
 import ClearButton from '@site/static/usage/v7/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/).
+キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは `ios` モードではテキストとして、`md` モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意の[Ionicon](https://ionic.io/ionicons/)を使用することができます。
 
 import CancelButton from '@site/static/usage/v7/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.
+検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOSでは、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Designでは、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。
 
 <!-- Reuse the playground from the Toolbar directory -->
 import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
@@ -66,7 +66,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 ## 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.
+検索バーにDebounceを設定して、`ionChange`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
 
 import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 
@@ -83,7 +83,7 @@ import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
 
 ## CSSカスタムプロパティ
 
-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.
+検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化することを意味します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
 
 import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.md';
 

From 58576e745a2f65624c07abd54d7234f233ee2ad1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 22 Mar 2023 12:29:49 +0900
Subject: [PATCH 262/469] feat(translate): fix deepl translation

---
 scripts/data/translated-api.json   | 116 ++++++++++++++---------------
 scripts/data/translated-cache.json | 102 ++++++++++++-------------
 2 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 11d84da5b0a..345221ca004 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -1587,12 +1587,12 @@
         {
           "name": "--icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the button icon\n\n自動翻訳: ボタンアイコンのフォントサイズ"
+          "docs": "Font size of the button icon\n\n自動翻訳: ボタンアイコンのFont Size"
         },
         {
           "name": "--icon-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the button icon\n\n自動翻訳: ボタンアイコンのフォントの太さ"
+          "docs": "Font weight of the button icon\n\n自動翻訳: ボタンアイコンのFont Weight"
         },
         {
           "name": "--icon-margin-bottom",
@@ -1677,12 +1677,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -1955,12 +1955,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -2868,7 +2868,7 @@
           "mutable": false,
           "attr": "strong",
           "reflectToAttr": false,
-          "docs": "If `true`, activates a button with a heavier font weight.\n\n自動翻訳: `true`の場合、より重いフォントウェイトを持つボタンをアクティブにします。",
+          "docs": "If `true`, activates a button with a heavier font weight.\n\n自動翻訳: `true`の場合、より重いFont Weightを持つボタンをアクティブにします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3041,12 +3041,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -5124,12 +5124,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -5378,7 +5378,7 @@
           "mutable": false,
           "attr": "clear-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the picker's \"Clear\" button.\n\n自動翻訳: ピッカーの「クリア」ボタンに表示するテキストです。",
+          "docs": "The text to display on the picker's \"Clear\" button.\n\n自動翻訳: ピッカーの\"Clear\"ボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'Clear'",
           "values": [
@@ -5654,7 +5654,7 @@
           "mutable": true,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.\n\n自動翻訳: 許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでよい。デフォルトは、今日から100年前の年頭です。",
+          "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.\n\n自動翻訳: 許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでいいです。デフォルトは、今日から100年前の年頭です。",
           "docsTags": [],
           "values": [
             {
@@ -6583,7 +6583,7 @@
         {
           "name": "--close-icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the close icon\n\n自動翻訳: クローズアイコンのフォントサイズ"
+          "docs": "Font size of the close icon\n\n自動翻訳: クローズアイコンのFont Size"
         },
         {
           "name": "--color",
@@ -6613,12 +6613,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -7275,7 +7275,7 @@
           "mutable": false,
           "attr": "loading-text",
           "reflectToAttr": false,
-          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
           "docsTags": [],
           "values": [
             {
@@ -8309,7 +8309,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
-          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: フードの下で使用されているネイティブの `<input>` 要素を返します。",
+          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: 要素の内部で使用されているネイティブの `<input>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -8382,12 +8382,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -8397,22 +8397,22 @@
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the input placeholder text\n\n自動翻訳: Inputのplaceholderのテキストの色"
+          "docs": "Color of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the input placeholder text\n\n自動翻訳: Inputのplaceholderのテキストのフォントスタイル"
+          "docs": "Font style of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストのFont Style"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the input placeholder text\n\n自動翻訳: Inputのplaceholderのテキストのフォントウェイト"
+          "docs": "Font weight of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストのFont Weight"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the input placeholder text\n\n自動翻訳: Inputのプレースホルダーテキストの不透明度"
+          "docs": "Opacity of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストの不透明度"
         }
       ],
       "slots": [],
@@ -8593,7 +8593,7 @@
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -9068,7 +9068,7 @@
           },
           "signature": "getSlidingRatio() => Promise<number>",
           "parameters": [],
-          "docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.\n\n自動翻訳: オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いている。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
+          "docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.\n\n自動翻訳: オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いています。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
           "docsTags": []
         },
         {
@@ -9242,7 +9242,7 @@
           "type": "((inputLength: number, maxLength: number) => string) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\n自動翻訳: カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは「itemLength / maxLength」に設定されています。",
+          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\n自動翻訳: カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
           "docsTags": [],
           "values": [
             {
@@ -9280,7 +9280,7 @@
           "mutable": false,
           "attr": "detail-icon",
           "reflectToAttr": false,
-          "docs": "The icon to use when `detail` is set to `true`.\n\n自動翻訳: detail` が `true` に設定されているときに使用するアイコンです。",
+          "docs": "The icon to use when `detail` is set to `true`.\n\n自動翻訳: `detail` が `true` に設定されているときに使用するアイコンです。",
           "docsTags": [],
           "default": "chevronForward",
           "values": [
@@ -9651,7 +9651,7 @@
         {
           "name": "--detail-icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the item detail icon\n\n自動翻訳: アイテム詳細アイコンのフォントサイズ"
+          "docs": "Font size of the item detail icon\n\n自動翻訳: アイテム詳細アイコンのFont Size"
         },
         {
           "name": "--detail-icon-opacity",
@@ -9696,7 +9696,7 @@
         {
           "name": "--inner-padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--inner-padding-start",
@@ -10908,12 +10908,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -11456,7 +11456,7 @@
           "mutable": false,
           "attr": "can-dismiss",
           "reflectToAttr": false,
-          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\n自動翻訳: モーダルが `dismiss` メソッドを呼び出したときに、退出できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
+          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\n自動翻訳: モーダルが `dismiss` メソッドを呼び出したときに、終了できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
           "docsTags": [],
           "values": [
             {
@@ -11499,7 +11499,7 @@
           "mutable": false,
           "attr": "handle",
           "reflectToAttr": false,
-          "docs": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties.\n\n自動翻訳: シートモーダルの上部に表示される水平線です。breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
+          "docs": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties.\n\n自動翻訳: シートモーダルの上部に表示される水平線です。 `breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
           "docsTags": [],
           "values": [
             {
@@ -11669,7 +11669,7 @@
           "type": "HTMLElement | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.\n\n自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSmodeでのみ適用されます。",
+          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.\n\n自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOS modeでのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -12009,7 +12009,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
+          "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: ナビゲート先のコンポーネント。 `routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
           "docsTags": [],
           "values": [
             {
@@ -13185,7 +13185,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`.\n\n自動翻訳: ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでよい。",
+          "docs": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`.\n\n自動翻訳: ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでいいです。",
           "docsTags": [],
           "values": [
             {
@@ -14219,7 +14219,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the radio.\n\n自動翻訳: は、無線機の値です。",
+          "docs": "the value of the radio.\n\n自動翻訳: ラジオの値です。",
           "docsTags": [],
           "values": [
             {
@@ -14256,7 +14256,7 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the radio\n\n自動翻訳: 無線機のボーダー半径"
+          "docs": "Border radius of the radio\n\n自動翻訳: ラジオのボーダー半径"
         },
         {
           "name": "--color",
@@ -15359,7 +15359,7 @@
           "mutable": false,
           "attr": "from",
           "reflectToAttr": false,
-          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その「from」URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
+          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"from\" URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
           "docsTags": [],
           "values": [
             {
@@ -15827,7 +15827,7 @@
           "mutable": false,
           "attr": "use-hash",
           "reflectToAttr": false,
-          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.\n\n自動翻訳: ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
+          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.\n\n自動翻訳: ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、\"ハッシュなし\"ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15879,7 +15879,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the route had changed\n\n自動翻訳: ルートが変更されたときに発する",
+          "docs": "Emitted when the route had changed\n\n自動翻訳: ルートが変更されたときに発します。",
           "docsTags": []
         },
         {
@@ -16474,7 +16474,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
           "docsTags": [],
           "default": "'Search'",
           "values": [
@@ -16648,7 +16648,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
-          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: フードの下で使用されているネイティブの `<input>` 要素を返します。",
+          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: 要素の内部で使用されているネイティブの `<input>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -16759,22 +16759,22 @@
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーの色"
+          "docs": "Color of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーのフォントスタイル"
+          "docs": "Font style of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderのFont Style"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーのフォントの太さ"
+          "docs": "Font weight of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderのFont Weight"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the searchbar placeholder\n\n自動翻訳: 検索バーのプレースホルダーの不透明度"
+          "docs": "Opacity of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderの不透明度"
         }
       ],
       "slots": [],
@@ -17718,12 +17718,12 @@
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the select placeholder text\n\n自動翻訳: セレクトプレースホルダーテキストの色"
+          "docs": "Color of the select placeholder text\n\n自動翻訳: セレクトPlaceholderテキストの色"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the select placeholder text\n\n自動翻訳: 選択プレースホルダーテキストの不透明度"
+          "docs": "Opacity of the select placeholder text\n\n自動翻訳: 選択Placeholderテキストの不透明度"
         }
       ],
       "slots": [],
@@ -19050,12 +19050,12 @@
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
@@ -19147,7 +19147,7 @@
           },
           "signature": "setActive() => Promise<void>",
           "parameters": [],
-          "docs": "Set the active component for the tab\n\n自動翻訳: タブのアクティブコンポーネントを設定する",
+          "docs": "Set the active component for the tab\n\n自動翻訳: タブのアクティブコンポーネントを設定します。",
           "docsTags": []
         }
       ],
@@ -19874,7 +19874,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLTextAreaElement>",
           "parameters": [],
-          "docs": "Returns the native `<textarea>` element used under the hood.\n\n自動翻訳: フードの下で使用されるネイティブの `<textarea>` 要素を返します。",
+          "docs": "Returns the native `<textarea>` element used under the hood.\n\n自動翻訳: 要素の内部で使用されるネイティブの `<textarea>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -19967,22 +19967,22 @@
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the placeholder text\n\n自動翻訳: プレースホルダーテキストの色"
+          "docs": "Color of the placeholder text\n\n自動翻訳: Placeholderテキストの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Style of the placeholder text\n\n自動翻訳: プレースホルダーテキストのスタイル"
+          "docs": "Style of the placeholder text\n\n自動翻訳: Placeholderテキストのスタイル"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Weight of the placeholder text\n\n自動翻訳: プレースホルダーテキストの重さ"
+          "docs": "Weight of the placeholder text\n\n自動翻訳: Placeholderテキストの重さ"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the placeholder text\n\n自動翻訳: プレースホルダーテキストの不透明度"
+          "docs": "Opacity of the placeholder text\n\n自動翻訳: Placeholderテキストの不透明度"
         }
       ],
       "slots": [],
diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
index e4531af065f..1705648895c 100644
--- a/scripts/data/translated-cache.json
+++ b/scripts/data/translated-cache.json
@@ -83,7 +83,7 @@
     "Width of the alert": "アラートの幅",
     "Minimum height of the alert": "アラートの最小の高さ",
     "Border radius of the avatar and inner image": "アバターとインナーイメージの境界半径",
-    "Font weight of the button icon": "ボタンアイコンのフォントの太さ",
+    "Font weight of the button icon": "ボタンアイコンのFont Weight",
     "The text to display in the back button.": "バックボタンに表示するテキストです。",
     "Background of the button on hover": "ホバー時のボタンの背景",
     "The type of the button.": "ボタンの種類です。",
@@ -97,7 +97,7 @@
     "If `true`, the user cannot interact with the button.": "`true`の場合、ユーザはボタンと対話することができません。",
     "The url to navigate back to by default when there is no history.": "履歴がない場合に、デフォルトで戻るためのURL。",
     "Border radius of the button": "ボタンの境界半径",
-    "Font size of the button icon": "ボタンアイコンのフォントサイズ",
+    "Font size of the button icon": "ボタンアイコンのFont Size",
     "The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.": "戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定します。",
     "Bottom margin of the button icon": "ボタンアイコンのBottom Margin",
     "The color to use from your application's color palette. Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`. For more information on colors, see [theming](/docs/theming/basics).": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
@@ -112,9 +112,9 @@
     "Color of the button ripple effect": "ボタンリプルエフェクトの色",
     "The native HTML button element that wraps all child elements.": "すべての子要素を包むネイティブ HTML ボタン要素。",
     "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。",
     "Opacity of the button": "ボタンの不透明度",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button": "ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。",
     "Bottom margin of the button": "ボタンのBottom Margin",
     "The back button icon (uses ion-icon).": "戻るボタンのアイコン（ion-iconを使用）。",
     "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button": "ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin",
@@ -132,9 +132,9 @@
     "Bottom padding of the badge": "バッジのBottom Padding",
     "Text color of the badge": "バッジの文字色",
     "Top padding of the badge": "バッジのTop Padding",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。",
     "Background of the badge": "バッジの背景",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge": "バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。",
     "Emitted when the breadcrumb loses focus.": "パンくずのフォーカスが外れたときに発行されます。",
     "Text color of the breadcrumb on hover": "ホバー時のパンくずのテキスト色",
     "The indicator element that shows the breadcrumbs are collapsed.": "パンくずが折りたたまれていることを示すインジケーター要素です。",
@@ -164,7 +164,7 @@
     "Emitted when the button loses focus.": "ボタンのフォーカスが外れたときに発行されます。",
     "Opacity of the button when focused with the tab key": "タブキーでフォーカスしたときのボタンの不透明度",
     "Emitted when the button has focus.": "ボタンにフォーカスが当たっているときに発行されます。",
-    "If `true`, activates a button with a heavier font weight.": "`true`の場合、より重いフォントウェイトを持つボタンをアクティブにします。",
+    "If `true`, activates a button with a heavier font weight.": "`true`の場合、より重いFont Weightを持つボタンをアクティブにします。",
     "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"` for a transparent button with a border, or to `\"solid\"` for a button with a filled background. The default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.": "フラットなボタンに似た透明なボタンには `\"clear\"` を、ボーダーのある透明なボタンには `\"outline\"` を、背景を塗りつぶしたボタンには `\"solid\"` を設定します。デフォルトの塗りつぶしは `\"solid\"` です。ただし、ツールバーの内側では `\"clear\"` となります。",
     "Set to `\"small\"` for a button with less height and padding, to `\"default\"` for a button with the default height and padding, or to `\"large\"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `\"small\"` by default. Set the size to `\"default\"` inside of an item to make it a standard size button.": "ボタンの高さとPaddingが少ない場合は `\"small\"` に、ボタンの高さとPaddingがデフォルトの場合は `\"default\"` に、ボタンの高さとPaddingが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
     "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button with square corners and no left or right borders.": "全角のボタンなら`\"block\"`、角が四角く左右のボーダーがない全角のボタンなら`\"full\"`に設定します。",
@@ -271,8 +271,8 @@
     "The scrollable container of the content.": "コンテンツのスクロール可能なコンテナ。",
     "Should be used for fixed content that should not scroll.": "スクロールしてはいけない固定コンテンツに使用する必要があります。",
     "Content is placed in the scrollable area if provided without a slot.": "slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content": "コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。",
     "Content displayed inside of the time button.": "時刻ボタンの内側に表示される内容。",
     "The native HTML button that wraps the slotted text.": "slotされたテキストをラップするネイティブHTMLボタンです。",
     "Content displayed inside of the date button.": "日付ボタンの内側に表示されるコンテンツです。",
@@ -285,13 +285,13 @@
     "If `true`, multiple dates can be selected at once. Only applies to `presentation=\"date\"` and `preferWheel=\"false\"`.": "`true`の場合、複数の日付を一度に選択することができる。presentation=\"date\"`と `preferWheel=\"false\"` にのみ適用される。",
     "Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.": "選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
     "Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues=\"0,15,30,45\"`.": "選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
-    "The text to display on the picker's \"Clear\" button.": "ピッカーの「クリア」ボタンに表示するテキストです。",
+    "The text to display on the picker's \"Clear\" button.": "ピッカーの\"Clear\"ボタンに表示するテキストです。",
     "Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel=\"false\"`.": "特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel=\"false\"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。",
     "The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.": "許容される最大のdatetimeを指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。",
     "The text to display on the picker's \"Done\" button.": "ピッカーの \"Done \"ボタンに表示するテキスト。",
     "If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。`'time'`, `'month'`, `'month-year'`, または `'year'`.",
     "Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.": "選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
-    "The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.": "許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでよい。デフォルトは、今日から100年前の年頭です。",
+    "The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.": "許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでいいです。デフォルトは、今日から100年前の年頭です。",
     "Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.": "選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
     "The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.": "`ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`'default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
     "Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.": "どの値を選択するか。`'date'`はカレンダーピッカーを表示し、月、日、年を選択します。`'time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。`'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
@@ -319,7 +319,7 @@
     "If `true`, a \"Clear\" button will be rendered alongside the default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.": "`true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` slotを使用することもできる。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
     "The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.": "クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。",
     "The close icon that is displayed when a fab list opens (uses ion-icon).": "ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。",
-    "Font size of the close icon": "クローズアイコンのフォントサイズ",
+    "Font size of the close icon": "クローズアイコンのFont Size",
     "Opacity of the button background when pressed": "押されたときのボタンの背景の不透明度",
     "If `true`, the user cannot interact with the fab button.": "`true`の場合、ユーザーはファブボタンを操作することができません。",
     "The size of the button. Set this to `small` in order to have a mini fab button.": "ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。",
@@ -358,7 +358,7 @@
     "The image URL. This attribute is mandatory for the `<img>` element.": "画像のURL。この属性は `<img>` 要素では必須です。",
     "This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.": "この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。",
     "An animated SVG spinner that shows while loading.": "ロード中に表示されるアニメーションSVGスピナーです。",
-    "Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
     "If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.": "`true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 `true` を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
     "The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.": "スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、`100px`という値を使用します。",
     "The position of the infinite scroll element. The value can be either `top` or `bottom`.": "無限スクロール要素の位置を指定します。値は `top` または `bottom` のどちらかです。",
@@ -382,25 +382,25 @@
     "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
     "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.": "値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` Inputタイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
     "Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.": "Inputが値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
-    "Font weight of the input placeholder text": "Inputのplaceholderのテキストのフォントウェイト",
+    "Font weight of the input placeholder text": "InputのPlaceholderテキストのFont Weight",
     "The value of the input.": "入力された値です。",
     "Background of the input": "Inputの背景",
     "Emitted when the input loses focus.": "Inputのフォーカスが外れたときに発行されます。",
     "Top padding of the input": "InputのTop Padding",
     "Emitted when the input has focus.": "Inputにフォーカスが当たったときに発行されます。",
-    "Opacity of the input placeholder text": "Inputのプレースホルダーテキストの不透明度",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input": "入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
+    "Opacity of the input placeholder text": "InputのPlaceholderテキストの不透明度",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input": "入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。",
     "Emitted when a keyboard input occurred.": "キーボード入力が発生したときに発します。",
     "Color of the input text": "Inputのテキストの色",
-    "Font style of the input placeholder text": "Inputのplaceholderのテキストのフォントスタイル",
-    "Returns the native `<input>` element used under the hood.": "フードの下で使用されているネイティブの `<input>` 要素を返します。",
+    "Font style of the input placeholder text": "InputのPlaceholderテキストのFont Style",
+    "Returns the native `<input>` element used under the hood.": "要素の内部で使用されているネイティブの `<input>` 要素を返します。",
     "Bottom padding of the input": "InputのBottom Padding",
     "Emitted when the value has changed.": "値が変更されたときに発行されます。",
     "The type of control to display. The default type is text.": "表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。",
     "Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `\"any\"` or a positive floating point number.": "min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any\"`または正の浮動小数点数。",
-    "Color of the input placeholder text": "Inputのplaceholderのテキストの色",
+    "Color of the input placeholder text": "InputのPlaceholderテキストの色",
     "Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.": "`ion-input` のネイティブ `input` にフォーカスを設定します。グローバルな `input.focus()` の代わりに、このメソッドを使用します。 ページが入ったときにInputにフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input": "入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input": "入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。",
     "If `true`, the user cannot modify the value.": "`true`の場合、ユーザーは値を変更することができません。",
     "If `true`, the element will have its spelling and grammar checked.": "`true`の場合、その要素のスペルチェックと文法チェックが行われる。",
     "If `true`, the user must fill in a value before submitting a form.": "`true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
@@ -416,7 +416,7 @@
     "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合はRight Padding、右から左の場合はLeft Padding",
     "When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky": "`true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。  この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky",
     "Start inner padding of the item divider": "アイテムディバイダーのStart Inner Padding",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider": "アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。",
     "Content is placed to the right of the divider text in LTR, and to the left in RTL.": "コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。",
     "Background of the item option": "アイテムオプションの背景",
     "Color of the item option": "アイテムオプションのカラー",
@@ -434,9 +434,9 @@
     "Get the amount the item is open in pixels.": "アイテムが開いている量をピクセル単位で取得します。",
     "Close the sliding item. Items can also be closed from the [List](./list).": "スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。",
     "Close all of the sliding items in the list. Items can also be closed from the [List](./list).": "リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。",
-    "Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.": "オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いている。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
+    "Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.": "オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いています。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
     "If `true`, the user cannot interact with the sliding item.": "`true`の場合、ユーザーはスライドアイテムを操作することができません。",
-    "The icon to use when `detail` is set to `true`.": "detail` が `true` に設定されているときに使用するアイコンです。",
+    "The icon to use when `detail` is set to `true`.": "`detail` が `true` に設定されているときに使用するアイコンです。",
     "If `true`, the user cannot interact with the item.": "`true`の場合、ユーザはそのアイテムと対話することができません。",
     "Background of the item": "アイテムの背景",
     "How the bottom border should be displayed on the item.": "アイテムに表示される下枠の表示方法。",
@@ -444,7 +444,7 @@
     "The shape of the item. If \"round\" it will have increased border radius.": "アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。",
     "If `true`, a button tag will be rendered and the item will be tappable.": "`true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。",
     "The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.": "アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`modeでのみ使用可能です。",
-    "A callback used to format the counter text. By default the counter text is set to \"itemLength / maxLength\".": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは「itemLength / maxLength」に設定されています。",
+    "A callback used to format the counter text. By default the counter text is set to \"itemLength / maxLength\".": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
     "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。",
     "Opacity of the item background when pressed": "押されたときのアイテム背景の不透明度",
     "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.": "`true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。",
@@ -457,7 +457,7 @@
     "Content is placed under the item and displayed when no error is detected.": "項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。",
     "Content is placed under the item and displayed when an error is detected.": "項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。",
     "The native HTML button, anchor or div element that wraps all child elements.": "すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner": "方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなる",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner": "方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなります。",
     "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item": "方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingで項目を囲む",
     "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item": "方向が左から右の場合はRight Padding、方向が右から左の場合はLeft Paddingで項目を囲む",
     "Transition of the item": "アイテムの変遷",
@@ -472,7 +472,7 @@
     "Color of the item border": "アイテムの縁取りの色",
     "The height of the highlight on the item": "アイテムに表示されるハイライトの高さ",
     "Color of the item detail icon": "アイテム詳細アイコンの色",
-    "Font size of the item detail icon": "アイテム詳細アイコンのフォントサイズ",
+    "Font size of the item detail icon": "アイテム詳細アイコンのFont Size",
     "Radius of the item border": "アイテムの境界線の半径",
     "Color of the item on hover": "ホバー時のアイテムの色",
     "Color of the item": "アイテムのカラー",
@@ -574,13 +574,13 @@
     "If `true`, the modal will animate.": "`true`の場合、モーダルはアニメーションを行います。",
     "If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.": "`true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。",
     "Dismiss the modal overlay after it has been presented.": "モーダルオーバーレイが表示された後、それを解除します。",
-    "The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.": "シートモーダルの上部に表示される水平線です。breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
+    "The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.": "シートモーダルの上部に表示される水平線です。 `breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
     "A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array.": "シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。",
-    "Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.": "モーダルが `dismiss` メソッドを呼び出したときに、退出できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
+    "Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.": "モーダルが `dismiss` メソッドを呼び出したときに、終了できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
     "If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.": "`true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
     "The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]": "シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1]",
     "If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.": "`true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。  注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。",
-    "The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.": "モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSmodeでのみ適用されます。",
+    "The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.": "モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOS modeでのみ適用されます。",
     "If `true`, the modal will be dismissed when the backdrop is clicked.": "`true`の場合、バックドロップがクリックされるとモーダルは解除されます。",
     "A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.": "シートモーダル使用時に背景がフェードインし始めるポイントを示す0～1の10進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。",
     "The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed. Set to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).": "ハンドルが押されたときのシートモーダルのインタラクション動作です。  デフォルトは `\"none\"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle\"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle` プロパティが `false` に設定されている場合、または `breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。",
@@ -614,7 +614,7 @@
     "Emitted after the modal has presented. Shorthand for ionModalDidPresent.": "モーダルが提示された後に発行されます。ionModalDidPresent の略記です。",
     "The transition animation when navigating to another page.": "別ページに移動する際の遷移アニメーション。",
     "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.": "コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用します。",
-    "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.": "ナビゲート先のコンポーネント。routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
+    "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.": "ナビゲート先のコンポーネント。 `routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
     "The transition direction when navigating to another page.": "別ページに移動する際の遷移方向です。",
     "Get the view at the specified index.": "指定されたインデックスにあるビューを取得します。",
     "Removes a component from the navigation stack at the specified index.": "指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。",
@@ -683,7 +683,7 @@
     "Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
     "If `true`, the popover will be translucent. Only applies when the mode is `\"ios\"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).": "`true`の場合、ポップオーバーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
     "Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
-    "The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.": "ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでよい。",
+    "The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.": "ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでいいです。",
     "If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.": "`true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。  注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。",
     "Maximum width of the popover": "ポップオーバーの最大幅",
     "Box shadow of the popover": "ポップオーバーのボックスシャドウ",
@@ -727,11 +727,11 @@
     "Color of the checked radio": "チェックしたラジオの色",
     "The container for the radio mark.": "ラジオマークの入れ物です。",
     "Emitted when the radio button has focus.": "ラジオボタンにフォーカスが当たったときに発行されます。",
-    "Border radius of the radio": "無線機のボーダー半径",
+    "Border radius of the radio": "ラジオのボーダー半径",
     "Color of the radio": "ラジオのカラー",
     "Border radius of the inner checked radio": "内側のチェック付きラジオのボーダー半径",
     "Emitted when the radio button loses focus.": "ラジオボタンのフォーカスが外れたときに発行されます。",
-    "the value of the radio.": "は、無線機の値です。",
+    "the value of the radio.": "ラジオの値です。",
     "If `true`, the user cannot interact with the radio.": "`true`の場合、ユーザはラジオと対話することができません。",
     "Background of the range bar": "レンジバーの背景",
     "Minimum integer value of the range.": "範囲の最小の整数値。",
@@ -791,7 +791,7 @@
     "Adds the ripple effect to the parent element.": "親要素に波及効果を付加します。",
     "Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.": "リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。  注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。",
     "Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.  `ion-router` captures this event in order to update his internal registry of router rules.": "このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。",
-    "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その「from」URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
+    "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"from\" URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
     "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.  The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.  Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.  When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the \"from\" value matches.": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLです。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
     "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.": "キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。",
     "Used internally by `ion-router` to know when this route did change.": "このルートがいつ変更されたかを知るために `ion-router` が内部で使用します。",
@@ -803,12 +803,12 @@
     "Background of the router link": "ルーターリンクの背景",
     "If `true`, the router-outlet should animate the transition of components.": "`true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。",
     "This property allows to create custom transition using AnimationBuilder functions.": "このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
-    "Emitted when the route had changed": "ルートが変更されたときに発する",
+    "Emitted when the route had changed": "ルートが変更されたときに発します。",
     "Navigate to the specified path.": "指定されたパスに移動します。",
     "Event emitted when the route is about to change": "ルートが変更されようとするときに発行されます。イベント",
     "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify an alternate prefix for all URL paths.": "URLのマッチング時に使用するルートパスです。デフォルトでは\"/\"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。",
     "Go back to previous page in the window.history.": "window.historyで前ページに戻る。",
-    "The router can work in two \"modes\": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.": "ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
+    "The router can work in two \"modes\": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.": "ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、\"ハッシュなし\"ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
     "If `true`, enable searchbar animation.": "`true`の場合、検索バーのアニメーションを有効にします。",
     "Set the the cancel button text. Only applies to `ios` mode.": "キャンセルボタンのテキストを設定します。 `ios` modeのみ適用されます。",
     "Set the input's autocomplete property.": "Inputのオートコンプリートプロパティを設定します。",
@@ -820,7 +820,7 @@
     "the value of the searchbar.": "検索バーの値。",
     "Sets the behavior for the cancel button. Defaults to `\"never\"`. Setting to `\"focus\"` shows the cancel button on focus. Setting to `\"never\"` hides the cancel button. Setting to `\"always\"` shows the cancel button regardless of focus state.": "キャンセルボタンに関する動作を設定します。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にします。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。",
     "Set the type of the input.": "Inputの種類を設定します。",
-    "Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+    "Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
     "Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.": "キャンセルボタンのアイコンを設定します。 `md` modeのみに適用されます。デフォルトは `arrow-back-sharp` です。",
     "Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`.": "指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。",
     "Sets the behavior for the clear button. Defaults to `\"focus\"`. Setting to `\"focus\"` shows the clear button on focus if the input is not empty. Setting to `\"never\"` hides the clear button. Setting to `\"always\"` shows the clear button regardless of focus state, but only if the input is not empty.": "クリアボタンに関する動作を設定します。デフォルトは `\"focus\"` です。`\"focus\"`に設定すると、Inputが空でない場合、フォーカス時にクリアボタンを表示します。`\"never\"`に設定すると、クリアボタンを非表示にします。`\"always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Inputが空でない場合にのみクリアボタンを表示します。",
@@ -829,12 +829,12 @@
     "Color of the searchbar cancel button": "検索バーのキャンセルボタンの色",
     "Background of the searchbar input": "検索バーのInputの背景",
     "Box shadow of the searchbar input": "検索バーのInputのボックスシャドウ",
-    "Opacity of the searchbar placeholder": "検索バーのプレースホルダーの不透明度",
-    "Font style of the searchbar placeholder": "検索バーのプレースホルダーのフォントスタイル",
+    "Opacity of the searchbar placeholder": "検索バーのPlaceholderの不透明度",
+    "Font style of the searchbar placeholder": "検索バーのPlaceholderのFont Style",
     "Color of the searchbar text": "検索バーのテキストの色",
-    "Color of the searchbar placeholder": "検索バーのプレースホルダーの色",
+    "Color of the searchbar placeholder": "検索バーのPlaceholderの色",
     "Color of the searchbar icon": "検索バーのアイコンの色",
-    "Font weight of the searchbar placeholder": "検索バーのプレースホルダーのフォントの太さ",
+    "Font weight of the searchbar placeholder": "検索バーのPlaceholderのFont Weight",
     "Emitted when the clear input button is clicked.": "Clear Inputボタンがクリックされたときに発行されます。",
     "Color of the segment button border": "セグメントボタンのボーダーの色",
     "Color of the checked segment button": "チェックしたセグメントボタンの色",
@@ -897,8 +897,8 @@
     "The select icon container.": "セレクトアイコンのコンテナです。",
     "The text displayed in the select when there is no value.": "値がないときにセレクトに表示されるテキスト。",
     "Top padding of the select": "セレクトのTop Padding",
-    "Opacity of the select placeholder text": "選択プレースホルダーテキストの不透明度",
-    "Color of the select placeholder text": "セレクトプレースホルダーテキストの色",
+    "Opacity of the select placeholder text": "選択Placeholderテキストの不透明度",
+    "Color of the select placeholder text": "セレクトPlaceholderテキストの色",
     "The displayed value of the select.": "セレクトの表示値です。",
     "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select": "セレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding",
     "If `true`, the skeleton text will animate.": "`true`の場合、スケルトンテキストをアニメーションさせる。",
@@ -969,15 +969,15 @@
     "Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.": "タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは `'icon-top'` です。",
     "Top padding of the tab button": "タブボタンのTop Padding",
     "Background of the tab button": "タブボタンの背景",
-    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなる",
+    "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。",
     "Opacity of the tab button background when focused with the tab key": "タブキーでフォーカスしたときのタブボタンの背景の不透明度",
     "A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.": "各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
     "Color of the tab button when focused with the tab key": "タブキーでフォーカスしたときのタブボタンの色",
     "Background of the tab button when focused with the tab key": "タブキーでフォーカスされたときのタブボタンの背景",
     "The native HTML anchor element that wraps all child elements.": "すべての子要素を包むネイティブHTMLのアンカー要素です。",
-    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなる",
+    "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button": "タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。",
     "The component to display inside of the tab.": "タブの内側に表示するコンポーネントです。",
-    "Set the active component for the tab": "タブのアクティブコンポーネントを設定する",
+    "Set the active component for the tab": "タブのアクティブコンポーネントを設定します。",
     "Get the currently selected tab.": "現在選択されているタブを取得します。",
     "Content is placed at the bottom of the screen.": "コンテンツは画面下部に配置されます。",
     "Select a tab by the value of its `tab` property or an element reference.": "タブの `tab` プロパティの値、または要素の参照によってタブを選択します。",
@@ -994,16 +994,16 @@
     "Indicates how the control wraps text.": "コントロールがテキストをどのように折り返すかを示します。",
     "If `true`, the user cannot interact with the textarea.": "`true`の場合、ユーザはテキストエリアと対話することができません。",
     "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.": "ion-textarea` のネイティブ `textarea` にフォーカスを設定します。グローバルな `textarea.focus()` の代わりに、このメソッドを使用します。",
-    "Returns the native `<textarea>` element used under the hood.": "フードの下で使用されるネイティブの `<textarea>` 要素を返します。",
+    "Returns the native `<textarea>` element used under the hood.": "要素の内部で使用されるネイティブの `<textarea>` 要素を返します。",
     "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea": "テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。",
     "If `true`, the textarea container will grow and shrink based on the contents of the textarea.": "`true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。",
     "The number of visible text lines for the control.": "コントロールの可視テキスト行数。",
     "The value of the textarea.": "textareaの値です。",
     "Instructional text that shows before the input has a value.": "入力が値を持つ前に表示される指示文。",
-    "Color of the placeholder text": "プレースホルダーテキストの色",
-    "Style of the placeholder text": "プレースホルダーテキストのスタイル",
-    "Opacity of the placeholder text": "プレースホルダーテキストの不透明度",
-    "Weight of the placeholder text": "プレースホルダーテキストの重さ",
+    "Color of the placeholder text": "Placeholderテキストの色",
+    "Style of the placeholder text": "Placeholderテキストのスタイル",
+    "Opacity of the placeholder text": "Placeholderテキストの不透明度",
+    "Weight of the placeholder text": "Placeholderテキストの重さ",
     "Top padding of the textarea": "textareaのTop Padding",
     "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea": "textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。",
     "Size of the thumbnail": "サムネイルの大きさ",

From b7053ffe813544df454526ffb0a761c88963501f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 22 Mar 2023 12:32:59 +0900
Subject: [PATCH 263/469] fix(translate): translate docs/index

---
 docs/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/index.md b/docs/index.md
index 0e8803926c2..ed09b6446ab 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -58,7 +58,7 @@ Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS
 
 ## 概要
 
-Ionicは、アプリのフロントエンドのUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [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.
+Ionicは、アプリのフロントエンドのUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionicについてもっと知りたい方向けに、<a href="https://youtu.be/p3AN3igqiRc" target="_blank">私たちはビデオを作成しました</a>。ここから、基本的な使い方を学ぶことができます。
 
 ### どこでもひとつのコードで
 

From 194897ba40e2349a4ae43cfa1b9d0d6091cef0f3 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 22 Mar 2023 10:28:35 -0700
Subject: [PATCH 264/469] docs(badge): content must be passed to be shown
 (#2844)

---
 docs/api/badge.md                      | 2 +-
 versioned_docs/version-v6/api/badge.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/api/badge.md b/docs/api/badge.md
index 21e2f298355..631295e274d 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -17,7 +17,7 @@ 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.
+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. Badges are hidden if no content is passed in.
 
 ## Basic Usage
 
diff --git a/versioned_docs/version-v6/api/badge.md b/versioned_docs/version-v6/api/badge.md
index 202b2f32878..18920b542c9 100644
--- a/versioned_docs/version-v6/api/badge.md
+++ b/versioned_docs/version-v6/api/badge.md
@@ -21,7 +21,7 @@ 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.
+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. Badges are hidden if no content is passed in.
 
 ## Basic Usage
 

From d28c8314438091c7f8137a223fc9d8671766ebdd Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 22 Mar 2023 14:04:28 -0400
Subject: [PATCH 265/469] docs(config): move framework config guides to unified
 config guide (#2727)

---
 docs/angular/platform.md                      |   2 +-
 .../angular => docs/developing}/config.md     | 160 +++---------------
 docs/developing/config/global/index.md        |  67 ++++++++
 docs/developing/config/per-component/index.md | 143 ++++++++++++++++
 .../config/per-platform-fallback/index.md     |  79 +++++++++
 .../config/per-platform-overrides/index.md    |  88 ++++++++++
 docs/developing/config/per-platform/index.md  |  63 +++++++
 docs/react/config.md                          | 118 -------------
 docs/react/platform.md                        |   2 +-
 docs/theming/platform-styles.md               |   4 +-
 docs/updating/6-0.md                          |   6 +-
 docs/vue/config.md                            | 119 -------------
 docs/vue/platform.md                          |   2 +-
 sidebars.js                                   |   4 +-
 .../version-v6/developing}/config.md          | 158 +++--------------
 .../developing/config/global/index.md         |  67 ++++++++
 .../developing/config/per-component/index.md  | 143 ++++++++++++++++
 .../config/per-platform-fallback/index.md     |  79 +++++++++
 .../config/per-platform-overrides/index.md    |  88 ++++++++++
 .../developing/config/per-platform/index.md   |  63 +++++++
 versioned_docs/version-v6/react/config.md     | 116 -------------
 versioned_docs/version-v6/vue/config.md       | 117 -------------
 versioned_sidebars/version-v6-sidebars.json   |  16 +-
 23 files changed, 939 insertions(+), 765 deletions(-)
 rename {versioned_docs/version-v6/angular => docs/developing}/config.md (77%)
 create mode 100644 docs/developing/config/global/index.md
 create mode 100644 docs/developing/config/per-component/index.md
 create mode 100644 docs/developing/config/per-platform-fallback/index.md
 create mode 100644 docs/developing/config/per-platform-overrides/index.md
 create mode 100644 docs/developing/config/per-platform/index.md
 delete mode 100644 docs/react/config.md
 delete mode 100644 docs/vue/config.md
 rename {docs/angular => versioned_docs/version-v6/developing}/config.md (78%)
 create mode 100644 versioned_docs/version-v6/developing/config/global/index.md
 create mode 100644 versioned_docs/version-v6/developing/config/per-component/index.md
 create mode 100644 versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
 create mode 100644 versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
 create mode 100644 versioned_docs/version-v6/developing/config/per-platform/index.md
 delete mode 100644 versioned_docs/version-v6/react/config.md
 delete mode 100644 versioned_docs/version-v6/vue/config.md

diff --git a/docs/angular/platform.md b/docs/angular/platform.md
index ac957693971..9668f3632a1 100644
--- a/docs/angular/platform.md
+++ b/docs/angular/platform.md
@@ -63,7 +63,7 @@ Below is a table listing all the possible platform values along with correspondi
 
 #### 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.
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
 
 ```tsx
 import { IonicModule } from '@ionic/angular';
diff --git a/versioned_docs/version-v6/angular/config.md b/docs/developing/config.md
similarity index 77%
rename from versioned_docs/version-v6/angular/config.md
rename to docs/developing/config.md
index 01844cc067c..38cc071f341 100644
--- a/versioned_docs/version-v6/angular/config.md
+++ b/docs/developing/config.md
@@ -2,158 +2,57 @@
 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.
+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:
+The following example disables ripple effects and default the mode to Material Design:
 
-```tsx title="app.module.ts"
-import { IonicModule } from '@ionic/angular';
+import GlobalExample from '@site/docs/developing/config/global/index.md';
 
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot({
-      rippleEffect: false,
-      mode: 'md'
-    })
-  ],
-  ...
-})
-```
+<GlobalExample />
 
 ## 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) { }
+import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
 
-  localeChanged(locale: string) {
-    if (locale === 'es_ES') {
-      this.backButtonText = 'Devolver';
-    }
-  }
-
-}
-```
+<PerComponentExample />
+  
 
 ## 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:**
+import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
 
-```tsx
-import { isPlatform, IonicModule } from '@ionic/angular';
+<PerPlatformExample />
 
-const getConfig = () => {
-  if (isPlatform('hybrid')) {
-    return {
-      backButtonText: 'Previous',
-      tabButtonLayout: 'label-hide'
-    }
-  }
 
-  return {
-    menuIcon: 'ellipsis-vertical'
-  }
-}
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot(getConfig())
-  ],
-  ...
-})
-```
+### Fallbacks
 
-**Per-platform config overrides:**
+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, IonicModule } from '@ionic/angular';
+import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
 
-const getConfig = () => {
-  let config = {
-    animated: false
-  };
+<PerPlatformFallbackExample />
 
-  if (isPlatform('iphone')) {
-    config = {
-      ...config,
-      backButtonText: 'Previous'
-    }
-  }
+### Overrides
 
-  return config;
-}
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot(getConfig())
-  ],
-  ...
-})
-```
+This final example allows you to accumulate a config object based upon different platform requirements.
 
-## Methods
+import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
+
+<PerPlatformOverridesExample />
+
+## Reading the Config (Angular)
+
+Ionic Angular provides a `Config` provider for accessing the Ionic Config.
 
 ### get
 
@@ -202,19 +101,6 @@ class AppComponent {
 | **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
@@ -254,5 +140,7 @@ Below are the config options that Ionic uses.
 | `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.                     |
+| `toastDuration`          | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                         |
 | `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".               |
+| `toggleOnOffLabels`      | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md
new file mode 100644
index 00000000000..bbfbaa83a71
--- /dev/null
+++ b/docs/developing/config/global/index.md
@@ -0,0 +1,67 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="global-config"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="javascript">
+
+```javascript title="example.js"
+window.Ionic = {
+  config: {
+    rippleEffect: false,
+    mode: 'md'
+  }
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx title="app.module.ts"
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      rippleEffect: false,
+      mode: 'md'
+    })
+  ],
+  ...
+})
+```
+</TabItem>
+<TabItem value="react">
+
+The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
+```tsx title="App.tsx"
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+```tsx title="main.ts"
+
+import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+ 
+createApp(App).use(IonicVue, {
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md
new file mode 100644
index 00000000000..64b868a70ee
--- /dev/null
+++ b/docs/developing/config/per-component/index.md
@@ -0,0 +1,143 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-component-config"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="javascript">
+
+**Not recommended**
+
+```ts
+window.Ionic = {
+  config: {
+    // Not recommended when your app requires reactive values
+    backButtonText: 'Go Back'
+  }
+}
+```
+
+**Recommended**
+
+```html
+<ion-back-button></ion-back-button>
+
+<script>
+  const backButton = document.querySelector('ion-back-button');
+  
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  backButton.text = 'Go Back';
+</script>
+```
+</TabItem>
+<TabItem value="angular">
+
+**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 {
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  backButtonText = 'Go Back';
+}
+```
+</TabItem>
+<TabItem value="react">
+
+**Not recommended**
+
+```tsx
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  // Not recommended when your app requires reactive values
+  backButtonText: 'Go Back'
+});
+```
+
+**Recommended**
+
+```tsx
+import { useState } from 'react';
+import { IonBackButton } from '@ionic/react';
+
+const ExampleComponent = () => {
+  const [backButtonText, setBackButtonText] = useState('Go Back');
+  return (
+    {/*
+     * The back button text can be updated
+     * anytime the locale changes.
+     */}
+    <IonBackButton text={backButtonText}></IonBackButton>
+  )
+}
+```
+</TabItem>
+<TabItem value="vue">
+
+**Not recommended**
+
+```ts
+import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+ 
+ // Not recommended when your app requires reactive values
+createApp(App).use(IonicVue, {
+  backButtonText: 'Go Back'
+});
+```
+
+**Recommended**
+
+```html
+<template>
+  <ion-back-button [text]="backButtonText"></ion-back-button>
+</template>
+
+<script setup lang="ts">
+  import { IonBackButton } from '@ionic/vue';
+  import { ref } from 'vue';
+
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  const backButtonText = ref('Go Back');
+</script>
+```
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md
new file mode 100644
index 00000000000..02a5f27a3c0
--- /dev/null
+++ b/docs/developing/config/per-platform-fallback/index.md
@@ -0,0 +1,79 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-fallback-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+```ts title="app.module.ts"
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+}
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot(getConfig())
+  ],
+  ...
+});
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+  
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+};
+
+setupIonicReact(getConfig());
+
+```
+</TabItem>
+<TabItem value="vue">
+
+```ts title="main.ts"
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+  
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+};
+
+createApp(App).use(IonicVue, getConfig());
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md
new file mode 100644
index 00000000000..243cfa9c2fc
--- /dev/null
+++ b/docs/developing/config/per-platform-overrides/index.md
@@ -0,0 +1,88 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-fallback-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+```ts title="app.module.ts"
+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())
+  ],
+  ...
+});
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  let config = {
+    animated: false,
+  };
+
+  if (isPlatform('iphone')) {
+    config = {
+      ...config,
+      backButtonText: 'Previous',
+    };
+  }
+
+  return config;
+};
+
+setupIonicReact(getConfig());
+
+```
+</TabItem>
+<TabItem value="vue">
+
+```ts title="main.ts"
+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());
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md
new file mode 100644
index 00000000000..7d17299d0f8
--- /dev/null
+++ b/docs/developing/config/per-platform/index.md
@@ -0,0 +1,63 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+:::note
+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.
+
+See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect.
+:::
+
+```ts title="app.module.ts"
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      animated: !isPlatform('mobileweb')
+    })
+  ],
+  ...
+})
+```
+</TabItem>
+<TabItem value="react">
+
+:::note
+See the [React Platform Documentation](../react/platform) for the types of platforms you can detect.
+:::
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  animated: !isPlatform('mobileweb'),
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+:::note
+See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect.
+:::
+
+```ts title="main.ts"
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+createApp(App).use(IonicVue, {
+  animated: !isPlatform('mobileweb'),
+});
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/docs/react/config.md b/docs/react/config.md
deleted file mode 100644
index b988b0e3925..00000000000
--- a/docs/react/config.md
+++ /dev/null
@@ -1,118 +0,0 @@
-# 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.                     |
-| `toastDuration`          | `number`                                                                        | Overrides the default `duration` for all `ion-toast` components.                                         |
-| `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".               |
-| `toggleOnOffLabels`      | `boolean`                                                                       | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/docs/react/platform.md b/docs/react/platform.md
index a58735d8609..eb391d04795 100644
--- a/docs/react/platform.md
+++ b/docs/react/platform.md
@@ -47,7 +47,7 @@ Below is a table listing all the possible platform values along with correspondi
 
 ## 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.
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
 
 ```tsx
 setupIonicReact({
diff --git a/docs/theming/platform-styles.md b/docs/theming/platform-styles.md
index f503b107c80..77d0a5665fc 100644
--- a/docs/theming/platform-styles.md
+++ b/docs/theming/platform-styles.md
@@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r
 
 ## 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**:
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**:
 
 | Platform  | Mode  | Description                                                                                                                      |
 | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater
 <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._
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._
 
 ## Overriding Mode Styles
 
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md
index f2d60a7647a..073705c7540 100644
--- a/docs/updating/6-0.md
+++ b/docs/updating/6-0.md
@@ -29,7 +29,7 @@ If you are using Ionic Angular Server, be sure to update that as well:
 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.
+3. Remove any usage of `Config.set()`. Instead, set your config in `IonicModule.forRoot()`. See the [Angular Config Documentation](../developing/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
@@ -83,7 +83,7 @@ setupIonicReact({
 Developers must import and call `setupIonicReact` even if they are not setting custom config.
 :::
 
-See the [React Config Documentation](../react/config) for more examples.
+See the [React Config Documentation](../developing/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`:
 
@@ -143,7 +143,7 @@ module.exports = {
 
 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.
+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](../developing/config) for more examples.
 
 6. Rename the `IonRouter` type for `useIonRouter` to `UseIonRouterResult`.
 
diff --git a/docs/vue/config.md b/docs/vue/config.md
deleted file mode 100644
index 98b453cd612..00000000000
--- a/docs/vue/config.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# 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.                     |
-| `toastDuration`          | `number`                                                                      | Overrides the default `duration` for all `ion-toast` components.                                         |
-| `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".               |
-| `toggleOnOffLabels`      | `boolean`                                                                     | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/docs/vue/platform.md b/docs/vue/platform.md
index 11afbcf7c11..74900001f5d 100644
--- a/docs/vue/platform.md
+++ b/docs/vue/platform.md
@@ -47,7 +47,7 @@ Below is a table listing all the possible platform values along with correspondi
 
 ## 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.
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
 
 ```tsx
 createApp(App).use(IonicVue, {
diff --git a/sidebars.js b/sidebars.js
index e9610cbdb0d..2e7f6c563f1 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -30,6 +30,7 @@ module.exports = {
         'developing/tips',
         'developing/hardware-back-button',
         'developing/keyboard',
+        'developing/config'
       ],
     },
     {
@@ -87,7 +88,6 @@ module.exports = {
         'angular/navigation',
         'angular/virtual-scroll',
         'angular/slides',
-        'angular/config',
         'angular/platform',
         'angular/testing',
         'angular/storage',
@@ -121,7 +121,6 @@ module.exports = {
         'react/navigation',
         'react/virtual-scroll',
         'react/slides',
-        'react/config',
         'react/platform',
         'react/pwa',
         'react/overlays',
@@ -156,7 +155,6 @@ module.exports = {
         'vue/virtual-scroll',
         'vue/slides',
         'vue/utility-functions',
-        'vue/config',
         'vue/platform',
         'vue/pwa',
         'vue/storage',
diff --git a/docs/angular/config.md b/versioned_docs/version-v6/developing/config.md
similarity index 78%
rename from docs/angular/config.md
rename to versioned_docs/version-v6/developing/config.md
index 9e6849a3729..4feee0a375b 100644
--- a/docs/angular/config.md
+++ b/versioned_docs/version-v6/developing/config.md
@@ -2,158 +2,57 @@
 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.
+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:
+The following example disables ripple effects and default the mode to Material Design:
 
-```tsx title="app.module.ts"
-import { IonicModule } from '@ionic/angular';
+import GlobalExample from './config/global/index.md';
 
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot({
-      rippleEffect: false,
-      mode: 'md'
-    })
-  ],
-  ...
-})
-```
+<GlobalExample />
 
 ## 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) { }
+import PerComponentExample from './config/per-component/index.md';
 
-  localeChanged(locale: string) {
-    if (locale === 'es_ES') {
-      this.backButtonText = 'Devolver';
-    }
-  }
-
-}
-```
+<PerComponentExample />
+  
 
 ## 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:**
+import PerPlatformExample from './config/per-platform/index.md';
 
-```tsx
-import { isPlatform, IonicModule } from '@ionic/angular';
+<PerPlatformExample />
 
-const getConfig = () => {
-  if (isPlatform('hybrid')) {
-    return {
-      backButtonText: 'Previous',
-      tabButtonLayout: 'label-hide'
-    }
-  }
 
-  return {
-    menuIcon: 'ellipsis-vertical'
-  }
-}
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot(getConfig())
-  ],
-  ...
-})
-```
+### Fallbacks
 
-**Per-platform config overrides:**
+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, IonicModule } from '@ionic/angular';
+import PerPlatformFallbackExample from './config/per-platform-overrides/index.md';
 
-const getConfig = () => {
-  let config = {
-    animated: false
-  };
+<PerPlatformFallbackExample />
 
-  if (isPlatform('iphone')) {
-    config = {
-      ...config,
-      backButtonText: 'Previous'
-    }
-  }
+### Overrides
 
-  return config;
-}
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot(getConfig())
-  ],
-  ...
-})
-```
+This final example allows you to accumulate a config object based upon different platform requirements.
 
-## Methods
+import PerPlatformOverridesExample from './config/per-platform-fallback/index.md';
+
+<PerPlatformOverridesExample />
+
+## Reading the Config (Angular)
+
+Ionic Angular provides a `Config` provider for accessing the Ionic Config.
 
 ### get
 
@@ -202,19 +101,6 @@ class AppComponent {
 | **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
diff --git a/versioned_docs/version-v6/developing/config/global/index.md b/versioned_docs/version-v6/developing/config/global/index.md
new file mode 100644
index 00000000000..bbfbaa83a71
--- /dev/null
+++ b/versioned_docs/version-v6/developing/config/global/index.md
@@ -0,0 +1,67 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="global-config"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="javascript">
+
+```javascript title="example.js"
+window.Ionic = {
+  config: {
+    rippleEffect: false,
+    mode: 'md'
+  }
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx title="app.module.ts"
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      rippleEffect: false,
+      mode: 'md'
+    })
+  ],
+  ...
+})
+```
+</TabItem>
+<TabItem value="react">
+
+The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
+```tsx title="App.tsx"
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+```tsx title="main.ts"
+
+import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+ 
+createApp(App).use(IonicVue, {
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/developing/config/per-component/index.md b/versioned_docs/version-v6/developing/config/per-component/index.md
new file mode 100644
index 00000000000..64b868a70ee
--- /dev/null
+++ b/versioned_docs/version-v6/developing/config/per-component/index.md
@@ -0,0 +1,143 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-component-config"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="javascript">
+
+**Not recommended**
+
+```ts
+window.Ionic = {
+  config: {
+    // Not recommended when your app requires reactive values
+    backButtonText: 'Go Back'
+  }
+}
+```
+
+**Recommended**
+
+```html
+<ion-back-button></ion-back-button>
+
+<script>
+  const backButton = document.querySelector('ion-back-button');
+  
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  backButton.text = 'Go Back';
+</script>
+```
+</TabItem>
+<TabItem value="angular">
+
+**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 {
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  backButtonText = 'Go Back';
+}
+```
+</TabItem>
+<TabItem value="react">
+
+**Not recommended**
+
+```tsx
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  // Not recommended when your app requires reactive values
+  backButtonText: 'Go Back'
+});
+```
+
+**Recommended**
+
+```tsx
+import { useState } from 'react';
+import { IonBackButton } from '@ionic/react';
+
+const ExampleComponent = () => {
+  const [backButtonText, setBackButtonText] = useState('Go Back');
+  return (
+    {/*
+     * The back button text can be updated
+     * anytime the locale changes.
+     */}
+    <IonBackButton text={backButtonText}></IonBackButton>
+  )
+}
+```
+</TabItem>
+<TabItem value="vue">
+
+**Not recommended**
+
+```ts
+import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+ 
+ // Not recommended when your app requires reactive values
+createApp(App).use(IonicVue, {
+  backButtonText: 'Go Back'
+});
+```
+
+**Recommended**
+
+```html
+<template>
+  <ion-back-button [text]="backButtonText"></ion-back-button>
+</template>
+
+<script setup lang="ts">
+  import { IonBackButton } from '@ionic/vue';
+  import { ref } from 'vue';
+
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  const backButtonText = ref('Go Back');
+</script>
+```
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
new file mode 100644
index 00000000000..02a5f27a3c0
--- /dev/null
+++ b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
@@ -0,0 +1,79 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-fallback-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+```ts title="app.module.ts"
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+}
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot(getConfig())
+  ],
+  ...
+});
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+  
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+};
+
+setupIonicReact(getConfig());
+
+```
+</TabItem>
+<TabItem value="vue">
+
+```ts title="main.ts"
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+  
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+};
+
+createApp(App).use(IonicVue, getConfig());
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
new file mode 100644
index 00000000000..243cfa9c2fc
--- /dev/null
+++ b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
@@ -0,0 +1,88 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-fallback-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+```ts title="app.module.ts"
+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())
+  ],
+  ...
+});
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  let config = {
+    animated: false,
+  };
+
+  if (isPlatform('iphone')) {
+    config = {
+      ...config,
+      backButtonText: 'Previous',
+    };
+  }
+
+  return config;
+};
+
+setupIonicReact(getConfig());
+
+```
+</TabItem>
+<TabItem value="vue">
+
+```ts title="main.ts"
+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());
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/developing/config/per-platform/index.md b/versioned_docs/version-v6/developing/config/per-platform/index.md
new file mode 100644
index 00000000000..7d17299d0f8
--- /dev/null
+++ b/versioned_docs/version-v6/developing/config/per-platform/index.md
@@ -0,0 +1,63 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+:::note
+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.
+
+See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect.
+:::
+
+```ts title="app.module.ts"
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      animated: !isPlatform('mobileweb')
+    })
+  ],
+  ...
+})
+```
+</TabItem>
+<TabItem value="react">
+
+:::note
+See the [React Platform Documentation](../react/platform) for the types of platforms you can detect.
+:::
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  animated: !isPlatform('mobileweb'),
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+:::note
+See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect.
+:::
+
+```ts title="main.ts"
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+createApp(App).use(IonicVue, {
+  animated: !isPlatform('mobileweb'),
+});
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/versioned_docs/version-v6/react/config.md b/versioned_docs/version-v6/react/config.md
deleted file mode 100644
index 6df438834cb..00000000000
--- a/versioned_docs/version-v6/react/config.md
+++ /dev/null
@@ -1,116 +0,0 @@
-# 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/vue/config.md b/versioned_docs/version-v6/vue/config.md
deleted file mode 100644
index a8a3ec5129d..00000000000
--- a/versioned_docs/version-v6/vue/config.md
+++ /dev/null
@@ -1,117 +0,0 @@
-# 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_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json
index 27bb0c446d3..6ab704f7beb 100644
--- a/versioned_sidebars/version-v6-sidebars.json
+++ b/versioned_sidebars/version-v6-sidebars.json
@@ -72,6 +72,10 @@
         {
           "type": "doc",
           "id": "version-v6/developing/keyboard"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/developing/config"
         }
       ],
       "collapsible": true
@@ -210,10 +214,6 @@
           "type": "doc",
           "id": "version-v6/angular/slides"
         },
-        {
-          "type": "doc",
-          "id": "version-v6/angular/config"
-        },
         {
           "type": "doc",
           "id": "version-v6/angular/platform"
@@ -306,10 +306,6 @@
           "type": "doc",
           "id": "version-v6/react/slides"
         },
-        {
-          "type": "doc",
-          "id": "version-v6/react/config"
-        },
         {
           "type": "doc",
           "id": "version-v6/react/platform"
@@ -410,10 +406,6 @@
           "type": "doc",
           "id": "version-v6/vue/utility-functions"
         },
-        {
-          "type": "doc",
-          "id": "version-v6/vue/config"
-        },
         {
           "type": "doc",
           "id": "version-v6/vue/platform"

From 69366b1b1fe974f1cf6d802dff9714ac4fa5cf27 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Wed, 22 Mar 2023 15:33:07 -0400
Subject: [PATCH 266/469] docs(live reload): update docs about Capacitor
 programmatic builds (#2843)

Resolves #2805
---
 versioned_docs/version-v6/cli/livereload.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/versioned_docs/version-v6/cli/livereload.md b/versioned_docs/version-v6/cli/livereload.md
index d43ea298b02..67a571ef1cd 100644
--- a/versioned_docs/version-v6/cli/livereload.md
+++ b/versioned_docs/version-v6/cli/livereload.md
@@ -14,8 +14,6 @@ As with regular device deploys, you will need a cable to connect your device to
 
 ### 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

From 6ef53690b116d76cb1032f6920ab067dbe2a083c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 22 Mar 2023 16:31:37 -0400
Subject: [PATCH 267/469] docs(many): update config links (#2846)

---
 docs/api/back-button.md                                 | 2 +-
 versioned_docs/version-v6/angular/platform.md           | 2 +-
 versioned_docs/version-v6/api/back-button.md            | 2 +-
 versioned_docs/version-v6/intro/upgrading-to-ionic-6.md | 6 +++---
 versioned_docs/version-v6/react/platform.md             | 2 +-
 versioned_docs/version-v6/theming/platform-styles.md    | 4 ++--
 versioned_docs/version-v6/vue/platform.md               | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 6500a8ab781..c215d43e671 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v7/back-button/basic/index.md';
 
 ## Custom Back Button
 
-By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the Config docs for [Angular](/docs/angular/config), [React](/docs/react/config), or [Vue](/docs/vue/config) for more information.
+By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the [Config docs](../developing/config) for more information.
 
 import Custom from '@site/static/usage/v7/back-button/custom/index.md';
 
diff --git a/versioned_docs/version-v6/angular/platform.md b/versioned_docs/version-v6/angular/platform.md
index ac957693971..9668f3632a1 100644
--- a/versioned_docs/version-v6/angular/platform.md
+++ b/versioned_docs/version-v6/angular/platform.md
@@ -63,7 +63,7 @@ Below is a table listing all the possible platform values along with correspondi
 
 #### 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.
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
 
 ```tsx
 import { IonicModule } from '@ionic/angular';
diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.md
index d74db2d2cfa..10ad87c6f2a 100644
--- a/versioned_docs/version-v6/api/back-button.md
+++ b/versioned_docs/version-v6/api/back-button.md
@@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v6/back-button/basic/index.md';
 
 ## Custom Back Button
 
-By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the Config docs for [Angular](/docs/angular/config), [React](/docs/react/config), or [Vue](/docs/vue/config) for more information.
+By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the [Config docs](../developing/config) for more information.
 
 import Custom from '@site/static/usage/v6/back-button/custom/index.md';
 
diff --git a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
index 95b39f2350d..25312444001 100644
--- a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
+++ b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
@@ -19,7 +19,7 @@ If you are using Ionic Angular Server, be sure to update that as well:
 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.
+3. Remove any usage of `Config.set()`. Instead, set your config in `IonicModule.forRoot()`. See the [Config Documentation](../developing/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
@@ -73,7 +73,7 @@ setupIonicReact({
 Developers must import and call `setupIonicReact` even if they are not setting custom config.
 :::
 
-See the [React Config Documentation](../react/config) for more examples.
+See the [Config Documentation](../developing/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`:
 
@@ -133,7 +133,7 @@ module.exports = {
 
 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.
+5. Remove any usage of the `setupConfig` function previously exported from `@ionic/vue`. Set your config when installing the `IonicVue` plugin instead. See the [Config Documentation](../developing/config) for more examples.
 
 6. Rename the `IonRouter` type for `useIonRouter` to `UseIonRouterResult`.
 
diff --git a/versioned_docs/version-v6/react/platform.md b/versioned_docs/version-v6/react/platform.md
index a58735d8609..eb391d04795 100644
--- a/versioned_docs/version-v6/react/platform.md
+++ b/versioned_docs/version-v6/react/platform.md
@@ -47,7 +47,7 @@ Below is a table listing all the possible platform values along with correspondi
 
 ## 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.
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
 
 ```tsx
 setupIonicReact({
diff --git a/versioned_docs/version-v6/theming/platform-styles.md b/versioned_docs/version-v6/theming/platform-styles.md
index f503b107c80..77d0a5665fc 100644
--- a/versioned_docs/version-v6/theming/platform-styles.md
+++ b/versioned_docs/version-v6/theming/platform-styles.md
@@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r
 
 ## 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**:
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**:
 
 | Platform  | Mode  | Description                                                                                                                      |
 | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater
 <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._
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._
 
 ## Overriding Mode Styles
 
diff --git a/versioned_docs/version-v6/vue/platform.md b/versioned_docs/version-v6/vue/platform.md
index 11afbcf7c11..74900001f5d 100644
--- a/versioned_docs/version-v6/vue/platform.md
+++ b/versioned_docs/version-v6/vue/platform.md
@@ -47,7 +47,7 @@ Below is a table listing all the possible platform values along with correspondi
 
 ## 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.
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
 
 ```tsx
 createApp(App).use(IonicVue, {

From cb4f91c9a024dc1ad5e3dab165196c8e759a44b5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 23 Mar 2023 10:44:28 -0400
Subject: [PATCH 268/469] docs(config): add documentation for
 innerHTMLTemplatesEnabled (#2826)

---
 docs/developing/config.md                        | 1 +
 docs/techniques/security.md                      | 4 ++++
 versioned_docs/version-v6/developing/config.md   | 1 +
 versioned_docs/version-v6/techniques/security.md | 4 ++++
 4 files changed, 10 insertions(+)

diff --git a/docs/developing/config.md b/docs/developing/config.md
index 38cc071f341..c9796a19bee 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -117,6 +117,7 @@ Below are the config options that Ionic uses.
 | `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.                                        |
+| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, custom HTML passed to the relevant components will be parsed as a string instead of HTML. Defaults to `true`. |
 | `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".             |
diff --git a/docs/techniques/security.md b/docs/techniques/security.md
index cfbe5a15fc0..e500e83939f 100644
--- a/docs/techniques/security.md
+++ b/docs/techniques/security.md
@@ -62,6 +62,10 @@ Vue does not provide any type of sanitizing methods built in. It is recommended
 
 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).
 
+## Disabling Custom HTML Parsing via `innerHTML`
+
+`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. Developers can disable this functionality by setting `innerHTMLTemplatesEnabled: false` in the [IonicConfig](../developing/config#ionicconfig). When `innerHTMLTemplatesEnabled` is `false`, the values passed to the affected components will always be interpreted as strings.
+
 ## 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.
diff --git a/versioned_docs/version-v6/developing/config.md b/versioned_docs/version-v6/developing/config.md
index 4feee0a375b..662e790864d 100644
--- a/versioned_docs/version-v6/developing/config.md
+++ b/versioned_docs/version-v6/developing/config.md
@@ -117,6 +117,7 @@ Below are the config options that Ionic uses.
 | `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.                                        |
+| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, all `innerHTML` usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. `innerHTML` usage is enabled by default. |
 | `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".             |
diff --git a/versioned_docs/version-v6/techniques/security.md b/versioned_docs/version-v6/techniques/security.md
index cfbe5a15fc0..e500e83939f 100644
--- a/versioned_docs/version-v6/techniques/security.md
+++ b/versioned_docs/version-v6/techniques/security.md
@@ -62,6 +62,10 @@ Vue does not provide any type of sanitizing methods built in. It is recommended
 
 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).
 
+## Disabling Custom HTML Parsing via `innerHTML`
+
+`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. Developers can disable this functionality by setting `innerHTMLTemplatesEnabled: false` in the [IonicConfig](../developing/config#ionicconfig). When `innerHTMLTemplatesEnabled` is `false`, the values passed to the affected components will always be interpreted as strings.
+
 ## 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.

From d08d1385e68b0df02114c44b7b0ba377aeeac39d Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 23 Mar 2023 08:13:26 -0700
Subject: [PATCH 269/469] docs: update dev workflow instructions (#2848)

---
 CONTRIBUTING.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7184cf5f7d7..18349950c0e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -23,11 +23,11 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check
 In order to run the documentation locally, install the dependencies and run the development server:
 
 ```sh
-$ npm install
+$ npm install --legacy-peer-deps
 $ npm start
 ```
 
-> **Note**: recent versions of npm (5+) and Node.js (10+) are required to run certain scripts.
+> **Note**: certain versions of npm (5-8) and Node.js (10-16) are required to run certain scripts.
 
 ---
 

From 53b01f7c4136c74a322595ef420d0afb6456d325 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 23 Mar 2023 14:39:51 -0400
Subject: [PATCH 270/469] docs(react, vue): add vite pwa docs (#2841)

---
 docs/react/pwa.md                      | 64 +++++++++++++++++++++-----
 docs/vue/pwa.md                        | 44 ++++++++++++++++--
 versioned_docs/version-v6/react/pwa.md | 17 ++++---
 3 files changed, 102 insertions(+), 23 deletions(-)

diff --git a/docs/react/pwa.md b/docs/react/pwa.md
index 24611d1c5ad..ef57dc05667 100644
--- a/docs/react/pwa.md
+++ b/docs/react/pwa.md
@@ -7,29 +7,69 @@ sidebar_label: Progressive Web Apps
   <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."
+    content="Create progressive web apps in React with Ionic. Read our React PWA documentation for information on how to make React PWAs."
   />
 </head>
 
-## Making your React app a PWA
+## Making your React app a PWA with Vite
 
-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.
+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 Application Manifest</a>. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead.
+
+To get started, install the `vite-plugin-pwa` package:
+
+```shell
+npm install -D vite-plugin-pwa
+```
+
+Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
+
+```javascript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({ registerType: 'autoUpdate' })
+  ],
+})
+```
+
+This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
+
+For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/).
+
+See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA.
+
+## Making your React app a PWA with Create React App
+
+:::note
+As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create React App. See [Making your React app a PWA with Vite](#making-your-react-app-a-pwa-with-vite) for Vite instructions.
+:::
+
+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 Application 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 { createRoot } from 'react-dom/client';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
 
 // 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();
+// Learn more about service workers: https://cra.link/PWA
+serviceWorkerRegistration.register();
 ```
 
 Once this package has been added, run `ionic build` and the `build` directory will be ready to deploy as a PWA.
@@ -42,15 +82,15 @@ By default, react apps package comes with the Ionic logo for the app icons. Be s
 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
+### 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
+### Deploying
 
-### Firebase
+#### 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).
 
diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md
index 2c75702bd46..b322831ceac 100644
--- a/docs/vue/pwa.md
+++ b/docs/vue/pwa.md
@@ -1,4 +1,5 @@
 ---
+title: Progressive Web Apps in Vue
 sidebar_label: Progressive Web Apps
 ---
 
@@ -10,11 +11,44 @@ sidebar_label: Progressive Web Apps
   />
 </head>
 
-# Progressive Web Apps in Vue
+## Making your Vue app a PWA with Vite
 
-## 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 Application Manifest</a>. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead.
 
-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.
+To get started, install the `vite-plugin-pwa` package:
+
+```shell
+npm install -D vite-plugin-pwa
+```
+
+Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
+
+```javascript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    VitePWA({ registerType: 'autoUpdate' })
+  ],
+})
+```
+
+This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
+
+For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/).
+
+See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA.
+
+## Making your Vue app a PWA with Vue CLI
+
+:::note
+As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. See [Making your Vue app a PWA with Vite](#making-your-vue-app-a-pwa-with-vite) for Vite instructions.
+:::
+
+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 Application 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.
 
@@ -117,11 +151,11 @@ In addition to the service worker, the Vue PWA plugin also is responsible for cr
 
 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
+### 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
 
 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).
 
diff --git a/versioned_docs/version-v6/react/pwa.md b/versioned_docs/version-v6/react/pwa.md
index 24611d1c5ad..2cee872655d 100644
--- a/versioned_docs/version-v6/react/pwa.md
+++ b/versioned_docs/version-v6/react/pwa.md
@@ -19,17 +19,22 @@ In the `index.ts` for your app, there is a call to a `serviceWorker.unregister()
 
 ```ts
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
 
 // 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();
+// Learn more about service workers: https://cra.link/PWA
+serviceWorkerRegistration.register();
 ```
 
 Once this package has been added, run `ionic build` and the `build` directory will be ready to deploy as a PWA.

From 77d616c1e27f3f7b3380e1fa4eb231404900565f Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 23 Mar 2023 11:54:37 -0700
Subject: [PATCH 271/469] docs(v5): change CDN links to use core@v5 (#2847)

---
 static/demos/api/accordion/index.html       | 353 --------------------
 static/demos/api/action-sheet/index.html    |   8 +-
 static/demos/api/alert/index.html           |  10 +-
 static/demos/api/avatar/index.html          |   6 +-
 static/demos/api/back-button/index.html     |   6 +-
 static/demos/api/backdrop/index.html        |   6 +-
 static/demos/api/badge/index.html           |   6 +-
 static/demos/api/breadcrumbs/index.html     | 217 ------------
 static/demos/api/button/index.html          |   6 +-
 static/demos/api/card/index.html            |   6 +-
 static/demos/api/checkbox/index.html        |   6 +-
 static/demos/api/chip/index.html            |   6 +-
 static/demos/api/content/index.html         |   6 +-
 static/demos/api/datetime/index.html        | 122 +++----
 static/demos/api/fab/index.html             |   6 +-
 static/demos/api/grid/index.html            |   6 +-
 static/demos/api/icon/index.html            | 142 --------
 static/demos/api/infinite-scroll/index.html |   6 +-
 static/demos/api/input/index.html           |   6 +-
 static/demos/api/item/index.html            |   6 +-
 static/demos/api/list/index.html            |   6 +-
 static/demos/api/loading/index.html         |   8 +-
 static/demos/api/menu/index.html            |  13 +-
 static/demos/api/modal/index.html           |   8 +-
 static/demos/api/nav/index.html             |   6 +-
 static/demos/api/note/index.html            |   6 +-
 static/demos/api/picker/index.html          |   8 +-
 static/demos/api/popover/index.html         |   8 +-
 static/demos/api/progress-bar/index.html    |   6 +-
 static/demos/api/radio/index.html           |   6 +-
 static/demos/api/range/index.html           |   6 +-
 static/demos/api/refresher/index.html       |   6 +-
 static/demos/api/reorder/index.html         |   6 +-
 static/demos/api/router-link/index.html     |   6 +-
 static/demos/api/searchbar/index.html       |   6 +-
 static/demos/api/segment/index.html         |   6 +-
 static/demos/api/select/index.html          |   6 +-
 static/demos/api/skeleton-text/index.html   |   6 +-
 static/demos/api/slides/index.html          |   6 +-
 static/demos/api/spinner/index.html         |   6 +-
 static/demos/api/tabs/index.html            |   6 +-
 static/demos/api/text/index.html            |   6 +-
 static/demos/api/thumbnail/index.html       |   6 +-
 static/demos/api/toast/index.html           |   8 +-
 static/demos/api/toggle/index.html          |   6 +-
 static/demos/api/toolbar/index.html         |   6 +-
 46 files changed, 176 insertions(+), 933 deletions(-)
 delete mode 100644 static/demos/api/accordion/index.html
 delete mode 100644 static/demos/api/breadcrumbs/index.html
 delete mode 100644 static/demos/api/icon/index.html

diff --git a/static/demos/api/accordion/index.html b/static/demos/api/accordion/index.html
deleted file mode 100644
index f11b3b7894a..00000000000
--- a/static/demos/api/accordion/index.html
+++ /dev/null
@@ -1,353 +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>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css" />
-    <style>
-      :root {
-        --ion-safe-area-top: 20px;
-        --ion-safe-area-bottom: 22px;
-      }
-
-      ion-list-header {
-        padding-bottom: 12px;
-      }
-
-      ion-content {
-        --background: #f2f2f7;
-      }
-    </style>
-    <script type="module">
-      import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/index.esm.js';
-      window.toastController = toastController;
-    </script>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button defaultHref="/"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Accordion</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content fullscreen class="component-content">
-        <component-details description="description" url="url"></component-details>
-
-        <ion-list inset="true">
-          <ion-list-header>Basic</ion-list-header>
-          <ion-accordion-group>
-            <ion-accordion value="colors">
-              <ion-item slot="header">
-                <ion-label>Colors</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Red</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Green</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Blue</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="shapes">
-              <ion-item slot="header">
-                <ion-label>Shapes</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Circle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Triangle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Square</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="numbers">
-              <ion-item slot="header">
-                <ion-label>Numbers</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>1</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>2</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>3</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-          </ion-accordion-group>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Custom Icon</ion-list-header>
-          <ion-accordion-group>
-            <ion-accordion value="colors" toggle-icon="arrow-down-circle">
-              <ion-item slot="header">
-                <ion-label>Colors</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Red</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Green</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Blue</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="shapes" toggle-icon="arrow-down-circle">
-              <ion-item slot="header">
-                <ion-label>Shapes</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Circle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Triangle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Square</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="numbers" toggle-icon="arrow-down-circle">
-              <ion-item slot="header">
-                <ion-label>Numbers</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>1</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>2</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>3</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-          </ion-accordion-group>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Open Accordion</ion-list-header>
-          <ion-accordion-group value="colors">
-            <ion-accordion value="colors">
-              <ion-item slot="header">
-                <ion-label>Colors</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Red</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Green</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Blue</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="shapes">
-              <ion-item slot="header">
-                <ion-label>Shapes</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Circle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Triangle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Square</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="numbers">
-              <ion-item slot="header">
-                <ion-label>Numbers</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>1</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>2</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>3</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-          </ion-accordion-group>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Multiple Accordions</ion-list-header>
-          <ion-accordion-group multiple="true" id="multiple">
-            <ion-accordion value="colors">
-              <ion-item slot="header">
-                <ion-label>Colors</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Red</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Green</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Blue</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="shapes">
-              <ion-item slot="header">
-                <ion-label>Shapes</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Circle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Triangle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Square</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="numbers">
-              <ion-item slot="header">
-                <ion-label>Numbers</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>1</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>2</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>3</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-          </ion-accordion-group>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Managing State</ion-list-header>
-          <ion-accordion-group id="state" value="numbers">
-            <ion-accordion value="colors">
-              <ion-item slot="header">
-                <ion-label>Colors</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Red</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Green</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Blue</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="shapes">
-              <ion-item slot="header">
-                <ion-label>Shapes</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>Circle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Triangle</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>Square</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-            <ion-accordion value="numbers">
-              <ion-item slot="header">
-                <ion-label>Numbers</ion-label>
-              </ion-item>
-
-              <ion-list slot="content">
-                <ion-item>
-                  <ion-label>1</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>2</ion-label>
-                </ion-item>
-                <ion-item>
-                  <ion-label>3</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-accordion>
-          </ion-accordion-group>
-        </ion-list>
-
-        <div class="ion-padding-start ion-padding-end ion-padding-bottom">
-          <ion-button expand="block" onclick="logAccordionGroup()">Log Value of Accordion Group</ion-button>
-          <ion-button expand="block" onclick="closeAccordions()">Close Accordion</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const stateAccordion = document.querySelector('#state');
-      function logAccordionGroup() {
-        const toast = toastController.create({
-          message: 'Accordion Value: ' + stateAccordion.value,
-          duration: 5000,
-        });
-
-        toast.then((toastEl) => {
-          toastEl.present();
-        });
-      }
-
-      function closeAccordions() {
-        stateAccordion.value = undefined;
-      }
-    </script>
-  </body>
-</html>
diff --git a/static/demos/api/action-sheet/index.html b/static/demos/api/action-sheet/index.html
index f42108f4ff8..1cde0be6c9c 100644
--- a/static/demos/api/action-sheet/index.html
+++ b/static/demos/api/action-sheet/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Action Sheet</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,7 +14,7 @@
       }
     </style>
     <script type="module">
-      import { actionSheetController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+      import { actionSheetController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.actionSheetController = actionSheetController;
     </script>
   </head>
diff --git a/static/demos/api/alert/index.html b/static/demos/api/alert/index.html
index 6c13e5fa318..a96775bd53e 100644
--- a/static/demos/api/alert/index.html
+++ b/static/demos/api/alert/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Alert</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,9 +14,9 @@
       }
     </style>
     <script type="module">
-      import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+      import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.alertController = alertController;
-    </script>
+    </script>5
   </head>
   <body>
     <ion-app>
diff --git a/static/demos/api/avatar/index.html b/static/demos/api/avatar/index.html
index bcfc8abc9d6..b03be119ea2 100644
--- a/static/demos/api/avatar/index.html
+++ b/static/demos/api/avatar/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Avatar</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/back-button/index.html b/static/demos/api/back-button/index.html
index 4321bc3fa76..a94859429d5 100644
--- a/static/demos/api/back-button/index.html
+++ b/static/demos/api/back-button/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Back Button</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/backdrop/index.html b/static/demos/api/backdrop/index.html
index 2f11826412d..2c0b8e21277 100644
--- a/static/demos/api/backdrop/index.html
+++ b/static/demos/api/backdrop/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Backdrop</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/badge/index.html b/static/demos/api/badge/index.html
index f16a69553cd..c533f24c6a9 100644
--- a/static/demos/api/badge/index.html
+++ b/static/demos/api/badge/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Badge</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/breadcrumbs/index.html b/static/demos/api/breadcrumbs/index.html
deleted file mode 100644
index fa2023c43b8..00000000000
--- a/static/demos/api/breadcrumbs/index.html
+++ /dev/null
@@ -1,217 +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>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css" />
-    <style>
-      :root {
-        --ion-safe-area-top: 20px;
-        --ion-safe-area-bottom: 22px;
-      }
-
-      ion-breadcrumbs.ios {
-        padding: 6px 8px;
-      }
-
-      ion-breadcrumbs.md {
-        padding: 0 4px;
-      }
-
-      ion-content {
-        --background: #f2f2f7;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent>
-        <ion-toolbar>
-          <ion-title>Breadcrumbs</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen="true">
-        <ion-list inset="true">
-          <ion-list-header>Basic</ion-list-header>
-          <ion-breadcrumbs>
-            <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-            <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-            <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Colors</ion-list-header>
-          <ion-breadcrumbs color="secondary">
-            <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-            <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-            <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Icons - Start</ion-list-header>
-          <ion-breadcrumbs>
-            <ion-breadcrumb href="#">
-              <ion-icon slot="start" name="home"></ion-icon>
-              Home
-            </ion-breadcrumb>
-            <ion-breadcrumb href="#files">
-              <ion-icon slot="start" name="folder"></ion-icon>
-              Files
-            </ion-breadcrumb>
-            <ion-breadcrumb href="#projects">
-              <ion-icon slot="start" name="folder"></ion-icon>
-              Projects
-            </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Icons - End</ion-list-header>
-          <ion-breadcrumbs>
-            <ion-breadcrumb href="#">
-              Home
-              <ion-icon slot="end" name="home"></ion-icon>
-            </ion-breadcrumb>
-            <ion-breadcrumb href="#files">
-              Files
-              <ion-icon slot="end" name="folder"></ion-icon>
-            </ion-breadcrumb>
-            <ion-breadcrumb href="#projects">
-              Projects
-              <ion-icon slot="end" name="folder"></ion-icon>
-            </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Custom Separator - Icon</ion-list-header>
-          <ion-breadcrumbs>
-            <ion-breadcrumb href="#">
-              Home
-              <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-            </ion-breadcrumb>
-            <ion-breadcrumb href="#electronics">
-              Electronics
-              <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-            </ion-breadcrumb>
-            <ion-breadcrumb href="#photography">
-              Photography
-              <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-            </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Max Items</ion-list-header>
-          <ion-breadcrumbs max-items="4">
-            <ion-breadcrumb href="#"> 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> 35 mm </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Items Before Collapse</ion-list-header>
-          <ion-breadcrumbs max-items="4" items-before-collapse="2">
-            <ion-breadcrumb href="#"> 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> 35 mm </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Items After Collapse</ion-list-header>
-          <ion-breadcrumbs max-items="4" items-after-collapse="3">
-            <ion-breadcrumb href="#"> 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> 35 mm </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Items Before And After Collapse</ion-list-header>
-          <ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="3">
-            <ion-breadcrumb href="#"> 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> 35 mm </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Expand on Collapsed Indicator Click</ion-list-header>
-          <ion-breadcrumbs id="expand">
-            <ion-breadcrumb href="#"> 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> 35 mm </ion-breadcrumb>
-          </ion-breadcrumbs>
-
-          <ion-popover alignment="center">
-            <ion-content>
-              <ion-list>
-                <ion-item href="#electronics">
-                  <ion-label>Electronics</ion-label>
-                </ion-item>
-                <ion-item href="#photography">
-                  <ion-label>Photography</ion-label>
-                </ion-item>
-                <ion-item href="#cameras">
-                  <ion-label>Cameras</ion-label>
-                </ion-item>
-                <ion-item href="#film">
-                  <ion-label>Film</ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-content>
-          </ion-popover>
-        </ion-list>
-
-        <ion-list inset="true">
-          <ion-list-header>Popover on Collapsed Indicator Click</ion-list-header>
-          <ion-breadcrumbs max-items="4" id="popover">
-            <ion-breadcrumb href="#"> 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> 35 mm </ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-list>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const expandBreadcrumb = document.querySelector('#expand');
-      const popoverBreadcrumb = document.querySelector('#popover');
-      const popover = document.querySelector('ion-popover');
-
-      expandBreadcrumb.maxItems = 4;
-      expandBreadcrumb.addEventListener('ionCollapsedClick', () => {
-        expandBreadcrumb.maxItems = undefined;
-      });
-
-      popoverBreadcrumb.addEventListener('ionCollapsedClick', (ev) => {
-        popover.present(ev);
-      });
-    </script>
-  </body>
-</html>
diff --git a/static/demos/api/button/index.html b/static/demos/api/button/index.html
index 3d0a6b5b445..b5104c00dd8 100644
--- a/static/demos/api/button/index.html
+++ b/static/demos/api/button/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Button</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/card/index.html b/static/demos/api/card/index.html
index 03bad514d69..e733820c113 100644
--- a/static/demos/api/card/index.html
+++ b/static/demos/api/card/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Card</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/checkbox/index.html b/static/demos/api/checkbox/index.html
index 25fa07a9d7d..c1883c65821 100644
--- a/static/demos/api/checkbox/index.html
+++ b/static/demos/api/checkbox/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Checkbox</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/chip/index.html b/static/demos/api/chip/index.html
index 0c6c512c9cc..75e6994524a 100644
--- a/static/demos/api/chip/index.html
+++ b/static/demos/api/chip/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chip</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/content/index.html b/static/demos/api/content/index.html
index 9550b0d2b1f..8ac8c5b3113 100644
--- a/static/demos/api/content/index.html
+++ b/static/demos/api/content/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Content</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/datetime/index.html b/static/demos/api/datetime/index.html
index 15c40cf4fb4..faf3e78c693 100644
--- a/static/demos/api/datetime/index.html
+++ b/static/demos/api/datetime/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DateTime</title>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -47,86 +47,42 @@
         <ion-toolbar>
           <ion-title>DateTime</ion-title>
         </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding-start ion-padding-end" fullscreen>
-        <div class="grid">
-          <div class="grid-item">
-            <h2>Initial Value</h2>
-            <ion-datetime value="2012-12-15T13:47:20.789"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Readonly</h2>
-            <ion-datetime readonly="true"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Disabled</h2>
-            <ion-datetime disabled="true"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Custom Locale</h2>
-            <ion-datetime locale="en-GB"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Max and min</h2>
-            <ion-datetime min="1994-03-14" max="2012-12-09" value="2008-09-02"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>15 minute increments</h2>
-            <ion-datetime minute-values="0,15,30,45"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Specific days/months/years</h2>
-            <ion-datetime
-              month-values="6,7,8"
-              year-values="2014,2015"
-              day-values="01,02,03,04,05,06,08,09,10,11,12,13,14"
-            ></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Time Only</h2>
-            <ion-datetime presentation="time"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Time First, Date Second</h2>
-            <ion-datetime presentation="time-date"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Custom Hour Cycle</h2>
-            <ion-datetime hour-cycle="h23"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Custom First Day Of Week</h2>
-            <ion-datetime first-day-of-week="1"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Custom Title</h2>
-            <ion-datetime>
-              <div slot="title">My Custom Title</div>
-            </ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Clear Button</h2>
-            <ion-datetime show-clear-button="true"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Custom Buttons</h2>
-            <ion-datetime ref="el => this.customDatetime = el">
-              <ion-buttons slot="buttons">
-                <ion-button color="primary" onClick="() => this.confirm()">Good to go!</ion-button>
-                <ion-button color="danger" onClick="() => this.reset()">Reset</ion-button>
-              </ion-buttons>
-            </ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Datetime in Overlay</h2>
-            <ion-button id="open-modal">Open Datetime Modal</ion-button>
-            <ion-modal trigger="open-modal">
-              <ion-content force-overscroll="false">
-                <ion-datetime></ion-datetime>
-              </ion-content>
-            </ion-modal>
-          </div>
-        </div>
+      </ion-header>,
+      <ion-content fullscreen>
+        <ion-list>
+          <ion-item>
+            <ion-input placeholder="Title"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-input placeholder="Location"></ion-input>
+          </ion-item>
+          <ion-item-divider></ion-item-divider>
+          <ion-item>
+            <ion-label>Start Date</ion-label>
+            <ion-datetime value="1990-02-19" placeholder="Select Date"></ion-datetime>
+          </ion-item>
+          <ion-item>
+            <ion-label>Start Time</ion-label>
+            <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z"></ion-datetime>
+          </ion-item>
+          <ion-item>
+            <ion-label>Ends</ion-label>
+            <ion-datetime value="1990-02-20" placeholder="Select Date"></ion-datetime>
+          </ion-item>
+          <ion-item>
+            <ion-label>Repeat</ion-label>
+            <ion-datetime placeholder="Never" disabled></ion-datetime>
+          </ion-item>
+          <ion-item>
+            <ion-label>Travel Time</ion-label>
+            <ion-datetime placeholder="None" disabled></ion-datetime>
+          </ion-item>
+          <ion-item-divider></ion-item-divider>
+          <ion-item>
+            <ion-label>Alert</ion-label>
+            <ion-datetime placeholder="None" disabled></ion-datetime>
+          </ion-item>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>
diff --git a/static/demos/api/fab/index.html b/static/demos/api/fab/index.html
index f3d0eebff3d..0063d847c23 100644
--- a/static/demos/api/fab/index.html
+++ b/static/demos/api/fab/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fab</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/grid/index.html b/static/demos/api/grid/index.html
index eb7336738bf..d97738e67d5 100644
--- a/static/demos/api/grid/index.html
+++ b/static/demos/api/grid/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Grid</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/icon/index.html b/static/demos/api/icon/index.html
deleted file mode 100644
index d8c18eeea87..00000000000
--- a/static/demos/api/icon/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Icon</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
-    <style>
-      :root {
-        --ion-safe-area-top: 20px;
-        --ion-safe-area-bottom: 22px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header translucent>
-        <ion-toolbar>
-          <ion-title>Icon</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content fullscreen class="ion-padding">
-        <ion-list>
-          <ion-item>
-            <ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="home" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="home" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="home" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
-            <ion-label>
-              <code> id="dynamicHomeIcon" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="md-home" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="md-home" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="ios-home" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="ios-home" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="ios-home" slot="end"></ion-icon>
-            <ion-label>
-              <code> name="ios-home" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="ios-star-outline" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="ios-star-outline" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
-            <ion-label>
-              <code> name="IOS-STAR-OUTLINE" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="md-home" color="primary" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="md-home" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="logo-twitter" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
-            <ion-label>
-              <code> ios="logo-apple" md="logo-android" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="color-filter" slot="start"></ion-icon>
-            <ion-label>
-              <code> name="color-filter" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
-            <ion-label>
-              <code> ios="ios-color-filter" md="md-color-filter" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
-            <ion-label>
-              <code> ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon slot="start"></ion-icon>
-            <ion-label>
-              <code> name="null" </code>
-            </ion-label>
-          </ion-item>
-
-          <ion-item detail="true">
-            <ion-label>
-              <code> ion-item w/ [detail="true"] attr. text text text text text text </code>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/demos/api/infinite-scroll/index.html b/static/demos/api/infinite-scroll/index.html
index 4f298d17a1d..9564b843f64 100644
--- a/static/demos/api/infinite-scroll/index.html
+++ b/static/demos/api/infinite-scroll/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Infinite Scroll</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/input/index.html b/static/demos/api/input/index.html
index 24a6d277a87..5b2afe4d753 100644
--- a/static/demos/api/input/index.html
+++ b/static/demos/api/input/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Input</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/item/index.html b/static/demos/api/item/index.html
index 2a31e7d45a9..8b67d196174 100644
--- a/static/demos/api/item/index.html
+++ b/static/demos/api/item/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Item</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/list/index.html b/static/demos/api/list/index.html
index 78304019107..1c17da69db5 100644
--- a/static/demos/api/list/index.html
+++ b/static/demos/api/list/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>List</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/loading/index.html b/static/demos/api/loading/index.html
index a116f80fc6a..12ddaea51a9 100644
--- a/static/demos/api/loading/index.html
+++ b/static/demos/api/loading/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Action Sheet</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,7 +14,7 @@
       }
     </style>
     <script type="module">
-      import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+      import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.loadingController = loadingController;
     </script>
   </head>
diff --git a/static/demos/api/menu/index.html b/static/demos/api/menu/index.html
index 7f5da2c2285..8b85ff3c4c1 100644
--- a/static/demos/api/menu/index.html
+++ b/static/demos/api/menu/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Menu</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,11 +14,10 @@
       }
     </style>
     <script type="module">
-      import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+      import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.menuController = menuController;
     </script>
   </head>
-
   <body>
     <ion-app>
       <ion-menu side="start" content-id="main-content">
@@ -56,7 +55,7 @@
           </ion-list>
         </ion-content>
       </ion-menu>
-
+  
       <div class="ion-page" id="main-content">
         <ion-header>
           <ion-toolbar>
@@ -71,7 +70,7 @@
         </ion-content>
       </div>
     </ion-app>
-
+  
     <script>
       async function openMenu() {
         await menuController.open();
diff --git a/static/demos/api/modal/index.html b/static/demos/api/modal/index.html
index eb960b7d6dc..efdcd6d141f 100644
--- a/static/demos/api/modal/index.html
+++ b/static/demos/api/modal/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Modal</title>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,7 +14,7 @@
       }
     </style>
     <script type="module">
-      import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/index.esm.js';
+      import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.modalController = modalController;
     </script>
   </head>
diff --git a/static/demos/api/nav/index.html b/static/demos/api/nav/index.html
index 56fcaed14e5..35d1357c515 100644
--- a/static/demos/api/nav/index.html
+++ b/static/demos/api/nav/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Nav</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/note/index.html b/static/demos/api/note/index.html
index 25bab2c7e71..7c615badcc8 100644
--- a/static/demos/api/note/index.html
+++ b/static/demos/api/note/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Note</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/picker/index.html b/static/demos/api/picker/index.html
index 7af6483b0d2..f4297786ce9 100644
--- a/static/demos/api/picker/index.html
+++ b/static/demos/api/picker/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Picker</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,7 +14,7 @@
       }
     </style>
     <script type="module">
-      import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+      import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.pickerController = pickerController;
     </script>
   </head>
diff --git a/static/demos/api/popover/index.html b/static/demos/api/popover/index.html
index a4d46e5a989..baec7298223 100644
--- a/static/demos/api/popover/index.html
+++ b/static/demos/api/popover/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Radio</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,7 +14,7 @@
       }
     </style>
     <script type="module">
-      import { popoverController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+      import { popoverController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.popoverController = popoverController;
     </script>
   </head>
diff --git a/static/demos/api/progress-bar/index.html b/static/demos/api/progress-bar/index.html
index ea0dbe4430c..df41130cb9a 100644
--- a/static/demos/api/progress-bar/index.html
+++ b/static/demos/api/progress-bar/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Progress Bar</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       ion-content ion-progress-bar {
         margin: 10px 0;
diff --git a/static/demos/api/radio/index.html b/static/demos/api/radio/index.html
index a3702c4b58e..9b7316f50d5 100644
--- a/static/demos/api/radio/index.html
+++ b/static/demos/api/radio/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Radio</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/range/index.html b/static/demos/api/range/index.html
index efb1c790e58..f123481d8d9 100644
--- a/static/demos/api/range/index.html
+++ b/static/demos/api/range/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Range</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/refresher/index.html b/static/demos/api/refresher/index.html
index e7a913c1bde..e8802bb2342 100644
--- a/static/demos/api/refresher/index.html
+++ b/static/demos/api/refresher/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Refresher</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/reorder/index.html b/static/demos/api/reorder/index.html
index 3a9f5657c31..695a50c2701 100644
--- a/static/demos/api/reorder/index.html
+++ b/static/demos/api/reorder/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Reorder</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/router-link/index.html b/static/demos/api/router-link/index.html
index a3c625f4bf3..05bf6252072 100644
--- a/static/demos/api/router-link/index.html
+++ b/static/demos/api/router-link/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Router Link</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/searchbar/index.html b/static/demos/api/searchbar/index.html
index 235e8b9d9bf..722cc825672 100644
--- a/static/demos/api/searchbar/index.html
+++ b/static/demos/api/searchbar/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Searchbar</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/segment/index.html b/static/demos/api/segment/index.html
index 8e91dce6fd5..fd3b95ed7bd 100644
--- a/static/demos/api/segment/index.html
+++ b/static/demos/api/segment/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Segment</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/select/index.html b/static/demos/api/select/index.html
index 05e3ff0aefd..0e3ace081c2 100644
--- a/static/demos/api/select/index.html
+++ b/static/demos/api/select/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Select</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/skeleton-text/index.html b/static/demos/api/skeleton-text/index.html
index f304127acbb..18ea245e999 100644
--- a/static/demos/api/skeleton-text/index.html
+++ b/static/demos/api/skeleton-text/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Skeleton Text</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/slides/index.html b/static/demos/api/slides/index.html
index d1a7fe34233..519ecb950b6 100644
--- a/static/demos/api/slides/index.html
+++ b/static/demos/api/slides/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Slides</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/spinner/index.html b/static/demos/api/spinner/index.html
index b4757836438..764f4c01ac3 100644
--- a/static/demos/api/spinner/index.html
+++ b/static/demos/api/spinner/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Spinner</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/tabs/index.html b/static/demos/api/tabs/index.html
index 6af273251fe..3c90750353c 100644
--- a/static/demos/api/tabs/index.html
+++ b/static/demos/api/tabs/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tabs</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/text/index.html b/static/demos/api/text/index.html
index bf4e585a219..07f5296e0a6 100644
--- a/static/demos/api/text/index.html
+++ b/static/demos/api/text/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Text</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/thumbnail/index.html b/static/demos/api/thumbnail/index.html
index ffa6acbbd13..01b289dcf5b 100644
--- a/static/demos/api/thumbnail/index.html
+++ b/static/demos/api/thumbnail/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Thumbnail</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/toast/index.html b/static/demos/api/toast/index.html
index e7329ee6589..01ec7a07d33 100644
--- a/static/demos/api/toast/index.html
+++ b/static/demos/api/toast/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Toast</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
@@ -14,7 +14,7 @@
       }
     </style>
     <script type="module">
-      import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+      import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.toastController = toastController;
     </script>
   </head>
diff --git a/static/demos/api/toggle/index.html b/static/demos/api/toggle/index.html
index 8a25d7fa8e6..f3ce8abd314 100644
--- a/static/demos/api/toggle/index.html
+++ b/static/demos/api/toggle/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Toggle</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;
diff --git a/static/demos/api/toolbar/index.html b/static/demos/api/toolbar/index.html
index 221aa40c187..ce13409f231 100644
--- a/static/demos/api/toolbar/index.html
+++ b/static/demos/api/toolbar/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Toolbar</title>
-    <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" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5/css/ionic.bundle.css" />
     <style>
       :root {
         --ion-safe-area-top: 20px;

From 407f6697f8d56598ab081d99c5dbfd4bd1c3250c Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 15:00:25 -0400
Subject: [PATCH 272/469] docs(quickstart): update to include imports and match
 current starter (#2849)

resolves #2485

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/vue/quickstart.md                      | 274 +++++--------------
 versioned_docs/version-v6/vue/quickstart.md | 275 +++++---------------
 2 files changed, 126 insertions(+), 423 deletions(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index de98ac8bc6d..c7a5e4bbde8 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -56,7 +56,7 @@ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @ty
 
 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`.
+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/HomePage.vue`.
 
 ## A look at a Vue Component
 
@@ -91,27 +91,22 @@ If we open `App.vue` we should see the following:
   </ion-app>
 </template>
 
-<script lang="ts">
+<script setup 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.
+Let's break it down, starting with the imports.
 
 ```tsx
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+<script setup lang="ts">
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+</script>
 ```
 
-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).
+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`. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
+
+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.
 
@@ -125,25 +120,6 @@ From there, let's look at the 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:
@@ -151,7 +127,7 @@ Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '@/views/HomePage.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -161,7 +137,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
 ];
 
@@ -192,12 +168,12 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: () => import('@/views/Home.vue'),
+    component: () => import('@/views/HomePage.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'`.
+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/HomePage.vue'`, we could simply do `'@/views/HomePage.vue'`.
 
 ## A component with style
 
@@ -236,20 +212,8 @@ Currently, the `Home` component looks like so:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup 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>
@@ -321,6 +285,10 @@ For brevity, we are excluding repeating parts of our component, like the functio
     </ion-content>
   </ion-page>
 </template>
+
+<script setup lang="ts">
+  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
 ```
 
 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.
@@ -355,20 +323,9 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
   </ion-page>
 </template>
 
-<script>
+<script setup>
+  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { add } from 'ionicons/icons';
-
-  ...
-
-  export default defineComponent({
-    name: 'Home',
-    ...,
-    setup() {
-      return {
-        add
-      }
-    }
-  })
 </script>
 ```
 
@@ -391,31 +348,10 @@ Now let's wire up a click handler to this. When clicking the FAB button, we want
   </ion-page>
 </template>
 
-<script>
+<script setup>
   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
-      }
-    }
-  });
+  const router = useRouter();
 </script>
 ```
 
@@ -432,7 +368,7 @@ Now that we have the pieces in place to navigate in our app, we need to create a
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '@/views/HomePage.vue';
 import NewItem from '@/views/NewItem.vue';
 
 const routes: Array<RouteRecordRaw> = [
@@ -443,7 +379,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
   {
     path: '/new',
@@ -479,22 +415,8 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment.
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup 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>
 ```
 
@@ -527,21 +449,14 @@ In other framework integrations such as Ionic React, this is not needed as any `
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup 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 };
-    },
-  });
+  import { ref } from 'vue';
+
+  const content = ref();
+  const scrollToBottom = () => {
+    content.value.$el.scrollToBottom(300);
+  };
 </script>
 ```
 
@@ -562,29 +477,15 @@ Per-Component Imports is the recommended approach to using Ionicons. This involv
   </ion-page>
 </template>
 
-<script>
+<script setup>
   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 };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </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.
+Then 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:
 
@@ -597,21 +498,9 @@ Developers also have the option of setting different icons based upon the mode:
   </ion-page>
 </template>
 
-<script>
+<script setup>
   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 };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -634,7 +523,7 @@ addIcons({
 });
 ```
 
-**Home.vue**
+**HomePage.vue**
 
 ```html
 <template>
@@ -645,17 +534,8 @@ addIcons({
   </ion-page>
 </template>
 
-<script>
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonPage,
-    },
-  });
+<script setup>
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -679,25 +559,20 @@ Let's take a look at how local component registration works:
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <SubComponent></SubComponent>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { IonContent, IonPage } from '@ionic/vue';
-  import Subcomponent from '@/components/Subcomponent.vue';
-
-  export default defineComponent({
-    components: { IonContent, IonPage, Subcomponent },
-  });
+  import SubComponent from '@/components/SubComponent.vue';
 </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.
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. 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.
+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>.
 
@@ -726,18 +601,13 @@ app.component('ion-page', IonPage);
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <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 setup lang="ts">
+  import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -801,45 +671,27 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <img :src="photo" />
+      <img :src="imageSrc" />
       <ion-button @click="takePhoto()">Take Photo</ion-button>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup 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,
-      };
-    },
-  });
+  import { ref } from 'vue';
+  import { Camera, CameraResultType } from '@capacitor/camera';
+
+  const imageSrc = ref('');
+  const takePhoto = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri,
+    });
+
+    imageSrc.value = image.webPath;
+  };
 </script>
 ```
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index de98ac8bc6d..3a0aebc88a9 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -56,7 +56,7 @@ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @ty
 
 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`.
+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/HomePage.vue`.
 
 ## A look at a Vue Component
 
@@ -91,27 +91,22 @@ If we open `App.vue` we should see the following:
   </ion-app>
 </template>
 
-<script lang="ts">
+<script setup 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.
+Let's break it down, starting with the imports.
 
 ```tsx
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+<script setup lang="ts">
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+</script>
 ```
 
-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).
+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`. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
+
+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.
 
@@ -125,25 +120,6 @@ From there, let's look at the 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:
@@ -151,7 +127,7 @@ Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '@/views/HomePage.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -161,7 +137,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
 ];
 
@@ -192,12 +168,12 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: () => import('@/views/Home.vue'),
+    component: () => import('@/views/HomePage.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'`.
+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/HomePage.vue'`, we could simply do `'@/views/HomePage.vue'`.
 
 ## A component with style
 
@@ -236,20 +212,8 @@ Currently, the `Home` component looks like so:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup 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>
@@ -321,6 +285,10 @@ For brevity, we are excluding repeating parts of our component, like the functio
     </ion-content>
   </ion-page>
 </template>
+
+<script setup lang="ts">
+  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
 ```
 
 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.
@@ -355,20 +323,9 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
   </ion-page>
 </template>
 
-<script>
+<script setup>
+  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { add } from 'ionicons/icons';
-
-  ...
-
-  export default defineComponent({
-    name: 'Home',
-    ...,
-    setup() {
-      return {
-        add
-      }
-    }
-  })
 </script>
 ```
 
@@ -391,31 +348,10 @@ Now let's wire up a click handler to this. When clicking the FAB button, we want
   </ion-page>
 </template>
 
-<script>
+<script setup>
   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
-      }
-    }
-  });
+  const router = useRouter();
 </script>
 ```
 
@@ -432,7 +368,7 @@ Now that we have the pieces in place to navigate in our app, we need to create a
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '@/views/HomePage.vue';
 import NewItem from '@/views/NewItem.vue';
 
 const routes: Array<RouteRecordRaw> = [
@@ -443,7 +379,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
   {
     path: '/new',
@@ -479,22 +415,8 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment.
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup 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>
 ```
 
@@ -527,21 +449,14 @@ In other framework integrations such as Ionic React, this is not needed as any `
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup 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 };
-    },
-  });
+  import { ref } from 'vue';
+
+  const content = ref();
+  const scrollToBottom = () => {
+    content.value.$el.scrollToBottom(300);
+  };
 </script>
 ```
 
@@ -562,29 +477,15 @@ Per-Component Imports is the recommended approach to using Ionicons. This involv
   </ion-page>
 </template>
 
-<script>
+<script setup>
   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 };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </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.
+Then 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:
 
@@ -597,21 +498,9 @@ Developers also have the option of setting different icons based upon the mode:
   </ion-page>
 </template>
 
-<script>
+<script setup>
   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 };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -633,8 +522,7 @@ addIcons({
   heart: heart,
 });
 ```
-
-**Home.vue**
+**HomePage.vue**
 
 ```html
 <template>
@@ -645,17 +533,8 @@ addIcons({
   </ion-page>
 </template>
 
-<script>
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonPage,
-    },
-  });
+<script setup>
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -679,25 +558,20 @@ Let's take a look at how local component registration works:
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <SubComponent></SubComponent>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { IonContent, IonPage } from '@ionic/vue';
-  import Subcomponent from '@/components/Subcomponent.vue';
-
-  export default defineComponent({
-    components: { IonContent, IonPage, Subcomponent },
-  });
+  import SubComponent from '@/components/SubComponent.vue';
 </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.
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. 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.
+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>.
 
@@ -726,18 +600,13 @@ app.component('ion-page', IonPage);
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <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 setup lang="ts">
+  import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -801,45 +670,27 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <img :src="photo" />
+      <img :src="imageSrc" />
       <ion-button @click="takePhoto()">Take Photo</ion-button>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup 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,
-      };
-    },
-  });
+  import { ref } from 'vue';
+  import { Camera, CameraResultType } from '@capacitor/camera';
+
+  const imageSrc = ref('');
+  const takePhoto = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri,
+    });
+
+    imageSrc.value = image.webPath;
+  };
 </script>
 ```
 

From dab36dfac41b1379561046e2367c4b6092d12cc7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 24 Mar 2023 11:07:07 -0400
Subject: [PATCH 273/469] docs(input, textarea): clarify error text behavior
 (#2853)

---
 docs/api/input.md    | 4 +++-
 docs/api/textarea.md | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/api/input.md b/docs/api/input.md
index 4d7df8eef12..301a5470f64 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -68,7 +68,9 @@ import Fill from '@site/static/usage/v7/input/fill/index.md';
 
 ## Helper & Error Text
 
-Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-input`. 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.
+Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-input`. This ensures errors are not shown before the user has a chance to enter data.
+
+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/v7/input/helper-error/index.md';
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index bfd0e16d1f6..2cba78b56c3 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -49,7 +49,9 @@ import Fill from '@site/static/usage/v7/textarea/fill/index.md';
 
 ## Helper & Error Text
 
-Helper and error text can be used inside of a textarea with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-textarea`. 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.
+Helper and error text can be used inside of a textarea with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-textarea`. This ensures errors are not shown before the user has a chance to enter data.
+
+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/v7/textarea/helper-error/index.md';
 
@@ -145,4 +147,4 @@ interface TextareaCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 1d64f225305e1b9b8e38b55248bb096fccc724eb Mon Sep 17 00:00:00 2001
From: ptmkenny <1451472+ptmkenny@users.noreply.github.com>
Date: Sat, 25 Mar 2023 00:17:37 +0900
Subject: [PATCH 274/469] docs(native): fix grammar and typos (#2806)

---
 docs/native.md                      | 6 +++---
 versioned_docs/version-v6/native.md | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/native.md b/docs/native.md
index f17ba591bf7..c863908c42f 100644
--- a/docs/native.md
+++ b/docs/native.md
@@ -24,13 +24,13 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
 <intro-end />
 
 
-Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install of the core packages and add them to your project with ease. Capacitor offers a wide range of features and capabilities that developers can use to access features like the file system, native location services, or the device camera. All of this is powered by a unified TypeScript API that handled platform differences automatically. 
+Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences.
 
-While the core features of Capacitor are free and open source, some enterprises might find them selves needing more features or custom third-party integrations. If you find yourself needing these additional features, checkout [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
+While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
 
 
 
 
 <NativeEnterpriseCard />
 
-> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) 
\ No newline at end of file
+> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/)
diff --git a/versioned_docs/version-v6/native.md b/versioned_docs/version-v6/native.md
index f17ba591bf7..fcc12b23411 100644
--- a/versioned_docs/version-v6/native.md
+++ b/versioned_docs/version-v6/native.md
@@ -24,13 +24,13 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
 <intro-end />
 
 
-Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install of the core packages and add them to your project with ease. Capacitor offers a wide range of features and capabilities that developers can use to access features like the file system, native location services, or the device camera. All of this is powered by a unified TypeScript API that handled platform differences automatically. 
+Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences. 
 
-While the core features of Capacitor are free and open source, some enterprises might find them selves needing more features or custom third-party integrations. If you find yourself needing these additional features, checkout [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
+While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
 
 
 
 
 <NativeEnterpriseCard />
 
-> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) 
\ No newline at end of file
+> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) 

From 95c4f23779e85c3903cbf7739989e07b1d22ed36 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 24 Mar 2023 11:32:09 -0400
Subject: [PATCH 275/469] docs: rxjs migration guide for v7 (#2852)

---
 docs/updating/7-0.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index a1c553999f4..eeba9579840 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -21,7 +21,13 @@ For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refe
 ### Angular
 
 1. Ionic 7 supports Angular 14+. 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 7:
+2. If your project is using rxjs, Ionic 7 requires a minimum rxjs version of 7.5.0:
+
+```shell
+npm install rxjs@7.5.0
+```
+
+3. Update to the latest version of Ionic 7:
 
 ```shell
 npm install @ionic/angular@next
@@ -90,7 +96,6 @@ iOS >=14
 
 1. `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
 
-
 ### Checkbox
 
 1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--checkbox-background` and `--checkbox-background-checked`, respectively.
@@ -133,7 +138,6 @@ iOS >=14
 
 1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
 
-
 ### Toggle
 
 1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--track-background` and `--track-background-checked`, respectively.
@@ -151,4 +155,3 @@ iOS >=14
 Be sure to look at the [Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require user action are listed on this page.
 
 If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).
-

From 3bd16bc620b471736c9f4ce90e2f3eae53781174 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 24 Mar 2023 13:33:02 -0400
Subject: [PATCH 276/469] docs(modal): playground example to prevent swipe to
 dismiss (#2820)

---
 docs/api/modal.md                             | 10 +++-
 .../angular/example_component_html.md         | 30 ++++++++++
 .../angular/example_component_ts.md           | 13 +++++
 .../prevent-swipe-to-close/demo.html          | 57 +++++++++++++++++++
 .../prevent-swipe-to-close/index.md           | 27 +++++++++
 .../prevent-swipe-to-close/javascript.md      | 39 +++++++++++++
 .../prevent-swipe-to-close/react.md           | 56 ++++++++++++++++++
 .../can-dismiss/prevent-swipe-to-close/vue.md | 47 +++++++++++++++
 .../angular/example_component_html.md         | 30 ++++++++++
 .../angular/example_component_ts.md           | 13 +++++
 .../prevent-swipe-to-close/demo.html          | 57 +++++++++++++++++++
 .../prevent-swipe-to-close/index.md           | 27 +++++++++
 .../prevent-swipe-to-close/javascript.md      | 39 +++++++++++++
 .../prevent-swipe-to-close/react.md           | 56 ++++++++++++++++++
 .../can-dismiss/prevent-swipe-to-close/vue.md | 47 +++++++++++++++
 versioned_docs/version-v6/api/modal.md        | 10 +++-
 16 files changed, 556 insertions(+), 2 deletions(-)
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
 create mode 100644 static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
 create mode 100644 static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 6e68846652e..81a90b9a91d 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -51,7 +51,7 @@ import ControllerExample from '@site/static/usage/v7/modal/controller/index.md';
 
 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.
+There are two different ways of using the `canDismiss` property: setting a boolean value or setting a callback function.
 
 :::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.
@@ -79,6 +79,14 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f
 
 <CanDismissFunctionExample />
 
+### Prevent swipe to close
+
+Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`.
+
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md';
+
+<CanDismissPreventSwipeToCloseExample />
+
 ## Types of modals
  
 ### Card Modal
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
new file mode 100644
index 00000000000..de1d6d041ea
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<div class="ion-page" #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]="page">
+      <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>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
new file mode 100644
index 00000000000..788b9a14c0f
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/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 {
+  async canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+}
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
new file mode 100644
index 00000000000..620cf48cb9d
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/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>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>To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.</p>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = (data, role) => role !== 'gesture';
+    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/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md
new file mode 100644
index 00000000000..1f24e318e8c
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/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';
+
+<Playground
+  version="6"
+  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/prevent-swipe-to-close/demo.html"
+  devicePreview
+  mode="ios"
+/>
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md
new file mode 100644
index 00000000000..e50e279364c
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/javascript.md
@@ -0,0 +1,39 @@
+```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 class="ion-padding">
+        <p>
+          To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it.
+        </p>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</div>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.canDismiss = (data, role) => role !== 'gesture';
+  modal.presentingElement = document.querySelector('.ion-page');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+</script>
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
new file mode 100644
index 00000000000..c63bd0d1503
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -0,0 +1,56 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } 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();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+
+  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>
+              To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.
+            </p>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
new file mode 100644
index 00000000000..afd25081c11
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -0,0 +1,47 @@
+```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="page?.$el">
+        <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>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+  import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
+  import { ref } from 'vue';
+
+  const page = ref(null);
+  const modal = ref(null);
+
+  function dismiss() {
+    modal.value.$el.dismiss();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
new file mode 100644
index 00000000000..de1d6d041ea
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<div class="ion-page" #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]="page">
+      <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>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
new file mode 100644
index 00000000000..788b9a14c0f
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/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 {
+  async canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+}
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
new file mode 100644
index 00000000000..300560bc234
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/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>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@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/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>To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.</p>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.canDismiss = (data, role) => role !== 'gesture';
+    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/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md
new file mode 100644
index 00000000000..a37ce212fc8
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/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';
+
+<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/prevent-swipe-to-close/demo.html"
+  devicePreview
+  mode="ios"
+/>
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md
new file mode 100644
index 00000000000..e50e279364c
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/javascript.md
@@ -0,0 +1,39 @@
+```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 class="ion-padding">
+        <p>
+          To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it.
+        </p>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</div>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.canDismiss = (data, role) => role !== 'gesture';
+  modal.presentingElement = document.querySelector('.ion-page');
+
+  function dismiss() {
+    modal.dismiss();
+  }
+</script>
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
new file mode 100644
index 00000000000..c63bd0d1503
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/react.md
@@ -0,0 +1,56 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } 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();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+
+  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>
+              To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+              it.
+            </p>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
new file mode 100644
index 00000000000..afd25081c11
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -0,0 +1,47 @@
+```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="page?.$el">
+        <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>
+            To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+            it.
+          </p>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+  import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/vue';
+  import { ref } from 'vue';
+
+  const page = ref(null);
+  const modal = ref(null);
+
+  function dismiss() {
+    modal.value.$el.dismiss();
+  }
+
+  async function canDismiss(data?: any, role?: string) {
+    return role !== 'gesture';
+  }
+</script>
+```
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
index 68d44332e4e..d669d1c0617 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.md
@@ -55,7 +55,7 @@ import ControllerExample from '@site/static/usage/v6/modal/controller/index.md';
 
 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.
+There are two different ways of using the `canDismiss` property: setting a boolean value or setting a callback function.
 
 :::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.
@@ -83,6 +83,14 @@ import CanDismissFunctionExample from '@site/static/usage/v6/modal/can-dismiss/f
 
 <CanDismissFunctionExample />
 
+### Prevent swipe to close
+
+Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`.
+
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/index.md';
+
+<CanDismissPreventSwipeToCloseExample />
+
 ## Types of modals
 
 ### Card Modal

From bb88f63d73473bdc9b7e9c91369aa3df08d41e6f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 27 Mar 2023 13:48:20 -0400
Subject: [PATCH 277/469] docs(react): update imports for swiper migration
 (#2851)

---
 docs/react/slides.md                      | 104 +++++++++-------------
 versioned_docs/version-v6/react/slides.md | 104 +++++++++-------------
 2 files changed, 88 insertions(+), 120 deletions(-)

diff --git a/docs/react/slides.md b/docs/react/slides.md
index 104226d47db..b8d88392314 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -39,7 +39,7 @@ npm install swiper@latest
 ```
 
 :::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.
+Developers using Create React App must use `react-scripts` v5.0.0+ with the latest version of Swiper.
 :::
 
 ## Swiping with Style
@@ -53,7 +53,7 @@ import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
+import 'swiper/css';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -68,10 +68,6 @@ export default Home;
 Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
-:::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:
@@ -92,7 +88,7 @@ import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.less';
+import 'swiper/less';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -110,7 +106,7 @@ import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.scss';
+import 'swiper/scss';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -125,14 +121,14 @@ export default Home;
 
 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`:
+These components are imported from `swiper/react`:
 
 ```tsx
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
+import 'swiper/css';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -151,10 +147,6 @@ const Home: React.FC = () => {
 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.
@@ -166,15 +158,15 @@ To begin, we need to import the modules and their corresponding CSS files from t
 ```tsx
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -193,24 +185,20 @@ const Home: React.FC = () => {
 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 { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -234,15 +222,15 @@ 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 { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -281,15 +269,15 @@ We can install the `IonicSlides` module by importing it from `@ionic/react` and
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -434,7 +422,7 @@ Accessing these properties can be tricky as you want to access the properties on
 
 ```tsx
 import React, { useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import { Swiper as SwiperInterface } from 'swiper';
 ...
 const Home: React.FC = () => {
@@ -477,9 +465,9 @@ If you are using effects such as Cube or Fade, you can install them just like we
 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, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
+import 'swiper/css';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -504,10 +492,10 @@ Next, we need to import the stylesheet associated with the effect:
 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, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
-import 'swiper/modules/effect-fade/effect-fade.min.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -526,20 +514,16 @@ const Home: React.FC = () => {
 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, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
-import 'swiper/modules/effect-fade/effect-fade.min.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md
index c78b701e9b7..b6cb227f408 100644
--- a/versioned_docs/version-v6/react/slides.md
+++ b/versioned_docs/version-v6/react/slides.md
@@ -35,7 +35,7 @@ npm install swiper@latest
 ```
 
 :::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.
+Developers using Create React App must use `react-scripts` v5.0.0+ with the latest version of Swiper.
 :::
 
 ## Swiping with Style
@@ -49,7 +49,7 @@ import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
+import 'swiper/css';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -64,10 +64,6 @@ export default Home;
 Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
 :::
 
-:::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:
@@ -88,7 +84,7 @@ import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.less';
+import 'swiper/less';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -106,7 +102,7 @@ import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.scss';
+import 'swiper/scss';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -121,14 +117,14 @@ export default Home;
 
 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`:
+These components are imported from `swiper/react`:
 
 ```tsx
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
+import 'swiper/css';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -147,10 +143,6 @@ const Home: React.FC = () => {
 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.
@@ -162,15 +154,15 @@ To begin, we need to import the modules and their corresponding CSS files from t
 ```tsx
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -189,24 +181,20 @@ const Home: React.FC = () => {
 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 { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -230,15 +218,15 @@ 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 { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -277,15 +265,15 @@ We can install the `IonicSlides` module by importing it from `@ionic/react` and
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 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 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -430,7 +418,7 @@ Accessing these properties can be tricky as you want to access the properties on
 
 ```tsx
 import React, { useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import { Swiper as SwiperInterface } from 'swiper';
 ...
 const Home: React.FC = () => {
@@ -473,9 +461,9 @@ If you are using effects such as Cube or Fade, you can install them just like we
 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, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
+import 'swiper/css';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -500,10 +488,10 @@ Next, we need to import the stylesheet associated with the effect:
 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, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
-import 'swiper/modules/effect-fade/effect-fade.min.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {
@@ -522,20 +510,16 @@ const Home: React.FC = () => {
 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, SwiperSlide } from 'swiper/react';
 
-import 'swiper/swiper.min.css';
-import 'swiper/modules/effect-fade/effect-fade.min.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
 import '@ionic/react/css/ionic-swiper.css';
 
 const Home: React.FC = () => {

From 2f6489333d4fb0ba4966003859f3bf9c205eab29 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 27 Mar 2023 12:52:28 -0500
Subject: [PATCH 278/469] docs(slides): fix typo in Angular migration guide
 (#2856)

---
 docs/angular/slides.md                      | 2 +-
 versioned_docs/version-v6/angular/slides.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index eb2586540a8..e9ffe1b23f8 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -90,7 +90,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li
 | `--scroll-bar-background`          | `--swiper-scrollbar-bg-color`               |
 | `--scroll-bar-background-active`   | `--swiper-scrollbar-drag-bg-color`          |
 
-For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See see <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
+For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
 
 ### Additional `ion-slides` Styles
 
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index 90310419958..1092d293082 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -88,7 +88,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li
 | `--scroll-bar-background`          | `--swiper-scrollbar-bg-color`               |
 | `--scroll-bar-background-active`   | `--swiper-scrollbar-drag-bg-color`          |
 
-For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See see <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
+For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
 
 ### Additional `ion-slides` Styles
 

From d9a33f0aec850ab1967f1d75b42a644e4328fe39 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 27 Mar 2023 13:16:35 -0700
Subject: [PATCH 279/469] docs(toast): remove hardware back button dismissal
 (#2854)

Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>
---
 docs/api/toast.md                                            | 4 ++++
 docs/developing/hardware-back-button.md                      | 2 +-
 versioned_docs/version-v6/api/toast.md                       | 4 ++++
 versioned_docs/version-v6/developing/hardware-back-button.md | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/api/toast.md b/docs/api/toast.md
index bf74e97cdd6..f99a9bfe92e 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -48,8 +48,12 @@ import ControllerExample from '@site/static/usage/v7/toast/presenting/controller
 
 ## Dismissing
 
+Toasts are intended to be subtle notifications and should not interrupt the user. As a result, user interaction should not be required to dismiss the toast.
+
 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.
 
+Pressing the hardware back button does not dismiss toasts since they are not supposed to interrupt the user.
+
 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/v7/toast/buttons/index.md';
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index ff50b2f7f1b..2f3271613dc 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -340,6 +340,6 @@ The table below lists all of the internal hardware back button event handlers th
 
 | 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`. |
+| Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
 | 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/api/toast.md b/versioned_docs/version-v6/api/toast.md
index b0915d8cf8c..f5fb5184c58 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -91,8 +91,12 @@ function Example() {
 
 ## Dismissing
 
+Toasts are intended to be subtle notifications and should not interrupt the user. As a result, user interaction should not be required to dismiss the toast.
+
 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.
 
+Pressing the hardware back button does not dismiss toasts since they are not supposed to interrupt the user.
+
 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';
diff --git a/versioned_docs/version-v6/developing/hardware-back-button.md b/versioned_docs/version-v6/developing/hardware-back-button.md
index ff50b2f7f1b..2f3271613dc 100644
--- a/versioned_docs/version-v6/developing/hardware-back-button.md
+++ b/versioned_docs/version-v6/developing/hardware-back-button.md
@@ -340,6 +340,6 @@ The table below lists all of the internal hardware back button event handlers th
 
 | 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`. |
+| Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
 | Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                                   |
 | Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                                    |

From a8df44b4c9c42b126b865ecf09edcddedc8cca68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Tue, 28 Mar 2023 22:24:10 +0900
Subject: [PATCH 280/469] =?UTF-8?q?feat(translate):=20remove=20'=E8=87=AA?=
 =?UTF-8?q?=E5=8B=95=E7=BF=BB=E8=A8=B3'=20from=20cache=20data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/build-translate/index.ts |    2 +-
 scripts/data/translated-api.json | 2688 +++++++++++++++---------------
 scripts/data/translated-cli.json |   86 +-
 3 files changed, 1388 insertions(+), 1388 deletions(-)

diff --git a/scripts/build-translate/index.ts b/scripts/build-translate/index.ts
index f704fda3c8e..cbd99433545 100644
--- a/scripts/build-translate/index.ts
+++ b/scripts/build-translate/index.ts
@@ -39,7 +39,7 @@ const apply = async () => {
 
               // キャッシュデータにあるか確認
               if (cacheTranslated.hasOwnProperty(translateText)) {
-                ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${cacheTranslated[translateText]}`;
+                ob[translateType.translateTargetKey] = cacheTranslated[translateText];
                 return;
               }
 
diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 345221ca004..364b8184327 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -21,7 +21,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing.\n\n自動翻訳: `true`の場合、アコーディオングループ内のすべてのアコーディオンが拡大・縮小時にアニメーションを行います。",
+          "docs": "`true`の場合、アコーディオングループ内のすべてのアコーディオンが拡大・縮小時にアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -38,7 +38,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion group cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオングループと対話することができません。",
+          "docs": "`true`の場合、アコーディオングループと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -55,7 +55,7 @@
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": false,
-          "docs": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.\n\n自動翻訳: 各アコーディオンの拡張動作を記述します。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
+          "docs": "各アコーディオンの拡張動作を記述します。指定可能な値は `\"compact\"` と `\"inset\"` です。デフォルトは `\"compact\"` です。",
           "docsTags": [],
           "default": "'compact'",
           "values": [
@@ -77,7 +77,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -98,7 +98,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time.\n\n自動翻訳: `true`の場合、アコーディオングループは複数のアコーディオンコンポーネントを同時に展開することができます。",
+          "docs": "`true`の場合、アコーディオングループは複数のアコーディオンコンポーネントを同時に展開することができます。",
           "docsTags": [],
           "values": [
             {
@@ -117,7 +117,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity.\n\n自動翻訳: `true`の場合、アコーディオングループはインタラクティブに操作できないが、不透明度は変更されない。",
+          "docs": "`true`の場合、アコーディオングループはインタラクティブに操作できないが、不透明度は変更されない。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -134,7 +134,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the accordion group.\n\n自動翻訳: アコーディオングループの値です。",
+          "docs": "アコーディオングループの値です。",
           "docsTags": [],
           "values": [
             {
@@ -162,7 +162,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行されます。",
+          "docs": "valueプロパティが変更されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -219,7 +219,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion cannot be interacted with.\n\n自動翻訳: `true`の場合、アコーディオンは対話することができません。",
+          "docs": "`true`の場合、アコーディオンは対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -236,7 +236,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -257,7 +257,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity.\n\n自動翻訳: `true`の場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。",
+          "docs": "`true`の場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -274,7 +274,7 @@
           "mutable": false,
           "attr": "toggle-icon",
           "reflectToAttr": false,
-          "docs": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed.\n\n自動翻訳: 使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。",
+          "docs": "使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。",
           "docsTags": [],
           "default": "chevronDown",
           "values": [
@@ -291,7 +291,7 @@
           "mutable": false,
           "attr": "toggle-icon-slot",
           "reflectToAttr": false,
-          "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.\n\n自動翻訳: トグルアイコンを配置する `ion-item` の内側のslot。デフォルトは `'end'` です。",
+          "docs": "トグルアイコンを配置する `ion-item` の内側のslot。デフォルトは `'end'` です。",
           "docsTags": [],
           "default": "'end'",
           "values": [
@@ -313,7 +313,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the accordion. Defaults to an autogenerated\nvalue.\n\n自動翻訳: アコーディオンの値です。デフォルトは自動生成された値です。",
+          "docs": "アコーディオンの値です。デフォルトは自動生成された値です。",
           "docsTags": [],
           "default": "`ion-accordion-${accordionIds++}`",
           "values": [
@@ -332,25 +332,25 @@
       "slots": [
         {
           "name": "content",
-          "docs": "Content is placed below the header and is\nshown or hidden based on expanded state.\n\n自動翻訳: コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。"
+          "docs": "コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。"
         },
         {
           "name": "header",
-          "docs": "Content is placed at the top and is used to\nexpand or collapse the accordion item.\n\n自動翻訳: コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。"
+          "docs": "コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。"
         }
       ],
       "parts": [
         {
           "name": "content",
-          "docs": "The wrapper element for the content slot.\n\n自動翻訳: content slotのラッパー要素。"
+          "docs": "content slotのラッパー要素。"
         },
         {
           "name": "expanded",
-          "docs": "The expanded element. Can be used in combination\nwith the `header` and `content` parts (i.e. `::part(header expanded)`).\n\n自動翻訳: 拡張された要素です。ヘッダ`とコンテンツ`の部分と組み合わせて使用することができます（例：`::part(header expanded)`）。"
+          "docs": "拡張された要素です。ヘッダ`とコンテンツ`の部分と組み合わせて使用することができます（例：`::part(header expanded)`）。"
         },
         {
           "name": "header",
-          "docs": "The wrapper element for the header slot.\n\n自動翻訳: header slotのラッパーの要素です。"
+          "docs": "header slotのラッパーの要素です。"
         }
       ],
       "dependents": [],
@@ -382,7 +382,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will animate.\n\n自動翻訳: `true`の場合、アクションシートはアニメーションを行います。",
+          "docs": "`true`の場合、アクションシートはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -399,7 +399,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとアクションシートが解除されます。",
+          "docs": "`true`の場合、バックドロップがクリックされるとアクションシートが解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -415,7 +415,7 @@
           "type": "(string | ActionSheetButton<any>)[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An array of buttons for the action sheet.\n\n自動翻訳: アクションシートのボタンの配列です。",
+          "docs": "アクションシートのボタンの配列です。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -435,7 +435,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
+          "docs": "カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -456,7 +456,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the action sheet is presented.\n\n自動翻訳: アクションシートの提示時に使用するアニメーションです。",
+          "docs": "アクションシートの提示時に使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -475,7 +475,7 @@
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
-          "docs": "Title for the action sheet.\n\n自動翻訳: アクションシートのタイトルです。",
+          "docs": "アクションシートのタイトルです。",
           "docsTags": [],
           "values": [
             {
@@ -493,7 +493,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the action sheet.\n\n自動翻訳: アクションシートに渡す追加属性。",
+          "docs": "アクションシートに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -512,7 +512,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+          "docs": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -528,7 +528,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the action sheet is dismissed.\n\n自動翻訳: アクションシートが解除されたときに使用するアニメーションです。",
+          "docs": "アクションシートが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -547,7 +547,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -568,7 +568,7 @@
           "mutable": false,
           "attr": "sub-header",
           "reflectToAttr": false,
-          "docs": "Subtitle for the action sheet.\n\n自動翻訳: アクションシートのサブタイトルです。",
+          "docs": "アクションシートのサブタイトルです。",
           "docsTags": [],
           "values": [
             {
@@ -587,7 +587,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アクションシートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、アクションシートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -608,7 +608,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the action sheet overlay after it has been presented.\n\n自動翻訳: アクションシートのオーバーレイが提示された後、それを解除します。",
+          "docs": "アクションシートのオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -628,7 +628,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the action sheet did dismiss.\n\n自動翻訳: アクションシートが解散したときに解決するPromiseを返します。",
+          "docs": "アクションシートが解散したときに解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -639,7 +639,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the action sheet will dismiss.\n\n自動翻訳: アクションシートが解散するタイミングを解決するPromiseを返します。",
+          "docs": "アクションシートが解散するタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -650,7 +650,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the action sheet overlay after it has been created.\n\n自動翻訳: アクションシートのオーバーレイを作成後に提示します。",
+          "docs": "アクションシートのオーバーレイを作成後に提示します。",
           "docsTags": []
         }
       ],
@@ -661,7 +661,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発行されます。",
+          "docs": "アラートが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -670,7 +670,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発行されます。",
+          "docs": "アラートが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -679,7 +679,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発行されます。",
+          "docs": "アラートが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -688,7 +688,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発行されます。",
+          "docs": "アラートが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -697,117 +697,117 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
+          "docs": "背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the action sheet group\n\n自動翻訳: アクションシートグループの背景"
+          "docs": "アクションシートグループの背景"
         },
         {
           "name": "--button-background",
           "annotation": "prop",
-          "docs": "Background of the action sheet button\n\n自動翻訳: アクションシートボタンの背景"
+          "docs": "アクションシートボタンの背景"
         },
         {
           "name": "--button-background-activated",
           "annotation": "prop",
-          "docs": "Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: アクションシートボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
+          "docs": "アクションシートボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--button-background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the action sheet button background when pressed\n\n自動翻訳: アクションシートボタンが押されたときの背景の不透明度"
+          "docs": "アクションシートボタンが押されたときの背景の不透明度"
         },
         {
           "name": "--button-background-focused",
           "annotation": "prop",
-          "docs": "Background of the action sheet button when tabbed to\n\n自動翻訳: にタブしたときのアクションシートボタンの背景。"
+          "docs": "にタブしたときのアクションシートボタンの背景。"
         },
         {
           "name": "--button-background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the action sheet button background when tabbed to\n\n自動翻訳: にタブしたときのアクションシートボタンの背景の不透明度。"
+          "docs": "にタブしたときのアクションシートボタンの背景の不透明度。"
         },
         {
           "name": "--button-background-hover",
           "annotation": "prop",
-          "docs": "Background of the action sheet button on hover\n\n自動翻訳: ホバー時のアクションシートボタンの背景"
+          "docs": "ホバー時のアクションシートボタンの背景"
         },
         {
           "name": "--button-background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the action sheet button background on hover\n\n自動翻訳: ホバー時のアクションシートボタンの背景の不透明度"
+          "docs": "ホバー時のアクションシートボタンの背景の不透明度"
         },
         {
           "name": "--button-background-selected",
           "annotation": "prop",
-          "docs": "Background of the selected action sheet button\n\n自動翻訳: 選択したアクションシートボタンの背景"
+          "docs": "選択したアクションシートボタンの背景"
         },
         {
           "name": "--button-background-selected-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the selected action sheet button background\n\n自動翻訳: 選択されたアクションシートボタンの背景の不透明度"
+          "docs": "選択されたアクションシートボタンの背景の不透明度"
         },
         {
           "name": "--button-color",
           "annotation": "prop",
-          "docs": "Color of the action sheet button\n\n自動翻訳: アクションシートボタンの色"
+          "docs": "アクションシートボタンの色"
         },
         {
           "name": "--button-color-activated",
           "annotation": "prop",
-          "docs": "Color of the action sheet button when pressed\n\n自動翻訳: アクションシートボタンが押されたときの色"
+          "docs": "アクションシートボタンが押されたときの色"
         },
         {
           "name": "--button-color-focused",
           "annotation": "prop",
-          "docs": "Color of the action sheet button when tabbed to\n\n自動翻訳: にタブで移動したときのアクションシートのボタンの色。"
+          "docs": "にタブで移動したときのアクションシートのボタンの色。"
         },
         {
           "name": "--button-color-hover",
           "annotation": "prop",
-          "docs": "Color of the action sheet button on hover\n\n自動翻訳: ホバー時のアクションシートボタンの色"
+          "docs": "ホバー時のアクションシートボタンの色"
         },
         {
           "name": "--button-color-selected",
           "annotation": "prop",
-          "docs": "Color of the selected action sheet button\n\n自動翻訳: 選択されたアクションシートのボタンの色"
+          "docs": "選択されたアクションシートのボタンの色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the action sheet text\n\n自動翻訳: アクションシートテキストの色"
+          "docs": "アクションシートテキストの色"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "height of the action sheet\n\n自動翻訳: アクションシートの高さ"
+          "docs": "アクションシートの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the action sheet\n\n自動翻訳: アクションシートの最大の高さ"
+          "docs": "アクションシートの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the action sheet\n\n自動翻訳: アクションシートの最大幅"
+          "docs": "アクションシートの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the action sheet\n\n自動翻訳: アクションシートの最小高さ"
+          "docs": "アクションシートの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the action sheet\n\n自動翻訳: アクションシートの最小幅"
+          "docs": "アクションシートの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the action sheet\n\n自動翻訳: アクションシートの横幅"
+          "docs": "アクションシートの横幅"
         }
       ],
       "slots": [],
@@ -850,7 +850,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will animate.\n\n自動翻訳: `true`の場合、アラートはアニメーションで表示されます。",
+          "docs": "`true`の場合、アラートはアニメーションで表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -867,7 +867,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとアラートが解除される。",
+          "docs": "`true`の場合、バックドロップがクリックされるとアラートが解除される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -883,7 +883,7 @@
           "type": "(string | AlertButton)[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of buttons to be added to the alert.\n\n自動翻訳: アラートに追加されるボタンの配列。",
+          "docs": "アラートに追加されるボタンの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -903,7 +903,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
+          "docs": "カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -924,7 +924,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the alert is presented.\n\n自動翻訳: アラート提示時に使用するアニメーションです。",
+          "docs": "アラート提示時に使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -943,7 +943,7 @@
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
-          "docs": "The main title in the heading of the alert.\n\n自動翻訳: アラートの見出しにあるメインタイトルです。",
+          "docs": "アラートの見出しにあるメインタイトルです。",
           "docsTags": [],
           "values": [
             {
@@ -961,7 +961,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the alert.\n\n自動翻訳: アラートに渡す追加属性。",
+          "docs": "アラートに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -979,7 +979,7 @@
           "type": "AlertInput[]",
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "Array of input to show in the alert.\n\n自動翻訳: アラートに表示するInputの配列。",
+          "docs": "アラートに表示するInputの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -996,7 +996,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+          "docs": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1012,7 +1012,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the alert is dismissed.\n\n自動翻訳: アラートが解除されたときに使用するアニメーション。",
+          "docs": "アラートが解除されたときに使用するアニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -1031,7 +1031,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "values": [
             {
@@ -1053,7 +1053,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1074,7 +1074,7 @@
           "mutable": false,
           "attr": "sub-header",
           "reflectToAttr": false,
-          "docs": "The subtitle in the heading of the alert. Displayed under the title.\n\n自動翻訳: アラートの見出しにあるサブタイトルです。タイトルの下に表示されます。",
+          "docs": "アラートの見出しにあるサブタイトルです。タイトルの下に表示されます。",
           "docsTags": [],
           "values": [
             {
@@ -1093,7 +1093,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、アラートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、アラートは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1114,7 +1114,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the alert overlay after it has been presented.\n\n自動翻訳: アラートオーバーレイが表示された後、解除します。",
+          "docs": "アラートオーバーレイが表示された後、解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -1134,7 +1134,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the alert did dismiss.\n\n自動翻訳: アラートが解除されたことを解決するPromiseを返します。",
+          "docs": "アラートが解除されたことを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -1145,7 +1145,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the alert will dismiss.\n\n自動翻訳: アラートが解除されるタイミングを解決するPromiseを返します。",
+          "docs": "アラートが解除されるタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -1156,7 +1156,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the alert overlay after it has been created.\n\n自動翻訳: アラートオーバーレイを作成した後に提示します。",
+          "docs": "アラートオーバーレイを作成した後に提示します。",
           "docsTags": []
         }
       ],
@@ -1167,7 +1167,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has dismissed.\n\n自動翻訳: アラートが解除された後に発行されます。",
+          "docs": "アラートが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -1176,7 +1176,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has presented.\n\n自動翻訳: アラートが提示された後に発行されます。",
+          "docs": "アラートが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -1185,7 +1185,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has dismissed.\n\n自動翻訳: アラートが解除される前に発行されます。",
+          "docs": "アラートが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -1194,7 +1194,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has presented.\n\n自動翻訳: アラートが提示される前に発行されます。",
+          "docs": "アラートが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -1210,42 +1210,42 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
+          "docs": "背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the alert\n\n自動翻訳: 注意喚起の背景"
+          "docs": "注意喚起の背景"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the alert\n\n自動翻訳: アラートの高さ"
+          "docs": "アラートの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the alert\n\n自動翻訳: アラートの最大の高さ"
+          "docs": "アラートの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the alert\n\n自動翻訳: アラートの最大幅"
+          "docs": "アラートの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the alert\n\n自動翻訳: アラートの最小の高さ"
+          "docs": "アラートの最小の高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the alert\n\n自動翻訳: アラートの最小幅"
+          "docs": "アラートの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the alert\n\n自動翻訳: アラートの幅"
+          "docs": "アラートの幅"
         }
       ],
       "slots": [],
@@ -1300,7 +1300,7 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the avatar and inner image\n\n自動翻訳: アバターとインナーイメージの境界半径"
+          "docs": "アバターとインナーイメージの境界半径"
         }
       ],
       "slots": [],
@@ -1340,7 +1340,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -1395,7 +1395,7 @@
           "mutable": true,
           "attr": "default-href",
           "reflectToAttr": false,
-          "docs": "The url to navigate back to by default when there is no history.\n\n自動翻訳: 履歴がない場合に、デフォルトで戻るためのURL。",
+          "docs": "履歴がない場合に、デフォルトで戻るためのURL。",
           "docsTags": [],
           "values": [
             {
@@ -1414,7 +1414,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができません。",
+          "docs": "`true`の場合、ユーザはボタンと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1431,7 +1431,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button.\n\n自動翻訳: 戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定します。",
+          "docs": "戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -1453,7 +1453,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1473,7 +1473,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page.\n\n自動翻訳: ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。",
+          "docs": "ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -1492,7 +1492,7 @@
           "mutable": false,
           "attr": "text",
           "reflectToAttr": false,
-          "docs": "The text to display in the back button.\n\n自動翻訳: バックボタンに表示するテキストです。",
+          "docs": "バックボタンに表示するテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -1514,7 +1514,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
+          "docs": "ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -1542,177 +1542,177 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the button\n\n自動翻訳: ボタンの背景"
+          "docs": "ボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景"
+          "docs": "タブキーでフォーカスしたときのボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度"
+          "docs": "タブキーでフォーカスしたときのボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the button on hover\n\n自動翻訳: ホバー時のボタンの背景"
+          "docs": "ホバー時のボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background on hover\n\n自動翻訳: ホバー時の背景の不透明度"
+          "docs": "ホバー時の背景の不透明度"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the button\n\n自動翻訳: ボタンの境界半径"
+          "docs": "ボタンの境界半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the button\n\n自動翻訳: ボタンの文字色"
+          "docs": "ボタンの文字色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの文字色"
+          "docs": "タブキーでフォーカスしたときのボタンの文字色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the button on hover\n\n自動翻訳: ホバー時のボタンの文字色"
+          "docs": "ホバー時のボタンの文字色"
         },
         {
           "name": "--icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the button icon\n\n自動翻訳: ボタンアイコンのFont Size"
+          "docs": "ボタンアイコンのFont Size"
         },
         {
           "name": "--icon-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the button icon\n\n自動翻訳: ボタンアイコンのFont Weight"
+          "docs": "ボタンアイコンのFont Weight"
         },
         {
           "name": "--icon-margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the button icon\n\n自動翻訳: ボタンアイコンのBottom Margin"
+          "docs": "ボタンアイコンのBottom Margin"
         },
         {
           "name": "--icon-margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin"
+          "docs": "ボタンアイコンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin"
         },
         {
           "name": "--icon-margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin"
+          "docs": "ボタンアイコンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin"
         },
         {
           "name": "--icon-margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the button icon\n\n自動翻訳: ボタンアイコンのTop Margin"
+          "docs": "ボタンアイコンのTop Margin"
         },
         {
           "name": "--icon-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button icon\n\n自動翻訳: ボタンアイコンのBottom Padding"
+          "docs": "ボタンアイコンのBottom Padding"
         },
         {
           "name": "--icon-padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
+          "docs": "ボタンアイコンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
         },
         {
           "name": "--icon-padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon\n\n自動翻訳: ボタンアイコンの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。"
+          "docs": "ボタンアイコンの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。"
         },
         {
           "name": "--icon-padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button icon\n\n自動翻訳: ボタンアイコンのTop Padding"
+          "docs": "ボタンアイコンのTop Padding"
         },
         {
           "name": "--margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the button\n\n自動翻訳: ボタンのBottom Margin"
+          "docs": "ボタンのBottom Margin"
         },
         {
           "name": "--margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin"
+          "docs": "ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin"
         },
         {
           "name": "--margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin"
+          "docs": "ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin"
         },
         {
           "name": "--margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the button\n\n自動翻訳: ボタンのTop Margin"
+          "docs": "ボタンのTop Margin"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the button\n\n自動翻訳: ボタンの最小高さ"
+          "docs": "ボタンの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the button\n\n自動翻訳: ボタンの最小幅"
+          "docs": "ボタンの最小幅"
         },
         {
           "name": "--opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button\n\n自動翻訳: ボタンの不透明度"
+          "docs": "ボタンの不透明度"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
+          "docs": "ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
+          "docs": "ボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
+          "docs": "ボタンリプルエフェクトの色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the button\n\n自動翻訳: ボタンの遷移"
+          "docs": "ボタンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "icon",
-          "docs": "The back button icon (uses ion-icon).\n\n自動翻訳: 戻るボタンのアイコン（ion-iconを使用）。"
+          "docs": "戻るボタンのアイコン（ion-iconを使用）。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。"
+          "docs": "すべての子要素を包むネイティブ HTML ボタン要素。"
         },
         {
           "name": "text",
-          "docs": "The back button text.\n\n自動翻訳: 戻るボタンのテキストです。"
+          "docs": "戻るボタンのテキストです。"
         }
       ],
       "dependents": [],
@@ -1741,7 +1741,7 @@
           "mutable": false,
           "attr": "stop-propagation",
           "reflectToAttr": false,
-          "docs": "If `true`, the backdrop will stop propagation on tap.\n\n自動翻訳: `true`の場合、バックドロップはタップ時に伝搬を停止します。",
+          "docs": "`true`の場合、バックドロップはタップ時に伝搬を停止します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1758,7 +1758,7 @@
           "mutable": false,
           "attr": "tappable",
           "reflectToAttr": false,
-          "docs": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.\n\n自動翻訳: `true`の場合、背景をクリックすることができ、`ionBackdropTap`イベントを発生させます。",
+          "docs": "`true`の場合、背景をクリックすることができ、`ionBackdropTap`イベントを発生させます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1775,7 +1775,7 @@
           "mutable": false,
           "attr": "visible",
           "reflectToAttr": false,
-          "docs": "If `true`, the backdrop will be visible.\n\n自動翻訳: `true`の場合、バックドロップが表示されます。",
+          "docs": "`true`の場合、バックドロップが表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -1795,7 +1795,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the backdrop is tapped.\n\n自動翻訳: バックドロップがタップされたときに発行されます。",
+          "docs": "バックドロップがタップされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -1862,7 +1862,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -1917,7 +1917,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -1940,32 +1940,32 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the badge\n\n自動翻訳: バッジの背景"
+          "docs": "バッジの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the badge\n\n自動翻訳: バッジの文字色"
+          "docs": "バッジの文字色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the badge\n\n自動翻訳: バッジのBottom Padding"
+          "docs": "バッジのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge\n\n自動翻訳: バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the badge\n\n自動翻訳: バッジのTop Padding"
+          "docs": "バッジのTop Padding"
         }
       ],
       "slots": [],
@@ -2005,7 +2005,7 @@
           "mutable": false,
           "attr": "active",
           "reflectToAttr": false,
-          "docs": "If `true`, the breadcrumb will take on a different look to show that\nit is the currently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any.\n\n自動翻訳: `true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。",
+          "docs": "`true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2022,7 +2022,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2077,7 +2077,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the breadcrumb.\n\n自動翻訳: `true`の場合、ユーザーはパンくずと対話することができません。",
+          "docs": "`true`の場合、ユーザーはパンくずと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2094,7 +2094,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+          "docs": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -2113,7 +2113,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -2132,7 +2132,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2153,7 +2153,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -2171,7 +2171,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -2190,7 +2190,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -2216,7 +2216,7 @@
           "mutable": false,
           "attr": "separator",
           "reflectToAttr": false,
-          "docs": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last.\n\n自動翻訳: trueの場合、このパンくずと次のパンくずの間にセパレータを表示します。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
+          "docs": "trueの場合、このパンくずと次のパンくずの間にセパレータを表示します。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。",
           "docsTags": [],
           "values": [
             {
@@ -2235,7 +2235,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -2257,7 +2257,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the breadcrumb loses focus.\n\n自動翻訳: パンくずのフォーカスが外れたときに発行されます。",
+          "docs": "パンくずのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -2266,7 +2266,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the breadcrumb has focus.\n\n自動翻訳: パンくずがフォーカスされたときに発行されます。",
+          "docs": "パンくずがフォーカスされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -2275,42 +2275,42 @@
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background color of the breadcrumb when focused\n\n自動翻訳: フォーカス時のパンくずの背景色"
+          "docs": "フォーカス時のパンくずの背景色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the breadcrumb\n\n自動翻訳: パンくずの文字色"
+          "docs": "パンくずの文字色"
         },
         {
           "name": "--color-active",
           "annotation": "prop",
-          "docs": "Text color of the active breadcrumb\n\n自動翻訳: アクティブなパンくずのテキスト色"
+          "docs": "アクティブなパンくずのテキスト色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the breadcrumb when focused\n\n自動翻訳: フォーカスされたときのパンくずのテキスト色"
+          "docs": "フォーカスされたときのパンくずのテキスト色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the breadcrumb on hover\n\n自動翻訳: ホバー時のパンくずのテキスト色"
+          "docs": "ホバー時のパンくずのテキスト色"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "collapsed-indicator",
-          "docs": "The indicator element that shows the breadcrumbs are collapsed.\n\n自動翻訳: パンくずが折りたたまれていることを示すインジケーター要素です。"
+          "docs": "パンくずが折りたたまれていることを示すインジケーター要素です。"
         },
         {
           "name": "native",
-          "docs": "The native HTML anchor or div element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブHTMLのアンカーまたはdiv要素です。"
+          "docs": "すべての子要素を包むネイティブHTMLのアンカーまたはdiv要素です。"
         },
         {
           "name": "separator",
-          "docs": "The separator element between each breadcrumb.\n\n自動翻訳: 各パンくずの間のセパレータ要素です。"
+          "docs": "各パンくずの間のセパレータ要素です。"
         }
       ],
       "dependents": [],
@@ -2342,7 +2342,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2397,7 +2397,7 @@
           "mutable": false,
           "attr": "items-after-collapse",
           "reflectToAttr": false,
-          "docs": "The number of breadcrumbs to show after the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.\n\n自動翻訳: 折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
+          "docs": "折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -2414,7 +2414,7 @@
           "mutable": false,
           "attr": "items-before-collapse",
           "reflectToAttr": false,
-          "docs": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed.\n\n自動翻訳: 折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
+          "docs": "折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -2431,7 +2431,7 @@
           "mutable": false,
           "attr": "max-items",
           "reflectToAttr": false,
-          "docs": "The maximum number of breadcrumbs to show before collapsing.\n\n自動翻訳: 折りたたむ前に表示するパンくずの最大数を指定します。",
+          "docs": "折りたたむ前に表示するパンくずの最大数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -2450,7 +2450,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2474,7 +2474,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the collapsed indicator is clicked on.\n\n自動翻訳: 折りたたみインジケータがクリックされたときに発します。",
+          "docs": "折りたたみインジケータがクリックされたときに発します。",
           "docsTags": []
         }
       ],
@@ -2531,7 +2531,7 @@
           "mutable": true,
           "attr": "button-type",
           "reflectToAttr": false,
-          "docs": "The type of button.\n\n自動翻訳: ボタンの種類です。",
+          "docs": "ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -2548,7 +2548,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -2603,7 +2603,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができません。",
+          "docs": "`true`の場合、ユーザはボタンと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2620,7 +2620,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+          "docs": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -2639,7 +2639,7 @@
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": true,
-          "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.\n\n自動翻訳: 全角のボタンなら`\"block\"`、角が四角く左右のボーダーがない全角のボタンなら`\"full\"`に設定します。",
+          "docs": "全角のボタンなら`\"block\"`、角が四角く左右のボーダーがない全角のボタンなら`\"full\"`に設定します。",
           "docsTags": [],
           "values": [
             {
@@ -2663,7 +2663,7 @@
           "mutable": true,
           "attr": "fill",
           "reflectToAttr": true,
-          "docs": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.\n\n自動翻訳: フラットなボタンに似た透明なボタンには `\"clear\"` を、ボーダーのある透明なボタンには `\"outline\"` を、背景を塗りつぶしたボタンには `\"solid\"` を設定します。デフォルトの塗りつぶしは `\"solid\"` です。ただし、ツールバーの内側では `\"clear\"` となります。",
+          "docs": "フラットなボタンに似た透明なボタンには `\"clear\"` を、ボーダーのある透明なボタンには `\"outline\"` を、背景を塗りつぶしたボタンには `\"solid\"` を設定します。デフォルトの塗りつぶしは `\"solid\"` です。ただし、ツールバーの内側では `\"clear\"` となります。",
           "docsTags": [],
           "values": [
             {
@@ -2695,7 +2695,7 @@
           "mutable": false,
           "attr": "form",
           "reflectToAttr": false,
-          "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.\n\n自動翻訳: HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。",
+          "docs": "HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。",
           "docsTags": [],
           "values": [
             {
@@ -2717,7 +2717,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -2736,7 +2736,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -2757,7 +2757,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -2775,7 +2775,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -2794,7 +2794,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -2820,7 +2820,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": true,
-          "docs": "Set to `\"round\"` for a button with more rounded corners.\n\n自動翻訳: round\"` に設定すると、より角が丸いボタンになります。",
+          "docs": "round\"` に設定すると、より角が丸いボタンになります。",
           "docsTags": [],
           "values": [
             {
@@ -2840,7 +2840,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": true,
-          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.\n\n自動翻訳: ボタンの高さとPaddingが少ない場合は `\"small\"` に、ボタンの高さとPaddingがデフォルトの場合は `\"default\"` に、ボタンの高さとPaddingが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
+          "docs": "ボタンの高さとPaddingが少ない場合は `\"small\"` に、ボタンの高さとPaddingがデフォルトの場合は `\"default\"` に、ボタンの高さとPaddingが多い場合は `\"large\"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `\"small\"` になっています。アイテムの内部でサイズを `\"default\"` に設定すると、標準サイズのボタンになります。",
           "docsTags": [],
           "values": [
             {
@@ -2868,7 +2868,7 @@
           "mutable": false,
           "attr": "strong",
           "reflectToAttr": false,
-          "docs": "If `true`, activates a button with a heavier font weight.\n\n自動翻訳: `true`の場合、より重いFont Weightを持つボタンをアクティブにします。",
+          "docs": "`true`の場合、より重いFont Weightを持つボタンをアクティブにします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -2885,7 +2885,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -2904,7 +2904,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
+          "docs": "ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -2933,7 +2933,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発行されます。",
+          "docs": "ボタンのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -2942,7 +2942,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発行されます。",
+          "docs": "ボタンにフォーカスが当たっているときに発行されます。",
           "docsTags": []
         }
       ],
@@ -2951,141 +2951,141 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the button\n\n自動翻訳: ボタンの背景"
+          "docs": "ボタンの背景"
         },
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
+          "docs": "ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button when pressed\n\n自動翻訳: ボタンが押されたときの不透明度"
+          "docs": "ボタンが押されたときの不透明度"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景"
+          "docs": "タブキーでフォーカスしたときのボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの不透明度"
+          "docs": "タブキーでフォーカスしたときのボタンの不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the button on hover\n\n自動翻訳: ホバー時のボタンの背景"
+          "docs": "ホバー時のボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background on hover\n\n自動翻訳: ホバー時の背景の不透明度"
+          "docs": "ホバー時の背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the button\n\n自動翻訳: ボタンのボーダーカラー"
+          "docs": "ボタンのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the button\n\n自動翻訳: ボタンの境界半径"
+          "docs": "ボタンの境界半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the button\n\n自動翻訳: ボタンのボーダースタイル"
+          "docs": "ボタンのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the button\n\n自動翻訳: ボタンのボーダー幅"
+          "docs": "ボタンのボーダー幅"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the button\n\n自動翻訳: ボタンのボックスシャドウ"
+          "docs": "ボタンのボックスシャドウ"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the button\n\n自動翻訳: ボタンの文字色"
+          "docs": "ボタンの文字色"
         },
         {
           "name": "--color-activated",
           "annotation": "prop",
-          "docs": "Text color of the button when pressed\n\n自動翻訳: ボタンが押されたときの文字色"
+          "docs": "ボタンが押されたときの文字色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの文字色"
+          "docs": "タブキーでフォーカスしたときのボタンの文字色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the button when hover\n\n自動翻訳: ホバー時のボタンの文字色"
+          "docs": "ホバー時のボタンの文字色"
         },
         {
           "name": "--opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button\n\n自動翻訳: ボタンの不透明度"
+          "docs": "ボタンの不透明度"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
+          "docs": "ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
+          "docs": "ボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
+          "docs": "ボタンリプルエフェクトの色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the button\n\n自動翻訳: ボタンの遷移"
+          "docs": "ボタンの遷移"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
+          "docs": "slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the button text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。"
+          "docs": "コンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。"
         },
         {
           "name": "icon-only",
-          "docs": "Should be used on an icon in a button that has no text.\n\n自動翻訳: テキストを持たないボタン内のアイコンに対して使用されるべきです。"
+          "docs": "テキストを持たないボタン内のアイコンに対して使用されるべきです。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the button text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。"
+          "docs": "コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button or anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
+          "docs": "すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
         }
       ],
       "dependents": [
@@ -3117,7 +3117,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` modeにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
+          "docs": "trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` modeにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3164,7 +3164,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3209,7 +3209,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3264,7 +3264,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3285,7 +3285,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、カードヘッダは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、カードヘッダは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3326,7 +3326,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3381,7 +3381,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3404,7 +3404,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the card subtitle\n\n自動翻訳: カードサブタイトルの色"
+          "docs": "カードサブタイトルの色"
         }
       ],
       "slots": [],
@@ -3432,7 +3432,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3487,7 +3487,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3510,7 +3510,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the card title\n\n自動翻訳: カードタイトルの色"
+          "docs": "カードタイトルの色"
         }
       ],
       "slots": [],
@@ -3542,7 +3542,7 @@
           "mutable": false,
           "attr": "button",
           "reflectToAttr": false,
-          "docs": "If `true`, a button tag will be rendered and the card will be tappable.\n\n自動翻訳: `true`の場合、ボタンタグがレンダリングされ、カードはタップ可能になる。",
+          "docs": "`true`の場合、ボタンタグがレンダリングされ、カードはタップ可能になる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3559,7 +3559,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3614,7 +3614,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the card.\n\n自動翻訳: `true`の場合、ユーザはカードと対話することができません。",
+          "docs": "`true`の場合、ユーザはカードと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3631,7 +3631,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+          "docs": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -3650,7 +3650,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -3669,7 +3669,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3690,7 +3690,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -3708,7 +3708,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -3727,7 +3727,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -3753,7 +3753,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -3772,7 +3772,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.\n\n自動翻訳: ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。",
+          "docs": "ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -3800,19 +3800,19 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the card\n\n自動翻訳: カードの背景"
+          "docs": "カードの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the card\n\n自動翻訳: カードの色"
+          "docs": "カードの色"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button, anchor, or div element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。"
+          "docs": "すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。"
         }
       ],
       "dependents": [],
@@ -3852,7 +3852,7 @@
           "mutable": true,
           "attr": "checked",
           "reflectToAttr": false,
-          "docs": "If `true`, the checkbox is selected.\n\n自動翻訳: `true`の場合、チェックボックスが選択される。",
+          "docs": "`true`の場合、チェックボックスが選択される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3869,7 +3869,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -3924,7 +3924,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the checkbox.\n\n自動翻訳: `true`の場合、ユーザはチェックボックスと対話することができません。",
+          "docs": "`true`の場合、ユーザはチェックボックスと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3941,7 +3941,7 @@
           "mutable": true,
           "attr": "indeterminate",
           "reflectToAttr": false,
-          "docs": "If `true`, the checkbox will visually appear as indeterminate.\n\n自動翻訳: `true`の場合、チェックボックスは視覚的に不定形と表示されます。",
+          "docs": "`true`の場合、チェックボックスは視覚的に不定形と表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3958,7 +3958,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -3979,7 +3979,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -3996,7 +3996,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`.\n\n自動翻訳: チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。  チェックボックスの値は `<input type=\"checkbox\">` の値に似ており、チェックボックスがネイティブの `<form>` に参加する場合にのみ使用されます。",
+          "docs": "チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。  チェックボックスの値は `<input type=\"checkbox\">` の値に似ており、チェックボックスがネイティブの `<form>` に参加する場合にのみ使用されます。",
           "docsTags": [],
           "default": "'on'",
           "values": [
@@ -4016,7 +4016,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checkbox loses focus.\n\n自動翻訳: チェックボックスのフォーカスが外れたときに発行されます。",
+          "docs": "チェックボックスのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -4025,7 +4025,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checked property has changed.\n\n自動翻訳: チェックされたプロパティが変更されたときに発行されます。",
+          "docs": "チェックされたプロパティが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -4034,7 +4034,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checkbox has focus.\n\n自動翻訳: チェックボックスにフォーカスが当たったときに発行されます。",
+          "docs": "チェックボックスにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -4043,68 +4043,68 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the checkbox icon\n\n自動翻訳: チェックボックスアイコンの背景"
+          "docs": "チェックボックスアイコンの背景"
         },
         {
           "name": "--background-checked",
           "annotation": "prop",
-          "docs": "Background of the checkbox icon when checked\n\n自動翻訳: チェックしたときのチェックボックスアイコンの背景"
+          "docs": "チェックしたときのチェックボックスアイコンの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the checkbox icon\n\n自動翻訳: チェックボックスアイコンのボーダーカラー"
+          "docs": "チェックボックスアイコンのボーダーカラー"
         },
         {
           "name": "--border-color-checked",
           "annotation": "prop",
-          "docs": "Border color of the checkbox icon when checked\n\n自動翻訳: チェックボックスのアイコンがチェックされたときのボーダーカラー"
+          "docs": "チェックボックスのアイコンがチェックされたときのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the checkbox icon\n\n自動翻訳: チェックボックスアイコンの境界半径"
+          "docs": "チェックボックスアイコンの境界半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the checkbox icon\n\n自動翻訳: チェックボックスアイコンのボーダースタイル"
+          "docs": "チェックボックスアイコンのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the checkbox icon\n\n自動翻訳: チェックボックスアイコンのボーダー幅"
+          "docs": "チェックボックスアイコンのボーダー幅"
         },
         {
           "name": "--checkmark-color",
           "annotation": "prop",
-          "docs": "Color of the checkbox checkmark when checked\n\n自動翻訳: チェックボックスのチェックマークがチェックされたときの色"
+          "docs": "チェックボックスのチェックマークがチェックされたときの色"
         },
         {
           "name": "--checkmark-width",
           "annotation": "prop",
-          "docs": "Stroke width of the checkbox checkmark\n\n自動翻訳: チェックボックス・チェックマークのストローク幅"
+          "docs": "チェックボックス・チェックマークのストローク幅"
         },
         {
           "name": "--size",
           "annotation": "prop",
-          "docs": "Size of the checkbox icon\n\n自動翻訳: チェックボックスのアイコンの大きさ"
+          "docs": "チェックボックスのアイコンの大きさ"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the checkbox icon\n\n自動翻訳: チェックボックスアイコンの遷移"
+          "docs": "チェックボックスアイコンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "container",
-          "docs": "The container for the checkbox mark.\n\n自動翻訳: チェックボックスマークのコンテナです。"
+          "docs": "チェックボックスマークのコンテナです。"
         },
         {
           "name": "mark",
-          "docs": "The checkmark used to indicate the checked state.\n\n自動翻訳: チェックされた状態を示すために使用されるチェックマークです。"
+          "docs": "チェックされた状態を示すために使用されるチェックマークです。"
         }
       ],
       "dependents": [
@@ -4136,7 +4136,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -4191,7 +4191,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the chip.\n\n自動翻訳: `true`の場合、ユーザはチップと対話することができません。",
+          "docs": "`true`の場合、ユーザはチップと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4208,7 +4208,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -4229,7 +4229,7 @@
           "mutable": false,
           "attr": "outline",
           "reflectToAttr": false,
-          "docs": "Display an outline style button.\n\n自動翻訳: アウトラインスタイルボタンを表示します。",
+          "docs": "アウトラインスタイルボタンを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4248,12 +4248,12 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the chip\n\n自動翻訳: チップの背景"
+          "docs": "チップの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the chip\n\n自動翻訳: チップの色"
+          "docs": "チップの色"
         }
       ],
       "slots": [],
@@ -4282,7 +4282,7 @@
           "mutable": false,
           "attr": "offset",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.\n\n自動翻訳: オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。",
+          "docs": "オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4301,7 +4301,7 @@
           "mutable": false,
           "attr": "offset-lg",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: Lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+          "docs": "Lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4320,7 +4320,7 @@
           "mutable": false,
           "attr": "offset-md",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+          "docs": "mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4339,7 +4339,7 @@
           "mutable": false,
           "attr": "offset-sm",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+          "docs": "smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4358,7 +4358,7 @@
           "mutable": false,
           "attr": "offset-xl",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+          "docs": "xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4377,7 +4377,7 @@
           "mutable": false,
           "attr": "offset-xs",
           "reflectToAttr": false,
-          "docs": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。",
+          "docs": "xs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4396,7 +4396,7 @@
           "mutable": false,
           "attr": "pull",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.\n\n自動翻訳: 列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。",
+          "docs": "列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4415,7 +4415,7 @@
           "mutable": false,
           "attr": "pull-lg",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: LGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+          "docs": "LGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4434,7 +4434,7 @@
           "mutable": false,
           "attr": "pull-md",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。",
+          "docs": "mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4453,7 +4453,7 @@
           "mutable": false,
           "attr": "pull-sm",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+          "docs": "smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4472,7 +4472,7 @@
           "mutable": false,
           "attr": "pull-xl",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+          "docs": "xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4491,7 +4491,7 @@
           "mutable": false,
           "attr": "pull-xs",
           "reflectToAttr": false,
-          "docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.\n\n自動翻訳: xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
+          "docs": "xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4510,7 +4510,7 @@
           "mutable": false,
           "attr": "push",
           "reflectToAttr": false,
-          "docs": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.\n\n自動翻訳: カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+          "docs": "カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4529,7 +4529,7 @@
           "mutable": false,
           "attr": "push-lg",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: LGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。",
+          "docs": "LGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4548,7 +4548,7 @@
           "mutable": false,
           "attr": "push-md",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。",
+          "docs": "mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4567,7 +4567,7 @@
           "mutable": false,
           "attr": "push-sm",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
+          "docs": "smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4586,7 +4586,7 @@
           "mutable": false,
           "attr": "push-xl",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。",
+          "docs": "xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4605,7 +4605,7 @@
           "mutable": false,
           "attr": "push-xs",
           "reflectToAttr": false,
-          "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.\n\n自動翻訳: xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。",
+          "docs": "xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -4624,7 +4624,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4643,7 +4643,7 @@
           "mutable": false,
           "attr": "size-lg",
           "reflectToAttr": false,
-          "docs": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4662,7 +4662,7 @@
           "mutable": false,
           "attr": "size-md",
           "reflectToAttr": false,
-          "docs": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4681,7 +4681,7 @@
           "mutable": false,
           "attr": "size-sm",
           "reflectToAttr": false,
-          "docs": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4700,7 +4700,7 @@
           "mutable": false,
           "attr": "size-xl",
           "reflectToAttr": false,
-          "docs": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
+          "docs": "xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。`\"auto\"`が渡された場合、カラムはそのコンテンツのサイズになります。",
           "docsTags": [],
           "values": [
             {
@@ -4719,7 +4719,7 @@
           "mutable": false,
           "attr": "size-xs",
           "reflectToAttr": false,
-          "docs": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.\n\n自動翻訳: xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
+          "docs": "xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。 `\"auto\"`が渡された場合、カラムはそのコンテンツのサイズとなる。",
           "docsTags": [],
           "values": [
             {
@@ -4747,37 +4747,37 @@
         {
           "name": "--ion-grid-column-padding",
           "annotation": "prop",
-          "docs": "Padding for the Column\n\n自動翻訳: カラムのPadding"
+          "docs": "カラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-lg",
           "annotation": "prop",
-          "docs": "Padding for the Column on lg screens and up\n\n自動翻訳: LG以上の画面でのコラムのPadding"
+          "docs": "LG以上の画面でのコラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-md",
           "annotation": "prop",
-          "docs": "Padding for the Column on md screens and up\n\n自動翻訳: mdスクリーン以上のカラムのPadding"
+          "docs": "mdスクリーン以上のカラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-sm",
           "annotation": "prop",
-          "docs": "Padding for the Column on sm screens and up\n\n自動翻訳: スマートフォン以上の画面では、コラムにパッドを入れる。"
+          "docs": "スマートフォン以上の画面では、コラムにパッドを入れる。"
         },
         {
           "name": "--ion-grid-column-padding-xl",
           "annotation": "prop",
-          "docs": "Padding for the Column on xl screens and up\n\n自動翻訳: XL以上の画面でのカラムのPadding"
+          "docs": "XL以上の画面でのカラムのPadding"
         },
         {
           "name": "--ion-grid-column-padding-xs",
           "annotation": "prop",
-          "docs": "Padding for the Column on xs screens and up\n\n自動翻訳: xsスクリーン以上のカラムのPadding"
+          "docs": "xsスクリーン以上のカラムのPadding"
         },
         {
           "name": "--ion-grid-columns",
           "annotation": "prop",
-          "docs": "The number of total Columns in the Grid\n\n自動翻訳: グリッドのカラムの総数"
+          "docs": "グリッドのカラムの総数"
         }
       ],
       "slots": [],
@@ -4817,7 +4817,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -4872,7 +4872,7 @@
           "mutable": true,
           "attr": "force-overscroll",
           "reflectToAttr": false,
-          "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting.\n\n自動翻訳: `true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。",
+          "docs": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。",
           "docsTags": [],
           "values": [
             {
@@ -4891,7 +4891,7 @@
           "mutable": false,
           "attr": "fullscreen",
           "reflectToAttr": false,
-          "docs": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent.\n\n自動翻訳: `true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。",
+          "docs": "`true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4908,7 +4908,7 @@
           "mutable": false,
           "attr": "scroll-events",
           "reflectToAttr": false,
-          "docs": "Because of performance reasons, ionScroll events are disabled by default, in order to enable them\nand start listening from (ionScroll), set this property to `true`.\n\n自動翻訳: パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。",
+          "docs": "パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4925,7 +4925,7 @@
           "mutable": false,
           "attr": "scroll-x",
           "reflectToAttr": false,
-          "docs": "If you want to enable the content scrolling in the X axis, set this property to `true`.\n\n自動翻訳: X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。",
+          "docs": "X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4942,7 +4942,7 @@
           "mutable": false,
           "attr": "scroll-y",
           "reflectToAttr": false,
-          "docs": "If you want to disable the content scrolling in the Y axis, set this property to `false`.\n\n自動翻訳: Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。",
+          "docs": "Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -4963,7 +4963,7 @@
           },
           "signature": "getScrollElement() => Promise<HTMLElement>",
           "parameters": [],
-          "docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `ion-content`:\n\ni.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events\nand `scrollToPoint()` to scroll the content into a certain point.\n\n自動翻訳: 実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。",
+          "docs": "実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。",
           "docsTags": []
         },
         {
@@ -4974,7 +4974,7 @@
           },
           "signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll by a specified X/Y distance in the component.\n\n自動翻訳: コンポーネントを指定したX/Y距離だけスクロールさせる。",
+          "docs": "コンポーネントを指定したX/Y距離だけスクロールさせる。",
           "docsTags": [
             {
               "name": "param",
@@ -4998,7 +4998,7 @@
           },
           "signature": "scrollToBottom(duration?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll to the bottom of the component.\n\n自動翻訳: コンポーネントの一番下までスクロールします。",
+          "docs": "コンポーネントの一番下までスクロールします。",
           "docsTags": [
             {
               "name": "param",
@@ -5014,7 +5014,7 @@
           },
           "signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll to a specified X/Y location in the component.\n\n自動翻訳: コンポーネント内の指定したX/Y位置までスクロールします。",
+          "docs": "コンポーネント内の指定したX/Y位置までスクロールします。",
           "docsTags": [
             {
               "name": "param",
@@ -5038,7 +5038,7 @@
           },
           "signature": "scrollToTop(duration?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Scroll to the top of the component.\n\n自動翻訳: コンポーネントの上部にスクロールします。",
+          "docs": "コンポーネントの上部にスクロールします。",
           "docsTags": [
             {
               "name": "param",
@@ -5054,7 +5054,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
+          "docs": "スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
           "docsTags": []
         },
         {
@@ -5063,7 +5063,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
+          "docs": "スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
           "docsTags": []
         },
         {
@@ -5072,7 +5072,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the scroll has started. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.\n\n自動翻訳: スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。",
+          "docs": "スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。",
           "docsTags": []
         }
       ],
@@ -5094,67 +5094,67 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the content\n\n自動翻訳: コンテンツの背景"
+          "docs": "コンテンツの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the content\n\n自動翻訳: コンテンツの色"
+          "docs": "コンテンツの色"
         },
         {
           "name": "--keyboard-offset",
           "annotation": "prop",
-          "docs": "Keyboard offset of the content\n\n自動翻訳: コンテンツのキーボードオフセット"
+          "docs": "コンテンツのキーボードオフセット"
         },
         {
           "name": "--offset-bottom",
           "annotation": "prop",
-          "docs": "Offset bottom of the content\n\n自動翻訳: コンテンツのオフセットボトム"
+          "docs": "コンテンツのオフセットボトム"
         },
         {
           "name": "--offset-top",
           "annotation": "prop",
-          "docs": "Offset top of the content\n\n自動翻訳: コンテンツのオフセットトップ"
+          "docs": "コンテンツのオフセットトップ"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the content\n\n自動翻訳: コンテンツのBottom Padding"
+          "docs": "コンテンツのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content\n\n自動翻訳: コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the content\n\n自動翻訳: コンテンツのTop Padding"
+          "docs": "コンテンツのTop Padding"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed in the scrollable area if provided without a slot.\n\n自動翻訳: slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。"
+          "docs": "slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。"
         },
         {
           "name": "fixed",
-          "docs": "Should be used for fixed content that should not scroll.\n\n自動翻訳: スクロールしてはいけない固定コンテンツに使用する必要があります。"
+          "docs": "スクロールしてはいけない固定コンテンツに使用する必要があります。"
         }
       ],
       "parts": [
         {
           "name": "background",
-          "docs": "The background of the content.\n\n自動翻訳: コンテンツの背景です。"
+          "docs": "コンテンツの背景です。"
         },
         {
           "name": "scroll",
-          "docs": "The scrollable container of the content.\n\n自動翻訳: コンテンツのスクロール可能なコンテナ。"
+          "docs": "コンテンツのスクロール可能なコンテナ。"
         }
       ],
       "dependents": [],
@@ -5192,7 +5192,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "default": "'primary'",
           "values": [
@@ -5248,7 +5248,7 @@
           "mutable": false,
           "attr": "datetime",
           "reflectToAttr": false,
-          "docs": "The ID of the `ion-datetime` instance\nassociated with the datetime button.\n\n自動翻訳: datetime ボタンに関連付けられた `ion-datetime` インスタンスの ID。",
+          "docs": "datetime ボタンに関連付けられた `ion-datetime` インスタンスの ID。",
           "docsTags": [],
           "values": [
             {
@@ -5267,7 +5267,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "If `true`, the user cannot interact with the button.\n\n自動翻訳: `true`の場合、ユーザはボタンと対話することができません。",
+          "docs": "`true`の場合、ユーザはボタンと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5284,7 +5284,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -5307,17 +5307,17 @@
       "slots": [
         {
           "name": "date-target",
-          "docs": "Content displayed inside of the date button.\n\n自動翻訳: 日付ボタンの内側に表示されるコンテンツです。"
+          "docs": "日付ボタンの内側に表示されるコンテンツです。"
         },
         {
           "name": "time-target",
-          "docs": "Content displayed inside of the time button.\n\n自動翻訳: 時刻ボタンの内側に表示される内容。"
+          "docs": "時刻ボタンの内側に表示される内容。"
         }
       ],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button that wraps the slotted text.\n\n自動翻訳: slotされたテキストをラップするネイティブHTMLボタンです。"
+          "docs": "slotされたテキストをラップするネイティブHTMLボタンです。"
         }
       ],
       "dependents": [],
@@ -5361,7 +5361,7 @@
           "mutable": false,
           "attr": "cancel-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the picker's cancel button.\n\n自動翻訳: ピッカーのキャンセルボタンに表示するテキストです。",
+          "docs": "ピッカーのキャンセルボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [
@@ -5378,7 +5378,7 @@
           "mutable": false,
           "attr": "clear-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the picker's \"Clear\" button.\n\n自動翻訳: ピッカーの\"Clear\"ボタンに表示するテキストです。",
+          "docs": "ピッカーの\"Clear\"ボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'Clear'",
           "values": [
@@ -5395,7 +5395,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "default": "'primary'",
           "values": [
@@ -5451,7 +5451,7 @@
           "mutable": false,
           "attr": "day-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month.\n\n自動翻訳: 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
+          "docs": "選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。",
           "docsTags": [],
           "values": [
             {
@@ -5476,7 +5476,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the datetime.\n\n自動翻訳: `true`の場合、ユーザはdatetimeを操作することができません。",
+          "docs": "`true`の場合、ユーザはdatetimeを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5493,7 +5493,7 @@
           "mutable": false,
           "attr": "done-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the picker's \"Done\" button.\n\n自動翻訳: ピッカーの \"Done \"ボタンに表示するテキスト。",
+          "docs": "ピッカーの \"Done \"ボタンに表示するテキスト。",
           "docsTags": [],
           "default": "'Done'",
           "values": [
@@ -5510,7 +5510,7 @@
           "mutable": false,
           "attr": "first-day-of-week",
           "reflectToAttr": false,
-          "docs": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday.\n\n自動翻訳: ion-datetime`に使用する週の最初の曜日を指定します。デフォルト値は `0` で、日曜日を表す。",
+          "docs": "ion-datetime`に使用する週の最初の曜日を指定します。デフォルト値は `0` で、日曜日を表す。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -5526,7 +5526,7 @@
           "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.\n\n自動翻訳: 特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel=\"false\"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。",
+          "docs": "特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel=\"false\"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -5551,7 +5551,7 @@
           "mutable": false,
           "attr": "hour-cycle",
           "reflectToAttr": false,
-          "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.\n\n自動翻訳: ion-datetime`の時間周期を指定します。値が設定されていない場合、現在のロケールによって指定される。",
+          "docs": "ion-datetime`の時間周期を指定します。値が設定されていない場合、現在のロケールによって指定される。",
           "docsTags": [],
           "values": [
             {
@@ -5575,7 +5575,7 @@
           "mutable": false,
           "attr": "hour-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers.\n\n自動翻訳: 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
+          "docs": "選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。",
           "docsTags": [],
           "values": [
             {
@@ -5599,7 +5599,7 @@
           "type": "((dateIsoString: string) => boolean) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.\n\n自動翻訳: 個々の日付(暦日)が有効か無効かを返します。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブです。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
+          "docs": "個々の日付(暦日)が有効か無効かを返します。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブです。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -5618,7 +5618,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `'default'` value refers to the default\nlocale set by your device.\n\n自動翻訳: `ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`'default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
+          "docs": "`ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`'default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
           "docsTags": [],
           "default": "'default'",
           "values": [
@@ -5635,7 +5635,7 @@
           "mutable": true,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year.\n\n自動翻訳: 許容される最大のdatetimeを指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。",
+          "docs": "許容される最大のdatetimeを指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。",
           "docsTags": [],
           "values": [
             {
@@ -5654,7 +5654,7 @@
           "mutable": true,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today.\n\n自動翻訳: 許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでいいです。デフォルトは、今日から100年前の年頭です。",
+          "docs": "許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでいいです。デフォルトは、今日から100年前の年頭です。",
           "docsTags": [],
           "values": [
             {
@@ -5673,7 +5673,7 @@
           "mutable": false,
           "attr": "minute-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`.\n\n自動翻訳: 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
+          "docs": "選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues=\"0,15,30,45\"` と入力することになります。",
           "docsTags": [],
           "values": [
             {
@@ -5698,7 +5698,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -5719,7 +5719,7 @@
           "mutable": false,
           "attr": "month-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`.\n\n自動翻訳: 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
+          "docs": "選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues=\"6,7,8\"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。",
           "docsTags": [],
           "values": [
             {
@@ -5744,7 +5744,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.\n\n自動翻訳: `true`の場合、複数の日付を一度に選択することができる。presentation=\"date\"`と `preferWheel=\"false\"` にのみ適用される。",
+          "docs": "`true`の場合、複数の日付を一度に選択することができる。presentation=\"date\"`と `preferWheel=\"false\"` にのみ適用される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5761,7 +5761,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -5778,7 +5778,7 @@
           "mutable": false,
           "attr": "prefer-wheel",
           "reflectToAttr": false,
-          "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `'date'`, `'date-time'`, or `'time-date'`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`'time'`, `'month'`, `'month-year'`, or `'year'`.\n\n自動翻訳: `true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。`'time'`, `'month'`, `'month-year'`, または `'year'`.",
+          "docs": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。`'time'`, `'month'`, `'month-year'`, または `'year'`.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5795,7 +5795,7 @@
           "mutable": false,
           "attr": "presentation",
           "reflectToAttr": false,
-          "docs": "Which values you want to select. `'date'` will show\na calendar picker to select the month, day, and year. `'time'`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `'date-time'` will show the date picker first and time picker second.\n`'time-date'` will show the time picker first and date picker second.\n\n自動翻訳: どの値を選択するか。`'date'`はカレンダーピッカーを表示し、月、日、年を選択します。`'time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。`'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
+          "docs": "どの値を選択するか。`'date'`はカレンダーピッカーを表示し、月、日、年を選択します。`'time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。`'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
           "docsTags": [],
           "default": "'date-time'",
           "values": [
@@ -5837,7 +5837,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the datetime appears normal but is not interactive.\n\n自動翻訳: `true`の場合、datetimeは正常に表示されるが、インタラクティブにはなりません。",
+          "docs": "`true`の場合、datetimeは正常に表示されるが、インタラクティブにはなりません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5854,7 +5854,7 @@
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
-          "docs": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` slotを使用することもできる。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
+          "docs": "`true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの \"Cancel \"と \"OK \"ボタンと一緒に \"Clear \"ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` slotを使用することもできる。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5871,7 +5871,7 @@
           "mutable": false,
           "attr": "show-default-buttons",
           "reflectToAttr": false,
-          "docs": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`slotを使用することもできます。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
+          "docs": "`true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの \"Cancel\" と \"OK\" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`slotを使用することもできます。カスタムボタンが `button` slotに設定されている場合、デフォルトのボタンはレンダリングされません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5888,7 +5888,7 @@
           "mutable": false,
           "attr": "show-default-time-label",
           "reflectToAttr": false,
-          "docs": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered.\n\n自動翻訳: `true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`slotを使用することもできます。 `time-label` slotにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
+          "docs": "`true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの \"Time \"ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`slotを使用することもできます。 `time-label` slotにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -5905,7 +5905,7 @@
           "mutable": false,
           "attr": "show-default-title",
           "reflectToAttr": false,
-          "docs": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date.\n\n自動翻訳: `true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、slotされたタイトルと、選択された日付の両方が含まれます。",
+          "docs": "`true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、slotされたタイトルと、選択された日付の両方が含まれます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5922,7 +5922,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width.\n\n自動翻訳: cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。`fixed`の場合、`ion-datetime`は固定幅になる。",
+          "docs": "cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。`fixed`の場合、`ion-datetime`は固定幅になる。",
           "docsTags": [],
           "default": "'fixed'",
           "values": [
@@ -5943,7 +5943,7 @@
           "type": "((selectedDates: string[]) => string) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".\n\n自動翻訳: 選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは \"numberOfDates days \"に設定されています。",
+          "docs": "選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは \"numberOfDates days \"に設定されています。",
           "docsTags": [],
           "values": [
             {
@@ -5962,7 +5962,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.\n\n自動翻訳: datetimeの値を有効なISO 8601 datetime文字列として指定します。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
+          "docs": "datetimeの値を有効なISO 8601 datetime文字列として指定します。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
           "docsTags": [],
           "values": [
             {
@@ -5987,7 +5987,7 @@
           "mutable": false,
           "attr": "year-values",
           "reflectToAttr": false,
-          "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.\n\n自動翻訳: 選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
+          "docs": "選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
           "docsTags": [],
           "values": [
             {
@@ -6016,7 +6016,7 @@
           },
           "signature": "cancel(closeOverlay?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.\n\n自動翻訳: ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。",
+          "docs": "ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。",
           "docsTags": []
         },
         {
@@ -6027,7 +6027,7 @@
           },
           "signature": "confirm(closeOverlay?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Confirms the selected datetime value, updates the\n`value` property, and optionally closes the popover\nor modal that the datetime was presented in.\n\n自動翻訳: 選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。",
+          "docs": "選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。",
           "docsTags": []
         },
         {
@@ -6038,7 +6038,7 @@
           },
           "signature": "reset(startDate?: string) => Promise<void>",
           "parameters": [],
-          "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.\n\n自動翻訳: datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
+          "docs": "datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
           "docsTags": []
         }
       ],
@@ -6049,7 +6049,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime loses focus.\n\n自動翻訳: datetimeのフォーカスが外れたときに発行されます。",
+          "docs": "datetimeのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -6058,7 +6058,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime selection was cancelled.\n\n自動翻訳: datetimeの選択がキャンセルされたときに発生します。",
+          "docs": "datetimeの選択がキャンセルされたときに発生します。",
           "docsTags": []
         },
         {
@@ -6067,7 +6067,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value (selected date) has changed.\n\n自動翻訳: 値（選択された日付）が変化したときに発行されます。",
+          "docs": "値（選択された日付）が変化したときに発行されます。",
           "docsTags": []
         },
         {
@@ -6076,7 +6076,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the datetime has focus.\n\n自動翻訳: datetimeにフォーカスが当たったときに発行されます。",
+          "docs": "datetimeにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -6085,31 +6085,31 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "The primary background of the datetime component.\n\n自動翻訳: datetimeコンポーネントの主な背景。"
+          "docs": "datetimeコンポーネントの主な背景。"
         },
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "The primary background of the datetime component in RGB format.\n\n自動翻訳: datetimeコンポーネントの主な背景をRGBフォーマットで示します。"
+          "docs": "datetimeコンポーネントの主な背景をRGBフォーマットで示します。"
         },
         {
           "name": "--title-color",
           "annotation": "prop",
-          "docs": "The text color of the title.\n\n自動翻訳: タイトルの文字色です。"
+          "docs": "タイトルの文字色です。"
         }
       ],
       "slots": [
         {
           "name": "buttons",
-          "docs": "The buttons in the datetime.\n\n自動翻訳: datetimeのボタンです。"
+          "docs": "datetimeのボタンです。"
         },
         {
           "name": "time-label",
-          "docs": "The label for the time selector in the datetime.\n\n自動翻訳: datetimeの時間セレクタのラベルです。"
+          "docs": "datetimeの時間セレクタのラベルです。"
         },
         {
           "name": "title",
-          "docs": "The title of the datetime.\n\n自動翻訳: datetimeのタイトルです。"
+          "docs": "datetimeのタイトルです。"
         }
       ],
       "parts": [],
@@ -6175,7 +6175,7 @@
           "mutable": false,
           "attr": "activated",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab button will be show a close icon.\n\n自動翻訳: `true`の場合、ファブボタンにクローズアイコンを表示します。",
+          "docs": "`true`の場合、ファブボタンにクローズアイコンを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6192,7 +6192,7 @@
           "mutable": false,
           "attr": "close-icon",
           "reflectToAttr": false,
-          "docs": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list.\n\n自動翻訳: クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。",
+          "docs": "クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。",
           "docsTags": [],
           "default": "close",
           "values": [
@@ -6209,7 +6209,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -6264,7 +6264,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the fab button.\n\n自動翻訳: `true`の場合、ユーザーはファブボタンを操作することができません。",
+          "docs": "`true`の場合、ユーザーはファブボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6281,7 +6281,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+          "docs": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -6300,7 +6300,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -6319,7 +6319,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -6340,7 +6340,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -6358,7 +6358,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -6377,7 +6377,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -6403,7 +6403,7 @@
           "mutable": false,
           "attr": "show",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab button will show when in a fab-list.\n\n自動翻訳: `true`の場合、fabボタンがfab-listにあるときに表示されます。",
+          "docs": "`true`の場合、fabボタンがfab-listにあるときに表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6420,7 +6420,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The size of the button. Set this to `small` in order to have a mini fab button.\n\n自動翻訳: ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。",
+          "docs": "ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。",
           "docsTags": [],
           "values": [
             {
@@ -6440,7 +6440,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -6459,7 +6459,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ファブボタンが半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、ファブボタンが半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6476,7 +6476,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
+          "docs": "ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -6505,7 +6505,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button loses focus.\n\n自動翻訳: ボタンのフォーカスが外れたときに発行されます。",
+          "docs": "ボタンのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -6514,7 +6514,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the button has focus.\n\n自動翻訳: ボタンにフォーカスが当たっているときに発行されます。",
+          "docs": "ボタンにフォーカスが当たっているときに発行されます。",
           "docsTags": []
         }
       ],
@@ -6523,128 +6523,128 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the button\n\n自動翻訳: ボタンの背景"
+          "docs": "ボタンの背景"
         },
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
+          "docs": "ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background when pressed\n\n自動翻訳: 押されたときのボタンの背景の不透明度"
+          "docs": "押されたときのボタンの背景の不透明度"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景"
+          "docs": "タブキーでフォーカスしたときのボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度"
+          "docs": "タブキーでフォーカスしたときのボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the button on hover\n\n自動翻訳: ホバー時のボタンの背景"
+          "docs": "ホバー時のボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the button background on hover\n\n自動翻訳: ホバー時のボタン背景の不透明度"
+          "docs": "ホバー時のボタン背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the button\n\n自動翻訳: ボタンのボーダーカラー"
+          "docs": "ボタンのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the button\n\n自動翻訳: ボタンの境界半径"
+          "docs": "ボタンの境界半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the button\n\n自動翻訳: ボタンのボーダースタイル"
+          "docs": "ボタンのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the button\n\n自動翻訳: ボタンのボーダー幅"
+          "docs": "ボタンのボーダー幅"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the button\n\n自動翻訳: ボタンのボックスシャドウ"
+          "docs": "ボタンのボックスシャドウ"
         },
         {
           "name": "--close-icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the close icon\n\n自動翻訳: クローズアイコンのFont Size"
+          "docs": "クローズアイコンのFont Size"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the button\n\n自動翻訳: ボタンの文字色"
+          "docs": "ボタンの文字色"
         },
         {
           "name": "--color-activated",
           "annotation": "prop",
-          "docs": "Text color of the button when pressed\n\n自動翻訳: ボタンが押されたときの文字色"
+          "docs": "ボタンが押されたときの文字色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Text color of the button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのボタンの文字色"
+          "docs": "タブキーでフォーカスしたときのボタンの文字色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Text color of the button on hover\n\n自動翻訳: ホバー時のボタンの文字色"
+          "docs": "ホバー時のボタンの文字色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
+          "docs": "ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
+          "docs": "ボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
+          "docs": "ボタンリプルエフェクトの色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the button\n\n自動翻訳: ボタンの遷移"
+          "docs": "ボタンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "close-icon",
-          "docs": "The close icon that is displayed when a fab list opens (uses ion-icon).\n\n自動翻訳: ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。"
+          "docs": "ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button or anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
+          "docs": "すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
         }
       ],
       "dependents": [],
@@ -6673,7 +6673,7 @@
           "mutable": false,
           "attr": "activated",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab list will show all fab buttons in the list.\n\n自動翻訳: `true`の場合、ファブリストに全てのファブボタンが表示されます。",
+          "docs": "`true`の場合、ファブリストに全てのファブボタンが表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6690,7 +6690,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "The side the fab list will show on relative to the main fab button.\n\n自動翻訳: メインファブボタンに対して、ファブリストが表示される側を指定します。",
+          "docs": "メインファブボタンに対して、ファブリストが表示される側を指定します。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -6739,7 +6739,7 @@
           "mutable": true,
           "attr": "activated",
           "reflectToAttr": false,
-          "docs": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.\n\n自動翻訳: もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。",
+          "docs": "もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6756,7 +6756,7 @@
           "mutable": false,
           "attr": "edge",
           "reflectToAttr": false,
-          "docs": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot.\n\n自動翻訳: `true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。 `fixed` slotと一緒に使用する必要があります。",
+          "docs": "`true`の場合、`vertical`が`\"top\"`の場合はヘッダーの端に、`\"bottom\"`の場合はフッターの端にファブを表示します。 `fixed` slotと一緒に使用する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6773,7 +6773,7 @@
           "mutable": false,
           "attr": "horizontal",
           "reflectToAttr": false,
-          "docs": "Where to align the fab horizontally in the viewport.\n\n自動翻訳: ビューポートでファブを水平に揃える場所。",
+          "docs": "ビューポートでファブを水平に揃える場所。",
           "docsTags": [],
           "values": [
             {
@@ -6801,7 +6801,7 @@
           "mutable": false,
           "attr": "vertical",
           "reflectToAttr": false,
-          "docs": "Where to align the fab vertically in the viewport.\n\n自動翻訳: ビューポートでファブを縦に並べる場所。",
+          "docs": "ビューポートでファブを縦に並べる場所。",
           "docsTags": [],
           "values": [
             {
@@ -6833,7 +6833,7 @@
           },
           "signature": "close() => Promise<void>",
           "parameters": [],
-          "docs": "Close an active FAB list container.\n\n自動翻訳: アクティブなFABリストコンテナを閉じる。",
+          "docs": "アクティブなFABリストコンテナを閉じる。",
           "docsTags": []
         }
       ],
@@ -6865,7 +6865,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode.\n\n自動翻訳: フッターに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。",
+          "docs": "フッターに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -6885,7 +6885,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -6906,7 +6906,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、フッターは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+          "docs": "`true`の場合、フッターは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6942,7 +6942,7 @@
           "mutable": false,
           "attr": "fixed",
           "reflectToAttr": false,
-          "docs": "If `true`, the grid will have a fixed width based on the screen size.\n\n自動翻訳: `true`の場合、グリッドの幅は画面サイズに応じた固定幅となる。",
+          "docs": "`true`の場合、グリッドの幅は画面サイズに応じた固定幅となる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6961,62 +6961,62 @@
         {
           "name": "--ion-grid-padding",
           "annotation": "prop",
-          "docs": "Padding for the Grid\n\n自動翻訳: グリッドのPadding"
+          "docs": "グリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-lg",
           "annotation": "prop",
-          "docs": "Padding for the Grid on lg screens\n\n自動翻訳: LG画面でのグリッドのPadding"
+          "docs": "LG画面でのグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-md",
           "annotation": "prop",
-          "docs": "Padding for the Grid on md screens\n\n自動翻訳: md画面におけるグリッドのPadding"
+          "docs": "md画面におけるグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-sm",
           "annotation": "prop",
-          "docs": "Padding for the Grid on sm screens\n\n自動翻訳: スマートスクリーンにおけるグリッドのPadding"
+          "docs": "スマートスクリーンにおけるグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-xl",
           "annotation": "prop",
-          "docs": "Padding for the Grid on xl screens\n\n自動翻訳: XL画面でのグリッドのPadding"
+          "docs": "XL画面でのグリッドのPadding"
         },
         {
           "name": "--ion-grid-padding-xs",
           "annotation": "prop",
-          "docs": "Padding for the Grid on xs screens\n\n自動翻訳: xs画面でのGridのPadding"
+          "docs": "xs画面でのGridのPadding"
         },
         {
           "name": "--ion-grid-width",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid\n\n自動翻訳: 固定Gridの幅"
+          "docs": "固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-lg",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on lg screens\n\n自動翻訳: LGスクリーンで固定されたGridの幅"
+          "docs": "LGスクリーンで固定されたGridの幅"
         },
         {
           "name": "--ion-grid-width-md",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on md screens\n\n自動翻訳: md画面での固定Gridの幅"
+          "docs": "md画面での固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-sm",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on sm screens\n\n自動翻訳: sm画面での固定Gridの幅"
+          "docs": "sm画面での固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-xl",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on xl screens\n\n自動翻訳: xl画面での固定Gridの幅"
+          "docs": "xl画面での固定Gridの幅"
         },
         {
           "name": "--ion-grid-width-xs",
           "annotation": "prop",
-          "docs": "Width of the fixed Grid on xs screens\n\n自動翻訳: xsスクリーンで固定されたGridの幅"
+          "docs": "xsスクリーンで固定されたGridの幅"
         }
       ],
       "slots": [],
@@ -7044,7 +7044,7 @@
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)\n\n自動翻訳: ヘッダーに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。  通常、[折りたたみ式ラージタイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
+          "docs": "ヘッダーに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。  通常、[折りたたみ式ラージタイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。",
           "docsTags": [],
           "values": [
             {
@@ -7068,7 +7068,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -7089,7 +7089,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content.\n\n自動翻訳: `true`の場合、ヘッダーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
+          "docs": "`true`の場合、ヘッダーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7130,7 +7130,7 @@
           "mutable": false,
           "attr": "alt",
           "reflectToAttr": false,
-          "docs": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded.\n\n自動翻訳: この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。",
+          "docs": "この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。",
           "docsTags": [],
           "values": [
             {
@@ -7149,7 +7149,7 @@
           "mutable": false,
           "attr": "src",
           "reflectToAttr": false,
-          "docs": "The image URL. This attribute is mandatory for the `<img>` element.\n\n自動翻訳: 画像のURL。この属性は `<img>` 要素では必須です。",
+          "docs": "画像のURL。この属性は `<img>` 要素では必須です。",
           "docsTags": [],
           "values": [
             {
@@ -7171,7 +7171,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the img fails to load\n\n自動翻訳: imgの読み込みに失敗したときに発行されます。",
+          "docs": "imgの読み込みに失敗したときに発行されます。",
           "docsTags": []
         },
         {
@@ -7180,7 +7180,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the image has finished loading\n\n自動翻訳: 画像の読み込みが終了したときに発行されます。",
+          "docs": "画像の読み込みが終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -7189,7 +7189,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the img src has been set\n\n自動翻訳: img srcが設定されたときに発行されます。",
+          "docs": "img srcが設定されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -7199,7 +7199,7 @@
       "parts": [
         {
           "name": "image",
-          "docs": "The inner `img` element.\n\n自動翻訳: 内側の `img` 要素。"
+          "docs": "内側の `img` 要素。"
         }
       ],
       "dependents": [],
@@ -7220,7 +7220,7 @@
           "mutable": true,
           "attr": "loading-spinner",
           "reflectToAttr": false,
-          "docs": "An animated SVG spinner that shows while loading.\n\n自動翻訳: ロード中に表示されるアニメーションSVGスピナーです。",
+          "docs": "ロード中に表示されるアニメーションSVGスピナーです。",
           "docsTags": [],
           "values": [
             {
@@ -7275,7 +7275,7 @@
           "mutable": false,
           "attr": "loading-text",
           "reflectToAttr": false,
-          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
+          "docs": "ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
           "docsTags": [],
           "values": [
             {
@@ -7322,7 +7322,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed.\n\n自動翻訳: `true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 `true` を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
+          "docs": "`true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 `true` を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7339,7 +7339,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.\n\n自動翻訳: 無限スクロール要素の位置を指定します。値は `top` または `bottom` のどちらかです。",
+          "docs": "無限スクロール要素の位置を指定します。値は `top` または `bottom` のどちらかです。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -7361,7 +7361,7 @@
           "mutable": false,
           "attr": "threshold",
           "reflectToAttr": false,
-          "docs": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page.\n\n自動翻訳: スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、`100px`という値を使用します。",
+          "docs": "スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、`100px`という値を使用します。",
           "docsTags": [],
           "default": "'15%'",
           "values": [
@@ -7382,7 +7382,7 @@
           },
           "signature": "complete() => Promise<void>",
           "parameters": [],
-          "docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.\n\n自動翻訳: 非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。",
+          "docs": "非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。",
           "docsTags": []
         }
       ],
@@ -7393,7 +7393,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the scroll reaches\nthe threshold distance. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.\n\n自動翻訳: スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。",
+          "docs": "スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。",
           "docsTags": []
         }
       ],
@@ -7424,7 +7424,7 @@
           "mutable": false,
           "attr": "accept",
           "reflectToAttr": false,
-          "docs": "This attribute is ignored.\n\n自動翻訳: この属性は無視されます。",
+          "docs": "この属性は無視されます。",
           "docsTags": [
             {
               "name": "deprecated"
@@ -7448,7 +7448,7 @@
           "mutable": false,
           "attr": "autocapitalize",
           "reflectToAttr": false,
-          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n\n自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+          "docs": "テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -7465,7 +7465,7 @@
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
-          "docs": "Indicates whether the value of the control can be automatically completed by the browser.\n\n自動翻訳: コントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。",
+          "docs": "コントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -7695,7 +7695,7 @@
           "mutable": false,
           "attr": "autocorrect",
           "reflectToAttr": false,
-          "docs": "Whether auto correction should be enabled when the user is entering/editing the text value.\n\n自動翻訳: ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。",
+          "docs": "ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -7717,7 +7717,7 @@
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
-          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。",
+          "docs": "この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7734,7 +7734,7 @@
           "mutable": false,
           "attr": "clear-input",
           "reflectToAttr": false,
-          "docs": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n\n自動翻訳: `true`の場合、値があるときにInputにクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
+          "docs": "`true`の場合、値があるときにInputにクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7751,7 +7751,7 @@
           "mutable": false,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
-          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n\n自動翻訳: `true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
+          "docs": "`true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
           "docsTags": [],
           "values": [
             {
@@ -7770,7 +7770,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -7825,7 +7825,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+          "docs": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -7842,7 +7842,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザはInputと対話することができません。",
+          "docs": "`true`の場合、ユーザはInputと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7859,7 +7859,7 @@
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.\n\n自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docs": "どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
           "docsTags": [],
           "values": [
             {
@@ -7903,7 +7903,7 @@
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\n自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+          "docs": "どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
           "docsTags": [],
           "values": [
             {
@@ -7951,7 +7951,7 @@
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "The maximum value, which must not be less than its minimum (min attribute) value.\n\n自動翻訳: 最大値で、その最小値（min属性）より小さくてはなりません。",
+          "docs": "最大値で、その最小値（min属性）より小さくてはなりません。",
           "docsTags": [],
           "values": [
             {
@@ -7973,7 +7973,7 @@
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
+          "docs": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -7992,7 +7992,7 @@
           "mutable": false,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "The minimum value, which must not be greater than its maximum (max attribute) value.\n\n自動翻訳: 最小値で、その最大値（max属性）より大きくてはなりません。",
+          "docs": "最小値で、その最大値（max属性）より大きくてはなりません。",
           "docsTags": [],
           "values": [
             {
@@ -8014,7 +8014,7 @@
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
+          "docs": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -8033,7 +8033,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8054,7 +8054,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.\n\n自動翻訳: `true`の場合、ユーザは複数の値を入力することができる。この属性は、type属性が `\"email\"` に設定されている場合に適用され、それ以外の場合は無視される。",
+          "docs": "`true`の場合、ユーザは複数の値を入力することができる。この属性は、type属性が `\"email\"` に設定されている場合に適用され、それ以外の場合は無視される。",
           "docsTags": [],
           "values": [
             {
@@ -8073,7 +8073,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -8090,7 +8090,7 @@
           "mutable": false,
           "attr": "pattern",
           "reflectToAttr": false,
-          "docs": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n\n自動翻訳: 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` Inputタイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
+          "docs": "値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, または `\"password\"` であるときに適用され、それ以外のときは無視されます。type 属性が `\"date\"` の場合、`pattern` は `\"date\"` Inputタイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8109,7 +8109,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n\n自動翻訳: Inputが値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
+          "docs": "Inputが値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `\"email\"`, `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, または `\"url\"` に設定されている場合にのみ適用され、それ以外は無視されます。",
           "docsTags": [],
           "values": [
             {
@@ -8128,7 +8128,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができません。",
+          "docs": "`true`の場合、ユーザーは値を変更することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8145,7 +8145,7 @@
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
-          "docs": "If `true`, the user must fill in a value before submitting a form.\n\n自動翻訳: `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
+          "docs": "`true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8162,7 +8162,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n\n自動翻訳: コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数です。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
+          "docs": "コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数です。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
           "docsTags": [],
           "values": [
             {
@@ -8181,7 +8181,7 @@
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
-          "docs": "If `true`, the element will have its spelling and grammar checked.\n\n自動翻訳: `true`の場合、その要素のスペルチェックと文法チェックが行われる。",
+          "docs": "`true`の場合、その要素のスペルチェックと文法チェックが行われる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8198,7 +8198,7 @@
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
-          "docs": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.\n\n自動翻訳: min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any\"`または正の浮動小数点数。",
+          "docs": "min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any\"`または正の浮動小数点数。",
           "docsTags": [],
           "values": [
             {
@@ -8217,7 +8217,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of control to display. The default type is text.\n\n自動翻訳: 表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。",
+          "docs": "表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。",
           "docsTags": [],
           "default": "'text'",
           "values": [
@@ -8279,7 +8279,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the input.\n\n自動翻訳: 入力された値です。",
+          "docs": "入力された値です。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -8309,7 +8309,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
-          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: 要素の内部で使用されているネイティブの `<input>` 要素を返します。",
+          "docs": "要素の内部で使用されているネイティブの `<input>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -8320,7 +8320,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\n自動翻訳: `ion-input` のネイティブ `input` にフォーカスを設定します。グローバルな `input.focus()` の代わりに、このメソッドを使用します。 ページが入ったときにInputにフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
+          "docs": "`ion-input` のネイティブ `input` にフォーカスを設定します。グローバルな `input.focus()` の代わりに、このメソッドを使用します。 ページが入ったときにInputにフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
           "docsTags": []
         }
       ],
@@ -8331,7 +8331,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.\n\n自動翻訳: Inputのフォーカスが外れたときに発行されます。",
+          "docs": "Inputのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -8340,7 +8340,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
+          "docs": "値が変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -8349,7 +8349,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.\n\n自動翻訳: Inputにフォーカスが当たったときに発行されます。",
+          "docs": "Inputにフォーカスが当たったときに発行されます。",
           "docsTags": []
         },
         {
@@ -8358,7 +8358,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発します。",
+          "docs": "キーボード入力が発生したときに発します。",
           "docsTags": []
         }
       ],
@@ -8367,52 +8367,52 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the input\n\n自動翻訳: Inputの背景"
+          "docs": "Inputの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the input text\n\n自動翻訳: Inputのテキストの色"
+          "docs": "Inputのテキストの色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the input\n\n自動翻訳: InputのBottom Padding"
+          "docs": "InputのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input\n\n自動翻訳: 入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the input\n\n自動翻訳: InputのTop Padding"
+          "docs": "InputのTop Padding"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストの色"
+          "docs": "InputのPlaceholderテキストの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストのFont Style"
+          "docs": "InputのPlaceholderテキストのFont Style"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストのFont Weight"
+          "docs": "InputのPlaceholderテキストのFont Weight"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the input placeholder text\n\n自動翻訳: InputのPlaceholderテキストの不透明度"
+          "docs": "InputのPlaceholderテキストの不透明度"
         }
       ],
       "slots": [],
@@ -8458,7 +8458,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8513,7 +8513,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8534,7 +8534,7 @@
           "mutable": false,
           "attr": "sticky",
           "reflectToAttr": false,
-          "docs": "When it's set to `true`, the item-divider will stay visible when it reaches the top\nof the viewport until the next `ion-item-divider` replaces it.\n\nThis feature relies in `position:sticky`:\nhttps://caniuse.com/#feat=css-sticky\n\n自動翻訳: `true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。  この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky",
+          "docs": "`true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。  この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8553,66 +8553,66 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the item divider\n\n自動翻訳: アイテムディバイダーの背景"
+          "docs": "アイテムディバイダーの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the item divider\n\n自動翻訳: アイテムディバイダーの色"
+          "docs": "アイテムディバイダーの色"
         },
         {
           "name": "--inner-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのBottom Inner Padding"
+          "docs": "アイテムディバイダーのBottom Inner Padding"
         },
         {
           "name": "--inner-padding-end",
           "annotation": "prop",
-          "docs": "End inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのEnd Inner Padding"
+          "docs": "アイテムディバイダーのEnd Inner Padding"
         },
         {
           "name": "--inner-padding-start",
           "annotation": "prop",
-          "docs": "Start inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのStart Inner Padding"
+          "docs": "アイテムディバイダーのStart Inner Padding"
         },
         {
           "name": "--inner-padding-top",
           "annotation": "prop",
-          "docs": "Top inner padding of the item divider\n\n自動翻訳: アイテムディバイダーのTop Inner Padding"
+          "docs": "アイテムディバイダーのTop Inner Padding"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item divider\n\n自動翻訳: アイテムディバイダーのBottom Padding"
+          "docs": "アイテムディバイダーのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合はRight Padding、右から左の場合はLeft Padding"
+          "docs": "アイテムディバイダーの方向が左から右の場合はRight Padding、右から左の場合はLeft Padding"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider\n\n自動翻訳: アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item divider\n\n自動翻訳: アイテムディバイダーのTop Padding"
+          "docs": "アイテムディバイダーのTop Padding"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
+          "docs": "slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the divider text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。"
+          "docs": "コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the divider text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRでは仕切り文字の左側に、RTLでは右側に配置されます。"
+          "docs": "コンテンツは、LTRでは仕切り文字の左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [],
@@ -8685,7 +8685,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -8740,7 +8740,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the item option.\n\n自動翻訳: `true`の場合、ユーザーはアイテムオプションと対話することができません。",
+          "docs": "`true`の場合、ユーザーはアイテムオプションと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8757,7 +8757,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+          "docs": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -8776,7 +8776,7 @@
           "mutable": false,
           "attr": "expandable",
           "reflectToAttr": false,
-          "docs": "If `true`, the option will expand to take up the available width and cover any other options.\n\n自動翻訳: `true`の場合、オプションは利用可能な幅を占めるように展開し、他のオプションをカバーします。",
+          "docs": "`true`の場合、オプションは利用可能な幅を占めるように展開し、他のオプションをカバーします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8793,7 +8793,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -8812,7 +8812,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -8833,7 +8833,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -8852,7 +8852,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -8871,7 +8871,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
+          "docs": "ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -8899,44 +8899,44 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the item option\n\n自動翻訳: アイテムオプションの背景"
+          "docs": "アイテムオプションの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the item option\n\n自動翻訳: アイテムオプションのカラー"
+          "docs": "アイテムオプションのカラー"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
+          "docs": "slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "bottom",
-          "docs": "Content is placed below the option text.\n\n自動翻訳: コンテンツは、オプションテキストの下に配置されます。"
+          "docs": "コンテンツは、オプションテキストの下に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the option text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRではオプションテキストの右側に、RTLでは左側に配置されます。"
+          "docs": "コンテンツは、LTRではオプションテキストの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "icon-only",
-          "docs": "Should be used on an icon in an option that has no text.\n\n自動翻訳: テキストを持たないオプションのアイコンに使用されるべきです。"
+          "docs": "テキストを持たないオプションのアイコンに使用されるべきです。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the option text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではオプションテキストの左側に、RTLでは右側に配置されます。"
+          "docs": "コンテンツは、LTRではオプションテキストの左側に、RTLでは右側に配置されます。"
         },
         {
           "name": "top",
-          "docs": "Content is placed above the option text.\n\n自動翻訳: オプションテキストの上にコンテンツが配置されます。"
+          "docs": "オプションテキストの上にコンテンツが配置されます。"
         }
       ],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML button or anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
+          "docs": "すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。"
         }
       ],
       "dependents": [],
@@ -8963,7 +8963,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.\n\n自動翻訳: オプションボタンを配置する側を指定します。指定可能な値。start\"` と `\"end\"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。",
+          "docs": "オプションボタンを配置する側を指定します。指定可能な値。start\"` と `\"end\"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。",
           "docsTags": [],
           "default": "'end'",
           "values": [
@@ -8988,7 +8988,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the item has been fully swiped.\n\n自動翻訳: アイテムが完全にスワイプされたときに発行されます。",
+          "docs": "アイテムが完全にスワイプされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -9014,7 +9014,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the sliding item.\n\n自動翻訳: `true`の場合、ユーザーはスライドアイテムを操作することができません。",
+          "docs": "`true`の場合、ユーザーはスライドアイテムを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9035,7 +9035,7 @@
           },
           "signature": "close() => Promise<void>",
           "parameters": [],
-          "docs": "Close the sliding item. Items can also be closed from the [List](./list).\n\n自動翻訳: スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。",
+          "docs": "スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。",
           "docsTags": []
         },
         {
@@ -9046,7 +9046,7 @@
           },
           "signature": "closeOpened() => Promise<boolean>",
           "parameters": [],
-          "docs": "Close all of the sliding items in the list. Items can also be closed from the [List](./list).\n\n自動翻訳: リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。",
+          "docs": "リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。",
           "docsTags": []
         },
         {
@@ -9057,7 +9057,7 @@
           },
           "signature": "getOpenAmount() => Promise<number>",
           "parameters": [],
-          "docs": "Get the amount the item is open in pixels.\n\n自動翻訳: アイテムが開いている量をピクセル単位で取得します。",
+          "docs": "アイテムが開いている量をピクセル単位で取得します。",
           "docsTags": []
         },
         {
@@ -9068,7 +9068,7 @@
           },
           "signature": "getSlidingRatio() => Promise<number>",
           "parameters": [],
-          "docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.\n\n自動翻訳: オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いています。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
+          "docs": "オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いています。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
           "docsTags": []
         },
         {
@@ -9079,7 +9079,7 @@
           },
           "signature": "open(side: Side | undefined) => Promise<void>",
           "parameters": [],
-          "docs": "Open the sliding item.\n\n自動翻訳: スライド式の項目を開く。",
+          "docs": "スライド式の項目を開く。",
           "docsTags": [
             {
               "name": "param",
@@ -9095,7 +9095,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the sliding position changes.\n\n自動翻訳: スライド位置が変化したときに発行されます。",
+          "docs": "スライド位置が変化したときに発行されます。",
           "docsTags": []
         }
       ],
@@ -9154,7 +9154,7 @@
           "mutable": false,
           "attr": "button",
           "reflectToAttr": false,
-          "docs": "If `true`, a button tag will be rendered and the item will be tappable.\n\n自動翻訳: `true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。",
+          "docs": "`true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9171,7 +9171,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -9226,7 +9226,7 @@
           "mutable": false,
           "attr": "counter",
           "reflectToAttr": false,
-          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.\n\n自動翻訳: `true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。",
+          "docs": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9242,7 +9242,7 @@
           "type": "((inputLength: number, maxLength: number) => string) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\n自動翻訳: カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
+          "docs": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
           "docsTags": [],
           "values": [
             {
@@ -9261,7 +9261,7 @@
           "mutable": false,
           "attr": "detail",
           "reflectToAttr": false,
-          "docs": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present.\n\n自動翻訳: `true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。",
+          "docs": "`true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。",
           "docsTags": [],
           "values": [
             {
@@ -9280,7 +9280,7 @@
           "mutable": false,
           "attr": "detail-icon",
           "reflectToAttr": false,
-          "docs": "The icon to use when `detail` is set to `true`.\n\n自動翻訳: `detail` が `true` に設定されているときに使用するアイコンです。",
+          "docs": "`detail` が `true` に設定されているときに使用するアイコンです。",
           "docsTags": [],
           "default": "chevronForward",
           "values": [
@@ -9297,7 +9297,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the item.\n\n自動翻訳: `true`の場合、ユーザはそのアイテムと対話することができません。",
+          "docs": "`true`の場合、ユーザはそのアイテムと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9314,7 +9314,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+          "docs": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -9333,7 +9333,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border. Only available in `md` mode.\n\n自動翻訳: アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`modeでのみ使用可能です。",
+          "docs": "アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`modeでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -9357,7 +9357,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -9376,7 +9376,7 @@
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
-          "docs": "How the bottom border should be displayed on the item.\n\n自動翻訳: アイテムに表示される下枠の表示方法。",
+          "docs": "アイテムに表示される下枠の表示方法。",
           "docsTags": [],
           "values": [
             {
@@ -9404,7 +9404,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9425,7 +9425,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -9443,7 +9443,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -9462,7 +9462,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -9488,7 +9488,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
-          "docs": "The shape of the item. If \"round\" it will have increased\nborder radius.\n\n自動翻訳: アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。",
+          "docs": "アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。",
           "docsTags": [],
           "values": [
             {
@@ -9508,7 +9508,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -9527,7 +9527,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button. Only used when an `onclick` or `button` property is present.\n\n自動翻訳: ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。",
+          "docs": "ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -9571,209 +9571,209 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the item\n\n自動翻訳: アイテムの背景"
+          "docs": "アイテムの背景"
         },
         {
           "name": "--background-activated",
           "annotation": "prop",
-          "docs": "Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.\n\n自動翻訳: 押されたときのアイテムの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
+          "docs": "押されたときのアイテムの背景。注意：これを設定すると、Material Designの波紋に干渉します。"
         },
         {
           "name": "--background-activated-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the item background when pressed\n\n自動翻訳: 押されたときのアイテム背景の不透明度"
+          "docs": "押されたときのアイテム背景の不透明度"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the item when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのアイテムの背景"
+          "docs": "タブキーでフォーカスしたときのアイテムの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the item background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのアイテムの背景の不透明度"
+          "docs": "タブキーでフォーカスしたときのアイテムの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the item on hover\n\n自動翻訳: ホバー時のアイテムの背景"
+          "docs": "ホバー時のアイテムの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background of the item on hover\n\n自動翻訳: ホバー時のアイテムの背景の不透明度"
+          "docs": "ホバー時のアイテムの背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the item border\n\n自動翻訳: アイテムの縁取りの色"
+          "docs": "アイテムの縁取りの色"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Radius of the item border\n\n自動翻訳: アイテムの境界線の半径"
+          "docs": "アイテムの境界線の半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the item border\n\n自動翻訳: アイテムの枠のスタイル"
+          "docs": "アイテムの枠のスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the item border\n\n自動翻訳: アイテムの枠の幅"
+          "docs": "アイテムの枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the item\n\n自動翻訳: アイテムのカラー"
+          "docs": "アイテムのカラー"
         },
         {
           "name": "--color-activated",
           "annotation": "prop",
-          "docs": "Color of the item when pressed\n\n自動翻訳: 押したときのアイテムの色"
+          "docs": "押したときのアイテムの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the item when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのアイテムの色"
+          "docs": "タブキーでフォーカスしたときのアイテムの色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Color of the item on hover\n\n自動翻訳: ホバー時のアイテムの色"
+          "docs": "ホバー時のアイテムの色"
         },
         {
           "name": "--detail-icon-color",
           "annotation": "prop",
-          "docs": "Color of the item detail icon\n\n自動翻訳: アイテム詳細アイコンの色"
+          "docs": "アイテム詳細アイコンの色"
         },
         {
           "name": "--detail-icon-font-size",
           "annotation": "prop",
-          "docs": "Font size of the item detail icon\n\n自動翻訳: アイテム詳細アイコンのFont Size"
+          "docs": "アイテム詳細アイコンのFont Size"
         },
         {
           "name": "--detail-icon-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the item detail icon\n\n自動翻訳: アイテム詳細アイコンの不透明度"
+          "docs": "アイテム詳細アイコンの不透明度"
         },
         {
           "name": "--highlight-color-focused",
           "annotation": "prop",
-          "docs": "The color of the highlight on the item when focused\n\n自動翻訳: フォーカスされたときのアイテムのハイライトの色"
+          "docs": "フォーカスされたときのアイテムのハイライトの色"
         },
         {
           "name": "--highlight-color-invalid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the item when invalid\n\n自動翻訳: 無効時のアイテムのハイライトの色"
+          "docs": "無効時のアイテムのハイライトの色"
         },
         {
           "name": "--highlight-color-valid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the item when valid\n\n自動翻訳: 有効時のアイテム上のハイライトの色"
+          "docs": "有効時のアイテム上のハイライトの色"
         },
         {
           "name": "--highlight-height",
           "annotation": "prop",
-          "docs": "The height of the highlight on the item\n\n自動翻訳: アイテムに表示されるハイライトの高さ"
+          "docs": "アイテムに表示されるハイライトの高さ"
         },
         {
           "name": "--inner-border-width",
           "annotation": "prop",
-          "docs": "Width of the item inner border\n\n自動翻訳: アイテム内枠の幅"
+          "docs": "アイテム内枠の幅"
         },
         {
           "name": "--inner-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the item inner\n\n自動翻訳: アイテム内側のボックスシャドウ"
+          "docs": "アイテム内側のボックスシャドウ"
         },
         {
           "name": "--inner-padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item inner\n\n自動翻訳: アイテム内側のBottom Padding"
+          "docs": "アイテム内側のBottom Padding"
         },
         {
           "name": "--inner-padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなります。"
+          "docs": "方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--inner-padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner\n\n自動翻訳: 方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingがアイテム内側に入る"
+          "docs": "方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingがアイテム内側に入る"
         },
         {
           "name": "--inner-padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item inner\n\n自動翻訳: アイテム内側のTop Padding"
+          "docs": "アイテム内側のTop Padding"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the item\n\n自動翻訳: アイテムの最小高さ"
+          "docs": "アイテムの最小高さ"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the item\n\n自動翻訳: アイテムのBottom Padding"
+          "docs": "アイテムのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合はRight Padding、方向が右から左の場合はLeft Paddingで項目を囲む"
+          "docs": "方向が左から右の場合はRight Padding、方向が右から左の場合はLeft Paddingで項目を囲む"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item\n\n自動翻訳: 方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingで項目を囲む"
+          "docs": "方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingで項目を囲む"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the item\n\n自動翻訳: アイテムのTop Padding"
+          "docs": "アイテムのTop Padding"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the item ripple effect\n\n自動翻訳: アイテム波及効果の色"
+          "docs": "アイテム波及効果の色"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the item\n\n自動翻訳: アイテムの変遷"
+          "docs": "アイテムの変遷"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
+          "docs": "slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the item text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。"
+          "docs": "コンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "error",
-          "docs": "Content is placed under the item and displayed when an error is detected.\n\n自動翻訳: 項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。"
+          "docs": "項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。"
         },
         {
           "name": "helper",
-          "docs": "Content is placed under the item and displayed when no error is detected.\n\n自動翻訳: 項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。"
+          "docs": "項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the item text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。"
+          "docs": "コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "detail-icon",
-          "docs": "The chevron icon for the item. Only applies when `detail=\"true\"`.\n\n自動翻訳: アイテムのシェブロンアイコンを表示します。detail=\"true\"`のときのみ適用されます。"
+          "docs": "アイテムのシェブロンアイコンを表示します。detail=\"true\"`のときのみ適用されます。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button, anchor or div element that wraps all child elements.\n\n自動翻訳: すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。"
+          "docs": "すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。"
         }
       ],
       "dependents": [
@@ -9818,7 +9818,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -9873,7 +9873,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9894,7 +9894,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position determines where and how the label behaves inside an item.\n\n自動翻訳: 位置は、ラベルがアイテム内のどこで、どのように動作するかを決定します。",
+          "docs": "位置は、ラベルがアイテム内のどこで、どのように動作するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -9924,7 +9924,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.\n\n自動翻訳: ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能です。"
+          "docs": "ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能です。"
         }
       ],
       "slots": [],
@@ -9962,7 +9962,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -10017,7 +10017,7 @@
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
-          "docs": "How the bottom border should be displayed on the list header.\n\n自動翻訳: リストヘッダーの下辺のボーダーをどのように表示するか。",
+          "docs": "リストヘッダーの下辺のボーダーをどのように表示するか。",
           "docsTags": [],
           "values": [
             {
@@ -10045,7 +10045,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10068,32 +10068,32 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the list header\n\n自動翻訳: リストヘッダーの背景"
+          "docs": "リストヘッダーの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the list header border\n\n自動翻訳: リストヘッダーボーダーの色"
+          "docs": "リストヘッダーボーダーの色"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the list header border\n\n自動翻訳: リストヘッダーボーダーのスタイル"
+          "docs": "リストヘッダーボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the list header border\n\n自動翻訳: リストヘッダー枠の幅"
+          "docs": "リストヘッダー枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the list header text\n\n自動翻訳: リストヘッダーテキストの色"
+          "docs": "リストヘッダーテキストの色"
         },
         {
           "name": "--inner-border-width",
           "annotation": "prop",
-          "docs": "Width of the inner list header border\n\n自動翻訳: リストヘッダー内枠の幅"
+          "docs": "リストヘッダー内枠の幅"
         }
       ],
       "slots": [],
@@ -10127,7 +10127,7 @@
           "mutable": false,
           "attr": "inset",
           "reflectToAttr": false,
-          "docs": "If `true`, the list will have margin around it and rounded corners.\n\n自動翻訳: `true`の場合、リストの周囲に余白ができ、角が丸くなる。",
+          "docs": "`true`の場合、リストの周囲に余白ができ、角が丸くなる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10144,7 +10144,7 @@
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
-          "docs": "How the bottom border should be displayed on all items.\n\n自動翻訳: すべてのアイテムで、下のボーダーをどのように表示させるか。",
+          "docs": "すべてのアイテムで、下のボーダーをどのように表示させるか。",
           "docsTags": [],
           "values": [
             {
@@ -10172,7 +10172,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10197,7 +10197,7 @@
           },
           "signature": "closeSlidingItems() => Promise<boolean>",
           "parameters": [],
-          "docs": "If `ion-item-sliding` are used inside the list, this method closes\nany open sliding item.\n\nReturns `true` if an actual `ion-item-sliding` is closed.\n\n自動翻訳: リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。  実際に `ion-item-sliding` が閉じられた場合は `true` を返します。",
+          "docs": "リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。  実際に `ion-item-sliding` が閉じられた場合は `true` を返します。",
           "docsTags": []
         }
       ],
@@ -10235,7 +10235,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will animate.\n\n自動翻訳: `true`の場合、ロードインジケータをアニメーションで表示します。",
+          "docs": "`true`の場合、ロードインジケータをアニメーションで表示します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10252,7 +10252,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。",
+          "docs": "`true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10269,7 +10269,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
+          "docs": "カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -10291,7 +10291,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "Number of milliseconds to wait before dismissing the loading indicator.\n\n自動翻訳: ローディングインジケータを解除するまでの待ち時間（ミリ秒）。",
+          "docs": "ローディングインジケータを解除するまでの待ち時間（ミリ秒）。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -10307,7 +10307,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the loading indicator is presented.\n\n自動翻訳: ローディングインジケータが表示されたときに使用するアニメーションです。",
+          "docs": "ローディングインジケータが表示されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -10325,7 +10325,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the loader.\n\n自動翻訳: ローダーに渡す追加属性。",
+          "docs": "ローダーに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -10344,7 +10344,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+          "docs": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10360,7 +10360,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the loading indicator is dismissed.\n\n自動翻訳: ローディングインジケータが解除されたときに使用するアニメーションです。",
+          "docs": "ローディングインジケータが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -10379,7 +10379,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "Optional text content to display in the loading indicator.\n\n自動翻訳: ロードインジケータに表示するテキストコンテンツは任意です。",
+          "docs": "ロードインジケータに表示するテキストコンテンツは任意です。",
           "docsTags": [],
           "values": [
             {
@@ -10401,7 +10401,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10422,7 +10422,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the loading indicator.\n\n自動翻訳: `true`の場合、ロードインジケータの後ろにバックドロップが表示されます。",
+          "docs": "`true`の場合、ロードインジケータの後ろにバックドロップが表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10439,7 +10439,7 @@
           "mutable": true,
           "attr": "spinner",
           "reflectToAttr": false,
-          "docs": "The name of the spinner to display.\n\n自動翻訳: 表示するスピナーの名前。",
+          "docs": "表示するスピナーの名前。",
           "docsTags": [],
           "values": [
             {
@@ -10494,7 +10494,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ロードインジケータは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、ロードインジケータは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10515,7 +10515,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the loading overlay after it has been presented.\n\n自動翻訳: ローディングオーバーレイが提示された後、それを解除します。",
+          "docs": "ローディングオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -10535,7 +10535,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the loading did dismiss.\n\n自動翻訳: ローディングが解除されたタイミングを解決するPromiseを返します。",
+          "docs": "ローディングが解除されたタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -10546,7 +10546,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the loading will dismiss.\n\n自動翻訳: ローディングが解除されるタイミングを解決するPromiseを返します。",
+          "docs": "ローディングが解除されるタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -10557,7 +10557,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the loading overlay after it has been created.\n\n自動翻訳: 作成後のローディングオーバーレイを提示します。",
+          "docs": "作成後のローディングオーバーレイを提示します。",
           "docsTags": []
         }
       ],
@@ -10568,7 +10568,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading has dismissed.\n\n自動翻訳: ローディングが解除された後に発行されます。",
+          "docs": "ローディングが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -10577,7 +10577,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading has presented.\n\n自動翻訳: ローディングが提示された後に発行されます。",
+          "docs": "ローディングが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -10586,7 +10586,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading has dismissed.\n\n自動翻訳: ローディングが解除される前に発行されます。",
+          "docs": "ローディングが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -10595,7 +10595,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading has presented.\n\n自動翻訳: ローディングが提示される前に発行されます。",
+          "docs": "ローディングが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -10604,47 +10604,47 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
+          "docs": "背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the loading dialog\n\n自動翻訳: ローディングダイアログの背景"
+          "docs": "ローディングダイアログの背景"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the loading dialog\n\n自動翻訳: ローディングダイアログの高さ"
+          "docs": "ローディングダイアログの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the loading dialog\n\n自動翻訳: ローディングダイアログの最大の高さ"
+          "docs": "ローディングダイアログの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the loading dialog\n\n自動翻訳: ローディングダイアログの最大幅"
+          "docs": "ローディングダイアログの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the loading dialog\n\n自動翻訳: ローディングダイアログの最小高さ"
+          "docs": "ローディングダイアログの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the loading dialog\n\n自動翻訳: ローディングダイアログの最小幅"
+          "docs": "ローディングダイアログの最小幅"
         },
         {
           "name": "--spinner-color",
           "annotation": "prop",
-          "docs": "Color of the loading spinner\n\n自動翻訳: ローディングスピナーの色"
+          "docs": "ローディングスピナーの色"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the loading dialog\n\n自動翻訳: ローディングダイアログの幅"
+          "docs": "ローディングダイアログの幅"
         }
       ],
       "slots": [],
@@ -10688,7 +10688,7 @@
           "mutable": false,
           "attr": "auto-hide",
           "reflectToAttr": false,
-          "docs": "Automatically hides the menu button when the corresponding menu is not active\n\n自動翻訳: 対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。",
+          "docs": "対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10705,7 +10705,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -10760,7 +10760,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the menu button.\n\n自動翻訳: `true`の場合、ユーザはメニューボタンを操作することができません。",
+          "docs": "`true`の場合、ユーザはメニューボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10777,7 +10777,7 @@
           "mutable": false,
           "attr": "menu",
           "reflectToAttr": false,
-          "docs": "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle\n\n自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。",
+          "docs": "メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。",
           "docsTags": [],
           "values": [
             {
@@ -10796,7 +10796,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -10817,7 +10817,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
+          "docs": "ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -10858,78 +10858,78 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the menu button\n\n自動翻訳: メニューボタンの背景"
+          "docs": "メニューボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the menu button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景色"
+          "docs": "タブキーでフォーカスしたときのメニューボタンの背景色"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the menu button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景の不透明度"
+          "docs": "タブキーでフォーカスしたときのメニューボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the menu button on hover\n\n自動翻訳: ホバー時のメニューボタンの背景"
+          "docs": "ホバー時のメニューボタンの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the background on hover\n\n自動翻訳: ホバー時の背景の不透明度"
+          "docs": "ホバー時の背景の不透明度"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the menu button\n\n自動翻訳: メニューボタンのボーダー半径"
+          "docs": "メニューボタンのボーダー半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the menu button\n\n自動翻訳: メニューボタンの色"
+          "docs": "メニューボタンの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the menu button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのメニューボタンの色"
+          "docs": "タブキーでフォーカスしたときのメニューボタンの色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Color of the menu button on hover\n\n自動翻訳: ホバー時のメニューボタンの色"
+          "docs": "ホバー時のメニューボタンの色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the button\n\n自動翻訳: ボタンのBottom Padding"
+          "docs": "ボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button\n\n自動翻訳: ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the button\n\n自動翻訳: ボタンのTop Padding"
+          "docs": "ボタンのTop Padding"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "icon",
-          "docs": "The menu button icon (uses ion-icon).\n\n自動翻訳: メニューボタンのアイコン（ion-iconを使用）です。"
+          "docs": "メニューボタンのアイコン（ion-iconを使用）です。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。"
+          "docs": "すべての子要素を包むネイティブ HTML ボタン要素。"
         }
       ],
       "dependents": [],
@@ -10963,7 +10963,7 @@
           "mutable": false,
           "attr": "auto-hide",
           "reflectToAttr": false,
-          "docs": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu.\n\n自動翻訳: 対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にします。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
+          "docs": "対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にします。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -10980,7 +10980,7 @@
           "mutable": false,
           "attr": "menu",
           "reflectToAttr": false,
-          "docs": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active.\n\n自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルします。",
+          "docs": "メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルします。",
           "docsTags": [],
           "values": [
             {
@@ -11014,7 +11014,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed inside the toggle to act as the click target.\n\n自動翻訳: トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。"
+          "docs": "トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。"
         }
       ],
       "parts": [],
@@ -11045,7 +11045,7 @@
           "mutable": false,
           "attr": "content-id",
           "reflectToAttr": true,
-          "docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.\n\n自動翻訳: メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
+          "docs": "メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
           "docsTags": [],
           "values": [
             {
@@ -11064,7 +11064,7 @@
           "mutable": true,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the menu is disabled.\n\n自動翻訳: `true`の場合、メニューは無効化される。",
+          "docs": "`true`の場合、メニューは無効化される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -11081,7 +11081,7 @@
           "mutable": false,
           "attr": "max-edge-start",
           "reflectToAttr": false,
-          "docs": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered.\n\n自動翻訳: ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。",
+          "docs": "ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。",
           "docsTags": [],
           "default": "50",
           "values": [
@@ -11098,7 +11098,7 @@
           "mutable": false,
           "attr": "menu-id",
           "reflectToAttr": true,
-          "docs": "An id for the menu.\n\n自動翻訳: メニューのIDです。",
+          "docs": "メニューのIDです。",
           "docsTags": [],
           "values": [
             {
@@ -11117,7 +11117,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": true,
-          "docs": "Which side of the view the menu should be placed.\n\n自動翻訳: メニューがビューのどの側に配置されるべきか。",
+          "docs": "メニューがビューのどの側に配置されるべきか。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -11139,7 +11139,7 @@
           "mutable": false,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
-          "docs": "If `true`, swiping the menu is enabled.\n\n自動翻訳: `true`の場合、スワイプによるメニュー操作が有効になる。",
+          "docs": "`true`の場合、スワイプによるメニュー操作が有効になる。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11156,7 +11156,7 @@
           "mutable": true,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.\n\n自動翻訳: メニューの表示形式を指定します。利用可能なオプション。overlay\"`, `\"reveal\"`, `\"push\"`.",
+          "docs": "メニューの表示形式を指定します。利用可能なオプション。overlay\"`, `\"reveal\"`, `\"push\"`.",
           "docsTags": [],
           "values": [
             {
@@ -11179,7 +11179,7 @@
           },
           "signature": "close(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.\n\n自動翻訳: メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。",
+          "docs": "メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。",
           "docsTags": []
         },
         {
@@ -11190,7 +11190,7 @@
           },
           "signature": "isActive() => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.\n\n自動翻訳: メニューがアクティブであれば `true` を返します。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味します。",
+          "docs": "メニューがアクティブであれば `true` を返します。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味します。",
           "docsTags": []
         },
         {
@@ -11201,7 +11201,7 @@
           },
           "signature": "isOpen() => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` is the menu is open.\n\n自動翻訳: メニューが開いている場合は `true` を返します。",
+          "docs": "メニューが開いている場合は `true` を返します。",
           "docsTags": []
         },
         {
@@ -11212,7 +11212,7 @@
           },
           "signature": "open(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.\n\n自動翻訳: メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返します。",
+          "docs": "メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返します。",
           "docsTags": []
         },
         {
@@ -11223,7 +11223,7 @@
           },
           "signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: ボタンを開いたり閉じたりします。操作が正常に完了しない場合は `false` を返します。",
+          "docs": "ボタンを開いたり閉じたりします。操作が正常に完了しない場合は `false` を返します。",
           "docsTags": []
         },
         {
@@ -11234,7 +11234,7 @@
           },
           "signature": "toggle(animated?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.\n\n自動翻訳: メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、`false`を返します。",
+          "docs": "メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、`false`を返します。",
           "docsTags": []
         }
       ],
@@ -11245,7 +11245,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is closed.\n\n自動翻訳: メニューが閉じられたときに発します。",
+          "docs": "メニューが閉じられたときに発します。",
           "docsTags": []
         },
         {
@@ -11254,7 +11254,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is open.\n\n自動翻訳: メニューが開いているときに発行されます。",
+          "docs": "メニューが開いているときに発行されます。",
           "docsTags": []
         },
         {
@@ -11263,7 +11263,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is about to be closed.\n\n自動翻訳: メニューが閉じられようとするときに発します。",
+          "docs": "メニューが閉じられようとするときに発します。",
           "docsTags": []
         },
         {
@@ -11272,7 +11272,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the menu is about to be opened.\n\n自動翻訳: メニューが開かれようとするときに発します。",
+          "docs": "メニューが開かれようとするときに発します。",
           "docsTags": []
         }
       ],
@@ -11298,48 +11298,48 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the menu\n\n自動翻訳: メニューの背景"
+          "docs": "メニューの背景"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the menu\n\n自動翻訳: メニューの高さ"
+          "docs": "メニューの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the menu\n\n自動翻訳: メニューの最大の高さ"
+          "docs": "メニューの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the menu\n\n自動翻訳: メニューの最大幅"
+          "docs": "メニューの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the menu\n\n自動翻訳: メニューの高さの最小値"
+          "docs": "メニューの高さの最小値"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the menu\n\n自動翻訳: メニューの最小幅"
+          "docs": "メニューの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the menu\n\n自動翻訳: メニューの幅"
+          "docs": "メニューの幅"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "backdrop",
-          "docs": "The backdrop that appears over the main content when the menu is open.\n\n自動翻訳: メニューを開いているときに、メインコンテンツの上に表示される背景です。"
+          "docs": "メニューを開いているときに、メインコンテンツの上に表示される背景です。"
         },
         {
           "name": "container",
-          "docs": "The container for the menu content.\n\n自動翻訳: メニューの内容を格納するコンテナです。"
+          "docs": "メニューの内容を格納するコンテナです。"
         }
       ],
       "dependents": [],
@@ -11387,7 +11387,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal will animate.\n\n自動翻訳: `true`の場合、モーダルはアニメーションを行います。",
+          "docs": "`true`の場合、モーダルはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11404,7 +11404,7 @@
           "mutable": false,
           "attr": "backdrop-breakpoint",
           "reflectToAttr": false,
-          "docs": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified.\n\n自動翻訳: シートモーダル使用時に背景がフェードインし始めるポイントを示す0～1の10進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。",
+          "docs": "シートモーダル使用時に背景がフェードインし始めるポイントを示す0～1の10進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -11421,7 +11421,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとモーダルは解除されます。",
+          "docs": "`true`の場合、バックドロップがクリックされるとモーダルは解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11437,7 +11437,7 @@
           "type": "number[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]\n\n自動翻訳: シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1]",
+          "docs": "シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1]",
           "docsTags": [],
           "values": [
             {
@@ -11456,7 +11456,7 @@
           "mutable": false,
           "attr": "can-dismiss",
           "reflectToAttr": false,
-          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\n自動翻訳: モーダルが `dismiss` メソッドを呼び出したときに、終了できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
+          "docs": "モーダルが `dismiss` メソッドを呼び出したときに、終了できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
           "docsTags": [],
           "values": [
             {
@@ -11480,7 +11480,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the modal is presented.\n\n自動翻訳: モーダルが表示されたときに使用するアニメーション。",
+          "docs": "モーダルが表示されたときに使用するアニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -11499,7 +11499,7 @@
           "mutable": false,
           "attr": "handle",
           "reflectToAttr": false,
-          "docs": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties.\n\n自動翻訳: シートモーダルの上部に表示される水平線です。 `breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
+          "docs": "シートモーダルの上部に表示される水平線です。 `breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。",
           "docsTags": [],
           "values": [
             {
@@ -11518,7 +11518,7 @@
           "mutable": false,
           "attr": "handle-behavior",
           "reflectToAttr": false,
-          "docs": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal).\n\n自動翻訳: ハンドルが押されたときのシートモーダルのインタラクション動作です。  デフォルトは `\"none\"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle\"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle` プロパティが `false` に設定されている場合、または `breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。",
+          "docs": "ハンドルが押されたときのシートモーダルのインタラクション動作です。  デフォルトは `\"none\"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle\"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle` プロパティが `false` に設定されている場合、または `breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。",
           "docsTags": [],
           "default": "'none'",
           "values": [
@@ -11542,7 +11542,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the modal.\n\n自動翻訳: モーダルに渡す追加属性。",
+          "docs": "モーダルに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -11561,7 +11561,7 @@
           "mutable": false,
           "attr": "initial-breakpoint",
           "reflectToAttr": false,
-          "docs": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array.\n\n自動翻訳: シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。",
+          "docs": "シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -11580,7 +11580,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code.\n\n自動翻訳: `true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
+          "docs": "`true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -11597,7 +11597,7 @@
           "mutable": false,
           "attr": "keep-contents-mounted",
           "reflectToAttr": false,
-          "docs": "If `true`, the component passed into `ion-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue.\n\n自動翻訳: `true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。  注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。",
+          "docs": "`true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。  注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -11614,7 +11614,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+          "docs": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11630,7 +11630,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the modal is dismissed.\n\n自動翻訳: モーダルが解除されたときに使用するアニメーションです。",
+          "docs": "モーダルが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -11649,7 +11649,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -11669,7 +11669,7 @@
           "type": "HTMLElement | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.\n\n自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOS modeでのみ適用されます。",
+          "docs": "モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOS modeでのみ適用されます。",
           "docsTags": [],
           "values": [
             {
@@ -11688,7 +11688,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.\n\n自動翻訳: `true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。",
+          "docs": "`true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11705,7 +11705,7 @@
           "mutable": false,
           "attr": "swipe-to-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.\n\n自動翻訳: `true`の場合、スワイプでモーダルを解除することができます。iOS modeでのみ適用されます。",
+          "docs": "`true`の場合、スワイプでモーダルを解除することができます。iOS modeでのみ適用されます。",
           "docsTags": [
             {
               "name": "deprecated",
@@ -11728,7 +11728,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked.\n\n自動翻訳: クリックされたときにモーダルを開かせるトリガー要素に対応するIDです。",
+          "docs": "クリックされたときにモーダルを開かせるトリガー要素に対応するIDです。",
           "docsTags": [],
           "values": [
             {
@@ -11751,7 +11751,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the modal overlay after it has been presented.\n\n自動翻訳: モーダルオーバーレイが表示された後、それを解除します。",
+          "docs": "モーダルオーバーレイが表示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -11771,7 +11771,7 @@
           },
           "signature": "getCurrentBreakpoint() => Promise<number | undefined>",
           "parameters": [],
-          "docs": "Returns the current breakpoint of a sheet style modal\n\n自動翻訳: シートスタイルモーダルの現在のブレークポイントを返します。",
+          "docs": "シートスタイルモーダルの現在のブレークポイントを返します。",
           "docsTags": []
         },
         {
@@ -11782,7 +11782,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the modal did dismiss.\n\n自動翻訳: モーダルが解除されたときに解決するPromiseを返します。",
+          "docs": "モーダルが解除されたときに解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -11793,7 +11793,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the modal will dismiss.\n\n自動翻訳: モーダルがいつ解散するかを解決するPromiseを返します。",
+          "docs": "モーダルがいつ解散するかを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -11804,7 +11804,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the modal overlay after it has been created.\n\n自動翻訳: モーダルオーバーレイを作成した後に提示します。",
+          "docs": "モーダルオーバーレイを作成した後に提示します。",
           "docsTags": []
         },
         {
@@ -11815,7 +11815,7 @@
           },
           "signature": "setCurrentBreakpoint(breakpoint: number) => Promise<void>",
           "parameters": [],
-          "docs": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.\n\n自動翻訳: シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。",
+          "docs": "シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。",
           "docsTags": []
         }
       ],
@@ -11826,7 +11826,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.\n\n自動翻訳: モーダルが解散した後に発行されます。ionModalDidDismiss の略記です。",
+          "docs": "モーダルが解散した後に発行されます。ionModalDidDismiss の略記です。",
           "docsTags": []
         },
         {
@@ -11835,7 +11835,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.\n\n自動翻訳: モーダルが提示された後に発行されます。ionModalDidPresent の略記です。",
+          "docs": "モーダルが提示された後に発行されます。ionModalDidPresent の略記です。",
           "docsTags": []
         },
         {
@@ -11844,7 +11844,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal breakpoint has changed.\n\n自動翻訳: モーダルブレークポイントが変更された後に発行されます。",
+          "docs": "モーダルブレークポイントが変更された後に発行されます。",
           "docsTags": []
         },
         {
@@ -11853,7 +11853,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has dismissed.\n\n自動翻訳: モーダルが終了した後に発行されます。",
+          "docs": "モーダルが終了した後に発行されます。",
           "docsTags": []
         },
         {
@@ -11862,7 +11862,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the modal has presented.\n\n自動翻訳: モーダルが提示された後に発行されます。",
+          "docs": "モーダルが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -11871,7 +11871,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has dismissed.\n\n自動翻訳: モーダルが解散する前に発行されます。",
+          "docs": "モーダルが解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -11880,7 +11880,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has presented.\n\n自動翻訳: モーダルが提示される前に発行されます。",
+          "docs": "モーダルが提示される前に発行されます。",
           "docsTags": []
         },
         {
@@ -11889,7 +11889,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.\n\n自動翻訳: モーダルが解散する前に発行されます。ionModalWillDismiss の略記です。",
+          "docs": "モーダルが解散する前に発行されます。ionModalWillDismiss の略記です。",
           "docsTags": []
         },
         {
@@ -11898,7 +11898,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.\n\n自動翻訳: モーダルが提示される前に発行されます。ionModalWillPresent の略記です。",
+          "docs": "モーダルが提示される前に発行されます。ionModalWillPresent の略記です。",
           "docsTags": []
         }
       ],
@@ -11907,82 +11907,82 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
+          "docs": "背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the modal content\n\n自動翻訳: モーダルコンテンツの背景"
+          "docs": "モーダルコンテンツの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the modal content\n\n自動翻訳: モーダルコンテンツのボーダーカラー"
+          "docs": "モーダルコンテンツのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the modal content\n\n自動翻訳: モーダルコンテンツのボーダー半径"
+          "docs": "モーダルコンテンツのボーダー半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the modal content\n\n自動翻訳: モーダルコンテンツのボーダースタイル"
+          "docs": "モーダルコンテンツのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the modal content\n\n自動翻訳: モーダルコンテンツのボーダー幅"
+          "docs": "モーダルコンテンツのボーダー幅"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the modal\n\n自動翻訳: モーダルの高さ"
+          "docs": "モーダルの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the modal\n\n自動翻訳: モーダルの最大の高さ"
+          "docs": "モーダルの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the modal\n\n自動翻訳: モーダルの最大幅"
+          "docs": "モーダルの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the modal\n\n自動翻訳: モーダルの最小高さ"
+          "docs": "モーダルの最小高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the modal\n\n自動翻訳: モーダルの最小幅"
+          "docs": "モーダルの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the modal\n\n自動翻訳: モーダルの幅"
+          "docs": "モーダルの幅"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed inside of the `.modal-content` element.\n\n自動翻訳: コンテンツは `.modal-content` 要素の内側に配置されます。"
+          "docs": "コンテンツは `.modal-content` 要素の内側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "backdrop",
-          "docs": "The `ion-backdrop` element.\n\n自動翻訳: ion-backdrop`要素です。"
+          "docs": "ion-backdrop`要素です。"
         },
         {
           "name": "content",
-          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトslotのラッパー要素です。"
+          "docs": "デフォルトslotのラッパー要素です。"
         },
         {
           "name": "handle",
-          "docs": "The handle that is displayed at the top of the sheet modal when `handle=\"true\"`.\n\n自動翻訳: handle=\"true\"`のときにシートモーダルの上部に表示されるハンドルです。"
+          "docs": "handle=\"true\"`のときにシートモーダルの上部に表示されるハンドルです。"
         }
       ],
       "dependents": [],
@@ -12009,7 +12009,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: ナビゲート先のコンポーネント。 `routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
+          "docs": "ナビゲート先のコンポーネント。 `routerDirection`が `\"forward\"` または `\"root\"` である場合にのみ使用します。",
           "docsTags": [],
           "values": [
             {
@@ -12039,7 +12039,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.\n\n自動翻訳: コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用します。",
+          "docs": "コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用します。",
           "docsTags": [],
           "values": [
             {
@@ -12057,7 +12057,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The transition animation when navigating to another page.\n\n自動翻訳: 別ページに移動する際の遷移アニメーション。",
+          "docs": "別ページに移動する際の遷移アニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -12076,7 +12076,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "The transition direction when navigating to another page.\n\n自動翻訳: 別ページに移動する際の遷移方向です。",
+          "docs": "別ページに移動する際の遷移方向です。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -12121,7 +12121,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the nav should animate the transition of components.\n\n自動翻訳: `true`の場合、コンポーネントの遷移をアニメーションで表現します。",
+          "docs": "`true`の場合、コンポーネントの遷移をアニメーションで表現します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12137,7 +12137,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions.\n\n自動翻訳: デフォルトでは、`ion-nav` はmode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
+          "docs": "デフォルトでは、`ion-nav` はmode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
           "docsTags": [],
           "values": [
             {
@@ -12156,7 +12156,7 @@
           "mutable": false,
           "attr": "root",
           "reflectToAttr": false,
-          "docs": "Root NavComponent to load\n\n自動翻訳: ロードするルートNavComponent",
+          "docs": "ロードするルートNavComponent",
           "docsTags": [],
           "values": [
             {
@@ -12186,7 +12186,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Any parameters for the root component\n\n自動翻訳: ルートコンポーネントの任意のパラメータ",
+          "docs": "ルートコンポーネントの任意のパラメータ",
           "docsTags": [],
           "values": [
             {
@@ -12205,7 +12205,7 @@
           "mutable": true,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
-          "docs": "If the nav component should allow for swipe-to-go-back.\n\n自動翻訳: ナビコンポーネントがスワイプで戻ることができるようにする場合。",
+          "docs": "ナビコンポーネントがスワイプで戻ることができるようにする場合。",
           "docsTags": [],
           "values": [
             {
@@ -12228,7 +12228,7 @@
           },
           "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
           "parameters": [],
-          "docs": "Returns `true` if the current view can go back.\n\n自動翻訳: 現在のビューが戻ることができる場合は `true` を返します。",
+          "docs": "現在のビューが戻ることができる場合は `true` を返します。",
           "docsTags": [
             {
               "name": "param",
@@ -12244,7 +12244,7 @@
           },
           "signature": "getActive() => Promise<ViewController | undefined>",
           "parameters": [],
-          "docs": "Get the active view.\n\n自動翻訳: アクティブビューを取得します。",
+          "docs": "アクティブビューを取得します。",
           "docsTags": []
         },
         {
@@ -12255,7 +12255,7 @@
           },
           "signature": "getByIndex(index: number) => Promise<ViewController | undefined>",
           "parameters": [],
-          "docs": "Get the view at the specified index.\n\n自動翻訳: 指定されたインデックスにあるビューを取得します。",
+          "docs": "指定されたインデックスにあるビューを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -12271,7 +12271,7 @@
           },
           "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
           "parameters": [],
-          "docs": "Get the previous view.\n\n自動翻訳: 前のビューを取得します。",
+          "docs": "前のビューを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -12287,7 +12287,7 @@
           },
           "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.\n\n自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。",
+          "docs": "指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。",
           "docsTags": [
             {
               "name": "param",
@@ -12319,7 +12319,7 @@
           },
           "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.\n\n自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
+          "docs": "指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
           "docsTags": [
             {
               "name": "param",
@@ -12347,7 +12347,7 @@
           },
           "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.\n\n自動翻訳: ナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。",
+          "docs": "ナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。",
           "docsTags": [
             {
               "name": "param",
@@ -12367,7 +12367,7 @@
           },
           "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Pop to a specific index in the navigation stack.\n\n自動翻訳: ナビゲーションスタック内の特定のインデックスにポップします。",
+          "docs": "ナビゲーションスタック内の特定のインデックスにポップします。",
           "docsTags": [
             {
               "name": "param",
@@ -12391,7 +12391,7 @@
           },
           "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Navigate back to the root of the stack, no matter how far back that is.\n\n自動翻訳: スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。",
+          "docs": "スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。",
           "docsTags": [
             {
               "name": "param",
@@ -12411,7 +12411,7 @@
           },
           "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.\n\n自動翻訳: 新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。",
+          "docs": "新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。",
           "docsTags": [
             {
               "name": "param",
@@ -12439,7 +12439,7 @@
           },
           "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Removes a component from the navigation stack at the specified index.\n\n自動翻訳: 指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。",
+          "docs": "指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。",
           "docsTags": [
             {
               "name": "param",
@@ -12467,7 +12467,7 @@
           },
           "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.\n\n自動翻訳: 現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。",
+          "docs": "現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。",
           "docsTags": [
             {
               "name": "param",
@@ -12491,7 +12491,7 @@
           },
           "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
-          "docs": "Set the root for the current navigation stack to a component.\n\n自動翻訳: 現在のナビゲーションスタックのルートをコンポーネントに設定します。",
+          "docs": "現在のナビゲーションスタックのルートをコンポーネントに設定します。",
           "docsTags": [
             {
               "name": "param",
@@ -12519,7 +12519,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the nav has changed components\n\n自動翻訳: ナビのコンポーネントが変更されたときに発生するイベント",
+          "docs": "ナビのコンポーネントが変更されたときに発生するイベント",
           "docsTags": []
         },
         {
@@ -12528,7 +12528,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the nav will change components\n\n自動翻訳: ナビコンポーネントが変更されたときに発生するイベント",
+          "docs": "ナビコンポーネントが変更されたときに発生するイベント",
           "docsTags": []
         }
       ],
@@ -12559,7 +12559,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -12614,7 +12614,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -12637,7 +12637,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the note\n\n自動翻訳: ノートの色"
+          "docs": "ノートの色"
         }
       ],
       "slots": [],
@@ -12671,7 +12671,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the picker will animate.\n\n自動翻訳: `true`の場合、ピッカーはアニメーションを行います。",
+          "docs": "`true`の場合、ピッカーはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12688,7 +12688,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the picker will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされるとピッカーが解除される。",
+          "docs": "`true`の場合、バックドロップがクリックされるとピッカーが解除される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12704,7 +12704,7 @@
           "type": "PickerButton[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of buttons to be displayed at the top of the picker.\n\n自動翻訳: ピッカーの上部に表示されるボタンの配列。",
+          "docs": "ピッカーの上部に表示されるボタンの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -12720,7 +12720,7 @@
           "type": "PickerColumn[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of columns to be displayed in the picker.\n\n自動翻訳: ピッカーに表示されるカラムの配列。",
+          "docs": "ピッカーに表示されるカラムの配列。",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -12737,7 +12737,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
+          "docs": "カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -12759,7 +12759,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "Number of milliseconds to wait before dismissing the picker.\n\n自動翻訳: ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。",
+          "docs": "ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -12775,7 +12775,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the picker is presented.\n\n自動翻訳: ピッカーが表示されたときに使用するアニメーション。",
+          "docs": "ピッカーが表示されたときに使用するアニメーション。",
           "docsTags": [],
           "values": [
             {
@@ -12793,7 +12793,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the picker.\n\n自動翻訳: ピッカーに渡す追加属性。",
+          "docs": "ピッカーに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -12812,7 +12812,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+          "docs": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12828,7 +12828,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the picker is dismissed.\n\n自動翻訳: ピッカーが解除されたときに使用するアニメーションです。",
+          "docs": "ピッカーが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -12847,7 +12847,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -12868,7 +12868,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the picker.\n\n自動翻訳: `true`の場合、ピッカーの後ろに背景が表示されます。",
+          "docs": "`true`の場合、ピッカーの後ろに背景が表示されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -12889,7 +12889,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the picker overlay after it has been presented.\n\n自動翻訳: ピッカー・オーバーレイが表示された後、それを解除します。",
+          "docs": "ピッカー・オーバーレイが表示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -12909,7 +12909,7 @@
           },
           "signature": "getColumn(name: string) => Promise<PickerColumn | undefined>",
           "parameters": [],
-          "docs": "Get the column that matches the specified name.\n\n自動翻訳: 指定された名前に一致するカラムを取得します。",
+          "docs": "指定された名前に一致するカラムを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -12925,7 +12925,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the picker did dismiss.\n\n自動翻訳: ピッカーが解散したことを解決するPromiseを返します。",
+          "docs": "ピッカーが解散したことを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -12936,7 +12936,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the picker will dismiss.\n\n自動翻訳: ピッカーが解散するタイミングを解決するPromiseを返します。",
+          "docs": "ピッカーが解散するタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -12947,7 +12947,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the picker overlay after it has been created.\n\n自動翻訳: ピッカー・オーバーレイを作成した後に提示します。",
+          "docs": "ピッカー・オーバーレイを作成した後に提示します。",
           "docsTags": []
         }
       ],
@@ -12958,7 +12958,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has dismissed.\n\n自動翻訳: ピッカーが解散した後に発行されます。",
+          "docs": "ピッカーが解散した後に発行されます。",
           "docsTags": []
         },
         {
@@ -12967,7 +12967,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has presented.\n\n自動翻訳: ピッカーが提示された後に発行されます。",
+          "docs": "ピッカーが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -12976,7 +12976,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has dismissed.\n\n自動翻訳: ピッカーが解散する前に発行されます。",
+          "docs": "ピッカーが解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -12985,7 +12985,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has presented.\n\n自動翻訳: ピッカーが提示される前に発行されます。",
+          "docs": "ピッカーが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -12994,67 +12994,67 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
+          "docs": "背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the picker\n\n自動翻訳: ピッカーの背景"
+          "docs": "ピッカーの背景"
         },
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "Background of the picker in rgb format\n\n自動翻訳: ピッカーの背景（rgb形式）"
+          "docs": "ピッカーの背景（rgb形式）"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the picker\n\n自動翻訳: ピッカーのボーダーカラー"
+          "docs": "ピッカーのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the picker\n\n自動翻訳: ピッカーのボーダー半径"
+          "docs": "ピッカーのボーダー半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the picker\n\n自動翻訳: ピッカーのボーダースタイル"
+          "docs": "ピッカーのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the picker\n\n自動翻訳: ピッカーのボーダー幅"
+          "docs": "ピッカーのボーダー幅"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the picker\n\n自動翻訳: ピッカーの高さ"
+          "docs": "ピッカーの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the picker\n\n自動翻訳: ピッカーの最大の高さ"
+          "docs": "ピッカーの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the picker\n\n自動翻訳: ピッカーの最大幅"
+          "docs": "ピッカーの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the picker\n\n自動翻訳: ピッカーの最小の高さ"
+          "docs": "ピッカーの最小の高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the picker\n\n自動翻訳: ピッカーの最小幅"
+          "docs": "ピッカーの最小幅"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the picker\n\n自動翻訳: ピッカーの幅"
+          "docs": "ピッカーの幅"
         }
       ],
       "slots": [],
@@ -13106,7 +13106,7 @@
           "mutable": true,
           "attr": "alignment",
           "reflectToAttr": false,
-          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.\n\n自動翻訳: ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` modeでは `'center'` で、`md` modeでは `'start'` です。",
+          "docs": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` modeでは `'center'` で、`md` modeでは `'start'` です。",
           "docsTags": [],
           "values": [
             {
@@ -13134,7 +13134,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will animate.\n\n自動翻訳: `true`の場合、ポップオーバーはアニメーションを行います。",
+          "docs": "`true`の場合、ポップオーバーはアニメーションを行います。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13151,7 +13151,7 @@
           "mutable": false,
           "attr": "arrow",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode.\n\n自動翻訳: `true`の場合、`ios` modeで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。 `md` modeでは適用されない。",
+          "docs": "`true`の場合、`ios` modeで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。 `md` modeでは適用されない。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13168,7 +13168,7 @@
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will be dismissed when the backdrop is clicked.\n\n自動翻訳: `true`の場合、バックドロップがクリックされたときにポップオーバーが解除される。",
+          "docs": "`true`の場合、バックドロップがクリックされたときにポップオーバーが解除される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13185,7 +13185,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`.\n\n自動翻訳: ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでいいです。",
+          "docs": "ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでいいです。",
           "docsTags": [],
           "values": [
             {
@@ -13212,7 +13212,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component.\n\n自動翻訳: ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。",
+          "docs": "ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。",
           "docsTags": [],
           "values": [
             {
@@ -13231,7 +13231,7 @@
           "mutable": false,
           "attr": "dismiss-on-select",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will be automatically\ndismissed when the content has been clicked.\n\n自動翻訳: `true`の場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。",
+          "docs": "`true`の場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13247,7 +13247,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the popover is presented.\n\n自動翻訳: ポップオーバーが表示されたときに使用するアニメーションです。",
+          "docs": "ポップオーバーが表示されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -13266,7 +13266,7 @@
           "mutable": false,
           "attr": "event",
           "reflectToAttr": false,
-          "docs": "The event to pass to the popover animation.\n\n自動翻訳: ポップオーバー・アニメーションに渡すイベントです。",
+          "docs": "ポップオーバー・アニメーションに渡すイベントです。",
           "docsTags": [],
           "values": [
             {
@@ -13281,7 +13281,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the popover.\n\n自動翻訳: ポップオーバーに渡す追加属性。",
+          "docs": "ポップオーバーに渡す追加属性。",
           "docsTags": [],
           "values": [
             {
@@ -13300,7 +13300,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will open. If `false`, the popover will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the popoverController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe popover dismisses. You will need to do that in your code.\n\n自動翻訳: `true`の場合、ポップオーバーは開く。もし `false` ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または `trigger` プロパティを使用します。注意: ポップオーバーが閉じると `isOpen` は自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
+          "docs": "`true`の場合、ポップオーバーは開く。もし `false` ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または `trigger` プロパティを使用します。注意: ポップオーバーが閉じると `isOpen` は自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13317,7 +13317,7 @@
           "mutable": false,
           "attr": "keep-contents-mounted",
           "reflectToAttr": false,
-          "docs": "If `true`, the component passed into `ion-popover` will\nautomatically be mounted when the popover is created. The\ncomponent will remain mounted even when the popover is dismissed.\nHowever, the component will be destroyed when the popover is\ndestroyed. This property is not reactive and should only be\nused when initially creating a popover.\n\nNote: This feature only applies to inline popovers in JavaScript\nframeworks such as Angular, React, and Vue.\n\n自動翻訳: `true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。  注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。",
+          "docs": "`true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。  注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13334,7 +13334,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+          "docs": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13350,7 +13350,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the popover is dismissed.\n\n自動翻訳: ポップオーバーが解除されたときに使用するアニメーションです。",
+          "docs": "ポップオーバーが解除されたときに使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -13369,7 +13369,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -13390,7 +13390,7 @@
           "mutable": false,
           "attr": "reference",
           "reflectToAttr": false,
-          "docs": "Describes what to position the popover relative to.\nIf `'trigger'`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `'event'`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.\n\n自動翻訳: ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
+          "docs": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
           "docsTags": [],
           "default": "'trigger'",
           "values": [
@@ -13412,7 +13412,7 @@
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
-          "docs": "If `true`, a backdrop will be displayed behind the popover.\nThis property controls whether or not the backdrop\ndarkens the screen when the popover is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM.\n\n自動翻訳: `true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、またはDOMに存在するかどうかを制御しません。",
+          "docs": "`true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、またはDOMに存在するかどうかを制御しません。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -13429,7 +13429,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.\n\n自動翻訳: ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
+          "docs": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -13467,7 +13467,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "Describes how to calculate the popover width.\nIf `'cover'`, the popover width will match the width of the trigger.\nIf `'auto'`, the popover width will be determined by the content in\nthe popover.\n\n自動翻訳: ポップオーバーの幅を計算する方法を説明します。cover'` の場合、ポップオーバーの幅はトリガーの幅と一致します。auto'` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定されます。",
+          "docs": "ポップオーバーの幅を計算する方法を説明します。cover'` の場合、ポップオーバーの幅はトリガーの幅と一致します。auto'` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定されます。",
           "docsTags": [],
           "default": "'auto'",
           "values": [
@@ -13489,7 +13489,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、ポップオーバーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、ポップオーバーは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13506,7 +13506,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the popover to open. Use the `trigger-action`\nproperty to customize the interaction that results in\nthe popover opening.\n\n自動翻訳: ポップオーバーを開かせるトリガー要素に対応するIDです。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。",
+          "docs": "ポップオーバーを開かせるトリガー要素に対応するIDです。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。",
           "docsTags": [],
           "values": [
             {
@@ -13525,7 +13525,7 @@
           "mutable": false,
           "attr": "trigger-action",
           "reflectToAttr": false,
-          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.\n\n自動翻訳: どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
+          "docs": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
           "docsTags": [],
           "default": "'click'",
           "values": [
@@ -13555,7 +13555,7 @@
           },
           "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the popover overlay after it has been presented.\n\n自動翻訳: ポップオーバーオーバーレイが提示された後、それを解除します。",
+          "docs": "ポップオーバーオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -13579,7 +13579,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the popover did dismiss.\n\n自動翻訳: ポップオーバーが解除されたタイミングを解決するPromiseを返します。",
+          "docs": "ポップオーバーが解除されたタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -13590,7 +13590,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the popover will dismiss.\n\n自動翻訳: ポップオーバーが解除されるタイミングを解決するPromiseを返します。",
+          "docs": "ポップオーバーが解除されるタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -13601,7 +13601,7 @@
           },
           "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
           "parameters": [],
-          "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.\n\n自動翻訳: ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。",
+          "docs": "ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。",
           "docsTags": []
         }
       ],
@@ -13612,7 +13612,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has dismissed.\nShorthand for ionPopoverDidDismiss.\n\n自動翻訳: ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。",
+          "docs": "ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13621,7 +13621,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has presented.\nShorthand for ionPopoverWillDismiss.\n\n自動翻訳: ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。",
+          "docs": "ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13630,7 +13630,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has dismissed.\n\n自動翻訳: ポップオーバーが解除された後に発行されます。",
+          "docs": "ポップオーバーが解除された後に発行されます。",
           "docsTags": []
         },
         {
@@ -13639,7 +13639,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the popover has presented.\n\n自動翻訳: ポップオーバーが表示された後に発行されます。",
+          "docs": "ポップオーバーが表示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -13648,7 +13648,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has dismissed.\n\n自動翻訳: ポップオーバーが解除される前に発行されます。",
+          "docs": "ポップオーバーが解除される前に発行されます。",
           "docsTags": []
         },
         {
@@ -13657,7 +13657,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has presented.\n\n自動翻訳: ポップオーバーが表示される前に発行されます。",
+          "docs": "ポップオーバーが表示される前に発行されます。",
           "docsTags": []
         },
         {
@@ -13666,7 +13666,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.\n\n自動翻訳: ポップオーバーが解散する前に発行されます。ionPopoverWillDismissの略記です。",
+          "docs": "ポップオーバーが解散する前に発行されます。ionPopoverWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13675,7 +13675,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the popover has presented.\nShorthand for ionPopoverWillPresent.\n\n自動翻訳: ポップオーバーが提示される前に発行されます。ionPopoverWillPresentの略記です。",
+          "docs": "ポップオーバーが提示される前に発行されます。ionPopoverWillPresentの略記です。",
           "docsTags": []
         }
       ],
@@ -13684,77 +13684,77 @@
         {
           "name": "--backdrop-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the backdrop\n\n自動翻訳: 背景の不透明度"
+          "docs": "背景の不透明度"
         },
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the popover\n\n自動翻訳: ポップオーバーの背景"
+          "docs": "ポップオーバーの背景"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the popover\n\n自動翻訳: ポップオーバーのボックスシャドウ"
+          "docs": "ポップオーバーのボックスシャドウ"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the popover\n\n自動翻訳: ポップオーバーの高さ"
+          "docs": "ポップオーバーの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the popover\n\n自動翻訳: ポップオーバーの最大の高さ"
+          "docs": "ポップオーバーの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the popover\n\n自動翻訳: ポップオーバーの最大幅"
+          "docs": "ポップオーバーの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the popover\n\n自動翻訳: ポップオーバーの高さの最小値"
+          "docs": "ポップオーバーの高さの最小値"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the popover\n\n自動翻訳: ポップオーバーの最小幅"
+          "docs": "ポップオーバーの最小幅"
         },
         {
           "name": "--offset-x",
           "annotation": "prop",
-          "docs": "The amount to move the popover by on the x-axis\n\n自動翻訳: ポップオーバーをX軸方向に移動させる量"
+          "docs": "ポップオーバーをX軸方向に移動させる量"
         },
         {
           "name": "--offset-y",
           "annotation": "prop",
-          "docs": "The amount to move the popover by on the y-axis\n\n自動翻訳: ポップオーバーをY軸方向に移動させる量を指定します。"
+          "docs": "ポップオーバーをY軸方向に移動させる量を指定します。"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the popover\n\n自動翻訳: ポップオーバーの幅"
+          "docs": "ポップオーバーの幅"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed inside of the `.popover-content` element.\n\n自動翻訳: コンテンツは `.popover-content` 要素の内部に配置される。"
+          "docs": "コンテンツは `.popover-content` 要素の内部に配置される。"
         }
       ],
       "parts": [
         {
           "name": "arrow",
-          "docs": "The arrow that points to the reference element. Only applies on `ios` mode.\n\n自動翻訳: 参照要素を指し示す矢印。`ios` mode時のみ適用される。"
+          "docs": "参照要素を指し示す矢印。`ios` mode時のみ適用される。"
         },
         {
           "name": "backdrop",
-          "docs": "The `ion-backdrop` element.\n\n自動翻訳: ion-backdrop`要素です。"
+          "docs": "ion-backdrop`要素です。"
         },
         {
           "name": "content",
-          "docs": "The wrapper element for the default slot.\n\n自動翻訳: デフォルトslotのラッパー要素です。"
+          "docs": "デフォルトslotのラッパー要素です。"
         }
       ],
       "dependents": [
@@ -13807,7 +13807,7 @@
           "mutable": false,
           "attr": "buffer",
           "reflectToAttr": false,
-          "docs": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1].\n\n自動翻訳: バッファと値が1より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。",
+          "docs": "バッファと値が1より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -13824,7 +13824,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -13879,7 +13879,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -13900,7 +13900,7 @@
           "mutable": false,
           "attr": "reversed",
           "reflectToAttr": false,
-          "docs": "If true, reverse the progress bar direction.\n\n自動翻訳: true の場合、プログレスバーの方向を反転させます。",
+          "docs": "true の場合、プログレスバーの方向を反転させます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13917,7 +13917,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).\n\n自動翻訳: 処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate\"` (アニメーションなし), `\"indeterminate\"` (左から右へアニメーションする).",
+          "docs": "処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate\"` (アニメーションなし), `\"indeterminate\"` (左から右へアニメーションする).",
           "docsTags": [],
           "default": "'determinate'",
           "values": [
@@ -13939,7 +13939,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1].\n\n自動翻訳: この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものです。値は [0, 1] の間であるべきです。",
+          "docs": "この値は、`type`が`\"determinate\"`である場合に、アクティブバーをどれだけ表示するかを決定するものです。値は [0, 1] の間であるべきです。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -13958,32 +13958,32 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the progress track, or the buffer bar if `buffer` is set\n\n自動翻訳: プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。"
+          "docs": "プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。"
         },
         {
           "name": "--buffer-background",
           "annotation": "prop",
-          "docs": "DEPRECATED, use `--background` instead\n\n自動翻訳: DEPRECATED、代わりに `--background` を使用します。"
+          "docs": "DEPRECATED、代わりに `--background` を使用します。"
         },
         {
           "name": "--progress-background",
           "annotation": "prop",
-          "docs": "Background of the progress bar representing the current value\n\n自動翻訳: 現在値を表すプログレスバーの背景"
+          "docs": "現在値を表すプログレスバーの背景"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "progress",
-          "docs": "The progress bar that shows the current value when `type` is `\"determinate\"` and slides back and forth when `type` is `\"indeterminate\"`.\n\n自動翻訳: type`が`\"determinate\"`のときは現在値を表示し、`type`が`\"indeterminate\"`のときは前後にスライドするプログレスバーです。"
+          "docs": "type`が`\"determinate\"`のときは現在値を表示し、`type`が`\"indeterminate\"`のときは前後にスライドするプログレスバーです。"
         },
         {
           "name": "stream",
-          "docs": "The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `\"determinate\"`.\n\n自動翻訳: バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `\"determinate\"` のときのみ表示される。"
+          "docs": "バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `\"determinate\"` のときのみ表示される。"
         },
         {
           "name": "track",
-          "docs": "The track bar behind the progress bar. If the `buffer` property is set and `type` is `\"determinate\"` the track will be the\nwidth of the `buffer` value.\n\n自動翻訳: プログレスバーの後ろにあるトラックバーです。buffer`プロパティが設定され、`type`が `\"determinate\"` である場合、トラックは `buffer` 値の幅となる。"
+          "docs": "プログレスバーの後ろにあるトラックバーです。buffer`プロパティが設定され、`type`が `\"determinate\"` である場合、トラックは `buffer` 値の幅となる。"
         }
       ],
       "dependents": [],
@@ -14004,7 +14004,7 @@
           "mutable": false,
           "attr": "allow-empty-selection",
           "reflectToAttr": false,
-          "docs": "If `true`, the radios can be deselected.\n\n自動翻訳: `true`の場合、ラジオを非選択にすることができる。",
+          "docs": "`true`の場合、ラジオを非選択にすることができる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14021,7 +14021,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -14038,7 +14038,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the radio group.\n\n自動翻訳: 無線グループの値です。",
+          "docs": "無線グループの値です。",
           "docsTags": [],
           "values": [
             {
@@ -14057,7 +14057,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
+          "docs": "値が変更されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -14109,7 +14109,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -14164,7 +14164,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the radio.\n\n自動翻訳: `true`の場合、ユーザはラジオと対話することができません。",
+          "docs": "`true`の場合、ユーザはラジオと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14181,7 +14181,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -14202,7 +14202,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -14219,7 +14219,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the radio.\n\n自動翻訳: ラジオの値です。",
+          "docs": "ラジオの値です。",
           "docsTags": [],
           "values": [
             {
@@ -14238,7 +14238,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the radio button loses focus.\n\n自動翻訳: ラジオボタンのフォーカスが外れたときに発行されます。",
+          "docs": "ラジオボタンのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -14247,7 +14247,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the radio button has focus.\n\n自動翻訳: ラジオボタンにフォーカスが当たったときに発行されます。",
+          "docs": "ラジオボタンにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -14256,33 +14256,33 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the radio\n\n自動翻訳: ラジオのボーダー半径"
+          "docs": "ラジオのボーダー半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the radio\n\n自動翻訳: ラジオのカラー"
+          "docs": "ラジオのカラー"
         },
         {
           "name": "--color-checked",
           "annotation": "prop",
-          "docs": "Color of the checked radio\n\n自動翻訳: チェックしたラジオの色"
+          "docs": "チェックしたラジオの色"
         },
         {
           "name": "--inner-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the inner checked radio\n\n自動翻訳: 内側のチェック付きラジオのボーダー半径"
+          "docs": "内側のチェック付きラジオのボーダー半径"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "container",
-          "docs": "The container for the radio mark.\n\n自動翻訳: ラジオマークの入れ物です。"
+          "docs": "ラジオマークの入れ物です。"
         },
         {
           "name": "mark",
-          "docs": "The checkmark or dot used to indicate the checked state.\n\n自動翻訳: チェックされた状態を示すために使用されるチェックマークまたはドットです。"
+          "docs": "チェックされた状態を示すために使用されるチェックマークまたはドットです。"
         }
       ],
       "dependents": [
@@ -14346,7 +14346,7 @@
           "mutable": true,
           "attr": "active-bar-start",
           "reflectToAttr": false,
-          "docs": "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\").\nValid values are greater than or equal to the min value and less than or equal to the max value.\n\n自動翻訳: レンジアクティブバーの開始位置です。この機能は、ノブが1つの場合のみ有効です（dualKnobs=\"false\"）。有効な値は、min値以上、max値以下です。",
+          "docs": "レンジアクティブバーの開始位置です。この機能は、ノブが1つの場合のみ有効です（dualKnobs=\"false\"）。有効な値は、min値以上、max値以下です。",
           "docsTags": [],
           "values": [
             {
@@ -14365,7 +14365,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -14420,7 +14420,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: 範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。",
+          "docs": "範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -14437,7 +14437,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the range.\n\n自動翻訳: `true`の場合、ユーザは範囲と対話することができません。",
+          "docs": "`true`の場合、ユーザは範囲と対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14454,7 +14454,7 @@
           "mutable": false,
           "attr": "dual-knobs",
           "reflectToAttr": false,
-          "docs": "Show two knobs.\n\n自動翻訳: 2つのノブを表示します。",
+          "docs": "2つのノブを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14471,7 +14471,7 @@
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "Maximum integer value of the range.\n\n自動翻訳: 範囲の最大整数値。",
+          "docs": "範囲の最大整数値。",
           "docsTags": [],
           "default": "100",
           "values": [
@@ -14488,7 +14488,7 @@
           "mutable": false,
           "attr": "min",
           "reflectToAttr": false,
-          "docs": "Minimum integer value of the range.\n\n自動翻訳: 範囲の最小の整数値。",
+          "docs": "範囲の最小の整数値。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -14505,7 +14505,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -14526,7 +14526,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -14543,7 +14543,7 @@
           "mutable": false,
           "attr": "pin",
           "reflectToAttr": false,
-          "docs": "If `true`, a pin with integer value is shown when the knob\nis pressed.\n\n自動翻訳: `true`の場合、ノブを押したときに整数値のピンが表示されます。",
+          "docs": "`true`の場合、ノブを押したときに整数値のピンが表示されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14559,7 +14559,7 @@
           "type": "(value: number) => string | number",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.\n\n自動翻訳: ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。",
+          "docs": "ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。",
           "docsTags": [],
           "default": "(value: number): number => Math.round(value)",
           "values": [
@@ -14579,7 +14579,7 @@
           "mutable": false,
           "attr": "snaps",
           "reflectToAttr": false,
-          "docs": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value.\n\n自動翻訳: `true`の場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。",
+          "docs": "`true`の場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14596,7 +14596,7 @@
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
-          "docs": "Specifies the value granularity.\n\n自動翻訳: 値の粒度を指定します。",
+          "docs": "値の粒度を指定します。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -14613,7 +14613,7 @@
           "mutable": false,
           "attr": "ticks",
           "reflectToAttr": false,
-          "docs": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`.\n\n自動翻訳: `true`の場合、ステップの値に基づいてティックマークを表示します。snaps`が `true` の場合のみ適用される。",
+          "docs": "`true`の場合、ステップの値に基づいてティックマークを表示します。snaps`が `true` の場合のみ適用される。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -14630,7 +14630,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the range.\n\n自動翻訳: 範囲の値です。",
+          "docs": "範囲の値です。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -14653,7 +14653,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the range loses focus.\n\n自動翻訳: レンジの焦点が合わなくなったときに発します。",
+          "docs": "レンジの焦点が合わなくなったときに発します。",
           "docsTags": []
         },
         {
@@ -14662,7 +14662,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行されます。",
+          "docs": "valueプロパティが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -14671,7 +14671,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the range has focus.\n\n自動翻訳: レンジのフォーカスが合ったときに発します。",
+          "docs": "レンジのフォーカスが合ったときに発します。",
           "docsTags": []
         },
         {
@@ -14680,7 +14680,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user finishes moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.\n\n自動翻訳: マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。",
+          "docs": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -14689,7 +14689,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user starts moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.\n\n自動翻訳: マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。",
+          "docs": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。",
           "docsTags": []
         }
       ],
@@ -14698,93 +14698,93 @@
         {
           "name": "--bar-background",
           "annotation": "prop",
-          "docs": "Background of the range bar\n\n自動翻訳: レンジバーの背景"
+          "docs": "レンジバーの背景"
         },
         {
           "name": "--bar-background-active",
           "annotation": "prop",
-          "docs": "Background of the active range bar\n\n自動翻訳: アクティブレンジバーの背景"
+          "docs": "アクティブレンジバーの背景"
         },
         {
           "name": "--bar-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the range bar\n\n自動翻訳: レンジバーのボーダー半径"
+          "docs": "レンジバーのボーダー半径"
         },
         {
           "name": "--bar-height",
           "annotation": "prop",
-          "docs": "Height of the range bar\n\n自動翻訳: レンジバーの高さ"
+          "docs": "レンジバーの高さ"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the range\n\n自動翻訳: レンジの高さ"
+          "docs": "レンジの高さ"
         },
         {
           "name": "--knob-background",
           "annotation": "prop",
-          "docs": "Background of the range knob\n\n自動翻訳: レンジノブの背景"
+          "docs": "レンジノブの背景"
         },
         {
           "name": "--knob-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the range knob\n\n自動翻訳: レンジツマミのボーダー半径"
+          "docs": "レンジツマミのボーダー半径"
         },
         {
           "name": "--knob-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the range knob\n\n自動翻訳: レンジノブのボックスシャドウ"
+          "docs": "レンジノブのボックスシャドウ"
         },
         {
           "name": "--knob-size",
           "annotation": "prop",
-          "docs": "Size of the range knob\n\n自動翻訳: レンジツマミの大きさ"
+          "docs": "レンジツマミの大きさ"
         },
         {
           "name": "--pin-background",
           "annotation": "prop",
-          "docs": "Background of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの背景（MD mode時のみ有効）"
+          "docs": "レンジピンの背景（MD mode時のみ有効）"
         },
         {
           "name": "--pin-color",
           "annotation": "prop",
-          "docs": "Color of the range pin (only available in MD mode)\n\n自動翻訳: レンジピンの色（MD mode時のみ有効）"
+          "docs": "レンジピンの色（MD mode時のみ有効）"
         }
       ],
       "slots": [
         {
           "name": "end",
-          "docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。"
+          "docs": "コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。"
+          "docs": "コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [
         {
           "name": "bar",
-          "docs": "The inactive part of the bar.\n\n自動翻訳: バーの非アクティブな部分。"
+          "docs": "バーの非アクティブな部分。"
         },
         {
           "name": "bar-active",
-          "docs": "The active part of the bar.\n\n自動翻訳: バーのアクティブな部分です。"
+          "docs": "バーのアクティブな部分です。"
         },
         {
           "name": "knob",
-          "docs": "The handle that is used to drag the range.\n\n自動翻訳: 範囲をドラッグする際に使用するハンドル。"
+          "docs": "範囲をドラッグする際に使用するハンドル。"
         },
         {
           "name": "pin",
-          "docs": "The counter that appears above a knob.\n\n自動翻訳: ノブの上に表示されるカウンターです。"
+          "docs": "ノブの上に表示されるカウンターです。"
         },
         {
           "name": "tick",
-          "docs": "An inactive tick mark.\n\n自動翻訳: 非アクティブなティックマークです。"
+          "docs": "非アクティブなティックマークです。"
         },
         {
           "name": "tick-active",
-          "docs": "An active tick mark.\n\n自動翻訳: アクティブなティックマークです。"
+          "docs": "アクティブなティックマークです。"
         }
       ],
       "dependents": [],
@@ -14805,7 +14805,7 @@
           "mutable": true,
           "attr": "pulling-icon",
           "reflectToAttr": false,
-          "docs": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices.\n\n自動翻訳: プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOSデバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。",
+          "docs": "プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOSデバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。",
           "docsTags": [],
           "values": [
             {
@@ -14827,7 +14827,7 @@
           "mutable": false,
           "attr": "pulling-text",
           "reflectToAttr": false,
-          "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "values": [
             {
@@ -14849,7 +14849,7 @@
           "mutable": true,
           "attr": "refreshing-spinner",
           "reflectToAttr": false,
-          "docs": "An animated SVG spinner that shows when refreshing begins\n\n自動翻訳: リフレッシュ開始を示すアニメーションSVGスピナー",
+          "docs": "リフレッシュ開始を示すアニメーションSVGスピナー",
           "docsTags": [],
           "values": [
             {
@@ -14904,7 +14904,7 @@
           "mutable": false,
           "attr": "refreshing-text",
           "reflectToAttr": false,
-          "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
           "docsTags": [],
           "values": [
             {
@@ -14953,7 +14953,7 @@
           "mutable": false,
           "attr": "close-duration",
           "reflectToAttr": false,
-          "docs": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+          "docs": "リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
           "docsTags": [],
           "default": "'280ms'",
           "values": [
@@ -14970,7 +14970,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the refresher will be hidden.\n\n自動翻訳: `true`の場合、リフレッシャーは非表示となる。",
+          "docs": "`true`の場合、リフレッシャーは非表示となる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14987,7 +14987,7 @@
           "mutable": false,
           "attr": "pull-factor",
           "reflectToAttr": false,
-          "docs": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: 引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。  例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。  リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+          "docs": "引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。  例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。  リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
           "docsTags": [],
           "default": "1",
           "values": [
@@ -15004,7 +15004,7 @@
           "mutable": false,
           "attr": "pull-max",
           "reflectToAttr": false,
-          "docs": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when  the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果です。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
+          "docs": "リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果です。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
           "docsTags": [],
           "default": "this.pullMin + 60",
           "values": [
@@ -15021,7 +15021,7 @@
           "mutable": false,
           "attr": "pull-min",
           "reflectToAttr": false,
-          "docs": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。",
+          "docs": "リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。",
           "docsTags": [],
           "default": "60",
           "values": [
@@ -15038,7 +15038,7 @@
           "mutable": false,
           "attr": "snapback-duration",
           "reflectToAttr": false,
-          "docs": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.\n\n自動翻訳: リフレッシャーが `refreshing` 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。",
+          "docs": "リフレッシャーが `refreshing` 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。",
           "docsTags": [],
           "default": "'280ms'",
           "values": [
@@ -15059,7 +15059,7 @@
           },
           "signature": "cancel() => Promise<void>",
           "parameters": [],
-          "docs": "Changes the refresher's state from `refreshing` to `cancelling`.\n\n自動翻訳: リフレッシュの状態を `refreshing` から `cancelling` に変更します。",
+          "docs": "リフレッシュの状態を `refreshing` から `cancelling` に変更します。",
           "docsTags": []
         },
         {
@@ -15070,7 +15070,7 @@
           },
           "signature": "complete() => Promise<void>",
           "parameters": [],
-          "docs": "Call `complete()` when your async operation has completed.\nFor example, the `refreshing` state is while the app is performing\nan asynchronous operation, such as receiving more data from an\nAJAX request. Once the data has been received, you then call this\nmethod to signify that the refreshing has completed and to close\nthe refresher. This method also changes the refresher's state from\n`refreshing` to `completing`.\n\n自動翻訳: 非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。",
+          "docs": "非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。",
           "docsTags": []
         },
         {
@@ -15081,7 +15081,7 @@
           },
           "signature": "getProgress() => Promise<number>",
           "parameters": [],
-          "docs": "A number representing how far down the user has pulled.\nThe number `0` represents the user hasn't pulled down at all. The\nnumber `1`, and anything greater than `1`, represents that the user\nhas pulled far enough down that when they let go then the refresh will\nhappen. If they let go and the number is less than `1`, then the\nrefresh will not happen, and the content will return to it's original\nposition.\n\n自動翻訳: ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。",
+          "docs": "ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。",
           "docsTags": []
         }
       ],
@@ -15092,7 +15092,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted while the user is pulling down the content and exposing the refresher.\n\n自動翻訳: ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発します。",
+          "docs": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発します。",
           "docsTags": []
         },
         {
@@ -15101,7 +15101,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.\n\n自動翻訳: ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発行されます。リフレッシャーの状態を `refreshing` に更新します。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
+          "docs": "ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発行されます。リフレッシャーの状態を `refreshing` に更新します。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
           "docsTags": []
         },
         {
@@ -15110,7 +15110,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user begins to start pulling down.\n\n自動翻訳: ユーザーが引き下げを開始するときに発します。",
+          "docs": "ユーザーが引き下げを開始するときに発します。",
           "docsTags": []
         }
       ],
@@ -15136,7 +15136,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the reorder will be hidden.\n\n自動翻訳: `true`の場合、リオーダーは非表示になる。",
+          "docs": "`true`の場合、リオーダーは非表示になる。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15157,7 +15157,7 @@
           },
           "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
           "parameters": [],
-          "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.\n\n自動翻訳: 再注文操作を完了します。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
+          "docs": "再注文操作を完了します。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
           "docsTags": [
             {
               "name": "param",
@@ -15173,7 +15173,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.\n\n自動翻訳: 再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。",
+          "docs": "再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。",
           "docsTags": []
         }
       ],
@@ -15212,7 +15212,7 @@
       "parts": [
         {
           "name": "icon",
-          "docs": "The icon of the reorder handle (uses ion-icon).\n\n自動翻訳: リオーダーハンドルのアイコンです（ion-iconを使用）。"
+          "docs": "リオーダーハンドルのアイコンです（ion-iconを使用）。"
         }
       ],
       "dependents": [],
@@ -15239,7 +15239,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible.\n\n自動翻訳: リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。  注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。",
+          "docs": "リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。  注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。",
           "docsTags": [],
           "default": "'bounded'",
           "values": [
@@ -15265,7 +15265,7 @@
           },
           "signature": "addRipple(x: number, y: number) => Promise<() => void>",
           "parameters": [],
-          "docs": "Adds the ripple effect to the parent element.\n\n自動翻訳: 親要素に波及効果を付加します。",
+          "docs": "親要素に波及効果を付加します。",
           "docsTags": [
             {
               "name": "param",
@@ -15359,7 +15359,7 @@
           "mutable": false,
           "attr": "from",
           "reflectToAttr": false,
-          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"from\" URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
+          "docs": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"from\" URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。",
           "docsTags": [],
           "values": [
             {
@@ -15375,7 +15375,7 @@
           "mutable": false,
           "attr": "to",
           "reflectToAttr": false,
-          "docs": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches.\n\n自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLです。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
+          "docs": "リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その \"to \"URLです。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ \"from\" の値が一致しても、リダイレクトルート全体は noop となります。",
           "docsTags": [],
           "values": [
             {
@@ -15400,7 +15400,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`ion-router` captures this event in order to update his internal registry of router rules.\n\n自動翻訳: このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。",
+          "docs": "このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。",
           "docsTags": []
         }
       ],
@@ -15425,7 +15425,7 @@
           "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.\n\n自動翻訳: ルーターがアクセスしようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
+          "docs": "ルーターがアクセスしようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
           "docsTags": [],
           "values": [
             {
@@ -15446,7 +15446,7 @@
           "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.\n\n自動翻訳: ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
+          "docs": "ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
           "docsTags": [],
           "values": [
             {
@@ -15468,7 +15468,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select.\n\n自動翻訳: ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。  このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。",
+          "docs": "ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。  このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。",
           "docsTags": [],
           "values": [
             {
@@ -15483,7 +15483,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.\n\n自動翻訳: キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。",
+          "docs": "キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。",
           "docsTags": [],
           "values": [
             {
@@ -15502,7 +15502,7 @@
           "mutable": false,
           "attr": "url",
           "reflectToAttr": false,
-          "docs": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props.\n\n自動翻訳: このルートを適用するために一致させる必要がある相対パスです。  expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。",
+          "docs": "このルートを適用するために一致させる必要がある相対パスです。  expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -15522,7 +15522,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Used internally by `ion-router` to know when this route did change.\n\n自動翻訳: このルートがいつ変更されたかを知るために `ion-router` が内部で使用します。",
+          "docs": "このルートがいつ変更されたかを知るために `ion-router` が内部で使用します。",
           "docsTags": []
         }
       ],
@@ -15548,7 +15548,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -15603,7 +15603,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -15622,7 +15622,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -15640,7 +15640,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -15659,7 +15659,7 @@
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
-          "docs": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.\n\n自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
+          "docs": "ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。",
           "docsTags": [],
           "default": "'forward'",
           "values": [
@@ -15685,7 +15685,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -15706,12 +15706,12 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the router link\n\n自動翻訳: ルーターリンクの背景"
+          "docs": "ルーターリンクの背景"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the router link\n\n自動翻訳: ルーターリンクの文字色"
+          "docs": "ルーターリンクの文字色"
         }
       ],
       "slots": [],
@@ -15734,7 +15734,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the router-outlet should animate the transition of components.\n\n自動翻訳: `true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。",
+          "docs": "`true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15750,7 +15750,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "This property allows to create custom transition using AnimationBuilder functions.\n\n自動翻訳: このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
+          "docs": "このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
           "docsTags": [],
           "values": [
             {
@@ -15769,7 +15769,7 @@
           "mutable": true,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "default": "getIonMode(this)",
           "values": [
@@ -15810,7 +15810,7 @@
           "mutable": false,
           "attr": "root",
           "reflectToAttr": false,
-          "docs": "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify\nan alternate prefix for all URL paths.\n\n自動翻訳: URLのマッチング時に使用するルートパスです。デフォルトでは\"/\"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。",
+          "docs": "URLのマッチング時に使用するルートパスです。デフォルトでは\"/\"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。",
           "docsTags": [],
           "default": "'/'",
           "values": [
@@ -15827,7 +15827,7 @@
           "mutable": false,
           "attr": "use-hash",
           "reflectToAttr": false,
-          "docs": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs.\n\n自動翻訳: ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、\"ハッシュなし\"ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
+          "docs": "ルーターは2つの \"モード \"で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、\"ハッシュなし\"ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -15848,7 +15848,7 @@
           },
           "signature": "back() => Promise<void>",
           "parameters": [],
-          "docs": "Go back to previous page in the window.history.\n\n自動翻訳: window.historyで前ページに戻る。",
+          "docs": "window.historyで前ページに戻る。",
           "docsTags": []
         },
         {
@@ -15859,7 +15859,7 @@
           },
           "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
           "parameters": [],
-          "docs": "Navigate to the specified path.\n\n自動翻訳: 指定されたパスに移動します。",
+          "docs": "指定されたパスに移動します。",
           "docsTags": [
             {
               "name": "param",
@@ -15879,7 +15879,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the route had changed\n\n自動翻訳: ルートが変更されたときに発します。",
+          "docs": "ルートが変更されたときに発します。",
           "docsTags": []
         },
         {
@@ -15888,7 +15888,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted when the route is about to change\n\n自動翻訳: ルートが変更されようとするときに発行されます。イベント",
+          "docs": "ルートが変更されようとするときに発行されます。イベント",
           "docsTags": []
         }
       ],
@@ -15950,7 +15950,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, enable searchbar animation.\n\n自動翻訳: `true`の場合、検索バーのアニメーションを有効にします。",
+          "docs": "`true`の場合、検索バーのアニメーションを有効にします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -15967,7 +15967,7 @@
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
-          "docs": "Set the input's autocomplete property.\n\n自動翻訳: Inputのオートコンプリートプロパティを設定します。",
+          "docs": "Inputのオートコンプリートプロパティを設定します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -16197,7 +16197,7 @@
           "mutable": false,
           "attr": "autocorrect",
           "reflectToAttr": false,
-          "docs": "Set the input's autocorrect property.\n\n自動翻訳: Inputのオートコレクトプロパティを設定します。",
+          "docs": "Inputのオートコレクトプロパティを設定します。",
           "docsTags": [],
           "default": "'off'",
           "values": [
@@ -16219,7 +16219,7 @@
           "mutable": false,
           "attr": "cancel-button-icon",
           "reflectToAttr": false,
-          "docs": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`.\n\n自動翻訳: キャンセルボタンのアイコンを設定します。 `md` modeのみに適用されます。デフォルトは `arrow-back-sharp` です。",
+          "docs": "キャンセルボタンのアイコンを設定します。 `md` modeのみに適用されます。デフォルトは `arrow-back-sharp` です。",
           "docsTags": [],
           "default": "config.get('backButtonIcon', arrowBackSharp) as string",
           "values": [
@@ -16236,7 +16236,7 @@
           "mutable": false,
           "attr": "cancel-button-text",
           "reflectToAttr": false,
-          "docs": "Set the the cancel button text. Only applies to `ios` mode.\n\n自動翻訳: キャンセルボタンのテキストを設定します。 `ios` modeのみ適用されます。",
+          "docs": "キャンセルボタンのテキストを設定します。 `ios` modeのみ適用されます。",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [
@@ -16253,7 +16253,7 @@
           "mutable": false,
           "attr": "clear-icon",
           "reflectToAttr": false,
-          "docs": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.\n\n自動翻訳: クリアアイコンを設定します。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
+          "docs": "クリアアイコンを設定します。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。",
           "docsTags": [],
           "values": [
             {
@@ -16272,7 +16272,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -16327,7 +16327,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+          "docs": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "250",
           "values": [
@@ -16344,7 +16344,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the input.\n\n自動翻訳: `true`の場合、ユーザはInputと対話することができません。",
+          "docs": "`true`の場合、ユーザはInputと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16361,7 +16361,7 @@
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.\n\n自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docs": "どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
           "docsTags": [],
           "values": [
             {
@@ -16405,7 +16405,7 @@
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\n自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+          "docs": "どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
           "docsTags": [],
           "values": [
             {
@@ -16453,7 +16453,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -16474,7 +16474,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\n自動翻訳: Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
+          "docs": "Inputのplaceholderを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
           "docsTags": [],
           "default": "'Search'",
           "values": [
@@ -16491,7 +16491,7 @@
           "mutable": false,
           "attr": "search-icon",
           "reflectToAttr": false,
-          "docs": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode.\n\n自動翻訳: 検索アイコンとして使用するアイコンです。デフォルトは `ios` modeでは `search-outline` 、`md` modeでは `search-sharp` です。",
+          "docs": "検索アイコンとして使用するアイコンです。デフォルトは `ios` modeでは `search-outline` 、`md` modeでは `search-sharp` です。",
           "docsTags": [],
           "values": [
             {
@@ -16510,7 +16510,7 @@
           "mutable": false,
           "attr": "show-cancel-button",
           "reflectToAttr": false,
-          "docs": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.\n\n自動翻訳: キャンセルボタンに関する動作を設定します。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にします。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。",
+          "docs": "キャンセルボタンに関する動作を設定します。デフォルトは `\"never\"` です。focus\"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never\"`に設定すると、キャンセルボタンを非表示にします。always\"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。",
           "docsTags": [],
           "default": "'never'",
           "values": [
@@ -16536,7 +16536,7 @@
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
-          "docs": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.\n\n自動翻訳: クリアボタンに関する動作を設定します。デフォルトは `\"focus\"` です。`\"focus\"`に設定すると、Inputが空でない場合、フォーカス時にクリアボタンを表示します。`\"never\"`に設定すると、クリアボタンを非表示にします。`\"always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Inputが空でない場合にのみクリアボタンを表示します。",
+          "docs": "クリアボタンに関する動作を設定します。デフォルトは `\"focus\"` です。`\"focus\"`に設定すると、Inputが空でない場合、フォーカス時にクリアボタンを表示します。`\"never\"`に設定すると、クリアボタンを非表示にします。`\"always\"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Inputが空でない場合にのみクリアボタンを表示します。",
           "docsTags": [],
           "default": "'always'",
           "values": [
@@ -16562,7 +16562,7 @@
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
-          "docs": "If `true`, enable spellcheck on the input.\n\n自動翻訳: `true`の場合、入力値のスペルチェックを有効にします。",
+          "docs": "`true`の場合、入力値のスペルチェックを有効にします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16579,7 +16579,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "Set the type of the input.\n\n自動翻訳: Inputの種類を設定します。",
+          "docs": "Inputの種類を設定します。",
           "docsTags": [],
           "default": "'search'",
           "values": [
@@ -16621,7 +16621,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the searchbar.\n\n自動翻訳: 検索バーの値。",
+          "docs": "検索バーの値。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -16648,7 +16648,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
-          "docs": "Returns the native `<input>` element used under the hood.\n\n自動翻訳: 要素の内部で使用されているネイティブの `<input>` 要素を返します。",
+          "docs": "要素の内部で使用されているネイティブの `<input>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -16659,7 +16659,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the specified `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\n自動翻訳: 指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。",
+          "docs": "指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。",
           "docsTags": []
         }
       ],
@@ -16670,7 +16670,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.\n\n自動翻訳: Inputのフォーカスが外れたときに発行されます。",
+          "docs": "Inputのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16679,7 +16679,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the cancel button is clicked.\n\n自動翻訳: キャンセルボタンがクリックされたときに発行されます。",
+          "docs": "キャンセルボタンがクリックされたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16688,7 +16688,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
+          "docs": "値が変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16697,7 +16697,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the clear input button is clicked.\n\n自動翻訳: Clear Inputボタンがクリックされたときに発行されます。",
+          "docs": "Clear Inputボタンがクリックされたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16706,7 +16706,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.\n\n自動翻訳: Inputにフォーカスが当たったときに発行されます。",
+          "docs": "Inputにフォーカスが当たったときに発行されます。",
           "docsTags": []
         },
         {
@@ -16715,7 +16715,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発します。",
+          "docs": "キーボード入力が発生したときに発します。",
           "docsTags": []
         }
       ],
@@ -16724,57 +16724,57 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the searchbar input\n\n自動翻訳: 検索バーのInputの背景"
+          "docs": "検索バーのInputの背景"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the searchbar input\n\n自動翻訳: 検索バーのInputのボーダー半径"
+          "docs": "検索バーのInputのボーダー半径"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the searchbar input\n\n自動翻訳: 検索バーのInputのボックスシャドウ"
+          "docs": "検索バーのInputのボックスシャドウ"
         },
         {
           "name": "--cancel-button-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar cancel button\n\n自動翻訳: 検索バーのキャンセルボタンの色"
+          "docs": "検索バーのキャンセルボタンの色"
         },
         {
           "name": "--clear-button-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar clear button\n\n自動翻訳: 検索バーのクリアボタンの色"
+          "docs": "検索バーのクリアボタンの色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the searchbar text\n\n自動翻訳: 検索バーのテキストの色"
+          "docs": "検索バーのテキストの色"
         },
         {
           "name": "--icon-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar icon\n\n自動翻訳: 検索バーのアイコンの色"
+          "docs": "検索バーのアイコンの色"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderの色"
+          "docs": "検索バーのPlaceholderの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Font style of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderのFont Style"
+          "docs": "検索バーのPlaceholderのFont Style"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Font weight of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderのFont Weight"
+          "docs": "検索バーのPlaceholderのFont Weight"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the searchbar placeholder\n\n自動翻訳: 検索バーのPlaceholderの不透明度"
+          "docs": "検索バーのPlaceholderの不透明度"
         }
       ],
       "slots": [],
@@ -16820,7 +16820,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the segment button.\n\n自動翻訳: `true`の場合、ユーザーはセグメントボタンを操作することができません。",
+          "docs": "`true`の場合、ユーザーはセグメントボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -16837,7 +16837,7 @@
           "mutable": false,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Set the layout of the text and icon in the segment.\n\n自動翻訳: セグメント内のテキストとアイコンのレイアウトを設定します。",
+          "docs": "セグメント内のテキストとアイコンのレイアウトを設定します。",
           "docsTags": [],
           "default": "'icon-top'",
           "values": [
@@ -16878,7 +16878,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -16899,7 +16899,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the button.\n\n自動翻訳: ボタンの種類です。",
+          "docs": "ボタンの種類です。",
           "docsTags": [],
           "default": "'button'",
           "values": [
@@ -16925,7 +16925,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the segment button.\n\n自動翻訳: セグメントボタンの値です。",
+          "docs": "セグメントボタンの値です。",
           "docsTags": [],
           "default": "'ion-sb-' + ids++",
           "values": [
@@ -16944,157 +16944,157 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the segment button\n\n自動翻訳: セグメントボタンの背景"
+          "docs": "セグメントボタンの背景"
         },
         {
           "name": "--background-checked",
           "annotation": "prop",
-          "docs": "Background of the checked segment button\n\n自動翻訳: チェックしたセグメントボタンの背景"
+          "docs": "チェックしたセグメントボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the segment button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスされたときのセグメントボタンの背景"
+          "docs": "タブキーでフォーカスされたときのセグメントボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the segment button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのセグメントボタンの背景の不透明度"
+          "docs": "タブキーでフォーカスしたときのセグメントボタンの背景の不透明度"
         },
         {
           "name": "--background-hover",
           "annotation": "prop",
-          "docs": "Background of the segment button on hover\n\n自動翻訳: セグメントボタンがホバーされたときの背景"
+          "docs": "セグメントボタンがホバーされたときの背景"
         },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the segment button background on hover\n\n自動翻訳: ホバー時のセグメントボタンの背景の不透明度"
+          "docs": "ホバー時のセグメントボタンの背景の不透明度"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the segment button border\n\n自動翻訳: セグメントボタンのボーダーの色"
+          "docs": "セグメントボタンのボーダーの色"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Radius of the segment button border\n\n自動翻訳: セグメントボタンのボーダーの半径"
+          "docs": "セグメントボタンのボーダーの半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the segment button border\n\n自動翻訳: セグメントボタンのボーダーのスタイル"
+          "docs": "セグメントボタンのボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the segment button border\n\n自動翻訳: セグメントボタンの枠の幅"
+          "docs": "セグメントボタンの枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the segment button\n\n自動翻訳: セグメントボタンの色"
+          "docs": "セグメントボタンの色"
         },
         {
           "name": "--color-checked",
           "annotation": "prop",
-          "docs": "Color of the checked segment button\n\n自動翻訳: チェックしたセグメントボタンの色"
+          "docs": "チェックしたセグメントボタンの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the segment button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのセグメントボタンの色"
+          "docs": "タブキーでフォーカスしたときのセグメントボタンの色"
         },
         {
           "name": "--color-hover",
           "annotation": "prop",
-          "docs": "Color of the segment button on hover\n\n自動翻訳: ホバー時のセグメントボタンの色"
+          "docs": "ホバー時のセグメントボタンの色"
         },
         {
           "name": "--indicator-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow on the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける"
+          "docs": "チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける"
         },
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "Color of the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケーターの色"
+          "docs": "チェックしたセグメントボタンのインジケーターの色"
         },
         {
           "name": "--indicator-height",
           "annotation": "prop",
-          "docs": "Height of the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケータの高さ"
+          "docs": "チェックしたセグメントボタンのインジケータの高さ"
         },
         {
           "name": "--indicator-transform",
           "annotation": "prop",
-          "docs": "Transform of the indicator for the checked segment button\n\n自動翻訳: チェックされたセグメントボタンのインジケータのトランスフォーム"
+          "docs": "チェックされたセグメントボタンのインジケータのトランスフォーム"
         },
         {
           "name": "--indicator-transition",
           "annotation": "prop",
-          "docs": "Transition of the indicator for the checked segment button\n\n自動翻訳: チェックしたセグメントボタンのインジケーターの遷移"
+          "docs": "チェックしたセグメントボタンのインジケーターの遷移"
         },
         {
           "name": "--margin-bottom",
           "annotation": "prop",
-          "docs": "Bottom margin of the segment button\n\n自動翻訳: セグメントボタンのBottom Margin"
+          "docs": "セグメントボタンのBottom Margin"
         },
         {
           "name": "--margin-end",
           "annotation": "prop",
-          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin"
+          "docs": "セグメントボタンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin"
         },
         {
           "name": "--margin-start",
           "annotation": "prop",
-          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin"
+          "docs": "セグメントボタンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin"
         },
         {
           "name": "--margin-top",
           "annotation": "prop",
-          "docs": "Top margin of the segment button\n\n自動翻訳: セグメントボタンのTop Margin"
+          "docs": "セグメントボタンのTop Margin"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the segment button\n\n自動翻訳: セグメントボタンのBottom Padding"
+          "docs": "セグメントボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "セグメントボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button\n\n自動翻訳: セグメントボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "セグメントボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the segment button\n\n自動翻訳: セグメントボタンのTop Padding"
+          "docs": "セグメントボタンのTop Padding"
         },
         {
           "name": "--transition",
           "annotation": "prop",
-          "docs": "Transition of the segment button\n\n自動翻訳: セグメントボタンの遷移"
+          "docs": "セグメントボタンの遷移"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "indicator",
-          "docs": "The indicator displayed on the checked segment button.\n\n自動翻訳: チェックしたセグメントボタンに表示されるインジケーターです。"
+          "docs": "チェックしたセグメントボタンに表示されるインジケーターです。"
         },
         {
           "name": "indicator-background",
-          "docs": "The background element for the indicator displayed on the checked segment button.\n\n自動翻訳: チェックしたセグメントボタンに表示されるインジケータの背景要素です。"
+          "docs": "チェックしたセグメントボタンに表示されるインジケータの背景要素です。"
         },
         {
           "name": "native",
-          "docs": "The native HTML button element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。"
+          "docs": "すべての子要素を包むネイティブ HTML ボタン要素。"
         }
       ],
       "dependents": [],
@@ -17126,7 +17126,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -17181,7 +17181,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the segment.\n\n自動翻訳: `true`の場合、ユーザーはセグメントと対話することができません。",
+          "docs": "`true`の場合、ユーザーはセグメントと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17198,7 +17198,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17219,7 +17219,7 @@
           "mutable": false,
           "attr": "scrollable",
           "reflectToAttr": false,
-          "docs": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons.\n\n自動翻訳: `true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。",
+          "docs": "`true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17236,7 +17236,7 @@
           "mutable": false,
           "attr": "select-on-focus",
           "reflectToAttr": false,
-          "docs": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element.\n\n自動翻訳: `true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。",
+          "docs": "`true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17253,7 +17253,7 @@
           "mutable": false,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
-          "docs": "If `true`, users will be able to swipe between segment buttons to activate them.\n\n自動翻訳: `true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。",
+          "docs": "`true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -17270,7 +17270,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the segment.\n\n自動翻訳: セグメントの価値",
+          "docs": "セグメントの価値",
           "docsTags": [],
           "values": [
             {
@@ -17295,7 +17295,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.\n\n自動翻訳: valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行されます。",
+          "docs": "valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -17310,7 +17310,7 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the segment button\n\n自動翻訳: セグメントボタンの背景"
+          "docs": "セグメントボタンの背景"
         }
       ],
       "slots": [],
@@ -17333,7 +17333,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons.\n\n自動翻訳: `true`の場合、ユーザは選択オプションと対話することができません。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからです。",
+          "docs": "`true`の場合、ユーザは選択オプションと対話することができません。このプロパティは、`interface=\"action-sheet\"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからです。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17350,7 +17350,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The text value of the option.\n\n自動翻訳: オプションのテキスト値です。",
+          "docs": "オプションのテキスト値です。",
           "docsTags": [],
           "values": [
             {
@@ -17402,7 +17402,7 @@
           "mutable": false,
           "attr": "cancel-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the cancel button.\n\n自動翻訳: キャンセルボタンに表示するテキストです。",
+          "docs": "キャンセルボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [
@@ -17419,7 +17419,7 @@
           "mutable": false,
           "attr": "compare-with",
           "reflectToAttr": false,
-          "docs": "A property name or function used to compare object values\n\n自動翻訳: オブジェクトの値を比較するために使用されるプロパティ名または関数。",
+          "docs": "オブジェクトの値を比較するために使用されるプロパティ名または関数。",
           "docsTags": [],
           "values": [
             {
@@ -17444,7 +17444,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the select.\n\n自動翻訳: `true`の場合、ユーザはセレクトと対話することができません。",
+          "docs": "`true`の場合、ユーザはセレクトと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17461,7 +17461,7 @@
           "mutable": false,
           "attr": "interface",
           "reflectToAttr": false,
-          "docs": "The interface the select should use: `action-sheet`, `popover` or `alert`.\n\n自動翻訳: selectが使用するインターフェース。action-sheet`, `popover` または `alert`.",
+          "docs": "selectが使用するインターフェース。action-sheet`, `popover` または `alert`.",
           "docsTags": [],
           "default": "'alert'",
           "values": [
@@ -17487,7 +17487,7 @@
           "mutable": false,
           "attr": "interface-options",
           "reflectToAttr": false,
-          "docs": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet) and the\n[ion-popover docs](./popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.\n\n自動翻訳: alert`、`action-sheet`、`popover` インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意: `interfaceOptions` は `alert` インターフェースで `inputs` や `buttons` をオーバーライドしません。",
+          "docs": "alert`、`action-sheet`、`popover` インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意: `interfaceOptions` は `alert` インターフェースで `inputs` や `buttons` をオーバーライドしません。",
           "docsTags": [],
           "default": "{}",
           "values": [
@@ -17504,7 +17504,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17525,7 +17525,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
-          "docs": "If `true`, the select can accept multiple values.\n\n自動翻訳: `true`の場合、selectは複数の値を受け入れることができる。",
+          "docs": "`true`の場合、selectは複数の値を受け入れることができる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17542,7 +17542,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -17559,7 +17559,7 @@
           "mutable": false,
           "attr": "ok-text",
           "reflectToAttr": false,
-          "docs": "The text to display on the ok button.\n\n自動翻訳: okボタンに表示するテキストです。",
+          "docs": "okボタンに表示するテキストです。",
           "docsTags": [],
           "default": "'OK'",
           "values": [
@@ -17576,7 +17576,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "The text to display when the select is empty.\n\n自動翻訳: セレクトが空のときに表示するテキストです。",
+          "docs": "セレクトが空のときに表示するテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -17595,7 +17595,7 @@
           "mutable": false,
           "attr": "selected-text",
           "reflectToAttr": false,
-          "docs": "The text to display instead of the selected option's value.\n\n自動翻訳: 選択されたオプションの値の代わりに表示するテキストです。",
+          "docs": "選択されたオプションの値の代わりに表示するテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -17617,7 +17617,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "the value of the select.\n\n自動翻訳: セレクトの値です。",
+          "docs": "セレクトの値です。",
           "docsTags": [],
           "values": [
             {
@@ -17637,7 +17637,7 @@
           },
           "signature": "open(event?: UIEvent) => Promise<any>",
           "parameters": [],
-          "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.\n\n自動翻訳: セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。",
+          "docs": "セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。",
           "docsTags": [
             {
               "name": "param",
@@ -17653,7 +17653,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the select loses focus.\n\n自動翻訳: セレクトのフォーカスが外れたときに発行されます。",
+          "docs": "セレクトのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17662,7 +17662,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the selection is cancelled.\n\n自動翻訳: 選択がキャンセルされたときに発します。",
+          "docs": "選択がキャンセルされたときに発します。",
           "docsTags": []
         },
         {
@@ -17671,7 +17671,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.\n\n自動翻訳: 値が変更されたときに発行されます。",
+          "docs": "値が変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17680,7 +17680,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the overlay is dismissed.\n\n自動翻訳: オーバーレイが解除されたときに発行されます。",
+          "docs": "オーバーレイが解除されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17689,7 +17689,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the select has focus.\n\n自動翻訳: セレクトにフォーカスが当たったときに発します。",
+          "docs": "セレクトにフォーカスが当たったときに発します。",
           "docsTags": []
         }
       ],
@@ -17698,47 +17698,47 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the select\n\n自動翻訳: セレクトのBottom Padding"
+          "docs": "セレクトのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う"
+          "docs": "セレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select\n\n自動翻訳: セレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding"
+          "docs": "セレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the select\n\n自動翻訳: セレクトのTop Padding"
+          "docs": "セレクトのTop Padding"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the select placeholder text\n\n自動翻訳: セレクトPlaceholderテキストの色"
+          "docs": "セレクトPlaceholderテキストの色"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the select placeholder text\n\n自動翻訳: 選択Placeholderテキストの不透明度"
+          "docs": "選択Placeholderテキストの不透明度"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "icon",
-          "docs": "The select icon container.\n\n自動翻訳: セレクトアイコンのコンテナです。"
+          "docs": "セレクトアイコンのコンテナです。"
         },
         {
           "name": "placeholder",
-          "docs": "The text displayed in the select when there is no value.\n\n自動翻訳: 値がないときにセレクトに表示されるテキスト。"
+          "docs": "値がないときにセレクトに表示されるテキスト。"
         },
         {
           "name": "text",
-          "docs": "The displayed value of the select.\n\n自動翻訳: セレクトの表示値です。"
+          "docs": "セレクトの表示値です。"
         }
       ],
       "dependents": [],
@@ -17797,7 +17797,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the skeleton text will animate.\n\n自動翻訳: `true`の場合、スケルトンテキストをアニメーションさせる。",
+          "docs": "`true`の場合、スケルトンテキストをアニメーションさせる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17816,17 +17816,17 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the skeleton text\n\n自動翻訳: スケルトンテキストの背景"
+          "docs": "スケルトンテキストの背景"
         },
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "Background of the skeleton text in rgb format\n\n自動翻訳: スケルトンテキストの背景（rgb形式"
+          "docs": "スケルトンテキストの背景（rgb形式"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the skeleton text\n\n自動翻訳: スケルトンテキストのボーダー半径"
+          "docs": "スケルトンテキストのボーダー半径"
         }
       ],
       "slots": [],
@@ -17872,7 +17872,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -17893,7 +17893,7 @@
           "mutable": false,
           "attr": "options",
           "reflectToAttr": false,
-          "docs": "Options to pass to the swiper instance.\nSee https://swiperjs.com/swiper-api for valid options\n\n自動翻訳: swiperインスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。",
+          "docs": "swiperインスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。",
           "docsTags": [],
           "default": "{}",
           "values": [
@@ -17910,7 +17910,7 @@
           "mutable": false,
           "attr": "pager",
           "reflectToAttr": false,
-          "docs": "If `true`, show the pagination.\n\n自動翻訳: もし `true` ならば、ページネーションを表示します。",
+          "docs": "もし `true` ならば、ページネーションを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17927,7 +17927,7 @@
           "mutable": false,
           "attr": "scrollbar",
           "reflectToAttr": false,
-          "docs": "If `true`, show the scrollbar.\n\n自動翻訳: `true`の場合、スクロールバーを表示します。",
+          "docs": "`true`の場合、スクロールバーを表示します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -17948,7 +17948,7 @@
           },
           "signature": "getActiveIndex() => Promise<number>",
           "parameters": [],
-          "docs": "Get the index of the active slide.\n\n自動翻訳: アクティブなスライドのインデックスを取得します。",
+          "docs": "アクティブなスライドのインデックスを取得します。",
           "docsTags": []
         },
         {
@@ -17959,7 +17959,7 @@
           },
           "signature": "getPreviousIndex() => Promise<number>",
           "parameters": [],
-          "docs": "Get the index of the previous slide.\n\n自動翻訳: 前のスライドのインデックスを取得します。",
+          "docs": "前のスライドのインデックスを取得します。",
           "docsTags": []
         },
         {
@@ -17970,7 +17970,7 @@
           },
           "signature": "getSwiper() => Promise<any>",
           "parameters": [],
-          "docs": "Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://swiperjs.com/swiper-api for all API options.\n\n自動翻訳: Swiperのインスタンスを取得します。これを使用して、SwiperのフルAPIにアクセスします。すべてのAPIオプションについては、https://swiperjs.com/swiper-api を参照してください。",
+          "docs": "Swiperのインスタンスを取得します。これを使用して、SwiperのフルAPIにアクセスします。すべてのAPIオプションについては、https://swiperjs.com/swiper-api を参照してください。",
           "docsTags": []
         },
         {
@@ -17981,7 +17981,7 @@
           },
           "signature": "isBeginning() => Promise<boolean>",
           "parameters": [],
-          "docs": "Get whether or not the current slide is the first slide.\n\n自動翻訳: 現在のスライドが最初のスライドであるか否かを取得します。",
+          "docs": "現在のスライドが最初のスライドであるか否かを取得します。",
           "docsTags": []
         },
         {
@@ -17992,7 +17992,7 @@
           },
           "signature": "isEnd() => Promise<boolean>",
           "parameters": [],
-          "docs": "Get whether or not the current slide is the last slide.\n\n自動翻訳: 現在のスライドが最後のスライドであるか否かを取得します。",
+          "docs": "現在のスライドが最後のスライドであるか否かを取得します。",
           "docsTags": []
         },
         {
@@ -18003,7 +18003,7 @@
           },
           "signature": "length() => Promise<number>",
           "parameters": [],
-          "docs": "Get the total number of slides.\n\n自動翻訳: スライドの総枚数を取得します。",
+          "docs": "スライドの総枚数を取得します。",
           "docsTags": []
         },
         {
@@ -18014,7 +18014,7 @@
           },
           "signature": "lockSwipeToNext(lock: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Lock or unlock the ability to slide to the next slide.\n\n自動翻訳: 次のスライドにスライドする機能をロックまたはアンロックします。",
+          "docs": "次のスライドにスライドする機能をロックまたはアンロックします。",
           "docsTags": [
             {
               "name": "param",
@@ -18030,7 +18030,7 @@
           },
           "signature": "lockSwipeToPrev(lock: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Lock or unlock the ability to slide to the previous slide.\n\n自動翻訳: 前のスライドにスライドする機能をロックまたはアンロックします。",
+          "docs": "前のスライドにスライドする機能をロックまたはアンロックします。",
           "docsTags": [
             {
               "name": "param",
@@ -18046,7 +18046,7 @@
           },
           "signature": "lockSwipes(lock: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Lock or unlock the ability to slide to the next or previous slide.\n\n自動翻訳: 次のスライドや前のスライドにスライドする機能をロックまたはアンロックします。",
+          "docs": "次のスライドや前のスライドにスライドする機能をロックまたはアンロックします。",
           "docsTags": [
             {
               "name": "param",
@@ -18062,7 +18062,7 @@
           },
           "signature": "slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Transition to the next slide.\n\n自動翻訳: 次のスライドに遷移します。",
+          "docs": "次のスライドに遷移します。",
           "docsTags": [
             {
               "name": "param",
@@ -18082,7 +18082,7 @@
           },
           "signature": "slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Transition to the previous slide.\n\n自動翻訳: 前のスライドに遷移します。",
+          "docs": "前のスライドに遷移します。",
           "docsTags": [
             {
               "name": "param",
@@ -18102,7 +18102,7 @@
           },
           "signature": "slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Transition to the specified slide.\n\n自動翻訳: 指定されたスライドに遷移します。",
+          "docs": "指定されたスライドに遷移します。",
           "docsTags": [
             {
               "name": "param",
@@ -18126,7 +18126,7 @@
           },
           "signature": "startAutoplay() => Promise<void>",
           "parameters": [],
-          "docs": "Start auto play.\n\n自動翻訳: オートプレイを開始します。",
+          "docs": "オートプレイを開始します。",
           "docsTags": []
         },
         {
@@ -18137,7 +18137,7 @@
           },
           "signature": "stopAutoplay() => Promise<void>",
           "parameters": [],
-          "docs": "Stop auto play.\n\n自動翻訳: 自動再生を停止します。",
+          "docs": "自動再生を停止します。",
           "docsTags": []
         },
         {
@@ -18148,7 +18148,7 @@
           },
           "signature": "update() => Promise<void>",
           "parameters": [],
-          "docs": "Update the underlying slider implementation. Call this if you've added or removed\nchild slides.\n\n自動翻訳: 基礎となるスライダーの実装を更新します。子スライダーを追加または削除した場合に呼び出します。",
+          "docs": "基礎となるスライダーの実装を更新します。子スライダーを追加または削除した場合に呼び出します。",
           "docsTags": []
         },
         {
@@ -18159,7 +18159,7 @@
           },
           "signature": "updateAutoHeight(speed?: number) => Promise<void>",
           "parameters": [],
-          "docs": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.\n\n自動翻訳: speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeightが有効な場合）。",
+          "docs": "speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeightが有効な場合）。",
           "docsTags": [
             {
               "name": "param",
@@ -18175,7 +18175,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the active slide has changed.\n\n自動翻訳: アクティブスライドが変更された後に発行されます。",
+          "docs": "アクティブスライドが変更された後に発行されます。",
           "docsTags": []
         },
         {
@@ -18184,7 +18184,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user double taps on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをダブルタップしたときに発生します。",
+          "docs": "ユーザがスライドのコンテナをダブルタップしたときに発生します。",
           "docsTags": []
         },
         {
@@ -18193,7 +18193,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is actively being moved.\n\n自動翻訳: スライダーがアクティブに移動しているときに発行されます。",
+          "docs": "スライダーがアクティブに移動しているときに発行されます。",
           "docsTags": []
         },
         {
@@ -18202,7 +18202,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the next slide has ended.\n\n自動翻訳: 次のスライドが終了したときに発行されます。",
+          "docs": "次のスライドが終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18211,7 +18211,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the next slide has started.\n\n自動翻訳: 次のスライドが開始されたときに発行されます。",
+          "docs": "次のスライドが開始されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18220,7 +18220,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the previous slide has ended.\n\n自動翻訳: 前のスライドが終了したときに発行されます。",
+          "docs": "前のスライドが終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18229,7 +18229,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the previous slide has started.\n\n自動翻訳: 前のスライドが開始されたときに発行されます。",
+          "docs": "前のスライドが開始されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18238,7 +18238,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is at the last slide.\n\n自動翻訳: スライダーが最後のスライドになったときに発行されます。",
+          "docs": "スライダーが最後のスライドになったときに発行されます。",
           "docsTags": []
         },
         {
@@ -18247,7 +18247,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slider is at its initial position.\n\n自動翻訳: スライダーが初期位置にあるときに発行されます。",
+          "docs": "スライダーが初期位置にあるときに発行されます。",
           "docsTags": []
         },
         {
@@ -18256,7 +18256,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after Swiper initialization\n\n自動翻訳: Swiperの初期化後に発行されます。",
+          "docs": "Swiperの初期化後に発行されます。",
           "docsTags": []
         },
         {
@@ -18265,7 +18265,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user taps/clicks on the slide's container.\n\n自動翻訳: ユーザがスライドのコンテナをタップ/クリックしたときに発行されます。",
+          "docs": "ユーザがスライドのコンテナをタップ/クリックしたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18274,7 +18274,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user releases the touch.\n\n自動翻訳: ユーザーがタッチを離したときに発行されます。",
+          "docs": "ユーザーがタッチを離したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18283,7 +18283,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user first touches the slider.\n\n自動翻訳: ユーザーがスライダーに初めて触れたときに発行されます。",
+          "docs": "ユーザーがスライダーに初めて触れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18292,7 +18292,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slide transition has ended.\n\n自動翻訳: スライド遷移が終了したときに発行されます。",
+          "docs": "スライド遷移が終了したときに発行されます。",
           "docsTags": []
         },
         {
@@ -18301,7 +18301,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the slide transition has started.\n\n自動翻訳: スライド遷移が開始されたときに発行されます。",
+          "docs": "スライド遷移が開始されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18310,7 +18310,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the active slide has changed.\n\n自動翻訳: アクティブスライドが変更される前に発行されます。",
+          "docs": "アクティブスライドが変更される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -18319,32 +18319,32 @@
         {
           "name": "--bullet-background",
           "annotation": "prop",
-          "docs": "Background of the pagination bullets\n\n自動翻訳: ページネーションの箇条書きの背景"
+          "docs": "ページネーションの箇条書きの背景"
         },
         {
           "name": "--bullet-background-active",
           "annotation": "prop",
-          "docs": "Background of the active pagination bullet\n\n自動翻訳: アクティブなページネーションバレットの背景"
+          "docs": "アクティブなページネーションバレットの背景"
         },
         {
           "name": "--progress-bar-background",
           "annotation": "prop",
-          "docs": "Background of the pagination progress-bar\n\n自動翻訳: ページネーションの進行バーの背景"
+          "docs": "ページネーションの進行バーの背景"
         },
         {
           "name": "--progress-bar-background-active",
           "annotation": "prop",
-          "docs": "Background of the active pagination progress-bar\n\n自動翻訳: アクティブなページネーションの進行バーの背景"
+          "docs": "アクティブなページネーションの進行バーの背景"
         },
         {
           "name": "--scroll-bar-background",
           "annotation": "prop",
-          "docs": "Background of the pagination scroll-bar\n\n自動翻訳: ページネーション用スクロールバーの背景"
+          "docs": "ページネーション用スクロールバーの背景"
         },
         {
           "name": "--scroll-bar-background-active",
           "annotation": "prop",
-          "docs": "Background of the active pagination scroll-bar\n\n自動翻訳: アクティブなページネーションのスクロールバーの背景"
+          "docs": "アクティブなページネーションのスクロールバーの背景"
         }
       ],
       "slots": [],
@@ -18367,7 +18367,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -18422,7 +18422,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "Duration of the spinner animation in milliseconds. The default varies based on the spinner.\n\n自動翻訳: スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。",
+          "docs": "スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。",
           "docsTags": [],
           "values": [
             {
@@ -18441,7 +18441,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used.\n\n自動翻訳: 使用するSVGスピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。",
+          "docs": "使用するSVGスピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。",
           "docsTags": [],
           "values": [
             {
@@ -18493,7 +18493,7 @@
           "mutable": false,
           "attr": "paused",
           "reflectToAttr": false,
-          "docs": "If `true`, the spinner's animation will be paused.\n\n自動翻訳: `true`の場合、スピナーのアニメーションは一時停止されます。",
+          "docs": "`true`の場合、スピナーのアニメーションは一時停止されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18512,7 +18512,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the spinner\n\n自動翻訳: スピナーの色"
+          "docs": "スピナーの色"
         }
       ],
       "slots": [],
@@ -18549,7 +18549,7 @@
           "mutable": false,
           "attr": "content-id",
           "reflectToAttr": true,
-          "docs": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`.\n\n自動翻訳: メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
+          "docs": "メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
           "docsTags": [],
           "values": [
             {
@@ -18568,7 +18568,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the split pane will be hidden.\n\n自動翻訳: `true`の場合、分割ペインが非表示になります。",
+          "docs": "`true`の場合、分割ペインが非表示になります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18585,7 +18585,7 @@
           "mutable": false,
           "attr": "when",
           "reflectToAttr": false,
-          "docs": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression.\n\n自動翻訳: 分割パネルを表示するタイミング。CSSメディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。",
+          "docs": "分割パネルを表示するタイミング。CSSメディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。",
           "docsTags": [],
           "default": "QUERY['lg']",
           "values": [
@@ -18608,7 +18608,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Expression to be called when the split-pane visibility has changed\n\n自動翻訳: 分割画面の表示が変わったときに呼び出される式",
+          "docs": "分割画面の表示が変わったときに呼び出される式",
           "docsTags": []
         }
       ],
@@ -18617,22 +18617,22 @@
         {
           "name": "--border",
           "annotation": "prop",
-          "docs": "Border between panes\n\n自動翻訳: ペイン間のボーダー"
+          "docs": "ペイン間のボーダー"
         },
         {
           "name": "--side-max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the side pane. Does not apply when split pane is collapsed.\n\n自動翻訳: サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
+          "docs": "サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
         },
         {
           "name": "--side-min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the side pane. Does not apply when split pane is collapsed.\n\n自動翻訳: サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
+          "docs": "サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
         },
         {
           "name": "--side-width",
           "annotation": "prop",
-          "docs": "Width of the side pane. Does not apply when split pane is collapsed.\n\n自動翻訳: サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
+          "docs": "サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。"
         }
       ],
       "slots": [],
@@ -18660,7 +18660,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -18715,7 +18715,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -18736,7 +18736,7 @@
           "mutable": false,
           "attr": "selected-tab",
           "reflectToAttr": false,
-          "docs": "The selected tab component\n\n自動翻訳: 選択されたタブコンポーネント",
+          "docs": "選択されたタブコンポーネント",
           "docsTags": [],
           "values": [
             {
@@ -18755,7 +18755,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、タブバーを半透明にします。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、タブバーを半透明にします。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18774,17 +18774,17 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the tab bar\n\n自動翻訳: タブバーの背景"
+          "docs": "タブバーの背景"
         },
         {
           "name": "--border",
           "annotation": "prop",
-          "docs": "Border of the tab bar\n\n自動翻訳: タブバーの境界線"
+          "docs": "タブバーの境界線"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the tab bar\n\n自動翻訳: タブバーの色"
+          "docs": "タブバーの色"
         }
       ],
       "slots": [],
@@ -18816,7 +18816,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the tab button.\n\n自動翻訳: `true`の場合、ユーザはタブボタンを操作することができません。",
+          "docs": "`true`の場合、ユーザはタブボタンを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18833,7 +18833,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
-          "docs": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).\n\n自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
+          "docs": "この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。",
           "docsTags": [],
           "values": [
             {
@@ -18852,7 +18852,7 @@
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
-          "docs": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.\n\n自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
+          "docs": "ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。",
           "docsTags": [],
           "values": [
             {
@@ -18871,7 +18871,7 @@
           "mutable": true,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.\n\n自動翻訳: タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは `'icon-top'` です。",
+          "docs": "タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは `'icon-top'` です。",
           "docsTags": [],
           "values": [
             {
@@ -18911,7 +18911,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -18932,7 +18932,7 @@
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
-          "docs": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n\n自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
+          "docs": "ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。",
           "docsTags": [],
           "values": [
             {
@@ -18951,7 +18951,7 @@
           "mutable": true,
           "attr": "selected",
           "reflectToAttr": false,
-          "docs": "The selected tab component\n\n自動翻訳: 選択されたタブコンポーネント",
+          "docs": "選択されたタブコンポーネント",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18968,7 +18968,7 @@
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": false,
-          "docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.\n\n自動翻訳: 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
+          "docs": "各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
           "docsTags": [],
           "values": [
             {
@@ -18987,7 +18987,7 @@
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
-          "docs": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n\n自動翻訳: リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
+          "docs": "リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19015,64 +19015,64 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the tab button\n\n自動翻訳: タブボタンの背景"
+          "docs": "タブボタンの背景"
         },
         {
           "name": "--background-focused",
           "annotation": "prop",
-          "docs": "Background of the tab button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスされたときのタブボタンの背景"
+          "docs": "タブキーでフォーカスされたときのタブボタンの背景"
         },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the tab button background when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのタブボタンの背景の不透明度"
+          "docs": "タブキーでフォーカスしたときのタブボタンの背景の不透明度"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the tab button\n\n自動翻訳: タブボタンの色"
+          "docs": "タブボタンの色"
         },
         {
           "name": "--color-focused",
           "annotation": "prop",
-          "docs": "Color of the tab button when focused with the tab key\n\n自動翻訳: タブキーでフォーカスしたときのタブボタンの色"
+          "docs": "タブキーでフォーカスしたときのタブボタンの色"
         },
         {
           "name": "--color-selected",
           "annotation": "prop",
-          "docs": "Color of the selected tab button\n\n自動翻訳: 選択されたタブボタンの色"
+          "docs": "選択されたタブボタンの色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the tab button\n\n自動翻訳: タブボタンのBottom Padding"
+          "docs": "タブボタンのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
+          "docs": "タブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button\n\n自動翻訳: タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
+          "docs": "タブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the tab button\n\n自動翻訳: タブボタンのTop Padding"
+          "docs": "タブボタンのTop Padding"
         },
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "Color of the button ripple effect\n\n自動翻訳: ボタンリプルエフェクトの色"
+          "docs": "ボタンリプルエフェクトの色"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "native",
-          "docs": "The native HTML anchor element that wraps all child elements.\n\n自動翻訳: すべての子要素を包むネイティブHTMLのアンカー要素です。"
+          "docs": "すべての子要素を包むネイティブHTMLのアンカー要素です。"
         }
       ],
       "dependents": [],
@@ -19099,7 +19099,7 @@
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
-          "docs": "The component to display inside of the tab.\n\n自動翻訳: タブの内側に表示するコンポーネントです。",
+          "docs": "タブの内側に表示するコンポーネントです。",
           "docsTags": [],
           "values": [
             {
@@ -19127,7 +19127,7 @@
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": false,
-          "docs": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them.\n\n自動翻訳: 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
+          "docs": "各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。",
           "docsTags": [],
           "values": [
             {
@@ -19147,7 +19147,7 @@
           },
           "signature": "setActive() => Promise<void>",
           "parameters": [],
-          "docs": "Set the active component for the tab\n\n自動翻訳: タブのアクティブコンポーネントを設定します。",
+          "docs": "タブのアクティブコンポーネントを設定します。",
           "docsTags": []
         }
       ],
@@ -19190,7 +19190,7 @@
           },
           "signature": "getSelected() => Promise<string | undefined>",
           "parameters": [],
-          "docs": "Get the currently selected tab.\n\n自動翻訳: 現在選択されているタブを取得します。",
+          "docs": "現在選択されているタブを取得します。",
           "docsTags": []
         },
         {
@@ -19201,7 +19201,7 @@
           },
           "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
           "parameters": [],
-          "docs": "Get a specific tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得します。",
+          "docs": "タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得します。",
           "docsTags": [
             {
               "name": "param",
@@ -19217,7 +19217,7 @@
           },
           "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
           "parameters": [],
-          "docs": "Select a tab by the value of its `tab` property or an element reference.\n\n自動翻訳: タブの `tab` プロパティの値、または要素の参照によってタブを選択します。",
+          "docs": "タブの `tab` プロパティの値、または要素の参照によってタブを選択します。",
           "docsTags": [
             {
               "name": "param",
@@ -19233,7 +19233,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the navigation has finished transitioning to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。",
+          "docs": "ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。",
           "docsTags": []
         },
         {
@@ -19242,7 +19242,7 @@
           "bubbles": false,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the navigation is about to transition to a new component.\n\n自動翻訳: ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。",
+          "docs": "ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。",
           "docsTags": []
         }
       ],
@@ -19251,15 +19251,15 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
+          "docs": "slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "bottom",
-          "docs": "Content is placed at the bottom of the screen.\n\n自動翻訳: コンテンツは画面下部に配置されます。"
+          "docs": "コンテンツは画面下部に配置されます。"
         },
         {
           "name": "top",
-          "docs": "Content is placed at the top of the screen.\n\n自動翻訳: コンテンツは画面上部に配置されます。"
+          "docs": "コンテンツは画面上部に配置されます。"
         }
       ],
       "parts": [],
@@ -19286,7 +19286,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -19341,7 +19341,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -19386,7 +19386,7 @@
           "mutable": false,
           "attr": "auto-grow",
           "reflectToAttr": true,
-          "docs": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea.\n\n自動翻訳: `true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。",
+          "docs": "`true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19403,7 +19403,7 @@
           "mutable": false,
           "attr": "autocapitalize",
           "reflectToAttr": false,
-          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n\n自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+          "docs": "テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
           "docsTags": [],
           "default": "'none'",
           "values": [
@@ -19420,7 +19420,7 @@
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
-          "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n\n自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。",
+          "docs": "この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19437,7 +19437,7 @@
           "mutable": true,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
-          "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n\n自動翻訳: `true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
+          "docs": "`true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19454,7 +19454,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -19509,7 +19509,7 @@
           "mutable": false,
           "attr": "cols",
           "reflectToAttr": false,
-          "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n\n自動翻訳: テキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。",
+          "docs": "テキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -19528,7 +19528,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n\n自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+          "docs": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -19545,7 +19545,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the textarea.\n\n自動翻訳: `true`の場合、ユーザはテキストエリアと対話することができません。",
+          "docs": "`true`の場合、ユーザはテキストエリアと対話することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19562,7 +19562,7 @@
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.\n\n自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docs": "どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19606,7 +19606,7 @@
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
-          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\n自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+          "docs": "どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19654,7 +19654,7 @@
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
+          "docs": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -19673,7 +19673,7 @@
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
-          "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n\n自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
+          "docs": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -19692,7 +19692,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -19713,7 +19713,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -19730,7 +19730,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Instructional text that shows before the input has a value.\n\n自動翻訳: 入力が値を持つ前に表示される指示文。",
+          "docs": "入力が値を持つ前に表示される指示文。",
           "docsTags": [],
           "values": [
             {
@@ -19749,7 +19749,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot modify the value.\n\n自動翻訳: `true`の場合、ユーザーは値を変更することができません。",
+          "docs": "`true`の場合、ユーザーは値を変更することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19766,7 +19766,7 @@
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
-          "docs": "If `true`, the user must fill in a value before submitting a form.\n\n自動翻訳: `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
+          "docs": "`true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19783,7 +19783,7 @@
           "mutable": false,
           "attr": "rows",
           "reflectToAttr": false,
-          "docs": "The number of visible text lines for the control.\n\n自動翻訳: コントロールの可視テキスト行数。",
+          "docs": "コントロールの可視テキスト行数。",
           "docsTags": [],
           "values": [
             {
@@ -19802,7 +19802,7 @@
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
-          "docs": "If `true`, the element will have its spelling and grammar checked.\n\n自動翻訳: `true`の場合、その要素のスペルチェックと文法チェックが行われる。",
+          "docs": "`true`の場合、その要素のスペルチェックと文法チェックが行われる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19819,7 +19819,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the textarea.\n\n自動翻訳: textareaの値です。",
+          "docs": "textareaの値です。",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -19842,7 +19842,7 @@
           "mutable": false,
           "attr": "wrap",
           "reflectToAttr": false,
-          "docs": "Indicates how the control wraps text.\n\n自動翻訳: コントロールがテキストをどのように折り返すかを示します。",
+          "docs": "コントロールがテキストをどのように折り返すかを示します。",
           "docsTags": [],
           "values": [
             {
@@ -19874,7 +19874,7 @@
           },
           "signature": "getInputElement() => Promise<HTMLTextAreaElement>",
           "parameters": [],
-          "docs": "Returns the native `<textarea>` element used under the hood.\n\n自動翻訳: 要素の内部で使用されるネイティブの `<textarea>` 要素を返します。",
+          "docs": "要素の内部で使用されるネイティブの `<textarea>` 要素を返します。",
           "docsTags": []
         },
         {
@@ -19885,7 +19885,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.\n\n自動翻訳: ion-textarea` のネイティブ `textarea` にフォーカスを設定します。グローバルな `textarea.focus()` の代わりに、このメソッドを使用します。",
+          "docs": "ion-textarea` のネイティブ `textarea` にフォーカスを設定します。グローバルな `textarea.focus()` の代わりに、このメソッドを使用します。",
           "docsTags": []
         }
       ],
@@ -19896,7 +19896,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.\n\n自動翻訳: Inputのフォーカスが外れたときに発行されます。",
+          "docs": "Inputのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -19905,7 +19905,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input value has changed.\n\n自動翻訳: 入力値が変化したときに発行されます。",
+          "docs": "入力値が変化したときに発行されます。",
           "docsTags": []
         },
         {
@@ -19914,7 +19914,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has focus.\n\n自動翻訳: Inputにフォーカスが当たったときに発行されます。",
+          "docs": "Inputにフォーカスが当たったときに発行されます。",
           "docsTags": []
         },
         {
@@ -19923,7 +19923,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.\n\n自動翻訳: キーボード入力が発生したときに発します。",
+          "docs": "キーボード入力が発生したときに発します。",
           "docsTags": []
         }
       ],
@@ -19932,57 +19932,57 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the textarea\n\n自動翻訳: textareaの背景"
+          "docs": "textareaの背景"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the textarea\n\n自動翻訳: テキストエリアの境界半径"
+          "docs": "テキストエリアの境界半径"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the text\n\n自動翻訳: 本文の色"
+          "docs": "本文の色"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the textarea\n\n自動翻訳: テキストエリアのBottom Padding"
+          "docs": "テキストエリアのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea\n\n自動翻訳: テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
+          "docs": "テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea\n\n自動翻訳: textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。"
+          "docs": "textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the textarea\n\n自動翻訳: textareaのTop Padding"
+          "docs": "textareaのTop Padding"
         },
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of the placeholder text\n\n自動翻訳: Placeholderテキストの色"
+          "docs": "Placeholderテキストの色"
         },
         {
           "name": "--placeholder-font-style",
           "annotation": "prop",
-          "docs": "Style of the placeholder text\n\n自動翻訳: Placeholderテキストのスタイル"
+          "docs": "Placeholderテキストのスタイル"
         },
         {
           "name": "--placeholder-font-weight",
           "annotation": "prop",
-          "docs": "Weight of the placeholder text\n\n自動翻訳: Placeholderテキストの重さ"
+          "docs": "Placeholderテキストの重さ"
         },
         {
           "name": "--placeholder-opacity",
           "annotation": "prop",
-          "docs": "Opacity of the placeholder text\n\n自動翻訳: Placeholderテキストの不透明度"
+          "docs": "Placeholderテキストの不透明度"
         }
       ],
       "slots": [],
@@ -20006,12 +20006,12 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the thumbnail\n\n自動翻訳: サムネイルのボーダー半径"
+          "docs": "サムネイルのボーダー半径"
         },
         {
           "name": "--size",
           "annotation": "prop",
-          "docs": "Size of the thumbnail\n\n自動翻訳: サムネイルの大きさ"
+          "docs": "サムネイルの大きさ"
         }
       ],
       "slots": [],
@@ -20034,7 +20034,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20089,7 +20089,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The size of the toolbar title.\n\n自動翻訳: ツールバーのタイトルの大きさを指定します。",
+          "docs": "ツールバーのタイトルの大きさを指定します。",
           "docsTags": [],
           "values": [
             {
@@ -20115,7 +20115,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Text color of the title\n\n自動翻訳: タイトルの文字色"
+          "docs": "タイトルの文字色"
         }
       ],
       "slots": [],
@@ -20163,7 +20163,7 @@
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
-          "docs": "If `true`, the toast will animate.\n\n自動翻訳: `true`の場合、トーストはアニメーションします。",
+          "docs": "`true`の場合、トーストはアニメーションします。",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -20179,7 +20179,7 @@
           "type": "(string | ToastButton)[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An array of buttons for the toast.\n\n自動翻訳: トースト用のボタンがずらり。",
+          "docs": "トースト用のボタンがずらり。",
           "docsTags": [],
           "values": [
             {
@@ -20201,7 +20201,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20256,7 +20256,7 @@
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
-          "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.\n\n自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
+          "docs": "カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -20278,7 +20278,7 @@
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
-          "docs": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called.\n\n自動翻訳: トーストを隠すまでに何ミリ秒待つかを指定します。デフォルトでは、`dismiss()`が呼ばれるまで表示されます。",
+          "docs": "トーストを隠すまでに何ミリ秒待つかを指定します。デフォルトでは、`dismiss()`が呼ばれるまで表示されます。",
           "docsTags": [],
           "default": "config.getNumber('toastDuration', 0)",
           "values": [
@@ -20294,7 +20294,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the toast is presented.\n\n自動翻訳: 乾杯の音頭をとるときに使うアニメーションです。",
+          "docs": "乾杯の音頭をとるときに使うアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -20313,7 +20313,7 @@
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
-          "docs": "Header to be shown in the toast.\n\n自動翻訳: トーストに表示されるヘッダー。",
+          "docs": "トーストに表示されるヘッダー。",
           "docsTags": [],
           "values": [
             {
@@ -20331,7 +20331,7 @@
           "type": "undefined | { [key: string]: any; }",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Additional attributes to pass to the toast.\n\n自動翻訳: トーストに渡す追加の属性。",
+          "docs": "トーストに渡す追加の属性。",
           "docsTags": [],
           "values": [
             {
@@ -20350,7 +20350,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons\n\n自動翻訳: 表示するアイコンの名前、または有効なSVGファイルへのパスを指定します。ion-icon`を参照。https://ionic.io/ionicons",
+          "docs": "表示するアイコンの名前、または有効なSVGファイルへのパスを指定します。ion-icon`を参照。https://ionic.io/ionicons",
           "docsTags": [],
           "values": [
             {
@@ -20369,7 +20369,7 @@
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
-          "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.\n\n自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
+          "docs": "`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20386,7 +20386,7 @@
           "mutable": false,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.\n\n自動翻訳: トーストのメッセージやボタンの配置を定義します。'baseline'を指定します。メッセージとボタンは同じ行に表示されます。メッセージテキストはメッセージコンテナ内で折り返すことができます。'stacked':ボタンコンテナとメッセージが重なるように表示されます。ボタンに長いテキストがある場合に使用します。",
+          "docs": "トーストのメッセージやボタンの配置を定義します。'baseline'を指定します。メッセージとボタンは同じ行に表示されます。メッセージテキストはメッセージコンテナ内で折り返すことができます。'stacked':ボタンコンテナとメッセージが重なるように表示されます。ボタンに長いテキストがある場合に使用します。",
           "docsTags": [],
           "default": "'baseline'",
           "values": [
@@ -20407,7 +20407,7 @@
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Animation to use when the toast is dismissed.\n\n自動翻訳: トーストの解散時に使用するアニメーションです。",
+          "docs": "トーストの解散時に使用するアニメーションです。",
           "docsTags": [],
           "values": [
             {
@@ -20426,7 +20426,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "Message to be shown in the toast.\n\n自動翻訳: 乾杯の際に表示するメッセージ",
+          "docs": "乾杯の際に表示するメッセージ",
           "docsTags": [],
           "values": [
             {
@@ -20448,7 +20448,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -20469,7 +20469,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position of the toast on the screen.\n\n自動翻訳: 画面上のトーストの位置です。",
+          "docs": "画面上のトーストの位置です。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -20495,7 +20495,7 @@
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
-          "docs": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\n自動翻訳: `true`の場合、トーストは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
+          "docs": "`true`の場合、トーストは半透明になります。modeが `\"ios\"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20516,7 +20516,7 @@
           },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
-          "docs": "Dismiss the toast overlay after it has been presented.\n\n自動翻訳: トーストのオーバーレイが提示された後、それを解除します。",
+          "docs": "トーストのオーバーレイが提示された後、それを解除します。",
           "docsTags": [
             {
               "name": "param",
@@ -20536,7 +20536,7 @@
           },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the toast did dismiss.\n\n自動翻訳: トーストが解散したことを解決するPromiseを返します。",
+          "docs": "トーストが解散したことを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -20547,7 +20547,7 @@
           },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
-          "docs": "Returns a promise that resolves when the toast will dismiss.\n\n自動翻訳: トーストが解散するタイミングを解決するPromiseを返します。",
+          "docs": "トーストが解散するタイミングを解決するPromiseを返します。",
           "docsTags": []
         },
         {
@@ -20558,7 +20558,7 @@
           },
           "signature": "present() => Promise<void>",
           "parameters": [],
-          "docs": "Present the toast overlay after it has been created.\n\n自動翻訳: トーストのオーバーレイを作成した後に提示します。",
+          "docs": "トーストのオーバーレイを作成した後に提示します。",
           "docsTags": []
         }
       ],
@@ -20569,7 +20569,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has dismissed.\n\n自動翻訳: トーストが解散した後に発行されます。",
+          "docs": "トーストが解散した後に発行されます。",
           "docsTags": []
         },
         {
@@ -20578,7 +20578,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has presented.\n\n自動翻訳: トーストが提示された後に発します。",
+          "docs": "トーストが提示された後に発します。",
           "docsTags": []
         },
         {
@@ -20587,7 +20587,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has dismissed.\n\n自動翻訳: 乾杯が解散する前に発します。",
+          "docs": "乾杯が解散する前に発します。",
           "docsTags": []
         },
         {
@@ -20596,7 +20596,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has presented.\n\n自動翻訳: トーストが提示される前に発行されます。",
+          "docs": "トーストが提示される前に発行されます。",
           "docsTags": []
         }
       ],
@@ -20605,110 +20605,110 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the toast\n\n自動翻訳: 乾杯の背景"
+          "docs": "乾杯の背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Border color of the toast\n\n自動翻訳: トーストのボーダーカラー"
+          "docs": "トーストのボーダーカラー"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the toast\n\n自動翻訳: トーストのボーダー半径"
+          "docs": "トーストのボーダー半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Border style of the toast\n\n自動翻訳: トーストのボーダースタイル"
+          "docs": "トーストのボーダースタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Border width of the toast\n\n自動翻訳: トーストのボーダー幅"
+          "docs": "トーストのボーダー幅"
         },
         {
           "name": "--box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the toast\n\n自動翻訳: 乾杯の箱影"
+          "docs": "乾杯の箱影"
         },
         {
           "name": "--button-color",
           "annotation": "prop",
-          "docs": "Color of the button text\n\n自動翻訳: ボタンテキストの色"
+          "docs": "ボタンテキストの色"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the toast text\n\n自動翻訳: トーストの文字色"
+          "docs": "トーストの文字色"
         },
         {
           "name": "--end",
           "annotation": "prop",
-          "docs": "Position from the right if direction is left-to-right, and from the left if direction is right-to-left\n\n自動翻訳: 方向が左から右の場合は右から、方向が右から左の場合は左から位置すること"
+          "docs": "方向が左から右の場合は右から、方向が右から左の場合は左から位置すること"
         },
         {
           "name": "--height",
           "annotation": "prop",
-          "docs": "Height of the toast\n\n自動翻訳: トーストの高さ"
+          "docs": "トーストの高さ"
         },
         {
           "name": "--max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the toast\n\n自動翻訳: トーストの最大の高さ"
+          "docs": "トーストの最大の高さ"
         },
         {
           "name": "--max-width",
           "annotation": "prop",
-          "docs": "Maximum width of the toast\n\n自動翻訳: トーストの最大幅"
+          "docs": "トーストの最大幅"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the toast\n\n自動翻訳: トーストの最小の高さ"
+          "docs": "トーストの最小の高さ"
         },
         {
           "name": "--min-width",
           "annotation": "prop",
-          "docs": "Minimum width of the toast\n\n自動翻訳: トーストの最小幅"
+          "docs": "トーストの最小幅"
         },
         {
           "name": "--start",
           "annotation": "prop",
-          "docs": "Position from the left if direction is left-to-right, and from the right if direction is right-to-left\n\n自動翻訳: 方向が左から右の場合は左から、方向が右から左の場合は右から位置すること"
+          "docs": "方向が左から右の場合は左から、方向が右から左の場合は右から位置すること"
         },
         {
           "name": "--white-space",
           "annotation": "prop",
-          "docs": "White space of the toast message\n\n自動翻訳: 乾杯メッセージのホワイトスペース"
+          "docs": "乾杯メッセージのホワイトスペース"
         },
         {
           "name": "--width",
           "annotation": "prop",
-          "docs": "Width of the toast\n\n自動翻訳: トーストの幅"
+          "docs": "トーストの幅"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "button",
-          "docs": "Any button element that is displayed inside of the toast.\n\n自動翻訳: トーストの内側に表示される任意のボタン要素。"
+          "docs": "トーストの内側に表示される任意のボタン要素。"
         },
         {
           "name": "container",
-          "docs": "The element that wraps all child elements.\n\n自動翻訳: すべての子要素を包む要素。"
+          "docs": "すべての子要素を包む要素。"
         },
         {
           "name": "header",
-          "docs": "The header text of the toast.\n\n自動翻訳: 乾杯のヘッダーテキストです。"
+          "docs": "乾杯のヘッダーテキストです。"
         },
         {
           "name": "icon",
-          "docs": "The icon that appears next to the toast content.\n\n自動翻訳: トーストの内容の横に表示されるアイコンです。"
+          "docs": "トーストの内容の横に表示されるアイコンです。"
         },
         {
           "name": "message",
-          "docs": "The body text of the toast.\n\n自動翻訳: 乾杯の音頭の本文です。"
+          "docs": "乾杯の音頭の本文です。"
         }
       ],
       "dependents": [],
@@ -20750,7 +20750,7 @@
           "mutable": true,
           "attr": "checked",
           "reflectToAttr": false,
-          "docs": "If `true`, the toggle is selected.\n\n自動翻訳: `true`の場合、トグルが選択されます。",
+          "docs": "`true`の場合、トグルが選択されます。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20767,7 +20767,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -20822,7 +20822,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "If `true`, the user cannot interact with the toggle.\n\n自動翻訳: `true`の場合、ユーザーはトグルを操作することができません。",
+          "docs": "`true`の場合、ユーザーはトグルを操作することができません。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20839,7 +20839,7 @@
           "mutable": false,
           "attr": "enable-on-off-labels",
           "reflectToAttr": false,
-          "docs": "Enables the on/off accessibility switch labels within the toggle.\n\n自動翻訳: トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。",
+          "docs": "トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。",
           "docsTags": [],
           "default": "config.get('toggleOnOffLabels')",
           "values": [
@@ -20859,7 +20859,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -20880,7 +20880,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "The name of the control, which is submitted with the form data.\n\n自動翻訳: フォームデータとともに送信されるコントロールの名前。",
+          "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
           "default": "this.inputId",
           "values": [
@@ -20897,7 +20897,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`.\n\n自動翻訳: トグルの値は、チェックされているかどうかを意味するものではありません。  トグルの値は `<input type=\"checkbox\">` の値に類似しており、トグルがネイティブの `<form>` に参加する場合にのみ使用されます。",
+          "docs": "トグルの値は、チェックされているかどうかを意味するものではありません。  トグルの値は `<input type=\"checkbox\">` の値に類似しており、トグルがネイティブの `<form>` に参加する場合にのみ使用されます。",
           "docsTags": [],
           "default": "'on'",
           "values": [
@@ -20923,7 +20923,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the toggle loses focus.\n\n自動翻訳: トグルのフォーカスが外れたときに発行されます。",
+          "docs": "トグルのフォーカスが外れたときに発行されます。",
           "docsTags": []
         },
         {
@@ -20932,7 +20932,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed.\n\n自動翻訳: valueプロパティが変更されたときに発行されます。",
+          "docs": "valueプロパティが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -20941,7 +20941,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the toggle has focus.\n\n自動翻訳: トグルにフォーカスが当たったときに発行されます。",
+          "docs": "トグルにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -20950,73 +20950,73 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the toggle\n\n自動翻訳: トグルの背景"
+          "docs": "トグルの背景"
         },
         {
           "name": "--background-checked",
           "annotation": "prop",
-          "docs": "Background of the toggle when checked\n\n自動翻訳: チェックしたときのトグルの背景"
+          "docs": "チェックしたときのトグルの背景"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the toggle track\n\n自動翻訳: トグルトラックのボーダー半径"
+          "docs": "トグルトラックのボーダー半径"
         },
         {
           "name": "--handle-background",
           "annotation": "prop",
-          "docs": "Background of the toggle handle\n\n自動翻訳: トグルハンドルの背景"
+          "docs": "トグルハンドルの背景"
         },
         {
           "name": "--handle-background-checked",
           "annotation": "prop",
-          "docs": "Background of the toggle handle when checked\n\n自動翻訳: チェックしたときのトグルハンドルの背景"
+          "docs": "チェックしたときのトグルハンドルの背景"
         },
         {
           "name": "--handle-border-radius",
           "annotation": "prop",
-          "docs": "Border radius of the toggle handle\n\n自動翻訳: トグルハンドルのボーダー半径"
+          "docs": "トグルハンドルのボーダー半径"
         },
         {
           "name": "--handle-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the toggle handle\n\n自動翻訳: トグルハンドルのボックスシャドウ"
+          "docs": "トグルハンドルのボックスシャドウ"
         },
         {
           "name": "--handle-height",
           "annotation": "prop",
-          "docs": "Height of the toggle handle\n\n自動翻訳: トグルハンドルの高さ"
+          "docs": "トグルハンドルの高さ"
         },
         {
           "name": "--handle-max-height",
           "annotation": "prop",
-          "docs": "Maximum height of the toggle handle\n\n自動翻訳: トグルハンドルの最大の高さ"
+          "docs": "トグルハンドルの最大の高さ"
         },
         {
           "name": "--handle-spacing",
           "annotation": "prop",
-          "docs": "Horizontal spacing around the toggle handle\n\n自動翻訳: トグルハンドル周辺の横方向の間隔"
+          "docs": "トグルハンドル周辺の横方向の間隔"
         },
         {
           "name": "--handle-transition",
           "annotation": "prop",
-          "docs": "Transition of the toggle handle\n\n自動翻訳: トグルハンドルの変遷"
+          "docs": "トグルハンドルの変遷"
         },
         {
           "name": "--handle-width",
           "annotation": "prop",
-          "docs": "Width of the toggle handle\n\n自動翻訳: トグルハンドルの幅"
+          "docs": "トグルハンドルの幅"
         }
       ],
       "slots": [],
       "parts": [
         {
           "name": "handle",
-          "docs": "The toggle handle, or knob, used to change the checked state.\n\n自動翻訳: チェックした状態を変更するために使用するトグルハンドル（つまみ）です。"
+          "docs": "チェックした状態を変更するために使用するトグルハンドル（つまみ）です。"
         },
         {
           "name": "track",
-          "docs": "The background track of the toggle.\n\n自動翻訳: トグルの背景トラックです。"
+          "docs": "トグルの背景トラックです。"
         }
       ],
       "dependents": [],
@@ -21068,7 +21068,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\n自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
             {
@@ -21123,7 +21123,7 @@
           "mutable": false,
           "attr": "mode",
           "reflectToAttr": false,
-          "docs": "The mode determines which platform styles to use.\n\n自動翻訳: modeは、どのプラットフォームのスタイルを使用するかを決定します。",
+          "docs": "modeは、どのプラットフォームのスタイルを使用するかを決定します。",
           "docsTags": [],
           "values": [
             {
@@ -21152,79 +21152,79 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the toolbar\n\n自動翻訳: ツールバーの背景"
+          "docs": "ツールバーの背景"
         },
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the toolbar border\n\n自動翻訳: ツールバーの枠の色"
+          "docs": "ツールバーの枠の色"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the toolbar border\n\n自動翻訳: ツールバーのボーダーのスタイル"
+          "docs": "ツールバーのボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the toolbar border\n\n自動翻訳: ツールバーの枠の幅"
+          "docs": "ツールバーの枠の幅"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the toolbar text\n\n自動翻訳: ツールバーテキストの色"
+          "docs": "ツールバーテキストの色"
         },
         {
           "name": "--min-height",
           "annotation": "prop",
-          "docs": "Minimum height of the toolbar\n\n自動翻訳: ツールバーの最小高さ"
+          "docs": "ツールバーの最小高さ"
         },
         {
           "name": "--opacity",
           "annotation": "prop",
-          "docs": "Opacity of the toolbar background\n\n自動翻訳: ツールバーの背景の不透明度"
+          "docs": "ツールバーの背景の不透明度"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the toolbar\n\n自動翻訳: ツールバーのBottom Padding"
+          "docs": "ツールバーのBottom Padding"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
+          "docs": "ツールバーの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar\n\n自動翻訳: ツールバーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。"
+          "docs": "ツールバーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the toolbar\n\n自動翻訳: ツールバーのTop Padding"
+          "docs": "ツールバーのTop Padding"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed between the named slots if provided without a slot.\n\n自動翻訳: slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
+          "docs": "slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。"
         },
         {
           "name": "end",
-          "docs": "Content is placed to the right of the toolbar text in LTR, and to the left in RTL.\n\n自動翻訳: コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。"
+          "docs": "コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。"
         },
         {
           "name": "primary",
-          "docs": "Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.\n\n自動翻訳: コンテンツは、`ios` modeではツールバーテキストの右側に、`md` modeでは右端に配置されます。"
+          "docs": "コンテンツは、`ios` modeではツールバーテキストの右側に、`md` modeでは右端に配置されます。"
         },
         {
           "name": "secondary",
-          "docs": "Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.\n\n自動翻訳: コンテンツは、`ios` modeではツールバーテキストの左側に、`md` modeでは右側に直接配置されます。"
+          "docs": "コンテンツは、`ios` modeではツールバーテキストの左側に、`md` modeでは右側に直接配置されます。"
         },
         {
           "name": "start",
-          "docs": "Content is placed to the left of the toolbar text in LTR, and to the right in RTL.\n\n自動翻訳: コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。"
+          "docs": "コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。"
         }
       ],
       "parts": [],
@@ -21246,7 +21246,7 @@
           "mutable": false,
           "attr": "approx-footer-height",
           "reflectToAttr": false,
-          "docs": "The approximate width of each footer template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.\n\n自動翻訳: 各フッターテンプレートのセルのおおよその幅を指定します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
+          "docs": "各フッターテンプレートのセルのおおよその幅を指定します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
           "docsTags": [],
           "default": "30",
           "values": [
@@ -21263,7 +21263,7 @@
           "mutable": false,
           "attr": "approx-header-height",
           "reflectToAttr": false,
-          "docs": "The approximate height of each header template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.\n\n自動翻訳: 各ヘッダーテンプレートのセルのおおよその高さを表します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
+          "docs": "各ヘッダーテンプレートのセルのおおよその高さを表します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。",
           "docsTags": [],
           "default": "30",
           "values": [
@@ -21280,7 +21280,7 @@
           "mutable": false,
           "attr": "approx-item-height",
           "reflectToAttr": false,
-          "docs": "It is important to provide this\nif virtual item height will be significantly larger than the default\nThe approximate height of each virtual item template's cell.\nThis dimension is used to help determine how many cells should\nbe created when initialized, and to help calculate the height of\nthe scrollable area. This height value can only use `px` units.\nNote that the actual rendered size of each cell comes from the\napp's CSS, whereas this approximation is used to help calculate\ninitial dimensions before the item has been rendered.\n\n自動翻訳: 仮想アイテムの高さがデフォルトよりかなり大きくなる場合は、これを指定することが重要です。 各仮想アイテムテンプレートのセルのおおよその高さ。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られるもので、この近似値はアイテムがレンダリングされる前に初期寸法を計算するのに役立つものであることに注意してください。",
+          "docs": "仮想アイテムの高さがデフォルトよりかなり大きくなる場合は、これを指定することが重要です。 各仮想アイテムテンプレートのセルのおおよその高さ。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られるもので、この近似値はアイテムがレンダリングされる前に初期寸法を計算するのに役立つものであることに注意してください。",
           "docsTags": [],
           "default": "45",
           "values": [
@@ -21296,7 +21296,7 @@
           "type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Section footers and the data used within its given\ntemplate can be dynamically created by passing a function to `footerFn`.\nThe logic within the footer function can decide if the footer template\nshould be used, and what data to give to the footer template. The function\nmust return `null` if a footer cell shouldn't be created.\n\n自動翻訳: セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければなりません。",
+          "docs": "セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければなりません。",
           "docsTags": [],
           "values": [
             {
@@ -21320,7 +21320,7 @@
           "type": "((item: any, index: number) => number) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An optional function that maps each item footer within their height.\n\n自動翻訳: 各項目のフッターをその高さ内にマッピングするオプション関数。",
+          "docs": "各項目のフッターをその高さ内にマッピングするオプション関数。",
           "docsTags": [],
           "values": [
             {
@@ -21338,7 +21338,7 @@
           "type": "((item: any, index: number, items: any[]) => string | null | undefined) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Section headers and the data used within its given\ntemplate can be dynamically created by passing a function to `headerFn`.\nFor example, a large list of contacts usually has dividers between each\nletter in the alphabet. App's can provide their own custom `headerFn`\nwhich is called with each record within the dataset. The logic within\nthe header function can decide if the header template should be used,\nand what data to give to the header template. The function must return\n`null` if a header cell shouldn't be created.\n\n自動翻訳: セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければなりません。",
+          "docs": "セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければなりません。",
           "docsTags": [],
           "values": [
             {
@@ -21362,7 +21362,7 @@
           "type": "((item: any, index: number) => number) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An optional function that maps each item header within their height.\n\n自動翻訳: 各項目のヘッダを高さの範囲内でマッピングするオプション関数。",
+          "docs": "各項目のヘッダを高さの範囲内でマッピングするオプション関数。",
           "docsTags": [],
           "values": [
             {
@@ -21380,7 +21380,7 @@
           "type": "((item: any, index: number) => number) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "An optional function that maps each item within their height.\nWhen this function is provides, heavy optimizations and fast path can be taked by\n`ion-virtual-scroll` leading to massive performance improvements.\n\nThis function allows to skip all DOM reads, which can be Doing so leads\nto massive performance\n\n自動翻訳: 各アイテムをその高さ内にマッピングするオプションの関数です。この関数が提供されると、`ion-virtual-scroll`によって重い最適化と高速パスが取られるようになり、大幅な性能向上が期待できる。  この関数は、DOMの読み込みをすべてスキップすることができ、Doingすることで大幅なパフォーマンスの向上につながります。",
+          "docs": "各アイテムをその高さ内にマッピングするオプションの関数です。この関数が提供されると、`ion-virtual-scroll`によって重い最適化と高速パスが取られるようになり、大幅な性能向上が期待できる。  この関数は、DOMの読み込みをすべてスキップすることができ、Doingすることで大幅なパフォーマンスの向上につながります。",
           "docsTags": [],
           "values": [
             {
@@ -21398,7 +21398,7 @@
           "type": "any[] | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The data that builds the templates within the virtual scroll.\nIt's important to note that when this data has changed, then the\nentire virtual scroll is reset, which is an expensive operation and\nshould be avoided if possible.\n\n自動翻訳: 仮想スクロール内のテンプレートを構築するためのデータです。このデータが変更された場合、仮想スクロール全体がリセットされることになります。",
+          "docs": "仮想スクロール内のテンプレートを構築するためのデータです。このデータが変更された場合、仮想スクロール全体がリセットされることになります。",
           "docsTags": [],
           "values": [
             {
@@ -21416,7 +21416,7 @@
           "type": "((el: HTMLElement | null, cell: Cell, domIndex: number) => HTMLElement) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only Vanilla JS API.\n\n自動翻訳: 注：Vanilla JS APIのみです。",
+          "docs": "注：Vanilla JS APIのみです。",
           "docsTags": [],
           "values": [
             {
@@ -21437,7 +21437,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the footer to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供します。JSXのvirtual-domを返します。",
+          "docs": "注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供します。JSXのvirtual-domを返します。",
           "docsTags": [],
           "values": [
             {
@@ -21455,7 +21455,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the header to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供します。JSXのvirtual-domを返します。",
+          "docs": "注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供します。JSXのvirtual-domを返します。",
           "docsTags": [],
           "values": [
             {
@@ -21473,7 +21473,7 @@
           "type": "((item: any, index: number) => any) | undefined",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "NOTE: only JSX API for stencil.\n\nProvide a render function for the items to be rendered. Returns a JSX virtual-dom.\n\n自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意します。JSXのvirtual-domを返します。",
+          "docs": "注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意します。JSXのvirtual-domを返します。",
           "docsTags": [],
           "values": [
             {
@@ -21496,7 +21496,7 @@
           },
           "signature": "checkEnd() => Promise<void>",
           "parameters": [],
-          "docs": "This method marks the tail the items array as dirty, so they can be re-rendered.\n\nIt's equivalent to calling:\n\n```js\nvirtualScroll.checkRange(lastItemLen);\n```\n\n自動翻訳: このメソッドは、アイテム配列の末尾をダーティとしてマークし、再レンダリングできるようにします。  これは次のように呼び出すのと同じです： ``js virtualScroll.checkRange(lastItemLen); ```。",
+          "docs": "このメソッドは、アイテム配列の末尾をダーティとしてマークし、再レンダリングできるようにします。  これは次のように呼び出すのと同じです： ``js virtualScroll.checkRange(lastItemLen); ```。",
           "docsTags": []
         },
         {
@@ -21507,7 +21507,7 @@
           },
           "signature": "checkRange(offset: number, len?: number) => Promise<void>",
           "parameters": [],
-          "docs": "This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as\ndirty any time the content or their style changes.\n\nThe subset of items to be updated can are specifying by an offset and a length.\n\n自動翻訳: このメソッドは、アイテムのサブセットをダーティとしてマークし、再レンダリングができるようにします。アイテムは、コンテンツまたはそのスタイルが変更されるたびに、ダーティとしてマークされる必要があります。  更新されるアイテムのサブセットは、オフセットと長さで指定することができます。",
+          "docs": "このメソッドは、アイテムのサブセットをダーティとしてマークし、再レンダリングができるようにします。アイテムは、コンテンツまたはそのスタイルが変更されるたびに、ダーティとしてマークされる必要があります。  更新されるアイテムのサブセットは、オフセットと長さで指定することができます。",
           "docsTags": []
         },
         {
@@ -21518,7 +21518,7 @@
           },
           "signature": "positionForItem(index: number) => Promise<number>",
           "parameters": [],
-          "docs": "Returns the position of the virtual item at the given index.\n\n自動翻訳: 指定されたインデックスの位置にある仮想アイテムの位置を返します。",
+          "docs": "指定されたインデックスの位置にある仮想アイテムの位置を返します。",
           "docsTags": []
         }
       ],
diff --git a/scripts/data/translated-cli.json b/scripts/data/translated-cli.json
index d995b14310a..ef56bcbaa20 100644
--- a/scripts/data/translated-cli.json
+++ b/scripts/data/translated-cli.json
@@ -116,7 +116,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to add (e.g. `android`, `ios`)\n\n自動翻訳: 追加するプラットフォーム（例：`android`、`ios`）。",
+          "summary": "追加するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -144,7 +144,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to build for (e.g. `android`, `ios`)\n\n自動翻訳: ビルドするプラットフォーム（例：`android`、`ios`）を指定します。",
+          "summary": "ビルドするプラットフォーム（例：`android`、`ios`）を指定します。",
           "required": true
         }
       ],
@@ -241,7 +241,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to copy (e.g. `android`, `ios`)\n\n自動翻訳: コピーするプラットフォーム（例：`android`、`ios`）。",
+          "summary": "コピーするプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -327,7 +327,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to open (e.g. `android`, `ios`)\n\n自動翻訳: 開くプラットフォーム（例：`android`、`ios`）。",
+          "summary": "開くプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -355,7 +355,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to run (e.g. `android`, `ios`)\n\n自動翻訳: 実行するプラットフォーム（例：`android`、`ios`）。",
+          "summary": "実行するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -549,7 +549,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to sync (e.g. `android`, `ios`)\n\n自動翻訳: 同期するプラットフォーム（例：`android`、`ios`）。",
+          "summary": "同期するプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -635,7 +635,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to update (e.g. `android`, `ios`)\n\n自動翻訳: アップデートするプラットフォーム（例：`android`、`ios`）。",
+          "summary": "アップデートするプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -682,7 +682,7 @@
       "inputs": [
         {
           "name": "property",
-          "summary": "The property name you wish to get\n\n自動翻訳: 取得したいプロパティ名",
+          "summary": "取得したいプロパティ名",
           "required": false
         }
       ],
@@ -745,12 +745,12 @@
       "inputs": [
         {
           "name": "property",
-          "summary": "The property name you wish to set\n\n自動翻訳: 設定したいプロパティ名",
+          "summary": "設定したいプロパティ名",
           "required": true
         },
         {
           "name": "value",
-          "summary": "The new value of the given property\n\n自動翻訳: 与えられたプロパティの新しい値",
+          "summary": "与えられたプロパティの新しい値",
           "required": true
         }
       ],
@@ -829,7 +829,7 @@
       "inputs": [
         {
           "name": "property",
-          "summary": "The property name you wish to delete\n\n自動翻訳: 削除したいプロパティ名",
+          "summary": "削除したいプロパティ名",
           "required": true
         }
       ],
@@ -889,7 +889,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to build (e.g. `android`, `ios`)\n\n自動翻訳: ビルドするプラットフォーム（例：`android`、`ios`）。",
+          "summary": "ビルドするプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -1035,7 +1035,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to compile (`android`, `ios`)\n\n自動翻訳: コンパイルするプラットフォーム（`android`、`ios`）。",
+          "summary": "コンパイルするプラットフォーム（`android`、`ios`）。",
           "required": true
         }
       ],
@@ -1142,7 +1142,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to run (e.g. `android`, `ios`)\n\n自動翻訳: 実行するプラットフォーム（例：`android`、`ios`）。",
+          "summary": "実行するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -1469,12 +1469,12 @@
       "inputs": [
         {
           "name": "action",
-          "summary": "`add`, `remove`, or `update` a platform; `ls`, `check`, or `save` all project platforms\n\n自動翻訳: プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存します。",
+          "summary": "プラットフォームの追加、削除、または更新; プロジェクトのプラットフォームをすべて保存します。",
           "required": false
         },
         {
           "name": "platform",
-          "summary": "The platform that you would like to add (`android`, `ios`)\n\n自動翻訳: 追加したいプラットフォーム（`android`、`ios`）を指定します。",
+          "summary": "追加したいプラットフォーム（`android`、`ios`）を指定します。",
           "required": false
         }
       ],
@@ -1515,12 +1515,12 @@
       "inputs": [
         {
           "name": "action",
-          "summary": "`add` or `remove` a plugin; `ls` or `save` all project plugins\n\n自動翻訳: プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` します。",
+          "summary": "プラグインを `add` または `remove`; プロジェクトのすべてのプラグインを `ls` または `save` します。",
           "required": false
         },
         {
           "name": "plugin",
-          "summary": "The name of the plugin (corresponds to `add` and `remove`)\n\n自動翻訳: プラグインの名前 (`add` と `remove` に対応する)",
+          "summary": "プラグインの名前 (`add` と `remove` に対応する)",
           "required": false
         }
       ],
@@ -1574,7 +1574,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform you would like to prepare (e.g. `android`, `ios`)\n\n自動翻訳: 用意したいプラットフォーム（例：`android`、`ios`）。",
+          "summary": "用意したいプラットフォーム（例：`android`、`ios`）。",
           "required": false
         }
       ],
@@ -1660,7 +1660,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform for which you would like to gather requirements (`android`, `ios`)\n\n自動翻訳: 要件を収集したいプラットフォーム（`android`、`ios`）。",
+          "summary": "要件を収集したいプラットフォーム（`android`、`ios`）。",
           "required": false
         }
       ],
@@ -1688,7 +1688,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform for which you would like to generate resources (`ios`, `android`)\n\n自動翻訳: リソースを生成したいプラットフォーム（`ios`、`android`）を指定します。",
+          "summary": "リソースを生成したいプラットフォーム（`ios`、`android`）を指定します。",
           "required": false
         }
       ],
@@ -1751,7 +1751,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to run (e.g. `android`, `ios`)\n\n自動翻訳: 実行するプラットフォーム（例：`android`、`ios`）。",
+          "summary": "実行するプラットフォーム（例：`android`、`ios`）。",
           "required": true
         }
       ],
@@ -2230,7 +2230,7 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The native platform (e.g. `ios`, `android`)\n\n自動翻訳: ネイティブプラットフォーム（例：`ios`、`android`）。",
+          "summary": "ネイティブプラットフォーム（例：`ios`、`android`）。",
           "required": false
         }
       ],
@@ -2363,7 +2363,7 @@
       "inputs": [
         {
           "name": "id",
-          "summary": "The issue identifier\n\n自動翻訳: 課題識別子",
+          "summary": "課題識別子",
           "required": false
         }
       ],
@@ -2412,7 +2412,7 @@
       "inputs": [
         {
           "name": "id",
-          "summary": "The issue identifier\n\n自動翻訳: 課題識別子",
+          "summary": "課題識別子",
           "required": false
         }
       ],
@@ -2482,12 +2482,12 @@
       "inputs": [
         {
           "name": "type",
-          "summary": "The type of feature (e.g. `page`, `component`, `directive`, `service`)\n\n自動翻訳: 機能の種類（例：`page`、`component`、`directive`、`service`）を指定します。",
+          "summary": "機能の種類（例：`page`、`component`、`directive`、`service`）を指定します。",
           "required": true
         },
         {
           "name": "name",
-          "summary": "The name/path of the feature being generated\n\n自動翻訳: 生成されるフィーチャの名前/パス",
+          "summary": "生成されるフィーチャの名前/パス",
           "required": true
         }
       ],
@@ -2559,7 +2559,7 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The name of your project (e.g. `myApp`, `\"My App\"`)\n\n自動翻訳: プロジェクト名（例：`myApp`、`\"My App\"`）を指定します。",
+          "summary": "プロジェクト名（例：`myApp`、`\"My App\"`）を指定します。",
           "required": false
         }
       ],
@@ -2646,7 +2646,7 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The integration to disable (e.g. `capacitor`, `cordova`, `enterprise`)\n\n自動翻訳: 無効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
+          "summary": "無効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
           "required": true
         }
       ],
@@ -2671,7 +2671,7 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The integration to enable (e.g. `capacitor`, `cordova`, `enterprise`)\n\n自動翻訳: 有効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
+          "summary": "有効にするインテグレーション（例：`capacitor`、`cordova`、`enterprise`）を指定します。",
           "required": true
         }
       ],
@@ -2746,7 +2746,7 @@
       "inputs": [
         {
           "name": "id",
-          "summary": "The Appflow ID of the app to link (e.g. `a1b2c3d4`)\n\n自動翻訳: リンクするアプリのAppflow ID (例: `a1b2c3d4`)",
+          "summary": "リンクするアプリのAppflow ID (例: `a1b2c3d4`)",
           "required": false
         }
       ],
@@ -2769,12 +2769,12 @@
       "inputs": [
         {
           "name": "email",
-          "summary": "Your email address (deprecated)\n\n自動翻訳: お客様のEメールアドレス（非推奨）",
+          "summary": "お客様のEメールアドレス（非推奨）",
           "required": false
         },
         {
           "name": "password",
-          "summary": "Your password (deprecated)\n\n自動翻訳: お客様のパスワード（非推奨）",
+          "summary": "お客様のパスワード（非推奨）",
           "required": false
         }
       ],
@@ -2826,12 +2826,12 @@
       "inputs": [
         {
           "name": "platform",
-          "summary": "The platform to package (`android`, `ios`)\n\n自動翻訳: パッケージングするプラットフォーム（`android`、`ios`）。",
+          "summary": "パッケージングするプラットフォーム（`android`、`ios`）。",
           "required": true
         },
         {
           "name": "type",
-          "summary": "The build type (`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise`)\n\n自動翻訳: ビルドタイプ（`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise` ）。",
+          "summary": "ビルドタイプ（`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise` ）。",
           "required": true
         }
       ],
@@ -3004,12 +3004,12 @@
       "inputs": [
         {
           "name": "build-id",
-          "summary": "The build id of the desired successful package build\n\n自動翻訳: 成功したパッケージのビルドを示すビルドID",
+          "summary": "成功したパッケージのビルドを示すビルドID",
           "required": true
         },
         {
           "name": "destination",
-          "summary": "The destination to deploy the build artifact to the app store\n\n自動翻訳: ビルドアーティファクトをアプリストアにデプロイするための保存先",
+          "summary": "ビルドアーティファクトをアプリストアにデプロイするための保存先",
           "required": true
         }
       ],
@@ -3273,7 +3273,7 @@
       "inputs": [
         {
           "name": "pubkey-path",
-          "summary": "Location of public key file to add to Ionic\n\n自動翻訳: Ionicに追加する公開鍵ファイルの場所",
+          "summary": "Ionicに追加する公開鍵ファイルの場所",
           "required": true
         }
       ],
@@ -3309,7 +3309,7 @@
       "inputs": [
         {
           "name": "key-id",
-          "summary": "The ID of the public key to delete\n\n自動翻訳: 削除する公開鍵のID",
+          "summary": "削除する公開鍵のID",
           "required": true
         }
       ],
@@ -3333,7 +3333,7 @@
       "inputs": [
         {
           "name": "key-path",
-          "summary": "Destination of private key file\n\n自動翻訳: 秘密鍵ファイルの保存先",
+          "summary": "秘密鍵ファイルの保存先",
           "required": false
         }
       ],
@@ -3445,7 +3445,7 @@
       "inputs": [
         {
           "name": "key-path",
-          "summary": "Location of private key file to use\n\n自動翻訳: 使用する秘密鍵のファイルの場所",
+          "summary": "使用する秘密鍵のファイルの場所",
           "required": true
         }
       ],
@@ -3601,12 +3601,12 @@
       "inputs": [
         {
           "name": "name",
-          "summary": "The name of your new project (e.g. `myApp`, `\"My App\"`)\n\n自動翻訳: 新しいプロジェクトの名前（例：`myApp`、`\"My App\"`）を指定します。",
+          "summary": "新しいプロジェクトの名前（例：`myApp`、`\"My App\"`）を指定します。",
           "required": true
         },
         {
           "name": "template",
-          "summary": "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)\n\n自動翻訳: 使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）",
+          "summary": "使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）",
           "required": true
         }
       ],

From f468d1a5bc902ea8e947f307b7c5e0bbfbae9133 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 28 Mar 2023 11:50:02 -0400
Subject: [PATCH 281/469] docs(lifecycle): clarify when lifecycles are called
 (#2858)

---
 docs/angular/lifecycle.md                      | 2 ++
 docs/react/lifecycle.md                        | 2 ++
 docs/vue/lifecycle.md                          | 2 ++
 versioned_docs/version-v6/angular/lifecycle.md | 2 ++
 versioned_docs/version-v6/react/lifecycle.md   | 2 ++
 versioned_docs/version-v6/vue/lifecycle.md     | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md
index 09206bdf137..5bf7d113370 100644
--- a/docs/angular/lifecycle.md
+++ b/docs/angular/lifecycle.md
@@ -41,6 +41,8 @@ In addition to the Angular life cycle events, Ionic Angular provides a few addit
 | `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
 | `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
+These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
+
 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).
diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md
index 13458ad97ba..aba6783e34b 100644
--- a/docs/react/lifecycle.md
+++ b/docs/react/lifecycle.md
@@ -24,6 +24,8 @@ Ionic provides a few lifecycle methods that you can use in your apps:
 | `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
 | `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
+These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
+
 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
diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index 1c7b70ea460..a36def3597a 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -17,6 +17,8 @@ Ionic Framework provides a few lifecycle methods that you can use in your apps:
 | `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
 | `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
+These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
+
 The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
 
 ```tsx
diff --git a/versioned_docs/version-v6/angular/lifecycle.md b/versioned_docs/version-v6/angular/lifecycle.md
index 09206bdf137..5bf7d113370 100644
--- a/versioned_docs/version-v6/angular/lifecycle.md
+++ b/versioned_docs/version-v6/angular/lifecycle.md
@@ -41,6 +41,8 @@ In addition to the Angular life cycle events, Ionic Angular provides a few addit
 | `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
 | `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
+These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
+
 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).
diff --git a/versioned_docs/version-v6/react/lifecycle.md b/versioned_docs/version-v6/react/lifecycle.md
index 13458ad97ba..aba6783e34b 100644
--- a/versioned_docs/version-v6/react/lifecycle.md
+++ b/versioned_docs/version-v6/react/lifecycle.md
@@ -24,6 +24,8 @@ Ionic provides a few lifecycle methods that you can use in your apps:
 | `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
 | `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
+These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
+
 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
diff --git a/versioned_docs/version-v6/vue/lifecycle.md b/versioned_docs/version-v6/vue/lifecycle.md
index 1c7b70ea460..a36def3597a 100644
--- a/versioned_docs/version-v6/vue/lifecycle.md
+++ b/versioned_docs/version-v6/vue/lifecycle.md
@@ -17,6 +17,8 @@ Ionic Framework provides a few lifecycle methods that you can use in your apps:
 | `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
 | `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
+These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
+
 The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
 
 ```tsx

From e7d1355e9d45c633df4dc0ee4d9fe1af25835f99 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 29 Mar 2023 08:46:58 -0400
Subject: [PATCH 282/469] docs(config): update innerHTMLTemplatesEnabled
 default (#2857)

---
 docs/developing/config.md   | 2 +-
 docs/techniques/security.md | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/developing/config.md b/docs/developing/config.md
index c9796a19bee..10ad73cec8d 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -117,7 +117,7 @@ Below are the config options that Ionic uses.
 | `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.                                        |
-| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, custom HTML passed to the relevant components will be parsed as a string instead of HTML. Defaults to `true`. |
+| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. |
 | `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".             |
diff --git a/docs/techniques/security.md b/docs/techniques/security.md
index e500e83939f..4528b69ec18 100644
--- a/docs/techniques/security.md
+++ b/docs/techniques/security.md
@@ -62,9 +62,9 @@ Vue does not provide any type of sanitizing methods built in. It is recommended
 
 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).
 
-## Disabling Custom HTML Parsing via `innerHTML`
+## Enabling Custom HTML Parsing via `innerHTML`
 
-`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. Developers can disable this functionality by setting `innerHTMLTemplatesEnabled: false` in the [IonicConfig](../developing/config#ionicconfig). When `innerHTMLTemplatesEnabled` is `false`, the values passed to the affected components will always be interpreted as strings.
+`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` can accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. This behavior is disabled by default which means values passed to the affected components will always be interpreted as plaintext. Developers can enable this custom HTML behavior by setting `innerHTMLTemplatesEnabled: true` in the [IonicConfig](../developing/config#ionicconfig).
 
 ## Ejecting from the built-in sanitizer
 

From 4ff55575351951f4a282bc175ec2c4ef2cbcf2bd Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 29 Mar 2023 14:14:20 -0400
Subject: [PATCH 283/469] feat: docusaurus plugin to generate component api
 docs (#2829)

---
 docs/api/accordion-group.md                   |  12 +-
 docs/api/accordion.md                         |  12 +-
 docs/api/action-sheet.md                      |  12 +-
 docs/api/alert.md                             |  12 +-
 docs/api/app.md                               |  12 +-
 docs/api/avatar.md                            |  12 +-
 docs/api/back-button.md                       |  12 +-
 docs/api/backdrop.md                          |  12 +-
 docs/api/badge.md                             |  12 +-
 docs/api/breadcrumb.md                        |  12 +-
 docs/api/breadcrumbs.md                       |  12 +-
 docs/api/button.md                            |  12 +-
 docs/api/buttons.md                           |  12 +-
 docs/api/card-content.md                      |  12 +-
 docs/api/card-header.md                       |  12 +-
 docs/api/card-subtitle.md                     |  12 +-
 docs/api/card-title.md                        |  12 +-
 docs/api/card.md                              |  12 +-
 docs/api/checkbox.md                          |  12 +-
 docs/api/chip.md                              |  12 +-
 docs/api/col.md                               |  12 +-
 docs/api/content.md                           |  12 +-
 docs/api/datetime-button.md                   |  12 +-
 docs/api/datetime.md                          |  12 +-
 docs/api/fab-button.md                        |  12 +-
 docs/api/fab-list.md                          |  12 +-
 docs/api/fab.md                               |  12 +-
 docs/api/footer.md                            |  12 +-
 docs/api/grid.md                              |  12 +-
 docs/api/header.md                            |  12 +-
 docs/api/img.md                               |  12 +-
 docs/api/infinite-scroll-content.md           |  12 +-
 docs/api/infinite-scroll.md                   |  12 +-
 docs/api/input.md                             |  12 +-
 docs/api/item-divider.md                      |  12 +-
 docs/api/item-group.md                        |  12 +-
 docs/api/item-option.md                       |  12 +-
 docs/api/item-options.md                      |  12 +-
 docs/api/item-sliding.md                      |  12 +-
 docs/api/item.md                              |  12 +-
 docs/api/label.md                             |  12 +-
 docs/api/list-header.md                       |  12 +-
 docs/api/list.md                              |  12 +-
 docs/api/loading.md                           |  12 +-
 docs/api/menu-button.md                       |  12 +-
 docs/api/menu-toggle.md                       |  12 +-
 docs/api/menu.md                              |  12 +-
 docs/api/modal.md                             |  12 +-
 docs/api/nav-link.md                          |  12 +-
 docs/api/nav.md                               |  12 +-
 docs/api/note.md                              |  12 +-
 docs/api/picker.md                            |  12 +-
 docs/api/popover.md                           |  12 +-
 docs/api/progress-bar.md                      |  12 +-
 docs/api/radio-group.md                       |  12 +-
 docs/api/radio.md                             |  12 +-
 docs/api/range.md                             |  12 +-
 docs/api/refresher-content.md                 |  12 +-
 docs/api/refresher.md                         |  12 +-
 docs/api/reorder-group.md                     |  12 +-
 docs/api/reorder.md                           |  12 +-
 docs/api/ripple-effect.md                     |  12 +-
 docs/api/route-redirect.md                    |  12 +-
 docs/api/route.md                             |  12 +-
 docs/api/router-link.md                       |  12 +-
 docs/api/router-outlet.md                     |  12 +-
 docs/api/router.md                            |  12 +-
 docs/api/row.md                               |  12 +-
 docs/api/searchbar.md                         |  12 +-
 docs/api/segment-button.md                    |  12 +-
 docs/api/segment.md                           |  12 +-
 docs/api/select-option.md                     |  12 +-
 docs/api/select.md                            |  12 +-
 docs/api/skeleton-text.md                     |  12 +-
 docs/api/spinner.md                           |  12 +-
 docs/api/split-pane.md                        |  12 +-
 docs/api/tab-bar.md                           |  12 +-
 docs/api/tab-button.md                        |  12 +-
 docs/api/tab.md                               |  12 +-
 docs/api/tabs.md                              |  12 +-
 docs/api/text.md                              |  12 +-
 docs/api/textarea.md                          |  12 +-
 docs/api/thumbnail.md                         |  12 +-
 docs/api/title.md                             |  12 +-
 docs/api/toast.md                             |  12 +-
 docs/api/toggle.md                            |  12 +-
 docs/api/toolbar.md                           |  12 +-
 docusaurus.config.js                          |   8 +
 package.json                                  |   2 +-
 .../index.js                                  | 220 ++++++++++++++++
 scripts/api.js                                | 156 -----------
 static/.gitignore                             |   1 -
 .../version-v6/api/accordion-group.md         |  24 +-
 versioned_docs/version-v6/api/accordion.md    |  12 +-
 versioned_docs/version-v6/api/action-sheet.md |  12 +-
 versioned_docs/version-v6/api/alert.md        |  12 +-
 versioned_docs/version-v6/api/app.md          |  40 +--
 versioned_docs/version-v6/api/avatar.md       |  12 +-
 versioned_docs/version-v6/api/back-button.md  |  27 +-
 versioned_docs/version-v6/api/backdrop.md     |  12 +-
 versioned_docs/version-v6/api/badge.md        |  12 +-
 versioned_docs/version-v6/api/breadcrumb.md   |  25 +-
 versioned_docs/version-v6/api/breadcrumbs.md  |  12 +-
 versioned_docs/version-v6/api/button.md       |  12 +-
 versioned_docs/version-v6/api/buttons.md      |  12 +-
 versioned_docs/version-v6/api/card-content.md |  23 +-
 versioned_docs/version-v6/api/card-header.md  |  23 +-
 .../version-v6/api/card-subtitle.md           |  23 +-
 versioned_docs/version-v6/api/card-title.md   |  28 +-
 versioned_docs/version-v6/api/card.md         |  12 +-
 versioned_docs/version-v6/api/checkbox.md     |  12 +-
 versioned_docs/version-v6/api/chip.md         |  12 +-
 versioned_docs/version-v6/api/col.md          |  31 ++-
 versioned_docs/version-v6/api/content.md      |  12 +-
 .../version-v6/api/datetime-button.md         |  12 +-
 versioned_docs/version-v6/api/datetime.md     |  12 +-
 versioned_docs/version-v6/api/fab-button.md   |  29 +-
 versioned_docs/version-v6/api/fab-list.md     |  23 +-
 versioned_docs/version-v6/api/fab.md          |  12 +-
 versioned_docs/version-v6/api/footer.md       |  12 +-
 versioned_docs/version-v6/api/grid.md         |  12 +-
 versioned_docs/version-v6/api/header.md       |  12 +-
 versioned_docs/version-v6/api/img.md          |  12 +-
 .../version-v6/api/infinite-scroll-content.md |  22 +-
 .../version-v6/api/infinite-scroll.md         |  12 +-
 versioned_docs/version-v6/api/input.md        |  12 +-
 versioned_docs/version-v6/api/item-divider.md |  12 +-
 versioned_docs/version-v6/api/item-group.md   |  12 +-
 versioned_docs/version-v6/api/item-option.md  |  28 +-
 versioned_docs/version-v6/api/item-options.md |  33 ++-
 versioned_docs/version-v6/api/item-sliding.md |  12 +-
 versioned_docs/version-v6/api/item.md         |  12 +-
 versioned_docs/version-v6/api/label.md        |  12 +-
 versioned_docs/version-v6/api/list-header.md  |  12 +-
 versioned_docs/version-v6/api/list.md         |  12 +-
 versioned_docs/version-v6/api/loading.md      |  12 +-
 versioned_docs/version-v6/api/menu-button.md  |  28 +-
 versioned_docs/version-v6/api/menu-toggle.md  |  28 +-
 versioned_docs/version-v6/api/menu.md         |  12 +-
 versioned_docs/version-v6/api/modal.md        |  12 +-
 versioned_docs/version-v6/api/nav-link.md     |  28 +-
 versioned_docs/version-v6/api/nav.md          |  12 +-
 versioned_docs/version-v6/api/note.md         |  12 +-
 versioned_docs/version-v6/api/picker.md       |  13 +-
 versioned_docs/version-v6/api/popover.md      |  12 +-
 versioned_docs/version-v6/api/progress-bar.md |  12 +-
 versioned_docs/version-v6/api/radio-group.md  |  29 +-
 versioned_docs/version-v6/api/radio.md        |  12 +-
 versioned_docs/version-v6/api/range.md        |  12 +-
 .../version-v6/api/refresher-content.md       |  23 +-
 versioned_docs/version-v6/api/refresher.md    |  12 +-
 .../version-v6/api/reorder-group.md           |  29 +-
 versioned_docs/version-v6/api/reorder.md      |  12 +-
 .../version-v6/api/ripple-effect.md           |  12 +-
 .../version-v6/api/route-redirect.md          |  40 +--
 versioned_docs/version-v6/api/route.md        | 114 ++++----
 versioned_docs/version-v6/api/router-link.md  |  46 ++--
 .../version-v6/api/router-outlet.md           |  32 ++-
 versioned_docs/version-v6/api/router.md       |  35 +--
 versioned_docs/version-v6/api/row.md          |  30 ++-
 versioned_docs/version-v6/api/searchbar.md    |  12 +-
 .../version-v6/api/segment-button.md          |  12 +-
 versioned_docs/version-v6/api/segment.md      |  12 +-
 .../version-v6/api/select-option.md           |  30 ++-
 versioned_docs/version-v6/api/select.md       |  12 +-
 .../version-v6/api/skeleton-text.md           |  12 +-
 versioned_docs/version-v6/api/slide.md        |  31 ++-
 versioned_docs/version-v6/api/slides.md       | 248 ++++++++++--------
 versioned_docs/version-v6/api/spinner.md      |  12 +-
 versioned_docs/version-v6/api/split-pane.md   |  12 +-
 versioned_docs/version-v6/api/tab-bar.md      |  62 ++---
 versioned_docs/version-v6/api/tab-button.md   |  80 +++---
 versioned_docs/version-v6/api/tab.md          |  33 ++-
 versioned_docs/version-v6/api/tabs.md         |  12 +-
 versioned_docs/version-v6/api/text.md         |  12 +-
 versioned_docs/version-v6/api/textarea.md     |  12 +-
 versioned_docs/version-v6/api/thumbnail.md    |  12 +-
 versioned_docs/version-v6/api/title.md        |  12 +-
 versioned_docs/version-v6/api/toast.md        |  12 +-
 versioned_docs/version-v6/api/toggle.md       |  12 +-
 versioned_docs/version-v6/api/toolbar.md      |  12 +-
 .../version-v6/api/virtual-scroll.md          |  67 +++--
 182 files changed, 1877 insertions(+), 1631 deletions(-)
 create mode 100644 plugins/docusaurus-plugin-ionic-component-api/index.js
 delete mode 100644 scripts/api.js
 delete mode 100644 static/.gitignore

diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index 2880703001c..312f8acd762 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 0fb249825c8..f64573d9c64 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/accordion/props.md';
+import Events from '@ionic-internal/component-api/v7/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
 
 <head>
   <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 64943f9fcf2..a11e669c194 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
 
 <head>
   <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 3aa37fd64d2..f6e5d5ee581 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -4,12 +4,12 @@ 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';
+import Props from '@ionic-internal/component-api/v7/alert/props.md';
+import Events from '@ionic-internal/component-api/v7/alert/events.md';
+import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
 
 <head>
   <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
diff --git a/docs/api/app.md b/docs/api/app.md
index 98125d4aa8e..1ac4dc6805e 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/app/props.md';
+import Events from '@ionic-internal/component-api/v7/app/events.md';
+import Methods from '@ionic-internal/component-api/v7/app/methods.md';
+import Parts from '@ionic-internal/component-api/v7/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/app/slots.md';
 
 <head>
   <title>ion-app: Container Element for an Ionic Application</title>
diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index ed6cd9db893..0f61597f61c 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/avatar/props.md';
+import Events from '@ionic-internal/component-api/v7/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v7/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
 
 <head>
   <title>ion-avatar: Circular Application Avatar Icon Component</title>
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index c215d43e671..db237d17305 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-back-button"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/back-button/props.md';
+import Events from '@ionic-internal/component-api/v7/back-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/back-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/back-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
 
 <head>
   <title>Back Button | ion-back-button: Custom Menu Icon for Applications</title>
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index e23d11b0588..4684f53e6e3 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/backdrop/props.md';
+import Events from '@ionic-internal/component-api/v7/backdrop/events.md';
+import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md';
+import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 631295e274d..529c97ada86 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/badge/props.md';
+import Events from '@ionic-internal/component-api/v7/badge/events.md';
+import Methods from '@ionic-internal/component-api/v7/badge/methods.md';
+import Parts from '@ionic-internal/component-api/v7/badge/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
 
 <head>
   <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index 5be2aa6c695..5679d17a3c9 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/breadcrumb/props.md';
+import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md';
+import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md';
+import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index d9a12c4c9a4..cff44c2f872 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md';
+import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md';
+import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md';
+import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md';
 
 
 
diff --git a/docs/api/button.md b/docs/api/button.md
index b3161ccb0ec..c538075468d 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/button/props.md';
+import Events from '@ionic-internal/component-api/v7/button/events.md';
+import Methods from '@ionic-internal/component-api/v7/button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/button/slots.md';
 
 <head>
   <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 3e4db87783f..cc8f5cf401c 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/buttons/props.md';
+import Events from '@ionic-internal/component-api/v7/buttons/events.md';
+import Methods from '@ionic-internal/component-api/v7/buttons/methods.md';
+import Parts from '@ionic-internal/component-api/v7/buttons/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/buttons/slots.md';
 
 <head>
   <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index 647cba00897..ad6e5e51be8 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-content/props.md';
+import Events from '@ionic-internal/component-api/v7/card-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index 2e52467ed43..c247d37e667 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-header/props.md';
+import Events from '@ionic-internal/component-api/v7/card-header/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-header/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index ec72784cd99..692caa70759 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-subtitle/props.md';
+import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 33b24158eb5..9263fe91136 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card-title/props.md';
+import Events from '@ionic-internal/component-api/v7/card-title/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-title/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-title/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/card.md b/docs/api/card.md
index b9419281ab6..183166599b2 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/card/props.md';
+import Events from '@ionic-internal/component-api/v7/card/events.md';
+import Methods from '@ionic-internal/component-api/v7/card/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index c861b994ff1..0f62607010d 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v7/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
 
 <head>
   <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
diff --git a/docs/api/chip.md b/docs/api/chip.md
index e032f7e5e0e..e05495b6493 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/chip/props.md';
+import Events from '@ionic-internal/component-api/v7/chip/events.md';
+import Methods from '@ionic-internal/component-api/v7/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v7/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
 
 <head>
   <title>ion-chip:  Name, Text, Icon and Avatar for Ionic Framework Apps</title>
diff --git a/docs/api/col.md b/docs/api/col.md
index e5872b4f6a1..2f6ac3e552f 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/col/props.md';
+import Events from '@ionic-internal/component-api/v7/col/events.md';
+import Methods from '@ionic-internal/component-api/v7/col/methods.md';
+import Parts from '@ionic-internal/component-api/v7/col/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/col/slots.md';
 
 <head>
   <title>ion-col: Column Component Padding, Size and Other Properties</title>
diff --git a/docs/api/content.md b/docs/api/content.md
index a0feb3f2ccd..a257b0e51ee 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/content/props.md';
+import Events from '@ionic-internal/component-api/v7/content/events.md';
+import Methods from '@ionic-internal/component-api/v7/content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/content/slots.md';
 
 <head>
   <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index a17b50b498f..554e74d2b01 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
+import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md';
 
 <head>
   <title>ion-datetime-button: Ionic API Input for interacting with Datetime picker</title>
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 36f2946b919..784c151cf0c 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/datetime/props.md';
+import Events from '@ionic-internal/component-api/v7/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v7/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v7/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/datetime/slots.md';
 
 import Basic from '@site/static/usage/v7/datetime/basic/index.md';
 
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index ab86a48426e..d864c6c3f38 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v7/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
 
 <head>
   <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index a0659a394d7..e97540df9d3 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v7/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab-list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab-list/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 55ce35332fb..06201e3bde6 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/fab/props.md';
+import Events from '@ionic-internal/component-api/v7/fab/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
 
 <head>
   <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
diff --git a/docs/api/footer.md b/docs/api/footer.md
index b5298d7bccd..5127287d601 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/footer/props.md';
+import Events from '@ionic-internal/component-api/v7/footer/events.md';
+import Methods from '@ionic-internal/component-api/v7/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v7/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
 
 <head>
   <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
diff --git a/docs/api/grid.md b/docs/api/grid.md
index 30b504cd3cf..e80e3642bb7 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/grid/props.md';
+import Events from '@ionic-internal/component-api/v7/grid/events.md';
+import Methods from '@ionic-internal/component-api/v7/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v7/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
 
 <head>
   <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
diff --git a/docs/api/header.md b/docs/api/header.md
index 7288b636abe..584a5207d05 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/header/props.md';
+import Events from '@ionic-internal/component-api/v7/header/events.md';
+import Methods from '@ionic-internal/component-api/v7/header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/header/slots.md';
 
 <head>
   <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
diff --git a/docs/api/img.md b/docs/api/img.md
index 14c697c760d..441c9f4f27c 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/img/props.md';
+import Events from '@ionic-internal/component-api/v7/img/events.md';
+import Methods from '@ionic-internal/component-api/v7/img/methods.md';
+import Parts from '@ionic-internal/component-api/v7/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/img/slots.md';
 
 <head>
   <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md
index 2647dffdb87..39da6e7165f 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 5675984b447..12f68542b8a 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
 
 <head>
   <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
diff --git a/docs/api/input.md b/docs/api/input.md
index 301a5470f64..02c34e0d726 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/input/props.md';
+import Events from '@ionic-internal/component-api/v7/input/events.md';
+import Methods from '@ionic-internal/component-api/v7/input/methods.md';
+import Parts from '@ionic-internal/component-api/v7/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/input/slots.md';
 
 <head>
   <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 0f4dd8c40f8..79554071252 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v7/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
 
 <head>
   <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 60cf8b09383..5d440ed3ce8 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-group/props.md';
+import Events from '@ionic-internal/component-api/v7/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-group/slots.md';
 
 <head>
   <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index 800d1030f50..413e993de64 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-option/props.md';
+import Events from '@ionic-internal/component-api/v7/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index cbee8f5289b..e242c9d1012 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-options/props.md';
+import Events from '@ionic-internal/component-api/v7/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-options/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-options/slots.md';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 526f4d1263b..61cd5f58f20 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v7/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
 
 <head>
   <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
diff --git a/docs/api/item.md b/docs/api/item.md
index 09f89b1132b..6aaf0dd0609 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/item/props.md';
+import Events from '@ionic-internal/component-api/v7/item/events.md';
+import Methods from '@ionic-internal/component-api/v7/item/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item/slots.md';
 
 <head>
   <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
diff --git a/docs/api/label.md b/docs/api/label.md
index a7b6422775e..e7ed495d15c 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/label/props.md';
+import Events from '@ionic-internal/component-api/v7/label/events.md';
+import Methods from '@ionic-internal/component-api/v7/label/methods.md';
+import Parts from '@ionic-internal/component-api/v7/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/label/slots.md';
 
 <head>
   <title>Item Label Color and Properties for Applications | ion-label</title>
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index f2ecb781627..4d684f1d4b8 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/list-header/props.md';
+import Events from '@ionic-internal/component-api/v7/list-header/events.md';
+import Methods from '@ionic-internal/component-api/v7/list-header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/list-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/list-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/list-header/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/list.md b/docs/api/list.md
index b5907823923..6aee4eaa556 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/list/props.md';
+import Events from '@ionic-internal/component-api/v7/list/events.md';
+import Methods from '@ionic-internal/component-api/v7/list/methods.md';
+import Parts from '@ionic-internal/component-api/v7/list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/list/slots.md';
 
 <head>
   <title>ion-list: Item List View Component for iOS and Android Apps</title>
diff --git a/docs/api/loading.md b/docs/api/loading.md
index f4e4f04f00c..2a9309c4ba7 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-loading"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/loading/props.md';
+import Events from '@ionic-internal/component-api/v7/loading/events.md';
+import Methods from '@ionic-internal/component-api/v7/loading/methods.md';
+import Parts from '@ionic-internal/component-api/v7/loading/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
 
 <head>
   <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index adba980b958..7d2be77fef0 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/menu-button/props.md';
+import Events from '@ionic-internal/component-api/v7/menu-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu-button/slots.md';
 
 <head>
   <title>Menu Button | ion-menu-button to Open an App Menu on A Page</title>
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index e6a10201362..3f6cef6f6fd 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md';
+import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
 
 <head>
   <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 8a12ff43350..1918527a15a 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/menu/props.md';
+import Events from '@ionic-internal/component-api/v7/menu/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu/slots.md';
 
 <head>
   <title>ion-menu: API Framework Docs for Types of Menu Components</title>
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 81a90b9a91d..cc63089bedf 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/modal/props.md';
+import Events from '@ionic-internal/component-api/v7/modal/events.md';
+import Methods from '@ionic-internal/component-api/v7/modal/methods.md';
+import Parts from '@ionic-internal/component-api/v7/modal/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/modal/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/modal/slots.md';
 
 <head>
   <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 30a8f3264ed..9e333a98ede 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/nav-link/props.md';
+import Events from '@ionic-internal/component-api/v7/nav-link/events.md';
+import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md';
+import Parts from '@ionic-internal/component-api/v7/nav-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
 
 <head>
   <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 727add0a05f..7a5d975232f 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/nav/props.md';
+import Events from '@ionic-internal/component-api/v7/nav/events.md';
+import Methods from '@ionic-internal/component-api/v7/nav/methods.md';
+import Parts from '@ionic-internal/component-api/v7/nav/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
 
 <head>
   <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
diff --git a/docs/api/note.md b/docs/api/note.md
index 5d142dd53b8..d5f00591b4d 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/note/props.md';
+import Events from '@ionic-internal/component-api/v7/note/events.md';
+import Methods from '@ionic-internal/component-api/v7/note/methods.md';
+import Parts from '@ionic-internal/component-api/v7/note/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/note/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/note/slots.md';
 
 <head>
   <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
diff --git a/docs/api/picker.md b/docs/api/picker.md
index eca018fb227..b2efb4c7bf2 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-picker"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/picker/props.md';
+import Events from '@ionic-internal/component-api/v7/picker/events.md';
+import Methods from '@ionic-internal/component-api/v7/picker/methods.md';
+import Parts from '@ionic-internal/component-api/v7/picker/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
 
 <head>
   <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
diff --git a/docs/api/popover.md b/docs/api/popover.md
index 33017292870..2878ce602b1 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/popover/props.md';
+import Events from '@ionic-internal/component-api/v7/popover/events.md';
+import Methods from '@ionic-internal/component-api/v7/popover/methods.md';
+import Parts from '@ionic-internal/component-api/v7/popover/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
 
 <head>
   <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 15a7c27fbca..73c3253f3ca 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/progress-bar/props.md';
+import Events from '@ionic-internal/component-api/v7/progress-bar/events.md';
+import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
 
 <head>
   <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index b083ee208b2..91969c1ed39 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/radio-group/props.md';
+import Events from '@ionic-internal/component-api/v7/radio-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/radio-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
 
 <head>
   <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
diff --git a/docs/api/radio.md b/docs/api/radio.md
index b5f94c0b8fb..66890457bef 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/radio/props.md';
+import Events from '@ionic-internal/component-api/v7/radio/events.md';
+import Methods from '@ionic-internal/component-api/v7/radio/methods.md';
+import Parts from '@ionic-internal/component-api/v7/radio/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
 
 <head>
   <title>ion-radio Component: Radio Property for iOS and Android</title>
diff --git a/docs/api/range.md b/docs/api/range.md
index d102bcbc971..fd091246945 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/range/props.md';
+import Events from '@ionic-internal/component-api/v7/range/events.md';
+import Methods from '@ionic-internal/component-api/v7/range/methods.md';
+import Parts from '@ionic-internal/component-api/v7/range/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/range/slots.md';
 
 <head>
   <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 1b80d4ef40c..263a057ce78 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/refresher-content/props.md';
+import Events from '@ionic-internal/component-api/v7/refresher-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/refresher-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/refresher-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 744200a218b..e6552ab795d 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/refresher/props.md';
+import Events from '@ionic-internal/component-api/v7/refresher/events.md';
+import Methods from '@ionic-internal/component-api/v7/refresher/methods.md';
+import Parts from '@ionic-internal/component-api/v7/refresher/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/refresher/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
 
 <head>
   <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index 674bc2561b9..07d1ccd5ddc 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
+import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
 
 <head>
   <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 1043f82b811..708b9202eb0 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/reorder/props.md';
+import Events from '@ionic-internal/component-api/v7/reorder/events.md';
+import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
+import Parts from '@ionic-internal/component-api/v7/reorder/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
 
 <head>
   <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 1861b13a117..5ab5bf38930 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -1,12 +1,12 @@
 ---
 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 Props from '@ionic-internal/component-api/v7/ripple-effect/props.md';
+import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md';
+import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md';
+import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/ripple-effect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/ripple-effect/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index ac4febd161d..591c39c28a1 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -2,12 +2,12 @@
 title: "ion-route-redirect"
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v7/route-redirect/props.md';
+import Events from '@ionic-internal/component-api/v7/route-redirect/events.md';
+import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.md';
+import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.md';
 
 <head>
   <title>ion-route-redirect Plugin: Redirect 'from' a URL 'to' Another URL</title>
diff --git a/docs/api/route.md b/docs/api/route.md
index 91b607971e4..b49c8766b0d 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -4,12 +4,12 @@ title: "ion-route"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v7/route/props.md';
+import Events from '@ionic-internal/component-api/v7/route/events.md';
+import Methods from '@ionic-internal/component-api/v7/route/methods.md';
+import Parts from '@ionic-internal/component-api/v7/route/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/route/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/route/slots.md';
 
 <head>
   <title>ion-route: API Route Component for Ionic Framework Apps</title>
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index ea95869eea0..96b22e69af5 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -6,12 +6,12 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/router-link/props.md';
+import Events from '@ionic-internal/component-api/v7/router-link/events.md';
+import Methods from '@ionic-internal/component-api/v7/router-link/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
 
 <head>
   <title>Router Link | Navigating The ion-router-link Component</title>
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md
index c15289ab77b..70c153815ed 100644
--- a/docs/api/router-outlet.md
+++ b/docs/api/router-outlet.md
@@ -2,12 +2,12 @@
 title: "ion-router-outlet"
 ---
 
-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 Props from '@ionic-internal/component-api/v7/router-outlet/props.md';
+import Events from '@ionic-internal/component-api/v7/router-outlet/events.md';
+import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md';
 
 
 
diff --git a/docs/api/router.md b/docs/api/router.md
index 48b8b522e04..dd386016be9 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -2,12 +2,12 @@
 title: "ion-router"
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v7/router/props.md';
+import Events from '@ionic-internal/component-api/v7/router/events.md';
+import Methods from '@ionic-internal/component-api/v7/router/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router/slots.md';
 
 <head>
   <title>ion-router: Router Component to Coordinate URL Navigation</title>
diff --git a/docs/api/row.md b/docs/api/row.md
index 48fc21c4ba0..3f8759fb490 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/row/props.md';
+import Events from '@ionic-internal/component-api/v7/row/events.md';
+import Methods from '@ionic-internal/component-api/v7/row/methods.md';
+import Parts from '@ionic-internal/component-api/v7/row/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/row/slots.md';
 
 <head>
   <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index c11c14c4c74..bbca192fdb6 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/searchbar/props.md';
+import Events from '@ionic-internal/component-api/v7/searchbar/events.md';
+import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/searchbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
 
 <head>
   <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index 2567e2ecbeb..04c383655b3 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/segment-button/props.md';
+import Events from '@ionic-internal/component-api/v7/segment-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/segment-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/segment-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md';
 
 <head>
   <title>ion-segment-button | Segment Button Icon and Segment Value</title>
diff --git a/docs/api/segment.md b/docs/api/segment.md
index 0ff953288d5..b4bdb45b6cb 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/segment/props.md';
+import Events from '@ionic-internal/component-api/v7/segment/events.md';
+import Methods from '@ionic-internal/component-api/v7/segment/methods.md';
+import Parts from '@ionic-internal/component-api/v7/segment/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/segment/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/segment/slots.md';
 
 <head>
   <title>ion-segment: API Documentation for Segmented Controls</title>
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index 73dbf015e2b..bb2d2e7e6f9 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/select-option/props.md';
+import Events from '@ionic-internal/component-api/v7/select-option/events.md';
+import Methods from '@ionic-internal/component-api/v7/select-option/methods.md';
+import Parts from '@ionic-internal/component-api/v7/select-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
 
 <head>
   <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
diff --git a/docs/api/select.md b/docs/api/select.md
index d3792bfe52a..92ab5b6e70f 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/select/props.md';
+import Events from '@ionic-internal/component-api/v7/select/events.md';
+import Methods from '@ionic-internal/component-api/v7/select/methods.md';
+import Parts from '@ionic-internal/component-api/v7/select/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/select/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/select/slots.md';
 
 <head>
   <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index 7b627127105..438a5b98ef9 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md';
+import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md';
+import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md';
+import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
 
 <head>
   <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index 7d805fa697e..dc5b55a36c3 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/spinner/props.md';
+import Events from '@ionic-internal/component-api/v7/spinner/events.md';
+import Methods from '@ionic-internal/component-api/v7/spinner/methods.md';
+import Parts from '@ionic-internal/component-api/v7/spinner/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
 
 <head>
   <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 87ffe6c1ae0..00f000e10c4 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
+import Events from '@ionic-internal/component-api/v7/split-pane/events.md';
+import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md';
+import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/split-pane/slots.md';
 
 <head>
   <title>ion-split-pane: Split Plane View for Menus and Multi-View Layouts</title>
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index 5cd9d97fe3d..cb69107d111 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -4,12 +4,12 @@ title: "ion-tab-bar"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v7/tab-bar/props.md';
+import Events from '@ionic-internal/component-api/v7/tab-bar/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
 
 <head>
   <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</title>
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index 0fb186e0773..d22b0db8699 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -4,12 +4,12 @@ title: "ion-tab-button"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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 Props from '@ionic-internal/component-api/v7/tab-button/props.md';
+import Events from '@ionic-internal/component-api/v7/tab-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md';
 
 
 
diff --git a/docs/api/tab.md b/docs/api/tab.md
index 899e3c6c484..3dd6576e4a8 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -2,12 +2,12 @@
 title: "ion-tab"
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v7/tab/props.md';
+import Events from '@ionic-internal/component-api/v7/tab/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
 
 <head>
   <title>ion-tab - Ionic Framework Application Component</title>
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 0920727d489..3da90b12e70 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -1,12 +1,12 @@
 ---
 title: "ion-tabs"
 ---
-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';
+import Props from '@ionic-internal/component-api/v7/tabs/props.md';
+import Events from '@ionic-internal/component-api/v7/tabs/events.md';
+import Methods from '@ionic-internal/component-api/v7/tabs/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tabs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
 
 <head>
   <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
diff --git a/docs/api/text.md b/docs/api/text.md
index ea9db032f6c..30f03bd454f 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/text/props.md';
+import Events from '@ionic-internal/component-api/v7/text/events.md';
+import Methods from '@ionic-internal/component-api/v7/text/methods.md';
+import Parts from '@ionic-internal/component-api/v7/text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/text/slots.md';
 
 <head>
   <title>ion-text: Ionic App Component to Style or Change Text Color</title>
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 2cba78b56c3..9315c981358 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/textarea/props.md';
+import Events from '@ionic-internal/component-api/v7/textarea/events.md';
+import Methods from '@ionic-internal/component-api/v7/textarea/methods.md';
+import Parts from '@ionic-internal/component-api/v7/textarea/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/textarea/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/textarea/slots.md';
 
 <head>
   <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index cf353200805..05d9bc86d5d 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v7/thumbnail/props.md';
+import Events from '@ionic-internal/component-api/v7/thumbnail/events.md';
+import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.md';
+import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
 
 <head>
   <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
diff --git a/docs/api/title.md b/docs/api/title.md
index 4eb8eee4ac1..bde08e3b21f 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/title/props.md';
+import Events from '@ionic-internal/component-api/v7/title/events.md';
+import Methods from '@ionic-internal/component-api/v7/title/methods.md';
+import Parts from '@ionic-internal/component-api/v7/title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/title/slots.md';
 
 <head>
   <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
diff --git a/docs/api/toast.md b/docs/api/toast.md
index f99a9bfe92e..d81ad3ca60d 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -4,12 +4,12 @@ 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';
+import Props from '@ionic-internal/component-api/v7/toast/props.md';
+import Events from '@ionic-internal/component-api/v7/toast/events.md';
+import Methods from '@ionic-internal/component-api/v7/toast/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toast/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
 
 <head>
   <title>ion-toast Component: A Dismissible App Notification Alert</title>
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index 78119d191ae..bf8925e2fb6 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/toggle/props.md';
+import Events from '@ionic-internal/component-api/v7/toggle/events.md';
+import Methods from '@ionic-internal/component-api/v7/toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
 
 <head>
   <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index 9db8ed00aa8..c6c9790ce6e 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -1,12 +1,12 @@
 ---
 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';
+import Props from '@ionic-internal/component-api/v7/toolbar/props.md';
+import Events from '@ionic-internal/component-api/v7/toolbar/events.md';
+import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toolbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
 
 <head>
   <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8746715cbe1..260bea66bec 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -2,6 +2,8 @@ const path = require('path');
 const prismic = require('@prismicio/client');
 const fetch = require('node-fetch');
 
+const VERSIONS_JSON = require('./versions.json');
+
 const BASE_URL = '/docs';
 
 module.exports = {
@@ -314,6 +316,12 @@ module.exports = {
         },
       };
     },
+    [
+      path.resolve(__dirname, 'plugins', 'docusaurus-plugin-ionic-component-api'),
+      {
+        versions: VERSIONS_JSON,
+      },
+    ],
   ],
   themes: [
     [
diff --git a/package.json b/package.json
index 8121f2287bb..9dfee0ace00 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "crowdin:sync": "docusaurus write-translations && crowdin upload && crowdin download",
     "deploy": "docusaurus deploy",
     "docusaurus": "docusaurus",
-    "generate-markdown": "node scripts/native && concurrently \"node scripts/api\" \"node scripts/cli\" \"node scripts/release-notes\"",
+    "generate-markdown": "node scripts/native && concurrently \"node scripts/cli\" \"node scripts/release-notes\"",
     "serve": "docusaurus serve",
     "prestart": "npm run generate-markdown",
     "start": "docusaurus start",
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
new file mode 100644
index 00000000000..8e12c52ad3a
--- /dev/null
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -0,0 +1,220 @@
+const fetch = require('node-fetch');
+
+module.exports = function (context, options) {
+  return {
+    name: 'docusaurus-plugin-ionic-component-api',
+    async loadContent() {
+      // Finds the plugin options for @docusaurus/plugin-content-docs
+      const docsPluginOptions = context.siteConfig.plugins.find(
+        (plugin) => Array.isArray(plugin) && plugin[0] === '@docusaurus/plugin-content-docs'
+      )[1];
+
+      const data = [];
+      const currentVersion = docsPluginOptions.versions.current;
+
+      /**
+       * Generates the markdown files for all components in a given version.
+       * @param {*} version The version, e.g.: v6
+       * @param {*} npmTag The npm tag, e.g.: 6 or next
+       * @param {*} isCurrentVersion Whether or not this is the current version of the docs
+       */
+      const generateMarkdownForVersion = async (version, npmTag, isCurrentVersion) => {
+        const response = await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
+        const { components } = await response.json();
+
+        const names = components.map((component) => component.tag.slice(4));
+        // matches all relative markdown links to a component, e.g. (../button)
+        COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
+
+        components.forEach((comp) => {
+          const compTag = comp.tag.slice(4);
+          const outDir = getDirectoryPath(compTag, version, isCurrentVersion);
+
+          data.push({
+            outDir,
+            componentTag: compTag,
+            version,
+            props: renderProperties(comp),
+            events: renderEvents(comp),
+            methods: renderMethods(comp),
+            parts: renderParts(comp),
+            customProps: renderCustomProps(comp),
+            slots: renderSlots(comp),
+          });
+        });
+      };
+
+      for (const version of options.versions) {
+        const npmTag = version.slice(1);
+        await generateMarkdownForVersion(version, npmTag, false);
+      }
+
+      const npmTag = currentVersion.banner === 'unreleased' ? 'next' : currentVersion.path.slice(1);
+      // Latest version
+      await generateMarkdownForVersion(currentVersion.path, npmTag, true);
+
+      return data;
+    },
+    async contentLoaded({ content, actions }) {
+      const { createData } = actions;
+      const promises = [];
+
+      for (const data of content) {
+        const basePath = `${data.version}/${data.componentTag}`;
+        /**
+         * createData will create a file within the generated ./docusaurus
+         * directory within the plugin directory.
+         */
+        promises.push(
+          createData(`${basePath}/props.md`, data.props),
+          createData(`${basePath}/events.md`, data.events),
+          createData(`${basePath}/methods.md`, data.methods),
+          createData(`${basePath}/parts.md`, data.parts),
+          createData(`${basePath}/custom-props.md`, data.customProps),
+          createData(`${basePath}/slots.md`, data.slots)
+        );
+      }
+
+      await Promise.all(promises);
+    },
+    configureWebpack(config, isServer, utils) {
+      /**
+       * Adds a custom import alias to the webpack configuration, so that the markdown files
+       * can import the auto-generated markdown files from: @ionic-internal/component-api/{version}/{componentTag}
+       */
+      return {
+        resolve: {
+          alias: {
+            '@ionic-internal/component-api': `${context.siteDir}/.docusaurus/docusaurus-plugin-ionic-component-api/default`,
+          },
+        },
+      };
+    },
+  };
+};
+
+/**
+ * Calculates the path to the directory where the auto-generated markdown files are stored.
+ * @param {*} componentTag The tag name of the component, e.g.: ion-button
+ * @param {*} version The version of Ionic that the file pertains to, e.g.: v6
+ * @param {*} isCurrentVersion Whether the version is the current version of the docs
+ * @returns The path to the directory where the auto-generated markdown files are stored.
+ */
+function getDirectoryPath(componentTag, version, isCurrentVersion) {
+  if (isCurrentVersion) {
+    return `./docs/api/auto-generated/${componentTag}`;
+  }
+  return `./versioned_docs/version-${version}/api/auto-generated/${componentTag}`;
+}
+
+/**
+ * Formats line breaks in a multiline string to be displayed in a table.
+ * @param {*} str The string to format
+ * @returns The formatted string
+ */
+function formatMultiline(str) {
+  return str.split('\n\n').join('<br /><br />').split('\n').join(' ');
+}
+
+function renderProperties({ props: properties }) {
+  if (properties.length === 0) {
+    return 'No properties available for this component.';
+  }
+
+  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
+  return `
+${properties
+  .map((prop) => {
+    const isDeprecated = prop.deprecation !== undefined;
+
+    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
+
+    return `
+### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
+
+| | |
+| --- | --- |
+| **Description** | ${formatMultiline(docs)} |
+| **Attribute** | \`${prop.attr}\` |
+| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
+| **Default** | \`${prop.default}\` |
+
+`;
+  })
+  .join('\n')}`;
+}
+
+function renderEvents({ events }) {
+  if (events.length === 0) {
+    return 'No events available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderMethods({ methods }) {
+  if (methods.length === 0) {
+    return 'No public methods available for this component.';
+  }
+
+  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
+  return `
+${methods
+  .map(
+    (method) => `
+### ${method.name}
+
+| | |
+| --- | --- |
+| **Description** | ${formatMultiline(method.docs)} |
+| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
+`
+  )
+  .join('\n')}
+
+`;
+}
+
+function renderParts({ parts }) {
+  if (parts.length === 0) {
+    return 'No CSS shadow parts available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${parts.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderCustomProps({ styles: customProps }) {
+  if (customProps.length === 0) {
+    return 'No CSS custom properties available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${customProps.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
+
+`;
+}
+
+function renderSlots({ slots }) {
+  if (slots.length === 0) {
+    return 'No slots available for this component.';
+  }
+
+  return `
+| Name | Description |
+| --- | --- |
+${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')}
+
+`;
+}
diff --git a/scripts/api.js b/scripts/api.js
deleted file mode 100644
index 470aadb449f..00000000000
--- a/scripts/api.js
+++ /dev/null
@@ -1,156 +0,0 @@
-const fetch = require('node-fetch');
-const fs = require('fs');
-
-/**
- *
- * This script will create the autogenerated MDX files for each component.
- *
- * Creates files for:
- * - Properties
- * - Events
- * - Methods
- * - CSS Shadow Parts
- * - Custom Properties
- * - Slots
- *
- * The auto-generated directory & files should be gitignored, since they are created from the published core.json
- * and should never be edited manually.
- */
-
-(async function () {
-  const response = await fetch('https://unpkg.com/@ionic/docs/core.json');
-  const { components } = await response.json();
-
-  const names = components.map((component) => component.tag.slice(4));
-  // matches all relative markdown links to a component, e.g. (../button)
-  COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g');
-
-  components.forEach((comp) => {
-    const compTag = comp.tag.slice(4);
-    writeAutoGeneratedPage(compTag, 'props', renderProperties(comp));
-    writeAutoGeneratedPage(compTag, 'events', renderEvents(comp));
-    writeAutoGeneratedPage(compTag, 'methods', renderMethods(comp));
-    writeAutoGeneratedPage(compTag, 'parts', renderParts(comp));
-    writeAutoGeneratedPage(compTag, 'custom-props', renderCustomProps(comp));
-    writeAutoGeneratedPage(compTag, 'slots', renderSlots(comp));
-  });
-})();
-
-function writeAutoGeneratedPage(componentTag, fileName, data) {
-  const dir = `./static/auto-generated/${componentTag}`;
-  const path = `${dir}/${fileName}.md`;
-  fs.mkdirSync(dir, { recursive: true });
-  fs.writeFileSync(path, data);
-}
-
-/**
- * Formats line breaks in a multiline string to be displayed in a table.
- * @param {*} str The string to format
- * @returns The formatted string
- */
-function formatMultiline(str) {
-  return str.split('\n\n').join('<br /><br />').split('\n').join(' ');
-}
-
-function renderProperties({ props: properties }) {
-  if (properties.length === 0) {
-    return 'No properties available for this component.';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-${properties
-  .map((prop) => {
-    const isDeprecated = prop.deprecation !== undefined;
-
-    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
-
-    return `
-### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
-
-| | |
-| --- | --- |
-| **Description** | ${formatMultiline(docs)} |
-| **Attribute** | \`${prop.attr}\` |
-| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` |
-| **Default** | \`${prop.default}\` |
-
-`;
-  })
-  .join('\n')}`;
-}
-
-function renderEvents({ events }) {
-  if (events.length === 0) {
-    return 'No events available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderMethods({ methods }) {
-  if (methods.length === 0) {
-    return 'No public methods available for this component.';
-  }
-
-  // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
-  return `
-${methods
-  .map(
-    (method) => `
-### ${method.name}
-
-| | |
-| --- | --- |
-| **Description** | ${formatMultiline(method.docs)} |
-| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
-`
-  )
-  .join('\n')}
-
-`;
-}
-
-function renderParts({ parts }) {
-  if (parts.length === 0) {
-    return 'No CSS shadow parts available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${parts.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderCustomProps({ styles: customProps }) {
-  if (customProps.length === 0) {
-    return 'No CSS custom properties available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${customProps.map((prop) => `| \`${prop.name}\` | ${formatMultiline(prop.docs)} |`).join('\n')}
-
-`;
-}
-
-function renderSlots({ slots }) {
-  if (slots.length === 0) {
-    return 'No slots available for this component.';
-  }
-
-  return `
-| Name | Description |
-| --- | --- |
-${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')}
-
-`;
-}
diff --git a/static/.gitignore b/static/.gitignore
deleted file mode 100644
index 6dddbb371e3..00000000000
--- a/static/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-auto-generated/
diff --git a/versioned_docs/version-v6/api/accordion-group.md b/versioned_docs/version-v6/api/accordion-group.md
index 2880703001c..80dac608394 100644
--- a/versioned_docs/version-v6/api/accordion-group.md
+++ b/versioned_docs/version-v6/api/accordion-group.md
@@ -1,12 +1,13 @@
 ---
-title: "ion-accordion-group"
+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 Props from '@ionic-internal/component-api/v6/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v6/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/accordion-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -16,7 +17,6 @@ Accordion group is a container for accordion instances. It manages the state of
 
 See the [Accordion](./accordion) documentation for more information.
 
-
 ## Interfaces
 
 ### AccordionGroupChangeEventDetail
@@ -38,22 +38,26 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
-
 ## 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
index 803f0efbfe4..3cf53e1823f 100644
--- a/versioned_docs/version-v6/api/accordion.md
+++ b/versioned_docs/version-v6/api/accordion.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/accordion/props.md';
+import Events from '@ionic-internal/component-api/v6/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v6/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v6/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/accordion/slots.md';
 
 <head>
   <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
diff --git a/versioned_docs/version-v6/api/action-sheet.md b/versioned_docs/version-v6/api/action-sheet.md
index 3f2917d979f..67d0b6d193b 100644
--- a/versioned_docs/version-v6/api/action-sheet.md
+++ b/versioned_docs/version-v6/api/action-sheet.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v6/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v6/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v6/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/action-sheet/slots.md';
 
 <head>
   <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.md
index 19b8bd7177a..6a045bd3afc 100644
--- a/versioned_docs/version-v6/api/alert.md
+++ b/versioned_docs/version-v6/api/alert.md
@@ -5,12 +5,12 @@ 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';
+import Props from '@ionic-internal/component-api/v6/alert/props.md';
+import Events from '@ionic-internal/component-api/v6/alert/events.md';
+import Methods from '@ionic-internal/component-api/v6/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v6/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/alert/slots.md';
 
 <head>
   <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.md
index 98125d4aa8e..144734dd1c6 100644
--- a/versioned_docs/version-v6/api/app.md
+++ b/versioned_docs/version-v6/api/app.md
@@ -1,47 +1,55 @@
 ---
-title: "ion-app"
+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';
+
+import Props from '@ionic-internal/component-api/v6/app/props.md';
+import Events from '@ionic-internal/component-api/v6/app/events.md';
+import Methods from '@ionic-internal/component-api/v6/app/methods.md';
+import Parts from '@ionic-internal/component-api/v6/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
-
+- [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
index 0f32507e1d7..da0f858dabc 100644
--- a/versioned_docs/version-v6/api/avatar.md
+++ b/versioned_docs/version-v6/api/avatar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/avatar/props.md';
+import Events from '@ionic-internal/component-api/v6/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v6/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/avatar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/avatar/slots.md';
 
 <head>
   <title>ion-avatar: Circular Application Avatar Icon Component</title>
diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.md
index 10ad87c6f2a..29bbf1638c0 100644
--- a/versioned_docs/version-v6/api/back-button.md
+++ b/versioned_docs/version-v6/api/back-button.md
@@ -1,23 +1,26 @@
 ---
-title: "ion-back-button"
+title: 'ion-back-button'
 ---
-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';
+
+import Props from '@ionic-internal/component-api/v6/back-button/props.md';
+import Events from '@ionic-internal/component-api/v6/back-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/back-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/back-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/back-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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" />
 
-
 The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized.
 
 ## Basic Usage
@@ -39,19 +42,25 @@ import Custom from '@site/static/usage/v6/back-button/custom/index.md';
 Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set.
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/versioned_docs/version-v6/api/backdrop.md b/versioned_docs/version-v6/api/backdrop.md
index 97217b36b59..ae1ecd965b4 100644
--- a/versioned_docs/version-v6/api/backdrop.md
+++ b/versioned_docs/version-v6/api/backdrop.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/backdrop/props.md';
+import Events from '@ionic-internal/component-api/v6/backdrop/events.md';
+import Methods from '@ionic-internal/component-api/v6/backdrop/methods.md';
+import Parts from '@ionic-internal/component-api/v6/backdrop/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/backdrop/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/backdrop/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/badge.md b/versioned_docs/version-v6/api/badge.md
index 18920b542c9..c63aaab49ee 100644
--- a/versioned_docs/version-v6/api/badge.md
+++ b/versioned_docs/version-v6/api/badge.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/badge/props.md';
+import Events from '@ionic-internal/component-api/v6/badge/events.md';
+import Methods from '@ionic-internal/component-api/v6/badge/methods.md';
+import Parts from '@ionic-internal/component-api/v6/badge/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/badge/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/badge/slots.md';
 
 <head>
   <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
diff --git a/versioned_docs/version-v6/api/breadcrumb.md b/versioned_docs/version-v6/api/breadcrumb.md
index 5be2aa6c695..c964549933b 100644
--- a/versioned_docs/version-v6/api/breadcrumb.md
+++ b/versioned_docs/version-v6/api/breadcrumb.md
@@ -1,18 +1,18 @@
 ---
-title: "ion-breadcrumb"
+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 Props from '@ionic-internal/component-api/v6/breadcrumb/props.md';
+import Events from '@ionic-internal/component-api/v6/breadcrumb/events.md';
+import Methods from '@ionic-internal/component-api/v6/breadcrumb/methods.md';
+import Parts from '@ionic-internal/component-api/v6/breadcrumb/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/breadcrumb/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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.
@@ -38,23 +38,26 @@ interface BreadcrumbCustomEvent extends CustomEvent {
 }
 ```
 
-
-
-
 ## 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
index 561539a973e..471f5dd4291 100644
--- a/versioned_docs/version-v6/api/breadcrumbs.md
+++ b/versioned_docs/version-v6/api/breadcrumbs.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/breadcrumbs/props.md';
+import Events from '@ionic-internal/component-api/v6/breadcrumbs/events.md';
+import Methods from '@ionic-internal/component-api/v6/breadcrumbs/methods.md';
+import Parts from '@ionic-internal/component-api/v6/breadcrumbs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/breadcrumbs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/breadcrumbs/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/button.md b/versioned_docs/version-v6/api/button.md
index a78f98da7a8..897d4d3f8e5 100644
--- a/versioned_docs/version-v6/api/button.md
+++ b/versioned_docs/version-v6/api/button.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/button/props.md';
+import Events from '@ionic-internal/component-api/v6/button/events.md';
+import Methods from '@ionic-internal/component-api/v6/button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/button/slots.md';
 
 <head>
   <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
diff --git a/versioned_docs/version-v6/api/buttons.md b/versioned_docs/version-v6/api/buttons.md
index c22bd4c0ad5..d20c05adee6 100644
--- a/versioned_docs/version-v6/api/buttons.md
+++ b/versioned_docs/version-v6/api/buttons.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/buttons/props.md';
+import Events from '@ionic-internal/component-api/v6/buttons/events.md';
+import Methods from '@ionic-internal/component-api/v6/buttons/methods.md';
+import Parts from '@ionic-internal/component-api/v6/buttons/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/buttons/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/buttons/slots.md';
 
 <head>
   <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
diff --git a/versioned_docs/version-v6/api/card-content.md b/versioned_docs/version-v6/api/card-content.md
index 647cba00897..58f621b3d89 100644
--- a/versioned_docs/version-v6/api/card-content.md
+++ b/versioned_docs/version-v6/api/card-content.md
@@ -1,35 +1,40 @@
 ---
-title: "ion-card-content"
+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';
+import Props from '@ionic-internal/component-api/v6/card-content/props.md';
+import Events from '@ionic-internal/component-api/v6/card-content/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index 2e52467ed43..0461d60b54e 100644
--- a/versioned_docs/version-v6/api/card-header.md
+++ b/versioned_docs/version-v6/api/card-header.md
@@ -1,37 +1,42 @@
 ---
-title: "ion-card-header"
+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 Props from '@ionic-internal/component-api/v6/card-header/props.md';
+import Events from '@ionic-internal/component-api/v6/card-header/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-header/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index ec72784cd99..2779735e71f 100644
--- a/versioned_docs/version-v6/api/card-subtitle.md
+++ b/versioned_docs/version-v6/api/card-subtitle.md
@@ -1,37 +1,42 @@
 ---
-title: "ion-card-subtitle"
+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 Props from '@ionic-internal/component-api/v6/card-subtitle/props.md';
+import Events from '@ionic-internal/component-api/v6/card-subtitle/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-subtitle/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-subtitle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-subtitle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index 33b24158eb5..ee72f051ed3 100644
--- a/versioned_docs/version-v6/api/card-title.md
+++ b/versioned_docs/version-v6/api/card-title.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-card-title"
+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 Props from '@ionic-internal/component-api/v6/card-title/props.md';
+import Events from '@ionic-internal/component-api/v6/card-title/events.md';
+import Methods from '@ionic-internal/component-api/v6/card-title/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card-title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card-title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index fda33f2e804..c67dd2a27b8 100644
--- a/versioned_docs/version-v6/api/card.md
+++ b/versioned_docs/version-v6/api/card.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/card/props.md';
+import Events from '@ionic-internal/component-api/v6/card/events.md';
+import Methods from '@ionic-internal/component-api/v6/card/methods.md';
+import Parts from '@ionic-internal/component-api/v6/card/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/card/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/card/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.md
index 7344a77f0d1..727c09811c9 100644
--- a/versioned_docs/version-v6/api/checkbox.md
+++ b/versioned_docs/version-v6/api/checkbox.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v6/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v6/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v6/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/checkbox/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/checkbox/slots.md';
 
 <head>
   <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
diff --git a/versioned_docs/version-v6/api/chip.md b/versioned_docs/version-v6/api/chip.md
index 46e13e98292..91f6bb5e264 100644
--- a/versioned_docs/version-v6/api/chip.md
+++ b/versioned_docs/version-v6/api/chip.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/chip/props.md';
+import Events from '@ionic-internal/component-api/v6/chip/events.md';
+import Methods from '@ionic-internal/component-api/v6/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v6/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/chip/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/chip/slots.md';
 
 <head>
   <title>ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.md
index e5872b4f6a1..5a19f67b49b 100644
--- a/versioned_docs/version-v6/api/col.md
+++ b/versioned_docs/version-v6/api/col.md
@@ -1,49 +1,54 @@
 ---
-title: "ion-col"
+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';
+
+import Props from '@ionic-internal/component-api/v6/col/props.md';
+import Events from '@ionic-internal/component-api/v6/col/events.md';
+import Methods from '@ionic-internal/component-api/v6/col/methods.md';
+import Parts from '@ionic-internal/component-api/v6/col/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/col/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index 528f39b7958..912c05d4515 100644
--- a/versioned_docs/version-v6/api/content.md
+++ b/versioned_docs/version-v6/api/content.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/content/props.md';
+import Events from '@ionic-internal/component-api/v6/content/events.md';
+import Methods from '@ionic-internal/component-api/v6/content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/content/slots.md';
 
 <head>
   <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
diff --git a/versioned_docs/version-v6/api/datetime-button.md b/versioned_docs/version-v6/api/datetime-button.md
index 78e691b231d..dd76005abc2 100644
--- a/versioned_docs/version-v6/api/datetime-button.md
+++ b/versioned_docs/version-v6/api/datetime-button.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/datetime-button/props.md';
+import Events from '@ionic-internal/component-api/v6/datetime-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/datetime-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/datetime-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/datetime-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/datetime-button/slots.md';
 
 <head>
   <title>ion-datetime-button: Ionic API Input for interacting with Datetime picker</title>
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index ffe8e673934..a4abc8d33a6 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/datetime/props.md';
+import Events from '@ionic-internal/component-api/v6/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v6/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v6/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/datetime/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/datetime/slots.md';
 
 import Basic from '@site/static/usage/v6/datetime/basic/index.md';
 
diff --git a/versioned_docs/version-v6/api/fab-button.md b/versioned_docs/version-v6/api/fab-button.md
index ab86a48426e..bd1c98cc848 100644
--- a/versioned_docs/version-v6/api/fab-button.md
+++ b/versioned_docs/version-v6/api/fab-button.md
@@ -1,23 +1,26 @@
 ---
-title: "ion-fab-button"
+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';
+
+import Props from '@ionic-internal/component-api/v6/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v6/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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.
@@ -25,19 +28,25 @@ As the name suggests, FABs generally float over the content in a fixed position.
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/fab-list.md b/versioned_docs/version-v6/api/fab-list.md
index a0659a394d7..36d1040bda6 100644
--- a/versioned_docs/version-v6/api/fab-list.md
+++ b/versioned_docs/version-v6/api/fab-list.md
@@ -1,12 +1,13 @@
 ---
-title: "ion-fab-list"
+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 Props from '@ionic-internal/component-api/v6/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v6/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab-list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/fab-list/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -17,19 +18,25 @@ The fab list component is a container for multiple [fab buttons](./fab-button).
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/fab.md b/versioned_docs/version-v6/api/fab.md
index 5ecfbbd012d..008063d0f2e 100644
--- a/versioned_docs/version-v6/api/fab.md
+++ b/versioned_docs/version-v6/api/fab.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/fab/props.md';
+import Events from '@ionic-internal/component-api/v6/fab/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/fab/slots.md';
 
 <head>
   <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/footer.md b/versioned_docs/version-v6/api/footer.md
index 0a4820b5713..a2c7b74fad8 100644
--- a/versioned_docs/version-v6/api/footer.md
+++ b/versioned_docs/version-v6/api/footer.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/footer/props.md';
+import Events from '@ionic-internal/component-api/v6/footer/events.md';
+import Methods from '@ionic-internal/component-api/v6/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v6/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/footer/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/footer/slots.md';
 
 <head>
   <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
diff --git a/versioned_docs/version-v6/api/grid.md b/versioned_docs/version-v6/api/grid.md
index 22ea8c2f0f1..9eedd1955ab 100644
--- a/versioned_docs/version-v6/api/grid.md
+++ b/versioned_docs/version-v6/api/grid.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/grid/props.md';
+import Events from '@ionic-internal/component-api/v6/grid/events.md';
+import Methods from '@ionic-internal/component-api/v6/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v6/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/grid/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/grid/slots.md';
 
 <head>
   <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
diff --git a/versioned_docs/version-v6/api/header.md b/versioned_docs/version-v6/api/header.md
index a746f955361..d3305b4c027 100644
--- a/versioned_docs/version-v6/api/header.md
+++ b/versioned_docs/version-v6/api/header.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/header/props.md';
+import Events from '@ionic-internal/component-api/v6/header/events.md';
+import Methods from '@ionic-internal/component-api/v6/header/methods.md';
+import Parts from '@ionic-internal/component-api/v6/header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/header/slots.md';
 
 <head>
   <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/img.md b/versioned_docs/version-v6/api/img.md
index aa1010e46b5..44e3adbb1d3 100644
--- a/versioned_docs/version-v6/api/img.md
+++ b/versioned_docs/version-v6/api/img.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/img/props.md';
+import Events from '@ionic-internal/component-api/v6/img/events.md';
+import Methods from '@ionic-internal/component-api/v6/img/methods.md';
+import Parts from '@ionic-internal/component-api/v6/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/img/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/img/slots.md';
 
 <head>
   <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.md b/versioned_docs/version-v6/api/infinite-scroll-content.md
index 2647dffdb87..53b4829e731 100644
--- a/versioned_docs/version-v6/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v6/api/infinite-scroll-content.md
@@ -1,13 +1,13 @@
 ---
-title: "ion-infinite-scroll-content"
+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 Props from '@ionic-internal/component-api/v6/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/infinite-scroll-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
@@ -16,19 +16,25 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/infinite-scroll.md b/versioned_docs/version-v6/api/infinite-scroll.md
index 0ea2be497e9..e8788dde143 100644
--- a/versioned_docs/version-v6/api/infinite-scroll.md
+++ b/versioned_docs/version-v6/api/infinite-scroll.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/infinite-scroll/props.md';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/infinite-scroll/slots.md';
 
 <head>
   <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.md
index f9c328996e7..3f439459ada 100644
--- a/versioned_docs/version-v6/api/input.md
+++ b/versioned_docs/version-v6/api/input.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/input/props.md';
+import Events from '@ionic-internal/component-api/v6/input/events.md';
+import Methods from '@ionic-internal/component-api/v6/input/methods.md';
+import Parts from '@ionic-internal/component-api/v6/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/input/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/input/slots.md';
 
 <head>
   <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
diff --git a/versioned_docs/version-v6/api/item-divider.md b/versioned_docs/version-v6/api/item-divider.md
index 381d9eb414a..cf5cb8cad4a 100644
--- a/versioned_docs/version-v6/api/item-divider.md
+++ b/versioned_docs/version-v6/api/item-divider.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v6/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-divider/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-divider/slots.md';
 
 <head>
   <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/item-group.md b/versioned_docs/version-v6/api/item-group.md
index c7920c017dd..c4909aa35b8 100644
--- a/versioned_docs/version-v6/api/item-group.md
+++ b/versioned_docs/version-v6/api/item-group.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item-group/props.md';
+import Events from '@ionic-internal/component-api/v6/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-group/slots.md';
 
 <head>
   <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
diff --git a/versioned_docs/version-v6/api/item-option.md b/versioned_docs/version-v6/api/item-option.md
index 800d1030f50..8ef658c9bd8 100644
--- a/versioned_docs/version-v6/api/item-option.md
+++ b/versioned_docs/version-v6/api/item-option.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-item-option"
+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';
+
+import Props from '@ionic-internal/component-api/v6/item-option/props.md';
+import Events from '@ionic-internal/component-api/v6/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index cbee8f5289b..6035574119c 100644
--- a/versioned_docs/version-v6/api/item-options.md
+++ b/versioned_docs/version-v6/api/item-options.md
@@ -1,50 +1,55 @@
 ---
-title: "ion-item-options"
+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';
+
+import Props from '@ionic-internal/component-api/v6/item-options/props.md';
+import Events from '@ionic-internal/component-api/v6/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-options/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index dba424f2b7f..62e496d51e8 100644
--- a/versioned_docs/version-v6/api/item-sliding.md
+++ b/versioned_docs/version-v6/api/item-sliding.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v6/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-sliding/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-sliding/slots.md';
 
 <head>
   <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.md
index eb3df16d32e..cb318d9fb04 100644
--- a/versioned_docs/version-v6/api/item.md
+++ b/versioned_docs/version-v6/api/item.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/item/props.md';
+import Events from '@ionic-internal/component-api/v6/item/events.md';
+import Methods from '@ionic-internal/component-api/v6/item/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item/slots.md';
 
 <head>
   <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
diff --git a/versioned_docs/version-v6/api/label.md b/versioned_docs/version-v6/api/label.md
index 329f40c56a4..4b17032fe56 100644
--- a/versioned_docs/version-v6/api/label.md
+++ b/versioned_docs/version-v6/api/label.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/label/props.md';
+import Events from '@ionic-internal/component-api/v6/label/events.md';
+import Methods from '@ionic-internal/component-api/v6/label/methods.md';
+import Parts from '@ionic-internal/component-api/v6/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/label/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/label/slots.md';
 
 <head>
   <title>Item Label Color and Properties for Applications | ion-label</title>
diff --git a/versioned_docs/version-v6/api/list-header.md b/versioned_docs/version-v6/api/list-header.md
index 2410ffc044f..bf16332d0fc 100644
--- a/versioned_docs/version-v6/api/list-header.md
+++ b/versioned_docs/version-v6/api/list-header.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/list-header/props.md';
+import Events from '@ionic-internal/component-api/v6/list-header/events.md';
+import Methods from '@ionic-internal/component-api/v6/list-header/methods.md';
+import Parts from '@ionic-internal/component-api/v6/list-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/list-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/list-header/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/list.md b/versioned_docs/version-v6/api/list.md
index 336fe851f08..054686768c7 100644
--- a/versioned_docs/version-v6/api/list.md
+++ b/versioned_docs/version-v6/api/list.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/list/props.md';
+import Events from '@ionic-internal/component-api/v6/list/events.md';
+import Methods from '@ionic-internal/component-api/v6/list/methods.md';
+import Parts from '@ionic-internal/component-api/v6/list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/list/slots.md';
 
 <head>
   <title>ion-list: Item List View Component for iOS and Android Apps</title>
diff --git a/versioned_docs/version-v6/api/loading.md b/versioned_docs/version-v6/api/loading.md
index c9bd57dd163..2c61ce88c14 100644
--- a/versioned_docs/version-v6/api/loading.md
+++ b/versioned_docs/version-v6/api/loading.md
@@ -5,12 +5,12 @@ 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';
+import Props from '@ionic-internal/component-api/v6/loading/props.md';
+import Events from '@ionic-internal/component-api/v6/loading/events.md';
+import Methods from '@ionic-internal/component-api/v6/loading/methods.md';
+import Parts from '@ionic-internal/component-api/v6/loading/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/loading/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/loading/slots.md';
 
 <head>
   <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
diff --git a/versioned_docs/version-v6/api/menu-button.md b/versioned_docs/version-v6/api/menu-button.md
index adba980b958..180f59dab48 100644
--- a/versioned_docs/version-v6/api/menu-button.md
+++ b/versioned_docs/version-v6/api/menu-button.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-menu-button"
+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';
+
+import Props from '@ionic-internal/component-api/v6/menu-button/props.md';
+import Events from '@ionic-internal/component-api/v6/menu-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/menu-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/menu-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/menu-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index e6a10201362..a68507aa4f4 100644
--- a/versioned_docs/version-v6/api/menu-toggle.md
+++ b/versioned_docs/version-v6/api/menu-toggle.md
@@ -1,44 +1,52 @@
 ---
-title: "ion-menu-toggle"
+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';
+
+import Props from '@ionic-internal/component-api/v6/menu-toggle/props.md';
+import Events from '@ionic-internal/component-api/v6/menu-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v6/menu-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v6/menu-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/menu-toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index 323f90dd18b..e6ba58d6e82 100644
--- a/versioned_docs/version-v6/api/menu.md
+++ b/versioned_docs/version-v6/api/menu.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/menu/props.md';
+import Events from '@ionic-internal/component-api/v6/menu/events.md';
+import Methods from '@ionic-internal/component-api/v6/menu/methods.md';
+import Parts from '@ionic-internal/component-api/v6/menu/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/menu/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/menu/slots.md';
 
 <head>
   <title>ion-menu: API Framework Docs for Types of Menu Components</title>
diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md
index d669d1c0617..1a632fd002c 100644
--- a/versioned_docs/version-v6/api/modal.md
+++ b/versioned_docs/version-v6/api/modal.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/modal/props.md';
+import Events from '@ionic-internal/component-api/v6/modal/events.md';
+import Methods from '@ionic-internal/component-api/v6/modal/methods.md';
+import Parts from '@ionic-internal/component-api/v6/modal/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/modal/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/modal/slots.md';
 
 <head>
   <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
diff --git a/versioned_docs/version-v6/api/nav-link.md b/versioned_docs/version-v6/api/nav-link.md
index 30a8f3264ed..8d5857465dc 100644
--- a/versioned_docs/version-v6/api/nav-link.md
+++ b/versioned_docs/version-v6/api/nav-link.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-nav-link"
+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';
+
+import Props from '@ionic-internal/component-api/v6/nav-link/props.md';
+import Events from '@ionic-internal/component-api/v6/nav-link/events.md';
+import Methods from '@ionic-internal/component-api/v6/nav-link/methods.md';
+import Parts from '@ionic-internal/component-api/v6/nav-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/nav-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
index 0e4262885d2..330f38561c4 100644
--- a/versioned_docs/version-v6/api/nav.md
+++ b/versioned_docs/version-v6/api/nav.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/nav/props.md';
+import Events from '@ionic-internal/component-api/v6/nav/events.md';
+import Methods from '@ionic-internal/component-api/v6/nav/methods.md';
+import Parts from '@ionic-internal/component-api/v6/nav/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/nav/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/nav/slots.md';
 
 <head>
   <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
diff --git a/versioned_docs/version-v6/api/note.md b/versioned_docs/version-v6/api/note.md
index f512aaf7753..fd8cbc92fdf 100644
--- a/versioned_docs/version-v6/api/note.md
+++ b/versioned_docs/version-v6/api/note.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/note/props.md';
+import Events from '@ionic-internal/component-api/v6/note/events.md';
+import Methods from '@ionic-internal/component-api/v6/note/methods.md';
+import Parts from '@ionic-internal/component-api/v6/note/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/note/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/note/slots.md';
 
 <head>
   <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/picker.md b/versioned_docs/version-v6/api/picker.md
index 8eec3438db2..1c3ab46eab4 100644
--- a/versioned_docs/version-v6/api/picker.md
+++ b/versioned_docs/version-v6/api/picker.md
@@ -1,12 +1,13 @@
 ---
 title: 'ion-picker'
 ---
-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';
+
+import Props from '@ionic-internal/component-api/v6/picker/props.md';
+import Events from '@ionic-internal/component-api/v6/picker/events.md';
+import Methods from '@ionic-internal/component-api/v6/picker/methods.md';
+import Parts from '@ionic-internal/component-api/v6/picker/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/picker/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/picker/slots.md';
 
 <head>
   <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/popover.md b/versioned_docs/version-v6/api/popover.md
index a65065904f5..041db143901 100644
--- a/versioned_docs/version-v6/api/popover.md
+++ b/versioned_docs/version-v6/api/popover.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/popover/props.md';
+import Events from '@ionic-internal/component-api/v6/popover/events.md';
+import Methods from '@ionic-internal/component-api/v6/popover/methods.md';
+import Parts from '@ionic-internal/component-api/v6/popover/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/popover/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/popover/slots.md';
 
 <head>
   <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
diff --git a/versioned_docs/version-v6/api/progress-bar.md b/versioned_docs/version-v6/api/progress-bar.md
index f28e826e60d..e5f75f384ef 100644
--- a/versioned_docs/version-v6/api/progress-bar.md
+++ b/versioned_docs/version-v6/api/progress-bar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/progress-bar/props.md';
+import Events from '@ionic-internal/component-api/v6/progress-bar/events.md';
+import Methods from '@ionic-internal/component-api/v6/progress-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/progress-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/progress-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/progress-bar/slots.md';
 
 <head>
   <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
diff --git a/versioned_docs/version-v6/api/radio-group.md b/versioned_docs/version-v6/api/radio-group.md
index b083ee208b2..dcfb8138e77 100644
--- a/versioned_docs/version-v6/api/radio-group.md
+++ b/versioned_docs/version-v6/api/radio-group.md
@@ -1,24 +1,26 @@
 ---
-title: "ion-radio-group"
+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';
+
+import Props from '@ionic-internal/component-api/v6/radio-group/props.md';
+import Events from '@ionic-internal/component-api/v6/radio-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/radio-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/radio-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/radio-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
@@ -40,21 +42,26 @@ interface RadioGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
 ## 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
index a841a557642..ab82907bea1 100644
--- a/versioned_docs/version-v6/api/radio.md
+++ b/versioned_docs/version-v6/api/radio.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/radio/props.md';
+import Events from '@ionic-internal/component-api/v6/radio/events.md';
+import Methods from '@ionic-internal/component-api/v6/radio/methods.md';
+import Parts from '@ionic-internal/component-api/v6/radio/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/radio/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/radio/slots.md';
 
 <head>
   <title>ion-radio Component: Radio Property for iOS and Android</title>
diff --git a/versioned_docs/version-v6/api/range.md b/versioned_docs/version-v6/api/range.md
index 98492b83314..75a7c4af8fa 100644
--- a/versioned_docs/version-v6/api/range.md
+++ b/versioned_docs/version-v6/api/range.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/range/props.md';
+import Events from '@ionic-internal/component-api/v6/range/events.md';
+import Methods from '@ionic-internal/component-api/v6/range/methods.md';
+import Parts from '@ionic-internal/component-api/v6/range/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/range/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/range/slots.md';
 
 <head>
   <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
diff --git a/versioned_docs/version-v6/api/refresher-content.md b/versioned_docs/version-v6/api/refresher-content.md
index 1b80d4ef40c..c0091c89d0f 100644
--- a/versioned_docs/version-v6/api/refresher-content.md
+++ b/versioned_docs/version-v6/api/refresher-content.md
@@ -1,35 +1,40 @@
 ---
-title: "ion-refresher-content"
+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';
+import Props from '@ionic-internal/component-api/v6/refresher-content/props.md';
+import Events from '@ionic-internal/component-api/v6/refresher-content/events.md';
+import Methods from '@ionic-internal/component-api/v6/refresher-content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/refresher-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/refresher-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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
index 1f69dd3d268..31914ee2e7d 100644
--- a/versioned_docs/version-v6/api/refresher.md
+++ b/versioned_docs/version-v6/api/refresher.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/refresher/props.md';
+import Events from '@ionic-internal/component-api/v6/refresher/events.md';
+import Methods from '@ionic-internal/component-api/v6/refresher/methods.md';
+import Parts from '@ionic-internal/component-api/v6/refresher/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/refresher/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/refresher/slots.md';
 
 <head>
   <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
diff --git a/versioned_docs/version-v6/api/reorder-group.md b/versioned_docs/version-v6/api/reorder-group.md
index 674bc2561b9..2c8615cee46 100644
--- a/versioned_docs/version-v6/api/reorder-group.md
+++ b/versioned_docs/version-v6/api/reorder-group.md
@@ -1,26 +1,28 @@
 ---
-title: "ion-reorder-group"
+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';
+
+import Props from '@ionic-internal/component-api/v6/reorder-group/props.md';
+import Events from '@ionic-internal/component-api/v6/reorder-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/reorder-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/reorder-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/reorder-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
@@ -44,21 +46,26 @@ interface ItemReorderCustomEvent extends CustomEvent {
 }
 ```
 
-
 ## 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
index e7d57830079..38301d71bbe 100644
--- a/versioned_docs/version-v6/api/reorder.md
+++ b/versioned_docs/version-v6/api/reorder.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/reorder/props.md';
+import Events from '@ionic-internal/component-api/v6/reorder/events.md';
+import Methods from '@ionic-internal/component-api/v6/reorder/methods.md';
+import Parts from '@ionic-internal/component-api/v6/reorder/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/reorder/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/reorder/slots.md';
 
 <head>
   <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
diff --git a/versioned_docs/version-v6/api/ripple-effect.md b/versioned_docs/version-v6/api/ripple-effect.md
index 83f5e0b8486..e2def63ac03 100644
--- a/versioned_docs/version-v6/api/ripple-effect.md
+++ b/versioned_docs/version-v6/api/ripple-effect.md
@@ -2,12 +2,12 @@
 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 Props from '@ionic-internal/component-api/v6/ripple-effect/props.md';
+import Events from '@ionic-internal/component-api/v6/ripple-effect/events.md';
+import Methods from '@ionic-internal/component-api/v6/ripple-effect/methods.md';
+import Parts from '@ionic-internal/component-api/v6/ripple-effect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/ripple-effect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/ripple-effect/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
diff --git a/versioned_docs/version-v6/api/route-redirect.md b/versioned_docs/version-v6/api/route-redirect.md
index ac4febd161d..a2ace00dbea 100644
--- a/versioned_docs/version-v6/api/route-redirect.md
+++ b/versioned_docs/version-v6/api/route-redirect.md
@@ -1,35 +1,36 @@
 ---
-title: "ion-route-redirect"
+title: 'ion-route-redirect'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/route-redirect/props.md';
+import Events from '@ionic-internal/component-api/v6/route-redirect/events.md';
+import Methods from '@ionic-internal/component-api/v6/route-redirect/methods.md';
+import Parts from '@ionic-internal/component-api/v6/route-redirect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/route-redirect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
 
-
 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.
+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.
+- `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
 
@@ -48,9 +49,6 @@ Take the following two redirects:
 
 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
@@ -96,19 +94,25 @@ 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/route.md b/versioned_docs/version-v6/api/route.md
index 46803354c95..e8be6cb3627 100644
--- a/versioned_docs/version-v6/api/route.md
+++ b/versioned_docs/version-v6/api/route.md
@@ -1,32 +1,33 @@
 ---
-title: "ion-route"
+title: 'ion-route'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v6/route/props.md';
+import Events from '@ionic-internal/component-api/v6/route/events.md';
+import Methods from '@ionic-internal/component-api/v6/route/methods.md';
+import Parts from '@ionic-internal/component-api/v6/route/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/route/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
 
-
-
 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.
+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.
@@ -42,9 +43,6 @@ interface NavigationHookOptions {
 }
 ```
 
-
-
-
 ## Usage
 
 <Tabs groupId="framework" defaultValue="javascript" values={[{ value: 'javascript', label: 'Javascript' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
@@ -69,23 +67,23 @@ 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');
@@ -99,23 +97,21 @@ const confirmDiscardChanges = async () => {
     {
       text: 'Discard',
       role: 'destructive',
-    }
+    },
   ];
-  
+
   document.body.appendChild(alert);
-  
+
   await alert.present();
-  
+
   const { role } = await alert.onDidDismiss();
-  
-  return (role === 'Cancel') ? false : true;
-}
-```
 
+  return role === 'Cancel' ? false : true;
+};
+```
 
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```typescript
@@ -124,7 +120,7 @@ import { alertController } from '@ionic/core';
 
 @Component({
   tag: 'router-example',
-  styleUrl: 'router-example.css'
+  styleUrl: 'router-example.css',
 })
 export class RouterExample {
   render() {
@@ -135,29 +131,29 @@ export class RouterExample {
         <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({
@@ -171,22 +167,20 @@ const confirmDiscardChanges = async () => {
       {
         text: 'Discard',
         role: 'destructive',
-      }
-    ]
+      },
+    ],
   });
-  
+
   await alert.present();
-  
+
   const { role } = await alert.onDidDismiss();
-  
-  return (role === 'Cancel') ? false : true;
-}
-```
 
+  return role === 'Cancel' ? false : true;
+};
+```
 
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -204,24 +198,24 @@ const confirmDiscardChanges = async () => {
 
   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?',
@@ -234,16 +228,16 @@ const confirmDiscardChanges = async () => {
         {
           text: 'Discard',
           role: 'destructive',
-        }
-      ]
+        },
+      ],
     });
-    
+
     await alert.present();
-    
+
     const { role } = await alert.onDidDismiss();
-    
-    return (role === 'Cancel') ? false : true;
-  }
+
+    return role === 'Cancel' ? false : true;
+  };
 </script>
 ```
 
@@ -252,19 +246,25 @@ const confirmDiscardChanges = async () => {
 </Tabs>
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/router-link.md b/versioned_docs/version-v6/api/router-link.md
index dd87a4c9354..bcccd576c42 100644
--- a/versioned_docs/version-v6/api/router-link.md
+++ b/versioned_docs/version-v6/api/router-link.md
@@ -1,59 +1,61 @@
 ---
-title: "ion-router-link"
+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"
+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';
+import Props from '@ionic-internal/component-api/v6/router-link/props.md';
+import Events from '@ionic-internal/component-api/v6/router-link/events.md';
+import Methods from '@ionic-internal/component-api/v6/router-link/methods.md';
+import Parts from '@ionic-internal/component-api/v6/router-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/router-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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}
-/>
 
+<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.
+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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/router-outlet.md b/versioned_docs/version-v6/api/router-outlet.md
index c15289ab77b..882aaaa1b29 100644
--- a/versioned_docs/version-v6/api/router-outlet.md
+++ b/versioned_docs/version-v6/api/router-outlet.md
@@ -1,21 +1,18 @@
 ---
-title: "ion-router-outlet"
+title: 'ion-router-outlet'
 ---
 
-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 Props from '@ionic-internal/component-api/v6/router-outlet/props.md';
+import Events from '@ionic-internal/component-api/v6/router-outlet/events.md';
+import Methods from '@ionic-internal/component-api/v6/router-outlet/methods.md';
+import Parts from '@ionic-internal/component-api/v6/router-outlet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/router-outlet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/router-outlet/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 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.
@@ -24,36 +21,37 @@ Although router outlet has methods for navigating around, it's recommended to us
 
 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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.md
index 1f70135b7d2..32c31f6d4e9 100644
--- a/versioned_docs/version-v6/api/router.md
+++ b/versioned_docs/version-v6/api/router.md
@@ -1,29 +1,30 @@
 ---
-title: "ion-router"
+title: 'ion-router'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/router/props.md';
+import Events from '@ionic-internal/component-api/v6/router/events.md';
+import Methods from '@ionic-internal/component-api/v6/router/methods.md';
+import Parts from '@ionic-internal/component-api/v6/router/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/router/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
 
-
 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. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
+Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
 :::
 
-
 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.
 
@@ -62,8 +63,6 @@ interface RouterCustomEvent extends CustomEvent {
 }
 ```
 
-
-
 ## Usage
 
 ```html
@@ -90,24 +89,28 @@ interface RouterCustomEvent extends CustomEvent {
   <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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/row.md b/versioned_docs/version-v6/api/row.md
index 48fc21c4ba0..4a01eb80f00 100644
--- a/versioned_docs/version-v6/api/row.md
+++ b/versioned_docs/version-v6/api/row.md
@@ -1,16 +1,20 @@
 ---
-title: "ion-row"
+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';
+
+import Props from '@ionic-internal/component-api/v6/row/props.md';
+import Events from '@ionic-internal/component-api/v6/row/events.md';
+import Methods from '@ionic-internal/component-api/v6/row/methods.md';
+import Parts from '@ionic-internal/component-api/v6/row/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/row/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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';
@@ -22,28 +26,30 @@ Rows are horizontal components of the [grid](./grid) system and contain varying
 
 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
index 5e75b8dc412..ce0c62b2a41 100644
--- a/versioned_docs/version-v6/api/searchbar.md
+++ b/versioned_docs/version-v6/api/searchbar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/searchbar/props.md';
+import Events from '@ionic-internal/component-api/v6/searchbar/events.md';
+import Methods from '@ionic-internal/component-api/v6/searchbar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/searchbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/searchbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/searchbar/slots.md';
 
 <head>
   <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
diff --git a/versioned_docs/version-v6/api/segment-button.md b/versioned_docs/version-v6/api/segment-button.md
index a5a87ccd7d9..0e7d688742b 100644
--- a/versioned_docs/version-v6/api/segment-button.md
+++ b/versioned_docs/version-v6/api/segment-button.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/segment-button/props.md';
+import Events from '@ionic-internal/component-api/v6/segment-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/segment-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/segment-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/segment-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/segment-button/slots.md';
 
 <head>
   <title>ion-segment-button | Segment Button Icon and Segment Value</title>
diff --git a/versioned_docs/version-v6/api/segment.md b/versioned_docs/version-v6/api/segment.md
index 14f795ac0ed..1283792ad65 100644
--- a/versioned_docs/version-v6/api/segment.md
+++ b/versioned_docs/version-v6/api/segment.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/segment/props.md';
+import Events from '@ionic-internal/component-api/v6/segment/events.md';
+import Methods from '@ionic-internal/component-api/v6/segment/methods.md';
+import Parts from '@ionic-internal/component-api/v6/segment/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/segment/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/segment/slots.md';
 
 <head>
   <title>ion-segment: API Documentation for Segmented Controls</title>
diff --git a/versioned_docs/version-v6/api/select-option.md b/versioned_docs/version-v6/api/select-option.md
index 73dbf015e2b..4d4b3e2c90d 100644
--- a/versioned_docs/version-v6/api/select-option.md
+++ b/versioned_docs/version-v6/api/select-option.md
@@ -1,42 +1,50 @@
 ---
-title: "ion-select-option"
+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';
+
+import Props from '@ionic-internal/component-api/v6/select-option/props.md';
+import Events from '@ionic-internal/component-api/v6/select-option/events.md';
+import Methods from '@ionic-internal/component-api/v6/select-option/methods.md';
+import Parts from '@ionic-internal/component-api/v6/select-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/select-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/select.md b/versioned_docs/version-v6/api/select.md
index 3682cc13f04..89509c1becc 100644
--- a/versioned_docs/version-v6/api/select.md
+++ b/versioned_docs/version-v6/api/select.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/select/props.md';
+import Events from '@ionic-internal/component-api/v6/select/events.md';
+import Methods from '@ionic-internal/component-api/v6/select/methods.md';
+import Parts from '@ionic-internal/component-api/v6/select/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/select/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/select/slots.md';
 
 <head>
   <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
diff --git a/versioned_docs/version-v6/api/skeleton-text.md b/versioned_docs/version-v6/api/skeleton-text.md
index 86ec40d8a6f..f26f3d1f6ac 100644
--- a/versioned_docs/version-v6/api/skeleton-text.md
+++ b/versioned_docs/version-v6/api/skeleton-text.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/skeleton-text/props.md';
+import Events from '@ionic-internal/component-api/v6/skeleton-text/events.md';
+import Methods from '@ionic-internal/component-api/v6/skeleton-text/methods.md';
+import Parts from '@ionic-internal/component-api/v6/skeleton-text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/skeleton-text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/skeleton-text/slots.md';
 
 <head>
   <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.md
index 6fb9aedacdf..58f5ec52068 100644
--- a/versioned_docs/version-v6/api/slide.md
+++ b/versioned_docs/version-v6/api/slide.md
@@ -1,17 +1,20 @@
 ---
-title: "ion-slide"
+title: 'ion-slide'
 ---
 
-import Props from '@site/static/auto-generated/slide/props.md';
-import Events from '@site/static/auto-generated/slide/events.md';
-import Methods from '@site/static/auto-generated/slide/methods.md';
-import Parts from '@site/static/auto-generated/slide/parts.md';
-import CustomProps from '@site/static/auto-generated/slide/custom-props.md';
-import Slots from '@site/static/auto-generated/slide/slots.md';
+import Props from '@ionic-internal/component-api/v6/slide/props.md';
+import Events from '@ionic-internal/component-api/v6/slide/events.md';
+import Methods from '@ionic-internal/component-api/v6/slide/methods.md';
+import Parts from '@ionic-internal/component-api/v6/slide/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/slide/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/slide/slots.md';
 
 <head>
   <title>ion-slide | Slide API Component for Ionic Framework Apps</title>
-  <meta name="description" content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides." />
+  <meta
+    name="description"
+    content="Slide is a child API component of Slides—written as ion-slide. Any slide content should be written in this component and used in conjunction with Slides."
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -20,30 +23,32 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 This component has been deprecated in favor of using Swiper.js directly. Please see the [Slides Documentation](./slides#migration) for a migration guide.
 :::
 
-
 The Slide component is a child component of [Slides](./slides). The template
 should be written as `ion-slide`. Any slide content should be written
 in this component and it should be used in conjunction with [Slides](./slides).
 
 See the [Slides API Docs](./slides) for more usage information.
 
-
-
-
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/slides.md b/versioned_docs/version-v6/api/slides.md
index 6cef08674c6..0c8ee78edc8 100644
--- a/versioned_docs/version-v6/api/slides.md
+++ b/versioned_docs/version-v6/api/slides.md
@@ -1,40 +1,39 @@
 ---
-title: "ion-slides"
+title: 'ion-slides'
 hide_table_of_contents: true
-demoUrl: "/docs/demos/api/slides/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html"
+demoUrl: '/docs/demos/api/slides/index.html'
+demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import TOCInline from '@theme/TOCInline';
 
-import Props from '@site/static/auto-generated/slides/props.md';
-import Events from '@site/static/auto-generated/slides/events.md';
-import Methods from '@site/static/auto-generated/slides/methods.md';
-import Parts from '@site/static/auto-generated/slides/parts.md';
-import CustomProps from '@site/static/auto-generated/slides/custom-props.md';
-import Slots from '@site/static/auto-generated/slides/slots.md';
+import Props from '@ionic-internal/component-api/v6/slides/props.md';
+import Events from '@ionic-internal/component-api/v6/slides/events.md';
+import Methods from '@ionic-internal/component-api/v6/slides/methods.md';
+import Parts from '@ionic-internal/component-api/v6/slides/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/slides/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/slides/slots.md';
 
 <head>
   <title>Ion-Slides: Mobile Touch Slider with Built-In & Custom Animation</title>
-  <meta name="description" content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android." />
+  <meta
+    name="description"
+    content="Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android."
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 <h2 className="table-of-contents__title">Contents</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+<TOCInline toc={toc} maxHeadingLevel={2} />
 
 :::note
 This component has been deprecated in favor of using Swiper.js directly. Please see the [migration guide](#migration) below.
 :::
 
-
 The Slides component is a multi-section container. Each section can be swiped
 or dragged between. It contains any number of [Slide](slide.md) components.
 
@@ -85,7 +84,7 @@ Since the underlying technology that powers your slides is the same, the migrati
 
 [Migration for Ionic Vue users](../vue/slides)
 
-------
+---
 
 The following documentation applies to the `ion-slides` component.
 
@@ -93,7 +92,6 @@ The following documentation applies to the `ion-slides` component.
 
 By default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.
 
-
 ### Coverflow
 
 ```typescript
@@ -118,13 +116,11 @@ const slideOpts = {
     },
     setTranslate() {
       const swiper = this;
-      const {
-        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $
-      } = swiper;
+      const { width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $ } = swiper;
       const params = swiper.params.coverflowEffect;
       const isHorizontal = swiper.isHorizontal();
       const transform$$1 = swiper.translate;
-      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
+      const center = isHorizontal ? -transform$$1 + swiperWidth / 2 : -transform$$1 + swiperHeight / 2;
       const rotate = isHorizontal ? params.rotate : -params.rotate;
       const translate = params.depth;
       // Each slide offset from center
@@ -132,31 +128,35 @@ const slideOpts = {
         const $slideEl = slides.eq(i);
         const slideSize = slidesSizesGrid[i];
         const slideOffset = $slideEl[0].swiperSlideOffset;
-        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
+        const offsetMultiplier = ((center - slideOffset - slideSize / 2) / slideSize) * params.modifier;
 
-         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
+        let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
         let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
         // var rotateZ = 0
         let translateZ = -translate * Math.abs(offsetMultiplier);
 
-         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
-        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
+        let translateY = isHorizontal ? 0 : params.stretch * offsetMultiplier;
+        let translateX = isHorizontal ? params.stretch * offsetMultiplier : 0;
 
-         // Fix for ultra small values
+        // Fix for ultra small values
         if (Math.abs(translateX) < 0.001) translateX = 0;
         if (Math.abs(translateY) < 0.001) translateY = 0;
         if (Math.abs(translateZ) < 0.001) translateZ = 0;
         if (Math.abs(rotateY) < 0.001) rotateY = 0;
         if (Math.abs(rotateX) < 0.001) rotateX = 0;
 
-         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
 
-         $slideEl.transform(slideTransform);
+        $slideEl.transform(slideTransform);
         $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
         if (params.slideShadows) {
           // Set shadows
-          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          let $shadowBeforeEl = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-left')
+            : $slideEl.find('.swiper-slide-shadow-top');
+          let $shadowAfterEl = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-right')
+            : $slideEl.find('.swiper-slide-shadow-bottom');
           if ($shadowBeforeEl.length === 0) {
             $shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
             $slideEl.append($shadowBeforeEl);
@@ -166,11 +166,11 @@ const slideOpts = {
             $slideEl.append($shadowAfterEl);
           }
           if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
-          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
+          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
         }
       }
 
-       // Set correct perspective for IE10
+      // Set correct perspective for IE10
       if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
         const ws = $wrapperEl[0].style;
         ws.perspectiveOrigin = `${center}px 50%`;
@@ -180,11 +180,13 @@ const slideOpts = {
       const swiper = this;
       swiper.slides
         .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .find(
+          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
+        )
         .transition(duration);
-    }
-  }
-}
+    },
+  },
+};
 ```
 
 ### Cube
@@ -199,7 +201,7 @@ const slideOpts = {
     shadowScale: 0.94,
   },
   on: {
-    beforeInit: function() {
+    beforeInit: function () {
       const swiper = this;
       swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
       swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
@@ -218,10 +220,16 @@ const slideOpts = {
       this.params = Object.assign(this.params, overwriteParams);
       this.originalParams = Object.assign(this.originalParams, overwriteParams);
     },
-    setTranslate: function() {
+    setTranslate: function () {
       const swiper = this;
       const {
-        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,
+        $el,
+        $wrapperEl,
+        slides,
+        width: swiperWidth,
+        height: swiperHeight,
+        rtlTranslate: rtl,
+        size: swiperSize,
       } = swiper;
       const params = swiper.params.cubeEffect;
       const isHorizontal = swiper.isHorizontal();
@@ -268,31 +276,37 @@ const slideOpts = {
           tx = 0;
           tz = -round * 4 * swiperSize;
         } else if ((slideIndex - 2) % 4 === 0) {
-          tx = swiperSize + (round * 4 * swiperSize);
+          tx = swiperSize + round * 4 * swiperSize;
           tz = swiperSize;
         } else if ((slideIndex - 3) % 4 === 0) {
           tx = -swiperSize;
-          tz = (3 * swiperSize) + (swiperSize * 4 * round);
+          tz = 3 * swiperSize + swiperSize * 4 * round;
         }
         if (rtl) {
           tx = -tx;
         }
 
-         if (!isHorizontal) {
+        if (!isHorizontal) {
           ty = tx;
           tx = 0;
         }
 
-         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
+        const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${
+          isHorizontal ? slideAngle : 0
+        }deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
         if (progress <= 1 && progress > -1) {
-          wrapperRotate = (slideIndex * 90) + (progress * 90);
-          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);
+          wrapperRotate = slideIndex * 90 + progress * 90;
+          if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
         }
         $slideEl.transform(transform$$1);
         if (params.slideShadows) {
           // Set shadows
-          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          let shadowBefore = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-left')
+            : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = isHorizontal
+            ? $slideEl.find('.swiper-slide-shadow-right')
+            : $slideEl.find('.swiper-slide-shadow-bottom');
           if (shadowBefore.length === 0) {
             shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
             $slideEl.append(shadowBefore);
@@ -312,39 +326,50 @@ const slideOpts = {
         'transform-origin': `50% 50% -${swiperSize / 2}px`,
       });
 
-       if (params.shadow) {
+      if (params.shadow) {
         if (isHorizontal) {
-          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
-        } else {
-          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);
-          const multiplier = 1.5 - (
-            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)
-            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)
+          $cubeShadowEl.transform(
+            `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${
+              -swiperWidth / 2
+            }px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`
           );
+        } else {
+          const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
+          const multiplier =
+            1.5 - (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2 + Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2);
           const scale1 = params.shadowScale;
           const scale2 = params.shadowScale / multiplier;
           const offset$$1 = params.shadowOffset;
-          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);
+          $cubeShadowEl.transform(
+            `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset$$1}px, ${
+              -swiperHeight / 2 / scale2
+            }px) rotateX(-90deg)`
+          );
         }
       }
 
-      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;
-      $wrapperEl
-        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);
+      const zFactor = swiper.browser.isSafari || swiper.browser.isUiWebView ? -swiperSize / 2 : 0;
+      $wrapperEl.transform(
+        `translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${
+          swiper.isHorizontal() ? -wrapperRotate : 0
+        }deg)`
+      );
     },
-    setTransition: function(duration) {
+    setTransition: function (duration) {
       const swiper = this;
       const { $el, slides } = swiper;
       slides
         .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .find(
+          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
+        )
         .transition(duration);
       if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
         $el.find('.swiper-cube-shadow').transition(duration);
       }
     },
-  }
-}
+  },
+};
 ```
 
 ### Fade
@@ -407,8 +432,8 @@ const slideOpts = {
         });
       }
     },
-  }
-}
+  },
+};
 ```
 
 ### Flip
@@ -455,25 +480,32 @@ const slideOpts = {
           rotateY = -rotateY;
         }
 
-         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
+        $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
 
-         if (swiper.params.flipEffect.slideShadows) {
+        if (swiper.params.flipEffect.slideShadows) {
           // Set shadows
-          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
-          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
+          let shadowBefore = swiper.isHorizontal()
+            ? $slideEl.find('.swiper-slide-shadow-left')
+            : $slideEl.find('.swiper-slide-shadow-top');
+          let shadowAfter = swiper.isHorizontal()
+            ? $slideEl.find('.swiper-slide-shadow-right')
+            : $slideEl.find('.swiper-slide-shadow-bottom');
           if (shadowBefore.length === 0) {
-            shadowBefore = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`);
+            shadowBefore = swiper.$(
+              `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`
+            );
             $slideEl.append(shadowBefore);
           }
           if (shadowAfter.length === 0) {
-            shadowAfter = swiper.$(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`);
+            shadowAfter = swiper.$(
+              `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`
+            );
             $slideEl.append(shadowAfter);
           }
           if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
           if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
         }
-        $slideEl
-          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
+        $slideEl.transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
       }
     },
     setTransition(duration) {
@@ -481,7 +513,9 @@ const slideOpts = {
       const { slides, activeIndex, $wrapperEl } = swiper;
       slides
         .transition(duration)
-        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
+        .find(
+          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
+        )
         .transition(duration);
       if (swiper.params.virtualTranslate && duration !== 0) {
         let eventTriggered = false;
@@ -498,13 +532,11 @@ const slideOpts = {
           }
         });
       }
-    }
-  }
+    },
+  },
 };
 ```
 
-
-
 ## 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' }]}>
@@ -530,14 +562,14 @@ import { Component } from '@angular/core';
         </ion-slide>
       </ion-slides>
     </ion-content>
-  `
+  `,
 })
 export class SlideExample {
   // Optional parameters to pass to the swiper instance.
   // See https://swiperjs.com/swiper-api for valid options.
   slideOpts = {
     initialSlide: 1,
-    speed: 400
+    speed: 400,
   };
   constructor() {}
 }
@@ -550,10 +582,8 @@ ion-slides {
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -581,8 +611,8 @@ var slides = document.querySelector('ion-slides');
 // See https://swiperjs.com/swiper-api for valid options.
 slides.options = {
   initialSlide: 1,
-  speed: 400
-}
+  speed: 400,
+};
 ```
 
 ```css
@@ -592,10 +622,8 @@ ion-slides {
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -606,7 +634,7 @@ import { IonSlides, IonSlide, IonContent } from '@ionic/react';
 // See https://swiperjs.com/swiper-api for valid options.
 const slideOpts = {
   initialSlide: 1,
-  speed: 400
+  speed: 400,
 };
 
 export const SlidesExample: React.FC = () => (
@@ -635,7 +663,6 @@ ion-slides {
 
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -643,14 +670,14 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'slides-example',
-  styleUrl: 'slides-example.css'
+  styleUrl: 'slides-example.css',
 })
 export class SlidesExample {
   // Optional parameters to pass to the swiper instance.
   // See https://swiperjs.com/swiper-api for valid options.
   private slideOpts = {
     initialSlide: 1,
-    speed: 400
+    speed: 400,
   };
 
   render() {
@@ -669,7 +696,7 @@ export class SlidesExample {
             <h1>Slide 3</h1>
           </ion-slide>
         </ion-slides>
-      </ion-content>
+      </ion-content>,
     ];
   }
 }
@@ -684,7 +711,6 @@ ion-slides {
 
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -702,44 +728,48 @@ ion-slides {
   </ion-slides>
 </template>
 
-
 <script>
-import { IonSlides, IonSlide } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonSlides, IonSlide },
-  setup() {
-    // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
-    const slideOpts = {
-      initialSlide: 1,
-      speed: 400
-    };
-    return { slideOpts }
-  }
-});
+  import { IonSlides, IonSlide } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonSlides, IonSlide },
+    setup() {
+      // Optional parameters to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options.
+      const slideOpts = {
+        initialSlide: 1,
+        speed: 400,
+      };
+      return { slideOpts };
+    },
+  });
 </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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/spinner.md b/versioned_docs/version-v6/api/spinner.md
index abe69520719..e6bf760869c 100644
--- a/versioned_docs/version-v6/api/spinner.md
+++ b/versioned_docs/version-v6/api/spinner.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/spinner/props.md';
+import Events from '@ionic-internal/component-api/v6/spinner/events.md';
+import Methods from '@ionic-internal/component-api/v6/spinner/methods.md';
+import Parts from '@ionic-internal/component-api/v6/spinner/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/spinner/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/spinner/slots.md';
 
 <head>
   <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
diff --git a/versioned_docs/version-v6/api/split-pane.md b/versioned_docs/version-v6/api/split-pane.md
index fa5f03fc403..87b29ff3b2f 100644
--- a/versioned_docs/version-v6/api/split-pane.md
+++ b/versioned_docs/version-v6/api/split-pane.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/split-pane/props.md';
+import Events from '@ionic-internal/component-api/v6/split-pane/events.md';
+import Methods from '@ionic-internal/component-api/v6/split-pane/methods.md';
+import Parts from '@ionic-internal/component-api/v6/split-pane/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/split-pane/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/split-pane/slots.md';
 
 <head>
   <title>ion-split-pane: Split Plane View for Menus and Multi-View Layouts</title>
diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.md
index 5cd9d97fe3d..cbf15815ba7 100644
--- a/versioned_docs/version-v6/api/tab-bar.md
+++ b/versioned_docs/version-v6/api/tab-bar.md
@@ -1,31 +1,31 @@
 ---
-title: "ion-tab-bar"
+title: 'ion-tab-bar'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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';
+import Props from '@ionic-internal/component-api/v6/tab-bar/props.md';
+import Events from '@ionic-internal/component-api/v6/tab-bar/events.md';
+import Methods from '@ionic-internal/component-api/v6/tab-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tab-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tab-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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" />
 
-
 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' }]}>
@@ -51,7 +51,6 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
 
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -78,7 +77,6 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
 
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -106,10 +104,8 @@ export const TabBarExample: React.FC = () => (
 );
 ```
 
-
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -117,7 +113,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-bar-example',
-  styleUrl: 'tab-bar-example.css'
+  styleUrl: 'tab-bar-example.css',
 })
 export class TabBarExample {
   render() {
@@ -140,16 +136,14 @@ export class TabBarExample {
             <ion-icon name="settings"></ion-icon>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>
+      </ion-tabs>,
     ];
   }
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -171,16 +165,16 @@ export class TabBarExample {
 </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 }
-  }
-});
+  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>
 ```
 
@@ -189,19 +183,25 @@ export default defineComponent({
 </Tabs>
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/tab-button.md b/versioned_docs/version-v6/api/tab-button.md
index 1ac51b3c34e..a989563be88 100644
--- a/versioned_docs/version-v6/api/tab-button.md
+++ b/versioned_docs/version-v6/api/tab-button.md
@@ -1,30 +1,25 @@
 ---
-title: "ion-tab-button"
+title: 'ion-tab-button'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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 Props from '@ionic-internal/component-api/v6/tab-button/props.md';
+import Events from '@ionic-internal/component-api/v6/tab-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/tab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/tab-button/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 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' }]}>
@@ -58,10 +53,8 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
 </ion-tabs>
 ```
 
-
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -108,10 +101,8 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
 </ion-tabs>
 ```
 
-
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -149,10 +140,8 @@ export const TabButtonExample: React.FC = () => (
 );
 ```
 
-
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -160,7 +149,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-button-example',
-  styleUrl: 'tab-button-example.css'
+  styleUrl: 'tab-button-example.css',
 })
 export class TabButtonExample {
   render() {
@@ -205,16 +194,14 @@ export class TabButtonExample {
             <ion-label>About</ion-label>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>
+      </ion-tabs>,
     ];
   }
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -246,50 +233,49 @@ export class TabButtonExample {
 </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 }
-  }
-});
+  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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/tab.md b/versioned_docs/version-v6/api/tab.md
index 899e3c6c484..deafa889116 100644
--- a/versioned_docs/version-v6/api/tab.md
+++ b/versioned_docs/version-v6/api/tab.md
@@ -1,49 +1,54 @@
 ---
-title: "ion-tab"
+title: 'ion-tab'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/tab/props.md';
+import Events from '@ionic-internal/component-api/v6/tab/events.md';
+import Methods from '@ionic-internal/component-api/v6/tab/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/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." />
+  <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" />
 
-
 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.
+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
+
+<Slots />
diff --git a/versioned_docs/version-v6/api/tabs.md b/versioned_docs/version-v6/api/tabs.md
index c97ef582190..8c200d9a226 100644
--- a/versioned_docs/version-v6/api/tabs.md
+++ b/versioned_docs/version-v6/api/tabs.md
@@ -2,12 +2,12 @@
 title: 'ion-tabs'
 ---
 
-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';
+import Props from '@ionic-internal/component-api/v6/tabs/props.md';
+import Events from '@ionic-internal/component-api/v6/tabs/events.md';
+import Methods from '@ionic-internal/component-api/v6/tabs/methods.md';
+import Parts from '@ionic-internal/component-api/v6/tabs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/tabs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/tabs/slots.md';
 
 <head>
   <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
diff --git a/versioned_docs/version-v6/api/text.md b/versioned_docs/version-v6/api/text.md
index c6fcee4c2db..ac2d82988e3 100644
--- a/versioned_docs/version-v6/api/text.md
+++ b/versioned_docs/version-v6/api/text.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/text/props.md';
+import Events from '@ionic-internal/component-api/v6/text/events.md';
+import Methods from '@ionic-internal/component-api/v6/text/methods.md';
+import Parts from '@ionic-internal/component-api/v6/text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/text/slots.md';
 
 <head>
   <title>ion-text: Ionic App Component to Style or Change Text Color</title>
diff --git a/versioned_docs/version-v6/api/textarea.md b/versioned_docs/version-v6/api/textarea.md
index 5b6def11096..169ba5f1372 100644
--- a/versioned_docs/version-v6/api/textarea.md
+++ b/versioned_docs/version-v6/api/textarea.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/textarea/props.md';
+import Events from '@ionic-internal/component-api/v6/textarea/events.md';
+import Methods from '@ionic-internal/component-api/v6/textarea/methods.md';
+import Parts from '@ionic-internal/component-api/v6/textarea/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/textarea/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/textarea/slots.md';
 
 <head>
   <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
diff --git a/versioned_docs/version-v6/api/thumbnail.md b/versioned_docs/version-v6/api/thumbnail.md
index f21d2f25b59..759c793a7cf 100644
--- a/versioned_docs/version-v6/api/thumbnail.md
+++ b/versioned_docs/version-v6/api/thumbnail.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/thumbnail/props.md';
+import Events from '@ionic-internal/component-api/v6/thumbnail/events.md';
+import Methods from '@ionic-internal/component-api/v6/thumbnail/methods.md';
+import Parts from '@ionic-internal/component-api/v6/thumbnail/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/thumbnail/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/thumbnail/slots.md';
 
 <head>
   <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
diff --git a/versioned_docs/version-v6/api/title.md b/versioned_docs/version-v6/api/title.md
index 07a1a36eb03..69d24cfb592 100644
--- a/versioned_docs/version-v6/api/title.md
+++ b/versioned_docs/version-v6/api/title.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/title/props.md';
+import Events from '@ionic-internal/component-api/v6/title/events.md';
+import Methods from '@ionic-internal/component-api/v6/title/methods.md';
+import Parts from '@ionic-internal/component-api/v6/title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/title/slots.md';
 
 <head>
   <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
index f5fb5184c58..847c359f1c8 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -5,12 +5,12 @@ 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';
+import Props from '@ionic-internal/component-api/v6/toast/props.md';
+import Events from '@ionic-internal/component-api/v6/toast/events.md';
+import Methods from '@ionic-internal/component-api/v6/toast/methods.md';
+import Parts from '@ionic-internal/component-api/v6/toast/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/toast/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/toast/slots.md';
 
 <head>
   <title>ion-toast Component: A Dismissible App Notification Alert</title>
diff --git a/versioned_docs/version-v6/api/toggle.md b/versioned_docs/version-v6/api/toggle.md
index bb22c827d6f..513dbae47d4 100644
--- a/versioned_docs/version-v6/api/toggle.md
+++ b/versioned_docs/version-v6/api/toggle.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/toggle/props.md';
+import Events from '@ionic-internal/component-api/v6/toggle/events.md';
+import Methods from '@ionic-internal/component-api/v6/toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v6/toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/toggle/slots.md';
 
 <head>
   <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
diff --git a/versioned_docs/version-v6/api/toolbar.md b/versioned_docs/version-v6/api/toolbar.md
index dbd61f85818..96464f3e46c 100644
--- a/versioned_docs/version-v6/api/toolbar.md
+++ b/versioned_docs/version-v6/api/toolbar.md
@@ -2,12 +2,12 @@
 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';
+import Props from '@ionic-internal/component-api/v6/toolbar/props.md';
+import Events from '@ionic-internal/component-api/v6/toolbar/events.md';
+import Methods from '@ionic-internal/component-api/v6/toolbar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/toolbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/toolbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/toolbar/slots.md';
 
 <head>
   <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
diff --git a/versioned_docs/version-v6/api/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.md
index 84f85ac329f..54d1a78f01b 100644
--- a/versioned_docs/version-v6/api/virtual-scroll.md
+++ b/versioned_docs/version-v6/api/virtual-scroll.md
@@ -1,27 +1,28 @@
 ---
-title: "ion-virtual-scroll"
+title: 'ion-virtual-scroll'
 ---
 
-import Props from '@site/static/auto-generated/virtual-scroll/props.md';
-import Events from '@site/static/auto-generated/virtual-scroll/events.md';
-import Methods from '@site/static/auto-generated/virtual-scroll/methods.md';
-import Parts from '@site/static/auto-generated/virtual-scroll/parts.md';
-import CustomProps from '@site/static/auto-generated/virtual-scroll/custom-props.md';
-import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
+import Props from '@ionic-internal/component-api/v6/virtual-scroll/props.md';
+import Events from '@ionic-internal/component-api/v6/virtual-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v6/virtual-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v6/virtual-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/virtual-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/virtual-scroll/slots.md';
 
 <head>
   <title>ion-virtual-scroll | Angular Virtual Scroll List for Ionic Apps</title>
-  <meta name="description" content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates." />
+  <meta
+    name="description"
+    content="ion-virtual-scroll, supported in Angular, displays a virtual, infinite list. Records are passed to the virtual scroll containing the data to create templates."
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 :::note
 This component has been deprecated in favor of using virtual scrolling libraries provided by each JavaScript Framework. See below for alternatives.
 :::
 
-
 Virtual Scroll displays a virtual, "infinite" list. An array of records
 is passed to the virtual scroll containing the data to create templates
 for. The template created for each record, referred to as a cell, can
@@ -43,7 +44,7 @@ For virtual scrolling options in Ionic React, please see [React Virtual Scroll G
 
 For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.md).
 
-------
+---
 
 The following documentation applies to the `ion-virtual-scroll` component.
 
@@ -85,7 +86,6 @@ renders whenever it wants which could be while the user is scrolling. However,
 `<ion-img>` is governed by the containing `ion-content` and does not render
 images while scrolling quickly.
 
-
 ## Virtual Scroll Performance Tips
 
 ### iOS Cordova WKWebView
@@ -131,13 +131,12 @@ different identities, and Ionic will tear down the entire DOM and rebuild
 it. This is an expensive operation and should be avoided if possible.
 
 ### Efficient headers and footer functions
+
 Each virtual item must stay extremely efficient, but one way to really
 kill its performance is to perform any DOM operations within section header
 and footer functions. These functions are called for every record in the
 dataset, so please make sure they're performant.
 
-
-
 ## Usage
 
 ```html
@@ -147,10 +146,10 @@ dataset, so please make sure they're performant.
       <div>
         <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
       </div>
-    <ion-card-header>
-      <ion-card-title>{{ item.name }}</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>{{ item.content }}</ion-card-content>
+      <ion-card-header>
+        <ion-card-title>{{ item.name }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>{{ item.content }}</ion-card-content>
     </ion-card>
   </ion-virtual-scroll>
 </ion-content>
@@ -167,7 +166,7 @@ export class VirtualScrollPageComponent {
         imgSrc: getImgSrc(),
         avatarSrc: getImgSrc(),
         imgHeight: Math.floor(Math.random() * 50 + 150),
-        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
+        content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100),
       });
 
       rotateImg++;
@@ -178,7 +177,8 @@ export class VirtualScrollPageComponent {
   }
 }
 
-const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+const lorem =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
 const images = [
   'bandit',
@@ -190,7 +190,7 @@ const images = [
   'general-lee',
   'ghostbusters',
   'knight-rider',
-  'mirth-mobile'
+  'mirth-mobile',
 ];
 
 function getImgSrc() {
@@ -212,9 +212,7 @@ The data given to the `items` property must be an array. An item template with t
 
 ```html
 <ion-virtual-scroll [items]="items">
-  <ion-item *virtualItem="let item">
-    {{ item }}
-  </ion-item>
+  <ion-item *virtualItem="let item"> {{ item }} </ion-item>
 </ion-virtual-scroll>
 ```
 
@@ -230,12 +228,8 @@ return `null` if a template shouldn't be created.
 
 ```html
 <ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn">
-  <ion-item-divider *virtualHeader="let header">
-    {{ header }}
-  </ion-item-divider>
-  <ion-item *virtualItem="let item">
-    Item: {{ item }}
-  </ion-item>
+  <ion-item-divider *virtualHeader="let header"> {{ header }} </ion-item-divider>
+  <ion-item *virtualItem="let item"> Item: {{ item }} </ion-item>
 </ion-virtual-scroll>
 ```
 
@@ -256,7 +250,6 @@ myHeaderFn(record, recordIndex, records) {
 }
 ```
 
-
 ### Custom Components
 
 If a custom component is going to be used within Virtual Scroll, it's best
@@ -267,27 +260,31 @@ within a `<div>` is a safe way to make sure dimensions are measured correctly.
 ```html
 <ion-virtual-scroll [items]="items">
   <div *virtualItem="let item">
-    <my-custom-item [item]="item">
-      {{ item }}
-    </my-custom-item>
+    <my-custom-item [item]="item"> {{ item }} </my-custom-item>
   </div>
 </ion-virtual-scroll>
 ```
 
 ## Properties
+
 <Props />
 
 ## Events
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />

From 73f3e02e3acaffd7438c30e82de2146a26c246b6 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 29 Mar 2023 16:10:13 -0400
Subject: [PATCH 284/469] chore: remove v7 beta banner (#2836)

---
 docs/updating/7-0.md | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index eeba9579840..32e81ff03bc 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -5,11 +5,7 @@ title: Updating to v7
 # Updating from Ionic 6 to 7
 
 :::note
-Ionic 7 is in beta. Please report any issues on [the Ionic Framework GitHub Repo](https://github.com/ionic-team/ionic-framework).
-:::
-
-:::note
-This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Updating to Ionic 6 Guide](./6-0) before starting this guide.
+This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
 :::
 
 :::info Breaking Changes

From 5af2a10e31674cde1c5376dc4528cf7b545c59c3 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 29 Mar 2023 16:13:25 -0400
Subject: [PATCH 285/469] docs(config): update v7 to latest version (#2862)

---
 docusaurus.config.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 260bea66bec..49504f64c4a 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -281,16 +281,10 @@ module.exports = {
           return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`;
         },
         exclude: ['README.md'],
-        lastVersion: 'v6',
+        lastVersion: 'current',
         versions: {
           current: {
-            label: 'v7 (beta)',
-            banner: 'unreleased',
-            path: 'v7',
-          },
-          v6: {
-            label: 'v6',
-            banner: 'none',
+            label: 'v7',
           },
         },
       },

From 6172dfa38450f358ac2efc2c838cd670812b7fff Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 29 Mar 2023 15:30:31 -0500
Subject: [PATCH 286/469] chore(many): update v7 playgrounds to point to Ionic
 7.0.0 (#2859)

---
 .../code/stackblitz/v7/angular/package.json   |   4 +-
 static/code/stackblitz/v7/html/index.html     |   4 +-
 .../stackblitz/v7/html/index.withContent.html |   4 +-
 static/code/stackblitz/v7/html/package.json   |   2 +-
 .../stackblitz/v7/react/package-lock.json     | 718 +++++++++---------
 static/code/stackblitz/v7/react/package.json  |   4 +-
 .../code/stackblitz/v7/vue/package-lock.json  | 108 +--
 static/code/stackblitz/v7/vue/package.json    |   4 +-
 .../accessibility/animations/demo.html        |   4 +-
 static/usage/v7/accordion/basic/demo.html     |   4 +-
 .../advanced-expansion-styles/demo.html       |   4 +-
 .../customization/expansion-styles/demo.html  |   4 +-
 .../accordion/customization/icons/demo.html   |   4 +-
 .../accordion/customization/theming/demo.html |   4 +-
 .../v7/accordion/disable-group/demo.html      |   4 +-
 .../v7/accordion/disable/group/demo.html      |   4 +-
 .../v7/accordion/disable/individual/demo.html |   4 +-
 .../v7/accordion/listen-changes/demo.html     |   4 +-
 static/usage/v7/accordion/multiple/demo.html  |   4 +-
 .../v7/accordion/readonly/group/demo.html     |   4 +-
 .../accordion/readonly/individual/demo.html   |   4 +-
 static/usage/v7/accordion/toggle/demo.html    |   4 +-
 .../v7/action-sheet/controller/demo.html      |   4 +-
 .../v7/action-sheet/inline/isOpen/demo.html   |   4 +-
 .../v7/action-sheet/inline/trigger/demo.html  |   4 +-
 .../role-info-on-dismiss/demo.html            |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 .../v7/action-sheet/theming/styling/demo.html |   4 +-
 static/usage/v7/alert/buttons/demo.html       |   4 +-
 static/usage/v7/alert/customization/demo.html |   4 +-
 static/usage/v7/alert/inputs/radios/demo.html |   4 +-
 .../v7/alert/inputs/text-inputs/demo.html     |   4 +-
 .../v7/alert/presenting/controller/demo.html  |   4 +-
 .../v7/alert/presenting/isOpen/demo.html      |   4 +-
 .../v7/alert/presenting/trigger/demo.html     |   4 +-
 static/usage/v7/avatar/basic/demo.html        |   4 +-
 static/usage/v7/avatar/chip/demo.html         |   4 +-
 static/usage/v7/avatar/item/demo.html         |   4 +-
 .../avatar/theming/css-properties/demo.html   |   4 +-
 static/usage/v7/back-button/basic/demo.html   |   4 +-
 static/usage/v7/back-button/custom/demo.html  |   4 +-
 static/usage/v7/backdrop/basic/demo.html      |   4 +-
 static/usage/v7/backdrop/styling/demo.html    |   4 +-
 static/usage/v7/badge/basic/demo.html         |   4 +-
 .../usage/v7/badge/theming/colors/demo.html   |   4 +-
 .../v7/badge/theming/css-properties/demo.html |   4 +-
 static/usage/v7/breadcrumbs/basic/demo.html   |   4 +-
 .../expand-on-click/demo.html                 |   4 +-
 .../items-before-after/demo.html              |   4 +-
 .../collapsing-items/max-items/demo.html      |   4 +-
 .../popover-on-click/demo.html                |   4 +-
 .../icons/custom-separators/demo.html         |   4 +-
 .../icons/icons-on-items/demo.html            |   4 +-
 .../v7/breadcrumbs/theming/colors/demo.html   |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 static/usage/v7/button/basic/demo.html        |   4 +-
 static/usage/v7/button/expand/demo.html       |   4 +-
 static/usage/v7/button/fill/demo.html         |   4 +-
 static/usage/v7/button/icons/demo.html        |   4 +-
 static/usage/v7/button/shape/demo.html        |   4 +-
 static/usage/v7/button/size/demo.html         |   4 +-
 .../usage/v7/button/theming/colors/demo.html  |   4 +-
 .../button/theming/css-properties/demo.html   |   4 +-
 static/usage/v7/buttons/basic/demo.html       |   4 +-
 static/usage/v7/buttons/placement/demo.html   |   4 +-
 static/usage/v7/buttons/types/demo.html       |   4 +-
 static/usage/v7/card/basic/demo.html          |   4 +-
 static/usage/v7/card/buttons/demo.html        |   4 +-
 static/usage/v7/card/list/demo.html           |   4 +-
 static/usage/v7/card/media/demo.html          |   4 +-
 static/usage/v7/card/theming/colors/demo.html |   4 +-
 .../v7/card/theming/css-properties/demo.html  |   4 +-
 static/usage/v7/checkbox/basic/demo.html      |   4 +-
 .../usage/v7/checkbox/indeterminate/demo.html |   4 +-
 static/usage/v7/checkbox/justify/demo.html    |   4 +-
 .../v7/checkbox/label-placement/demo.html     |   4 +-
 .../checkbox/theming/css-properties/demo.html |   4 +-
 static/usage/v7/chip/basic/demo.html          |   4 +-
 static/usage/v7/chip/slots/demo.html          |   4 +-
 static/usage/v7/chip/theming/colors/demo.html |   4 +-
 .../v7/chip/theming/css-properties/demo.html  |   4 +-
 static/usage/v7/content/basic/demo.html       |   4 +-
 static/usage/v7/content/fixed/demo.html       |   4 +-
 static/usage/v7/content/fullscreen/demo.html  |   4 +-
 .../usage/v7/content/header-footer/demo.html  |   4 +-
 .../usage/v7/content/scroll-events/demo.html  |   4 +-
 .../usage/v7/content/scroll-methods/demo.html |   4 +-
 .../usage/v7/content/theming/colors/demo.html |   4 +-
 .../content/theming/css-properties/demo.html  |   4 +-
 .../theming/css-shadow-parts/demo.html        |   4 +-
 .../usage/v7/datetime-button/basic/demo.html  |   4 +-
 static/usage/v7/datetime/basic/demo.html      |   4 +-
 .../customizing-button-texts/demo.html        |   4 +-
 .../buttons/customizing-buttons/demo.html     |   4 +-
 .../showing-confirmation-buttons/demo.html    |   4 +-
 .../date-constraints/advanced/demo.html       |   4 +-
 .../date-constraints/max-min/demo.html        |   4 +-
 .../date-constraints/values/demo.html         |   4 +-
 .../datetime/highlightedDates/array/demo.html |   4 +-
 .../highlightedDates/callback/demo.html       |   4 +-
 .../localization/custom-locale/demo.html      |   4 +-
 .../localization/first-day-of-week/demo.html  |   4 +-
 .../localization/hour-cycle/demo.html         |   4 +-
 .../locale-extension-tags/demo.html           |   4 +-
 .../localization/time-label/demo.html         |   4 +-
 static/usage/v7/datetime/multiple/demo.html   |   4 +-
 .../v7/datetime/presentation/date/demo.html   |   4 +-
 .../presentation/month-and-year/demo.html     |   4 +-
 .../v7/datetime/presentation/time/demo.html   |   4 +-
 .../v7/datetime/presentation/wheel/demo.html  |   4 +-
 static/usage/v7/datetime/theming/demo.html    |   4 +-
 .../title/customizing-title/demo.html         |   4 +-
 .../title/showing-default-title/demo.html     |   4 +-
 static/usage/v7/fab/basic/demo.html           |   4 +-
 static/usage/v7/fab/button-sizing/demo.html   |   4 +-
 static/usage/v7/fab/list-side/demo.html       |   4 +-
 static/usage/v7/fab/positioning/demo.html     |   4 +-
 static/usage/v7/fab/theming/colors/demo.html  |   4 +-
 .../theming/css-custom-properties/demo.html   |   4 +-
 .../v7/fab/theming/css-shadow-parts/demo.html |   4 +-
 static/usage/v7/footer/basic/demo.html        |   4 +-
 .../v7/footer/custom-scroll-target/demo.html  |   4 +-
 static/usage/v7/footer/fade/demo.html         |   4 +-
 static/usage/v7/footer/no-border/demo.html    |   4 +-
 static/usage/v7/footer/translucent/demo.html  |   4 +-
 static/usage/v7/grid/basic/demo.html          |   4 +-
 .../grid/customizing/column-number/demo.html  |   4 +-
 .../v7/grid/customizing/padding/demo.html     |   4 +-
 .../usage/v7/grid/customizing/width/demo.html |   4 +-
 static/usage/v7/grid/fixed/demo.html          |   4 +-
 .../v7/grid/horizontal-alignment/demo.html    |   4 +-
 .../usage/v7/grid/offset-responsive/demo.html |   4 +-
 static/usage/v7/grid/offset/demo.html         |   4 +-
 .../v7/grid/push-pull-responsive/demo.html    |   4 +-
 static/usage/v7/grid/push-pull/demo.html      |   4 +-
 static/usage/v7/grid/size-auto/demo.html      |   4 +-
 .../usage/v7/grid/size-responsive/demo.html   |   4 +-
 static/usage/v7/grid/size/demo.html           |   4 +-
 .../v7/grid/vertical-alignment/demo.html      |   4 +-
 static/usage/v7/header/basic/demo.html        |   4 +-
 static/usage/v7/header/condense/demo.html     |   4 +-
 .../v7/header/custom-scroll-target/demo.html  |   4 +-
 static/usage/v7/header/fade/demo.html         |   4 +-
 static/usage/v7/header/no-border/demo.html    |   4 +-
 static/usage/v7/header/translucent/demo.html  |   4 +-
 static/usage/v7/icon/basic/demo.html          |   4 +-
 static/usage/v7/img/basic/demo.html           |   4 +-
 .../usage/v7/infinite-scroll/basic/demo.html  |   4 +-
 .../custom-infinite-scroll-content/demo.html  |   4 +-
 .../infinite-scroll-content/demo.html         |   4 +-
 static/usage/v7/input/basic/demo.html         |   4 +-
 static/usage/v7/input/clear/demo.html         |   4 +-
 static/usage/v7/input/counter/demo.html       |   4 +-
 static/usage/v7/input/fill/demo.html          |   4 +-
 static/usage/v7/input/filtering/demo.html     |   4 +-
 static/usage/v7/input/helper-error/demo.html  |   4 +-
 .../usage/v7/input/label-placement/demo.html  |   4 +-
 .../usage/v7/input/theming/colors/demo.html   |   4 +-
 .../v7/input/theming/css-properties/demo.html |   4 +-
 static/usage/v7/input/types/demo.html         |   4 +-
 static/usage/v7/item-divider/basic/demo.html  |   4 +-
 .../v7/item-divider/theming/colors/demo.html  |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 static/usage/v7/item-group/basic/demo.html    |   4 +-
 .../v7/item-group/sliding-items/demo.html     |   4 +-
 static/usage/v7/item-sliding/basic/demo.html  |   4 +-
 .../v7/item-sliding/expandable/demo.html      |   4 +-
 static/usage/v7/item-sliding/icons/demo.html  |   4 +-
 static/usage/v7/item/basic/demo.html          |   4 +-
 static/usage/v7/item/buttons/demo.html        |   4 +-
 static/usage/v7/item/clickable/demo.html      |   4 +-
 static/usage/v7/item/detail-arrows/demo.html  |   4 +-
 static/usage/v7/item/icons/demo.html          |   4 +-
 static/usage/v7/item/inputs/demo.html         |   4 +-
 static/usage/v7/item/lines/demo.html          |   4 +-
 static/usage/v7/item/media/demo.html          |   4 +-
 static/usage/v7/item/theming/colors/demo.html |   4 +-
 .../v7/item/theming/css-properties/demo.html  |   4 +-
 .../item/theming/css-shadow-parts/demo.html   |   4 +-
 .../v7/item/theming/input-highlight/demo.html |   4 +-
 static/usage/v7/label/basic/demo.html         |   4 +-
 static/usage/v7/label/input/demo.html         |   4 +-
 static/usage/v7/label/item/demo.html          |   4 +-
 .../usage/v7/label/theming/colors/demo.html   |   4 +-
 static/usage/v7/list-header/basic/demo.html   |   4 +-
 static/usage/v7/list-header/buttons/demo.html |   4 +-
 static/usage/v7/list-header/lines/demo.html   |   4 +-
 .../v7/list-header/theming/colors/demo.html   |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 static/usage/v7/list/basic/demo.html          |   4 +-
 static/usage/v7/list/inset/demo.html          |   4 +-
 static/usage/v7/list/lines/demo.html          |   4 +-
 static/usage/v7/loading/controller/demo.html  |   6 +-
 static/usage/v7/loading/inline/demo.html      |   4 +-
 static/usage/v7/loading/spinners/demo.html    |   4 +-
 static/usage/v7/loading/theming/demo.html     |   6 +-
 static/usage/v7/menu/basic/demo.html          |   4 +-
 static/usage/v7/menu/theming/demo.html        |   4 +-
 static/usage/v7/menu/toggle/demo.html         |   4 +-
 static/usage/v7/menu/type/demo.html           |   4 +-
 .../v7/modal/can-dismiss/boolean/demo.html    |   4 +-
 .../v7/modal/can-dismiss/function/demo.html   |   4 +-
 .../prevent-swipe-to-close/demo.html          |   4 +-
 static/usage/v7/modal/card/basic/demo.html    |   4 +-
 static/usage/v7/modal/controller/demo.html    |   6 +-
 .../usage/v7/modal/custom-dialogs/demo.html   |   6 +-
 static/usage/v7/modal/inline/basic/demo.html  |   4 +-
 .../usage/v7/modal/inline/is-open/demo.html   |   4 +-
 .../v7/modal/performance/mount/demo.html      |   4 +-
 .../modal/sheet/background-content/demo.html  |   4 +-
 static/usage/v7/modal/sheet/basic/demo.html   |   4 +-
 .../v7/modal/sheet/handle-behavior/demo.html  |   4 +-
 .../v7/modal/styling/animations/demo.html     |   6 +-
 .../usage/v7/modal/styling/theming/demo.html  |   4 +-
 .../usage/v7/nav/modal-navigation/demo.html   |   4 +-
 static/usage/v7/nav/nav-link/demo.html        |   4 +-
 static/usage/v7/note/basic/demo.html          |   4 +-
 static/usage/v7/note/item/demo.html           |   4 +-
 static/usage/v7/note/theming/colors/demo.html |   4 +-
 .../v7/note/theming/css-properties/demo.html  |   4 +-
 static/usage/v7/picker/controller/demo.html   |   6 +-
 .../usage/v7/picker/inline/isOpen/demo.html   |   4 +-
 .../usage/v7/picker/inline/trigger/demo.html  |   4 +-
 .../usage/v7/picker/multiple-column/demo.html |   4 +-
 .../customization/positioning/demo.html       |   4 +-
 .../v7/popover/customization/sizing/demo.html |   4 +-
 .../popover/customization/styling/demo.html   |   4 +-
 static/usage/v7/popover/nested/demo.html      |   4 +-
 .../v7/popover/performance/mount/demo.html    |   4 +-
 .../popover/presenting/controller/demo.html   |   4 +-
 .../presenting/inline-isopen/demo.html        |   4 +-
 .../presenting/inline-trigger/demo.html       |   4 +-
 static/usage/v7/progress-bar/buffer/demo.html |   4 +-
 .../v7/progress-bar/determinate/demo.html     |   4 +-
 .../v7/progress-bar/indeterminate/demo.html   |   4 +-
 .../v7/progress-bar/theming/colors/demo.html  |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 .../theming/css-shadow-parts/demo.html        |   4 +-
 static/usage/v7/radio/basic/demo.html         |   4 +-
 .../usage/v7/radio/empty-selection/demo.html  |   4 +-
 static/usage/v7/radio/justify/demo.html       |   4 +-
 .../usage/v7/radio/label-placement/demo.html  |   4 +-
 .../usage/v7/radio/theming/colors/demo.html   |   4 +-
 .../v7/radio/theming/css-properties/demo.html |   4 +-
 .../radio/theming/css-shadow-parts/demo.html  |   4 +-
 static/usage/v7/range/basic/demo.html         |   4 +-
 static/usage/v7/range/dual-knobs/demo.html    |   4 +-
 .../usage/v7/range/ion-change-event/demo.html |   4 +-
 .../v7/range/ion-knob-move-event/demo.html    |   4 +-
 static/usage/v7/range/labels/demo.html        |   4 +-
 static/usage/v7/range/pins/demo.html          |   4 +-
 static/usage/v7/range/slots/demo.html         |   4 +-
 .../usage/v7/range/snapping-ticks/demo.html   |   4 +-
 .../v7/range/theming/css-properties/demo.html |   4 +-
 .../range/theming/css-shadow-parts/demo.html  |   4 +-
 static/usage/v7/refresher/advanced/demo.html  |   4 +-
 static/usage/v7/refresher/basic/demo.html     |   4 +-
 .../v7/refresher/custom-content/demo.html     |   4 +-
 .../refresher/custom-scroll-target/demo.html  |   4 +-
 .../v7/refresher/pull-properties/demo.html    |   4 +-
 static/usage/v7/reorder/basic/demo.html       |   4 +-
 static/usage/v7/reorder/custom-icon/demo.html |   4 +-
 .../v7/reorder/custom-scroll-target/demo.html |   4 +-
 .../v7/reorder/toggling-disabled/demo.html    |   4 +-
 .../usage/v7/reorder/updating-data/demo.html  |   4 +-
 static/usage/v7/reorder/wrapper/demo.html     |   4 +-
 static/usage/v7/ripple-effect/basic/demo.html |   4 +-
 .../v7/ripple-effect/customizing/demo.html    |   4 +-
 static/usage/v7/ripple-effect/type/demo.html  |   4 +-
 static/usage/v7/router/basic/demo.html        |   4 +-
 static/usage/v7/searchbar/basic/demo.html     |   4 +-
 .../v7/searchbar/cancel-button/demo.html      |   4 +-
 .../usage/v7/searchbar/clear-button/demo.html |   4 +-
 static/usage/v7/searchbar/debounce/demo.html  |   4 +-
 .../usage/v7/searchbar/search-icon/demo.html  |   4 +-
 .../v7/searchbar/theming/colors/demo.html     |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 .../usage/v7/segment-button/basic/demo.html   |   4 +-
 .../usage/v7/segment-button/layout/demo.html  |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 .../theming/css-shadow-parts/demo.html        |   4 +-
 static/usage/v7/segment/basic/demo.html       |   4 +-
 static/usage/v7/segment/scrollable/demo.html  |   4 +-
 .../usage/v7/segment/theming/colors/demo.html |   4 +-
 .../segment/theming/css-properties/demo.html  |   4 +-
 .../select/basic/multiple-selection/demo.html |   4 +-
 .../basic/responding-to-interaction/demo.html |   4 +-
 .../select/basic/single-selection/demo.html   |   4 +-
 .../customization/button-text/demo.html       |   4 +-
 .../customization/interface-options/demo.html |   4 +-
 .../customization/styling-select/demo.html    |   4 +-
 static/usage/v7/select/fill/demo.html         |   4 +-
 .../select/interfaces/action-sheet/demo.html  |   4 +-
 .../v7/select/interfaces/popover/demo.html    |   4 +-
 static/usage/v7/select/justify/demo.html      |   4 +-
 .../usage/v7/select/label-placement/demo.html |   4 +-
 .../multiple-selection/demo.html              |   4 +-
 .../using-comparewith/demo.html               |   4 +-
 static/usage/v7/select/typeahead/demo.html    |   4 +-
 static/usage/v7/skeleton-text/basic/demo.html |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 static/usage/v7/spinner/basic/demo.html       |   4 +-
 .../usage/v7/spinner/theming/colors/demo.html |   4 +-
 .../spinner/theming/css-properties/demo.html  |   4 +-
 static/usage/v7/split-pane/basic/demo.html    |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 static/usage/v7/tabs/router/demo.html         |   6 +-
 static/usage/v7/text/basic/demo.html          |   4 +-
 static/usage/v7/textarea/autogrow/demo.html   |   4 +-
 static/usage/v7/textarea/basic/demo.html      |   4 +-
 .../usage/v7/textarea/clear-on-edit/demo.html |   4 +-
 static/usage/v7/textarea/counter/demo.html    |   4 +-
 static/usage/v7/textarea/fill/demo.html       |   4 +-
 .../usage/v7/textarea/helper-error/demo.html  |   4 +-
 .../v7/textarea/label-placement/demo.html     |   4 +-
 static/usage/v7/textarea/theming/demo.html    |   4 +-
 static/usage/v7/thumbnail/basic/demo.html     |   4 +-
 static/usage/v7/thumbnail/item/demo.html      |   4 +-
 .../theming/css-properties/demo.html          |   4 +-
 static/usage/v7/title/basic/demo.html         |   4 +-
 .../collapsible-large-title/basic/demo.html   |   4 +-
 .../collapsible-large-title/buttons/demo.html |   4 +-
 .../v7/title/theming/css-properties/demo.html |   4 +-
 static/usage/v7/toast/buttons/demo.html       |   4 +-
 static/usage/v7/toast/icon/demo.html          |   4 +-
 static/usage/v7/toast/inline/basic/demo.html  |   4 +-
 .../usage/v7/toast/inline/is-open/demo.html   |   4 +-
 static/usage/v7/toast/layout/demo.html        |   4 +-
 .../v7/toast/presenting/controller/demo.html  |   6 +-
 static/usage/v7/toast/theming/demo.html       |   4 +-
 static/usage/v7/toggle/basic/demo.html        |   4 +-
 static/usage/v7/toggle/justify/demo.html      |   4 +-
 .../usage/v7/toggle/label-placement/demo.html |   4 +-
 static/usage/v7/toggle/list/demo.html         |   4 +-
 static/usage/v7/toggle/on-off/demo.html       |   4 +-
 .../usage/v7/toggle/theming/colors/demo.html  |   4 +-
 .../toggle/theming/css-properties/demo.html   |   4 +-
 .../toggle/theming/css-shadow-parts/demo.html |   4 +-
 static/usage/v7/toolbar/basic/demo.html       |   4 +-
 static/usage/v7/toolbar/buttons/demo.html     |   4 +-
 .../usage/v7/toolbar/progress-bars/demo.html  |   4 +-
 static/usage/v7/toolbar/searchbars/demo.html  |   4 +-
 static/usage/v7/toolbar/segments/demo.html    |   4 +-
 .../usage/v7/toolbar/theming/colors/demo.html |   4 +-
 .../toolbar/theming/css-properties/demo.html  |   4 +-
 345 files changed, 1117 insertions(+), 1095 deletions(-)

diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index a36950cee72..66f368834db 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/angular": "^7.0.0-beta.0",
-    "@ionic/core": "^7.0.0-beta.0"
+    "@ionic/angular": "^7.0.0",
+    "@ionic/core": "^7.0.0"
   }
 }
diff --git a/static/code/stackblitz/v7/html/index.html b/static/code/stackblitz/v7/html/index.html
index 1e612d923a0..a521ed9844e 100644
--- a/static/code/stackblitz/v7/html/index.html
+++ b/static/code/stackblitz/v7/html/index.html
@@ -1,8 +1,8 @@
 <html>
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/ionic.bundle.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
 
   <script>
     window.Ionic = {
diff --git a/static/code/stackblitz/v7/html/index.withContent.html b/static/code/stackblitz/v7/html/index.withContent.html
index 4bcde74921d..a5efecac81d 100644
--- a/static/code/stackblitz/v7/html/index.withContent.html
+++ b/static/code/stackblitz/v7/html/index.withContent.html
@@ -1,8 +1,8 @@
 <html>
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/ionic.bundle.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
 
   <script>
     window.Ionic = {
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
index 28444a19687..7583138334d 100644
--- a/static/code/stackblitz/v7/html/package.json
+++ b/static/code/stackblitz/v7/html/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "^7.0.0-beta.0"
+    "@ionic/core": "^7.0.0"
   }
 }
diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index 42af39cf1ba..ba6c7a69c04 100644
--- a/static/code/stackblitz/v7/react/package-lock.json
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -8,8 +8,8 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^7.0.0-beta.0",
-        "@ionic/react-router": "^7.0.0-beta.0",
+        "@ionic/react": "^7.0.0",
+        "@ionic/react-router": "^7.0.0",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -2165,6 +2165,21 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/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/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2195,6 +2210,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/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/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -2237,22 +2257,22 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
+      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
       "dependencies": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.1",
+        "@stencil/core": "^3.1.0",
+        "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-KOj5UVLeRp62u6lsIuMD+YRzcSsEbCxs03ZR9zsg95lcAfcAtacjDZwQmzDDLl9C6nB331h7nXE61yR3Hy/JGQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0.tgz",
+      "integrity": "sha512-t9NlHZTiH/NvT3GLcO4yS5Whe9stpsZ9AtNOYS+aPcKM5vhxJSFGXDUvKtABOLi2CniW2kFE8krHwjz9V0GQYA==",
       "dependencies": {
-        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
-        "ionicons": "^6.1.1",
+        "@ionic/core": "7.0.0",
+        "ionicons": "^7.0.0",
         "tslib": "*"
       },
       "peerDependencies": {
@@ -2261,11 +2281,11 @@
       }
     },
     "node_modules/@ionic/react-router": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-IUkvnLvvqhVHNcEvA+kxkujR6+UArnOK4HUje7QBw18XPtUv53APkhS7HNRqteVYP7Qjcbqw6boDD2oiuzdqmw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0.tgz",
+      "integrity": "sha512-rlYWI9Rh8lk3STZ38J7AGx0wnCHYpLg7Ocoxjsvxyuif5PEqQlzZyu0UN9IWVyEMctZEZ2cN0CLayBVaOCMYuA==",
       "dependencies": {
-        "@ionic/react": "7.0.0-dev.11675196564.12c5f9a0",
+        "@ionic/react": "7.0.0",
         "tslib": "*"
       },
       "peerDependencies": {
@@ -3217,14 +3237,14 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
-      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
       "engines": {
-        "node": ">=12.10.0",
+        "node": ">=14.10.0",
         "npm": ">=6.0.0"
       }
     },
@@ -4273,13 +4293,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -4303,34 +4323,6 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "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",
@@ -4693,6 +4685,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/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/babel-loader/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/babel-loader/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/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -5647,21 +5667,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "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",
@@ -5673,11 +5678,6 @@
         "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",
@@ -7009,21 +7009,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "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",
@@ -7056,11 +7041,6 @@
         "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",
@@ -7093,6 +7073,21 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/eslint/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/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -7187,6 +7182,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/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/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7691,6 +7691,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/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/fork-ts-checker-webpack-plugin/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/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",
@@ -7773,6 +7796,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/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/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",
@@ -8611,13 +8639,25 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
-      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
     },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.22.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+      "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==",
+      "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",
@@ -11170,9 +11210,9 @@
       "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=="
+      "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/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -11539,21 +11579,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "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",
@@ -11565,11 +11590,6 @@
         "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",
@@ -14521,6 +14541,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/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/schema-utils/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/schema-utils/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/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -15962,21 +16010,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "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",
@@ -15988,11 +16021,6 @@
         "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",
@@ -16065,21 +16093,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "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",
@@ -16091,11 +16104,6 @@
         "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",
@@ -16399,21 +16407,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "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",
@@ -16428,11 +16421,6 @@
         "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",
@@ -18130,12 +18118,14 @@
     "@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=="
+      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
+      "requires": {}
     },
     "@csstools/selector-specificity": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz",
-      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw=="
+      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
+      "requires": {}
     },
     "@eslint/eslintrc": {
       "version": "1.4.1",
@@ -18153,6 +18143,17 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "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"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -18174,6 +18175,11 @@
             "argparse": "^2.0.1"
           }
         },
+        "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=="
+        },
         "type-fest": {
           "version": "0.20.2",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -18202,31 +18208,31 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
+      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
       "requires": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.1",
+        "@stencil/core": "^3.1.0",
+        "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/react": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-KOj5UVLeRp62u6lsIuMD+YRzcSsEbCxs03ZR9zsg95lcAfcAtacjDZwQmzDDLl9C6nB331h7nXE61yR3Hy/JGQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0.tgz",
+      "integrity": "sha512-t9NlHZTiH/NvT3GLcO4yS5Whe9stpsZ9AtNOYS+aPcKM5vhxJSFGXDUvKtABOLi2CniW2kFE8krHwjz9V0GQYA==",
       "requires": {
-        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
-        "ionicons": "^6.1.1",
+        "@ionic/core": "7.0.0",
+        "ionicons": "^7.0.0",
         "tslib": "*"
       }
     },
     "@ionic/react-router": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-IUkvnLvvqhVHNcEvA+kxkujR6+UArnOK4HUje7QBw18XPtUv53APkhS7HNRqteVYP7Qjcbqw6boDD2oiuzdqmw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0.tgz",
+      "integrity": "sha512-rlYWI9Rh8lk3STZ38J7AGx0wnCHYpLg7Ocoxjsvxyuif5PEqQlzZyu0UN9IWVyEMctZEZ2cN0CLayBVaOCMYuA==",
       "requires": {
-        "@ionic/react": "7.0.0-dev.11675196564.12c5f9a0",
+        "@ionic/react": "7.0.0",
         "tslib": "*"
       }
     },
@@ -18914,9 +18920,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
-      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
@@ -19669,12 +19675,14 @@
     "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=="
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "requires": {}
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -19721,13 +19729,13 @@
       }
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
     },
@@ -19737,31 +19745,8 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "requires": {
         "ajv": "^8.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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",
@@ -20013,6 +19998,28 @@
         "schema-utils": "^2.6.5"
       },
       "dependencies": {
+        "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-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "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=="
+        },
         "schema-utils": {
           "version": "2.7.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -20061,7 +20068,8 @@
     "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=="
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
+      "requires": {}
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
@@ -20669,7 +20677,8 @@
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
-      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
+      "requires": {}
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -20707,17 +20716,6 @@
         "source-map": "^0.6.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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",
@@ -20726,11 +20724,6 @@
             "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",
@@ -20752,7 +20745,8 @@
     "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=="
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
+      "requires": {}
     },
     "css-select": {
       "version": "4.3.0",
@@ -20851,7 +20845,8 @@
     "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=="
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -21462,6 +21457,17 @@
         "text-table": "^0.2.0"
       },
       "dependencies": {
+        "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"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -21523,6 +21529,11 @@
             "argparse": "^2.0.1"
           }
         },
+        "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=="
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -21739,7 +21750,8 @@
     "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=="
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "requires": {}
     },
     "eslint-plugin-testing-library": {
       "version": "5.10.0",
@@ -21790,17 +21802,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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",
@@ -21824,11 +21825,6 @@
             "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",
@@ -22213,6 +22209,23 @@
         "tapable": "^1.0.0"
       },
       "dependencies": {
+        "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-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -22271,6 +22284,11 @@
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
+        "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=="
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -22789,7 +22807,8 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "requires": {}
     },
     "idb": {
       "version": "7.1.1",
@@ -22874,11 +22893,18 @@
       }
     },
     "ionicons": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
-      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
       "requires": {
         "@stencil/core": "^2.18.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "2.22.3",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+          "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
+        }
       }
     },
     "ipaddr.js": {
@@ -23884,7 +23910,8 @@
     "jest-pnp-resolver": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
-      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w=="
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -24712,9 +24739,9 @@
       "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=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -24987,17 +25014,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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",
@@ -25006,11 +25022,6 @@
             "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",
@@ -25540,7 +25551,8 @@
     "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=="
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
+      "requires": {}
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -25638,22 +25650,26 @@
     "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=="
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "requires": {}
     },
     "postcss-double-position-gradients": {
       "version": "3.1.2",
@@ -25675,7 +25691,8 @@
     "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=="
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
+      "requires": {}
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -25696,12 +25713,14 @@
     "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=="
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -25724,7 +25743,8 @@
     "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=="
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
+      "requires": {}
     },
     "postcss-js": {
       "version": "4.0.0",
@@ -25765,12 +25785,14 @@
     "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=="
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
+      "requires": {}
     },
     "postcss-merge-longhand": {
       "version": "5.1.7",
@@ -25831,7 +25853,8 @@
     "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=="
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -25889,7 +25912,8 @@
     "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=="
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -25960,7 +25984,8 @@
     "postcss-opacity-percentage": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz",
-      "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A=="
+      "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==",
+      "requires": {}
     },
     "postcss-ordered-values": {
       "version": "5.1.3",
@@ -25982,7 +26007,8 @@
     "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=="
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.5",
@@ -26076,7 +26102,8 @@
     "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=="
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "6.0.1",
@@ -26921,6 +26948,30 @@
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
         "ajv-keywords": "^3.5.2"
+      },
+      "dependencies": {
+        "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-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "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=="
+        }
       }
     },
     "select-hose": {
@@ -27367,7 +27418,8 @@
     "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=="
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "requires": {}
     },
     "stylehacks": {
       "version": "5.1.1",
@@ -28040,17 +28092,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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",
@@ -28059,11 +28100,6 @@
             "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",
@@ -28113,17 +28149,6 @@
         "ws": "^8.4.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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",
@@ -28132,11 +28157,6 @@
             "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",
@@ -28151,7 +28171,8 @@
         "ws": {
           "version": "8.12.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
-          "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig=="
+          "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
+          "requires": {}
         }
       }
     },
@@ -28348,17 +28369,6 @@
         "workbox-window": "6.5.4"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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",
@@ -28370,11 +28380,6 @@
             "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",
@@ -28599,7 +28604,8 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index e9de0f9e74c..9f04dd76f41 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "^7.0.0-beta.0",
-    "@ionic/react-router": "^7.0.0-beta.0",
+    "@ionic/react": "^7.0.0",
+    "@ionic/react-router": "^7.0.0",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index 86dd203fe4f..28186aee5ff 100644
--- a/static/code/stackblitz/v7/vue/package-lock.json
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -8,8 +8,8 @@
       "name": "vite-vue-starter",
       "version": "0.0.0",
       "dependencies": {
-        "@ionic/vue": "^7.0.0-beta.0",
-        "@ionic/vue-router": "^7.0.0-beta.0",
+        "@ionic/vue": "^7.0.0",
+        "@ionic/vue-router": "^7.0.0",
         "vue": "^3.2.25",
         "vue-router": "4.0.13"
       },
@@ -48,41 +48,41 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
+      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
       "dependencies": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.1",
+        "@stencil/core": "^3.1.0",
+        "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-qqFXv/u4Wv2IkxAWXrDSpAED303Oac+vVz3c7eycOQtPbggrp+BjX71aNYBzkXyJ4CAObROvsOciFx4uvsggNQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0.tgz",
+      "integrity": "sha512-bikmbUm59EIciZS/Xdm3dhcoeg3PpoiFHl5YsgaydgiZccV7Hu9y7n5zT1ydIPYnJryb2gRaNQ4N8O4JvDll8w==",
       "dependencies": {
-        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
-        "ionicons": "^6.1.1"
+        "@ionic/core": "7.0.0",
+        "ionicons": "^7.0.0"
       }
     },
     "node_modules/@ionic/vue-router": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-+Jlupnerwstdc233L18BFnxlYuBpFjY20tUGrM8ua9eHuK1zI1rByFbACLcrxJBZhBKX7RmDJhNQxkFsOKGiZw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0.tgz",
+      "integrity": "sha512-OFm1lRFQ2rkrjdtjWBsUfsRa6b/FZ+1jez8gLfS2z/nM8yw5MFW7vnfPWgLHBGwWtQ++6MYpiSkybc7XQk4Kbw==",
       "dependencies": {
-        "@ionic/vue": "7.0.0-dev.11675196564.12c5f9a0"
+        "@ionic/vue": "7.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
-      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
       "engines": {
-        "node": ">=12.10.0",
+        "node": ">=14.10.0",
         "npm": ">=6.0.0"
       }
     },
@@ -646,13 +646,25 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
-      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
     },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.22.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+      "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
@@ -895,42 +907,43 @@
       "optional": true
     },
     "@ionic/core": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-KXVl0xPslPSisKjeWDVOojxteYyIQZdXxGgHN5N0zhovVEdqPrx2Na40QWzd0oyn5Jl3kAIdicOaCIyDyJ09Fw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
+      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
       "requires": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.1",
+        "@stencil/core": "^3.1.0",
+        "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/vue": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-qqFXv/u4Wv2IkxAWXrDSpAED303Oac+vVz3c7eycOQtPbggrp+BjX71aNYBzkXyJ4CAObROvsOciFx4uvsggNQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0.tgz",
+      "integrity": "sha512-bikmbUm59EIciZS/Xdm3dhcoeg3PpoiFHl5YsgaydgiZccV7Hu9y7n5zT1ydIPYnJryb2gRaNQ4N8O4JvDll8w==",
       "requires": {
-        "@ionic/core": "7.0.0-dev.11675196564.12c5f9a0",
-        "ionicons": "^6.1.1"
+        "@ionic/core": "7.0.0",
+        "ionicons": "^7.0.0"
       }
     },
     "@ionic/vue-router": {
-      "version": "7.0.0-dev.11675196564.12c5f9a0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0-dev.11675196564.12c5f9a0.tgz",
-      "integrity": "sha512-+Jlupnerwstdc233L18BFnxlYuBpFjY20tUGrM8ua9eHuK1zI1rByFbACLcrxJBZhBKX7RmDJhNQxkFsOKGiZw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0.tgz",
+      "integrity": "sha512-OFm1lRFQ2rkrjdtjWBsUfsRa6b/FZ+1jez8gLfS2z/nM8yw5MFW7vnfPWgLHBGwWtQ++6MYpiSkybc7XQk4Kbw==",
       "requires": {
-        "@ionic/vue": "7.0.0-dev.11675196564.12c5f9a0"
+        "@ionic/vue": "7.0.0"
       }
     },
     "@stencil/core": {
-      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.2.tgz",
-      "integrity": "sha512-r+vbxsGNcBaV1VDOYW25lv4QfXTlNoIb5GpUX7rZ+cr59yqYCZC5tlV+IzX6YgHKW62ulCc9M3RYtTfHtNbNNw=="
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ=="
     },
     "@vitejs/plugin-vue": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
       "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@volar/code-gen": {
       "version": "0.34.17",
@@ -1279,11 +1292,18 @@
       }
     },
     "ionicons": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
-      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
       "requires": {
         "@stencil/core": "^2.18.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "2.22.3",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+          "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
+        }
       }
     },
     "is-core-module": {
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index 665033eb5a1..b8f118f3bcd 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "^7.0.0-beta.0",
-    "@ionic/vue-router": "^7.0.0-beta.0",
+    "@ionic/vue": "^7.0.0",
+    "@ionic/vue-router": "^7.0.0",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
diff --git a/static/usage/v7/accordion/accessibility/animations/demo.html b/static/usage/v7/accordion/accessibility/animations/demo.html
index 6ce674bb64b..3fdee04e4f7 100644
--- a/static/usage/v7/accordion/accessibility/animations/demo.html
+++ b/static/usage/v7/accordion/accessibility/animations/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/basic/demo.html b/static/usage/v7/accordion/basic/demo.html
index ae833b5f61d..6ccc994401f 100644
--- a/static/usage/v7/accordion/basic/demo.html
+++ b/static/usage/v7/accordion/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
index 2e78783b984..8a56e9557f2 100644
--- a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-accordion {
       margin: 0 auto;
diff --git a/static/usage/v7/accordion/customization/expansion-styles/demo.html b/static/usage/v7/accordion/customization/expansion-styles/demo.html
index f445c54ac11..77756cc378e 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/demo.html
+++ b/static/usage/v7/accordion/customization/expansion-styles/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/customization/icons/demo.html b/static/usage/v7/accordion/customization/icons/demo.html
index b4f7385876a..38d70177e4d 100644
--- a/static/usage/v7/accordion/customization/icons/demo.html
+++ b/static/usage/v7/accordion/customization/icons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/customization/theming/demo.html b/static/usage/v7/accordion/customization/theming/demo.html
index 9b771545a49..0a520db4e1d 100644
--- a/static/usage/v7/accordion/customization/theming/demo.html
+++ b/static/usage/v7/accordion/customization/theming/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     :root {
       --ion-color-rose: #fecdd3;
diff --git a/static/usage/v7/accordion/disable-group/demo.html b/static/usage/v7/accordion/disable-group/demo.html
index bbe38628365..245af23f3fd 100644
--- a/static/usage/v7/accordion/disable-group/demo.html
+++ b/static/usage/v7/accordion/disable-group/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/disable/group/demo.html b/static/usage/v7/accordion/disable/group/demo.html
index 357470c9cb2..b5331cef469 100644
--- a/static/usage/v7/accordion/disable/group/demo.html
+++ b/static/usage/v7/accordion/disable/group/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/disable/individual/demo.html b/static/usage/v7/accordion/disable/individual/demo.html
index 33d7caf6f65..b7446872d54 100644
--- a/static/usage/v7/accordion/disable/individual/demo.html
+++ b/static/usage/v7/accordion/disable/individual/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html
index 986aba59eb6..dd5269e0834 100644
--- a/static/usage/v7/accordion/listen-changes/demo.html
+++ b/static/usage/v7/accordion/listen-changes/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .container {
       flex-direction: column;
diff --git a/static/usage/v7/accordion/multiple/demo.html b/static/usage/v7/accordion/multiple/demo.html
index d7dbbfae658..01068461446 100644
--- a/static/usage/v7/accordion/multiple/demo.html
+++ b/static/usage/v7/accordion/multiple/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/readonly/group/demo.html b/static/usage/v7/accordion/readonly/group/demo.html
index 7b67c1ce83c..3ddabf35042 100644
--- a/static/usage/v7/accordion/readonly/group/demo.html
+++ b/static/usage/v7/accordion/readonly/group/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/readonly/individual/demo.html b/static/usage/v7/accordion/readonly/individual/demo.html
index 65b7efbc355..d8adf8fa10c 100644
--- a/static/usage/v7/accordion/readonly/individual/demo.html
+++ b/static/usage/v7/accordion/readonly/individual/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/accordion/toggle/demo.html b/static/usage/v7/accordion/toggle/demo.html
index d230e1e35e0..d58cf36bcfd 100644
--- a/static/usage/v7/accordion/toggle/demo.html
+++ b/static/usage/v7/accordion/toggle/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .container {
       flex-direction: column;
diff --git a/static/usage/v7/action-sheet/controller/demo.html b/static/usage/v7/action-sheet/controller/demo.html
index c3e407fa1f9..a4635ade676 100644
--- a/static/usage/v7/action-sheet/controller/demo.html
+++ b/static/usage/v7/action-sheet/controller/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/action-sheet/inline/isOpen/demo.html b/static/usage/v7/action-sheet/inline/isOpen/demo.html
index 6bfbc3ebb9e..d39cb7d670e 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/demo.html
+++ b/static/usage/v7/action-sheet/inline/isOpen/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/action-sheet/inline/trigger/demo.html b/static/usage/v7/action-sheet/inline/trigger/demo.html
index 6c6b6c0b91c..e7d0e43b07e 100644
--- a/static/usage/v7/action-sheet/inline/trigger/demo.html
+++ b/static/usage/v7/action-sheet/inline/trigger/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
index ec13be6f6a5..d8775124a89 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/action-sheet/theming/css-properties/demo.html b/static/usage/v7/action-sheet/theming/css-properties/demo.html
index 7d4f02e92e6..fd3a274c25b 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/demo.html
+++ b/static/usage/v7/action-sheet/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-action-sheet.my-custom-class {
diff --git a/static/usage/v7/action-sheet/theming/styling/demo.html b/static/usage/v7/action-sheet/theming/styling/demo.html
index f67bf3b8906..d3bafd2b68e 100644
--- a/static/usage/v7/action-sheet/theming/styling/demo.html
+++ b/static/usage/v7/action-sheet/theming/styling/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-action-sheet.my-custom-class .action-sheet-group {
diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html
index 8d60d9d2324..e679f8d6c98 100644
--- a/static/usage/v7/alert/buttons/demo.html
+++ b/static/usage/v7/alert/buttons/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/alert/customization/demo.html b/static/usage/v7/alert/customization/demo.html
index 78ab38ce7b3..2e8fa7043a8 100644
--- a/static/usage/v7/alert/customization/demo.html
+++ b/static/usage/v7/alert/customization/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-alert.custom-alert {
diff --git a/static/usage/v7/alert/inputs/radios/demo.html b/static/usage/v7/alert/inputs/radios/demo.html
index 0428ce98f22..3f9b171d413 100644
--- a/static/usage/v7/alert/inputs/radios/demo.html
+++ b/static/usage/v7/alert/inputs/radios/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/alert/inputs/text-inputs/demo.html b/static/usage/v7/alert/inputs/text-inputs/demo.html
index f60e3f2e887..0b63be2a826 100644
--- a/static/usage/v7/alert/inputs/text-inputs/demo.html
+++ b/static/usage/v7/alert/inputs/text-inputs/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/alert/presenting/controller/demo.html b/static/usage/v7/alert/presenting/controller/demo.html
index fed8c84f369..f461595624f 100644
--- a/static/usage/v7/alert/presenting/controller/demo.html
+++ b/static/usage/v7/alert/presenting/controller/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/alert/presenting/isOpen/demo.html b/static/usage/v7/alert/presenting/isOpen/demo.html
index a995ff78e35..e3c8ee20f0b 100644
--- a/static/usage/v7/alert/presenting/isOpen/demo.html
+++ b/static/usage/v7/alert/presenting/isOpen/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/alert/presenting/trigger/demo.html b/static/usage/v7/alert/presenting/trigger/demo.html
index a19fd9514f3..572514716f4 100644
--- a/static/usage/v7/alert/presenting/trigger/demo.html
+++ b/static/usage/v7/alert/presenting/trigger/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/avatar/basic/demo.html b/static/usage/v7/avatar/basic/demo.html
index 46fbedfd2d3..64fa695c703 100644
--- a/static/usage/v7/avatar/basic/demo.html
+++ b/static/usage/v7/avatar/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/avatar/chip/demo.html b/static/usage/v7/avatar/chip/demo.html
index d06475bb40f..dc15f9a616b 100644
--- a/static/usage/v7/avatar/chip/demo.html
+++ b/static/usage/v7/avatar/chip/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/avatar/item/demo.html b/static/usage/v7/avatar/item/demo.html
index d51279cdb34..3061c23751d 100644
--- a/static/usage/v7/avatar/item/demo.html
+++ b/static/usage/v7/avatar/item/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/avatar/theming/css-properties/demo.html b/static/usage/v7/avatar/theming/css-properties/demo.html
index 3419617edfa..ca9c814a75e 100644
--- a/static/usage/v7/avatar/theming/css-properties/demo.html
+++ b/static/usage/v7/avatar/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-avatar {
diff --git a/static/usage/v7/back-button/basic/demo.html b/static/usage/v7/back-button/basic/demo.html
index d2eb786b4b8..89b2e87535c 100644
--- a/static/usage/v7/back-button/basic/demo.html
+++ b/static/usage/v7/back-button/basic/demo.html
@@ -7,8 +7,8 @@
   <title>Back Button</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/back-button/custom/demo.html b/static/usage/v7/back-button/custom/demo.html
index c2c7c6ce8f2..750cb8ef168 100644
--- a/static/usage/v7/back-button/custom/demo.html
+++ b/static/usage/v7/back-button/custom/demo.html
@@ -7,8 +7,8 @@
   <title>Back Button</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html
index ed5a79768e8..5bdc07959c9 100644
--- a/static/usage/v7/backdrop/basic/demo.html
+++ b/static/usage/v7/backdrop/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/backdrop/styling/demo.html b/static/usage/v7/backdrop/styling/demo.html
index 8b28987c937..1dce05e6c37 100644
--- a/static/usage/v7/backdrop/styling/demo.html
+++ b/static/usage/v7/backdrop/styling/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-backdrop {
       opacity: 0.9;
diff --git a/static/usage/v7/badge/basic/demo.html b/static/usage/v7/badge/basic/demo.html
index a560f74b87b..8a6514b89b7 100644
--- a/static/usage/v7/badge/basic/demo.html
+++ b/static/usage/v7/badge/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/badge/theming/colors/demo.html b/static/usage/v7/badge/theming/colors/demo.html
index a81103de32b..b7eaef9a56f 100644
--- a/static/usage/v7/badge/theming/colors/demo.html
+++ b/static/usage/v7/badge/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/badge/theming/css-properties/demo.html b/static/usage/v7/badge/theming/css-properties/demo.html
index f942c2d83e6..870b2604c56 100644
--- a/static/usage/v7/badge/theming/css-properties/demo.html
+++ b/static/usage/v7/badge/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/breadcrumbs/basic/demo.html b/static/usage/v7/breadcrumbs/basic/demo.html
index f230752bad0..53cb2009b23 100644
--- a/static/usage/v7/breadcrumbs/basic/demo.html
+++ b/static/usage/v7/breadcrumbs/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
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
index a6977cb29bf..eede9901f26 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
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
index 96d8ae72cd0..755824f0ece 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
index 6b2ac36c51c..dd665060960 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
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
index fdeba83b336..97a8d83827f 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
index a6db3ad12c6..845ab797ec0 100644
--- a/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
index 1a1a9adbe3f..65c2fc84713 100644
--- a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/breadcrumbs/theming/colors/demo.html b/static/usage/v7/breadcrumbs/theming/colors/demo.html
index 3746b4ad79d..1734d9dad7c 100644
--- a/static/usage/v7/breadcrumbs/theming/colors/demo.html
+++ b/static/usage/v7/breadcrumbs/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/demo.html b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
index 9c888d5344d..342106810c0 100644
--- a/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-breadcrumb {
diff --git a/static/usage/v7/button/basic/demo.html b/static/usage/v7/button/basic/demo.html
index 2302dbff2ba..19481e4a0c9 100644
--- a/static/usage/v7/button/basic/demo.html
+++ b/static/usage/v7/button/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/button/expand/demo.html b/static/usage/v7/button/expand/demo.html
index 90421eefaf3..d636c653713 100644
--- a/static/usage/v7/button/expand/demo.html
+++ b/static/usage/v7/button/expand/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/button/fill/demo.html b/static/usage/v7/button/fill/demo.html
index 6e405f68b24..651fe0853e6 100644
--- a/static/usage/v7/button/fill/demo.html
+++ b/static/usage/v7/button/fill/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/button/icons/demo.html b/static/usage/v7/button/icons/demo.html
index e3594ca1f83..4cf763ae93b 100644
--- a/static/usage/v7/button/icons/demo.html
+++ b/static/usage/v7/button/icons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/button/shape/demo.html b/static/usage/v7/button/shape/demo.html
index 7cedc61e4c7..5d87ac91cbe 100644
--- a/static/usage/v7/button/shape/demo.html
+++ b/static/usage/v7/button/shape/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/button/size/demo.html b/static/usage/v7/button/size/demo.html
index 4aba9947d6e..1a86485233a 100644
--- a/static/usage/v7/button/size/demo.html
+++ b/static/usage/v7/button/size/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/button/theming/colors/demo.html b/static/usage/v7/button/theming/colors/demo.html
index 9be8d6d0f8b..f5363dbfc4e 100644
--- a/static/usage/v7/button/theming/colors/demo.html
+++ b/static/usage/v7/button/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/button/theming/css-properties/demo.html b/static/usage/v7/button/theming/css-properties/demo.html
index 9fd0e65c096..d3508c26436 100644
--- a/static/usage/v7/button/theming/css-properties/demo.html
+++ b/static/usage/v7/button/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-button {
diff --git a/static/usage/v7/buttons/basic/demo.html b/static/usage/v7/buttons/basic/demo.html
index f74d9eb0eca..e66ffdfaa3a 100644
--- a/static/usage/v7/buttons/basic/demo.html
+++ b/static/usage/v7/buttons/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/buttons/placement/demo.html b/static/usage/v7/buttons/placement/demo.html
index 2c51099331c..34c1f5504f2 100644
--- a/static/usage/v7/buttons/placement/demo.html
+++ b/static/usage/v7/buttons/placement/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/buttons/types/demo.html b/static/usage/v7/buttons/types/demo.html
index 46288e45f1a..38924b0ddc5 100644
--- a/static/usage/v7/buttons/types/demo.html
+++ b/static/usage/v7/buttons/types/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/card/basic/demo.html b/static/usage/v7/card/basic/demo.html
index 329c4a3ce34..2c94d6d3b6f 100644
--- a/static/usage/v7/card/basic/demo.html
+++ b/static/usage/v7/card/basic/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/card/buttons/demo.html b/static/usage/v7/card/buttons/demo.html
index 0e5d5317575..f80f67a1cbd 100644
--- a/static/usage/v7/card/buttons/demo.html
+++ b/static/usage/v7/card/buttons/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/card/list/demo.html b/static/usage/v7/card/list/demo.html
index a74d6923707..c0dfd617f91 100644
--- a/static/usage/v7/card/list/demo.html
+++ b/static/usage/v7/card/list/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/card/media/demo.html b/static/usage/v7/card/media/demo.html
index 3af6c687963..a375172a45f 100644
--- a/static/usage/v7/card/media/demo.html
+++ b/static/usage/v7/card/media/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/card/theming/colors/demo.html b/static/usage/v7/card/theming/colors/demo.html
index c9cf360ea42..934d55754d3 100644
--- a/static/usage/v7/card/theming/colors/demo.html
+++ b/static/usage/v7/card/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/card/theming/css-properties/demo.html b/static/usage/v7/card/theming/css-properties/demo.html
index 140ca8f1e1c..142e99dba71 100644
--- a/static/usage/v7/card/theming/css-properties/demo.html
+++ b/static/usage/v7/card/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/checkbox/basic/demo.html b/static/usage/v7/checkbox/basic/demo.html
index a32e3504db1..746ac8f75fe 100644
--- a/static/usage/v7/checkbox/basic/demo.html
+++ b/static/usage/v7/checkbox/basic/demo.html
@@ -7,8 +7,8 @@
   <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@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/checkbox/indeterminate/demo.html b/static/usage/v7/checkbox/indeterminate/demo.html
index 84c30d8d9aa..d04574e0499 100644
--- a/static/usage/v7/checkbox/indeterminate/demo.html
+++ b/static/usage/v7/checkbox/indeterminate/demo.html
@@ -7,8 +7,8 @@
   <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@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/checkbox/justify/demo.html b/static/usage/v7/checkbox/justify/demo.html
index 7ebeb15fdf4..06f66515f71 100644
--- a/static/usage/v7/checkbox/justify/demo.html
+++ b/static/usage/v7/checkbox/justify/demo.html
@@ -7,8 +7,8 @@
   <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@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html
index 2adee164de5..eb11903d1eb 100644
--- a/static/usage/v7/checkbox/label-placement/demo.html
+++ b/static/usage/v7/checkbox/label-placement/demo.html
@@ -7,8 +7,8 @@
   <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@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/checkbox/theming/css-properties/demo.html b/static/usage/v7/checkbox/theming/css-properties/demo.html
index 706088a1d31..63c8660d87d 100644
--- a/static/usage/v7/checkbox/theming/css-properties/demo.html
+++ b/static/usage/v7/checkbox/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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@7.0.0-beta.1/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7.0.0-beta.1/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-checkbox {
       --size: 32px;
diff --git a/static/usage/v7/chip/basic/demo.html b/static/usage/v7/chip/basic/demo.html
index df4c6569a13..7bdbe50277e 100644
--- a/static/usage/v7/chip/basic/demo.html
+++ b/static/usage/v7/chip/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/chip/slots/demo.html b/static/usage/v7/chip/slots/demo.html
index bbf70b2e82f..428f38a56b3 100644
--- a/static/usage/v7/chip/slots/demo.html
+++ b/static/usage/v7/chip/slots/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/chip/theming/colors/demo.html b/static/usage/v7/chip/theming/colors/demo.html
index ecdbe97a047..f037cfb4eb3 100644
--- a/static/usage/v7/chip/theming/colors/demo.html
+++ b/static/usage/v7/chip/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .flex-items {
diff --git a/static/usage/v7/chip/theming/css-properties/demo.html b/static/usage/v7/chip/theming/css-properties/demo.html
index b0621dace2d..3310b65a8cb 100644
--- a/static/usage/v7/chip/theming/css-properties/demo.html
+++ b/static/usage/v7/chip/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-chip {
diff --git a/static/usage/v7/content/basic/demo.html b/static/usage/v7/content/basic/demo.html
index 14dbe3f5e7d..c5aca89699d 100644
--- a/static/usage/v7/content/basic/demo.html
+++ b/static/usage/v7/content/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/content/fixed/demo.html b/static/usage/v7/content/fixed/demo.html
index 9ea56f755e2..7503103ea39 100644
--- a/static/usage/v7/content/fixed/demo.html
+++ b/static/usage/v7/content/fixed/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-button[slot="fixed"] {
diff --git a/static/usage/v7/content/fullscreen/demo.html b/static/usage/v7/content/fullscreen/demo.html
index 9bf752950d5..ff8431d4b08 100644
--- a/static/usage/v7/content/fullscreen/demo.html
+++ b/static/usage/v7/content/fullscreen/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-toolbar {
diff --git a/static/usage/v7/content/header-footer/demo.html b/static/usage/v7/content/header-footer/demo.html
index 0a39f7a5fa8..c94bb1f5b30 100644
--- a/static/usage/v7/content/header-footer/demo.html
+++ b/static/usage/v7/content/header-footer/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/content/scroll-events/demo.html b/static/usage/v7/content/scroll-events/demo.html
index 1db71ff8972..7688ad4afbc 100644
--- a/static/usage/v7/content/scroll-events/demo.html
+++ b/static/usage/v7/content/scroll-events/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/content/scroll-methods/demo.html b/static/usage/v7/content/scroll-methods/demo.html
index c72c5300ff5..3b864d3e980 100644
--- a/static/usage/v7/content/scroll-methods/demo.html
+++ b/static/usage/v7/content/scroll-methods/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/content/theming/colors/demo.html b/static/usage/v7/content/theming/colors/demo.html
index 7e9409ec13e..bdf97b549bb 100644
--- a/static/usage/v7/content/theming/colors/demo.html
+++ b/static/usage/v7/content/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/content/theming/css-properties/demo.html b/static/usage/v7/content/theming/css-properties/demo.html
index aeab8bee49b..c9bfa0dfdc6 100644
--- a/static/usage/v7/content/theming/css-properties/demo.html
+++ b/static/usage/v7/content/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     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
index 9b15b01757d..3bc6859c66f 100644
--- a/static/usage/v7/content/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/content/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-content::part(background) {
diff --git a/static/usage/v7/datetime-button/basic/demo.html b/static/usage/v7/datetime-button/basic/demo.html
index 73f3f9b1ab7..1e7cce74cae 100644
--- a/static/usage/v7/datetime-button/basic/demo.html
+++ b/static/usage/v7/datetime-button/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-modal {
       --border-radius: 8px;
diff --git a/static/usage/v7/datetime/basic/demo.html b/static/usage/v7/datetime/basic/demo.html
index 1e12e6d24fb..9d58e952ed0 100644
--- a/static/usage/v7/datetime/basic/demo.html
+++ b/static/usage/v7/datetime/basic/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
index 44074047aca..b0a5a405fe7 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
index d0ce780da3d..5d82337b791 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
index 54b26b53f90..4a50281c218 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/date-constraints/advanced/demo.html b/static/usage/v7/datetime/date-constraints/advanced/demo.html
index b7650f3740d..5f85f08fd26 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/demo.html
+++ b/static/usage/v7/datetime/date-constraints/advanced/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/date-constraints/max-min/demo.html b/static/usage/v7/datetime/date-constraints/max-min/demo.html
index b1f9e57810d..6965a74db91 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/demo.html
+++ b/static/usage/v7/datetime/date-constraints/max-min/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/date-constraints/values/demo.html b/static/usage/v7/datetime/date-constraints/values/demo.html
index ba560da4969..3c341df059f 100644
--- a/static/usage/v7/datetime/date-constraints/values/demo.html
+++ b/static/usage/v7/datetime/date-constraints/values/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
index d8faeba5b8b..428678d3dbe 100644
--- a/static/usage/v7/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/array/demo.html
@@ -7,8 +7,8 @@
   <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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html
index 50c62e09c5f..af82c083c02 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html
@@ -7,8 +7,8 @@
   <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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/localization/custom-locale/demo.html b/static/usage/v7/datetime/localization/custom-locale/demo.html
index 70e266f3402..dada357f09c 100644
--- a/static/usage/v7/datetime/localization/custom-locale/demo.html
+++ b/static/usage/v7/datetime/localization/custom-locale/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
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
index ce555ed4b74..d1ad1198d0c 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/demo.html
+++ b/static/usage/v7/datetime/localization/first-day-of-week/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/localization/hour-cycle/demo.html b/static/usage/v7/datetime/localization/hour-cycle/demo.html
index db65b072c82..08b5da3eb6a 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/demo.html
+++ b/static/usage/v7/datetime/localization/hour-cycle/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
index 6d7328eddf6..6e68e123b55 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/localization/time-label/demo.html b/static/usage/v7/datetime/localization/time-label/demo.html
index 8ad93461f78..3e7d56c00b3 100644
--- a/static/usage/v7/datetime/localization/time-label/demo.html
+++ b/static/usage/v7/datetime/localization/time-label/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/multiple/demo.html b/static/usage/v7/datetime/multiple/demo.html
index 43edb188016..20aea12dbe5 100644
--- a/static/usage/v7/datetime/multiple/demo.html
+++ b/static/usage/v7/datetime/multiple/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/presentation/date/demo.html b/static/usage/v7/datetime/presentation/date/demo.html
index ca76bcec306..17d9f95fe97 100644
--- a/static/usage/v7/datetime/presentation/date/demo.html
+++ b/static/usage/v7/datetime/presentation/date/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/presentation/month-and-year/demo.html b/static/usage/v7/datetime/presentation/month-and-year/demo.html
index 58fa960c863..2ea2e639089 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/demo.html
+++ b/static/usage/v7/datetime/presentation/month-and-year/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/presentation/time/demo.html b/static/usage/v7/datetime/presentation/time/demo.html
index 7ea21d3f4d5..506c15adb83 100644
--- a/static/usage/v7/datetime/presentation/time/demo.html
+++ b/static/usage/v7/datetime/presentation/time/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/presentation/wheel/demo.html b/static/usage/v7/datetime/presentation/wheel/demo.html
index 5b2028d4a6b..704c463874d 100644
--- a/static/usage/v7/datetime/presentation/wheel/demo.html
+++ b/static/usage/v7/datetime/presentation/wheel/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/theming/demo.html
index e50a5576c63..f78309fe0b5 100644
--- a/static/usage/v7/datetime/theming/demo.html
+++ b/static/usage/v7/datetime/theming/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     :root,
     .ios body.dark,
diff --git a/static/usage/v7/datetime/title/customizing-title/demo.html b/static/usage/v7/datetime/title/customizing-title/demo.html
index ab7ead5aca6..c8818884ed2 100644
--- a/static/usage/v7/datetime/title/customizing-title/demo.html
+++ b/static/usage/v7/datetime/title/customizing-title/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/datetime/title/showing-default-title/demo.html b/static/usage/v7/datetime/title/showing-default-title/demo.html
index 3d725f9eb92..64138302db2 100644
--- a/static/usage/v7/datetime/title/showing-default-title/demo.html
+++ b/static/usage/v7/datetime/title/showing-default-title/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
diff --git a/static/usage/v7/fab/basic/demo.html b/static/usage/v7/fab/basic/demo.html
index bf3ddf18220..3581f6e15da 100644
--- a/static/usage/v7/fab/basic/demo.html
+++ b/static/usage/v7/fab/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/fab/button-sizing/demo.html b/static/usage/v7/fab/button-sizing/demo.html
index e3595399219..486331c856d 100644
--- a/static/usage/v7/fab/button-sizing/demo.html
+++ b/static/usage/v7/fab/button-sizing/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/fab/list-side/demo.html b/static/usage/v7/fab/list-side/demo.html
index 2b24622135a..ce22e5462a5 100644
--- a/static/usage/v7/fab/list-side/demo.html
+++ b/static/usage/v7/fab/list-side/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/fab/positioning/demo.html b/static/usage/v7/fab/positioning/demo.html
index bb00b1cfdc4..4c741044b04 100644
--- a/static/usage/v7/fab/positioning/demo.html
+++ b/static/usage/v7/fab/positioning/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/fab/theming/colors/demo.html b/static/usage/v7/fab/theming/colors/demo.html
index 7f1b059484c..d07b1d7fc7b 100644
--- a/static/usage/v7/fab/theming/colors/demo.html
+++ b/static/usage/v7/fab/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/fab/theming/css-custom-properties/demo.html b/static/usage/v7/fab/theming/css-custom-properties/demo.html
index 90b398450b3..f921890486c 100644
--- a/static/usage/v7/fab/theming/css-custom-properties/demo.html
+++ b/static/usage/v7/fab/theming/css-custom-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-fab-button {
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/demo.html b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
index 40c416ab32c..c56ea30c714 100644
--- a/static/usage/v7/fab/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-fab-button::part(native) {
diff --git a/static/usage/v7/footer/basic/demo.html b/static/usage/v7/footer/basic/demo.html
index 205a6543d4b..8716a5a4736 100644
--- a/static/usage/v7/footer/basic/demo.html
+++ b/static/usage/v7/footer/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/footer/custom-scroll-target/demo.html b/static/usage/v7/footer/custom-scroll-target/demo.html
index f9349b02086..1db37f90065 100644
--- a/static/usage/v7/footer/custom-scroll-target/demo.html
+++ b/static/usage/v7/footer/custom-scroll-target/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .ion-content-scroll-host {
diff --git a/static/usage/v7/footer/fade/demo.html b/static/usage/v7/footer/fade/demo.html
index 75ed07ea1bf..19ef77d93a1 100644
--- a/static/usage/v7/footer/fade/demo.html
+++ b/static/usage/v7/footer/fade/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/footer/no-border/demo.html b/static/usage/v7/footer/no-border/demo.html
index 8050b2a7bcd..e0c34f1841c 100644
--- a/static/usage/v7/footer/no-border/demo.html
+++ b/static/usage/v7/footer/no-border/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/footer/translucent/demo.html b/static/usage/v7/footer/translucent/demo.html
index b04fd24bddc..9449c00c072 100644
--- a/static/usage/v7/footer/translucent/demo.html
+++ b/static/usage/v7/footer/translucent/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/grid/basic/demo.html b/static/usage/v7/grid/basic/demo.html
index 36ef496f817..4343eb0c54b 100644
--- a/static/usage/v7/grid/basic/demo.html
+++ b/static/usage/v7/grid/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/customizing/column-number/demo.html b/static/usage/v7/grid/customizing/column-number/demo.html
index ee0550437e5..0d8f098eeda 100644
--- a/static/usage/v7/grid/customizing/column-number/demo.html
+++ b/static/usage/v7/grid/customizing/column-number/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/customizing/padding/demo.html b/static/usage/v7/grid/customizing/padding/demo.html
index 38dae06af73..c56798590b8 100644
--- a/static/usage/v7/grid/customizing/padding/demo.html
+++ b/static/usage/v7/grid/customizing/padding/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/customizing/width/demo.html b/static/usage/v7/grid/customizing/width/demo.html
index 09527dca430..ec5302b1be7 100644
--- a/static/usage/v7/grid/customizing/width/demo.html
+++ b/static/usage/v7/grid/customizing/width/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/fixed/demo.html b/static/usage/v7/grid/fixed/demo.html
index 9dcc3781d7c..f9181e05e1b 100644
--- a/static/usage/v7/grid/fixed/demo.html
+++ b/static/usage/v7/grid/fixed/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/horizontal-alignment/demo.html b/static/usage/v7/grid/horizontal-alignment/demo.html
index 2960357e81e..ed5e66eef84 100644
--- a/static/usage/v7/grid/horizontal-alignment/demo.html
+++ b/static/usage/v7/grid/horizontal-alignment/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/offset-responsive/demo.html b/static/usage/v7/grid/offset-responsive/demo.html
index 07c5cdca37b..b100572eb92 100644
--- a/static/usage/v7/grid/offset-responsive/demo.html
+++ b/static/usage/v7/grid/offset-responsive/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/offset/demo.html b/static/usage/v7/grid/offset/demo.html
index 876e4f9acf1..f465321f61b 100644
--- a/static/usage/v7/grid/offset/demo.html
+++ b/static/usage/v7/grid/offset/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/push-pull-responsive/demo.html b/static/usage/v7/grid/push-pull-responsive/demo.html
index aa956b2c1b0..924f47f862f 100644
--- a/static/usage/v7/grid/push-pull-responsive/demo.html
+++ b/static/usage/v7/grid/push-pull-responsive/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/push-pull/demo.html b/static/usage/v7/grid/push-pull/demo.html
index b34be1bb39d..32baee94430 100644
--- a/static/usage/v7/grid/push-pull/demo.html
+++ b/static/usage/v7/grid/push-pull/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/size-auto/demo.html b/static/usage/v7/grid/size-auto/demo.html
index 364d5db3c9a..d5c5bcc80f9 100644
--- a/static/usage/v7/grid/size-auto/demo.html
+++ b/static/usage/v7/grid/size-auto/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/size-responsive/demo.html b/static/usage/v7/grid/size-responsive/demo.html
index 9176b7070a6..77592878d13 100644
--- a/static/usage/v7/grid/size-responsive/demo.html
+++ b/static/usage/v7/grid/size-responsive/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/size/demo.html b/static/usage/v7/grid/size/demo.html
index 4d16f74065e..127f2285643 100644
--- a/static/usage/v7/grid/size/demo.html
+++ b/static/usage/v7/grid/size/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/grid/vertical-alignment/demo.html b/static/usage/v7/grid/vertical-alignment/demo.html
index dd1388fcdbf..6831dd6faef 100644
--- a/static/usage/v7/grid/vertical-alignment/demo.html
+++ b/static/usage/v7/grid/vertical-alignment/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/header/basic/demo.html b/static/usage/v7/header/basic/demo.html
index a6752caddb9..ef36c88c176 100644
--- a/static/usage/v7/header/basic/demo.html
+++ b/static/usage/v7/header/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/header/condense/demo.html b/static/usage/v7/header/condense/demo.html
index caed21b4dcd..bbfd48664aa 100644
--- a/static/usage/v7/header/condense/demo.html
+++ b/static/usage/v7/header/condense/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/header/custom-scroll-target/demo.html b/static/usage/v7/header/custom-scroll-target/demo.html
index 337bd2ece48..4c56d609f51 100644
--- a/static/usage/v7/header/custom-scroll-target/demo.html
+++ b/static/usage/v7/header/custom-scroll-target/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .ion-content-scroll-host {
diff --git a/static/usage/v7/header/fade/demo.html b/static/usage/v7/header/fade/demo.html
index 06b24cc2eb4..08c9859a796 100644
--- a/static/usage/v7/header/fade/demo.html
+++ b/static/usage/v7/header/fade/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/header/no-border/demo.html b/static/usage/v7/header/no-border/demo.html
index 9e8356fe253..8f671bb39f2 100644
--- a/static/usage/v7/header/no-border/demo.html
+++ b/static/usage/v7/header/no-border/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/header/translucent/demo.html b/static/usage/v7/header/translucent/demo.html
index bea9d3ecba1..4d9332e1047 100644
--- a/static/usage/v7/header/translucent/demo.html
+++ b/static/usage/v7/header/translucent/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/icon/basic/demo.html b/static/usage/v7/icon/basic/demo.html
index f2284770ab9..841eecd5bae 100644
--- a/static/usage/v7/icon/basic/demo.html
+++ b/static/usage/v7/icon/basic/demo.html
@@ -7,8 +7,8 @@
   <title>Icon</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/img/basic/demo.html b/static/usage/v7/img/basic/demo.html
index 63f7703963c..46c58790131 100644
--- a/static/usage/v7/img/basic/demo.html
+++ b/static/usage/v7/img/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-img {
diff --git a/static/usage/v7/infinite-scroll/basic/demo.html b/static/usage/v7/infinite-scroll/basic/demo.html
index ea12f54b686..d9a9aa8a765 100644
--- a/static/usage/v7/infinite-scroll/basic/demo.html
+++ b/static/usage/v7/infinite-scroll/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
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
index b56e952cfe7..84ea18af65a 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     svg {
       width: 20px;
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
index 46016207432..d7848616e34 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/input/basic/demo.html b/static/usage/v7/input/basic/demo.html
index c510bdbe5f5..84ee93d2ba5 100644
--- a/static/usage/v7/input/basic/demo.html
+++ b/static/usage/v7/input/basic/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/clear/demo.html b/static/usage/v7/input/clear/demo.html
index 59d730c0e5c..90c0083be5e 100644
--- a/static/usage/v7/input/clear/demo.html
+++ b/static/usage/v7/input/clear/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/counter/demo.html b/static/usage/v7/input/counter/demo.html
index 33a28913204..05e11d1b739 100644
--- a/static/usage/v7/input/counter/demo.html
+++ b/static/usage/v7/input/counter/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
index ff6c1d146bf..43ca4194ff3 100644
--- a/static/usage/v7/input/fill/demo.html
+++ b/static/usage/v7/input/fill/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/filtering/demo.html b/static/usage/v7/input/filtering/demo.html
index f7a4c1b3aa7..e915340712d 100644
--- a/static/usage/v7/input/filtering/demo.html
+++ b/static/usage/v7/input/filtering/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
index 1a5bf5440d3..6cc21cf8492 100644
--- a/static/usage/v7/input/helper-error/demo.html
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .container ion-input {
       width: 300px;
diff --git a/static/usage/v7/input/label-placement/demo.html b/static/usage/v7/input/label-placement/demo.html
index fae6d6ff849..ca7f2ff1d65 100644
--- a/static/usage/v7/input/label-placement/demo.html
+++ b/static/usage/v7/input/label-placement/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/input/theming/colors/demo.html b/static/usage/v7/input/theming/colors/demo.html
index 379dbae3746..3723e443ae0 100644
--- a/static/usage/v7/input/theming/colors/demo.html
+++ b/static/usage/v7/input/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
index f8e8df8f8fa..5cd06f9e4a0 100644
--- a/static/usage/v7/input/theming/css-properties/demo.html
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html
index e38f604302d..68b043daa52 100644
--- a/static/usage/v7/input/types/demo.html
+++ b/static/usage/v7/input/types/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/item-divider/basic/demo.html b/static/usage/v7/item-divider/basic/demo.html
index d99c52d65af..c1159861489 100644
--- a/static/usage/v7/item-divider/basic/demo.html
+++ b/static/usage/v7/item-divider/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item-divider/theming/colors/demo.html b/static/usage/v7/item-divider/theming/colors/demo.html
index 354ab9096e8..c48614ce69d 100644
--- a/static/usage/v7/item-divider/theming/colors/demo.html
+++ b/static/usage/v7/item-divider/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item-divider/theming/css-properties/demo.html b/static/usage/v7/item-divider/theming/css-properties/demo.html
index 9223767446d..44d9d92e0ec 100644
--- a/static/usage/v7/item-divider/theming/css-properties/demo.html
+++ b/static/usage/v7/item-divider/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-item-divider {
diff --git a/static/usage/v7/item-group/basic/demo.html b/static/usage/v7/item-group/basic/demo.html
index eaf062c371d..e46bc1a8cef 100644
--- a/static/usage/v7/item-group/basic/demo.html
+++ b/static/usage/v7/item-group/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item-group/sliding-items/demo.html b/static/usage/v7/item-group/sliding-items/demo.html
index 87c87870df4..7994b575b79 100644
--- a/static/usage/v7/item-group/sliding-items/demo.html
+++ b/static/usage/v7/item-group/sliding-items/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item-sliding/basic/demo.html b/static/usage/v7/item-sliding/basic/demo.html
index 00e4bc82f99..f0b445d8063 100644
--- a/static/usage/v7/item-sliding/basic/demo.html
+++ b/static/usage/v7/item-sliding/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item-sliding/expandable/demo.html b/static/usage/v7/item-sliding/expandable/demo.html
index bfdb1ef5884..5f8534da2f6 100644
--- a/static/usage/v7/item-sliding/expandable/demo.html
+++ b/static/usage/v7/item-sliding/expandable/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item-sliding/icons/demo.html b/static/usage/v7/item-sliding/icons/demo.html
index 6bc01e42837..b2cc8b3c100 100644
--- a/static/usage/v7/item-sliding/icons/demo.html
+++ b/static/usage/v7/item-sliding/icons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/basic/demo.html b/static/usage/v7/item/basic/demo.html
index 55e5fe17a30..337645b0eac 100644
--- a/static/usage/v7/item/basic/demo.html
+++ b/static/usage/v7/item/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/buttons/demo.html b/static/usage/v7/item/buttons/demo.html
index 08847fb4fff..219d9b30ea4 100644
--- a/static/usage/v7/item/buttons/demo.html
+++ b/static/usage/v7/item/buttons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/clickable/demo.html b/static/usage/v7/item/clickable/demo.html
index 189cbffbd35..8d77b13c541 100644
--- a/static/usage/v7/item/clickable/demo.html
+++ b/static/usage/v7/item/clickable/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/detail-arrows/demo.html b/static/usage/v7/item/detail-arrows/demo.html
index 1cc1c907045..07aa3e65bc7 100644
--- a/static/usage/v7/item/detail-arrows/demo.html
+++ b/static/usage/v7/item/detail-arrows/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/icons/demo.html b/static/usage/v7/item/icons/demo.html
index 6cbd9d1b2a9..2fa9068224f 100644
--- a/static/usage/v7/item/icons/demo.html
+++ b/static/usage/v7/item/icons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
index 4ab92196b2e..94c2309b3e9 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/item/inputs/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/lines/demo.html b/static/usage/v7/item/lines/demo.html
index 79cb3ce7933..8d273b1d037 100644
--- a/static/usage/v7/item/lines/demo.html
+++ b/static/usage/v7/item/lines/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/media/demo.html b/static/usage/v7/item/media/demo.html
index 451c5d6eaf1..201ee60d906 100644
--- a/static/usage/v7/item/media/demo.html
+++ b/static/usage/v7/item/media/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/theming/colors/demo.html b/static/usage/v7/item/theming/colors/demo.html
index fbd225c988b..606fb8e829e 100644
--- a/static/usage/v7/item/theming/colors/demo.html
+++ b/static/usage/v7/item/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/theming/css-properties/demo.html b/static/usage/v7/item/theming/css-properties/demo.html
index c255a677199..a5dba2f3187 100644
--- a/static/usage/v7/item/theming/css-properties/demo.html
+++ b/static/usage/v7/item/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/theming/css-shadow-parts/demo.html b/static/usage/v7/item/theming/css-shadow-parts/demo.html
index 132c0900cb8..a05b86c294f 100644
--- a/static/usage/v7/item/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/item/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html
index 2094539141e..88073d0e422 100644
--- a/static/usage/v7/item/theming/input-highlight/demo.html
+++ b/static/usage/v7/item/theming/input-highlight/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/label/basic/demo.html b/static/usage/v7/label/basic/demo.html
index a6bad98959e..6e1a59b37bd 100644
--- a/static/usage/v7/label/basic/demo.html
+++ b/static/usage/v7/label/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html
index d43bb5ba712..673f3cb7f84 100644
--- a/static/usage/v7/label/input/demo.html
+++ b/static/usage/v7/label/input/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/label/item/demo.html b/static/usage/v7/label/item/demo.html
index 67dbf234345..77791e5db37 100644
--- a/static/usage/v7/label/item/demo.html
+++ b/static/usage/v7/label/item/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/label/theming/colors/demo.html b/static/usage/v7/label/theming/colors/demo.html
index 3444d3c2da9..ed2b8069d9c 100644
--- a/static/usage/v7/label/theming/colors/demo.html
+++ b/static/usage/v7/label/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-label {
diff --git a/static/usage/v7/list-header/basic/demo.html b/static/usage/v7/list-header/basic/demo.html
index dae3477fac9..848d0422f07 100644
--- a/static/usage/v7/list-header/basic/demo.html
+++ b/static/usage/v7/list-header/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/list-header/buttons/demo.html b/static/usage/v7/list-header/buttons/demo.html
index 19ecb87a9a2..5689e35d157 100644
--- a/static/usage/v7/list-header/buttons/demo.html
+++ b/static/usage/v7/list-header/buttons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/list-header/lines/demo.html b/static/usage/v7/list-header/lines/demo.html
index dad3ebc17cb..12904d120c5 100644
--- a/static/usage/v7/list-header/lines/demo.html
+++ b/static/usage/v7/list-header/lines/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/list-header/theming/colors/demo.html b/static/usage/v7/list-header/theming/colors/demo.html
index fa36d9b0a9a..9f2b1c01745 100644
--- a/static/usage/v7/list-header/theming/colors/demo.html
+++ b/static/usage/v7/list-header/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/list-header/theming/css-properties/demo.html b/static/usage/v7/list-header/theming/css-properties/demo.html
index 133c2d8f994..6aad9464229 100644
--- a/static/usage/v7/list-header/theming/css-properties/demo.html
+++ b/static/usage/v7/list-header/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list-header {
diff --git a/static/usage/v7/list/basic/demo.html b/static/usage/v7/list/basic/demo.html
index 86ed4981f63..6189885bce9 100644
--- a/static/usage/v7/list/basic/demo.html
+++ b/static/usage/v7/list/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/list/inset/demo.html b/static/usage/v7/list/inset/demo.html
index b2cbacc4e11..eb342ccc056 100644
--- a/static/usage/v7/list/inset/demo.html
+++ b/static/usage/v7/list/inset/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-content {
diff --git a/static/usage/v7/list/lines/demo.html b/static/usage/v7/list/lines/demo.html
index 259465266e1..55b1190b9fb 100644
--- a/static/usage/v7/list/lines/demo.html
+++ b/static/usage/v7/list/lines/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/loading/controller/demo.html b/static/usage/v7/loading/controller/demo.html
index 9a3385f7307..eeb6f187b0a 100644
--- a/static/usage/v7/loading/controller/demo.html
+++ b/static/usage/v7/loading/controller/demo.html
@@ -7,10 +7,10 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <script type="module">
-    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
     window.loadingController = loadingController;
   </script>
 </head>
diff --git a/static/usage/v7/loading/inline/demo.html b/static/usage/v7/loading/inline/demo.html
index ca6869bf5cf..47d572b18d0 100644
--- a/static/usage/v7/loading/inline/demo.html
+++ b/static/usage/v7/loading/inline/demo.html
@@ -7,8 +7,8 @@
   <title>Loading</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/loading/spinners/demo.html b/static/usage/v7/loading/spinners/demo.html
index 8bf40c93809..a54c53cdb67 100644
--- a/static/usage/v7/loading/spinners/demo.html
+++ b/static/usage/v7/loading/spinners/demo.html
@@ -7,8 +7,8 @@
   <title>Loading</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/loading/theming/demo.html b/static/usage/v7/loading/theming/demo.html
index 8e8a1daa3fe..868f0964c21 100644
--- a/static/usage/v7/loading/theming/demo.html
+++ b/static/usage/v7/loading/theming/demo.html
@@ -7,10 +7,10 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <script type="module">
-    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/index.esm.js';
+    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
     window.loadingController = loadingController;
   </script>
   <style>
diff --git a/static/usage/v7/menu/basic/demo.html b/static/usage/v7/menu/basic/demo.html
index 83f3f3ac7c4..5aef69baa92 100644
--- a/static/usage/v7/menu/basic/demo.html
+++ b/static/usage/v7/menu/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/menu/theming/demo.html b/static/usage/v7/menu/theming/demo.html
index e3d7c78a20f..5b665efff50 100644
--- a/static/usage/v7/menu/theming/demo.html
+++ b/static/usage/v7/menu/theming/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-menu::part(backdrop) {
       background-color: rgba(255, 0, 255, 0.5);
diff --git a/static/usage/v7/menu/toggle/demo.html b/static/usage/v7/menu/toggle/demo.html
index 6a760b44aa3..f101eb3ea4d 100644
--- a/static/usage/v7/menu/toggle/demo.html
+++ b/static/usage/v7/menu/toggle/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/menu/type/demo.html b/static/usage/v7/menu/type/demo.html
index 7dbfe39cffa..4ab10b4b2df 100644
--- a/static/usage/v7/menu/type/demo.html
+++ b/static/usage/v7/menu/type/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html
index d548f1c9e61..0e4eba1b41e 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/can-dismiss/function/demo.html b/static/usage/v7/modal/can-dismiss/function/demo.html
index 0f97193113f..594e6d45c28 100644
--- a/static/usage/v7/modal/can-dismiss/function/demo.html
+++ b/static/usage/v7/modal/can-dismiss/function/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
index 300560bc234..1940f56c143 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/modal/card/basic/demo.html b/static/usage/v7/modal/card/basic/demo.html
index ea2200494f8..49fe5bd279a 100644
--- a/static/usage/v7/modal/card/basic/demo.html
+++ b/static/usage/v7/modal/card/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html
index 67c8cd24fc6..e73c910fc17 100644
--- a/static/usage/v7/modal/controller/demo.html
+++ b/static/usage/v7/modal/controller/demo.html
@@ -7,10 +7,10 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <script type="module">
-    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
     window.modalController = modalController;
   </script>
 </head>
diff --git a/static/usage/v7/modal/custom-dialogs/demo.html b/static/usage/v7/modal/custom-dialogs/demo.html
index 95149828ba7..a83ce102f6b 100644
--- a/static/usage/v7/modal/custom-dialogs/demo.html
+++ b/static/usage/v7/modal/custom-dialogs/demo.html
@@ -7,10 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-modal {
       --width: fit-content;
diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html
index 4007d9fc2be..029b0d5d41c 100644
--- a/static/usage/v7/modal/inline/basic/demo.html
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/inline/is-open/demo.html b/static/usage/v7/modal/inline/is-open/demo.html
index ed5f3494869..33256b1f4d7 100644
--- a/static/usage/v7/modal/inline/is-open/demo.html
+++ b/static/usage/v7/modal/inline/is-open/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/performance/mount/demo.html b/static/usage/v7/modal/performance/mount/demo.html
index fa84100fda3..50ef54a637f 100644
--- a/static/usage/v7/modal/performance/mount/demo.html
+++ b/static/usage/v7/modal/performance/mount/demo.html
@@ -7,8 +7,8 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/sheet/background-content/demo.html b/static/usage/v7/modal/sheet/background-content/demo.html
index 9ba868a9e1e..389f7799b59 100644
--- a/static/usage/v7/modal/sheet/background-content/demo.html
+++ b/static/usage/v7/modal/sheet/background-content/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .counter__section {
       display: flex;
diff --git a/static/usage/v7/modal/sheet/basic/demo.html b/static/usage/v7/modal/sheet/basic/demo.html
index 65be6a2ceab..f164bb1e617 100644
--- a/static/usage/v7/modal/sheet/basic/demo.html
+++ b/static/usage/v7/modal/sheet/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/sheet/handle-behavior/demo.html b/static/usage/v7/modal/sheet/handle-behavior/demo.html
index c89417e7ecf..d1ef3a70769 100644
--- a/static/usage/v7/modal/sheet/handle-behavior/demo.html
+++ b/static/usage/v7/modal/sheet/handle-behavior/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/modal/styling/animations/demo.html b/static/usage/v7/modal/styling/animations/demo.html
index 555667996c4..aefd300a85f 100644
--- a/static/usage/v7/modal/styling/animations/demo.html
+++ b/static/usage/v7/modal/styling/animations/demo.html
@@ -7,10 +7,10 @@
   <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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <script type="module">
-    import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
     window.createAnimation = createAnimation;
   </script>
 
diff --git a/static/usage/v7/modal/styling/theming/demo.html b/static/usage/v7/modal/styling/theming/demo.html
index f0c3f00bbe4..33d8805bd71 100644
--- a/static/usage/v7/modal/styling/theming/demo.html
+++ b/static/usage/v7/modal/styling/theming/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-modal {
       --height: 50%;
diff --git a/static/usage/v7/nav/modal-navigation/demo.html b/static/usage/v7/nav/modal-navigation/demo.html
index 0d099f1e3cc..85dc011b83f 100644
--- a/static/usage/v7/nav/modal-navigation/demo.html
+++ b/static/usage/v7/nav/modal-navigation/demo.html
@@ -8,8 +8,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/nav/nav-link/demo.html b/static/usage/v7/nav/nav-link/demo.html
index 9d8aa06c58f..f34ceefe4a2 100644
--- a/static/usage/v7/nav/nav-link/demo.html
+++ b/static/usage/v7/nav/nav-link/demo.html
@@ -8,8 +8,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/note/basic/demo.html b/static/usage/v7/note/basic/demo.html
index ae5b7ce7f04..b5fb2b35894 100644
--- a/static/usage/v7/note/basic/demo.html
+++ b/static/usage/v7/note/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/note/item/demo.html b/static/usage/v7/note/item/demo.html
index 3aea8507aa8..9daedeed4ce 100644
--- a/static/usage/v7/note/item/demo.html
+++ b/static/usage/v7/note/item/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/note/theming/colors/demo.html b/static/usage/v7/note/theming/colors/demo.html
index 2564a686b1a..02e2949c699 100644
--- a/static/usage/v7/note/theming/colors/demo.html
+++ b/static/usage/v7/note/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .flex-items {
diff --git a/static/usage/v7/note/theming/css-properties/demo.html b/static/usage/v7/note/theming/css-properties/demo.html
index 400d4bf0b10..7c33f048643 100644
--- a/static/usage/v7/note/theming/css-properties/demo.html
+++ b/static/usage/v7/note/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-note {
diff --git a/static/usage/v7/picker/controller/demo.html b/static/usage/v7/picker/controller/demo.html
index 25d3cfc5662..32a92e0cecd 100644
--- a/static/usage/v7/picker/controller/demo.html
+++ b/static/usage/v7/picker/controller/demo.html
@@ -7,10 +7,10 @@
   <title>Picker | 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" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <script type="module">
-    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
     window.pickerController = pickerController;
   </script>
 </head>
diff --git a/static/usage/v7/picker/inline/isOpen/demo.html b/static/usage/v7/picker/inline/isOpen/demo.html
index 4a787ce459b..1c52fd7428e 100644
--- a/static/usage/v7/picker/inline/isOpen/demo.html
+++ b/static/usage/v7/picker/inline/isOpen/demo.html
@@ -7,8 +7,8 @@
   <title>Picker | isOpen</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/picker/inline/trigger/demo.html b/static/usage/v7/picker/inline/trigger/demo.html
index 7423fd338db..378111eee06 100644
--- a/static/usage/v7/picker/inline/trigger/demo.html
+++ b/static/usage/v7/picker/inline/trigger/demo.html
@@ -7,8 +7,8 @@
   <title>Picker | Trigger</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/picker/multiple-column/demo.html b/static/usage/v7/picker/multiple-column/demo.html
index a192ba97ae7..8e886c58a69 100644
--- a/static/usage/v7/picker/multiple-column/demo.html
+++ b/static/usage/v7/picker/multiple-column/demo.html
@@ -7,8 +7,8 @@
   <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.4.1-dev.11670949653.116404ab/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.1-dev.11670949653.116404ab/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/popover/customization/positioning/demo.html b/static/usage/v7/popover/customization/positioning/demo.html
index 71a74fb45e9..576ea36ad34 100644
--- a/static/usage/v7/popover/customization/positioning/demo.html
+++ b/static/usage/v7/popover/customization/positioning/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/popover/customization/sizing/demo.html b/static/usage/v7/popover/customization/sizing/demo.html
index b85d71034f8..7f53aa23bd5 100644
--- a/static/usage/v7/popover/customization/sizing/demo.html
+++ b/static/usage/v7/popover/customization/sizing/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/popover/customization/styling/demo.html b/static/usage/v7/popover/customization/styling/demo.html
index 6d858b14659..35a88342fb0 100644
--- a/static/usage/v7/popover/customization/styling/demo.html
+++ b/static/usage/v7/popover/customization/styling/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-popover {
diff --git a/static/usage/v7/popover/nested/demo.html b/static/usage/v7/popover/nested/demo.html
index ab52c1d5540..f40dadc60c6 100644
--- a/static/usage/v7/popover/nested/demo.html
+++ b/static/usage/v7/popover/nested/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/popover/performance/mount/demo.html b/static/usage/v7/popover/performance/mount/demo.html
index 053883d5e75..ebcc9a53e18 100644
--- a/static/usage/v7/popover/performance/mount/demo.html
+++ b/static/usage/v7/popover/performance/mount/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/popover/presenting/controller/demo.html b/static/usage/v7/popover/presenting/controller/demo.html
index 0a235d3c41d..22a76cc9eb0 100644
--- a/static/usage/v7/popover/presenting/controller/demo.html
+++ b/static/usage/v7/popover/presenting/controller/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/popover/presenting/inline-isopen/demo.html b/static/usage/v7/popover/presenting/inline-isopen/demo.html
index 4180760c005..6b85ee6fc42 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/demo.html
+++ b/static/usage/v7/popover/presenting/inline-isopen/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/popover/presenting/inline-trigger/demo.html b/static/usage/v7/popover/presenting/inline-trigger/demo.html
index d1b2020e454..f05008cc1b8 100644
--- a/static/usage/v7/popover/presenting/inline-trigger/demo.html
+++ b/static/usage/v7/popover/presenting/inline-trigger/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/progress-bar/buffer/demo.html b/static/usage/v7/progress-bar/buffer/demo.html
index 023c907ed39..901c0ddc01c 100644
--- a/static/usage/v7/progress-bar/buffer/demo.html
+++ b/static/usage/v7/progress-bar/buffer/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/progress-bar/determinate/demo.html b/static/usage/v7/progress-bar/determinate/demo.html
index 2f09a3ad5cd..e70f12debec 100644
--- a/static/usage/v7/progress-bar/determinate/demo.html
+++ b/static/usage/v7/progress-bar/determinate/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/progress-bar/indeterminate/demo.html b/static/usage/v7/progress-bar/indeterminate/demo.html
index 46c9cdd7254..70b7649c38f 100644
--- a/static/usage/v7/progress-bar/indeterminate/demo.html
+++ b/static/usage/v7/progress-bar/indeterminate/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/progress-bar/theming/colors/demo.html b/static/usage/v7/progress-bar/theming/colors/demo.html
index 2ecac2e80fa..1eeae1f7946 100644
--- a/static/usage/v7/progress-bar/theming/colors/demo.html
+++ b/static/usage/v7/progress-bar/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/progress-bar/theming/css-properties/demo.html b/static/usage/v7/progress-bar/theming/css-properties/demo.html
index 5d60e67fbc5..1b853603fba 100644
--- a/static/usage/v7/progress-bar/theming/css-properties/demo.html
+++ b/static/usage/v7/progress-bar/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
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
index 7ccd266e946..6e3163e6c60 100644
--- a/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/radio/basic/demo.html b/static/usage/v7/radio/basic/demo.html
index 7b8c23e8d4d..45ab91c7562 100644
--- a/static/usage/v7/radio/basic/demo.html
+++ b/static/usage/v7/radio/basic/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/radio/empty-selection/demo.html b/static/usage/v7/radio/empty-selection/demo.html
index 93daaeba65c..8a2cc7b98ab 100644
--- a/static/usage/v7/radio/empty-selection/demo.html
+++ b/static/usage/v7/radio/empty-selection/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/radio/justify/demo.html b/static/usage/v7/radio/justify/demo.html
index a7047195d20..7a26120183a 100644
--- a/static/usage/v7/radio/justify/demo.html
+++ b/static/usage/v7/radio/justify/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/radio/label-placement/demo.html b/static/usage/v7/radio/label-placement/demo.html
index ebdfc5ae5c5..066be21484c 100644
--- a/static/usage/v7/radio/label-placement/demo.html
+++ b/static/usage/v7/radio/label-placement/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/radio/theming/colors/demo.html b/static/usage/v7/radio/theming/colors/demo.html
index 074f427ef1a..12b247ea98b 100644
--- a/static/usage/v7/radio/theming/colors/demo.html
+++ b/static/usage/v7/radio/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/radio/theming/css-properties/demo.html b/static/usage/v7/radio/theming/css-properties/demo.html
index 5a2d6781802..663f27404f1 100644
--- a/static/usage/v7/radio/theming/css-properties/demo.html
+++ b/static/usage/v7/radio/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-radio {
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/demo.html b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
index 218826c34b2..dafabb5b149 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-radio::part(container) {
diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html
index fa741aae84b..b8cbcf4f9b8 100644
--- a/static/usage/v7/range/basic/demo.html
+++ b/static/usage/v7/range/basic/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
diff --git a/static/usage/v7/range/dual-knobs/demo.html b/static/usage/v7/range/dual-knobs/demo.html
index 0ca60d5ad13..391740906c3 100644
--- a/static/usage/v7/range/dual-knobs/demo.html
+++ b/static/usage/v7/range/dual-knobs/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
diff --git a/static/usage/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html
index f8e16912269..2459de629cd 100644
--- a/static/usage/v7/range/ion-change-event/demo.html
+++ b/static/usage/v7/range/ion-change-event/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .demo {
       max-width: 320px;
diff --git a/static/usage/v7/range/ion-knob-move-event/demo.html b/static/usage/v7/range/ion-knob-move-event/demo.html
index bfa71670d30..d155682045f 100644
--- a/static/usage/v7/range/ion-knob-move-event/demo.html
+++ b/static/usage/v7/range/ion-knob-move-event/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .demo {
       max-width: 320px;
diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html
index 13ba10fc27a..cfb8134a91f 100644
--- a/static/usage/v7/range/labels/demo.html
+++ b/static/usage/v7/range/labels/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .wrapper {
       width: calc(100% - 100px);
diff --git a/static/usage/v7/range/pins/demo.html b/static/usage/v7/range/pins/demo.html
index be5fdfd5f75..3c785be7d25 100644
--- a/static/usage/v7/range/pins/demo.html
+++ b/static/usage/v7/range/pins/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
diff --git a/static/usage/v7/range/slots/demo.html b/static/usage/v7/range/slots/demo.html
index 800f8cdc61d..cd1bb37e7b2 100644
--- a/static/usage/v7/range/slots/demo.html
+++ b/static/usage/v7/range/slots/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
diff --git a/static/usage/v7/range/snapping-ticks/demo.html b/static/usage/v7/range/snapping-ticks/demo.html
index a55b139a33c..447f1dd586a 100644
--- a/static/usage/v7/range/snapping-ticks/demo.html
+++ b/static/usage/v7/range/snapping-ticks/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
diff --git a/static/usage/v7/range/theming/css-properties/demo.html b/static/usage/v7/range/theming/css-properties/demo.html
index af22e18133b..4c3c7264033 100644
--- a/static/usage/v7/range/theming/css-properties/demo.html
+++ b/static/usage/v7/range/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-range {
       --bar-background: #a2d2ff;
diff --git a/static/usage/v7/range/theming/css-shadow-parts/demo.html b/static/usage/v7/range/theming/css-shadow-parts/demo.html
index 0f1af00c019..76db3121d3b 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/range/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-range {
       max-width: 320px;
diff --git a/static/usage/v7/refresher/advanced/demo.html b/static/usage/v7/refresher/advanced/demo.html
index 8f0b2fbbe52..7fccf08dd40 100644
--- a/static/usage/v7/refresher/advanced/demo.html
+++ b/static/usage/v7/refresher/advanced/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-item {
diff --git a/static/usage/v7/refresher/basic/demo.html b/static/usage/v7/refresher/basic/demo.html
index 9c378cad03e..028c03eeac4 100644
--- a/static/usage/v7/refresher/basic/demo.html
+++ b/static/usage/v7/refresher/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/refresher/custom-content/demo.html b/static/usage/v7/refresher/custom-content/demo.html
index 084ad40e10d..8159df0cc2c 100644
--- a/static/usage/v7/refresher/custom-content/demo.html
+++ b/static/usage/v7/refresher/custom-content/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/refresher/custom-scroll-target/demo.html b/static/usage/v7/refresher/custom-scroll-target/demo.html
index 0adad651d65..9c004f37a19 100644
--- a/static/usage/v7/refresher/custom-scroll-target/demo.html
+++ b/static/usage/v7/refresher/custom-scroll-target/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .ion-content-scroll-host {
diff --git a/static/usage/v7/refresher/pull-properties/demo.html b/static/usage/v7/refresher/pull-properties/demo.html
index 3d8e940a636..af549ec23a6 100644
--- a/static/usage/v7/refresher/pull-properties/demo.html
+++ b/static/usage/v7/refresher/pull-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/reorder/basic/demo.html b/static/usage/v7/reorder/basic/demo.html
index 7d721cc2790..bda0f81d78e 100644
--- a/static/usage/v7/reorder/basic/demo.html
+++ b/static/usage/v7/reorder/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/reorder/custom-icon/demo.html b/static/usage/v7/reorder/custom-icon/demo.html
index 1d9ad3dd39e..651718ee419 100644
--- a/static/usage/v7/reorder/custom-icon/demo.html
+++ b/static/usage/v7/reorder/custom-icon/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/reorder/custom-scroll-target/demo.html b/static/usage/v7/reorder/custom-scroll-target/demo.html
index 8a94ae5d8e6..d564a236a83 100644
--- a/static/usage/v7/reorder/custom-scroll-target/demo.html
+++ b/static/usage/v7/reorder/custom-scroll-target/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/reorder/toggling-disabled/demo.html b/static/usage/v7/reorder/toggling-disabled/demo.html
index 1eb8cba120b..c87b1a18fcb 100644
--- a/static/usage/v7/reorder/toggling-disabled/demo.html
+++ b/static/usage/v7/reorder/toggling-disabled/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/reorder/updating-data/demo.html b/static/usage/v7/reorder/updating-data/demo.html
index bf7d175f937..d61f9fac473 100644
--- a/static/usage/v7/reorder/updating-data/demo.html
+++ b/static/usage/v7/reorder/updating-data/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/reorder/wrapper/demo.html b/static/usage/v7/reorder/wrapper/demo.html
index 6bf8b66760b..6896fec2f2f 100644
--- a/static/usage/v7/reorder/wrapper/demo.html
+++ b/static/usage/v7/reorder/wrapper/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/ripple-effect/basic/demo.html b/static/usage/v7/ripple-effect/basic/demo.html
index fd593291421..999604925ee 100644
--- a/static/usage/v7/ripple-effect/basic/demo.html
+++ b/static/usage/v7/ripple-effect/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .wrapper {
diff --git a/static/usage/v7/ripple-effect/customizing/demo.html b/static/usage/v7/ripple-effect/customizing/demo.html
index 6ce7f376ed1..4884fc86018 100644
--- a/static/usage/v7/ripple-effect/customizing/demo.html
+++ b/static/usage/v7/ripple-effect/customizing/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .wrapper {
diff --git a/static/usage/v7/ripple-effect/type/demo.html b/static/usage/v7/ripple-effect/type/demo.html
index cfaa115fac9..60f1ccf811b 100644
--- a/static/usage/v7/ripple-effect/type/demo.html
+++ b/static/usage/v7/ripple-effect/type/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .wrapper {
diff --git a/static/usage/v7/router/basic/demo.html b/static/usage/v7/router/basic/demo.html
index 9210474adff..e76ea61b5ab 100644
--- a/static/usage/v7/router/basic/demo.html
+++ b/static/usage/v7/router/basic/demo.html
@@ -7,8 +7,8 @@
   <title>Router</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/searchbar/basic/demo.html b/static/usage/v7/searchbar/basic/demo.html
index e4d6f94b532..4fd310f4db9 100644
--- a/static/usage/v7/searchbar/basic/demo.html
+++ b/static/usage/v7/searchbar/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/searchbar/cancel-button/demo.html b/static/usage/v7/searchbar/cancel-button/demo.html
index ebfef12609b..4b11f43db7c 100644
--- a/static/usage/v7/searchbar/cancel-button/demo.html
+++ b/static/usage/v7/searchbar/cancel-button/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/searchbar/clear-button/demo.html b/static/usage/v7/searchbar/clear-button/demo.html
index e85b497b349..72784ade987 100644
--- a/static/usage/v7/searchbar/clear-button/demo.html
+++ b/static/usage/v7/searchbar/clear-button/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/searchbar/debounce/demo.html b/static/usage/v7/searchbar/debounce/demo.html
index ac43a663b20..9fce8ff5f3a 100644
--- a/static/usage/v7/searchbar/debounce/demo.html
+++ b/static/usage/v7/searchbar/debounce/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/searchbar/search-icon/demo.html b/static/usage/v7/searchbar/search-icon/demo.html
index 33e2793d25d..8cfd4632e85 100644
--- a/static/usage/v7/searchbar/search-icon/demo.html
+++ b/static/usage/v7/searchbar/search-icon/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/searchbar/theming/colors/demo.html b/static/usage/v7/searchbar/theming/colors/demo.html
index 5701010c08b..4ea47eb381f 100644
--- a/static/usage/v7/searchbar/theming/colors/demo.html
+++ b/static/usage/v7/searchbar/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/searchbar/theming/css-properties/demo.html b/static/usage/v7/searchbar/theming/css-properties/demo.html
index bd168970198..848b2b6f024 100644
--- a/static/usage/v7/searchbar/theming/css-properties/demo.html
+++ b/static/usage/v7/searchbar/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/segment-button/basic/demo.html b/static/usage/v7/segment-button/basic/demo.html
index 280022dbc91..6877ae4645d 100644
--- a/static/usage/v7/segment-button/basic/demo.html
+++ b/static/usage/v7/segment-button/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/segment-button/layout/demo.html b/static/usage/v7/segment-button/layout/demo.html
index 83bd89fd250..1fcc16cf0b5 100644
--- a/static/usage/v7/segment-button/layout/demo.html
+++ b/static/usage/v7/segment-button/layout/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/segment-button/theming/css-properties/demo.html b/static/usage/v7/segment-button/theming/css-properties/demo.html
index 144ecaa5639..15b6663ed6a 100644
--- a/static/usage/v7/segment-button/theming/css-properties/demo.html
+++ b/static/usage/v7/segment-button/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
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
index c81886b5b20..765f38cec01 100644
--- a/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/segment/basic/demo.html b/static/usage/v7/segment/basic/demo.html
index 886c2aafef7..c13af1fd749 100644
--- a/static/usage/v7/segment/basic/demo.html
+++ b/static/usage/v7/segment/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/segment/scrollable/demo.html b/static/usage/v7/segment/scrollable/demo.html
index b8f90118667..d9dee70d2cb 100644
--- a/static/usage/v7/segment/scrollable/demo.html
+++ b/static/usage/v7/segment/scrollable/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/segment/theming/colors/demo.html b/static/usage/v7/segment/theming/colors/demo.html
index 0f7579af2cd..cb662fb009a 100644
--- a/static/usage/v7/segment/theming/colors/demo.html
+++ b/static/usage/v7/segment/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/segment/theming/css-properties/demo.html b/static/usage/v7/segment/theming/css-properties/demo.html
index d6d92fbd835..6cc5c5a46ab 100644
--- a/static/usage/v7/segment/theming/css-properties/demo.html
+++ b/static/usage/v7/segment/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/select/basic/multiple-selection/demo.html b/static/usage/v7/select/basic/multiple-selection/demo.html
index 91d1f6ad230..1cc58839a36 100644
--- a/static/usage/v7/select/basic/multiple-selection/demo.html
+++ b/static/usage/v7/select/basic/multiple-selection/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/basic/responding-to-interaction/demo.html b/static/usage/v7/select/basic/responding-to-interaction/demo.html
index 60ca694af44..e8499787112 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/demo.html
+++ b/static/usage/v7/select/basic/responding-to-interaction/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     #log {
diff --git a/static/usage/v7/select/basic/single-selection/demo.html b/static/usage/v7/select/basic/single-selection/demo.html
index 29730f22166..e6de08c9e15 100644
--- a/static/usage/v7/select/basic/single-selection/demo.html
+++ b/static/usage/v7/select/basic/single-selection/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/customization/button-text/demo.html b/static/usage/v7/select/customization/button-text/demo.html
index 63a6c4c87e6..98096c7cbe5 100644
--- a/static/usage/v7/select/customization/button-text/demo.html
+++ b/static/usage/v7/select/customization/button-text/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/customization/interface-options/demo.html b/static/usage/v7/select/customization/interface-options/demo.html
index 6a9428dc885..18aa06c18bf 100644
--- a/static/usage/v7/select/customization/interface-options/demo.html
+++ b/static/usage/v7/select/customization/interface-options/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
diff --git a/static/usage/v7/select/customization/styling-select/demo.html b/static/usage/v7/select/customization/styling-select/demo.html
index 4c6ffa3a788..fa813bfde1e 100644
--- a/static/usage/v7/select/customization/styling-select/demo.html
+++ b/static/usage/v7/select/customization/styling-select/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-select {
diff --git a/static/usage/v7/select/fill/demo.html b/static/usage/v7/select/fill/demo.html
index b34195cad90..2543e2fccf5 100644
--- a/static/usage/v7/select/fill/demo.html
+++ b/static/usage/v7/select/fill/demo.html
@@ -7,8 +7,8 @@
   <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.5.1-dev.11674584015.19545cf0/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.1-dev.11674584015.19545cf0/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/select/interfaces/action-sheet/demo.html b/static/usage/v7/select/interfaces/action-sheet/demo.html
index 78447f2da4b..0e53b22ca92 100644
--- a/static/usage/v7/select/interfaces/action-sheet/demo.html
+++ b/static/usage/v7/select/interfaces/action-sheet/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/interfaces/popover/demo.html b/static/usage/v7/select/interfaces/popover/demo.html
index fbe0e7097a1..968bd204074 100644
--- a/static/usage/v7/select/interfaces/popover/demo.html
+++ b/static/usage/v7/select/interfaces/popover/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/select/justify/demo.html b/static/usage/v7/select/justify/demo.html
index 80e1c10bbfe..41c241f4961 100644
--- a/static/usage/v7/select/justify/demo.html
+++ b/static/usage/v7/select/justify/demo.html
@@ -7,8 +7,8 @@
   <title>select</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/select/label-placement/demo.html b/static/usage/v7/select/label-placement/demo.html
index 3a5ac6d0ab0..68b8e6b179d 100644
--- a/static/usage/v7/select/label-placement/demo.html
+++ b/static/usage/v7/select/label-placement/demo.html
@@ -7,8 +7,8 @@
   <title>select</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
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
index 7a46acbc1ac..390a32eaec1 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
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
index 63debebf56c..b68d3ab7ff9 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container>ion-list {
diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html
index 9fa9bb8e5af..2551d58694f 100644
--- a/static/usage/v7/select/typeahead/demo.html
+++ b/static/usage/v7/select/typeahead/demo.html
@@ -6,8 +6,8 @@
     <title>Select</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v7/skeleton-text/basic/demo.html b/static/usage/v7/skeleton-text/basic/demo.html
index a1cbc3f4f12..b42500e9e44 100644
--- a/static/usage/v7/skeleton-text/basic/demo.html
+++ b/static/usage/v7/skeleton-text/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     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
index 6a84c2b7943..b84ffc4c317 100644
--- a/static/usage/v7/skeleton-text/theming/css-properties/demo.html
+++ b/static/usage/v7/skeleton-text/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/spinner/basic/demo.html b/static/usage/v7/spinner/basic/demo.html
index cf495c8bd07..f900d6f461f 100644
--- a/static/usage/v7/spinner/basic/demo.html
+++ b/static/usage/v7/spinner/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/spinner/theming/colors/demo.html b/static/usage/v7/spinner/theming/colors/demo.html
index 387a56e38d4..b3984b8c59a 100644
--- a/static/usage/v7/spinner/theming/colors/demo.html
+++ b/static/usage/v7/spinner/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/spinner/theming/css-properties/demo.html b/static/usage/v7/spinner/theming/css-properties/demo.html
index 6c369bd71fd..88a7fb6a49c 100644
--- a/static/usage/v7/spinner/theming/css-properties/demo.html
+++ b/static/usage/v7/spinner/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-spinner {
diff --git a/static/usage/v7/split-pane/basic/demo.html b/static/usage/v7/split-pane/basic/demo.html
index c514ebd1dbc..4c8fce4946f 100644
--- a/static/usage/v7/split-pane/basic/demo.html
+++ b/static/usage/v7/split-pane/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/split-pane/theming/css-properties/demo.html b/static/usage/v7/split-pane/theming/css-properties/demo.html
index 83353796a32..dcd6445a0a2 100644
--- a/static/usage/v7/split-pane/theming/css-properties/demo.html
+++ b/static/usage/v7/split-pane/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     ion-split-pane {
       --side-width: 350px;
diff --git a/static/usage/v7/tabs/router/demo.html b/static/usage/v7/tabs/router/demo.html
index 5836d4f4834..0628eab458a 100644
--- a/static/usage/v7/tabs/router/demo.html
+++ b/static/usage/v7/tabs/router/demo.html
@@ -7,10 +7,8 @@
   <title>Tabs</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@ionic/core@6.4.2-dev.11673981545.1e612253/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .example-content {
       display: flex;
diff --git a/static/usage/v7/text/basic/demo.html b/static/usage/v7/text/basic/demo.html
index 7dda6c901cb..d7485b4396f 100644
--- a/static/usage/v7/text/basic/demo.html
+++ b/static/usage/v7/text/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/textarea/autogrow/demo.html b/static/usage/v7/textarea/autogrow/demo.html
index 07434619b22..15bf541e9d6 100644
--- a/static/usage/v7/textarea/autogrow/demo.html
+++ b/static/usage/v7/textarea/autogrow/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/textarea/basic/demo.html b/static/usage/v7/textarea/basic/demo.html
index 671ebe50aa8..726165a8987 100644
--- a/static/usage/v7/textarea/basic/demo.html
+++ b/static/usage/v7/textarea/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/textarea/clear-on-edit/demo.html b/static/usage/v7/textarea/clear-on-edit/demo.html
index 253bc7a2bc9..5cf49403444 100644
--- a/static/usage/v7/textarea/clear-on-edit/demo.html
+++ b/static/usage/v7/textarea/clear-on-edit/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/textarea/counter/demo.html b/static/usage/v7/textarea/counter/demo.html
index 228b0c3494d..e175ee00e30 100644
--- a/static/usage/v7/textarea/counter/demo.html
+++ b/static/usage/v7/textarea/counter/demo.html
@@ -7,8 +7,8 @@
   <title>Textarea</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/textarea/fill/demo.html b/static/usage/v7/textarea/fill/demo.html
index 8e3024d9d12..f24a5bf8691 100644
--- a/static/usage/v7/textarea/fill/demo.html
+++ b/static/usage/v7/textarea/fill/demo.html
@@ -7,8 +7,8 @@
   <title>Textarea</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/textarea/helper-error/demo.html b/static/usage/v7/textarea/helper-error/demo.html
index 55e70b43c79..75e5568ed77 100644
--- a/static/usage/v7/textarea/helper-error/demo.html
+++ b/static/usage/v7/textarea/helper-error/demo.html
@@ -7,8 +7,8 @@
   <title>Textarea</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .container ion-textarea {
       width: 300px;
diff --git a/static/usage/v7/textarea/label-placement/demo.html b/static/usage/v7/textarea/label-placement/demo.html
index eabbc9d388e..66d7adc9459 100644
--- a/static/usage/v7/textarea/label-placement/demo.html
+++ b/static/usage/v7/textarea/label-placement/demo.html
@@ -7,8 +7,8 @@
   <title>Textarea</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html
index 2fce6484a38..0976460f00a 100644
--- a/static/usage/v7/textarea/theming/demo.html
+++ b/static/usage/v7/textarea/theming/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
   <style>
     .container {
       padding: 0 40px;
diff --git a/static/usage/v7/thumbnail/basic/demo.html b/static/usage/v7/thumbnail/basic/demo.html
index e3aabdff4c2..d86ab646cbe 100644
--- a/static/usage/v7/thumbnail/basic/demo.html
+++ b/static/usage/v7/thumbnail/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/thumbnail/item/demo.html b/static/usage/v7/thumbnail/item/demo.html
index 3e8c739fd73..e264f894790 100644
--- a/static/usage/v7/thumbnail/item/demo.html
+++ b/static/usage/v7/thumbnail/item/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/thumbnail/theming/css-properties/demo.html b/static/usage/v7/thumbnail/theming/css-properties/demo.html
index 1abdceda339..d50eb4eaa90 100644
--- a/static/usage/v7/thumbnail/theming/css-properties/demo.html
+++ b/static/usage/v7/thumbnail/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-thumbnail {
diff --git a/static/usage/v7/title/basic/demo.html b/static/usage/v7/title/basic/demo.html
index 13b1b317ce0..8bad261fe81 100644
--- a/static/usage/v7/title/basic/demo.html
+++ b/static/usage/v7/title/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/title/collapsible-large-title/basic/demo.html b/static/usage/v7/title/collapsible-large-title/basic/demo.html
index e67c7bd3a33..5fc4f3a6d73 100644
--- a/static/usage/v7/title/collapsible-large-title/basic/demo.html
+++ b/static/usage/v7/title/collapsible-large-title/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/demo.html b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
index ecf88cf5305..ddc79b8e515 100644
--- a/static/usage/v7/title/collapsible-large-title/buttons/demo.html
+++ b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/title/theming/css-properties/demo.html b/static/usage/v7/title/theming/css-properties/demo.html
index 202131c46ac..18c3e6c4efc 100644
--- a/static/usage/v7/title/theming/css-properties/demo.html
+++ b/static/usage/v7/title/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-title.title-large {
diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html
index d95ef6182a8..01e703fc189 100644
--- a/static/usage/v7/toast/buttons/demo.html
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/toast/icon/demo.html b/static/usage/v7/toast/icon/demo.html
index 1a8ab774fb7..39bff537544 100644
--- a/static/usage/v7/toast/icon/demo.html
+++ b/static/usage/v7/toast/icon/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/inline/basic/demo.html b/static/usage/v7/toast/inline/basic/demo.html
index 68f25b87d95..7a1e5a193b0 100644
--- a/static/usage/v7/toast/inline/basic/demo.html
+++ b/static/usage/v7/toast/inline/basic/demo.html
@@ -7,8 +7,8 @@
   <title>Toast | Inline</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/inline/is-open/demo.html b/static/usage/v7/toast/inline/is-open/demo.html
index fb8ce3c2d2d..291d57158b1 100644
--- a/static/usage/v7/toast/inline/is-open/demo.html
+++ b/static/usage/v7/toast/inline/is-open/demo.html
@@ -7,8 +7,8 @@
   <title>Toast | Inline</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
index 86d2dedafb4..9b66c2f2e13 100644
--- a/static/usage/v7/toast/layout/demo.html
+++ b/static/usage/v7/toast/layout/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toast/presenting/controller/demo.html b/static/usage/v7/toast/presenting/controller/demo.html
index 24cc1fcb8d0..df07f510890 100644
--- a/static/usage/v7/toast/presenting/controller/demo.html
+++ b/static/usage/v7/toast/presenting/controller/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
@@ -34,7 +34,7 @@
   </ion-app>
 
   <script type="module">
-    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
     window.toastController = toastController;
   </script>
 
diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html
index b45b2e6a73c..8fa80d50736 100644
--- a/static/usage/v7/toast/theming/demo.html
+++ b/static/usage/v7/toast/theming/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-toast.custom-toast {
diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html
index f6b5c53dbf6..6e2147fe50d 100644
--- a/static/usage/v7/toggle/basic/demo.html
+++ b/static/usage/v7/toggle/basic/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html
index 6627099b6a5..cb14e211de2 100644
--- a/static/usage/v7/toggle/justify/demo.html
+++ b/static/usage/v7/toggle/justify/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-list {
diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html
index af8592022ee..133f8eb7c3a 100644
--- a/static/usage/v7/toggle/label-placement/demo.html
+++ b/static/usage/v7/toggle/label-placement/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 </head>
 
 <body>
diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html
index d8362f2cb00..d536a146946 100644
--- a/static/usage/v7/toggle/list/demo.html
+++ b/static/usage/v7/toggle/list/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html
index d43dd0879c8..af44c9c2b86 100644
--- a/static/usage/v7/toggle/on-off/demo.html
+++ b/static/usage/v7/toggle/on-off/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toggle/theming/colors/demo.html b/static/usage/v7/toggle/theming/colors/demo.html
index c70545cfdbf..9ee17e3bdc4 100644
--- a/static/usage/v7/toggle/theming/colors/demo.html
+++ b/static/usage/v7/toggle/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html
index 32c2f939a98..7cb99b40e56 100644
--- a/static/usage/v7/toggle/theming/css-properties/demo.html
+++ b/static/usage/v7/toggle/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     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
index 19634b29acf..d1daaa4698c 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
@@ -7,8 +7,8 @@
   <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@next/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     ion-toggle {
diff --git a/static/usage/v7/toolbar/basic/demo.html b/static/usage/v7/toolbar/basic/demo.html
index bc598f63d22..5f1879bee39 100644
--- a/static/usage/v7/toolbar/basic/demo.html
+++ b/static/usage/v7/toolbar/basic/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toolbar/buttons/demo.html b/static/usage/v7/toolbar/buttons/demo.html
index 55941b2c348..d5d62d9c486 100644
--- a/static/usage/v7/toolbar/buttons/demo.html
+++ b/static/usage/v7/toolbar/buttons/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/toolbar/progress-bars/demo.html b/static/usage/v7/toolbar/progress-bars/demo.html
index 58ddadffe72..7f7aebd9cff 100644
--- a/static/usage/v7/toolbar/progress-bars/demo.html
+++ b/static/usage/v7/toolbar/progress-bars/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toolbar/searchbars/demo.html b/static/usage/v7/toolbar/searchbars/demo.html
index a75cf4e6483..c1dcdd42359 100644
--- a/static/usage/v7/toolbar/searchbars/demo.html
+++ b/static/usage/v7/toolbar/searchbars/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toolbar/segments/demo.html b/static/usage/v7/toolbar/segments/demo.html
index 42452b90dd8..b240baa1386 100644
--- a/static/usage/v7/toolbar/segments/demo.html
+++ b/static/usage/v7/toolbar/segments/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
 </head>
 
diff --git a/static/usage/v7/toolbar/theming/colors/demo.html b/static/usage/v7/toolbar/theming/colors/demo.html
index f8c44dcd8e2..c3c87cd738d 100644
--- a/static/usage/v7/toolbar/theming/colors/demo.html
+++ b/static/usage/v7/toolbar/theming/colors/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {
diff --git a/static/usage/v7/toolbar/theming/css-properties/demo.html b/static/usage/v7/toolbar/theming/css-properties/demo.html
index dca3fea437d..700f63f501d 100644
--- a/static/usage/v7/toolbar/theming/css-properties/demo.html
+++ b/static/usage/v7/toolbar/theming/css-properties/demo.html
@@ -7,8 +7,8 @@
   <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" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
   <style>
     .container {

From 80ed807f352f27261ca5a7bd22e4c32ccaeaa79b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 29 Mar 2023 16:48:39 -0400
Subject: [PATCH 287/469] fix(plugin): account for versions with no paths
 (#2865)

---
 plugins/docusaurus-plugin-ionic-component-api/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index 8e12c52ad3a..40c66550e89 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -49,7 +49,12 @@ module.exports = function (context, options) {
         await generateMarkdownForVersion(version, npmTag, false);
       }
 
-      const npmTag = currentVersion.banner === 'unreleased' ? 'next' : currentVersion.path.slice(1);
+      let npmTag = 'latest';
+      if (currentVersion.banner === 'unreleased') {
+        npmTag = 'next';
+      } else if (currentVersion.path !== undefined) {
+        npmTag = currentVersion.path.slice(1);
+      }
       // Latest version
       await generateMarkdownForVersion(currentVersion.path, npmTag, true);
 

From b81426e5378cad5a51ac2e2598b6681842322417 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 29 Mar 2023 17:15:44 -0400
Subject: [PATCH 288/469] fix(config): fall back to label (#2866)

---
 plugins/docusaurus-plugin-ionic-component-api/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index 40c66550e89..25dec8d1441 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -56,7 +56,7 @@ module.exports = function (context, options) {
         npmTag = currentVersion.path.slice(1);
       }
       // Latest version
-      await generateMarkdownForVersion(currentVersion.path, npmTag, true);
+      await generateMarkdownForVersion(currentVersion.path || currentVersion.label, npmTag, true);
 
       return data;
     },

From 53775a934dffcb07591425bdaad190004260679b Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 29 Mar 2023 18:37:31 -0400
Subject: [PATCH 289/469] docs(upgrade-pill): link to v7 upgrade guide (#2724)

---
 docusaurus.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 49504f64c4a..0a291d3c1ef 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -100,8 +100,8 @@ module.exports = {
         {
           type: 'cta',
           position: 'left',
-          text: 'Ionic v6.0.0 Upgrade Guide',
-          href: `/intro/upgrading-to-ionic-6`,
+          text: 'Ionic v7.0.0 Upgrade Guide',
+          href: `/updating/7-0`,
         },
         {
           type: 'docsVersionDropdown',

From bcee83a8ce903cac67e2a1cc8496aca9d49004ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 30 Mar 2023 07:40:13 +0900
Subject: [PATCH 290/469] chore(): remove unused auto translated

---
 scripts/build-translate/index.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/build-translate/index.ts b/scripts/build-translate/index.ts
index cbd99433545..841b854d624 100644
--- a/scripts/build-translate/index.ts
+++ b/scripts/build-translate/index.ts
@@ -44,10 +44,10 @@ const apply = async () => {
               }
 
               // 今回翻訳データにあるか確認
-              if (translatedNow.hasOwnProperty(ob[translateType.translateTargetKey])) {
-                ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translatedNow[translateText]}`;
-                return;
-              }
+              // if (translatedNow.hasOwnProperty(ob[translateType.translateTargetKey])) {
+              //   ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translatedNow[translateText]}`;
+              //   return;
+              // }
 
               const response = await translate({
                 free_api: true,
@@ -59,7 +59,7 @@ const apply = async () => {
               const translated = response.data.translations[0].text;
               translatedNow[translateText] = translated;
 
-              ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translated}`;
+              // ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translated}`;
             }
           }));
         }

From cdea3cdb5ce7672a01084805f208976b95235a64 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 30 Mar 2023 09:52:14 -0500
Subject: [PATCH 291/469] docs(support): update support table for v7 (#2868)

resolves #2867
---
 docs/reference/support.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index e7a0ee5da74..94052c8cccc 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -22,8 +22,8 @@ The current status of each Ionic Framework version is:
 
 | Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
 | :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
-| V7      | Beta                  | TBD          | TBD              | TBD               |
-| V6      | **Active**            | Dec 8, 2021  | TBD              | TBD               |
+| V7      | **Active**            | Mar 29, 2023 | TBD              | TBD               |
+| V6      | Maintenance           | Dec 8, 2021  | Sep 29, 2023     | Mar 29, 2024      |
 | V5      | End of Support        | 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      |

From 56a35ef1a36b673e74034f5f53115b975258c4a5 Mon Sep 17 00:00:00 2001
From: reslear <reslear@gmail.com>
Date: Thu, 30 Mar 2023 17:04:14 +0200
Subject: [PATCH 292/469] docs(datetime): remove unused variable from example
 (#2803)

---
 docs/api/datetime.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 784c151cf0c..34ac7575b5c 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -336,7 +336,7 @@ const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 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);
+const zonedTime = utcToZonedTime(date, userTimeZone);
 
 // Create a formatted string from the zoned time
 format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });

From 2852b6a35324399f16e45899e8c1a4746ac737c3 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 30 Mar 2023 12:42:55 -0400
Subject: [PATCH 293/469] docs(v7): update breaking changes link (#2869)

---
 docs/updating/7-0.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index 32e81ff03bc..381b4fe1cf9 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -9,7 +9,7 @@ This guide assumes that you have already updated your app to the latest version
 :::
 
 :::info Breaking Changes
-For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) in the Ionic Framework repository.
+For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x) in the Ionic Framework repository.
 :::
 
 ## Getting Started
@@ -148,6 +148,6 @@ iOS >=14
 
 ## Need Help Upgrading?
 
-Be sure to look at the [Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require user action are listed on this page.
+Be sure to look at the [Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require user action are listed on this page.
 
 If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).

From 80c0d9568ff497b3aca96cfa80e1bcf899797a02 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 30 Mar 2023 16:10:32 -0400
Subject: [PATCH 294/469] docs(v7): update migration guide tags (#2870)

---
 docs/updating/7-0.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index 381b4fe1cf9..4bd65c2c7e9 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -26,13 +26,13 @@ npm install rxjs@7.5.0
 3. Update to the latest version of Ionic 7:
 
 ```shell
-npm install @ionic/angular@next
+npm install @ionic/angular@7
 ```
 
 If you are using Ionic Angular Server, be sure to update that as well:
 
 ```shell
-npm install @ionic/angular@next @ionic/angular-server@next
+npm install @ionic/angular@7 @ionic/angular-server@7
 ```
 
 ### React
@@ -46,7 +46,7 @@ npm install react@latest react-dom@latest
 2. Update to the latest version of Ionic 7:
 
 ```shell
-npm install @ionic/react@next @ionic/react-router@next
+npm install @ionic/react@7 @ionic/react-router@7
 ```
 
 ### Vue
@@ -60,7 +60,7 @@ npm install vue@latest vue-router@latest
 3. Update to the latest version of Ionic 7:
 
 ```shell
-npm install @ionic/vue@next @ionic/vue-router@next
+npm install @ionic/vue@7 @ionic/vue-router@7
 ```
 
 ### Core
@@ -68,7 +68,7 @@ npm install @ionic/vue@next @ionic/vue-router@next
 1. Update to the latest version of Ionic 7:
 
 ```shell
-npm install @ionic/core@next
+npm install @ionic/core@7
 ```
 
 ## Updating Your Code

From 9bf45333188038bf75a404f10362b0220d12e1cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Fri, 31 Mar 2023 11:37:57 +0900
Subject: [PATCH 295/469] feat(translate): translate api

---
 .../index.js                                  | 44 +++++++++++-
 .../reference/ReleaseNotes/release-notes.json | 70 +++++++++++--------
 2 files changed, 83 insertions(+), 31 deletions(-)

diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index 25dec8d1441..5bb22bc4132 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -29,7 +29,7 @@ module.exports = function (context, options) {
         components.forEach((comp) => {
           const compTag = comp.tag.slice(4);
           const outDir = getDirectoryPath(compTag, version, isCurrentVersion);
-
+          comp = translateDocs(comp);
           data.push({
             outDir,
             componentTag: compTag,
@@ -223,3 +223,45 @@ ${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).jo
 
 `;
 }
+
+function translateDocs(comp) {
+  const { props, events, methods, parts, styles, slots } = comp;
+    return {
+      ...comp,
+      props: props.map((prop) => ({
+        ...prop,
+        docs: translate(prop.docs),
+      })),
+      events: events.map((event) => ({
+        ...event,
+        docs: translate(event.docs),
+      })),
+      methods: methods.map((method) => ({
+        ...method,
+        docs: translate(method.docs),
+      })),
+      parts: parts.map((part) => ({
+        ...part,
+        docs: translate(part.docs),
+      })),
+      styles: styles.map((styles) => ({
+        ...styles,
+        docs: translate(styles.docs),
+      })),
+      slots: slots.map((slot) => ({
+        ...slot,
+        docs: translate(slot.docs),
+      })),
+    };
+}
+
+function translate(docs) {
+  const TranslatedFile = require(process.cwd() + '/scripts/data/translated-cache.json');
+  const translated = TranslatedFile.cache;
+
+  if (translated.hasOwnProperty(docs)) {
+    return translated[docs];
+  }
+
+  return docs;
+}
diff --git a/src/components/page/reference/ReleaseNotes/release-notes.json b/src/components/page/reference/ReleaseNotes/release-notes.json
index 231bdaf43ba..128624faaf5 100644
--- a/src/components/page/reference/ReleaseNotes/release-notes.json
+++ b/src/components/page/reference/ReleaseNotes/release-notes.json
@@ -1,4 +1,44 @@
 [
+  {
+    "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.5...v7.0.0\">7.0.0</a> (2023-03-29)</h1>\n<p>Enjoy! See <a href=\"https://ionicframework.com/docs/updating/7-0\">https://ionicframework.com/docs/updating/7-0</a> for a migration guide.</p>\n",
+    "element": "Unobtainium",
+    "name": "v7.0.0",
+    "published_at": "March 30 2023",
+    "symbol": "Uo",
+    "tag_name": "v7.0.0",
+    "type": "major",
+    "version": "7.0.0"
+  },
+  {
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.7.0...v6.7.1\">6.7.1</a> (2023-03-29)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>item-sliding:</strong> open method works with items added async (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27035\">#27035</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/521063bf241dc2c55bcd02a92ed8a418cfec6b1e\">521063b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26991\">#26991</a></li>\n<li><strong>item:</strong> use thumbnail's size when present (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27014\">#27014</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6cecdf41451a5c7aa908494dfad9fab1496a0c6c\">6cecdf4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22935\">#22935</a></li>\n<li><strong>radio-group:</strong> radios participate in form submission (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27018\">#27018</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3b99c31bab41bf7fcec340ac7159d3e8fce126c1\">3b99c31</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27016\">#27016</a></li>\n<li><strong>select:</strong> inherit white-space in select-text to allow text wrapping (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26973\">#26973</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/19c1e25399ca18c8e6a8dd39c0131979c0bb01e9\">19c1e25</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19949\">#19949</a></li>\n</ul>\n",
+    "element": "Unobtainium",
+    "name": "v6.7.1",
+    "published_at": "March 29 2023",
+    "symbol": "Uo",
+    "tag_name": "v6.7.1",
+    "type": "patch",
+    "version": "6.7.1"
+  },
+  {
+    "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.3...v6.7.0\">6.7.0</a> (2023-03-23)</h1>\n<h3>Features</h3>\n<ul>\n<li><strong>config:</strong> add option to disable custom html functionality (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26956\">#26956</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3b0af7c55d4fa039be33d6605414761494d5af8f\">3b0af7c</a>)</li>\n</ul>\n",
+    "element": "Unobtainium",
+    "name": "v6.7.0",
+    "published_at": "March 23 2023",
+    "symbol": "Uo",
+    "tag_name": "v6.7.0",
+    "type": "minor",
+    "version": "6.7.0"
+  },
+  {
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.2...v6.6.3\">6.6.3</a> (2023-03-22)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>menu:</strong> main content is not scrollable while swiping (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26976\">#26976</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/88bd8a47c5e844d1d3a2b3b13621826faf776afb\">88bd8a4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/21193\">#21193</a></li>\n</ul>\n",
+    "element": "Nickel",
+    "name": "v6.6.3",
+    "published_at": "March 22 2023",
+    "symbol": "Ni",
+    "tag_name": "v6.6.3",
+    "type": "patch",
+    "version": "6.6.3"
+  },
   {
     "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v6.6.2\">6.6.2</a> (2023-03-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>accordion:</strong> include margins during expand animation (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26390\">#26390</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f80991813ae8873d8ef6038b0aeb763d727f402e\">f809918</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26381\">#26381</a></li>\n<li><strong>IonicSlides:</strong> remove unnecessary autoplay option (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26935\">#26935</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b8f893731471052df198824b7ece47606ffcc500\">b8f8937</a>)</li>\n<li><strong>radio:</strong> checked state is updated when value changes (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26936\">#26936</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/27a5356fa2b72073d565e9d6f527107869faa3ee\">27a5356</a>)</li>\n<li><strong>react/vue:</strong> properly switch ionicon based on the mode when ios/md is set (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26924\">#26924</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae\">1eb9a08</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26207\">#26207</a></li>\n<li><strong>textarea:</strong> inherit tabindex to inner textarea (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26945\">#26945</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2c68d01b898a2f879445b8b64014189afe1255d7\">2c68d01</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26944\">#26944</a></li>\n</ul>\n",
     "element": "Nickel",
@@ -18,35 +58,5 @@
     "tag_name": "v6.6.1",
     "type": "patch",
     "version": "6.6.1"
-  },
-  {
-    "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.7...v6.6.0\">6.6.0</a> (2023-03-01)</h1>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>modal:</strong> dialog styles work on old chrome versions (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26746\">#26746</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/00d10f5f6ad53850505bdad94b659b8801a3309d\">00d10f5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26745\">#26745</a></li>\n</ul>\n<h3>Features</h3>\n<ul>\n<li><strong>datetime:</strong> add ability to specify custom colors for specific dates (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26775\">#26775</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de\">2a761af</a>)</li>\n<li><strong>picker-column:</strong> assign custom aria-labels to column options (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26749\">#26749</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/daa89a26ac8fa655c56c9447a8635e7c436e4f63\">daa89a2</a>)</li>\n<li><strong>toast:</strong> add stacked buttons functionality (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26790\">#26790</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fc5fcc064dec5256836e9622125b5e499ef00975\">fc5fcc0</a>)</li>\n</ul>\n",
-    "element": "Nickel",
-    "name": "v6.6.0",
-    "published_at": "March 1 2023",
-    "symbol": "Ni",
-    "tag_name": "v6.6.0",
-    "type": "minor",
-    "version": "6.6.0"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.6...v6.5.7\">6.5.7</a> (2023-03-01)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>content:</strong> fullscreen values are recomputed on visible content (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26847\">#26847</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6dcd98b26ab8fd3bf0092416d613bf051fbdeacf\">6dcd98b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26844\">#26844</a></li>\n<li><strong>modal:</strong> keyboard listener removed on dismiss (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26856\">#26856</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b4bcba353386b4d5d8d396e61ece421a15d42ff0\">b4bcba3</a>)</li>\n<li><strong>overlays:</strong> focus trap refs cleared on dismiss (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26855\">#26855</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8d1d0fa0c7a42a3c21a471131ba454774b26c314\">8d1d0fa</a>)</li>\n</ul>\n",
-    "element": "Cobalt",
-    "name": "v6.5.7",
-    "published_at": "March 1 2023",
-    "symbol": "Co",
-    "tag_name": "v6.5.7",
-    "type": "patch",
-    "version": "6.5.7"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.5.5...v6.5.6\">6.5.6</a> (2023-02-22)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>card:</strong> border radius does not overflow on paint in Safari (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26539\">#26539</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/df5c8e231825b5e5b6923f322c94224a00d3b309\">df5c8e2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26529\">#26529</a></li>\n</ul>\n",
-    "element": "Cobalt",
-    "name": "v6.5.6",
-    "published_at": "February 22 2023",
-    "symbol": "Co",
-    "tag_name": "v6.5.6",
-    "type": "patch",
-    "version": "6.5.6"
   }
 ]

From 2e3b7bbf065149c0e95f8b8fb0ed2172acde112b Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 31 Mar 2023 09:07:23 -0500
Subject: [PATCH 296/469] docs(migration): fix header levels in v4 migration
 guide (#2872)

---
 docs/updating/4-0.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/updating/4-0.md b/docs/updating/4-0.md
index ac769548707..db354f10222 100644
--- a/docs/updating/4-0.md
+++ b/docs/updating/4-0.md
@@ -30,7 +30,7 @@ We suggest the following general process when migrating an existing application
 
 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
+### 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:
 
@@ -41,7 +41,7 @@ $ npm install @ionic/angular@v4-lts
 
 While migrating an app, update the imports from `ionic-angular` to `@ionic/angular`.
 
-## Project structure
+### 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.
 
@@ -133,11 +133,11 @@ See the following `ionic.config.json` as an example:
 }
 ```
 
-## RxJS Changes
+### 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
+### 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.
 
@@ -145,7 +145,7 @@ Older events like `ionViewDidLoad`, `ionViewCanLeave`, and `ionViewCanEnter` hav
 
 For more details, check out the [router-outlet docs](../api/router-outlet.md)
 
-## Overlay Components
+### 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.
 
@@ -183,7 +183,7 @@ async showAlert() {
 }
 ```
 
-## Navigation
+### 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.
 
@@ -191,7 +191,7 @@ To provide the platform-specific animations that users are used to, we have crea
 
 For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md).
 
-## Lazy Loading
+### Lazy Loading
 
 Since Navigation has changed, the mechanism for lazy loading has also changed in V4.
 
@@ -241,7 +241,7 @@ 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
+### 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>.
 

From de20325d75d6ceae23ff80a6380fbd65f30b58e8 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Fri, 31 Mar 2023 09:45:13 -0500
Subject: [PATCH 297/469] docs(migration): update versioned migration guide to
 link to latest version of page (#2871)

Co-authored-by: skofgar <skofgar@users.noreply.github.com>
---
 .../version-v5/reference/migration.md         | 301 +----------------
 .../version-v6/reference/migration.md         | 303 +-----------------
 2 files changed, 7 insertions(+), 597 deletions(-)

diff --git a/versioned_docs/version-v5/reference/migration.md b/versioned_docs/version-v5/reference/migration.md
index bc7d50c7224..4b6405a5c55 100644
--- a/versioned_docs/version-v5/reference/migration.md
+++ b/versioned_docs/version-v5/reference/migration.md
@@ -9,303 +9,8 @@ import TabItem from '@theme/TabItem';
 
 ## 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.
+Please see the [Ionic 5 Migration Guide](/docs/updating/5-0).
 
-### API and CSS Updates
+## Migrating to Ionic 4.0
 
-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.
+Please see the [Ionic 4 Migration Guide](/docs/updating/4-0).
\ No newline at end of file
diff --git a/versioned_docs/version-v6/reference/migration.md b/versioned_docs/version-v6/reference/migration.md
index b7f5c132cad..94ef0f284f0 100644
--- a/versioned_docs/version-v6/reference/migration.md
+++ b/versioned_docs/version-v6/reference/migration.md
@@ -16,307 +16,12 @@ import TabItem from '@theme/TabItem';
 
 ## Migrating from Ionic 5.x to Ionic 6.x
 
-Please see the [Ionic 6 Migration Guide](../intro/upgrading-to-ionic-6).
+Please see the [Ionic 6 Migration Guide](/docs/updating/6-0).
 
 ## 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.
+Please see the [Ionic 5 Migration Guide](/docs/updating/5-0).
 
-### API and CSS Updates
+## Migrating to Ionic 4.0
 
-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/main/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/main/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/main/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.
+Please see the [Ionic 4 Migration Guide](/docs/updating/4-0).
\ No newline at end of file

From b452f51b1595b103f5ca831dc6125de6460d1c83 Mon Sep 17 00:00:00 2001
From: John Wheeler <73669769+johnwheeler-prod@users.noreply.github.com>
Date: Fri, 31 Mar 2023 12:13:38 -0400
Subject: [PATCH 298/469] =?UTF-8?q?chore(docs=20contributing):=20update=20?=
 =?UTF-8?q?code=20of=20conduct=20to=20link=20out=20to=20full=20=E2=80=A6?=
 =?UTF-8?q?=20(#2875)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/contributing/coc.md                      | 2 ++
 versioned_docs/version-v5/contributing/coc.md | 2 ++
 versioned_docs/version-v6/contributing/coc.md | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/docs/contributing/coc.md b/docs/contributing/coc.md
index 5e9c1a94d20..c8130c11329 100644
--- a/docs/contributing/coc.md
+++ b/docs/contributing/coc.md
@@ -9,3 +9,5 @@ We promise to extend courtesy and respect to everyone involved in this project r
 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>.
+
+Please click <a href="https://ionic.io/code-of-conduct" target="_blank" rel="noopener">here</a> to review to Ionic's full code of conduct.
diff --git a/versioned_docs/version-v5/contributing/coc.md b/versioned_docs/version-v5/contributing/coc.md
index 5e9c1a94d20..c8130c11329 100644
--- a/versioned_docs/version-v5/contributing/coc.md
+++ b/versioned_docs/version-v5/contributing/coc.md
@@ -9,3 +9,5 @@ We promise to extend courtesy and respect to everyone involved in this project r
 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>.
+
+Please click <a href="https://ionic.io/code-of-conduct" target="_blank" rel="noopener">here</a> to review to Ionic's full code of conduct.
diff --git a/versioned_docs/version-v6/contributing/coc.md b/versioned_docs/version-v6/contributing/coc.md
index 5e9c1a94d20..c8130c11329 100644
--- a/versioned_docs/version-v6/contributing/coc.md
+++ b/versioned_docs/version-v6/contributing/coc.md
@@ -9,3 +9,5 @@ We promise to extend courtesy and respect to everyone involved in this project r
 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>.
+
+Please click <a href="https://ionic.io/code-of-conduct" target="_blank" rel="noopener">here</a> to review to Ionic's full code of conduct.

From b0ca8da7c338cd51790e0c998d902e96434639ea Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 4 Apr 2023 11:03:56 -0400
Subject: [PATCH 299/469] chore(i18n): remove production check for Japanese
 docs (#2825)

---
 scripts/i18n.sh | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index cb4f06ec09c..a0950441fb8 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -2,9 +2,7 @@
 set -o errexit
 set -o nounset
 
-if [ "${VERCEL_ENV:-preview}" == "production" ]; then
-    mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v6/
-    curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
-      tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v6/ --strip-components 2 ionic-docs-translation-jp/docs
-    node scripts/api-ja.js
-fi
+mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v6/
+curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
+  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v6/ --strip-components 2 ionic-docs-translation-jp/docs
+node scripts/api-ja.js

From ff6b2d2bb4ccf64e083d2d135586d168167bff58 Mon Sep 17 00:00:00 2001
From: Robert G <rob@anicyber.com>
Date: Wed, 5 Apr 2023 15:30:04 -0400
Subject: [PATCH 300/469] docs(deployment): typo with windows requirements
 (#2879)

---
 docs/deployment/desktop-app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/deployment/desktop-app.md b/docs/deployment/desktop-app.md
index 517b16d4c15..430bd0d1b11 100644
--- a/docs/deployment/desktop-app.md
+++ b/docs/deployment/desktop-app.md
@@ -30,7 +30,7 @@ The Electron team has a detailed guide on how to publish an app for macOS. Pleas
 
 ### Requirements
 
-There are two hard requirements for publishing an app on the Windows app store
+There are four 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)

From 7485c05ee4ad215eedd0f429b95013bdafe190f2 Mon Sep 17 00:00:00 2001
From: John Wheeler <73669769+johnwheeler-prod@users.noreply.github.com>
Date: Wed, 5 Apr 2023 20:37:58 -0400
Subject: [PATCH 301/469] chore(coc email): update email to devrel (#2881)

---
 docs/contributing/coc.md                      | 2 +-
 versioned_docs/version-v5/contributing/coc.md | 2 +-
 versioned_docs/version-v6/contributing/coc.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/contributing/coc.md b/docs/contributing/coc.md
index c8130c11329..b347ee6e9b0 100644
--- a/docs/contributing/coc.md
+++ b/docs/contributing/coc.md
@@ -8,6 +8,6 @@ We promise to extend courtesy and respect to everyone involved in this project r
 
 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>.
+If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at <a href="mailto:devrel@ionic.io">devrel@ionic.io</a>.
 
 Please click <a href="https://ionic.io/code-of-conduct" target="_blank" rel="noopener">here</a> to review to Ionic's full code of conduct.
diff --git a/versioned_docs/version-v5/contributing/coc.md b/versioned_docs/version-v5/contributing/coc.md
index c8130c11329..b347ee6e9b0 100644
--- a/versioned_docs/version-v5/contributing/coc.md
+++ b/versioned_docs/version-v5/contributing/coc.md
@@ -8,6 +8,6 @@ We promise to extend courtesy and respect to everyone involved in this project r
 
 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>.
+If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at <a href="mailto:devrel@ionic.io">devrel@ionic.io</a>.
 
 Please click <a href="https://ionic.io/code-of-conduct" target="_blank" rel="noopener">here</a> to review to Ionic's full code of conduct.
diff --git a/versioned_docs/version-v6/contributing/coc.md b/versioned_docs/version-v6/contributing/coc.md
index c8130c11329..b347ee6e9b0 100644
--- a/versioned_docs/version-v6/contributing/coc.md
+++ b/versioned_docs/version-v6/contributing/coc.md
@@ -8,6 +8,6 @@ We promise to extend courtesy and respect to everyone involved in this project r
 
 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>.
+If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at <a href="mailto:devrel@ionic.io">devrel@ionic.io</a>.
 
 Please click <a href="https://ionic.io/code-of-conduct" target="_blank" rel="noopener">here</a> to review to Ionic's full code of conduct.

From 0d070be3f6c3020b3d536149df24622a0dfe0cf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 6 Apr 2023 14:46:36 +0900
Subject: [PATCH 302/469] fix(path): fix language path

---
 docusaurus.config.js                          | 11 +++++--
 .../reference/ReleaseNotes/release-notes.json | 30 ++++++++++++-------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 9ead9fe948f..10820a7c0d8 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -13,10 +13,9 @@ module.exports = {
   url: 'https://ionicframework.jp',
   baseUrl: `${BASE_URL}/`,
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'ja'],
+    defaultLocale: 'ja',
+    locales: ['ja'],
     localeConfigs: {
-      en: { label: 'English' },
       ja: { label: '日本語' },
     },
   },
@@ -188,6 +187,12 @@ module.exports = {
           position: 'right',
           dropdownItemsBefore: [],
           dropdownItemsAfter: [
+            {
+              href: 'https://ionicframework.com/docs',
+              label: 'English',
+              target: '_self',
+              rel: null,
+            },
             {
               href: 'https://ionicframework.com/translate',
               label: 'Translate',
diff --git a/src/components/page/reference/ReleaseNotes/release-notes.json b/src/components/page/reference/ReleaseNotes/release-notes.json
index 128624faaf5..0d8ab485b48 100644
--- a/src/components/page/reference/ReleaseNotes/release-notes.json
+++ b/src/components/page/reference/ReleaseNotes/release-notes.json
@@ -1,4 +1,14 @@
 [
+  {
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v7.0.0...v7.0.1\">7.0.1</a> (2023-04-05)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>breadcrumbs:</strong> color attribute shows on DOM for Vue (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27068\">#27068</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/141ced50103098fd711e0088ea8be4efdaadd0a9\">141ced5</a>)</li>\n<li><strong>item-divider:</strong> removal of unneeded margin unset (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27042\">#27042</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d925237082cd2f55a573ddb0301afcbd84f4fda0\">d925237</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/17012\">#17012</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/27024\">ionic-team/ionic-framework#27024</a></li>\n<li><strong>item-divider:</strong> set padding-end for md (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27019\">#27019</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/426913d0de50e65a76b029258daa09e6567c6515\">426913d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23785\">#23785</a></li>\n<li><strong>menu:</strong> update location when dynamically changing side or doc dir (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27079\">#27079</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a35886e71c7c4b8abdd01ad33d92828c04249dc5\">a35886e</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25601\">#25601</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/19489\">#19489</a></li>\n<li><strong>picker-column-internal:</strong> hide empty picker items from screenreaders (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27038\">#27038</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/4e7424de035888e324b03af321c90ebbb6402746\">4e7424d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26809\">#26809</a></li>\n<li><strong>refresher:</strong> set overflow styles when using custom scroll target (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27058\">#27058</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/adbb50ca5b92793ba002e4d704b2a643b92aabc7\">adbb50c</a>)</li>\n<li><strong>vue:</strong> v-model props have correct type (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27067\">#27067</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/14145dcaebef4dde7654317597fdee6a0cdb4bfa\">14145dc</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27057\">#27057</a></li>\n</ul>\n",
+    "element": "Unobtainium",
+    "name": "v7.0.1",
+    "published_at": "April 5 2023",
+    "symbol": "Uo",
+    "tag_name": "v7.0.1",
+    "type": "patch",
+    "version": "7.0.1"
+  },
   {
     "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.5...v7.0.0\">7.0.0</a> (2023-03-29)</h1>\n<p>Enjoy! See <a href=\"https://ionicframework.com/docs/updating/7-0\">https://ionicframework.com/docs/updating/7-0</a> for a migration guide.</p>\n",
     "element": "Unobtainium",
@@ -9,6 +19,16 @@
     "type": "major",
     "version": "7.0.0"
   },
+  {
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.7.1...v6.7.2\">6.7.2</a> (2023-04-05)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>item-divider:</strong> set padding-end for md (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27070\">#27070</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/214e83529f7115852c27a37869c8231330fdb8ac\">214e835</a>)</li>\n<li><strong>picker-column-internal:</strong> hide empty picker items from screenreaders (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27114\">#27114</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3ecfb9ce43d9d5cf93f1f2be26a0922a16894362\">3ecfb9c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26809\">#26809</a></li>\n</ul>\n",
+    "element": "Unobtainium",
+    "name": "v6.7.2",
+    "published_at": "April 5 2023",
+    "symbol": "Uo",
+    "tag_name": "v6.7.2",
+    "type": "patch",
+    "version": "6.7.2"
+  },
   {
     "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.7.0...v6.7.1\">6.7.1</a> (2023-03-29)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>item-sliding:</strong> open method works with items added async (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27035\">#27035</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/521063bf241dc2c55bcd02a92ed8a418cfec6b1e\">521063b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26991\">#26991</a></li>\n<li><strong>item:</strong> use thumbnail's size when present (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27014\">#27014</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6cecdf41451a5c7aa908494dfad9fab1496a0c6c\">6cecdf4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22935\">#22935</a></li>\n<li><strong>radio-group:</strong> radios participate in form submission (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27018\">#27018</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3b99c31bab41bf7fcec340ac7159d3e8fce126c1\">3b99c31</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27016\">#27016</a></li>\n<li><strong>select:</strong> inherit white-space in select-text to allow text wrapping (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26973\">#26973</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/19c1e25399ca18c8e6a8dd39c0131979c0bb01e9\">19c1e25</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19949\">#19949</a></li>\n</ul>\n",
     "element": "Unobtainium",
@@ -48,15 +68,5 @@
     "tag_name": "v6.6.2",
     "type": "patch",
     "version": "6.6.2"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v6.6.1\">6.6.1</a> (2023-03-08)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> keepContentsMounted modal is sized correctly (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26917\">#26917</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572\">8d184c8</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26916\">#26916</a></li>\n<li><strong>button:</strong> show correct activated state for ios (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26900\">#26900</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c\">67815cc</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22468\">#22468</a></li>\n<li><strong>datetime-button:</strong> time-only values are parsed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26852\">#26852</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f54fc188843af52e723e06402e01ef92717e541f\">f54fc18</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26851\">#26851</a></li>\n<li><strong>datetime:</strong> resolve import error in stencil apps (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26909\">#26909</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69\">48c45af</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26908\">#26908</a></li>\n<li><strong>menu, split-pane:</strong> ssr does not fail on null customElements check (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26854\">#26854</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475\">451d220</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24714\">#24714</a></li>\n<li><strong>modal:</strong> avoid chrome memory leak bug (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26911\">#26911</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd\">a3f8e28</a>)</li>\n<li><strong>react:</strong> inline overlays dismiss when parent component unmounts (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26245\">#26245</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8\">c0e1bf9</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25775\">#25775</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/26185\">#26185</a></li>\n</ul>\n",
-    "element": "Nickel",
-    "name": "v6.6.1",
-    "published_at": "March 8 2023",
-    "symbol": "Ni",
-    "tag_name": "v6.6.1",
-    "type": "patch",
-    "version": "6.6.1"
   }
 ]

From 94d998ed7b715526c79e1c1f82fcaae233217c0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 6 Apr 2023 15:07:30 +0900
Subject: [PATCH 303/469] fix(lang): default path change to be en(if Japanese

---
 docusaurus.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 10820a7c0d8..7077838ff24 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -13,10 +13,10 @@ module.exports = {
   url: 'https://ionicframework.jp',
   baseUrl: `${BASE_URL}/`,
   i18n: {
-    defaultLocale: 'ja',
-    locales: ['ja'],
+    defaultLocale: 'en',
+    locales: ['en'],
     localeConfigs: {
-      ja: { label: '日本語' },
+      en: { label: '日本語' },
     },
   },
   onBrokenLinks: 'warn',

From 91a7d91471a3837e05c8d8b61a7ca6db0ebbd03b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 6 Apr 2023 16:05:55 +0900
Subject: [PATCH 304/469] feat(api): update api translate

---
 scripts/data/translated-api.json              | 1652 +++++++++++++++--
 scripts/data/translated-cache.json            |  154 +-
 .../.detection/api/accordion-group.json       |    4 +-
 src/translate/.detection/api/accordion.json   |    2 +-
 .../.detection/api/action-sheet.json          |   80 +-
 src/translate/.detection/api/alert.json       |   74 +-
 src/translate/.detection/api/breadcrumbs.json |    2 +-
 src/translate/.detection/api/checkbox.json    |  104 +-
 src/translate/.detection/api/content.json     |    2 +-
 src/translate/.detection/api/datetime.json    |    8 +-
 .../api/infinite-scroll-content.json          |    2 +-
 src/translate/.detection/api/input.json       |  240 ++-
 src/translate/.detection/api/item.json        |   28 +-
 src/translate/.detection/api/loading.json     |   74 +-
 src/translate/.detection/api/modal.json       |   31 +-
 src/translate/.detection/api/picker.json      |   72 +
 src/translate/.detection/api/popover.json     |   10 +-
 src/translate/.detection/api/radio.json       |   82 +-
 src/translate/.detection/api/range.json       |   76 +-
 .../.detection/api/refresher-content.json     |    4 +-
 src/translate/.detection/api/searchbar.json   |   16 +-
 src/translate/.detection/api/segment.json     |    5 +-
 src/translate/.detection/api/select.json      |  253 ++-
 src/translate/.detection/api/tab-button.json  |    2 +-
 src/translate/.detection/api/textarea.json    |  243 ++-
 src/translate/.detection/api/toast.json       |   74 +-
 src/translate/.detection/api/toggle.json      |  104 +-
 src/translate/api/accordion-group.json        |    4 +-
 src/translate/api/accordion.json              |    2 +-
 src/translate/api/action-sheet.json           |   80 +-
 src/translate/api/alert.json                  |   74 +-
 src/translate/api/breadcrumbs.json            |    2 +-
 src/translate/api/checkbox.json               |  104 +-
 src/translate/api/content.json                |    2 +-
 src/translate/api/datetime.json               |    8 +-
 .../api/infinite-scroll-content.json          |    2 +-
 src/translate/api/input.json                  |  240 ++-
 src/translate/api/item.json                   |   28 +-
 src/translate/api/loading.json                |   74 +-
 src/translate/api/modal.json                  |   31 +-
 src/translate/api/picker.json                 |   72 +
 src/translate/api/popover.json                |   10 +-
 src/translate/api/radio.json                  |   82 +-
 src/translate/api/range.json                  |   76 +-
 src/translate/api/refresher-content.json      |    4 +-
 src/translate/api/searchbar.json              |   16 +-
 src/translate/api/segment.json                |    5 +-
 src/translate/api/select.json                 |  253 ++-
 src/translate/api/tab-button.json             |    2 +-
 src/translate/api/textarea.json               |  243 ++-
 src/translate/api/toast.json                  |   74 +-
 src/translate/api/toggle.json                 |  104 +-
 52 files changed, 4571 insertions(+), 419 deletions(-)

diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 364b8184327..962eb059ddb 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -134,7 +134,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "アコーディオングループの値です。",
+          "docs": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`",
           "docsTags": [],
           "values": [
             {
@@ -162,7 +162,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "valueプロパティが変更されたときに発行されます。",
+          "docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
           "docsTags": []
         }
       ],
@@ -291,7 +291,7 @@
           "mutable": false,
           "attr": "toggle-icon-slot",
           "reflectToAttr": false,
-          "docs": "トグルアイコンを配置する `ion-item` の内側のslot。デフォルトは `'end'` です。",
+          "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`.",
           "docsTags": [],
           "default": "'end'",
           "values": [
@@ -506,6 +506,23 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-open",
+          "reflectToAttr": false,
+          "docs": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "keyboardClose",
           "type": "boolean",
@@ -597,6 +614,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [
@@ -655,13 +691,31 @@
         }
       ],
       "events": [
+        {
+          "event": "didDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the action sheet has dismissed.\nShorthand for ionActionSheetDidDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the action sheet has presented.\nShorthand for ionActionSheetWillDismiss.",
+          "docsTags": []
+        },
         {
           "event": "ionActionSheetDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが解除された後に発行されます。",
+          "docs": "Emitted after the action sheet has dismissed.",
           "docsTags": []
         },
         {
@@ -670,7 +724,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが提示された後に発行されます。",
+          "docs": "Emitted after the action sheet has presented.",
           "docsTags": []
         },
         {
@@ -679,7 +733,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが解除される前に発行されます。",
+          "docs": "Emitted before the action sheet has dismissed.",
           "docsTags": []
         },
         {
@@ -688,7 +742,25 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが提示される前に発行されます。",
+          "docs": "Emitted before the action sheet has presented.",
+          "docsTags": []
+        },
+        {
+          "event": "willDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the action sheet has dismissed.\nShorthand for ionActionSheetWillDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the action sheet has presented.\nShorthand for ionActionSheetWillPresent.",
           "docsTags": []
         }
       ],
@@ -990,6 +1062,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-open",
+          "reflectToAttr": false,
+          "docs": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "keyboardClose",
           "type": "boolean",
@@ -1031,7 +1120,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
           "docsTags": [],
           "values": [
             {
@@ -1103,6 +1192,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [
@@ -1161,6 +1269,24 @@
         }
       ],
       "events": [
+        {
+          "event": "didDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the alert has dismissed.\nShorthand for ionAlertDidDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the alert has presented.\nShorthand for ionAlertWillDismiss.",
+          "docsTags": []
+        },
         {
           "event": "ionAlertDidDismiss",
           "detail": "OverlayEventDetail<any>",
@@ -1196,6 +1322,24 @@
           "composed": true,
           "docs": "アラートが提示される前に発行されます。",
           "docsTags": []
+        },
+        {
+          "event": "willDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the alert has dismissed.\nShorthand for ionAlertWillDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the alert has presented.\nShorthand for ionAlertWillPresent.",
+          "docsTags": []
         }
       ],
       "listeners": [
@@ -2341,7 +2485,7 @@
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
           "mutable": false,
           "attr": "color",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。",
           "docsTags": [],
           "values": [
@@ -3835,6 +3979,10 @@
           "name": "virtualProp",
           "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
         },
+        {
+          "name": "slot",
+          "text": "- The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
+        },
         {
           "name": "part",
           "text": "container - The container for the checkbox mark."
@@ -3952,6 +4100,77 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "justify",
+          "type": "\"end\" | \"space-between\" | \"start\"",
+          "mutable": false,
+          "attr": "justify",
+          "reflectToAttr": false,
+          "docs": "How to pack the label and checkbox within a line.\n`\"start\"`: The label and checkbox will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and checkbox will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and checkbox will appear on opposite\nends of the line with space between the two elements.",
+          "docsTags": [],
+          "default": "'space-between'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "space-between",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "labelPlacement",
+          "type": "\"end\" | \"fixed\" | \"start\"",
+          "mutable": false,
+          "attr": "label-placement",
+          "reflectToAttr": false,
+          "docs": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docsTags": [],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "legacy",
+          "type": "boolean | undefined",
+          "mutable": false,
+          "attr": "legacy",
+          "reflectToAttr": false,
+          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -4025,7 +4244,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "チェックされたプロパティが変更されたときに発行されます。",
+          "docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
           "docsTags": []
         },
         {
@@ -4040,16 +4259,6 @@
       ],
       "listeners": [],
       "styles": [
-        {
-          "name": "--background",
-          "annotation": "prop",
-          "docs": "チェックボックスアイコンの背景"
-        },
-        {
-          "name": "--background-checked",
-          "annotation": "prop",
-          "docs": "チェックしたときのチェックボックスアイコンの背景"
-        },
         {
           "name": "--border-color",
           "annotation": "prop",
@@ -4075,6 +4284,16 @@
           "annotation": "prop",
           "docs": "チェックボックスアイコンのボーダー幅"
         },
+        {
+          "name": "--checkbox-background",
+          "annotation": "prop",
+          "docs": "チェックボックスアイコンの背景"
+        },
+        {
+          "name": "--checkbox-background-checked",
+          "annotation": "prop",
+          "docs": "チェックしたときのチェックボックスアイコンの背景"
+        },
         {
           "name": "--checkmark-color",
           "annotation": "prop",
@@ -4096,7 +4315,12 @@
           "docs": "チェックボックスアイコンの遷移"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
+        }
+      ],
       "parts": [
         {
           "name": "container",
@@ -4872,7 +5096,7 @@
           "mutable": true,
           "attr": "force-overscroll",
           "reflectToAttr": false,
-          "docs": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。",
+          "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, this does not disable the system bounce on iOS. That is an OS level setting.",
           "docsTags": [],
           "values": [
             {
@@ -5618,7 +5842,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "`ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`'default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
+          "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `\"default\"` value refers to the default\nlocale set by your device.",
           "docsTags": [],
           "default": "'default'",
           "values": [
@@ -5778,7 +6002,7 @@
           "mutable": false,
           "attr": "prefer-wheel",
           "reflectToAttr": false,
-          "docs": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。`'time'`, `'month'`, `'month-year'`, または `'year'`.",
+          "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -5795,7 +6019,7 @@
           "mutable": false,
           "attr": "presentation",
           "reflectToAttr": false,
-          "docs": "どの値を選択するか。`'date'`はカレンダーピッカーを表示し、月、日、年を選択します。`'time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。`'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。",
+          "docs": "Which values you want to select. `\"date\"` will show\na calendar picker to select the month, day, and year. `\"time\"`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `\"date-time\"` will show the date picker first and time picker second.\n`\"time-date\"` will show the time picker first and date picker second.",
           "docsTags": [],
           "default": "'date-time'",
           "values": [
@@ -5962,7 +6186,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "datetimeの値を有効なISO 8601 datetime文字列として指定します。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
+          "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nThis should be an array of strings only when `multiple=\"true\"`.",
           "docsTags": [],
           "values": [
             {
@@ -7275,7 +7499,7 @@
           "mutable": false,
           "attr": "loading-text",
           "reflectToAttr": false,
-          "docs": "ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。",
+          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
           "docsTags": [],
           "values": [
             {
@@ -7820,50 +8044,87 @@
           "required": false
         },
         {
-          "name": "debounce",
-          "type": "number",
+          "name": "counter",
+          "type": "boolean",
           "mutable": false,
-          "attr": "debounce",
+          "attr": "counter",
           "reflectToAttr": false,
-          "docs": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.",
           "docsTags": [],
-          "default": "0",
+          "default": "false",
           "values": [
             {
-              "type": "number"
+              "type": "boolean"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "counterFormatter",
+          "type": "((inputLength: number, maxLength: number) => string) | undefined",
           "mutable": false,
-          "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "`true`の場合、ユーザはInputと対話することができません。",
+          "docs": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
           "docsTags": [],
-          "default": "false",
           "values": [
             {
-              "type": "boolean"
+              "type": "((inputLength: number, maxLength: number) => string)"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
-          "name": "enterkeyhint",
-          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "name": "debounce",
+          "type": "number | undefined",
           "mutable": false,
-          "attr": "enterkeyhint",
+          "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
           "docsTags": [],
           "values": [
             {
-              "value": "done",
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "`true`の場合、ユーザはInputと対話することができません。",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "enterkeyhint",
+          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "mutable": false,
+          "attr": "enterkeyhint",
+          "reflectToAttr": false,
+          "docs": "どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "done",
               "type": "string"
             },
             {
@@ -7897,6 +8158,68 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "errorText",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "error-text",
+          "reflectToAttr": false,
+          "docs": "Text that is placed under the input and displayed when an error is detected.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "fill",
+          "type": "\"outline\" | \"solid\" | undefined",
+          "mutable": false,
+          "attr": "fill",
+          "reflectToAttr": false,
+          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "outline",
+              "type": "string"
+            },
+            {
+              "value": "solid",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "helperText",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "helper-text",
+          "reflectToAttr": false,
+          "docs": "Text that is placed under the input and displayed when no error is detected.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "inputmode",
           "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
@@ -7945,6 +8268,78 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "label",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "The visible label associated with the input.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "labelPlacement",
+          "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+          "mutable": false,
+          "attr": "label-placement",
+          "reflectToAttr": false,
+          "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the input in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the input in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.\n`\"stacked\"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docsTags": [],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            },
+            {
+              "value": "floating",
+              "type": "string"
+            },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "legacy",
+          "type": "boolean | undefined",
+          "mutable": false,
+          "attr": "legacy",
+          "reflectToAttr": false,
+          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "max",
           "type": "number | string | undefined",
@@ -8156,6 +8551,26 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "shape",
+          "type": "\"round\" | undefined",
+          "mutable": false,
+          "attr": "shape",
+          "reflectToAttr": false,
+          "docs": "The shape of the input. If \"round\" it will have an increased border radius.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "round",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "size",
           "type": "number | undefined",
@@ -8340,7 +8755,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "値が変更されたときに発行されます。",
+          "docs": "The `ionChange` event is fired for `<ion-input>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
           "docsTags": []
         },
         {
@@ -8354,11 +8769,11 @@
         },
         {
           "event": "ionInput",
-          "detail": "InputEvent",
+          "detail": "InputInputEventDetail",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "キーボード入力が発生したときに発します。",
+          "docs": "The `ionInput` event fires when the `value` of an `<ion-input>` element\nhas been changed.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
           "docsTags": []
         }
       ],
@@ -8369,11 +8784,46 @@
           "annotation": "prop",
           "docs": "Inputの背景"
         },
+        {
+          "name": "--border-color",
+          "annotation": "prop",
+          "docs": "Color of the border below the input when using helper text, error text, or counter"
+        },
+        {
+          "name": "--border-radius",
+          "annotation": "prop",
+          "docs": "Radius of the input"
+        },
+        {
+          "name": "--border-style",
+          "annotation": "prop",
+          "docs": "Style of the border below the input when using helper text, error text, or counter"
+        },
+        {
+          "name": "--border-width",
+          "annotation": "prop",
+          "docs": "Width of the border below the input when using helper text, error text, or counter"
+        },
         {
           "name": "--color",
           "annotation": "prop",
           "docs": "Inputのテキストの色"
         },
+        {
+          "name": "--highlight-color-focused",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the input when focused"
+        },
+        {
+          "name": "--highlight-color-invalid",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the input when invalid"
+        },
+        {
+          "name": "--highlight-color-valid",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the input when valid"
+        },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
@@ -9131,11 +9581,11 @@
         },
         {
           "name": "slot",
-          "text": "helper - Content is placed under the item and displayed when no error is detected."
+          "text": "helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
         },
         {
           "name": "slot",
-          "text": "error - Content is placed under the item and displayed when an error is detected."
+          "text": "error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
         },
         {
           "name": "part",
@@ -9227,8 +9677,14 @@
           "attr": "counter",
           "reflectToAttr": false,
           "docs": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
+            }
+          ],
           "default": "false",
+          "deprecation": "Use the `counter` property on `ion-input` or `ion-textarea` instead.",
           "values": [
             {
               "type": "boolean"
@@ -9243,7 +9699,13 @@
           "mutable": false,
           "reflectToAttr": false,
           "docs": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
+            }
+          ],
+          "deprecation": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.",
           "values": [
             {
               "type": "((inputLength: number, maxLength: number) => string)"
@@ -9333,7 +9795,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`modeでのみ使用可能です。",
+          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
           "docsTags": [],
           "values": [
             {
@@ -9552,7 +10014,7 @@
       "events": [],
       "listeners": [
         {
-          "event": "ionChange",
+          "event": "ionInput",
           "capture": false,
           "passive": false
         },
@@ -9755,11 +10217,11 @@
         },
         {
           "name": "error",
-          "docs": "項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。"
+          "docs": "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
         },
         {
           "name": "helper",
-          "docs": "項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。"
+          "docs": "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
         },
         {
           "name": "start",
@@ -10338,6 +10800,23 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-open",
+          "reflectToAttr": false,
+          "docs": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "keyboardClose",
           "type": "boolean",
@@ -10379,7 +10858,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "ロードインジケータに表示するテキストコンテンツは任意です。",
+          "docs": "Optional text content to display in the loading indicator.\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
           "docsTags": [],
           "values": [
             {
@@ -10504,6 +10983,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [
@@ -10563,21 +11061,39 @@
       ],
       "events": [
         {
-          "event": "ionLoadingDidDismiss",
+          "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ローディングが解除された後に発行されます。",
+          "docs": "Emitted after the loading indicator has dismissed.\nShorthand for ionLoadingDidDismiss.",
           "docsTags": []
         },
         {
-          "event": "ionLoadingDidPresent",
+          "event": "didPresent",
           "detail": "void",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ローディングが提示された後に発行されます。",
+          "docs": "Emitted after the loading indicator has presented.\nShorthand for ionLoadingWillDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "ionLoadingDidDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "ローディングが解除された後に発行されます。",
+          "docsTags": []
+        },
+        {
+          "event": "ionLoadingDidPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "ローディングが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -10597,6 +11113,24 @@
           "composed": true,
           "docs": "ローディングが提示される前に発行されます。",
           "docsTags": []
+        },
+        {
+          "event": "willDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the loading indicator has dismissed.\nShorthand for ionLoadingWillDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the loading indicator has presented.\nShorthand for ionLoadingWillPresent.",
+          "docsTags": []
         }
       ],
       "listeners": [],
@@ -11452,12 +11986,13 @@
         },
         {
           "name": "canDismiss",
-          "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean | undefined",
+          "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
           "mutable": false,
           "attr": "can-dismiss",
           "reflectToAttr": false,
           "docs": "モーダルが `dismiss` メソッドを呼び出したときに、終了できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。",
           "docsTags": [],
+          "default": "true",
           "values": [
             {
               "type": "((data?: any, role?: string"
@@ -11467,12 +12002,9 @@
             },
             {
               "type": "boolean"
-            },
-            {
-              "type": "undefined"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false
         },
         {
@@ -11699,29 +12231,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "swipeToClose",
-          "type": "boolean",
-          "mutable": false,
-          "attr": "swipe-to-close",
-          "reflectToAttr": false,
-          "docs": "`true`の場合、スワイプでモーダルを解除することができます。iOS modeでのみ適用されます。",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "- To prevent modals from dismissing, use canDismiss instead."
-            }
-          ],
-          "default": "false",
-          "deprecation": "- To prevent modals from dismissing, use canDismiss instead.",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "trigger",
           "type": "string | undefined",
@@ -12806,6 +13315,23 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-open",
+          "reflectToAttr": false,
+          "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "keyboardClose",
           "type": "boolean",
@@ -12878,6 +13404,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [
@@ -12952,6 +13497,24 @@
         }
       ],
       "events": [
+        {
+          "event": "didDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
+          "docsTags": []
+        },
         {
           "event": "ionPickerDidDismiss",
           "detail": "OverlayEventDetail<any>",
@@ -12987,6 +13550,24 @@
           "composed": true,
           "docs": "ピッカーが提示される前に発行されます。",
           "docsTags": []
+        },
+        {
+          "event": "willDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
+          "docsTags": []
         }
       ],
       "listeners": [],
@@ -13106,7 +13687,7 @@
           "mutable": true,
           "attr": "alignment",
           "reflectToAttr": false,
-          "docs": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` modeでは `'center'` で、`md` modeでは `'start'` です。",
+          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode.",
           "docsTags": [],
           "values": [
             {
@@ -13390,7 +13971,7 @@
           "mutable": false,
           "attr": "reference",
           "reflectToAttr": false,
-          "docs": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
+          "docs": "Describes what to position the popover relative to.\nIf `\"trigger\"`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `\"event\"`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
           "docsTags": [],
           "default": "'trigger'",
           "values": [
@@ -13429,7 +14010,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
+          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `\"start\"` and `\"end\"` values are RTL-aware,\nand the `\"left\"` and `\"right\"` values are not.",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -13467,7 +14048,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "ポップオーバーの幅を計算する方法を説明します。cover'` の場合、ポップオーバーの幅はトリガーの幅と一致します。auto'` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定されます。",
+          "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be determined by the content in\nthe popover.",
           "docsTags": [],
           "default": "'auto'",
           "values": [
@@ -13525,7 +14106,7 @@
           "mutable": false,
           "attr": "trigger-action",
           "reflectToAttr": false,
-          "docs": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
+          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `\"click\"`, the popover will be presented when the trigger is left clicked.\nIf `\"hover\"`, the popover will be presented when a pointer hovers over the trigger.\nIf `\"context-menu\"`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
           "docsTags": [],
           "default": "'click'",
           "values": [
@@ -14092,6 +14673,10 @@
           "name": "virtualProp",
           "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
         },
+        {
+          "name": "slot",
+          "text": "- The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
+        },
         {
           "name": "part",
           "text": "container - The container for the radio mark."
@@ -14175,6 +14760,77 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "justify",
+          "type": "\"end\" | \"space-between\" | \"start\"",
+          "mutable": false,
+          "attr": "justify",
+          "reflectToAttr": false,
+          "docs": "How to pack the label and radio within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.",
+          "docsTags": [],
+          "default": "'space-between'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "space-between",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "labelPlacement",
+          "type": "\"end\" | \"fixed\" | \"start\"",
+          "mutable": false,
+          "attr": "label-placement",
+          "reflectToAttr": false,
+          "docs": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docsTags": [],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "legacy",
+          "type": "boolean | undefined",
+          "mutable": false,
+          "attr": "legacy",
+          "reflectToAttr": false,
+          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -14274,7 +14930,12 @@
           "docs": "内側のチェック付きラジオのボーダー半径"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
+        }
+      ],
       "parts": [
         {
           "name": "container",
@@ -14305,6 +14966,10 @@
           "name": "virtualProp",
           "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
         },
+        {
+          "name": "slot",
+          "text": "label - The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
+        },
         {
           "name": "slot",
           "text": "start - Content is placed to the left of the range slider in LTR, and to the right in RTL."
@@ -14416,19 +15081,21 @@
         },
         {
           "name": "debounce",
-          "type": "number",
+          "type": "number | undefined",
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。",
+          "docs": "How long, in milliseconds, to wait to trigger the\n`ionInput` event after each change in the range value.",
           "docsTags": [],
-          "default": "0",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -14465,6 +15132,51 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "labelPlacement",
+          "type": "\"end\" | \"fixed\" | \"start\"",
+          "mutable": false,
+          "attr": "label-placement",
+          "reflectToAttr": false,
+          "docs": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docsTags": [],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "legacy",
+          "type": "boolean | undefined",
+          "mutable": false,
+          "attr": "legacy",
+          "reflectToAttr": false,
+          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "max",
           "type": "number",
@@ -14528,7 +15240,7 @@
           "reflectToAttr": false,
           "docs": "フォームデータとともに送信されるコントロールの名前。",
           "docsTags": [],
-          "default": "''",
+          "default": "this.rangeId",
           "values": [
             {
               "type": "string"
@@ -14662,7 +15374,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "valueプロパティが変更されたときに発行されます。",
+          "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
           "docsTags": []
         },
         {
@@ -14674,6 +15386,15 @@
           "docs": "レンジのフォーカスが合ったときに発します。",
           "docsTags": []
         },
+        {
+          "event": "ionInput",
+          "detail": "RangeChangeEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "The `ionInput` event is fired for `<ion-range>` elements when the value\nis modified. Unlike `ionChange`, `ionInput` is fired continuously\nwhile the user is dragging the knob.",
+          "docsTags": []
+        },
         {
           "event": "ionKnobMoveEnd",
           "detail": "RangeKnobMoveEndEventDetail",
@@ -14756,6 +15477,10 @@
           "name": "end",
           "docs": "コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。"
         },
+        {
+          "name": "label",
+          "docs": "The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
+        },
         {
           "name": "start",
           "docs": "コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。"
@@ -14827,7 +15552,7 @@
           "mutable": false,
           "attr": "pulling-text",
           "reflectToAttr": false,
-          "docs": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
           "docsTags": [],
           "values": [
             {
@@ -14904,7 +15629,7 @@
           "mutable": false,
           "attr": "refreshing-text",
           "reflectToAttr": false,
-          "docs": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
+          "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
           "docsTags": [],
           "values": [
             {
@@ -16323,19 +17048,21 @@
         },
         {
           "name": "debounce",
-          "type": "number",
+          "type": "number | undefined",
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
           "docsTags": [],
-          "default": "250",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16688,7 +17415,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "値が変更されたときに発行されます。",
+          "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
           "docsTags": []
         },
         {
@@ -16711,11 +17438,11 @@
         },
         {
           "event": "ionInput",
-          "detail": "KeyboardEvent",
+          "detail": "SearchbarInputEventDetail",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "キーボード入力が発生したときに発します。",
+          "docs": "Emitted when the `value` of the `ion-searchbar` element has changed.",
           "docsTags": []
         }
       ],
@@ -17266,16 +17993,13 @@
         },
         {
           "name": "value",
-          "type": "null | string | undefined",
+          "type": "string | undefined",
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
           "docs": "セグメントの価値",
           "docsTags": [],
           "values": [
-            {
-              "type": "null"
-            },
             {
               "type": "string"
             },
@@ -17413,6 +18137,61 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "color",
+          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": true,
+          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\nThis property is only available when using the modern select syntax.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "dark",
+              "type": "string"
+            },
+            {
+              "value": "light",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "secondary",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "tertiary",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            },
+            {
+              "type": "string & Record<never, never>"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "compareWith",
           "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
@@ -17455,6 +18234,30 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "fill",
+          "type": "\"outline\" | \"solid\" | undefined",
+          "mutable": false,
+          "attr": "fill",
+          "reflectToAttr": false,
+          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "outline",
+              "type": "string"
+            },
+            {
+              "value": "solid",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "interface",
           "type": "\"action-sheet\" | \"alert\" | \"popover\"",
@@ -17498,6 +18301,107 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "justify",
+          "type": "\"end\" | \"space-between\" | \"start\"",
+          "mutable": false,
+          "attr": "justify",
+          "reflectToAttr": false,
+          "docs": "How to pack the label and select within a line.\n`justify` does not apply when the label and select\nare on different lines when `labelPlacement` is set to\n`\"floating\"` or `\"stacked\"`.\n`\"start\"`: The label and select will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and select will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and select will appear on opposite\nends of the line with space between the two elements.",
+          "docsTags": [],
+          "default": "'space-between'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "space-between",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "The visible label associated with the select.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "labelPlacement",
+          "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+          "mutable": false,
+          "attr": "label-placement",
+          "reflectToAttr": false,
+          "docs": "Where to place the label relative to the select.\n`\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.\n`\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\nWhen using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`.",
+          "docsTags": [],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            },
+            {
+              "value": "floating",
+              "type": "string"
+            },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "legacy",
+          "type": "boolean | undefined",
+          "mutable": false,
+          "attr": "legacy",
+          "reflectToAttr": false,
+          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -17611,13 +18515,33 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "shape",
+          "type": "\"round\" | undefined",
+          "mutable": false,
+          "attr": "shape",
+          "reflectToAttr": false,
+          "docs": "The shape of the select. If \"round\" it will have an increased border radius.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "round",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "value",
           "type": "any",
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "セレクトの値です。",
+          "docs": "The value of the select.",
           "docsTags": [],
           "values": [
             {
@@ -17695,6 +18619,46 @@
       ],
       "listeners": [],
       "styles": [
+        {
+          "name": "--background",
+          "annotation": "prop",
+          "docs": "Background of the select"
+        },
+        {
+          "name": "--border-color Color of the select border",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--border-radius Radius of the select border",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--border-style Style of the select border",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--border-width Width of the select border",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--highlight-color-focused The color of the highlight on the select when focused",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--highlight-color-invalid The color of the highlight on the select when invalid",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--highlight-color-valid The color of the highlight on the select when valid",
+          "annotation": "prop",
+          "docs": ""
+        },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
@@ -17724,6 +18688,11 @@
           "name": "--placeholder-opacity",
           "annotation": "prop",
           "docs": "選択Placeholderテキストの不透明度"
+        },
+        {
+          "name": "--ripple-color",
+          "annotation": "prop",
+          "docs": "The color of the ripple effect on MD mode."
         }
       ],
       "slots": [],
@@ -17746,14 +18715,16 @@
         "ion-select-popover",
         "ion-popover",
         "ion-action-sheet",
-        "ion-alert"
+        "ion-alert",
+        "ion-icon"
       ],
       "dependencyGraph": {
         "ion-select": [
           "ion-select-popover",
           "ion-popover",
           "ion-action-sheet",
-          "ion-alert"
+          "ion-alert",
+          "ion-icon"
         ],
         "ion-select-popover": [
           "ion-item",
@@ -18871,7 +19842,7 @@
           "mutable": true,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは `'icon-top'` です。",
+          "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `\"icon-top\"`.",
           "docsTags": [],
           "values": [
             {
@@ -19434,10 +20405,10 @@
         {
           "name": "clearOnEdit",
           "type": "boolean",
-          "mutable": true,
+          "mutable": false,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
-          "docs": "`true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `\"password\"` のとき `true` で、それ以外のときは `false` です。",
+          "docs": "If `true`, the value will be cleared after focus upon edit.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19523,44 +20494,81 @@
           "required": false
         },
         {
-          "name": "debounce",
-          "type": "number",
+          "name": "counter",
+          "type": "boolean",
           "mutable": false,
-          "attr": "debounce",
+          "attr": "counter",
           "reflectToAttr": false,
-          "docs": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit.\nDevelopers must also set the `maxlength` property for the counter to be calculated correctly.",
           "docsTags": [],
-          "default": "0",
+          "default": "false",
           "values": [
             {
-              "type": "number"
+              "type": "boolean"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "counterFormatter",
+          "type": "((inputLength: number, maxLength: number) => string) | undefined",
           "mutable": false,
-          "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "`true`の場合、ユーザはテキストエリアと対話することができません。",
+          "docs": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
           "docsTags": [],
-          "default": "false",
           "values": [
             {
-              "type": "boolean"
+              "type": "((inputLength: number, maxLength: number) => string)"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
-          "name": "enterkeyhint",
-          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "name": "debounce",
+          "type": "number | undefined",
           "mutable": false,
-          "attr": "enterkeyhint",
+          "attr": "debounce",
+          "reflectToAttr": false,
+          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "`true`の場合、ユーザはテキストエリアと対話することができません。",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "enterkeyhint",
+          "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "mutable": false,
+          "attr": "enterkeyhint",
           "reflectToAttr": false,
           "docs": "どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter\"`, `\"done\"`, `\"go\"`, `\"next\"`, `\"previous\"`, `\"search\"`, and `\"send\"`.",
           "docsTags": [],
@@ -19600,6 +20608,68 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "errorText",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "error-text",
+          "reflectToAttr": false,
+          "docs": "Text that is placed under the textarea and displayed when an error is detected.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "fill",
+          "type": "\"outline\" | \"solid\" | undefined",
+          "mutable": false,
+          "attr": "fill",
+          "reflectToAttr": false,
+          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "outline",
+              "type": "string"
+            },
+            {
+              "value": "solid",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "helperText",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "helper-text",
+          "reflectToAttr": false,
+          "docs": "Text that is placed under the textarea and displayed when no error is detected.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "inputmode",
           "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
@@ -19648,13 +20718,85 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "label",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "The visible label associated with the textarea.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "labelPlacement",
+          "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+          "mutable": false,
+          "attr": "label-placement",
+          "reflectToAttr": false,
+          "docs": "Where to place the label relative to the textarea.\n`\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.\n`\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docsTags": [],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            },
+            {
+              "value": "floating",
+              "type": "string"
+            },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "legacy",
+          "type": "boolean | undefined",
+          "mutable": false,
+          "attr": "legacy",
+          "reflectToAttr": false,
+          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "maxlength",
           "type": "number | undefined",
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
-          "docs": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。",
+          "docs": "This attribute specifies the maximum number of characters that the user can enter.",
           "docsTags": [],
           "values": [
             {
@@ -19673,7 +20815,7 @@
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
-          "docs": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
+          "docs": "This attribute specifies the minimum number of characters that the user can enter.",
           "docsTags": [],
           "values": [
             {
@@ -19796,6 +20938,26 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "shape",
+          "type": "\"round\" | undefined",
+          "mutable": false,
+          "attr": "shape",
+          "reflectToAttr": false,
+          "docs": "The shape of the textarea. If \"round\" it will have an increased border radius.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "round",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "spellcheck",
           "type": "boolean",
@@ -19905,7 +21067,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "入力値が変化したときに発行されます。",
+          "docs": "The `ionChange` event is fired for `<ion-textarea>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the element loses focus after its value\nhas been modified.",
           "docsTags": []
         },
         {
@@ -19919,11 +21081,11 @@
         },
         {
           "event": "ionInput",
-          "detail": "InputEvent",
+          "detail": "TextareaInputEventDetail",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "キーボード入力が発生したときに発します。",
+          "docs": "The `ionInput` event fires when the `value` of an `<ion-textarea>` element\nhas been changed.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
           "docsTags": []
         }
       ],
@@ -19934,16 +21096,46 @@
           "annotation": "prop",
           "docs": "textareaの背景"
         },
+        {
+          "name": "--border-color",
+          "annotation": "prop",
+          "docs": "Color of the border below the textarea when using helper text, error text, or counter"
+        },
         {
           "name": "--border-radius",
           "annotation": "prop",
           "docs": "テキストエリアの境界半径"
         },
+        {
+          "name": "--border-style",
+          "annotation": "prop",
+          "docs": "Style of the border below the textarea when using helper text, error text, or counter"
+        },
+        {
+          "name": "--border-width",
+          "annotation": "prop",
+          "docs": "Width of the border below the textarea when using helper text, error text, or counter"
+        },
         {
           "name": "--color",
           "annotation": "prop",
           "docs": "本文の色"
         },
+        {
+          "name": "--highlight-color-focused",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the textarea when focused"
+        },
+        {
+          "name": "--highlight-color-invalid",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the textarea when invalid"
+        },
+        {
+          "name": "--highlight-color-valid",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the textarea when valid"
+        },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
@@ -20363,6 +21555,23 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-open",
+          "reflectToAttr": false,
+          "docs": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast dismisses. You will need to do that in your code.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "keyboardClose",
           "type": "boolean",
@@ -20426,7 +21635,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "乾杯の際に表示するメッセージ",
+          "docs": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
           "docsTags": [],
           "values": [
             {
@@ -20505,6 +21714,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [
@@ -20563,6 +21791,24 @@
         }
       ],
       "events": [
+        {
+          "event": "didDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the toast has dismissed.\nShorthand for ionToastDidDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after the toast has presented.\nShorthand for ionToastWillDismiss.",
+          "docsTags": []
+        },
         {
           "event": "ionToastDidDismiss",
           "detail": "OverlayEventDetail<any>",
@@ -20598,6 +21844,24 @@
           "composed": true,
           "docs": "トーストが提示される前に発行されます。",
           "docsTags": []
+        },
+        {
+          "event": "willDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the toast has dismissed.\nShorthand for ionToastWillDismiss.",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted before the toast has presented.\nShorthand for ionToastWillPresent.",
+          "docsTags": []
         }
       ],
       "listeners": [],
@@ -20733,6 +21997,10 @@
           "name": "virtualProp",
           "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
         },
+        {
+          "name": "slot",
+          "text": "- The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
+        },
         {
           "name": "part",
           "text": "track - The background track of the toggle."
@@ -20853,6 +22121,77 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "justify",
+          "type": "\"end\" | \"space-between\" | \"start\"",
+          "mutable": false,
+          "attr": "justify",
+          "reflectToAttr": false,
+          "docs": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.",
+          "docsTags": [],
+          "default": "'space-between'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "space-between",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "labelPlacement",
+          "type": "\"end\" | \"fixed\" | \"start\"",
+          "mutable": false,
+          "attr": "label-placement",
+          "reflectToAttr": false,
+          "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docsTags": [],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "legacy",
+          "type": "boolean | undefined",
+          "mutable": false,
+          "attr": "legacy",
+          "reflectToAttr": false,
+          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -20932,7 +22271,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "valueプロパティが変更されたときに発行されます。",
+          "docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
           "docsTags": []
         },
         {
@@ -20947,16 +22286,6 @@
       ],
       "listeners": [],
       "styles": [
-        {
-          "name": "--background",
-          "annotation": "prop",
-          "docs": "トグルの背景"
-        },
-        {
-          "name": "--background-checked",
-          "annotation": "prop",
-          "docs": "チェックしたときのトグルの背景"
-        },
         {
           "name": "--border-radius",
           "annotation": "prop",
@@ -21006,9 +22335,24 @@
           "name": "--handle-width",
           "annotation": "prop",
           "docs": "トグルハンドルの幅"
+        },
+        {
+          "name": "--track-background",
+          "annotation": "prop",
+          "docs": "Background of the toggle track"
+        },
+        {
+          "name": "--track-background-checked",
+          "annotation": "prop",
+          "docs": "Background of the toggle track when checked"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
         }
       ],
-      "slots": [],
       "parts": [
         {
           "name": "handle",
diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
index 1705648895c..5b50a67aac6 100644
--- a/scripts/data/translated-cache.json
+++ b/scripts/data/translated-cache.json
@@ -155,7 +155,7 @@
     "If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.": "`true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。",
     "The separator element between each breadcrumb.": "各パンくずの間のセパレータ要素です。",
     "The maximum number of breadcrumbs to show before collapsing.": "折りたたむ前に表示するパンくずの最大数を指定します。",
-    "Emitted when the collapsed indicator is clicked on.": "折りたたみインジケータがクリックされたときに発します。",
+    "Emitted when the collapsed indicator is clicked on.": "折りたたみインジケータがクリックされたときに発行されます。",
     "The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.": "折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
     "The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.": "折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。",
     "Opacity of the button when pressed": "ボタンが押されたときの不透明度",
@@ -300,7 +300,7 @@
     "The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple=\"true\"`.": "datetimeの値を有効なISO 8601 datetime文字列として指定します。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
     "Emitted when the datetime selection was cancelled.": "datetimeの選択がキャンセルされたときに発生します。",
     "Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.": "ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。",
-    "Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.": "datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
+    "Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.": "datetimeの内部状態をリセットするが、値は更新しません。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
     "A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to \"numberOfDates days\".": "選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは \"numberOfDates days \"に設定されています。",
     "Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.": "選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。",
     "If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.": "cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。`fixed`の場合、`ion-datetime`は固定幅になる。",
@@ -390,7 +390,7 @@
     "Emitted when the input has focus.": "Inputにフォーカスが当たったときに発行されます。",
     "Opacity of the input placeholder text": "InputのPlaceholderテキストの不透明度",
     "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input": "入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。",
-    "Emitted when a keyboard input occurred.": "キーボード入力が発生したときに発します。",
+    "Emitted when a keyboard input occurred.": "キーボード入力が発生したときに発行されます。",
     "Color of the input text": "Inputのテキストの色",
     "Font style of the input placeholder text": "InputのPlaceholderテキストのFont Style",
     "Returns the native `<input>` element used under the hood.": "要素の内部で使用されているネイティブの `<input>` 要素を返します。",
@@ -542,11 +542,11 @@
     "An id for the menu.": "メニューのIDです。",
     "Background of the menu": "メニューの背景",
     "If `true`, swiping the menu is enabled.": "`true`の場合、スワイプによるメニュー操作が有効になる。",
-    "Emitted when the menu is about to be closed.": "メニューが閉じられようとするときに発します。",
+    "Emitted when the menu is about to be closed.": "メニューが閉じられようとするときに発行されます。",
     "Height of the menu": "メニューの高さ",
-    "Emitted when the menu is closed.": "メニューが閉じられたときに発します。",
+    "Emitted when the menu is closed.": "メニューが閉じられたときに発行されます。",
     "The display type of the menu. Available options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.": "メニューの表示形式を指定します。利用可能なオプション。overlay\"`, `\"reveal\"`, `\"push\"`.",
-    "Emitted when the menu is about to be opened.": "メニューが開かれようとするときに発します。",
+    "Emitted when the menu is about to be opened.": "メニューが開かれようとするときに発行されます。",
     "Emitted when the menu is open.": "メニューが開いているときに発行されます。",
     "The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.": "メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。",
     "Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.": "メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。",
@@ -735,11 +735,11 @@
     "If `true`, the user cannot interact with the radio.": "`true`の場合、ユーザはラジオと対話することができません。",
     "Background of the range bar": "レンジバーの背景",
     "Minimum integer value of the range.": "範囲の最小の整数値。",
-    "Emitted when the range has focus.": "レンジのフォーカスが合ったときに発します。",
+    "Emitted when the range has focus.": "レンジのフォーカスが合ったときに発行されます。",
     "Maximum integer value of the range.": "範囲の最大整数値。",
     "Show two knobs.": "2つのノブを表示します。",
     "If `true`, the user cannot interact with the range.": "`true`の場合、ユーザは範囲と対話することができません。",
-    "Emitted when the range loses focus.": "レンジの焦点が合わなくなったときに発します。",
+    "Emitted when the range loses focus.": "レンジの焦点が合わなくなったときに発行されます。",
     "If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.": "`true`の場合、ステップの値に基づいてティックマークを表示します。snaps`が `true` の場合のみ適用される。",
     "How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.": "範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。",
     "the value of the range.": "範囲の値です。",
@@ -772,11 +772,11 @@
     "A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.": "プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOSデバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。",
     "The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
     "The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security)",
-    "Emitted while the user is pulling down the content and exposing the refresher.": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発します。",
+    "Emitted while the user is pulling down the content and exposing the refresher.": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発行されます。",
     "If `true`, the refresher will be hidden.": "`true`の場合、リフレッシャーは非表示となる。",
     "Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
     "Changes the refresher's state from `refreshing` to `cancelling`.": "リフレッシュの状態を `refreshing` から `cancelling` に変更します。",
-    "Emitted when the user begins to start pulling down.": "ユーザーが引き下げを開始するときに発します。",
+    "Emitted when the user begins to start pulling down.": "ユーザーが引き下げを開始するときに発行されます。",
     "Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`.": "非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。",
     "The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。",
     "The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.": "リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果です。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。",
@@ -803,7 +803,7 @@
     "Background of the router link": "ルーターリンクの背景",
     "If `true`, the router-outlet should animate the transition of components.": "`true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。",
     "This property allows to create custom transition using AnimationBuilder functions.": "このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
-    "Emitted when the route had changed": "ルートが変更されたときに発します。",
+    "Emitted when the route had changed": "ルートが変更されたときに発行されます。",
     "Navigate to the specified path.": "指定されたパスに移動します。",
     "Event emitted when the route is about to change": "ルートが変更されようとするときに発行されます。イベント",
     "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify an alternate prefix for all URL paths.": "URLのマッチング時に使用するルートパスです。デフォルトでは\"/\"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。",
@@ -884,11 +884,11 @@
     "The text to display instead of the selected option's value.": "選択されたオプションの値の代わりに表示するテキストです。",
     "Emitted when the select loses focus.": "セレクトのフォーカスが外れたときに発行されます。",
     "The interface the select should use: `action-sheet`, `popover` or `alert`.": "selectが使用するインターフェース。action-sheet`, `popover` または `alert`.",
-    "Emitted when the selection is cancelled.": "選択がキャンセルされたときに発します。",
+    "Emitted when the selection is cancelled.": "選択がキャンセルされたときに発行されます。",
     "The text to display on the cancel button.": "キャンセルボタンに表示するテキストです。",
     "Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.": "セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。",
     "Emitted when the overlay is dismissed.": "オーバーレイが解除されたときに発行されます。",
-    "Emitted when the select has focus.": "セレクトにフォーカスが当たったときに発します。",
+    "Emitted when the select has focus.": "セレクトにフォーカスが当たったときに発行されます。",
     "Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.": "alert`、`action-sheet`、`popover` インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意: `interfaceOptions` は `alert` インターフェースで `inputs` や `buttons` をオーバーライドしません。",
     "If `true`, the user cannot interact with the select.": "`true`の場合、ユーザはセレクトと対話することができません。",
     "If `true`, the select can accept multiple values.": "`true`の場合、selectは複数の値を受け入れることができる。",
@@ -1050,8 +1050,8 @@
     "Border radius of the toast": "トーストのボーダー半径",
     "The icon that appears next to the toast content.": "トーストの内容の横に表示されるアイコンです。",
     "The header text of the toast.": "乾杯のヘッダーテキストです。",
-    "Emitted before the toast has dismissed.": "乾杯が解散する前に発します。",
-    "Emitted after the toast has presented.": "トーストが提示された後に発します。",
+    "Emitted before the toast has dismissed.": "乾杯が解散する前に発行されます。",
+    "Emitted after the toast has presented.": "トーストが提示された後に発行されます。",
     "Background of the toggle when checked": "チェックしたときのトグルの背景",
     "Horizontal spacing around the toggle handle": "トグルハンドル周辺の横方向の間隔",
     "Border radius of the toggle handle": "トグルハンドルのボーダー半径",
@@ -1142,6 +1142,126 @@
     "Destination of private key file": "秘密鍵ファイルの保存先",
     "Location of private key file to use": "使用する秘密鍵のファイルの場所",
     "The name of your new project (e.g. `myApp`, `\"My App\"`)": "新しいプロジェクトの名前（例：`myApp`、`\"My App\"`）を指定します。",
-    "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)": "使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）"
+    "The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)": "使用するスターターテンプレート（例：`blank`, `tabs`; すべてを見るには `--list` を使用します。）",
+    "Emitted when the value property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the value property.": "クリックなどのユーザー操作により、valueプロパティが変化したときに発生します。プログラムによってvalueプロパティを設定した場合は、このイベントは発生しません。",
+    "The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when `multiple=\"true\"`": "アコーディオングループの値です。これは、どのアコーディオンを展開するかを制御します。これは、`multiple=\"true\"`のときだけ、文字列の配列でなければなりません。",
+    "The slot inside of `ion-item` to place the toggle icon. Defaults to `\"end\"`.": "トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `\"end\"` です。",
+    "Emitted before the action sheet has presented.": "アクションシートが提示される前に発行されます。",
+    "An ID corresponding to the trigger element that causes the action sheet to open when clicked.": "クリックするとアクションシートが開くトリガー要素に対応するID。",
+    "Emitted after the action sheet has presented.": "アクションシートが提示された後に発行されます。",
+    "Emitted after the action sheet has dismissed.": "アクションシートが解散した後に発行されます。",
+    "Emitted before the action sheet has dismissed.": "アクションシートが解散する前に発行されます。",
+    "Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.": "アクションシートが提示された後に発行されます。ionActionSheetWillDismissの略語。",
+    "Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.": "アクションシートが提示される前に発行されます。ionActionSheetWillPresentの略記。",
+    "Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.": "アクションシートが解散する前に発行されます。ionActionSheetWillDismissの略記。",
+    "If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.": "`true`の場合、アクションシートは開かれます。`false`の場合、アクションシートは閉じます。プレゼンテーションの細かな制御が必要な場合はこれを使用し、そうでない場合は actionSheetController または `trigger` プロパティを使用します。注意: アクションシートが終了しても、`isOpen`は自動的に`false`に戻されません。あなたのコードでそれを行う必要があります。",
+    "Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.": "アクションシートが解散した後に発行されます。ionActionSheetDidDismissの略記。",
+    "An ID corresponding to the trigger element that causes the alert to open when clicked.": "クリックされるとアラートが開くトリガー要素に対応するID。",
+    "Emitted after the alert has presented. Shorthand for ionAlertWillDismiss.": "アラートが提示された後に発行されます。ionAlertWillDismissの略記。",
+    "Emitted before the alert has presented. Shorthand for ionAlertWillPresent.": "アラートが提示される前に発行されます。ionAlertWillPresentの略記。",
+    "Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss.": "アラートが解除される前に発行されます。ionAlertWillDismissの略記。",
+    "Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss.": "アラートが解除された後に発行されます。ionAlertDidDismissの略記。",
+    "If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert dismisses. You will need to do that in your code.": "`true`の場合、アラートは開く。もし `false` ならば、アラートは閉じます。alertControllerや`trigger`プロパティを使用してください。注意: アラートが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
+    "The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.": "アラートに表示されるメインメッセージ。`message`には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタムHTMLを文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
+    "Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the checked property.": "クリックなどのユーザー操作によりcheckedプロパティが変更された場合に発生します。プログラムによってcheckedプロパティを設定した場合は、このイベントは発生しません。",
+    "How to pack the label and checkbox within a line. `\"start\"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `\"end\"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `\"space-between\"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.": "ラベルとチェックボックスを1行にまとめる方法。`\"start\"`：ラベルとチェックボックスは、LTRでは左に、RTLでは右に表示されます。`\"end\"`：ラベルとチェックボックスは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとチェックボックスは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
+    "Where to place the label relative to the checkbox. `\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "チェックボックスに対して相対的にラベルを配置する場所。`\"start\"`：ラベルはLTRではチェックボックスの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではチェックボックスの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
+    "The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox.": "チェックボックスと関連付けるラベルテキスト。\"labelPlacement\"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。",
+    "Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.": "`legacy`プロパティを`true`に設定すると、強制的にレガシーフォームコントロールのマークアップを使用することができます。Ionicは、チェックボックスが`aria-label`属性を使用しているか、デフォルトスロットにテキストがある場合にのみ、モダンなフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントは最新のフォームマークアップを使用するようオプトインされる予定です。",
+    "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。なお、これはiOSのシステムバウンスを無効にするものではありません。これはOSレベルの設定です。",
+    "The locale to use for `ion-datetime`. This impacts month and day name formatting. The `\"default\"` value refers to the default locale set by your device.": "ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`\"default\"`の値は、あなたのデバイスが設定するデフォルトのロケールを指します。",
+    "The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple=\"true\"`.": "datetimeの値を有効なISO 8601 datetime文字列として指定します。これは、`multiple=\"true\"`の場合のみ、文字列の配列です。",
+    "Which values you want to select. `\"date\"` will show a calendar picker to select the month, day, and year. `\"time\"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `\"date-time\"` will show the date picker first and time picker second. `\"time-date\"` will show the time picker first and date picker second.": "どの値を選択するか。`\"date\"`はカレンダーピッカーを表示し、月、日、年を選択します。`\"time\"`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。`\"date-time\"`は、日付ピッカーを最初に、時間ピッカーを次に表示します。\"time-date\"`は、最初に時間ピッカー、2番目に日付ピッカーを表示します。",
+    "If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`.": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます：`presentation`が `\"date\"`, `\"date-time\"`, または `\"time-date\"`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます：`\"time\"`, `\"month\"`, `\"month-year\"`, または `\"year\"`.",
+    "Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.": "ロード中に表示するオプションのテキスト。`loadingText`には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。詳しくはこちら：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタムHTMLを文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
+    "Radius of the input": "Inputの半径",
+    "The visible label associated with the input.": "Inputに関連する可視ラベル。",
+    "Text that is placed under the input and displayed when no error is detected.": "Inputの下に配置され、エラーが検出されなかった場合に表示されるテキストです。",
+    "Text that is placed under the input and displayed when an error is detected.": "Inputの下に配置され、エラーが検出されたときに表示されるテキストです。",
+    "If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。",
+    "The fill for the item. If `\"solid\"` the item will have a background. If `\"outline\"` the item will be transparent with a border. Only available in `md` mode.": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
+    "The color of the highlight on the input when focused": "フォーカスされたときの入力のハイライトの色",
+    "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.": "キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。",
+    "Style of the border below the input when using helper text, error text, or counter": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル",
+    "The color of the highlight on the input when valid": "有効時の入力のハイライトの色",
+    "Width of the border below the input when using helper text, error text, or counter": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅",
+    "The shape of the input. If \"round\" it will have an increased border radius.": "入力の形状を指定します。\"round\"の場合、境界線の半径が大きくなります。",
+    "The color of the highlight on the input when invalid": "入力が無効な場合のハイライトの色",
+    "The `ionInput` event fires when the `value` of an `<ion-input>` element has been changed.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.": "`ionInput`イベントは `<ion-input>` 要素の `value` が変更されたときに発生するイベントです。  テキスト入力を受け付ける要素 (`type=text`, `type=tel` など) のインタフェースは [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) である。その他の要素のインタフェースは [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) です。編集時に入力がクリアされる場合、型は `null` となります。",
+    "Color of the border below the input when using helper text, error text, or counter": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のInput下のボーダーの色",
+    "Where to place the label relative to the input. `\"start\"`: The label will appear to the left of the input in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the input in LTR and to the left in RTL. `\"floating\"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `\"stacked\"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "入力に対してラベルを配置する位置。`\"start\"`：ラベルはLTRでは入力の左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRでは入力の右側、RTLでは左側に表示されます。\"floating\"`：`\"floating\"`：ラベルは、入力にフォーカスが当たっているときや、入力に値があるときは小さく表示され、入力の上に表示されます。それ以外の場合は、入力の上に表示されます。`\"スタック(stacked)\"`：入力がぼやけた状態や値がない場合でも、ラベルは小さく表示され、入力の上に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。",
+    "Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。",
+    "The `ionChange` event is fired for `<ion-input>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.": "`ionChange` イベントは、ユーザーが要素の値を変更したときに `<ion-input>` 要素に対して発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは必ずしも要素の値が変更されるたびに発生するわけではない。  ユーザーが要素と対話する方法に応じて、`ionChange` イベントは次のような異なるタイミングで発生します。 - ユーザーが明示的に変更をコミットしたとき (例えば、`<ion-input type=\"date\">` の日付ピッカーから日付を選択し、「Enter」キーを押すなど)。- 値が変更された後、要素がフォーカスを失ったとき：ユーザーの対話がタイピングである要素について。",
+    "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead.": "コンテンツはアイテムの下に配置され、エラーが検出されたときに表示されます。**DEPRECATED** 代わりに ion-input または ion-textarea の \"errorText\" プロパティを使用してください。",
+    "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead.": "コンテンツはアイテムの下に配置され、エラーが検出されない場合に表示されます。**DEPRECATED** 代わりに ion-input または ion-textarea の \"helperText\" プロパティを使用してください。",
+    "Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.": "ローディングインジケータが解除された後に発行されます。ionLoadingDidDismissの略記。",
+    "Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.": "ローディングインジケータが解散する前に発行されます。ionLoadingWillDismissの略記です。",
+    "Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.": "ローディングインジケータが提示される前に発行されます。ionLoadingWillPresentの略記。",
+    "If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.": "`true`の場合、ローディングインジケータは開きます。`false`の場合、ローディングインジケータは閉じます。より細かく表示を制御したい場合に使用します。そうでない場合は、loadingController または `trigger` プロパティを使用してください。注意: ローディングインジケータが終了しても、`isOpen`は自動的に `false`に戻されません。あなたのコードでそれを行う必要があります。",
+    "An ID corresponding to the trigger element that causes the loading indicator to open when clicked.": "クリックするとローディングインジケータが開くトリガー要素に対応するIDです。",
+    "Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.": "ローディングインジケータが提示された後に放出される。ionLoadingWillDismissの略記。",
+    "Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.": "ローディングインジケータに表示するテキストコンテンツを任意で指定します。  このプロパティは、文字列としてカスタムHTMLを受け入れます。コンテンツはデフォルトでプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
+    "Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.": "ピッカーが解散した後に発行されます。ionPickerDidDismissの略記です。",
+    "Emitted before the picker has presented. Shorthand for ionPickerWillPresent.": "ピッカーが提示される前に発行されます。ionPickerWillPresentの略記です。",
+    "Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.": "ピッカーが提示された後に発行されます。ionPickerWillDismissの略記です。",
+    "Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.": "ピッカーが解散する前に発行されます。ionPickerWillDismissの略記です。",
+    "If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code.": "`true`の場合、ピッカーは開きます。`false`の場合、ピッカーは閉じます。ピッカーの表示をより細かく制御したい場合に使用します。それ以外の場合は pickerController や `trigger` プロパティを使用します。注意: ピッカーが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
+    "An ID corresponding to the trigger element that causes the picker to open when clicked.": "クリックするとピッカーが開くトリガー要素に対応するID。",
+    "Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `\"click\"`, the popover will be presented when the trigger is left clicked. If `\"hover\"`, the popover will be presented when a pointer hovers over the trigger. If `\"context-menu\"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。 `trigger`プロパティが `undefined` の場合は適用されません。`\"click\"` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。`\"hover\"` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニューの場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
+    "Describes which side of the `reference` point to position the popover on. The `\"start\"` and `\"end\"` values are RTL-aware, and the `\"left\"` and `\"right\"` values are not.": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。`\"start\"` と `\"end\"` の値はRTLを意識しており、`\"left\"` と `\"right\"` の値はそうではない。",
+    "Describes how to calculate the popover width. If `\"cover\"`, the popover width will match the width of the trigger. If `\"auto\"`, the popover width will be determined by the content in the popover.": "ポップオーバーの幅を計算する方法を記述します。もし `\"cover\"` ならば、ポップオーバーの幅はトリガーの幅と一致します。auto\"` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定される。",
+    "Describes what to position the popover relative to. If `\"trigger\"`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `\"event\"`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `\"trigger\"` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetによって決定されます。もし `\"event\"` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
+    "Describes how to align the popover content with the `reference` point. Defaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode.": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `\"center\"` で、`md` モードでは `\"start\"` です。",
+    "The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio.": "ラジオに関連付けるラベルテキストです。\"labelPlacement\"プロパティを使用して、ラジオに対するラベルの相対的な配置を制御します。",
+    "Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。",
+    "How to pack the label and radio within a line. `\"start\"`: The label and radio will appear on the left in LTR and on the right in RTL. `\"end\"`: The label and radio will appear on the right in LTR and on the left in RTL. `\"space-between\"`: The label and radio will appear on opposite ends of the line with space between the two elements.": "ラベルとラジオを1行にまとめる方法。`\"start\"` とします：ラベルとラジオは、LTRでは左側に、RTLでは右側に表示されます。`\"end\"`：ラベルとラジオは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとラジオは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
+    "Where to place the label relative to the radio. `\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "ラジオから相対的にラベルを配置する場所。`\"start\"`：ラベルはLTRではラジオの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではラジオの右、RTLでは左に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
+    "The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range.": "範囲に関連付けるラベルテキスト。`\"labelPlacement`\"プロパティを使用して、ラベルが範囲に対してどの位置に配置されるかを制御します。",
+    "The `ionInput` event is fired for `<ion-range>` elements when the value is modified. Unlike `ionChange`, `ionInput` is fired continuously while the user is dragging the knob.": "`ionInput`イベントは、`<ion-range>`要素に対して、値が変更されたときに発生するイベントです。`ionChange`とは異なり、`ionInput`はユーザがノブをドラッグしている間、継続して発生します。",
+    "The `ionChange` event is fired for `<ion-range>` elements when the user modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows  `ionChange` is not fired when the value is changed programmatically.": "`ionChange`イベントは、`<ion-range>`要素に対して、ユーザーがその要素の値を変更したときに発生します： - ドラッグした後にノブを離したとき - キーボードの矢印でノブを動かしたとき プログラムで値を変更したときは、`ionChange`イベントは発生しません。",
+    "Where to place the label relative to the range. `\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "範囲に対してラベルを配置する場所。`\"start\"`：ラベルはLTRでは範囲の左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRでは範囲の右側、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作をします。長いテキストは省略記号(\"...\")で切り捨てられます。",
+    "How long, in milliseconds, to wait to trigger the `ionInput` event after each change in the range value.": "レンジの値が変化するたびに `ionInput` イベントをトリガーするまでの待ち時間（ミリ秒単位）。",
+    "The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
+    "The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
+    "Emitted when the `value` of the `ion-searchbar` element has changed.": "ion-searchbar`要素の `value` が変更されたときに発行されます。",
+    "The `ionChange` event is fired for `<ion-searchbar>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  The `ionChange` event is fired when the value has been committed by the user. This can happen when the element loses focus or when the \"Enter\" key is pressed. `ionChange` can also fire when clicking the clear or cancel buttons.": "`ionChange` イベントは、`<ion-searchbar>` 要素に対して、ユーザがその要素の値を変更したときに発生します。ionInput` イベントとは異なり、要素の値が変更されるたびに `ionChange` イベントが発生する必要はない。`ionChange`イベントは、ユーザーによって値がコミットされたときに発生します。これは、要素のフォーカスが外れたときや、\"Enter \"キーが押されたときに発生します。また、クリアボタンやキャンセルボタンをクリックしたときにも `ionChange` イベントが発生することがあります。",
+    "Background of the select": "セレクトの背景",
+    "The value of the select.": "セレクトの値です。",
+    "The visible label associated with the select.": "セレクトに関連する可視ラベル。",
+    "The shape of the select. If \"round\" it will have an increased border radius.": "セレクトの形状を指定します。`round`の場合、境界線の半径が大きくなります。",
+    "How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `\"floating\"` or `\"stacked\"`. `\"start\"`: The label and select will appear on the left in LTR and on the right in RTL. `\"end\"`: The label and select will appear on the right in LTR and on the left in RTL. `\"space-between\"`: The label and select will appear on opposite ends of the line with space between the two elements.": "ラベルとセレクトを1行にまとめる方法。`labelPlacement`が `\"floating\"` または `\"stacked\"` に設定されている場合、ラベルとセレクトが異なる行にあるときは `justify` は適用されません。`\"start\"`：ラベルとセレクトはLTRでは左側に、RTLでは右側に表示されます。`\"end\"`：ラベルとセレクトはLTRでは右に、RTLでは左に表示されます。\"space-between\"`：ラベルとセレクトは行の反対側の端に表示され、2つの要素の間にはスペースがあります。",
+    "The color to use from your application's color palette. Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`. For more information on colors, see [theming](/docs/theming/basics).  This property is only available when using the modern select syntax.": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです：`\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色についての詳細は [theming](/docs/theming/basics) を参照してください。  このプロパティは、modern select構文を使用する場合にのみ利用可能です。",
+    "The color of the ripple effect on MD mode.": "MDモード時のリップルエフェクトの色です。",
+    "Where to place the label relative to the select. `\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL. `\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\"). When using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`.": "セレクトに対してラベルを配置する位置。`\"start\"`：ラベルはLTRではセレクトの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではセレクトの右側に、RTLでは左側に表示されます。\"floating\"`：ラベルは、セレクトがフォーカスされているか、セレクトに値がある場合、小さく表示され、セレクトの上に表示されます。それ以外の場合は、セレクトの上に表示されます。\"stacked\"`：ラベルは、セレクトがぼやけた状態や値がない状態でも、小さく表示され、セレクトの上に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。`\"floating\"`や \"stacked\"`を使用する場合は、selectに `value` か `placeholder` のどちらかを指定して初期化することをお勧めします。",
+    "Set the layout of the text and icon in the tab bar. It defaults to `\"icon-top\"`.": "タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは`\"icon-top\"`です。",
+    "The color of the highlight on the textarea when valid": "有効時のテキストエリアのハイライトの色",
+    "Text that is placed under the textarea and displayed when an error is detected.": "テキストエリアの下に配置され、エラーが検出されたときに表示されるテキストです。",
+    "The visible label associated with the textarea.": "テキストエリアに関連する可視ラベル。",
+    "If `true`, the value will be cleared after focus upon edit.": "true`の場合、編集時にフォーカスが当たった後、値がクリアされる。",
+    "Text that is placed under the textarea and displayed when no error is detected.": "textareaの下に配置され、エラーが検出されなかった場合に表示されるテキストです。",
+    "Style of the border below the textarea when using helper text, error text, or counter": "ヘルパーテキスト、エラーテキスト、カウンター使用時のテキストエリア下のボーダーのスタイル",
+    "Width of the border below the textarea when using helper text, error text, or counter": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの幅",
+    "The shape of the textarea. If \"round\" it will have an increased border radius.": "テキストエリアの形状を指定します。round \"の場合、ボーダーの半径が大きくなります。",
+    "This attribute specifies the maximum number of characters that the user can enter.": "この属性は、ユーザが入力できる最大文字数を指定します。",
+    "Color of the border below the textarea when using helper text, error text, or counter": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの色",
+    "The `ionChange` event is fired for `<ion-textarea>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  The `ionChange` event is fired when the element loses focus after its value has been modified.": "`ionChange` イベントは `<ion-textarea>` 要素に対して、ユーザがその要素の値を変更したときに発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは要素の値が変更されるたびに発生する必要はない。  値が変更された後、要素のフォーカスが外れると `ionChange` イベントが発生します。",
+    "The `ionInput` event fires when the `value` of an `<ion-textarea>` element has been changed.  When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.": "`ionInput` イベントは、`<ion-textarea>` 要素の `value` が変更されたときに発生します。 `clearOnEdit` が有効な場合、ユーザがキーダウンイベントを実行してテキストエリアをクリアしたときに `ionInput` イベントが発生します。",
+    "Where to place the label relative to the textarea. `\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `\"floating\"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "テキストエリアと相対的にラベルを配置する場所。\"start\"`：ラベルはLTRではテキストエリアの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではテキストエリアの右側に、RTLでは左側に表示されます。\"floating\"`：ラベルは、テキストエリアにフォーカスが当たっているか、値がある場合、小さく表示され、テキストエリアの上に表示されます。それ以外の場合はtextareaの上に表示されます。`\"stacked\"`：テキストエリアがぼやけた状態や値がない場合でも、ラベルは小さく表示され、テキストエリアの上に表示されます。固定\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。",
+    "This attribute specifies the minimum number of characters that the user can enter.": "この属性は、ユーザーが入力できる最小の文字数を指定します。",
+    "The color of the highlight on the textarea when invalid": "無効時のテキストエリア上のハイライトの色",
+    "The color of the highlight on the textarea when focused": "フォーカスされたときのテキストエリアのハイライトの色",
+    "An ID corresponding to the trigger element that causes the toast to open when clicked.": "クリックされたときにトーストを開かせるトリガー要素に対応するID。",
+    "Emitted before the toast has presented. Shorthand for ionToastWillPresent.": "トーストが表示される前に発行されます。ionToastWillPresentの略記。",
+    "Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss.": "トーストが終了する前に発行されます。ionToastWillDismissの略語です。",
+    "Message to be shown in the toast. This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.": "トーストに表示するメッセージ。このプロパティは、文字列としてカスタムHTMLを受け入れます。デフォルトではコンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
+    "Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss.": "トーストが終了した後に発行されます。ionToastDidDismissの略記。",
+    "Emitted after the toast has presented. Shorthand for ionToastWillDismiss.": "トーストがはじまった後に発行されます。ionToastWillDismissの略語。",
+    "If `true`, the toast will open. If `false`, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the toast dismisses. You will need to do that in your code.": "もし `true` ならば、トーストは表示されます。もし `false` ならば、トーストは閉じます。プレゼンテーションの細かい制御が必要な場合はこれを使用し、そうでない場合は toastController または `trigger` プロパティを使用してください。注意: トーストが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
+    "Background of the toggle track when checked": "チェックしたときのトグルトラックの背景",
+    "Background of the toggle track": "トグルトラックの背景",
+    "The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle.": "トグルに関連付けるラベルテキストです。`\"labelPlacement`\"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。",
+    "How to pack the label and toggle within a line. `\"start\"`: The label and toggle will appear on the left in LTR and on the right in RTL. `\"end\"`: The label and toggle will appear on the right in LTR and on the left in RTL. `\"space-between\"`: The label and toggle will appear on opposite ends of the line with space between the two elements.": "ラベルとトグルを1行にまとめる方法。`\"start\"`：ラベルとトグルは、LTRでは左に、RTLでは右に表示されます。`\"end\"`：ラベルとトグルは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとトグルは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
+    "Where to place the label relative to the input. `\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "Inputに対してラベルを配置する場所。\"start\"`とする：ラベルはLTRではトグルの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではトグルの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
+    "Emitted when the user switches the toggle on or off. Does not emit when programmatically changing the value of the `checked` property.": "ユーザがトグルのオン/オフを切り替えたときに発行されます。プログラムによって `checked` プロパティの値が変更された場合は発生しません。"
   }
-}
\ No newline at end of file
+}
diff --git a/src/translate/.detection/api/accordion-group.json b/src/translate/.detection/api/accordion-group.json
index 4ee1634b259..e09e4c9e693 100644
--- a/src/translate/.detection/api/accordion-group.json
+++ b/src/translate/.detection/api/accordion-group.json
@@ -130,7 +130,7 @@
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "The value of the accordion group.",
+      "docs": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`",
       "docsTags": [],
       "values": [
         {
@@ -158,7 +158,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value property has changed.",
+      "docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/.detection/api/accordion.json b/src/translate/.detection/api/accordion.json
index cc61bc77e52..8097c9e2d73 100644
--- a/src/translate/.detection/api/accordion.json
+++ b/src/translate/.detection/api/accordion.json
@@ -109,7 +109,7 @@
       "mutable": false,
       "attr": "toggle-icon-slot",
       "reflectToAttr": false,
-      "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.",
+      "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`.",
       "docsTags": [],
       "default": "'end'",
       "values": [
diff --git a/src/translate/.detection/api/action-sheet.json b/src/translate/.detection/api/action-sheet.json
index 1b9497fe6bb..22dd4a06592 100644
--- a/src/translate/.detection/api/action-sheet.json
+++ b/src/translate/.detection/api/action-sheet.json
@@ -141,6 +141,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -232,6 +249,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -290,13 +326,31 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the action sheet has dismissed.\nShorthand for ionActionSheetDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the action sheet has presented.\nShorthand for ionActionSheetWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionActionSheetDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted after the alert has dismissed.",
+      "docs": "Emitted after the action sheet has dismissed.",
       "docsTags": []
     },
     {
@@ -305,7 +359,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted after the alert has presented.",
+      "docs": "Emitted after the action sheet has presented.",
       "docsTags": []
     },
     {
@@ -314,7 +368,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted before the alert has dismissed.",
+      "docs": "Emitted before the action sheet has dismissed.",
       "docsTags": []
     },
     {
@@ -323,7 +377,25 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted before the alert has presented.",
+      "docs": "Emitted before the action sheet has presented.",
+      "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the action sheet has dismissed.\nShorthand for ionActionSheetWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the action sheet has presented.\nShorthand for ionActionSheetWillPresent.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/.detection/api/alert.json b/src/translate/.detection/api/alert.json
index 81e5fc8c880..3d1fd438d12 100644
--- a/src/translate/.detection/api/alert.json
+++ b/src/translate/.detection/api/alert.json
@@ -157,6 +157,23 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -198,7 +215,7 @@
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
-      "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -270,6 +287,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -328,6 +364,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the alert has dismissed.\nShorthand for ionAlertDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the alert has presented.\nShorthand for ionAlertWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionAlertDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -363,6 +417,24 @@
       "composed": true,
       "docs": "Emitted before the alert has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the alert has dismissed.\nShorthand for ionAlertWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the alert has presented.\nShorthand for ionAlertWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [
diff --git a/src/translate/.detection/api/breadcrumbs.json b/src/translate/.detection/api/breadcrumbs.json
index 66231eed210..a86cd7f333c 100644
--- a/src/translate/.detection/api/breadcrumbs.json
+++ b/src/translate/.detection/api/breadcrumbs.json
@@ -16,7 +16,7 @@
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
       "mutable": false,
       "attr": "color",
-      "reflectToAttr": false,
+      "reflectToAttr": true,
       "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
       "docsTags": [],
       "values": [
diff --git a/src/translate/.detection/api/checkbox.json b/src/translate/.detection/api/checkbox.json
index 17910785174..ff682759224 100644
--- a/src/translate/.detection/api/checkbox.json
+++ b/src/translate/.detection/api/checkbox.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "- The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
+    },
     {
       "name": "part",
       "text": "container - The container for the checkbox mark."
@@ -125,6 +129,77 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and checkbox within a line.\n`\"start\"`: The label and checkbox will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and checkbox will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and checkbox will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -198,7 +273,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the checked property has changed.",
+      "docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
       "docsTags": []
     },
     {
@@ -213,16 +288,6 @@
   ],
   "listeners": [],
   "styles": [
-    {
-      "name": "--background",
-      "annotation": "prop",
-      "docs": "Background of the checkbox icon"
-    },
-    {
-      "name": "--background-checked",
-      "annotation": "prop",
-      "docs": "Background of the checkbox icon when checked"
-    },
     {
       "name": "--border-color",
       "annotation": "prop",
@@ -248,6 +313,16 @@
       "annotation": "prop",
       "docs": "Border width of the checkbox icon"
     },
+    {
+      "name": "--checkbox-background",
+      "annotation": "prop",
+      "docs": "Background of the checkbox icon"
+    },
+    {
+      "name": "--checkbox-background-checked",
+      "annotation": "prop",
+      "docs": "Background of the checkbox icon when checked"
+    },
     {
       "name": "--checkmark-color",
       "annotation": "prop",
@@ -269,7 +344,12 @@
       "docs": "Transition of the checkbox icon"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "",
+      "docs": "The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
+    }
+  ],
   "parts": [
     {
       "name": "container",
diff --git a/src/translate/.detection/api/content.json b/src/translate/.detection/api/content.json
index d3286e49ef8..07dd018764a 100644
--- a/src/translate/.detection/api/content.json
+++ b/src/translate/.detection/api/content.json
@@ -84,7 +84,7 @@
       "mutable": true,
       "attr": "force-overscroll",
       "reflectToAttr": false,
-      "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting.",
+      "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, this does not disable the system bounce on iOS. That is an OS level setting.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/.detection/api/datetime.json b/src/translate/.detection/api/datetime.json
index fe6c70ac29b..2559aafb7b5 100644
--- a/src/translate/.detection/api/datetime.json
+++ b/src/translate/.detection/api/datetime.json
@@ -286,7 +286,7 @@
       "mutable": false,
       "attr": "locale",
       "reflectToAttr": false,
-      "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `'default'` value refers to the default\nlocale set by your device.",
+      "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `\"default\"` value refers to the default\nlocale set by your device.",
       "docsTags": [],
       "default": "'default'",
       "values": [
@@ -446,7 +446,7 @@
       "mutable": false,
       "attr": "prefer-wheel",
       "reflectToAttr": false,
-      "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `'date'`, `'date-time'`, or `'time-date'`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`'time'`, `'month'`, `'month-year'`, or `'year'`.",
+      "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`.",
       "docsTags": [],
       "default": "false",
       "values": [
@@ -463,7 +463,7 @@
       "mutable": false,
       "attr": "presentation",
       "reflectToAttr": false,
-      "docs": "Which values you want to select. `'date'` will show\na calendar picker to select the month, day, and year. `'time'`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `'date-time'` will show the date picker first and time picker second.\n`'time-date'` will show the time picker first and date picker second.",
+      "docs": "Which values you want to select. `\"date\"` will show\na calendar picker to select the month, day, and year. `\"time\"`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `\"date-time\"` will show the date picker first and time picker second.\n`\"time-date\"` will show the time picker first and date picker second.",
       "docsTags": [],
       "default": "'date-time'",
       "values": [
@@ -630,7 +630,7 @@
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.",
+      "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nThis should be an array of strings only when `multiple=\"true\"`.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/.detection/api/infinite-scroll-content.json b/src/translate/.detection/api/infinite-scroll-content.json
index 8a4c2901c2f..4da189bafce 100644
--- a/src/translate/.detection/api/infinite-scroll-content.json
+++ b/src/translate/.detection/api/infinite-scroll-content.json
@@ -67,7 +67,7 @@
       "mutable": false,
       "attr": "loading-text",
       "reflectToAttr": false,
-      "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/.detection/api/input.json b/src/translate/.detection/api/input.json
index dd397faf275..ef6164f4516 100644
--- a/src/translate/.detection/api/input.json
+++ b/src/translate/.detection/api/input.json
@@ -412,21 +412,58 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "counter",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "counter",
+      "reflectToAttr": false,
+      "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "counterFormatter",
+      "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((inputLength: number, maxLength: number) => string)"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
       "docsTags": [],
-      "default": "0",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -490,6 +527,68 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "errorText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "error-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the input and displayed when an error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "fill",
+      "type": "\"outline\" | \"solid\" | undefined",
+      "mutable": false,
+      "attr": "fill",
+      "reflectToAttr": false,
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "outline",
+          "type": "string"
+        },
+        {
+          "value": "solid",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "helperText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "helper-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the input and displayed when no error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
@@ -538,6 +637,78 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The visible label associated with the input.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the input in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the input in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.\n`\"stacked\"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "floating",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "max",
       "type": "number | string | undefined",
@@ -749,6 +920,26 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "shape",
+      "type": "\"round\" | undefined",
+      "mutable": false,
+      "attr": "shape",
+      "reflectToAttr": false,
+      "docs": "The shape of the input. If \"round\" it will have an increased border radius.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "round",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "size",
       "type": "number | undefined",
@@ -933,7 +1124,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-input>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
       "docsTags": []
     },
     {
@@ -947,11 +1138,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "InputInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "docs": "The `ionInput` event fires when the `value` of an `<ion-input>` element\nhas been changed.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
       "docsTags": []
     }
   ],
@@ -962,11 +1153,46 @@
       "annotation": "prop",
       "docs": "Background of the input"
     },
+    {
+      "name": "--border-color",
+      "annotation": "prop",
+      "docs": "Color of the border below the input when using helper text, error text, or counter"
+    },
+    {
+      "name": "--border-radius",
+      "annotation": "prop",
+      "docs": "Radius of the input"
+    },
+    {
+      "name": "--border-style",
+      "annotation": "prop",
+      "docs": "Style of the border below the input when using helper text, error text, or counter"
+    },
+    {
+      "name": "--border-width",
+      "annotation": "prop",
+      "docs": "Width of the border below the input when using helper text, error text, or counter"
+    },
     {
       "name": "--color",
       "annotation": "prop",
       "docs": "Color of the input text"
     },
+    {
+      "name": "--highlight-color-focused",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the input when focused"
+    },
+    {
+      "name": "--highlight-color-invalid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the input when invalid"
+    },
+    {
+      "name": "--highlight-color-valid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the input when valid"
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
diff --git a/src/translate/.detection/api/item.json b/src/translate/.detection/api/item.json
index afaff146eee..1e0df2e5ac2 100644
--- a/src/translate/.detection/api/item.json
+++ b/src/translate/.detection/api/item.json
@@ -22,11 +22,11 @@
     },
     {
       "name": "slot",
-      "text": "helper - Content is placed under the item and displayed when no error is detected."
+      "text": "helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "slot",
-      "text": "error - Content is placed under the item and displayed when an error is detected."
+      "text": "error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "part",
@@ -118,8 +118,14 @@
       "attr": "counter",
       "reflectToAttr": false,
       "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
+        }
+      ],
       "default": "false",
+      "deprecation": "Use the `counter` property on `ion-input` or `ion-textarea` instead.",
       "values": [
         {
           "type": "boolean"
@@ -134,7 +140,13 @@
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
+        }
+      ],
+      "deprecation": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.",
       "values": [
         {
           "type": "((inputLength: number, maxLength: number) => string)"
@@ -224,7 +236,7 @@
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
-      "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border. Only available in `md` mode.",
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
       "docsTags": [],
       "values": [
         {
@@ -443,7 +455,7 @@
   "events": [],
   "listeners": [
     {
-      "event": "ionChange",
+      "event": "ionInput",
       "capture": false,
       "passive": false
     },
@@ -646,11 +658,11 @@
     },
     {
       "name": "error",
-      "docs": "Content is placed under the item and displayed when an error is detected."
+      "docs": "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "helper",
-      "docs": "Content is placed under the item and displayed when no error is detected."
+      "docs": "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "start",
diff --git a/src/translate/.detection/api/loading.json b/src/translate/.detection/api/loading.json
index 42403de595b..ae9d1cbc195 100644
--- a/src/translate/.detection/api/loading.json
+++ b/src/translate/.detection/api/loading.json
@@ -120,6 +120,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -161,7 +178,7 @@
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
-      "docs": "Optional text content to display in the loading indicator.",
+      "docs": "Optional text content to display in the loading indicator.\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -286,6 +303,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -344,6 +380,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the loading indicator has dismissed.\nShorthand for ionLoadingDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the loading indicator has presented.\nShorthand for ionLoadingWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionLoadingDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -379,6 +433,24 @@
       "composed": true,
       "docs": "Emitted before the loading has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the loading indicator has dismissed.\nShorthand for ionLoadingWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the loading indicator has presented.\nShorthand for ionLoadingWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [],
diff --git a/src/translate/.detection/api/modal.json b/src/translate/.detection/api/modal.json
index 61a8d2a8e09..85cbec53d88 100644
--- a/src/translate/.detection/api/modal.json
+++ b/src/translate/.detection/api/modal.json
@@ -98,12 +98,13 @@
     },
     {
       "name": "canDismiss",
-      "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean | undefined",
+      "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
       "mutable": false,
       "attr": "can-dismiss",
       "reflectToAttr": false,
       "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.",
       "docsTags": [],
+      "default": "true",
       "values": [
         {
           "type": "((data?: any, role?: string"
@@ -113,12 +114,9 @@
         },
         {
           "type": "boolean"
-        },
-        {
-          "type": "undefined"
         }
       ],
-      "optional": true,
+      "optional": false,
       "required": false
     },
     {
@@ -345,29 +343,6 @@
       "optional": false,
       "required": false
     },
-    {
-      "name": "swipeToClose",
-      "type": "boolean",
-      "mutable": false,
-      "attr": "swipe-to-close",
-      "reflectToAttr": false,
-      "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.",
-      "docsTags": [
-        {
-          "name": "deprecated",
-          "text": "- To prevent modals from dismissing, use canDismiss instead."
-        }
-      ],
-      "default": "false",
-      "deprecation": "- To prevent modals from dismissing, use canDismiss instead.",
-      "values": [
-        {
-          "type": "boolean"
-        }
-      ],
-      "optional": false,
-      "required": false
-    },
     {
       "name": "trigger",
       "type": "string | undefined",
diff --git a/src/translate/.detection/api/picker.json b/src/translate/.detection/api/picker.json
index 590a7bb0efb..fa9a4737181 100644
--- a/src/translate/.detection/api/picker.json
+++ b/src/translate/.detection/api/picker.json
@@ -152,6 +152,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -224,6 +241,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -298,6 +334,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionPickerDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -333,6 +387,24 @@
       "composed": true,
       "docs": "Emitted before the picker has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [],
diff --git a/src/translate/.detection/api/popover.json b/src/translate/.detection/api/popover.json
index 96581aa8e34..9210abb17ad 100644
--- a/src/translate/.detection/api/popover.json
+++ b/src/translate/.detection/api/popover.json
@@ -33,7 +33,7 @@
       "mutable": true,
       "attr": "alignment",
       "reflectToAttr": false,
-      "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.",
+      "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode.",
       "docsTags": [],
       "values": [
         {
@@ -317,7 +317,7 @@
       "mutable": false,
       "attr": "reference",
       "reflectToAttr": false,
-      "docs": "Describes what to position the popover relative to.\nIf `'trigger'`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `'event'`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
+      "docs": "Describes what to position the popover relative to.\nIf `\"trigger\"`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `\"event\"`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
       "docsTags": [],
       "default": "'trigger'",
       "values": [
@@ -356,7 +356,7 @@
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
-      "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.",
+      "docs": "Describes which side of the `reference` point to position\nthe popover on. The `\"start\"` and `\"end\"` values are RTL-aware,\nand the `\"left\"` and `\"right\"` values are not.",
       "docsTags": [],
       "default": "'bottom'",
       "values": [
@@ -394,7 +394,7 @@
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
-      "docs": "Describes how to calculate the popover width.\nIf `'cover'`, the popover width will match the width of the trigger.\nIf `'auto'`, the popover width will be determined by the content in\nthe popover.",
+      "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be determined by the content in\nthe popover.",
       "docsTags": [],
       "default": "'auto'",
       "values": [
@@ -452,7 +452,7 @@
       "mutable": false,
       "attr": "trigger-action",
       "reflectToAttr": false,
-      "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
+      "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `\"click\"`, the popover will be presented when the trigger is left clicked.\nIf `\"hover\"`, the popover will be presented when a pointer hovers over the trigger.\nIf `\"context-menu\"`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
       "docsTags": [],
       "default": "'click'",
       "values": [
diff --git a/src/translate/.detection/api/radio.json b/src/translate/.detection/api/radio.json
index 0e233dafcce..1d5aa1430d9 100644
--- a/src/translate/.detection/api/radio.json
+++ b/src/translate/.detection/api/radio.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "- The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
+    },
     {
       "name": "part",
       "text": "container - The container for the radio mark."
@@ -91,6 +95,77 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and radio within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -190,7 +265,12 @@
       "docs": "Border radius of the inner checked radio"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "",
+      "docs": "The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
+    }
+  ],
   "parts": [
     {
       "name": "container",
diff --git a/src/translate/.detection/api/range.json b/src/translate/.detection/api/range.json
index cec22d33a78..b7774667215 100644
--- a/src/translate/.detection/api/range.json
+++ b/src/translate/.detection/api/range.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
+    },
     {
       "name": "slot",
       "text": "start - Content is placed to the left of the range slider in LTR, and to the right in RTL."
@@ -119,19 +123,21 @@
     },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "How long, in milliseconds, to wait to trigger the\n`ionInput` event after each change in the range value.",
       "docsTags": [],
-      "default": "0",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -168,6 +174,51 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "max",
       "type": "number",
@@ -231,7 +282,7 @@
       "reflectToAttr": false,
       "docs": "The name of the control, which is submitted with the form data.",
       "docsTags": [],
-      "default": "''",
+      "default": "this.rangeId",
       "values": [
         {
           "type": "string"
@@ -365,7 +416,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value property has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
       "docsTags": []
     },
     {
@@ -377,6 +428,15 @@
       "docs": "Emitted when the range has focus.",
       "docsTags": []
     },
+    {
+      "event": "ionInput",
+      "detail": "RangeChangeEventDetail",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "The `ionInput` event is fired for `<ion-range>` elements when the value\nis modified. Unlike `ionChange`, `ionInput` is fired continuously\nwhile the user is dragging the knob.",
+      "docsTags": []
+    },
     {
       "event": "ionKnobMoveEnd",
       "detail": "RangeKnobMoveEndEventDetail",
@@ -459,6 +519,10 @@
       "name": "end",
       "docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL."
     },
+    {
+      "name": "label",
+      "docs": "The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
+    },
     {
       "name": "start",
       "docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL."
diff --git a/src/translate/.detection/api/refresher-content.json b/src/translate/.detection/api/refresher-content.json
index 73e0c637820..89952a179f8 100644
--- a/src/translate/.detection/api/refresher-content.json
+++ b/src/translate/.detection/api/refresher-content.json
@@ -34,7 +34,7 @@
       "mutable": false,
       "attr": "pulling-text",
       "reflectToAttr": false,
-      "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -111,7 +111,7 @@
       "mutable": false,
       "attr": "refreshing-text",
       "reflectToAttr": false,
-      "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/.detection/api/searchbar.json b/src/translate/.detection/api/searchbar.json
index 7342bfabec2..2b395a040cc 100644
--- a/src/translate/.detection/api/searchbar.json
+++ b/src/translate/.detection/api/searchbar.json
@@ -390,19 +390,21 @@
     },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
       "docsTags": [],
-      "default": "250",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -755,7 +757,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
       "docsTags": []
     },
     {
@@ -778,11 +780,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "KeyboardEvent",
+      "detail": "SearchbarInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "docs": "Emitted when the `value` of the `ion-searchbar` element has changed.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/.detection/api/segment.json b/src/translate/.detection/api/segment.json
index a23912dfdd2..dfd6d5af642 100644
--- a/src/translate/.detection/api/segment.json
+++ b/src/translate/.detection/api/segment.json
@@ -157,16 +157,13 @@
     },
     {
       "name": "value",
-      "type": "null | string | undefined",
+      "type": "string | undefined",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
       "docs": "the value of the segment.",
       "docsTags": [],
       "values": [
-        {
-          "type": "null"
-        },
         {
           "type": "string"
         },
diff --git a/src/translate/.detection/api/select.json b/src/translate/.detection/api/select.json
index b66a7127111..8bcaf17a8fe 100644
--- a/src/translate/.detection/api/select.json
+++ b/src/translate/.detection/api/select.json
@@ -40,6 +40,61 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "color",
+      "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "mutable": false,
+      "attr": "color",
+      "reflectToAttr": true,
+      "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\nThis property is only available when using the modern select syntax.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "danger",
+          "type": "string"
+        },
+        {
+          "value": "dark",
+          "type": "string"
+        },
+        {
+          "value": "light",
+          "type": "string"
+        },
+        {
+          "value": "medium",
+          "type": "string"
+        },
+        {
+          "value": "primary",
+          "type": "string"
+        },
+        {
+          "value": "secondary",
+          "type": "string"
+        },
+        {
+          "value": "success",
+          "type": "string"
+        },
+        {
+          "value": "tertiary",
+          "type": "string"
+        },
+        {
+          "value": "warning",
+          "type": "string"
+        },
+        {
+          "type": "string & Record<never, never>"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "compareWith",
       "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
@@ -82,6 +137,30 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "fill",
+      "type": "\"outline\" | \"solid\" | undefined",
+      "mutable": false,
+      "attr": "fill",
+      "reflectToAttr": false,
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "outline",
+          "type": "string"
+        },
+        {
+          "value": "solid",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "interface",
       "type": "\"action-sheet\" | \"alert\" | \"popover\"",
@@ -125,6 +204,107 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and select within a line.\n`justify` does not apply when the label and select\nare on different lines when `labelPlacement` is set to\n`\"floating\"` or `\"stacked\"`.\n`\"start\"`: The label and select will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and select will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and select will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The visible label associated with the select.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the select.\n`\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.\n`\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\nWhen using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`.",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "floating",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -238,13 +418,33 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "shape",
+      "type": "\"round\" | undefined",
+      "mutable": false,
+      "attr": "shape",
+      "reflectToAttr": false,
+      "docs": "The shape of the select. If \"round\" it will have an increased border radius.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "round",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "value",
       "type": "any",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "the value of the select.",
+      "docs": "The value of the select.",
       "docsTags": [],
       "values": [
         {
@@ -322,6 +522,46 @@
   ],
   "listeners": [],
   "styles": [
+    {
+      "name": "--background",
+      "annotation": "prop",
+      "docs": "Background of the select"
+    },
+    {
+      "name": "--border-color Color of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--border-radius Radius of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--border-style Style of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--border-width Width of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--highlight-color-focused The color of the highlight on the select when focused",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--highlight-color-invalid The color of the highlight on the select when invalid",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--highlight-color-valid The color of the highlight on the select when valid",
+      "annotation": "prop",
+      "docs": ""
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
@@ -351,6 +591,11 @@
       "name": "--placeholder-opacity",
       "annotation": "prop",
       "docs": "Opacity of the select placeholder text"
+    },
+    {
+      "name": "--ripple-color",
+      "annotation": "prop",
+      "docs": "The color of the ripple effect on MD mode."
     }
   ],
   "slots": [],
@@ -373,14 +618,16 @@
     "ion-select-popover",
     "ion-popover",
     "ion-action-sheet",
-    "ion-alert"
+    "ion-alert",
+    "ion-icon"
   ],
   "dependencyGraph": {
     "ion-select": [
       "ion-select-popover",
       "ion-popover",
       "ion-action-sheet",
-      "ion-alert"
+      "ion-alert",
+      "ion-icon"
     ],
     "ion-select-popover": [
       "ion-item",
diff --git a/src/translate/.detection/api/tab-button.json b/src/translate/.detection/api/tab-button.json
index ca6d85caec0..7edadd1fb2e 100644
--- a/src/translate/.detection/api/tab-button.json
+++ b/src/translate/.detection/api/tab-button.json
@@ -76,7 +76,7 @@
       "mutable": true,
       "attr": "layout",
       "reflectToAttr": false,
-      "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.",
+      "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `\"icon-top\"`.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/.detection/api/textarea.json b/src/translate/.detection/api/textarea.json
index 0c2dfe33e55..3aca0e883c2 100644
--- a/src/translate/.detection/api/textarea.json
+++ b/src/translate/.detection/api/textarea.json
@@ -65,10 +65,10 @@
     {
       "name": "clearOnEdit",
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "attr": "clear-on-edit",
       "reflectToAttr": false,
-      "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
+      "docs": "If `true`, the value will be cleared after focus upon edit.",
       "docsTags": [],
       "default": "false",
       "values": [
@@ -153,21 +153,58 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "counter",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "counter",
+      "reflectToAttr": false,
+      "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit.\nDevelopers must also set the `maxlength` property for the counter to be calculated correctly.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "counterFormatter",
+      "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((inputLength: number, maxLength: number) => string)"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
       "docsTags": [],
-      "default": "0",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -231,6 +268,68 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "errorText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "error-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the textarea and displayed when an error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "fill",
+      "type": "\"outline\" | \"solid\" | undefined",
+      "mutable": false,
+      "attr": "fill",
+      "reflectToAttr": false,
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "outline",
+          "type": "string"
+        },
+        {
+          "value": "solid",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "helperText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "helper-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the textarea and displayed when no error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
@@ -279,13 +378,85 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The visible label associated with the textarea.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the textarea.\n`\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.\n`\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "floating",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "maxlength",
       "type": "number | undefined",
       "mutable": false,
       "attr": "maxlength",
       "reflectToAttr": false,
-      "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
+      "docs": "This attribute specifies the maximum number of characters that the user can enter.",
       "docsTags": [],
       "values": [
         {
@@ -304,7 +475,7 @@
       "mutable": false,
       "attr": "minlength",
       "reflectToAttr": false,
-      "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
+      "docs": "This attribute specifies the minimum number of characters that the user can enter.",
       "docsTags": [],
       "values": [
         {
@@ -427,6 +598,26 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "shape",
+      "type": "\"round\" | undefined",
+      "mutable": false,
+      "attr": "shape",
+      "reflectToAttr": false,
+      "docs": "The shape of the textarea. If \"round\" it will have an increased border radius.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "round",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "spellcheck",
       "type": "boolean",
@@ -536,7 +727,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the input value has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-textarea>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the element loses focus after its value\nhas been modified.",
       "docsTags": []
     },
     {
@@ -550,11 +741,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "TextareaInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "docs": "The `ionInput` event fires when the `value` of an `<ion-textarea>` element\nhas been changed.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
       "docsTags": []
     }
   ],
@@ -565,16 +756,46 @@
       "annotation": "prop",
       "docs": "Background of the textarea"
     },
+    {
+      "name": "--border-color",
+      "annotation": "prop",
+      "docs": "Color of the border below the textarea when using helper text, error text, or counter"
+    },
     {
       "name": "--border-radius",
       "annotation": "prop",
       "docs": "Border radius of the textarea"
     },
+    {
+      "name": "--border-style",
+      "annotation": "prop",
+      "docs": "Style of the border below the textarea when using helper text, error text, or counter"
+    },
+    {
+      "name": "--border-width",
+      "annotation": "prop",
+      "docs": "Width of the border below the textarea when using helper text, error text, or counter"
+    },
     {
       "name": "--color",
       "annotation": "prop",
       "docs": "Color of the text"
     },
+    {
+      "name": "--highlight-color-focused",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the textarea when focused"
+    },
+    {
+      "name": "--highlight-color-invalid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the textarea when invalid"
+    },
+    {
+      "name": "--highlight-color-valid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the textarea when valid"
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
diff --git a/src/translate/.detection/api/toast.json b/src/translate/.detection/api/toast.json
index 25c218dd8df..977fc8ccf98 100644
--- a/src/translate/.detection/api/toast.json
+++ b/src/translate/.detection/api/toast.json
@@ -237,6 +237,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -300,7 +317,7 @@
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
-      "docs": "Message to be shown in the toast.",
+      "docs": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -379,6 +396,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -437,6 +473,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the toast has dismissed.\nShorthand for ionToastDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the toast has presented.\nShorthand for ionToastWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionToastDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -472,6 +526,24 @@
       "composed": true,
       "docs": "Emitted before the toast has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the toast has dismissed.\nShorthand for ionToastWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the toast has presented.\nShorthand for ionToastWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [],
diff --git a/src/translate/.detection/api/toggle.json b/src/translate/.detection/api/toggle.json
index 0ce4065fd6f..f87fc39d265 100644
--- a/src/translate/.detection/api/toggle.json
+++ b/src/translate/.detection/api/toggle.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "- The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
+    },
     {
       "name": "part",
       "text": "track - The background track of the toggle."
@@ -128,6 +132,77 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -207,7 +282,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value property has changed.",
+      "docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
       "docsTags": []
     },
     {
@@ -222,16 +297,6 @@
   ],
   "listeners": [],
   "styles": [
-    {
-      "name": "--background",
-      "annotation": "prop",
-      "docs": "Background of the toggle"
-    },
-    {
-      "name": "--background-checked",
-      "annotation": "prop",
-      "docs": "Background of the toggle when checked"
-    },
     {
       "name": "--border-radius",
       "annotation": "prop",
@@ -281,9 +346,24 @@
       "name": "--handle-width",
       "annotation": "prop",
       "docs": "Width of the toggle handle"
+    },
+    {
+      "name": "--track-background",
+      "annotation": "prop",
+      "docs": "Background of the toggle track"
+    },
+    {
+      "name": "--track-background-checked",
+      "annotation": "prop",
+      "docs": "Background of the toggle track when checked"
+    }
+  ],
+  "slots": [
+    {
+      "name": "",
+      "docs": "The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
     }
   ],
-  "slots": [],
   "parts": [
     {
       "name": "handle",
diff --git a/src/translate/api/accordion-group.json b/src/translate/api/accordion-group.json
index 4ee1634b259..e09e4c9e693 100644
--- a/src/translate/api/accordion-group.json
+++ b/src/translate/api/accordion-group.json
@@ -130,7 +130,7 @@
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "The value of the accordion group.",
+      "docs": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`",
       "docsTags": [],
       "values": [
         {
@@ -158,7 +158,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value property has changed.",
+      "docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/api/accordion.json b/src/translate/api/accordion.json
index cc61bc77e52..8097c9e2d73 100644
--- a/src/translate/api/accordion.json
+++ b/src/translate/api/accordion.json
@@ -109,7 +109,7 @@
       "mutable": false,
       "attr": "toggle-icon-slot",
       "reflectToAttr": false,
-      "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `'end'`.",
+      "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`.",
       "docsTags": [],
       "default": "'end'",
       "values": [
diff --git a/src/translate/api/action-sheet.json b/src/translate/api/action-sheet.json
index 1b9497fe6bb..22dd4a06592 100644
--- a/src/translate/api/action-sheet.json
+++ b/src/translate/api/action-sheet.json
@@ -141,6 +141,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -232,6 +249,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -290,13 +326,31 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the action sheet has dismissed.\nShorthand for ionActionSheetDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the action sheet has presented.\nShorthand for ionActionSheetWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionActionSheetDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted after the alert has dismissed.",
+      "docs": "Emitted after the action sheet has dismissed.",
       "docsTags": []
     },
     {
@@ -305,7 +359,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted after the alert has presented.",
+      "docs": "Emitted after the action sheet has presented.",
       "docsTags": []
     },
     {
@@ -314,7 +368,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted before the alert has dismissed.",
+      "docs": "Emitted before the action sheet has dismissed.",
       "docsTags": []
     },
     {
@@ -323,7 +377,25 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted before the alert has presented.",
+      "docs": "Emitted before the action sheet has presented.",
+      "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the action sheet has dismissed.\nShorthand for ionActionSheetWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the action sheet has presented.\nShorthand for ionActionSheetWillPresent.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/api/alert.json b/src/translate/api/alert.json
index 81e5fc8c880..3d1fd438d12 100644
--- a/src/translate/api/alert.json
+++ b/src/translate/api/alert.json
@@ -157,6 +157,23 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -198,7 +215,7 @@
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
-      "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -270,6 +287,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -328,6 +364,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the alert has dismissed.\nShorthand for ionAlertDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the alert has presented.\nShorthand for ionAlertWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionAlertDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -363,6 +417,24 @@
       "composed": true,
       "docs": "Emitted before the alert has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the alert has dismissed.\nShorthand for ionAlertWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the alert has presented.\nShorthand for ionAlertWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [
diff --git a/src/translate/api/breadcrumbs.json b/src/translate/api/breadcrumbs.json
index 66231eed210..a86cd7f333c 100644
--- a/src/translate/api/breadcrumbs.json
+++ b/src/translate/api/breadcrumbs.json
@@ -16,7 +16,7 @@
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
       "mutable": false,
       "attr": "color",
-      "reflectToAttr": false,
+      "reflectToAttr": true,
       "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
       "docsTags": [],
       "values": [
diff --git a/src/translate/api/checkbox.json b/src/translate/api/checkbox.json
index 17910785174..ff682759224 100644
--- a/src/translate/api/checkbox.json
+++ b/src/translate/api/checkbox.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "- The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
+    },
     {
       "name": "part",
       "text": "container - The container for the checkbox mark."
@@ -125,6 +129,77 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and checkbox within a line.\n`\"start\"`: The label and checkbox will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and checkbox will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and checkbox will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -198,7 +273,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the checked property has changed.",
+      "docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
       "docsTags": []
     },
     {
@@ -213,16 +288,6 @@
   ],
   "listeners": [],
   "styles": [
-    {
-      "name": "--background",
-      "annotation": "prop",
-      "docs": "Background of the checkbox icon"
-    },
-    {
-      "name": "--background-checked",
-      "annotation": "prop",
-      "docs": "Background of the checkbox icon when checked"
-    },
     {
       "name": "--border-color",
       "annotation": "prop",
@@ -248,6 +313,16 @@
       "annotation": "prop",
       "docs": "Border width of the checkbox icon"
     },
+    {
+      "name": "--checkbox-background",
+      "annotation": "prop",
+      "docs": "Background of the checkbox icon"
+    },
+    {
+      "name": "--checkbox-background-checked",
+      "annotation": "prop",
+      "docs": "Background of the checkbox icon when checked"
+    },
     {
       "name": "--checkmark-color",
       "annotation": "prop",
@@ -269,7 +344,12 @@
       "docs": "Transition of the checkbox icon"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "",
+      "docs": "The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
+    }
+  ],
   "parts": [
     {
       "name": "container",
diff --git a/src/translate/api/content.json b/src/translate/api/content.json
index d3286e49ef8..07dd018764a 100644
--- a/src/translate/api/content.json
+++ b/src/translate/api/content.json
@@ -84,7 +84,7 @@
       "mutable": true,
       "attr": "force-overscroll",
       "reflectToAttr": false,
-      "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting.",
+      "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, this does not disable the system bounce on iOS. That is an OS level setting.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/api/datetime.json b/src/translate/api/datetime.json
index fe6c70ac29b..2559aafb7b5 100644
--- a/src/translate/api/datetime.json
+++ b/src/translate/api/datetime.json
@@ -286,7 +286,7 @@
       "mutable": false,
       "attr": "locale",
       "reflectToAttr": false,
-      "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `'default'` value refers to the default\nlocale set by your device.",
+      "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `\"default\"` value refers to the default\nlocale set by your device.",
       "docsTags": [],
       "default": "'default'",
       "values": [
@@ -446,7 +446,7 @@
       "mutable": false,
       "attr": "prefer-wheel",
       "reflectToAttr": false,
-      "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `'date'`, `'date-time'`, or `'time-date'`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`'time'`, `'month'`, `'month-year'`, or `'year'`.",
+      "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`.",
       "docsTags": [],
       "default": "false",
       "values": [
@@ -463,7 +463,7 @@
       "mutable": false,
       "attr": "presentation",
       "reflectToAttr": false,
-      "docs": "Which values you want to select. `'date'` will show\na calendar picker to select the month, day, and year. `'time'`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `'date-time'` will show the date picker first and time picker second.\n`'time-date'` will show the time picker first and date picker second.",
+      "docs": "Which values you want to select. `\"date\"` will show\na calendar picker to select the month, day, and year. `\"time\"`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `\"date-time\"` will show the date picker first and time picker second.\n`\"time-date\"` will show the time picker first and date picker second.",
       "docsTags": [],
       "default": "'date-time'",
       "values": [
@@ -630,7 +630,7 @@
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nShould be an array of strings if `multiple=\"true\"`.",
+      "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nThis should be an array of strings only when `multiple=\"true\"`.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/api/infinite-scroll-content.json b/src/translate/api/infinite-scroll-content.json
index 8a4c2901c2f..4da189bafce 100644
--- a/src/translate/api/infinite-scroll-content.json
+++ b/src/translate/api/infinite-scroll-content.json
@@ -67,7 +67,7 @@
       "mutable": false,
       "attr": "loading-text",
       "reflectToAttr": false,
-      "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/api/input.json b/src/translate/api/input.json
index dd397faf275..ef6164f4516 100644
--- a/src/translate/api/input.json
+++ b/src/translate/api/input.json
@@ -412,21 +412,58 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "counter",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "counter",
+      "reflectToAttr": false,
+      "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "counterFormatter",
+      "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((inputLength: number, maxLength: number) => string)"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
       "docsTags": [],
-      "default": "0",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -490,6 +527,68 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "errorText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "error-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the input and displayed when an error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "fill",
+      "type": "\"outline\" | \"solid\" | undefined",
+      "mutable": false,
+      "attr": "fill",
+      "reflectToAttr": false,
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "outline",
+          "type": "string"
+        },
+        {
+          "value": "solid",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "helperText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "helper-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the input and displayed when no error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
@@ -538,6 +637,78 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The visible label associated with the input.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the input in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the input in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.\n`\"stacked\"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "floating",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "max",
       "type": "number | string | undefined",
@@ -749,6 +920,26 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "shape",
+      "type": "\"round\" | undefined",
+      "mutable": false,
+      "attr": "shape",
+      "reflectToAttr": false,
+      "docs": "The shape of the input. If \"round\" it will have an increased border radius.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "round",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "size",
       "type": "number | undefined",
@@ -933,7 +1124,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-input>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
       "docsTags": []
     },
     {
@@ -947,11 +1138,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "InputInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "docs": "The `ionInput` event fires when the `value` of an `<ion-input>` element\nhas been changed.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
       "docsTags": []
     }
   ],
@@ -962,11 +1153,46 @@
       "annotation": "prop",
       "docs": "Background of the input"
     },
+    {
+      "name": "--border-color",
+      "annotation": "prop",
+      "docs": "Color of the border below the input when using helper text, error text, or counter"
+    },
+    {
+      "name": "--border-radius",
+      "annotation": "prop",
+      "docs": "Radius of the input"
+    },
+    {
+      "name": "--border-style",
+      "annotation": "prop",
+      "docs": "Style of the border below the input when using helper text, error text, or counter"
+    },
+    {
+      "name": "--border-width",
+      "annotation": "prop",
+      "docs": "Width of the border below the input when using helper text, error text, or counter"
+    },
     {
       "name": "--color",
       "annotation": "prop",
       "docs": "Color of the input text"
     },
+    {
+      "name": "--highlight-color-focused",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the input when focused"
+    },
+    {
+      "name": "--highlight-color-invalid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the input when invalid"
+    },
+    {
+      "name": "--highlight-color-valid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the input when valid"
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
diff --git a/src/translate/api/item.json b/src/translate/api/item.json
index afaff146eee..1e0df2e5ac2 100644
--- a/src/translate/api/item.json
+++ b/src/translate/api/item.json
@@ -22,11 +22,11 @@
     },
     {
       "name": "slot",
-      "text": "helper - Content is placed under the item and displayed when no error is detected."
+      "text": "helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "slot",
-      "text": "error - Content is placed under the item and displayed when an error is detected."
+      "text": "error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "part",
@@ -118,8 +118,14 @@
       "attr": "counter",
       "reflectToAttr": false,
       "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
+        }
+      ],
       "default": "false",
+      "deprecation": "Use the `counter` property on `ion-input` or `ion-textarea` instead.",
       "values": [
         {
           "type": "boolean"
@@ -134,7 +140,13 @@
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
+        }
+      ],
+      "deprecation": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.",
       "values": [
         {
           "type": "((inputLength: number, maxLength: number) => string)"
@@ -224,7 +236,7 @@
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
-      "docs": "The fill for the item. If `'solid'` the item will have a background. If\n`'outline'` the item will be transparent with a border. Only available in `md` mode.",
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
       "docsTags": [],
       "values": [
         {
@@ -443,7 +455,7 @@
   "events": [],
   "listeners": [
     {
-      "event": "ionChange",
+      "event": "ionInput",
       "capture": false,
       "passive": false
     },
@@ -646,11 +658,11 @@
     },
     {
       "name": "error",
-      "docs": "Content is placed under the item and displayed when an error is detected."
+      "docs": "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "helper",
-      "docs": "Content is placed under the item and displayed when no error is detected."
+      "docs": "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
     },
     {
       "name": "start",
diff --git a/src/translate/api/loading.json b/src/translate/api/loading.json
index 42403de595b..ae9d1cbc195 100644
--- a/src/translate/api/loading.json
+++ b/src/translate/api/loading.json
@@ -120,6 +120,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -161,7 +178,7 @@
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
-      "docs": "Optional text content to display in the loading indicator.",
+      "docs": "Optional text content to display in the loading indicator.\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -286,6 +303,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -344,6 +380,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the loading indicator has dismissed.\nShorthand for ionLoadingDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the loading indicator has presented.\nShorthand for ionLoadingWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionLoadingDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -379,6 +433,24 @@
       "composed": true,
       "docs": "Emitted before the loading has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the loading indicator has dismissed.\nShorthand for ionLoadingWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the loading indicator has presented.\nShorthand for ionLoadingWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [],
diff --git a/src/translate/api/modal.json b/src/translate/api/modal.json
index 61a8d2a8e09..85cbec53d88 100644
--- a/src/translate/api/modal.json
+++ b/src/translate/api/modal.json
@@ -98,12 +98,13 @@
     },
     {
       "name": "canDismiss",
-      "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean | undefined",
+      "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
       "mutable": false,
       "attr": "can-dismiss",
       "reflectToAttr": false,
       "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.",
       "docsTags": [],
+      "default": "true",
       "values": [
         {
           "type": "((data?: any, role?: string"
@@ -113,12 +114,9 @@
         },
         {
           "type": "boolean"
-        },
-        {
-          "type": "undefined"
         }
       ],
-      "optional": true,
+      "optional": false,
       "required": false
     },
     {
@@ -345,29 +343,6 @@
       "optional": false,
       "required": false
     },
-    {
-      "name": "swipeToClose",
-      "type": "boolean",
-      "mutable": false,
-      "attr": "swipe-to-close",
-      "reflectToAttr": false,
-      "docs": "If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.",
-      "docsTags": [
-        {
-          "name": "deprecated",
-          "text": "- To prevent modals from dismissing, use canDismiss instead."
-        }
-      ],
-      "default": "false",
-      "deprecation": "- To prevent modals from dismissing, use canDismiss instead.",
-      "values": [
-        {
-          "type": "boolean"
-        }
-      ],
-      "optional": false,
-      "required": false
-    },
     {
       "name": "trigger",
       "type": "string | undefined",
diff --git a/src/translate/api/picker.json b/src/translate/api/picker.json
index 590a7bb0efb..fa9a4737181 100644
--- a/src/translate/api/picker.json
+++ b/src/translate/api/picker.json
@@ -152,6 +152,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -224,6 +241,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -298,6 +334,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionPickerDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -333,6 +387,24 @@
       "composed": true,
       "docs": "Emitted before the picker has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [],
diff --git a/src/translate/api/popover.json b/src/translate/api/popover.json
index 96581aa8e34..9210abb17ad 100644
--- a/src/translate/api/popover.json
+++ b/src/translate/api/popover.json
@@ -33,7 +33,7 @@
       "mutable": true,
       "attr": "alignment",
       "reflectToAttr": false,
-      "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `'center'` for `ios` mode, and `'start'` for `md` mode.",
+      "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode.",
       "docsTags": [],
       "values": [
         {
@@ -317,7 +317,7 @@
       "mutable": false,
       "attr": "reference",
       "reflectToAttr": false,
-      "docs": "Describes what to position the popover relative to.\nIf `'trigger'`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `'event'`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
+      "docs": "Describes what to position the popover relative to.\nIf `\"trigger\"`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `\"event\"`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
       "docsTags": [],
       "default": "'trigger'",
       "values": [
@@ -356,7 +356,7 @@
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
-      "docs": "Describes which side of the `reference` point to position\nthe popover on. The `'start'` and `'end'` values are RTL-aware,\nand the `'left'` and `'right'` values are not.",
+      "docs": "Describes which side of the `reference` point to position\nthe popover on. The `\"start\"` and `\"end\"` values are RTL-aware,\nand the `\"left\"` and `\"right\"` values are not.",
       "docsTags": [],
       "default": "'bottom'",
       "values": [
@@ -394,7 +394,7 @@
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
-      "docs": "Describes how to calculate the popover width.\nIf `'cover'`, the popover width will match the width of the trigger.\nIf `'auto'`, the popover width will be determined by the content in\nthe popover.",
+      "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be determined by the content in\nthe popover.",
       "docsTags": [],
       "default": "'auto'",
       "values": [
@@ -452,7 +452,7 @@
       "mutable": false,
       "attr": "trigger-action",
       "reflectToAttr": false,
-      "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `'click'`, the popover will be presented when the trigger is left clicked.\nIf `'hover'`, the popover will be presented when a pointer hovers over the trigger.\nIf `'context-menu'`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
+      "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `\"click\"`, the popover will be presented when the trigger is left clicked.\nIf `\"hover\"`, the popover will be presented when a pointer hovers over the trigger.\nIf `\"context-menu\"`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
       "docsTags": [],
       "default": "'click'",
       "values": [
diff --git a/src/translate/api/radio.json b/src/translate/api/radio.json
index 0e233dafcce..1d5aa1430d9 100644
--- a/src/translate/api/radio.json
+++ b/src/translate/api/radio.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "- The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
+    },
     {
       "name": "part",
       "text": "container - The container for the radio mark."
@@ -91,6 +95,77 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and radio within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -190,7 +265,12 @@
       "docs": "Border radius of the inner checked radio"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "",
+      "docs": "The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
+    }
+  ],
   "parts": [
     {
       "name": "container",
diff --git a/src/translate/api/range.json b/src/translate/api/range.json
index cec22d33a78..b7774667215 100644
--- a/src/translate/api/range.json
+++ b/src/translate/api/range.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
+    },
     {
       "name": "slot",
       "text": "start - Content is placed to the left of the range slider in LTR, and to the right in RTL."
@@ -119,19 +123,21 @@
     },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "How long, in milliseconds, to wait to trigger the\n`ionChange` event after each change in the range value.\nThis also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "How long, in milliseconds, to wait to trigger the\n`ionInput` event after each change in the range value.",
       "docsTags": [],
-      "default": "0",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -168,6 +174,51 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "max",
       "type": "number",
@@ -231,7 +282,7 @@
       "reflectToAttr": false,
       "docs": "The name of the control, which is submitted with the form data.",
       "docsTags": [],
-      "default": "''",
+      "default": "this.rangeId",
       "values": [
         {
           "type": "string"
@@ -365,7 +416,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value property has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
       "docsTags": []
     },
     {
@@ -377,6 +428,15 @@
       "docs": "Emitted when the range has focus.",
       "docsTags": []
     },
+    {
+      "event": "ionInput",
+      "detail": "RangeChangeEventDetail",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "The `ionInput` event is fired for `<ion-range>` elements when the value\nis modified. Unlike `ionChange`, `ionInput` is fired continuously\nwhile the user is dragging the knob.",
+      "docsTags": []
+    },
     {
       "event": "ionKnobMoveEnd",
       "detail": "RangeKnobMoveEndEventDetail",
@@ -459,6 +519,10 @@
       "name": "end",
       "docs": "Content is placed to the right of the range slider in LTR, and to the left in RTL."
     },
+    {
+      "name": "label",
+      "docs": "The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
+    },
     {
       "name": "start",
       "docs": "Content is placed to the left of the range slider in LTR, and to the right in RTL."
diff --git a/src/translate/api/refresher-content.json b/src/translate/api/refresher-content.json
index 73e0c637820..89952a179f8 100644
--- a/src/translate/api/refresher-content.json
+++ b/src/translate/api/refresher-content.json
@@ -34,7 +34,7 @@
       "mutable": false,
       "attr": "pulling-text",
       "reflectToAttr": false,
-      "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -111,7 +111,7 @@
       "mutable": false,
       "attr": "refreshing-text",
       "reflectToAttr": false,
-      "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)",
+      "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/api/searchbar.json b/src/translate/api/searchbar.json
index 7342bfabec2..2b395a040cc 100644
--- a/src/translate/api/searchbar.json
+++ b/src/translate/api/searchbar.json
@@ -390,19 +390,21 @@
     },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
       "docsTags": [],
-      "default": "250",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -755,7 +757,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
       "docsTags": []
     },
     {
@@ -778,11 +780,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "KeyboardEvent",
+      "detail": "SearchbarInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "docs": "Emitted when the `value` of the `ion-searchbar` element has changed.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/api/segment.json b/src/translate/api/segment.json
index a23912dfdd2..dfd6d5af642 100644
--- a/src/translate/api/segment.json
+++ b/src/translate/api/segment.json
@@ -157,16 +157,13 @@
     },
     {
       "name": "value",
-      "type": "null | string | undefined",
+      "type": "string | undefined",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
       "docs": "the value of the segment.",
       "docsTags": [],
       "values": [
-        {
-          "type": "null"
-        },
         {
           "type": "string"
         },
diff --git a/src/translate/api/select.json b/src/translate/api/select.json
index b66a7127111..8bcaf17a8fe 100644
--- a/src/translate/api/select.json
+++ b/src/translate/api/select.json
@@ -40,6 +40,61 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "color",
+      "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "mutable": false,
+      "attr": "color",
+      "reflectToAttr": true,
+      "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\nThis property is only available when using the modern select syntax.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "danger",
+          "type": "string"
+        },
+        {
+          "value": "dark",
+          "type": "string"
+        },
+        {
+          "value": "light",
+          "type": "string"
+        },
+        {
+          "value": "medium",
+          "type": "string"
+        },
+        {
+          "value": "primary",
+          "type": "string"
+        },
+        {
+          "value": "secondary",
+          "type": "string"
+        },
+        {
+          "value": "success",
+          "type": "string"
+        },
+        {
+          "value": "tertiary",
+          "type": "string"
+        },
+        {
+          "value": "warning",
+          "type": "string"
+        },
+        {
+          "type": "string & Record<never, never>"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "compareWith",
       "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
@@ -82,6 +137,30 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "fill",
+      "type": "\"outline\" | \"solid\" | undefined",
+      "mutable": false,
+      "attr": "fill",
+      "reflectToAttr": false,
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "outline",
+          "type": "string"
+        },
+        {
+          "value": "solid",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "interface",
       "type": "\"action-sheet\" | \"alert\" | \"popover\"",
@@ -125,6 +204,107 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and select within a line.\n`justify` does not apply when the label and select\nare on different lines when `labelPlacement` is set to\n`\"floating\"` or `\"stacked\"`.\n`\"start\"`: The label and select will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and select will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and select will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The visible label associated with the select.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the select.\n`\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.\n`\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\nWhen using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`.",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "floating",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -238,13 +418,33 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "shape",
+      "type": "\"round\" | undefined",
+      "mutable": false,
+      "attr": "shape",
+      "reflectToAttr": false,
+      "docs": "The shape of the select. If \"round\" it will have an increased border radius.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "round",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "value",
       "type": "any",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "the value of the select.",
+      "docs": "The value of the select.",
       "docsTags": [],
       "values": [
         {
@@ -322,6 +522,46 @@
   ],
   "listeners": [],
   "styles": [
+    {
+      "name": "--background",
+      "annotation": "prop",
+      "docs": "Background of the select"
+    },
+    {
+      "name": "--border-color Color of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--border-radius Radius of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--border-style Style of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--border-width Width of the select border",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--highlight-color-focused The color of the highlight on the select when focused",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--highlight-color-invalid The color of the highlight on the select when invalid",
+      "annotation": "prop",
+      "docs": ""
+    },
+    {
+      "name": "--highlight-color-valid The color of the highlight on the select when valid",
+      "annotation": "prop",
+      "docs": ""
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
@@ -351,6 +591,11 @@
       "name": "--placeholder-opacity",
       "annotation": "prop",
       "docs": "Opacity of the select placeholder text"
+    },
+    {
+      "name": "--ripple-color",
+      "annotation": "prop",
+      "docs": "The color of the ripple effect on MD mode."
     }
   ],
   "slots": [],
@@ -373,14 +618,16 @@
     "ion-select-popover",
     "ion-popover",
     "ion-action-sheet",
-    "ion-alert"
+    "ion-alert",
+    "ion-icon"
   ],
   "dependencyGraph": {
     "ion-select": [
       "ion-select-popover",
       "ion-popover",
       "ion-action-sheet",
-      "ion-alert"
+      "ion-alert",
+      "ion-icon"
     ],
     "ion-select-popover": [
       "ion-item",
diff --git a/src/translate/api/tab-button.json b/src/translate/api/tab-button.json
index ca6d85caec0..7edadd1fb2e 100644
--- a/src/translate/api/tab-button.json
+++ b/src/translate/api/tab-button.json
@@ -76,7 +76,7 @@
       "mutable": true,
       "attr": "layout",
       "reflectToAttr": false,
-      "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-top'`.",
+      "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `\"icon-top\"`.",
       "docsTags": [],
       "values": [
         {
diff --git a/src/translate/api/textarea.json b/src/translate/api/textarea.json
index 0c2dfe33e55..3aca0e883c2 100644
--- a/src/translate/api/textarea.json
+++ b/src/translate/api/textarea.json
@@ -65,10 +65,10 @@
     {
       "name": "clearOnEdit",
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "attr": "clear-on-edit",
       "reflectToAttr": false,
-      "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
+      "docs": "If `true`, the value will be cleared after focus upon edit.",
       "docsTags": [],
       "default": "false",
       "values": [
@@ -153,21 +153,58 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "counter",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "counter",
+      "reflectToAttr": false,
+      "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit.\nDevelopers must also set the `maxlength` property for the counter to be calculated correctly.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "counterFormatter",
+      "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "mutable": false,
+      "reflectToAttr": false,
+      "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "((inputLength: number, maxLength: number) => string)"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "debounce",
-      "type": "number",
+      "type": "number | undefined",
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
-      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+      "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
       "docsTags": [],
-      "default": "0",
       "values": [
         {
           "type": "number"
+        },
+        {
+          "type": "undefined"
         }
       ],
-      "optional": false,
+      "optional": true,
       "required": false
     },
     {
@@ -231,6 +268,68 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "errorText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "error-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the textarea and displayed when an error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "fill",
+      "type": "\"outline\" | \"solid\" | undefined",
+      "mutable": false,
+      "attr": "fill",
+      "reflectToAttr": false,
+      "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "outline",
+          "type": "string"
+        },
+        {
+          "value": "solid",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "helperText",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "helper-text",
+      "reflectToAttr": false,
+      "docs": "Text that is placed under the textarea and displayed when no error is detected.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
@@ -279,13 +378,85 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The visible label associated with the textarea.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the textarea.\n`\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.\n`\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "floating",
+          "type": "string"
+        },
+        {
+          "value": "stacked",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "maxlength",
       "type": "number | undefined",
       "mutable": false,
       "attr": "maxlength",
       "reflectToAttr": false,
-      "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
+      "docs": "This attribute specifies the maximum number of characters that the user can enter.",
       "docsTags": [],
       "values": [
         {
@@ -304,7 +475,7 @@
       "mutable": false,
       "attr": "minlength",
       "reflectToAttr": false,
-      "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
+      "docs": "This attribute specifies the minimum number of characters that the user can enter.",
       "docsTags": [],
       "values": [
         {
@@ -427,6 +598,26 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "shape",
+      "type": "\"round\" | undefined",
+      "mutable": false,
+      "attr": "shape",
+      "reflectToAttr": false,
+      "docs": "The shape of the textarea. If \"round\" it will have an increased border radius.",
+      "docsTags": [],
+      "values": [
+        {
+          "value": "round",
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "spellcheck",
       "type": "boolean",
@@ -536,7 +727,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the input value has changed.",
+      "docs": "The `ionChange` event is fired for `<ion-textarea>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the element loses focus after its value\nhas been modified.",
       "docsTags": []
     },
     {
@@ -550,11 +741,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "TextareaInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "docs": "The `ionInput` event fires when the `value` of an `<ion-textarea>` element\nhas been changed.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
       "docsTags": []
     }
   ],
@@ -565,16 +756,46 @@
       "annotation": "prop",
       "docs": "Background of the textarea"
     },
+    {
+      "name": "--border-color",
+      "annotation": "prop",
+      "docs": "Color of the border below the textarea when using helper text, error text, or counter"
+    },
     {
       "name": "--border-radius",
       "annotation": "prop",
       "docs": "Border radius of the textarea"
     },
+    {
+      "name": "--border-style",
+      "annotation": "prop",
+      "docs": "Style of the border below the textarea when using helper text, error text, or counter"
+    },
+    {
+      "name": "--border-width",
+      "annotation": "prop",
+      "docs": "Width of the border below the textarea when using helper text, error text, or counter"
+    },
     {
       "name": "--color",
       "annotation": "prop",
       "docs": "Color of the text"
     },
+    {
+      "name": "--highlight-color-focused",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the textarea when focused"
+    },
+    {
+      "name": "--highlight-color-invalid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the textarea when invalid"
+    },
+    {
+      "name": "--highlight-color-valid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the textarea when valid"
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
diff --git a/src/translate/api/toast.json b/src/translate/api/toast.json
index 25c218dd8df..977fc8ccf98 100644
--- a/src/translate/api/toast.json
+++ b/src/translate/api/toast.json
@@ -237,6 +237,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "mutable": false,
+      "attr": "is-open",
+      "reflectToAttr": false,
+      "docs": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast dismisses. You will need to do that in your code.",
+      "docsTags": [],
+      "default": "false",
+      "values": [
+        {
+          "type": "boolean"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "keyboardClose",
       "type": "boolean",
@@ -300,7 +317,7 @@
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
-      "docs": "Message to be shown in the toast.",
+      "docs": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
       "docsTags": [],
       "values": [
         {
@@ -379,6 +396,25 @@
       ],
       "optional": false,
       "required": false
+    },
+    {
+      "name": "trigger",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "trigger",
+      "reflectToAttr": false,
+      "docs": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": false,
+      "required": false
     }
   ],
   "methods": [
@@ -437,6 +473,24 @@
     }
   ],
   "events": [
+    {
+      "event": "didDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the toast has dismissed.\nShorthand for ionToastDidDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "didPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted after the toast has presented.\nShorthand for ionToastWillDismiss.",
+      "docsTags": []
+    },
     {
       "event": "ionToastDidDismiss",
       "detail": "OverlayEventDetail<any>",
@@ -472,6 +526,24 @@
       "composed": true,
       "docs": "Emitted before the toast has presented.",
       "docsTags": []
+    },
+    {
+      "event": "willDismiss",
+      "detail": "OverlayEventDetail<any>",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the toast has dismissed.\nShorthand for ionToastWillDismiss.",
+      "docsTags": []
+    },
+    {
+      "event": "willPresent",
+      "detail": "void",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": "Emitted before the toast has presented.\nShorthand for ionToastWillPresent.",
+      "docsTags": []
     }
   ],
   "listeners": [],
diff --git a/src/translate/api/toggle.json b/src/translate/api/toggle.json
index 0ce4065fd6f..f87fc39d265 100644
--- a/src/translate/api/toggle.json
+++ b/src/translate/api/toggle.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "- The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
+    },
     {
       "name": "part",
       "text": "track - The background track of the toggle."
@@ -128,6 +132,77 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "justify",
+      "type": "\"end\" | \"space-between\" | \"start\"",
+      "mutable": false,
+      "attr": "justify",
+      "reflectToAttr": false,
+      "docs": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.",
+      "docsTags": [],
+      "default": "'space-between'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "space-between",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "labelPlacement",
+      "type": "\"end\" | \"fixed\" | \"start\"",
+      "mutable": false,
+      "attr": "label-placement",
+      "reflectToAttr": false,
+      "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+      "docsTags": [],
+      "default": "'start'",
+      "values": [
+        {
+          "value": "end",
+          "type": "string"
+        },
+        {
+          "value": "fixed",
+          "type": "string"
+        },
+        {
+          "value": "start",
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
+    {
+      "name": "legacy",
+      "type": "boolean | undefined",
+      "mutable": false,
+      "attr": "legacy",
+      "reflectToAttr": false,
+      "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
@@ -207,7 +282,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value property has changed.",
+      "docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
       "docsTags": []
     },
     {
@@ -222,16 +297,6 @@
   ],
   "listeners": [],
   "styles": [
-    {
-      "name": "--background",
-      "annotation": "prop",
-      "docs": "Background of the toggle"
-    },
-    {
-      "name": "--background-checked",
-      "annotation": "prop",
-      "docs": "Background of the toggle when checked"
-    },
     {
       "name": "--border-radius",
       "annotation": "prop",
@@ -281,9 +346,24 @@
       "name": "--handle-width",
       "annotation": "prop",
       "docs": "Width of the toggle handle"
+    },
+    {
+      "name": "--track-background",
+      "annotation": "prop",
+      "docs": "Background of the toggle track"
+    },
+    {
+      "name": "--track-background-checked",
+      "annotation": "prop",
+      "docs": "Background of the toggle track when checked"
+    }
+  ],
+  "slots": [
+    {
+      "name": "",
+      "docs": "The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
     }
   ],
-  "slots": [],
   "parts": [
     {
       "name": "handle",

From c4004b5503ef38f83aab1002d2d4de23c83574ad Mon Sep 17 00:00:00 2001
From: Masahiko Sakakibara <sakakibara@rdlabo.jp>
Date: Fri, 7 Apr 2023 01:22:05 +0900
Subject: [PATCH 305/469] fix(jp): set the v7 document version to v7 (#2884)

---
 scripts/i18n.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index a0950441fb8..046812c4f7b 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -2,7 +2,7 @@
 set -o errexit
 set -o nounset
 
-mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v6/
+mkdir -p i18n/ja/docusaurus-plugin-content-docs/current/
 curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
-  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v6/ --strip-components 2 ionic-docs-translation-jp/docs
+  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/current/ --strip-components 2 ionic-docs-translation-jp/docs
 node scripts/api-ja.js

From f521e46e69b77c0b5c9152a093c0934cb976e9b6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 6 Apr 2023 12:37:23 -0400
Subject: [PATCH 306/469] docs(select): popover can be used with multiple prop
 (#2887)

---
 docs/api/select.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/api/select.md b/docs/api/select.md
index 92ab5b6e70f..d5be17b0978 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -50,9 +50,9 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde
 
 ## 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.
+By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover 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.
+Note: the `action-sheet` interface will not work with multiple selection.
 
 import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
 
@@ -224,4 +224,4 @@ Ionic uses heuristics to detect if an app is using the modern select syntax. In
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />

From 590b0c8f898f8b820c37560a78a052c5e1949f56 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 6 Apr 2023 13:54:36 -0400
Subject: [PATCH 307/469] Revert "fix(jp): set the v7 document version to v7
 (#2884)" (#2889)

This reverts commit c4004b5503ef38f83aab1002d2d4de23c83574ad.
---
 scripts/i18n.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index 046812c4f7b..a0950441fb8 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -2,7 +2,7 @@
 set -o errexit
 set -o nounset
 
-mkdir -p i18n/ja/docusaurus-plugin-content-docs/current/
+mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v6/
 curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
-  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/current/ --strip-components 2 ionic-docs-translation-jp/docs
+  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v6/ --strip-components 2 ionic-docs-translation-jp/docs
 node scripts/api-ja.js

From c0a063070fa576e7d2f0e4e2a2add4b380fd8e9c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 6 Apr 2023 16:53:40 -0400
Subject: [PATCH 308/469] docs(react): add example for useIonRouter (#2888)

---
 docs/react/navigation.md | 59 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index 234ff8e27b2..c24d363256b 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -591,6 +591,65 @@ When a user navigates to a session detail page ("/sessions/1" for instance), the
 
 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`.
 
+## Utilities
+
+### useIonRouter
+
+The `useIonRouter` hook can be used for more direct control over routing in Ionic React. It allows you to pass additional metadata to Ionic, such as a custom animaton, before calling React router.
+
+The `useIonRouter` hook returns a `UseIonRouterResult` which has several convenience methods for routing:
+
+```typescript
+type UseIonRouterResult = {
+  /**
+   * Navigates to a new pathname
+   * @param pathname - The path to navigate to
+   * @param routerDirection - Optional - The RouterDirection to use for transition purposes, defaults to 'forward'
+   * @param routeAction - Optional - The RouteAction to use for history purposes, defaults to 'push'
+   * @param routerOptions - Optional - Any additional parameters to pass to the router
+   * @param animationBuilder - Optional - A custom transition animation to use
+   */
+  push(
+    pathname: string,
+    routerDirection?: RouterDirection,
+    routeAction?: RouteAction,
+    routerOptions?: RouterOptions,
+    animationBuilder?: AnimationBuilder
+  ): void;
+  /**
+   * Navigates backwards in history, using the IonRouter to determine history
+   * @param animationBuilder - Optional - A custom transition animation to use
+   */
+  goBack(animationBuilder?: AnimationBuilder): void;
+  /**
+   * Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not.
+   */
+  canGoBack(): boolean;
+  /**
+   * Information about the current route.
+   */
+  routeInfo: RouteInfo;
+};
+```
+
+The following example shows how to use `useIonRouter`:
+
+
+```tsx
+import { useIonRouter } from '@ionic/react';
+
+const MyComponent: React.FC = () => {
+  const router = useIonRouter();
+  const goToPage = () => {
+    router.push('/my-page', 'root', 'replace');
+  };
+  
+  ...
+}
+
+```
+
+
 ## 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 06697ef2a269b883e3ae1a1cd922b92c151744ad Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 7 Apr 2023 15:29:22 -0400
Subject: [PATCH 309/469] docs(modal): controller playground uses bolded action
 (#2890)

---
 .../modal/controller/angular/modal-example_component_html.md  | 2 +-
 static/usage/v6/modal/controller/demo.html                    | 2 +-
 static/usage/v6/modal/controller/javascript.md                | 2 +-
 static/usage/v6/modal/controller/react.md                     | 4 +++-
 static/usage/v6/modal/controller/vue/modal_vue.md             | 2 +-
 .../modal/controller/angular/modal-example_component_html.md  | 2 +-
 static/usage/v7/modal/controller/demo.html                    | 2 +-
 static/usage/v7/modal/controller/javascript.md                | 2 +-
 static/usage/v7/modal/controller/react.md                     | 4 +++-
 static/usage/v7/modal/controller/vue/modal_vue.md             | 2 +-
 10 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/static/usage/v6/modal/controller/angular/modal-example_component_html.md b/static/usage/v6/modal/controller/angular/modal-example_component_html.md
index 34387a14d75..fdff634a1fe 100644
--- a/static/usage/v6/modal/controller/angular/modal-example_component_html.md
+++ b/static/usage/v6/modal/controller/angular/modal-example_component_html.md
@@ -6,7 +6,7 @@
     </ion-buttons>
     <ion-title>Welcome</ion-title>
     <ion-buttons slot="end">
-      <ion-button (click)="confirm()">Confirm</ion-button>
+      <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
diff --git a/static/usage/v6/modal/controller/demo.html b/static/usage/v6/modal/controller/demo.html
index 67c8cd24fc6..643eeb66ccc 100644
--- a/static/usage/v6/modal/controller/demo.html
+++ b/static/usage/v6/modal/controller/demo.html
@@ -39,7 +39,7 @@
           </ion-buttons>
           <ion-title>Welcome</ion-title>
           <ion-buttons slot="end">
-            <ion-button onclick="confirm()">Confirm</ion-button>
+            <ion-button onclick="confirm()" strong>Confirm</ion-button>
           </ion-buttons>
         </ion-toolbar>
       </ion-header>
diff --git a/static/usage/v6/modal/controller/javascript.md b/static/usage/v6/modal/controller/javascript.md
index dc4786be8cf..9bcba5693c0 100644
--- a/static/usage/v6/modal/controller/javascript.md
+++ b/static/usage/v6/modal/controller/javascript.md
@@ -20,7 +20,7 @@
           </ion-buttons>
           <ion-title>Welcome</ion-title>
           <ion-buttons slot="end">
-            <ion-button onclick="confirm()">Confirm</ion-button>
+            <ion-button onclick="confirm()" strong>Confirm</ion-button>
           </ion-buttons>
         </ion-toolbar>
       </ion-header>
diff --git a/static/usage/v6/modal/controller/react.md b/static/usage/v6/modal/controller/react.md
index 8af5d61f855..68c70963f1e 100644
--- a/static/usage/v6/modal/controller/react.md
+++ b/static/usage/v6/modal/controller/react.md
@@ -32,7 +32,9 @@ const ModalExample = ({
           </IonButtons>
           <IonTitle>Welcome</IonTitle>
           <IonButtons slot="end">
-            <IonButton onClick={() => onDismiss(inputRef.current?.value, 'confirm')}>Confirm</IonButton>
+            <IonButton onClick={() => onDismiss(inputRef.current?.value, 'confirm')} strong={true}>
+              Confirm
+            </IonButton>
           </IonButtons>
         </IonToolbar>
       </IonHeader>
diff --git a/static/usage/v6/modal/controller/vue/modal_vue.md b/static/usage/v6/modal/controller/vue/modal_vue.md
index fb25c458a6e..18ddd20733b 100644
--- a/static/usage/v6/modal/controller/vue/modal_vue.md
+++ b/static/usage/v6/modal/controller/vue/modal_vue.md
@@ -7,7 +7,7 @@
       </ion-buttons>
       <ion-title>Modal</ion-title>
       <ion-buttons slot="end">
-        <ion-button @click="confirm">Confirm</ion-button>
+        <ion-button @click="confirm" :strong="true">Confirm</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
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
index 34387a14d75..fdff634a1fe 100644
--- a/static/usage/v7/modal/controller/angular/modal-example_component_html.md
+++ b/static/usage/v7/modal/controller/angular/modal-example_component_html.md
@@ -6,7 +6,7 @@
     </ion-buttons>
     <ion-title>Welcome</ion-title>
     <ion-buttons slot="end">
-      <ion-button (click)="confirm()">Confirm</ion-button>
+      <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html
index e73c910fc17..41ce4323a64 100644
--- a/static/usage/v7/modal/controller/demo.html
+++ b/static/usage/v7/modal/controller/demo.html
@@ -39,7 +39,7 @@
           </ion-buttons>
           <ion-title>Welcome</ion-title>
           <ion-buttons slot="end">
-            <ion-button onclick="confirm()">Confirm</ion-button>
+            <ion-button onclick="confirm()" strong>Confirm</ion-button>
           </ion-buttons>
         </ion-toolbar>
       </ion-header>
diff --git a/static/usage/v7/modal/controller/javascript.md b/static/usage/v7/modal/controller/javascript.md
index dc4786be8cf..9bcba5693c0 100644
--- a/static/usage/v7/modal/controller/javascript.md
+++ b/static/usage/v7/modal/controller/javascript.md
@@ -20,7 +20,7 @@
           </ion-buttons>
           <ion-title>Welcome</ion-title>
           <ion-buttons slot="end">
-            <ion-button onclick="confirm()">Confirm</ion-button>
+            <ion-button onclick="confirm()" strong>Confirm</ion-button>
           </ion-buttons>
         </ion-toolbar>
       </ion-header>
diff --git a/static/usage/v7/modal/controller/react.md b/static/usage/v7/modal/controller/react.md
index 8af5d61f855..68c70963f1e 100644
--- a/static/usage/v7/modal/controller/react.md
+++ b/static/usage/v7/modal/controller/react.md
@@ -32,7 +32,9 @@ const ModalExample = ({
           </IonButtons>
           <IonTitle>Welcome</IonTitle>
           <IonButtons slot="end">
-            <IonButton onClick={() => onDismiss(inputRef.current?.value, 'confirm')}>Confirm</IonButton>
+            <IonButton onClick={() => onDismiss(inputRef.current?.value, 'confirm')} strong={true}>
+              Confirm
+            </IonButton>
           </IonButtons>
         </IonToolbar>
       </IonHeader>
diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
index fb25c458a6e..18ddd20733b 100644
--- a/static/usage/v7/modal/controller/vue/modal_vue.md
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -7,7 +7,7 @@
       </ion-buttons>
       <ion-title>Modal</ion-title>
       <ion-buttons slot="end">
-        <ion-button @click="confirm">Confirm</ion-button>
+        <ion-button @click="confirm" :strong="true">Confirm</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>

From dc8e499bc8b0f3ed036707f62d0aaf4e3135bb50 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Mon, 10 Apr 2023 16:30:28 +0300
Subject: [PATCH 310/469] docs(theming): update vendor prefixed line height
 (#2661)

---
 docs/theming/css-shadow-parts.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.md
index 5d5be9f5099..156edd4208a 100644
--- a/docs/theming/css-shadow-parts.md
+++ b/docs/theming/css-shadow-parts.md
@@ -123,10 +123,12 @@ CSS Shadow Parts are supported in the recent versions of all of the major browse
 
 ### Vendor Prefixed Pseudo-Elements
 
+<p>
 <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:
-
+</p>
+  
 ```css
 /* Does NOT work */
 my-component::part(scroll)::-webkit-scrollbar {

From fe449b76f4a1e80e50987fe03588c1f667c3ceb9 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 10 Apr 2023 09:47:31 -0400
Subject: [PATCH 311/469] docs(layout): update structure docs to use new
 playground examples (#2882)

resolves #594
---
 docs/layout/structure.md | 209 ++++-----------------------------------
 1 file changed, 20 insertions(+), 189 deletions(-)

diff --git a/docs/layout/structure.md b/docs/layout/structure.md
index 9444db48480..5315d0cd9de 100644
--- a/docs/layout/structure.md
+++ b/docs/layout/structure.md
@@ -20,217 +20,48 @@ Ionic Framework provides several different layouts that can be used to structure
 
 ### 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>
+import Header from '@site/static/usage/v7/header/basic/index.md';
 
-  <ion-content class="ion-padding">
-    <h1>Main Content</h1>
-  </ion-content>
-</ion-app>
-```
+<Header />
 
 ### 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>
+While a toolbar in a header appears above the content, a footer appears below the content. A header and a footer can also be used together on the same page.
 
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-</ion-app>
-```
+import Footer from '@site/static/usage/v7/footer/basic/index.md';
 
-### Header and Footer
+<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>
+## Tabs Layout
 
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-</ion-app>
-```
+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 a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
 
-### 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).
+import Tabs from '@site/static/usage/v7/tabs/router/index.md';
 
-## Tabs Layout
+<Tabs />
 
-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).
+import Menu from '@site/static/usage/v7/menu/basic/index.md';
+
+<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).
+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 `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes.
+
+It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
+
+import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';
+
+<SplitPane />

From d982f44e8901e346559c6efbe9f810487bac3b6f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Apr 2023 10:24:19 -0400
Subject: [PATCH 312/469] docs(theming): remove stray whitespace (#2895)

---
 docs/theming/css-shadow-parts.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.md
index 156edd4208a..b0106a79361 100644
--- a/docs/theming/css-shadow-parts.md
+++ b/docs/theming/css-shadow-parts.md
@@ -128,7 +128,7 @@ CSS Shadow Parts are supported in the recent versions of all of the major browse
   Vendor prefixed
 </a> pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements:
 </p>
-  
+
 ```css
 /* Does NOT work */
 my-component::part(scroll)::-webkit-scrollbar {

From 682b5760faf0983aa5edbffa04c7c9150838ce6a Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 10 Apr 2023 08:07:09 -0700
Subject: [PATCH 313/469] docs(CONTRIBUTING): update misspell and period
 addition (#2893)

---
 CONTRIBUTING.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 18349950c0e..a6470cae5f7 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -55,7 +55,7 @@ Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The c
 - `static/`
   - `demos/` - self-contained demos, optionally presented by pages via `demoUrl` YAML frontmatter
 - `versioned_docs/` - versions of the docs created by the docusaurus versioning command
-- `versioned_sitebars/` - versions of the docs sidebars created by the docusaurus versioning command
+- `versioned_sidebars/` - versions of the docs sidebars created by the docusaurus versioning command
 
 ## Authoring Content
 
@@ -84,7 +84,7 @@ The Ionic docs have been translated into Japanese and are in the process of bein
 
 We use Crowdin for our translation service. You can participate in the translation effort on the [Ionic Crowdin page](https://crowdin.com/project/ionic-docs).
 
-_Please submit translation issues to the Crowdin page and not the Ionic Docs GitHub repo_
+_Please submit translation issues to the Crowdin page and not the Ionic Docs GitHub repo._
 
 The Japanese translation of the docs were built by an independent team, lead by [rdlabo](https://github.com/rdlabo) and can be found and contributed to on the [ionic-jp group's `ionic-docs` project page](https://github.com/ionic-jp/ionic-docs).
 

From 4a5f398df2ce07dd575e24d627e147733cc06f76 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 10 Apr 2023 11:31:41 -0400
Subject: [PATCH 314/469] fix(modal): controller playground uses v7 label
 syntax (#2891)

---
 .../controller/angular/modal-example_component_html.md      | 3 +--
 static/usage/v7/modal/controller/demo.html                  | 3 +--
 static/usage/v7/modal/controller/javascript.md              | 3 +--
 static/usage/v7/modal/controller/react.md                   | 4 +---
 static/usage/v7/modal/controller/vue/modal_vue.md           | 6 ++----
 5 files changed, 6 insertions(+), 13 deletions(-)

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
index fdff634a1fe..2053452af35 100644
--- a/static/usage/v7/modal/controller/angular/modal-example_component_html.md
+++ b/static/usage/v7/modal/controller/angular/modal-example_component_html.md
@@ -12,8 +12,7 @@
 </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-input labelPlacement="stacked" label="Enter your name" [(ngModel)]="name" placeholder="Your name"></ion-input>
   </ion-item>
 </ion-content>
 ```
diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html
index 41ce4323a64..e840abcf4da 100644
--- a/static/usage/v7/modal/controller/demo.html
+++ b/static/usage/v7/modal/controller/demo.html
@@ -45,8 +45,7 @@
       </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-input type="text" label="Enter your name" label-placement="stacked" placeholder="Your name"></ion-input>
         </ion-item>
       </ion-content>
       `;
diff --git a/static/usage/v7/modal/controller/javascript.md b/static/usage/v7/modal/controller/javascript.md
index 9bcba5693c0..ca5bb55011c 100644
--- a/static/usage/v7/modal/controller/javascript.md
+++ b/static/usage/v7/modal/controller/javascript.md
@@ -26,8 +26,7 @@
       </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-input type="text" label-placement="stacked" label="Enter your name" placeholder="Your name"></ion-input>
         </ion-item>
       </ion-content>
       `;
diff --git a/static/usage/v7/modal/controller/react.md b/static/usage/v7/modal/controller/react.md
index 68c70963f1e..fcbc0b3be31 100644
--- a/static/usage/v7/modal/controller/react.md
+++ b/static/usage/v7/modal/controller/react.md
@@ -9,7 +9,6 @@ import {
   IonTitle,
   IonPage,
   IonItem,
-  IonLabel,
   IonInput,
   useIonModal,
 } from '@ionic/react';
@@ -40,8 +39,7 @@ const ModalExample = ({
       </IonHeader>
       <IonContent className="ion-padding">
         <IonItem>
-          <IonLabel position="stacked">Enter your name</IonLabel>
-          <IonInput ref={inputRef} placeholder="Your name" />
+          <IonInput ref={inputRef} labelPlacement="stacked" label="Enter your name" placeholder="Your name" />
         </IonItem>
       </IonContent>
     </IonPage>
diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
index 18ddd20733b..7df58303b59 100644
--- a/static/usage/v7/modal/controller/vue/modal_vue.md
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -13,8 +13,7 @@
   </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-input label-placement="stacked" label="Enter your name" v-model="name" placeholder="Your name"></ion-input>
     </ion-item>
   </ion-content>
 </template>
@@ -28,7 +27,6 @@
     IonButtons,
     IonButton,
     IonItem,
-    IonLabel,
     IonInput,
     modalController,
   } from '@ionic/vue';
@@ -36,7 +34,7 @@
 
   export default defineComponent({
     name: 'Modal',
-    components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons, IonButton, IonItem, IonLabel, IonInput },
+    components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons, IonButton, IonItem, IonInput },
     methods: {
       cancel() {
         return modalController.dismiss(null, 'cancel');

From f7a7d12edd36a945736803c9fc3d51fc4c3c80c5 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 10 Apr 2023 14:00:12 -0400
Subject: [PATCH 315/469] fix(styles): add sidebar indentation for nested
 sections (#2886)

* fix(styles): add sidebar indentation for nested sections

* fix: spacing at end of sidebar

* fix: spacing between sections

* fix: padding between collapsed sections
---
 src/styles/components/_doc-sidebar.scss | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/styles/components/_doc-sidebar.scss b/src/styles/components/_doc-sidebar.scss
index 1d36474e088..34b9bd17ee7 100644
--- a/src/styles/components/_doc-sidebar.scss
+++ b/src/styles/components/_doc-sidebar.scss
@@ -71,17 +71,16 @@ html[data-theme='dark'] {
     display: none !important;
   }
 
+  .theme-doc-sidebar-item-category-level-1 > .menu__list {
+    /* removes indentation from first level categories */
+    margin: 0;
+  }
+
   .menu__list {
     display: block !important;
     transition: height 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) 25ms !important;
     will-change: initial !important;
 
-    margin: 0;
-
-    li:last-of-type {
-      padding-block-end: 1.5rem;
-    }
-
     .menu__list {
       .menu__link--sublist {
         margin-inline-start: calc(-1 * (var(--dropdown-icon-width) + var(--dropdown-icon-gap)));
@@ -104,6 +103,14 @@ html[data-theme='dark'] {
     }
   }
 
+  .theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:last-of-type {
+    padding-block-end: 1.5rem;
+  }
+
+  .theme-doc-sidebar-item-category-level-1:last-of-type {
+    margin-block-end: 1.5rem;
+  }
+
   .menu__link {
     font-weight: 500;
     font-size: 0.813rem;

From 635142321c1e8ba4dfb670f8777bf55732ea876d Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 10 Apr 2023 11:13:15 -0700
Subject: [PATCH 316/469] docs(router-link): removal of phone demo on v6 and v7
 (#2899)

---
 docs/api/router-link.md                      | 16 +---------------
 versioned_docs/version-v6/api/router-link.md | 11 ++---------
 2 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index 96b22e69af5..e3f92013dd7 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -1,10 +1,6 @@
 ---
 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 '@ionic-internal/component-api/v7/router-link/props.md';
 import Events from '@ionic-internal/component-api/v7/router-link/events.md';
@@ -22,23 +18,13 @@ 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.
 :::
 
-
-
+See the [Router](./router) documentation for more information.
 
 ## Properties
 <Props />
diff --git a/versioned_docs/version-v6/api/router-link.md b/versioned_docs/version-v6/api/router-link.md
index bcccd576c42..e3a563f1fdd 100644
--- a/versioned_docs/version-v6/api/router-link.md
+++ b/versioned_docs/version-v6/api/router-link.md
@@ -1,12 +1,7 @@
 ---
 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 '@ionic-internal/component-api/v6/router-link/props.md';
 import Events from '@ionic-internal/component-api/v6/router-link/events.md';
 import Methods from '@ionic-internal/component-api/v6/router-link/methods.md';
@@ -26,16 +21,14 @@ 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.
 :::
 
+See the [Router](./router) documentation for more information.
+
 ## Properties
 
 <Props />

From 1ce073d6a0ab4e31102398d49fc2a674c413cf4f Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 10 Apr 2023 15:42:09 -0700
Subject: [PATCH 317/469] docs(studio): removal of studio pages for v7, v6, and
 v5 (#2900)

---
 docs/studio/assets.md                         |  17 --
 docs/studio/code.md                           |  40 ----
 docs/studio/designer.md                       | 179 ------------------
 docs/studio/faq.md                            |  23 ---
 docs/studio/guides/routing-and-navigation.md  |  29 ---
 .../guides/using-native-functionality.md      |  17 --
 docs/studio/running.md                        |  66 -------
 docs/studio/settings.md                       |  68 -------
 docs/studio/setup/installation.md             |  17 --
 docs/studio/setup/native.md                   |  13 --
 docs/studio/start.md                          |  13 --
 docs/studio/support.md                        |  15 --
 docs/studio/terminal.md                       |  36 ----
 docs/studio/theming.md                        |  15 --
 versioned_docs/version-v5/studio.md           |  31 ---
 versioned_docs/version-v5/studio/assets.md    |  17 --
 versioned_docs/version-v5/studio/code.md      |  40 ----
 versioned_docs/version-v5/studio/designer.md  | 179 ------------------
 versioned_docs/version-v5/studio/faq.md       |  23 ---
 .../studio/guides/routing-and-navigation.md   |  29 ---
 .../guides/using-native-functionality.md      |  17 --
 versioned_docs/version-v5/studio/running.md   |  66 -------
 versioned_docs/version-v5/studio/settings.md  |  68 -------
 .../version-v5/studio/setup/installation.md   |  17 --
 .../version-v5/studio/setup/native.md         |  13 --
 versioned_docs/version-v5/studio/start.md     |  13 --
 versioned_docs/version-v5/studio/support.md   |  15 --
 versioned_docs/version-v5/studio/terminal.md  |  36 ----
 versioned_docs/version-v5/studio/theming.md   |  15 --
 versioned_docs/version-v6/studio.md           |  31 ---
 versioned_docs/version-v6/studio/assets.md    |  17 --
 versioned_docs/version-v6/studio/code.md      |  40 ----
 versioned_docs/version-v6/studio/designer.md  | 179 ------------------
 versioned_docs/version-v6/studio/faq.md       |  23 ---
 .../studio/guides/routing-and-navigation.md   |  29 ---
 .../guides/using-native-functionality.md      |  17 --
 versioned_docs/version-v6/studio/running.md   |  66 -------
 versioned_docs/version-v6/studio/settings.md  |  68 -------
 .../version-v6/studio/setup/installation.md   |  17 --
 .../version-v6/studio/setup/native.md         |  13 --
 versioned_docs/version-v6/studio/start.md     |  13 --
 versioned_docs/version-v6/studio/support.md   |  15 --
 versioned_docs/version-v6/studio/terminal.md  |  36 ----
 versioned_docs/version-v6/studio/theming.md   |  15 --
 44 files changed, 1706 deletions(-)
 delete mode 100644 docs/studio/assets.md
 delete mode 100644 docs/studio/code.md
 delete mode 100644 docs/studio/designer.md
 delete mode 100644 docs/studio/faq.md
 delete mode 100644 docs/studio/guides/routing-and-navigation.md
 delete mode 100644 docs/studio/guides/using-native-functionality.md
 delete mode 100644 docs/studio/running.md
 delete mode 100644 docs/studio/settings.md
 delete mode 100644 docs/studio/setup/installation.md
 delete mode 100644 docs/studio/setup/native.md
 delete mode 100644 docs/studio/start.md
 delete mode 100644 docs/studio/support.md
 delete mode 100644 docs/studio/terminal.md
 delete mode 100644 docs/studio/theming.md
 delete mode 100644 versioned_docs/version-v5/studio.md
 delete mode 100644 versioned_docs/version-v5/studio/assets.md
 delete mode 100644 versioned_docs/version-v5/studio/code.md
 delete mode 100644 versioned_docs/version-v5/studio/designer.md
 delete mode 100644 versioned_docs/version-v5/studio/faq.md
 delete mode 100644 versioned_docs/version-v5/studio/guides/routing-and-navigation.md
 delete mode 100644 versioned_docs/version-v5/studio/guides/using-native-functionality.md
 delete mode 100644 versioned_docs/version-v5/studio/running.md
 delete mode 100644 versioned_docs/version-v5/studio/settings.md
 delete mode 100644 versioned_docs/version-v5/studio/setup/installation.md
 delete mode 100644 versioned_docs/version-v5/studio/setup/native.md
 delete mode 100644 versioned_docs/version-v5/studio/start.md
 delete mode 100644 versioned_docs/version-v5/studio/support.md
 delete mode 100644 versioned_docs/version-v5/studio/terminal.md
 delete mode 100644 versioned_docs/version-v5/studio/theming.md
 delete mode 100644 versioned_docs/version-v6/studio.md
 delete mode 100644 versioned_docs/version-v6/studio/assets.md
 delete mode 100644 versioned_docs/version-v6/studio/code.md
 delete mode 100644 versioned_docs/version-v6/studio/designer.md
 delete mode 100644 versioned_docs/version-v6/studio/faq.md
 delete mode 100644 versioned_docs/version-v6/studio/guides/routing-and-navigation.md
 delete mode 100644 versioned_docs/version-v6/studio/guides/using-native-functionality.md
 delete mode 100644 versioned_docs/version-v6/studio/running.md
 delete mode 100644 versioned_docs/version-v6/studio/settings.md
 delete mode 100644 versioned_docs/version-v6/studio/setup/installation.md
 delete mode 100644 versioned_docs/version-v6/studio/setup/native.md
 delete mode 100644 versioned_docs/version-v6/studio/start.md
 delete mode 100644 versioned_docs/version-v6/studio/support.md
 delete mode 100644 versioned_docs/version-v6/studio/terminal.md
 delete mode 100644 versioned_docs/version-v6/studio/theming.md

diff --git a/docs/studio/assets.md b/docs/studio/assets.md
deleted file mode 100644
index 20a68326ab6..00000000000
--- a/docs/studio/assets.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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/docs/studio/code.md b/docs/studio/code.md
deleted file mode 100644
index 7196a738e52..00000000000
--- a/docs/studio/code.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 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/docs/studio/designer.md b/docs/studio/designer.md
deleted file mode 100644
index f026bd5e459..00000000000
--- a/docs/studio/designer.md
+++ /dev/null
@@ -1,179 +0,0 @@
-# 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/docs/studio/faq.md b/docs/studio/faq.md
deleted file mode 100644
index 49a116ceabd..00000000000
--- a/docs/studio/faq.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# 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/docs/studio/guides/routing-and-navigation.md b/docs/studio/guides/routing-and-navigation.md
deleted file mode 100644
index ac666208502..00000000000
--- a/docs/studio/guides/routing-and-navigation.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# 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/docs/studio/guides/using-native-functionality.md b/docs/studio/guides/using-native-functionality.md
deleted file mode 100644
index 41e0f4089e6..00000000000
--- a/docs/studio/guides/using-native-functionality.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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/docs/studio/running.md b/docs/studio/running.md
deleted file mode 100644
index 8636ae2f597..00000000000
--- a/docs/studio/running.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# 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/docs/studio/settings.md b/docs/studio/settings.md
deleted file mode 100644
index 3adc2e9bd06..00000000000
--- a/docs/studio/settings.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# 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/docs/studio/setup/installation.md b/docs/studio/setup/installation.md
deleted file mode 100644
index 65b99714ed9..00000000000
--- a/docs/studio/setup/installation.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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/docs/studio/setup/native.md b/docs/studio/setup/native.md
deleted file mode 100644
index 392c8137d73..00000000000
--- a/docs/studio/setup/native.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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/docs/studio/start.md b/docs/studio/start.md
deleted file mode 100644
index ea562de7458..00000000000
--- a/docs/studio/start.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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/docs/studio/support.md b/docs/studio/support.md
deleted file mode 100644
index 591c5983d5a..00000000000
--- a/docs/studio/support.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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/docs/studio/terminal.md b/docs/studio/terminal.md
deleted file mode 100644
index 83556ffdde2..00000000000
--- a/docs/studio/terminal.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# 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/docs/studio/theming.md b/docs/studio/theming.md
deleted file mode 100644
index adc47a29e9c..00000000000
--- a/docs/studio/theming.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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-v5/studio.md b/versioned_docs/version-v5/studio.md
deleted file mode 100644
index 10227880b2f..00000000000
--- a/versioned_docs/version-v5/studio.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-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-v5/studio/assets.md b/versioned_docs/version-v5/studio/assets.md
deleted file mode 100644
index 20a68326ab6..00000000000
--- a/versioned_docs/version-v5/studio/assets.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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-v5/studio/code.md b/versioned_docs/version-v5/studio/code.md
deleted file mode 100644
index 7196a738e52..00000000000
--- a/versioned_docs/version-v5/studio/code.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 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-v5/studio/designer.md b/versioned_docs/version-v5/studio/designer.md
deleted file mode 100644
index f026bd5e459..00000000000
--- a/versioned_docs/version-v5/studio/designer.md
+++ /dev/null
@@ -1,179 +0,0 @@
-# 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-v5/studio/faq.md b/versioned_docs/version-v5/studio/faq.md
deleted file mode 100644
index 49a116ceabd..00000000000
--- a/versioned_docs/version-v5/studio/faq.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# 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-v5/studio/guides/routing-and-navigation.md b/versioned_docs/version-v5/studio/guides/routing-and-navigation.md
deleted file mode 100644
index ac666208502..00000000000
--- a/versioned_docs/version-v5/studio/guides/routing-and-navigation.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# 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-v5/studio/guides/using-native-functionality.md b/versioned_docs/version-v5/studio/guides/using-native-functionality.md
deleted file mode 100644
index 41e0f4089e6..00000000000
--- a/versioned_docs/version-v5/studio/guides/using-native-functionality.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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-v5/studio/running.md b/versioned_docs/version-v5/studio/running.md
deleted file mode 100644
index 8636ae2f597..00000000000
--- a/versioned_docs/version-v5/studio/running.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# 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-v5/studio/settings.md b/versioned_docs/version-v5/studio/settings.md
deleted file mode 100644
index 3adc2e9bd06..00000000000
--- a/versioned_docs/version-v5/studio/settings.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# 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-v5/studio/setup/installation.md b/versioned_docs/version-v5/studio/setup/installation.md
deleted file mode 100644
index 65b99714ed9..00000000000
--- a/versioned_docs/version-v5/studio/setup/installation.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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-v5/studio/setup/native.md b/versioned_docs/version-v5/studio/setup/native.md
deleted file mode 100644
index 392c8137d73..00000000000
--- a/versioned_docs/version-v5/studio/setup/native.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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-v5/studio/start.md b/versioned_docs/version-v5/studio/start.md
deleted file mode 100644
index ea562de7458..00000000000
--- a/versioned_docs/version-v5/studio/start.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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-v5/studio/support.md b/versioned_docs/version-v5/studio/support.md
deleted file mode 100644
index 591c5983d5a..00000000000
--- a/versioned_docs/version-v5/studio/support.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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-v5/studio/terminal.md b/versioned_docs/version-v5/studio/terminal.md
deleted file mode 100644
index 83556ffdde2..00000000000
--- a/versioned_docs/version-v5/studio/terminal.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# 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-v5/studio/theming.md b/versioned_docs/version-v5/studio/theming.md
deleted file mode 100644
index adc47a29e9c..00000000000
--- a/versioned_docs/version-v5/studio/theming.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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/studio.md b/versioned_docs/version-v6/studio.md
deleted file mode 100644
index 10227880b2f..00000000000
--- a/versioned_docs/version-v6/studio.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-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
deleted file mode 100644
index 20a68326ab6..00000000000
--- a/versioned_docs/version-v6/studio/assets.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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
deleted file mode 100644
index 7196a738e52..00000000000
--- a/versioned_docs/version-v6/studio/code.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 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
deleted file mode 100644
index f026bd5e459..00000000000
--- a/versioned_docs/version-v6/studio/designer.md
+++ /dev/null
@@ -1,179 +0,0 @@
-# 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
deleted file mode 100644
index 49a116ceabd..00000000000
--- a/versioned_docs/version-v6/studio/faq.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# 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
deleted file mode 100644
index ac666208502..00000000000
--- a/versioned_docs/version-v6/studio/guides/routing-and-navigation.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# 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
deleted file mode 100644
index 41e0f4089e6..00000000000
--- a/versioned_docs/version-v6/studio/guides/using-native-functionality.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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
deleted file mode 100644
index 8636ae2f597..00000000000
--- a/versioned_docs/version-v6/studio/running.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# 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
deleted file mode 100644
index 3adc2e9bd06..00000000000
--- a/versioned_docs/version-v6/studio/settings.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# 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
deleted file mode 100644
index 65b99714ed9..00000000000
--- a/versioned_docs/version-v6/studio/setup/installation.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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
deleted file mode 100644
index 392c8137d73..00000000000
--- a/versioned_docs/version-v6/studio/setup/native.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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
deleted file mode 100644
index ea562de7458..00000000000
--- a/versioned_docs/version-v6/studio/start.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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
deleted file mode 100644
index 591c5983d5a..00000000000
--- a/versioned_docs/version-v6/studio/support.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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
deleted file mode 100644
index 83556ffdde2..00000000000
--- a/versioned_docs/version-v6/studio/terminal.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# 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
deleted file mode 100644
index adc47a29e9c..00000000000
--- a/versioned_docs/version-v6/studio/theming.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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.

From dee546ea477a20c6d2be7bcec76d0ea454b4451d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 11 Apr 2023 12:20:32 -0400
Subject: [PATCH 318/469] docs(native): correctly show all the native plugins
 (#2903)

---
 scripts/native.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/scripts/native.js b/scripts/native.js
index ddd0fa68674..f9862c9f8d3 100644
--- a/scripts/native.js
+++ b/scripts/native.js
@@ -37,13 +37,6 @@ async function buildPluginApiDocs(pluginId) {
   const apiContent = createApiPage(pluginId, readme, pkgJson);
   const fileName = `${pluginId}.md`;
 
-  // Delete all existing generated markdown files in docs/native
-  fs.readdirSync('docs/native').forEach((file) => {
-    if (file.endsWith('.md')) {
-      fs.rmSync(`docs/native/${file}`);
-    }
-  });
-
   fs.writeFileSync(`docs/native/${fileName}`, apiContent);
   fs.writeFileSync(`versioned_docs/version-v6/native/${fileName}`, apiContent);
 }

From 2dc8c1ce22d5b8806c442c9fb5b3faf914ffaa1e Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Apr 2023 12:35:00 -0700
Subject: [PATCH 319/469] docs(nav): clearly state that it's not used for
 routing (#2901)

---
 docs/api/nav.md                      | 6 +++++-
 versioned_docs/version-v6/api/nav.md | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 7a5d975232f..58123c14c3f 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -19,7 +19,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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.
+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. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
+
+:::note
+`ion-nav` is not meant to be used for routing.  Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects.
+:::
 
 ## Using NavLink
 
diff --git a/versioned_docs/version-v6/api/nav.md b/versioned_docs/version-v6/api/nav.md
index 330f38561c4..a59ce7d562a 100644
--- a/versioned_docs/version-v6/api/nav.md
+++ b/versioned_docs/version-v6/api/nav.md
@@ -23,7 +23,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 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.
+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. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
+
+:::note
+`ion-nav` is not meant to be used for routing.  Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects.
+:::
 
 ## Using NavLink
 

From 29a1279a0c984be1a8436ca6a116734f4ee6d6fd Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 12 Apr 2023 10:12:25 -0500
Subject: [PATCH 320/469] fix(ColorGenerator): always prepend entered colors
 with pound sign (#2904)

---
 src/components/page/theming/ColorGenerator/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx
index 66e8ffd1485..7bc86599a37 100644
--- a/src/components/page/theming/ColorGenerator/index.tsx
+++ b/src/components/page/theming/ColorGenerator/index.tsx
@@ -43,6 +43,7 @@ const ColorGenerator = (props) => {
           const { tint, shade, value } = color;
           const nameCap = name[0].toUpperCase() + name.substring(1);
 
+          const formattedValue = value.charAt(0) === '#' ? value : '#' + value;
           const isOpen = activeColor === name ? true : false;
 
           return (
@@ -52,13 +53,13 @@ const ColorGenerator = (props) => {
             >
               <div className={styles.titleRow}>
                 <div className={styles.titleRowStart}>
-                  <ColorDot color={value} />
+                  <ColorDot color={formattedValue} />
                   {nameCap}
                 </div>
                 <div className={styles.titleRowEnd}>
                   <ColorInput
                     onClick={(ev) => ev.stopPropagation()}
-                    color={value}
+                    color={formattedValue}
                     setColor={(color) =>
                       setColors((colors) => {
                         colors[name] = generateColor(color);

From f2eb4c70d21a41ccfc571eeb653602593fa17465 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 12 Apr 2023 12:33:41 -0400
Subject: [PATCH 321/469] docs(item): migrate inputs example to v7 (#2835)

---
 static/usage/v7/item/inputs/angular.md    | 32 ++++++---------
 static/usage/v7/item/inputs/demo.html     | 40 +++++++++----------
 static/usage/v7/item/inputs/javascript.md | 36 ++++++++---------
 static/usage/v7/item/inputs/react.md      | 42 ++++++++++----------
 static/usage/v7/item/inputs/vue.md        | 47 +++++++++++++----------
 5 files changed, 94 insertions(+), 103 deletions(-)

diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular.md
index 013e672ae99..a45e76ebc73 100644
--- a/static/usage/v7/item/inputs/angular.md
+++ b/static/usage/v7/item/inputs/angular.md
@@ -1,37 +1,30 @@
 ```html
 <ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Default 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-input label="Fixed Input" label-placement="fixed" 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-input label="Stacked Input" label-placement="stacked" 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-input label="Floating Input" label-placement="floating" 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-input label="Floating Input: Outline (MD only)" label-placement="floating" 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-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select placeholder="Make a Selection">
+  <ion-select label="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>
@@ -43,17 +36,16 @@
 </ion-item>
 
 <ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end"></ion-toggle>
+  <ion-toggle> Toggle </ion-toggle>
 </ion-item>
 
 <ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="end"></ion-checkbox>
+  <ion-checkbox> Checkbox </ion-checkbox>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Range</ion-label>
-  <ion-range></ion-range>
+  <ion-range label-placement="start">
+    <div slot="label">Range</div>
+  </ion-range>
 </ion-item>
 ```
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
index 94c2309b3e9..32951b2e970 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/item/inputs/demo.html
@@ -22,41 +22,36 @@
     <ion-content>
       <div class="container">
         <ion-item>
-          <ion-label>Default Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Default 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-input label="Fixed Input" label-placement="fixed" 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-input label="Stacked Input" label-placement="stacked" 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-input label="Floating Input" label-placement="floating" 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-input label="Floating Input: Outline (MD only)" label-placement="floating"
+            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-input label="Floating Input: Solid (MD only)" label-placement="floating"
+            placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label>Select</ion-label>
-          <ion-select placeholder="Make a Selection">
+          <ion-select label="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="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>
@@ -65,18 +60,21 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle slot="end"></ion-toggle>
+          <ion-toggle>
+            Toggle
+          </ion-toggle>
         </ion-item>
 
         <ion-item>
-          <ion-label>Checkbox</ion-label>
-          <ion-checkbox slot="end"></ion-checkbox>
+          <ion-checkbox>
+            Checkbox
+          </ion-checkbox>
         </ion-item>
 
         <ion-item>
-          <ion-label position="stacked">Range</ion-label>
-          <ion-range></ion-range>
+          <ion-range label-placement="start">
+            <div slot="label">Range</div>
+          </ion-range>
         </ion-item>
       </div>
     </ion-content>
diff --git a/static/usage/v7/item/inputs/javascript.md b/static/usage/v7/item/inputs/javascript.md
index 013e672ae99..74558c5191a 100644
--- a/static/usage/v7/item/inputs/javascript.md
+++ b/static/usage/v7/item/inputs/javascript.md
@@ -1,37 +1,30 @@
 ```html
 <ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Default 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-input label="Fixed Input" label-placement="fixed" 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-input label="Stacked Input" label-placement="stacked" 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-input label="Floating Input" label-placement="floating" 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-input label="Floating Input: Outline (MD only)" label-placement="floating" 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-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select placeholder="Make a Selection">
+  <ion-select label="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>
@@ -43,17 +36,20 @@
 </ion-item>
 
 <ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end"></ion-toggle>
+  <ion-toggle>
+    <div>Toggle</div>
+  </ion-toggle>
 </ion-item>
 
 <ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="end"></ion-checkbox>
+  <ion-checkbox>
+    <div>Checkbox</div>
+  </ion-checkbox>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Range</ion-label>
-  <ion-range></ion-range>
+  <ion-range label-placement="start">
+    <div slot="label">Range</div>
+  </ion-range>
 </ion-item>
 ```
diff --git a/static/usage/v7/item/inputs/react.md b/static/usage/v7/item/inputs/react.md
index 0cb6523f053..6f3cf757c68 100644
--- a/static/usage/v7/item/inputs/react.md
+++ b/static/usage/v7/item/inputs/react.md
@@ -1,43 +1,44 @@
 ```tsx
 import React from 'react';
-import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
 
 function Example() {
   return (
     <>
       <IonItem>
-        <IonLabel>Default Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Default Input" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="fixed">Fixed Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Fixed Input" label-placement="fixed" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="stacked">Stacked Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Stacked Input" label-placement="stacked" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="floating">Floating Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Floating Input" label-placement="floating" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem fill="outline">
-        <IonLabel position="floating">Floating Input: Outline (MD only)</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput
+          label="Floating Input: Outline (MD only)"
+          label-placement="floating"
+          placeholder="Enter text"
+        ></IonInput>
       </IonItem>
 
       <IonItem fill="solid">
-        <IonLabel position="floating">Floating Input: Solid (MD only)</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput
+          label="Floating Input: Solid (MD only)"
+          label-placement="floating"
+          placeholder="Enter text"
+        ></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Select</IonLabel>
-        <IonSelect placeholder="Make a Selection">
+        <IonSelect label="Select" placeholder="Make a Selection">
           <IonSelectOption value="">No Game Console</IonSelectOption>
           <IonSelectOption value="nes">NES</IonSelectOption>
           <IonSelectOption value="n64">Nintendo64</IonSelectOption>
@@ -49,18 +50,17 @@ function Example() {
       </IonItem>
 
       <IonItem>
-        <IonLabel>Toggle</IonLabel>
-        <IonToggle slot="end"></IonToggle>
+        <IonToggle>Toggle</IonToggle>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Checkbox</IonLabel>
-        <IonCheckbox slot="end"></IonCheckbox>
+        <IonCheckbox>Checkbox</IonCheckbox>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="stacked">Range</IonLabel>
-        <IonRange></IonRange>
+        <IonRange label-placement="start">
+          <div slot="label">Range</div>
+        </IonRange>
       </IonItem>
     </>
   );
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 7dc085a7a4d..6ce71990b7e 100644
--- a/static/usage/v7/item/inputs/vue.md
+++ b/static/usage/v7/item/inputs/vue.md
@@ -1,38 +1,35 @@
 ```html
 <template>
   <ion-item>
-    <ion-label>Default Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Default 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-input label="Fixed Input" label-placement="fixed" 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-input label="Stacked Input" label-placement="stacked" 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-input label="Floating Input" label-placement="floating" 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-input
+      label="Floating Input: Outline (MD only)"
+      label-placement="floating"
+      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-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label>Select</ion-label>
-    <ion-select placeholder="Make a Selection">
+    <ion-select label="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>
@@ -44,23 +41,31 @@
   </ion-item>
 
   <ion-item>
-    <ion-label>Toggle</ion-label>
-    <ion-toggle slot="end"></ion-toggle>
+    <ion-toggle> Toggle </ion-toggle>
   </ion-item>
 
   <ion-item>
-    <ion-label>Checkbox</ion-label>
-    <ion-checkbox slot="end"></ion-checkbox>
+    <ion-checkbox> Checkbox </ion-checkbox>
   </ion-item>
 
   <ion-item>
-    <ion-label position="stacked">Range</ion-label>
-    <ion-range></ion-range>
+    <ion-range label-placement="start">
+      <div slot="label">Range</div>
+    </ion-range>
   </ion-item>
 </template>
 
 <script lang="ts">
-  import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/vue';
+  import {
+    IonCheckbox,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonRange,
+    IonSelect,
+    IonSelectOption,
+    IonToggle,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({

From 2ff757ea83bc6a9723096c62a08f933837a3bef0 Mon Sep 17 00:00:00 2001
From: Yusuf Sahin HAMZA <yusufsahinhamza@gmail.com>
Date: Wed, 12 Apr 2023 20:05:04 +0300
Subject: [PATCH 322/469] docs(vue): update quickstart steps to remove
 typescript (#2689)

---
 docs/vue/quickstart.md                      | 10 ++++++----
 versioned_docs/version-v5/vue/quickstart.md | 10 ++++++----
 versioned_docs/version-v6/vue/quickstart.md | 13 ++++++++-----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index c7a5e4bbde8..bf6c36e621d 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -48,15 +48,17 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge
 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`.
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/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`.
+4. Remove `Array<RouteRecordRaw>` from `src/router/index.js`.
 
-5. Delete the `shims-vue.d.ts` file.
+5. Delete the `src/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/HomePage.vue`.
+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 `src/App.vue` and `src/views/HomePage.vue`.
+
+7. Delete the `tsconfig.json` file.
 
 ## A look at a Vue Component
 
diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md
index e0ac1a0dc61..ff870aaf0b6 100644
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ b/versioned_docs/version-v5/vue/quickstart.md
@@ -41,15 +41,17 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge
 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`.
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/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`.
+4. Remove `Array<RouteRecordRaw>` from `src/router/index.js`.
 
-5. Delete the `shims-vue.d.ts` file.
+5. Delete the `src/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`.
+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 `src/App.vue` and `src/views/HomePage.vue`.
+
+7. Delete the `tsconfig.json` file.
 
 ## A look at a Vue Component
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index 3a0aebc88a9..bf6c36e621d 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -48,15 +48,17 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge
 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`.
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/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`.
+4. Remove `Array<RouteRecordRaw>` from `src/router/index.js`.
 
-5. Delete the `shims-vue.d.ts` file.
+5. Delete the `src/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/HomePage.vue`.
+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 `src/App.vue` and `src/views/HomePage.vue`.
+
+7. Delete the `tsconfig.json` file.
 
 ## A look at a Vue Component
 
@@ -324,7 +326,7 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
 </template>
 
 <script setup>
-  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { add } from 'ionicons/icons';
 </script>
 ```
@@ -522,6 +524,7 @@ addIcons({
   heart: heart,
 });
 ```
+
 **HomePage.vue**
 
 ```html

From b6bb849bea3bc2c7665fd3c6b8f40929f658a4d3 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 12 Apr 2023 12:11:30 -0700
Subject: [PATCH 323/469] docs(modal): playground for auto height sheets
 (#2905)

---
 docs/api/modal.md                             |  6 +++
 .../angular/example_component_css.md          | 13 +++++
 .../angular/example_component_html.md         | 16 ++++++
 .../v7/modal/sheet/auto-height/demo.html      | 51 ++++++++++++++++++
 .../usage/v7/modal/sheet/auto-height/index.md | 33 ++++++++++++
 .../v7/modal/sheet/auto-height/javascript.md  | 35 ++++++++++++
 .../modal/sheet/auto-height/react/main_css.md | 13 +++++
 .../modal/sheet/auto-height/react/main_tsx.md | 43 +++++++++++++++
 .../usage/v7/modal/sheet/auto-height/vue.md   | 53 +++++++++++++++++++
 9 files changed, 263 insertions(+)
 create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md
 create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/sheet/auto-height/demo.html
 create mode 100644 static/usage/v7/modal/sheet/auto-height/index.md
 create mode 100644 static/usage/v7/modal/sheet/auto-height/javascript.md
 create mode 100644 static/usage/v7/modal/sheet/auto-height/react/main_css.md
 create mode 100644 static/usage/v7/modal/sheet/auto-height/react/main_tsx.md
 create mode 100644 static/usage/v7/modal/sheet/auto-height/vue.md

diff --git a/docs/api/modal.md b/docs/api/modal.md
index cc63089bedf..847b49b460e 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -125,6 +125,12 @@ import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/bac
 
 <SheetBackgroundContentExample />
 
+#### Auto Height Sheet
+
+import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md';
+
+<SheetAutoHeightExample />
+
 #### 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.
diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md
new file mode 100644
index 00000000000..88d0e5c0594
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+.block {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ion-modal {
+  --height: auto;
+}
+```
diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md
new file mode 100644
index 00000000000..3280a3f9e85
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```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]="1" [breakpoints]="[0, 1]">
+    <ng-template>
+      <div class="block">Block of Content</div>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/modal/sheet/auto-height/demo.html b/static/usage/v7/modal/sheet/auto-height/demo.html
new file mode 100644
index 00000000000..ae6eb5ff6d7
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/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>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@7/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <style>
+    .block {
+      width: 100%;
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    ion-modal {
+      --height: auto;
+    }
+  </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 Sheet Modal</ion-button>
+
+      <ion-modal trigger="open-modal">
+        <div class="block">Block of Content</div> 
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+
+    modal.initialBreakpoint = 1;
+    modal.breakpoints = [0, 1];
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/modal/sheet/auto-height/index.md b/static/usage/v7/modal/sheet/auto-height/index.md
new file mode 100644
index 00000000000..35cec0645c0
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/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';
+
+<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/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/modal/sheet/auto-height/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/modal/sheet/auto-height/javascript.md b/static/usage/v7/modal/sheet/auto-height/javascript.md
new file mode 100644
index 00000000000..ec474f8a6b7
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/javascript.md
@@ -0,0 +1,35 @@
+```html
+<style>
+  .block {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ion-modal {
+    --height: auto;
+  }
+</style>
+
+<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">
+    <div class="block">Block of Content</div> 
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.initialBreakpoint = 1;
+  modal.breakpoints = [0, 1];
+</script>
+```
diff --git a/static/usage/v7/modal/sheet/auto-height/react/main_css.md b/static/usage/v7/modal/sheet/auto-height/react/main_css.md
new file mode 100644
index 00000000000..9731921d1c3
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+.block {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ion-modal {
+  --height: auto;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md
new file mode 100644
index 00000000000..c368d65d6c5
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+} from '@ionic/react';
+
+import './main.css';
+
+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={1}
+          breakpoints={[0, 1]}
+        >
+          <div className="block">Block of Content</div> 
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md
new file mode 100644
index 00000000000..23b3c38c147
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/vue.md
@@ -0,0 +1,53 @@
+```html
+<style>
+  .block {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ion-modal {
+    --height: auto;
+  }
+</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 Sheet Modal</ion-button>
+
+    <ion-modal trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
+      <div class="block">Block of Content</div> 
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonModal,
+      IonHeader,
+      IonContent,
+      IonToolbar,
+      IonTitle,
+    },
+  });
+</script>
+```

From ea4104da1baba6f5522c05c754466840afde6fe9 Mon Sep 17 00:00:00 2001
From: FernetB <47339424+FernetB@users.noreply.github.com>
Date: Thu, 13 Apr 2023 10:21:24 -0300
Subject: [PATCH 324/469] docs(react): clarify state behavior with Ionic React
 (#2894)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/react/lifecycle.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md
index aba6783e34b..f43992d2163 100644
--- a/docs/react/lifecycle.md
+++ b/docs/react/lifecycle.md
@@ -145,3 +145,13 @@ Below are some tips on use cases for each of the life cycle events.
 - `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.
+
+## Passing state between pages
+
+Since Ionic React manages the lifetime of a page, state on previous pages may update as users navigate your application. This can impact state that is determined using `useEffect` from React or `useLocation` from React Router. For example, if `PageA` calls `useLocation`, the state of `useLocation` will change when the user navigates from `PageA` to `PageB`.
+
+Developers should include the appropriate checks to ensure that previous pages only access defined states.
+
+For example, the following code will error if `testObject` is not defined: `{ state.testObject.childKey }`
+
+Instead, developers should access `childKey` only if `testObject` is defined: `{ state.testObject?.childKey }`

From b0ac6e814d8f3700dbbe9ae46ff5d11ca48462f3 Mon Sep 17 00:00:00 2001
From: Ashraf Latif <hello@ceghap.com>
Date: Thu, 13 Apr 2023 23:09:45 +0800
Subject: [PATCH 325/469] docs(quickstart): remove unnecessary references to
 React Native (#2238)

* Update quickstart.md

this was set as intro to React Native which is wrong in my opinion. Should be Ionic React instead.

* Remove other incorrect references to React Native

---------

Co-authored-by: Shawn Taylor <shawn@ionic.io>
---
 docs/react/quickstart.md                      | 4 ++--
 versioned_docs/version-v6/react/quickstart.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index 07d300a5a73..b4121ce03ea 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -4,10 +4,10 @@ sidebar_label: Quickstart
 ---
 
 <head>
-  <title>Intro to React Native Quickstart Using Ionic CLI: React Basics</title>
+  <title>Intro to Ionic React 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."
+    content="Intro to React Quickstart covers the basics of React and Ionic, including any Ionic-specific features. Learn how to build React apps using the Ionic CLI."
   />
 </head>
 
diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.md
index a4338661e06..f6652a6b683 100644
--- a/versioned_docs/version-v6/react/quickstart.md
+++ b/versioned_docs/version-v6/react/quickstart.md
@@ -4,10 +4,10 @@ sidebar_label: Quickstart
 ---
 
 <head>
-  <title>Intro to React Native Quickstart Using Ionic CLI: React Basics</title>
+  <title>Intro to React 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."
+    content="Intro to React Quickstart covers the basics of React and Ionic, including any Ionic-specific features. Learn how to build React apps using the Ionic CLI."
   />
 </head>
 

From eb7961299dd63ce8933d4c5c0cd11ac2ae3aca12 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 11:19:51 -0400
Subject: [PATCH 326/469] docs(searchbar): debounce uses ionInput (#2913)

Co-authored-by: guillaumesmo <guillaumesmo@users.noreply.github.com>
---
 docs/api/searchbar.md                                       | 2 +-
 .../v7/searchbar/debounce/angular/example_component_html.md | 2 +-
 .../v7/searchbar/debounce/angular/example_component_ts.md   | 2 +-
 static/usage/v7/searchbar/debounce/demo.html                | 6 +++---
 static/usage/v7/searchbar/debounce/javascript.md            | 4 ++--
 static/usage/v7/searchbar/debounce/react.md                 | 4 ++--
 static/usage/v7/searchbar/debounce/vue.md                   | 4 ++--
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index bbca192fdb6..fde99f4f664 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -66,7 +66,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 ## 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.
+A debounce can be set on the searchbar in order to delay triggering the `ionInput` 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/v7/searchbar/debounce/index.md';
 
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_html.md b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
index 5a554a24551..4e69a179142 100644
--- a/static/usage/v7/searchbar/debounce/angular/example_component_html.md
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<ion-searchbar [debounce]="1000" (ionChange)="handleChange($event)"></ion-searchbar>
+<ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
 
 <ion-list>
   <ion-item *ngFor="let result of results">
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
index 1d8215ef1a5..834fb2b8dab 100644
--- a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
@@ -9,7 +9,7 @@ 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) {
+  handleInput(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
index 9fce8ff5f3a..e00c272091b 100644
--- a/static/usage/v7/searchbar/debounce/demo.html
+++ b/static/usage/v7/searchbar/debounce/demo.html
@@ -36,9 +36,9 @@
   let results = [...data];
   filterItems(results);
 
-  searchbar.addEventListener('ionChange', handleChange);
+  searchbar.addEventListener('ionInput', handleInput);
 
-  function handleChange(event) {
+  function handleInput(event) {
     const query = event.target.value.toLowerCase();
     results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);
@@ -61,4 +61,4 @@
   }
 </script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/searchbar/debounce/javascript.md b/static/usage/v7/searchbar/debounce/javascript.md
index 6a74446f699..647029fa341 100644
--- a/static/usage/v7/searchbar/debounce/javascript.md
+++ b/static/usage/v7/searchbar/debounce/javascript.md
@@ -10,9 +10,9 @@
   let results = [...data];
   filterItems(results);
 
-  searchbar.addEventListener('ionChange', handleChange);
+  searchbar.addEventListener('ionInput', handleInput);
 
-  function handleChange(event) {
+  function handleInput(event) {
     const query = event.target.value.toLowerCase();
     results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);
diff --git a/static/usage/v7/searchbar/debounce/react.md b/static/usage/v7/searchbar/debounce/react.md
index f46ce1a6da5..4d31276e0c1 100644
--- a/static/usage/v7/searchbar/debounce/react.md
+++ b/static/usage/v7/searchbar/debounce/react.md
@@ -6,7 +6,7 @@ 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) => {
+  const handleInput = (ev: Event) => {
     let query = "";
     const target = ev.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
@@ -16,7 +16,7 @@ function Example() {
 
   return (
     <>
-      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+      <IonSearchbar debounce={1000} onIonInput={(ev) => handleInput(ev)}></IonSearchbar>
 
       <IonList>
         { results.map(result => (
diff --git a/static/usage/v7/searchbar/debounce/vue.md b/static/usage/v7/searchbar/debounce/vue.md
index 2d85d6ed2d2..acb820af722 100644
--- a/static/usage/v7/searchbar/debounce/vue.md
+++ b/static/usage/v7/searchbar/debounce/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-searchbar :debounce="1000" @ionChange="handleChange($event)"></ion-searchbar>
+  <ion-searchbar :debounce="1000" @ionInput="handleInput($event)"></ion-searchbar>
 
   <ion-list>
     <ion-item v-for="result in results">
@@ -22,7 +22,7 @@
       return { data, results };
     },
     methods: {
-      handleChange(event) {
+      handleInput(event) {
         const query = event.target.value.toLowerCase();
         this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
       },

From d8ad3c2e14a8cd6757d89e8c229928ecd7f18dba Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 14 Apr 2023 16:19:37 -0400
Subject: [PATCH 327/469] docs(react): remove old overview and update link
 (#2897)

Resolves #2220
---
 docs/react/overview.md                      | 45 ---------------------
 versioned_docs/version-v5/index.md          |  2 +-
 versioned_docs/version-v5/react/overview.md | 45 ---------------------
 versioned_docs/version-v6/react/overview.md | 45 ---------------------
 4 files changed, 1 insertion(+), 136 deletions(-)
 delete mode 100644 docs/react/overview.md
 delete mode 100644 versioned_docs/version-v5/react/overview.md
 delete mode 100644 versioned_docs/version-v6/react/overview.md

diff --git a/docs/react/overview.md b/docs/react/overview.md
deleted file mode 100644
index 142018460bf..00000000000
--- a/docs/react/overview.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# 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-v5/index.md b/versioned_docs/version-v5/index.md
index 7aa0afc0f01..30798c43d16 100644
--- a/versioned_docs/version-v5/index.md
+++ b/versioned_docs/version-v5/index.md
@@ -49,7 +49,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## Overview
 
-Ionic Framework 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/overview.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 Framework before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
+Ionic Framework 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 Framework 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
 
diff --git a/versioned_docs/version-v5/react/overview.md b/versioned_docs/version-v5/react/overview.md
deleted file mode 100644
index 142018460bf..00000000000
--- a/versioned_docs/version-v5/react/overview.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# 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/overview.md b/versioned_docs/version-v6/react/overview.md
deleted file mode 100644
index 142018460bf..00000000000
--- a/versioned_docs/version-v6/react/overview.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# 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).

From 4d95c7e515b5a914359556e0a357c49bba438c52 Mon Sep 17 00:00:00 2001
From: James McDonald <38434825+mcdonaldjc@users.noreply.github.com>
Date: Mon, 17 Apr 2023 10:19:53 -0500
Subject: [PATCH 328/469] docs(react): update pwa-elements import

---
 docs/react/your-first-app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.md
index 188be71df6b..12c11d17e11 100644
--- a/docs/react/your-first-app.md
+++ b/docs/react/your-first-app.md
@@ -99,7 +99,7 @@ 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`.
+Next, import `@ionic/pwa-elements` by editing `src/main.tsx`.
 
 ```tsx
 import { defineCustomElements } from '@ionic/pwa-elements/loader';

From 45c965b50bd8ec181456ae9de7d7a54913d9373d Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Mon, 17 Apr 2023 10:27:46 -0600
Subject: [PATCH 329/469] styles(): Add developer experts cta section to
 intro/next page (#2908)

---
 docs/intro/next.md                            |  4 ++
 .../next/DeveloperExperts/index.module.scss   | 39 +++++++++++++++++++
 .../intro/next/DeveloperExperts/index.tsx     | 29 ++++++++++++++
 versioned_docs/version-v5/intro/next.md       |  4 ++
 versioned_docs/version-v6/intro/next.md       |  4 ++
 5 files changed, 80 insertions(+)
 create mode 100644 src/components/page/intro/next/DeveloperExperts/index.module.scss
 create mode 100644 src/components/page/intro/next/DeveloperExperts/index.tsx

diff --git a/docs/intro/next.md b/docs/intro/next.md
index e63809f7654..cb145eac51b 100644
--- a/docs/intro/next.md
+++ b/docs/intro/next.md
@@ -13,6 +13,8 @@ title: Next Steps
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
+import DeveloperExperts from '@components/page/intro/next/DeveloperExperts';
+
 ## Build Your First App
 
 Pick the JavaScript framework you plan to use while building your Ionic app:
@@ -30,3 +32,5 @@ Pick the JavaScript framework you plan to use while building your Ionic app:
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
   </DocsCard>
 </DocsCards>
+
+<DeveloperExperts />
diff --git a/src/components/page/intro/next/DeveloperExperts/index.module.scss b/src/components/page/intro/next/DeveloperExperts/index.module.scss
new file mode 100644
index 00000000000..f61f1bc4b7d
--- /dev/null
+++ b/src/components/page/intro/next/DeveloperExperts/index.module.scss
@@ -0,0 +1,39 @@
+.developerExperts {
+  background-color: var(--c-indigo-10);
+
+  padding: 2.5rem;
+
+  border-radius: 16px;
+
+  margin-block-start: 1.35rem;
+
+  header {
+    max-width: 29rem;
+  }
+
+  &Title {
+    margin-block-end: 0.5rem;
+  }
+
+  &Description {
+    margin-block-end: 2.5rem;
+
+    line-height: 1.6 !important;
+
+    color: var(--c-indigo-90);
+  }
+
+  &Links {
+    max-width: 38.313rem;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    a {
+      font-weight: 600;
+    }
+  }
+}
diff --git a/src/components/page/intro/next/DeveloperExperts/index.tsx b/src/components/page/intro/next/DeveloperExperts/index.tsx
new file mode 100644
index 00000000000..c55c2462127
--- /dev/null
+++ b/src/components/page/intro/next/DeveloperExperts/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+export default function DeveloperExperts() {
+  return (
+    <div className={styles.developerExperts}>
+      <header>
+        <h3 className={styles.developerExpertsTitle}>Featured Ionic Developer Expert Projects</h3>
+        <p className={styles.developerExpertsDescription}>
+          Extend your knowledge of Ionic from premium educational materials made by community members.
+        </p>
+      </header>
+      <div className={styles.developerExpertsLinks}>
+        <a href="https://ionicacademy.com" target="_blank" rel="noopener noreferrer">
+          Ionic Academy →
+        </a>
+        <a href="https://www.joshmorony.com/elite" target="_blank" rel="noopener noreferrer">
+          Elite Ionic →
+        </a>
+        <a href="https://ionicthemes.com" target="_blank" rel="noopener noreferrer">
+          Ionic Themes →
+        </a>
+        <a href="https://ionicreacthub.com" target="_blank" rel="noopener noreferrer">
+          Ionic React Hub →
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/versioned_docs/version-v5/intro/next.md b/versioned_docs/version-v5/intro/next.md
index d442c3c56f6..c284f5260e6 100644
--- a/versioned_docs/version-v5/intro/next.md
+++ b/versioned_docs/version-v5/intro/next.md
@@ -1,6 +1,8 @@
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
+import DeveloperExperts from '@components/page/intro/next/DeveloperExperts';
+
 # Next Steps
 
 ## Build Your First App
@@ -20,3 +22,5 @@ Pick the JavaScript framework you plan to use while building your Ionic app:
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
   </DocsCard>
 </DocsCards>
+
+<DeveloperExperts />
diff --git a/versioned_docs/version-v6/intro/next.md b/versioned_docs/version-v6/intro/next.md
index e63809f7654..cb145eac51b 100644
--- a/versioned_docs/version-v6/intro/next.md
+++ b/versioned_docs/version-v6/intro/next.md
@@ -13,6 +13,8 @@ title: Next Steps
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
+import DeveloperExperts from '@components/page/intro/next/DeveloperExperts';
+
 ## Build Your First App
 
 Pick the JavaScript framework you plan to use while building your Ionic app:
@@ -30,3 +32,5 @@ Pick the JavaScript framework you plan to use while building your Ionic app:
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
   </DocsCard>
 </DocsCards>
+
+<DeveloperExperts />

From da07c22ca186c43708a88c5591f08bc1831aa0ce Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Mon, 17 Apr 2023 12:39:09 -0600
Subject: [PATCH 330/469] fix(developer experts card): Add dark mode
 compatability (#2919)

---
 .../next/DeveloperExperts/index.module.scss      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/page/intro/next/DeveloperExperts/index.module.scss b/src/components/page/intro/next/DeveloperExperts/index.module.scss
index f61f1bc4b7d..dc6ad0a608d 100644
--- a/src/components/page/intro/next/DeveloperExperts/index.module.scss
+++ b/src/components/page/intro/next/DeveloperExperts/index.module.scss
@@ -1,5 +1,15 @@
+:global {
+  html[data-theme='dark'] {
+    --c-bg-dev-experts: var(--token-secondary-bg-c);
+  }
+
+  :root {
+    --c-bg-dev-experts: var(--c-indigo-10);
+  }
+}
+
 .developerExperts {
-  background-color: var(--c-indigo-10);
+  background-color: var(--c-bg-dev-experts);
 
   padding: 2.5rem;
 
@@ -13,6 +23,8 @@
 
   &Title {
     margin-block-end: 0.5rem;
+
+    color: var(--token-heading-color-dark);
   }
 
   &Description {
@@ -20,7 +32,7 @@
 
     line-height: 1.6 !important;
 
-    color: var(--c-indigo-90);
+    // color: var(--c-indigo-90);
   }
 
   &Links {

From 55b72122873cd91260448c6cecfad835e13e0f97 Mon Sep 17 00:00:00 2001
From: Thejas Kiran P S <30928792+ThejasKiranPS@users.noreply.github.com>
Date: Tue, 18 Apr 2023 02:30:43 +0530
Subject: [PATCH 331/469] docs(react): provide unique key instead of index
 (#2630)

As providing index as keys is a bad practice, this commit modifies the key value to be `photo.filepath` which will be unique and consistent while adding new photos.

[Keys - react docs](https://reactjs.org/docs/lists-and-keys.html#keys)
[example why it is not recommended](https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/)
---
 docs/react/your-first-app/2-taking-photos.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md
index 90c527521bd..513d1a19d1f 100644
--- a/docs/react/your-first-app/2-taking-photos.md
+++ b/docs/react/your-first-app/2-taking-photos.md
@@ -131,7 +131,7 @@ With the photo(s) stored into the main array we can display the images on the sc
   <IonGrid>
     <IonRow>
       {photos.map((photo, index) => (
-        <IonCol size="6" key={index}>
+        <IonCol size="6" key={photo.filepath}>
           <IonImg src={photo.webviewPath} />
         </IonCol>
       ))}

From ea506a950fa6a20c15c82254fa987df1e531112b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 19 Apr 2023 12:24:41 -0400
Subject: [PATCH 332/469] docs(toast): clarify aria-live usage (#2914)

---
 docs/api/toast.md | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/api/toast.md b/docs/api/toast.md
index d81ad3ca60d..10a785c2086 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -134,19 +134,17 @@ Toasts are intended to be subtle notifications and are not intended to interrupt
 
 ### Screen Readers
 
-`ion-toast` has `aria-live="polite"` and `aria-atomic="true"` set by default.
+`ion-toast` has `role="status"` and `aria-live="polite"` set on the inner `.toast-content` element. This causes screen readers to only announce the toast message and header. Buttons and icons will not be announced.
 
-`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-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 should not interrupt the current task.
 
-`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. 
+Since toasts are intended to be subtle notification, `aria-live` should never be set to `"assertive"`. If developers need to interrupt the user with an important message, we recommend using an [alert](./alert).
 
 ### 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.
+* 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 an [alert](./alert) instead.
 
 * For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
 

From 92424fffa5ab9b838191af5310399a01e75e2593 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 19 Apr 2023 13:47:08 -0400
Subject: [PATCH 333/469] docs(security): clarify IonicSafeString usage with
 innerHTMLTemplatesEnabled (#2906)

---
 docs/techniques/security.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/techniques/security.md b/docs/techniques/security.md
index 4528b69ec18..b145665cfe2 100644
--- a/docs/techniques/security.md
+++ b/docs/techniques/security.md
@@ -82,6 +82,10 @@ Ionic Framework provides an application config option called `sanitizerEnabled`
 
 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.
 
+:::note
+In order to bypass the sanitizer and use unsanitized custom HTML in the relevant Ionic components, `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config. See [Enabling Custom HTML Parsing](#enabling-custom-html-parsing-via-innerhtml) for more information.
+:::
+
 #### Usage
 
 ````mdx-code-block

From d389d427b7f8c2ae77c01aa123a270dd071e61de Mon Sep 17 00:00:00 2001
From: Matt Netkow <matt.netkow@gmail.com>
Date: Thu, 20 Apr 2023 10:15:59 -0500
Subject: [PATCH 334/469] docs(cli): update Ionic CLI docs for version 7
 (#2924)

---
 scripts/data/cli.json | 373 +++---------------------------------------
 1 file changed, 22 insertions(+), 351 deletions(-)

diff --git a/scripts/data/cli.json b/scripts/data/cli.json
index 72f39a74b80..13cce01026d 100644
--- a/scripts/data/cli.json
+++ b/scripts/data/cli.json
@@ -1671,17 +1671,17 @@
       "type": "project"
     },
     {
-      "name": "ionic deploy add",
-      "namespace": ["ionic", "deploy"],
-      "summary": "Adds Appflow Deploy to the project",
-      "description": "This command adds the Appflow Deploy plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.\n\nFor Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.\n\nFor Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.",
+      "name": "ionic live-update add",
+      "namespace": ["ionic", "live-update"],
+      "summary": "Adds Appflow Live Update plugin to the project",
+      "description": "This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.\n\nFor Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.\n\nFor Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.",
       "footnotes": [],
       "groups": ["paid"],
       "exampleCommands": [
-        "ionic deploy add ",
-        "ionic deploy add --app-id=abcd1234 --channel-name=\"Master\" --update-method=background",
-        "ionic deploy add --max-store=2 --min-background-duration=30",
-        "ionic deploy add --app-id=abcd1234 --channel-name=\"Master\" --update-method=background --max-store=2 --min-background-duration=30"
+        "ionic live-update add ",
+        "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+        "ionic live-update add --max-store=2 --min-background-duration=30",
+        "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30"
       ],
       "aliases": [],
       "inputs": [],
@@ -1742,81 +1742,19 @@
       "type": "project"
     },
     {
-      "name": "ionic deploy build",
-      "namespace": ["ionic", "deploy"],
-      "summary": "Create a deploy build on Appflow",
-      "description": "This command creates a deploy build on Appflow. While the build is running, it prints the remote build log to the terminal. If the build is successful, it downloads the created web build zip file in the current directory. Downloading build artifacts can be skipped by supplying the flag `skip-download`.\n\nApart from `--commit`, every option can be specified using the full name setup within the Appflow [Dashboard](https://dashboard.ionicframework.com).\n\nCustomizing the build:\n- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build.",
-      "footnotes": [],
-      "groups": ["paid", "deprecated"],
-      "exampleCommands": [
-        "ionic deploy build ",
-        "ionic deploy build --environment=\"My Custom Environment Name\"",
-        "ionic deploy build --commit=2345cd3305a1cf94de34e93b73a932f25baac77c",
-        "ionic deploy build --channel=\"Master\"",
-        "ionic deploy build --channel=\"Master\" --skip-download",
-        "ionic deploy build --channel=\"Master\" --channel=\"My Custom Channel\""
-      ],
-      "aliases": [],
-      "inputs": [],
-      "options": [
-        {
-          "name": "environment",
-          "type": "string",
-          "summary": "The group of environment variables exposed to your build",
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "channel",
-          "type": "string",
-          "summary": "The channel you want to auto deploy the build to. This can be repeated multiple times if multiple channels need to be specified.",
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "commit",
-          "type": "string",
-          "summary": "Commit (defaults to HEAD)",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "sha1"
-          }
-        },
-        {
-          "name": "skip-download",
-          "type": "boolean",
-          "summary": "Skip downloading build artifacts after command succeeds.",
-          "default": false,
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        }
-      ],
-      "type": "project"
-    },
-    {
-      "name": "ionic deploy configure",
-      "namespace": ["ionic", "deploy"],
-      "summary": "Overrides Appflow Deploy configuration",
-      "description": "This command overrides configuration for the Appflow Deploy plugin (`cordova-plugin-ionic`) in Capacitor projects.\n\nFor Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.\n\nFor Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.",
+      "name": "ionic live-update configure",
+      "namespace": ["ionic", "live-update"],
+      "summary": "Overrides Appflow Live Update configuration",
+      "description": "This command overrides configuration for the Appflow Live Update plugin (`cordova-plugin-ionic`) in Capacitor projects.\n\nFor Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.\n\nFor Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.",
       "footnotes": [],
       "groups": ["paid"],
       "exampleCommands": [
-        "ionic deploy configure ",
-        "ionic deploy configure --app-id=abcd1234 --channel-name=\"Master\" --update-method=background",
-        "ionic deploy configure --max-store=2 --min-background-duration=30",
-        "ionic deploy configure --app-id=abcd1234 --channel-name=\"Master\" --update-method=background --max-store=2 --min-background-duration=30",
-        "ionic deploy configure android",
-        "ionic deploy configure ios"
+        "ionic live-update configure ",
+        "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+        "ionic live-update configure --max-store=2 --min-background-duration=30",
+        "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30",
+        "ionic live-update configure android",
+        "ionic live-update configure ios"
       ],
       "aliases": [],
       "inputs": [
@@ -1881,9 +1819,9 @@
       "type": "project"
     },
     {
-      "name": "ionic deploy manifest",
-      "namespace": ["ionic", "deploy"],
-      "summary": "Generates a manifest file for the deploy service from a built app directory",
+      "name": "ionic live-update manifest",
+      "namespace": ["ionic", "live-update"],
+      "summary": "Generates a manifest file for the Live Update service from a built app directory",
       "description": "",
       "footnotes": [],
       "groups": ["paid"],
@@ -1893,81 +1831,6 @@
       "options": [],
       "type": "global"
     },
-    {
-      "name": "ionic docs",
-      "namespace": ["ionic"],
-      "summary": "Open the Ionic documentation website",
-      "description": "",
-      "footnotes": [],
-      "groups": [],
-      "exampleCommands": [],
-      "aliases": [],
-      "inputs": [],
-      "options": [
-        {
-          "name": "browser",
-          "type": "string",
-          "summary": "Specifies the browser to use (`safari`, `firefox`, `google chrome`)",
-          "groups": ["advanced"],
-          "aliases": ["w"],
-          "spec": {
-            "value": "browser"
-          }
-        }
-      ],
-      "type": "global"
-    },
-    {
-      "name": "ionic doctor check",
-      "namespace": ["ionic", "doctor"],
-      "summary": "Check the health of your Ionic project",
-      "description": "This command detects and prints common issues and suggested steps to fix them.\n\nSome issues can be fixed automatically. See `ionic doctor treat --help`.\n\nOptionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.",
-      "footnotes": [],
-      "groups": ["deprecated"],
-      "exampleCommands": ["ionic doctor check ", "ionic doctor check git-not-used"],
-      "aliases": ["ionic doctor checkup", "ionic doctor validate"],
-      "inputs": [
-        {
-          "name": "id",
-          "summary": "The issue identifier",
-          "required": false
-        }
-      ],
-      "options": [],
-      "type": "project"
-    },
-    {
-      "name": "ionic doctor list",
-      "namespace": ["ionic", "doctor"],
-      "summary": "List all issues and their identifiers",
-      "description": "Issues can have various tags:\n- **treatable**: `ionic doctor treat` can attempt to fix the issue\n- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`\n- **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`\n\nYou can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.",
-      "footnotes": [],
-      "groups": ["deprecated"],
-      "exampleCommands": [],
-      "aliases": ["ionic doctor ls"],
-      "inputs": [],
-      "options": [],
-      "type": "project"
-    },
-    {
-      "name": "ionic doctor treat",
-      "namespace": ["ionic", "doctor"],
-      "summary": "Attempt to fix issues in your Ionic project",
-      "description": "This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.\n\nOptionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.",
-      "footnotes": [],
-      "groups": ["deprecated"],
-      "exampleCommands": ["ionic doctor treat ", "ionic doctor treat git-not-used"],
-      "aliases": ["ionic doctor fix"],
-      "inputs": [
-        {
-          "name": "id",
-          "summary": "The issue identifier",
-          "required": false
-        }
-      ],
-      "options": [],
-      "type": "project"
-    },
     {
       "name": "ionic enterprise register",
       "namespace": ["ionic", "enterprise"],
@@ -2292,198 +2155,6 @@
       "options": [],
       "type": "global"
     },
-    {
-      "name": "ionic package build",
-      "namespace": ["ionic", "package"],
-      "summary": "Create a package build on Appflow",
-      "description": "This command creates a package build on Appflow. While the build is running, it prints the remote build log to the terminal. If the build is successful, it downloads the created app package file in the current directory. Downloading build artifacts can be skipped by supplying the flag `skip-download`.\n\nApart from `--commit`, every option can be specified using the full name setup within the [Dashboard](https://dashboard.ionicframework.com).\n\nThe `--signing-certificate` option is mandatory for any iOS build but not for Android debug builds.\n\nCustomizing the build:\n- The `--environment` and `--native-config` options can be used to customize the groups of values exposed to the build.\n- Override the preferred platform with `--build-stack`. This is useful for building older iOS apps.\n\nDeploying the build to an App Store:\n- The `--destination` option can be used to deliver the app created by the build to the configured App Store. This can be used only together with build type `release` for Android and build types `app-store` or `enterprise` for iOS.\n\nDownloading build artifacts:\n- By default once the build is complete, all artifacts are downloaded for the selected platform. `aab` and `apk` for Android `ipa` and `dsym` for iOS.\n- The `--artifact-type` option can be used to limit artifact downloads to only of that type. For instance, with Android, you can specify `aab` if you do not wish to download `apk`.",
-      "footnotes": [],
-      "groups": ["paid", "deprecated"],
-      "exampleCommands": [
-        "ionic package build android debug",
-        "ionic package build ios development --signing-certificate=\"iOS Signing Certificate Name\"",
-        "ionic package build android debug --environment=\"My Custom Environment Name\"",
-        "ionic package build android debug --native-config=\"My Custom Native Config Name\"",
-        "ionic package build android debug --commit=2345cd3305a1cf94de34e93b73a932f25baac77c",
-        "ionic package build android debug --artifact-type=aab",
-        "ionic package build android debug --skip-download",
-        "ionic package build android debug --aab-name=\"my-app-prod.aab\" --apk-name=\"my-app-prod.apk\"",
-        "ionic package build ios development --signing-certificate=\"iOS Signing Certificate Name\" --build-stack=\"iOS - Xcode 9\"",
-        "ionic package build ios development --signing-certificate=\"iOS Signing Certificate Name\" --ipa-name=my_custom_file_name.ipa",
-        "ionic package build ios app-store --signing-certificate=\"iOS Signing Certificate Name\" --destination=\"Apple App Store Destination\""
-      ],
-      "aliases": [],
-      "inputs": [
-        {
-          "name": "platform",
-          "summary": "The platform to package (`android`, `ios`)",
-          "required": true
-        },
-        {
-          "name": "type",
-          "summary": "The build type (`debug`, `release`, `development`, `ad-hoc`, `app-store`, `enterprise`)",
-          "required": true
-        }
-      ],
-      "options": [
-        {
-          "name": "signing-certificate",
-          "type": "string",
-          "summary": "Signing certificate",
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "environment",
-          "type": "string",
-          "summary": "The group of environment variables exposed to your build",
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "native-config",
-          "type": "string",
-          "summary": "The group of native config variables exposed to your build",
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "destination",
-          "type": "string",
-          "summary": "The configuration to deploy the build artifact to the app store",
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "commit",
-          "type": "string",
-          "summary": "Commit (defaults to HEAD)",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "sha1"
-          }
-        },
-        {
-          "name": "build-stack",
-          "type": "string",
-          "summary": "Target platform (`\"Android\"`, `\"iOS - Xcode 11 (Preferred)\"`, `\"iOS - Xcode 10\"`)",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "build-file-name",
-          "type": "string",
-          "summary": "The name for the downloaded build file",
-          "groups": ["deprecated"],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "ipa-name",
-          "type": "string",
-          "summary": "The name for the downloaded ipa file",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "dsym-name",
-          "type": "string",
-          "summary": "The name for the downloaded dsym file",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "apk-name",
-          "type": "string",
-          "summary": "The name for the downloaded apk file",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "aab-name",
-          "type": "string",
-          "summary": "The name for the downloaded aab file",
-          "groups": ["advanced"],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "artifact-type",
-          "type": "string",
-          "summary": "The artifact type (`aab`, `apk`, `ipa`, `dsym`)",
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        },
-        {
-          "name": "skip-download",
-          "type": "boolean",
-          "summary": "Skip downloading build artifacts after command succeeds.",
-          "default": false,
-          "groups": [],
-          "aliases": [],
-          "spec": {
-            "value": "name"
-          }
-        }
-      ],
-      "type": "project"
-    },
-    {
-      "name": "ionic package deploy",
-      "namespace": ["ionic", "package"],
-      "summary": "Deploys a binary to a destination, such as an app store using Appflow",
-      "description": "This command deploys a binary to a destination using Appflow. While running, the remote log is printed to the terminal.\n\nThe command takes two parameters: the numeric ID of the package build that previously created the binary and the name of the destination where the binary is going to be deployed.\nBoth can be retrieved from the [Dashboard](https://dashboard.ionicframework.com).",
-      "footnotes": [],
-      "groups": ["paid", "deprecated"],
-      "exampleCommands": ["ionic package deploy 123456789 \"My app store destination\""],
-      "aliases": [],
-      "inputs": [
-        {
-          "name": "build-id",
-          "summary": "The build id of the desired successful package build",
-          "required": true
-        },
-        {
-          "name": "destination",
-          "summary": "The destination to deploy the build artifact to the app store",
-          "required": true
-        }
-      ],
-      "options": [],
-      "type": "project"
-    },
     {
       "name": "ionic repair",
       "namespace": ["ionic"],
@@ -2512,7 +2183,7 @@
       "name": "ionic serve",
       "namespace": ["ionic"],
       "summary": "Start a local dev server for app dev/testing",
-      "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\nTry the `--lab` option to see multiple platforms at once.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
+      "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
       "footnotes": [],
       "groups": [],
       "exampleCommands": ["ionic serve ", "ionic serve --external", "ionic serve -- --proxy-config proxy.conf.json"],

From 601c7a121e5f88dc37efeba3f5acb484ddd05607 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 20 Apr 2023 11:16:29 -0400
Subject: [PATCH 335/469] docs(pwa): update firebase instructions for deploying
 pwa (#2916)

* docs(react): update firebase instructions for deploying pwa

---------

Co-authored-by: Brett Peary <brett.peary.dev@gmail.com>
---
 docs/angular/pwa.md | 20 +++++++++++++++++---
 docs/react/pwa.md   | 35 +++++++++++++++++++++++++----------
 docs/vue/pwa.md     | 24 +++++++++++++++++++++---
 3 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md
index 8b90caf5d89..183cbb76295 100644
--- a/docs/angular/pwa.md
+++ b/docs/angular/pwa.md
@@ -82,19 +82,33 @@ If it's the first time you use firebase-tools, login to your Google account with
 
 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."
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys".
+
+Create a new Firebase project or select an existing one.
 
 **"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:
+Answering this next question 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".
+**"File build/index.html already exists. Overwrite?"** Enter "No".
+
+**Set up automatic builds and deploys with Github?** Enter "Yes".
+
+**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name.
+
+**Set up the workflow to run a build script before every deploy?** Enter "Yes".
+
+**What script should be run before every deploy?** Enter `npm ci && npm run build`.
+
+**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes".
+
+**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name.
 
 A `firebase.json` config file is generated, configuring the app for deployment.
 
diff --git a/docs/react/pwa.md b/docs/react/pwa.md
index ef57dc05667..e81a216d127 100644
--- a/docs/react/pwa.md
+++ b/docs/react/pwa.md
@@ -24,16 +24,13 @@ npm install -D vite-plugin-pwa
 Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
 
 ```javascript
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { VitePWA } from 'vite-plugin-pwa'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
-  plugins: [
-    react(),
-    VitePWA({ registerType: 'autoUpdate' })
-  ],
-})
+  plugins: [react(), VitePWA({ registerType: 'autoUpdate' })],
+});
 ```
 
 This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
@@ -102,22 +99,40 @@ Next, in a Terminal, install the Firebase CLI:
 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."
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys".
+
+Create a new Firebase project or select an existing one.
 
 **"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:
+Answering this next question 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".
 
+**Set up automatic builds and deploys with Github?** Enter "Yes".
+
+**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name.
+
+**Set up the workflow to run a build script before every deploy?** Enter "Yes".
+
+**What script should be run before every deploy?** Enter `npm ci && npm run build`.
+
+**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes".
+
+**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name.
+
 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:
diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md
index b322831ceac..7e85935bd9f 100644
--- a/docs/vue/pwa.md
+++ b/docs/vue/pwa.md
@@ -167,21 +167,39 @@ Next, in a Terminal, install the Firebase CLI:
 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."
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys".
+
+Create a new Firebase project or select an existing one.
 
 **"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:
+Answering this next question 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".
+**"File build/index.html already exists. Overwrite?"** Enter "No".
+
+**Set up automatic builds and deploys with Github?** Enter "Yes".
+
+**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name.
+
+**Set up the workflow to run a build script before every deploy?** Enter "Yes".
+
+**What script should be run before every deploy?** Enter `npm ci && npm run build`.
+
+**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes".
+
+**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name.
 
 A `firebase.json` config file is generated, configuring the app for deployment.
 

From 98287ffc9c20a385d26697d720a0c648a1002c10 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 20 Apr 2023 12:46:00 -0400
Subject: [PATCH 336/469] docs(support): remove migration guide link (#2925)

This link does not exist anymore as the migration guides are available as a top-level category in the sidebar.
---
 docs/reference/support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index 94052c8cccc..c21749e5a4f 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -16,7 +16,7 @@ The Ionic Framework has been 100% open source (MIT) since the very beginning, an
 
 ## 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).
+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.
 
 The current status of each Ionic Framework version is:
 

From 6113248786abe5b6afab26aef264a29282a1f0e6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 21 Apr 2023 12:07:58 -0400
Subject: [PATCH 337/469] fix(release-notes): remove element symbols and names
 and update design (#2921)

---
 scripts/bak/build-data/release-notes.ts       | 285 ------------------
 scripts/release-notes.js                      | 190 +-----------
 .../page/reference/ReleaseNotes/index.tsx     |  35 +--
 .../reference/ReleaseNotes/styles.module.css  |  96 +-----
 src/styles/custom.scss                        |   4 +
 5 files changed, 36 insertions(+), 574 deletions(-)
 delete mode 100644 scripts/bak/build-data/release-notes.ts

diff --git a/scripts/bak/build-data/release-notes.ts b/scripts/bak/build-data/release-notes.ts
deleted file mode 100644
index fdbdc2de10c..00000000000
--- a/scripts/bak/build-data/release-notes.ts
+++ /dev/null
@@ -1,285 +0,0 @@
-import dotenv from 'dotenv';
-import { outputJson } from 'fs-extra';
-import fetch from 'node-fetch';
-import { resolve } from 'path';
-import semver from 'semver';
-import url from 'url';
-
-import { convertHtmlToHypertextData } from '../build-pages/html-to-hypertext-data';
-import renderMarkdown from '../build-pages/markdown-renderer';
-
-dotenv.config();
-
-const OUTPUT_PATH = resolve(
-  __dirname,
-  '../../src/components/page/data/release-notes.json'
-);
-
-export default {
-  title: 'Build Release Notes data',
-  task: async () => outputJson(OUTPUT_PATH, await getReleases(), { spaces: 2 })
-};
-
-// Get the GitHub Releases from Ionic
-// This requires an environment GITHUB_TOKEN
-// otherwise it may fail silently
-export const getReleases = async () => {
-  try {
-    const request = await fetch(
-      url.format({
-        protocol: 'https',
-        hostname: 'api.github.com',
-        pathname: 'repos/ionic-team/ionic/releases'
-      }), {
-       headers: {
-          'Authorization': process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : ''
-        }
-      }
-    );
-
-    const releases = await request.json();
-
-    // Check that the response is an array in case it was
-    // successful but returned an object
-    if (Array.isArray(releases)) {
-      return releases.filter(release => {
-        const releasePattern = /^v(\d+)\.(\d+)\.(\d+)$/;
-
-        // All non-prerelease, non-alpha, non-beta, non-rc release
-        return releasePattern.test(release.tag_name);
-      }).map(release => {
-        const body = parseMarkdown(release.body);
-        const published_at = parseDate(release.published_at);
-        const version = release.tag_name.replace('v', '');
-        const type = getVersionType(version);
-        const symbol = getVersionSymbol(version);
-        const element = getVersionElement(version);
-        const { name, tag_name } = release;
-
-        return {
-          body,
-          element,
-          name,
-          published_at,
-          symbol,
-          tag_name,
-          type,
-          version
-        };
-      }).sort((a, b) => {
-        return -semver.compare(a.tag_name, b.tag_name);
-      });
-    } else {
-      return [];
-    }
-  } catch (error) {
-    return [];
-  }
-};
-
-// Takes the date in format 2019-04-26T18:24:09Z
-// and returns it as April 26 2019
-const parseDate = (datetime: string) => {
-  const date = new Date(datetime);
-  return date.toLocaleString('en-us', { month: 'long' }) + ' ' + date.getDate() + ' ' + date.getFullYear();
-};
-
-const parseMarkdown = (content: any) => {
-  let html = renderMarkdown(content);
-  html = html.replace('<a href=\"#bug-fixes\">Bug Fixes</a>', 'Bug Fixes')
-             .replace('<a href=\"#features\">Features</a>', 'Features');
-  return convertHtmlToHypertextData(html);
-};
-
-// Given a version, return if it is a
-// major, minor, or patch release
-const getVersionType = (version: string) => {
-  const releasePattern = /^(\d+)\.(\d+)\.(\d+)$/;
-
-  let type = 'patch';
-
-  if (!releasePattern.test(version)) {
-    type = 'prerelease';
-  } else if (version.endsWith('.0.0')) {
-    type = 'major';
-  } else if (version.endsWith('.0')) {
-    type = 'minor';
-  }
-
-  return type;
-};
-
-// Given a version, return its element symbol
-const getVersionSymbol = (version: string) => {
-  const filteredVersions = versions.filter(
-    v => version.startsWith(`${v.minor}.`)
-  );
-  filteredVersions.unshift(fallbackVersion);
-
-  return filteredVersions[filteredVersions.length - 1].symbol;
-};
-
-// Given a version, return its element name
-const getVersionElement = (version: string) => {
-  const filteredVersions = versions.filter(
-    v => version.startsWith(`${v.minor}.`)
-  );
-  filteredVersions.unshift(fallbackVersion);
-
-  return filteredVersions[filteredVersions.length - 1].element;
-};
-
-const versions = [
-  {
-    'minor': '4.0',
-    'symbol': 'N',
-    'element': 'Neutronium'
-  },
-  {
-    'minor': '4.1',
-    'symbol': 'H',
-    'element': 'Hydrogen'
-  },
-  {
-    'minor': '4.2',
-    'symbol': 'He',
-    'element': 'Helium'
-  },
-  {
-    'minor': '4.3',
-    'symbol': 'Li',
-    'element': 'Lithium'
-  },
-  {
-    'minor': '4.4',
-    'symbol': 'Be',
-    'element': 'Beryllium'
-  },
-  {
-    'minor': '4.5',
-    'symbol': 'B',
-    'element': 'Boron'
-  },
-  {
-    'minor': '4.6',
-    'symbol': 'C',
-    'element': 'Carbon'
-  },
-  {
-    'minor': '4.7',
-    'symbol': 'N',
-    'element': 'Nitrogen'
-  },
-  {
-    'minor': '4.8',
-    'symbol': 'O',
-    'element': 'Oxygen'
-  },
-  {
-    'minor': '4.9',
-    'symbol': 'F',
-    'element': 'Fluorine'
-  },
-  {
-    'minor': '4.10',
-    'symbol': 'Ne',
-    'element': 'Neon'
-  },
-  {
-    'minor': '4.11',
-    'symbol': 'Na',
-    'element': 'Sodium'
-  },
-  {
-    'minor': '5.0',
-    'symbol': 'Mg',
-    'element': 'Magnesium'
-  },
-  {
-    'minor': '5.1',
-    'symbol': 'Al',
-    'element': 'Aluminium'
-  },
-  {
-    'minor': '5.2',
-    'symbol': 'Si',
-    'element': 'Silicon'
-  },
-  {
-    'minor': '5.3',
-    'symbol': 'P',
-    'element': 'Phosphorus'
-  },
-  {
-    'minor': '5.4',
-    'symbol': 'S',
-    'element': 'Sulfur'
-  },
-  {
-    'minor': '5.5',
-    'symbol': 'Cl',
-    'element': 'Chlorine'
-  },
-  {
-    'minor': '5.6',
-    'symbol': 'Ar',
-    'element': 'Argon'
-  },
-  {
-    'minor': '5.7',
-    'symbol': 'K',
-    'element': 'Potassium'
-  },
-  {
-    'minor': '5.8',
-    'symbol': 'Ca',
-    'element': 'Calcium'
-  },
-  {
-    'minor': '5.9',
-    'symbol': 'Sc',
-    'element': 'Scandium'
-  },
-  {
-    'minor': '5.10',
-    'symbol': 'Ti',
-    'element': 'Titanium'
-  },
-  {
-    'minor': '5.11',
-    'symbol': 'V',
-    'element': 'Vanadium'
-  },
-  {
-    'minor': '5.12',
-    'symbol': 'Cr',
-    'element': 'Chromium'
-  },
-  {
-    'minor': '5.13',
-    'symbol': 'Mn',
-    'element': 'Manganese'
-  },
-  {
-    'minor': '5.14',
-    'symbol': 'Fe',
-    'element': 'Iron'
-  },
-  {
-    'minor': '5.15',
-    'symbol': 'Co',
-    'element': 'Cobalt'
-  },
-  {
-    'minor': '5.16',
-    'symbol': 'Ni',
-    'element': 'Nickel'
-  },
-  {
-    'minor': '5.17',
-    'symbol': 'Cu',
-    'element': 'Copper'
-  }
-];
-
-const fallbackVersion = { 'minor': '9201', 'symbol': 'Uo', 'element': 'Unobtainium' };
diff --git a/scripts/release-notes.js b/scripts/release-notes.js
index 8680e864a07..22e5ca7335c 100644
--- a/scripts/release-notes.js
+++ b/scripts/release-notes.js
@@ -2,7 +2,7 @@ const { outputJson } = require('fs-extra');
 const fetch = require('node-fetch');
 const { resolve } = require('path');
 const semver = require('semver');
-const url = require('url');
+const { URL } = require('url');
 
 const { renderMarkdown } = require('./utils.js');
 
@@ -14,16 +14,17 @@ const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/Release
 // };
 
 // Get the GitHub Releases from Ionic
-// This requires an environment GITHUB_TOKEN
-// otherwise it may fail silently
+// -------------------------------------------------------------------------------
+// This requires an environment GITHUB_TOKEN otherwise it may fail
+//
+// To add a GITHUB_TOKEN, follow the steps to create a personal access token:
+// https://docs.github.com/en/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
+// and then authorize it to work with SSO:
+// https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on
 const getReleases = async () => {
   try {
     const request = await fetch(
-      url.format({
-        protocol: 'https',
-        hostname: 'api.github.com',
-        pathname: 'repos/ionic-team/ionic/releases',
-      }),
+      new URL('repos/ionic-team/ionic/releases', 'https://api.github.com'),
       {
         headers: {
           Authorization: process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '',
@@ -44,20 +45,16 @@ const getReleases = async () => {
           return releasePattern.test(release.tag_name);
         })
         .map((release) => {
-          const body = renderMarkdown(release.body).contents;
+          const body = renderMarkdown(release.body.replace(/^#.*/, '')).contents;
           const published_at = parseDate(release.published_at);
           const version = release.tag_name.replace('v', '');
           const type = getVersionType(version);
-          const symbol = getVersionSymbol(version);
-          const element = getVersionElement(version);
           const { name, tag_name } = release;
 
           return {
             body,
-            element,
             name,
             published_at,
-            symbol,
             tag_name,
             type,
             version,
@@ -67,6 +64,7 @@ const getReleases = async () => {
           return -semver.compare(a.tag_name, b.tag_name);
         });
     } else {
+      console.error("There was an issue getting releases:", releases);
       return [];
     }
   } catch (error) {
@@ -99,172 +97,6 @@ function getVersionType(version) {
   return type;
 }
 
-// Given a version, return its element symbol
-function getVersionSymbol(version) {
-  const filteredVersions = versions.filter((v) => version.startsWith(`${v.minor}.`));
-  filteredVersions.unshift(fallbackVersion);
-
-  return filteredVersions[filteredVersions.length - 1].symbol;
-}
-
-// Given a version, return its element name
-function getVersionElement(version) {
-  const filteredVersions = versions.filter((v) => version.startsWith(`${v.minor}.`));
-  filteredVersions.unshift(fallbackVersion);
-
-  return filteredVersions[filteredVersions.length - 1].element;
-}
-
-var versions = [
-  {
-    minor: '4.0',
-    symbol: 'N',
-    element: 'Neutronium',
-  },
-  {
-    minor: '4.1',
-    symbol: 'H',
-    element: 'Hydrogen',
-  },
-  {
-    minor: '4.2',
-    symbol: 'He',
-    element: 'Helium',
-  },
-  {
-    minor: '4.3',
-    symbol: 'Li',
-    element: 'Lithium',
-  },
-  {
-    minor: '4.4',
-    symbol: 'Be',
-    element: 'Beryllium',
-  },
-  {
-    minor: '4.5',
-    symbol: 'B',
-    element: 'Boron',
-  },
-  {
-    minor: '4.6',
-    symbol: 'C',
-    element: 'Carbon',
-  },
-  {
-    minor: '4.7',
-    symbol: 'N',
-    element: 'Nitrogen',
-  },
-  {
-    minor: '4.8',
-    symbol: 'O',
-    element: 'Oxygen',
-  },
-  {
-    minor: '4.9',
-    symbol: 'F',
-    element: 'Fluorine',
-  },
-  {
-    minor: '4.10',
-    symbol: 'Ne',
-    element: 'Neon',
-  },
-  {
-    minor: '4.11',
-    symbol: 'Na',
-    element: 'Sodium',
-  },
-  {
-    minor: '5.0',
-    symbol: 'Mg',
-    element: 'Magnesium',
-  },
-  {
-    minor: '5.1',
-    symbol: 'Al',
-    element: 'Aluminium',
-  },
-  {
-    minor: '5.2',
-    symbol: 'Si',
-    element: 'Silicon',
-  },
-  {
-    minor: '5.3',
-    symbol: 'P',
-    element: 'Phosphorus',
-  },
-  {
-    minor: '5.4',
-    symbol: 'S',
-    element: 'Sulfur',
-  },
-  {
-    minor: '5.5',
-    symbol: 'Cl',
-    element: 'Chlorine',
-  },
-  {
-    minor: '5.6',
-    symbol: 'Ar',
-    element: 'Argon',
-  },
-  {
-    minor: '5.7',
-    symbol: 'K',
-    element: 'Potassium',
-  },
-  {
-    minor: '5.8',
-    symbol: 'Ca',
-    element: 'Calcium',
-  },
-  {
-    minor: '5.9',
-    symbol: 'Sc',
-    element: 'Scandium',
-  },
-  {
-    minor: '6.0',
-    symbol: 'Ti',
-    element: 'Titanium',
-  },
-  {
-    minor: '6.1',
-    symbol: 'V',
-    element: 'Vanadium',
-  },
-  {
-    minor: '6.2',
-    symbol: 'Cr',
-    element: 'Chromium'
-  },
-  {
-    minor: '6.3',
-    symbol: 'Mn',
-    element: 'Manganese'
-  },
-  {
-    minor: '6.4',
-    symbol: 'Fe',
-    element: 'Iron'
-  },
-  {
-    minor: '6.5',
-    symbol: 'Co',
-    element: 'Cobalt'
-  },
-  {
-    minor: '6.6',
-    symbol: 'Ni',
-    element: 'Nickel'
-  }
-];
-
-var fallbackVersion = { minor: '9201', symbol: 'Uo', element: 'Unobtainium' };
-
 async function run() {
   outputJson(OUTPUT_PATH, await getReleases(), { spaces: 2 });
 }
diff --git a/src/components/page/reference/ReleaseNotes/index.tsx b/src/components/page/reference/ReleaseNotes/index.tsx
index dc89bdfc1e0..c1402d63d1c 100644
--- a/src/components/page/reference/ReleaseNotes/index.tsx
+++ b/src/components/page/reference/ReleaseNotes/index.tsx
@@ -6,10 +6,8 @@ import styles from './styles.module.css';
 
 interface Release {
   body: string;
-  element: string;
   name: string;
   published_at: string;
-  symbol: string;
   tag_name: string;
   type: string;
   version: string;
@@ -17,6 +15,14 @@ interface Release {
 
 export default function ReleaseNotes(props: { [key: string]: any }) {
   if (releases.length === 0) {
+    console.warn(`Could not load release notes data. Make sure that you have a valid GITHUB_TOKEN.
+
+Create a personal access token by following the below guide:
+https://docs.github.com/en/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
+
+and then authorize it to work with SSO:
+https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on`);
+
     return [
       <p>
         Unable to load Releases. Please see all releases{' '}
@@ -45,21 +51,13 @@ export default function ReleaseNotes(props: { [key: string]: any }) {
       <div className={styles['release-notes']}>
         {releases.map((release: Release, index) => (
           <section className={clsx(styles['release-note'], styles[`release-note-${release.type}`])}>
-            <div className={styles['release-tag-wrapper']}>
-              <h2 id={release.version}>
-                <a href={`#${release.version}`} className={styles['release-tag']}>
-                  <span className={styles['release-symbol']}>{release.symbol}</span>
-                  <span className={styles['release-version']}>{release.version}</span>
-                </a>
-              </h2>
-            </div>
-
             <div className={styles['release-info']}>
               <div className={styles['release-header']}>
-                <h2>
-                  <span className={styles['release-version']}>{release.version}</span>
-                  {release.type !== 'patch' ? ' ' + release.element : null}
-                </h2>
+                <a href={`https://github.com/ionic-team/ionic/releases/v${release.version}`}>
+                  <h2>
+                    <span className={styles['release-version']}>{release.version}</span>
+                  </h2>
+                </a>
                 <span className={styles['release-badge']}>{release.type}</span>
                 {index === 0 ? (
                   <span className={clsx(styles['release-badge'], styles['release-badge-latest'])}>
@@ -89,10 +87,3 @@ export default function ReleaseNotes(props: { [key: string]: any }) {
     </article>
   );
 }
-
-const getReleaseClasses = (release: any) => {
-  return {
-    'release-note': true,
-    [`release-note-${release.type}`]: true,
-  };
-};
diff --git a/src/components/page/reference/ReleaseNotes/styles.module.css b/src/components/page/reference/ReleaseNotes/styles.module.css
index d7e41ee6a05..8da51d36c74 100644
--- a/src/components/page/reference/ReleaseNotes/styles.module.css
+++ b/src/components/page/reference/ReleaseNotes/styles.module.css
@@ -13,6 +13,7 @@
   --accent-color-800: #e3edff;
   --accent-color-900: #f0f6ff;
   --background: var(--token-primary-bg-c);
+  --color: var(--ifm-font-color-base);
   --code-font-family: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 }
 
@@ -24,7 +25,6 @@
   position: relative;
 
   display: flex;
-  align-items: top;
 
   padding-bottom: 80px;
 }
@@ -83,7 +83,7 @@
 }
 
 .release-header .release-version {
-  font-weight: 500;
+  font-weight: 700;
 }
 
 .release-published h3 {
@@ -92,7 +92,8 @@
   font-weight: 300;
 
   margin-top: 4px;
-  color: #4e5b6a;
+  margin-bottom: 32px;
+  color: var(--ifm-secondary-heading-color, #4e5b6a);
 }
 
 .release-badge {
@@ -118,15 +119,15 @@
 }
 
 .release-note-major .release-badge {
-  background: var(--text-color--dark);
-  border-color: var(--text-color--dark);
-  color: white;
+  background: var(--color, #04060b);
+  border-color: var(--color, #04060b);
+  color: var(--background, #fff);
 }
 
 .release-note-minor .release-badge {
   background: #b2becd;
   border-color: #b2becd;
-  color: white;
+  color: var(--background, #fff);
 }
 
 .release-badge.release-badge-latest {
@@ -135,87 +136,6 @@
   border-color: #43c465;
 }
 
-/*
-   * Release Note Element Tag
-   * --------------------------------------------------------
-   */
-
-.release-tag-wrapper h2 {
-  font-size: 15px;
-
-  margin-right: 30px;
-}
-
-.release-note-patch .release-tag-wrapper:after {
-  content: '';
-  background-image: linear-gradient(to bottom, #ebf0f6, #ebf0f6);
-  width: 2px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc((65px / 2) - 1px);
-  z-index: -1;
-}
-
-.release-tag {
-  line-height: 200%;
-  color: var(--accent-color-200);
-
-  padding: 6px 12px;
-  display: inline-block;
-  text-align: center;
-  font-weight: 600;
-  border-radius: 16px;
-  width: 64px;
-  height: 64px;
-
-  background: var(--background);
-  color: var(--accent-color-200);
-
-  border: 2px solid var(--accent-color-200);
-
-  line-height: normal;
-
-  transition: background 0.2s ease-out;
-}
-
-html[data-theme='light'] .release-tag:hover {
-  background: var(--accent-color-800);
-}
-
-html[data-theme='dark'] .release-tag:hover {
-  background: var(--accent-color-100);
-}
-
-.release-note-major .release-tag,
-.release-note-minor .release-tag {
-  background: var(--accent-color-200);
-  color: #fff;
-}
-
-.release-note-major:hover .release-tag,
-.release-note-minor:hover .release-tag {
-  background: var(--accent-color-100);
-}
-
-.release-tag .release-symbol {
-  font-family: var(--font-family);
-  font-weight: 300;
-
-  display: block;
-
-  font-size: 24px;
-
-  margin-top: 3px;
-  margin-bottom: -7px;
-}
-
-.release-tag .release-version {
-  font-family: var(--code-font-family);
-  font-size: 10px;
-  letter-spacing: -0.08em;
-}
-
 /*
    * Release Note Blockquote
    * --------------------------------------------------------
diff --git a/src/styles/custom.scss b/src/styles/custom.scss
index 5c4bed43489..ff779adfd82 100644
--- a/src/styles/custom.scss
+++ b/src/styles/custom.scss
@@ -57,6 +57,8 @@ html[data-theme='light'] {
   --ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-0);
 
   --ifm-heading-color: var(--c-carbon-100);
+  --ifm-secondary-heading-color: var(--c-carbon-300);
+
   --ifm-code-background: var(--c-indigo-10);
   --ifm-font-color-base: var(--c-carbon-90);
 }
@@ -75,6 +77,8 @@ html[data-theme='dark'] {
   --ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-90);
 
   --ifm-heading-color: #fff;
+  --ifm-secondary-heading-color: #f6f6f6;
+
   --ifm-font-color-base: var(--c-carbon-10);
   --ifm-background-color: var(--token-primary-bg-c);
   --ifm-dropdown-background-color: var(--token-secondary-bg-c);

From fd156fd564562cadaa0593d030b3c13ec84ae78a Mon Sep 17 00:00:00 2001
From: Daniel Feliz <47199869+dfeliz@users.noreply.github.com>
Date: Fri, 21 Apr 2023 16:26:05 -0400
Subject: [PATCH 338/469] docs(angular): add missing non-null assertion
 operator (#2683)

---
 docs/angular/your-first-app/5-adding-mobile.md                  | 2 +-
 .../version-v5/angular/your-first-app/5-adding-mobile.md        | 2 +-
 .../version-v6/angular/your-first-app/5-adding-mobile.md        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md
index 72ef3429132..25e18e856c9 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -45,7 +45,7 @@ private async readAsBase64(photo: Photo) {
   }
   else {
     // Fetch the photo, read as a blob, then convert to base64 format
-    const response = await fetch(photo.webPath);
+    const response = await fetch(photo.webPath!);
     const blob = await response.blob();
 
     return await this.convertBlobToBase64(blob) as string;
diff --git a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
index 72ef3429132..25e18e856c9 100644
--- a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
@@ -45,7 +45,7 @@ private async readAsBase64(photo: Photo) {
   }
   else {
     // Fetch the photo, read as a blob, then convert to base64 format
-    const response = await fetch(photo.webPath);
+    const response = await fetch(photo.webPath!);
     const blob = await response.blob();
 
     return await this.convertBlobToBase64(blob) as string;
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
index 72ef3429132..25e18e856c9 100644
--- 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
@@ -45,7 +45,7 @@ private async readAsBase64(photo: Photo) {
   }
   else {
     // Fetch the photo, read as a blob, then convert to base64 format
-    const response = await fetch(photo.webPath);
+    const response = await fetch(photo.webPath!);
     const blob = await response.blob();
 
     return await this.convertBlobToBase64(blob) as string;

From d84866986b590f4cf7cf0ecb0a78b993c4b41741 Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Mon, 24 Apr 2023 13:24:32 -0600
Subject: [PATCH 339/469] fix(): page components file structure (#2907)

---
 docs/intro/cli.md                                               | 2 +-
 src/components/page/intro/{ => cli}/AppWizard/index.module.scss | 0
 src/components/page/intro/{ => cli}/AppWizard/index.tsx         | 0
 versioned_docs/version-v5/intro/cli.md                          | 2 +-
 versioned_docs/version-v6/intro/cli.md                          | 2 +-
 5 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/page/intro/{ => cli}/AppWizard/index.module.scss (100%)
 rename src/components/page/intro/{ => cli}/AppWizard/index.tsx (100%)

diff --git a/docs/intro/cli.md b/docs/intro/cli.md
index 0ddf23169d3..cefc805755b 100644
--- a/docs/intro/cli.md
+++ b/docs/intro/cli.md
@@ -3,7 +3,7 @@ title: Installing Ionic
 sidebar_label: CLI Installation
 ---
 
-import AppWizard from '@components/page/intro/AppWizard';
+import AppWizard from '@components/page/intro/cli/AppWizard';
 
 <head>
   <title>How to Install The Ionic Framework CLI to Build Mobile Apps</title>
diff --git a/src/components/page/intro/AppWizard/index.module.scss b/src/components/page/intro/cli/AppWizard/index.module.scss
similarity index 100%
rename from src/components/page/intro/AppWizard/index.module.scss
rename to src/components/page/intro/cli/AppWizard/index.module.scss
diff --git a/src/components/page/intro/AppWizard/index.tsx b/src/components/page/intro/cli/AppWizard/index.tsx
similarity index 100%
rename from src/components/page/intro/AppWizard/index.tsx
rename to src/components/page/intro/cli/AppWizard/index.tsx
diff --git a/versioned_docs/version-v5/intro/cli.md b/versioned_docs/version-v5/intro/cli.md
index ba08c4bfba9..51a5e9d1f76 100644
--- a/versioned_docs/version-v5/intro/cli.md
+++ b/versioned_docs/version-v5/intro/cli.md
@@ -2,7 +2,7 @@
 sidebar_label: CLI Installation
 ---
 
-import AppWizard from '@components/page/intro/AppWizard';
+import AppWizard from '@components/page/intro/cli/AppWizard';
 
 # Installing Ionic
 
diff --git a/versioned_docs/version-v6/intro/cli.md b/versioned_docs/version-v6/intro/cli.md
index 0ddf23169d3..cefc805755b 100644
--- a/versioned_docs/version-v6/intro/cli.md
+++ b/versioned_docs/version-v6/intro/cli.md
@@ -3,7 +3,7 @@ title: Installing Ionic
 sidebar_label: CLI Installation
 ---
 
-import AppWizard from '@components/page/intro/AppWizard';
+import AppWizard from '@components/page/intro/cli/AppWizard';
 
 <head>
   <title>How to Install The Ionic Framework CLI to Build Mobile Apps</title>

From 1ff738a288bcbebcfaf3cb585652a3c822eb66c2 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 24 Apr 2023 14:51:37 -0500
Subject: [PATCH 340/469] docs(your-first-app): mark webviewPath as optional in
 UserPhoto interface (#2926)

Co-authored-by: derf974 <derf974@users.noreply.github.com>
---
 docs/angular/your-first-app/2-taking-photos.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md
index 73b6d20533f..1a0cb3e2727 100644
--- a/docs/angular/your-first-app/2-taking-photos.md
+++ b/docs/angular/your-first-app/2-taking-photos.md
@@ -83,7 +83,7 @@ Outside of the `PhotoService` class definition (the very bottom of the file), cr
 ```tsx
 export interface UserPhoto {
   filepath: string;
-  webviewPath: string;
+  webviewPath?: string;
 }
 ```
 

From d8b91fe24e3b71fae46556b3b01b6a37400f15ae Mon Sep 17 00:00:00 2001
From: gregbilletdeaux <121880999+gregbilletdeaux@users.noreply.github.com>
Date: Mon, 24 Apr 2023 16:26:46 -0500
Subject: [PATCH 341/469] fix(angular-getting-started): type errors (#2688)

Co-authored-by: Greg Billetdeaux <gregadeaux@gmail.com>
Co-authored-by: Maria Hutt <maria@ionic.io>
---
 docs/angular/your-first-app/4-loading-photos.md               | 4 ++--
 docs/angular/your-first-app/5-adding-mobile.md                | 4 ++--
 .../version-v6/angular/your-first-app/4-loading-photos.md     | 2 +-
 .../version-v6/angular/your-first-app/5-adding-mobile.md      | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md
index 1e6896557cf..6f59d3f951f 100644
--- a/docs/angular/your-first-app/4-loading-photos.md
+++ b/docs/angular/your-first-app/4-loading-photos.md
@@ -35,8 +35,8 @@ With the photo array data saved, create a function called `loadSaved()` that can
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
-  this.photos = JSON.parse(photoList.value) || [];
+  const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
+  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];
 
   // more to come...
 }
diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md
index 25e18e856c9..844b87d723d 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -93,8 +93,8 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
-  this.photos = JSON.parse(photoList.value) || [];
+  const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
+  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];
 
   // Easiest way to detect when running on the web:
   // “when the platform is NOT hybrid, do this”
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
index 1e6896557cf..fdc2c4f3c8f 100644
--- 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
@@ -36,7 +36,7 @@ With the photo array data saved, create a function called `loadSaved()` that can
 public async loadSaved() {
   // Retrieve cached photo array data
   const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
-  this.photos = JSON.parse(photoList.value) || [];
+  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];
 
   // more to come...
 }
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
index 25e18e856c9..481d4c16ca9 100644
--- 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
@@ -94,7 +94,7 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea
 public async loadSaved() {
   // Retrieve cached photo array data
   const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
-  this.photos = JSON.parse(photoList.value) || [];
+  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];
 
   // Easiest way to detect when running on the web:
   // “when the platform is NOT hybrid, do this”

From d6659e1da469ba5da42a1d82e7ca70c91c1bef8a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 25 Apr 2023 10:27:21 -0400
Subject: [PATCH 342/469] Revert "fix(): page components file structure
 (#2907)" (#2928)

This reverts commit d84866986b590f4cf7cf0ecb0a78b993c4b41741.
---
 docs/intro/cli.md                                               | 2 +-
 src/components/page/intro/{cli => }/AppWizard/index.module.scss | 0
 src/components/page/intro/{cli => }/AppWizard/index.tsx         | 0
 versioned_docs/version-v5/intro/cli.md                          | 2 +-
 versioned_docs/version-v6/intro/cli.md                          | 2 +-
 5 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/page/intro/{cli => }/AppWizard/index.module.scss (100%)
 rename src/components/page/intro/{cli => }/AppWizard/index.tsx (100%)

diff --git a/docs/intro/cli.md b/docs/intro/cli.md
index cefc805755b..0ddf23169d3 100644
--- a/docs/intro/cli.md
+++ b/docs/intro/cli.md
@@ -3,7 +3,7 @@ title: Installing Ionic
 sidebar_label: CLI Installation
 ---
 
-import AppWizard from '@components/page/intro/cli/AppWizard';
+import AppWizard from '@components/page/intro/AppWizard';
 
 <head>
   <title>How to Install The Ionic Framework CLI to Build Mobile Apps</title>
diff --git a/src/components/page/intro/cli/AppWizard/index.module.scss b/src/components/page/intro/AppWizard/index.module.scss
similarity index 100%
rename from src/components/page/intro/cli/AppWizard/index.module.scss
rename to src/components/page/intro/AppWizard/index.module.scss
diff --git a/src/components/page/intro/cli/AppWizard/index.tsx b/src/components/page/intro/AppWizard/index.tsx
similarity index 100%
rename from src/components/page/intro/cli/AppWizard/index.tsx
rename to src/components/page/intro/AppWizard/index.tsx
diff --git a/versioned_docs/version-v5/intro/cli.md b/versioned_docs/version-v5/intro/cli.md
index 51a5e9d1f76..ba08c4bfba9 100644
--- a/versioned_docs/version-v5/intro/cli.md
+++ b/versioned_docs/version-v5/intro/cli.md
@@ -2,7 +2,7 @@
 sidebar_label: CLI Installation
 ---
 
-import AppWizard from '@components/page/intro/cli/AppWizard';
+import AppWizard from '@components/page/intro/AppWizard';
 
 # Installing Ionic
 
diff --git a/versioned_docs/version-v6/intro/cli.md b/versioned_docs/version-v6/intro/cli.md
index cefc805755b..0ddf23169d3 100644
--- a/versioned_docs/version-v6/intro/cli.md
+++ b/versioned_docs/version-v6/intro/cli.md
@@ -3,7 +3,7 @@ title: Installing Ionic
 sidebar_label: CLI Installation
 ---
 
-import AppWizard from '@components/page/intro/cli/AppWizard';
+import AppWizard from '@components/page/intro/AppWizard';
 
 <head>
   <title>How to Install The Ionic Framework CLI to Build Mobile Apps</title>

From cae727f9c5c617407d357516713ec3d5b78376d2 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 25 Apr 2023 10:38:00 -0400
Subject: [PATCH 343/469] refactor(api): v5 docs use internal import (#2929)

---
 versioned_docs/version-v5/api/action-sheet.md | 169 +---------
 versioned_docs/version-v5/api/alert.md        | 172 +---------
 versioned_docs/version-v5/api/app.md          |  31 ++
 versioned_docs/version-v5/api/avatar.md       |  31 +-
 versioned_docs/version-v5/api/back-button.md  | 132 ++------
 versioned_docs/version-v5/api/backdrop.md     |  46 ++-
 versioned_docs/version-v5/api/badge.md        |  44 +--
 versioned_docs/version-v5/api/button.md       | 197 +-----------
 versioned_docs/version-v5/api/buttons.md      |  34 +-
 versioned_docs/version-v5/api/card-content.md |  34 +-
 versioned_docs/version-v5/api/card-header.md  |  44 +--
 .../version-v5/api/card-subtitle.md           |  39 ++-
 versioned_docs/version-v5/api/card-title.md   |  39 ++-
 versioned_docs/version-v5/api/card.md         | 127 ++------
 versioned_docs/version-v5/api/checkbox.md     | 103 ++----
 versioned_docs/version-v5/api/chip.md         |  52 ++-
 versioned_docs/version-v5/api/col.md          | 249 ++-------------
 versioned_docs/version-v5/api/content.md      | 125 +-------
 versioned_docs/version-v5/api/datetime.md     | 245 +--------------
 versioned_docs/version-v5/api/fab-button.md   | 186 ++---------
 versioned_docs/version-v5/api/fab-list.md     |  39 ++-
 versioned_docs/version-v5/api/fab.md          |  52 ++-
 versioned_docs/version-v5/api/footer.md       |  39 ++-
 versioned_docs/version-v5/api/grid.md         |  45 +--
 versioned_docs/version-v5/api/header.md       |  44 +--
 versioned_docs/version-v5/api/img.md          |  45 ++-
 .../version-v5/api/infinite-scroll-content.md |  39 ++-
 .../version-v5/api/infinite-scroll.md         |  53 ++--
 versioned_docs/version-v5/api/input.md        | 297 +-----------------
 versioned_docs/version-v5/api/item-divider.md |  55 +---
 versioned_docs/version-v5/api/item-group.md   |  31 ++
 versioned_docs/version-v5/api/item-option.md  | 114 ++-----
 versioned_docs/version-v5/api/item-options.md |  36 ++-
 versioned_docs/version-v5/api/item-sliding.md |  55 +---
 versioned_docs/version-v5/api/item.md         | 190 ++---------
 versioned_docs/version-v5/api/label.md        |  44 ++-
 versioned_docs/version-v5/api/list-header.md  |  49 ++-
 versioned_docs/version-v5/api/list.md         |  47 ++-
 versioned_docs/version-v5/api/loading.md      | 164 +---------
 versioned_docs/version-v5/api/menu-button.md  |  86 ++---
 versioned_docs/version-v5/api/menu-toggle.md  |  39 ++-
 versioned_docs/version-v5/api/menu.md         | 138 +-------
 versioned_docs/version-v5/api/modal.md        | 167 +---------
 versioned_docs/version-v5/api/nav-link.md     |  63 ++--
 versioned_docs/version-v5/api/nav.md          | 148 +--------
 versioned_docs/version-v5/api/note.md         |  39 ++-
 versioned_docs/version-v5/api/picker.md       | 249 +--------------
 versioned_docs/version-v5/api/popover.md      | 164 +---------
 versioned_docs/version-v5/api/progress-bar.md |  78 ++---
 versioned_docs/version-v5/api/radio-group.md  |  46 ++-
 versioned_docs/version-v5/api/radio.md        |  75 ++---
 versioned_docs/version-v5/api/range.md        | 162 +---------
 .../version-v5/api/refresher-content.md       |  63 ++--
 versioned_docs/version-v5/api/refresher.md    |  94 +-----
 .../version-v5/api/reorder-group.md           |  40 +--
 versioned_docs/version-v5/api/reorder.md      |  31 +-
 .../version-v5/api/ripple-effect.md           |  35 ++-
 .../version-v5/api/route-redirect.md          |  41 +--
 versioned_docs/version-v5/api/route.md        |  88 ++----
 versioned_docs/version-v5/api/router-link.md  |  68 ++--
 .../version-v5/api/router-outlet.md           |  44 +--
 versioned_docs/version-v5/api/router.md       |  48 ++-
 versioned_docs/version-v5/api/row.md          |  31 ++
 versioned_docs/version-v5/api/searchbar.md    | 219 +------------
 .../version-v5/api/segment-button.md          |  93 ++----
 versioned_docs/version-v5/api/segment.md      |  74 ++---
 .../version-v5/api/select-option.md           |  39 ++-
 versioned_docs/version-v5/api/select.md       | 148 +--------
 .../version-v5/api/skeleton-text.md           |  36 ++-
 versioned_docs/version-v5/api/slide.md        |  31 ++
 versioned_docs/version-v5/api/slides.md       | 185 +----------
 versioned_docs/version-v5/api/spinner.md      |  51 ++-
 versioned_docs/version-v5/api/split-pane.md   |  51 ++-
 versioned_docs/version-v5/api/tab-bar.md      |  53 ++--
 versioned_docs/version-v5/api/tab-button.md   | 118 ++-----
 versioned_docs/version-v5/api/tab.md          |  42 +--
 versioned_docs/version-v5/api/tabs.md         |  43 ++-
 versioned_docs/version-v5/api/text.md         |  39 ++-
 versioned_docs/version-v5/api/textarea.md     | 235 +-------------
 versioned_docs/version-v5/api/thumbnail.md    |  32 +-
 versioned_docs/version-v5/api/title.md        |  39 ++-
 versioned_docs/version-v5/api/toast.md        | 190 +----------
 versioned_docs/version-v5/api/toggle.md       |  93 ++----
 versioned_docs/version-v5/api/toolbar.md      |  53 ++--
 .../version-v5/api/virtual-scroll.md          | 151 ++-------
 85 files changed, 1781 insertions(+), 5808 deletions(-)

diff --git a/versioned_docs/version-v5/api/action-sheet.md b/versioned_docs/version-v5/api/action-sheet.md
index ab518b39ee6..ef6046a15cc 100644
--- a/versioned_docs/version-v5/api/action-sheet.md
+++ b/versioned_docs/version-v5/api/action-sheet.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v5/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v5/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v5/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/action-sheet/slots.md';
+
 # ion-action-sheet
 
 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.
@@ -505,168 +512,24 @@ Developers can also use this component directly in their template:
 
 ## Properties
 
-### animated
-
-|                 |                                           |
-| --------------- | ----------------------------------------- |
-| **Description** | If `true`, the action sheet will animate. |
-| **Attribute**   | `animated`                                |
-| **Type**        | `boolean`                                 |
-| **Default**     | `true`                                    |
-
-### backdropDismiss
-
-|                 |                                                                             |
-| --------------- | --------------------------------------------------------------------------- |
-| **Description** | If `true`, the action sheet will be dismissed when the backdrop is clicked. |
-| **Attribute**   | `backdrop-dismiss`                                                          |
-| **Type**        | `boolean`                                                                   |
-| **Default**     | `true`                                                                      |
-
-### buttons
-
-|                 |                                           |
-| --------------- | ----------------------------------------- |
-| **Description** | An array of buttons for the action sheet. |
-| **Attribute**   | `undefined`                               |
-| **Type**        | `(string \| ActionSheetButton)[]`         |
-| **Default**     | `[]`                                      |
-
-### cssClass
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are<br />provided they should be separated by spaces. |
-| **Attribute**   | `css-class`                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                           |
-
-### enterAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the action sheet is presented.    |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### header
-
-|                 |                             |
-| --------------- | --------------------------- |
-| **Description** | Title for the action sheet. |
-| **Attribute**   | `header`                    |
-| **Type**        | `string \| undefined`       |
-| **Default**     | `undefined`                 |
-
-### keyboardClose
-
-|                 |                                                                                        |
-| --------------- | -------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. |
-| **Attribute**   | `keyboard-close`                                                                       |
-| **Type**        | `boolean`                                                                              |
-| **Default**     | `true`                                                                                 |
-
-### leaveAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the action sheet is dismissed.    |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### subHeader
-
-|                 |                                |
-| --------------- | ------------------------------ |
-| **Description** | Subtitle for the action sheet. |
-| **Attribute**   | `sub-header`                   |
-| **Type**        | `string \| undefined`          |
-| **Default**     | `undefined`                    |
-
-### translucent
-
-|                 |                                                                                                                                                                                                                                       |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the action sheet will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                         |
-| **Type**        | `boolean`                                                                                                                                                                                                                             |
-| **Default**     | `false`                                                                                                                                                                                                                               |
+<Props />
 
 ## Events
 
-| Name                        | Description                             |
-| --------------------------- | --------------------------------------- |
-| `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  |
-| `ionActionSheetDidPresent`  | Emitted after the alert has presented.  |
-| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. |
-| `ionActionSheetWillPresent` | Emitted before the alert has presented. |
+<Events />
 
 ## Methods
 
-### dismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | Dismiss the action sheet overlay after it has been presented.         |
-| **Signature**   | `dismiss(data?: any, role?: string \| undefined) => Promise<boolean>` |
-
-### onDidDismiss
+<Methods />
 
-|                 |                                                                    |
-| --------------- | ------------------------------------------------------------------ |
-| **Description** | Returns a promise that resolves when the action sheet did dismiss. |
-| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`        |
+## CSS Shadow Parts
 
-### onWillDismiss
+<Parts />
 
-|                 |                                                                     |
-| --------------- | ------------------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the action sheet will dismiss. |
-| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`        |
-
-### present
+## CSS Custom Properties
 
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | Present the action sheet overlay after it has been created. |
-| **Signature**   | `present() => Promise<void>`                                |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name                                    | Description                                                                                                            |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| `--backdrop-opacity`                    | Opacity of the backdrop                                                                                                |
-| `--background`                          | Background of the action sheet group                                                                                   |
-| `--button-background`                   | Background of the action sheet button                                                                                  |
-| `--button-background-activated`         | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. |
-| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed                                                             |
-| `--button-background-focused`           | Background of the action sheet button when tabbed to                                                                   |
-| `--button-background-focused-opacity`   | Opacity of the action sheet button background when tabbed to                                                           |
-| `--button-background-hover`             | Background of the action sheet button on hover                                                                         |
-| `--button-background-hover-opacity`     | Opacity of the action sheet button background on hover                                                                 |
-| `--button-background-selected`          | Background of the selected action sheet button                                                                         |
-| `--button-background-selected-opacity`  | Opacity of the selected action sheet button background                                                                 |
-| `--button-color`                        | Color of the action sheet button                                                                                       |
-| `--button-color-activated`              | Color of the action sheet button when pressed                                                                          |
-| `--button-color-focused`                | Color of the action sheet button when tabbed to                                                                        |
-| `--button-color-hover`                  | Color of the action sheet button on hover                                                                              |
-| `--button-color-selected`               | Color of the selected action sheet button                                                                              |
-| `--color`                               | Color of the action sheet text                                                                                         |
-| `--height`                              | height of the action sheet                                                                                             |
-| `--max-height`                          | Maximum height of the action sheet                                                                                     |
-| `--max-width`                           | Maximum width of the action sheet                                                                                      |
-| `--min-height`                          | Minimum height of the action sheet                                                                                     |
-| `--min-width`                           | Minimum width of the action sheet                                                                                      |
-| `--width`                               | Width of the action sheet                                                                                              |
+<Slots />
diff --git a/versioned_docs/version-v5/api/alert.md b/versioned_docs/version-v5/api/alert.md
index 793cefa35e8..e61b7110365 100644
--- a/versioned_docs/version-v5/api/alert.md
+++ b/versioned_docs/version-v5/api/alert.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/alert/props.md';
+import Events from '@ionic-internal/component-api/v5/alert/events.md';
+import Methods from '@ionic-internal/component-api/v5/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v5/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/alert/slots.md';
+
 # ion-alert
 
 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`.
@@ -1712,171 +1719,24 @@ Developers can also use this component directly in their template:
 
 ## Properties
 
-### animated
-
-|                 |                                    |
-| --------------- | ---------------------------------- |
-| **Description** | If `true`, the alert will animate. |
-| **Attribute**   | `animated`                         |
-| **Type**        | `boolean`                          |
-| **Default**     | `true`                             |
-
-### backdropDismiss
-
-|                 |                                                                      |
-| --------------- | -------------------------------------------------------------------- |
-| **Description** | If `true`, the alert will be dismissed when the backdrop is clicked. |
-| **Attribute**   | `backdrop-dismiss`                                                   |
-| **Type**        | `boolean`                                                            |
-| **Default**     | `true`                                                               |
-
-### buttons
-
-|                 |                                            |
-| --------------- | ------------------------------------------ |
-| **Description** | Array of buttons to be added to the alert. |
-| **Attribute**   | `undefined`                                |
-| **Type**        | `(string \| AlertButton)[]`                |
-| **Default**     | `[]`                                       |
-
-### cssClass
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are<br />provided they should be separated by spaces. |
-| **Attribute**   | `css-class`                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                           |
-
-### enterAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the alert is presented.           |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### header
-
-|                 |                                             |
-| --------------- | ------------------------------------------- |
-| **Description** | The main title in the heading of the alert. |
-| **Attribute**   | `header`                                    |
-| **Type**        | `string \| undefined`                       |
-| **Default**     | `undefined`                                 |
-
-### inputs
-
-|                 |                                      |
-| --------------- | ------------------------------------ |
-| **Description** | Array of input to show in the alert. |
-| **Attribute**   | `undefined`                          |
-| **Type**        | `AlertInput[]`                       |
-| **Default**     | `[]`                                 |
-
-### keyboardClose
-
-|                 |                                                                                        |
-| --------------- | -------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. |
-| **Attribute**   | `keyboard-close`                                                                       |
-| **Type**        | `boolean`                                                                              |
-| **Default**     | `true`                                                                                 |
-
-### leaveAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the alert is dismissed.           |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### message
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                  |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The main message to be displayed in the alert.<br />`message` can accept either plaintext or HTML as a string.<br />To display characters normally reserved for HTML, they<br />must be escaped. For example `<Ionic>` would become<br />`&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) |
-| **Attribute**   | `message`                                                                                                                                                                                                                                                                                                                                                        |
-| **Type**        | `IonicSafeString \| string \| undefined`                                                                                                                                                                                                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                      |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### subHeader
-
-|                 |                                                                      |
-| --------------- | -------------------------------------------------------------------- |
-| **Description** | The subtitle in the heading of the alert. Displayed under the title. |
-| **Attribute**   | `sub-header`                                                         |
-| **Type**        | `string \| undefined`                                                |
-| **Default**     | `undefined`                                                          |
-
-### translucent
-
-|                 |                                                                                                                                                                                                                                |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | If `true`, the alert will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                  |
-| **Type**        | `boolean`                                                                                                                                                                                                                      |
-| **Default**     | `false`                                                                                                                                                                                                                        |
+<Props />
 
 ## Events
 
-| Name                  | Description                             |
-| --------------------- | --------------------------------------- |
-| `ionAlertDidDismiss`  | Emitted after the alert has dismissed.  |
-| `ionAlertDidPresent`  | Emitted after the alert has presented.  |
-| `ionAlertWillDismiss` | Emitted before the alert has dismissed. |
-| `ionAlertWillPresent` | Emitted before the alert has presented. |
+<Events />
 
 ## Methods
 
-### dismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | Dismiss the alert overlay after it has been presented.                |
-| **Signature**   | `dismiss(data?: any, role?: string \| undefined) => Promise<boolean>` |
-
-### onDidDismiss
+<Methods />
 
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the alert did dismiss. |
-| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
+## CSS Shadow Parts
 
-### onWillDismiss
+<Parts />
 
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | Returns a promise that resolves when the alert will dismiss. |
-| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
-### present
+## CSS Custom Properties
 
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | Present the alert overlay after it has been created. |
-| **Signature**   | `present() => Promise<void>`                         |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name                 | Description                 |
-| -------------------- | --------------------------- |
-| `--backdrop-opacity` | Opacity of the backdrop     |
-| `--background`       | Background of the alert     |
-| `--height`           | Height of the alert         |
-| `--max-height`       | Maximum height of the alert |
-| `--max-width`        | Maximum width of the alert  |
-| `--min-height`       | Minimum height of the alert |
-| `--min-width`        | Minimum width of the alert  |
-| `--width`            | Width of the alert          |
+<Slots />
diff --git a/versioned_docs/version-v5/api/app.md b/versioned_docs/version-v5/api/app.md
index 512daea296b..e8c8f780701 100644
--- a/versioned_docs/version-v5/api/app.md
+++ b/versioned_docs/version-v5/api/app.md
@@ -5,6 +5,37 @@ sidebar_label: 'ion-app'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/app/props.md';
+import Events from '@ionic-internal/component-api/v5/app/events.md';
+import Methods from '@ionic-internal/component-api/v5/app/methods.md';
+import Parts from '@ionic-internal/component-api/v5/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/app/slots.md';
+
 # ion-app
 
 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.
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/avatar.md b/versioned_docs/version-v5/api/avatar.md
index b13bd7c9c80..88bc0486560 100644
--- a/versioned_docs/version-v5/api/avatar.md
+++ b/versioned_docs/version-v5/api/avatar.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/avatar/props.md';
+import Events from '@ionic-internal/component-api/v5/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v5/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v5/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/avatar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/avatar/slots.md';
+
 # ion-avatar
 
 Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
@@ -171,8 +178,26 @@ export class AvatarExample {
 
 </Tabs>
 
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
 ## CSS Custom Properties
 
-| Name              | Description                                 |
-| ----------------- | ------------------------------------------- |
-| `--border-radius` | Border radius of the avatar and inner image |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/back-button.md b/versioned_docs/version-v5/api/back-button.md
index dd34fe6df6e..aaf5aaeb74c 100644
--- a/versioned_docs/version-v5/api/back-button.md
+++ b/versioned_docs/version-v5/api/back-button.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/back-button/props.md';
+import Events from '@ionic-internal/component-api/v5/back-button/events.md';
+import Methods from '@ionic-internal/component-api/v5/back-button/methods.md';
+import Parts from '@ionic-internal/component-api/v5/back-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/back-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/back-button/slots.md';
+
 # ion-back-button
 
 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.
@@ -316,119 +323,24 @@ export class BackButtonExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### defaultHref
-
-|                 |                                                                  |
-| --------------- | ---------------------------------------------------------------- |
-| **Description** | The url to navigate back to by default when there is no history. |
-| **Attribute**   | `default-href`                                                   |
-| **Type**        | `string \| undefined`                                            |
-| **Default**     | `undefined`                                                      |
-
-### disabled
-
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the button. |
-| **Attribute**   | `disabled`                                           |
-| **Type**        | `boolean`                                            |
-| **Default**     | `false`                                              |
-
-### icon
-
-|                 |                                           |
-| --------------- | ----------------------------------------- |
-| **Description** | The icon name to use for the back button. |
-| **Attribute**   | `icon`                                    |
-| **Type**        | `null \| string \| undefined`             |
-| **Default**     | `undefined`                               |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### routerAnimation
-
-|                 |                                                                                                  |
-| --------------- | ------------------------------------------------------------------------------------------------ |
-| **Description** | When using a router, it specifies the transition animation when navigating to<br />another page. |
-| **Attribute**   | `undefined`                                                                                      |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                          |
-| **Default**     | `undefined`                                                                                      |
-
-### text
-
-|                 |                                         |
-| --------------- | --------------------------------------- |
-| **Description** | The text to display in the back button. |
-| **Attribute**   | `text`                                  |
-| **Type**        | `null \| string \| undefined`           |
-| **Default**     | `undefined`                             |
-
-### type
-
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | The type of the button.           |
-| **Attribute**   | `type`                            |
-| **Type**        | `"button" \| "reset" \| "submit"` |
-| **Default**     | `'button'`                        |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name     | Description                                                   |
-| -------- | ------------------------------------------------------------- |
-| `icon`   | The back button icon (uses ion-icon).                         |
-| `native` | The native HTML button element that wraps all child elements. |
-| `text`   | The back button text.                                         |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                           | Description                                                                                                    |
-| ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
-| `--background`                 | Background of the button                                                                                       |
-| `--background-focused`         | Background of the button when focused with the tab key                                                         |
-| `--background-focused-opacity` | Opacity of the button background when focused with the tab key                                                 |
-| `--background-hover`           | Background of the button on hover                                                                              |
-| `--background-hover-opacity`   | Opacity of the background on hover                                                                             |
-| `--border-radius`              | Border radius of the button                                                                                    |
-| `--color`                      | Text color of the button                                                                                       |
-| `--color-focused`              | Text color of the button when focused with the tab key                                                         |
-| `--color-hover`                | Text color of the button on hover                                                                              |
-| `--icon-font-size`             | Font size of the button icon                                                                                   |
-| `--icon-font-weight`           | Font weight of the button icon                                                                                 |
-| `--icon-margin-bottom`         | Bottom margin of the button icon                                                                               |
-| `--icon-margin-end`            | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon   |
-| `--icon-margin-start`          | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon   |
-| `--icon-margin-top`            | Top margin of the button icon                                                                                  |
-| `--icon-padding-bottom`        | Bottom padding of the button icon                                                                              |
-| `--icon-padding-end`           | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
-| `--icon-padding-start`         | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
-| `--icon-padding-top`           | Top padding of the button icon                                                                                 |
-| `--margin-bottom`              | Bottom margin of the button                                                                                    |
-| `--margin-end`                 | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button        |
-| `--margin-start`               | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button        |
-| `--margin-top`                 | Top margin of the button                                                                                       |
-| `--min-height`                 | Minimum height of the button                                                                                   |
-| `--min-width`                  | Minimum width of the button                                                                                    |
-| `--opacity`                    | Opacity of the button                                                                                          |
-| `--padding-bottom`             | Bottom padding of the button                                                                                   |
-| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button      |
-| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button      |
-| `--padding-top`                | Top padding of the button                                                                                      |
-| `--ripple-color`               | Color of the button ripple effect                                                                              |
-| `--transition`                 | Transition of the button                                                                                       |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/backdrop.md b/versioned_docs/version-v5/api/backdrop.md
index e83c7df7c92..a0478deee0b 100644
--- a/versioned_docs/version-v5/api/backdrop.md
+++ b/versioned_docs/version-v5/api/backdrop.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/backdrop/props.md';
+import Events from '@ionic-internal/component-api/v5/backdrop/events.md';
+import Methods from '@ionic-internal/component-api/v5/backdrop/methods.md';
+import Parts from '@ionic-internal/component-api/v5/backdrop/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/backdrop/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/backdrop/slots.md';
+
 # ion-backdrop
 
 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.
@@ -192,35 +199,24 @@ export class BackdropExample {
 
 ## Properties
 
-### stopPropagation
+<Props />
 
-|                 |                                                       |
-| --------------- | ----------------------------------------------------- |
-| **Description** | If `true`, the backdrop will stop propagation on tap. |
-| **Attribute**   | `stop-propagation`                                    |
-| **Type**        | `boolean`                                             |
-| **Default**     | `true`                                                |
+## Events
 
-### tappable
+<Events />
 
-|                 |                                                                                       |
-| --------------- | ------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. |
-| **Attribute**   | `tappable`                                                                            |
-| **Type**        | `boolean`                                                                             |
-| **Default**     | `true`                                                                                |
+## Methods
 
-### visible
+<Methods />
 
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | If `true`, the backdrop will be visible. |
-| **Attribute**   | `visible`                                |
-| **Type**        | `boolean`                                |
-| **Default**     | `true`                                   |
+## CSS Shadow Parts
 
-## Events
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
 
-| Name             | Description                          |
-| ---------------- | ------------------------------------ |
-| `ionBackdropTap` | Emitted when the backdrop is tapped. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/badge.md b/versioned_docs/version-v5/api/badge.md
index 1d29c784d3f..0826e4734b1 100644
--- a/versioned_docs/version-v5/api/badge.md
+++ b/versioned_docs/version-v5/api/badge.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/badge/props.md';
+import Events from '@ionic-internal/component-api/v5/badge/events.md';
+import Methods from '@ionic-internal/component-api/v5/badge/methods.md';
+import Parts from '@ionic-internal/component-api/v5/badge/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/badge/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/badge/slots.md';
+
 # ion-badge
 
 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.
@@ -186,31 +193,24 @@ export class BadgeExample {
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+## Methods
 
-### mode
+<Methods />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name               | Description                                                                                              |
-| ------------------ | -------------------------------------------------------------------------------------------------------- |
-| `--background`     | Background of the badge                                                                                  |
-| `--color`          | Text color of the badge                                                                                  |
-| `--padding-bottom` | Bottom padding of the badge                                                                              |
-| `--padding-end`    | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge |
-| `--padding-start`  | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge |
-| `--padding-top`    | Top padding of the badge                                                                                 |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/button.md b/versioned_docs/version-v5/api/button.md
index 069d29a01da..434a59408d8 100644
--- a/versioned_docs/version-v5/api/button.md
+++ b/versioned_docs/version-v5/api/button.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/button/props.md';
+import Events from '@ionic-internal/component-api/v5/button/events.md';
+import Methods from '@ionic-internal/component-api/v5/button/methods.md';
+import Parts from '@ionic-internal/component-api/v5/button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/button/slots.md';
+
 # ion-button
 
 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.
@@ -367,196 +374,24 @@ export class ButtonExample {
 
 ## Properties
 
-### buttonType
-
-|                 |                     |
-| --------------- | ------------------- |
-| **Description** | The type of button. |
-| **Attribute**   | `button-type`       |
-| **Type**        | `string`            |
-| **Default**     | `'button'`          |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the button. |
-| **Attribute**   | `disabled`                                           |
-| **Type**        | `boolean`                                            |
-| **Default**     | `false`                                              |
-
-### download
-
-|                 |                                                                                                                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This attribute instructs browsers to download a URL instead of navigating to<br />it, so the user will be prompted to save it as a local file. If the attribute<br />has a value, it is used as the pre-filled file name in the Save prompt<br />(the user can still change the file name if they want). |
-| **Attribute**   | `download`                                                                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                    |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                              |
-
-### expand
-
-|                 |                                                                                                                      |
-| --------------- | -------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set to `"block"` for a full-width button or to `"full"` for a full-width button<br />without left and right borders. |
-| **Attribute**   | `expand`                                                                                                             |
-| **Type**        | `"block" \| "full" \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                          |
-
-### fill
-
-|                 |                                                                                                                                                                                                                         |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set to `"clear"` for a transparent button, to `"outline"` for a transparent<br />button with a border, or to `"solid"`. The default style is `"solid"` except inside of<br />a toolbar, where the default is `"clear"`. |
-| **Attribute**   | `fill`                                                                                                                                                                                                                  |
-| **Type**        | `"clear" \| "default" \| "outline" \| "solid" \| undefined`                                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                                                                             |
-
-### href
-
-|                 |                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Contains a URL or a URL fragment that the hyperlink points to.<br />If this property is set, an anchor tag will be rendered. |
-| **Attribute**   | `href`                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                        |
-| **Default**     | `undefined`                                                                                                                  |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### rel
-
-|                 |                                                                                                                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies the relationship of the target object to the link object.<br />The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). |
-| **Attribute**   | `rel`                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                                                                 |
-
-### routerAnimation
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition animation when navigating to<br />another page using `href`. |
-| **Attribute**   | `undefined`                                                                                                   |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                       |
-| **Default**     | `undefined`                                                                                                   |
-
-### routerDirection
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition direction when navigating to<br />another page using `href`. |
-| **Attribute**   | `router-direction`                                                                                            |
-| **Type**        | `"back" \| "forward" \| "root"`                                                                               |
-| **Default**     | `'forward'`                                                                                                   |
-
-### shape
-
-|                 |                        |
-| --------------- | ---------------------- |
-| **Description** | The button shape.      |
-| **Attribute**   | `shape`                |
-| **Type**        | `"round" \| undefined` |
-| **Default**     | `undefined`            |
-
-### size
-
-|                 |                                                |
-| --------------- | ---------------------------------------------- |
-| **Description** | The button size.                               |
-| **Attribute**   | `size`                                         |
-| **Type**        | `"default" \| "large" \| "small" \| undefined` |
-| **Default**     | `undefined`                                    |
-
-### strong
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | If `true`, activates a button with a heavier font weight. |
-| **Attribute**   | `strong`                                                  |
-| **Type**        | `boolean`                                                 |
-| **Default**     | `false`                                                   |
-
-### target
-
-|                 |                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies where to display the linked URL.<br />Only applies when an `href` is provided.<br />Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute**   | `target`                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                   |
-
-### type
-
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | The type of the button.           |
-| **Attribute**   | `type`                            |
-| **Type**        | `"button" \| "reset" \| "submit"` |
-| **Default**     | `'button'`                        |
+<Props />
 
 ## Events
 
-| Name       | Description                          |
-| ---------- | ------------------------------------ |
-| `ionBlur`  | Emitted when the button loses focus. |
-| `ionFocus` | Emitted when the button has focus.   |
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name     | Description                                                             |
-| -------- | ----------------------------------------------------------------------- |
-| `native` | The native HTML button or anchor element that wraps all child elements. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                             | Description                                                                                               |
-| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `--background`                   | Background of the button                                                                                  |
-| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
-| `--background-activated-opacity` | Opacity of the button when pressed                                                                        |
-| `--background-focused`           | Background of the button when focused with the tab key                                                    |
-| `--background-focused-opacity`   | Opacity of the button when focused with the tab key                                                       |
-| `--background-hover`             | Background of the button on hover                                                                         |
-| `--background-hover-opacity`     | Opacity of the background on hover                                                                        |
-| `--border-color`                 | Border color of the button                                                                                |
-| `--border-radius`                | Border radius of the button                                                                               |
-| `--border-style`                 | Border style of the button                                                                                |
-| `--border-width`                 | Border width of the button                                                                                |
-| `--box-shadow`                   | Box shadow of the button                                                                                  |
-| `--color`                        | Text color of the button                                                                                  |
-| `--color-activated`              | Text color of the button when pressed                                                                     |
-| `--color-focused`                | Text color of the button when focused with the tab key                                                    |
-| `--color-hover`                  | Text color of the button when hover                                                                       |
-| `--opacity`                      | Opacity of the button                                                                                     |
-| `--padding-bottom`               | Bottom padding of the button                                                                              |
-| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`                  | Top padding of the button                                                                                 |
-| `--ripple-color`                 | Color of the button ripple effect                                                                         |
-| `--transition`                   | Transition of the button                                                                                  |
+<CustomProps />
 
 ## Slots
 
-| Name        | Description                                                                       |
-| ----------- | --------------------------------------------------------------------------------- |
-| ``          | Content is placed between the named slots if provided without a slot.             |
-| `end`       | Content is placed to the right of the button text in LTR, and to the left in RTL. |
-| `icon-only` | Should be used on an icon in a button that has no text.                           |
-| `start`     | Content is placed to the left of the button text in LTR, and to the right in RTL. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/buttons.md b/versioned_docs/version-v5/api/buttons.md
index fa762f3408a..9a9f5b41ecb 100644
--- a/versioned_docs/version-v5/api/buttons.md
+++ b/versioned_docs/version-v5/api/buttons.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-buttons'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/buttons/props.md';
+import Events from '@ionic-internal/component-api/v5/buttons/events.md';
+import Methods from '@ionic-internal/component-api/v5/buttons/methods.md';
+import Parts from '@ionic-internal/component-api/v5/buttons/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/buttons/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/buttons/slots.md';
+
 # ion-buttons
 
 The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` element.
@@ -338,11 +345,24 @@ export class ButtonsExample {
 
 ## Properties
 
-### collapse
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If true, buttons will disappear when its<br />parent toolbar has fully collapsed if the toolbar<br />is not the first toolbar. If the toolbar is the<br />first toolbar, the buttons will be hidden and will<br />only be shown once all toolbars have fully collapsed.<br /><br />Only applies in `ios` mode with `collapse` set to<br />`true` on `ion-header`.<br /><br />Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) |
-| **Attribute**   | `collapse`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+<Slots />
diff --git a/versioned_docs/version-v5/api/card-content.md b/versioned_docs/version-v5/api/card-content.md
index adb32f2e83c..71234694dfb 100644
--- a/versioned_docs/version-v5/api/card-content.md
+++ b/versioned_docs/version-v5/api/card-content.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-card-content'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/card-content/props.md';
+import Events from '@ionic-internal/component-api/v5/card-content/events.md';
+import Methods from '@ionic-internal/component-api/v5/card-content/methods.md';
+import Parts from '@ionic-internal/component-api/v5/card-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/card-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/card-content/slots.md';
+
 # ion-card-content
 
 `ion-card-content` is child component of `ion-card` that adds some content padding.
@@ -12,11 +19,24 @@ It is recommended that any text content for a card should be placed in an `ion-c
 
 ## Properties
 
-### mode
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Slots />
diff --git a/versioned_docs/version-v5/api/card-header.md b/versioned_docs/version-v5/api/card-header.md
index 7df2c9078a2..631941c5b27 100644
--- a/versioned_docs/version-v5/api/card-header.md
+++ b/versioned_docs/version-v5/api/card-header.md
@@ -5,35 +5,37 @@ sidebar_label: 'ion-card-header'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/card-header/props.md';
+import Events from '@ionic-internal/component-api/v5/card-header/events.md';
+import Methods from '@ionic-internal/component-api/v5/card-header/methods.md';
+import Parts from '@ionic-internal/component-api/v5/card-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/card-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/card-header/slots.md';
+
 # ion-card-header
 
 `ion-card-header` is a header component for `ion-card`.
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Parts />
 
-### mode
+## CSS Custom Properties
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<CustomProps />
 
-### translucent
+## Slots
 
-|                 |                                                                                                                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | If `true`, the card header will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                        |
-| **Type**        | `boolean`                                                                                                                                                                                                                            |
-| **Default**     | `false`                                                                                                                                                                                                                              |
+<Slots />
diff --git a/versioned_docs/version-v5/api/card-subtitle.md b/versioned_docs/version-v5/api/card-subtitle.md
index c6c585fd8a0..5e78baa2985 100644
--- a/versioned_docs/version-v5/api/card-subtitle.md
+++ b/versioned_docs/version-v5/api/card-subtitle.md
@@ -5,32 +5,37 @@ sidebar_label: 'ion-card-subtitle'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/card-subtitle/props.md';
+import Events from '@ionic-internal/component-api/v5/card-subtitle/events.md';
+import Methods from '@ionic-internal/component-api/v5/card-subtitle/methods.md';
+import Parts from '@ionic-internal/component-api/v5/card-subtitle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/card-subtitle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/card-subtitle/slots.md';
+
 # ion-card-subtitle
 
 `ion-card-subtitle` is a child component of `ion-card`
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+## Methods
 
-### mode
+<Methods />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name      | Description                |
-| --------- | -------------------------- |
-| `--color` | Color of the card subtitle |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/card-title.md b/versioned_docs/version-v5/api/card-title.md
index d425df949c2..b4b5f8690ae 100644
--- a/versioned_docs/version-v5/api/card-title.md
+++ b/versioned_docs/version-v5/api/card-title.md
@@ -5,32 +5,37 @@ sidebar_label: 'ion-card-title'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/card-title/props.md';
+import Events from '@ionic-internal/component-api/v5/card-title/events.md';
+import Methods from '@ionic-internal/component-api/v5/card-title/methods.md';
+import Parts from '@ionic-internal/component-api/v5/card-title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/card-title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/card-title/slots.md';
+
 # ion-card-title
 
 `ion-card-title` is a child component of `ion-card`
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+## Methods
 
-### mode
+<Methods />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name      | Description             |
-| --------- | ----------------------- |
-| `--color` | Color of the card title |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/card.md b/versioned_docs/version-v5/api/card.md
index 1f612efa174..f0b0dabc2a6 100644
--- a/versioned_docs/version-v5/api/card.md
+++ b/versioned_docs/version-v5/api/card.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/card/props.md';
+import Events from '@ionic-internal/component-api/v5/card/events.md';
+import Methods from '@ionic-internal/component-api/v5/card/methods.md';
+import Parts from '@ionic-internal/component-api/v5/card/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/card/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/card/slots.md';
+
 # ion-card
 
 Cards are a standard piece of UI that serves as an entry point to more detailed
@@ -346,114 +353,24 @@ export class CardExample {
 
 ## Properties
 
-### button
-
-|                 |                                                                         |
-| --------------- | ----------------------------------------------------------------------- |
-| **Description** | If `true`, a button tag will be rendered and the card will be tappable. |
-| **Attribute**   | `button`                                                                |
-| **Type**        | `boolean`                                                               |
-| **Default**     | `false`                                                                 |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                    |
-| --------------- | -------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the card. |
-| **Attribute**   | `disabled`                                         |
-| **Type**        | `boolean`                                          |
-| **Default**     | `false`                                            |
-
-### download
-
-|                 |                                                                                                                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This attribute instructs browsers to download a URL instead of navigating to<br />it, so the user will be prompted to save it as a local file. If the attribute<br />has a value, it is used as the pre-filled file name in the Save prompt<br />(the user can still change the file name if they want). |
-| **Attribute**   | `download`                                                                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                    |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                              |
-
-### href
-
-|                 |                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Contains a URL or a URL fragment that the hyperlink points to.<br />If this property is set, an anchor tag will be rendered. |
-| **Attribute**   | `href`                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                        |
-| **Default**     | `undefined`                                                                                                                  |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### rel
-
-|                 |                                                                                                                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies the relationship of the target object to the link object.<br />The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). |
-| **Attribute**   | `rel`                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                                                                 |
-
-### routerAnimation
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition animation when navigating to<br />another page using `href`. |
-| **Attribute**   | `undefined`                                                                                                   |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                       |
-| **Default**     | `undefined`                                                                                                   |
-
-### routerDirection
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition direction when navigating to<br />another page using `href`. |
-| **Attribute**   | `router-direction`                                                                                            |
-| **Type**        | `"back" \| "forward" \| "root"`                                                                               |
-| **Default**     | `'forward'`                                                                                                   |
-
-### target
-
-|                 |                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies where to display the linked URL.<br />Only applies when an `href` is provided.<br />Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute**   | `target`                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                   |
-
-### type
-
-|                 |                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------ |
-| **Description** | The type of the button. Only used when an `onclick` or `button` property is present. |
-| **Attribute**   | `type`                                                                               |
-| **Type**        | `"button" \| "reset" \| "submit"`                                                    |
-| **Default**     | `'button'`                                                                           |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name     | Description                                                                   |
-| -------- | ----------------------------------------------------------------------------- |
-| `native` | The native HTML button, anchor, or div element that wraps all child elements. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name           | Description            |
-| -------------- | ---------------------- |
-| `--background` | Background of the card |
-| `--color`      | Color of the card      |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/checkbox.md b/versioned_docs/version-v5/api/checkbox.md
index f99c29c8e33..81c3f9ee622 100644
--- a/versioned_docs/version-v5/api/checkbox.md
+++ b/versioned_docs/version-v5/api/checkbox.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v5/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v5/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v5/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/checkbox/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/checkbox/slots.md';
+
 # ion-checkbox
 
 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.
@@ -278,96 +285,24 @@ export class CheckboxExample {
 
 ## Properties
 
-### checked
-
-|                 |                                      |
-| --------------- | ------------------------------------ |
-| **Description** | If `true`, the checkbox is selected. |
-| **Attribute**   | `checked`                            |
-| **Type**        | `boolean`                            |
-| **Default**     | `false`                              |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                        |
-| --------------- | ------------------------------------------------------ |
-| **Description** | If `true`, the user cannot interact with the checkbox. |
-| **Attribute**   | `disabled`                                             |
-| **Type**        | `boolean`                                              |
-| **Default**     | `false`                                                |
-
-### indeterminate
-
-|                 |                                                                |
-| --------------- | -------------------------------------------------------------- |
-| **Description** | If `true`, the checkbox will visually appear as indeterminate. |
-| **Attribute**   | `indeterminate`                                                |
-| **Type**        | `boolean`                                                      |
-| **Default**     | `false`                                                        |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
-
-### value
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The value of the checkbox does not mean if it's checked or not, use the `checked`<br />property for that.<br /><br />The value of a checkbox is analogous to the value of an `<input type="checkbox">`,<br />it's only used when the checkbox participates in a native `<form>`. |
-| **Attribute**   | `value`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string`                                                                                                                                                                                                                                                                         |
-| **Default**     | `'on'`                                                                                                                                                                                                                                                                           |
+<Props />
 
 ## Events
 
-| Name        | Description                                    |
-| ----------- | ---------------------------------------------- |
-| `ionBlur`   | Emitted when the checkbox loses focus.         |
-| `ionChange` | Emitted when the checked property has changed. |
-| `ionFocus`  | Emitted when the checkbox has focus.           |
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name        | Description                                       |
-| ----------- | ------------------------------------------------- |
-| `container` | The container for the checkbox mark.              |
-| `mark`      | The checkmark used to indicate the checked state. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                     | Description                                    |
-| ------------------------ | ---------------------------------------------- |
-| `--background`           | Background of the checkbox icon                |
-| `--background-checked`   | Background of the checkbox icon when checked   |
-| `--border-color`         | Border color of the checkbox icon              |
-| `--border-color-checked` | Border color of the checkbox icon when checked |
-| `--border-radius`        | Border radius of the checkbox icon             |
-| `--border-style`         | Border style of the checkbox icon              |
-| `--border-width`         | Border width of the checkbox icon              |
-| `--checkmark-color`      | Color of the checkbox checkmark when checked   |
-| `--checkmark-width`      | Stroke width of the checkbox checkmark         |
-| `--size`                 | Size of the checkbox icon                      |
-| `--transition`           | Transition of the checkbox icon                |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/chip.md b/versioned_docs/version-v5/api/chip.md
index 00ad72fa2a9..a5c4a754592 100644
--- a/versioned_docs/version-v5/api/chip.md
+++ b/versioned_docs/version-v5/api/chip.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/chip/props.md';
+import Events from '@ionic-internal/component-api/v5/chip/events.md';
+import Methods from '@ionic-internal/component-api/v5/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v5/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/chip/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/chip/slots.md';
+
 # ion-chip
 
 Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.
@@ -327,45 +334,24 @@ export class ChipExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Props />
 
-### disabled
+## Events
 
-|                 |                                                    |
-| --------------- | -------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the chip. |
-| **Attribute**   | `disabled`                                         |
-| **Type**        | `boolean`                                          |
-| **Default**     | `false`                                            |
+<Events />
 
-### mode
+## Methods
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Methods />
 
-### outline
+## CSS Shadow Parts
 
-|                 |                                  |
-| --------------- | -------------------------------- |
-| **Description** | Display an outline style button. |
-| **Attribute**   | `outline`                        |
-| **Type**        | `boolean`                        |
-| **Default**     | `false`                          |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name           | Description            |
-| -------------- | ---------------------- |
-| `--background` | Background of the chip |
-| `--color`      | Color of the chip      |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/col.md b/versioned_docs/version-v5/api/col.md
index cba07ac2f45..5885753ccb1 100644
--- a/versioned_docs/version-v5/api/col.md
+++ b/versioned_docs/version-v5/api/col.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-col'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/col/props.md';
+import Events from '@ionic-internal/component-api/v5/col/events.md';
+import Methods from '@ionic-internal/component-api/v5/col/methods.md';
+import Parts from '@ionic-internal/component-api/v5/col/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/col/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/col/slots.md';
+
 # ion-col
 
 Columns are cellular components of the [grid](grid.md) system and go inside of a [row](row.md).
@@ -18,230 +25,24 @@ By default, columns will stretch to fill the entire height of the row. Columns a
 
 ## Properties
 
-### offset
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to offset the column, in terms of how many columns it should shift to the end<br />of the total available. |
-| **Attribute**   | `offset`                                                                                                              |
-| **Type**        | `string \| undefined`                                                                                                 |
-| **Default**     | `undefined`                                                                                                           |
-
-### offsetLg
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to offset the column for lg screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `offset-lg`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### offsetMd
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to offset the column for md screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `offset-md`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### offsetSm
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to offset the column for sm screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `offset-sm`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### offsetXl
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to offset the column for xl screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `offset-xl`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### offsetXs
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to offset the column for xs screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `offset-xs`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### pull
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to pull the column, in terms of how many columns it should shift to the start of<br />the total available. |
-| **Attribute**   | `pull`                                                                                                                |
-| **Type**        | `string \| undefined`                                                                                                 |
-| **Default**     | `undefined`                                                                                                           |
-
-### pullLg
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to pull the column for lg screens, in terms of how many columns it should shift<br />to the start of the total available. |
-| **Attribute**   | `pull-lg`                                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### pullMd
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to pull the column for md screens, in terms of how many columns it should shift<br />to the start of the total available. |
-| **Attribute**   | `pull-md`                                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### pullSm
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to pull the column for sm screens, in terms of how many columns it should shift<br />to the start of the total available. |
-| **Attribute**   | `pull-sm`                                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### pullXl
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to pull the column for xl screens, in terms of how many columns it should shift<br />to the start of the total available. |
-| **Attribute**   | `pull-xl`                                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### pullXs
-
-|                 |                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The amount to pull the column for xs screens, in terms of how many columns it should shift<br />to the start of the total available. |
-| **Attribute**   | `pull-xs`                                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                                |
-| **Default**     | `undefined`                                                                                                                          |
-
-### push
-
-|                 |                                                                                                                     |
-| --------------- | ------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to push the column, in terms of how many columns it should shift to the end<br />of the total available. |
-| **Attribute**   | `push`                                                                                                              |
-| **Type**        | `string \| undefined`                                                                                               |
-| **Default**     | `undefined`                                                                                                         |
-
-### pushLg
-
-|                 |                                                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to push the column for lg screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `push-lg`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                              |
-| **Default**     | `undefined`                                                                                                                        |
-
-### pushMd
-
-|                 |                                                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to push the column for md screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `push-md`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                              |
-| **Default**     | `undefined`                                                                                                                        |
-
-### pushSm
-
-|                 |                                                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to push the column for sm screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `push-sm`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                              |
-| **Default**     | `undefined`                                                                                                                        |
-
-### pushXl
-
-|                 |                                                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to push the column for xl screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `push-xl`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                              |
-| **Default**     | `undefined`                                                                                                                        |
-
-### pushXs
-
-|                 |                                                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The amount to push the column for xs screens, in terms of how many columns it should shift<br />to the end of the total available. |
-| **Attribute**   | `push-xs`                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                              |
-| **Default**     | `undefined`                                                                                                                        |
-
-### size
-
-|                 |                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The size of the column, in terms of how many columns it should take up out of the total<br />available. If `"auto"` is passed, the column will be the size of its content. |
-| **Attribute**   | `size`                                                                                                                                                                     |
-| **Type**        | `string \| undefined`                                                                                                                                                      |
-| **Default**     | `undefined`                                                                                                                                                                |
-
-### sizeLg
-
-|                 |                                                                                                                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The size of the column for lg screens, in terms of how many columns it should take up out<br />of the total available. If `"auto"` is passed, the column will be the size of its content. |
-| **Attribute**   | `size-lg`                                                                                                                                                                                 |
-| **Type**        | `string \| undefined`                                                                                                                                                                     |
-| **Default**     | `undefined`                                                                                                                                                                               |
-
-### sizeMd
-
-|                 |                                                                                                                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The size of the column for md screens, in terms of how many columns it should take up out<br />of the total available. If `"auto"` is passed, the column will be the size of its content. |
-| **Attribute**   | `size-md`                                                                                                                                                                                 |
-| **Type**        | `string \| undefined`                                                                                                                                                                     |
-| **Default**     | `undefined`                                                                                                                                                                               |
-
-### sizeSm
-
-|                 |                                                                                                                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The size of the column for sm screens, in terms of how many columns it should take up out<br />of the total available. If `"auto"` is passed, the column will be the size of its content. |
-| **Attribute**   | `size-sm`                                                                                                                                                                                 |
-| **Type**        | `string \| undefined`                                                                                                                                                                     |
-| **Default**     | `undefined`                                                                                                                                                                               |
-
-### sizeXl
-
-|                 |                                                                                                                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The size of the column for xl screens, in terms of how many columns it should take up out<br />of the total available. If `"auto"` is passed, the column will be the size of its content. |
-| **Attribute**   | `size-xl`                                                                                                                                                                                 |
-| **Type**        | `string \| undefined`                                                                                                                                                                     |
-| **Default**     | `undefined`                                                                                                                                                                               |
-
-### sizeXs
-
-|                 |                                                                                                                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The size of the column for xs screens, in terms of how many columns it should take up out<br />of the total available. If `"auto"` is passed, the column will be the size of its content. |
-| **Attribute**   | `size-xs`                                                                                                                                                                                 |
-| **Type**        | `string \| undefined`                                                                                                                                                                     |
-| **Default**     | `undefined`                                                                                                                                                                               |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                           | Description                                 |
-| ------------------------------ | ------------------------------------------- |
-| `--ion-grid-column-padding`    | Padding for the Column                      |
-| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up |
-| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up |
-| `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up |
-| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up |
-| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up |
-| `--ion-grid-columns`           | The number of total Columns in the Grid     |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/content.md b/versioned_docs/version-v5/api/content.md
index ac74bb56cc9..733c38c252c 100644
--- a/versioned_docs/version-v5/api/content.md
+++ b/versioned_docs/version-v5/api/content.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/content/props.md';
+import Events from '@ionic-internal/component-api/v5/content/events.md';
+import Methods from '@ionic-internal/component-api/v5/content/methods.md';
+import Parts from '@ionic-internal/component-api/v5/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/content/slots.md';
+
 # ion-content
 
 The content component provides an easy to use content area with some useful methods
@@ -160,130 +167,24 @@ export class ContentExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### forceOverscroll
-
-|                 |                                                                                                                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.<br />If the content exceeds the bounds of ionContent, nothing will change.<br />Note, the does not disable the system bounce on iOS. That is an OS level setting. |
-| **Attribute**   | `force-overscroll`                                                                                                                                                                                                                                                         |
-| **Type**        | `boolean \| undefined`                                                                                                                                                                                                                                                     |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                |
-
-### fullscreen
-
-|                 |                                                                                                                                                    |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the content will scroll behind the headers<br />and footers. This effect can easily be seen by setting the toolbar<br />to transparent. |
-| **Attribute**   | `fullscreen`                                                                                                                                       |
-| **Type**        | `boolean`                                                                                                                                          |
-| **Default**     | `false`                                                                                                                                            |
-
-### scrollEvents
-
-|                 |                                                                                                                                                                           |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Because of performance reasons, ionScroll events are disabled by default, in order to enable them<br />and start listening from (ionScroll), set this property to `true`. |
-| **Attribute**   | `scroll-events`                                                                                                                                                           |
-| **Type**        | `boolean`                                                                                                                                                                 |
-| **Default**     | `false`                                                                                                                                                                   |
-
-### scrollX
-
-|                 |                                                                                         |
-| --------------- | --------------------------------------------------------------------------------------- |
-| **Description** | If you want to enable the content scrolling in the X axis, set this property to `true`. |
-| **Attribute**   | `scroll-x`                                                                              |
-| **Type**        | `boolean`                                                                               |
-| **Default**     | `false`                                                                                 |
-
-### scrollY
-
-|                 |                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------- |
-| **Description** | If you want to disable the content scrolling in the Y axis, set this property to `false`. |
-| **Attribute**   | `scroll-y`                                                                                |
-| **Type**        | `boolean`                                                                                 |
-| **Default**     | `true`                                                                                    |
+<Props />
 
 ## Events
 
-| Name                                 | Description                                                 |
-| ------------------------------------ | ----------------------------------------------------------- |
-| `ionScroll`                          | Emitted while scrolling. This event is disabled by default. |
-| Look at the property: `scrollEvents` |
-| `ionScrollEnd`                       | Emitted when the scroll has ended.                          |
-| `ionScrollStart`                     | Emitted when the scroll has started.                        |
+<Events />
 
 ## Methods
 
-### getScrollElement
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Get the element where the actual scrolling takes place.<br />This element can be used to subscribe to `scroll` events or manually modify<br />`scrollTop`. However, it's recommended to use the API provided by `ion-content`:<br /><br />i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events<br />and `scrollToPoint()` to scroll the content into a certain point. |
-| **Signature**   | `getScrollElement() => Promise<HTMLElement>`                                                                                                                                                                                                                                                                                                                                                   |
-
-### scrollByPoint
-
-|                 |                                                                          |
-| --------------- | ------------------------------------------------------------------------ |
-| **Description** | Scroll by a specified X/Y distance in the component.                     |
-| **Signature**   | `scrollByPoint(x: number, y: number, duration: number) => Promise<void>` |
-
-### scrollToBottom
-
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | Scroll to the bottom of the component.               |
-| **Signature**   | `scrollToBottom(duration?: number) => Promise<void>` |
-
-### scrollToPoint
-
-|                 |                                                                                                                     |
-| --------------- | ------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Scroll to a specified X/Y location in the component.                                                                |
-| **Signature**   | `scrollToPoint(x: number \| undefined \| null, y: number \| undefined \| null, duration?: number) => Promise<void>` |
-
-### scrollToTop
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | Scroll to the top of the component.               |
-| **Signature**   | `scrollToTop(duration?: number) => Promise<void>` |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name         | Description                              |
-| ------------ | ---------------------------------------- |
-| `background` | The background of the content.           |
-| `scroll`     | The scrollable container of the content. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                | Description                                                                                                |
-| ------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `--background`      | Background of the content                                                                                  |
-| `--color`           | Color of the content                                                                                       |
-| `--keyboard-offset` | Keyboard offset of the content                                                                             |
-| `--offset-bottom`   | Offset bottom of the content                                                                               |
-| `--offset-top`      | Offset top of the content                                                                                  |
-| `--padding-bottom`  | Bottom padding of the content                                                                              |
-| `--padding-end`     | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content |
-| `--padding-start`   | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content |
-| `--padding-top`     | Top padding of the content                                                                                 |
+<CustomProps />
 
 ## Slots
 
-| Name    | Description                                                          |
-| ------- | -------------------------------------------------------------------- |
-| ``      | Content is placed in the scrollable area if provided without a slot. |
-| `fixed` | Should be used for fixed content that should not scroll.             |
+<Slots />
diff --git a/versioned_docs/version-v5/api/datetime.md b/versioned_docs/version-v5/api/datetime.md
index 5e493d5d540..13596f1b72e 100644
--- a/versioned_docs/version-v5/api/datetime.md
+++ b/versioned_docs/version-v5/api/datetime.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/datetime/props.md';
+import Events from '@ionic-internal/component-api/v5/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v5/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v5/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/datetime/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/datetime/slots.md';
+
 # ion-datetime
 
 Datetimes present a picker interface from the bottom of a page, making it easy for
@@ -987,244 +994,24 @@ export class DatetimeExample {
 
 ## Properties
 
-### cancelText
-
-|                 |                                                    |
-| --------------- | -------------------------------------------------- |
-| **Description** | The text to display on the picker's cancel button. |
-| **Attribute**   | `cancel-text`                                      |
-| **Type**        | `string`                                           |
-| **Default**     | `'Cancel'`                                         |
-
-### dayNames
-
-|                 |                                                                                                                          |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | Full day of the week names. This can be used to provide<br />locale names for each day in the week. Defaults to English. |
-| **Attribute**   | `day-names`                                                                                                              |
-| **Type**        | `string \| string[] \| undefined`                                                                                        |
-| **Default**     | `undefined`                                                                                                              |
-
-### dayShortNames
-
-|                 |                                                                                                                                                                                                             |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Short abbreviated day of the week names. This can be used to provide<br />locale names for each day in the week. Defaults to English.<br />Defaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` |
-| **Attribute**   | `day-short-names`                                                                                                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                                                                                                           |
-| **Default**     | `undefined`                                                                                                                                                                                                 |
-
-### dayValues
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Values used to create the list of selectable days. By default<br />every day is shown for the given month. However, to control exactly which days of<br />the month to display, the `dayValues` input can take a number, an array of numbers, or<br />a string of comma separated numbers. Note that even if the array days have an invalid<br />number for the selected month, like `31` in February, it will correctly not show<br />days which are not valid for the selected month. |
-| **Attribute**   | `day-values`                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| **Type**        | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-
-### disabled
-
-|                 |                                                        |
-| --------------- | ------------------------------------------------------ |
-| **Description** | If `true`, the user cannot interact with the datetime. |
-| **Attribute**   | `disabled`                                             |
-| **Type**        | `boolean`                                              |
-| **Default**     | `false`                                                |
-
-### displayFormat
-
-|                 |                                                                                                                                                                                                                                                                                                                                                    |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The display format of the date and time as text that shows<br />within the item. When the `pickerFormat` input is not used, then the<br />`displayFormat` is used for both display the formatted text, and determining<br />the datetime picker's columns. See the `pickerFormat` input description for<br />more info. Defaults to `MMM D, YYYY`. |
-| **Attribute**   | `display-format`                                                                                                                                                                                                                                                                                                                                   |
-| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                           |
-| **Default**     | `'MMM D, YYYY'`                                                                                                                                                                                                                                                                                                                                    |
-
-### displayTimezone
-
-|                 |                                                                                                                                                                                                                                                                                                                                                    |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The timezone to use for display purposes only. See<br />[Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)<br />for a list of supported timezones. If no value is provided, the<br />component will default to displaying times in the user's local timezone. |
-| **Attribute**   | `display-timezone`                                                                                                                                                                                                                                                                                                                                 |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                                                              |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                        |
-
-### doneText
-
-|                 |                                                    |
-| --------------- | -------------------------------------------------- |
-| **Description** | The text to display on the picker's "Done" button. |
-| **Attribute**   | `done-text`                                        |
-| **Type**        | `string`                                           |
-| **Default**     | `'Done'`                                           |
-
-### hourValues
-
-|                 |                                                                                                                                                                                                                                                                                                                          |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | Values used to create the list of selectable hours. By default<br />the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,<br />to control exactly which hours to display, the `hourValues` input can take a number, an<br />array of numbers, or a string of comma separated numbers. |
-| **Attribute**   | `hour-values`                                                                                                                                                                                                                                                                                                            |
-| **Type**        | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                              |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                              |
-
-### max
-
-|                 |                                                                                                                                                                                                                                                                                                                                                           |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The maximum datetime allowed. Value must be a date string<br />following the<br />[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),<br />`1996-12-19`. The format does not have to be specific to an exact<br />datetime. For example, the maximum could just be the year, such as `1994`.<br />Defaults to the end of this year. |
-| **Attribute**   | `max`                                                                                                                                                                                                                                                                                                                                                     |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                                                                     |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                               |
-
-### min
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                  |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The minimum datetime allowed. Value must be a date string<br />following the<br />[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),<br />such as `1996-12-19`. The format does not have to be specific to an exact<br />datetime. For example, the minimum could just be the year, such as `1994`.<br />Defaults to the beginning of the year, 100 years ago from today. |
-| **Attribute**   | `min`                                                                                                                                                                                                                                                                                                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                      |
-
-### minuteValues
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Values used to create the list of selectable minutes. By default<br />the minutes range from `0` to `59`. However, to control exactly which minutes to display,<br />the `minuteValues` input can take a number, an array of numbers, or a string of comma<br />separated numbers. For example, if the minute selections should only be every 15 minutes,<br />then this input value would be `minuteValues="0,15,30,45"`. |
-| **Attribute**   | `minute-values`                                                                                                                                                                                                                                                                                                                                                                                                            |
-| **Type**        | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### monthNames
-
-|                 |                                                                                                           |
-| --------------- | --------------------------------------------------------------------------------------------------------- |
-| **Description** | Full names for each month name. This can be used to provide<br />locale month names. Defaults to English. |
-| **Attribute**   | `month-names`                                                                                             |
-| **Type**        | `string \| string[] \| undefined`                                                                         |
-| **Default**     | `undefined`                                                                                               |
-
-### monthShortNames
-
-|                 |                                                                                                                        |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Short abbreviated names for each month name. This can be used to provide<br />locale month names. Defaults to English. |
-| **Attribute**   | `month-short-names`                                                                                                    |
-| **Type**        | `string \| string[] \| undefined`                                                                                      |
-| **Default**     | `undefined`                                                                                                            |
-
-### monthValues
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Values used to create the list of selectable months. By default<br />the month values range from `1` to `12`. However, to control exactly which months to<br />display, the `monthValues` input can take a number, an array of numbers, or a string of<br />comma separated numbers. For example, if only summer months should be shown, then this<br />input value would be `monthValues="6,7,8"`. Note that month numbers do _not_ have a<br />zero-based index, meaning January's value is `1`, and December's is `12`. |
-| **Attribute**   | `month-values`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| **Type**        | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
-
-### pickerFormat
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The format of the date and time picker columns the user selects.<br />A datetime input can have one or many datetime parts, each getting their<br />own column which allow individual selection of that particular datetime part. For<br />example, year and month columns are two individually selectable columns which help<br />choose an exact date from the datetime picker. Each column follows the string<br />parse format. Defaults to use `displayFormat`. |
-| **Attribute**   | `picker-format`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-
-### pickerOptions
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Any additional options that the picker interface can accept.<br />See the [Picker API docs](picker.md) for the picker options.                                                                                                                                                                                                                                                                                                                       |
-| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| **Type**        | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; showBackdrop?: boolean \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: Mode \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-
-### placeholder
-
-|                 |                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------- |
-| **Description** | The text to display when there's no date selected yet.<br />Using lowercase to match the input attribute |
-| **Attribute**   | `placeholder`                                                                                            |
-| **Type**        | `null \| string \| undefined`                                                                            |
-| **Default**     | `undefined`                                                                                              |
-
-### readonly
-
-|                 |                                                                |
-| --------------- | -------------------------------------------------------------- |
-| **Description** | If `true`, the datetime appears normal but is not interactive. |
-| **Attribute**   | `readonly`                                                     |
-| **Type**        | `boolean`                                                      |
-| **Default**     | `false`                                                        |
-
-### value
-
-|                 |                                                                |
-| --------------- | -------------------------------------------------------------- |
-| **Description** | The value of the datetime as a valid ISO 8601 datetime string. |
-| **Attribute**   | `value`                                                        |
-| **Type**        | `null \| string \| undefined`                                  |
-| **Default**     | `undefined`                                                    |
-
-### yearValues
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Values used to create the list of selectable years. By default<br />the year values range between the `min` and `max` datetime inputs. However, to<br />control exactly which years to display, the `yearValues` input can take a number, an array<br />of numbers, or string of comma separated numbers. For example, to show upcoming and<br />recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. |
-| **Attribute**   | `year-values`                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| **Type**        | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                   |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+<Props />
 
 ## Events
 
-| Name        | Description                                         |
-| ----------- | --------------------------------------------------- |
-| `ionBlur`   | Emitted when the datetime loses focus.              |
-| `ionCancel` | Emitted when the datetime selection was cancelled.  |
-| `ionChange` | Emitted when the value (selected date) has changed. |
-| `ionFocus`  | Emitted when the datetime has focus.                |
+<Events />
 
 ## Methods
 
-### open
-
-|                 |                             |
-| --------------- | --------------------------- |
-| **Description** | Opens the datetime overlay. |
-| **Signature**   | `open() => Promise<void>`   |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name          | Description                      |
-| ------------- | -------------------------------- |
-| `placeholder` | The placeholder of the datetime. |
-| `text`        | The value of the datetime.       |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                  | Description                                                                                                 |
-| --------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `--padding-bottom`    | Bottom padding of the datetime                                                                              |
-| `--padding-end`       | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime |
-| `--padding-start`     | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime |
-| `--padding-top`       | Top padding of the datetime                                                                                 |
-| `--placeholder-color` | Color of the datetime placeholder                                                                           |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/fab-button.md b/versioned_docs/version-v5/api/fab-button.md
index d746232444b..3f94f28ed9a 100644
--- a/versioned_docs/version-v5/api/fab-button.md
+++ b/versioned_docs/version-v5/api/fab-button.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-fab-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v5/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v5/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v5/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/fab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/fab-button/slots.md';
+
 # ion-fab-button
 
 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 not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content.
@@ -179,179 +186,24 @@ export class FabButtonExample {
 
 ## Properties
 
-### activated
-
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | If `true`, the fab button will be show a close icon. |
-| **Attribute**   | `activated`                                          |
-| **Type**        | `boolean`                                            |
-| **Default**     | `false`                                              |
-
-### closeIcon
-
-|                 |                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The icon name to use for the close icon. This will appear when the fab button<br />is pressed. Only applies if it is the main button inside of a fab containing a<br />fab list. |
-| **Attribute**   | `close-icon`                                                                                                                                                                     |
-| **Type**        | `string`                                                                                                                                                                         |
-| **Default**     | `'close'`                                                                                                                                                                        |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                          |
-| --------------- | -------------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the fab button. |
-| **Attribute**   | `disabled`                                               |
-| **Type**        | `boolean`                                                |
-| **Default**     | `false`                                                  |
-
-### download
-
-|                 |                                                                                                                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This attribute instructs browsers to download a URL instead of navigating to<br />it, so the user will be prompted to save it as a local file. If the attribute<br />has a value, it is used as the pre-filled file name in the Save prompt<br />(the user can still change the file name if they want). |
-| **Attribute**   | `download`                                                                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                    |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                              |
-
-### href
-
-|                 |                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Contains a URL or a URL fragment that the hyperlink points to.<br />If this property is set, an anchor tag will be rendered. |
-| **Attribute**   | `href`                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                        |
-| **Default**     | `undefined`                                                                                                                  |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### rel
-
-|                 |                                                                                                                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies the relationship of the target object to the link object.<br />The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). |
-| **Attribute**   | `rel`                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                                                                 |
-
-### routerAnimation
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition animation when navigating to<br />another page using `href`. |
-| **Attribute**   | `undefined`                                                                                                   |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                       |
-| **Default**     | `undefined`                                                                                                   |
-
-### routerDirection
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition direction when navigating to<br />another page using `href`. |
-| **Attribute**   | `router-direction`                                                                                            |
-| **Type**        | `"back" \| "forward" \| "root"`                                                                               |
-| **Default**     | `'forward'`                                                                                                   |
-
-### show
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | If `true`, the fab button will show when in a fab-list. |
-| **Attribute**   | `show`                                                  |
-| **Type**        | `boolean`                                               |
-| **Default**     | `false`                                                 |
-
-### size
-
-|                 |                                                                                 |
-| --------------- | ------------------------------------------------------------------------------- |
-| **Description** | The size of the button. Set this to `small` in order to have a mini fab button. |
-| **Attribute**   | `size`                                                                          |
-| **Type**        | `"small" \| undefined`                                                          |
-| **Default**     | `undefined`                                                                     |
-
-### target
-
-|                 |                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies where to display the linked URL.<br />Only applies when an `href` is provided.<br />Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute**   | `target`                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                   |
-
-### translucent
-
-|                 |                                                                                                                                                                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the fab button will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                       |
-| **Type**        | `boolean`                                                                                                                                                                                                                           |
-| **Default**     | `false`                                                                                                                                                                                                                             |
-
-### type
-
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | The type of the button.           |
-| **Attribute**   | `type`                            |
-| **Type**        | `"button" \| "reset" \| "submit"` |
-| **Default**     | `'button'`                        |
+<Props />
 
 ## Events
 
-| Name       | Description                          |
-| ---------- | ------------------------------------ |
-| `ionBlur`  | Emitted when the button loses focus. |
-| `ionFocus` | Emitted when the button has focus.   |
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name         | Description                                                             |
-| ------------ | ----------------------------------------------------------------------- |
-| `close-icon` | The close icon that is displayed when a fab list opens (uses ion-icon). |
-| `native`     | The native HTML button or anchor element that wraps all child elements. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                             | Description                                                                                               |
-| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `--background`                   | Background of the button                                                                                  |
-| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
-| `--background-activated-opacity` | Opacity of the button background when pressed                                                             |
-| `--background-focused`           | Background of the button when focused with the tab key                                                    |
-| `--background-focused-opacity`   | Opacity of the button background when focused with the tab key                                            |
-| `--background-hover`             | Background of the button on hover                                                                         |
-| `--background-hover-opacity`     | Opacity of the button background on hover                                                                 |
-| `--border-color`                 | Border color of the button                                                                                |
-| `--border-radius`                | Border radius of the button                                                                               |
-| `--border-style`                 | Border style of the button                                                                                |
-| `--border-width`                 | Border width of the button                                                                                |
-| `--box-shadow`                   | Box shadow of the button                                                                                  |
-| `--close-icon-font-size`         | Font size of the close icon                                                                               |
-| `--color`                        | Text color of the button                                                                                  |
-| `--color-activated`              | Text color of the button when pressed                                                                     |
-| `--color-focused`                | Text color of the button when focused with the tab key                                                    |
-| `--color-hover`                  | Text color of the button on hover                                                                         |
-| `--padding-bottom`               | Bottom padding of the button                                                                              |
-| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`                  | Top padding of the button                                                                                 |
-| `--ripple-color`                 | Color of the button ripple effect                                                                         |
-| `--transition`                   | Transition of the button                                                                                  |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/fab-list.md b/versioned_docs/version-v5/api/fab-list.md
index b83b816c89a..68ca6717a59 100644
--- a/versioned_docs/version-v5/api/fab-list.md
+++ b/versioned_docs/version-v5/api/fab-list.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-fab-list'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v5/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v5/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v5/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/fab-list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/fab-list/slots.md';
+
 # ion-fab-list
 
 The `ion-fab-list` element is a container for multiple fab buttons. This collection of fab buttons 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', 'bottom'
@@ -309,20 +316,24 @@ export class FabListExample {
 
 ## Properties
 
-### activated
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
 
-|                 |                                                                |
-| --------------- | -------------------------------------------------------------- |
-| **Description** | If `true`, the fab list will show all fab buttons in the list. |
-| **Attribute**   | `activated`                                                    |
-| **Type**        | `boolean`                                                      |
-| **Default**     | `false`                                                        |
+<CustomProps />
 
-### side
+## Slots
 
-|                 |                                                                     |
-| --------------- | ------------------------------------------------------------------- |
-| **Description** | The side the fab list will show on relative to the main fab button. |
-| **Attribute**   | `side`                                                              |
-| **Type**        | `"bottom" \| "end" \| "start" \| "top"`                             |
-| **Default**     | `'bottom'`                                                          |
+<Slots />
diff --git a/versioned_docs/version-v5/api/fab.md b/versioned_docs/version-v5/api/fab.md
index 52e799dbcfb..722f8bb7634 100644
--- a/versioned_docs/version-v5/api/fab.md
+++ b/versioned_docs/version-v5/api/fab.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/fab/props.md';
+import Events from '@ionic-internal/component-api/v5/fab/events.md';
+import Methods from '@ionic-internal/component-api/v5/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v5/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/fab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/fab/slots.md';
+
 # ion-fab
 
 Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.md) elements with different side values.
@@ -633,47 +640,24 @@ export class FabExample {
 
 ## Properties
 
-### activated
+<Props />
 
-|                 |                                                                                                                                                                                                      |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.<br />That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. |
-| **Attribute**   | `activated`                                                                                                                                                                                          |
-| **Type**        | `boolean`                                                                                                                                                                                            |
-| **Default**     | `false`                                                                                                                                                                                              |
+## Events
 
-### edge
+<Events />
 
-|                 |                                                                                                                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | If `true`, the fab will display on the edge of the header if<br />`vertical` is `"top"`, and on the edge of the footer if<br />it is `"bottom"`. Should be used with a `fixed` slot. |
-| **Attribute**   | `edge`                                                                                                                                                                               |
-| **Type**        | `boolean`                                                                                                                                                                            |
-| **Default**     | `false`                                                                                                                                                                              |
+## Methods
 
-### horizontal
+<Methods />
 
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | Where to align the fab horizontally in the viewport. |
-| **Attribute**   | `horizontal`                                         |
-| **Type**        | `"center" \| "end" \| "start" \| undefined`          |
-| **Default**     | `undefined`                                          |
+## CSS Shadow Parts
 
-### vertical
+<Parts />
 
-|                 |                                                    |
-| --------------- | -------------------------------------------------- |
-| **Description** | Where to align the fab vertically in the viewport. |
-| **Attribute**   | `vertical`                                         |
-| **Type**        | `"bottom" \| "center" \| "top" \| undefined`       |
-| **Default**     | `undefined`                                        |
+## CSS Custom Properties
 
-## Methods
+<CustomProps />
 
-### close
+## Slots
 
-|                 |                                     |
-| --------------- | ----------------------------------- |
-| **Description** | Close an active FAB list container. |
-| **Signature**   | `close() => Promise<void>`          |
+<Slots />
diff --git a/versioned_docs/version-v5/api/footer.md b/versioned_docs/version-v5/api/footer.md
index a2ffb3b8d35..0d0ffd979e7 100644
--- a/versioned_docs/version-v5/api/footer.md
+++ b/versioned_docs/version-v5/api/footer.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-footer'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/footer/props.md';
+import Events from '@ionic-internal/component-api/v5/footer/events.md';
+import Methods from '@ionic-internal/component-api/v5/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v5/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/footer/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/footer/slots.md';
+
 # ion-footer
 
 Footer is a root component of a page that sits at the bottom of the page.
@@ -155,20 +162,24 @@ export class FooterExample {
 
 ## Properties
 
-### mode
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<CustomProps />
 
-### translucent
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the footer will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />Note: In order to scroll content behind the footer, the `fullscreen`<br />attribute needs to be set on the content. |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                  |
-| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                      |
-| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                        |
+<Slots />
diff --git a/versioned_docs/version-v5/api/grid.md b/versioned_docs/version-v5/api/grid.md
index b7e430e896c..e5d5b74338d 100644
--- a/versioned_docs/version-v5/api/grid.md
+++ b/versioned_docs/version-v5/api/grid.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/grid/props.md';
+import Events from '@ionic-internal/component-api/v5/grid/events.md';
+import Methods from '@ionic-internal/component-api/v5/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v5/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/grid/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/grid/slots.md';
+
 # ion-grid
 
 The grid is a powerful mobile-first flexbox system for building custom layouts.
@@ -648,28 +655,24 @@ export class GridExample {
 
 ## Properties
 
-### fixed
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
 
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | If `true`, the grid will have a fixed width based on the screen size. |
-| **Attribute**   | `fixed`                                                               |
-| **Type**        | `boolean`                                                             |
-| **Default**     | `false`                                                               |
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                    | Description                           |
-| ----------------------- | ------------------------------------- |
-| `--ion-grid-padding`    | Padding for the Grid                  |
-| `--ion-grid-padding-lg` | Padding for the Grid on lg screens    |
-| `--ion-grid-padding-md` | Padding for the Grid on md screens    |
-| `--ion-grid-padding-sm` | Padding for the Grid on sm screens    |
-| `--ion-grid-padding-xl` | Padding for the Grid on xl screens    |
-| `--ion-grid-padding-xs` | Padding for the Grid on xs screens    |
-| `--ion-grid-width`      | Width of the fixed Grid               |
-| `--ion-grid-width-lg`   | Width of the fixed Grid on lg screens |
-| `--ion-grid-width-md`   | Width of the fixed Grid on md screens |
-| `--ion-grid-width-sm`   | Width of the fixed Grid on sm screens |
-| `--ion-grid-width-xl`   | Width of the fixed Grid on xl screens |
-| `--ion-grid-width-xs`   | Width of the fixed Grid on xs screens |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/header.md b/versioned_docs/version-v5/api/header.md
index 408f8372613..97c021ee8da 100644
--- a/versioned_docs/version-v5/api/header.md
+++ b/versioned_docs/version-v5/api/header.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-header'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/header/props.md';
+import Events from '@ionic-internal/component-api/v5/header/events.md';
+import Methods from '@ionic-internal/component-api/v5/header/methods.md';
+import Parts from '@ionic-internal/component-api/v5/header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/header/slots.md';
+
 # ion-header
 
 Header is a parent component that holds the toolbar component.
@@ -227,29 +234,24 @@ export class HeaderExample {
 
 ## Properties
 
-### collapse
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
 
-|                 |                                                                                                                                                                                                                                       |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Describes the scroll effect that will be applied to the header<br />`condense` only applies in iOS mode.<br /><br />Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) |
-| **Attribute**   | `collapse`                                                                                                                                                                                                                            |
-| **Type**        | `"condense" \| undefined`                                                                                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                                                                                           |
+<Parts />
 
-### mode
+## CSS Custom Properties
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<CustomProps />
 
-### translucent
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the header will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />Note: In order to scroll content behind the header, the `fullscreen`<br />attribute needs to be set on the content. |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                  |
-| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                      |
-| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                        |
+<Slots />
diff --git a/versioned_docs/version-v5/api/img.md b/versioned_docs/version-v5/api/img.md
index 9be6a58b969..d0921940945 100644
--- a/versioned_docs/version-v5/api/img.md
+++ b/versioned_docs/version-v5/api/img.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-img'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/img/props.md';
+import Events from '@ionic-internal/component-api/v5/img/events.md';
+import Methods from '@ionic-internal/component-api/v5/img/methods.md';
+import Parts from '@ionic-internal/component-api/v5/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/img/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/img/slots.md';
+
 # ion-img
 
 Img is a tag that will lazily load an image when ever 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 browser, but falls back to a `setTimeout` when it is not supported.
@@ -151,34 +158,24 @@ export class ImgExample {
 
 ## Properties
 
-### alt
-
-|                 |                                                                                                                                                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This attribute defines the alternative text describing the image.<br />Users will see this text displayed if the image URL is wrong,<br />the image is not in one of the supported formats, or if the image is not yet downloaded. |
-| **Attribute**   | `alt`                                                                                                                                                                                                                              |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                              |
-| **Default**     | `undefined`                                                                                                                                                                                                                        |
+<Props />
 
-### src
+## Events
 
-|                 |                                                                     |
-| --------------- | ------------------------------------------------------------------- |
-| **Description** | The image URL. This attribute is mandatory for the `<img>` element. |
-| **Attribute**   | `src`                                                               |
-| **Type**        | `string \| undefined`                                               |
-| **Default**     | `undefined`                                                         |
+<Events />
 
-## Events
+## Methods
 
-| Name             | Description                                 |
-| ---------------- | ------------------------------------------- |
-| `ionError`       | Emitted when the img fails to load          |
-| `ionImgDidLoad`  | Emitted when the image has finished loading |
-| `ionImgWillLoad` | Emitted when the img src has been set       |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name    | Description              |
-| ------- | ------------------------ |
-| `image` | The inner `img` element. |
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/infinite-scroll-content.md b/versioned_docs/version-v5/api/infinite-scroll-content.md
index 2d86064b740..a3a4cd63eb3 100644
--- a/versioned_docs/version-v5/api/infinite-scroll-content.md
+++ b/versioned_docs/version-v5/api/infinite-scroll-content.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-infinite-scroll-content'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v5/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v5/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v5/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/infinite-scroll-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/infinite-scroll-content/slots.md';
+
 # ion-infinite-scroll-content
 
 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.
@@ -111,20 +118,24 @@ export default defineComponent({
 
 ## Properties
 
-### loadingSpinner
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
 
-|                 |                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------- |
-| **Description** | An animated SVG spinner that shows while loading.                                                               |
-| **Attribute**   | `loading-spinner`                                                                                               |
-| **Type**        | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` |
-| **Default**     | `undefined`                                                                                                     |
+<CustomProps />
 
-### loadingText
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Optional text to display while loading.<br />`loadingText` can accept either plaintext or HTML as a string.<br />To display characters normally reserved for HTML, they<br />must be escaped. For example `<Ionic>` would become<br />`&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) |
-| **Attribute**   | `loading-text`                                                                                                                                                                                                                                                                                                                                                |
-| **Type**        | `IonicSafeString \| string \| undefined`                                                                                                                                                                                                                                                                                                                      |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                   |
+<Slots />
diff --git a/versioned_docs/version-v5/api/infinite-scroll.md b/versioned_docs/version-v5/api/infinite-scroll.md
index b4fc0e0856f..0f5e576abfd 100644
--- a/versioned_docs/version-v5/api/infinite-scroll.md
+++ b/versioned_docs/version-v5/api/infinite-scroll.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/infinite-scroll/props.md';
+import Events from '@ionic-internal/component-api/v5/infinite-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v5/infinite-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v5/infinite-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/infinite-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/infinite-scroll/slots.md';
+
 # ion-infinite-scroll
 
 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.
@@ -292,48 +299,24 @@ export class InfiniteScrollExample {
 
 ## Properties
 
-### disabled
-
-|                 |                                                                                                                                                                                                                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the infinite scroll will be hidden and scroll event listeners<br />will be removed.<br /><br />Set this to true to disable the infinite scroll from actively<br />trying to receive new data while scrolling. This is useful<br />when it is known that there is no more data that can be added, and<br />the infinite scroll is no longer needed. |
-| **Attribute**   | `disabled`                                                                                                                                                                                                                                                                                                                                                    |
-| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                     |
-| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                       |
+<Props />
 
-### position
+## Events
 
-|                 |                                                                                              |
-| --------------- | -------------------------------------------------------------------------------------------- |
-| **Description** | The position of the infinite scroll element.<br />The value can be either `top` or `bottom`. |
-| **Attribute**   | `position`                                                                                   |
-| **Type**        | `"bottom" \| "top"`                                                                          |
-| **Default**     | `'bottom'`                                                                                   |
+<Events />
 
-### threshold
+## Methods
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The threshold distance from the bottom<br />of the content to call the `infinite` output event when scrolled.<br />The threshold value can be either a percent, or<br />in pixels. For example, use the value of `10%` for the `infinite`<br />output event to get called when the user has scrolled 10%<br />from the bottom of the page. Use the value `100px` when the<br />scroll is within 100 pixels from the bottom of the page. |
-| **Attribute**   | `threshold`                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| **Default**     | `'15%'`                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+<Methods />
 
-## Events
+## CSS Shadow Parts
 
-| Name          | Description                     |
-| ------------- | ------------------------------- |
-| `ionInfinite` | Emitted when the scroll reaches |
+<Parts />
 
-the threshold distance. From within your infinite handler,
-you must call the infinite scroll's `complete()` method when
-your async operation has completed. |
+## CSS Custom Properties
 
-## Methods
+<CustomProps />
 
-### complete
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Call `complete()` within the `ionInfinite` output event handler when<br />your async operation has completed. For example, the `loading`<br />state is while the app is performing an asynchronous operation,<br />such as receiving more data from an AJAX request to add more items<br />to a data list. Once the data has been received and UI updated, you<br />then call this method to signify that the loading has completed.<br />This method will change the infinite scroll's state from `loading`<br />to `enabled`. |
-| **Signature**   | `complete() => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+<Slots />
diff --git a/versioned_docs/version-v5/api/input.md b/versioned_docs/version-v5/api/input.md
index e0d9bbccfba..c7c408fd1ab 100644
--- a/versioned_docs/version-v5/api/input.md
+++ b/versioned_docs/version-v5/api/input.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/input/props.md';
+import Events from '@ionic-internal/component-api/v5/input/events.md';
+import Methods from '@ionic-internal/component-api/v5/input/methods.md';
+import Parts from '@ionic-internal/component-api/v5/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/input/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/input/slots.md';
+
 # ion-input
 
 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.
@@ -331,294 +338,24 @@ export class InputExample {
 
 ## Properties
 
-### accept
-
-|                 |                                                                                                                                                                                                                                         |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. |
-| **Attribute**   | `accept`                                                                                                                                                                                                                                |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                   |
-| **Default**     | `undefined`                                                                                                                                                                                                                             |
-
-### autocapitalize
-
-|                 |                                                                                                                                                                                                                |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.<br />Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. |
-| **Attribute**   | `autocapitalize`                                                                                                                                                                                               |
-| **Type**        | `string`                                                                                                                                                                                                       |
-| **Default**     | `'off'`                                                                                                                                                                                                        |
-
-### autocomplete
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Indicates whether the value of the control can be automatically completed by the browser.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| **Attribute**   | `autocomplete`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| **Type**        | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` |
-| **Default**     | `'off'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-
-### autocorrect
-
-|                 |                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------- |
-| **Description** | Whether auto correction should be enabled when the user is entering/editing the text value. |
-| **Attribute**   | `autocorrect`                                                                               |
-| **Type**        | `"off" \| "on"`                                                                             |
-| **Default**     | `'off'`                                                                                     |
-
-### autofocus
-
-|                 |                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------- |
-| **Description** | This Boolean attribute lets you specify that a form control should have input focus when the page loads. |
-| **Attribute**   | `autofocus`                                                                                              |
-| **Type**        | `boolean`                                                                                                |
-| **Default**     | `false`                                                                                                  |
-
-### clearInput
-
-|                 |                                                                                                       |
-| --------------- | ----------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. |
-| **Attribute**   | `clear-input`                                                                                         |
-| **Type**        | `boolean`                                                                                             |
-| **Default**     | `false`                                                                                               |
-
-### clearOnEdit
-
-|                 |                                                                                                                                          |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. |
-| **Attribute**   | `clear-on-edit`                                                                                                                          |
-| **Type**        | `boolean \| undefined`                                                                                                                   |
-| **Default**     | `undefined`                                                                                                                              |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### debounce
-
-|                 |                                                                                                                                                                         |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. |
-| **Attribute**   | `debounce`                                                                                                                                                              |
-| **Type**        | `number`                                                                                                                                                                |
-| **Default**     | `0`                                                                                                                                                                     |
-
-### disabled
-
-|                 |                                                     |
-| --------------- | --------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the input. |
-| **Attribute**   | `disabled`                                          |
-| **Type**        | `boolean`                                           |
-| **Default**     | `false`                                             |
-
-### enterkeyhint
-
-|                 |                                                                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A hint to the browser for which enter key to display.<br />Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,<br />`"previous"`, `"search"`, and `"send"`. |
-| **Attribute**   | `enterkeyhint`                                                                                                                                                  |
-| **Type**        | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined`                                                                          |
-| **Default**     | `undefined`                                                                                                                                                     |
-
-### inputmode
-
-|                 |                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A hint to the browser for which keyboard to display.<br />Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,<br />`"email"`, `"numeric"`, `"decimal"`, and `"search"`. |
-| **Attribute**   | `inputmode`                                                                                                                                                                |
-| **Type**        | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined`                                                                         |
-| **Default**     | `undefined`                                                                                                                                                                |
-
-### max
-
-|                 |                                                                                   |
-| --------------- | --------------------------------------------------------------------------------- |
-| **Description** | The maximum value, which must not be less than its minimum (min attribute) value. |
-| **Attribute**   | `max`                                                                             |
-| **Type**        | `string \| undefined`                                                             |
-| **Default**     | `undefined`                                                                       |
-
-### maxlength
-
-|                 |                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. |
-| **Attribute**   | `maxlength`                                                                                                                                                                      |
-| **Type**        | `number \| undefined`                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                      |
-
-### min
-
-|                 |                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------ |
-| **Description** | The minimum value, which must not be greater than its maximum (max attribute) value. |
-| **Attribute**   | `min`                                                                                |
-| **Type**        | `string \| undefined`                                                                |
-| **Default**     | `undefined`                                                                          |
-
-### minlength
-
-|                 |                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. |
-| **Attribute**   | `minlength`                                                                                                                                                                      |
-| **Type**        | `number \| undefined`                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                      |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### multiple
-
-|                 |                                                                                                                                                             |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. |
-| **Attribute**   | `multiple`                                                                                                                                                  |
-| **Type**        | `boolean \| undefined`                                                                                                                                      |
-| **Default**     | `undefined`                                                                                                                                                 |
-
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
-
-### pattern
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. |
-| **Attribute**   | `pattern`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-
-### placeholder
-
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | Instructional text that shows before the input has a value. |
-| **Attribute**   | `placeholder`                                               |
-| **Type**        | `null \| string \| undefined`                               |
-| **Default**     | `undefined`                                                 |
-
-### readonly
-
-|                 |                                              |
-| --------------- | -------------------------------------------- |
-| **Description** | If `true`, the user cannot modify the value. |
-| **Attribute**   | `readonly`                                   |
-| **Type**        | `boolean`                                    |
-| **Default**     | `false`                                      |
-
-### required
-
-|                 |                                                                    |
-| --------------- | ------------------------------------------------------------------ |
-| **Description** | If `true`, the user must fill in a value before submitting a form. |
-| **Attribute**   | `required`                                                         |
-| **Type**        | `boolean`                                                          |
-| **Default**     | `false`                                                            |
-
-### size
-
-|                 |                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. |
-| **Attribute**   | `size`                                                                                                                                                                                                                                                                                                                                         |
-| **Type**        | `number \| undefined`                                                                                                                                                                                                                                                                                                                          |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                    |
-
-### spellcheck
-
-|                 |                                                                    |
-| --------------- | ------------------------------------------------------------------ |
-| **Description** | If `true`, the element will have its spelling and grammar checked. |
-| **Attribute**   | `spellcheck`                                                       |
-| **Type**        | `boolean`                                                          |
-| **Default**     | `false`                                                            |
-
-### step
-
-|                 |                                                                                                                                                                   |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Works with the min and max attributes to limit the increments at which a value can be set.<br />Possible values are: `"any"` or a positive floating point number. |
-| **Attribute**   | `step`                                                                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                       |
-
-### type
-
-|                 |                                                                                                                                          |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The type of control to display. The default type is text.                                                                                |
-| **Attribute**   | `type`                                                                                                                                   |
-| **Type**        | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` |
-| **Default**     | `'text'`                                                                                                                                 |
-
-### value
-
-|                 |                                         |
-| --------------- | --------------------------------------- |
-| **Description** | The value of the input.                 |
-| **Attribute**   | `value`                                 |
-| **Type**        | `null \| number \| string \| undefined` |
-| **Default**     | `''`                                    |
+<Props />
 
 ## Events
 
-| Name        | Description                             |
-| ----------- | --------------------------------------- |
-| `ionBlur`   | Emitted when the input loses focus.     |
-| `ionChange` | Emitted when the value has changed.     |
-| `ionFocus`  | Emitted when the input has focus.       |
-| `ionInput`  | Emitted when a keyboard input occurred. |
+<Events />
 
 ## Methods
 
-### getInputElement
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | Returns the native `<input>` element used under the hood. |
-| **Signature**   | `getInputElement() => Promise<HTMLInputElement>`          |
+<Methods />
 
-### setFocus
+## CSS Shadow Parts
 
-|                 |                                                                                                              |
-| --------------- | ------------------------------------------------------------------------------------------------------------ |
-| **Description** | Sets focus on the native `input` in `ion-input`. Use this method instead of the global<br />`input.focus()`. |
-| **Signature**   | `setFocus() => Promise<void>`                                                                                |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                        | Description                                                                                              |
-| --------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `--background`              | Background of the input                                                                                  |
-| `--color`                   | Color of the input text                                                                                  |
-| `--padding-bottom`          | Bottom padding of the input                                                                              |
-| `--padding-end`             | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input |
-| `--padding-start`           | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input |
-| `--padding-top`             | Top padding of the input                                                                                 |
-| `--placeholder-color`       | Color of the input placeholder text                                                                      |
-| `--placeholder-font-style`  | Font style of the input placeholder text                                                                 |
-| `--placeholder-font-weight` | Font weight of the input placeholder text                                                                |
-| `--placeholder-opacity`     | Opacity of the input placeholder text                                                                    |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/item-divider.md b/versioned_docs/version-v5/api/item-divider.md
index e1ff65306db..96791a1d85f 100644
--- a/versioned_docs/version-v5/api/item-divider.md
+++ b/versioned_docs/version-v5/api/item-divider.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-item-divider'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v5/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v5/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v5/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/item-divider/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/item-divider/slots.md';
+
 # ion-item-divider
 
 Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items.
@@ -274,52 +281,24 @@ export class ItemDividerExample {
 
 ## Properties
 
-### color
+<Props />
+
+## Events
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Events />
 
-### mode
+## Methods
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Methods />
 
-### sticky
+## CSS Shadow Parts
 
-|                 |                                                                                                                                                                                                                                                        |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | When it's set to `true`, the item-divider will stay visible when it reaches the top<br />of the viewport until the next `ion-item-divider` replaces it.<br /><br />This feature relies in `position:sticky`:<br />https://caniuse.com/#feat=css-sticky |
-| **Attribute**   | `sticky`                                                                                                                                                                                                                                               |
-| **Type**        | `boolean`                                                                                                                                                                                                                                              |
-| **Default**     | `false`                                                                                                                                                                                                                                                |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                     | Description                                                                                                     |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| `--background`           | Background of the item divider                                                                                  |
-| `--color`                | Color of the item divider                                                                                       |
-| `--inner-padding-bottom` | Bottom inner padding of the item divider                                                                        |
-| `--inner-padding-end`    | End inner padding of the item divider                                                                           |
-| `--inner-padding-start`  | Start inner padding of the item divider                                                                         |
-| `--inner-padding-top`    | Top inner padding of the item divider                                                                           |
-| `--padding-bottom`       | Bottom padding of the item divider                                                                              |
-| `--padding-end`          | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider |
-| `--padding-start`        | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider |
-| `--padding-top`          | Top padding of the item divider                                                                                 |
+<CustomProps />
 
 ## Slots
 
-| Name    | Description                                                                        |
-| ------- | ---------------------------------------------------------------------------------- |
-| ``      | Content is placed between the named slots if provided without a slot.              |
-| `end`   | Content is placed to the right of the divider text in LTR, and to the left in RTL. |
-| `start` | Content is placed to the left of the divider text in LTR, and to the right in RTL. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/item-group.md b/versioned_docs/version-v5/api/item-group.md
index 933806a402f..d0452a390d6 100644
--- a/versioned_docs/version-v5/api/item-group.md
+++ b/versioned_docs/version-v5/api/item-group.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-item-group'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/item-group/props.md';
+import Events from '@ionic-internal/component-api/v5/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v5/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v5/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/item-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/item-group/slots.md';
+
 # ion-item-group
 
 Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items.
@@ -558,3 +565,27 @@ export class ItemGroupExample {
 </TabItem>
 
 </Tabs>
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/item-option.md b/versioned_docs/version-v5/api/item-option.md
index e7fe775368a..258d25563f1 100644
--- a/versioned_docs/version-v5/api/item-option.md
+++ b/versioned_docs/version-v5/api/item-option.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-item-option'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/item-option/props.md';
+import Events from '@ionic-internal/component-api/v5/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v5/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v5/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/item-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/item-option/slots.md';
+
 # ion-item-option
 
 The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
@@ -13,107 +20,24 @@ action for the item.
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the item option. |
-| **Attribute**   | `disabled`                                                |
-| **Type**        | `boolean`                                                 |
-| **Default**     | `false`                                                   |
-
-### download
-
-|                 |                                                                                                                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This attribute instructs browsers to download a URL instead of navigating to<br />it, so the user will be prompted to save it as a local file. If the attribute<br />has a value, it is used as the pre-filled file name in the Save prompt<br />(the user can still change the file name if they want). |
-| **Attribute**   | `download`                                                                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                    |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                              |
-
-### expandable
-
-|                 |                                                                                               |
-| --------------- | --------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the option will expand to take up the available width and cover any other options. |
-| **Attribute**   | `expandable`                                                                                  |
-| **Type**        | `boolean`                                                                                     |
-| **Default**     | `false`                                                                                       |
-
-### href
-
-|                 |                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Contains a URL or a URL fragment that the hyperlink points to.<br />If this property is set, an anchor tag will be rendered. |
-| **Attribute**   | `href`                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                        |
-| **Default**     | `undefined`                                                                                                                  |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### rel
-
-|                 |                                                                                                                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies the relationship of the target object to the link object.<br />The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). |
-| **Attribute**   | `rel`                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                                                                 |
-
-### target
-
-|                 |                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies where to display the linked URL.<br />Only applies when an `href` is provided.<br />Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute**   | `target`                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                   |
-
-### type
-
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | The type of the button.           |
-| **Attribute**   | `type`                            |
-| **Type**        | `"button" \| "reset" \| "submit"` |
-| **Default**     | `'button'`                        |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name     | Description                                                             |
-| -------- | ----------------------------------------------------------------------- |
-| `native` | The native HTML button or anchor element that wraps all child elements. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name           | Description                   |
-| -------------- | ----------------------------- |
-| `--background` | Background of the item option |
-| `--color`      | Color of the item option      |
+<CustomProps />
 
 ## Slots
 
-| Name        | Description                                                                       |
-| ----------- | --------------------------------------------------------------------------------- |
-| ``          | Content is placed between the named slots if provided without a slot.             |
-| `bottom`    | Content is placed below the option text.                                          |
-| `end`       | Content is placed to the right of the option text in LTR, and to the left in RTL. |
-| `icon-only` | Should be used on an icon in an option that has no text.                          |
-| `start`     | Content is placed to the left of the option text in LTR, and to the right in RTL. |
-| `top`       | Content is placed above the option text.                                          |
+<Slots />
diff --git a/versioned_docs/version-v5/api/item-options.md b/versioned_docs/version-v5/api/item-options.md
index 238485f673f..570a3a48299 100644
--- a/versioned_docs/version-v5/api/item-options.md
+++ b/versioned_docs/version-v5/api/item-options.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-item-options'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/item-options/props.md';
+import Events from '@ionic-internal/component-api/v5/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v5/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v5/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/item-options/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/item-options/slots.md';
+
 # ion-item-options
 
 The option buttons for an `ion-item-sliding`. These buttons can be placed either on the [start or end side](#side-description).
@@ -19,17 +26,24 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a
 
 ## Properties
 
-### side
-
-|                 |                                                                                                                                                             |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. |
-| **Attribute**   | `side`                                                                                                                                                      |
-| **Type**        | `"end" \| "start"`                                                                                                                                          |
-| **Default**     | `'end'`                                                                                                                                                     |
+<Props />
 
 ## Events
 
-| Name       | Description                                  |
-| ---------- | -------------------------------------------- |
-| `ionSwipe` | Emitted when the item has been fully swiped. |
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/item-sliding.md b/versioned_docs/version-v5/api/item-sliding.md
index 6c5e5b76b7f..f9c56ffb372 100644
--- a/versioned_docs/version-v5/api/item-sliding.md
+++ b/versioned_docs/version-v5/api/item-sliding.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-item-sliding'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v5/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v5/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v5/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/item-sliding/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/item-sliding/slots.md';
+
 # ion-item-sliding
 
 A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.md) component as a child. All options to reveal should be placed in the [item options](item-options.md) element.
@@ -791,54 +798,24 @@ export class ItemSlidingExample {
 
 ## Properties
 
-### disabled
-
-|                 |                                                            |
-| --------------- | ---------------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the sliding item. |
-| **Attribute**   | `disabled`                                                 |
-| **Type**        | `boolean`                                                  |
-| **Default**     | `false`                                                    |
+<Props />
 
 ## Events
 
-| Name      | Description                                |
-| --------- | ------------------------------------------ |
-| `ionDrag` | Emitted when the sliding position changes. |
+<Events />
 
 ## Methods
 
-### close
-
-|                 |                                                                            |
-| --------------- | -------------------------------------------------------------------------- |
-| **Description** | Close the sliding item. Items can also be closed from the [List](list.md). |
-| **Signature**   | `close() => Promise<void>`                                                 |
-
-### closeOpened
-
-|                 |                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------- |
-| **Description** | Close all of the sliding items in the list. Items can also be closed from the [List](list.md). |
-| **Signature**   | `closeOpened() => Promise<boolean>`                                                            |
+<Methods />
 
-### getOpenAmount
+## CSS Shadow Parts
 
-|                 |                                            |
-| --------------- | ------------------------------------------ |
-| **Description** | Get the amount the item is open in pixels. |
-| **Signature**   | `getOpenAmount() => Promise<number>`       |
+<Parts />
 
-### getSlidingRatio
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Get the ratio of the open amount of the item compared to the width of the options.<br />If the number returned is positive, then the options on the right side are open.<br />If the number returned is negative, then the options on the left side are open.<br />If the absolute value of the number is greater than 1, the item is open more than<br />the width of the options. |
-| **Signature**   | `getSlidingRatio() => Promise<number>`                                                                                                                                                                                                                                                                                                                                              |
+<CustomProps />
 
-### open
+## Slots
 
-|                 |                                                  |
-| --------------- | ------------------------------------------------ |
-| **Description** | Open the sliding item.                           |
-| **Signature**   | `open(side: Side \| undefined) => Promise<void>` |
+<Slots />
diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.md
index 94fce2549fd..0634078f29d 100644
--- a/versioned_docs/version-v5/api/item.md
+++ b/versioned_docs/version-v5/api/item.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/item/props.md';
+import Events from '@ionic-internal/component-api/v5/item/events.md';
+import Methods from '@ionic-internal/component-api/v5/item/methods.md';
+import Parts from '@ionic-internal/component-api/v5/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/item/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/item/slots.md';
+
 # ion-item
 
 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 with other items. Items can be swiped, deleted, reordered, edited, and more.
@@ -1686,183 +1693,24 @@ export class ItemExample {
 
 ## Properties
 
-### button
-
-|                 |                                                                         |
-| --------------- | ----------------------------------------------------------------------- |
-| **Description** | If `true`, a button tag will be rendered and the item will be tappable. |
-| **Attribute**   | `button`                                                                |
-| **Type**        | `boolean`                                                               |
-| **Default**     | `false`                                                                 |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### detail
-
-|                 |                                                                                                                                                       |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`<br />is `ios` and an `href` or `button` property is present. |
-| **Attribute**   | `detail`                                                                                                                                              |
-| **Type**        | `boolean \| undefined`                                                                                                                                |
-| **Default**     | `undefined`                                                                                                                                           |
-
-### detailIcon
-
-|                 |                                                 |
-| --------------- | ----------------------------------------------- |
-| **Description** | The icon to use when `detail` is set to `true`. |
-| **Attribute**   | `detail-icon`                                   |
-| **Type**        | `string`                                        |
-| **Default**     | `'chevron-forward'`                             |
-
-### disabled
-
-|                 |                                                    |
-| --------------- | -------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the item. |
-| **Attribute**   | `disabled`                                         |
-| **Type**        | `boolean`                                          |
-| **Default**     | `false`                                            |
-
-### download
-
-|                 |                                                                                                                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This attribute instructs browsers to download a URL instead of navigating to<br />it, so the user will be prompted to save it as a local file. If the attribute<br />has a value, it is used as the pre-filled file name in the Save prompt<br />(the user can still change the file name if they want). |
-| **Attribute**   | `download`                                                                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                    |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                              |
-
-### href
-
-|                 |                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Contains a URL or a URL fragment that the hyperlink points to.<br />If this property is set, an anchor tag will be rendered. |
-| **Attribute**   | `href`                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                        |
-| **Default**     | `undefined`                                                                                                                  |
-
-### lines
-
-|                 |                                                        |
-| --------------- | ------------------------------------------------------ |
-| **Description** | How the bottom border should be displayed on the item. |
-| **Attribute**   | `lines`                                                |
-| **Type**        | `"full" \| "inset" \| "none" \| undefined`             |
-| **Default**     | `undefined`                                            |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### rel
-
-|                 |                                                                                                                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies the relationship of the target object to the link object.<br />The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). |
-| **Attribute**   | `rel`                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                                                                 |
-
-### routerAnimation
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition animation when navigating to<br />another page using `href`. |
-| **Attribute**   | `undefined`                                                                                                   |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                       |
-| **Default**     | `undefined`                                                                                                   |
-
-### routerDirection
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition direction when navigating to<br />another page using `href`. |
-| **Attribute**   | `router-direction`                                                                                            |
-| **Type**        | `"back" \| "forward" \| "root"`                                                                               |
-| **Default**     | `'forward'`                                                                                                   |
-
-### target
-
-|                 |                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies where to display the linked URL.<br />Only applies when an `href` is provided.<br />Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute**   | `target`                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                   |
-
-### type
-
-|                 |                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------ |
-| **Description** | The type of the button. Only used when an `onclick` or `button` property is present. |
-| **Attribute**   | `type`                                                                               |
-| **Type**        | `"button" \| "reset" \| "submit"`                                                    |
-| **Default**     | `'button'`                                                                           |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name          | Description                                                                  |
-| ------------- | ---------------------------------------------------------------------------- |
-| `detail-icon` | The chevron icon for the item. Only applies when `detail="true"`.            |
-| `native`      | The native HTML button, anchor or div element that wraps all child elements. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                             | Description                                                                                                   |
-| -------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `--background`                   | Background of the item                                                                                        |
-| `--background-activated`         | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.       |
-| `--background-activated-opacity` | Opacity of the item background when pressed                                                                   |
-| `--background-focused`           | Background of the item when focused with the tab key                                                          |
-| `--background-focused-opacity`   | Opacity of the item background when focused with the tab key                                                  |
-| `--background-hover`             | Background of the item on hover                                                                               |
-| `--background-hover-opacity`     | Opacity of the background of the item on hover                                                                |
-| `--border-color`                 | Color of the item border                                                                                      |
-| `--border-radius`                | Radius of the item border                                                                                     |
-| `--border-style`                 | Style of the item border                                                                                      |
-| `--border-width`                 | Width of the item border                                                                                      |
-| `--color`                        | Color of the item                                                                                             |
-| `--color-activated`              | Color of the item when pressed                                                                                |
-| `--color-focused`                | Color of the item when focused with the tab key                                                               |
-| `--color-hover`                  | Color of the item on hover                                                                                    |
-| `--detail-icon-color`            | Color of the item detail icon                                                                                 |
-| `--detail-icon-font-size`        | Font size of the item detail icon                                                                             |
-| `--detail-icon-opacity`          | Opacity of the item detail icon                                                                               |
-| `--highlight-color-focused`      | The color of the highlight on the item when focused                                                           |
-| `--highlight-color-invalid`      | The color of the highlight on the item when invalid                                                           |
-| `--highlight-color-valid`        | The color of the highlight on the item when valid                                                             |
-| `--highlight-height`             | The height of the highlight on the item                                                                       |
-| `--inner-border-width`           | Width of the item inner border                                                                                |
-| `--inner-box-shadow`             | Box shadow of the item inner                                                                                  |
-| `--inner-padding-bottom`         | Bottom padding of the item inner                                                                              |
-| `--inner-padding-end`            | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner |
-| `--inner-padding-start`          | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner |
-| `--inner-padding-top`            | Top padding of the item inner                                                                                 |
-| `--min-height`                   | Minimum height of the item                                                                                    |
-| `--padding-bottom`               | Bottom padding of the item                                                                                    |
-| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item       |
-| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item       |
-| `--padding-top`                  | Top padding of the item                                                                                       |
-| `--ripple-color`                 | Color of the item ripple effect                                                                               |
-| `--transition`                   | Transition of the item                                                                                        |
+<CustomProps />
 
 ## Slots
 
-| Name    | Description                                                                     |
-| ------- | ------------------------------------------------------------------------------- |
-| ``      | Content is placed between the named slots if provided without a slot.           |
-| `end`   | Content is placed to the right of the item text in LTR, and to the left in RTL. |
-| `start` | Content is placed to the left of the item text in LTR, and to the right in RTL. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/label.md b/versioned_docs/version-v5/api/label.md
index e69b075440f..c7594979a4e 100644
--- a/versioned_docs/version-v5/api/label.md
+++ b/versioned_docs/version-v5/api/label.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-label'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/label/props.md';
+import Events from '@ionic-internal/component-api/v5/label/events.md';
+import Methods from '@ionic-internal/component-api/v5/label/methods.md';
+import Parts from '@ionic-internal/component-api/v5/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/label/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/label/slots.md';
+
 # ion-label
 
 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.
@@ -351,35 +358,24 @@ export class LabelExample {
 
 ## Properties
 
-### color
+<Props />
+
+## Events
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Events />
 
-### mode
+## Methods
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Methods />
 
-### position
+## CSS Shadow Parts
 
-|                 |                                                                         |
-| --------------- | ----------------------------------------------------------------------- |
-| **Description** | The position determines where and how the label behaves inside an item. |
-| **Attribute**   | `position`                                                              |
-| **Type**        | `"fixed" \| "floating" \| "stacked" \| undefined`                       |
-| **Default**     | `undefined`                                                             |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name      | Description        |
-| --------- | ------------------ |
-| `--color` | Color of the label |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/list-header.md b/versioned_docs/version-v5/api/list-header.md
index 4e1498df2af..d674b14a0c6 100644
--- a/versioned_docs/version-v5/api/list-header.md
+++ b/versioned_docs/version-v5/api/list-header.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-list-header'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/list-header/props.md';
+import Events from '@ionic-internal/component-api/v5/list-header/events.md';
+import Methods from '@ionic-internal/component-api/v5/list-header/methods.md';
+import Parts from '@ionic-internal/component-api/v5/list-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/list-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/list-header/slots.md';
+
 # ion-list-header
 
 ListHeader a header component for a list.
@@ -393,40 +400,24 @@ export class ListHeaderExample {
 
 ## Properties
 
-### color
+<Props />
+
+## Events
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Events />
 
-### lines
+## Methods
 
-|                 |                                                               |
-| --------------- | ------------------------------------------------------------- |
-| **Description** | How the bottom border should be displayed on the list header. |
-| **Attribute**   | `lines`                                                       |
-| **Type**        | `"full" \| "inset" \| "none" \| undefined`                    |
-| **Default**     | `undefined`                                                   |
+<Methods />
 
-### mode
+## CSS Shadow Parts
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                   | Description                           |
-| ---------------------- | ------------------------------------- |
-| `--background`         | Background of the list header         |
-| `--border-color`       | Color of the list header border       |
-| `--border-style`       | Style of the list header border       |
-| `--border-width`       | Width of the list header border       |
-| `--color`              | Color of the list header text         |
-| `--inner-border-width` | Width of the inner list header border |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/list.md b/versioned_docs/version-v5/api/list.md
index 007d2b42236..4f483d30931 100644
--- a/versioned_docs/version-v5/api/list.md
+++ b/versioned_docs/version-v5/api/list.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/list/props.md';
+import Events from '@ionic-internal/component-api/v5/list/events.md';
+import Methods from '@ionic-internal/component-api/v5/list/methods.md';
+import Parts from '@ionic-internal/component-api/v5/list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/list/slots.md';
+
 # ion-list
 
 Lists are made up of multiple rows of items which can contain text, buttons, toggles,
@@ -420,38 +427,24 @@ export class ListExample {
 
 ## Properties
 
-### inset
+<Props />
 
-|                 |                                                                     |
-| --------------- | ------------------------------------------------------------------- |
-| **Description** | If `true`, the list will have margin around it and rounded corners. |
-| **Attribute**   | `inset`                                                             |
-| **Type**        | `boolean`                                                           |
-| **Default**     | `false`                                                             |
+## Events
 
-### lines
+<Events />
 
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | How the bottom border should be displayed on all items. |
-| **Attribute**   | `lines`                                                 |
-| **Type**        | `"full" \| "inset" \| "none" \| undefined`              |
-| **Default**     | `undefined`                                             |
+## Methods
 
-### mode
+<Methods />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+## CSS Shadow Parts
 
-## Methods
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
 
-### closeSlidingItems
+## Slots
 
-|                 |                                                                                                                                                                     |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `ion-item-sliding` are used inside the list, this method closes<br />any open sliding item.<br /><br />Returns `true` if an actual `ion-item-sliding` is closed. |
-| **Signature**   | `closeSlidingItems() => Promise<boolean>`                                                                                                                           |
+<Slots />
diff --git a/versioned_docs/version-v5/api/loading.md b/versioned_docs/version-v5/api/loading.md
index ec3606ab74e..1cdddf62752 100644
--- a/versioned_docs/version-v5/api/loading.md
+++ b/versioned_docs/version-v5/api/loading.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/loading/props.md';
+import Events from '@ionic-internal/component-api/v5/loading/events.md';
+import Methods from '@ionic-internal/component-api/v5/loading/methods.md';
+import Parts from '@ionic-internal/component-api/v5/loading/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/loading/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/loading/slots.md';
+
 # ion-loading
 
 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.
@@ -351,163 +358,24 @@ Developers can also use this component directly in their template:
 
 ## Properties
 
-### animated
-
-|                 |                                                |
-| --------------- | ---------------------------------------------- |
-| **Description** | If `true`, the loading indicator will animate. |
-| **Attribute**   | `animated`                                     |
-| **Type**        | `boolean`                                      |
-| **Default**     | `true`                                         |
-
-### backdropDismiss
-
-|                 |                                                                                  |
-| --------------- | -------------------------------------------------------------------------------- |
-| **Description** | If `true`, the loading indicator will be dismissed when the backdrop is clicked. |
-| **Attribute**   | `backdrop-dismiss`                                                               |
-| **Type**        | `boolean`                                                                        |
-| **Default**     | `false`                                                                          |
-
-### cssClass
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are<br />provided they should be separated by spaces. |
-| **Attribute**   | `css-class`                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                           |
-
-### duration
-
-|                 |                                                                         |
-| --------------- | ----------------------------------------------------------------------- |
-| **Description** | Number of milliseconds to wait before dismissing the loading indicator. |
-| **Attribute**   | `duration`                                                              |
-| **Type**        | `number`                                                                |
-| **Default**     | `0`                                                                     |
-
-### enterAnimation
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | Animation to use when the loading indicator is presented. |
-| **Attribute**   | `undefined`                                               |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`   |
-| **Default**     | `undefined`                                               |
-
-### keyboardClose
-
-|                 |                                                                                        |
-| --------------- | -------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. |
-| **Attribute**   | `keyboard-close`                                                                       |
-| **Type**        | `boolean`                                                                              |
-| **Default**     | `true`                                                                                 |
-
-### leaveAnimation
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | Animation to use when the loading indicator is dismissed. |
-| **Attribute**   | `undefined`                                               |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`   |
-| **Default**     | `undefined`                                               |
-
-### message
-
-|                 |                                                            |
-| --------------- | ---------------------------------------------------------- |
-| **Description** | Optional text content to display in the loading indicator. |
-| **Attribute**   | `message`                                                  |
-| **Type**        | `IonicSafeString \| string \| undefined`                   |
-| **Default**     | `undefined`                                                |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### showBackdrop
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | If `true`, a backdrop will be displayed behind the loading indicator. |
-| **Attribute**   | `show-backdrop`                                                       |
-| **Type**        | `boolean`                                                             |
-| **Default**     | `true`                                                                |
-
-### spinner
-
-|                 |                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------- |
-| **Description** | The name of the spinner to display.                                                                             |
-| **Attribute**   | `spinner`                                                                                                       |
-| **Type**        | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` |
-| **Default**     | `undefined`                                                                                                     |
-
-### translucent
-
-|                 |                                                                                                                                                                                                                                            |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | If `true`, the loading indicator will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                              |
-| **Type**        | `boolean`                                                                                                                                                                                                                                  |
-| **Default**     | `false`                                                                                                                                                                                                                                    |
+<Props />
 
 ## Events
 
-| Name                    | Description                               |
-| ----------------------- | ----------------------------------------- |
-| `ionLoadingDidDismiss`  | Emitted after the loading has dismissed.  |
-| `ionLoadingDidPresent`  | Emitted after the loading has presented.  |
-| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. |
-| `ionLoadingWillPresent` | Emitted before the loading has presented. |
+<Events />
 
 ## Methods
 
-### dismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | Dismiss the loading overlay after it has been presented.              |
-| **Signature**   | `dismiss(data?: any, role?: string \| undefined) => Promise<boolean>` |
-
-### onDidDismiss
+<Methods />
 
-|                 |                                                               |
-| --------------- | ------------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the loading did dismiss. |
-| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`   |
+## CSS Shadow Parts
 
-### onWillDismiss
+<Parts />
 
-|                 |                                                                |
-| --------------- | -------------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the loading will dismiss. |
-| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`   |
-
-### present
+## CSS Custom Properties
 
-|                 |                                                        |
-| --------------- | ------------------------------------------------------ |
-| **Description** | Present the loading overlay after it has been created. |
-| **Signature**   | `present() => Promise<void>`                           |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name                 | Description                          |
-| -------------------- | ------------------------------------ |
-| `--backdrop-opacity` | Opacity of the backdrop              |
-| `--background`       | Background of the loading dialog     |
-| `--height`           | Height of the loading dialog         |
-| `--max-height`       | Maximum height of the loading dialog |
-| `--max-width`        | Maximum width of the loading dialog  |
-| `--min-height`       | Minimum height of the loading dialog |
-| `--min-width`        | Minimum width of the loading dialog  |
-| `--spinner-color`    | Color of the loading spinner         |
-| `--width`            | Width of the loading dialog          |
+<Slots />
diff --git a/versioned_docs/version-v5/api/menu-button.md b/versioned_docs/version-v5/api/menu-button.md
index 0fae697af58..cc27f399f79 100644
--- a/versioned_docs/version-v5/api/menu-button.md
+++ b/versioned_docs/version-v5/api/menu-button.md
@@ -5,87 +5,37 @@ sidebar_label: 'ion-menu-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/menu-button/props.md';
+import Events from '@ionic-internal/component-api/v5/menu-button/events.md';
+import Methods from '@ionic-internal/component-api/v5/menu-button/methods.md';
+import Parts from '@ionic-internal/component-api/v5/menu-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/menu-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/menu-button/slots.md';
+
 # ion-menu-button
 
 Menu Button is component that automatically creates the icon and functionality to open a menu on a page.
 
 ## Properties
 
-### autoHide
-
-|                 |                                                                               |
-| --------------- | ----------------------------------------------------------------------------- |
-| **Description** | Automatically hides the menu button when the corresponding menu is not active |
-| **Attribute**   | `auto-hide`                                                                   |
-| **Type**        | `boolean`                                                                     |
-| **Default**     | `true`                                                                        |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
+<Props />
 
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the menu button. |
-| **Attribute**   | `disabled`                                                |
-| **Type**        | `boolean`                                                 |
-| **Default**     | `false`                                                   |
+## Events
 
-### menu
+<Events />
 
-|                 |                                                                                                                                                        |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle |
-| **Attribute**   | `menu`                                                                                                                                                 |
-| **Type**        | `string \| undefined`                                                                                                                                  |
-| **Default**     | `undefined`                                                                                                                                            |
+## Methods
 
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### type
-
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | The type of the button.           |
-| **Attribute**   | `type`                            |
-| **Type**        | `"button" \| "reset" \| "submit"` |
-| **Default**     | `'button'`                        |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name     | Description                                                   |
-| -------- | ------------------------------------------------------------- |
-| `icon`   | The menu button icon (uses ion-icon).                         |
-| `native` | The native HTML button element that wraps all child elements. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                           | Description                                                                                               |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------- |
-| `--background`                 | Background of the menu button                                                                             |
-| `--background-focused`         | Background of the menu button when focused with the tab key                                               |
-| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key                                       |
-| `--background-hover`           | Background of the menu button on hover                                                                    |
-| `--background-hover-opacity`   | Opacity of the background on hover                                                                        |
-| `--border-radius`              | Border radius of the menu button                                                                          |
-| `--color`                      | Color of the menu button                                                                                  |
-| `--color-focused`              | Color of the menu button when focused with the tab key                                                    |
-| `--color-hover`                | Color of the menu button on hover                                                                         |
-| `--padding-bottom`             | Bottom padding of the button                                                                              |
-| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`                | Top padding of the button                                                                                 |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/menu-toggle.md b/versioned_docs/version-v5/api/menu-toggle.md
index 80d144c8b60..b810836b81a 100644
--- a/versioned_docs/version-v5/api/menu-toggle.md
+++ b/versioned_docs/version-v5/api/menu-toggle.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-menu-toggle'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/menu-toggle/props.md';
+import Events from '@ionic-internal/component-api/v5/menu-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v5/menu-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v5/menu-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/menu-toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/menu-toggle/slots.md';
+
 # ion-menu-toggle
 
 The MenuToggle component can be used to toggle a menu open or closed.
@@ -15,20 +22,24 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr
 
 ## Properties
 
-### autoHide
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Automatically hides the content when the corresponding menu is not active.<br /><br />By default, it's `true`. Change it to `false` in order to<br />keep `ion-menu-toggle` always visible regardless the state of the menu. |
-| **Attribute**   | `auto-hide`                                                                                                                                                                                                                  |
-| **Type**        | `boolean`                                                                                                                                                                                                                    |
-| **Default**     | `true`                                                                                                                                                                                                                       |
+<CustomProps />
 
-### menu
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Optional property that maps to a Menu's `menuId` prop.<br />Can also be `start` or `end` for the menu side.<br />This is used to find the correct menu to toggle.<br /><br />If this property is not used, `ion-menu-toggle` will toggle the<br />first menu that is active. |
-| **Attribute**   | `menu`                                                                                                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                        |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                  |
+<Slots />
diff --git a/versioned_docs/version-v5/api/menu.md b/versioned_docs/version-v5/api/menu.md
index e897499f7a8..19fc5ca7349 100644
--- a/versioned_docs/version-v5/api/menu.md
+++ b/versioned_docs/version-v5/api/menu.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/menu/props.md';
+import Events from '@ionic-internal/component-api/v5/menu/events.md';
+import Methods from '@ionic-internal/component-api/v5/menu/methods.md';
+import Parts from '@ionic-internal/component-api/v5/menu/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/menu/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/menu/slots.md';
+
 # ion-menu
 
 The Menu component is a navigation drawer that slides in from the side of the current view.
@@ -494,137 +501,24 @@ export class MenuExample {
 
 ## Properties
 
-### contentId
-
-|                 |                                                                                                                                                                                                                                                            |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The `id` of the main content. When using<br />a router this is typically `ion-router-outlet`.<br />When not using a router, this is typically<br />your main view's `ion-content`. This is not the<br />id of the `ion-content` inside of your `ion-menu`. |
-| **Attribute**   | `content-id`                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                      |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                |
-
-### disabled
-
-|                 |                                  |
-| --------------- | -------------------------------- |
-| **Description** | If `true`, the menu is disabled. |
-| **Attribute**   | `disabled`                       |
-| **Type**        | `boolean`                        |
-| **Default**     | `false`                          |
-
-### maxEdgeStart
-
-|                 |                                                                                                                         |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The edge threshold for dragging the menu open.<br />If a drag/swipe happens over this value, the menu is not triggered. |
-| **Attribute**   | `max-edge-start`                                                                                                        |
-| **Type**        | `number`                                                                                                                |
-| **Default**     | `50`                                                                                                                    |
-
-### menuId
-
-|                 |                       |
-| --------------- | --------------------- |
-| **Description** | An id for the menu.   |
-| **Attribute**   | `menu-id`             |
-| **Type**        | `string \| undefined` |
-| **Default**     | `undefined`           |
-
-### side
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | Which side of the view the menu should be placed. |
-| **Attribute**   | `side`                                            |
-| **Type**        | `"end" \| "start"`                                |
-| **Default**     | `'start'`                                         |
-
-### swipeGesture
-
-|                 |                                         |
-| --------------- | --------------------------------------- |
-| **Description** | If `true`, swiping the menu is enabled. |
-| **Attribute**   | `swipe-gesture`                         |
-| **Type**        | `boolean`                               |
-| **Default**     | `true`                                  |
-
-### type
-
-|                 |                                                                                          |
-| --------------- | ---------------------------------------------------------------------------------------- |
-| **Description** | The display type of the menu.<br />Available options: `"overlay"`, `"reveal"`, `"push"`. |
-| **Attribute**   | `type`                                                                                   |
-| **Type**        | `string \| undefined`                                                                    |
-| **Default**     | `undefined`                                                                              |
+<Props />
 
 ## Events
 
-| Name           | Description                                  |
-| -------------- | -------------------------------------------- |
-| `ionDidClose`  | Emitted when the menu is closed.             |
-| `ionDidOpen`   | Emitted when the menu is open.               |
-| `ionWillClose` | Emitted when the menu is about to be closed. |
-| `ionWillOpen`  | Emitted when the menu is about to be opened. |
+<Events />
 
 ## Methods
 
-### close
-
-|                 |                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------- |
-| **Description** | Closes the menu. If the menu is already closed or it can't be closed,<br />it returns `false`. |
-| **Signature**   | `close(animated?: boolean) => Promise<boolean>`                                                |
-
-### isActive
-
-|                 |                                                                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Returns `true` is the menu is active.<br /><br />A menu is active when it can be opened or closed, meaning it's enabled<br />and it's not part of a `ion-split-pane`. |
-| **Signature**   | `isActive() => Promise<boolean>`                                                                                                                                      |
-
-### isOpen
-
-|                 |                                     |
-| --------------- | ----------------------------------- |
-| **Description** | Returns `true` is the menu is open. |
-| **Signature**   | `isOpen() => Promise<boolean>`      |
-
-### open
-
-|                 |                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------- |
-| **Description** | Opens the menu. If the menu is already open or it can't be opened,<br />it returns `false`. |
-| **Signature**   | `open(animated?: boolean) => Promise<boolean>`                                              |
-
-### setOpen
-
-|                 |                                                                                                        |
-| --------------- | ------------------------------------------------------------------------------------------------------ |
-| **Description** | Opens or closes the button.<br />If the operation can't be completed successfully, it returns `false`. |
-| **Signature**   | `setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>`                                 |
-
-### toggle
-
-|                 |                                                                                                                                                                                   |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.<br />If the operation can't be completed successfully, it returns `false`. |
-| **Signature**   | `toggle(animated?: boolean) => Promise<boolean>`                                                                                                                                  |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name        | Description                                                            |
-| ----------- | ---------------------------------------------------------------------- |
-| `backdrop`  | The backdrop that appears over the main content when the menu is open. |
-| `container` | The container for the menu content.                                    |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name           | Description                |
-| -------------- | -------------------------- |
-| `--background` | Background of the menu     |
-| `--height`     | Height of the menu         |
-| `--max-height` | Maximum height of the menu |
-| `--max-width`  | Maximum width of the menu  |
-| `--min-height` | Minimum height of the menu |
-| `--min-width`  | Minimum width of the menu  |
-| `--width`      | Width of the menu          |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/modal.md b/versioned_docs/version-v5/api/modal.md
index 950fd13faf8..6d1a76c21e5 100644
--- a/versioned_docs/version-v5/api/modal.md
+++ b/versioned_docs/version-v5/api/modal.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/modal/props.md';
+import Events from '@ionic-internal/component-api/v5/modal/events.md';
+import Methods from '@ionic-internal/component-api/v5/modal/methods.md';
+import Parts from '@ionic-internal/component-api/v5/modal/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/modal/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/modal/slots.md';
+
 # ion-modal
 
 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.
@@ -745,166 +752,24 @@ Developers can also use this component directly in their template:
 
 ## Properties
 
-### animated
-
-|                 |                                    |
-| --------------- | ---------------------------------- |
-| **Description** | If `true`, the modal will animate. |
-| **Attribute**   | `animated`                         |
-| **Type**        | `boolean`                          |
-| **Default**     | `true`                             |
-
-### backdropDismiss
-
-|                 |                                                                      |
-| --------------- | -------------------------------------------------------------------- |
-| **Description** | If `true`, the modal will be dismissed when the backdrop is clicked. |
-| **Attribute**   | `backdrop-dismiss`                                                   |
-| **Type**        | `boolean`                                                            |
-| **Default**     | `true`                                                               |
-
-### component
-
-|                 |                                               |
-| --------------- | --------------------------------------------- |
-| **Description** | The component to display inside of the modal. |
-| **Attribute**   | `component`                                   |
-| **Type**        | `Function \| HTMLElement \| null \| string`   |
-| **Default**     | `undefined`                                   |
-
-### componentProps
-
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | The data to pass to the modal component. |
-| **Attribute**   | `undefined`                              |
-| **Type**        | `undefined \| { [key: string]: any; }`   |
-| **Default**     | `undefined`                              |
-
-### cssClass
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are<br />provided they should be separated by spaces. |
-| **Attribute**   | `css-class`                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                           |
-
-### enterAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the modal is presented.           |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### keyboardClose
-
-|                 |                                                                                        |
-| --------------- | -------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. |
-| **Attribute**   | `keyboard-close`                                                                       |
-| **Type**        | `boolean`                                                                              |
-| **Default**     | `true`                                                                                 |
-
-### leaveAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the modal is dismissed.           |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### presentingElement
-
-|                 |                                                                                                                                                                        |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The element that presented the modal. This is used for card presentation effects<br />and for stacking multiple modals on top of each other. Only applies in iOS mode. |
-| **Attribute**   | `undefined`                                                                                                                                                            |
-| **Type**        | `HTMLElement \| undefined`                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                            |
-
-### showBackdrop
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | If `true`, a backdrop will be displayed behind the modal. |
-| **Attribute**   | `show-backdrop`                                           |
-| **Type**        | `boolean`                                                 |
-| **Default**     | `true`                                                    |
-
-### swipeToClose
-
-|                 |                                                                          |
-| --------------- | ------------------------------------------------------------------------ |
-| **Description** | If `true`, the modal can be swiped to dismiss. Only applies in iOS mode. |
-| **Attribute**   | `swipe-to-close`                                                         |
-| **Type**        | `boolean`                                                                |
-| **Default**     | `false`                                                                  |
+<Props />
 
 ## Events
 
-| Name                  | Description                             |
-| --------------------- | --------------------------------------- |
-| `ionModalDidDismiss`  | Emitted after the modal has dismissed.  |
-| `ionModalDidPresent`  | Emitted after the modal has presented.  |
-| `ionModalWillDismiss` | Emitted before the modal has dismissed. |
-| `ionModalWillPresent` | Emitted before the modal has presented. |
+<Events />
 
 ## Methods
 
-### dismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | Dismiss the modal overlay after it has been presented.                |
-| **Signature**   | `dismiss(data?: any, role?: string \| undefined) => Promise<boolean>` |
-
-### onDidDismiss
+<Methods />
 
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the modal did dismiss. |
-| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
+## CSS Shadow Parts
 
-### onWillDismiss
+<Parts />
 
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | Returns a promise that resolves when the modal will dismiss. |
-| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
-### present
+## CSS Custom Properties
 
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | Present the modal overlay after it has been created. |
-| **Signature**   | `present() => Promise<void>`                         |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name                 | Description                        |
-| -------------------- | ---------------------------------- |
-| `--backdrop-opacity` | Opacity of the backdrop            |
-| `--background`       | Background of the modal content    |
-| `--border-color`     | Border color of the modal content  |
-| `--border-radius`    | Border radius of the modal content |
-| `--border-style`     | Border style of the modal content  |
-| `--border-width`     | Border width of the modal content  |
-| `--height`           | Height of the modal                |
-| `--max-height`       | Maximum height of the modal        |
-| `--max-width`        | Maximum width of the modal         |
-| `--min-height`       | Minimum height of the modal        |
-| `--min-width`        | Minimum width of the modal         |
-| `--width`            | Width of the modal                 |
+<Slots />
diff --git a/versioned_docs/version-v5/api/nav-link.md b/versioned_docs/version-v5/api/nav-link.md
index f17596d480b..b24a7a92892 100644
--- a/versioned_docs/version-v5/api/nav-link.md
+++ b/versioned_docs/version-v5/api/nav-link.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-nav-link'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/nav-link/props.md';
+import Events from '@ionic-internal/component-api/v5/nav-link/events.md';
+import Methods from '@ionic-internal/component-api/v5/nav-link/methods.md';
+import Parts from '@ionic-internal/component-api/v5/nav-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/nav-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/nav-link/slots.md';
+
 # ion-nav-link
 
 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.
@@ -13,38 +20,24 @@ It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods
 
 ## Properties
 
-### component
-
-|                 |                                                                                          |
-| --------------- | ---------------------------------------------------------------------------------------- |
-| **Description** | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`. |
-| **Attribute**   | `component`                                                                              |
-| **Type**        | `Function \| HTMLElement \| ViewController \| null \| string \| undefined`               |
-| **Default**     | `undefined`                                                                              |
-
-### componentProps
-
-|                 |                                                                                                                   |
-| --------------- | ----------------------------------------------------------------------------------------------------------------- |
-| **Description** | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. |
-| **Attribute**   | `undefined`                                                                                                       |
-| **Type**        | `undefined \| { [key: string]: any; }`                                                                            |
-| **Default**     | `undefined`                                                                                                       |
-
-### routerAnimation
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | The transition animation when navigating to another page. |
-| **Attribute**   | `undefined`                                               |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`   |
-| **Default**     | `undefined`                                               |
-
-### routerDirection
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | The transition direction when navigating to another page. |
-| **Attribute**   | `router-direction`                                        |
-| **Type**        | `"back" \| "forward" \| "root"`                           |
-| **Default**     | `'forward'`                                               |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/nav.md b/versioned_docs/version-v5/api/nav.md
index d4660a3c691..7c07064fc0a 100644
--- a/versioned_docs/version-v5/api/nav.md
+++ b/versioned_docs/version-v5/api/nav.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/nav/props.md';
+import Events from '@ionic-internal/component-api/v5/nav/events.md';
+import Methods from '@ionic-internal/component-api/v5/nav/methods.md';
+import Parts from '@ionic-internal/component-api/v5/nav/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/nav/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/nav/slots.md';
+
 # ion-nav
 
 Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
@@ -17,147 +24,24 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if
 
 ## Properties
 
-### animated
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | If `true`, the nav should animate the transition of components. |
-| **Attribute**   | `animated`                                                      |
-| **Type**        | `boolean`                                                       |
-| **Default**     | `true`                                                          |
-
-### animation
-
-|                 |                                                                                                                                                                                                     |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | By default `ion-nav` animates transition between pages based in the mode (ios or material design).<br />However, this property allows to create custom transition using `AnimateBuilder` functions. |
-| **Attribute**   | `undefined`                                                                                                                                                                                         |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                                                         |
-
-### root
-
-|                 |                                                                            |
-| --------------- | -------------------------------------------------------------------------- |
-| **Description** | Root NavComponent to load                                                  |
-| **Attribute**   | `root`                                                                     |
-| **Type**        | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` |
-| **Default**     | `undefined`                                                                |
-
-### rootParams
-
-|                 |                                        |
-| --------------- | -------------------------------------- |
-| **Description** | Any parameters for the root component  |
-| **Attribute**   | `undefined`                            |
-| **Type**        | `undefined \| { [key: string]: any; }` |
-| **Default**     | `undefined`                            |
-
-### swipeGesture
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | If the nav component should allow for swipe-to-go-back. |
-| **Attribute**   | `swipe-gesture`                                         |
-| **Type**        | `boolean \| undefined`                                  |
-| **Default**     | `undefined`                                             |
+<Props />
 
 ## Events
 
-| Name               | Description                                     |
-| ------------------ | ----------------------------------------------- |
-| `ionNavDidChange`  | Event fired when the nav has changed components |
-| `ionNavWillChange` | Event fired when the nav will change components |
+<Events />
 
 ## Methods
 
-### canGoBack
-
-|                 |                                                                     |
-| --------------- | ------------------------------------------------------------------- |
-| **Description** | Returns `true` if the current view can go back.                     |
-| **Signature**   | `canGoBack(view?: ViewController \| undefined) => Promise<boolean>` |
-
-### getActive
-
-|                 |                                                       |
-| --------------- | ----------------------------------------------------- |
-| **Description** | Get the active view.                                  |
-| **Signature**   | `getActive() => Promise<ViewController \| undefined>` |
-
-### getByIndex
-
-|                 |                                                                     |
-| --------------- | ------------------------------------------------------------------- |
-| **Description** | Get the view at the specified index.                                |
-| **Signature**   | `getByIndex(index: number) => Promise<ViewController \| undefined>` |
-
-### getPrevious
-
-|                 |                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------- |
-| **Description** | Get the previous view.                                                                    |
-| **Signature**   | `getPrevious(view?: ViewController \| undefined) => Promise<ViewController \| undefined>` |
-
-### insert
-
-|                 |                                                                                                                                                                                                                                |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | Inserts a component into the navigation stack at the specified index.<br />This is useful to add a component at any point in the navigation stack.                                                                             |
-| **Signature**   | `insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>` |
-
-### insertPages
-
-|                 |                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Inserts an array of components into the navigation stack at the specified index.<br />The last component in the array will become instantiated as a view, and animate<br />in to become the active view. |
-| **Signature**   | `insertPages(insertIndex: number, insertComponents: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>`        |
-
-### pop
-
-|                 |                                                                                                         |
-| --------------- | ------------------------------------------------------------------------------------------------------- |
-| **Description** | Pop a component off of the navigation stack. Navigates back from the current<br />component.            |
-| **Signature**   | `pop(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>` |
-
-### popTo
-
-|                 |                                                                                                                                                      |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Pop to a specific index in the navigation stack.                                                                                                     |
-| **Signature**   | `popTo(indexOrViewCtrl: number \| ViewController, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>` |
-
-### popToRoot
-
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | Navigate back to the root of the stack, no matter how far back that is.                                       |
-| **Signature**   | `popToRoot(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>` |
-
-### push
-
-|                 |                                                                                                                                                                                                         |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Push a new component onto the current navigation stack. Pass any additional<br />information along as an object. This additional information is accessible<br />through NavParams.                      |
-| **Signature**   | `push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>` |
+<Methods />
 
-### removeIndex
+## CSS Shadow Parts
 
-|                 |                                                                                                                                                           |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Removes a component from the navigation stack at the specified index.                                                                                     |
-| **Signature**   | `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>` |
+<Parts />
 
-### setPages
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                                                                                                         |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the views of the current navigation stack and navigate to the last view.<br />By default animations are disabled, but they can be enabled by passing options<br />to the navigation controller. Navigation parameters can also be passed to the<br />individual pages in the array. |
-| **Signature**   | `setPages(views: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>`                                                                                                                          |
+<CustomProps />
 
-### setRoot
+## Slots
 
-|                 |                                                                                                                                                                                                            |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the root for the current navigation stack to a component.                                                                                                                                              |
-| **Signature**   | `setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise<boolean>` |
+<Slots />
diff --git a/versioned_docs/version-v5/api/note.md b/versioned_docs/version-v5/api/note.md
index 96109f1c8da..95271404b31 100644
--- a/versioned_docs/version-v5/api/note.md
+++ b/versioned_docs/version-v5/api/note.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/note/props.md';
+import Events from '@ionic-internal/component-api/v5/note/events.md';
+import Methods from '@ionic-internal/component-api/v5/note/methods.md';
+import Parts from '@ionic-internal/component-api/v5/note/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/note/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/note/slots.md';
+
 # ion-note
 
 Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text.
@@ -200,26 +207,24 @@ export class NoteExample {
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+## Methods
 
-### mode
+<Methods />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name      | Description       |
-| --------- | ----------------- |
-| `--color` | Color of the note |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/picker.md b/versioned_docs/version-v5/api/picker.md
index a39534dc134..65d399459f2 100644
--- a/versioned_docs/version-v5/api/picker.md
+++ b/versioned_docs/version-v5/api/picker.md
@@ -7,254 +7,37 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/picker/props.md';
+import Events from '@ionic-internal/component-api/v5/picker/events.md';
+import Methods from '@ionic-internal/component-api/v5/picker/methods.md';
+import Parts from '@ionic-internal/component-api/v5/picker/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/picker/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/picker/slots.md';
+
 # ion-picker
 
 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.
 
-## Usage
-
-```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>
-  );
-};
-```
-
 ## Properties
 
-### animated
-
-|                 |                                     |
-| --------------- | ----------------------------------- |
-| **Description** | If `true`, the picker will animate. |
-| **Attribute**   | `animated`                          |
-| **Type**        | `boolean`                           |
-| **Default**     | `true`                              |
-
-### backdropDismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | If `true`, the picker will be dismissed when the backdrop is clicked. |
-| **Attribute**   | `backdrop-dismiss`                                                    |
-| **Type**        | `boolean`                                                             |
-| **Default**     | `true`                                                                |
-
-### buttons
-
-|                 |                                                            |
-| --------------- | ---------------------------------------------------------- |
-| **Description** | Array of buttons to be displayed at the top of the picker. |
-| **Attribute**   | `undefined`                                                |
-| **Type**        | `PickerButton[]`                                           |
-| **Default**     | `[]`                                                       |
-
-### columns
-
-|                 |                                                 |
-| --------------- | ----------------------------------------------- |
-| **Description** | Array of columns to be displayed in the picker. |
-| **Attribute**   | `undefined`                                     |
-| **Type**        | `PickerColumn[]`                                |
-| **Default**     | `[]`                                            |
-
-### cssClass
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are<br />provided they should be separated by spaces. |
-| **Attribute**   | `css-class`                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                           |
-
-### duration
-
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | Number of milliseconds to wait before dismissing the picker. |
-| **Attribute**   | `duration`                                                   |
-| **Type**        | `number`                                                     |
-| **Default**     | `0`                                                          |
-
-### enterAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the picker is presented.          |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### keyboardClose
-
-|                 |                                                                                        |
-| --------------- | -------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. |
-| **Attribute**   | `keyboard-close`                                                                       |
-| **Type**        | `boolean`                                                                              |
-| **Default**     | `true`                                                                                 |
-
-### leaveAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the picker is dismissed.          |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### showBackdrop
-
-|                 |                                                            |
-| --------------- | ---------------------------------------------------------- |
-| **Description** | If `true`, a backdrop will be displayed behind the picker. |
-| **Attribute**   | `show-backdrop`                                            |
-| **Type**        | `boolean`                                                  |
-| **Default**     | `true`                                                     |
+<Props />
 
 ## Events
 
-| Name                   | Description                              |
-| ---------------------- | ---------------------------------------- |
-| `ionPickerDidDismiss`  | Emitted after the picker has dismissed.  |
-| `ionPickerDidPresent`  | Emitted after the picker has presented.  |
-| `ionPickerWillDismiss` | Emitted before the picker has dismissed. |
-| `ionPickerWillPresent` | Emitted before the picker has presented. |
+<Events />
 
 ## Methods
 
-### dismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | Dismiss the picker overlay after it has been presented.               |
-| **Signature**   | `dismiss(data?: any, role?: string \| undefined) => Promise<boolean>` |
-
-### getColumn
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | Get the column that matches the specified name.                 |
-| **Signature**   | `getColumn(name: string) => Promise<PickerColumn \| undefined>` |
+<Methods />
 
-### onDidDismiss
+## CSS Shadow Parts
 
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | Returns a promise that resolves when the picker did dismiss. |
-| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`  |
+<Parts />
 
-### onWillDismiss
-
-|                 |                                                               |
-| --------------- | ------------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the picker will dismiss. |
-| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`  |
-
-### present
+## CSS Custom Properties
 
-|                 |                                                       |
-| --------------- | ----------------------------------------------------- |
-| **Description** | Present the picker overlay after it has been created. |
-| **Signature**   | `present() => Promise<void>`                          |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name                 | Description                            |
-| -------------------- | -------------------------------------- |
-| `--backdrop-opacity` | Opacity of the backdrop                |
-| `--background`       | Background of the picker               |
-| `--background-rgb`   | Background of the picker in rgb format |
-| `--border-color`     | Border color of the picker             |
-| `--border-radius`    | Border radius of the picker            |
-| `--border-style`     | Border style of the picker             |
-| `--border-width`     | Border width of the picker             |
-| `--height`           | Height of the picker                   |
-| `--max-height`       | Maximum height of the picker           |
-| `--max-width`        | Maximum width of the picker            |
-| `--min-height`       | Minimum height of the picker           |
-| `--min-width`        | Minimum width of the picker            |
-| `--width`            | Width of the picker                    |
+<Slots />
diff --git a/versioned_docs/version-v5/api/popover.md b/versioned_docs/version-v5/api/popover.md
index c70ee6f34ba..856c41273ef 100644
--- a/versioned_docs/version-v5/api/popover.md
+++ b/versioned_docs/version-v5/api/popover.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/popover/props.md';
+import Events from '@ionic-internal/component-api/v5/popover/events.md';
+import Methods from '@ionic-internal/component-api/v5/popover/methods.md';
+import Parts from '@ionic-internal/component-api/v5/popover/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/popover/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/popover/slots.md';
+
 # ion-popover
 
 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.
@@ -366,163 +373,24 @@ Developers can also use this component directly in their template:
 
 ## Properties
 
-### animated
-
-|                 |                                      |
-| --------------- | ------------------------------------ |
-| **Description** | If `true`, the popover will animate. |
-| **Attribute**   | `animated`                           |
-| **Type**        | `boolean`                            |
-| **Default**     | `true`                               |
-
-### backdropDismiss
-
-|                 |                                                                        |
-| --------------- | ---------------------------------------------------------------------- |
-| **Description** | If `true`, the popover will be dismissed when the backdrop is clicked. |
-| **Attribute**   | `backdrop-dismiss`                                                     |
-| **Type**        | `boolean`                                                              |
-| **Default**     | `true`                                                                 |
-
-### component
-
-|                 |                                                 |
-| --------------- | ----------------------------------------------- |
-| **Description** | The component to display inside of the popover. |
-| **Attribute**   | `component`                                     |
-| **Type**        | `Function \| HTMLElement \| null \| string`     |
-| **Default**     | `undefined`                                     |
-
-### componentProps
-
-|                 |                                            |
-| --------------- | ------------------------------------------ |
-| **Description** | The data to pass to the popover component. |
-| **Attribute**   | `undefined`                                |
-| **Type**        | `undefined \| { [key: string]: any; }`     |
-| **Default**     | `undefined`                                |
-
-### cssClass
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are<br />provided they should be separated by spaces. |
-| **Attribute**   | `css-class`                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                           |
-
-### enterAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the popover is presented.         |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### event
-
-|                 |                                             |
-| --------------- | ------------------------------------------- |
-| **Description** | The event to pass to the popover animation. |
-| **Attribute**   | `event`                                     |
-| **Type**        | `any`                                       |
-| **Default**     | `undefined`                                 |
-
-### keyboardClose
-
-|                 |                                                                                        |
-| --------------- | -------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. |
-| **Attribute**   | `keyboard-close`                                                                       |
-| **Type**        | `boolean`                                                                              |
-| **Default**     | `true`                                                                                 |
-
-### leaveAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the popover is dismissed.         |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### showBackdrop
-
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | If `true`, a backdrop will be displayed behind the popover. |
-| **Attribute**   | `show-backdrop`                                             |
-| **Type**        | `boolean`                                                   |
-| **Default**     | `true`                                                      |
-
-### translucent
-
-|                 |                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the popover will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                    |
-| **Type**        | `boolean`                                                                                                                                                                                                                        |
-| **Default**     | `false`                                                                                                                                                                                                                          |
+<Props />
 
 ## Events
 
-| Name                    | Description                               |
-| ----------------------- | ----------------------------------------- |
-| `ionPopoverDidDismiss`  | Emitted after the popover has dismissed.  |
-| `ionPopoverDidPresent`  | Emitted after the popover has presented.  |
-| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. |
-| `ionPopoverWillPresent` | Emitted before the popover has presented. |
+<Events />
 
 ## Methods
 
-### dismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | Dismiss the popover overlay after it has been presented.              |
-| **Signature**   | `dismiss(data?: any, role?: string \| undefined) => Promise<boolean>` |
-
-### onDidDismiss
+<Methods />
 
-|                 |                                                               |
-| --------------- | ------------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the popover did dismiss. |
-| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`   |
+## CSS Shadow Parts
 
-### onWillDismiss
+<Parts />
 
-|                 |                                                                |
-| --------------- | -------------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the popover will dismiss. |
-| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`   |
-
-### present
+## CSS Custom Properties
 
-|                 |                                                        |
-| --------------- | ------------------------------------------------------ |
-| **Description** | Present the popover overlay after it has been created. |
-| **Signature**   | `present() => Promise<void>`                           |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name                 | Description                   |
-| -------------------- | ----------------------------- |
-| `--backdrop-opacity` | Opacity of the backdrop       |
-| `--background`       | Background of the popover     |
-| `--box-shadow`       | Box shadow of the popover     |
-| `--height`           | Height of the popover         |
-| `--max-height`       | Maximum height of the popover |
-| `--max-width`        | Maximum width of the popover  |
-| `--min-height`       | Minimum height of the popover |
-| `--min-width`        | Minimum width of the popover  |
-| `--width`            | Width of the popover          |
+<Slots />
diff --git a/versioned_docs/version-v5/api/progress-bar.md b/versioned_docs/version-v5/api/progress-bar.md
index 1653e4fa596..da1c3dedd37 100644
--- a/versioned_docs/version-v5/api/progress-bar.md
+++ b/versioned_docs/version-v5/api/progress-bar.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/progress-bar/props.md';
+import Events from '@ionic-internal/component-api/v5/progress-bar/events.md';
+import Methods from '@ionic-internal/component-api/v5/progress-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v5/progress-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/progress-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/progress-bar/slots.md';
+
 # ion-progress-bar
 
 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`.
@@ -175,73 +182,24 @@ export class ProgressBarExample {
 
 ## Properties
 
-### buffer
-
-|                 |                                                                                                                     |
-| --------------- | ------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If the buffer and value are smaller than 1, the buffer circles will show.<br />The buffer should be between [0, 1]. |
-| **Attribute**   | `buffer`                                                                                                            |
-| **Type**        | `number`                                                                                                            |
-| **Default**     | `1`                                                                                                                 |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### mode
+<Props />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+## Events
 
-### reversed
+<Events />
 
-|                 |                                              |
-| --------------- | -------------------------------------------- |
-| **Description** | If true, reverse the progress bar direction. |
-| **Attribute**   | `reversed`                                   |
-| **Type**        | `boolean`                                    |
-| **Default**     | `false`                                      |
+## Methods
 
-### type
-
-|                 |                                                                                                                                                                                                  |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The state of the progress bar, based on if the time the process takes is known or not.<br />Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right). |
-| **Attribute**   | `type`                                                                                                                                                                                           |
-| **Type**        | `"determinate" \| "indeterminate"`                                                                                                                                                               |
-| **Default**     | `'determinate'`                                                                                                                                                                                  |
-
-### value
-
-|                 |                                                                                                                                                  |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The value determines how much of the active bar should display when the<br />`type` is `"determinate"`.<br />The value should be between [0, 1]. |
-| **Attribute**   | `value`                                                                                                                                          |
-| **Type**        | `number`                                                                                                                                         |
-| **Default**     | `0`                                                                                                                                              |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name                         | Description                                                                                                                              |
-| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `progress`                   | The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`. |
-| `stream`                     | The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.                    |
-| `track`                      | The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the               |
-| width of the `buffer` value. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                    | Description                                                            |
-| ----------------------- | ---------------------------------------------------------------------- |
-| `--background`          | Background of the progress track, or the buffer bar if `buffer` is set |
-| `--buffer-background`   | DEPRECATED, use `--background` instead                                 |
-| `--progress-background` | Background of the progress bar representing the current value          |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/radio-group.md b/versioned_docs/version-v5/api/radio-group.md
index 4395ccdc306..3cbaf9cd831 100644
--- a/versioned_docs/version-v5/api/radio-group.md
+++ b/versioned_docs/version-v5/api/radio-group.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-radio-group'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/radio-group/props.md';
+import Events from '@ionic-internal/component-api/v5/radio-group/events.md';
+import Methods from '@ionic-internal/component-api/v5/radio-group/methods.md';
+import Parts from '@ionic-internal/component-api/v5/radio-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/radio-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/radio-group/slots.md';
+
 # ion-radio-group
 
 A radio group is a group of [radio buttons](radio.md). It allows
@@ -252,35 +259,24 @@ export class RadioGroupExample {
 
 ## Properties
 
-### allowEmptySelection
+<Props />
 
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | If `true`, the radios can be deselected. |
-| **Attribute**   | `allow-empty-selection`                  |
-| **Type**        | `boolean`                                |
-| **Default**     | `false`                                  |
+## Events
 
-### name
+<Events />
 
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
+## Methods
 
-### value
+<Methods />
 
-|                 |                               |
-| --------------- | ----------------------------- |
-| **Description** | the value of the radio group. |
-| **Attribute**   | `value`                       |
-| **Type**        | `any`                         |
-| **Default**     | `undefined`                   |
+## CSS Shadow Parts
 
-## Events
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
 
-| Name        | Description                         |
-| ----------- | ----------------------------------- |
-| `ionChange` | Emitted when the value has changed. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/radio.md b/versioned_docs/version-v5/api/radio.md
index a9d205b5edd..8f2522e953a 100644
--- a/versioned_docs/version-v5/api/radio.md
+++ b/versioned_docs/version-v5/api/radio.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/radio/props.md';
+import Events from '@ionic-internal/component-api/v5/radio/events.md';
+import Methods from '@ionic-internal/component-api/v5/radio/methods.md';
+import Parts from '@ionic-internal/component-api/v5/radio/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/radio/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/radio/slots.md';
+
 # ion-radio
 
 Radios should be used inside of an [`ion-radio-group`](radio-group.md). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.
@@ -228,70 +235,24 @@ export class RadioExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                     |
-| --------------- | --------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the radio. |
-| **Attribute**   | `disabled`                                          |
-| **Type**        | `boolean`                                           |
-| **Default**     | `false`                                             |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Props />
 
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
-
-### value
+## Events
 
-|                 |                         |
-| --------------- | ----------------------- |
-| **Description** | the value of the radio. |
-| **Attribute**   | `value`                 |
-| **Type**        | `any`                   |
-| **Default**     | `undefined`             |
+<Events />
 
-## Events
+## Methods
 
-| Name       | Description                                |
-| ---------- | ------------------------------------------ |
-| `ionBlur`  | Emitted when the radio button loses focus. |
-| `ionFocus` | Emitted when the radio button has focus.   |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name        | Description                                              |
-| ----------- | -------------------------------------------------------- |
-| `container` | The container for the radio mark.                        |
-| `mark`      | The checkmark or dot used to indicate the checked state. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                    | Description                              |
-| ----------------------- | ---------------------------------------- |
-| `--border-radius`       | Border radius of the radio               |
-| `--color`               | Color of the radio                       |
-| `--color-checked`       | Color of the checked radio               |
-| `--inner-border-radius` | Border radius of the inner checked radio |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/range.md b/versioned_docs/version-v5/api/range.md
index f79748d6e38..7f935e3f481 100644
--- a/versioned_docs/version-v5/api/range.md
+++ b/versioned_docs/version-v5/api/range.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/range/props.md';
+import Events from '@ionic-internal/component-api/v5/range/events.md';
+import Methods from '@ionic-internal/component-api/v5/range/methods.md';
+import Parts from '@ionic-internal/component-api/v5/range/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/range/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/range/slots.md';
+
 # ion-range
 
 The Range slider lets users select from a range of values by moving
@@ -304,161 +311,24 @@ export class RangeExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### debounce
-
-|                 |                                                                                                                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | How long, in milliseconds, to wait to trigger the<br />`ionChange` event after each change in the range value.<br />This also impacts form bindings such as `ngModel` or `v-model`. |
-| **Attribute**   | `debounce`                                                                                                                                                                          |
-| **Type**        | `number`                                                                                                                                                                            |
-| **Default**     | `0`                                                                                                                                                                                 |
-
-### disabled
-
-|                 |                                                     |
-| --------------- | --------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the range. |
-| **Attribute**   | `disabled`                                          |
-| **Type**        | `boolean`                                           |
-| **Default**     | `false`                                             |
-
-### dualKnobs
-
-|                 |                 |
-| --------------- | --------------- |
-| **Description** | Show two knobs. |
-| **Attribute**   | `dual-knobs`    |
-| **Type**        | `boolean`       |
-| **Default**     | `false`         |
-
-### max
-
-|                 |                                     |
-| --------------- | ----------------------------------- |
-| **Description** | Maximum integer value of the range. |
-| **Attribute**   | `max`                               |
-| **Type**        | `number`                            |
-| **Default**     | `100`                               |
-
-### min
-
-|                 |                                     |
-| --------------- | ----------------------------------- |
-| **Description** | Minimum integer value of the range. |
-| **Attribute**   | `min`                               |
-| **Type**        | `number`                            |
-| **Default**     | `0`                                 |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `''`                                                            |
-
-### pin
-
-|                 |                                                                             |
-| --------------- | --------------------------------------------------------------------------- |
-| **Description** | If `true`, a pin with integer value is shown when the knob<br />is pressed. |
-| **Attribute**   | `pin`                                                                       |
-| **Type**        | `boolean`                                                                   |
-| **Default**     | `false`                                                                     |
-
-### snaps
-
-|                 |                                                                                              |
-| --------------- | -------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the knob snaps to tick marks evenly spaced based<br />on the step property value. |
-| **Attribute**   | `snaps`                                                                                      |
-| **Type**        | `boolean`                                                                                    |
-| **Default**     | `false`                                                                                      |
-
-### step
-
-|                 |                                  |
-| --------------- | -------------------------------- |
-| **Description** | Specifies the value granularity. |
-| **Attribute**   | `step`                           |
-| **Type**        | `number`                         |
-| **Default**     | `1`                              |
-
-### ticks
-
-|                 |                                                                                                        |
-| --------------- | ------------------------------------------------------------------------------------------------------ |
-| **Description** | If `true`, tick marks are displayed based on the step value.<br />Only applies when `snaps` is `true`. |
-| **Attribute**   | `ticks`                                                                                                |
-| **Type**        | `boolean`                                                                                              |
-| **Default**     | `true`                                                                                                 |
-
-### value
-
-|                 |                                               |
-| --------------- | --------------------------------------------- |
-| **Description** | the value of the range.                       |
-| **Attribute**   | `value`                                       |
-| **Type**        | `number \| { lower: number; upper: number; }` |
-| **Default**     | `0`                                           |
+<Props />
 
 ## Events
 
-| Name        | Description                                  |
-| ----------- | -------------------------------------------- |
-| `ionBlur`   | Emitted when the range loses focus.          |
-| `ionChange` | Emitted when the value property has changed. |
-| `ionFocus`  | Emitted when the range has focus.            |
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name          | Description                                |
-| ------------- | ------------------------------------------ |
-| `bar`         | The inactive part of the bar.              |
-| `bar-active`  | The active part of the bar.                |
-| `knob`        | The handle that is used to drag the range. |
-| `pin`         | The counter that appears above a knob.     |
-| `tick`        | An inactive tick mark.                     |
-| `tick-active` | An active tick mark.                       |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                      | Description                        |
-| ------------------------- | ---------------------------------- |
-| `--bar-background`        | Background of the range bar        |
-| `--bar-background-active` | Background of the active range bar |
-| `--bar-border-radius`     | Border radius of the range bar     |
-| `--bar-height`            | Height of the range bar            |
-| `--height`                | Height of the range                |
-| `--knob-background`       | Background of the range knob       |
-| `--knob-border-radius`    | Border radius of the range knob    |
-| `--knob-box-shadow`       | Box shadow of the range knob       |
-| `--knob-size`             | Size of the range knob             |
-| `--pin-background`        | Background of the range pin        |
-| `--pin-color`             | Color of the range pin             |
+<CustomProps />
 
 ## Slots
 
-| Name    | Description                                                                        |
-| ------- | ---------------------------------------------------------------------------------- |
-| `end`   | Content is placed to the right of the range slider in LTR, and to the left in RTL. |
-| `start` | Content is placed to the left of the range slider in LTR, and to the right in RTL. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/refresher-content.md b/versioned_docs/version-v5/api/refresher-content.md
index bbaa2f63a0c..cf72c8fef92 100644
--- a/versioned_docs/version-v5/api/refresher-content.md
+++ b/versioned_docs/version-v5/api/refresher-content.md
@@ -5,44 +5,37 @@ sidebar_label: 'ion-refresher-content'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/refresher-content/props.md';
+import Events from '@ionic-internal/component-api/v5/refresher-content/events.md';
+import Methods from '@ionic-internal/component-api/v5/refresher-content/methods.md';
+import Parts from '@ionic-internal/component-api/v5/refresher-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/refresher-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/refresher-content/slots.md';
+
 # ion-refresher-content
 
 The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the 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.
 
 ## Properties
 
-### pullingIcon
-
-|                 |                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A static icon or a spinner to display when you begin to pull down.<br />A spinner name can be provided to gradually show tick marks<br />when pulling down on iOS devices. |
-| **Attribute**   | `pulling-icon`                                                                                                                                                             |
-| **Type**        | `null \| string \| undefined`                                                                                                                                              |
-| **Default**     | `undefined`                                                                                                                                                                |
-
-### pullingText
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                 |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The text you want to display when you begin to pull down.<br />`pullingText` can accept either plaintext or HTML as a string.<br />To display characters normally reserved for HTML, they<br />must be escaped. For example `<Ionic>` would become<br />`&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) |
-| **Attribute**   | `pulling-text`                                                                                                                                                                                                                                                                                                                                                                  |
-| **Type**        | `IonicSafeString \| string \| undefined`                                                                                                                                                                                                                                                                                                                                        |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                     |
-
-### refreshingSpinner
-
-|                 |                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------- |
-| **Description** | An animated SVG spinner that shows when refreshing begins                                                       |
-| **Attribute**   | `refreshing-spinner`                                                                                            |
-| **Type**        | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` |
-| **Default**     | `undefined`                                                                                                     |
-
-### refreshingText
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The text you want to display when performing a refresh.<br />`refreshingText` can accept either plaintext or HTML as a string.<br />To display characters normally reserved for HTML, they<br />must be escaped. For example `<Ionic>` would become<br />`&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) |
-| **Attribute**   | `refreshing-text`                                                                                                                                                                                                                                                                                                                                                                |
-| **Type**        | `IonicSafeString \| string \| undefined`                                                                                                                                                                                                                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                      |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/refresher.md b/versioned_docs/version-v5/api/refresher.md
index 4bd0152a243..76f40d3715c 100644
--- a/versioned_docs/version-v5/api/refresher.md
+++ b/versioned_docs/version-v5/api/refresher.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/refresher/props.md';
+import Events from '@ionic-internal/component-api/v5/refresher/events.md';
+import Methods from '@ionic-internal/component-api/v5/refresher/methods.md';
+import Parts from '@ionic-internal/component-api/v5/refresher/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/refresher/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/refresher/slots.md';
+
 # ion-refresher
 
 The refresher provides pull-to-refresh functionality on a content component.
@@ -288,91 +295,24 @@ export class RefresherExample {
 
 ## Properties
 
-### closeDuration
-
-|                 |                                                                                                                                          |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Time it takes to close the refresher.<br />Does not apply when the refresher content uses a spinner,<br />enabling the native refresher. |
-| **Attribute**   | `close-duration`                                                                                                                         |
-| **Type**        | `string`                                                                                                                                 |
-| **Default**     | `'280ms'`                                                                                                                                |
-
-### disabled
-
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | If `true`, the refresher will be hidden. |
-| **Attribute**   | `disabled`                               |
-| **Type**        | `boolean`                                |
-| **Default**     | `false`                                  |
-
-### pullFactor
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | How much to multiply the pull speed by. To slow the pull animation down,<br />pass a number less than `1`. To speed up the pull, pass a number greater<br />than `1`. The default value is `1` which is equal to the speed of the cursor.<br />If a negative value is passed in, the factor will be `1` instead.<br /><br />For example: If the value passed is `1.2` and the content is dragged by<br />`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels<br />(an increase of 20 percent). If the value passed is `0.8`, the dragged amount<br />will be `8` pixels, less than the amount the cursor has moved.<br /><br />Does not apply when the refresher content uses a spinner,<br />enabling the native refresher. |
-| **Attribute**   | `pull-factor`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| **Default**     | `1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-
-### pullMax
-
-|                 |                                                                                                                                                                                                                                                                |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The maximum distance of the pull until the refresher<br />will automatically go into the `refreshing` state.<br />Defaults to the result of `pullMin + 60`.<br />Does not apply when the refresher content uses a spinner,<br />enabling the native refresher. |
-| **Attribute**   | `pull-max`                                                                                                                                                                                                                                                     |
-| **Type**        | `number`                                                                                                                                                                                                                                                       |
-| **Default**     | `this.pullMin + 60`                                                                                                                                                                                                                                            |
-
-### pullMin
-
-|                 |                                                                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The minimum distance the user must pull down until the<br />refresher will go into the `refreshing` state.<br />Does not apply when the refresher content uses a spinner,<br />enabling the native refresher. |
-| **Attribute**   | `pull-min`                                                                                                                                                                                                    |
-| **Type**        | `number`                                                                                                                                                                                                      |
-| **Default**     | `60`                                                                                                                                                                                                          |
-
-### snapbackDuration
-
-|                 |                                                                                                                                                                           |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Time it takes the refresher to to snap back to the `refreshing` state.<br />Does not apply when the refresher content uses a spinner,<br />enabling the native refresher. |
-| **Attribute**   | `snapback-duration`                                                                                                                                                       |
-| **Type**        | `string`                                                                                                                                                                  |
-| **Default**     | `'280ms'`                                                                                                                                                                 |
+<Props />
 
 ## Events
 
-| Name         | Description                                                                    |
-| ------------ | ------------------------------------------------------------------------------ |
-| `ionPull`    | Emitted while the user is pulling down the content and exposing the refresher. |
-| `ionRefresh` | Emitted when the user lets go of the content and has pulled down               |
-
-further than the `pullMin` or pulls the content down and exceeds the pullMax.
-Updates the refresher state to `refreshing`. The `complete()` method should be
-called when the async operation has completed. |
-| `ionStart` | Emitted when the user begins to start pulling down. |
+<Events />
 
 ## Methods
 
-### cancel
+<Methods />
+
+## CSS Shadow Parts
 
-|                 |                                                                  |
-| --------------- | ---------------------------------------------------------------- |
-| **Description** | Changes the refresher's state from `refreshing` to `cancelling`. |
-| **Signature**   | `cancel() => Promise<void>`                                      |
+<Parts />
 
-### complete
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Call `complete()` when your async operation has completed.<br />For example, the `refreshing` state is while the app is performing<br />an asynchronous operation, such as receiving more data from an<br />AJAX request. Once the data has been received, you then call this<br />method to signify that the refreshing has completed and to close<br />the refresher. This method also changes the refresher's state from<br />`refreshing` to `completing`. |
-| **Signature**   | `complete() => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+<CustomProps />
 
-### getProgress
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A number representing how far down the user has pulled.<br />The number `0` represents the user hasn't pulled down at all. The<br />number `1`, and anything greater than `1`, represents that the user<br />has pulled far enough down that when they let go then the refresh will<br />happen. If they let go and the number is less than `1`, then the<br />refresh will not happen, and the content will return to it's original<br />position. |
-| **Signature**   | `getProgress() => Promise<number>`                                                                                                                                                                                                                                                                                                                                                                                                                  |
+<Slots />
diff --git a/versioned_docs/version-v5/api/reorder-group.md b/versioned_docs/version-v5/api/reorder-group.md
index 2c08bab05fa..9d605927575 100644
--- a/versioned_docs/version-v5/api/reorder-group.md
+++ b/versioned_docs/version-v5/api/reorder-group.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-reorder-group'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/reorder-group/props.md';
+import Events from '@ionic-internal/component-api/v5/reorder-group/events.md';
+import Methods from '@ionic-internal/component-api/v5/reorder-group/methods.md';
+import Parts from '@ionic-internal/component-api/v5/reorder-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/reorder-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/reorder-group/slots.md';
+
 # ion-reorder-group
 
 The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.md) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.
@@ -586,29 +593,24 @@ export class ReorderGroupExample {
 
 ## Properties
 
-### disabled
-
-|                 |                                        |
-| --------------- | -------------------------------------- |
-| **Description** | If `true`, the reorder will be hidden. |
-| **Attribute**   | `disabled`                             |
-| **Type**        | `boolean`                              |
-| **Default**     | `true`                                 |
+<Props />
 
 ## Events
 
-| Name             | Description                                                                 |
-| ---------------- | --------------------------------------------------------------------------- |
-| `ionItemReorder` | Event that needs to be listened to in order to complete the reorder action. |
-
-Once the event has been emitted, the `complete()` method then needs
-to be called in order to finalize the reorder action. |
+<Events />
 
 ## Methods
 
-### complete
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Completes the reorder operation. Must be called by the `ionItemReorder` event.<br /><br />If a list of items is passed, the list will be reordered and returned in the<br />proper order.<br /><br />If no parameters are passed or if `true` is passed in, the reorder will complete<br />and the item will remain in the position it was dragged to. If `false` is passed,<br />the reorder will complete and the item will bounce back to its original position. |
-| **Signature**   | `complete(listOrReorder?: boolean \| any[] \| undefined) => Promise<any>`                                                                                                                                                                                                                                                                                                                                                                                           |
+<Slots />
diff --git a/versioned_docs/version-v5/api/reorder.md b/versioned_docs/version-v5/api/reorder.md
index 83d5d654594..04d5d40b244 100644
--- a/versioned_docs/version-v5/api/reorder.md
+++ b/versioned_docs/version-v5/api/reorder.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/reorder/props.md';
+import Events from '@ionic-internal/component-api/v5/reorder/events.md';
+import Methods from '@ionic-internal/component-api/v5/reorder/methods.md';
+import Parts from '@ionic-internal/component-api/v5/reorder/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/reorder/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/reorder/slots.md';
+
 # ion-reorder
 
 Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
@@ -355,8 +362,26 @@ export class ReorderExample {
 
 </Tabs>
 
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
 ## CSS Shadow Parts
 
-| Name   | Description                                     |
-| ------ | ----------------------------------------------- |
-| `icon` | The icon of the reorder handle (uses ion-icon). |
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/ripple-effect.md b/versioned_docs/version-v5/api/ripple-effect.md
index 61161bba68f..cf5401e0428 100644
--- a/versioned_docs/version-v5/api/ripple-effect.md
+++ b/versioned_docs/version-v5/api/ripple-effect.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-ripple-effect'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/ripple-effect/props.md';
+import Events from '@ionic-internal/component-api/v5/ripple-effect/events.md';
+import Methods from '@ionic-internal/component-api/v5/ripple-effect/methods.md';
+import Parts from '@ionic-internal/component-api/v5/ripple-effect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/ripple-effect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/ripple-effect/slots.md';
+
 # ion-ripple-effect
 
 The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/components/ripples/). This component can only be used inside of an `<ion-app>` and can be added to any component.
@@ -235,20 +242,24 @@ export class RippleEffectExample {
 
 ## Properties
 
-### type
+<Props />
+
+## Events
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                   |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Sets the type of ripple-effect:<br /><br />- `bounded`: the ripple effect expands from the user's click position<br />- `unbounded`: the ripple effect expands from the center of the button and overflows the container.<br /><br />NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,<br />while surfaces for unbounded ripples should have it set to visible. |
-| **Attribute**   | `type`                                                                                                                                                                                                                                                                                                                                                                                            |
-| **Type**        | `"bounded" \| "unbounded"`                                                                                                                                                                                                                                                                                                                                                                        |
-| **Default**     | `'bounded'`                                                                                                                                                                                                                                                                                                                                                                                       |
+<Events />
 
 ## Methods
 
-### addRipple
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
 
-|                 |                                                          |
-| --------------- | -------------------------------------------------------- |
-| **Description** | Adds the ripple effect to the parent element.            |
-| **Signature**   | `addRipple(x: number, y: number) => Promise<() => void>` |
+<Slots />
diff --git a/versioned_docs/version-v5/api/route-redirect.md b/versioned_docs/version-v5/api/route-redirect.md
index 0e614ef9c83..867f8908a8e 100644
--- a/versioned_docs/version-v5/api/route-redirect.md
+++ b/versioned_docs/version-v5/api/route-redirect.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-route-redirect'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/route-redirect/props.md';
+import Events from '@ionic-internal/component-api/v5/route-redirect/events.md';
+import Methods from '@ionic-internal/component-api/v5/route-redirect/methods.md';
+import Parts from '@ionic-internal/component-api/v5/route-redirect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/route-redirect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/route-redirect/slots.md';
+
 # ion-route-redirect
 
 A route redirect can only be used with an `ion-router` as a direct child of it.
@@ -81,30 +88,24 @@ routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');
 
 ## Properties
 
-### from
+<Props />
 
-|                 |                                                                                                                                                                                                                                                                                                      |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL.<br />It needs to be an exact match of the navigated URL in order to apply.<br /><br />The path specified in this value is always an absolute path, even if the initial `/` slash<br />is not specified. |
-| **Attribute**   | `from`                                                                                                                                                                                                                                                                                               |
-| **Type**        | `string`                                                                                                                                                                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                          |
+## Events
 
-### to
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL.<br />When the defined `ion-route-redirect` rule matches, the router will redirect to the path<br />specified in this property.<br /><br />The value of this property is always an absolute path inside the scope of routes defined in<br />`ion-router` it can't be used with another router or to perform a redirection to a different domain.<br /><br />Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's<br />a redirect inside the context of ion-router.<br /><br />When this property is not specified or his value is `undefined` the whole redirect route is noop,<br />even if the "from" value matches. |
-| **Attribute**   | `to`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| **Type**        | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+## Methods
 
-## Events
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
 
-| Name                      | Description                                                                          |
-| ------------------------- | ------------------------------------------------------------------------------------ |
-| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, |
+<CustomProps />
 
-or any of his public properties changes.
+## Slots
 
-`ion-router` captures this event in order to update his internal registry of router rules. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/route.md b/versioned_docs/version-v5/api/route.md
index ff5821af469..437fb32ef7b 100644
--- a/versioned_docs/version-v5/api/route.md
+++ b/versioned_docs/version-v5/api/route.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-route'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/route/props.md';
+import Events from '@ionic-internal/component-api/v5/route/events.md';
+import Methods from '@ionic-internal/component-api/v5/route/methods.md';
+import Parts from '@ionic-internal/component-api/v5/route/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/route/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/route/slots.md';
+
 # ion-route
 
 The route component takes a component and renders it when the Browser URL matches the url property.
@@ -69,10 +76,10 @@ const hasUnsavedDataGuard = async () => {
 };
 
 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 = [
+  const route = document.createElement('ion-route');
+  route.header = 'Discard Unsaved Changes?';
+  route.message = 'Are you sure you want to leave? Any unsaved changed will be lost.';
+  route.buttons = [
     {
       text: 'Cancel',
       role: 'Cancel',
@@ -83,11 +90,11 @@ const confirmDiscardChanges = async () => {
     },
   ];
 
-  document.body.appendChild(alert);
+  document.body.appendChild(route);
 
-  await alert.present();
+  await route.present();
 
-  const { role } = await alert.onDidDismiss();
+  const { role } = await route.onDidDismiss();
 
   return role === 'Cancel' ? false : true;
 };
@@ -99,7 +106,7 @@ const confirmDiscardChanges = async () => {
 
 ```tsx
 import { Component, h } from '@stencil/core';
-import { alertController } from '@ionic/core';
+import { routeController } from '@ionic/core';
 
 @Component({
   tag: 'router-example',
@@ -139,7 +146,7 @@ const hasUnsavedDataGuard = async () => {
 };
 
 const confirmDiscardChanges = async () => {
-  const alert = await alertController.create({
+  const route = await routeController.create({
     header: 'Discard Unsaved Changes?',
     message: 'Are you sure you want to leave? Any unsaved changed will be lost.',
     buttons: [
@@ -154,9 +161,9 @@ const confirmDiscardChanges = async () => {
     ],
   });
 
-  await alert.present();
+  await route.present();
 
-  const { role } = await alert.onDidDismiss();
+  const { role } = await route.onDidDismiss();
 
   return role === 'Cancel' ? false : true;
 };
@@ -177,7 +184,7 @@ const confirmDiscardChanges = async () => {
 </template>
 
 <script>
-  import { alertController } from '@ionic/vue';
+  import { routeController } from '@ionic/vue';
 
   const isLoggedInGuard = async () => {
     const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation
@@ -200,7 +207,7 @@ const confirmDiscardChanges = async () => {
   };
 
   const confirmDiscardChanges = async () => {
-    const alert = await alertController.create({
+    const route = await routeController.create({
       header: 'Discard Unsaved Changes?',
       message: 'Are you sure you want to leave? Any unsaved changed will be lost.',
       buttons: [
@@ -215,9 +222,9 @@ const confirmDiscardChanges = async () => {
       ],
     });
 
-    await alert.present();
+    await route.present();
 
-    const { role } = await alert.onDidDismiss();
+    const { role } = await route.onDidDismiss();
 
     return role === 'Cancel' ? false : true;
   };
@@ -230,53 +237,24 @@ const confirmDiscardChanges = async () => {
 
 ## Properties
 
-### beforeEnter
-
-|                 |                                                                                                                                                                                                                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A navigation hook that is fired when the route tries to enter.<br />Returning `true` allows the navigation to proceed, while returning<br />`false` causes it to be cancelled. Returning a `NavigationHookOptions`<br />object causes the router to redirect to the path specified. |
-| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                         |
-| **Type**        | `(() => NavigationHookResult \| Promise<NavigationHookResult>) \| undefined`                                                                                                                                                                                                        |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                         |
+<Props />
 
-### beforeLeave
+## Events
 
-|                 |                                                                                                                                                                                                                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A navigation hook that is fired when the route tries to leave.<br />Returning `true` allows the navigation to proceed, while returning<br />`false` causes it to be cancelled. Returning a `NavigationHookOptions`<br />object causes the router to redirect to the path specified. |
-| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                         |
-| **Type**        | `(() => NavigationHookResult \| Promise<NavigationHookResult>) \| undefined`                                                                                                                                                                                                        |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                         |
+<Events />
 
-### component
+## Methods
 
-|                 |                                                                                                                                                                                                                                                                                            |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)<br />when the route matches.<br /><br />The value of this property is not always the tagname of the component to load,<br />in `ion-tabs` it actually refers to the name of the `ion-tab` to select. |
-| **Attribute**   | `component`                                                                                                                                                                                                                                                                                |
-| **Type**        | `string`                                                                                                                                                                                                                                                                                   |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                |
+<Methods />
 
-### componentProps
+## CSS Shadow Parts
 
-|                 |                                                                                                                                   |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed<br />to the defined component when rendered. |
-| **Attribute**   | `undefined`                                                                                                                       |
-| **Type**        | `undefined \| { [key: string]: any; }`                                                                                            |
-| **Default**     | `undefined`                                                                                                                       |
+<Parts />
 
-### url
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                                               |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Relative path that needs to match in order for this route to apply.<br /><br />Accepts paths similar to expressjs so that you can define parameters<br />in the url /foo/:bar where bar would be available in incoming props. |
-| **Attribute**   | `url`                                                                                                                                                                                                                         |
-| **Type**        | `string`                                                                                                                                                                                                                      |
-| **Default**     | `''`                                                                                                                                                                                                                          |
+<CustomProps />
 
-## Events
+## Slots
 
-| Name                  | Description                                                         |
-| --------------------- | ------------------------------------------------------------------- |
-| `ionRouteDataChanged` | Used internally by `ion-router` to know when this route did change. |
+<Slots />
diff --git a/versioned_docs/version-v5/api/router-link.md b/versioned_docs/version-v5/api/router-link.md
index d09924c7fc1..aa0fd34720b 100644
--- a/versioned_docs/version-v5/api/router-link.md
+++ b/versioned_docs/version-v5/api/router-link.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/router-link/props.md';
+import Events from '@ionic-internal/component-api/v5/router-link/events.md';
+import Methods from '@ionic-internal/component-api/v5/router-link/methods.md';
+import Parts from '@ionic-internal/component-api/v5/router-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/router-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/router-link/slots.md';
+
 # ion-router-link
 
 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.
@@ -17,63 +24,24 @@ The router link component is used for navigating to a specified link. Similar to
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### href
+<Props />
 
-|                 |                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Contains a URL or a URL fragment that the hyperlink points to.<br />If this property is set, an anchor tag will be rendered. |
-| **Attribute**   | `href`                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                        |
-| **Default**     | `undefined`                                                                                                                  |
+## Events
 
-### rel
+<Events />
 
-|                 |                                                                                                                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies the relationship of the target object to the link object.<br />The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). |
-| **Attribute**   | `rel`                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                                                                 |
+## Methods
 
-### routerAnimation
+<Methods />
 
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition animation when navigating to<br />another page using `href`. |
-| **Attribute**   | `undefined`                                                                                                   |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                       |
-| **Default**     | `undefined`                                                                                                   |
+## CSS Shadow Parts
 
-### routerDirection
+<Parts />
 
-|                 |                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------- |
-| **Description** | When using a router, it specifies the transition direction when navigating to<br />another page using `href`. |
-| **Attribute**   | `router-direction`                                                                                            |
-| **Type**        | `"back" \| "forward" \| "root"`                                                                               |
-| **Default**     | `'forward'`                                                                                                   |
-
-### target
+## CSS Custom Properties
 
-|                 |                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies where to display the linked URL.<br />Only applies when an `href` is provided.<br />Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute**   | `target`                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                   |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name           | Description                   |
-| -------------- | ----------------------------- |
-| `--background` | Background of the router link |
-| `--color`      | Text color of the router link |
+<Slots />
diff --git a/versioned_docs/version-v5/api/router-outlet.md b/versioned_docs/version-v5/api/router-outlet.md
index cc4b5578b0b..5447b99a21c 100644
--- a/versioned_docs/version-v5/api/router-outlet.md
+++ b/versioned_docs/version-v5/api/router-outlet.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-router-outlet'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/router-outlet/props.md';
+import Events from '@ionic-internal/component-api/v5/router-outlet/events.md';
+import Methods from '@ionic-internal/component-api/v5/router-outlet/methods.md';
+import Parts from '@ionic-internal/component-api/v5/router-outlet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/router-outlet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/router-outlet/slots.md';
+
 # ion-router-outlet
 
 Router outlet is a component used in routing within an Angular or Vue app. It 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.
@@ -30,29 +37,24 @@ For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` ha
 
 ## Properties
 
-### animated
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
 
-|                 |                                                                           |
-| --------------- | ------------------------------------------------------------------------- |
-| **Description** | If `true`, the router-outlet should animate the transition of components. |
-| **Attribute**   | `animated`                                                                |
-| **Type**        | `boolean`                                                                 |
-| **Default**     | `true`                                                                    |
+<Parts />
 
-### animation
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                     |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | By default `ion-nav` animates transition between pages based in the mode (ios or material design).<br />However, this property allows to create custom transition using `AnimateBuilder` functions. |
-| **Attribute**   | `undefined`                                                                                                                                                                                         |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                                                         |
+<CustomProps />
 
-### mode
+## Slots
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `getIonMode(this)`                                |
+<Slots />
diff --git a/versioned_docs/version-v5/api/router.md b/versioned_docs/version-v5/api/router.md
index 5cb097bb641..cf6214c11b2 100644
--- a/versioned_docs/version-v5/api/router.md
+++ b/versioned_docs/version-v5/api/router.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-router'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/router/props.md';
+import Events from '@ionic-internal/component-api/v5/router/events.md';
+import Methods from '@ionic-internal/component-api/v5/router/methods.md';
+import Parts from '@ionic-internal/component-api/v5/router/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/router/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/router/slots.md';
+
 # ion-router
 
 The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
@@ -52,43 +59,24 @@ In order to configure this relationship between components (to load/select) and
 
 ## Properties
 
-### root
+<Props />
 
-|                 |                                                                                                     |
-| --------------- | --------------------------------------------------------------------------------------------------- |
-| **Description** | By default `ion-router` will match the routes at the root path ("/").<br />That can be changed when |
-| **Attribute**   | `root`                                                                                              |
-| **Type**        | `string`                                                                                            |
-| **Default**     | `'/'`                                                                                               |
+## Events
 
-### useHash
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The router can work in two "modes":<br />- With hash: `/index.html#/path/to/page`<br />- Without hash: `/path/to/page`<br /><br />Using one or another might depend in the requirements of your app and/or where it's deployed.<br /><br />Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might<br />requires additional server-side configuration in order to properly work.<br /><br />On the other side hash-navigation is much easier to deploy, it even works over the file protocol.<br /><br />By default, this property is `true`, change to `false` to allow hash-less URLs. |
-| **Attribute**   | `use-hash`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| **Default**     | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+## Methods
 
-## Events
+<Methods />
 
-| Name                 | Description                                     |
-| -------------------- | ----------------------------------------------- |
-| `ionRouteDidChange`  | Emitted when the route had changed              |
-| `ionRouteWillChange` | Event emitted when the route is about to change |
+## CSS Shadow Parts
 
-## Methods
+<Parts />
 
-### back
+## CSS Custom Properties
 
-|                 |                                                 |
-| --------------- | ----------------------------------------------- |
-| **Description** | Go back to previous page in the window.history. |
-| **Signature**   | `back() => Promise<void>`                       |
+<CustomProps />
 
-### push
+## Slots
 
-|                 |                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------- |
-| **Description** | Navigate to the specified URL.                                                                                  |
-| **Signature**   | `push(url: string, direction?: RouterDirection, animation?: AnimationBuilder \| undefined) => Promise<boolean>` |
+<Slots />
diff --git a/versioned_docs/version-v5/api/row.md b/versioned_docs/version-v5/api/row.md
index 99053ceb79b..0b655a677eb 100644
--- a/versioned_docs/version-v5/api/row.md
+++ b/versioned_docs/version-v5/api/row.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-row'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/row/props.md';
+import Events from '@ionic-internal/component-api/v5/row/events.md';
+import Methods from '@ionic-internal/component-api/v5/row/methods.md';
+import Parts from '@ionic-internal/component-api/v5/row/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/row/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/row/slots.md';
+
 # ion-row
 
 Rows are horizontal components of the [grid](grid.md) system and contain varying numbers of
@@ -15,3 +22,27 @@ See [Grid Layout](../layout/grid.md) 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](../layout/css-utilities.md#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-v5/api/searchbar.md b/versioned_docs/version-v5/api/searchbar.md
index aa06710a091..05df9952643 100644
--- a/versioned_docs/version-v5/api/searchbar.md
+++ b/versioned_docs/version-v5/api/searchbar.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/searchbar/props.md';
+import Events from '@ionic-internal/component-api/v5/searchbar/events.md';
+import Methods from '@ionic-internal/component-api/v5/searchbar/methods.md';
+import Parts from '@ionic-internal/component-api/v5/searchbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/searchbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/searchbar/slots.md';
+
 # ion-searchbar
 
 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.
@@ -360,216 +367,24 @@ export class SearchbarExample {
 
 ## Properties
 
-### animated
-
-|                 |                                        |
-| --------------- | -------------------------------------- |
-| **Description** | If `true`, enable searchbar animation. |
-| **Attribute**   | `animated`                             |
-| **Type**        | `boolean`                              |
-| **Default**     | `false`                                |
-
-### autocomplete
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the input's autocomplete property.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| **Attribute**   | `autocomplete`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| **Type**        | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` |
-| **Default**     | `'off'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-
-### autocorrect
-
-|                 |                                       |
-| --------------- | ------------------------------------- |
-| **Description** | Set the input's autocorrect property. |
-| **Attribute**   | `autocorrect`                         |
-| **Type**        | `"off" \| "on"`                       |
-| **Default**     | `'off'`                               |
-
-### cancelButtonIcon
-
-|                 |                                                                                               |
-| --------------- | --------------------------------------------------------------------------------------------- |
-| **Description** | Set the cancel button icon. Only applies to `md` mode.<br />Defaults to `"arrow-back-sharp"`. |
-| **Attribute**   | `cancel-button-icon`                                                                          |
-| **Type**        | `string`                                                                                      |
-| **Default**     | `config.get('backButtonIcon', 'arrow-back-sharp') as string`                                  |
-
-### cancelButtonText
-
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | Set the cancel button text. Only applies to `ios` mode.     |
-| **Attribute**   | `cancel-button-text`                                        |
-| **Type**        | `string`                                                    |
-| **Default**     | `'Cancel'`                                                  |
-
-### clearIcon
-
-|                 |                                                                                          |
-| --------------- | ---------------------------------------------------------------------------------------- |
-| **Description** | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. |
-| **Attribute**   | `clear-icon`                                                                             |
-| **Type**        | `string \| undefined`                                                                    |
-| **Default**     | `undefined`                                                                              |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### debounce
-
-|                 |                                                                                                                                                                         |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. |
-| **Attribute**   | `debounce`                                                                                                                                                              |
-| **Type**        | `number`                                                                                                                                                                |
-| **Default**     | `250`                                                                                                                                                                   |
-
-### disabled
-
-|                 |                                                     |
-| --------------- | --------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the input. |
-| **Attribute**   | `disabled`                                          |
-| **Type**        | `boolean`                                           |
-| **Default**     | `false`                                             |
-
-### enterkeyhint
-
-|                 |                                                                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A hint to the browser for which enter key to display.<br />Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,<br />`"previous"`, `"search"`, and `"send"`. |
-| **Attribute**   | `enterkeyhint`                                                                                                                                                  |
-| **Type**        | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined`                                                                          |
-| **Default**     | `undefined`                                                                                                                                                     |
-
-### inputmode
-
-|                 |                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A hint to the browser for which keyboard to display.<br />Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,<br />`"email"`, `"numeric"`, `"decimal"`, and `"search"`. |
-| **Attribute**   | `inputmode`                                                                                                                                                                |
-| **Type**        | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined`                                                                         |
-| **Default**     | `undefined`                                                                                                                                                                |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### placeholder
-
-|                 |                                                                                                                                                                                                                                                                                                                                                    |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the input's placeholder.<br />`placeholder` can accept either plaintext or HTML as a string.<br />To display characters normally reserved for HTML, they<br />must be escaped. For example `<Ionic>` would become<br />`&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) |
-| **Attribute**   | `placeholder`                                                                                                                                                                                                                                                                                                                                      |
-| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                           |
-| **Default**     | `'Search'`                                                                                                                                                                                                                                                                                                                                         |
-
-### searchIcon
-
-|                 |                                                                                                                          |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The icon to use as the search icon. Defaults to `"search-outline"` in<br />`ios` mode and `"search-sharp"` in `md` mode. |
-| **Attribute**   | `search-icon`                                                                                                            |
-| **Type**        | `string \| undefined`                                                                                                    |
-| **Default**     | `undefined`                                                                                                              |
-
-### showCancelButton
-
-|                 |                                                                                                                                                                                                                                                                   |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Sets the behavior for the cancel button. Defaults to `"never"`.<br />Setting to `"focus"` shows the cancel button on focus.<br />Setting to `"never"` hides the cancel button.<br />Setting to `"always"` shows the cancel button regardless<br />of focus state. |
-| **Attribute**   | `show-cancel-button`                                                                                                                                                                                                                                              |
-| **Type**        | `"always" \| "focus" \| "never"`                                                                                                                                                                                                                                  |
-| **Default**     | `'never'`                                                                                                                                                                                                                                                         |
-
-### showClearButton
-
-|                 |                                                                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Sets the behavior for the clear button. Defaults to `"focus"`.<br />Setting to `"focus"` shows the clear button on focus if the<br />input is not empty.<br />Setting to `"never"` hides the clear button.<br />Setting to `"always"` shows the clear button regardless<br />of focus state, but only if the input is not empty. |
-| **Attribute**   | `show-clear-button`                                                                                                                                                                                                                                                                                                              |
-| **Type**        | `"always" \| "focus" \| "never"`                                                                                                                                                                                                                                                                                                 |
-| **Default**     | `'focus'`                                                                                                                                                                                                                                                                                                                        |
-
-### spellcheck
-
-|                 |                                            |
-| --------------- | ------------------------------------------ |
-| **Description** | If `true`, enable spellcheck on the input. |
-| **Attribute**   | `spellcheck`                               |
-| **Type**        | `boolean`                                  |
-| **Default**     | `false`                                    |
-
-### type
-
-|                 |                                                                             |
-| --------------- | --------------------------------------------------------------------------- |
-| **Description** | Set the type of the input.                                                  |
-| **Attribute**   | `type`                                                                      |
-| **Type**        | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` |
-| **Default**     | `'search'`                                                                  |
-
-### value
-
-|                 |                               |
-| --------------- | ----------------------------- |
-| **Description** | the value of the searchbar.   |
-| **Attribute**   | `value`                       |
-| **Type**        | `null \| string \| undefined` |
-| **Default**     | `''`                          |
+<Props />
 
 ## Events
 
-| Name        | Description                                     |
-| ----------- | ----------------------------------------------- |
-| `ionBlur`   | Emitted when the input loses focus.             |
-| `ionCancel` | Emitted when the cancel button is clicked.      |
-| `ionChange` | Emitted when the value has changed.             |
-| `ionClear`  | Emitted when the clear input button is clicked. |
-| `ionFocus`  | Emitted when the input has focus.               |
-| `ionInput`  | Emitted when a keyboard input occurred.         |
+<Events />
 
 ## Methods
 
-### getInputElement
-
-|                 |                                                           |
-| --------------- | --------------------------------------------------------- |
-| **Description** | Returns the native `<input>` element used under the hood. |
-| **Signature**   | `getInputElement() => Promise<HTMLInputElement>`          |
+<Methods />
 
-### setFocus
+## CSS Shadow Parts
 
-|                 |                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------- |
-| **Description** | Sets focus on the specified `ion-searchbar`. Use this method instead of the global<br />`input.focus()`. |
-| **Signature**   | `setFocus() => Promise<void>`                                                                            |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                        | Description                              |
-| --------------------------- | ---------------------------------------- |
-| `--background`              | Background of the searchbar input        |
-| `--border-radius`           | Border radius of the searchbar input     |
-| `--box-shadow`              | Box shadow of the searchbar input        |
-| `--cancel-button-color`     | Color of the searchbar cancel button     |
-| `--clear-button-color`      | Color of the searchbar clear button      |
-| `--color`                   | Color of the searchbar text              |
-| `--icon-color`              | Color of the searchbar icon              |
-| `--placeholder-color`       | Color of the searchbar placeholder       |
-| `--placeholder-font-style`  | Font style of the searchbar placeholder  |
-| `--placeholder-font-weight` | Font weight of the searchbar placeholder |
-| `--placeholder-opacity`     | Opacity of the searchbar placeholder     |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/segment-button.md b/versioned_docs/version-v5/api/segment-button.md
index 7d8e03b26b7..95edd0a2953 100644
--- a/versioned_docs/version-v5/api/segment-button.md
+++ b/versioned_docs/version-v5/api/segment-button.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-segment-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/segment-button/props.md';
+import Events from '@ionic-internal/component-api/v5/segment-button/events.md';
+import Methods from '@ionic-internal/component-api/v5/segment-button/methods.md';
+import Parts from '@ionic-internal/component-api/v5/segment-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/segment-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/segment-button/slots.md';
+
 # ion-segment-button
 
 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 checked 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.
@@ -819,88 +826,24 @@ export class SegmentButtonExample {
 
 ## Properties
 
-### disabled
-
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | If `true`, the user cannot interact with the segment button. |
-| **Attribute**   | `disabled`                                                   |
-| **Type**        | `boolean`                                                    |
-| **Default**     | `false`                                                      |
-
-### layout
-
-|                 |                                                                                                         |
-| --------------- | ------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the layout of the text and icon in the segment.                                                     |
-| **Attribute**   | `layout`                                                                                                |
-| **Type**        | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` |
-| **Default**     | `'icon-top'`                                                                                            |
+<Props />
 
-### mode
+## Events
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Events />
 
-### type
+## Methods
 
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | The type of the button.           |
-| **Attribute**   | `type`                            |
-| **Type**        | `"button" \| "reset" \| "submit"` |
-| **Default**     | `'button'`                        |
-
-### value
-
-|                 |                                  |
-| --------------- | -------------------------------- |
-| **Description** | The value of the segment button. |
-| **Attribute**   | `value`                          |
-| **Type**        | `string`                         |
-| **Default**     | `'ion-sb-' + (ids++)`            |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name                   | Description                                                                       |
-| ---------------------- | --------------------------------------------------------------------------------- |
-| `indicator`            | The indicator displayed on the checked segment button.                            |
-| `indicator-background` | The background element for the indicator displayed on the checked segment button. |
-| `native`               | The native HTML button element that wraps all child elements.                     |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                           | Description                                                                                                       |
-| ------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
-| `--background`                 | Background of the segment button                                                                                  |
-| `--background-checked`         | Background of the checked segment button                                                                          |
-| `--background-focused`         | Background of the segment button when focused with the tab key                                                    |
-| `--background-focused-opacity` | Opacity of the segment button background when focused with the tab key                                            |
-| `--background-hover`           | Background of the segment button on hover                                                                         |
-| `--background-hover-opacity`   | Opacity of the segment button background on hover                                                                 |
-| `--border-color`               | Color of the segment button border                                                                                |
-| `--border-radius`              | Radius of the segment button border                                                                               |
-| `--border-style`               | Style of the segment button border                                                                                |
-| `--border-width`               | Width of the segment button border                                                                                |
-| `--color`                      | Color of the segment button                                                                                       |
-| `--color-checked`              | Color of the checked segment button                                                                               |
-| `--color-focused`              | Color of the segment button when focused with the tab key                                                         |
-| `--color-hover`                | Color of the segment button on hover                                                                              |
-| `--indicator-box-shadow`       | Box shadow on the indicator for the checked segment button                                                        |
-| `--indicator-color`            | Color of the indicator for the checked segment button                                                             |
-| `--indicator-height`           | Height of the indicator for the checked segment button                                                            |
-| `--indicator-transform`        | Transform of the indicator for the checked segment button                                                         |
-| `--indicator-transition`       | Transition of the indicator for the checked segment button                                                        |
-| `--margin-bottom`              | Bottom margin of the segment button                                                                               |
-| `--margin-end`                 | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button   |
-| `--margin-start`               | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button   |
-| `--margin-top`                 | Top margin of the segment button                                                                                  |
-| `--padding-bottom`             | Bottom padding of the segment button                                                                              |
-| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
-| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
-| `--padding-top`                | Top padding of the segment button                                                                                 |
-| `--transition`                 | Transition of the segment button                                                                                  |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/segment.md b/versioned_docs/version-v5/api/segment.md
index c34925c4aae..aa2ef17de63 100644
--- a/versioned_docs/version-v5/api/segment.md
+++ b/versioned_docs/version-v5/api/segment.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/segment/props.md';
+import Events from '@ionic-internal/component-api/v5/segment/events.md';
+import Methods from '@ionic-internal/component-api/v5/segment/methods.md';
+import Parts from '@ionic-internal/component-api/v5/segment/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/segment/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/segment/slots.md';
+
 # ion-segment
 
 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.
@@ -589,69 +596,24 @@ export class SegmentExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                       |
-| --------------- | ----------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the segment. |
-| **Attribute**   | `disabled`                                            |
-| **Type**        | `boolean`                                             |
-| **Default**     | `false`                                               |
-
-### mode
+<Props />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### scrollable
+## Events
 
-|                 |                                                                                                                                                                                                                          |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | If `true`, the segment buttons will overflow and the user can swipe to see them.<br />In addition, this will disable the gesture to drag the indicator between the buttons<br />in order to swipe to see hidden buttons. |
-| **Attribute**   | `scrollable`                                                                                                                                                                                                             |
-| **Type**        | `boolean`                                                                                                                                                                                                                |
-| **Default**     | `false`                                                                                                                                                                                                                  |
+<Events />
 
-### swipeGesture
+## Methods
 
-|                 |                                                                                  |
-| --------------- | -------------------------------------------------------------------------------- |
-| **Description** | If `true`, users will be able to swipe between segment buttons to activate them. |
-| **Attribute**   | `swipe-gesture`                                                                  |
-| **Type**        | `boolean`                                                                        |
-| **Default**     | `true`                                                                           |
+<Methods />
 
-### value
+## CSS Shadow Parts
 
-|                 |                               |
-| --------------- | ----------------------------- |
-| **Description** | the value of the segment.     |
-| **Attribute**   | `value`                       |
-| **Type**        | `null \| string \| undefined` |
-| **Default**     | `undefined`                   |
+<Parts />
 
-## Events
+## CSS Custom Properties
 
-| Name                                                   | Description                                         |
-| ------------------------------------------------------ | --------------------------------------------------- |
-| `ionChange`                                            | Emitted when the value property has changed and any |
-| dragging pointer has been released from `ion-segment`. |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name           | Description                      |
-| -------------- | -------------------------------- |
-| `--background` | Background of the segment button |
+<Slots />
diff --git a/versioned_docs/version-v5/api/select-option.md b/versioned_docs/version-v5/api/select-option.md
index b05919c3aa0..367ecf667d6 100644
--- a/versioned_docs/version-v5/api/select-option.md
+++ b/versioned_docs/version-v5/api/select-option.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-select-option'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/select-option/props.md';
+import Events from '@ionic-internal/component-api/v5/select-option/events.md';
+import Methods from '@ionic-internal/component-api/v5/select-option/methods.md';
+import Parts from '@ionic-internal/component-api/v5/select-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/select-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/select-option/slots.md';
+
 # ion-select-option
 
 Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](select.md).
@@ -686,20 +693,24 @@ To customize an individual option, set a class on the `ion-select-option`:
 
 ## Properties
 
-### disabled
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons. |
-| **Attribute**   | `disabled`                                                                                                                                                                          |
-| **Type**        | `boolean`                                                                                                                                                                           |
-| **Default**     | `false`                                                                                                                                                                             |
+<CustomProps />
 
-### value
+## Slots
 
-|                 |                               |
-| --------------- | ----------------------------- |
-| **Description** | The text value of the option. |
-| **Attribute**   | `value`                       |
-| **Type**        | `any`                         |
-| **Default**     | `undefined`                   |
+<Slots />
diff --git a/versioned_docs/version-v5/api/select.md b/versioned_docs/version-v5/api/select.md
index f3e290b1e8f..948cc4ba0f2 100644
--- a/versioned_docs/version-v5/api/select.md
+++ b/versioned_docs/version-v5/api/select.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/select/props.md';
+import Events from '@ionic-internal/component-api/v5/select/events.md';
+import Methods from '@ionic-internal/component-api/v5/select/methods.md';
+import Parts from '@ionic-internal/component-api/v5/select/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/select/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/select/slots.md';
+
 # ion-select
 
 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.
@@ -1366,147 +1373,24 @@ export default defineComponent({
 
 ## Properties
 
-### cancelText
-
-|                 |                                           |
-| --------------- | ----------------------------------------- |
-| **Description** | The text to display on the cancel button. |
-| **Attribute**   | `cancel-text`                             |
-| **Type**        | `string`                                  |
-| **Default**     | `'Cancel'`                                |
-
-### compareWith
-
-|                 |                                                                                      |
-| --------------- | ------------------------------------------------------------------------------------ |
-| **Description** | A property name or function used to compare object values                            |
-| **Attribute**   | `compare-with`                                                                       |
-| **Type**        | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` |
-| **Default**     | `undefined`                                                                          |
-
-### disabled
-
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the select. |
-| **Attribute**   | `disabled`                                           |
-| **Type**        | `boolean`                                            |
-| **Default**     | `false`                                              |
-
-### interface
-
-|                 |                                                                            |
-| --------------- | -------------------------------------------------------------------------- |
-| **Description** | The interface the select should use: `action-sheet`, `popover` or `alert`. |
-| **Attribute**   | `interface`                                                                |
-| **Type**        | `"action-sheet" \| "alert" \| "popover"`                                   |
-| **Default**     | `'alert'`                                                                  |
-
-### interfaceOptions
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                         |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Any additional options that the `alert`, `action-sheet` or `popover` interface<br />can take. See the [ion-alert docs](alert.md), the<br />[ion-action-sheet docs](action-sheet.md) and the<br />[ion-popover docs](popover.md) for the<br />create options for each interface.<br /><br />Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. |
-| **Attribute**   | `interface-options`                                                                                                                                                                                                                                                                                                                                                                     |
-| **Type**        | `any`                                                                                                                                                                                                                                                                                                                                                                                   |
-| **Default**     | `{}`                                                                                                                                                                                                                                                                                                                                                                                    |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### multiple
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | If `true`, the select can accept multiple values. |
-| **Attribute**   | `multiple`                                        |
-| **Type**        | `boolean`                                         |
-| **Default**     | `false`                                           |
-
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
-
-### okText
-
-|                 |                                       |
-| --------------- | ------------------------------------- |
-| **Description** | The text to display on the ok button. |
-| **Attribute**   | `ok-text`                             |
-| **Type**        | `string`                              |
-| **Default**     | `'OK'`                                |
-
-### placeholder
-
-|                 |                                               |
-| --------------- | --------------------------------------------- |
-| **Description** | The text to display when the select is empty. |
-| **Attribute**   | `placeholder`                                 |
-| **Type**        | `null \| string \| undefined`                 |
-| **Default**     | `undefined`                                   |
-
-### selectedText
-
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | The text to display instead of the selected option's value. |
-| **Attribute**   | `selected-text`                                             |
-| **Type**        | `null \| string \| undefined`                               |
-| **Default**     | `undefined`                                                 |
-
-### value
-
-|                 |                          |
-| --------------- | ------------------------ |
-| **Description** | the value of the select. |
-| **Attribute**   | `value`                  |
-| **Type**        | `any`                    |
-| **Default**     | `undefined`              |
+<Props />
 
 ## Events
 
-| Name        | Description                              |
-| ----------- | ---------------------------------------- |
-| `ionBlur`   | Emitted when the select loses focus.     |
-| `ionCancel` | Emitted when the selection is cancelled. |
-| `ionChange` | Emitted when the value has changed.      |
-| `ionFocus`  | Emitted when the select has focus.       |
+<Events />
 
 ## Methods
 
-### open
-
-|                 |                                                                                                                                                    |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Open the select overlay. The overlay is either an alert, action sheet, or popover,<br />depending on the `interface` property on the `ion-select`. |
-| **Signature**   | `open(event?: UIEvent \| undefined) => Promise<any>`                                                                                               |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name          | Description                                              |
-| ------------- | -------------------------------------------------------- |
-| `icon`        | The select icon container.                               |
-| `placeholder` | The text displayed in the select when there is no value. |
-| `text`        | The displayed value of the select.                       |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                    | Description                                                                                               |
-| ----------------------- | --------------------------------------------------------------------------------------------------------- |
-| `--padding-bottom`      | Bottom padding of the select                                                                              |
-| `--padding-end`         | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select |
-| `--padding-start`       | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select |
-| `--padding-top`         | Top padding of the select                                                                                 |
-| `--placeholder-color`   | Color of the select placeholder text                                                                      |
-| `--placeholder-opacity` | Opacity of the select placeholder text                                                                    |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/skeleton-text.md b/versioned_docs/version-v5/api/skeleton-text.md
index ee36bf5368d..4abce271d81 100644
--- a/versioned_docs/version-v5/api/skeleton-text.md
+++ b/versioned_docs/version-v5/api/skeleton-text.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/skeleton-text/props.md';
+import Events from '@ionic-internal/component-api/v5/skeleton-text/events.md';
+import Methods from '@ionic-internal/component-api/v5/skeleton-text/methods.md';
+import Parts from '@ionic-internal/component-api/v5/skeleton-text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/skeleton-text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/skeleton-text/slots.md';
+
 # ion-skeleton-text
 
 Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.
@@ -794,19 +801,24 @@ export class SkeletonTextExample {
 
 ## Properties
 
-### animated
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
 
-|                 |                                            |
-| --------------- | ------------------------------------------ |
-| **Description** | If `true`, the skeleton text will animate. |
-| **Attribute**   | `animated`                                 |
-| **Type**        | `boolean`                                  |
-| **Default**     | `false`                                    |
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name               | Description                                   |
-| ------------------ | --------------------------------------------- |
-| `--background`     | Background of the skeleton text               |
-| `--background-rgb` | Background of the skeleton text in rgb format |
-| `--border-radius`  | Border radius of the skeleton text            |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/slide.md b/versioned_docs/version-v5/api/slide.md
index 05cf420614b..83f3d3dc01b 100644
--- a/versioned_docs/version-v5/api/slide.md
+++ b/versioned_docs/version-v5/api/slide.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-slide'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/slide/props.md';
+import Events from '@ionic-internal/component-api/v5/slide/events.md';
+import Methods from '@ionic-internal/component-api/v5/slide/methods.md';
+import Parts from '@ionic-internal/component-api/v5/slide/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/slide/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/slide/slots.md';
+
 # ion-slide
 
 The Slide component is a child component of [Slides](slides.md). The template
@@ -12,3 +19,27 @@ should be written as `ion-slide`. Any slide content should be written
 in this component and it should be used in conjunction with [Slides](slides.md).
 
 See the [Slides API Docs](slides.md) for more usage information.
+
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/slides.md b/versioned_docs/version-v5/api/slides.md
index 3c51f9c8d45..76d810ee4a4 100644
--- a/versioned_docs/version-v5/api/slides.md
+++ b/versioned_docs/version-v5/api/slides.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/slides/props.md';
+import Events from '@ionic-internal/component-api/v5/slides/events.md';
+import Methods from '@ionic-internal/component-api/v5/slides/methods.md';
+import Parts from '@ionic-internal/component-api/v5/slides/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/slides/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/slides/slots.md';
+
 # ion-slides
 
 The Slides component is a multi-section container. Each section can be swiped
@@ -689,184 +696,24 @@ ion-slides {
 
 ## Properties
 
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### options
-
-|                 |                                                                                                   |
-| --------------- | ------------------------------------------------------------------------------------------------- |
-| **Description** | Options to pass to the swiper instance.<br />See http://idangero.us/swiper/api/ for valid options |
-| **Attribute**   | `options`                                                                                         |
-| **Type**        | `any`                                                                                             |
-| **Default**     | `{}`                                                                                              |
-
-### pager
-
-|                 |                                 |
-| --------------- | ------------------------------- |
-| **Description** | If `true`, show the pagination. |
-| **Attribute**   | `pager`                         |
-| **Type**        | `boolean`                       |
-| **Default**     | `false`                         |
-
-### scrollbar
-
-|                 |                                |
-| --------------- | ------------------------------ |
-| **Description** | If `true`, show the scrollbar. |
-| **Attribute**   | `scrollbar`                    |
-| **Type**        | `boolean`                      |
-| **Default**     | `false`                        |
+<Props />
 
 ## Events
 
-| Name                      | Description                                                 |
-| ------------------------- | ----------------------------------------------------------- |
-| `ionSlideDidChange`       | Emitted after the active slide has changed.                 |
-| `ionSlideDoubleTap`       | Emitted when the user double taps on the slide's container. |
-| `ionSlideDrag`            | Emitted when the slider is actively being moved.            |
-| `ionSlideNextEnd`         | Emitted when the next slide has ended.                      |
-| `ionSlideNextStart`       | Emitted when the next slide has started.                    |
-| `ionSlidePrevEnd`         | Emitted when the previous slide has ended.                  |
-| `ionSlidePrevStart`       | Emitted when the previous slide has started.                |
-| `ionSlideReachEnd`        | Emitted when the slider is at the last slide.               |
-| `ionSlideReachStart`      | Emitted when the slider is at its initial position.         |
-| `ionSlidesDidLoad`        | Emitted after Swiper initialization                         |
-| `ionSlideTap`             | Emitted when the user taps/clicks on the slide's container. |
-| `ionSlideTouchEnd`        | Emitted when the user releases the touch.                   |
-| `ionSlideTouchStart`      | Emitted when the user first touches the slider.             |
-| `ionSlideTransitionEnd`   | Emitted when the slide transition has ended.                |
-| `ionSlideTransitionStart` | Emitted when the slide transition has started.              |
-| `ionSlideWillChange`      | Emitted before the active slide has changed.                |
+<Events />
 
 ## Methods
 
-### getActiveIndex
-
-|                 |                                       |
-| --------------- | ------------------------------------- |
-| **Description** | Get the index of the active slide.    |
-| **Signature**   | `getActiveIndex() => Promise<number>` |
-
-### getPreviousIndex
-
-|                 |                                         |
-| --------------- | --------------------------------------- |
-| **Description** | Get the index of the previous slide.    |
-| **Signature**   | `getPreviousIndex() => Promise<number>` |
-
-### getSwiper
-
-|                 |                                                                                                                                     |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Get the Swiper instance.<br />Use this to access the full Swiper API.<br />See https://idangero.us/swiper/api/ for all API options. |
-| **Signature**   | `getSwiper() => Promise<any>`                                                                                                       |
-
-### isBeginning
-
-|                 |                                                          |
-| --------------- | -------------------------------------------------------- |
-| **Description** | Get whether or not the current slide is the first slide. |
-| **Signature**   | `isBeginning() => Promise<boolean>`                      |
-
-### isEnd
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Get whether or not the current slide is the last slide. |
-| **Signature**   | `isEnd() => Promise<boolean>`                           |
-
-### length
-
-|                 |                                 |
-| --------------- | ------------------------------- |
-| **Description** | Get the total number of slides. |
-| **Signature**   | `length() => Promise<number>`   |
+<Methods />
 
-### lockSwipeToNext
+## CSS Shadow Parts
 
-|                 |                                                        |
-| --------------- | ------------------------------------------------------ |
-| **Description** | Lock or unlock the ability to slide to the next slide. |
-| **Signature**   | `lockSwipeToNext(lock: boolean) => Promise<void>`      |
+<Parts />
 
-### lockSwipeToPrev
-
-|                 |                                                            |
-| --------------- | ---------------------------------------------------------- |
-| **Description** | Lock or unlock the ability to slide to the previous slide. |
-| **Signature**   | `lockSwipeToPrev(lock: boolean) => Promise<void>`          |
-
-### lockSwipes
-
-|                 |                                                                    |
-| --------------- | ------------------------------------------------------------------ |
-| **Description** | Lock or unlock the ability to slide to the next or previous slide. |
-| **Signature**   | `lockSwipes(lock: boolean) => Promise<void>`                       |
-
-### slideNext
-
-|                 |                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------- |
-| **Description** | Transition to the next slide.                                                                  |
-| **Signature**   | `slideNext(speed?: number \| undefined, runCallbacks?: boolean \| undefined) => Promise<void>` |
-
-### slidePrev
-
-|                 |                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------- |
-| **Description** | Transition to the previous slide.                                                              |
-| **Signature**   | `slidePrev(speed?: number \| undefined, runCallbacks?: boolean \| undefined) => Promise<void>` |
-
-### slideTo
-
-|                 |                                                                                                             |
-| --------------- | ----------------------------------------------------------------------------------------------------------- |
-| **Description** | Transition to the specified slide.                                                                          |
-| **Signature**   | `slideTo(index: number, speed?: number \| undefined, runCallbacks?: boolean \| undefined) => Promise<void>` |
-
-### startAutoplay
-
-|                 |                                    |
-| --------------- | ---------------------------------- |
-| **Description** | Start auto play.                   |
-| **Signature**   | `startAutoplay() => Promise<void>` |
-
-### stopAutoplay
-
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | Stop auto play.                   |
-| **Signature**   | `stopAutoplay() => Promise<void>` |
-
-### update
-
-|                 |                                                                                                      |
-| --------------- | ---------------------------------------------------------------------------------------------------- |
-| **Description** | Update the underlying slider implementation. Call this if you've added or removed<br />child slides. |
-| **Signature**   | `update() => Promise<void>`                                                                          |
-
-### updateAutoHeight
+## CSS Custom Properties
 
-|                 |                                                                                                                  |
-| --------------- | ---------------------------------------------------------------------------------------------------------------- |
-| **Description** | Force swiper to update its height (when autoHeight is enabled) for the duration<br />equal to 'speed' parameter. |
-| **Signature**   | `updateAutoHeight(speed?: number \| undefined) => Promise<void>`                                                 |
+<CustomProps />
 
-## CSS Custom Properties
+## Slots
 
-| Name                               | Description                                      |
-| ---------------------------------- | ------------------------------------------------ |
-| `--bullet-background`              | Background of the pagination bullets             |
-| `--bullet-background-active`       | Background of the active pagination bullet       |
-| `--progress-bar-background`        | Background of the pagination progress-bar        |
-| `--progress-bar-background-active` | Background of the active pagination progress-bar |
-| `--scroll-bar-background`          | Background of the pagination scroll-bar          |
-| `--scroll-bar-background-active`   | Background of the active pagination scroll-bar   |
+<Slots />
diff --git a/versioned_docs/version-v5/api/spinner.md b/versioned_docs/version-v5/api/spinner.md
index 0fe189bdee0..69bd217b967 100644
--- a/versioned_docs/version-v5/api/spinner.md
+++ b/versioned_docs/version-v5/api/spinner.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/spinner/props.md';
+import Events from '@ionic-internal/component-api/v5/spinner/events.md';
+import Methods from '@ionic-internal/component-api/v5/spinner/methods.md';
+import Parts from '@ionic-internal/component-api/v5/spinner/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/spinner/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/spinner/slots.md';
+
 # ion-spinner
 
 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.
@@ -203,44 +210,24 @@ export class SpinnerExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Props />
 
-### duration
+## Events
 
-|                 |                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------- |
-| **Description** | Duration of the spinner animation in milliseconds. The default varies based on the spinner. |
-| **Attribute**   | `duration`                                                                                  |
-| **Type**        | `number \| undefined`                                                                       |
-| **Default**     | `undefined`                                                                                 |
+<Events />
 
-### name
+## Methods
 
-|                 |                                                                                                                  |
-| --------------- | ---------------------------------------------------------------------------------------------------------------- |
-| **Description** | The name of the SVG spinner to use. If a name is not provided, the platform's default<br />spinner will be used. |
-| **Attribute**   | `name`                                                                                                           |
-| **Type**        | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined`          |
-| **Default**     | `undefined`                                                                                                      |
+<Methods />
 
-### paused
+## CSS Shadow Parts
 
-|                 |                                                    |
-| --------------- | -------------------------------------------------- |
-| **Description** | If `true`, the spinner's animation will be paused. |
-| **Attribute**   | `paused`                                           |
-| **Type**        | `boolean`                                          |
-| **Default**     | `false`                                            |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name      | Description          |
-| --------- | -------------------- |
-| `--color` | Color of the spinner |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/split-pane.md b/versioned_docs/version-v5/api/split-pane.md
index 7eb61447982..1d6ba51db52 100644
--- a/versioned_docs/version-v5/api/split-pane.md
+++ b/versioned_docs/version-v5/api/split-pane.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-split-pane'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/split-pane/props.md';
+import Events from '@ionic-internal/component-api/v5/split-pane/events.md';
+import Methods from '@ionic-internal/component-api/v5/split-pane/methods.md';
+import Parts from '@ionic-internal/component-api/v5/split-pane/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/split-pane/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/split-pane/slots.md';
+
 # ion-split-pane
 
 A split pane is useful when creating multi-view layouts. It allows UI elements, like menus, to be
@@ -190,44 +197,24 @@ export class SplitPaneExample {
 
 ## Properties
 
-### contentId
-
-|                 |                                                                                                                                                                                                                                                            |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The `id` of the main content. When using<br />a router this is typically `ion-router-outlet`.<br />When not using a router, this is typically<br />your main view's `ion-content`. This is not the<br />id of the `ion-content` inside of your `ion-menu`. |
-| **Attribute**   | `content-id`                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                      |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                |
+<Props />
 
-### disabled
+## Events
 
-|                 |                                           |
-| --------------- | ----------------------------------------- |
-| **Description** | If `true`, the split pane will be hidden. |
-| **Attribute**   | `disabled`                                |
-| **Type**        | `boolean`                                 |
-| **Default**     | `false`                                   |
+<Events />
 
-### when
+## Methods
 
-|                 |                                                                                                                                                 |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | When the split-pane should be shown.<br />Can be a CSS media query expression, or a shortcut expression.<br />Can also be a boolean expression. |
-| **Attribute**   | `when`                                                                                                                                          |
-| **Type**        | `boolean \| string`                                                                                                                             |
-| **Default**     | `QUERY['lg']`                                                                                                                                   |
+<Methods />
 
-## Events
+## CSS Shadow Parts
 
-| Name                  | Description                                                        |
-| --------------------- | ------------------------------------------------------------------ |
-| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name               | Description                                                                  |
-| ------------------ | ---------------------------------------------------------------------------- |
-| `--border`         | Border between panes                                                         |
-| `--side-max-width` | Maximum width of the side pane. Does not apply when split pane is collapsed. |
-| `--side-min-width` | Minimum width of the side pane. Does not apply when split pane is collapsed. |
-| `--side-width`     | Width of the side pane. Does not apply when split pane is collapsed.         |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/tab-bar.md b/versioned_docs/version-v5/api/tab-bar.md
index bb3d4dc3fd7..b1e79d6d4f2 100644
--- a/versioned_docs/version-v5/api/tab-bar.md
+++ b/versioned_docs/version-v5/api/tab-bar.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-tab-bar'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/tab-bar/props.md';
+import Events from '@ionic-internal/component-api/v5/tab-bar/events.md';
+import Methods from '@ionic-internal/component-api/v5/tab-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v5/tab-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/tab-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/tab-bar/slots.md';
+
 # ion-tab-bar
 
 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).
@@ -167,46 +174,24 @@ export class TabBarExample {
 
 ## Properties
 
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Props />
 
-### mode
+## Events
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Events />
 
-### selectedTab
+## Methods
 
-|                 |                            |
-| --------------- | -------------------------- |
-| **Description** | The selected tab component |
-| **Attribute**   | `selected-tab`             |
-| **Type**        | `string \| undefined`      |
-| **Default**     | `undefined`                |
+<Methods />
 
-### translucent
+## CSS Shadow Parts
 
-|                 |                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the tab bar will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                    |
-| **Type**        | `boolean`                                                                                                                                                                                                                        |
-| **Default**     | `false`                                                                                                                                                                                                                          |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name           | Description               |
-| -------------- | ------------------------- |
-| `--background` | Background of the tab bar |
-| `--border`     | Border of the tab bar     |
-| `--color`      | Color of the tab bar      |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/tab-button.md b/versioned_docs/version-v5/api/tab-button.md
index f333b824e6f..5244dbffbe7 100644
--- a/versioned_docs/version-v5/api/tab-button.md
+++ b/versioned_docs/version-v5/api/tab-button.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-tab-button'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/tab-button/props.md';
+import Events from '@ionic-internal/component-api/v5/tab-button/events.md';
+import Methods from '@ionic-internal/component-api/v5/tab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v5/tab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/tab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/tab-button/slots.md';
+
 # ion-tab-button
 
 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).
@@ -249,105 +256,24 @@ export class TabButtonExample {
 
 ## Properties
 
-### disabled
-
-|                 |                                                          |
-| --------------- | -------------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the tab button. |
-| **Attribute**   | `disabled`                                               |
-| **Type**        | `boolean`                                                |
-| **Default**     | `false`                                                  |
-
-### download
-
-|                 |                                                                                                                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This attribute instructs browsers to download a URL instead of navigating to<br />it, so the user will be prompted to save it as a local file. If the attribute<br />has a value, it is used as the pre-filled file name in the Save prompt<br />(the user can still change the file name if they want). |
-| **Attribute**   | `download`                                                                                                                                                                                                                                                                                               |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                                                    |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                              |
-
-### href
-
-|                 |                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Contains a URL or a URL fragment that the hyperlink points to.<br />If this property is set, an anchor tag will be rendered. |
-| **Attribute**   | `href`                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                        |
-| **Default**     | `undefined`                                                                                                                  |
-
-### layout
-
-|                 |                                                                                                         |
-| --------------- | ------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the layout of the text and icon in the tab bar.<br />It defaults to `'icon-top'`.                   |
-| **Attribute**   | `layout`                                                                                                |
-| **Type**        | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` |
-| **Default**     | `undefined`                                                                                             |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### rel
-
-|                 |                                                                                                                                                                                             |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies the relationship of the target object to the link object.<br />The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). |
-| **Attribute**   | `rel`                                                                                                                                                                                       |
-| **Type**        | `string \| undefined`                                                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                                                                 |
-
-### selected
-
-|                 |                            |
-| --------------- | -------------------------- |
-| **Description** | The selected tab component |
-| **Attribute**   | `selected`                 |
-| **Type**        | `boolean`                  |
-| **Default**     | `false`                    |
-
-### tab
-
-|                 |                                                                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A tab id must be provided for each `ion-tab`. It's used internally to reference<br />the selected tab or by the router to switch between them. |
-| **Attribute**   | `tab`                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                          |
-| **Default**     | `undefined`                                                                                                                                    |
-
-### target
-
-|                 |                                                                                                                                                               |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Specifies where to display the linked URL.<br />Only applies when an `href` is provided.<br />Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute**   | `target`                                                                                                                                                      |
-| **Type**        | `string \| undefined`                                                                                                                                         |
-| **Default**     | `undefined`                                                                                                                                                   |
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name     | Description                                                   |
-| -------- | ------------------------------------------------------------- |
-| `native` | The native HTML anchor element that wraps all child elements. |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                           | Description                                                                                                   |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| `--background`                 | Background of the tab button                                                                                  |
-| `--background-focused`         | Background of the tab button when focused with the tab key                                                    |
-| `--background-focused-opacity` | Opacity of the tab button background when focused with the tab key                                            |
-| `--color`                      | Color of the tab button                                                                                       |
-| `--color-focused`              | Color of the tab button when focused with the tab key                                                         |
-| `--color-selected`             | Color of the selected tab button                                                                              |
-| `--padding-bottom`             | Bottom padding of the tab button                                                                              |
-| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button |
-| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button |
-| `--padding-top`                | Top padding of the tab button                                                                                 |
-| `--ripple-color`               | Color of the button ripple effect                                                                             |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/tab.md b/versioned_docs/version-v5/api/tab.md
index 5ce54abbc5a..1f34ac2b184 100644
--- a/versioned_docs/version-v5/api/tab.md
+++ b/versioned_docs/version-v5/api/tab.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-tab'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/tab/props.md';
+import Events from '@ionic-internal/component-api/v5/tab/events.md';
+import Methods from '@ionic-internal/component-api/v5/tab/methods.md';
+import Parts from '@ionic-internal/component-api/v5/tab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/tab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/tab/slots.md';
+
 # ion-tab
 
 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.
@@ -15,29 +22,24 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
 
 ## Properties
 
-### component
-
-|                 |                                                          |
-| --------------- | -------------------------------------------------------- |
-| **Description** | The component to display inside of the tab.              |
-| **Attribute**   | `component`                                              |
-| **Type**        | `Function \| HTMLElement \| null \| string \| undefined` |
-| **Default**     | `undefined`                                              |
+<Props />
 
-### tab
+## Events
 
-|                 |                                                                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A tab id must be provided for each `ion-tab`. It's used internally to reference<br />the selected tab or by the router to switch between them. |
-| **Attribute**   | `tab`                                                                                                                                          |
-| **Type**        | `string`                                                                                                                                       |
-| **Default**     | `undefined`                                                                                                                                    |
+<Events />
 
 ## Methods
 
-### setActive
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
+
+<CustomProps />
+
+## Slots
 
-|                 |                                      |
-| --------------- | ------------------------------------ |
-| **Description** | Set the active component for the tab |
-| **Signature**   | `setActive() => Promise<void>`       |
+<Slots />
diff --git a/versioned_docs/version-v5/api/tabs.md b/versioned_docs/version-v5/api/tabs.md
index c46ce842b83..5ac0ddd3179 100644
--- a/versioned_docs/version-v5/api/tabs.md
+++ b/versioned_docs/version-v5/api/tabs.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/tabs/props.md';
+import Events from '@ionic-internal/component-api/v5/tabs/events.md';
+import Methods from '@ionic-internal/component-api/v5/tabs/methods.md';
+import Parts from '@ionic-internal/component-api/v5/tabs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/tabs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/tabs/slots.md';
+
 # ion-tabs
 
 Tabs are a top level navigation component to implement a tab-based navigation.
@@ -415,40 +422,26 @@ will match the following tab:
 
 </Tabs>
 
+## Properties
+
+<Props />
+
 ## Events
 
-| Name                | Description                                                                |
-| ------------------- | -------------------------------------------------------------------------- |
-| `ionTabsDidChange`  | Emitted when the navigation has finished transitioning to a new component. |
-| `ionTabsWillChange` | Emitted when the navigation is about to transition to a new component.     |
+<Events />
 
 ## Methods
 
-### getSelected
-
-|                 |                                                 |
-| --------------- | ----------------------------------------------- |
-| **Description** | Get the currently selected tab.                 |
-| **Signature**   | `getSelected() => Promise<string \| undefined>` |
+<Methods />
 
-### getTab
+## CSS Shadow Parts
 
-|                 |                                                                                       |
-| --------------- | ------------------------------------------------------------------------------------- |
-| **Description** | Get a specific tab by the value of its `tab` property or an element reference.        |
-| **Signature**   | `getTab(tab: string \| HTMLIonTabElement) => Promise<HTMLIonTabElement \| undefined>` |
+<Parts />
 
-### select
+## CSS Custom Properties
 
-|                 |                                                                          |
-| --------------- | ------------------------------------------------------------------------ |
-| **Description** | Select a tab by the value of its `tab` property or an element reference. |
-| **Signature**   | `select(tab: string \| HTMLIonTabElement) => Promise<boolean>`           |
+<CustomProps />
 
 ## Slots
 
-| Name     | Description                                                           |
-| -------- | --------------------------------------------------------------------- |
-| ``       | Content is placed between the named slots if provided without a slot. |
-| `bottom` | Content is placed at the bottom of the screen.                        |
-| `top`    | Content is placed at the top of the screen.                           |
+<Slots />
diff --git a/versioned_docs/version-v5/api/text.md b/versioned_docs/version-v5/api/text.md
index 1812a4b4530..320d897f9a9 100644
--- a/versioned_docs/version-v5/api/text.md
+++ b/versioned_docs/version-v5/api/text.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/text/props.md';
+import Events from '@ionic-internal/component-api/v5/text/events.md';
+import Methods from '@ionic-internal/component-api/v5/text/methods.md';
+import Parts from '@ionic-internal/component-api/v5/text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/text/slots.md';
+
 # ion-text
 
 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.
@@ -45,20 +52,24 @@ The text component is a simple component that can be used to style the text colo
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<CustomProps />
 
-### mode
+## Slots
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Slots />
diff --git a/versioned_docs/version-v5/api/textarea.md b/versioned_docs/version-v5/api/textarea.md
index db68e09c934..8412d85d8a2 100644
--- a/versioned_docs/version-v5/api/textarea.md
+++ b/versioned_docs/version-v5/api/textarea.md
@@ -5,6 +5,13 @@ sidebar_label: 'ion-textarea'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/textarea/props.md';
+import Events from '@ionic-internal/component-api/v5/textarea/events.md';
+import Methods from '@ionic-internal/component-api/v5/textarea/methods.md';
+import Parts from '@ionic-internal/component-api/v5/textarea/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/textarea/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/textarea/slots.md';
+
 # ion-textarea
 
 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.
@@ -284,232 +291,24 @@ export class TextareaExample {
 
 ## Properties
 
-### autoGrow
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | If `true`, the element height will increase based on the value. |
-| **Attribute**   | `auto-grow`                                                     |
-| **Type**        | `boolean`                                                       |
-| **Default**     | `false`                                                         |
-
-### autocapitalize
-
-|                 |                                                                                                                   |
-| --------------- | ----------------------------------------------------------------------------------------------------------------- |
-| **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. |
-| **Attribute**   | `autocapitalize`                                                                                                  |
-| **Type**        | `string`                                                                                                          |
-| **Default**     | `'none'`                                                                                                          |
-
-### autofocus
-
-|                 |                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------- |
-| **Description** | This Boolean attribute lets you specify that a form control should have input focus when the page loads. |
-| **Attribute**   | `autofocus`                                                                                              |
-| **Type**        | `boolean`                                                                                                |
-| **Default**     | `false`                                                                                                  |
-
-### clearOnEdit
-
-|                 |                                                                                                                                          |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. |
-| **Attribute**   | `clear-on-edit`                                                                                                                          |
-| **Type**        | `boolean`                                                                                                                                |
-| **Default**     | `false`                                                                                                                                  |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### cols
-
-|                 |                                                                                                                        |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. |
-| **Attribute**   | `cols`                                                                                                                 |
-| **Type**        | `number \| undefined`                                                                                                  |
-| **Default**     | `undefined`                                                                                                            |
-
-### debounce
-
-|                 |                                                                                                                                                                         |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. |
-| **Attribute**   | `debounce`                                                                                                                                                              |
-| **Type**        | `number`                                                                                                                                                                |
-| **Default**     | `0`                                                                                                                                                                     |
-
-### disabled
-
-|                 |                                                        |
-| --------------- | ------------------------------------------------------ |
-| **Description** | If `true`, the user cannot interact with the textarea. |
-| **Attribute**   | `disabled`                                             |
-| **Type**        | `boolean`                                              |
-| **Default**     | `false`                                                |
-
-### enterkeyhint
-
-|                 |                                                                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A hint to the browser for which enter key to display.<br />Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,<br />`"previous"`, `"search"`, and `"send"`. |
-| **Attribute**   | `enterkeyhint`                                                                                                                                                  |
-| **Type**        | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined`                                                                          |
-| **Default**     | `undefined`                                                                                                                                                     |
-
-### inputmode
-
-|                 |                                                                                                                                                                            |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | A hint to the browser for which keyboard to display.<br />Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,<br />`"email"`, `"numeric"`, `"decimal"`, and `"search"`. |
-| **Attribute**   | `inputmode`                                                                                                                                                                |
-| **Type**        | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined`                                                                         |
-| **Default**     | `undefined`                                                                                                                                                                |
-
-### maxlength
-
-|                 |                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. |
-| **Attribute**   | `maxlength`                                                                                                                                                                      |
-| **Type**        | `number \| undefined`                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                      |
-
-### minlength
-
-|                 |                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. |
-| **Attribute**   | `minlength`                                                                                                                                                                      |
-| **Type**        | `number \| undefined`                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                      |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
-
-### placeholder
-
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | Instructional text that shows before the input has a value. |
-| **Attribute**   | `placeholder`                                               |
-| **Type**        | `null \| string \| undefined`                               |
-| **Default**     | `undefined`                                                 |
-
-### readonly
-
-|                 |                                              |
-| --------------- | -------------------------------------------- |
-| **Description** | If `true`, the user cannot modify the value. |
-| **Attribute**   | `readonly`                                   |
-| **Type**        | `boolean`                                    |
-| **Default**     | `false`                                      |
-
-### required
-
-|                 |                                                                    |
-| --------------- | ------------------------------------------------------------------ |
-| **Description** | If `true`, the user must fill in a value before submitting a form. |
-| **Attribute**   | `required`                                                         |
-| **Type**        | `boolean`                                                          |
-| **Default**     | `false`                                                            |
-
-### rows
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The number of visible text lines for the control. |
-| **Attribute**   | `rows`                                            |
-| **Type**        | `number \| undefined`                             |
-| **Default**     | `undefined`                                       |
-
-### spellcheck
-
-|                 |                                                                    |
-| --------------- | ------------------------------------------------------------------ |
-| **Description** | If `true`, the element will have its spelling and grammar checked. |
-| **Attribute**   | `spellcheck`                                                       |
-| **Type**        | `boolean`                                                          |
-| **Default**     | `false`                                                            |
-
-### value
-
-|                 |                               |
-| --------------- | ----------------------------- |
-| **Description** | The value of the textarea.    |
-| **Attribute**   | `value`                       |
-| **Type**        | `null \| string \| undefined` |
-| **Default**     | `''`                          |
-
-### wrap
-
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | Indicates how the control wraps text.    |
-| **Attribute**   | `wrap`                                   |
-| **Type**        | `"hard" \| "off" \| "soft" \| undefined` |
-| **Default**     | `undefined`                              |
+<Props />
 
 ## Events
 
-| Name        | Description                               |
-| ----------- | ----------------------------------------- |
-| `ionBlur`   | Emitted when the input loses focus.       |
-| `ionChange` | Emitted when the input value has changed. |
-| `ionFocus`  | Emitted when the input has focus.         |
-| `ionInput`  | Emitted when a keyboard input occurred.   |
+<Events />
 
 ## Methods
 
-### getInputElement
-
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | Returns the native `<textarea>` element used under the hood. |
-| **Signature**   | `getInputElement() => Promise<HTMLTextAreaElement>`          |
+<Methods />
 
-### setFocus
+## CSS Shadow Parts
 
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global<br />`textarea.focus()`. |
-| **Signature**   | `setFocus() => Promise<void>`                                                                                         |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                        | Description                                                                                                 |
-| --------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `--background`              | Background of the textarea                                                                                  |
-| `--border-radius`           | Border radius of the textarea                                                                               |
-| `--color`                   | Color of the text                                                                                           |
-| `--padding-bottom`          | Bottom padding of the textarea                                                                              |
-| `--padding-end`             | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea |
-| `--padding-start`           | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea |
-| `--padding-top`             | Top padding of the textarea                                                                                 |
-| `--placeholder-color`       | Color of the placeholder text                                                                               |
-| `--placeholder-font-style`  | Style of the placeholder text                                                                               |
-| `--placeholder-font-weight` | Weight of the placeholder text                                                                              |
-| `--placeholder-opacity`     | Opacity of the placeholder text                                                                             |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/thumbnail.md b/versioned_docs/version-v5/api/thumbnail.md
index 07db7fa17cf..6f3dfcc6736 100644
--- a/versioned_docs/version-v5/api/thumbnail.md
+++ b/versioned_docs/version-v5/api/thumbnail.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/thumbnail/props.md';
+import Events from '@ionic-internal/component-api/v5/thumbnail/events.md';
+import Methods from '@ionic-internal/component-api/v5/thumbnail/methods.md';
+import Parts from '@ionic-internal/component-api/v5/thumbnail/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/thumbnail/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/thumbnail/slots.md';
+
 # ion-thumbnail
 
 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.
@@ -134,9 +141,26 @@ export class ThumbnailExample {
 
 </Tabs>
 
+## Properties
+
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
+
+<Methods />
+
+## CSS Shadow Parts
+
+<Parts />
+
 ## CSS Custom Properties
 
-| Name              | Description                    |
-| ----------------- | ------------------------------ |
-| `--border-radius` | Border radius of the thumbnail |
-| `--size`          | Size of the thumbnail          |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/title.md b/versioned_docs/version-v5/api/title.md
index f71d537c859..2807c2b1e65 100644
--- a/versioned_docs/version-v5/api/title.md
+++ b/versioned_docs/version-v5/api/title.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-title'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/title/props.md';
+import Events from '@ionic-internal/component-api/v5/title/events.md';
+import Methods from '@ionic-internal/component-api/v5/title/methods.md';
+import Parts from '@ionic-internal/component-api/v5/title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/title/slots.md';
+
 # ion-title
 
 `ion-title` is a component that sets the title of the `Toolbar`.
@@ -627,26 +634,24 @@ ion-title.large-title {
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+## Methods
 
-### size
+<Methods />
 
-|                 |                                   |
-| --------------- | --------------------------------- |
-| **Description** | The size of the toolbar title.    |
-| **Attribute**   | `size`                            |
-| **Type**        | `"large" \| "small" \| undefined` |
-| **Default**     | `undefined`                       |
+## CSS Shadow Parts
+
+<Parts />
 
 ## CSS Custom Properties
 
-| Name      | Description             |
-| --------- | ----------------------- |
-| `--color` | Text color of the title |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/toast.md b/versioned_docs/version-v5/api/toast.md
index 0d0ac10484e..684ff050d36 100644
--- a/versioned_docs/version-v5/api/toast.md
+++ b/versioned_docs/version-v5/api/toast.md
@@ -7,6 +7,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/toast/props.md';
+import Events from '@ionic-internal/component-api/v5/toast/events.md';
+import Methods from '@ionic-internal/component-api/v5/toast/methods.md';
+import Parts from '@ionic-internal/component-api/v5/toast/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/toast/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/toast/slots.md';
+
 # ion-toast
 
 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.
@@ -373,189 +380,24 @@ Developers can also use this component directly in their template:
 
 ## Properties
 
-### animated
-
-|                 |                                    |
-| --------------- | ---------------------------------- |
-| **Description** | If `true`, the toast will animate. |
-| **Attribute**   | `animated`                         |
-| **Type**        | `boolean`                          |
-| **Default**     | `true`                             |
-
-### buttons
-
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | An array of buttons for the toast.       |
-| **Attribute**   | `undefined`                              |
-| **Type**        | `(string \| ToastButton)[] \| undefined` |
-| **Default**     | `undefined`                              |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### cssClass
-
-|                 |                                                                                                                       |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are<br />provided they should be separated by spaces. |
-| **Attribute**   | `css-class`                                                                                                           |
-| **Type**        | `string \| string[] \| undefined`                                                                                     |
-| **Default**     | `undefined`                                                                                                           |
-
-### duration
-
-|                 |                                                                                                                   |
-| --------------- | ----------------------------------------------------------------------------------------------------------------- |
-| **Description** | How many milliseconds to wait before hiding the toast. By default, it will show<br />until `dismiss()` is called. |
-| **Attribute**   | `duration`                                                                                                        |
-| **Type**        | `number`                                                                                                          |
-| **Default**     | `0`                                                                                                               |
-
-### enterAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the toast is presented.           |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### header
-
-|                 |                                  |
-| --------------- | -------------------------------- |
-| **Description** | Header to be shown in the toast. |
-| **Attribute**   | `header`                         |
-| **Type**        | `string \| undefined`            |
-| **Default**     | `undefined`                      |
-
-### keyboardClose
-
-|                 |                                                                                        |
-| --------------- | -------------------------------------------------------------------------------------- |
-| **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. |
-| **Attribute**   | `keyboard-close`                                                                       |
-| **Type**        | `boolean`                                                                              |
-| **Default**     | `false`                                                                                |
-
-### leaveAnimation
-
-|                 |                                                         |
-| --------------- | ------------------------------------------------------- |
-| **Description** | Animation to use when the toast is dismissed.           |
-| **Attribute**   | `undefined`                                             |
-| **Type**        | `((baseEl: any, opts?: any) => Animation) \| undefined` |
-| **Default**     | `undefined`                                             |
-
-### message
-
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | Message to be shown in the toast.        |
-| **Attribute**   | `message`                                |
-| **Type**        | `IonicSafeString \| string \| undefined` |
-| **Default**     | `undefined`                              |
-
-### mode
-
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### position
-
-|                 |                                          |
-| --------------- | ---------------------------------------- |
-| **Description** | The position of the toast on the screen. |
-| **Attribute**   | `position`                               |
-| **Type**        | `"bottom" \| "middle" \| "top"`          |
-| **Default**     | `'bottom'`                               |
-
-### translucent
-
-|                 |                                                                                                                                                                                                                                |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | If `true`, the toast will be translucent.<br />Only applies when the mode is `"ios"` and the device supports<br />[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). |
-| **Attribute**   | `translucent`                                                                                                                                                                                                                  |
-| **Type**        | `boolean`                                                                                                                                                                                                                      |
-| **Default**     | `false`                                                                                                                                                                                                                        |
+<Props />
 
 ## Events
 
-| Name                  | Description                             |
-| --------------------- | --------------------------------------- |
-| `ionToastDidDismiss`  | Emitted after the toast has dismissed.  |
-| `ionToastDidPresent`  | Emitted after the toast has presented.  |
-| `ionToastWillDismiss` | Emitted before the toast has dismissed. |
-| `ionToastWillPresent` | Emitted before the toast has presented. |
+<Events />
 
 ## Methods
 
-### dismiss
-
-|                 |                                                                       |
-| --------------- | --------------------------------------------------------------------- |
-| **Description** | Dismiss the toast overlay after it has been presented.                |
-| **Signature**   | `dismiss(data?: any, role?: string \| undefined) => Promise<boolean>` |
-
-### onDidDismiss
-
-|                 |                                                             |
-| --------------- | ----------------------------------------------------------- |
-| **Description** | Returns a promise that resolves when the toast did dismiss. |
-| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
-### onWillDismiss
-
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | Returns a promise that resolves when the toast will dismiss. |
-| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
-### present
-
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | Present the toast overlay after it has been created. |
-| **Signature**   | `present() => Promise<void>`                         |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name        | Description                                               |
-| ----------- | --------------------------------------------------------- |
-| `button`    | Any button element that is displayed inside of the toast. |
-| `container` | The element that wraps all child elements.                |
-| `header`    | The header text of the toast.                             |
-| `message`   | The body text of the toast.                               |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name              | Description                                                                                            |
-| ----------------- | ------------------------------------------------------------------------------------------------------ |
-| `--background`    | Background of the toast                                                                                |
-| `--border-color`  | Border color of the toast                                                                              |
-| `--border-radius` | Border radius of the toast                                                                             |
-| `--border-style`  | Border style of the toast                                                                              |
-| `--border-width`  | Border width of the toast                                                                              |
-| `--box-shadow`    | Box shadow of the toast                                                                                |
-| `--button-color`  | Color of the button text                                                                               |
-| `--color`         | Color of the toast text                                                                                |
-| `--end`           | Position from the right if direction is left-to-right, and from the left if direction is right-to-left |
-| `--height`        | Height of the toast                                                                                    |
-| `--max-height`    | Maximum height of the toast                                                                            |
-| `--max-width`     | Maximum width of the toast                                                                             |
-| `--min-height`    | Minimum height of the toast                                                                            |
-| `--min-width`     | Minimum width of the toast                                                                             |
-| `--start`         | Position from the left if direction is left-to-right, and from the right if direction is right-to-left |
-| `--white-space`   | White space of the toast message                                                                       |
-| `--width`         | Width of the toast                                                                                     |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/toggle.md b/versioned_docs/version-v5/api/toggle.md
index 8d5d01ecfdf..1f7c34dfd08 100644
--- a/versioned_docs/version-v5/api/toggle.md
+++ b/versioned_docs/version-v5/api/toggle.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/toggle/props.md';
+import Events from '@ionic-internal/component-api/v5/toggle/events.md';
+import Methods from '@ionic-internal/component-api/v5/toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v5/toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/toggle/slots.md';
+
 # ion-toggle
 
 Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the `checked` property.
@@ -483,88 +490,24 @@ export class ToggleExample {
 
 ## Properties
 
-### checked
-
-|                 |                                    |
-| --------------- | ---------------------------------- |
-| **Description** | If `true`, the toggle is selected. |
-| **Attribute**   | `checked`                          |
-| **Type**        | `boolean`                          |
-| **Default**     | `false`                            |
-
-### color
-
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
-
-### disabled
-
-|                 |                                                      |
-| --------------- | ---------------------------------------------------- |
-| **Description** | If `true`, the user cannot interact with the toggle. |
-| **Attribute**   | `disabled`                                           |
-| **Type**        | `boolean`                                            |
-| **Default**     | `false`                                              |
-
-### mode
+<Props />
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
-
-### name
-
-|                 |                                                                 |
-| --------------- | --------------------------------------------------------------- |
-| **Description** | The name of the control, which is submitted with the form data. |
-| **Attribute**   | `name`                                                          |
-| **Type**        | `string`                                                        |
-| **Default**     | `this.inputId`                                                  |
+## Events
 
-### value
+<Events />
 
-|                 |                                                                                                                                                                                                                                                                           |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The value of the toggle does not mean if it's checked or not, use the `checked`<br />property for that.<br /><br />The value of a toggle is analogous to the value of a `<input type="checkbox">`,<br />it's only used when the toggle participates in a native `<form>`. |
-| **Attribute**   | `value`                                                                                                                                                                                                                                                                   |
-| **Type**        | `null \| string \| undefined`                                                                                                                                                                                                                                             |
-| **Default**     | `'on'`                                                                                                                                                                                                                                                                    |
+## Methods
 
-## Events
-
-| Name        | Description                                  |
-| ----------- | -------------------------------------------- |
-| `ionBlur`   | Emitted when the toggle loses focus.         |
-| `ionChange` | Emitted when the value property has changed. |
-| `ionFocus`  | Emitted when the toggle has focus.           |
+<Methods />
 
 ## CSS Shadow Parts
 
-| Name     | Description                                                   |
-| -------- | ------------------------------------------------------------- |
-| `handle` | The toggle handle, or knob, used to change the checked state. |
-| `track`  | The background track of the toggle.                           |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name                          | Description                                  |
-| ----------------------------- | -------------------------------------------- |
-| `--background`                | Background of the toggle                     |
-| `--background-checked`        | Background of the toggle when checked        |
-| `--border-radius`             | Border radius of the toggle track            |
-| `--handle-background`         | Background of the toggle handle              |
-| `--handle-background-checked` | Background of the toggle handle when checked |
-| `--handle-border-radius`      | Border radius of the toggle handle           |
-| `--handle-box-shadow`         | Box shadow of the toggle handle              |
-| `--handle-height`             | Height of the toggle handle                  |
-| `--handle-max-height`         | Maximum height of the toggle handle          |
-| `--handle-spacing`            | Horizontal spacing around the toggle handle  |
-| `--handle-transition`         | Transition of the toggle handle              |
-| `--handle-width`              | Width of the toggle handle                   |
+<CustomProps />
+
+## Slots
+
+<Slots />
diff --git a/versioned_docs/version-v5/api/toolbar.md b/versioned_docs/version-v5/api/toolbar.md
index 29b2366c45b..caafcba4e32 100644
--- a/versioned_docs/version-v5/api/toolbar.md
+++ b/versioned_docs/version-v5/api/toolbar.md
@@ -9,6 +9,13 @@ demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/toolbar/props.md';
+import Events from '@ionic-internal/component-api/v5/toolbar/events.md';
+import Methods from '@ionic-internal/component-api/v5/toolbar/methods.md';
+import Parts from '@ionic-internal/component-api/v5/toolbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/toolbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/toolbar/slots.md';
+
 # ion-toolbar
 
 Toolbars are positioned above or below content. When a toolbar is placed in an `<ion-header>` it will appear fixed at the top of the content, and when it is in an `<ion-footer>` it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an `<ion-content>`, toolbars will scroll with the content.
@@ -877,46 +884,24 @@ export class ToolbarExample {
 
 ## Properties
 
-### color
+<Props />
+
+## Events
+
+<Events />
+
+## Methods
 
-|                 |                                                                                                                                                                                                                                                                                  |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The color to use from your application's color palette.<br />Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.<br />For more information on colors, see [theming](../theming/basics.md). |
-| **Attribute**   | `color`                                                                                                                                                                                                                                                                          |
-| **Type**        | `string \| undefined`                                                                                                                                                                                                                                                            |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                      |
+<Methods />
 
-### mode
+## CSS Shadow Parts
 
-|                 |                                                   |
-| --------------- | ------------------------------------------------- |
-| **Description** | The mode determines which platform styles to use. |
-| **Attribute**   | `mode`                                            |
-| **Type**        | `"ios" \| "md"`                                   |
-| **Default**     | `undefined`                                       |
+<Parts />
 
 ## CSS Custom Properties
 
-| Name               | Description                                                                                                |
-| ------------------ | ---------------------------------------------------------------------------------------------------------- |
-| `--background`     | Background of the toolbar                                                                                  |
-| `--border-color`   | Color of the toolbar border                                                                                |
-| `--border-style`   | Style of the toolbar border                                                                                |
-| `--border-width`   | Width of the toolbar border                                                                                |
-| `--color`          | Color of the toolbar text                                                                                  |
-| `--min-height`     | Minimum height of the toolbar                                                                              |
-| `--opacity`        | Opacity of the toolbar background                                                                          |
-| `--padding-bottom` | Bottom padding of the toolbar                                                                              |
-| `--padding-end`    | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar |
-| `--padding-start`  | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar |
-| `--padding-top`    | Top padding of the toolbar                                                                                 |
+<CustomProps />
 
 ## Slots
 
-| Name        | Description                                                                                              |
-| ----------- | -------------------------------------------------------------------------------------------------------- |
-| ``          | Content is placed between the named slots if provided without a slot.                                    |
-| `end`       | Content is placed to the right of the toolbar text in LTR, and to the left in RTL.                       |
-| `primary`   | Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.     |
-| `secondary` | Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode. |
-| `start`     | Content is placed to the left of the toolbar text in LTR, and to the right in RTL.                       |
+<Slots />
diff --git a/versioned_docs/version-v5/api/virtual-scroll.md b/versioned_docs/version-v5/api/virtual-scroll.md
index ce709ee9b5e..8e6b1118704 100644
--- a/versioned_docs/version-v5/api/virtual-scroll.md
+++ b/versioned_docs/version-v5/api/virtual-scroll.md
@@ -7,6 +7,13 @@ sidebar_label: 'ion-virtual-scroll'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+import Props from '@ionic-internal/component-api/v5/virtual-scroll/props.md';
+import Events from '@ionic-internal/component-api/v5/virtual-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v5/virtual-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v5/virtual-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v5/virtual-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v5/virtual-scroll/slots.md';
+
 # ion-virtual-scroll
 
 Virtual Scroll displays a virtual, "infinite" list. An array of records
@@ -243,142 +250,24 @@ within a `<div>` is a safe way to make sure dimensions are measured correctly.
 
 ## Properties
 
-### approxFooterHeight
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The approximate width of each footer template's cell.<br />This dimension is used to help determine how many cells should<br />be created when initialized, and to help calculate the height of<br />the scrollable area. This height value can only use `px` units.<br />Note that the actual rendered size of each cell comes from the<br />app's CSS, whereas this approximation is used to help calculate<br />initial dimensions before the item has been rendered. |
-| **Attribute**   | `approx-footer-height`                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| **Default**     | `30`                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-
-### approxHeaderHeight
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | The approximate height of each header template's cell.<br />This dimension is used to help determine how many cells should<br />be created when initialized, and to help calculate the height of<br />the scrollable area. This height value can only use `px` units.<br />Note that the actual rendered size of each cell comes from the<br />app's CSS, whereas this approximation is used to help calculate<br />initial dimensions before the item has been rendered. |
-| **Attribute**   | `approx-header-height`                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| **Default**     | `30`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-
-### approxItemHeight
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | It is important to provide this<br />if virtual item height will be significantly larger than the default<br />The approximate height of each virtual item template's cell.<br />This dimension is used to help determine how many cells should<br />be created when initialized, and to help calculate the height of<br />the scrollable area. This height value can only use `px` units.<br />Note that the actual rendered size of each cell comes from the<br />app's CSS, whereas this approximation is used to help calculate<br />initial dimensions before the item has been rendered. |
-| **Attribute**   | `approx-item-height`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| **Default**     | `45`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-
-### footerFn
-
-|                 |                                                                                                                                                                                                                                                                                                                                                             |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Section footers and the data used within its given<br />template can be dynamically created by passing a function to `footerFn`.<br />The logic within the footer function can decide if the footer template<br />should be used, and what data to give to the footer template. The function<br />must return `null` if a footer cell shouldn't be created. |
-| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                 |
-| **Type**        | `((item: any, index: number, items: any[]) => string \| null \| undefined) \| undefined`                                                                                                                                                                                                                                                                    |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                 |
-
-### footerHeight
-
-|                 |                                                                      |
-| --------------- | -------------------------------------------------------------------- |
-| **Description** | An optional function that maps each item footer within their height. |
-| **Attribute**   | `undefined`                                                          |
-| **Type**        | `((item: any, index: number) => number) \| undefined`                |
-| **Default**     | `undefined`                                                          |
-
-### headerFn
-
-|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | Section headers and the data used within its given<br />template can be dynamically created by passing a function to `headerFn`.<br />For example, a large list of contacts usually has dividers between each<br />letter in the alphabet. App's can provide their own custom `headerFn`<br />which is called with each record within the dataset. The logic within<br />the header function can decide if the header template should be used,<br />and what data to give to the header template. The function must return<br />`null` if a header cell shouldn't be created. |
-| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| **Type**        | `((item: any, index: number, items: any[]) => string \| null \| undefined) \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-
-### headerHeight
-
-|                 |                                                                      |
-| --------------- | -------------------------------------------------------------------- |
-| **Description** | An optional function that maps each item header within their height. |
-| **Attribute**   | `undefined`                                                          |
-| **Type**        | `((item: any, index: number) => number) \| undefined`                |
-| **Default**     | `undefined`                                                          |
-
-### itemHeight
-
-|                 |                                                                                                                                                                                                                                                                                                                                            |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | An optional function that maps each item within their height.<br />When this function is provides, heavy optimizations and fast path can be taked by<br />`ion-virtual-scroll` leading to massive performance improvements.<br /><br />This function allows to skip all DOM reads, which can be Doing so leads<br />to massive performance |
-| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                |
-| **Type**        | `((item: any, index: number) => number) \| undefined`                                                                                                                                                                                                                                                                                      |
-| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                |
-
-### items
-
-|                 |                                                                                                                                                                                                                                                  |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | The data that builds the templates within the virtual scroll.<br />It's important to note that when this data has changed, then the<br />entire virtual scroll is reset, which is an expensive operation and<br />should be avoided if possible. |
-| **Attribute**   | `undefined`                                                                                                                                                                                                                                      |
-| **Type**        | `any[] \| undefined`                                                                                                                                                                                                                             |
-| **Default**     | `undefined`                                                                                                                                                                                                                                      |
-
-### nodeRender
-
-|                 |                                                                                         |
-| --------------- | --------------------------------------------------------------------------------------- |
-| **Description** | NOTE: only Vanilla JS API.                                                              |
-| **Attribute**   | `undefined`                                                                             |
-| **Type**        | `((el: HTMLElement \| null, cell: Cell, domIndex: number) => HTMLElement) \| undefined` |
-| **Default**     | `undefined`                                                                             |
-
-### renderFooter
-
-|                 |                                                                                                                                |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the footer to be rendered. Returns a JSX virtual-dom. |
-| **Attribute**   | `undefined`                                                                                                                    |
-| **Type**        | `((item: any, index: number) => any) \| undefined`                                                                             |
-| **Default**     | `undefined`                                                                                                                    |
-
-### renderHeader
-
-|                 |                                                                                                                                |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the header to be rendered. Returns a JSX virtual-dom. |
-| **Attribute**   | `undefined`                                                                                                                    |
-| **Type**        | `((item: any, index: number) => any) \| undefined`                                                                             |
-| **Default**     | `undefined`                                                                                                                    |
-
-### renderItem
-
-|                 |                                                                                                                               |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the items to be rendered. Returns a JSX virtual-dom. |
-| **Attribute**   | `undefined`                                                                                                                   |
-| **Type**        | `((item: any, index: number) => any) \| undefined`                                                                            |
-| **Default**     | `undefined`                                                                                                                   |
+<Props />
+
+## Events
+
+<Events />
 
 ## Methods
 
-### checkEnd
+<Methods />
+
+## CSS Shadow Parts
 
-|                 |                                                                                                                                                                                           |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This method marks the tail the items array as dirty, so they can be re-rendered.<br /><br />It's equivalent to calling:<br /><br />`js<br />virtualScroll.checkRange(lastItemLen);<br />` |
-| **Signature**   | `checkEnd() => Promise<void>`                                                                                                                                                             |
+<Parts />
 
-### checkRange
+## CSS Custom Properties
 
-|                 |                                                                                                                                                                                                                                                       |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Description** | This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as<br />dirty any time the content or their style changes.<br /><br />The subset of items to be updated can are specifing by an offset and a length. |
-| **Signature**   | `checkRange(offset: number, len?: number) => Promise<void>`                                                                                                                                                                                           |
+<CustomProps />
 
-### positionForItem
+## Slots
 
-|                 |                                                              |
-| --------------- | ------------------------------------------------------------ |
-| **Description** | Returns the position of the virtual item at the given index. |
-| **Signature**   | `positionForItem(index: number) => Promise<number>`          |
+<Slots />

From 2c4364958a6c22b5a72b8f565327852a6fe8e2f8 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 25 Apr 2023 09:42:12 -0500
Subject: [PATCH 344/469] fix(playground): allow automatic mode selection when
 relevant base file is overwritten (#2922)

---
 .../global/Playground/stackblitz.utils.ts     | 161 +++++++++++-------
 .../code/stackblitz/v6/angular/app.module.ts  |   4 +-
 static/code/stackblitz/v6/html/index.html     |   8 -
 .../stackblitz/v6/html/index.withContent.html |   8 -
 static/code/stackblitz/v6/react/app.tsx       |   4 +-
 .../stackblitz/v6/react/app.withContent.tsx   |   4 +-
 static/code/stackblitz/v6/vue/main.ts         |   4 +-
 .../code/stackblitz/v7/angular/app.module.ts  |   4 +-
 static/code/stackblitz/v7/html/index.html     |   8 -
 .../stackblitz/v7/html/index.withContent.html |   8 -
 static/code/stackblitz/v7/react/app.tsx       |   4 +-
 .../stackblitz/v7/react/app.withContent.tsx   |   4 +-
 static/code/stackblitz/v7/vue/main.ts         |   4 +-
 13 files changed, 103 insertions(+), 122 deletions(-)

diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 0d86913bc7b..82d85c6010c 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -47,13 +47,34 @@ const loadSourceFiles = async (files: string[], version: number) => {
 }
 
 const openHtmlEditor = async (code: string, options?: EditorOptions) => {
-  const [index_ts, index_html, variables_css, package_json] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'html/index.ts',
     options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
     'html/variables.css',
     'html/package.json'
   ], options.version);
 
+  const indexHtml = 'index.html';
+  const files = {
+    'index.ts': defaultFiles[0],
+    [indexHtml]: defaultFiles[1],
+    'theme/variables.css': defaultFiles[2],
+    ...options?.files
+  };
+
+  const package_json = defaultFiles[3];
+
+  files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace('</head>', `
+  <script>
+    window.Ionic = {
+      config: {
+        mode: '${options?.mode}'
+      }
+    }
+  </script>
+</head>
+`);
+
   let dependencies = {};
   try {
     dependencies = {
@@ -68,18 +89,13 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     template: 'typescript',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'index.html': index_html.replace(/{{ TEMPLATE }}/g, code).replace(/{{ MODE }}/g, options?.mode),
-      'index.ts': index_ts,
-      'theme/variables.css': variables_css,
-      ...options?.files
-    },
+    files,
     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, package_json] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'angular/main.ts',
     'angular/app.module.ts',
     'angular/app.component.ts',
@@ -92,18 +108,40 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     'angular/angular.json',
     'angular/tsconfig.json',
     'angular/package.json'
-  ], options.version)
+  ], options.version);
+
+  const appModule = 'src/app/app.module.ts';
+  const files = {
+    'src/main.ts': defaultFiles[0],
+    'src/polyfills.ts': `import 'zone.js/dist/zone';`,
+    [appModule]: defaultFiles[1],
+    'src/app/app.component.ts': defaultFiles[2],
+    'src/app/app.component.css': defaultFiles[3],
+    'src/app/app.component.html': defaultFiles[4],
+    'src/app/example.component.ts': defaultFiles[5],
+    'src/app/example.component.html': code,
+    'src/app/example.component.css': '',
+    'src/index.html': '<app-root></app-root>',
+    'src/styles.css': defaultFiles[6],
+    'src/global.css': defaultFiles[7],
+    'src/theme/variables.css': defaultFiles[8],
+    'angular.json': defaultFiles[9],
+    'tsconfig.json': defaultFiles[10],
+    ...options?.files
+  };
+
+  const package_json = defaultFiles[11];
 
   if (options.angularModuleOptions) {
     if (options.angularModuleOptions.imports) {
-      app_module_ts = `${options.angularModuleOptions.imports.join('\n')}\n${app_module_ts}`;
+      files[appModule] = `${options.angularModuleOptions.imports.join('\n')}\n${files[appModule]}`;
     }
     if (options.angularModuleOptions.declarations) {
-      app_module_ts = app_module_ts.replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n  ${d}`).join(','));
+      files[appModule] = files[appModule].replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n  ${d}`).join(','));
     }
   }
 
-  app_module_ts = app_module_ts.replace('{{ MODE }}', options?.mode);
+  files[appModule] = files[appModule].replace('IonicModule.forRoot({})', `IonicModule.forRoot({ mode: '${options?.mode}' })`);
 
   let dependencies = {};
   try {
@@ -119,30 +157,13 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     template: 'angular-cli',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'src/main.ts': main_ts,
-      'src/polyfills.ts': `import 'zone.js/dist/zone';`,
-      'src/app/app.module.ts': app_module_ts,
-      'src/app/app.component.ts': app_component_ts,
-      'src/app/app.component.html': app_component_html,
-      'src/app/example.component.ts': example_component_ts,
-      'src/app/example.component.html': code,
-      'src/app/example.component.css': '',
-      'src/app/app.component.css': app_component_css,
-      'src/index.html': '<app-root></app-root>',
-      'src/styles.css': styles_css,
-      'src/global.css': global_css,
-      'src/theme/variables.css': variables_css,
-      'angular.json': angular_json,
-      'tsconfig.json': tsconfig_json,
-      ...options?.files
-    },
+    files,
     dependencies
   });
 }
 
 const openReactEditor = async (code: string, options?: EditorOptions) => {
-  let [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json, index_html] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'react/index.tsx',
     options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
     'react/variables.css',
@@ -152,31 +173,34 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     'react/index.html',
   ], options.version);
 
-  app_tsx = app_tsx.replace('{{ MODE }}', options?.mode);
+  const appTsx = 'src/App.tsx';
+  const files = {
+    'public/index.html': defaultFiles[6],
+    'src/index.tsx': defaultFiles[0],
+    [appTsx]: defaultFiles[1],
+    'src/main.tsx': code,
+    'src/theme/variables.css': defaultFiles[2],
+    'tsconfig.json': defaultFiles[3],
+    'package.json': defaultFiles[4],
+    'package-lock.json': defaultFiles[5],
+    ...options?.files,
+    '.stackblitzrc': `{
+  "startCommand": "yarn run start"
+}`
+  };
+
+  files[appTsx] = files[appTsx].replace('setupIonicReact()', `setupIonicReact({ mode: '${options?.mode}' })`);
 
   sdk.openProject({
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'public/index.html': index_html,
-      'src/index.tsx': index_tsx,
-      'src/App.tsx': app_tsx,
-      'src/main.tsx': code,
-      'src/theme/variables.css': variables_css,
-      'tsconfig.json': ts_config_json,
-      'package.json': package_json,
-      'package-lock.json': package_lock_json,
-      ...options?.files,
-      '.stackblitzrc': `{
-        "startCommand": "yarn run start"
-      }`
-    }
-  })
+    files
+  });
 }
 
 const openVueEditor = async (code: string, options?: EditorOptions) => {
-  let [package_json, package_lock_json, index_html, variables_css, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
+  const defaultFiles = await loadSourceFiles([
     'vue/package.json',
     'vue/package-lock.json',
     'vue/index.html',
@@ -189,7 +213,28 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     'vue/env.d.ts'
   ], options.version);
 
-  main_ts = main_ts.replace('{{ MODE }}', options?.mode);
+  const mainTs = 'src/main.ts';
+  const files = {
+    'src/App.vue': defaultFiles[6],
+    'src/components/Example.vue': code,
+    [mainTs]: defaultFiles[5],
+    'src/env.d.ts': defaultFiles[9],
+    'src/theme/variables.css': defaultFiles[3],
+    'index.html': defaultFiles[2],
+    'vite.config.ts': defaultFiles[4],
+    'package.json': defaultFiles[0],
+    'package-lock.json': defaultFiles[1],
+    'tsconfig.json': defaultFiles[7],
+    'tsconfig.node.json': defaultFiles[8],
+    ...options?.files,
+    '.stackblitzrc': `{
+  "startCommand": "yarn run dev"
+}`
+  };
+
+  files[mainTs] = files[mainTs].replace('.use(IonicVue)', `.use(IonicVue, {
+  mode: '${options?.mode}'
+})`);
 
   /**
    * We have to use Stackblitz web containers here (node template), due
@@ -201,23 +246,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files: {
-      'src/App.vue': app_vue,
-      'src/components/Example.vue': code,
-      'src/main.ts': main_ts,
-      'src/env.d.ts': env_d_ts,
-      'src/theme/variables.css': variables_css,
-      'index.html': index_html,
-      'vite.config.ts': vite_config_ts,
-      'package.json': package_json,
-      'package-lock.json': package_lock_json,
-      'tsconfig.json': tsconfig_json,
-      'tsconfig.node.json': tsconfig_node_json,
-      ...options?.files,
-      '.stackblitzrc': `{
-        "startCommand": "yarn run dev"
-      }`
-    }
+    files
   });
 }
 
diff --git a/static/code/stackblitz/v6/angular/app.module.ts b/static/code/stackblitz/v6/angular/app.module.ts
index dcee64f417e..7f6894ce6af 100644
--- a/static/code/stackblitz/v6/angular/app.module.ts
+++ b/static/code/stackblitz/v6/angular/app.module.ts
@@ -9,9 +9,7 @@ import { AppComponent } from './app.component';
 import { ExampleComponent } from './example.component';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
-    mode: '{{ MODE }}'
-  })],
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })
diff --git a/static/code/stackblitz/v6/html/index.html b/static/code/stackblitz/v6/html/index.html
index 1ba72a98949..8a59c2afc0f 100644
--- a/static/code/stackblitz/v6/html/index.html
+++ b/static/code/stackblitz/v6/html/index.html
@@ -3,14 +3,6 @@
 <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>
diff --git a/static/code/stackblitz/v6/html/index.withContent.html b/static/code/stackblitz/v6/html/index.withContent.html
index c13b3063615..3cd31834675 100644
--- a/static/code/stackblitz/v6/html/index.withContent.html
+++ b/static/code/stackblitz/v6/html/index.withContent.html
@@ -3,14 +3,6 @@
 <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>
diff --git a/static/code/stackblitz/v6/react/app.tsx b/static/code/stackblitz/v6/react/app.tsx
index 17430586f74..7ba9c8b93c7 100644
--- a/static/code/stackblitz/v6/react/app.tsx
+++ b/static/code/stackblitz/v6/react/app.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v6/react/app.withContent.tsx b/static/code/stackblitz/v6/react/app.withContent.tsx
index e1f307d03cd..d90d8f74ffe 100644
--- a/static/code/stackblitz/v6/react/app.withContent.tsx
+++ b/static/code/stackblitz/v6/react/app.withContent.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v6/vue/main.ts b/static/code/stackblitz/v6/vue/main.ts
index c8650146df9..207b1ad84c6 100644
--- a/static/code/stackblitz/v6/vue/main.ts
+++ b/static/code/stackblitz/v6/vue/main.ts
@@ -22,6 +22,4 @@ import '@ionic/vue/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-createApp(App).use(IonicVue, {
-  mode: '{{ MODE }}'
-}).mount('#app');
+createApp(App).use(IonicVue).mount('#app');
diff --git a/static/code/stackblitz/v7/angular/app.module.ts b/static/code/stackblitz/v7/angular/app.module.ts
index dcee64f417e..7f6894ce6af 100644
--- a/static/code/stackblitz/v7/angular/app.module.ts
+++ b/static/code/stackblitz/v7/angular/app.module.ts
@@ -9,9 +9,7 @@ import { AppComponent } from './app.component';
 import { ExampleComponent } from './example.component';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
-    mode: '{{ MODE }}'
-  })],
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })
diff --git a/static/code/stackblitz/v7/html/index.html b/static/code/stackblitz/v7/html/index.html
index a521ed9844e..5e77463a672 100644
--- a/static/code/stackblitz/v7/html/index.html
+++ b/static/code/stackblitz/v7/html/index.html
@@ -3,14 +3,6 @@
 <head>
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
-
-  <script>
-    window.Ionic = {
-      config: {
-        mode: '{{ MODE }}'
-      }
-    }
-  </script>
 </head>
 
 <body>
diff --git a/static/code/stackblitz/v7/html/index.withContent.html b/static/code/stackblitz/v7/html/index.withContent.html
index a5efecac81d..242233075dc 100644
--- a/static/code/stackblitz/v7/html/index.withContent.html
+++ b/static/code/stackblitz/v7/html/index.withContent.html
@@ -3,14 +3,6 @@
 <head>
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
-
-  <script>
-    window.Ionic = {
-      config: {
-        mode: '{{ MODE }}'
-      }
-    }
-  </script>
 </head>
 
 <body>
diff --git a/static/code/stackblitz/v7/react/app.tsx b/static/code/stackblitz/v7/react/app.tsx
index 17430586f74..7ba9c8b93c7 100644
--- a/static/code/stackblitz/v7/react/app.tsx
+++ b/static/code/stackblitz/v7/react/app.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v7/react/app.withContent.tsx b/static/code/stackblitz/v7/react/app.withContent.tsx
index e1f307d03cd..d90d8f74ffe 100644
--- a/static/code/stackblitz/v7/react/app.withContent.tsx
+++ b/static/code/stackblitz/v7/react/app.withContent.tsx
@@ -22,9 +22,7 @@ import './theme/variables.css';
 
 import Example from './main';
 
-setupIonicReact({
-  mode: '{{ MODE }}',
-});
+setupIonicReact();
 
 export default function App() {
   return (
diff --git a/static/code/stackblitz/v7/vue/main.ts b/static/code/stackblitz/v7/vue/main.ts
index c8650146df9..207b1ad84c6 100644
--- a/static/code/stackblitz/v7/vue/main.ts
+++ b/static/code/stackblitz/v7/vue/main.ts
@@ -22,6 +22,4 @@ import '@ionic/vue/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-createApp(App).use(IonicVue, {
-  mode: '{{ MODE }}'
-}).mount('#app');
+createApp(App).use(IonicVue).mount('#app');

From 3da7c10428f58a2cd9fe671410e034ba45167107 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 25 Apr 2023 12:34:58 -0400
Subject: [PATCH 345/469] fix: styles for ion-slides migration (#2930)

---
 docs/angular/slides.md                      | 1 +
 versioned_docs/version-v6/angular/slides.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index e9ffe1b23f8..104bd4097ed 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -109,6 +109,7 @@ swiper-slide {
   display: flex;
   position: relative;
 
+  flex-direction: column;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index 1092d293082..7e5870e8cfa 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -107,6 +107,7 @@ swiper-slide {
   display: flex;
   position: relative;
 
+  flex-direction: column;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;

From 431f2e04247783ae8f05ebbbe91409ca02282131 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:05:13 -0500
Subject: [PATCH 346/469] refactor(playground): remove unused
 angularModuleOptions feature (#2933)

---
 src/components/global/Playground/index.tsx        | 14 --------------
 .../global/Playground/stackblitz.utils.ts         | 15 ---------------
 2 files changed, 29 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 209a0369971..2ef8505f1e0 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -85,17 +85,6 @@ interface UsageTargetOptions {
   files: {
     [key: string]: MdxContent;
   };
-  angularModuleOptions?: {
-    /**
-     * The list of import declarations to add to the `AppModule`.
-     * Accepts value formatted as: `'import { FooComponent } from './foo.component';'`.
-     */
-    imports: string[];
-    /**
-     * The list of class name declarations to add to the `AppModule`.
-     */
-    declarations?: string[];
-  };
 }
 
 /**
@@ -331,9 +320,6 @@ export default function Playground({
       // using outerText will preserve line breaks for formatting in Stackblitz editor
       codeBlock = codeRef.current.querySelector('code').outerText;
     } else {
-      const codeUsageTarget = code[usageTarget] as UsageTargetOptions;
-      editorOptions.angularModuleOptions = codeUsageTarget.angularModuleOptions;
-
       editorOptions.files = Object.keys(codeSnippets[usageTarget])
         .map((fileName) => ({
           [fileName]: hostRef.current!.querySelector<HTMLElement>(`#${getCodeSnippetId(usageTarget, fileName)} code`)
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 82d85c6010c..2b597c52a49 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -31,13 +31,7 @@ export interface EditorOptions {
    */
   mode?: string;
 
-  angularModuleOptions?: {
-    imports: string[];
-    declarations?: string[];
-  };
-
   version?: number;
-
 }
 
 const loadSourceFiles = async (files: string[], version: number) => {
@@ -132,15 +126,6 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
 
   const package_json = defaultFiles[11];
 
-  if (options.angularModuleOptions) {
-    if (options.angularModuleOptions.imports) {
-      files[appModule] = `${options.angularModuleOptions.imports.join('\n')}\n${files[appModule]}`;
-    }
-    if (options.angularModuleOptions.declarations) {
-      files[appModule] = files[appModule].replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n  ${d}`).join(','));
-    }
-  }
-
   files[appModule] = files[appModule].replace('IonicModule.forRoot({})', `IonicModule.forRoot({ mode: '${options?.mode}' })`);
 
   let dependencies = {};

From 7a9f3b3f4e64661a6d1a7b0e0b5eb65214d373d6 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:16:39 -0700
Subject: [PATCH 347/469] docs(ionicslides): include slides param link (#2934)

Co-authored-by: Arno <arnotixe@gmail.com>
---
 docs/angular/slides.md                      | 2 ++
 docs/react/slides.md                        | 2 ++
 docs/vue/slides.md                          | 2 ++
 versioned_docs/version-v6/angular/slides.md | 2 ++
 versioned_docs/version-v6/react/slides.md   | 2 ++
 versioned_docs/version-v6/vue/slides.md     | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index 104bd4097ed..f294bcc351c 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -135,6 +135,8 @@ swiper-slide img {
 
 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
+It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
+
 We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array:
 
 ```typescript
diff --git a/docs/react/slides.md b/docs/react/slides.md
index b8d88392314..522bc2d36ac 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -264,6 +264,8 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
 
 With `IonSlides`, 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
+It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
+
 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
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 4f02bd9813c..854c845d6d0 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -256,6 +256,8 @@ See <a href="https://swiperjs.com/vue#usage" target="_blank" rel="noopener noref
 
 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
+It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
+
 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
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index 7e5870e8cfa..e971d03c557 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -133,6 +133,8 @@ swiper-slide img {
 
 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
+It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
+
 We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array:
 
 ```typescript
diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md
index b6cb227f408..c6e3d0ea382 100644
--- a/versioned_docs/version-v6/react/slides.md
+++ b/versioned_docs/version-v6/react/slides.md
@@ -260,6 +260,8 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
 
 With `IonSlides`, 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
+It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
+
 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
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index 7f63df400be..e28f84deba5 100644
--- a/versioned_docs/version-v6/vue/slides.md
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -254,6 +254,8 @@ See <a href="https://swiperjs.com/vue#usage" target="_blank" rel="noopener noref
 
 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. However, using this module is **not** required to use Swiper.js in Ionic.
 
+It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
+
 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

From ba21d4e83dd35fa600b31e643227269a4e4077b0 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Wed, 26 Apr 2023 10:41:43 -0400
Subject: [PATCH 348/469] docs(tab): remove references to using Stencil with
 tab (#2932)

---
 docs/api/tab-bar.md                         | 42 +-------------
 docs/api/tab-button.md                      | 64 +--------------------
 docs/api/tab.md                             |  2 +-
 versioned_docs/version-v5/api/tab-bar.md    | 40 +------------
 versioned_docs/version-v5/api/tab-button.md | 62 +-------------------
 versioned_docs/version-v5/api/tab.md        |  2 +-
 versioned_docs/version-v6/api/tab-bar.md    | 40 +------------
 versioned_docs/version-v6/api/tab-button.md | 62 +-------------------
 versioned_docs/version-v6/api/tab.md        |  2 +-
 9 files changed, 9 insertions(+), 307 deletions(-)

diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index cb69107d111..939451673cb 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -28,7 +28,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.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' }]}>
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
 <TabItem value="angular">
 
@@ -110,46 +110,6 @@ export const TabBarExample: React.FC = () => (
 </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
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index d22b0db8699..959d50f88c4 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -27,7 +27,7 @@ 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' }]}>
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
 <TabItem value="angular">
 
@@ -153,68 +153,6 @@ export const TabButtonExample: React.FC = () => (
 </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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
-            <ion-label>Speakers</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="map" href="/app/tabs/(map:map)">
-            <ion-icon name="map" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
-            <ion-label>About</ion-label>
-          </ion-tab-button>
-        </ion-tab-bar>
-      </ion-tabs>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
 <TabItem value="vue">
 
 ```html
diff --git a/docs/api/tab.md b/docs/api/tab.md
index 3dd6576e4a8..f361abaac68 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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.
+ Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
 :::
 
 
diff --git a/versioned_docs/version-v5/api/tab-bar.md b/versioned_docs/version-v5/api/tab-bar.md
index b1e79d6d4f2..002dad4e8bf 100644
--- a/versioned_docs/version-v5/api/tab-bar.md
+++ b/versioned_docs/version-v5/api/tab-bar.md
@@ -18,7 +18,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.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' }]}>
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
 <TabItem value="angular">
 
@@ -96,44 +96,6 @@ export const TabBarExample: React.FC = () => (
 
 </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
diff --git a/versioned_docs/version-v5/api/tab-button.md b/versioned_docs/version-v5/api/tab-button.md
index 5244dbffbe7..83100e90adb 100644
--- a/versioned_docs/version-v5/api/tab-button.md
+++ b/versioned_docs/version-v5/api/tab-button.md
@@ -20,7 +20,7 @@ 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' }]}>
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
 <TabItem value="angular">
 
@@ -140,66 +140,6 @@ export const TabButtonExample: React.FC = () => (
 
 </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
diff --git a/versioned_docs/version-v5/api/tab.md b/versioned_docs/version-v5/api/tab.md
index 1f34ac2b184..9f54b12145a 100644
--- a/versioned_docs/version-v5/api/tab.md
+++ b/versioned_docs/version-v5/api/tab.md
@@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/tab/slots.md';
 
 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: 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.
+> Note: This component should only be used with vanilla 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.
 
diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.md
index cbf15815ba7..b8ab1b26f8f 100644
--- a/versioned_docs/version-v6/api/tab-bar.md
+++ b/versioned_docs/version-v6/api/tab-bar.md
@@ -28,7 +28,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.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' }]}>
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
 <TabItem value="angular">
 
@@ -106,44 +106,6 @@ export const TabBarExample: React.FC = () => (
 
 </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
diff --git a/versioned_docs/version-v6/api/tab-button.md b/versioned_docs/version-v6/api/tab-button.md
index a989563be88..4fdac8afaa6 100644
--- a/versioned_docs/version-v6/api/tab-button.md
+++ b/versioned_docs/version-v6/api/tab-button.md
@@ -22,7 +22,7 @@ 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' }]}>
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
 <TabItem value="angular">
 
@@ -142,66 +142,6 @@ export const TabButtonExample: React.FC = () => (
 
 </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
diff --git a/versioned_docs/version-v6/api/tab.md b/versioned_docs/version-v6/api/tab.md
index deafa889116..5b6cd8cd79e 100644
--- a/versioned_docs/version-v6/api/tab.md
+++ b/versioned_docs/version-v6/api/tab.md
@@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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.
+Note: This component should only be used with vanilla 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.

From f143f3013b034f746a8ed327e2ecf038aec6fc96 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 26 Apr 2023 14:15:35 -0400
Subject: [PATCH 349/469] chore(crowdin): api docs are no longer ignored
 (#2938)

---
 crowdin.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/crowdin.yml b/crowdin.yml
index 33a536865ca..c237cf6e3bd 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -8,6 +8,5 @@ files:
   - source: /docs/**/*
     translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%
     ignore:
-      - /docs/api/**/*
       - /docs/cli/commands/**/*
       - /docs/native/**/*

From 3a20ba529d05d7783ca4b502d93a880e5b7af008 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 27 Apr 2023 14:14:45 -0500
Subject: [PATCH 350/469] fix(docsdemo, playground): add keys to list items
 (#2940)

---
 src/components/global/DocDemo/index.js     |  1 +
 src/components/global/Playground/index.tsx | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/global/DocDemo/index.js b/src/components/global/DocDemo/index.js
index d43d6ed2f8a..b7611be1910 100644
--- a/src/components/global/DocDemo/index.js
+++ b/src/components/global/DocDemo/index.js
@@ -48,6 +48,7 @@ const DocDemo = (props) => {
           })}
           title={`Toggle ${mode === 'ios' ? 'iOS' : 'Android'} mode`}
           onClick={() => setIonicMode(mode)}
+          key={mode}
         >
           {mode === 'ios' ? 'iOS' : 'Android'}
         </button>
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 2ef8505f1e0..6de23298974 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -567,22 +567,22 @@ export default function Playground({
         </div>
         {renderIframes
           ? [
-              <div className="playground__preview">
+              <div className="playground__preview" key="preview">
                 {!iframesLoaded && renderLoadingScreen()}
                 {/*
-              We render two iframes, one for each mode.
-              When the set mode changes, we hide one frame and
-              show the other. This is done to avoid flickering
-              and doing unnecessary reloads when switching modes.
-            */}
+                  We render two iframes, one for each mode.
+                  When the set mode changes, we hide one frame and
+                  show the other. This is done to avoid flickering
+                  and doing unnecessary reloads when switching modes.
+                */}
                 {devicePreview
                   ? [
-                      <div className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
+                      <div key="ios-iframe" className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
                         <device-preview mode="ios">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
                         </device-preview>
                       </div>,
-                      <div className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
+                      <div key="md-iframe" className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
                         <device-preview mode="md">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
                         </device-preview>
@@ -590,6 +590,7 @@ export default function Playground({
                     ]
                   : [
                       <iframe
+                        key="ios-iframe"
                         height={frameSize}
                         className={!isIOS ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'ios')}
@@ -597,6 +598,7 @@ export default function Playground({
                         aria-hidden={!isIOS ? 'true' : null}
                       ></iframe>,
                       <iframe
+                        key="md-iframe"
                         height={frameSize}
                         className={!isMD ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'md')}

From 9675a8ad33af7abbe67f502b5391a789af623dc0 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 27 Apr 2023 14:47:05 -0500
Subject: [PATCH 351/469] fix(ColorAccordion, LayeredColorsSelect): add keys to
 list items (#2942)

---
 src/components/page/theming/ColorAccordion/index.tsx      | 1 +
 src/components/page/theming/LayeredColorsSelect/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/page/theming/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx
index bdd98a43e0c..d56967bf3ba 100755
--- a/src/components/page/theming/ColorAccordion/index.tsx
+++ b/src/components/page/theming/ColorAccordion/index.tsx
@@ -38,6 +38,7 @@ export default function ColorAccordion({ ...props }) {
 
         return (
           <li
+            key={color}
             className={clsx({
               [styles.colorMenuItem]: true,
               [styles.colorMenuItemActive]: color === activeColor,
diff --git a/src/components/page/theming/LayeredColorsSelect/index.tsx b/src/components/page/theming/LayeredColorsSelect/index.tsx
index acbe66f5278..eb1ac56058c 100755
--- a/src/components/page/theming/LayeredColorsSelect/index.tsx
+++ b/src/components/page/theming/LayeredColorsSelect/index.tsx
@@ -93,7 +93,7 @@ export default function LayeredColorsSelect({ ...props }) {
           const codeColor = variation.rgb ? `rgb(${variation.value})` : `${variation.value}`;
 
           return (
-            <tr>
+            <tr key={variation.name}>
               <td className={styles.colorName}>{variation.name}</td>
               <td className={styles.colorProperty}>
                 <code>{variation.property}</code>

From 069b13451f6e3c5cc254d8be7de42612b2c9e191 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 27 Apr 2023 14:47:22 -0500
Subject: [PATCH 352/469] fix(docdemo, coloraccordion): correctly format
 SVG/CSS props (#2941)

---
 src/components/global/DocDemo/index.js           |  2 +-
 .../page/theming/ColorAccordion/index.tsx        | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/global/DocDemo/index.js b/src/components/global/DocDemo/index.js
index b7611be1910..61740542956 100644
--- a/src/components/global/DocDemo/index.js
+++ b/src/components/global/DocDemo/index.js
@@ -79,7 +79,7 @@ const DocDemo = (props) => {
         <svg className="docs-demo-device__ios-notch" viewBox="0 0 219 31">
           <path
             d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z"
-            fill-rule="evenodd"
+            fillRule="evenodd"
           />
         </svg>
         <iframe
diff --git a/src/components/page/theming/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx
index d56967bf3ba..5e2ee0ab501 100755
--- a/src/components/page/theming/ColorAccordion/index.tsx
+++ b/src/components/page/theming/ColorAccordion/index.tsx
@@ -45,7 +45,7 @@ export default function ColorAccordion({ ...props }) {
             })}
             style={
               {
-                'background-color': `var(--ion-color-${color})`,
+                'backgroundColor': `var(--ion-color-${color})`,
                 color: `var(--ion-color-${color}-contrast)`,
               } as any
             }
@@ -59,17 +59,17 @@ export default function ColorAccordion({ ...props }) {
               <g
                 id="Welcome"
                 stroke="none"
-                stroke-width="1"
+                strokeWidth="1"
                 fill="none"
-                fill-rule="evenodd"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                fillRule="evenodd"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
                 <g
                   id="Desktop-HD"
                   transform="translate(-1025.000000, -335.000000)"
                   stroke="currentColor"
-                  stroke-width="2"
+                  strokeWidth="2"
                 >
                   <polyline
                     id="arrow"
@@ -85,7 +85,7 @@ export default function ColorAccordion({ ...props }) {
                 className={styles.colorSubmenuItem}
                 style={
                   {
-                    'background-color': `var(--ion-color-${color}-shade)`,
+                    'backgroundColor': `var(--ion-color-${color}-shade)`,
                     color: `var(--ion-color-${color}-contrast)`,
                   } as any
                 }
@@ -99,7 +99,7 @@ export default function ColorAccordion({ ...props }) {
                 className={styles.colorSubmenuItem}
                 style={
                   {
-                    'background-color': `var(--ion-color-${color}-tint)`,
+                    'backgroundColor': `var(--ion-color-${color}-tint)`,
                     color: `var(--ion-color-${color}-contrast)`,
                   } as any
                 }

From 53e69e68cb0082d8f21d2497f893a76107be9fba Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Fri, 28 Apr 2023 06:50:34 -0600
Subject: [PATCH 353/469] chore(contributing): remove slack link on v5 (#2939)

---
 versioned_docs/version-v5/contributing/how-to-contribute.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/versioned_docs/version-v5/contributing/how-to-contribute.md b/versioned_docs/version-v5/contributing/how-to-contribute.md
index 76372852bff..df5f6efbd23 100644
--- a/versioned_docs/version-v5/contributing/how-to-contribute.md
+++ b/versioned_docs/version-v5/contributing/how-to-contribute.md
@@ -12,7 +12,7 @@ Please see the [Contributor Code of Conduct](coc.md) for information on the rule
 
 ## Creating an Issue
 
-- If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](https://ionicworldwide.herokuapp.com/) group.
+- 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.
 

From ea89c02fd3caf2e94bbac1bc48d40e007fbdd033 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 1 May 2023 10:01:37 -0500
Subject: [PATCH 354/469] docs(Swiper): fix typo in slidesPerView value (#2945)

---
 docs/angular/slides.md                      | 2 +-
 docs/vue/slides.md                          | 2 +-
 versioned_docs/version-v6/angular/slides.md | 2 +-
 versioned_docs/version-v6/vue/slides.md     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index f294bcc351c..5144016e939 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -171,7 +171,7 @@ Swiper options should be provided as individual properties directly on the `<swi
 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-slides [options]="{ slidesPerView: 3, loop: true }">
   <ion-slide>Slide 1</ion-slide>
   <ion-slide>Slide 3</ion-slide>
   <ion-slide>Slide 3</ion-slide>
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 854c845d6d0..8701a90c349 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -309,7 +309,7 @@ Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` opti
 
 ```html
 <template>
-  <ion-slides :options="{ slidesPerView: true, loop: true }">
+  <ion-slides :options="{ slidesPerView: 3, loop: true }">
     <ion-slide>Slide 1</ion-slide>
     <ion-slide>Slide 2</ion-slide>
     <ion-slide>Slide 3</ion-slide>
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
index e971d03c557..76e7a52603c 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -169,7 +169,7 @@ Swiper options should be provided as individual properties directly on the `<swi
 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-slides [options]="{ slidesPerView: 3, loop: true }">
   <ion-slide>Slide 1</ion-slide>
   <ion-slide>Slide 3</ion-slide>
   <ion-slide>Slide 3</ion-slide>
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index e28f84deba5..c6141086516 100644
--- a/versioned_docs/version-v6/vue/slides.md
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -307,7 +307,7 @@ Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` opti
 
 ```html
 <template>
-  <ion-slides :options="{ slidesPerView: true, loop: true }">
+  <ion-slides :options="{ slidesPerView: 3, loop: true }">
     <ion-slide>Slide 1</ion-slide>
     <ion-slide>Slide 3</ion-slide>
     <ion-slide>Slide 3</ion-slide>

From 815edef870f00b77e2356cd7edce3368b676038a Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Mon, 1 May 2023 11:27:56 -0500
Subject: [PATCH 355/469] docs(android): update where to find SDK/AVD managers
 (#2947)

Co-authored-by: rtpHarry <rtpHarry@users.noreply.github.com>
---
 docs/developing/android.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/developing/android.md b/docs/developing/android.md
index d27d9ae62f2..3b7baaca186 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -38,7 +38,7 @@ By default, the latest stable SDK Platform is installed, which includes a collec
 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.
+For future reference, the Android SDK can be managed with Android Studio from the context menu at the top right of the Android Studio welcome screen (select **SDK Manager**) or **Tools** &raquo; **SDK Manager** inside Android projects.
 
 ### Configuring Command Line Tools
 
@@ -79,7 +79,7 @@ In `~/.bashrc`, `~/.bash_profile`, or similar shell startup scripts, make the fo
 
 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.
+AVDs are managed with the Virtual Device Manager. In the Android Studio welcome screen, the context menu at the top right, then **Virtual Device Manager**. The Virtual Device Manager can also be opened inside Android projects in the **Tools** &raquo; **Device Manager** menu.
 
 ![AVD Setup](/img/installation/android-studio-avd-setup.png)
 

From 8585a9ff4de2d4ab8a127924eff13f80a536d802 Mon Sep 17 00:00:00 2001
From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com>
Date: Mon, 1 May 2023 20:48:07 -0600
Subject: [PATCH 356/469] chore(intro/next): Elite Ionic -> Ionic Start (#2931)

---
 src/components/page/intro/next/DeveloperExperts/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/page/intro/next/DeveloperExperts/index.tsx b/src/components/page/intro/next/DeveloperExperts/index.tsx
index c55c2462127..0d9311c7875 100644
--- a/src/components/page/intro/next/DeveloperExperts/index.tsx
+++ b/src/components/page/intro/next/DeveloperExperts/index.tsx
@@ -14,8 +14,8 @@ export default function DeveloperExperts() {
         <a href="https://ionicacademy.com" target="_blank" rel="noopener noreferrer">
           Ionic Academy →
         </a>
-        <a href="https://www.joshmorony.com/elite" target="_blank" rel="noopener noreferrer">
-          Elite Ionic →
+        <a href="https://ionicstart.com" target="_blank" rel="noopener noreferrer">
+          Ionic Start →
         </a>
         <a href="https://ionicthemes.com" target="_blank" rel="noopener noreferrer">
           Ionic Themes →

From 66a7d124bd5824e95fad2d93ca2970dc69fa0094 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 2 May 2023 22:04:32 -0400
Subject: [PATCH 357/469] docs(developing): tip for changing node_modules
 permissions (#2950)

Co-authored-by: Utku Demir <50655392+Demir-Utku@users.noreply.github.com>
---
 docs/developing/tips.md                      | 1 +
 versioned_docs/version-v5/developing/tips.md | 1 +
 versioned_docs/version-v6/developing/tips.md | 1 +
 3 files changed, 3 insertions(+)

diff --git a/docs/developing/tips.md b/docs/developing/tips.md
index 1b115a3644a..2adf19ea58d 100644
--- a/docs/developing/tips.md
+++ b/docs/developing/tips.md
@@ -69,6 +69,7 @@ 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) /usr/lib/node_modules
 $ sudo chown -R $(whoami) ~/.npm ~/.npmrc
 ```
 
diff --git a/versioned_docs/version-v5/developing/tips.md b/versioned_docs/version-v5/developing/tips.md
index d854de40bea..f5155db1faf 100644
--- a/versioned_docs/version-v5/developing/tips.md
+++ b/versioned_docs/version-v5/developing/tips.md
@@ -59,6 +59,7 @@ 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) /usr/lib/node_modules
 $ sudo chown -R $(whoami) ~/.npm ~/.npmrc
 ```
 
diff --git a/versioned_docs/version-v6/developing/tips.md b/versioned_docs/version-v6/developing/tips.md
index 1b115a3644a..2adf19ea58d 100644
--- a/versioned_docs/version-v6/developing/tips.md
+++ b/versioned_docs/version-v6/developing/tips.md
@@ -69,6 +69,7 @@ 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) /usr/lib/node_modules
 $ sudo chown -R $(whoami) ~/.npm ~/.npmrc
 ```
 

From f4adec9d4e3bb18db2126e763872015747598497 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Wed, 3 May 2023 11:41:04 -0400
Subject: [PATCH 358/469] docs(breadcrumbs): update vue example (#2949)

---
 .../code/stackblitz/v7/vue/package-lock.json  | 60 +++++++++----------
 static/code/stackblitz/v7/vue/package.json    |  4 +-
 .../v7/breadcrumbs/theming/colors/vue.md      | 10 ++--
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index 28186aee5ff..b49503fdc08 100644
--- a/static/code/stackblitz/v7/vue/package-lock.json
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -48,36 +48,36 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
-      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.4.tgz",
+      "integrity": "sha512-tS1RfWn+L3jVpU833d7QQs1FQO1MlbDQL6sMaYBOYcE1nNZuDTd++zcOS264eklNnZu6z7PJmd04dj3DnQjsmA==",
       "dependencies": {
-        "@stencil/core": "^3.1.0",
+        "@stencil/core": "^3.2.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0.tgz",
-      "integrity": "sha512-bikmbUm59EIciZS/Xdm3dhcoeg3PpoiFHl5YsgaydgiZccV7Hu9y7n5zT1ydIPYnJryb2gRaNQ4N8O4JvDll8w==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.4.tgz",
+      "integrity": "sha512-yHJhcfdrY6ePbOWPX1njmnBryWKFmdVGIGYm6bNGiWsFFTzdP913n8TpG+Eyvhoi9Zi2CYQl/sHvmuF2GuaqTQ==",
       "dependencies": {
-        "@ionic/core": "7.0.0",
+        "@ionic/core": "7.0.4",
         "ionicons": "^7.0.0"
       }
     },
     "node_modules/@ionic/vue-router": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0.tgz",
-      "integrity": "sha512-OFm1lRFQ2rkrjdtjWBsUfsRa6b/FZ+1jez8gLfS2z/nM8yw5MFW7vnfPWgLHBGwWtQ++6MYpiSkybc7XQk4Kbw==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.4.tgz",
+      "integrity": "sha512-kEowloxxjnoDaMeoli2rWHVUvnEUqkK95juik79E8TaIXkK15QJdl8QgB7hCvNMER20yVT/tgx87DxxYOhFflg==",
       "dependencies": {
-        "@ionic/vue": "7.0.0"
+        "@ionic/vue": "7.0.4"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
-      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
+      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -907,36 +907,36 @@
       "optional": true
     },
     "@ionic/core": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
-      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.4.tgz",
+      "integrity": "sha512-tS1RfWn+L3jVpU833d7QQs1FQO1MlbDQL6sMaYBOYcE1nNZuDTd++zcOS264eklNnZu6z7PJmd04dj3DnQjsmA==",
       "requires": {
-        "@stencil/core": "^3.1.0",
+        "@stencil/core": "^3.2.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/vue": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0.tgz",
-      "integrity": "sha512-bikmbUm59EIciZS/Xdm3dhcoeg3PpoiFHl5YsgaydgiZccV7Hu9y7n5zT1ydIPYnJryb2gRaNQ4N8O4JvDll8w==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.4.tgz",
+      "integrity": "sha512-yHJhcfdrY6ePbOWPX1njmnBryWKFmdVGIGYm6bNGiWsFFTzdP913n8TpG+Eyvhoi9Zi2CYQl/sHvmuF2GuaqTQ==",
       "requires": {
-        "@ionic/core": "7.0.0",
+        "@ionic/core": "7.0.4",
         "ionicons": "^7.0.0"
       }
     },
     "@ionic/vue-router": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.0.tgz",
-      "integrity": "sha512-OFm1lRFQ2rkrjdtjWBsUfsRa6b/FZ+1jez8gLfS2z/nM8yw5MFW7vnfPWgLHBGwWtQ++6MYpiSkybc7XQk4Kbw==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.4.tgz",
+      "integrity": "sha512-kEowloxxjnoDaMeoli2rWHVUvnEUqkK95juik79E8TaIXkK15QJdl8QgB7hCvNMER20yVT/tgx87DxxYOhFflg==",
       "requires": {
-        "@ionic/vue": "7.0.0"
+        "@ionic/vue": "7.0.4"
       }
     },
     "@stencil/core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
-      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ=="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
+      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
     },
     "@vitejs/plugin-vue": {
       "version": "2.3.4",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index b8f118f3bcd..d2f1f661387 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "^7.0.0",
-    "@ionic/vue-router": "^7.0.0",
+    "@ionic/vue": "^7.0.4",
+    "@ionic/vue-router": "^7.0.4",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
diff --git a/static/usage/v7/breadcrumbs/theming/colors/vue.md b/static/usage/v7/breadcrumbs/theming/colors/vue.md
index 5d29a975608..357d76b7422 100644
--- a/static/usage/v7/breadcrumbs/theming/colors/vue.md
+++ b/static/usage/v7/breadcrumbs/theming/colors/vue.md
@@ -1,10 +1,10 @@
 ```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 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>
 </template>
 

From a72013d388002be8319467f0ae05bc652bbef732 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 3 May 2023 16:46:40 -0400
Subject: [PATCH 359/469] docs(lifecycle): clarify method descriptions (#2951)

Co-authored-by: BAYiTUPAi <BAYiTUPAi@users.noreply.github.com>
---
 docs/angular/lifecycle.md | 6 +++---
 docs/react/lifecycle.md   | 6 +++---
 docs/vue/lifecycle.md     | 7 +++----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md
index 5bf7d113370..ddb7b902fbb 100644
--- a/docs/angular/lifecycle.md
+++ b/docs/angular/lifecycle.md
@@ -37,9 +37,9 @@ In addition to the Angular life cycle events, Ionic Angular provides a few addit
 | 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.        |
+| `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 *from* has *finished* animating.  |
 
 These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
 
diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md
index f43992d2163..9d348b95013 100644
--- a/docs/react/lifecycle.md
+++ b/docs/react/lifecycle.md
@@ -20,9 +20,9 @@ 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.        |
+| `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 *from* has *finished* animating.  |
 
 These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
 
diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index a36def3597a..b9f16fc9cad 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -9,13 +9,12 @@ This guide discusses how to use the Ionic Framework Lifecycle events in an Ionic
 ## 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.        |
+| `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 *from* has *finished* animating.  |
 
 These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
 

From be3c382116ad9b5ad08961deba8d8f5933939a02 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 4 May 2023 12:39:14 -0400
Subject: [PATCH 360/469] docs(updating): add angular toolkit upgrade to v7
 upgrade guide (#2952)

---
 docs/updating/7-0.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index 4bd65c2c7e9..b2301a246cc 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -29,12 +29,14 @@ npm install rxjs@7.5.0
 npm install @ionic/angular@7
 ```
 
-If you are using Ionic Angular Server, be sure to update that as well:
+If you are using Ionic Angular Server and Ionic Angular Toolkit, be sure to update those as well:
 
 ```shell
-npm install @ionic/angular@7 @ionic/angular-server@7
+npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9
 ```
 
+> Note: `@ionic/angular-toolkit@9` requires a minimum of Angular 15. If you are still on Angular 14, then you can skip updating to `@ionic/angular-toolkit@9`.
+
 ### React
 
 1. Ionic 7 supports React 17+. Update to the latest version of React:

From 8db9610c3d8156f479ab7a29401fe35edd1bdc14 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 4 May 2023 13:46:22 -0400
Subject: [PATCH 361/469] chore(lint): add prettier and lint on CI (#2946)

- Adds prettier to a lint command (prettier was installed just not used anywhere)
- Runs `npm install` & `npm lint` on CI
- Updates the `.prettierignore` to be more up-to-date with the current docs structure
  - `static/code/stackblitz` files were ignored because it was modifying the indentation surrounding `{ TEMPLATE }` and this caused the StackBlitz to look worse when opened
- Adds `mdx` as a parser to the `@ionic/prettier-config` and updates this repo to use that version
---
 .github/workflows/CI.yml                      |  27 ++
 .prettierignore                               |  10 +-
 .prettierrc.js                                |  11 -
 docs/angular/slides.md                        |  20 +-
 docs/cli/livereload.md                        |   3 +-
 docs/developing/config.md                     |  84 +++--
 docs/developing/config/global/index.md        |  16 +-
 docs/developing/config/per-component/index.md |  22 +-
 .../config/per-platform-fallback/index.md     |  24 +-
 .../config/per-platform-overrides/index.md    |   8 +-
 docs/developing/config/per-platform/index.md  |   7 +-
 docs/developing/hardware-back-button.md       |   8 +-
 docs/layout/css-utilities.md                  |   9 +-
 docs/layout/structure.md                      |   4 -
 docs/native-faq.md                            |   9 +-
 docs/native.md                                |   4 -
 docs/react/navigation.md                      |  46 ++-
 docs/react/quickstart.md                      |   2 +-
 docs/reference/browser-support.md             |  11 +-
 docs/reference/support.md                     |  42 +--
 docs/theming/css-shadow-parts.md              |   8 +-
 docs/updating/6-0.md                          |  69 ++--
 docs/vue/navigation.md                        |  24 +-
 docs/vue/pwa.md                               |  13 +-
 docs/vue/quickstart.md                        |  33 +-
 docs/vue/slides.md                            |   2 +-
 docs/vue/your-first-app.md                    |   2 +-
 docs/vue/your-first-app/2-taking-photos.md    |   2 +-
 package-lock.json                             |  27 +-
 package.json                                  |   9 +-
 scripts/api-ja.js                             |   4 +-
 scripts/release-notes.js                      |  15 +-
 sidebars.js                                   |  26 +-
 src/components/global/Playground/index.tsx    |  21 +-
 .../global/Playground/stackblitz.utils.ts     | 156 +++++----
 .../global/PlaygroundTabs/index.tsx           |   8 +-
 .../native/NativeEnterpriseCard/index.tsx     |  10 +-
 .../page/theming/ColorAccordion/index.tsx     |   6 +-
 static/demos/api/alert/index.html             |   2 +-
 static/demos/api/card/index.html              |   4 +-
 static/demos/api/datetime/index.html          |   2 +-
 static/demos/api/menu/index.html              |   4 +-
 static/demos/color-generator/index.html       |  51 ++-
 .../accessibility/animations/demo.html        |  84 +++--
 .../accessibility/animations/javascript.md    |  46 ++-
 static/usage/v6/accordion/basic/angular.md    |  12 +-
 static/usage/v6/accordion/basic/demo.html     |  84 +++--
 static/usage/v6/accordion/basic/javascript.md |  12 +-
 static/usage/v6/accordion/basic/react.md      |   7 +-
 static/usage/v6/accordion/basic/vue.md        |  25 +-
 .../angular/example_component_css.md          |  10 +-
 .../angular/example_component_html.md         |  12 +-
 .../advanced-expansion-styles/demo.html       | 138 ++++----
 .../advanced-expansion-styles/javascript.md   |  20 +-
 .../react/main_css.md                         |  10 +-
 .../advanced-expansion-styles/vue.md          |  39 +--
 .../customization/expansion-styles/angular.md |  12 +-
 .../customization/expansion-styles/demo.html  |  84 +++--
 .../expansion-styles/javascript.md            |  12 +-
 .../customization/expansion-styles/react.md   |   7 +-
 .../customization/expansion-styles/vue.md     |  25 +-
 .../accordion/customization/icons/demo.html   |  84 +++--
 .../customization/icons/javascript.md         |  12 +-
 .../v6/accordion/customization/icons/react.md |   7 +-
 .../v6/accordion/customization/icons/vue.md   |  29 +-
 .../theming/angular/example_component_html.md |  12 +-
 .../theming/angular/global_css.md             |  10 +-
 .../accordion/customization/theming/demo.html | 126 ++++----
 .../customization/theming/javascript.md       |  24 +-
 .../customization/theming/react/main_css.md   |  10 +-
 .../customization/theming/react/main_tsx.md   |   7 +-
 .../v6/accordion/customization/theming/vue.md |  41 +--
 .../v6/accordion/disable-group/demo.html      |  84 +++--
 .../v6/accordion/disable/group/demo.html      |  84 +++--
 .../v6/accordion/disable/individual/demo.html |  84 +++--
 .../v6/accordion/listen-changes/demo.html     | 119 ++++---
 static/usage/v6/accordion/multiple/demo.html  |  92 +++---
 .../v6/accordion/readonly/group/angular.md    |  12 +-
 .../v6/accordion/readonly/group/demo.html     |  84 +++--
 .../v6/accordion/readonly/group/javascript.md |  12 +-
 .../v6/accordion/readonly/group/react.md      |   7 +-
 .../usage/v6/accordion/readonly/group/vue.md  |  25 +-
 .../accordion/readonly/individual/angular.md  |  12 +-
 .../accordion/readonly/individual/demo.html   |  84 +++--
 .../readonly/individual/javascript.md         |  12 +-
 .../v6/accordion/readonly/individual/react.md |   7 +-
 .../v6/accordion/readonly/individual/vue.md   |  25 +-
 static/usage/v6/accordion/toggle/demo.html    | 118 ++++---
 static/usage/v6/action-sheet/basic/demo.html  | 124 ++++----
 .../theming/css-properties/demo.html          | 124 ++++----
 .../v6/action-sheet/theming/styling/demo.html | 144 ++++-----
 .../buttons/angular/example_component_html.md |   2 +-
 static/usage/v6/alert/buttons/demo.html       | 112 +++----
 static/usage/v6/alert/buttons/javascript.md   |  10 +-
 .../alert/customization/angular/global_css.md |   4 +-
 static/usage/v6/alert/customization/demo.html | 132 ++++----
 .../v6/alert/customization/javascript.md      |   8 +-
 .../v6/alert/customization/react/main_css.md  |   4 +-
 .../radios/angular/example_component_html.md  |   2 +-
 static/usage/v6/alert/inputs/radios/demo.html |  92 +++---
 .../v6/alert/inputs/radios/javascript.md      |   8 +-
 .../angular/example_component_html.md         |   2 +-
 .../v6/alert/inputs/text-inputs/demo.html     | 100 +++---
 .../v6/alert/inputs/text-inputs/javascript.md |  12 +-
 .../angular/example_component_html.md         |   2 +-
 .../v6/alert/presenting/controller/demo.html  |  62 ++--
 static/usage/v6/avatar/basic/demo.html        |  45 ++-
 static/usage/v6/avatar/chip/demo.html         |  51 ++-
 static/usage/v6/avatar/chip/vue.md            |   2 +-
 static/usage/v6/avatar/item/demo.html         |  51 ++-
 static/usage/v6/avatar/item/vue.md            |   2 +-
 .../avatar/theming/css-properties/demo.html   |  54 ++--
 .../theming/css-properties/react/main_tsx.md  |   1 -
 .../v6/avatar/theming/css-properties/vue.md   |   2 +-
 .../basic/angular/page_two_component_ts.md    |   4 +-
 static/usage/v6/back-button/basic/demo.html   |  55 ++--
 .../v6/back-button/basic/vue/page_two_vue.md  |   2 +-
 .../custom/angular/page_two_component_ts.md   |   4 +-
 static/usage/v6/back-button/custom/demo.html  |  55 ++--
 .../v6/back-button/custom/vue/page_two_vue.md |   4 +-
 static/usage/v6/backdrop/basic/demo.html      |  61 ++--
 static/usage/v6/backdrop/styling/demo.html    | 106 +++----
 static/usage/v6/badge/basic/demo.html         |  68 ++--
 .../usage/v6/badge/theming/colors/demo.html   | 100 +++---
 .../angular/example_component_css.md          |   2 +-
 .../v6/badge/theming/css-properties/demo.html |  72 ++---
 .../theming/css-properties/react/main_css.md  |   2 +-
 static/usage/v6/breadcrumbs/basic/demo.html   |  50 ++-
 .../angular/example_component_html.md         |   2 +-
 .../expand-on-click/demo.html                 |  66 ++--
 .../collapsing-items/expand-on-click/vue.md   |   8 +-
 .../items-before-after/demo.html              | 120 ++++---
 .../collapsing-items/max-items/demo.html      |  54 ++--
 .../angular/example_component_html.md         |   2 +-
 .../popover-on-click/demo.html                |  96 +++---
 .../popover-on-click/javascript.md            |   6 +-
 .../popover-on-click/react.md                 |   5 +-
 .../collapsing-items/popover-on-click/vue.md  |  40 +--
 .../icons/custom-separators/demo.html         |  74 +++--
 .../icons/custom-separators/vue.md            |   2 +-
 .../icons/icons-on-items/demo.html            | 124 ++++----
 .../v6/breadcrumbs/theming/colors/demo.html   |  50 ++-
 .../angular/example_component_css.md          |   2 +-
 .../theming/css-properties/demo.html          |  64 ++--
 .../theming/css-properties/react/main_css.md  |   2 +-
 static/usage/v6/button/basic/angular.md       |   3 +-
 static/usage/v6/button/basic/demo.html        |  43 ++-
 static/usage/v6/button/basic/javascript.md    |   3 +-
 static/usage/v6/button/expand/angular.md      |   3 +-
 static/usage/v6/button/expand/demo.html       |  54 ++--
 static/usage/v6/button/expand/javascript.md   |   3 +-
 static/usage/v6/button/fill/demo.html         |  47 ++-
 static/usage/v6/button/icons/demo.html        |  61 ++--
 static/usage/v6/button/icons/vue.md           |   4 +-
 static/usage/v6/button/shape/angular.md       |   3 +-
 static/usage/v6/button/shape/demo.html        |  43 ++-
 static/usage/v6/button/shape/javascript.md    |   3 +-
 static/usage/v6/button/size/demo.html         |  45 ++-
 .../usage/v6/button/theming/colors/demo.html  |  72 ++---
 .../button/theming/css-properties/demo.html   |  88 +++---
 .../theming/css-properties/react/main_css.md  |   1 -
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 static/usage/v6/buttons/basic/demo.html       |  50 ++-
 static/usage/v6/buttons/placement/demo.html   |  86 +++--
 static/usage/v6/buttons/types/angular.md      |   8 +-
 static/usage/v6/buttons/types/demo.html       | 188 ++++++-----
 static/usage/v6/buttons/types/javascript.md   |   8 +-
 static/usage/v6/buttons/types/react.md        |   9 +-
 static/usage/v6/buttons/types/vue.md          |  10 +-
 static/usage/v6/card/basic/demo.html          |  78 +++--
 static/usage/v6/card/basic/react/main_tsx.md  |   4 +-
 static/usage/v6/card/buttons/demo.html        |  82 +++--
 .../usage/v6/card/buttons/react/main_tsx.md   |   4 +-
 static/usage/v6/card/list/demo.html           | 140 ++++----
 static/usage/v6/card/list/react/main_tsx.md   |  12 +-
 static/usage/v6/card/media/demo.html          |  80 +++--
 static/usage/v6/card/media/react/main_tsx.md  |   4 +-
 .../colors/angular/example_component_html.md  |  36 +--
 static/usage/v6/card/theming/colors/demo.html | 250 +++++++--------
 .../v6/card/theming/colors/javascript.md      |  36 +--
 .../v6/card/theming/colors/react/main_tsx.md  |  36 +--
 static/usage/v6/card/theming/colors/vue.md    |  36 +--
 .../v6/card/theming/css-properties/demo.html  | 112 ++++---
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 static/usage/v6/checkbox/basic/demo.html      |  46 ++-
 static/usage/v6/checkbox/basic/react.md       |   8 +-
 static/usage/v6/checkbox/basic/vue.md         |  10 +-
 .../usage/v6/checkbox/indeterminate/demo.html |  46 ++-
 .../usage/v6/checkbox/indeterminate/react.md  |   8 +-
 static/usage/v6/checkbox/indeterminate/vue.md |  10 +-
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../checkbox/theming/css-properties/demo.html |  66 ++--
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_css.md  |   2 +-
 .../theming/css-properties/react/main_tsx.md  |   8 +-
 .../v6/checkbox/theming/css-properties/vue.md |  12 +-
 static/usage/v6/chip/basic/demo.html          |  45 ++-
 static/usage/v6/chip/slots/demo.html          |  63 ++--
 static/usage/v6/chip/theming/colors/demo.html |  78 +++--
 .../v6/chip/theming/css-properties/demo.html  |  53 ++--
 static/usage/v6/content/basic/demo.html       |  48 ++-
 static/usage/v6/content/fixed/angular.md      |  50 ++-
 .../fixed/angular/example_component_css.md    |   2 +-
 .../fixed/angular/example_component_html.md   |  50 ++-
 static/usage/v6/content/fixed/demo.html       | 132 ++++----
 static/usage/v6/content/fixed/javascript.md   |  52 ++-
 static/usage/v6/content/fixed/react.md        |  50 ++-
 .../usage/v6/content/fixed/react/main_css.md  |   2 +-
 .../usage/v6/content/fixed/react/main_tsx.md  |  50 ++-
 static/usage/v6/content/fixed/vue.md          |  52 ++-
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |  58 +++-
 static/usage/v6/content/fullscreen/demo.html  | 150 ++++-----
 .../usage/v6/content/fullscreen/javascript.md |  60 +++-
 .../v6/content/fullscreen/react/main_css.md   |   2 +-
 .../v6/content/fullscreen/react/main_tsx.md   |  58 +++-
 static/usage/v6/content/fullscreen/vue.md     |  60 +++-
 .../usage/v6/content/header-footer/angular.md |   8 +-
 .../usage/v6/content/header-footer/demo.html  |  72 ++---
 .../v6/content/header-footer/javascript.md    |   8 +-
 .../usage/v6/content/header-footer/react.md   |   8 +-
 static/usage/v6/content/header-footer/vue.md  |   8 +-
 .../angular/example_component_html.md         |  53 +++-
 .../usage/v6/content/scroll-events/demo.html  | 134 ++++----
 .../v6/content/scroll-events/javascript.md    |  50 ++-
 .../usage/v6/content/scroll-events/react.md   |  53 +++-
 static/usage/v6/content/scroll-events/vue.md  |  57 +++-
 .../angular/example_component_html.md         |  50 ++-
 .../usage/v6/content/scroll-methods/demo.html | 146 +++++----
 .../v6/content/scroll-methods/javascript.md   |  50 ++-
 .../usage/v6/content/scroll-methods/react.md  |  58 +++-
 static/usage/v6/content/scroll-methods/vue.md |  52 ++-
 .../usage/v6/content/theming/colors/demo.html | 126 ++++----
 .../content/theming/css-properties/demo.html  |  60 ++--
 .../theming/css-shadow-parts/demo.html        |  64 ++--
 .../usage/v6/datetime-button/basic/demo.html  |  56 ++--
 .../usage/v6/datetime-button/basic/react.md   |   2 +-
 static/usage/v6/datetime-button/basic/vue.md  |   2 +-
 static/usage/v6/datetime/basic/demo.html      |  56 ++--
 .../customizing-button-texts/angular.md       |   7 +-
 .../customizing-button-texts/demo.html        |  52 ++-
 .../customizing-button-texts/javascript.md    |   6 +-
 .../buttons/customizing-button-texts/react.md |   9 +-
 .../buttons/customizing-button-texts/vue.md   |   8 +-
 .../buttons/customizing-buttons/demo.html     |  70 ++--
 .../buttons/customizing-buttons/react.md      |  18 +-
 .../buttons/customizing-buttons/vue.md        |   4 +-
 .../showing-confirmation-buttons/demo.html    |  52 ++-
 .../showing-confirmation-buttons/react.md     |   4 +-
 .../date-constraints/advanced/demo.html       |  74 +++--
 .../date-constraints/advanced/javascript.md   |   2 +-
 .../date-constraints/advanced/react.md        |   8 +-
 .../datetime/date-constraints/advanced/vue.md |  10 +-
 .../date-constraints/max-min/angular.md       |   6 +-
 .../date-constraints/max-min/demo.html        |  50 ++-
 .../date-constraints/max-min/javascript.md    |   6 +-
 .../date-constraints/max-min/react.md         |   8 +-
 .../datetime/date-constraints/max-min/vue.md  |   6 +-
 .../date-constraints/values/angular.md        |   5 +-
 .../date-constraints/values/demo.html         |  50 ++-
 .../date-constraints/values/javascript.md     |   5 +-
 .../datetime/date-constraints/values/react.md |   7 +-
 .../datetime/date-constraints/values/vue.md   |   5 +-
 .../array/angular/example_component_html.md   |   6 +-
 .../array/angular/example_component_ts.md     |   4 +-
 .../datetime/highlightedDates/array/demo.html | 106 ++++---
 .../highlightedDates/array/javascript.md      |   4 +-
 .../datetime/highlightedDates/array/react.md  |   4 +-
 .../v6/datetime/highlightedDates/array/vue.md |  16 +-
 .../callback/angular/example_component_ts.md  |   4 +-
 .../highlightedDates/callback/demo.html       |  96 +++---
 .../highlightedDates/callback/javascript.md   |   4 +-
 .../highlightedDates/callback/react.md        |   4 +-
 .../datetime/highlightedDates/callback/vue.md |   8 +-
 .../localization/custom-locale/demo.html      |  50 ++-
 .../localization/custom-locale/react.md       |   4 +-
 .../localization/first-day-of-week/demo.html  |  50 ++-
 .../localization/first-day-of-week/react.md   |   4 +-
 .../localization/hour-cycle/demo.html         |  50 ++-
 .../datetime/localization/hour-cycle/react.md |   4 +-
 .../locale-extension-tags/demo.html           |  50 ++-
 .../locale-extension-tags/react.md            |   4 +-
 .../localization/time-label/demo.html         |  54 ++--
 static/usage/v6/datetime/multiple/angular.md  |   6 +-
 static/usage/v6/datetime/multiple/demo.html   |  58 ++--
 static/usage/v6/datetime/multiple/react.md    |   8 +-
 static/usage/v6/datetime/multiple/vue.md      |   6 +-
 .../v6/datetime/presentation/date/demo.html   |  50 ++-
 .../v6/datetime/presentation/date/react.md    |   4 +-
 .../presentation/month-and-year/demo.html     |  50 ++-
 .../presentation/month-and-year/react.md      |   4 +-
 .../v6/datetime/presentation/time/demo.html   |  50 ++-
 .../v6/datetime/presentation/time/react.md    |   4 +-
 .../v6/datetime/presentation/wheel/demo.html  |  50 ++-
 .../v6/datetime/presentation/wheel/react.md   |   4 +-
 static/usage/v6/datetime/theming/demo.html    | 136 ++++----
 .../usage/v6/datetime/theming/javascript.md   |  18 +-
 .../v6/datetime/theming/react/main_css.md     |  12 +-
 static/usage/v6/datetime/theming/vue.md       |  18 +-
 .../title/customizing-title/demo.html         |  54 ++--
 .../title/showing-default-title/demo.html     |  50 ++-
 .../title/showing-default-title/react.md      |   4 +-
 static/usage/v6/fab/basic/demo.html           |  49 ++-
 static/usage/v6/fab/basic/vue.md              |   4 +-
 static/usage/v6/fab/button-sizing/demo.html   |  69 ++--
 static/usage/v6/fab/button-sizing/vue.md      |   4 +-
 static/usage/v6/fab/list-side/demo.html       |  97 +++---
 static/usage/v6/fab/list-side/vue.md          |   4 +-
 static/usage/v6/fab/positioning/angular.md    |   2 +-
 static/usage/v6/fab/positioning/demo.html     | 129 ++++----
 static/usage/v6/fab/positioning/javascript.md |   2 +-
 static/usage/v6/fab/positioning/react.md      |  11 +-
 static/usage/v6/fab/positioning/vue.md        |  15 +-
 static/usage/v6/fab/theming/colors/demo.html  |  99 +++---
 static/usage/v6/fab/theming/colors/vue.md     |   4 +-
 .../angular/example_component_css.md          |   4 +-
 .../theming/css-custom-properties/demo.html   |  86 +++--
 .../css-custom-properties/javascript.md       |   2 +-
 .../css-custom-properties/react/main_css.md   |   4 +-
 .../fab/theming/css-custom-properties/vue.md  |   6 +-
 .../angular/example_component_css.md          |   6 +-
 .../v6/fab/theming/css-shadow-parts/demo.html |  94 +++---
 .../theming/css-shadow-parts/javascript.md    |   4 +-
 .../css-shadow-parts/react/main_css.md        |   6 +-
 .../v6/fab/theming/css-shadow-parts/vue.md    |   8 +-
 static/usage/v6/footer/basic/demo.html        |  47 ++-
 .../angular/example_component_html.md         |  57 +++-
 .../v6/footer/custom-scroll-target/demo.html  | 156 +++++----
 .../footer/custom-scroll-target/javascript.md |  57 +++-
 .../custom-scroll-target/react/main_tsx.md    |  59 +++-
 .../v6/footer/custom-scroll-target/vue.md     |  57 +++-
 static/usage/v6/footer/fade/angular.md        |  57 +++-
 static/usage/v6/footer/fade/demo.html         | 131 ++++----
 static/usage/v6/footer/fade/javascript.md     |  57 +++-
 static/usage/v6/footer/fade/react.md          |  57 +++-
 static/usage/v6/footer/fade/vue.md            |  57 +++-
 static/usage/v6/footer/no-border/demo.html    |  47 ++-
 static/usage/v6/footer/translucent/angular.md |  57 +++-
 static/usage/v6/footer/translucent/demo.html  | 131 ++++----
 .../usage/v6/footer/translucent/javascript.md |  57 +++-
 static/usage/v6/footer/translucent/react.md   |  57 +++-
 static/usage/v6/footer/translucent/vue.md     |  57 +++-
 static/usage/v6/grid/basic/demo.html          | 136 ++++----
 .../grid/customizing/column-number/demo.html  |  90 +++---
 .../column-number/react/main_tsx.md           |   4 +-
 .../v6/grid/customizing/padding/demo.html     | 124 ++++----
 .../usage/v6/grid/customizing/width/demo.html | 106 +++----
 static/usage/v6/grid/fixed/demo.html          |  82 +++--
 .../angular/example_component_html.md         |  40 +--
 .../v6/grid/horizontal-alignment/demo.html    | 159 ++++------
 .../grid/horizontal-alignment/javascript.md   |  40 +--
 .../horizontal-alignment/react/main_tsx.md    |  40 +--
 .../usage/v6/grid/horizontal-alignment/vue.md |  40 +--
 .../usage/v6/grid/offset-responsive/demo.html | 122 ++++---
 .../grid/offset-responsive/react/main_tsx.md  |   8 +-
 static/usage/v6/grid/offset/demo.html         | 120 ++++---
 static/usage/v6/grid/offset/react/main_tsx.md |  16 +-
 .../v6/grid/push-pull-responsive/demo.html    | 124 ++++----
 .../push-pull-responsive/react/main_tsx.md    |  24 +-
 .../angular/example_component_html.md         |   5 +-
 static/usage/v6/grid/push-pull/demo.html      | 134 ++++----
 static/usage/v6/grid/push-pull/javascript.md  |   5 +-
 .../usage/v6/grid/push-pull/react/main_tsx.md |  23 +-
 static/usage/v6/grid/push-pull/vue.md         |  15 +-
 static/usage/v6/grid/size-auto/demo.html      | 136 ++++----
 .../usage/v6/grid/size-auto/react/main_tsx.md |  14 +-
 .../usage/v6/grid/size-responsive/demo.html   | 126 ++++----
 .../v6/grid/size-responsive/react/main_tsx.md |  40 ++-
 static/usage/v6/grid/size/demo.html           | 122 ++++---
 static/usage/v6/grid/size/react/main_tsx.md   |  12 +-
 .../angular/example_component_html.md         |  36 +--
 .../v6/grid/vertical-alignment/demo.html      | 171 +++++-----
 .../v6/grid/vertical-alignment/javascript.md  |  36 +--
 .../grid/vertical-alignment/react/main_tsx.md |  36 +--
 .../usage/v6/grid/vertical-alignment/vue.md   |  36 +--
 static/usage/v6/header/basic/demo.html        |  47 ++-
 static/usage/v6/header/condense/angular.md    |  57 +++-
 static/usage/v6/header/condense/demo.html     | 141 +++++----
 static/usage/v6/header/condense/javascript.md |  57 +++-
 static/usage/v6/header/condense/react.md      |  59 +++-
 static/usage/v6/header/condense/vue.md        |  57 +++-
 .../angular/example_component_html.md         |  57 +++-
 .../v6/header/custom-scroll-target/demo.html  | 156 +++++----
 .../custom-scroll-target/react/main_tsx.md    |  59 +++-
 .../v6/header/custom-scroll-target/vue.md     |  57 +++-
 static/usage/v6/header/fade/angular.md        |  57 +++-
 static/usage/v6/header/fade/demo.html         | 131 ++++----
 static/usage/v6/header/fade/javascript.md     |  57 +++-
 static/usage/v6/header/fade/react.md          |  57 +++-
 static/usage/v6/header/fade/vue.md            |  57 +++-
 static/usage/v6/header/no-border/demo.html    |  47 ++-
 static/usage/v6/header/translucent/angular.md |  57 +++-
 static/usage/v6/header/translucent/demo.html  | 131 ++++----
 .../usage/v6/header/translucent/javascript.md |  57 +++-
 static/usage/v6/header/translucent/react.md   |  57 +++-
 static/usage/v6/header/translucent/vue.md     |  57 +++-
 static/usage/v6/icon/basic/demo.html          |  47 ++-
 static/usage/v6/icon/basic/index.md           |   7 +-
 static/usage/v6/img/basic/angular.md          |   5 +-
 static/usage/v6/img/basic/demo.html           |  52 +--
 static/usage/v6/img/basic/javascript.md       |   5 +-
 static/usage/v6/img/basic/react.md            |   5 +-
 static/usage/v6/img/basic/vue.md              |   5 +-
 .../usage/v6/infinite-scroll/basic/demo.html  | 115 ++++---
 .../custom-infinite-scroll-content/demo.html  | 175 ++++++----
 .../infinite-scroll-content/demo.html         | 101 +++---
 static/usage/v6/input/basic/demo.html         | 104 +++---
 static/usage/v6/input/clear/demo.html         |  82 +++--
 static/usage/v6/input/clear/vue.md            |   5 +-
 static/usage/v6/input/fill/demo.html          |  74 +++--
 .../angular/example_component_html.md         |   6 +-
 .../filtering/angular/example_component_ts.md |  10 +-
 static/usage/v6/input/filtering/demo.html     |  64 ++--
 static/usage/v6/input/filtering/index.md      |  24 +-
 static/usage/v6/input/filtering/javascript.md |   4 +-
 static/usage/v6/input/filtering/react.md      |  22 +-
 static/usage/v6/input/filtering/vue.md        |  20 +-
 static/usage/v6/input/labels/demo.html        |  84 +++--
 .../usage/v6/input/theming/colors/demo.html   |  76 +++--
 .../angular/example_component_css.md          |   2 +-
 .../v6/input/theming/css-properties/demo.html |  72 ++---
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_css.md  |   2 +-
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 .../v6/input/theming/css-properties/vue.md    |   2 +-
 static/usage/v6/input/types/demo.html         | 104 +++---
 static/usage/v6/item-divider/basic/angular.md |   8 +-
 static/usage/v6/item-divider/basic/demo.html  | 112 ++++---
 .../usage/v6/item-divider/basic/javascript.md |   8 +-
 static/usage/v6/item-divider/basic/react.md   |   8 +-
 static/usage/v6/item-divider/basic/vue.md     |   8 +-
 .../v6/item-divider/theming/colors/demo.html  | 108 ++++---
 .../angular/example_component_html.md         |   4 +-
 .../theming/css-properties/demo.html          |  66 ++--
 .../theming/css-properties/javascript.md      |   4 +-
 .../theming/css-properties/react/main_tsx.md  |   5 +-
 .../theming/css-properties/vue.md             |   6 +-
 static/usage/v6/item-group/basic/demo.html    | 104 +++---
 .../v6/item-group/sliding-items/angular.md    |  56 +---
 .../v6/item-group/sliding-items/demo.html     | 192 +++++------
 .../v6/item-group/sliding-items/javascript.md |  56 +---
 .../v6/item-group/sliding-items/react.md      |  66 ++--
 .../usage/v6/item-group/sliding-items/vue.md  |  66 ++--
 static/usage/v6/item-sliding/basic/demo.html  | 110 ++++---
 .../v6/item-sliding/expandable/demo.html      |  76 +++--
 .../usage/v6/item-sliding/expandable/react.md |   8 +-
 static/usage/v6/item-sliding/icons/angular.md |  16 +-
 static/usage/v6/item-sliding/icons/demo.html  | 298 +++++++++---------
 .../usage/v6/item-sliding/icons/javascript.md |  16 +-
 static/usage/v6/item-sliding/icons/react.md   |  16 +-
 static/usage/v6/item-sliding/icons/vue.md     |  20 +-
 static/usage/v6/item/basic/angular.md         |  10 +-
 static/usage/v6/item/basic/demo.html          | 116 ++++---
 static/usage/v6/item/basic/javascript.md      |  10 +-
 static/usage/v6/item/basic/react.md           |   6 +-
 static/usage/v6/item/basic/vue.md             |   8 +-
 static/usage/v6/item/buttons/angular.md       |  20 +-
 static/usage/v6/item/buttons/demo.html        | 122 ++++---
 static/usage/v6/item/buttons/javascript.md    |  20 +-
 static/usage/v6/item/buttons/react.md         |   8 +-
 static/usage/v6/item/buttons/vue.md           |  24 +-
 static/usage/v6/item/clickable/demo.html      |  72 ++---
 static/usage/v6/item/counter/demo.html        |  78 +++--
 static/usage/v6/item/counter/react.md         |   5 +-
 static/usage/v6/item/counter/vue.md           |   4 +-
 static/usage/v6/item/detail-arrows/demo.html  | 122 ++++---
 static/usage/v6/item/detail-arrows/vue.md     |   1 +
 static/usage/v6/item/helper-error/demo.html   | 108 +++----
 .../usage/v6/item/helper-error/javascript.md  |  10 +-
 static/usage/v6/item/helper-error/react.md    |   5 +-
 static/usage/v6/item/helper-error/vue.md      |   8 +-
 static/usage/v6/item/icons/angular.md         |  16 +-
 static/usage/v6/item/icons/demo.html          |  88 +++---
 static/usage/v6/item/icons/javascript.md      |  16 +-
 static/usage/v6/item/icons/react.md           |  16 +-
 static/usage/v6/item/icons/vue.md             |  20 +-
 static/usage/v6/item/inputs/demo.html         | 144 +++++----
 static/usage/v6/item/inputs/react.md          |  11 +-
 static/usage/v6/item/inputs/vue.md            |  11 +-
 static/usage/v6/item/lines/angular.md         |   4 +-
 static/usage/v6/item/lines/demo.html          | 114 ++++---
 static/usage/v6/item/lines/javascript.md      |   4 +-
 static/usage/v6/item/lines/react.md           |   4 +-
 static/usage/v6/item/lines/vue.md             |   6 +-
 static/usage/v6/item/media/angular.md         |   8 +-
 static/usage/v6/item/media/demo.html          |  76 ++---
 static/usage/v6/item/media/javascript.md      |   8 +-
 static/usage/v6/item/media/react.md           |   8 +-
 static/usage/v6/item/media/vue.md             |   8 +-
 static/usage/v6/item/theming/colors/demo.html | 108 ++++---
 .../v6/item/theming/css-properties/demo.html  | 108 ++++---
 .../item/theming/css-shadow-parts/demo.html   | 108 ++++---
 .../v6/item/theming/input-highlight/demo.html |  84 +++--
 static/usage/v6/label/basic/demo.html         |  40 ++-
 static/usage/v6/label/input/demo.html         | 111 ++++---
 static/usage/v6/label/item/angular.md         |  10 +-
 static/usage/v6/label/item/demo.html          |  93 +++---
 static/usage/v6/label/item/javascript.md      |  10 +-
 static/usage/v6/label/item/react.md           |   6 +-
 static/usage/v6/label/item/vue.md             |   8 +-
 .../usage/v6/label/theming/colors/demo.html   |  68 ++--
 static/usage/v6/list-header/basic/demo.html   |  88 +++---
 static/usage/v6/list-header/buttons/demo.html |  90 +++---
 static/usage/v6/list-header/lines/demo.html   | 114 ++++---
 .../v6/list-header/theming/colors/demo.html   | 108 ++++---
 .../theming/css-properties/demo.html          |  62 ++--
 static/usage/v6/list/basic/demo.html          |  82 +++--
 static/usage/v6/list/inset/demo.html          |  90 +++---
 static/usage/v6/list/lines/demo.html          | 118 ++++---
 static/usage/v6/loading/controller/demo.html  |  68 ++--
 .../usage/v6/loading/controller/javascript.md |  16 +-
 static/usage/v6/loading/controller/react.md   |  15 +-
 static/usage/v6/loading/controller/vue.md     |  12 +-
 static/usage/v6/loading/spinners/demo.html    |  70 ++--
 .../usage/v6/loading/spinners/javascript.md   |  18 +-
 static/usage/v6/loading/spinners/react.md     |  17 +-
 static/usage/v6/loading/spinners/vue.md       |  12 +-
 .../v6/loading/theming/angular/global_css.md  |   2 +-
 static/usage/v6/loading/theming/demo.html     |  84 +++--
 static/usage/v6/loading/theming/javascript.md |  28 +-
 static/usage/v6/loading/theming/react.md      |  17 +-
 .../v6/loading/theming/react/main_css.md      |   2 +-
 .../v6/loading/theming/react/main_tsx.md      |  17 +-
 static/usage/v6/loading/theming/vue.md        |  12 +-
 static/usage/v6/menu/basic/angular.md         |   4 +-
 static/usage/v6/menu/basic/demo.html          |  70 ++--
 static/usage/v6/menu/basic/javascript.md      |   4 +-
 static/usage/v6/menu/basic/react.md           |  15 +-
 static/usage/v6/menu/basic/vue.md             |  17 +-
 .../theming/angular/example_component_css.md  |   2 +-
 .../theming/angular/example_component_html.md |   4 +-
 static/usage/v6/menu/theming/demo.html        |  88 +++---
 static/usage/v6/menu/theming/javascript.md    |   4 +-
 .../usage/v6/menu/theming/react/main_css.md   |   2 +-
 .../usage/v6/menu/theming/react/main_tsx.md   |  15 +-
 static/usage/v6/menu/theming/vue.md           |  17 +-
 static/usage/v6/menu/toggle/demo.html         |  78 +++--
 static/usage/v6/menu/toggle/react.md          |  13 +-
 static/usage/v6/menu/toggle/vue.md            |  13 +-
 .../type/angular/example_component_html.md    |   5 +-
 static/usage/v6/menu/type/demo.html           | 135 ++++----
 static/usage/v6/menu/type/javascript.md       |   3 +-
 static/usage/v6/menu/type/react.md            |   6 +-
 static/usage/v6/menu/type/vue.md              |  13 +-
 .../v6/modal/can-dismiss/boolean/demo.html    | 124 ++++----
 .../v6/modal/can-dismiss/function/demo.html   | 126 ++++----
 .../prevent-swipe-to-close/demo.html          | 108 ++++---
 static/usage/v6/modal/card/basic/demo.html    | 164 +++++-----
 static/usage/v6/modal/controller/demo.html    |  98 +++---
 .../usage/v6/modal/custom-dialogs/demo.html   | 144 ++++-----
 .../v6/modal/custom-dialogs/react/main_tsx.md |   2 +-
 static/usage/v6/modal/custom-dialogs/vue.md   |  18 +-
 static/usage/v6/modal/inline/basic/demo.html  | 116 ++++---
 .../usage/v6/modal/inline/is-open/demo.html   |  84 ++---
 .../v6/modal/performance/mount/angular.md     |   4 +-
 .../v6/modal/performance/mount/demo.html      |  94 +++---
 .../usage/v6/modal/performance/mount/react.md |  15 +-
 .../usage/v6/modal/performance/mount/vue.md   |  14 +-
 .../modal/sheet/background-content/demo.html  | 189 ++++++-----
 static/usage/v6/modal/sheet/basic/demo.html   | 148 +++++----
 .../v6/modal/sheet/handle-behavior/demo.html  |  68 ++--
 .../v6/modal/styling/animations/demo.html     | 207 ++++++------
 .../usage/v6/modal/styling/theming/demo.html  | 184 ++++++-----
 .../usage/v6/nav/modal-navigation/demo.html   | 156 +++++----
 static/usage/v6/nav/nav-link/demo.html        |  67 ++--
 static/usage/v6/note/basic/demo.html          |  41 ++-
 static/usage/v6/note/item/demo.html           |  64 ++--
 static/usage/v6/note/theming/colors/demo.html |  84 +++--
 .../v6/note/theming/css-properties/demo.html  |  50 ++-
 .../usage/v6/picker/multiple-column/demo.html | 178 ++++++-----
 .../usage/v6/picker/single-column/demo.html   | 125 ++++----
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../customization/positioning/demo.html       |  98 +++---
 .../positioning/react/main_css.md             |   2 +-
 .../v6/popover/customization/sizing/demo.html |  54 ++--
 .../styling/angular/global_css.md             |   2 +-
 .../popover/customization/styling/demo.html   |  76 +++--
 .../customization/styling/react/main_css.md   |   2 +-
 static/usage/v6/popover/nested/demo.html      |  72 ++---
 .../v6/popover/performance/mount/demo.html    |  46 ++-
 .../popover/performance/mount/javascript.md   |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../angular/popover_component_html.md         |   2 +-
 .../popover/presenting/controller/demo.html   | 106 +++----
 .../presenting/controller/javascript.md       |   2 +-
 .../presenting/controller/vue/popover_vue.md  |  14 +-
 .../angular/example_component_html.md         |   2 +-
 .../presenting/inline-isopen/demo.html        |  64 ++--
 .../presenting/inline-isopen/javascript.md    |   4 +-
 .../presenting/inline-trigger/demo.html       |  62 ++--
 .../buffer/angular/example_component_ts.md    |   2 +-
 static/usage/v6/progress-bar/buffer/demo.html |  87 +++--
 static/usage/v6/progress-bar/buffer/react.md  |   4 +-
 static/usage/v6/progress-bar/buffer/vue.md    |   4 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v6/progress-bar/determinate/demo.html     |  69 ++--
 .../v6/progress-bar/determinate/react.md      |   4 +-
 .../usage/v6/progress-bar/determinate/vue.md  |   4 +-
 .../v6/progress-bar/indeterminate/demo.html   |  41 ++-
 .../v6/progress-bar/indeterminate/react.md    |   4 +-
 .../v6/progress-bar/theming/colors/demo.html  |  68 ++--
 .../angular/example_component_html.md         |   3 +-
 .../theming/css-properties/demo.html          |  62 ++--
 .../theming/css-properties/react/main_tsx.md  |   3 +-
 .../theming/css-properties/vue.md             |   2 +-
 .../angular/example_component_html.md         |   3 +-
 .../theming/css-shadow-parts/demo.html        |  72 ++---
 .../css-shadow-parts/react/main_tsx.md        |   3 +-
 .../theming/css-shadow-parts/vue.md           |   2 +-
 static/usage/v6/radio/basic/demo.html         |  88 +++---
 .../usage/v6/radio/empty-selection/demo.html  |  88 +++---
 .../usage/v6/radio/theming/colors/demo.html   |  96 +++---
 .../v6/radio/theming/css-properties/demo.html |  92 +++---
 .../radio/theming/css-shadow-parts/demo.html  | 118 ++++---
 static/usage/v6/range/basic/demo.html         |  50 ++-
 static/usage/v6/range/dual-knobs/demo.html    |  64 ++--
 .../usage/v6/range/ion-change-event/demo.html |  69 ++--
 .../v6/range/ion-knob-move-event/demo.html    |  85 +++--
 static/usage/v6/range/pins/demo.html          |  62 ++--
 static/usage/v6/range/slots/demo.html         |  56 ++--
 .../usage/v6/range/snapping-ticks/demo.html   |  50 ++-
 .../v6/range/theming/css-properties/demo.html |  66 ++--
 .../range/theming/css-shadow-parts/demo.html  | 112 ++++---
 .../advanced/angular/example_component_ts.md  |  20 +-
 static/usage/v6/refresher/advanced/demo.html  | 152 +++++----
 .../usage/v6/refresher/advanced/javascript.md |  16 +-
 .../v6/refresher/advanced/react/main_tsx.md   |  40 ++-
 static/usage/v6/refresher/advanced/vue.md     |  44 ++-
 .../basic/angular/example_component_ts.md     |   2 +-
 static/usage/v6/refresher/basic/demo.html     |  70 ++--
 static/usage/v6/refresher/basic/react.md      |  11 +-
 .../angular/example_component_html.md         |   3 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v6/refresher/custom-content/demo.html     |  78 ++---
 .../v6/refresher/custom-content/javascript.md |   3 +-
 .../v6/refresher/custom-content/react.md      |  15 +-
 .../usage/v6/refresher/custom-content/vue.md  |   3 +-
 .../angular/example_component_ts.md           |   2 +-
 .../refresher/custom-scroll-target/demo.html  | 106 +++----
 .../custom-scroll-target/react/main_tsx.md    |  11 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v6/refresher/pull-properties/demo.html    |  70 ++--
 .../v6/refresher/pull-properties/react.md     |  11 +-
 .../basic/angular/example_component_html.md   |  20 +-
 .../basic/angular/example_component_ts.md     |   2 +-
 static/usage/v6/reorder/basic/demo.html       | 132 ++++----
 static/usage/v6/reorder/basic/javascript.md   |  22 +-
 static/usage/v6/reorder/basic/react.md        |  20 +-
 static/usage/v6/reorder/basic/vue.md          |  26 +-
 .../angular/example_component_html.md         |  20 +-
 .../angular/example_component_ts.md           |   2 +-
 static/usage/v6/reorder/custom-icon/demo.html | 152 ++++-----
 .../v6/reorder/custom-icon/javascript.md      |  22 +-
 static/usage/v6/reorder/custom-icon/react.md  |  20 +-
 static/usage/v6/reorder/custom-icon/vue.md    |  26 +-
 .../angular/example_component_html.md         |  20 +-
 .../v6/reorder/custom-scroll-target/demo.html | 150 ++++-----
 .../custom-scroll-target/javascript.md        |  22 +-
 .../custom-scroll-target/react/main_tsx.md    |  30 +-
 .../v6/reorder/custom-scroll-target/vue.md    |  28 +-
 .../angular/example_component_html.md         |  24 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v6/reorder/toggling-disabled/demo.html    | 150 ++++-----
 .../reorder/toggling-disabled/javascript.md   |  26 +-
 .../v6/reorder/toggling-disabled/react.md     |  36 +--
 .../usage/v6/reorder/toggling-disabled/vue.md |  32 +-
 .../angular/example_component_html.md         |   4 +-
 .../angular/example_component_ts.md           |   2 +-
 .../usage/v6/reorder/updating-data/demo.html  | 108 ++++---
 .../v6/reorder/updating-data/javascript.md    |   2 +-
 .../usage/v6/reorder/updating-data/react.md   |   8 +-
 static/usage/v6/reorder/updating-data/vue.md  |  10 +-
 .../wrapper/angular/example_component_html.md |  20 +-
 .../wrapper/angular/example_component_ts.md   |   2 +-
 static/usage/v6/reorder/wrapper/demo.html     | 142 ++++-----
 static/usage/v6/reorder/wrapper/javascript.md |  22 +-
 static/usage/v6/reorder/wrapper/react.md      |  20 +-
 static/usage/v6/reorder/wrapper/vue.md        |  26 +-
 static/usage/v6/ripple-effect/basic/demo.html | 154 +++++----
 .../v6/ripple-effect/customizing/demo.html    | 152 +++++----
 static/usage/v6/ripple-effect/type/demo.html  | 152 +++++----
 static/usage/v6/router/basic/demo.html        |  69 ++--
 static/usage/v6/searchbar/basic/demo.html     |  58 ++--
 .../v6/searchbar/cancel-button/angular.md     |   7 +-
 .../v6/searchbar/cancel-button/demo.html      |  62 ++--
 .../v6/searchbar/cancel-button/javascript.md  |   7 +-
 .../usage/v6/searchbar/cancel-button/react.md |   7 +-
 .../usage/v6/searchbar/cancel-button/vue.md   |   9 +-
 .../usage/v6/searchbar/clear-button/demo.html |  56 ++--
 static/usage/v6/searchbar/clear-button/vue.md |   2 +-
 .../debounce/angular/example_component_ts.md  |  15 +-
 static/usage/v6/searchbar/debounce/demo.html  | 105 +++---
 .../usage/v6/searchbar/debounce/javascript.md |  15 +-
 static/usage/v6/searchbar/debounce/react.md   |  23 +-
 static/usage/v6/searchbar/debounce/vue.md     |  15 +-
 .../usage/v6/searchbar/search-icon/demo.html  |  52 ++-
 static/usage/v6/searchbar/search-icon/vue.md  |   2 +-
 .../v6/searchbar/theming/colors/demo.html     |  68 ++--
 .../theming/css-properties/demo.html          |  90 +++---
 .../theming/css-properties/javascript.md      |  30 +-
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 .../usage/v6/segment-button/basic/demo.html   |  98 +++---
 .../usage/v6/segment-button/layout/demo.html  | 188 ++++++-----
 static/usage/v6/segment-button/layout/vue.md  |   2 +-
 .../theming/css-properties/demo.html          | 102 +++---
 .../theming/css-shadow-parts/demo.html        | 118 ++++---
 static/usage/v6/segment/basic/demo.html       |  86 +++--
 static/usage/v6/segment/scrollable/demo.html  | 120 ++++---
 static/usage/v6/segment/scrollable/vue.md     |  15 +-
 .../usage/v6/segment/theming/colors/demo.html | 214 +++++++------
 .../segment/theming/css-properties/demo.html  |  72 ++---
 .../select/basic/multiple-selection/demo.html |  56 ++--
 .../angular/example_component_html.md         |   2 +-
 .../basic/responding-to-interaction/demo.html | 116 ++++---
 .../responding-to-interaction/javascript.md   |   2 +-
 .../basic/responding-to-interaction/vue.md    |   8 +-
 .../select/basic/single-selection/demo.html   |  56 ++--
 .../customization/button-text/demo.html       |  74 +++--
 .../angular/example_component_html.md         |   6 +-
 .../customization/interface-options/demo.html | 146 +++++----
 .../interface-options/javascript.md           |  12 +-
 .../customization/interface-options/react.md  |  12 +-
 .../customization/interface-options/vue.md    |  18 +-
 .../angular/example_component_css.md          |   2 +-
 .../customization/styling-select/demo.html    | 114 ++++---
 .../styling-select/javascript.md              |  42 +--
 .../styling-select/react/main_css.md          |   2 +-
 .../select/interfaces/action-sheet/demo.html  |  56 ++--
 .../v6/select/interfaces/popover/demo.html    |  56 ++--
 .../angular/example_component_html.md         |   2 +-
 .../multiple-selection/demo.html              | 156 +++++----
 .../multiple-selection/javascript.md          |  18 +-
 .../multiple-selection/vue.md                 |  28 +-
 .../angular/example_component_html.md         |   8 +-
 .../using-comparewith/demo.html               | 138 ++++----
 .../using-comparewith/javascript.md           |  14 +-
 .../using-comparewith/vue.md                  |  24 +-
 .../typeahead/angular/angular_types_ts.md     |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../typeahead/angular/example_component_ts.md |  16 +-
 .../angular/modal-example_component_html.md   |   2 +-
 .../angular/modal-example_component_ts.md     |  31 +-
 static/usage/v6/select/typeahead/demo.html    |  32 +-
 static/usage/v6/select/typeahead/index.md     |  18 +-
 .../usage/v6/select/typeahead/javascript.md   |  26 +-
 .../v6/select/typeahead/react/main_tsx.md     |  20 +-
 .../select/typeahead/react/react_types_ts.md  |   2 +-
 .../react/typeahead_component_tsx.md          |  58 ++--
 .../v6/select/typeahead/vue/example_vue.md    |  22 +-
 .../typeahead/vue/typeahead_component_vue.md  | 102 +++---
 .../v6/select/typeahead/vue/vue_types_ts.md   |   2 +-
 .../basic/angular/example_component_ts.md     |   5 +-
 static/usage/v6/skeleton-text/basic/demo.html |  97 +++---
 .../v6/skeleton-text/basic/javascript.md      |   1 -
 static/usage/v6/skeleton-text/basic/react.md  |  22 +-
 static/usage/v6/skeleton-text/basic/vue.md    |  14 +-
 .../angular/example_component_css.md          |   2 +-
 .../theming/css-properties/demo.html          | 106 +++----
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_css.md  |   2 +-
 .../theming/css-properties/react/main_tsx.md  |  19 +-
 .../theming/css-properties/vue.md             |  13 +-
 static/usage/v6/spinner/basic/demo.html       | 130 ++++----
 .../usage/v6/spinner/theming/colors/demo.html |  58 ++--
 .../spinner/theming/css-properties/demo.html  |  50 ++-
 .../spinner/theming/css-properties/react.md   |   4 +-
 static/usage/v6/split-pane/basic/angular.md   |   8 +-
 static/usage/v6/split-pane/basic/demo.html    |  70 ++--
 .../usage/v6/split-pane/basic/javascript.md   |   8 +-
 static/usage/v6/split-pane/basic/react.md     |  10 +-
 static/usage/v6/split-pane/basic/vue.md       |  12 +-
 .../angular/example_component_html.md         |   8 +-
 .../theming/css-properties/demo.html          |  84 +++--
 .../theming/css-properties/javascript.md      |  10 +-
 .../theming/css-properties/react/main_tsx.md  |  10 +-
 .../split-pane/theming/css-properties/vue.md  |  14 +-
 static/usage/v6/tabs/router/demo.html         | 225 +++++++------
 static/usage/v6/text/basic/angular.md         |   8 +-
 static/usage/v6/text/basic/demo.html          | 108 ++++---
 static/usage/v6/text/basic/javascript.md      |   8 +-
 static/usage/v6/text/basic/react.md           |  13 +-
 static/usage/v6/text/basic/vue.md             |   8 +-
 static/usage/v6/textarea/autogrow/angular.md  |   7 +-
 static/usage/v6/textarea/autogrow/demo.html   |  67 ++--
 .../usage/v6/textarea/autogrow/javascript.md  |   7 +-
 static/usage/v6/textarea/autogrow/vue.md      |   7 +-
 static/usage/v6/textarea/basic/demo.html      |  76 +++--
 .../usage/v6/textarea/clear-on-edit/demo.html |  52 ++-
 static/usage/v6/textarea/theming/demo.html    |  66 ++--
 static/usage/v6/thumbnail/basic/demo.html     |  45 ++-
 static/usage/v6/thumbnail/item/demo.html      |  51 ++-
 .../angular/example_component_css.md          |   1 -
 .../angular/example_component_html.md         |   1 -
 .../theming/css-properties/demo.html          |  56 ++--
 .../theming/css-properties/react/main_tsx.md  |   1 -
 static/usage/v6/title/basic/demo.html         |  41 ++-
 .../collapsible-large-title/basic/demo.html   |  97 +++---
 .../collapsible-large-title/buttons/demo.html | 103 +++---
 .../v6/title/theming/css-properties/demo.html | 116 ++++---
 .../buttons/angular/example_component_html.md |   2 +-
 .../buttons/angular/example_component_ts.md   |  14 +-
 static/usage/v6/toast/buttons/demo.html       | 132 ++++----
 static/usage/v6/toast/buttons/javascript.md   |  12 +-
 static/usage/v6/toast/buttons/react.md        |  14 +-
 static/usage/v6/toast/buttons/vue.md          |  12 +-
 .../icon/angular/example_component_html.md    |   2 +-
 .../icon/angular/example_component_ts.md      |   4 +-
 static/usage/v6/toast/icon/demo.html          |  78 +++--
 static/usage/v6/toast/icon/javascript.md      |   4 +-
 static/usage/v6/toast/icon/react.md           |   4 +-
 static/usage/v6/toast/icon/vue.md             |   2 +-
 .../layout/angular/example_component_html.md  |   2 +-
 .../layout/angular/example_component_ts.md    |  25 +-
 static/usage/v6/toast/layout/demo.html        | 112 ++++---
 static/usage/v6/toast/layout/javascript.md    |  20 +-
 static/usage/v6/toast/layout/react.md         |  18 +-
 static/usage/v6/toast/layout/vue.md           |  32 +-
 .../angular/example_component_html.md         |   2 +-
 .../angular/example_component_ts.md           |   4 +-
 .../v6/toast/presenting/controller/demo.html  |  92 +++---
 .../toast/presenting/controller/javascript.md |   2 +-
 .../v6/toast/presenting/controller/react.md   |  14 +-
 .../v6/toast/presenting/controller/vue.md     |   2 +-
 .../theming/angular/example_component_ts.md   |   4 +-
 .../v6/toast/theming/angular/global_css.md    |   6 +-
 static/usage/v6/toast/theming/demo.html       | 120 ++++---
 static/usage/v6/toast/theming/javascript.md   |   8 +-
 .../usage/v6/toast/theming/react/main_css.md  |   6 +-
 .../usage/v6/toast/theming/react/main_tsx.md  |   4 +-
 static/usage/v6/toast/theming/vue.md          |   8 +-
 static/usage/v6/toggle/basic/demo.html        |  84 +++--
 static/usage/v6/toggle/on-off/demo.html       |  41 ++-
 static/usage/v6/toggle/on-off/react.md        |   4 +-
 .../usage/v6/toggle/theming/colors/demo.html  |  57 ++--
 .../angular/example_component_html.md         |   3 +-
 .../toggle/theming/css-properties/demo.html   |  98 +++---
 .../angular/example_component_html.md         |   3 +-
 .../toggle/theming/css-shadow-parts/demo.html | 112 ++++---
 static/usage/v6/toolbar/basic/demo.html       |  51 ++-
 static/usage/v6/toolbar/buttons/angular.md    |  16 +-
 static/usage/v6/toolbar/buttons/demo.html     | 210 ++++++------
 static/usage/v6/toolbar/buttons/javascript.md |  16 +-
 static/usage/v6/toolbar/buttons/react.md      |  16 +-
 static/usage/v6/toolbar/buttons/vue.md        |  16 +-
 .../usage/v6/toolbar/progress-bars/demo.html  |  43 ++-
 static/usage/v6/toolbar/searchbars/demo.html  |  47 ++-
 static/usage/v6/toolbar/segments/demo.html    |  53 ++--
 .../usage/v6/toolbar/theming/colors/demo.html | 110 ++++---
 .../toolbar/theming/css-properties/demo.html  |  76 +++--
 .../accessibility/animations/demo.html        |  84 +++--
 .../accessibility/animations/javascript.md    |  46 ++-
 static/usage/v7/accordion/basic/angular.md    |  12 +-
 static/usage/v7/accordion/basic/demo.html     |  84 +++--
 static/usage/v7/accordion/basic/javascript.md |  12 +-
 static/usage/v7/accordion/basic/react.md      |   7 +-
 static/usage/v7/accordion/basic/vue.md        |  25 +-
 .../angular/example_component_css.md          |  10 +-
 .../angular/example_component_html.md         |  12 +-
 .../advanced-expansion-styles/demo.html       | 138 ++++----
 .../advanced-expansion-styles/javascript.md   |  20 +-
 .../react/main_css.md                         |  10 +-
 .../advanced-expansion-styles/vue.md          |  39 +--
 .../customization/expansion-styles/angular.md |  12 +-
 .../customization/expansion-styles/demo.html  |  84 +++--
 .../expansion-styles/javascript.md            |  12 +-
 .../customization/expansion-styles/react.md   |   7 +-
 .../customization/expansion-styles/vue.md     |  25 +-
 .../accordion/customization/icons/demo.html   |  84 +++--
 .../customization/icons/javascript.md         |  12 +-
 .../v7/accordion/customization/icons/react.md |   7 +-
 .../v7/accordion/customization/icons/vue.md   |  29 +-
 .../theming/angular/example_component_html.md |  12 +-
 .../theming/angular/global_css.md             |  10 +-
 .../accordion/customization/theming/demo.html | 126 ++++----
 .../customization/theming/javascript.md       |  24 +-
 .../customization/theming/react/main_css.md   |  10 +-
 .../customization/theming/react/main_tsx.md   |   7 +-
 .../v7/accordion/customization/theming/vue.md |  41 +--
 .../v7/accordion/disable-group/demo.html      |  84 +++--
 .../v7/accordion/disable/group/demo.html      |  84 +++--
 .../v7/accordion/disable/individual/demo.html |  84 +++--
 .../v7/accordion/listen-changes/demo.html     | 119 ++++---
 static/usage/v7/accordion/multiple/demo.html  |  92 +++---
 .../v7/accordion/readonly/group/angular.md    |  12 +-
 .../v7/accordion/readonly/group/demo.html     |  84 +++--
 .../v7/accordion/readonly/group/javascript.md |  12 +-
 .../v7/accordion/readonly/group/react.md      |   7 +-
 .../usage/v7/accordion/readonly/group/vue.md  |  25 +-
 .../accordion/readonly/individual/angular.md  |  12 +-
 .../accordion/readonly/individual/demo.html   |  84 +++--
 .../readonly/individual/javascript.md         |  12 +-
 .../v7/accordion/readonly/individual/react.md |   7 +-
 .../v7/accordion/readonly/individual/vue.md   |  25 +-
 static/usage/v7/accordion/toggle/demo.html    | 118 ++++---
 .../v7/action-sheet/controller/demo.html      |  98 +++---
 .../isOpen/angular/example_component_ts.md    |  16 +-
 .../v7/action-sheet/inline/isOpen/demo.html   |  98 +++---
 .../action-sheet/inline/isOpen/javascript.md  |  14 +-
 .../v7/action-sheet/inline/isOpen/react.md    |  14 +-
 .../v7/action-sheet/inline/isOpen/vue.md      |   2 +-
 .../trigger/angular/example_component_html.md |   6 +-
 .../trigger/angular/example_component_ts.md   |  14 +-
 .../v7/action-sheet/inline/trigger/demo.html  |  95 +++---
 .../action-sheet/inline/trigger/javascript.md |  19 +-
 .../v7/action-sheet/inline/trigger/react.md   |  14 +-
 .../v7/action-sheet/inline/trigger/vue.md     |   6 +-
 .../angular/example_component_ts.md           |  14 +-
 .../role-info-on-dismiss/demo.html            | 126 ++++----
 .../role-info-on-dismiss/javascript.md        |  14 +-
 .../role-info-on-dismiss/react/main_tsx.md    |  14 +-
 .../action-sheet/role-info-on-dismiss/vue.md  |   2 +-
 .../angular/example_component_ts.md           |  14 +-
 .../theming/css-properties/demo.html          | 124 ++++----
 .../theming/css-properties/javascript.md      |  14 +-
 .../theming/css-properties/react/main_tsx.md  |  14 +-
 .../styling/angular/example_component_ts.md   |  14 +-
 .../v7/action-sheet/theming/styling/demo.html | 140 ++++----
 .../theming/styling/javascript.md             |  14 +-
 .../theming/styling/react/main_tsx.md         |  14 +-
 .../buttons/angular/example_component_html.md |   2 +-
 .../buttons/angular/example_component_ts.md   |  10 +-
 static/usage/v7/alert/buttons/demo.html       | 114 +++----
 static/usage/v7/alert/buttons/javascript.md   |  10 +-
 static/usage/v7/alert/buttons/vue.md          |   4 +-
 .../angular/example_component_html.md         |   7 +-
 .../alert/customization/angular/global_css.md |   4 +-
 static/usage/v7/alert/customization/demo.html | 122 ++++---
 .../v7/alert/customization/javascript.md      |   8 +-
 .../v7/alert/customization/react/main_css.md  |   4 +-
 static/usage/v7/alert/customization/vue.md    |   7 +-
 .../radios/angular/example_component_html.md  |   2 +-
 static/usage/v7/alert/inputs/radios/demo.html |  84 +++--
 .../v7/alert/inputs/radios/javascript.md      |   8 +-
 .../angular/example_component_html.md         |   2 +-
 .../v7/alert/inputs/text-inputs/demo.html     |  92 +++---
 .../v7/alert/inputs/text-inputs/javascript.md |  12 +-
 .../angular/example_component_html.md         |   2 +-
 .../v7/alert/presenting/controller/demo.html  |  62 ++--
 .../isOpen/angular/example_component_html.md  |   2 +-
 .../v7/alert/presenting/isOpen/demo.html      |  60 ++--
 .../v7/alert/presenting/isOpen/javascript.md  |   6 +-
 .../trigger/angular/example_component_html.md |   2 +-
 .../v7/alert/presenting/trigger/demo.html     |  60 ++--
 static/usage/v7/avatar/basic/demo.html        |  45 ++-
 static/usage/v7/avatar/chip/demo.html         |  51 ++-
 static/usage/v7/avatar/chip/vue.md            |   2 +-
 static/usage/v7/avatar/item/demo.html         |  51 ++-
 static/usage/v7/avatar/item/vue.md            |   2 +-
 .../avatar/theming/css-properties/demo.html   |  54 ++--
 .../theming/css-properties/react/main_tsx.md  |   1 -
 .../v7/avatar/theming/css-properties/vue.md   |   2 +-
 .../basic/angular/page_two_component_ts.md    |   4 +-
 static/usage/v7/back-button/basic/demo.html   |  55 ++--
 .../v7/back-button/basic/vue/page_two_vue.md  |   2 +-
 .../custom/angular/page_two_component_ts.md   |   4 +-
 static/usage/v7/back-button/custom/demo.html  |  55 ++--
 .../v7/back-button/custom/vue/page_two_vue.md |   4 +-
 static/usage/v7/backdrop/basic/demo.html      |  61 ++--
 static/usage/v7/backdrop/styling/demo.html    | 106 +++----
 static/usage/v7/badge/basic/demo.html         |  68 ++--
 .../usage/v7/badge/theming/colors/demo.html   | 100 +++---
 .../angular/example_component_css.md          |   2 +-
 .../v7/badge/theming/css-properties/demo.html |  72 ++---
 .../theming/css-properties/react/main_css.md  |   2 +-
 static/usage/v7/breadcrumbs/basic/demo.html   |  50 ++-
 .../angular/example_component_html.md         |   2 +-
 .../expand-on-click/demo.html                 |  66 ++--
 .../collapsing-items/expand-on-click/vue.md   |   8 +-
 .../items-before-after/demo.html              | 120 ++++---
 .../collapsing-items/max-items/demo.html      |  54 ++--
 .../angular/example_component_html.md         |   2 +-
 .../popover-on-click/demo.html                |  96 +++---
 .../popover-on-click/javascript.md            |   6 +-
 .../popover-on-click/react.md                 |   5 +-
 .../collapsing-items/popover-on-click/vue.md  |  40 +--
 .../icons/custom-separators/demo.html         |  74 +++--
 .../icons/custom-separators/vue.md            |   2 +-
 .../icons/icons-on-items/demo.html            | 124 ++++----
 .../v7/breadcrumbs/theming/colors/demo.html   |  50 ++-
 .../angular/example_component_css.md          |   2 +-
 .../theming/css-properties/demo.html          |  64 ++--
 .../theming/css-properties/react/main_css.md  |   2 +-
 static/usage/v7/button/basic/angular.md       |   3 +-
 static/usage/v7/button/basic/demo.html        |  43 ++-
 static/usage/v7/button/basic/javascript.md    |   3 +-
 static/usage/v7/button/expand/angular.md      |   3 +-
 static/usage/v7/button/expand/demo.html       |  54 ++--
 static/usage/v7/button/expand/javascript.md   |   3 +-
 static/usage/v7/button/fill/demo.html         |  47 ++-
 static/usage/v7/button/icons/demo.html        |  61 ++--
 static/usage/v7/button/icons/vue.md           |   4 +-
 static/usage/v7/button/shape/angular.md       |   3 +-
 static/usage/v7/button/shape/demo.html        |  43 ++-
 static/usage/v7/button/shape/javascript.md    |   3 +-
 static/usage/v7/button/size/demo.html         |  45 ++-
 .../usage/v7/button/theming/colors/demo.html  |  72 ++---
 .../button/theming/css-properties/demo.html   |  88 +++---
 .../theming/css-properties/react/main_css.md  |   1 -
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 static/usage/v7/buttons/basic/demo.html       |  50 ++-
 static/usage/v7/buttons/placement/demo.html   |  86 +++--
 static/usage/v7/buttons/types/angular.md      |   8 +-
 static/usage/v7/buttons/types/demo.html       | 188 ++++++-----
 static/usage/v7/buttons/types/javascript.md   |   8 +-
 static/usage/v7/buttons/types/react.md        |   9 +-
 static/usage/v7/buttons/types/vue.md          |  10 +-
 static/usage/v7/card/basic/demo.html          |  68 ++--
 static/usage/v7/card/basic/index.md           |   6 +-
 static/usage/v7/card/basic/react.md           |   4 +-
 static/usage/v7/card/buttons/demo.html        |  72 ++---
 static/usage/v7/card/buttons/index.md         |   7 +-
 static/usage/v7/card/buttons/react.md         |   4 +-
 static/usage/v7/card/list/demo.html           | 130 ++++----
 static/usage/v7/card/list/react/main_tsx.md   |  12 +-
 static/usage/v7/card/media/demo.html          |  70 ++--
 static/usage/v7/card/media/index.md           |   7 +-
 static/usage/v7/card/media/react.md           |   4 +-
 .../usage/v7/card/theming/colors/angular.md   |  36 +--
 static/usage/v7/card/theming/colors/demo.html | 238 +++++++-------
 .../v7/card/theming/colors/javascript.md      |  36 +--
 static/usage/v7/card/theming/colors/react.md  |  36 +--
 static/usage/v7/card/theming/colors/vue.md    |  36 +--
 .../v7/card/theming/css-properties/demo.html  | 100 +++---
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 static/usage/v7/checkbox/basic/demo.html      |  38 ++-
 static/usage/v7/checkbox/basic/react.md       |   6 +-
 static/usage/v7/checkbox/basic/vue.md         |   2 +-
 .../usage/v7/checkbox/indeterminate/demo.html |  38 ++-
 .../usage/v7/checkbox/indeterminate/react.md  |   6 +-
 static/usage/v7/checkbox/indeterminate/vue.md |   2 +-
 static/usage/v7/checkbox/justify/angular.md   |   4 +-
 static/usage/v7/checkbox/justify/demo.html    |  29 +-
 .../usage/v7/checkbox/justify/javascript.md   |   4 +-
 static/usage/v7/checkbox/justify/react.md     |   4 +-
 static/usage/v7/checkbox/justify/vue.md       |   4 +-
 .../v7/checkbox/label-placement/demo.html     |  48 ++-
 .../v7/checkbox/label-placement/react.md      |   8 +-
 .../usage/v7/checkbox/label-placement/vue.md  |   8 +-
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../checkbox/theming/css-properties/demo.html |  58 ++--
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_css.md  |   2 +-
 .../theming/css-properties/react/main_tsx.md  |   6 +-
 .../v7/checkbox/theming/css-properties/vue.md |   4 +-
 static/usage/v7/chip/basic/demo.html          |  45 ++-
 static/usage/v7/chip/slots/demo.html          |  63 ++--
 static/usage/v7/chip/theming/colors/demo.html |  78 +++--
 .../v7/chip/theming/css-properties/demo.html  |  53 ++--
 static/usage/v7/content/basic/demo.html       |  48 ++-
 static/usage/v7/content/fixed/angular.md      |  50 ++-
 .../fixed/angular/example_component_css.md    |   2 +-
 .../fixed/angular/example_component_html.md   |  50 ++-
 static/usage/v7/content/fixed/demo.html       | 132 ++++----
 static/usage/v7/content/fixed/javascript.md   |  52 ++-
 static/usage/v7/content/fixed/react.md        |  50 ++-
 .../usage/v7/content/fixed/react/main_css.md  |   2 +-
 .../usage/v7/content/fixed/react/main_tsx.md  |  50 ++-
 static/usage/v7/content/fixed/vue.md          |  52 ++-
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |  58 +++-
 static/usage/v7/content/fullscreen/demo.html  | 150 ++++-----
 .../usage/v7/content/fullscreen/javascript.md |  60 +++-
 .../v7/content/fullscreen/react/main_css.md   |   2 +-
 .../v7/content/fullscreen/react/main_tsx.md   |  58 +++-
 static/usage/v7/content/fullscreen/vue.md     |  60 +++-
 .../usage/v7/content/header-footer/angular.md |   8 +-
 .../usage/v7/content/header-footer/demo.html  |  72 ++---
 .../v7/content/header-footer/javascript.md    |   8 +-
 .../usage/v7/content/header-footer/react.md   |   8 +-
 static/usage/v7/content/header-footer/vue.md  |   8 +-
 .../angular/example_component_html.md         |  53 +++-
 .../usage/v7/content/scroll-events/demo.html  | 134 ++++----
 .../v7/content/scroll-events/javascript.md    |  50 ++-
 .../usage/v7/content/scroll-events/react.md   |  53 +++-
 static/usage/v7/content/scroll-events/vue.md  |  57 +++-
 .../angular/example_component_html.md         |  50 ++-
 .../usage/v7/content/scroll-methods/demo.html | 146 +++++----
 .../v7/content/scroll-methods/javascript.md   |  50 ++-
 .../usage/v7/content/scroll-methods/react.md  |  58 +++-
 static/usage/v7/content/scroll-methods/vue.md |  52 ++-
 .../usage/v7/content/theming/colors/demo.html | 126 ++++----
 .../content/theming/css-properties/demo.html  |  60 ++--
 .../theming/css-shadow-parts/demo.html        |  64 ++--
 .../usage/v7/datetime-button/basic/demo.html  |  56 ++--
 .../usage/v7/datetime-button/basic/react.md   |   2 +-
 static/usage/v7/datetime-button/basic/vue.md  |   2 +-
 static/usage/v7/datetime/basic/demo.html      |  54 ++--
 .../customizing-button-texts/angular.md       |   7 +-
 .../customizing-button-texts/demo.html        |  52 ++-
 .../customizing-button-texts/javascript.md    |   6 +-
 .../buttons/customizing-button-texts/react.md |   9 +-
 .../buttons/customizing-button-texts/vue.md   |   8 +-
 .../buttons/customizing-buttons/demo.html     |  70 ++--
 .../buttons/customizing-buttons/react.md      |  18 +-
 .../buttons/customizing-buttons/vue.md        |   4 +-
 .../showing-confirmation-buttons/demo.html    |  52 ++-
 .../showing-confirmation-buttons/react.md     |   4 +-
 .../date-constraints/advanced/demo.html       |  74 +++--
 .../date-constraints/advanced/javascript.md   |   2 +-
 .../date-constraints/advanced/react.md        |   8 +-
 .../datetime/date-constraints/advanced/vue.md |  10 +-
 .../date-constraints/max-min/angular.md       |   6 +-
 .../date-constraints/max-min/demo.html        |  50 ++-
 .../date-constraints/max-min/javascript.md    |   6 +-
 .../date-constraints/max-min/react.md         |   8 +-
 .../datetime/date-constraints/max-min/vue.md  |   6 +-
 .../date-constraints/values/angular.md        |   5 +-
 .../date-constraints/values/demo.html         |  50 ++-
 .../date-constraints/values/javascript.md     |   5 +-
 .../datetime/date-constraints/values/react.md |   7 +-
 .../datetime/date-constraints/values/vue.md   |   5 +-
 .../array/angular/example_component_html.md   |   6 +-
 .../array/angular/example_component_ts.md     |   4 +-
 .../datetime/highlightedDates/array/demo.html | 100 +++---
 .../highlightedDates/array/javascript.md      |   4 +-
 .../datetime/highlightedDates/array/react.md  |   4 +-
 .../v7/datetime/highlightedDates/array/vue.md |  16 +-
 .../callback/angular/example_component_ts.md  |   4 +-
 .../highlightedDates/callback/demo.html       |  90 +++---
 .../highlightedDates/callback/javascript.md   |   4 +-
 .../highlightedDates/callback/react.md        |   4 +-
 .../datetime/highlightedDates/callback/vue.md |   8 +-
 .../localization/custom-locale/demo.html      |  50 ++-
 .../localization/custom-locale/react.md       |   4 +-
 .../localization/first-day-of-week/demo.html  |  50 ++-
 .../localization/first-day-of-week/react.md   |   4 +-
 .../localization/hour-cycle/demo.html         |  50 ++-
 .../datetime/localization/hour-cycle/react.md |   4 +-
 .../locale-extension-tags/demo.html           |  50 ++-
 .../locale-extension-tags/react.md            |   4 +-
 .../localization/time-label/demo.html         |  54 ++--
 static/usage/v7/datetime/multiple/angular.md  |   6 +-
 static/usage/v7/datetime/multiple/demo.html   |  58 ++--
 static/usage/v7/datetime/multiple/react.md    |   8 +-
 static/usage/v7/datetime/multiple/vue.md      |   6 +-
 .../v7/datetime/presentation/date/demo.html   |  50 ++-
 .../v7/datetime/presentation/date/react.md    |   4 +-
 .../presentation/month-and-year/demo.html     |  50 ++-
 .../presentation/month-and-year/react.md      |   4 +-
 .../v7/datetime/presentation/time/demo.html   |  50 ++-
 .../v7/datetime/presentation/time/react.md    |   4 +-
 .../v7/datetime/presentation/wheel/demo.html  |  50 ++-
 .../v7/datetime/presentation/wheel/react.md   |   4 +-
 static/usage/v7/datetime/theming/demo.html    | 136 ++++----
 .../usage/v7/datetime/theming/javascript.md   |  18 +-
 .../v7/datetime/theming/react/main_css.md     |  12 +-
 static/usage/v7/datetime/theming/vue.md       |  18 +-
 .../title/customizing-title/demo.html         |  54 ++--
 .../title/showing-default-title/demo.html     |  50 ++-
 .../title/showing-default-title/react.md      |   4 +-
 static/usage/v7/fab/basic/demo.html           |  49 ++-
 static/usage/v7/fab/basic/vue.md              |   4 +-
 static/usage/v7/fab/button-sizing/demo.html   |  69 ++--
 static/usage/v7/fab/button-sizing/vue.md      |   4 +-
 static/usage/v7/fab/list-side/demo.html       |  97 +++---
 static/usage/v7/fab/list-side/vue.md          |   4 +-
 static/usage/v7/fab/positioning/angular.md    |   2 +-
 static/usage/v7/fab/positioning/demo.html     | 129 ++++----
 static/usage/v7/fab/positioning/javascript.md |   2 +-
 static/usage/v7/fab/positioning/react.md      |  11 +-
 static/usage/v7/fab/positioning/vue.md        |  15 +-
 static/usage/v7/fab/theming/colors/demo.html  |  99 +++---
 static/usage/v7/fab/theming/colors/vue.md     |   4 +-
 .../angular/example_component_css.md          |   4 +-
 .../theming/css-custom-properties/demo.html   |  86 +++--
 .../css-custom-properties/javascript.md       |   2 +-
 .../css-custom-properties/react/main_css.md   |   4 +-
 .../fab/theming/css-custom-properties/vue.md  |   6 +-
 .../angular/example_component_css.md          |   6 +-
 .../v7/fab/theming/css-shadow-parts/demo.html |  94 +++---
 .../theming/css-shadow-parts/javascript.md    |   4 +-
 .../css-shadow-parts/react/main_css.md        |   6 +-
 .../v7/fab/theming/css-shadow-parts/vue.md    |   8 +-
 static/usage/v7/footer/basic/demo.html        |  47 ++-
 .../angular/example_component_html.md         |  57 +++-
 .../v7/footer/custom-scroll-target/demo.html  | 156 +++++----
 .../footer/custom-scroll-target/javascript.md |  57 +++-
 .../custom-scroll-target/react/main_tsx.md    |  59 +++-
 .../v7/footer/custom-scroll-target/vue.md     |  57 +++-
 static/usage/v7/footer/fade/angular.md        |  57 +++-
 static/usage/v7/footer/fade/demo.html         | 131 ++++----
 static/usage/v7/footer/fade/javascript.md     |  57 +++-
 static/usage/v7/footer/fade/react.md          |  57 +++-
 static/usage/v7/footer/fade/vue.md            |  57 +++-
 static/usage/v7/footer/no-border/demo.html    |  47 ++-
 static/usage/v7/footer/translucent/angular.md |  57 +++-
 static/usage/v7/footer/translucent/demo.html  | 131 ++++----
 .../usage/v7/footer/translucent/javascript.md |  57 +++-
 static/usage/v7/footer/translucent/react.md   |  57 +++-
 static/usage/v7/footer/translucent/vue.md     |  57 +++-
 static/usage/v7/grid/basic/demo.html          | 136 ++++----
 .../grid/customizing/column-number/demo.html  |  90 +++---
 .../column-number/react/main_tsx.md           |   4 +-
 .../v7/grid/customizing/padding/demo.html     | 124 ++++----
 .../usage/v7/grid/customizing/width/demo.html | 106 +++----
 static/usage/v7/grid/fixed/demo.html          |  82 +++--
 .../angular/example_component_html.md         |  40 +--
 .../v7/grid/horizontal-alignment/demo.html    | 159 ++++------
 .../grid/horizontal-alignment/javascript.md   |  40 +--
 .../horizontal-alignment/react/main_tsx.md    |  40 +--
 .../usage/v7/grid/horizontal-alignment/vue.md |  40 +--
 .../usage/v7/grid/offset-responsive/demo.html | 122 ++++---
 .../grid/offset-responsive/react/main_tsx.md  |   8 +-
 static/usage/v7/grid/offset/demo.html         | 120 ++++---
 static/usage/v7/grid/offset/react/main_tsx.md |  16 +-
 .../v7/grid/push-pull-responsive/demo.html    | 124 ++++----
 .../push-pull-responsive/react/main_tsx.md    |  24 +-
 .../angular/example_component_html.md         |   5 +-
 static/usage/v7/grid/push-pull/demo.html      | 134 ++++----
 static/usage/v7/grid/push-pull/javascript.md  |   5 +-
 .../usage/v7/grid/push-pull/react/main_tsx.md |  23 +-
 static/usage/v7/grid/push-pull/vue.md         |  15 +-
 static/usage/v7/grid/size-auto/demo.html      | 136 ++++----
 .../usage/v7/grid/size-auto/react/main_tsx.md |  14 +-
 .../usage/v7/grid/size-responsive/demo.html   | 126 ++++----
 .../v7/grid/size-responsive/react/main_tsx.md |  40 ++-
 static/usage/v7/grid/size/demo.html           | 122 ++++---
 static/usage/v7/grid/size/react/main_tsx.md   |  12 +-
 .../angular/example_component_html.md         |  36 +--
 .../v7/grid/vertical-alignment/demo.html      | 171 +++++-----
 .../v7/grid/vertical-alignment/javascript.md  |  36 +--
 .../grid/vertical-alignment/react/main_tsx.md |  36 +--
 .../usage/v7/grid/vertical-alignment/vue.md   |  36 +--
 static/usage/v7/header/basic/demo.html        |  47 ++-
 static/usage/v7/header/condense/angular.md    |  57 +++-
 static/usage/v7/header/condense/demo.html     | 141 +++++----
 static/usage/v7/header/condense/javascript.md |  57 +++-
 static/usage/v7/header/condense/react.md      |  59 +++-
 static/usage/v7/header/condense/vue.md        |  57 +++-
 .../angular/example_component_html.md         |  57 +++-
 .../v7/header/custom-scroll-target/demo.html  | 156 +++++----
 .../custom-scroll-target/react/main_tsx.md    |  59 +++-
 .../v7/header/custom-scroll-target/vue.md     |  57 +++-
 static/usage/v7/header/fade/angular.md        |  57 +++-
 static/usage/v7/header/fade/demo.html         | 131 ++++----
 static/usage/v7/header/fade/javascript.md     |  57 +++-
 static/usage/v7/header/fade/react.md          |  57 +++-
 static/usage/v7/header/fade/vue.md            |  57 +++-
 static/usage/v7/header/no-border/demo.html    |  47 ++-
 static/usage/v7/header/translucent/angular.md |  57 +++-
 static/usage/v7/header/translucent/demo.html  | 131 ++++----
 .../usage/v7/header/translucent/javascript.md |  57 +++-
 static/usage/v7/header/translucent/react.md   |  57 +++-
 static/usage/v7/header/translucent/vue.md     |  57 +++-
 static/usage/v7/icon/basic/demo.html          |  47 ++-
 static/usage/v7/icon/basic/index.md           |   7 +-
 static/usage/v7/img/basic/angular.md          |   5 +-
 static/usage/v7/img/basic/demo.html           |  54 ++--
 static/usage/v7/img/basic/javascript.md       |   5 +-
 static/usage/v7/img/basic/react.md            |   5 +-
 static/usage/v7/img/basic/vue.md              |   5 +-
 .../usage/v7/infinite-scroll/basic/demo.html  | 115 ++++---
 .../custom-infinite-scroll-content/demo.html  | 175 ++++++----
 .../infinite-scroll-content/demo.html         | 101 +++---
 static/usage/v7/input/basic/demo.html         |  92 +++---
 static/usage/v7/input/clear/angular.md        |  22 +-
 static/usage/v7/input/clear/demo.html         |  93 +++---
 static/usage/v7/input/clear/javascript.md     |  22 +-
 static/usage/v7/input/clear/react.md          |  22 +-
 static/usage/v7/input/clear/vue.md            |  26 +-
 .../counter/angular/example_component_html.md |   9 +-
 static/usage/v7/input/counter/demo.html       |  69 ++--
 static/usage/v7/input/counter/javascript.md   |   8 +-
 static/usage/v7/input/counter/react.md        |  11 +-
 static/usage/v7/input/counter/vue.md          |  15 +-
 static/usage/v7/input/fill/demo.html          |  61 ++--
 static/usage/v7/input/fill/index.md           |   2 +-
 static/usage/v7/input/fill/react.md           |   4 +-
 static/usage/v7/input/fill/vue.md             |   4 +-
 .../angular/example_component_html.md         |   2 +-
 .../filtering/angular/example_component_ts.md |  10 +-
 static/usage/v7/input/filtering/demo.html     |  62 ++--
 static/usage/v7/input/filtering/index.md      |  24 +-
 static/usage/v7/input/filtering/javascript.md |   4 +-
 static/usage/v7/input/filtering/react.md      |  23 +-
 static/usage/v7/input/filtering/vue.md        |  16 +-
 static/usage/v7/input/helper-error/angular.md |   2 +-
 static/usage/v7/input/helper-error/demo.html  | 112 +++----
 .../usage/v7/input/helper-error/javascript.md |  10 +-
 static/usage/v7/input/helper-error/vue.md     |   8 +-
 .../usage/v7/input/label-placement/angular.md |   6 +-
 .../usage/v7/input/label-placement/demo.html  |  74 +++--
 .../usage/v7/input/label-placement/index.md   |   7 +-
 .../v7/input/label-placement/javascript.md    |   6 +-
 .../usage/v7/input/label-placement/react.md   |   6 +-
 static/usage/v7/input/label-placement/vue.md  |   6 +-
 static/usage/v7/input/migration/index.md      |  18 +-
 .../usage/v7/input/theming/colors/demo.html   |  74 +++--
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |   6 +-
 .../v7/input/theming/css-properties/demo.html |  92 +++---
 .../theming/css-properties/javascript.md      |   8 +-
 .../theming/css-properties/react/main_css.md  |   2 +-
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 .../v7/input/theming/css-properties/vue.md    |   8 +-
 static/usage/v7/input/types/angular.md        |   8 +-
 static/usage/v7/input/types/demo.html         |  92 +++---
 static/usage/v7/input/types/javascript.md     |   8 +-
 static/usage/v7/input/types/react.md          |   8 +-
 static/usage/v7/input/types/vue.md            |   8 +-
 static/usage/v7/item-divider/basic/angular.md |   8 +-
 static/usage/v7/item-divider/basic/demo.html  | 112 ++++---
 .../usage/v7/item-divider/basic/javascript.md |   8 +-
 static/usage/v7/item-divider/basic/react.md   |   8 +-
 static/usage/v7/item-divider/basic/vue.md     |   8 +-
 .../v7/item-divider/theming/colors/demo.html  | 108 ++++---
 .../angular/example_component_html.md         |   4 +-
 .../theming/css-properties/demo.html          |  66 ++--
 .../theming/css-properties/javascript.md      |   4 +-
 .../theming/css-properties/react/main_tsx.md  |   5 +-
 .../theming/css-properties/vue.md             |   6 +-
 static/usage/v7/item-group/basic/demo.html    | 104 +++---
 .../v7/item-group/sliding-items/angular.md    |  56 +---
 .../v7/item-group/sliding-items/demo.html     | 192 +++++------
 .../v7/item-group/sliding-items/javascript.md |  56 +---
 .../v7/item-group/sliding-items/react.md      |  66 ++--
 .../usage/v7/item-group/sliding-items/vue.md  |  66 ++--
 static/usage/v7/item-sliding/basic/demo.html  | 110 ++++---
 .../v7/item-sliding/expandable/demo.html      |  76 +++--
 .../usage/v7/item-sliding/expandable/react.md |   8 +-
 static/usage/v7/item-sliding/icons/angular.md |  16 +-
 static/usage/v7/item-sliding/icons/demo.html  | 298 +++++++++---------
 .../usage/v7/item-sliding/icons/javascript.md |  16 +-
 static/usage/v7/item-sliding/icons/react.md   |  16 +-
 static/usage/v7/item-sliding/icons/vue.md     |  20 +-
 static/usage/v7/item/basic/angular.md         |  10 +-
 static/usage/v7/item/basic/demo.html          | 116 ++++---
 static/usage/v7/item/basic/javascript.md      |  10 +-
 static/usage/v7/item/basic/react.md           |   6 +-
 static/usage/v7/item/basic/vue.md             |   8 +-
 static/usage/v7/item/buttons/angular.md       |  20 +-
 static/usage/v7/item/buttons/demo.html        | 122 ++++---
 static/usage/v7/item/buttons/javascript.md    |  20 +-
 static/usage/v7/item/buttons/react.md         |   8 +-
 static/usage/v7/item/buttons/vue.md           |  24 +-
 static/usage/v7/item/clickable/demo.html      |  72 ++---
 static/usage/v7/item/detail-arrows/demo.html  | 122 ++++---
 static/usage/v7/item/detail-arrows/vue.md     |   1 +
 static/usage/v7/item/icons/angular.md         |  16 +-
 static/usage/v7/item/icons/demo.html          |  88 +++---
 static/usage/v7/item/icons/javascript.md      |  16 +-
 static/usage/v7/item/icons/react.md           |  16 +-
 static/usage/v7/item/icons/vue.md             |  20 +-
 static/usage/v7/item/inputs/demo.html         | 142 ++++-----
 static/usage/v7/item/lines/angular.md         |   4 +-
 static/usage/v7/item/lines/demo.html          | 114 ++++---
 static/usage/v7/item/lines/javascript.md      |   4 +-
 static/usage/v7/item/lines/react.md           |   4 +-
 static/usage/v7/item/lines/vue.md             |   6 +-
 static/usage/v7/item/media/angular.md         |   8 +-
 static/usage/v7/item/media/demo.html          |  76 ++---
 static/usage/v7/item/media/javascript.md      |   8 +-
 static/usage/v7/item/media/react.md           |   8 +-
 static/usage/v7/item/media/vue.md             |   8 +-
 static/usage/v7/item/theming/colors/demo.html | 108 ++++---
 .../v7/item/theming/css-properties/demo.html  | 108 ++++---
 .../item/theming/css-shadow-parts/demo.html   | 108 ++++---
 .../v7/item/theming/input-highlight/demo.html |  84 +++--
 static/usage/v7/label/basic/demo.html         |  40 ++-
 static/usage/v7/label/input/demo.html         | 111 ++++---
 static/usage/v7/label/item/angular.md         |  10 +-
 static/usage/v7/label/item/demo.html          |  93 +++---
 static/usage/v7/label/item/javascript.md      |  10 +-
 static/usage/v7/label/item/react.md           |   6 +-
 static/usage/v7/label/item/vue.md             |   8 +-
 .../usage/v7/label/theming/colors/demo.html   |  68 ++--
 static/usage/v7/list-header/basic/demo.html   |  88 +++---
 static/usage/v7/list-header/buttons/demo.html |  90 +++---
 static/usage/v7/list-header/lines/demo.html   | 114 ++++---
 .../v7/list-header/theming/colors/demo.html   | 108 ++++---
 .../theming/css-properties/demo.html          |  62 ++--
 static/usage/v7/list/basic/demo.html          |  82 +++--
 static/usage/v7/list/inset/demo.html          |  90 +++---
 static/usage/v7/list/lines/demo.html          | 118 ++++---
 static/usage/v7/loading/controller/demo.html  |  68 ++--
 .../usage/v7/loading/controller/javascript.md |  16 +-
 static/usage/v7/loading/controller/react.md   |  15 +-
 static/usage/v7/loading/controller/vue.md     |  12 +-
 static/usage/v7/loading/inline/demo.html      |  41 ++-
 static/usage/v7/loading/spinners/demo.html    |  40 ++-
 .../v7/loading/theming/angular/global_css.md  |   2 +-
 static/usage/v7/loading/theming/demo.html     |  62 ++--
 .../v7/loading/theming/react/main_css.md      |   2 +-
 static/usage/v7/menu/basic/angular.md         |   4 +-
 static/usage/v7/menu/basic/demo.html          |  70 ++--
 static/usage/v7/menu/basic/javascript.md      |   4 +-
 static/usage/v7/menu/basic/react.md           |  15 +-
 static/usage/v7/menu/basic/vue.md             |  17 +-
 .../theming/angular/example_component_css.md  |   2 +-
 .../theming/angular/example_component_html.md |   4 +-
 static/usage/v7/menu/theming/demo.html        |  88 +++---
 static/usage/v7/menu/theming/javascript.md    |   4 +-
 .../usage/v7/menu/theming/react/main_css.md   |   2 +-
 .../usage/v7/menu/theming/react/main_tsx.md   |  15 +-
 static/usage/v7/menu/theming/vue.md           |  17 +-
 static/usage/v7/menu/toggle/demo.html         |  78 +++--
 static/usage/v7/menu/toggle/react.md          |  13 +-
 static/usage/v7/menu/toggle/vue.md            |  13 +-
 .../type/angular/example_component_html.md    |   5 +-
 static/usage/v7/menu/type/demo.html           | 135 ++++----
 static/usage/v7/menu/type/javascript.md       |   3 +-
 static/usage/v7/menu/type/react.md            |   6 +-
 static/usage/v7/menu/type/vue.md              |  13 +-
 .../v7/modal/can-dismiss/boolean/demo.html    | 124 ++++----
 .../v7/modal/can-dismiss/function/demo.html   | 126 ++++----
 .../prevent-swipe-to-close/demo.html          | 108 ++++---
 static/usage/v7/modal/card/basic/demo.html    | 164 +++++-----
 static/usage/v7/modal/controller/demo.html    |  98 +++---
 .../usage/v7/modal/custom-dialogs/demo.html   | 136 ++++----
 .../v7/modal/custom-dialogs/react/main_tsx.md |   2 +-
 static/usage/v7/modal/custom-dialogs/vue.md   |  18 +-
 static/usage/v7/modal/inline/basic/demo.html  | 116 ++++---
 .../usage/v7/modal/inline/is-open/demo.html   |  84 ++---
 .../v7/modal/performance/mount/angular.md     |   4 +-
 .../v7/modal/performance/mount/demo.html      |  86 +++--
 .../usage/v7/modal/performance/mount/react.md |  15 +-
 .../usage/v7/modal/performance/mount/vue.md   |  14 +-
 .../v7/modal/sheet/auto-height/demo.html      |  84 +++--
 .../v7/modal/sheet/auto-height/javascript.md  |   2 +-
 .../modal/sheet/auto-height/react/main_css.md |   2 +-
 .../modal/sheet/auto-height/react/main_tsx.md |  19 +-
 .../usage/v7/modal/sheet/auto-height/vue.md   |  11 +-
 .../modal/sheet/background-content/demo.html  | 189 ++++++-----
 static/usage/v7/modal/sheet/basic/demo.html   | 148 +++++----
 .../v7/modal/sheet/handle-behavior/demo.html  |  68 ++--
 .../v7/modal/styling/animations/demo.html     | 207 ++++++------
 .../usage/v7/modal/styling/theming/demo.html  | 184 ++++++-----
 .../usage/v7/nav/modal-navigation/demo.html   | 156 +++++----
 static/usage/v7/nav/nav-link/demo.html        |  67 ++--
 static/usage/v7/note/basic/demo.html          |  41 ++-
 static/usage/v7/note/item/demo.html           |  64 ++--
 static/usage/v7/note/theming/colors/demo.html |  84 +++--
 .../v7/note/theming/css-properties/demo.html  |  50 ++-
 static/usage/v7/picker/controller/demo.html   | 125 ++++----
 .../isOpen/angular/example_component_ts.md    |  47 +--
 .../usage/v7/picker/inline/isOpen/demo.html   | 117 +++----
 .../v7/picker/inline/isOpen/javascript.md     |  47 +--
 static/usage/v7/picker/inline/isOpen/react.md |  35 +-
 static/usage/v7/picker/inline/isOpen/vue.md   |  51 +--
 .../trigger/angular/example_component_html.md |   6 +-
 .../trigger/angular/example_component_ts.md   |  47 +--
 .../usage/v7/picker/inline/trigger/demo.html  | 111 +++----
 .../v7/picker/inline/trigger/javascript.md    |  47 +--
 .../usage/v7/picker/inline/trigger/react.md   |  35 +-
 static/usage/v7/picker/inline/trigger/vue.md  |  55 ++--
 .../angular/example_component_html.md         |   6 +-
 .../angular/example_component_ts.md           | 102 +++---
 .../usage/v7/picker/multiple-column/demo.html | 162 +++++-----
 .../v7/picker/multiple-column/javascript.md   | 102 +++---
 .../usage/v7/picker/multiple-column/react.md  |  72 +++--
 static/usage/v7/picker/multiple-column/vue.md | 110 ++++---
 .../angular/example_component_css.md          |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../customization/positioning/demo.html       |  98 +++---
 .../positioning/react/main_css.md             |   2 +-
 .../v7/popover/customization/sizing/demo.html |  54 ++--
 .../styling/angular/global_css.md             |   2 +-
 .../popover/customization/styling/demo.html   |  76 +++--
 .../customization/styling/react/main_css.md   |   2 +-
 static/usage/v7/popover/nested/demo.html      |  72 ++---
 .../v7/popover/performance/mount/demo.html    |  46 ++-
 .../popover/performance/mount/javascript.md   |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../angular/popover_component_html.md         |   2 +-
 .../popover/presenting/controller/demo.html   | 106 +++----
 .../presenting/controller/javascript.md       |   2 +-
 .../presenting/controller/vue/popover_vue.md  |  14 +-
 .../angular/example_component_html.md         |   2 +-
 .../presenting/inline-isopen/demo.html        |  64 ++--
 .../presenting/inline-isopen/javascript.md    |   4 +-
 .../presenting/inline-trigger/demo.html       |  62 ++--
 .../buffer/angular/example_component_ts.md    |   2 +-
 static/usage/v7/progress-bar/buffer/demo.html |  87 +++--
 static/usage/v7/progress-bar/buffer/react.md  |   4 +-
 static/usage/v7/progress-bar/buffer/vue.md    |   4 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v7/progress-bar/determinate/demo.html     |  69 ++--
 .../v7/progress-bar/determinate/react.md      |   4 +-
 .../usage/v7/progress-bar/determinate/vue.md  |   4 +-
 .../v7/progress-bar/indeterminate/demo.html   |  41 ++-
 .../v7/progress-bar/indeterminate/react.md    |   4 +-
 .../v7/progress-bar/theming/colors/demo.html  |  68 ++--
 .../angular/example_component_html.md         |   3 +-
 .../theming/css-properties/demo.html          |  62 ++--
 .../theming/css-properties/react/main_tsx.md  |   3 +-
 .../theming/css-properties/vue.md             |   2 +-
 .../angular/example_component_html.md         |   3 +-
 .../theming/css-shadow-parts/demo.html        |  72 ++---
 .../css-shadow-parts/react/main_tsx.md        |   3 +-
 .../theming/css-shadow-parts/vue.md           |   2 +-
 static/usage/v7/radio/basic/angular.md        |   2 +-
 static/usage/v7/radio/basic/demo.html         |  58 ++--
 static/usage/v7/radio/basic/javascript.md     |   2 +-
 static/usage/v7/radio/basic/react.md          |   9 +-
 static/usage/v7/radio/basic/vue.md            |   2 +-
 .../usage/v7/radio/empty-selection/demo.html  |  48 ++-
 .../usage/v7/radio/empty-selection/index.md   |   6 +-
 .../usage/v7/radio/empty-selection/react.md   |  12 +-
 static/usage/v7/radio/justify/demo.html       |  29 +-
 static/usage/v7/radio/justify/react.md        |  16 +-
 static/usage/v7/radio/justify/vue.md          |   4 +-
 .../usage/v7/radio/label-placement/demo.html  |  60 ++--
 .../usage/v7/radio/label-placement/react.md   |  20 +-
 static/usage/v7/radio/label-placement/vue.md  |   8 +-
 .../usage/v7/radio/theming/colors/demo.html   |  90 +++---
 .../v7/radio/theming/css-properties/demo.html |  90 +++---
 .../theming/css-properties/javascript.md      |   8 +-
 .../v7/radio/theming/css-properties/vue.md    |   8 +-
 .../angular/example_component_css.md          |   2 +-
 .../radio/theming/css-shadow-parts/demo.html  | 112 ++++---
 .../theming/css-shadow-parts/javascript.md    |   2 +-
 .../css-shadow-parts/react/main_css.md        |   2 +-
 static/usage/v7/range/basic/demo.html         |  48 ++-
 static/usage/v7/range/dual-knobs/demo.html    |  62 ++--
 .../usage/v7/range/ion-change-event/demo.html |  67 ++--
 .../usage/v7/range/ion-change-event/react.md  |   5 +-
 .../angular/example_component_html.md         |   6 +-
 .../v7/range/ion-knob-move-event/demo.html    |  83 +++--
 .../usage/v7/range/ion-knob-move-event/vue.md |   6 +-
 static/usage/v7/range/labels/demo.html        |  70 ++--
 static/usage/v7/range/labels/react.md         |  10 +-
 static/usage/v7/range/labels/vue.md           |   8 +-
 static/usage/v7/range/migration/index.md      |   2 +-
 static/usage/v7/range/pins/demo.html          |  60 ++--
 static/usage/v7/range/slots/demo.html         |  54 ++--
 .../usage/v7/range/snapping-ticks/demo.html   |  48 ++-
 .../v7/range/theming/css-properties/demo.html |  64 ++--
 .../angular/example_component_html.md         |  10 +-
 .../range/theming/css-shadow-parts/demo.html  | 118 +++----
 .../css-shadow-parts/react/main_tsx.md        |   4 +-
 .../v7/range/theming/css-shadow-parts/vue.md  |  10 +-
 .../advanced/angular/example_component_ts.md  |  20 +-
 static/usage/v7/refresher/advanced/demo.html  | 152 +++++----
 .../usage/v7/refresher/advanced/javascript.md |  16 +-
 .../v7/refresher/advanced/react/main_tsx.md   |  40 ++-
 static/usage/v7/refresher/advanced/vue.md     |  44 ++-
 .../basic/angular/example_component_ts.md     |   2 +-
 static/usage/v7/refresher/basic/demo.html     |  70 ++--
 static/usage/v7/refresher/basic/react.md      |  11 +-
 .../angular/example_component_html.md         |   3 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v7/refresher/custom-content/demo.html     |  78 ++---
 .../v7/refresher/custom-content/javascript.md |   3 +-
 .../v7/refresher/custom-content/react.md      |  15 +-
 .../usage/v7/refresher/custom-content/vue.md  |   3 +-
 .../angular/example_component_ts.md           |   2 +-
 .../refresher/custom-scroll-target/demo.html  | 106 +++----
 .../custom-scroll-target/react/main_tsx.md    |  11 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v7/refresher/pull-properties/demo.html    |  70 ++--
 .../v7/refresher/pull-properties/react.md     |  11 +-
 .../basic/angular/example_component_html.md   |  20 +-
 .../basic/angular/example_component_ts.md     |   2 +-
 static/usage/v7/reorder/basic/demo.html       | 132 ++++----
 static/usage/v7/reorder/basic/javascript.md   |  22 +-
 static/usage/v7/reorder/basic/react.md        |  20 +-
 static/usage/v7/reorder/basic/vue.md          |  26 +-
 .../angular/example_component_html.md         |  20 +-
 .../angular/example_component_ts.md           |   2 +-
 static/usage/v7/reorder/custom-icon/demo.html | 152 ++++-----
 .../v7/reorder/custom-icon/javascript.md      |  22 +-
 static/usage/v7/reorder/custom-icon/react.md  |  20 +-
 static/usage/v7/reorder/custom-icon/vue.md    |  26 +-
 .../angular/example_component_html.md         |  20 +-
 .../v7/reorder/custom-scroll-target/demo.html | 150 ++++-----
 .../custom-scroll-target/javascript.md        |  22 +-
 .../custom-scroll-target/react/main_tsx.md    |  30 +-
 .../v7/reorder/custom-scroll-target/vue.md    |  28 +-
 .../angular/example_component_html.md         |  24 +-
 .../angular/example_component_ts.md           |   2 +-
 .../v7/reorder/toggling-disabled/demo.html    | 150 ++++-----
 .../reorder/toggling-disabled/javascript.md   |  26 +-
 .../v7/reorder/toggling-disabled/react.md     |  36 +--
 .../usage/v7/reorder/toggling-disabled/vue.md |  32 +-
 .../angular/example_component_html.md         |   4 +-
 .../angular/example_component_ts.md           |   2 +-
 .../usage/v7/reorder/updating-data/demo.html  | 108 ++++---
 .../v7/reorder/updating-data/javascript.md    |   2 +-
 .../usage/v7/reorder/updating-data/react.md   |   8 +-
 static/usage/v7/reorder/updating-data/vue.md  |  10 +-
 .../wrapper/angular/example_component_html.md |  20 +-
 .../wrapper/angular/example_component_ts.md   |   2 +-
 static/usage/v7/reorder/wrapper/demo.html     | 142 ++++-----
 static/usage/v7/reorder/wrapper/javascript.md |  22 +-
 static/usage/v7/reorder/wrapper/react.md      |  20 +-
 static/usage/v7/reorder/wrapper/vue.md        |  26 +-
 static/usage/v7/ripple-effect/basic/demo.html | 154 +++++----
 .../v7/ripple-effect/customizing/demo.html    | 152 +++++----
 static/usage/v7/ripple-effect/type/demo.html  | 152 +++++----
 static/usage/v7/router/basic/demo.html        |  69 ++--
 static/usage/v7/searchbar/basic/demo.html     |  58 ++--
 .../v7/searchbar/cancel-button/angular.md     |   7 +-
 .../v7/searchbar/cancel-button/demo.html      |  62 ++--
 .../v7/searchbar/cancel-button/javascript.md  |   7 +-
 .../usage/v7/searchbar/cancel-button/react.md |   7 +-
 .../usage/v7/searchbar/cancel-button/vue.md   |   9 +-
 .../usage/v7/searchbar/clear-button/demo.html |  56 ++--
 static/usage/v7/searchbar/clear-button/vue.md |   2 +-
 .../debounce/angular/example_component_ts.md  |  15 +-
 static/usage/v7/searchbar/debounce/demo.html  | 103 +++---
 .../usage/v7/searchbar/debounce/javascript.md |  15 +-
 static/usage/v7/searchbar/debounce/react.md   |  23 +-
 static/usage/v7/searchbar/debounce/vue.md     |  15 +-
 .../usage/v7/searchbar/search-icon/demo.html  |  52 ++-
 static/usage/v7/searchbar/search-icon/vue.md  |   2 +-
 .../v7/searchbar/theming/colors/demo.html     |  68 ++--
 .../theming/css-properties/demo.html          |  90 +++---
 .../theming/css-properties/javascript.md      |  30 +-
 .../theming/css-properties/react/main_tsx.md  |   4 +-
 .../usage/v7/segment-button/basic/demo.html   |  98 +++---
 .../usage/v7/segment-button/layout/demo.html  | 188 ++++++-----
 static/usage/v7/segment-button/layout/vue.md  |   2 +-
 .../theming/css-properties/demo.html          | 102 +++---
 .../theming/css-shadow-parts/demo.html        | 118 ++++---
 static/usage/v7/segment/basic/demo.html       |  86 +++--
 static/usage/v7/segment/scrollable/demo.html  | 120 ++++---
 static/usage/v7/segment/scrollable/vue.md     |  15 +-
 .../usage/v7/segment/theming/colors/demo.html | 214 +++++++------
 .../segment/theming/css-properties/demo.html  |  72 ++---
 .../select/basic/multiple-selection/demo.html |  54 ++--
 .../angular/example_component_html.md         |   2 +-
 .../basic/responding-to-interaction/demo.html | 114 ++++---
 .../responding-to-interaction/javascript.md   |   2 +-
 .../basic/responding-to-interaction/vue.md    |   8 +-
 .../select/basic/single-selection/demo.html   |  54 ++--
 .../customization/button-text/angular.md      |   7 +-
 .../customization/button-text/demo.html       |  78 +++--
 .../customization/button-text/javascript.md   |   7 +-
 .../select/customization/button-text/react.md |   7 +-
 .../select/customization/button-text/vue.md   |   7 +-
 .../angular/example_component_html.md         |  13 +-
 .../customization/interface-options/demo.html | 143 +++++----
 .../interface-options/javascript.md           |  12 +-
 .../customization/interface-options/react.md  |  19 +-
 .../customization/interface-options/vue.md    |  32 +-
 .../angular/example_component_css.md          |   2 +-
 .../customization/styling-select/demo.html    | 112 ++++---
 .../styling-select/javascript.md              |  42 +--
 .../styling-select/react/main_css.md          |   2 +-
 static/usage/v7/select/fill/demo.html         |  72 ++---
 static/usage/v7/select/fill/react.md          |   4 +-
 static/usage/v7/select/fill/vue.md            |   4 +-
 .../select/interfaces/action-sheet/demo.html  |  54 ++--
 .../v7/select/interfaces/popover/demo.html    |  54 ++--
 static/usage/v7/select/justify/demo.html      |  29 +-
 static/usage/v7/select/justify/index.md       |   7 +-
 .../usage/v7/select/label-placement/demo.html | 106 +++----
 .../usage/v7/select/label-placement/index.md  |   7 +-
 .../usage/v7/select/label-placement/react.md  |   6 +-
 static/usage/v7/select/label-placement/vue.md |   6 +-
 static/usage/v7/select/migration/index.md     |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../multiple-selection/demo.html              | 154 +++++----
 .../multiple-selection/javascript.md          |  18 +-
 .../multiple-selection/vue.md                 |  28 +-
 .../angular/example_component_html.md         |   2 +-
 .../using-comparewith/demo.html               | 136 ++++----
 .../using-comparewith/javascript.md           |  14 +-
 .../using-comparewith/vue.md                  |  24 +-
 .../typeahead/angular/angular_types_ts.md     |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../typeahead/angular/example_component_ts.md |  16 +-
 .../angular/modal-example_component_html.md   |   8 +-
 .../angular/modal-example_component_ts.md     |  31 +-
 static/usage/v7/select/typeahead/demo.html    |  32 +-
 static/usage/v7/select/typeahead/index.md     |  18 +-
 .../usage/v7/select/typeahead/javascript.md   |  26 +-
 .../v7/select/typeahead/react/main_tsx.md     |  20 +-
 .../select/typeahead/react/react_types_ts.md  |   2 +-
 .../react/typeahead_component_tsx.md          |  65 ++--
 .../v7/select/typeahead/vue/example_vue.md    |  22 +-
 .../typeahead/vue/typeahead_component_vue.md  | 106 ++++---
 .../v7/select/typeahead/vue/vue_types_ts.md   |   2 +-
 .../basic/angular/example_component_ts.md     |   5 +-
 static/usage/v7/skeleton-text/basic/demo.html |  97 +++---
 .../v7/skeleton-text/basic/javascript.md      |   1 -
 static/usage/v7/skeleton-text/basic/react.md  |  22 +-
 static/usage/v7/skeleton-text/basic/vue.md    |  14 +-
 .../angular/example_component_css.md          |   2 +-
 .../theming/css-properties/demo.html          | 106 +++----
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_css.md  |   2 +-
 .../theming/css-properties/react/main_tsx.md  |  19 +-
 .../theming/css-properties/vue.md             |  13 +-
 static/usage/v7/spinner/basic/demo.html       | 130 ++++----
 .../usage/v7/spinner/theming/colors/demo.html |  58 ++--
 .../spinner/theming/css-properties/demo.html  |  50 ++-
 .../spinner/theming/css-properties/react.md   |   4 +-
 static/usage/v7/split-pane/basic/angular.md   |   8 +-
 static/usage/v7/split-pane/basic/demo.html    |  70 ++--
 .../usage/v7/split-pane/basic/javascript.md   |   8 +-
 static/usage/v7/split-pane/basic/react.md     |  10 +-
 static/usage/v7/split-pane/basic/vue.md       |  12 +-
 .../angular/example_component_html.md         |   8 +-
 .../theming/css-properties/demo.html          |  84 +++--
 .../theming/css-properties/javascript.md      |  10 +-
 .../theming/css-properties/react/main_tsx.md  |  10 +-
 .../split-pane/theming/css-properties/vue.md  |  14 +-
 static/usage/v7/tabs/router/demo.html         | 225 +++++++------
 static/usage/v7/text/basic/angular.md         |   8 +-
 static/usage/v7/text/basic/demo.html          | 108 ++++---
 static/usage/v7/text/basic/javascript.md      |   8 +-
 static/usage/v7/text/basic/react.md           |  13 +-
 static/usage/v7/text/basic/vue.md             |   8 +-
 static/usage/v7/textarea/autogrow/angular.md  |   7 +-
 static/usage/v7/textarea/autogrow/demo.html   |  67 ++--
 .../usage/v7/textarea/autogrow/javascript.md  |   7 +-
 static/usage/v7/textarea/autogrow/vue.md      |   7 +-
 static/usage/v7/textarea/basic/demo.html      |  68 ++--
 .../usage/v7/textarea/clear-on-edit/demo.html |  52 ++-
 static/usage/v7/textarea/counter/demo.html    |  69 ++--
 static/usage/v7/textarea/fill/demo.html       |  68 ++--
 .../usage/v7/textarea/helper-error/demo.html  | 111 +++----
 .../v7/textarea/label-placement/demo.html     |  74 +++--
 static/usage/v7/textarea/migration/index.md   |  18 +-
 static/usage/v7/textarea/theming/demo.html    |  86 +++--
 .../usage/v7/textarea/theming/javascript.md   |   2 +-
 static/usage/v7/textarea/theming/vue.md       |   2 +-
 static/usage/v7/thumbnail/basic/demo.html     |  45 ++-
 static/usage/v7/thumbnail/item/demo.html      |  51 ++-
 .../angular/example_component_css.md          |   1 -
 .../angular/example_component_html.md         |   1 -
 .../theming/css-properties/demo.html          |  56 ++--
 .../theming/css-properties/react/main_tsx.md  |   1 -
 static/usage/v7/title/basic/demo.html         |  41 ++-
 .../collapsible-large-title/basic/demo.html   |  97 +++---
 .../collapsible-large-title/buttons/demo.html | 103 +++---
 .../v7/title/theming/css-properties/demo.html | 116 ++++---
 .../buttons/angular/example_component_html.md |   6 +-
 .../buttons/angular/example_component_ts.md   |  14 +-
 static/usage/v7/toast/buttons/demo.html       | 116 +++----
 static/usage/v7/toast/buttons/javascript.md   |  14 +-
 static/usage/v7/toast/buttons/react.md        |  10 +-
 static/usage/v7/toast/buttons/vue.md          |  30 +-
 static/usage/v7/toast/icon/angular.md         |   2 +-
 static/usage/v7/toast/icon/demo.html          |  50 ++-
 static/usage/v7/toast/icon/index.md           |   2 +-
 static/usage/v7/toast/icon/vue.md             |   4 +-
 static/usage/v7/toast/inline/basic/demo.html  |  48 ++-
 static/usage/v7/toast/inline/basic/index.md   |   2 +-
 static/usage/v7/toast/inline/basic/react.md   |  10 +-
 static/usage/v7/toast/inline/basic/vue.md     |   9 +-
 .../usage/v7/toast/inline/is-open/demo.html   |  58 ++--
 static/usage/v7/toast/inline/is-open/vue.md   |   4 +-
 .../layout/angular/example_component_html.md  |  10 +-
 .../layout/angular/example_component_ts.md    |   4 +-
 static/usage/v7/toast/layout/demo.html        |  79 ++---
 static/usage/v7/toast/layout/javascript.md    |  15 +-
 static/usage/v7/toast/layout/react.md         |   4 +-
 static/usage/v7/toast/layout/vue.md           |   8 +-
 .../angular/example_component_html.md         |   2 +-
 .../angular/example_component_ts.md           |   4 +-
 .../v7/toast/presenting/controller/demo.html  |  92 +++---
 .../toast/presenting/controller/javascript.md |   2 +-
 .../v7/toast/presenting/controller/react.md   |  14 +-
 .../v7/toast/presenting/controller/vue.md     |   2 +-
 .../theming/angular/example_component_html.md |   8 +-
 .../theming/angular/example_component_ts.md   |   4 +-
 .../v7/toast/theming/angular/global_css.md    |   6 +-
 static/usage/v7/toast/theming/demo.html       | 103 +++---
 static/usage/v7/toast/theming/javascript.md   |   8 +-
 .../usage/v7/toast/theming/react/main_css.md  |   6 +-
 .../usage/v7/toast/theming/react/main_tsx.md  |  10 +-
 static/usage/v7/toast/theming/vue.md          |  20 +-
 static/usage/v7/toggle/basic/demo.html        |  46 ++-
 static/usage/v7/toggle/basic/react.md         |  16 +-
 static/usage/v7/toggle/justify/demo.html      |  68 ++--
 .../usage/v7/toggle/label-placement/demo.html |  44 ++-
 .../usage/v7/toggle/label-placement/react.md  |  12 +-
 static/usage/v7/toggle/list/demo.html         |  59 ++--
 static/usage/v7/toggle/on-off/demo.html       |  39 ++-
 static/usage/v7/toggle/on-off/react.md        |   4 +-
 .../usage/v7/toggle/theming/colors/demo.html  |  55 ++--
 .../toggle/theming/css-properties/demo.html   |  96 +++---
 .../theming/css-properties/javascript.md      |  12 +-
 .../v7/toggle/theming/css-properties/vue.md   |  12 +-
 .../toggle/theming/css-shadow-parts/demo.html | 112 ++++---
 .../theming/css-shadow-parts/javascript.md    |  10 +-
 .../v7/toggle/theming/css-shadow-parts/vue.md |  10 +-
 static/usage/v7/toolbar/basic/demo.html       |  51 ++-
 static/usage/v7/toolbar/buttons/angular.md    |  16 +-
 static/usage/v7/toolbar/buttons/demo.html     | 210 ++++++------
 static/usage/v7/toolbar/buttons/javascript.md |  16 +-
 static/usage/v7/toolbar/buttons/react.md      |  16 +-
 static/usage/v7/toolbar/buttons/vue.md        |  16 +-
 .../usage/v7/toolbar/progress-bars/demo.html  |  43 ++-
 static/usage/v7/toolbar/searchbars/demo.html  |  47 ++-
 static/usage/v7/toolbar/segments/demo.html    |  53 ++--
 .../usage/v7/toolbar/theming/colors/demo.html | 110 ++++---
 .../toolbar/theming/css-properties/demo.html  |  76 +++--
 versioned_docs/version-v5/api/item.md         |  10 +-
 versioned_docs/version-v5/api/select.md       |   2 +-
 versioned_docs/version-v5/native/abbyy-rtr.md |   6 +-
 .../version-v5/native/action-sheet.md         |   6 +-
 versioned_docs/version-v5/native/aes-256.md   |   6 +-
 .../version-v5/native/all-in-one-sdk.md       |   6 +-
 .../version-v5/native/analytics-firebase.md   |   6 +-
 .../version-v5/native/android-exoplayer.md    |   6 +-
 .../version-v5/native/android-full-screen.md  |   7 +-
 .../version-v5/native/android-notch.md        |   6 +-
 .../version-v5/native/android-permissions.md  |   8 +-
 .../version-v5/native/app-availability.md     |   7 +-
 .../version-v5/native/app-center-analytics.md |   8 +-
 .../version-v5/native/app-center-crashes.md   |   7 +-
 .../version-v5/native/app-center-push.md      |   7 +-
 .../version-v5/native/app-preferences.md      |   7 +-
 .../version-v5/native/app-version.md          |   6 +-
 .../version-v5/native/apple-wallet.md         |   3 +-
 versioned_docs/version-v5/native/appsflyer.md |   6 +-
 .../version-v5/native/background-fetch.md     |   7 +-
 .../native/background-geolocation.md          |   8 +-
 .../version-v5/native/background-mode.md      |   7 +-
 .../version-v5/native/background-upload.md    |   7 +-
 .../version-v5/native/barcode-scanner.md      |   7 +-
 .../version-v5/native/battery-status.md       |   7 +-
 .../version-v5/native/biometric-wrapper.md    |   6 +-
 .../version-v5/native/bluetooth-le.md         |   6 +-
 .../version-v5/native/bluetooth-serial.md     |   7 +-
 .../version-v5/native/broadcaster.md          |   6 +-
 .../version-v5/native/build-info.md           |   3 +-
 .../version-v5/native/call-directory.md       |   7 +-
 .../version-v5/native/camera-preview.md       |   7 +-
 .../version-v5/native/cloud-settings.md       |   7 +-
 versioned_docs/version-v5/native/code-push.md |   3 +-
 .../version-v5/native/custom-uisdk.md         |   6 +-
 .../version-v5/native/device-accounts.md      |   6 +-
 .../version-v5/native/device-motion.md        |   6 +-
 .../version-v5/native/device-orientation.md   |   7 +-
 .../version-v5/native/dfu-update.md           |   6 +-
 .../version-v5/native/diagnostic.md           |   6 +-
 .../version-v5/native/document-picker.md      |   9 +-
 .../version-v5/native/document-scanner.md     |   7 +-
 .../version-v5/native/document-viewer.md      |   7 +-
 .../version-v5/native/email-composer.md       |   7 +-
 versioned_docs/version-v5/native/facebook.md  |   6 +-
 versioned_docs/version-v5/native/fcm.md       |   7 +-
 .../version-v5/native/file-opener.md          |   6 +-
 versioned_docs/version-v5/native/file-path.md |   3 +-
 .../version-v5/native/file-transfer.md        |   6 +-
 .../version-v5/native/firebase-analytics.md   |   7 +-
 .../native/firebase-authentication.md         |   9 +-
 .../version-v5/native/firebase-config.md      |   7 +-
 .../version-v5/native/firebase-crash.md       |   7 +-
 .../version-v5/native/firebase-crashlytics.md |   8 +-
 .../native/firebase-dynamic-links.md          |   8 +-
 .../version-v5/native/firebase-messaging.md   |   7 +-
 .../version-v5/native/firebase-vision.md      |   7 +-
 .../version-v5/native/firebase-x.md           |   3 +-
 .../version-v5/native/flashlight.md           |   6 +-
 .../version-v5/native/foreground-service.md   |   7 +-
 .../version-v5/native/gao-de-location.md      |   7 +-
 .../version-v5/native/ge-tui-sdk-plugin.md    |   6 +-
 .../version-v5/native/geolocation.md          |   6 +-
 .../version-v5/native/globalization.md        |   6 +-
 .../version-v5/native/google-analytics.md     |   7 +-
 .../version-v5/native/google-nearby.md        |   6 +-
 .../version-v5/native/google-plus.md          |   6 +-
 .../version-v5/native/health-kit.md           |   6 +-
 versioned_docs/version-v5/native/http.md      |   3 +-
 .../version-v5/native/image-picker.md         |   7 +-
 .../version-v5/native/in-app-browser.md       |   6 +-
 .../version-v5/native/in-app-purchase-2.md    |   6 +-
 .../version-v5/native/in-app-review.md        |   6 +-
 versioned_docs/version-v5/native/instagram.md |   3 +-
 .../version-v5/native/ionic-webview.md        |   6 +-
 .../ios-aswebauthenticationsession-api.md     |   8 +-
 versioned_docs/version-v5/native/keyboard.md  |   6 +-
 versioned_docs/version-v5/native/keychain.md  |   6 +-
 .../version-v5/native/kommunicate.md          |   6 +-
 .../version-v5/native/launch-navigator.md     |   8 +-
 .../version-v5/native/launch-review.md        |   3 +-
 .../version-v5/native/line-login.md           |   6 +-
 .../version-v5/native/local-notifications.md  |   8 +-
 .../version-v5/native/location-accuracy.md    |   8 +-
 .../version-v5/native/lottie-splash-screen.md |   8 +-
 .../version-v5/native/media-capture.md        |   6 +-
 .../version-v5/native/mlkit-translate.md      |   7 +-
 .../version-v5/native/mobile-messaging.md     |   7 +-
 .../native/multiple-document-picker.md        |   9 +-
 .../version-v5/native/music-controls.md       |   7 +-
 .../version-v5/native/native-audio.md         |   6 +-
 .../version-v5/native/native-geocoder.md      |   7 +-
 .../version-v5/native/native-keyboard.md      |   7 +-
 .../native/native-page-transitions.md         |   9 +-
 .../version-v5/native/native-storage.md       |   6 +-
 .../version-v5/native/network-interface.md    |   7 +-
 versioned_docs/version-v5/native/network.md   |   6 +-
 versioned_docs/version-v5/native/onesignal.md |   3 +-
 .../version-v5/native/open-native-settings.md |   7 +-
 .../version-v5/native/pdf-generator.md        |   3 +-
 .../version-v5/native/photo-library.md        |   6 +-
 .../version-v5/native/photo-viewer.md         |   6 +-
 .../version-v5/native/pspdfkit-cordova.md     |   3 +-
 versioned_docs/version-v5/native/purchases.md |   6 +-
 .../version-v5/native/pushape-push.md         |   3 +-
 .../native/safari-view-controller.md          |   8 +-
 .../version-v5/native/screen-orientation.md   |   7 +-
 .../version-v5/native/service-discovery.md    |   6 +-
 .../version-v5/native/sign-in-with-apple.md   |   7 +-
 versioned_docs/version-v5/native/smartlook.md |   9 +-
 .../version-v5/native/sms-retriever.md        |   7 +-
 .../version-v5/native/social-sharing.md       |   7 +-
 .../version-v5/native/speech-recognition.md   |   7 +-
 .../version-v5/native/spinner-dialog.md       |   7 +-
 .../version-v5/native/splash-screen.md        |   6 +-
 .../version-v5/native/spotify-auth.md         |   3 +-
 .../version-v5/native/sqlite-db-copy.md       |   6 +-
 .../version-v5/native/sqlite-porter.md        |   8 +-
 versioned_docs/version-v5/native/star-prnt.md |   3 +-
 .../version-v5/native/status-bar.md           |   3 +-
 .../version-v5/native/streaming-media.md      |   7 +-
 .../version-v5/native/taptic-engine.md        |   6 +-
 .../version-v5/native/tealium-adidentifier.md |   7 +-
 .../native/tealium-installreferrer.md         |   8 +-
 .../version-v5/native/theme-detection.md      |   7 +-
 .../version-v5/native/three-dee-touch.md      |   6 +-
 .../version-v5/native/unvired-cordova-sdk.md  |   8 +-
 .../version-v5/native/urbanairship.md         |   3 +-
 .../version-v5/native/usabilla-cordova-sdk.md |   6 +-
 versioned_docs/version-v5/native/vibration.md |   3 +-
 .../version-v5/native/video-editor.md         |   6 +-
 .../version-v5/native/video-player.md         |   8 +-
 .../version-v5/native/web-intent.md           |   7 +-
 .../version-v5/native/web-server.md           |   3 +-
 .../version-v5/native/web-socket-server.md    |   7 +-
 versioned_docs/version-v5/native/webengage.md |   3 +-
 .../version-v5/native/wheel-selector.md       |   7 +-
 .../version-v5/native/wifi-wizard-2.md        |   6 +-
 .../version-v5/native/wonderpush.md           |   3 +-
 .../version-v5/native/youtube-video-player.md |   8 +-
 .../version-v5/reference/glossary.md          |   6 +-
 .../version-v5/reference/migration.md         |   2 +-
 .../version-v6/angular/navigation.md          |  16 +-
 versioned_docs/version-v6/angular/slides.md   |  20 +-
 .../version-v6/angular/virtual-scroll.md      |   2 +-
 versioned_docs/version-v6/api/icon.md         |   2 +-
 versioned_docs/version-v6/api/nav.md          |   2 +-
 .../version-v6/developing/config.md           |  84 +++--
 .../developing/config/global/index.md         |  16 +-
 .../developing/config/per-component/index.md  |  22 +-
 .../config/per-platform-fallback/index.md     |  24 +-
 .../config/per-platform-overrides/index.md    |   8 +-
 .../developing/config/per-platform/index.md   |   7 +-
 .../developing/hardware-back-button.md        |   8 +-
 .../version-v6/intro/upgrading-to-ionic-6.md  |  73 +++--
 versioned_docs/version-v6/native-faq.md       |   9 +-
 versioned_docs/version-v6/native.md           |   8 +-
 versioned_docs/version-v6/react/navigation.md |  42 +--
 versioned_docs/version-v6/react/slides.md     |   2 +-
 .../version-v6/react/virtual-scroll.md        |   6 +-
 .../version-v6/reference/browser-support.md   |   1 -
 .../version-v6/reference/migration.md         |   2 +-
 .../version-v6/reference/support.md           |  16 +-
 versioned_docs/version-v6/vue/navigation.md   |  24 +-
 versioned_docs/version-v6/vue/quickstart.md   |  33 +-
 versioned_docs/version-v6/vue/slides.md       |   2 +-
 .../version-v6/vue/virtual-scroll.md          |   2 +-
 1960 files changed, 39445 insertions(+), 38577 deletions(-)
 create mode 100644 .github/workflows/CI.yml
 delete mode 100644 .prettierrc.js

diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
new file mode 100644
index 00000000000..d35a183f9ac
--- /dev/null
+++ b/.github/workflows/CI.yml
@@ -0,0 +1,27 @@
+# GitHub Actions docs
+# https://help.github.com/en/articles/about-github-actions
+# https://help.github.com/en/articles/workflow-syntax-for-github-actions
+
+name: Install Dependencies, Lint
+
+on: [pull_request]
+
+jobs:
+  test:
+    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node_version: [16]
+        os: [windows-latest, macOS-latest]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node_version }}
+    - name: Install Dependencies
+      run: npm ci --legacy-peer-deps
+    - name: Lint
+      run: npm run lint
diff --git a/.prettierignore b/.prettierignore
index 85fee6b4234..c9e0e72442c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,13 +1,15 @@
 src/theme/DocItem
 src/theme/DocPage
 legacy-stencil-components
-node_modules
 scripts/bak
-src/styles.bak
-src/pages
+
 docs/api
 docs/native
 docs/cli/commands
 
+static/code/stackblitz
+
 .docusaurus
-.github
\ No newline at end of file
+.github
+build
+node_modules
diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index 4122fc68e28..00000000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-  ...require("@ionic/prettier-config"),
-  overrides: [
-    {
-      files: "*.md",
-      options: {
-        "parser": "mdx"
-      }
-    }
-  ]
-};
\ No newline at end of file
diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index 5144016e939..c5eefbec3be 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi
 To migrate over your CSS, first update your selectors to target the new custom elements instead:
 
 | ion-slides Selector | Swiper Selector    |
-| ------------------- | ------------------ | 
+| ------------------- | ------------------ |
 | `ion-slides`        | `swiper-container` |
 | `ion-slide`         | `swiper-slide`     |
 
@@ -155,9 +155,7 @@ export class HomePage {
 ```html
 <!-- home.page.html -->
 
-<swiper-container [modules]="swiperModules">
-  ...
-</swiper-container>
+<swiper-container [modules]="swiperModules"> ... </swiper-container>
 ```
 
 :::note
@@ -190,11 +188,11 @@ To set these options as properties directly on `<swiper-container>` we would do
 
 Below is a full list of property changes when going from `ion-slides` to Swiper Element:
 
-| Name      | Notes                                                                                                                                   |
-| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
-| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
-| pager     | Use the `pagination` property instead.                                                                                                  |
+| Name    | Notes                                                                                                                                   |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode    | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager   | Use the `pagination` property instead.                                                                                                  |
 
 :::note
 All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
@@ -306,9 +304,7 @@ All methods and properties available on the Swiper instance can be found at <a h
 Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
 
 ```html
-<swiper-container effect="flip">
-  ...
-</swiper-container>
+<swiper-container effect="flip"> ... </swiper-container>
 ```
 
 :::note
diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md
index 23703954a9e..4d2d160ee78 100644
--- a/docs/cli/livereload.md
+++ b/docs/cli/livereload.md
@@ -64,8 +64,9 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS.
 
 For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:
+
 ```shell
 ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
 ```
 
-Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
\ No newline at end of file
+Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
diff --git a/docs/developing/config.md b/docs/developing/config.md
index 10ad73cec8d..1bb117883fa 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -21,7 +21,6 @@ Ionic Config is not reactive. Updating the config's value after the component ha
 import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
 
 <PerComponentExample />
-  
 
 ## Per-Platform Config
 
@@ -33,7 +32,6 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index.
 
 <PerPlatformExample />
 
-
 ### Fallbacks
 
 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:
@@ -59,7 +57,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
 |                 |                                                                                  |
 | --------------- | -------------------------------------------------------------------------------- |
 | **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. |
-| **Signature**   | `get(key: string, fallback?: any) => any`                                          |
+| **Signature**   | `get(key: string, fallback?: any) => any`                                        |
 
 #### Examples
 
@@ -79,7 +77,7 @@ class AppComponent {
 |                 |                                                                                      |
 | --------------- | ------------------------------------------------------------------------------------ |
 | **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. |
-| **Signature**   | `getBoolean(key: string, fallback?: boolean) => boolean`                               |
+| **Signature**   | `getBoolean(key: string, fallback?: boolean) => boolean`                             |
 
 #### Examples
 
@@ -99,7 +97,7 @@ class AppComponent {
 |                 |                                                                                 |
 | --------------- | ------------------------------------------------------------------------------- |
 | **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. |
-| **Signature**   | `getNumber(key: string, fallback?: number) => number`                             |
+| **Signature**   | `getNumber(key: string, fallback?: number) => number`                           |
 
 ## Interfaces
 
@@ -107,41 +105,41 @@ class AppComponent {
 
 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.                                        |
-| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. |
-| `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.                     |
-| `toastDuration`          | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                         |
-| `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".               |
-| `toggleOnOffLabels`      | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
+| 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.                                                                                                                                                                            |
+| `innerHTMLTemplatesEnabled` | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. |
+| `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.                                                                                                                                                         |
+| `toastDuration`             | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                                                                                                                                                             |
+| `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".                                                                                                                                                   |
+| `toggleOnOffLabels`         | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                                                                                                                                                    |
diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md
index bbfbaa83a71..c2358647c26 100644
--- a/docs/developing/config/global/index.md
+++ b/docs/developing/config/global/index.md
@@ -17,10 +17,11 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     rippleEffect: false,
-    mode: 'md'
-  }
-}
+    mode: 'md',
+  },
+};
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -38,10 +39,12 @@ import { IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
 The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -50,18 +53,19 @@ setupIonicReact({
   mode: 'md',
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
 ```tsx title="main.ts"
-
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
+
 createApp(App).use(IonicVue, {
   rippleEffect: false,
   mode: 'md',
 });
 ```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md
index 64b868a70ee..0e4aadeee60 100644
--- a/docs/developing/config/per-component/index.md
+++ b/docs/developing/config/per-component/index.md
@@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     // Not recommended when your app requires reactive values
-    backButtonText: 'Go Back'
-  }
-}
+    backButtonText: 'Go Back',
+  },
+};
 ```
 
 **Recommended**
@@ -31,7 +31,7 @@ window.Ionic = {
 
 <script>
   const backButton = document.querySelector('ion-back-button');
-  
+
   /**
    * The back button text can be updated
    * anytime the locale changes.
@@ -39,6 +39,7 @@ window.Ionic = {
   backButton.text = 'Go Back';
 </script>
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -75,6 +76,7 @@ class MyComponent {
   backButtonText = 'Go Back';
 }
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -85,7 +87,7 @@ import { setupIonicReact } from '@ionic/react';
 
 setupIonicReact({
   // Not recommended when your app requires reactive values
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -106,6 +108,7 @@ const ExampleComponent = () => {
   )
 }
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -114,10 +117,10 @@ const ExampleComponent = () => {
 ```ts
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
- // Not recommended when your app requires reactive values
+
+// Not recommended when your app requires reactive values
 createApp(App).use(IonicVue, {
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -139,5 +142,6 @@ createApp(App).use(IonicVue, {
   const backButtonText = ref('Go Back');
 </script>
 ```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md
index 02a5f27a3c0..6390a6120d1 100644
--- a/docs/developing/config/per-platform-fallback/index.md
+++ b/docs/developing/config/per-platform-fallback/index.md
@@ -34,6 +34,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -43,18 +44,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -64,16 +65,17 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md
index 243cfa9c2fc..a5b8cdc490a 100644
--- a/docs/developing/config/per-platform-overrides/index.md
+++ b/docs/developing/config/per-platform-overrides/index.md
@@ -37,6 +37,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -59,8 +60,8 @@ const getConfig = () => {
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -83,6 +84,7 @@ const getConfig = () => {
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md
index 7d17299d0f8..d21553ad1cf 100644
--- a/docs/developing/config/per-platform/index.md
+++ b/docs/developing/config/per-platform/index.md
@@ -31,6 +31,7 @@ import { isPlatform, IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -45,6 +46,7 @@ setupIonicReact({
   animated: !isPlatform('mobileweb'),
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -58,6 +60,7 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 createApp(App).use(IonicVue, {
   animated: !isPlatform('mobileweb'),
 });
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index 2f3271613dc..6813f9b4ceb 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -338,8 +338,8 @@ It is recommended to check whether or not the user is on the root page prior to
 
 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                                                                                                                              |
-| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Handler    | Priority | Propagates | Description                                                                                                                 |
+| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
 | Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
-| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                                   |
-| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                                    |
+| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                      |
+| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                       |
diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
index d23ea52b4b4..05bb0a88aaa 100644
--- a/docs/layout/css-utilities.md
+++ b/docs/layout/css-utilities.md
@@ -141,8 +141,7 @@ The float CSS property specifies that an element should be placed along the left
         src="https://ionicframework.com/docs/img/demos/avatar.svg"
         height="50px"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
     <ion-col>
       <h3>float-left</h3>
@@ -152,8 +151,7 @@ The float CSS property specifies that an element should be placed along the left
         height="50px"
         class="ion-float-left"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
     <ion-col>
       <h3>float-right</h3>
@@ -163,8 +161,7 @@ The float CSS property specifies that an element should be placed along the left
         height="50px"
         class="ion-float-right"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
   </ion-row>
 </ion-grid>
diff --git a/docs/layout/structure.md b/docs/layout/structure.md
index 5315d0cd9de..700e77372fa 100644
--- a/docs/layout/structure.md
+++ b/docs/layout/structure.md
@@ -34,17 +34,14 @@ import Footer from '@site/static/usage/v7/footer/basic/index.md';
 
 <Footer />
 
-
 ## 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 a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
 
-
 import Tabs from '@site/static/usage/v7/tabs/router/index.md';
 
 <Tabs />
 
-
 ## 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.
@@ -53,7 +50,6 @@ import Menu from '@site/static/usage/v7/menu/basic/index.md';
 
 <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.
diff --git a/docs/native-faq.md b/docs/native-faq.md
index ceaf06b6d38..a74c967ba41 100644
--- a/docs/native-faq.md
+++ b/docs/native-faq.md
@@ -5,9 +5,9 @@ slug: /native/faq
 
 # Frequently Asked Question
 
-## What is Capacitor? 
+## What is Capacitor?
 
-Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. 
+Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library.
 
 ## Permission Issues
 
@@ -17,9 +17,8 @@ If you're using a plugin, it may require adding additional permissions to your n
 - `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
 - `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
 
-You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. 
-
+You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail.
 
 ## Unexpected behaviour
 
-If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
\ No newline at end of file
+If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
diff --git a/docs/native.md b/docs/native.md
index c863908c42f..13818c296ad 100644
--- a/docs/native.md
+++ b/docs/native.md
@@ -23,14 +23,10 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
 
 <intro-end />
 
-
 Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences.
 
 While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
 
-
-
-
 <NativeEnterpriseCard />
 
 > Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/)
diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index c24d363256b..310f39635e6 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -276,11 +276,11 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -302,11 +302,11 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/non-linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -339,7 +339,7 @@ A common point of confusion when setting up routing is deciding between shared U
 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 = () => {
+const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
@@ -352,7 +352,7 @@ const App: React.FC = () => {
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>
-}
+);
 ```
 
 The above routes are considered "shared" because they reuse the `dashboard` piece of the URL.
@@ -372,7 +372,7 @@ const App: React.FC = () => (
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>
-)
+);
 
 const DashboardRouterOutlet: React.FC = () => (
   <IonRouterOutlet>
@@ -383,7 +383,7 @@ const DashboardRouterOutlet: React.FC = () => (
       <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`.
@@ -420,15 +420,7 @@ 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 { 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';
@@ -481,7 +473,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr
 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
@@ -543,11 +535,11 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/tabs-account-demo.mp4')} 
+  src={useBaseUrl('video/tabs-account-demo.mp4')}
   controls
 ></video>
 
@@ -559,8 +551,8 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
 
 ## Live Example
@@ -634,7 +626,6 @@ type UseIonRouterResult = {
 
 The following example shows how to use `useIonRouter`:
 
-
 ```tsx
 import { useIonRouter } from '@ionic/react';
 
@@ -643,13 +634,12 @@ const MyComponent: React.FC = () => {
   const goToPage = () => {
     router.push('/my-page', 'root', 'replace');
   };
-  
+
   ...
 }
 
 ```
 
-
 ## 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).
diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index b4121ce03ea..bb9f77e8cc0 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -235,7 +235,7 @@ import { add } from ‘ionicons/icons’;
 
 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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. 
+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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package.
 
 ```tsx
 import { add } from 'ionicons/icons';
diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md
index fe10d28861b..12a79e474b5 100644
--- a/docs/reference/browser-support.md
+++ b/docs/reference/browser-support.md
@@ -39,9 +39,8 @@ Because Ionic is based on web technologies, it works just as well on desktop bro
 
 |   Browser   | Ionic v7 | Ionic v6 | Ionic v5 | Ionic v4 |
 | :---------: | :------: | :------: | :------: | :------: |
-| **Chrome**  | 79+      | 60+      | ✔        | ✔        |
-| **Safari**  | 14+      | 13+      | ✔        | ✔        |
-|  **Edge**   | 79+      | 79+      | 79+      | ✔        |
-| **Firefox** | 70+      | 63+      | ✔        | ✔        |
-|  **IE 11**  | **X**    | **X**    | **X**    | **X**    |
-
+| **Chrome**  |   79+    |   60+    |    ✔     |    ✔     |
+| **Safari**  |   14+    |   13+    |    ✔     |    ✔     |
+|  **Edge**   |   79+    |   79+    |   79+    |    ✔     |
+| **Firefox** |   70+    |   63+    |    ✔     |    ✔     |
+|  **IE 11**  |  **X**   |  **X**   |  **X**   |  **X**   |
diff --git a/docs/reference/support.md b/docs/reference/support.md
index c21749e5a4f..76c8b2306e1 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -20,15 +20,15 @@ Given the reality of time and resource constraints as well as the desire to keep
 
 The current status of each Ionic Framework version is:
 
-| Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
-| :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
-| V7      | **Active**            | Mar 29, 2023 | TBD              | TBD               |
-| V6      | Maintenance           | Dec 8, 2021  | Sep 29, 2023     | Mar 29, 2024      |
-| V5      | End of Support        | 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      |
+| Version |     Status     |   Released   | Maintenance Ends | Ext. Support Ends |
+| :-----: | :------------: | :----------: | :--------------: | :---------------: |
+|   V7    |   **Active**   | Mar 29, 2023 |       TBD        |        TBD        |
+|   V6    |  Maintenance   | Dec 8, 2021  |   Sep 29, 2023   |   Mar 29, 2024    |
+|   V5    | End of Support | 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).
@@ -43,11 +43,11 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-| v7        | v14                     | v15.x^                  | 4.6+       |   
-| 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      |
+|    v7     |           v14           |         v15.x^          |    4.6+    |
+|    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.
 
@@ -61,18 +61,18 @@ Note that later versions of Ionic do not support iOS 13; see [mobile support tab
 
 | Framework | Required React Version | TypeScript |
 | :-------: | :--------------------: | :--------: |
-| v7        | v17+                   | 3.7+       |
-| v6        | v17+                   | 3.7+       |
-| v5        | v16.8+                 | 3.7+       |
-| v4        | v16.8+                 | 3.7+       |
+|    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+       |
+|    v7     |       v3.0.6+        |    3.9+    |
+|    v6     |       v3.0.6+        |    3.9+    |
+|    v5     |        v3.0+         |    3.9+    |
 
 ### Native Bridges
 
diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.md
index b0106a79361..6d539b9cc55 100644
--- a/docs/theming/css-shadow-parts.md
+++ b/docs/theming/css-shadow-parts.md
@@ -124,9 +124,11 @@ CSS Shadow Parts are supported in the recent versions of all of the major browse
 ### Vendor Prefixed Pseudo-Elements
 
 <p>
-<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:
+  <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:
 </p>
 
 ```css
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md
index 073705c7540..321daf2f0e3 100644
--- a/docs/updating/6-0.md
+++ b/docs/updating/6-0.md
@@ -58,6 +58,7 @@ npm install @ionic/react@6 @ionic/react-router@6
 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';
 
@@ -69,6 +70,7 @@ setupConfig({
 ```
 
 **After**
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -88,11 +90,13 @@ See the [React Config Documentation](../developing/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';
 ```
@@ -152,6 +156,7 @@ See the [Testing section below](#testing) for more information.
 8. Rename any overlay event listeners to use the new format:
 
 **Before**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -165,6 +170,7 @@ See the [Testing section below](#testing) for more information.
 ```
 
 **After**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -184,11 +190,10 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
 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-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
 <script>
@@ -196,18 +201,17 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonTabs, IonTabBar }
+    components: { IonTabs, IonTabBar },
   });
 </script>
 ```
 
 **After**
+
 ```html
 <ion-tabs>
   <ion-router-outlet></ion-router-outlet>
-  <ion-tab-bar slot="bottom">
-    ...
-  </ion-tab-bar>
+  <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
 <script>
@@ -215,7 +219,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonTabs, IonTabBar, IonRouterOutlet }
+    components: { IonTabs, IonTabBar, IonRouterOutlet },
   });
 </script>
 ```
@@ -223,6 +227,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
 10. Additional routes inside of tabs should be re-written as sibling routes instead of child routes:
 
 **Before**
+
 ```ts
 const routes: Array<RouteRecordRaw> = [
   {
@@ -261,11 +266,12 @@ const routes: Array<RouteRecordRaw> = [
 ```
 
 **After**
+
 ```ts
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/tabs/tab1'
+    redirect: '/tabs/tab1',
   },
   {
     path: '/tabs/',
@@ -273,27 +279,27 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: '',
-        redirect: 'tab1'
+        redirect: 'tab1',
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue')
+        component: () => import('@/views/Tab1.vue'),
       },
       {
         path: 'tab1/view',
-        component: () => import('@/views/Tab1View.vue')
+        component: () => import('@/views/Tab1View.vue'),
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2.vue')
+        component: () => import('@/views/Tab2.vue'),
       },
       {
         path: 'tab3',
-        component: () => import('@/views/Tab3.vue')
-      }
-    ]
-  }
-]
+        component: () => import('@/views/Tab3.vue'),
+      },
+    ],
+  },
+];
 ```
 
 ### Core
@@ -335,24 +341,26 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco
 `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 {
-  ...
+  /* Any custom styles here */
 }
 
 ion-modal ion-backdrop {
-  ...
+  /* Any custom styles here */
 }
 ```
 
 **After**
+
 ```css
 ion-modal::part(content) {
-  ...
+  /* Any custom styles here */
 }
 
 ion-modal::part(backdrop) {
-  ...
+  /* Any custom styles here */
 }
 ```
 
@@ -360,34 +368,35 @@ ion-modal::part(backdrop) {
 
 `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 {
-  ...
+  /* Any custom styles here */
 }
 
 ion-popover ion-backdrop {
-  ...
+  /* Any custom styles here */
 }
 
 ion-popover .popover-content {
-  ...
+  /* Any custom styles here */
 }
 ```
 
 **After**
+
 ```css
 ion-popover::part(arrow) {
-  ...
+  /* Any custom styles here */
 }
 
 ion-popover::part(backdrop) {
-  ...
+  /* Any custom styles here */
 }
 
 ion-popover::part(content) {
-  ...
+  /* Any custom styles here */
 }
 ```
 
@@ -417,7 +426,6 @@ 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.
@@ -468,4 +476,3 @@ If you are still running into issues, here are a couple things to try:
 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/docs/vue/navigation.md b/docs/vue/navigation.md
index 4ad77014489..d264a062d0e 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -241,11 +241,11 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -267,11 +267,11 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/non-linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -460,7 +460,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr
 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
@@ -520,11 +520,11 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/tabs-account-demo.mp4')} 
+  src={useBaseUrl('video/tabs-account-demo.mp4')}
   controls
 ></video>
 
@@ -536,8 +536,8 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
 
 ## Components
diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md
index 7e85935bd9f..b17db3e2ea2 100644
--- a/docs/vue/pwa.md
+++ b/docs/vue/pwa.md
@@ -24,16 +24,13 @@ npm install -D vite-plugin-pwa
 Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
 
 ```javascript
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { VitePWA } from 'vite-plugin-pwa'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    VitePWA({ registerType: 'autoUpdate' })
-  ],
-})
+  plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })],
+});
 ```
 
 This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index bf6c36e621d..6738b35511f 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -100,7 +100,7 @@ If we open `App.vue` we should see the following:
 
 Let's break it down, starting with the imports.
 
-```tsx
+```html
 <script setup lang="ts">
   import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
@@ -289,7 +289,19 @@ For brevity, we are excluding repeating parts of our component, like the functio
 </template>
 
 <script setup lang="ts">
-  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonBadge,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
 </script>
 ```
 
@@ -326,7 +338,22 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
 </template>
 
 <script setup>
-  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonBadge,
+    IonCheckbox,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
   import { add } from 'ionicons/icons';
 </script>
 ```
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 8701a90c349..36fda773742 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -433,7 +433,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu
 | 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.                                          |
+| 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.                                                 |
diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md
index 006d719f400..c792cb40193 100644
--- a/docs/vue/your-first-app.md
+++ b/docs/vue/your-first-app.md
@@ -168,7 +168,7 @@ Next, remove the `ExploreContainer` node from the HTML markup in the `template`.
 <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 setup>`  tag to include the Camera icon as well as some of the Ionic components we'll use shortly:
+We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the `<script setup>` 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';
diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
index ea83eea3cc3..c95399f7024 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.md
@@ -38,7 +38,7 @@ export const usePhotoGallery = () => {
   return {
     takePhoto,
   };
-}
+};
 ```
 
 Our `usePhotoGallery` function exposes a method called takePhoto, which in turn calls the Capacitor Camera API's `getPhoto` method.
diff --git a/package-lock.json b/package-lock.json
index 80d09305544..7c9c3ebf642 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,11 +43,11 @@
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "0.0.0-4192",
-        "@ionic/prettier-config": "^2.0.0",
+        "@ionic/prettier-config": "^3.0.0",
         "@tsconfig/docusaurus": "^1.0.4",
         "@types/react": "^17.0.37",
         "html-loader": "^3.1.0",
-        "prettier": "^2.5.0",
+        "prettier": "^2.8.8",
         "typescript": "^4.5.2"
       }
     },
@@ -2645,11 +2645,12 @@
       }
     },
     "node_modules/@ionic/prettier-config": {
-      "version": "2.0.0",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-3.0.0.tgz",
+      "integrity": "sha512-dg5ovuMjfE5h3WW3kzfe9+7IflH9M9F7qlVYfpyONYlgs+4M2JZh628Csal4lWeyWGwugqMDk2zy7/fM7ygB8A==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
-        "prettier": "^2.0.0"
+        "prettier": "^2.4.0"
       }
     },
     "node_modules/@mdx-js/mdx": {
@@ -9514,14 +9515,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.5.0",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "prettier": "bin-prettier.js"
       },
       "engines": {
         "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/pretty-error": {
@@ -14529,7 +14534,9 @@
       }
     },
     "@ionic/prettier-config": {
-      "version": "2.0.0",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-3.0.0.tgz",
+      "integrity": "sha512-dg5ovuMjfE5h3WW3kzfe9+7IflH9M9F7qlVYfpyONYlgs+4M2JZh628Csal4lWeyWGwugqMDk2zy7/fM7ygB8A==",
       "dev": true
     },
     "@mdx-js/mdx": {
@@ -18659,7 +18666,9 @@
       "version": "5.0.1"
     },
     "prettier": {
-      "version": "2.5.0",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true
     },
     "pretty-error": {
diff --git a/package.json b/package.json
index 9dfee0ace00..513184bb3b0 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,10 @@
     "deploy": "docusaurus deploy",
     "docusaurus": "docusaurus",
     "generate-markdown": "node scripts/native && concurrently \"node scripts/cli\" \"node scripts/release-notes\"",
+    "lint": "npm run prettier -- --write --cache",
     "serve": "docusaurus serve",
     "prestart": "npm run generate-markdown",
+    "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md}\"",
     "start": "docusaurus start",
     "swizzle": "docusaurus swizzle --danger"
   },
@@ -65,11 +67,12 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "0.0.0-4192",
-    "@ionic/prettier-config": "^2.0.0",
+    "@ionic/prettier-config": "^3.0.0",
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/react": "^17.0.37",
     "html-loader": "^3.1.0",
-    "prettier": "^2.5.0",
+    "prettier": "^2.8.8",
     "typescript": "^4.5.2"
-  }
+  },
+  "prettier": "@ionic/prettier-config"
 }
diff --git a/scripts/api-ja.js b/scripts/api-ja.js
index fbf9001f67c..81291d19fa7 100644
--- a/scripts/api-ja.js
+++ b/scripts/api-ja.js
@@ -8,7 +8,9 @@ const DEMOS_PATH = path.resolve('static/demos');
 let COMPONENT_LINK_REGEXP;
 
 (async function () {
-  const response = await fetch('https://raw.githubusercontent.com/ionic-team/ionic-docs/translation/jp/scripts/data/translated-api.json');
+  const response = await fetch(
+    'https://raw.githubusercontent.com/ionic-team/ionic-docs/translation/jp/scripts/data/translated-api.json'
+  );
   const { components } = await response.json();
 
   const names = components.map((component) => component.tag.slice(4));
diff --git a/scripts/release-notes.js b/scripts/release-notes.js
index 22e5ca7335c..e7358189f83 100644
--- a/scripts/release-notes.js
+++ b/scripts/release-notes.js
@@ -23,14 +23,11 @@ const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/Release
 // https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on
 const getReleases = async () => {
   try {
-    const request = await fetch(
-      new URL('repos/ionic-team/ionic/releases', 'https://api.github.com'),
-      {
-        headers: {
-          Authorization: process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '',
-        },
-      }
-    );
+    const request = await fetch(new URL('repos/ionic-team/ionic/releases', 'https://api.github.com'), {
+      headers: {
+        Authorization: process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '',
+      },
+    });
 
     const releases = await request.json();
 
@@ -64,7 +61,7 @@ const getReleases = async () => {
           return -semver.compare(a.tag_name, b.tag_name);
         });
     } else {
-      console.error("There was an issue getting releases:", releases);
+      console.error('There was an issue getting releases:', releases);
       return [];
     }
   } catch (error) {
diff --git a/sidebars.js b/sidebars.js
index 2e7f6c563f1..c08a43ada8f 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -10,12 +10,7 @@ module.exports = {
       type: 'category',
       label: 'Upgrade Guides',
       collapsed: false,
-      items: [
-        'updating/7-0',
-        'updating/6-0',
-        'updating/5-0',
-        'updating/4-0'
-      ]
+      items: ['updating/7-0', 'updating/6-0', 'updating/5-0', 'updating/4-0'],
     },
     {
       type: 'category',
@@ -30,7 +25,7 @@ module.exports = {
         'developing/tips',
         'developing/hardware-back-button',
         'developing/keyboard',
-        'developing/config'
+        'developing/config',
       ],
     },
     {
@@ -45,7 +40,7 @@ module.exports = {
           href: '/docs/api/grid',
         },
         'layout/global-stylesheets',
-        'layout/css-utilities'
+        'layout/css-utilities',
       ],
     },
     {
@@ -229,7 +224,7 @@ module.exports = {
           href: 'https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md',
         },
         'reference/support',
-        'reference/browser-support'
+        'reference/browser-support',
       ],
     },
   ],
@@ -362,12 +357,7 @@ module.exports = {
       type: 'category',
       label: 'Media',
       collapsed: false,
-      items: [
-        'api/avatar',
-        'api/icon',
-        'api/img',
-        'api/thumbnail',
-      ],
+      items: ['api/avatar', 'api/icon', 'api/img', 'api/thumbnail'],
     },
     {
       type: 'category',
@@ -520,11 +510,7 @@ module.exports = {
       type: 'category',
       label: 'Getting Started',
       collapsed: false,
-      items: [
-        'native',
-        'native-setup',
-        'native-faq',
-      ],
+      items: ['native', 'native-setup', 'native-faq'],
     },
     {
       type: 'category',
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 6de23298974..541e510b51e 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -155,7 +155,7 @@ export default function Playground({
 
     // Otherwise, default to the first target passed.
     return Object.keys(code)[0];
-  }
+  };
 
   /**
    * Developers can set a predefined size
@@ -436,7 +436,6 @@ export default function Playground({
         <div className="playground__control-toolbar">
           <div className="playground__control-group">
             {sortedUsageTargets.map((lang) => {
-
               /**
                * If code was not passed for this target
                * then we should disable the button.
@@ -444,14 +443,14 @@ export default function Playground({
               const langValue = UsageTarget[lang];
               const hasCode = code[langValue] !== undefined;
               return (
-                  <CodeBlockButton
+                <CodeBlockButton
                   key={`code-block-${lang}`}
                   language={lang}
                   usageTarget={usageTarget}
                   setUsageTarget={setUsageTarget}
                   disabled={!hasCode}
-                />)
-              ;
+                />
+              );
             })}
           </div>
           <div className="playground__control-group">
@@ -577,12 +576,20 @@ export default function Playground({
                 */}
                 {devicePreview
                   ? [
-                      <div key="ios-iframe" className={!isIOS ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isIOS ? 'true' : null}>
+                      <div
+                        key="ios-iframe"
+                        className={!isIOS ? 'frame-hidden' : 'frame-visible'}
+                        aria-hidden={!isIOS ? 'true' : null}
+                      >
                         <device-preview mode="ios">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
                         </device-preview>
                       </div>,
-                      <div key="md-iframe" className={!isMD ? 'frame-hidden' : 'frame-visible'} aria-hidden={!isMD ? 'true' : null}>
+                      <div
+                        key="md-iframe"
+                        className={!isMD ? 'frame-hidden' : 'frame-visible'}
+                        aria-hidden={!isMD ? 'true' : null}
+                      >
                         <device-preview mode="md">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
                         </device-preview>
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 2b597c52a49..1fe697a350f 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -5,7 +5,6 @@ const DEFAULT_EDITOR_TITLE = 'Ionic Docs Example';
 // The default description to use for Stackblitz examples (when not overwritten)
 const DEFAULT_EDITOR_DESCRIPTION = '';
 
-
 export interface EditorOptions {
   /**
    * The title of the Stackblitz example.
@@ -18,7 +17,7 @@ export interface EditorOptions {
 
   files?: {
     [key: string]: string;
-  }
+  };
 
   /**
    * `true` if `ion-app` and `ion-content` should automatically be injected into the
@@ -36,29 +35,34 @@ export interface EditorOptions {
 
 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 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 defaultFiles = await loadSourceFiles([
-    'html/index.ts',
-    options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
-    'html/variables.css',
-    'html/package.json'
-  ], options.version);
+  const defaultFiles = await loadSourceFiles(
+    [
+      'html/index.ts',
+      options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
+      'html/variables.css',
+      'html/package.json',
+    ],
+    options.version
+  );
 
   const indexHtml = 'index.html';
   const files = {
     'index.ts': defaultFiles[0],
     [indexHtml]: defaultFiles[1],
     'theme/variables.css': defaultFiles[2],
-    ...options?.files
+    ...options?.files,
   };
 
   const package_json = defaultFiles[3];
 
-  files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace('</head>', `
+  files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace(
+    '</head>',
+    `
   <script>
     window.Ionic = {
       config: {
@@ -67,14 +71,15 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     }
   </script>
 </head>
-`);
+`
+  );
 
   let dependencies = {};
   try {
     dependencies = {
       ...dependencies,
-      ...JSON.parse(package_json).dependencies
-    }
+      ...JSON.parse(package_json).dependencies,
+    };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
   }
@@ -84,25 +89,28 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files,
-    dependencies
-  })
-}
+    dependencies,
+  });
+};
 
 const openAngularEditor = async (code: string, options?: EditorOptions) => {
-  const defaultFiles = await loadSourceFiles([
-    'angular/main.ts',
-    'angular/app.module.ts',
-    'angular/app.component.ts',
-    'angular/app.component.css',
-    options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html',
-    'angular/example.component.ts',
-    'angular/styles.css',
-    'angular/global.css',
-    'angular/variables.css',
-    'angular/angular.json',
-    'angular/tsconfig.json',
-    'angular/package.json'
-  ], options.version);
+  const defaultFiles = await loadSourceFiles(
+    [
+      'angular/main.ts',
+      'angular/app.module.ts',
+      'angular/app.component.ts',
+      'angular/app.component.css',
+      options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html',
+      'angular/example.component.ts',
+      'angular/styles.css',
+      'angular/global.css',
+      'angular/variables.css',
+      'angular/angular.json',
+      'angular/tsconfig.json',
+      'angular/package.json',
+    ],
+    options.version
+  );
 
   const appModule = 'src/app/app.module.ts';
   const files = {
@@ -121,19 +129,22 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     'src/theme/variables.css': defaultFiles[8],
     'angular.json': defaultFiles[9],
     'tsconfig.json': defaultFiles[10],
-    ...options?.files
+    ...options?.files,
   };
 
   const package_json = defaultFiles[11];
 
-  files[appModule] = files[appModule].replace('IonicModule.forRoot({})', `IonicModule.forRoot({ mode: '${options?.mode}' })`);
+  files[appModule] = files[appModule].replace(
+    'IonicModule.forRoot({})',
+    `IonicModule.forRoot({ mode: '${options?.mode}' })`
+  );
 
   let dependencies = {};
   try {
     dependencies = {
       ...dependencies,
-      ...JSON.parse(package_json).dependencies
-    }
+      ...JSON.parse(package_json).dependencies,
+    };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
   }
@@ -143,20 +154,23 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files,
-    dependencies
+    dependencies,
   });
-}
+};
 
 const openReactEditor = async (code: string, options?: EditorOptions) => {
-  const defaultFiles = await loadSourceFiles([
-    'react/index.tsx',
-    options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
-    'react/variables.css',
-    'react/tsconfig.json',
-    'react/package.json',
-    'react/package-lock.json',
-    'react/index.html',
-  ], options.version);
+  const defaultFiles = await loadSourceFiles(
+    [
+      'react/index.tsx',
+      options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
+      'react/variables.css',
+      'react/tsconfig.json',
+      'react/package.json',
+      'react/package-lock.json',
+      'react/index.html',
+    ],
+    options.version
+  );
 
   const appTsx = 'src/App.tsx';
   const files = {
@@ -171,7 +185,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     ...options?.files,
     '.stackblitzrc': `{
   "startCommand": "yarn run start"
-}`
+}`,
   };
 
   files[appTsx] = files[appTsx].replace('setupIonicReact()', `setupIonicReact({ mode: '${options?.mode}' })`);
@@ -180,23 +194,26 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files
+    files,
   });
-}
+};
 
 const openVueEditor = async (code: string, options?: EditorOptions) => {
-  const defaultFiles = await loadSourceFiles([
-    'vue/package.json',
-    'vue/package-lock.json',
-    'vue/index.html',
-    'vue/variables.css',
-    'vue/vite.config.ts',
-    'vue/main.ts',
-    options?.includeIonContent ? 'vue/App.withContent.vue' : 'vue/App.vue',
-    'vue/tsconfig.json',
-    'vue/tsconfig.node.json',
-    'vue/env.d.ts'
-  ], options.version);
+  const defaultFiles = await loadSourceFiles(
+    [
+      'vue/package.json',
+      'vue/package-lock.json',
+      'vue/index.html',
+      'vue/variables.css',
+      'vue/vite.config.ts',
+      'vue/main.ts',
+      options?.includeIonContent ? 'vue/App.withContent.vue' : 'vue/App.vue',
+      'vue/tsconfig.json',
+      'vue/tsconfig.node.json',
+      'vue/env.d.ts',
+    ],
+    options.version
+  );
 
   const mainTs = 'src/main.ts';
   const files = {
@@ -214,12 +231,15 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     ...options?.files,
     '.stackblitzrc': `{
   "startCommand": "yarn run dev"
-}`
+}`,
   };
 
-  files[mainTs] = files[mainTs].replace('.use(IonicVue)', `.use(IonicVue, {
+  files[mainTs] = files[mainTs].replace(
+    '.use(IonicVue)',
+    `.use(IonicVue, {
   mode: '${options?.mode}'
-})`);
+})`
+  );
 
   /**
    * We have to use Stackblitz web containers here (node template), due
@@ -231,8 +251,8 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
-    files
+    files,
   });
-}
+};
 
 export { openAngularEditor, openHtmlEditor, openReactEditor, openVueEditor };
diff --git a/src/components/global/PlaygroundTabs/index.tsx b/src/components/global/PlaygroundTabs/index.tsx
index da7b45b84e8..73d958c5681 100644
--- a/src/components/global/PlaygroundTabs/index.tsx
+++ b/src/components/global/PlaygroundTabs/index.tsx
@@ -113,13 +113,13 @@ function TabsComponent(props: Props): JSX.Element {
   /**
    * If the selected value is not in the available tabs, fall back to the first tab.
    * This can happen if the tab children are changed after the initial render.
-   * 
+   *
    * Note that actually updating selectedValue (for example, when defaultValue or the
    * children are changed) would defer the fallback selection to the next render cycle,
    * adding flicker.
    */
-  const useFallback = values.find(item => item.value === selectedValue) === undefined;
-  const isTabSelected = (value: string) => useFallback ? value === values[0].value : value === selectedValue;
+  const useFallback = values.find((item) => item.value === selectedValue) === undefined;
+  const isTabSelected = (value: string) => (useFallback ? value === values[0].value : value === selectedValue);
 
   return (
     <div className={clsx('tabs-container', styles.tabList)}>
@@ -185,7 +185,7 @@ function TabsComponent(props: Props): JSX.Element {
                 {icon && <span className={clsx('tabs__icon', styles.tabIcon)}>{icon}</span>}
                 {label ?? value}
               </li>
-            )
+            );
           })}
           {rightNavVisible && (
             <div className={clsx('tabs__nav-item', styles.tabNavItem)}>
diff --git a/src/components/page/native/NativeEnterpriseCard/index.tsx b/src/components/page/native/NativeEnterpriseCard/index.tsx
index 28bfe3371e9..d188069a790 100644
--- a/src/components/page/native/NativeEnterpriseCard/index.tsx
+++ b/src/components/page/native/NativeEnterpriseCard/index.tsx
@@ -6,7 +6,11 @@ import styles from './index.module.scss';
 
 export default function NativeEnterpriseCard(props) {
   return (
-    <a className={clsx(props.className, styles.nativeEnterprise)} href="https://ionic.io/enterprise-sdk" target="_blank">
+    <a
+      className={clsx(props.className, styles.nativeEnterprise)}
+      href="https://ionic.io/enterprise-sdk"
+      target="_blank"
+    >
       <div className="image-wrapper">
         <img src={useBaseUrl('/img/native/native-enterprise@2x.png')} width="476" height="228" />
       </div>
@@ -14,8 +18,8 @@ export default function NativeEnterpriseCard(props) {
       <div className="heading-group">
         <header>Ionic Enterprise SDK</header>
         <p>
-          Premium, supported plugins, third-party integrations, and pre-built native solutions for
-          building enterprise-grade apps.
+          Premium, supported plugins, third-party integrations, and pre-built native solutions for building
+          enterprise-grade apps.
         </p>
       </div>
     </a>
diff --git a/src/components/page/theming/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx
index 5e2ee0ab501..26575e37117 100755
--- a/src/components/page/theming/ColorAccordion/index.tsx
+++ b/src/components/page/theming/ColorAccordion/index.tsx
@@ -45,7 +45,7 @@ export default function ColorAccordion({ ...props }) {
             })}
             style={
               {
-                'backgroundColor': `var(--ion-color-${color})`,
+                backgroundColor: `var(--ion-color-${color})`,
                 color: `var(--ion-color-${color}-contrast)`,
               } as any
             }
@@ -85,7 +85,7 @@ export default function ColorAccordion({ ...props }) {
                 className={styles.colorSubmenuItem}
                 style={
                   {
-                    'backgroundColor': `var(--ion-color-${color}-shade)`,
+                    backgroundColor: `var(--ion-color-${color}-shade)`,
                     color: `var(--ion-color-${color}-contrast)`,
                   } as any
                 }
@@ -99,7 +99,7 @@ export default function ColorAccordion({ ...props }) {
                 className={styles.colorSubmenuItem}
                 style={
                   {
-                    'backgroundColor': `var(--ion-color-${color}-tint)`,
+                    backgroundColor: `var(--ion-color-${color}-tint)`,
                     color: `var(--ion-color-${color}-contrast)`,
                   } as any
                 }
diff --git a/static/demos/api/alert/index.html b/static/demos/api/alert/index.html
index a96775bd53e..0ef8a5daf15 100644
--- a/static/demos/api/alert/index.html
+++ b/static/demos/api/alert/index.html
@@ -16,7 +16,7 @@
     <script type="module">
       import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@5/dist/ionic/index.esm.js';
       window.alertController = alertController;
-    </script>5
+    </script>
   </head>
   <body>
     <ion-app>
diff --git a/static/demos/api/card/index.html b/static/demos/api/card/index.html
index e733820c113..43b11609254 100644
--- a/static/demos/api/card/index.html
+++ b/static/demos/api/card/index.html
@@ -19,8 +19,8 @@
       <ion-header translucent>
         <ion-toolbar>
           <ion-title>Card</ion-title>
-        </ion-toolbar> </ion-header
-      >
+        </ion-toolbar>
+      </ion-header>
       <ion-content fullscreen>
         <ion-card>
           <img src="./madison.jpg" />
diff --git a/static/demos/api/datetime/index.html b/static/demos/api/datetime/index.html
index faf3e78c693..09c74c31df2 100644
--- a/static/demos/api/datetime/index.html
+++ b/static/demos/api/datetime/index.html
@@ -47,7 +47,7 @@
         <ion-toolbar>
           <ion-title>DateTime</ion-title>
         </ion-toolbar>
-      </ion-header>,
+      </ion-header>
       <ion-content fullscreen>
         <ion-list>
           <ion-item>
diff --git a/static/demos/api/menu/index.html b/static/demos/api/menu/index.html
index 8b85ff3c4c1..029a55e7e2d 100644
--- a/static/demos/api/menu/index.html
+++ b/static/demos/api/menu/index.html
@@ -55,7 +55,7 @@
           </ion-list>
         </ion-content>
       </ion-menu>
-  
+
       <div class="ion-page" id="main-content">
         <ion-header>
           <ion-toolbar>
@@ -70,7 +70,7 @@
         </ion-content>
       </div>
     </ion-app>
-  
+
     <script>
       async function openMenu() {
         await menuController.open();
diff --git a/static/demos/color-generator/index.html b/static/demos/color-generator/index.html
index db3dae3ff0f..8d66c0ba91b 100755
--- a/static/demos/color-generator/index.html
+++ b/static/demos/color-generator/index.html
@@ -1,6 +1,6 @@
 <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"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
 
 <style>
   ion-app {
@@ -24,28 +24,24 @@
     <ion-tab tab="preview">
       <ion-header>
         <ion-toolbar color="primary">
-            <ion-buttons slot="secondary">
-              <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>Theme Preview</ion-title>
-          </ion-toolbar>
-          <ion-toolbar color="primary">
-            <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-buttons slot="secondary">
+            <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>Theme Preview</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="primary">
+          <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-content>
@@ -59,11 +55,13 @@
             <ion-toggle slot="end" checked disabled></ion-toggle>
           </ion-item>
 
-          <ion-item>Danger Toggle</ion-label>
+          <ion-item>
+            <ion-label>Danger Toggle</ion-label>
             <ion-toggle slot="end" color="danger" checked></ion-toggle>
           </ion-item>
 
-          <ion-item>Success Toggle</ion-label>
+          <ion-item>
+            <ion-label>Success Toggle</ion-label>
             <ion-toggle slot="end" color="success" checked></ion-toggle>
           </ion-item>
 
@@ -149,9 +147,8 @@
           <ion-icon name="share"></ion-icon>
         </ion-tab-button>
       </ion-tab-bar>
-
+    </ion-tab>
   </ion-tabs>
-
 </ion-app>
 
 <script>
diff --git a/static/usage/v6/accordion/accessibility/animations/demo.html b/static/usage/v6/accordion/accessibility/animations/demo.html
index 6ce674bb64b..e293288cb1c 100644
--- a/static/usage/v6/accordion/accessibility/animations/demo.html
+++ b/static/usage/v6/accordion/accessibility/animations/demo.html
@@ -1,49 +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" />
+  </head>
 
-<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
+  <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/v6/accordion/accessibility/animations/javascript.md b/static/usage/v6/accordion/accessibility/animations/javascript.md
index 1500ccf60c4..f89ebdea048 100644
--- a/static/usage/v6/accordion/accessibility/animations/javascript.md
+++ b/static/usage/v6/accordion/accessibility/animations/javascript.md
@@ -1,28 +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>
+<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/v6/accordion/basic/angular.md b/static/usage/v6/accordion/basic/angular.md
index 085d138de20..f9f7c8639a0 100644
--- a/static/usage/v6/accordion/basic/angular.md
+++ b/static/usage/v6/accordion/basic/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/basic/demo.html b/static/usage/v6/accordion/basic/demo.html
index ae833b5f61d..2c5d87b7409 100644
--- a/static/usage/v6/accordion/basic/demo.html
+++ b/static/usage/v6/accordion/basic/demo.html
@@ -1,49 +1,41 @@
 <!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>
 
-<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
+  <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/v6/accordion/basic/javascript.md b/static/usage/v6/accordion/basic/javascript.md
index 085d138de20..f9f7c8639a0 100644
--- a/static/usage/v6/accordion/basic/javascript.md
+++ b/static/usage/v6/accordion/basic/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/basic/react.md b/static/usage/v6/accordion/basic/react.md
index 7c140853638..122fc747919 100644
--- a/static/usage/v6/accordion/basic/react.md
+++ b/static/usage/v6/accordion/basic/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup>
diff --git a/static/usage/v6/accordion/basic/vue.md b/static/usage/v6/accordion/basic/vue.md
index f11e704e83a..8ac8c6bbeec 100644
--- a/static/usage/v6/accordion/basic/vue.md
+++ b/static/usage/v6/accordion/basic/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
index 21189b83ce7..93bc6b09b7f 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
@@ -10,15 +10,15 @@ ion-accordion.accordion-expanded {
   margin: 16px auto;
 }
 
-ion-accordion.accordion-collapsing ion-item[slot="header"],
-ion-accordion.accordion-collapsed ion-item[slot="header"] {
+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"] {
+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/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
index c0da98e5ee8..3b3c86763c1 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
@@ -4,25 +4,19 @@
     <ion-item slot="header">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
index 2e78783b984..a56c6df0455 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
@@ -1,82 +1,74 @@
 <!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;
+      }
 
-<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);
 
-    ion-accordion.accordion-expanding,
-    ion-accordion.accordion-expanded {
-      width: calc(100% - 32px);
+        margin: 16px auto;
+      }
 
-      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-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);
+      }
 
-    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;
+      }
 
-    .container {
-      width: 300px;
-      margin: 0 auto;
-    }
+      ion-accordion-group {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md
index 863d92d374f..5076fe510e5 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 
@@ -38,14 +32,14 @@
     margin: 16px auto;
   }
 
-  ion-accordion.accordion-collapsing ion-item[slot="header"],
-  ion-accordion.accordion-collapsed ion-item[slot="header"] {
+  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"] {
+  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);
   }
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md
index 21189b83ce7..93bc6b09b7f 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md
@@ -10,15 +10,15 @@ ion-accordion.accordion-expanded {
   margin: 16px auto;
 }
 
-ion-accordion.accordion-collapsing ion-item[slot="header"],
-ion-accordion.accordion-collapsed ion-item[slot="header"] {
+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"] {
+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/v6/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md
index 738797ba44f..5e8e8da6925 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
@@ -55,18 +44,18 @@
   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"] {
+
+  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"] {
+
+  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);
   }
diff --git a/static/usage/v6/accordion/customization/expansion-styles/angular.md b/static/usage/v6/accordion/customization/expansion-styles/angular.md
index 39a3f97b6be..1be81366c58 100644
--- a/static/usage/v6/accordion/customization/expansion-styles/angular.md
+++ b/static/usage/v6/accordion/customization/expansion-styles/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/customization/expansion-styles/demo.html b/static/usage/v6/accordion/customization/expansion-styles/demo.html
index f445c54ac11..d4e0c8a1bc1 100644
--- a/static/usage/v6/accordion/customization/expansion-styles/demo.html
+++ b/static/usage/v6/accordion/customization/expansion-styles/demo.html
@@ -1,49 +1,41 @@
 <!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>
 
-<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
+  <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/v6/accordion/customization/expansion-styles/javascript.md b/static/usage/v6/accordion/customization/expansion-styles/javascript.md
index 39a3f97b6be..1be81366c58 100644
--- a/static/usage/v6/accordion/customization/expansion-styles/javascript.md
+++ b/static/usage/v6/accordion/customization/expansion-styles/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/customization/expansion-styles/react.md b/static/usage/v6/accordion/customization/expansion-styles/react.md
index 1067c80acb7..d24cf600956 100644
--- a/static/usage/v6/accordion/customization/expansion-styles/react.md
+++ b/static/usage/v6/accordion/customization/expansion-styles/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup expand="inset">
diff --git a/static/usage/v6/accordion/customization/expansion-styles/vue.md b/static/usage/v6/accordion/customization/expansion-styles/vue.md
index a6bcdcbde5e..05f22d0d2ff 100644
--- a/static/usage/v6/accordion/customization/expansion-styles/vue.md
+++ b/static/usage/v6/accordion/customization/expansion-styles/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/v6/accordion/customization/icons/demo.html b/static/usage/v6/accordion/customization/icons/demo.html
index b4f7385876a..ba238098881 100644
--- a/static/usage/v6/accordion/customization/icons/demo.html
+++ b/static/usage/v6/accordion/customization/icons/demo.html
@@ -1,49 +1,41 @@
 <!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>
 
-<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
+  <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/v6/accordion/customization/icons/javascript.md b/static/usage/v6/accordion/customization/icons/javascript.md
index 7d937e511de..7fd8a091cc8 100644
--- a/static/usage/v6/accordion/customization/icons/javascript.md
+++ b/static/usage/v6/accordion/customization/icons/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/customization/icons/react.md b/static/usage/v6/accordion/customization/icons/react.md
index cca6fbf0af1..2b269c172ed 100644
--- a/static/usage/v6/accordion/customization/icons/react.md
+++ b/static/usage/v6/accordion/customization/icons/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 import { caretDownCircle } from 'ionicons/icons';
 
 function Example() {
diff --git a/static/usage/v6/accordion/customization/icons/vue.md b/static/usage/v6/accordion/customization/icons/vue.md
index 760bab7520b..453e9963a89 100644
--- a/static/usage/v6/accordion/customization/icons/vue.md
+++ b/static/usage/v6/accordion/customization/icons/vue.md
@@ -5,49 +5,38 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
     setup() {
-      return { caretDownCircle }
-    }
+      return { caretDownCircle };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/accordion/customization/theming/angular/example_component_html.md b/static/usage/v6/accordion/customization/theming/angular/example_component_html.md
index 9af8534259c..5efdf7b71f9 100644
--- a/static/usage/v6/accordion/customization/theming/angular/example_component_html.md
+++ b/static/usage/v6/accordion/customization/theming/angular/example_component_html.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="rose">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/customization/theming/angular/global_css.md b/static/usage/v6/accordion/customization/theming/angular/global_css.md
index 6054219017a..141236c6633 100644
--- a/static/usage/v6/accordion/customization/theming/angular/global_css.md
+++ b/static/usage/v6/accordion/customization/theming/angular/global_css.md
@@ -1,9 +1,9 @@
 ```css
 :root {
   --ion-color-rose: #fecdd3;
-  --ion-color-rose-rgb: 254,205,211;
+  --ion-color-rose-rgb: 254, 205, 211;
   --ion-color-rose-contrast: #000000;
-  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-contrast-rgb: 0, 0, 0;
   --ion-color-rose-shade: #e0b4ba;
   --ion-color-rose-tint: #fed2d7;
 }
@@ -17,7 +17,7 @@
   --ion-color-tint: var(--ion-color-rose-tint);
 }
 
-div[slot="content"] {
-  background: rgba(var(--ion-color-rose-rgb), 0.25)
+div[slot='content'] {
+  background: rgba(var(--ion-color-rose-rgb), 0.25);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/accordion/customization/theming/demo.html b/static/usage/v6/accordion/customization/theming/demo.html
index 9b771545a49..8522ccae537 100644
--- a/static/usage/v6/accordion/customization/theming/demo.html
+++ b/static/usage/v6/accordion/customization/theming/demo.html
@@ -1,72 +1,64 @@
 <!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;
+      }
 
-<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);
+      }
 
-    .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>
 
-    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
+  <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/v6/accordion/customization/theming/javascript.md b/static/usage/v6/accordion/customization/theming/javascript.md
index d35f6dbb6b9..179bf5d51c0 100644
--- a/static/usage/v6/accordion/customization/theming/javascript.md
+++ b/static/usage/v6/accordion/customization/theming/javascript.md
@@ -4,38 +4,32 @@
     <ion-item slot="header" color="rose">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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-rgb: 254, 205, 211;
     --ion-color-rose-contrast: #000000;
-    --ion-color-rose-contrast-rgb: 0,0,0;
+    --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);
@@ -44,9 +38,9 @@
     --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)
+
+  div[slot='content'] {
+    background: rgba(var(--ion-color-rose-rgb), 0.25);
   }
 </style>
 ```
diff --git a/static/usage/v6/accordion/customization/theming/react/main_css.md b/static/usage/v6/accordion/customization/theming/react/main_css.md
index 6054219017a..141236c6633 100644
--- a/static/usage/v6/accordion/customization/theming/react/main_css.md
+++ b/static/usage/v6/accordion/customization/theming/react/main_css.md
@@ -1,9 +1,9 @@
 ```css
 :root {
   --ion-color-rose: #fecdd3;
-  --ion-color-rose-rgb: 254,205,211;
+  --ion-color-rose-rgb: 254, 205, 211;
   --ion-color-rose-contrast: #000000;
-  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-contrast-rgb: 0, 0, 0;
   --ion-color-rose-shade: #e0b4ba;
   --ion-color-rose-tint: #fed2d7;
 }
@@ -17,7 +17,7 @@
   --ion-color-tint: var(--ion-color-rose-tint);
 }
 
-div[slot="content"] {
-  background: rgba(var(--ion-color-rose-rgb), 0.25)
+div[slot='content'] {
+  background: rgba(var(--ion-color-rose-rgb), 0.25);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/accordion/customization/theming/react/main_tsx.md b/static/usage/v6/accordion/customization/theming/react/main_tsx.md
index 348576ae0fe..ecc51a9e15b 100644
--- a/static/usage/v6/accordion/customization/theming/react/main_tsx.md
+++ b/static/usage/v6/accordion/customization/theming/react/main_tsx.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 
 import './main.css';
 
diff --git a/static/usage/v6/accordion/customization/theming/vue.md b/static/usage/v6/accordion/customization/theming/vue.md
index cf55542e739..c049c4b89d8 100644
--- a/static/usage/v6/accordion/customization/theming/vue.md
+++ b/static/usage/v6/accordion/customization/theming/vue.md
@@ -5,62 +5,51 @@
       <ion-item slot="header" color="rose">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
     setup() {
-      return { caretDownCircle }
-    }
+      return { caretDownCircle };
+    },
   });
 </script>
 
 <style>
   :root {
     --ion-color-rose: #fecdd3;
-    --ion-color-rose-rgb: 254,205,211;
+    --ion-color-rose-rgb: 254, 205, 211;
     --ion-color-rose-contrast: #000000;
-    --ion-color-rose-contrast-rgb: 0,0,0;
+    --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);
@@ -69,9 +58,9 @@
     --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)
+
+  div[slot='content'] {
+    background: rgba(var(--ion-color-rose-rgb), 0.25);
   }
 </style>
 ```
diff --git a/static/usage/v6/accordion/disable-group/demo.html b/static/usage/v6/accordion/disable-group/demo.html
index bbe38628365..379104761ba 100644
--- a/static/usage/v6/accordion/disable-group/demo.html
+++ b/static/usage/v6/accordion/disable-group/demo.html
@@ -1,49 +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" />
+  </head>
 
-<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
+  <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/v6/accordion/disable/group/demo.html b/static/usage/v6/accordion/disable/group/demo.html
index 357470c9cb2..1bb933671fd 100644
--- a/static/usage/v6/accordion/disable/group/demo.html
+++ b/static/usage/v6/accordion/disable/group/demo.html
@@ -1,49 +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" />
+  </head>
 
-<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
+  <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/v6/accordion/disable/individual/demo.html b/static/usage/v6/accordion/disable/individual/demo.html
index 33d7caf6f65..3a37f10ecb2 100644
--- a/static/usage/v6/accordion/disable/individual/demo.html
+++ b/static/usage/v6/accordion/disable/individual/demo.html
@@ -1,49 +1,41 @@
 <!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>
 
-<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
+  <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/v6/accordion/listen-changes/demo.html b/static/usage/v6/accordion/listen-changes/demo.html
index 986aba59eb6..43a8d41f610 100644
--- a/static/usage/v6/accordion/listen-changes/demo.html
+++ b/static/usage/v6/accordion/listen-changes/demo.html
@@ -1,73 +1,64 @@
 <!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>
 
-<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>
 
-<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>
 
-        <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'];
 
-  <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;
 
-    accordionGroup.addEventListener('ionChange', (ev) => {
-      const collapsedItems = values.filter(value => value !== ev.detail.value);
-      const selectedValue = ev.detail.value;
-
-      listenerOut.innerText = `
+        listenerOut.innerText = `
           Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
           Collapsed: ${collapsedItems.join(', ')}
-        `
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+        `;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/accordion/multiple/demo.html b/static/usage/v6/accordion/multiple/demo.html
index d7dbbfae658..b2eaf11c019 100644
--- a/static/usage/v6/accordion/multiple/demo.html
+++ b/static/usage/v6/accordion/multiple/demo.html
@@ -1,54 +1,46 @@
 <!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>
 
-<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>
 
-<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
+    <script>
+      const accordionGroup = document.querySelector('ion-accordion-group');
+      accordionGroup.value = ['first', 'third'];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/accordion/readonly/group/angular.md b/static/usage/v6/accordion/readonly/group/angular.md
index 99c084f8064..4ebf8c55e4e 100644
--- a/static/usage/v6/accordion/readonly/group/angular.md
+++ b/static/usage/v6/accordion/readonly/group/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/readonly/group/demo.html b/static/usage/v6/accordion/readonly/group/demo.html
index 7b67c1ce83c..612431a7c69 100644
--- a/static/usage/v6/accordion/readonly/group/demo.html
+++ b/static/usage/v6/accordion/readonly/group/demo.html
@@ -1,49 +1,41 @@
 <!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>
 
-<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
+  <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/v6/accordion/readonly/group/javascript.md b/static/usage/v6/accordion/readonly/group/javascript.md
index 27f216fb4f9..d511ea5ff0b 100644
--- a/static/usage/v6/accordion/readonly/group/javascript.md
+++ b/static/usage/v6/accordion/readonly/group/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/readonly/group/react.md b/static/usage/v6/accordion/readonly/group/react.md
index 5383b732d96..2f26afde9ea 100644
--- a/static/usage/v6/accordion/readonly/group/react.md
+++ b/static/usage/v6/accordion/readonly/group/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup readonly={true}>
diff --git a/static/usage/v6/accordion/readonly/group/vue.md b/static/usage/v6/accordion/readonly/group/vue.md
index aa6a662a802..0de1be3fe91 100644
--- a/static/usage/v6/accordion/readonly/group/vue.md
+++ b/static/usage/v6/accordion/readonly/group/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/v6/accordion/readonly/individual/angular.md b/static/usage/v6/accordion/readonly/individual/angular.md
index 7f9f8f5bb2e..94013b9d07d 100644
--- a/static/usage/v6/accordion/readonly/individual/angular.md
+++ b/static/usage/v6/accordion/readonly/individual/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/readonly/individual/demo.html b/static/usage/v6/accordion/readonly/individual/demo.html
index 65b7efbc355..0a892fb87c6 100644
--- a/static/usage/v6/accordion/readonly/individual/demo.html
+++ b/static/usage/v6/accordion/readonly/individual/demo.html
@@ -1,49 +1,41 @@
 <!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>
 
-<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
+  <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/v6/accordion/readonly/individual/javascript.md b/static/usage/v6/accordion/readonly/individual/javascript.md
index eec083da61a..e1f78d726db 100644
--- a/static/usage/v6/accordion/readonly/individual/javascript.md
+++ b/static/usage/v6/accordion/readonly/individual/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 ```
diff --git a/static/usage/v6/accordion/readonly/individual/react.md b/static/usage/v6/accordion/readonly/individual/react.md
index 7e94d274b32..a6d28a427cd 100644
--- a/static/usage/v6/accordion/readonly/individual/react.md
+++ b/static/usage/v6/accordion/readonly/individual/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup>
diff --git a/static/usage/v6/accordion/readonly/individual/vue.md b/static/usage/v6/accordion/readonly/individual/vue.md
index 2e02ebd3679..b9a5daac451 100644
--- a/static/usage/v6/accordion/readonly/individual/vue.md
+++ b/static/usage/v6/accordion/readonly/individual/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/v6/accordion/toggle/demo.html b/static/usage/v6/accordion/toggle/demo.html
index d230e1e35e0..ea0be18bdd5 100644
--- a/static/usage/v6/accordion/toggle/demo.html
+++ b/static/usage/v6/accordion/toggle/demo.html
@@ -1,69 +1,61 @@
 <!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>
 
-<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 />
+  <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>
 
-        <ion-button size="block" onclick="toggleSecondAccordion()">Toggle Second Accordion</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
+          <br />
 
-  <script>
-    const accordionGroup = document.querySelector('ion-accordion-group');
-    const toggleSecondAccordion = () => {
-      if (accordionGroup.value === 'second') {
-        accordionGroup.value = undefined;
-      } else {
-        accordionGroup.value = 'second'
-      }
-    }
-  </script>
-</body>
+          <ion-button size="block" onclick="toggleSecondAccordion()">Toggle Second Accordion</ion-button>
+        </div>
+      </ion-content>
+    </ion-app>
 
-</html>
\ No newline at end of file
+    <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/v6/action-sheet/basic/demo.html b/static/usage/v6/action-sheet/basic/demo.html
index b41118e24ab..c3205dc1cd2 100644
--- a/static/usage/v6/action-sheet/basic/demo.html
+++ b/static/usage/v6/action-sheet/basic/demo.html
@@ -1,70 +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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-    }
+      code {
+        white-space: pre-wrap;
+      }
+    </style>
+  </head>
 
-    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');
 
-<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',
+            },
+          },
+        ];
 
-    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();
 
-      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
+        const result = await actionSheet.onDidDismiss();
+        action.innerText = JSON.stringify(result, null, 2);
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/action-sheet/theming/css-properties/demo.html b/static/usage/v6/action-sheet/theming/css-properties/demo.html
index 86df5261230..ea98ecc0190 100644
--- a/static/usage/v6/action-sheet/theming/css-properties/demo.html
+++ b/static/usage/v6/action-sheet/theming/css-properties/demo.html
@@ -1,67 +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" />
 
-<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>
 
-  <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',
+            },
+          },
+        ];
 
-<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
+        document.body.appendChild(actionSheet);
+        await actionSheet.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/action-sheet/theming/styling/demo.html b/static/usage/v6/action-sheet/theming/styling/demo.html
index df397d1220f..b828af2269a 100644
--- a/static/usage/v6/action-sheet/theming/styling/demo.html
+++ b/static/usage/v6/action-sheet/theming/styling/demo.html
@@ -1,84 +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" />
 
-<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;
-    }
+    <style>
+      ion-action-sheet.my-custom-class .action-sheet-group {
+        background: #f58840;
+      }
 
-    ion-action-sheet.my-custom-class .action-sheet-cancel::after {
-      background: #e97223;
-    }
+      ion-action-sheet.my-custom-class .action-sheet-title {
+        color: #fff;
+      }
 
-    ion-action-sheet.my-custom-class .action-sheet-button,
-    ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
-      color: #000000;
-    }
+      ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+        background: #e97223;
+      }
 
-    @media (any-hover: hover) {
-      ion-action-sheet.my-custom-class .action-sheet-button:hover {
+      ion-action-sheet.my-custom-class .action-sheet-button,
+      ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
         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'
+      @media (any-hover: hover) {
+        ion-action-sheet.my-custom-class .action-sheet-button:hover {
+          color: #000000;
         }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
-      }];
+      }
 
-      document.body.appendChild(actionSheet);
-      await actionSheet.present();
-    }
-  </script>
-</body>
+      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',
+            },
+          },
+        ];
 
-</html>
\ No newline at end of file
+        document.body.appendChild(actionSheet);
+        await actionSheet.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/alert/buttons/angular/example_component_html.md b/static/usage/v6/alert/buttons/angular/example_component_html.md
index 5cddcd596ed..172b041a469 100644
--- a/static/usage/v6/alert/buttons/angular/example_component_html.md
+++ b/static/usage/v6/alert/buttons/angular/example_component_html.md
@@ -2,4 +2,4 @@
 <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/v6/alert/buttons/demo.html b/static/usage/v6/alert/buttons/demo.html
index bd5f4eb4367..40505615a1f 100644
--- a/static/usage/v6/alert/buttons/demo.html
+++ b/static/usage/v6/alert/buttons/demo.html
@@ -1,64 +1,66 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-    }
+      .container p {
+        margin-bottom: 0;
+      }
+    </style>
+  </head>
 
-    .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>
 
-<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');
 
-  <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';
+            },
+          },
+        ];
 
-    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();
 
-      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
+        const { role } = await alert.onDidDismiss();
+        roleOutput.innerText = `Dismissed with role: ${role}`;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/alert/buttons/javascript.md b/static/usage/v6/alert/buttons/javascript.md
index 9550a72ca43..1de6de7fca4 100644
--- a/static/usage/v6/alert/buttons/javascript.md
+++ b/static/usage/v6/alert/buttons/javascript.md
@@ -14,13 +14,17 @@
       {
         text: 'Cancel',
         role: 'cancel',
-        handler: () => { handlerOutput.innerText = 'Alert canceled'; }
+        handler: () => {
+          handlerOutput.innerText = 'Alert canceled';
+        },
       },
       {
         text: 'OK',
         role: 'confirm',
-        handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
-      }
+        handler: () => {
+          handlerOutput.innerText = 'Alert confirmed';
+        },
+      },
     ];
 
     document.body.appendChild(alert);
diff --git a/static/usage/v6/alert/customization/angular/global_css.md b/static/usage/v6/alert/customization/angular/global_css.md
index c4d1f859c34..c84c1456e58 100644
--- a/static/usage/v6/alert/customization/angular/global_css.md
+++ b/static/usage/v6/alert/customization/angular/global_css.md
@@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm {
 }
 
 .ios .custom-alert button.alert-button {
-  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
 }
 
 .ios button.alert-button.alert-button-cancel {
@@ -30,4 +30,4 @@ 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/v6/alert/customization/demo.html b/static/usage/v6/alert/customization/demo.html
index a17881c7825..f20aad58be3 100644
--- a/static/usage/v6/alert/customization/demo.html
+++ b/static/usage/v6/alert/customization/demo.html
@@ -1,79 +1,77 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    ion-alert.custom-alert {
-      --backdrop-opacity: 0.7;
-    }
+      .custom-alert .alert-button-group {
+        padding: 8px;
+      }
 
-    .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);
+      }
 
-    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;
+      }
 
-    .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 .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-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>
 
-    .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>
 
-<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',
+          },
+        ];
 
-  <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
+        document.body.appendChild(alert);
+        await alert.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/alert/customization/javascript.md b/static/usage/v6/alert/customization/javascript.md
index f6280b08e3d..f14e68e1d95 100644
--- a/static/usage/v6/alert/customization/javascript.md
+++ b/static/usage/v6/alert/customization/javascript.md
@@ -9,12 +9,12 @@
     alert.buttons = [
       {
         text: 'No',
-        cssClass: 'alert-button-cancel'
+        cssClass: 'alert-button-cancel',
       },
       {
         text: 'Yes',
-        cssClass: 'alert-button-confirm'
-      }
+        cssClass: 'alert-button-confirm',
+      },
     ];
 
     document.body.appendChild(alert);
@@ -41,7 +41,7 @@
   }
 
   .ios .custom-alert button.alert-button {
-    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   }
 
   .ios button.alert-button.alert-button-cancel {
diff --git a/static/usage/v6/alert/customization/react/main_css.md b/static/usage/v6/alert/customization/react/main_css.md
index c4d1f859c34..c84c1456e58 100644
--- a/static/usage/v6/alert/customization/react/main_css.md
+++ b/static/usage/v6/alert/customization/react/main_css.md
@@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm {
 }
 
 .ios .custom-alert button.alert-button {
-  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
 }
 
 .ios button.alert-button.alert-button-cancel {
@@ -30,4 +30,4 @@ 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/v6/alert/inputs/radios/angular/example_component_html.md b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md
index e484d6c912d..183dd98719d 100644
--- a/static/usage/v6/alert/inputs/radios/angular/example_component_html.md
+++ b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md
@@ -1,3 +1,3 @@
 ```html
 <ion-button (click)="presentAlert()">Click Me</ion-button>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/alert/inputs/radios/demo.html b/static/usage/v6/alert/inputs/radios/demo.html
index 5f5ebb0e8b9..0784bf5bd2c 100644
--- a/static/usage/v6/alert/inputs/radios/demo.html
+++ b/static/usage/v6/alert/inputs/radios/demo.html
@@ -1,52 +1,50 @@
 <!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>
 
-<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>
 
-<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',
+          },
+        ];
 
-  <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
+        document.body.appendChild(alert);
+        await alert.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/alert/inputs/radios/javascript.md b/static/usage/v6/alert/inputs/radios/javascript.md
index 341bdf8b1eb..2992e1d25c4 100644
--- a/static/usage/v6/alert/inputs/radios/javascript.md
+++ b/static/usage/v6/alert/inputs/radios/javascript.md
@@ -10,18 +10,18 @@
       {
         label: 'Red',
         type: 'radio',
-        value: 'red'
+        value: 'red',
       },
       {
         label: 'Blue',
         type: 'radio',
-        value: 'blue'
+        value: 'blue',
       },
       {
         label: 'Green',
         type: 'radio',
-        value: 'green'
-      }
+        value: 'green',
+      },
     ];
 
     document.body.appendChild(alert);
diff --git a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md
index e484d6c912d..183dd98719d 100644
--- a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md
+++ b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md
@@ -1,3 +1,3 @@
 ```html
 <ion-button (click)="presentAlert()">Click Me</ion-button>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/alert/inputs/text-inputs/demo.html b/static/usage/v6/alert/inputs/text-inputs/demo.html
index d2badb8c851..f0165590628 100644
--- a/static/usage/v6/alert/inputs/text-inputs/demo.html
+++ b/static/usage/v6/alert/inputs/text-inputs/demo.html
@@ -1,56 +1,54 @@
 <!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>
 
-<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>
 
-<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',
+          },
+        ];
 
-  <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
+        document.body.appendChild(alert);
+        await alert.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/alert/inputs/text-inputs/javascript.md b/static/usage/v6/alert/inputs/text-inputs/javascript.md
index 84f96bf5f8d..21d36197c4a 100644
--- a/static/usage/v6/alert/inputs/text-inputs/javascript.md
+++ b/static/usage/v6/alert/inputs/text-inputs/javascript.md
@@ -8,24 +8,24 @@
     alert.buttons = ['OK'];
     alert.inputs = [
       {
-        placeholder: 'Name'
+        placeholder: 'Name',
       },
       {
         placeholder: 'Nickname (max 8 characters)',
         attributes: {
-          maxlength: 8
-        }
+          maxlength: 8,
+        },
       },
       {
         type: 'number',
         placeholder: 'Age',
         min: 1,
-        max: 100
+        max: 100,
       },
       {
         type: 'textarea',
-        placeholder: 'A little about yourself'
-      }
+        placeholder: 'A little about yourself',
+      },
     ];
 
     document.body.appendChild(alert);
diff --git a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md
index e484d6c912d..183dd98719d 100644
--- a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md
+++ b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md
@@ -1,3 +1,3 @@
 ```html
 <ion-button (click)="presentAlert()">Click Me</ion-button>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/alert/presenting/controller/demo.html b/static/usage/v6/alert/presenting/controller/demo.html
index fed8c84f369..8925c588135 100644
--- a/static/usage/v6/alert/presenting/controller/demo.html
+++ b/static/usage/v6/alert/presenting/controller/demo.html
@@ -1,37 +1,35 @@
 <!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>
 
-<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>
 
-<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'];
 
-  <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
+        document.body.appendChild(alert);
+        await alert.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/avatar/basic/demo.html b/static/usage/v6/avatar/basic/demo.html
index 46fbedfd2d3..5d92af4860e 100644
--- a/static/usage/v6/avatar/basic/demo.html
+++ b/static/usage/v6/avatar/basic/demo.html
@@ -1,27 +1,24 @@
 <!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>
 
-<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
+  <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/v6/avatar/chip/demo.html b/static/usage/v6/avatar/chip/demo.html
index d06475bb40f..dbe0858522d 100644
--- a/static/usage/v6/avatar/chip/demo.html
+++ b/static/usage/v6/avatar/chip/demo.html
@@ -1,30 +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>
 
-<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
+  <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/v6/avatar/chip/vue.md b/static/usage/v6/avatar/chip/vue.md
index 8ded7586040..c872bb48de3 100644
--- a/static/usage/v6/avatar/chip/vue.md
+++ b/static/usage/v6/avatar/chip/vue.md
@@ -13,7 +13,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonAvatar, IonChip, IonLabel }
+    components: { IonAvatar, IonChip, IonLabel },
   });
 </script>
 ```
diff --git a/static/usage/v6/avatar/item/demo.html b/static/usage/v6/avatar/item/demo.html
index d51279cdb34..97c53124109 100644
--- a/static/usage/v6/avatar/item/demo.html
+++ b/static/usage/v6/avatar/item/demo.html
@@ -1,30 +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>
 
-<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
+  <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/v6/avatar/item/vue.md b/static/usage/v6/avatar/item/vue.md
index 315af034426..5a9ddea4499 100644
--- a/static/usage/v6/avatar/item/vue.md
+++ b/static/usage/v6/avatar/item/vue.md
@@ -13,7 +13,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonAvatar, IonItem, IonLabel }
+    components: { IonAvatar, IonItem, IonLabel },
   });
 </script>
 ```
diff --git a/static/usage/v6/avatar/theming/css-properties/demo.html b/static/usage/v6/avatar/theming/css-properties/demo.html
index 3419617edfa..7ba32840e17 100644
--- a/static/usage/v6/avatar/theming/css-properties/demo.html
+++ b/static/usage/v6/avatar/theming/css-properties/demo.html
@@ -1,32 +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>
-  <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>
 
-  <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
+  <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/v6/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md
index f04d7f8fbe3..180b8998a3f 100644
--- a/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonAvatar } from '@ionic/react';
diff --git a/static/usage/v6/avatar/theming/css-properties/vue.md b/static/usage/v6/avatar/theming/css-properties/vue.md
index affb7ccdecb..32237336a1c 100644
--- a/static/usage/v6/avatar/theming/css-properties/vue.md
+++ b/static/usage/v6/avatar/theming/css-properties/vue.md
@@ -10,7 +10,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonAvatar }
+    components: { IonAvatar },
   });
 </script>
 
diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
index 3c39508e72c..b2cda11d2a8 100644
--- a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
+++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
@@ -18,7 +18,5 @@ import { Component } from '@angular/core';
     </ion-content>
   `,
 })
-export class PageTwoComponent {
-
-}
+export class PageTwoComponent {}
 ```
diff --git a/static/usage/v6/back-button/basic/demo.html b/static/usage/v6/back-button/basic/demo.html
index 0ae16403ab7..14bd424cda6 100644
--- a/static/usage/v6/back-button/basic/demo.html
+++ b/static/usage/v6/back-button/basic/demo.html
@@ -1,26 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Back 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>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Back 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" />
+  <body>
+    <ion-app>
+      <ion-nav root="page-one"></ion-nav>
+    </ion-app>
 
-</head>
-
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+    <script>
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Back Button</ion-title>
@@ -34,12 +32,12 @@ <h1>Page One</h1>
           </ion-nav-link>
         </ion-content>
       `;
+        }
       }
-    }
 
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -53,12 +51,11 @@ <h1>Page Two</h1>
           <p>Use the back button to navigate to the previous page.</p>
         </ion-content>
       `;
+        }
       }
-    }
-
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-  </script>
-</body>
 
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v6/back-button/basic/vue/page_two_vue.md b/static/usage/v6/back-button/basic/vue/page_two_vue.md
index 1192ca2936c..e26a6f13562 100644
--- a/static/usage/v6/back-button/basic/vue/page_two_vue.md
+++ b/static/usage/v6/back-button/basic/vue/page_two_vue.md
@@ -18,7 +18,7 @@
   import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
 
   export default {
-    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }
+    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar },
   };
 </script>
 ```
diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
index 31f76ac219a..05a1bd64d79 100644
--- a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
+++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
@@ -18,7 +18,5 @@ import { Component } from '@angular/core';
     </ion-content>
   `,
 })
-export class PageTwoComponent {
-
-}
+export class PageTwoComponent {}
 ```
diff --git a/static/usage/v6/back-button/custom/demo.html b/static/usage/v6/back-button/custom/demo.html
index 6ffc58dc997..0864a9b61cf 100644
--- a/static/usage/v6/back-button/custom/demo.html
+++ b/static/usage/v6/back-button/custom/demo.html
@@ -1,26 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Back 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>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Back 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" />
+  <body>
+    <ion-app>
+      <ion-nav root="page-one"></ion-nav>
+    </ion-app>
 
-</head>
-
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+    <script>
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Back Button</ion-title>
@@ -34,12 +32,12 @@ <h1>Page One</h1>
           </ion-nav-link>
         </ion-content>
       `;
+        }
       }
-    }
 
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -53,12 +51,11 @@ <h1>Page Two</h1>
           <p>Use the back button to navigate to the previous page.</p>
         </ion-content>
       `;
+        }
       }
-    }
-
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-  </script>
-</body>
 
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v6/back-button/custom/vue/page_two_vue.md b/static/usage/v6/back-button/custom/vue/page_two_vue.md
index 05de62654cb..4667abeced5 100644
--- a/static/usage/v6/back-button/custom/vue/page_two_vue.md
+++ b/static/usage/v6/back-button/custom/vue/page_two_vue.md
@@ -21,8 +21,8 @@
   export default {
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
     setup() {
-      return { caretBack }
-    }
+      return { caretBack };
+    },
   };
 </script>
 ```
diff --git a/static/usage/v6/backdrop/basic/demo.html b/static/usage/v6/backdrop/basic/demo.html
index ed5a79768e8..55d867c270d 100644
--- a/static/usage/v6/backdrop/basic/demo.html
+++ b/static/usage/v6/backdrop/basic/demo.html
@@ -1,35 +1,32 @@
 <!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>
 
-<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
+  <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/v6/backdrop/styling/demo.html b/static/usage/v6/backdrop/styling/demo.html
index 8b28987c937..94382996c65 100644
--- a/static/usage/v6/backdrop/styling/demo.html
+++ b/static/usage/v6/backdrop/styling/demo.html
@@ -1,57 +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);
+      }
 
-<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>
 
-    #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
+  <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/v6/badge/basic/demo.html b/static/usage/v6/badge/basic/demo.html
index a560f74b87b..e8559f30a57 100644
--- a/static/usage/v6/badge/basic/demo.html
+++ b/static/usage/v6/badge/basic/demo.html
@@ -1,39 +1,37 @@
 <!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" />
 
-<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>
 
-  <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
+  <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>
diff --git a/static/usage/v6/badge/theming/colors/demo.html b/static/usage/v6/badge/theming/colors/demo.html
index a81103de32b..1655a17e1cc 100644
--- a/static/usage/v6/badge/theming/colors/demo.html
+++ b/static/usage/v6/badge/theming/colors/demo.html
@@ -1,55 +1,53 @@
 <!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" />
 
-<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>
 
-  <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
+  <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>
diff --git a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md
index 950e96b4e80..cf47682b14d 100644
--- a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md
+++ b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md
@@ -5,4 +5,4 @@ ion-badge {
   --padding-end: 20px;
   --padding-start: 20px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/badge/theming/css-properties/demo.html b/static/usage/v6/badge/theming/css-properties/demo.html
index f942c2d83e6..1c73cc0dd6f 100644
--- a/static/usage/v6/badge/theming/css-properties/demo.html
+++ b/static/usage/v6/badge/theming/css-properties/demo.html
@@ -1,42 +1,40 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    ion-list {
-      width: 250px;
-    }
+      ion-badge {
+        --background: purple;
+        --color: white;
+        --padding-end: 20px;
+        --padding-start: 20px;
+      }
+    </style>
+  </head>
 
-    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
+  <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>
diff --git a/static/usage/v6/badge/theming/css-properties/react/main_css.md b/static/usage/v6/badge/theming/css-properties/react/main_css.md
index 950e96b4e80..cf47682b14d 100644
--- a/static/usage/v6/badge/theming/css-properties/react/main_css.md
+++ b/static/usage/v6/badge/theming/css-properties/react/main_css.md
@@ -5,4 +5,4 @@ ion-badge {
   --padding-end: 20px;
   --padding-start: 20px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/breadcrumbs/basic/demo.html b/static/usage/v6/breadcrumbs/basic/demo.html
index f230752bad0..094919df3eb 100644
--- a/static/usage/v6/breadcrumbs/basic/demo.html
+++ b/static/usage/v6/breadcrumbs/basic/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/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
index 76a545d6a8e..926479c1e85 100644
--- a/static/usage/v6/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
@@ -7,4 +7,4 @@
   <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/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html
index a6977cb29bf..f2311a089cd 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html
@@ -1,39 +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>
 
-<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>
 
-<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');
 
-  <script>
-    const breadcrumbs = document.querySelector('ion-breadcrumbs');
-
-    breadcrumbs.addEventListener('ionCollapsedClick', () => {
-      breadcrumbs.maxItems = undefined;
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      breadcrumbs.addEventListener('ionCollapsedClick', () => {
+        breadcrumbs.maxItems = undefined;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md
index f88b8a6e322..fdd63471ed4 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md
@@ -18,14 +18,14 @@
     components: { IonBreadcrumb, IonBreadcrumbs },
     data() {
       return {
-        maxBreadcrumbs: 4
-      }
+        maxBreadcrumbs: 4,
+      };
     },
     methods: {
       expandBreadcrumbs() {
         this.maxBreadcrumbs = undefined;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
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
index 96d8ae72cd0..9576e922566 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html
+++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html
@@ -1,68 +1,66 @@
 <!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>
-  <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>
 
-  <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>
 
-<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">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">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
+          <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>
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html
index 6b2ac36c51c..56a530bcbe9 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html
+++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html
@@ -1,31 +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>
 
-<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
+  <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>
diff --git a/static/usage/v6/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
index 2c5ee51a9b7..e3c0462a148 100644
--- a/static/usage/v6/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
@@ -22,4 +22,4 @@
     </ion-content>
   </ng-template>
 </ion-popover>
-```
\ No newline at end of file
+```
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
index fdeba83b336..75575d96290 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html
@@ -1,62 +1,60 @@
 <!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>
 
-<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>
 
-<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');
 
-  <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 += `
+      breadcrumbs.addEventListener('ionCollapsedClick', (e) => {
+        let listHTML = ``;
+        e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
+          listHTML += `
           <ion-item
-            ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
+            ${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>
+        popoverList.innerHTML = listHTML;
+        popover.event = e;
+        popover.isOpen = true;
+      });
 
-</html>
\ No newline at end of file
+      popover.addEventListener('didDismiss', () => (popover.isOpen = false));
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md
index 007fb9a4a1e..1d22085a5b1 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md
@@ -18,12 +18,12 @@
   const popover = document.querySelector('ion-popover');
   const popoverList = document.querySelector('ion-popover ion-list');
 
-  breadcrumbs.addEventListener('ionCollapsedClick', e => {
+  breadcrumbs.addEventListener('ionCollapsedClick', (e) => {
     let listHTML = ``;
     e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
       listHTML += `
         <ion-item
-          ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
+          ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ''}
           href="${breadcrumb.href}"
         >
           <ion-label>${breadcrumb.textContent}</ion-label>
@@ -36,6 +36,6 @@
     popover.isOpen = true;
   });
 
-  popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  popover.addEventListener('didDismiss', () => (popover.isOpen = false));
 </script>
 ```
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md
index 72cc6520e3c..66ccc22bfe3 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md
@@ -27,10 +27,7 @@ function Example() {
         <IonContent>
           <IonList>
             {collapsedBreadcrumbs.map((breadcrumb, i) => (
-              <IonItem
-                href={breadcrumb.href}
-                lines={i === collapsedBreadcrumbs.length - 1 ? "none" : undefined}
-              >
+              <IonItem href={breadcrumb.href} lines={i === collapsedBreadcrumbs.length - 1 ? 'none' : undefined}>
                 <IonLabel>{breadcrumb.textContent}</IonLabel>
               </IonItem>
             ))}
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md
index 318f64f8547..54368fa7213 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md
@@ -24,25 +24,25 @@
 </template>
 
 <script lang="ts">
-import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/vue';
-import Popover from './Popover.vue';
+  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;
-    }
-  },
-}
+  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/v6/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html
index a6db3ad12c6..46d87ec12b3 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html
@@ -1,41 +1,39 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md
index f836a85455f..f0849705aab 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md
@@ -29,7 +29,7 @@
     components: { IonBreadcrumb, IonBreadcrumbs, IonIcon },
     setup() {
       return { arrowForwardCircle };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html
index 1a1a9adbe3f..1a09b306b2c 100644
--- a/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html
@@ -1,68 +1,66 @@
 <!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>
-  <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>
 
-  <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>
 
-<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
+          <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>
diff --git a/static/usage/v6/breadcrumbs/theming/colors/demo.html b/static/usage/v6/breadcrumbs/theming/colors/demo.html
index 3746b4ad79d..e4bbf3ea91b 100644
--- a/static/usage/v6/breadcrumbs/theming/colors/demo.html
+++ b/static/usage/v6/breadcrumbs/theming/colors/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md
index 338babc9c79..3dc7c4640ad 100644
--- a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md
+++ b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md
@@ -4,4 +4,4 @@ ion-breadcrumb {
   --color-active: rgb(150, 112, 220);
   --color-hover: rgb(103, 61, 180);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/demo.html b/static/usage/v6/breadcrumbs/theming/css-properties/demo.html
index 9c888d5344d..57bd5606728 100644
--- a/static/usage/v6/breadcrumbs/theming/css-properties/demo.html
+++ b/static/usage/v6/breadcrumbs/theming/css-properties/demo.html
@@ -1,37 +1,35 @@
 <!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>
-  <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>
 
-  <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
+  <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>
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md
index 338babc9c79..3dc7c4640ad 100644
--- a/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md
+++ b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md
@@ -4,4 +4,4 @@ ion-breadcrumb {
   --color-active: rgb(150, 112, 220);
   --color-hover: rgb(103, 61, 180);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/button/basic/angular.md b/static/usage/v6/button/basic/angular.md
index 44ba5831426..d313d7dcd23 100644
--- a/static/usage/v6/button/basic/angular.md
+++ b/static/usage/v6/button/basic/angular.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button [disabled]="true">Disabled</ion-button>
+<ion-button>Default</ion-button> <ion-button [disabled]="true">Disabled</ion-button>
 ```
diff --git a/static/usage/v6/button/basic/demo.html b/static/usage/v6/button/basic/demo.html
index 2302dbff2ba..a64c9f521ca 100644
--- a/static/usage/v6/button/basic/demo.html
+++ b/static/usage/v6/button/basic/demo.html
@@ -1,26 +1,23 @@
 <!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>
 
-<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
+  <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/v6/button/basic/javascript.md b/static/usage/v6/button/basic/javascript.md
index 8296ef7f42a..e298f5a1246 100644
--- a/static/usage/v6/button/basic/javascript.md
+++ b/static/usage/v6/button/basic/javascript.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button disabled="true">Disabled</ion-button>
+<ion-button>Default</ion-button> <ion-button disabled="true">Disabled</ion-button>
 ```
diff --git a/static/usage/v6/button/expand/angular.md b/static/usage/v6/button/expand/angular.md
index ca3f5093b84..b49d2c767ae 100644
--- a/static/usage/v6/button/expand/angular.md
+++ b/static/usage/v6/button/expand/angular.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button expand="block">Block</ion-button>
-<ion-button expand="full">Full</ion-button>
+<ion-button expand="block">Block</ion-button> <ion-button expand="full">Full</ion-button>
 ```
diff --git a/static/usage/v6/button/expand/demo.html b/static/usage/v6/button/expand/demo.html
index 90421eefaf3..af5a86d6f4c 100644
--- a/static/usage/v6/button/expand/demo.html
+++ b/static/usage/v6/button/expand/demo.html
@@ -1,32 +1,30 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/button/expand/javascript.md b/static/usage/v6/button/expand/javascript.md
index ca3f5093b84..b49d2c767ae 100644
--- a/static/usage/v6/button/expand/javascript.md
+++ b/static/usage/v6/button/expand/javascript.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button expand="block">Block</ion-button>
-<ion-button expand="full">Full</ion-button>
+<ion-button expand="block">Block</ion-button> <ion-button expand="full">Full</ion-button>
 ```
diff --git a/static/usage/v6/button/fill/demo.html b/static/usage/v6/button/fill/demo.html
index 6e405f68b24..abfcdad88e5 100644
--- a/static/usage/v6/button/fill/demo.html
+++ b/static/usage/v6/button/fill/demo.html
@@ -1,28 +1,25 @@
 <!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>
 
-<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
+  <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/v6/button/icons/demo.html b/static/usage/v6/button/icons/demo.html
index e3594ca1f83..dfc1f985e6b 100644
--- a/static/usage/v6/button/icons/demo.html
+++ b/static/usage/v6/button/icons/demo.html
@@ -1,37 +1,34 @@
 <!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>
 
-<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" />
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button>
+            <ion-icon slot="start" name="star"></ion-icon>
+            Left Icon
+          </ion-button>
 
-</head>
+          <ion-button>
+            Right Icon
+            <ion-icon slot="end" name="star"></ion-icon>
+          </ion-button>
 
-<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
+          <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/v6/button/icons/vue.md b/static/usage/v6/button/icons/vue.md
index 356fc5617dc..03d8648c878 100644
--- a/static/usage/v6/button/icons/vue.md
+++ b/static/usage/v6/button/icons/vue.md
@@ -23,8 +23,8 @@
   export default defineComponent({
     components: { IonButton, IonIcon },
     setup() {
-      return { star }
-    }
+      return { star };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/button/shape/angular.md b/static/usage/v6/button/shape/angular.md
index 97ed756261a..a37193d9013 100644
--- a/static/usage/v6/button/shape/angular.md
+++ b/static/usage/v6/button/shape/angular.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button shape="round">Round</ion-button>
+<ion-button>Default</ion-button> <ion-button shape="round">Round</ion-button>
 ```
diff --git a/static/usage/v6/button/shape/demo.html b/static/usage/v6/button/shape/demo.html
index 7cedc61e4c7..b6572e48999 100644
--- a/static/usage/v6/button/shape/demo.html
+++ b/static/usage/v6/button/shape/demo.html
@@ -1,26 +1,23 @@
 <!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>
 
-<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
+  <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/v6/button/shape/javascript.md b/static/usage/v6/button/shape/javascript.md
index 97ed756261a..a37193d9013 100644
--- a/static/usage/v6/button/shape/javascript.md
+++ b/static/usage/v6/button/shape/javascript.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button shape="round">Round</ion-button>
+<ion-button>Default</ion-button> <ion-button shape="round">Round</ion-button>
 ```
diff --git a/static/usage/v6/button/size/demo.html b/static/usage/v6/button/size/demo.html
index 4aba9947d6e..9e83d5c9688 100644
--- a/static/usage/v6/button/size/demo.html
+++ b/static/usage/v6/button/size/demo.html
@@ -1,27 +1,24 @@
 <!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>
 
-<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
+  <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/v6/button/theming/colors/demo.html b/static/usage/v6/button/theming/colors/demo.html
index 9be8d6d0f8b..0103ba17270 100644
--- a/static/usage/v6/button/theming/colors/demo.html
+++ b/static/usage/v6/button/theming/colors/demo.html
@@ -1,41 +1,39 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/button/theming/css-properties/demo.html b/static/usage/v6/button/theming/css-properties/demo.html
index 9fd0e65c096..f6a05ed4551 100644
--- a/static/usage/v6/button/theming/css-properties/demo.html
+++ b/static/usage/v6/button/theming/css-properties/demo.html
@@ -1,47 +1,45 @@
 <!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
+  <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/v6/button/theming/css-properties/react/main_css.md b/static/usage/v6/button/theming/css-properties/react/main_css.md
index 1fba4c49972..fa985cbe82f 100644
--- a/static/usage/v6/button/theming/css-properties/react/main_css.md
+++ b/static/usage/v6/button/theming/css-properties/react/main_css.md
@@ -1,4 +1,3 @@
-
 ```css
 ion-button {
   --background: #93e9be;
diff --git a/static/usage/v6/button/theming/css-properties/react/main_tsx.md b/static/usage/v6/button/theming/css-properties/react/main_tsx.md
index 6e0cddd9709..c8c432e1b9c 100644
--- a/static/usage/v6/button/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/button/theming/css-properties/react/main_tsx.md
@@ -5,9 +5,7 @@ import { IonButton } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return (
-    <IonButton>Custom Button</IonButton>
-  );
+  return <IonButton>Custom Button</IonButton>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/buttons/basic/demo.html b/static/usage/v6/buttons/basic/demo.html
index f74d9eb0eca..d47e801f460 100644
--- a/static/usage/v6/buttons/basic/demo.html
+++ b/static/usage/v6/buttons/basic/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/buttons/placement/demo.html b/static/usage/v6/buttons/placement/demo.html
index 2c51099331c..5b7c095a876 100644
--- a/static/usage/v6/buttons/placement/demo.html
+++ b/static/usage/v6/buttons/placement/demo.html
@@ -1,49 +1,47 @@
 <!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>
-  <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>
 
-  <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>
 
-<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
+          <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/v6/buttons/types/angular.md b/static/usage/v6/buttons/types/angular.md
index 183c70105b1..9562dbb3b47 100644
--- a/static/usage/v6/buttons/types/angular.md
+++ b/static/usage/v6/buttons/types/angular.md
@@ -1,15 +1,11 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button size="large">
-      Favorite
-    </ion-button>
+    <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-button> Delete </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
diff --git a/static/usage/v6/buttons/types/demo.html b/static/usage/v6/buttons/types/demo.html
index 46288e45f1a..784f0be9401 100644
--- a/static/usage/v6/buttons/types/demo.html
+++ b/static/usage/v6/buttons/types/demo.html
@@ -1,106 +1,100 @@
 <!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>
-  <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>
 
-  <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>
 
-<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>
-              <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="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="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-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
+          <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/v6/buttons/types/javascript.md b/static/usage/v6/buttons/types/javascript.md
index 183c70105b1..9562dbb3b47 100644
--- a/static/usage/v6/buttons/types/javascript.md
+++ b/static/usage/v6/buttons/types/javascript.md
@@ -1,15 +1,11 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button size="large">
-      Favorite
-    </ion-button>
+    <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-button> Delete </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
diff --git a/static/usage/v6/buttons/types/react.md b/static/usage/v6/buttons/types/react.md
index 8d3b3edfe9e..01baca04d74 100644
--- a/static/usage/v6/buttons/types/react.md
+++ b/static/usage/v6/buttons/types/react.md
@@ -8,15 +8,11 @@ function Example() {
     <>
       <IonToolbar>
         <IonButtons slot="secondary">
-          <IonButton size="large">
-            Favorite
-          </IonButton>
+          <IonButton size="large">Favorite</IonButton>
         </IonButtons>
         <IonTitle>Default Buttons</IonTitle>
         <IonButtons slot="primary">
-          <IonButton>
-            Delete
-          </IonButton>
+          <IonButton>Delete</IonButton>
         </IonButtons>
       </IonToolbar>
 
@@ -86,5 +82,4 @@ function Example() {
   );
 }
 export default Example;
-
 ```
diff --git a/static/usage/v6/buttons/types/vue.md b/static/usage/v6/buttons/types/vue.md
index 9a101caa402..60b04a067da 100644
--- a/static/usage/v6/buttons/types/vue.md
+++ b/static/usage/v6/buttons/types/vue.md
@@ -2,15 +2,11 @@
 <template>
   <ion-toolbar>
     <ion-buttons slot="secondary">
-      <ion-button size="large">
-        Favorite
-      </ion-button>
+      <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-button> Delete </ion-button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -87,7 +83,7 @@
     components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
     setup() {
       return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/card/basic/demo.html b/static/usage/v6/card/basic/demo.html
index e6464c335a9..706cdda5230 100644
--- a/static/usage/v6/card/basic/demo.html
+++ b/static/usage/v6/card/basic/demo.html
@@ -1,46 +1,44 @@
 <!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" />
 
-<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;
+      }
 
-  <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>
 
-    /* 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>
 
-<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
+            <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/v6/card/basic/react/main_tsx.md b/static/usage/v6/card/basic/react/main_tsx.md
index 251b18ce24d..a5b4ce3af35 100644
--- a/static/usage/v6/card/basic/react/main_tsx.md
+++ b/static/usage/v6/card/basic/react/main_tsx.md
@@ -12,9 +12,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <IonCardContent>Here's a small text description for the card content. Nothing more, nothing less.</IonCardContent>
     </IonCard>
   );
 }
diff --git a/static/usage/v6/card/buttons/demo.html b/static/usage/v6/card/buttons/demo.html
index 012bbc31321..ef10f826c16 100644
--- a/static/usage/v6/card/buttons/demo.html
+++ b/static/usage/v6/card/buttons/demo.html
@@ -1,49 +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" />
 
-<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;
+      }
 
-  <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>
 
-    /* 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>
 
-<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-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
+            <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/v6/card/buttons/react/main_tsx.md b/static/usage/v6/card/buttons/react/main_tsx.md
index a24ba6cd1e9..1897c50e2b7 100644
--- a/static/usage/v6/card/buttons/react/main_tsx.md
+++ b/static/usage/v6/card/buttons/react/main_tsx.md
@@ -12,9 +12,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <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>
diff --git a/static/usage/v6/card/list/demo.html b/static/usage/v6/card/list/demo.html
index 123db8876cf..6fd6ffa6ca2 100644
--- a/static/usage/v6/card/list/demo.html
+++ b/static/usage/v6/card/list/demo.html
@@ -1,81 +1,79 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-card {
+        width: 100%;
+      }
 
-    ion-card {
-      width: 100%;
-    }
+      ion-item {
+        --padding-start: 0;
+      }
 
-    ion-item {
-      --padding-start: 0;
-    }
+      /* iOS places the subtitle above the title */
+      ion-card-header.ios {
+        display: flex;
+        flex-flow: column-reverse;
+      }
+    </style>
+  </head>
 
-    /* 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>
 
-<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>
+                  <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
+                <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/v6/card/list/react/main_tsx.md b/static/usage/v6/card/list/react/main_tsx.md
index 9bb30e92c92..8fe3d6973e9 100644
--- a/static/usage/v6/card/list/react/main_tsx.md
+++ b/static/usage/v6/card/list/react/main_tsx.md
@@ -1,6 +1,16 @@
 ```tsx
 import React from 'react';
-import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/react';
+import {
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonThumbnail,
+} from '@ionic/react';
 
 import './main.css';
 
diff --git a/static/usage/v6/card/media/demo.html b/static/usage/v6/card/media/demo.html
index edc1a4b75a1..7de1ee7b507 100644
--- a/static/usage/v6/card/media/demo.html
+++ b/static/usage/v6/card/media/demo.html
@@ -1,47 +1,45 @@
 <!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" />
 
-<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;
+      }
 
-  <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>
 
-    /* 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>
 
-<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
+            <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/v6/card/media/react/main_tsx.md b/static/usage/v6/card/media/react/main_tsx.md
index 7c47833027f..4d5c1ebb19c 100644
--- a/static/usage/v6/card/media/react/main_tsx.md
+++ b/static/usage/v6/card/media/react/main_tsx.md
@@ -13,9 +13,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <IonCardContent>Here's a small text description for the card content. Nothing more, nothing less.</IonCardContent>
     </IonCard>
   );
 }
diff --git a/static/usage/v6/card/theming/colors/angular/example_component_html.md b/static/usage/v6/card/theming/colors/angular/example_component_html.md
index bda4dbfe1dc..8c3924e8365 100644
--- a/static/usage/v6/card/theming/colors/angular/example_component_html.md
+++ b/static/usage/v6/card/theming/colors/angular/example_component_html.md
@@ -5,9 +5,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="secondary">
@@ -16,9 +14,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="tertiary">
@@ -27,9 +23,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="success">
@@ -38,9 +32,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="warning">
@@ -49,9 +41,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="danger">
@@ -60,9 +50,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="light">
@@ -71,9 +59,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="medium">
@@ -82,9 +68,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="dark">
@@ -93,8 +77,6 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 ```
diff --git a/static/usage/v6/card/theming/colors/demo.html b/static/usage/v6/card/theming/colors/demo.html
index c0e5f88d827..faca172d938 100644
--- a/static/usage/v6/card/theming/colors/demo.html
+++ b/static/usage/v6/card/theming/colors/demo.html
@@ -1,137 +1,117 @@
 <!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
+  <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/v6/card/theming/colors/javascript.md b/static/usage/v6/card/theming/colors/javascript.md
index 6822cd586a4..aa58c1a981e 100644
--- a/static/usage/v6/card/theming/colors/javascript.md
+++ b/static/usage/v6/card/theming/colors/javascript.md
@@ -5,9 +5,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="secondary">
@@ -16,9 +14,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="tertiary">
@@ -27,9 +23,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="success">
@@ -38,9 +32,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="warning">
@@ -49,9 +41,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="danger">
@@ -60,9 +50,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="light">
@@ -71,9 +59,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="medium">
@@ -82,9 +68,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="dark">
@@ -93,9 +77,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <style>
diff --git a/static/usage/v6/card/theming/colors/react/main_tsx.md b/static/usage/v6/card/theming/colors/react/main_tsx.md
index efb556f7a01..94c0de73adb 100644
--- a/static/usage/v6/card/theming/colors/react/main_tsx.md
+++ b/static/usage/v6/card/theming/colors/react/main_tsx.md
@@ -13,9 +13,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="secondary">
@@ -24,9 +22,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="tertiary">
@@ -35,9 +31,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="success">
@@ -46,9 +40,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="warning">
@@ -57,9 +49,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="danger">
@@ -68,9 +58,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="light">
@@ -79,9 +67,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="medium">
@@ -90,9 +76,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="dark">
@@ -101,9 +85,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
     </>
   );
diff --git a/static/usage/v6/card/theming/colors/vue.md b/static/usage/v6/card/theming/colors/vue.md
index 9f8f76585c8..4e99de452d4 100644
--- a/static/usage/v6/card/theming/colors/vue.md
+++ b/static/usage/v6/card/theming/colors/vue.md
@@ -6,9 +6,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="secondary">
@@ -17,9 +15,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="tertiary">
@@ -28,9 +24,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="success">
@@ -39,9 +33,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="warning">
@@ -50,9 +42,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="danger">
@@ -61,9 +51,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="light">
@@ -72,9 +60,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="medium">
@@ -83,9 +69,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="dark">
@@ -94,9 +78,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 </template>
 
diff --git a/static/usage/v6/card/theming/css-properties/demo.html b/static/usage/v6/card/theming/css-properties/demo.html
index dc131842db3..9f3e707118e 100644
--- a/static/usage/v6/card/theming/css-properties/demo.html
+++ b/static/usage/v6/card/theming/css-properties/demo.html
@@ -1,59 +1,57 @@
 <!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
+  <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/v6/card/theming/css-properties/react/main_tsx.md b/static/usage/v6/card/theming/css-properties/react/main_tsx.md
index 251b18ce24d..a5b4ce3af35 100644
--- a/static/usage/v6/card/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/card/theming/css-properties/react/main_tsx.md
@@ -12,9 +12,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <IonCardContent>Here's a small text description for the card content. Nothing more, nothing less.</IonCardContent>
     </IonCard>
   );
 }
diff --git a/static/usage/v6/checkbox/basic/demo.html b/static/usage/v6/checkbox/basic/demo.html
index 2df0497c4fe..b24833c06c8 100644
--- a/static/usage/v6/checkbox/basic/demo.html
+++ b/static/usage/v6/checkbox/basic/demo.html
@@ -1,27 +1,25 @@
 <!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>
 
-<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
+  <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/v6/checkbox/basic/react.md b/static/usage/v6/checkbox/basic/react.md
index 64dda9457bb..0e0b76aa299 100644
--- a/static/usage/v6/checkbox/basic/react.md
+++ b/static/usage/v6/checkbox/basic/react.md
@@ -1,10 +1,6 @@
 ```tsx
 import React from 'react';
-import {
-  IonCheckbox,
-  IonItem,
-  IonLabel
-} from '@ionic/react';
+import { IonCheckbox, IonItem, IonLabel } from '@ionic/react';
 
 function Example() {
   return (
@@ -15,4 +11,4 @@ function Example() {
   );
 }
 export default Example;
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/checkbox/basic/vue.md b/static/usage/v6/checkbox/basic/vue.md
index 53cb1d16ccf..698a02d88e7 100644
--- a/static/usage/v6/checkbox/basic/vue.md
+++ b/static/usage/v6/checkbox/basic/vue.md
@@ -7,19 +7,15 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonCheckbox,
-    IonItem,
-    IonLabel
-  } from '@ionic/vue';
+  import { IonCheckbox, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
       IonCheckbox,
       IonItem,
-      IonLabel
-    }
+      IonLabel,
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/checkbox/indeterminate/demo.html b/static/usage/v6/checkbox/indeterminate/demo.html
index 4e726022577..44a8923c852 100644
--- a/static/usage/v6/checkbox/indeterminate/demo.html
+++ b/static/usage/v6/checkbox/indeterminate/demo.html
@@ -1,27 +1,25 @@
 <!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>
 
-<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
+  <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/v6/checkbox/indeterminate/react.md b/static/usage/v6/checkbox/indeterminate/react.md
index 9e08f102560..ff706ccd759 100644
--- a/static/usage/v6/checkbox/indeterminate/react.md
+++ b/static/usage/v6/checkbox/indeterminate/react.md
@@ -1,10 +1,6 @@
 ```tsx
 import React from 'react';
-import {
-  IonCheckbox,
-  IonItem,
-  IonLabel
-} from '@ionic/react';
+import { IonCheckbox, IonItem, IonLabel } from '@ionic/react';
 
 function Example() {
   return (
@@ -15,4 +11,4 @@ function Example() {
   );
 }
 export default Example;
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/checkbox/indeterminate/vue.md b/static/usage/v6/checkbox/indeterminate/vue.md
index 0ad2ddbf62b..d4581328264 100644
--- a/static/usage/v6/checkbox/indeterminate/vue.md
+++ b/static/usage/v6/checkbox/indeterminate/vue.md
@@ -7,19 +7,15 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonCheckbox,
-    IonItem,
-    IonLabel
-  } from '@ionic/vue';
+  import { IonCheckbox, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
       IonCheckbox,
       IonItem,
-      IonLabel
-    }
+      IonLabel,
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v6/checkbox/theming/css-properties/angular/example_component_css.md
index c8fbfdb86d8..1043a87b454 100644
--- a/static/usage/v6/checkbox/theming/css-properties/angular/example_component_css.md
+++ b/static/usage/v6/checkbox/theming/css-properties/angular/example_component_css.md
@@ -8,4 +8,4 @@ ion-checkbox::part(container) {
   border-radius: 6px;
   border: 2px solid #6815ec;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v6/checkbox/theming/css-properties/angular/example_component_html.md
index a54828724aa..ddd5d1aab7e 100644
--- a/static/usage/v6/checkbox/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v6/checkbox/theming/css-properties/angular/example_component_html.md
@@ -3,4 +3,4 @@
   <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/v6/checkbox/theming/css-properties/demo.html b/static/usage/v6/checkbox/theming/css-properties/demo.html
index b75f12c0655..83f3ef39712 100644
--- a/static/usage/v6/checkbox/theming/css-properties/demo.html
+++ b/static/usage/v6/checkbox/theming/css-properties/demo.html
@@ -1,38 +1,36 @@
 <!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;
+      }
 
-<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>
 
-    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
+  <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/v6/checkbox/theming/css-properties/javascript.md b/static/usage/v6/checkbox/theming/css-properties/javascript.md
index 5ee2949135b..0f62529e6f9 100644
--- a/static/usage/v6/checkbox/theming/css-properties/javascript.md
+++ b/static/usage/v6/checkbox/theming/css-properties/javascript.md
@@ -9,7 +9,7 @@
     --size: 32px;
     --background-checked: #6815ec;
   }
-  
+
   ion-checkbox::part(container) {
     border-radius: 6px;
     border: 2px solid #6815ec;
diff --git a/static/usage/v6/checkbox/theming/css-properties/react/main_css.md b/static/usage/v6/checkbox/theming/css-properties/react/main_css.md
index c8fbfdb86d8..1043a87b454 100644
--- a/static/usage/v6/checkbox/theming/css-properties/react/main_css.md
+++ b/static/usage/v6/checkbox/theming/css-properties/react/main_css.md
@@ -8,4 +8,4 @@ ion-checkbox::part(container) {
   border-radius: 6px;
   border: 2px solid #6815ec;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v6/checkbox/theming/css-properties/react/main_tsx.md
index 28784175181..9d17f4d32e7 100644
--- a/static/usage/v6/checkbox/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/checkbox/theming/css-properties/react/main_tsx.md
@@ -1,10 +1,6 @@
 ```tsx
 import React from 'react';
-import {
-  IonCheckbox,
-  IonItem,
-  IonLabel
-} from '@ionic/react';
+import { IonCheckbox, IonItem, IonLabel } from '@ionic/react';
 
 import './main.css';
 
@@ -17,4 +13,4 @@ function Example() {
   );
 }
 export default Example;
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/checkbox/theming/css-properties/vue.md b/static/usage/v6/checkbox/theming/css-properties/vue.md
index 3bb88c82577..a85aaab1df0 100644
--- a/static/usage/v6/checkbox/theming/css-properties/vue.md
+++ b/static/usage/v6/checkbox/theming/css-properties/vue.md
@@ -7,19 +7,15 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonCheckbox,
-    IonItem,
-    IonLabel
-  } from '@ionic/vue';
+  import { IonCheckbox, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
       IonCheckbox,
       IonItem,
-      IonLabel
-    }
+      IonLabel,
+    },
   });
 </script>
 
@@ -28,7 +24,7 @@
     --size: 32px;
     --background-checked: #6815ec;
   }
-  
+
   ion-checkbox::part(container) {
     border-radius: 6px;
     border: 2px solid #6815ec;
diff --git a/static/usage/v6/chip/basic/demo.html b/static/usage/v6/chip/basic/demo.html
index df4c6569a13..7e8901caaa7 100644
--- a/static/usage/v6/chip/basic/demo.html
+++ b/static/usage/v6/chip/basic/demo.html
@@ -1,27 +1,24 @@
 <!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>
 
-<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
+  <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/v6/chip/slots/demo.html b/static/usage/v6/chip/slots/demo.html
index bbf70b2e82f..5ba5790d641 100644
--- a/static/usage/v6/chip/slots/demo.html
+++ b/static/usage/v6/chip/slots/demo.html
@@ -1,37 +1,34 @@
 <!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>
 
-<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" />
+  <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>
 
-</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
+          <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/v6/chip/theming/colors/demo.html b/static/usage/v6/chip/theming/colors/demo.html
index ecdbe97a047..97bb1de26d5 100644
--- a/static/usage/v6/chip/theming/colors/demo.html
+++ b/static/usage/v6/chip/theming/colors/demo.html
@@ -1,45 +1,43 @@
 <!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>
-  <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>
 
-  <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>
+  <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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/chip/theming/css-properties/demo.html b/static/usage/v6/chip/theming/css-properties/demo.html
index b0621dace2d..326aa3304de 100644
--- a/static/usage/v6/chip/theming/css-properties/demo.html
+++ b/static/usage/v6/chip/theming/css-properties/demo.html
@@ -1,32 +1,29 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/content/basic/demo.html b/static/usage/v6/content/basic/demo.html
index 14dbe3f5e7d..13640925b9d 100644
--- a/static/usage/v6/content/basic/demo.html
+++ b/static/usage/v6/content/basic/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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>
 
-<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
+        <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/v6/content/fixed/angular.md b/static/usage/v6/content/fixed/angular.md
index 178d8338f25..82cb3007125 100644
--- a/static/usage/v6/content/fixed/angular.md
+++ b/static/usage/v6/content/fixed/angular.md
@@ -5,10 +5,50 @@
   <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>
+  <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/v6/content/fixed/angular/example_component_css.md b/static/usage/v6/content/fixed/angular/example_component_css.md
index e5931e4d94f..1146da9a4b1 100644
--- a/static/usage/v6/content/fixed/angular/example_component_css.md
+++ b/static/usage/v6/content/fixed/angular/example_component_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-button[slot="fixed"] {
+ion-button[slot='fixed'] {
   top: 50%;
   right: 20px;
 }
diff --git a/static/usage/v6/content/fixed/angular/example_component_html.md b/static/usage/v6/content/fixed/angular/example_component_html.md
index 178d8338f25..82cb3007125 100644
--- a/static/usage/v6/content/fixed/angular/example_component_html.md
+++ b/static/usage/v6/content/fixed/angular/example_component_html.md
@@ -5,10 +5,50 @@
   <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>
+  <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/v6/content/fixed/demo.html b/static/usage/v6/content/fixed/demo.html
index 9ea56f755e2..67aee23feaf 100644
--- a/static/usage/v6/content/fixed/demo.html
+++ b/static/usage/v6/content/fixed/demo.html
@@ -1,68 +1,76 @@
 <!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>
-  <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>
 
-  <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>
 
-<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>
 
-      <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
+        <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/v6/content/fixed/javascript.md b/static/usage/v6/content/fixed/javascript.md
index 2a577f1d76a..8613ca29a0c 100644
--- a/static/usage/v6/content/fixed/javascript.md
+++ b/static/usage/v6/content/fixed/javascript.md
@@ -5,15 +5,55 @@
   <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>
+  <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"] {
+  ion-button[slot='fixed'] {
     top: 50%;
     right: 20px;
   }
diff --git a/static/usage/v6/content/fixed/react.md b/static/usage/v6/content/fixed/react.md
index d8e115e5491..55d5e1b9362 100644
--- a/static/usage/v6/content/fixed/react.md
+++ b/static/usage/v6/content/fixed/react.md
@@ -10,11 +10,51 @@ function Example() {
       <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>
+      <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>
   );
 }
diff --git a/static/usage/v6/content/fixed/react/main_css.md b/static/usage/v6/content/fixed/react/main_css.md
index e5931e4d94f..1146da9a4b1 100644
--- a/static/usage/v6/content/fixed/react/main_css.md
+++ b/static/usage/v6/content/fixed/react/main_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-button[slot="fixed"] {
+ion-button[slot='fixed'] {
   top: 50%;
   right: 20px;
 }
diff --git a/static/usage/v6/content/fixed/react/main_tsx.md b/static/usage/v6/content/fixed/react/main_tsx.md
index 542f79deeb8..f81c3d02949 100644
--- a/static/usage/v6/content/fixed/react/main_tsx.md
+++ b/static/usage/v6/content/fixed/react/main_tsx.md
@@ -12,11 +12,51 @@ function Example() {
       <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>
+      <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>
   );
 }
diff --git a/static/usage/v6/content/fixed/vue.md b/static/usage/v6/content/fixed/vue.md
index 2c44fd0b289..31d3f7cd33c 100644
--- a/static/usage/v6/content/fixed/vue.md
+++ b/static/usage/v6/content/fixed/vue.md
@@ -6,11 +6,51 @@
     <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>
+    <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>
 
@@ -24,7 +64,7 @@
 </script>
 
 <style scoped>
-  ion-button[slot="fixed"] {
+  ion-button[slot='fixed'] {
     top: 50%;
     right: 20px;
   }
diff --git a/static/usage/v6/content/fullscreen/angular/example_component_css.md b/static/usage/v6/content/fullscreen/angular/example_component_css.md
index a62d625ae0a..69fa48ad49e 100644
--- a/static/usage/v6/content/fullscreen/angular/example_component_css.md
+++ b/static/usage/v6/content/fullscreen/angular/example_component_css.md
@@ -1,5 +1,5 @@
 ```css
 ion-toolbar {
-  --opacity: .5
+  --opacity: 0.5;
 }
 ```
diff --git a/static/usage/v6/content/fullscreen/angular/example_component_html.md b/static/usage/v6/content/fullscreen/angular/example_component_html.md
index c5cf5a10dd9..753f938b914 100644
--- a/static/usage/v6/content/fullscreen/angular/example_component_html.md
+++ b/static/usage/v6/content/fullscreen/angular/example_component_html.md
@@ -1,25 +1,61 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <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>
+  <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-title> Footer </ion-title>
   </ion-toolbar>
 </ion-footer>
 ```
diff --git a/static/usage/v6/content/fullscreen/demo.html b/static/usage/v6/content/fullscreen/demo.html
index 9bf752950d5..f5dbd171da8 100644
--- a/static/usage/v6/content/fullscreen/demo.html
+++ b/static/usage/v6/content/fullscreen/demo.html
@@ -1,78 +1,82 @@
 <!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>
-  <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: 0.5;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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
+        <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/v6/content/fullscreen/javascript.md b/static/usage/v6/content/fullscreen/javascript.md
index f6011fa9b88..2fb4c68b16c 100644
--- a/static/usage/v6/content/fullscreen/javascript.md
+++ b/static/usage/v6/content/fullscreen/javascript.md
@@ -1,31 +1,67 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <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>
+  <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-title> Footer </ion-title>
   </ion-toolbar>
 </ion-footer>
 
 <style>
   ion-toolbar {
-    --opacity: .5
+    --opacity: 0.5;
   }
 </style>
 ```
diff --git a/static/usage/v6/content/fullscreen/react/main_css.md b/static/usage/v6/content/fullscreen/react/main_css.md
index a62d625ae0a..69fa48ad49e 100644
--- a/static/usage/v6/content/fullscreen/react/main_css.md
+++ b/static/usage/v6/content/fullscreen/react/main_css.md
@@ -1,5 +1,5 @@
 ```css
 ion-toolbar {
-  --opacity: .5
+  --opacity: 0.5;
 }
 ```
diff --git a/static/usage/v6/content/fullscreen/react/main_tsx.md b/static/usage/v6/content/fullscreen/react/main_tsx.md
index ca324631897..7302c484489 100644
--- a/static/usage/v6/content/fullscreen/react/main_tsx.md
+++ b/static/usage/v6/content/fullscreen/react/main_tsx.md
@@ -9,25 +9,61 @@ function Example() {
     <>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>
-            Header
-          </IonTitle>
+          <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>
+        <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>
+          <IonTitle>Footer</IonTitle>
         </IonToolbar>
       </IonFooter>
     </>
diff --git a/static/usage/v6/content/fullscreen/vue.md b/static/usage/v6/content/fullscreen/vue.md
index e4bd0c3a59f..3de93600da7 100644
--- a/static/usage/v6/content/fullscreen/vue.md
+++ b/static/usage/v6/content/fullscreen/vue.md
@@ -2,25 +2,61 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>
-        Header
-      </ion-title>
+      <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>
+    <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-title> Footer </ion-title>
     </ion-toolbar>
   </ion-footer>
 </template>
@@ -36,7 +72,7 @@
 
 <style scoped>
   ion-toolbar {
-    --opacity: .5
+    --opacity: 0.5;
   }
 </style>
 ```
diff --git a/static/usage/v6/content/header-footer/angular.md b/static/usage/v6/content/header-footer/angular.md
index 4a177d1d58f..35a9aadc4c1 100644
--- a/static/usage/v6/content/header-footer/angular.md
+++ b/static/usage/v6/content/header-footer/angular.md
@@ -1,9 +1,7 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <ion-title> Header </ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
@@ -18,9 +16,7 @@
 </ion-content>
 <ion-footer>
   <ion-toolbar>
-    <ion-title>
-      Footer
-    </ion-title>
+    <ion-title> Footer </ion-title>
   </ion-toolbar>
 </ion-footer>
 ```
diff --git a/static/usage/v6/content/header-footer/demo.html b/static/usage/v6/content/header-footer/demo.html
index 0a39f7a5fa8..2f9b9e8a864 100644
--- a/static/usage/v6/content/header-footer/demo.html
+++ b/static/usage/v6/content/header-footer/demo.html
@@ -1,43 +1,37 @@
 <!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>
 
-<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>
 
-<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
+        <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/v6/content/header-footer/javascript.md b/static/usage/v6/content/header-footer/javascript.md
index 4a177d1d58f..35a9aadc4c1 100644
--- a/static/usage/v6/content/header-footer/javascript.md
+++ b/static/usage/v6/content/header-footer/javascript.md
@@ -1,9 +1,7 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <ion-title> Header </ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
@@ -18,9 +16,7 @@
 </ion-content>
 <ion-footer>
   <ion-toolbar>
-    <ion-title>
-      Footer
-    </ion-title>
+    <ion-title> Footer </ion-title>
   </ion-toolbar>
 </ion-footer>
 ```
diff --git a/static/usage/v6/content/header-footer/react.md b/static/usage/v6/content/header-footer/react.md
index 4ffff834f2a..e075e96cd81 100644
--- a/static/usage/v6/content/header-footer/react.md
+++ b/static/usage/v6/content/header-footer/react.md
@@ -7,9 +7,7 @@ function Example() {
     <>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>
-            Header
-          </IonTitle>
+          <IonTitle>Header</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent className="ion-padding">
@@ -24,9 +22,7 @@ function Example() {
       </IonContent>
       <IonFooter>
         <IonToolbar>
-          <IonTitle>
-            Footer
-          </IonTitle>
+          <IonTitle>Footer</IonTitle>
         </IonToolbar>
       </IonFooter>
     </>
diff --git a/static/usage/v6/content/header-footer/vue.md b/static/usage/v6/content/header-footer/vue.md
index 8bd052a6460..dc914aee8f5 100644
--- a/static/usage/v6/content/header-footer/vue.md
+++ b/static/usage/v6/content/header-footer/vue.md
@@ -2,9 +2,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>
-        Header
-      </ion-title>
+      <ion-title> Header </ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
@@ -19,9 +17,7 @@
   </ion-content>
   <ion-footer>
     <ion-toolbar>
-      <ion-title>
-        Footer
-      </ion-title>
+      <ion-title> Footer </ion-title>
     </ion-toolbar>
   </ion-footer>
 </template>
diff --git a/static/usage/v6/content/scroll-events/angular/example_component_html.md b/static/usage/v6/content/scroll-events/angular/example_component_html.md
index a1c3aac558f..4a66edad40a 100644
--- a/static/usage/v6/content/scroll-events/angular/example_component_html.md
+++ b/static/usage/v6/content/scroll-events/angular/example_component_html.md
@@ -6,13 +6,54 @@
   (ionScrollStart)="handleScrollStart()"
   (ionScroll)="handleScroll($any($event))"
   (ionScrollEnd)="handleScrollEnd()"
-  class="ion-padding">
+  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>
+  <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/v6/content/scroll-events/demo.html b/static/usage/v6/content/scroll-events/demo.html
index 1db71ff8972..d00095bb2d4 100644
--- a/static/usage/v6/content/scroll-events/demo.html
+++ b/static/usage/v6/content/scroll-events/demo.html
@@ -1,69 +1,77 @@
 <!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>
 
-<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>
 
-<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>
 
-      <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;
 
-  <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
+      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/v6/content/scroll-events/javascript.md b/static/usage/v6/content/scroll-events/javascript.md
index 5cc4e537dd6..ed54f080780 100644
--- a/static/usage/v6/content/scroll-events/javascript.md
+++ b/static/usage/v6/content/scroll-events/javascript.md
@@ -2,11 +2,51 @@
 <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>
+  <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>
diff --git a/static/usage/v6/content/scroll-events/react.md b/static/usage/v6/content/scroll-events/react.md
index ce8ced69807..92a5d4d3bc7 100644
--- a/static/usage/v6/content/scroll-events/react.md
+++ b/static/usage/v6/content/scroll-events/react.md
@@ -22,14 +22,55 @@ function Example() {
       onIonScrollStart={handleScrollStart}
       onIonScroll={handleScroll}
       onIonScrollEnd={handleScrollEnd}
-      class="ion-padding">
+      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>
+      <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>
   );
 }
diff --git a/static/usage/v6/content/scroll-events/vue.md b/static/usage/v6/content/scroll-events/vue.md
index 2afdcf26682..ff6e4a17102 100644
--- a/static/usage/v6/content/scroll-events/vue.md
+++ b/static/usage/v6/content/scroll-events/vue.md
@@ -6,14 +6,55 @@
     @ionScrollStart="handleScrollStart()"
     @ionScroll="handleScroll($event)"
     @ionScrollEnd="handleScrollEnd()"
-    class="ion-padding">
+    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>
+    <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>
 
@@ -32,8 +73,8 @@
       },
       handleScrollEnd() {
         console.log('scroll end');
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/content/scroll-methods/angular/example_component_html.md b/static/usage/v6/content/scroll-methods/angular/example_component_html.md
index ffa8c913e3e..e585b97e78d 100644
--- a/static/usage/v6/content/scroll-methods/angular/example_component_html.md
+++ b/static/usage/v6/content/scroll-methods/angular/example_component_html.md
@@ -4,11 +4,51 @@
 
   <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>
+  <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/v6/content/scroll-methods/demo.html b/static/usage/v6/content/scroll-methods/demo.html
index c72c5300ff5..a1ae0d0da91 100644
--- a/static/usage/v6/content/scroll-methods/demo.html
+++ b/static/usage/v6/content/scroll-methods/demo.html
@@ -1,78 +1,86 @@
 <!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>
 
-<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>
 
-<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>
 
-      <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>
 
-      <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>
 
-      <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
-    </ion-content>
-  </ion-app>
+    <script>
+      const content = document.querySelector('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 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
+      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/v6/content/scroll-methods/javascript.md b/static/usage/v6/content/scroll-methods/javascript.md
index b8f3bb1e13e..a53fbc7767b 100644
--- a/static/usage/v6/content/scroll-methods/javascript.md
+++ b/static/usage/v6/content/scroll-methods/javascript.md
@@ -4,11 +4,51 @@
 
   <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>
+  <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>
diff --git a/static/usage/v6/content/scroll-methods/react.md b/static/usage/v6/content/scroll-methods/react.md
index 9526a8884a4..1d2d105e984 100644
--- a/static/usage/v6/content/scroll-methods/react.md
+++ b/static/usage/v6/content/scroll-methods/react.md
@@ -21,15 +21,59 @@ function Example() {
     <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>
+      <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>
+      <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>
+      <IonButton expand="block" onClick={scrollToTop}>
+        Scroll to Top
+      </IonButton>
     </IonContent>
   );
 }
diff --git a/static/usage/v6/content/scroll-methods/vue.md b/static/usage/v6/content/scroll-methods/vue.md
index c3e63abb721..5ac6e8ee1fc 100644
--- a/static/usage/v6/content/scroll-methods/vue.md
+++ b/static/usage/v6/content/scroll-methods/vue.md
@@ -5,11 +5,51 @@
 
     <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>
+    <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>
@@ -32,7 +72,7 @@
         // goes to the top instead of instantly
         this.$refs.content.$el.scrollToTop(500);
       },
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/content/theming/colors/demo.html b/static/usage/v6/content/theming/colors/demo.html
index 7e9409ec13e..12a49a59fca 100644
--- a/static/usage/v6/content/theming/colors/demo.html
+++ b/static/usage/v6/content/theming/colors/demo.html
@@ -1,69 +1,67 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    .container {
-      flex-wrap: wrap;
-      align-content: center;
-    }
+      ion-content {
+        flex: 1 1 33%;
+        height: 250px;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/content/theming/css-properties/demo.html b/static/usage/v6/content/theming/css-properties/demo.html
index aeab8bee49b..b1e69c6d3f0 100644
--- a/static/usage/v6/content/theming/css-properties/demo.html
+++ b/static/usage/v6/content/theming/css-properties/demo.html
@@ -1,36 +1,34 @@
 <!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>
-  <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>
 
-  <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>
 
-<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
+        <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/v6/content/theming/css-shadow-parts/demo.html b/static/usage/v6/content/theming/css-shadow-parts/demo.html
index 9b15b01757d..b0f6e9fd909 100644
--- a/static/usage/v6/content/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/content/theming/css-shadow-parts/demo.html
@@ -1,39 +1,37 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    ion-content::part(background) {
-      background: #d31373;
-    }
+      ion-content::part(scroll) {
+        color: #fff;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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
+        <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/v6/datetime-button/basic/demo.html b/static/usage/v6/datetime-button/basic/demo.html
index 73f3f9b1ab7..2a5722cc437 100644
--- a/static/usage/v6/datetime-button/basic/demo.html
+++ b/static/usage/v6/datetime-button/basic/demo.html
@@ -1,33 +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.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>
 
-<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>
 
-<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
+          <ion-modal>
+            <ion-datetime id="datetime"></ion-datetime>
+          </ion-modal>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/datetime-button/basic/react.md b/static/usage/v6/datetime-button/basic/react.md
index 90eaaba82af..62529cdb75f 100644
--- a/static/usage/v6/datetime-button/basic/react.md
+++ b/static/usage/v6/datetime-button/basic/react.md
@@ -5,7 +5,7 @@ function Example() {
   return (
     <>
       <IonDatetimeButton datetime="datetime"></IonDatetimeButton>
-      
+
       <IonModal keepContentsMounted={true}>
         <IonDatetime id="datetime"></IonDatetime>
       </IonModal>
diff --git a/static/usage/v6/datetime-button/basic/vue.md b/static/usage/v6/datetime-button/basic/vue.md
index 1272d768b88..a595c27e409 100644
--- a/static/usage/v6/datetime-button/basic/vue.md
+++ b/static/usage/v6/datetime-button/basic/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-datetime-button datetime="datetime"></ion-datetime-button>
-  
+
   <ion-modal :keep-contents-mounted="true">
     <ion-datetime id="datetime"></ion-datetime>
   </ion-modal>
diff --git a/static/usage/v6/datetime/basic/demo.html b/static/usage/v6/datetime/basic/demo.html
index bcd958a1058..180320e07b1 100644
--- a/static/usage/v6/datetime/basic/demo.html
+++ b/static/usage/v6/datetime/basic/demo.html
@@ -1,33 +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;
+      }
 
-<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;
-    }
+      .container {
+        align-items: flex-start;
+      }
+    </style>
+  </head>
 
-    .container {
-      align-items: flex-start;
-    }
-  </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
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v6/datetime/buttons/customizing-button-texts/angular.md
index f4dd937826d..f9d6b66b986 100644
--- a/static/usage/v6/datetime/buttons/customizing-button-texts/angular.md
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/angular.md
@@ -1,8 +1,3 @@
 ```html
-<ion-datetime
-  [showDefaultButtons]="true"
-  doneText="All set"
-  cancelText="Never mind"
->
-</ion-datetime>
+<ion-datetime [showDefaultButtons]="true" doneText="All set" cancelText="Never mind"> </ion-datetime>
 ```
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html
index 44074047aca..3e600107060 100644
--- a/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html
@@ -1,30 +1,28 @@
 <!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>
 
-<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
+  <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/v6/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v6/datetime/buttons/customizing-button-texts/javascript.md
index de572d57a2f..addbae86356 100644
--- a/static/usage/v6/datetime/buttons/customizing-button-texts/javascript.md
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/javascript.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  show-default-buttons="true"
-  done-text="All set"
-  cancel-text="Never mind"
-></ion-datetime>
+<ion-datetime show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
 ```
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/react.md b/static/usage/v6/datetime/buttons/customizing-button-texts/react.md
index 25a59a34170..8806828082b 100644
--- a/static/usage/v6/datetime/buttons/customizing-button-texts/react.md
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/react.md
@@ -2,14 +2,7 @@
 import React, { useRef } from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime
-      showDefaultButtons={true}
-      doneText="All set"
-      cancelText="Never mind"
-    >
-    </IonDatetime>
-  );
+  return <IonDatetime showDefaultButtons={true} doneText="All set" cancelText="Never mind"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v6/datetime/buttons/customizing-button-texts/vue.md
index 2afdb6fe9a8..fddaa53fac1 100644
--- a/static/usage/v6/datetime/buttons/customizing-button-texts/vue.md
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    :show-default-buttons="true"
-    done-text="All set"
-    cancel-text="Never mind"
-  ></ion-datetime>
+  <ion-datetime :show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
 </template>
 
 <script lang="ts">
@@ -12,7 +8,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonDatetime }
+    components: { IonDatetime },
   });
 </script>
 ```
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/demo.html b/static/usage/v6/datetime/buttons/customizing-buttons/demo.html
index d0ce780da3d..4c54697a8db 100644
--- a/static/usage/v6/datetime/buttons/customizing-buttons/demo.html
+++ b/static/usage/v6/datetime/buttons/customizing-buttons/demo.html
@@ -1,40 +1,38 @@
 <!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>
 
-<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>
 
-<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
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/react.md b/static/usage/v6/datetime/buttons/customizing-buttons/react.md
index 6c47f3d800c..20435641f42 100644
--- a/static/usage/v6/datetime/buttons/customizing-buttons/react.md
+++ b/static/usage/v6/datetime/buttons/customizing-buttons/react.md
@@ -5,19 +5,25 @@ 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>
+        <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>
   );
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/vue.md b/static/usage/v6/datetime/buttons/customizing-buttons/vue.md
index 87d19a3754b..4d1408b7ab4 100644
--- a/static/usage/v6/datetime/buttons/customizing-buttons/vue.md
+++ b/static/usage/v6/datetime/buttons/customizing-buttons/vue.md
@@ -20,8 +20,8 @@
       const reset = () => datetime.value.$el.reset();
       const cancel = () => datetime.value.$el.cancel();
       const confirm = () => datetime.value.$el.confirm();
-      return { datetime, reset, cancel, confirm }
-    }
+      return { datetime, reset, cancel, confirm };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html
index 54b26b53f90..8816ed76dfc 100644
--- a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html
+++ b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html
@@ -1,30 +1,28 @@
 <!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>
 
-<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
+  <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/v6/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/react.md
index 4faa415f624..9409dc13911 100644
--- a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/react.md
+++ b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime showDefaultButtons={true}></IonDatetime>
-  );
+  return <IonDatetime showDefaultButtons={true}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/date-constraints/advanced/demo.html b/static/usage/v6/datetime/date-constraints/advanced/demo.html
index b7650f3740d..66626d946ce 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/demo.html
+++ b/static/usage/v6/datetime/date-constraints/advanced/demo.html
@@ -1,43 +1,41 @@
 <!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>
 
-<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>
-  <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();
 
-  <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
+        /**
+         * Date will be enabled if it is not
+         * Sunday or Saturday
+         */
+        return utcDay !== 0 && utcDay !== 6;
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/datetime/date-constraints/advanced/javascript.md b/static/usage/v6/datetime/date-constraints/advanced/javascript.md
index b14ba47ffbe..60a991725a0 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/javascript.md
+++ b/static/usage/v6/datetime/date-constraints/advanced/javascript.md
@@ -12,6 +12,6 @@
      * Sunday or Saturday
      */
     return utcDay !== 0 && utcDay !== 6;
-  }
+  };
 </script>
 ```
diff --git a/static/usage/v6/datetime/date-constraints/advanced/react.md b/static/usage/v6/datetime/date-constraints/advanced/react.md
index 925f97f34cc..ece5aef6c9e 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/react.md
+++ b/static/usage/v6/datetime/date-constraints/advanced/react.md
@@ -5,17 +5,15 @@ 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>
-  );
+  return <IonDatetime isDateEnabled={isWeekday}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/date-constraints/advanced/vue.md b/static/usage/v6/datetime/date-constraints/advanced/vue.md
index 3dd1a8dc526..afd310f0867 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/vue.md
+++ b/static/usage/v6/datetime/date-constraints/advanced/vue.md
@@ -13,16 +13,16 @@
       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 }
-    }
+      };
+
+      return { isWeekday };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/datetime/date-constraints/max-min/angular.md b/static/usage/v6/datetime/date-constraints/max-min/angular.md
index 58583fe712d..f37914bd457 100644
--- a/static/usage/v6/datetime/date-constraints/max-min/angular.md
+++ b/static/usage/v6/datetime/date-constraints/max-min/angular.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  value="2022-04-21T00:00:00"
-  min="2022-03-01T00:00:00"
-  max="2022-05-31T23:59:59"
-></ion-datetime>
+<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/v6/datetime/date-constraints/max-min/demo.html b/static/usage/v6/datetime/date-constraints/max-min/demo.html
index b1f9e57810d..a2a30cef0c3 100644
--- a/static/usage/v6/datetime/date-constraints/max-min/demo.html
+++ b/static/usage/v6/datetime/date-constraints/max-min/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/date-constraints/max-min/javascript.md b/static/usage/v6/datetime/date-constraints/max-min/javascript.md
index 58583fe712d..f37914bd457 100644
--- a/static/usage/v6/datetime/date-constraints/max-min/javascript.md
+++ b/static/usage/v6/datetime/date-constraints/max-min/javascript.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  value="2022-04-21T00:00:00"
-  min="2022-03-01T00:00:00"
-  max="2022-05-31T23:59:59"
-></ion-datetime>
+<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/v6/datetime/date-constraints/max-min/react.md b/static/usage/v6/datetime/date-constraints/max-min/react.md
index 356cf7b117a..e2493659c23 100644
--- a/static/usage/v6/datetime/date-constraints/max-min/react.md
+++ b/static/usage/v6/datetime/date-constraints/max-min/react.md
@@ -2,13 +2,7 @@
 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>
-  );
+  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/v6/datetime/date-constraints/max-min/vue.md b/static/usage/v6/datetime/date-constraints/max-min/vue.md
index a0d236a8604..32fec242e0a 100644
--- a/static/usage/v6/datetime/date-constraints/max-min/vue.md
+++ b/static/usage/v6/datetime/date-constraints/max-min/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    value="2022-04-21T00:00:00"
-    min="2022-03-01T00:00:00"
-    max="2022-05-31T23:59:59"
-  ></ion-datetime>
+  <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">
diff --git a/static/usage/v6/datetime/date-constraints/values/angular.md b/static/usage/v6/datetime/date-constraints/values/angular.md
index de86842994a..ab31d1fad20 100644
--- a/static/usage/v6/datetime/date-constraints/values/angular.md
+++ b/static/usage/v6/datetime/date-constraints/values/angular.md
@@ -1,6 +1,3 @@
 ```html
-<ion-datetime
-  minuteValues="0,15,30,45"
-  dayValues="5,10,15,20,25,30"
-></ion-datetime>
+<ion-datetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></ion-datetime>
 ```
diff --git a/static/usage/v6/datetime/date-constraints/values/demo.html b/static/usage/v6/datetime/date-constraints/values/demo.html
index ba560da4969..5c551153b99 100644
--- a/static/usage/v6/datetime/date-constraints/values/demo.html
+++ b/static/usage/v6/datetime/date-constraints/values/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/date-constraints/values/javascript.md b/static/usage/v6/datetime/date-constraints/values/javascript.md
index 5081a44f6f5..670f19ca6ea 100644
--- a/static/usage/v6/datetime/date-constraints/values/javascript.md
+++ b/static/usage/v6/datetime/date-constraints/values/javascript.md
@@ -1,6 +1,3 @@
 ```html
-<ion-datetime
-  minute-values="0,15,30,45"
-  day-values="5,10,15,20,25,30"
-></ion-datetime>
+<ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
 ```
diff --git a/static/usage/v6/datetime/date-constraints/values/react.md b/static/usage/v6/datetime/date-constraints/values/react.md
index 38328d17045..74516943d6e 100644
--- a/static/usage/v6/datetime/date-constraints/values/react.md
+++ b/static/usage/v6/datetime/date-constraints/values/react.md
@@ -2,12 +2,7 @@
 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>
-  );
+  return <IonDatetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/date-constraints/values/vue.md b/static/usage/v6/datetime/date-constraints/values/vue.md
index 743cbb9e541..cf1d0eaaa89 100644
--- a/static/usage/v6/datetime/date-constraints/values/vue.md
+++ b/static/usage/v6/datetime/date-constraints/values/vue.md
@@ -1,9 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    minute-values="0,15,30,45"
-    day-values="5,10,15,20,25,30"
-  ></ion-datetime>
+  <ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
index 46de9b8c9a6..25c15ca64c7 100644
--- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  presentation="date"
-  value="2023-01-01"
-  [highlightedDates]="highlightedDates"
-></ion-datetime>
+<ion-datetime presentation="date" value="2023-01-01" [highlightedDates]="highlightedDates"></ion-datetime>
 ```
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
index 4b46ab4c705..4ca93b85f44 100644
--- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -25,8 +25,8 @@ export class ExampleComponent {
     {
       date: '2023-01-23',
       textColor: 'rgb(68, 10, 184)',
-      backgroundColor: 'rgb(211, 200, 229)'
-    }
+      backgroundColor: 'rgb(211, 200, 229)',
+    },
   ];
 }
 ```
diff --git a/static/usage/v6/datetime/highlightedDates/array/demo.html b/static/usage/v6/datetime/highlightedDates/array/demo.html
index d8faeba5b8b..ee40688e121 100644
--- a/static/usage/v6/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v6/datetime/highlightedDates/array/demo.html
@@ -1,55 +1,59 @@
 <!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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
-  <style>
-    ion-datetime {
-      width: 350px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const datetime = document.querySelector('ion-datetime');
-    datetime.highlightedDates = [
-      {
-        date: '2023-01-05',
-        textColor: '#800080',
-        backgroundColor: '#ffc0cb',
-      },
-      {
-        date: '2023-01-10',
-        textColor: '#09721b',
-        backgroundColor: '#c8e5d0',
-      },
-      {
-        date: '2023-01-20',
-        textColor: 'var(--ion-color-secondary-contrast)',
-        backgroundColor: 'var(--ion-color-secondary)',
-      },
-      {
-        date: '2023-01-23',
-        textColor: 'rgb(68, 10, 184)',
-        backgroundColor: 'rgb(211, 200, 229)'
+  <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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css"
+    />
+    <style>
+      ion-datetime {
+        width: 350px;
       }
-    ];
-  </script>
-</body>
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
 
-</html>
\ No newline at end of file
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.highlightedDates = [
+        {
+          date: '2023-01-05',
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          textColor: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        },
+        {
+          date: '2023-01-23',
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)',
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/datetime/highlightedDates/array/javascript.md b/static/usage/v6/datetime/highlightedDates/array/javascript.md
index 5a702fbfab1..a27ff554ee2 100644
--- a/static/usage/v6/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/array/javascript.md
@@ -22,8 +22,8 @@
     {
       date: '2023-01-23',
       textColor: 'rgb(68, 10, 184)',
-      backgroundColor: 'rgb(211, 200, 229)'
-    }
+      backgroundColor: 'rgb(211, 200, 229)',
+    },
   ];
 </script>
 ```
diff --git a/static/usage/v6/datetime/highlightedDates/array/react.md b/static/usage/v6/datetime/highlightedDates/array/react.md
index a9ef5c776d9..4d8d9258f63 100644
--- a/static/usage/v6/datetime/highlightedDates/array/react.md
+++ b/static/usage/v6/datetime/highlightedDates/array/react.md
@@ -25,8 +25,8 @@ function Example() {
         {
           date: '2023-01-23',
           textColor: 'rgb(68, 10, 184)',
-          backgroundColor: 'rgb(211, 200, 229)'
-        }
+          backgroundColor: 'rgb(211, 200, 229)',
+        },
       ]}
     ></IonDatetime>
   );
diff --git a/static/usage/v6/datetime/highlightedDates/array/vue.md b/static/usage/v6/datetime/highlightedDates/array/vue.md
index 62dbec39055..408f58f2833 100644
--- a/static/usage/v6/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v6/datetime/highlightedDates/array/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    presentation="date"
-    value="2023-01-01"
-    :highlighted-dates="highlightedDates"
-  ></ion-datetime>
+  <ion-datetime presentation="date" value="2023-01-01" :highlighted-dates="highlightedDates"></ion-datetime>
 </template>
 
 <script lang="ts">
@@ -33,12 +29,12 @@
         {
           date: '2023-01-23',
           textColor: 'rgb(68, 10, 184)',
-          backgroundColor: 'rgb(211, 200, 229)'
-        }
+          backgroundColor: 'rgb(211, 200, 229)',
+        },
       ];
-      
-      return { highlightedDates }
-    }
+
+      return { highlightedDates };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
index 7186ae3cc64..60f9c700d05 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -10,14 +10,14 @@ export class ExampleComponent {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
-    if(utcDay % 5 === 0) {
+    if (utcDay % 5 === 0) {
       return {
         textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
-    if(utcDay % 3 === 0) {
+    if (utcDay % 3 === 0) {
       return {
         textColor: 'var(--ion-color-secondary-contrast)',
         backgroundColor: 'var(--ion-color-secondary)',
diff --git a/static/usage/v6/datetime/highlightedDates/callback/demo.html b/static/usage/v6/datetime/highlightedDates/callback/demo.html
index 50c62e09c5f..b9528578167 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v6/datetime/highlightedDates/callback/demo.html
@@ -1,53 +1,57 @@
 <!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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css"
+    />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/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>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
 
-  <script>
-    const datetime = document.querySelector('ion-datetime');
-    datetime.highlightedDates = (isoString) => {
-      const date = new Date(isoString);
-      const utcDay = date.getUTCDate();
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.highlightedDates = (isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
 
-      if(utcDay % 5 === 0) {
-        return {
-          textColor: '#800080',
-          backgroundColor: '#ffc0cb',
-        };
-      }
-
-      if(utcDay % 3 === 0) {
-        return {
-          textColor: 'var(--ion-color-secondary-contrast)',
-          backgroundColor: 'var(--ion-color-secondary)',
-        };
-      }
+        if (utcDay % 5 === 0) {
+          return {
+            textColor: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
 
-      return undefined;
-    };
-  </script>
-</body>
+        if (utcDay % 3 === 0) {
+          return {
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
+          };
+        }
 
-</html>
\ No newline at end of file
+        return undefined;
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/datetime/highlightedDates/callback/javascript.md b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
index 270967cccd8..9041810960b 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
@@ -7,14 +7,14 @@
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
-    if(utcDay % 5 === 0) {
+    if (utcDay % 5 === 0) {
       return {
         textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
-    if(utcDay % 3 === 0) {
+    if (utcDay % 3 === 0) {
       return {
         textColor: 'var(--ion-color-secondary-contrast)',
         backgroundColor: 'var(--ion-color-secondary)',
diff --git a/static/usage/v6/datetime/highlightedDates/callback/react.md b/static/usage/v6/datetime/highlightedDates/callback/react.md
index 6830e55eeff..6543a1366ca 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/react.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/react.md
@@ -9,14 +9,14 @@ function Example() {
         const date = new Date(isoString);
         const utcDay = date.getUTCDate();
 
-        if(utcDay % 5 === 0) {
+        if (utcDay % 5 === 0) {
           return {
             textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
-        if(utcDay % 3 === 0) {
+        if (utcDay % 3 === 0) {
           return {
             textColor: 'var(--ion-color-secondary-contrast)',
             backgroundColor: 'var(--ion-color-secondary)',
diff --git a/static/usage/v6/datetime/highlightedDates/callback/vue.md b/static/usage/v6/datetime/highlightedDates/callback/vue.md
index 54873e03eaa..e916b2cef1b 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/vue.md
@@ -14,14 +14,14 @@
         const date = new Date(isoString);
         const utcDay = date.getUTCDate();
 
-        if(utcDay % 5 === 0) {
+        if (utcDay % 5 === 0) {
           return {
             textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
-        if(utcDay % 3 === 0) {
+        if (utcDay % 3 === 0) {
           return {
             textColor: 'var(--ion-color-secondary-contrast)',
             backgroundColor: 'var(--ion-color-secondary)',
@@ -31,8 +31,8 @@
         return undefined;
       };
 
-      return { highlightedDates }
-    }
+      return { highlightedDates };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/datetime/localization/custom-locale/demo.html b/static/usage/v6/datetime/localization/custom-locale/demo.html
index 70e266f3402..80b07292725 100644
--- a/static/usage/v6/datetime/localization/custom-locale/demo.html
+++ b/static/usage/v6/datetime/localization/custom-locale/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/localization/custom-locale/react.md b/static/usage/v6/datetime/localization/custom-locale/react.md
index 729e42be9b8..f543b588cf4 100644
--- a/static/usage/v6/datetime/localization/custom-locale/react.md
+++ b/static/usage/v6/datetime/localization/custom-locale/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime locale="es-ES"></IonDatetime>
-  );
+  return <IonDatetime locale="es-ES"></IonDatetime>;
 }
 export default Example;
 ```
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
index ce555ed4b74..1cd91488d6c 100644
--- a/static/usage/v6/datetime/localization/first-day-of-week/demo.html
+++ b/static/usage/v6/datetime/localization/first-day-of-week/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/localization/first-day-of-week/react.md b/static/usage/v6/datetime/localization/first-day-of-week/react.md
index d15a99abb10..b39bb91a837 100644
--- a/static/usage/v6/datetime/localization/first-day-of-week/react.md
+++ b/static/usage/v6/datetime/localization/first-day-of-week/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime firstDayOfWeek={1}></IonDatetime>
-  );
+  return <IonDatetime firstDayOfWeek={1}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/localization/hour-cycle/demo.html b/static/usage/v6/datetime/localization/hour-cycle/demo.html
index db65b072c82..16b05daf24e 100644
--- a/static/usage/v6/datetime/localization/hour-cycle/demo.html
+++ b/static/usage/v6/datetime/localization/hour-cycle/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/localization/hour-cycle/react.md b/static/usage/v6/datetime/localization/hour-cycle/react.md
index fc2887e67f8..e05544cd3cc 100644
--- a/static/usage/v6/datetime/localization/hour-cycle/react.md
+++ b/static/usage/v6/datetime/localization/hour-cycle/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime locale="en-GB" hourCycle="h12"></IonDatetime>
-  );
+  return <IonDatetime locale="en-GB" hourCycle="h12"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/localization/locale-extension-tags/demo.html b/static/usage/v6/datetime/localization/locale-extension-tags/demo.html
index 6d7328eddf6..2b5bfc90535 100644
--- a/static/usage/v6/datetime/localization/locale-extension-tags/demo.html
+++ b/static/usage/v6/datetime/localization/locale-extension-tags/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/localization/locale-extension-tags/react.md b/static/usage/v6/datetime/localization/locale-extension-tags/react.md
index 227a0261434..d945f768d3a 100644
--- a/static/usage/v6/datetime/localization/locale-extension-tags/react.md
+++ b/static/usage/v6/datetime/localization/locale-extension-tags/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime locale="en-GB-u-hc-h12"></IonDatetime>
-  );
+  return <IonDatetime locale="en-GB-u-hc-h12"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/localization/time-label/demo.html b/static/usage/v6/datetime/localization/time-label/demo.html
index 8ad93461f78..0088962b7b1 100644
--- a/static/usage/v6/datetime/localization/time-label/demo.html
+++ b/static/usage/v6/datetime/localization/time-label/demo.html
@@ -1,31 +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>
 
-<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
+  <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/v6/datetime/multiple/angular.md b/static/usage/v6/datetime/multiple/angular.md
index 673f5b03e59..e26fe9e931d 100644
--- a/static/usage/v6/datetime/multiple/angular.md
+++ b/static/usage/v6/datetime/multiple/angular.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  presentation="date"
-  [multiple]="true"
-  [value]="['2022-06-03', '2022-06-13', '2022-06-29']"
-></ion-datetime>
+<ion-datetime presentation="date" [multiple]="true" [value]="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
 ```
diff --git a/static/usage/v6/datetime/multiple/demo.html b/static/usage/v6/datetime/multiple/demo.html
index 43edb188016..e63a3f28d22 100644
--- a/static/usage/v6/datetime/multiple/demo.html
+++ b/static/usage/v6/datetime/multiple/demo.html
@@ -1,34 +1,32 @@
 <!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>
 
-<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>
 
-<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
+    <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/v6/datetime/multiple/react.md b/static/usage/v6/datetime/multiple/react.md
index edcf933f530..87028027d47 100644
--- a/static/usage/v6/datetime/multiple/react.md
+++ b/static/usage/v6/datetime/multiple/react.md
@@ -6,15 +6,11 @@ function Example() {
   const datetime = useRef<null | HTMLIonDatetimeElement>(null);
 
   useEffect(() => {
-    if(!datetime.current) return;
+    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>;
+  return <IonDatetime ref={datetime} presentation="date" multiple={true}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/multiple/vue.md b/static/usage/v6/datetime/multiple/vue.md
index 163831a3d81..837fc7e2f9f 100644
--- a/static/usage/v6/datetime/multiple/vue.md
+++ b/static/usage/v6/datetime/multiple/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    presentation="date"
-    :multiple="true"
-    :value="['2022-06-03', '2022-06-13', '2022-06-29']"
-  ></ion-datetime>
+  <ion-datetime presentation="date" :multiple="true" :value="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v6/datetime/presentation/date/demo.html b/static/usage/v6/datetime/presentation/date/demo.html
index ca76bcec306..912ea84b01a 100644
--- a/static/usage/v6/datetime/presentation/date/demo.html
+++ b/static/usage/v6/datetime/presentation/date/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/presentation/date/react.md b/static/usage/v6/datetime/presentation/date/react.md
index 333aadfb58d..72e24d86874 100644
--- a/static/usage/v6/datetime/presentation/date/react.md
+++ b/static/usage/v6/datetime/presentation/date/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="date"></IonDatetime>
-  );
+  return <IonDatetime presentation="date"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/presentation/month-and-year/demo.html b/static/usage/v6/datetime/presentation/month-and-year/demo.html
index 58fa960c863..77b0a7d3b54 100644
--- a/static/usage/v6/datetime/presentation/month-and-year/demo.html
+++ b/static/usage/v6/datetime/presentation/month-and-year/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/presentation/month-and-year/react.md b/static/usage/v6/datetime/presentation/month-and-year/react.md
index 346ad116b68..f140c4b09c0 100644
--- a/static/usage/v6/datetime/presentation/month-and-year/react.md
+++ b/static/usage/v6/datetime/presentation/month-and-year/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="month-year"></IonDatetime>
-  );
+  return <IonDatetime presentation="month-year"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/presentation/time/demo.html b/static/usage/v6/datetime/presentation/time/demo.html
index 7ea21d3f4d5..a8413b6fde8 100644
--- a/static/usage/v6/datetime/presentation/time/demo.html
+++ b/static/usage/v6/datetime/presentation/time/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/presentation/time/react.md b/static/usage/v6/datetime/presentation/time/react.md
index 934c3221112..30e0e206fbc 100644
--- a/static/usage/v6/datetime/presentation/time/react.md
+++ b/static/usage/v6/datetime/presentation/time/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="time"></IonDatetime>
-  );
+  return <IonDatetime presentation="time"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/presentation/wheel/demo.html b/static/usage/v6/datetime/presentation/wheel/demo.html
index 5b2028d4a6b..dd37eccbbd2 100644
--- a/static/usage/v6/datetime/presentation/wheel/demo.html
+++ b/static/usage/v6/datetime/presentation/wheel/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/presentation/wheel/react.md b/static/usage/v6/datetime/presentation/wheel/react.md
index 49f231b6966..fc7873b4765 100644
--- a/static/usage/v6/datetime/presentation/wheel/react.md
+++ b/static/usage/v6/datetime/presentation/wheel/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="date-time" preferWheel={true}></IonDatetime>
-  );
+  return <IonDatetime presentation="date-time" preferWheel={true}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/datetime/theming/demo.html b/static/usage/v6/datetime/theming/demo.html
index e50a5576c63..872c50f1659 100644
--- a/static/usage/v6/datetime/theming/demo.html
+++ b/static/usage/v6/datetime/theming/demo.html
@@ -1,78 +1,76 @@
 <!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;
 
-<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-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-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-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;
 
-    ion-datetime {
-      --background: #fff1f2;
-      --background-rgb: 255, 241, 242;
+        width: 350px;
 
-      width: 350px;
+        border-radius: 16px;
+        box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+      }
+    </style>
+  </head>
 
-      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
+  <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/v6/datetime/theming/javascript.md b/static/usage/v6/datetime/theming/javascript.md
index b01585db44e..3da768ccbb4 100644
--- a/static/usage/v6/datetime/theming/javascript.md
+++ b/static/usage/v6/datetime/theming/javascript.md
@@ -4,15 +4,15 @@
 <style>
   :root {
     --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131,24,67;
+    --ion-color-rose-rgb: 131, 24, 67;
     --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255,255,255;
+    --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-text-color-rgb: 136, 19, 55;
+
     --ion-color-step-50: #f9e6e9;
     --ion-color-step-100: #f3dbdf;
     --ion-color-step-150: #edd0d6;
@@ -33,7 +33,7 @@
     --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);
@@ -42,11 +42,11 @@
     --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;
-    
+    --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/v6/datetime/theming/react/main_css.md b/static/usage/v6/datetime/theming/react/main_css.md
index 374f851b5ce..dccf6c7d370 100644
--- a/static/usage/v6/datetime/theming/react/main_css.md
+++ b/static/usage/v6/datetime/theming/react/main_css.md
@@ -1,14 +1,14 @@
 ```css
 :root {
   --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131,24,67;
+  --ion-color-rose-rgb: 131, 24, 67;
   --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255,255,255;
+  --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-text-color-rgb: 136, 19, 55;
 
   --ion-color-step-50: #f9e6e9;
   --ion-color-step-100: #f3dbdf;
@@ -42,9 +42,9 @@
 
 ion-datetime {
   --background: #fff1f2;
-  --background-rgb: 255,241,242;
-  
+  --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/v6/datetime/theming/vue.md b/static/usage/v6/datetime/theming/vue.md
index 0ba14641daa..32e682cfbc9 100644
--- a/static/usage/v6/datetime/theming/vue.md
+++ b/static/usage/v6/datetime/theming/vue.md
@@ -15,15 +15,15 @@
 <style>
   :root {
     --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131,24,67;
+    --ion-color-rose-rgb: 131, 24, 67;
     --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255,255,255;
+    --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-text-color-rgb: 136, 19, 55;
+
     --ion-color-step-50: #f9e6e9;
     --ion-color-step-100: #f3dbdf;
     --ion-color-step-150: #edd0d6;
@@ -44,7 +44,7 @@
     --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);
@@ -53,11 +53,11 @@
     --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;
-    
+    --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/v6/datetime/title/customizing-title/demo.html b/static/usage/v6/datetime/title/customizing-title/demo.html
index ab7ead5aca6..fad01ac953d 100644
--- a/static/usage/v6/datetime/title/customizing-title/demo.html
+++ b/static/usage/v6/datetime/title/customizing-title/demo.html
@@ -1,31 +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>
 
-<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
+  <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/v6/datetime/title/showing-default-title/demo.html b/static/usage/v6/datetime/title/showing-default-title/demo.html
index 3d725f9eb92..7feec34a0ff 100644
--- a/static/usage/v6/datetime/title/showing-default-title/demo.html
+++ b/static/usage/v6/datetime/title/showing-default-title/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/datetime/title/showing-default-title/react.md b/static/usage/v6/datetime/title/showing-default-title/react.md
index f5a7c681c22..f04d7d55a36 100644
--- a/static/usage/v6/datetime/title/showing-default-title/react.md
+++ b/static/usage/v6/datetime/title/showing-default-title/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime showDefaultTitle={true}></IonDatetime>
-  );
+  return <IonDatetime showDefaultTitle={true}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/fab/basic/demo.html b/static/usage/v6/fab/basic/demo.html
index bf3ddf18220..8ce2cca42ed 100644
--- a/static/usage/v6/fab/basic/demo.html
+++ b/static/usage/v6/fab/basic/demo.html
@@ -1,29 +1,26 @@
 <!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>
 
-<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
+  <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/v6/fab/basic/vue.md b/static/usage/v6/fab/basic/vue.md
index e6b99476bd0..822821e7289 100644
--- a/static/usage/v6/fab/basic/vue.md
+++ b/static/usage/v6/fab/basic/vue.md
@@ -15,8 +15,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add }
-    }
+      return { add };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/fab/button-sizing/demo.html b/static/usage/v6/fab/button-sizing/demo.html
index e3595399219..afa6580839f 100644
--- a/static/usage/v6/fab/button-sizing/demo.html
+++ b/static/usage/v6/fab/button-sizing/demo.html
@@ -1,40 +1,37 @@
 <!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>
 
-<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>
+  <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-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
+            <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/v6/fab/button-sizing/vue.md b/static/usage/v6/fab/button-sizing/vue.md
index bf292433d7e..5ea6d8adb56 100644
--- a/static/usage/v6/fab/button-sizing/vue.md
+++ b/static/usage/v6/fab/button-sizing/vue.md
@@ -26,8 +26,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, colorPalette, document, globe }
-    }
+      return { add, colorPalette, document, globe };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/fab/list-side/demo.html b/static/usage/v6/fab/list-side/demo.html
index 2b24622135a..8418e06d55e 100644
--- a/static/usage/v6/fab/list-side/demo.html
+++ b/static/usage/v6/fab/list-side/demo.html
@@ -1,55 +1,52 @@
 <!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>
 
-<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">
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-fab slot="fixed" horizontal="center" vertical="center">
             <ion-fab-button>
-              <ion-icon name="chevron-forward"></ion-icon>
+              <ion-icon name="add"></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
+            <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/v6/fab/list-side/vue.md b/static/usage/v6/fab/list-side/vue.md
index 2c42562587c..459ea75e845 100644
--- a/static/usage/v6/fab/list-side/vue.md
+++ b/static/usage/v6/fab/list-side/vue.md
@@ -41,8 +41,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, chevronBack, chevronDown, chevronForward, chevronUp }
-    }
+      return { add, chevronBack, chevronDown, chevronForward, chevronUp };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/fab/positioning/angular.md b/static/usage/v6/fab/positioning/angular.md
index e28150bea57..7bca2f10d2f 100644
--- a/static/usage/v6/fab/positioning/angular.md
+++ b/static/usage/v6/fab/positioning/angular.md
@@ -38,7 +38,7 @@
       </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>
diff --git a/static/usage/v6/fab/positioning/demo.html b/static/usage/v6/fab/positioning/demo.html
index bb00b1cfdc4..b2d599be436 100644
--- a/static/usage/v6/fab/positioning/demo.html
+++ b/static/usage/v6/fab/positioning/demo.html
@@ -1,77 +1,74 @@
 <!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>
 
-<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>
+  <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="color-palette"></ion-icon>
+            <ion-icon name="chevron-forward-circle"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="globe"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
+          <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 slot="fixed" vertical="top" horizontal="end" edge="true">
           <ion-fab-button>
-            <ion-icon name="color-palette"></ion-icon>
+            <ion-icon name="chevron-down-circle"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="globe"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
+          <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 slot="fixed" vertical="bottom" horizontal="end">
           <ion-fab-button>
-            <ion-icon name="color-palette"></ion-icon>
+            <ion-icon name="chevron-up-circle"></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
+          <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/v6/fab/positioning/javascript.md b/static/usage/v6/fab/positioning/javascript.md
index 27dec2c07b8..d9d93856bcd 100644
--- a/static/usage/v6/fab/positioning/javascript.md
+++ b/static/usage/v6/fab/positioning/javascript.md
@@ -38,7 +38,7 @@
       </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>
diff --git a/static/usage/v6/fab/positioning/react.md b/static/usage/v6/fab/positioning/react.md
index c8eb95d0166..95253561d9d 100644
--- a/static/usage/v6/fab/positioning/react.md
+++ b/static/usage/v6/fab/positioning/react.md
@@ -1,7 +1,14 @@
 ```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';
+import {
+  chevronDownCircle,
+  chevronForwardCircle,
+  chevronUpCircle,
+  colorPalette,
+  document,
+  globe,
+} from 'ionicons/icons';
 
 function Example() {
   return (
@@ -45,7 +52,7 @@ function Example() {
             </IonFabButton>
           </IonFabList>
         </IonFab>
-      
+
         <IonFab slot="fixed" vertical="bottom" horizontal="end">
           <IonFabButton>
             <IonIcon icon={chevronUpCircle}></IonIcon>
diff --git a/static/usage/v6/fab/positioning/vue.md b/static/usage/v6/fab/positioning/vue.md
index f3421f2b2ea..baa2f82e882 100644
--- a/static/usage/v6/fab/positioning/vue.md
+++ b/static/usage/v6/fab/positioning/vue.md
@@ -39,7 +39,7 @@
         </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>
@@ -61,14 +61,21 @@
 
 <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 {
+    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 }
-    }
+      return { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/fab/theming/colors/demo.html b/static/usage/v6/fab/theming/colors/demo.html
index 7f1b059484c..eaa7d470781 100644
--- a/static/usage/v6/fab/theming/colors/demo.html
+++ b/static/usage/v6/fab/theming/colors/demo.html
@@ -1,55 +1,52 @@
 <!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>
 
-<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>
+  <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>
-          <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
+            <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/v6/fab/theming/colors/vue.md b/static/usage/v6/fab/theming/colors/vue.md
index 44968e6cb4c..f37cb9707b3 100644
--- a/static/usage/v6/fab/theming/colors/vue.md
+++ b/static/usage/v6/fab/theming/colors/vue.md
@@ -41,8 +41,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, chevronBack, chevronDown, chevronForward, chevronUp }
-    }
+      return { add, chevronBack, chevronDown, chevronForward, chevronUp };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/v6/fab/theming/css-custom-properties/angular/example_component_css.md
index 2e8c0c2bb93..ce1d9d06816 100644
--- a/static/usage/v6/fab/theming/css-custom-properties/angular/example_component_css.md
+++ b/static/usage/v6/fab/theming/css-custom-properties/angular/example_component_css.md
@@ -4,7 +4,7 @@ ion-fab-button {
   --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);
+  --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   --color: black;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/fab/theming/css-custom-properties/demo.html b/static/usage/v6/fab/theming/css-custom-properties/demo.html
index 90b398450b3..d18012d652e 100644
--- a/static/usage/v6/fab/theming/css-custom-properties/demo.html
+++ b/static/usage/v6/fab/theming/css-custom-properties/demo.html
@@ -1,50 +1,48 @@
 <!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>
-  <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, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+        --color: black;
+      }
+    </style>
+  </head>
 
-  <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>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-fab>
             <ion-fab-button>
-              <ion-icon name="color-palette"></ion-icon>
+              <ion-icon name="add"></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
+            <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/v6/fab/theming/css-custom-properties/javascript.md b/static/usage/v6/fab/theming/css-custom-properties/javascript.md
index 45d5f5e1243..55df4e255bd 100644
--- a/static/usage/v6/fab/theming/css-custom-properties/javascript.md
+++ b/static/usage/v6/fab/theming/css-custom-properties/javascript.md
@@ -5,7 +5,7 @@
     --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);
+    --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     --color: black;
   }
 </style>
diff --git a/static/usage/v6/fab/theming/css-custom-properties/react/main_css.md b/static/usage/v6/fab/theming/css-custom-properties/react/main_css.md
index 2e8c0c2bb93..ce1d9d06816 100644
--- a/static/usage/v6/fab/theming/css-custom-properties/react/main_css.md
+++ b/static/usage/v6/fab/theming/css-custom-properties/react/main_css.md
@@ -4,7 +4,7 @@ ion-fab-button {
   --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);
+  --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   --color: black;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/fab/theming/css-custom-properties/vue.md b/static/usage/v6/fab/theming/css-custom-properties/vue.md
index 373d97cb6ec..00d3b6c87f8 100644
--- a/static/usage/v6/fab/theming/css-custom-properties/vue.md
+++ b/static/usage/v6/fab/theming/css-custom-properties/vue.md
@@ -26,8 +26,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, colorPalette, document, globe }
-    }
+      return { add, colorPalette, document, globe };
+    },
   });
 </script>
 
@@ -37,7 +37,7 @@
     --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);
+    --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     --color: black;
   }
 </style>
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_css.md
index b480b0cc455..4bb8b96988c 100644
--- a/static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_css.md
+++ b/static/usage/v6/fab/theming/css-shadow-parts/angular/example_component_css.md
@@ -2,10 +2,10 @@
 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);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   color: black;
 }
-    
+
 ion-fab-button::part(native):hover::after {
   background-color: #a3e681;
 }
@@ -13,4 +13,4 @@ ion-fab-button::part(native):hover::after {
 ion-fab-button::part(native):active::after {
   background-color: #87d361;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/demo.html b/static/usage/v6/fab/theming/css-shadow-parts/demo.html
index 40c416ab32c..86695bb5aed 100644
--- a/static/usage/v6/fab/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/fab/theming/css-shadow-parts/demo.html
@@ -1,56 +1,54 @@
 <!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>
-  <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, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+        color: black;
+      }
 
-  <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):hover::after {
-      background-color: #a3e681;
-    }
+      ion-fab-button::part(native):active::after {
+        background-color: #87d361;
+      }
+    </style>
+  </head>
 
-    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>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-fab>
             <ion-fab-button>
-              <ion-icon name="color-palette"></ion-icon>
+              <ion-icon name="add"></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
+            <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/v6/fab/theming/css-shadow-parts/javascript.md b/static/usage/v6/fab/theming/css-shadow-parts/javascript.md
index 9ca1aa39119..19c1441fe2f 100644
--- a/static/usage/v6/fab/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v6/fab/theming/css-shadow-parts/javascript.md
@@ -3,10 +3,10 @@
   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);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     color: black;
   }
-    
+
   ion-fab-button::part(native):hover::after {
     background-color: #a3e681;
   }
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/fab/theming/css-shadow-parts/react/main_css.md
index b480b0cc455..4bb8b96988c 100644
--- a/static/usage/v6/fab/theming/css-shadow-parts/react/main_css.md
+++ b/static/usage/v6/fab/theming/css-shadow-parts/react/main_css.md
@@ -2,10 +2,10 @@
 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);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   color: black;
 }
-    
+
 ion-fab-button::part(native):hover::after {
   background-color: #a3e681;
 }
@@ -13,4 +13,4 @@ ion-fab-button::part(native):hover::after {
 ion-fab-button::part(native):active::after {
   background-color: #87d361;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/vue.md b/static/usage/v6/fab/theming/css-shadow-parts/vue.md
index 9c9f1559805..aee0d929a06 100644
--- a/static/usage/v6/fab/theming/css-shadow-parts/vue.md
+++ b/static/usage/v6/fab/theming/css-shadow-parts/vue.md
@@ -26,8 +26,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, colorPalette, document, globe }
-    }
+      return { add, colorPalette, document, globe };
+    },
   });
 </script>
 
@@ -35,10 +35,10 @@
   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);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     color: black;
   }
-    
+
   ion-fab-button::part(native):hover::after {
     background-color: #a3e681;
   }
diff --git a/static/usage/v6/footer/basic/demo.html b/static/usage/v6/footer/basic/demo.html
index 205a6543d4b..890648bbd25 100644
--- a/static/usage/v6/footer/basic/demo.html
+++ b/static/usage/v6/footer/basic/demo.html
@@ -1,28 +1,25 @@
 <!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>
 
-<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
+  <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/v6/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/footer/custom-scroll-target/angular/example_component_html.md
index db8f0f30a0e..a0429f5e23b 100644
--- a/static/usage/v6/footer/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v6/footer/custom-scroll-target/angular/example_component_html.md
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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">
diff --git a/static/usage/v6/footer/custom-scroll-target/demo.html b/static/usage/v6/footer/custom-scroll-target/demo.html
index f9349b02086..e81480fe8ec 100644
--- a/static/usage/v6/footer/custom-scroll-target/demo.html
+++ b/static/usage/v6/footer/custom-scroll-target/demo.html
@@ -1,78 +1,98 @@
 <!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>
-  <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;
 
-  <style>
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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>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>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>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>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
+          <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/v6/footer/custom-scroll-target/javascript.md b/static/usage/v6/footer/custom-scroll-target/javascript.md
index 607c759f225..411ccb1df59 100644
--- a/static/usage/v6/footer/custom-scroll-target/javascript.md
+++ b/static/usage/v6/footer/custom-scroll-target/javascript.md
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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">
diff --git a/static/usage/v6/footer/custom-scroll-target/react/main_tsx.md b/static/usage/v6/footer/custom-scroll-target/react/main_tsx.md
index 425d1ee9528..9066d4c4a91 100644
--- a/static/usage/v6/footer/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v6/footer/custom-scroll-target/react/main_tsx.md
@@ -12,24 +12,63 @@ function Example() {
           <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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">
diff --git a/static/usage/v6/footer/custom-scroll-target/vue.md b/static/usage/v6/footer/custom-scroll-target/vue.md
index c7c13e7063c..b85998db4cb 100644
--- a/static/usage/v6/footer/custom-scroll-target/vue.md
+++ b/static/usage/v6/footer/custom-scroll-target/vue.md
@@ -5,24 +5,61 @@
       <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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">
diff --git a/static/usage/v6/footer/fade/angular.md b/static/usage/v6/footer/fade/angular.md
index cff7f1a7531..f600e4511df 100644
--- a/static/usage/v6/footer/fade/angular.md
+++ b/static/usage/v6/footer/fade/angular.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v6/footer/fade/demo.html b/static/usage/v6/footer/fade/demo.html
index 75ed07ea1bf..77b3c499000 100644
--- a/static/usage/v6/footer/fade/demo.html
+++ b/static/usage/v6/footer/fade/demo.html
@@ -1,65 +1,82 @@
 <!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>
 
-<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" />
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding">
+        <h1>Animal Facts</h1>
 
-</head>
+        <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>
 
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Animal Facts</h1>
+        <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>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>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>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>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>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
+        <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/v6/footer/fade/javascript.md b/static/usage/v6/footer/fade/javascript.md
index cff7f1a7531..f600e4511df 100644
--- a/static/usage/v6/footer/fade/javascript.md
+++ b/static/usage/v6/footer/fade/javascript.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v6/footer/fade/react.md b/static/usage/v6/footer/fade/react.md
index 858ea06635c..d7142f57ecd 100644
--- a/static/usage/v6/footer/fade/react.md
+++ b/static/usage/v6/footer/fade/react.md
@@ -9,24 +9,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
diff --git a/static/usage/v6/footer/fade/vue.md b/static/usage/v6/footer/fade/vue.md
index 8814012da11..757e78f59da 100644
--- a/static/usage/v6/footer/fade/vue.md
+++ b/static/usage/v6/footer/fade/vue.md
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
diff --git a/static/usage/v6/footer/no-border/demo.html b/static/usage/v6/footer/no-border/demo.html
index 8050b2a7bcd..bf9d1f0a479 100644
--- a/static/usage/v6/footer/no-border/demo.html
+++ b/static/usage/v6/footer/no-border/demo.html
@@ -1,28 +1,25 @@
 <!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>
 
-<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
+  <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/v6/footer/translucent/angular.md b/static/usage/v6/footer/translucent/angular.md
index 3d8f6098b38..a58f761cc8c 100644
--- a/static/usage/v6/footer/translucent/angular.md
+++ b/static/usage/v6/footer/translucent/angular.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v6/footer/translucent/demo.html b/static/usage/v6/footer/translucent/demo.html
index b04fd24bddc..4446e1b3c68 100644
--- a/static/usage/v6/footer/translucent/demo.html
+++ b/static/usage/v6/footer/translucent/demo.html
@@ -1,65 +1,82 @@
 <!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>
 
-<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" />
+  <body>
+    <ion-app>
+      <ion-content fullscreen="true" class="ion-padding">
+        <h1>Animal Facts</h1>
 
-</head>
+        <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>
 
-<body>
-  <ion-app>
-    <ion-content fullscreen="true" class="ion-padding">
-      <h1>Animal Facts</h1>
+        <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>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>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>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>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>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
+        <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/v6/footer/translucent/javascript.md b/static/usage/v6/footer/translucent/javascript.md
index 029b08984c3..bdff28e0dca 100644
--- a/static/usage/v6/footer/translucent/javascript.md
+++ b/static/usage/v6/footer/translucent/javascript.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v6/footer/translucent/react.md b/static/usage/v6/footer/translucent/react.md
index 0a3884fb0cd..ab7ff2221e0 100644
--- a/static/usage/v6/footer/translucent/react.md
+++ b/static/usage/v6/footer/translucent/react.md
@@ -9,24 +9,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
diff --git a/static/usage/v6/footer/translucent/vue.md b/static/usage/v6/footer/translucent/vue.md
index cd64be6bc88..5d5a0e1497f 100644
--- a/static/usage/v6/footer/translucent/vue.md
+++ b/static/usage/v6/footer/translucent/vue.md
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
diff --git a/static/usage/v6/grid/basic/demo.html b/static/usage/v6/grid/basic/demo.html
index 36ef496f817..06a2c76df7b 100644
--- a/static/usage/v6/grid/basic/demo.html
+++ b/static/usage/v6/grid/basic/demo.html
@@ -1,77 +1,75 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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
+          <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/v6/grid/customizing/column-number/demo.html b/static/usage/v6/grid/customizing/column-number/demo.html
index ee0550437e5..a60cffd72e0 100644
--- a/static/usage/v6/grid/customizing/column-number/demo.html
+++ b/static/usage/v6/grid/customizing/column-number/demo.html
@@ -1,53 +1,51 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
+        --ion-grid-columns: 6;
+      }
 
-      --ion-grid-columns: 6;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/grid/customizing/column-number/react/main_tsx.md b/static/usage/v6/grid/customizing/column-number/react/main_tsx.md
index f911fdef9b4..23f618b020a 100644
--- a/static/usage/v6/grid/customizing/column-number/react/main_tsx.md
+++ b/static/usage/v6/grid/customizing/column-number/react/main_tsx.md
@@ -7,7 +7,9 @@ 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>
+      <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>
diff --git a/static/usage/v6/grid/customizing/padding/demo.html b/static/usage/v6/grid/customizing/padding/demo.html
index 38dae06af73..380c8899f23 100644
--- a/static/usage/v6/grid/customizing/padding/demo.html
+++ b/static/usage/v6/grid/customizing/padding/demo.html
@@ -1,65 +1,63 @@
 <!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
+  <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/v6/grid/customizing/width/demo.html b/static/usage/v6/grid/customizing/width/demo.html
index 09527dca430..1032ff7bc91 100644
--- a/static/usage/v6/grid/customizing/width/demo.html
+++ b/static/usage/v6/grid/customizing/width/demo.html
@@ -1,56 +1,54 @@
 <!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
+  <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/v6/grid/fixed/demo.html b/static/usage/v6/grid/fixed/demo.html
index 9dcc3781d7c..67c19e8b5d8 100644
--- a/static/usage/v6/grid/fixed/demo.html
+++ b/static/usage/v6/grid/fixed/demo.html
@@ -1,48 +1,46 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v6/grid/horizontal-alignment/angular/example_component_html.md
index 63a33b6361e..1f7300dba04 100644
--- a/static/usage/v6/grid/horizontal-alignment/angular/example_component_html.md
+++ b/static/usage/v6/grid/horizontal-alignment/angular/example_component_html.md
@@ -2,60 +2,40 @@
 <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-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-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-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-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-col size="3"> 1 </ion-col>
+    <ion-col size="3"> 2 </ion-col>
   </ion-row>
 </ion-grid>
 ```
diff --git a/static/usage/v6/grid/horizontal-alignment/demo.html b/static/usage/v6/grid/horizontal-alignment/demo.html
index 2960357e81e..852f8b06b0e 100644
--- a/static/usage/v6/grid/horizontal-alignment/demo.html
+++ b/static/usage/v6/grid/horizontal-alignment/demo.html
@@ -1,100 +1,79 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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 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 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
+          <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>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/grid/horizontal-alignment/javascript.md b/static/usage/v6/grid/horizontal-alignment/javascript.md
index 79a8e723d8e..13c25523a4c 100644
--- a/static/usage/v6/grid/horizontal-alignment/javascript.md
+++ b/static/usage/v6/grid/horizontal-alignment/javascript.md
@@ -2,60 +2,40 @@
 <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-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-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-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-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-col size="3"> 1 </ion-col>
+    <ion-col size="3"> 2 </ion-col>
   </ion-row>
 </ion-grid>
 
diff --git a/static/usage/v6/grid/horizontal-alignment/react/main_tsx.md b/static/usage/v6/grid/horizontal-alignment/react/main_tsx.md
index 320fb74063c..0ec66ddb95a 100644
--- a/static/usage/v6/grid/horizontal-alignment/react/main_tsx.md
+++ b/static/usage/v6/grid/horizontal-alignment/react/main_tsx.md
@@ -10,60 +10,40 @@ function Example() {
       <b>Columns aligned at the start</b>
       <IonGrid>
         <IonRow class="ion-justify-content-start">
-          <IonCol size="3">
-            1
-          </IonCol>
-          <IonCol size="3">
-            2
-          </IonCol>
+          <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>
+          <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>
+          <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>
+          <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>
+          <IonCol size="3">1</IonCol>
+          <IonCol size="3">2</IonCol>
         </IonRow>
       </IonGrid>
     </>
diff --git a/static/usage/v6/grid/horizontal-alignment/vue.md b/static/usage/v6/grid/horizontal-alignment/vue.md
index 4cb3c1bcefd..689efada3ea 100644
--- a/static/usage/v6/grid/horizontal-alignment/vue.md
+++ b/static/usage/v6/grid/horizontal-alignment/vue.md
@@ -3,60 +3,40 @@
   <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-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-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-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-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-col size="3"> 1 </ion-col>
+      <ion-col size="3"> 2 </ion-col>
     </ion-row>
   </ion-grid>
 </template>
diff --git a/static/usage/v6/grid/offset-responsive/demo.html b/static/usage/v6/grid/offset-responsive/demo.html
index 07c5cdca37b..b6484411722 100644
--- a/static/usage/v6/grid/offset-responsive/demo.html
+++ b/static/usage/v6/grid/offset-responsive/demo.html
@@ -1,70 +1,68 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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>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
+          <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/v6/grid/offset-responsive/react/main_tsx.md b/static/usage/v6/grid/offset-responsive/react/main_tsx.md
index 482f957cde8..8721fbfc523 100644
--- a/static/usage/v6/grid/offset-responsive/react/main_tsx.md
+++ b/static/usage/v6/grid/offset-responsive/react/main_tsx.md
@@ -31,8 +31,12 @@ function Example() {
       <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>
+          <IonCol offset="6" offset-md="4" offset-lg="2">
+            1
+          </IonCol>
+          <IonCol offset="6" offset-md="4" offset-lg="2">
+            2
+          </IonCol>
         </IonRow>
       </IonGrid>
     </>
diff --git a/static/usage/v6/grid/offset/demo.html b/static/usage/v6/grid/offset/demo.html
index 876e4f9acf1..2c8009fa7da 100644
--- a/static/usage/v6/grid/offset/demo.html
+++ b/static/usage/v6/grid/offset/demo.html
@@ -1,69 +1,67 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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/v6/grid/offset/react/main_tsx.md b/static/usage/v6/grid/offset/react/main_tsx.md
index 99add2f8a44..e24f5a47918 100644
--- a/static/usage/v6/grid/offset/react/main_tsx.md
+++ b/static/usage/v6/grid/offset/react/main_tsx.md
@@ -7,7 +7,9 @@ import './main.css';
 function Example() {
   return (
     <>
-      <b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+      <b>
+        Column 2 has <code>offset</code> set to <code>"3"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -16,7 +18,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+      <b>
+        Column 5 has <code>offset</code> set to <code>"2"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -27,10 +31,14 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+      <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" offset="4">
+            1
+          </IonCol>
           <IonCol size="2">2</IonCol>
         </IonRow>
       </IonGrid>
diff --git a/static/usage/v6/grid/push-pull-responsive/demo.html b/static/usage/v6/grid/push-pull-responsive/demo.html
index aa956b2c1b0..e2e46ed72b2 100644
--- a/static/usage/v6/grid/push-pull-responsive/demo.html
+++ b/static/usage/v6/grid/push-pull-responsive/demo.html
@@ -1,71 +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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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>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
+          <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/v6/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v6/grid/push-pull-responsive/react/main_tsx.md
index 3f6e2879e08..85955f3ebd2 100644
--- a/static/usage/v6/grid/push-pull-responsive/react/main_tsx.md
+++ b/static/usage/v6/grid/push-pull-responsive/react/main_tsx.md
@@ -28,12 +28,24 @@ function Example() {
       <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>
+          <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>
     </>
diff --git a/static/usage/v6/grid/push-pull/angular/example_component_html.md b/static/usage/v6/grid/push-pull/angular/example_component_html.md
index cb8190ef9e9..a93c12fef81 100644
--- a/static/usage/v6/grid/push-pull/angular/example_component_html.md
+++ b/static/usage/v6/grid/push-pull/angular/example_component_html.md
@@ -8,7 +8,10 @@
   </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>
+<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>
diff --git a/static/usage/v6/grid/push-pull/demo.html b/static/usage/v6/grid/push-pull/demo.html
index b34be1bb39d..06108080241 100644
--- a/static/usage/v6/grid/push-pull/demo.html
+++ b/static/usage/v6/grid/push-pull/demo.html
@@ -1,73 +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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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/v6/grid/push-pull/javascript.md b/static/usage/v6/grid/push-pull/javascript.md
index 6dca0e83ec4..b911da1791b 100644
--- a/static/usage/v6/grid/push-pull/javascript.md
+++ b/static/usage/v6/grid/push-pull/javascript.md
@@ -8,7 +8,10 @@
   </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>
+<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>
diff --git a/static/usage/v6/grid/push-pull/react/main_tsx.md b/static/usage/v6/grid/push-pull/react/main_tsx.md
index 6b087b72b77..aa7c1d1c809 100644
--- a/static/usage/v6/grid/push-pull/react/main_tsx.md
+++ b/static/usage/v6/grid/push-pull/react/main_tsx.md
@@ -7,7 +7,10 @@ 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>
+      <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>
@@ -16,7 +19,10 @@ function Example() {
         </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>
+      <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>
@@ -28,11 +34,18 @@ function Example() {
         </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>
+      <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>
+          <IonCol size="9" push="3">
+            1
+          </IonCol>
+          <IonCol size="3" pull="9">
+            2
+          </IonCol>
         </IonRow>
       </IonGrid>
     </>
diff --git a/static/usage/v6/grid/push-pull/vue.md b/static/usage/v6/grid/push-pull/vue.md
index 2775067f7a7..b5146e95e0e 100644
--- a/static/usage/v6/grid/push-pull/vue.md
+++ b/static/usage/v6/grid/push-pull/vue.md
@@ -1,6 +1,9 @@
 ```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>
+  <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>
@@ -9,7 +12,10 @@
     </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>
+  <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>
@@ -21,7 +27,10 @@
     </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>
+  <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>
diff --git a/static/usage/v6/grid/size-auto/demo.html b/static/usage/v6/grid/size-auto/demo.html
index 364d5db3c9a..a41856605d5 100644
--- a/static/usage/v6/grid/size-auto/demo.html
+++ b/static/usage/v6/grid/size-auto/demo.html
@@ -1,78 +1,76 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
 
-    ion-col {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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 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
+          <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/v6/grid/size-auto/react/main_tsx.md b/static/usage/v6/grid/size-auto/react/main_tsx.md
index 15a19d04abe..64276d4cacd 100644
--- a/static/usage/v6/grid/size-auto/react/main_tsx.md
+++ b/static/usage/v6/grid/size-auto/react/main_tsx.md
@@ -7,7 +7,9 @@ import './main.css';
 function Example() {
   return (
     <>
-      <b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+      <b>
+        Column 1 has <code>size</code> set to <code>"auto"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol size="auto">1</IonCol>
@@ -16,7 +18,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+      <b>
+        Column 3 contains an input and has <code>size</code> set to <code>"auto"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -30,12 +34,14 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+      <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>
+            <div style={{ width: '150px' }}>2</div>
           </IonCol>
         </IonRow>
       </IonGrid>
diff --git a/static/usage/v6/grid/size-responsive/demo.html b/static/usage/v6/grid/size-responsive/demo.html
index 9176b7070a6..0f5eb97b2a2 100644
--- a/static/usage/v6/grid/size-responsive/demo.html
+++ b/static/usage/v6/grid/size-responsive/demo.html
@@ -1,72 +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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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>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
+          <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/v6/grid/size-responsive/react/main_tsx.md b/static/usage/v6/grid/size-responsive/react/main_tsx.md
index c27242fcf87..32a037e47bd 100644
--- a/static/usage/v6/grid/size-responsive/react/main_tsx.md
+++ b/static/usage/v6/grid/size-responsive/react/main_tsx.md
@@ -10,10 +10,18 @@ function Example() {
       <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>
+          <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>
 
@@ -29,12 +37,24 @@ function Example() {
       <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>
+          <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>
     </>
diff --git a/static/usage/v6/grid/size/demo.html b/static/usage/v6/grid/size/demo.html
index 4d16f74065e..751c844725c 100644
--- a/static/usage/v6/grid/size/demo.html
+++ b/static/usage/v6/grid/size/demo.html
@@ -1,70 +1,68 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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/v6/grid/size/react/main_tsx.md b/static/usage/v6/grid/size/react/main_tsx.md
index 3669d57806d..5cfa4f62f0e 100644
--- a/static/usage/v6/grid/size/react/main_tsx.md
+++ b/static/usage/v6/grid/size/react/main_tsx.md
@@ -7,7 +7,9 @@ import './main.css';
 function Example() {
   return (
     <>
-      <b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+      <b>
+        Column 2 has <code>size</code> set to <code>"8"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -16,7 +18,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+      <b>
+        Columns 3 & 4 have <code>size</code> set to <code>"3"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -28,7 +32,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+      <b>
+        Columns 1 & 2 have <code>size</code> set to <code>"4"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol size="4">1</IonCol>
diff --git a/static/usage/v6/grid/vertical-alignment/angular/example_component_html.md b/static/usage/v6/grid/vertical-alignment/angular/example_component_html.md
index 2b4e1b42106..0c12d96a0d2 100644
--- a/static/usage/v6/grid/vertical-alignment/angular/example_component_html.md
+++ b/static/usage/v6/grid/vertical-alignment/angular/example_component_html.md
@@ -2,15 +2,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -23,15 +17,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -44,15 +32,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
diff --git a/static/usage/v6/grid/vertical-alignment/demo.html b/static/usage/v6/grid/vertical-alignment/demo.html
index dd1388fcdbf..08b36d23cf4 100644
--- a/static/usage/v6/grid/vertical-alignment/demo.html
+++ b/static/usage/v6/grid/vertical-alignment/demo.html
@@ -1,103 +1,84 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/grid/vertical-alignment/javascript.md b/static/usage/v6/grid/vertical-alignment/javascript.md
index 9e7573ebbc6..6285096acdc 100644
--- a/static/usage/v6/grid/vertical-alignment/javascript.md
+++ b/static/usage/v6/grid/vertical-alignment/javascript.md
@@ -2,15 +2,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -23,15 +17,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -44,15 +32,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
diff --git a/static/usage/v6/grid/vertical-alignment/react/main_tsx.md b/static/usage/v6/grid/vertical-alignment/react/main_tsx.md
index d1dad060701..04a492566f6 100644
--- a/static/usage/v6/grid/vertical-alignment/react/main_tsx.md
+++ b/static/usage/v6/grid/vertical-alignment/react/main_tsx.md
@@ -10,15 +10,9 @@ function Example() {
       <b>Columns aligned at the top</b>
       <IonGrid>
         <IonRow class="ion-align-items-start">
-          <IonCol>
-            1
-          </IonCol>
-          <IonCol>
-            2
-          </IonCol>
-          <IonCol>
-            3
-          </IonCol>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
           <IonCol>
             4 <br />
             # <br />
@@ -31,15 +25,9 @@ function Example() {
       <b>Columns aligned at the center</b>
       <IonGrid>
         <IonRow class="ion-align-items-center">
-          <IonCol>
-            1
-          </IonCol>
-          <IonCol>
-            2
-          </IonCol>
-          <IonCol>
-            3
-          </IonCol>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
           <IonCol>
             4 <br />
             # <br />
@@ -52,15 +40,9 @@ function Example() {
       <b>Columns aligned at the bottom</b>
       <IonGrid>
         <IonRow class="ion-align-items-end">
-          <IonCol>
-            1
-          </IonCol>
-          <IonCol>
-            2
-          </IonCol>
-          <IonCol>
-            3
-          </IonCol>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
           <IonCol>
             4 <br />
             # <br />
diff --git a/static/usage/v6/grid/vertical-alignment/vue.md b/static/usage/v6/grid/vertical-alignment/vue.md
index f150f908eec..e48b234b38a 100644
--- a/static/usage/v6/grid/vertical-alignment/vue.md
+++ b/static/usage/v6/grid/vertical-alignment/vue.md
@@ -3,15 +3,9 @@
   <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> 1 </ion-col>
+      <ion-col> 2 </ion-col>
+      <ion-col> 3 </ion-col>
       <ion-col>
         4 <br />
         # <br />
@@ -24,15 +18,9 @@
   <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> 1 </ion-col>
+      <ion-col> 2 </ion-col>
+      <ion-col> 3 </ion-col>
       <ion-col>
         4 <br />
         # <br />
@@ -45,15 +33,9 @@
   <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> 1 </ion-col>
+      <ion-col> 2 </ion-col>
+      <ion-col> 3 </ion-col>
       <ion-col>
         4 <br />
         # <br />
diff --git a/static/usage/v6/header/basic/demo.html b/static/usage/v6/header/basic/demo.html
index a6752caddb9..d060a4bef8f 100644
--- a/static/usage/v6/header/basic/demo.html
+++ b/static/usage/v6/header/basic/demo.html
@@ -1,28 +1,25 @@
 <!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>
 
-<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
+  <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/v6/header/condense/angular.md b/static/usage/v6/header/condense/angular.md
index 46ac7fac8ea..1741b1f1706 100644
--- a/static/usage/v6/header/condense/angular.md
+++ b/static/usage/v6/header/condense/angular.md
@@ -15,24 +15,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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/v6/header/condense/demo.html b/static/usage/v6/header/condense/demo.html
index caed21b4dcd..6319cffd904 100644
--- a/static/usage/v6/header/condense/demo.html
+++ b/static/usage/v6/header/condense/demo.html
@@ -1,73 +1,92 @@
 <!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>
 
-<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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Header</ion-title>
+          <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>
+        <div class="ion-padding">
+          <h1>Animal Facts</h1>
 
-        <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>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>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>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>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>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>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>
+          <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>
 
-</html>
\ No newline at end of file
+          <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/v6/header/condense/javascript.md b/static/usage/v6/header/condense/javascript.md
index 95ac5731c47..f2e2a1d53cc 100644
--- a/static/usage/v6/header/condense/javascript.md
+++ b/static/usage/v6/header/condense/javascript.md
@@ -15,24 +15,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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/v6/header/condense/react.md b/static/usage/v6/header/condense/react.md
index 0f68407aff0..6dc06c54cff 100644
--- a/static/usage/v6/header/condense/react.md
+++ b/static/usage/v6/header/condense/react.md
@@ -21,24 +21,63 @@ function Example() {
           <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
     </>
diff --git a/static/usage/v6/header/condense/vue.md b/static/usage/v6/header/condense/vue.md
index c3f354d010f..dddaef7f71c 100644
--- a/static/usage/v6/header/condense/vue.md
+++ b/static/usage/v6/header/condense/vue.md
@@ -16,24 +16,61 @@
       <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
diff --git a/static/usage/v6/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/header/custom-scroll-target/angular/example_component_html.md
index b54ba9d2afa..742d531cb9d 100644
--- a/static/usage/v6/header/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v6/header/custom-scroll-target/angular/example_component_html.md
@@ -9,24 +9,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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/v6/header/custom-scroll-target/demo.html b/static/usage/v6/header/custom-scroll-target/demo.html
index 337bd2ece48..0ab86141dcf 100644
--- a/static/usage/v6/header/custom-scroll-target/demo.html
+++ b/static/usage/v6/header/custom-scroll-target/demo.html
@@ -1,78 +1,98 @@
 <!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>
-  <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;
 
-  <style>
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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>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>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>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>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
+          <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/v6/header/custom-scroll-target/react/main_tsx.md b/static/usage/v6/header/custom-scroll-target/react/main_tsx.md
index bf6d13f26ec..923ea715aa7 100644
--- a/static/usage/v6/header/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v6/header/custom-scroll-target/react/main_tsx.md
@@ -17,24 +17,63 @@ function Example() {
           <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
     </>
diff --git a/static/usage/v6/header/custom-scroll-target/vue.md b/static/usage/v6/header/custom-scroll-target/vue.md
index 73565d9ab18..84aac1c56fe 100644
--- a/static/usage/v6/header/custom-scroll-target/vue.md
+++ b/static/usage/v6/header/custom-scroll-target/vue.md
@@ -10,24 +10,61 @@
       <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
diff --git a/static/usage/v6/header/fade/angular.md b/static/usage/v6/header/fade/angular.md
index 72e55ffc58c..473ad54c8da 100644
--- a/static/usage/v6/header/fade/angular.md
+++ b/static/usage/v6/header/fade/angular.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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/v6/header/fade/demo.html b/static/usage/v6/header/fade/demo.html
index 06b24cc2eb4..9f955b15f86 100644
--- a/static/usage/v6/header/fade/demo.html
+++ b/static/usage/v6/header/fade/demo.html
@@ -1,65 +1,82 @@
 <!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>
 
-<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" />
+  <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>
 
-</head>
+        <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>
 
-<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>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>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>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>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>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>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
+        <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/v6/header/fade/javascript.md b/static/usage/v6/header/fade/javascript.md
index 72e55ffc58c..473ad54c8da 100644
--- a/static/usage/v6/header/fade/javascript.md
+++ b/static/usage/v6/header/fade/javascript.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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/v6/header/fade/react.md b/static/usage/v6/header/fade/react.md
index 453f32c4db4..085bea0296d 100644
--- a/static/usage/v6/header/fade/react.md
+++ b/static/usage/v6/header/fade/react.md
@@ -14,24 +14,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
     </>
   );
diff --git a/static/usage/v6/header/fade/vue.md b/static/usage/v6/header/fade/vue.md
index 44327bf809c..264038c103c 100644
--- a/static/usage/v6/header/fade/vue.md
+++ b/static/usage/v6/header/fade/vue.md
@@ -9,24 +9,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
 
diff --git a/static/usage/v6/header/no-border/demo.html b/static/usage/v6/header/no-border/demo.html
index 9e8356fe253..48283da6657 100644
--- a/static/usage/v6/header/no-border/demo.html
+++ b/static/usage/v6/header/no-border/demo.html
@@ -1,28 +1,25 @@
 <!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>
 
-<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
+  <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/v6/header/translucent/angular.md b/static/usage/v6/header/translucent/angular.md
index f2779c7d5c9..657a88bf066 100644
--- a/static/usage/v6/header/translucent/angular.md
+++ b/static/usage/v6/header/translucent/angular.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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/v6/header/translucent/demo.html b/static/usage/v6/header/translucent/demo.html
index bea9d3ecba1..1993a5ee100 100644
--- a/static/usage/v6/header/translucent/demo.html
+++ b/static/usage/v6/header/translucent/demo.html
@@ -1,65 +1,82 @@
 <!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>
 
-<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" />
+  <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>
 
-</head>
+        <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>
 
-<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>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>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>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>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>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>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
+        <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/v6/header/translucent/javascript.md b/static/usage/v6/header/translucent/javascript.md
index e03deeda2a5..5c0048c019c 100644
--- a/static/usage/v6/header/translucent/javascript.md
+++ b/static/usage/v6/header/translucent/javascript.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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/v6/header/translucent/react.md b/static/usage/v6/header/translucent/react.md
index 862211d839b..def835913c3 100644
--- a/static/usage/v6/header/translucent/react.md
+++ b/static/usage/v6/header/translucent/react.md
@@ -14,24 +14,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
     </>
   );
diff --git a/static/usage/v6/header/translucent/vue.md b/static/usage/v6/header/translucent/vue.md
index 34a4c740014..26370009d44 100644
--- a/static/usage/v6/header/translucent/vue.md
+++ b/static/usage/v6/header/translucent/vue.md
@@ -9,24 +9,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
 
diff --git a/static/usage/v6/icon/basic/demo.html b/static/usage/v6/icon/basic/demo.html
index f2284770ab9..43596c28068 100644
--- a/static/usage/v6/icon/basic/demo.html
+++ b/static/usage/v6/icon/basic/demo.html
@@ -1,28 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Icon</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Icon</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.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-icon name="logo-ionic"></ion-icon>
-        <ion-icon name="logo-ionic" size="large"></ion-icon>
-        <ion-icon name="logo-ionic" color="primary"></ion-icon>
-        <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-icon name="logo-ionic" size="large"></ion-icon>
+          <ion-icon name="logo-ionic" color="primary"></ion-icon>
+          <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md
index ccb83aec3df..4dd4e6c27c9 100644
--- a/static/usage/v6/icon/basic/index.md
+++ b/static/usage/v6/icon/basic/index.md
@@ -5,9 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground
-  version={6}
-  size="xsmall"
-  code={{ javascript, react, vue, angular }}
-  src="usage/v6/icon/basic/demo.html"
-/>
+<Playground version={6} size="xsmall" code={{ javascript, react, vue, angular }} src="usage/v6/icon/basic/demo.html" />
diff --git a/static/usage/v6/img/basic/angular.md b/static/usage/v6/img/basic/angular.md
index fc408402024..5a42aa9f765 100644
--- a/static/usage/v6/img/basic/angular.md
+++ b/static/usage/v6/img/basic/angular.md
@@ -1,3 +1,6 @@
 ```html
-<ion-img src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+<ion-img
+  src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg"
+  alt="The Wisconsin State Capitol building in Madison, WI at night"
+></ion-img>
 ```
diff --git a/static/usage/v6/img/basic/demo.html b/static/usage/v6/img/basic/demo.html
index 8b292725825..b6544e6d832 100644
--- a/static/usage/v6/img/basic/demo.html
+++ b/static/usage/v6/img/basic/demo.html
@@ -1,31 +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" />
 
-<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://ionic-docs-demo-v6.vercel.app/assets/madison.jpg"
-          alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+    <style>
+      ion-img {
+        width: 300px;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-img
+            src="https://ionic-docs-demo-v6.vercel.app/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/v6/img/basic/javascript.md b/static/usage/v6/img/basic/javascript.md
index fc408402024..5a42aa9f765 100644
--- a/static/usage/v6/img/basic/javascript.md
+++ b/static/usage/v6/img/basic/javascript.md
@@ -1,3 +1,6 @@
 ```html
-<ion-img src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+<ion-img
+  src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg"
+  alt="The Wisconsin State Capitol building in Madison, WI at night"
+></ion-img>
 ```
diff --git a/static/usage/v6/img/basic/react.md b/static/usage/v6/img/basic/react.md
index 6637dfacef0..a7e9b7d6646 100644
--- a/static/usage/v6/img/basic/react.md
+++ b/static/usage/v6/img/basic/react.md
@@ -4,7 +4,10 @@ import { IonImg } from '@ionic/react';
 
 function Example() {
   return (
-    <IonImg src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></IonImg>
+    <IonImg
+      src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg"
+      alt="The Wisconsin State Capitol building in Madison, WI at night"
+    ></IonImg>
   );
 }
 export default Example;
diff --git a/static/usage/v6/img/basic/vue.md b/static/usage/v6/img/basic/vue.md
index a92ec67a3a5..2e6bdeb2e1a 100644
--- a/static/usage/v6/img/basic/vue.md
+++ b/static/usage/v6/img/basic/vue.md
@@ -1,6 +1,9 @@
 ```html
 <template>
-  <ion-img src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+  <ion-img
+    src="https://ionic-docs-demo-v6.vercel.app/assets/madison.jpg"
+    alt="The Wisconsin State Capitol building in Madison, WI at night"
+  ></ion-img>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v6/infinite-scroll/basic/demo.html b/static/usage/v6/infinite-scroll/basic/demo.html
index ea12f54b686..2c20f6ecf0e 100644
--- a/static/usage/v6/infinite-scroll/basic/demo.html
+++ b/static/usage/v6/infinite-scroll/basic/demo.html
@@ -1,63 +1,60 @@
 <!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);
+  <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
+      generateItems();
+    </script>
+  </body>
+</html>
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
index b56e952cfe7..4b062494764 100644
--- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -1,82 +1,117 @@
 <!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;
+      }
 
-<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>
+      .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');
+  <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');
+      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';
+          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);
+          avatar.appendChild(img);
+          el.appendChild(avatar);
 
-        const text = document.createElement('ion-label');
-        text.textContent = `Item ${i}`;
+          const text = document.createElement('ion-label');
+          text.textContent = `Item ${i}`;
 
-        el.appendChild(text);
+          el.appendChild(text);
 
-        list.appendChild(el);
+          list.appendChild(el);
+        }
       }
-    }
-
-    generateItems();
-
-  </script>
-</body>
 
-</html>
\ No newline at end of file
+      generateItems();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
index 46016207432..82734aa87af 100644
--- a/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
@@ -1,56 +1,53 @@
 <!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);
+  <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
+      generateItems();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/input/basic/demo.html b/static/usage/v6/input/basic/demo.html
index 264bbaa75e6..6a963b5d9f1 100644
--- a/static/usage/v6/input/basic/demo.html
+++ b/static/usage/v6/input/basic/demo.html
@@ -1,55 +1,53 @@
 <!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
+  <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/v6/input/clear/demo.html b/static/usage/v6/input/clear/demo.html
index e46c310a3a4..17a1f680668 100644
--- a/static/usage/v6/input/clear/demo.html
+++ b/static/usage/v6/input/clear/demo.html
@@ -1,48 +1,46 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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">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
+            <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/v6/input/clear/vue.md b/static/usage/v6/input/clear/vue.md
index fecb1e831f1..57ac0bbd677 100644
--- a/static/usage/v6/input/clear/vue.md
+++ b/static/usage/v6/input/clear/vue.md
@@ -8,7 +8,10 @@
 
     <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-input
+        :clear-on-edit="true"
+        placeholder="Enter text, leave the input, come back and type to clear"
+      ></ion-input>
     </ion-item>
 
     <ion-item>
diff --git a/static/usage/v6/input/fill/demo.html b/static/usage/v6/input/fill/demo.html
index a7afe6c8d13..e56efdfe97b 100644
--- a/static/usage/v6/input/fill/demo.html
+++ b/static/usage/v6/input/fill/demo.html
@@ -1,44 +1,42 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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="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
+          <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/v6/input/filtering/angular/example_component_html.md b/static/usage/v6/input/filtering/angular/example_component_html.md
index 354c1e65610..b03ba152378 100644
--- a/static/usage/v6/input/filtering/angular/example_component_html.md
+++ b/static/usage/v6/input/filtering/angular/example_component_html.md
@@ -2,11 +2,7 @@
 <ion-list>
   <ion-item>
     <ion-label>Alphanumeric Characters</ion-label>
-    <ion-input
-      [value]="inputModel"
-      (ionInput)="onInput($event)"
-      #ionInputEl
-    ></ion-input>
+    <ion-input [value]="inputModel" (ionInput)="onInput($event)" #ionInputEl></ion-input>
   </ion-item>
 </ion-list>
 ```
diff --git a/static/usage/v6/input/filtering/angular/example_component_ts.md b/static/usage/v6/input/filtering/angular/example_component_ts.md
index 03f71066cc3..b0fc6a3331f 100644
--- a/static/usage/v6/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v6/input/filtering/angular/example_component_ts.md
@@ -8,15 +8,15 @@ import type { IonInput } from '@ionic/angular';
 })
 export class ExampleComponent {
   inputModel = '';
-  
+
   @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
-  
+
   onInput(ev) {
     const value = ev.target!.value;
-    
+
     // Removes non alphanumeric characters
-    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
-    
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
     /**
      * Update both the state variable and
      * the component to keep them in sync.
diff --git a/static/usage/v6/input/filtering/demo.html b/static/usage/v6/input/filtering/demo.html
index ae4cb5381f9..899657dddcc 100644
--- a/static/usage/v6/input/filtering/demo.html
+++ b/static/usage/v6/input/filtering/demo.html
@@ -1,39 +1,37 @@
 <!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" />
+  </head>
 
-<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" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-label>Alphanumeric Characters</ion-label>
+              <ion-input></ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-label>Alphanumeric Characters</ion-label>
-            <ion-input></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const input = document.querySelector('ion-input');
-    input.addEventListener('ionInput', (ev) => {
-      const value = ev.target.value;
-
-      // Removes non alphanumeric characters
-      input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
-    });
-  </script>
-</body>
+    <script>
+      const input = document.querySelector('ion-input');
+      input.addEventListener('ionInput', (ev) => {
+        const value = ev.target.value;
 
+        // Removes non alphanumeric characters
+        input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
+      });
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v6/input/filtering/index.md b/static/usage/v6/input/filtering/index.md
index 41b9ef2f591..9b90b32b187 100644
--- a/static/usage/v6/input/filtering/index.md
+++ b/static/usage/v6/input/filtering/index.md
@@ -7,14 +7,18 @@ 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="6" code={{
-  javascript, 
-  react, 
-  vue, 
-  angular: {
-    files: {
-      'src/app/example.component.html': angular_example_component_html,
-      'src/app/example.component.ts': angular_example_component_ts,
+<Playground
+  version="6"
+  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/input/filtering/demo.html" />
+  }}
+  src="usage/v6/input/filtering/demo.html"
+/>
diff --git a/static/usage/v6/input/filtering/javascript.md b/static/usage/v6/input/filtering/javascript.md
index 007a211e40f..7a031a9e5a1 100644
--- a/static/usage/v6/input/filtering/javascript.md
+++ b/static/usage/v6/input/filtering/javascript.md
@@ -11,7 +11,7 @@
   input.addEventListener('ionInput', (ev) => {
     const value = ev.target.value;
     // Removes non alphanumeric characters
-    input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
+    input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
   });
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/input/filtering/react.md b/static/usage/v6/input/filtering/react.md
index ae2df1a1cdd..765d1f24ba6 100644
--- a/static/usage/v6/input/filtering/react.md
+++ b/static/usage/v6/input/filtering/react.md
@@ -3,36 +3,32 @@ import React, { useState, useRef } from 'react';
 import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
 
 function Example() {
-  const [inputModel, setInputModel ] = useState('');
+  const [inputModel, setInputModel] = useState('');
   const ionInputEl = useRef<HTMLIonInputElement>(null);
-  
+
   const onInput = (ev: Event) => {
     const value = (ev.target as HTMLIonInputElement).value as string;
-    
+
     // Removes non alphanumeric characters
-    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
-    
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
     /**
      * Update both the state variable and
      * the component to keep them in sync.
      */
     setInputModel(filteredValue);
-    
+
     const inputCmp = ionInputEl.current;
     if (inputCmp !== null) {
       inputCmp.value = filteredValue;
     }
-  }
-  
+  };
+
   return (
     <IonList>
       <IonItem>
         <IonLabel>Alphanumeric Characters</IonLabel>
-        <IonInput
-          value={inputModel}
-          onIonInput={onInput}
-          ref={ionInputEl}
-        ></IonInput>
+        <IonInput value={inputModel} onIonInput={onInput} ref={ionInputEl}></IonInput>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v6/input/filtering/vue.md b/static/usage/v6/input/filtering/vue.md
index bfce3c9c58b..b9ff7e0acdd 100644
--- a/static/usage/v6/input/filtering/vue.md
+++ b/static/usage/v6/input/filtering/vue.md
@@ -3,11 +3,7 @@
   <ion-list>
     <ion-item>
       <ion-label>Alphanumeric Characters</ion-label>
-      <ion-input
-        :value="inputModel"
-        @ionInput="onInput($event)"
-        ref="ionInputEl"
-      ></ion-input>
+      <ion-input :value="inputModel" @ionInput="onInput($event)" ref="ionInputEl"></ion-input>
     </ion-item>
   </ion-list>
 </template>
@@ -23,24 +19,24 @@
       const inputModel = ref('');
       const onInput = (ev) => {
         const value = ev.target!.value;
-        
+
         // Removes non alphanumeric characters
-        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
-        
+        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
         /**
          * Update both the state variable and
          * the component to keep them in sync.
          */
         inputModel.value = filteredValue;
-        
+
         const inputCmp = ionInputEl.value;
         if (inputCmp !== undefined) {
           inputCmp.$el.value = filteredValue;
         }
-      }
-      
+      };
+
       return { ionInputEl, inputModel, onInput };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/input/labels/demo.html b/static/usage/v6/input/labels/demo.html
index ea089a533e8..5f3c13209fd 100644
--- a/static/usage/v6/input/labels/demo.html
+++ b/static/usage/v6/input/labels/demo.html
@@ -1,50 +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" />
 
-<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>
 
-  <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>
 
-<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="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="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
+            <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/v6/input/theming/colors/demo.html b/static/usage/v6/input/theming/colors/demo.html
index c0c93908ac6..e3549da53d7 100644
--- a/static/usage/v6/input/theming/colors/demo.html
+++ b/static/usage/v6/input/theming/colors/demo.html
@@ -1,44 +1,42 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-      flex-wrap: wrap;
-    }
+      .container ion-input {
+        flex: 1 1 33%;
+      }
+    </style>
+  </head>
 
-    .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
+  <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/v6/input/theming/css-properties/angular/example_component_css.md b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md
index bede6457325..4885a193f87 100644
--- a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md
+++ b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md
@@ -3,7 +3,7 @@ ion-input.custom {
   --background: #373737;
   --color: #fff;
   --placeholder-color: #ddd;
-  --placeholder-opacity: .8;
+  --placeholder-opacity: 0.8;
 
   --padding-bottom: 10px;
   --padding-end: 10px;
diff --git a/static/usage/v6/input/theming/css-properties/demo.html b/static/usage/v6/input/theming/css-properties/demo.html
index 4414ead7bf6..432e25dfdd5 100644
--- a/static/usage/v6/input/theming/css-properties/demo.html
+++ b/static/usage/v6/input/theming/css-properties/demo.html
@@ -1,43 +1,41 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      max-width: 200px;
-      margin: 0 auto;
-    }
+      ion-input.custom {
+        --background: #373737;
+        --color: #fff;
+        --placeholder-color: #ddd;
+        --placeholder-opacity: 0.8;
 
-    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>
 
-      --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
+  <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/v6/input/theming/css-properties/javascript.md b/static/usage/v6/input/theming/css-properties/javascript.md
index 3b406ede42f..b08b2d704bb 100644
--- a/static/usage/v6/input/theming/css-properties/javascript.md
+++ b/static/usage/v6/input/theming/css-properties/javascript.md
@@ -6,7 +6,7 @@
     --background: #373737;
     --color: #fff;
     --placeholder-color: #ddd;
-    --placeholder-opacity: .8;
+    --placeholder-opacity: 0.8;
 
     --padding-bottom: 10px;
     --padding-end: 10px;
diff --git a/static/usage/v6/input/theming/css-properties/react/main_css.md b/static/usage/v6/input/theming/css-properties/react/main_css.md
index bede6457325..4885a193f87 100644
--- a/static/usage/v6/input/theming/css-properties/react/main_css.md
+++ b/static/usage/v6/input/theming/css-properties/react/main_css.md
@@ -3,7 +3,7 @@ ion-input.custom {
   --background: #373737;
   --color: #fff;
   --placeholder-color: #ddd;
-  --placeholder-opacity: .8;
+  --placeholder-opacity: 0.8;
 
   --padding-bottom: 10px;
   --padding-end: 10px;
diff --git a/static/usage/v6/input/theming/css-properties/react/main_tsx.md b/static/usage/v6/input/theming/css-properties/react/main_tsx.md
index e4ec0fb134a..ea550a31e01 100644
--- a/static/usage/v6/input/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/input/theming/css-properties/react/main_tsx.md
@@ -5,9 +5,7 @@ import { IonInput } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return (
-    <IonInput placeholder="Custom input" class="custom"></IonInput>
-  );
+  return <IonInput placeholder="Custom input" class="custom"></IonInput>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/input/theming/css-properties/vue.md b/static/usage/v6/input/theming/css-properties/vue.md
index 6d5d5fa41cc..574846aa285 100644
--- a/static/usage/v6/input/theming/css-properties/vue.md
+++ b/static/usage/v6/input/theming/css-properties/vue.md
@@ -17,7 +17,7 @@
     --background: #373737;
     --color: #fff;
     --placeholder-color: #ddd;
-    --placeholder-opacity: .8;
+    --placeholder-opacity: 0.8;
 
     --padding-bottom: 10px;
     --padding-end: 10px;
diff --git a/static/usage/v6/input/types/demo.html b/static/usage/v6/input/types/demo.html
index 5955051f78f..11cda792b5d 100644
--- a/static/usage/v6/input/types/demo.html
+++ b/static/usage/v6/input/types/demo.html
@@ -1,55 +1,53 @@
 <!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
+  <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/v6/item-divider/basic/angular.md b/static/usage/v6/item-divider/basic/angular.md
index d74e5b05549..35dccbdbc88 100644
--- a/static/usage/v6/item-divider/basic/angular.md
+++ b/static/usage/v6/item-divider/basic/angular.md
@@ -2,9 +2,7 @@
 <ion-list>
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section A
-      </ion-label>
+      <ion-label> Section A </ion-label>
     </ion-item-divider>
 
     <ion-item>
@@ -20,9 +18,7 @@
 
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section B
-      </ion-label>
+      <ion-label> Section B </ion-label>
     </ion-item-divider>
 
     <ion-item>
diff --git a/static/usage/v6/item-divider/basic/demo.html b/static/usage/v6/item-divider/basic/demo.html
index d99c52d65af..fd6dce5d010 100644
--- a/static/usage/v6/item-divider/basic/demo.html
+++ b/static/usage/v6/item-divider/basic/demo.html
@@ -1,66 +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 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" />
 
-<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>
 
-  <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>
 
-<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>
-              <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-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
+              <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/v6/item-divider/basic/javascript.md b/static/usage/v6/item-divider/basic/javascript.md
index d74e5b05549..35dccbdbc88 100644
--- a/static/usage/v6/item-divider/basic/javascript.md
+++ b/static/usage/v6/item-divider/basic/javascript.md
@@ -2,9 +2,7 @@
 <ion-list>
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section A
-      </ion-label>
+      <ion-label> Section A </ion-label>
     </ion-item-divider>
 
     <ion-item>
@@ -20,9 +18,7 @@
 
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section B
-      </ion-label>
+      <ion-label> Section B </ion-label>
     </ion-item-divider>
 
     <ion-item>
diff --git a/static/usage/v6/item-divider/basic/react.md b/static/usage/v6/item-divider/basic/react.md
index 289f1727c8d..14ad85b1c82 100644
--- a/static/usage/v6/item-divider/basic/react.md
+++ b/static/usage/v6/item-divider/basic/react.md
@@ -7,9 +7,7 @@ function Example() {
     <IonList>
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Section A
-          </IonLabel>
+          <IonLabel>Section A</IonLabel>
         </IonItemDivider>
 
         <IonItem>
@@ -25,9 +23,7 @@ function Example() {
 
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Section B
-          </IonLabel>
+          <IonLabel>Section B</IonLabel>
         </IonItemDivider>
 
         <IonItem>
diff --git a/static/usage/v6/item-divider/basic/vue.md b/static/usage/v6/item-divider/basic/vue.md
index 95f26ebc027..22c9565c278 100644
--- a/static/usage/v6/item-divider/basic/vue.md
+++ b/static/usage/v6/item-divider/basic/vue.md
@@ -3,9 +3,7 @@
   <ion-list>
     <ion-item-group>
       <ion-item-divider>
-        <ion-label>
-          Section A
-        </ion-label>
+        <ion-label> Section A </ion-label>
       </ion-item-divider>
 
       <ion-item>
@@ -21,9 +19,7 @@
 
     <ion-item-group>
       <ion-item-divider>
-        <ion-label>
-          Section B
-        </ion-label>
+        <ion-label> Section B </ion-label>
       </ion-item-divider>
 
       <ion-item>
diff --git a/static/usage/v6/item-divider/theming/colors/demo.html b/static/usage/v6/item-divider/theming/colors/demo.html
index 354ab9096e8..0f88e6a8e46 100644
--- a/static/usage/v6/item-divider/theming/colors/demo.html
+++ b/static/usage/v6/item-divider/theming/colors/demo.html
@@ -1,59 +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 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" />
 
-<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>
 
-  <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
+  <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/v6/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md
index b3b1bb4da25..172fdad114f 100644
--- a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md
@@ -1,7 +1,5 @@
 ```html
 <ion-item-divider>
-  <ion-label>
-    Item Divider
-  </ion-label>
+  <ion-label> Item Divider </ion-label>
 </ion-item-divider>
 ```
diff --git a/static/usage/v6/item-divider/theming/css-properties/demo.html b/static/usage/v6/item-divider/theming/css-properties/demo.html
index 9223767446d..df0c09642ff 100644
--- a/static/usage/v6/item-divider/theming/css-properties/demo.html
+++ b/static/usage/v6/item-divider/theming/css-properties/demo.html
@@ -1,40 +1,36 @@
 <!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" />
 
-<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;
 
-  <style>
-    ion-item-divider {
-      --background: #19422d;
-      --color: #fff;
+        --padding-top: 10px;
+        --padding-bottom: 10px;
+        --padding-start: 20px;
+        --padding-end: 20px;
+      }
+    </style>
+  </head>
 
-      --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
+  <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/v6/item-divider/theming/css-properties/javascript.md b/static/usage/v6/item-divider/theming/css-properties/javascript.md
index 6622b6d7e3f..0c0cdc26f55 100644
--- a/static/usage/v6/item-divider/theming/css-properties/javascript.md
+++ b/static/usage/v6/item-divider/theming/css-properties/javascript.md
@@ -12,8 +12,6 @@
 </style>
 
 <ion-item-divider>
-  <ion-label>
-    Item Divider
-  </ion-label>
+  <ion-label> Item Divider </ion-label>
 </ion-item-divider>
 ```
diff --git a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md
index 6cd8d464d7e..b3083033541 100644
--- a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonItemDivider, IonLabel } from '@ionic/react';
@@ -8,9 +7,7 @@ import './main.css';
 function Example() {
   return (
     <IonItemDivider>
-      <IonLabel>
-        Item Divider
-      </IonLabel>
+      <IonLabel>Item Divider</IonLabel>
     </IonItemDivider>
   );
 }
diff --git a/static/usage/v6/item-divider/theming/css-properties/vue.md b/static/usage/v6/item-divider/theming/css-properties/vue.md
index 3589bcc7cd4..950e3775d83 100644
--- a/static/usage/v6/item-divider/theming/css-properties/vue.md
+++ b/static/usage/v6/item-divider/theming/css-properties/vue.md
@@ -1,9 +1,7 @@
 ```html
 <template>
   <ion-item-divider>
-    <ion-label>
-      Item Divider
-    </ion-label>
+    <ion-label> Item Divider </ion-label>
   </ion-item-divider>
 </template>
 
@@ -12,7 +10,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItemDivider }
+    components: { IonItemDivider },
   });
 </script>
 
diff --git a/static/usage/v6/item-group/basic/demo.html b/static/usage/v6/item-group/basic/demo.html
index eaf062c371d..bddb3655228 100644
--- a/static/usage/v6/item-group/basic/demo.html
+++ b/static/usage/v6/item-group/basic/demo.html
@@ -1,60 +1,58 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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>
-            <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-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
+            <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/v6/item-group/sliding-items/angular.md b/static/usage/v6/item-group/sliding-items/angular.md
index a451b58c9c4..2708fde7acc 100644
--- a/static/usage/v6/item-group/sliding-items/angular.md
+++ b/static/usage/v6/item-group/sliding-items/angular.md
@@ -1,94 +1,66 @@
 ```html
 <ion-item-group>
   <ion-item-divider>
-    <ion-label>
-      Fruits
-    </ion-label>
+    <ion-label> Fruits </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Grapes
-      </ion-label>
+      <ion-label> Grapes </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Apples
-      </ion-label>
+      <ion-label> Apples </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Bananas </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Vegetables </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Carrots
-      </ion-label>
+      <ion-label> Carrots </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Broccoli
-      </ion-label>
+      <ion-label> Broccoli </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Celery </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 </ion-item-group>
diff --git a/static/usage/v6/item-group/sliding-items/demo.html b/static/usage/v6/item-group/sliding-items/demo.html
index 87c87870df4..6ac967fb051 100644
--- a/static/usage/v6/item-group/sliding-items/demo.html
+++ b/static/usage/v6/item-group/sliding-items/demo.html
@@ -1,122 +1,92 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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>
-                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>
-              <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-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-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>
-                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>
-              <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
+            <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/v6/item-group/sliding-items/javascript.md b/static/usage/v6/item-group/sliding-items/javascript.md
index a451b58c9c4..2708fde7acc 100644
--- a/static/usage/v6/item-group/sliding-items/javascript.md
+++ b/static/usage/v6/item-group/sliding-items/javascript.md
@@ -1,94 +1,66 @@
 ```html
 <ion-item-group>
   <ion-item-divider>
-    <ion-label>
-      Fruits
-    </ion-label>
+    <ion-label> Fruits </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Grapes
-      </ion-label>
+      <ion-label> Grapes </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Apples
-      </ion-label>
+      <ion-label> Apples </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Bananas </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Vegetables </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Carrots
-      </ion-label>
+      <ion-label> Carrots </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Broccoli
-      </ion-label>
+      <ion-label> Broccoli </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Celery </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 </ion-item-group>
diff --git a/static/usage/v6/item-group/sliding-items/react.md b/static/usage/v6/item-group/sliding-items/react.md
index 2ca4d7ca380..716935f065c 100644
--- a/static/usage/v6/item-group/sliding-items/react.md
+++ b/static/usage/v6/item-group/sliding-items/react.md
@@ -1,100 +1,80 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
+import {
+  IonItem,
+  IonItemDivider,
+  IonItemGroup,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+} from '@ionic/react';
 
 function Example() {
   return (
     <>
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Fruits
-          </IonLabel>
+          <IonLabel>Fruits</IonLabel>
         </IonItemDivider>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Grapes
-            </IonLabel>
+            <IonLabel>Grapes</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Apples
-            </IonLabel>
+            <IonLabel>Apples</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem lines="none">
-            <IonLabel>
-              Bananas
-            </IonLabel>
+            <IonLabel>Bananas</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
       </IonItemGroup>
 
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Vegetables
-          </IonLabel>
+          <IonLabel>Vegetables</IonLabel>
         </IonItemDivider>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Carrots
-            </IonLabel>
+            <IonLabel>Carrots</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Broccoli
-            </IonLabel>
+            <IonLabel>Broccoli</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem lines="none">
-            <IonLabel>
-              Celery
-            </IonLabel>
+            <IonLabel>Celery</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
       </IonItemGroup>
diff --git a/static/usage/v6/item-group/sliding-items/vue.md b/static/usage/v6/item-group/sliding-items/vue.md
index 5110ba1abed..43109034598 100644
--- a/static/usage/v6/item-group/sliding-items/vue.md
+++ b/static/usage/v6/item-group/sliding-items/vue.md
@@ -2,101 +2,81 @@
 <template>
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Fruits
-      </ion-label>
+      <ion-label> Fruits </ion-label>
     </ion-item-divider>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Grapes
-        </ion-label>
+        <ion-label> Grapes </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <ion-item-option> Favorite </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Apples
-        </ion-label>
+        <ion-label> Apples </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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-label> Bananas </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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-label> Vegetables </ion-label>
     </ion-item-divider>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Carrots
-        </ion-label>
+        <ion-label> Carrots </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <ion-item-option> Favorite </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Broccoli
-        </ion-label>
+        <ion-label> Broccoli </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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-label> Celery </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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 {
+    IonItem,
+    IonItemDivider,
+    IonItemGroup,
+    IonItemOption,
+    IonItemOptions,
+    IonItemSliding,
+    IonLabel,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
diff --git a/static/usage/v6/item-sliding/basic/demo.html b/static/usage/v6/item-sliding/basic/demo.html
index 00e4bc82f99..a7bb911b9c8 100644
--- a/static/usage/v6/item-sliding/basic/demo.html
+++ b/static/usage/v6/item-sliding/basic/demo.html
@@ -1,66 +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 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" />
 
-<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>
 
-  <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>
 
-<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-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-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>
-              <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-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>
-              <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
+              <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/v6/item-sliding/expandable/demo.html b/static/usage/v6/item-sliding/expandable/demo.html
index bfdb1ef5884..a48559243bc 100644
--- a/static/usage/v6/item-sliding/expandable/demo.html
+++ b/static/usage/v6/item-sliding/expandable/demo.html
@@ -1,45 +1,43 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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>
-              <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
+              <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/v6/item-sliding/expandable/react.md b/static/usage/v6/item-sliding/expandable/react.md
index 3cb039d08ba..6879f80f7c1 100644
--- a/static/usage/v6/item-sliding/expandable/react.md
+++ b/static/usage/v6/item-sliding/expandable/react.md
@@ -7,7 +7,9 @@ function Example() {
     <IonList>
       <IonItemSliding>
         <IonItemOptions side="start">
-          <IonItemOption color="success" expandable>Archive</IonItemOption>
+          <IonItemOption color="success" expandable>
+            Archive
+          </IonItemOption>
         </IonItemOptions>
 
         <IonItem>
@@ -16,7 +18,9 @@ function Example() {
 
         <IonItemOptions side="end">
           <IonItemOption>Favorite</IonItemOption>
-          <IonItemOption color="danger" expandable>Delete</IonItemOption>
+          <IonItemOption color="danger" expandable>
+            Delete
+          </IonItemOption>
         </IonItemOptions>
       </IonItemSliding>
     </IonList>
diff --git a/static/usage/v6/item-sliding/icons/angular.md b/static/usage/v6/item-sliding/icons/angular.md
index 2ea983f2056..6556b41e94b 100644
--- a/static/usage/v6/item-sliding/icons/angular.md
+++ b/static/usage/v6/item-sliding/icons/angular.md
@@ -30,9 +30,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Start Icons
-      </ion-label>
+      <ion-label> Sliding Item with Start Icons </ion-label>
     </ion-item>
 
     <ion-item-options side="end">
@@ -56,9 +54,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with End Icons
-      </ion-label>
+      <ion-label> Sliding Item with End Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -82,9 +78,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Top Icons
-      </ion-label>
+      <ion-label> Sliding Item with Top Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -108,9 +102,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Bottom Icons
-      </ion-label>
+      <ion-label> Sliding Item with Bottom Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
diff --git a/static/usage/v6/item-sliding/icons/demo.html b/static/usage/v6/item-sliding/icons/demo.html
index 6bc01e42837..5e1171456fd 100644
--- a/static/usage/v6/item-sliding/icons/demo.html
+++ b/static/usage/v6/item-sliding/icons/demo.html
@@ -1,156 +1,146 @@
 <!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
+  <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/v6/item-sliding/icons/javascript.md b/static/usage/v6/item-sliding/icons/javascript.md
index 2ea983f2056..6556b41e94b 100644
--- a/static/usage/v6/item-sliding/icons/javascript.md
+++ b/static/usage/v6/item-sliding/icons/javascript.md
@@ -30,9 +30,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Start Icons
-      </ion-label>
+      <ion-label> Sliding Item with Start Icons </ion-label>
     </ion-item>
 
     <ion-item-options side="end">
@@ -56,9 +54,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with End Icons
-      </ion-label>
+      <ion-label> Sliding Item with End Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -82,9 +78,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Top Icons
-      </ion-label>
+      <ion-label> Sliding Item with Top Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -108,9 +102,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Bottom Icons
-      </ion-label>
+      <ion-label> Sliding Item with Bottom Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
diff --git a/static/usage/v6/item-sliding/icons/react.md b/static/usage/v6/item-sliding/icons/react.md
index be291c017e4..8961a06b352 100644
--- a/static/usage/v6/item-sliding/icons/react.md
+++ b/static/usage/v6/item-sliding/icons/react.md
@@ -36,9 +36,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with Start Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with Start Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions side="end">
@@ -62,9 +60,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with End Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with End Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions>
@@ -88,9 +84,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with Top Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with Top Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions>
@@ -114,9 +108,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with Bottom Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with Bottom Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions>
diff --git a/static/usage/v6/item-sliding/icons/vue.md b/static/usage/v6/item-sliding/icons/vue.md
index 6b456c9882e..7f10c0eaa51 100644
--- a/static/usage/v6/item-sliding/icons/vue.md
+++ b/static/usage/v6/item-sliding/icons/vue.md
@@ -31,9 +31,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with Start Icons
-        </ion-label>
+        <ion-label> Sliding Item with Start Icons </ion-label>
       </ion-item>
 
       <ion-item-options side="end">
@@ -57,9 +55,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with End Icons
-        </ion-label>
+        <ion-label> Sliding Item with End Icons </ion-label>
       </ion-item>
 
       <ion-item-options>
@@ -83,9 +79,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with Top Icons
-        </ion-label>
+        <ion-label> Sliding Item with Top Icons </ion-label>
       </ion-item>
 
       <ion-item-options>
@@ -109,9 +103,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with Bottom Icons
-        </ion-label>
+        <ion-label> Sliding Item with Bottom Icons </ion-label>
       </ion-item>
 
       <ion-item-options>
@@ -136,8 +128,8 @@
   export default defineComponent({
     components: { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
     setup() {
-      return { archive, heart, trash }
-    }
+      return { archive, heart, trash };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/item/basic/angular.md b/static/usage/v6/item/basic/angular.md
index f0b13250493..b975f267d90 100644
--- a/static/usage/v6/item/basic/angular.md
+++ b/static/usage/v6/item/basic/angular.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v6/item/basic/demo.html b/static/usage/v6/item/basic/demo.html
index 55e5fe17a30..b7cb114e8ca 100644
--- a/static/usage/v6/item/basic/demo.html
+++ b/static/usage/v6/item/basic/demo.html
@@ -1,69 +1,65 @@
 <!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>
-  <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>
 
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-item>
+            <ion-label>Basic Item</ion-label>
+          </ion-item>
 
-<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>
-            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 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>
-            <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>
-            <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
+          <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/v6/item/basic/javascript.md b/static/usage/v6/item/basic/javascript.md
index f0b13250493..b975f267d90 100644
--- a/static/usage/v6/item/basic/javascript.md
+++ b/static/usage/v6/item/basic/javascript.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v6/item/basic/react.md b/static/usage/v6/item/basic/react.md
index dfed86af19e..6154239cbf1 100644
--- a/static/usage/v6/item/basic/react.md
+++ b/static/usage/v6/item/basic/react.md
@@ -11,16 +11,14 @@ function Example() {
 
       <IonItem>
         <IonLabel>
-          Multi-line text that should ellipsis when it is too long
-          to fit on one line. Lorem ipsum dolor sit amet,
+          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,
+          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>
diff --git a/static/usage/v6/item/basic/vue.md b/static/usage/v6/item/basic/vue.md
index 479e90196a4..37b32f7c2ca 100644
--- a/static/usage/v6/item/basic/vue.md
+++ b/static/usage/v6/item/basic/vue.md
@@ -6,17 +6,15 @@
 
   <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,
+      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.
+      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>
 
diff --git a/static/usage/v6/item/buttons/angular.md b/static/usage/v6/item/buttons/angular.md
index bf7069f48f7..4d77ff8b9d8 100644
--- a/static/usage/v6/item/buttons/angular.md
+++ b/static/usage/v6/item/buttons/angular.md
@@ -1,12 +1,8 @@
 ```html
 <ion-item>
-  <ion-button slot="start">
-    Start
-  </ion-button>
+  <ion-button slot="start"> Start </ion-button>
   <ion-label>Default Buttons</ion-label>
-  <ion-button slot="end">
-    End
-  </ion-button>
+  <ion-button slot="end"> End </ion-button>
 </ion-item>
 
 <ion-item>
@@ -33,14 +29,8 @@
 
 <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-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/v6/item/buttons/demo.html b/static/usage/v6/item/buttons/demo.html
index 08847fb4fff..adbc05b5a2e 100644
--- a/static/usage/v6/item/buttons/demo.html
+++ b/static/usage/v6/item/buttons/demo.html
@@ -1,74 +1,62 @@
 <!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>
-  <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>
 
-  <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>
 
-<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">
-            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-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
+          <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/v6/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript.md
index bf7069f48f7..4d77ff8b9d8 100644
--- a/static/usage/v6/item/buttons/javascript.md
+++ b/static/usage/v6/item/buttons/javascript.md
@@ -1,12 +1,8 @@
 ```html
 <ion-item>
-  <ion-button slot="start">
-    Start
-  </ion-button>
+  <ion-button slot="start"> Start </ion-button>
   <ion-label>Default Buttons</ion-label>
-  <ion-button slot="end">
-    End
-  </ion-button>
+  <ion-button slot="end"> End </ion-button>
 </ion-item>
 
 <ion-item>
@@ -33,14 +29,8 @@
 
 <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-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/v6/item/buttons/react.md b/static/usage/v6/item/buttons/react.md
index 8776e5215fb..fda29c7f11a 100644
--- a/static/usage/v6/item/buttons/react.md
+++ b/static/usage/v6/item/buttons/react.md
@@ -7,13 +7,9 @@ function Example() {
   return (
     <>
       <IonItem>
-        <IonButton slot="start">
-          Start
-        </IonButton>
+        <IonButton slot="start">Start</IonButton>
         <IonLabel>Default Buttons</IonLabel>
-        <IonButton slot="end">
-          End
-        </IonButton>
+        <IonButton slot="end">End</IonButton>
       </IonItem>
 
       <IonItem>
diff --git a/static/usage/v6/item/buttons/vue.md b/static/usage/v6/item/buttons/vue.md
index 02de38e58ab..8680f189472 100644
--- a/static/usage/v6/item/buttons/vue.md
+++ b/static/usage/v6/item/buttons/vue.md
@@ -1,13 +1,9 @@
 ```html
 <template>
   <ion-item>
-    <ion-button slot="start">
-      Start
-    </ion-button>
+    <ion-button slot="start"> Start </ion-button>
     <ion-label>Default Buttons</ion-label>
-    <ion-button slot="end">
-      End
-    </ion-button>
+    <ion-button slot="end"> End </ion-button>
   </ion-item>
 
   <ion-item>
@@ -34,15 +30,9 @@
 
   <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-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>
 
@@ -54,8 +44,8 @@
   export default defineComponent({
     components: { IonButton, IonIcon, IonItem, IonLabel },
     setup() {
-      return { home, navigate, star }
-    }
+      return { home, navigate, star };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/item/clickable/demo.html b/static/usage/v6/item/clickable/demo.html
index 189cbffbd35..16b5c4d312c 100644
--- a/static/usage/v6/item/clickable/demo.html
+++ b/static/usage/v6/item/clickable/demo.html
@@ -1,44 +1,42 @@
 <!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>
-  <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>
 
-  <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>
 
-<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 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>
-          <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
+          <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/v6/item/counter/demo.html b/static/usage/v6/item/counter/demo.html
index cb68d350bc2..46dcb8e542e 100644
--- a/static/usage/v6/item/counter/demo.html
+++ b/static/usage/v6/item/counter/demo.html
@@ -1,47 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-    }
+      ion-item {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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>
 
-        <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
+  <script>
+    const customItem = document.querySelector('#custom-item');
+    customItem.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+  </script>
+</html>
diff --git a/static/usage/v6/item/counter/react.md b/static/usage/v6/item/counter/react.md
index 435701d5b53..3d986aaf37e 100644
--- a/static/usage/v6/item/counter/react.md
+++ b/static/usage/v6/item/counter/react.md
@@ -10,7 +10,10 @@ function Example() {
         <IonInput maxlength={20}></IonInput>
       </IonItem>
 
-      <IonItem counter={true} counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}>
+      <IonItem
+        counter={true}
+        counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}
+      >
         <IonLabel position="floating">Custom Counter Format</IonLabel>
         <IonInput maxlength={20}></IonInput>
       </IonItem>
diff --git a/static/usage/v6/item/counter/vue.md b/static/usage/v6/item/counter/vue.md
index 3a97d40743a..84bf7ec643d 100644
--- a/static/usage/v6/item/counter/vue.md
+++ b/static/usage/v6/item/counter/vue.md
@@ -20,8 +20,8 @@
     methods: {
       customFormatter(inputLength, maxLength) {
         return `${maxLength - inputLength} characters remaining`;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/item/detail-arrows/demo.html b/static/usage/v6/item/detail-arrows/demo.html
index 1cc1c907045..85c79083d9f 100644
--- a/static/usage/v6/item/detail-arrows/demo.html
+++ b/static/usage/v6/item/detail-arrows/demo.html
@@ -1,64 +1,62 @@
 <!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
+  <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/v6/item/detail-arrows/vue.md b/static/usage/v6/item/detail-arrows/vue.md
index d341c004f15..54010095652 100644
--- a/static/usage/v6/item/detail-arrows/vue.md
+++ b/static/usage/v6/item/detail-arrows/vue.md
@@ -51,3 +51,4 @@
     },
   });
 </script>
+```
diff --git a/static/usage/v6/item/helper-error/demo.html b/static/usage/v6/item/helper-error/demo.html
index 399f66d1270..5a495cdd6cc 100644
--- a/static/usage/v6/item/helper-error/demo.html
+++ b/static/usage/v6/item/helper-error/demo.html
@@ -1,56 +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
+  <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/v6/item/helper-error/javascript.md b/static/usage/v6/item/helper-error/javascript.md
index eb0d43327d9..6d0772af984 100644
--- a/static/usage/v6/item/helper-error/javascript.md
+++ b/static/usage/v6/item/helper-error/javascript.md
@@ -14,7 +14,9 @@
   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])?)*$/);
+    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) => {
@@ -23,13 +25,13 @@
     item.classList.remove('ion-valid');
     item.classList.remove('ion-invalid');
 
-    if (value === "") return;
+    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/v6/item/helper-error/react.md b/static/usage/v6/item/helper-error/react.md
index a1e0e1e1b25..84437995c01 100644
--- a/static/usage/v6/item/helper-error/react.md
+++ b/static/usage/v6/item/helper-error/react.md
@@ -27,7 +27,10 @@ function Example() {
   };
 
   return (
-    <IonItem fill="solid" className={`${isValid && 'ion-valid'} ${isValid === false && 'ion-invalid'} ${isTouched && 'ion-touched'}`}>
+    <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>
diff --git a/static/usage/v6/item/helper-error/vue.md b/static/usage/v6/item/helper-error/vue.md
index 0febb45cfe4..04ed67af38e 100644
--- a/static/usage/v6/item/helper-error/vue.md
+++ b/static/usage/v6/item/helper-error/vue.md
@@ -16,7 +16,9 @@
     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])?)*$/);
+        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) {
@@ -33,8 +35,8 @@
       },
 
       markTouched() {
-        this.$refs.item.$el.classList.add('ion-touched')
-      }
+        this.$refs.item.$el.classList.add('ion-touched');
+      },
     },
   });
 </script>
diff --git a/static/usage/v6/item/icons/angular.md b/static/usage/v6/item/icons/angular.md
index 49a1cc707e3..b81a463e004 100644
--- a/static/usage/v6/item/icons/angular.md
+++ b/static/usage/v6/item/icons/angular.md
@@ -1,29 +1,21 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Icon
-  </ion-label>
+  <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-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-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-label> Default Icon </ion-label>
 </ion-item>
 ```
diff --git a/static/usage/v6/item/icons/demo.html b/static/usage/v6/item/icons/demo.html
index 6cbd9d1b2a9..28809e7b711 100644
--- a/static/usage/v6/item/icons/demo.html
+++ b/static/usage/v6/item/icons/demo.html
@@ -1,56 +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" />
 
-<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>
 
-  <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>
 
-<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>
-            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-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
+          <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/v6/item/icons/javascript.md b/static/usage/v6/item/icons/javascript.md
index 49a1cc707e3..b81a463e004 100644
--- a/static/usage/v6/item/icons/javascript.md
+++ b/static/usage/v6/item/icons/javascript.md
@@ -1,29 +1,21 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Icon
-  </ion-label>
+  <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-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-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-label> Default Icon </ion-label>
 </ion-item>
 ```
diff --git a/static/usage/v6/item/icons/react.md b/static/usage/v6/item/icons/react.md
index a5fc0ae6629..09496398f7f 100644
--- a/static/usage/v6/item/icons/react.md
+++ b/static/usage/v6/item/icons/react.md
@@ -7,31 +7,23 @@ function Example() {
   return (
     <>
       <IonItem>
-        <IonLabel>
-          Default Icon
-        </IonLabel>
+        <IonLabel>Default Icon</IonLabel>
         <IonIcon icon={informationCircle} slot="end"></IonIcon>
       </IonItem>
 
       <IonItem>
-        <IonLabel>
-          Large Icon
-        </IonLabel>
+        <IonLabel>Large Icon</IonLabel>
         <IonIcon icon={informationCircle} size="large" slot="end"></IonIcon>
       </IonItem>
 
       <IonItem>
-        <IonLabel>
-          Small Icon
-        </IonLabel>
+        <IonLabel>Small Icon</IonLabel>
         <IonIcon icon={informationCircle} size="small" slot="end"></IonIcon>
       </IonItem>
 
       <IonItem>
         <IonIcon icon={star} slot="start"></IonIcon>
-        <IonLabel>
-          Default Icon
-        </IonLabel>
+        <IonLabel>Default Icon</IonLabel>
       </IonItem>
     </>
   );
diff --git a/static/usage/v6/item/icons/vue.md b/static/usage/v6/item/icons/vue.md
index 82e09004fbe..a89e5e6aad0 100644
--- a/static/usage/v6/item/icons/vue.md
+++ b/static/usage/v6/item/icons/vue.md
@@ -1,31 +1,23 @@
 ```html
 <template>
   <ion-item>
-    <ion-label>
-      Default Icon
-    </ion-label>
+    <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-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-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-label> Default Icon </ion-label>
   </ion-item>
 </template>
 
@@ -37,8 +29,8 @@
   export default defineComponent({
     components: { IonButton, IonIcon, IonItem, IonLabel },
     setup() {
-      return { informationCircle, star }
-    }
+      return { informationCircle, star };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/item/inputs/demo.html b/static/usage/v6/item/inputs/demo.html
index 4ab92196b2e..9b91ee5b96a 100644
--- a/static/usage/v6/item/inputs/demo.html
+++ b/static/usage/v6/item/inputs/demo.html
@@ -1,86 +1,84 @@
 <!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>
-  <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>
 
-  <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>
 
-<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="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="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>
-          <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="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 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>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>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>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
+          <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/v6/item/inputs/react.md b/static/usage/v6/item/inputs/react.md
index 0cb6523f053..d1ef33c8b27 100644
--- a/static/usage/v6/item/inputs/react.md
+++ b/static/usage/v6/item/inputs/react.md
@@ -1,6 +1,15 @@
 ```tsx
 import React from 'react';
-import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+import {
+  IonCheckbox,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonRange,
+  IonSelect,
+  IonSelectOption,
+  IonToggle,
+} from '@ionic/react';
 
 function Example() {
   return (
diff --git a/static/usage/v6/item/inputs/vue.md b/static/usage/v6/item/inputs/vue.md
index 7dc085a7a4d..11f20443f99 100644
--- a/static/usage/v6/item/inputs/vue.md
+++ b/static/usage/v6/item/inputs/vue.md
@@ -60,7 +60,16 @@
 </template>
 
 <script lang="ts">
-  import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/vue';
+  import {
+    IonCheckbox,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonRange,
+    IonSelect,
+    IonSelectOption,
+    IonToggle,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
diff --git a/static/usage/v6/item/lines/angular.md b/static/usage/v6/item/lines/angular.md
index b0700ae1a1b..022573e9d9d 100644
--- a/static/usage/v6/item/lines/angular.md
+++ b/static/usage/v6/item/lines/angular.md
@@ -1,8 +1,6 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Item Lines
-  </ion-label>
+  <ion-label> Default Item Lines </ion-label>
 </ion-item>
 
 <ion-item lines="inset">
diff --git a/static/usage/v6/item/lines/demo.html b/static/usage/v6/item/lines/demo.html
index 79cb3ce7933..6e86afd7dd4 100644
--- a/static/usage/v6/item/lines/demo.html
+++ b/static/usage/v6/item/lines/demo.html
@@ -1,70 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
-<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>
 
-  <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>
 
-<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="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="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 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>
-          <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="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="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
+          <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/v6/item/lines/javascript.md b/static/usage/v6/item/lines/javascript.md
index b0700ae1a1b..022573e9d9d 100644
--- a/static/usage/v6/item/lines/javascript.md
+++ b/static/usage/v6/item/lines/javascript.md
@@ -1,8 +1,6 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Item Lines
-  </ion-label>
+  <ion-label> Default Item Lines </ion-label>
 </ion-item>
 
 <ion-item lines="inset">
diff --git a/static/usage/v6/item/lines/react.md b/static/usage/v6/item/lines/react.md
index c5e2cf3f55c..dbe79214349 100644
--- a/static/usage/v6/item/lines/react.md
+++ b/static/usage/v6/item/lines/react.md
@@ -7,9 +7,7 @@ function Example() {
   return (
     <>
       <IonItem>
-        <IonLabel>
-          Default Item Lines
-        </IonLabel>
+        <IonLabel>Default Item Lines</IonLabel>
       </IonItem>
 
       <IonItem lines="inset">
diff --git a/static/usage/v6/item/lines/vue.md b/static/usage/v6/item/lines/vue.md
index 37c6c432ca4..fb855de221f 100644
--- a/static/usage/v6/item/lines/vue.md
+++ b/static/usage/v6/item/lines/vue.md
@@ -1,9 +1,7 @@
 ```html
 <template>
   <ion-item>
-    <ion-label>
-      Default Item Lines
-    </ion-label>
+    <ion-label> Default Item Lines </ion-label>
   </ion-item>
 
   <ion-item lines="inset">
@@ -52,7 +50,7 @@
     components: { IonIcon, IonItem, IonLabel },
     setup() {
       return { informationCircle, star };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/item/media/angular.md b/static/usage/v6/item/media/angular.md
index 915969f127e..c51ab29463a 100644
--- a/static/usage/v6/item/media/angular.md
+++ b/static/usage/v6/item/media/angular.md
@@ -3,17 +3,13 @@
   <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-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-label> Thumbnail Item </ion-label>
 </ion-item>
 ```
diff --git a/static/usage/v6/item/media/demo.html b/static/usage/v6/item/media/demo.html
index 451c5d6eaf1..67dd1f096b6 100644
--- a/static/usage/v6/item/media/demo.html
+++ b/static/usage/v6/item/media/demo.html
@@ -1,46 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
-<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>
 
-  <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>
 
-<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
+          <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/v6/item/media/javascript.md b/static/usage/v6/item/media/javascript.md
index 915969f127e..c51ab29463a 100644
--- a/static/usage/v6/item/media/javascript.md
+++ b/static/usage/v6/item/media/javascript.md
@@ -3,17 +3,13 @@
   <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-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-label> Thumbnail Item </ion-label>
 </ion-item>
 ```
diff --git a/static/usage/v6/item/media/react.md b/static/usage/v6/item/media/react.md
index 21ba7c98f65..dae8042c9ae 100644
--- a/static/usage/v6/item/media/react.md
+++ b/static/usage/v6/item/media/react.md
@@ -9,18 +9,14 @@ function Example() {
         <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>
+        <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>
+        <IonLabel>Thumbnail Item</IonLabel>
       </IonItem>
     </>
   );
diff --git a/static/usage/v6/item/media/vue.md b/static/usage/v6/item/media/vue.md
index 72dd55ef587..38b16a91fb3 100644
--- a/static/usage/v6/item/media/vue.md
+++ b/static/usage/v6/item/media/vue.md
@@ -4,18 +4,14 @@
     <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-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-label> Thumbnail Item </ion-label>
   </ion-item>
 </template>
 
diff --git a/static/usage/v6/item/theming/colors/demo.html b/static/usage/v6/item/theming/colors/demo.html
index fbd225c988b..f4f73219337 100644
--- a/static/usage/v6/item/theming/colors/demo.html
+++ b/static/usage/v6/item/theming/colors/demo.html
@@ -1,59 +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" />
 
-<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>
 
-  <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
+  <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/v6/item/theming/css-properties/demo.html b/static/usage/v6/item/theming/css-properties/demo.html
index c255a677199..e40ce993ece 100644
--- a/static/usage/v6/item/theming/css-properties/demo.html
+++ b/static/usage/v6/item/theming/css-properties/demo.html
@@ -1,57 +1,55 @@
 <!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
+  <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/v6/item/theming/css-shadow-parts/demo.html b/static/usage/v6/item/theming/css-shadow-parts/demo.html
index 132c0900cb8..89792ed7ca3 100644
--- a/static/usage/v6/item/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/item/theming/css-shadow-parts/demo.html
@@ -1,57 +1,55 @@
 <!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
+  <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/v6/item/theming/input-highlight/demo.html b/static/usage/v6/item/theming/input-highlight/demo.html
index 2094539141e..9a95d3cdde4 100644
--- a/static/usage/v6/item/theming/input-highlight/demo.html
+++ b/static/usage/v6/item/theming/input-highlight/demo.html
@@ -1,50 +1,48 @@
 <!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>
-  <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>
-    .container {
-      display: block;
-    }
+      ion-item {
+        --highlight-height: 2px;
+        --highlight-color-focused: #43e7f3;
+        --highlight-color-valid: #6f58d8;
+        --highlight-color-invalid: #ff46be;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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
+          <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/v6/label/basic/demo.html b/static/usage/v6/label/basic/demo.html
index a6bad98959e..5af936881c5 100644
--- a/static/usage/v6/label/basic/demo.html
+++ b/static/usage/v6/label/basic/demo.html
@@ -1,24 +1,22 @@
 <!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>
 
-<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
+  <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/v6/label/input/demo.html b/static/usage/v6/label/input/demo.html
index d43bb5ba712..c352274c8d6 100644
--- a/static/usage/v6/label/input/demo.html
+++ b/static/usage/v6/label/input/demo.html
@@ -1,59 +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-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
+  <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>
+
+  <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/v6/label/item/angular.md b/static/usage/v6/label/item/angular.md
index be252b899a0..54f24979079 100644
--- a/static/usage/v6/label/item/angular.md
+++ b/static/usage/v6/label/item/angular.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v6/label/item/demo.html b/static/usage/v6/label/item/demo.html
index 67dbf234345..c169bc73d8f 100644
--- a/static/usage/v6/label/item/demo.html
+++ b/static/usage/v6/label/item/demo.html
@@ -1,56 +1,51 @@
 <!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>
-  <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>
 
-  <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>
 
-<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>
-            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 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
+          <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/v6/label/item/javascript.md b/static/usage/v6/label/item/javascript.md
index be252b899a0..54f24979079 100644
--- a/static/usage/v6/label/item/javascript.md
+++ b/static/usage/v6/label/item/javascript.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v6/label/item/react.md b/static/usage/v6/label/item/react.md
index 88e4f904deb..f5bdf5a5d1b 100644
--- a/static/usage/v6/label/item/react.md
+++ b/static/usage/v6/label/item/react.md
@@ -11,16 +11,14 @@ function Example() {
 
       <IonItem>
         <IonLabel>
-          Multi-line text that should ellipsis when it is too long
-          to fit on one line. Lorem ipsum dolor sit amet,
+          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,
+          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>
diff --git a/static/usage/v6/label/item/vue.md b/static/usage/v6/label/item/vue.md
index 99ec3ea3d40..fe4cd48904a 100644
--- a/static/usage/v6/label/item/vue.md
+++ b/static/usage/v6/label/item/vue.md
@@ -6,17 +6,15 @@
 
   <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,
+      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.
+      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>
 
diff --git a/static/usage/v6/label/theming/colors/demo.html b/static/usage/v6/label/theming/colors/demo.html
index 3444d3c2da9..c168364f9b4 100644
--- a/static/usage/v6/label/theming/colors/demo.html
+++ b/static/usage/v6/label/theming/colors/demo.html
@@ -1,39 +1,37 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/list-header/basic/demo.html b/static/usage/v6/list-header/basic/demo.html
index dae3477fac9..c44ca9a3d3d 100644
--- a/static/usage/v6/list-header/basic/demo.html
+++ b/static/usage/v6/list-header/basic/demo.html
@@ -1,49 +1,47 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/list-header/buttons/demo.html b/static/usage/v6/list-header/buttons/demo.html
index 19ecb87a9a2..9a8778e10e0 100644
--- a/static/usage/v6/list-header/buttons/demo.html
+++ b/static/usage/v6/list-header/buttons/demo.html
@@ -1,50 +1,48 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/list-header/lines/demo.html b/static/usage/v6/list-header/lines/demo.html
index dad3ebc17cb..5b87be8940f 100644
--- a/static/usage/v6/list-header/lines/demo.html
+++ b/static/usage/v6/list-header/lines/demo.html
@@ -1,64 +1,62 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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="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
+          <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/v6/list-header/theming/colors/demo.html b/static/usage/v6/list-header/theming/colors/demo.html
index fa36d9b0a9a..16e8d5ef111 100644
--- a/static/usage/v6/list-header/theming/colors/demo.html
+++ b/static/usage/v6/list-header/theming/colors/demo.html
@@ -1,59 +1,57 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/list-header/theming/css-properties/demo.html b/static/usage/v6/list-header/theming/css-properties/demo.html
index 133c2d8f994..1fe6e1de395 100644
--- a/static/usage/v6/list-header/theming/css-properties/demo.html
+++ b/static/usage/v6/list-header/theming/css-properties/demo.html
@@ -1,37 +1,35 @@
 <!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" />
 
-<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;
 
-  <style>
-    ion-list-header {
-      --background: #19422d;
-      --color: #fff;
+        --border-width: 0 0 4px 0;
+        --border-color: #f24aec;
+        --border-style: double;
+      }
+    </style>
+  </head>
 
-      --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
+  <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/v6/list/basic/demo.html b/static/usage/v6/list/basic/demo.html
index 86ed4981f63..a29da0b96c9 100644
--- a/static/usage/v6/list/basic/demo.html
+++ b/static/usage/v6/list/basic/demo.html
@@ -1,46 +1,44 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/list/inset/demo.html b/static/usage/v6/list/inset/demo.html
index b2cbacc4e11..5d8520d0ebb 100644
--- a/static/usage/v6/list/inset/demo.html
+++ b/static/usage/v6/list/inset/demo.html
@@ -1,51 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
-<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;
+      }
 
-  <style>
-    ion-content {
-      --background: #f9f9f9;
-    }
+      .container {
+        flex-flow: column;
+        align-items: stretch;
+      }
+    </style>
+  </head>
 
-    .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
+  <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/v6/list/lines/demo.html b/static/usage/v6/list/lines/demo.html
index 259465266e1..0e922f56516 100644
--- a/static/usage/v6/list/lines/demo.html
+++ b/static/usage/v6/list/lines/demo.html
@@ -1,66 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
-<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>
 
-  <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>
 
-<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="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
+          <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/v6/loading/controller/demo.html b/static/usage/v6/loading/controller/demo.html
index 9a3385f7307..3fe1cc4140b 100644
--- a/static/usage/v6/loading/controller/demo.html
+++ b/static/usage/v6/loading/controller/demo.html
@@ -1,39 +1,37 @@
 <!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>
 
-<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>
 
-<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
+    <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/v6/loading/controller/javascript.md b/static/usage/v6/loading/controller/javascript.md
index c5507d123af..f54756c396b 100644
--- a/static/usage/v6/loading/controller/javascript.md
+++ b/static/usage/v6/loading/controller/javascript.md
@@ -2,13 +2,13 @@
 <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();
-}
+  var showLoading = async () => {
+    const loading = await loadingController.create({
+      message: 'Dismissing after 3 seconds...',
+      duration: 3000,
+    });
+
+    loading.present();
+  };
 </script>
 ```
diff --git a/static/usage/v6/loading/controller/react.md b/static/usage/v6/loading/controller/react.md
index 16280a1e91a..06dc3413bab 100644
--- a/static/usage/v6/loading/controller/react.md
+++ b/static/usage/v6/loading/controller/react.md
@@ -2,7 +2,6 @@
 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
@@ -11,12 +10,14 @@ function Example() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [present, dismiss] = useIonLoading();
   return (
-    <IonButton onClick={() => {
-      present({
-        message: 'Dismissing after 3 seconds...',
-        duration: 3000
-      })
-    }}>
+    <IonButton
+      onClick={() => {
+        present({
+          message: 'Dismissing after 3 seconds...',
+          duration: 3000,
+        });
+      }}
+    >
       Show Loading
     </IonButton>
   );
diff --git a/static/usage/v6/loading/controller/vue.md b/static/usage/v6/loading/controller/vue.md
index 17b65b33af0..e80b61cc8b3 100644
--- a/static/usage/v6/loading/controller/vue.md
+++ b/static/usage/v6/loading/controller/vue.md
@@ -13,14 +13,14 @@
       const showLoading = async () => {
         const loading = await loadingController.create({
           message: 'Dismissing after 3 seconds...',
-          duration: 3000
+          duration: 3000,
         });
-        
+
         loading.present();
-      }
-      
-      return { showLoading }
-    }
+      };
+
+      return { showLoading };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/loading/spinners/demo.html b/static/usage/v6/loading/spinners/demo.html
index 01929a4e1f2..2b441d8c068 100644
--- a/static/usage/v6/loading/spinners/demo.html
+++ b/static/usage/v6/loading/spinners/demo.html
@@ -1,40 +1,38 @@
 <!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>
 
-<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>
 
-<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
+    <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/v6/loading/spinners/javascript.md b/static/usage/v6/loading/spinners/javascript.md
index 09712e70a92..b16d6a849f0 100644
--- a/static/usage/v6/loading/spinners/javascript.md
+++ b/static/usage/v6/loading/spinners/javascript.md
@@ -2,14 +2,14 @@
 <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();
-}
+  var showLoading = async () => {
+    const loading = await loadingController.create({
+      message: 'Loading...',
+      duration: 3000,
+      spinner: 'circles',
+    });
+
+    loading.present();
+  };
 </script>
 ```
diff --git a/static/usage/v6/loading/spinners/react.md b/static/usage/v6/loading/spinners/react.md
index e2c492f1431..e90cbb4e555 100644
--- a/static/usage/v6/loading/spinners/react.md
+++ b/static/usage/v6/loading/spinners/react.md
@@ -2,7 +2,6 @@
 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
@@ -11,13 +10,15 @@ function Example() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [present, dismiss] = useIonLoading();
   return (
-    <IonButton onClick={() => {
-      present({
-        message: 'Loading...',
-        duration: 3000,
-        spinner: 'circles'
-      })
-    }}>
+    <IonButton
+      onClick={() => {
+        present({
+          message: 'Loading...',
+          duration: 3000,
+          spinner: 'circles',
+        });
+      }}
+    >
       Show Loading
     </IonButton>
   );
diff --git a/static/usage/v6/loading/spinners/vue.md b/static/usage/v6/loading/spinners/vue.md
index 4d01e7fc869..77719a4a704 100644
--- a/static/usage/v6/loading/spinners/vue.md
+++ b/static/usage/v6/loading/spinners/vue.md
@@ -14,14 +14,14 @@
         const loading = await loadingController.create({
           message: 'Loading...',
           duration: 3000,
-          spinner: 'circles'
+          spinner: 'circles',
         });
-        
+
         loading.present();
-      }
-      
-      return { showLoading }
-    }
+      };
+
+      return { showLoading };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/loading/theming/angular/global_css.md b/static/usage/v6/loading/theming/angular/global_css.md
index 16bf7af3522..af410626c52 100644
--- a/static/usage/v6/loading/theming/angular/global_css.md
+++ b/static/usage/v6/loading/theming/angular/global_css.md
@@ -5,4 +5,4 @@ ion-loading.custom-loading {
 
   color: #1c6dff;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/loading/theming/demo.html b/static/usage/v6/loading/theming/demo.html
index d901557c331..8e609b364ef 100644
--- a/static/usage/v6/loading/theming/demo.html
+++ b/static/usage/v6/loading/theming/demo.html
@@ -1,48 +1,46 @@
 <!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;
 
-<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>
 
-      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>
 
-<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
+    <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/v6/loading/theming/javascript.md b/static/usage/v6/loading/theming/javascript.md
index 68e0943cd3d..5c0258d1f9a 100644
--- a/static/usage/v6/loading/theming/javascript.md
+++ b/static/usage/v6/loading/theming/javascript.md
@@ -2,23 +2,23 @@
 <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();
-}
+  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;
+  ion-loading.custom-loading {
+    --background: #e3edff;
+    --spinner-color: #1c6dff;
 
-  color: #1c6dff;
-}
+    color: #1c6dff;
+  }
 </style>
 ```
diff --git a/static/usage/v6/loading/theming/react.md b/static/usage/v6/loading/theming/react.md
index e2c492f1431..e90cbb4e555 100644
--- a/static/usage/v6/loading/theming/react.md
+++ b/static/usage/v6/loading/theming/react.md
@@ -2,7 +2,6 @@
 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
@@ -11,13 +10,15 @@ function Example() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [present, dismiss] = useIonLoading();
   return (
-    <IonButton onClick={() => {
-      present({
-        message: 'Loading...',
-        duration: 3000,
-        spinner: 'circles'
-      })
-    }}>
+    <IonButton
+      onClick={() => {
+        present({
+          message: 'Loading...',
+          duration: 3000,
+          spinner: 'circles',
+        });
+      }}
+    >
       Show Loading
     </IonButton>
   );
diff --git a/static/usage/v6/loading/theming/react/main_css.md b/static/usage/v6/loading/theming/react/main_css.md
index 16bf7af3522..af410626c52 100644
--- a/static/usage/v6/loading/theming/react/main_css.md
+++ b/static/usage/v6/loading/theming/react/main_css.md
@@ -5,4 +5,4 @@ ion-loading.custom-loading {
 
   color: #1c6dff;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/loading/theming/react/main_tsx.md b/static/usage/v6/loading/theming/react/main_tsx.md
index cc57cc1dce8..b92952e42b6 100644
--- a/static/usage/v6/loading/theming/react/main_tsx.md
+++ b/static/usage/v6/loading/theming/react/main_tsx.md
@@ -5,7 +5,6 @@ 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
@@ -14,13 +13,15 @@ function Example() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [present, dismiss] = useIonLoading();
   return (
-    <IonButton onClick={() => {
-      present({
-        message: 'Loading...',
-        duration: 3000,
-        cssClass: 'custom-loading'
-      })
-    }}>
+    <IonButton
+      onClick={() => {
+        present({
+          message: 'Loading...',
+          duration: 3000,
+          cssClass: 'custom-loading',
+        });
+      }}
+    >
       Show Loading
     </IonButton>
   );
diff --git a/static/usage/v6/loading/theming/vue.md b/static/usage/v6/loading/theming/vue.md
index 6f380da3f1f..5387b241463 100644
--- a/static/usage/v6/loading/theming/vue.md
+++ b/static/usage/v6/loading/theming/vue.md
@@ -14,14 +14,14 @@
         const loading = await loadingController.create({
           message: 'Loading...',
           duration: 3000,
-          cssClass: 'custom-loading'
+          cssClass: 'custom-loading',
         });
-        
+
         loading.present();
-      }
-      
-      return { showLoading }
-    }
+      };
+
+      return { showLoading };
+    },
   });
 </script>
 <style>
diff --git a/static/usage/v6/menu/basic/angular.md b/static/usage/v6/menu/basic/angular.md
index c169f35f1f4..0fb5465519f 100644
--- a/static/usage/v6/menu/basic/angular.md
+++ b/static/usage/v6/menu/basic/angular.md
@@ -16,8 +16,6 @@
       <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-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
 </div>
 ```
diff --git a/static/usage/v6/menu/basic/demo.html b/static/usage/v6/menu/basic/demo.html
index 83f3f3ac7c4..ec99a3d894e 100644
--- a/static/usage/v6/menu/basic/demo.html
+++ b/static/usage/v6/menu/basic/demo.html
@@ -1,40 +1,36 @@
 <!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>
 
-<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
+  <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/v6/menu/basic/javascript.md b/static/usage/v6/menu/basic/javascript.md
index 570c03c9512..afb14178ea4 100644
--- a/static/usage/v6/menu/basic/javascript.md
+++ b/static/usage/v6/menu/basic/javascript.md
@@ -16,8 +16,6 @@
       <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-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
 </div>
 ```
diff --git a/static/usage/v6/menu/basic/react.md b/static/usage/v6/menu/basic/react.md
index 71abc258aef..671dba8a744 100644
--- a/static/usage/v6/menu/basic/react.md
+++ b/static/usage/v6/menu/basic/react.md
@@ -1,15 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonMenu,
-  IonMenuButton,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 function Example() {
   return (
     <>
@@ -30,9 +21,7 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </IonContent>
+        <IonContent className="ion-padding">Tap the button in the toolbar to open the menu.</IonContent>
       </IonPage>
     </>
   );
diff --git a/static/usage/v6/menu/basic/vue.md b/static/usage/v6/menu/basic/vue.md
index d6e3d73d648..531c50678f8 100644
--- a/static/usage/v6/menu/basic/vue.md
+++ b/static/usage/v6/menu/basic/vue.md
@@ -17,23 +17,12 @@
         <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-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 { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -45,7 +34,7 @@
       IonMenuButton,
       IonPage,
       IonTitle,
-      IonToolbar
+      IonToolbar,
     },
   });
 </script>
diff --git a/static/usage/v6/menu/theming/angular/example_component_css.md b/static/usage/v6/menu/theming/angular/example_component_css.md
index 839c8f41df5..1bba1305577 100644
--- a/static/usage/v6/menu/theming/angular/example_component_css.md
+++ b/static/usage/v6/menu/theming/angular/example_component_css.md
@@ -8,4 +8,4 @@ ion-menu::part(container) {
 
   box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/menu/theming/angular/example_component_html.md b/static/usage/v6/menu/theming/angular/example_component_html.md
index f630cf4c378..f46819d3e99 100644
--- a/static/usage/v6/menu/theming/angular/example_component_html.md
+++ b/static/usage/v6/menu/theming/angular/example_component_html.md
@@ -17,9 +17,7 @@
         <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-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
   </div>
 </ion-app>
 ```
diff --git a/static/usage/v6/menu/theming/demo.html b/static/usage/v6/menu/theming/demo.html
index e3d7c78a20f..e5f8f127c54 100644
--- a/static/usage/v6/menu/theming/demo.html
+++ b/static/usage/v6/menu/theming/demo.html
@@ -1,51 +1,47 @@
 <!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);
+      }
 
-<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;
 
-    ion-menu::part(container) {
-      border-radius: 0 20px 20px 0;
+        box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+      }
+    </style>
+  </head>
 
-      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
+  <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/v6/menu/theming/javascript.md b/static/usage/v6/menu/theming/javascript.md
index a147ef68090..6df6026c610 100644
--- a/static/usage/v6/menu/theming/javascript.md
+++ b/static/usage/v6/menu/theming/javascript.md
@@ -17,9 +17,7 @@
         <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-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
   </div>
 </ion-app>
 
diff --git a/static/usage/v6/menu/theming/react/main_css.md b/static/usage/v6/menu/theming/react/main_css.md
index 839c8f41df5..1bba1305577 100644
--- a/static/usage/v6/menu/theming/react/main_css.md
+++ b/static/usage/v6/menu/theming/react/main_css.md
@@ -8,4 +8,4 @@ ion-menu::part(container) {
 
   box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/menu/theming/react/main_tsx.md b/static/usage/v6/menu/theming/react/main_tsx.md
index c935fefb33f..c2f3d72ab2b 100644
--- a/static/usage/v6/menu/theming/react/main_tsx.md
+++ b/static/usage/v6/menu/theming/react/main_tsx.md
@@ -1,15 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonMenu,
-  IonMenuButton,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 import './main.css';
 
@@ -33,9 +24,7 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </IonContent>
+        <IonContent className="ion-padding">Tap the button in the toolbar to open the menu.</IonContent>
       </IonPage>
     </>
   );
diff --git a/static/usage/v6/menu/theming/vue.md b/static/usage/v6/menu/theming/vue.md
index b9d02e48b1f..27a96f00e0b 100644
--- a/static/usage/v6/menu/theming/vue.md
+++ b/static/usage/v6/menu/theming/vue.md
@@ -17,23 +17,12 @@
         <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-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 { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -45,7 +34,7 @@
       IonMenuButton,
       IonPage,
       IonTitle,
-      IonToolbar
+      IonToolbar,
     },
   });
 </script>
diff --git a/static/usage/v6/menu/toggle/demo.html b/static/usage/v6/menu/toggle/demo.html
index 6a760b44aa3..3d8b391136b 100644
--- a/static/usage/v6/menu/toggle/demo.html
+++ b/static/usage/v6/menu/toggle/demo.html
@@ -1,43 +1,41 @@
 <!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>
 
-<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
+  <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/v6/menu/toggle/react.md b/static/usage/v6/menu/toggle/react.md
index a940b83e4af..3428aaa42d0 100644
--- a/static/usage/v6/menu/toggle/react.md
+++ b/static/usage/v6/menu/toggle/react.md
@@ -1,15 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonButton,
-  IonContent,
-  IonHeader,
-  IonMenu,
-  IonMenuToggle,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
+import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 function Example() {
   return (
     <>
@@ -22,7 +13,7 @@ function Example() {
         <IonContent className="ion-padding">
           <IonMenuToggle>
             <IonButton>Click to close the menu</IonButton>
-          </IonMenuToggle>  
+          </IonMenuToggle>
         </IonContent>
       </IonMenu>
       <IonPage id="main-content">
diff --git a/static/usage/v6/menu/toggle/vue.md b/static/usage/v6/menu/toggle/vue.md
index 2cc4807109e..6b723df95ad 100644
--- a/static/usage/v6/menu/toggle/vue.md
+++ b/static/usage/v6/menu/toggle/vue.md
@@ -27,16 +27,7 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonMenu,
-    IonMenuToggle,
-    IonPage,
-    IonTitle,
-    IonToolbar
-  } from '@ionic/vue';
+  import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -48,7 +39,7 @@
       IonMenuToggle,
       IonPage,
       IonTitle,
-      IonToolbar
+      IonToolbar,
     },
   });
 </script>
diff --git a/static/usage/v6/menu/type/angular/example_component_html.md b/static/usage/v6/menu/type/angular/example_component_html.md
index 7154c645660..fd995d7a32f 100644
--- a/static/usage/v6/menu/type/angular/example_component_html.md
+++ b/static/usage/v6/menu/type/angular/example_component_html.md
@@ -39,10 +39,11 @@
         </ion-label>
         <ion-radio value="push"></ion-radio>
       </ion-item>
-    </ion-radio-group> <br />
+    </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/v6/menu/type/demo.html b/static/usage/v6/menu/type/demo.html
index 7dbfe39cffa..227dc831560 100644
--- a/static/usage/v6/menu/type/demo.html
+++ b/static/usage/v6/menu/type/demo.html
@@ -1,74 +1,73 @@
 <!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>
 
-<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>
 
-<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>
 
-    <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');
 
-  <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
+      radioGroup.addEventListener('ionChange', (ev) => {
+        menu.type = ev.detail.value;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/menu/type/javascript.md b/static/usage/v6/menu/type/javascript.md
index 24dc49cf906..c8b49975b84 100644
--- a/static/usage/v6/menu/type/javascript.md
+++ b/static/usage/v6/menu/type/javascript.md
@@ -39,7 +39,8 @@
         </ion-label>
         <ion-radio value="push"></ion-radio>
       </ion-item>
-    </ion-radio-group> <br />
+    </ion-radio-group>
+    <br />
     <ion-menu-toggle>
       <ion-button>Click to open the menu</ion-button>
     </ion-menu-toggle>
diff --git a/static/usage/v6/menu/type/react.md b/static/usage/v6/menu/type/react.md
index 806e67e21a2..946707cba38 100644
--- a/static/usage/v6/menu/type/react.md
+++ b/static/usage/v6/menu/type/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React, { useState } from 'react';
-import { 
+import {
   IonButton,
   IonContent,
   IonHeader,
@@ -12,7 +12,7 @@ import {
   IonRadio,
   IonRadioGroup,
   IonTitle,
-  IonToolbar
+  IonToolbar,
 } from '@ionic/react';
 import type { RadioGroupCustomEvent } from '@ionic/react';
 
@@ -30,7 +30,7 @@ function Example() {
         <IonContent className="ion-padding">
           <IonMenuToggle>
             <IonButton>Click to close the menu</IonButton>
-          </IonMenuToggle>  
+          </IonMenuToggle>
         </IonContent>
       </IonMenu>
       <IonPage id="main-content">
diff --git a/static/usage/v6/menu/type/vue.md b/static/usage/v6/menu/type/vue.md
index 2abcb137577..8277d7a3179 100644
--- a/static/usage/v6/menu/type/vue.md
+++ b/static/usage/v6/menu/type/vue.md
@@ -12,7 +12,7 @@
       </ion-menu-toggle>
     </ion-content>
   </ion-menu>
-  
+
   <div class="ion-page" id="main-content">
     <ion-header>
       <ion-toolbar>
@@ -40,7 +40,8 @@
           </ion-label>
           <ion-radio value="push"></ion-radio>
         </ion-item>
-      </ion-radio-group> <br />
+      </ion-radio-group>
+      <br />
       <ion-menu-toggle>
         <ion-button>Click to open the menu</ion-button>
       </ion-menu-toggle>
@@ -61,7 +62,7 @@
     IonRadio,
     IonRadioGroup,
     IonTitle,
-    IonToolbar
+    IonToolbar,
   } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
@@ -78,13 +79,13 @@
       IonRadio,
       IonRadioGroup,
       IonTitle,
-      IonToolbar
+      IonToolbar,
     },
     setup() {
       const menuType = ref('overlay');
-      
+
       return { menuType };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/modal/can-dismiss/boolean/demo.html b/static/usage/v6/modal/can-dismiss/boolean/demo.html
index d548f1c9e61..b22908839fb 100644
--- a/static/usage/v6/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/v6/modal/can-dismiss/boolean/demo.html
@@ -1,67 +1,63 @@
 <!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;
+  <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
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/can-dismiss/function/demo.html b/static/usage/v6/modal/can-dismiss/function/demo.html
index 0f97193113f..bba95c509b6 100644
--- a/static/usage/v6/modal/can-dismiss/function/demo.html
+++ b/static/usage/v6/modal/can-dismiss/function/demo.html
@@ -1,74 +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>
 
-<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" />
+  <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>
 
-</head>
+          <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>
 
-<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>
+    <script>
+      const modal = document.querySelector('ion-modal');
 
-        <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>
+      modal.canDismiss = promptClose;
+      modal.presentingElement = document.querySelector('.ion-page');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+      function dismiss() {
+        modal.dismiss();
+      }
 
-    modal.canDismiss = promptClose;
-    modal.presentingElement = document.querySelector('.ion-page');
+      async function promptClose() {
+        const actionSheet = document.createElement('ion-action-sheet');
 
-    function dismiss() {
-      modal.dismiss();
-    }
+        actionSheet.header = 'Are you sure?';
+        actionSheet.buttons = [
+          {
+            text: 'Yes',
+            role: 'confirm',
+          },
+          {
+            text: 'No',
+            role: 'cancel',
+          },
+        ];
+        document.body.appendChild(actionSheet);
+        await actionSheet.present();
 
-    async function promptClose() {
-      const actionSheet = document.createElement('ion-action-sheet');
+        const { role } = await actionSheet.onWillDismiss();
 
-      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
+        return role === 'confirm';
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
index 620cf48cb9d..dcbf4d94020 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html
@@ -1,57 +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 | 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>To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
-              it.</p>
-          </ion-content>
-        </ion-modal>
-      </ion-content>
-    </div>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    modal.canDismiss = (data, role) => role !== 'gesture';
-    modal.presentingElement = document.querySelector('.ion-page');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+  <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>
+                To close this modal, please use the "Close" button provided. Note that swiping the modal will not
+                dismiss it.
+              </p>
+            </ion-content>
+          </ion-modal>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      const modal = document.querySelector('ion-modal');
+
+      modal.canDismiss = (data, role) => role !== 'gesture';
+      modal.presentingElement = document.querySelector('.ion-page');
+
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/card/basic/demo.html b/static/usage/v6/modal/card/basic/demo.html
index ea2200494f8..3b9c5c7cdd8 100644
--- a/static/usage/v6/modal/card/basic/demo.html
+++ b/static/usage/v6/modal/card/basic/demo.html
@@ -1,90 +1,88 @@
 <!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>
 
-<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>
 
-<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>
 
-        <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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+      modal.presentingElement = document.querySelector('.ion-page');
 
-    modal.presentingElement = document.querySelector('.ion-page');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/controller/demo.html b/static/usage/v6/modal/controller/demo.html
index 643eeb66ccc..d857c0c9e3b 100644
--- a/static/usage/v6/modal/controller/demo.html
+++ b/static/usage/v6/modal/controller/demo.html
@@ -1,37 +1,36 @@
 <!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>
 
-<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>
+  <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 = `
+    <script>
+      const openModal = async () => {
+        const div = document.createElement('div');
+        div.innerHTML = `
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
@@ -51,28 +50,27 @@
       </ion-content>
       `;
 
-      const modal = await modalController.create({
-        component: div,
-      });
-
-      modal.present();
+        const modal = await modalController.create({
+          component: div,
+        });
 
-      const { data, role } = await modal.onWillDismiss();
+        modal.present();
 
-      if (role === 'confirm') {
-        document.querySelector('#message').innerHTML = `Hello, ${data}!`;
-      }
-    }
+        const { data, role } = await modal.onWillDismiss();
 
-    function cancel() {
-      modalController.dismiss(null, 'cancel');
-    }
+        if (role === 'confirm') {
+          document.querySelector('#message').innerHTML = `Hello, ${data}!`;
+        }
+      };
 
-    function confirm() {
-      const input = document.querySelector('ion-input');
-      modalController.dismiss(input.value, 'confirm');
-    }
-  </script>
-</body>
+      function cancel() {
+        modalController.dismiss(null, 'cancel');
+      }
 
-</html>
\ No newline at end of file
+      function confirm() {
+        const input = document.querySelector('ion-input');
+        modalController.dismiss(input.value, 'confirm');
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/custom-dialogs/demo.html b/static/usage/v6/modal/custom-dialogs/demo.html
index 95149828ba7..d51538669db 100644
--- a/static/usage/v6/modal/custom-dialogs/demo.html
+++ b/static/usage/v6/modal/custom-dialogs/demo.html
@@ -1,83 +1,85 @@
 <!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);
+      }
 
-<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 h1 {
-      margin: 20px 20px 10px 20px;
-    }
+      ion-modal ion-icon {
+        margin-right: 6px;
 
-    ion-modal ion-icon {
-      margin-right: 6px;
+        width: 48px;
+        height: 48px;
 
-      width: 48px;
-      height: 48px;
+        padding: 4px 0;
 
-      padding: 4px 0;
+        color: #aaaaaa;
+      }
 
-      color: #aaaaaa;
-    }
+      ion-modal .wrapper {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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>
 
-          <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
+    <script>
+      const modal = document.querySelector('ion-modal');
+      const dismiss = () => modal.dismiss();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/custom-dialogs/react/main_tsx.md b/static/usage/v6/modal/custom-dialogs/react/main_tsx.md
index b60d3f275ab..e6120a8fcc7 100644
--- a/static/usage/v6/modal/custom-dialogs/react/main_tsx.md
+++ b/static/usage/v6/modal/custom-dialogs/react/main_tsx.md
@@ -38,7 +38,7 @@ function Example() {
         <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>
diff --git a/static/usage/v6/modal/custom-dialogs/vue.md b/static/usage/v6/modal/custom-dialogs/vue.md
index f910bc061e4..57362d546fc 100644
--- a/static/usage/v6/modal/custom-dialogs/vue.md
+++ b/static/usage/v6/modal/custom-dialogs/vue.md
@@ -7,22 +7,22 @@
     --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;
   }
@@ -36,11 +36,11 @@
   </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>
@@ -96,7 +96,7 @@
     },
     setup() {
       return { personCircle };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/modal/inline/basic/demo.html b/static/usage/v6/modal/inline/basic/demo.html
index 4007d9fc2be..03338a17a5a 100644
--- a/static/usage/v6/modal/inline/basic/demo.html
+++ b/static/usage/v6/modal/inline/basic/demo.html
@@ -1,67 +1,65 @@
 <!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>
 
-<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-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>
+    </ion-app>
 
-<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');
 
-  <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');
-    }
+      function cancel() {
+        modal.dismiss(null, 'cancel');
+      }
 
-    modal.addEventListener('willDismiss', ev => {
-      if (ev.detail.role === 'confirm') {
-        const message = document.querySelector('#message');
-        message.textContent = `Hello ${ev.detail.data}!`;
+      function confirm() {
+        const input = document.querySelector('ion-input');
+        modal.dismiss(input.value, 'confirm');
       }
-    });
-  </script>
-</body>
 
-</html>
\ No newline at end of file
+      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/v6/modal/inline/is-open/demo.html b/static/usage/v6/modal/inline/is-open/demo.html
index ed5f3494869..0772f0a9703 100644
--- a/static/usage/v6/modal/inline/is-open/demo.html
+++ b/static/usage/v6/modal/inline/is-open/demo.html
@@ -1,46 +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>
 
-<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>
 
-<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
+    <script>
+      const modal = document.querySelector('ion-modal');
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/performance/mount/angular.md b/static/usage/v6/modal/performance/mount/angular.md
index 3afd202d33b..4b8bb7bc9d2 100644
--- a/static/usage/v6/modal/performance/mount/angular.md
+++ b/static/usage/v6/modal/performance/mount/angular.md
@@ -16,9 +16,7 @@
           <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-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/v6/modal/performance/mount/demo.html b/static/usage/v6/modal/performance/mount/demo.html
index 03d47899733..59e4987f6db 100644
--- a/static/usage/v6/modal/performance/mount/demo.html
+++ b/static/usage/v6/modal/performance/mount/demo.html
@@ -1,55 +1,51 @@
 <!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>
 
-<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>
 
-<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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+      const closeBtn = document.querySelector('#close');
+      closeBtn.addEventListener('click', () => close());
 
-    const closeBtn = document.querySelector('#close');
-    closeBtn.addEventListener('click', () => close());
-
-    const close = () => {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      const close = () => {
+        modal.dismiss();
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/performance/mount/react.md b/static/usage/v6/modal/performance/mount/react.md
index 5b50612291b..bb6a9c32360 100644
--- a/static/usage/v6/modal/performance/mount/react.md
+++ b/static/usage/v6/modal/performance/mount/react.md
@@ -1,15 +1,6 @@
 ```tsx
 import React, { useRef } from 'react';
-import {
-  IonButtons,
-  IonButton,
-  IonModal,
-  IonHeader,
-  IonContent,
-  IonToolbar,
-  IonTitle,
-  IonPage,
-} from '@ionic/react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
 
 function Example() {
   const modal = useRef<HTMLIonModalElement>(null);
@@ -34,9 +25,7 @@ function Example() {
               <IonTitle>Modal</IonTitle>
             </IonToolbar>
           </IonHeader>
-          <IonContent className="ion-padding">
-            This content was mounted as soon as the modal was created.
-          </IonContent>
+          <IonContent className="ion-padding">This content was mounted as soon as the modal was created.</IonContent>
         </IonModal>
       </IonContent>
     </IonPage>
diff --git a/static/usage/v6/modal/performance/mount/vue.md b/static/usage/v6/modal/performance/mount/vue.md
index 515229dde25..0407ee98a4e 100644
--- a/static/usage/v6/modal/performance/mount/vue.md
+++ b/static/usage/v6/modal/performance/mount/vue.md
@@ -16,23 +16,13 @@
           <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-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 { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
diff --git a/static/usage/v6/modal/sheet/background-content/demo.html b/static/usage/v6/modal/sheet/background-content/demo.html
index 9ba868a9e1e..41a04f1f7f7 100644
--- a/static/usage/v6/modal/sheet/background-content/demo.html
+++ b/static/usage/v6/modal/sheet/background-content/demo.html
@@ -1,106 +1,103 @@
 <!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>
 
-<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>
 
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>App</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
+        <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>
 
-      <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+        <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>
 
-      <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>
+    <script>
+      const modal = document.querySelector('ion-modal');
+      const searchBar = document.querySelector('ion-searchbar');
 
-      <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>
+      modal.breakpoints = [0, 0.25, 0.5, 0.75];
 
-  <script>
-    const modal = document.querySelector('ion-modal');
-    const searchBar = document.querySelector('ion-searchbar');
+      searchBar.addEventListener('click', () => {
+        modal.setCurrentBreakpoint(0.75);
+      });
 
-    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+      function increment() {
+        const counter = document.querySelector('#counter');
+        counter.innerHTML = parseInt(counter.innerText) + 1;
+      }
 
-    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
+      function decrement() {
+        const counter = document.querySelector('#counter');
+        counter.innerHTML = parseInt(counter.innerText) - 1;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/sheet/basic/demo.html b/static/usage/v6/modal/sheet/basic/demo.html
index 65be6a2ceab..49d762f4c1a 100644
--- a/static/usage/v6/modal/sheet/basic/demo.html
+++ b/static/usage/v6/modal/sheet/basic/demo.html
@@ -1,82 +1,80 @@
 <!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>
 
-<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>
 
-<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>
 
-      <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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
-    const searchBar = document.querySelector('ion-searchbar');
+      modal.breakpoints = [0, 0.25, 0.5, 0.75];
 
-    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
+      searchBar.addEventListener('click', () => {
+        modal.setCurrentBreakpoint(0.75);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/sheet/handle-behavior/demo.html b/static/usage/v6/modal/sheet/handle-behavior/demo.html
index c89417e7ecf..809938509d1 100644
--- a/static/usage/v6/modal/sheet/handle-behavior/demo.html
+++ b/static/usage/v6/modal/sheet/handle-behavior/demo.html
@@ -1,41 +1,39 @@
 <!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>
 
-<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>
 
-<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>
 
-      <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');
 
-  <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
+      modal.breakpoints = [0, 0.25, 0.5, 0.75];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/styling/animations/demo.html b/static/usage/v6/modal/styling/animations/demo.html
index 555667996c4..92a00cbff7c 100644
--- a/static/usage/v6/modal/styling/animations/demo.html
+++ b/static/usage/v6/modal/styling/animations/demo.html
@@ -1,117 +1,114 @@
 <!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>
 
-<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>
+  <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>
 
-</head>
+        <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>
 
-<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>
+    <script>
+      const modal = document.querySelector('ion-modal');
 
-      <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>
+      const enterAnimation = (baseEl) => {
+        const root = baseEl.shadowRoot;
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+        const backdropAnimation = createAnimation()
+          .addElement(root.querySelector('ion-backdrop'))
+          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
-    const enterAnimation = (baseEl) => {
-      const root = baseEl.shadowRoot;
+        const wrapperAnimation = createAnimation()
+          .addElement(root.querySelector('.modal-wrapper'))
+          .keyframes([
+            { offset: 0, opacity: '0', transform: 'scale(0)' },
+            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+          ]);
 
-      const backdropAnimation = createAnimation()
-        .addElement(root.querySelector('ion-backdrop'))
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+        return createAnimation()
+          .addElement(baseEl)
+          .easing('ease-out')
+          .duration(500)
+          .addAnimation([backdropAnimation, wrapperAnimation]);
+      };
 
-      const wrapperAnimation = createAnimation()
-        .addElement(root.querySelector('.modal-wrapper'))
-        .keyframes([
-          { offset: 0, opacity: '0', transform: 'scale(0)' },
-          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
-        ]);
+      const leaveAnimation = (baseEl) => enterAnimation(baseEl).direction('reverse');
 
-      return createAnimation()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
+      modal.enterAnimation = enterAnimation;
+      modal.leaveAnimation = leaveAnimation;
 
-    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
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/modal/styling/theming/demo.html b/static/usage/v6/modal/styling/theming/demo.html
index f0c3f00bbe4..fae5d8bb73d 100644
--- a/static/usage/v6/modal/styling/theming/demo.html
+++ b/static/usage/v6/modal/styling/theming/demo.html
@@ -1,101 +1,99 @@
 <!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);
+      }
 
-<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::part(backdrop) {
-      background: rgba(209, 213, 219);
-      opacity: 1;
-    }
+      ion-modal ion-toolbar {
+        --background: rgb(14 116 144);
+        --color: white;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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>
 
-      <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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/nav/modal-navigation/demo.html b/static/usage/v6/nav/modal-navigation/demo.html
index 0d099f1e3cc..4d696e6e174 100644
--- a/static/usage/v6/nav/modal-navigation/demo.html
+++ b/static/usage/v6/nav/modal-navigation/demo.html
@@ -1,106 +1,100 @@
 <!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 = `
+  <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 = `
+      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 = `
+      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
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+      customElements.define('page-three', PageThree);
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/nav/nav-link/demo.html b/static/usage/v6/nav/nav-link/demo.html
index 9d8aa06c58f..e965cf24540 100644
--- a/static/usage/v6/nav/nav-link/demo.html
+++ b/static/usage/v6/nav/nav-link/demo.html
@@ -1,26 +1,25 @@
 <!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>
 
-<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>
 
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+    <script>
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -33,11 +32,11 @@ <h1>Page One</h1>
           </ion-nav-link>
         </ion-content>
       `;
+        }
       }
-    }
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -55,11 +54,11 @@ <h1>Page Two</h1>
           </div>
         </ion-content>
       `;
+        }
       }
-    }
-    class PageThree extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageThree extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -72,13 +71,11 @@ <h1>Page Two</h1>
           <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
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+      customElements.define('page-three', PageThree);
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/note/basic/demo.html b/static/usage/v6/note/basic/demo.html
index ae5b7ce7f04..9af121ee5b4 100644
--- a/static/usage/v6/note/basic/demo.html
+++ b/static/usage/v6/note/basic/demo.html
@@ -1,25 +1,22 @@
 <!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>
 
-<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
+  <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/v6/note/item/demo.html b/static/usage/v6/note/item/demo.html
index 3aea8507aa8..7d6b2d51601 100644
--- a/static/usage/v6/note/item/demo.html
+++ b/static/usage/v6/note/item/demo.html
@@ -1,38 +1,36 @@
 <!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>
-  <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>
 
-  <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>
 
-<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
+          <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/v6/note/theming/colors/demo.html b/static/usage/v6/note/theming/colors/demo.html
index 2564a686b1a..c7659ea9e69 100644
--- a/static/usage/v6/note/theming/colors/demo.html
+++ b/static/usage/v6/note/theming/colors/demo.html
@@ -1,49 +1,47 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    .flex-items {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      max-width: 440px;
-    }
+      ion-note {
+        margin: 0 2px;
+      }
+    </style>
+  </head>
 
-    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>
+  <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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/note/theming/css-properties/demo.html b/static/usage/v6/note/theming/css-properties/demo.html
index 400d4bf0b10..c48e2540525 100644
--- a/static/usage/v6/note/theming/css-properties/demo.html
+++ b/static/usage/v6/note/theming/css-properties/demo.html
@@ -1,30 +1,28 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/picker/multiple-column/demo.html b/static/usage/v6/picker/multiple-column/demo.html
index 50b673172e2..d8614d0fb8b 100644
--- a/static/usage/v6/picker/multiple-column/demo.html
+++ b/static/usage/v6/picker/multiple-column/demo.html
@@ -1,90 +1,100 @@
 <!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>
 
-<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: [
+  <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: [
             {
-              text: 'Pepperoni',
-              value: 'pepperoni'
-            }, {
-              text: 'Smoked Ham',
-              value: 'smoked-ham'
-            }, {
-              text: 'Crispy Bacon',
-              value: 'bacon'
-            }
-          ]
-        }, {
-          name: 'veggies',
-          options: [
+              name: 'meat',
+              options: [
+                {
+                  text: 'Pepperoni',
+                  value: 'pepperoni',
+                },
+                {
+                  text: 'Smoked Ham',
+                  value: 'smoked-ham',
+                },
+                {
+                  text: 'Crispy Bacon',
+                  value: 'bacon',
+                },
+              ],
+            },
             {
-              text: 'Red onion',
-              value: 'red-onion'
-            }, {
-              text: 'Peppers',
-              value: 'peppers'
-            }, {
-              text: 'Black olives',
-              value: 'black-olives'
-            }
-          ]
-        }, {
-          name: 'crust',
-          options: [
+              name: 'veggies',
+              options: [
+                {
+                  text: 'Red onion',
+                  value: 'red-onion',
+                },
+                {
+                  text: 'Peppers',
+                  value: 'peppers',
+                },
+                {
+                  text: 'Black olives',
+                  value: 'black-olives',
+                },
+              ],
+            },
             {
-              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
+              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/v6/picker/single-column/demo.html b/static/usage/v6/picker/single-column/demo.html
index 6f81b1c6e8f..96ccdcb31c5 100644
--- a/static/usage/v6/picker/single-column/demo.html
+++ b/static/usage/v6/picker/single-column/demo.html
@@ -1,65 +1,68 @@
 <!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>
 
-<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: [
+  <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: [
             {
-              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
+              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/v6/popover/customization/positioning/angular/example_component_css.md b/static/usage/v6/popover/customization/positioning/angular/example_component_css.md
index c92d80212a7..56a63480d75 100644
--- a/static/usage/v6/popover/customization/positioning/angular/example_component_css.md
+++ b/static/usage/v6/popover/customization/positioning/angular/example_component_css.md
@@ -9,4 +9,4 @@ ion-popover {
   flex-direction: column;
   padding: 80px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/popover/customization/positioning/angular/example_component_html.md b/static/usage/v6/popover/customization/positioning/angular/example_component_html.md
index a0036bd9ef9..d911b195f92 100644
--- a/static/usage/v6/popover/customization/positioning/angular/example_component_html.md
+++ b/static/usage/v6/popover/customization/positioning/angular/example_component_html.md
@@ -16,7 +16,7 @@
 
   <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
   <ion-popover trigger="left-start" side="left" alignment="start">
-    <ng-template>  
+    <ng-template>
       <ion-content class="ion-padding">Hello World!</ion-content>
     </ng-template>
   </ion-popover>
diff --git a/static/usage/v6/popover/customization/positioning/demo.html b/static/usage/v6/popover/customization/positioning/demo.html
index 71a74fb45e9..f6cd7b1d3dd 100644
--- a/static/usage/v6/popover/customization/positioning/demo.html
+++ b/static/usage/v6/popover/customization/positioning/demo.html
@@ -1,52 +1,50 @@
 <!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
+  <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>
diff --git a/static/usage/v6/popover/customization/positioning/react/main_css.md b/static/usage/v6/popover/customization/positioning/react/main_css.md
index c92d80212a7..56a63480d75 100644
--- a/static/usage/v6/popover/customization/positioning/react/main_css.md
+++ b/static/usage/v6/popover/customization/positioning/react/main_css.md
@@ -9,4 +9,4 @@ ion-popover {
   flex-direction: column;
   padding: 80px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/popover/customization/sizing/demo.html b/static/usage/v6/popover/customization/sizing/demo.html
index b85d71034f8..bdba35fa601 100644
--- a/static/usage/v6/popover/customization/sizing/demo.html
+++ b/static/usage/v6/popover/customization/sizing/demo.html
@@ -1,32 +1,30 @@
 <!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>
 
-<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>
 
-<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
+          <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>
diff --git a/static/usage/v6/popover/customization/styling/angular/global_css.md b/static/usage/v6/popover/customization/styling/angular/global_css.md
index 25890b90538..434a31d24d9 100644
--- a/static/usage/v6/popover/customization/styling/angular/global_css.md
+++ b/static/usage/v6/popover/customization/styling/angular/global_css.md
@@ -14,4 +14,4 @@ ion-popover ion-content {
 ion-popover::part(backdrop) {
   background-color: rgb(6, 14, 106);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/popover/customization/styling/demo.html b/static/usage/v6/popover/customization/styling/demo.html
index 6d858b14659..dafd212d445 100644
--- a/static/usage/v6/popover/customization/styling/demo.html
+++ b/static/usage/v6/popover/customization/styling/demo.html
@@ -1,45 +1,43 @@
 <!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>
-  <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;
+      }
 
-  <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 ion-content {
-      --background: rgba(40, 173, 218, 0.6);
-    }
+      ion-popover::part(backdrop) {
+        background-color: rgb(6, 14, 106);
+      }
+    </style>
+  </head>
 
-    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
+  <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>
diff --git a/static/usage/v6/popover/customization/styling/react/main_css.md b/static/usage/v6/popover/customization/styling/react/main_css.md
index 25890b90538..434a31d24d9 100644
--- a/static/usage/v6/popover/customization/styling/react/main_css.md
+++ b/static/usage/v6/popover/customization/styling/react/main_css.md
@@ -14,4 +14,4 @@ ion-popover ion-content {
 ion-popover::part(backdrop) {
   background-color: rgb(6, 14, 106);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/popover/nested/demo.html b/static/usage/v6/popover/nested/demo.html
index ab52c1d5540..6a6f6806105 100644
--- a/static/usage/v6/popover/nested/demo.html
+++ b/static/usage/v6/popover/nested/demo.html
@@ -1,41 +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>
 
-<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>
 
-<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
+                <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>
diff --git a/static/usage/v6/popover/performance/mount/demo.html b/static/usage/v6/popover/performance/mount/demo.html
index 053883d5e75..11532648266 100644
--- a/static/usage/v6/popover/performance/mount/demo.html
+++ b/static/usage/v6/popover/performance/mount/demo.html
@@ -1,27 +1,25 @@
 <!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>
 
-<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
+  <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/v6/popover/performance/mount/javascript.md b/static/usage/v6/popover/performance/mount/javascript.md
index 5dd5f8a624e..297c94344f1 100644
--- a/static/usage/v6/popover/performance/mount/javascript.md
+++ b/static/usage/v6/popover/performance/mount/javascript.md
@@ -3,4 +3,4 @@
 <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/v6/popover/presenting/controller/angular/example_component_html.md b/static/usage/v6/popover/presenting/controller/angular/example_component_html.md
index da857f78745..f84fbf6fd80 100644
--- a/static/usage/v6/popover/presenting/controller/angular/example_component_html.md
+++ b/static/usage/v6/popover/presenting/controller/angular/example_component_html.md
@@ -1,4 +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/v6/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_html.md
index 74cbf83fec4..583a6dea593 100644
--- a/static/usage/v6/popover/presenting/controller/angular/popover_component_html.md
+++ b/static/usage/v6/popover/presenting/controller/angular/popover_component_html.md
@@ -1,3 +1,3 @@
 ```html
 <ion-content class="ion-padding">Hello World!</ion-content>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/popover/presenting/controller/demo.html b/static/usage/v6/popover/presenting/controller/demo.html
index 0a235d3c41d..96df8ae552c 100644
--- a/static/usage/v6/popover/presenting/controller/demo.html
+++ b/static/usage/v6/popover/presenting/controller/demo.html
@@ -1,63 +1,61 @@
 <!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();
+  <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;
       }
-
-      connectedCallback() {
-        this.innerHTML = `<ion-content class="ion-padding">Hello World!</ion-content>`;
+    </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);
+      customElements.define('popover-page', PopoverPage);
 
-    async function presentPopover(e) {
-      const popover = Object.assign(document.createElement('ion-popover'), {
-        component: 'popover-page',
-        event: e
-      });
+      async function presentPopover(e) {
+        const popover = Object.assign(document.createElement('ion-popover'), {
+          component: 'popover-page',
+          event: e,
+        });
 
-      document.body.appendChild(popover);
-      await popover.present();
+        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>
+        const { role } = await popover.onDidDismiss();
+        output.innerText = `Popover dismissed with role: ${role}`;
+      }
 
-</html>
\ No newline at end of file
+      const button = document.querySelector('ion-button');
+      button.addEventListener('click', presentPopover);
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/popover/presenting/controller/javascript.md b/static/usage/v6/popover/presenting/controller/javascript.md
index 896772b276b..078514628a8 100644
--- a/static/usage/v6/popover/presenting/controller/javascript.md
+++ b/static/usage/v6/popover/presenting/controller/javascript.md
@@ -20,7 +20,7 @@
   async function presentPopover(e) {
     const popover = Object.assign(document.createElement('ion-popover'), {
       component: 'popover-page',
-      event: e
+      event: e,
     });
 
     document.body.appendChild(popover);
diff --git a/static/usage/v6/popover/presenting/controller/vue/popover_vue.md b/static/usage/v6/popover/presenting/controller/vue/popover_vue.md
index 1bc5738c6ad..85f8bd06cad 100644
--- a/static/usage/v6/popover/presenting/controller/vue/popover_vue.md
+++ b/static/usage/v6/popover/presenting/controller/vue/popover_vue.md
@@ -4,12 +4,12 @@
 </template>
 
 <script lang="ts">
-import { IonContent } from '@ionic/vue';
-import { defineComponent } from 'vue';
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'Popover',
-  components: { IonContent }
-});
+  export default defineComponent({
+    name: 'Popover',
+    components: { IonContent },
+  });
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md
index 80201dba3d2..1d8369f31e2 100644
--- a/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md
+++ b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md
@@ -5,4 +5,4 @@
     <ion-content class="ion-padding">Hello World!</ion-content>
   </ng-template>
 </ion-popover>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/popover/presenting/inline-isopen/demo.html b/static/usage/v6/popover/presenting/inline-isopen/demo.html
index 4180760c005..6d2307b6c56 100644
--- a/static/usage/v6/popover/presenting/inline-isopen/demo.html
+++ b/static/usage/v6/popover/presenting/inline-isopen/demo.html
@@ -1,39 +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>
 
-<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>
 
-<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');
 
-  <script>
-    const button = document.querySelector('ion-button');
-    const popover = document.querySelector('ion-popover');
+      button.addEventListener('click', (e) => {
+        popover.event = e;
+        popover.isOpen = true;
+      });
 
-    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
+      popover.addEventListener('didDismiss', () => (popover.isOpen = false));
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/popover/presenting/inline-isopen/javascript.md b/static/usage/v6/popover/presenting/inline-isopen/javascript.md
index b780125ba1e..1daafed1894 100644
--- a/static/usage/v6/popover/presenting/inline-isopen/javascript.md
+++ b/static/usage/v6/popover/presenting/inline-isopen/javascript.md
@@ -8,11 +8,11 @@
   const button = document.querySelector('ion-button');
   const popover = document.querySelector('ion-popover');
 
-  button.addEventListener('click', e => {
+  button.addEventListener('click', (e) => {
     popover.event = e;
     popover.isOpen = true;
   });
 
-  popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  popover.addEventListener('didDismiss', () => (popover.isOpen = false));
 </script>
 ```
diff --git a/static/usage/v6/popover/presenting/inline-trigger/demo.html b/static/usage/v6/popover/presenting/inline-trigger/demo.html
index d1b2020e454..aef01c4d100 100644
--- a/static/usage/v6/popover/presenting/inline-trigger/demo.html
+++ b/static/usage/v6/popover/presenting/inline-trigger/demo.html
@@ -1,37 +1,35 @@
 <!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>
 
-<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>
 
-<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="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
+          <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>
diff --git a/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
index 56e3d3a3b09..a876a376204 100644
--- a/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
+++ b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  styleUrls: ['example.component.css'],
 })
 export class ExampleComponent {
   public buffer = 0.06;
diff --git a/static/usage/v6/progress-bar/buffer/demo.html b/static/usage/v6/progress-bar/buffer/demo.html
index 023c907ed39..d1e3ba6fe58 100644
--- a/static/usage/v6/progress-bar/buffer/demo.html
+++ b/static/usage/v6/progress-bar/buffer/demo.html
@@ -1,47 +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" />
-
-</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
+  <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/v6/progress-bar/buffer/react.md b/static/usage/v6/progress-bar/buffer/react.md
index 1fa8208ac3a..10f35e69538 100644
--- a/static/usage/v6/progress-bar/buffer/react.md
+++ b/static/usage/v6/progress-bar/buffer/react.md
@@ -22,9 +22,7 @@ function Example() {
     }, 1000);
   }
 
-  return (
-    <IonProgressBar buffer={buffer} value={progress}></IonProgressBar>
-  );
+  return <IonProgressBar buffer={buffer} value={progress}></IonProgressBar>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/progress-bar/buffer/vue.md b/static/usage/v6/progress-bar/buffer/vue.md
index 3edc59bdf6f..c70c23eb470 100644
--- a/static/usage/v6/progress-bar/buffer/vue.md
+++ b/static/usage/v6/progress-bar/buffer/vue.md
@@ -15,7 +15,7 @@
 
       return {
         buffer,
-        progress
+        progress,
       };
     },
     mounted() {
@@ -32,7 +32,7 @@
           }, 1000);
         }
       }, 1000);
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
index d8f8b690fc9..971d3d92ed0 100644
--- a/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
+++ b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  styleUrls: ['example.component.css'],
 })
 export class ExampleComponent {
   public progress = 0;
diff --git a/static/usage/v6/progress-bar/determinate/demo.html b/static/usage/v6/progress-bar/determinate/demo.html
index 2f09a3ad5cd..2da05e6aa19 100644
--- a/static/usage/v6/progress-bar/determinate/demo.html
+++ b/static/usage/v6/progress-bar/determinate/demo.html
@@ -1,42 +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" />
+  </head>
 
-<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" />
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-progress-bar></ion-progress-bar>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 
-</head>
+  <script>
+    let progress = 0;
+    let progressBar = document.querySelector('ion-progress-bar');
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+    setInterval(() => {
+      progressBar.value = progress += 0.01;
 
-<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
+      // 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/v6/progress-bar/determinate/react.md b/static/usage/v6/progress-bar/determinate/react.md
index 9622be87f95..474d4dd878e 100644
--- a/static/usage/v6/progress-bar/determinate/react.md
+++ b/static/usage/v6/progress-bar/determinate/react.md
@@ -19,9 +19,7 @@ function Example() {
     }, 1000);
   }
 
-  return (
-    <IonProgressBar value={progress}></IonProgressBar>
-  );
+  return <IonProgressBar value={progress}></IonProgressBar>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/progress-bar/determinate/vue.md b/static/usage/v6/progress-bar/determinate/vue.md
index c22b3ead5d3..5eb4cd2b847 100644
--- a/static/usage/v6/progress-bar/determinate/vue.md
+++ b/static/usage/v6/progress-bar/determinate/vue.md
@@ -13,7 +13,7 @@
       let progress = ref(0);
 
       return {
-        progress
+        progress,
       };
     },
     mounted() {
@@ -28,7 +28,7 @@
           }, 1000);
         }
       }, 50);
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/progress-bar/indeterminate/demo.html b/static/usage/v6/progress-bar/indeterminate/demo.html
index 46c9cdd7254..7561efa5910 100644
--- a/static/usage/v6/progress-bar/indeterminate/demo.html
+++ b/static/usage/v6/progress-bar/indeterminate/demo.html
@@ -1,25 +1,22 @@
 <!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>
 
-<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
+  <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/v6/progress-bar/indeterminate/react.md b/static/usage/v6/progress-bar/indeterminate/react.md
index 45e74e79ce7..b856e1f29f2 100644
--- a/static/usage/v6/progress-bar/indeterminate/react.md
+++ b/static/usage/v6/progress-bar/indeterminate/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonProgressBar } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonProgressBar type="indeterminate"></IonProgressBar>
-  );
+  return <IonProgressBar type="indeterminate"></IonProgressBar>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/progress-bar/theming/colors/demo.html b/static/usage/v6/progress-bar/theming/colors/demo.html
index 2ecac2e80fa..118156608e6 100644
--- a/static/usage/v6/progress-bar/theming/colors/demo.html
+++ b/static/usage/v6/progress-bar/theming/colors/demo.html
@@ -1,39 +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" />
 
-<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>
 
-  <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
+  <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/v6/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md
index d2c997037ad..a374b2ee72c 100644
--- a/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md
@@ -1,4 +1,3 @@
 ```html
-<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
-<ion-progress-bar type="indeterminate"></ion-progress-bar>
+<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar> <ion-progress-bar type="indeterminate"></ion-progress-bar>
 ```
diff --git a/static/usage/v6/progress-bar/theming/css-properties/demo.html b/static/usage/v6/progress-bar/theming/css-properties/demo.html
index 5d60e67fbc5..32bbd4baee1 100644
--- a/static/usage/v6/progress-bar/theming/css-properties/demo.html
+++ b/static/usage/v6/progress-bar/theming/css-properties/demo.html
@@ -1,37 +1,35 @@
 <!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>
-  <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>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
+      ion-progress-bar {
+        --background: #f3e895;
+        --progress-background: #09c567;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md
index a4c5e382892..3e05757d942 100644
--- a/static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonProgressBar } from '@ionic/react';
@@ -8,7 +7,7 @@ import './main.css';
 function Example() {
   return (
     <>
-      <IonProgressBar value={.25} buffer={.5}></IonProgressBar>
+      <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
       <IonProgressBar type="indeterminate"></IonProgressBar>
     </>
   );
diff --git a/static/usage/v6/progress-bar/theming/css-properties/vue.md b/static/usage/v6/progress-bar/theming/css-properties/vue.md
index bfff4db7a1b..f63aec9e644 100644
--- a/static/usage/v6/progress-bar/theming/css-properties/vue.md
+++ b/static/usage/v6/progress-bar/theming/css-properties/vue.md
@@ -9,7 +9,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonProgressBar }
+    components: { IonProgressBar },
   });
 </script>
 
diff --git a/static/usage/v6/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
index d2c997037ad..a374b2ee72c 100644
--- a/static/usage/v6/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
@@ -1,4 +1,3 @@
 ```html
-<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
-<ion-progress-bar type="indeterminate"></ion-progress-bar>
+<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar> <ion-progress-bar type="indeterminate"></ion-progress-bar>
 ```
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
index 7ccd266e946..d3e53a62ede 100644
--- a/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html
@@ -1,44 +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>
-  <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>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
+      ion-progress-bar::part(track) {
+        background: #f3e895;
+      }
 
-    ion-progress-bar::part(track) {
-      background: #f3e895;
-    }
+      ion-progress-bar::part(progress) {
+        background: #09c567;
+      }
 
-    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>
 
-    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
+  <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/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md
index a4c5e382892..3e05757d942 100644
--- a/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonProgressBar } from '@ionic/react';
@@ -8,7 +7,7 @@ import './main.css';
 function Example() {
   return (
     <>
-      <IonProgressBar value={.25} buffer={.5}></IonProgressBar>
+      <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
       <IonProgressBar type="indeterminate"></IonProgressBar>
     </>
   );
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md
index a9ca62b2c4f..5750323198e 100644
--- a/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md
@@ -9,7 +9,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonProgressBar }
+    components: { IonProgressBar },
   });
 </script>
 
diff --git a/static/usage/v6/radio/basic/demo.html b/static/usage/v6/radio/basic/demo.html
index 896041e948e..f74a7d89b9f 100644
--- a/static/usage/v6/radio/basic/demo.html
+++ b/static/usage/v6/radio/basic/demo.html
@@ -1,52 +1,50 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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>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>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
+              <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/v6/radio/empty-selection/demo.html b/static/usage/v6/radio/empty-selection/demo.html
index 29731178d61..e75e16699b7 100644
--- a/static/usage/v6/radio/empty-selection/demo.html
+++ b/static/usage/v6/radio/empty-selection/demo.html
@@ -1,52 +1,50 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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>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>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
+              <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/v6/radio/theming/colors/demo.html b/static/usage/v6/radio/theming/colors/demo.html
index aa122b5f0ec..6c47a18c05c 100644
--- a/static/usage/v6/radio/theming/colors/demo.html
+++ b/static/usage/v6/radio/theming/colors/demo.html
@@ -1,54 +1,50 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/radio/theming/css-properties/demo.html b/static/usage/v6/radio/theming/css-properties/demo.html
index 8d2a07e5df6..53fc3c2d693 100644
--- a/static/usage/v6/radio/theming/css-properties/demo.html
+++ b/static/usage/v6/radio/theming/css-properties/demo.html
@@ -1,49 +1,47 @@
 <!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
+  <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/v6/radio/theming/css-shadow-parts/demo.html b/static/usage/v6/radio/theming/css-shadow-parts/demo.html
index f2bc280fb83..38f11e3619b 100644
--- a/static/usage/v6/radio/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/radio/theming/css-shadow-parts/demo.html
@@ -1,62 +1,60 @@
 <!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
+  <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/v6/range/basic/demo.html b/static/usage/v6/range/basic/demo.html
index 2580a0cda5e..55983322169 100644
--- a/static/usage/v6/range/basic/demo.html
+++ b/static/usage/v6/range/basic/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range></ion-range>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/range/dual-knobs/demo.html b/static/usage/v6/range/dual-knobs/demo.html
index 2c324f0eb57..c89b02eff98 100644
--- a/static/usage/v6/range/dual-knobs/demo.html
+++ b/static/usage/v6/range/dual-knobs/demo.html
@@ -1,36 +1,34 @@
 <!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>
 
-<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
+  <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/v6/range/ion-change-event/demo.html b/static/usage/v6/range/ion-change-event/demo.html
index 93e35b59ba7..446085572d3 100644
--- a/static/usage/v6/range/ion-change-event/demo.html
+++ b/static/usage/v6/range/ion-change-event/demo.html
@@ -1,40 +1,39 @@
 <!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>
 
-<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>
+  <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>
         </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>
+      </ion-content>
+    </ion-app>
+    <script>
+      const range = document.querySelector('ion-range');
+      const lastValue = document.querySelector('#lastValue');
 
-</html>
\ No newline at end of file
+      range.addEventListener('ionChange', ({ detail }) => {
+        lastValue.innerHTML = detail.value;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/range/ion-knob-move-event/demo.html b/static/usage/v6/range/ion-knob-move-event/demo.html
index 0522fd9b1ff..c1de1a7fa86 100644
--- a/static/usage/v6/range/ion-knob-move-event/demo.html
+++ b/static/usage/v6/range/ion-knob-move-event/demo.html
@@ -1,50 +1,49 @@
 <!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>
 
-<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>
+  <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>
         </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;
-    });
+      </ion-content>
+    </ion-app>
+    <script>
+      const range = document.querySelector('ion-range');
+      const moveStart = document.querySelector('#moveStart');
+      const moveEnd = document.querySelector('#moveEnd');
 
-    range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
-      moveEnd.innerHTML = detail.value;
-    });
-  </script>
-</body>
+      range.addEventListener('ionKnobMoveStart', ({ detail }) => {
+        moveStart.innerHTML = detail.value;
+      });
 
-</html>
\ No newline at end of file
+      range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
+        moveEnd.innerHTML = detail.value;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/range/pins/demo.html b/static/usage/v6/range/pins/demo.html
index 032a649d14d..747c1e28d9e 100644
--- a/static/usage/v6/range/pins/demo.html
+++ b/static/usage/v6/range/pins/demo.html
@@ -1,35 +1,33 @@
 <!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>
 
-<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
+  <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/v6/range/slots/demo.html b/static/usage/v6/range/slots/demo.html
index a6c24e8da62..e5530fe103f 100644
--- a/static/usage/v6/range/slots/demo.html
+++ b/static/usage/v6/range/slots/demo.html
@@ -1,32 +1,30 @@
 <!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>
 
-<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
+  <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/v6/range/snapping-ticks/demo.html b/static/usage/v6/range/snapping-ticks/demo.html
index 8b0ada20488..592b5be9e92 100644
--- a/static/usage/v6/range/snapping-ticks/demo.html
+++ b/static/usage/v6/range/snapping-ticks/demo.html
@@ -1,29 +1,27 @@
 <!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>
 
-<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
+  <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/v6/range/theming/css-properties/demo.html b/static/usage/v6/range/theming/css-properties/demo.html
index 2bbf61e793b..7338d590d72 100644
--- a/static/usage/v6/range/theming/css-properties/demo.html
+++ b/static/usage/v6/range/theming/css-properties/demo.html
@@ -1,38 +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 {
+        --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;
 
-<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>
 
-      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
+  <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/v6/range/theming/css-shadow-parts/demo.html b/static/usage/v6/range/theming/css-shadow-parts/demo.html
index 8469ebda0a8..8553b55da66 100644
--- a/static/usage/v6/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/range/theming/css-shadow-parts/demo.html
@@ -1,71 +1,69 @@
 <!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;
+      }
 
-<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) {
-      background: #a2d2ff;
-    }
+      ion-range::part(tick-active) {
+        background: #bde0fe;
+      }
 
-    ion-range::part(tick-active) {
-      background: #bde0fe;
-    }
+      ion-range::part(pin) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
 
-    ion-range::part(pin) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+        background: #ffafcc;
+        color: #fff;
 
-      background: #ffafcc;
-      color: #fff;
+        border-radius: 50%;
+        transform: scale(1.01);
 
-      border-radius: 50%;
-      transform: scale(1.01);
+        top: -20px;
 
-      top: -20px;
+        min-width: 28px;
+        height: 28px;
+        transition: transform 120ms ease, background 120ms ease;
+      }
 
-      min-width: 28px;
-      height: 28px;
-      transition: transform 120ms ease, background 120ms ease;
-    }
+      ion-range::part(pin)::before {
+        content: none;
+      }
 
-    ion-range::part(pin)::before {
-      content: none;
-    }
+      ion-range::part(knob) {
+        background: #ffc8dd;
+      }
 
-    ion-range::part(knob) {
-      background: #ffc8dd;
-    }
+      ion-range::part(bar) {
+        background: #a2d2ff;
+      }
 
-    ion-range::part(bar) {
-      background: #a2d2ff;
-    }
+      ion-range::part(bar-active) {
+        background: #bde0fe;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/refresher/advanced/angular/example_component_ts.md b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
index 035069fc2a9..98888ac14fa 100644
--- a/static/usage/v6/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
@@ -7,7 +7,21 @@ import { Component } from '@angular/core';
   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 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() {
@@ -22,7 +36,7 @@ export class ExampleComponent {
     for (let i = 0; i < count; i++) {
       this.items.unshift({
         name: this.chooseRandomName(),
-        unread: unread
+        unread: unread,
       });
     }
   }
@@ -32,6 +46,6 @@ export class ExampleComponent {
       this.addItems(3, true);
       event.target.complete();
     }, 2000);
-  };
+  }
 }
 ```
diff --git a/static/usage/v6/refresher/advanced/demo.html b/static/usage/v6/refresher/advanced/demo.html
index 8f0b2fbbe52..76c3260f914 100644
--- a/static/usage/v6/refresher/advanced/demo.html
+++ b/static/usage/v6/refresher/advanced/demo.html
@@ -1,89 +1,88 @@
 <!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>
-  <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;
-    }
+    <style>
+      ion-item {
+        --padding-start: 8px;
+      }
 
-    ion-icon {
-      font-size: 12px;
-      align-self: start;
-      margin: 15px 8px;
-    }
-  </style>
-</head>
+      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>
+  <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-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>
+        <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',
-    ];
+    <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);
-    });
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          addItems(3, true);
+          refresher.complete();
+        }, 2000);
+      });
 
-    const list = document.querySelector('ion-list');
-    addItems(5, false);
+      const list = document.querySelector('ion-list');
+      addItems(5, false);
 
-    function chooseRandomName() {
-      return names[Math.floor(Math.random() * names.length)];
-    }
+      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 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;
+      function createItems(unread = false) {
+        const name = chooseRandomName();
+        let item = document.createElement('ion-item');
+        item.button = true;
 
-      item.innerHTML += `
+        item.innerHTML += `
         <ion-icon color="primary" name="${unread ? 'ellipse' : ''}" slot="start"></ion-icon>
         <ion-label>
           <h2>${name}</h2>
@@ -91,9 +90,8 @@ <h2>${name}</h2>
         </ion-label>
       `;
 
-      return item;
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+        return item;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/refresher/advanced/javascript.md b/static/usage/v6/refresher/advanced/javascript.md
index d05bed7cacf..9e0ba6f76ed 100644
--- a/static/usage/v6/refresher/advanced/javascript.md
+++ b/static/usage/v6/refresher/advanced/javascript.md
@@ -15,7 +15,21 @@
 
 <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'];
+  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(() => {
diff --git a/static/usage/v6/refresher/advanced/react/main_tsx.md b/static/usage/v6/refresher/advanced/react/main_tsx.md
index ab9596a2675..f4cdf27d4eb 100644
--- a/static/usage/v6/refresher/advanced/react/main_tsx.md
+++ b/static/usage/v6/refresher/advanced/react/main_tsx.md
@@ -1,13 +1,39 @@
 ```tsx
 import React, { useEffect, useState } from 'react';
-import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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}[]>([]);
+  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;
 
@@ -49,12 +75,12 @@ function Example() {
         </IonRefresher>
 
         <IonList>
-          { items.map((item) => (
+          {items.map((item) => (
             <IonItem button={true}>
-              <IonIcon slot="start" color="primary" icon={ item.unread ? ellipse : '' }></IonIcon>
+              <IonIcon slot="start" color="primary" icon={item.unread ? ellipse : ''}></IonIcon>
               <IonLabel>
-                <h2>{ item.name }</h2>
-                <p>New message from { item.name }</p>
+                <h2>{item.name}</h2>
+                <p>New message from {item.name}</p>
               </IonLabel>
             </IonItem>
           ))}
diff --git a/static/usage/v6/refresher/advanced/vue.md b/static/usage/v6/refresher/advanced/vue.md
index 328bfcf00f1..c5ec3047d44 100644
--- a/static/usage/v6/refresher/advanced/vue.md
+++ b/static/usage/v6/refresher/advanced/vue.md
@@ -24,14 +24,50 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  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 },
+    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'];
+      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 = () => {
@@ -40,7 +76,7 @@
 
       const addItems = (count, unread = false) => {
         for (let i = 0; i < count; i++) {
-          items.value.unshift({name: chooseRandomName(), unread});
+          items.value.unshift({ name: chooseRandomName(), unread });
         }
       };
 
diff --git a/static/usage/v6/refresher/basic/angular/example_component_ts.md b/static/usage/v6/refresher/basic/angular/example_component_ts.md
index efb168da9d4..74304953d4e 100644
--- a/static/usage/v6/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/basic/angular/example_component_ts.md
@@ -11,6 +11,6 @@ export class ExampleComponent {
       // Any calls to load data go here
       event.target.complete();
     }, 2000);
-  };
+  }
 }
 ```
diff --git a/static/usage/v6/refresher/basic/demo.html b/static/usage/v6/refresher/basic/demo.html
index 9c378cad03e..0321562f6e7 100644
--- a/static/usage/v6/refresher/basic/demo.html
+++ b/static/usage/v6/refresher/basic/demo.html
@@ -1,43 +1,41 @@
 <!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>
 
-<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>
 
-<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>
 
-    <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>
 
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
+    <script>
+      const refresher = document.getElementById('refresher');
 
-  <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
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          refresher.complete();
+        }, 2000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/refresher/basic/react.md b/static/usage/v6/refresher/basic/react.md
index 8c828b090c7..02b0504208b 100644
--- a/static/usage/v6/refresher/basic/react.md
+++ b/static/usage/v6/refresher/basic/react.md
@@ -1,9 +1,16 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
diff --git a/static/usage/v6/refresher/custom-content/angular/example_component_html.md b/static/usage/v6/refresher/custom-content/angular/example_component_html.md
index bca91e0a0d8..5f0e0a5171f 100644
--- a/static/usage/v6/refresher/custom-content/angular/example_component_html.md
+++ b/static/usage/v6/refresher/custom-content/angular/example_component_html.md
@@ -11,7 +11,8 @@
       pullingIcon="chevron-down-circle-outline"
       pullingText="Pull to refresh"
       refreshingSpinner="circles"
-      refreshingText="Refreshing...">
+      refreshingText="Refreshing..."
+    >
     </ion-refresher-content>
   </ion-refresher>
 
diff --git a/static/usage/v6/refresher/custom-content/angular/example_component_ts.md b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
index efb168da9d4..74304953d4e 100644
--- a/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
@@ -11,6 +11,6 @@ export class ExampleComponent {
       // Any calls to load data go here
       event.target.complete();
     }, 2000);
-  };
+  }
 }
 ```
diff --git a/static/usage/v6/refresher/custom-content/demo.html b/static/usage/v6/refresher/custom-content/demo.html
index 084ad40e10d..b39a0e6918e 100644
--- a/static/usage/v6/refresher/custom-content/demo.html
+++ b/static/usage/v6/refresher/custom-content/demo.html
@@ -1,45 +1,47 @@
 <!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>
 
-<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>
 
-<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>
 
-    <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>
 
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
+    <script>
+      const refresher = document.getElementById('refresher');
 
-  <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
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          refresher.complete();
+        }, 2000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/refresher/custom-content/javascript.md b/static/usage/v6/refresher/custom-content/javascript.md
index 779bd97ed80..efcde3c9d6e 100644
--- a/static/usage/v6/refresher/custom-content/javascript.md
+++ b/static/usage/v6/refresher/custom-content/javascript.md
@@ -11,7 +11,8 @@
       pulling-icon="chevron-down-circle-outline"
       pulling-text="Pull to refresh"
       refreshing-spinner="circles"
-      refreshing-text="Refreshing...">
+      refreshing-text="Refreshing..."
+    >
     </ion-refresher-content>
   </ion-refresher>
 
diff --git a/static/usage/v6/refresher/custom-content/react.md b/static/usage/v6/refresher/custom-content/react.md
index 627f4981f56..9349b2d2857 100644
--- a/static/usage/v6/refresher/custom-content/react.md
+++ b/static/usage/v6/refresher/custom-content/react.md
@@ -1,10 +1,17 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
@@ -26,8 +33,8 @@ function Example() {
             pullingIcon={chevronDownCircleOutline}
             pullingText="Pull to refresh"
             refreshingSpinner="circles"
-            refreshingText="Refreshing...">
-          </IonRefresherContent>
+            refreshingText="Refreshing..."
+          ></IonRefresherContent>
         </IonRefresher>
 
         <p>Pull this content down to trigger the refresh.</p>
diff --git a/static/usage/v6/refresher/custom-content/vue.md b/static/usage/v6/refresher/custom-content/vue.md
index a5bb444fd91..af350137449 100644
--- a/static/usage/v6/refresher/custom-content/vue.md
+++ b/static/usage/v6/refresher/custom-content/vue.md
@@ -12,7 +12,8 @@
         :pulling-icon="chevronDownCircleOutline"
         pulling-text="Pull to refresh"
         refreshing-spinner="circles"
-        refreshing-text="Refreshing...">
+        refreshing-text="Refreshing..."
+      >
       </ion-refresher-content>
     </ion-refresher>
 
diff --git a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
index 8d604ad85ee..a5ac7eaaa9a 100644
--- a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -12,6 +12,6 @@ export class ExampleComponent {
       // Any calls to load data go here
       event.target.complete();
     }, 2000);
-  };
+  }
 }
 ```
diff --git a/static/usage/v6/refresher/custom-scroll-target/demo.html b/static/usage/v6/refresher/custom-scroll-target/demo.html
index 0adad651d65..93b1e649cc3 100644
--- a/static/usage/v6/refresher/custom-scroll-target/demo.html
+++ b/static/usage/v6/refresher/custom-scroll-target/demo.html
@@ -1,56 +1,54 @@
 <!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
+  <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/v6/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v6/refresher/custom-scroll-target/react/main_tsx.md
index fd701a7c531..a8a52b4d29d 100644
--- a/static/usage/v6/refresher/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v6/refresher/custom-scroll-target/react/main_tsx.md
@@ -1,11 +1,18 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
diff --git a/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
index efb168da9d4..74304953d4e 100644
--- a/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
@@ -11,6 +11,6 @@ export class ExampleComponent {
       // Any calls to load data go here
       event.target.complete();
     }, 2000);
-  };
+  }
 }
 ```
diff --git a/static/usage/v6/refresher/pull-properties/demo.html b/static/usage/v6/refresher/pull-properties/demo.html
index 3d8e940a636..d493a41fd9d 100644
--- a/static/usage/v6/refresher/pull-properties/demo.html
+++ b/static/usage/v6/refresher/pull-properties/demo.html
@@ -1,43 +1,41 @@
 <!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>
 
-<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>
 
-<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>
 
-    <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>
 
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
+    <script>
+      const refresher = document.getElementById('refresher');
 
-  <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
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          refresher.complete();
+        }, 2000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/refresher/pull-properties/react.md b/static/usage/v6/refresher/pull-properties/react.md
index 73f5a65b07a..e62afa17bdd 100644
--- a/static/usage/v6/refresher/pull-properties/react.md
+++ b/static/usage/v6/refresher/pull-properties/react.md
@@ -1,9 +1,16 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
diff --git a/static/usage/v6/reorder/basic/angular/example_component_html.md b/static/usage/v6/reorder/basic/angular/example_component_html.md
index 0a02fe2563d..60795eaa3ff 100644
--- a/static/usage/v6/reorder/basic/angular/example_component_html.md
+++ b/static/usage/v6/reorder/basic/angular/example_component_html.md
@@ -4,37 +4,27 @@
   <!-- 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-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <ion-label> Item 5 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
   </ion-reorder-group>
diff --git a/static/usage/v6/reorder/basic/angular/example_component_ts.md b/static/usage/v6/reorder/basic/angular/example_component_ts.md
index 6fdf85ed614..7a5c867f791 100644
--- a/static/usage/v6/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/basic/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/reorder/basic/demo.html b/static/usage/v6/reorder/basic/demo.html
index 7d721cc2790..4bd02ab3284 100644
--- a/static/usage/v6/reorder/basic/demo.html
+++ b/static/usage/v6/reorder/basic/demo.html
@@ -1,83 +1,71 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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 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 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 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>
 
-            <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');
 
-  <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);
 
-    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
+        // 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/v6/reorder/basic/javascript.md b/static/usage/v6/reorder/basic/javascript.md
index 0d7a09f9818..fe805d10fc6 100644
--- a/static/usage/v6/reorder/basic/javascript.md
+++ b/static/usage/v6/reorder/basic/javascript.md
@@ -3,37 +3,27 @@
   <!-- 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-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <ion-label> Item 5 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
   </ion-reorder-group>
@@ -42,7 +32,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v6/reorder/basic/react.md b/static/usage/v6/reorder/basic/react.md
index 179ee82a782..abe3b187294 100644
--- a/static/usage/v6/reorder/basic/react.md
+++ b/static/usage/v6/reorder/basic/react.md
@@ -19,37 +19,27 @@ function Example() {
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
         <IonItem>
-          <IonLabel>
-            Item 1
-          </IonLabel>
+          <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 2
-          </IonLabel>
+          <IonLabel>Item 2</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 3
-          </IonLabel>
+          <IonLabel>Item 3</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 4
-          </IonLabel>
+          <IonLabel>Item 4</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 5
-          </IonLabel>
+          <IonLabel>Item 5</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
       </IonReorderGroup>
diff --git a/static/usage/v6/reorder/basic/vue.md b/static/usage/v6/reorder/basic/vue.md
index 5a861e1dc26..0ac2374089f 100644
--- a/static/usage/v6/reorder/basic/vue.md
+++ b/static/usage/v6/reorder/basic/vue.md
@@ -4,37 +4,27 @@
     <!-- 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-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <ion-label> Item 5 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
     </ion-reorder-group>
@@ -57,10 +47,10 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
+      };
 
-      return { handleReorder }
-    }
+      return { handleReorder };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/reorder/custom-icon/angular/example_component_html.md b/static/usage/v6/reorder/custom-icon/angular/example_component_html.md
index 12473b3a04a..6d1fb8960bd 100644
--- a/static/usage/v6/reorder/custom-icon/angular/example_component_html.md
+++ b/static/usage/v6/reorder/custom-icon/angular/example_component_html.md
@@ -4,45 +4,35 @@
   <!-- 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-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-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-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-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-label> Item 5 </ion-label>
       <ion-reorder slot="end">
         <ion-icon name="pizza"></ion-icon>
       </ion-reorder>
diff --git a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
index 6fdf85ed614..7a5c867f791 100644
--- a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/reorder/custom-icon/demo.html b/static/usage/v6/reorder/custom-icon/demo.html
index 1d9ad3dd39e..e982d341e29 100644
--- a/static/usage/v6/reorder/custom-icon/demo.html
+++ b/static/usage/v6/reorder/custom-icon/demo.html
@@ -1,93 +1,81 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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 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 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 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>
 
-            <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');
 
-  <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);
 
-    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
+        // 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/v6/reorder/custom-icon/javascript.md b/static/usage/v6/reorder/custom-icon/javascript.md
index 6e75b74343f..d7aa87d8f64 100644
--- a/static/usage/v6/reorder/custom-icon/javascript.md
+++ b/static/usage/v6/reorder/custom-icon/javascript.md
@@ -3,45 +3,35 @@
   <!-- 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-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-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-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-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-label> Item 5 </ion-label>
       <ion-reorder slot="end">
         <ion-icon name="pizza"></ion-icon>
       </ion-reorder>
@@ -52,7 +42,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v6/reorder/custom-icon/react.md b/static/usage/v6/reorder/custom-icon/react.md
index 845a3a6decc..9103db6029d 100644
--- a/static/usage/v6/reorder/custom-icon/react.md
+++ b/static/usage/v6/reorder/custom-icon/react.md
@@ -20,45 +20,35 @@ function Example() {
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
         <IonItem>
-          <IonLabel>
-            Item 1
-          </IonLabel>
+          <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 2
-          </IonLabel>
+          <IonLabel>Item 2</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 3
-          </IonLabel>
+          <IonLabel>Item 3</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 4
-          </IonLabel>
+          <IonLabel>Item 4</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 5
-          </IonLabel>
+          <IonLabel>Item 5</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
diff --git a/static/usage/v6/reorder/custom-icon/vue.md b/static/usage/v6/reorder/custom-icon/vue.md
index 17416c67e85..87d77e33048 100644
--- a/static/usage/v6/reorder/custom-icon/vue.md
+++ b/static/usage/v6/reorder/custom-icon/vue.md
@@ -4,45 +4,35 @@
     <!-- 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-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-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-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-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-label> Item 5 </ion-label>
         <ion-reorder slot="end">
           <ion-icon :icon="pizza"></ion-icon>
         </ion-reorder>
@@ -68,9 +58,9 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
-      return { handleReorder, pizza }
-    }
+      };
+      return { handleReorder, pizza };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md
index bd08063770b..2296a5506c4 100644
--- a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md
@@ -6,37 +6,27 @@
       <!-- 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-label> Item 1 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 2
-          </ion-label>
+          <ion-label> Item 2 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 3
-          </ion-label>
+          <ion-label> Item 3 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 4
-          </ion-label>
+          <ion-label> Item 4 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
+          <ion-label> Item 5 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
       </ion-reorder-group>
diff --git a/static/usage/v6/reorder/custom-scroll-target/demo.html b/static/usage/v6/reorder/custom-scroll-target/demo.html
index 8a94ae5d8e6..afa35f1035d 100644
--- a/static/usage/v6/reorder/custom-scroll-target/demo.html
+++ b/static/usage/v6/reorder/custom-scroll-target/demo.html
@@ -1,95 +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" />
 
-<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>
-    ion-list {
-      width: 100%;
-    }
+      .ion-content-scroll-host {
+        position: absolute;
+        top: 0;
+        left: 0;
 
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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 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 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 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>
+                <ion-item>
+                  <ion-label> Item 5 </ion-label>
+                  <ion-reorder slot="end"></ion-reorder>
+                </ion-item>
+              </ion-reorder-group>
+            </ion-list>
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
+      </ion-content>
+    </ion-app>
 
-    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);
+    <script>
+      const reorderGroup = document.querySelector('ion-reorder-group');
 
-      // 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>
+      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);
 
-</html>
\ No newline at end of file
+        // 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/v6/reorder/custom-scroll-target/javascript.md b/static/usage/v6/reorder/custom-scroll-target/javascript.md
index ec5f61d6476..533a5815497 100644
--- a/static/usage/v6/reorder/custom-scroll-target/javascript.md
+++ b/static/usage/v6/reorder/custom-scroll-target/javascript.md
@@ -5,37 +5,27 @@
       <!-- 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-label> Item 1 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 2
-          </ion-label>
+          <ion-label> Item 2 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 3
-          </ion-label>
+          <ion-label> Item 3 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 4
-          </ion-label>
+          <ion-label> Item 4 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
+          <ion-label> Item 5 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
       </ion-reorder-group>
@@ -46,7 +36,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md
index cd7fd8f84b0..8a3a8eea92c 100644
--- a/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md
@@ -1,6 +1,14 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import {
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  ItemReorderEventDetail,
+} from '@ionic/react';
 
 import './main.css';
 
@@ -23,37 +31,27 @@ function Example() {
           {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
           <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
             <IonItem>
-              <IonLabel>
-                Item 1
-              </IonLabel>
+              <IonLabel>Item 1</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 2
-              </IonLabel>
+              <IonLabel>Item 2</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 3
-              </IonLabel>
+              <IonLabel>Item 3</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 4
-              </IonLabel>
+              <IonLabel>Item 4</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 5
-              </IonLabel>
+              <IonLabel>Item 5</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
           </IonReorderGroup>
diff --git a/static/usage/v6/reorder/custom-scroll-target/vue.md b/static/usage/v6/reorder/custom-scroll-target/vue.md
index 808ed347020..43151b12039 100644
--- a/static/usage/v6/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v6/reorder/custom-scroll-target/vue.md
@@ -6,42 +6,32 @@
         <!-- 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-label> Item 1 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 2
-            </ion-label>
+            <ion-label> Item 2 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 3
-            </ion-label>
+            <ion-label> Item 3 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 4
-            </ion-label>
+            <ion-label> Item 4 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 5
-            </ion-label>
+            <ion-label> Item 5 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
         </ion-reorder-group>
       </ion-list>
-      </div>
+    </div>
   </ion-content>
 </template>
 
@@ -61,10 +51,10 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
+      };
 
-      return { handleReorder }
-    }
+      return { handleReorder };
+    },
   });
 </script>
 
diff --git a/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md
index 76af0bff12e..aca04f1ee5a 100644
--- a/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md
+++ b/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md
@@ -3,44 +3,32 @@
   <!-- 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-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <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>
+<ion-button (click)="toggleReorder()"> Toggle Reorder </ion-button>
 ```
diff --git a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
index ded54467eba..af0ff643b26 100644
--- a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v6/reorder/toggling-disabled/demo.html b/static/usage/v6/reorder/toggling-disabled/demo.html
index 1eb8cba120b..38e1279ef5b 100644
--- a/static/usage/v6/reorder/toggling-disabled/demo.html
+++ b/static/usage/v6/reorder/toggling-disabled/demo.html
@@ -1,96 +1,82 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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 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 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>
 
-            <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>
 
-        <!-- 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');
 
-  <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);
 
-    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();
+      });
 
-      // 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
+      function toggleReorder() {
+        reorderGroup.disabled = !reorderGroup.disabled;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/reorder/toggling-disabled/javascript.md b/static/usage/v6/reorder/toggling-disabled/javascript.md
index 68319ec0221..90a9bc3d1d2 100644
--- a/static/usage/v6/reorder/toggling-disabled/javascript.md
+++ b/static/usage/v6/reorder/toggling-disabled/javascript.md
@@ -2,51 +2,39 @@
 <ion-list>
   <ion-reorder-group>
     <ion-item>
-      <ion-label>
-        Item 1
-      </ion-label>
+      <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <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>
+<ion-button onClick="toggleReorder()"> Toggle Reorder </ion-button>
 
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v6/reorder/toggling-disabled/react.md b/static/usage/v6/reorder/toggling-disabled/react.md
index e86e1e7516f..a231f782f5c 100644
--- a/static/usage/v6/reorder/toggling-disabled/react.md
+++ b/static/usage/v6/reorder/toggling-disabled/react.md
@@ -1,6 +1,14 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import {
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  ItemReorderEventDetail,
+} from '@ionic/react';
 
 function Example() {
   const [isDisabled, setIsDisabled] = useState(true);
@@ -17,7 +25,7 @@ function Example() {
   }
 
   function toggleReorder() {
-    setIsDisabled(current => !current);
+    setIsDisabled((current) => !current);
   }
 
   return (
@@ -25,46 +33,34 @@ function Example() {
       <IonList>
         <IonReorderGroup disabled={isDisabled} onIonItemReorder={handleReorder}>
           <IonItem>
-            <IonLabel>
-              Item 1
-            </IonLabel>
+            <IonLabel>Item 1</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 2
-            </IonLabel>
+            <IonLabel>Item 2</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 3
-            </IonLabel>
+            <IonLabel>Item 3</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 4
-            </IonLabel>
+            <IonLabel>Item 4</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 5
-            </IonLabel>
+            <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>
+      <IonButton onClick={toggleReorder}>Toggle Reorder</IonButton>
     </>
   );
 }
diff --git a/static/usage/v6/reorder/toggling-disabled/vue.md b/static/usage/v6/reorder/toggling-disabled/vue.md
index 4711f6dc74b..c649c0ebe36 100644
--- a/static/usage/v6/reorder/toggling-disabled/vue.md
+++ b/static/usage/v6/reorder/toggling-disabled/vue.md
@@ -3,46 +3,34 @@
   <ion-list>
     <ion-reorder-group :disabled="isDisabled" @ionItemReorder="handleReorder($event)">
       <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
+        <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <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>
+  <ion-button @click="toggleReorder()"> Toggle Reorder </ion-button>
 </template>
 
 <script lang="ts">
@@ -63,14 +51,14 @@
         // 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 }
-    }
+      return { isDisabled, handleReorder, toggleReorder };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/reorder/updating-data/angular/example_component_html.md b/static/usage/v6/reorder/updating-data/angular/example_component_html.md
index 4339191e634..d21fc522e96 100644
--- a/static/usage/v6/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v6/reorder/updating-data/angular/example_component_html.md
@@ -4,9 +4,7 @@
   <!-- 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-label> Item {{ item }} </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
   </ion-reorder-group>
diff --git a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
index f1132926bb4..11e2f59d553 100644
--- a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
diff --git a/static/usage/v6/reorder/updating-data/demo.html b/static/usage/v6/reorder/updating-data/demo.html
index bf7d175f937..b55fe80a47e 100644
--- a/static/usage/v6/reorder/updating-data/demo.html
+++ b/static/usage/v6/reorder/updating-data/demo.html
@@ -1,64 +1,63 @@
 <!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" />
 
-<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>
+    <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>
+  <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');
+    <script>
+      const reorderGroup = document.querySelector('ion-reorder-group');
 
-    let items = [1, 2, 3, 4, 5];
-    reorderItems(items);
+      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);
+      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);
+        // 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);
+        // 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);
-    });
+        // After complete is called the items will be in the new order
+        console.log('After complete', items);
+      });
 
-    function reorderItems(items) {
-      reorderGroup.replaceChildren();
+      function reorderItems(items) {
+        reorderGroup.replaceChildren();
 
-      let reordered = '';
+        let reordered = '';
 
-      for (let i = 0; i < items.length; i++) {
-        reordered += `
+        for (let i = 0; i < items.length; i++) {
+          reordered += `
           <ion-item>
             <ion-label>
               Item ${items[i]}
@@ -66,11 +65,10 @@
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
         `;
-      }
-
-      reorderGroup.innerHTML = reordered;
-    }
-  </script>
-</body>
+        }
 
-</html>
\ No newline at end of file
+        reorderGroup.innerHTML = reordered;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/reorder/updating-data/javascript.md b/static/usage/v6/reorder/updating-data/javascript.md
index 603f9802241..901bf08a970 100644
--- a/static/usage/v6/reorder/updating-data/javascript.md
+++ b/static/usage/v6/reorder/updating-data/javascript.md
@@ -10,7 +10,7 @@
   let items = [1, 2, 3, 4, 5];
   reorderItems(items);
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v6/reorder/updating-data/react.md b/static/usage/v6/reorder/updating-data/react.md
index 25e58caaf0f..c7ad97d184d 100644
--- a/static/usage/v6/reorder/updating-data/react.md
+++ b/static/usage/v6/reorder/updating-data/react.md
@@ -23,14 +23,12 @@ function Example() {
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
-        {items.map(item =>
+        {items.map((item) => (
           <IonItem>
-            <IonLabel>
-              Item { item }
-            </IonLabel>
+            <IonLabel>Item {item}</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
-        )}
+        ))}
       </IonReorderGroup>
     </IonList>
   );
diff --git a/static/usage/v6/reorder/updating-data/vue.md b/static/usage/v6/reorder/updating-data/vue.md
index 024fa130469..18a2d341353 100644
--- a/static/usage/v6/reorder/updating-data/vue.md
+++ b/static/usage/v6/reorder/updating-data/vue.md
@@ -4,9 +4,7 @@
     <!-- 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-label> Item {{ item }} </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
     </ion-reorder-group>
@@ -34,9 +32,9 @@
 
         // After complete is called the items will be in the new order
         console.log('After complete', items.value);
-      }
-      return { handleReorder, items }
-    }
+      };
+      return { handleReorder, items };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/reorder/wrapper/angular/example_component_html.md b/static/usage/v6/reorder/wrapper/angular/example_component_html.md
index acc62e86b49..cf856309098 100644
--- a/static/usage/v6/reorder/wrapper/angular/example_component_html.md
+++ b/static/usage/v6/reorder/wrapper/angular/example_component_html.md
@@ -5,41 +5,31 @@
   <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
+        <ion-label> Item 1 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <ion-label> Item 5 </ion-label>
       </ion-item>
     </ion-reorder>
   </ion-reorder-group>
diff --git a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
index 6fdf85ed614..7a5c867f791 100644
--- a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/reorder/wrapper/demo.html b/static/usage/v6/reorder/wrapper/demo.html
index 6bf8b66760b..81f3f981162 100644
--- a/static/usage/v6/reorder/wrapper/demo.html
+++ b/static/usage/v6/reorder/wrapper/demo.html
@@ -1,88 +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" />
 
-<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>
 
-  <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>
 
-<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 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 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 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>
 
-            <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');
 
-  <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);
 
-    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
+        // 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/v6/reorder/wrapper/javascript.md b/static/usage/v6/reorder/wrapper/javascript.md
index 38d112c30fb..e4e024ee2d4 100644
--- a/static/usage/v6/reorder/wrapper/javascript.md
+++ b/static/usage/v6/reorder/wrapper/javascript.md
@@ -4,41 +4,31 @@
   <ion-reorder-group disabled="false">
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
+        <ion-label> Item 1 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <ion-label> Item 5 </ion-label>
       </ion-item>
     </ion-reorder>
   </ion-reorder-group>
@@ -47,7 +37,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v6/reorder/wrapper/react.md b/static/usage/v6/reorder/wrapper/react.md
index 8abaf724dfa..f70ba499316 100644
--- a/static/usage/v6/reorder/wrapper/react.md
+++ b/static/usage/v6/reorder/wrapper/react.md
@@ -20,41 +20,31 @@ function Example() {
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 1
-            </IonLabel>
+            <IonLabel>Item 1</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 2
-            </IonLabel>
+            <IonLabel>Item 2</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 3
-            </IonLabel>
+            <IonLabel>Item 3</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 4
-            </IonLabel>
+            <IonLabel>Item 4</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 5
-            </IonLabel>
+            <IonLabel>Item 5</IonLabel>
           </IonItem>
         </IonReorder>
       </IonReorderGroup>
diff --git a/static/usage/v6/reorder/wrapper/vue.md b/static/usage/v6/reorder/wrapper/vue.md
index d0c732c7d39..fd157186093 100644
--- a/static/usage/v6/reorder/wrapper/vue.md
+++ b/static/usage/v6/reorder/wrapper/vue.md
@@ -5,41 +5,31 @@
     <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 1
-          </ion-label>
+          <ion-label> Item 1 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 2
-          </ion-label>
+          <ion-label> Item 2 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 3
-          </ion-label>
+          <ion-label> Item 3 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 4
-          </ion-label>
+          <ion-label> Item 4 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
+          <ion-label> Item 5 </ion-label>
         </ion-item>
       </ion-reorder>
     </ion-reorder-group>
@@ -62,10 +52,10 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
+      };
 
-      return { handleReorder }
-    }
+      return { handleReorder };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/ripple-effect/basic/demo.html b/static/usage/v6/ripple-effect/basic/demo.html
index fd593291421..ac5a5d3e912 100644
--- a/static/usage/v6/ripple-effect/basic/demo.html
+++ b/static/usage/v6/ripple-effect/basic/demo.html
@@ -1,82 +1,80 @@
 <!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>
+  <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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/ripple-effect/customizing/demo.html b/static/usage/v6/ripple-effect/customizing/demo.html
index 6ce7f376ed1..ffd5c634eb6 100644
--- a/static/usage/v6/ripple-effect/customizing/demo.html
+++ b/static/usage/v6/ripple-effect/customizing/demo.html
@@ -1,81 +1,79 @@
 <!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>
+  <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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/ripple-effect/type/demo.html b/static/usage/v6/ripple-effect/type/demo.html
index cfaa115fac9..8a47442c246 100644
--- a/static/usage/v6/ripple-effect/type/demo.html
+++ b/static/usage/v6/ripple-effect/type/demo.html
@@ -1,81 +1,79 @@
 <!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>
+  <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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/router/basic/demo.html b/static/usage/v6/router/basic/demo.html
index 9dac309e25c..854fc847f40 100644
--- a/static/usage/v6/router/basic/demo.html
+++ b/static/usage/v6/router/basic/demo.html
@@ -1,30 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Router</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-router>
-      <ion-route url="/" component="page-one"></ion-route>
-      <ion-route url="/page-two" component="page-two"></ion-route>
-    </ion-router>
-
-    <ion-router-outlet></ion-router-outlet>
-
-    <script>
-      class PageOne extends HTMLElement {
-        connectedCallback() {
-          this.innerHTML = `
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Router</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-router>
+        <ion-route url="/" component="page-one"></ion-route>
+        <ion-route url="/page-two" component="page-two"></ion-route>
+      </ion-router>
+
+      <ion-router-outlet></ion-router-outlet>
+
+      <script>
+        class PageOne extends HTMLElement {
+          connectedCallback() {
+            this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -36,12 +34,12 @@
             <ion-button>Go to Page 2</ion-button>
           </ion-router-link>
         </ion-content>`;
+          }
         }
-      }
 
-      class PageTwo extends HTMLElement {
-        connectedCallback() {
-          this.innerHTML = `
+        class PageTwo extends HTMLElement {
+          connectedCallback() {
+            this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -53,13 +51,12 @@
         <ion-content class="ion-padding">
           This is the content for page 2.
         </ion-content>`;
+          }
         }
-      }
-
-      customElements.define('page-one', PageOne);
-      customElements.define('page-two', PageTwo);
-    </script>
-  </ion-app>
-</body>
 
+        customElements.define('page-one', PageOne);
+        customElements.define('page-two', PageTwo);
+      </script>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v6/searchbar/basic/demo.html b/static/usage/v6/searchbar/basic/demo.html
index e4d6f94b532..36d1f15846e 100644
--- a/static/usage/v6/searchbar/basic/demo.html
+++ b/static/usage/v6/searchbar/basic/demo.html
@@ -1,34 +1,32 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/searchbar/cancel-button/angular.md b/static/usage/v6/searchbar/cancel-button/angular.md
index 094e4d63193..1843708f78b 100644
--- a/static/usage/v6/searchbar/cancel-button/angular.md
+++ b/static/usage/v6/searchbar/cancel-button/angular.md
@@ -2,5 +2,10 @@
 <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>
+<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/v6/searchbar/cancel-button/demo.html b/static/usage/v6/searchbar/cancel-button/demo.html
index ebfef12609b..81c5a841123 100644
--- a/static/usage/v6/searchbar/cancel-button/demo.html
+++ b/static/usage/v6/searchbar/cancel-button/demo.html
@@ -1,34 +1,36 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/searchbar/cancel-button/javascript.md b/static/usage/v6/searchbar/cancel-button/javascript.md
index 094e4d63193..1843708f78b 100644
--- a/static/usage/v6/searchbar/cancel-button/javascript.md
+++ b/static/usage/v6/searchbar/cancel-button/javascript.md
@@ -2,5 +2,10 @@
 <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>
+<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/v6/searchbar/cancel-button/react.md b/static/usage/v6/searchbar/cancel-button/react.md
index 5f312e34aa0..39f4be10fe5 100644
--- a/static/usage/v6/searchbar/cancel-button/react.md
+++ b/static/usage/v6/searchbar/cancel-button/react.md
@@ -9,7 +9,12 @@ function Example() {
       <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>
+      <IonSearchbar
+        showCancelButton="always"
+        cancelButtonText="Custom Cancel"
+        cancelButtonIcon={trash}
+        placeholder="Custom Cancel Button"
+      ></IonSearchbar>
     </>
   );
 }
diff --git a/static/usage/v6/searchbar/cancel-button/vue.md b/static/usage/v6/searchbar/cancel-button/vue.md
index a56a1451692..d3f85859011 100644
--- a/static/usage/v6/searchbar/cancel-button/vue.md
+++ b/static/usage/v6/searchbar/cancel-button/vue.md
@@ -3,7 +3,12 @@
   <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>
+  <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">
@@ -15,7 +20,7 @@
     components: { IonSearchbar },
     setup() {
       return { trash };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/searchbar/clear-button/demo.html b/static/usage/v6/searchbar/clear-button/demo.html
index e85b497b349..1f8c62a5dac 100644
--- a/static/usage/v6/searchbar/clear-button/demo.html
+++ b/static/usage/v6/searchbar/clear-button/demo.html
@@ -1,33 +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" />
 
-<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>
 
-  <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
+  <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/v6/searchbar/clear-button/vue.md b/static/usage/v6/searchbar/clear-button/vue.md
index b778093f372..3b5a9e53c7f 100644
--- a/static/usage/v6/searchbar/clear-button/vue.md
+++ b/static/usage/v6/searchbar/clear-button/vue.md
@@ -15,7 +15,7 @@
     components: { IonSearchbar },
     setup() {
       return { trashBin };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
index 1d8215ef1a5..1017ac602f9 100644
--- a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
@@ -6,12 +6,23 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+  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);
+    this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
   }
 }
 ```
diff --git a/static/usage/v6/searchbar/debounce/demo.html b/static/usage/v6/searchbar/debounce/demo.html
index ac43a663b20..2f400305d1f 100644
--- a/static/usage/v6/searchbar/debounce/demo.html
+++ b/static/usage/v6/searchbar/debounce/demo.html
@@ -1,64 +1,73 @@
 <!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" />
 
-<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>
 
-  <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>
+  <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');
+  <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);
+    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);
+    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 handleChange(event) {
+      const query = event.target.value.toLowerCase();
+      results = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+      filterItems(results);
+    }
 
-  function filterItems(results) {
-    list.replaceChildren();
+    function filterItems(results) {
+      list.replaceChildren();
 
-    let items = '';
+      let items = '';
 
-    for (let i = 0; i < results.length; i++) {
-      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
+      list.innerHTML = items;
+    }
+  </script>
+</html>
diff --git a/static/usage/v6/searchbar/debounce/javascript.md b/static/usage/v6/searchbar/debounce/javascript.md
index 6a74446f699..8d2275fc502 100644
--- a/static/usage/v6/searchbar/debounce/javascript.md
+++ b/static/usage/v6/searchbar/debounce/javascript.md
@@ -6,7 +6,18 @@
   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'];
+  const data = [
+    'Amsterdam',
+    'Buenos Aires',
+    'Cairo',
+    'Geneva',
+    'Hong Kong',
+    'Istanbul',
+    'London',
+    'Madrid',
+    'New York',
+    'Panama City',
+  ];
   let results = [...data];
   filterItems(results);
 
@@ -14,7 +25,7 @@
 
   function handleChange(event) {
     const query = event.target.value.toLowerCase();
-    results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
+    results = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);
   }
 
diff --git a/static/usage/v6/searchbar/debounce/react.md b/static/usage/v6/searchbar/debounce/react.md
index f46ce1a6da5..b6f21791b70 100644
--- a/static/usage/v6/searchbar/debounce/react.md
+++ b/static/usage/v6/searchbar/debounce/react.md
@@ -3,24 +3,35 @@ 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'];
+  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 = "";
+    let query = '';
     const target = ev.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
 
-    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
-  }
+    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>
+        {results.map((result) => (
+          <IonItem>{result}</IonItem>
         ))}
       </IonList>
     </>
diff --git a/static/usage/v6/searchbar/debounce/vue.md b/static/usage/v6/searchbar/debounce/vue.md
index 2d85d6ed2d2..511d94c596c 100644
--- a/static/usage/v6/searchbar/debounce/vue.md
+++ b/static/usage/v6/searchbar/debounce/vue.md
@@ -16,7 +16,18 @@
   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 data = [
+        'Amsterdam',
+        'Buenos Aires',
+        'Cairo',
+        'Geneva',
+        'Hong Kong',
+        'Istanbul',
+        'London',
+        'Madrid',
+        'New York',
+        'Panama City',
+      ];
       const results = ref(data);
 
       return { data, results };
@@ -24,7 +35,7 @@
     methods: {
       handleChange(event) {
         const query = event.target.value.toLowerCase();
-        this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
+        this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
       },
     },
   });
diff --git a/static/usage/v6/searchbar/search-icon/demo.html b/static/usage/v6/searchbar/search-icon/demo.html
index 33e2793d25d..b26d7833da2 100644
--- a/static/usage/v6/searchbar/search-icon/demo.html
+++ b/static/usage/v6/searchbar/search-icon/demo.html
@@ -1,31 +1,29 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/searchbar/search-icon/vue.md b/static/usage/v6/searchbar/search-icon/vue.md
index 6414acf7b2e..38068deedcc 100644
--- a/static/usage/v6/searchbar/search-icon/vue.md
+++ b/static/usage/v6/searchbar/search-icon/vue.md
@@ -13,7 +13,7 @@
     components: { IonSearchbar },
     setup() {
       return { searchCircle };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/searchbar/theming/colors/demo.html b/static/usage/v6/searchbar/theming/colors/demo.html
index 5701010c08b..ecda885f204 100644
--- a/static/usage/v6/searchbar/theming/colors/demo.html
+++ b/static/usage/v6/searchbar/theming/colors/demo.html
@@ -1,39 +1,37 @@
 <!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" />
 
-<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>
 
-  <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
+  <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/v6/searchbar/theming/css-properties/demo.html b/static/usage/v6/searchbar/theming/css-properties/demo.html
index bd168970198..afb1a91f39b 100644
--- a/static/usage/v6/searchbar/theming/css-properties/demo.html
+++ b/static/usage/v6/searchbar/theming/css-properties/demo.html
@@ -1,48 +1,46 @@
 <!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
+  <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/v6/searchbar/theming/css-properties/javascript.md b/static/usage/v6/searchbar/theming/css-properties/javascript.md
index dca643d2a52..7ea20182e77 100644
--- a/static/usage/v6/searchbar/theming/css-properties/javascript.md
+++ b/static/usage/v6/searchbar/theming/css-properties/javascript.md
@@ -2,23 +2,23 @@
 <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;
+  /* 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;
-}
+    --border-radius: 4px;
+  }
 
-ion-searchbar.ios.custom {
-  --cancel-button-color: #19422d;
-}
+  ion-searchbar.ios.custom {
+    --cancel-button-color: #19422d;
+  }
 
-ion-searchbar.md.custom {
-  --cancel-button-color: #fff;
-}
+  ion-searchbar.md.custom {
+    --cancel-button-color: #fff;
+  }
 </style>
 ```
diff --git a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md
index 4b1b527952e..62d396e75aa 100644
--- a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md
@@ -5,9 +5,7 @@ import { IonSearchbar } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return (
-    <IonSearchbar showCancelButton="focus" class="custom"></IonSearchbar>
-  );
+  return <IonSearchbar showCancelButton="focus" class="custom"></IonSearchbar>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/segment-button/basic/demo.html b/static/usage/v6/segment-button/basic/demo.html
index 280022dbc91..e9f2c891df3 100644
--- a/static/usage/v6/segment-button/basic/demo.html
+++ b/static/usage/v6/segment-button/basic/demo.html
@@ -1,56 +1,54 @@
 <!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" />
 
-<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;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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
+          <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/v6/segment-button/layout/demo.html b/static/usage/v6/segment-button/layout/demo.html
index 83bd89fd250..e82040f7388 100644
--- a/static/usage/v6/segment-button/layout/demo.html
+++ b/static/usage/v6/segment-button/layout/demo.html
@@ -1,104 +1,102 @@
 <!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" />
 
-<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;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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">
-            <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-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-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
+          <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/v6/segment-button/layout/vue.md b/static/usage/v6/segment-button/layout/vue.md
index d3c60a4004d..71a039bd211 100644
--- a/static/usage/v6/segment-button/layout/vue.md
+++ b/static/usage/v6/segment-button/layout/vue.md
@@ -82,7 +82,7 @@
     components: { IonIcon, IonLabel, IonSegment, IonSegmentButton },
     setup() {
       return { call, heart, pin };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/segment-button/theming/css-properties/demo.html b/static/usage/v6/segment-button/theming/css-properties/demo.html
index 144ecaa5639..122019c5f15 100644
--- a/static/usage/v6/segment-button/theming/css-properties/demo.html
+++ b/static/usage/v6/segment-button/theming/css-properties/demo.html
@@ -1,59 +1,57 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-segment-button {
+        --indicator-color: #08a391;
+      }
 
-    ion-segment-button {
-      --indicator-color: #08a391;
-    }
+      /* Material Design styles */
+      ion-segment-button.md {
+        --color: #000;
+        --color-checked: #08a391;
+        --indicator-height: 4px;
+      }
 
-    /* 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>
 
-    /* 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
+  <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/v6/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
index c81886b5b20..f85d086806a 100644
--- a/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
@@ -1,71 +1,69 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-segment-button::part(indicator-background) {
+        background: #08a391;
+      }
 
-    ion-segment-button::part(indicator-background) {
-      background: #08a391;
-    }
+      /* Material Design styles */
+      ion-segment-button.md::part(native) {
+        color: #000;
+      }
 
-    /* Material Design styles */
-    ion-segment-button.md::part(native) {
-      color: #000;
-    }
+      .segment-button-checked.md::part(native) {
+        color: #08a391;
+      }
 
-    .segment-button-checked.md::part(native) {
-      color: #08a391;
-    }
+      ion-segment-button.md::part(indicator-background) {
+        height: 4px;
+      }
 
-    ion-segment-button.md::part(indicator-background) {
-      height: 4px;
-    }
+      /* iOS styles */
+      ion-segment-button.ios::part(native) {
+        color: #08a391;
+      }
 
-    /* iOS styles */
-    ion-segment-button.ios::part(native) {
-      color: #08a391;
-    }
+      .segment-button-checked.ios::part(native) {
+        color: #fff;
+      }
 
-    .segment-button-checked.ios::part(native) {
-      color: #fff;
-    }
+      ion-segment-button.ios::part(indicator-background) {
+        border-radius: 20px;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/segment/basic/demo.html b/static/usage/v6/segment/basic/demo.html
index 886c2aafef7..5d1e409dab5 100644
--- a/static/usage/v6/segment/basic/demo.html
+++ b/static/usage/v6/segment/basic/demo.html
@@ -1,50 +1,48 @@
 <!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" />
 
-<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;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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
+          <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/v6/segment/scrollable/demo.html b/static/usage/v6/segment/scrollable/demo.html
index b8f90118667..00a52676811 100644
--- a/static/usage/v6/segment/scrollable/demo.html
+++ b/static/usage/v6/segment/scrollable/demo.html
@@ -1,66 +1,64 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      display: grid;
-    }
+      ion-segment {
+        width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/segment/scrollable/vue.md b/static/usage/v6/segment/scrollable/vue.md
index c3afaf67ba2..160fab75489 100644
--- a/static/usage/v6/segment/scrollable/vue.md
+++ b/static/usage/v6/segment/scrollable/vue.md
@@ -43,9 +43,18 @@
     components: { IonIcon, IonSegment, IonSegmentButton },
     setup() {
       return {
-        home, heart, pin, star, call, globe, basket, barbell, trash, person
-      }
-    }
+        home,
+        heart,
+        pin,
+        star,
+        call,
+        globe,
+        basket,
+        barbell,
+        trash,
+        person,
+      };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/segment/theming/colors/demo.html b/static/usage/v6/segment/theming/colors/demo.html
index 0f7579af2cd..a34f7ab872a 100644
--- a/static/usage/v6/segment/theming/colors/demo.html
+++ b/static/usage/v6/segment/theming/colors/demo.html
@@ -1,113 +1,111 @@
 <!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" />
 
-<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;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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
+  <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/v6/segment/theming/css-properties/demo.html b/static/usage/v6/segment/theming/css-properties/demo.html
index d6d92fbd835..255b86bb513 100644
--- a/static/usage/v6/segment/theming/css-properties/demo.html
+++ b/static/usage/v6/segment/theming/css-properties/demo.html
@@ -1,42 +1,40 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-segment {
+        --background: #54dc98;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/select/basic/multiple-selection/demo.html b/static/usage/v6/select/basic/multiple-selection/demo.html
index 9847cfa382b..1ff3a55787b 100644
--- a/static/usage/v6/select/basic/multiple-selection/demo.html
+++ b/static/usage/v6/select/basic/multiple-selection/demo.html
@@ -1,32 +1,30 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md
index de30bdc02d0..84f81cf5ecf 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md
+++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md
@@ -16,4 +16,4 @@
 <div class="ion-padding">
   <p *ngFor="let log of logs">{{ log }}</p>
 </div>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/select/basic/responding-to-interaction/demo.html b/static/usage/v6/select/basic/responding-to-interaction/demo.html
index dbea5d3b8df..0048a85754b 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/demo.html
+++ b/static/usage/v6/select/basic/responding-to-interaction/demo.html
@@ -1,62 +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 - 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>
+  <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>
-      </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
+      </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>
diff --git a/static/usage/v6/select/basic/responding-to-interaction/javascript.md b/static/usage/v6/select/basic/responding-to-interaction/javascript.md
index 78ba1244101..a553e0b899b 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/javascript.md
+++ b/static/usage/v6/select/basic/responding-to-interaction/javascript.md
@@ -14,7 +14,7 @@
   const select = document.querySelector('ion-select');
   const log = document.querySelector('#log');
 
-  select.addEventListener('ionChange', e => {
+  select.addEventListener('ionChange', (e) => {
     log.insertAdjacentHTML('afterbegin', `<p>ionChange fired with value: ${e.detail.value}</p>`);
   });
 
diff --git a/static/usage/v6/select/basic/responding-to-interaction/vue.md b/static/usage/v6/select/basic/responding-to-interaction/vue.md
index e8d2880e45e..7e62f53b0d4 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/vue.md
+++ b/static/usage/v6/select/basic/responding-to-interaction/vue.md
@@ -27,14 +27,14 @@
     components: { IonItem, IonList, IonSelect, IonSelectOption },
     data() {
       return {
-        logs: []
-      }
+        logs: [],
+      };
     },
     methods: {
       pushLog(msg) {
         this.logs.unshift(msg);
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/select/basic/single-selection/demo.html b/static/usage/v6/select/basic/single-selection/demo.html
index a8fb4f13e0a..65ad76e7c64 100644
--- a/static/usage/v6/select/basic/single-selection/demo.html
+++ b/static/usage/v6/select/basic/single-selection/demo.html
@@ -1,32 +1,30 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/select/customization/button-text/demo.html b/static/usage/v6/select/customization/button-text/demo.html
index 1eb72b8dda5..e0d20a63b47 100644
--- a/static/usage/v6/select/customization/button-text/demo.html
+++ b/static/usage/v6/select/customization/button-text/demo.html
@@ -1,41 +1,39 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md
index e1093bdf292..ccaddb758e0 100644
--- a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md
+++ b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<ion-list>        
+<ion-list>
   <ion-item>
     <ion-label>Alert</ion-label>
     <ion-select [interfaceOptions]="customAlertOptions" interface="alert" placeholder="Select One">
@@ -8,7 +8,7 @@
       <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">
@@ -17,7 +17,7 @@
       <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">
diff --git a/static/usage/v6/select/customization/interface-options/demo.html b/static/usage/v6/select/customization/interface-options/demo.html
index 8cff7c7bbf0..66dc0547561 100644
--- a/static/usage/v6/select/customization/interface-options/demo.html
+++ b/static/usage/v6/select/customization/interface-options/demo.html
@@ -1,83 +1,81 @@
 <!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" />
 
-<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>
 
-  <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>
 
-<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>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>
 
-          <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;
 
-  <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 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
+      const customActionSheetSelect = document.getElementById('customActionSheetSelect');
+      const customActionSheetOptions = {
+        header: 'Colors',
+        subHeader: 'Select your favorite color',
+      };
+      customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/select/customization/interface-options/javascript.md b/static/usage/v6/select/customization/interface-options/javascript.md
index 9f48ee33cf9..8c06ebd788a 100644
--- a/static/usage/v6/select/customization/interface-options/javascript.md
+++ b/static/usage/v6/select/customization/interface-options/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-list>        
+<ion-list>
   <ion-item>
     <ion-label>Alert</ion-label>
     <ion-select id="customAlertSelect" interface="alert" placeholder="Select One">
@@ -8,7 +8,7 @@
       <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">
@@ -17,7 +17,7 @@
       <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">
@@ -34,7 +34,7 @@
     header: 'Pizza Toppings',
     subHeader: 'Select your favorite topping',
     message: 'Choose only one',
-    translucent: true
+    translucent: true,
   };
   customAlertSelect.interfaceOptions = customAlertOptions;
 
@@ -42,14 +42,14 @@
   const customPopoverOptions = {
     header: 'Hair Color',
     subHeader: 'Select your hair color',
-    message: 'Only select your dominant 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'
+    subHeader: 'Select your favorite color',
   };
   customActionSheetSelect.interfaceOptions = customActionSheetOptions;
 </script>
diff --git a/static/usage/v6/select/customization/interface-options/react.md b/static/usage/v6/select/customization/interface-options/react.md
index 57cdc7a9c9a..7bc42d0a9f3 100644
--- a/static/usage/v6/select/customization/interface-options/react.md
+++ b/static/usage/v6/select/customization/interface-options/react.md
@@ -6,22 +6,22 @@ function Example() {
     header: 'Pizza Toppings',
     subHeader: 'Select your favorite topping',
     message: 'Choose only one',
-    translucent: true
+    translucent: true,
   };
 
   const customPopoverOptions = {
     header: 'Hair Color',
     subHeader: 'Select your hair color',
-    message: 'Only select your dominant hair color'
+    message: 'Only select your dominant hair color',
   };
 
   const customActionSheetOptions = {
     header: 'Colors',
-    subHeader: 'Select your favorite color'
+    subHeader: 'Select your favorite color',
   };
 
   return (
-    <IonList>        
+    <IonList>
       <IonItem>
         <IonLabel>Alert</IonLabel>
         <IonSelect interfaceOptions={customAlertOptions} interface="alert" placeholder="Select One">
@@ -30,7 +30,7 @@ function Example() {
           <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
         </IonSelect>
       </IonItem>
-          
+
       <IonItem>
         <IonLabel>Popover</IonLabel>
         <IonSelect interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
@@ -39,7 +39,7 @@ function Example() {
           <IonSelectOption value="red">Red</IonSelectOption>
         </IonSelect>
       </IonItem>
-          
+
       <IonItem>
         <IonLabel>Action Sheet</IonLabel>
         <IonSelect interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One">
diff --git a/static/usage/v6/select/customization/interface-options/vue.md b/static/usage/v6/select/customization/interface-options/vue.md
index 7488095006d..573b33c2115 100644
--- a/static/usage/v6/select/customization/interface-options/vue.md
+++ b/static/usage/v6/select/customization/interface-options/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-list>        
+  <ion-list>
     <ion-item>
       <ion-label>Alert</ion-label>
       <ion-select :interface-options="customAlertOptions" interface="alert" placeholder="Select One">
@@ -9,7 +9,7 @@
         <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">
@@ -18,7 +18,7 @@
         <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">
@@ -41,26 +41,26 @@
         header: 'Pizza Toppings',
         subHeader: 'Select your favorite topping',
         message: 'Choose only one',
-        translucent: true
+        translucent: true,
       };
 
       const customPopoverOptions = {
         header: 'Hair Color',
         subHeader: 'Select your hair color',
-        message: 'Only select your dominant hair color'
+        message: 'Only select your dominant hair color',
       };
 
       const customActionSheetOptions = {
         header: 'Colors',
-        subHeader: 'Select your favorite color'
+        subHeader: 'Select your favorite color',
       };
 
       return {
         customAlertOptions,
         customPopoverOptions,
-        customActionSheetOptions
-      }
-    }
+        customActionSheetOptions,
+      };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/select/customization/styling-select/angular/example_component_css.md b/static/usage/v6/select/customization/styling-select/angular/example_component_css.md
index 27fc8e85e4b..4ca173bed8f 100644
--- a/static/usage/v6/select/customization/styling-select/angular/example_component_css.md
+++ b/static/usage/v6/select/customization/styling-select/angular/example_component_css.md
@@ -24,4 +24,4 @@ ion-select::part(icon) {
   color: #971e49;
   opacity: 1;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/select/customization/styling-select/demo.html b/static/usage/v6/select/customization/styling-select/demo.html
index 429beab68c4..8c72865f576 100644
--- a/static/usage/v6/select/customization/styling-select/demo.html
+++ b/static/usage/v6/select/customization/styling-select/demo.html
@@ -1,60 +1,58 @@
 <!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
+  <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>
diff --git a/static/usage/v6/select/customization/styling-select/javascript.md b/static/usage/v6/select/customization/styling-select/javascript.md
index 9b35411552b..6011399bfd7 100644
--- a/static/usage/v6/select/customization/styling-select/javascript.md
+++ b/static/usage/v6/select/customization/styling-select/javascript.md
@@ -6,30 +6,30 @@
 </ion-select>
 
 <style>
-ion-select {
-  --placeholder-color: #971e49;
-  --placeholder-opacity: 1;
-  width: 100%;
-  justify-content: center;
-}
+  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),
+  ion-select::part(text) {
+    flex: 0 0 auto;
+  }
 
-ion-select::part(placeholder)::first-letter {
-  font-size: 24px;
-  font-weight: 500;
-}
+  ion-select::part(placeholder)::first-letter {
+    font-size: 24px;
+    font-weight: 500;
+  }
 
-ion-select::part(text) {
-  color: #545ca7;
-}
+  ion-select::part(text) {
+    color: #545ca7;
+  }
 
-ion-select::part(icon) {
-  color: #971e49;
-  opacity: 1;
-}
+  ion-select::part(icon) {
+    color: #971e49;
+    opacity: 1;
+  }
 </style>
 ```
diff --git a/static/usage/v6/select/customization/styling-select/react/main_css.md b/static/usage/v6/select/customization/styling-select/react/main_css.md
index 27fc8e85e4b..4ca173bed8f 100644
--- a/static/usage/v6/select/customization/styling-select/react/main_css.md
+++ b/static/usage/v6/select/customization/styling-select/react/main_css.md
@@ -24,4 +24,4 @@ ion-select::part(icon) {
   color: #971e49;
   opacity: 1;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/select/interfaces/action-sheet/demo.html b/static/usage/v6/select/interfaces/action-sheet/demo.html
index bd1dd427e85..e0320dab055 100644
--- a/static/usage/v6/select/interfaces/action-sheet/demo.html
+++ b/static/usage/v6/select/interfaces/action-sheet/demo.html
@@ -1,32 +1,30 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/select/interfaces/popover/demo.html b/static/usage/v6/select/interfaces/popover/demo.html
index 9656b8e303d..141d5954bf7 100644
--- a/static/usage/v6/select/interfaces/popover/demo.html
+++ b/static/usage/v6/select/interfaces/popover/demo.html
@@ -1,32 +1,30 @@
 <!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>
 
-<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
+  <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>
diff --git a/static/usage/v6/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
index 4fcf064bcc4..02c24c0e9b9 100644
--- a/static/usage/v6/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
@@ -14,4 +14,4 @@
     <ion-label>Current value: {{ currentFood | json }}</ion-label>
   </ion-item>
 </ion-list>
-```
\ No newline at end of file
+```
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
index 2c3dc70038b..cc56e47e440 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/demo.html
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/demo.html
@@ -1,91 +1,89 @@
 <!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" />
 
-<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"
+    <style>
+      .container > ion-list {
+        width: 70%;
       }
-    ];
 
-    const compareWithFn = (o1, o2) => {
-      if (!o1 || !o2) {
-        return o1 === o2;
+      ion-text {
+        white-space: normal;
       }
+    </style>
+  </head>
 
-      if (Array.isArray(o2)) {
-        return o2.some((o) => o.id === o1.id);
-      }
+  <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;
+        }
 
-      return o1.id === o2.id;
-    };
+        if (Array.isArray(o2)) {
+          return o2.some((o) => o.id === o1.id);
+        }
 
-    const selectEl = document.querySelector('ion-select');
-    selectEl.compareWith = compareWithFn;
+        return o1.id === o2.id;
+      };
 
-    foods.forEach((option, i) => {
-      const selectOption = document.createElement('ion-select-option');
-      selectOption.value = option;
-      selectOption.textContent = option.name;
-      selectEl.appendChild(selectOption);
-    });
+      const selectEl = document.querySelector('ion-select');
+      selectEl.compareWith = compareWithFn;
 
-    const valueLabel = document.querySelector('ion-text');
-    selectEl.addEventListener('ionChange', () => {
-      valueLabel.innerHTML = JSON.stringify(selectEl.value);
-    });
-  </script>
-</body>
+      foods.forEach((option, i) => {
+        const selectOption = document.createElement('ion-select-option');
+        selectOption.value = option;
+        selectOption.textContent = option.name;
+        selectEl.appendChild(selectOption);
+      });
 
-</html>
\ No newline at end of file
+      const valueLabel = document.querySelector('ion-text');
+      selectEl.addEventListener('ionChange', () => {
+        valueLabel.innerHTML = JSON.stringify(selectEl.value);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v6/select/objects-as-values/multiple-selection/javascript.md
index 28209ccc6b3..6eb837858b0 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/javascript.md
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/javascript.md
@@ -15,27 +15,27 @@
   const foods = [
     {
       id: 1,
-      name: "Apples",
-      type: "fruit"
+      name: 'Apples',
+      type: 'fruit',
     },
     {
       id: 2,
-      name: "Carrots",
-      type: "vegetable"
+      name: 'Carrots',
+      type: 'vegetable',
     },
     {
       id: 3,
-      name: "Cupcakes",
-      type: "dessert"
-    }
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
   ];
 
   const compareWithFn = (o1, o2) => {
-    if(!o1 || !o2) {
+    if (!o1 || !o2) {
       return o1 === o2;
     }
 
-    if(Array.isArray(o2)) {
+    if (Array.isArray(o2)) {
       return o2.some((o) => o.id === o1.id);
     }
 
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/vue.md b/static/usage/v6/select/objects-as-values/multiple-selection/vue.md
index 176adfe8eae..ba29e084a52 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/vue.md
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/vue.md
@@ -25,39 +25,39 @@
     components: { IonItem, IonList, IonLabel, IonSelect, IonSelectOption },
     data() {
       return {
-        currentFood: "",
+        currentFood: '',
         foods: [
           {
             id: 1,
-            name: "Apples",
-            type: "fruit"
+            name: 'Apples',
+            type: 'fruit',
           },
           {
             id: 2,
-            name: "Carrots",
-            type: "vegetable"
+            name: 'Carrots',
+            type: 'vegetable',
           },
           {
             id: 3,
-            name: "Cupcakes",
-            type: "dessert"
-          }
-        ]
-      }
+            name: 'Cupcakes',
+            type: 'dessert',
+          },
+        ],
+      };
     },
     methods: {
       compareWith(o1, o2) {
-        if(!o1 || !o2) {
+        if (!o1 || !o2) {
           return o1 === o2;
         }
 
-        if(Array.isArray(o2)) {
+        if (Array.isArray(o2)) {
           return o2.some((o) => o.id === o1.id);
         }
 
         return o1.id === o2.id;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/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
index 340b7456d55..9cee4ff3aab 100644
--- a/static/usage/v6/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
@@ -1,11 +1,7 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select
-      [compareWith]="compareWith"
-      placeholder="Select food"
-      (ionChange)="handleChange($event)"
-    >
+    <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>
@@ -13,4 +9,4 @@
     <ion-label>Current value: {{ currentFood | json }}</ion-label>
   </ion-item>
 </ion-list>
-```
\ No newline at end of file
+```
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
index ca59d32afb2..6945ee6f708 100644
--- a/static/usage/v6/select/objects-as-values/using-comparewith/demo.html
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/demo.html
@@ -1,79 +1,77 @@
 <!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" />
 
-<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"
+    <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>
 
-    const compareWithFn = (o1, o2) => {
-      return o1 && o2 ? o1.id === o2.id : o1 === o2;
-    };
+    <script>
+      const foods = [
+        {
+          id: 1,
+          name: 'Apples',
+          type: 'fruit',
+        },
+        {
+          id: 2,
+          name: 'Carrots',
+          type: 'vegetable',
+        },
+        {
+          id: 3,
+          name: 'Cupcakes',
+          type: 'dessert',
+        },
+      ];
 
-    const selectEl = document.querySelector('ion-select');
-    selectEl.compareWith = compareWithFn;
+      const compareWithFn = (o1, o2) => {
+        return o1 && o2 ? o1.id === o2.id : o1 === o2;
+      };
 
-    foods.forEach((option, i) => {
-      const selectOption = document.createElement('ion-select-option');
-      selectOption.value = option;
-      selectOption.textContent = option.name;
-      selectEl.appendChild(selectOption);
-    });
+      const selectEl = document.querySelector('ion-select');
+      selectEl.compareWith = compareWithFn;
 
-    const valueLabel = document.querySelector('ion-text');
-    selectEl.addEventListener('ionChange', () => {
-      valueLabel.innerHTML = JSON.stringify(selectEl.value);
-    });
-  </script>
-</body>
+      foods.forEach((option, i) => {
+        const selectOption = document.createElement('ion-select-option');
+        selectOption.value = option;
+        selectOption.textContent = option.name;
+        selectEl.appendChild(selectOption);
+      });
 
-</html>
\ No newline at end of file
+      const valueLabel = document.querySelector('ion-text');
+      selectEl.addEventListener('ionChange', () => {
+        valueLabel.innerHTML = JSON.stringify(selectEl.value);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v6/select/objects-as-values/using-comparewith/javascript.md
index 3f98524f6f2..7e7b42e8f9f 100644
--- a/static/usage/v6/select/objects-as-values/using-comparewith/javascript.md
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/javascript.md
@@ -15,19 +15,19 @@
   const foods = [
     {
       id: 1,
-      name: "Apples",
-      type: "fruit"
+      name: 'Apples',
+      type: 'fruit',
     },
     {
       id: 2,
-      name: "Carrots",
-      type: "vegetable"
+      name: 'Carrots',
+      type: 'vegetable',
     },
     {
       id: 3,
-      name: "Cupcakes",
-      type: "dessert"
-    }
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
   ];
 
   const compareWithFn = (o1, o2) => {
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/vue.md b/static/usage/v6/select/objects-as-values/using-comparewith/vue.md
index d54f39474b5..934e3e9a4dc 100644
--- a/static/usage/v6/select/objects-as-values/using-comparewith/vue.md
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/vue.md
@@ -24,31 +24,31 @@
     components: { IonLabel, IonSelect, IonSelectOption },
     data() {
       return {
-        currentFood: "",
+        currentFood: '',
         foods: [
           {
             id: 1,
-            name: "Apples",
-            type: "fruit"
+            name: 'Apples',
+            type: 'fruit',
           },
           {
             id: 2,
-            name: "Carrots",
-            type: "vegetable"
+            name: 'Carrots',
+            type: 'vegetable',
           },
           {
             id: 3,
-            name: "Cupcakes",
-            type: "dessert"
-          }
-        ]
-      }
+            name: 'Cupcakes',
+            type: 'dessert',
+          },
+        ],
+      };
     },
     methods: {
       compareWith(o1, o2) {
         return o1 && o2 ? o1.id === o2.id : o1 === o2;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/select/typeahead/angular/angular_types_ts.md b/static/usage/v6/select/typeahead/angular/angular_types_ts.md
index bdf47c9d0ae..42d4583e026 100644
--- a/static/usage/v6/select/typeahead/angular/angular_types_ts.md
+++ b/static/usage/v6/select/typeahead/angular/angular_types_ts.md
@@ -2,5 +2,5 @@
 export interface Item {
   text: string;
   value: string;
-};
+}
 ```
diff --git a/static/usage/v6/select/typeahead/angular/example_component_html.md b/static/usage/v6/select/typeahead/angular/example_component_html.md
index 3c702c08d67..5d4c94d6c44 100644
--- a/static/usage/v6/select/typeahead/angular/example_component_html.md
+++ b/static/usage/v6/select/typeahead/angular/example_component_html.md
@@ -20,4 +20,4 @@
     ></app-typeahead>
   </ng-template>
 </ion-modal>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/select/typeahead/angular/example_component_ts.md b/static/usage/v6/select/typeahead/angular/example_component_ts.md
index ee7f5e29305..ded6fa60b0f 100644
--- a/static/usage/v6/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v6/select/typeahead/angular/example_component_ts.md
@@ -1,7 +1,7 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
 import { IonModal } from '@ionic/angular';
-import { Item } from './types'; 
+import { Item } from './types';
 
 @Component({
   selector: 'app-example',
@@ -9,10 +9,10 @@ import { Item } from './types';
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
-  
+
   selectedFruitsText = '0 Items';
   selectedFruits: string[] = [];
-  
+
   fruits: Item[] = [
     { text: 'Apple', value: 'apple' },
     { text: 'Apricot', value: 'apricot' },
@@ -38,18 +38,18 @@ export class ExampleComponent {
     { text: 'Pineapple', value: 'pineapple' },
     { text: 'Pomegranate', value: 'pomegranate' },
     { text: 'Raspberry', value: 'raspberry' },
-    { text: 'Strawberry', value: 'strawberry' }
+    { text: 'Strawberry', value: 'strawberry' },
   ];
-  
+
   private formatData(data: string[]) {
     if (data.length === 1) {
-      const fruit = this.fruits.find(fruit => fruit.value === data[0])
+      const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
       return fruit.text;
     }
-  
+
     return `${data.length} items`;
   }
-  
+
   fruitSelectionChanged(fruits: string[]) {
     this.selectedFruits = fruits;
     this.selectedFruitsText = this.formatData(this.selectedFruits);
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_html.md b/static/usage/v6/select/typeahead/angular/modal-example_component_html.md
index ed5fc081852..b67f90fae89 100644
--- a/static/usage/v6/select/typeahead/angular/modal-example_component_html.md
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_html.md
@@ -19,7 +19,7 @@
     <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
       <ion-label>{{ item.text }}</ion-label>
       <ion-checkbox
-        [value]="item.value" 
+        [value]="item.value"
         [checked]="isChecked(item.value)"
         (ionChange)="checkboxChange($event)"
       ></ion-checkbox>
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
index 5631319f98c..9bd21f1b404 100644
--- a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
@@ -14,31 +14,31 @@ export class TypeaheadComponent implements OnInit {
 
   @Output() selectionCancel = new EventEmitter<void>();
   @Output() selectionChange = new EventEmitter<string[]>();
-  
+
   filteredItems: Item[] = [];
   workingSelectedValues: string[] = [];
-  
+
   ngOnInit() {
     this.filteredItems = [...this.items];
     this.workingSelectedValues = [...this.selectedItems];
   }
-  
+
   trackItems(index: number, item: Item) {
     return item.value;
   }
-  
+
   cancelChanges() {
     this.selectionCancel.emit();
   }
-  
+
   confirmChanges() {
     this.selectionChange.emit(this.workingSelectedValues);
   }
-  
+
   searchbarInput(ev) {
     this.filterList(ev.target.value);
   }
-  
+
   /**
    * Update the rendered view with
    * the provided search query. If no
@@ -58,27 +58,24 @@ export class TypeaheadComponent implements OnInit {
        * query and check to see which items
        * contain the search query as a substring.
        */
-      const normalizedQuery = searchQuery.toLowerCase(); 
-      this.filteredItems = this.items.filter(item => {
+      const normalizedQuery = searchQuery.toLowerCase();
+      this.filteredItems = this.items.filter((item) => {
         return item.text.toLowerCase().includes(normalizedQuery);
       });
     }
   }
 
   isChecked(value: string) {
-    return this.workingSelectedValues.find(item => item === value);
+    return this.workingSelectedValues.find((item) => item === value);
   }
-  
+
   checkboxChange(ev) {
     const { checked, value } = ev.detail;
-    
+
     if (checked) {
-      this.workingSelectedValues = [
-        ...this.workingSelectedValues,
-        value
-      ]
+      this.workingSelectedValues = [...this.workingSelectedValues, value];
     } else {
-      this.workingSelectedValues = this.workingSelectedValues.filter(item => item !== value);
+      this.workingSelectedValues = this.workingSelectedValues.filter((item) => item !== value);
     }
   }
 }
diff --git a/static/usage/v6/select/typeahead/demo.html b/static/usage/v6/select/typeahead/demo.html
index f4687ec9959..69fe01982c4 100644
--- a/static/usage/v6/select/typeahead/demo.html
+++ b/static/usage/v6/select/typeahead/demo.html
@@ -39,8 +39,7 @@
           </ion-toolbar>
         </ion-header>
         <ion-content color="light" class="ion-padding">
-          <ion-list id="modal-list" inset="true">
-          </ion-list>
+          <ion-list id="modal-list" inset="true"> </ion-list>
         </ion-content>
       </ion-modal>
     </ion-app>
@@ -75,7 +74,7 @@
         { text: 'Pineapple', value: 'pineapple' },
         { text: 'Pomegranate', value: 'pomegranate' },
         { text: 'Raspberry', value: 'raspberry' },
-        { text: 'Strawberry', value: 'strawberry' }
+        { text: 'Strawberry', value: 'strawberry' },
       ];
 
       /**
@@ -108,8 +107,8 @@
 
         const normalizedQuery = searchQuery.toLowerCase();
 
-        return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
-      }
+        return fruits.filter((fruit) => fruit.text.toLowerCase().includes(normalizedQuery));
+      };
 
       /**
        * Render a filtered list of fruits
@@ -127,11 +126,11 @@
               <ion-label>${item.text}</ion-label>
               <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
             </ion-item>
-          `
+          `;
         });
 
         list.innerHTML = template;
-      }
+      };
 
       /**
        * Formats the selected fruits in
@@ -143,12 +142,12 @@
        */
       const formatData = (data) => {
         if (data.length === 1) {
-          const fruit = fruits.find(fruit => fruit.value === data[0])
+          const fruit = fruits.find((fruit) => fruit.value === data[0]);
           return fruit.text;
         }
 
         return `${data.length} items`;
-      }
+      };
 
       /**
        * Reset any working changes
@@ -157,7 +156,7 @@
       const cancelChanges = () => {
         workingSelectedFruits = [...selectedFruits];
         modal.dismiss(undefined, 'cancel');
-      }
+      };
 
       /**
        * Return the selected
@@ -165,22 +164,21 @@
        */
       const confirmChanges = () => {
         selectedFruits = [...workingSelectedFruits];
-        modal.dismiss(selectedFruits)
+        modal.dismiss(selectedFruits);
       };
 
       // Listen for all ionChange events from the checkbox
       modal.addEventListener('ionChange', (ev) => {
-        if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+        if (ev.target.tagName !== 'ION-CHECKBOX') {
+          return;
+        }
 
         const { checked, value } = ev.detail;
 
         if (checked) {
-          workingSelectedFruits = [
-            ...workingSelectedFruits,
-            value
-          ]
+          workingSelectedFruits = [...workingSelectedFruits, value];
         } else {
-          workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+          workingSelectedFruits = workingSelectedFruits.filter((fruit) => fruit !== value);
         }
       });
 
diff --git a/static/usage/v6/select/typeahead/index.md b/static/usage/v6/select/typeahead/index.md
index 8919f00671f..aa76c597de1 100644
--- a/static/usage/v6/select/typeahead/index.md
+++ b/static/usage/v6/select/typeahead/index.md
@@ -19,20 +19,20 @@ import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
   version="6"
-  code={{ 
-    javascript, 
+  code={{
+    javascript,
     react: {
       files: {
         'src/main.tsx': react_main_tsx,
         'src/types.ts': react_types_ts,
-        'src/AppTypeahead.tsx': typeahead_component_tsx
-      }
-    }, 
+        'src/AppTypeahead.tsx': typeahead_component_tsx,
+      },
+    },
     vue: {
       files: {
         'src/components/Example.vue': vue_example,
         'src/types.ts': vue_types_ts,
-        'src/components/AppTypeahead.vue': vue_typeahead_component
+        'src/components/AppTypeahead.vue': vue_typeahead_component,
       },
     },
     angular: {
@@ -42,11 +42,11 @@ import angular_types_ts from './angular/angular_types_ts.md';
         'src/app/typeahead.component.html': angular_modal_example_component_html,
         'src/app/typeahead.component.ts': angular_modal_example_component_ts,
         'src/app/app.module.ts': angular_app_module_ts,
-        'src/app/types.ts': angular_types_ts
+        'src/app/types.ts': angular_types_ts,
       },
-    }, 
+    },
   }}
   src="usage/v6/select/typeahead/demo.html"
   devicePreview
   includeIonContent={false}
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/v6/select/typeahead/javascript.md b/static/usage/v6/select/typeahead/javascript.md
index c7aa9352267..39bdb64bb2f 100644
--- a/static/usage/v6/select/typeahead/javascript.md
+++ b/static/usage/v6/select/typeahead/javascript.md
@@ -26,8 +26,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content color="light" class="ion-padding">
-    <ion-list id="modal-list" inset="true">
-    </ion-list>
+    <ion-list id="modal-list" inset="true"> </ion-list>
   </ion-content>
 </ion-modal>
 
@@ -61,7 +60,7 @@
     { text: 'Pineapple', value: 'pineapple' },
     { text: 'Pomegranate', value: 'pomegranate' },
     { text: 'Raspberry', value: 'raspberry' },
-    { text: 'Strawberry', value: 'strawberry' }
+    { text: 'Strawberry', value: 'strawberry' },
   ];
 
   /**
@@ -94,7 +93,7 @@
 
     const normalizedQuery = searchQuery.toLowerCase();
 
-    return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
+    return fruits.filter((fruit) => fruit.text.toLowerCase().includes(normalizedQuery));
   }
 
   /**
@@ -113,7 +112,7 @@
           <ion-label>${item.text}</ion-label>
           <ion-checkbox slot="end" value="${item.value}" checked="${checked}"></ion-checkbox>
         </ion-item>
-      `
+      `;
     });
 
     list.innerHTML = template;
@@ -129,7 +128,7 @@
    */
   function formatData(data) {
     if (data.length === 1) {
-      const fruit = fruits.find(fruit => fruit.value === data[0])
+      const fruit = fruits.find((fruit) => fruit.value === data[0]);
       return fruit.text;
     }
 
@@ -151,22 +150,21 @@
    */
   function confirmChanges() {
     selectedFruits = [...workingSelectedFruits];
-    modal.dismiss(selectedFruits)
-  };
+    modal.dismiss(selectedFruits);
+  }
 
   // Listen for all ionChange events from the checkbox
   modal.addEventListener('ionChange', (ev) => {
-    if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+    if (ev.target.tagName !== 'ION-CHECKBOX') {
+      return;
+    }
 
     const { checked, value } = ev.detail;
 
     if (checked) {
-      workingSelectedFruits = [
-        ...workingSelectedFruits,
-        value
-      ]
+      workingSelectedFruits = [...workingSelectedFruits, value];
     } else {
-      workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+      workingSelectedFruits = workingSelectedFruits.filter((fruit) => fruit !== value);
     }
   });
 
diff --git a/static/usage/v6/select/typeahead/react/main_tsx.md b/static/usage/v6/select/typeahead/react/main_tsx.md
index 14ab838bc18..391259a7ecf 100644
--- a/static/usage/v6/select/typeahead/react/main_tsx.md
+++ b/static/usage/v6/select/typeahead/react/main_tsx.md
@@ -30,7 +30,7 @@ const fruits: Item[] = [
   { text: 'Pineapple', value: 'pineapple' },
   { text: 'Pomegranate', value: 'pomegranate' },
   { text: 'Raspberry', value: 'raspberry' },
-  { text: 'Strawberry', value: 'strawberry' }
+  { text: 'Strawberry', value: 'strawberry' },
 ];
 
 function Example() {
@@ -38,21 +38,21 @@ function Example() {
   const [selectedFruits, setSelectedFruits] = useState<string[]>([]);
 
   const modal = useRef<HTMLIonModalElement>(null);
-  
+
   const formatData = (data: string[]) => {
     if (data.length === 1) {
-      const fruit = fruits.find(fruit => fruit.value === data[0])!;
+      const fruit = fruits.find((fruit) => fruit.value === data[0])!;
       return fruit.text;
     }
-  
+
     return `${data.length} items`;
-  }
-  
+  };
+
   const fruitSelectionChanged = (fruits: string[]) => {
     setSelectedFruits(fruits);
     setSelectedFruitsText(formatData(fruits));
     modal.current?.dismiss();
-  }
+  };
 
   return (
     <>
@@ -60,11 +60,13 @@ function Example() {
         <IonList inset={true}>
           <IonItem button={true} detail={false} id="select-fruits">
             <IonLabel>Favorite Fruits</IonLabel>
-            <div slot="end" id="selected-fruits">{ selectedFruitsText }</div>
+            <div slot="end" id="selected-fruits">
+              {selectedFruitsText}
+            </div>
           </IonItem>
         </IonList>
       </IonContent>
-      
+
       <IonModal trigger="select-fruits" ref={modal}>
         <AppTypeahead
           title="Favorite Fruits"
diff --git a/static/usage/v6/select/typeahead/react/react_types_ts.md b/static/usage/v6/select/typeahead/react/react_types_ts.md
index bdf47c9d0ae..42d4583e026 100644
--- a/static/usage/v6/select/typeahead/react/react_types_ts.md
+++ b/static/usage/v6/select/typeahead/react/react_types_ts.md
@@ -2,5 +2,5 @@
 export interface Item {
   text: string;
   value: string;
-};
+}
 ```
diff --git a/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
index 0df268e172b..c13bb310b45 100644
--- a/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
+++ b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
@@ -1,6 +1,18 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonSearchbar,
+  IonToolbar,
+} from '@ionic/react';
 import type { CheckboxCustomEvent } from '@ionic/react';
 import type { Item } from './types';
 
@@ -15,29 +27,29 @@ interface TypeaheadProps {
 function AppTypeahead(props: TypeaheadProps) {
   const [filteredItems, setFilteredItems] = useState<Item[]>([...props.items]);
   const [workingSelectedValues, setWorkingSelectedValues] = useState<string[]>([...props.selectedItems]);
-  
+
   const isChecked = (value: string) => {
-    return workingSelectedValues.find(item => item === value) !== undefined;
-  }
-  
+    return workingSelectedValues.find((item) => item === value) !== undefined;
+  };
+
   const cancelChanges = () => {
     const { onSelectionCancel } = props;
     if (onSelectionCancel !== undefined) {
       onSelectionCancel();
     }
-  }
-  
+  };
+
   const confirmChanges = () => {
     const { onSelectionChange } = props;
     if (onSelectionChange !== undefined) {
       onSelectionChange(workingSelectedValues);
     }
-  }
-  
+  };
+
   const searchbarInput = (ev: any) => {
     filterList(ev.target.value);
-  }
-  
+  };
+
   /**
    * Update the rendered view with
    * the provided search query. If no
@@ -58,22 +70,24 @@ function AppTypeahead(props: TypeaheadProps) {
        * contain the search query as a substring.
        */
       const normalizedQuery = searchQuery.toLowerCase();
-      setFilteredItems(props.items.filter(item => {
-        return item.text.toLowerCase().includes(normalizedQuery);
-      }));
+      setFilteredItems(
+        props.items.filter((item) => {
+          return item.text.toLowerCase().includes(normalizedQuery);
+        })
+      );
     }
-  }
-  
+  };
+
   const checkboxChange = (ev: CheckboxCustomEvent) => {
     const { checked, value } = ev.detail;
-    
+
     if (checked) {
       setWorkingSelectedValues([...workingSelectedValues, value]);
     } else {
-      setWorkingSelectedValues(workingSelectedValues.filter(item => item !== value));
+      setWorkingSelectedValues(workingSelectedValues.filter((item) => item !== value));
     }
-  }
-  
+  };
+
   return (
     <>
       <IonHeader>
@@ -90,10 +104,10 @@ function AppTypeahead(props: TypeaheadProps) {
           <IonSearchbar onIonInput={searchbarInput}></IonSearchbar>
         </IonToolbar>
       </IonHeader>
-      
+
       <IonContent color="light" class="ion-padding">
         <IonList id="modal-list" inset={true}>
-          {filteredItems.map(item => (
+          {filteredItems.map((item) => (
             <IonItem key={item.value}>
               <IonLabel>{item.text}</IonLabel>
               <IonCheckbox
diff --git a/static/usage/v6/select/typeahead/vue/example_vue.md b/static/usage/v6/select/typeahead/vue/example_vue.md
index 8086c2f0d6a..372b3e7d8ec 100644
--- a/static/usage/v6/select/typeahead/vue/example_vue.md
+++ b/static/usage/v6/select/typeahead/vue/example_vue.md
@@ -8,7 +8,7 @@
       </ion-item>
     </ion-list>
   </ion-content>
-  
+
   <ion-modal trigger="select-fruits" ref="modal">
     <app-typeahead
       class="ion-page"
@@ -55,29 +55,29 @@
         { text: 'Pineapple', value: 'pineapple' },
         { text: 'Pomegranate', value: 'pomegranate' },
         { text: 'Raspberry', value: 'raspberry' },
-        { text: 'Strawberry', value: 'strawberry' }
+        { text: 'Strawberry', value: 'strawberry' },
       ];
       const modal = ref();
       const selectedFruitsText = ref('0 Items');
       const selectedFruits = ref([]);
-      
+
       const formatData = (data: string[]) => {
         if (data.length === 1) {
-          const fruit = fruits.find(fruit => fruit.value === data[0])
+          const fruit = fruits.find((fruit) => fruit.value === data[0]);
           return fruit.text;
         }
-      
+
         return `${data.length} items`;
-      }
-      
+      };
+
       const fruitSelectionChanged = (fruits: string[]) => {
         selectedFruits.value = fruits;
         selectedFruitsText.value = formatData(selectedFruits.value);
         modal.value.$el.dismiss();
-      }
-      
-      return { modal, fruits, selectedFruitsText, selectedFruits, fruitSelectionChanged }; 
-    }
+      };
+
+      return { modal, fruits, selectedFruitsText, selectedFruits, fruitSelectionChanged };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
index e80c0fc09cd..ec383adafc3 100644
--- a/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
@@ -14,16 +14,13 @@
       <ion-searchbar @ionInput="searchbarInput($event)"></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-content color="light" class="ion-padding">
     <ion-list id="modal-list" :inset="true">
-      <ion-item
-        v-for="item in filteredItems"
-        :key="item.value"
-      >
+      <ion-item v-for="item in filteredItems" :key="item.value">
         <ion-label>{{ item.text }}</ion-label>
         <ion-checkbox
-          :value="item.value" 
+          :value="item.value"
           :checked="isChecked(item.value)"
           @ionChange="checkboxChange($event)"
         ></ion-checkbox>
@@ -33,7 +30,19 @@
 </template>
 
 <script lang="ts">
-  import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/vue';
+  import {
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonSearchbar,
+    IonToolbar,
+  } from '@ionic/vue';
   import type { CheckboxCustomEvent, SearchbarCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
@@ -43,31 +52,43 @@
       selectedItems: Array,
       title: {
         type: String,
-        default: 'Select Items'
-      }
+        default: 'Select Items',
+      },
     },
     emits: ['selection-cancel', 'selection-change'],
-    components: { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar },
+    components: {
+      IonButton,
+      IonButtons,
+      IonCheckbox,
+      IonContent,
+      IonHeader,
+      IonItem,
+      IonLabel,
+      IonList,
+      IonTitle,
+      IonSearchbar,
+      IonToolbar,
+    },
     setup(props, { emit }) {
       const filteredItems = ref([...props.items]);
       const workingSelectedValues = ref([...props.selectedItems]);
-      
+
       const isChecked = (value: string) => {
-        return workingSelectedValues.value.find(item => item === value) !== undefined;
-      }
-      
+        return workingSelectedValues.value.find((item) => item === value) !== undefined;
+      };
+
       const cancelChanges = () => {
         emit('selection-cancel');
-      }
-      
+      };
+
       const confirmChanges = () => {
         emit('selection-change', workingSelectedValues.value);
-      }
-      
+      };
+
       const searchbarInput = (ev: SearchbarCustomEvent) => {
         filterList(ev.target.value);
-      }
-      
+      };
+
       /**
        * Update the rendered view with
        * the provided search query. If no
@@ -87,36 +108,33 @@
            * query and check to see which items
            * contain the search query as a substring.
            */
-          const normalizedQuery = searchQuery.toLowerCase(); 
-          filteredItems.value = props.items.filter(item => {
+          const normalizedQuery = searchQuery.toLowerCase();
+          filteredItems.value = props.items.filter((item) => {
             return item.text.toLowerCase().includes(normalizedQuery);
           });
         }
-      }
-      
+      };
+
       const checkboxChange = (ev: CheckboxCustomEvent) => {
         const { checked, value } = ev.detail;
-        
+
         if (checked) {
-          workingSelectedValues.value = [
-            ...workingSelectedValues.value,
-            value
-          ]
+          workingSelectedValues.value = [...workingSelectedValues.value, value];
         } else {
-          workingSelectedValues.value = workingSelectedValues.value.filter(item => item !== value);
+          workingSelectedValues.value = workingSelectedValues.value.filter((item) => item !== value);
         }
-      }
-      
-      return { 
-        filteredItems, 
-        workingSelectedValues, 
-        isChecked, 
-        cancelChanges, 
-        confirmChanges, 
+      };
+
+      return {
+        filteredItems,
+        workingSelectedValues,
+        isChecked,
+        cancelChanges,
+        confirmChanges,
         searchbarInput,
-        checkboxChange
-      }
-    }
+        checkboxChange,
+      };
+    },
   });
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/select/typeahead/vue/vue_types_ts.md b/static/usage/v6/select/typeahead/vue/vue_types_ts.md
index bdf47c9d0ae..42d4583e026 100644
--- a/static/usage/v6/select/typeahead/vue/vue_types_ts.md
+++ b/static/usage/v6/select/typeahead/vue/vue_types_ts.md
@@ -2,5 +2,5 @@
 export interface Item {
   text: string;
   value: string;
-};
+}
 ```
diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
index 8b30337848c..8423962a3e9 100644
--- a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
+++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
@@ -4,10 +4,9 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  styleUrls: ['example.component.css'],
 })
 export class ExampleComponent {
   public loaded = false;
 }
-
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/skeleton-text/basic/demo.html b/static/usage/v6/skeleton-text/basic/demo.html
index a1cbc3f4f12..e67e173e15f 100644
--- a/static/usage/v6/skeleton-text/basic/demo.html
+++ b/static/usage/v6/skeleton-text/basic/demo.html
@@ -1,51 +1,50 @@
 <!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>
-  <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;
-    }
+    <style>
+      ion-list {
+        width: 300px;
+      }
 
-    .container {
-      flex-direction: column;
-    }
-  </style>
-</head>
+      .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>
+  <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();
-      }
+    <script>
+      const list = document.querySelector('ion-list');
+      let loaded = false;
+      const toggle = () => {
+        if (loaded) {
+          setSkeletonText();
+        } else {
+          setContent();
+        }
 
-      loaded = !loaded;
-    }
+        loaded = !loaded;
+      };
 
-    const setSkeletonText = () => {
-      list.innerHTML = `
+      const setSkeletonText = () => {
+        list.innerHTML = `
           <ion-list-header>
             <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
           </ion-list-header>
@@ -66,10 +65,10 @@ <h3>
             </ion-label>
           </ion-item>
         `;
-    }
+      };
 
-    const setContent = () => {
-      list.innerHTML = `
+      const setContent = () => {
+        list.innerHTML = `
           <ion-list-header>Albums</ion-list-header>
           <ion-item>
             <ion-thumbnail slot="start">
@@ -82,11 +81,9 @@ <h3>Abbey Road</h3>
             </ion-label>
           </ion-item>
         `;
-    }
-
-    setSkeletonText();
-
-  </script>
-</body>
+      };
 
-</html>
\ No newline at end of file
+      setSkeletonText();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/skeleton-text/basic/javascript.md b/static/usage/v6/skeleton-text/basic/javascript.md
index 5eefa7c1149..da71f295063 100644
--- a/static/usage/v6/skeleton-text/basic/javascript.md
+++ b/static/usage/v6/skeleton-text/basic/javascript.md
@@ -56,6 +56,5 @@
   }
 
   setSkeletonText();
-
 </script>
 ```
diff --git a/static/usage/v6/skeleton-text/basic/react.md b/static/usage/v6/skeleton-text/basic/react.md
index 2ea377034c9..a247849a478 100644
--- a/static/usage/v6/skeleton-text/basic/react.md
+++ b/static/usage/v6/skeleton-text/basic/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React, { useState } from 'react';
-import { 
+import {
   IonButton,
   IonIcon,
   IonItem,
@@ -15,12 +15,12 @@ function Example() {
   const [loaded, setLoaded] = useState(false);
   return (
     <>
-      {loaded && 
+      {loaded && (
         <IonList>
           <IonListHeader>Albums</IonListHeader>
           <IonItem>
             <IonThumbnail slot="start">
-              <IonIcon style={{ 'width': '100%', 'height': '100%' }} icon={musicalNotes}></IonIcon>
+              <IonIcon style={{ width: '100%', height: '100%' }} icon={musicalNotes}></IonIcon>
             </IonThumbnail>
             <IonLabel>
               <h3>Abbey Road</h3>
@@ -29,11 +29,11 @@ function Example() {
             </IonLabel>
           </IonItem>
         </IonList>
-      }
-      {!loaded &&
+      )}
+      {!loaded && (
         <IonList>
           <IonListHeader>
-            <IonSkeletonText animated={true} style={{ 'width': '80px' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '80px' }}></IonSkeletonText>
           </IonListHeader>
           <IonItem>
             <IonThumbnail slot="start">
@@ -41,21 +41,21 @@ function Example() {
             </IonThumbnail>
             <IonLabel>
               <h3>
-                <IonSkeletonText animated={true} style={{ 'width': '80%' }}></IonSkeletonText>
+                <IonSkeletonText animated={true} style={{ width: '80%' }}></IonSkeletonText>
               </h3>
               <p>
-                <IonSkeletonText animated={true} style={{ 'width': '60%' }}></IonSkeletonText>
+                <IonSkeletonText animated={true} style={{ width: '60%' }}></IonSkeletonText>
               </p>
               <p>
-                <IonSkeletonText animated={true} style={{ 'width': '30%' }}></IonSkeletonText>
+                <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/v6/skeleton-text/basic/vue.md b/static/usage/v6/skeleton-text/basic/vue.md
index c03a518af19..f391050a009 100644
--- a/static/usage/v6/skeleton-text/basic/vue.md
+++ b/static/usage/v6/skeleton-text/basic/vue.md
@@ -13,7 +13,7 @@
       </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>
@@ -35,7 +35,7 @@
       </ion-label>
     </ion-item>
   </ion-list>
-  
+
   <ion-button @click="setLoaded(!loaded)">Toggle</ion-button>
 </template>
 
@@ -50,7 +50,7 @@
     IonSkeletonText,
     IonThumbnail,
   } from '@ionic/vue';
-  import { musicalNotes } from 'ionicons/icons'
+  import { musicalNotes } from 'ionicons/icons';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
@@ -66,13 +66,13 @@
     },
     setup() {
       const loaded = ref(false);
-      const setLoaded = (state: boolean) => loaded.value = state;
+      const setLoaded = (state: boolean) => (loaded.value = state);
       return {
         loaded,
         musicalNotes,
-        setLoaded
-      }
-    }
+        setLoaded,
+      };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md
index 67761872c60..c59d8603262 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md
+++ b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md
@@ -4,4 +4,4 @@ ion-skeleton-text {
   --background: rgba(188, 0, 255, 0.065);
   --background-rgb: 188, 0, 255;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/demo.html b/static/usage/v6/skeleton-text/theming/css-properties/demo.html
index 6a84c2b7943..c78f798b396 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/demo.html
+++ b/static/usage/v6/skeleton-text/theming/css-properties/demo.html
@@ -1,60 +1,58 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    ion-list {
-      width: 300px;
-    }
+      .container {
+        flex-direction: column;
+      }
 
-    .container {
-      flex-direction: column;
-    }
+      ion-skeleton-text {
+        --border-radius: 9999px;
+        --background: rgba(188, 0, 255, 0.065);
+        --background-rgb: 188, 0, 255;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v6/skeleton-text/theming/css-properties/javascript.md b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md
index 20463c6aba6..90d27d3f31e 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/javascript.md
+++ b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md
@@ -26,6 +26,6 @@
         <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
       </p>
     </ion-label>
-    </ion-item>
+  </ion-item>
 </ion-list>
 ```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md
index 67761872c60..c59d8603262 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md
+++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md
@@ -4,4 +4,4 @@ ion-skeleton-text {
   --background: rgba(188, 0, 255, 0.065);
   --background-rgb: 188, 0, 255;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md
index 29e6e159f68..d66ea73ff7f 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md
@@ -1,13 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonItem,
-  IonLabel,
-  IonList,
-  IonListHeader,
-  IonSkeletonText,
-  IonThumbnail,
-} from '@ionic/react';
+import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react';
 
 import './main.css';
 
@@ -15,7 +8,7 @@ function Example() {
   return (
     <IonList>
       <IonListHeader>
-        <IonSkeletonText animated={true} style={{ 'width': '80px' }}></IonSkeletonText>
+        <IonSkeletonText animated={true} style={{ width: '80px' }}></IonSkeletonText>
       </IonListHeader>
       <IonItem>
         <IonThumbnail slot="start">
@@ -23,13 +16,13 @@ function Example() {
         </IonThumbnail>
         <IonLabel>
           <h3>
-            <IonSkeletonText animated={true} style={{ 'width': '80%' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '80%' }}></IonSkeletonText>
           </h3>
           <p>
-            <IonSkeletonText animated={true} style={{ 'width': '60%' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '60%' }}></IonSkeletonText>
           </p>
           <p>
-            <IonSkeletonText animated={true} style={{ 'width': '30%' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '30%' }}></IonSkeletonText>
           </p>
         </IonLabel>
       </IonItem>
@@ -37,4 +30,4 @@ function Example() {
   );
 }
 export default Example;
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/vue.md b/static/usage/v6/skeleton-text/theming/css-properties/vue.md
index 418a7ca610f..2785a0e8b51 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/vue.md
+++ b/static/usage/v6/skeleton-text/theming/css-properties/vue.md
@@ -1,5 +1,5 @@
 ```html
-<template>  
+<template>
   <ion-list>
     <ion-list-header>
       <ion-skeleton-text :animated="true" style="width: 80px"></ion-skeleton-text>
@@ -24,14 +24,7 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonItem,
-    IonLabel,
-    IonList,
-    IonListHeader,
-    IonSkeletonText,
-    IonThumbnail,
-  } from '@ionic/vue';
+  import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -42,7 +35,7 @@
       IonListHeader,
       IonSkeletonText,
       IonThumbnail,
-    }
+    },
   });
 </script>
 
diff --git a/static/usage/v6/spinner/basic/demo.html b/static/usage/v6/spinner/basic/demo.html
index cf495c8bd07..525a6219143 100644
--- a/static/usage/v6/spinner/basic/demo.html
+++ b/static/usage/v6/spinner/basic/demo.html
@@ -1,79 +1,77 @@
 <!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>
-  <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>
 
-  <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>
 
-<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>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</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 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</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>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>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>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>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
+          <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/v6/spinner/theming/colors/demo.html b/static/usage/v6/spinner/theming/colors/demo.html
index 387a56e38d4..02842144ff9 100644
--- a/static/usage/v6/spinner/theming/colors/demo.html
+++ b/static/usage/v6/spinner/theming/colors/demo.html
@@ -1,33 +1,31 @@
 <!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>
 
-<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
+  <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/v6/spinner/theming/css-properties/demo.html b/static/usage/v6/spinner/theming/css-properties/demo.html
index 6c369bd71fd..2b1c205f158 100644
--- a/static/usage/v6/spinner/theming/css-properties/demo.html
+++ b/static/usage/v6/spinner/theming/css-properties/demo.html
@@ -1,30 +1,28 @@
 <!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>
-  <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>
 
-  <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
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-spinner></ion-spinner>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/spinner/theming/css-properties/react.md b/static/usage/v6/spinner/theming/css-properties/react.md
index e5cd98ffb60..117d82c8541 100644
--- a/static/usage/v6/spinner/theming/css-properties/react.md
+++ b/static/usage/v6/spinner/theming/css-properties/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonSpinner } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonSpinner></IonSpinner>
-  );
+  return <IonSpinner></IonSpinner>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/split-pane/basic/angular.md b/static/usage/v6/split-pane/basic/angular.md
index 0183d57a9fa..c642d54bc50 100644
--- a/static/usage/v6/split-pane/basic/angular.md
+++ b/static/usage/v6/split-pane/basic/angular.md
@@ -6,9 +6,7 @@
         <ion-title>Menu</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Menu Content
-    </ion-content>
+    <ion-content class="ion-padding"> Menu Content </ion-content>
   </ion-menu>
 
   <div class="ion-page" id="main">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <ion-content class="ion-padding"> Main View Content </ion-content>
   </div>
 </ion-split-pane>
 ```
diff --git a/static/usage/v6/split-pane/basic/demo.html b/static/usage/v6/split-pane/basic/demo.html
index c514ebd1dbc..7570fe2438f 100644
--- a/static/usage/v6/split-pane/basic/demo.html
+++ b/static/usage/v6/split-pane/basic/demo.html
@@ -1,42 +1,36 @@
 <!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>
 
-<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>
 
-<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
+        <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/v6/split-pane/basic/javascript.md b/static/usage/v6/split-pane/basic/javascript.md
index 626cc1ee03f..7d7cb736c98 100644
--- a/static/usage/v6/split-pane/basic/javascript.md
+++ b/static/usage/v6/split-pane/basic/javascript.md
@@ -6,9 +6,7 @@
         <ion-title>Menu</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Menu Content
-    </ion-content>
+    <ion-content class="ion-padding"> Menu Content </ion-content>
   </ion-menu>
 
   <div class="ion-page" id="main">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <ion-content class="ion-padding"> Main View Content </ion-content>
   </div>
 </ion-split-pane>
 ```
diff --git a/static/usage/v6/split-pane/basic/react.md b/static/usage/v6/split-pane/basic/react.md
index 4088c068f1d..f754f18b3a6 100644
--- a/static/usage/v6/split-pane/basic/react.md
+++ b/static/usage/v6/split-pane/basic/react.md
@@ -11,20 +11,16 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Menu Content
-        </IonContent>
+        <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>
+        <IonContent className="ion-padding">Main View Content</IonContent>
       </div>
     </IonSplitPane>
   );
diff --git a/static/usage/v6/split-pane/basic/vue.md b/static/usage/v6/split-pane/basic/vue.md
index b514acbcf6e..81f9dbd9a6b 100644
--- a/static/usage/v6/split-pane/basic/vue.md
+++ b/static/usage/v6/split-pane/basic/vue.md
@@ -7,20 +7,16 @@
           <ion-title>Menu</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content class="ion-padding">
-        Menu Content
-      </ion-content>
+      <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>
+      <ion-content class="ion-padding"> Main View Content </ion-content>
     </div>
   </ion-split-pane>
 </template>
@@ -30,7 +26,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar  },
+    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
   });
 </script>
 ```
diff --git a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md
index 4772826c933..029f5d3ee56 100644
--- a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md
@@ -6,9 +6,7 @@
         <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-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">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <ion-content class="ion-padding"> Main View Content </ion-content>
   </div>
 </ion-split-pane>
 ```
diff --git a/static/usage/v6/split-pane/theming/css-properties/demo.html b/static/usage/v6/split-pane/theming/css-properties/demo.html
index 83353796a32..1ca55348094 100644
--- a/static/usage/v6/split-pane/theming/css-properties/demo.html
+++ b/static/usage/v6/split-pane/theming/css-properties/demo.html
@@ -1,50 +1,44 @@
 <!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;
 
-<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>
 
-      --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>
 
-<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
+        <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/v6/split-pane/theming/css-properties/javascript.md b/static/usage/v6/split-pane/theming/css-properties/javascript.md
index 943993aa380..37bd7b9e7f1 100644
--- a/static/usage/v6/split-pane/theming/css-properties/javascript.md
+++ b/static/usage/v6/split-pane/theming/css-properties/javascript.md
@@ -6,9 +6,7 @@
         <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-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">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <ion-content class="ion-padding"> Main View Content </ion-content>
   </div>
 </ion-split-pane>
 
@@ -27,7 +23,7 @@
   ion-split-pane {
     --side-width: 350px;
     --side-max-width: 350px;
-  
+
     --border: 1px dashed #b3baff;
   }
 </style>
diff --git a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md
index 7456a34359d..1d4ad6a2e19 100644
--- a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md
@@ -13,20 +13,16 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Menu Content is 350px wide and has a blue dashed border
-        </IonContent>
+        <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>
+        <IonContent className="ion-padding">Main View Content</IonContent>
       </div>
     </IonSplitPane>
   );
diff --git a/static/usage/v6/split-pane/theming/css-properties/vue.md b/static/usage/v6/split-pane/theming/css-properties/vue.md
index cc891eaeda1..f0abcf95800 100644
--- a/static/usage/v6/split-pane/theming/css-properties/vue.md
+++ b/static/usage/v6/split-pane/theming/css-properties/vue.md
@@ -7,20 +7,16 @@
           <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-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>
+      <ion-content class="ion-padding"> Main View Content </ion-content>
     </div>
   </ion-split-pane>
 </template>
@@ -30,7 +26,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar  },
+    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
   });
 </script>
 
@@ -38,7 +34,7 @@
   ion-split-pane {
     --side-width: 350px;
     --side-max-width: 350px;
-  
+
     --border: 1px dashed #b3baff;
   }
 </style>
diff --git a/static/usage/v6/tabs/router/demo.html b/static/usage/v6/tabs/router/demo.html
index 335bdccc86f..f7f5a4ad1a2 100644
--- a/static/usage/v6/tabs/router/demo.html
+++ b/static/usage/v6/tabs/router/demo.html
@@ -1,125 +1,114 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tabs</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+    <style>
+      .example-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    </style>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Tabs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
-  <style>
-    .example-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-tabs>
+        <ion-tab tab="home">
+          <ion-nav id="home-nav"></ion-nav>
+          <div id="home-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Listen now</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Listen now content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="radio">
+          <ion-nav id="radio-nav"></ion-nav>
+          <div id="radio-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Radio</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Radio content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="library">
+          <ion-nav id="library-nav"></ion-nav>
+          <div id="library-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Library</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Library content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="search">
+          <ion-nav id="search-nav"></ion-nav>
+          <div id="search-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Search</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Search content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="home">
+            <ion-icon name="play-circle"></ion-icon>
+            Listen Now
+          </ion-tab-button>
+          <ion-tab-button tab="radio">
+            <ion-icon name="radio"></ion-icon>
+            Radio
+          </ion-tab-button>
+          <ion-tab-button tab="library">
+            <ion-icon name="library"></ion-icon>
+            Library
+          </ion-tab-button>
+          <ion-tab-button tab="search">
+            <ion-icon name="search"></ion-icon>
+            Search
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-app>
+    <script>
+      const homeNav = document.querySelector('#home-nav');
+      const homePage = document.querySelector('#home-page');
+      homeNav.root = homePage;
 
-<body>
-  <ion-app>
-    <ion-tabs>
-      <ion-tab tab="home">
-        <ion-nav id="home-nav"></ion-nav>
-        <div id="home-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Listen now</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Listen now content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab tab="radio">
-        <ion-nav id="radio-nav"></ion-nav>
-        <div id="radio-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Radio</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Radio content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab tab="library">
-        <ion-nav id="library-nav"></ion-nav>
-        <div id="library-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Library</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Library content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab tab="search">
-        <ion-nav id="search-nav"></ion-nav>
-        <div id="search-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Search</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Search content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="home">
-          <ion-icon name="play-circle"></ion-icon>
-          Listen Now
-        </ion-tab-button>
-        <ion-tab-button tab="radio">
-          <ion-icon name="radio"></ion-icon>
-          Radio
-        </ion-tab-button>
-        <ion-tab-button tab="library">
-          <ion-icon name="library"></ion-icon>
-          Library
-        </ion-tab-button>
-        <ion-tab-button tab="search">
-          <ion-icon name="search"></ion-icon>
-          Search
-        </ion-tab-button>
-      </ion-tab-bar>
-    </ion-tabs>
+      const radioNav = document.querySelector('#radio-nav');
+      const radioPage = document.querySelector('#radio-page');
+      radioNav.root = radioPage;
 
-  </ion-app>
-  <script>
-    const homeNav = document.querySelector('#home-nav');
-    const homePage = document.querySelector('#home-page');
-    homeNav.root = homePage;
-
-    const radioNav = document.querySelector('#radio-nav');
-    const radioPage = document.querySelector('#radio-page');
-    radioNav.root = radioPage;
-
-    const libraryNav = document.querySelector('#library-nav');
-    const libraryPage = document.querySelector('#library-page');
-    libraryNav.root = libraryPage;
-
-    const searchNav = document.querySelector('#search-nav');
-    const searchPage = document.querySelector('#search-page');
-    searchNav.root = searchPage;
-  </script>
-</body>
+      const libraryNav = document.querySelector('#library-nav');
+      const libraryPage = document.querySelector('#library-page');
+      libraryNav.root = libraryPage;
 
+      const searchNav = document.querySelector('#search-nav');
+      const searchPage = document.querySelector('#search-page');
+      searchNav.root = searchPage;
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v6/text/basic/angular.md b/static/usage/v6/text/basic/angular.md
index fb2f6064fba..e63da3cacf9 100644
--- a/static/usage/v6/text/basic/angular.md
+++ b/static/usage/v6/text/basic/angular.md
@@ -13,9 +13,9 @@
 
 <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>
+  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/v6/text/basic/demo.html b/static/usage/v6/text/basic/demo.html
index 7dda6c901cb..18f08b30027 100644
--- a/static/usage/v6/text/basic/demo.html
+++ b/static/usage/v6/text/basic/demo.html
@@ -1,61 +1,59 @@
 <!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>
 
-<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>
+          <ion-text color="secondary">
+            <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+          </ion-text>
 
-        <p>
-          <ion-text color="warning">
-            <ion-icon name="warning"></ion-icon>
+          <ion-text color="tertiary">
+            <h3>H3: The quick brown fox jumps over the lazy dog</h3>
           </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
+          <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/v6/text/basic/javascript.md b/static/usage/v6/text/basic/javascript.md
index fb2f6064fba..e63da3cacf9 100644
--- a/static/usage/v6/text/basic/javascript.md
+++ b/static/usage/v6/text/basic/javascript.md
@@ -13,9 +13,9 @@
 
 <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>
+  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/v6/text/basic/react.md b/static/usage/v6/text/basic/react.md
index dac54e84471..da8882e3bf5 100644
--- a/static/usage/v6/text/basic/react.md
+++ b/static/usage/v6/text/basic/react.md
@@ -19,11 +19,14 @@ function Example() {
       </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>
+        <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>
     </>
   );
diff --git a/static/usage/v6/text/basic/vue.md b/static/usage/v6/text/basic/vue.md
index 742167bf9f1..b34cd3d437a 100644
--- a/static/usage/v6/text/basic/vue.md
+++ b/static/usage/v6/text/basic/vue.md
@@ -14,10 +14,10 @@
 
   <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>
+    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>
 
diff --git a/static/usage/v6/textarea/autogrow/angular.md b/static/usage/v6/textarea/autogrow/angular.md
index 5ff7394eec0..03de94359b6 100644
--- a/static/usage/v6/textarea/autogrow/angular.md
+++ b/static/usage/v6/textarea/autogrow/angular.md
@@ -1,7 +1,10 @@
 ```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
+    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/v6/textarea/autogrow/demo.html b/static/usage/v6/textarea/autogrow/demo.html
index 07434619b22..c46003317cd 100644
--- a/static/usage/v6/textarea/autogrow/demo.html
+++ b/static/usage/v6/textarea/autogrow/demo.html
@@ -1,38 +1,39 @@
 <!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" />
 
-<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;
+      }
 
-  <style>
-    .container {
-      padding: 0 40px;
-    }
+      ion-item {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-    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
+  <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>
diff --git a/static/usage/v6/textarea/autogrow/javascript.md b/static/usage/v6/textarea/autogrow/javascript.md
index bea62987f5e..4c2e15028fd 100644
--- a/static/usage/v6/textarea/autogrow/javascript.md
+++ b/static/usage/v6/textarea/autogrow/javascript.md
@@ -1,7 +1,10 @@
 ```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
+    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/v6/textarea/autogrow/vue.md b/static/usage/v6/textarea/autogrow/vue.md
index 824ada24909..693814464e8 100644
--- a/static/usage/v6/textarea/autogrow/vue.md
+++ b/static/usage/v6/textarea/autogrow/vue.md
@@ -1,8 +1,11 @@
 ```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
+      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>
diff --git a/static/usage/v6/textarea/basic/demo.html b/static/usage/v6/textarea/basic/demo.html
index 54d2bee2efb..d907b75af9d 100644
--- a/static/usage/v6/textarea/basic/demo.html
+++ b/static/usage/v6/textarea/basic/demo.html
@@ -1,43 +1,41 @@
 <!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" />
 
-<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>
 
-  <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
+  <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>
diff --git a/static/usage/v6/textarea/clear-on-edit/demo.html b/static/usage/v6/textarea/clear-on-edit/demo.html
index 253bc7a2bc9..f4d6b0a0fb9 100644
--- a/static/usage/v6/textarea/clear-on-edit/demo.html
+++ b/static/usage/v6/textarea/clear-on-edit/demo.html
@@ -1,31 +1,29 @@
 <!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" />
 
-<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>
 
-  <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
+  <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>
diff --git a/static/usage/v6/textarea/theming/demo.html b/static/usage/v6/textarea/theming/demo.html
index 556000b9591..9b5e49da5fa 100644
--- a/static/usage/v6/textarea/theming/demo.html
+++ b/static/usage/v6/textarea/theming/demo.html
@@ -1,38 +1,36 @@
 <!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;
+      }
 
-<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>
 
-    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
+  <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/v6/thumbnail/basic/demo.html b/static/usage/v6/thumbnail/basic/demo.html
index e3aabdff4c2..b5c546b048b 100644
--- a/static/usage/v6/thumbnail/basic/demo.html
+++ b/static/usage/v6/thumbnail/basic/demo.html
@@ -1,27 +1,24 @@
 <!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>
 
-<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
+  <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/v6/thumbnail/item/demo.html b/static/usage/v6/thumbnail/item/demo.html
index 3e8c739fd73..5b23bccdf46 100644
--- a/static/usage/v6/thumbnail/item/demo.html
+++ b/static/usage/v6/thumbnail/item/demo.html
@@ -1,30 +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>
 
-<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
+  <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/v6/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md
index 605855deb77..74742dfe9f0 100644
--- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md
+++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md
@@ -1,4 +1,3 @@
-
 ```css
 ion-thumbnail {
   --size: 140px;
diff --git a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md
index 8ef97cae761..119cfb8ee9c 100644
--- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md
@@ -1,4 +1,3 @@
-
 ```html
 <ion-thumbnail>
   <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
diff --git a/static/usage/v6/thumbnail/theming/css-properties/demo.html b/static/usage/v6/thumbnail/theming/css-properties/demo.html
index 1abdceda339..0378c8c20b4 100644
--- a/static/usage/v6/thumbnail/theming/css-properties/demo.html
+++ b/static/usage/v6/thumbnail/theming/css-properties/demo.html
@@ -1,33 +1,31 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md
index 37f4796d763..1d0f352383f 100644
--- a/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonThumbnail } from '@ionic/react';
diff --git a/static/usage/v6/title/basic/demo.html b/static/usage/v6/title/basic/demo.html
index 13b1b317ce0..4999c7d9988 100644
--- a/static/usage/v6/title/basic/demo.html
+++ b/static/usage/v6/title/basic/demo.html
@@ -1,25 +1,22 @@
 <!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>
 
-<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
+  <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/v6/title/collapsible-large-title/basic/demo.html b/static/usage/v6/title/collapsible-large-title/basic/demo.html
index e67c7bd3a33..9cc86ca76e6 100644
--- a/static/usage/v6/title/collapsible-large-title/basic/demo.html
+++ b/static/usage/v6/title/collapsible-large-title/basic/demo.html
@@ -1,59 +1,54 @@
 <!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>
 
-<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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
+          <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>
+        <div class="ion-padding">Scroll the list to see the title collapse.</div>
 
-</html>
\ No newline at end of file
+        <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/v6/title/collapsible-large-title/buttons/demo.html b/static/usage/v6/title/collapsible-large-title/buttons/demo.html
index ecf88cf5305..dda08d3edd2 100644
--- a/static/usage/v6/title/collapsible-large-title/buttons/demo.html
+++ b/static/usage/v6/title/collapsible-large-title/buttons/demo.html
@@ -1,65 +1,60 @@
 <!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>
 
-<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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
+          <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>
+        <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>
 
-</html>
\ No newline at end of file
+        <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/v6/title/theming/css-properties/demo.html b/static/usage/v6/title/theming/css-properties/demo.html
index 202131c46ac..f052d4d78be 100644
--- a/static/usage/v6/title/theming/css-properties/demo.html
+++ b/static/usage/v6/title/theming/css-properties/demo.html
@@ -1,69 +1,67 @@
 <!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>
-  <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;
+      }
 
-  <style>
-    ion-title.title-large {
-      color: #C897D8;
-      font-size: 30px;
-    }
+      ion-title {
+        --color: #000;
+      }
 
-    ion-title {
-      --color: #000;
-    }
+      ion-toolbar {
+        --background: #c897d8;
+      }
+    </style>
+  </head>
 
-    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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
+          <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
+        <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/v6/toast/buttons/angular/example_component_html.md b/static/usage/v6/toast/buttons/angular/example_component_html.md
index 5d457cdbf2f..4ce5b83bc18 100644
--- a/static/usage/v6/toast/buttons/angular/example_component_html.md
+++ b/static/usage/v6/toast/buttons/angular/example_component_html.md
@@ -2,4 +2,4 @@
 <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/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md
index 54dc88ac35c..faf1f33ed5b 100644
--- a/static/usage/v6/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md
@@ -20,14 +20,18 @@ export class ExampleComponent {
         {
           text: 'More Info',
           role: 'info',
-          handler: () => { this.handlerMessage = 'More Info clicked'; }
+          handler: () => {
+            this.handlerMessage = 'More Info clicked';
+          },
         },
         {
           text: 'Dismiss',
           role: 'cancel',
-          handler: () => { this.handlerMessage = 'Dismiss clicked'; }
-        }
-      ]
+          handler: () => {
+            this.handlerMessage = 'Dismiss clicked';
+          },
+        },
+      ],
     });
 
     await toast.present();
@@ -36,4 +40,4 @@ export class ExampleComponent {
     this.roleMessage = `Dismissed with role: ${role}`;
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/buttons/demo.html b/static/usage/v6/toast/buttons/demo.html
index 261a6e53cc7..92be4be89de 100644
--- a/static/usage/v6/toast/buttons/demo.html
+++ b/static/usage/v6/toast/buttons/demo.html
@@ -1,75 +1,77 @@
 <!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>
-  <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>
-    .container {
-      flex-direction: column;
-    }
+      .container p {
+        margin-bottom: 0;
+      }
+    </style>
+  </head>
 
-    .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>
 
-<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 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');
 
-  <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';
+              },
+            },
+          ],
+        });
 
-    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();
 
-      await toast.present();
-
-      const { role } = await toast.onDidDismiss();
-      roleOutput.innerText = `Dismissed with role: ${role}`;
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+        const { role } = await toast.onDidDismiss();
+        roleOutput.innerText = `Dismissed with role: ${role}`;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/toast/buttons/javascript.md b/static/usage/v6/toast/buttons/javascript.md
index c5cea896bb3..521bb9a2aec 100644
--- a/static/usage/v6/toast/buttons/javascript.md
+++ b/static/usage/v6/toast/buttons/javascript.md
@@ -15,14 +15,18 @@
         {
           text: 'More Info',
           role: 'info',
-          handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+          handler: () => {
+            handlerOutput.innerText = 'More Info clicked';
+          },
         },
         {
           text: 'Dismiss',
           role: 'cancel',
-          handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
-        }
-      ]
+          handler: () => {
+            handlerOutput.innerText = 'Dismiss clicked';
+          },
+        },
+      ],
     });
 
     await toast.present();
diff --git a/static/usage/v6/toast/buttons/react.md b/static/usage/v6/toast/buttons/react.md
index ac08a9b543b..7f329e63ec7 100644
--- a/static/usage/v6/toast/buttons/react.md
+++ b/static/usage/v6/toast/buttons/react.md
@@ -19,15 +19,19 @@ function Example() {
               {
                 text: 'More Info',
                 role: 'info',
-                handler: () => { setHandlerMessage('More Info clicked'); }
+                handler: () => {
+                  setHandlerMessage('More Info clicked');
+                },
               },
               {
                 text: 'Dismiss',
                 role: 'cancel',
-                handler: () => { setHandlerMessage('Dismiss clicked'); }
-              }
-            ]
-          })
+                handler: () => {
+                  setHandlerMessage('Dismiss clicked');
+                },
+              },
+            ],
+          });
         }}
       >
         Click Me
diff --git a/static/usage/v6/toast/buttons/vue.md b/static/usage/v6/toast/buttons/vue.md
index ec7da81c54c..762aff51aa2 100644
--- a/static/usage/v6/toast/buttons/vue.md
+++ b/static/usage/v6/toast/buttons/vue.md
@@ -25,14 +25,18 @@
             {
               text: 'More Info',
               role: 'info',
-              handler: () => { this.handlerMessage = 'More Info clicked'; }
+              handler: () => {
+                this.handlerMessage = 'More Info clicked';
+              },
             },
             {
               text: 'Dismiss',
               role: 'cancel',
-              handler: () => { this.handlerMessage = 'Dismiss clicked'; }
-            }
-          ]
+              handler: () => {
+                this.handlerMessage = 'Dismiss clicked';
+              },
+            },
+          ],
         });
 
         await toast.present();
diff --git a/static/usage/v6/toast/icon/angular/example_component_html.md b/static/usage/v6/toast/icon/angular/example_component_html.md
index 976194efc1e..91e6579dfa8 100644
--- a/static/usage/v6/toast/icon/angular/example_component_html.md
+++ b/static/usage/v6/toast/icon/angular/example_component_html.md
@@ -1,3 +1,3 @@
 ```html
 <ion-button (click)="presentToast()">Click Me</ion-button>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md
index addffa2daf9..d72053bd950 100644
--- a/static/usage/v6/toast/icon/angular/example_component_ts.md
+++ b/static/usage/v6/toast/icon/angular/example_component_ts.md
@@ -13,10 +13,10 @@ export class ExampleComponent {
     const toast = await this.toastController.create({
       message: 'Hello World!',
       duration: 1500,
-      icon: 'globe'
+      icon: 'globe',
     });
 
     await toast.present();
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/icon/demo.html b/static/usage/v6/toast/icon/demo.html
index efecadbf937..4e948a33fb5 100644
--- a/static/usage/v6/toast/icon/demo.html
+++ b/static/usage/v6/toast/icon/demo.html
@@ -1,46 +1,44 @@
 <!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>
 
-<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>
 
-<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 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',
+        });
 
-  <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
+        await toast.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript.md
index b63e8550ab3..685c496cc26 100644
--- a/static/usage/v6/toast/icon/javascript.md
+++ b/static/usage/v6/toast/icon/javascript.md
@@ -6,9 +6,9 @@
     const toast = await this.toastController.create({
       message: 'Hello World!',
       duration: 1500,
-      icon: 'globe'
+      icon: 'globe',
     });
-      
+
     await toast.present();
   }
 </script>
diff --git a/static/usage/v6/toast/icon/react.md b/static/usage/v6/toast/icon/react.md
index 25d758c16b6..8ccf5670d69 100644
--- a/static/usage/v6/toast/icon/react.md
+++ b/static/usage/v6/toast/icon/react.md
@@ -12,8 +12,8 @@ function Example() {
         presentToast({
           message: 'Hello World!',
           duration: 1500,
-          icon: globe
-        })
+          icon: globe,
+        });
       }}
     >
       Click Me
diff --git a/static/usage/v6/toast/icon/vue.md b/static/usage/v6/toast/icon/vue.md
index d3a123f598b..4cbe7510e4b 100644
--- a/static/usage/v6/toast/icon/vue.md
+++ b/static/usage/v6/toast/icon/vue.md
@@ -14,7 +14,7 @@
         const toast = await toastController.create({
           message: 'Hello World!',
           duration: 1500,
-          icon: globe
+          icon: globe,
         });
 
         await toast.present();
diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md
index 8bd086f7ba5..195a1841204 100644
--- a/static/usage/v6/toast/layout/angular/example_component_html.md
+++ b/static/usage/v6/toast/layout/angular/example_component_html.md
@@ -1,4 +1,4 @@
 ```html
 <ion-button (click)="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
 <ion-button (click)="presentStackedToast()">Click Stacked Layout Toast</ion-button>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
index 6e8c63a9b58..01636b04a97 100644
--- a/static/usage/v6/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -8,34 +8,29 @@ import type { ToastOptions } from '@ionic/angular';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-
   constructor(private toastController: ToastController) {}
-  
+
   async presentToast(opts: ToastOptions) {
     const toast = await this.toastController.create(opts);
-  
+
     await toast.present();
   }
-  
+
   async presentBaselineToast() {
     await this.presentToast({
       duration: 3000,
-      message: "This is a toast with a long message and a button that appears on the same line.",
-      buttons: [
-        { text: 'Action With Long Text'}
-      ]
+      message: 'This is a toast with a long message and a button that appears on the same line.',
+      buttons: [{ text: 'Action With Long Text' }],
     });
   }
-  
+
   async presentStackedToast() {
     await this.presentToast({
       duration: 3000,
-      message: "This is a toast with a long message and a button that appears on the next line.",
-      buttons: [
-        { text: 'Action With Long Text'}
-      ],
-      layout: "stacked"
+      message: 'This is a toast with a long message and a button that appears on the next line.',
+      buttons: [{ text: 'Action With Long Text' }],
+      layout: 'stacked',
     });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
index 79942ae2484..6a9c9deeabb 100644
--- a/static/usage/v6/toast/layout/demo.html
+++ b/static/usage/v6/toast/layout/demo.html
@@ -1,62 +1,56 @@
 <!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 class="ion-padding">
-      <ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
-      <ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
-    </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(opts) {
-      const toast = await toastController.create(opts);
-
-      await toast.present();
-    }
-
-    async function presentBaselineToast() {
-      await presentToast({
-        duration: 3000,
-        message: "This is a toast with a long message and a button that appears on the same line.",
-        buttons: [
-          { text: 'Action With Long Text'}
-        ]
-      });
-    }
-
-    async function presentStackedToast() {
-      await presentToast({
-        duration: 3000,
-        message: "This is a toast with a long message and a button that appears on the next line.",
-        buttons: [
-          { text: 'Action With Long Text'}
-        ],
-        layout: "stacked"
-      });
-    }
-  </script>
-</body>
-
+  <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 class="ion-padding">
+        <ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+        <ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+      </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(opts) {
+        const toast = await toastController.create(opts);
+
+        await toast.present();
+      }
+
+      async function presentBaselineToast() {
+        await presentToast({
+          duration: 3000,
+          message: 'This is a toast with a long message and a button that appears on the same line.',
+          buttons: [{ text: 'Action With Long Text' }],
+        });
+      }
+
+      async function presentStackedToast() {
+        await presentToast({
+          duration: 3000,
+          message: 'This is a toast with a long message and a button that appears on the next line.',
+          buttons: [{ text: 'Action With Long Text' }],
+          layout: 'stacked',
+        });
+      }
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md
index 2350799f7e1..5d9a27392f9 100644
--- a/static/usage/v6/toast/layout/javascript.md
+++ b/static/usage/v6/toast/layout/javascript.md
@@ -5,28 +5,24 @@
 <script>
   async function presentToast(opts) {
     const toast = await toastController.create(opts);
-  
+
     await toast.present();
   }
-  
+
   async function presentBaselineToast() {
     await presentToast({
       duration: 3000,
-      message: "This is a toast with a long message and a button that appears on the same line.",
-      buttons: [
-        { text: 'Action With Long Text'}
-      ]
+      message: 'This is a toast with a long message and a button that appears on the same line.',
+      buttons: [{ text: 'Action With Long Text' }],
     });
   }
-  
+
   async function presentStackedToast() {
     await presentToast({
       duration: 3000,
-      message: "This is a toast with a long message and a button that appears on the next line.",
-      buttons: [
-        { text: 'Action With Long Text'}
-      ],
-      layout: "stacked"
+      message: 'This is a toast with a long message and a button that appears on the next line.',
+      buttons: [{ text: 'Action With Long Text' }],
+      layout: 'stacked',
     });
   }
 </script>
diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md
index 68813f1eb1f..30f0b95da5a 100644
--- a/static/usage/v6/toast/layout/react.md
+++ b/static/usage/v6/toast/layout/react.md
@@ -11,11 +11,9 @@ function Example() {
         onClick={() => {
           presentToast({
             duration: 3000,
-            message: "This is a toast with a long message and a button that appears on the next line.",
-            buttons: [
-              { text: 'Action With Long Text'}
-            ]
-          })
+            message: 'This is a toast with a long message and a button that appears on the next line.',
+            buttons: [{ text: 'Action With Long Text' }],
+          });
         }}
       >
         Open Baseline Layout Toast
@@ -24,12 +22,10 @@ function Example() {
         onClick={() => {
           presentToast({
             duration: 3000,
-            message: "This is a toast with a long message and a button that appears on the next line.",
-            buttons: [
-              { text: 'Action With Long Text'}
-            ],
-            layout: "stacked"
-          })
+            message: 'This is a toast with a long message and a button that appears on the next line.',
+            buttons: [{ text: 'Action With Long Text' }],
+            layout: 'stacked',
+          });
         }}
       >
         Open Stacked Layout Toast
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
index 5b884ea7caf..ff3865c3b9c 100644
--- a/static/usage/v6/toast/layout/vue.md
+++ b/static/usage/v6/toast/layout/vue.md
@@ -14,33 +14,29 @@
     setup() {
       const presentToast = async (opts: ToastOptions) => {
         const toast = await toastController.create(opts);
-      
+
         await toast.present();
-      }
-      
+      };
+
       const presentBaselineToast = async () => {
         await presentToast({
           duration: 3000,
-          message: "This is a toast with a long message and a button that appears on the same line.",
-          buttons: [
-            { text: 'Action With Long Text'}
-          ]
+          message: 'This is a toast with a long message and a button that appears on the same line.',
+          buttons: [{ text: 'Action With Long Text' }],
         });
-      }
-      
+      };
+
       const presentStackedToast = async () => {
         await presentToast({
           duration: 3000,
-          message: "This is a toast with a long message and a button that appears on the next line.",
-          buttons: [
-            { text: 'Action With Long Text'}
-          ],
-          layout: "stacked"
+          message: 'This is a toast with a long message and a button that appears on the next line.',
+          buttons: [{ text: 'Action With Long Text' }],
+          layout: 'stacked',
         });
-      }
-      
-      return { presentBaselineToast, presentStackedToast }
-    }
+      };
+
+      return { presentBaselineToast, presentStackedToast };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md
index 962fcd0e355..2ed1eea0254 100644
--- a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md
+++ b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md
@@ -2,4 +2,4 @@
 <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/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
index c772728c3c1..db133a99f1e 100644
--- a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
@@ -13,10 +13,10 @@ export class ExampleComponent {
     const toast = await this.toastController.create({
       message: 'Hello World!',
       duration: 1500,
-      position: position
+      position: position,
     });
 
     await toast.present();
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/presenting/controller/demo.html b/static/usage/v6/toast/presenting/controller/demo.html
index 24cc1fcb8d0..dee337f7eb2 100644
--- a/static/usage/v6/toast/presenting/controller/demo.html
+++ b/static/usage/v6/toast/presenting/controller/demo.html
@@ -1,54 +1,52 @@
 <!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>
-  <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>
 
-  <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>
 
-<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 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,
+        });
 
-  <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
+        await toast.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/toast/presenting/controller/javascript.md b/static/usage/v6/toast/presenting/controller/javascript.md
index 5260ba8d1a1..52c089331fa 100644
--- a/static/usage/v6/toast/presenting/controller/javascript.md
+++ b/static/usage/v6/toast/presenting/controller/javascript.md
@@ -8,7 +8,7 @@
     const toast = await this.toastController.create({
       message: 'Hello World!',
       duration: 1500,
-      position: position
+      position: position,
     });
 
     await toast.present();
diff --git a/static/usage/v6/toast/presenting/controller/react.md b/static/usage/v6/toast/presenting/controller/react.md
index 1dd38b3cd48..b4e8d0913ca 100644
--- a/static/usage/v6/toast/presenting/controller/react.md
+++ b/static/usage/v6/toast/presenting/controller/react.md
@@ -9,15 +9,21 @@ function Example() {
     present({
       message: 'Hello World!',
       duration: 1500,
-      position: position
+      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>
+      <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>
     </>
   );
 }
diff --git a/static/usage/v6/toast/presenting/controller/vue.md b/static/usage/v6/toast/presenting/controller/vue.md
index ac520d0e7b9..7f2ade91031 100644
--- a/static/usage/v6/toast/presenting/controller/vue.md
+++ b/static/usage/v6/toast/presenting/controller/vue.md
@@ -15,7 +15,7 @@
         const toast = await toastController.create({
           message: 'Hello World!',
           duration: 1500,
-          position: position
+          position: position,
         });
 
         await toast.present();
diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md
index 62c8151b0f4..7f490b9bacc 100644
--- a/static/usage/v6/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v6/toast/theming/angular/example_component_ts.md
@@ -17,8 +17,8 @@ export class ExampleComponent {
       buttons: [
         {
           text: 'Dismiss',
-          role: 'cancel'
-        }
+          role: 'cancel',
+        },
       ],
     });
 
diff --git a/static/usage/v6/toast/theming/angular/global_css.md b/static/usage/v6/toast/theming/angular/global_css.md
index 4d261622074..70ef6f5cfd6 100644
--- a/static/usage/v6/toast/theming/angular/global_css.md
+++ b/static/usage/v6/toast/theming/angular/global_css.md
@@ -1,10 +1,10 @@
 ```css
 ion-toast.custom-toast {
-  --background: #F4F4FA;
+  --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;
 }
@@ -14,4 +14,4 @@ ion-toast.custom-toast::part(button) {
   color: #030207;
   font-size: 15px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/theming/demo.html b/static/usage/v6/toast/theming/demo.html
index cdbffb5541c..91107733a35 100644
--- a/static/usage/v6/toast/theming/demo.html
+++ b/static/usage/v6/toast/theming/demo.html
@@ -1,70 +1,68 @@
 <!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>
-  <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;
+      }
 
-  <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(message) {
-      font-style: italic;
-    }
+      ion-toast.custom-toast::part(button) {
+        border-left: 1px solid #d2d2d2;
+        color: #030207;
+        font-size: 15px;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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',
+            },
+          ],
+        });
 
-  <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
+        await toast.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v6/toast/theming/javascript.md b/static/usage/v6/toast/theming/javascript.md
index b540eccaaf7..06a4f5d7b09 100644
--- a/static/usage/v6/toast/theming/javascript.md
+++ b/static/usage/v6/toast/theming/javascript.md
@@ -10,8 +10,8 @@
       buttons: [
         {
           text: 'Dismiss',
-          role: 'cancel'
-        }
+          role: 'cancel',
+        },
       ],
     });
 
@@ -21,11 +21,11 @@
 
 <style>
   ion-toast.custom-toast {
-    --background: #F4F4FA;
+    --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;
   }
diff --git a/static/usage/v6/toast/theming/react/main_css.md b/static/usage/v6/toast/theming/react/main_css.md
index 4d261622074..70ef6f5cfd6 100644
--- a/static/usage/v6/toast/theming/react/main_css.md
+++ b/static/usage/v6/toast/theming/react/main_css.md
@@ -1,10 +1,10 @@
 ```css
 ion-toast.custom-toast {
-  --background: #F4F4FA;
+  --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;
 }
@@ -14,4 +14,4 @@ ion-toast.custom-toast::part(button) {
   color: #030207;
   font-size: 15px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toast/theming/react/main_tsx.md b/static/usage/v6/toast/theming/react/main_tsx.md
index fe88e64e8c7..dcb0efd9066 100644
--- a/static/usage/v6/toast/theming/react/main_tsx.md
+++ b/static/usage/v6/toast/theming/react/main_tsx.md
@@ -17,8 +17,8 @@ function Example() {
           buttons: [
             {
               text: 'Dismiss',
-              role: 'cancel'
-            }
+              role: 'cancel',
+            },
           ],
         })
       }
diff --git a/static/usage/v6/toast/theming/vue.md b/static/usage/v6/toast/theming/vue.md
index 99bcbb7cf18..8a51a153dcc 100644
--- a/static/usage/v6/toast/theming/vue.md
+++ b/static/usage/v6/toast/theming/vue.md
@@ -17,8 +17,8 @@
           buttons: [
             {
               text: 'Dismiss',
-              role: 'cancel'
-            }
+              role: 'cancel',
+            },
           ],
         });
 
@@ -30,11 +30,11 @@
 
 <style>
   ion-toast.custom-toast {
-    --background: #F4F4FA;
+    --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;
   }
diff --git a/static/usage/v6/toggle/basic/demo.html b/static/usage/v6/toggle/basic/demo.html
index 5e45931c3b4..ddbaf236ce1 100644
--- a/static/usage/v6/toggle/basic/demo.html
+++ b/static/usage/v6/toggle/basic/demo.html
@@ -1,47 +1,45 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/toggle/on-off/demo.html b/static/usage/v6/toggle/on-off/demo.html
index 7622a018101..fbcb571db11 100644
--- a/static/usage/v6/toggle/on-off/demo.html
+++ b/static/usage/v6/toggle/on-off/demo.html
@@ -1,25 +1,22 @@
 <!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>
 
-<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
+  <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/v6/toggle/on-off/react.md b/static/usage/v6/toggle/on-off/react.md
index 6d24a2c2704..8614889d104 100644
--- a/static/usage/v6/toggle/on-off/react.md
+++ b/static/usage/v6/toggle/on-off/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonToggle } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonToggle enableOnOffLabels={true}></IonToggle>
-  );
+  return <IonToggle enableOnOffLabels={true}></IonToggle>;
 }
 export default Example;
 ```
diff --git a/static/usage/v6/toggle/theming/colors/demo.html b/static/usage/v6/toggle/theming/colors/demo.html
index e2e115e84bf..93206a1b375 100644
--- a/static/usage/v6/toggle/theming/colors/demo.html
+++ b/static/usage/v6/toggle/theming/colors/demo.html
@@ -1,33 +1,30 @@
 <!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>
 
-<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
+  <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/v6/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md
index b66cfc51480..11acb83f04c 100644
--- a/static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md
@@ -1,4 +1,3 @@
 ```html
-<ion-toggle></ion-toggle>
-<ion-toggle [checked]="true"></ion-toggle>
+<ion-toggle></ion-toggle> <ion-toggle [checked]="true"></ion-toggle>
 ```
diff --git a/static/usage/v6/toggle/theming/css-properties/demo.html b/static/usage/v6/toggle/theming/css-properties/demo.html
index b357ff59b4a..7adc3c3ba7f 100644
--- a/static/usage/v6/toggle/theming/css-properties/demo.html
+++ b/static/usage/v6/toggle/theming/css-properties/demo.html
@@ -1,52 +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>
-    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
+  <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/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md
index b66cfc51480..11acb83f04c 100644
--- a/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md
@@ -1,4 +1,3 @@
 ```html
-<ion-toggle></ion-toggle>
-<ion-toggle [checked]="true"></ion-toggle>
+<ion-toggle></ion-toggle> <ion-toggle [checked]="true"></ion-toggle>
 ```
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/demo.html b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html
index 5647327547a..f895b6cb9c4 100644
--- a/static/usage/v6/toggle/theming/css-shadow-parts/demo.html
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html
@@ -1,59 +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>
-    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
+  <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/v6/toolbar/basic/demo.html b/static/usage/v6/toolbar/basic/demo.html
index bc598f63d22..8cf6d25b75a 100644
--- a/static/usage/v6/toolbar/basic/demo.html
+++ b/static/usage/v6/toolbar/basic/demo.html
@@ -1,31 +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>
 
-<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" />
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Header Toolbar</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-</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
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer Toolbar</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v6/toolbar/buttons/angular.md b/static/usage/v6/toolbar/buttons/angular.md
index ceafe115821..18a54554a1b 100644
--- a/static/usage/v6/toolbar/buttons/angular.md
+++ b/static/usage/v6/toolbar/buttons/angular.md
@@ -1,28 +1,20 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="start">
-    <ion-button>
-      Start
-    </ion-button>
+    <ion-button> Start </ion-button>
   </ion-buttons>
   <ion-title>Start / End Buttons</ion-title>
   <ion-buttons slot="end">
-    <ion-button>
-      End
-    </ion-button>
+    <ion-button> End </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button>
-      Secondary
-    </ion-button>
+    <ion-button> Secondary </ion-button>
   </ion-buttons>
   <ion-buttons slot="primary">
-    <ion-button>
-      Primary
-    </ion-button>
+    <ion-button> Primary </ion-button>
   </ion-buttons>
   <ion-title>Primary / Secondary Buttons</ion-title>
 </ion-toolbar>
diff --git a/static/usage/v6/toolbar/buttons/demo.html b/static/usage/v6/toolbar/buttons/demo.html
index 55941b2c348..d187ed5712e 100644
--- a/static/usage/v6/toolbar/buttons/demo.html
+++ b/static/usage/v6/toolbar/buttons/demo.html
@@ -1,120 +1,110 @@
 <!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>
-  <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>
 
-  <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>
 
-<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>
-              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>
-              <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="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="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-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
+          <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/v6/toolbar/buttons/javascript.md b/static/usage/v6/toolbar/buttons/javascript.md
index ceafe115821..18a54554a1b 100644
--- a/static/usage/v6/toolbar/buttons/javascript.md
+++ b/static/usage/v6/toolbar/buttons/javascript.md
@@ -1,28 +1,20 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="start">
-    <ion-button>
-      Start
-    </ion-button>
+    <ion-button> Start </ion-button>
   </ion-buttons>
   <ion-title>Start / End Buttons</ion-title>
   <ion-buttons slot="end">
-    <ion-button>
-      End
-    </ion-button>
+    <ion-button> End </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button>
-      Secondary
-    </ion-button>
+    <ion-button> Secondary </ion-button>
   </ion-buttons>
   <ion-buttons slot="primary">
-    <ion-button>
-      Primary
-    </ion-button>
+    <ion-button> Primary </ion-button>
   </ion-buttons>
   <ion-title>Primary / Secondary Buttons</ion-title>
 </ion-toolbar>
diff --git a/static/usage/v6/toolbar/buttons/react.md b/static/usage/v6/toolbar/buttons/react.md
index ff7736981f0..a8ed785db82 100644
--- a/static/usage/v6/toolbar/buttons/react.md
+++ b/static/usage/v6/toolbar/buttons/react.md
@@ -8,28 +8,20 @@ function Example() {
     <>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonButton>
-            Start
-          </IonButton>
+          <IonButton>Start</IonButton>
         </IonButtons>
         <IonTitle>Start / End Buttons</IonTitle>
         <IonButtons slot="end">
-          <IonButton>
-            End
-          </IonButton>
+          <IonButton>End</IonButton>
         </IonButtons>
       </IonToolbar>
 
       <IonToolbar>
         <IonButtons slot="secondary">
-          <IonButton>
-            Secondary
-          </IonButton>
+          <IonButton>Secondary</IonButton>
         </IonButtons>
         <IonButtons slot="primary">
-          <IonButton>
-            Primary
-          </IonButton>
+          <IonButton>Primary</IonButton>
         </IonButtons>
         <IonTitle>Primary / Secondary Buttons</IonTitle>
       </IonToolbar>
diff --git a/static/usage/v6/toolbar/buttons/vue.md b/static/usage/v6/toolbar/buttons/vue.md
index 388760dcd9f..68091a20771 100644
--- a/static/usage/v6/toolbar/buttons/vue.md
+++ b/static/usage/v6/toolbar/buttons/vue.md
@@ -2,28 +2,20 @@
 <template>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button>
-        Start
-      </ion-button>
+      <ion-button> Start </ion-button>
     </ion-buttons>
     <ion-title>Start / End Buttons</ion-title>
     <ion-buttons slot="end">
-      <ion-button>
-        End
-      </ion-button>
+      <ion-button> End </ion-button>
     </ion-buttons>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons slot="secondary">
-      <ion-button>
-        Secondary
-      </ion-button>
+      <ion-button> Secondary </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
-      <ion-button>
-        Primary
-      </ion-button>
+      <ion-button> Primary </ion-button>
     </ion-buttons>
     <ion-title>Primary / Secondary Buttons</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v6/toolbar/progress-bars/demo.html b/static/usage/v6/toolbar/progress-bars/demo.html
index 58ddadffe72..c3607e6da3e 100644
--- a/static/usage/v6/toolbar/progress-bars/demo.html
+++ b/static/usage/v6/toolbar/progress-bars/demo.html
@@ -1,26 +1,23 @@
 <!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>
 
-<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
+  <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/v6/toolbar/searchbars/demo.html b/static/usage/v6/toolbar/searchbars/demo.html
index a75cf4e6483..23fd2b5de5f 100644
--- a/static/usage/v6/toolbar/searchbars/demo.html
+++ b/static/usage/v6/toolbar/searchbars/demo.html
@@ -1,28 +1,25 @@
 <!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>
 
-<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
+  <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/v6/toolbar/segments/demo.html b/static/usage/v6/toolbar/segments/demo.html
index 42452b90dd8..25127af9034 100644
--- a/static/usage/v6/toolbar/segments/demo.html
+++ b/static/usage/v6/toolbar/segments/demo.html
@@ -1,32 +1,29 @@
 <!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>
 
-<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">
-            <ion-label>All</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="favorites">
-            <ion-label>Favorites</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-header>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-segment value="all">
+            <ion-segment-button value="all">
+              <ion-label>All</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="favorites">
+              <ion-label>Favorites</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-header>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v6/toolbar/theming/colors/demo.html b/static/usage/v6/toolbar/theming/colors/demo.html
index f8c44dcd8e2..a9f150d69bf 100644
--- a/static/usage/v6/toolbar/theming/colors/demo.html
+++ b/static/usage/v6/toolbar/theming/colors/demo.html
@@ -1,60 +1,58 @@
 <!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>
-  <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>
 
-  <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
+  <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/v6/toolbar/theming/css-properties/demo.html b/static/usage/v6/toolbar/theming/css-properties/demo.html
index dca3fea437d..bca64c552c5 100644
--- a/static/usage/v6/toolbar/theming/css-properties/demo.html
+++ b/static/usage/v6/toolbar/theming/css-properties/demo.html
@@ -1,46 +1,44 @@
 <!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>
-  <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>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
+      ion-toolbar {
+        --background: #19422d;
+        --color: white;
 
-    ion-toolbar {
-      --background: #19422d;
-      --color: white;
+        --border-color: #f24aec;
+        --border-width: 4px 0;
+        --border-style: double;
 
-      --border-color: #f24aec;
-      --border-width: 4px 0;
-      --border-style: double;
+        --min-height: 80px;
+        --padding-top: 20px;
+        --padding-bottom: 20px;
+      }
+    </style>
+  </head>
 
-      --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
+  <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/v7/accordion/accessibility/animations/demo.html b/static/usage/v7/accordion/accessibility/animations/demo.html
index 3fdee04e4f7..f673b7d612c 100644
--- a/static/usage/v7/accordion/accessibility/animations/demo.html
+++ b/static/usage/v7/accordion/accessibility/animations/demo.html
@@ -1,49 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/accessibility/animations/javascript.md b/static/usage/v7/accordion/accessibility/animations/javascript.md
index 1500ccf60c4..f89ebdea048 100644
--- a/static/usage/v7/accordion/accessibility/animations/javascript.md
+++ b/static/usage/v7/accordion/accessibility/animations/javascript.md
@@ -1,28 +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>
+<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/basic/angular.md b/static/usage/v7/accordion/basic/angular.md
index 085d138de20..f9f7c8639a0 100644
--- a/static/usage/v7/accordion/basic/angular.md
+++ b/static/usage/v7/accordion/basic/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 6ccc994401f..43711d45154 100644
--- a/static/usage/v7/accordion/basic/demo.html
+++ b/static/usage/v7/accordion/basic/demo.html
@@ -1,49 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/basic/javascript.md b/static/usage/v7/accordion/basic/javascript.md
index 085d138de20..f9f7c8639a0 100644
--- a/static/usage/v7/accordion/basic/javascript.md
+++ b/static/usage/v7/accordion/basic/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 7c140853638..122fc747919 100644
--- a/static/usage/v7/accordion/basic/react.md
+++ b/static/usage/v7/accordion/basic/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup>
diff --git a/static/usage/v7/accordion/basic/vue.md b/static/usage/v7/accordion/basic/vue.md
index f11e704e83a..8ac8c6bbeec 100644
--- a/static/usage/v7/accordion/basic/vue.md
+++ b/static/usage/v7/accordion/basic/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      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
index 21189b83ce7..93bc6b09b7f 100644
--- 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
@@ -10,15 +10,15 @@ ion-accordion.accordion-expanded {
   margin: 16px auto;
 }
 
-ion-accordion.accordion-collapsing ion-item[slot="header"],
-ion-accordion.accordion-collapsed ion-item[slot="header"] {
+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"] {
+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
index c0da98e5ee8..3b3c86763c1 100644
--- 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
@@ -4,25 +4,19 @@
     <ion-item slot="header">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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/demo.html b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
index 8a56e9557f2..edb47cd351c 100644
--- a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
@@ -1,82 +1,74 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-accordion {
+        margin: 0 auto;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-accordion {
-      margin: 0 auto;
-    }
+      ion-accordion.accordion-expanding,
+      ion-accordion.accordion-expanded {
+        width: calc(100% - 32px);
 
-    ion-accordion.accordion-expanding,
-    ion-accordion.accordion-expanded {
-      width: calc(100% - 32px);
+        margin: 16px auto;
+      }
 
-      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-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);
+      }
 
-    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;
+      }
 
-    .container {
-      width: 300px;
-      margin: 0 auto;
-    }
+      ion-accordion-group {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/javascript.md
index 863d92d374f..5076fe510e5 100644
--- a/static/usage/v7/accordion/customization/advanced-expansion-styles/javascript.md
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <div class="ion-padding" slot="content">Third Content</div>
   </ion-accordion>
 </ion-accordion-group>
 
@@ -38,14 +32,14 @@
     margin: 16px auto;
   }
 
-  ion-accordion.accordion-collapsing ion-item[slot="header"],
-  ion-accordion.accordion-collapsed ion-item[slot="header"] {
+  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"] {
+  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);
   }
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
index 21189b83ce7..93bc6b09b7f 100644
--- 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
@@ -10,15 +10,15 @@ ion-accordion.accordion-expanded {
   margin: 16px auto;
 }
 
-ion-accordion.accordion-collapsing ion-item[slot="header"],
-ion-accordion.accordion-collapsed ion-item[slot="header"] {
+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"] {
+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/vue.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
index 738797ba44f..5e8e8da6925 100644
--- a/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
@@ -55,18 +44,18 @@
   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"] {
+
+  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"] {
+
+  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);
   }
diff --git a/static/usage/v7/accordion/customization/expansion-styles/angular.md b/static/usage/v7/accordion/customization/expansion-styles/angular.md
index 39a3f97b6be..1be81366c58 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/angular.md
+++ b/static/usage/v7/accordion/customization/expansion-styles/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 77756cc378e..ab718655e37 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/demo.html
+++ b/static/usage/v7/accordion/customization/expansion-styles/demo.html
@@ -1,49 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/customization/expansion-styles/javascript.md b/static/usage/v7/accordion/customization/expansion-styles/javascript.md
index 39a3f97b6be..1be81366c58 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/javascript.md
+++ b/static/usage/v7/accordion/customization/expansion-styles/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 1067c80acb7..d24cf600956 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/react.md
+++ b/static/usage/v7/accordion/customization/expansion-styles/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup expand="inset">
diff --git a/static/usage/v7/accordion/customization/expansion-styles/vue.md b/static/usage/v7/accordion/customization/expansion-styles/vue.md
index a6bcdcbde5e..05f22d0d2ff 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/vue.md
+++ b/static/usage/v7/accordion/customization/expansion-styles/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/v7/accordion/customization/icons/demo.html b/static/usage/v7/accordion/customization/icons/demo.html
index 38d70177e4d..9a0efd0b91b 100644
--- a/static/usage/v7/accordion/customization/icons/demo.html
+++ b/static/usage/v7/accordion/customization/icons/demo.html
@@ -1,49 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/customization/icons/javascript.md b/static/usage/v7/accordion/customization/icons/javascript.md
index 7d937e511de..7fd8a091cc8 100644
--- a/static/usage/v7/accordion/customization/icons/javascript.md
+++ b/static/usage/v7/accordion/customization/icons/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index cca6fbf0af1..2b269c172ed 100644
--- a/static/usage/v7/accordion/customization/icons/react.md
+++ b/static/usage/v7/accordion/customization/icons/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 import { caretDownCircle } from 'ionicons/icons';
 
 function Example() {
diff --git a/static/usage/v7/accordion/customization/icons/vue.md b/static/usage/v7/accordion/customization/icons/vue.md
index 760bab7520b..453e9963a89 100644
--- a/static/usage/v7/accordion/customization/icons/vue.md
+++ b/static/usage/v7/accordion/customization/icons/vue.md
@@ -5,49 +5,38 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
     setup() {
-      return { caretDownCircle }
-    }
+      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
index 9af8534259c..5efdf7b71f9 100644
--- a/static/usage/v7/accordion/customization/theming/angular/example_component_html.md
+++ b/static/usage/v7/accordion/customization/theming/angular/example_component_html.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="rose">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 6054219017a..141236c6633 100644
--- a/static/usage/v7/accordion/customization/theming/angular/global_css.md
+++ b/static/usage/v7/accordion/customization/theming/angular/global_css.md
@@ -1,9 +1,9 @@
 ```css
 :root {
   --ion-color-rose: #fecdd3;
-  --ion-color-rose-rgb: 254,205,211;
+  --ion-color-rose-rgb: 254, 205, 211;
   --ion-color-rose-contrast: #000000;
-  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-contrast-rgb: 0, 0, 0;
   --ion-color-rose-shade: #e0b4ba;
   --ion-color-rose-tint: #fed2d7;
 }
@@ -17,7 +17,7 @@
   --ion-color-tint: var(--ion-color-rose-tint);
 }
 
-div[slot="content"] {
-  background: rgba(var(--ion-color-rose-rgb), 0.25)
+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
index 0a520db4e1d..1a28d63724f 100644
--- a/static/usage/v7/accordion/customization/theming/demo.html
+++ b/static/usage/v7/accordion/customization/theming/demo.html
@@ -1,72 +1,64 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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);
+      }
 
-    .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>
 
-    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
+  <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/v7/accordion/customization/theming/javascript.md b/static/usage/v7/accordion/customization/theming/javascript.md
index d35f6dbb6b9..179bf5d51c0 100644
--- a/static/usage/v7/accordion/customization/theming/javascript.md
+++ b/static/usage/v7/accordion/customization/theming/javascript.md
@@ -4,38 +4,32 @@
     <ion-item slot="header" color="rose">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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-rgb: 254, 205, 211;
     --ion-color-rose-contrast: #000000;
-    --ion-color-rose-contrast-rgb: 0,0,0;
+    --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);
@@ -44,9 +38,9 @@
     --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)
+
+  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
index 6054219017a..141236c6633 100644
--- a/static/usage/v7/accordion/customization/theming/react/main_css.md
+++ b/static/usage/v7/accordion/customization/theming/react/main_css.md
@@ -1,9 +1,9 @@
 ```css
 :root {
   --ion-color-rose: #fecdd3;
-  --ion-color-rose-rgb: 254,205,211;
+  --ion-color-rose-rgb: 254, 205, 211;
   --ion-color-rose-contrast: #000000;
-  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-contrast-rgb: 0, 0, 0;
   --ion-color-rose-shade: #e0b4ba;
   --ion-color-rose-tint: #fed2d7;
 }
@@ -17,7 +17,7 @@
   --ion-color-tint: var(--ion-color-rose-tint);
 }
 
-div[slot="content"] {
-  background: rgba(var(--ion-color-rose-rgb), 0.25)
+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
index 348576ae0fe..ecc51a9e15b 100644
--- a/static/usage/v7/accordion/customization/theming/react/main_tsx.md
+++ b/static/usage/v7/accordion/customization/theming/react/main_tsx.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 
 import './main.css';
 
diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md
index cf55542e739..c049c4b89d8 100644
--- a/static/usage/v7/accordion/customization/theming/vue.md
+++ b/static/usage/v7/accordion/customization/theming/vue.md
@@ -5,62 +5,51 @@
       <ion-item slot="header" color="rose">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
     setup() {
-      return { caretDownCircle }
-    }
+      return { caretDownCircle };
+    },
   });
 </script>
 
 <style>
   :root {
     --ion-color-rose: #fecdd3;
-    --ion-color-rose-rgb: 254,205,211;
+    --ion-color-rose-rgb: 254, 205, 211;
     --ion-color-rose-contrast: #000000;
-    --ion-color-rose-contrast-rgb: 0,0,0;
+    --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);
@@ -69,9 +58,9 @@
     --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)
+
+  div[slot='content'] {
+    background: rgba(var(--ion-color-rose-rgb), 0.25);
   }
 </style>
 ```
diff --git a/static/usage/v7/accordion/disable-group/demo.html b/static/usage/v7/accordion/disable-group/demo.html
index 245af23f3fd..76ac5f87d28 100644
--- a/static/usage/v7/accordion/disable-group/demo.html
+++ b/static/usage/v7/accordion/disable-group/demo.html
@@ -1,49 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/disable/group/demo.html b/static/usage/v7/accordion/disable/group/demo.html
index b5331cef469..778e4488787 100644
--- a/static/usage/v7/accordion/disable/group/demo.html
+++ b/static/usage/v7/accordion/disable/group/demo.html
@@ -1,49 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/disable/individual/demo.html b/static/usage/v7/accordion/disable/individual/demo.html
index b7446872d54..67ee3bf4dea 100644
--- a/static/usage/v7/accordion/disable/individual/demo.html
+++ b/static/usage/v7/accordion/disable/individual/demo.html
@@ -1,49 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html
index dd5269e0834..bbf4c5bfcab 100644
--- a/static/usage/v7/accordion/listen-changes/demo.html
+++ b/static/usage/v7/accordion/listen-changes/demo.html
@@ -1,73 +1,64 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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>
 
-        <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'];
 
-  <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;
 
-    accordionGroup.addEventListener('ionChange', (ev) => {
-      const collapsedItems = values.filter(value => value !== ev.detail.value);
-      const selectedValue = ev.detail.value;
-
-      listenerOut.innerText = `
+        listenerOut.innerText = `
           Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
           Collapsed: ${collapsedItems.join(', ')}
-        `
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+        `;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/accordion/multiple/demo.html b/static/usage/v7/accordion/multiple/demo.html
index 01068461446..b2c4b51c543 100644
--- a/static/usage/v7/accordion/multiple/demo.html
+++ b/static/usage/v7/accordion/multiple/demo.html
@@ -1,54 +1,46 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+    <script>
+      const accordionGroup = document.querySelector('ion-accordion-group');
+      accordionGroup.value = ['first', 'third'];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/accordion/readonly/group/angular.md b/static/usage/v7/accordion/readonly/group/angular.md
index 99c084f8064..4ebf8c55e4e 100644
--- a/static/usage/v7/accordion/readonly/group/angular.md
+++ b/static/usage/v7/accordion/readonly/group/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 3ddabf35042..4a6fa971834 100644
--- a/static/usage/v7/accordion/readonly/group/demo.html
+++ b/static/usage/v7/accordion/readonly/group/demo.html
@@ -1,49 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/readonly/group/javascript.md b/static/usage/v7/accordion/readonly/group/javascript.md
index 27f216fb4f9..d511ea5ff0b 100644
--- a/static/usage/v7/accordion/readonly/group/javascript.md
+++ b/static/usage/v7/accordion/readonly/group/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 5383b732d96..2f26afde9ea 100644
--- a/static/usage/v7/accordion/readonly/group/react.md
+++ b/static/usage/v7/accordion/readonly/group/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup readonly={true}>
diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md
index aa6a662a802..0de1be3fe91 100644
--- a/static/usage/v7/accordion/readonly/group/vue.md
+++ b/static/usage/v7/accordion/readonly/group/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/v7/accordion/readonly/individual/angular.md b/static/usage/v7/accordion/readonly/individual/angular.md
index 7f9f8f5bb2e..94013b9d07d 100644
--- a/static/usage/v7/accordion/readonly/individual/angular.md
+++ b/static/usage/v7/accordion/readonly/individual/angular.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index d8adf8fa10c..9e3dee651cd 100644
--- a/static/usage/v7/accordion/readonly/individual/demo.html
+++ b/static/usage/v7/accordion/readonly/individual/demo.html
@@ -1,49 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/accordion/readonly/individual/javascript.md b/static/usage/v7/accordion/readonly/individual/javascript.md
index eec083da61a..e1f78d726db 100644
--- a/static/usage/v7/accordion/readonly/individual/javascript.md
+++ b/static/usage/v7/accordion/readonly/individual/javascript.md
@@ -4,25 +4,19 @@
     <ion-item slot="header" color="light">
       <ion-label>First Accordion</ion-label>
     </ion-item>
-    <div class="ion-padding" slot="content">
-      First Content
-    </div>
+    <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>
+    <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>
+    <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
index 7e94d274b32..a6d28a427cd 100644
--- a/static/usage/v7/accordion/readonly/individual/react.md
+++ b/static/usage/v7/accordion/readonly/individual/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonAccordion, 
-  IonAccordionGroup,
-  IonItem, 
-  IonLabel
-} from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
 function Example() {
   return (
     <IonAccordionGroup>
diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md
index 2e02ebd3679..b9a5daac451 100644
--- a/static/usage/v7/accordion/readonly/individual/vue.md
+++ b/static/usage/v7/accordion/readonly/individual/vue.md
@@ -5,44 +5,33 @@
       <ion-item slot="header" color="light">
         <ion-label>First Accordion</ion-label>
       </ion-item>
-      <div class="ion-padding" slot="content">
-        First Content
-      </div>
+      <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>
+      <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>
+      <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 { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      IonAccordion, 
+      IonAccordion,
       IonAccordionGroup,
-      IonItem, 
-      IonLabel
+      IonItem,
+      IonLabel,
     },
   });
 </script>
diff --git a/static/usage/v7/accordion/toggle/demo.html b/static/usage/v7/accordion/toggle/demo.html
index d58cf36bcfd..c72ea7b6dfe 100644
--- a/static/usage/v7/accordion/toggle/demo.html
+++ b/static/usage/v7/accordion/toggle/demo.html
@@ -1,69 +1,61 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 />
+  <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>
 
-        <ion-button size="block" onclick="toggleSecondAccordion()">Toggle Second Accordion</ion-button>
-      </div>
-    </ion-content>
-  </ion-app>
+          <br />
 
-  <script>
-    const accordionGroup = document.querySelector('ion-accordion-group');
-    const toggleSecondAccordion = () => {
-      if (accordionGroup.value === 'second') {
-        accordionGroup.value = undefined;
-      } else {
-        accordionGroup.value = 'second'
-      }
-    }
-  </script>
-</body>
+          <ion-button size="block" onclick="toggleSecondAccordion()">Toggle Second Accordion</ion-button>
+        </div>
+      </ion-content>
+    </ion-app>
 
-</html>
\ No newline at end of file
+    <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/v7/action-sheet/controller/demo.html b/static/usage/v7/action-sheet/controller/demo.html
index a4635ade676..4843e001a1f 100644
--- a/static/usage/v7/action-sheet/controller/demo.html
+++ b/static/usage/v7/action-sheet/controller/demo.html
@@ -1,53 +1,53 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</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.header = 'Actions';
+        actionSheet.buttons = [
+          {
+            text: 'Delete',
+            role: 'destructive',
+            data: {
+              action: 'delete',
+            },
+          },
+          {
+            text: 'Share',
+            data: {
+              action: 'share',
+            },
+          },
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            data: {
+              action: 'cancel',
+            },
+          },
+        ];
 
-<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.header = 'Actions';
-      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
+        document.body.appendChild(actionSheet);
+        await actionSheet.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
index 381691b1f0c..78d9ddf05c8 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
@@ -12,24 +12,24 @@ export class ExampleComponent {
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
-  
+
   setOpen(isOpen: boolean) {
     this.isActionSheetOpen = isOpen;
   }
diff --git a/static/usage/v7/action-sheet/inline/isOpen/demo.html b/static/usage/v7/action-sheet/inline/isOpen/demo.html
index d39cb7d670e..224319878c3 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/demo.html
+++ b/static/usage/v7/action-sheet/inline/isOpen/demo.html
@@ -1,55 +1,53 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button onclick="actionSheet.isOpen = true">Open</ion-button>
+          <ion-action-sheet header="Actions"></ion-action-sheet>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      var actionSheet = document.querySelector('ion-action-sheet');
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="actionSheet.isOpen = true">Open</ion-button>
-        <ion-action-sheet header="Actions"></ion-action-sheet>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    var actionSheet = document.querySelector('ion-action-sheet');
+      actionSheet.buttons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
 
-    actionSheet.buttons = [
-      {
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
-      }
-    ];
-
-    actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-      actionSheet.isOpen = false;
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+        actionSheet.isOpen = false;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/action-sheet/inline/isOpen/javascript.md b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
index 6557f4f4c50..2c0e3b11879 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/javascript.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
@@ -10,22 +10,22 @@
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 
   actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
diff --git a/static/usage/v7/action-sheet/inline/isOpen/react.md b/static/usage/v7/action-sheet/inline/isOpen/react.md
index 5497ad7b574..aebfa63c093 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/react.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/react.md
@@ -16,22 +16,22 @@ function Example() {
             text: 'Delete',
             role: 'destructive',
             data: {
-              action: 'delete'
-            }
+              action: 'delete',
+            },
           },
           {
             text: 'Share',
             data: {
-              action: 'share'
-            }
+              action: 'share',
+            },
           },
           {
             text: 'Cancel',
             role: 'cancel',
             data: {
-              action: 'cancel'
-            }
-          }
+              action: 'cancel',
+            },
+          },
         ]}
         onDidDismiss={() => setIsOpen(false)}
       ></IonActionSheet>
diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md
index a3131033fff..9d82efd4ea1 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/vue.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md
@@ -47,7 +47,7 @@
       return {
         actionSheetButtons,
         isOpen,
-        setOpen
+        setOpen,
       };
     },
   };
diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
index bf4d4580341..b2bebe5de6c 100644
--- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
+++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
@@ -1,8 +1,4 @@
 ```html
 <ion-button id="open-action-sheet">Open</ion-button>
-<ion-action-sheet
-  trigger="open-action-sheet"
-  header="Actions"
-  [buttons]="actionSheetButtons"
-></ion-action-sheet>
+<ion-action-sheet trigger="open-action-sheet" header="Actions" [buttons]="actionSheetButtons"></ion-action-sheet>
 ```
diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
index 2834f65e3e3..f991151c4a1 100644
--- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
@@ -11,22 +11,22 @@ export class ExampleComponent {
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 }
 ```
diff --git a/static/usage/v7/action-sheet/inline/trigger/demo.html b/static/usage/v7/action-sheet/inline/trigger/demo.html
index e7d0e43b07e..74720e77cf0 100644
--- a/static/usage/v7/action-sheet/inline/trigger/demo.html
+++ b/static/usage/v7/action-sheet/inline/trigger/demo.html
@@ -1,54 +1,49 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-action-sheet">Open</ion-button>
+          <ion-action-sheet trigger="open-action-sheet" header="Actions"></ion-action-sheet>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      const actionSheet = document.querySelector('ion-action-sheet');
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-action-sheet">Open</ion-button>
-        <ion-action-sheet
-          trigger="open-action-sheet"
-          header="Actions"
-        ></ion-action-sheet>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const actionSheet = document.querySelector('ion-action-sheet');
-
-    actionSheet.buttons = [
-      {
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
-      }
-    ];
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      actionSheet.buttons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/action-sheet/inline/trigger/javascript.md b/static/usage/v7/action-sheet/inline/trigger/javascript.md
index 8e769fe0ed1..d705a0162b5 100644
--- a/static/usage/v7/action-sheet/inline/trigger/javascript.md
+++ b/static/usage/v7/action-sheet/inline/trigger/javascript.md
@@ -1,9 +1,6 @@
 ```html
 <ion-button id="open-action-sheet">Open</ion-button>
-<ion-action-sheet
-  trigger="open-action-sheet"
-  header="Actions"
-></ion-action-sheet>
+<ion-action-sheet trigger="open-action-sheet" header="Actions"></ion-action-sheet>
 
 <script>
   var actionSheet = document.querySelector('ion-action-sheet');
@@ -13,22 +10,22 @@
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/inline/trigger/react.md b/static/usage/v7/action-sheet/inline/trigger/react.md
index 6890d0be7a8..54c1793d713 100644
--- a/static/usage/v7/action-sheet/inline/trigger/react.md
+++ b/static/usage/v7/action-sheet/inline/trigger/react.md
@@ -14,22 +14,22 @@ function Example() {
             text: 'Delete',
             role: 'destructive',
             data: {
-              action: 'delete'
-            }
+              action: 'delete',
+            },
           },
           {
             text: 'Share',
             data: {
-              action: 'share'
-            }
+              action: 'share',
+            },
           },
           {
             text: 'Cancel',
             role: 'cancel',
             data: {
-              action: 'cancel'
-            }
-          }
+              action: 'cancel',
+            },
+          },
         ]}
       ></IonActionSheet>
     </>
diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md
index 4c681af50b6..c32a8ea9bdd 100644
--- a/static/usage/v7/action-sheet/inline/trigger/vue.md
+++ b/static/usage/v7/action-sheet/inline/trigger/vue.md
@@ -1,11 +1,7 @@
 ```html
 <template>
   <ion-button id="open-action-sheet">Open</ion-button>
-  <ion-action-sheet
-    trigger="open-action-sheet"
-    header="Actions"
-    :buttons="actionSheetButtons"
-  ></ion-action-sheet>
+  <ion-action-sheet trigger="open-action-sheet" header="Actions" :buttons="actionSheetButtons"></ion-action-sheet>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
index 146729f88db..95ba12c92f2 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -13,22 +13,22 @@ export class ExampleComponent {
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 
   constructor() {}
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
index d8775124a89..f458e0f2aaa 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
@@ -1,72 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-
-    code {
-      white-space: pre-wrap;
-    }
-  </style>
-</head>
+    <style>
+      .container {
+        flex-direction: column;
+      }
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-action-sheet">Open</ion-button>
-        <ion-action-sheet
-          trigger="open-action-sheet"
-          header="Example header"
-          sub-header="Example subheader"
-        ></ion-action-sheet>
+      code {
+        white-space: pre-wrap;
+      }
+    </style>
+  </head>
 
-        <code id="action"></code>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const actionSheet = document.querySelector('ion-action-sheet');
-    const action = document.getElementById('action');
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-action-sheet">Open</ion-button>
+          <ion-action-sheet
+            trigger="open-action-sheet"
+            header="Example header"
+            sub-header="Example subheader"
+          ></ion-action-sheet>
 
-    actionSheet.buttons = [
-      {
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
-      }
-    ];
+          <code id="action"></code>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      const actionSheet = document.querySelector('ion-action-sheet');
+      const action = document.getElementById('action');
 
-    actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-      action.innerText = JSON.stringify(ev.detail, null, 2);
-    });
-  </script>
-</body>
+      actionSheet.buttons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
 
-</html>
\ No newline at end of file
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+        action.innerText = JSON.stringify(ev.detail, null, 2);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
index 7b1cbb0bdb4..b247594a1ab 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
@@ -33,22 +33,22 @@
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 
   actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
index bbddaaece4e..95d3c39a5ef 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
@@ -20,22 +20,22 @@ function Example() {
             text: 'Delete',
             role: 'destructive',
             data: {
-              action: 'delete'
-            }
+              action: 'delete',
+            },
           },
           {
             text: 'Share',
             data: {
-              action: 'share'
-            }
+              action: 'share',
+            },
           },
           {
             text: 'Cancel',
             role: 'cancel',
             data: {
-              action: 'cancel'
-            }
-          }
+              action: 'cancel',
+            },
+          },
         ]}
         onDidDismiss={({ detail }) => setResult(detail)}
       ></IonActionSheet>
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
index dbc6b2923ed..eebfdef1169 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
@@ -66,7 +66,7 @@
       return {
         result,
         actionSheetButtons,
-        setResult
+        setResult,
       };
     },
   };
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
index a23a02b2aca..d9714abb668 100644
--- 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
@@ -12,22 +12,22 @@ export class ExampleComponent {
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 
   constructor() {}
diff --git a/static/usage/v7/action-sheet/theming/css-properties/demo.html b/static/usage/v7/action-sheet/theming/css-properties/demo.html
index fd3a274c25b..70ccb5c5517 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/demo.html
+++ b/static/usage/v7/action-sheet/theming/css-properties/demo.html
@@ -1,68 +1,66 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 id="open-action-sheet">Open</ion-button>
-        <ion-action-sheet
-          trigger="open-action-sheet"
-          class="my-custom-class"
-          header="Example header"
-          sub-header="Example subheader"
-        ></ion-action-sheet>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const actionSheet = document.querySelector('ion-action-sheet');
-
-    actionSheet.buttons = [
-      {
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
-        }
+    <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;
       }
-    ];
-  </script>
-</body>
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-action-sheet">Open</ion-button>
+          <ion-action-sheet
+            trigger="open-action-sheet"
+            class="my-custom-class"
+            header="Example header"
+            sub-header="Example subheader"
+          ></ion-action-sheet>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      const actionSheet = document.querySelector('ion-action-sheet');
 
-</html>
\ No newline at end of file
+      actionSheet.buttons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/action-sheet/theming/css-properties/javascript.md b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
index 792697d267d..cbc9332589a 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/javascript.md
+++ b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
@@ -27,22 +27,22 @@
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 </script>
 ```
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
index d66211df842..fc0c08e0a57 100644
--- 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
@@ -18,22 +18,22 @@ function Example() {
             text: 'Delete',
             role: 'destructive',
             data: {
-              action: 'delete'
-            }
+              action: 'delete',
+            },
           },
           {
             text: 'Share',
             data: {
-              action: 'share'
-            }
+              action: 'share',
+            },
           },
           {
             text: 'Cancel',
             role: 'cancel',
             data: {
-              action: 'cancel'
-            }
-          }
+              action: 'cancel',
+            },
+          },
         ]}
       ></IonActionSheet>
     </>
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
index a23a02b2aca..d9714abb668 100644
--- 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
@@ -12,22 +12,22 @@ export class ExampleComponent {
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 
   constructor() {}
diff --git a/static/usage/v7/action-sheet/theming/styling/demo.html b/static/usage/v7/action-sheet/theming/styling/demo.html
index d3bafd2b68e..ef322200bdd 100644
--- a/static/usage/v7/action-sheet/theming/styling/demo.html
+++ b/static/usage/v7/action-sheet/theming/styling/demo.html
@@ -1,81 +1,83 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
-    }
+    <style>
+      ion-action-sheet.my-custom-class .action-sheet-group {
+        background: #f58840;
+      }
 
-    ion-action-sheet.my-custom-class .action-sheet-cancel::after {
-      background: #e97223;
-    }
+      ion-action-sheet.my-custom-class .action-sheet-title {
+        color: #fff;
+      }
 
-    ion-action-sheet.my-custom-class .action-sheet-button,
-    ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
-      color: #000000;
-    }
+      ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+        background: #e97223;
+      }
 
-    @media (any-hover: hover) {
-      ion-action-sheet.my-custom-class .action-sheet-button:hover {
+      ion-action-sheet.my-custom-class .action-sheet-button,
+      ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
         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 id="open-action-sheet">Open</ion-button>
-        <ion-action-sheet trigger="open-action-sheet" class="my-custom-class" header="Example header"
-          sub-header="Example subheader"></ion-action-sheet>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const actionSheet = document.querySelector('ion-action-sheet');
-
-    actionSheet.buttons = [
-      {
-        text: 'Delete',
-        role: 'destructive',
-        data: {
-          action: 'delete'
-        }
-      },
-      {
-        text: 'Share',
-        data: {
-          action: 'share'
-        }
-      },
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        data: {
-          action: 'cancel'
+      @media (any-hover: hover) {
+        ion-action-sheet.my-custom-class .action-sheet-button:hover {
+          color: #000000;
         }
       }
-    ];
-  </script>
-</body>
 
-</html>
\ No newline at end of file
+      ion-action-sheet.my-custom-class ion-backdrop {
+        opacity: 0.6;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-action-sheet">Open</ion-button>
+          <ion-action-sheet
+            trigger="open-action-sheet"
+            class="my-custom-class"
+            header="Example header"
+            sub-header="Example subheader"
+          ></ion-action-sheet>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      const actionSheet = document.querySelector('ion-action-sheet');
+
+      actionSheet.buttons = [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/action-sheet/theming/styling/javascript.md b/static/usage/v7/action-sheet/theming/styling/javascript.md
index 8d578dbb51e..90e2725d0df 100644
--- a/static/usage/v7/action-sheet/theming/styling/javascript.md
+++ b/static/usage/v7/action-sheet/theming/styling/javascript.md
@@ -44,22 +44,22 @@
       text: 'Delete',
       role: 'destructive',
       data: {
-        action: 'delete'
-      }
+        action: 'delete',
+      },
     },
     {
       text: 'Share',
       data: {
-        action: 'share'
-      }
+        action: 'share',
+      },
     },
     {
       text: 'Cancel',
       role: 'cancel',
       data: {
-        action: 'cancel'
-      }
-    }
+        action: 'cancel',
+      },
+    },
   ];
 </script>
 ```
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
index d66211df842..fc0c08e0a57 100644
--- a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
+++ b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
@@ -18,22 +18,22 @@ function Example() {
             text: 'Delete',
             role: 'destructive',
             data: {
-              action: 'delete'
-            }
+              action: 'delete',
+            },
           },
           {
             text: 'Share',
             data: {
-              action: 'share'
-            }
+              action: 'share',
+            },
           },
           {
             text: 'Cancel',
             role: 'cancel',
             data: {
-              action: 'cancel'
-            }
-          }
+              action: 'cancel',
+            },
+          },
         ]}
       ></IonActionSheet>
     </>
diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md
index bd9fb37882c..5db8454f7b2 100644
--- a/static/usage/v7/alert/buttons/angular/example_component_html.md
+++ b/static/usage/v7/alert/buttons/angular/example_component_html.md
@@ -8,4 +8,4 @@
 ></ion-alert>
 <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
index 89b76aaed6a..e3038179e13 100644
--- a/static/usage/v7/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md
@@ -13,13 +13,17 @@ export class ExampleComponent {
     {
       text: 'Cancel',
       role: 'cancel',
-      handler: () => { this.handlerMessage = 'Alert canceled'; }
+      handler: () => {
+        this.handlerMessage = 'Alert canceled';
+      },
     },
     {
       text: 'OK',
       role: 'confirm',
-      handler: () => { this.handlerMessage = 'Alert confirmed'; }
-    }
+      handler: () => {
+        this.handlerMessage = 'Alert confirmed';
+      },
+    },
   ];
 
   setResult(ev) {
diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html
index e679f8d6c98..61c4f22f73c 100644
--- a/static/usage/v7/alert/buttons/demo.html
+++ b/static/usage/v7/alert/buttons/demo.html
@@ -1,60 +1,62 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 id="present-alert">Click Me</ion-button>
-        <ion-alert trigger="present-alert" header="Alert!"></ion-alert>
-        <p id="handlerResult"></p>
-        <p id="roleResult"></p>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const handlerOutput = document.querySelector('#handlerResult');
-    const roleOutput = document.querySelector('#roleResult');
-    const alert = document.querySelector('ion-alert');
-
-    alert.buttons = [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        handler: () => { handlerOutput.innerText = 'Alert canceled'; }
-      },
-      {
-        text: 'OK',
-        role: 'confirm',
-        handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      .container {
+        flex-direction: column;
       }
-    ];
 
-    alert.addEventListener('ionAlertDidDismiss', (ev) => {
-      roleOutput.innerText = `Dismissed with role: ${ev.detail.role}`;
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      .container p {
+        margin-bottom: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="present-alert">Click Me</ion-button>
+          <ion-alert trigger="present-alert" header="Alert!"></ion-alert>
+          <p id="handlerResult"></p>
+          <p id="roleResult"></p>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const handlerOutput = document.querySelector('#handlerResult');
+      const roleOutput = document.querySelector('#roleResult');
+      const alert = document.querySelector('ion-alert');
+
+      alert.buttons = [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            handlerOutput.innerText = 'Alert canceled';
+          },
+        },
+        {
+          text: 'OK',
+          role: 'confirm',
+          handler: () => {
+            handlerOutput.innerText = 'Alert confirmed';
+          },
+        },
+      ];
+
+      alert.addEventListener('ionAlertDidDismiss', (ev) => {
+        roleOutput.innerText = `Dismissed with role: ${ev.detail.role}`;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md
index 6f70843e204..292a5d30c2f 100644
--- a/static/usage/v7/alert/buttons/javascript.md
+++ b/static/usage/v7/alert/buttons/javascript.md
@@ -13,13 +13,17 @@
     {
       text: 'Cancel',
       role: 'cancel',
-      handler: () => { handlerOutput.innerText = 'Alert canceled'; }
+      handler: () => {
+        handlerOutput.innerText = 'Alert canceled';
+      },
     },
     {
       text: 'OK',
       role: 'confirm',
-      handler: () => { handlerOutput.innerText = 'Alert confirmed'; }
-    }
+      handler: () => {
+        handlerOutput.innerText = 'Alert confirmed';
+      },
+    },
   ];
 
   alert.addEventListener('ionAlertDidDismiss', (ev) => {
diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
index 50cf42bb5a3..cd126758598 100644
--- a/static/usage/v7/alert/buttons/vue.md
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -40,13 +40,13 @@
 
       const setResult = (ev: CustomEvent) => {
         roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
-      }
+      };
 
       return {
         handlerMessage,
         roleMessage,
         alertButtons,
-        setResult
+        setResult,
       };
     },
   };
diff --git a/static/usage/v7/alert/customization/angular/example_component_html.md b/static/usage/v7/alert/customization/angular/example_component_html.md
index 0da962b2489..762d3c21d89 100644
--- a/static/usage/v7/alert/customization/angular/example_component_html.md
+++ b/static/usage/v7/alert/customization/angular/example_component_html.md
@@ -1,9 +1,4 @@
 ```html
 <ion-button id="present-alert">Click Me</ion-button>
-<ion-alert
-  trigger="present-alert"
-  class="custom-alert"
-  header="Are you sure?"
-  [buttons]="alertButtons"
-></ion-alert>
+<ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?" [buttons]="alertButtons"></ion-alert>
 ```
diff --git a/static/usage/v7/alert/customization/angular/global_css.md b/static/usage/v7/alert/customization/angular/global_css.md
index c4d1f859c34..c84c1456e58 100644
--- a/static/usage/v7/alert/customization/angular/global_css.md
+++ b/static/usage/v7/alert/customization/angular/global_css.md
@@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm {
 }
 
 .ios .custom-alert button.alert-button {
-  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
 }
 
 .ios button.alert-button.alert-button-cancel {
@@ -30,4 +30,4 @@ 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
index 2e8fa7043a8..46910704054 100644
--- a/static/usage/v7/alert/customization/demo.html
+++ b/static/usage/v7/alert/customization/demo.html
@@ -1,74 +1,72 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-alert.custom-alert {
-      --backdrop-opacity: 0.7;
-    }
-
-    .custom-alert .alert-button-group {
-      padding: 8px;
-    }
+    <style>
+      ion-alert.custom-alert {
+        --backdrop-opacity: 0.7;
+      }
 
-    button.alert-button.alert-button-confirm {
-      background-color: var(--ion-color-success);
-      color: var(--ion-color-success-contrast);
-    }
+      .custom-alert .alert-button-group {
+        padding: 8px;
+      }
 
-    .md button.alert-button.alert-button-confirm {
-      border-radius: 4px;
-    }
+      button.alert-button.alert-button-confirm {
+        background-color: var(--ion-color-success);
+        color: var(--ion-color-success-contrast);
+      }
 
-    .ios .custom-alert button.alert-button {
-      border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
-    }
+      .md button.alert-button.alert-button-confirm {
+        border-radius: 4px;
+      }
 
-    .ios button.alert-button.alert-button-cancel {
-      border-right: 0;
-      border-bottom-left-radius: 13px;
-      border-top-left-radius: 13px;
-    }
+      .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-confirm {
-      border-bottom-right-radius: 13px;
-      border-top-right-radius: 13px;
-    }
-  </style>
-</head>
+      .ios button.alert-button.alert-button-cancel {
+        border-right: 0;
+        border-bottom-left-radius: 13px;
+        border-top-left-radius: 13px;
+      }
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="present-alert">Click Me</ion-button>
-        <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?"></ion-alert>
-      </div>
-    </ion-content>
-  </ion-app>
+      .ios button.alert-button.alert-button-confirm {
+        border-bottom-right-radius: 13px;
+        border-top-right-radius: 13px;
+      }
+    </style>
+  </head>
 
-  <script>
-    const alert = document.querySelector('ion-alert');
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="present-alert">Click Me</ion-button>
+          <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?"></ion-alert>
+        </div>
+      </ion-content>
+    </ion-app>
 
-    alert.buttons = [
-      {
-        text: 'No',
-        cssClass: 'alert-button-cancel'
-      },
-      {
-        text: 'Yes',
-        cssClass: 'alert-button-confirm'
-      }
-    ];
-  </script>
-</body>
+    <script>
+      const alert = document.querySelector('ion-alert');
 
-</html>
\ No newline at end of file
+      alert.buttons = [
+        {
+          text: 'No',
+          cssClass: 'alert-button-cancel',
+        },
+        {
+          text: 'Yes',
+          cssClass: 'alert-button-confirm',
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/alert/customization/javascript.md b/static/usage/v7/alert/customization/javascript.md
index f57e9958bfb..a3c31a1b432 100644
--- a/static/usage/v7/alert/customization/javascript.md
+++ b/static/usage/v7/alert/customization/javascript.md
@@ -8,12 +8,12 @@
   alert.buttons = [
     {
       text: 'No',
-      cssClass: 'alert-button-cancel'
+      cssClass: 'alert-button-cancel',
     },
     {
       text: 'Yes',
-      cssClass: 'alert-button-confirm'
-    }
+      cssClass: 'alert-button-confirm',
+    },
   ];
 </script>
 
@@ -36,7 +36,7 @@
   }
 
   .ios .custom-alert button.alert-button {
-    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+    border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   }
 
   .ios button.alert-button.alert-button-cancel {
diff --git a/static/usage/v7/alert/customization/react/main_css.md b/static/usage/v7/alert/customization/react/main_css.md
index c4d1f859c34..c84c1456e58 100644
--- a/static/usage/v7/alert/customization/react/main_css.md
+++ b/static/usage/v7/alert/customization/react/main_css.md
@@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm {
 }
 
 .ios .custom-alert button.alert-button {
-  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+  border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
 }
 
 .ios button.alert-button.alert-button-cancel {
@@ -30,4 +30,4 @@ 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/vue.md b/static/usage/v7/alert/customization/vue.md
index 7bd279bd0c1..c526c93de8d 100644
--- a/static/usage/v7/alert/customization/vue.md
+++ b/static/usage/v7/alert/customization/vue.md
@@ -1,12 +1,7 @@
 ```html
 <template>
   <ion-button id="present-alert">Click Me</ion-button>
-  <ion-alert
-    trigger="present-alert"
-    class="custom-alert"
-    header="Are you sure?"
-    :buttons="alertButtons"
-  ></ion-alert>
+  <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?" :buttons="alertButtons"></ion-alert>
 </template>
 
 <script lang="ts">
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
index 6d70c3bd2c1..cc22c178c35 100644
--- a/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
@@ -6,4 +6,4 @@
   [buttons]="alertButtons"
   [inputs]="alertInputs"
 ></ion-alert>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/alert/inputs/radios/demo.html b/static/usage/v7/alert/inputs/radios/demo.html
index 3f9b171d413..19d5b19022c 100644
--- a/static/usage/v7/alert/inputs/radios/demo.html
+++ b/static/usage/v7/alert/inputs/radios/demo.html
@@ -1,48 +1,46 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="present-alert">Click Me</ion-button>
+          <ion-alert trigger="present-alert" header="Select your favorite color"></ion-alert>
+        </div>
+      </ion-content>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="present-alert">Click Me</ion-button>
-        <ion-alert trigger="present-alert" header="Select your favorite color"></ion-alert>
-      </div>
-    </ion-content>
-  </ion-app>
+    <script>
+      const alert = document.querySelector('ion-alert');
 
-  <script>
-    const alert = document.querySelector('ion-alert');
-
-    alert.buttons = ['OK'];
-    alert.inputs = [
-      {
-        label: 'Red',
-        type: 'radio',
-        value: 'red'
-      },
-      {
-        label: 'Blue',
-        type: 'radio',
-        value: 'blue'
-      },
-      {
-        label: 'Green',
-        type: 'radio',
-        value: 'green'
-      }
-    ];
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      alert.buttons = ['OK'];
+      alert.inputs = [
+        {
+          label: 'Red',
+          type: 'radio',
+          value: 'red',
+        },
+        {
+          label: 'Blue',
+          type: 'radio',
+          value: 'blue',
+        },
+        {
+          label: 'Green',
+          type: 'radio',
+          value: 'green',
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/alert/inputs/radios/javascript.md b/static/usage/v7/alert/inputs/radios/javascript.md
index 217b8c89054..570a7f4cb6b 100644
--- a/static/usage/v7/alert/inputs/radios/javascript.md
+++ b/static/usage/v7/alert/inputs/radios/javascript.md
@@ -10,18 +10,18 @@
     {
       label: 'Red',
       type: 'radio',
-      value: 'red'
+      value: 'red',
     },
     {
       label: 'Blue',
       type: 'radio',
-      value: 'blue'
+      value: 'blue',
     },
     {
       label: 'Green',
       type: 'radio',
-      value: 'green'
-    }
+      value: 'green',
+    },
   ];
 </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
index fec220f8ecc..0ae990d9a50 100644
--- 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
@@ -6,4 +6,4 @@
   [buttons]="alertButtons"
   [inputs]="alertInputs"
 ></ion-alert>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/demo.html b/static/usage/v7/alert/inputs/text-inputs/demo.html
index 0b63be2a826..6088f0b6122 100644
--- a/static/usage/v7/alert/inputs/text-inputs/demo.html
+++ b/static/usage/v7/alert/inputs/text-inputs/demo.html
@@ -1,52 +1,50 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="present-alert">Click Me</ion-button>
+          <ion-alert trigger="present-alert" header="Please enter your info"></ion-alert>
+        </div>
+      </ion-content>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="present-alert">Click Me</ion-button>
-        <ion-alert trigger="present-alert" header="Please enter your info"></ion-alert>
-      </div>
-    </ion-content>
-  </ion-app>
+    <script>
+      const alert = document.querySelector('ion-alert');
 
-  <script>
-    const alert = document.querySelector('ion-alert');
-
-    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'
-      }
-    ];
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      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',
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/alert/inputs/text-inputs/javascript.md b/static/usage/v7/alert/inputs/text-inputs/javascript.md
index c75afba0a15..bbbd043c5e7 100644
--- a/static/usage/v7/alert/inputs/text-inputs/javascript.md
+++ b/static/usage/v7/alert/inputs/text-inputs/javascript.md
@@ -8,24 +8,24 @@
   alert.buttons = ['OK'];
   alert.inputs = [
     {
-      placeholder: 'Name'
+      placeholder: 'Name',
     },
     {
       placeholder: 'Nickname (max 8 characters)',
       attributes: {
-        maxlength: 8
-      }
+        maxlength: 8,
+      },
     },
     {
       type: 'number',
       placeholder: 'Age',
       min: 1,
-      max: 100
+      max: 100,
     },
     {
       type: 'textarea',
-      placeholder: 'A little about yourself'
-    }
+      placeholder: 'A little about yourself',
+    },
   ];
 </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
index e484d6c912d..183dd98719d 100644
--- a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md
+++ b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md
@@ -1,3 +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/demo.html b/static/usage/v7/alert/presenting/controller/demo.html
index f461595624f..62efcb2413c 100644
--- a/static/usage/v7/alert/presenting/controller/demo.html
+++ b/static/usage/v7/alert/presenting/controller/demo.html
@@ -1,37 +1,35 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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'];
 
-  <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
+        document.body.appendChild(alert);
+        await alert.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
index 6e4c36ec85b..504cb5b4863 100644
--- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
+++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
@@ -8,4 +8,4 @@
   [buttons]="alertButtons"
   (didDismiss)="setOpen(false)"
 ></ion-alert>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/demo.html b/static/usage/v7/alert/presenting/isOpen/demo.html
index e3c8ee20f0b..ef694832be4 100644
--- a/static/usage/v7/alert/presenting/isOpen/demo.html
+++ b/static/usage/v7/alert/presenting/isOpen/demo.html
@@ -1,38 +1,32 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button onclick="alert.isOpen = true">Click Me</ion-button>
+          <ion-alert header="Alert" sub-header="Important message" message="This is an alert!"></ion-alert>
+        </div>
+      </ion-content>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="alert.isOpen = true">Click Me</ion-button>
-        <ion-alert
-          header="Alert"
-          sub-header="Important message"
-          message="This is an alert!"
-        ></ion-alert>
-      </div>
-    </ion-content>
-  </ion-app>
+    <script>
+      const alert = document.querySelector('ion-alert');
 
-  <script>
-    const alert = document.querySelector('ion-alert');
-
-    alert.buttons = ['OK'];
-    alert.addEventListener('ionAlertDidDismiss', () => {
-      alert.isOpen = false;
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      alert.buttons = ['OK'];
+      alert.addEventListener('ionAlertDidDismiss', () => {
+        alert.isOpen = false;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/alert/presenting/isOpen/javascript.md b/static/usage/v7/alert/presenting/isOpen/javascript.md
index f48b512c452..21f310c1904 100644
--- a/static/usage/v7/alert/presenting/isOpen/javascript.md
+++ b/static/usage/v7/alert/presenting/isOpen/javascript.md
@@ -1,10 +1,6 @@
 ```html
 <ion-button onclick="alert.isOpen = true">Click Me</ion-button>
-<ion-alert
-  header="Alert"
-  sub-header="Important message"
-  message="This is an alert!"
-></ion-alert>
+<ion-alert header="Alert" sub-header="Important message" message="This is an alert!"></ion-alert>
 
 <script>
   const alert = document.querySelector('ion-alert');
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
index 4d0cf868890..b067763d8fc 100644
--- a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
@@ -7,4 +7,4 @@
   message="This is an alert!"
   [buttons]="alertButtons"
 ></ion-alert>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/alert/presenting/trigger/demo.html b/static/usage/v7/alert/presenting/trigger/demo.html
index 572514716f4..f2a52d21568 100644
--- a/static/usage/v7/alert/presenting/trigger/demo.html
+++ b/static/usage/v7/alert/presenting/trigger/demo.html
@@ -1,35 +1,33 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="present-alert">Click Me</ion-button>
+          <ion-alert
+            trigger="present-alert"
+            header="Alert"
+            sub-header="Important message"
+            message="This is an alert!"
+          ></ion-alert>
+        </div>
+      </ion-content>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="present-alert">Click Me</ion-button>
-        <ion-alert
-          trigger="present-alert"
-          header="Alert"
-          sub-header="Important message"
-          message="This is an alert!"
-        ></ion-alert>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const alert = document.querySelector('ion-alert');
-    alert.buttons = ['OK'];
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+    <script>
+      const alert = document.querySelector('ion-alert');
+      alert.buttons = ['OK'];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/avatar/basic/demo.html b/static/usage/v7/avatar/basic/demo.html
index 64fa695c703..79693427de8 100644
--- a/static/usage/v7/avatar/basic/demo.html
+++ b/static/usage/v7/avatar/basic/demo.html
@@ -1,27 +1,24 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/avatar/chip/demo.html b/static/usage/v7/avatar/chip/demo.html
index dc15f9a616b..760f628a9e5 100644
--- a/static/usage/v7/avatar/chip/demo.html
+++ b/static/usage/v7/avatar/chip/demo.html
@@ -1,30 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/avatar/chip/vue.md b/static/usage/v7/avatar/chip/vue.md
index 8ded7586040..c872bb48de3 100644
--- a/static/usage/v7/avatar/chip/vue.md
+++ b/static/usage/v7/avatar/chip/vue.md
@@ -13,7 +13,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonAvatar, IonChip, IonLabel }
+    components: { IonAvatar, IonChip, IonLabel },
   });
 </script>
 ```
diff --git a/static/usage/v7/avatar/item/demo.html b/static/usage/v7/avatar/item/demo.html
index 3061c23751d..4b99c6cff32 100644
--- a/static/usage/v7/avatar/item/demo.html
+++ b/static/usage/v7/avatar/item/demo.html
@@ -1,30 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md
index 315af034426..5a9ddea4499 100644
--- a/static/usage/v7/avatar/item/vue.md
+++ b/static/usage/v7/avatar/item/vue.md
@@ -13,7 +13,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonAvatar, IonItem, IonLabel }
+    components: { IonAvatar, IonItem, IonLabel },
   });
 </script>
 ```
diff --git a/static/usage/v7/avatar/theming/css-properties/demo.html b/static/usage/v7/avatar/theming/css-properties/demo.html
index ca9c814a75e..242eba8c1b0 100644
--- a/static/usage/v7/avatar/theming/css-properties/demo.html
+++ b/static/usage/v7/avatar/theming/css-properties/demo.html
@@ -1,32 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-avatar {
+        --border-radius: 4px;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md
index f04d7f8fbe3..180b8998a3f 100644
--- a/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonAvatar } from '@ionic/react';
diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md
index affb7ccdecb..32237336a1c 100644
--- a/static/usage/v7/avatar/theming/css-properties/vue.md
+++ b/static/usage/v7/avatar/theming/css-properties/vue.md
@@ -10,7 +10,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonAvatar }
+    components: { IonAvatar },
   });
 </script>
 
diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
index 3c39508e72c..b2cda11d2a8 100644
--- a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
+++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
@@ -18,7 +18,5 @@ import { Component } from '@angular/core';
     </ion-content>
   `,
 })
-export class PageTwoComponent {
-
-}
+export class PageTwoComponent {}
 ```
diff --git a/static/usage/v7/back-button/basic/demo.html b/static/usage/v7/back-button/basic/demo.html
index 89b2e87535c..771bf41ffcd 100644
--- a/static/usage/v7/back-button/basic/demo.html
+++ b/static/usage/v7/back-button/basic/demo.html
@@ -1,26 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Back Button</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Back Button</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <body>
+    <ion-app>
+      <ion-nav root="page-one"></ion-nav>
+    </ion-app>
 
-</head>
-
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+    <script>
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Back Button</ion-title>
@@ -34,12 +32,12 @@ <h1>Page One</h1>
           </ion-nav-link>
         </ion-content>
       `;
+        }
       }
-    }
 
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -53,12 +51,11 @@ <h1>Page Two</h1>
           <p>Use the back button to navigate to the previous page.</p>
         </ion-content>
       `;
+        }
       }
-    }
-
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-  </script>
-</body>
 
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md
index 1192ca2936c..e26a6f13562 100644
--- a/static/usage/v7/back-button/basic/vue/page_two_vue.md
+++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md
@@ -18,7 +18,7 @@
   import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
 
   export default {
-    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }
+    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar },
   };
 </script>
 ```
diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
index 31f76ac219a..05a1bd64d79 100644
--- a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
+++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
@@ -18,7 +18,5 @@ import { Component } from '@angular/core';
     </ion-content>
   `,
 })
-export class PageTwoComponent {
-
-}
+export class PageTwoComponent {}
 ```
diff --git a/static/usage/v7/back-button/custom/demo.html b/static/usage/v7/back-button/custom/demo.html
index 750cb8ef168..c644726cb4a 100644
--- a/static/usage/v7/back-button/custom/demo.html
+++ b/static/usage/v7/back-button/custom/demo.html
@@ -1,26 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Back Button</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Back Button</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <body>
+    <ion-app>
+      <ion-nav root="page-one"></ion-nav>
+    </ion-app>
 
-</head>
-
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+    <script>
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Back Button</ion-title>
@@ -34,12 +32,12 @@ <h1>Page One</h1>
           </ion-nav-link>
         </ion-content>
       `;
+        }
       }
-    }
 
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -53,12 +51,11 @@ <h1>Page Two</h1>
           <p>Use the back button to navigate to the previous page.</p>
         </ion-content>
       `;
+        }
       }
-    }
-
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-  </script>
-</body>
 
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md
index 05de62654cb..4667abeced5 100644
--- a/static/usage/v7/back-button/custom/vue/page_two_vue.md
+++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md
@@ -21,8 +21,8 @@
   export default {
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
     setup() {
-      return { caretBack }
-    }
+      return { caretBack };
+    },
   };
 </script>
 ```
diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html
index 5bdc07959c9..383542a21da 100644
--- a/static/usage/v7/backdrop/basic/demo.html
+++ b/static/usage/v7/backdrop/basic/demo.html
@@ -1,35 +1,32 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/backdrop/styling/demo.html b/static/usage/v7/backdrop/styling/demo.html
index 1dce05e6c37..de8c9990dfd 100644
--- a/static/usage/v7/backdrop/styling/demo.html
+++ b/static/usage/v7/backdrop/styling/demo.html
@@ -1,57 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-backdrop {
+        opacity: 0.9;
+        background: var(--ion-color-primary);
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-    #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
+  <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/v7/badge/basic/demo.html b/static/usage/v7/badge/basic/demo.html
index 8a6514b89b7..4da5975ef55 100644
--- a/static/usage/v7/badge/basic/demo.html
+++ b/static/usage/v7/badge/basic/demo.html
@@ -1,39 +1,37 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 250px;
+      }
+    </style>
+  </head>
 
-  <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
+  <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>
diff --git a/static/usage/v7/badge/theming/colors/demo.html b/static/usage/v7/badge/theming/colors/demo.html
index b7eaef9a56f..7ab5aec3dc8 100644
--- a/static/usage/v7/badge/theming/colors/demo.html
+++ b/static/usage/v7/badge/theming/colors/demo.html
@@ -1,55 +1,53 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 250px;
+      }
+    </style>
+  </head>
 
-  <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
+  <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>
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
index 950e96b4e80..cf47682b14d 100644
--- 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
@@ -5,4 +5,4 @@ ion-badge {
   --padding-end: 20px;
   --padding-start: 20px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/badge/theming/css-properties/demo.html b/static/usage/v7/badge/theming/css-properties/demo.html
index 870b2604c56..4b5d0913da0 100644
--- a/static/usage/v7/badge/theming/css-properties/demo.html
+++ b/static/usage/v7/badge/theming/css-properties/demo.html
@@ -1,42 +1,40 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 250px;
+      }
 
-  <style>
-    ion-list {
-      width: 250px;
-    }
+      ion-badge {
+        --background: purple;
+        --color: white;
+        --padding-end: 20px;
+        --padding-start: 20px;
+      }
+    </style>
+  </head>
 
-    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
+  <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>
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
index 950e96b4e80..cf47682b14d 100644
--- a/static/usage/v7/badge/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/badge/theming/css-properties/react/main_css.md
@@ -5,4 +5,4 @@ ion-badge {
   --padding-end: 20px;
   --padding-start: 20px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/breadcrumbs/basic/demo.html b/static/usage/v7/breadcrumbs/basic/demo.html
index 53cb2009b23..48f8d0b182c 100644
--- a/static/usage/v7/breadcrumbs/basic/demo.html
+++ b/static/usage/v7/breadcrumbs/basic/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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>
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
index 76a545d6a8e..926479c1e85 100644
--- 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
@@ -7,4 +7,4 @@
   <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/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
index eede9901f26..003eb1c874f 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
@@ -1,39 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
-  <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');
 
-  <script>
-    const breadcrumbs = document.querySelector('ion-breadcrumbs');
-
-    breadcrumbs.addEventListener('ionCollapsedClick', () => {
-      breadcrumbs.maxItems = undefined;
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      breadcrumbs.addEventListener('ionCollapsedClick', () => {
+        breadcrumbs.maxItems = undefined;
+      });
+    </script>
+  </body>
+</html>
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
index f88b8a6e322..fdd63471ed4 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
@@ -18,14 +18,14 @@
     components: { IonBreadcrumb, IonBreadcrumbs },
     data() {
       return {
-        maxBreadcrumbs: 4
-      }
+        maxBreadcrumbs: 4,
+      };
     },
     methods: {
       expandBreadcrumbs() {
         this.maxBreadcrumbs = undefined;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
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
index 755824f0ece..d54822dd373 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
@@ -1,68 +1,66 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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">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">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
+          <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>
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
index dd665060960..d4f7ef94fbb 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
@@ -1,31 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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>
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
index 2c5ee51a9b7..e3c0462a148 100644
--- 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
@@ -22,4 +22,4 @@
     </ion-content>
   </ng-template>
 </ion-popover>
-```
\ No newline at end of file
+```
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
index 97a8d83827f..4f62d95beb6 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
@@ -1,62 +1,60 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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');
 
-  <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 += `
+      breadcrumbs.addEventListener('ionCollapsedClick', (e) => {
+        let listHTML = ``;
+        e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
+          listHTML += `
           <ion-item
-            ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
+            ${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>
+        popoverList.innerHTML = listHTML;
+        popover.event = e;
+        popover.isOpen = true;
+      });
 
-</html>
\ No newline at end of file
+      popover.addEventListener('didDismiss', () => (popover.isOpen = false));
+    </script>
+  </body>
+</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
index 007fb9a4a1e..1d22085a5b1 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md
@@ -18,12 +18,12 @@
   const popover = document.querySelector('ion-popover');
   const popoverList = document.querySelector('ion-popover ion-list');
 
-  breadcrumbs.addEventListener('ionCollapsedClick', e => {
+  breadcrumbs.addEventListener('ionCollapsedClick', (e) => {
     let listHTML = ``;
     e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => {
       listHTML += `
         <ion-item
-          ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ""}
+          ${i === e.detail.collapsedBreadcrumbs.length - 1 ? `lines="none"` : ''}
           href="${breadcrumb.href}"
         >
           <ion-label>${breadcrumb.textContent}</ion-label>
@@ -36,6 +36,6 @@
     popover.isOpen = true;
   });
 
-  popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  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
index 72cc6520e3c..66ccc22bfe3 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md
@@ -27,10 +27,7 @@ function Example() {
         <IonContent>
           <IonList>
             {collapsedBreadcrumbs.map((breadcrumb, i) => (
-              <IonItem
-                href={breadcrumb.href}
-                lines={i === collapsedBreadcrumbs.length - 1 ? "none" : undefined}
-              >
+              <IonItem href={breadcrumb.href} lines={i === collapsedBreadcrumbs.length - 1 ? 'none' : undefined}>
                 <IonLabel>{breadcrumb.textContent}</IonLabel>
               </IonItem>
             ))}
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
index 318f64f8547..54368fa7213 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
@@ -24,25 +24,25 @@
 </template>
 
 <script lang="ts">
-import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/vue';
-import Popover from './Popover.vue';
+  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;
-    }
-  },
-}
+  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/demo.html b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
index 845ab797ec0..cb183161d47 100644
--- a/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
@@ -1,41 +1,39 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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>
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
index f836a85455f..f0849705aab 100644
--- a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
@@ -29,7 +29,7 @@
     components: { IonBreadcrumb, IonBreadcrumbs, IonIcon },
     setup() {
       return { arrowForwardCircle };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
index 65c2fc84713..596fb85cd1e 100644
--- a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
@@ -1,68 +1,66 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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
+          <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>
diff --git a/static/usage/v7/breadcrumbs/theming/colors/demo.html b/static/usage/v7/breadcrumbs/theming/colors/demo.html
index 1734d9dad7c..04bc0483a4f 100644
--- a/static/usage/v7/breadcrumbs/theming/colors/demo.html
+++ b/static/usage/v7/breadcrumbs/theming/colors/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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>
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
index 338babc9c79..3dc7c4640ad 100644
--- 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
@@ -4,4 +4,4 @@ ion-breadcrumb {
   --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/demo.html b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
index 342106810c0..c440c40655c 100644
--- a/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
@@ -1,37 +1,35 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-  <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
+  <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>
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
index 338babc9c79..3dc7c4640ad 100644
--- a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md
@@ -4,4 +4,4 @@ ion-breadcrumb {
   --color-active: rgb(150, 112, 220);
   --color-hover: rgb(103, 61, 180);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/button/basic/angular.md b/static/usage/v7/button/basic/angular.md
index 44ba5831426..d313d7dcd23 100644
--- a/static/usage/v7/button/basic/angular.md
+++ b/static/usage/v7/button/basic/angular.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button [disabled]="true">Disabled</ion-button>
+<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
index 19481e4a0c9..5724aab1859 100644
--- a/static/usage/v7/button/basic/demo.html
+++ b/static/usage/v7/button/basic/demo.html
@@ -1,26 +1,23 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/button/basic/javascript.md b/static/usage/v7/button/basic/javascript.md
index 8296ef7f42a..e298f5a1246 100644
--- a/static/usage/v7/button/basic/javascript.md
+++ b/static/usage/v7/button/basic/javascript.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button disabled="true">Disabled</ion-button>
+<ion-button>Default</ion-button> <ion-button disabled="true">Disabled</ion-button>
 ```
diff --git a/static/usage/v7/button/expand/angular.md b/static/usage/v7/button/expand/angular.md
index ca3f5093b84..b49d2c767ae 100644
--- a/static/usage/v7/button/expand/angular.md
+++ b/static/usage/v7/button/expand/angular.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button expand="block">Block</ion-button>
-<ion-button expand="full">Full</ion-button>
+<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
index d636c653713..39095a008fa 100644
--- a/static/usage/v7/button/expand/demo.html
+++ b/static/usage/v7/button/expand/demo.html
@@ -1,32 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        align-items: stretch;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/button/expand/javascript.md b/static/usage/v7/button/expand/javascript.md
index ca3f5093b84..b49d2c767ae 100644
--- a/static/usage/v7/button/expand/javascript.md
+++ b/static/usage/v7/button/expand/javascript.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button expand="block">Block</ion-button>
-<ion-button expand="full">Full</ion-button>
+<ion-button expand="block">Block</ion-button> <ion-button expand="full">Full</ion-button>
 ```
diff --git a/static/usage/v7/button/fill/demo.html b/static/usage/v7/button/fill/demo.html
index 651fe0853e6..7e568a1a4dd 100644
--- a/static/usage/v7/button/fill/demo.html
+++ b/static/usage/v7/button/fill/demo.html
@@ -1,28 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/button/icons/demo.html b/static/usage/v7/button/icons/demo.html
index 4cf763ae93b..9f8ae344b46 100644
--- a/static/usage/v7/button/icons/demo.html
+++ b/static/usage/v7/button/icons/demo.html
@@ -1,37 +1,34 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button>
+            <ion-icon slot="start" name="star"></ion-icon>
+            Left Icon
+          </ion-button>
 
-</head>
+          <ion-button>
+            Right Icon
+            <ion-icon slot="end" name="star"></ion-icon>
+          </ion-button>
 
-<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
+          <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/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md
index 356fc5617dc..03d8648c878 100644
--- a/static/usage/v7/button/icons/vue.md
+++ b/static/usage/v7/button/icons/vue.md
@@ -23,8 +23,8 @@
   export default defineComponent({
     components: { IonButton, IonIcon },
     setup() {
-      return { star }
-    }
+      return { star };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular.md
index 97ed756261a..a37193d9013 100644
--- a/static/usage/v7/button/shape/angular.md
+++ b/static/usage/v7/button/shape/angular.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button shape="round">Round</ion-button>
+<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
index 5d87ac91cbe..c4f0acae694 100644
--- a/static/usage/v7/button/shape/demo.html
+++ b/static/usage/v7/button/shape/demo.html
@@ -1,26 +1,23 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/button/shape/javascript.md b/static/usage/v7/button/shape/javascript.md
index 97ed756261a..a37193d9013 100644
--- a/static/usage/v7/button/shape/javascript.md
+++ b/static/usage/v7/button/shape/javascript.md
@@ -1,4 +1,3 @@
 ```html
-<ion-button>Default</ion-button>
-<ion-button shape="round">Round</ion-button>
+<ion-button>Default</ion-button> <ion-button shape="round">Round</ion-button>
 ```
diff --git a/static/usage/v7/button/size/demo.html b/static/usage/v7/button/size/demo.html
index 1a86485233a..b4cdd2433f8 100644
--- a/static/usage/v7/button/size/demo.html
+++ b/static/usage/v7/button/size/demo.html
@@ -1,27 +1,24 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/button/theming/colors/demo.html b/static/usage/v7/button/theming/colors/demo.html
index f5363dbfc4e..0f908a9176a 100644
--- a/static/usage/v7/button/theming/colors/demo.html
+++ b/static/usage/v7/button/theming/colors/demo.html
@@ -1,41 +1,39 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-wrap: wrap;
+        width: 350px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/button/theming/css-properties/demo.html b/static/usage/v7/button/theming/css-properties/demo.html
index d3508c26436..a21fa88797c 100644
--- a/static/usage/v7/button/theming/css-properties/demo.html
+++ b/static/usage/v7/button/theming/css-properties/demo.html
@@ -1,47 +1,45 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/button/theming/css-properties/react/main_css.md b/static/usage/v7/button/theming/css-properties/react/main_css.md
index 1fba4c49972..fa985cbe82f 100644
--- a/static/usage/v7/button/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/button/theming/css-properties/react/main_css.md
@@ -1,4 +1,3 @@
-
 ```css
 ion-button {
   --background: #93e9be;
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
index 6e0cddd9709..c8c432e1b9c 100644
--- a/static/usage/v7/button/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/button/theming/css-properties/react/main_tsx.md
@@ -5,9 +5,7 @@ import { IonButton } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return (
-    <IonButton>Custom Button</IonButton>
-  );
+  return <IonButton>Custom Button</IonButton>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/buttons/basic/demo.html b/static/usage/v7/buttons/basic/demo.html
index e66ffdfaa3a..3c889975115 100644
--- a/static/usage/v7/buttons/basic/demo.html
+++ b/static/usage/v7/buttons/basic/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/buttons/placement/demo.html b/static/usage/v7/buttons/placement/demo.html
index 34c1f5504f2..89f502b3a05 100644
--- a/static/usage/v7/buttons/placement/demo.html
+++ b/static/usage/v7/buttons/placement/demo.html
@@ -1,49 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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
+          <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/v7/buttons/types/angular.md b/static/usage/v7/buttons/types/angular.md
index 183c70105b1..9562dbb3b47 100644
--- a/static/usage/v7/buttons/types/angular.md
+++ b/static/usage/v7/buttons/types/angular.md
@@ -1,15 +1,11 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button size="large">
-      Favorite
-    </ion-button>
+    <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-button> Delete </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
diff --git a/static/usage/v7/buttons/types/demo.html b/static/usage/v7/buttons/types/demo.html
index 38924b0ddc5..9be9ccc031b 100644
--- a/static/usage/v7/buttons/types/demo.html
+++ b/static/usage/v7/buttons/types/demo.html
@@ -1,106 +1,100 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-              <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="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="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-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
+          <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/v7/buttons/types/javascript.md b/static/usage/v7/buttons/types/javascript.md
index 183c70105b1..9562dbb3b47 100644
--- a/static/usage/v7/buttons/types/javascript.md
+++ b/static/usage/v7/buttons/types/javascript.md
@@ -1,15 +1,11 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button size="large">
-      Favorite
-    </ion-button>
+    <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-button> Delete </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
diff --git a/static/usage/v7/buttons/types/react.md b/static/usage/v7/buttons/types/react.md
index 8d3b3edfe9e..01baca04d74 100644
--- a/static/usage/v7/buttons/types/react.md
+++ b/static/usage/v7/buttons/types/react.md
@@ -8,15 +8,11 @@ function Example() {
     <>
       <IonToolbar>
         <IonButtons slot="secondary">
-          <IonButton size="large">
-            Favorite
-          </IonButton>
+          <IonButton size="large">Favorite</IonButton>
         </IonButtons>
         <IonTitle>Default Buttons</IonTitle>
         <IonButtons slot="primary">
-          <IonButton>
-            Delete
-          </IonButton>
+          <IonButton>Delete</IonButton>
         </IonButtons>
       </IonToolbar>
 
@@ -86,5 +82,4 @@ function Example() {
   );
 }
 export default Example;
-
 ```
diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md
index 9a101caa402..60b04a067da 100644
--- a/static/usage/v7/buttons/types/vue.md
+++ b/static/usage/v7/buttons/types/vue.md
@@ -2,15 +2,11 @@
 <template>
   <ion-toolbar>
     <ion-buttons slot="secondary">
-      <ion-button size="large">
-        Favorite
-      </ion-button>
+      <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-button> Delete </ion-button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -87,7 +83,7 @@
     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/demo.html b/static/usage/v7/card/basic/demo.html
index 2c94d6d3b6f..21c1c3280a3 100644
--- a/static/usage/v7/card/basic/demo.html
+++ b/static/usage/v7/card/basic/demo.html
@@ -1,40 +1,38 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  </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>
 
-<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
+            <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/v7/card/basic/index.md b/static/usage/v7/card/basic/index.md
index 41354dffa34..6c090f394bb 100644
--- a/static/usage/v7/card/basic/index.md
+++ b/static/usage/v7/card/basic/index.md
@@ -5,8 +5,4 @@ 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/card/basic/demo.html"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/card/basic/demo.html" />
diff --git a/static/usage/v7/card/basic/react.md b/static/usage/v7/card/basic/react.md
index e3f400dc659..cc05f5ca481 100644
--- a/static/usage/v7/card/basic/react.md
+++ b/static/usage/v7/card/basic/react.md
@@ -10,9 +10,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <IonCardContent>Here's a small text description for the card content. Nothing more, nothing less.</IonCardContent>
     </IonCard>
   );
 }
diff --git a/static/usage/v7/card/buttons/demo.html b/static/usage/v7/card/buttons/demo.html
index f80f67a1cbd..600f311be4e 100644
--- a/static/usage/v7/card/buttons/demo.html
+++ b/static/usage/v7/card/buttons/demo.html
@@ -1,43 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  </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>
 
-<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-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
+            <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/v7/card/buttons/index.md b/static/usage/v7/card/buttons/index.md
index f0a1001a6cc..c19055f3a7f 100644
--- a/static/usage/v7/card/buttons/index.md
+++ b/static/usage/v7/card/buttons/index.md
@@ -5,9 +5,4 @@ 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/card/buttons/demo.html"
-  size="300px"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/card/buttons/demo.html" size="300px" />
diff --git a/static/usage/v7/card/buttons/react.md b/static/usage/v7/card/buttons/react.md
index f90ab0d3cbb..af0e4bc6e14 100644
--- a/static/usage/v7/card/buttons/react.md
+++ b/static/usage/v7/card/buttons/react.md
@@ -10,9 +10,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <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>
diff --git a/static/usage/v7/card/list/demo.html b/static/usage/v7/card/list/demo.html
index c0dfd617f91..8ed00dcef17 100644
--- a/static/usage/v7/card/list/demo.html
+++ b/static/usage/v7/card/list/demo.html
@@ -1,75 +1,73 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-card {
+        width: 100%;
+      }
 
-    ion-card {
-      width: 100%;
-    }
+      ion-item {
+        --padding-start: 0;
+      }
+    </style>
+  </head>
 
-    ion-item {
-      --padding-start: 0;
-    }
-  </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>
 
-<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>
+                  <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
+                <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/v7/card/list/react/main_tsx.md b/static/usage/v7/card/list/react/main_tsx.md
index 9bb30e92c92..8fe3d6973e9 100644
--- a/static/usage/v7/card/list/react/main_tsx.md
+++ b/static/usage/v7/card/list/react/main_tsx.md
@@ -1,6 +1,16 @@
 ```tsx
 import React from 'react';
-import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/react';
+import {
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonThumbnail,
+} from '@ionic/react';
 
 import './main.css';
 
diff --git a/static/usage/v7/card/media/demo.html b/static/usage/v7/card/media/demo.html
index a375172a45f..7aff16f4d0c 100644
--- a/static/usage/v7/card/media/demo.html
+++ b/static/usage/v7/card/media/demo.html
@@ -1,41 +1,39 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  </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>
 
-<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
+            <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/v7/card/media/index.md b/static/usage/v7/card/media/index.md
index bded2602ff6..3d4cda0926e 100644
--- a/static/usage/v7/card/media/index.md
+++ b/static/usage/v7/card/media/index.md
@@ -5,9 +5,4 @@ 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/card/media/demo.html"
-  size="350px"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/card/media/demo.html" size="350px" />
diff --git a/static/usage/v7/card/media/react.md b/static/usage/v7/card/media/react.md
index 33c5707bb15..29198c78081 100644
--- a/static/usage/v7/card/media/react.md
+++ b/static/usage/v7/card/media/react.md
@@ -11,9 +11,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <IonCardContent>Here's a small text description for the card content. Nothing more, nothing less.</IonCardContent>
     </IonCard>
   );
 }
diff --git a/static/usage/v7/card/theming/colors/angular.md b/static/usage/v7/card/theming/colors/angular.md
index bda4dbfe1dc..8c3924e8365 100644
--- a/static/usage/v7/card/theming/colors/angular.md
+++ b/static/usage/v7/card/theming/colors/angular.md
@@ -5,9 +5,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="secondary">
@@ -16,9 +14,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="tertiary">
@@ -27,9 +23,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="success">
@@ -38,9 +32,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="warning">
@@ -49,9 +41,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="danger">
@@ -60,9 +50,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="light">
@@ -71,9 +59,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="medium">
@@ -82,9 +68,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="dark">
@@ -93,8 +77,6 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <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
index 934d55754d3..f68ba3326d0 100644
--- a/static/usage/v7/card/theming/colors/demo.html
+++ b/static/usage/v7/card/theming/colors/demo.html
@@ -1,131 +1,111 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-wrap: wrap;
-    }
-
-    ion-card {
-      flex: 1 1 28%;
-    }
-  </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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      .container {
+        flex-wrap: wrap;
+      }
+
+      ion-card {
+        flex: 1 1 28%;
+      }
+    </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/v7/card/theming/colors/javascript.md b/static/usage/v7/card/theming/colors/javascript.md
index bda4dbfe1dc..8c3924e8365 100644
--- a/static/usage/v7/card/theming/colors/javascript.md
+++ b/static/usage/v7/card/theming/colors/javascript.md
@@ -5,9 +5,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="secondary">
@@ -16,9 +14,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="tertiary">
@@ -27,9 +23,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="success">
@@ -38,9 +32,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="warning">
@@ -49,9 +41,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="danger">
@@ -60,9 +50,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="light">
@@ -71,9 +59,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="medium">
@@ -82,9 +68,7 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 
 <ion-card color="dark">
@@ -93,8 +77,6 @@
     <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
   </ion-card-header>
 
-  <ion-card-content>
-    Card Content
-  </ion-card-content>
+  <ion-card-content> Card Content </ion-card-content>
 </ion-card>
 ```
diff --git a/static/usage/v7/card/theming/colors/react.md b/static/usage/v7/card/theming/colors/react.md
index cc2f4623a3a..674a4266fdf 100644
--- a/static/usage/v7/card/theming/colors/react.md
+++ b/static/usage/v7/card/theming/colors/react.md
@@ -11,9 +11,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="secondary">
@@ -22,9 +20,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="tertiary">
@@ -33,9 +29,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="success">
@@ -44,9 +38,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="warning">
@@ -55,9 +47,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="danger">
@@ -66,9 +56,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="light">
@@ -77,9 +65,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="medium">
@@ -88,9 +74,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
 
       <IonCard color="dark">
@@ -99,9 +83,7 @@ function Example() {
           <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
         </IonCardHeader>
 
-        <IonCardContent>
-          Card Content
-        </IonCardContent>
+        <IonCardContent>Card Content</IonCardContent>
       </IonCard>
     </>
   );
diff --git a/static/usage/v7/card/theming/colors/vue.md b/static/usage/v7/card/theming/colors/vue.md
index 337df235251..e0070961be8 100644
--- a/static/usage/v7/card/theming/colors/vue.md
+++ b/static/usage/v7/card/theming/colors/vue.md
@@ -6,9 +6,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="secondary">
@@ -17,9 +15,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="tertiary">
@@ -28,9 +24,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="success">
@@ -39,9 +33,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="warning">
@@ -50,9 +42,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="danger">
@@ -61,9 +51,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="light">
@@ -72,9 +60,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="medium">
@@ -83,9 +69,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 
   <ion-card color="dark">
@@ -94,9 +78,7 @@
       <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
     </ion-card-header>
 
-    <ion-card-content>
-      Card Content
-    </ion-card-content>
+    <ion-card-content> Card Content </ion-card-content>
   </ion-card>
 </template>
 
diff --git a/static/usage/v7/card/theming/css-properties/demo.html b/static/usage/v7/card/theming/css-properties/demo.html
index 142e99dba71..61973dab5fe 100644
--- a/static/usage/v7/card/theming/css-properties/demo.html
+++ b/static/usage/v7/card/theming/css-properties/demo.html
@@ -1,53 +1,51 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
-    }
-  </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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
+      }
+    </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/v7/card/theming/css-properties/react/main_tsx.md b/static/usage/v7/card/theming/css-properties/react/main_tsx.md
index 251b18ce24d..a5b4ce3af35 100644
--- a/static/usage/v7/card/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/card/theming/css-properties/react/main_tsx.md
@@ -12,9 +12,7 @@ function Example() {
         <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
       </IonCardHeader>
 
-      <IonCardContent>
-        Here's a small text description for the card content. Nothing more, nothing less.
-      </IonCardContent>
+      <IonCardContent>Here's a small text description for the card content. Nothing more, nothing less.</IonCardContent>
     </IonCard>
   );
 }
diff --git a/static/usage/v7/checkbox/basic/demo.html b/static/usage/v7/checkbox/basic/demo.html
index 746ac8f75fe..4c6d16c7e2a 100644
--- a/static/usage/v7/checkbox/basic/demo.html
+++ b/static/usage/v7/checkbox/basic/demo.html
@@ -1,24 +1,22 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-checkbox>I agree to the terms and conditions</ion-checkbox>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-checkbox>I agree to the terms and conditions</ion-checkbox>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/checkbox/basic/react.md b/static/usage/v7/checkbox/basic/react.md
index 2d4159efbb2..b2fbcb695d3 100644
--- a/static/usage/v7/checkbox/basic/react.md
+++ b/static/usage/v7/checkbox/basic/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonCheckbox } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonCheckbox>I agree to the terms and conditions</IonCheckbox>
-  );
+  return <IonCheckbox>I agree to the terms and conditions</IonCheckbox>;
 }
 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
index 9bc17fdb9ea..fc8c1ff781f 100644
--- a/static/usage/v7/checkbox/basic/vue.md
+++ b/static/usage/v7/checkbox/basic/vue.md
@@ -8,7 +8,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonCheckbox }
+    components: { IonCheckbox },
   });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/indeterminate/demo.html b/static/usage/v7/checkbox/indeterminate/demo.html
index d04574e0499..26df51a9de1 100644
--- a/static/usage/v7/checkbox/indeterminate/demo.html
+++ b/static/usage/v7/checkbox/indeterminate/demo.html
@@ -1,24 +1,22 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-checkbox indeterminate="true">Indeterminate checkbox</ion-checkbox>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-checkbox indeterminate="true">Indeterminate checkbox</ion-checkbox>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/checkbox/indeterminate/react.md b/static/usage/v7/checkbox/indeterminate/react.md
index 117af56bc35..9cfba0ca72b 100644
--- a/static/usage/v7/checkbox/indeterminate/react.md
+++ b/static/usage/v7/checkbox/indeterminate/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonCheckbox } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonCheckbox indeterminate={true}>Indeterminate checkbox</IonCheckbox>
-  );
+  return <IonCheckbox indeterminate={true}>Indeterminate checkbox</IonCheckbox>;
 }
 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
index 5d08480d9a3..ff87a637bd6 100644
--- a/static/usage/v7/checkbox/indeterminate/vue.md
+++ b/static/usage/v7/checkbox/indeterminate/vue.md
@@ -8,7 +8,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonCheckbox }
+    components: { IonCheckbox },
   });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular.md
index f253722afec..9205434ceaa 100644
--- a/static/usage/v7/checkbox/justify/angular.md
+++ b/static/usage/v7/checkbox/justify/angular.md
@@ -3,11 +3,11 @@
   <ion-item>
     <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
   </ion-item>
-  
+
   <ion-item>
     <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
   </ion-item>
-  
+
   <ion-item>
     <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
   </ion-item>
diff --git a/static/usage/v7/checkbox/justify/demo.html b/static/usage/v7/checkbox/justify/demo.html
index 06f66515f71..de3059c969c 100644
--- a/static/usage/v7/checkbox/justify/demo.html
+++ b/static/usage/v7/checkbox/justify/demo.html
@@ -1,21 +1,20 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
   <body>
     <ion-app>
       <ion-content>
diff --git a/static/usage/v7/checkbox/justify/javascript.md b/static/usage/v7/checkbox/justify/javascript.md
index f253722afec..9205434ceaa 100644
--- a/static/usage/v7/checkbox/justify/javascript.md
+++ b/static/usage/v7/checkbox/justify/javascript.md
@@ -3,11 +3,11 @@
   <ion-item>
     <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
   </ion-item>
-  
+
   <ion-item>
     <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
   </ion-item>
-  
+
   <ion-item>
     <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
   </ion-item>
diff --git a/static/usage/v7/checkbox/justify/react.md b/static/usage/v7/checkbox/justify/react.md
index fd92e9f1fa0..667449c7808 100644
--- a/static/usage/v7/checkbox/justify/react.md
+++ b/static/usage/v7/checkbox/justify/react.md
@@ -8,11 +8,11 @@ function Example() {
       <IonItem>
         <IonCheckbox justify="start">Packed at the Start of Line</IonCheckbox>
       </IonItem>
-      
+
       <IonItem>
         <IonCheckbox justify="end">Packed at the End of Line</IonCheckbox>
       </IonItem>
-      
+
       <IonItem>
         <IonCheckbox justify="space-between">Space Between Label and Control</IonCheckbox>
       </IonItem>
diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md
index 5659a826bc6..ed34f0dcdc7 100644
--- a/static/usage/v7/checkbox/justify/vue.md
+++ b/static/usage/v7/checkbox/justify/vue.md
@@ -4,11 +4,11 @@
     <ion-item>
       <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
     </ion-item>
-    
+
     <ion-item>
       <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
     </ion-item>
-    
+
     <ion-item>
       <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
     </ion-item>
diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html
index eb11903d1eb..68f4256f4c1 100644
--- a/static/usage/v7/checkbox/label-placement/demo.html
+++ b/static/usage/v7/checkbox/label-placement/demo.html
@@ -1,34 +1,32 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div>
+            <ion-checkbox label-placement="start">Label at the Start</ion-checkbox>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div>
-          <ion-checkbox label-placement="start">Label at the Start</ion-checkbox>
+            <br />
 
-          <br />
+            <ion-checkbox label-placement="end">Label at the End</ion-checkbox>
 
-          <ion-checkbox label-placement="end">Label at the End</ion-checkbox>
+            <br />
 
-          <br />
-
-          <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+            <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md
index 42520178b60..7c9bf728131 100644
--- a/static/usage/v7/checkbox/label-placement/react.md
+++ b/static/usage/v7/checkbox/label-placement/react.md
@@ -6,13 +6,13 @@ function Example() {
   return (
     <>
       <IonCheckbox labelPlacement="start">Label at the Start</IonCheckbox>
-      
+
       <br />
-      
+
       <IonCheckbox labelPlacement="end">Label at the End</IonCheckbox>
-      
+
       <br />
-      
+
       <IonCheckbox labelPlacement="fixed">Fixed Width Label</IonCheckbox>
     </>
   );
diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
index 31697dd3694..942149628cd 100644
--- a/static/usage/v7/checkbox/label-placement/vue.md
+++ b/static/usage/v7/checkbox/label-placement/vue.md
@@ -1,13 +1,13 @@
 ```html
 <template>
   <ion-checkbox label-placement="start">Label at the Start</ion-checkbox>
-  
+
   <br />
-  
+
   <ion-checkbox label-placement="end">Label at the End</ion-checkbox>
-  
+
   <br />
-  
+
   <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
 </template>
 
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
index f5f63bf8c22..5889591fd18 100644
--- 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
@@ -8,4 +8,4 @@ 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
index 29d3d419b61..ba23decbdba 100644
--- 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
@@ -1,3 +1,3 @@
 ```html
 <ion-checkbox>Themed checkbox</ion-checkbox>
-```
\ 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
index 63c8660d87d..b2188d8bb60 100644
--- a/static/usage/v7/checkbox/theming/css-properties/demo.html
+++ b/static/usage/v7/checkbox/theming/css-properties/demo.html
@@ -1,35 +1,33 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-checkbox {
+        --size: 32px;
+        --checkbox-background-checked: #6815ec;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-checkbox {
-      --size: 32px;
-      --checkbox-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-checkbox>Themed checkbox</ion-checkbox>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+      ion-checkbox::part(container) {
+        border-radius: 6px;
+        border: 2px solid #6815ec;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-checkbox>Themed checkbox</ion-checkbox>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/checkbox/theming/css-properties/javascript.md b/static/usage/v7/checkbox/theming/css-properties/javascript.md
index a247dee9a04..90a415bf906 100644
--- a/static/usage/v7/checkbox/theming/css-properties/javascript.md
+++ b/static/usage/v7/checkbox/theming/css-properties/javascript.md
@@ -6,7 +6,7 @@
     --size: 32px;
     --checkbox-background-checked: #6815ec;
   }
-  
+
   ion-checkbox::part(container) {
     border-radius: 6px;
     border: 2px solid #6815ec;
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
index f5f63bf8c22..5889591fd18 100644
--- a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
@@ -8,4 +8,4 @@ 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
index 2fb46fb7ba5..8408e5825f2 100644
--- a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
@@ -5,9 +5,7 @@ import { IonCheckbox } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return (
-    <IonCheckbox>Themed checkbox</IonCheckbox>
-  );
+  return <IonCheckbox>Themed checkbox</IonCheckbox>;
 }
 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
index 7c4f5fd698b..802cfa40b25 100644
--- a/static/usage/v7/checkbox/theming/css-properties/vue.md
+++ b/static/usage/v7/checkbox/theming/css-properties/vue.md
@@ -8,7 +8,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonCheckbox }
+    components: { IonCheckbox },
   });
 </script>
 
@@ -17,7 +17,7 @@
     --size: 32px;
     --checkbox-background-checked: #6815ec;
   }
-  
+
   ion-checkbox::part(container) {
     border-radius: 6px;
     border: 2px solid #6815ec;
diff --git a/static/usage/v7/chip/basic/demo.html b/static/usage/v7/chip/basic/demo.html
index 7bdbe50277e..6e90d824652 100644
--- a/static/usage/v7/chip/basic/demo.html
+++ b/static/usage/v7/chip/basic/demo.html
@@ -1,27 +1,24 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/chip/slots/demo.html b/static/usage/v7/chip/slots/demo.html
index 428f38a56b3..378d7313110 100644
--- a/static/usage/v7/chip/slots/demo.html
+++ b/static/usage/v7/chip/slots/demo.html
@@ -1,37 +1,34 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <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>
 
-</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
+          <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/v7/chip/theming/colors/demo.html b/static/usage/v7/chip/theming/colors/demo.html
index f037cfb4eb3..62e1584bd2f 100644
--- a/static/usage/v7/chip/theming/colors/demo.html
+++ b/static/usage/v7/chip/theming/colors/demo.html
@@ -1,45 +1,43 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .flex-items {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        max-width: 440px;
+      }
+    </style>
+  </head>
 
-  <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>
+  <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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/chip/theming/css-properties/demo.html b/static/usage/v7/chip/theming/css-properties/demo.html
index 3310b65a8cb..31789181fc1 100644
--- a/static/usage/v7/chip/theming/css-properties/demo.html
+++ b/static/usage/v7/chip/theming/css-properties/demo.html
@@ -1,32 +1,29 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-chip {
+        --background: #00213f;
+        --color: #adefd1;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/content/basic/demo.html b/static/usage/v7/content/basic/demo.html
index c5aca89699d..b0ba1a035bb 100644
--- a/static/usage/v7/content/basic/demo.html
+++ b/static/usage/v7/content/basic/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+        <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/v7/content/fixed/angular.md b/static/usage/v7/content/fixed/angular.md
index 178d8338f25..82cb3007125 100644
--- a/static/usage/v7/content/fixed/angular.md
+++ b/static/usage/v7/content/fixed/angular.md
@@ -5,10 +5,50 @@
   <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>
+  <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
index e5931e4d94f..1146da9a4b1 100644
--- a/static/usage/v7/content/fixed/angular/example_component_css.md
+++ b/static/usage/v7/content/fixed/angular/example_component_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-button[slot="fixed"] {
+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
index 178d8338f25..82cb3007125 100644
--- a/static/usage/v7/content/fixed/angular/example_component_html.md
+++ b/static/usage/v7/content/fixed/angular/example_component_html.md
@@ -5,10 +5,50 @@
   <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>
+  <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
index 7503103ea39..cd13bc4d34c 100644
--- a/static/usage/v7/content/fixed/demo.html
+++ b/static/usage/v7/content/fixed/demo.html
@@ -1,68 +1,76 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-button[slot='fixed'] {
+        top: 50%;
+        right: 20px;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
 
-      <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
+        <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/v7/content/fixed/javascript.md b/static/usage/v7/content/fixed/javascript.md
index 2a577f1d76a..8613ca29a0c 100644
--- a/static/usage/v7/content/fixed/javascript.md
+++ b/static/usage/v7/content/fixed/javascript.md
@@ -5,15 +5,55 @@
   <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>
+  <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"] {
+  ion-button[slot='fixed'] {
     top: 50%;
     right: 20px;
   }
diff --git a/static/usage/v7/content/fixed/react.md b/static/usage/v7/content/fixed/react.md
index d8e115e5491..55d5e1b9362 100644
--- a/static/usage/v7/content/fixed/react.md
+++ b/static/usage/v7/content/fixed/react.md
@@ -10,11 +10,51 @@ function Example() {
       <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>
+      <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>
   );
 }
diff --git a/static/usage/v7/content/fixed/react/main_css.md b/static/usage/v7/content/fixed/react/main_css.md
index e5931e4d94f..1146da9a4b1 100644
--- a/static/usage/v7/content/fixed/react/main_css.md
+++ b/static/usage/v7/content/fixed/react/main_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-button[slot="fixed"] {
+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
index 542f79deeb8..f81c3d02949 100644
--- a/static/usage/v7/content/fixed/react/main_tsx.md
+++ b/static/usage/v7/content/fixed/react/main_tsx.md
@@ -12,11 +12,51 @@ function Example() {
       <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>
+      <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>
   );
 }
diff --git a/static/usage/v7/content/fixed/vue.md b/static/usage/v7/content/fixed/vue.md
index 2c44fd0b289..31d3f7cd33c 100644
--- a/static/usage/v7/content/fixed/vue.md
+++ b/static/usage/v7/content/fixed/vue.md
@@ -6,11 +6,51 @@
     <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>
+    <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>
 
@@ -24,7 +64,7 @@
 </script>
 
 <style scoped>
-  ion-button[slot="fixed"] {
+  ion-button[slot='fixed'] {
     top: 50%;
     right: 20px;
   }
diff --git a/static/usage/v7/content/fullscreen/angular/example_component_css.md b/static/usage/v7/content/fullscreen/angular/example_component_css.md
index a62d625ae0a..69fa48ad49e 100644
--- a/static/usage/v7/content/fullscreen/angular/example_component_css.md
+++ b/static/usage/v7/content/fullscreen/angular/example_component_css.md
@@ -1,5 +1,5 @@
 ```css
 ion-toolbar {
-  --opacity: .5
+  --opacity: 0.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
index c5cf5a10dd9..753f938b914 100644
--- a/static/usage/v7/content/fullscreen/angular/example_component_html.md
+++ b/static/usage/v7/content/fullscreen/angular/example_component_html.md
@@ -1,25 +1,61 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <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>
+  <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-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
index ff8431d4b08..aa931cab1ae 100644
--- a/static/usage/v7/content/fullscreen/demo.html
+++ b/static/usage/v7/content/fullscreen/demo.html
@@ -1,78 +1,82 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-toolbar {
+        --opacity: 0.5;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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
+        <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/v7/content/fullscreen/javascript.md b/static/usage/v7/content/fullscreen/javascript.md
index f6011fa9b88..2fb4c68b16c 100644
--- a/static/usage/v7/content/fullscreen/javascript.md
+++ b/static/usage/v7/content/fullscreen/javascript.md
@@ -1,31 +1,67 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <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>
+  <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-title> Footer </ion-title>
   </ion-toolbar>
 </ion-footer>
 
 <style>
   ion-toolbar {
-    --opacity: .5
+    --opacity: 0.5;
   }
 </style>
 ```
diff --git a/static/usage/v7/content/fullscreen/react/main_css.md b/static/usage/v7/content/fullscreen/react/main_css.md
index a62d625ae0a..69fa48ad49e 100644
--- a/static/usage/v7/content/fullscreen/react/main_css.md
+++ b/static/usage/v7/content/fullscreen/react/main_css.md
@@ -1,5 +1,5 @@
 ```css
 ion-toolbar {
-  --opacity: .5
+  --opacity: 0.5;
 }
 ```
diff --git a/static/usage/v7/content/fullscreen/react/main_tsx.md b/static/usage/v7/content/fullscreen/react/main_tsx.md
index ca324631897..7302c484489 100644
--- a/static/usage/v7/content/fullscreen/react/main_tsx.md
+++ b/static/usage/v7/content/fullscreen/react/main_tsx.md
@@ -9,25 +9,61 @@ function Example() {
     <>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>
-            Header
-          </IonTitle>
+          <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>
+        <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>
+          <IonTitle>Footer</IonTitle>
         </IonToolbar>
       </IonFooter>
     </>
diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md
index e4bd0c3a59f..3de93600da7 100644
--- a/static/usage/v7/content/fullscreen/vue.md
+++ b/static/usage/v7/content/fullscreen/vue.md
@@ -2,25 +2,61 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>
-        Header
-      </ion-title>
+      <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>
+    <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-title> Footer </ion-title>
     </ion-toolbar>
   </ion-footer>
 </template>
@@ -36,7 +72,7 @@
 
 <style scoped>
   ion-toolbar {
-    --opacity: .5
+    --opacity: 0.5;
   }
 </style>
 ```
diff --git a/static/usage/v7/content/header-footer/angular.md b/static/usage/v7/content/header-footer/angular.md
index 4a177d1d58f..35a9aadc4c1 100644
--- a/static/usage/v7/content/header-footer/angular.md
+++ b/static/usage/v7/content/header-footer/angular.md
@@ -1,9 +1,7 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <ion-title> Header </ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
@@ -18,9 +16,7 @@
 </ion-content>
 <ion-footer>
   <ion-toolbar>
-    <ion-title>
-      Footer
-    </ion-title>
+    <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
index c94bb1f5b30..e5770d1488d 100644
--- a/static/usage/v7/content/header-footer/demo.html
+++ b/static/usage/v7/content/header-footer/demo.html
@@ -1,43 +1,37 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+        <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/v7/content/header-footer/javascript.md b/static/usage/v7/content/header-footer/javascript.md
index 4a177d1d58f..35a9aadc4c1 100644
--- a/static/usage/v7/content/header-footer/javascript.md
+++ b/static/usage/v7/content/header-footer/javascript.md
@@ -1,9 +1,7 @@
 ```html
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      Header
-    </ion-title>
+    <ion-title> Header </ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
@@ -18,9 +16,7 @@
 </ion-content>
 <ion-footer>
   <ion-toolbar>
-    <ion-title>
-      Footer
-    </ion-title>
+    <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
index 4ffff834f2a..e075e96cd81 100644
--- a/static/usage/v7/content/header-footer/react.md
+++ b/static/usage/v7/content/header-footer/react.md
@@ -7,9 +7,7 @@ function Example() {
     <>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>
-            Header
-          </IonTitle>
+          <IonTitle>Header</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent className="ion-padding">
@@ -24,9 +22,7 @@ function Example() {
       </IonContent>
       <IonFooter>
         <IonToolbar>
-          <IonTitle>
-            Footer
-          </IonTitle>
+          <IonTitle>Footer</IonTitle>
         </IonToolbar>
       </IonFooter>
     </>
diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md
index 8bd052a6460..dc914aee8f5 100644
--- a/static/usage/v7/content/header-footer/vue.md
+++ b/static/usage/v7/content/header-footer/vue.md
@@ -2,9 +2,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>
-        Header
-      </ion-title>
+      <ion-title> Header </ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
@@ -19,9 +17,7 @@
   </ion-content>
   <ion-footer>
     <ion-toolbar>
-      <ion-title>
-        Footer
-      </ion-title>
+      <ion-title> Footer </ion-title>
     </ion-toolbar>
   </ion-footer>
 </template>
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
index a1c3aac558f..4a66edad40a 100644
--- a/static/usage/v7/content/scroll-events/angular/example_component_html.md
+++ b/static/usage/v7/content/scroll-events/angular/example_component_html.md
@@ -6,13 +6,54 @@
   (ionScrollStart)="handleScrollStart()"
   (ionScroll)="handleScroll($any($event))"
   (ionScrollEnd)="handleScrollEnd()"
-  class="ion-padding">
+  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>
+  <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/demo.html b/static/usage/v7/content/scroll-events/demo.html
index 7688ad4afbc..956aeb3079c 100644
--- a/static/usage/v7/content/scroll-events/demo.html
+++ b/static/usage/v7/content/scroll-events/demo.html
@@ -1,69 +1,77 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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>
 
-      <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;
 
-  <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
+      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/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md
index 5cc4e537dd6..ed54f080780 100644
--- a/static/usage/v7/content/scroll-events/javascript.md
+++ b/static/usage/v7/content/scroll-events/javascript.md
@@ -2,11 +2,51 @@
 <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>
+  <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>
diff --git a/static/usage/v7/content/scroll-events/react.md b/static/usage/v7/content/scroll-events/react.md
index ce8ced69807..92a5d4d3bc7 100644
--- a/static/usage/v7/content/scroll-events/react.md
+++ b/static/usage/v7/content/scroll-events/react.md
@@ -22,14 +22,55 @@ function Example() {
       onIonScrollStart={handleScrollStart}
       onIonScroll={handleScroll}
       onIonScrollEnd={handleScrollEnd}
-      class="ion-padding">
+      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>
+      <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>
   );
 }
diff --git a/static/usage/v7/content/scroll-events/vue.md b/static/usage/v7/content/scroll-events/vue.md
index 2afdcf26682..ff6e4a17102 100644
--- a/static/usage/v7/content/scroll-events/vue.md
+++ b/static/usage/v7/content/scroll-events/vue.md
@@ -6,14 +6,55 @@
     @ionScrollStart="handleScrollStart()"
     @ionScroll="handleScroll($event)"
     @ionScrollEnd="handleScrollEnd()"
-    class="ion-padding">
+    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>
+    <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>
 
@@ -32,8 +73,8 @@
       },
       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
index ffa8c913e3e..e585b97e78d 100644
--- a/static/usage/v7/content/scroll-methods/angular/example_component_html.md
+++ b/static/usage/v7/content/scroll-methods/angular/example_component_html.md
@@ -4,11 +4,51 @@
 
   <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>
+  <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/demo.html b/static/usage/v7/content/scroll-methods/demo.html
index 3b864d3e980..86cf115f403 100644
--- a/static/usage/v7/content/scroll-methods/demo.html
+++ b/static/usage/v7/content/scroll-methods/demo.html
@@ -1,78 +1,86 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding">
+        <h1>Click on the buttons to scroll the content.</h1>
 
-<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>
 
-      <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>
 
-      <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>
 
-      <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
-    </ion-content>
-  </ion-app>
+    <script>
+      const content = document.querySelector('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 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
+      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/v7/content/scroll-methods/javascript.md b/static/usage/v7/content/scroll-methods/javascript.md
index b8f3bb1e13e..a53fbc7767b 100644
--- a/static/usage/v7/content/scroll-methods/javascript.md
+++ b/static/usage/v7/content/scroll-methods/javascript.md
@@ -4,11 +4,51 @@
 
   <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>
+  <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>
diff --git a/static/usage/v7/content/scroll-methods/react.md b/static/usage/v7/content/scroll-methods/react.md
index 9526a8884a4..1d2d105e984 100644
--- a/static/usage/v7/content/scroll-methods/react.md
+++ b/static/usage/v7/content/scroll-methods/react.md
@@ -21,15 +21,59 @@ function Example() {
     <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>
+      <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>
+      <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>
+      <IonButton expand="block" onClick={scrollToTop}>
+        Scroll to Top
+      </IonButton>
     </IonContent>
   );
 }
diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md
index c3e63abb721..5ac6e8ee1fc 100644
--- a/static/usage/v7/content/scroll-methods/vue.md
+++ b/static/usage/v7/content/scroll-methods/vue.md
@@ -5,11 +5,51 @@
 
     <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>
+    <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>
@@ -32,7 +72,7 @@
         // goes to the top instead of instantly
         this.$refs.content.$el.scrollToTop(500);
       },
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/content/theming/colors/demo.html b/static/usage/v7/content/theming/colors/demo.html
index bdf97b549bb..9c660f9d3f4 100644
--- a/static/usage/v7/content/theming/colors/demo.html
+++ b/static/usage/v7/content/theming/colors/demo.html
@@ -1,69 +1,67 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-wrap: wrap;
+        align-content: center;
+      }
 
-  <style>
-    .container {
-      flex-wrap: wrap;
-      align-content: center;
-    }
+      ion-content {
+        flex: 1 1 33%;
+        height: 250px;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/content/theming/css-properties/demo.html b/static/usage/v7/content/theming/css-properties/demo.html
index c9bfa0dfdc6..b48c3bd51fd 100644
--- a/static/usage/v7/content/theming/css-properties/demo.html
+++ b/static/usage/v7/content/theming/css-properties/demo.html
@@ -1,36 +1,34 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-content {
+        --background: #d31373;
+        --color: #fff;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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
+        <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/v7/content/theming/css-shadow-parts/demo.html b/static/usage/v7/content/theming/css-shadow-parts/demo.html
index 3bc6859c66f..b840581bf3e 100644
--- a/static/usage/v7/content/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/content/theming/css-shadow-parts/demo.html
@@ -1,39 +1,37 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-content::part(background) {
+        background: #d31373;
+      }
 
-  <style>
-    ion-content::part(background) {
-      background: #d31373;
-    }
+      ion-content::part(scroll) {
+        color: #fff;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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
+        <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/v7/datetime-button/basic/demo.html b/static/usage/v7/datetime-button/basic/demo.html
index 1e7cce74cae..346ac369005 100644
--- a/static/usage/v7/datetime-button/basic/demo.html
+++ b/static/usage/v7/datetime-button/basic/demo.html
@@ -1,33 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-modal {
+        --border-radius: 8px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+          <ion-modal>
+            <ion-datetime id="datetime"></ion-datetime>
+          </ion-modal>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime-button/basic/react.md b/static/usage/v7/datetime-button/basic/react.md
index 90eaaba82af..62529cdb75f 100644
--- a/static/usage/v7/datetime-button/basic/react.md
+++ b/static/usage/v7/datetime-button/basic/react.md
@@ -5,7 +5,7 @@ function Example() {
   return (
     <>
       <IonDatetimeButton datetime="datetime"></IonDatetimeButton>
-      
+
       <IonModal keepContentsMounted={true}>
         <IonDatetime id="datetime"></IonDatetime>
       </IonModal>
diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md
index 1272d768b88..a595c27e409 100644
--- a/static/usage/v7/datetime-button/basic/vue.md
+++ b/static/usage/v7/datetime-button/basic/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-datetime-button datetime="datetime"></ion-datetime-button>
-  
+
   <ion-modal :keep-contents-mounted="true">
     <ion-datetime id="datetime"></ion-datetime>
   </ion-modal>
diff --git a/static/usage/v7/datetime/basic/demo.html b/static/usage/v7/datetime/basic/demo.html
index 9d58e952ed0..820f002031d 100644
--- a/static/usage/v7/datetime/basic/demo.html
+++ b/static/usage/v7/datetime/basic/demo.html
@@ -1,33 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-datetime {
-      width: 350px;
-    }
-
-    .container {
-      align-items: flex-start;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-datetime></ion-datetime>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+      .container {
+        align-items: flex-start;
+      }
+    </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/v7/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
index f4dd937826d..f9d6b66b986 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
@@ -1,8 +1,3 @@
 ```html
-<ion-datetime
-  [showDefaultButtons]="true"
-  doneText="All set"
-  cancelText="Never mind"
->
-</ion-datetime>
+<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
index b0a5a405fe7..eeae254ce63 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
@@ -1,30 +1,28 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+        min-height: 400px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
index de572d57a2f..addbae86356 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  show-default-buttons="true"
-  done-text="All set"
-  cancel-text="Never mind"
-></ion-datetime>
+<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
index 25a59a34170..8806828082b 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/react.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/react.md
@@ -2,14 +2,7 @@
 import React, { useRef } from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime
-      showDefaultButtons={true}
-      doneText="All set"
-      cancelText="Never mind"
-    >
-    </IonDatetime>
-  );
+  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
index 2afdb6fe9a8..fddaa53fac1 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    :show-default-buttons="true"
-    done-text="All set"
-    cancel-text="Never mind"
-  ></ion-datetime>
+  <ion-datetime :show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
 </template>
 
 <script lang="ts">
@@ -12,7 +8,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonDatetime }
+    components: { IonDatetime },
   });
 </script>
 ```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
index 5d82337b791..31cd963a9a7 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
@@ -1,40 +1,38 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+        min-height: 400px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/react.md b/static/usage/v7/datetime/buttons/customizing-buttons/react.md
index 6c47f3d800c..20435641f42 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/react.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/react.md
@@ -5,19 +5,25 @@ 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>
+        <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>
   );
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
index 87d19a3754b..4d1408b7ab4 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
@@ -20,8 +20,8 @@
       const reset = () => datetime.value.$el.reset();
       const cancel = () => datetime.value.$el.cancel();
       const confirm = () => datetime.value.$el.confirm();
-      return { datetime, reset, cancel, confirm }
-    }
+      return { datetime, reset, cancel, confirm };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
index 4a50281c218..5e855fc3b9e 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
@@ -1,30 +1,28 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+        min-height: 400px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
index 4faa415f624..9409dc13911 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime showDefaultButtons={true}></IonDatetime>
-  );
+  return <IonDatetime showDefaultButtons={true}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/demo.html b/static/usage/v7/datetime/date-constraints/advanced/demo.html
index 5f85f08fd26..1899e3dcb19 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/demo.html
+++ b/static/usage/v7/datetime/date-constraints/advanced/demo.html
@@ -1,43 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
-  <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();
 
-  <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
+        /**
+         * Date will be enabled if it is not
+         * Sunday or Saturday
+         */
+        return utcDay !== 0 && utcDay !== 6;
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/date-constraints/advanced/javascript.md b/static/usage/v7/datetime/date-constraints/advanced/javascript.md
index b14ba47ffbe..60a991725a0 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/javascript.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/javascript.md
@@ -12,6 +12,6 @@
      * 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
index 925f97f34cc..ece5aef6c9e 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/react.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/react.md
@@ -5,17 +5,15 @@ 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>
-  );
+  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
index 3dd1a8dc526..afd310f0867 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/vue.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/vue.md
@@ -13,16 +13,16 @@
       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 }
-    }
+      };
+
+      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
index 58583fe712d..f37914bd457 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/angular.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/angular.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  value="2022-04-21T00:00:00"
-  min="2022-03-01T00:00:00"
-  max="2022-05-31T23:59:59"
-></ion-datetime>
+<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
index 6965a74db91..4c9e16d3c15 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/demo.html
+++ b/static/usage/v7/datetime/date-constraints/max-min/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/date-constraints/max-min/javascript.md b/static/usage/v7/datetime/date-constraints/max-min/javascript.md
index 58583fe712d..f37914bd457 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/javascript.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/javascript.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  value="2022-04-21T00:00:00"
-  min="2022-03-01T00:00:00"
-  max="2022-05-31T23:59:59"
-></ion-datetime>
+<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
index 356cf7b117a..e2493659c23 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/react.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/react.md
@@ -2,13 +2,7 @@
 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>
-  );
+  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
index a0d236a8604..32fec242e0a 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/vue.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    value="2022-04-21T00:00:00"
-    min="2022-03-01T00:00:00"
-    max="2022-05-31T23:59:59"
-  ></ion-datetime>
+  <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">
diff --git a/static/usage/v7/datetime/date-constraints/values/angular.md b/static/usage/v7/datetime/date-constraints/values/angular.md
index de86842994a..ab31d1fad20 100644
--- a/static/usage/v7/datetime/date-constraints/values/angular.md
+++ b/static/usage/v7/datetime/date-constraints/values/angular.md
@@ -1,6 +1,3 @@
 ```html
-<ion-datetime
-  minuteValues="0,15,30,45"
-  dayValues="5,10,15,20,25,30"
-></ion-datetime>
+<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
index 3c341df059f..0881623db7e 100644
--- a/static/usage/v7/datetime/date-constraints/values/demo.html
+++ b/static/usage/v7/datetime/date-constraints/values/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/date-constraints/values/javascript.md b/static/usage/v7/datetime/date-constraints/values/javascript.md
index 5081a44f6f5..670f19ca6ea 100644
--- a/static/usage/v7/datetime/date-constraints/values/javascript.md
+++ b/static/usage/v7/datetime/date-constraints/values/javascript.md
@@ -1,6 +1,3 @@
 ```html
-<ion-datetime
-  minute-values="0,15,30,45"
-  day-values="5,10,15,20,25,30"
-></ion-datetime>
+<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
index 38328d17045..74516943d6e 100644
--- a/static/usage/v7/datetime/date-constraints/values/react.md
+++ b/static/usage/v7/datetime/date-constraints/values/react.md
@@ -2,12 +2,7 @@
 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>
-  );
+  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
index 743cbb9e541..cf1d0eaaa89 100644
--- a/static/usage/v7/datetime/date-constraints/values/vue.md
+++ b/static/usage/v7/datetime/date-constraints/values/vue.md
@@ -1,9 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    minute-values="0,15,30,45"
-    day-values="5,10,15,20,25,30"
-  ></ion-datetime>
+  <ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
index 46de9b8c9a6..25c15ca64c7 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  presentation="date"
-  value="2023-01-01"
-  [highlightedDates]="highlightedDates"
-></ion-datetime>
+<ion-datetime presentation="date" value="2023-01-01" [highlightedDates]="highlightedDates"></ion-datetime>
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
index 4b46ab4c705..4ca93b85f44 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -25,8 +25,8 @@ export class ExampleComponent {
     {
       date: '2023-01-23',
       textColor: 'rgb(68, 10, 184)',
-      backgroundColor: 'rgb(211, 200, 229)'
-    }
+      backgroundColor: 'rgb(211, 200, 229)',
+    },
   ];
 }
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
index 428678d3dbe..f6a1cd46143 100644
--- a/static/usage/v7/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/array/demo.html
@@ -1,55 +1,53 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-datetime {
-      width: 350px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const datetime = document.querySelector('ion-datetime');
-    datetime.highlightedDates = [
-      {
-        date: '2023-01-05',
-        textColor: '#800080',
-        backgroundColor: '#ffc0cb',
-      },
-      {
-        date: '2023-01-10',
-        textColor: '#09721b',
-        backgroundColor: '#c8e5d0',
-      },
-      {
-        date: '2023-01-20',
-        textColor: 'var(--ion-color-secondary-contrast)',
-        backgroundColor: 'var(--ion-color-secondary)',
-      },
-      {
-        date: '2023-01-23',
-        textColor: 'rgb(68, 10, 184)',
-        backgroundColor: 'rgb(211, 200, 229)'
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
       }
-    ];
-  </script>
-</body>
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
 
-</html>
\ No newline at end of file
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.highlightedDates = [
+        {
+          date: '2023-01-05',
+          textColor: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          textColor: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
+        },
+        {
+          date: '2023-01-23',
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)',
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md
index 5a702fbfab1..a27ff554ee2 100644
--- a/static/usage/v7/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md
@@ -22,8 +22,8 @@
     {
       date: '2023-01-23',
       textColor: 'rgb(68, 10, 184)',
-      backgroundColor: 'rgb(211, 200, 229)'
-    }
+      backgroundColor: 'rgb(211, 200, 229)',
+    },
   ];
 </script>
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/array/react.md b/static/usage/v7/datetime/highlightedDates/array/react.md
index a9ef5c776d9..4d8d9258f63 100644
--- a/static/usage/v7/datetime/highlightedDates/array/react.md
+++ b/static/usage/v7/datetime/highlightedDates/array/react.md
@@ -25,8 +25,8 @@ function Example() {
         {
           date: '2023-01-23',
           textColor: 'rgb(68, 10, 184)',
-          backgroundColor: 'rgb(211, 200, 229)'
-        }
+          backgroundColor: 'rgb(211, 200, 229)',
+        },
       ]}
     ></IonDatetime>
   );
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
index 62dbec39055..408f58f2833 100644
--- a/static/usage/v7/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    presentation="date"
-    value="2023-01-01"
-    :highlighted-dates="highlightedDates"
-  ></ion-datetime>
+  <ion-datetime presentation="date" value="2023-01-01" :highlighted-dates="highlightedDates"></ion-datetime>
 </template>
 
 <script lang="ts">
@@ -33,12 +29,12 @@
         {
           date: '2023-01-23',
           textColor: 'rgb(68, 10, 184)',
-          backgroundColor: 'rgb(211, 200, 229)'
-        }
+          backgroundColor: 'rgb(211, 200, 229)',
+        },
       ];
-      
-      return { highlightedDates }
-    }
+
+      return { highlightedDates };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
index 7186ae3cc64..60f9c700d05 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -10,14 +10,14 @@ export class ExampleComponent {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
-    if(utcDay % 5 === 0) {
+    if (utcDay % 5 === 0) {
       return {
         textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
-    if(utcDay % 3 === 0) {
+    if (utcDay % 3 === 0) {
       return {
         textColor: 'var(--ion-color-secondary-contrast)',
         backgroundColor: 'var(--ion-color-secondary)',
diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html
index af82c083c02..7e8dd58e36a 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html
@@ -1,53 +1,51 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
 
-  <script>
-    const datetime = document.querySelector('ion-datetime');
-    datetime.highlightedDates = (isoString) => {
-      const date = new Date(isoString);
-      const utcDay = date.getUTCDate();
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.highlightedDates = (isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
 
-      if(utcDay % 5 === 0) {
-        return {
-          textColor: '#800080',
-          backgroundColor: '#ffc0cb',
-        };
-      }
-
-      if(utcDay % 3 === 0) {
-        return {
-          textColor: 'var(--ion-color-secondary-contrast)',
-          backgroundColor: 'var(--ion-color-secondary)',
-        };
-      }
+        if (utcDay % 5 === 0) {
+          return {
+            textColor: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
 
-      return undefined;
-    };
-  </script>
-</body>
+        if (utcDay % 3 === 0) {
+          return {
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
+          };
+        }
 
-</html>
\ No newline at end of file
+        return undefined;
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
index 270967cccd8..9041810960b 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
@@ -7,14 +7,14 @@
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
-    if(utcDay % 5 === 0) {
+    if (utcDay % 5 === 0) {
       return {
         textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
-    if(utcDay % 3 === 0) {
+    if (utcDay % 3 === 0) {
       return {
         textColor: 'var(--ion-color-secondary-contrast)',
         backgroundColor: 'var(--ion-color-secondary)',
diff --git a/static/usage/v7/datetime/highlightedDates/callback/react.md b/static/usage/v7/datetime/highlightedDates/callback/react.md
index 6830e55eeff..6543a1366ca 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/react.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/react.md
@@ -9,14 +9,14 @@ function Example() {
         const date = new Date(isoString);
         const utcDay = date.getUTCDate();
 
-        if(utcDay % 5 === 0) {
+        if (utcDay % 5 === 0) {
           return {
             textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
-        if(utcDay % 3 === 0) {
+        if (utcDay % 3 === 0) {
           return {
             textColor: 'var(--ion-color-secondary-contrast)',
             backgroundColor: 'var(--ion-color-secondary)',
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
index 54873e03eaa..e916b2cef1b 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -14,14 +14,14 @@
         const date = new Date(isoString);
         const utcDay = date.getUTCDate();
 
-        if(utcDay % 5 === 0) {
+        if (utcDay % 5 === 0) {
           return {
             textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
-        if(utcDay % 3 === 0) {
+        if (utcDay % 3 === 0) {
           return {
             textColor: 'var(--ion-color-secondary-contrast)',
             backgroundColor: 'var(--ion-color-secondary)',
@@ -31,8 +31,8 @@
         return undefined;
       };
 
-      return { highlightedDates }
-    }
+      return { highlightedDates };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/datetime/localization/custom-locale/demo.html b/static/usage/v7/datetime/localization/custom-locale/demo.html
index dada357f09c..3a888e9fa77 100644
--- a/static/usage/v7/datetime/localization/custom-locale/demo.html
+++ b/static/usage/v7/datetime/localization/custom-locale/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/localization/custom-locale/react.md b/static/usage/v7/datetime/localization/custom-locale/react.md
index 729e42be9b8..f543b588cf4 100644
--- a/static/usage/v7/datetime/localization/custom-locale/react.md
+++ b/static/usage/v7/datetime/localization/custom-locale/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime locale="es-ES"></IonDatetime>
-  );
+  return <IonDatetime locale="es-ES"></IonDatetime>;
 }
 export default Example;
 ```
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
index d1ad1198d0c..3d18ac3b522 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/demo.html
+++ b/static/usage/v7/datetime/localization/first-day-of-week/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/localization/first-day-of-week/react.md b/static/usage/v7/datetime/localization/first-day-of-week/react.md
index d15a99abb10..b39bb91a837 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/react.md
+++ b/static/usage/v7/datetime/localization/first-day-of-week/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime firstDayOfWeek={1}></IonDatetime>
-  );
+  return <IonDatetime firstDayOfWeek={1}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/demo.html b/static/usage/v7/datetime/localization/hour-cycle/demo.html
index 08b5da3eb6a..ca8d2c9a2ff 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/demo.html
+++ b/static/usage/v7/datetime/localization/hour-cycle/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/localization/hour-cycle/react.md b/static/usage/v7/datetime/localization/hour-cycle/react.md
index fc2887e67f8..e05544cd3cc 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/react.md
+++ b/static/usage/v7/datetime/localization/hour-cycle/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime locale="en-GB" hourCycle="h12"></IonDatetime>
-  );
+  return <IonDatetime locale="en-GB" hourCycle="h12"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
index 6e68e123b55..f6102751e52 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/localization/locale-extension-tags/react.md b/static/usage/v7/datetime/localization/locale-extension-tags/react.md
index 227a0261434..d945f768d3a 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/react.md
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime locale="en-GB-u-hc-h12"></IonDatetime>
-  );
+  return <IonDatetime locale="en-GB-u-hc-h12"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/localization/time-label/demo.html b/static/usage/v7/datetime/localization/time-label/demo.html
index 3e7d56c00b3..ad11584169f 100644
--- a/static/usage/v7/datetime/localization/time-label/demo.html
+++ b/static/usage/v7/datetime/localization/time-label/demo.html
@@ -1,31 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/multiple/angular.md b/static/usage/v7/datetime/multiple/angular.md
index 673f5b03e59..e26fe9e931d 100644
--- a/static/usage/v7/datetime/multiple/angular.md
+++ b/static/usage/v7/datetime/multiple/angular.md
@@ -1,7 +1,3 @@
 ```html
-<ion-datetime
-  presentation="date"
-  [multiple]="true"
-  [value]="['2022-06-03', '2022-06-13', '2022-06-29']"
-></ion-datetime>
+<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
index 20aea12dbe5..57d69a33a42 100644
--- a/static/usage/v7/datetime/multiple/demo.html
+++ b/static/usage/v7/datetime/multiple/demo.html
@@ -1,34 +1,32 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+    <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/v7/datetime/multiple/react.md b/static/usage/v7/datetime/multiple/react.md
index edcf933f530..87028027d47 100644
--- a/static/usage/v7/datetime/multiple/react.md
+++ b/static/usage/v7/datetime/multiple/react.md
@@ -6,15 +6,11 @@ function Example() {
   const datetime = useRef<null | HTMLIonDatetimeElement>(null);
 
   useEffect(() => {
-    if(!datetime.current) return;
+    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>;
+  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
index 163831a3d81..837fc7e2f9f 100644
--- a/static/usage/v7/datetime/multiple/vue.md
+++ b/static/usage/v7/datetime/multiple/vue.md
@@ -1,10 +1,6 @@
 ```html
 <template>
-  <ion-datetime
-    presentation="date"
-    :multiple="true"
-    :value="['2022-06-03', '2022-06-13', '2022-06-29']"
-  ></ion-datetime>
+  <ion-datetime presentation="date" :multiple="true" :value="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/datetime/presentation/date/demo.html b/static/usage/v7/datetime/presentation/date/demo.html
index 17d9f95fe97..f8cca1eb012 100644
--- a/static/usage/v7/datetime/presentation/date/demo.html
+++ b/static/usage/v7/datetime/presentation/date/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/presentation/date/react.md b/static/usage/v7/datetime/presentation/date/react.md
index 333aadfb58d..72e24d86874 100644
--- a/static/usage/v7/datetime/presentation/date/react.md
+++ b/static/usage/v7/datetime/presentation/date/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="date"></IonDatetime>
-  );
+  return <IonDatetime presentation="date"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/demo.html b/static/usage/v7/datetime/presentation/month-and-year/demo.html
index 2ea2e639089..32c4db0378c 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/demo.html
+++ b/static/usage/v7/datetime/presentation/month-and-year/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/presentation/month-and-year/react.md b/static/usage/v7/datetime/presentation/month-and-year/react.md
index 346ad116b68..f140c4b09c0 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/react.md
+++ b/static/usage/v7/datetime/presentation/month-and-year/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="month-year"></IonDatetime>
-  );
+  return <IonDatetime presentation="month-year"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/presentation/time/demo.html b/static/usage/v7/datetime/presentation/time/demo.html
index 506c15adb83..015489a4b13 100644
--- a/static/usage/v7/datetime/presentation/time/demo.html
+++ b/static/usage/v7/datetime/presentation/time/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/presentation/time/react.md b/static/usage/v7/datetime/presentation/time/react.md
index 934c3221112..30e0e206fbc 100644
--- a/static/usage/v7/datetime/presentation/time/react.md
+++ b/static/usage/v7/datetime/presentation/time/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="time"></IonDatetime>
-  );
+  return <IonDatetime presentation="time"></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/presentation/wheel/demo.html b/static/usage/v7/datetime/presentation/wheel/demo.html
index 704c463874d..e3642ae3ccc 100644
--- a/static/usage/v7/datetime/presentation/wheel/demo.html
+++ b/static/usage/v7/datetime/presentation/wheel/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/presentation/wheel/react.md b/static/usage/v7/datetime/presentation/wheel/react.md
index 49f231b6966..fc7873b4765 100644
--- a/static/usage/v7/datetime/presentation/wheel/react.md
+++ b/static/usage/v7/datetime/presentation/wheel/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime presentation="date-time" preferWheel={true}></IonDatetime>
-  );
+  return <IonDatetime presentation="date-time" preferWheel={true}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/theming/demo.html
index f78309fe0b5..f2e502cfe56 100644
--- a/static/usage/v7/datetime/theming/demo.html
+++ b/static/usage/v7/datetime/theming/demo.html
@@ -1,78 +1,76 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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-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-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-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;
 
-    ion-datetime {
-      --background: #fff1f2;
-      --background-rgb: 255, 241, 242;
+        width: 350px;
 
-      width: 350px;
+        border-radius: 16px;
+        box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+      }
+    </style>
+  </head>
 
-      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
+  <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/v7/datetime/theming/javascript.md b/static/usage/v7/datetime/theming/javascript.md
index b01585db44e..3da768ccbb4 100644
--- a/static/usage/v7/datetime/theming/javascript.md
+++ b/static/usage/v7/datetime/theming/javascript.md
@@ -4,15 +4,15 @@
 <style>
   :root {
     --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131,24,67;
+    --ion-color-rose-rgb: 131, 24, 67;
     --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255,255,255;
+    --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-text-color-rgb: 136, 19, 55;
+
     --ion-color-step-50: #f9e6e9;
     --ion-color-step-100: #f3dbdf;
     --ion-color-step-150: #edd0d6;
@@ -33,7 +33,7 @@
     --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);
@@ -42,11 +42,11 @@
     --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;
-    
+    --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/react/main_css.md b/static/usage/v7/datetime/theming/react/main_css.md
index 374f851b5ce..dccf6c7d370 100644
--- a/static/usage/v7/datetime/theming/react/main_css.md
+++ b/static/usage/v7/datetime/theming/react/main_css.md
@@ -1,14 +1,14 @@
 ```css
 :root {
   --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131,24,67;
+  --ion-color-rose-rgb: 131, 24, 67;
   --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255,255,255;
+  --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-text-color-rgb: 136, 19, 55;
 
   --ion-color-step-50: #f9e6e9;
   --ion-color-step-100: #f3dbdf;
@@ -42,9 +42,9 @@
 
 ion-datetime {
   --background: #fff1f2;
-  --background-rgb: 255,241,242;
-  
+  --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/vue.md b/static/usage/v7/datetime/theming/vue.md
index 0ba14641daa..32e682cfbc9 100644
--- a/static/usage/v7/datetime/theming/vue.md
+++ b/static/usage/v7/datetime/theming/vue.md
@@ -15,15 +15,15 @@
 <style>
   :root {
     --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131,24,67;
+    --ion-color-rose-rgb: 131, 24, 67;
     --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255,255,255;
+    --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-text-color-rgb: 136, 19, 55;
+
     --ion-color-step-50: #f9e6e9;
     --ion-color-step-100: #f3dbdf;
     --ion-color-step-150: #edd0d6;
@@ -44,7 +44,7 @@
     --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);
@@ -53,11 +53,11 @@
     --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;
-    
+    --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/title/customizing-title/demo.html b/static/usage/v7/datetime/title/customizing-title/demo.html
index c8818884ed2..734766aa361 100644
--- a/static/usage/v7/datetime/title/customizing-title/demo.html
+++ b/static/usage/v7/datetime/title/customizing-title/demo.html
@@ -1,31 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/title/showing-default-title/demo.html b/static/usage/v7/datetime/title/showing-default-title/demo.html
index 64138302db2..83730417b3b 100644
--- a/static/usage/v7/datetime/title/showing-default-title/demo.html
+++ b/static/usage/v7/datetime/title/showing-default-title/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/datetime/title/showing-default-title/react.md b/static/usage/v7/datetime/title/showing-default-title/react.md
index f5a7c681c22..f04d7d55a36 100644
--- a/static/usage/v7/datetime/title/showing-default-title/react.md
+++ b/static/usage/v7/datetime/title/showing-default-title/react.md
@@ -2,9 +2,7 @@
 import React from 'react';
 import { IonDatetime } from '@ionic/react';
 function Example() {
-  return (
-    <IonDatetime showDefaultTitle={true}></IonDatetime>
-  );
+  return <IonDatetime showDefaultTitle={true}></IonDatetime>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/fab/basic/demo.html b/static/usage/v7/fab/basic/demo.html
index 3581f6e15da..882d14b7b1b 100644
--- a/static/usage/v7/fab/basic/demo.html
+++ b/static/usage/v7/fab/basic/demo.html
@@ -1,29 +1,26 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/fab/basic/vue.md b/static/usage/v7/fab/basic/vue.md
index e6b99476bd0..822821e7289 100644
--- a/static/usage/v7/fab/basic/vue.md
+++ b/static/usage/v7/fab/basic/vue.md
@@ -15,8 +15,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add }
-    }
+      return { add };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/fab/button-sizing/demo.html b/static/usage/v7/fab/button-sizing/demo.html
index 486331c856d..98b2b255b4c 100644
--- a/static/usage/v7/fab/button-sizing/demo.html
+++ b/static/usage/v7/fab/button-sizing/demo.html
@@ -1,40 +1,37 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+  <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-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
+            <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/v7/fab/button-sizing/vue.md b/static/usage/v7/fab/button-sizing/vue.md
index bf292433d7e..5ea6d8adb56 100644
--- a/static/usage/v7/fab/button-sizing/vue.md
+++ b/static/usage/v7/fab/button-sizing/vue.md
@@ -26,8 +26,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, colorPalette, document, globe }
-    }
+      return { add, colorPalette, document, globe };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/fab/list-side/demo.html b/static/usage/v7/fab/list-side/demo.html
index ce22e5462a5..0d9f3291e1d 100644
--- a/static/usage/v7/fab/list-side/demo.html
+++ b/static/usage/v7/fab/list-side/demo.html
@@ -1,55 +1,52 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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">
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-fab slot="fixed" horizontal="center" vertical="center">
             <ion-fab-button>
-              <ion-icon name="chevron-forward"></ion-icon>
+              <ion-icon name="add"></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
+            <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/v7/fab/list-side/vue.md b/static/usage/v7/fab/list-side/vue.md
index 2c42562587c..459ea75e845 100644
--- a/static/usage/v7/fab/list-side/vue.md
+++ b/static/usage/v7/fab/list-side/vue.md
@@ -41,8 +41,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, chevronBack, chevronDown, chevronForward, chevronUp }
-    }
+      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
index e28150bea57..7bca2f10d2f 100644
--- a/static/usage/v7/fab/positioning/angular.md
+++ b/static/usage/v7/fab/positioning/angular.md
@@ -38,7 +38,7 @@
       </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>
diff --git a/static/usage/v7/fab/positioning/demo.html b/static/usage/v7/fab/positioning/demo.html
index 4c741044b04..f6449a636ae 100644
--- a/static/usage/v7/fab/positioning/demo.html
+++ b/static/usage/v7/fab/positioning/demo.html
@@ -1,77 +1,74 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+  <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="color-palette"></ion-icon>
+            <ion-icon name="chevron-forward-circle"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="globe"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
+          <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 slot="fixed" vertical="top" horizontal="end" edge="true">
           <ion-fab-button>
-            <ion-icon name="color-palette"></ion-icon>
+            <ion-icon name="chevron-down-circle"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button>
-            <ion-icon name="globe"></ion-icon>
-          </ion-fab-button>
-        </ion-fab-list>
-      </ion-fab>
+          <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 slot="fixed" vertical="bottom" horizontal="end">
           <ion-fab-button>
-            <ion-icon name="color-palette"></ion-icon>
+            <ion-icon name="chevron-up-circle"></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
+          <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/v7/fab/positioning/javascript.md b/static/usage/v7/fab/positioning/javascript.md
index 27dec2c07b8..d9d93856bcd 100644
--- a/static/usage/v7/fab/positioning/javascript.md
+++ b/static/usage/v7/fab/positioning/javascript.md
@@ -38,7 +38,7 @@
       </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>
diff --git a/static/usage/v7/fab/positioning/react.md b/static/usage/v7/fab/positioning/react.md
index c8eb95d0166..95253561d9d 100644
--- a/static/usage/v7/fab/positioning/react.md
+++ b/static/usage/v7/fab/positioning/react.md
@@ -1,7 +1,14 @@
 ```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';
+import {
+  chevronDownCircle,
+  chevronForwardCircle,
+  chevronUpCircle,
+  colorPalette,
+  document,
+  globe,
+} from 'ionicons/icons';
 
 function Example() {
   return (
@@ -45,7 +52,7 @@ function Example() {
             </IonFabButton>
           </IonFabList>
         </IonFab>
-      
+
         <IonFab slot="fixed" vertical="bottom" horizontal="end">
           <IonFabButton>
             <IonIcon icon={chevronUpCircle}></IonIcon>
diff --git a/static/usage/v7/fab/positioning/vue.md b/static/usage/v7/fab/positioning/vue.md
index f3421f2b2ea..baa2f82e882 100644
--- a/static/usage/v7/fab/positioning/vue.md
+++ b/static/usage/v7/fab/positioning/vue.md
@@ -39,7 +39,7 @@
         </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>
@@ -61,14 +61,21 @@
 
 <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 {
+    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 }
-    }
+      return { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/fab/theming/colors/demo.html b/static/usage/v7/fab/theming/colors/demo.html
index d07b1d7fc7b..1ae2df54329 100644
--- a/static/usage/v7/fab/theming/colors/demo.html
+++ b/static/usage/v7/fab/theming/colors/demo.html
@@ -1,55 +1,52 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+  <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>
-          <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
+            <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/v7/fab/theming/colors/vue.md b/static/usage/v7/fab/theming/colors/vue.md
index 44968e6cb4c..f37cb9707b3 100644
--- a/static/usage/v7/fab/theming/colors/vue.md
+++ b/static/usage/v7/fab/theming/colors/vue.md
@@ -41,8 +41,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, chevronBack, chevronDown, chevronForward, chevronUp }
-    }
+      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
index 2e8c0c2bb93..ce1d9d06816 100644
--- 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
@@ -4,7 +4,7 @@ ion-fab-button {
   --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);
+  --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   --color: black;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/demo.html b/static/usage/v7/fab/theming/css-custom-properties/demo.html
index f921890486c..3d0fd49ac95 100644
--- a/static/usage/v7/fab/theming/css-custom-properties/demo.html
+++ b/static/usage/v7/fab/theming/css-custom-properties/demo.html
@@ -1,50 +1,48 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+        --color: black;
+      }
+    </style>
+  </head>
 
-  <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>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-fab>
             <ion-fab-button>
-              <ion-icon name="color-palette"></ion-icon>
+              <ion-icon name="add"></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
+            <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/v7/fab/theming/css-custom-properties/javascript.md b/static/usage/v7/fab/theming/css-custom-properties/javascript.md
index 45d5f5e1243..55df4e255bd 100644
--- a/static/usage/v7/fab/theming/css-custom-properties/javascript.md
+++ b/static/usage/v7/fab/theming/css-custom-properties/javascript.md
@@ -5,7 +5,7 @@
     --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);
+    --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     --color: black;
   }
 </style>
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
index 2e8c0c2bb93..ce1d9d06816 100644
--- 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
@@ -4,7 +4,7 @@ ion-fab-button {
   --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);
+  --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   --color: black;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/vue.md b/static/usage/v7/fab/theming/css-custom-properties/vue.md
index 373d97cb6ec..00d3b6c87f8 100644
--- a/static/usage/v7/fab/theming/css-custom-properties/vue.md
+++ b/static/usage/v7/fab/theming/css-custom-properties/vue.md
@@ -26,8 +26,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, colorPalette, document, globe }
-    }
+      return { add, colorPalette, document, globe };
+    },
   });
 </script>
 
@@ -37,7 +37,7 @@
     --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);
+    --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 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
index b480b0cc455..4bb8b96988c 100644
--- 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
@@ -2,10 +2,10 @@
 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);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   color: black;
 }
-    
+
 ion-fab-button::part(native):hover::after {
   background-color: #a3e681;
 }
@@ -13,4 +13,4 @@ ion-fab-button::part(native):hover::after {
 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/demo.html b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
index c56ea30c714..2e7bd8ec955 100644
--- a/static/usage/v7/fab/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
@@ -1,56 +1,54 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+        color: black;
+      }
 
-  <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):hover::after {
-      background-color: #a3e681;
-    }
+      ion-fab-button::part(native):active::after {
+        background-color: #87d361;
+      }
+    </style>
+  </head>
 
-    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>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-fab>
             <ion-fab-button>
-              <ion-icon name="color-palette"></ion-icon>
+              <ion-icon name="add"></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
+            <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/v7/fab/theming/css-shadow-parts/javascript.md b/static/usage/v7/fab/theming/css-shadow-parts/javascript.md
index 9ca1aa39119..19c1441fe2f 100644
--- a/static/usage/v7/fab/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v7/fab/theming/css-shadow-parts/javascript.md
@@ -3,10 +3,10 @@
   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);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     color: black;
   }
-    
+
   ion-fab-button::part(native):hover::after {
     background-color: #a3e681;
   }
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
index b480b0cc455..4bb8b96988c 100644
--- 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
@@ -2,10 +2,10 @@
 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);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
   color: black;
 }
-    
+
 ion-fab-button::part(native):hover::after {
   background-color: #a3e681;
 }
@@ -13,4 +13,4 @@ ion-fab-button::part(native):hover::after {
 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/vue.md b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
index 9c9f1559805..aee0d929a06 100644
--- a/static/usage/v7/fab/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
@@ -26,8 +26,8 @@
   export default defineComponent({
     components: { IonFab, IonFabButton, IonFabList, IonIcon },
     setup() {
-      return { add, colorPalette, document, globe }
-    }
+      return { add, colorPalette, document, globe };
+    },
   });
 </script>
 
@@ -35,10 +35,10 @@
   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);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     color: black;
   }
-    
+
   ion-fab-button::part(native):hover::after {
     background-color: #a3e681;
   }
diff --git a/static/usage/v7/footer/basic/demo.html b/static/usage/v7/footer/basic/demo.html
index 8716a5a4736..d2592eca731 100644
--- a/static/usage/v7/footer/basic/demo.html
+++ b/static/usage/v7/footer/basic/demo.html
@@ -1,28 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md
index db8f0f30a0e..a0429f5e23b 100644
--- 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
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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">
diff --git a/static/usage/v7/footer/custom-scroll-target/demo.html b/static/usage/v7/footer/custom-scroll-target/demo.html
index 1db37f90065..d24453289c9 100644
--- a/static/usage/v7/footer/custom-scroll-target/demo.html
+++ b/static/usage/v7/footer/custom-scroll-target/demo.html
@@ -1,78 +1,98 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .ion-content-scroll-host {
+        position: absolute;
+        top: 0;
+        left: 0;
 
-  <style>
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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>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>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>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>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
+          <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/v7/footer/custom-scroll-target/javascript.md b/static/usage/v7/footer/custom-scroll-target/javascript.md
index 607c759f225..411ccb1df59 100644
--- a/static/usage/v7/footer/custom-scroll-target/javascript.md
+++ b/static/usage/v7/footer/custom-scroll-target/javascript.md
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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">
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
index 425d1ee9528..9066d4c4a91 100644
--- a/static/usage/v7/footer/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v7/footer/custom-scroll-target/react/main_tsx.md
@@ -12,24 +12,63 @@ function Example() {
           <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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">
diff --git a/static/usage/v7/footer/custom-scroll-target/vue.md b/static/usage/v7/footer/custom-scroll-target/vue.md
index c7c13e7063c..b85998db4cb 100644
--- a/static/usage/v7/footer/custom-scroll-target/vue.md
+++ b/static/usage/v7/footer/custom-scroll-target/vue.md
@@ -5,24 +5,61 @@
       <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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">
diff --git a/static/usage/v7/footer/fade/angular.md b/static/usage/v7/footer/fade/angular.md
index cff7f1a7531..f600e4511df 100644
--- a/static/usage/v7/footer/fade/angular.md
+++ b/static/usage/v7/footer/fade/angular.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v7/footer/fade/demo.html b/static/usage/v7/footer/fade/demo.html
index 19ef77d93a1..0609f954711 100644
--- a/static/usage/v7/footer/fade/demo.html
+++ b/static/usage/v7/footer/fade/demo.html
@@ -1,65 +1,82 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding">
+        <h1>Animal Facts</h1>
 
-</head>
+        <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>
 
-<body>
-  <ion-app>
-    <ion-content class="ion-padding">
-      <h1>Animal Facts</h1>
+        <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>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>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>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>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>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
+        <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/v7/footer/fade/javascript.md b/static/usage/v7/footer/fade/javascript.md
index cff7f1a7531..f600e4511df 100644
--- a/static/usage/v7/footer/fade/javascript.md
+++ b/static/usage/v7/footer/fade/javascript.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v7/footer/fade/react.md b/static/usage/v7/footer/fade/react.md
index 858ea06635c..d7142f57ecd 100644
--- a/static/usage/v7/footer/fade/react.md
+++ b/static/usage/v7/footer/fade/react.md
@@ -9,24 +9,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
diff --git a/static/usage/v7/footer/fade/vue.md b/static/usage/v7/footer/fade/vue.md
index 8814012da11..757e78f59da 100644
--- a/static/usage/v7/footer/fade/vue.md
+++ b/static/usage/v7/footer/fade/vue.md
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
diff --git a/static/usage/v7/footer/no-border/demo.html b/static/usage/v7/footer/no-border/demo.html
index e0c34f1841c..2a8835714cb 100644
--- a/static/usage/v7/footer/no-border/demo.html
+++ b/static/usage/v7/footer/no-border/demo.html
@@ -1,28 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/footer/translucent/angular.md b/static/usage/v7/footer/translucent/angular.md
index 3d8f6098b38..a58f761cc8c 100644
--- a/static/usage/v7/footer/translucent/angular.md
+++ b/static/usage/v7/footer/translucent/angular.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v7/footer/translucent/demo.html b/static/usage/v7/footer/translucent/demo.html
index 9449c00c072..880895e7115 100644
--- a/static/usage/v7/footer/translucent/demo.html
+++ b/static/usage/v7/footer/translucent/demo.html
@@ -1,65 +1,82 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <body>
+    <ion-app>
+      <ion-content fullscreen="true" class="ion-padding">
+        <h1>Animal Facts</h1>
 
-</head>
+        <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>
 
-<body>
-  <ion-app>
-    <ion-content fullscreen="true" class="ion-padding">
-      <h1>Animal Facts</h1>
+        <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>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>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>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>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>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
+        <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/v7/footer/translucent/javascript.md b/static/usage/v7/footer/translucent/javascript.md
index 029b08984c3..bdff28e0dca 100644
--- a/static/usage/v7/footer/translucent/javascript.md
+++ b/static/usage/v7/footer/translucent/javascript.md
@@ -3,24 +3,61 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
diff --git a/static/usage/v7/footer/translucent/react.md b/static/usage/v7/footer/translucent/react.md
index 0a3884fb0cd..ab7ff2221e0 100644
--- a/static/usage/v7/footer/translucent/react.md
+++ b/static/usage/v7/footer/translucent/react.md
@@ -9,24 +9,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
diff --git a/static/usage/v7/footer/translucent/vue.md b/static/usage/v7/footer/translucent/vue.md
index cd64be6bc88..5d5a0e1497f 100644
--- a/static/usage/v7/footer/translucent/vue.md
+++ b/static/usage/v7/footer/translucent/vue.md
@@ -4,24 +4,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
diff --git a/static/usage/v7/grid/basic/demo.html b/static/usage/v7/grid/basic/demo.html
index 4343eb0c54b..981265cd17e 100644
--- a/static/usage/v7/grid/basic/demo.html
+++ b/static/usage/v7/grid/basic/demo.html
@@ -1,77 +1,75 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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
+          <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/v7/grid/customizing/column-number/demo.html b/static/usage/v7/grid/customizing/column-number/demo.html
index 0d8f098eeda..fb28de35d4e 100644
--- a/static/usage/v7/grid/customizing/column-number/demo.html
+++ b/static/usage/v7/grid/customizing/column-number/demo.html
@@ -1,53 +1,51 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
+        --ion-grid-columns: 6;
+      }
 
-      --ion-grid-columns: 6;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/grid/customizing/column-number/react/main_tsx.md b/static/usage/v7/grid/customizing/column-number/react/main_tsx.md
index f911fdef9b4..23f618b020a 100644
--- a/static/usage/v7/grid/customizing/column-number/react/main_tsx.md
+++ b/static/usage/v7/grid/customizing/column-number/react/main_tsx.md
@@ -7,7 +7,9 @@ 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>
+      <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>
diff --git a/static/usage/v7/grid/customizing/padding/demo.html b/static/usage/v7/grid/customizing/padding/demo.html
index c56798590b8..43fb4ffbf0f 100644
--- a/static/usage/v7/grid/customizing/padding/demo.html
+++ b/static/usage/v7/grid/customizing/padding/demo.html
@@ -1,65 +1,63 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/grid/customizing/width/demo.html b/static/usage/v7/grid/customizing/width/demo.html
index ec5302b1be7..a61fc631953 100644
--- a/static/usage/v7/grid/customizing/width/demo.html
+++ b/static/usage/v7/grid/customizing/width/demo.html
@@ -1,56 +1,54 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/grid/fixed/demo.html b/static/usage/v7/grid/fixed/demo.html
index f9181e05e1b..a17d5f27654 100644
--- a/static/usage/v7/grid/fixed/demo.html
+++ b/static/usage/v7/grid/fixed/demo.html
@@ -1,48 +1,46 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
index 63a33b6361e..1f7300dba04 100644
--- a/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
+++ b/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
@@ -2,60 +2,40 @@
 <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-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-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-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-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-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
index ed5e66eef84..db1314706bb 100644
--- a/static/usage/v7/grid/horizontal-alignment/demo.html
+++ b/static/usage/v7/grid/horizontal-alignment/demo.html
@@ -1,100 +1,79 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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 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 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
+          <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>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/grid/horizontal-alignment/javascript.md b/static/usage/v7/grid/horizontal-alignment/javascript.md
index 79a8e723d8e..13c25523a4c 100644
--- a/static/usage/v7/grid/horizontal-alignment/javascript.md
+++ b/static/usage/v7/grid/horizontal-alignment/javascript.md
@@ -2,60 +2,40 @@
 <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-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-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-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-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-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/react/main_tsx.md b/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
index 320fb74063c..0ec66ddb95a 100644
--- a/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
+++ b/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
@@ -10,60 +10,40 @@ function Example() {
       <b>Columns aligned at the start</b>
       <IonGrid>
         <IonRow class="ion-justify-content-start">
-          <IonCol size="3">
-            1
-          </IonCol>
-          <IonCol size="3">
-            2
-          </IonCol>
+          <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>
+          <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>
+          <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>
+          <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>
+          <IonCol size="3">1</IonCol>
+          <IonCol size="3">2</IonCol>
         </IonRow>
       </IonGrid>
     </>
diff --git a/static/usage/v7/grid/horizontal-alignment/vue.md b/static/usage/v7/grid/horizontal-alignment/vue.md
index 4cb3c1bcefd..689efada3ea 100644
--- a/static/usage/v7/grid/horizontal-alignment/vue.md
+++ b/static/usage/v7/grid/horizontal-alignment/vue.md
@@ -3,60 +3,40 @@
   <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-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-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-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-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-col size="3"> 1 </ion-col>
+      <ion-col size="3"> 2 </ion-col>
     </ion-row>
   </ion-grid>
 </template>
diff --git a/static/usage/v7/grid/offset-responsive/demo.html b/static/usage/v7/grid/offset-responsive/demo.html
index b100572eb92..df9051c60c2 100644
--- a/static/usage/v7/grid/offset-responsive/demo.html
+++ b/static/usage/v7/grid/offset-responsive/demo.html
@@ -1,70 +1,68 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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>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
+          <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/v7/grid/offset-responsive/react/main_tsx.md b/static/usage/v7/grid/offset-responsive/react/main_tsx.md
index 482f957cde8..8721fbfc523 100644
--- a/static/usage/v7/grid/offset-responsive/react/main_tsx.md
+++ b/static/usage/v7/grid/offset-responsive/react/main_tsx.md
@@ -31,8 +31,12 @@ function Example() {
       <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>
+          <IonCol offset="6" offset-md="4" offset-lg="2">
+            1
+          </IonCol>
+          <IonCol offset="6" offset-md="4" offset-lg="2">
+            2
+          </IonCol>
         </IonRow>
       </IonGrid>
     </>
diff --git a/static/usage/v7/grid/offset/demo.html b/static/usage/v7/grid/offset/demo.html
index f465321f61b..fb2274aec26 100644
--- a/static/usage/v7/grid/offset/demo.html
+++ b/static/usage/v7/grid/offset/demo.html
@@ -1,69 +1,67 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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/v7/grid/offset/react/main_tsx.md b/static/usage/v7/grid/offset/react/main_tsx.md
index 99add2f8a44..e24f5a47918 100644
--- a/static/usage/v7/grid/offset/react/main_tsx.md
+++ b/static/usage/v7/grid/offset/react/main_tsx.md
@@ -7,7 +7,9 @@ import './main.css';
 function Example() {
   return (
     <>
-      <b>Column 2 has <code>offset</code> set to <code>"3"</code></b>
+      <b>
+        Column 2 has <code>offset</code> set to <code>"3"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -16,7 +18,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 5 has <code>offset</code> set to <code>"2"</code></b>
+      <b>
+        Column 5 has <code>offset</code> set to <code>"2"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -27,10 +31,14 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 1 has <code>offset</code> set to <code>"4"</code></b>
+      <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" offset="4">
+            1
+          </IonCol>
           <IonCol size="2">2</IonCol>
         </IonRow>
       </IonGrid>
diff --git a/static/usage/v7/grid/push-pull-responsive/demo.html b/static/usage/v7/grid/push-pull-responsive/demo.html
index 924f47f862f..a5ce9d24ee8 100644
--- a/static/usage/v7/grid/push-pull-responsive/demo.html
+++ b/static/usage/v7/grid/push-pull-responsive/demo.html
@@ -1,71 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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>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
+          <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/v7/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
index 3f6e2879e08..85955f3ebd2 100644
--- a/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
+++ b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
@@ -28,12 +28,24 @@ function Example() {
       <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>
+          <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>
     </>
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
index cb8190ef9e9..a93c12fef81 100644
--- a/static/usage/v7/grid/push-pull/angular/example_component_html.md
+++ b/static/usage/v7/grid/push-pull/angular/example_component_html.md
@@ -8,7 +8,10 @@
   </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>
+<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>
diff --git a/static/usage/v7/grid/push-pull/demo.html b/static/usage/v7/grid/push-pull/demo.html
index 32baee94430..2a462a5e7c0 100644
--- a/static/usage/v7/grid/push-pull/demo.html
+++ b/static/usage/v7/grid/push-pull/demo.html
@@ -1,73 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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/v7/grid/push-pull/javascript.md b/static/usage/v7/grid/push-pull/javascript.md
index 6dca0e83ec4..b911da1791b 100644
--- a/static/usage/v7/grid/push-pull/javascript.md
+++ b/static/usage/v7/grid/push-pull/javascript.md
@@ -8,7 +8,10 @@
   </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>
+<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>
diff --git a/static/usage/v7/grid/push-pull/react/main_tsx.md b/static/usage/v7/grid/push-pull/react/main_tsx.md
index 6b087b72b77..aa7c1d1c809 100644
--- a/static/usage/v7/grid/push-pull/react/main_tsx.md
+++ b/static/usage/v7/grid/push-pull/react/main_tsx.md
@@ -7,7 +7,10 @@ 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>
+      <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>
@@ -16,7 +19,10 @@ function Example() {
         </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>
+      <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>
@@ -28,11 +34,18 @@ function Example() {
         </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>
+      <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>
+          <IonCol size="9" push="3">
+            1
+          </IonCol>
+          <IonCol size="3" pull="9">
+            2
+          </IonCol>
         </IonRow>
       </IonGrid>
     </>
diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md
index 2775067f7a7..b5146e95e0e 100644
--- a/static/usage/v7/grid/push-pull/vue.md
+++ b/static/usage/v7/grid/push-pull/vue.md
@@ -1,6 +1,9 @@
 ```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>
+  <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>
@@ -9,7 +12,10 @@
     </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>
+  <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>
@@ -21,7 +27,10 @@
     </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>
+  <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>
diff --git a/static/usage/v7/grid/size-auto/demo.html b/static/usage/v7/grid/size-auto/demo.html
index d5c5bcc80f9..973bd21b8a4 100644
--- a/static/usage/v7/grid/size-auto/demo.html
+++ b/static/usage/v7/grid/size-auto/demo.html
@@ -1,78 +1,76 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
 
-    ion-col {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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 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
+          <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/v7/grid/size-auto/react/main_tsx.md b/static/usage/v7/grid/size-auto/react/main_tsx.md
index 15a19d04abe..64276d4cacd 100644
--- a/static/usage/v7/grid/size-auto/react/main_tsx.md
+++ b/static/usage/v7/grid/size-auto/react/main_tsx.md
@@ -7,7 +7,9 @@ import './main.css';
 function Example() {
   return (
     <>
-      <b>Column 1 has <code>size</code> set to <code>"auto"</code></b>
+      <b>
+        Column 1 has <code>size</code> set to <code>"auto"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol size="auto">1</IonCol>
@@ -16,7 +18,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 3 contains an input and has <code>size</code> set to <code>"auto"</code></b>
+      <b>
+        Column 3 contains an input and has <code>size</code> set to <code>"auto"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -30,12 +34,14 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Column 2 has <code>size</code> set to <code>"auto"</code> and a defined width</b>
+      <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>
+            <div style={{ width: '150px' }}>2</div>
           </IonCol>
         </IonRow>
       </IonGrid>
diff --git a/static/usage/v7/grid/size-responsive/demo.html b/static/usage/v7/grid/size-responsive/demo.html
index 77592878d13..3618fdc86d1 100644
--- a/static/usage/v7/grid/size-responsive/demo.html
+++ b/static/usage/v7/grid/size-responsive/demo.html
@@ -1,72 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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>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
+          <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/v7/grid/size-responsive/react/main_tsx.md b/static/usage/v7/grid/size-responsive/react/main_tsx.md
index c27242fcf87..32a037e47bd 100644
--- a/static/usage/v7/grid/size-responsive/react/main_tsx.md
+++ b/static/usage/v7/grid/size-responsive/react/main_tsx.md
@@ -10,10 +10,18 @@ function Example() {
       <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>
+          <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>
 
@@ -29,12 +37,24 @@ function Example() {
       <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>
+          <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>
     </>
diff --git a/static/usage/v7/grid/size/demo.html b/static/usage/v7/grid/size/demo.html
index 127f2285643..4db45111d72 100644
--- a/static/usage/v7/grid/size/demo.html
+++ b/static/usage/v7/grid/size/demo.html
@@ -1,70 +1,68 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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/v7/grid/size/react/main_tsx.md b/static/usage/v7/grid/size/react/main_tsx.md
index 3669d57806d..5cfa4f62f0e 100644
--- a/static/usage/v7/grid/size/react/main_tsx.md
+++ b/static/usage/v7/grid/size/react/main_tsx.md
@@ -7,7 +7,9 @@ import './main.css';
 function Example() {
   return (
     <>
-      <b>Column 2 has <code>size</code> set to <code>"8"</code></b>
+      <b>
+        Column 2 has <code>size</code> set to <code>"8"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -16,7 +18,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Columns 3 & 4 have <code>size</code> set to <code>"3"</code></b>
+      <b>
+        Columns 3 & 4 have <code>size</code> set to <code>"3"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol>1</IonCol>
@@ -28,7 +32,9 @@ function Example() {
         </IonRow>
       </IonGrid>
 
-      <b>Columns 1 & 2 have <code>size</code> set to <code>"4"</code></b>
+      <b>
+        Columns 1 & 2 have <code>size</code> set to <code>"4"</code>
+      </b>
       <IonGrid>
         <IonRow>
           <IonCol size="4">1</IonCol>
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
index 2b4e1b42106..0c12d96a0d2 100644
--- a/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md
+++ b/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md
@@ -2,15 +2,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -23,15 +17,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -44,15 +32,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
diff --git a/static/usage/v7/grid/vertical-alignment/demo.html b/static/usage/v7/grid/vertical-alignment/demo.html
index 6831dd6faef..027b25dfaed 100644
--- a/static/usage/v7/grid/vertical-alignment/demo.html
+++ b/static/usage/v7/grid/vertical-alignment/demo.html
@@ -1,103 +1,84 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-grid {
+        width: 100%;
+        flex-grow: 0;
+      }
 
-    ion-grid {
-      width: 100%;
-      flex-grow: 0;
-    }
+      ion-col {
+        background-color: #135d54;
+        border: solid 1px #fff;
+        color: #fff;
+        text-align: center;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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
+          <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>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/grid/vertical-alignment/javascript.md b/static/usage/v7/grid/vertical-alignment/javascript.md
index 9e7573ebbc6..6285096acdc 100644
--- a/static/usage/v7/grid/vertical-alignment/javascript.md
+++ b/static/usage/v7/grid/vertical-alignment/javascript.md
@@ -2,15 +2,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -23,15 +17,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
@@ -44,15 +32,9 @@
 <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> 1 </ion-col>
+    <ion-col> 2 </ion-col>
+    <ion-col> 3 </ion-col>
     <ion-col>
       4 <br />
       # <br />
diff --git a/static/usage/v7/grid/vertical-alignment/react/main_tsx.md b/static/usage/v7/grid/vertical-alignment/react/main_tsx.md
index d1dad060701..04a492566f6 100644
--- a/static/usage/v7/grid/vertical-alignment/react/main_tsx.md
+++ b/static/usage/v7/grid/vertical-alignment/react/main_tsx.md
@@ -10,15 +10,9 @@ function Example() {
       <b>Columns aligned at the top</b>
       <IonGrid>
         <IonRow class="ion-align-items-start">
-          <IonCol>
-            1
-          </IonCol>
-          <IonCol>
-            2
-          </IonCol>
-          <IonCol>
-            3
-          </IonCol>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
           <IonCol>
             4 <br />
             # <br />
@@ -31,15 +25,9 @@ function Example() {
       <b>Columns aligned at the center</b>
       <IonGrid>
         <IonRow class="ion-align-items-center">
-          <IonCol>
-            1
-          </IonCol>
-          <IonCol>
-            2
-          </IonCol>
-          <IonCol>
-            3
-          </IonCol>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
           <IonCol>
             4 <br />
             # <br />
@@ -52,15 +40,9 @@ function Example() {
       <b>Columns aligned at the bottom</b>
       <IonGrid>
         <IonRow class="ion-align-items-end">
-          <IonCol>
-            1
-          </IonCol>
-          <IonCol>
-            2
-          </IonCol>
-          <IonCol>
-            3
-          </IonCol>
+          <IonCol>1</IonCol>
+          <IonCol>2</IonCol>
+          <IonCol>3</IonCol>
           <IonCol>
             4 <br />
             # <br />
diff --git a/static/usage/v7/grid/vertical-alignment/vue.md b/static/usage/v7/grid/vertical-alignment/vue.md
index f150f908eec..e48b234b38a 100644
--- a/static/usage/v7/grid/vertical-alignment/vue.md
+++ b/static/usage/v7/grid/vertical-alignment/vue.md
@@ -3,15 +3,9 @@
   <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> 1 </ion-col>
+      <ion-col> 2 </ion-col>
+      <ion-col> 3 </ion-col>
       <ion-col>
         4 <br />
         # <br />
@@ -24,15 +18,9 @@
   <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> 1 </ion-col>
+      <ion-col> 2 </ion-col>
+      <ion-col> 3 </ion-col>
       <ion-col>
         4 <br />
         # <br />
@@ -45,15 +33,9 @@
   <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> 1 </ion-col>
+      <ion-col> 2 </ion-col>
+      <ion-col> 3 </ion-col>
       <ion-col>
         4 <br />
         # <br />
diff --git a/static/usage/v7/header/basic/demo.html b/static/usage/v7/header/basic/demo.html
index ef36c88c176..66f341c69c0 100644
--- a/static/usage/v7/header/basic/demo.html
+++ b/static/usage/v7/header/basic/demo.html
@@ -1,28 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/header/condense/angular.md b/static/usage/v7/header/condense/angular.md
index 46ac7fac8ea..1741b1f1706 100644
--- a/static/usage/v7/header/condense/angular.md
+++ b/static/usage/v7/header/condense/angular.md
@@ -15,24 +15,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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
index bbfd48664aa..17594d4e024 100644
--- a/static/usage/v7/header/condense/demo.html
+++ b/static/usage/v7/header/condense/demo.html
@@ -1,73 +1,92 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Header</ion-title>
+          <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>
+        <div class="ion-padding">
+          <h1>Animal Facts</h1>
 
-        <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>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>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>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>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>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>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>
+          <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>
 
-</html>
\ No newline at end of file
+          <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/v7/header/condense/javascript.md b/static/usage/v7/header/condense/javascript.md
index 95ac5731c47..f2e2a1d53cc 100644
--- a/static/usage/v7/header/condense/javascript.md
+++ b/static/usage/v7/header/condense/javascript.md
@@ -15,24 +15,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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
index 0f68407aff0..6dc06c54cff 100644
--- a/static/usage/v7/header/condense/react.md
+++ b/static/usage/v7/header/condense/react.md
@@ -21,24 +21,63 @@ function Example() {
           <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
     </>
diff --git a/static/usage/v7/header/condense/vue.md b/static/usage/v7/header/condense/vue.md
index c3f354d010f..dddaef7f71c 100644
--- a/static/usage/v7/header/condense/vue.md
+++ b/static/usage/v7/header/condense/vue.md
@@ -16,24 +16,61 @@
       <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
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
index b54ba9d2afa..742d531cb9d 100644
--- 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
@@ -9,24 +9,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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
index 4c56d609f51..c9721ebd1f3 100644
--- a/static/usage/v7/header/custom-scroll-target/demo.html
+++ b/static/usage/v7/header/custom-scroll-target/demo.html
@@ -1,78 +1,98 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .ion-content-scroll-host {
+        position: absolute;
+        top: 0;
+        left: 0;
 
-  <style>
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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>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>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>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>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
+          <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/v7/header/custom-scroll-target/react/main_tsx.md b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md
index bf6d13f26ec..923ea715aa7 100644
--- a/static/usage/v7/header/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md
@@ -17,24 +17,63 @@ function Example() {
           <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
     </>
diff --git a/static/usage/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md
index 73565d9ab18..84aac1c56fe 100644
--- a/static/usage/v7/header/custom-scroll-target/vue.md
+++ b/static/usage/v7/header/custom-scroll-target/vue.md
@@ -10,24 +10,61 @@
       <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
diff --git a/static/usage/v7/header/fade/angular.md b/static/usage/v7/header/fade/angular.md
index 72e55ffc58c..473ad54c8da 100644
--- a/static/usage/v7/header/fade/angular.md
+++ b/static/usage/v7/header/fade/angular.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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
index 08c9859a796..fc2d26aa3d3 100644
--- a/static/usage/v7/header/fade/demo.html
+++ b/static/usage/v7/header/fade/demo.html
@@ -1,65 +1,82 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <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>
 
-</head>
+        <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>
 
-<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>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>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>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>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>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>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
+        <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/v7/header/fade/javascript.md b/static/usage/v7/header/fade/javascript.md
index 72e55ffc58c..473ad54c8da 100644
--- a/static/usage/v7/header/fade/javascript.md
+++ b/static/usage/v7/header/fade/javascript.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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
index 453f32c4db4..085bea0296d 100644
--- a/static/usage/v7/header/fade/react.md
+++ b/static/usage/v7/header/fade/react.md
@@ -14,24 +14,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
     </>
   );
diff --git a/static/usage/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md
index 44327bf809c..264038c103c 100644
--- a/static/usage/v7/header/fade/vue.md
+++ b/static/usage/v7/header/fade/vue.md
@@ -9,24 +9,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
 
diff --git a/static/usage/v7/header/no-border/demo.html b/static/usage/v7/header/no-border/demo.html
index 8f671bb39f2..2f60ef6fd1c 100644
--- a/static/usage/v7/header/no-border/demo.html
+++ b/static/usage/v7/header/no-border/demo.html
@@ -1,28 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/header/translucent/angular.md b/static/usage/v7/header/translucent/angular.md
index f2779c7d5c9..657a88bf066 100644
--- a/static/usage/v7/header/translucent/angular.md
+++ b/static/usage/v7/header/translucent/angular.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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
index 4d9332e1047..3172fe01bc7 100644
--- a/static/usage/v7/header/translucent/demo.html
+++ b/static/usage/v7/header/translucent/demo.html
@@ -1,65 +1,82 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <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>
 
-</head>
+        <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>
 
-<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>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>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>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>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>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>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
+        <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/v7/header/translucent/javascript.md b/static/usage/v7/header/translucent/javascript.md
index e03deeda2a5..5c0048c019c 100644
--- a/static/usage/v7/header/translucent/javascript.md
+++ b/static/usage/v7/header/translucent/javascript.md
@@ -8,23 +8,60 @@
   <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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
index 862211d839b..def835913c3 100644
--- a/static/usage/v7/header/translucent/react.md
+++ b/static/usage/v7/header/translucent/react.md
@@ -14,24 +14,61 @@ function Example() {
         <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
     </>
   );
diff --git a/static/usage/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md
index 34a4c740014..26370009d44 100644
--- a/static/usage/v7/header/translucent/vue.md
+++ b/static/usage/v7/header/translucent/vue.md
@@ -9,24 +9,61 @@
     <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
 
diff --git a/static/usage/v7/icon/basic/demo.html b/static/usage/v7/icon/basic/demo.html
index 841eecd5bae..1fec16dfe09 100644
--- a/static/usage/v7/icon/basic/demo.html
+++ b/static/usage/v7/icon/basic/demo.html
@@ -1,28 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Icon</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Icon</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-icon name="logo-ionic"></ion-icon>
-        <ion-icon name="logo-ionic" size="large"></ion-icon>
-        <ion-icon name="logo-ionic" color="primary"></ion-icon>
-        <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-icon name="logo-ionic" size="large"></ion-icon>
+          <ion-icon name="logo-ionic" color="primary"></ion-icon>
+          <ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md
index c26fa6e35ac..f766b6112ac 100644
--- a/static/usage/v7/icon/basic/index.md
+++ b/static/usage/v7/icon/basic/index.md
@@ -5,9 +5,4 @@ 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/icon/basic/demo.html"
-/>
+<Playground version={7} size="xsmall" code={{ javascript, react, vue, angular }} src="usage/v7/icon/basic/demo.html" />
diff --git a/static/usage/v7/img/basic/angular.md b/static/usage/v7/img/basic/angular.md
index ce4d3d19e0d..61e27f8b9d6 100644
--- a/static/usage/v7/img/basic/angular.md
+++ b/static/usage/v7/img/basic/angular.md
@@ -1,3 +1,6 @@
 ```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>
+<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
index 46c58790131..75747152f61 100644
--- a/static/usage/v7/img/basic/demo.html
+++ b/static/usage/v7/img/basic/demo.html
@@ -1,31 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-img {
+        width: 300px;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/img/basic/javascript.md b/static/usage/v7/img/basic/javascript.md
index ce4d3d19e0d..61e27f8b9d6 100644
--- a/static/usage/v7/img/basic/javascript.md
+++ b/static/usage/v7/img/basic/javascript.md
@@ -1,3 +1,6 @@
 ```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>
+<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
index 04c4c086b15..0236cc28976 100644
--- a/static/usage/v7/img/basic/react.md
+++ b/static/usage/v7/img/basic/react.md
@@ -4,7 +4,10 @@ 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>
+    <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
index d8cb2cd2d7f..db4d74618ef 100644
--- a/static/usage/v7/img/basic/vue.md
+++ b/static/usage/v7/img/basic/vue.md
@@ -1,6 +1,9 @@
 ```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>
+  <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">
diff --git a/static/usage/v7/infinite-scroll/basic/demo.html b/static/usage/v7/infinite-scroll/basic/demo.html
index d9a9aa8a765..e7bc2c658c0 100644
--- a/static/usage/v7/infinite-scroll/basic/demo.html
+++ b/static/usage/v7/infinite-scroll/basic/demo.html
@@ -1,63 +1,60 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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);
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+      generateItems();
+    </script>
+  </body>
+</html>
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
index 84ea18af65a..3970f5091a0 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -1,82 +1,117 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      svg {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    svg {
-      width: 20px;
-      height: 20px;
-      display: inline-block;
-    }
-
-    .infinite-scroll-content {
-      text-align: center;
-      padding: 20px 0;
-    }
-  </style>
-</head>
+      .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');
+  <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');
+      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';
+          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);
+          avatar.appendChild(img);
+          el.appendChild(avatar);
 
-        const text = document.createElement('ion-label');
-        text.textContent = `Item ${i}`;
+          const text = document.createElement('ion-label');
+          text.textContent = `Item ${i}`;
 
-        el.appendChild(text);
+          el.appendChild(text);
 
-        list.appendChild(el);
+          list.appendChild(el);
+        }
       }
-    }
-
-    generateItems();
-
-  </script>
-</body>
 
-</html>
\ No newline at end of file
+      generateItems();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
index d7848616e34..7881a0abac8 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
@@ -1,56 +1,53 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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);
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+      generateItems();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/input/basic/demo.html b/static/usage/v7/input/basic/demo.html
index 84ee93d2ba5..69bbde23b42 100644
--- a/static/usage/v7/input/basic/demo.html
+++ b/static/usage/v7/input/basic/demo.html
@@ -1,50 +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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-input label="Default input"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Input with placeholder" placeholder="Enter company name"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Input with value" value="121 S Pinckney St #300"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Readonly input" value="Madison" readonly="true"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Disabled input" value="53703" disabled="true"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Default input"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Input with placeholder" placeholder="Enter company name"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Input with value" value="121 S Pinckney St #300"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Readonly input" value="Madison" readonly="true"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Disabled input" value="53703" disabled="true"></ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/input/clear/angular.md b/static/usage/v7/input/clear/angular.md
index 9c6af49b21d..fc52d3b55e8 100644
--- a/static/usage/v7/input/clear/angular.md
+++ b/static/usage/v7/input/clear/angular.md
@@ -1,17 +1,33 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-input label="Input with clear button" labelPlacement="stacked" [clearInput]="true" placeholder="Enter text to see clear button" value="Default value">
+    <ion-input
+      label="Input with clear button"
+      labelPlacement="stacked"
+      [clearInput]="true"
+      placeholder="Enter text to see clear button"
+      value="Default value"
+    >
     </ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-input label="Input with clear on edit" labelPlacement="stacked" [clearOnEdit]="true" placeholder="Enter text, leave the input, come back and type to clear">
+    <ion-input
+      label="Input with clear on edit"
+      labelPlacement="stacked"
+      [clearOnEdit]="true"
+      placeholder="Enter text, leave the input, come back and type to clear"
+    >
     </ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-input label="Password input" labelPlacement="stacked" type="password" placeholder="Enter text, leave the input, come back and type to clear">
+    <ion-input
+      label="Password input"
+      labelPlacement="stacked"
+      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
index 90c0083be5e..39074873dbc 100644
--- a/static/usage/v7/input/clear/demo.html
+++ b/static/usage/v7/input/clear/demo.html
@@ -1,48 +1,59 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input
+                label="Input with clear button"
+                label-placement="stacked"
+                clear-input="true"
+                placeholder="Enter text to see clear button"
+                value="Default value"
+              >
+              </ion-input>
+            </ion-item>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-input label="Input with clear button" label-placement="stacked" clear-input="true"
-              placeholder="Enter text to see clear button" value="Default value">
-            </ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Input with clear on edit" label-placement="stacked" clear-on-edit="true"
-              placeholder="Enter text, leave the input, come back and type to clear">
-            </ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Password input" label-placement="stacked" 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>
+            <ion-item>
+              <ion-input
+                label="Input with clear on edit"
+                label-placement="stacked"
+                clear-on-edit="true"
+                placeholder="Enter text, leave the input, come back and type to clear"
+              >
+              </ion-input>
+            </ion-item>
 
+            <ion-item>
+              <ion-input
+                label="Password input"
+                label-placement="stacked"
+                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/v7/input/clear/javascript.md b/static/usage/v7/input/clear/javascript.md
index 79ffd9d9f47..743ebd8cfd8 100644
--- a/static/usage/v7/input/clear/javascript.md
+++ b/static/usage/v7/input/clear/javascript.md
@@ -1,17 +1,33 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-input label="Input with clear button" label-placement="stacked" clear-input="true" placeholder="Enter text to see clear button" value="Default value">
+    <ion-input
+      label="Input with clear button"
+      label-placement="stacked"
+      clear-input="true"
+      placeholder="Enter text to see clear button"
+      value="Default value"
+    >
     </ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-input label="Input with clear on edit" label-placement="stacked" clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear">
+    <ion-input
+      label="Input with clear on edit"
+      label-placement="stacked"
+      clear-on-edit="true"
+      placeholder="Enter text, leave the input, come back and type to clear"
+    >
     </ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-input label="Password input" label-placement="stacked" type="password" placeholder="Enter text, leave the input, come back and type to clear">
+    <ion-input
+      label="Password input"
+      label-placement="stacked"
+      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
index 5ac087eed19..959702b5e9e 100644
--- a/static/usage/v7/input/clear/react.md
+++ b/static/usage/v7/input/clear/react.md
@@ -6,15 +6,31 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonInput label="Input with clear button" labelPlacement="stacked" clearInput={true} placeholder="Enter text to see clear button" value="Default value"></IonInput>
+        <IonInput
+          label="Input with clear button"
+          labelPlacement="stacked"
+          clearInput={true}
+          placeholder="Enter text to see clear button"
+          value="Default value"
+        ></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonInput label="Input with clear on edit" labelPlacement="stacked" clearOnEdit={true} placeholder="Enter text, leave the input, come back and type to clear"></IonInput>
+        <IonInput
+          label="Input with clear on edit"
+          labelPlacement="stacked"
+          clearOnEdit={true}
+          placeholder="Enter text, leave the input, come back and type to clear"
+        ></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonInput label="Password input" labelPlacement="stacked" type="password" placeholder="Enter text, leave the input, come back and type to clear"></IonInput>
+        <IonInput
+          label="Password input"
+          labelPlacement="stacked"
+          type="password"
+          placeholder="Enter text, leave the input, come back and type to clear"
+        ></IonInput>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v7/input/clear/vue.md b/static/usage/v7/input/clear/vue.md
index 15095b0cc91..e5cd540d469 100644
--- a/static/usage/v7/input/clear/vue.md
+++ b/static/usage/v7/input/clear/vue.md
@@ -2,17 +2,33 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-input label="Input with clear button" label-placement="stacked" :clear-input="true" placeholder="Enter text to see clear button" value="Default value">
+      <ion-input
+        label="Input with clear button"
+        label-placement="stacked"
+        :clear-input="true"
+        placeholder="Enter text to see clear button"
+        value="Default value"
+      >
       </ion-input>
     </ion-item>
-  
+
     <ion-item>
-      <ion-input label="Input with clear on edit" label-placement="stacked" :clear-on-edit="true" placeholder="Enter text, leave the input, come back and type to clear">
+      <ion-input
+        label="Input with clear on edit"
+        label-placement="stacked"
+        :clear-on-edit="true"
+        placeholder="Enter text, leave the input, come back and type to clear"
+      >
       </ion-input>
     </ion-item>
-  
+
     <ion-item>
-      <ion-input label="Password input" label-placement="stacked" type="password" placeholder="Enter text, leave the input, come back and type to clear">
+      <ion-input
+        label="Password input"
+        label-placement="stacked"
+        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/counter/angular/example_component_html.md b/static/usage/v7/input/counter/angular/example_component_html.md
index e9f3d7dcaac..633ff54c719 100644
--- a/static/usage/v7/input/counter/angular/example_component_html.md
+++ b/static/usage/v7/input/counter/angular/example_component_html.md
@@ -1,5 +1,12 @@
 ```html
 <ion-input label="Default counter" labelPlacement="floating" [counter]="true" maxlength="20"></ion-input>
 
-<ion-input id="custom-input" label="Custom Counter Format" labelPlacement="floating" [counter]="true" maxlength="20" [counterFormatter]="customCounterFormatter"></ion-input>
+<ion-input
+  id="custom-input"
+  label="Custom Counter Format"
+  labelPlacement="floating"
+  [counter]="true"
+  maxlength="20"
+  [counterFormatter]="customCounterFormatter"
+></ion-input>
 ```
diff --git a/static/usage/v7/input/counter/demo.html b/static/usage/v7/input/counter/demo.html
index 05e11d1b739..ad98ed249eb 100644
--- a/static/usage/v7/input/counter/demo.html
+++ b/static/usage/v7/input/counter/demo.html
@@ -1,41 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
 
-  <style>
-    .container {
-      flex-direction: column;
+        width: 300px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      width: 300px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-input label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-input>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-input label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-input>
-
-        <ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" counter="true"
-          maxlength="20"></ion-input>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-<script>
-  const customInput = document.querySelector('#custom-input');
-  customInput.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
-</script>
+          <ion-input
+            id="custom-input"
+            label="Custom Counter Format"
+            label-placement="floating"
+            counter="true"
+            maxlength="20"
+          ></ion-input>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 
+  <script>
+    const customInput = document.querySelector('#custom-input');
+    customInput.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+  </script>
 </html>
diff --git a/static/usage/v7/input/counter/javascript.md b/static/usage/v7/input/counter/javascript.md
index ce15cf6f7a1..f794dc12691 100644
--- a/static/usage/v7/input/counter/javascript.md
+++ b/static/usage/v7/input/counter/javascript.md
@@ -1,7 +1,13 @@
 ```html
 <ion-input label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-input>
 
-<ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" counter="true" maxlength="20"></ion-input>
+<ion-input
+  id="custom-input"
+  label="Custom Counter Format"
+  label-placement="floating"
+  counter="true"
+  maxlength="20"
+></ion-input>
 
 <script>
   const customInput = document.querySelector('#custom-input');
diff --git a/static/usage/v7/input/counter/react.md b/static/usage/v7/input/counter/react.md
index f0b8f6e2344..f3c6cdcd5a6 100644
--- a/static/usage/v7/input/counter/react.md
+++ b/static/usage/v7/input/counter/react.md
@@ -6,8 +6,15 @@ function Example() {
   return (
     <>
       <IonInput label="Default counter" labelPlacement="floating" counter={true} maxlength={20}></IonInput>
-      
-      <IonInput id="custom-input" label="Custom Counter Format" labelPlacement="floating" counter={true} maxlength={20} counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}></IonInput>
+
+      <IonInput
+        id="custom-input"
+        label="Custom Counter Format"
+        labelPlacement="floating"
+        counter={true}
+        maxlength={20}
+        counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}
+      ></IonInput>
     </>
   );
 }
diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
index 2cca8bf2f03..c601abc2c3d 100644
--- a/static/usage/v7/input/counter/vue.md
+++ b/static/usage/v7/input/counter/vue.md
@@ -1,8 +1,15 @@
 ```html
 <template>
   <ion-input label="Default counter" label-placement="floating" :counter="true" maxlength="20"></ion-input>
-  
-  <ion-input id="custom-input" label="Custom Counter Format" label-placement="floating" :counter="true" maxlength="20" :counter-formatter="customFormatter"></ion-input>
+
+  <ion-input
+    id="custom-input"
+    label="Custom Counter Format"
+    label-placement="floating"
+    :counter="true"
+    maxlength="20"
+    :counter-formatter="customFormatter"
+  ></ion-input>
 </template>
 
 <script lang="ts">
@@ -14,8 +21,8 @@
     methods: {
       customFormatter(inputLength, maxLength) {
         return `${maxLength - inputLength} characters remaining`;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
index 43ca4194ff3..d7894cda783 100644
--- a/static/usage/v7/input/fill/demo.html
+++ b/static/usage/v7/input/fill/demo.html
@@ -1,36 +1,39 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        width: 300px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      width: 300px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
-
-        <ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
 
+          <ion-input
+            label="Outline input"
+            label-placement="floating"
+            fill="outline"
+            placeholder="Enter text"
+          ></ion-input>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md
index 10fcef1cb28..7a702b37d08 100644
--- a/static/usage/v7/input/fill/index.md
+++ b/static/usage/v7/input/fill/index.md
@@ -5,7 +5,7 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground 
+<Playground
   version="7"
   code={{ javascript, react, vue, angular }}
   src="usage/v7/input/fill/demo.html"
diff --git a/static/usage/v7/input/fill/react.md b/static/usage/v7/input/fill/react.md
index 834ca7f96ea..d62ea62084c 100644
--- a/static/usage/v7/input/fill/react.md
+++ b/static/usage/v7/input/fill/react.md
@@ -6,9 +6,9 @@ function Example() {
   return (
     <>
       <IonInput label="Solid input" labelPlacement="floating" fill="solid" placeholder="Enter text"></IonInput>
-      
+
       <br />
-      
+
       <IonInput label="Outline input" labelPlacement="floating" fill="outline" placeholder="Enter text"></IonInput>
     </>
   );
diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md
index f17fd6e151d..d1f2e440b05 100644
--- a/static/usage/v7/input/fill/vue.md
+++ b/static/usage/v7/input/fill/vue.md
@@ -1,9 +1,9 @@
 ```html
 <template>
   <ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>
-  
+
   <br />
-  
+
   <ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 </template>
 
diff --git a/static/usage/v7/input/filtering/angular/example_component_html.md b/static/usage/v7/input/filtering/angular/example_component_html.md
index da2f4776bd2..31ddc03f197 100644
--- a/static/usage/v7/input/filtering/angular/example_component_html.md
+++ b/static/usage/v7/input/filtering/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <ion-item>
     <ion-input
-      label="Alphanumeric Characters" 
+      label="Alphanumeric Characters"
       [value]="inputModel"
       (ionInput)="onInput($event)"
       #ionInputEl
diff --git a/static/usage/v7/input/filtering/angular/example_component_ts.md b/static/usage/v7/input/filtering/angular/example_component_ts.md
index 03f71066cc3..b0fc6a3331f 100644
--- a/static/usage/v7/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v7/input/filtering/angular/example_component_ts.md
@@ -8,15 +8,15 @@ import type { IonInput } from '@ionic/angular';
 })
 export class ExampleComponent {
   inputModel = '';
-  
+
   @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
-  
+
   onInput(ev) {
     const value = ev.target!.value;
-    
+
     // Removes non alphanumeric characters
-    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
-    
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
     /**
      * Update both the state variable and
      * the component to keep them in sync.
diff --git a/static/usage/v7/input/filtering/demo.html b/static/usage/v7/input/filtering/demo.html
index e915340712d..d92ff4817a4 100644
--- a/static/usage/v7/input/filtering/demo.html
+++ b/static/usage/v7/input/filtering/demo.html
@@ -1,38 +1,36 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Alphanumeric Characters"></ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-input label="Alphanumeric Characters"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const input = document.querySelector('ion-input');
-    input.addEventListener('ionInput', (ev) => {
-      const value = ev.target.value;
-
-      // Removes non alphanumeric characters
-      input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
-    });
-  </script>
-</body>
+    <script>
+      const input = document.querySelector('ion-input');
+      input.addEventListener('ionInput', (ev) => {
+        const value = ev.target.value;
 
+        // Removes non alphanumeric characters
+        input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
+      });
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/input/filtering/index.md b/static/usage/v7/input/filtering/index.md
index f5f4019cf97..601fdc7cb82 100644
--- a/static/usage/v7/input/filtering/index.md
+++ b/static/usage/v7/input/filtering/index.md
@@ -7,14 +7,18 @@ 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,
+<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/input/filtering/demo.html" />
+  }}
+  src="usage/v7/input/filtering/demo.html"
+/>
diff --git a/static/usage/v7/input/filtering/javascript.md b/static/usage/v7/input/filtering/javascript.md
index b70d42c6dd1..37af94dd426 100644
--- a/static/usage/v7/input/filtering/javascript.md
+++ b/static/usage/v7/input/filtering/javascript.md
@@ -10,7 +10,7 @@
   input.addEventListener('ionInput', (ev) => {
     const value = ev.target.value;
     // Removes non alphanumeric characters
-    input.value = value.replace(/[^a-zA-Z0-9]+/g,'');
+    input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
   });
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/input/filtering/react.md b/static/usage/v7/input/filtering/react.md
index 7218199a3d2..1722f8ad9af 100644
--- a/static/usage/v7/input/filtering/react.md
+++ b/static/usage/v7/input/filtering/react.md
@@ -3,36 +3,31 @@ import React, { useState, useRef } from 'react';
 import { IonInput, IonItem, IonList } from '@ionic/react';
 
 function Example() {
-  const [inputModel, setInputModel ] = useState('');
+  const [inputModel, setInputModel] = useState('');
   const ionInputEl = useRef<HTMLIonInputElement>(null);
-  
+
   const onInput = (ev: Event) => {
     const value = (ev.target as HTMLIonInputElement).value as string;
-    
+
     // Removes non alphanumeric characters
-    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
-    
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
     /**
      * Update both the state variable and
      * the component to keep them in sync.
      */
     setInputModel(filteredValue);
-    
+
     const inputCmp = ionInputEl.current;
     if (inputCmp !== null) {
       inputCmp.value = filteredValue;
     }
-  }
-  
+  };
+
   return (
     <IonList>
       <IonItem>
-        <IonInput
-          label="Alphanumeric Characters"
-          value={inputModel}
-          onIonInput={onInput}
-          ref={ionInputEl}
-        ></IonInput>
+        <IonInput label="Alphanumeric Characters" value={inputModel} onIonInput={onInput} ref={ionInputEl}></IonInput>
       </IonItem>
     </IonList>
   );
diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md
index dd93e9bb2c7..a95e5dcc843 100644
--- a/static/usage/v7/input/filtering/vue.md
+++ b/static/usage/v7/input/filtering/vue.md
@@ -3,7 +3,7 @@
   <ion-list>
     <ion-item>
       <ion-input
-        label="Alphanumeric Characters" 
+        label="Alphanumeric Characters"
         :value="inputModel"
         @ionInput="onInput($event)"
         ref="ionInputEl"
@@ -23,24 +23,24 @@
       const inputModel = ref('');
       const onInput = (ev) => {
         const value = ev.target!.value;
-        
+
         // Removes non alphanumeric characters
-        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
-        
+        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
         /**
          * Update both the state variable and
          * the component to keep them in sync.
          */
         inputModel.value = filteredValue;
-        
+
         const inputCmp = ionInputEl.value;
         if (inputCmp !== undefined) {
           inputCmp.$el.value = filteredValue;
         }
-      }
-      
+      };
+
       return { ionInputEl, inputModel, onInput };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/input/helper-error/angular.md b/static/usage/v7/input/helper-error/angular.md
index 9f75f6b070f..ba5030c0026 100644
--- a/static/usage/v7/input/helper-error/angular.md
+++ b/static/usage/v7/input/helper-error/angular.md
@@ -6,7 +6,7 @@
   labelPlacement="floating"
   helperText="Enter a valid email"
   errorText="Invalid email"
-  ngModel 
+  ngModel
   email
 ></ion-input>
 ```
diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
index 6cc21cf8492..cf2c371af95 100644
--- a/static/usage/v7/input/helper-error/demo.html
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -1,56 +1,62 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    .container ion-input {
-      width: 300px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-input type="email" fill="solid" label="Email" label-placement="floating" helper-text="Enter a valid email"
-          error-text="Invalid email"></ion-input>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const input = document.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;
-
-      input.classList.remove('ion-valid');
-      input.classList.remove('ion-invalid');
-
-      if (value === "") return;
-
-      validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid');
-    }
-
-    const markTouched = () => {
-      input.classList.add('ion-touched');
-    }
-  </script>
-</body>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container ion-input {
+        width: 300px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-input
+            type="email"
+            fill="solid"
+            label="Email"
+            label-placement="floating"
+            helper-text="Enter a valid email"
+            error-text="Invalid email"
+          ></ion-input>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const input = document.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;
+
+        input.classList.remove('ion-valid');
+        input.classList.remove('ion-invalid');
+
+        if (value === '') return;
+
+        validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid');
+      };
+
+      const markTouched = () => {
+        input.classList.add('ion-touched');
+      };
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/input/helper-error/javascript.md b/static/usage/v7/input/helper-error/javascript.md
index 16cd161715d..55d306aa225 100644
--- a/static/usage/v7/input/helper-error/javascript.md
+++ b/static/usage/v7/input/helper-error/javascript.md
@@ -15,7 +15,9 @@
   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])?)*$/);
+    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) => {
@@ -24,13 +26,13 @@
     input.classList.remove('ion-valid');
     input.classList.remove('ion-invalid');
 
-    if (value === "") return;
+    if (value === '') return;
 
     validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid');
-  }
+  };
 
   const markTouched = () => {
     input.classList.add('ion-touched');
-  }
+  };
 </script>
 ```
diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md
index 33934b31ae2..ce801d04ac7 100644
--- a/static/usage/v7/input/helper-error/vue.md
+++ b/static/usage/v7/input/helper-error/vue.md
@@ -21,7 +21,9 @@
     components: { IonInput },
     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])?)*$/);
+        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) {
@@ -38,8 +40,8 @@
       },
 
       markTouched() {
-        this.$refs.input.$el.classList.add('ion-touched')
-      }
+        this.$refs.input.$el.classList.add('ion-touched');
+      },
     },
   });
 </script>
diff --git a/static/usage/v7/input/label-placement/angular.md b/static/usage/v7/input/label-placement/angular.md
index 1257ff9c641..151adb55b5d 100644
--- a/static/usage/v7/input/label-placement/angular.md
+++ b/static/usage/v7/input/label-placement/angular.md
@@ -3,15 +3,15 @@
   <ion-item>
     <ion-input label="Default label" placeholder="Enter text"></ion-input>
   </ion-item>
-  
+
   <ion-item>
     <ion-input label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-input>
   </ion-item>
-  
+
   <ion-item>
     <ion-input label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-input>
   </ion-item>
-  
+
   <ion-item>
     <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
diff --git a/static/usage/v7/input/label-placement/demo.html b/static/usage/v7/input/label-placement/demo.html
index ca7f2ff1d65..1b96b99673a 100644
--- a/static/usage/v7/input/label-placement/demo.html
+++ b/static/usage/v7/input/label-placement/demo.html
@@ -1,46 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Default label" placeholder="Enter text"></ion-input>
+            </ion-item>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-input label="Default label" placeholder="Enter text"></ion-input>
-          </ion-item>
+            <ion-item>
+              <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-input>
+            </ion-item>
 
-          <ion-item>
-            <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Floating label" label-placement="floating" placeholder="Enter text"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+            <ion-item>
+              <ion-input label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-input>
+            </ion-item>
 
+            <ion-item>
+              <ion-input label="Floating label" label-placement="floating" placeholder="Enter text"></ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/input/label-placement/index.md b/static/usage/v7/input/label-placement/index.md
index ffc814dbec5..a3f377c079a 100644
--- a/static/usage/v7/input/label-placement/index.md
+++ b/static/usage/v7/input/label-placement/index.md
@@ -5,4 +5,9 @@ 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/label-placement/demo.html" size="300px" />
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/input/label-placement/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/input/label-placement/javascript.md b/static/usage/v7/input/label-placement/javascript.md
index e08cf249e14..f9c79fc46ae 100644
--- a/static/usage/v7/input/label-placement/javascript.md
+++ b/static/usage/v7/input/label-placement/javascript.md
@@ -3,15 +3,15 @@
   <ion-item>
     <ion-input label="Default label" placeholder="Enter text"></ion-input>
   </ion-item>
-  
+
   <ion-item>
     <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-input>
   </ion-item>
-  
+
   <ion-item>
     <ion-input label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-input>
   </ion-item>
-  
+
   <ion-item>
     <ion-input label="Floating label" label-placement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
diff --git a/static/usage/v7/input/label-placement/react.md b/static/usage/v7/input/label-placement/react.md
index 59a819eaab4..aa4f1b3c484 100644
--- a/static/usage/v7/input/label-placement/react.md
+++ b/static/usage/v7/input/label-placement/react.md
@@ -8,15 +8,15 @@ function Example() {
       <IonItem>
         <IonInput label="Default label" placeholder="Enter text"></IonInput>
       </IonItem>
-      
+
       <IonItem>
         <IonInput label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></IonInput>
       </IonItem>
-      
+
       <IonItem>
         <IonInput label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></IonInput>
       </IonItem>
-      
+
       <IonItem>
         <IonInput label="Floating label" labelPlacement="floating" placeholder="Enter text"></IonInput>
       </IonItem>
diff --git a/static/usage/v7/input/label-placement/vue.md b/static/usage/v7/input/label-placement/vue.md
index 782e77971c6..8854647965d 100644
--- a/static/usage/v7/input/label-placement/vue.md
+++ b/static/usage/v7/input/label-placement/vue.md
@@ -4,15 +4,15 @@
     <ion-item>
       <ion-input label="Default label" placeholder="Enter text"></ion-input>
     </ion-item>
-    
+
     <ion-item>
       <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-input>
     </ion-item>
-    
+
     <ion-item>
       <ion-input label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-input>
     </ion-item>
-    
+
     <ion-item>
       <ion-input label="Floating label" label-placement="floating" placeholder="Enter text"></ion-input>
     </ion-item>
diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md
index e28bf81ce00..34e3ccaece5 100644
--- a/static/usage/v7/input/migration/index.md
+++ b/static/usage/v7/input/migration/index.md
@@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem';
 <!-- After -->
 
 <!--
-  Metadata such as counters and helper text should not 
-  be used when an input is in an item/list. If you need to 
+  Metadata such as counters and helper text should not
+  be used when an input is in an item/list. If you need to
   provide more context on a input, consider using an ion-note
   underneath the ion-list.
 -->
@@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem';
 <!-- After -->
 
 <!--
-  Metadata such as counters and helper text should not 
-  be used when an input is in an item/list. If you need to 
+  Metadata such as counters and helper text should not
+  be used when an input is in an item/list. If you need to
   provide more context on a input, consider using an ion-note
   underneath the ion-list.
 -->
@@ -171,8 +171,8 @@ import TabItem from '@theme/TabItem';
 {/* After */}
 
 {/*
-  Metadata such as counters and helper text should not 
-  be used when an input is in an item/list. If you need to 
+  Metadata such as counters and helper text should not
+  be used when an input is in an item/list. If you need to
   provide more context on a input, consider using an IonNote
   underneath the IonList.
 */}
@@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem';
 <!-- After -->
 
 <!--
-  Metadata such as counters and helper text should not 
-  be used when an input is in an item/list. If you need to 
+  Metadata such as counters and helper text should not
+  be used when an input is in an item/list. If you need to
   provide more context on a input, consider using an ion-note
   underneath the ion-list.
 -->
@@ -245,4 +245,4 @@ import TabItem from '@theme/TabItem';
 ```
 </TabItem>
 </Tabs>
-````
\ No newline at end of file
+````
diff --git a/static/usage/v7/input/theming/colors/demo.html b/static/usage/v7/input/theming/colors/demo.html
index 3723e443ae0..dd204e4074a 100644
--- a/static/usage/v7/input/theming/colors/demo.html
+++ b/static/usage/v7/input/theming/colors/demo.html
@@ -1,44 +1,42 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+        flex-wrap: wrap;
+      }
 
-  <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 aria-label="Primary input" color="primary" placeholder="Primary input"></ion-input>
-        <ion-input aria-label="Secondary input" color="secondary" placeholder="Secondary input"></ion-input>
-        <ion-input aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></ion-input>
-        <ion-input aria-label="Success input" color="success" placeholder="Success input"></ion-input>
-        <ion-input aria-label="Warning input" color="warning" placeholder="Warning input"></ion-input>
-        <ion-input aria-label="Danger input" color="danger" placeholder="Danger input"></ion-input>
-        <ion-input aria-label="Light input" color="light" placeholder="Light input"></ion-input>
-        <ion-input aria-label="Medium input" color="medium" placeholder="Medium input"></ion-input>
-        <ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+      .container ion-input {
+        flex: 1 1 33%;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-input aria-label="Primary input" color="primary" placeholder="Primary input"></ion-input>
+          <ion-input aria-label="Secondary input" color="secondary" placeholder="Secondary input"></ion-input>
+          <ion-input aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></ion-input>
+          <ion-input aria-label="Success input" color="success" placeholder="Success input"></ion-input>
+          <ion-input aria-label="Warning input" color="warning" placeholder="Warning input"></ion-input>
+          <ion-input aria-label="Danger input" color="danger" placeholder="Danger input"></ion-input>
+          <ion-input aria-label="Light input" color="light" placeholder="Light input"></ion-input>
+          <ion-input aria-label="Medium input" color="medium" placeholder="Medium input"></ion-input>
+          <ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
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
index 154e20ad0cc..3aa7fddda86 100644
--- 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
@@ -3,7 +3,7 @@ ion-input.custom {
   --background: #373737;
   --color: #fff;
   --placeholder-color: #ddd;
-  --placeholder-opacity: .8;
+  --placeholder-opacity: 0.8;
 
   --padding-bottom: 10px;
   --padding-end: 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
index c3ffd4077fe..243bb91401b 100644
--- 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
@@ -1,8 +1,8 @@
 ```html
 <ion-input
-  aria-label="Custom input" 
-  placeholder="Custom input" 
-  class="custom" 
+  aria-label="Custom input"
+  placeholder="Custom input"
+  class="custom"
   helperText="Helper text"
   [counter]="true"
   [maxlength]="20"
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
index 5cd06f9e4a0..9acf641e5ff 100644
--- a/static/usage/v7/input/theming/css-properties/demo.html
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -1,55 +1,53 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 200px;
+        margin: 0 auto;
+      }
 
-  <style>
-    .container {
-      max-width: 200px;
-      margin: 0 auto;
-    }
+      ion-input.custom {
+        --background: #373737;
+        --color: #fff;
+        --placeholder-color: #ddd;
+        --placeholder-opacity: 0.8;
 
-    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;
+      }
 
-      --padding-bottom: 10px;
-      --padding-end: 10px;
-      --padding-start: 10px;
-      --padding-top: 10px;
-    }
-
-    ion-input.custom .helper-text,
-    ion-input.custom .counter {
-      color: var(--ion-color-step-700, #373737);
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-input
-          aria-label="Custom input"
-          placeholder="Custom input"
-          class="custom"
-          helper-text="Helper text"
-          counter="true"
-          maxlength="20"
-        ></ion-input>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+      ion-input.custom .helper-text,
+      ion-input.custom .counter {
+        color: var(--ion-color-step-700, #373737);
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-input
+            aria-label="Custom input"
+            placeholder="Custom input"
+            class="custom"
+            helper-text="Helper text"
+            counter="true"
+            maxlength="20"
+          ></ion-input>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md
index 4cbd6339c3f..168adce6d2d 100644
--- a/static/usage/v7/input/theming/css-properties/javascript.md
+++ b/static/usage/v7/input/theming/css-properties/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-input
-  aria-label="Custom input" 
-  placeholder="Custom input" 
+  aria-label="Custom input"
+  placeholder="Custom input"
   class="custom"
   helper-text="Helper text"
   counter="true"
@@ -13,14 +13,14 @@
     --background: #373737;
     --color: #fff;
     --placeholder-color: #ddd;
-    --placeholder-opacity: .8;
+    --placeholder-opacity: 0.8;
 
     --padding-bottom: 10px;
     --padding-end: 10px;
     --padding-start: 10px;
     --padding-top: 10px;
   }
-  
+
   ion-input.custom .helper-text,
   ion-input.custom .counter {
     color: var(--ion-color-step-700, #373737);
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
index c83de40d5f0..45406a59340 100644
--- a/static/usage/v7/input/theming/css-properties/react/main_css.md
+++ b/static/usage/v7/input/theming/css-properties/react/main_css.md
@@ -3,7 +3,7 @@ ion-input.custom {
   --background: #373737;
   --color: #fff;
   --placeholder-color: #ddd;
-  --placeholder-opacity: .8;
+  --placeholder-opacity: 0.8;
 
   --padding-bottom: 10px;
   --padding-end: 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
index b1e91327713..8206bb3161e 100644
--- a/static/usage/v7/input/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/input/theming/css-properties/react/main_tsx.md
@@ -7,8 +7,8 @@ import './main.css';
 function Example() {
   return (
     <IonInput
-      aria-label="Custom input" 
-      placeholder="Custom input" 
+      aria-label="Custom input"
+      placeholder="Custom input"
       class="custom"
       helperText="Helper text"
       counter={true}
diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md
index 8a7bd9d898e..898bc493e16 100644
--- a/static/usage/v7/input/theming/css-properties/vue.md
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -1,8 +1,8 @@
 ```html
 <template>
   <ion-input
-    aria-label="Custom input" 
-    placeholder="Custom input" 
+    aria-label="Custom input"
+    placeholder="Custom input"
     class="custom"
     helper-text="Helper text"
     :counter="true"
@@ -24,14 +24,14 @@
     --background: #373737;
     --color: #fff;
     --placeholder-color: #ddd;
-    --placeholder-opacity: .8;
+    --placeholder-opacity: 0.8;
 
     --padding-bottom: 10px;
     --padding-end: 10px;
     --padding-start: 10px;
     --padding-top: 10px;
   }
-  
+
   ion-input.custom .helper-text,
   ion-input.custom .counter {
     color: var(--ion-color-step-700, #373737);
diff --git a/static/usage/v7/input/types/angular.md b/static/usage/v7/input/types/angular.md
index 6506b2ca271..ff696b22cd8 100644
--- a/static/usage/v7/input/types/angular.md
+++ b/static/usage/v7/input/types/angular.md
@@ -4,19 +4,19 @@
     <ion-item>
       <ion-input label="Text input" placeholder="Enter text"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Number input" type="number" placeholder="000"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Password input" type="password" value="password"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
     </ion-item>
diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html
index 68b043daa52..f1e21f6bea9 100644
--- a/static/usage/v7/input/types/demo.html
+++ b/static/usage/v7/input/types/demo.html
@@ -1,50 +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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-input label="Text input" placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Number input" type="number" placeholder="000"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Password input" type="password" value="password"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Text input" placeholder="Enter text"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Number input" type="number" placeholder="000"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Password input" type="password" value="password"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input label="Telephone 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/v7/input/types/javascript.md b/static/usage/v7/input/types/javascript.md
index 6506b2ca271..ff696b22cd8 100644
--- a/static/usage/v7/input/types/javascript.md
+++ b/static/usage/v7/input/types/javascript.md
@@ -4,19 +4,19 @@
     <ion-item>
       <ion-input label="Text input" placeholder="Enter text"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Number input" type="number" placeholder="000"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Password input" type="password" value="password"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
     </ion-item>
diff --git a/static/usage/v7/input/types/react.md b/static/usage/v7/input/types/react.md
index 7a90e30e81a..e5534ec2e1e 100644
--- a/static/usage/v7/input/types/react.md
+++ b/static/usage/v7/input/types/react.md
@@ -8,19 +8,19 @@ function Example() {
       <IonItem>
         <IonInput label="Text input" placeholder="Enter text"></IonInput>
       </IonItem>
-    
+
       <IonItem>
         <IonInput label="Number input" type="number" placeholder="000"></IonInput>
       </IonItem>
-    
+
       <IonItem>
         <IonInput label="Password input" type="password" value="password"></IonInput>
       </IonItem>
-    
+
       <IonItem>
         <IonInput label="Email input" type="email" placeholder="email@domain.com"></IonInput>
       </IonItem>
-    
+
       <IonItem>
         <IonInput label="Telephone input" type="tel" placeholder="888-888-8888"></IonInput>
       </IonItem>
diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md
index 2415bc71ea5..752f60c183f 100644
--- a/static/usage/v7/input/types/vue.md
+++ b/static/usage/v7/input/types/vue.md
@@ -4,19 +4,19 @@
     <ion-item>
       <ion-input label="Text input" placeholder="Enter text"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Number input" type="number" placeholder="000"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Password input" type="password" value="password"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
     </ion-item>
-  
+
     <ion-item>
       <ion-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
     </ion-item>
diff --git a/static/usage/v7/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular.md
index d74e5b05549..35dccbdbc88 100644
--- a/static/usage/v7/item-divider/basic/angular.md
+++ b/static/usage/v7/item-divider/basic/angular.md
@@ -2,9 +2,7 @@
 <ion-list>
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section A
-      </ion-label>
+      <ion-label> Section A </ion-label>
     </ion-item-divider>
 
     <ion-item>
@@ -20,9 +18,7 @@
 
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section B
-      </ion-label>
+      <ion-label> Section B </ion-label>
     </ion-item-divider>
 
     <ion-item>
diff --git a/static/usage/v7/item-divider/basic/demo.html b/static/usage/v7/item-divider/basic/demo.html
index c1159861489..77ff85117d6 100644
--- a/static/usage/v7/item-divider/basic/demo.html
+++ b/static/usage/v7/item-divider/basic/demo.html
@@ -1,66 +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 Divider</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-              <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-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
+              <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/v7/item-divider/basic/javascript.md b/static/usage/v7/item-divider/basic/javascript.md
index d74e5b05549..35dccbdbc88 100644
--- a/static/usage/v7/item-divider/basic/javascript.md
+++ b/static/usage/v7/item-divider/basic/javascript.md
@@ -2,9 +2,7 @@
 <ion-list>
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section A
-      </ion-label>
+      <ion-label> Section A </ion-label>
     </ion-item-divider>
 
     <ion-item>
@@ -20,9 +18,7 @@
 
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Section B
-      </ion-label>
+      <ion-label> Section B </ion-label>
     </ion-item-divider>
 
     <ion-item>
diff --git a/static/usage/v7/item-divider/basic/react.md b/static/usage/v7/item-divider/basic/react.md
index 289f1727c8d..14ad85b1c82 100644
--- a/static/usage/v7/item-divider/basic/react.md
+++ b/static/usage/v7/item-divider/basic/react.md
@@ -7,9 +7,7 @@ function Example() {
     <IonList>
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Section A
-          </IonLabel>
+          <IonLabel>Section A</IonLabel>
         </IonItemDivider>
 
         <IonItem>
@@ -25,9 +23,7 @@ function Example() {
 
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Section B
-          </IonLabel>
+          <IonLabel>Section B</IonLabel>
         </IonItemDivider>
 
         <IonItem>
diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md
index 95f26ebc027..22c9565c278 100644
--- a/static/usage/v7/item-divider/basic/vue.md
+++ b/static/usage/v7/item-divider/basic/vue.md
@@ -3,9 +3,7 @@
   <ion-list>
     <ion-item-group>
       <ion-item-divider>
-        <ion-label>
-          Section A
-        </ion-label>
+        <ion-label> Section A </ion-label>
       </ion-item-divider>
 
       <ion-item>
@@ -21,9 +19,7 @@
 
     <ion-item-group>
       <ion-item-divider>
-        <ion-label>
-          Section B
-        </ion-label>
+        <ion-label> Section B </ion-label>
       </ion-item-divider>
 
       <ion-item>
diff --git a/static/usage/v7/item-divider/theming/colors/demo.html b/static/usage/v7/item-divider/theming/colors/demo.html
index c48614ce69d..b325636c866 100644
--- a/static/usage/v7/item-divider/theming/colors/demo.html
+++ b/static/usage/v7/item-divider/theming/colors/demo.html
@@ -1,59 +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 Divider</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/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
index b3b1bb4da25..172fdad114f 100644
--- 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
@@ -1,7 +1,5 @@
 ```html
 <ion-item-divider>
-  <ion-label>
-    Item Divider
-  </ion-label>
+  <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
index 44d9d92e0ec..79c65b82ac8 100644
--- a/static/usage/v7/item-divider/theming/css-properties/demo.html
+++ b/static/usage/v7/item-divider/theming/css-properties/demo.html
@@ -1,40 +1,36 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-item-divider {
+        --background: #19422d;
+        --color: #fff;
 
-  <style>
-    ion-item-divider {
-      --background: #19422d;
-      --color: #fff;
+        --padding-top: 10px;
+        --padding-bottom: 10px;
+        --padding-start: 20px;
+        --padding-end: 20px;
+      }
+    </style>
+  </head>
 
-      --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
+  <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/v7/item-divider/theming/css-properties/javascript.md b/static/usage/v7/item-divider/theming/css-properties/javascript.md
index 6622b6d7e3f..0c0cdc26f55 100644
--- a/static/usage/v7/item-divider/theming/css-properties/javascript.md
+++ b/static/usage/v7/item-divider/theming/css-properties/javascript.md
@@ -12,8 +12,6 @@
 </style>
 
 <ion-item-divider>
-  <ion-label>
-    Item Divider
-  </ion-label>
+  <ion-label> Item Divider </ion-label>
 </ion-item-divider>
 ```
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
index 6cd8d464d7e..b3083033541 100644
--- 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
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonItemDivider, IonLabel } from '@ionic/react';
@@ -8,9 +7,7 @@ import './main.css';
 function Example() {
   return (
     <IonItemDivider>
-      <IonLabel>
-        Item Divider
-      </IonLabel>
+      <IonLabel>Item Divider</IonLabel>
     </IonItemDivider>
   );
 }
diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md
index 3589bcc7cd4..950e3775d83 100644
--- a/static/usage/v7/item-divider/theming/css-properties/vue.md
+++ b/static/usage/v7/item-divider/theming/css-properties/vue.md
@@ -1,9 +1,7 @@
 ```html
 <template>
   <ion-item-divider>
-    <ion-label>
-      Item Divider
-    </ion-label>
+    <ion-label> Item Divider </ion-label>
   </ion-item-divider>
 </template>
 
@@ -12,7 +10,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItemDivider }
+    components: { IonItemDivider },
   });
 </script>
 
diff --git a/static/usage/v7/item-group/basic/demo.html b/static/usage/v7/item-group/basic/demo.html
index e46bc1a8cef..80dc2487456 100644
--- a/static/usage/v7/item-group/basic/demo.html
+++ b/static/usage/v7/item-group/basic/demo.html
@@ -1,60 +1,58 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-            <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-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
+            <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/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular.md
index a451b58c9c4..2708fde7acc 100644
--- a/static/usage/v7/item-group/sliding-items/angular.md
+++ b/static/usage/v7/item-group/sliding-items/angular.md
@@ -1,94 +1,66 @@
 ```html
 <ion-item-group>
   <ion-item-divider>
-    <ion-label>
-      Fruits
-    </ion-label>
+    <ion-label> Fruits </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Grapes
-      </ion-label>
+      <ion-label> Grapes </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Apples
-      </ion-label>
+      <ion-label> Apples </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Bananas </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Vegetables </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Carrots
-      </ion-label>
+      <ion-label> Carrots </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Broccoli
-      </ion-label>
+      <ion-label> Broccoli </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Celery </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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
index 7994b575b79..689a26c2c24 100644
--- a/static/usage/v7/item-group/sliding-items/demo.html
+++ b/static/usage/v7/item-group/sliding-items/demo.html
@@ -1,122 +1,92 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-                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>
-              <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-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-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>
-                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>
-              <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
+            <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/v7/item-group/sliding-items/javascript.md b/static/usage/v7/item-group/sliding-items/javascript.md
index a451b58c9c4..2708fde7acc 100644
--- a/static/usage/v7/item-group/sliding-items/javascript.md
+++ b/static/usage/v7/item-group/sliding-items/javascript.md
@@ -1,94 +1,66 @@
 ```html
 <ion-item-group>
   <ion-item-divider>
-    <ion-label>
-      Fruits
-    </ion-label>
+    <ion-label> Fruits </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Grapes
-      </ion-label>
+      <ion-label> Grapes </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Apples
-      </ion-label>
+      <ion-label> Apples </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Bananas </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Vegetables </ion-label>
   </ion-item-divider>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Carrots
-      </ion-label>
+      <ion-label> Carrots </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <ion-item-option> Favorite </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 
   <ion-item-sliding>
     <ion-item>
-      <ion-label>
-        Broccoli
-      </ion-label>
+      <ion-label> Broccoli </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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-label> Celery </ion-label>
     </ion-item>
     <ion-item-options>
-      <ion-item-option>
-        Favorite
-      </ion-item-option>
+      <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
index 2ca4d7ca380..716935f065c 100644
--- a/static/usage/v7/item-group/sliding-items/react.md
+++ b/static/usage/v7/item-group/sliding-items/react.md
@@ -1,100 +1,80 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
+import {
+  IonItem,
+  IonItemDivider,
+  IonItemGroup,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+} from '@ionic/react';
 
 function Example() {
   return (
     <>
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Fruits
-          </IonLabel>
+          <IonLabel>Fruits</IonLabel>
         </IonItemDivider>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Grapes
-            </IonLabel>
+            <IonLabel>Grapes</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Apples
-            </IonLabel>
+            <IonLabel>Apples</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem lines="none">
-            <IonLabel>
-              Bananas
-            </IonLabel>
+            <IonLabel>Bananas</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
       </IonItemGroup>
 
       <IonItemGroup>
         <IonItemDivider>
-          <IonLabel>
-            Vegetables
-          </IonLabel>
+          <IonLabel>Vegetables</IonLabel>
         </IonItemDivider>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Carrots
-            </IonLabel>
+            <IonLabel>Carrots</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem>
-            <IonLabel>
-              Broccoli
-            </IonLabel>
+            <IonLabel>Broccoli</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
 
         <IonItemSliding>
           <IonItem lines="none">
-            <IonLabel>
-              Celery
-            </IonLabel>
+            <IonLabel>Celery</IonLabel>
           </IonItem>
           <IonItemOptions>
-            <IonItemOption>
-              Favorite
-            </IonItemOption>
+            <IonItemOption>Favorite</IonItemOption>
           </IonItemOptions>
         </IonItemSliding>
       </IonItemGroup>
diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md
index 5110ba1abed..43109034598 100644
--- a/static/usage/v7/item-group/sliding-items/vue.md
+++ b/static/usage/v7/item-group/sliding-items/vue.md
@@ -2,101 +2,81 @@
 <template>
   <ion-item-group>
     <ion-item-divider>
-      <ion-label>
-        Fruits
-      </ion-label>
+      <ion-label> Fruits </ion-label>
     </ion-item-divider>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Grapes
-        </ion-label>
+        <ion-label> Grapes </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <ion-item-option> Favorite </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Apples
-        </ion-label>
+        <ion-label> Apples </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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-label> Bananas </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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-label> Vegetables </ion-label>
     </ion-item-divider>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Carrots
-        </ion-label>
+        <ion-label> Carrots </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <ion-item-option> Favorite </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
 
     <ion-item-sliding>
       <ion-item>
-        <ion-label>
-          Broccoli
-        </ion-label>
+        <ion-label> Broccoli </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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-label> Celery </ion-label>
       </ion-item>
       <ion-item-options>
-        <ion-item-option>
-          Favorite
-        </ion-item-option>
+        <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 {
+    IonItem,
+    IonItemDivider,
+    IonItemGroup,
+    IonItemOption,
+    IonItemOptions,
+    IonItemSliding,
+    IonLabel,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
diff --git a/static/usage/v7/item-sliding/basic/demo.html b/static/usage/v7/item-sliding/basic/demo.html
index f0b445d8063..2349be859a6 100644
--- a/static/usage/v7/item-sliding/basic/demo.html
+++ b/static/usage/v7/item-sliding/basic/demo.html
@@ -1,66 +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 Sliding</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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-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-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>
-              <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-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>
-              <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
+              <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/v7/item-sliding/expandable/demo.html b/static/usage/v7/item-sliding/expandable/demo.html
index 5f8534da2f6..28790e13338 100644
--- a/static/usage/v7/item-sliding/expandable/demo.html
+++ b/static/usage/v7/item-sliding/expandable/demo.html
@@ -1,45 +1,43 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-              <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
+              <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/v7/item-sliding/expandable/react.md b/static/usage/v7/item-sliding/expandable/react.md
index 3cb039d08ba..6879f80f7c1 100644
--- a/static/usage/v7/item-sliding/expandable/react.md
+++ b/static/usage/v7/item-sliding/expandable/react.md
@@ -7,7 +7,9 @@ function Example() {
     <IonList>
       <IonItemSliding>
         <IonItemOptions side="start">
-          <IonItemOption color="success" expandable>Archive</IonItemOption>
+          <IonItemOption color="success" expandable>
+            Archive
+          </IonItemOption>
         </IonItemOptions>
 
         <IonItem>
@@ -16,7 +18,9 @@ function Example() {
 
         <IonItemOptions side="end">
           <IonItemOption>Favorite</IonItemOption>
-          <IonItemOption color="danger" expandable>Delete</IonItemOption>
+          <IonItemOption color="danger" expandable>
+            Delete
+          </IonItemOption>
         </IonItemOptions>
       </IonItemSliding>
     </IonList>
diff --git a/static/usage/v7/item-sliding/icons/angular.md b/static/usage/v7/item-sliding/icons/angular.md
index 2ea983f2056..6556b41e94b 100644
--- a/static/usage/v7/item-sliding/icons/angular.md
+++ b/static/usage/v7/item-sliding/icons/angular.md
@@ -30,9 +30,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Start Icons
-      </ion-label>
+      <ion-label> Sliding Item with Start Icons </ion-label>
     </ion-item>
 
     <ion-item-options side="end">
@@ -56,9 +54,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with End Icons
-      </ion-label>
+      <ion-label> Sliding Item with End Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -82,9 +78,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Top Icons
-      </ion-label>
+      <ion-label> Sliding Item with Top Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -108,9 +102,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Bottom Icons
-      </ion-label>
+      <ion-label> Sliding Item with Bottom Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
diff --git a/static/usage/v7/item-sliding/icons/demo.html b/static/usage/v7/item-sliding/icons/demo.html
index b2cc8b3c100..90179c174c4 100644
--- a/static/usage/v7/item-sliding/icons/demo.html
+++ b/static/usage/v7/item-sliding/icons/demo.html
@@ -1,156 +1,146 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/item-sliding/icons/javascript.md b/static/usage/v7/item-sliding/icons/javascript.md
index 2ea983f2056..6556b41e94b 100644
--- a/static/usage/v7/item-sliding/icons/javascript.md
+++ b/static/usage/v7/item-sliding/icons/javascript.md
@@ -30,9 +30,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Start Icons
-      </ion-label>
+      <ion-label> Sliding Item with Start Icons </ion-label>
     </ion-item>
 
     <ion-item-options side="end">
@@ -56,9 +54,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with End Icons
-      </ion-label>
+      <ion-label> Sliding Item with End Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -82,9 +78,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Top Icons
-      </ion-label>
+      <ion-label> Sliding Item with Top Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
@@ -108,9 +102,7 @@
     </ion-item-options>
 
     <ion-item>
-      <ion-label>
-        Sliding Item with Bottom Icons
-      </ion-label>
+      <ion-label> Sliding Item with Bottom Icons </ion-label>
     </ion-item>
 
     <ion-item-options>
diff --git a/static/usage/v7/item-sliding/icons/react.md b/static/usage/v7/item-sliding/icons/react.md
index be291c017e4..8961a06b352 100644
--- a/static/usage/v7/item-sliding/icons/react.md
+++ b/static/usage/v7/item-sliding/icons/react.md
@@ -36,9 +36,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with Start Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with Start Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions side="end">
@@ -62,9 +60,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with End Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with End Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions>
@@ -88,9 +84,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with Top Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with Top Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions>
@@ -114,9 +108,7 @@ function Example() {
         </IonItemOptions>
 
         <IonItem>
-          <IonLabel>
-            Sliding Item with Bottom Icons
-          </IonLabel>
+          <IonLabel>Sliding Item with Bottom Icons</IonLabel>
         </IonItem>
 
         <IonItemOptions>
diff --git a/static/usage/v7/item-sliding/icons/vue.md b/static/usage/v7/item-sliding/icons/vue.md
index 6b456c9882e..7f10c0eaa51 100644
--- a/static/usage/v7/item-sliding/icons/vue.md
+++ b/static/usage/v7/item-sliding/icons/vue.md
@@ -31,9 +31,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with Start Icons
-        </ion-label>
+        <ion-label> Sliding Item with Start Icons </ion-label>
       </ion-item>
 
       <ion-item-options side="end">
@@ -57,9 +55,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with End Icons
-        </ion-label>
+        <ion-label> Sliding Item with End Icons </ion-label>
       </ion-item>
 
       <ion-item-options>
@@ -83,9 +79,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with Top Icons
-        </ion-label>
+        <ion-label> Sliding Item with Top Icons </ion-label>
       </ion-item>
 
       <ion-item-options>
@@ -109,9 +103,7 @@
       </ion-item-options>
 
       <ion-item>
-        <ion-label>
-          Sliding Item with Bottom Icons
-        </ion-label>
+        <ion-label> Sliding Item with Bottom Icons </ion-label>
       </ion-item>
 
       <ion-item-options>
@@ -136,8 +128,8 @@
   export default defineComponent({
     components: { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
     setup() {
-      return { archive, heart, trash }
-    }
+      return { archive, heart, trash };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md
index f0b13250493..b975f267d90 100644
--- a/static/usage/v7/item/basic/angular.md
+++ b/static/usage/v7/item/basic/angular.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v7/item/basic/demo.html b/static/usage/v7/item/basic/demo.html
index 337645b0eac..9eccd18a724 100644
--- a/static/usage/v7/item/basic/demo.html
+++ b/static/usage/v7/item/basic/demo.html
@@ -1,69 +1,65 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-item>
+            <ion-label>Basic Item</ion-label>
+          </ion-item>
 
-<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>
-            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 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>
-            <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>
-            <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
+          <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/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md
index f0b13250493..b975f267d90 100644
--- a/static/usage/v7/item/basic/javascript.md
+++ b/static/usage/v7/item/basic/javascript.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md
index dfed86af19e..6154239cbf1 100644
--- a/static/usage/v7/item/basic/react.md
+++ b/static/usage/v7/item/basic/react.md
@@ -11,16 +11,14 @@ function Example() {
 
       <IonItem>
         <IonLabel>
-          Multi-line text that should ellipsis when it is too long
-          to fit on one line. Lorem ipsum dolor sit amet,
+          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,
+          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>
diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md
index 479e90196a4..37b32f7c2ca 100644
--- a/static/usage/v7/item/basic/vue.md
+++ b/static/usage/v7/item/basic/vue.md
@@ -6,17 +6,15 @@
 
   <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,
+      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.
+      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>
 
diff --git a/static/usage/v7/item/buttons/angular.md b/static/usage/v7/item/buttons/angular.md
index bf7069f48f7..4d77ff8b9d8 100644
--- a/static/usage/v7/item/buttons/angular.md
+++ b/static/usage/v7/item/buttons/angular.md
@@ -1,12 +1,8 @@
 ```html
 <ion-item>
-  <ion-button slot="start">
-    Start
-  </ion-button>
+  <ion-button slot="start"> Start </ion-button>
   <ion-label>Default Buttons</ion-label>
-  <ion-button slot="end">
-    End
-  </ion-button>
+  <ion-button slot="end"> End </ion-button>
 </ion-item>
 
 <ion-item>
@@ -33,14 +29,8 @@
 
 <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-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
index 219d9b30ea4..2e5d6c89de5 100644
--- a/static/usage/v7/item/buttons/demo.html
+++ b/static/usage/v7/item/buttons/demo.html
@@ -1,74 +1,62 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        align-items: stretch;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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">
-            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-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
+          <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/v7/item/buttons/javascript.md b/static/usage/v7/item/buttons/javascript.md
index bf7069f48f7..4d77ff8b9d8 100644
--- a/static/usage/v7/item/buttons/javascript.md
+++ b/static/usage/v7/item/buttons/javascript.md
@@ -1,12 +1,8 @@
 ```html
 <ion-item>
-  <ion-button slot="start">
-    Start
-  </ion-button>
+  <ion-button slot="start"> Start </ion-button>
   <ion-label>Default Buttons</ion-label>
-  <ion-button slot="end">
-    End
-  </ion-button>
+  <ion-button slot="end"> End </ion-button>
 </ion-item>
 
 <ion-item>
@@ -33,14 +29,8 @@
 
 <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-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
index 8776e5215fb..fda29c7f11a 100644
--- a/static/usage/v7/item/buttons/react.md
+++ b/static/usage/v7/item/buttons/react.md
@@ -7,13 +7,9 @@ function Example() {
   return (
     <>
       <IonItem>
-        <IonButton slot="start">
-          Start
-        </IonButton>
+        <IonButton slot="start">Start</IonButton>
         <IonLabel>Default Buttons</IonLabel>
-        <IonButton slot="end">
-          End
-        </IonButton>
+        <IonButton slot="end">End</IonButton>
       </IonItem>
 
       <IonItem>
diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md
index 02de38e58ab..8680f189472 100644
--- a/static/usage/v7/item/buttons/vue.md
+++ b/static/usage/v7/item/buttons/vue.md
@@ -1,13 +1,9 @@
 ```html
 <template>
   <ion-item>
-    <ion-button slot="start">
-      Start
-    </ion-button>
+    <ion-button slot="start"> Start </ion-button>
     <ion-label>Default Buttons</ion-label>
-    <ion-button slot="end">
-      End
-    </ion-button>
+    <ion-button slot="end"> End </ion-button>
   </ion-item>
 
   <ion-item>
@@ -34,15 +30,9 @@
 
   <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-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>
 
@@ -54,8 +44,8 @@
   export default defineComponent({
     components: { IonButton, IonIcon, IonItem, IonLabel },
     setup() {
-      return { home, navigate, star }
-    }
+      return { home, navigate, star };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/item/clickable/demo.html b/static/usage/v7/item/clickable/demo.html
index 8d77b13c541..58525e975ec 100644
--- a/static/usage/v7/item/clickable/demo.html
+++ b/static/usage/v7/item/clickable/demo.html
@@ -1,44 +1,42 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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 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>
-          <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
+          <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/v7/item/detail-arrows/demo.html b/static/usage/v7/item/detail-arrows/demo.html
index 07aa3e65bc7..aeb2acd1200 100644
--- a/static/usage/v7/item/detail-arrows/demo.html
+++ b/static/usage/v7/item/detail-arrows/demo.html
@@ -1,64 +1,62 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md
index d341c004f15..54010095652 100644
--- a/static/usage/v7/item/detail-arrows/vue.md
+++ b/static/usage/v7/item/detail-arrows/vue.md
@@ -51,3 +51,4 @@
     },
   });
 </script>
+```
diff --git a/static/usage/v7/item/icons/angular.md b/static/usage/v7/item/icons/angular.md
index 49a1cc707e3..b81a463e004 100644
--- a/static/usage/v7/item/icons/angular.md
+++ b/static/usage/v7/item/icons/angular.md
@@ -1,29 +1,21 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Icon
-  </ion-label>
+  <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-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-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-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
index 2fa9068224f..69fcbdf4e4c 100644
--- a/static/usage/v7/item/icons/demo.html
+++ b/static/usage/v7/item/icons/demo.html
@@ -1,56 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-            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-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
+          <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/v7/item/icons/javascript.md b/static/usage/v7/item/icons/javascript.md
index 49a1cc707e3..b81a463e004 100644
--- a/static/usage/v7/item/icons/javascript.md
+++ b/static/usage/v7/item/icons/javascript.md
@@ -1,29 +1,21 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Icon
-  </ion-label>
+  <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-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-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-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
index a5fc0ae6629..09496398f7f 100644
--- a/static/usage/v7/item/icons/react.md
+++ b/static/usage/v7/item/icons/react.md
@@ -7,31 +7,23 @@ function Example() {
   return (
     <>
       <IonItem>
-        <IonLabel>
-          Default Icon
-        </IonLabel>
+        <IonLabel>Default Icon</IonLabel>
         <IonIcon icon={informationCircle} slot="end"></IonIcon>
       </IonItem>
 
       <IonItem>
-        <IonLabel>
-          Large Icon
-        </IonLabel>
+        <IonLabel>Large Icon</IonLabel>
         <IonIcon icon={informationCircle} size="large" slot="end"></IonIcon>
       </IonItem>
 
       <IonItem>
-        <IonLabel>
-          Small Icon
-        </IonLabel>
+        <IonLabel>Small Icon</IonLabel>
         <IonIcon icon={informationCircle} size="small" slot="end"></IonIcon>
       </IonItem>
 
       <IonItem>
         <IonIcon icon={star} slot="start"></IonIcon>
-        <IonLabel>
-          Default Icon
-        </IonLabel>
+        <IonLabel>Default Icon</IonLabel>
       </IonItem>
     </>
   );
diff --git a/static/usage/v7/item/icons/vue.md b/static/usage/v7/item/icons/vue.md
index 82e09004fbe..a89e5e6aad0 100644
--- a/static/usage/v7/item/icons/vue.md
+++ b/static/usage/v7/item/icons/vue.md
@@ -1,31 +1,23 @@
 ```html
 <template>
   <ion-item>
-    <ion-label>
-      Default Icon
-    </ion-label>
+    <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-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-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-label> Default Icon </ion-label>
   </ion-item>
 </template>
 
@@ -37,8 +29,8 @@
   export default defineComponent({
     components: { IonButton, IonIcon, IonItem, IonLabel },
     setup() {
-      return { informationCircle, star }
-    }
+      return { informationCircle, star };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
index 32951b2e970..b4021dbc714 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/item/inputs/demo.html
@@ -1,84 +1,84 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <style>
-    .container {
-      display: block;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-item>
+            <ion-input label="Default Input" placeholder="Enter text"></ion-input>
+          </ion-item>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-item>
-          <ion-input label="Default Input" placeholder="Enter text"></ion-input>
-        </ion-item>
+          <ion-item>
+            <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
+          </ion-item>
 
-        <ion-item>
-          <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
-        </ion-item>
+          <ion-item>
+            <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
+          </ion-item>
 
-        <ion-item>
-          <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
-        </ion-item>
+          <ion-item>
+            <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
+          </ion-item>
 
-        <ion-item>
-          <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
-        </ion-item>
+          <ion-item fill="outline">
+            <ion-input
+              label="Floating Input: Outline (MD only)"
+              label-placement="floating"
+              placeholder="Enter text"
+            ></ion-input>
+          </ion-item>
 
-        <ion-item fill="outline">
-          <ion-input label="Floating Input: Outline (MD only)" label-placement="floating"
-            placeholder="Enter text"></ion-input>
-        </ion-item>
+          <ion-item fill="solid">
+            <ion-input
+              label="Floating Input: Solid (MD only)"
+              label-placement="floating"
+              placeholder="Enter text"
+            ></ion-input>
+          </ion-item>
 
-        <ion-item fill="solid">
-          <ion-input label="Floating Input: Solid (MD only)" label-placement="floating"
-            placeholder="Enter text"></ion-input>
-        </ion-item>
+          <ion-item>
+            <ion-select label="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-select label="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-toggle> Toggle </ion-toggle>
+          </ion-item>
 
-        <ion-item>
-          <ion-toggle>
-            Toggle
-          </ion-toggle>
-        </ion-item>
+          <ion-item>
+            <ion-checkbox> Checkbox </ion-checkbox>
+          </ion-item>
 
-        <ion-item>
-          <ion-checkbox>
-            Checkbox
-          </ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-range label-placement="start">
-            <div slot="label">Range</div>
-          </ion-range>
-        </ion-item>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+          <ion-item>
+            <ion-range label-placement="start">
+              <div slot="label">Range</div>
+            </ion-range>
+          </ion-item>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/item/lines/angular.md b/static/usage/v7/item/lines/angular.md
index b0700ae1a1b..022573e9d9d 100644
--- a/static/usage/v7/item/lines/angular.md
+++ b/static/usage/v7/item/lines/angular.md
@@ -1,8 +1,6 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Item Lines
-  </ion-label>
+  <ion-label> Default Item Lines </ion-label>
 </ion-item>
 
 <ion-item lines="inset">
diff --git a/static/usage/v7/item/lines/demo.html b/static/usage/v7/item/lines/demo.html
index 8d273b1d037..a8a2f17bf02 100644
--- a/static/usage/v7/item/lines/demo.html
+++ b/static/usage/v7/item/lines/demo.html
@@ -1,70 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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="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="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 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>
-          <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="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="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
+          <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/v7/item/lines/javascript.md b/static/usage/v7/item/lines/javascript.md
index b0700ae1a1b..022573e9d9d 100644
--- a/static/usage/v7/item/lines/javascript.md
+++ b/static/usage/v7/item/lines/javascript.md
@@ -1,8 +1,6 @@
 ```html
 <ion-item>
-  <ion-label>
-    Default Item Lines
-  </ion-label>
+  <ion-label> Default Item Lines </ion-label>
 </ion-item>
 
 <ion-item lines="inset">
diff --git a/static/usage/v7/item/lines/react.md b/static/usage/v7/item/lines/react.md
index c5e2cf3f55c..dbe79214349 100644
--- a/static/usage/v7/item/lines/react.md
+++ b/static/usage/v7/item/lines/react.md
@@ -7,9 +7,7 @@ function Example() {
   return (
     <>
       <IonItem>
-        <IonLabel>
-          Default Item Lines
-        </IonLabel>
+        <IonLabel>Default Item Lines</IonLabel>
       </IonItem>
 
       <IonItem lines="inset">
diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md
index 37c6c432ca4..fb855de221f 100644
--- a/static/usage/v7/item/lines/vue.md
+++ b/static/usage/v7/item/lines/vue.md
@@ -1,9 +1,7 @@
 ```html
 <template>
   <ion-item>
-    <ion-label>
-      Default Item Lines
-    </ion-label>
+    <ion-label> Default Item Lines </ion-label>
   </ion-item>
 
   <ion-item lines="inset">
@@ -52,7 +50,7 @@
     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
index 915969f127e..c51ab29463a 100644
--- a/static/usage/v7/item/media/angular.md
+++ b/static/usage/v7/item/media/angular.md
@@ -3,17 +3,13 @@
   <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-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-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
index 201ee60d906..fff1b9662a1 100644
--- a/static/usage/v7/item/media/demo.html
+++ b/static/usage/v7/item/media/demo.html
@@ -1,46 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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
+          <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/v7/item/media/javascript.md b/static/usage/v7/item/media/javascript.md
index 915969f127e..c51ab29463a 100644
--- a/static/usage/v7/item/media/javascript.md
+++ b/static/usage/v7/item/media/javascript.md
@@ -3,17 +3,13 @@
   <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-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-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
index 21ba7c98f65..dae8042c9ae 100644
--- a/static/usage/v7/item/media/react.md
+++ b/static/usage/v7/item/media/react.md
@@ -9,18 +9,14 @@ function Example() {
         <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>
+        <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>
+        <IonLabel>Thumbnail Item</IonLabel>
       </IonItem>
     </>
   );
diff --git a/static/usage/v7/item/media/vue.md b/static/usage/v7/item/media/vue.md
index 72dd55ef587..38b16a91fb3 100644
--- a/static/usage/v7/item/media/vue.md
+++ b/static/usage/v7/item/media/vue.md
@@ -4,18 +4,14 @@
     <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-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-label> Thumbnail Item </ion-label>
   </ion-item>
 </template>
 
diff --git a/static/usage/v7/item/theming/colors/demo.html b/static/usage/v7/item/theming/colors/demo.html
index 606fb8e829e..81af5993f8f 100644
--- a/static/usage/v7/item/theming/colors/demo.html
+++ b/static/usage/v7/item/theming/colors/demo.html
@@ -1,59 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/item/theming/css-properties/demo.html b/static/usage/v7/item/theming/css-properties/demo.html
index a5dba2f3187..2639e77e6e4 100644
--- a/static/usage/v7/item/theming/css-properties/demo.html
+++ b/static/usage/v7/item/theming/css-properties/demo.html
@@ -1,57 +1,55 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/item/theming/css-shadow-parts/demo.html b/static/usage/v7/item/theming/css-shadow-parts/demo.html
index a05b86c294f..633f33f4a59 100644
--- a/static/usage/v7/item/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/item/theming/css-shadow-parts/demo.html
@@ -1,57 +1,55 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html
index 88073d0e422..c112dd699fe 100644
--- a/static/usage/v7/item/theming/input-highlight/demo.html
+++ b/static/usage/v7/item/theming/input-highlight/demo.html
@@ -1,50 +1,48 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
 
-  <style>
-    .container {
-      display: block;
-    }
+      ion-item {
+        --highlight-height: 2px;
+        --highlight-color-focused: #43e7f3;
+        --highlight-color-valid: #6f58d8;
+        --highlight-color-invalid: #ff46be;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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
+          <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/v7/label/basic/demo.html b/static/usage/v7/label/basic/demo.html
index 6e1a59b37bd..68fa7830e08 100644
--- a/static/usage/v7/label/basic/demo.html
+++ b/static/usage/v7/label/basic/demo.html
@@ -1,24 +1,22 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html
index 673f3cb7f84..f35f297e34b 100644
--- a/static/usage/v7/label/input/demo.html
+++ b/static/usage/v7/label/input/demo.html
@@ -1,59 +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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </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/v7/label/item/angular.md b/static/usage/v7/label/item/angular.md
index be252b899a0..54f24979079 100644
--- a/static/usage/v7/label/item/angular.md
+++ b/static/usage/v7/label/item/angular.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v7/label/item/demo.html b/static/usage/v7/label/item/demo.html
index 77791e5db37..b6f43ba9975 100644
--- a/static/usage/v7/label/item/demo.html
+++ b/static/usage/v7/label/item/demo.html
@@ -1,56 +1,51 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-            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 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
+          <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/v7/label/item/javascript.md b/static/usage/v7/label/item/javascript.md
index be252b899a0..54f24979079 100644
--- a/static/usage/v7/label/item/javascript.md
+++ b/static/usage/v7/label/item/javascript.md
@@ -5,17 +5,15 @@
 
 <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.
+    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.
+    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>
 
diff --git a/static/usage/v7/label/item/react.md b/static/usage/v7/label/item/react.md
index 88e4f904deb..f5bdf5a5d1b 100644
--- a/static/usage/v7/label/item/react.md
+++ b/static/usage/v7/label/item/react.md
@@ -11,16 +11,14 @@ function Example() {
 
       <IonItem>
         <IonLabel>
-          Multi-line text that should ellipsis when it is too long
-          to fit on one line. Lorem ipsum dolor sit amet,
+          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,
+          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>
diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md
index 99ec3ea3d40..fe4cd48904a 100644
--- a/static/usage/v7/label/item/vue.md
+++ b/static/usage/v7/label/item/vue.md
@@ -6,17 +6,15 @@
 
   <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,
+      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.
+      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>
 
diff --git a/static/usage/v7/label/theming/colors/demo.html b/static/usage/v7/label/theming/colors/demo.html
index ed2b8069d9c..59aa68b5c6a 100644
--- a/static/usage/v7/label/theming/colors/demo.html
+++ b/static/usage/v7/label/theming/colors/demo.html
@@ -1,39 +1,37 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-label {
+        margin: 0 2px;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/list-header/basic/demo.html b/static/usage/v7/list-header/basic/demo.html
index 848d0422f07..a821e9765a0 100644
--- a/static/usage/v7/list-header/basic/demo.html
+++ b/static/usage/v7/list-header/basic/demo.html
@@ -1,49 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/list-header/buttons/demo.html b/static/usage/v7/list-header/buttons/demo.html
index 5689e35d157..ebe2e10710f 100644
--- a/static/usage/v7/list-header/buttons/demo.html
+++ b/static/usage/v7/list-header/buttons/demo.html
@@ -1,50 +1,48 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/list-header/lines/demo.html b/static/usage/v7/list-header/lines/demo.html
index 12904d120c5..be1b65a79a8 100644
--- a/static/usage/v7/list-header/lines/demo.html
+++ b/static/usage/v7/list-header/lines/demo.html
@@ -1,64 +1,62 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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="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
+          <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/v7/list-header/theming/colors/demo.html b/static/usage/v7/list-header/theming/colors/demo.html
index 9f2b1c01745..86c098a58ba 100644
--- a/static/usage/v7/list-header/theming/colors/demo.html
+++ b/static/usage/v7/list-header/theming/colors/demo.html
@@ -1,59 +1,57 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/list-header/theming/css-properties/demo.html b/static/usage/v7/list-header/theming/css-properties/demo.html
index 6aad9464229..e67134191c9 100644
--- a/static/usage/v7/list-header/theming/css-properties/demo.html
+++ b/static/usage/v7/list-header/theming/css-properties/demo.html
@@ -1,37 +1,35 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list-header {
+        --background: #19422d;
+        --color: #fff;
 
-  <style>
-    ion-list-header {
-      --background: #19422d;
-      --color: #fff;
+        --border-width: 0 0 4px 0;
+        --border-color: #f24aec;
+        --border-style: double;
+      }
+    </style>
+  </head>
 
-      --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
+  <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/v7/list/basic/demo.html b/static/usage/v7/list/basic/demo.html
index 6189885bce9..b6d086f4506 100644
--- a/static/usage/v7/list/basic/demo.html
+++ b/static/usage/v7/list/basic/demo.html
@@ -1,46 +1,44 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/list/inset/demo.html b/static/usage/v7/list/inset/demo.html
index eb342ccc056..546fb33e456 100644
--- a/static/usage/v7/list/inset/demo.html
+++ b/static/usage/v7/list/inset/demo.html
@@ -1,51 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-content {
+        --background: #f9f9f9;
+      }
 
-  <style>
-    ion-content {
-      --background: #f9f9f9;
-    }
+      .container {
+        flex-flow: column;
+        align-items: stretch;
+      }
+    </style>
+  </head>
 
-    .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
+  <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/v7/list/lines/demo.html b/static/usage/v7/list/lines/demo.html
index 55b1190b9fb..b1f3a046d2c 100644
--- a/static/usage/v7/list/lines/demo.html
+++ b/static/usage/v7/list/lines/demo.html
@@ -1,66 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        align-items: stretch;
+        justify-content: space-evenly;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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="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
+          <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/v7/loading/controller/demo.html b/static/usage/v7/loading/controller/demo.html
index eeb6f187b0a..430a17e2402 100644
--- a/static/usage/v7/loading/controller/demo.html
+++ b/static/usage/v7/loading/controller/demo.html
@@ -1,39 +1,37 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.loadingController = loadingController;
+    </script>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <script type="module">
-    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+    <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/v7/loading/controller/javascript.md b/static/usage/v7/loading/controller/javascript.md
index c5507d123af..f54756c396b 100644
--- a/static/usage/v7/loading/controller/javascript.md
+++ b/static/usage/v7/loading/controller/javascript.md
@@ -2,13 +2,13 @@
 <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();
-}
+  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
index 16280a1e91a..06dc3413bab 100644
--- a/static/usage/v7/loading/controller/react.md
+++ b/static/usage/v7/loading/controller/react.md
@@ -2,7 +2,6 @@
 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
@@ -11,12 +10,14 @@ function Example() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [present, dismiss] = useIonLoading();
   return (
-    <IonButton onClick={() => {
-      present({
-        message: 'Dismissing after 3 seconds...',
-        duration: 3000
-      })
-    }}>
+    <IonButton
+      onClick={() => {
+        present({
+          message: 'Dismissing after 3 seconds...',
+          duration: 3000,
+        });
+      }}
+    >
       Show Loading
     </IonButton>
   );
diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md
index 17b65b33af0..e80b61cc8b3 100644
--- a/static/usage/v7/loading/controller/vue.md
+++ b/static/usage/v7/loading/controller/vue.md
@@ -13,14 +13,14 @@
       const showLoading = async () => {
         const loading = await loadingController.create({
           message: 'Dismissing after 3 seconds...',
-          duration: 3000
+          duration: 3000,
         });
-        
+
         loading.present();
-      }
-      
-      return { showLoading }
-    }
+      };
+
+      return { showLoading };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/loading/inline/demo.html b/static/usage/v7/loading/inline/demo.html
index 47d572b18d0..e45849451ff 100644
--- a/static/usage/v7/loading/inline/demo.html
+++ b/static/usage/v7/loading/inline/demo.html
@@ -1,26 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Loading</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Loading</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-loading">Show Loading</ion-button>
-        <ion-loading trigger="open-loading" message="Dismissing after 3 seconds..." duration="3000"></ion-loading>
-      </div>
-    </ion-content>
-  </ion-app>
-
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-loading">Show Loading</ion-button>
+          <ion-loading trigger="open-loading" message="Dismissing after 3 seconds..." duration="3000"></ion-loading>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/loading/spinners/demo.html b/static/usage/v7/loading/spinners/demo.html
index a54c53cdb67..47fc0a96812 100644
--- a/static/usage/v7/loading/spinners/demo.html
+++ b/static/usage/v7/loading/spinners/demo.html
@@ -1,25 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Loading</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Loading</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-loading">Show Loading</ion-button>
-        <ion-loading trigger="open-loading" message="Loading..." duration="3000" spinner="circles"></ion-loading>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-loading">Show Loading</ion-button>
+          <ion-loading trigger="open-loading" message="Loading..." duration="3000" spinner="circles"></ion-loading>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/loading/theming/angular/global_css.md b/static/usage/v7/loading/theming/angular/global_css.md
index 16bf7af3522..af410626c52 100644
--- a/static/usage/v7/loading/theming/angular/global_css.md
+++ b/static/usage/v7/loading/theming/angular/global_css.md
@@ -5,4 +5,4 @@ ion-loading.custom-loading {
 
   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
index 868f0964c21..771ad6aa098 100644
--- a/static/usage/v7/loading/theming/demo.html
+++ b/static/usage/v7/loading/theming/demo.html
@@ -1,37 +1,35 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.loadingController = loadingController;
+    </script>
+    <style>
+      ion-loading.custom-loading {
+        --background: #e3edff;
+        --spinner-color: #1c6dff;
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <script type="module">
-    import { loadingController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/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 id="open-loading">Show Loading</ion-button>
-        <ion-loading class="custom-loading" trigger="open-loading" message="Loading..." duration="3000"></ion-loading>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+        color: #1c6dff;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-loading">Show Loading</ion-button>
+          <ion-loading class="custom-loading" trigger="open-loading" message="Loading..." duration="3000"></ion-loading>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/loading/theming/react/main_css.md b/static/usage/v7/loading/theming/react/main_css.md
index 16bf7af3522..af410626c52 100644
--- a/static/usage/v7/loading/theming/react/main_css.md
+++ b/static/usage/v7/loading/theming/react/main_css.md
@@ -5,4 +5,4 @@ ion-loading.custom-loading {
 
   color: #1c6dff;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/menu/basic/angular.md b/static/usage/v7/menu/basic/angular.md
index c169f35f1f4..0fb5465519f 100644
--- a/static/usage/v7/menu/basic/angular.md
+++ b/static/usage/v7/menu/basic/angular.md
@@ -16,8 +16,6 @@
       <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-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
index 5aef69baa92..41886694bea 100644
--- a/static/usage/v7/menu/basic/demo.html
+++ b/static/usage/v7/menu/basic/demo.html
@@ -1,40 +1,36 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/menu/basic/javascript.md b/static/usage/v7/menu/basic/javascript.md
index 570c03c9512..afb14178ea4 100644
--- a/static/usage/v7/menu/basic/javascript.md
+++ b/static/usage/v7/menu/basic/javascript.md
@@ -16,8 +16,6 @@
       <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-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
index 71abc258aef..671dba8a744 100644
--- a/static/usage/v7/menu/basic/react.md
+++ b/static/usage/v7/menu/basic/react.md
@@ -1,15 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonMenu,
-  IonMenuButton,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 function Example() {
   return (
     <>
@@ -30,9 +21,7 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </IonContent>
+        <IonContent className="ion-padding">Tap the button in the toolbar to open the menu.</IonContent>
       </IonPage>
     </>
   );
diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md
index d6e3d73d648..531c50678f8 100644
--- a/static/usage/v7/menu/basic/vue.md
+++ b/static/usage/v7/menu/basic/vue.md
@@ -17,23 +17,12 @@
         <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-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 { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -45,7 +34,7 @@
       IonMenuButton,
       IonPage,
       IonTitle,
-      IonToolbar
+      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
index 839c8f41df5..1bba1305577 100644
--- a/static/usage/v7/menu/theming/angular/example_component_css.md
+++ b/static/usage/v7/menu/theming/angular/example_component_css.md
@@ -8,4 +8,4 @@ ion-menu::part(container) {
 
   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
index f630cf4c378..f46819d3e99 100644
--- a/static/usage/v7/menu/theming/angular/example_component_html.md
+++ b/static/usage/v7/menu/theming/angular/example_component_html.md
@@ -17,9 +17,7 @@
         <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-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
index 5b665efff50..cba69ad4c5a 100644
--- a/static/usage/v7/menu/theming/demo.html
+++ b/static/usage/v7/menu/theming/demo.html
@@ -1,51 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-menu::part(backdrop) {
+        background-color: rgba(255, 0, 255, 0.5);
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
 
-    ion-menu::part(container) {
-      border-radius: 0 20px 20px 0;
+        box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+      }
+    </style>
+  </head>
 
-      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
+  <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/v7/menu/theming/javascript.md b/static/usage/v7/menu/theming/javascript.md
index a147ef68090..6df6026c610 100644
--- a/static/usage/v7/menu/theming/javascript.md
+++ b/static/usage/v7/menu/theming/javascript.md
@@ -17,9 +17,7 @@
         <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-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/react/main_css.md b/static/usage/v7/menu/theming/react/main_css.md
index 839c8f41df5..1bba1305577 100644
--- a/static/usage/v7/menu/theming/react/main_css.md
+++ b/static/usage/v7/menu/theming/react/main_css.md
@@ -8,4 +8,4 @@ ion-menu::part(container) {
 
   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
index c935fefb33f..c2f3d72ab2b 100644
--- a/static/usage/v7/menu/theming/react/main_tsx.md
+++ b/static/usage/v7/menu/theming/react/main_tsx.md
@@ -1,15 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonMenu,
-  IonMenuButton,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 import './main.css';
 
@@ -33,9 +24,7 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </IonContent>
+        <IonContent className="ion-padding">Tap the button in the toolbar to open the menu.</IonContent>
       </IonPage>
     </>
   );
diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md
index b9d02e48b1f..27a96f00e0b 100644
--- a/static/usage/v7/menu/theming/vue.md
+++ b/static/usage/v7/menu/theming/vue.md
@@ -17,23 +17,12 @@
         <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-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 { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -45,7 +34,7 @@
       IonMenuButton,
       IonPage,
       IonTitle,
-      IonToolbar
+      IonToolbar,
     },
   });
 </script>
diff --git a/static/usage/v7/menu/toggle/demo.html b/static/usage/v7/menu/toggle/demo.html
index f101eb3ea4d..e18353d5b1e 100644
--- a/static/usage/v7/menu/toggle/demo.html
+++ b/static/usage/v7/menu/toggle/demo.html
@@ -1,43 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/menu/toggle/react.md b/static/usage/v7/menu/toggle/react.md
index a940b83e4af..3428aaa42d0 100644
--- a/static/usage/v7/menu/toggle/react.md
+++ b/static/usage/v7/menu/toggle/react.md
@@ -1,15 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonButton,
-  IonContent,
-  IonHeader,
-  IonMenu,
-  IonMenuToggle,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
+import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 function Example() {
   return (
     <>
@@ -22,7 +13,7 @@ function Example() {
         <IonContent className="ion-padding">
           <IonMenuToggle>
             <IonButton>Click to close the menu</IonButton>
-          </IonMenuToggle>  
+          </IonMenuToggle>
         </IonContent>
       </IonMenu>
       <IonPage id="main-content">
diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md
index 2cc4807109e..6b723df95ad 100644
--- a/static/usage/v7/menu/toggle/vue.md
+++ b/static/usage/v7/menu/toggle/vue.md
@@ -27,16 +27,7 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonMenu,
-    IonMenuToggle,
-    IonPage,
-    IonTitle,
-    IonToolbar
-  } from '@ionic/vue';
+  import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -48,7 +39,7 @@
       IonMenuToggle,
       IonPage,
       IonTitle,
-      IonToolbar
+      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
index 7154c645660..fd995d7a32f 100644
--- a/static/usage/v7/menu/type/angular/example_component_html.md
+++ b/static/usage/v7/menu/type/angular/example_component_html.md
@@ -39,10 +39,11 @@
         </ion-label>
         <ion-radio value="push"></ion-radio>
       </ion-item>
-    </ion-radio-group> <br />
+    </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/demo.html b/static/usage/v7/menu/type/demo.html
index 4ab10b4b2df..cecfb27d688 100644
--- a/static/usage/v7/menu/type/demo.html
+++ b/static/usage/v7/menu/type/demo.html
@@ -1,74 +1,73 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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>
 
-    <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');
 
-  <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
+      radioGroup.addEventListener('ionChange', (ev) => {
+        menu.type = ev.detail.value;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md
index 24dc49cf906..c8b49975b84 100644
--- a/static/usage/v7/menu/type/javascript.md
+++ b/static/usage/v7/menu/type/javascript.md
@@ -39,7 +39,8 @@
         </ion-label>
         <ion-radio value="push"></ion-radio>
       </ion-item>
-    </ion-radio-group> <br />
+    </ion-radio-group>
+    <br />
     <ion-menu-toggle>
       <ion-button>Click to open the menu</ion-button>
     </ion-menu-toggle>
diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md
index 806e67e21a2..946707cba38 100644
--- a/static/usage/v7/menu/type/react.md
+++ b/static/usage/v7/menu/type/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React, { useState } from 'react';
-import { 
+import {
   IonButton,
   IonContent,
   IonHeader,
@@ -12,7 +12,7 @@ import {
   IonRadio,
   IonRadioGroup,
   IonTitle,
-  IonToolbar
+  IonToolbar,
 } from '@ionic/react';
 import type { RadioGroupCustomEvent } from '@ionic/react';
 
@@ -30,7 +30,7 @@ function Example() {
         <IonContent className="ion-padding">
           <IonMenuToggle>
             <IonButton>Click to close the menu</IonButton>
-          </IonMenuToggle>  
+          </IonMenuToggle>
         </IonContent>
       </IonMenu>
       <IonPage id="main-content">
diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md
index 2abcb137577..8277d7a3179 100644
--- a/static/usage/v7/menu/type/vue.md
+++ b/static/usage/v7/menu/type/vue.md
@@ -12,7 +12,7 @@
       </ion-menu-toggle>
     </ion-content>
   </ion-menu>
-  
+
   <div class="ion-page" id="main-content">
     <ion-header>
       <ion-toolbar>
@@ -40,7 +40,8 @@
           </ion-label>
           <ion-radio value="push"></ion-radio>
         </ion-item>
-      </ion-radio-group> <br />
+      </ion-radio-group>
+      <br />
       <ion-menu-toggle>
         <ion-button>Click to open the menu</ion-button>
       </ion-menu-toggle>
@@ -61,7 +62,7 @@
     IonRadio,
     IonRadioGroup,
     IonTitle,
-    IonToolbar
+    IonToolbar,
   } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
@@ -78,13 +79,13 @@
       IonRadio,
       IonRadioGroup,
       IonTitle,
-      IonToolbar
+      IonToolbar,
     },
     setup() {
       const menuType = ref('overlay');
-      
+
       return { menuType };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html
index 0e4eba1b41e..284005eda4c 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html
@@ -1,67 +1,63 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/can-dismiss/function/demo.html b/static/usage/v7/modal/can-dismiss/function/demo.html
index 594e6d45c28..066b1ad833c 100644
--- a/static/usage/v7/modal/can-dismiss/function/demo.html
+++ b/static/usage/v7/modal/can-dismiss/function/demo.html
@@ -1,74 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <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>
 
-</head>
+          <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>
 
-<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>
+    <script>
+      const modal = document.querySelector('ion-modal');
 
-        <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>
+      modal.canDismiss = promptClose;
+      modal.presentingElement = document.querySelector('.ion-page');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+      function dismiss() {
+        modal.dismiss();
+      }
 
-    modal.canDismiss = promptClose;
-    modal.presentingElement = document.querySelector('.ion-page');
+      async function promptClose() {
+        const actionSheet = document.createElement('ion-action-sheet');
 
-    function dismiss() {
-      modal.dismiss();
-    }
+        actionSheet.header = 'Are you sure?';
+        actionSheet.buttons = [
+          {
+            text: 'Yes',
+            role: 'confirm',
+          },
+          {
+            text: 'No',
+            role: 'cancel',
+          },
+        ];
+        document.body.appendChild(actionSheet);
+        await actionSheet.present();
 
-    async function promptClose() {
-      const actionSheet = document.createElement('ion-action-sheet');
+        const { role } = await actionSheet.onWillDismiss();
 
-      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
+        return role === 'confirm';
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
index 1940f56c143..7b0c09db1a5 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html
@@ -1,57 +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 | 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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
-              it.</p>
-          </ion-content>
-        </ion-modal>
-      </ion-content>
-    </div>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    modal.canDismiss = (data, role) => role !== 'gesture';
-    modal.presentingElement = document.querySelector('.ion-page');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+                To close this modal, please use the "Close" button provided. Note that swiping the modal will not
+                dismiss it.
+              </p>
+            </ion-content>
+          </ion-modal>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      const modal = document.querySelector('ion-modal');
+
+      modal.canDismiss = (data, role) => role !== 'gesture';
+      modal.presentingElement = document.querySelector('.ion-page');
+
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/card/basic/demo.html b/static/usage/v7/modal/card/basic/demo.html
index 49fe5bd279a..b83cf792aab 100644
--- a/static/usage/v7/modal/card/basic/demo.html
+++ b/static/usage/v7/modal/card/basic/demo.html
@@ -1,90 +1,88 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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>
 
-        <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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+      modal.presentingElement = document.querySelector('.ion-page');
 
-    modal.presentingElement = document.querySelector('.ion-page');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html
index e840abcf4da..5a146f90afb 100644
--- a/static/usage/v7/modal/controller/demo.html
+++ b/static/usage/v7/modal/controller/demo.html
@@ -1,37 +1,36 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.modalController = modalController;
+    </script>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <script type="module">
-    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+  <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 = `
+    <script>
+      const openModal = async () => {
+        const div = document.createElement('div');
+        div.innerHTML = `
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
@@ -50,28 +49,27 @@
       </ion-content>
       `;
 
-      const modal = await modalController.create({
-        component: div,
-      });
-
-      modal.present();
+        const modal = await modalController.create({
+          component: div,
+        });
 
-      const { data, role } = await modal.onWillDismiss();
+        modal.present();
 
-      if (role === 'confirm') {
-        document.querySelector('#message').innerHTML = `Hello, ${data}!`;
-      }
-    }
+        const { data, role } = await modal.onWillDismiss();
 
-    function cancel() {
-      modalController.dismiss(null, 'cancel');
-    }
+        if (role === 'confirm') {
+          document.querySelector('#message').innerHTML = `Hello, ${data}!`;
+        }
+      };
 
-    function confirm() {
-      const input = document.querySelector('ion-input');
-      modalController.dismiss(input.value, 'confirm');
-    }
-  </script>
-</body>
+      function cancel() {
+        modalController.dismiss(null, 'cancel');
+      }
 
-</html>
\ No newline at end of file
+      function confirm() {
+        const input = document.querySelector('ion-input');
+        modalController.dismiss(input.value, 'confirm');
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/custom-dialogs/demo.html b/static/usage/v7/modal/custom-dialogs/demo.html
index a83ce102f6b..ea875f5907b 100644
--- a/static/usage/v7/modal/custom-dialogs/demo.html
+++ b/static/usage/v7/modal/custom-dialogs/demo.html
@@ -1,81 +1,79 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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);
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 h1 {
-      margin: 20px 20px 10px 20px;
-    }
+      ion-modal ion-icon {
+        margin-right: 6px;
 
-    ion-modal ion-icon {
-      margin-right: 6px;
+        width: 48px;
+        height: 48px;
 
-      width: 48px;
-      height: 48px;
+        padding: 4px 0;
 
-      padding: 4px 0;
+        color: #aaaaaa;
+      }
 
-      color: #aaaaaa;
-    }
+      ion-modal .wrapper {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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>
 
-          <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
+    <script>
+      const modal = document.querySelector('ion-modal');
+      const dismiss = () => modal.dismiss();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md
index b60d3f275ab..e6120a8fcc7 100644
--- a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md
+++ b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md
@@ -38,7 +38,7 @@ function Example() {
         <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>
diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
index f910bc061e4..57362d546fc 100644
--- a/static/usage/v7/modal/custom-dialogs/vue.md
+++ b/static/usage/v7/modal/custom-dialogs/vue.md
@@ -7,22 +7,22 @@
     --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;
   }
@@ -36,11 +36,11 @@
   </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>
@@ -96,7 +96,7 @@
     },
     setup() {
       return { personCircle };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html
index 029b0d5d41c..9ea5eab1699 100644
--- a/static/usage/v7/modal/inline/basic/demo.html
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -1,67 +1,65 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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-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>
+    </ion-app>
 
-<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');
 
-  <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');
-    }
+      function cancel() {
+        modal.dismiss(null, 'cancel');
+      }
 
-    modal.addEventListener('willDismiss', ev => {
-      if (ev.detail.role === 'confirm') {
-        const message = document.querySelector('#message');
-        message.textContent = `Hello ${ev.detail.data}!`;
+      function confirm() {
+        const input = document.querySelector('ion-input');
+        modal.dismiss(input.value, 'confirm');
       }
-    });
-  </script>
-</body>
 
-</html>
\ No newline at end of file
+      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/v7/modal/inline/is-open/demo.html b/static/usage/v7/modal/inline/is-open/demo.html
index 33256b1f4d7..01f817dd149 100644
--- a/static/usage/v7/modal/inline/is-open/demo.html
+++ b/static/usage/v7/modal/inline/is-open/demo.html
@@ -1,46 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+    <script>
+      const modal = document.querySelector('ion-modal');
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular.md
index 3afd202d33b..4b8bb7bc9d2 100644
--- a/static/usage/v7/modal/performance/mount/angular.md
+++ b/static/usage/v7/modal/performance/mount/angular.md
@@ -16,9 +16,7 @@
           <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-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
index 50ef54a637f..018752e92f1 100644
--- a/static/usage/v7/modal/performance/mount/demo.html
+++ b/static/usage/v7/modal/performance/mount/demo.html
@@ -1,51 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</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>
 
-<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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+      const closeBtn = document.querySelector('#close');
+      closeBtn.addEventListener('click', () => close());
 
-    const closeBtn = document.querySelector('#close');
-    closeBtn.addEventListener('click', () => close());
-
-    const close = () => {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      const close = () => {
+        modal.dismiss();
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/performance/mount/react.md b/static/usage/v7/modal/performance/mount/react.md
index 5b50612291b..bb6a9c32360 100644
--- a/static/usage/v7/modal/performance/mount/react.md
+++ b/static/usage/v7/modal/performance/mount/react.md
@@ -1,15 +1,6 @@
 ```tsx
 import React, { useRef } from 'react';
-import {
-  IonButtons,
-  IonButton,
-  IonModal,
-  IonHeader,
-  IonContent,
-  IonToolbar,
-  IonTitle,
-  IonPage,
-} from '@ionic/react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
 
 function Example() {
   const modal = useRef<HTMLIonModalElement>(null);
@@ -34,9 +25,7 @@ function Example() {
               <IonTitle>Modal</IonTitle>
             </IonToolbar>
           </IonHeader>
-          <IonContent className="ion-padding">
-            This content was mounted as soon as the modal was created.
-          </IonContent>
+          <IonContent className="ion-padding">This content was mounted as soon as the modal was created.</IonContent>
         </IonModal>
       </IonContent>
     </IonPage>
diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md
index 515229dde25..0407ee98a4e 100644
--- a/static/usage/v7/modal/performance/mount/vue.md
+++ b/static/usage/v7/modal/performance/mount/vue.md
@@ -16,23 +16,13 @@
           <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-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 { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
diff --git a/static/usage/v7/modal/sheet/auto-height/demo.html b/static/usage/v7/modal/sheet/auto-height/demo.html
index ae6eb5ff6d7..cae6c505043 100644
--- a/static/usage/v7/modal/sheet/auto-height/demo.html
+++ b/static/usage/v7/modal/sheet/auto-height/demo.html
@@ -1,51 +1,49 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .block {
+        width: 100%;
+        height: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    .block {
-      width: 100%;
-      height: 300px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+      ion-modal {
+        --height: auto;
+      }
+    </style>
+  </head>
 
-    ion-modal {
-      --height: auto;
-    }
-  </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 Sheet Modal</ion-button>
 
-<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">
+          <div class="block">Block of Content</div>
+        </ion-modal>
+      </ion-content>
+    </ion-app>
 
-      <ion-modal trigger="open-modal">
-        <div class="block">Block of Content</div> 
-      </ion-modal>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    modal.initialBreakpoint = 1;
-    modal.breakpoints = [0, 1];
-  </script>
-</body>
+    <script>
+      const modal = document.querySelector('ion-modal');
 
+      modal.initialBreakpoint = 1;
+      modal.breakpoints = [0, 1];
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/modal/sheet/auto-height/javascript.md b/static/usage/v7/modal/sheet/auto-height/javascript.md
index ec474f8a6b7..fc82a43da02 100644
--- a/static/usage/v7/modal/sheet/auto-height/javascript.md
+++ b/static/usage/v7/modal/sheet/auto-height/javascript.md
@@ -22,7 +22,7 @@
   <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
 
   <ion-modal trigger="open-modal">
-    <div class="block">Block of Content</div> 
+    <div class="block">Block of Content</div>
   </ion-modal>
 </ion-content>
 
diff --git a/static/usage/v7/modal/sheet/auto-height/react/main_css.md b/static/usage/v7/modal/sheet/auto-height/react/main_css.md
index 9731921d1c3..88d0e5c0594 100644
--- a/static/usage/v7/modal/sheet/auto-height/react/main_css.md
+++ b/static/usage/v7/modal/sheet/auto-height/react/main_css.md
@@ -10,4 +10,4 @@
 ion-modal {
   --height: auto;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md
index c368d65d6c5..532f3e095c7 100644
--- a/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md
+++ b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md
@@ -1,14 +1,6 @@
 ```tsx
 import React, { useRef } from 'react';
-import {
-  IonButton,
-  IonModal,
-  IonHeader,
-  IonContent,
-  IonToolbar,
-  IonTitle,
-  IonPage,
-} from '@ionic/react';
+import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
 
 import './main.css';
 
@@ -26,13 +18,8 @@ function Example() {
         <IonButton id="open-modal" expand="block">
           Open Sheet Modal
         </IonButton>
-        <IonModal
-          ref={modal}
-          trigger="open-modal"
-          initialBreakpoint={1}
-          breakpoints={[0, 1]}
-        >
-          <div className="block">Block of Content</div> 
+        <IonModal ref={modal} trigger="open-modal" initialBreakpoint={1} breakpoints={[0, 1]}>
+          <div className="block">Block of Content</div>
         </IonModal>
       </IonContent>
     </IonPage>
diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md
index 23b3c38c147..64eef0dd0cb 100644
--- a/static/usage/v7/modal/sheet/auto-height/vue.md
+++ b/static/usage/v7/modal/sheet/auto-height/vue.md
@@ -23,20 +23,13 @@
     <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
 
     <ion-modal trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
-      <div class="block">Block of Content</div> 
+      <div class="block">Block of Content</div>
     </ion-modal>
   </ion-content>
 </template>
 
 <script lang="ts">
-  import {
-    IonButton,
-    IonModal,
-    IonHeader,
-    IonContent,
-    IonToolbar,
-    IonTitle,
-  } from '@ionic/vue';
+  import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
diff --git a/static/usage/v7/modal/sheet/background-content/demo.html b/static/usage/v7/modal/sheet/background-content/demo.html
index 389f7799b59..b2919a37f5c 100644
--- a/static/usage/v7/modal/sheet/background-content/demo.html
+++ b/static/usage/v7/modal/sheet/background-content/demo.html
@@ -1,106 +1,103 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .counter__section {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>App</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
+        <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>
 
-      <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
+        <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>
 
-      <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>
+    <script>
+      const modal = document.querySelector('ion-modal');
+      const searchBar = document.querySelector('ion-searchbar');
 
-      <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>
+      modal.breakpoints = [0, 0.25, 0.5, 0.75];
 
-  <script>
-    const modal = document.querySelector('ion-modal');
-    const searchBar = document.querySelector('ion-searchbar');
+      searchBar.addEventListener('click', () => {
+        modal.setCurrentBreakpoint(0.75);
+      });
 
-    modal.breakpoints = [0, 0.25, 0.5, 0.75];
+      function increment() {
+        const counter = document.querySelector('#counter');
+        counter.innerHTML = parseInt(counter.innerText) + 1;
+      }
 
-    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
+      function decrement() {
+        const counter = document.querySelector('#counter');
+        counter.innerHTML = parseInt(counter.innerText) - 1;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/sheet/basic/demo.html b/static/usage/v7/modal/sheet/basic/demo.html
index f164bb1e617..e1616a939f8 100644
--- a/static/usage/v7/modal/sheet/basic/demo.html
+++ b/static/usage/v7/modal/sheet/basic/demo.html
@@ -1,82 +1,80 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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>
 
-      <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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
-    const searchBar = document.querySelector('ion-searchbar');
+      modal.breakpoints = [0, 0.25, 0.5, 0.75];
 
-    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
+      searchBar.addEventListener('click', () => {
+        modal.setCurrentBreakpoint(0.75);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/sheet/handle-behavior/demo.html b/static/usage/v7/modal/sheet/handle-behavior/demo.html
index d1ef3a70769..4c0962ca7c1 100644
--- a/static/usage/v7/modal/sheet/handle-behavior/demo.html
+++ b/static/usage/v7/modal/sheet/handle-behavior/demo.html
@@ -1,41 +1,39 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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>
 
-      <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');
 
-  <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
+      modal.breakpoints = [0, 0.25, 0.5, 0.75];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/styling/animations/demo.html b/static/usage/v7/modal/styling/animations/demo.html
index aefd300a85f..9a902c8133b 100644
--- a/static/usage/v7/modal/styling/animations/demo.html
+++ b/static/usage/v7/modal/styling/animations/demo.html
@@ -1,117 +1,114 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+    </script>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <script type="module">
-    import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
-    window.createAnimation = createAnimation;
-  </script>
+  <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>
 
-</head>
+        <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>
 
-<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>
+    <script>
+      const modal = document.querySelector('ion-modal');
 
-      <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>
+      const enterAnimation = (baseEl) => {
+        const root = baseEl.shadowRoot;
 
-  <script>
-    const modal = document.querySelector('ion-modal');
+        const backdropAnimation = createAnimation()
+          .addElement(root.querySelector('ion-backdrop'))
+          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
-    const enterAnimation = (baseEl) => {
-      const root = baseEl.shadowRoot;
+        const wrapperAnimation = createAnimation()
+          .addElement(root.querySelector('.modal-wrapper'))
+          .keyframes([
+            { offset: 0, opacity: '0', transform: 'scale(0)' },
+            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+          ]);
 
-      const backdropAnimation = createAnimation()
-        .addElement(root.querySelector('ion-backdrop'))
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+        return createAnimation()
+          .addElement(baseEl)
+          .easing('ease-out')
+          .duration(500)
+          .addAnimation([backdropAnimation, wrapperAnimation]);
+      };
 
-      const wrapperAnimation = createAnimation()
-        .addElement(root.querySelector('.modal-wrapper'))
-        .keyframes([
-          { offset: 0, opacity: '0', transform: 'scale(0)' },
-          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
-        ]);
+      const leaveAnimation = (baseEl) => enterAnimation(baseEl).direction('reverse');
 
-      return createAnimation()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
+      modal.enterAnimation = enterAnimation;
+      modal.leaveAnimation = leaveAnimation;
 
-    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
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/modal/styling/theming/demo.html b/static/usage/v7/modal/styling/theming/demo.html
index 33d8805bd71..8711d7920bc 100644
--- a/static/usage/v7/modal/styling/theming/demo.html
+++ b/static/usage/v7/modal/styling/theming/demo.html
@@ -1,101 +1,99 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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);
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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::part(backdrop) {
-      background: rgba(209, 213, 219);
-      opacity: 1;
-    }
+      ion-modal ion-toolbar {
+        --background: rgb(14 116 144);
+        --color: white;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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-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>
 
-      <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');
 
-  <script>
-    const modal = document.querySelector('ion-modal');
-
-    function dismiss() {
-      modal.dismiss();
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      function dismiss() {
+        modal.dismiss();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/nav/modal-navigation/demo.html b/static/usage/v7/nav/modal-navigation/demo.html
index 85dc011b83f..4bc94395247 100644
--- a/static/usage/v7/nav/modal-navigation/demo.html
+++ b/static/usage/v7/nav/modal-navigation/demo.html
@@ -1,106 +1,100 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 = `
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 = `
+      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 = `
+      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
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+      customElements.define('page-three', PageThree);
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/nav/nav-link/demo.html b/static/usage/v7/nav/nav-link/demo.html
index f34ceefe4a2..8ff541c5f02 100644
--- a/static/usage/v7/nav/nav-link/demo.html
+++ b/static/usage/v7/nav/nav-link/demo.html
@@ -1,26 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-nav root="page-one"></ion-nav>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+    <script>
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -33,11 +32,11 @@ <h1>Page One</h1>
           </ion-nav-link>
         </ion-content>
       `;
+        }
       }
-    }
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -55,11 +54,11 @@ <h1>Page Two</h1>
           </div>
         </ion-content>
       `;
+        }
       }
-    }
-    class PageThree extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageThree extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -72,13 +71,11 @@ <h1>Page Two</h1>
           <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
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+      customElements.define('page-three', PageThree);
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/note/basic/demo.html b/static/usage/v7/note/basic/demo.html
index b5fb2b35894..b6662b02dbc 100644
--- a/static/usage/v7/note/basic/demo.html
+++ b/static/usage/v7/note/basic/demo.html
@@ -1,25 +1,22 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/note/item/demo.html b/static/usage/v7/note/item/demo.html
index 9daedeed4ce..d6558dc7e22 100644
--- a/static/usage/v7/note/item/demo.html
+++ b/static/usage/v7/note/item/demo.html
@@ -1,38 +1,36 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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
+          <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/v7/note/theming/colors/demo.html b/static/usage/v7/note/theming/colors/demo.html
index 02e2949c699..db387632ea0 100644
--- a/static/usage/v7/note/theming/colors/demo.html
+++ b/static/usage/v7/note/theming/colors/demo.html
@@ -1,49 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .flex-items {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        max-width: 440px;
+      }
 
-  <style>
-    .flex-items {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      max-width: 440px;
-    }
+      ion-note {
+        margin: 0 2px;
+      }
+    </style>
+  </head>
 
-    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>
+  <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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/note/theming/css-properties/demo.html b/static/usage/v7/note/theming/css-properties/demo.html
index 7c33f048643..bab95ec51a0 100644
--- a/static/usage/v7/note/theming/css-properties/demo.html
+++ b/static/usage/v7/note/theming/css-properties/demo.html
@@ -1,30 +1,28 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-note {
+        --color: #54dc98;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/picker/controller/demo.html b/static/usage/v7/picker/controller/demo.html
index 32a92e0cecd..ea0ea153593 100644
--- a/static/usage/v7/picker/controller/demo.html
+++ b/static/usage/v7/picker/controller/demo.html
@@ -1,65 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Picker | Controller</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.pickerController = pickerController;
+    </script>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Picker | Controller</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <script type="module">
-    import { pickerController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/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: [
+  <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: [
             {
-              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
+              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/v7/picker/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
index 1c0f482b98f..b8c2a7948a7 100644
--- a/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
+++ b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
@@ -8,36 +8,41 @@ import { Component } from '@angular/core';
 export class ExampleComponent {
   isPickerOpen = false;
 
-  public pickerColumns = [{
-    name: 'languages',
-    options: [
-      {
-        text: 'JavaScript',
-        value: 'javascript'
-      }, {
-        text: 'TypeScript',
-        value: 'typescript'
-      }, {
-        text: 'Rust',
-        value: 'rust'
-      }, {
-        text: 'C#',
-        value: 'c#'
-      }
-    ]
-  }];
+  public pickerColumns = [
+    {
+      name: 'languages',
+      options: [
+        {
+          text: 'JavaScript',
+          value: 'javascript',
+        },
+        {
+          text: 'TypeScript',
+          value: 'typescript',
+        },
+        {
+          text: 'Rust',
+          value: 'rust',
+        },
+        {
+          text: 'C#',
+          value: 'c#',
+        },
+      ],
+    },
+  ];
 
   public pickerButtons = [
     {
       text: 'Cancel',
-      role: 'cancel'
+      role: 'cancel',
     },
     {
       text: 'Confirm',
       handler: (value) => {
         window.alert(`You selected: ${value.languages.value}`);
-      }
-    }
+      },
+    },
   ];
 
   setOpen(isOpen: boolean) {
diff --git a/static/usage/v7/picker/inline/isOpen/demo.html b/static/usage/v7/picker/inline/isOpen/demo.html
index 1c52fd7428e..1ea9a11c35a 100644
--- a/static/usage/v7/picker/inline/isOpen/demo.html
+++ b/static/usage/v7/picker/inline/isOpen/demo.html
@@ -1,64 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Picker | isOpen</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Picker | isOpen</title>
-  <link rel="stylesheet" href="../../../../common.css" />
-  <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button onclick="picker.isOpen = true">Open</ion-button>
+          <ion-picker></ion-picker>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      var picker = document.querySelector('ion-picker');
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button onclick="picker.isOpen = true">Open</ion-button>
-        <ion-picker></ion-picker>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    var picker = document.querySelector('ion-picker');
-
-    picker.columns = [{
-      name: 'languages',
-      options: [
+      picker.columns = [
         {
-          text: 'JavaScript',
-          value: 'javascript'
-        }, {
-          text: 'TypeScript',
-          value: 'typescript'
-        }, {
-          text: 'Rust',
-          value: 'rust'
-        }, {
-          text: 'C#',
-          value: 'c#'
-        }
-      ]
-    }];
-
-    picker.buttons = [
-      {
-        text: 'Cancel',
-        role: 'cancel'
-      },
-      {
-        text: 'Confirm',
-        handler: (value) => {
-          window.alert(`You selected: ${value.languages.value}`);
-        }
-      }
-    ];
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
+            },
+            {
+              text: 'Rust',
+              value: 'rust',
+            },
+            {
+              text: 'C#',
+              value: 'c#',
+            },
+          ],
+        },
+      ];
 
-    picker.addEventListener('ionPickerDidDismiss', (ev) => {
-      picker.isOpen = false;
-    });
-  </script>
-</body>
+      picker.buttons = [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected: ${value.languages.value}`);
+          },
+        },
+      ];
 
-</html>
\ No newline at end of file
+      picker.addEventListener('ionPickerDidDismiss', (ev) => {
+        picker.isOpen = false;
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/picker/inline/isOpen/javascript.md b/static/usage/v7/picker/inline/isOpen/javascript.md
index c06d97cbf81..c08477a59b2 100644
--- a/static/usage/v7/picker/inline/isOpen/javascript.md
+++ b/static/usage/v7/picker/inline/isOpen/javascript.md
@@ -5,36 +5,41 @@
 <script>
   var picker = document.querySelector('ion-picker');
 
-  picker.columns = [{
-    name: 'languages',
-    options: [
-      {
-        text: 'JavaScript',
-        value: 'javascript'
-      }, {
-        text: 'TypeScript',
-        value: 'typescript'
-      }, {
-        text: 'Rust',
-        value: 'rust'
-      }, {
-        text: 'C#',
-        value: 'c#'
-      }
-    ]
-  }];
+  picker.columns = [
+    {
+      name: 'languages',
+      options: [
+        {
+          text: 'JavaScript',
+          value: 'javascript',
+        },
+        {
+          text: 'TypeScript',
+          value: 'typescript',
+        },
+        {
+          text: 'Rust',
+          value: 'rust',
+        },
+        {
+          text: 'C#',
+          value: 'c#',
+        },
+      ],
+    },
+  ];
 
   picker.buttons = [
     {
       text: 'Cancel',
-      role: 'cancel'
+      role: 'cancel',
     },
     {
       text: 'Confirm',
       handler: (value) => {
         window.alert(`You selected: ${value.languages.value}`);
-      }
-    }
+      },
+    },
   ];
 
   picker.addEventListener('ionPickerDidDismiss', (ev) => {
diff --git a/static/usage/v7/picker/inline/isOpen/react.md b/static/usage/v7/picker/inline/isOpen/react.md
index 0e4c82f84d9..b7e61f682f9 100644
--- a/static/usage/v7/picker/inline/isOpen/react.md
+++ b/static/usage/v7/picker/inline/isOpen/react.md
@@ -11,37 +11,40 @@ function Example() {
       <IonPicker
         isOpen={isOpen}
         onDidDismiss={() => setIsOpen(false)}
-        columns={
-          [{
+        columns={[
+          {
             name: 'languages',
             options: [
               {
                 text: 'JavaScript',
-                value: 'javascript'
-              }, {
+                value: 'javascript',
+              },
+              {
                 text: 'TypeScript',
-                value: 'typescript'
-              }, {
+                value: 'typescript',
+              },
+              {
                 text: 'Rust',
-                value: 'rust'
-              }, {
+                value: 'rust',
+              },
+              {
                 text: 'C#',
-                value: 'c#'
-              }
-            ]
-          }]
-        }
+                value: 'c#',
+              },
+            ],
+          },
+        ]}
         buttons={[
           {
             text: 'Cancel',
-            role: 'cancel'
+            role: 'cancel',
           },
           {
             text: 'Confirm',
             handler: (value) => {
               window.alert(`You selected: ${value.languages.value}`);
-            }
-          }
+            },
+          },
         ]}
       ></IonPicker>
     </>
diff --git a/static/usage/v7/picker/inline/isOpen/vue.md b/static/usage/v7/picker/inline/isOpen/vue.md
index d806c4cc42d..9bcceb96851 100644
--- a/static/usage/v7/picker/inline/isOpen/vue.md
+++ b/static/usage/v7/picker/inline/isOpen/vue.md
@@ -18,44 +18,49 @@
     setup() {
       const isOpen = ref(false);
 
-      const pickerColumns = [{
-        name: 'languages',
-        options: [
-          {
-            text: 'JavaScript',
-            value: 'javascript'
-          }, {
-            text: 'TypeScript',
-            value: 'typescript'
-          }, {
-            text: 'Rust',
-            value: 'rust'
-          }, {
-            text: 'C#',
-            value: 'c#'
-          }
-        ]
-      }];
+      const pickerColumns = [
+        {
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
+            },
+            {
+              text: 'Rust',
+              value: 'rust',
+            },
+            {
+              text: 'C#',
+              value: 'c#',
+            },
+          ],
+        },
+      ];
 
       const pickerButtons = [
         {
           text: 'Cancel',
-          role: 'cancel'
+          role: 'cancel',
         },
         {
           text: 'Confirm',
           handler: (value) => {
             window.alert(`You selected: ${value.languages.value}`);
-          }
-        }
+          },
+        },
       ];
 
       const setOpen = (state: boolean) => {
         isOpen.value = state;
-      }
+      };
 
       return { pickerColumns, pickerButtons, isOpen, setOpen };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md
index af47368a129..533c4b1ac70 100644
--- a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md
+++ b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md
@@ -1,8 +1,4 @@
 ```html
 <ion-button id="open-picker">Open</ion-button>
-<ion-picker
-  trigger="open-picker"
-  [columns]="pickerColumns"
-  [buttons]="pickerButtons"
-></ion-picker>
+<ion-picker trigger="open-picker" [columns]="pickerColumns" [buttons]="pickerButtons"></ion-picker>
 ```
diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
index ebd914649f4..90413b31470 100644
--- a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
+++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
@@ -6,36 +6,41 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public pickerColumns = [{
-    name: 'languages',
-    options: [
-      {
-        text: 'JavaScript',
-        value: 'javascript'
-      }, {
-        text: 'TypeScript',
-        value: 'typescript'
-      }, {
-        text: 'Rust',
-        value: 'rust'
-      }, {
-        text: 'C#',
-        value: 'c#'
-      }
-    ]
-  }];
+  public pickerColumns = [
+    {
+      name: 'languages',
+      options: [
+        {
+          text: 'JavaScript',
+          value: 'javascript',
+        },
+        {
+          text: 'TypeScript',
+          value: 'typescript',
+        },
+        {
+          text: 'Rust',
+          value: 'rust',
+        },
+        {
+          text: 'C#',
+          value: 'c#',
+        },
+      ],
+    },
+  ];
 
   public pickerButtons = [
     {
       text: 'Cancel',
-      role: 'cancel'
+      role: 'cancel',
     },
     {
       text: 'Confirm',
       handler: (value) => {
         window.alert(`You selected: ${value.languages.value}`);
-      }
-    }
+      },
+    },
   ];
 }
 ```
diff --git a/static/usage/v7/picker/inline/trigger/demo.html b/static/usage/v7/picker/inline/trigger/demo.html
index 378111eee06..4a0f14c6c05 100644
--- a/static/usage/v7/picker/inline/trigger/demo.html
+++ b/static/usage/v7/picker/inline/trigger/demo.html
@@ -1,60 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Picker | Trigger</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Picker | Trigger</title>
-  <link rel="stylesheet" href="../../../../common.css" />
-  <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-picker">Open</ion-button>
+          <ion-picker trigger="open-picker"></ion-picker>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      const picker = document.querySelector('ion-picker');
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-picker">Open</ion-button>
-        <ion-picker trigger="open-picker"></ion-picker>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const picker = document.querySelector('ion-picker');
-
-    picker.columns = [{
-      name: 'languages',
-      options: [
+      picker.columns = [
         {
-          text: 'JavaScript',
-          value: 'javascript'
-        }, {
-          text: 'TypeScript',
-          value: 'typescript'
-        }, {
-          text: 'Rust',
-          value: 'rust'
-        }, {
-          text: 'C#',
-          value: 'c#'
-        }
-      ]
-    }];
-
-    picker.buttons = [
-      {
-        text: 'Cancel',
-        role: 'cancel'
-      },
-      {
-        text: 'Confirm',
-        handler: (value) => {
-          window.alert(`You selected: ${value.languages.value}`);
-        }
-      }
-    ];
-  </script>
-</body>
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
+            },
+            {
+              text: 'Rust',
+              value: 'rust',
+            },
+            {
+              text: 'C#',
+              value: 'c#',
+            },
+          ],
+        },
+      ];
 
-</html>
\ No newline at end of file
+      picker.buttons = [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            window.alert(`You selected: ${value.languages.value}`);
+          },
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/picker/inline/trigger/javascript.md b/static/usage/v7/picker/inline/trigger/javascript.md
index 2b7a20eb138..e02349631ba 100644
--- a/static/usage/v7/picker/inline/trigger/javascript.md
+++ b/static/usage/v7/picker/inline/trigger/javascript.md
@@ -5,36 +5,41 @@
 <script>
   var picker = document.querySelector('ion-picker');
 
-  picker.columns = [{
-    name: 'languages',
-    options: [
-      {
-        text: 'JavaScript',
-        value: 'javascript'
-      }, {
-        text: 'TypeScript',
-        value: 'typescript'
-      }, {
-        text: 'Rust',
-        value: 'rust'
-      }, {
-        text: 'C#',
-        value: 'c#'
-      }
-    ]
-  }];
+  picker.columns = [
+    {
+      name: 'languages',
+      options: [
+        {
+          text: 'JavaScript',
+          value: 'javascript',
+        },
+        {
+          text: 'TypeScript',
+          value: 'typescript',
+        },
+        {
+          text: 'Rust',
+          value: 'rust',
+        },
+        {
+          text: 'C#',
+          value: 'c#',
+        },
+      ],
+    },
+  ];
 
   picker.buttons = [
     {
       text: 'Cancel',
-      role: 'cancel'
+      role: 'cancel',
     },
     {
       text: 'Confirm',
       handler: (value) => {
         window.alert(`You selected: ${value.languages.value}`);
-      }
-    }
+      },
+    },
   ];
 </script>
 ```
diff --git a/static/usage/v7/picker/inline/trigger/react.md b/static/usage/v7/picker/inline/trigger/react.md
index ec20daef156..08506f7fb30 100644
--- a/static/usage/v7/picker/inline/trigger/react.md
+++ b/static/usage/v7/picker/inline/trigger/react.md
@@ -8,37 +8,40 @@ function Example() {
       <IonButton id="open-picker">Open</IonButton>
       <IonPicker
         trigger="open-picker"
-        columns={
-          [{
+        columns={[
+          {
             name: 'languages',
             options: [
               {
                 text: 'JavaScript',
-                value: 'javascript'
-              }, {
+                value: 'javascript',
+              },
+              {
                 text: 'TypeScript',
-                value: 'typescript'
-              }, {
+                value: 'typescript',
+              },
+              {
                 text: 'Rust',
-                value: 'rust'
-              }, {
+                value: 'rust',
+              },
+              {
                 text: 'C#',
-                value: 'c#'
-              }
-            ]
-          }]
-        }
+                value: 'c#',
+              },
+            ],
+          },
+        ]}
         buttons={[
           {
             text: 'Cancel',
-            role: 'cancel'
+            role: 'cancel',
           },
           {
             text: 'Confirm',
             handler: (value) => {
               window.alert(`You selected: ${value.languages.value}`);
-            }
-          }
+            },
+          },
         ]}
       ></IonPicker>
     </>
diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md
index d4681ff66f6..07046c63cf7 100644
--- a/static/usage/v7/picker/inline/trigger/vue.md
+++ b/static/usage/v7/picker/inline/trigger/vue.md
@@ -1,11 +1,7 @@
 ```html
 <template>
   <ion-button id="open-picker">Open</ion-button>
-  <ion-picker
-    trigger="open-picker"
-    :columns="pickerColumns"
-    :buttons="pickerButtons"
-  ></ion-picker>
+  <ion-picker trigger="open-picker" :columns="pickerColumns" :buttons="pickerButtons"></ion-picker>
 </template>
 
 <script>
@@ -15,40 +11,45 @@
   export default defineComponent({
     components: { IonButton, IonPicker },
     setup() {
-      const pickerColumns = [{
-        name: 'languages',
-        options: [
-          {
-            text: 'JavaScript',
-            value: 'javascript'
-          }, {
-            text: 'TypeScript',
-            value: 'typescript'
-          }, {
-            text: 'Rust',
-            value: 'rust'
-          }, {
-            text: 'C#',
-            value: 'c#'
-          }
-        ]
-      }];
+      const pickerColumns = [
+        {
+          name: 'languages',
+          options: [
+            {
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
+            },
+            {
+              text: 'Rust',
+              value: 'rust',
+            },
+            {
+              text: 'C#',
+              value: 'c#',
+            },
+          ],
+        },
+      ];
 
       const pickerButtons = [
         {
           text: 'Cancel',
-          role: 'cancel'
+          role: 'cancel',
         },
         {
           text: 'Confirm',
           handler: (value) => {
             window.alert(`You selected: ${value.languages.value}`);
-          }
-        }
+          },
+        },
       ];
 
       return { pickerColumns, pickerButtons };
-    }
+    },
   });
 </script>
 ```
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
index af47368a129..533c4b1ac70 100644
--- a/static/usage/v7/picker/multiple-column/angular/example_component_html.md
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_html.md
@@ -1,8 +1,4 @@
 ```html
 <ion-button id="open-picker">Open</ion-button>
-<ion-picker
-  trigger="open-picker"
-  [columns]="pickerColumns"
-  [buttons]="pickerButtons"
-></ion-picker>
+<ion-picker trigger="open-picker" [columns]="pickerColumns" [buttons]="pickerButtons"></ion-picker>
 ```
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
index 11cd65eb0fc..10790602bc8 100644
--- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
@@ -6,61 +6,71 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public pickerColumns = [{
-    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'
-      }
-    ]
-  }];
+  public pickerColumns = [
+    {
+      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',
+        },
+      ],
+    },
+  ];
 
   public pickerButtons = [
     {
       text: 'Cancel',
-      role: 'cancel'
+      role: 'cancel',
     },
     {
       text: 'Confirm',
       handler: (value) => {
         window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
-      }
-    }
+      },
+    },
   ];
 }
 ```
diff --git a/static/usage/v7/picker/multiple-column/demo.html b/static/usage/v7/picker/multiple-column/demo.html
index 8e886c58a69..142618d1061 100644
--- a/static/usage/v7/picker/multiple-column/demo.html
+++ b/static/usage/v7/picker/multiple-column/demo.html
@@ -1,85 +1,93 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-picker">Open</ion-button>
+          <ion-picker trigger="open-picker"></ion-picker>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      const picker = document.querySelector('ion-picker');
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-picker">Open</ion-button>
-        <ion-picker trigger="open-picker"></ion-picker>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const picker = document.querySelector('ion-picker');
-
-    picker.columns = [{
-      name: 'meat',
-      options: [
+      picker.columns = [
         {
-          text: 'Pepperoni',
-          value: 'pepperoni'
-        }, {
-          text: 'Smoked Ham',
-          value: 'smoked-ham'
-        }, {
-          text: 'Crispy Bacon',
-          value: 'bacon'
-        }
-      ]
-    }, {
-      name: 'veggies',
-      options: [
+          name: 'meat',
+          options: [
+            {
+              text: 'Pepperoni',
+              value: 'pepperoni',
+            },
+            {
+              text: 'Smoked Ham',
+              value: 'smoked-ham',
+            },
+            {
+              text: 'Crispy Bacon',
+              value: 'bacon',
+            },
+          ],
+        },
         {
-          text: 'Red onion',
-          value: 'red-onion'
-        }, {
-          text: 'Peppers',
-          value: 'peppers'
-        }, {
-          text: 'Black olives',
-          value: 'black-olives'
-        }
-      ]
-    }, {
-      name: 'crust',
-      options: [
+          name: 'veggies',
+          options: [
+            {
+              text: 'Red onion',
+              value: 'red-onion',
+            },
+            {
+              text: 'Peppers',
+              value: 'peppers',
+            },
+            {
+              text: 'Black olives',
+              value: 'black-olives',
+            },
+          ],
+        },
         {
-          text: 'Pan style',
-          value: 'pan'
-        }, {
-          text: 'Hand tossed',
-          value: 'hand-tossed'
-        }, {
-          text: 'Stuffed crust',
-          value: 'stuffed-crust'
-        }
-      ]
-    }];
-
-    picker.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}`);
-        }
-      }
-    ];
-  </script>
-</body>
+          name: 'crust',
+          options: [
+            {
+              text: 'Pan style',
+              value: 'pan',
+            },
+            {
+              text: 'Hand tossed',
+              value: 'hand-tossed',
+            },
+            {
+              text: 'Stuffed crust',
+              value: 'stuffed-crust',
+            },
+          ],
+        },
+      ];
 
-</html>
\ No newline at end of file
+      picker.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}`);
+          },
+        },
+      ];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md
index ad8e838a8c0..9196a0dc7c7 100644
--- a/static/usage/v7/picker/multiple-column/javascript.md
+++ b/static/usage/v7/picker/multiple-column/javascript.md
@@ -5,61 +5,71 @@
 <script>
   var picker = document.querySelector('ion-picker');
 
-  picker.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'
-      }
-    ]
-  }];
+  picker.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',
+        },
+      ],
+    },
+  ];
 
   picker.buttons = [
     {
       text: 'Cancel',
-      role: 'cancel'
+      role: 'cancel',
     },
     {
       text: 'Confirm',
       handler: (value) => {
         window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
-      }
-    }
+      },
+    },
   ];
 </script>
 ```
diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md
index cfa6465169e..cd01f4aa199 100644
--- a/static/usage/v7/picker/multiple-column/react.md
+++ b/static/usage/v7/picker/multiple-column/react.md
@@ -8,62 +8,72 @@ function Example() {
       <IonButton id="open-picker">Open</IonButton>
       <IonPicker
         trigger="open-picker"
-        columns={
-          [{
+        columns={[
+          {
             name: 'meat',
             options: [
               {
                 text: 'Pepperoni',
-                value: 'pepperoni'
-              }, {
+                value: 'pepperoni',
+              },
+              {
                 text: 'Smoked Ham',
-                value: 'smoked-ham'
-              }, {
+                value: 'smoked-ham',
+              },
+              {
                 text: 'Crispy Bacon',
-                value: 'bacon'
-              }
-            ]
-          }, {
+                value: 'bacon',
+              },
+            ],
+          },
+          {
             name: 'veggies',
             options: [
               {
                 text: 'Red onion',
-                value: 'red-onion'
-              }, {
+                value: 'red-onion',
+              },
+              {
                 text: 'Peppers',
-                value: 'peppers'
-              }, {
+                value: 'peppers',
+              },
+              {
                 text: 'Black olives',
-                value: 'black-olives'
-              }
-            ]
-          }, {
+                value: 'black-olives',
+              },
+            ],
+          },
+          {
             name: 'crust',
             options: [
               {
                 text: 'Pan style',
-                value: 'pan'
-              }, {
+                value: 'pan',
+              },
+              {
                 text: 'Hand tossed',
-                value: 'hand-tossed'
-              }, {
+                value: 'hand-tossed',
+              },
+              {
                 text: 'Stuffed crust',
-                value: 'stuffed-crust'
-              }
-            ]
-          }]
-        }
+                value: 'stuffed-crust',
+              },
+            ],
+          },
+        ]}
         buttons={[
           {
             text: 'Cancel',
-            role: 'cancel'
+            role: 'cancel',
           },
           {
             text: 'Confirm',
             handler: (value) => {
-              window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
-            }
-          }
+              window.alert(
+                `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`
+              );
+            },
+          },
         ]}
       ></IonPicker>
     </>
diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md
index df54238bf66..16251372059 100644
--- a/static/usage/v7/picker/multiple-column/vue.md
+++ b/static/usage/v7/picker/multiple-column/vue.md
@@ -1,11 +1,7 @@
 ```html
 <template>
   <ion-button id="open-picker">Open</ion-button>
-  <ion-picker
-    trigger="open-picker"
-    :columns="pickerColumns"
-    :buttons="pickerButtons"
-  ></ion-picker>
+  <ion-picker trigger="open-picker" :columns="pickerColumns" :buttons="pickerButtons"></ion-picker>
 </template>
 
 <script>
@@ -15,65 +11,75 @@
   export default defineComponent({
     components: { IonButton, IonPicker },
     setup() {
-      const pickerColumns = [{
-        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'
-          }
-        ]
-      }];
+      const pickerColumns = [
+        {
+          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',
+            },
+          ],
+        },
+      ];
 
       const pickerButtons = [
         {
           text: 'Cancel',
-          role: '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 { pickerColumns, pickerButtons };
-    }
+    },
   });
 </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
index c92d80212a7..56a63480d75 100644
--- a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md
@@ -9,4 +9,4 @@ ion-popover {
   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
index a0036bd9ef9..d911b195f92 100644
--- a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md
@@ -16,7 +16,7 @@
 
   <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
   <ion-popover trigger="left-start" side="left" alignment="start">
-    <ng-template>  
+    <ng-template>
       <ion-content class="ion-padding">Hello World!</ion-content>
     </ng-template>
   </ion-popover>
diff --git a/static/usage/v7/popover/customization/positioning/demo.html b/static/usage/v7/popover/customization/positioning/demo.html
index 576ea36ad34..5f90bc638bc 100644
--- a/static/usage/v7/popover/customization/positioning/demo.html
+++ b/static/usage/v7/popover/customization/positioning/demo.html
@@ -1,52 +1,50 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
diff --git a/static/usage/v7/popover/customization/positioning/react/main_css.md b/static/usage/v7/popover/customization/positioning/react/main_css.md
index c92d80212a7..56a63480d75 100644
--- a/static/usage/v7/popover/customization/positioning/react/main_css.md
+++ b/static/usage/v7/popover/customization/positioning/react/main_css.md
@@ -9,4 +9,4 @@ ion-popover {
   flex-direction: column;
   padding: 80px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/popover/customization/sizing/demo.html b/static/usage/v7/popover/customization/sizing/demo.html
index 7f53aa23bd5..89351f1e806 100644
--- a/static/usage/v7/popover/customization/sizing/demo.html
+++ b/static/usage/v7/popover/customization/sizing/demo.html
@@ -1,32 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+          <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>
diff --git a/static/usage/v7/popover/customization/styling/angular/global_css.md b/static/usage/v7/popover/customization/styling/angular/global_css.md
index 25890b90538..434a31d24d9 100644
--- a/static/usage/v7/popover/customization/styling/angular/global_css.md
+++ b/static/usage/v7/popover/customization/styling/angular/global_css.md
@@ -14,4 +14,4 @@ ion-popover ion-content {
 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
index 35a88342fb0..6dbe274500f 100644
--- a/static/usage/v7/popover/customization/styling/demo.html
+++ b/static/usage/v7/popover/customization/styling/demo.html
@@ -1,45 +1,43 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
+      }
 
-  <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 ion-content {
-      --background: rgba(40, 173, 218, 0.6);
-    }
+      ion-popover::part(backdrop) {
+        background-color: rgb(6, 14, 106);
+      }
+    </style>
+  </head>
 
-    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
+  <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>
diff --git a/static/usage/v7/popover/customization/styling/react/main_css.md b/static/usage/v7/popover/customization/styling/react/main_css.md
index 25890b90538..434a31d24d9 100644
--- a/static/usage/v7/popover/customization/styling/react/main_css.md
+++ b/static/usage/v7/popover/customization/styling/react/main_css.md
@@ -14,4 +14,4 @@ ion-popover ion-content {
 ion-popover::part(backdrop) {
   background-color: rgb(6, 14, 106);
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/popover/nested/demo.html b/static/usage/v7/popover/nested/demo.html
index f40dadc60c6..89b0c9409af 100644
--- a/static/usage/v7/popover/nested/demo.html
+++ b/static/usage/v7/popover/nested/demo.html
@@ -1,41 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+                <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>
diff --git a/static/usage/v7/popover/performance/mount/demo.html b/static/usage/v7/popover/performance/mount/demo.html
index ebcc9a53e18..5df0be7facf 100644
--- a/static/usage/v7/popover/performance/mount/demo.html
+++ b/static/usage/v7/popover/performance/mount/demo.html
@@ -1,27 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/popover/performance/mount/javascript.md b/static/usage/v7/popover/performance/mount/javascript.md
index 5dd5f8a624e..297c94344f1 100644
--- a/static/usage/v7/popover/performance/mount/javascript.md
+++ b/static/usage/v7/popover/performance/mount/javascript.md
@@ -3,4 +3,4 @@
 <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/presenting/controller/angular/example_component_html.md b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md
index da857f78745..f84fbf6fd80 100644
--- a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md
@@ -1,4 +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/popover_component_html.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
index 74cbf83fec4..583a6dea593 100644
--- a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
+++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
@@ -1,3 +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/demo.html b/static/usage/v7/popover/presenting/controller/demo.html
index 22a76cc9eb0..25db62b4be8 100644
--- a/static/usage/v7/popover/presenting/controller/demo.html
+++ b/static/usage/v7/popover/presenting/controller/demo.html
@@ -1,63 +1,61 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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();
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      .container {
+        flex-direction: column;
       }
-
-      connectedCallback() {
-        this.innerHTML = `<ion-content class="ion-padding">Hello World!</ion-content>`;
+    </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);
+      customElements.define('popover-page', PopoverPage);
 
-    async function presentPopover(e) {
-      const popover = Object.assign(document.createElement('ion-popover'), {
-        component: 'popover-page',
-        event: e
-      });
+      async function presentPopover(e) {
+        const popover = Object.assign(document.createElement('ion-popover'), {
+          component: 'popover-page',
+          event: e,
+        });
 
-      document.body.appendChild(popover);
-      await popover.present();
+        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>
+        const { role } = await popover.onDidDismiss();
+        output.innerText = `Popover dismissed with role: ${role}`;
+      }
 
-</html>
\ No newline at end of file
+      const button = document.querySelector('ion-button');
+      button.addEventListener('click', presentPopover);
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/popover/presenting/controller/javascript.md b/static/usage/v7/popover/presenting/controller/javascript.md
index 896772b276b..078514628a8 100644
--- a/static/usage/v7/popover/presenting/controller/javascript.md
+++ b/static/usage/v7/popover/presenting/controller/javascript.md
@@ -20,7 +20,7 @@
   async function presentPopover(e) {
     const popover = Object.assign(document.createElement('ion-popover'), {
       component: 'popover-page',
-      event: e
+      event: e,
     });
 
     document.body.appendChild(popover);
diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
index 1bc5738c6ad..85f8bd06cad 100644
--- a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
+++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
@@ -4,12 +4,12 @@
 </template>
 
 <script lang="ts">
-import { IonContent } from '@ionic/vue';
-import { defineComponent } from 'vue';
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'Popover',
-  components: { IonContent }
-});
+  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
index 80201dba3d2..1d8369f31e2 100644
--- 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
@@ -5,4 +5,4 @@
     <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/demo.html b/static/usage/v7/popover/presenting/inline-isopen/demo.html
index 6b85ee6fc42..480a87caa67 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/demo.html
+++ b/static/usage/v7/popover/presenting/inline-isopen/demo.html
@@ -1,39 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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');
 
-  <script>
-    const button = document.querySelector('ion-button');
-    const popover = document.querySelector('ion-popover');
+      button.addEventListener('click', (e) => {
+        popover.event = e;
+        popover.isOpen = true;
+      });
 
-    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
+      popover.addEventListener('didDismiss', () => (popover.isOpen = false));
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/popover/presenting/inline-isopen/javascript.md b/static/usage/v7/popover/presenting/inline-isopen/javascript.md
index b780125ba1e..1daafed1894 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/javascript.md
+++ b/static/usage/v7/popover/presenting/inline-isopen/javascript.md
@@ -8,11 +8,11 @@
   const button = document.querySelector('ion-button');
   const popover = document.querySelector('ion-popover');
 
-  button.addEventListener('click', e => {
+  button.addEventListener('click', (e) => {
     popover.event = e;
     popover.isOpen = true;
   });
 
-  popover.addEventListener('didDismiss', () => popover.isOpen = false);
+  popover.addEventListener('didDismiss', () => (popover.isOpen = false));
 </script>
 ```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/demo.html b/static/usage/v7/popover/presenting/inline-trigger/demo.html
index f05008cc1b8..64f56e73fd6 100644
--- a/static/usage/v7/popover/presenting/inline-trigger/demo.html
+++ b/static/usage/v7/popover/presenting/inline-trigger/demo.html
@@ -1,37 +1,35 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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="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
+          <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>
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
index 56e3d3a3b09..a876a376204 100644
--- a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
+++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  styleUrls: ['example.component.css'],
 })
 export class ExampleComponent {
   public buffer = 0.06;
diff --git a/static/usage/v7/progress-bar/buffer/demo.html b/static/usage/v7/progress-bar/buffer/demo.html
index 901c0ddc01c..751b6a12c43 100644
--- a/static/usage/v7/progress-bar/buffer/demo.html
+++ b/static/usage/v7/progress-bar/buffer/demo.html
@@ -1,47 +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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/progress-bar/buffer/react.md b/static/usage/v7/progress-bar/buffer/react.md
index 1fa8208ac3a..10f35e69538 100644
--- a/static/usage/v7/progress-bar/buffer/react.md
+++ b/static/usage/v7/progress-bar/buffer/react.md
@@ -22,9 +22,7 @@ function Example() {
     }, 1000);
   }
 
-  return (
-    <IonProgressBar buffer={buffer} value={progress}></IonProgressBar>
-  );
+  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
index 3edc59bdf6f..c70c23eb470 100644
--- a/static/usage/v7/progress-bar/buffer/vue.md
+++ b/static/usage/v7/progress-bar/buffer/vue.md
@@ -15,7 +15,7 @@
 
       return {
         buffer,
-        progress
+        progress,
       };
     },
     mounted() {
@@ -32,7 +32,7 @@
           }, 1000);
         }
       }, 1000);
-    }
+    },
   });
 </script>
 ```
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
index d8f8b690fc9..971d3d92ed0 100644
--- a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
+++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  styleUrls: ['example.component.css'],
 })
 export class ExampleComponent {
   public progress = 0;
diff --git a/static/usage/v7/progress-bar/determinate/demo.html b/static/usage/v7/progress-bar/determinate/demo.html
index e70f12debec..c204d2c4325 100644
--- a/static/usage/v7/progress-bar/determinate/demo.html
+++ b/static/usage/v7/progress-bar/determinate/demo.html
@@ -1,42 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-progress-bar></ion-progress-bar>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 
-</head>
+  <script>
+    let progress = 0;
+    let progressBar = document.querySelector('ion-progress-bar');
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-progress-bar></ion-progress-bar>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+    setInterval(() => {
+      progressBar.value = progress += 0.01;
 
-<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
+      // 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/v7/progress-bar/determinate/react.md b/static/usage/v7/progress-bar/determinate/react.md
index 9622be87f95..474d4dd878e 100644
--- a/static/usage/v7/progress-bar/determinate/react.md
+++ b/static/usage/v7/progress-bar/determinate/react.md
@@ -19,9 +19,7 @@ function Example() {
     }, 1000);
   }
 
-  return (
-    <IonProgressBar value={progress}></IonProgressBar>
-  );
+  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
index c22b3ead5d3..5eb4cd2b847 100644
--- a/static/usage/v7/progress-bar/determinate/vue.md
+++ b/static/usage/v7/progress-bar/determinate/vue.md
@@ -13,7 +13,7 @@
       let progress = ref(0);
 
       return {
-        progress
+        progress,
       };
     },
     mounted() {
@@ -28,7 +28,7 @@
           }, 1000);
         }
       }, 50);
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/indeterminate/demo.html b/static/usage/v7/progress-bar/indeterminate/demo.html
index 70b7649c38f..95685e060c3 100644
--- a/static/usage/v7/progress-bar/indeterminate/demo.html
+++ b/static/usage/v7/progress-bar/indeterminate/demo.html
@@ -1,25 +1,22 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/progress-bar/indeterminate/react.md b/static/usage/v7/progress-bar/indeterminate/react.md
index 45e74e79ce7..b856e1f29f2 100644
--- a/static/usage/v7/progress-bar/indeterminate/react.md
+++ b/static/usage/v7/progress-bar/indeterminate/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonProgressBar } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonProgressBar type="indeterminate"></IonProgressBar>
-  );
+  return <IonProgressBar type="indeterminate"></IonProgressBar>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/progress-bar/theming/colors/demo.html b/static/usage/v7/progress-bar/theming/colors/demo.html
index 1eeae1f7946..b2d7b770b78 100644
--- a/static/usage/v7/progress-bar/theming/colors/demo.html
+++ b/static/usage/v7/progress-bar/theming/colors/demo.html
@@ -1,39 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/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
index d2c997037ad..a374b2ee72c 100644
--- 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
@@ -1,4 +1,3 @@
 ```html
-<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
-<ion-progress-bar type="indeterminate"></ion-progress-bar>
+<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
index 1b853603fba..9d99105968f 100644
--- a/static/usage/v7/progress-bar/theming/css-properties/demo.html
+++ b/static/usage/v7/progress-bar/theming/css-properties/demo.html
@@ -1,37 +1,35 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
+      ion-progress-bar {
+        --background: #f3e895;
+        --progress-background: #09c567;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md
index a4c5e382892..3e05757d942 100644
--- 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
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonProgressBar } from '@ionic/react';
@@ -8,7 +7,7 @@ import './main.css';
 function Example() {
   return (
     <>
-      <IonProgressBar value={.25} buffer={.5}></IonProgressBar>
+      <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
       <IonProgressBar type="indeterminate"></IonProgressBar>
     </>
   );
diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md
index bfff4db7a1b..f63aec9e644 100644
--- a/static/usage/v7/progress-bar/theming/css-properties/vue.md
+++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md
@@ -9,7 +9,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonProgressBar }
+    components: { IonProgressBar },
   });
 </script>
 
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
index d2c997037ad..a374b2ee72c 100644
--- 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
@@ -1,4 +1,3 @@
 ```html
-<ion-progress-bar value=".25" buffer=".5"></ion-progress-bar>
-<ion-progress-bar type="indeterminate"></ion-progress-bar>
+<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
index 6e3163e6c60..71ff3ced918 100644
--- a/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
@@ -1,44 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
+      ion-progress-bar::part(track) {
+        background: #f3e895;
+      }
 
-    ion-progress-bar::part(track) {
-      background: #f3e895;
-    }
+      ion-progress-bar::part(progress) {
+        background: #09c567;
+      }
 
-    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>
 
-    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
+  <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/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
index a4c5e382892..3e05757d942 100644
--- 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
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonProgressBar } from '@ionic/react';
@@ -8,7 +7,7 @@ import './main.css';
 function Example() {
   return (
     <>
-      <IonProgressBar value={.25} buffer={.5}></IonProgressBar>
+      <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
       <IonProgressBar type="indeterminate"></IonProgressBar>
     </>
   );
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
index a9ca62b2c4f..5750323198e 100644
--- a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
@@ -9,7 +9,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonProgressBar }
+    components: { IonProgressBar },
   });
 </script>
 
diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md
index 47f36bcad0e..a8caa3c1973 100644
--- a/static/usage/v7/radio/basic/angular.md
+++ b/static/usage/v7/radio/basic/angular.md
@@ -1,6 +1,6 @@
 ```html
 <ion-radio-group value="strawberries">
-  <ion-radio value="grapes">Grapes</ion-radio><br/>
+  <ion-radio value="grapes">Grapes</ion-radio><br />
   <ion-radio value="strawberries">Strawberries</ion-radio><br />
   <ion-radio value="pineapple">Pineapple</ion-radio><br />
   <ion-radio value="cherries">Cherries</ion-radio>
diff --git a/static/usage/v7/radio/basic/demo.html b/static/usage/v7/radio/basic/demo.html
index 45ab91c7562..14468f25d8d 100644
--- a/static/usage/v7/radio/basic/demo.html
+++ b/static/usage/v7/radio/basic/demo.html
@@ -1,35 +1,33 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-radio-group value="strawberries">
-          <ion-radio value="grapes">Grapes</ion-radio><br/>
-          <ion-radio value="strawberries">Strawberries</ion-radio><br />
-          <ion-radio value="pineapple">Pineapple</ion-radio><br />
-          <ion-radio value="cherries">Cherries</ion-radio>
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-radio-group value="strawberries">
+            <ion-radio value="grapes">Grapes</ion-radio><br />
+            <ion-radio value="strawberries">Strawberries</ion-radio><br />
+            <ion-radio value="pineapple">Pineapple</ion-radio><br />
+            <ion-radio value="cherries">Cherries</ion-radio>
+          </ion-radio-group>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/radio/basic/javascript.md b/static/usage/v7/radio/basic/javascript.md
index 47f36bcad0e..a8caa3c1973 100644
--- a/static/usage/v7/radio/basic/javascript.md
+++ b/static/usage/v7/radio/basic/javascript.md
@@ -1,6 +1,6 @@
 ```html
 <ion-radio-group value="strawberries">
-  <ion-radio value="grapes">Grapes</ion-radio><br/>
+  <ion-radio value="grapes">Grapes</ion-radio><br />
   <ion-radio value="strawberries">Strawberries</ion-radio><br />
   <ion-radio value="pineapple">Pineapple</ion-radio><br />
   <ion-radio value="cherries">Cherries</ion-radio>
diff --git a/static/usage/v7/radio/basic/react.md b/static/usage/v7/radio/basic/react.md
index f826499e307..7f8cf4e07f4 100644
--- a/static/usage/v7/radio/basic/react.md
+++ b/static/usage/v7/radio/basic/react.md
@@ -5,9 +5,12 @@ import { IonRadio, IonRadioGroup } from '@ionic/react';
 function Example() {
   return (
     <IonRadioGroup value="strawberries">
-      <IonRadio value="grapes">Grapes</IonRadio><br/>
-      <IonRadio value="strawberries">Strawberries</IonRadio><br />
-      <IonRadio value="pineapple">Pineapple</IonRadio><br />
+      <IonRadio value="grapes">Grapes</IonRadio>
+      <br />
+      <IonRadio value="strawberries">Strawberries</IonRadio>
+      <br />
+      <IonRadio value="pineapple">Pineapple</IonRadio>
+      <br />
       <IonRadio value="cherries">Cherries</IonRadio>
     </IonRadioGroup>
   );
diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md
index cf4878155af..2d552901212 100644
--- a/static/usage/v7/radio/basic/vue.md
+++ b/static/usage/v7/radio/basic/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-radio-group value="strawberries">
-    <ion-radio value="grapes">Grapes</ion-radio><br/>
+    <ion-radio value="grapes">Grapes</ion-radio><br />
     <ion-radio value="strawberries">Strawberries</ion-radio><br />
     <ion-radio value="pineapple">Pineapple</ion-radio><br />
     <ion-radio value="cherries">Cherries</ion-radio>
diff --git a/static/usage/v7/radio/empty-selection/demo.html b/static/usage/v7/radio/empty-selection/demo.html
index 8a2cc7b98ab..b55e17ec85f 100644
--- a/static/usage/v7/radio/empty-selection/demo.html
+++ b/static/usage/v7/radio/empty-selection/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-radio-group allow-empty-selection="true" value="turtles">
-          <ion-radio value="dogs">Dogs</ion-radio><br />
-          <ion-radio value="cats">Cats</ion-radio><br />
-          <ion-radio value="turtles">Turtles</ion-radio><br />
-          <ion-radio value="fish">Fish</ion-radio><br />
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-radio-group allow-empty-selection="true" value="turtles">
+            <ion-radio value="dogs">Dogs</ion-radio><br />
+            <ion-radio value="cats">Cats</ion-radio><br />
+            <ion-radio value="turtles">Turtles</ion-radio><br />
+            <ion-radio value="fish">Fish</ion-radio><br />
+          </ion-radio-group>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.md
index e2f9b7a8613..2223f07657d 100644
--- a/static/usage/v7/radio/empty-selection/index.md
+++ b/static/usage/v7/radio/empty-selection/index.md
@@ -5,8 +5,4 @@ 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"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/radio/empty-selection/demo.html" />
diff --git a/static/usage/v7/radio/empty-selection/react.md b/static/usage/v7/radio/empty-selection/react.md
index a5509313782..999a230419b 100644
--- a/static/usage/v7/radio/empty-selection/react.md
+++ b/static/usage/v7/radio/empty-selection/react.md
@@ -5,10 +5,14 @@ import { IonRadio, IonRadioGroup } from '@ionic/react';
 function Example() {
   return (
     <IonRadioGroup allowEmptySelection={true} value="turtles">
-      <IonRadio value="dogs">Dogs</IonRadio><br />
-      <IonRadio value="cats">Cats</IonRadio><br />
-      <IonRadio value="turtles">Turtles</IonRadio><br />
-      <IonRadio value="fish">Fish</IonRadio><br />
+      <IonRadio value="dogs">Dogs</IonRadio>
+      <br />
+      <IonRadio value="cats">Cats</IonRadio>
+      <br />
+      <IonRadio value="turtles">Turtles</IonRadio>
+      <br />
+      <IonRadio value="fish">Fish</IonRadio>
+      <br />
     </IonRadioGroup>
   );
 }
diff --git a/static/usage/v7/radio/justify/demo.html b/static/usage/v7/radio/justify/demo.html
index 7a26120183a..cfeb395cf0d 100644
--- a/static/usage/v7/radio/justify/demo.html
+++ b/static/usage/v7/radio/justify/demo.html
@@ -1,21 +1,20 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
   <body>
     <ion-app>
       <ion-content>
diff --git a/static/usage/v7/radio/justify/react.md b/static/usage/v7/radio/justify/react.md
index 629c7d896ac..0cae0d9191a 100644
--- a/static/usage/v7/radio/justify/react.md
+++ b/static/usage/v7/radio/justify/react.md
@@ -7,19 +7,25 @@ function Example() {
     <IonList>
       <IonRadioGroup value="start">
         <IonItem>
-          <IonRadio value="start" justify="start">Packed at the Start of Line</IonRadio>
+          <IonRadio value="start" justify="start">
+            Packed at the Start of Line
+          </IonRadio>
         </IonItem>
       </IonRadioGroup>
-    
+
       <IonRadioGroup value="end">
         <IonItem>
-          <IonRadio value="end" justify="end">Packed at the End of Line</IonRadio>
+          <IonRadio value="end" justify="end">
+            Packed at the End of Line
+          </IonRadio>
         </IonItem>
       </IonRadioGroup>
-    
+
       <IonRadioGroup value="space-between">
         <IonItem>
-          <IonRadio value="space-between" justify="space-between">Space Between Label and Control</IonRadio>
+          <IonRadio value="space-between" justify="space-between">
+            Space Between Label and Control
+          </IonRadio>
         </IonItem>
       </IonRadioGroup>
     </IonList>
diff --git a/static/usage/v7/radio/justify/vue.md b/static/usage/v7/radio/justify/vue.md
index 3921f552a39..89f9f63b72a 100644
--- a/static/usage/v7/radio/justify/vue.md
+++ b/static/usage/v7/radio/justify/vue.md
@@ -6,13 +6,13 @@
         <ion-radio value="start" justify="start">Packed at the Start of Line</ion-radio>
       </ion-item>
     </ion-radio-group>
-  
+
     <ion-radio-group value="end">
       <ion-item>
         <ion-radio value="end" justify="end">Packed at the End of Line</ion-radio>
       </ion-item>
     </ion-radio-group>
-  
+
     <ion-radio-group value="space-between">
       <ion-item>
         <ion-radio value="space-between" justify="space-between">Space Between Label and Control</ion-radio>
diff --git a/static/usage/v7/radio/label-placement/demo.html b/static/usage/v7/radio/label-placement/demo.html
index 066be21484c..b038df4eb0e 100644
--- a/static/usage/v7/radio/label-placement/demo.html
+++ b/static/usage/v7/radio/label-placement/demo.html
@@ -1,40 +1,38 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div>
+            <ion-radio-group value="start">
+              <ion-radio value="start" label-placement="start">Label at the Start</ion-radio>
+            </ion-radio-group>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div>
-          <ion-radio-group value="start">
-            <ion-radio value="start" label-placement="start">Label at the Start</ion-radio>
-          </ion-radio-group>
+            <br />
 
-          <br />
+            <ion-radio-group value="end">
+              <ion-radio value="end" label-placement="end">Label at the End</ion-radio>
+            </ion-radio-group>
 
-          <ion-radio-group value="end">
-            <ion-radio value="end" label-placement="end">Label at the End</ion-radio>
-          </ion-radio-group>
+            <br />
 
-          <br />
-
-          <ion-radio-group value="fixed">
-            <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</ion-radio>
-          </ion-radio-group>
+            <ion-radio-group value="fixed">
+              <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</ion-radio>
+            </ion-radio-group>
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/radio/label-placement/react.md b/static/usage/v7/radio/label-placement/react.md
index 9771d026953..8827af5225f 100644
--- a/static/usage/v7/radio/label-placement/react.md
+++ b/static/usage/v7/radio/label-placement/react.md
@@ -6,19 +6,25 @@ function Example() {
   return (
     <>
       <IonRadioGroup value="start">
-        <IonRadio value="start" labelPlacement="start">Label at the Start</IonRadio>
+        <IonRadio value="start" labelPlacement="start">
+          Label at the Start
+        </IonRadio>
       </IonRadioGroup>
-      
+
       <br />
-      
+
       <IonRadioGroup value="end">
-        <IonRadio value="end" labelPlacement="end">Label at the End</IonRadio>
+        <IonRadio value="end" labelPlacement="end">
+          Label at the End
+        </IonRadio>
       </IonRadioGroup>
-      
+
       <br />
-      
+
       <IonRadioGroup value="fixed">
-        <IonRadio value="fixed" labelPlacement="fixed">Fixed Width Label</IonRadio>
+        <IonRadio value="fixed" labelPlacement="fixed">
+          Fixed Width Label
+        </IonRadio>
       </IonRadioGroup>
     </>
   );
diff --git a/static/usage/v7/radio/label-placement/vue.md b/static/usage/v7/radio/label-placement/vue.md
index 02403f2fdd7..3562db1c507 100644
--- a/static/usage/v7/radio/label-placement/vue.md
+++ b/static/usage/v7/radio/label-placement/vue.md
@@ -3,15 +3,15 @@
   <ion-radio-group value="start">
     <ion-radio value="start" label-placement="start">Label at the Start</ion-radio>
   </ion-radio-group>
-  
+
   <br />
-  
+
   <ion-radio-group value="end">
     <ion-radio value="end" label-placement="end">Label at the End</ion-radio>
   </ion-radio-group>
-  
+
   <br />
-  
+
   <ion-radio-group value="fixed">
     <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</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
index 12b247ea98b..273dfe737d3 100644
--- a/static/usage/v7/radio/theming/colors/demo.html
+++ b/static/usage/v7/radio/theming/colors/demo.html
@@ -1,50 +1,48 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-radio-group value="primary">
-          <ion-radio aria-label="Primary" color="primary" value="primary"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="secondary">
-          <ion-radio aria-label="Secondary" color="secondary" value="secondary"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="tertiary">
-          <ion-radio aria-label="Tertiary" color="tertiary" value="tertiary"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="success">
-          <ion-radio aria-label="Success" color="success" value="success"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="warning">
-          <ion-radio aria-label="Warning" color="warning" value="warning"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="danger">
-          <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="light">
-          <ion-radio aria-label="Light" color="light" value="light"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="medium">
-          <ion-radio aria-label="Medium" color="medium" value="medium"></ion-radio>
-        </ion-radio-group>
-        <ion-radio-group value="dark">
-          <ion-radio aria-label="Dark" color="dark" value="dark"></ion-radio>
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-radio-group value="primary">
+            <ion-radio aria-label="Primary" color="primary" value="primary"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="secondary">
+            <ion-radio aria-label="Secondary" color="secondary" value="secondary"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="tertiary">
+            <ion-radio aria-label="Tertiary" color="tertiary" value="tertiary"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="success">
+            <ion-radio aria-label="Success" color="success" value="success"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="warning">
+            <ion-radio aria-label="Warning" color="warning" value="warning"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="danger">
+            <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="light">
+            <ion-radio aria-label="Light" color="light" value="light"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="medium">
+            <ion-radio aria-label="Medium" color="medium" value="medium"></ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="dark">
+            <ion-radio aria-label="Dark" color="dark" value="dark"></ion-radio>
+          </ion-radio-group>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/radio/theming/css-properties/demo.html b/static/usage/v7/radio/theming/css-properties/demo.html
index 663f27404f1..f33581263b6 100644
--- a/static/usage/v7/radio/theming/css-properties/demo.html
+++ b/static/usage/v7/radio/theming/css-properties/demo.html
@@ -1,49 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-radio {
-      --border-radius: 4px;
-      --inner-border-radius: 4px;
-
-      --color: #ddd;
-      --color-checked: #6815ec;
-    }
-
-    ion-radio.ios::part(container) {
-      width: 20px;
-      height: 20px;
-
-      border: 2px solid #ddd;
-      border-radius: 4px;
-    }
-
-    .radio-checked.ios::part(container) {
-      border-color: #6815ec;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-radio-group value="custom-checked">
-          <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
-          <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-radio {
+        --border-radius: 4px;
+        --inner-border-radius: 4px;
+
+        --color: #ddd;
+        --color-checked: #6815ec;
+      }
+
+      ion-radio.ios::part(container) {
+        width: 20px;
+        height: 20px;
+
+        border: 2px solid #ddd;
+        border-radius: 4px;
+      }
+
+      .radio-checked.ios::part(container) {
+        border-color: #6815ec;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-radio-group value="custom-checked">
+            <ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
+            <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
+          </ion-radio-group>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/radio/theming/css-properties/javascript.md b/static/usage/v7/radio/theming/css-properties/javascript.md
index 8fd97c95589..d61629a5d9b 100644
--- a/static/usage/v7/radio/theming/css-properties/javascript.md
+++ b/static/usage/v7/radio/theming/css-properties/javascript.md
@@ -8,19 +8,19 @@
   ion-radio {
     --border-radius: 4px;
     --inner-border-radius: 4px;
-  
+
     --color: #ddd;
     --color-checked: #6815ec;
   }
-  
+
   ion-radio.ios::part(container) {
     width: 20px;
     height: 20px;
-  
+
     border: 2px solid #ddd;
     border-radius: 4px;
   }
-  
+
   .radio-checked.ios::part(container) {
     border-color: #6815ec;
   }
diff --git a/static/usage/v7/radio/theming/css-properties/vue.md b/static/usage/v7/radio/theming/css-properties/vue.md
index 515876a8014..ddbbd48152a 100644
--- a/static/usage/v7/radio/theming/css-properties/vue.md
+++ b/static/usage/v7/radio/theming/css-properties/vue.md
@@ -19,19 +19,19 @@
   ion-radio {
     --border-radius: 4px;
     --inner-border-radius: 4px;
-  
+
     --color: #ddd;
     --color-checked: #6815ec;
   }
-  
+
   ion-radio.ios::part(container) {
     width: 20px;
     height: 20px;
-  
+
     border: 2px solid #ddd;
     border-radius: 4px;
   }
-  
+
   .radio-checked.ios::part(container) {
     border-color: #6815ec;
   }
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
index ddc4bcc18ea..ed13071b193 100644
--- 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
@@ -2,7 +2,7 @@
 ion-radio::part(container) {
   width: 30px;
   height: 30px;
-  
+
   border-radius: 8px;
   border: 2px solid #ddd;
 }
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/demo.html b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
index dafabb5b149..a16a987f495 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
@@ -1,60 +1,58 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-radio::part(container) {
-      width: 30px;
-      height: 30px;
-
-      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" aria-label="Custom checkbox"></ion-radio>
-          <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
-        </ion-radio-group>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-radio::part(container) {
+        width: 30px;
+        height: 30px;
+
+        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" aria-label="Custom checkbox"></ion-radio>
+            <ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
+          </ion-radio-group>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/javascript.md b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
index 3a9f9c7ccc6..537f1c58d7a 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
@@ -8,7 +8,7 @@
   ion-radio::part(container) {
     width: 30px;
     height: 30px;
-    
+
     border-radius: 8px;
     border: 2px solid #ddd;
   }
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
index ddc4bcc18ea..ed13071b193 100644
--- 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
@@ -2,7 +2,7 @@
 ion-radio::part(container) {
   width: 30px;
   height: 30px;
-  
+
   border-radius: 8px;
   border: 2px solid #ddd;
 }
diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html
index b8cbcf4f9b8..55216a9dd4b 100644
--- a/static/usage/v7/range/basic/demo.html
+++ b/static/usage/v7/range/basic/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range aria-label="Volume"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range aria-label="Volume"></ion-range>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/range/dual-knobs/demo.html b/static/usage/v7/range/dual-knobs/demo.html
index 391740906c3..6d2e8fef85b 100644
--- a/static/usage/v7/range/dual-knobs/demo.html
+++ b/static/usage/v7/range/dual-knobs/demo.html
@@ -1,36 +1,34 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range aria-label="Dual Knobs 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>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range aria-label="Dual Knobs 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/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html
index 2459de629cd..0c5f17d2875 100644
--- a/static/usage/v7/range/ion-change-event/demo.html
+++ b/static/usage/v7/range/ion-change-event/demo.html
@@ -1,40 +1,39 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .demo {
+        max-width: 320px;
+        width: 100%;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Range with ionChange"></ion-range>
-          <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div class="demo">
+            <ion-range aria-label="Range with ionChange"></ion-range>
+            <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
+          </div>
         </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>
+      </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/v7/range/ion-change-event/react.md b/static/usage/v7/range/ion-change-event/react.md
index ff1826a5a80..d6c43bc7696 100644
--- a/static/usage/v7/range/ion-change-event/react.md
+++ b/static/usage/v7/range/ion-change-event/react.md
@@ -6,7 +6,10 @@ function Example() {
   const [lastEmittedValue, setLastEmittedValue] = useState<RangeValue>();
   return (
     <>
-      <IonRange aria-label="Range with ionChange" onIonChange={({ detail }) => setLastEmittedValue(detail.value)}></IonRange>
+      <IonRange
+        aria-label="Range with ionChange"
+        onIonChange={({ detail }) => setLastEmittedValue(detail.value)}
+      ></IonRange>
       <IonLabel>ionChange emitted value: {lastEmittedValue as number}</IonLabel>
     </>
   );
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
index dba19f00874..39e6c2bcfdd 100644
--- 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
@@ -1,5 +1,9 @@
 ```html
-<ion-range aria-label="Range with knob events" (ionKnobMoveStart)="onIonKnobMoveStart($event)" (ionKnobMoveEnd)="onIonKnobMoveEnd($event)"></ion-range>
+<ion-range
+  aria-label="Range with knob events"
+  (ionKnobMoveStart)="onIonKnobMoveStart($event)"
+  (ionKnobMoveEnd)="onIonKnobMoveEnd($event)"
+></ion-range>
 <div>
   <ion-label>ionKnobMoveStart: {{ moveStart }}</ion-label>
 </div>
diff --git a/static/usage/v7/range/ion-knob-move-event/demo.html b/static/usage/v7/range/ion-knob-move-event/demo.html
index d155682045f..c4c38f48f1c 100644
--- a/static/usage/v7/range/ion-knob-move-event/demo.html
+++ b/static/usage/v7/range/ion-knob-move-event/demo.html
@@ -1,50 +1,49 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .demo {
+        max-width: 320px;
+        width: 100%;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Range with knob events"></ion-range>
-          <div>
-            <ion-label>ionKnobMoveStart: <span id="moveStart"></span></ion-label>
-          </div>
-          <div>
-            <ion-label>ionKnobMoveEnd: <span id="moveEnd"></span></ion-label>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div class="demo">
+            <ion-range aria-label="Range with knob events"></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>
         </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;
-    });
+      </ion-content>
+    </ion-app>
+    <script>
+      const range = document.querySelector('ion-range');
+      const moveStart = document.querySelector('#moveStart');
+      const moveEnd = document.querySelector('#moveEnd');
 
-    range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
-      moveEnd.innerHTML = detail.value;
-    });
-  </script>
-</body>
+      range.addEventListener('ionKnobMoveStart', ({ detail }) => {
+        moveStart.innerHTML = detail.value;
+      });
 
+      range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
+        moveEnd.innerHTML = detail.value;
+      });
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/range/ion-knob-move-event/vue.md b/static/usage/v7/range/ion-knob-move-event/vue.md
index 67edb3c7e91..373044281b7 100644
--- a/static/usage/v7/range/ion-knob-move-event/vue.md
+++ b/static/usage/v7/range/ion-knob-move-event/vue.md
@@ -1,6 +1,10 @@
 ```html
 <template>
-  <ion-range aria-label="Range with knob events" @ionKnobMoveStart="onIonKnobMoveStart" @ionKnobMoveEnd="onIonKnobMoveEnd"></ion-range>
+  <ion-range
+    aria-label="Range with knob events"
+    @ionKnobMoveStart="onIonKnobMoveStart"
+    @ionKnobMoveEnd="onIonKnobMoveEnd"
+  ></ion-range>
   <div>
     <ion-label>ionKnobMoveStart: {{moveStart}}</ion-label>
   </div>
diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html
index cfb8134a91f..e4e1e0c57a4 100644
--- a/static/usage/v7/range/labels/demo.html
+++ b/static/usage/v7/range/labels/demo.html
@@ -1,45 +1,43 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .wrapper {
+        width: calc(100% - 100px);
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    .wrapper {
-      width: calc(100% - 100px);
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div class="wrapper">
+            <ion-range label-placement="start">
+              <div slot="label">Label at the Start</div>
+            </ion-range>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div class="wrapper">
-          <ion-range label-placement="start">
-            <div slot="label">Label at the Start</div>
-          </ion-range>
+            <br />
 
-          <br />
+            <ion-range label-placement="end">
+              <div slot="label">Label at the End</div>
+            </ion-range>
 
-          <ion-range label-placement="end">
-            <div slot="label">Label at the End</div>
-          </ion-range>
+            <br />
 
-          <br />
-
-          <ion-range label-placement="fixed">
-            <div slot="label">Fixed Width Label</div>
-          </ion-range>
+            <ion-range label-placement="fixed">
+              <div slot="label">Fixed Width Label</div>
+            </ion-range>
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/range/labels/react.md b/static/usage/v7/range/labels/react.md
index 30df6a33349..3096d66ac6f 100644
--- a/static/usage/v7/range/labels/react.md
+++ b/static/usage/v7/range/labels/react.md
@@ -7,19 +7,19 @@ function Example() {
       <IonRange labelPlacement="start">
         <div slot="label">Label at the Start</div>
       </IonRange>
-    
+
       <br />
-    
+
       <IonRange labelPlacement="end">
         <div slot="label">Label at the End</div>
       </IonRange>
-    
+
       <br />
-    
+
       <IonRange labelPlacement="fixed">
         <div slot="label">Fixed Width Label</div>
       </IonRange>
-   </>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
index 70d90e834d5..c5346470905 100644
--- a/static/usage/v7/range/labels/vue.md
+++ b/static/usage/v7/range/labels/vue.md
@@ -3,15 +3,15 @@
   <ion-range label-placement="start">
     <div slot="label">Label at the Start</div>
   </ion-range>
-  
+
   <br />
-  
+
   <ion-range label-placement="end">
     <div slot="label">Label at the End</div>
   </ion-range>
-  
+
   <br />
-  
+
   <ion-range label-placement="fixed">
     <div slot="label">Fixed Width Label</div>
   </ion-range>
diff --git a/static/usage/v7/range/migration/index.md b/static/usage/v7/range/migration/index.md
index eb44f072a3f..efec462c3d1 100644
--- a/static/usage/v7/range/migration/index.md
+++ b/static/usage/v7/range/migration/index.md
@@ -209,4 +209,4 @@ import TabItem from '@theme/TabItem';
 ```
 </TabItem>
 </Tabs>
-````
\ No newline at end of file
+````
diff --git a/static/usage/v7/range/pins/demo.html b/static/usage/v7/range/pins/demo.html
index 3c785be7d25..65adbd858e4 100644
--- a/static/usage/v7/range/pins/demo.html
+++ b/static/usage/v7/range/pins/demo.html
@@ -1,35 +1,33 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range pin="true" aria-label="Range with pin"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-  <script>
-    const range = document.querySelector('ion-range');
-    range.pinFormatter = (value) => {
-      return `${value}%`;
-    };
-  </script>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range pin="true" aria-label="Range with pin"></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/v7/range/slots/demo.html b/static/usage/v7/range/slots/demo.html
index cd1bb37e7b2..7fd48d2ce30 100644
--- a/static/usage/v7/range/slots/demo.html
+++ b/static/usage/v7/range/slots/demo.html
@@ -1,32 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range aria-label="Temperature">
-          <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>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range aria-label="Temperature">
+            <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/v7/range/snapping-ticks/demo.html b/static/usage/v7/range/snapping-ticks/demo.html
index 447f1dd586a..2fee5c8ce44 100644
--- a/static/usage/v7/range/snapping-ticks/demo.html
+++ b/static/usage/v7/range/snapping-ticks/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
+    </style>
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-range aria-label="Range with ticks" ticks="true" snaps="true" min="0" max="10"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range aria-label="Range with ticks" ticks="true" snaps="true" min="0" max="10"></ion-range>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/range/theming/css-properties/demo.html b/static/usage/v7/range/theming/css-properties/demo.html
index 4c3c7264033..1ec8a9680a1 100644
--- a/static/usage/v7/range/theming/css-properties/demo.html
+++ b/static/usage/v7/range/theming/css-properties/demo.html
@@ -1,38 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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;
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Custom range" value="50" pin="true"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+        max-width: 320px;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range aria-label="Custom range" value="50" pin="true"></ion-range>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
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
index 5d41d25796b..d8b5aad8076 100644
--- 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
@@ -1,3 +1,11 @@
 ```html
-<ion-range aria-label="Custom range" [min]="0" [max]="10" [value]="5" [pin]="true" [ticks]="true" [snaps]="true"></ion-range>
+<ion-range
+  aria-label="Custom 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
index 76db3121d3b..9e1fc9d86f7 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/range/theming/css-shadow-parts/demo.html
@@ -1,71 +1,77 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-range {
-      max-width: 320px;
-    }
+      ion-range::part(tick) {
+        background: #a2d2ff;
+      }
 
-    ion-range::part(tick) {
-      background: #a2d2ff;
-    }
+      ion-range::part(tick-active) {
+        background: #bde0fe;
+      }
 
-    ion-range::part(tick-active) {
-      background: #bde0fe;
-    }
+      ion-range::part(pin) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
 
-    ion-range::part(pin) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+        background: #ffafcc;
+        color: #fff;
 
-      background: #ffafcc;
-      color: #fff;
+        border-radius: 50%;
+        transform: scale(1.01);
 
-      border-radius: 50%;
-      transform: scale(1.01);
+        top: -20px;
 
-      top: -20px;
+        min-width: 28px;
+        height: 28px;
+        transition: transform 120ms ease, background 120ms ease;
+      }
 
-      min-width: 28px;
-      height: 28px;
-      transition: transform 120ms ease, background 120ms ease;
-    }
+      ion-range::part(pin)::before {
+        content: none;
+      }
 
-    ion-range::part(pin)::before {
-      content: none;
-    }
+      ion-range::part(knob) {
+        background: #ffc8dd;
+      }
 
-    ion-range::part(knob) {
-      background: #ffc8dd;
-    }
+      ion-range::part(bar) {
+        background: #a2d2ff;
+      }
 
-    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 aria-label="Custom range" min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+      ion-range::part(bar-active) {
+        background: #bde0fe;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range
+            aria-label="Custom 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/v7/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md
index c5a4905c59d..801f80be7a5 100644
--- 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
@@ -5,7 +5,9 @@ import { IonRange } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return <IonRange aria-label="Custom range" min={0} max={10} value={5} pin={true} ticks={true} snaps={true}></IonRange>;
+  return (
+    <IonRange aria-label="Custom range" 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
index 7c0c2247546..91b55c3c3c5 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/range/theming/css-shadow-parts/vue.md
@@ -44,7 +44,15 @@
 </style>
 
 <template>
-  <ion-range aria-label="Custom range" :min="0" :max="10" :value="5" :pin="true" :ticks="true" :snaps="true"></ion-range>
+  <ion-range
+    aria-label="Custom range"
+    :min="0"
+    :max="10"
+    :value="5"
+    :pin="true"
+    :ticks="true"
+    :snaps="true"
+  ></ion-range>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
index 035069fc2a9..98888ac14fa 100644
--- a/static/usage/v7/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
@@ -7,7 +7,21 @@ import { Component } from '@angular/core';
   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 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() {
@@ -22,7 +36,7 @@ export class ExampleComponent {
     for (let i = 0; i < count; i++) {
       this.items.unshift({
         name: this.chooseRandomName(),
-        unread: unread
+        unread: unread,
       });
     }
   }
@@ -32,6 +46,6 @@ export class ExampleComponent {
       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
index 7fccf08dd40..3c6ea3e6750 100644
--- a/static/usage/v7/refresher/advanced/demo.html
+++ b/static/usage/v7/refresher/advanced/demo.html
@@ -1,89 +1,88 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-item {
-      --padding-start: 8px;
-    }
+    <style>
+      ion-item {
+        --padding-start: 8px;
+      }
 
-    ion-icon {
-      font-size: 12px;
-      align-self: start;
-      margin: 15px 8px;
-    }
-  </style>
-</head>
+      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>
+  <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-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>
+        <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',
-    ];
+    <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);
-    });
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          addItems(3, true);
+          refresher.complete();
+        }, 2000);
+      });
 
-    const list = document.querySelector('ion-list');
-    addItems(5, false);
+      const list = document.querySelector('ion-list');
+      addItems(5, false);
 
-    function chooseRandomName() {
-      return names[Math.floor(Math.random() * names.length)];
-    }
+      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 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;
+      function createItems(unread = false) {
+        const name = chooseRandomName();
+        let item = document.createElement('ion-item');
+        item.button = true;
 
-      item.innerHTML += `
+        item.innerHTML += `
         <ion-icon color="primary" name="${unread ? 'ellipse' : ''}" slot="start"></ion-icon>
         <ion-label>
           <h2>${name}</h2>
@@ -91,9 +90,8 @@ <h2>${name}</h2>
         </ion-label>
       `;
 
-      return item;
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+        return item;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/refresher/advanced/javascript.md b/static/usage/v7/refresher/advanced/javascript.md
index d05bed7cacf..9e0ba6f76ed 100644
--- a/static/usage/v7/refresher/advanced/javascript.md
+++ b/static/usage/v7/refresher/advanced/javascript.md
@@ -15,7 +15,21 @@
 
 <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'];
+  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(() => {
diff --git a/static/usage/v7/refresher/advanced/react/main_tsx.md b/static/usage/v7/refresher/advanced/react/main_tsx.md
index ab9596a2675..f4cdf27d4eb 100644
--- a/static/usage/v7/refresher/advanced/react/main_tsx.md
+++ b/static/usage/v7/refresher/advanced/react/main_tsx.md
@@ -1,13 +1,39 @@
 ```tsx
 import React, { useEffect, useState } from 'react';
-import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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}[]>([]);
+  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;
 
@@ -49,12 +75,12 @@ function Example() {
         </IonRefresher>
 
         <IonList>
-          { items.map((item) => (
+          {items.map((item) => (
             <IonItem button={true}>
-              <IonIcon slot="start" color="primary" icon={ item.unread ? ellipse : '' }></IonIcon>
+              <IonIcon slot="start" color="primary" icon={item.unread ? ellipse : ''}></IonIcon>
               <IonLabel>
-                <h2>{ item.name }</h2>
-                <p>New message from { item.name }</p>
+                <h2>{item.name}</h2>
+                <p>New message from {item.name}</p>
               </IonLabel>
             </IonItem>
           ))}
diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md
index 328bfcf00f1..c5ec3047d44 100644
--- a/static/usage/v7/refresher/advanced/vue.md
+++ b/static/usage/v7/refresher/advanced/vue.md
@@ -24,14 +24,50 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  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 },
+    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'];
+      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 = () => {
@@ -40,7 +76,7 @@
 
       const addItems = (count, unread = false) => {
         for (let i = 0; i < count; i++) {
-          items.value.unshift({name: chooseRandomName(), unread});
+          items.value.unshift({ name: chooseRandomName(), unread });
         }
       };
 
diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
index efb168da9d4..74304953d4e 100644
--- a/static/usage/v7/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -11,6 +11,6 @@ export class ExampleComponent {
       // 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
index 028c03eeac4..ab919600b97 100644
--- a/static/usage/v7/refresher/basic/demo.html
+++ b/static/usage/v7/refresher/basic/demo.html
@@ -1,43 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Pull to Refresh</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-<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>
 
-    <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>
 
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
+    <script>
+      const refresher = document.getElementById('refresher');
 
-  <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
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          refresher.complete();
+        }, 2000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/refresher/basic/react.md b/static/usage/v7/refresher/basic/react.md
index 8c828b090c7..02b0504208b 100644
--- a/static/usage/v7/refresher/basic/react.md
+++ b/static/usage/v7/refresher/basic/react.md
@@ -1,9 +1,16 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
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
index bca91e0a0d8..5f0e0a5171f 100644
--- a/static/usage/v7/refresher/custom-content/angular/example_component_html.md
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_html.md
@@ -11,7 +11,8 @@
       pullingIcon="chevron-down-circle-outline"
       pullingText="Pull to refresh"
       refreshingSpinner="circles"
-      refreshingText="Refreshing...">
+      refreshingText="Refreshing..."
+    >
     </ion-refresher-content>
   </ion-refresher>
 
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
index efb168da9d4..74304953d4e 100644
--- a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -11,6 +11,6 @@ export class ExampleComponent {
       // 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
index 8159df0cc2c..95e9fabcc37 100644
--- a/static/usage/v7/refresher/custom-content/demo.html
+++ b/static/usage/v7/refresher/custom-content/demo.html
@@ -1,45 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Pull to Refresh</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-<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>
 
-    <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>
 
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
+    <script>
+      const refresher = document.getElementById('refresher');
 
-  <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
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          refresher.complete();
+        }, 2000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/refresher/custom-content/javascript.md b/static/usage/v7/refresher/custom-content/javascript.md
index 779bd97ed80..efcde3c9d6e 100644
--- a/static/usage/v7/refresher/custom-content/javascript.md
+++ b/static/usage/v7/refresher/custom-content/javascript.md
@@ -11,7 +11,8 @@
       pulling-icon="chevron-down-circle-outline"
       pulling-text="Pull to refresh"
       refreshing-spinner="circles"
-      refreshing-text="Refreshing...">
+      refreshing-text="Refreshing..."
+    >
     </ion-refresher-content>
   </ion-refresher>
 
diff --git a/static/usage/v7/refresher/custom-content/react.md b/static/usage/v7/refresher/custom-content/react.md
index 627f4981f56..9349b2d2857 100644
--- a/static/usage/v7/refresher/custom-content/react.md
+++ b/static/usage/v7/refresher/custom-content/react.md
@@ -1,10 +1,17 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
@@ -26,8 +33,8 @@ function Example() {
             pullingIcon={chevronDownCircleOutline}
             pullingText="Pull to refresh"
             refreshingSpinner="circles"
-            refreshingText="Refreshing...">
-          </IonRefresherContent>
+            refreshingText="Refreshing..."
+          ></IonRefresherContent>
         </IonRefresher>
 
         <p>Pull this content down to trigger the refresh.</p>
diff --git a/static/usage/v7/refresher/custom-content/vue.md b/static/usage/v7/refresher/custom-content/vue.md
index a5bb444fd91..af350137449 100644
--- a/static/usage/v7/refresher/custom-content/vue.md
+++ b/static/usage/v7/refresher/custom-content/vue.md
@@ -12,7 +12,8 @@
         :pulling-icon="chevronDownCircleOutline"
         pulling-text="Pull to refresh"
         refreshing-spinner="circles"
-        refreshing-text="Refreshing...">
+        refreshing-text="Refreshing..."
+      >
       </ion-refresher-content>
     </ion-refresher>
 
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
index 8d604ad85ee..a5ac7eaaa9a 100644
--- 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
@@ -12,6 +12,6 @@ export class ExampleComponent {
       // 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
index 9c004f37a19..b52c58eb81f 100644
--- a/static/usage/v7/refresher/custom-scroll-target/demo.html
+++ b/static/usage/v7/refresher/custom-scroll-target/demo.html
@@ -1,56 +1,54 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
index fd701a7c531..a8a52b4d29d 100644
--- a/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
@@ -1,11 +1,18 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
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
index efb168da9d4..74304953d4e 100644
--- a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -11,6 +11,6 @@ export class ExampleComponent {
       // 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
index af549ec23a6..cd7f8031e38 100644
--- a/static/usage/v7/refresher/pull-properties/demo.html
+++ b/static/usage/v7/refresher/pull-properties/demo.html
@@ -1,43 +1,41 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Pull to Refresh</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-<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>
 
-    <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>
 
-      <p>Pull this content down to trigger the refresh.</p>
-    </ion-content>
-  </ion-app>
+    <script>
+      const refresher = document.getElementById('refresher');
 
-  <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
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          // Any calls to load data go here
+          refresher.complete();
+        }, 2000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/refresher/pull-properties/react.md b/static/usage/v7/refresher/pull-properties/react.md
index 73f5a65b07a..e62afa17bdd 100644
--- a/static/usage/v7/refresher/pull-properties/react.md
+++ b/static/usage/v7/refresher/pull-properties/react.md
@@ -1,9 +1,16 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/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
diff --git a/static/usage/v7/reorder/basic/angular/example_component_html.md b/static/usage/v7/reorder/basic/angular/example_component_html.md
index 0a02fe2563d..60795eaa3ff 100644
--- a/static/usage/v7/reorder/basic/angular/example_component_html.md
+++ b/static/usage/v7/reorder/basic/angular/example_component_html.md
@@ -4,37 +4,27 @@
   <!-- 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-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <ion-label> Item 5 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
   </ion-reorder-group>
diff --git a/static/usage/v7/reorder/basic/angular/example_component_ts.md b/static/usage/v7/reorder/basic/angular/example_component_ts.md
index 6fdf85ed614..7a5c867f791 100644
--- a/static/usage/v7/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/reorder/basic/demo.html b/static/usage/v7/reorder/basic/demo.html
index bda0f81d78e..9a57300393d 100644
--- a/static/usage/v7/reorder/basic/demo.html
+++ b/static/usage/v7/reorder/basic/demo.html
@@ -1,83 +1,71 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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 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 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 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>
 
-            <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');
 
-  <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);
 
-    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
+        // 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/v7/reorder/basic/javascript.md b/static/usage/v7/reorder/basic/javascript.md
index 0d7a09f9818..fe805d10fc6 100644
--- a/static/usage/v7/reorder/basic/javascript.md
+++ b/static/usage/v7/reorder/basic/javascript.md
@@ -3,37 +3,27 @@
   <!-- 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-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <ion-label> Item 5 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
   </ion-reorder-group>
@@ -42,7 +32,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v7/reorder/basic/react.md b/static/usage/v7/reorder/basic/react.md
index 179ee82a782..abe3b187294 100644
--- a/static/usage/v7/reorder/basic/react.md
+++ b/static/usage/v7/reorder/basic/react.md
@@ -19,37 +19,27 @@ function Example() {
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
         <IonItem>
-          <IonLabel>
-            Item 1
-          </IonLabel>
+          <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 2
-          </IonLabel>
+          <IonLabel>Item 2</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 3
-          </IonLabel>
+          <IonLabel>Item 3</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 4
-          </IonLabel>
+          <IonLabel>Item 4</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 5
-          </IonLabel>
+          <IonLabel>Item 5</IonLabel>
           <IonReorder slot="end"></IonReorder>
         </IonItem>
       </IonReorderGroup>
diff --git a/static/usage/v7/reorder/basic/vue.md b/static/usage/v7/reorder/basic/vue.md
index 5a861e1dc26..0ac2374089f 100644
--- a/static/usage/v7/reorder/basic/vue.md
+++ b/static/usage/v7/reorder/basic/vue.md
@@ -4,37 +4,27 @@
     <!-- 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-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <ion-label> Item 5 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
     </ion-reorder-group>
@@ -57,10 +47,10 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
+      };
 
-      return { handleReorder }
-    }
+      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
index 12473b3a04a..6d1fb8960bd 100644
--- a/static/usage/v7/reorder/custom-icon/angular/example_component_html.md
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_html.md
@@ -4,45 +4,35 @@
   <!-- 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-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-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-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-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-label> Item 5 </ion-label>
       <ion-reorder slot="end">
         <ion-icon name="pizza"></ion-icon>
       </ion-reorder>
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
index 6fdf85ed614..7a5c867f791 100644
--- a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/reorder/custom-icon/demo.html b/static/usage/v7/reorder/custom-icon/demo.html
index 651718ee419..5b40f28d915 100644
--- a/static/usage/v7/reorder/custom-icon/demo.html
+++ b/static/usage/v7/reorder/custom-icon/demo.html
@@ -1,93 +1,81 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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 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 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 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>
 
-            <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');
 
-  <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);
 
-    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
+        // 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/v7/reorder/custom-icon/javascript.md b/static/usage/v7/reorder/custom-icon/javascript.md
index 6e75b74343f..d7aa87d8f64 100644
--- a/static/usage/v7/reorder/custom-icon/javascript.md
+++ b/static/usage/v7/reorder/custom-icon/javascript.md
@@ -3,45 +3,35 @@
   <!-- 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-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-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-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-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-label> Item 5 </ion-label>
       <ion-reorder slot="end">
         <ion-icon name="pizza"></ion-icon>
       </ion-reorder>
@@ -52,7 +42,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v7/reorder/custom-icon/react.md b/static/usage/v7/reorder/custom-icon/react.md
index 845a3a6decc..9103db6029d 100644
--- a/static/usage/v7/reorder/custom-icon/react.md
+++ b/static/usage/v7/reorder/custom-icon/react.md
@@ -20,45 +20,35 @@ function Example() {
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
         <IonItem>
-          <IonLabel>
-            Item 1
-          </IonLabel>
+          <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 2
-          </IonLabel>
+          <IonLabel>Item 2</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 3
-          </IonLabel>
+          <IonLabel>Item 3</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 4
-          </IonLabel>
+          <IonLabel>Item 4</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
         </IonItem>
 
         <IonItem>
-          <IonLabel>
-            Item 5
-          </IonLabel>
+          <IonLabel>Item 5</IonLabel>
           <IonReorder slot="end">
             <IonIcon icon={pizza}></IonIcon>
           </IonReorder>
diff --git a/static/usage/v7/reorder/custom-icon/vue.md b/static/usage/v7/reorder/custom-icon/vue.md
index 17416c67e85..87d77e33048 100644
--- a/static/usage/v7/reorder/custom-icon/vue.md
+++ b/static/usage/v7/reorder/custom-icon/vue.md
@@ -4,45 +4,35 @@
     <!-- 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-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-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-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-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-label> Item 5 </ion-label>
         <ion-reorder slot="end">
           <ion-icon :icon="pizza"></ion-icon>
         </ion-reorder>
@@ -68,9 +58,9 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
-      return { handleReorder, pizza }
-    }
+      };
+      return { handleReorder, pizza };
+    },
   });
 </script>
 ```
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
index bd08063770b..2296a5506c4 100644
--- 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
@@ -6,37 +6,27 @@
       <!-- 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-label> Item 1 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 2
-          </ion-label>
+          <ion-label> Item 2 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 3
-          </ion-label>
+          <ion-label> Item 3 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 4
-          </ion-label>
+          <ion-label> Item 4 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
+          <ion-label> Item 5 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
       </ion-reorder-group>
diff --git a/static/usage/v7/reorder/custom-scroll-target/demo.html b/static/usage/v7/reorder/custom-scroll-target/demo.html
index d564a236a83..c89eb9f007d 100644
--- a/static/usage/v7/reorder/custom-scroll-target/demo.html
+++ b/static/usage/v7/reorder/custom-scroll-target/demo.html
@@ -1,95 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 100%;
+      }
 
-  <style>
-    ion-list {
-      width: 100%;
-    }
+      .ion-content-scroll-host {
+        position: absolute;
+        top: 0;
+        left: 0;
 
-    .ion-content-scroll-host {
-      position: absolute;
-      top: 0;
-      left: 0;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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 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 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 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>
+                <ion-item>
+                  <ion-label> Item 5 </ion-label>
+                  <ion-reorder slot="end"></ion-reorder>
+                </ion-item>
+              </ion-reorder-group>
+            </ion-list>
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const reorderGroup = document.querySelector('ion-reorder-group');
+      </ion-content>
+    </ion-app>
 
-    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);
+    <script>
+      const reorderGroup = document.querySelector('ion-reorder-group');
 
-      // 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>
+      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);
 
-</html>
\ No newline at end of file
+        // 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/v7/reorder/custom-scroll-target/javascript.md b/static/usage/v7/reorder/custom-scroll-target/javascript.md
index ec5f61d6476..533a5815497 100644
--- a/static/usage/v7/reorder/custom-scroll-target/javascript.md
+++ b/static/usage/v7/reorder/custom-scroll-target/javascript.md
@@ -5,37 +5,27 @@
       <!-- 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-label> Item 1 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 2
-          </ion-label>
+          <ion-label> Item 2 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 3
-          </ion-label>
+          <ion-label> Item 3 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 4
-          </ion-label>
+          <ion-label> Item 4 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
 
         <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
+          <ion-label> Item 5 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>
       </ion-reorder-group>
@@ -46,7 +36,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
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
index cd7fd8f84b0..8a3a8eea92c 100644
--- a/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md
@@ -1,6 +1,14 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import {
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  ItemReorderEventDetail,
+} from '@ionic/react';
 
 import './main.css';
 
@@ -23,37 +31,27 @@ function Example() {
           {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
           <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
             <IonItem>
-              <IonLabel>
-                Item 1
-              </IonLabel>
+              <IonLabel>Item 1</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 2
-              </IonLabel>
+              <IonLabel>Item 2</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 3
-              </IonLabel>
+              <IonLabel>Item 3</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 4
-              </IonLabel>
+              <IonLabel>Item 4</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
 
             <IonItem>
-              <IonLabel>
-                Item 5
-              </IonLabel>
+              <IonLabel>Item 5</IonLabel>
               <IonReorder slot="end"></IonReorder>
             </IonItem>
           </IonReorderGroup>
diff --git a/static/usage/v7/reorder/custom-scroll-target/vue.md b/static/usage/v7/reorder/custom-scroll-target/vue.md
index 808ed347020..43151b12039 100644
--- a/static/usage/v7/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v7/reorder/custom-scroll-target/vue.md
@@ -6,42 +6,32 @@
         <!-- 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-label> Item 1 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 2
-            </ion-label>
+            <ion-label> Item 2 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 3
-            </ion-label>
+            <ion-label> Item 3 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 4
-            </ion-label>
+            <ion-label> Item 4 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
           <ion-item>
-            <ion-label>
-              Item 5
-            </ion-label>
+            <ion-label> Item 5 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
         </ion-reorder-group>
       </ion-list>
-      </div>
+    </div>
   </ion-content>
 </template>
 
@@ -61,10 +51,10 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
+      };
 
-      return { handleReorder }
-    }
+      return { handleReorder };
+    },
   });
 </script>
 
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
index 76af0bff12e..aca04f1ee5a 100644
--- a/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md
@@ -3,44 +3,32 @@
   <!-- 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-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <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>
+<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
index ded54467eba..af0ff643b26 100644
--- a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v7/reorder/toggling-disabled/demo.html b/static/usage/v7/reorder/toggling-disabled/demo.html
index c87b1a18fcb..6058f2a5d0a 100644
--- a/static/usage/v7/reorder/toggling-disabled/demo.html
+++ b/static/usage/v7/reorder/toggling-disabled/demo.html
@@ -1,96 +1,82 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-direction: column;
-      justify-content: space-evenly;
-    }
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-    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>
 
-<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 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 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 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>
 
-            <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>
 
-        <!-- 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');
 
-  <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);
 
-    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();
+      });
 
-      // 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
+      function toggleReorder() {
+        reorderGroup.disabled = !reorderGroup.disabled;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/reorder/toggling-disabled/javascript.md b/static/usage/v7/reorder/toggling-disabled/javascript.md
index 68319ec0221..90a9bc3d1d2 100644
--- a/static/usage/v7/reorder/toggling-disabled/javascript.md
+++ b/static/usage/v7/reorder/toggling-disabled/javascript.md
@@ -2,51 +2,39 @@
 <ion-list>
   <ion-reorder-group>
     <ion-item>
-      <ion-label>
-        Item 1
-      </ion-label>
+      <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 2
-      </ion-label>
+      <ion-label> Item 2 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 3
-      </ion-label>
+      <ion-label> Item 3 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 4
-      </ion-label>
+      <ion-label> Item 4 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 
     <ion-item>
-      <ion-label>
-        Item 5
-      </ion-label>
+      <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>
+<ion-button onClick="toggleReorder()"> Toggle Reorder </ion-button>
 
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v7/reorder/toggling-disabled/react.md b/static/usage/v7/reorder/toggling-disabled/react.md
index e86e1e7516f..a231f782f5c 100644
--- a/static/usage/v7/reorder/toggling-disabled/react.md
+++ b/static/usage/v7/reorder/toggling-disabled/react.md
@@ -1,6 +1,14 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import {
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  ItemReorderEventDetail,
+} from '@ionic/react';
 
 function Example() {
   const [isDisabled, setIsDisabled] = useState(true);
@@ -17,7 +25,7 @@ function Example() {
   }
 
   function toggleReorder() {
-    setIsDisabled(current => !current);
+    setIsDisabled((current) => !current);
   }
 
   return (
@@ -25,46 +33,34 @@ function Example() {
       <IonList>
         <IonReorderGroup disabled={isDisabled} onIonItemReorder={handleReorder}>
           <IonItem>
-            <IonLabel>
-              Item 1
-            </IonLabel>
+            <IonLabel>Item 1</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 2
-            </IonLabel>
+            <IonLabel>Item 2</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 3
-            </IonLabel>
+            <IonLabel>Item 3</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 4
-            </IonLabel>
+            <IonLabel>Item 4</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
 
           <IonItem>
-            <IonLabel>
-              Item 5
-            </IonLabel>
+            <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>
+      <IonButton onClick={toggleReorder}>Toggle Reorder</IonButton>
     </>
   );
 }
diff --git a/static/usage/v7/reorder/toggling-disabled/vue.md b/static/usage/v7/reorder/toggling-disabled/vue.md
index 4711f6dc74b..c649c0ebe36 100644
--- a/static/usage/v7/reorder/toggling-disabled/vue.md
+++ b/static/usage/v7/reorder/toggling-disabled/vue.md
@@ -3,46 +3,34 @@
   <ion-list>
     <ion-reorder-group :disabled="isDisabled" @ionItemReorder="handleReorder($event)">
       <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
+        <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
 
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <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>
+  <ion-button @click="toggleReorder()"> Toggle Reorder </ion-button>
 </template>
 
 <script lang="ts">
@@ -63,14 +51,14 @@
         // 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 }
-    }
+      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
index 4339191e634..d21fc522e96 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
@@ -4,9 +4,7 @@
   <!-- 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-label> Item {{ item }} </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
   </ion-reorder-group>
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
index f1132926bb4..11e2f59d553 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
diff --git a/static/usage/v7/reorder/updating-data/demo.html b/static/usage/v7/reorder/updating-data/demo.html
index d61f9fac473..cef92d8b4ad 100644
--- a/static/usage/v7/reorder/updating-data/demo.html
+++ b/static/usage/v7/reorder/updating-data/demo.html
@@ -1,64 +1,63 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
+    <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>
+  <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');
+    <script>
+      const reorderGroup = document.querySelector('ion-reorder-group');
 
-    let items = [1, 2, 3, 4, 5];
-    reorderItems(items);
+      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);
+      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);
+        // 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);
+        // 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);
-    });
+        // After complete is called the items will be in the new order
+        console.log('After complete', items);
+      });
 
-    function reorderItems(items) {
-      reorderGroup.replaceChildren();
+      function reorderItems(items) {
+        reorderGroup.replaceChildren();
 
-      let reordered = '';
+        let reordered = '';
 
-      for (let i = 0; i < items.length; i++) {
-        reordered += `
+        for (let i = 0; i < items.length; i++) {
+          reordered += `
           <ion-item>
             <ion-label>
               Item ${items[i]}
@@ -66,11 +65,10 @@
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
         `;
-      }
-
-      reorderGroup.innerHTML = reordered;
-    }
-  </script>
-</body>
+        }
 
-</html>
\ No newline at end of file
+        reorderGroup.innerHTML = reordered;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/reorder/updating-data/javascript.md b/static/usage/v7/reorder/updating-data/javascript.md
index 603f9802241..901bf08a970 100644
--- a/static/usage/v7/reorder/updating-data/javascript.md
+++ b/static/usage/v7/reorder/updating-data/javascript.md
@@ -10,7 +10,7 @@
   let items = [1, 2, 3, 4, 5];
   reorderItems(items);
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v7/reorder/updating-data/react.md b/static/usage/v7/reorder/updating-data/react.md
index 25e58caaf0f..c7ad97d184d 100644
--- a/static/usage/v7/reorder/updating-data/react.md
+++ b/static/usage/v7/reorder/updating-data/react.md
@@ -23,14 +23,12 @@ function Example() {
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
-        {items.map(item =>
+        {items.map((item) => (
           <IonItem>
-            <IonLabel>
-              Item { item }
-            </IonLabel>
+            <IonLabel>Item {item}</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
-        )}
+        ))}
       </IonReorderGroup>
     </IonList>
   );
diff --git a/static/usage/v7/reorder/updating-data/vue.md b/static/usage/v7/reorder/updating-data/vue.md
index 024fa130469..18a2d341353 100644
--- a/static/usage/v7/reorder/updating-data/vue.md
+++ b/static/usage/v7/reorder/updating-data/vue.md
@@ -4,9 +4,7 @@
     <!-- 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-label> Item {{ item }} </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
     </ion-reorder-group>
@@ -34,9 +32,9 @@
 
         // After complete is called the items will be in the new order
         console.log('After complete', items.value);
-      }
-      return { handleReorder, items }
-    }
+      };
+      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
index acc62e86b49..cf856309098 100644
--- a/static/usage/v7/reorder/wrapper/angular/example_component_html.md
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_html.md
@@ -5,41 +5,31 @@
   <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
+        <ion-label> Item 1 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <ion-label> Item 5 </ion-label>
       </ion-item>
     </ion-reorder>
   </ion-reorder-group>
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
index 6fdf85ed614..7a5c867f791 100644
--- a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
@@ -5,7 +5,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html'
+  templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/reorder/wrapper/demo.html b/static/usage/v7/reorder/wrapper/demo.html
index 6896fec2f2f..38a0bb1dbd5 100644
--- a/static/usage/v7/reorder/wrapper/demo.html
+++ b/static/usage/v7/reorder/wrapper/demo.html
@@ -1,88 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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 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 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 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>
 
-            <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');
 
-  <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);
 
-    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
+        // 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/v7/reorder/wrapper/javascript.md b/static/usage/v7/reorder/wrapper/javascript.md
index 38d112c30fb..e4e024ee2d4 100644
--- a/static/usage/v7/reorder/wrapper/javascript.md
+++ b/static/usage/v7/reorder/wrapper/javascript.md
@@ -4,41 +4,31 @@
   <ion-reorder-group disabled="false">
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
+        <ion-label> Item 1 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 2
-        </ion-label>
+        <ion-label> Item 2 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 3
-        </ion-label>
+        <ion-label> Item 3 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 4
-        </ion-label>
+        <ion-label> Item 4 </ion-label>
       </ion-item>
     </ion-reorder>
 
     <ion-reorder>
       <ion-item>
-        <ion-label>
-          Item 5
-        </ion-label>
+        <ion-label> Item 5 </ion-label>
       </ion-item>
     </ion-reorder>
   </ion-reorder-group>
@@ -47,7 +37,7 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  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);
diff --git a/static/usage/v7/reorder/wrapper/react.md b/static/usage/v7/reorder/wrapper/react.md
index 8abaf724dfa..f70ba499316 100644
--- a/static/usage/v7/reorder/wrapper/react.md
+++ b/static/usage/v7/reorder/wrapper/react.md
@@ -20,41 +20,31 @@ function Example() {
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 1
-            </IonLabel>
+            <IonLabel>Item 1</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 2
-            </IonLabel>
+            <IonLabel>Item 2</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 3
-            </IonLabel>
+            <IonLabel>Item 3</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 4
-            </IonLabel>
+            <IonLabel>Item 4</IonLabel>
           </IonItem>
         </IonReorder>
 
         <IonReorder>
           <IonItem>
-            <IonLabel>
-              Item 5
-            </IonLabel>
+            <IonLabel>Item 5</IonLabel>
           </IonItem>
         </IonReorder>
       </IonReorderGroup>
diff --git a/static/usage/v7/reorder/wrapper/vue.md b/static/usage/v7/reorder/wrapper/vue.md
index d0c732c7d39..fd157186093 100644
--- a/static/usage/v7/reorder/wrapper/vue.md
+++ b/static/usage/v7/reorder/wrapper/vue.md
@@ -5,41 +5,31 @@
     <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 1
-          </ion-label>
+          <ion-label> Item 1 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 2
-          </ion-label>
+          <ion-label> Item 2 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 3
-          </ion-label>
+          <ion-label> Item 3 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 4
-          </ion-label>
+          <ion-label> Item 4 </ion-label>
         </ion-item>
       </ion-reorder>
 
       <ion-reorder>
         <ion-item>
-          <ion-label>
-            Item 5
-          </ion-label>
+          <ion-label> Item 5 </ion-label>
         </ion-item>
       </ion-reorder>
     </ion-reorder-group>
@@ -62,10 +52,10 @@
         // where the gesture ended. This method can also be called directly
         // by the reorder group
         event.detail.complete();
-      }
+      };
 
-      return { handleReorder }
-    }
+      return { handleReorder };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/ripple-effect/basic/demo.html b/static/usage/v7/ripple-effect/basic/demo.html
index 999604925ee..10c7bee0573 100644
--- a/static/usage/v7/ripple-effect/basic/demo.html
+++ b/static/usage/v7/ripple-effect/basic/demo.html
@@ -1,82 +1,80 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/ripple-effect/customizing/demo.html b/static/usage/v7/ripple-effect/customizing/demo.html
index 4884fc86018..0f354320888 100644
--- a/static/usage/v7/ripple-effect/customizing/demo.html
+++ b/static/usage/v7/ripple-effect/customizing/demo.html
@@ -1,81 +1,79 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/ripple-effect/type/demo.html b/static/usage/v7/ripple-effect/type/demo.html
index 60f1ccf811b..1b78cb5b1cf 100644
--- a/static/usage/v7/ripple-effect/type/demo.html
+++ b/static/usage/v7/ripple-effect/type/demo.html
@@ -1,81 +1,79 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
\ No newline at end of file
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/router/basic/demo.html b/static/usage/v7/router/basic/demo.html
index e76ea61b5ab..cc711a9a00b 100644
--- a/static/usage/v7/router/basic/demo.html
+++ b/static/usage/v7/router/basic/demo.html
@@ -1,30 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Router</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-router>
-      <ion-route url="/" component="page-one"></ion-route>
-      <ion-route url="/page-two" component="page-two"></ion-route>
-    </ion-router>
-
-    <ion-router-outlet></ion-router-outlet>
-
-    <script>
-      class PageOne extends HTMLElement {
-        connectedCallback() {
-          this.innerHTML = `
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Router</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-router>
+        <ion-route url="/" component="page-one"></ion-route>
+        <ion-route url="/page-two" component="page-two"></ion-route>
+      </ion-router>
+
+      <ion-router-outlet></ion-router-outlet>
+
+      <script>
+        class PageOne extends HTMLElement {
+          connectedCallback() {
+            this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -36,12 +34,12 @@
             <ion-button>Go to Page 2</ion-button>
           </ion-router-link>
         </ion-content>`;
+          }
         }
-      }
 
-      class PageTwo extends HTMLElement {
-        connectedCallback() {
-          this.innerHTML = `
+        class PageTwo extends HTMLElement {
+          connectedCallback() {
+            this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -53,13 +51,12 @@
         <ion-content class="ion-padding">
           This is the content for page 2.
         </ion-content>`;
+          }
         }
-      }
-
-      customElements.define('page-one', PageOne);
-      customElements.define('page-two', PageTwo);
-    </script>
-  </ion-app>
-</body>
 
+        customElements.define('page-one', PageOne);
+        customElements.define('page-two', PageTwo);
+      </script>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/searchbar/basic/demo.html b/static/usage/v7/searchbar/basic/demo.html
index 4fd310f4db9..f9be71ae4ab 100644
--- a/static/usage/v7/searchbar/basic/demo.html
+++ b/static/usage/v7/searchbar/basic/demo.html
@@ -1,34 +1,32 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/searchbar/cancel-button/angular.md b/static/usage/v7/searchbar/cancel-button/angular.md
index 094e4d63193..1843708f78b 100644
--- a/static/usage/v7/searchbar/cancel-button/angular.md
+++ b/static/usage/v7/searchbar/cancel-button/angular.md
@@ -2,5 +2,10 @@
 <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>
+<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
index 4b11f43db7c..91ab9577d59 100644
--- a/static/usage/v7/searchbar/cancel-button/demo.html
+++ b/static/usage/v7/searchbar/cancel-button/demo.html
@@ -1,34 +1,36 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/searchbar/cancel-button/javascript.md b/static/usage/v7/searchbar/cancel-button/javascript.md
index 094e4d63193..1843708f78b 100644
--- a/static/usage/v7/searchbar/cancel-button/javascript.md
+++ b/static/usage/v7/searchbar/cancel-button/javascript.md
@@ -2,5 +2,10 @@
 <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>
+<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
index 5f312e34aa0..39f4be10fe5 100644
--- a/static/usage/v7/searchbar/cancel-button/react.md
+++ b/static/usage/v7/searchbar/cancel-button/react.md
@@ -9,7 +9,12 @@ function Example() {
       <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>
+      <IonSearchbar
+        showCancelButton="always"
+        cancelButtonText="Custom Cancel"
+        cancelButtonIcon={trash}
+        placeholder="Custom Cancel Button"
+      ></IonSearchbar>
     </>
   );
 }
diff --git a/static/usage/v7/searchbar/cancel-button/vue.md b/static/usage/v7/searchbar/cancel-button/vue.md
index a56a1451692..d3f85859011 100644
--- a/static/usage/v7/searchbar/cancel-button/vue.md
+++ b/static/usage/v7/searchbar/cancel-button/vue.md
@@ -3,7 +3,12 @@
   <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>
+  <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">
@@ -15,7 +20,7 @@
     components: { IonSearchbar },
     setup() {
       return { trash };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/clear-button/demo.html b/static/usage/v7/searchbar/clear-button/demo.html
index 72784ade987..bc7bc4706f5 100644
--- a/static/usage/v7/searchbar/clear-button/demo.html
+++ b/static/usage/v7/searchbar/clear-button/demo.html
@@ -1,33 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/searchbar/clear-button/vue.md b/static/usage/v7/searchbar/clear-button/vue.md
index b778093f372..3b5a9e53c7f 100644
--- a/static/usage/v7/searchbar/clear-button/vue.md
+++ b/static/usage/v7/searchbar/clear-button/vue.md
@@ -15,7 +15,7 @@
     components: { IonSearchbar },
     setup() {
       return { trashBin };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
index 834fb2b8dab..9a88f1c135b 100644
--- a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
@@ -6,12 +6,23 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+  public data = [
+    'Amsterdam',
+    'Buenos Aires',
+    'Cairo',
+    'Geneva',
+    'Hong Kong',
+    'Istanbul',
+    'London',
+    'Madrid',
+    'New York',
+    'Panama City',
+  ];
   public results = [...this.data];
 
   handleInput(event) {
     const query = event.target.value.toLowerCase();
-    this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
+    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
index e00c272091b..1545db90a55 100644
--- a/static/usage/v7/searchbar/debounce/demo.html
+++ b/static/usage/v7/searchbar/debounce/demo.html
@@ -1,64 +1,73 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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>
+  <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');
+  <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);
+    const data = [
+      'Amsterdam',
+      'Buenos Aires',
+      'Cairo',
+      'Geneva',
+      'Hong Kong',
+      'Istanbul',
+      'London',
+      'Madrid',
+      'New York',
+      'Panama City',
+    ];
+    let results = [...data];
+    filterItems(results);
 
-  searchbar.addEventListener('ionInput', handleInput);
+    searchbar.addEventListener('ionInput', handleInput);
 
-  function handleInput(event) {
-    const query = event.target.value.toLowerCase();
-    results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
-    filterItems(results);
-  }
+    function handleInput(event) {
+      const query = event.target.value.toLowerCase();
+      results = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+      filterItems(results);
+    }
 
-  function filterItems(results) {
-    list.replaceChildren();
+    function filterItems(results) {
+      list.replaceChildren();
 
-    let items = '';
+      let items = '';
 
-    for (let i = 0; i < results.length; i++) {
-      items += `
+      for (let i = 0; i < results.length; i++) {
+        items += `
         <ion-item>
           <ion-label>${results[i]}</ion-label>
         </ion-item>
       `;
-    }
-
-    list.innerHTML = items;
-  }
-</script>
+      }
 
+      list.innerHTML = items;
+    }
+  </script>
 </html>
diff --git a/static/usage/v7/searchbar/debounce/javascript.md b/static/usage/v7/searchbar/debounce/javascript.md
index 647029fa341..9d7e54ef92d 100644
--- a/static/usage/v7/searchbar/debounce/javascript.md
+++ b/static/usage/v7/searchbar/debounce/javascript.md
@@ -6,7 +6,18 @@
   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'];
+  const data = [
+    'Amsterdam',
+    'Buenos Aires',
+    'Cairo',
+    'Geneva',
+    'Hong Kong',
+    'Istanbul',
+    'London',
+    'Madrid',
+    'New York',
+    'Panama City',
+  ];
   let results = [...data];
   filterItems(results);
 
@@ -14,7 +25,7 @@
 
   function handleInput(event) {
     const query = event.target.value.toLowerCase();
-    results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
+    results = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);
   }
 
diff --git a/static/usage/v7/searchbar/debounce/react.md b/static/usage/v7/searchbar/debounce/react.md
index 4d31276e0c1..0aece7108d6 100644
--- a/static/usage/v7/searchbar/debounce/react.md
+++ b/static/usage/v7/searchbar/debounce/react.md
@@ -3,24 +3,35 @@ 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'];
+  const data = [
+    'Amsterdam',
+    'Buenos Aires',
+    'Cairo',
+    'Geneva',
+    'Hong Kong',
+    'Istanbul',
+    'London',
+    'Madrid',
+    'New York',
+    'Panama City',
+  ];
   let [results, setResults] = useState([...data]);
 
   const handleInput = (ev: Event) => {
-    let query = "";
+    let query = '';
     const target = ev.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
 
-    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
-  }
+    setResults(data.filter((d) => d.toLowerCase().indexOf(query) > -1));
+  };
 
   return (
     <>
       <IonSearchbar debounce={1000} onIonInput={(ev) => handleInput(ev)}></IonSearchbar>
 
       <IonList>
-        { results.map(result => (
-          <IonItem>{ result }</IonItem>
+        {results.map((result) => (
+          <IonItem>{result}</IonItem>
         ))}
       </IonList>
     </>
diff --git a/static/usage/v7/searchbar/debounce/vue.md b/static/usage/v7/searchbar/debounce/vue.md
index acb820af722..836f226ceb7 100644
--- a/static/usage/v7/searchbar/debounce/vue.md
+++ b/static/usage/v7/searchbar/debounce/vue.md
@@ -16,7 +16,18 @@
   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 data = [
+        'Amsterdam',
+        'Buenos Aires',
+        'Cairo',
+        'Geneva',
+        'Hong Kong',
+        'Istanbul',
+        'London',
+        'Madrid',
+        'New York',
+        'Panama City',
+      ];
       const results = ref(data);
 
       return { data, results };
@@ -24,7 +35,7 @@
     methods: {
       handleInput(event) {
         const query = event.target.value.toLowerCase();
-        this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
+        this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
       },
     },
   });
diff --git a/static/usage/v7/searchbar/search-icon/demo.html b/static/usage/v7/searchbar/search-icon/demo.html
index 8cfd4632e85..89d49c7fc8a 100644
--- a/static/usage/v7/searchbar/search-icon/demo.html
+++ b/static/usage/v7/searchbar/search-icon/demo.html
@@ -1,31 +1,29 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/searchbar/search-icon/vue.md b/static/usage/v7/searchbar/search-icon/vue.md
index 6414acf7b2e..38068deedcc 100644
--- a/static/usage/v7/searchbar/search-icon/vue.md
+++ b/static/usage/v7/searchbar/search-icon/vue.md
@@ -13,7 +13,7 @@
     components: { IonSearchbar },
     setup() {
       return { searchCircle };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/theming/colors/demo.html b/static/usage/v7/searchbar/theming/colors/demo.html
index 4ea47eb381f..10a42a3c247 100644
--- a/static/usage/v7/searchbar/theming/colors/demo.html
+++ b/static/usage/v7/searchbar/theming/colors/demo.html
@@ -1,39 +1,37 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/searchbar/theming/css-properties/demo.html b/static/usage/v7/searchbar/theming/css-properties/demo.html
index 848b2b6f024..047131f13b1 100644
--- a/static/usage/v7/searchbar/theming/css-properties/demo.html
+++ b/static/usage/v7/searchbar/theming/css-properties/demo.html
@@ -1,48 +1,46 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/searchbar/theming/css-properties/javascript.md b/static/usage/v7/searchbar/theming/css-properties/javascript.md
index dca643d2a52..7ea20182e77 100644
--- a/static/usage/v7/searchbar/theming/css-properties/javascript.md
+++ b/static/usage/v7/searchbar/theming/css-properties/javascript.md
@@ -2,23 +2,23 @@
 <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;
+  /* 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;
-}
+    --border-radius: 4px;
+  }
 
-ion-searchbar.ios.custom {
-  --cancel-button-color: #19422d;
-}
+  ion-searchbar.ios.custom {
+    --cancel-button-color: #19422d;
+  }
 
-ion-searchbar.md.custom {
-  --cancel-button-color: #fff;
-}
+  ion-searchbar.md.custom {
+    --cancel-button-color: #fff;
+  }
 </style>
 ```
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
index 4b1b527952e..62d396e75aa 100644
--- a/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md
@@ -5,9 +5,7 @@ import { IonSearchbar } from '@ionic/react';
 import './main.css';
 
 function Example() {
-  return (
-    <IonSearchbar showCancelButton="focus" class="custom"></IonSearchbar>
-  );
+  return <IonSearchbar showCancelButton="focus" class="custom"></IonSearchbar>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/segment-button/basic/demo.html b/static/usage/v7/segment-button/basic/demo.html
index 6877ae4645d..590c295f480 100644
--- a/static/usage/v7/segment-button/basic/demo.html
+++ b/static/usage/v7/segment-button/basic/demo.html
@@ -1,56 +1,54 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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
+          <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/v7/segment-button/layout/demo.html b/static/usage/v7/segment-button/layout/demo.html
index 1fcc16cf0b5..2a6d756cd74 100644
--- a/static/usage/v7/segment-button/layout/demo.html
+++ b/static/usage/v7/segment-button/layout/demo.html
@@ -1,104 +1,102 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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">
-            <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-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-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
+          <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/v7/segment-button/layout/vue.md b/static/usage/v7/segment-button/layout/vue.md
index d3c60a4004d..71a039bd211 100644
--- a/static/usage/v7/segment-button/layout/vue.md
+++ b/static/usage/v7/segment-button/layout/vue.md
@@ -82,7 +82,7 @@
     components: { IonIcon, IonLabel, IonSegment, IonSegmentButton },
     setup() {
       return { call, heart, pin };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/segment-button/theming/css-properties/demo.html b/static/usage/v7/segment-button/theming/css-properties/demo.html
index 15b6663ed6a..e9da296fd9d 100644
--- a/static/usage/v7/segment-button/theming/css-properties/demo.html
+++ b/static/usage/v7/segment-button/theming/css-properties/demo.html
@@ -1,59 +1,57 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-segment-button {
+        --indicator-color: #08a391;
+      }
 
-    ion-segment-button {
-      --indicator-color: #08a391;
-    }
+      /* Material Design styles */
+      ion-segment-button.md {
+        --color: #000;
+        --color-checked: #08a391;
+        --indicator-height: 4px;
+      }
 
-    /* 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>
 
-    /* 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
+  <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/v7/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
index 765f38cec01..995a3b7e54d 100644
--- a/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
@@ -1,71 +1,69 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-segment-button::part(indicator-background) {
+        background: #08a391;
+      }
 
-    ion-segment-button::part(indicator-background) {
-      background: #08a391;
-    }
+      /* Material Design styles */
+      ion-segment-button.md::part(native) {
+        color: #000;
+      }
 
-    /* Material Design styles */
-    ion-segment-button.md::part(native) {
-      color: #000;
-    }
+      .segment-button-checked.md::part(native) {
+        color: #08a391;
+      }
 
-    .segment-button-checked.md::part(native) {
-      color: #08a391;
-    }
+      ion-segment-button.md::part(indicator-background) {
+        height: 4px;
+      }
 
-    ion-segment-button.md::part(indicator-background) {
-      height: 4px;
-    }
+      /* iOS styles */
+      ion-segment-button.ios::part(native) {
+        color: #08a391;
+      }
 
-    /* iOS styles */
-    ion-segment-button.ios::part(native) {
-      color: #08a391;
-    }
+      .segment-button-checked.ios::part(native) {
+        color: #fff;
+      }
 
-    .segment-button-checked.ios::part(native) {
-      color: #fff;
-    }
+      ion-segment-button.ios::part(indicator-background) {
+        border-radius: 20px;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/segment/basic/demo.html b/static/usage/v7/segment/basic/demo.html
index c13af1fd749..31ab1945bee 100644
--- a/static/usage/v7/segment/basic/demo.html
+++ b/static/usage/v7/segment/basic/demo.html
@@ -1,50 +1,48 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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>
 
-<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
+          <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/v7/segment/scrollable/demo.html b/static/usage/v7/segment/scrollable/demo.html
index d9dee70d2cb..4aa5c342d44 100644
--- a/static/usage/v7/segment/scrollable/demo.html
+++ b/static/usage/v7/segment/scrollable/demo.html
@@ -1,66 +1,64 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: grid;
+      }
 
-  <style>
-    .container {
-      display: grid;
-    }
+      ion-segment {
+        width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/segment/scrollable/vue.md b/static/usage/v7/segment/scrollable/vue.md
index c3afaf67ba2..160fab75489 100644
--- a/static/usage/v7/segment/scrollable/vue.md
+++ b/static/usage/v7/segment/scrollable/vue.md
@@ -43,9 +43,18 @@
     components: { IonIcon, IonSegment, IonSegmentButton },
     setup() {
       return {
-        home, heart, pin, star, call, globe, basket, barbell, trash, person
-      }
-    }
+        home,
+        heart,
+        pin,
+        star,
+        call,
+        globe,
+        basket,
+        barbell,
+        trash,
+        person,
+      };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/segment/theming/colors/demo.html b/static/usage/v7/segment/theming/colors/demo.html
index cb662fb009a..6c5b689a592 100644
--- a/static/usage/v7/segment/theming/colors/demo.html
+++ b/static/usage/v7/segment/theming/colors/demo.html
@@ -1,113 +1,111 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      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
+  <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/v7/segment/theming/css-properties/demo.html b/static/usage/v7/segment/theming/css-properties/demo.html
index 6cc5c5a46ab..6e591334efc 100644
--- a/static/usage/v7/segment/theming/css-properties/demo.html
+++ b/static/usage/v7/segment/theming/css-properties/demo.html
@@ -1,42 +1,40 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        max-width: 400px;
+        margin: 0 auto;
+      }
 
-  <style>
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-    }
+      ion-segment {
+        --background: #54dc98;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/select/basic/multiple-selection/demo.html b/static/usage/v7/select/basic/multiple-selection/demo.html
index 1cc58839a36..63c7016f22f 100644
--- a/static/usage/v7/select/basic/multiple-selection/demo.html
+++ b/static/usage/v7/select/basic/multiple-selection/demo.html
@@ -1,32 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select aria-label="Fruit" 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>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="Fruit" 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>
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
index 035a3e3b6b6..6097ef898aa 100644
--- 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
@@ -17,4 +17,4 @@
 <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/demo.html b/static/usage/v7/select/basic/responding-to-interaction/demo.html
index e8499787112..c5b7b540799 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/demo.html
+++ b/static/usage/v7/select/basic/responding-to-interaction/demo.html
@@ -1,62 +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 - 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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Fruit" 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>
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Fruit" 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>
-      </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>
-
+      </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>
diff --git a/static/usage/v7/select/basic/responding-to-interaction/javascript.md b/static/usage/v7/select/basic/responding-to-interaction/javascript.md
index ad72a16c545..2a737be09bb 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/javascript.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/javascript.md
@@ -14,7 +14,7 @@
   const select = document.querySelector('ion-select');
   const log = document.querySelector('#log');
 
-  select.addEventListener('ionChange', e => {
+  select.addEventListener('ionChange', (e) => {
     log.insertAdjacentHTML('afterbegin', `<p>ionChange fired with value: ${e.detail.value}</p>`);
   });
 
diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md
index 1b5cdb45148..f3db28c64c4 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/vue.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md
@@ -28,14 +28,14 @@
     components: { IonItem, IonList, IonSelect, IonSelectOption },
     data() {
       return {
-        logs: []
-      }
+        logs: [],
+      };
     },
     methods: {
       pushLog(msg) {
         this.logs.unshift(msg);
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/select/basic/single-selection/demo.html b/static/usage/v7/select/basic/single-selection/demo.html
index e6de08c9e15..f2db0df6c17 100644
--- a/static/usage/v7/select/basic/single-selection/demo.html
+++ b/static/usage/v7/select/basic/single-selection/demo.html
@@ -1,32 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select aria-label="fruit" 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>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="fruit" 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>
diff --git a/static/usage/v7/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular.md
index f00ddf7ce99..3d1ab2ab3a1 100644
--- a/static/usage/v7/select/customization/button-text/angular.md
+++ b/static/usage/v7/select/customization/button-text/angular.md
@@ -8,7 +8,12 @@
     </ion-select>
   </ion-item>
   <ion-item>
-    <ion-select label="Action Sheet Interface" interface="action-sheet" placeholder="Select fruit" cancelText="Cancel Choice">
+    <ion-select
+      label="Action Sheet Interface"
+      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>
diff --git a/static/usage/v7/select/customization/button-text/demo.html b/static/usage/v7/select/customization/button-text/demo.html
index 98096c7cbe5..ff90458d0a3 100644
--- a/static/usage/v7/select/customization/button-text/demo.html
+++ b/static/usage/v7/select/customization/button-text/demo.html
@@ -1,39 +1,47 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select label="Alert Interface" 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-select label="Action Sheet Interface" 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>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select
+                label="Alert Interface"
+                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-select
+                label="Action Sheet Interface"
+                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>
diff --git a/static/usage/v7/select/customization/button-text/javascript.md b/static/usage/v7/select/customization/button-text/javascript.md
index 9f548984202..721ddea5107 100644
--- a/static/usage/v7/select/customization/button-text/javascript.md
+++ b/static/usage/v7/select/customization/button-text/javascript.md
@@ -8,7 +8,12 @@
     </ion-select>
   </ion-item>
   <ion-item>
-    <ion-select label="Action Sheet Interface" interface="action-sheet" placeholder="Select fruit" cancel-text="Cancel Choice">
+    <ion-select
+      label="Action Sheet Interface"
+      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>
diff --git a/static/usage/v7/select/customization/button-text/react.md b/static/usage/v7/select/customization/button-text/react.md
index 9175310c47d..94bf337191c 100644
--- a/static/usage/v7/select/customization/button-text/react.md
+++ b/static/usage/v7/select/customization/button-text/react.md
@@ -12,7 +12,12 @@ function Example() {
         </IonSelect>
       </IonItem>
       <IonItem>
-        <IonSelect label="Action Sheet Interface" interface="action-sheet" placeholder="Select fruit" cancelText="Cancel Choice">
+        <IonSelect
+          label="Action Sheet Interface"
+          interface="action-sheet"
+          placeholder="Select fruit"
+          cancelText="Cancel Choice"
+        >
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/customization/button-text/vue.md b/static/usage/v7/select/customization/button-text/vue.md
index 99b1a1558e6..f5c69c2d69b 100644
--- a/static/usage/v7/select/customization/button-text/vue.md
+++ b/static/usage/v7/select/customization/button-text/vue.md
@@ -9,7 +9,12 @@
       </ion-select>
     </ion-item>
     <ion-item>
-      <ion-select label="Action Sheet Interface" interface="action-sheet" placeholder="Select fruit" cancel-text="Cancel Choice">
+      <ion-select
+        label="Action Sheet Interface"
+        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>
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
index a05c69a39c0..f459af75729 100644
--- 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
@@ -1,5 +1,5 @@
 ```html
-<ion-list>        
+<ion-list>
   <ion-item>
     <ion-select label="Alert" [interfaceOptions]="customAlertOptions" interface="alert" placeholder="Select One">
       <ion-select-option value="bacon">Bacon</ion-select-option>
@@ -7,7 +7,7 @@
       <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
     </ion-select>
   </ion-item>
-        
+
   <ion-item>
     <ion-select label="Popover" [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
       <ion-select-option value="brown">Brown</ion-select-option>
@@ -15,9 +15,14 @@
       <ion-select-option value="red">Red</ion-select-option>
     </ion-select>
   </ion-item>
-        
+
   <ion-item>
-    <ion-select label="Action Sheet" [interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+    <ion-select
+      label="Action Sheet"
+      [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>
diff --git a/static/usage/v7/select/customization/interface-options/demo.html b/static/usage/v7/select/customization/interface-options/demo.html
index 18aa06c18bf..8283956c7ed 100644
--- a/static/usage/v7/select/customization/interface-options/demo.html
+++ b/static/usage/v7/select/customization/interface-options/demo.html
@@ -1,80 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container > ion-list {
+        min-width: 400px;
+      }
+    </style>
+  </head>
 
-  <style>
-    .container>ion-list {
-      min-width: 400px;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select label="Alert" 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>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select label="Alert" 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-select label="Popover" 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-select label="Popover" 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-select
+                label="Action Sheet"
+                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>
 
-          <ion-item>
-            <ion-select label="Action Sheet" 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;
 
-  <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>
+      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>
diff --git a/static/usage/v7/select/customization/interface-options/javascript.md b/static/usage/v7/select/customization/interface-options/javascript.md
index e2d1974997e..a64438e3452 100644
--- a/static/usage/v7/select/customization/interface-options/javascript.md
+++ b/static/usage/v7/select/customization/interface-options/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-list>        
+<ion-list>
   <ion-item>
     <ion-select label="Alert" id="customAlertSelect" interface="alert" placeholder="Select One">
       <ion-select-option value="bacon">Bacon</ion-select-option>
@@ -7,7 +7,7 @@
       <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
     </ion-select>
   </ion-item>
-        
+
   <ion-item>
     <ion-select label="Popover" id="customPopoverSelect" interface="popover" placeholder="Select One">
       <ion-select-option value="brown">Brown</ion-select-option>
@@ -15,7 +15,7 @@
       <ion-select-option value="red">Red</ion-select-option>
     </ion-select>
   </ion-item>
-        
+
   <ion-item>
     <ion-select label="Action Sheet" id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
       <ion-select-option value="red">Red</ion-select-option>
@@ -31,7 +31,7 @@
     header: 'Pizza Toppings',
     subHeader: 'Select your favorite topping',
     message: 'Choose only one',
-    translucent: true
+    translucent: true,
   };
   customAlertSelect.interfaceOptions = customAlertOptions;
 
@@ -39,14 +39,14 @@
   const customPopoverOptions = {
     header: 'Hair Color',
     subHeader: 'Select your hair color',
-    message: 'Only select your dominant 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'
+    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
index 6b9d1f42cfb..cd9e53e97a5 100644
--- a/static/usage/v7/select/customization/interface-options/react.md
+++ b/static/usage/v7/select/customization/interface-options/react.md
@@ -6,22 +6,22 @@ function Example() {
     header: 'Pizza Toppings',
     subHeader: 'Select your favorite topping',
     message: 'Choose only one',
-    translucent: true
+    translucent: true,
   };
 
   const customPopoverOptions = {
     header: 'Hair Color',
     subHeader: 'Select your hair color',
-    message: 'Only select your dominant hair color'
+    message: 'Only select your dominant hair color',
   };
 
   const customActionSheetOptions = {
     header: 'Colors',
-    subHeader: 'Select your favorite color'
+    subHeader: 'Select your favorite color',
   };
 
   return (
-    <IonList>        
+    <IonList>
       <IonItem>
         <IonSelect label="Alert" interfaceOptions={customAlertOptions} interface="alert" placeholder="Select One">
           <IonSelectOption value="bacon">Bacon</IonSelectOption>
@@ -29,7 +29,7 @@ function Example() {
           <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
         </IonSelect>
       </IonItem>
-          
+
       <IonItem>
         <IonSelect label="Popover" interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
           <IonSelectOption value="brown">Brown</IonSelectOption>
@@ -37,9 +37,14 @@ function Example() {
           <IonSelectOption value="red">Red</IonSelectOption>
         </IonSelect>
       </IonItem>
-          
+
       <IonItem>
-        <IonSelect label="Action Sheet" interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One">
+        <IonSelect
+          label="Action Sheet"
+          interfaceOptions={customActionSheetOptions}
+          interface="action-sheet"
+          placeholder="Select One"
+        >
           <IonSelectOption value="red">Red</IonSelectOption>
           <IonSelectOption value="green">Green</IonSelectOption>
           <IonSelectOption value="blue">Blue</IonSelectOption>
diff --git a/static/usage/v7/select/customization/interface-options/vue.md b/static/usage/v7/select/customization/interface-options/vue.md
index 58513c464f0..55dcaac0743 100644
--- a/static/usage/v7/select/customization/interface-options/vue.md
+++ b/static/usage/v7/select/customization/interface-options/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-list>        
+  <ion-list>
     <ion-item>
       <ion-select label="Alert" :interface-options="customAlertOptions" interface="alert" placeholder="Select One">
         <ion-select-option value="bacon">Bacon</ion-select-option>
@@ -8,17 +8,27 @@
         <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
       </ion-select>
     </ion-item>
-        
+
     <ion-item>
-      <ion-select label="Popover" :interface-options="customPopoverOptions" interface="popover" placeholder="Select One">
+      <ion-select
+        label="Popover"
+        :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-select label="Action Sheet" :interface-options="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+      <ion-select
+        label="Action Sheet"
+        :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>
@@ -38,26 +48,26 @@
         header: 'Pizza Toppings',
         subHeader: 'Select your favorite topping',
         message: 'Choose only one',
-        translucent: true
+        translucent: true,
       };
 
       const customPopoverOptions = {
         header: 'Hair Color',
         subHeader: 'Select your hair color',
-        message: 'Only select your dominant hair color'
+        message: 'Only select your dominant hair color',
       };
 
       const customActionSheetOptions = {
         header: 'Colors',
-        subHeader: 'Select your favorite color'
+        subHeader: 'Select your favorite color',
       };
 
       return {
         customAlertOptions,
         customPopoverOptions,
-        customActionSheetOptions
-      }
-    }
+        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
index 27fc8e85e4b..4ca173bed8f 100644
--- 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
@@ -24,4 +24,4 @@ ion-select::part(icon) {
   color: #971e49;
   opacity: 1;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/select/customization/styling-select/demo.html b/static/usage/v7/select/customization/styling-select/demo.html
index fa813bfde1e..c683ff692f1 100644
--- a/static/usage/v7/select/customization/styling-select/demo.html
+++ b/static/usage/v7/select/customization/styling-select/demo.html
@@ -1,60 +1,58 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Fruit" 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>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/customization/styling-select/javascript.md b/static/usage/v7/select/customization/styling-select/javascript.md
index 505b93f7282..169ad61aa88 100644
--- a/static/usage/v7/select/customization/styling-select/javascript.md
+++ b/static/usage/v7/select/customization/styling-select/javascript.md
@@ -6,30 +6,30 @@
 </ion-select>
 
 <style>
-ion-select {
-  --placeholder-color: #971e49;
-  --placeholder-opacity: 1;
-  width: 100%;
-  justify-content: center;
-}
+  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),
+  ion-select::part(text) {
+    flex: 0 0 auto;
+  }
 
-ion-select::part(placeholder)::first-letter {
-  font-size: 24px;
-  font-weight: 500;
-}
+  ion-select::part(placeholder)::first-letter {
+    font-size: 24px;
+    font-weight: 500;
+  }
 
-ion-select::part(text) {
-  color: #545ca7;
-}
+  ion-select::part(text) {
+    color: #545ca7;
+  }
 
-ion-select::part(icon) {
-  color: #971e49;
-  opacity: 1;
-}
+  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
index 27fc8e85e4b..4ca173bed8f 100644
--- a/static/usage/v7/select/customization/styling-select/react/main_css.md
+++ b/static/usage/v7/select/customization/styling-select/react/main_css.md
@@ -24,4 +24,4 @@ ion-select::part(icon) {
   color: #971e49;
   opacity: 1;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/select/fill/demo.html b/static/usage/v7/select/fill/demo.html
index 2543e2fccf5..9b59ad5319c 100644
--- a/static/usage/v7/select/fill/demo.html
+++ b/static/usage/v7/select/fill/demo.html
@@ -1,44 +1,42 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        width: 300px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      width: 300px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-select label="Solid select" label-placement="floating" fill="solid">
-          <ion-select-option value="apple">Apple</ion-select-option>
-          <ion-select-option value="banana">Banana</ion-select-option>
-          <ion-select-option value="orange">Orange</ion-select-option>
-        </ion-select>
-
-        <ion-select label="Outline select" label-placement="floating" fill="outline">
-          <ion-select-option value="apple">Apple</ion-select-option>
-          <ion-select-option value="banana">Banana</ion-select-option>
-          <ion-select-option value="orange">Orange</ion-select-option>
-        </ion-select>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-select label="Solid select" label-placement="floating" fill="solid">
+            <ion-select-option value="apple">Apple</ion-select-option>
+            <ion-select-option value="banana">Banana</ion-select-option>
+            <ion-select-option value="orange">Orange</ion-select-option>
+          </ion-select>
 
+          <ion-select label="Outline select" label-placement="floating" fill="outline">
+            <ion-select-option value="apple">Apple</ion-select-option>
+            <ion-select-option value="banana">Banana</ion-select-option>
+            <ion-select-option value="orange">Orange</ion-select-option>
+          </ion-select>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/select/fill/react.md b/static/usage/v7/select/fill/react.md
index ffec8acdc07..e6813654ee2 100644
--- a/static/usage/v7/select/fill/react.md
+++ b/static/usage/v7/select/fill/react.md
@@ -10,9 +10,9 @@ function Example() {
         <IonSelectOption value="banana">Banana</IonSelectOption>
         <IonSelectOption value="orange">Orange</IonSelectOption>
       </IonSelect>
-      
+
       <br />
-      
+
       <IonSelect label="Outline select" labelPlacement="floating" fill="outline">
         <IonSelectOption value="apple">Apple</IonSelectOption>
         <IonSelectOption value="banana">Banana</IonSelectOption>
diff --git a/static/usage/v7/select/fill/vue.md b/static/usage/v7/select/fill/vue.md
index ea96b7ca17b..e08d5859308 100644
--- a/static/usage/v7/select/fill/vue.md
+++ b/static/usage/v7/select/fill/vue.md
@@ -5,9 +5,9 @@
     <ion-select-option value="banana">Banana</ion-select-option>
     <ion-select-option value="orange">Orange</ion-select-option>
   </ion-select>
-  
+
   <br />
-  
+
   <ion-select label="Outline select" label-placement="floating" fill="outline">
     <ion-select-option value="apple">Apple</ion-select-option>
     <ion-select-option value="banana">Banana</ion-select-option>
diff --git a/static/usage/v7/select/interfaces/action-sheet/demo.html b/static/usage/v7/select/interfaces/action-sheet/demo.html
index 0e53b22ca92..1cda57966fe 100644
--- a/static/usage/v7/select/interfaces/action-sheet/demo.html
+++ b/static/usage/v7/select/interfaces/action-sheet/demo.html
@@ -1,32 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select aria-label="Fruit" 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>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/interfaces/popover/demo.html b/static/usage/v7/select/interfaces/popover/demo.html
index 968bd204074..44bfcfbc826 100644
--- a/static/usage/v7/select/interfaces/popover/demo.html
+++ b/static/usage/v7/select/interfaces/popover/demo.html
@@ -1,32 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select aria-label="Fruit" 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>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="Fruit" 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>
diff --git a/static/usage/v7/select/justify/demo.html b/static/usage/v7/select/justify/demo.html
index 41c241f4961..02d70de3073 100644
--- a/static/usage/v7/select/justify/demo.html
+++ b/static/usage/v7/select/justify/demo.html
@@ -1,21 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>select</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>select</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
   <body>
     <ion-app>
       <ion-content>
diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.md
index 6e263e9be07..17356a84665 100644
--- a/static/usage/v7/select/justify/index.md
+++ b/static/usage/v7/select/justify/index.md
@@ -5,4 +5,9 @@ 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/select/justify/demo.html" size="300px" />
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/justify/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/select/label-placement/demo.html b/static/usage/v7/select/label-placement/demo.html
index 68b8e6b179d..c43ff9bfd3f 100644
--- a/static/usage/v7/select/label-placement/demo.html
+++ b/static/usage/v7/select/label-placement/demo.html
@@ -1,62 +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</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>select</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select label="Default label" placeholder="Favorite Fruit">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-select label="Default label" placeholder="Favorite Fruit">
-              <ion-select-option value="apple">Apple</ion-select-option>
-              <ion-select-option value="banana">Banana</ion-select-option>
-              <ion-select-option value="orange">Orange</ion-select-option>
-            </ion-select>
-          </ion-item>
+            <ion-item>
+              <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
 
-          <ion-item>
-            <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
-              <ion-select-option value="apple">Apple</ion-select-option>
-              <ion-select-option value="banana">Banana</ion-select-option>
-              <ion-select-option value="orange">Orange</ion-select-option>
-            </ion-select>
-          </ion-item>
-
-          <ion-item>
-            <ion-select label="Stacked label" label-placement="stacked">
-              <ion-select-option value="apple">Apple</ion-select-option>
-              <ion-select-option value="banana">Banana</ion-select-option>
-              <ion-select-option value="orange">Orange</ion-select-option>
-            </ion-select>
-          </ion-item>
-
-          <ion-item>
-            <ion-select label="Floating label" label-placement="floating">
-              <ion-select-option value="apple">Apple</ion-select-option>
-              <ion-select-option value="banana">Banana</ion-select-option>
-              <ion-select-option value="orange">Orange</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+            <ion-item>
+              <ion-select label="Stacked label" label-placement="stacked">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
 
+            <ion-item>
+              <ion-select label="Floating label" label-placement="floating">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/select/label-placement/index.md b/static/usage/v7/select/label-placement/index.md
index 9a32e0b3b61..b0464726fb4 100644
--- a/static/usage/v7/select/label-placement/index.md
+++ b/static/usage/v7/select/label-placement/index.md
@@ -5,4 +5,9 @@ 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/select/label-placement/demo.html" size="300px" />
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/label-placement/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/select/label-placement/react.md b/static/usage/v7/select/label-placement/react.md
index 28e70627659..3850747793d 100644
--- a/static/usage/v7/select/label-placement/react.md
+++ b/static/usage/v7/select/label-placement/react.md
@@ -12,7 +12,7 @@ function Example() {
           <IonSelectOption value="orange">Orange</IonSelectOption>
         </IonSelect>
       </IonItem>
-    
+
       <IonItem>
         <IonSelect label="Fixed label" labelPlacement="fixed" placeholder="Favorite fruit">
           <IonSelectOption value="apple">Apple</IonSelectOption>
@@ -20,7 +20,7 @@ function Example() {
           <IonSelectOption value="orange">Orange</IonSelectOption>
         </IonSelect>
       </IonItem>
-    
+
       <IonItem>
         <IonSelect label="Stacked label" labelPlacement="stacked">
           <IonSelectOption value="apple">Apple</IonSelectOption>
@@ -28,7 +28,7 @@ function Example() {
           <IonSelectOption value="orange">Orange</IonSelectOption>
         </IonSelect>
       </IonItem>
-    
+
       <IonItem>
         <IonSelect label="Floating label" labelPlacement="floating">
           <IonSelectOption value="apple">Apple</IonSelectOption>
diff --git a/static/usage/v7/select/label-placement/vue.md b/static/usage/v7/select/label-placement/vue.md
index 412441ca164..9efccb8e49d 100644
--- a/static/usage/v7/select/label-placement/vue.md
+++ b/static/usage/v7/select/label-placement/vue.md
@@ -8,7 +8,7 @@
         <ion-select-option value="orange">Orange</ion-select-option>
       </ion-select>
     </ion-item>
-  
+
     <ion-item>
       <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
         <ion-select-option value="apple">Apple</ion-select-option>
@@ -16,7 +16,7 @@
         <ion-select-option value="orange">Orange</ion-select-option>
       </ion-select>
     </ion-item>
-  
+
     <ion-item>
       <ion-select label="Stacked label" label-placement="stacked">
         <ion-select-option value="apple">Apple</ion-select-option>
@@ -24,7 +24,7 @@
         <ion-select-option value="orange">Orange</ion-select-option>
       </ion-select>
     </ion-item>
-  
+
     <ion-item>
       <ion-select label="Floating label" label-placement="floating">
         <ion-select-option value="apple">Apple</ion-select-option>
diff --git a/static/usage/v7/select/migration/index.md b/static/usage/v7/select/migration/index.md
index 4df052802db..daf1a3a2612 100644
--- a/static/usage/v7/select/migration/index.md
+++ b/static/usage/v7/select/migration/index.md
@@ -137,4 +137,4 @@ import TabItem from '@theme/TabItem';
 ```
 </TabItem>
 </Tabs>
-````
\ No newline at end of file
+````
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
index 81ac94abb5c..6f1354b96a8 100644
--- 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
@@ -15,4 +15,4 @@
     <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/demo.html b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
index 390a32eaec1..d9b3f071f7c 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
@@ -1,91 +1,89 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Food" 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"
+    <style>
+      .container > ion-list {
+        width: 70%;
       }
-    ];
 
-    const compareWithFn = (o1, o2) => {
-      if (!o1 || !o2) {
-        return o1 === o2;
+      ion-text {
+        white-space: normal;
       }
+    </style>
+  </head>
 
-      if (Array.isArray(o2)) {
-        return o2.some((o) => o.id === o1.id);
-      }
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="Food" 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;
+        }
 
-      return o1.id === o2.id;
-    };
+        if (Array.isArray(o2)) {
+          return o2.some((o) => o.id === o1.id);
+        }
 
-    const selectEl = document.querySelector('ion-select');
-    selectEl.compareWith = compareWithFn;
+        return o1.id === o2.id;
+      };
 
-    foods.forEach((option, i) => {
-      const selectOption = document.createElement('ion-select-option');
-      selectOption.value = option;
-      selectOption.textContent = option.name;
-      selectEl.appendChild(selectOption);
-    });
+      const selectEl = document.querySelector('ion-select');
+      selectEl.compareWith = compareWithFn;
 
-    const valueLabel = document.querySelector('ion-text');
-    selectEl.addEventListener('ionChange', () => {
-      valueLabel.innerHTML = JSON.stringify(selectEl.value);
-    });
-  </script>
-</body>
+      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/v7/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
index 8fed71dd03c..8b18603b344 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
@@ -15,27 +15,27 @@
   const foods = [
     {
       id: 1,
-      name: "Apples",
-      type: "fruit"
+      name: 'Apples',
+      type: 'fruit',
     },
     {
       id: 2,
-      name: "Carrots",
-      type: "vegetable"
+      name: 'Carrots',
+      type: 'vegetable',
     },
     {
       id: 3,
-      name: "Cupcakes",
-      type: "dessert"
-    }
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
   ];
 
   const compareWithFn = (o1, o2) => {
-    if(!o1 || !o2) {
+    if (!o1 || !o2) {
       return o1 === o2;
     }
 
-    if(Array.isArray(o2)) {
+    if (Array.isArray(o2)) {
       return o2.some((o) => o.id === o1.id);
     }
 
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
index d556b9c5178..0c07d17d52e 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
@@ -26,39 +26,39 @@
     components: { IonItem, IonList, IonLabel, IonSelect, IonSelectOption },
     data() {
       return {
-        currentFood: "",
+        currentFood: '',
         foods: [
           {
             id: 1,
-            name: "Apples",
-            type: "fruit"
+            name: 'Apples',
+            type: 'fruit',
           },
           {
             id: 2,
-            name: "Carrots",
-            type: "vegetable"
+            name: 'Carrots',
+            type: 'vegetable',
           },
           {
             id: 3,
-            name: "Cupcakes",
-            type: "dessert"
-          }
-        ]
-      }
+            name: 'Cupcakes',
+            type: 'dessert',
+          },
+        ],
+      };
     },
     methods: {
       compareWith(o1, o2) {
-        if(!o1 || !o2) {
+        if (!o1 || !o2) {
           return o1 === o2;
         }
 
-        if(Array.isArray(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
index 5b4e4ecb0bd..d47f6f0aaa5 100644
--- 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
@@ -14,4 +14,4 @@
     <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/demo.html b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
index b68d3ab7ff9..0c59bae8ce0 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
@@ -1,79 +1,77 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 aria-label="Food" 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"
+    <style>
+      .container > ion-list {
+        width: 70%;
       }
-    ];
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="Food" 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>
 
-    const compareWithFn = (o1, o2) => {
-      return o1 && o2 ? o1.id === o2.id : o1 === o2;
-    };
+    <script>
+      const foods = [
+        {
+          id: 1,
+          name: 'Apples',
+          type: 'fruit',
+        },
+        {
+          id: 2,
+          name: 'Carrots',
+          type: 'vegetable',
+        },
+        {
+          id: 3,
+          name: 'Cupcakes',
+          type: 'dessert',
+        },
+      ];
 
-    const selectEl = document.querySelector('ion-select');
-    selectEl.compareWith = compareWithFn;
+      const compareWithFn = (o1, o2) => {
+        return o1 && o2 ? o1.id === o2.id : o1 === o2;
+      };
 
-    foods.forEach((option, i) => {
-      const selectOption = document.createElement('ion-select-option');
-      selectOption.value = option;
-      selectOption.textContent = option.name;
-      selectEl.appendChild(selectOption);
-    });
+      const selectEl = document.querySelector('ion-select');
+      selectEl.compareWith = compareWithFn;
 
-    const valueLabel = document.querySelector('ion-text');
-    selectEl.addEventListener('ionChange', () => {
-      valueLabel.innerHTML = JSON.stringify(selectEl.value);
-    });
-  </script>
-</body>
+      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/v7/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
index f9b385d5474..cfcb848b768 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
@@ -15,19 +15,19 @@
   const foods = [
     {
       id: 1,
-      name: "Apples",
-      type: "fruit"
+      name: 'Apples',
+      type: 'fruit',
     },
     {
       id: 2,
-      name: "Carrots",
-      type: "vegetable"
+      name: 'Carrots',
+      type: 'vegetable',
     },
     {
       id: 3,
-      name: "Cupcakes",
-      type: "dessert"
-    }
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
   ];
 
   const compareWithFn = (o1, o2) => {
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
index 99ed6f5c3d7..2603ff71164 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
@@ -25,31 +25,31 @@
     components: { IonLabel, IonSelect, IonSelectOption },
     data() {
       return {
-        currentFood: "",
+        currentFood: '',
         foods: [
           {
             id: 1,
-            name: "Apples",
-            type: "fruit"
+            name: 'Apples',
+            type: 'fruit',
           },
           {
             id: 2,
-            name: "Carrots",
-            type: "vegetable"
+            name: 'Carrots',
+            type: 'vegetable',
           },
           {
             id: 3,
-            name: "Cupcakes",
-            type: "dessert"
-          }
-        ]
-      }
+            name: 'Cupcakes',
+            type: 'dessert',
+          },
+        ],
+      };
     },
     methods: {
       compareWith(o1, o2) {
         return o1 && o2 ? o1.id === o2.id : o1 === o2;
-      }
-    }
+      },
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/select/typeahead/angular/angular_types_ts.md b/static/usage/v7/select/typeahead/angular/angular_types_ts.md
index bdf47c9d0ae..42d4583e026 100644
--- a/static/usage/v7/select/typeahead/angular/angular_types_ts.md
+++ b/static/usage/v7/select/typeahead/angular/angular_types_ts.md
@@ -2,5 +2,5 @@
 export interface Item {
   text: string;
   value: string;
-};
+}
 ```
diff --git a/static/usage/v7/select/typeahead/angular/example_component_html.md b/static/usage/v7/select/typeahead/angular/example_component_html.md
index 3c702c08d67..5d4c94d6c44 100644
--- a/static/usage/v7/select/typeahead/angular/example_component_html.md
+++ b/static/usage/v7/select/typeahead/angular/example_component_html.md
@@ -20,4 +20,4 @@
     ></app-typeahead>
   </ng-template>
 </ion-modal>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md
index ee7f5e29305..ded6fa60b0f 100644
--- a/static/usage/v7/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md
@@ -1,7 +1,7 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
 import { IonModal } from '@ionic/angular';
-import { Item } from './types'; 
+import { Item } from './types';
 
 @Component({
   selector: 'app-example',
@@ -9,10 +9,10 @@ import { Item } from './types';
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
-  
+
   selectedFruitsText = '0 Items';
   selectedFruits: string[] = [];
-  
+
   fruits: Item[] = [
     { text: 'Apple', value: 'apple' },
     { text: 'Apricot', value: 'apricot' },
@@ -38,18 +38,18 @@ export class ExampleComponent {
     { text: 'Pineapple', value: 'pineapple' },
     { text: 'Pomegranate', value: 'pomegranate' },
     { text: 'Raspberry', value: 'raspberry' },
-    { text: 'Strawberry', value: 'strawberry' }
+    { text: 'Strawberry', value: 'strawberry' },
   ];
-  
+
   private formatData(data: string[]) {
     if (data.length === 1) {
-      const fruit = this.fruits.find(fruit => fruit.value === data[0])
+      const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
       return fruit.text;
     }
-  
+
     return `${data.length} items`;
   }
-  
+
   fruitSelectionChanged(fruits: string[]) {
     this.selectedFruits = fruits;
     this.selectedFruitsText = this.formatData(this.selectedFruits);
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
index 43c768f7d18..64da05a7a9d 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
@@ -17,11 +17,9 @@
 <ion-content color="light" class="ion-padding">
   <ion-list id="modal-list" [inset]="true">
     <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
-      <ion-checkbox
-        [value]="item.value" 
-        [checked]="isChecked(item.value)"
-        (ionChange)="checkboxChange($event)"
-      >{{ item.text }}</ion-checkbox>
+      <ion-checkbox [value]="item.value" [checked]="isChecked(item.value)" (ionChange)="checkboxChange($event)"
+        >{{ item.text }}</ion-checkbox
+      >
     </ion-item>
   </ion-list>
 </ion-content>
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
index 5631319f98c..9bd21f1b404 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
@@ -14,31 +14,31 @@ export class TypeaheadComponent implements OnInit {
 
   @Output() selectionCancel = new EventEmitter<void>();
   @Output() selectionChange = new EventEmitter<string[]>();
-  
+
   filteredItems: Item[] = [];
   workingSelectedValues: string[] = [];
-  
+
   ngOnInit() {
     this.filteredItems = [...this.items];
     this.workingSelectedValues = [...this.selectedItems];
   }
-  
+
   trackItems(index: number, item: Item) {
     return item.value;
   }
-  
+
   cancelChanges() {
     this.selectionCancel.emit();
   }
-  
+
   confirmChanges() {
     this.selectionChange.emit(this.workingSelectedValues);
   }
-  
+
   searchbarInput(ev) {
     this.filterList(ev.target.value);
   }
-  
+
   /**
    * Update the rendered view with
    * the provided search query. If no
@@ -58,27 +58,24 @@ export class TypeaheadComponent implements OnInit {
        * query and check to see which items
        * contain the search query as a substring.
        */
-      const normalizedQuery = searchQuery.toLowerCase(); 
-      this.filteredItems = this.items.filter(item => {
+      const normalizedQuery = searchQuery.toLowerCase();
+      this.filteredItems = this.items.filter((item) => {
         return item.text.toLowerCase().includes(normalizedQuery);
       });
     }
   }
 
   isChecked(value: string) {
-    return this.workingSelectedValues.find(item => item === value);
+    return this.workingSelectedValues.find((item) => item === value);
   }
-  
+
   checkboxChange(ev) {
     const { checked, value } = ev.detail;
-    
+
     if (checked) {
-      this.workingSelectedValues = [
-        ...this.workingSelectedValues,
-        value
-      ]
+      this.workingSelectedValues = [...this.workingSelectedValues, value];
     } else {
-      this.workingSelectedValues = this.workingSelectedValues.filter(item => item !== value);
+      this.workingSelectedValues = this.workingSelectedValues.filter((item) => item !== value);
     }
   }
 }
diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html
index 2551d58694f..6585f3c0635 100644
--- a/static/usage/v7/select/typeahead/demo.html
+++ b/static/usage/v7/select/typeahead/demo.html
@@ -39,8 +39,7 @@
           </ion-toolbar>
         </ion-header>
         <ion-content color="light" class="ion-padding">
-          <ion-list id="modal-list" inset="true">
-          </ion-list>
+          <ion-list id="modal-list" inset="true"> </ion-list>
         </ion-content>
       </ion-modal>
     </ion-app>
@@ -75,7 +74,7 @@
         { text: 'Pineapple', value: 'pineapple' },
         { text: 'Pomegranate', value: 'pomegranate' },
         { text: 'Raspberry', value: 'raspberry' },
-        { text: 'Strawberry', value: 'strawberry' }
+        { text: 'Strawberry', value: 'strawberry' },
       ];
 
       /**
@@ -108,8 +107,8 @@
 
         const normalizedQuery = searchQuery.toLowerCase();
 
-        return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
-      }
+        return fruits.filter((fruit) => fruit.text.toLowerCase().includes(normalizedQuery));
+      };
 
       /**
        * Render a filtered list of fruits
@@ -126,11 +125,11 @@
             <ion-item>
               <ion-checkbox value="${item.value}" checked="${checked}">${item.text}</ion-checkbox>
             </ion-item>
-          `
+          `;
         });
 
         list.innerHTML = template;
-      }
+      };
 
       /**
        * Formats the selected fruits in
@@ -142,12 +141,12 @@
        */
       const formatData = (data) => {
         if (data.length === 1) {
-          const fruit = fruits.find(fruit => fruit.value === data[0])
+          const fruit = fruits.find((fruit) => fruit.value === data[0]);
           return fruit.text;
         }
 
         return `${data.length} items`;
-      }
+      };
 
       /**
        * Reset any working changes
@@ -156,7 +155,7 @@
       const cancelChanges = () => {
         workingSelectedFruits = [...selectedFruits];
         modal.dismiss(undefined, 'cancel');
-      }
+      };
 
       /**
        * Return the selected
@@ -164,22 +163,21 @@
        */
       const confirmChanges = () => {
         selectedFruits = [...workingSelectedFruits];
-        modal.dismiss(selectedFruits)
+        modal.dismiss(selectedFruits);
       };
 
       // Listen for all ionChange events from the checkbox
       modal.addEventListener('ionChange', (ev) => {
-        if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+        if (ev.target.tagName !== 'ION-CHECKBOX') {
+          return;
+        }
 
         const { checked, value } = ev.detail;
 
         if (checked) {
-          workingSelectedFruits = [
-            ...workingSelectedFruits,
-            value
-          ]
+          workingSelectedFruits = [...workingSelectedFruits, value];
         } else {
-          workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+          workingSelectedFruits = workingSelectedFruits.filter((fruit) => fruit !== value);
         }
       });
 
diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md
index 70fb4890262..e81d8b0aa56 100644
--- a/static/usage/v7/select/typeahead/index.md
+++ b/static/usage/v7/select/typeahead/index.md
@@ -19,20 +19,20 @@ import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
   version="7"
-  code={{ 
-    javascript, 
+  code={{
+    javascript,
     react: {
       files: {
         'src/main.tsx': react_main_tsx,
         'src/types.ts': react_types_ts,
-        'src/AppTypeahead.tsx': typeahead_component_tsx
-      }
-    }, 
+        'src/AppTypeahead.tsx': typeahead_component_tsx,
+      },
+    },
     vue: {
       files: {
         'src/components/Example.vue': vue_example,
         'src/types.ts': vue_types_ts,
-        'src/components/AppTypeahead.vue': vue_typeahead_component
+        'src/components/AppTypeahead.vue': vue_typeahead_component,
       },
     },
     angular: {
@@ -42,11 +42,11 @@ import angular_types_ts from './angular/angular_types_ts.md';
         'src/app/typeahead.component.html': angular_modal_example_component_html,
         'src/app/typeahead.component.ts': angular_modal_example_component_ts,
         'src/app/app.module.ts': angular_app_module_ts,
-        'src/app/types.ts': angular_types_ts
+        'src/app/types.ts': angular_types_ts,
       },
-    }, 
+    },
   }}
   src="usage/v7/select/typeahead/demo.html"
   devicePreview
   includeIonContent={false}
-/>
\ No newline at end of file
+/>
diff --git a/static/usage/v7/select/typeahead/javascript.md b/static/usage/v7/select/typeahead/javascript.md
index 51438ee8d84..e98741c6df2 100644
--- a/static/usage/v7/select/typeahead/javascript.md
+++ b/static/usage/v7/select/typeahead/javascript.md
@@ -26,8 +26,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content color="light" class="ion-padding">
-    <ion-list id="modal-list" inset="true">
-    </ion-list>
+    <ion-list id="modal-list" inset="true"> </ion-list>
   </ion-content>
 </ion-modal>
 
@@ -61,7 +60,7 @@
     { text: 'Pineapple', value: 'pineapple' },
     { text: 'Pomegranate', value: 'pomegranate' },
     { text: 'Raspberry', value: 'raspberry' },
-    { text: 'Strawberry', value: 'strawberry' }
+    { text: 'Strawberry', value: 'strawberry' },
   ];
 
   /**
@@ -94,7 +93,7 @@
 
     const normalizedQuery = searchQuery.toLowerCase();
 
-    return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery));
+    return fruits.filter((fruit) => fruit.text.toLowerCase().includes(normalizedQuery));
   }
 
   /**
@@ -112,7 +111,7 @@
         <ion-item>
           <ion-checkbox value="${item.value}" checked="${checked}">${item.text}</ion-checkbox>
         </ion-item>
-      `
+      `;
     });
 
     list.innerHTML = template;
@@ -128,7 +127,7 @@
    */
   function formatData(data) {
     if (data.length === 1) {
-      const fruit = fruits.find(fruit => fruit.value === data[0])
+      const fruit = fruits.find((fruit) => fruit.value === data[0]);
       return fruit.text;
     }
 
@@ -150,22 +149,21 @@
    */
   function confirmChanges() {
     selectedFruits = [...workingSelectedFruits];
-    modal.dismiss(selectedFruits)
-  };
+    modal.dismiss(selectedFruits);
+  }
 
   // Listen for all ionChange events from the checkbox
   modal.addEventListener('ionChange', (ev) => {
-    if (ev.target.tagName !== 'ION-CHECKBOX') { return; }
+    if (ev.target.tagName !== 'ION-CHECKBOX') {
+      return;
+    }
 
     const { checked, value } = ev.detail;
 
     if (checked) {
-      workingSelectedFruits = [
-        ...workingSelectedFruits,
-        value
-      ]
+      workingSelectedFruits = [...workingSelectedFruits, value];
     } else {
-      workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value);
+      workingSelectedFruits = workingSelectedFruits.filter((fruit) => fruit !== value);
     }
   });
 
diff --git a/static/usage/v7/select/typeahead/react/main_tsx.md b/static/usage/v7/select/typeahead/react/main_tsx.md
index 14ab838bc18..391259a7ecf 100644
--- a/static/usage/v7/select/typeahead/react/main_tsx.md
+++ b/static/usage/v7/select/typeahead/react/main_tsx.md
@@ -30,7 +30,7 @@ const fruits: Item[] = [
   { text: 'Pineapple', value: 'pineapple' },
   { text: 'Pomegranate', value: 'pomegranate' },
   { text: 'Raspberry', value: 'raspberry' },
-  { text: 'Strawberry', value: 'strawberry' }
+  { text: 'Strawberry', value: 'strawberry' },
 ];
 
 function Example() {
@@ -38,21 +38,21 @@ function Example() {
   const [selectedFruits, setSelectedFruits] = useState<string[]>([]);
 
   const modal = useRef<HTMLIonModalElement>(null);
-  
+
   const formatData = (data: string[]) => {
     if (data.length === 1) {
-      const fruit = fruits.find(fruit => fruit.value === data[0])!;
+      const fruit = fruits.find((fruit) => fruit.value === data[0])!;
       return fruit.text;
     }
-  
+
     return `${data.length} items`;
-  }
-  
+  };
+
   const fruitSelectionChanged = (fruits: string[]) => {
     setSelectedFruits(fruits);
     setSelectedFruitsText(formatData(fruits));
     modal.current?.dismiss();
-  }
+  };
 
   return (
     <>
@@ -60,11 +60,13 @@ function Example() {
         <IonList inset={true}>
           <IonItem button={true} detail={false} id="select-fruits">
             <IonLabel>Favorite Fruits</IonLabel>
-            <div slot="end" id="selected-fruits">{ selectedFruitsText }</div>
+            <div slot="end" id="selected-fruits">
+              {selectedFruitsText}
+            </div>
           </IonItem>
         </IonList>
       </IonContent>
-      
+
       <IonModal trigger="select-fruits" ref={modal}>
         <AppTypeahead
           title="Favorite Fruits"
diff --git a/static/usage/v7/select/typeahead/react/react_types_ts.md b/static/usage/v7/select/typeahead/react/react_types_ts.md
index bdf47c9d0ae..42d4583e026 100644
--- a/static/usage/v7/select/typeahead/react/react_types_ts.md
+++ b/static/usage/v7/select/typeahead/react/react_types_ts.md
@@ -2,5 +2,5 @@
 export interface Item {
   text: string;
   value: string;
-};
+}
 ```
diff --git a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
index c87cc1d926b..6026c0fbe9f 100644
--- a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
+++ b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
@@ -1,6 +1,17 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonTitle,
+  IonSearchbar,
+  IonToolbar,
+} from '@ionic/react';
 import type { CheckboxCustomEvent } from '@ionic/react';
 import type { Item } from './types';
 
@@ -15,29 +26,29 @@ interface TypeaheadProps {
 function AppTypeahead(props: TypeaheadProps) {
   const [filteredItems, setFilteredItems] = useState<Item[]>([...props.items]);
   const [workingSelectedValues, setWorkingSelectedValues] = useState<string[]>([...props.selectedItems]);
-  
+
   const isChecked = (value: string) => {
-    return workingSelectedValues.find(item => item === value) !== undefined;
-  }
-  
+    return workingSelectedValues.find((item) => item === value) !== undefined;
+  };
+
   const cancelChanges = () => {
     const { onSelectionCancel } = props;
     if (onSelectionCancel !== undefined) {
       onSelectionCancel();
     }
-  }
-  
+  };
+
   const confirmChanges = () => {
     const { onSelectionChange } = props;
     if (onSelectionChange !== undefined) {
       onSelectionChange(workingSelectedValues);
     }
-  }
-  
+  };
+
   const searchbarInput = (ev: any) => {
     filterList(ev.target.value);
-  }
-  
+  };
+
   /**
    * Update the rendered view with
    * the provided search query. If no
@@ -58,22 +69,24 @@ function AppTypeahead(props: TypeaheadProps) {
        * contain the search query as a substring.
        */
       const normalizedQuery = searchQuery.toLowerCase();
-      setFilteredItems(props.items.filter(item => {
-        return item.text.toLowerCase().includes(normalizedQuery);
-      }));
+      setFilteredItems(
+        props.items.filter((item) => {
+          return item.text.toLowerCase().includes(normalizedQuery);
+        })
+      );
     }
-  }
-  
+  };
+
   const checkboxChange = (ev: CheckboxCustomEvent) => {
     const { checked, value } = ev.detail;
-    
+
     if (checked) {
       setWorkingSelectedValues([...workingSelectedValues, value]);
     } else {
-      setWorkingSelectedValues(workingSelectedValues.filter(item => item !== value));
+      setWorkingSelectedValues(workingSelectedValues.filter((item) => item !== value));
     }
-  }
-  
+  };
+
   return (
     <>
       <IonHeader>
@@ -90,16 +103,14 @@ function AppTypeahead(props: TypeaheadProps) {
           <IonSearchbar onIonInput={searchbarInput}></IonSearchbar>
         </IonToolbar>
       </IonHeader>
-      
+
       <IonContent color="light" class="ion-padding">
         <IonList id="modal-list" inset={true}>
-          {filteredItems.map(item => (
+          {filteredItems.map((item) => (
             <IonItem key={item.value}>
-              <IonCheckbox
-                value={item.value}
-                checked={isChecked(item.value)}
-                onIonChange={checkboxChange}
-              >{item.text}</IonCheckbox>
+              <IonCheckbox value={item.value} checked={isChecked(item.value)} onIonChange={checkboxChange}>
+                {item.text}
+              </IonCheckbox>
             </IonItem>
           ))}
         </IonList>
diff --git a/static/usage/v7/select/typeahead/vue/example_vue.md b/static/usage/v7/select/typeahead/vue/example_vue.md
index 8086c2f0d6a..372b3e7d8ec 100644
--- a/static/usage/v7/select/typeahead/vue/example_vue.md
+++ b/static/usage/v7/select/typeahead/vue/example_vue.md
@@ -8,7 +8,7 @@
       </ion-item>
     </ion-list>
   </ion-content>
-  
+
   <ion-modal trigger="select-fruits" ref="modal">
     <app-typeahead
       class="ion-page"
@@ -55,29 +55,29 @@
         { text: 'Pineapple', value: 'pineapple' },
         { text: 'Pomegranate', value: 'pomegranate' },
         { text: 'Raspberry', value: 'raspberry' },
-        { text: 'Strawberry', value: 'strawberry' }
+        { text: 'Strawberry', value: 'strawberry' },
       ];
       const modal = ref();
       const selectedFruitsText = ref('0 Items');
       const selectedFruits = ref([]);
-      
+
       const formatData = (data: string[]) => {
         if (data.length === 1) {
-          const fruit = fruits.find(fruit => fruit.value === data[0])
+          const fruit = fruits.find((fruit) => fruit.value === data[0]);
           return fruit.text;
         }
-      
+
         return `${data.length} items`;
-      }
-      
+      };
+
       const fruitSelectionChanged = (fruits: string[]) => {
         selectedFruits.value = fruits;
         selectedFruitsText.value = formatData(selectedFruits.value);
         modal.value.$el.dismiss();
-      }
-      
-      return { modal, fruits, selectedFruitsText, selectedFruits, fruitSelectionChanged }; 
-    }
+      };
+
+      return { modal, fruits, selectedFruitsText, selectedFruits, fruitSelectionChanged };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
index 07bac7f44e5..33017c3e291 100644
--- a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
@@ -14,25 +14,31 @@
       <ion-searchbar @ionInput="searchbarInput($event)"></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-content color="light" class="ion-padding">
     <ion-list id="modal-list" :inset="true">
-      <ion-item
-        v-for="item in filteredItems"
-        :key="item.value"
-      >
-        <ion-checkbox
-          :value="item.value" 
-          :checked="isChecked(item.value)"
-          @ionChange="checkboxChange($event)"
-        >{{ item.text }}</ion-checkbox>
+      <ion-item v-for="item in filteredItems" :key="item.value">
+        <ion-checkbox :value="item.value" :checked="isChecked(item.value)" @ionChange="checkboxChange($event)"
+          >{{ item.text }}</ion-checkbox
+        >
       </ion-item>
     </ion-list>
   </ion-content>
 </template>
 
 <script lang="ts">
-  import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/vue';
+  import {
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonList,
+    IonTitle,
+    IonSearchbar,
+    IonToolbar,
+  } from '@ionic/vue';
   import type { CheckboxCustomEvent, SearchbarCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
@@ -42,31 +48,42 @@
       selectedItems: Array,
       title: {
         type: String,
-        default: 'Select Items'
-      }
+        default: 'Select Items',
+      },
     },
     emits: ['selection-cancel', 'selection-change'],
-    components: { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonTitle, IonSearchbar, IonToolbar },
+    components: {
+      IonButton,
+      IonButtons,
+      IonCheckbox,
+      IonContent,
+      IonHeader,
+      IonItem,
+      IonList,
+      IonTitle,
+      IonSearchbar,
+      IonToolbar,
+    },
     setup(props, { emit }) {
       const filteredItems = ref([...props.items]);
       const workingSelectedValues = ref([...props.selectedItems]);
-      
+
       const isChecked = (value: string) => {
-        return workingSelectedValues.value.find(item => item === value) !== undefined;
-      }
-      
+        return workingSelectedValues.value.find((item) => item === value) !== undefined;
+      };
+
       const cancelChanges = () => {
         emit('selection-cancel');
-      }
-      
+      };
+
       const confirmChanges = () => {
         emit('selection-change', workingSelectedValues.value);
-      }
-      
+      };
+
       const searchbarInput = (ev: SearchbarCustomEvent) => {
         filterList(ev.target.value);
-      }
-      
+      };
+
       /**
        * Update the rendered view with
        * the provided search query. If no
@@ -86,36 +103,33 @@
            * query and check to see which items
            * contain the search query as a substring.
            */
-          const normalizedQuery = searchQuery.toLowerCase(); 
-          filteredItems.value = props.items.filter(item => {
+          const normalizedQuery = searchQuery.toLowerCase();
+          filteredItems.value = props.items.filter((item) => {
             return item.text.toLowerCase().includes(normalizedQuery);
           });
         }
-      }
-      
+      };
+
       const checkboxChange = (ev: CheckboxCustomEvent) => {
         const { checked, value } = ev.detail;
-        
+
         if (checked) {
-          workingSelectedValues.value = [
-            ...workingSelectedValues.value,
-            value
-          ]
+          workingSelectedValues.value = [...workingSelectedValues.value, value];
         } else {
-          workingSelectedValues.value = workingSelectedValues.value.filter(item => item !== value);
+          workingSelectedValues.value = workingSelectedValues.value.filter((item) => item !== value);
         }
-      }
-      
-      return { 
-        filteredItems, 
-        workingSelectedValues, 
-        isChecked, 
-        cancelChanges, 
-        confirmChanges, 
+      };
+
+      return {
+        filteredItems,
+        workingSelectedValues,
+        isChecked,
+        cancelChanges,
+        confirmChanges,
         searchbarInput,
-        checkboxChange
-      }
-    }
+        checkboxChange,
+      };
+    },
   });
 </script>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/select/typeahead/vue/vue_types_ts.md b/static/usage/v7/select/typeahead/vue/vue_types_ts.md
index bdf47c9d0ae..42d4583e026 100644
--- a/static/usage/v7/select/typeahead/vue/vue_types_ts.md
+++ b/static/usage/v7/select/typeahead/vue/vue_types_ts.md
@@ -2,5 +2,5 @@
 export interface Item {
   text: string;
   value: string;
-};
+}
 ```
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
index 8b30337848c..8423962a3e9 100644
--- a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
+++ b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
@@ -4,10 +4,9 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  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
index b42500e9e44..2c5347d9b13 100644
--- a/static/usage/v7/skeleton-text/basic/demo.html
+++ b/static/usage/v7/skeleton-text/basic/demo.html
@@ -1,51 +1,50 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 300px;
-    }
+    <style>
+      ion-list {
+        width: 300px;
+      }
 
-    .container {
-      flex-direction: column;
-    }
-  </style>
-</head>
+      .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>
+  <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();
-      }
+    <script>
+      const list = document.querySelector('ion-list');
+      let loaded = false;
+      const toggle = () => {
+        if (loaded) {
+          setSkeletonText();
+        } else {
+          setContent();
+        }
 
-      loaded = !loaded;
-    }
+        loaded = !loaded;
+      };
 
-    const setSkeletonText = () => {
-      list.innerHTML = `
+      const setSkeletonText = () => {
+        list.innerHTML = `
           <ion-list-header>
             <ion-skeleton-text animated="true" style="width: 80px"></ion-skeleton-text>
           </ion-list-header>
@@ -66,10 +65,10 @@ <h3>
             </ion-label>
           </ion-item>
         `;
-    }
+      };
 
-    const setContent = () => {
-      list.innerHTML = `
+      const setContent = () => {
+        list.innerHTML = `
           <ion-list-header>Albums</ion-list-header>
           <ion-item>
             <ion-thumbnail slot="start">
@@ -82,11 +81,9 @@ <h3>Abbey Road</h3>
             </ion-label>
           </ion-item>
         `;
-    }
-
-    setSkeletonText();
-
-  </script>
-</body>
+      };
 
-</html>
\ No newline at end of file
+      setSkeletonText();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/skeleton-text/basic/javascript.md b/static/usage/v7/skeleton-text/basic/javascript.md
index 5eefa7c1149..da71f295063 100644
--- a/static/usage/v7/skeleton-text/basic/javascript.md
+++ b/static/usage/v7/skeleton-text/basic/javascript.md
@@ -56,6 +56,5 @@
   }
 
   setSkeletonText();
-
 </script>
 ```
diff --git a/static/usage/v7/skeleton-text/basic/react.md b/static/usage/v7/skeleton-text/basic/react.md
index 2ea377034c9..a247849a478 100644
--- a/static/usage/v7/skeleton-text/basic/react.md
+++ b/static/usage/v7/skeleton-text/basic/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React, { useState } from 'react';
-import { 
+import {
   IonButton,
   IonIcon,
   IonItem,
@@ -15,12 +15,12 @@ function Example() {
   const [loaded, setLoaded] = useState(false);
   return (
     <>
-      {loaded && 
+      {loaded && (
         <IonList>
           <IonListHeader>Albums</IonListHeader>
           <IonItem>
             <IonThumbnail slot="start">
-              <IonIcon style={{ 'width': '100%', 'height': '100%' }} icon={musicalNotes}></IonIcon>
+              <IonIcon style={{ width: '100%', height: '100%' }} icon={musicalNotes}></IonIcon>
             </IonThumbnail>
             <IonLabel>
               <h3>Abbey Road</h3>
@@ -29,11 +29,11 @@ function Example() {
             </IonLabel>
           </IonItem>
         </IonList>
-      }
-      {!loaded &&
+      )}
+      {!loaded && (
         <IonList>
           <IonListHeader>
-            <IonSkeletonText animated={true} style={{ 'width': '80px' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '80px' }}></IonSkeletonText>
           </IonListHeader>
           <IonItem>
             <IonThumbnail slot="start">
@@ -41,21 +41,21 @@ function Example() {
             </IonThumbnail>
             <IonLabel>
               <h3>
-                <IonSkeletonText animated={true} style={{ 'width': '80%' }}></IonSkeletonText>
+                <IonSkeletonText animated={true} style={{ width: '80%' }}></IonSkeletonText>
               </h3>
               <p>
-                <IonSkeletonText animated={true} style={{ 'width': '60%' }}></IonSkeletonText>
+                <IonSkeletonText animated={true} style={{ width: '60%' }}></IonSkeletonText>
               </p>
               <p>
-                <IonSkeletonText animated={true} style={{ 'width': '30%' }}></IonSkeletonText>
+                <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
index c03a518af19..f391050a009 100644
--- a/static/usage/v7/skeleton-text/basic/vue.md
+++ b/static/usage/v7/skeleton-text/basic/vue.md
@@ -13,7 +13,7 @@
       </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>
@@ -35,7 +35,7 @@
       </ion-label>
     </ion-item>
   </ion-list>
-  
+
   <ion-button @click="setLoaded(!loaded)">Toggle</ion-button>
 </template>
 
@@ -50,7 +50,7 @@
     IonSkeletonText,
     IonThumbnail,
   } from '@ionic/vue';
-  import { musicalNotes } from 'ionicons/icons'
+  import { musicalNotes } from 'ionicons/icons';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
@@ -66,13 +66,13 @@
     },
     setup() {
       const loaded = ref(false);
-      const setLoaded = (state: boolean) => loaded.value = state;
+      const setLoaded = (state: boolean) => (loaded.value = state);
       return {
         loaded,
         musicalNotes,
-        setLoaded
-      }
-    }
+        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
index 67761872c60..c59d8603262 100644
--- 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
@@ -4,4 +4,4 @@ ion-skeleton-text {
   --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/demo.html b/static/usage/v7/skeleton-text/theming/css-properties/demo.html
index b84ffc4c317..13f68b54722 100644
--- a/static/usage/v7/skeleton-text/theming/css-properties/demo.html
+++ b/static/usage/v7/skeleton-text/theming/css-properties/demo.html
@@ -1,60 +1,58 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-list {
+        width: 300px;
+      }
 
-  <style>
-    ion-list {
-      width: 300px;
-    }
+      .container {
+        flex-direction: column;
+      }
 
-    .container {
-      flex-direction: column;
-    }
+      ion-skeleton-text {
+        --border-radius: 9999px;
+        --background: rgba(188, 0, 255, 0.065);
+        --background-rgb: 188, 0, 255;
+      }
+    </style>
+  </head>
 
-    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
+  <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/v7/skeleton-text/theming/css-properties/javascript.md b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md
index 20463c6aba6..90d27d3f31e 100644
--- a/static/usage/v7/skeleton-text/theming/css-properties/javascript.md
+++ b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md
@@ -26,6 +26,6 @@
         <ion-skeleton-text animated="true" style="width: 30%;"></ion-skeleton-text>
       </p>
     </ion-label>
-    </ion-item>
+  </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
index 67761872c60..c59d8603262 100644
--- 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
@@ -4,4 +4,4 @@ ion-skeleton-text {
   --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
index 29e6e159f68..d66ea73ff7f 100644
--- 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
@@ -1,13 +1,6 @@
 ```tsx
 import React from 'react';
-import { 
-  IonItem,
-  IonLabel,
-  IonList,
-  IonListHeader,
-  IonSkeletonText,
-  IonThumbnail,
-} from '@ionic/react';
+import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react';
 
 import './main.css';
 
@@ -15,7 +8,7 @@ function Example() {
   return (
     <IonList>
       <IonListHeader>
-        <IonSkeletonText animated={true} style={{ 'width': '80px' }}></IonSkeletonText>
+        <IonSkeletonText animated={true} style={{ width: '80px' }}></IonSkeletonText>
       </IonListHeader>
       <IonItem>
         <IonThumbnail slot="start">
@@ -23,13 +16,13 @@ function Example() {
         </IonThumbnail>
         <IonLabel>
           <h3>
-            <IonSkeletonText animated={true} style={{ 'width': '80%' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '80%' }}></IonSkeletonText>
           </h3>
           <p>
-            <IonSkeletonText animated={true} style={{ 'width': '60%' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '60%' }}></IonSkeletonText>
           </p>
           <p>
-            <IonSkeletonText animated={true} style={{ 'width': '30%' }}></IonSkeletonText>
+            <IonSkeletonText animated={true} style={{ width: '30%' }}></IonSkeletonText>
           </p>
         </IonLabel>
       </IonItem>
@@ -37,4 +30,4 @@ function Example() {
   );
 }
 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
index 418a7ca610f..2785a0e8b51 100644
--- a/static/usage/v7/skeleton-text/theming/css-properties/vue.md
+++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
@@ -1,5 +1,5 @@
 ```html
-<template>  
+<template>
   <ion-list>
     <ion-list-header>
       <ion-skeleton-text :animated="true" style="width: 80px"></ion-skeleton-text>
@@ -24,14 +24,7 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonItem,
-    IonLabel,
-    IonList,
-    IonListHeader,
-    IonSkeletonText,
-    IonThumbnail,
-  } from '@ionic/vue';
+  import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -42,7 +35,7 @@
       IonListHeader,
       IonSkeletonText,
       IonThumbnail,
-    }
+    },
   });
 </script>
 
diff --git a/static/usage/v7/spinner/basic/demo.html b/static/usage/v7/spinner/basic/demo.html
index f900d6f461f..811e66cf28b 100644
--- a/static/usage/v7/spinner/basic/demo.html
+++ b/static/usage/v7/spinner/basic/demo.html
@@ -1,79 +1,77 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        display: block;
+        flex-flow: column;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>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</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 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</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>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>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>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>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
+          <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/v7/spinner/theming/colors/demo.html b/static/usage/v7/spinner/theming/colors/demo.html
index b3984b8c59a..6f8a8a8abe8 100644
--- a/static/usage/v7/spinner/theming/colors/demo.html
+++ b/static/usage/v7/spinner/theming/colors/demo.html
@@ -1,33 +1,31 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/spinner/theming/css-properties/demo.html b/static/usage/v7/spinner/theming/css-properties/demo.html
index 88a7fb6a49c..4ef8b5b2722 100644
--- a/static/usage/v7/spinner/theming/css-properties/demo.html
+++ b/static/usage/v7/spinner/theming/css-properties/demo.html
@@ -1,30 +1,28 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-spinner {
+        --color: #54dc98;
+      }
+    </style>
+  </head>
 
-  <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
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-spinner></ion-spinner>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/spinner/theming/css-properties/react.md b/static/usage/v7/spinner/theming/css-properties/react.md
index e5cd98ffb60..117d82c8541 100644
--- a/static/usage/v7/spinner/theming/css-properties/react.md
+++ b/static/usage/v7/spinner/theming/css-properties/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonSpinner } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonSpinner></IonSpinner>
-  );
+  return <IonSpinner></IonSpinner>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/split-pane/basic/angular.md b/static/usage/v7/split-pane/basic/angular.md
index 0183d57a9fa..c642d54bc50 100644
--- a/static/usage/v7/split-pane/basic/angular.md
+++ b/static/usage/v7/split-pane/basic/angular.md
@@ -6,9 +6,7 @@
         <ion-title>Menu</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Menu Content
-    </ion-content>
+    <ion-content class="ion-padding"> Menu Content </ion-content>
   </ion-menu>
 
   <div class="ion-page" id="main">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <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
index 4c8fce4946f..9c9558aa9f7 100644
--- a/static/usage/v7/split-pane/basic/demo.html
+++ b/static/usage/v7/split-pane/basic/demo.html
@@ -1,42 +1,36 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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
+        <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/v7/split-pane/basic/javascript.md b/static/usage/v7/split-pane/basic/javascript.md
index 626cc1ee03f..7d7cb736c98 100644
--- a/static/usage/v7/split-pane/basic/javascript.md
+++ b/static/usage/v7/split-pane/basic/javascript.md
@@ -6,9 +6,7 @@
         <ion-title>Menu</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Menu Content
-    </ion-content>
+    <ion-content class="ion-padding"> Menu Content </ion-content>
   </ion-menu>
 
   <div class="ion-page" id="main">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <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
index 4088c068f1d..f754f18b3a6 100644
--- a/static/usage/v7/split-pane/basic/react.md
+++ b/static/usage/v7/split-pane/basic/react.md
@@ -11,20 +11,16 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Menu Content
-        </IonContent>
+        <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>
+        <IonContent className="ion-padding">Main View Content</IonContent>
       </div>
     </IonSplitPane>
   );
diff --git a/static/usage/v7/split-pane/basic/vue.md b/static/usage/v7/split-pane/basic/vue.md
index b514acbcf6e..81f9dbd9a6b 100644
--- a/static/usage/v7/split-pane/basic/vue.md
+++ b/static/usage/v7/split-pane/basic/vue.md
@@ -7,20 +7,16 @@
           <ion-title>Menu</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content class="ion-padding">
-        Menu Content
-      </ion-content>
+      <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>
+      <ion-content class="ion-padding"> Main View Content </ion-content>
     </div>
   </ion-split-pane>
 </template>
@@ -30,7 +26,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar  },
+    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
   });
 </script>
 ```
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
index 4772826c933..029f5d3ee56 100644
--- 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
@@ -6,9 +6,7 @@
         <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-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">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <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
index dcd6445a0a2..640f9bb81a6 100644
--- a/static/usage/v7/split-pane/theming/css-properties/demo.html
+++ b/static/usage/v7/split-pane/theming/css-properties/demo.html
@@ -1,50 +1,44 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-split-pane {
+        --side-width: 350px;
+        --side-max-width: 350px;
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    ion-split-pane {
-      --side-width: 350px;
-      --side-max-width: 350px;
+        --border: 1px dashed #b3baff;
+      }
+    </style>
+  </head>
 
-      --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>
 
-<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
+        <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/v7/split-pane/theming/css-properties/javascript.md b/static/usage/v7/split-pane/theming/css-properties/javascript.md
index 943993aa380..37bd7b9e7f1 100644
--- a/static/usage/v7/split-pane/theming/css-properties/javascript.md
+++ b/static/usage/v7/split-pane/theming/css-properties/javascript.md
@@ -6,9 +6,7 @@
         <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-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">
@@ -17,9 +15,7 @@
         <ion-title>Main View</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Main View Content
-    </ion-content>
+    <ion-content class="ion-padding"> Main View Content </ion-content>
   </div>
 </ion-split-pane>
 
@@ -27,7 +23,7 @@
   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_tsx.md b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md
index 7456a34359d..1d4ad6a2e19 100644
--- 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
@@ -13,20 +13,16 @@ function Example() {
             <IonTitle>Menu</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Menu Content is 350px wide and has a blue dashed border
-        </IonContent>
+        <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>
+        <IonContent className="ion-padding">Main View Content</IonContent>
       </div>
     </IonSplitPane>
   );
diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md
index cc891eaeda1..f0abcf95800 100644
--- a/static/usage/v7/split-pane/theming/css-properties/vue.md
+++ b/static/usage/v7/split-pane/theming/css-properties/vue.md
@@ -7,20 +7,16 @@
           <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-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>
+      <ion-content class="ion-padding"> Main View Content </ion-content>
     </div>
   </ion-split-pane>
 </template>
@@ -30,7 +26,7 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar  },
+    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
   });
 </script>
 
@@ -38,7 +34,7 @@
   ion-split-pane {
     --side-width: 350px;
     --side-max-width: 350px;
-  
+
     --border: 1px dashed #b3baff;
   }
 </style>
diff --git a/static/usage/v7/tabs/router/demo.html b/static/usage/v7/tabs/router/demo.html
index 0628eab458a..d1fa8e40f83 100644
--- a/static/usage/v7/tabs/router/demo.html
+++ b/static/usage/v7/tabs/router/demo.html
@@ -1,125 +1,114 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tabs</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .example-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    </style>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Tabs</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    .example-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-tabs>
+        <ion-tab tab="home">
+          <ion-nav id="home-nav"></ion-nav>
+          <div id="home-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Listen now</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Listen now content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="radio">
+          <ion-nav id="radio-nav"></ion-nav>
+          <div id="radio-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Radio</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Radio content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="library">
+          <ion-nav id="library-nav"></ion-nav>
+          <div id="library-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Library</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Library content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="search">
+          <ion-nav id="search-nav"></ion-nav>
+          <div id="search-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Search</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Search content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="home">
+            <ion-icon name="play-circle"></ion-icon>
+            Listen Now
+          </ion-tab-button>
+          <ion-tab-button tab="radio">
+            <ion-icon name="radio"></ion-icon>
+            Radio
+          </ion-tab-button>
+          <ion-tab-button tab="library">
+            <ion-icon name="library"></ion-icon>
+            Library
+          </ion-tab-button>
+          <ion-tab-button tab="search">
+            <ion-icon name="search"></ion-icon>
+            Search
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-app>
+    <script>
+      const homeNav = document.querySelector('#home-nav');
+      const homePage = document.querySelector('#home-page');
+      homeNav.root = homePage;
 
-<body>
-  <ion-app>
-    <ion-tabs>
-      <ion-tab tab="home">
-        <ion-nav id="home-nav"></ion-nav>
-        <div id="home-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Listen now</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Listen now content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab tab="radio">
-        <ion-nav id="radio-nav"></ion-nav>
-        <div id="radio-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Radio</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Radio content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab tab="library">
-        <ion-nav id="library-nav"></ion-nav>
-        <div id="library-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Library</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Library content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab tab="search">
-        <ion-nav id="search-nav"></ion-nav>
-        <div id="search-page">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Search</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <div class="example-content">
-              Search content
-            </div>
-          </ion-content>
-        </div>
-      </ion-tab>
-      <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="home">
-          <ion-icon name="play-circle"></ion-icon>
-          Listen Now
-        </ion-tab-button>
-        <ion-tab-button tab="radio">
-          <ion-icon name="radio"></ion-icon>
-          Radio
-        </ion-tab-button>
-        <ion-tab-button tab="library">
-          <ion-icon name="library"></ion-icon>
-          Library
-        </ion-tab-button>
-        <ion-tab-button tab="search">
-          <ion-icon name="search"></ion-icon>
-          Search
-        </ion-tab-button>
-      </ion-tab-bar>
-    </ion-tabs>
+      const radioNav = document.querySelector('#radio-nav');
+      const radioPage = document.querySelector('#radio-page');
+      radioNav.root = radioPage;
 
-  </ion-app>
-  <script>
-    const homeNav = document.querySelector('#home-nav');
-    const homePage = document.querySelector('#home-page');
-    homeNav.root = homePage;
-
-    const radioNav = document.querySelector('#radio-nav');
-    const radioPage = document.querySelector('#radio-page');
-    radioNav.root = radioPage;
-
-    const libraryNav = document.querySelector('#library-nav');
-    const libraryPage = document.querySelector('#library-page');
-    libraryNav.root = libraryPage;
-
-    const searchNav = document.querySelector('#search-nav');
-    const searchPage = document.querySelector('#search-page');
-    searchNav.root = searchPage;
-  </script>
-</body>
+      const libraryNav = document.querySelector('#library-nav');
+      const libraryPage = document.querySelector('#library-page');
+      libraryNav.root = libraryPage;
 
+      const searchNav = document.querySelector('#search-nav');
+      const searchPage = document.querySelector('#search-page');
+      searchNav.root = searchPage;
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/text/basic/angular.md b/static/usage/v7/text/basic/angular.md
index fb2f6064fba..e63da3cacf9 100644
--- a/static/usage/v7/text/basic/angular.md
+++ b/static/usage/v7/text/basic/angular.md
@@ -13,9 +13,9 @@
 
 <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>
+  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
index d7485b4396f..e41614e0814 100644
--- a/static/usage/v7/text/basic/demo.html
+++ b/static/usage/v7/text/basic/demo.html
@@ -1,61 +1,59 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+          <ion-text color="secondary">
+            <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+          </ion-text>
 
-        <p>
-          <ion-text color="warning">
-            <ion-icon name="warning"></ion-icon>
+          <ion-text color="tertiary">
+            <h3>H3: The quick brown fox jumps over the lazy dog</h3>
           </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
+          <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/v7/text/basic/javascript.md b/static/usage/v7/text/basic/javascript.md
index fb2f6064fba..e63da3cacf9 100644
--- a/static/usage/v7/text/basic/javascript.md
+++ b/static/usage/v7/text/basic/javascript.md
@@ -13,9 +13,9 @@
 
 <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>
+  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
index dac54e84471..da8882e3bf5 100644
--- a/static/usage/v7/text/basic/react.md
+++ b/static/usage/v7/text/basic/react.md
@@ -19,11 +19,14 @@ function Example() {
       </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>
+        <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>
     </>
   );
diff --git a/static/usage/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md
index 742167bf9f1..b34cd3d437a 100644
--- a/static/usage/v7/text/basic/vue.md
+++ b/static/usage/v7/text/basic/vue.md
@@ -14,10 +14,10 @@
 
   <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>
+    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>
 
diff --git a/static/usage/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular.md
index 5ff7394eec0..03de94359b6 100644
--- a/static/usage/v7/textarea/autogrow/angular.md
+++ b/static/usage/v7/textarea/autogrow/angular.md
@@ -1,7 +1,10 @@
 ```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
+    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
index 15bf541e9d6..bccc88fbd8f 100644
--- a/static/usage/v7/textarea/autogrow/demo.html
+++ b/static/usage/v7/textarea/autogrow/demo.html
@@ -1,38 +1,39 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        padding: 0 40px;
+      }
 
-  <style>
-    .container {
-      padding: 0 40px;
-    }
+      ion-item {
+        width: 100%;
+      }
+    </style>
+  </head>
 
-    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
+  <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>
diff --git a/static/usage/v7/textarea/autogrow/javascript.md b/static/usage/v7/textarea/autogrow/javascript.md
index bea62987f5e..4c2e15028fd 100644
--- a/static/usage/v7/textarea/autogrow/javascript.md
+++ b/static/usage/v7/textarea/autogrow/javascript.md
@@ -1,7 +1,10 @@
 ```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
+    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/vue.md b/static/usage/v7/textarea/autogrow/vue.md
index 824ada24909..693814464e8 100644
--- a/static/usage/v7/textarea/autogrow/vue.md
+++ b/static/usage/v7/textarea/autogrow/vue.md
@@ -1,8 +1,11 @@
 ```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
+      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>
diff --git a/static/usage/v7/textarea/basic/demo.html b/static/usage/v7/textarea/basic/demo.html
index 726165a8987..e93893105d9 100644
--- a/static/usage/v7/textarea/basic/demo.html
+++ b/static/usage/v7/textarea/basic/demo.html
@@ -1,40 +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 - 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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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-textarea label="Regular textarea" placeholder="Type something here"></ion-textarea>
-          </ion-item>
-          <ion-item>
-            <ion-textarea readonly="true" label="Readonly textarea" placeholder="Can't edit this"></ion-textarea>
-          </ion-item>
-          <ion-item>
-            <ion-textarea disabled="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+    <style>
+      ion-list {
+        width: calc(100% - 20px);
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-textarea label="Regular textarea" placeholder="Type something here"></ion-textarea>
+            </ion-item>
+            <ion-item>
+              <ion-textarea readonly="true" label="Readonly textarea" placeholder="Can't edit this"></ion-textarea>
+            </ion-item>
+            <ion-item>
+              <ion-textarea disabled="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/textarea/clear-on-edit/demo.html b/static/usage/v7/textarea/clear-on-edit/demo.html
index 5cf49403444..e4f9ac6cb46 100644
--- a/static/usage/v7/textarea/clear-on-edit/demo.html
+++ b/static/usage/v7/textarea/clear-on-edit/demo.html
@@ -1,31 +1,29 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        padding: 0 40px;
+      }
+    </style>
+  </head>
 
-  <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
+  <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>
diff --git a/static/usage/v7/textarea/counter/demo.html b/static/usage/v7/textarea/counter/demo.html
index e175ee00e30..43ea23ffafb 100644
--- a/static/usage/v7/textarea/counter/demo.html
+++ b/static/usage/v7/textarea/counter/demo.html
@@ -1,41 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Textarea</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
 
-  <style>
-    .container {
-      flex-direction: column;
+        width: 300px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      width: 300px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-textarea label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-textarea>
 
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-textarea label="Default counter" label-placement="floating" counter="true" maxlength="20"></ion-textarea>
-
-        <ion-textarea id="custom-textarea" label="Custom Counter Format" label-placement="floating" counter="true"
-          maxlength="20"></ion-textarea>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-<script>
-  const customTextarea = document.querySelector('#custom-textarea');
-  customTextarea.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
-</script>
+          <ion-textarea
+            id="custom-textarea"
+            label="Custom Counter Format"
+            label-placement="floating"
+            counter="true"
+            maxlength="20"
+          ></ion-textarea>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 
+  <script>
+    const customTextarea = document.querySelector('#custom-textarea');
+    customTextarea.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`;
+  </script>
 </html>
diff --git a/static/usage/v7/textarea/fill/demo.html b/static/usage/v7/textarea/fill/demo.html
index f24a5bf8691..9048ef77bd5 100644
--- a/static/usage/v7/textarea/fill/demo.html
+++ b/static/usage/v7/textarea/fill/demo.html
@@ -1,38 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Textarea</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
+        width: 300px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
 
-      width: 300px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-textarea label="Solid textarea" label-placement="floating" fill="solid"
-          placeholder="Enter text"></ion-textarea>
-
-        <ion-textarea label="Outline textarea" label-placement="floating" fill="outline"
-          placeholder="Enter text"></ion-textarea>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-textarea
+            label="Solid textarea"
+            label-placement="floating"
+            fill="solid"
+            placeholder="Enter text"
+          ></ion-textarea>
 
+          <ion-textarea
+            label="Outline textarea"
+            label-placement="floating"
+            fill="outline"
+            placeholder="Enter text"
+          ></ion-textarea>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/textarea/helper-error/demo.html b/static/usage/v7/textarea/helper-error/demo.html
index 75e5568ed77..4fb4eba97c1 100644
--- a/static/usage/v7/textarea/helper-error/demo.html
+++ b/static/usage/v7/textarea/helper-error/demo.html
@@ -1,56 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    .container ion-textarea {
-      width: 300px;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-textarea fill="solid" label="Email" label-placement="floating" helper-text="Enter a valid email"
-          error-text="Invalid email"></ion-textarea>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const textarea = document.querySelector('ion-textarea');
-
-    textarea.addEventListener('ionInput', (ev) => validate(ev));
-    textarea.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;
-
-      textarea.classList.remove('ion-valid');
-      textarea.classList.remove('ion-invalid');
-
-      if (value === "") return;
-
-      validateEmail(value) ? textarea.classList.add('ion-valid') : textarea.classList.add('ion-invalid');
-    }
-
-    const markTouched = () => {
-      textarea.classList.add('ion-touched');
-    }
-  </script>
-</body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Textarea</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container ion-textarea {
+        width: 300px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-textarea
+            fill="solid"
+            label="Email"
+            label-placement="floating"
+            helper-text="Enter a valid email"
+            error-text="Invalid email"
+          ></ion-textarea>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const textarea = document.querySelector('ion-textarea');
+
+      textarea.addEventListener('ionInput', (ev) => validate(ev));
+      textarea.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;
+
+        textarea.classList.remove('ion-valid');
+        textarea.classList.remove('ion-invalid');
+
+        if (value === '') return;
+
+        validateEmail(value) ? textarea.classList.add('ion-valid') : textarea.classList.add('ion-invalid');
+      };
+
+      const markTouched = () => {
+        textarea.classList.add('ion-touched');
+      };
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/textarea/label-placement/demo.html b/static/usage/v7/textarea/label-placement/demo.html
index 66d7adc9459..5fe8572bdb5 100644
--- a/static/usage/v7/textarea/label-placement/demo.html
+++ b/static/usage/v7/textarea/label-placement/demo.html
@@ -1,43 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Textarea</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Textarea</title>
-  <link rel="stylesheet" href="../../../common.css" />
-  <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
-          </ion-item>
-          <ion-item>
-            <ion-textarea label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-textarea>
-          </ion-item>
-          <ion-item>
-            <ion-textarea label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-textarea>
-          </ion-item>
-          <ion-item>
-            <ion-textarea label="Floating label" label-placement="floating" placeholder="Enter text"></ion-textarea>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
+            </ion-item>
+            <ion-item>
+              <ion-textarea label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-textarea>
+            </ion-item>
+            <ion-item>
+              <ion-textarea label="Stacked label" label-placement="stacked" placeholder="Enter text"></ion-textarea>
+            </ion-item>
+            <ion-item>
+              <ion-textarea label="Floating label" label-placement="floating" placeholder="Enter text"></ion-textarea>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md
index 6413224a286..aa820c53b48 100644
--- a/static/usage/v7/textarea/migration/index.md
+++ b/static/usage/v7/textarea/migration/index.md
@@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem';
 <!-- After -->
 
 <!--
-  Metadata such as counters and helper text should not 
-  be used when a textarea is in an item/list. If you need to 
+  Metadata such as counters and helper text should not
+  be used when a textarea is in an item/list. If you need to
   provide more context on a textarea, consider using an ion-note
   underneath the ion-list.
 -->
@@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem';
 <!-- After -->
 
 <!--
-  Metadata such as counters and helper text should not 
-  be used when a textarea is in an item/list. If you need to 
+  Metadata such as counters and helper text should not
+  be used when a textarea is in an item/list. If you need to
   provide more context on a textarea, consider using an ion-note
   underneath the ion-list.
 -->
@@ -170,9 +170,9 @@ import TabItem from '@theme/TabItem';
 
 {/* After */}
 
-{/* 
-  Metadata such as counters and helper text should not 
-  be used when a textarea is in an item/list. If you need to 
+{/*
+  Metadata such as counters and helper text should not
+  be used when a textarea is in an item/list. If you need to
   provide more context on a textarea, consider using an IonNote
   underneath the IonList.
 */}
@@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem';
 <!-- After -->
 
 <!--
-  Metadata such as counters and helper text should not 
-  be used when a textarea is in an item/list. If you need to 
+  Metadata such as counters and helper text should not
+  be used when a textarea is in an item/list. If you need to
   provide more context on a textarea, consider using an ion-note
   underneath the ion-list.
 -->
diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html
index 0976460f00a..4a0f043efb4 100644
--- a/static/usage/v7/textarea/theming/demo.html
+++ b/static/usage/v7/textarea/theming/demo.html
@@ -1,50 +1,48 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        padding: 0 40px;
+      }
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  <style>
-    .container {
-      padding: 0 40px;
-    }
+      ion-textarea.custom {
+        --background: #373737;
+        --color: #fff;
+        --padding-end: 10px;
+        --padding-start: 10px;
+        --placeholder-color: #ddd;
+        --placeholder-opacity: 0.8;
+      }
 
-    ion-textarea.custom {
-      --background: #373737;
-      --color: #fff;
-      --padding-end: 10px;
-      --padding-start: 10px;
-      --placeholder-color: #ddd;
-      --placeholder-opacity: 0.8;
-    }
-
-    ion-textarea.custom .helper-text,
-    ion-textarea.custom .counter {
-      color: #373737;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-textarea
-          aria-label="Custom textarea"
-          placeholder="Type something here"
-          class="custom"
-          helper-text="Helper text"
-          counter="true"
-          maxlength="100"
-        ></ion-textarea>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+      ion-textarea.custom .helper-text,
+      ion-textarea.custom .counter {
+        color: #373737;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-textarea
+            aria-label="Custom textarea"
+            placeholder="Type something here"
+            class="custom"
+            helper-text="Helper text"
+            counter="true"
+            maxlength="100"
+          ></ion-textarea>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md
index ae34bb17a0f..c654ae883a9 100644
--- a/static/usage/v7/textarea/theming/javascript.md
+++ b/static/usage/v7/textarea/theming/javascript.md
@@ -17,7 +17,7 @@
     --placeholder-color: #ddd;
     --placeholder-opacity: 0.8;
   }
-  
+
   ion-textarea.custom .helper-text,
   ion-textarea.custom .counter {
     color: #373737;
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
index be3ad556a62..c7cef62ba4a 100644
--- a/static/usage/v7/textarea/theming/vue.md
+++ b/static/usage/v7/textarea/theming/vue.md
@@ -8,7 +8,7 @@
     --placeholder-color: #ddd;
     --placeholder-opacity: 0.8;
   }
-  
+
   ion-textarea.custom .helper-text,
   ion-textarea.custom .counter {
     color: #373737;
diff --git a/static/usage/v7/thumbnail/basic/demo.html b/static/usage/v7/thumbnail/basic/demo.html
index d86ab646cbe..abf0426465d 100644
--- a/static/usage/v7/thumbnail/basic/demo.html
+++ b/static/usage/v7/thumbnail/basic/demo.html
@@ -1,27 +1,24 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/thumbnail/item/demo.html b/static/usage/v7/thumbnail/item/demo.html
index e264f894790..18bd15a9c8c 100644
--- a/static/usage/v7/thumbnail/item/demo.html
+++ b/static/usage/v7/thumbnail/item/demo.html
@@ -1,30 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md
index 605855deb77..74742dfe9f0 100644
--- 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
@@ -1,4 +1,3 @@
-
 ```css
 ion-thumbnail {
   --size: 140px;
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
index 8ef97cae761..119cfb8ee9c 100644
--- 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
@@ -1,4 +1,3 @@
-
 ```html
 <ion-thumbnail>
   <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
diff --git a/static/usage/v7/thumbnail/theming/css-properties/demo.html b/static/usage/v7/thumbnail/theming/css-properties/demo.html
index d50eb4eaa90..9bcfbf82451 100644
--- a/static/usage/v7/thumbnail/theming/css-properties/demo.html
+++ b/static/usage/v7/thumbnail/theming/css-properties/demo.html
@@ -1,33 +1,31 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-thumbnail {
+        --size: 140px;
+        --border-radius: 14px;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md
index 37f4796d763..1d0f352383f 100644
--- a/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md
@@ -1,4 +1,3 @@
-
 ```tsx
 import React from 'react';
 import { IonThumbnail } from '@ionic/react';
diff --git a/static/usage/v7/title/basic/demo.html b/static/usage/v7/title/basic/demo.html
index 8bad261fe81..af7b877c435 100644
--- a/static/usage/v7/title/basic/demo.html
+++ b/static/usage/v7/title/basic/demo.html
@@ -1,25 +1,22 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/title/collapsible-large-title/basic/demo.html b/static/usage/v7/title/collapsible-large-title/basic/demo.html
index 5fc4f3a6d73..1e68e0e9708 100644
--- a/static/usage/v7/title/collapsible-large-title/basic/demo.html
+++ b/static/usage/v7/title/collapsible-large-title/basic/demo.html
@@ -1,59 +1,54 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
+          <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>
+        <div class="ion-padding">Scroll the list to see the title collapse.</div>
 
-</html>
\ No newline at end of file
+        <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/v7/title/collapsible-large-title/buttons/demo.html b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
index ddc79b8e515..e0603e9aed2 100644
--- a/static/usage/v7/title/collapsible-large-title/buttons/demo.html
+++ b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
@@ -1,65 +1,60 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
+          <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>
+        <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>
 
-</html>
\ No newline at end of file
+        <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/v7/title/theming/css-properties/demo.html b/static/usage/v7/title/theming/css-properties/demo.html
index 18c3e6c4efc..edbf7a4f374 100644
--- a/static/usage/v7/title/theming/css-properties/demo.html
+++ b/static/usage/v7/title/theming/css-properties/demo.html
@@ -1,69 +1,67 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-title.title-large {
+        color: #c897d8;
+        font-size: 30px;
+      }
 
-  <style>
-    ion-title.title-large {
-      color: #C897D8;
-      font-size: 30px;
-    }
+      ion-title {
+        --color: #000;
+      }
 
-    ion-title {
-      --color: #000;
-    }
+      ion-toolbar {
+        --background: #c897d8;
+      }
+    </style>
+  </head>
 
-    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">
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title size="large">Title</ion-title>
+          <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
+        <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/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md
index 3245d44e8a4..36717f5eb9a 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_html.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_html.md
@@ -2,11 +2,11 @@
 <ion-button id="open-toast">Open Toast</ion-button>
 <ion-toast
   trigger="open-toast"
-  message="Hello World!" 
-  [duration]="3000" 
+  message="Hello World!"
+  [duration]="3000"
   [buttons]="toastButtons"
   (didDismiss)="setRoleMessage($event)"
 ></ion-toast>
 <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
index 9adc2711591..dd34310e22d 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -10,20 +10,24 @@ export class ExampleComponent {
     {
       text: 'More Info',
       role: 'info',
-      handler: () => { this.handlerMessage = 'More Info clicked'; }
+      handler: () => {
+        this.handlerMessage = 'More Info clicked';
+      },
     },
     {
       text: 'Dismiss',
       role: 'cancel',
-      handler: () => { this.handlerMessage = 'Dismiss clicked'; }
-    }
+      handler: () => {
+        this.handlerMessage = 'Dismiss clicked';
+      },
+    },
   ];
   handlerMessage = '';
   roleMessage = '';
 
   setRoleMessage(ev) {
-    const { role } = ev.detail
+    const { role } = ev.detail;
     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
index 01e703fc189..d2b2341e230 100644
--- a/static/usage/v7/toast/buttons/demo.html
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -1,66 +1,68 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    .container {
-      flex-direction: column;
-    }
-
-    .container p {
-      margin-bottom: 0;
-    }
-  </style>
-</head>
+    <style>
+      .container {
+        flex-direction: column;
+      }
 
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-toast">Open Toast</ion-button>
-        <ion-toast trigger="open-toast" duration="3000" message="Hello World!"></ion-toast>
-        <p id="handlerResult"></p>
-        <p id="roleResult"></p>
-      </div>
-    </ion-content>
-  </ion-app>
+      .container p {
+        margin-bottom: 0;
+      }
+    </style>
+  </head>
 
-  <script>
-    const toast = document.querySelector('ion-toast');
-    const handlerOutput = document.querySelector('#handlerResult');
-    const roleOutput = document.querySelector('#roleResult');
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toast</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-toast">Open Toast</ion-button>
+          <ion-toast trigger="open-toast" duration="3000" message="Hello World!"></ion-toast>
+          <p id="handlerResult"></p>
+          <p id="roleResult"></p>
+        </div>
+      </ion-content>
+    </ion-app>
 
-    toast.buttons = [
-      {
-        text: 'More Info',
-        role: 'info',
-        handler: () => { handlerOutput.innerText = 'More Info clicked'; }
-      },
-      {
-        text: 'Dismiss',
-        role: 'cancel',
-        handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
-      }
-    ];
+    <script>
+      const toast = document.querySelector('ion-toast');
+      const handlerOutput = document.querySelector('#handlerResult');
+      const roleOutput = document.querySelector('#roleResult');
 
-    toast.addEventListener('ionToastDidDismiss', (ev) => {
-      const { role } = ev.detail;
-      roleOutput.innerText = `Dismissed with role: ${role}`;
-    });
-  </script>
-</body>
+      toast.buttons = [
+        {
+          text: 'More Info',
+          role: 'info',
+          handler: () => {
+            handlerOutput.innerText = 'More Info clicked';
+          },
+        },
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+          handler: () => {
+            handlerOutput.innerText = 'Dismiss clicked';
+          },
+        },
+      ];
 
+      toast.addEventListener('ionToastDidDismiss', (ev) => {
+        const { role } = ev.detail;
+        roleOutput.innerText = `Dismissed with role: ${role}`;
+      });
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md
index 86cf3cb0b68..f8dfa701d1d 100644
--- a/static/usage/v7/toast/buttons/javascript.md
+++ b/static/usage/v7/toast/buttons/javascript.md
@@ -8,20 +8,24 @@
   const toast = document.querySelector('ion-toast');
   const handlerOutput = document.querySelector('#handlerResult');
   const roleOutput = document.querySelector('#roleResult');
-  
+
   toast.buttons = [
     {
       text: 'More Info',
       role: 'info',
-      handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+      handler: () => {
+        handlerOutput.innerText = 'More Info clicked';
+      },
     },
     {
       text: 'Dismiss',
       role: 'cancel',
-      handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
-    }
+      handler: () => {
+        handlerOutput.innerText = 'Dismiss clicked';
+      },
+    },
   ];
-  
+
   toast.addEventListener('ionToastDidDismiss', (ev) => {
     const { role } = ev.detail;
     roleOutput.innerText = `Dismissed with role: ${role}`;
diff --git a/static/usage/v7/toast/buttons/react.md b/static/usage/v7/toast/buttons/react.md
index fc8b603fa20..ac815c8c693 100644
--- a/static/usage/v7/toast/buttons/react.md
+++ b/static/usage/v7/toast/buttons/react.md
@@ -17,13 +17,17 @@ function Example() {
           {
             text: 'More Info',
             role: 'info',
-            handler: () => { setHandlerMessage('More Info clicked'); }
+            handler: () => {
+              setHandlerMessage('More Info clicked');
+            },
           },
           {
             text: 'Dismiss',
             role: 'cancel',
-            handler: () => { setHandlerMessage('Dismiss clicked'); }
-          }
+            handler: () => {
+              setHandlerMessage('Dismiss clicked');
+            },
+          },
         ]}
         onDidDismiss={(e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`)}
       ></IonToast>
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
index 3ae653988f6..3f0c0e87848 100644
--- a/static/usage/v7/toast/buttons/vue.md
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -3,8 +3,8 @@
   <ion-button id="open-toast">Open Toast</ion-button>
   <ion-toast
     trigger="open-toast"
-    message="Hello World!" 
-    :duration="3000" 
+    message="Hello World!"
+    :duration="3000"
     :buttons="toastButtons"
     @didDismiss="setRoleMessage($event)"
   ></ion-toast>
@@ -25,27 +25,31 @@
         {
           text: 'More Info',
           role: 'info',
-          handler: () => { handlerMessage.value = 'More Info clicked'; }
+          handler: () => {
+            handlerMessage.value = 'More Info clicked';
+          },
         },
         {
           text: 'Dismiss',
           role: 'cancel',
-          handler: () => { handlerMessage.value = 'Dismiss clicked'; }
-        }
-      ]
+          handler: () => {
+            handlerMessage.value = 'Dismiss clicked';
+          },
+        },
+      ];
       const setRoleMessage = (ev: CustomEvent) => {
-        const { role } = ev.detail
-        console.log('hi there')
+        const { role } = ev.detail;
+        console.log('hi there');
         roleMessage.value = `Dismissed with role: ${role}`;
-      }
-      
+      };
+
       return {
         handlerMessage,
         roleMessage,
         toastButtons,
-        setRoleMessage
-      }
-    }
+        setRoleMessage,
+      };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular.md
index 2dc76a51fa6..819a72c342f 100644
--- a/static/usage/v7/toast/icon/angular.md
+++ b/static/usage/v7/toast/icon/angular.md
@@ -1,4 +1,4 @@
 ```html
 <ion-button id="open-toast">Open Toast</ion-button>
 <ion-toast trigger="open-toast" message="Hello World!" [duration]="3000" icon="globe"></ion-toast>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/toast/icon/demo.html b/static/usage/v7/toast/icon/demo.html
index 39bff537544..3188b1e6272 100644
--- a/static/usage/v7/toast/icon/demo.html
+++ b/static/usage/v7/toast/icon/demo.html
@@ -1,30 +1,28 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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 id="open-toast">Open Toast</ion-button>
-        <ion-toast trigger="open-toast" message="Hello World!" duration="3000" icon="globe"></ion-toast>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toast</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-toast">Open Toast</ion-button>
+          <ion-toast trigger="open-toast" message="Hello World!" duration="3000" icon="globe"></ion-toast>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md
index 1418e06b870..aef5d5a8cc7 100644
--- a/static/usage/v7/toast/icon/index.md
+++ b/static/usage/v7/toast/icon/index.md
@@ -12,7 +12,7 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular
+    angular,
   }}
   src="usage/v7/toast/icon/demo.html"
 />
diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md
index 634f18e7ff5..223e37b3222 100644
--- a/static/usage/v7/toast/icon/vue.md
+++ b/static/usage/v7/toast/icon/vue.md
@@ -7,14 +7,14 @@
 <script lang="ts">
   import { IonButton, IonToast } from '@ionic/vue';
   import { globe } from 'ionicons/icons';
-  
+
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonButton, IonToast },
     setup() {
       return { globe };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/toast/inline/basic/demo.html b/static/usage/v7/toast/inline/basic/demo.html
index 7a1e5a193b0..ca80d1fd2a6 100644
--- a/static/usage/v7/toast/inline/basic/demo.html
+++ b/static/usage/v7/toast/inline/basic/demo.html
@@ -1,29 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Toast | Inline</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toast | Inline</title>
-  <link rel="stylesheet" href="../../../../common.css" />
-  <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Inline Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-toast" expand="block">Open</ion-button>
-      <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
-      <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" duration="5000"></ion-toast>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Inline Toast</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-toast" expand="block">Open</ion-button>
+        <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+        <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" duration="5000"></ion-toast>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md
index ad7f55c6e1e..aa61cab896b 100644
--- a/static/usage/v7/toast/inline/basic/index.md
+++ b/static/usage/v7/toast/inline/basic/index.md
@@ -11,7 +11,7 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular
+    angular,
   }}
   src="usage/v7/toast/inline/basic/demo.html"
   devicePreview
diff --git a/static/usage/v7/toast/inline/basic/react.md b/static/usage/v7/toast/inline/basic/react.md
index 898603a0516..0def9d5e178 100644
--- a/static/usage/v7/toast/inline/basic/react.md
+++ b/static/usage/v7/toast/inline/basic/react.md
@@ -1,14 +1,6 @@
 ```tsx
 import React from 'react';
-import {
-  IonButton,
-  IonHeader,
-  IonContent,
-  IonToolbar,
-  IonTitle,
-  IonPage,
-  IonToast,
-} from '@ionic/react';
+import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react';
 
 function Example() {
   return (
diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md
index 48c07b16d95..1b81018bcdb 100644
--- a/static/usage/v7/toast/inline/basic/vue.md
+++ b/static/usage/v7/toast/inline/basic/vue.md
@@ -13,14 +13,7 @@
 </template>
 
 <script lang="ts">
-  import {
-    IonButton,
-    IonHeader,
-    IonContent,
-    IonToolbar,
-    IonTitle,
-    IonToast,
-  } from '@ionic/vue';
+  import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonToast } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
diff --git a/static/usage/v7/toast/inline/is-open/demo.html b/static/usage/v7/toast/inline/is-open/demo.html
index 291d57158b1..5be1998b610 100644
--- a/static/usage/v7/toast/inline/is-open/demo.html
+++ b/static/usage/v7/toast/inline/is-open/demo.html
@@ -1,35 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Toast | Inline</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Toast | Inline</title>
-  <link rel="stylesheet" href="../../../../common.css" />
-  <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Inline Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button expand="block" onclick="toast.isOpen = true">Open</ion-button>
-      <ion-toast duration="5000" message="This toast will close in 5 seconds"></ion-toast>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const toast = document.querySelector('ion-toast');
-    toast.addEventListener('didDismiss', () => {
-      toast.isOpen = false;
-    });
-  </script>
-</body>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Inline Toast</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button expand="block" onclick="toast.isOpen = true">Open</ion-button>
+        <ion-toast duration="5000" message="This toast will close in 5 seconds"></ion-toast>
+      </ion-content>
+    </ion-app>
 
+    <script>
+      const toast = document.querySelector('ion-toast');
+      toast.addEventListener('didDismiss', () => {
+        toast.isOpen = false;
+      });
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/toast/inline/is-open/vue.md b/static/usage/v7/toast/inline/is-open/vue.md
index add4a0fe8b3..b1c9c88ffb1 100644
--- a/static/usage/v7/toast/inline/is-open/vue.md
+++ b/static/usage/v7/toast/inline/is-open/vue.md
@@ -7,7 +7,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-button expand="block" @click="setOpen(true)">Open</ion-button>
-    <ion-toast 
+    <ion-toast
       :is-open="isOpen"
       message="This toast will close in 5 seconds"
       :duration="5000"
@@ -29,7 +29,7 @@
       };
 
       return { isOpen, setOpen };
-    }
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
index 6f33423b8a5..2efa0572c4b 100644
--- a/static/usage/v7/toast/layout/angular/example_component_html.md
+++ b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -1,17 +1,17 @@
 ```html
 <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
 <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
-<ion-toast 
-  trigger="open-inline-toast" 
+<ion-toast
+  trigger="open-inline-toast"
   [duration]="3000"
   [buttons]="toastButtons"
   message="This is a toast with a long message and a button that appears on the same line."
 ></ion-toast>
 <ion-toast
-  trigger="open-stacked-toast" 
+  trigger="open-stacked-toast"
   [duration]="3000"
   [buttons]="toastButtons"
-  message="This is a toast with a long message and a button that appears on the next line." 
+  message="This is a toast with a long message and a button that appears on the next line."
   layout="stacked"
 ></ion-toast>
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
index 4070a210849..89c39c33323 100644
--- a/static/usage/v7/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -9,7 +9,7 @@ export class ExampleComponent {
   toastButtons = [
     {
       text: 'Action With Long Text',
-    }
+    },
   ];
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
index 9b66c2f2e13..4a19cd4157d 100644
--- a/static/usage/v7/toast/layout/demo.html
+++ b/static/usage/v7/toast/layout/demo.html
@@ -1,42 +1,49 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toast</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
+        <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
+        <ion-toast
+          trigger="open-stacked-toast"
+          duration="3000"
+          message="This is a toast with a long message and a button that appears on the next line."
+          layout="stacked"
+        ></ion-toast>
+        <ion-toast
+          trigger="open-inline-toast"
+          duration="3000"
+          message="This is a toast with a long message and a button that appears on the same line."
+        ></ion-toast>
+      </ion-content>
+    </ion-app>
 
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
-      <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
-      <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
-      <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const toasts = document.querySelectorAll('ion-toast');
-
-    toasts.forEach((toast) => {
-      toast.buttons = [
-        {
-          text: 'Action With Long Text',
-        },
-      ];
-    });
-  </script>
-</body>
+    <script>
+      const toasts = document.querySelectorAll('ion-toast');
 
+      toasts.forEach((toast) => {
+        toast.buttons = [
+          {
+            text: 'Action With Long Text',
+          },
+        ];
+      });
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md
index 1ac30c76931..6ae1998b02d 100644
--- a/static/usage/v7/toast/layout/javascript.md
+++ b/static/usage/v7/toast/layout/javascript.md
@@ -1,12 +1,21 @@
 ```html
 <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
 <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
-<ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
-<ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
+<ion-toast
+  trigger="open-inline-toast"
+  duration="3000"
+  message="This is a toast with a long message and a button that appears on the same line."
+></ion-toast>
+<ion-toast
+  trigger="open-stacked-toast"
+  duration="3000"
+  message="This is a toast with a long message and a button that appears on the next line."
+  layout="stacked"
+></ion-toast>
 
 <script>
   const toasts = document.querySelectorAll('ion-toast');
-  
+
   toasts.forEach((toast) => {
     toast.buttons = [
       {
diff --git a/static/usage/v7/toast/layout/react.md b/static/usage/v7/toast/layout/react.md
index f760997bf69..51b71342b6b 100644
--- a/static/usage/v7/toast/layout/react.md
+++ b/static/usage/v7/toast/layout/react.md
@@ -14,7 +14,7 @@ function Example() {
         buttons={[
           {
             text: 'Action With Long Text',
-          }
+          },
         ]}
       ></IonToast>
       <IonToast
@@ -24,7 +24,7 @@ function Example() {
         buttons={[
           {
             text: 'Action With Long Text',
-          }
+          },
         ]}
         layout="stacked"
       ></IonToast>
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
index bbd103574c3..18f11de56c3 100644
--- a/static/usage/v7/toast/layout/vue.md
+++ b/static/usage/v7/toast/layout/vue.md
@@ -2,17 +2,17 @@
 <template>
   <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
   <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
-  <ion-toast 
-    trigger="open-inline-toast" 
+  <ion-toast
+    trigger="open-inline-toast"
     :duration="3000"
     :buttons="toastButtons"
     message="This is a toast with a long message and a button that appears on the same line."
   ></ion-toast>
   <ion-toast
-    trigger="open-stacked-toast" 
+    trigger="open-stacked-toast"
     :duration="3000"
     :buttons="toastButtons"
-    message="This is a toast with a long message and a button that appears on the next line." 
+    message="This is a toast with a long message and a button that appears on the next line."
     layout="stacked"
   ></ion-toast>
 </template>
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
index 962fcd0e355..2ed1eea0254 100644
--- a/static/usage/v7/toast/presenting/controller/angular/example_component_html.md
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_html.md
@@ -2,4 +2,4 @@
 <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
index c772728c3c1..db133a99f1e 100644
--- a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
@@ -13,10 +13,10 @@ export class ExampleComponent {
     const toast = await this.toastController.create({
       message: 'Hello World!',
       duration: 1500,
-      position: position
+      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
index df07f510890..f388a0167ff 100644
--- a/static/usage/v7/toast/presenting/controller/demo.html
+++ b/static/usage/v7/toast/presenting/controller/demo.html
@@ -1,54 +1,52 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-direction: column;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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@7/dist/ionic/index.esm.js';
+      window.toastController = toastController;
+    </script>
 
-  <script type="module">
-    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/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,
+        });
 
-  <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
+        await toast.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/toast/presenting/controller/javascript.md b/static/usage/v7/toast/presenting/controller/javascript.md
index 5260ba8d1a1..52c089331fa 100644
--- a/static/usage/v7/toast/presenting/controller/javascript.md
+++ b/static/usage/v7/toast/presenting/controller/javascript.md
@@ -8,7 +8,7 @@
     const toast = await this.toastController.create({
       message: 'Hello World!',
       duration: 1500,
-      position: position
+      position: position,
     });
 
     await toast.present();
diff --git a/static/usage/v7/toast/presenting/controller/react.md b/static/usage/v7/toast/presenting/controller/react.md
index 1dd38b3cd48..b4e8d0913ca 100644
--- a/static/usage/v7/toast/presenting/controller/react.md
+++ b/static/usage/v7/toast/presenting/controller/react.md
@@ -9,15 +9,21 @@ function Example() {
     present({
       message: 'Hello World!',
       duration: 1500,
-      position: position
+      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>
+      <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>
     </>
   );
 }
diff --git a/static/usage/v7/toast/presenting/controller/vue.md b/static/usage/v7/toast/presenting/controller/vue.md
index ac520d0e7b9..7f2ade91031 100644
--- a/static/usage/v7/toast/presenting/controller/vue.md
+++ b/static/usage/v7/toast/presenting/controller/vue.md
@@ -15,7 +15,7 @@
         const toast = await toastController.create({
           message: 'Hello World!',
           duration: 1500,
-          position: position
+          position: position,
         });
 
         await toast.present();
diff --git a/static/usage/v7/toast/theming/angular/example_component_html.md b/static/usage/v7/toast/theming/angular/example_component_html.md
index 840cca6e877..b51350a3b63 100644
--- a/static/usage/v7/toast/theming/angular/example_component_html.md
+++ b/static/usage/v7/toast/theming/angular/example_component_html.md
@@ -1,4 +1,10 @@
 ```html
 <ion-button id="open-toast">Open Toast</ion-button>
-<ion-toast trigger="open-toast" [duration]="3000" message="Hello Styled World!" class="custom-toast" [buttons]="toastButtons"></ion-toast>
+<ion-toast
+  trigger="open-toast"
+  [duration]="3000"
+  message="Hello Styled World!"
+  class="custom-toast"
+  [buttons]="toastButtons"
+></ion-toast>
 ```
diff --git a/static/usage/v7/toast/theming/angular/example_component_ts.md b/static/usage/v7/toast/theming/angular/example_component_ts.md
index 336df2a14a9..361391ca546 100644
--- a/static/usage/v7/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v7/toast/theming/angular/example_component_ts.md
@@ -9,8 +9,8 @@ export class ExampleComponent {
   public toastButtons = [
     {
       text: 'Dismiss',
-      role: 'cancel'
-    }
+      role: 'cancel',
+    },
   ];
 
   constructor() {}
diff --git a/static/usage/v7/toast/theming/angular/global_css.md b/static/usage/v7/toast/theming/angular/global_css.md
index 4d261622074..70ef6f5cfd6 100644
--- a/static/usage/v7/toast/theming/angular/global_css.md
+++ b/static/usage/v7/toast/theming/angular/global_css.md
@@ -1,10 +1,10 @@
 ```css
 ion-toast.custom-toast {
-  --background: #F4F4FA;
+  --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;
 }
@@ -14,4 +14,4 @@ ion-toast.custom-toast::part(button) {
   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
index 8fa80d50736..7a9d89b4a63 100644
--- a/static/usage/v7/toast/theming/demo.html
+++ b/static/usage/v7/toast/theming/demo.html
@@ -1,58 +1,61 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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>
+    <style>
+      ion-toast.custom-toast {
+        --background: #f4f4fa;
+        --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+        --color: #4b4a50;
+      }
 
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Toast</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <div class="container">
-        <ion-button id="open-toast">Open Toast</ion-button>
-        <ion-toast trigger="open-toast" duration="3000" message="Hello Styled World!" class="custom-toast"></ion-toast>
-      </div>
-    </ion-content>
-  </ion-app>
+      ion-toast.custom-toast::part(message) {
+        font-style: italic;
+      }
 
-  <script>
-    const toast = document.querySelector('ion-toast');
-    toast.buttons = [
-      {
-        text: 'Dismiss',
-        role: 'cancel'
+      ion-toast.custom-toast::part(button) {
+        border-left: 1px solid #d2d2d2;
+        color: #030207;
+        font-size: 15px;
       }
-    ];
-  </script>
-</body>
+    </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 id="open-toast">Open Toast</ion-button>
+          <ion-toast
+            trigger="open-toast"
+            duration="3000"
+            message="Hello Styled World!"
+            class="custom-toast"
+          ></ion-toast>
+        </div>
+      </ion-content>
+    </ion-app>
 
+    <script>
+      const toast = document.querySelector('ion-toast');
+      toast.buttons = [
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+        },
+      ];
+    </script>
+  </body>
 </html>
diff --git a/static/usage/v7/toast/theming/javascript.md b/static/usage/v7/toast/theming/javascript.md
index 9da97b92b4c..9d0addc910e 100644
--- a/static/usage/v7/toast/theming/javascript.md
+++ b/static/usage/v7/toast/theming/javascript.md
@@ -7,18 +7,18 @@
   toast.buttons = [
     {
       text: 'Dismiss',
-      role: 'cancel'
-    }
+      role: 'cancel',
+    },
   ];
 </script>
 
 <style>
   ion-toast.custom-toast {
-    --background: #F4F4FA;
+    --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;
   }
diff --git a/static/usage/v7/toast/theming/react/main_css.md b/static/usage/v7/toast/theming/react/main_css.md
index 4d261622074..70ef6f5cfd6 100644
--- a/static/usage/v7/toast/theming/react/main_css.md
+++ b/static/usage/v7/toast/theming/react/main_css.md
@@ -1,10 +1,10 @@
 ```css
 ion-toast.custom-toast {
-  --background: #F4F4FA;
+  --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;
 }
@@ -14,4 +14,4 @@ ion-toast.custom-toast::part(button) {
   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
index b31953021ca..9d7c084e5c7 100644
--- a/static/usage/v7/toast/theming/react/main_tsx.md
+++ b/static/usage/v7/toast/theming/react/main_tsx.md
@@ -9,17 +9,17 @@ function Example() {
     <>
       <IonButton id="open-toast">Open Toast</IonButton>
       <IonToast
-        trigger="open-toast" 
+        trigger="open-toast"
         duration={3000}
         message="Hello Styled World!"
         class="custom-toast"
         buttons={[
           {
             text: 'Dismiss',
-            role: 'cancel'
-          }
-        ]}>
-      </IonToast>
+            role: 'cancel',
+          },
+        ]}
+      ></IonToast>
     </>
   );
 }
diff --git a/static/usage/v7/toast/theming/vue.md b/static/usage/v7/toast/theming/vue.md
index 14a6b0c1e3b..264e4b1ee57 100644
--- a/static/usage/v7/toast/theming/vue.md
+++ b/static/usage/v7/toast/theming/vue.md
@@ -1,7 +1,13 @@
 ```html
 <template>
   <ion-button id="open-toast">Open Toast</ion-button>
-  <ion-toast trigger="open-toast" :duration="3000" message="Hello Styled World!" class="custom-toast" :buttons="toastButtons"></ion-toast>
+  <ion-toast
+    trigger="open-toast"
+    :duration="3000"
+    message="Hello Styled World!"
+    class="custom-toast"
+    :buttons="toastButtons"
+  ></ion-toast>
 </template>
 
 <script lang="ts">
@@ -13,22 +19,22 @@
       const toastButtons = [
         {
           text: 'Dismiss',
-          role: 'cancel'
-        }
+          role: 'cancel',
+        },
       ];
-      
+
       return { toastButtons };
-    }
+    },
   };
 </script>
 
 <style>
   ion-toast.custom-toast {
-    --background: #F4F4FA;
+    --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;
   }
diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html
index 6e2147fe50d..8119095fad9 100644
--- a/static/usage/v7/toggle/basic/demo.html
+++ b/static/usage/v7/toggle/basic/demo.html
@@ -1,29 +1,27 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div>
-          <ion-toggle>Default Toggle</ion-toggle><br /><br />
-          <ion-toggle checked="true">Checked Toggle</ion-toggle><br /><br />
-          <ion-toggle disabled="true">Disabled Toggle</ion-toggle><br /><br />
-          <ion-toggle checked="true" disabled="true">Disabled Checked Toggle</ion-toggle>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div>
+            <ion-toggle>Default Toggle</ion-toggle><br /><br />
+            <ion-toggle checked="true">Checked Toggle</ion-toggle><br /><br />
+            <ion-toggle disabled="true">Disabled Toggle</ion-toggle><br /><br />
+            <ion-toggle checked="true" disabled="true">Disabled Checked Toggle</ion-toggle>
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toggle/basic/react.md b/static/usage/v7/toggle/basic/react.md
index c46130e97bc..7783c45d747 100644
--- a/static/usage/v7/toggle/basic/react.md
+++ b/static/usage/v7/toggle/basic/react.md
@@ -5,10 +5,18 @@ import { IonToggle } from '@ionic/react';
 function Example() {
   return (
     <>
-      <IonToggle>Default Toggle</IonToggle><br /><br />
-      <IonToggle checked={true}>Checked Toggle</IonToggle><br /><br />
-      <IonToggle disabled={true}>Disabled Toggle</IonToggle><br /><br />
-      <IonToggle checked={true} disabled={true}>Disabled Checked Toggle</IonToggle>
+      <IonToggle>Default Toggle</IonToggle>
+      <br />
+      <br />
+      <IonToggle checked={true}>Checked Toggle</IonToggle>
+      <br />
+      <br />
+      <IonToggle disabled={true}>Disabled Toggle</IonToggle>
+      <br />
+      <br />
+      <IonToggle checked={true} disabled={true}>
+        Disabled Checked Toggle
+      </IonToggle>
     </>
   );
 }
diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html
index cb14e211de2..c6c5d20a2dd 100644
--- a/static/usage/v7/toggle/justify/demo.html
+++ b/static/usage/v7/toggle/justify/demo.html
@@ -1,40 +1,38 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-list {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
-          </ion-item>
-          <ion-item>
-            <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
-          </ion-item>
-          <ion-item>
-            <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
 
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html
index 133f8eb7c3a..915b4677bc9 100644
--- a/static/usage/v7/toggle/label-placement/demo.html
+++ b/static/usage/v7/toggle/label-placement/demo.html
@@ -1,28 +1,26 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <div>
-          <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
-          <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
-          <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div>
+            <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
+            <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
+            <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toggle/label-placement/react.md b/static/usage/v7/toggle/label-placement/react.md
index 3cbba667587..57940403843 100644
--- a/static/usage/v7/toggle/label-placement/react.md
+++ b/static/usage/v7/toggle/label-placement/react.md
@@ -5,9 +5,15 @@ import { IonToggle } from '@ionic/react';
 function Example() {
   return (
     <>
-      <IonToggle labelPlacement="start">Label at the Start</IonToggle><br /><br />
-      <IonToggle labelPlacement="end">Label at the End</IonToggle><br /><br />
-      <IonToggle labelPlacement="fixed">Fixed Width Label</IonToggle><br /><br />
+      <IonToggle labelPlacement="start">Label at the Start</IonToggle>
+      <br />
+      <br />
+      <IonToggle labelPlacement="end">Label at the End</IonToggle>
+      <br />
+      <br />
+      <IonToggle labelPlacement="fixed">Fixed Width Label</IonToggle>
+      <br />
+      <br />
     </>
   );
 }
diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html
index d536a146946..142e9535fa4 100644
--- a/static/usage/v7/toggle/list/demo.html
+++ b/static/usage/v7/toggle/list/demo.html
@@ -1,35 +1,32 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-list>
-          <ion-item>
-            <ion-toggle>Receive Push Notifications</ion-toggle>
-          </ion-item>
-          <ion-item>
-            <ion-toggle>Receive Emails</ion-toggle>
-          </ion-item>
-          <ion-item>
-            <ion-toggle>Receive Text Messages</ion-toggle>
-          </ion-item>
-        </ion-list>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-toggle>Receive Push Notifications</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle>Receive Emails</ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle>Receive Text Messages</ion-toggle>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html
index af44c9c2b86..ef282c19bb5 100644
--- a/static/usage/v7/toggle/on-off/demo.html
+++ b/static/usage/v7/toggle/on-off/demo.html
@@ -1,25 +1,22 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toggle enable-on-off-labels="true">Enable Notifications</ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-toggle enable-on-off-labels="true">Enable Notifications</ion-toggle>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toggle/on-off/react.md b/static/usage/v7/toggle/on-off/react.md
index d1a2da3f651..321e55187d5 100644
--- a/static/usage/v7/toggle/on-off/react.md
+++ b/static/usage/v7/toggle/on-off/react.md
@@ -3,9 +3,7 @@ import React from 'react';
 import { IonToggle } from '@ionic/react';
 
 function Example() {
-  return (
-    <IonToggle enableOnOffLabels={true}>Enable Notifications</IonToggle>
-  );
+  return <IonToggle enableOnOffLabels={true}>Enable Notifications</IonToggle>;
 }
 export default Example;
 ```
diff --git a/static/usage/v7/toggle/theming/colors/demo.html b/static/usage/v7/toggle/theming/colors/demo.html
index 9ee17e3bdc4..2b5f355d32f 100644
--- a/static/usage/v7/toggle/theming/colors/demo.html
+++ b/static/usage/v7/toggle/theming/colors/demo.html
@@ -1,33 +1,30 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toggle aria-label="Primary toggle" color="primary" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Secondary toggle" color="secondary" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Tertiary toggle" color="tertiary" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Success toggle" color="success" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Warning toggle" color="warning" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Danger toggle" color="danger" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Light toggle" color="light" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Medium toggle" color="medium" checked="true"></ion-toggle>
-        <ion-toggle aria-label="Dark toggle" color="dark" checked="true"></ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-toggle aria-label="Primary toggle" color="primary" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Secondary toggle" color="secondary" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Tertiary toggle" color="tertiary" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Success toggle" color="success" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Warning toggle" color="warning" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Danger toggle" color="danger" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Light toggle" color="light" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Medium toggle" color="medium" checked="true"></ion-toggle>
+          <ion-toggle aria-label="Dark toggle" color="dark" checked="true"></ion-toggle>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html
index 7cb99b40e56..3c547a4e8d2 100644
--- a/static/usage/v7/toggle/theming/css-properties/demo.html
+++ b/static/usage/v7/toggle/theming/css-properties/demo.html
@@ -1,52 +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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-toggle {
-      padding: 12px;
-
-      --track-background: #ddd;
-      --track-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;
-    }
-
-    ion-toggle::part(track) {
-      height: 10px;
-      width: 65px;
-
-      overflow: visible;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-content>
-      <div class="container">
-        <ion-toggle aria-label="Enable Notifications"></ion-toggle>
-        <ion-toggle checked="true" aria-label="Enable Notifications"></ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-toggle {
+        padding: 12px;
+
+        --track-background: #ddd;
+        --track-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;
+      }
+
+      ion-toggle::part(track) {
+        height: 10px;
+        width: 65px;
+
+        overflow: visible;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-toggle aria-label="Enable Notifications"></ion-toggle>
+          <ion-toggle checked="true" aria-label="Enable Notifications"></ion-toggle>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toggle/theming/css-properties/javascript.md b/static/usage/v7/toggle/theming/css-properties/javascript.md
index 5483235b4c5..3bc34c3949d 100644
--- a/static/usage/v7/toggle/theming/css-properties/javascript.md
+++ b/static/usage/v7/toggle/theming/css-properties/javascript.md
@@ -5,26 +5,26 @@
 <style>
   ion-toggle {
     padding: 12px;
-  
+
     --track-background: #ddd;
     --track-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;
   }
-  
+
   ion-toggle::part(track) {
     height: 10px;
     width: 65px;
-  
+
     /* Required for iOS handle to overflow the height of the track */
     overflow: visible;
   }
diff --git a/static/usage/v7/toggle/theming/css-properties/vue.md b/static/usage/v7/toggle/theming/css-properties/vue.md
index e546b97d1a3..ce78a13989a 100644
--- a/static/usage/v7/toggle/theming/css-properties/vue.md
+++ b/static/usage/v7/toggle/theming/css-properties/vue.md
@@ -16,26 +16,26 @@
 <style scoped>
   ion-toggle {
     padding: 12px;
-  
+
     --track-background: #ddd;
     --track-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;
   }
-  
+
   ion-toggle::part(track) {
     height: 10px;
     width: 65px;
-  
+
     /* Required for iOS handle to overflow the height of the track */
     overflow: visible;
   }
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
index d1daaa4698c..565a90f61a1 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
@@ -1,60 +1,58 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-  <style>
-    ion-toggle {
-      padding: 12px;
-
-      --handle-width: 25px;
-      --handle-height: 27px;
-      --handle-max-height: auto;
-      --handle-spacing: 6px;
-
-      contain: none;
-    }
-
-    ion-toggle::part(track),
-    ion-toggle.toggle-checked::part(track) {
-      height: 10px;
-      width: 65px;
-
-      background: #ddd;
-
-      /* Required for iOS handle to overflow the height of the track */
-      overflow: visible;
-    }
-
-    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 aria-label="Enable Notifications"></ion-toggle>
-        <ion-toggle checked="true" aria-label="Enable Notifications"></ion-toggle>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+  <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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-toggle {
+        padding: 12px;
+
+        --handle-width: 25px;
+        --handle-height: 27px;
+        --handle-max-height: auto;
+        --handle-spacing: 6px;
+
+        contain: none;
+      }
+
+      ion-toggle::part(track),
+      ion-toggle.toggle-checked::part(track) {
+        height: 10px;
+        width: 65px;
+
+        background: #ddd;
+
+        /* Required for iOS handle to overflow the height of the track */
+        overflow: visible;
+      }
+
+      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 aria-label="Enable Notifications"></ion-toggle>
+          <ion-toggle checked="true" aria-label="Enable Notifications"></ion-toggle>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
 </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
index 3329f6b386c..6f7c7b435c6 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
@@ -5,22 +5,22 @@
 <style>
   ion-toggle {
     padding: 12px;
-  
+
     --handle-width: 25px;
     --handle-height: 27px;
     --handle-max-height: auto;
     --handle-spacing: 6px;
-  
+
     contain: none;
   }
-  
+
   ion-toggle::part(track),
   ion-toggle.toggle-checked::part(track) {
     height: 10px;
     width: 65px;
-  
+
     background: #ddd;
-  
+
     /* Required for iOS handle to overflow the height of the track */
     overflow: visible;
   }
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
index a62511001cd..cdced277639 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
@@ -16,22 +16,22 @@
 <style scoped>
   ion-toggle {
     padding: 12px;
-  
+
     --handle-width: 25px;
     --handle-height: 27px;
     --handle-max-height: auto;
     --handle-spacing: 6px;
-  
+
     contain: none;
   }
-  
+
   ion-toggle::part(track),
   ion-toggle.toggle-checked::part(track) {
     height: 10px;
     width: 65px;
-  
+
     background: #ddd;
-  
+
     /* Required for iOS handle to overflow the height of the track */
     overflow: visible;
   }
diff --git a/static/usage/v7/toolbar/basic/demo.html b/static/usage/v7/toolbar/basic/demo.html
index 5f1879bee39..b89c32302e3 100644
--- a/static/usage/v7/toolbar/basic/demo.html
+++ b/static/usage/v7/toolbar/basic/demo.html
@@ -1,31 +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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Header Toolbar</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-</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
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer Toolbar</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/toolbar/buttons/angular.md b/static/usage/v7/toolbar/buttons/angular.md
index ceafe115821..18a54554a1b 100644
--- a/static/usage/v7/toolbar/buttons/angular.md
+++ b/static/usage/v7/toolbar/buttons/angular.md
@@ -1,28 +1,20 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="start">
-    <ion-button>
-      Start
-    </ion-button>
+    <ion-button> Start </ion-button>
   </ion-buttons>
   <ion-title>Start / End Buttons</ion-title>
   <ion-buttons slot="end">
-    <ion-button>
-      End
-    </ion-button>
+    <ion-button> End </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button>
-      Secondary
-    </ion-button>
+    <ion-button> Secondary </ion-button>
   </ion-buttons>
   <ion-buttons slot="primary">
-    <ion-button>
-      Primary
-    </ion-button>
+    <ion-button> Primary </ion-button>
   </ion-buttons>
   <ion-title>Primary / Secondary Buttons</ion-title>
 </ion-toolbar>
diff --git a/static/usage/v7/toolbar/buttons/demo.html b/static/usage/v7/toolbar/buttons/demo.html
index d5d62d9c486..25781e21d5c 100644
--- a/static/usage/v7/toolbar/buttons/demo.html
+++ b/static/usage/v7/toolbar/buttons/demo.html
@@ -1,120 +1,110 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
+      }
+    </style>
+  </head>
 
-  <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>
 
-<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>
-              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>
-              <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="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="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-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
+          <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/v7/toolbar/buttons/javascript.md b/static/usage/v7/toolbar/buttons/javascript.md
index ceafe115821..18a54554a1b 100644
--- a/static/usage/v7/toolbar/buttons/javascript.md
+++ b/static/usage/v7/toolbar/buttons/javascript.md
@@ -1,28 +1,20 @@
 ```html
 <ion-toolbar>
   <ion-buttons slot="start">
-    <ion-button>
-      Start
-    </ion-button>
+    <ion-button> Start </ion-button>
   </ion-buttons>
   <ion-title>Start / End Buttons</ion-title>
   <ion-buttons slot="end">
-    <ion-button>
-      End
-    </ion-button>
+    <ion-button> End </ion-button>
   </ion-buttons>
 </ion-toolbar>
 
 <ion-toolbar>
   <ion-buttons slot="secondary">
-    <ion-button>
-      Secondary
-    </ion-button>
+    <ion-button> Secondary </ion-button>
   </ion-buttons>
   <ion-buttons slot="primary">
-    <ion-button>
-      Primary
-    </ion-button>
+    <ion-button> Primary </ion-button>
   </ion-buttons>
   <ion-title>Primary / Secondary Buttons</ion-title>
 </ion-toolbar>
diff --git a/static/usage/v7/toolbar/buttons/react.md b/static/usage/v7/toolbar/buttons/react.md
index ff7736981f0..a8ed785db82 100644
--- a/static/usage/v7/toolbar/buttons/react.md
+++ b/static/usage/v7/toolbar/buttons/react.md
@@ -8,28 +8,20 @@ function Example() {
     <>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonButton>
-            Start
-          </IonButton>
+          <IonButton>Start</IonButton>
         </IonButtons>
         <IonTitle>Start / End Buttons</IonTitle>
         <IonButtons slot="end">
-          <IonButton>
-            End
-          </IonButton>
+          <IonButton>End</IonButton>
         </IonButtons>
       </IonToolbar>
 
       <IonToolbar>
         <IonButtons slot="secondary">
-          <IonButton>
-            Secondary
-          </IonButton>
+          <IonButton>Secondary</IonButton>
         </IonButtons>
         <IonButtons slot="primary">
-          <IonButton>
-            Primary
-          </IonButton>
+          <IonButton>Primary</IonButton>
         </IonButtons>
         <IonTitle>Primary / Secondary Buttons</IonTitle>
       </IonToolbar>
diff --git a/static/usage/v7/toolbar/buttons/vue.md b/static/usage/v7/toolbar/buttons/vue.md
index 388760dcd9f..68091a20771 100644
--- a/static/usage/v7/toolbar/buttons/vue.md
+++ b/static/usage/v7/toolbar/buttons/vue.md
@@ -2,28 +2,20 @@
 <template>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button>
-        Start
-      </ion-button>
+      <ion-button> Start </ion-button>
     </ion-buttons>
     <ion-title>Start / End Buttons</ion-title>
     <ion-buttons slot="end">
-      <ion-button>
-        End
-      </ion-button>
+      <ion-button> End </ion-button>
     </ion-buttons>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons slot="secondary">
-      <ion-button>
-        Secondary
-      </ion-button>
+      <ion-button> Secondary </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
-      <ion-button>
-        Primary
-      </ion-button>
+      <ion-button> Primary </ion-button>
     </ion-buttons>
     <ion-title>Primary / Secondary Buttons</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v7/toolbar/progress-bars/demo.html b/static/usage/v7/toolbar/progress-bars/demo.html
index 7f7aebd9cff..14b8713fa06 100644
--- a/static/usage/v7/toolbar/progress-bars/demo.html
+++ b/static/usage/v7/toolbar/progress-bars/demo.html
@@ -1,26 +1,23 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/toolbar/searchbars/demo.html b/static/usage/v7/toolbar/searchbars/demo.html
index c1dcdd42359..0a5f9a78328 100644
--- a/static/usage/v7/toolbar/searchbars/demo.html
+++ b/static/usage/v7/toolbar/searchbars/demo.html
@@ -1,28 +1,25 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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
+  <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/v7/toolbar/segments/demo.html b/static/usage/v7/toolbar/segments/demo.html
index b240baa1386..b4ee0cd2238 100644
--- a/static/usage/v7/toolbar/segments/demo.html
+++ b/static/usage/v7/toolbar/segments/demo.html
@@ -1,32 +1,29 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-segment value="all">
-          <ion-segment-button value="all">
-            <ion-label>All</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="favorites">
-            <ion-label>Favorites</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-header>
-  </ion-app>
-</body>
-
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-segment value="all">
+            <ion-segment-button value="all">
+              <ion-label>All</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="favorites">
+              <ion-label>Favorites</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-header>
+    </ion-app>
+  </body>
 </html>
diff --git a/static/usage/v7/toolbar/theming/colors/demo.html b/static/usage/v7/toolbar/theming/colors/demo.html
index c3c87cd738d..3705e6fdef4 100644
--- a/static/usage/v7/toolbar/theming/colors/demo.html
+++ b/static/usage/v7/toolbar/theming/colors/demo.html
@@ -1,60 +1,58 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
+      }
+    </style>
+  </head>
 
-  <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
+  <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/v7/toolbar/theming/css-properties/demo.html b/static/usage/v7/toolbar/theming/css-properties/demo.html
index 700f63f501d..f512df855e0 100644
--- a/static/usage/v7/toolbar/theming/css-properties/demo.html
+++ b/static/usage/v7/toolbar/theming/css-properties/demo.html
@@ -1,46 +1,44 @@
 <!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
-<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@7/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      .container {
+        flex-flow: column;
+        justify-content: space-evenly;
+      }
 
-  <style>
-    .container {
-      flex-flow: column;
-      justify-content: space-evenly;
-    }
+      ion-toolbar {
+        --background: #19422d;
+        --color: white;
 
-    ion-toolbar {
-      --background: #19422d;
-      --color: white;
+        --border-color: #f24aec;
+        --border-width: 4px 0;
+        --border-style: double;
 
-      --border-color: #f24aec;
-      --border-width: 4px 0;
-      --border-style: double;
+        --min-height: 80px;
+        --padding-top: 20px;
+        --padding-bottom: 20px;
+      }
+    </style>
+  </head>
 
-      --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
+  <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/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.md
index 0634078f29d..57be7698f6a 100644
--- a/versioned_docs/version-v5/api/item.md
+++ b/versioned_docs/version-v5/api/item.md
@@ -1033,17 +1033,13 @@ export class ItemExample {
         <ion-item>
           <ion-label>Item</ion-label>
         </ion-item>
-        ,
-        <ion-item lines="none">
+        ,<ion-item lines="none">
           <ion-label>No Lines Item</ion-label>
-        </ion-item>
-        ,
-        <ion-item>
+        </ion-item>,<ion-item>
           <ion-label class="ion-text-wrap">
             Multiline text that should wrap when it is too long to fit on one line in the item.
           </ion-label>
-        </ion-item>
-        ,
+        </ion-item>,
         <ion-item>
           <ion-label class="ion-text-wrap">
             <ion-text color="primary">
diff --git a/versioned_docs/version-v5/api/select.md b/versioned_docs/version-v5/api/select.md
index 948cc4ba0f2..4cef9b394d1 100644
--- a/versioned_docs/version-v5/api/select.md
+++ b/versioned_docs/version-v5/api/select.md
@@ -769,7 +769,7 @@ const users = [
   },
 ];
 
-type User = typeof users[number];
+type User = (typeof users)[number];
 
 const compareWith = (o1: User, o2: User) => {
   return o1 && o2 ? o1.id === o2.id : o1 === o2;
diff --git a/versioned_docs/version-v5/native/abbyy-rtr.md b/versioned_docs/version-v5/native/abbyy-rtr.md
index 087c66e3e72..40711028f9a 100644
--- a/versioned_docs/version-v5/native/abbyy-rtr.md
+++ b/versioned_docs/version-v5/native/abbyy-rtr.md
@@ -52,12 +52,14 @@ ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-abbyy-rtr-sdk {'\n'}$ npm install @awesome-cordova-plugins/abbyy-rtr {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-abbyy-rtr-sdk {'\n'}$ npm install @awesome-cordova-plugins/abbyy-rtr {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-abbyy-rtr-sdk {'\n'}$ npm install @awesome-cordova-plugins/abbyy-rtr {'\n'}
+      $ ionic cordova plugin add cordova-plugin-abbyy-rtr-sdk {'\n'}$ npm install @awesome-cordova-plugins/abbyy-rtr{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/action-sheet.md b/versioned_docs/version-v5/native/action-sheet.md
index f4946f5dff0..f5c874965cd 100644
--- a/versioned_docs/version-v5/native/action-sheet.md
+++ b/versioned_docs/version-v5/native/action-sheet.md
@@ -58,12 +58,14 @@ Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-actionsheet {'\n'}$ npm install @awesome-cordova-plugins/action-sheet {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-actionsheet {'\n'}$ npm install @awesome-cordova-plugins/action-sheet {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-actionsheet {'\n'}$ npm install @awesome-cordova-plugins/action-sheet {'\n'}
+      $ ionic cordova plugin add cordova-plugin-actionsheet {'\n'}$ npm install @awesome-cordova-plugins/action-sheet{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/aes-256.md b/versioned_docs/version-v5/native/aes-256.md
index 5ab37a3b1e6..779b205a568 100644
--- a/versioned_docs/version-v5/native/aes-256.md
+++ b/versioned_docs/version-v5/native/aes-256.md
@@ -53,12 +53,14 @@ The encryption and decryption are performed on the device native layer so that t
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-aes256-encryption {'\n'}$ npm install @awesome-cordova-plugins/aes-256 {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-aes256-encryption {'\n'}$ npm install @awesome-cordova-plugins/aes-256 {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-aes256-encryption {'\n'}$ npm install @awesome-cordova-plugins/aes-256 {'\n'}
+      $ ionic cordova plugin add cordova-plugin-aes256-encryption {'\n'}$ npm install @awesome-cordova-plugins/aes-256{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/all-in-one-sdk.md b/versioned_docs/version-v5/native/all-in-one-sdk.md
index f11facc83d0..6dfb2c7b682 100644
--- a/versioned_docs/version-v5/native/all-in-one-sdk.md
+++ b/versioned_docs/version-v5/native/all-in-one-sdk.md
@@ -59,12 +59,14 @@ For more information about Paytm All-in-One SDK, please visit https://developer.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-paytm-allinonesdk {'\n'}$ npm install @awesome-cordova-plugins/all-in-one-sdk {'\n'}$ ionic cap sync
+      $ npm install cordova-paytm-allinonesdk {'\n'}$ npm install @awesome-cordova-plugins/all-in-one-sdk {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-paytm-allinonesdk {'\n'}$ npm install @awesome-cordova-plugins/all-in-one-sdk {'\n'}
+      $ ionic cordova plugin add cordova-paytm-allinonesdk {'\n'}$ npm install @awesome-cordova-plugins/all-in-one-sdk{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/analytics-firebase.md b/versioned_docs/version-v5/native/analytics-firebase.md
index 22a483020ce..cde93bc783a 100644
--- a/versioned_docs/version-v5/native/analytics-firebase.md
+++ b/versioned_docs/version-v5/native/analytics-firebase.md
@@ -51,12 +51,14 @@ Google Analytics Firebase plugin for Ionic Native apps.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-analytics {'\n'}$ npm install @awesome-cordova-plugins/analytics-firebase {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-analytics {'\n'}$ npm install @awesome-cordova-plugins/analytics-firebase {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-analytics {'\n'}$ npm install @awesome-cordova-plugins/analytics-firebase {'\n'}
+      $ ionic cordova plugin add cordova-plugin-analytics {'\n'}$ npm install
+      @awesome-cordova-plugins/analytics-firebase {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/android-exoplayer.md b/versioned_docs/version-v5/native/android-exoplayer.md
index 8d62a3a79a8..25bcd1edcd9 100644
--- a/versioned_docs/version-v5/native/android-exoplayer.md
+++ b/versioned_docs/version-v5/native/android-exoplayer.md
@@ -53,12 +53,14 @@ https://github.com/google/ExoPlayer
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-exoplayer {'\n'}$ npm install @awesome-cordova-plugins/android-exoplayer {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-exoplayer {'\n'}$ npm install @awesome-cordova-plugins/android-exoplayer {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-exoplayer {'\n'}$ npm install @awesome-cordova-plugins/android-exoplayer {'\n'}
+      $ ionic cordova plugin add cordova-plugin-exoplayer {'\n'}$ npm install @awesome-cordova-plugins/android-exoplayer{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/android-full-screen.md b/versioned_docs/version-v5/native/android-full-screen.md
index a743922a515..e5bb778c0a0 100644
--- a/versioned_docs/version-v5/native/android-full-screen.md
+++ b/versioned_docs/version-v5/native/android-full-screen.md
@@ -58,13 +58,14 @@ In Android 4.4+, however, you can now enter true full screen, fully interactive
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-fullscreen {'\n'}$ npm install @awesome-cordova-plugins/android-full-screen {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-fullscreen {'\n'}$ npm install @awesome-cordova-plugins/android-full-screen {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-fullscreen {'\n'}$ npm install @awesome-cordova-plugins/android-full-screen {'\n'}
+      $ ionic cordova plugin add cordova-plugin-fullscreen {'\n'}$ npm install
+      @awesome-cordova-plugins/android-full-screen {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/android-notch.md b/versioned_docs/version-v5/native/android-notch.md
index 1e124b23fb8..d362ccb9187 100644
--- a/versioned_docs/version-v5/native/android-notch.md
+++ b/versioned_docs/version-v5/native/android-notch.md
@@ -58,12 +58,14 @@ This plugin works on all android versions, but we can only detect notches starti
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-android-notch {'\n'}$ npm install @awesome-cordova-plugins/android-notch {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-android-notch {'\n'}$ npm install @awesome-cordova-plugins/android-notch {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-android-notch {'\n'}$ npm install @awesome-cordova-plugins/android-notch {'\n'}
+      $ ionic cordova plugin add cordova-plugin-android-notch {'\n'}$ npm install @awesome-cordova-plugins/android-notch{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/android-permissions.md b/versioned_docs/version-v5/native/android-permissions.md
index 34847d5f436..8fcaec415b9 100644
--- a/versioned_docs/version-v5/native/android-permissions.md
+++ b/versioned_docs/version-v5/native/android-permissions.md
@@ -60,14 +60,14 @@ You can find all permissions here: https://developer.android.com/reference/andro
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-android-permissions {'\n'}$ npm install @awesome-cordova-plugins/android-permissions {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-android-permissions {'\n'}$ npm install @awesome-cordova-plugins/android-permissions{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-android-permissions {'\n'}$ npm install @awesome-cordova-plugins/android-permissions{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-android-permissions {'\n'}$ npm install
+      @awesome-cordova-plugins/android-permissions {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/app-availability.md b/versioned_docs/version-v5/native/app-availability.md
index 4c09d772307..a0db035ac39 100644
--- a/versioned_docs/version-v5/native/app-availability.md
+++ b/versioned_docs/version-v5/native/app-availability.md
@@ -53,13 +53,14 @@ Requires Cordova plugin: cordova-plugin-appavailability. For more info, please s
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-appavailability {'\n'}$ npm install @awesome-cordova-plugins/app-availability {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-appavailability {'\n'}$ npm install @awesome-cordova-plugins/app-availability {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-appavailability {'\n'}$ npm install @awesome-cordova-plugins/app-availability {'\n'}
+      $ ionic cordova plugin add cordova-plugin-appavailability {'\n'}$ npm install
+      @awesome-cordova-plugins/app-availability {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/app-center-analytics.md b/versioned_docs/version-v5/native/app-center-analytics.md
index 21d765fb3be..666d0cb4502 100644
--- a/versioned_docs/version-v5/native/app-center-analytics.md
+++ b/versioned_docs/version-v5/native/app-center-analytics.md
@@ -61,14 +61,14 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/analyti
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-appcenter-analytics {'\n'}$ npm install @awesome-cordova-plugins/app-center-analytics {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-appcenter-analytics {'\n'}$ npm install @awesome-cordova-plugins/app-center-analytics{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-appcenter-analytics {'\n'}$ npm install @awesome-cordova-plugins/app-center-analytics{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-appcenter-analytics {'\n'}$ npm install
+      @awesome-cordova-plugins/app-center-analytics {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/app-center-crashes.md b/versioned_docs/version-v5/native/app-center-crashes.md
index ba91a02c5a6..6c0080fac73 100644
--- a/versioned_docs/version-v5/native/app-center-crashes.md
+++ b/versioned_docs/version-v5/native/app-center-crashes.md
@@ -61,13 +61,14 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/crashes
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-appcenter-crashes {'\n'}$ npm install @awesome-cordova-plugins/app-center-crashes {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-appcenter-crashes {'\n'}$ npm install @awesome-cordova-plugins/app-center-crashes{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-appcenter-crashes {'\n'}$ npm install @awesome-cordova-plugins/app-center-crashes {'\n'}
+      $ ionic cordova plugin add cordova-plugin-appcenter-crashes {'\n'}$ npm install
+      @awesome-cordova-plugins/app-center-crashes {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/app-center-push.md b/versioned_docs/version-v5/native/app-center-push.md
index 6548a680f89..0fd67610957 100644
--- a/versioned_docs/version-v5/native/app-center-push.md
+++ b/versioned_docs/version-v5/native/app-center-push.md
@@ -56,13 +56,14 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/co
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-appcenter-push {'\n'}$ npm install @awesome-cordova-plugins/app-center-push {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-appcenter-push {'\n'}$ npm install @awesome-cordova-plugins/app-center-push {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-appcenter-push {'\n'}$ npm install @awesome-cordova-plugins/app-center-push {'\n'}
+      $ ionic cordova plugin add cordova-plugin-appcenter-push {'\n'}$ npm install
+      @awesome-cordova-plugins/app-center-push {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/app-preferences.md b/versioned_docs/version-v5/native/app-preferences.md
index 2c634099c4f..0991b665444 100644
--- a/versioned_docs/version-v5/native/app-preferences.md
+++ b/versioned_docs/version-v5/native/app-preferences.md
@@ -51,13 +51,14 @@ This plugin allows you to read and write app preferences
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-app-preferences {'\n'}$ npm install @awesome-cordova-plugins/app-preferences {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-app-preferences {'\n'}$ npm install @awesome-cordova-plugins/app-preferences {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-app-preferences {'\n'}$ npm install @awesome-cordova-plugins/app-preferences {'\n'}
+      $ ionic cordova plugin add cordova-plugin-app-preferences {'\n'}$ npm install
+      @awesome-cordova-plugins/app-preferences {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/app-version.md b/versioned_docs/version-v5/native/app-version.md
index ed9c6da1eb9..ac21f93dada 100644
--- a/versioned_docs/version-v5/native/app-version.md
+++ b/versioned_docs/version-v5/native/app-version.md
@@ -60,12 +60,14 @@ Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-app-version {'\n'}$ npm install @awesome-cordova-plugins/app-version {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-app-version {'\n'}$ npm install @awesome-cordova-plugins/app-version {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-app-version {'\n'}$ npm install @awesome-cordova-plugins/app-version {'\n'}
+      $ ionic cordova plugin add cordova-plugin-app-version {'\n'}$ npm install @awesome-cordova-plugins/app-version{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/apple-wallet.md b/versioned_docs/version-v5/native/apple-wallet.md
index 9e3d0c3f980..8fe152ebabc 100644
--- a/versioned_docs/version-v5/native/apple-wallet.md
+++ b/versioned_docs/version-v5/native/apple-wallet.md
@@ -51,7 +51,8 @@ A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-apple-wallet {'\n'}$ npm install @awesome-cordova-plugins/apple-wallet {'\n'}$ ionic cap sync
+      $ npm install cordova-apple-wallet {'\n'}$ npm install @awesome-cordova-plugins/apple-wallet {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/appsflyer.md b/versioned_docs/version-v5/native/appsflyer.md
index 74c25f72c59..2464f8008ca 100644
--- a/versioned_docs/version-v5/native/appsflyer.md
+++ b/versioned_docs/version-v5/native/appsflyer.md
@@ -56,12 +56,14 @@ Appsflyer Cordova SDK support for Attribution
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-appsflyer-sdk {'\n'}$ npm install @awesome-cordova-plugins/appsflyer {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-appsflyer-sdk {'\n'}$ npm install @awesome-cordova-plugins/appsflyer {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-appsflyer-sdk {'\n'}$ npm install @awesome-cordova-plugins/appsflyer {'\n'}
+      $ ionic cordova plugin add cordova-plugin-appsflyer-sdk {'\n'}$ npm install @awesome-cordova-plugins/appsflyer{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/background-fetch.md b/versioned_docs/version-v5/native/background-fetch.md
index b1b78cab97b..154a7262e4c 100644
--- a/versioned_docs/version-v5/native/background-fetch.md
+++ b/versioned_docs/version-v5/native/background-fetch.md
@@ -58,13 +58,14 @@ For more detail, please see https://github.com/transistorsoft/cordova-plugin-bac
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'}
+      $ ionic cordova plugin add cordova-plugin-background-fetch {'\n'}$ npm install
+      @awesome-cordova-plugins/background-fetch {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/background-geolocation.md b/versioned_docs/version-v5/native/background-geolocation.md
index 4c3053f9b1a..ea6175269cd 100644
--- a/versioned_docs/version-v5/native/background-geolocation.md
+++ b/versioned_docs/version-v5/native/background-geolocation.md
@@ -59,14 +59,14 @@ more detail, please see https://github.com/mauron85/cordova-plugin-background-ge
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install @mauron85/cordova-plugin-background-geolocation {'\n'}$ npm install @awesome-cordova-plugins/background-geolocation{' '}
-      {'\n'}$ ionic cap sync
+      $ npm install @mauron85/cordova-plugin-background-geolocation {'\n'}$ npm install
+      @awesome-cordova-plugins/background-geolocation {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add @mauron85/cordova-plugin-background-geolocation {'\n'}$ npm install @awesome-cordova-plugins/background-geolocation{' '}
-      {'\n'}
+      $ ionic cordova plugin add @mauron85/cordova-plugin-background-geolocation {'\n'}$ npm install
+      @awesome-cordova-plugins/background-geolocation {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/background-mode.md b/versioned_docs/version-v5/native/background-mode.md
index 870ca004bcc..93f0ad8f900 100644
--- a/versioned_docs/version-v5/native/background-mode.md
+++ b/versioned_docs/version-v5/native/background-mode.md
@@ -59,13 +59,14 @@ Requires Cordova plugin: cordova-plugin-background-mode. For more info about plu
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-background-mode {'\n'}$ npm install @awesome-cordova-plugins/background-mode {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-background-mode {'\n'}$ npm install @awesome-cordova-plugins/background-mode {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-background-mode {'\n'}$ npm install @awesome-cordova-plugins/background-mode {'\n'}
+      $ ionic cordova plugin add cordova-plugin-background-mode {'\n'}$ npm install
+      @awesome-cordova-plugins/background-mode {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/background-upload.md b/versioned_docs/version-v5/native/background-upload.md
index 34ac732f069..0f1aa687b72 100644
--- a/versioned_docs/version-v5/native/background-upload.md
+++ b/versioned_docs/version-v5/native/background-upload.md
@@ -56,13 +56,14 @@ This plugin does something
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-background-upload {'\n'}$ npm install @awesome-cordova-plugins/background-upload {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-background-upload {'\n'}$ npm install @awesome-cordova-plugins/background-upload{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-background-upload {'\n'}$ npm install @awesome-cordova-plugins/background-upload {'\n'}
+      $ ionic cordova plugin add cordova-plugin-background-upload {'\n'}$ npm install
+      @awesome-cordova-plugins/background-upload {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/barcode-scanner.md b/versioned_docs/version-v5/native/barcode-scanner.md
index 52228525d0d..9dbccc0d3a1 100644
--- a/versioned_docs/version-v5/native/barcode-scanner.md
+++ b/versioned_docs/version-v5/native/barcode-scanner.md
@@ -60,13 +60,14 @@ Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install phonegap-plugin-barcodescanner {'\n'}$ npm install @awesome-cordova-plugins/barcode-scanner {'\n'}$ ionic cap
-      sync
+      $ npm install phonegap-plugin-barcodescanner {'\n'}$ npm install @awesome-cordova-plugins/barcode-scanner {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add phonegap-plugin-barcodescanner {'\n'}$ npm install @awesome-cordova-plugins/barcode-scanner {'\n'}
+      $ ionic cordova plugin add phonegap-plugin-barcodescanner {'\n'}$ npm install
+      @awesome-cordova-plugins/barcode-scanner {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/battery-status.md b/versioned_docs/version-v5/native/battery-status.md
index ea3fbd19623..bfb9b5deaf2 100644
--- a/versioned_docs/version-v5/native/battery-status.md
+++ b/versioned_docs/version-v5/native/battery-status.md
@@ -51,13 +51,14 @@ Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-battery-status {'\n'}$ npm install @awesome-cordova-plugins/battery-status {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-battery-status {'\n'}$ npm install @awesome-cordova-plugins/battery-status {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-battery-status {'\n'}$ npm install @awesome-cordova-plugins/battery-status {'\n'}
+      $ ionic cordova plugin add cordova-plugin-battery-status {'\n'}$ npm install
+      @awesome-cordova-plugins/battery-status {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/biometric-wrapper.md b/versioned_docs/version-v5/native/biometric-wrapper.md
index 869964d31c5..c67839505ce 100644
--- a/versioned_docs/version-v5/native/biometric-wrapper.md
+++ b/versioned_docs/version-v5/native/biometric-wrapper.md
@@ -51,12 +51,14 @@ May be used in Banking domain
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-biometric {'\n'}$ npm install @awesome-cordova-plugins/biometric-wrapper {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-biometric {'\n'}$ npm install @awesome-cordova-plugins/biometric-wrapper {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-biometric {'\n'}$ npm install @awesome-cordova-plugins/biometric-wrapper {'\n'}
+      $ ionic cordova plugin add cordova-plugin-biometric {'\n'}$ npm install @awesome-cordova-plugins/biometric-wrapper{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/bluetooth-le.md b/versioned_docs/version-v5/native/bluetooth-le.md
index bac7c13eeba..01af7c5c01a 100644
--- a/versioned_docs/version-v5/native/bluetooth-le.md
+++ b/versioned_docs/version-v5/native/bluetooth-le.md
@@ -58,12 +58,14 @@ It supports peripheral **and** central modes and covers most of the API methods
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-bluetoothle {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-le {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-bluetoothle {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-le {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-bluetoothle {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-le {'\n'}
+      $ ionic cordova plugin add cordova-plugin-bluetoothle {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-le{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/bluetooth-serial.md b/versioned_docs/version-v5/native/bluetooth-serial.md
index e8bb5eff695..90783c844e5 100644
--- a/versioned_docs/version-v5/native/bluetooth-serial.md
+++ b/versioned_docs/version-v5/native/bluetooth-serial.md
@@ -51,13 +51,14 @@ This plugin enables serial communication over Bluetooth. It was written for comm
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'}
+      $ ionic cordova plugin add cordova-plugin-bluetooth-serial {'\n'}$ npm install
+      @awesome-cordova-plugins/bluetooth-serial {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/broadcaster.md b/versioned_docs/version-v5/native/broadcaster.md
index 74bcf9034d7..ee39354ad89 100644
--- a/versioned_docs/version-v5/native/broadcaster.md
+++ b/versioned_docs/version-v5/native/broadcaster.md
@@ -51,12 +51,14 @@ This plugin adds exchanging events between native code and your app.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-broadcaster {'\n'}$ npm install @awesome-cordova-plugins/broadcaster {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-broadcaster {'\n'}$ npm install @awesome-cordova-plugins/broadcaster {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-broadcaster {'\n'}$ npm install @awesome-cordova-plugins/broadcaster {'\n'}
+      $ ionic cordova plugin add cordova-plugin-broadcaster {'\n'}$ npm install @awesome-cordova-plugins/broadcaster{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/build-info.md b/versioned_docs/version-v5/native/build-info.md
index 88a0446ae01..4272dbfa5aa 100644
--- a/versioned_docs/version-v5/native/build-info.md
+++ b/versioned_docs/version-v5/native/build-info.md
@@ -51,7 +51,8 @@ This plugin provides build information.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-buildinfo {'\n'}$ npm install @awesome-cordova-plugins/build-info {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-buildinfo {'\n'}$ npm install @awesome-cordova-plugins/build-info {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/call-directory.md b/versioned_docs/version-v5/native/call-directory.md
index d6f965d4b5a..15c91410878 100644
--- a/versioned_docs/version-v5/native/call-directory.md
+++ b/versioned_docs/version-v5/native/call-directory.md
@@ -57,13 +57,14 @@ to process the changes in the call directory extension.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-call-directory {'\n'}$ npm install @awesome-cordova-plugins/call-directory {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-call-directory {'\n'}$ npm install @awesome-cordova-plugins/call-directory {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-call-directory {'\n'}$ npm install @awesome-cordova-plugins/call-directory {'\n'}
+      $ ionic cordova plugin add cordova-plugin-call-directory {'\n'}$ npm install
+      @awesome-cordova-plugins/call-directory {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/camera-preview.md b/versioned_docs/version-v5/native/camera-preview.md
index 298a4f578f5..b8a9b47fc8b 100644
--- a/versioned_docs/version-v5/native/camera-preview.md
+++ b/versioned_docs/version-v5/native/camera-preview.md
@@ -58,13 +58,14 @@ Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordo
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-camera-preview {'\n'}$ npm install @awesome-cordova-plugins/camera-preview {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-camera-preview {'\n'}$ npm install @awesome-cordova-plugins/camera-preview {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-camera-preview {'\n'}$ npm install @awesome-cordova-plugins/camera-preview {'\n'}
+      $ ionic cordova plugin add cordova-plugin-camera-preview {'\n'}$ npm install
+      @awesome-cordova-plugins/camera-preview {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/cloud-settings.md b/versioned_docs/version-v5/native/cloud-settings.md
index 86b4a0541ea..d6142d413c4 100644
--- a/versioned_docs/version-v5/native/cloud-settings.md
+++ b/versioned_docs/version-v5/native/cloud-settings.md
@@ -51,13 +51,14 @@ Stores app settings in cloud storage so if the user re-installs the app or insta
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-cloud-settings {'\n'}$ npm install @awesome-cordova-plugins/cloud-settings {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-cloud-settings {'\n'}$ npm install @awesome-cordova-plugins/cloud-settings {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-cloud-settings {'\n'}$ npm install @awesome-cordova-plugins/cloud-settings {'\n'}
+      $ ionic cordova plugin add cordova-plugin-cloud-settings {'\n'}$ npm install
+      @awesome-cordova-plugins/cloud-settings {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/code-push.md b/versioned_docs/version-v5/native/code-push.md
index f5670f40089..a851adc32f1 100644
--- a/versioned_docs/version-v5/native/code-push.md
+++ b/versioned_docs/version-v5/native/code-push.md
@@ -53,7 +53,8 @@ For more info, please see https://github.com/Dellos7/example-cordova-code-push-p
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-code-push {'\n'}$ npm install @awesome-cordova-plugins/code-push {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-code-push {'\n'}$ npm install @awesome-cordova-plugins/code-push {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/custom-uisdk.md b/versioned_docs/version-v5/native/custom-uisdk.md
index 3a2a278d23c..1e61ea8dde4 100644
--- a/versioned_docs/version-v5/native/custom-uisdk.md
+++ b/versioned_docs/version-v5/native/custom-uisdk.md
@@ -51,12 +51,14 @@ This plugin is used to access Paytm's native CustomUISDK framework's apis.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-paytm-customuisdk {'\n'}$ npm install @awesome-cordova-plugins/custom-uisdk {'\n'}$ ionic cap sync
+      $ npm install cordova-paytm-customuisdk {'\n'}$ npm install @awesome-cordova-plugins/custom-uisdk {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-paytm-customuisdk {'\n'}$ npm install @awesome-cordova-plugins/custom-uisdk {'\n'}
+      $ ionic cordova plugin add cordova-paytm-customuisdk {'\n'}$ npm install @awesome-cordova-plugins/custom-uisdk{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/device-accounts.md b/versioned_docs/version-v5/native/device-accounts.md
index 979065ce55d..71f742d28aa 100644
--- a/versioned_docs/version-v5/native/device-accounts.md
+++ b/versioned_docs/version-v5/native/device-accounts.md
@@ -51,12 +51,14 @@ Gets the Google accounts associated with the Android device
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-device-accounts-v2 {'\n'}$ npm install @awesome-cordova-plugins/device-accounts {'\n'}$ ionic cap sync
+      $ npm install cordova-device-accounts-v2 {'\n'}$ npm install @awesome-cordova-plugins/device-accounts {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-device-accounts-v2 {'\n'}$ npm install @awesome-cordova-plugins/device-accounts {'\n'}
+      $ ionic cordova plugin add cordova-device-accounts-v2 {'\n'}$ npm install @awesome-cordova-plugins/device-accounts{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/device-motion.md b/versioned_docs/version-v5/native/device-motion.md
index 4c930da66d9..a4f889ccb79 100644
--- a/versioned_docs/version-v5/native/device-motion.md
+++ b/versioned_docs/version-v5/native/device-motion.md
@@ -51,12 +51,14 @@ Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please s
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-device-motion {'\n'}$ npm install @awesome-cordova-plugins/device-motion {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-device-motion {'\n'}$ npm install @awesome-cordova-plugins/device-motion {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-device-motion {'\n'}$ npm install @awesome-cordova-plugins/device-motion {'\n'}
+      $ ionic cordova plugin add cordova-plugin-device-motion {'\n'}$ npm install @awesome-cordova-plugins/device-motion{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/device-orientation.md b/versioned_docs/version-v5/native/device-orientation.md
index 5372aacbc7f..110f15060ae 100644
--- a/versioned_docs/version-v5/native/device-orientation.md
+++ b/versioned_docs/version-v5/native/device-orientation.md
@@ -56,13 +56,14 @@ Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, ple
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-device-orientation {'\n'}$ npm install @awesome-cordova-plugins/device-orientation {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-device-orientation {'\n'}$ npm install @awesome-cordova-plugins/device-orientation{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-device-orientation {'\n'}$ npm install @awesome-cordova-plugins/device-orientation {'\n'}
+      $ ionic cordova plugin add cordova-plugin-device-orientation {'\n'}$ npm install
+      @awesome-cordova-plugins/device-orientation {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/dfu-update.md b/versioned_docs/version-v5/native/dfu-update.md
index ef695e885e7..c64fff1e7e0 100644
--- a/versioned_docs/version-v5/native/dfu-update.md
+++ b/versioned_docs/version-v5/native/dfu-update.md
@@ -56,12 +56,14 @@ This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (D
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-dfu-update {'\n'}$ npm install @awesome-cordova-plugins/dfu-update {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-dfu-update {'\n'}$ npm install @awesome-cordova-plugins/dfu-update {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-dfu-update {'\n'}$ npm install @awesome-cordova-plugins/dfu-update {'\n'}
+      $ ionic cordova plugin add cordova-plugin-dfu-update {'\n'}$ npm install @awesome-cordova-plugins/dfu-update{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/diagnostic.md b/versioned_docs/version-v5/native/diagnostic.md
index 9c1b543e4ce..cddf669bf14 100644
--- a/versioned_docs/version-v5/native/diagnostic.md
+++ b/versioned_docs/version-v5/native/diagnostic.md
@@ -51,12 +51,14 @@ Checks whether device hardware features are enabled or available to the app, e.g
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova.plugins.diagnostic {'\n'}$ npm install @awesome-cordova-plugins/diagnostic {'\n'}$ ionic cap sync
+      $ npm install cordova.plugins.diagnostic {'\n'}$ npm install @awesome-cordova-plugins/diagnostic {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova.plugins.diagnostic {'\n'}$ npm install @awesome-cordova-plugins/diagnostic {'\n'}
+      $ ionic cordova plugin add cordova.plugins.diagnostic {'\n'}$ npm install @awesome-cordova-plugins/diagnostic{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/document-picker.md b/versioned_docs/version-v5/native/document-picker.md
index 0879421357d..fb602301723 100644
--- a/versioned_docs/version-v5/native/document-picker.md
+++ b/versioned_docs/version-v5/native/document-picker.md
@@ -52,15 +52,14 @@ Allows the user to upload files from iCloud
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-documentpicker.DocumentPicker {'\n'}$ npm install @awesome-cordova-plugins/document-picker {
-        '\n'
-      }$ ionic cap sync
+      $ npm install cordova-plugin-documentpicker.DocumentPicker {'\n'}$ npm install
+      @awesome-cordova-plugins/document-picker {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-documentpicker.DocumentPicker {'\n'}$ npm install @awesome-cordova-plugins/document-picker{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-documentpicker.DocumentPicker {'\n'}$ npm install
+      @awesome-cordova-plugins/document-picker {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/document-scanner.md b/versioned_docs/version-v5/native/document-scanner.md
index efed6e8540f..b71162f7fb0 100644
--- a/versioned_docs/version-v5/native/document-scanner.md
+++ b/versioned_docs/version-v5/native/document-scanner.md
@@ -56,13 +56,14 @@ This plugin processes images of documents, compensating for perspective.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'}
+      $ ionic cordova plugin add cordova-plugin-document-scanner {'\n'}$ npm install
+      @awesome-cordova-plugins/document-scanner {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/document-viewer.md b/versioned_docs/version-v5/native/document-viewer.md
index 833c3d5b7f1..2c7fdb31eb9 100644
--- a/versioned_docs/version-v5/native/document-viewer.md
+++ b/versioned_docs/version-v5/native/document-viewer.md
@@ -58,13 +58,14 @@ This plugin offers a slim API to view PDF files which are either stored in the a
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-document-viewer {'\n'}$ npm install @awesome-cordova-plugins/document-viewer {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-document-viewer {'\n'}$ npm install @awesome-cordova-plugins/document-viewer {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-document-viewer {'\n'}$ npm install @awesome-cordova-plugins/document-viewer {'\n'}
+      $ ionic cordova plugin add cordova-plugin-document-viewer {'\n'}$ npm install
+      @awesome-cordova-plugins/document-viewer {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/email-composer.md b/versioned_docs/version-v5/native/email-composer.md
index 7524900b7dc..94abae314e0 100644
--- a/versioned_docs/version-v5/native/email-composer.md
+++ b/versioned_docs/version-v5/native/email-composer.md
@@ -51,13 +51,14 @@ Requires Cordova plugin: cordova-plugin-email-composer. For more info, please se
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-email-composer {'\n'}$ npm install @awesome-cordova-plugins/email-composer {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-email-composer {'\n'}$ npm install @awesome-cordova-plugins/email-composer {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-email-composer {'\n'}$ npm install @awesome-cordova-plugins/email-composer {'\n'}
+      $ ionic cordova plugin add cordova-plugin-email-composer {'\n'}$ npm install
+      @awesome-cordova-plugins/email-composer {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/facebook.md b/versioned_docs/version-v5/native/facebook.md
index c69b2f6c081..859dbea0a50 100644
--- a/versioned_docs/version-v5/native/facebook.md
+++ b/versioned_docs/version-v5/native/facebook.md
@@ -122,12 +122,14 @@ For tracking events, see `logEvent` and `logPurchase`.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-facebook-connect {'\n'}$ npm install @awesome-cordova-plugins/facebook {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-facebook-connect {'\n'}$ npm install @awesome-cordova-plugins/facebook {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-facebook-connect {'\n'}$ npm install @awesome-cordova-plugins/facebook {'\n'}
+      $ ionic cordova plugin add cordova-plugin-facebook-connect {'\n'}$ npm install @awesome-cordova-plugins/facebook{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/fcm.md b/versioned_docs/version-v5/native/fcm.md
index cae65356b68..9720499e8ca 100644
--- a/versioned_docs/version-v5/native/fcm.md
+++ b/versioned_docs/version-v5/native/fcm.md
@@ -58,13 +58,14 @@ Provides basic functionality for Firebase Cloud Messaging
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-fcm-with-dependecy-updated {'\n'}$ npm install @awesome-cordova-plugins/fcm {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-fcm-with-dependecy-updated {'\n'}$ npm install @awesome-cordova-plugins/fcm {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated {'\n'}$ npm install @awesome-cordova-plugins/fcm {'\n'}
+      $ ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated {'\n'}$ npm install
+      @awesome-cordova-plugins/fcm {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/file-opener.md b/versioned_docs/version-v5/native/file-opener.md
index 37feef87b69..c1523267e05 100644
--- a/versioned_docs/version-v5/native/file-opener.md
+++ b/versioned_docs/version-v5/native/file-opener.md
@@ -51,12 +51,14 @@ This plugin will open a file on your device file system with its default applica
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-file-opener2 {'\n'}$ npm install @awesome-cordova-plugins/file-opener {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-file-opener2 {'\n'}$ npm install @awesome-cordova-plugins/file-opener {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-file-opener2 {'\n'}$ npm install @awesome-cordova-plugins/file-opener {'\n'}
+      $ ionic cordova plugin add cordova-plugin-file-opener2 {'\n'}$ npm install @awesome-cordova-plugins/file-opener{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/file-path.md b/versioned_docs/version-v5/native/file-path.md
index 8ebf84748a4..eae1fdf24f9 100644
--- a/versioned_docs/version-v5/native/file-path.md
+++ b/versioned_docs/version-v5/native/file-path.md
@@ -51,7 +51,8 @@ This plugin allows you to resolve the native filesystem path for Android content
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-filepath {'\n'}$ npm install @awesome-cordova-plugins/file-path {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-filepath {'\n'}$ npm install @awesome-cordova-plugins/file-path {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/file-transfer.md b/versioned_docs/version-v5/native/file-transfer.md
index 67075ace785..4b5d597a298 100644
--- a/versioned_docs/version-v5/native/file-transfer.md
+++ b/versioned_docs/version-v5/native/file-transfer.md
@@ -54,12 +54,14 @@ This plugin allows you to upload and download files.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-file-transfer {'\n'}$ npm install @awesome-cordova-plugins/file-transfer {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-file-transfer {'\n'}$ npm install @awesome-cordova-plugins/file-transfer {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-file-transfer {'\n'}$ npm install @awesome-cordova-plugins/file-transfer {'\n'}
+      $ ionic cordova plugin add cordova-plugin-file-transfer {'\n'}$ npm install @awesome-cordova-plugins/file-transfer{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-analytics.md b/versioned_docs/version-v5/native/firebase-analytics.md
index d1ab0eda1ce..0490d060537 100644
--- a/versioned_docs/version-v5/native/firebase-analytics.md
+++ b/versioned_docs/version-v5/native/firebase-analytics.md
@@ -78,13 +78,14 @@ And in the same file, you'll have to add `xmlns:tools="http://schemas.android.co
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-analytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-analytics {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-firebase-analytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-analytics{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-analytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-analytics {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-analytics {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-analytics {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-authentication.md b/versioned_docs/version-v5/native/firebase-authentication.md
index 7e1af9f1a55..5d3525dcdd6 100644
--- a/versioned_docs/version-v5/native/firebase-authentication.md
+++ b/versioned_docs/version-v5/native/firebase-authentication.md
@@ -56,15 +56,14 @@ Cordova plugin for Firebase Authentication
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-authentication {'\n'}$ npm install @awesome-cordova-plugins/firebase-authentication {
-        '\n'
-      }$ ionic cap sync
+      $ npm install cordova-plugin-firebase-authentication {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-authentication {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-authentication {'\n'}$ npm install @awesome-cordova-plugins/firebase-authentication{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-authentication {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-authentication {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-config.md b/versioned_docs/version-v5/native/firebase-config.md
index 6de55540857..40ed6b900fe 100644
--- a/versioned_docs/version-v5/native/firebase-config.md
+++ b/versioned_docs/version-v5/native/firebase-config.md
@@ -56,13 +56,14 @@ Cordova plugin for Firebase Config
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-config {'\n'}$ npm install @awesome-cordova-plugins/firebase-config {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-firebase-config {'\n'}$ npm install @awesome-cordova-plugins/firebase-config {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-config {'\n'}$ npm install @awesome-cordova-plugins/firebase-config {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-config {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-config {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-crash.md b/versioned_docs/version-v5/native/firebase-crash.md
index c21c8a98627..79222ff5866 100644
--- a/versioned_docs/version-v5/native/firebase-crash.md
+++ b/versioned_docs/version-v5/native/firebase-crash.md
@@ -56,13 +56,14 @@ This plugin brings crash reporting from Google Firebase to your Cordova project!
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-crash {'\n'}$ npm install @awesome-cordova-plugins/firebase-crash {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-firebase-crash {'\n'}$ npm install @awesome-cordova-plugins/firebase-crash {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-crash {'\n'}$ npm install @awesome-cordova-plugins/firebase-crash {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-crash {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-crash {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-crashlytics.md b/versioned_docs/version-v5/native/firebase-crashlytics.md
index 58a86b10841..5b69a9518db 100644
--- a/versioned_docs/version-v5/native/firebase-crashlytics.md
+++ b/versioned_docs/version-v5/native/firebase-crashlytics.md
@@ -56,14 +56,14 @@ A Google Firebase Crashlytics plugin to enable capture of crash reports.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-crashlytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-crashlytics {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-firebase-crashlytics {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-crashlytics {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-crashlytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-crashlytics{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-crashlytics {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-crashlytics {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-dynamic-links.md b/versioned_docs/version-v5/native/firebase-dynamic-links.md
index 6e670973330..c4f9c75fb9c 100644
--- a/versioned_docs/version-v5/native/firebase-dynamic-links.md
+++ b/versioned_docs/version-v5/native/firebase-dynamic-links.md
@@ -75,14 +75,14 @@ config.xml:
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-dynamiclinks {'\n'}$ npm install @awesome-cordova-plugins/firebase-dynamic-links {'\n'}
-      $ ionic cap sync
+      $ npm install cordova-plugin-firebase-dynamiclinks {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-dynamic-links {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-dynamiclinks {'\n'}$ npm install @awesome-cordova-plugins/firebase-dynamic-links{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-dynamiclinks {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-dynamic-links {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-messaging.md b/versioned_docs/version-v5/native/firebase-messaging.md
index 4a15c2f1e8f..206e646c9ca 100644
--- a/versioned_docs/version-v5/native/firebase-messaging.md
+++ b/versioned_docs/version-v5/native/firebase-messaging.md
@@ -56,13 +56,14 @@ Cordova plugin for Firebase Messaging
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-messaging {'\n'}$ npm install @awesome-cordova-plugins/firebase-messaging {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-firebase-messaging {'\n'}$ npm install @awesome-cordova-plugins/firebase-messaging{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-messaging {'\n'}$ npm install @awesome-cordova-plugins/firebase-messaging {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-messaging {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-messaging {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-vision.md b/versioned_docs/version-v5/native/firebase-vision.md
index e8764009a89..52fb788095c 100644
--- a/versioned_docs/version-v5/native/firebase-vision.md
+++ b/versioned_docs/version-v5/native/firebase-vision.md
@@ -56,13 +56,14 @@ Cordova plugin for Firebase MLKit Vision
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'}
+      $ ionic cordova plugin add cordova-plugin-firebase-mlvision {'\n'}$ npm install
+      @awesome-cordova-plugins/firebase-vision {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/firebase-x.md b/versioned_docs/version-v5/native/firebase-x.md
index 0f3621a450a..b7bee272e89 100644
--- a/versioned_docs/version-v5/native/firebase-x.md
+++ b/versioned_docs/version-v5/native/firebase-x.md
@@ -52,7 +52,8 @@ It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebasex {'\n'}$ npm install @awesome-cordova-plugins/firebase-x {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-firebasex {'\n'}$ npm install @awesome-cordova-plugins/firebase-x {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/flashlight.md b/versioned_docs/version-v5/native/flashlight.md
index eb27bec159e..6e6f2ec22c4 100644
--- a/versioned_docs/version-v5/native/flashlight.md
+++ b/versioned_docs/version-v5/native/flashlight.md
@@ -58,12 +58,14 @@ Requires Cordova plugin: `cordova-plugin-flashlight`. For more info, please see
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-flashlight {'\n'}$ npm install @awesome-cordova-plugins/flashlight {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-flashlight {'\n'}$ npm install @awesome-cordova-plugins/flashlight {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-flashlight {'\n'}$ npm install @awesome-cordova-plugins/flashlight {'\n'}
+      $ ionic cordova plugin add cordova-plugin-flashlight {'\n'}$ npm install @awesome-cordova-plugins/flashlight{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/foreground-service.md b/versioned_docs/version-v5/native/foreground-service.md
index 30b5ce957e7..b6c0a4e854e 100644
--- a/versioned_docs/version-v5/native/foreground-service.md
+++ b/versioned_docs/version-v5/native/foreground-service.md
@@ -69,13 +69,14 @@ For android API 28+, the following xml snippet should be inserted into `config.x
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-foreground-service {'\n'}$ npm install @awesome-cordova-plugins/foreground-service {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-foreground-service {'\n'}$ npm install @awesome-cordova-plugins/foreground-service{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-foreground-service {'\n'}$ npm install @awesome-cordova-plugins/foreground-service {'\n'}
+      $ ionic cordova plugin add cordova-plugin-foreground-service {'\n'}$ npm install
+      @awesome-cordova-plugins/foreground-service {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/gao-de-location.md b/versioned_docs/version-v5/native/gao-de-location.md
index a101681e953..4906cbc5ed5 100644
--- a/versioned_docs/version-v5/native/gao-de-location.md
+++ b/versioned_docs/version-v5/native/gao-de-location.md
@@ -57,13 +57,14 @@ Gaode location can directly return address informationGaode location can directl
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-gaodelocation-chenyu {'\n'}$ npm install @awesome-cordova-plugins/gao-de-location {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-gaodelocation-chenyu {'\n'}$ npm install @awesome-cordova-plugins/gao-de-location{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-gaodelocation-chenyu {'\n'}$ npm install @awesome-cordova-plugins/gao-de-location {'\n'}
+      $ ionic cordova plugin add cordova-plugin-gaodelocation-chenyu {'\n'}$ npm install
+      @awesome-cordova-plugins/gao-de-location {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md
index e8b0d8cc0ac..974ca8843ac 100644
--- a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md
+++ b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md
@@ -56,12 +56,14 @@ This plugin does something
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-getuisdk {'\n'}$ npm install @awesome-cordova-plugins/ge-tui-sdk-plugin {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-getuisdk {'\n'}$ npm install @awesome-cordova-plugins/ge-tui-sdk-plugin {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-getuisdk {'\n'}$ npm install @awesome-cordova-plugins/ge-tui-sdk-plugin {'\n'}
+      $ ionic cordova plugin add cordova-plugin-getuisdk {'\n'}$ npm install @awesome-cordova-plugins/ge-tui-sdk-plugin{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/geolocation.md b/versioned_docs/version-v5/native/geolocation.md
index 8a9ec9aec50..715488958ec 100644
--- a/versioned_docs/version-v5/native/geolocation.md
+++ b/versioned_docs/version-v5/native/geolocation.md
@@ -63,12 +63,14 @@ For iOS you have to add this configuration to your configuration.xml file
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-geolocation {'\n'}$ npm install @awesome-cordova-plugins/geolocation {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-geolocation {'\n'}$ npm install @awesome-cordova-plugins/geolocation {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-geolocation {'\n'}$ npm install @awesome-cordova-plugins/geolocation {'\n'}
+      $ ionic cordova plugin add cordova-plugin-geolocation {'\n'}$ npm install @awesome-cordova-plugins/geolocation{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/globalization.md b/versioned_docs/version-v5/native/globalization.md
index b69c0491899..c251bf78684 100644
--- a/versioned_docs/version-v5/native/globalization.md
+++ b/versioned_docs/version-v5/native/globalization.md
@@ -51,12 +51,14 @@ This plugin obtains information and performs operations specific to the user's l
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-globalization {'\n'}$ npm install @awesome-cordova-plugins/globalization {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-globalization {'\n'}$ npm install @awesome-cordova-plugins/globalization {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-globalization {'\n'}$ npm install @awesome-cordova-plugins/globalization {'\n'}
+      $ ionic cordova plugin add cordova-plugin-globalization {'\n'}$ npm install @awesome-cordova-plugins/globalization{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/google-analytics.md b/versioned_docs/version-v5/native/google-analytics.md
index da21a5869d9..1f9d941d381 100644
--- a/versioned_docs/version-v5/native/google-analytics.md
+++ b/versioned_docs/version-v5/native/google-analytics.md
@@ -56,13 +56,14 @@ Prerequisites:
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'}
+      $ ionic cordova plugin add cordova-plugin-google-analytics {'\n'}$ npm install
+      @awesome-cordova-plugins/google-analytics {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/google-nearby.md b/versioned_docs/version-v5/native/google-nearby.md
index 96db8c78b1c..1b3a22917dd 100644
--- a/versioned_docs/version-v5/native/google-nearby.md
+++ b/versioned_docs/version-v5/native/google-nearby.md
@@ -56,12 +56,14 @@ This plugin adds support for the Google Nearby Messages API.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-google-nearby {'\n'}$ npm install @awesome-cordova-plugins/google-nearby {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-google-nearby {'\n'}$ npm install @awesome-cordova-plugins/google-nearby {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-google-nearby {'\n'}$ npm install @awesome-cordova-plugins/google-nearby {'\n'}
+      $ ionic cordova plugin add cordova-plugin-google-nearby {'\n'}$ npm install @awesome-cordova-plugins/google-nearby{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/google-plus.md b/versioned_docs/version-v5/native/google-plus.md
index 7cff3aa4850..833871ddaed 100644
--- a/versioned_docs/version-v5/native/google-plus.md
+++ b/versioned_docs/version-v5/native/google-plus.md
@@ -54,12 +54,14 @@ import CodeBlock from '@theme/CodeBlock';
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-googleplus {'\n'}$ npm install @awesome-cordova-plugins/google-plus {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-googleplus {'\n'}$ npm install @awesome-cordova-plugins/google-plus {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-googleplus {'\n'}$ npm install @awesome-cordova-plugins/google-plus {'\n'}
+      $ ionic cordova plugin add cordova-plugin-googleplus {'\n'}$ npm install @awesome-cordova-plugins/google-plus{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/health-kit.md b/versioned_docs/version-v5/native/health-kit.md
index 7218a555e59..c6297671de4 100644
--- a/versioned_docs/version-v5/native/health-kit.md
+++ b/versioned_docs/version-v5/native/health-kit.md
@@ -52,12 +52,14 @@ Any data saved shows up in the iOS Health app and is available for other iOS app
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install com.telerik.plugins.healthkit {'\n'}$ npm install @awesome-cordova-plugins/health-kit {'\n'}$ ionic cap sync
+      $ npm install com.telerik.plugins.healthkit {'\n'}$ npm install @awesome-cordova-plugins/health-kit {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add com.telerik.plugins.healthkit {'\n'}$ npm install @awesome-cordova-plugins/health-kit {'\n'}
+      $ ionic cordova plugin add com.telerik.plugins.healthkit {'\n'}$ npm install @awesome-cordova-plugins/health-kit{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/http.md b/versioned_docs/version-v5/native/http.md
index 9d838443986..aed212a470c 100644
--- a/versioned_docs/version-v5/native/http.md
+++ b/versioned_docs/version-v5/native/http.md
@@ -62,7 +62,8 @@ Advantages over Javascript requests:
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-advanced-http {'\n'}$ npm install @awesome-cordova-plugins/http {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-advanced-http {'\n'}$ npm install @awesome-cordova-plugins/http {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/image-picker.md b/versioned_docs/version-v5/native/image-picker.md
index 316822a0c8e..1128be3f116 100644
--- a/versioned_docs/version-v5/native/image-picker.md
+++ b/versioned_docs/version-v5/native/image-picker.md
@@ -54,13 +54,14 @@ For more info, please see the https://github.com/Telerik-Verified-Plugins/ImageP
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-telerik-imagepicker {'\n'}$ npm install @awesome-cordova-plugins/image-picker {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-telerik-imagepicker {'\n'}$ npm install @awesome-cordova-plugins/image-picker {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-telerik-imagepicker {'\n'}$ npm install @awesome-cordova-plugins/image-picker {'\n'}
+      $ ionic cordova plugin add cordova-plugin-telerik-imagepicker {'\n'}$ npm install
+      @awesome-cordova-plugins/image-picker {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/in-app-browser.md b/versioned_docs/version-v5/native/in-app-browser.md
index e90afa683f0..a48f9699a06 100644
--- a/versioned_docs/version-v5/native/in-app-browser.md
+++ b/versioned_docs/version-v5/native/in-app-browser.md
@@ -51,12 +51,14 @@ Launches in app Browser
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-inappbrowser {'\n'}$ npm install @awesome-cordova-plugins/in-app-browser {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-inappbrowser {'\n'}$ npm install @awesome-cordova-plugins/in-app-browser {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-inappbrowser {'\n'}$ npm install @awesome-cordova-plugins/in-app-browser {'\n'}
+      $ ionic cordova plugin add cordova-plugin-inappbrowser {'\n'}$ npm install @awesome-cordova-plugins/in-app-browser{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/in-app-purchase-2.md b/versioned_docs/version-v5/native/in-app-purchase-2.md
index a3ec3f7c0b6..ef4eb1a7377 100644
--- a/versioned_docs/version-v5/native/in-app-purchase-2.md
+++ b/versioned_docs/version-v5/native/in-app-purchase-2.md
@@ -74,12 +74,14 @@ Supports:
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-purchase {'\n'}$ npm install @awesome-cordova-plugins/in-app-purchase-2 {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-purchase {'\n'}$ npm install @awesome-cordova-plugins/in-app-purchase-2 {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-purchase {'\n'}$ npm install @awesome-cordova-plugins/in-app-purchase-2 {'\n'}
+      $ ionic cordova plugin add cordova-plugin-purchase {'\n'}$ npm install @awesome-cordova-plugins/in-app-purchase-2{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/in-app-review.md b/versioned_docs/version-v5/native/in-app-review.md
index e9f708ebb8b..76ca8f0457f 100644
--- a/versioned_docs/version-v5/native/in-app-review.md
+++ b/versioned_docs/version-v5/native/in-app-review.md
@@ -53,12 +53,14 @@ This functionality only works on iOS devices
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install com.omarben.inappreview {'\n'}$ npm install @awesome-cordova-plugins/in-app-review {'\n'}$ ionic cap sync
+      $ npm install com.omarben.inappreview {'\n'}$ npm install @awesome-cordova-plugins/in-app-review {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add com.omarben.inappreview {'\n'}$ npm install @awesome-cordova-plugins/in-app-review {'\n'}
+      $ ionic cordova plugin add com.omarben.inappreview {'\n'}$ npm install @awesome-cordova-plugins/in-app-review{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/instagram.md b/versioned_docs/version-v5/native/instagram.md
index 616f0cf5a7f..abd0def8a8d 100644
--- a/versioned_docs/version-v5/native/instagram.md
+++ b/versioned_docs/version-v5/native/instagram.md
@@ -51,7 +51,8 @@ Share a photo with the instagram app
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-instagram-plugin {'\n'}$ npm install @awesome-cordova-plugins/instagram {'\n'}$ ionic cap sync
+      $ npm install cordova-instagram-plugin {'\n'}$ npm install @awesome-cordova-plugins/instagram {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/ionic-webview.md b/versioned_docs/version-v5/native/ionic-webview.md
index 6eaee39149a..8fdee2f2cc6 100644
--- a/versioned_docs/version-v5/native/ionic-webview.md
+++ b/versioned_docs/version-v5/native/ionic-webview.md
@@ -60,12 +60,14 @@ Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview {'\n'}
+      $ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md
index 8be8c9a755d..9d7f8aebe10 100644
--- a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md
+++ b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md
@@ -56,14 +56,14 @@ Plugin for iOS 12 ASWebAuthenticationSession API
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-ios-aswebauthenticationsession-api {'\n'}$ npm install @awesome-cordova-plugins/ios-aswebauthenticationsession-api{' '}
-      {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-ios-aswebauthenticationsession-api {'\n'}$ npm install
+      @awesome-cordova-plugins/ios-aswebauthenticationsession-api {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-ios-aswebauthenticationsession-api {'\n'}$ npm install @awesome-cordova-plugins/ios-aswebauthenticationsession-api{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-ios-aswebauthenticationsession-api {'\n'}$ npm install
+      @awesome-cordova-plugins/ios-aswebauthenticationsession-api {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/keyboard.md b/versioned_docs/version-v5/native/keyboard.md
index 0d572533bd8..73997e6ce18 100644
--- a/versioned_docs/version-v5/native/keyboard.md
+++ b/versioned_docs/version-v5/native/keyboard.md
@@ -58,12 +58,14 @@ Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-ionic-keyboard {'\n'}$ npm install @awesome-cordova-plugins/keyboard {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-ionic-keyboard {'\n'}$ npm install @awesome-cordova-plugins/keyboard {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-ionic-keyboard {'\n'}$ npm install @awesome-cordova-plugins/keyboard {'\n'}
+      $ ionic cordova plugin add cordova-plugin-ionic-keyboard {'\n'}$ npm install @awesome-cordova-plugins/keyboard{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/keychain.md b/versioned_docs/version-v5/native/keychain.md
index c1a19e410ce..97ccaaf06de 100644
--- a/versioned_docs/version-v5/native/keychain.md
+++ b/versioned_docs/version-v5/native/keychain.md
@@ -60,12 +60,14 @@ See also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-ios-keychain {'\n'}$ npm install @awesome-cordova-plugins/keychain {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-ios-keychain {'\n'}$ npm install @awesome-cordova-plugins/keychain {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-ios-keychain {'\n'}$ npm install @awesome-cordova-plugins/keychain {'\n'}
+      $ ionic cordova plugin add cordova-plugin-ios-keychain {'\n'}$ npm install @awesome-cordova-plugins/keychain{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/kommunicate.md b/versioned_docs/version-v5/native/kommunicate.md
index 96fe01b8f9d..aee488ec4c7 100644
--- a/versioned_docs/version-v5/native/kommunicate.md
+++ b/versioned_docs/version-v5/native/kommunicate.md
@@ -59,12 +59,14 @@ For documentation: TODO: insert link
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install kommunicate-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/kommunicate {'\n'}$ ionic cap sync
+      $ npm install kommunicate-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/kommunicate {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add kommunicate-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/kommunicate {'\n'}
+      $ ionic cordova plugin add kommunicate-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/kommunicate{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/launch-navigator.md b/versioned_docs/version-v5/native/launch-navigator.md
index a7fdff4787c..0856a2b5660 100644
--- a/versioned_docs/version-v5/native/launch-navigator.md
+++ b/versioned_docs/version-v5/native/launch-navigator.md
@@ -51,14 +51,14 @@ Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install uk.co.workingedge.phonegap.plugin.launchnavigator {'\n'}$ npm install @awesome-cordova-plugins/launch-navigator{' '}
-      {'\n'}$ ionic cap sync
+      $ npm install uk.co.workingedge.phonegap.plugin.launchnavigator {'\n'}$ npm install
+      @awesome-cordova-plugins/launch-navigator {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator {'\n'}$ npm install @awesome-cordova-plugins/launch-navigator{' '}
-      {'\n'}
+      $ ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator {'\n'}$ npm install
+      @awesome-cordova-plugins/launch-navigator {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/launch-review.md b/versioned_docs/version-v5/native/launch-review.md
index 0e2445de321..d4a94e4675f 100644
--- a/versioned_docs/version-v5/native/launch-review.md
+++ b/versioned_docs/version-v5/native/launch-review.md
@@ -54,7 +54,8 @@ Assists in leaving user reviews/ratings in the App Stores.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-launch-review {'\n'}$ npm install @awesome-cordova-plugins/launch-review {'\n'}$ ionic cap sync
+      $ npm install cordova-launch-review {'\n'}$ npm install @awesome-cordova-plugins/launch-review {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/line-login.md b/versioned_docs/version-v5/native/line-login.md
index 902e5cf3184..bf1f45fe56b 100644
--- a/versioned_docs/version-v5/native/line-login.md
+++ b/versioned_docs/version-v5/native/line-login.md
@@ -51,12 +51,14 @@ The function login, logs out, acquires, verifies, and refreshes the access token
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-line-login-plugin {'\n'}$ npm install @awesome-cordova-plugins/line-login {'\n'}$ ionic cap sync
+      $ npm install cordova-line-login-plugin {'\n'}$ npm install @awesome-cordova-plugins/line-login {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-line-login-plugin {'\n'}$ npm install @awesome-cordova-plugins/line-login {'\n'}
+      $ ionic cordova plugin add cordova-line-login-plugin {'\n'}$ npm install @awesome-cordova-plugins/line-login{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/local-notifications.md b/versioned_docs/version-v5/native/local-notifications.md
index 4252fcc8de2..64404ab71e9 100644
--- a/versioned_docs/version-v5/native/local-notifications.md
+++ b/versioned_docs/version-v5/native/local-notifications.md
@@ -58,14 +58,14 @@ This plugin allows you to display local notifications on the device
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-local-notification {'\n'}$ npm install @awesome-cordova-plugins/local-notifications {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-local-notification {'\n'}$ npm install @awesome-cordova-plugins/local-notifications{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-local-notification {'\n'}$ npm install @awesome-cordova-plugins/local-notifications{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-local-notification {'\n'}$ npm install
+      @awesome-cordova-plugins/local-notifications {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/location-accuracy.md b/versioned_docs/version-v5/native/location-accuracy.md
index 235ac8bf537..e8e8d19153c 100644
--- a/versioned_docs/version-v5/native/location-accuracy.md
+++ b/versioned_docs/version-v5/native/location-accuracy.md
@@ -56,14 +56,14 @@ This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-request-location-accuracy {'\n'}$ npm install @awesome-cordova-plugins/location-accuracy {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-request-location-accuracy {'\n'}$ npm install
+      @awesome-cordova-plugins/location-accuracy {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-request-location-accuracy {'\n'}$ npm install @awesome-cordova-plugins/location-accuracy{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-request-location-accuracy {'\n'}$ npm install
+      @awesome-cordova-plugins/location-accuracy {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/lottie-splash-screen.md b/versioned_docs/version-v5/native/lottie-splash-screen.md
index aed3e248876..7ae02b3cf6d 100644
--- a/versioned_docs/version-v5/native/lottie-splash-screen.md
+++ b/versioned_docs/version-v5/native/lottie-splash-screen.md
@@ -56,14 +56,14 @@ Cordova plugin to show bodymovin/Lottie animations as the splash screen with Air
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-lottie-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/lottie-splash-screen {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-lottie-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/lottie-splash-screen{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-lottie-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/lottie-splash-screen{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-lottie-splashscreen {'\n'}$ npm install
+      @awesome-cordova-plugins/lottie-splash-screen {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/media-capture.md b/versioned_docs/version-v5/native/media-capture.md
index 0bf7c07a06e..3a8d072524b 100644
--- a/versioned_docs/version-v5/native/media-capture.md
+++ b/versioned_docs/version-v5/native/media-capture.md
@@ -53,12 +53,14 @@ Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please s
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-media-capture {'\n'}$ npm install @awesome-cordova-plugins/media-capture {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-media-capture {'\n'}$ npm install @awesome-cordova-plugins/media-capture {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-media-capture {'\n'}$ npm install @awesome-cordova-plugins/media-capture {'\n'}
+      $ ionic cordova plugin add cordova-plugin-media-capture {'\n'}$ npm install @awesome-cordova-plugins/media-capture{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/mlkit-translate.md b/versioned_docs/version-v5/native/mlkit-translate.md
index 3e1c138536f..ba3f5e642ae 100644
--- a/versioned_docs/version-v5/native/mlkit-translate.md
+++ b/versioned_docs/version-v5/native/mlkit-translate.md
@@ -56,13 +56,14 @@ Plugin that implements MLKit Translation and Language Identification features.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-mlkit-translate {'\n'}$ npm install @awesome-cordova-plugins/mlkit-translate {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-mlkit-translate {'\n'}$ npm install @awesome-cordova-plugins/mlkit-translate {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-mlkit-translate {'\n'}$ npm install @awesome-cordova-plugins/mlkit-translate {'\n'}
+      $ ionic cordova plugin add cordova-plugin-mlkit-translate {'\n'}$ npm install
+      @awesome-cordova-plugins/mlkit-translate {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/mobile-messaging.md b/versioned_docs/version-v5/native/mobile-messaging.md
index eb861411962..2b6718c4167 100644
--- a/versioned_docs/version-v5/native/mobile-messaging.md
+++ b/versioned_docs/version-v5/native/mobile-messaging.md
@@ -60,13 +60,14 @@ For more info see [Cordova plugin docs](https://github.com/infobip/mobile-messag
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install com-infobip-plugins-mobilemessaging {'\n'}$ npm install @awesome-cordova-plugins/mobile-messaging {'\n'}$ ionic
-      cap sync
+      $ npm install com-infobip-plugins-mobilemessaging {'\n'}$ npm install @awesome-cordova-plugins/mobile-messaging{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add com-infobip-plugins-mobilemessaging {'\n'}$ npm install @awesome-cordova-plugins/mobile-messaging {'\n'}
+      $ ionic cordova plugin add com-infobip-plugins-mobilemessaging {'\n'}$ npm install
+      @awesome-cordova-plugins/mobile-messaging {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/multiple-document-picker.md b/versioned_docs/version-v5/native/multiple-document-picker.md
index 88e9ff70e64..882b443c1a3 100644
--- a/versioned_docs/version-v5/native/multiple-document-picker.md
+++ b/versioned_docs/version-v5/native/multiple-document-picker.md
@@ -56,15 +56,14 @@ This plugin allows users to pick multiple documents/images at once
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-multiple-documents-picker {'\n'}$ npm install @awesome-cordova-plugins/multiple-document-picker {
-        '\n'
-      }$ ionic cap sync
+      $ npm install cordova-plugin-multiple-documents-picker {'\n'}$ npm install
+      @awesome-cordova-plugins/multiple-document-picker {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-multiple-documents-picker {'\n'}$ npm install @awesome-cordova-plugins/multiple-document-picker{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-multiple-documents-picker {'\n'}$ npm install
+      @awesome-cordova-plugins/multiple-document-picker {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/music-controls.md b/versioned_docs/version-v5/native/music-controls.md
index 019066dbc26..c7c46a69cd7 100644
--- a/versioned_docs/version-v5/native/music-controls.md
+++ b/versioned_docs/version-v5/native/music-controls.md
@@ -58,13 +58,14 @@ Handle also headset event (plug, unplug, headset button).
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-music-controls2 {'\n'}$ npm install @awesome-cordova-plugins/music-controls {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-music-controls2 {'\n'}$ npm install @awesome-cordova-plugins/music-controls {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-music-controls2 {'\n'}$ npm install @awesome-cordova-plugins/music-controls {'\n'}
+      $ ionic cordova plugin add cordova-plugin-music-controls2 {'\n'}$ npm install
+      @awesome-cordova-plugins/music-controls {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/native-audio.md b/versioned_docs/version-v5/native/native-audio.md
index f482b8374cc..5c61f737e42 100644
--- a/versioned_docs/version-v5/native/native-audio.md
+++ b/versioned_docs/version-v5/native/native-audio.md
@@ -56,12 +56,14 @@ Native Audio Playback
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-nativeaudio {'\n'}$ npm install @awesome-cordova-plugins/native-audio {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-nativeaudio {'\n'}$ npm install @awesome-cordova-plugins/native-audio {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-nativeaudio {'\n'}$ npm install @awesome-cordova-plugins/native-audio {'\n'}
+      $ ionic cordova plugin add cordova-plugin-nativeaudio {'\n'}$ npm install @awesome-cordova-plugins/native-audio{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/native-geocoder.md b/versioned_docs/version-v5/native/native-geocoder.md
index d79cfb6853d..ac159dd4c44 100644
--- a/versioned_docs/version-v5/native/native-geocoder.md
+++ b/versioned_docs/version-v5/native/native-geocoder.md
@@ -56,13 +56,14 @@ Cordova plugin for native forward and reverse geocoding
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-nativegeocoder {'\n'}$ npm install @awesome-cordova-plugins/native-geocoder {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-nativegeocoder {'\n'}$ npm install @awesome-cordova-plugins/native-geocoder {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-nativegeocoder {'\n'}$ npm install @awesome-cordova-plugins/native-geocoder {'\n'}
+      $ ionic cordova plugin add cordova-plugin-nativegeocoder {'\n'}$ npm install
+      @awesome-cordova-plugins/native-geocoder {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/native-keyboard.md b/versioned_docs/version-v5/native/native-keyboard.md
index c6659691d56..34cd76a9613 100644
--- a/versioned_docs/version-v5/native/native-keyboard.md
+++ b/versioned_docs/version-v5/native/native-keyboard.md
@@ -56,13 +56,14 @@ A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cor
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-native-keyboard {'\n'}$ npm install @awesome-cordova-plugins/native-keyboard {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-native-keyboard {'\n'}$ npm install @awesome-cordova-plugins/native-keyboard {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-native-keyboard {'\n'}$ npm install @awesome-cordova-plugins/native-keyboard {'\n'}
+      $ ionic cordova plugin add cordova-plugin-native-keyboard {'\n'}$ npm install
+      @awesome-cordova-plugins/native-keyboard {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/native-page-transitions.md b/versioned_docs/version-v5/native/native-page-transitions.md
index c5a652a43d8..eb6f0801889 100644
--- a/versioned_docs/version-v5/native/native-page-transitions.md
+++ b/versioned_docs/version-v5/native/native-page-transitions.md
@@ -56,15 +56,14 @@ The Native Page Transitions plugin uses native hardware acceleration to animate
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install com.telerik.plugins.nativepagetransitions {'\n'}$ npm install @awesome-cordova-plugins/native-page-transitions {
-        '\n'
-      }$ ionic cap sync
+      $ npm install com.telerik.plugins.nativepagetransitions {'\n'}$ npm install
+      @awesome-cordova-plugins/native-page-transitions {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add com.telerik.plugins.nativepagetransitions {'\n'}$ npm install @awesome-cordova-plugins/native-page-transitions{' '}
-      {'\n'}
+      $ ionic cordova plugin add com.telerik.plugins.nativepagetransitions {'\n'}$ npm install
+      @awesome-cordova-plugins/native-page-transitions {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/native-storage.md b/versioned_docs/version-v5/native/native-storage.md
index 1d4d382cd1a..312daf6f6d4 100644
--- a/versioned_docs/version-v5/native/native-storage.md
+++ b/versioned_docs/version-v5/native/native-storage.md
@@ -58,12 +58,14 @@ Native storage of variables in Android and iOS
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-nativestorage {'\n'}$ npm install @awesome-cordova-plugins/native-storage {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-nativestorage {'\n'}$ npm install @awesome-cordova-plugins/native-storage {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-nativestorage {'\n'}$ npm install @awesome-cordova-plugins/native-storage {'\n'}
+      $ ionic cordova plugin add cordova-plugin-nativestorage {'\n'}$ npm install
+      @awesome-cordova-plugins/native-storage {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/network-interface.md b/versioned_docs/version-v5/native/network-interface.md
index bd11e719886..958c60e3ad3 100644
--- a/versioned_docs/version-v5/native/network-interface.md
+++ b/versioned_docs/version-v5/native/network-interface.md
@@ -56,13 +56,14 @@ Network interface information plugin for Cordova/PhoneGap that supports Android,
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-networkinterface {'\n'}$ npm install @awesome-cordova-plugins/network-interface {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-networkinterface {'\n'}$ npm install @awesome-cordova-plugins/network-interface{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-networkinterface {'\n'}$ npm install @awesome-cordova-plugins/network-interface {'\n'}
+      $ ionic cordova plugin add cordova-plugin-networkinterface {'\n'}$ npm install
+      @awesome-cordova-plugins/network-interface {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/network.md b/versioned_docs/version-v5/native/network.md
index 852052de559..c0c7d2fdd58 100644
--- a/versioned_docs/version-v5/native/network.md
+++ b/versioned_docs/version-v5/native/network.md
@@ -58,12 +58,14 @@ Requires Cordova plugin: cordova-plugin-network-information. For more info, plea
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-network-information {'\n'}$ npm install @awesome-cordova-plugins/network {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-network-information {'\n'}$ npm install @awesome-cordova-plugins/network {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-network-information {'\n'}$ npm install @awesome-cordova-plugins/network {'\n'}
+      $ ionic cordova plugin add cordova-plugin-network-information {'\n'}$ npm install @awesome-cordova-plugins/network{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/onesignal.md b/versioned_docs/version-v5/native/onesignal.md
index d34f52020a8..90afb4face1 100644
--- a/versioned_docs/version-v5/native/onesignal.md
+++ b/versioned_docs/version-v5/native/onesignal.md
@@ -121,7 +121,8 @@ module.exports = function(context) {
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install onesignal-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/onesignal {'\n'}$ ionic cap sync
+      $ npm install onesignal-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/onesignal {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/open-native-settings.md b/versioned_docs/version-v5/native/open-native-settings.md
index 082bcf9b2bf..0b2a77d0b31 100644
--- a/versioned_docs/version-v5/native/open-native-settings.md
+++ b/versioned_docs/version-v5/native/open-native-settings.md
@@ -51,13 +51,14 @@ Plugin to open native screens of iOS/android settings
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-open-native-settings {'\n'}$ npm install @awesome-cordova-plugins/open-native-settings {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-open-native-settings {'\n'}$ npm install @awesome-cordova-plugins/open-native-settings{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-open-native-settings {'\n'}$ npm install @awesome-cordova-plugins/open-native-settings {'\n'}
+      $ ionic cordova plugin add cordova-open-native-settings {'\n'}$ npm install
+      @awesome-cordova-plugins/open-native-settings {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/pdf-generator.md b/versioned_docs/version-v5/native/pdf-generator.md
index 4dd0e008874..4677f26ab02 100644
--- a/versioned_docs/version-v5/native/pdf-generator.md
+++ b/versioned_docs/version-v5/native/pdf-generator.md
@@ -51,7 +51,8 @@ Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and a
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-pdf-generator {'\n'}$ npm install @awesome-cordova-plugins/pdf-generator {'\n'}$ ionic cap sync
+      $ npm install cordova-pdf-generator {'\n'}$ npm install @awesome-cordova-plugins/pdf-generator {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/photo-library.md b/versioned_docs/version-v5/native/photo-library.md
index 451010f40bc..132c2ca647d 100644
--- a/versioned_docs/version-v5/native/photo-library.md
+++ b/versioned_docs/version-v5/native/photo-library.md
@@ -53,12 +53,14 @@ cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-photo-library {'\n'}$ npm install @awesome-cordova-plugins/photo-library {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-photo-library {'\n'}$ npm install @awesome-cordova-plugins/photo-library {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-photo-library {'\n'}$ npm install @awesome-cordova-plugins/photo-library {'\n'}
+      $ ionic cordova plugin add cordova-plugin-photo-library {'\n'}$ npm install @awesome-cordova-plugins/photo-library{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/photo-viewer.md b/versioned_docs/version-v5/native/photo-viewer.md
index d8c419cbc70..f9b3b0ff100 100644
--- a/versioned_docs/version-v5/native/photo-viewer.md
+++ b/versioned_docs/version-v5/native/photo-viewer.md
@@ -51,12 +51,14 @@ This plugin can display your image in full screen with the ability to pan, zoom,
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install com-sarriaroman-photoviewer {'\n'}$ npm install @awesome-cordova-plugins/photo-viewer {'\n'}$ ionic cap sync
+      $ npm install com-sarriaroman-photoviewer {'\n'}$ npm install @awesome-cordova-plugins/photo-viewer {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add com-sarriaroman-photoviewer {'\n'}$ npm install @awesome-cordova-plugins/photo-viewer {'\n'}
+      $ ionic cordova plugin add com-sarriaroman-photoviewer {'\n'}$ npm install @awesome-cordova-plugins/photo-viewer{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/pspdfkit-cordova.md b/versioned_docs/version-v5/native/pspdfkit-cordova.md
index 575f1d29187..944800d5e5d 100644
--- a/versioned_docs/version-v5/native/pspdfkit-cordova.md
+++ b/versioned_docs/version-v5/native/pspdfkit-cordova.md
@@ -51,7 +51,8 @@ The official plugin to use PSPDFKit with Cordova and Ionic.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install pspdfkit-cordova {'\n'}$ npm install @awesome-cordova-plugins/pspdfkit-cordova {'\n'}$ ionic cap sync
+      $ npm install pspdfkit-cordova {'\n'}$ npm install @awesome-cordova-plugins/pspdfkit-cordova {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/purchases.md b/versioned_docs/version-v5/native/purchases.md
index 42eb78e8dae..64b40e4e045 100644
--- a/versioned_docs/version-v5/native/purchases.md
+++ b/versioned_docs/version-v5/native/purchases.md
@@ -69,12 +69,14 @@ For more detailed information, you can view our complete documentation at [docs.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-purchases@2.0.0 {'\n'}$ npm install @awesome-cordova-plugins/purchases {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-purchases@2.0.0 {'\n'}$ npm install @awesome-cordova-plugins/purchases {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-purchases@2.0.0 {'\n'}$ npm install @awesome-cordova-plugins/purchases {'\n'}
+      $ ionic cordova plugin add cordova-plugin-purchases@2.0.0 {'\n'}$ npm install @awesome-cordova-plugins/purchases{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/pushape-push.md b/versioned_docs/version-v5/native/pushape-push.md
index 16223c8a195..0d91525aab5 100644
--- a/versioned_docs/version-v5/native/pushape-push.md
+++ b/versioned_docs/version-v5/native/pushape-push.md
@@ -58,7 +58,8 @@ For TypeScript users, see the [Pushape plugin docs about using TypeScript for cu
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install pushape-cordova-push {'\n'}$ npm install @awesome-cordova-plugins/pushape-push {'\n'}$ ionic cap sync
+      $ npm install pushape-cordova-push {'\n'}$ npm install @awesome-cordova-plugins/pushape-push {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/safari-view-controller.md b/versioned_docs/version-v5/native/safari-view-controller.md
index 1a16ebc3434..3c981a258a5 100644
--- a/versioned_docs/version-v5/native/safari-view-controller.md
+++ b/versioned_docs/version-v5/native/safari-view-controller.md
@@ -58,14 +58,14 @@ Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, p
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-safariviewcontroller {'\n'}$ npm install @awesome-cordova-plugins/safari-view-controller {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-safariviewcontroller {'\n'}$ npm install
+      @awesome-cordova-plugins/safari-view-controller {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-safariviewcontroller {'\n'}$ npm install @awesome-cordova-plugins/safari-view-controller{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-safariviewcontroller {'\n'}$ npm install
+      @awesome-cordova-plugins/safari-view-controller {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/screen-orientation.md b/versioned_docs/version-v5/native/screen-orientation.md
index 83ada8ab234..0360633bf0c 100644
--- a/versioned_docs/version-v5/native/screen-orientation.md
+++ b/versioned_docs/version-v5/native/screen-orientation.md
@@ -58,13 +58,14 @@ Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, ple
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-screen-orientation {'\n'}$ npm install @awesome-cordova-plugins/screen-orientation {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-screen-orientation {'\n'}$ npm install @awesome-cordova-plugins/screen-orientation{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-screen-orientation {'\n'}$ npm install @awesome-cordova-plugins/screen-orientation {'\n'}
+      $ ionic cordova plugin add cordova-plugin-screen-orientation {'\n'}$ npm install
+      @awesome-cordova-plugins/screen-orientation {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/service-discovery.md b/versioned_docs/version-v5/native/service-discovery.md
index b3d70d13cd1..5ff270d2136 100644
--- a/versioned_docs/version-v5/native/service-discovery.md
+++ b/versioned_docs/version-v5/native/service-discovery.md
@@ -56,12 +56,14 @@ Simple plugin to get any SSDP / UPnP / DLNA service on a local network
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-discovery {'\n'}$ npm install @awesome-cordova-plugins/service-discovery {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-discovery {'\n'}$ npm install @awesome-cordova-plugins/service-discovery {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-discovery {'\n'}$ npm install @awesome-cordova-plugins/service-discovery {'\n'}
+      $ ionic cordova plugin add cordova-plugin-discovery {'\n'}$ npm install @awesome-cordova-plugins/service-discovery{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/sign-in-with-apple.md b/versioned_docs/version-v5/native/sign-in-with-apple.md
index bc6d98cf8fe..89c3f8e2f9c 100644
--- a/versioned_docs/version-v5/native/sign-in-with-apple.md
+++ b/versioned_docs/version-v5/native/sign-in-with-apple.md
@@ -61,13 +61,14 @@ _Source:_ https://developer.apple.com/sign-in-with-apple/
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-sign-in-with-apple {'\n'}$ npm install @awesome-cordova-plugins/sign-in-with-apple {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-sign-in-with-apple {'\n'}$ npm install @awesome-cordova-plugins/sign-in-with-apple{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-sign-in-with-apple {'\n'}$ npm install @awesome-cordova-plugins/sign-in-with-apple {'\n'}
+      $ ionic cordova plugin add cordova-plugin-sign-in-with-apple {'\n'}$ npm install
+      @awesome-cordova-plugins/sign-in-with-apple {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/smartlook.md b/versioned_docs/version-v5/native/smartlook.md
index 8b538751c03..157b4433005 100644
--- a/versioned_docs/version-v5/native/smartlook.md
+++ b/versioned_docs/version-v5/native/smartlook.md
@@ -52,15 +52,14 @@ Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install https://github.com/smartlook/cordova-smartlook.git {'\n'}$ npm install @awesome-cordova-plugins/smartlook {
-        '\n'
-      }$ ionic cap sync
+      $ npm install https://github.com/smartlook/cordova-smartlook.git {'\n'}$ npm install
+      @awesome-cordova-plugins/smartlook {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add https://github.com/smartlook/cordova-smartlook.git {'\n'}$ npm install @awesome-cordova-plugins/smartlook{' '}
-      {'\n'}
+      $ ionic cordova plugin add https://github.com/smartlook/cordova-smartlook.git {'\n'}$ npm install
+      @awesome-cordova-plugins/smartlook {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/sms-retriever.md b/versioned_docs/version-v5/native/sms-retriever.md
index 32ff4b59b79..7d22e92550d 100644
--- a/versioned_docs/version-v5/native/sms-retriever.md
+++ b/versioned_docs/version-v5/native/sms-retriever.md
@@ -56,13 +56,14 @@ This plugin retrives the SMS which arrive without requiring READ permissions.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-sms-retriever-manager {'\n'}$ npm install @awesome-cordova-plugins/sms-retriever {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-sms-retriever-manager {'\n'}$ npm install @awesome-cordova-plugins/sms-retriever{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-sms-retriever-manager {'\n'}$ npm install @awesome-cordova-plugins/sms-retriever {'\n'}
+      $ ionic cordova plugin add cordova-plugin-sms-retriever-manager {'\n'}$ npm install
+      @awesome-cordova-plugins/sms-retriever {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/social-sharing.md b/versioned_docs/version-v5/native/social-sharing.md
index 47cc115efb6..a1bf1887957 100644
--- a/versioned_docs/version-v5/native/social-sharing.md
+++ b/versioned_docs/version-v5/native/social-sharing.md
@@ -60,13 +60,14 @@ For Browser usage check out the Web Share API docs: https://github.com/EddyVerbr
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-x-socialsharing {'\n'}$ npm install @awesome-cordova-plugins/social-sharing {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-x-socialsharing {'\n'}$ npm install @awesome-cordova-plugins/social-sharing {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-x-socialsharing {'\n'}$ npm install @awesome-cordova-plugins/social-sharing {'\n'}
+      $ ionic cordova plugin add cordova-plugin-x-socialsharing {'\n'}$ npm install
+      @awesome-cordova-plugins/social-sharing {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/speech-recognition.md b/versioned_docs/version-v5/native/speech-recognition.md
index 0995eb0b899..8fd073a93a7 100644
--- a/versioned_docs/version-v5/native/speech-recognition.md
+++ b/versioned_docs/version-v5/native/speech-recognition.md
@@ -56,13 +56,14 @@ This plugin does speech recognition using cloud services
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-speechrecognition {'\n'}$ npm install @awesome-cordova-plugins/speech-recognition {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-speechrecognition {'\n'}$ npm install @awesome-cordova-plugins/speech-recognition{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-speechrecognition {'\n'}$ npm install @awesome-cordova-plugins/speech-recognition {'\n'}
+      $ ionic cordova plugin add cordova-plugin-speechrecognition {'\n'}$ npm install
+      @awesome-cordova-plugins/speech-recognition {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/spinner-dialog.md b/versioned_docs/version-v5/native/spinner-dialog.md
index b6d3960d46c..2d01b08feef 100644
--- a/versioned_docs/version-v5/native/spinner-dialog.md
+++ b/versioned_docs/version-v5/native/spinner-dialog.md
@@ -58,13 +58,14 @@ Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-native-spinner {'\n'}$ npm install @awesome-cordova-plugins/spinner-dialog {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-native-spinner {'\n'}$ npm install @awesome-cordova-plugins/spinner-dialog {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-native-spinner {'\n'}$ npm install @awesome-cordova-plugins/spinner-dialog {'\n'}
+      $ ionic cordova plugin add cordova-plugin-native-spinner {'\n'}$ npm install
+      @awesome-cordova-plugins/spinner-dialog {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/splash-screen.md b/versioned_docs/version-v5/native/splash-screen.md
index 7c7dc839629..91fc6a5c40d 100644
--- a/versioned_docs/version-v5/native/splash-screen.md
+++ b/versioned_docs/version-v5/native/splash-screen.md
@@ -53,12 +53,14 @@ This plugin displays and hides a splash screen during application launch. The me
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/splash-screen {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/splash-screen {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/splash-screen {'\n'}
+      $ ionic cordova plugin add cordova-plugin-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/splash-screen{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/spotify-auth.md b/versioned_docs/version-v5/native/spotify-auth.md
index a0cfbaadfe0..dc91d937234 100644
--- a/versioned_docs/version-v5/native/spotify-auth.md
+++ b/versioned_docs/version-v5/native/spotify-auth.md
@@ -53,7 +53,8 @@ Cordova plugin for authenticating with Spotify
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-spotify-oauth {'\n'}$ npm install @awesome-cordova-plugins/spotify-auth {'\n'}$ ionic cap sync
+      $ npm install cordova-spotify-oauth {'\n'}$ npm install @awesome-cordova-plugins/spotify-auth {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/sqlite-db-copy.md b/versioned_docs/version-v5/native/sqlite-db-copy.md
index 6e26b561b7e..3898c370857 100644
--- a/versioned_docs/version-v5/native/sqlite-db-copy.md
+++ b/versioned_docs/version-v5/native/sqlite-db-copy.md
@@ -51,12 +51,14 @@ This plugin does something
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-dbcopy {'\n'}$ npm install @awesome-cordova-plugins/sqlite-db-copy {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-dbcopy {'\n'}$ npm install @awesome-cordova-plugins/sqlite-db-copy {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-dbcopy {'\n'}$ npm install @awesome-cordova-plugins/sqlite-db-copy {'\n'}
+      $ ionic cordova plugin add cordova-plugin-dbcopy {'\n'}$ npm install @awesome-cordova-plugins/sqlite-db-copy{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/sqlite-porter.md b/versioned_docs/version-v5/native/sqlite-porter.md
index e27eff537c4..835d3b4de9e 100644
--- a/versioned_docs/version-v5/native/sqlite-porter.md
+++ b/versioned_docs/version-v5/native/sqlite-porter.md
@@ -51,14 +51,14 @@ This Cordova/Phonegap plugin can be used to import/export to/from a SQLite datab
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install uk.co.workingedge.cordova.plugin.sqliteporter {'\n'}$ npm install @awesome-cordova-plugins/sqlite-porter {'\n'}
-      $ ionic cap sync
+      $ npm install uk.co.workingedge.cordova.plugin.sqliteporter {'\n'}$ npm install
+      @awesome-cordova-plugins/sqlite-porter {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter {'\n'}$ npm install @awesome-cordova-plugins/sqlite-porter{' '}
-      {'\n'}
+      $ ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter {'\n'}$ npm install
+      @awesome-cordova-plugins/sqlite-porter {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/star-prnt.md b/versioned_docs/version-v5/native/star-prnt.md
index fadcac4a976..4e905ff2bf0 100644
--- a/versioned_docs/version-v5/native/star-prnt.md
+++ b/versioned_docs/version-v5/native/star-prnt.md
@@ -51,7 +51,8 @@ import CodeBlock from '@theme/CodeBlock';
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-starprnt {'\n'}$ npm install @awesome-cordova-plugins/star-prnt {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-starprnt {'\n'}$ npm install @awesome-cordova-plugins/star-prnt {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/status-bar.md b/versioned_docs/version-v5/native/status-bar.md
index fb1bbf6a3cf..de85a052ac6 100644
--- a/versioned_docs/version-v5/native/status-bar.md
+++ b/versioned_docs/version-v5/native/status-bar.md
@@ -55,7 +55,8 @@ Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see t
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-statusbar {'\n'}$ npm install @awesome-cordova-plugins/status-bar {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-statusbar {'\n'}$ npm install @awesome-cordova-plugins/status-bar {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/streaming-media.md b/versioned_docs/version-v5/native/streaming-media.md
index 37e6a8db384..6f2960988a2 100644
--- a/versioned_docs/version-v5/native/streaming-media.md
+++ b/versioned_docs/version-v5/native/streaming-media.md
@@ -56,13 +56,14 @@ This plugin allows you to stream audio and video in a fullscreen, native player
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-streaming-media {'\n'}$ npm install @awesome-cordova-plugins/streaming-media {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-streaming-media {'\n'}$ npm install @awesome-cordova-plugins/streaming-media {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-streaming-media {'\n'}$ npm install @awesome-cordova-plugins/streaming-media {'\n'}
+      $ ionic cordova plugin add cordova-plugin-streaming-media {'\n'}$ npm install
+      @awesome-cordova-plugins/streaming-media {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/taptic-engine.md b/versioned_docs/version-v5/native/taptic-engine.md
index da541aaaf1c..12dcc7c415e 100644
--- a/versioned_docs/version-v5/native/taptic-engine.md
+++ b/versioned_docs/version-v5/native/taptic-engine.md
@@ -56,12 +56,14 @@ An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-taptic-engine {'\n'}$ npm install @awesome-cordova-plugins/taptic-engine {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-taptic-engine {'\n'}$ npm install @awesome-cordova-plugins/taptic-engine {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-taptic-engine {'\n'}$ npm install @awesome-cordova-plugins/taptic-engine {'\n'}
+      $ ionic cordova plugin add cordova-plugin-taptic-engine {'\n'}$ npm install @awesome-cordova-plugins/taptic-engine{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/tealium-adidentifier.md b/versioned_docs/version-v5/native/tealium-adidentifier.md
index 15d954f1b88..5e677c2bedb 100644
--- a/versioned_docs/version-v5/native/tealium-adidentifier.md
+++ b/versioned_docs/version-v5/native/tealium-adidentifier.md
@@ -52,13 +52,14 @@ Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install tealium-cordova-adidentifier {'\n'}$ npm install @awesome-cordova-plugins/tealium-adidentifier {'\n'}$ ionic
-      cap sync
+      $ npm install tealium-cordova-adidentifier {'\n'}$ npm install @awesome-cordova-plugins/tealium-adidentifier{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add tealium-cordova-adidentifier {'\n'}$ npm install @awesome-cordova-plugins/tealium-adidentifier {'\n'}
+      $ ionic cordova plugin add tealium-cordova-adidentifier {'\n'}$ npm install
+      @awesome-cordova-plugins/tealium-adidentifier {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/tealium-installreferrer.md b/versioned_docs/version-v5/native/tealium-installreferrer.md
index bb1c89d210e..48eab3ac330 100644
--- a/versioned_docs/version-v5/native/tealium-installreferrer.md
+++ b/versioned_docs/version-v5/native/tealium-installreferrer.md
@@ -52,14 +52,14 @@ Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install tealium-cordova-installreferrer {'\n'}$ npm install @awesome-cordova-plugins/tealium-installreferrer {'\n'}$
-      ionic cap sync
+      $ npm install tealium-cordova-installreferrer {'\n'}$ npm install @awesome-cordova-plugins/tealium-installreferrer{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add tealium-cordova-installreferrer {'\n'}$ npm install @awesome-cordova-plugins/tealium-installreferrer{' '}
-      {'\n'}
+      $ ionic cordova plugin add tealium-cordova-installreferrer {'\n'}$ npm install
+      @awesome-cordova-plugins/tealium-installreferrer {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/theme-detection.md b/versioned_docs/version-v5/native/theme-detection.md
index 0a0f8449aa1..f3db4dfa063 100644
--- a/versioned_docs/version-v5/native/theme-detection.md
+++ b/versioned_docs/version-v5/native/theme-detection.md
@@ -56,13 +56,14 @@ Cordova plugin to detect whether dark mode is enabled or not
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-theme-detection {'\n'}$ npm install @awesome-cordova-plugins/theme-detection {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-plugin-theme-detection {'\n'}$ npm install @awesome-cordova-plugins/theme-detection {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-theme-detection {'\n'}$ npm install @awesome-cordova-plugins/theme-detection {'\n'}
+      $ ionic cordova plugin add cordova-plugin-theme-detection {'\n'}$ npm install
+      @awesome-cordova-plugins/theme-detection {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/three-dee-touch.md b/versioned_docs/version-v5/native/three-dee-touch.md
index 20a8a8fd3ab..4803653f6de 100644
--- a/versioned_docs/version-v5/native/three-dee-touch.md
+++ b/versioned_docs/version-v5/native/three-dee-touch.md
@@ -58,12 +58,14 @@ Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-3dtouch {'\n'}$ npm install @awesome-cordova-plugins/three-dee-touch {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-3dtouch {'\n'}$ npm install @awesome-cordova-plugins/three-dee-touch {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-3dtouch {'\n'}$ npm install @awesome-cordova-plugins/three-dee-touch {'\n'}
+      $ ionic cordova plugin add cordova-plugin-3dtouch {'\n'}$ npm install @awesome-cordova-plugins/three-dee-touch{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/unvired-cordova-sdk.md b/versioned_docs/version-v5/native/unvired-cordova-sdk.md
index 495e440690d..1b62b80b954 100644
--- a/versioned_docs/version-v5/native/unvired-cordova-sdk.md
+++ b/versioned_docs/version-v5/native/unvired-cordova-sdk.md
@@ -60,14 +60,14 @@ pod repo update
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install https://github.com/unvired/cordova-plugin-unvired-sdk {'\n'}$ npm install @awesome-cordova-plugins/unvired-cordova-sdk{' '}
-      {'\n'}$ ionic cap sync
+      $ npm install https://github.com/unvired/cordova-plugin-unvired-sdk {'\n'}$ npm install
+      @awesome-cordova-plugins/unvired-cordova-sdk {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add https://github.com/unvired/cordova-plugin-unvired-sdk {'\n'}$ npm install @awesome-cordova-plugins/unvired-cordova-sdk{' '}
-      {'\n'}
+      $ ionic cordova plugin add https://github.com/unvired/cordova-plugin-unvired-sdk {'\n'}$ npm install
+      @awesome-cordova-plugins/unvired-cordova-sdk {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/urbanairship.md b/versioned_docs/version-v5/native/urbanairship.md
index 5c9b03d1b30..62aaf8cd832 100644
--- a/versioned_docs/version-v5/native/urbanairship.md
+++ b/versioned_docs/version-v5/native/urbanairship.md
@@ -51,7 +51,8 @@ This plugin does something
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install urbanairship-cordova {'\n'}$ npm install @awesome-cordova-plugins/urbanairship {'\n'}$ ionic cap sync
+      $ npm install urbanairship-cordova {'\n'}$ npm install @awesome-cordova-plugins/urbanairship {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md b/versioned_docs/version-v5/native/usabilla-cordova-sdk.md
index 6edc06ec17e..719f38dd9d5 100644
--- a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md
+++ b/versioned_docs/version-v5/native/usabilla-cordova-sdk.md
@@ -54,12 +54,14 @@ For more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install usabilla-cordova {'\n'}$ npm install @awesome-cordova-plugins/usabilla-cordova-sdk {'\n'}$ ionic cap sync
+      $ npm install usabilla-cordova {'\n'}$ npm install @awesome-cordova-plugins/usabilla-cordova-sdk {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add usabilla-cordova {'\n'}$ npm install @awesome-cordova-plugins/usabilla-cordova-sdk {'\n'}
+      $ ionic cordova plugin add usabilla-cordova {'\n'}$ npm install @awesome-cordova-plugins/usabilla-cordova-sdk{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/vibration.md b/versioned_docs/version-v5/native/vibration.md
index 957becf3f63..9c105eeb202 100644
--- a/versioned_docs/version-v5/native/vibration.md
+++ b/versioned_docs/version-v5/native/vibration.md
@@ -51,7 +51,8 @@ Vibrates the device
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-vibration {'\n'}$ npm install @awesome-cordova-plugins/vibration {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-vibration {'\n'}$ npm install @awesome-cordova-plugins/vibration {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/video-editor.md b/versioned_docs/version-v5/native/video-editor.md
index e2b7539eec1..0e3804abf4d 100644
--- a/versioned_docs/version-v5/native/video-editor.md
+++ b/versioned_docs/version-v5/native/video-editor.md
@@ -51,12 +51,14 @@ Edit videos using native device APIs
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-video-editor {'\n'}$ npm install @awesome-cordova-plugins/video-editor {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-video-editor {'\n'}$ npm install @awesome-cordova-plugins/video-editor {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-video-editor {'\n'}$ npm install @awesome-cordova-plugins/video-editor {'\n'}
+      $ ionic cordova plugin add cordova-plugin-video-editor {'\n'}$ npm install @awesome-cordova-plugins/video-editor{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/video-player.md b/versioned_docs/version-v5/native/video-player.md
index 0dc835f6501..5c25b91954a 100644
--- a/versioned_docs/version-v5/native/video-player.md
+++ b/versioned_docs/version-v5/native/video-player.md
@@ -53,14 +53,14 @@ Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install https://github.com/moust/cordova-plugin-videoplayer.git {'\n'}$ npm install @awesome-cordova-plugins/video-player{' '}
-      {'\n'}$ ionic cap sync
+      $ npm install https://github.com/moust/cordova-plugin-videoplayer.git {'\n'}$ npm install
+      @awesome-cordova-plugins/video-player {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git {'\n'}$ npm install @awesome-cordova-plugins/video-player{' '}
-      {'\n'}
+      $ ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git {'\n'}$ npm install
+      @awesome-cordova-plugins/video-player {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/web-intent.md b/versioned_docs/version-v5/native/web-intent.md
index c58d35adfe5..24828a76e27 100644
--- a/versioned_docs/version-v5/native/web-intent.md
+++ b/versioned_docs/version-v5/native/web-intent.md
@@ -56,13 +56,14 @@ This Plugin provides a general purpose shim layer for the Android intent mechani
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install com-darryncampbell-cordova-plugin-intent {'\n'}$ npm install @awesome-cordova-plugins/web-intent {'\n'}$ ionic
-      cap sync
+      $ npm install com-darryncampbell-cordova-plugin-intent {'\n'}$ npm install @awesome-cordova-plugins/web-intent{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add com-darryncampbell-cordova-plugin-intent {'\n'}$ npm install @awesome-cordova-plugins/web-intent {'\n'}
+      $ ionic cordova plugin add com-darryncampbell-cordova-plugin-intent {'\n'}$ npm install
+      @awesome-cordova-plugins/web-intent {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/web-server.md b/versioned_docs/version-v5/native/web-server.md
index 422ae7f6981..9530c6dfc65 100644
--- a/versioned_docs/version-v5/native/web-server.md
+++ b/versioned_docs/version-v5/native/web-server.md
@@ -51,7 +51,8 @@ This plugin allows you to start a local dynamic content web server for android a
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-webserver {'\n'}$ npm install @awesome-cordova-plugins/web-server {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-webserver {'\n'}$ npm install @awesome-cordova-plugins/web-server {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/web-socket-server.md b/versioned_docs/version-v5/native/web-socket-server.md
index 6fb8463530b..84914561b56 100644
--- a/versioned_docs/version-v5/native/web-socket-server.md
+++ b/versioned_docs/version-v5/native/web-socket-server.md
@@ -56,13 +56,14 @@ This plugin allows you to run a single, lightweight, barebone WebSocket Server.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-websocket-server {'\n'}$ npm install @awesome-cordova-plugins/web-socket-server {'\n'}$ ionic
-      cap sync
+      $ npm install cordova-plugin-websocket-server {'\n'}$ npm install @awesome-cordova-plugins/web-socket-server{' '}
+      {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-websocket-server {'\n'}$ npm install @awesome-cordova-plugins/web-socket-server {'\n'}
+      $ ionic cordova plugin add cordova-plugin-websocket-server {'\n'}$ npm install
+      @awesome-cordova-plugins/web-socket-server {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/webengage.md b/versioned_docs/version-v5/native/webengage.md
index 53b07e9f0f4..f73d1d65596 100644
--- a/versioned_docs/version-v5/native/webengage.md
+++ b/versioned_docs/version-v5/native/webengage.md
@@ -51,7 +51,8 @@ Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-webengage {'\n'}$ npm install @awesome-cordova-plugins/webengage {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-webengage {'\n'}$ npm install @awesome-cordova-plugins/webengage {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/wheel-selector.md b/versioned_docs/version-v5/native/wheel-selector.md
index cddbf2ac964..c2825d358ae 100644
--- a/versioned_docs/version-v5/native/wheel-selector.md
+++ b/versioned_docs/version-v5/native/wheel-selector.md
@@ -56,13 +56,14 @@ Native wheel selector for Cordova (Android/iOS).
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-wheel-selector-plugin {'\n'}$ npm install @awesome-cordova-plugins/wheel-selector {'\n'}$ ionic cap
-      sync
+      $ npm install cordova-wheel-selector-plugin {'\n'}$ npm install @awesome-cordova-plugins/wheel-selector {'\n'}$
+      ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-wheel-selector-plugin {'\n'}$ npm install @awesome-cordova-plugins/wheel-selector {'\n'}
+      $ ionic cordova plugin add cordova-wheel-selector-plugin {'\n'}$ npm install
+      @awesome-cordova-plugins/wheel-selector {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/wifi-wizard-2.md b/versioned_docs/version-v5/native/wifi-wizard-2.md
index cd3e6725e4c..8c6053c32c2 100644
--- a/versioned_docs/version-v5/native/wifi-wizard-2.md
+++ b/versioned_docs/version-v5/native/wifi-wizard-2.md
@@ -53,12 +53,14 @@ This project is a fork of the WifiWizard plugin with fixes and updates, as well
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-wifiwizard2 {'\n'}$ npm install @awesome-cordova-plugins/wifi-wizard-2 {'\n'}$ ionic cap sync
+      $ npm install cordova-plugin-wifiwizard2 {'\n'}$ npm install @awesome-cordova-plugins/wifi-wizard-2 {'\n'}$ ionic
+      cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-wifiwizard2 {'\n'}$ npm install @awesome-cordova-plugins/wifi-wizard-2 {'\n'}
+      $ ionic cordova plugin add cordova-plugin-wifiwizard2 {'\n'}$ npm install @awesome-cordova-plugins/wifi-wizard-2{' '}
+      {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/native/wonderpush.md b/versioned_docs/version-v5/native/wonderpush.md
index d9dfd5d223f..8c68a25cfce 100644
--- a/versioned_docs/version-v5/native/wonderpush.md
+++ b/versioned_docs/version-v5/native/wonderpush.md
@@ -60,7 +60,8 @@ to retain your users and grow your audience while remaining fully GDPR compliant
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install wonderpush-cordova-sdk {'\n'}$ npm install @awesome-cordova-plugins/wonderpush {'\n'}$ ionic cap sync
+      $ npm install wonderpush-cordova-sdk {'\n'}$ npm install @awesome-cordova-plugins/wonderpush {'\n'}$ ionic cap
+      sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/youtube-video-player.md b/versioned_docs/version-v5/native/youtube-video-player.md
index 0bb9441620f..f0d98a4c856 100644
--- a/versioned_docs/version-v5/native/youtube-video-player.md
+++ b/versioned_docs/version-v5/native/youtube-video-player.md
@@ -51,14 +51,14 @@ Plays YouTube videos in Native YouTube App
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-youtube-video-player {'\n'}$ npm install @awesome-cordova-plugins/youtube-video-player {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-youtube-video-player {'\n'}$ npm install
+      @awesome-cordova-plugins/youtube-video-player {'\n'}$ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
     <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-youtube-video-player {'\n'}$ npm install @awesome-cordova-plugins/youtube-video-player{' '}
-      {'\n'}
+      $ ionic cordova plugin add cordova-plugin-youtube-video-player {'\n'}$ npm install
+      @awesome-cordova-plugins/youtube-video-player {'\n'}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
diff --git a/versioned_docs/version-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.md
index feddf8fdea1..39c7d993d40 100644
--- a/versioned_docs/version-v5/reference/glossary.md
+++ b/versioned_docs/version-v5/reference/glossary.md
@@ -398,11 +398,9 @@
     </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">
+    </a>, and <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10" target="_blank">
       loops
-    </a>
-    .
+    </a>.
   </p>
 </section>
 
diff --git a/versioned_docs/version-v5/reference/migration.md b/versioned_docs/version-v5/reference/migration.md
index 4b6405a5c55..165d7fc0b11 100644
--- a/versioned_docs/version-v5/reference/migration.md
+++ b/versioned_docs/version-v5/reference/migration.md
@@ -13,4 +13,4 @@ Please see the [Ionic 5 Migration Guide](/docs/updating/5-0).
 
 ## Migrating to Ionic 4.0
 
-Please see the [Ionic 4 Migration Guide](/docs/updating/4-0).
\ No newline at end of file
+Please see the [Ionic 4 Migration Guide](/docs/updating/4-0).
diff --git a/versioned_docs/version-v6/angular/navigation.md b/versioned_docs/version-v6/angular/navigation.md
index 0c249d9d055..fd50cc3e29c 100644
--- a/versioned_docs/version-v6/angular/navigation.md
+++ b/versioned_docs/version-v6/angular/navigation.md
@@ -191,8 +191,8 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/linear-routing-demo.mp4')}
@@ -217,8 +217,8 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/non-linear-routing-demo.mp4')}
@@ -432,8 +432,8 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/tabs-account-demo.mp4')}
@@ -448,6 +448,6 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      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/slides.md b/versioned_docs/version-v6/angular/slides.md
index 76e7a52603c..1379f1fddd9 100644
--- a/versioned_docs/version-v6/angular/slides.md
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -73,7 +73,7 @@ If you would like to use the Core version instead, which does not include additi
 To migrate over your CSS, first update your selectors to target the new custom elements instead:
 
 | ion-slides Selector | Swiper Selector    |
-| ------------------- | ------------------ | 
+| ------------------- | ------------------ |
 | `ion-slides`        | `swiper-container` |
 | `ion-slide`         | `swiper-slide`     |
 
@@ -153,9 +153,7 @@ export class HomePage {
 ```html
 <!-- home.page.html -->
 
-<swiper-container [modules]="swiperModules">
-  ...
-</swiper-container>
+<swiper-container [modules]="swiperModules"> ... </swiper-container>
 ```
 
 :::note
@@ -188,11 +186,11 @@ To set these options as properties directly on `<swiper-container>` we would do
 
 Below is a full list of property changes when going from `ion-slides` to Swiper Element:
 
-| Name      | Notes                                                                                                                                   |
-| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
-| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
-| pager     | Use the `pagination` property instead.                                                                                                  |
+| Name    | Notes                                                                                                                                   |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode    | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager   | Use the `pagination` property instead.                                                                                                  |
 
 :::note
 All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
@@ -304,9 +302,7 @@ All methods and properties available on the Swiper instance can be found at <a h
 Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
 
 ```html
-<swiper-container effect="flip">
-  ...
-</swiper-container>
+<swiper-container effect="flip"> ... </swiper-container>
 ```
 
 :::note
diff --git a/versioned_docs/version-v6/angular/virtual-scroll.md b/versioned_docs/version-v6/angular/virtual-scroll.md
index 3d0c0caebbb..0150d810162 100644
--- a/versioned_docs/version-v6/angular/virtual-scroll.md
+++ b/versioned_docs/version-v6/angular/virtual-scroll.md
@@ -126,4 +126,4 @@ For example:
 
 ## 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).
\ No newline at end of file
+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/api/icon.md b/versioned_docs/version-v6/api/icon.md
index 92984ef6acd..9e13144694c 100644
--- a/versioned_docs/version-v6/api/icon.md
+++ b/versioned_docs/version-v6/api/icon.md
@@ -18,4 +18,4 @@ For a list of all available icons, see <a href="https://ionic.io/ionicons">ionic
 
 import Basic from '@site/static/usage/v6/icon/basic/index.md';
 
-<Basic />
\ No newline at end of file
+<Basic />
diff --git a/versioned_docs/version-v6/api/nav.md b/versioned_docs/version-v6/api/nav.md
index a59ce7d562a..e16ec9c0ae9 100644
--- a/versioned_docs/version-v6/api/nav.md
+++ b/versioned_docs/version-v6/api/nav.md
@@ -26,7 +26,7 @@ Nav is a standalone component for loading arbitrary components and pushing new c
 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. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
 
 :::note
-`ion-nav` is not meant to be used for routing.  Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects.
+`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects.
 :::
 
 ## Using NavLink
diff --git a/versioned_docs/version-v6/developing/config.md b/versioned_docs/version-v6/developing/config.md
index 662e790864d..027cf25c5eb 100644
--- a/versioned_docs/version-v6/developing/config.md
+++ b/versioned_docs/version-v6/developing/config.md
@@ -21,7 +21,6 @@ Ionic Config is not reactive. Updating the config's value after the component ha
 import PerComponentExample from './config/per-component/index.md';
 
 <PerComponentExample />
-  
 
 ## Per-Platform Config
 
@@ -33,7 +32,6 @@ import PerPlatformExample from './config/per-platform/index.md';
 
 <PerPlatformExample />
 
-
 ### Fallbacks
 
 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:
@@ -59,7 +57,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
 |                 |                                                                                  |
 | --------------- | -------------------------------------------------------------------------------- |
 | **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. |
-| **Signature**   | `get(key: string, fallback?: any) => any`                                          |
+| **Signature**   | `get(key: string, fallback?: any) => any`                                        |
 
 #### Examples
 
@@ -79,7 +77,7 @@ class AppComponent {
 |                 |                                                                                      |
 | --------------- | ------------------------------------------------------------------------------------ |
 | **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. |
-| **Signature**   | `getBoolean(key: string, fallback?: boolean) => boolean`                               |
+| **Signature**   | `getBoolean(key: string, fallback?: boolean) => boolean`                             |
 
 #### Examples
 
@@ -99,7 +97,7 @@ class AppComponent {
 |                 |                                                                                 |
 | --------------- | ------------------------------------------------------------------------------- |
 | **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. |
-| **Signature**   | `getNumber(key: string, fallback?: number) => number`                             |
+| **Signature**   | `getNumber(key: string, fallback?: number) => number`                           |
 
 ## Interfaces
 
@@ -107,41 +105,41 @@ class AppComponent {
 
 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.                                        |
-| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, all `innerHTML` usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. `innerHTML` usage is enabled by default. |
-| `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.                     |
-| `toastDuration`          | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                         |
-| `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".               |
-| `toggleOnOffLabels`      | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
+| 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.                                                                                                                                                                                                                          |
+| `innerHTMLTemplatesEnabled` | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, all `innerHTML` usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. `innerHTML` usage is enabled by default. |
+| `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.                                                                                                                                                                                                       |
+| `toastDuration`             | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                                                                                                                                                                                                           |
+| `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".                                                                                                                                                                                                 |
+| `toggleOnOffLabels`         | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                                                                                                                                                                                                  |
diff --git a/versioned_docs/version-v6/developing/config/global/index.md b/versioned_docs/version-v6/developing/config/global/index.md
index bbfbaa83a71..c2358647c26 100644
--- a/versioned_docs/version-v6/developing/config/global/index.md
+++ b/versioned_docs/version-v6/developing/config/global/index.md
@@ -17,10 +17,11 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     rippleEffect: false,
-    mode: 'md'
-  }
-}
+    mode: 'md',
+  },
+};
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -38,10 +39,12 @@ import { IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
 The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -50,18 +53,19 @@ setupIonicReact({
   mode: 'md',
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
 ```tsx title="main.ts"
-
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
+
 createApp(App).use(IonicVue, {
   rippleEffect: false,
   mode: 'md',
 });
 ```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/versioned_docs/version-v6/developing/config/per-component/index.md b/versioned_docs/version-v6/developing/config/per-component/index.md
index 64b868a70ee..0e4aadeee60 100644
--- a/versioned_docs/version-v6/developing/config/per-component/index.md
+++ b/versioned_docs/version-v6/developing/config/per-component/index.md
@@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     // Not recommended when your app requires reactive values
-    backButtonText: 'Go Back'
-  }
-}
+    backButtonText: 'Go Back',
+  },
+};
 ```
 
 **Recommended**
@@ -31,7 +31,7 @@ window.Ionic = {
 
 <script>
   const backButton = document.querySelector('ion-back-button');
-  
+
   /**
    * The back button text can be updated
    * anytime the locale changes.
@@ -39,6 +39,7 @@ window.Ionic = {
   backButton.text = 'Go Back';
 </script>
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -75,6 +76,7 @@ class MyComponent {
   backButtonText = 'Go Back';
 }
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -85,7 +87,7 @@ import { setupIonicReact } from '@ionic/react';
 
 setupIonicReact({
   // Not recommended when your app requires reactive values
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -106,6 +108,7 @@ const ExampleComponent = () => {
   )
 }
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -114,10 +117,10 @@ const ExampleComponent = () => {
 ```ts
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
- // Not recommended when your app requires reactive values
+
+// Not recommended when your app requires reactive values
 createApp(App).use(IonicVue, {
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -139,5 +142,6 @@ createApp(App).use(IonicVue, {
   const backButtonText = ref('Go Back');
 </script>
 ```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
index 02a5f27a3c0..6390a6120d1 100644
--- a/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
+++ b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
@@ -34,6 +34,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -43,18 +44,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -64,16 +65,17 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
index 243cfa9c2fc..a5b8cdc490a 100644
--- a/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
+++ b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
@@ -37,6 +37,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -59,8 +60,8 @@ const getConfig = () => {
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -83,6 +84,7 @@ const getConfig = () => {
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/versioned_docs/version-v6/developing/config/per-platform/index.md b/versioned_docs/version-v6/developing/config/per-platform/index.md
index 7d17299d0f8..d21553ad1cf 100644
--- a/versioned_docs/version-v6/developing/config/per-platform/index.md
+++ b/versioned_docs/version-v6/developing/config/per-platform/index.md
@@ -31,6 +31,7 @@ import { isPlatform, IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -45,6 +46,7 @@ setupIonicReact({
   animated: !isPlatform('mobileweb'),
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -58,6 +60,7 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 createApp(App).use(IonicVue, {
   animated: !isPlatform('mobileweb'),
 });
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/versioned_docs/version-v6/developing/hardware-back-button.md b/versioned_docs/version-v6/developing/hardware-back-button.md
index 2f3271613dc..6813f9b4ceb 100644
--- a/versioned_docs/version-v6/developing/hardware-back-button.md
+++ b/versioned_docs/version-v6/developing/hardware-back-button.md
@@ -338,8 +338,8 @@ It is recommended to check whether or not the user is on the root page prior to
 
 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                                                                                                                              |
-| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Handler    | Priority | Propagates | Description                                                                                                                 |
+| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
 | Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
-| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                                   |
-| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                                    |
+| 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/intro/upgrading-to-ionic-6.md b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
index 25312444001..011970e1d64 100644
--- a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
+++ b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
@@ -48,6 +48,7 @@ npm install @ionic/react@6 @ionic/react-router@6
 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';
 
@@ -59,6 +60,7 @@ setupConfig({
 ```
 
 **After**
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -78,11 +80,13 @@ See the [Config Documentation](../developing/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';
 ```
@@ -142,6 +146,7 @@ See the [Testing section below](#testing) for more information.
 8. Rename any overlay event listeners to use the new format:
 
 **Before**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -155,6 +160,7 @@ See the [Testing section below](#testing) for more information.
 ```
 
 **After**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -174,38 +180,36 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
 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-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 }
+    components: { IonTabs, IonTabBar },
   });
 </script>
 ```
 
 **After**
+
 ```html
 <ion-tabs>
   <ion-router-outlet></ion-router-outlet>
-  <ion-tab-bar slot="bottom">
-    ...
-  </ion-tab-bar>
+  <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 }
+    components: { IonTabs, IonTabBar, IonRouterOutlet },
   });
 </script>
 ```
@@ -213,6 +217,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
 10. Additional routes inside of tabs should be re-written as sibling routes instead of child routes:
 
 **Before**
+
 ```ts
 const routes: Array<RouteRecordRaw> = [
   {
@@ -251,11 +256,12 @@ const routes: Array<RouteRecordRaw> = [
 ```
 
 **After**
+
 ```ts
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/tabs/tab1'
+    redirect: '/tabs/tab1',
   },
   {
     path: '/tabs/',
@@ -263,27 +269,27 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: '',
-        redirect: 'tab1'
+        redirect: 'tab1',
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue')
+        component: () => import('@/views/Tab1.vue'),
       },
       {
         path: 'tab1/view',
-        component: () => import('@/views/Tab1View.vue')
+        component: () => import('@/views/Tab1View.vue'),
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2.vue')
+        component: () => import('@/views/Tab2.vue'),
       },
       {
         path: 'tab3',
-        component: () => import('@/views/Tab3.vue')
-      }
-    ]
-  }
-]
+        component: () => import('@/views/Tab3.vue'),
+      },
+    ],
+  },
+];
 ```
 
 ### Core
@@ -325,24 +331,26 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco
 `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) {
-  ...
+  ...;
 }
 ```
 
@@ -350,34 +358,35 @@ ion-modal::part(backdrop) {
 
 `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) {
-  ...
+  ...;
 }
 ```
 
@@ -407,7 +416,6 @@ 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.
@@ -458,4 +466,3 @@ If you are still running into issues, here are a couple things to try:
 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/native-faq.md b/versioned_docs/version-v6/native-faq.md
index ceaf06b6d38..a74c967ba41 100644
--- a/versioned_docs/version-v6/native-faq.md
+++ b/versioned_docs/version-v6/native-faq.md
@@ -5,9 +5,9 @@ slug: /native/faq
 
 # Frequently Asked Question
 
-## What is Capacitor? 
+## What is Capacitor?
 
-Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. 
+Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library.
 
 ## Permission Issues
 
@@ -17,9 +17,8 @@ If you're using a plugin, it may require adding additional permissions to your n
 - `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
 - `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
 
-You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. 
-
+You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail.
 
 ## Unexpected behaviour
 
-If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
\ No newline at end of file
+If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
diff --git a/versioned_docs/version-v6/native.md b/versioned_docs/version-v6/native.md
index fcc12b23411..13818c296ad 100644
--- a/versioned_docs/version-v6/native.md
+++ b/versioned_docs/version-v6/native.md
@@ -23,14 +23,10 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
 
 <intro-end />
 
-
-Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences. 
+Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences.
 
 While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
 
-
-
-
 <NativeEnterpriseCard />
 
-> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) 
+> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/)
diff --git a/versioned_docs/version-v6/react/navigation.md b/versioned_docs/version-v6/react/navigation.md
index 234ff8e27b2..97bf7a64405 100644
--- a/versioned_docs/version-v6/react/navigation.md
+++ b/versioned_docs/version-v6/react/navigation.md
@@ -276,11 +276,11 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -302,11 +302,11 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/non-linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -351,8 +351,8 @@ const App: React.FC = () => {
         </Route>
       </IonRouterOutlet>
     </IonReactRouter>
-  </IonApp>
-}
+  </IonApp>;
+};
 ```
 
 The above routes are considered "shared" because they reuse the `dashboard` piece of the URL.
@@ -372,7 +372,7 @@ const App: React.FC = () => (
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>
-)
+);
 
 const DashboardRouterOutlet: React.FC = () => (
   <IonRouterOutlet>
@@ -383,7 +383,7 @@ const DashboardRouterOutlet: React.FC = () => (
       <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`.
@@ -420,15 +420,7 @@ 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 { 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';
@@ -481,7 +473,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr
 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
@@ -543,11 +535,11 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/tabs-account-demo.mp4')} 
+  src={useBaseUrl('video/tabs-account-demo.mp4')}
   controls
 ></video>
 
@@ -559,8 +551,8 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
 
 ## Live Example
diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md
index c6e3d0ea382..98127c26dd7 100644
--- a/versioned_docs/version-v6/react/slides.md
+++ b/versioned_docs/version-v6/react/slides.md
@@ -564,4 +564,4 @@ Before opening an issue, please consider creating a post on the <a href="https:/
 
 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>
\ No newline at end of file
+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/virtual-scroll.md b/versioned_docs/version-v6/react/virtual-scroll.md
index 81caf093e7d..0d4dc1722db 100644
--- a/versioned_docs/version-v6/react/virtual-scroll.md
+++ b/versioned_docs/version-v6/react/virtual-scroll.md
@@ -60,13 +60,11 @@ For example:
 ```tsx
 <IonPage>
   <IonContent scrollY={false}>
-    <Virtuoso className="ion-content-scroll-host">
-      {/* Your existing content and configurations */}
-    </Virtuoso>
+    <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/).
\ No newline at end of file
+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/reference/browser-support.md b/versioned_docs/version-v6/reference/browser-support.md
index 98df3aa96b3..4d669d939e1 100644
--- a/versioned_docs/version-v6/reference/browser-support.md
+++ b/versioned_docs/version-v6/reference/browser-support.md
@@ -49,4 +49,3 @@ Because Ionic is based on web technologies, it works just as well on desktop bro
 |  **Edge**   |   79+    |   79+    |    ✔     |
 | **Firefox** |   63+    |    ✔     |    ✔     |
 |  **IE 11**  |  **X**   |  **X**   |  **X**   |
-
diff --git a/versioned_docs/version-v6/reference/migration.md b/versioned_docs/version-v6/reference/migration.md
index 94ef0f284f0..f0d8b156459 100644
--- a/versioned_docs/version-v6/reference/migration.md
+++ b/versioned_docs/version-v6/reference/migration.md
@@ -24,4 +24,4 @@ Please see the [Ionic 5 Migration Guide](/docs/updating/5-0).
 
 ## Migrating to Ionic 4.0
 
-Please see the [Ionic 4 Migration Guide](/docs/updating/4-0).
\ No newline at end of file
+Please see the [Ionic 4 Migration Guide](/docs/updating/4-0).
diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.md
index ab44f4018bf..9b2affd2b79 100644
--- a/versioned_docs/version-v6/reference/support.md
+++ b/versioned_docs/version-v6/reference/support.md
@@ -20,14 +20,14 @@ Given the reality of time and resource constraints as well as the desire to keep
 
 The current status of each Ionic Framework version is:
 
-| Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
-| :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
-|   V6    |      **Active**       | Dec 8, 2021  |       TBD        |        TBD        |
-|   V5    |    End of Support     | 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    |
+| Version |     Status     |   Released   | Maintenance Ends | Ext. Support Ends |
+| :-----: | :------------: | :----------: | :--------------: | :---------------: |
+|   V6    |   **Active**   | Dec 8, 2021  |       TBD        |        TBD        |
+|   V5    | End of Support | 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).
diff --git a/versioned_docs/version-v6/vue/navigation.md b/versioned_docs/version-v6/vue/navigation.md
index 4ad77014489..d264a062d0e 100644
--- a/versioned_docs/version-v6/vue/navigation.md
+++ b/versioned_docs/version-v6/vue/navigation.md
@@ -241,11 +241,11 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -267,11 +267,11 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/non-linear-routing-demo.mp4')} 
+  src={useBaseUrl('video/non-linear-routing-demo.mp4')}
   controls
 ></video>
 
@@ -460,7 +460,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr
 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
@@ -520,11 +520,11 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
-  src={useBaseUrl('video/tabs-account-demo.mp4')} 
+  src={useBaseUrl('video/tabs-account-demo.mp4')}
   controls
 ></video>
 
@@ -536,8 +536,8 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
 
 ## Components
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index bf6c36e621d..16a4ca28556 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -102,7 +102,7 @@ Let's break it down, starting with the imports.
 
 ```tsx
 <script setup lang="ts">
-  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+  import {(IonApp, IonRouterOutlet)} from '@ionic/vue';
 </script>
 ```
 
@@ -289,7 +289,19 @@ For brevity, we are excluding repeating parts of our component, like the functio
 </template>
 
 <script setup lang="ts">
-  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonBadge,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
 </script>
 ```
 
@@ -326,7 +338,22 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
 </template>
 
 <script setup>
-  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonBadge,
+    IonCheckbox,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
   import { add } from 'ionicons/icons';
 </script>
 ```
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index c6141086516..726959e964e 100644
--- a/versioned_docs/version-v6/vue/slides.md
+++ b/versioned_docs/version-v6/vue/slides.md
@@ -567,4 +567,4 @@ Before opening an issue, please consider creating a post on the <a href="https:/
 
 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>
\ No newline at end of file
+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/virtual-scroll.md b/versioned_docs/version-v6/vue/virtual-scroll.md
index 78d56fc9313..47c3ebcf204 100644
--- a/versioned_docs/version-v6/vue/virtual-scroll.md
+++ b/versioned_docs/version-v6/vue/virtual-scroll.md
@@ -136,4 +136,4 @@ For example:
 
 ## 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).
\ No newline at end of file
+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).

From 01d9c091e9ccb414a56a8e4132c96abf72d843d5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 8 May 2023 10:10:29 -0400
Subject: [PATCH 362/469] docs(support): update angular support policy (#2953)

This PR updates the support table to note that Angular 16 is supported for Ionic v7
---
 docs/reference/support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/support.md b/docs/reference/support.md
index 76c8b2306e1..bc03557f231 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -43,7 +43,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-|    v7     |           v14           |         v15.x^          |    4.6+    |
+|    v7     |           v14           |         v16.x^          |    4.6+    |
 |    v6     |           v12           |         v15.x^          |    4.0+    |
 |    v5     |          v8.2           |          v12.x          |    3.5+    |
 |    v4     |          v8.2           |          v11.x          |    3.5+    |

From 944abcedc76e53db7f4229acb80d79e234243091 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 10 May 2023 10:43:14 -0500
Subject: [PATCH 363/469] docs(range): update docs to use label prop (#2955)

---
 docs/api/range.md                             |  31 ++++-
 static/usage/v7/range/label-slot/angular.md   |   7 ++
 static/usage/v7/range/label-slot/demo.html    |  31 +++++
 .../v7/range/{basic => label-slot}/index.md   |   2 +-
 .../usage/v7/range/label-slot/javascript.md   |   7 ++
 static/usage/v7/range/label-slot/react.md     |  14 +++
 static/usage/v7/range/label-slot/vue.md       |  18 +++
 static/usage/v7/range/labels/angular.md       |  12 +-
 static/usage/v7/range/labels/demo.html        |  20 ++--
 static/usage/v7/range/labels/javascript.md    |  12 +-
 static/usage/v7/range/labels/react.md         |  12 +-
 static/usage/v7/range/labels/vue.md           |  12 +-
 static/usage/v7/range/migration/index.md      | 108 ++++++++++++------
 .../{basic => no-visible-label}/angular.md    |   0
 .../{basic => no-visible-label}/demo.html     |   0
 .../usage/v7/range/no-visible-label/index.md  |   8 ++
 .../{basic => no-visible-label}/javascript.md |   0
 .../{basic => no-visible-label}/react.md      |   0
 .../range/{basic => no-visible-label}/vue.md  |   0
 19 files changed, 207 insertions(+), 87 deletions(-)
 create mode 100644 static/usage/v7/range/label-slot/angular.md
 create mode 100644 static/usage/v7/range/label-slot/demo.html
 rename static/usage/v7/range/{basic => label-slot}/index.md (84%)
 create mode 100644 static/usage/v7/range/label-slot/javascript.md
 create mode 100644 static/usage/v7/range/label-slot/react.md
 create mode 100644 static/usage/v7/range/label-slot/vue.md
 rename static/usage/v7/range/{basic => no-visible-label}/angular.md (100%)
 rename static/usage/v7/range/{basic => no-visible-label}/demo.html (100%)
 create mode 100644 static/usage/v7/range/no-visible-label/index.md
 rename static/usage/v7/range/{basic => no-visible-label}/javascript.md (100%)
 rename static/usage/v7/range/{basic => no-visible-label}/react.md (100%)
 rename static/usage/v7/range/{basic => no-visible-label}/vue.md (100%)

diff --git a/docs/api/range.md b/docs/api/range.md
index fd091246945..be52a7b1fea 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -22,18 +22,37 @@ The Range slider lets users select from a range of values by moving the slider k
 
 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
+## Labels
 
-import Basic from '@site/static/usage/v7/range/basic/index.md';
+Range has several options for supplying a label for the component:
+- `label` property: used for plaintext labels
+- `label` slot: used for custom HTML labels
+- `aria-label`: used for ranges with no visible label
 
-<Basic />
+### Label Placement
 
-## Label Placement
+The below demo shows how to use the `labelPlacement` property to change the position of the label relative to the range. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.
 
 import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
 
 <LabelsPlayground />
 
+### Label Slot
+
+While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+
+import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md';
+
+<LabelSlotPlayground />
+
+### No Visible Label
+
+If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers.
+
+import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md';
+
+<NoVisibleLabel />
+
 ## Decorations
 
 Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.
@@ -116,7 +135,9 @@ Developers can perform this migration one range at a time. While developers can
 
 ### Using the Modern Syntax
 
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`.
+Using the modern syntax involves removing the `ion-label` and passing the label to `ion-range` using the `label` property. The placement of the label can be configured using the `labelPlacement` property.
+
+If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead.
 
 import Migration from '@site/static/usage/v7/range/migration/index.md';
 
diff --git a/static/usage/v7/range/label-slot/angular.md b/static/usage/v7/range/label-slot/angular.md
new file mode 100644
index 00000000000..83ae393896e
--- /dev/null
+++ b/static/usage/v7/range/label-slot/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-range>
+  <div slot="label">
+    Label with <ion-text color="primary">custom HTML</ion-text>
+  </div>
+</ion-range>
+```
diff --git a/static/usage/v7/range/label-slot/demo.html b/static/usage/v7/range/label-slot/demo.html
new file mode 100644
index 00000000000..8364ee4e28c
--- /dev/null
+++ b/static/usage/v7/range/label-slot/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>Range</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 400px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range>
+            <div slot="label">
+              Label with <ion-text color="primary">custom HTML</ion-text>
+            </div>
+          </ion-range>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/label-slot/index.md
similarity index 84%
rename from static/usage/v7/range/basic/index.md
rename to static/usage/v7/range/label-slot/index.md
index 59922df7eda..f885a98ce72 100644
--- a/static/usage/v7/range/basic/index.md
+++ b/static/usage/v7/range/label-slot/index.md
@@ -5,4 +5,4 @@ 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" />
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/label-slot/demo.html" />
diff --git a/static/usage/v7/range/label-slot/javascript.md b/static/usage/v7/range/label-slot/javascript.md
new file mode 100644
index 00000000000..83ae393896e
--- /dev/null
+++ b/static/usage/v7/range/label-slot/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-range>
+  <div slot="label">
+    Label with <ion-text color="primary">custom HTML</ion-text>
+  </div>
+</ion-range>
+```
diff --git a/static/usage/v7/range/label-slot/react.md b/static/usage/v7/range/label-slot/react.md
new file mode 100644
index 00000000000..8a3e4a8a07d
--- /dev/null
+++ b/static/usage/v7/range/label-slot/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonRange, IonText } from '@ionic/react';
+function Example() {
+  return (
+    <IonRange>
+      <div slot="label">
+        Label with <IonText color="primary">custom HTML</IonText>
+      </div>
+    </IonRange>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/label-slot/vue.md b/static/usage/v7/range/label-slot/vue.md
new file mode 100644
index 00000000000..56765cdd14d
--- /dev/null
+++ b/static/usage/v7/range/label-slot/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-range>
+    <div slot="label">
+      Label with <ion-text color="primary">custom HTML</ion-text>
+    </div>
+  </ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange, IonText } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange, IonText },
+  });
+</script>
+```
diff --git a/static/usage/v7/range/labels/angular.md b/static/usage/v7/range/labels/angular.md
index 54964fa0d0c..45532c5f917 100644
--- a/static/usage/v7/range/labels/angular.md
+++ b/static/usage/v7/range/labels/angular.md
@@ -1,17 +1,11 @@
 ```html
-<ion-range labelPlacement="start">
-  <div slot="label">Label at the Start</div>
-</ion-range>
+<ion-range labelPlacement="start" label="Label at the Start"></ion-range>
 
 <br />
 
-<ion-range labelPlacement="end">
-  <div slot="label">Label at the End</div>
-</ion-range>
+<ion-range labelPlacement="end" label="Label at the End"></ion-range>
 
 <br />
 
-<ion-range labelPlacement="fixed">
-  <div slot="label">Fixed Width Label</div>
-</ion-range>
+<ion-range labelPlacement="fixed" label="Fixed Width Label"></ion-range>
 ```
diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html
index e4e1e0c57a4..b44cc98584e 100644
--- a/static/usage/v7/range/labels/demo.html
+++ b/static/usage/v7/range/labels/demo.html
@@ -20,21 +20,15 @@
       <ion-content>
         <div class="container">
           <div class="wrapper">
-            <ion-range label-placement="start">
-              <div slot="label">Label at the Start</div>
-            </ion-range>
-
+            <ion-range label-placement="start" label="Label at the Start"></ion-range>
+            
             <br />
-
-            <ion-range label-placement="end">
-              <div slot="label">Label at the End</div>
-            </ion-range>
-
+            
+            <ion-range label-placement="end" label="Label at the End"></ion-range>
+            
             <br />
-
-            <ion-range label-placement="fixed">
-              <div slot="label">Fixed Width Label</div>
-            </ion-range>
+            
+            <ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
           </div>
         </div>
       </ion-content>
diff --git a/static/usage/v7/range/labels/javascript.md b/static/usage/v7/range/labels/javascript.md
index 1f08d5d29af..9ee164f7d4d 100644
--- a/static/usage/v7/range/labels/javascript.md
+++ b/static/usage/v7/range/labels/javascript.md
@@ -1,17 +1,11 @@
 ```html
-<ion-range label-placement="start">
-  <div slot="label">Label at the Start</div>
-</ion-range>
+<ion-range label-placement="start" label="Label at the Start"></ion-range>
 
 <br />
 
-<ion-range label-placement="end">
-  <div slot="label">Label at the End</div>
-</ion-range>
+<ion-range label-placement="end" label="Label at the End"></ion-range>
 
 <br />
 
-<ion-range label-placement="fixed">
-  <div slot="label">Fixed Width Label</div>
-</ion-range>
+<ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
 ```
diff --git a/static/usage/v7/range/labels/react.md b/static/usage/v7/range/labels/react.md
index 3096d66ac6f..ef5563f178e 100644
--- a/static/usage/v7/range/labels/react.md
+++ b/static/usage/v7/range/labels/react.md
@@ -4,21 +4,15 @@ import { IonRange } from '@ionic/react';
 function Example() {
   return (
     <>
-      <IonRange labelPlacement="start">
-        <div slot="label">Label at the Start</div>
-      </IonRange>
+      <IonRange labelPlacement="start" label="Label at the Start"></IonRange>
 
       <br />
 
-      <IonRange labelPlacement="end">
-        <div slot="label">Label at the End</div>
-      </IonRange>
+      <IonRange labelPlacement="end" label="Label at the End"></IonRange>
 
       <br />
 
-      <IonRange labelPlacement="fixed">
-        <div slot="label">Fixed Width Label</div>
-      </IonRange>
+      <IonRange labelPlacement="fixed" label="Fixed Width Label"></IonRange>
     </>
   );
 }
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
index c5346470905..53b7932edb8 100644
--- a/static/usage/v7/range/labels/vue.md
+++ b/static/usage/v7/range/labels/vue.md
@@ -1,20 +1,14 @@
 ```html
 <template>
-  <ion-range label-placement="start">
-    <div slot="label">Label at the Start</div>
-  </ion-range>
+  <ion-range label-placement="start" label="Label at the Start"></ion-range>
 
   <br />
 
-  <ion-range label-placement="end">
-    <div slot="label">Label at the End</div>
-  </ion-range>
+  <ion-range label-placement="end" label="Label at the End"></ion-range>
 
   <br />
 
-  <ion-range label-placement="fixed">
-    <div slot="label">Fixed Width Label</div>
-  </ion-range>
+  <ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/range/migration/index.md b/static/usage/v7/range/migration/index.md
index efec462c3d1..4025f91bc31 100644
--- a/static/usage/v7/range/migration/index.md
+++ b/static/usage/v7/range/migration/index.md
@@ -25,9 +25,7 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range>
-    <div slot="label">Notifications</div>
-  </ion-range>
+  <ion-range label="Notifications"></ion-range>
 </ion-item>
 
 <!-- Fixed Labels -->
@@ -40,9 +38,7 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range label-placement="fixed">
-    <div slot="label">Notifications</div>
-  </ion-range>
+  <ion-range label-placement="fixed" label="Notifications"></ion-range>
 </ion-item>
 
 <!-- Range at the start of line, Label at the end of line -->
@@ -55,8 +51,23 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range label-placement="end">
-    <div slot="label">Notifications</div>
+  <ion-range label-placement="end" label="Notifications"></ion-range>
+</ion-item>
+
+<!-- Custom HTML label -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>
+    <div class="custom-label">Notifications</div>
+  </ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range>
+    <div slot="label" class="custom-label">Notifications</div>
   </ion-range>
 </ion-item>
 ```
@@ -74,9 +85,7 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range>
-    <div slot="label">Notifications</div>
-  </ion-range>
+  <ion-range label="Notifications"></ion-range>
 </ion-item>
 
 <!-- Fixed Labels -->
@@ -89,9 +98,7 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range labelPlacement="fixed">
-    <div slot="label">Notifications</div>
-  </ion-range>
+  <ion-range labelPlacement="fixed" label="Notifications"></ion-range>
 </ion-item>
 
 <!-- Range at the start of line, Label at the end of line -->
@@ -104,8 +111,23 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range labelPlacement="end">
-    <div slot="label">Notifications</div>
+  <ion-range labelPlacement="end" label="Notifications"></ion-range>
+</ion-item>
+
+<!-- Custom HTML label -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>
+    <div class="custom-label">Notifications</div>
+  </ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range>
+    <div slot="label" class="custom-label">Notifications</div>
   </ion-range>
 </ion-item>
 ```
@@ -123,9 +145,7 @@ import TabItem from '@theme/TabItem';
 
 {/* After */}
 <IonItem>
-  <IonRange>
-    <div slot="label">Notifications</div>
-  </IonRange>
+  <IonRange label="Notifications"></IonRange>
 </IonItem>
 
 {/* Fixed Labels */}
@@ -138,9 +158,7 @@ import TabItem from '@theme/TabItem';
 
 {/* After */}
 <IonItem>
-  <IonRange labelPlacement="fixed">
-    <div slot="label">Notifications</div>
-  </IonRange>
+  <IonRange labelPlacement="fixed" label="Notifications"></IonRange>
 </IonItem>
 
 {/* Range at the start of line, Label at the end of line */}
@@ -153,8 +171,23 @@ import TabItem from '@theme/TabItem';
 
 {/* After */}
 <IonItem>
-  <IonRange labelPlacement="end">
-    <div slot="label">Notifications</div>
+  <IonRange labelPlacement="end" label="Notifications"></IonRange>
+</IonItem>
+
+{/* Custom HTML label */}
+
+{/* Before */}
+<IonItem>
+  <IonLabel>
+    <div className="custom-label">Notifications</div>
+  </IonLabel>
+  <IonRange></IonRange>
+</IonItem>
+
+<!-- After -->
+<IonItem>
+  <IonRange>
+    <div slot="label" className="custom-label">Notifications</div>
   </IonRange>
 </IonItem>
 ```
@@ -172,9 +205,7 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range>
-    <div slot="label">Notifications</div>
-  </ion-range>
+  <ion-range label="Notifications"></ion-range>
 </ion-item>
 
 <!-- Fixed Labels -->
@@ -187,9 +218,7 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range label-placement="fixed">
-    <div slot="label">Notifications</div>
-  </ion-range>
+  <ion-range label-placement="fixed" label="Notifications"></ion-range>
 </ion-item>
 
 <!-- Range at the start of line, Label at the end of line -->
@@ -202,8 +231,23 @@ import TabItem from '@theme/TabItem';
 
 <!-- After -->
 <ion-item>
-  <ion-range label-placement="end">
-    <div slot="label">Notifications</div>
+  <ion-range label-placement="end" label="Notifications"></ion-range>
+</ion-item>
+
+<!-- Custom HTML label -->
+
+<!-- Before -->
+<ion-item>
+  <ion-label>
+    <div class="custom-label">Notifications</div>
+  </ion-label>
+  <ion-range></ion-range>
+</ion-item>
+
+<!-- After -->
+<ion-item>
+  <ion-range>
+    <div slot="label" class="custom-label">Notifications</div>
   </ion-range>
 </ion-item>
 ```
diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/no-visible-label/angular.md
similarity index 100%
rename from static/usage/v7/range/basic/angular.md
rename to static/usage/v7/range/no-visible-label/angular.md
diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/no-visible-label/demo.html
similarity index 100%
rename from static/usage/v7/range/basic/demo.html
rename to static/usage/v7/range/no-visible-label/demo.html
diff --git a/static/usage/v7/range/no-visible-label/index.md b/static/usage/v7/range/no-visible-label/index.md
new file mode 100644
index 00000000000..f23fc3fd998
--- /dev/null
+++ b/static/usage/v7/range/no-visible-label/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/no-visible-label/demo.html" />
diff --git a/static/usage/v7/range/basic/javascript.md b/static/usage/v7/range/no-visible-label/javascript.md
similarity index 100%
rename from static/usage/v7/range/basic/javascript.md
rename to static/usage/v7/range/no-visible-label/javascript.md
diff --git a/static/usage/v7/range/basic/react.md b/static/usage/v7/range/no-visible-label/react.md
similarity index 100%
rename from static/usage/v7/range/basic/react.md
rename to static/usage/v7/range/no-visible-label/react.md
diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/no-visible-label/vue.md
similarity index 100%
rename from static/usage/v7/range/basic/vue.md
rename to static/usage/v7/range/no-visible-label/vue.md

From afebb1577b69ac448b587f560bc4ee8cc9eeac13 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 11 May 2023 08:15:44 -0700
Subject: [PATCH 364/469] fix(tabs): correct router playground src (#2957)

---
 static/usage/v7/tabs/router/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.md
index c7e59ac79bc..77161af269f 100644
--- a/static/usage/v7/tabs/router/index.md
+++ b/static/usage/v7/tabs/router/index.md
@@ -88,6 +88,6 @@ import react_search_page_tsx from './react/search_page_tsx.md';
       },
     },
   }}
-  src="usage/v6/tabs/router/demo.html"
+  src="usage/v7/tabs/router/demo.html"
   devicePreview
 />

From 9184c2f9f197a9bfc3bdc93a4df26ca0a8d087cf Mon Sep 17 00:00:00 2001
From: Joost Jansen <87212060+jstjnsn@users.noreply.github.com>
Date: Thu, 11 May 2023 18:25:56 +0200
Subject: [PATCH 365/469] docs(app-store): add reference to App Store Connect
 (#2198)

Co-authored-by: Brandy Carney <brandy@ionic.io>
---
 docs/deployment/app-store.md                      | 7 +++----
 versioned_docs/version-v5/deployment/app-store.md | 7 +++----
 versioned_docs/version-v6/deployment/app-store.md | 7 +++----
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.md
index e82e5b4e515..f6b2ffcf1c9 100644
--- a/docs/deployment/app-store.md
+++ b/docs/deployment/app-store.md
@@ -50,17 +50,16 @@ There are two types of certificates that matter here, Development, and Distribut
 
 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.
+## 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.
+There should be a place to select the team followed by some more information on the app and an '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.
+If the upload is successful the app should be listed under 'Activities' on [iTunes Connect](https://itunesconnect.apple.com) or listed under 'Apps' on [App Store Connect](https://appstoreconnect.apple.com/). From there, the app can be published to TestFlight, or it can be sent to Apple for approval for the App Store.
 
 ## Updating an app
 
diff --git a/versioned_docs/version-v5/deployment/app-store.md b/versioned_docs/version-v5/deployment/app-store.md
index 8d741787dcc..9319ead3e0d 100644
--- a/versioned_docs/version-v5/deployment/app-store.md
+++ b/versioned_docs/version-v5/deployment/app-store.md
@@ -43,17 +43,16 @@ There are two types of certificates that matter here, Development, and Distribut
 
 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.
+## 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.
+There should be a place to select the team followed by some more information on the app and an '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.
+If the upload is successful the app should be listed under 'Activities' on [iTunes Connect](https://itunesconnect.apple.com) or listed under 'Apps' on [App Store Connect](https://appstoreconnect.apple.com/). From there, the app can be published to TestFlight, or it can be sent to Apple for approval for the App Store.
 
 ## Updating an app
 
diff --git a/versioned_docs/version-v6/deployment/app-store.md b/versioned_docs/version-v6/deployment/app-store.md
index e82e5b4e515..f6b2ffcf1c9 100644
--- a/versioned_docs/version-v6/deployment/app-store.md
+++ b/versioned_docs/version-v6/deployment/app-store.md
@@ -50,17 +50,16 @@ There are two types of certificates that matter here, Development, and Distribut
 
 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.
+## 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.
+There should be a place to select the team followed by some more information on the app and an '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.
+If the upload is successful the app should be listed under 'Activities' on [iTunes Connect](https://itunesconnect.apple.com) or listed under 'Apps' on [App Store Connect](https://appstoreconnect.apple.com/). From there, the app can be published to TestFlight, or it can be sent to Apple for approval for the App Store.
 
 ## Updating an app
 

From ddcb607af2edeaa7388cb01416d355d06ed55426 Mon Sep 17 00:00:00 2001
From: Austine A <8253869+AustineA@users.noreply.github.com>
Date: Thu, 11 May 2023 18:18:16 +0100
Subject: [PATCH 366/469] docs(developing): update Java instructions to mention
 JDK 11 for latest cordova-android (#2200)

Updates the developing android documentation to reflect the latest Cordova guide here: https://cordova.apache.org/docs/en/11.x/guide/platforms/android/#java-development-kit-jdk

---------

Co-authored-by: Brandy Carney <brandy@ionic.io>
---
 docs/developing/android.md                      | 4 ++--
 versioned_docs/version-v5/developing/android.md | 4 ++--
 versioned_docs/version-v6/developing/android.md | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/developing/android.md b/docs/developing/android.md
index 3b7baaca186..daa73c8a920 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -112,10 +112,10 @@ Additional setup is required for Cordova to support programmatic builds. This se
 
 ### 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>.
+Native Android apps are compiled with the <a href="https://java.com/en/" target="_blank">Java</a> programming language. Download the <a href="https://www.oracle.com/java/technologies/javase-jdk11-downloads.html" target="_blank">Java Development Kit (JDK) 11</a> if you are using **`cordova-android`** `10.0.0` or greater.
 
 :::note
-Unfortunately, Cordova is not compatible with the latest version of Java.
+If you are using any version of **`cordova-android`** below `10.0.0`, install the <a href="https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html" target="_blank">Java Development Kit (JDK) 8</a>.
 :::
 
 ### Gradle
diff --git a/versioned_docs/version-v5/developing/android.md b/versioned_docs/version-v5/developing/android.md
index 63d7eef663a..8faf6779d2d 100644
--- a/versioned_docs/version-v5/developing/android.md
+++ b/versioned_docs/version-v5/developing/android.md
@@ -104,10 +104,10 @@ Additional setup is required for Cordova to support programmatic builds. This se
 
 ### 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>.
+Native Android apps are compiled with the <a href="https://java.com/en/" target="_blank">Java</a> programming language. Download the <a href="https://www.oracle.com/java/technologies/javase-jdk11-downloads.html" target="_blank">Java Development Kit (JDK) 11</a> if you are using **`cordova-android`** `10.0.0` or greater.
 
 :::note
-Unfortunately, Cordova is not compatible with the latest version of Java.
+If you are using any version of **`cordova-android`** below `10.0.0`, install the <a href="https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html" target="_blank">Java Development Kit (JDK) 8</a>.
 :::
 
 ### Gradle
diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md
index d27d9ae62f2..e52453ab98e 100644
--- a/versioned_docs/version-v6/developing/android.md
+++ b/versioned_docs/version-v6/developing/android.md
@@ -112,10 +112,10 @@ Additional setup is required for Cordova to support programmatic builds. This se
 
 ### 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>.
+Native Android apps are compiled with the <a href="https://java.com/en/" target="_blank">Java</a> programming language. Download the <a href="https://www.oracle.com/java/technologies/javase-jdk11-downloads.html" target="_blank">Java Development Kit (JDK) 11</a> if you are using **`cordova-android`** `10.0.0` or greater.
 
 :::note
-Unfortunately, Cordova is not compatible with the latest version of Java.
+If you are using any version of **`cordova-android`** below `10.0.0`, install the <a href="https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html" target="_blank">Java Development Kit (JDK) 8</a>.
 :::
 
 ### Gradle

From 3bc9014fdd17e91ed072b182de36c315e6009fb5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 12 May 2023 10:04:48 -0400
Subject: [PATCH 367/469] docs(react): remove IonContent from tabs example
 (#2958)

---
 docs/react/navigation.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index 310f39635e6..34c2cdd9d6a 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -420,7 +420,7 @@ 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 { IonPage, 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';
@@ -428,7 +428,7 @@ import Tab2 from './pages/Tab2';
 import Tab3 from './pages/Tab3';
 
 const Tabs: React.FC = () => (
-  <IonContent>
+  <IonPage>
     <IonTabs>
       <IonRouterOutlet>
         <Redirect exact path="/tabs" to="/tabs/tab1" />
@@ -460,7 +460,7 @@ const Tabs: React.FC = () => (
         </IonTabButton>
       </IonTabBar>
     </IonTabs>
-  </IonContent>
+  </IonPage>
 );
 
 export default Tabs;

From 34a7c6a73dbb6c839bf1a68c98da144ccf6da270 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 12 May 2023 10:05:08 -0400
Subject: [PATCH 368/469] docs(vue): remove IonContent from tabs example
 (#2959)

---
 docs/vue/navigation.md | 42 +++++++++++++++++++-----------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index d264a062d0e..205e146cec9 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -393,27 +393,25 @@ 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-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-page>
 </template>
 
@@ -422,7 +420,6 @@ Let's start by taking a look at our `Tabs` component:
     IonTabBar,
     IonTabButton,
     IonTabs,
-    IonContent,
     IonLabel,
     IonIcon,
     IonPage,
@@ -433,7 +430,6 @@ Let's start by taking a look at our `Tabs` component:
   export default {
     name: 'Tabs',
     components: {
-      IonContent,
       IonLabel,
       IonTabs,
       IonTabBar,

From 2f1a76990f3fde3297fccfa23096e7d7c9f464d1 Mon Sep 17 00:00:00 2001
From: Stephan Schmitz <eyecatchup@gmail.com>
Date: Wed, 17 May 2023 17:14:16 +0200
Subject: [PATCH 369/469] docs(dark-mode): replace deprecated addListener()
 usage (#1908)

Co-authored-by: Maria Hutt <maria@ionic.io>
---
 docs/theming/dark-mode.md                      | 4 ++--
 versioned_docs/version-v5/theming/dark-mode.md | 4 ++--
 versioned_docs/version-v6/theming/dark-mode.md | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
index ea4fd1f1e33..8d42d01a0ea 100644
--- a/docs/theming/dark-mode.md
+++ b/docs/theming/dark-mode.md
@@ -74,7 +74,7 @@ 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));
+prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
 
 // Add or remove the "dark" class based on if the media query matches
 function toggleDarkTheme(shouldAdd) {
@@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => {
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
 
 // Listen for changes to the prefers-color-scheme media query
-prefersDark.addListener((e) => checkToggle(e.matches));
+prefersDark.addEventListener('change', (e) => checkToggle(e.matches));
 
 // Called when the app loads
 function loadApp() {
diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.md
index 3bcf5bbe79e..1aee84ed326 100644
--- a/versioned_docs/version-v5/theming/dark-mode.md
+++ b/versioned_docs/version-v5/theming/dark-mode.md
@@ -67,7 +67,7 @@ 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));
+prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
 
 // Add or remove the "dark" class based on if the media query matches
 function toggleDarkTheme(shouldAdd) {
@@ -99,7 +99,7 @@ toggle.addEventListener('ionChange', (ev) => {
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
 
 // Listen for changes to the prefers-color-scheme media query
-prefersDark.addListener((e) => checkToggle(e.matches));
+prefersDark.addEventListener('change', (e) => checkToggle(e.matches));
 
 // Called when the app loads
 function loadApp() {
diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.md
index ea4fd1f1e33..8d42d01a0ea 100644
--- a/versioned_docs/version-v6/theming/dark-mode.md
+++ b/versioned_docs/version-v6/theming/dark-mode.md
@@ -74,7 +74,7 @@ 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));
+prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
 
 // Add or remove the "dark" class based on if the media query matches
 function toggleDarkTheme(shouldAdd) {
@@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => {
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
 
 // Listen for changes to the prefers-color-scheme media query
-prefersDark.addListener((e) => checkToggle(e.matches));
+prefersDark.addEventListener('change', (e) => checkToggle(e.matches));
 
 // Called when the app loads
 function loadApp() {

From 998c50760a9428f1803ad0dfc1d6c0821f105b21 Mon Sep 17 00:00:00 2001
From: praxxys <65581743+praxxys@users.noreply.github.com>
Date: Wed, 17 May 2023 23:30:52 +0800
Subject: [PATCH 370/469] docs(quickstart): remove typescript for imports and
 tests (#2216)

* Update quickstart.md

Currently, the "use Javascript" section is incomplete as Jest is still configured to use Typescript and running `npm run test:unit` will throw errors. The section was revised to to include Jest Javascript configuration changes.

---------

Co-authored-by: Shawn Taylor <shawn@ionic.io>
---
 docs/vue/quickstart.md                      | 14 ++++++++------
 versioned_docs/version-v5/vue/quickstart.md | 14 ++++++++------
 versioned_docs/version-v6/vue/quickstart.md | 14 ++++++++------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 6738b35511f..a5289b589cc 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -48,17 +48,19 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge
 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 `src/router/index.ts` and `src/main.ts`.
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. If you're using tests, also change the extension of files in the `tests` directory.
 
-3. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
+3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
-4. Remove `Array<RouteRecordRaw>` from `src/router/index.js`.
+4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
 
-5. Delete the `src/shims-vue.d.ts` file.
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
 
-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 `src/App.vue` and `src/views/HomePage.vue`.
+6. Delete the `src/shims-vue.d.ts` file if it exists. This is only needed when using the Vue CLI.
 
-7. Delete the `tsconfig.json` file.
+7. 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 `src/App.vue` and `src/views/HomePage.vue`.
+
+8. Delete the `tsconfig.json` file.
 
 ## A look at a Vue Component
 
diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md
index ff870aaf0b6..8cd1eb02b71 100644
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ b/versioned_docs/version-v5/vue/quickstart.md
@@ -41,17 +41,19 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge
 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 `src/router/index.ts` and `src/main.ts`.
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. If you're using tests, also change the extension of files in the `tests` directory.
 
-3. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
+3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
-4. Remove `Array<RouteRecordRaw>` from `src/router/index.js`.
+4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
 
-5. Delete the `src/shims-vue.d.ts` file.
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
 
-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 `src/App.vue` and `src/views/HomePage.vue`.
+6. Delete the `src/shims-vue.d.ts` file if it exists. This is only needed when using the Vue CLI.
 
-7. Delete the `tsconfig.json` file.
+7. 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 `src/App.vue` and `src/views/HomePage.vue`.
+
+8. Delete the `tsconfig.json` file.
 
 ## A look at a Vue Component
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index 16a4ca28556..75571575ac7 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -48,17 +48,19 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge
 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 `src/router/index.ts` and `src/main.ts`.
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. If you're using tests, also change the extension of files in the `tests` directory.
 
-3. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
+3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
-4. Remove `Array<RouteRecordRaw>` from `src/router/index.js`.
+4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
 
-5. Delete the `src/shims-vue.d.ts` file.
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
 
-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 `src/App.vue` and `src/views/HomePage.vue`.
+6. Delete the `src/shims-vue.d.ts` file if it exists. This is only needed when using the Vue CLI.
 
-7. Delete the `tsconfig.json` file.
+7. 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 `src/App.vue` and `src/views/HomePage.vue`.
+
+8. Delete the `tsconfig.json` file.
 
 ## A look at a Vue Component
 

From 7d6da4351a1c3e8878092cccc8136acc19be61ce Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 18 May 2023 11:55:26 -0500
Subject: [PATCH 371/469] fix(CodeColor, LayeredColorsSelect): fix invalid DOM
 nesting (#2963)

---
 .../page/theming/CodeColor/index.tsx          |  4 +-
 .../theming/LayeredColorsSelect/index.tsx     | 46 ++++++++++---------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/page/theming/CodeColor/index.tsx b/src/components/page/theming/CodeColor/index.tsx
index 09aa3393d6b..f6a35396539 100644
--- a/src/components/page/theming/CodeColor/index.tsx
+++ b/src/components/page/theming/CodeColor/index.tsx
@@ -5,7 +5,7 @@ import styles from './index.module.scss';
 
 function CodeColor({ color, ...props }): JSX.Element {
   return (
-    <div className={clsx(styles.codeColor, props.className, 'code-color')}>
+    <span className={clsx(styles.codeColor, props.className, 'code-color')}>
       <span
         className={styles.codeColorBlock}
         style={{
@@ -14,7 +14,7 @@ function CodeColor({ color, ...props }): JSX.Element {
         }}
       />
       {props.children && <code className={styles.codeColorValue}>{props.children}</code>}
-    </div>
+    </span>
   );
 }
 
diff --git a/src/components/page/theming/LayeredColorsSelect/index.tsx b/src/components/page/theming/LayeredColorsSelect/index.tsx
index eb1ac56058c..bd0e97a20fc 100755
--- a/src/components/page/theming/LayeredColorsSelect/index.tsx
+++ b/src/components/page/theming/LayeredColorsSelect/index.tsx
@@ -83,28 +83,32 @@ export default function LayeredColorsSelect({ ...props }) {
         </InputWrapper>
       </div>
       <table>
-        <tr>
-          <th>Name</th>
-          <th>Property</th>
-          <th>Default Value</th>
-          <th>Description</th>
-        </tr>
-        {variations.map((variation) => {
-          const codeColor = variation.rgb ? `rgb(${variation.value})` : `${variation.value}`;
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Property</th>
+            <th>Default Value</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {variations.map((variation) => {
+            const codeColor = variation.rgb ? `rgb(${variation.value})` : `${variation.value}`;
 
-          return (
-            <tr key={variation.name}>
-              <td className={styles.colorName}>{variation.name}</td>
-              <td className={styles.colorProperty}>
-                <code>{variation.property}</code>
-              </td>
-              <td className={styles.colorValue}>
-                <CodeColor color={codeColor}>{variation.value}</CodeColor>
-              </td>
-              <td className={styles.colorDescription}>{variation.description}</td>
-            </tr>
-          );
-        })}
+            return (
+              <tr key={variation.name}>
+                <td className={styles.colorName}>{variation.name}</td>
+                <td className={styles.colorProperty}>
+                  <code>{variation.property}</code>
+                </td>
+                <td className={styles.colorValue}>
+                  <CodeColor color={codeColor}>{variation.value}</CodeColor>
+                </td>
+                <td className={styles.colorDescription}>{variation.description}</td>
+              </tr>
+            );
+          })}
+        </tbody>
       </table>
     </div>
   );

From 244d7283e12bed9dc0f46eb953aab19cc905c9dd Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 18 May 2023 16:52:33 -0400
Subject: [PATCH 372/469] docs(react): remove unopened closing tag (#2964)

---
 docs/react/navigation.md                      | 13 ++++++-------
 versioned_docs/version-v6/react/navigation.md | 13 ++++++-------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index 34c2cdd9d6a..e54acf220db 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -403,13 +403,12 @@ When working with tabs, Ionic needs a way to know which view belongs to which ta
 ```tsx
 <IonApp>
   <IonReactRouter>
-      <IonRouterOutlet>
-        <Route path="/tabs" render={() => <Tabs />} />
-        <Route exact path="/">
-          <Redirect to="/tabs" />
-        </Route>
-      </IonRouterOutlet>
-    </IonSplitPane>
+    <IonRouterOutlet>
+      <Route path="/tabs" render={() => <Tabs />} />
+      <Route exact path="/">
+        <Redirect to="/tabs" />
+      </Route>
+    </IonRouterOutlet>
   </IonReactRouter>
 </IonApp>
 ```
diff --git a/versioned_docs/version-v6/react/navigation.md b/versioned_docs/version-v6/react/navigation.md
index 97bf7a64405..a8554943706 100644
--- a/versioned_docs/version-v6/react/navigation.md
+++ b/versioned_docs/version-v6/react/navigation.md
@@ -403,13 +403,12 @@ When working with tabs, Ionic needs a way to know which view belongs to which ta
 ```tsx
 <IonApp>
   <IonReactRouter>
-      <IonRouterOutlet>
-        <Route path="/tabs" render={() => <Tabs />} />
-        <Route exact path="/">
-          <Redirect to="/tabs" />
-        </Route>
-      </IonRouterOutlet>
-    </IonSplitPane>
+    <IonRouterOutlet>
+      <Route path="/tabs" render={() => <Tabs />} />
+      <Route exact path="/">
+        <Redirect to="/tabs" />
+      </Route>
+    </IonRouterOutlet>
   </IonReactRouter>
 </IonApp>
 ```

From 47dfcab107f2b6eaff2639fc4d43b1709ff94ccf Mon Sep 17 00:00:00 2001
From: Zakuru San <zelmarou@gmaiL.com>
Date: Fri, 19 May 2023 23:45:37 +0700
Subject: [PATCH 373/469] fix: Ionic CLI links to latest docs page (#2961)

---
 docs/reference/glossary.md                      | 2 +-
 versioned_docs/version-v5/reference/glossary.md | 2 +-
 versioned_docs/version-v6/reference/glossary.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md
index a728df32d95..9199d571c1c 100644
--- a/docs/reference/glossary.md
+++ b/docs/reference/glossary.md
@@ -86,7 +86,7 @@ title: Glossary
     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,
+    <a href="https://ionicframework.com/docs/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
diff --git a/versioned_docs/version-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.md
index 39c7d993d40..577fb246fbf 100644
--- a/versioned_docs/version-v5/reference/glossary.md
+++ b/versioned_docs/version-v5/reference/glossary.md
@@ -76,7 +76,7 @@
     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,
+    <a href="https://ionicframework.com/docs/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
diff --git a/versioned_docs/version-v6/reference/glossary.md b/versioned_docs/version-v6/reference/glossary.md
index a728df32d95..9199d571c1c 100644
--- a/versioned_docs/version-v6/reference/glossary.md
+++ b/versioned_docs/version-v6/reference/glossary.md
@@ -86,7 +86,7 @@ title: Glossary
     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,
+    <a href="https://ionicframework.com/docs/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

From d8731a41503a0472694c534a97d76d548ec899e1 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 19 May 2023 13:31:36 -0400
Subject: [PATCH 374/469] docs(tabs): angular usage does not use explicit
 ion-router-outlet (#2965)

Co-authored-by: skytern <36536345+skytern@users.noreply.github.com>
---
 static/usage/v6/tabs/router/angular/example_component_html.md | 2 --
 static/usage/v7/tabs/router/angular/example_component_html.md | 2 --
 2 files changed, 4 deletions(-)

diff --git a/static/usage/v6/tabs/router/angular/example_component_html.md b/static/usage/v6/tabs/router/angular/example_component_html.md
index 5b7b9b87a57..67be68b564c 100644
--- a/static/usage/v6/tabs/router/angular/example_component_html.md
+++ b/static/usage/v6/tabs/router/angular/example_component_html.md
@@ -1,7 +1,5 @@
 ```html
 <ion-tabs>
-  <ion-router-outlet></ion-router-outlet>
-
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="home">
       <ion-icon name="play-circle"></ion-icon>
diff --git a/static/usage/v7/tabs/router/angular/example_component_html.md b/static/usage/v7/tabs/router/angular/example_component_html.md
index 5b7b9b87a57..67be68b564c 100644
--- a/static/usage/v7/tabs/router/angular/example_component_html.md
+++ b/static/usage/v7/tabs/router/angular/example_component_html.md
@@ -1,7 +1,5 @@
 ```html
 <ion-tabs>
-  <ion-router-outlet></ion-router-outlet>
-
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="home">
       <ion-icon name="play-circle"></ion-icon>

From 4af04fabb7cfaea9bd77215376278c1c33268b19 Mon Sep 17 00:00:00 2001
From: Ken Sodemann <ken@ionic.io>
Date: Fri, 19 May 2023 12:41:44 -0500
Subject: [PATCH 375/469] doc(CORS): update the native options (#2954)

Include different options for Capacitor and Cordova (legacy).
Also fixes what was a dead link to Ionic Native.
---
 docs/troubleshooting/cors.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/troubleshooting/cors.md b/docs/troubleshooting/cors.md
index 5b497f74a12..061236ad283 100644
--- a/docs/troubleshooting/cors.md
+++ b/docs/troubleshooting/cors.md
@@ -238,9 +238,13 @@ If you are trying to connect to a 3rd-party API, first check in its documentatio
 
 #### 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.
+##### Capacitor Applications (Recommended)
 
-##### Usage in Ionic Angular 4
+For Capacitor applications, use the [Capacitor HTTP API](https://capacitorjs.com/docs/apis/http). This API patches `fetch` and `XMLHttpRequest` to use native libraries. Please note that if you also deploy the application to a web-based context such as PWA or the local development server (via `ionic serve` for example) you still need to implement CORS for those scenarios.
+
+##### Legacy Cordova Applications
+
+For legacy Cordova applications, use the [HTTP plugin with the Awesome Cordova Plugins wrapper](https://danielsogl.gitbook.io/awesome-cordova-plugins/http). 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.
 
 ```tsx
 import { Component } from '@angular/core';

From 2e8bff2d97f7707f79ae255208ae34a1f70a3367 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 23 May 2023 13:49:57 -0400
Subject: [PATCH 376/469] feat(playground): inline dependencies per framework
 example (#2970)

---
 src/components/global/Playground/index.tsx       | 16 ++++++++++++++++
 .../global/Playground/stackblitz.utils.ts        | 12 ++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 541e510b51e..9e01b1902bb 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -85,6 +85,21 @@ interface UsageTargetOptions {
   files: {
     [key: string]: MdxContent;
   };
+  /**
+   * The list of dependencies to use in the Stackblitz example.
+   * The key is the package name and the value is the version.
+   * The version must be a valid semver range.
+   *
+   * For example:
+   * ```ts
+   * dependencies: {
+   *  '@maskito/core': '^0.11.0',
+   * }
+   * ```
+   */
+  dependencies?: {
+    [key: string]: string;
+  };
 }
 
 /**
@@ -326,6 +341,7 @@ export default function Playground({
             .outerText,
         }))
         .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+      editorOptions.dependencies = (code[usageTarget] as UsageTargetOptions).dependencies;
     }
 
     switch (usageTarget) {
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 1fe697a350f..acfcc0adf3b 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -19,6 +19,14 @@ export interface EditorOptions {
     [key: string]: string;
   };
 
+  /**
+   * List of dependencies to add to the Stackblitz example.
+   * The key is the name of the dependency and the value is the version.
+   */
+  dependencies?: {
+    [key: string]: string;
+  }
+
   /**
    * `true` if `ion-app` and `ion-content` should automatically be injected into the
    * Stackblitz example.
@@ -79,6 +87,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
     dependencies = {
       ...dependencies,
       ...JSON.parse(package_json).dependencies,
+      ...options?.dependencies,
     };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
@@ -130,6 +139,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     'angular.json': defaultFiles[9],
     'tsconfig.json': defaultFiles[10],
     ...options?.files,
+    ...options?.dependencies,
   };
 
   const package_json = defaultFiles[11];
@@ -144,6 +154,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     dependencies = {
       ...dependencies,
       ...JSON.parse(package_json).dependencies,
+      ...options?.dependencies,
     };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
@@ -183,6 +194,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     'package.json': defaultFiles[4],
     'package-lock.json': defaultFiles[5],
     ...options?.files,
+    ...options?.dependencies,
     '.stackblitzrc': `{
   "startCommand": "yarn run start"
 }`,

From e48914422032cb34361fcf79fe3e414e21696d03 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 24 May 2023 11:26:56 -0400
Subject: [PATCH 377/469] chore: update minor release to happen every 4 weeks
 if needed (#2972)

---
 docs/reference/versioning.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/versioning.md b/docs/reference/versioning.md
index 87a269829fe..7c48549721e 100644
--- a/docs/reference/versioning.md
+++ b/docs/reference/versioning.md
@@ -12,7 +12,7 @@ A major release will be published when there is a breaking change introduced in
 
 ### 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 6 weeks**, if any features or API changes were made.
+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 4 weeks**, if any features or API changes were made.
 
 ### Patch Release
 

From 436bc2eb35d19741af360d6e029244eef81f0b53 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 25 May 2023 13:02:09 -0400
Subject: [PATCH 378/469] docs(select): add label slot and aria label
 playgrounds (#2971)

---
 docs/api/select.md                            | 41 +++++++++++++++----
 static/usage/v7/select/label-slot/angular.md  | 12 ++++++
 static/usage/v7/select/label-slot/demo.html   | 31 ++++++++++++++
 static/usage/v7/select/label-slot/index.md    | 13 ++++++
 .../usage/v7/select/label-slot/javascript.md  | 12 ++++++
 static/usage/v7/select/label-slot/react.md    | 20 +++++++++
 static/usage/v7/select/label-slot/vue.md      | 23 +++++++++++
 .../v7/select/no-visible-label/angular.md     | 11 +++++
 .../v7/select/no-visible-label/demo.html      | 30 ++++++++++++++
 .../usage/v7/select/no-visible-label/index.md | 13 ++++++
 .../v7/select/no-visible-label/javascript.md  | 11 +++++
 .../usage/v7/select/no-visible-label/react.md | 19 +++++++++
 .../usage/v7/select/no-visible-label/vue.md   | 22 ++++++++++
 13 files changed, 249 insertions(+), 9 deletions(-)
 create mode 100644 static/usage/v7/select/label-slot/angular.md
 create mode 100644 static/usage/v7/select/label-slot/demo.html
 create mode 100644 static/usage/v7/select/label-slot/index.md
 create mode 100644 static/usage/v7/select/label-slot/javascript.md
 create mode 100644 static/usage/v7/select/label-slot/react.md
 create mode 100644 static/usage/v7/select/label-slot/vue.md
 create mode 100644 static/usage/v7/select/no-visible-label/angular.md
 create mode 100644 static/usage/v7/select/no-visible-label/demo.html
 create mode 100644 static/usage/v7/select/no-visible-label/index.md
 create mode 100644 static/usage/v7/select/no-visible-label/javascript.md
 create mode 100644 static/usage/v7/select/no-visible-label/react.md
 create mode 100644 static/usage/v7/select/no-visible-label/vue.md

diff --git a/docs/api/select.md b/docs/api/select.md
index d5be17b0978..2636e7d04bb 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -24,6 +24,38 @@ A select should be used with child `<ion-select-option>` elements. If the child
 
 If `value` is set on the `<ion-select>`, the selected option will be chosen based on that value.
 
+## Labels
+
+Select has several options for supplying a label for the component:
+
+- `label` property: used for plaintext labels
+- `label` slot: used for custom HTML labels
+- `aria-label`: used for selects with no visible label
+
+### Label Placement
+
+Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.
+
+import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
+
+<LabelPlacement />
+
+### Label Slot
+
+While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+
+import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
+
+<LabelSlot />
+
+### No Visible Label
+
+If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers.
+
+import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';
+
+<NoVisibleLabel />
+
 ## 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.
@@ -83,15 +115,6 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val
 import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';
 
 <ObjectValuesAndMultipleSelectionExample />
-  
-
-## Label Placement
-
-Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
-
-import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
-
-<LabelPlacement />
 
 ## Justification
   
diff --git a/static/usage/v7/select/label-slot/angular.md b/static/usage/v7/select/label-slot/angular.md
new file mode 100644
index 00000000000..93790d050e2
--- /dev/null
+++ b/static/usage/v7/select/label-slot/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select a Fruit">
+      <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/label-slot/demo.html b/static/usage/v7/select/label-slot/demo.html
new file mode 100644
index 00000000000..35f5b7c5efd
--- /dev/null
+++ b/static/usage/v7/select/label-slot/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>select</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select placeholder="Select a Fruit">
+                <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/select/label-slot/index.md b/static/usage/v7/select/label-slot/index.md
new file mode 100644
index 00000000000..1b25e6b83f6
--- /dev/null
+++ b/static/usage/v7/select/label-slot/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/select/label-slot/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/select/label-slot/javascript.md b/static/usage/v7/select/label-slot/javascript.md
new file mode 100644
index 00000000000..93790d050e2
--- /dev/null
+++ b/static/usage/v7/select/label-slot/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select a Fruit">
+      <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/label-slot/react.md b/static/usage/v7/select/label-slot/react.md
new file mode 100644
index 00000000000..30dd46d7532
--- /dev/null
+++ b/static/usage/v7/select/label-slot/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect placeholder="Select a Fruit">
+          <div slot="label">Favorite Fruit <IonText color="danger">(Required)</IonText></div>
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/label-slot/vue.md b/static/usage/v7/select/label-slot/vue.md
new file mode 100644
index 00000000000..4bdeb67e1d0
--- /dev/null
+++ b/static/usage/v7/select/label-slot/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+     <ion-select placeholder="Select a Fruit">
+       <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
+       <ion-select-option value="apple">Apple</ion-select-option>
+       <ion-select-option value="banana">Banana</ion-select-option>
+       <ion-select-option value="orange">Orange</ion-select-option>
+     </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/no-visible-label/angular.md b/static/usage/v7/select/no-visible-label/angular.md
new file mode 100644
index 00000000000..1c14ab03008
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Favorite Fruit" value="apple">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/no-visible-label/demo.html b/static/usage/v7/select/no-visible-label/demo.html
new file mode 100644
index 00000000000..12d131e896d
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/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>select</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="Favorite Fruit" value="apple">
+                <ion-select-option value="apple">Apple</ion-select-option>
+                <ion-select-option value="banana">Banana</ion-select-option>
+                <ion-select-option value="orange">Orange</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/select/no-visible-label/index.md b/static/usage/v7/select/no-visible-label/index.md
new file mode 100644
index 00000000000..214708de577
--- /dev/null
+++ b/static/usage/v7/select/no-visible-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"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/no-visible-label/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/select/no-visible-label/javascript.md b/static/usage/v7/select/no-visible-label/javascript.md
new file mode 100644
index 00000000000..1c14ab03008
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Favorite Fruit" value="apple">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/no-visible-label/react.md b/static/usage/v7/select/no-visible-label/react.md
new file mode 100644
index 00000000000..8695381a487
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect aria-label="Favorite Fruit" value="apple">
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/no-visible-label/vue.md b/static/usage/v7/select/no-visible-label/vue.md
new file mode 100644
index 00000000000..1d3753d58f8
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+     <ion-select aria-label="Favorite Fruit" value="apple">
+       <ion-select-option value="apple">Apple</ion-select-option>
+       <ion-select-option value="banana">Banana</ion-select-option>
+       <ion-select-option value="orange">Orange</ion-select-option>
+     </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
+  });
+</script>
+```

From bb95aec091dd514faf94ca1b3d1d9d2c8026373a Mon Sep 17 00:00:00 2001
From: Oluwaseun Raphael Afolayan <theafolayan@gmail.com>
Date: Thu, 25 May 2023 18:46:29 +0100
Subject: [PATCH 379/469] docs(vue): add community guide by theafolayan (#1795)

Co-authored-by: Maria Hutt <maria@ionic.io>
---
 docs/vue/overview.md                      | 1 +
 versioned_docs/version-v6/vue/overview.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/vue/overview.md b/docs/vue/overview.md
index aadd0add9d8..1689934bc26 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -33,6 +33,7 @@ While there are no known technical limitations to using `Ionic Vue` with [Cordov
 ## 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
+- [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan
 
 ## Installation
 
diff --git a/versioned_docs/version-v6/vue/overview.md b/versioned_docs/version-v6/vue/overview.md
index aadd0add9d8..1689934bc26 100644
--- a/versioned_docs/version-v6/vue/overview.md
+++ b/versioned_docs/version-v6/vue/overview.md
@@ -33,6 +33,7 @@ While there are no known technical limitations to using `Ionic Vue` with [Cordov
 ## 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
+- [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan
 
 ## Installation
 

From b846359f424ce60fbdb3905ba35741549ef3d2dd Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 25 May 2023 14:00:59 -0500
Subject: [PATCH 380/469] docs(PWAs): add Vue to list of PWA deployment guides
 (#2974)

Co-authored-by: VAS000 <VAS000@users.noreply.github.com>
---
 docs/deployment/progressive-web-app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.md
index 6fc348f877b..3a7e522ec61 100644
--- a/docs/deployment/progressive-web-app.md
+++ b/docs/deployment/progressive-web-app.md
@@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards';
 
 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.
+For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.
 
 <DocsCards>
   <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg"></DocsCard>

From b43e71c52d2a96f7f7d5acf0f4ce4f7bc6692876 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 26 May 2023 11:14:06 -0400
Subject: [PATCH 381/469] docs(spinner): add docs for resizing (#2966)

* docs(spinner): add docs for resizing
---
 docs/api/spinner.md                           |  8 +++++
 .../resizing/angular/example_component_css.md |  6 ++++
 .../angular/example_component_html.md         |  3 ++
 .../v7/spinner/theming/resizing/demo.html     | 29 +++++++++++++++++
 .../v7/spinner/theming/resizing/index.md      | 32 +++++++++++++++++++
 .../v7/spinner/theming/resizing/javascript.md | 10 ++++++
 .../v7/spinner/theming/resizing/react.md      |  9 ++++++
 .../theming/resizing/react/main_css.md        |  6 ++++
 .../theming/resizing/react/main_tsx.md        | 15 +++++++++
 .../usage/v7/spinner/theming/resizing/vue.md  | 21 ++++++++++++
 10 files changed, 139 insertions(+)
 create mode 100644 static/usage/v7/spinner/theming/resizing/angular/example_component_css.md
 create mode 100644 static/usage/v7/spinner/theming/resizing/angular/example_component_html.md
 create mode 100644 static/usage/v7/spinner/theming/resizing/demo.html
 create mode 100644 static/usage/v7/spinner/theming/resizing/index.md
 create mode 100644 static/usage/v7/spinner/theming/resizing/javascript.md
 create mode 100644 static/usage/v7/spinner/theming/resizing/react.md
 create mode 100644 static/usage/v7/spinner/theming/resizing/react/main_css.md
 create mode 100644 static/usage/v7/spinner/theming/resizing/react/main_tsx.md
 create mode 100644 static/usage/v7/spinner/theming/resizing/vue.md

diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index dc5b55a36c3..a9af39e6dc3 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -37,6 +37,14 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
 
 <Colors />
 
+### Styling
+
+You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height.
+
+import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md';
+
+<Resizing />
+
 ### CSS Custom Properties
 
 import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
diff --git a/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md b/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md
new file mode 100644
index 00000000000..845d1a9af47
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-spinner {
+  width: 100px;
+  height: 100px;
+}
+```
diff --git a/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md b/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-spinner></ion-spinner>
+```
diff --git a/static/usage/v7/spinner/theming/resizing/demo.html b/static/usage/v7/spinner/theming/resizing/demo.html
new file mode 100644
index 00000000000..acebb2ef5d2
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/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>Spinner</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-spinner {
+        width: 100px;
+        height: 100px;
+      }
+    </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/v7/spinner/theming/resizing/index.md b/static/usage/v7/spinner/theming/resizing/index.md
new file mode 100644
index 00000000000..5d4b142092e
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/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="6"
+  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/resizing/demo.html"
+/>
diff --git a/static/usage/v7/spinner/theming/resizing/javascript.md b/static/usage/v7/spinner/theming/resizing/javascript.md
new file mode 100644
index 00000000000..9c875eb4951
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/javascript.md
@@ -0,0 +1,10 @@
+```html
+<ion-spinner></ion-spinner>
+
+<style>
+  ion-spinner {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+```
diff --git a/static/usage/v7/spinner/theming/resizing/react.md b/static/usage/v7/spinner/theming/resizing/react.md
new file mode 100644
index 00000000000..117d82c8541
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/react.md
@@ -0,0 +1,9 @@
+```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/resizing/react/main_css.md b/static/usage/v7/spinner/theming/resizing/react/main_css.md
new file mode 100644
index 00000000000..845d1a9af47
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-spinner {
+  width: 100px;
+  height: 100px;
+}
+```
diff --git a/static/usage/v7/spinner/theming/resizing/react/main_tsx.md b/static/usage/v7/spinner/theming/resizing/react/main_tsx.md
new file mode 100644
index 00000000000..f990cb1e738
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/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/resizing/vue.md b/static/usage/v7/spinner/theming/resizing/vue.md
new file mode 100644
index 00000000000..52ae17f7694
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/vue.md
@@ -0,0 +1,21 @@
+```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 {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+```

From f4306bece48e6fd49ca7fe5660f833f8cd9db4c9 Mon Sep 17 00:00:00 2001
From: Julien De Coster <3533550+juliendecoster@users.noreply.github.com>
Date: Fri, 26 May 2023 23:08:58 +0200
Subject: [PATCH 382/469] docs(developing): update default Android SDK path
 (#2771)

Co-authored-by: Brandy Carney <brandy@ionic.io>
---
 docs/developing/android.md                      | 14 +++-----------
 versioned_docs/version-v5/developing/android.md |  4 ++--
 versioned_docs/version-v6/developing/android.md | 14 +++-----------
 3 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/docs/developing/android.md b/docs/developing/android.md
index daa73c8a920..825e76de6df 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -46,18 +46,10 @@ The Android SDK ships with <a href="https://developer.android.com/studio/command
 
 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:
+1. Set the `ANDROID_SDK_ROOT` environment variable. This path should be the **Android SDK Location** used in the previous section. To find the SDK Location in Android Studio, click **File** > **Project Structure**. Select **SDK Location** in the left pane. The path is shown under **Android SDK location**.
 
    ```shell
-   $ export ANDROID_SDK_ROOT=$HOME/Android/Sdk
+   $ export ANDROID_SDK_ROOT=$HOME/Library/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>.
@@ -72,7 +64,7 @@ In `~/.bashrc`, `~/.bash_profile`, or similar shell startup scripts, make the fo
    ```
 
    :::note
-   For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools&lt;version>` must also be added to `PATH`.
+   For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools<version>` must also be added to `PATH`.
    :::
 
 ### Creating an Android Virtual Device
diff --git a/versioned_docs/version-v5/developing/android.md b/versioned_docs/version-v5/developing/android.md
index 8faf6779d2d..3b060bd0284 100644
--- a/versioned_docs/version-v5/developing/android.md
+++ b/versioned_docs/version-v5/developing/android.md
@@ -41,7 +41,7 @@ The Android SDK ships with <a href="https://developer.android.com/studio/command
 
 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.
+1. Set the `ANDROID_SDK_ROOT` environment variable. This path should be the **Android SDK Location** used in the previous section. To find the SDK Location in Android Studio, click **File** > **Project Structure**. Select **SDK Location** in the left pane. The path is shown under **Android SDK location**.
 
    ```shell
    $ export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
@@ -60,7 +60,7 @@ In `~/.bashrc`, `~/.bash_profile`, or similar shell startup scripts, make the fo
 
 :::note
 
-For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools&lt;version>` must
+For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools<version>` must
 also be added to `PATH`.
 
 :::
diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md
index e52453ab98e..97c5459b0b1 100644
--- a/versioned_docs/version-v6/developing/android.md
+++ b/versioned_docs/version-v6/developing/android.md
@@ -46,18 +46,10 @@ The Android SDK ships with <a href="https://developer.android.com/studio/command
 
 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:
+1. Set the `ANDROID_SDK_ROOT` environment variable.  This path should be the **Android SDK Location** used in the previous section. To find the SDK Location in Android Studio, click **File** > **Project Structure**. Select **SDK Location** in the left pane. The path is shown under **Android SDK location**.
 
    ```shell
-   $ export ANDROID_SDK_ROOT=$HOME/Android/Sdk
+   $ export ANDROID_SDK_ROOT=$HOME/Library/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>.
@@ -72,7 +64,7 @@ In `~/.bashrc`, `~/.bash_profile`, or similar shell startup scripts, make the fo
    ```
 
    :::note
-   For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools&lt;version>` must also be added to `PATH`.
+   For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools<version>` must also be added to `PATH`.
    :::
 
 ### Creating an Android Virtual Device

From c96239fe9ce27045c4eab949f26b30322b6db282 Mon Sep 17 00:00:00 2001
From: Martijn Grendelman <martijn@grendelman.net>
Date: Tue, 30 May 2023 16:26:46 +0200
Subject: [PATCH 383/469] docs(native): fix typo (#2976)

---
 docs/native-setup.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/native-setup.md b/docs/native-setup.md
index 30a8ac5c0fc..6c9c518e2d4 100644
--- a/docs/native-setup.md
+++ b/docs/native-setup.md
@@ -126,7 +126,7 @@ import { Camera, CameraResultType } from '@capacitor/camera';
 import { useState } from 'react';
 
 export function CameraComponent() {
-  const [imageSrc, setImageSrc] = usetState('');
+  const [imageSrc, setImageSrc] = useState('');
 
   const takePicture = async () => {
     const image = await Camera.getPhoto({

From bb9e793124dd4e9a1c29e115084483a4124de965 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 30 May 2023 15:45:14 -0400
Subject: [PATCH 384/469] chore: prettier formatting (#2979)

* chore: prettier formatting

* chore: revert invalid changes
---
 docs/angular/lifecycle.md                            |  6 +++---
 docs/react/lifecycle.md                              |  6 +++---
 docs/reference/glossary.md                           |  4 ++--
 docs/vue/lifecycle.md                                |  8 ++++----
 docs/vue/navigation.md                               | 10 +---------
 src/components/global/Playground/stackblitz.utils.ts |  2 +-
 versioned_docs/version-v5/api/item.md                |  6 ++----
 versioned_docs/version-v5/native/background-fetch.md |  4 ++--
 versioned_docs/version-v5/native/bluetooth-serial.md |  4 ++--
 versioned_docs/version-v5/native/document-scanner.md |  4 ++--
 versioned_docs/version-v5/native/firebase-vision.md  |  4 ++--
 versioned_docs/version-v5/native/google-analytics.md |  4 ++--
 versioned_docs/version-v5/reference/glossary.md      |  4 ++--
 versioned_docs/version-v6/developing/android.md      |  2 +-
 versioned_docs/version-v6/reference/glossary.md      |  4 ++--
 15 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md
index ddb7b902fbb..0f981e64dc3 100644
--- a/docs/angular/lifecycle.md
+++ b/docs/angular/lifecycle.md
@@ -37,9 +37,9 @@ In addition to the Angular life cycle events, Ionic Angular provides a few addit
 | 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 *from* has *finished* animating.  |
+| `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 _from_ has _finished_ animating.  |
 
 These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
 
diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md
index 9d348b95013..b717c5f0606 100644
--- a/docs/react/lifecycle.md
+++ b/docs/react/lifecycle.md
@@ -20,9 +20,9 @@ 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 *from* has *finished* animating.  |
+| `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 _from_ has _finished_ animating.  |
 
 These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
 
diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md
index 9199d571c1c..1d70bd176dc 100644
--- a/docs/reference/glossary.md
+++ b/docs/reference/glossary.md
@@ -86,8 +86,8 @@ title: Glossary
     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/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://ionicframework.com/docs/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>
diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index b9f16fc9cad..d18b3bc5653 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -9,12 +9,12 @@ This guide discusses how to use the Ionic Framework Lifecycle events in an Ionic
 ## Ionic Framework Lifecycle Methods
 
 Ionic Framework provides a few lifecycle methods that you can use in your apps:
-| Event Name         | Description                                                        |
+| 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 *from* has *finished* animating.  |
+| `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 _from_ has _finished_ animating. |
 
 These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
 
diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index 205e146cec9..1286ab01537 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -416,15 +416,7 @@ Let's start by taking a look at our `Tabs` component:
 </template>
 
 <script lang="ts">
-  import {
-    IonTabBar,
-    IonTabButton,
-    IonTabs,
-    IonLabel,
-    IonIcon,
-    IonPage,
-    IonRouterOutlet,
-  } from '@ionic/vue';
+  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
   import { ellipse, square, triangle } from 'ionicons/icons';
 
   export default {
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index acfcc0adf3b..ad2947ba15b 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -25,7 +25,7 @@ export interface EditorOptions {
    */
   dependencies?: {
     [key: string]: string;
-  }
+  };
 
   /**
    * `true` if `ion-app` and `ion-content` should automatically be injected into the
diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.md
index 57be7698f6a..6c58db0787a 100644
--- a/versioned_docs/version-v5/api/item.md
+++ b/versioned_docs/version-v5/api/item.md
@@ -1039,8 +1039,7 @@ export class ItemExample {
           <ion-label class="ion-text-wrap">
             Multiline text that should wrap when it is too long to fit on one line in the item.
           </ion-label>
-        </ion-item>,
-        <ion-item>
+        </ion-item>,<ion-item>
           <ion-label class="ion-text-wrap">
             <ion-text color="primary">
               <h3>H3 Primary Title</h3>
@@ -1050,8 +1049,7 @@ export class ItemExample {
               <p>Paragraph line 2 secondary</p>
             </ion-text>
           </ion-label>
-        </ion-item>
-        ,
+        </ion-item>,
         <ion-item lines="full">
           <ion-label>Item with Full Lines</ion-label>
         </ion-item>
diff --git a/versioned_docs/version-v5/native/background-fetch.md b/versioned_docs/version-v5/native/background-fetch.md
index 154a7262e4c..a00e1f832e3 100644
--- a/versioned_docs/version-v5/native/background-fetch.md
+++ b/versioned_docs/version-v5/native/background-fetch.md
@@ -58,8 +58,8 @@ For more detail, please see https://github.com/transistorsoft/cordova-plugin-bac
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'}
+      $ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/bluetooth-serial.md b/versioned_docs/version-v5/native/bluetooth-serial.md
index 90783c844e5..838c10bb35e 100644
--- a/versioned_docs/version-v5/native/bluetooth-serial.md
+++ b/versioned_docs/version-v5/native/bluetooth-serial.md
@@ -51,8 +51,8 @@ This plugin enables serial communication over Bluetooth. It was written for comm
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'}
+      $ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/document-scanner.md b/versioned_docs/version-v5/native/document-scanner.md
index b71162f7fb0..4d4716b999f 100644
--- a/versioned_docs/version-v5/native/document-scanner.md
+++ b/versioned_docs/version-v5/native/document-scanner.md
@@ -56,8 +56,8 @@ This plugin processes images of documents, compensating for perspective.
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'}
+      $ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/firebase-vision.md b/versioned_docs/version-v5/native/firebase-vision.md
index 52fb788095c..676aa280c17 100644
--- a/versioned_docs/version-v5/native/firebase-vision.md
+++ b/versioned_docs/version-v5/native/firebase-vision.md
@@ -56,8 +56,8 @@ Cordova plugin for Firebase MLKit Vision
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'}
+      $ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/native/google-analytics.md b/versioned_docs/version-v5/native/google-analytics.md
index 1f9d941d381..545100f71bc 100644
--- a/versioned_docs/version-v5/native/google-analytics.md
+++ b/versioned_docs/version-v5/native/google-analytics.md
@@ -56,8 +56,8 @@ Prerequisites:
 >
   <TabItem value="Capacitor">
     <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'}$
-      ionic cap sync
+      $ npm install cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'}
+      $ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
diff --git a/versioned_docs/version-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.md
index 577fb246fbf..65fc7ed8769 100644
--- a/versioned_docs/version-v5/reference/glossary.md
+++ b/versioned_docs/version-v5/reference/glossary.md
@@ -76,8 +76,8 @@
     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/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://ionicframework.com/docs/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>
diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md
index 97c5459b0b1..1d33eb4a3d6 100644
--- a/versioned_docs/version-v6/developing/android.md
+++ b/versioned_docs/version-v6/developing/android.md
@@ -46,7 +46,7 @@ The Android SDK ships with <a href="https://developer.android.com/studio/command
 
 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. To find the SDK Location in Android Studio, click **File** > **Project Structure**. Select **SDK Location** in the left pane. The path is shown under **Android SDK location**.
+1. Set the `ANDROID_SDK_ROOT` environment variable. This path should be the **Android SDK Location** used in the previous section. To find the SDK Location in Android Studio, click **File** > **Project Structure**. Select **SDK Location** in the left pane. The path is shown under **Android SDK location**.
 
    ```shell
    $ export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
diff --git a/versioned_docs/version-v6/reference/glossary.md b/versioned_docs/version-v6/reference/glossary.md
index 9199d571c1c..1d70bd176dc 100644
--- a/versioned_docs/version-v6/reference/glossary.md
+++ b/versioned_docs/version-v6/reference/glossary.md
@@ -86,8 +86,8 @@ title: Glossary
     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/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://ionicframework.com/docs/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>

From 9fd849f5c8af07fbf243caad9f6f2a8f9a6b8545 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 31 May 2023 15:13:22 -0400
Subject: [PATCH 385/469] docs(angular): relative routing is supported (#2980)

Co-authored-by: rdlabo<sakakibara@rdlabo.jp>>
---
 docs/angular/navigation.md                      | 4 ----
 versioned_docs/version-v5/angular/navigation.md | 4 ----
 versioned_docs/version-v6/angular/navigation.md | 4 ----
 3 files changed, 12 deletions(-)

diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md
index eb05502309c..9ad675058a0 100644
--- a/docs/angular/navigation.md
+++ b/docs/angular/navigation.md
@@ -118,10 +118,6 @@ export class LoginComponent {
 
 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.
diff --git a/versioned_docs/version-v5/angular/navigation.md b/versioned_docs/version-v5/angular/navigation.md
index 0e5148442b8..9dcbcc88949 100644
--- a/versioned_docs/version-v5/angular/navigation.md
+++ b/versioned_docs/version-v5/angular/navigation.md
@@ -109,10 +109,6 @@ export class LoginComponent {
 
 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
-:::
-
 ## 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.
diff --git a/versioned_docs/version-v6/angular/navigation.md b/versioned_docs/version-v6/angular/navigation.md
index fd50cc3e29c..9ac7059bde0 100644
--- a/versioned_docs/version-v6/angular/navigation.md
+++ b/versioned_docs/version-v6/angular/navigation.md
@@ -118,10 +118,6 @@ export class LoginComponent {
 
 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.

From e665d7e76a2fee92c47bb312112db1204ad3c951 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 5 Jun 2023 15:49:55 -0400
Subject: [PATCH 386/469] docs(angular): update component testing code snippets
 (#2985)

---
 docs/angular/testing.md                      | 6 ++----
 versioned_docs/version-v6/angular/testing.md | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/docs/angular/testing.md b/docs/angular/testing.md
index b8aedacd3fe..142f4dd6ec4 100644
--- a/docs/angular/testing.md
+++ b/docs/angular/testing.md
@@ -82,7 +82,7 @@ Since pages and components contain both TypeScript code and HTML template markup
 
 ```tsx
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabsPage } from './tabs.page';
 
@@ -91,13 +91,11 @@ describe('TabsPage', () => {
   let fixture: ComponentFixture<TabsPage>;
 
   beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [TabsPage],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(TabsPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/versioned_docs/version-v6/angular/testing.md b/versioned_docs/version-v6/angular/testing.md
index b8aedacd3fe..142f4dd6ec4 100644
--- a/versioned_docs/version-v6/angular/testing.md
+++ b/versioned_docs/version-v6/angular/testing.md
@@ -82,7 +82,7 @@ Since pages and components contain both TypeScript code and HTML template markup
 
 ```tsx
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabsPage } from './tabs.page';
 
@@ -91,13 +91,11 @@ describe('TabsPage', () => {
   let fixture: ComponentFixture<TabsPage>;
 
   beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [TabsPage],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(TabsPage);
     component = fixture.componentInstance;
     fixture.detectChanges();

From 7c5fc22a3eb28e1ac89ab507ce020a988e402bb4 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 6 Jun 2023 12:12:31 -0400
Subject: [PATCH 387/469] chore(deps): update react and vue playground
 dependencies (#2989)

---
 .../stackblitz/v7/react/package-lock.json     | 76 ++++++++--------
 static/code/stackblitz/v7/react/package.json  |  4 +-
 .../code/stackblitz/v7/vue/package-lock.json  | 88 +++++++++----------
 static/code/stackblitz/v7/vue/package.json    |  4 +-
 4 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index ba6c7a69c04..a2ed6e49230 100644
--- a/static/code/stackblitz/v7/react/package-lock.json
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -8,8 +8,8 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^7.0.0",
-        "@ionic/react-router": "^7.0.0",
+        "@ionic/react": "^7.0.10",
+        "@ionic/react-router": "^7.0.10",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -2257,21 +2257,21 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
-      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
+      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
       "dependencies": {
-        "@stencil/core": "^3.1.0",
+        "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0.tgz",
-      "integrity": "sha512-t9NlHZTiH/NvT3GLcO4yS5Whe9stpsZ9AtNOYS+aPcKM5vhxJSFGXDUvKtABOLi2CniW2kFE8krHwjz9V0GQYA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.10.tgz",
+      "integrity": "sha512-DggKOQ0JRsOSVY+YZicVhgz5gouL7APQ73kue3PsFK/OrtfeN/5om+XRkqO9bYHam/W/xVp3kpXSYcnsUICntA==",
       "dependencies": {
-        "@ionic/core": "7.0.0",
+        "@ionic/core": "7.0.10",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -2281,11 +2281,11 @@
       }
     },
     "node_modules/@ionic/react-router": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0.tgz",
-      "integrity": "sha512-rlYWI9Rh8lk3STZ38J7AGx0wnCHYpLg7Ocoxjsvxyuif5PEqQlzZyu0UN9IWVyEMctZEZ2cN0CLayBVaOCMYuA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.10.tgz",
+      "integrity": "sha512-auHuYx19NYtUUMqssdJE8pV/AbEKc8ti5gzO9wuSK0+LQPn7TJC85rXqUpntJK5iaz0kA91uBuuX2wF7Nf8vag==",
       "dependencies": {
-        "@ionic/react": "7.0.0",
+        "@ionic/react": "7.0.10",
         "tslib": "*"
       },
       "peerDependencies": {
@@ -3237,9 +3237,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
-      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8639,9 +8639,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
-      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz",
+      "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
@@ -18208,31 +18208,31 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz",
-      "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
+      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
       "requires": {
-        "@stencil/core": "^3.1.0",
+        "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/react": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.0.tgz",
-      "integrity": "sha512-t9NlHZTiH/NvT3GLcO4yS5Whe9stpsZ9AtNOYS+aPcKM5vhxJSFGXDUvKtABOLi2CniW2kFE8krHwjz9V0GQYA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.10.tgz",
+      "integrity": "sha512-DggKOQ0JRsOSVY+YZicVhgz5gouL7APQ73kue3PsFK/OrtfeN/5om+XRkqO9bYHam/W/xVp3kpXSYcnsUICntA==",
       "requires": {
-        "@ionic/core": "7.0.0",
+        "@ionic/core": "7.0.10",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
     },
     "@ionic/react-router": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.0.tgz",
-      "integrity": "sha512-rlYWI9Rh8lk3STZ38J7AGx0wnCHYpLg7Ocoxjsvxyuif5PEqQlzZyu0UN9IWVyEMctZEZ2cN0CLayBVaOCMYuA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.0.10.tgz",
+      "integrity": "sha512-auHuYx19NYtUUMqssdJE8pV/AbEKc8ti5gzO9wuSK0+LQPn7TJC85rXqUpntJK5iaz0kA91uBuuX2wF7Nf8vag==",
       "requires": {
-        "@ionic/react": "7.0.0",
+        "@ionic/react": "7.0.10",
         "tslib": "*"
       }
     },
@@ -18920,9 +18920,9 @@
       }
     },
     "@stencil/core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz",
-      "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
@@ -22893,9 +22893,9 @@
       }
     },
     "ionicons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
-      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz",
+      "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==",
       "requires": {
         "@stencil/core": "^2.18.0"
       },
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index 9f04dd76f41..9e3c1a361ff 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "^7.0.0",
-    "@ionic/react-router": "^7.0.0",
+    "@ionic/react": "^7.0.10",
+    "@ionic/react-router": "^7.0.10",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index b49503fdc08..d3758659f8f 100644
--- a/static/code/stackblitz/v7/vue/package-lock.json
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -8,8 +8,8 @@
       "name": "vite-vue-starter",
       "version": "0.0.0",
       "dependencies": {
-        "@ionic/vue": "^7.0.0",
-        "@ionic/vue-router": "^7.0.0",
+        "@ionic/vue": "^7.0.10",
+        "@ionic/vue-router": "^7.0.10",
         "vue": "^3.2.25",
         "vue-router": "4.0.13"
       },
@@ -48,36 +48,36 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.4.tgz",
-      "integrity": "sha512-tS1RfWn+L3jVpU833d7QQs1FQO1MlbDQL6sMaYBOYcE1nNZuDTd++zcOS264eklNnZu6z7PJmd04dj3DnQjsmA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
+      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
       "dependencies": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.4.tgz",
-      "integrity": "sha512-yHJhcfdrY6ePbOWPX1njmnBryWKFmdVGIGYm6bNGiWsFFTzdP913n8TpG+Eyvhoi9Zi2CYQl/sHvmuF2GuaqTQ==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz",
+      "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==",
       "dependencies": {
-        "@ionic/core": "7.0.4",
+        "@ionic/core": "7.0.10",
         "ionicons": "^7.0.0"
       }
     },
     "node_modules/@ionic/vue-router": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.4.tgz",
-      "integrity": "sha512-kEowloxxjnoDaMeoli2rWHVUvnEUqkK95juik79E8TaIXkK15QJdl8QgB7hCvNMER20yVT/tgx87DxxYOhFflg==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.10.tgz",
+      "integrity": "sha512-NR2o3CnBr1M6YzIVuzMRj8s+qo6ySWM/H6WUJN2y3hLobGL0stt6kpTWJ05HtRCFZAb5yvSym/UfYwSRifpLMA==",
       "dependencies": {
-        "@ionic/vue": "7.0.4"
+        "@ionic/vue": "7.0.10"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -646,9 +646,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
-      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz",
+      "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
@@ -797,9 +797,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/typescript": {
       "version": "4.9.4",
@@ -907,36 +907,36 @@
       "optional": true
     },
     "@ionic/core": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.4.tgz",
-      "integrity": "sha512-tS1RfWn+L3jVpU833d7QQs1FQO1MlbDQL6sMaYBOYcE1nNZuDTd++zcOS264eklNnZu6z7PJmd04dj3DnQjsmA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
+      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
       "requires": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/vue": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.4.tgz",
-      "integrity": "sha512-yHJhcfdrY6ePbOWPX1njmnBryWKFmdVGIGYm6bNGiWsFFTzdP913n8TpG+Eyvhoi9Zi2CYQl/sHvmuF2GuaqTQ==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz",
+      "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==",
       "requires": {
-        "@ionic/core": "7.0.4",
+        "@ionic/core": "7.0.10",
         "ionicons": "^7.0.0"
       }
     },
     "@ionic/vue-router": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.4.tgz",
-      "integrity": "sha512-kEowloxxjnoDaMeoli2rWHVUvnEUqkK95juik79E8TaIXkK15QJdl8QgB7hCvNMER20yVT/tgx87DxxYOhFflg==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.0.10.tgz",
+      "integrity": "sha512-NR2o3CnBr1M6YzIVuzMRj8s+qo6ySWM/H6WUJN2y3hLobGL0stt6kpTWJ05HtRCFZAb5yvSym/UfYwSRifpLMA==",
       "requires": {
-        "@ionic/vue": "7.0.4"
+        "@ionic/vue": "7.0.10"
       }
     },
     "@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
     },
     "@vitejs/plugin-vue": {
       "version": "2.3.4",
@@ -1292,9 +1292,9 @@
       }
     },
     "ionicons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
-      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz",
+      "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==",
       "requires": {
         "@stencil/core": "^2.18.0"
       },
@@ -1391,9 +1391,9 @@
       "dev": true
     },
     "tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "typescript": {
       "version": "4.9.4",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index d2f1f661387..5d661e04f57 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "^7.0.4",
-    "@ionic/vue-router": "^7.0.4",
+    "@ionic/vue": "^7.0.10",
+    "@ionic/vue-router": "^7.0.10",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },

From 0095c9f4f522cd6d2e06184d964bbc1cc55e0ad6 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 6 Jun 2023 11:25:28 -0500
Subject: [PATCH 388/469] docs(datetime): add playground for styling wheel
 pickers (#2982)

---
 docs/api/datetime.md                          | 15 +++++--
 .../angular/example_component_html.md         |  0
 .../global-theming}/angular/global_css.md     |  0
 .../global-theming}/demo.html                 |  4 +-
 .../global-theming}/index.md                  |  2 +-
 .../global-theming}/javascript.md             |  0
 .../global-theming}/react/main_css.md         |  0
 .../global-theming}/react/main_tsx.md         |  0
 .../global-theming}/vue.md                    |  0
 .../angular/example_component_css.md          | 16 ++++++++
 .../angular/example_component_html.md         |  3 ++
 .../datetime/styling/wheel-styling/demo.html  | 39 +++++++++++++++++++
 .../datetime/styling/wheel-styling/index.md   | 33 ++++++++++++++++
 .../styling/wheel-styling/javascript.md       | 20 ++++++++++
 .../styling/wheel-styling/react/main_css.md   | 16 ++++++++
 .../styling/wheel-styling/react/main_tsx.md   | 11 ++++++
 .../v7/datetime/styling/wheel-styling/vue.md  | 31 +++++++++++++++
 17 files changed, 184 insertions(+), 6 deletions(-)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/angular/example_component_html.md (100%)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/angular/global_css.md (100%)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/demo.html (95%)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/index.md (92%)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/javascript.md (100%)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/react/main_css.md (100%)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/react/main_tsx.md (100%)
 rename static/usage/v7/datetime/{theming => styling/global-theming}/vue.md (100%)
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/angular/example_component_css.md
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/demo.html
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/index.md
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/javascript.md
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/react/main_css.md
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/vue.md

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 34ac7575b5c..c166841c37a 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -36,7 +36,8 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted
 
 import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
 
-import Theming from '@site/static/usage/v7/datetime/theming/index.md';
+import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md';
+import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md';
 
 <head>
   <title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
@@ -310,13 +311,21 @@ A callback is better when the highlighted dates are recurring, such as birthdays
 
 <HighlightedDatesCallback />
 
-## Theming
+## Styling
+
+### Global 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 />
+<GlobalTheming />
+
+### Wheel Pickers
+
+The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes.
+
+<WheelStyling />
 
 ## Time Zones
 
diff --git a/static/usage/v7/datetime/theming/angular/example_component_html.md b/static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/theming/angular/example_component_html.md
rename to static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
similarity index 100%
rename from static/usage/v7/datetime/theming/angular/global_css.md
rename to static/usage/v7/datetime/styling/global-theming/angular/global_css.md
diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/styling/global-theming/demo.html
similarity index 95%
rename from static/usage/v7/datetime/theming/demo.html
rename to static/usage/v7/datetime/styling/global-theming/demo.html
index f2e502cfe56..7ea2d621df3 100644
--- a/static/usage/v7/datetime/theming/demo.html
+++ b/static/usage/v7/datetime/styling/global-theming/demo.html
@@ -4,8 +4,8 @@
     <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>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
     <style>
diff --git a/static/usage/v7/datetime/theming/index.md b/static/usage/v7/datetime/styling/global-theming/index.md
similarity index 92%
rename from static/usage/v7/datetime/theming/index.md
rename to static/usage/v7/datetime/styling/global-theming/index.md
index f45d3c0e7c6..f8824304f07 100644
--- a/static/usage/v7/datetime/theming/index.md
+++ b/static/usage/v7/datetime/styling/global-theming/index.md
@@ -29,5 +29,5 @@ import angular_global_css from './angular/global_css.md';
       },
     },
   }}
-  src="usage/v7/datetime/theming/demo.html"
+  src="usage/v7/datetime/styling/global-theming/demo.html"
 />
diff --git a/static/usage/v7/datetime/theming/javascript.md b/static/usage/v7/datetime/styling/global-theming/javascript.md
similarity index 100%
rename from static/usage/v7/datetime/theming/javascript.md
rename to static/usage/v7/datetime/styling/global-theming/javascript.md
diff --git a/static/usage/v7/datetime/theming/react/main_css.md b/static/usage/v7/datetime/styling/global-theming/react/main_css.md
similarity index 100%
rename from static/usage/v7/datetime/theming/react/main_css.md
rename to static/usage/v7/datetime/styling/global-theming/react/main_css.md
diff --git a/static/usage/v7/datetime/theming/react/main_tsx.md b/static/usage/v7/datetime/styling/global-theming/react/main_tsx.md
similarity index 100%
rename from static/usage/v7/datetime/theming/react/main_tsx.md
rename to static/usage/v7/datetime/styling/global-theming/react/main_tsx.md
diff --git a/static/usage/v7/datetime/theming/vue.md b/static/usage/v7/datetime/styling/global-theming/vue.md
similarity index 100%
rename from static/usage/v7/datetime/theming/vue.md
rename to static/usage/v7/datetime/styling/global-theming/vue.md
diff --git a/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_css.md b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_css.md
new file mode 100644
index 00000000000..936a6699b06
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-datetime {
+  --background: rgb(245, 235, 247);
+  --background-rgb: 245, 235, 247;
+  --wheel-highlight-background: rgb(218, 216, 255);
+  --wheel-fade-background-rgb: 245, 235, 247;
+}
+
+ion-datetime::part(wheel-item) {
+  color: rgb(255, 66, 97);
+}
+
+ion-datetime::part(wheel-item active) {
+  color: rgb(128, 30, 171);
+}
+```
diff --git a/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_html.md b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_html.md
new file mode 100644
index 00000000000..83c19decb31
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [preferWheel]="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/styling/wheel-styling/demo.html b/static/usage/v7/datetime/styling/wheel-styling/demo.html
new file mode 100644
index 00000000000..4f0f11238aa
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-datetime {
+        --background: rgb(245, 235, 247);
+        --background-rgb: 245, 235, 247;
+        --wheel-highlight-background: rgb(218, 216, 255);
+        --wheel-fade-background-rgb: 245, 235, 247;
+      }
+
+      ion-datetime::part(wheel-item) {
+        color: rgb(255, 66, 97);
+      }
+
+      ion-datetime::part(wheel-item active) {
+        color: rgb(128, 30, 171);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date" prefer-wheel="true"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/styling/wheel-styling/index.md b/static/usage/v7/datetime/styling/wheel-styling/index.md
new file mode 100644
index 00000000000..4cc1808f81b
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-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_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/datetime/styling/wheel-styling/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/datetime/styling/wheel-styling/javascript.md b/static/usage/v7/datetime/styling/wheel-styling/javascript.md
new file mode 100644
index 00000000000..3e0df9e425d
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/javascript.md
@@ -0,0 +1,20 @@
+```html
+<style>
+  ion-datetime {
+    --background: rgb(245, 235, 247);
+    --background-rgb: 245, 235, 247;
+    --wheel-highlight-background: rgb(218, 216, 255);
+    --wheel-fade-background-rgb: 245, 235, 247;
+  }
+
+  ion-datetime::part(wheel-item) {
+    color: rgb(255, 66, 97);
+  }
+
+  ion-datetime::part(wheel-item active) {
+    color: rgb(128, 30, 171);
+  }
+</style>
+
+<ion-datetime presentation="date" prefer-wheel="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/styling/wheel-styling/react/main_css.md b/static/usage/v7/datetime/styling/wheel-styling/react/main_css.md
new file mode 100644
index 00000000000..936a6699b06
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-datetime {
+  --background: rgb(245, 235, 247);
+  --background-rgb: 245, 235, 247;
+  --wheel-highlight-background: rgb(218, 216, 255);
+  --wheel-fade-background-rgb: 245, 235, 247;
+}
+
+ion-datetime::part(wheel-item) {
+  color: rgb(255, 66, 97);
+}
+
+ion-datetime::part(wheel-item active) {
+  color: rgb(128, 30, 171);
+}
+```
diff --git a/static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md b/static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md
new file mode 100644
index 00000000000..6e01ae735c3
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/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 presentation="date" preferWheel={true}></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/styling/wheel-styling/vue.md b/static/usage/v7/datetime/styling/wheel-styling/vue.md
new file mode 100644
index 00000000000..a90c729af63
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-datetime presentation="date" :prefer-wheel="true"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+
+<style scoped>
+  ion-datetime {
+    --background: rgb(245, 235, 247);
+    --background-rgb: 245, 235, 247;
+    --wheel-highlight-background: rgb(218, 216, 255);
+    --wheel-fade-background-rgb: 245, 235, 247;
+  }
+
+  ion-datetime::part(wheel-item) {
+    color: rgb(255, 66, 97);
+  }
+
+  ion-datetime::part(wheel-item active) {
+    color: rgb(128, 30, 171);
+  }
+</style>
+```

From b6dd83ac27315fe26669f6a5afadc5926d731c46 Mon Sep 17 00:00:00 2001
From: Chandra Nandan <chandranandan.chandrakar@gmail.com>
Date: Wed, 7 Jun 2023 00:38:13 +0530
Subject: [PATCH 389/469] docs(angular):updated component photo service (#2986)
 (#2987)

* docs(angular):updated component photo service (#2986)

* docs(angular):changed component photo service (#2986)

changed photo.path --> photo.path!

* remove extra newline

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
---
 docs/angular/your-first-app/5-adding-mobile.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md
index 844b87d723d..dc2ababc706 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -38,7 +38,7 @@ private async readAsBase64(photo: Photo) {
   if (this.platform.is('hybrid')) {
     // Read the file into base64 format
     const file = await Filesystem.readFile({
-      path: photo.path
+      path: photo.path!
     });
 
     return file.data;

From b52a8c312ef112cb7bd88acc86b2ad79f4165131 Mon Sep 17 00:00:00 2001
From: Sanjeed <40694326+sanjeed5@users.noreply.github.com>
Date: Wed, 7 Jun 2023 19:42:02 +0530
Subject: [PATCH 390/469] docs(android): clarify steps to set up native project
 and run with Capacitor (#1889)

Co-authored-by: Shawn Taylor <shawn@ionic.io>
---
 docs/developing/android.md | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/docs/developing/android.md b/docs/developing/android.md
index 825e76de6df..d734f985a52 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -125,7 +125,13 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th
 
 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.**
+1. **Perform an Ionic build, if you haven't already.**
+
+   ```
+   $ ionic build
+   ```
+
+2. **Generate the native project, if it does not already exist.**
 
    For Capacitor, run the following:
 
@@ -139,7 +145,7 @@ Before apps can be deployed to Android simulators and devices, the native projec
    $ ionic cordova prepare android
    ```
 
-2. **Set the [Package ID](../reference/glossary.md#package-id).**
+3. **Set the [Package ID](../reference/glossary.md#package-id).**
 
    For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
 
@@ -157,9 +163,17 @@ Capacitor uses Android Studio to build and run apps to simulators and devices.
    $ ionic capacitor copy android
    ```
 
-2. **In Android Studio, click the Run button and then select the target simulator or device.**
+2. **Run the app on a simulator or device.**
+
+   You can open the Android Studio Project using:
+
+   ```shell
+   $ ionic capacitor open android
+   ```
+
+   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)
+   ![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png)
 
 ### Live reload
 

From cfceccd5187c57ff924313727cc4d91ac13eca47 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 9 Jun 2023 12:13:46 -0400
Subject: [PATCH 391/469] docs(security): content security policies (#2975)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/techniques/security.md | 50 +++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/docs/techniques/security.md b/docs/techniques/security.md
index b145665cfe2..2bc7a648ac9 100644
--- a/docs/techniques/security.md
+++ b/docs/techniques/security.md
@@ -160,3 +160,53 @@ export const ToastExample: React.FC = () => {
 </TabItem>
 </Tabs>
 ````
+
+## Content Security Policies (CSP)
+
+A [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is a security mechanism that helps protect web applications against certain types of attacks, such as cross-site scripting (XSS) and data injection. It is implemented through an HTTP header that instructs the browser on which sources of content, such as scripts, stylesheets, and images, are allowed to be loaded and executed on a web page.
+
+The main purpose of a CSP is to mitigate the risks associated with code injection attacks. By defining a policy, web developers can specify from which domains or sources the browser should allow the loading and execution of various types of content. This effectively limits the potential damage that can be caused by malicious scripts or unauthorized content.
+
+### Enabling CSPs
+
+Developers can assign a CSP to their application by setting a meta tag with the policy details and the expected nonce value on script and style tags.
+
+```html
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self'; script-src 'self' 'nonce-randomNonceGoesHere'; style-src 'self' 'nonce-randomNonceGoesHere';"
+/>
+```
+
+### Ionic and CSP
+
+Ionic Framework provides a function to help developers set the nonce value used when constructing the web component stylesheets. This function should be called before any Ionic components are loaded. This is required to pass the nonce value to the web components so that they can be used in a CSP environment.
+
+```ts
+import { setNonce } from '@ionic/core/loader';
+
+setNonce('randomNonceGoesHere');
+```
+
+:::tip
+
+In Angular this can be called in the `main.ts` file, before the application is bootstrapped.
+
+:::
+
+For more information on how to use CSPs with Stencil web components, see the [Stencil documentation](https://stenciljs.com/docs/csp-nonce).
+
+### Angular
+
+Starting in Angular 16, Angular provides two options for setting the nonce value.
+
+1. Set the `ngCspNonce` attribute on the root application element as `<app ngCspNonce="randomNonceGoesHere"></app>`. Use this approach if you have access to server-side templating that can add the nonce both to the header and the `index.html` when constructing the response.
+2. Provide the nonce using the [`CSP_NONCE`](https://angular.io/api/core/CSP_NONCE) injection token. Use this approach if you have access to the nonce at runtime and you want to be able to cache the `index.html`.
+
+:::tip
+
+If providing the `CSP_NONCE` injection token, set the provider in your `AppModule` for module projects or within the `bootstrapApplication` for standalone projects.
+
+:::
+
+For more information on how to use CSPs with Angular, see the [Angular documentation](https://angular.io/guide/security#content-security-policy).

From 5109e2ae2f1514c8ac9f07914d9809b9b5adb418 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 9 Jun 2023 12:33:53 -0400
Subject: [PATCH 392/469] chore(fundamentals): clarify events (#2992)

---
 docs/core-concepts/fundamentals.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.md
index 97a09499934..a409e57bc0b 100644
--- a/docs/core-concepts/fundamentals.md
+++ b/docs/core-concepts/fundamentals.md
@@ -45,3 +45,9 @@ Projects such as <a href="https://capacitorjs.com/" target="_blank">Capacitor</a
 ## 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).
+
+## Events
+
+Many Ionic components use [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to inform developers of important state changes in the components. For example, an `ion-datetime` component will emit `ionChange` whenever the selected date has changed.
+
+Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.md#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.

From 13e6bf9e64ca8264fbe298ae2a38d87cfa666633 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 9 Jun 2023 12:34:17 -0400
Subject: [PATCH 393/469] docs(app-store): add release flag (#2990)

Co-authored-by: zhangshengjie <zhangshengjie@users.noreply.github.com>
---
 docs/deployment/app-store.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.md
index f6b2ffcf1c9..63958ba6920 100644
--- a/docs/deployment/app-store.md
+++ b/docs/deployment/app-store.md
@@ -40,6 +40,10 @@ This will generate the minified code for the web portion of an app and copy it o
 
 From here, open the `.xcworkspace` file in `./platforms/ios/` to start Xcode.
 
+:::tip
+You can also have a release build generated automatically by using the `--release` flag.
+:::
+
 ## 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.

From bc061231228ed5ee8ef4a2129a9e05d76794270c Mon Sep 17 00:00:00 2001
From: Kevin Cunningham <kevin@kevincunningham.co.uk>
Date: Mon, 12 Jun 2023 21:34:35 +0100
Subject: [PATCH 394/469] docs(vue): fix lifecycle table formatting (#2967)

Adds a new line before the table to allow the markdown to render properly
---
 docs/vue/lifecycle.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index d18b3bc5653..1c144b53d61 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -9,6 +9,7 @@ This guide discusses how to use the Ionic Framework Lifecycle events in an Ionic
 ## 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. |

From ec01f803ed97f75344435c2b6656b1001275ec8e Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 14 Jun 2023 08:02:34 -0700
Subject: [PATCH 395/469] docs(infinite-scroll): use the correct custom event
 (#2995)

---
 static/usage/v6/infinite-scroll/basic/vue.md                  | 4 ++--
 .../v6/infinite-scroll/custom-infinite-scroll-content/vue.md  | 2 +-
 .../usage/v6/infinite-scroll/infinite-scroll-content/vue.md   | 2 +-
 static/usage/v7/infinite-scroll/basic/vue.md                  | 4 ++--
 .../v7/infinite-scroll/custom-infinite-scroll-content/vue.md  | 2 +-
 .../usage/v7/infinite-scroll/infinite-scroll-content/vue.md   | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/static/usage/v6/infinite-scroll/basic/vue.md b/static/usage/v6/infinite-scroll/basic/vue.md
index 856c421b23b..dc7a7c45f46 100644
--- a/static/usage/v6/infinite-scroll/basic/vue.md
+++ b/static/usage/v6/infinite-scroll/basic/vue.md
@@ -25,7 +25,7 @@
     IonAvatar,
     IonImg,
     IonLabel,
-    IonInfiniteCustomEvent,
+    InfiniteScrollCustomEvent,
   } from '@ionic/vue';
   import { defineComponent, reactive } from 'vue';
 
@@ -51,7 +51,7 @@
         }
       };
 
-      const ionInfinite = (ev: IonInfiniteCustomEvent) => {
+      const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
         generateItems();
         setTimeout(() => ev.target.complete(), 500);
       };
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md
index a86fa6ed062..85954295280 100644
--- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -91,7 +91,7 @@
     IonAvatar,
     IonImg,
     IonLabel,
-    IonInfiniteCustomEvent,
+    InfiniteScrollCustomEvent,
   } from '@ionic/vue';
   import { defineComponent, reactive } from 'vue';
 
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md
index 9b7d22436ee..f00b47e1fb8 100644
--- a/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md
@@ -28,7 +28,7 @@
     IonAvatar,
     IonImg,
     IonLabel,
-    IonInfiniteCustomEvent,
+    InfiniteScrollCustomEvent,
   } from '@ionic/vue';
   import { defineComponent, reactive } from 'vue';
 
diff --git a/static/usage/v7/infinite-scroll/basic/vue.md b/static/usage/v7/infinite-scroll/basic/vue.md
index 856c421b23b..dc7a7c45f46 100644
--- a/static/usage/v7/infinite-scroll/basic/vue.md
+++ b/static/usage/v7/infinite-scroll/basic/vue.md
@@ -25,7 +25,7 @@
     IonAvatar,
     IonImg,
     IonLabel,
-    IonInfiniteCustomEvent,
+    InfiniteScrollCustomEvent,
   } from '@ionic/vue';
   import { defineComponent, reactive } from 'vue';
 
@@ -51,7 +51,7 @@
         }
       };
 
-      const ionInfinite = (ev: IonInfiniteCustomEvent) => {
+      const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
         generateItems();
         setTimeout(() => ev.target.complete(), 500);
       };
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
index a86fa6ed062..85954295280 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -91,7 +91,7 @@
     IonAvatar,
     IonImg,
     IonLabel,
-    IonInfiniteCustomEvent,
+    InfiniteScrollCustomEvent,
   } from '@ionic/vue';
   import { defineComponent, reactive } from 'vue';
 
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
index 9b7d22436ee..f00b47e1fb8 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
@@ -28,7 +28,7 @@
     IonAvatar,
     IonImg,
     IonLabel,
-    IonInfiniteCustomEvent,
+    InfiniteScrollCustomEvent,
   } from '@ionic/vue';
   import { defineComponent, reactive } from 'vue';
 

From a0f9248167dc6125641b72dc0f519fb1d74657cb Mon Sep 17 00:00:00 2001
From: Bobby Galli <bobbyg603@gmail.com>
Date: Thu, 15 Jun 2023 14:48:59 -0400
Subject: [PATCH 396/469] docs(angular): fix indentation in 5-adding-mobile.md
 (#2855)

* docs: fix indentation in 5-adding-mobile.md

* Also change in v7 docs

---------

Co-authored-by: Shawn Taylor <shawn@ionic.io>
---
 .../angular/your-first-app/5-adding-mobile.md | 54 +++++++++----------
 .../angular/your-first-app/5-adding-mobile.md | 54 +++++++++----------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md
index dc2ababc706..3a3ebd92f23 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -57,35 +57,35 @@ Next, update the `savePicture()` method. When running on mobile, set `filepath`
 
 ```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
-    });
+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
-      };
-    }
+  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:
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
index 481d4c16ca9..3c6190e3799 100644
--- 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
@@ -57,35 +57,35 @@ Next, update the `savePicture()` method. When running on mobile, set `filepath`
 
 ```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
-    });
+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
-      };
-    }
+  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:

From 7540f820111d31a2f2e1f3033b33da91f7a5112b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 20 Jun 2023 09:22:10 -0400
Subject: [PATCH 397/469] docs(input): add label slot and no visible label
 demos (#2997)

---
 docs/api/input.md                             | 28 ++++++++++++++++++-
 docs/api/range.md                             |  7 +++--
 docs/api/select.md                            |  6 ++--
 static/usage/v7/input/label-slot/angular.md   |  9 ++++++
 static/usage/v7/input/label-slot/demo.html    | 28 +++++++++++++++++++
 static/usage/v7/input/label-slot/index.md     | 12 ++++++++
 .../usage/v7/input/label-slot/javascript.md   |  9 ++++++
 static/usage/v7/input/label-slot/react.md     | 17 +++++++++++
 static/usage/v7/input/label-slot/vue.md       | 20 +++++++++++++
 .../v7/input/no-visible-label/angular.md      |  7 +++++
 .../usage/v7/input/no-visible-label/demo.html | 26 +++++++++++++++++
 .../usage/v7/input/no-visible-label/index.md  | 12 ++++++++
 .../v7/input/no-visible-label/javascript.md   |  7 +++++
 .../usage/v7/input/no-visible-label/react.md  | 15 ++++++++++
 static/usage/v7/input/no-visible-label/vue.md | 18 ++++++++++++
 15 files changed, 215 insertions(+), 6 deletions(-)
 create mode 100644 static/usage/v7/input/label-slot/angular.md
 create mode 100644 static/usage/v7/input/label-slot/demo.html
 create mode 100644 static/usage/v7/input/label-slot/index.md
 create mode 100644 static/usage/v7/input/label-slot/javascript.md
 create mode 100644 static/usage/v7/input/label-slot/react.md
 create mode 100644 static/usage/v7/input/label-slot/vue.md
 create mode 100644 static/usage/v7/input/no-visible-label/angular.md
 create mode 100644 static/usage/v7/input/no-visible-label/demo.html
 create mode 100644 static/usage/v7/input/no-visible-label/index.md
 create mode 100644 static/usage/v7/input/no-visible-label/javascript.md
 create mode 100644 static/usage/v7/input/no-visible-label/react.md
 create mode 100644 static/usage/v7/input/no-visible-label/vue.md

diff --git a/docs/api/input.md b/docs/api/input.md
index 02c34e0d726..6bdecfc9568 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -36,8 +36,15 @@ import Types from '@site/static/usage/v7/input/types/index.md';
 
 <Types />
 
+## Labels
 
-## Label Placement
+Labels should be used to describe the input. They can be used visually, and they will also be read out by screen readers when the user is focused on the input. This makes it easy for the user to understand the intent of the input. Input has several ways to assign a label:
+
+- `label` property: used for plaintext labels
+- `label` slot: used for custom HTML labels (experimental)
+- `aria-label`: used to provide a label for screen readers but adds no visible label
+
+### Label Placement
 
 Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
@@ -45,6 +52,25 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md
 
 <LabelPlacement />
 
+### Label Slot (experimental)
+
+While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+
+Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+
+import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md';
+
+<LabelSlot />
+
+### No Visible Label
+
+If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers.
+
+import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md';
+
+<NoVisibleLabel />
+
+
 
 ## Clear Options
 
diff --git a/docs/api/range.md b/docs/api/range.md
index be52a7b1fea..3ff4f6adb35 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -24,10 +24,11 @@ By default the Range slider has a minimum value of `0` and a maximum value of `1
 
 ## Labels
 
-Range has several options for supplying a label for the component:
+Labels should be used to describe the range. They can be used visually, and they will also be read out by screen readers when the user is focused on the range. This makes it easy for the user to understand the intent of the range. Range has several ways to assign a label:
+
 - `label` property: used for plaintext labels
 - `label` slot: used for custom HTML labels
-- `aria-label`: used for ranges with no visible label
+- `aria-label`: used to provide a label for screen readers but adds no visible label
 
 ### Label Placement
 
@@ -47,7 +48,7 @@ import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md
 
 ### No Visible Label
 
-If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers.
+If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers.
 
 import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md';
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 2636e7d04bb..d34b353cf1b 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -26,11 +26,13 @@ If `value` is set on the `<ion-select>`, the selected option will be chosen base
 
 ## Labels
 
+Labels should be used to describe the select. They can be used visually, and they will also be read out by screen readers when the user is focused on the select. This makes it easy for the user to understand the intent of the select. Select has several ways to assign a label:
+
 Select has several options for supplying a label for the component:
 
 - `label` property: used for plaintext labels
 - `label` slot: used for custom HTML labels
-- `aria-label`: used for selects with no visible label
+- `aria-label`: used to provide a label for screen readers but adds no visible label
 
 ### Label Placement
 
@@ -50,7 +52,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
 
 ### No Visible Label
 
-If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers.
+If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers.
 
 import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';
 
diff --git a/static/usage/v7/input/label-slot/angular.md b/static/usage/v7/input/label-slot/angular.md
new file mode 100644
index 00000000000..21bdbf74b64
--- /dev/null
+++ b/static/usage/v7/input/label-slot/angular.md
@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input labelPlacement="floating" value="hi@ionic.io">
+      <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/label-slot/demo.html b/static/usage/v7/input/label-slot/demo.html
new file mode 100644
index 00000000000..234aa3cbec3
--- /dev/null
+++ b/static/usage/v7/input/label-slot/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>input</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input label-placement="floating" value="hi@ionic.io">
+                <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+              </ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/input/label-slot/index.md b/static/usage/v7/input/label-slot/index.md
new file mode 100644
index 00000000000..24328d5cd70
--- /dev/null
+++ b/static/usage/v7/input/label-slot/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/input/label-slot/demo.html"
+/>
diff --git a/static/usage/v7/input/label-slot/javascript.md b/static/usage/v7/input/label-slot/javascript.md
new file mode 100644
index 00000000000..494d85ba6cb
--- /dev/null
+++ b/static/usage/v7/input/label-slot/javascript.md
@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input label-placement="floating" value="hi@ionic.io">
+      <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/label-slot/react.md b/static/usage/v7/input/label-slot/react.md
new file mode 100644
index 00000000000..d4bc7902935
--- /dev/null
+++ b/static/usage/v7/input/label-slot/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList, IonText } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput labelPlacement="floating" value="hi@ionic.io">
+          <div slot="label">Email <IonText color="danger">(Required)</IonText></div>
+        </IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/label-slot/vue.md b/static/usage/v7/input/label-slot/vue.md
new file mode 100644
index 00000000000..4b3fb3daeb8
--- /dev/null
+++ b/static/usage/v7/input/label-slot/vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input label-placement="floating" value="hi@ionic.io">
+        <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+      </ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonList, IonText },
+  });
+</script>
+```
diff --git a/static/usage/v7/input/no-visible-label/angular.md b/static/usage/v7/input/no-visible-label/angular.md
new file mode 100644
index 00000000000..32616a6a196
--- /dev/null
+++ b/static/usage/v7/input/no-visible-label/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input aria-label="Email" value="hi@ionic.io"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/no-visible-label/demo.html b/static/usage/v7/input/no-visible-label/demo.html
new file mode 100644
index 00000000000..b8155e10e6f
--- /dev/null
+++ b/static/usage/v7/input/no-visible-label/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>input</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input aria-label="Email" value="hi@ionic.io"></ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/input/no-visible-label/index.md b/static/usage/v7/input/no-visible-label/index.md
new file mode 100644
index 00000000000..de0fe522748
--- /dev/null
+++ b/static/usage/v7/input/no-visible-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
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/input/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v7/input/no-visible-label/javascript.md b/static/usage/v7/input/no-visible-label/javascript.md
new file mode 100644
index 00000000000..32616a6a196
--- /dev/null
+++ b/static/usage/v7/input/no-visible-label/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input aria-label="Email" value="hi@ionic.io"></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/no-visible-label/react.md b/static/usage/v7/input/no-visible-label/react.md
new file mode 100644
index 00000000000..38842ecb0b6
--- /dev/null
+++ b/static/usage/v7/input/no-visible-label/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput aria-label="Email" value="hi@ionic.io"></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/no-visible-label/vue.md b/static/usage/v7/input/no-visible-label/vue.md
new file mode 100644
index 00000000000..cc181047943
--- /dev/null
+++ b/static/usage/v7/input/no-visible-label/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input aria-label="Email" value="hi@ionic.io"></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonList },
+  });
+</script>
+```

From d9ca1bf18cef696a52131fe46972584b15bbb336 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 20 Jun 2023 12:18:46 -0500
Subject: [PATCH 398/469] docs(select): add playgrounds for toggle icon
 customization (#2996)

* add playgrounds

* lint

* Update static/usage/v7/select/customization/custom-toggle-icons/index.md

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* Update static/usage/v7/select/customization/icon-flip-behavior/index.md

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* fix icon usage for React and Vue

* rename toggleIconWhenOpen to expandedIcon

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 docs/api/select.md                            | 18 ++++++
 .../custom-toggle-icons/angular.md            | 17 +++++
 .../custom-toggle-icons/demo.html             | 36 +++++++++++
 .../custom-toggle-icons/index.md              | 13 ++++
 .../custom-toggle-icons/javascript.md         | 17 +++++
 .../custom-toggle-icons/react.md              | 26 ++++++++
 .../customization/custom-toggle-icons/vue.md  | 32 ++++++++++
 .../angular/example_component_css.md          | 13 ++++
 .../angular/example_component_html.md         | 30 +++++++++
 .../angular/example_component_ts.md           | 10 +++
 .../icon-flip-behavior/demo.html              | 63 +++++++++++++++++++
 .../customization/icon-flip-behavior/index.md | 34 ++++++++++
 .../icon-flip-behavior/javascript.md          | 44 +++++++++++++
 .../icon-flip-behavior/react/main_css.md      | 13 ++++
 .../icon-flip-behavior/react/main_tsx.md      | 41 ++++++++++++
 .../customization/icon-flip-behavior/vue.md   | 59 +++++++++++++++++
 16 files changed, 466 insertions(+)
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/angular.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/demo.html
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/index.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/javascript.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/react.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/vue.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/demo.html
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/index.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/javascript.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/vue.md

diff --git a/docs/api/select.md b/docs/api/select.md
index d34b353cf1b..b1edb7348bd 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -182,6 +182,24 @@ Customizing the interface dialog should be done by following the Customization s
 
 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.
 
+### Custom Toggle Icons
+
+The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `expandedIcon` properties.
+
+import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md';
+
+<CustomToggleIconsExample />
+
+### Icon Flip Behavior
+
+By default, when the select is open, the toggle icon will automatically rotate on `md` mode and remain static on `ios` mode. This behavior can be customized using CSS.
+
+The below example also uses a [custom `toggleIcon`](#custom-toggle-icons) to better demonstrate the flip behavior on `ios`, since the default icon is vertically symmetrical.
+
+import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md';
+
+<IconFlipBehaviorExample />
+
 ## Typeahead Component
 
 Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
new file mode 100644
index 00000000000..429435daa6a
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      interface="popover"
+      toggleIcon="add"
+      expandedIcon="remove"
+      aria-label="fruit"
+      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/customization/custom-toggle-icons/demo.html b/static/usage/v7/select/customization/custom-toggle-icons/demo.html
new file mode 100644
index 00000000000..1309854f3d5
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/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>Select - Custom Toggle Icons</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select
+                interface="popover"
+                toggle-icon="add"
+                expanded-icon="remove"
+                aria-label="fruit"
+                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>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md
new file mode 100644
index 00000000000..0617a54da77
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-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"
+  size="400px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/customization/custom-toggle-icons/demo.html"
+/>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/javascript.md b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
new file mode 100644
index 00000000000..fe874eaac26
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      interface="popover"
+      toggle-icon="add"
+      expanded-icon="remove"
+      aria-label="fruit"
+      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/customization/custom-toggle-icons/react.md b/static/usage/v7/select/customization/custom-toggle-icons/react.md
new file mode 100644
index 00000000000..c7358752605
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+import { add, remove } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect
+          interface="popover"
+          toggleIcon={add}
+          expandedIcon={remove}
+          aria-label="fruit"
+          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/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
new file mode 100644
index 00000000000..4d748e1c2d9
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select
+        interface="popover"
+        :toggle-icon="add"
+        :expanded-icon="remove"
+        aria-label="fruit"
+        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 { add, remove } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption },
+    setup() {
+      return { add, remove };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
new file mode 100644
index 00000000000..b031a2d4851
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-select.always-flip::part(icon) {
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+ion-select.always-flip.select-expanded::part(icon) {
+  transform: rotate(180deg);
+}
+
+ion-select.never-flip::part(icon) {
+  transform: none;
+}
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
new file mode 100644
index 00000000000..5f40703296c
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      class="always-flip"
+      toggleIcon="caret-down-sharp"
+      interface="popover"
+      label="Icon flips on both modes"
+      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-item>
+    <ion-select
+      class="never-flip"
+      toggleIcon="caret-down-sharp"
+      interface="popover"
+      label="Icon never flips"
+      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/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/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/icon-flip-behavior/demo.html b/static/usage/v7/select/customization/icon-flip-behavior/demo.html
new file mode 100644
index 00000000000..f3e6738fe3e
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/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>Select - Icon Flip Behavior</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-select.always-flip::part(icon) {
+        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      ion-select.always-flip.select-expanded::part(icon) {
+        transform: rotate(180deg);
+      }
+
+      ion-select.never-flip::part(icon) {
+        transform: none;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select
+                class="always-flip"
+                toggle-icon="caret-down-sharp"
+                interface="popover"
+                label="Icon flips on both modes"
+                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-item>
+              <ion-select
+                class="never-flip"
+                toggle-icon="caret-down-sharp"
+                interface="popover"
+                label="Icon never flips"
+                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>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/index.md b/static/usage/v7/select/customization/icon-flip-behavior/index.md
new file mode 100644
index 00000000000..185f778569d
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/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/select/customization/icon-flip-behavior/demo.html"
+/>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/javascript.md b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md
new file mode 100644
index 00000000000..de35559165f
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md
@@ -0,0 +1,44 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      class="always-flip"
+      toggle-icon="caret-down-sharp"
+      interface="popover"
+      label="Icon flips on both modes"
+      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-item>
+    <ion-select
+      class="never-flip"
+      toggle-icon="caret-down-sharp"
+      interface="popover"
+      label="Icon never flips"
+      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>
+
+<style>
+  ion-select.always-flip::part(icon) {
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  ion-select.always-flip.select-expanded::part(icon) {
+    transform: rotate(180deg);
+  }
+
+  ion-select.never-flip::part(icon) {
+    transform: none;
+  }
+</style>
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
new file mode 100644
index 00000000000..b031a2d4851
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+ion-select.always-flip::part(icon) {
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+ion-select.always-flip.select-expanded::part(icon) {
+  transform: rotate(180deg);
+}
+
+ion-select.never-flip::part(icon) {
+  transform: none;
+}
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
new file mode 100644
index 00000000000..e7b146efcee
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+import { caretDownSharp } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect
+          className="always-flip"
+          toggleIcon={caretDownSharp}
+          interface="popover"
+          label="Icon flips on both modes"
+          placeholder="Select fruit"
+        >
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+      <IonItem>
+        <IonSelect
+          className="never-flip"
+          toggleIcon={caretDownSharp}
+          interface="popover"
+          label="Icon never flips"
+          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/customization/icon-flip-behavior/vue.md b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
new file mode 100644
index 00000000000..f7d38a6ae7b
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
@@ -0,0 +1,59 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select
+        class="always-flip"
+        :toggle-icon="caretDownSharp"
+        interface="popover"
+        label="Icon flips on both modes"
+        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-item>
+      <ion-select
+        class="never-flip"
+        :toggle-icon="caretDownSharp"
+        interface="popover"
+        label="Icon never flips"
+        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 { caretDownSharp } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption },
+    setup() {
+      return { caretDownSharp };
+    },
+  });
+</script>
+
+<style>
+  ion-select.always-flip::part(icon) {
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  ion-select.always-flip.select-expanded::part(icon) {
+    transform: rotate(180deg);
+  }
+
+  ion-select.never-flip::part(icon) {
+    transform: none;
+  }
+</style>
+```

From fa7e948d6dec3d2cf66c91771b457f10decd7008 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 20 Jun 2023 13:55:05 -0600
Subject: [PATCH 399/469] docs(input): input masking examples (#2993)

---
 docs/api/input.md                             | 20 +++++
 .../global/Playground/stackblitz.utils.ts     | 22 +++++-
 .../v7/input/mask/angular/app_module_ts.md    | 19 +++++
 .../mask/angular/example_component_html.md    | 20 +++++
 .../mask/angular/example_component_ts.md      | 31 ++++++++
 static/usage/v7/input/mask/demo.html          | 73 +++++++++++++++++++
 static/usage/v7/input/mask/index.md           | 58 +++++++++++++++
 .../v7/input/mask/javascript/index_html.md    | 58 +++++++++++++++
 .../v7/input/mask/javascript/index_ts.md      | 28 +++++++
 static/usage/v7/input/mask/react.md           | 55 ++++++++++++++
 static/usage/v7/input/mask/vue.md             | 49 +++++++++++++
 11 files changed, 431 insertions(+), 2 deletions(-)
 create mode 100644 static/usage/v7/input/mask/angular/app_module_ts.md
 create mode 100644 static/usage/v7/input/mask/angular/example_component_html.md
 create mode 100644 static/usage/v7/input/mask/angular/example_component_ts.md
 create mode 100644 static/usage/v7/input/mask/demo.html
 create mode 100644 static/usage/v7/input/mask/index.md
 create mode 100644 static/usage/v7/input/mask/javascript/index_html.md
 create mode 100644 static/usage/v7/input/mask/javascript/index_ts.md
 create mode 100644 static/usage/v7/input/mask/react.md
 create mode 100644 static/usage/v7/input/mask/vue.md

diff --git a/docs/api/input.md b/docs/api/input.md
index 6bdecfc9568..55f469ff798 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -120,6 +120,26 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 <FilteringData />
 
+## Input Masking
+
+Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://tinkoff.github.io/maskito/getting-started/what-is-maskito) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more.
+
+To get started with Maskito, install the library:
+
+```bash
+npm install @maskito/core @maskito/{angular,react,vue}
+```
+
+import Masking from '@site/static/usage/v7/input/mask/index.md';
+
+<Masking />
+
+:::note
+
+Please submit bug reports with Maskito to the [Maskito Github repository](https://github.com/Tinkoff/maskito/issues). For technical support, please use the [Ionic Forum](https://forum.ionicframework.com/) or [Ionic Discord](http://chat.ionicframework.com/).
+
+:::
+
 ## Theming
 
 ### Colors
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index ad2947ba15b..f379a2d472c 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -183,6 +183,15 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     options.version
   );
 
+  const package_json = JSON.parse(defaultFiles[4]);
+
+  if (options?.dependencies) {
+    package_json.dependencies = {
+      ...package_json.dependencies,
+      ...options.dependencies,
+    };
+  }
+
   const appTsx = 'src/App.tsx';
   const files = {
     'public/index.html': defaultFiles[6],
@@ -191,7 +200,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
     'src/main.tsx': code,
     'src/theme/variables.css': defaultFiles[2],
     'tsconfig.json': defaultFiles[3],
-    'package.json': defaultFiles[4],
+    'package.json': JSON.stringify(package_json, null, 2),
     'package-lock.json': defaultFiles[5],
     ...options?.files,
     ...options?.dependencies,
@@ -227,6 +236,15 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     options.version
   );
 
+  const package_json = JSON.parse(defaultFiles[0]);
+
+  if (options?.dependencies) {
+    package_json.dependencies = {
+      ...package_json.dependencies,
+      ...options.dependencies,
+    };
+  }
+
   const mainTs = 'src/main.ts';
   const files = {
     'src/App.vue': defaultFiles[6],
@@ -236,7 +254,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
     'src/theme/variables.css': defaultFiles[3],
     'index.html': defaultFiles[2],
     'vite.config.ts': defaultFiles[4],
-    'package.json': defaultFiles[0],
+    'package.json': JSON.stringify(package_json, null, 2),
     'package-lock.json': defaultFiles[1],
     'tsconfig.json': defaultFiles[7],
     'tsconfig.node.json': defaultFiles[8],
diff --git a/static/usage/v7/input/mask/angular/app_module_ts.md b/static/usage/v7/input/mask/angular/app_module_ts.md
new file mode 100644
index 00000000000..653793d4262
--- /dev/null
+++ b/static/usage/v7/input/mask/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 { MaskitoModule } from '@maskito/angular';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, MaskitoModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, ExampleComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/input/mask/angular/example_component_html.md b/static/usage/v7/input/mask/angular/example_component_html.md
new file mode 100644
index 00000000000..f6d27b19558
--- /dev/null
+++ b/static/usage/v7/input/mask/angular/example_component_html.md
@@ -0,0 +1,20 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input
+      label="Card number"
+      placeholder="0000 0000 0000 0000"
+      [maskito]="cardMask"
+      [maskitoElement]="maskPredicate"
+    ></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input
+      label="US phone number"
+      placeholder="+1 (xxx) xxx-xxxx"
+      [maskito]="phoneMask"
+      [maskitoElement]="maskPredicate"
+    ></ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/input/mask/angular/example_component_ts.md b/static/usage/v7/input/mask/angular/example_component_ts.md
new file mode 100644
index 00000000000..2294a2e3403
--- /dev/null
+++ b/static/usage/v7/input/mask/angular/example_component_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { Component } from '@angular/core';
+
+import { MaskitoOptions, MaskitoElementPredicateAsync } from '@maskito/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  readonly phoneMask: MaskitoOptions = {
+    mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+  };
+
+  readonly cardMask: MaskitoOptions = {
+    mask: [
+      ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(4).fill(/\d/),
+    ],
+  };
+
+  readonly maskPredicate: MaskitoElementPredicateAsync = async (el) => (el as HTMLIonInputElement).getInputElement();
+}
+```
diff --git a/static/usage/v7/input/mask/demo.html b/static/usage/v7/input/mask/demo.html
new file mode 100644
index 00000000000..fc02f355ef7
--- /dev/null
+++ b/static/usage/v7/input/mask/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>Input</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <script type="module">
+      import { Maskito } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
+      window.Maskito = Maskito;
+    </script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input id="card" label="Card number" placeholder="0000 0000 0000 0000"></ion-input>
+            </ion-item>
+            <ion-item>
+              <ion-input id="phone" label="US phone number" placeholder="+1 (xxx) xxx-xxxx"></ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+    <script>
+      async function initPhoneMask() {
+        const ionInput = document.querySelector('#phone');
+        const nativeEl = await ionInput.getInputElement();
+
+        new window.Maskito(nativeEl, {
+          mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+        });
+      }
+
+      async function initCardMask() {
+        const ionInput = document.querySelector('#card');
+        const nativeEl = await ionInput.getInputElement();
+
+        new window.Maskito(nativeEl, {
+          mask: [
+            ...Array(4).fill(/\d/),
+            ' ',
+            ...Array(4).fill(/\d/),
+            ' ',
+            ...Array(4).fill(/\d/),
+            ' ',
+            ...Array(4).fill(/\d/),
+            ' ',
+            ...Array(4).fill(/\d/),
+          ],
+        });
+      }
+
+      window.addEventListener('appload', () => {
+        initCardMask();
+        initPhoneMask();
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md
new file mode 100644
index 00000000000..92ae30b967f
--- /dev/null
+++ b/static/usage/v7/input/mask/index.md
@@ -0,0 +1,58 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import react_main_tsx from './react.md';
+
+import vue_example_vue from './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';
+
+<Playground
+  version="7"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+      dependencies: {
+        '@maskito/core': '^0.16.0',
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+      },
+      dependencies: {
+        '@maskito/react': '^0.16.0',
+        '@maskito/core': '^0.16.0',
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example_vue,
+      },
+      dependencies: {
+        '@maskito/vue': '^0.16.0',
+        '@maskito/core': '^0.16.0',
+      },
+    },
+    angular: {
+      files: {
+        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+      dependencies: {
+        '@maskito/angular': '^0.16.0',
+        '@maskito/core': '^0.16.0',
+      },
+    },
+  }}
+  src="usage/v7/input/mask/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md
new file mode 100644
index 00000000000..512a34ff9f5
--- /dev/null
+++ b/static/usage/v7/input/mask/javascript/index_html.md
@@ -0,0 +1,58 @@
+```html
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding">
+        <ion-list>
+          <ion-item>
+            <ion-input id="card" label="Card number" placeholder="0000 0000 0000 0000"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-input id="phone" label="US phone number" placeholder="+1 (xxx) xxx-xxxx"></ion-input>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+      <script>
+        async function initPhoneMask() {
+          const ionInput = document.querySelector('#phone');
+          const nativeEl = await ionInput.getInputElement();
+
+          new window.Maskito(nativeEl, {
+            mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+          });
+        }
+
+        async function initCardMask() {
+          const ionInput = document.querySelector('#card');
+          const nativeEl = await ionInput.getInputElement();
+
+          new window.Maskito(nativeEl, {
+            mask: [
+              ...Array(4).fill(/\d/),
+              ' ',
+              ...Array(4).fill(/\d/),
+              ' ',
+              ...Array(4).fill(/\d/),
+              ' ',
+              ...Array(4).fill(/\d/),
+              ' ',
+              ...Array(4).fill(/\d/),
+            ],
+          });
+        }
+
+        window.addEventListener('appload', () => {
+          initCardMask();
+          initPhoneMask();
+        });
+      </script>
+    </ion-app>
+  </body>
+</html>
+```
diff --git a/static/usage/v7/input/mask/javascript/index_ts.md b/static/usage/v7/input/mask/javascript/index_ts.md
new file mode 100644
index 00000000000..89d38873488
--- /dev/null
+++ b/static/usage/v7/input/mask/javascript/index_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { Maskito } from '@maskito/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).Maskito = Maskito;
+```
diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md
new file mode 100644
index 00000000000..dd22df29914
--- /dev/null
+++ b/static/usage/v7/input/mask/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+import { useMaskito } from '@maskito/react';
+
+function Example() {
+  const cardMask = useMaskito({
+    options: {
+      mask: [
+        ...Array(4).fill(/\d/),
+        ' ',
+        ...Array(4).fill(/\d/),
+        ' ',
+        ...Array(4).fill(/\d/),
+        ' ',
+        ...Array(4).fill(/\d/),
+      ],
+    },
+  });
+
+  const phoneMask = useMaskito({
+    options: {
+      mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    },
+  });
+
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput
+          ref={async (cardRef) => {
+            if (cardRef) {
+              cardMask(await cardRef.getInputElement());
+            }
+          }}
+          label="Card number"
+          placeholder="0000 0000 0000 0000"
+        ></IonInput>
+      </IonItem>
+      <IonItem>
+        <IonInput
+          ref={async (phoneInput) => {
+            if (phoneInput) {
+              phoneMask(await phoneInput.getInputElement());
+            }
+          }}
+          label="US phone number"
+          placeholder="+1 (xxx) xxx-xxxx"
+        ></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md
new file mode 100644
index 00000000000..40c19079565
--- /dev/null
+++ b/static/usage/v7/input/mask/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input label="Card number" placeholder="0000 0000 0000 0000" v-maskito="cardOptions"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-maskito="phoneOptions"></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script setup lang="ts">
+  import { IonInput, IonItem, IonList } from '@ionic/vue';
+  import { maskito as vMaskito } from '@maskito/vue';
+
+  const cardOptions = {
+    mask: [
+      ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(4).fill(/\d/),
+    ],
+    elementPredicate: (el: HTMLIonInputElement) => {
+      return new Promise((resolve) => {
+        requestAnimationFrame(async () => {
+          const input = await el.getInputElement();
+          resolve(input);
+        });
+      });
+    },
+  };
+
+  const phoneOptions = {
+    mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    elementPredicate: (el: HTMLIonInputElement) => {
+      return new Promise((resolve) => {
+        requestAnimationFrame(async () => {
+          const input = await el.getInputElement();
+          resolve(input);
+        });
+      });
+    },
+  };
+</script>
+```

From e9dc746dfff736ee8eb5adac96ef5600222a3fdb Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 20 Jun 2023 16:00:03 -0400
Subject: [PATCH 400/469] docs(textarea): add label slot examples (#3001)

---
 docs/api/input.md                             |  2 --
 docs/api/textarea.md                          | 30 +++++++++++++++++--
 .../usage/v7/textarea/label-slot/angular.md   |  9 ++++++
 static/usage/v7/textarea/label-slot/demo.html | 28 +++++++++++++++++
 static/usage/v7/textarea/label-slot/index.md  | 12 ++++++++
 .../v7/textarea/label-slot/javascript.md      |  9 ++++++
 static/usage/v7/textarea/label-slot/react.md  | 17 +++++++++++
 static/usage/v7/textarea/label-slot/vue.md    | 20 +++++++++++++
 .../v7/textarea/no-visible-label/angular.md   |  7 +++++
 .../v7/textarea/no-visible-label/demo.html    | 26 ++++++++++++++++
 .../v7/textarea/no-visible-label/index.md     | 12 ++++++++
 .../textarea/no-visible-label/javascript.md   |  7 +++++
 .../v7/textarea/no-visible-label/react.md     | 15 ++++++++++
 .../usage/v7/textarea/no-visible-label/vue.md | 18 +++++++++++
 14 files changed, 208 insertions(+), 4 deletions(-)
 create mode 100644 static/usage/v7/textarea/label-slot/angular.md
 create mode 100644 static/usage/v7/textarea/label-slot/demo.html
 create mode 100644 static/usage/v7/textarea/label-slot/index.md
 create mode 100644 static/usage/v7/textarea/label-slot/javascript.md
 create mode 100644 static/usage/v7/textarea/label-slot/react.md
 create mode 100644 static/usage/v7/textarea/label-slot/vue.md
 create mode 100644 static/usage/v7/textarea/no-visible-label/angular.md
 create mode 100644 static/usage/v7/textarea/no-visible-label/demo.html
 create mode 100644 static/usage/v7/textarea/no-visible-label/index.md
 create mode 100644 static/usage/v7/textarea/no-visible-label/javascript.md
 create mode 100644 static/usage/v7/textarea/no-visible-label/react.md
 create mode 100644 static/usage/v7/textarea/no-visible-label/vue.md

diff --git a/docs/api/input.md b/docs/api/input.md
index 55f469ff798..bab9d178349 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -70,8 +70,6 @@ import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.m
 
 <NoVisibleLabel />
 
-
-
 ## 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.
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 9315c981358..8bc1d7ee99d 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -29,14 +29,40 @@ import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
 
 <BasicPlayground />
 
-## Label Placement
+## Labels
+
+Labels should be used to describe the textarea. They can be used visually, and they will also be read out by screen readers when the user is focused on the textarea. This makes it easy for the user to understand the intent of the textarea. Textarea has several ways to assign a label:
+
+- `label` property: used for plaintext labels
+- `label` slot: used for custom HTML labels (experimental)
+- `aria-label`: used to provide a label for screen readers but adds no visible label
+
+### Label Placement
 
 Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
-import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
+import LabelPlacement from '@site/static/usage/v7/textarea/label-placement/index.md';
 
 <LabelPlacement />
 
+### Label Slot (experimental)
+
+While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+
+Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+
+import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md';
+
+<LabelSlot />
+
+### No Visible Label
+
+If no visible label is needed, developers should still supply an `aria-label` so the textarea is accessible to screen readers.
+
+import NoVisibleLabel from '@site/static/usage/v7/textarea/no-visible-label/index.md';
+
+<NoVisibleLabel />
+
 ## Filled Textareas
 
 Material Design offers filled styles for a textarea. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
diff --git a/static/usage/v7/textarea/label-slot/angular.md b/static/usage/v7/textarea/label-slot/angular.md
new file mode 100644
index 00000000000..9c8e09ec88a
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/angular.md
@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea labelPlacement="floating" value="Lorem Ipsum">
+      <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
+    </ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/label-slot/demo.html b/static/usage/v7/textarea/label-slot/demo.html
new file mode 100644
index 00000000000..f71b8af342a
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/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>textarea</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-textarea label-placement="floating" value="Lorem Ipsum">
+                <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
+              </ion-textarea>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/textarea/label-slot/index.md b/static/usage/v7/textarea/label-slot/index.md
new file mode 100644
index 00000000000..8af442e5bce
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/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/textarea/label-slot/demo.html"
+/>
diff --git a/static/usage/v7/textarea/label-slot/javascript.md b/static/usage/v7/textarea/label-slot/javascript.md
new file mode 100644
index 00000000000..199978f9352
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/javascript.md
@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea label-placement="floating" value="Lorem Ipsum">
+      <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
+    </ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/label-slot/react.md b/static/usage/v7/textarea/label-slot/react.md
new file mode 100644
index 00000000000..648c0aafb04
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonTextarea, IonItem, IonList, IonText } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonTextarea labelPlacement="floating" value="Lorem Ipsum">
+          <div slot="label">Comments <IonText color="danger">(Required)</IonText></div>
+        </IonTextarea>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/label-slot/vue.md b/static/usage/v7/textarea/label-slot/vue.md
new file mode 100644
index 00000000000..0c5d90db33c
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-textarea label-placement="floating" value="Lorem Ipsum">
+        <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
+      </ion-textarea>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonTextarea, IonItem, IonList, IonText } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTextarea, IonItem, IonList, IonText },
+  });
+</script>
+```
diff --git a/static/usage/v7/textarea/no-visible-label/angular.md b/static/usage/v7/textarea/no-visible-label/angular.md
new file mode 100644
index 00000000000..2f4baaa7511
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/no-visible-label/demo.html b/static/usage/v7/textarea/no-visible-label/demo.html
new file mode 100644
index 00000000000..3d4e4f4a764
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/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>textarea</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/textarea/no-visible-label/index.md b/static/usage/v7/textarea/no-visible-label/index.md
new file mode 100644
index 00000000000..ca0024ae17c
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-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
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/textarea/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v7/textarea/no-visible-label/javascript.md b/static/usage/v7/textarea/no-visible-label/javascript.md
new file mode 100644
index 00000000000..2f4baaa7511
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/javascript.md
@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/no-visible-label/react.md b/static/usage/v7/textarea/no-visible-label/react.md
new file mode 100644
index 00000000000..c024d0fee66
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonTextarea, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonTextarea aria-label="Comments" value="Lorem Ipsum"></IonTextarea>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/no-visible-label/vue.md b/static/usage/v7/textarea/no-visible-label/vue.md
new file mode 100644
index 00000000000..fc77027d770
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonTextarea, IonItem, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonTextarea, IonItem, IonList },
+  });
+</script>
+```

From 78934cd706a0a7653c1416dec403ee9faa34033a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 21 Jun 2023 09:09:10 -0400
Subject: [PATCH 401/469] chore: add playgrounds for JP docs (#3004)

---
 .../theming/angular/example_component_html.md |  3 +
 .../v7/datetime/theming/angular/global_css.md | 66 ++++++++++++++++
 static/usage/v7/datetime/theming/demo.html    | 76 +++++++++++++++++++
 static/usage/v7/datetime/theming/index.md     | 35 +++++++++
 .../usage/v7/datetime/theming/javascript.md   | 54 +++++++++++++
 .../v7/datetime/theming/react/main_css.md     | 50 ++++++++++++
 .../v7/datetime/theming/react/main_tsx.md     | 11 +++
 static/usage/v7/datetime/theming/vue.md       | 65 ++++++++++++++++
 static/usage/v7/range/basic/angular.md        |  3 +
 static/usage/v7/range/basic/demo.html         | 27 +++++++
 static/usage/v7/range/basic/index.md          | 10 +++
 static/usage/v7/range/basic/javascript.md     |  3 +
 static/usage/v7/range/basic/react.md          |  8 ++
 static/usage/v7/range/basic/vue.md            | 14 ++++
 14 files changed, 425 insertions(+)
 create mode 100644 static/usage/v7/datetime/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/theming/angular/global_css.md
 create mode 100644 static/usage/v7/datetime/theming/demo.html
 create mode 100644 static/usage/v7/datetime/theming/index.md
 create mode 100644 static/usage/v7/datetime/theming/javascript.md
 create mode 100644 static/usage/v7/datetime/theming/react/main_css.md
 create mode 100644 static/usage/v7/datetime/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/datetime/theming/vue.md
 create mode 100644 static/usage/v7/range/basic/angular.md
 create mode 100644 static/usage/v7/range/basic/demo.html
 create mode 100644 static/usage/v7/range/basic/index.md
 create mode 100644 static/usage/v7/range/basic/javascript.md
 create mode 100644 static/usage/v7/range/basic/react.md
 create mode 100644 static/usage/v7/range/basic/vue.md

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..f2e502cfe56
--- /dev/null
+++ b/static/usage/v7/datetime/theming/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>Datetime</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/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/v7/datetime/theming/index.md b/static/usage/v7/datetime/theming/index.md
new file mode 100644
index 00000000000..3ed5817346f
--- /dev/null
+++ b/static/usage/v7/datetime/theming/index.md
@@ -0,0 +1,35 @@
+# TODO FW-4608
+
+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..3da768ccbb4
--- /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..dccf6c7d370
--- /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;
+}
+```
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..32e682cfbc9
--- /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/range/basic/angular.md b/static/usage/v7/range/basic/angular.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-range aria-label="Volume"></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..55216a9dd4b
--- /dev/null
+++ b/static/usage/v7/range/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>Range</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range aria-label="Volume"></ion-range>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md
new file mode 100644
index 00000000000..7da08dbd165
--- /dev/null
+++ b/static/usage/v7/range/basic/index.md
@@ -0,0 +1,10 @@
+# TODO FW-4608
+
+import Playground from '@site/src/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" />
\ No newline at end of file
diff --git a/static/usage/v7/range/basic/javascript.md b/static/usage/v7/range/basic/javascript.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-range aria-label="Volume"></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..ed85af943b5
--- /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 aria-label="Volume"></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..421bea060e4
--- /dev/null
+++ b/static/usage/v7/range/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-range aria-label="Volume"></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange },
+  });
+</script>
+```

From dc99a6e6a930af46931c43cb25ca858cdca507cc Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 21 Jun 2023 15:18:49 -0400
Subject: [PATCH 402/469] chore: upgrade maskito dependencies to v1 (#3005)

---
 static/usage/v7/input/mask/index.md | 14 +++++++-------
 static/usage/v7/input/mask/react.md |  6 ++++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md
index 92ae30b967f..174aabc1e30 100644
--- a/static/usage/v7/input/mask/index.md
+++ b/static/usage/v7/input/mask/index.md
@@ -20,7 +20,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'index.ts': javascript_index_ts,
       },
       dependencies: {
-        '@maskito/core': '^0.16.0',
+        '@maskito/core': '^1.0.0',
       },
     },
     react: {
@@ -28,8 +28,8 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/main.tsx': react_main_tsx,
       },
       dependencies: {
-        '@maskito/react': '^0.16.0',
-        '@maskito/core': '^0.16.0',
+        '@maskito/react': '^1.0.0',
+        '@maskito/core': '^1.0.0',
       },
     },
     vue: {
@@ -37,8 +37,8 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/components/Example.vue': vue_example_vue,
       },
       dependencies: {
-        '@maskito/vue': '^0.16.0',
-        '@maskito/core': '^0.16.0',
+        '@maskito/vue': '^1.0.0',
+        '@maskito/core': '^1.0.0',
       },
     },
     angular: {
@@ -48,8 +48,8 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
       },
       dependencies: {
-        '@maskito/angular': '^0.16.0',
-        '@maskito/core': '^0.16.0',
+        '@maskito/angular': '^1.0.0',
+        '@maskito/core': '^1.0.0',
       },
     },
   }}
diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md
index dd22df29914..2c7bb6ac213 100644
--- a/static/usage/v7/input/mask/react.md
+++ b/static/usage/v7/input/mask/react.md
@@ -30,7 +30,8 @@ function Example() {
         <IonInput
           ref={async (cardRef) => {
             if (cardRef) {
-              cardMask(await cardRef.getInputElement());
+              const input = await cardRef.getInputElement();
+              cardMask(input);
             }
           }}
           label="Card number"
@@ -41,7 +42,8 @@ function Example() {
         <IonInput
           ref={async (phoneInput) => {
             if (phoneInput) {
-              phoneMask(await phoneInput.getInputElement());
+              const input = await phoneInput.getInputElement();
+              phoneMask(input);
             }
           }}
           label="US phone number"

From 113dee72289dfc9ad30f031611c368aac562eae4 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 22 Jun 2023 15:42:34 -0700
Subject: [PATCH 403/469] fix(playground-tabs): show arrows on long list
 (#3009)

---
 src/components/global/Playground/index.tsx     | 2 +-
 src/components/global/PlaygroundTabs/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 9e01b1902bb..0681230b851 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -417,7 +417,7 @@ export default function Playground({
         return null;
       }
       return (
-        <PlaygroundTabs className="playground__tabs">
+        <PlaygroundTabs groupId={usageTarget} className="playground__tabs">
           {Object.keys(codeSnippets[usageTarget]).map((fileName) => (
             <TabItem
               className="playground__tab-item"
diff --git a/src/components/global/PlaygroundTabs/index.tsx b/src/components/global/PlaygroundTabs/index.tsx
index 73d958c5681..69efd4fbe7b 100644
--- a/src/components/global/PlaygroundTabs/index.tsx
+++ b/src/components/global/PlaygroundTabs/index.tsx
@@ -108,7 +108,7 @@ function TabsComponent(props: Props): JSX.Element {
   useEffect(() => {
     setLeftNavVisible(tabsNavEl.current?.scrollLeft > 40);
     setRightNavVisible(tabsNavEl.current?.scrollWidth > tabsNavEl.current?.offsetWidth);
-  }, []);
+  }, [groupId]);
 
   /**
    * If the selected value is not in the available tabs, fall back to the first tab.

From 9b65f4b8cb956a6c3eabace26740bd64a1b57390 Mon Sep 17 00:00:00 2001
From: Stefan Kempinger <19308955+CrazyChaoz@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:47:30 +0200
Subject: [PATCH 404/469] docs(native): improve grammar

fixed wording mistakes
---
 docs/native-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/native-faq.md b/docs/native-faq.md
index a74c967ba41..8ab58471fea 100644
--- a/docs/native-faq.md
+++ b/docs/native-faq.md
@@ -7,7 +7,7 @@ slug: /native/faq
 
 ## What is Capacitor?
 
-Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library.
+Capacitor is a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor is also exposing native device capabilities through JavaScript so developers can access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library.
 
 ## Permission Issues
 

From 03022cbb5c0b806d8a5879854752fe7abfc4f142 Mon Sep 17 00:00:00 2001
From: Biskweet <67809939+Biskweet@users.noreply.github.com>
Date: Mon, 26 Jun 2023 22:58:42 +0200
Subject: [PATCH 405/469] docs(your-first-app): switch to Date.now() (#2915)

Co-authored-by: Maria Hutt <maria@ionic.io>
---
 docs/angular/your-first-app/3-saving-photos.md                  | 2 +-
 docs/angular/your-first-app/5-adding-mobile.md                  | 2 +-
 docs/react/your-first-app/2-taking-photos.md                    | 2 +-
 docs/react/your-first-app/3-saving-photos.md                    | 2 +-
 docs/vue/your-first-app/2-taking-photos.md                      | 2 +-
 docs/vue/your-first-app/3-saving-photos.md                      | 2 +-
 .../version-v6/angular/your-first-app/3-saving-photos.md        | 2 +-
 .../version-v6/angular/your-first-app/5-adding-mobile.md        | 2 +-
 .../version-v6/react/your-first-app/2-taking-photos.md          | 2 +-
 .../version-v6/react/your-first-app/3-saving-photos.md          | 2 +-
 versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md | 2 +-
 versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md
index 27109d61432..c1e013a8bec 100644
--- a/docs/angular/your-first-app/3-saving-photos.md
+++ b/docs/angular/your-first-app/3-saving-photos.md
@@ -39,7 +39,7 @@ private async savePicture(photo: Photo) {
   const base64Data = await this.readAsBase64(photo);
 
   // Write the file to the data directory
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFile = await Filesystem.writeFile({
     path: fileName,
     data: base64Data,
diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md
index 3a3ebd92f23..ce7f60e75c5 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -62,7 +62,7 @@ private async savePicture(photo: Photo) {
   const base64Data = await this.readAsBase64(photo);
 
   // Write the file to the data directory
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFile = await Filesystem.writeFile({
     path: fileName,
     data: base64Data,
diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md
index 513d1a19d1f..9693e233c53 100644
--- a/docs/react/your-first-app/2-taking-photos.md
+++ b/docs/react/your-first-app/2-taking-photos.md
@@ -98,7 +98,7 @@ 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 fileName = Date.now() + '.jpeg';
 const newPhotos = [
   {
     filepath: fileName,
diff --git a/docs/react/your-first-app/3-saving-photos.md b/docs/react/your-first-app/3-saving-photos.md
index cc6224d68a1..eae9a61df7b 100644
--- a/docs/react/your-first-app/3-saving-photos.md
+++ b/docs/react/your-first-app/3-saving-photos.md
@@ -71,7 +71,7 @@ const takePhoto = async () => {
     quality: 100,
   });
 
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFileImage = await savePicture(photo, fileName);
   const newPhotos = [savedFileImage, ...photos];
   setPhotos(newPhotos);
diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
index c95399f7024..9e50677a499 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.md
@@ -104,7 +104,7 @@ 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` function, adding this code after the `Camera.getPhoto` line:
 
 ```tsx
-const fileName = new Date().getTime() + '.jpeg';
+const fileName = Date.now() + '.jpeg';
 const savedFileImage = {
   filepath: fileName,
   webviewPath: photo.webPath,
diff --git a/docs/vue/your-first-app/3-saving-photos.md b/docs/vue/your-first-app/3-saving-photos.md
index 429ae929645..04f5085738f 100644
--- a/docs/vue/your-first-app/3-saving-photos.md
+++ b/docs/vue/your-first-app/3-saving-photos.md
@@ -60,7 +60,7 @@ const takePhoto = async () => {
     quality: 100,
   });
 
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFileImage = await savePicture(photo, fileName);
 
   photos.value = [savedFileImage, ...photos.value];
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
index 27109d61432..c1e013a8bec 100644
--- 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
@@ -39,7 +39,7 @@ private async savePicture(photo: Photo) {
   const base64Data = await this.readAsBase64(photo);
 
   // Write the file to the data directory
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFile = await Filesystem.writeFile({
     path: fileName,
     data: base64Data,
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
index 3c6190e3799..28988755a4c 100644
--- 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
@@ -62,7 +62,7 @@ private async savePicture(photo: Photo) {
   const base64Data = await this.readAsBase64(photo);
 
   // Write the file to the data directory
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFile = await Filesystem.writeFile({
     path: fileName,
     data: base64Data,
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
index 90c527521bd..1c460796688 100644
--- 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
@@ -98,7 +98,7 @@ 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 fileName = Date.now() + '.jpeg';
 const newPhotos = [
   {
     filepath: fileName,
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
index cc6224d68a1..eae9a61df7b 100644
--- 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
@@ -71,7 +71,7 @@ const takePhoto = async () => {
     quality: 100,
   });
 
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFileImage = await savePicture(photo, fileName);
   const newPhotos = [savedFileImage, ...photos];
   setPhotos(newPhotos);
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
index 8fe97523339..74513752c2d 100644
--- 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
@@ -106,7 +106,7 @@ 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 fileName = Date.now() + '.jpeg';
 const savedFileImage = {
   filepath: fileName,
   webviewPath: photo.webPath,
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
index 59b165ca9ab..8d06a3ea673 100644
--- 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
@@ -62,7 +62,7 @@ const takePhoto = async () => {
     quality: 100,
   });
 
-  const fileName = new Date().getTime() + '.jpeg';
+  const fileName = Date.now() + '.jpeg';
   const savedFileImage = await savePicture(photo, fileName);
 
   photos.value = [savedFileImage, ...photos.value];

From 7d9e1fecadc5838e00189a872fa227410b066836 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 6 Jul 2023 10:53:59 -0400
Subject: [PATCH 406/469] docs(list): use dark mode aware color (#3015)

Co-authored-by: reslear <reslear@users.noreply.github.com>
---
 static/usage/v7/list/inset/angular.md    | 36 +++++++++++----------
 static/usage/v7/list/inset/demo.html     |  6 +---
 static/usage/v7/list/inset/index.md      |  8 ++++-
 static/usage/v7/list/inset/javascript.md | 36 +++++++++++----------
 static/usage/v7/list/inset/react.md      | 38 +++++++++++-----------
 static/usage/v7/list/inset/vue.md        | 40 +++++++++++++-----------
 6 files changed, 87 insertions(+), 77 deletions(-)

diff --git a/static/usage/v7/list/inset/angular.md b/static/usage/v7/list/inset/angular.md
index d88d56e77f1..cd94c838cb9 100644
--- a/static/usage/v7/list/inset/angular.md
+++ b/static/usage/v7/list/inset/angular.md
@@ -1,19 +1,21 @@
 ```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>
+<ion-content color="light">
+  <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>
+</ion-content>
 ```
diff --git a/static/usage/v7/list/inset/demo.html b/static/usage/v7/list/inset/demo.html
index 546fb33e456..7c124f4adb2 100644
--- a/static/usage/v7/list/inset/demo.html
+++ b/static/usage/v7/list/inset/demo.html
@@ -10,10 +10,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
     <style>
-      ion-content {
-        --background: #f9f9f9;
-      }
-
       .container {
         flex-flow: column;
         align-items: stretch;
@@ -23,7 +19,7 @@
 
   <body>
     <ion-app>
-      <ion-content>
+      <ion-content color="light">
         <div class="container">
           <ion-list inset>
             <ion-item>
diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.md
index 90a7e7c6a64..c77760038a7 100644
--- a/static/usage/v7/list/inset/index.md
+++ b/static/usage/v7/list/inset/index.md
@@ -5,4 +5,10 @@ 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" />
+<Playground
+  version="7" 
+  code={{ javascript, react, vue, angular }} 
+  src="usage/v7/list/inset/demo.html" 
+  size="350px"
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/list/inset/javascript.md b/static/usage/v7/list/inset/javascript.md
index a5c6e28dd38..28766d76267 100644
--- a/static/usage/v7/list/inset/javascript.md
+++ b/static/usage/v7/list/inset/javascript.md
@@ -1,19 +1,21 @@
 ```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>
+<ion-content color="light">
+  <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>
+</ion-content>
 ```
diff --git a/static/usage/v7/list/inset/react.md b/static/usage/v7/list/inset/react.md
index d9f00d8a4f9..37e00fc1048 100644
--- a/static/usage/v7/list/inset/react.md
+++ b/static/usage/v7/list/inset/react.md
@@ -1,26 +1,28 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList } from '@ionic/react';
+import { IonContent, 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>
+    <IonContent color="light">
+      <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>
+    </IonContent>
   );
 }
 export default Example;
diff --git a/static/usage/v7/list/inset/vue.md b/static/usage/v7/list/inset/vue.md
index 15d801c7eae..5391206549f 100644
--- a/static/usage/v7/list/inset/vue.md
+++ b/static/usage/v7/list/inset/vue.md
@@ -1,30 +1,32 @@
 ```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>
+  <ion-content color="light">
+    <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>
+  </ion-content>
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList } from '@ionic/vue';
+  import { IonContent, IonItem, IonLabel, IonList } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonItem, IonLabel, IonList },
+    components: { IonContent, IonItem, IonLabel, IonList },
   });
 </script>
 ```

From 806851bf1e50700a10a8e792ff22bc926df7eb89 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 6 Jul 2023 11:07:16 -0400
Subject: [PATCH 407/469] docs(maskito): update credit card mask format (#3007)

---
 static/usage/v7/input/mask/angular/example_component_ts.md | 2 +-
 static/usage/v7/input/mask/demo.html                       | 2 +-
 static/usage/v7/input/mask/javascript/index_html.md        | 2 +-
 static/usage/v7/input/mask/react.md                        | 2 ++
 static/usage/v7/input/mask/vue.md                          | 2 ++
 5 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/static/usage/v7/input/mask/angular/example_component_ts.md b/static/usage/v7/input/mask/angular/example_component_ts.md
index 2294a2e3403..1edb7f8c662 100644
--- a/static/usage/v7/input/mask/angular/example_component_ts.md
+++ b/static/usage/v7/input/mask/angular/example_component_ts.md
@@ -22,7 +22,7 @@ export class ExampleComponent {
       ' ',
       ...Array(4).fill(/\d/),
       ' ',
-      ...Array(4).fill(/\d/),
+      ...Array(3).fill(/\d/),
     ],
   };
 
diff --git a/static/usage/v7/input/mask/demo.html b/static/usage/v7/input/mask/demo.html
index fc02f355ef7..7c98089f4b1 100644
--- a/static/usage/v7/input/mask/demo.html
+++ b/static/usage/v7/input/mask/demo.html
@@ -59,7 +59,7 @@
             ' ',
             ...Array(4).fill(/\d/),
             ' ',
-            ...Array(4).fill(/\d/),
+            ...Array(3).fill(/\d/),
           ],
         });
       }
diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md
index 512a34ff9f5..de58d9ded47 100644
--- a/static/usage/v7/input/mask/javascript/index_html.md
+++ b/static/usage/v7/input/mask/javascript/index_html.md
@@ -42,7 +42,7 @@
               ' ',
               ...Array(4).fill(/\d/),
               ' ',
-              ...Array(4).fill(/\d/),
+              ...Array(3).fill(/\d/),
             ],
           });
         }
diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md
index 2c7bb6ac213..2b4d76902dc 100644
--- a/static/usage/v7/input/mask/react.md
+++ b/static/usage/v7/input/mask/react.md
@@ -14,6 +14,8 @@ function Example() {
         ...Array(4).fill(/\d/),
         ' ',
         ...Array(4).fill(/\d/),
+        ' ',
+        ...Array(3).fill(/\d/),
       ],
     },
   });
diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md
index 40c19079565..14b96d0caee 100644
--- a/static/usage/v7/input/mask/vue.md
+++ b/static/usage/v7/input/mask/vue.md
@@ -23,6 +23,8 @@
       ...Array(4).fill(/\d/),
       ' ',
       ...Array(4).fill(/\d/),
+      ' ',
+      ...Array(3).fill(/\d/),
     ],
     elementPredicate: (el: HTMLIonInputElement) => {
       return new Promise((resolve) => {

From b2b7df1f819d194667b37bd5f342f5a1a35762a3 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 6 Jul 2023 11:07:28 -0400
Subject: [PATCH 408/469] chore(ci): check for diff after running prettier
 (#2981)

---
 .github/workflows/CI.yml                       |  6 ++++++
 versioned_docs/version-v5/api/item.md          |  7 ++++---
 .../version-v5/native/background-fetch.md      | 18 +++++++++---------
 .../version-v5/native/bluetooth-serial.md      | 18 +++++++++---------
 .../version-v5/native/document-scanner.md      | 18 +++++++++---------
 .../version-v5/native/firebase-vision.md       | 18 +++++++++---------
 .../version-v5/native/google-analytics.md      | 18 +++++++++---------
 7 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index d35a183f9ac..ced06132a9e 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -25,3 +25,9 @@ jobs:
       run: npm ci --legacy-peer-deps
     - name: Lint
       run: npm run lint
+    # Lint changes should be pushed
+    # to the branch before the branch
+    # is merge eligible.
+    - name: Check Diff
+      run: git diff --exit-code
+      shell: bash
diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.md
index 6c58db0787a..7e2c7205d1c 100644
--- a/versioned_docs/version-v5/api/item.md
+++ b/versioned_docs/version-v5/api/item.md
@@ -1033,13 +1033,14 @@ export class ItemExample {
         <ion-item>
           <ion-label>Item</ion-label>
         </ion-item>
-        ,<ion-item lines="none">
+        <ion-item lines="none">
           <ion-label>No Lines Item</ion-label>
         </ion-item>,<ion-item>
           <ion-label class="ion-text-wrap">
             Multiline text that should wrap when it is too long to fit on one line in the item.
           </ion-label>
-        </ion-item>,<ion-item>
+        </ion-item>
+        <ion-item>
           <ion-label class="ion-text-wrap">
             <ion-text color="primary">
               <h3>H3 Primary Title</h3>
@@ -1049,7 +1050,7 @@ export class ItemExample {
               <p>Paragraph line 2 secondary</p>
             </ion-text>
           </ion-label>
-        </ion-item>,
+        </ion-item>
         <ion-item lines="full">
           <ion-label>Item with Full Lines</ion-label>
         </ion-item>
diff --git a/versioned_docs/version-v5/native/background-fetch.md b/versioned_docs/version-v5/native/background-fetch.md
index a00e1f832e3..1090feb0d6d 100644
--- a/versioned_docs/version-v5/native/background-fetch.md
+++ b/versioned_docs/version-v5/native/background-fetch.md
@@ -6,7 +6,6 @@ import DocsCard from '@components/global/DocsCard';
 import DocsButton from '@components/page/native/DocsButton';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
 
 # Background Fetch
 
@@ -57,16 +56,17 @@ For more detail, please see https://github.com/transistorsoft/cordova-plugin-bac
   ]}
 >
   <TabItem value="Capacitor">
-    <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'}
-      $ ionic cap sync
-    </CodeBlock>
+
+    $ npm install cordova-plugin-background-fetch
+    $ npm install @awesome-cordova-plugins/background-fetch
+    $ ionic cap sync
+
   </TabItem>
   <TabItem value="Cordova">
-    <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-background-fetch {'\n'}$ npm install
-      @awesome-cordova-plugins/background-fetch {'\n'}
-    </CodeBlock>
+
+    $ ionic cordova plugin add cordova-plugin-background-fetch
+    $ npm install @awesome-cordova-plugins/background-fetch
+
   </TabItem>
   <TabItem value="Enterprise">
     <blockquote>
diff --git a/versioned_docs/version-v5/native/bluetooth-serial.md b/versioned_docs/version-v5/native/bluetooth-serial.md
index 838c10bb35e..61b9dcd6b42 100644
--- a/versioned_docs/version-v5/native/bluetooth-serial.md
+++ b/versioned_docs/version-v5/native/bluetooth-serial.md
@@ -6,7 +6,6 @@ import DocsCard from '@components/global/DocsCard';
 import DocsButton from '@components/page/native/DocsButton';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
 
 # Bluetooth Serial
 
@@ -50,16 +49,17 @@ This plugin enables serial communication over Bluetooth. It was written for comm
   ]}
 >
   <TabItem value="Capacitor">
-    <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'}
-      $ ionic cap sync
-    </CodeBlock>
+
+    $ npm install cordova-plugin-bluetooth-serial
+    $ npm install @awesome-cordova-plugins/bluetooth-serial
+    $ ionic cap sync
+
   </TabItem>
   <TabItem value="Cordova">
-    <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-bluetooth-serial {'\n'}$ npm install
-      @awesome-cordova-plugins/bluetooth-serial {'\n'}
-    </CodeBlock>
+
+    $ ionic cordova plugin add cordova-plugin-bluetooth-serial
+    $ npm install @awesome-cordova-plugins/bluetooth-serial
+
   </TabItem>
   <TabItem value="Enterprise">
     <blockquote>
diff --git a/versioned_docs/version-v5/native/document-scanner.md b/versioned_docs/version-v5/native/document-scanner.md
index 4d4716b999f..3044764ace3 100644
--- a/versioned_docs/version-v5/native/document-scanner.md
+++ b/versioned_docs/version-v5/native/document-scanner.md
@@ -6,7 +6,6 @@ import DocsCard from '@components/global/DocsCard';
 import DocsButton from '@components/page/native/DocsButton';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
 
 # Document Scanner
 
@@ -55,16 +54,17 @@ This plugin processes images of documents, compensating for perspective.
   ]}
 >
   <TabItem value="Capacitor">
-    <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'}
-      $ ionic cap sync
-    </CodeBlock>
+
+    $ npm install cordova-plugin-document-scanner
+    $ npm install @awesome-cordova-plugins/document-scanner
+    $ ionic cap sync
+
   </TabItem>
   <TabItem value="Cordova">
-    <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-document-scanner {'\n'}$ npm install
-      @awesome-cordova-plugins/document-scanner {'\n'}
-    </CodeBlock>
+
+    $ ionic cordova plugin add cordova-plugin-document-scanner
+    $ npm install @awesome-cordova-plugins/document-scanner
+
   </TabItem>
   <TabItem value="Enterprise">
     <blockquote>
diff --git a/versioned_docs/version-v5/native/firebase-vision.md b/versioned_docs/version-v5/native/firebase-vision.md
index 676aa280c17..fbf3dc96f6e 100644
--- a/versioned_docs/version-v5/native/firebase-vision.md
+++ b/versioned_docs/version-v5/native/firebase-vision.md
@@ -6,7 +6,6 @@ import DocsCard from '@components/global/DocsCard';
 import DocsButton from '@components/page/native/DocsButton';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
 
 # Firebase Vision
 
@@ -55,16 +54,17 @@ Cordova plugin for Firebase MLKit Vision
   ]}
 >
   <TabItem value="Capacitor">
-    <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'}
-      $ ionic cap sync
-    </CodeBlock>
+
+    $ npm install cordova-plugin-firebase-mlvision
+    $ npm install @awesome-cordova-plugins/firebase-vision
+    $ ionic cap sync
+
   </TabItem>
   <TabItem value="Cordova">
-    <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-firebase-mlvision {'\n'}$ npm install
-      @awesome-cordova-plugins/firebase-vision {'\n'}
-    </CodeBlock>
+
+    $ ionic cordova plugin add cordova-plugin-firebase-mlvision
+    $ npm install @awesome-cordova-plugins/firebase-vision
+
   </TabItem>
   <TabItem value="Enterprise">
     <blockquote>
diff --git a/versioned_docs/version-v5/native/google-analytics.md b/versioned_docs/version-v5/native/google-analytics.md
index 545100f71bc..7038ada965d 100644
--- a/versioned_docs/version-v5/native/google-analytics.md
+++ b/versioned_docs/version-v5/native/google-analytics.md
@@ -6,7 +6,6 @@ import DocsCard from '@components/global/DocsCard';
 import DocsButton from '@components/page/native/DocsButton';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
 
 # Google Analytics
 
@@ -55,16 +54,17 @@ Prerequisites:
   ]}
 >
   <TabItem value="Capacitor">
-    <CodeBlock className="language-shell">
-      $ npm install cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'}
-      $ ionic cap sync
-    </CodeBlock>
+
+    $ npm install cordova-plugin-google-analytics
+    $ npm install @awesome-cordova-plugins/google-analytics
+    $ ionic cap sync
+
   </TabItem>
   <TabItem value="Cordova">
-    <CodeBlock className="language-shell">
-      $ ionic cordova plugin add cordova-plugin-google-analytics {'\n'}$ npm install
-      @awesome-cordova-plugins/google-analytics {'\n'}
-    </CodeBlock>
+
+    $ ionic cordova plugin add cordova-plugin-google-analytics
+    $ npm install @awesome-cordova-plugins/google-analytics
+
   </TabItem>
   <TabItem value="Enterprise">
     <blockquote>

From 63d96f38905cc86d95eafff4b888dfaf6f8ad71a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 6 Jul 2023 12:37:27 -0400
Subject: [PATCH 409/469] chore: lint content (#3020)

---
 docs/vue/lifecycle.md                              |  8 ++++----
 static/usage/v7/input/label-slot/index.md          |  6 +-----
 static/usage/v7/input/label-slot/react.md          |  4 +++-
 static/usage/v7/input/no-visible-label/index.md    |  6 +-----
 static/usage/v7/list/inset/index.md                |  6 +++---
 static/usage/v7/range/basic/index.md               |  2 +-
 static/usage/v7/range/label-slot/angular.md        |  4 +---
 static/usage/v7/range/label-slot/demo.html         |  4 +---
 static/usage/v7/range/label-slot/javascript.md     |  4 +---
 static/usage/v7/range/label-slot/vue.md            |  4 +---
 static/usage/v7/range/labels/demo.html             |  8 ++++----
 static/usage/v7/select/label-slot/react.md         |  4 +++-
 static/usage/v7/select/label-slot/vue.md           | 12 ++++++------
 static/usage/v7/select/no-visible-label/vue.md     | 10 +++++-----
 static/usage/v7/textarea/label-slot/index.md       |  6 +-----
 static/usage/v7/textarea/label-slot/react.md       |  4 +++-
 static/usage/v7/textarea/no-visible-label/index.md |  6 +-----
 17 files changed, 40 insertions(+), 58 deletions(-)

diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index 1c144b53d61..fe0e8ad01aa 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -10,12 +10,12 @@ This guide discusses how to use the Ionic Framework Lifecycle events in an Ionic
 
 Ionic Framework provides a few lifecycle methods that you can use in your apps:
 
-| Event Name | Description |
+| 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 _from_ has _finished_ animating. |
+| `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 _from_ has _finished_ animating.  |
 
 These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render.
 
diff --git a/static/usage/v7/input/label-slot/index.md b/static/usage/v7/input/label-slot/index.md
index 24328d5cd70..5161508076b 100644
--- a/static/usage/v7/input/label-slot/index.md
+++ b/static/usage/v7/input/label-slot/index.md
@@ -5,8 +5,4 @@ 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/label-slot/demo.html"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/label-slot/demo.html" />
diff --git a/static/usage/v7/input/label-slot/react.md b/static/usage/v7/input/label-slot/react.md
index d4bc7902935..144a7e80e97 100644
--- a/static/usage/v7/input/label-slot/react.md
+++ b/static/usage/v7/input/label-slot/react.md
@@ -7,7 +7,9 @@ function Example() {
     <IonList>
       <IonItem>
         <IonInput labelPlacement="floating" value="hi@ionic.io">
-          <div slot="label">Email <IonText color="danger">(Required)</IonText></div>
+          <div slot="label">
+            Email <IonText color="danger">(Required)</IonText>
+          </div>
         </IonInput>
       </IonItem>
     </IonList>
diff --git a/static/usage/v7/input/no-visible-label/index.md b/static/usage/v7/input/no-visible-label/index.md
index de0fe522748..715c46e475f 100644
--- a/static/usage/v7/input/no-visible-label/index.md
+++ b/static/usage/v7/input/no-visible-label/index.md
@@ -5,8 +5,4 @@ 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/no-visible-label/demo.html"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/no-visible-label/demo.html" />
diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.md
index c77760038a7..db7339d24eb 100644
--- a/static/usage/v7/list/inset/index.md
+++ b/static/usage/v7/list/inset/index.md
@@ -6,9 +6,9 @@ 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" 
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/list/inset/demo.html"
   size="350px"
   includeIonContent={false}
 />
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md
index 7da08dbd165..49aed4c5b42 100644
--- a/static/usage/v7/range/basic/index.md
+++ b/static/usage/v7/range/basic/index.md
@@ -7,4 +7,4 @@ 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" />
\ No newline at end of file
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/basic/demo.html" />
diff --git a/static/usage/v7/range/label-slot/angular.md b/static/usage/v7/range/label-slot/angular.md
index 83ae393896e..a1942046521 100644
--- a/static/usage/v7/range/label-slot/angular.md
+++ b/static/usage/v7/range/label-slot/angular.md
@@ -1,7 +1,5 @@
 ```html
 <ion-range>
-  <div slot="label">
-    Label with <ion-text color="primary">custom HTML</ion-text>
-  </div>
+  <div slot="label">Label with <ion-text color="primary">custom HTML</ion-text></div>
 </ion-range>
 ```
diff --git a/static/usage/v7/range/label-slot/demo.html b/static/usage/v7/range/label-slot/demo.html
index 8364ee4e28c..1a39163e66f 100644
--- a/static/usage/v7/range/label-slot/demo.html
+++ b/static/usage/v7/range/label-slot/demo.html
@@ -20,9 +20,7 @@
       <ion-content>
         <div class="container">
           <ion-range>
-            <div slot="label">
-              Label with <ion-text color="primary">custom HTML</ion-text>
-            </div>
+            <div slot="label">Label with <ion-text color="primary">custom HTML</ion-text></div>
           </ion-range>
         </div>
       </ion-content>
diff --git a/static/usage/v7/range/label-slot/javascript.md b/static/usage/v7/range/label-slot/javascript.md
index 83ae393896e..a1942046521 100644
--- a/static/usage/v7/range/label-slot/javascript.md
+++ b/static/usage/v7/range/label-slot/javascript.md
@@ -1,7 +1,5 @@
 ```html
 <ion-range>
-  <div slot="label">
-    Label with <ion-text color="primary">custom HTML</ion-text>
-  </div>
+  <div slot="label">Label with <ion-text color="primary">custom HTML</ion-text></div>
 </ion-range>
 ```
diff --git a/static/usage/v7/range/label-slot/vue.md b/static/usage/v7/range/label-slot/vue.md
index 56765cdd14d..b67e731d684 100644
--- a/static/usage/v7/range/label-slot/vue.md
+++ b/static/usage/v7/range/label-slot/vue.md
@@ -1,9 +1,7 @@
 ```html
 <template>
   <ion-range>
-    <div slot="label">
-      Label with <ion-text color="primary">custom HTML</ion-text>
-    </div>
+    <div slot="label">Label with <ion-text color="primary">custom HTML</ion-text></div>
   </ion-range>
 </template>
 
diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html
index b44cc98584e..7357f88d861 100644
--- a/static/usage/v7/range/labels/demo.html
+++ b/static/usage/v7/range/labels/demo.html
@@ -21,13 +21,13 @@
         <div class="container">
           <div class="wrapper">
             <ion-range label-placement="start" label="Label at the Start"></ion-range>
-            
+
             <br />
-            
+
             <ion-range label-placement="end" label="Label at the End"></ion-range>
-            
+
             <br />
-            
+
             <ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
           </div>
         </div>
diff --git a/static/usage/v7/select/label-slot/react.md b/static/usage/v7/select/label-slot/react.md
index 30dd46d7532..a903897a65b 100644
--- a/static/usage/v7/select/label-slot/react.md
+++ b/static/usage/v7/select/label-slot/react.md
@@ -7,7 +7,9 @@ function Example() {
     <IonList>
       <IonItem>
         <IonSelect placeholder="Select a Fruit">
-          <div slot="label">Favorite Fruit <IonText color="danger">(Required)</IonText></div>
+          <div slot="label">
+            Favorite Fruit <IonText color="danger">(Required)</IonText>
+          </div>
           <IonSelectOption value="apple">Apple</IonSelectOption>
           <IonSelectOption value="banana">Banana</IonSelectOption>
           <IonSelectOption value="orange">Orange</IonSelectOption>
diff --git a/static/usage/v7/select/label-slot/vue.md b/static/usage/v7/select/label-slot/vue.md
index 4bdeb67e1d0..8c8a8dd8be5 100644
--- a/static/usage/v7/select/label-slot/vue.md
+++ b/static/usage/v7/select/label-slot/vue.md
@@ -2,12 +2,12 @@
 <template>
   <ion-list>
     <ion-item>
-     <ion-select placeholder="Select a Fruit">
-       <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
-       <ion-select-option value="apple">Apple</ion-select-option>
-       <ion-select-option value="banana">Banana</ion-select-option>
-       <ion-select-option value="orange">Orange</ion-select-option>
-     </ion-select>
+      <ion-select placeholder="Select a Fruit">
+        <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
     </ion-item>
   </ion-list>
 </template>
diff --git a/static/usage/v7/select/no-visible-label/vue.md b/static/usage/v7/select/no-visible-label/vue.md
index 1d3753d58f8..038d7d32130 100644
--- a/static/usage/v7/select/no-visible-label/vue.md
+++ b/static/usage/v7/select/no-visible-label/vue.md
@@ -2,11 +2,11 @@
 <template>
   <ion-list>
     <ion-item>
-     <ion-select aria-label="Favorite Fruit" value="apple">
-       <ion-select-option value="apple">Apple</ion-select-option>
-       <ion-select-option value="banana">Banana</ion-select-option>
-       <ion-select-option value="orange">Orange</ion-select-option>
-     </ion-select>
+      <ion-select aria-label="Favorite Fruit" value="apple">
+        <ion-select-option value="apple">Apple</ion-select-option>
+        <ion-select-option value="banana">Banana</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+      </ion-select>
     </ion-item>
   </ion-list>
 </template>
diff --git a/static/usage/v7/textarea/label-slot/index.md b/static/usage/v7/textarea/label-slot/index.md
index 8af442e5bce..a9f9136612b 100644
--- a/static/usage/v7/textarea/label-slot/index.md
+++ b/static/usage/v7/textarea/label-slot/index.md
@@ -5,8 +5,4 @@ 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/textarea/label-slot/demo.html"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/textarea/label-slot/demo.html" />
diff --git a/static/usage/v7/textarea/label-slot/react.md b/static/usage/v7/textarea/label-slot/react.md
index 648c0aafb04..4c58fdf2a7b 100644
--- a/static/usage/v7/textarea/label-slot/react.md
+++ b/static/usage/v7/textarea/label-slot/react.md
@@ -7,7 +7,9 @@ function Example() {
     <IonList>
       <IonItem>
         <IonTextarea labelPlacement="floating" value="Lorem Ipsum">
-          <div slot="label">Comments <IonText color="danger">(Required)</IonText></div>
+          <div slot="label">
+            Comments <IonText color="danger">(Required)</IonText>
+          </div>
         </IonTextarea>
       </IonItem>
     </IonList>
diff --git a/static/usage/v7/textarea/no-visible-label/index.md b/static/usage/v7/textarea/no-visible-label/index.md
index ca0024ae17c..411fc52d502 100644
--- a/static/usage/v7/textarea/no-visible-label/index.md
+++ b/static/usage/v7/textarea/no-visible-label/index.md
@@ -5,8 +5,4 @@ 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/textarea/no-visible-label/demo.html"
-/>
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/textarea/no-visible-label/demo.html" />

From 33b6defc50e8648a0dd7151f7dffb36f917c8de0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 6 Jul 2023 13:16:21 -0400
Subject: [PATCH 410/469] docs(animation): add playground for override example
 (#3018)

Co-authored-by: dillionmegida <dillionmegida@users.noreply.github.com>
---
 docs/utilities/animations.md                  | 231 +-----------------
 static/code/stackblitz/v7/html/index.ts       |   3 +-
 .../angular/example_component_html.md         |  23 ++
 .../angular/example_component_ts.md           |  52 ++++
 .../v7/animations/modal-override/demo.html    |  78 ++++++
 .../v7/animations/modal-override/index.md     |  26 ++
 .../animations/modal-override/javascript.md   |  57 +++++
 .../v7/animations/modal-override/react.md     |  71 ++++++
 .../usage/v7/animations/modal-override/vue.md |  90 +++++++
 9 files changed, 401 insertions(+), 230 deletions(-)
 create mode 100644 static/usage/v7/animations/modal-override/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/modal-override/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/modal-override/demo.html
 create mode 100644 static/usage/v7/animations/modal-override/index.md
 create mode 100644 static/usage/v7/animations/modal-override/javascript.md
 create mode 100644 static/usage/v7/animations/modal-override/react.md
 create mode 100644 static/usage/v7/animations/modal-override/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 92c6eebc67a..d53bfbca0e5 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -1279,236 +1279,9 @@ Certain Ionic components allow developers to provide custom animations. All anim
 
 ### 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>
-````
+import ModalOverride from '@site/static/usage/v7/animations/modal-override/index.md';
 
-<Codepen user="ionic" slug="ExapZBZ" />
+<ModalOverride />
 
 ## Performance Considerations
 
diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
index 952785602e6..c820961c828 100644
--- a/static/code/stackblitz/v7/html/index.ts
+++ b/static/code/stackblitz/v7/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -27,3 +27,4 @@ defineCustomElements();
 (window as any).modalController = modalController;
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;
+(window as any).createAnimation = createAnimation;
diff --git a/static/usage/v7/animations/modal-override/angular/example_component_html.md b/static/usage/v7/animations/modal-override/angular/example_component_html.md
new file mode 100644
index 00000000000..178ae34c17b
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Page</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="modal-trigger">Present Modal</ion-button>
+  <ion-modal trigger="modal-trigger" #modal>
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="closeModal()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding"> Modal Content </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md
new file mode 100644
index 00000000000..b1fe997c1d4
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md
@@ -0,0 +1,52 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonModal } from '@ionic/angular';
+import { AnimationController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('modal', { static: true }) modal: IonModal;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngOnInit() {
+    const 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]);
+    };
+
+    const leaveAnimation = (baseEl: HTMLElement) => {
+      return enterAnimation(baseEl).direction('reverse');
+    };
+
+    this.modal.enterAnimation = enterAnimation;
+    this.modal.leaveAnimation = leaveAnimation;
+  }
+
+  closeModal() {
+    this.modal.dismiss();
+  }
+}
+```
diff --git a/static/usage/v7/animations/modal-override/demo.html b/static/usage/v7/animations/modal-override/demo.html
new file mode 100644
index 00000000000..15da72756db
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/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>Accordion</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+    </script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="container">
+          <ion-button id="modal-trigger">Present Modal</ion-button>
+          <ion-modal trigger="modal-trigger">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Modal</ion-title>
+                <ion-buttons slot="end">
+                  <ion-button onclick="closeModal()">Close</ion-button>
+                </ion-buttons>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding"> Modal Content </ion-content>
+          </ion-modal>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const modal = document.querySelector('ion-modal');
+
+      const closeModal = () => {
+        modal.dismiss();
+      };
+
+      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) => {
+        return enterAnimation(baseEl).direction('reverse');
+      };
+
+      modal.enterAnimation = enterAnimation;
+      modal.leaveAnimation = leaveAnimation;
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/modal-override/index.md b/static/usage/v7/animations/modal-override/index.md
new file mode 100644
index 00000000000..ba289f42c62
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/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/animations/modal-override/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/animations/modal-override/javascript.md b/static/usage/v7/animations/modal-override/javascript.md
new file mode 100644
index 00000000000..0efad523d3b
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/javascript.md
@@ -0,0 +1,57 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Page</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="modal-trigger">Present Modal</ion-button>
+  <ion-modal trigger="modal-trigger">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal</ion-title>
+        <ion-buttons slot="end">
+          <ion-button onclick="closeModal()">Close</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding"> Modal Content </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  const modal = document.querySelector('ion-modal');
+
+  var closeModal = () => {
+    modal.dismiss();
+  };
+
+  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) => {
+    return enterAnimation(baseEl).direction('reverse');
+  };
+
+  modal.enterAnimation = enterAnimation;
+  modal.leaveAnimation = leaveAnimation;
+</script>
+```
diff --git a/static/usage/v7/animations/modal-override/react.md b/static/usage/v7/animations/modal-override/react.md
new file mode 100644
index 00000000000..730881c49a9
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonToolbar,
+  IonTitle,
+  createAnimation,
+} from '@ionic/react';
+
+function Example() {
+  const modalEl = useRef<HTMLIonModalElement>(null);
+
+  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');
+  };
+
+  const closeModal = () => {
+    modalEl.current?.dismiss();
+  };
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Page</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="modal-trigger">Present Modal</IonButton>
+        <IonModal trigger="modal-trigger" ref={modalEl} enterAnimation={enterAnimation} leaveAnimation={leaveAnimation}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={closeModal}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">Modal Content</IonContent>
+        </IonModal>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/modal-override/vue.md b/static/usage/v7/animations/modal-override/vue.md
new file mode 100644
index 00000000000..82c05ba66e6
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/vue.md
@@ -0,0 +1,90 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="modal-trigger">Present Modal</ion-button>
+    <ion-modal trigger="modal-trigger" ref="modalEl" :enterAnimation="enterAnimation" :leaveAnimation="leaveAnimation">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button @click="closeModal()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding"> Modal Content </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonModal,
+    IonToolbar,
+    IonTitle,
+    createAnimation,
+  } from '@ionic/vue';
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonModal,
+      IonToolbar,
+      IonTitle,
+    },
+    setup() {
+      const modalEl = ref(null);
+
+      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');
+      };
+
+      const closeModal = () => {
+        modalEl.value?.$el.dismiss();
+      };
+
+      return {
+        close,
+        modalEl,
+        closeModal,
+        enterAnimation,
+        leaveAnimation,
+      };
+    },
+  });
+</script>
+```

From 9be822b35aa4dfc39ded5b3db1804d557e8981bc Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 7 Jul 2023 14:08:13 -0400
Subject: [PATCH 411/469] docs(button): include accessibility section with best
 practices for text wrapping (#3008)

---
 docs/api/button.md                            | 18 +++++++++++++++
 docs/reference/glossary.md                    | 12 ++++++++++
 .../usage/v7/button/text-wrapping/angular.md  |  4 ++++
 .../usage/v7/button/text-wrapping/demo.html   | 23 +++++++++++++++++++
 static/usage/v7/button/text-wrapping/index.md |  8 +++++++
 .../v7/button/text-wrapping/javascript.md     |  4 ++++
 static/usage/v7/button/text-wrapping/react.md | 17 ++++++++++++++
 static/usage/v7/button/text-wrapping/vue.md   | 15 ++++++++++++
 8 files changed, 101 insertions(+)
 create mode 100644 static/usage/v7/button/text-wrapping/angular.md
 create mode 100644 static/usage/v7/button/text-wrapping/demo.html
 create mode 100644 static/usage/v7/button/text-wrapping/index.md
 create mode 100644 static/usage/v7/button/text-wrapping/javascript.md
 create mode 100644 static/usage/v7/button/text-wrapping/react.md
 create mode 100644 static/usage/v7/button/text-wrapping/vue.md

diff --git a/docs/api/button.md b/docs/api/button.md
index c538075468d..c103d4c21d2 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -78,6 +78,24 @@ import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.
 
 <CSSProps />
 
+## Accessibility
+
+Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides.
+
+### Overflowing Text Content
+
+There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text.
+
+The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release.
+
+:::info
+The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width.
+:::
+
+import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md';
+
+<TextWrapping />
+
 ## Properties
 <Props />
 
diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md
index 1d70bd176dc..4c86dd95d4c 100644
--- a/docs/reference/glossary.md
+++ b/docs/reference/glossary.md
@@ -12,6 +12,18 @@ title: Glossary
 
 <div id="what-is">
 
+<section id="a11y">
+  <a href="#a11y">
+    <h3>Accessibility</h3>
+  </a>
+  <p>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank">
+      Accessibility
+    </a>{' '}
+    (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows.
+  </p>
+</section>
+
 <section id="android-sdk">
   <a href="#android-sdk">
     <h3>Android SDK</h3>
diff --git a/static/usage/v7/button/text-wrapping/angular.md b/static/usage/v7/button/text-wrapping/angular.md
new file mode 100644
index 00000000000..6f4f27df707
--- /dev/null
+++ b/static/usage/v7/button/text-wrapping/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+```
diff --git a/static/usage/v7/button/text-wrapping/demo.html b/static/usage/v7/button/text-wrapping/demo.html
new file mode 100644
index 00000000000..de02ce9c31d
--- /dev/null
+++ b/static/usage/v7/button/text-wrapping/demo.html
@@ -0,0 +1,23 @@
+<!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@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button>Default</ion-button>
+          <ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/button/text-wrapping/index.md b/static/usage/v7/button/text-wrapping/index.md
new file mode 100644
index 00000000000..7696d798857
--- /dev/null
+++ b/static/usage/v7/button/text-wrapping/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/text-wrapping/demo.html" />
diff --git a/static/usage/v7/button/text-wrapping/javascript.md b/static/usage/v7/button/text-wrapping/javascript.md
new file mode 100644
index 00000000000..6f4f27df707
--- /dev/null
+++ b/static/usage/v7/button/text-wrapping/javascript.md
@@ -0,0 +1,4 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+```
diff --git a/static/usage/v7/button/text-wrapping/react.md b/static/usage/v7/button/text-wrapping/react.md
new file mode 100644
index 00000000000..f0e5fe2ef40
--- /dev/null
+++ b/static/usage/v7/button/text-wrapping/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton>Default</IonButton>
+      <IonButton className="ion-text-wrap" style={{ maxWidth: '400px' }}>
+        This is the button that never ends it just goes on and on and on and on
+        and on and on and on and on my friends
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/text-wrapping/vue.md b/static/usage/v7/button/text-wrapping/vue.md
new file mode 100644
index 00000000000..1af8055c939
--- /dev/null
+++ b/static/usage/v7/button/text-wrapping/vue.md
@@ -0,0 +1,15 @@
+```html
+<template>
+  <ion-button>Default</ion-button>
+  <ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```

From c768b6ed8951fab5f2ccf98be63f4f2a2308c7f4 Mon Sep 17 00:00:00 2001
From: Simo Mafuxwana <simodms@gmail.com>
Date: Fri, 7 Jul 2023 22:58:43 +0200
Subject: [PATCH 412/469] docs(vue): Improve documentation for removing
 Typescript steps in v7 (#3002)

---
 docs/vue/quickstart.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index a5289b589cc..20b8adc86f1 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -45,7 +45,7 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge
 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
+npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
 ```
 
 2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. If you're using tests, also change the extension of files in the `tests` directory.
@@ -62,6 +62,10 @@ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @ty
 
 8. Delete the `tsconfig.json` file.
 
+9. In package.json, change the build script from `"build": "vue-tsc && vite build"` to `"build": "vite build"`
+
+10. Install terser `npm i -D terser`.
+
 ## 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:

From 769c9a4dad9b78f8b2d166da22b1160995cc7b00 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Mon, 10 Jul 2023 10:30:20 -0400
Subject: [PATCH 413/469] feat(playground): add support for generating a new
 playground (#2994)

* Add prompts and generate vue file

* Generate other files

* Use variables in headers

* Add readme

* Add prompt with option to generate css files

* Add version to prompt and modify files accordingly

* Update readme

* Address PR review

* Add hint for component name casing

* Add Angular TS option

* Reformat to use advanced prompting

* Refactor where markdown output comes from

* Remove default value for path; add validation

* Add validation for component name

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
---
 CONTRIBUTING.md                               |   1 +
 _templates/README.md                          |  32 +
 _templates/playground/new/angular.md.ejs.t    |   7 +
 .../angular_example_component_css.md.ejs.t    |   9 +
 .../new/angular_example_component_ts.md.ejs.t |  15 +
 _templates/playground/new/demo.html.ejs.t     |  32 +
 _templates/playground/new/index.js            |  64 ++
 _templates/playground/new/index.md.ejs.t      |  13 +
 .../playground/new/index_with_css.md.ejs.t    |  37 +
 _templates/playground/new/javascript.md.ejs.t |  12 +
 _templates/playground/new/react.md.ejs.t      |  19 +
 .../playground/new/react_main_css.md.ejs.t    |   9 +
 _templates/playground/new/vue.md.ejs.t        |  26 +
 package-lock.json                             | 735 +++++++++++++++++-
 package.json                                  |   2 +
 src/components/global/Playground/README.md    |   4 +
 16 files changed, 1014 insertions(+), 3 deletions(-)
 create mode 100644 _templates/README.md
 create mode 100644 _templates/playground/new/angular.md.ejs.t
 create mode 100644 _templates/playground/new/angular_example_component_css.md.ejs.t
 create mode 100644 _templates/playground/new/angular_example_component_ts.md.ejs.t
 create mode 100644 _templates/playground/new/demo.html.ejs.t
 create mode 100644 _templates/playground/new/index.js
 create mode 100644 _templates/playground/new/index.md.ejs.t
 create mode 100644 _templates/playground/new/index_with_css.md.ejs.t
 create mode 100644 _templates/playground/new/javascript.md.ejs.t
 create mode 100644 _templates/playground/new/react.md.ejs.t
 create mode 100644 _templates/playground/new/react_main_css.md.ejs.t
 create mode 100644 _templates/playground/new/vue.md.ejs.t

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a6470cae5f7..327ea5004e8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -54,6 +54,7 @@ Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The c
     - `components/` - styles split out into the components they target
 - `static/`
   - `demos/` - self-contained demos, optionally presented by pages via `demoUrl` YAML frontmatter
+  - `usage/` - playgrounds that can be created by running `npm run playground:new` [(docs)](_templates/README.md#new-playground-template)
 - `versioned_docs/` - versions of the docs created by the docusaurus versioning command
 - `versioned_sidebars/` - versions of the docs sidebars created by the docusaurus versioning command
 
diff --git a/_templates/README.md b/_templates/README.md
new file mode 100644
index 00000000000..0e91373099f
--- /dev/null
+++ b/_templates/README.md
@@ -0,0 +1,32 @@
+# Hygen templates
+
+The templates in this directory are intended to be used with [hygen](https://www.hygen.io/) to generate boilerplate files. Check out [the root package.json](../package.json) to see if there are any custom commands to use them (e.g. `npm run playground:new`). You can also run e.g. `hygen playground new` to use a generator.
+
+Some helpful docs links for updating/creating templates:
+
+- [enquirer](https://github.com/enquirer/enquirer#toggle-prompt) for building command line prompts
+- [inflection](https://www.hygen.io/docs/templates#helpers-and-inflections) and [change case](https://www.hygen.io/docs/templates#change-case-helpers) for e.g. changing the case of variables submitted via the prompts
+
+# New playground template
+
+## Generation
+
+To create a new playground, run `npm run playground:new`. This will walk you through some prompts to decide what files for the generator to create for the playground, and what their paths should be.
+
+The path defaults to `basic`. If there is already a basic playground, you'll want to input a different path for the playground.
+
+The CSS option will add extra files if you need to include custom CSS in your playground.
+
+If you need a component for multiple versions of Ionic Framework, you (currently) need to run the generator once for each version.
+
+## Usage
+
+Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.md)) by doing something similar to the following example:
+
+```
+## Feature
+
+import Feature from '@site/static/usage/v7/button/feature/index.md';
+
+<Feature />
+```
diff --git a/_templates/playground/new/angular.md.ejs.t b/_templates/playground/new/angular.md.ejs.t
new file mode 100644
index 00000000000..ab2bc1a81d7
--- /dev/null
+++ b/_templates/playground/new/angular.md.ejs.t
@@ -0,0 +1,7 @@
+---
+# this file's location depends on whether or not the css option or angular_ts option is selected via the prompt
+to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
+---
+```html
+<<%= name %>></<%= name %>>
+```
diff --git a/_templates/playground/new/angular_example_component_css.md.ejs.t b/_templates/playground/new/angular_example_component_css.md.ejs.t
new file mode 100644
index 00000000000..233d88bd9d0
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_css.md.ejs.t
@@ -0,0 +1,9 @@
+---
+# this file only gets generated if `css` (from the command line prompt) is true
+to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_css.md` : null %>"
+---
+```css
+<%= name %> {
+  /* styles go here */
+}
+```
diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
new file mode 100644
index 00000000000..4fba3916f7a
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -0,0 +1,15 @@
+---
+# this file only gets generated if `angular_ts` (from the command line prompt) is true
+to: "<%= angular_ts ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_ts.md` : null %>"
+---
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',<% if (css){ %>
+  styleUrls: ['./example.component.css'],<% } %>
+})
+export class ExampleComponent {
+}
+```
diff --git a/_templates/playground/new/demo.html.ejs.t b/_templates/playground/new/demo.html.ejs.t
new file mode 100644
index 00000000000..b8ea2dff630
--- /dev/null
+++ b/_templates/playground/new/demo.html.ejs.t
@@ -0,0 +1,32 @@
+---
+arbitrary: <% nameWithoutIon = name.replace('ion-', ''); numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
+to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= h.changeCase.titleCase(nameWithoutIon) %></title>
+    <link rel="stylesheet" href="<%= directoryChanges %>../../../common.css" />
+    <script src="<%= directoryChanges %>../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/css/ionic.bundle.css" /><% if (css){ %>
+
+    <style>
+      <%= name %> {
+        /* styles go here */
+      }
+    </style><% } %>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <<%= name %>></<%= name %>>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
new file mode 100644
index 00000000000..91d3acf0134
--- /dev/null
+++ b/_templates/playground/new/index.js
@@ -0,0 +1,64 @@
+const changeCase = require('change-case');
+
+// see types of prompts:
+// https://github.com/enquirer/enquirer/tree/master/examples
+//
+module.exports = {
+  prompt: ({ inquirer }) => {
+    const questions = [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Which component is this playground for?',
+        initial: 'ion-button',
+        validate(value) {
+          return value.match(/^ion-[a-z/-]*[a-z]+$/) ? true : "Component name must be kebab-case and begin with 'ion-'";
+        },
+      },
+      {
+        type: 'input',
+        name: 'path',
+        message: 'What should the playground path be?',
+        hint: 'e.g. `basic` or `theming/colors`',
+        validate(value) {
+          return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
+            ? true
+            : "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
+        },
+      },
+      {
+        type: 'select',
+        name: 'version',
+        message: 'Select the Ionic Framework version for the playground',
+        initial: '7',
+        choices: ['6', '7'],
+      },
+      {
+        type: 'toggle',
+        name: 'css',
+        message: 'Generate custom CSS files?',
+        enabled: 'Yes',
+        disabled: 'No',
+      },
+      {
+        type: 'toggle',
+        name: 'angular_ts',
+        message: 'Generate an Angular TypeScript file?',
+        enabled: 'Yes',
+        disabled: 'No',
+      },
+    ];
+
+    return inquirer.prompt(questions).then((answers) => {
+      const componentName = changeCase.pascal(answers.path.split('/').pop());
+      console.log(
+        `\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
+          'ion-',
+          ''
+        )}/${answers.path}/index.md';\n\n<${componentName} />\n`
+      );
+
+      return answers;
+    });
+  },
+};
diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t
new file mode 100644
index 00000000000..dbba97e762b
--- /dev/null
+++ b/_templates/playground/new/index.md.ejs.t
@@ -0,0 +1,13 @@
+---
+arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
+# this template is only used if `css` (from the command line prompt) is false
+to: "<%= css ? null : `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>"
+---
+import Playground from '@site/src/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="<%= version %>" code={{ javascript, react, vue, angular }} src="<%= `usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>" />
diff --git a/_templates/playground/new/index_with_css.md.ejs.t b/_templates/playground/new/index_with_css.md.ejs.t
new file mode 100644
index 00000000000..8f403ea6d85
--- /dev/null
+++ b/_templates/playground/new/index_with_css.md.ejs.t
@@ -0,0 +1,37 @@
+---
+arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
+# this template is only used if `css` (from the command line prompt) is true
+to: "<%= css ? `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` : null %>"
+---
+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="<%= version %>"
+  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/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
+/>
diff --git a/_templates/playground/new/javascript.md.ejs.t b/_templates/playground/new/javascript.md.ejs.t
new file mode 100644
index 00000000000..a011e678ad5
--- /dev/null
+++ b/_templates/playground/new/javascript.md.ejs.t
@@ -0,0 +1,12 @@
+---
+to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/javascript.md` %>"
+---
+```html
+<<%= name %>></<%= name %>><% if (css){ %>
+
+<style>
+  <%= name %> {
+    /* styles go here */
+  }
+</style><% } %>
+```
diff --git a/_templates/playground/new/react.md.ejs.t b/_templates/playground/new/react.md.ejs.t
new file mode 100644
index 00000000000..b446e39db5a
--- /dev/null
+++ b/_templates/playground/new/react.md.ejs.t
@@ -0,0 +1,19 @@
+---
+arbitrary: <% pascalName = h.changeCase.pascal(name) %>
+# this file's location depends on whether or not the css option is selected via the prompt
+to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${css ? 'react/main_tsx.md' : 'react.md'}` %>"
+---
+```tsx
+import React from 'react';
+import { <%= pascalName %> } from '@ionic/react';<% if (css){ %>
+
+import './main.css';<% } %>
+
+function Example() {
+  return (
+    <<%= pascalName %>></<%= pascalName %>>
+  );
+}
+export default Example;
+```
+
diff --git a/_templates/playground/new/react_main_css.md.ejs.t b/_templates/playground/new/react_main_css.md.ejs.t
new file mode 100644
index 00000000000..595e6eaef12
--- /dev/null
+++ b/_templates/playground/new/react_main_css.md.ejs.t
@@ -0,0 +1,9 @@
+---
+# this file only gets generated if `css` (from the command line prompt) is true
+to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/react/main_css.md` : null %>"
+---
+```css
+<%= name %> {
+  /* styles go here */
+}
+```
diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t
new file mode 100644
index 00000000000..73a5ffde7e1
--- /dev/null
+++ b/_templates/playground/new/vue.md.ejs.t
@@ -0,0 +1,26 @@
+---
+arbitrary: <% pascalName = h.changeCase.pascal(name) %>
+to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/vue.md` %>"
+---
+```html
+<template>
+  <<%= name %>></<%= name %>>
+</template>
+
+<script lang="ts">
+  import { <%= pascalName %> } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      <%= pascalName %>,
+    },
+  });
+</script><% if (css){ %>
+
+<style scoped>
+  <%= name %> {
+    /* styles go here */
+  }
+</style><% } %>
+```
diff --git a/package-lock.json b/package-lock.json
index 7c9c3ebf642..ca4fece301a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "@tsconfig/docusaurus": "^1.0.4",
         "@types/react": "^17.0.37",
         "html-loader": "^3.1.0",
+        "hygen": "^6.2.11",
         "prettier": "^2.8.8",
         "typescript": "^4.5.2"
       }
@@ -3621,6 +3622,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "license": "MIT",
@@ -3872,6 +3882,26 @@
       "version": "1.0.0",
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "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/batch": {
       "version": "0.6.1",
       "license": "MIT"
@@ -3890,6 +3920,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "license": "MIT"
@@ -4096,6 +4137,30 @@
         "node": ">=4"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "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": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "license": "MIT"
@@ -4423,6 +4488,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
+      "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/clone": {
       "version": "2.1.2",
       "license": "MIT",
@@ -5271,8 +5360,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.1",
-      "license": "MIT",
+      "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"
       },
@@ -5334,6 +5424,27 @@
         "node": ">= 10"
       }
     },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/defaults/node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/defer-to-connect": {
       "version": "1.1.3",
       "license": "MIT"
@@ -5355,6 +5466,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/degit": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/degit/-/degit-2.8.4.tgz",
+      "integrity": "sha512-vqYuzmSA5I50J882jd+AbAhQtgK6bdKUJIex1JNfEUPENCgYsxugzKVZlFyMwV4i06MmnV47/Iqi5Io86zf3Ng==",
+      "dev": true,
+      "bin": {
+        "degit": "degit"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/del": {
       "version": "6.0.0",
       "license": "MIT",
@@ -5580,6 +5703,21 @@
       "version": "1.1.1",
       "license": "MIT"
     },
+    "node_modules/ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dev": true,
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.3.894",
       "license": "ISC"
@@ -5624,6 +5762,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/entities": {
       "version": "1.1.2",
       "license": "BSD-2-Clause"
@@ -6040,6 +6190,36 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "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==",
+      "dev": true,
+      "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==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/filesize": {
       "version": "6.4.0",
       "license": "BSD-3-Clause",
@@ -6239,6 +6419,37 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/front-matter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
+      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
+      "dev": true,
+      "dependencies": {
+        "js-yaml": "^3.13.1"
+      }
+    },
+    "node_modules/front-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/front-matter/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==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "license": "MIT",
@@ -6949,6 +7160,51 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hygen": {
+      "version": "6.2.11",
+      "resolved": "https://registry.npmjs.org/hygen/-/hygen-6.2.11.tgz",
+      "integrity": "sha512-t6/zLI2XozP5gvV74nnl8LZSbwpVNFUkUs/O9DwuOdiiBbws5k4AQNVwKZ9FGzcKjdJ5EBBYkVzlcUHkLyY0FQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "^17.0.19",
+        "chalk": "^4.1.2",
+        "change-case": "^3.1.0",
+        "debug": "^4.3.3",
+        "degit": "^2.8.4",
+        "ejs": "^3.1.6",
+        "enquirer": "^2.3.6",
+        "execa": "^5.0.0",
+        "front-matter": "^4.0.2",
+        "fs-extra": "^10.0.0",
+        "ignore-walk": "^4.0.1",
+        "inflection": "^1.12.0",
+        "ora": "^5.0.0",
+        "yargs-parser": "^21.0.0"
+      },
+      "bin": {
+        "hygen": "dist/bin.js"
+      }
+    },
+    "node_modules/hygen/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+      "dev": true
+    },
+    "node_modules/hygen/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==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "license": "MIT",
@@ -6969,6 +7225,26 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "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/ignore": {
       "version": "5.1.8",
       "license": "MIT",
@@ -6976,6 +7252,18 @@
         "node": ">= 4"
       }
     },
+    "node_modules/ignore-walk": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-4.0.1.tgz",
+      "integrity": "sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw==",
+      "dev": true,
+      "dependencies": {
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/imgix-url-builder": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/imgix-url-builder/-/imgix-url-builder-0.0.3.tgz",
@@ -7038,6 +7326,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/inflection": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.4.tgz",
+      "integrity": "sha512-6I/HUDeYFfuNCVS3td055BaXBwKYuzw7K3ExVMStBowKo9oOAMJIXIHvdyR3iboTCp1b+1i5DSkIZTcwIktuDw==",
+      "dev": true,
+      "engines": [
+        "node >= 0.4.0"
+      ]
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "license": "ISC",
@@ -7320,6 +7617,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-invalid-path": {
       "version": "0.1.0",
       "license": "MIT",
@@ -7512,6 +7818,18 @@
       "version": "1.0.0",
       "license": "MIT"
     },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-upper-case": {
       "version": "1.1.2",
       "license": "MIT",
@@ -7574,6 +7892,42 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jake/node_modules/async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+      "dev": true
+    },
+    "node_modules/jake/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "27.0.6",
       "license": "MIT",
@@ -7857,6 +8211,22 @@
       "version": "4.5.0",
       "license": "MIT"
     },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "license": "MIT",
@@ -8474,6 +8844,29 @@
         "opener": "bin/opener-bin.js"
       }
     },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/p-cancelable": {
       "version": "1.1.0",
       "license": "MIT",
@@ -10593,6 +10986,19 @@
         "lowercase-keys": "^1.0.0"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/retry": {
       "version": "0.13.1",
       "license": "MIT",
@@ -12368,6 +12774,15 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
     "node_modules/web-namespaces": {
       "version": "1.1.4",
       "license": "MIT",
@@ -12836,6 +13251,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "license": "MIT",
@@ -15161,6 +15585,12 @@
         }
       }
     },
+    "ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true
+    },
     "ansi-escapes": {
       "version": "4.3.2",
       "requires": {
@@ -15308,6 +15738,12 @@
     "base16": {
       "version": "1.0.0"
     },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
     "batch": {
       "version": "0.6.1"
     },
@@ -15317,6 +15753,17 @@
     "binary-extensions": {
       "version": "2.2.0"
     },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2"
     },
@@ -15454,6 +15901,16 @@
         }
       }
     },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "buffer-from": {
       "version": "1.1.2"
     },
@@ -15663,6 +16120,21 @@
     "cli-boxes": {
       "version": "2.2.1"
     },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-spinners": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
+      "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
+      "dev": true
+    },
     "clone": {
       "version": "2.1.2"
     },
@@ -16184,7 +16656,9 @@
       "version": "2.22.1"
     },
     "debug": {
-      "version": "4.3.1",
+      "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"
       }
@@ -16218,6 +16692,23 @@
         "execa": "^5.0.0"
       }
     },
+    "defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+          "dev": true
+        }
+      }
+    },
     "defer-to-connect": {
       "version": "1.1.3"
     },
@@ -16230,6 +16721,12 @@
         "object-keys": "^1.0.12"
       }
     },
+    "degit": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/degit/-/degit-2.8.4.tgz",
+      "integrity": "sha512-vqYuzmSA5I50J882jd+AbAhQtgK6bdKUJIex1JNfEUPENCgYsxugzKVZlFyMwV4i06MmnV47/Iqi5Io86zf3Ng==",
+      "dev": true
+    },
     "del": {
       "version": "6.0.0",
       "requires": {
@@ -16387,6 +16884,15 @@
     "ee-first": {
       "version": "1.1.1"
     },
+    "ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dev": true,
+      "requires": {
+        "jake": "^10.8.5"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.894"
     },
@@ -16412,6 +16918,15 @@
         "tapable": "^2.2.0"
       }
     },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      }
+    },
     "entities": {
       "version": "1.1.2"
     },
@@ -16683,6 +17198,35 @@
         }
       }
     },
+    "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==",
+      "dev": true,
+      "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==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "filesize": {
       "version": "6.4.0"
     },
@@ -16791,6 +17335,36 @@
     "fresh": {
       "version": "0.5.2"
     },
+    "front-matter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
+      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+          "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+          "dev": true,
+          "requires": {
+            "sprintf-js": "~1.0.2"
+          }
+        },
+        "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==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        }
+      }
+    },
     "fs-extra": {
       "version": "9.1.0",
       "requires": {
@@ -17251,6 +17825,47 @@
     "human-signals": {
       "version": "2.1.0"
     },
+    "hygen": {
+      "version": "6.2.11",
+      "resolved": "https://registry.npmjs.org/hygen/-/hygen-6.2.11.tgz",
+      "integrity": "sha512-t6/zLI2XozP5gvV74nnl8LZSbwpVNFUkUs/O9DwuOdiiBbws5k4AQNVwKZ9FGzcKjdJ5EBBYkVzlcUHkLyY0FQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "^17.0.19",
+        "chalk": "^4.1.2",
+        "change-case": "^3.1.0",
+        "debug": "^4.3.3",
+        "degit": "^2.8.4",
+        "ejs": "^3.1.6",
+        "enquirer": "^2.3.6",
+        "execa": "^5.0.0",
+        "front-matter": "^4.0.2",
+        "fs-extra": "^10.0.0",
+        "ignore-walk": "^4.0.1",
+        "inflection": "^1.12.0",
+        "ora": "^5.0.0",
+        "yargs-parser": "^21.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "17.0.45",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+          "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+          "dev": true
+        },
+        "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==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        }
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "requires": {
@@ -17260,9 +17875,24 @@
     "icss-utils": {
       "version": "5.1.0"
     },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
     "ignore": {
       "version": "5.1.8"
     },
+    "ignore-walk": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-4.0.1.tgz",
+      "integrity": "sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
     "imgix-url-builder": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/imgix-url-builder/-/imgix-url-builder-0.0.3.tgz",
@@ -17293,6 +17923,12 @@
     "infima": {
       "version": "0.2.0-alpha.34"
     },
+    "inflection": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.4.tgz",
+      "integrity": "sha512-6I/HUDeYFfuNCVS3td055BaXBwKYuzw7K3ExVMStBowKo9oOAMJIXIHvdyR3iboTCp1b+1i5DSkIZTcwIktuDw==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "requires": {
@@ -17430,6 +18066,12 @@
         "is-path-inside": "^3.0.2"
       }
     },
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true
+    },
     "is-invalid-path": {
       "version": "0.1.0",
       "requires": {
@@ -17525,6 +18167,12 @@
     "is-typedarray": {
       "version": "1.0.0"
     },
+    "is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true
+    },
     "is-upper-case": {
       "version": "1.1.2",
       "requires": {
@@ -17561,6 +18209,35 @@
     "isobject": {
       "version": "3.0.1"
     },
+    "jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "dependencies": {
+        "async": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
     "jest-worker": {
       "version": "27.0.6",
       "requires": {
@@ -17746,6 +18423,16 @@
     "lodash.uniq": {
       "version": "4.5.0"
     },
+    "log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      }
+    },
     "loose-envify": {
       "version": "1.4.0",
       "requires": {
@@ -18106,6 +18793,23 @@
     "opener": {
       "version": "1.5.2"
     },
+    "ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      }
+    },
     "p-cancelable": {
       "version": "1.1.0"
     },
@@ -19370,6 +20074,16 @@
         "lowercase-keys": "^1.0.0"
       }
     },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
     "retry": {
       "version": "0.13.1"
     },
@@ -20466,6 +21180,15 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
     "web-namespaces": {
       "version": "1.1.4"
     },
@@ -20728,6 +21451,12 @@
     "yaml": {
       "version": "1.10.2"
     },
+    "yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true
+    },
     "yocto-queue": {
       "version": "0.1.0"
     },
diff --git a/package.json b/package.json
index 513184bb3b0..b0695fe21ba 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "generate-markdown": "node scripts/native && concurrently \"node scripts/cli\" \"node scripts/release-notes\"",
     "lint": "npm run prettier -- --write --cache",
     "serve": "docusaurus serve",
+    "playground:new": "hygen playground new",
     "prestart": "npm run generate-markdown",
     "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md}\"",
     "start": "docusaurus start",
@@ -71,6 +72,7 @@
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/react": "^17.0.37",
     "html-loader": "^3.1.0",
+    "hygen": "^6.2.11",
     "prettier": "^2.8.8",
     "typescript": "^4.5.2"
   },
diff --git a/src/components/global/Playground/README.md b/src/components/global/Playground/README.md
index 8f89a5d4719..92e9b9fa3c2 100644
--- a/src/components/global/Playground/README.md
+++ b/src/components/global/Playground/README.md
@@ -48,6 +48,10 @@ import javascript from './javascript.md';
 
 The file location is respective to the Stackblitz demo project. If you are unsure of the exact path, refer to the `stackblitz.utils.ts` method for each respective target. The path specified in `sdk.openProject` will coincide with the value used in the `files` configuration.
 
+## Creating a New Playground
+
+You can [generate a new playground](../../../../_templates/README.md#new-playground-template) by running `npm run playground:new`.
+
 ## Ejecting from IonApp/IonContent Boilerplate
 
 By default, Playground examples will automatically include the following template wrapper for each component example when opened in Stackblitz.

From 337e869cca829c7c0cad120f32d52e8fcb74dd19 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 10 Jul 2023 11:39:31 -0400
Subject: [PATCH 414/469] chore: enable renovate for component playground deps
 (#3016)

---
 renovate.json | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 renovate.json

diff --git a/renovate.json b/renovate.json
new file mode 100644
index 00000000000..34e05ba8d9a
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base", ":github>ionic-team/ionic-docs>"],
+  "packageRules": [
+    {
+      "matchPackagePatterns": ["^@ionic/"],
+      "groupName": "ionic",
+      "schedule": ["every thursday before 11am"]
+    },
+    {
+      "matchPackagePatterns": ["^@angular/"],
+      "groupName": "angular"
+    }
+  ],
+  "dependencyDashboard": true,
+  "minimumReleaseAge": "3 days",
+  "rebaseWhen": "never",
+  "schedule": ["every weekday before 11am"],
+  "semanticCommits": "enabled",
+  "ignorePaths": ["./package.json", "./package-lock.json", "./docusaurus-theme-classic"]
+}

From 6b2f6ed76fa4637a07a150031b50dba21da745ae Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:10:11 -0400
Subject: [PATCH 415/469] Configure Renovate (#3017)

* Add renovate.json

* chore: remove invalid setting

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
---
 renovate.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/renovate.json b/renovate.json
index 34e05ba8d9a..3c4056c025d 100644
--- a/renovate.json
+++ b/renovate.json
@@ -4,8 +4,7 @@
   "packageRules": [
     {
       "matchPackagePatterns": ["^@ionic/"],
-      "groupName": "ionic",
-      "schedule": ["every thursday before 11am"]
+      "groupName": "ionic"
     },
     {
       "matchPackagePatterns": ["^@angular/"],

From af69fb0d975f8d8ca4da9c2843c9a62dd4d3d37e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:20:43 -0400
Subject: [PATCH 416/469] docs(modal): clarify swipe to close section (#3021)

---
 docs/api/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/modal.md b/docs/api/modal.md
index 847b49b460e..c0eb448318a 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -81,7 +81,7 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f
 
 ### Prevent swipe to close
 
-Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`.
+Developers may want to prevent users from swiping to close a card or sheet modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`.
 
 import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md';
 

From 9c06dc2b967af1cbc60748ba18ccd46a68f41c98 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 17:07:46 -0400
Subject: [PATCH 417/469] docs(react): clarify IonTabs behavior with IonPage
 (#3012)

---
 docs/react/navigation.md | 70 +++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index e54acf220db..d85676786cc 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -419,7 +419,7 @@ Let's start by taking a look at our `Tabs` component:
 
 ```tsx
 import { Redirect, Route } from 'react-router-dom';
-import { IonPage, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { 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';
@@ -427,39 +427,37 @@ import Tab2 from './pages/Tab2';
 import Tab3 from './pages/Tab3';
 
 const Tabs: React.FC = () => (
-  <IonPage>
-    <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>
-  </IonPage>
+  <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>
 );
 
 export default Tabs;
@@ -467,6 +465,10 @@ 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.
 
+:::tip
+`IonTabs` renders an `IonPage` for you, so you do not need to add `IonPage` manually here.
+:::
+
 ### 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).

From 15817f45c28229c661ce208fdda852a8cf6b6640 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 11 Jul 2023 10:33:01 -0400
Subject: [PATCH 418/469] chore(renovate): remove extending docs config (#3027)

---
 renovate.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/renovate.json b/renovate.json
index 3c4056c025d..595ec312b3d 100644
--- a/renovate.json
+++ b/renovate.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base", ":github>ionic-team/ionic-docs>"],
+  "extends": ["config:base"],
   "packageRules": [
     {
       "matchPackagePatterns": ["^@ionic/"],

From 2c7303e2dcaa8a35a80ee662530901bd0717e8d2 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 11 Jul 2023 10:54:38 -0400
Subject: [PATCH 419/469] docs(animation): add playground for group example
 (#3025)

---
 docs/utilities/animations.md                  | 203 +-----------------
 .../group/angular/example_component_html.md   |  17 ++
 .../group/angular/example_component_ts.md     |  66 ++++++
 static/usage/v7/animations/group/demo.html    |  87 ++++++++
 static/usage/v7/animations/group/index.md     |  25 +++
 .../usage/v7/animations/group/javascript.md   |  46 ++++
 static/usage/v7/animations/group/react.md     |  81 +++++++
 static/usage/v7/animations/group/vue.md       |  83 +++++++
 8 files changed, 408 insertions(+), 200 deletions(-)
 create mode 100644 static/usage/v7/animations/group/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/group/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/group/demo.html
 create mode 100644 static/usage/v7/animations/group/index.md
 create mode 100644 static/usage/v7/animations/group/javascript.md
 create mode 100644 static/usage/v7/animations/group/react.md
 create mode 100644 static/usage/v7/animations/group/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index d53bfbca0e5..0a1e49c5fba 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -316,208 +316,11 @@ Each keyframe object contains an `offset` property. `offset` is a value between
 
 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 `cardA` and `cardB` inherit the parent animation's duration of 2000ms, but animation `cardC` has a duration of 5000ms since it was explicitly set.
 
-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.
+import Group from '@site/static/usage/v7/animations/group/index.md';
 
-<Codepen user="ionic" slug="oNvdogM" height="460" />
+<Group />
 
 ## Before and After Hooks
 
diff --git a/static/usage/v7/animations/group/angular/example_component_html.md b/static/usage/v7/animations/group/angular/example_component_html.md
new file mode 100644
index 00000000000..bb61611b10c
--- /dev/null
+++ b/static/usage/v7/animations/group/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-card>
+  <ion-card-content>Card 1</ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-card-content>Card 3</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md
new file mode 100644
index 00000000000..63f7a7b2f7a
--- /dev/null
+++ b/static/usage/v7/animations/group/angular/example_component_ts.md
@@ -0,0 +1,66 @@
+```ts
+import { Component, ElementRef, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    const cardA = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(0).nativeElement)
+      .keyframes([
+        { offset: 0, transform: 'scale(1) rotate(0)' },
+        { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+        { offset: 1, transform: 'scale(1) rotate(0) ' },
+      ]);
+
+    const cardB = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(1).nativeElement)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '1' },
+        { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+        { offset: 1, transform: 'scale(1)', opacity: '1' },
+      ]);
+
+    const cardC = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(2).nativeElement)
+      .duration(5000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+        { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+        { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+      ]);
+
+    this.animation = this.animationCtrl
+      .create()
+      .duration(2000)
+      .iterations(Infinity)
+      .addAnimation([cardA, cardB, cardC]);
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/group/demo.html b/static/usage/v7/animations/group/demo.html
new file mode 100644
index 00000000000..36a7b847c5d
--- /dev/null
+++ b/static/usage/v7/animations/group/demo.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const cardA = createAnimation()
+        .addElement(document.querySelector('#card-a'))
+        .keyframes([
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0) ' },
+        ]);
+
+      const cardB = createAnimation()
+        .addElement(document.querySelector('#card-b'))
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' },
+        ]);
+
+      const cardC = createAnimation()
+        .addElement(document.querySelector('#card-c'))
+        .duration(5000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+        ]);
+
+      const animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card-a">
+        <ion-card-content>Card 1</ion-card-content>
+      </ion-card>
+
+      <ion-card id="card-b">
+        <ion-card-content>Card 2</ion-card-content>
+      </ion-card>
+
+      <ion-card id="card-c">
+        <ion-card-content>Card 3</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/group/index.md b/static/usage/v7/animations/group/index.md
new file mode 100644
index 00000000000..5d312219efa
--- /dev/null
+++ b/static/usage/v7/animations/group/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/animations/group/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
new file mode 100644
index 00000000000..d6f671660e2
--- /dev/null
+++ b/static/usage/v7/animations/group/javascript.md
@@ -0,0 +1,46 @@
+```html
+<ion-card id="card-a">
+  <ion-card-content>Card 1</ion-card-content>
+</ion-card>
+
+<ion-card id="card-b">
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-card id="card-c">
+  <ion-card-content>Card 3</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="animation.play()">Play</ion-button>
+<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
+<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  const cardA = createAnimation()
+    .addElement(document.querySelector('#card-a'))
+    .keyframes([
+      { offset: 0, transform: 'scale(1) rotate(0)' },
+      { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+      { offset: 1, transform: 'scale(1) rotate(0) ' },
+    ]);
+
+  const cardB = createAnimation()
+    .addElement(document.querySelector('#card-b'))
+    .keyframes([
+      { offset: 0, transform: 'scale(1)', opacity: '1' },
+      { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+      { offset: 1, transform: 'scale(1)', opacity: '1' },
+    ]);
+
+  const cardC = createAnimation()
+    .addElement(document.querySelector('#card-c'))
+    .duration(5000)
+    .keyframes([
+      { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+      { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+      { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+    ]);
+
+  var animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
+</script>
+```
diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md
new file mode 100644
index 00000000000..23b00bbee74
--- /dev/null
+++ b/static/usage/v7/animations/group/react.md
@@ -0,0 +1,81 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardAEl = useRef<HTMLIonCardElement | null>(null);
+  const cardBEl = useRef<HTMLIonCardElement | null>(null);
+  const cardCEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      const cardA = createAnimation()
+        .addElement(cardAEl.current!)
+        .keyframes([
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0) ' },
+        ]);
+
+      const cardB = createAnimation()
+        .addElement(cardBEl.current!)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' },
+        ]);
+
+      const cardC = createAnimation()
+        .addElement(cardCEl.current!)
+        .duration(5000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+        ]);
+
+      animation.current = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
+    }
+  }, [cardAEl, cardBEl, cardCEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardAEl}>
+        <IonCardContent>Card 1</IonCardContent>
+      </IonCard>
+
+      <IonCard ref={cardBEl}>
+        <IonCardContent>Card 2</IonCardContent>
+      </IonCard>
+
+      <IonCard ref={cardCEl}>
+        <IonCardContent>Card 3</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md
new file mode 100644
index 00000000000..4302f414bb6
--- /dev/null
+++ b/static/usage/v7/animations/group/vue.md
@@ -0,0 +1,83 @@
+```html
+<template>
+  <ion-card ref="cardAEl">
+    <ion-card-content>Card 1</ion-card-content>
+  </ion-card>
+
+  <ion-card ref="cardBEl">
+    <ion-card-content>Card 2</ion-card-content>
+  </ion-card>
+
+  <ion-card ref="cardCEl">
+    <ion-card-content>Card 3</ion-card-content>
+  </ion-card>
+
+  <ion-button id="play" @click="play()">Play</ion-button>
+  <ion-button id="pause" @click="pause()">Pause</ion-button>
+  <ion-button id="stop" @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardAEl = ref(null);
+      const cardBEl = ref(null);
+      const cardCEl = ref(null);
+
+      let animation: Animation;
+
+      onMounted(() => {
+        const cardA = createAnimation()
+          .addElement(cardAEl.value.$el)
+          .keyframes([
+            { offset: 0, transform: 'scale(1) rotate(0)' },
+            { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+            { offset: 1, transform: 'scale(1) rotate(0) ' },
+          ]);
+
+        const cardB = createAnimation()
+          .addElement(cardBEl.value.$el)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '1' },
+            { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+            { offset: 1, transform: 'scale(1)', opacity: '1' },
+          ]);
+
+        const cardC = createAnimation()
+          .addElement(cardCEl.value.$el)
+          .duration(5000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+            { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+            { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+          ]);
+
+        animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardAEl,
+        cardBEl,
+        cardCEl,
+      };
+    },
+  });
+</script>
+```

From 4face1f9ad830db7771ca1c4e36f83511517801f Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 11 Jul 2023 11:58:44 -0400
Subject: [PATCH 420/469] docs(animations): add playground for chained
 animations (#3026)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/animations.md                  | 208 +-----------------
 .../chain/angular/example_component_html.md   |  17 ++
 .../chain/angular/example_component_ts.md     |  73 ++++++
 static/usage/v7/animations/chain/demo.html    |  96 ++++++++
 static/usage/v7/animations/chain/index.md     |  25 +++
 .../usage/v7/animations/chain/javascript.md   |  67 ++++++
 static/usage/v7/animations/chain/react.md     |  95 ++++++++
 static/usage/v7/animations/chain/vue.md       | 100 +++++++++
 8 files changed, 475 insertions(+), 206 deletions(-)
 create mode 100644 static/usage/v7/animations/chain/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/chain/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/chain/demo.html
 create mode 100644 static/usage/v7/animations/chain/index.md
 create mode 100644 static/usage/v7/animations/chain/javascript.md
 create mode 100644 static/usage/v7/animations/chain/react.md
 create mode 100644 static/usage/v7/animations/chain/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 0a1e49c5fba..3ebcddb2835 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -443,213 +443,9 @@ See [Methods](#methods) for a complete list of hooks.
 
 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>
-````
+import Chain from '@site/static/usage/v7/animations/chain/index.md';
 
-<Codepen user="ionic" slug="MWgGrwX" height="460" />
+<Chain />
 
 ## Gesture Animations
 
diff --git a/static/usage/v7/animations/chain/angular/example_component_html.md b/static/usage/v7/animations/chain/angular/example_component_html.md
new file mode 100644
index 00000000000..bb61611b10c
--- /dev/null
+++ b/static/usage/v7/animations/chain/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-card>
+  <ion-card-content>Card 1</ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-card-content>Card 3</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md
new file mode 100644
index 00000000000..6c6acbef993
--- /dev/null
+++ b/static/usage/v7/animations/chain/angular/example_component_ts.md
@@ -0,0 +1,73 @@
+```ts
+import { Component, ElementRef, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+
+  private cardA: Animation;
+  private cardB: Animation;
+  private cardC: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.cardA = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(0).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)' },
+      ]);
+
+    this.cardB = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(1).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' },
+      ]);
+
+    this.cardC = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(2).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' },
+      ]);
+  }
+
+  async play() {
+    await this.cardA.play();
+    await this.cardB.play();
+    await this.cardC.play();
+  }
+
+  pause() {
+    this.cardA.pause();
+    this.cardB.pause();
+    this.cardC.pause();
+  }
+
+  stop() {
+    this.cardA.stop();
+    this.cardB.stop();
+    this.cardC.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/chain/demo.html b/static/usage/v7/animations/chain/demo.html
new file mode 100644
index 00000000000..a16169156ff
--- /dev/null
+++ b/static/usage/v7/animations/chain/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>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const cardA = createAnimation()
+        .addElement(document.querySelector('#card-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 cardB = createAnimation()
+        .addElement(document.querySelector('#card-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 cardC = createAnimation()
+        .addElement(document.querySelector('#card-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' },
+        ]);
+
+      document.querySelector('#play').addEventListener('click', async () => {
+        await cardA.play();
+        await cardB.play();
+        await cardC.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        cardA.pause();
+        cardB.pause();
+        cardC.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        cardA.stop();
+        cardB.stop();
+        cardC.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card-a">
+        <ion-card-content>Card 1</ion-card-content>
+      </ion-card>
+
+      <ion-card id="card-b">
+        <ion-card-content>Card 2</ion-card-content>
+      </ion-card>
+
+      <ion-card id="card-c">
+        <ion-card-content>Card 3</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/chain/index.md b/static/usage/v7/animations/chain/index.md
new file mode 100644
index 00000000000..58d8c2c888b
--- /dev/null
+++ b/static/usage/v7/animations/chain/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/animations/chain/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/chain/javascript.md b/static/usage/v7/animations/chain/javascript.md
new file mode 100644
index 00000000000..26011045834
--- /dev/null
+++ b/static/usage/v7/animations/chain/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-card id="card-a">
+  <ion-card-content>Card 1</ion-card-content>
+</ion-card>
+
+<ion-card id="card-b">
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-card id="card-c">
+  <ion-card-content>Card 3</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="play()">Play</ion-button>
+<ion-button id="pause" onclick="pause()">Pause</ion-button>
+<ion-button id="stop" onclick="stop()">Stop</ion-button>
+
+<script>
+  const cardA = createAnimation()
+    .addElement(document.querySelector('#card-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 cardB = createAnimation()
+    .addElement(document.querySelector('#card-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 cardC = createAnimation()
+    .addElement(document.querySelector('#card-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' },
+    ]);
+
+  async function play() {
+    await cardA.play();
+    await cardB.play();
+    await cardC.play();
+  }
+
+  function pause() {
+    cardA.pause();
+    cardB.pause();
+    cardC.pause();
+  }
+
+  function stop() {
+    cardA.stop();
+    cardB.stop();
+    cardC.stop();
+  }
+</script>
+```
diff --git a/static/usage/v7/animations/chain/react.md b/static/usage/v7/animations/chain/react.md
new file mode 100644
index 00000000000..b559f038d7b
--- /dev/null
+++ b/static/usage/v7/animations/chain/react.md
@@ -0,0 +1,95 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardAEl = useRef<HTMLIonCardElement | null>(null);
+  const cardBEl = useRef<HTMLIonCardElement | null>(null);
+  const cardCEl = useRef<HTMLIonCardElement | null>(null);
+
+  const cardA = useRef<Animation>();
+  const cardB = useRef<Animation>();
+  const cardC = useRef<Animation>();
+
+  useEffect(() => {
+    if (!cardA.current) {
+      cardA.current = createAnimation()
+        .addElement(cardAEl.current!)
+        .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)' },
+        ]);
+    }
+
+    if (!cardB.current) {
+      cardB.current = createAnimation()
+        .addElement(cardBEl.current!)
+        .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' },
+        ]);
+    }
+    if (!cardC.current) {
+      cardC.current = createAnimation()
+        .addElement(cardCEl.current!)
+        .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' },
+        ]);
+    }
+  }, [cardAEl, cardBEl, cardCEl]);
+
+  const play = async () => {
+    await cardA.current?.play();
+    await cardB.current?.play();
+    await cardC.current?.play();
+  };
+  const pause = () => {
+    cardA.current?.pause();
+    cardB.current?.pause();
+    cardC.current?.pause();
+  };
+  const stop = () => {
+    cardA.current?.stop();
+    cardB.current?.stop();
+    cardC.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardAEl}>
+        <IonCardContent>Card 1</IonCardContent>
+      </IonCard>
+
+      <IonCard ref={cardBEl}>
+        <IonCardContent>Card 2</IonCardContent>
+      </IonCard>
+
+      <IonCard ref={cardCEl}>
+        <IonCardContent>Card 3</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/chain/vue.md b/static/usage/v7/animations/chain/vue.md
new file mode 100644
index 00000000000..67077e8efa1
--- /dev/null
+++ b/static/usage/v7/animations/chain/vue.md
@@ -0,0 +1,100 @@
+```html
+<template>
+  <ion-card ref="cardAEl">
+    <ion-card-content>Card 1</ion-card-content>
+  </ion-card>
+
+  <ion-card ref="cardBEl">
+    <ion-card-content>Card 2</ion-card-content>
+  </ion-card>
+
+  <ion-card ref="cardCEl">
+    <ion-card-content>Card 3</ion-card-content>
+  </ion-card>
+
+  <ion-button id="play" @click="play()">Play</ion-button>
+  <ion-button id="pause" @click="pause()">Pause</ion-button>
+  <ion-button id="stop" @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardAEl = ref(null);
+      const cardBEl = ref(null);
+      const cardCEl = ref(null);
+
+      let cardA: Animation | undefined;
+      let cardB: Animation | undefined;
+      let cardC: Animation | undefined;
+
+      onMounted(() => {
+        cardA = createAnimation()
+          .addElement(cardAEl.value.$el)
+          .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)' },
+          ]);
+
+        cardB = createAnimation()
+          .addElement(cardBEl.value.$el)
+          .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' },
+          ]);
+
+        cardC = createAnimation()
+          .addElement(cardCEl.value.$el)
+          .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' },
+          ]);
+      });
+
+      const play = async () => {
+        await cardA?.play();
+        await cardB?.play();
+        await cardC?.play();
+      };
+      const pause = () => {
+        cardA?.pause();
+        cardB?.pause();
+        cardC?.pause();
+      };
+      const stop = () => {
+        cardA?.stop();
+        cardB?.stop();
+        cardC?.stop();
+      };
+
+      return {
+        play,
+        pause,
+        stop,
+        cardAEl,
+        cardBEl,
+        cardCEl,
+      };
+    },
+  });
+</script>
+```

From 718e779493da3f9c0d34ccbb3576349812624f83 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 11 Jul 2023 12:02:30 -0400
Subject: [PATCH 421/469] chore(deps): update dependency vite to v2.9.16
 [security] (#3028)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 static/code/stackblitz/v6/vue/package-lock.json | 15 ++++++++-------
 static/code/stackblitz/v7/vue/package-lock.json | 12 ++++++------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/static/code/stackblitz/v6/vue/package-lock.json b/static/code/stackblitz/v6/vue/package-lock.json
index 4818d2bde8c..c3d2edbe13f 100644
--- a/static/code/stackblitz/v6/vue/package-lock.json
+++ b/static/code/stackblitz/v6/vue/package-lock.json
@@ -802,9 +802,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "2.9.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
-      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
+      "version": "2.9.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz",
+      "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
@@ -929,7 +929,8 @@
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
       "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@volar/code-gen": {
       "version": "0.34.17",
@@ -1381,9 +1382,9 @@
       "dev": true
     },
     "vite": {
-      "version": "2.9.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
-      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
+      "version": "2.9.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz",
+      "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.27",
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index d3758659f8f..2b083fd8dea 100644
--- a/static/code/stackblitz/v7/vue/package-lock.json
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -815,9 +815,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "2.9.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
-      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
+      "version": "2.9.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz",
+      "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
@@ -1402,9 +1402,9 @@
       "dev": true
     },
     "vite": {
-      "version": "2.9.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
-      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
+      "version": "2.9.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz",
+      "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.27",

From 756ebca0ac5a0315dc805b51060a73e6b42ed2a3 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 12 Jul 2023 08:15:15 -0700
Subject: [PATCH 422/469] docs(animation): add playground for basic animations
 (#3031)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/animations.md                  | 79 +------------------
 .../basic/angular/example_component_html.md   |  9 +++
 .../basic/angular/example_component_ts.md     | 40 ++++++++++
 static/usage/v7/animations/basic/demo.html    | 59 ++++++++++++++
 static/usage/v7/animations/basic/index.md     | 25 ++++++
 .../usage/v7/animations/basic/javascript.md   | 18 +++++
 static/usage/v7/animations/basic/react.md     | 51 ++++++++++++
 static/usage/v7/animations/basic/vue.md       | 51 ++++++++++++
 8 files changed, 257 insertions(+), 75 deletions(-)
 create mode 100644 static/usage/v7/animations/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/basic/demo.html
 create mode 100644 static/usage/v7/animations/basic/index.md
 create mode 100644 static/usage/v7/animations/basic/javascript.md
 create mode 100644 static/usage/v7/animations/basic/react.md
 create mode 100644 static/usage/v7/animations/basic/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 3ebcddb2835..50c033cecca 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -138,84 +138,13 @@ const animation = createAnimation()
 
 ## 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.
+In the example below, an animation that changes the opacity on the `ion-card` 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" />
+import Basic from '@site/static/usage/v7/animations/basic/index.md';
+
+<Basic />
 
 ## Keyframe Animations
 
diff --git a/static/usage/v7/animations/basic/angular/example_component_html.md b/static/usage/v7/animations/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..3a27660393a
--- /dev/null
+++ b/static/usage/v7/animations/basic/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card #card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..e8a1dae1af8
--- /dev/null
+++ b/static/usage/v7/animations/basic/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1500)
+      .iterations(Infinity)
+      .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+      .fromTo('opacity', '1', '0.2');
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/basic/demo.html b/static/usage/v7/animations/basic/demo.html
new file mode 100644
index 00000000000..e8f014943bc
--- /dev/null
+++ b/static/usage/v7/animations/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>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const animation = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(1500)
+        .iterations(Infinity)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .fromTo('opacity', '1', '0.2');
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/basic/index.md b/static/usage/v7/animations/basic/index.md
new file mode 100644
index 00000000000..3d29e4e8e59
--- /dev/null
+++ b/static/usage/v7/animations/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/animations/basic/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/basic/javascript.md b/static/usage/v7/animations/basic/javascript.md
new file mode 100644
index 00000000000..369131ac39b
--- /dev/null
+++ b/static/usage/v7/animations/basic/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="animation.play()">Play</ion-button>
+<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
+<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(1500)
+    .iterations(Infinity)
+    .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+    .fromTo('opacity', '1', '0.2');
+</script>
+```
diff --git a/static/usage/v7/animations/basic/react.md b/static/usage/v7/animations/basic/react.md
new file mode 100644
index 00000000000..6767b71ead1
--- /dev/null
+++ b/static/usage/v7/animations/basic/react.md
@@ -0,0 +1,51 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1500)
+        .iterations(Infinity)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .fromTo('opacity', '1', '0.2');
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/basic/vue.md b/static/usage/v7/animations/basic/vue.md
new file mode 100644
index 00000000000..a0837b1b81e
--- /dev/null
+++ b/static/usage/v7/animations/basic/vue.md
@@ -0,0 +1,51 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+
+  <ion-button id="play" @click="play()">Play</ion-button>
+  <ion-button id="pause" @click="pause()">Pause</ion-button>
+  <ion-button id="stop" @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      let animation: Animation;
+
+      onMounted(() => {
+        animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(1500)
+          .iterations(Infinity)
+          .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+          .fromTo('opacity', '1', '0.2');
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+```

From 03a81536035b4acd999da01ea73e5153bb4d0aaa Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 12 Jul 2023 13:20:11 -0400
Subject: [PATCH 423/469] fix(deps): update dependency @types/node to v16.18.38
 (#3033)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .../stackblitz/v6/react/package-lock.json     | 648 ++++++++----------
 .../stackblitz/v7/react/package-lock.json     |  12 +-
 2 files changed, 310 insertions(+), 350 deletions(-)

diff --git a/static/code/stackblitz/v6/react/package-lock.json b/static/code/stackblitz/v6/react/package-lock.json
index 3bfe515e761..3b892e4e053 100644
--- a/static/code/stackblitz/v6/react/package-lock.json
+++ b/static/code/stackblitz/v6/react/package-lock.json
@@ -2172,6 +2172,21 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/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/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2202,6 +2217,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/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/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -3647,9 +3667,9 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "node_modules/@types/node": {
-      "version": "16.18.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.3.tgz",
-      "integrity": "sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg=="
+      "version": "16.18.38",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.38.tgz",
+      "integrity": "sha512-6sfo1qTulpVbkxECP+AVrHV9OoJqhzCsfTNp5NIG+enM4HyM3HvZCO798WShIXBN0+QtDIcutJCjsVYnQP5rIQ=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4280,13 +4300,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -4310,34 +4330,6 @@
         }
       }
     },
-    "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",
@@ -4678,6 +4670,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/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/babel-loader/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/babel-loader/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/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -5615,21 +5635,6 @@
         }
       }
     },
-    "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",
@@ -5641,11 +5646,6 @@
         "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",
@@ -6899,21 +6899,6 @@
         "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",
@@ -6946,11 +6931,6 @@
         "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",
@@ -6983,6 +6963,21 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/eslint/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/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -7077,6 +7072,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/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/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7578,6 +7578,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/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/fork-ts-checker-webpack-plugin/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/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",
@@ -7660,6 +7683,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/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/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",
@@ -8782,11 +8810,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -10935,9 +10958,9 @@
       "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=="
+      "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/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -11307,21 +11330,6 @@
         "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",
@@ -11333,11 +11341,6 @@
         "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",
@@ -11860,14 +11863,6 @@
       "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": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -14273,6 +14268,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/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/schema-utils/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/schema-utils/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/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -15673,21 +15696,6 @@
         "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",
@@ -15699,11 +15707,6 @@
         "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",
@@ -15776,21 +15779,6 @@
         }
       }
     },
-    "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",
@@ -15802,11 +15790,6 @@
         "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",
@@ -16077,21 +16060,6 @@
         "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",
@@ -16106,11 +16074,6 @@
         "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",
@@ -17813,12 +17776,14 @@
     "@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=="
+      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
+      "requires": {}
     },
     "@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=="
+      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+      "requires": {}
     },
     "@eslint/eslintrc": {
       "version": "1.3.3",
@@ -17836,6 +17801,17 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "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"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -17857,6 +17833,11 @@
             "argparse": "^2.0.1"
           }
         },
+        "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=="
+        },
         "type-fest": {
           "version": "0.20.2",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -18909,9 +18890,9 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "@types/node": {
-      "version": "16.18.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.3.tgz",
-      "integrity": "sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg=="
+      "version": "16.18.38",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.38.tgz",
+      "integrity": "sha512-6sfo1qTulpVbkxECP+AVrHV9OoJqhzCsfTNp5NIG+enM4HyM3HvZCO798WShIXBN0+QtDIcutJCjsVYnQP5rIQ=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -19352,12 +19333,14 @@
     "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=="
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "requires": {}
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -19404,13 +19387,13 @@
       }
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
     },
@@ -19420,31 +19403,8 @@
       "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",
@@ -19677,6 +19637,28 @@
         "schema-utils": "^2.6.5"
       },
       "dependencies": {
+        "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-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "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=="
+        },
         "schema-utils": {
           "version": "2.7.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -19725,7 +19707,8 @@
     "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=="
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
+      "requires": {}
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
@@ -20328,7 +20311,8 @@
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
-      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
+      "requires": {}
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -20366,17 +20350,6 @@
         "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",
@@ -20385,11 +20358,6 @@
             "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",
@@ -20411,7 +20379,8 @@
     "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=="
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
+      "requires": {}
     },
     "css-select": {
       "version": "4.3.0",
@@ -20510,7 +20479,8 @@
     "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=="
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -21062,6 +21032,17 @@
         "text-table": "^0.2.0"
       },
       "dependencies": {
+        "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"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -21123,6 +21104,11 @@
             "argparse": "^2.0.1"
           }
         },
+        "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=="
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -21332,7 +21318,8 @@
     "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=="
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "requires": {}
     },
     "eslint-plugin-testing-library": {
       "version": "5.9.1",
@@ -21383,17 +21370,6 @@
         "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",
@@ -21417,11 +21393,6 @@
             "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",
@@ -21803,6 +21774,23 @@
         "tapable": "^1.0.0"
       },
       "dependencies": {
+        "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-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -21861,6 +21849,11 @@
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
+        "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=="
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -22358,7 +22351,8 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "requires": {}
     },
     "idb": {
       "version": "7.1.0",
@@ -22646,11 +22640,6 @@
         "is-docker": "^2.0.0"
       }
     },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -23398,7 +23387,8 @@
     "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=="
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -24226,9 +24216,9 @@
       "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=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -24501,17 +24491,6 @@
         "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",
@@ -24520,11 +24499,6 @@
             "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",
@@ -24898,14 +24872,6 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
-    "path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -25048,7 +25014,8 @@
     "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=="
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
+      "requires": {}
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -25146,22 +25113,26 @@
     "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=="
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "requires": {}
     },
     "postcss-double-position-gradients": {
       "version": "3.1.2",
@@ -25183,7 +25154,8 @@
     "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=="
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
+      "requires": {}
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -25204,12 +25176,14 @@
     "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=="
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -25232,7 +25206,8 @@
     "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=="
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
+      "requires": {}
     },
     "postcss-js": {
       "version": "4.0.0",
@@ -25273,12 +25248,14 @@
     "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=="
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
+      "requires": {}
     },
     "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=="
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
+      "requires": {}
     },
     "postcss-merge-longhand": {
       "version": "5.1.7",
@@ -25339,7 +25316,8 @@
     "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=="
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -25397,7 +25375,8 @@
     "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=="
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -25490,7 +25469,8 @@
     "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=="
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.5",
@@ -25584,7 +25564,8 @@
     "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=="
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "6.0.1",
@@ -26427,6 +26408,30 @@
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
         "ajv-keywords": "^3.5.2"
+      },
+      "dependencies": {
+        "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-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "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=="
+        }
       }
     },
     "select-hose": {
@@ -26850,7 +26855,8 @@
     "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=="
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "requires": {}
     },
     "stylehacks": {
       "version": "5.1.1",
@@ -27513,17 +27519,6 @@
         "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",
@@ -27532,11 +27527,6 @@
             "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",
@@ -27586,17 +27576,6 @@
         "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",
@@ -27605,11 +27584,6 @@
             "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",
@@ -27624,7 +27598,8 @@
         "ws": {
           "version": "8.10.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.10.0.tgz",
-          "integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw=="
+          "integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==",
+          "requires": {}
         }
       }
     },
@@ -27797,17 +27772,6 @@
         "workbox-window": "6.5.4"
       },
       "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",
@@ -27819,11 +27783,6 @@
             "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",
@@ -28048,7 +28007,8 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index a2ed6e49230..0cc3025348c 100644
--- a/static/code/stackblitz/v7/react/package-lock.json
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -3660,9 +3660,9 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "node_modules/@types/node": {
-      "version": "16.18.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.11.tgz",
-      "integrity": "sha512-3oJbGBUWuS6ahSnEq1eN2XrCyf4YsWI8OyCvo7c64zQJNplk3mO84t53o8lfTk+2ji59g5ycfc6qQ3fdHliHuA=="
+      "version": "16.18.38",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.38.tgz",
+      "integrity": "sha512-6sfo1qTulpVbkxECP+AVrHV9OoJqhzCsfTNp5NIG+enM4HyM3HvZCO798WShIXBN0+QtDIcutJCjsVYnQP5rIQ=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -19232,9 +19232,9 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "@types/node": {
-      "version": "16.18.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.11.tgz",
-      "integrity": "sha512-3oJbGBUWuS6ahSnEq1eN2XrCyf4YsWI8OyCvo7c64zQJNplk3mO84t53o8lfTk+2ji59g5ycfc6qQ3fdHliHuA=="
+      "version": "16.18.38",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.38.tgz",
+      "integrity": "sha512-6sfo1qTulpVbkxECP+AVrHV9OoJqhzCsfTNp5NIG+enM4HyM3HvZCO798WShIXBN0+QtDIcutJCjsVYnQP5rIQ=="
     },
     "@types/parse-json": {
       "version": "4.0.0",

From b7348bd0df0102171dac3778bcc026f7415e3d9c Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Wed, 12 Jul 2023 14:46:28 -0400
Subject: [PATCH 424/469] fix(generation): correct angular imports (#3034)

* Refactor: Improve readability

* Combine index files and fix bug with angular ts generation
---
 .../new/angular_example_component_ts.md.ejs.t |  6 ++-
 _templates/playground/new/index.md.ejs.t      | 53 +++++++++++++++++--
 .../playground/new/index_with_css.md.ejs.t    | 37 -------------
 _templates/playground/new/javascript.md.ejs.t |  6 ++-
 _templates/playground/new/vue.md.ejs.t        |  6 ++-
 5 files changed, 62 insertions(+), 46 deletions(-)
 delete mode 100644 _templates/playground/new/index_with_css.md.ejs.t

diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
index 4fba3916f7a..e6132304d6f 100644
--- a/_templates/playground/new/angular_example_component_ts.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -7,8 +7,10 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html',<% if (css){ %>
-  styleUrls: ['./example.component.css'],<% } %>
+  templateUrl: 'example.component.html',
+<% if (css){ -%>
+  styleUrls: ['./example.component.css'],
+<% } -%>
 })
 export class ExampleComponent {
 }
diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t
index dbba97e762b..fe9b7483a31 100644
--- a/_templates/playground/new/index.md.ejs.t
+++ b/_templates/playground/new/index.md.ejs.t
@@ -1,13 +1,60 @@
 ---
 arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
-# this template is only used if `css` (from the command line prompt) is false
-to: "<%= css ? null : `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>"
+to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>"
 ---
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
+<% if (css){ %>
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+<% } else { -%>
 import react from './react.md';
+<% } -%>
 import vue from './vue.md';
+<% if (css || angular_ts){ %>
+import angular_example_component_html from './angular/example_component_html.md';
+<% } else { -%>
 import angular from './angular.md';
+<% } -%>
+<% if (angular_ts){ -%>
+import angular_example_component_ts from './angular/example_component_ts.md';
+<% } -%>
+<% if (css){ -%>
+import angular_example_component_css from './angular/example_component_css.md';
+<% } -%>
 
-<Playground version="<%= version %>" code={{ javascript, react, vue, angular }} src="<%= `usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>" />
+<Playground
+  version="<%= version %>"
+  code={{
+    javascript,
+<% if (css){ -%>
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+<% } else { -%>
+    react,
+<% } -%>
+    vue,
+<% if (angular_ts || css){ -%>
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+<% if (angular_ts){ -%>
+        'src/app/example.component.ts': angular_example_component_ts,
+<% } -%>
+<% if (css){ -%>
+        'src/app/example.component.css': angular_example_component_css,
+<% } -%>
+      },
+    },
+<% } else { -%>
+    angular,
+<% } -%>
+  }}
+  src="usage/v<%= version %>/<%= nameWithoutIon %>/<%= path %>/demo.html"
+/>
diff --git a/_templates/playground/new/index_with_css.md.ejs.t b/_templates/playground/new/index_with_css.md.ejs.t
deleted file mode 100644
index 8f403ea6d85..00000000000
--- a/_templates/playground/new/index_with_css.md.ejs.t
+++ /dev/null
@@ -1,37 +0,0 @@
----
-arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
-# this template is only used if `css` (from the command line prompt) is true
-to: "<%= css ? `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` : null %>"
----
-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="<%= version %>"
-  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/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
-/>
diff --git a/_templates/playground/new/javascript.md.ejs.t b/_templates/playground/new/javascript.md.ejs.t
index a011e678ad5..067c56a59c5 100644
--- a/_templates/playground/new/javascript.md.ejs.t
+++ b/_templates/playground/new/javascript.md.ejs.t
@@ -2,11 +2,13 @@
 to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/javascript.md` %>"
 ---
 ```html
-<<%= name %>></<%= name %>><% if (css){ %>
+<<%= name %>></<%= name %>>
+<% if (css){ -%>
 
 <style>
   <%= name %> {
     /* styles go here */
   }
-</style><% } %>
+</style>
+<% } -%>
 ```
diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t
index 73a5ffde7e1..b1bf2cd21eb 100644
--- a/_templates/playground/new/vue.md.ejs.t
+++ b/_templates/playground/new/vue.md.ejs.t
@@ -16,11 +16,13 @@ to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/vue.md` %
       <%= pascalName %>,
     },
   });
-</script><% if (css){ %>
+</script>
+<% if (css){ -%>
 
 <style scoped>
   <%= name %> {
     /* styles go here */
   }
-</style><% } %>
+</style>
+<% } -%>
 ```

From b85fc7956c319643a05e61bd6934926bb6836d74 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 12 Jul 2023 15:09:47 -0400
Subject: [PATCH 425/469] docs(animations): buttons in StackBlitz demos do not
 need id (#3037)

---
 .../basic/angular/example_component_html.md          |  6 +++---
 static/usage/v7/animations/basic/javascript.md       |  6 +++---
 static/usage/v7/animations/basic/react.md            | 12 +++---------
 static/usage/v7/animations/basic/vue.md              |  6 +++---
 .../chain/angular/example_component_html.md          |  6 +++---
 static/usage/v7/animations/chain/javascript.md       |  6 +++---
 static/usage/v7/animations/chain/react.md            | 12 +++---------
 static/usage/v7/animations/chain/vue.md              |  6 +++---
 .../group/angular/example_component_html.md          |  6 +++---
 static/usage/v7/animations/group/javascript.md       |  6 +++---
 static/usage/v7/animations/group/react.md            | 12 +++---------
 static/usage/v7/animations/group/vue.md              |  6 +++---
 12 files changed, 36 insertions(+), 54 deletions(-)

diff --git a/static/usage/v7/animations/basic/angular/example_component_html.md b/static/usage/v7/animations/basic/angular/example_component_html.md
index 3a27660393a..1bd8875b1b3 100644
--- a/static/usage/v7/animations/basic/angular/example_component_html.md
+++ b/static/usage/v7/animations/basic/angular/example_component_html.md
@@ -3,7 +3,7 @@
   <ion-card-content>Card</ion-card-content>
 </ion-card>
 
-<ion-button id="play" (click)="play()">Play</ion-button>
-<ion-button id="pause" (click)="pause()">Pause</ion-button>
-<ion-button id="stop" (click)="stop()">Stop</ion-button>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
 ```
diff --git a/static/usage/v7/animations/basic/javascript.md b/static/usage/v7/animations/basic/javascript.md
index 369131ac39b..3c98a4e039f 100644
--- a/static/usage/v7/animations/basic/javascript.md
+++ b/static/usage/v7/animations/basic/javascript.md
@@ -3,9 +3,9 @@
   <ion-card-content>Card</ion-card-content>
 </ion-card>
 
-<ion-button id="play" onclick="animation.play()">Play</ion-button>
-<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
-<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
 
 <script>
   var animation = createAnimation()
diff --git a/static/usage/v7/animations/basic/react.md b/static/usage/v7/animations/basic/react.md
index 6767b71ead1..9134a2d9f24 100644
--- a/static/usage/v7/animations/basic/react.md
+++ b/static/usage/v7/animations/basic/react.md
@@ -35,15 +35,9 @@ function Example() {
         <IonCardContent>Card</IonCardContent>
       </IonCard>
 
-      <IonButton id="play" onClick={play}>
-        Play
-      </IonButton>
-      <IonButton id="pause" onClick={pause}>
-        Pause
-      </IonButton>
-      <IonButton id="stop" onClick={stop}>
-        Stop
-      </IonButton>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
     </>
   );
 }
diff --git a/static/usage/v7/animations/basic/vue.md b/static/usage/v7/animations/basic/vue.md
index a0837b1b81e..afd6c68891b 100644
--- a/static/usage/v7/animations/basic/vue.md
+++ b/static/usage/v7/animations/basic/vue.md
@@ -4,9 +4,9 @@
     <ion-card-content>Card</ion-card-content>
   </ion-card>
 
-  <ion-button id="play" @click="play()">Play</ion-button>
-  <ion-button id="pause" @click="pause()">Pause</ion-button>
-  <ion-button id="stop" @click="stop()">Stop</ion-button>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/animations/chain/angular/example_component_html.md b/static/usage/v7/animations/chain/angular/example_component_html.md
index bb61611b10c..8f8b5a83f58 100644
--- a/static/usage/v7/animations/chain/angular/example_component_html.md
+++ b/static/usage/v7/animations/chain/angular/example_component_html.md
@@ -11,7 +11,7 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" (click)="play()">Play</ion-button>
-<ion-button id="pause" (click)="pause()">Pause</ion-button>
-<ion-button id="stop" (click)="stop()">Stop</ion-button>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
 ```
diff --git a/static/usage/v7/animations/chain/javascript.md b/static/usage/v7/animations/chain/javascript.md
index 26011045834..4fd3dc227d3 100644
--- a/static/usage/v7/animations/chain/javascript.md
+++ b/static/usage/v7/animations/chain/javascript.md
@@ -11,9 +11,9 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" onclick="play()">Play</ion-button>
-<ion-button id="pause" onclick="pause()">Pause</ion-button>
-<ion-button id="stop" onclick="stop()">Stop</ion-button>
+<ion-button onclick="play()">Play</ion-button>
+<ion-button onclick="pause()">Pause</ion-button>
+<ion-button onclick="stop()">Stop</ion-button>
 
 <script>
   const cardA = createAnimation()
diff --git a/static/usage/v7/animations/chain/react.md b/static/usage/v7/animations/chain/react.md
index b559f038d7b..d00350793f3 100644
--- a/static/usage/v7/animations/chain/react.md
+++ b/static/usage/v7/animations/chain/react.md
@@ -79,15 +79,9 @@ function Example() {
         <IonCardContent>Card 3</IonCardContent>
       </IonCard>
 
-      <IonButton id="play" onClick={play}>
-        Play
-      </IonButton>
-      <IonButton id="pause" onClick={pause}>
-        Pause
-      </IonButton>
-      <IonButton id="stop" onClick={stop}>
-        Stop
-      </IonButton>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
     </>
   );
 }
diff --git a/static/usage/v7/animations/chain/vue.md b/static/usage/v7/animations/chain/vue.md
index 67077e8efa1..48166a15be2 100644
--- a/static/usage/v7/animations/chain/vue.md
+++ b/static/usage/v7/animations/chain/vue.md
@@ -12,9 +12,9 @@
     <ion-card-content>Card 3</ion-card-content>
   </ion-card>
 
-  <ion-button id="play" @click="play()">Play</ion-button>
-  <ion-button id="pause" @click="pause()">Pause</ion-button>
-  <ion-button id="stop" @click="stop()">Stop</ion-button>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/animations/group/angular/example_component_html.md b/static/usage/v7/animations/group/angular/example_component_html.md
index bb61611b10c..8f8b5a83f58 100644
--- a/static/usage/v7/animations/group/angular/example_component_html.md
+++ b/static/usage/v7/animations/group/angular/example_component_html.md
@@ -11,7 +11,7 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" (click)="play()">Play</ion-button>
-<ion-button id="pause" (click)="pause()">Pause</ion-button>
-<ion-button id="stop" (click)="stop()">Stop</ion-button>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
 ```
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
index d6f671660e2..3630f6520df 100644
--- a/static/usage/v7/animations/group/javascript.md
+++ b/static/usage/v7/animations/group/javascript.md
@@ -11,9 +11,9 @@
   <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
-<ion-button id="play" onclick="animation.play()">Play</ion-button>
-<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
-<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
 
 <script>
   const cardA = createAnimation()
diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md
index 23b00bbee74..dc445826e82 100644
--- a/static/usage/v7/animations/group/react.md
+++ b/static/usage/v7/animations/group/react.md
@@ -65,15 +65,9 @@ function Example() {
         <IonCardContent>Card 3</IonCardContent>
       </IonCard>
 
-      <IonButton id="play" onClick={play}>
-        Play
-      </IonButton>
-      <IonButton id="pause" onClick={pause}>
-        Pause
-      </IonButton>
-      <IonButton id="stop" onClick={stop}>
-        Stop
-      </IonButton>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
     </>
   );
 }
diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md
index 4302f414bb6..144eb7b8259 100644
--- a/static/usage/v7/animations/group/vue.md
+++ b/static/usage/v7/animations/group/vue.md
@@ -12,9 +12,9 @@
     <ion-card-content>Card 3</ion-card-content>
   </ion-card>
 
-  <ion-button id="play" @click="play()">Play</ion-button>
-  <ion-button id="pause" @click="pause()">Pause</ion-button>
-  <ion-button id="stop" @click="stop()">Stop</ion-button>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
 </template>
 
 <script lang="ts">

From fa26dee81c3162de8507572ce1c458be3530bff8 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 12 Jul 2023 15:30:07 -0400
Subject: [PATCH 426/469] chore(renovate): limit include paths (#3030)

* chore(renovate): limit include paths

* fix: use matchPackagePatterns
---
 renovate.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/renovate.json b/renovate.json
index 595ec312b3d..c3e1741a371 100644
--- a/renovate.json
+++ b/renovate.json
@@ -9,6 +9,11 @@
     {
       "matchPackagePatterns": ["^@angular/"],
       "groupName": "angular"
+    },
+    {
+      "matchPackagePatterns": ["^@ionic/"],
+      "allowedVersions": "^6.0.0",
+      "matchFileNames": ["static/code/stackblitz/v6/**/package.json"]
     }
   ],
   "dependencyDashboard": true,
@@ -16,5 +21,5 @@
   "rebaseWhen": "never",
   "schedule": ["every weekday before 11am"],
   "semanticCommits": "enabled",
-  "ignorePaths": ["./package.json", "./package-lock.json", "./docusaurus-theme-classic"]
+  "includePaths": ["static/code/stackblitz"]
 }

From 431ceccb8e4a711ea8e17516deaea52132fbbc73 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 12 Jul 2023 15:59:47 -0400
Subject: [PATCH 427/469] docs(animations): add playground for before and after
 hooks (#3035)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/animations.md                  | 113 +-----------------
 .../angular/example_component_html.md         |   9 ++
 .../angular/example_component_ts.md           |  52 ++++++++
 .../before-and-after-hooks/demo.html          |  74 ++++++++++++
 .../before-and-after-hooks/index.md           |  25 ++++
 .../before-and-after-hooks/javascript.md      |  28 +++++
 .../before-and-after-hooks/react.md           |  61 ++++++++++
 .../animations/before-and-after-hooks/vue.md  |  67 +++++++++++
 8 files changed, 320 insertions(+), 109 deletions(-)
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/demo.html
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/index.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/javascript.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/react.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 50c033cecca..1fa451acb3e 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -255,118 +255,13 @@ import Group from '@site/static/usage/v7/animations/group/index.md';
 
 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.
+This example sets an inline filter which inverts the background color of the card by `75%` prior to the animation starting. Once the animation finishes, the box shadow on the element is set to `rgba(255, 0, 50, 0.4) 0px 4px 16px 6px`, a red glow, and the inline filter is cleared. The animation must be stopped in order to remove the box shadow and play it with the filter again.
 
 See [Methods](#methods) for a complete list of hooks.
 
-<Codepen user="ionic" slug="BaBxmwo" />
+import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-after-hooks/index.md';
+
+<BeforeAndAfterHooks />
 
 ## Chained Animations
 
diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md
new file mode 100644
index 00000000000..c73e91cb471
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
new file mode 100644
index 00000000000..36a7e22081a
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
@@ -0,0 +1,52 @@
+```ts
+import { Component, ElementRef, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    const card = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(0).nativeElement)
+      .duration(2000)
+      .beforeStyles({
+        filter: 'invert(75%)',
+      })
+      .beforeClearStyles(['box-shadow'])
+      .afterStyles({
+        'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+      })
+      .afterClearStyles(['filter'])
+      .keyframes([
+        { offset: 0, transform: 'scale(1)' },
+        { offset: 0.5, transform: 'scale(1.5)' },
+        { offset: 1, transform: 'scale(1)' },
+      ]);
+
+    this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/before-and-after-hooks/demo.html b/static/usage/v7/animations/before-and-after-hooks/demo.html
new file mode 100644
index 00000000000..30466c2bc93
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/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>Animations</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const card = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(2000)
+        .beforeStyles({
+          filter: 'invert(75%)',
+        })
+        .beforeClearStyles(['box-shadow'])
+        .afterStyles({
+          'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+        })
+        .afterClearStyles(['filter'])
+        .keyframes([
+          { offset: 0, transform: 'scale(1)' },
+          { offset: 0.5, transform: 'scale(1.5)' },
+          { offset: 1, transform: 'scale(1)' },
+        ]);
+
+      document.querySelector('#play').addEventListener('click', async () => {
+        await card.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', async () => {
+        await card.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', async () => {
+        await card.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-card id="card">
+            <ion-card-content>Card</ion-card-content>
+          </ion-card>
+
+          <div>
+            <ion-button id="play">Play</ion-button>
+            <ion-button id="pause">Pause</ion-button>
+            <ion-button id="stop">Stop</ion-button>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/before-and-after-hooks/index.md b/static/usage/v7/animations/before-and-after-hooks/index.md
new file mode 100644
index 00000000000..187ef590f4b
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/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/animations/before-and-after-hooks/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/before-and-after-hooks/javascript.md b/static/usage/v7/animations/before-and-after-hooks/javascript.md
new file mode 100644
index 00000000000..262f8cd9803
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(2000)
+    .beforeStyles({
+      filter: 'invert(75%)',
+    })
+    .beforeClearStyles(['box-shadow'])
+    .afterStyles({
+      'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+    })
+    .afterClearStyles(['filter'])
+    .keyframes([
+      { offset: 0, transform: 'scale(1)' },
+      { offset: 0.5, transform: 'scale(1.5)' },
+      { offset: 1, transform: 'scale(1)' },
+    ]);
+</script>
+```
diff --git a/static/usage/v7/animations/before-and-after-hooks/react.md b/static/usage/v7/animations/before-and-after-hooks/react.md
new file mode 100644
index 00000000000..bae1185b19d
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const card = useRef<Animation>();
+
+  useEffect(() => {
+    if (!card.current) {
+      card.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(2000)
+        .beforeStyles({
+          filter: 'invert(75%)',
+        })
+        .beforeClearStyles(['box-shadow'])
+        .afterStyles({
+          'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+        })
+        .afterClearStyles(['filter'])
+        .keyframes([
+          { offset: 0, transform: 'scale(1)' },
+          { offset: 0.5, transform: 'scale(1.5)' },
+          { offset: 1, transform: 'scale(1)' },
+        ]);
+    }
+  }, [cardEl]);
+
+  const play = async () => {
+    await card.current?.play();
+  };
+  const pause = () => {
+    card.current?.pause();
+  };
+  const stop = () => {
+    card.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/before-and-after-hooks/vue.md b/static/usage/v7/animations/before-and-after-hooks/vue.md
new file mode 100644
index 00000000000..3b7463a8546
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/vue.md
@@ -0,0 +1,67 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      let card: Animation | undefined;
+
+      onMounted(() => {
+        card = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(2000)
+          .beforeStyles({
+            filter: 'invert(75%)',
+          })
+          .beforeClearStyles(['box-shadow'])
+          .afterStyles({
+            'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+          })
+          .afterClearStyles(['filter'])
+          .keyframes([
+            { offset: 0, transform: 'scale(1)' },
+            { offset: 0.5, transform: 'scale(1.5)' },
+            { offset: 1, transform: 'scale(1)' },
+          ]);
+      });
+
+      const play = async () => {
+        await card.play();
+      };
+      const pause = () => {
+        card?.pause();
+      };
+      const stop = () => {
+        card?.stop();
+      };
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+```

From 4a53559d96f4f22beb3b5d182befb0cdbaad4d7d Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 13 Jul 2023 11:12:38 -0700
Subject: [PATCH 428/469] docs(animations): add playground for preference based
 (#3036)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/animations.md                  | 97 +------------------
 .../angular/example_component_css.md          | 16 +++
 .../angular/example_component_html.md         |  9 ++
 .../angular/example_component_ts.md           | 41 ++++++++
 .../v7/animations/preference-based/demo.html  | 71 ++++++++++++++
 .../v7/animations/preference-based/index.md   | 35 +++++++
 .../animations/preference-based/javascript.md | 35 +++++++
 .../preference-based/react/main_css.md        | 16 +++
 .../preference-based/react/main_tsx.md        | 47 +++++++++
 .../v7/animations/preference-based/vue.md     | 68 +++++++++++++
 10 files changed, 341 insertions(+), 94 deletions(-)
 create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_css.md
 create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/preference-based/demo.html
 create mode 100644 static/usage/v7/animations/preference-based/index.md
 create mode 100644 static/usage/v7/animations/preference-based/javascript.md
 create mode 100644 static/usage/v7/animations/preference-based/react/main_css.md
 create mode 100644 static/usage/v7/animations/preference-based/react/main_tsx.md
 create mode 100644 static/usage/v7/animations/preference-based/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 1fa451acb3e..a71aeee59c2 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -597,104 +597,13 @@ In this example we are creating a track along which we can drag the `.square` el
 
 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" />
+import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md';
+
+<PreferenceBased />
 
 ## Overriding Ionic Component Animations
 
diff --git a/static/usage/v7/animations/preference-based/angular/example_component_css.md b/static/usage/v7/animations/preference-based/angular/example_component_css.md
new file mode 100644
index 00000000000..eb219f43513
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-card {
+  color: white;
+  opacity: 0.5;
+  background: blue;
+  margin: 10px;
+
+  --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+  ion-card {
+    --background: green;
+  }
+}
+```
diff --git a/static/usage/v7/animations/preference-based/angular/example_component_html.md b/static/usage/v7/animations/preference-based/angular/example_component_html.md
new file mode 100644
index 00000000000..1bd8875b1b3
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card #card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md
new file mode 100644
index 00000000000..c0e383d5ec0
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1500)
+      .iterations(Infinity)
+      .direction('alternate')
+      .fromTo('background', 'blue', 'var(--background)');
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/preference-based/demo.html b/static/usage/v7/animations/preference-based/demo.html
new file mode 100644
index 00000000000..02edd9cd4f4
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/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>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const animation = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(1500)
+        .iterations(Infinity)
+        .direction('alternate')
+        .fromTo('background', 'blue', 'var(--background)');
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+
+        color: white;
+        opacity: 0.5;
+        background: blue;
+        margin: 10px;
+
+        --background: red;
+      }
+
+      /* Demo does not use `prefers-color-scheme` media query because Docusaurus already checks for it. Otherwise, the demo might have the wrong background on certain edge cases. */
+      body.dark ion-card {
+        --background: green;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/preference-based/index.md b/static/usage/v7/animations/preference-based/index.md
new file mode 100644
index 00000000000..e4f2597a6df
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/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
+  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/animations/preference-based/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/preference-based/javascript.md b/static/usage/v7/animations/preference-based/javascript.md
new file mode 100644
index 00000000000..8ad151afcf7
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(1500)
+    .iterations(Infinity)
+    .direction('alternate')
+    .fromTo('background', 'blue', 'var(--background)');
+</script>
+
+<style>
+  ion-card {
+    color: white;
+    opacity: 0.5;
+    background: blue;
+    margin: 10px;
+
+    --background: red;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    ion-card {
+      --background: green;
+    }
+  }
+</style>
+```
diff --git a/static/usage/v7/animations/preference-based/react/main_css.md b/static/usage/v7/animations/preference-based/react/main_css.md
new file mode 100644
index 00000000000..eb219f43513
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-card {
+  color: white;
+  opacity: 0.5;
+  background: blue;
+  margin: 10px;
+
+  --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+  ion-card {
+    --background: green;
+  }
+}
+```
diff --git a/static/usage/v7/animations/preference-based/react/main_tsx.md b/static/usage/v7/animations/preference-based/react/main_tsx.md
new file mode 100644
index 00000000000..a46df596ed7
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/react/main_tsx.md
@@ -0,0 +1,47 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1500)
+        .iterations(Infinity)
+        .direction('alternate')
+        .fromTo('background', 'blue', 'var(--background)');
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/preference-based/vue.md b/static/usage/v7/animations/preference-based/vue.md
new file mode 100644
index 00000000000..db703ca5466
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/vue.md
@@ -0,0 +1,68 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      let animation: Animation;
+
+      onMounted(() => {
+        animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(1500)
+          .iterations(Infinity)
+          .direction('alternate')
+          .fromTo('background', 'blue', 'var(--background)');
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  ion-card {
+    color: white;
+    opacity: 0.5;
+    background: blue;
+    margin: 10px;
+
+    --background: red;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    ion-card {
+      --background: green;
+    }
+  }
+</style>
+```

From 4d8f605ad10cdf42624ceefe25a134efab15162c Mon Sep 17 00:00:00 2001
From: Joshua Albrechtsen <j@josh33.com>
Date: Thu, 13 Jul 2023 14:37:28 -0600
Subject: [PATCH 429/469] docs(angular): add type assertion for your first app
 code snippet (#2910)

Was getting an error: "Type 'string | undefined' is not assignable to type 'string'." Adding an exclamation point at the end of line 111 solves it.
---
 docs/angular/your-first-app/2-taking-photos.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md
index 1a0cb3e2727..2c94527390e 100644
--- a/docs/angular/your-first-app/2-taking-photos.md
+++ b/docs/angular/your-first-app/2-taking-photos.md
@@ -108,7 +108,7 @@ Over in the `addNewToGallery` function, add the newly captured photo to the begi
 
   this.photos.unshift({
     filepath: "soon...",
-    webviewPath: capturedPhoto.webPath
+    webviewPath: capturedPhoto.webPath!
   });
 }
 ```

From 1acc6e4efaf5bf19a01d571e78fc42cd1e04c88a Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 14 Jul 2023 17:44:35 -0400
Subject: [PATCH 430/469] docs(animation): add playground example for
 double-click gesture  (#3042)

Co-authored-by: dillionmegida < dillionmegida@users.noreply.github.com>

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
---
 docs/utilities/gestures.md                    | 172 +-----------------
 static/code/stackblitz/v7/html/index.ts       |   3 +-
 .../angular/example_component_css.md          |   6 +
 .../angular/example_component_html.md         |   5 +
 .../angular/example_component_ts.md           |  51 ++++++
 .../usage/v7/gestures/double-click/demo.html  |  67 +++++++
 .../usage/v7/gestures/double-click/index.md   |  34 ++++
 .../v7/gestures/double-click/javascript.md    |  49 +++++
 .../gestures/double-click/react/main_css.md   |   6 +
 .../gestures/double-click/react/main_tsx.md   |  57 ++++++
 static/usage/v7/gestures/double-click/vue.md  |  69 +++++++
 11 files changed, 349 insertions(+), 170 deletions(-)
 create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_css.md
 create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_html.md
 create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_ts.md
 create mode 100644 static/usage/v7/gestures/double-click/demo.html
 create mode 100644 static/usage/v7/gestures/double-click/index.md
 create mode 100644 static/usage/v7/gestures/double-click/javascript.md
 create mode 100644 static/usage/v7/gestures/double-click/react/main_css.md
 create mode 100644 static/usage/v7/gestures/double-click/react/main_tsx.md
 create mode 100644 static/usage/v7/gestures/double-click/vue.md

diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
index ab65cfb8f7b..cee6e2aef2e 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -272,177 +272,11 @@ In this example, our app listens for gestures on the `.rectangle` element. When
 
 ## 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>
-````
+import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md';
 
-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.
+In the example below, 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" />
+<DoubleClick />
 
 ## Gesture Animations
 
diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
index c820961c828..071bc801d6c 100644
--- a/static/code/stackblitz/v7/html/index.ts
+++ b/static/code/stackblitz/v7/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { createAnimation, loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -28,3 +28,4 @@ defineCustomElements();
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;
 (window as any).createAnimation = createAnimation;
+(window as any).createGesture = createGesture;
diff --git a/static/usage/v7/gestures/double-click/angular/example_component_css.md b/static/usage/v7/gestures/double-click/angular/example_component_css.md
new file mode 100644
index 00000000000..043d289ab58
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-card {
+  transform: translateX(0);
+  user-select: none;
+}
+```
diff --git a/static/usage/v7/gestures/double-click/angular/example_component_html.md b/static/usage/v7/gestures/double-click/angular/example_component_html.md
new file mode 100644
index 00000000000..b0b24e75d67
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-card #card>
+  <ion-card-content>Double click me to move the card.</ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/gestures/double-click/angular/example_component_ts.md b/static/usage/v7/gestures/double-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..08159621553
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/angular/example_component_ts.md
@@ -0,0 +1,51 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { GestureController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild('card', { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private currentOffset: number = 0;
+  private lastOnStart: number = 0;
+  private DOUBLE_CLICK_THRESHOLD: number = 500;
+
+  constructor(private el: ElementRef, private gestureCtrl: GestureController) {}
+
+  ngAfterViewInit() {
+    const gesture = this.gestureCtrl.create({
+      el: this.card.nativeElement,
+      threshold: 0,
+      onStart: () => this.onStart(),
+      gestureName: 'double-click',
+    });
+
+    gesture.enable();
+  }
+
+  private onStart() {
+    const now = Date.now();
+
+    if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
+      this.card.nativeElement.style.setProperty('transform', this.getNewTransform());
+      this.lastOnStart = 0;
+    } else {
+      this.lastOnStart = now;
+    }
+  }
+
+  private getNewTransform() {
+    if (this.currentOffset >= 100) {
+      this.currentOffset = 0;
+    } else {
+      this.currentOffset += 20;
+    }
+
+    return `translateX(${this.currentOffset}px)`;
+  }
+}
+```
diff --git a/static/usage/v7/gestures/double-click/demo.html b/static/usage/v7/gestures/double-click/demo.html
new file mode 100644
index 00000000000..c293e8183a6
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/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>Double-Click Gestures</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <script type="module">
+      import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createGesture = createGesture;
+
+      const DOUBLE_CLICK_THRESHOLD = 500;
+      const card = document.querySelector('ion-card');
+      const gesture = createGesture({
+        el: card,
+        threshold: 0,
+        onStart: () => onStart(),
+        gestureName: 'double-click',
+      });
+
+      gesture.enable();
+
+      let lastOnStart = 0;
+      let currentOffset = 0;
+
+      const onStart = () => {
+        const now = Date.now();
+
+        if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+          card.style.setProperty('transform', getNewTransform());
+          lastOnStart = 0;
+        } else {
+          lastOnStart = now;
+        }
+      };
+
+      const getNewTransform = () => {
+        if (currentOffset >= 100) {
+          currentOffset = 0;
+        } else {
+          currentOffset += 20;
+        }
+
+        return `translateX(${currentOffset}px)`;
+      };
+    </script>
+
+    <style>
+      ion-card {
+        transform: translateX(0);
+        user-select: none;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-content>
+      <ion-card>
+        <ion-card-content>Double click me to move the card.</ion-card-content>
+      </ion-card>
+    </ion-content>
+  </body>
+</html>
diff --git a/static/usage/v7/gestures/double-click/index.md b/static/usage/v7/gestures/double-click/index.md
new file mode 100644
index 00000000000..47c4c9ad045
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/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/gestures/double-click/demo.html"
+/>
diff --git a/static/usage/v7/gestures/double-click/javascript.md b/static/usage/v7/gestures/double-click/javascript.md
new file mode 100644
index 00000000000..a45b7255bbe
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/javascript.md
@@ -0,0 +1,49 @@
+```html
+<ion-card>
+  <ion-card-content>Double click me to move the card.</ion-card-content>
+</ion-card>
+
+<style>
+  ion-card {
+    transform: translateX(0);
+    user-select: none;
+  }
+</style>
+
+<script>
+  const DOUBLE_CLICK_THRESHOLD = 500;
+  const card = document.querySelector('ion-card');
+  const gesture = createGesture({
+    el: card,
+    threshold: 0,
+    onStart: () => onStart(),
+    gestureName: 'double-click',
+  });
+
+  gesture.enable();
+
+  let lastOnStart = 0;
+  let currentOffset = 0;
+
+  const onStart = () => {
+    const now = Date.now();
+
+    if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+      card.style.setProperty('transform', getNewTransform());
+      lastOnStart = 0;
+    } else {
+      lastOnStart = now;
+    }
+  };
+
+  const getNewTransform = () => {
+    if (currentOffset >= 100) {
+      currentOffset = 0;
+    } else {
+      currentOffset += 20;
+    }
+
+    return `translateX(${currentOffset}px)`;
+  };
+</script>
+```
diff --git a/static/usage/v7/gestures/double-click/react/main_css.md b/static/usage/v7/gestures/double-click/react/main_css.md
new file mode 100644
index 00000000000..043d289ab58
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-card {
+  transform: translateX(0);
+  user-select: none;
+}
+```
diff --git a/static/usage/v7/gestures/double-click/react/main_tsx.md b/static/usage/v7/gestures/double-click/react/main_tsx.md
new file mode 100644
index 00000000000..4e9e90cf243
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/react/main_tsx.md
@@ -0,0 +1,57 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardContent, createGesture } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const DOUBLE_CLICK_THRESHOLD = 500;
+  const card = useRef<HTMLIonCardElement | null>(null);
+
+  let lastOnStart = 0;
+  let currentOffset = 0;
+
+  const getNewTransform = () => {
+    if (currentOffset >= 100) {
+      currentOffset = 0;
+    } else {
+      currentOffset += 20;
+    }
+
+    return `translateX(${currentOffset}px)`;
+  };
+
+  const onStart = () => {
+    const now = Date.now();
+
+    if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+      if (card.current) {
+        card.current.style.setProperty('transform', getNewTransform());
+        lastOnStart = 0;
+      }
+    } else {
+      lastOnStart = now;
+    }
+  };
+
+  useEffect(() => {
+    if (card.current) {
+      const gesture = createGesture({
+        el: card.current,
+        threshold: 0,
+        onStart,
+        gestureName: 'double-click',
+      });
+
+      gesture.enable();
+    }
+  });
+
+  return (
+    <IonCard ref={card}>
+      <IonCardContent>Double click me to move the card.</IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/gestures/double-click/vue.md b/static/usage/v7/gestures/double-click/vue.md
new file mode 100644
index 00000000000..aebfad5a830
--- /dev/null
+++ b/static/usage/v7/gestures/double-click/vue.md
@@ -0,0 +1,69 @@
+```html
+<template>
+  <ion-card ref="card">
+    <ion-card-content>Double click me to move the card.</ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonCard, IonCardContent, createGesture } from '@ionic/vue';
+  import { defineComponent, onMounted, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const DOUBLE_CLICK_THRESHOLD = 500;
+      const card = ref();
+
+      let lastOnStart = 0;
+      let currentOffset = 0;
+
+      onMounted(() => {
+        const gesture = createGesture({
+          el: card.value.$el,
+          threshold: 0,
+          onStart,
+          gestureName: 'double-click',
+        });
+
+        gesture.enable();
+      });
+
+      const onStart = () => {
+        const now = Date.now();
+
+        if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+          card.value.$el.style.setProperty('transform', getNewTransform());
+          lastOnStart = 0;
+        } else {
+          lastOnStart = now;
+        }
+      };
+
+      const getNewTransform = () => {
+        if (currentOffset >= 100) {
+          currentOffset = 0;
+        } else {
+          currentOffset += 20;
+        }
+
+        return `translateX(${currentOffset}px)`;
+      };
+
+      return {
+        card,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  ion-card {
+    transform: translateX(0);
+    user-select: none;
+  }
+</style>
+```

From 99b5f8afe47afdcb3d2e8b2cbe7f6826a6bdca8a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 17 Jul 2023 11:09:19 -0400
Subject: [PATCH 431/469] docs(animation): add gesture animation playground
 (#3043)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/animations.md                  | 318 +-----------------
 .../gesture/angular/example_component_css.md  |  17 +
 .../gesture/angular/example_component_html.md |  11 +
 .../gesture/angular/example_component_ts.md   |  82 +++++
 static/usage/v7/animations/gesture/demo.html  | 113 +++++++
 static/usage/v7/animations/gesture/index.md   |  35 ++
 .../usage/v7/animations/gesture/javascript.md |  98 ++++++
 .../v7/animations/gesture/react/main_css.md   |  17 +
 .../v7/animations/gesture/react/main_tsx.md   |  92 +++++
 static/usage/v7/animations/gesture/vue.md     | 112 ++++++
 10 files changed, 580 insertions(+), 315 deletions(-)
 create mode 100644 static/usage/v7/animations/gesture/angular/example_component_css.md
 create mode 100644 static/usage/v7/animations/gesture/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/gesture/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/gesture/demo.html
 create mode 100644 static/usage/v7/animations/gesture/index.md
 create mode 100644 static/usage/v7/animations/gesture/javascript.md
 create mode 100644 static/usage/v7/animations/gesture/react/main_css.md
 create mode 100644 static/usage/v7/animations/gesture/react/main_tsx.md
 create mode 100644 static/usage/v7/animations/gesture/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index a71aeee59c2..87b67c482b7 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -275,323 +275,11 @@ import Chain from '@site/static/usage/v7/animations/chain/index.md';
 
 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 the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
-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.
+import Gesture from '@site/static/usage/v7/animations/gesture/index.md';
 
-<Codepen user="ionic" slug="jONxzRL" />
+<Gesture />
 
 ## Preference-Based Animations
 
diff --git a/static/usage/v7/animations/gesture/angular/example_component_css.md b/static/usage/v7/animations/gesture/angular/example_component_css.md
new file mode 100644
index 00000000000..c06ce353f7c
--- /dev/null
+++ b/static/usage/v7/animations/gesture/angular/example_component_css.md
@@ -0,0 +1,17 @@
+```css
+.container {
+  flex-direction: column;
+}
+
+.track {
+  width: 344px;
+  background: var(--ion-color-medium);
+  padding: 16px;
+}
+
+ion-card {
+  width: 100px;
+  box-shadow: none;
+  margin: 0px;
+}
+```
diff --git a/static/usage/v7/animations/gesture/angular/example_component_html.md b/static/usage/v7/animations/gesture/angular/example_component_html.md
new file mode 100644
index 00000000000..56b2deacd70
--- /dev/null
+++ b/static/usage/v7/animations/gesture/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<div class="container">
+  <div class="track">
+    <ion-card id="card" button="true">
+      <ion-card-content>Card</ion-card-content>
+    </ion-card>
+  </div>
+
+  <p>Drag the square along the track.</p>
+</div>
+```
diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md
new file mode 100644
index 00000000000..7b9aadccf5e
--- /dev/null
+++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md
@@ -0,0 +1,82 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import { AnimationController, GestureController, IonCard } from '@ionic/angular';
+import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+  private gesture: Gesture;
+  private started = false;
+  private initialStep = 0;
+
+  /**
+   * The track is 344px wide.
+   * The card is 100px wide.
+   * We want 16px of margin on each end of the track.
+   */
+  private readonly MAX_TRANSLATE = 344 - 100 - 32;
+
+  constructor(private animationCtrl: AnimationController, private gestureCtrl: GestureController) {}
+
+  private onMove(ev: GestureDetail) {
+    if (!this.started) {
+      this.animation.progressStart();
+      this.started = true;
+    }
+
+    this.animation.progressStep(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.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+      this.gesture.enable(true);
+    });
+
+    this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
+    this.started = false;
+  }
+
+  private clamp(min: number, n: number, max: number) {
+    return Math.max(min, Math.min(n, max));
+  }
+
+  private getStep(ev: GestureDetail) {
+    const delta = this.initialStep + ev.deltaX;
+    return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
+  }
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1000)
+      .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
+
+    const gesture = (this.gesture = this.gestureCtrl.create({
+      el: this.card.nativeElement,
+      threshold: 0,
+      gestureName: 'card-drag',
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
+    }));
+
+    gesture.enable(true);
+  }
+}
+```
diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
new file mode 100644
index 00000000000..88aa10c5c38
--- /dev/null
+++ b/static/usage/v7/animations/gesture/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>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import {
+        createAnimation,
+        createGesture,
+      } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+      window.createGesture = createGesture;
+
+      let initialStep = 0;
+      let started = false;
+
+      const card = document.querySelector('ion-card');
+
+      /**
+       * The track is 344px wide.
+       * The card is 100px wide.
+       * We want 16px of margin on each end of the track.
+       */
+      const MAX_TRANSLATE = 344 - 100 - 32;
+
+      const animation = createAnimation()
+        .addElement(card)
+        .duration(1000)
+        .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+      const gesture = createGesture({
+        el: card,
+        threshold: 0,
+        gestureName: 'card-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);
+      };
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      .track {
+        width: 344px;
+        background: var(--ion-color-medium);
+        padding: 16px;
+      }
+
+      ion-card {
+        width: 100px;
+        box-shadow: none;
+        margin: 0px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="track">
+        <ion-card id="card" button="true">
+          <ion-card-content>Card</ion-card-content>
+        </ion-card>
+      </div>
+
+      <p>Drag the square along the track.</p>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/gesture/index.md b/static/usage/v7/animations/gesture/index.md
new file mode 100644
index 00000000000..b3e53d6d8f3
--- /dev/null
+++ b/static/usage/v7/animations/gesture/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
+  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/animations/gesture/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/gesture/javascript.md b/static/usage/v7/animations/gesture/javascript.md
new file mode 100644
index 00000000000..3535705d5eb
--- /dev/null
+++ b/static/usage/v7/animations/gesture/javascript.md
@@ -0,0 +1,98 @@
+```html
+<div class="container">
+  <div class="track">
+    <ion-card id="card" button="true">
+      <ion-card-content>Card</ion-card-content>
+    </ion-card>
+  </div>
+</div>
+
+<p>Drag the square along the track.</p>
+
+<style>
+  .container {
+    display: flex;
+  }
+
+  .track {
+    width: 344px;
+
+    background: var(--ion-color-medium);
+
+    padding: 16px;
+  }
+
+  ion-card {
+    width: 100px;
+
+    box-shadow: none;
+
+    margin: 0px;
+  }
+</style>
+
+<script>
+  let initialStep = 0;
+  let started = false;
+
+  const card = document.querySelector('ion-card');
+
+  /**
+   * The track is 344px wide.
+   * The card is 100px wide.
+   * We want 16px of margin on each end of the track.
+   */
+  const MAX_TRANSLATE = 344 - 100 - 32;
+
+  const animation = createAnimation()
+    .addElement(card)
+    .duration(1000)
+    .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+  const gesture = createGesture({
+    el: card,
+    threshold: 0,
+    gestureName: 'card-drag',
+    onMove: (ev) => onMove(ev),
+    onEnd: (ev) => onEnd(ev),
+  });
+
+  gesture.enable(true);
+
+  var onMove = (ev) => {
+    if (!started) {
+      animation.progressStart();
+      started = true;
+    }
+
+    animation.progressStep(getStep(ev));
+  };
+
+  var 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;
+  };
+
+  var clamp = (min, n, max) => {
+    return Math.max(min, Math.min(n, max));
+  };
+
+  var getStep = (ev) => {
+    const delta = initialStep + ev.deltaX;
+    return clamp(0, delta / MAX_TRANSLATE, 1);
+  };
+</script>
+```
diff --git a/static/usage/v7/animations/gesture/react/main_css.md b/static/usage/v7/animations/gesture/react/main_css.md
new file mode 100644
index 00000000000..c06ce353f7c
--- /dev/null
+++ b/static/usage/v7/animations/gesture/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+.container {
+  flex-direction: column;
+}
+
+.track {
+  width: 344px;
+  background: var(--ion-color-medium);
+  padding: 16px;
+}
+
+ion-card {
+  width: 100px;
+  box-shadow: none;
+  margin: 0px;
+}
+```
diff --git a/static/usage/v7/animations/gesture/react/main_tsx.md b/static/usage/v7/animations/gesture/react/main_tsx.md
new file mode 100644
index 00000000000..73fca7dfe22
--- /dev/null
+++ b/static/usage/v7/animations/gesture/react/main_tsx.md
@@ -0,0 +1,92 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/react';
+import type { Animation, Gesture, GestureDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+  const animation = useRef<Animation | null>(null);
+  const gesture = useRef<Gesture | null>(null);
+  const initialStep = useRef<number>(0);
+  const started = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      /**
+       * The track is 344px wide.
+       * The card is 100px wide.
+       * We want 16px of margin on each end of the track.
+       */
+      const MAX_TRANSLATE = 344 - 100 - 32;
+
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1000)
+        .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+      gesture.current = createGesture({
+        el: cardEl.current!,
+        threshold: 0,
+        gestureName: 'card-drag',
+        onMove: (ev) => onMove(ev),
+        onEnd: (ev) => onEnd(ev),
+      });
+
+      gesture.current.enable(true);
+
+      const onMove = (ev: GestureDetail) => {
+        if (!started.current) {
+          animation.current!.progressStart();
+          started.current = true;
+        }
+
+        animation.current!.progressStep(getStep(ev));
+      };
+
+      const onEnd = (ev: GestureDetail) => {
+        if (!started.current) {
+          return;
+        }
+
+        gesture.current!.enable(false);
+
+        const step = getStep(ev);
+        const shouldComplete = step > 0.5;
+
+        animation.current!.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+          gesture.current!.enable(true);
+        });
+
+        initialStep.current = shouldComplete ? MAX_TRANSLATE : 0;
+        started.current = false;
+      };
+
+      const clamp = (min: number, n: number, max: number) => {
+        return Math.max(min, Math.min(n, max));
+      };
+
+      const getStep = (ev: GestureDetail) => {
+        const delta = initialStep.current + ev.deltaX;
+        return clamp(0, delta / MAX_TRANSLATE, 1);
+      };
+    }
+  }, [cardEl]);
+
+  return (
+    <>
+      <div className="container">
+        <div className="track">
+          <IonCard id="card" button={true} ref={cardEl}>
+            <IonCardContent>Card</IonCardContent>
+          </IonCard>
+        </div>
+
+        <p>Drag the square along the track.</p>
+      </div>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
new file mode 100644
index 00000000000..9555355fe48
--- /dev/null
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -0,0 +1,112 @@
+```html
+<template>
+  <div class="container">
+    <div class="track">
+      <ion-card id="card" button="true" ref="cardEl">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+    </div>
+
+    <p>Drag the square along the track.</p>
+  </div>
+</template>
+
+<script lang="ts">
+  import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/vue';
+  import type { GestureDetail } from '@ionic/vue';
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      onMounted(() => {
+        let initialStep = 0;
+        let started = false;
+
+        /**
+         * The track is 344px wide.
+         * The card is 100px wide.
+         * We want 16px of margin on each end of the track.
+         */
+        const MAX_TRANSLATE = 344 - 100 - 32;
+
+        const animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(1000)
+          .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+        const gesture = createGesture({
+          el: card,
+          threshold: 0,
+          gestureName: 'card-drag',
+          onMove: (ev) => onMove(ev),
+          onEnd: (ev) => onEnd(ev),
+        });
+
+        gesture.enable(true);
+
+        const onMove = (ev: GestureDetail) => {
+          if (!started) {
+            animation.progressStart();
+            started = true;
+          }
+
+          animation.progressStep(getStep(ev));
+        };
+
+        const onEnd = (ev: GestureDetail) => {
+          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: number, n: number, max: number) => {
+          return Math.max(min, Math.min(n, max));
+        };
+
+        const getStep = (ev: GestureDetail) => {
+          const delta = initialStep + ev.deltaX;
+          return clamp(0, delta / MAX_TRANSLATE, 1);
+        };
+      });
+
+      return { cardEl };
+    },
+  });
+</script>
+
+<style scoped>
+  .container {
+    flex-direction: column;
+  }
+
+  .track {
+    width: 344px;
+    background: var(--ion-color-medium);
+    padding: 16px;
+  }
+
+  ion-card {
+    width: 100px;
+    box-shadow: none;
+    margin: 0px;
+  }
+</style>
+```

From 614519f4e5e7442fa65cd4598727610d323744b5 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 17 Jul 2023 11:34:45 -0400
Subject: [PATCH 432/469] docs(gesture): add playground example for basic usage
 (#3038)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/gestures.md                    | 133 +-----------------
 .../basic/angular/example_component_css.md    |  14 ++
 .../basic/angular/example_component_html.md   |  10 ++
 .../basic/angular/example_component_ts.md     |  50 +++++++
 static/usage/v7/gestures/basic/demo.html      |  81 +++++++++++
 static/usage/v7/gestures/basic/index.md       |  34 +++++
 static/usage/v7/gestures/basic/javascript.md  |  58 ++++++++
 .../usage/v7/gestures/basic/react/main_css.md |  14 ++
 .../usage/v7/gestures/basic/react/main_tsx.md |  62 ++++++++
 static/usage/v7/gestures/basic/vue.md         |  82 +++++++++++
 10 files changed, 408 insertions(+), 130 deletions(-)
 create mode 100644 static/usage/v7/gestures/basic/angular/example_component_css.md
 create mode 100644 static/usage/v7/gestures/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/gestures/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/gestures/basic/demo.html
 create mode 100644 static/usage/v7/gestures/basic/index.md
 create mode 100644 static/usage/v7/gestures/basic/javascript.md
 create mode 100644 static/usage/v7/gestures/basic/react/main_css.md
 create mode 100644 static/usage/v7/gestures/basic/react/main_tsx.md
 create mode 100644 static/usage/v7/gestures/basic/vue.md

diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
index cee6e2aef2e..a4c44d3b833 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -137,138 +137,11 @@ const gesture = createGesture({
 
 ## Basic Gestures
 
-### Usage
+import Basic from '@site/static/usage/v7/gestures/basic/index.md';
 
-````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.
+In this example, our app listens for gestures on the `ion-content` element. When a gesture movement has started, the `onStart` function is called and a class is added to our `ion-card` to add a colored box shadow. When a gesture movement was detected, the `onMove` function is called and our app prints the current gesture information within the `ion-card`. Finally, when a gesture movement has ended, the `onEnd` function is called and the custom class is removed from our `ion-card`.
 
-<Codepen user="ionic" slug="xxKBYdL" />
+<Basic />
 
 ## Double Click Gesture
 
diff --git a/static/usage/v7/gestures/basic/angular/example_component_css.md b/static/usage/v7/gestures/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..4532a98eac4
--- /dev/null
+++ b/static/usage/v7/gestures/basic/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+  position: absolute;
+
+  left: 0;
+  right: 0;
+
+  user-select: none;
+}
+
+ion-card.active {
+  box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
diff --git a/static/usage/v7/gestures/basic/angular/example_component_html.md b/static/usage/v7/gestures/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e8a575523d6
--- /dev/null
+++ b/static/usage/v7/gestures/basic/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-card [class.active]="isCardActive">
+  <ion-card-header>
+    <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <p #debug>Gesture information will display after interaction.</p>
+  </ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/gestures/basic/angular/example_component_ts.md b/static/usage/v7/gestures/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..33482eca38b
--- /dev/null
+++ b/static/usage/v7/gestures/basic/angular/example_component_ts.md
@@ -0,0 +1,50 @@
+```ts
+import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import type { GestureDetail } from '@ionic/angular';
+import { GestureController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild('debug', { read: ElementRef }) debug: ElementRef<HTMLParagraphElement>;
+
+  isCardActive = false;
+
+  constructor(private el: ElementRef, private gestureCtrl: GestureController, private cdRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    const gesture = this.gestureCtrl.create({
+      el: this.el.nativeElement.closest('ion-content'),
+      onStart: () => this.onStart(),
+      onMove: (detail) => this.onMove(detail),
+      onEnd: () => this.onEnd(),
+      gestureName: 'example',
+    });
+
+    gesture.enable();
+  }
+
+  private onStart() {
+    this.isCardActive = true;
+    this.cdRef.detectChanges();
+  }
+
+  private onMove(detail: GestureDetail) {
+    const { type, currentX, deltaX, velocityX } = detail;
+    this.debug.nativeElement.innerHTML = `
+      <div>Type: ${type}</div>
+      <div>Current X: ${currentX}</div>
+      <div>Delta X: ${deltaX}</div>
+      <div>Velocity X: ${velocityX}</div>`;
+  }
+
+  private onEnd() {
+    this.isCardActive = false;
+    this.cdRef.detectChanges();
+  }
+}
+```
diff --git a/static/usage/v7/gestures/basic/demo.html b/static/usage/v7/gestures/basic/demo.html
new file mode 100644
index 00000000000..250c0235801
--- /dev/null
+++ b/static/usage/v7/gestures/basic/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>Gesture</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createGesture = createGesture;
+
+      const p = document.querySelector('#debug');
+      const target = document.querySelector('ion-content');
+      const card = document.querySelector('ion-card');
+
+      const onMove = (detail) => {
+        const { type, currentX, deltaX, velocityX } = detail;
+        p.innerHTML = `
+          <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>`;
+      };
+
+      const onStart = () => {
+        card.classList.add('active');
+      };
+
+      const onEnd = () => {
+        card.classList.remove('active');
+      };
+
+      const gesture = createGesture({
+        el: target,
+        onStart,
+        onMove,
+        onEnd,
+        gestureName: 'example',
+      });
+
+      gesture.enable();
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        position: absolute;
+
+        left: 0;
+        right: 0;
+
+        user-select: none;
+      }
+
+      ion-card.active {
+        box-shadow: var(--ion-color-warning) 0px 4px 16px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-content>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <p id="debug">Gesture information will display after interaction.</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/gestures/basic/index.md b/static/usage/v7/gestures/basic/index.md
new file mode 100644
index 00000000000..835658738d2
--- /dev/null
+++ b/static/usage/v7/gestures/basic/index.md
@@ -0,0 +1,34 @@
+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_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/gestures/basic/demo.html"
+/>
diff --git a/static/usage/v7/gestures/basic/javascript.md b/static/usage/v7/gestures/basic/javascript.md
new file mode 100644
index 00000000000..71153daeec5
--- /dev/null
+++ b/static/usage/v7/gestures/basic/javascript.md
@@ -0,0 +1,58 @@
+```html
+<style>
+  ion-card {
+    position: absolute;
+
+    left: 0;
+    right: 0;
+
+    user-select: none;
+  }
+
+  ion-card.active {
+    box-shadow: var(--ion-color-warning) 0px 4px 16px;
+  }
+</style>
+
+<ion-card>
+  <ion-card-header>
+    <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <p id="debug">Gesture information will display after interaction.</p>
+  </ion-card-content>
+</ion-card>
+
+<script>
+  const p = document.querySelector('#debug');
+  const target = document.querySelector('ion-content');
+  const card = document.querySelector('ion-card');
+
+  const onMove = (detail) => {
+    const { type, currentX, deltaX, velocityX } = detail;
+    p.innerHTML = `
+    <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>`;
+  };
+
+  const onStart = () => {
+    card.classList.add('active');
+  };
+
+  const onEnd = () => {
+    card.classList.remove('active');
+  };
+
+  const gesture = createGesture({
+    el: target,
+    onStart,
+    onMove,
+    onEnd,
+    gestureName: 'example',
+  });
+
+  gesture.enable();
+</script>
+```
diff --git a/static/usage/v7/gestures/basic/react/main_css.md b/static/usage/v7/gestures/basic/react/main_css.md
new file mode 100644
index 00000000000..4532a98eac4
--- /dev/null
+++ b/static/usage/v7/gestures/basic/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+  position: absolute;
+
+  left: 0;
+  right: 0;
+
+  user-select: none;
+}
+
+ion-card.active {
+  box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
diff --git a/static/usage/v7/gestures/basic/react/main_tsx.md b/static/usage/v7/gestures/basic/react/main_tsx.md
new file mode 100644
index 00000000000..2004c3b9066
--- /dev/null
+++ b/static/usage/v7/gestures/basic/react/main_tsx.md
@@ -0,0 +1,62 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardHeader, IonCardSubtitle, IonCardContent, createGesture } from '@ionic/react';
+import type { GestureDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const card = useRef<HTMLIonCardElement | null>(null);
+  const debug = useRef<HTMLParagraphElement | null>(null);
+
+  useEffect(() => {
+    if (card.current) {
+      const target = card.current.closest('ion-content');
+
+      if (target) {
+        const gesture = createGesture({
+          el: target,
+          onStart: () => onStart(),
+          onMove: (detail) => onMove(detail),
+          onEnd: () => onEnd(),
+          gestureName: 'example',
+        });
+
+        gesture.enable();
+      }
+    }
+  }, [card]);
+
+  const onStart = () => {
+    card.current?.classList.add('active');
+  };
+
+  const onMove = (detail: GestureDetail) => {
+    const { type, currentX, deltaX, velocityX } = detail;
+
+    if (debug.current) {
+      debug.current.innerHTML = `
+        <div>Type: ${type}</div>
+        <div>Current X: ${currentX}</div>
+        <div>Delta X: ${deltaX}</div>
+        <div>Velocity X: ${velocityX}</div>`;
+    }
+  };
+
+  const onEnd = () => {
+    card.current?.classList.remove('active');
+  };
+
+  return (
+    <IonCard ref={card}>
+      <IonCardHeader>
+        <IonCardSubtitle>Pan the Screen</IonCardSubtitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <p ref={debug}>Gesture information will display after interaction.</p>
+      </IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/gestures/basic/vue.md b/static/usage/v7/gestures/basic/vue.md
new file mode 100644
index 00000000000..2526d8bff15
--- /dev/null
+++ b/static/usage/v7/gestures/basic/vue.md
@@ -0,0 +1,82 @@
+```html
+<style scoped>
+  ion-card {
+    position: absolute;
+
+    left: 0;
+    right: 0;
+
+    user-select: none;
+  }
+
+  ion-card.active {
+    box-shadow: var(--ion-color-warning) 0px 4px 16px;
+  }
+</style>
+<template>
+  <ion-card ref="card">
+    <ion-card-header>
+      <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <p ref="debug">Gesture information will display after interaction.</p>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createGesture } from '@ionic/vue';
+  import type { GestureDetail } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const card = ref(null);
+      const debug = ref(null);
+
+      onMounted(() => {
+        const gesture = createGesture({
+          el: card.value.$el.closest('ion-content'),
+          onStart: () => onStart(),
+          onMove: (detail) => onMove(detail),
+          onEnd: () => onEnd(),
+          gestureName: 'example',
+        });
+
+        gesture.enable();
+      });
+
+      const onStart = () => {
+        card.value?.$el.classList.add('active');
+      };
+
+      const onMove = (detail: GestureDetail) => {
+        const { type, currentX, deltaX, velocityX } = detail;
+
+        if (debug.value) {
+          debug.value.innerHTML = `
+            <div>Type: ${type}</div>
+            <div>Current X: ${currentX}</div>
+            <div>Delta X: ${deltaX}</div>
+            <div>Velocity X: ${velocityX}</div>`;
+        }
+      };
+
+      const onEnd = () => {
+        card.value?.$el.classList.remove('active');
+      };
+
+      return {
+        card,
+        debug,
+      };
+    },
+  });
+</script>
+```

From 004c78bbde3b8c191bdc514114be562358f74118 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Mon, 17 Jul 2023 14:22:24 -0400
Subject: [PATCH 433/469] docs(animation): add playground example for keyframes
 (#3039)

Co-authored-by: dillionmegida < dillionmegida@users.noreply.github.com>
---
 docs/utilities/animations.md                  | 87 +------------------
 .../angular/example_component_html.md         |  8 ++
 .../keyframes/angular/example_component_ts.md | 42 +++++++++
 .../usage/v7/animations/keyframes/demo.html   | 61 +++++++++++++
 static/usage/v7/animations/keyframes/index.md | 25 ++++++
 .../v7/animations/keyframes/javascript.md     | 20 +++++
 static/usage/v7/animations/keyframes/react.md | 47 ++++++++++
 static/usage/v7/animations/keyframes/vue.md   | 60 +++++++++++++
 8 files changed, 266 insertions(+), 84 deletions(-)
 create mode 100644 static/usage/v7/animations/keyframes/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/keyframes/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/keyframes/demo.html
 create mode 100644 static/usage/v7/animations/keyframes/index.md
 create mode 100644 static/usage/v7/animations/keyframes/javascript.md
 create mode 100644 static/usage/v7/animations/keyframes/react.md
 create mode 100644 static/usage/v7/animations/keyframes/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 87b67c482b7..1c7a43769c1 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -152,95 +152,14 @@ Ionic Animations allows you to control the intermediate steps in an animation us
 
 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
+import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md';
 
-````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">
+<Keyframes />
 
-```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.
+In the example above, the card element will transition from its initial width, to a width defined by the `--width` variable, and then transition on to the final width.
 
 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.
diff --git a/static/usage/v7/animations/keyframes/angular/example_component_html.md b/static/usage/v7/animations/keyframes/angular/example_component_html.md
new file mode 100644
index 00000000000..035212f98d4
--- /dev/null
+++ b/static/usage/v7/animations/keyframes/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-card #card style="width: 80px; --width: 160px;">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md
new file mode 100644
index 00000000000..4ee04bea423
--- /dev/null
+++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard, IonCardContent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(3000)
+      .iterations(Infinity)
+      .keyframes([
+        { offset: 0, width: '80px' },
+        { offset: 0.72, width: 'var(--width)' },
+        { offset: 1, width: '240px' },
+      ]);
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/keyframes/demo.html b/static/usage/v7/animations/keyframes/demo.html
new file mode 100644
index 00000000000..f7c0bb46175
--- /dev/null
+++ b/static/usage/v7/animations/keyframes/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>Keyframe Animations</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+
+      const animation = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(3000)
+        .iterations(Infinity)
+        .keyframes([
+          { offset: 0, width: '80px' },
+          { offset: 0.72, width: 'var(--width)' },
+          { offset: 1, width: '240px' },
+        ]);
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 80px;
+        --width: 160px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/keyframes/index.md b/static/usage/v7/animations/keyframes/index.md
new file mode 100644
index 00000000000..ccf03b4cdb4
--- /dev/null
+++ b/static/usage/v7/animations/keyframes/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/animations/keyframes/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/keyframes/javascript.md b/static/usage/v7/animations/keyframes/javascript.md
new file mode 100644
index 00000000000..7a2e574b8da
--- /dev/null
+++ b/static/usage/v7/animations/keyframes/javascript.md
@@ -0,0 +1,20 @@
+```html
+<ion-card id="card" style="width: 80px; --width: 160px;">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(3000)
+    .iterations(Infinity)
+    .keyframes([
+      { offset: 0, width: '80px' },
+      { offset: 0.72, width: 'var(--width)' },
+      { offset: 1, width: '240px' },
+    ]);
+</script>
+```
diff --git a/static/usage/v7/animations/keyframes/react.md b/static/usage/v7/animations/keyframes/react.md
new file mode 100644
index 00000000000..21d066b5404
--- /dev/null
+++ b/static/usage/v7/animations/keyframes/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(3000)
+        .iterations(Infinity)
+        .keyframes([
+          { offset: 0, width: '80px' },
+          { offset: 0.72, width: 'var(--width)' },
+          { offset: 1, width: '240px' },
+        ]);
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl} style={{ width: '80px', '--width': '160px' } as React.CSSProperties}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/keyframes/vue.md b/static/usage/v7/animations/keyframes/vue.md
new file mode 100644
index 00000000000..a0fc0e4505a
--- /dev/null
+++ b/static/usage/v7/animations/keyframes/vue.md
@@ -0,0 +1,60 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      let animation: Animation;
+
+      onMounted(() => {
+        animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(3000)
+          .iterations(Infinity)
+          .keyframes([
+            { offset: 0, width: '80px' },
+            { offset: 0.72, width: 'var(--width)' },
+            { offset: 1, width: '240px' },
+          ]);
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+
+<style>
+  ion-card {
+    width: 80px;
+    --width: 160px;
+  }
+</style>
+```

From 8e35d5f1174fdef8b29a877c10d3934131dd769c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 18 Jul 2023 13:12:31 -0400
Subject: [PATCH 434/469] docs(item-sliding): clarify expandable behavior
 (#3044)

---
 docs/api/item-sliding.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 61cd5f58f20..ea3a9e04be7 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -39,7 +39,7 @@ import Icons from '@site/static/usage/v7/item-sliding/icons/index.md';
 
 ## 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.
+Options can be expanded to take up the full width of the parent `ion-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/v7/item-sliding/expandable/index.md';
 

From d57ab7ec755642f79e3d277c81f0306469ee806f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 18 Jul 2023 15:24:11 -0400
Subject: [PATCH 435/469] docs(menu): add playgrounds for menu sides and
 multiple menus (#3049)

---
 docs/api/menu.md                              | 38 +++++++--
 static/code/stackblitz/v7/html/index.ts       |  3 +-
 .../angular/example_component_html.md         | 43 ++++++++++
 .../multiple/angular/example_component_ts.md  | 29 +++++++
 static/usage/v7/menu/multiple/demo.html       | 82 +++++++++++++++++++
 static/usage/v7/menu/multiple/index.md        | 27 ++++++
 static/usage/v7/menu/multiple/javascript.md   | 62 ++++++++++++++
 static/usage/v7/menu/multiple/react.md        | 77 +++++++++++++++++
 static/usage/v7/menu/multiple/vue.md          | 74 +++++++++++++++++
 static/usage/v7/menu/sides/angular.md         | 21 +++++
 static/usage/v7/menu/sides/demo.html          | 37 +++++++++
 static/usage/v7/menu/sides/index.md           | 18 ++++
 static/usage/v7/menu/sides/javascript.md      | 21 +++++
 static/usage/v7/menu/sides/react.md           | 30 +++++++
 static/usage/v7/menu/sides/vue.md             | 41 ++++++++++
 15 files changed, 593 insertions(+), 10 deletions(-)
 create mode 100644 static/usage/v7/menu/multiple/angular/example_component_html.md
 create mode 100644 static/usage/v7/menu/multiple/angular/example_component_ts.md
 create mode 100644 static/usage/v7/menu/multiple/demo.html
 create mode 100644 static/usage/v7/menu/multiple/index.md
 create mode 100644 static/usage/v7/menu/multiple/javascript.md
 create mode 100644 static/usage/v7/menu/multiple/react.md
 create mode 100644 static/usage/v7/menu/multiple/vue.md
 create mode 100644 static/usage/v7/menu/sides/angular.md
 create mode 100644 static/usage/v7/menu/sides/demo.html
 create mode 100644 static/usage/v7/menu/sides/index.md
 create mode 100644 static/usage/v7/menu/sides/javascript.md
 create mode 100644 static/usage/v7/menu/sides/react.md
 create mode 100644 static/usage/v7/menu/sides/vue.md

diff --git a/docs/api/menu.md b/docs/api/menu.md
index 1918527a15a..8549e9a88a5 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -18,27 +18,26 @@ 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.
+The menu component is a navigation drawer that slides in from the side of the current view. By default, it uses the start side, making it slide in from the left for LTR and right for RTL, 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/v7/menu/basic/index.md';
+import Basic from '@site/static/usage/v7/menu/basic/index.md';
+
+<Basic />
 
-<BasicUsage />
 
 ## Menu Toggle
 
-The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
+The [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/v7/menu/toggle/index.md';
 
 <MenuToggle />
 
+
 ## Menu Types
 
 The `type` property can be used to customize how menus display in your application.
@@ -47,6 +46,27 @@ import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
 <MenuType />
 
+
+## Menu Sides
+
+Menus are displayed on the `"start"` side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the `"end"` side, which is the opposite of `"start"`.
+
+If menus on both sides are needed in an app, the menu can be opened by passing the `side` value to the `open` method on `MenuController`. If a side is not provided, the menu on the `"start"` side will be opened. See the [multiple menus](#multiple-menus) section below for an example using `MenuController`.
+
+import Sides from '@site/static/usage/v7/menu/sides/index.md';
+
+<Sides />
+
+
+## Multiple Menus
+
+When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the `enable` method on the `MenuController`. We can then call `open` on a menu based on its `menuId` or `side`.
+
+import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
+
+<Multiple />
+
+
 ## Theming
 
 ### CSS Shadow Parts
diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
index 071bc801d6c..2cc510047cd 100644
--- a/static/code/stackblitz/v7/html/index.ts
+++ b/static/code/stackblitz/v7/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, createGesture, loadingController, menuController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -24,6 +24,7 @@ import './theme/variables.css';
 defineCustomElements();
 
 (window as any).loadingController = loadingController;
+(window as any).menuController = menuController;
 (window as any).modalController = modalController;
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;
diff --git a/static/usage/v7/menu/multiple/angular/example_component_html.md b/static/usage/v7/menu/multiple/angular/example_component_html.md
new file mode 100644
index 00000000000..a81d2020f5d
--- /dev/null
+++ b/static/usage/v7/menu/multiple/angular/example_component_html.md
@@ -0,0 +1,43 @@
+```html
+<ion-menu menuId="first-menu" contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>First Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the first menu content.</ion-content>
+</ion-menu>
+
+<ion-menu menuId="second-menu" contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Second Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the second menu content.</ion-content>
+</ion-menu>
+
+<ion-menu side="end" contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>End Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the end menu content.</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">
+    <p>Tap a button below to open a specific menu.</p>
+
+    <ion-button expand="block" (click)="openFirstMenu()">Open First Menu</ion-button>
+    <ion-button expand="block" (click)="openSecondMenu()">Open Second Menu</ion-button>
+    <ion-button expand="block" (click)="openEndMenu()">Open End Menu</ion-button>
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/menu/multiple/angular/example_component_ts.md b/static/usage/v7/menu/multiple/angular/example_component_ts.md
new file mode 100644
index 00000000000..18edbc360a5
--- /dev/null
+++ b/static/usage/v7/menu/multiple/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+import { MenuController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private menuCtrl: MenuController) {}
+
+  openFirstMenu() {
+    // Open the menu by menu-id
+    this.menuCtrl.enable(true, 'first-menu');
+    this.menuCtrl.open('first-menu');
+  }
+
+  openSecondMenu() {
+    // Open the menu by menu-id
+    this.menuCtrl.enable(true, 'second-menu');
+    this.menuCtrl.open('second-menu');
+  }
+
+  openEndMenu() {
+    // Open the menu by side
+    this.menuCtrl.open('end');
+  }
+}
+```
diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html
new file mode 100644
index 00000000000..2845db551d8
--- /dev/null
+++ b/static/usage/v7/menu/multiple/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>Menu</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <script type="module">
+      import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.menuController = menuController;
+    </script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-menu menu-id="first-menu" content-id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>First Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">This is the first menu content.</ion-content>
+      </ion-menu>
+
+      <ion-menu menu-id="second-menu" content-id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Second Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">This is the second menu content.</ion-content>
+      </ion-menu>
+
+      <ion-menu side="end" content-id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>End Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">This is the end menu content.</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">
+          <p>Tap a button below to open a specific menu.</p>
+
+          <ion-button expand="block" onclick="openFirstMenu()">Open First Menu</ion-button>
+          <ion-button expand="block" onclick="openSecondMenu()">Open Second Menu</ion-button>
+          <ion-button expand="block" onclick="openEndMenu()">Open End Menu</ion-button>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      async function openFirstMenu() {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'first-menu');
+        await menuController.open('first-menu');
+      }
+
+      async function openSecondMenu() {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'second-menu');
+        await menuController.open('second-menu');
+      }
+
+      async function openEndMenu() {
+        // Open the menu by side
+        await menuController.open('end');
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/menu/multiple/index.md b/static/usage/v7/menu/multiple/index.md
new file mode 100644
index 00000000000..049f17a5833
--- /dev/null
+++ b/static/usage/v7/menu/multiple/index.md
@@ -0,0 +1,27 @@
+import 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/multiple/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/menu/multiple/javascript.md b/static/usage/v7/menu/multiple/javascript.md
new file mode 100644
index 00000000000..240b4a79157
--- /dev/null
+++ b/static/usage/v7/menu/multiple/javascript.md
@@ -0,0 +1,62 @@
+```html
+<ion-menu menu-id="first-menu" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>First Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the first menu content.</ion-content>
+</ion-menu>
+
+<ion-menu menu-id="second-menu" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Second Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the second menu content.</ion-content>
+</ion-menu>
+
+<ion-menu side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>End Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the end menu content.</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">
+    <p>Tap a button below to open a specific menu.</p>
+
+    <ion-button expand="block" onclick="openFirstMenu()">Open First Menu</ion-button>
+    <ion-button expand="block" onclick="openSecondMenu()">Open Second Menu</ion-button>
+    <ion-button expand="block" onclick="openEndMenu()">Open End Menu</ion-button>
+  </ion-content>
+</div>
+
+<script>
+  async function openFirstMenu() {
+    // Open the menu by menu-id
+    await menuController.enable(true, 'first-menu');
+    await menuController.open('first-menu');
+  }
+
+  async function openSecondMenu() {
+    // Open the menu by menu-id
+    await menuController.enable(true, 'second-menu');
+    await menuController.open('second-menu');
+  }
+
+  async function openEndMenu() {
+    // Open the menu by side
+    await menuController.open('end');
+  }
+</script>
+```
diff --git a/static/usage/v7/menu/multiple/react.md b/static/usage/v7/menu/multiple/react.md
new file mode 100644
index 00000000000..9ba2357603c
--- /dev/null
+++ b/static/usage/v7/menu/multiple/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { menuController } from '@ionic/core/components';
+
+function Example() {
+  async function openFirstMenu() {
+    // Open the menu by menu-id
+    await menuController.enable(true, 'first-menu');
+    await menuController.open('first-menu');
+  }
+
+  async function openSecondMenu() {
+    // Open the menu by menu-id
+    await menuController.enable(true, 'second-menu');
+    await menuController.open('second-menu');
+  }
+
+  async function openEndMenu() {
+    // Open the menu by side
+    await menuController.open('end');
+  }
+
+  return (
+    <>
+      <IonMenu menuId="first-menu" contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>First Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the first menu content.</IonContent>
+      </IonMenu>
+
+      <IonMenu menuId="second-menu" contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Second Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the second menu content.</IonContent>
+      </IonMenu>
+
+      <IonMenu side="end" contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>End Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the end menu content.</IonContent>
+      </IonMenu>
+
+      <IonPage id="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <p>Tap a button below to open a specific menu.</p>
+
+          <IonButton expand="block" onClick={openFirstMenu}>
+            Open First Menu
+          </IonButton>
+          <IonButton expand="block" onClick={openSecondMenu}>
+            Open Second Menu
+          </IonButton>
+          <IonButton expand="block" onClick={openEndMenu}>
+            Open End Menu
+          </IonButton>
+        </IonContent>
+      </IonPage>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md
new file mode 100644
index 00000000000..f9a4932767f
--- /dev/null
+++ b/static/usage/v7/menu/multiple/vue.md
@@ -0,0 +1,74 @@
+```html
+<template>
+  <ion-menu menu-id="first-menu" content-id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>First Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the first menu content.</ion-content>
+  </ion-menu>
+
+  <ion-menu menu-id="second-menu" content-id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Second Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the second menu content.</ion-content>
+  </ion-menu>
+
+  <ion-menu side="end" content-id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>End Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the end menu content.</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">
+      <p>Tap a button below to open a specific menu.</p>
+
+      <ion-button expand="block" @click="openFirstMenu()">Open First Menu</ion-button>
+      <ion-button expand="block" @click="openSecondMenu()">Open Second Menu</ion-button>
+      <ion-button expand="block" @click="openEndMenu()">Open End Menu</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController },
+    setup() {
+      const openFirstMenu = async () => {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'first-menu');
+        await menuController.open('first-menu');
+      };
+
+      const openSecondMenu = async () => {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'second-menu');
+        await menuController.open('second-menu');
+      };
+
+      const openEndMenu = async () => {
+        // Open the menu by side
+        await menuController.open('end');
+      };
+
+      return { openFirstMenu, openSecondMenu, openEndMenu };
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/menu/sides/angular.md b/static/usage/v7/menu/sides/angular.md
new file mode 100644
index 00000000000..b9f7a01069d
--- /dev/null
+++ b/static/usage/v7/menu/sides/angular.md
@@ -0,0 +1,21 @@
+```html
+<ion-menu side="end" 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-title>Menu</ion-title>
+      <ion-buttons slot="end">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+    </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/sides/demo.html b/static/usage/v7/menu/sides/demo.html
new file mode 100644
index 00000000000..6b636752ae4
--- /dev/null
+++ b/static/usage/v7/menu/sides/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>Menu</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-menu side="end" 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-title>Menu</ion-title>
+            <ion-buttons slot="end">
+              <ion-menu-button></ion-menu-button>
+            </ion-buttons>
+          </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/v7/menu/sides/index.md b/static/usage/v7/menu/sides/index.md
new file mode 100644
index 00000000000..f62678655f6
--- /dev/null
+++ b/static/usage/v7/menu/sides/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/sides/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/menu/sides/javascript.md b/static/usage/v7/menu/sides/javascript.md
new file mode 100644
index 00000000000..543806395fc
--- /dev/null
+++ b/static/usage/v7/menu/sides/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-menu side="end" 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-title>Menu</ion-title>
+      <ion-buttons slot="end">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+    </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/sides/react.md b/static/usage/v7/menu/sides/react.md
new file mode 100644
index 00000000000..cbb73598dae
--- /dev/null
+++ b/static/usage/v7/menu/sides/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonMenu side="end" 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>
+            <IonTitle>Menu</IonTitle>
+            <IonButtons slot="end">
+              <IonMenuButton></IonMenuButton>
+            </IonButtons>
+          </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/sides/vue.md b/static/usage/v7/menu/sides/vue.md
new file mode 100644
index 00000000000..66448f05bf6
--- /dev/null
+++ b/static/usage/v7/menu/sides/vue.md
@@ -0,0 +1,41 @@
+```html
+<template>
+  <ion-menu side="end" 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-title>Menu</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+      </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>
+```

From a86d8aefe74fca4c2e974cafd7d3cabeac4e1857 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 19 Jul 2023 21:16:04 +0900
Subject: [PATCH 436/469] fix(): fix conflict package.json

---
 package-lock.json | 13801 ++++++--------------------------------------
 package.json      |     6 +-
 2 files changed, 1693 insertions(+), 12114 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4c9e024287e..aca37bd23e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,7 +1,7 @@
 {
   "name": "ionic-docs",
   "version": "0.0.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
@@ -48,30 +48,38 @@
         "@types/react": "^17.0.37",
         "deepl": "^1.0.13",
         "html-loader": "^3.1.0",
-<<<<<<< HEAD
-        "prettier": "^2.5.0",
-        "ts-node": "^10.4.0",
-=======
         "hygen": "^6.2.11",
         "prettier": "^2.8.8",
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
+        "ts-node": "^10.4.0",
         "typescript": "^4.5.2"
       }
     },
     "node_modules/@algolia/autocomplete-core": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.7.4.tgz",
-      "integrity": "sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==",
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+      "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+      "dependencies": {
+        "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+      "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
       "dependencies": {
-        "@algolia/autocomplete-shared": "1.7.4"
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "search-insights": ">= 1 < 3"
       }
     },
     "node_modules/@algolia/autocomplete-preset-algolia": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.4.tgz",
-      "integrity": "sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==",
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+      "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
       "dependencies": {
-        "@algolia/autocomplete-shared": "1.7.4"
+        "@algolia/autocomplete-shared": "1.9.3"
       },
       "peerDependencies": {
         "@algolia/client-search": ">= 4.9.1 < 6",
@@ -79,79 +87,83 @@
       }
     },
     "node_modules/@algolia/autocomplete-shared": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.4.tgz",
-      "integrity": "sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg=="
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
     },
     "node_modules/@algolia/cache-browser-local-storage": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.15.0.tgz",
-      "integrity": "sha512-uxxFhTWh4JJDb2+FFSmNMfEQ8p9o2vjSpU7iW007QX3OvqljPPN68lk3bpZVaG8pwr5MU1DqpkZ71FcQdVTjgQ==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.19.0.tgz",
+      "integrity": "sha512-G2NxUr3+gFMFwrEsjy7DwZJYXIxBQC5DeRZVKVEpTxW8AkBI2Y7MF+VUs4C8qqE3lHuioym4rvDipzH1xk3DKw==",
       "dependencies": {
-        "@algolia/cache-common": "4.15.0"
+        "@algolia/cache-common": "4.19.0"
       }
     },
     "node_modules/@algolia/cache-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.15.0.tgz",
-      "integrity": "sha512-Me3PbI4QurAM+3D+htIE0l1xt6+bl/18SG6Wc7bPQEZAtN7DTGz22HqhKNyLF2lR/cOfpaH7umXZlZEhIHf7gQ=="
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.19.0.tgz",
+      "integrity": "sha512-4zFZCC0vYTvfoFSyAXEXDtQFamMibtMPjARirfvRlfgK+5YXW9qJIV+V7O/4qb1mH6RjngvHOo3GDE1xDoIzKA=="
     },
     "node_modules/@algolia/cache-in-memory": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.15.0.tgz",
-      "integrity": "sha512-B9mg1wd7CKMfpkbiTQ8KlcKkH6ut/goVaI6XmDCUczOOqeuZlV34tuEi7o3Xo1j66KWr/d9pMjjGYcoVPCVeOA==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.19.0.tgz",
+      "integrity": "sha512-Q6z2p4MaiWs4PXB4NQ5l/ZE1j54mF1xlnqOLw0TKKXBhlNM5pOl5XKSvr/t/KHfrkO1/ua/f/YW71iA/lPGn+A==",
       "dependencies": {
-        "@algolia/cache-common": "4.15.0"
+        "@algolia/cache-common": "4.19.0"
       }
     },
     "node_modules/@algolia/client-account": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.15.0.tgz",
-      "integrity": "sha512-8wqI33HRZy5ydfFt6F5vMhtkOiAUhVfSCYXx4U3Go5RALqWLgVUp6wzOo0mr1z08POCkHDpbQMQvyayb1CZ/kw==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.19.0.tgz",
+      "integrity": "sha512-/0ZASb3ErYjM9GJijaF6JDDhDiyGYwp2FQ2QInUzH0mq/+a5s1PMI3r/8NV1DmlX+p93d2QplnLpjgNTn4eafw==",
       "dependencies": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/client-search": "4.15.0",
-        "@algolia/transporter": "4.15.0"
+        "@algolia/client-common": "4.19.0",
+        "@algolia/client-search": "4.19.0",
+        "@algolia/transporter": "4.19.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.15.0.tgz",
-      "integrity": "sha512-jrPjEeNEIIQKeA1XCZXx3f3aybtwF7wjYlnfHbLARuZ9AuHzimOKjX0ZwqvMmvTsHivpcZ2rqY+j1E8HoH1ELA==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.19.0.tgz",
+      "integrity": "sha512-tB9L0YJ86a1e/ibNdnbFw+yOKooQlmh95Ld6Qyj4GQ1vFmzBpd4x4ilhyFFXbOjsvNGgALu8+44gp5h2ynxrwg==",
       "dependencies": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/client-search": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
+        "@algolia/client-common": "4.19.0",
+        "@algolia/client-search": "4.19.0",
+        "@algolia/requester-common": "4.19.0",
+        "@algolia/transporter": "4.19.0"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.15.0.tgz",
-      "integrity": "sha512-PlsJMObZuYw4JlG5EhYv1PHDOv7n5mD5PzqFyoNfSOYaEPRZepa3W579ya29yOu3FZ0VGMNJmB7Q5v/+/fwvIw==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.19.0.tgz",
+      "integrity": "sha512-tiEyCKkkG5Ig04ATYlt1v41UJb/lS4RmJVXEAsaTkoyB5iUCOChE5WEVPPuJbO/5tSTCbIF4P+g5BjQDb7aGBA==",
       "dependencies": {
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
+        "@algolia/requester-common": "4.19.0",
+        "@algolia/transporter": "4.19.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.15.0.tgz",
-      "integrity": "sha512-Bf0bhRAiNL9LWurzyHRH8UBi4fDt3VbCNkInxVngKQT1uCZWXecwoPWGhcSSpdanBqFJA/1WBt+BWx7a50Bhlg==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.19.0.tgz",
+      "integrity": "sha512-nG56w0dphlStCOgB80q0ug0SHYM+tQosL4Qprc+cy8ckFhTgC3hRtyRYHYGPk9txow5pPKDtyb5rnr3oviKP1Q==",
       "dependencies": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
+        "@algolia/client-common": "4.19.0",
+        "@algolia/requester-common": "4.19.0",
+        "@algolia/transporter": "4.19.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.15.0.tgz",
-      "integrity": "sha512-dTwZD4u53WdmexnMcoO2Qd/+YCP3ESXKOtD2MryQ1a9dHwB2Y3Qob0kyS1PG82idwM3enbznvscI9Sf4o9PUWQ==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.19.0.tgz",
+      "integrity": "sha512-kkqvljLIBYFv+GMefIq0wv2cRP30NG5/INyL1OKr8Qk4Nk0FciFF3wdxIgv6fm156x1q4V0fLw5zwMMWMPOsLQ==",
       "dependencies": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
+        "@algolia/client-common": "4.19.0",
+        "@algolia/requester-common": "4.19.0",
+        "@algolia/transporter": "4.19.0"
       }
     },
     "node_modules/@algolia/events": {
@@ -160,55 +172,55 @@
       "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
     },
     "node_modules/@algolia/logger-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.15.0.tgz",
-      "integrity": "sha512-D8OFwn/HpvQz66goIcjxOKsYBMuxiruxJ3cA/bnc0EiDvSA2P2z6bNQWgS5gbstuTZIJmbhr+53NyOxFkmMNAA=="
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.19.0.tgz",
+      "integrity": "sha512-2YdIHiQwlUCdhFFK1rE53VCEc8scTUcQLWJgpzi1amvP/ffUog4h5VXdGhyhHzYeAexMsaELX2/sEJa4lgOzng=="
     },
     "node_modules/@algolia/logger-console": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.15.0.tgz",
-      "integrity": "sha512-pQOvVaRSEJQJRXKTnxEA6nN1hipSQadJJ4einw0nIlfMOGZh/kps1ybh8vRUlUGyfEuN/3dyFs0W3Ac7hIItlg==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.19.0.tgz",
+      "integrity": "sha512-JjbFPW35gm1RswkB3sgIAS/TjXoqG3FR8Gvsg8lPIB2oh8mcpybyJOUcq56sAfbIQ6n0aFuG4lgqES5TqlWzXw==",
       "dependencies": {
-        "@algolia/logger-common": "4.15.0"
+        "@algolia/logger-common": "4.19.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.15.0.tgz",
-      "integrity": "sha512-va186EfALF+6msYZXaoBSxcnFCg3SoWJ+uv1yMyhQRJRe7cZSHWSVT3s40vmar90gxlBu80KMVwVlsvJhJv6ew==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.19.0.tgz",
+      "integrity": "sha512-5c3FlK7ZJ6oiLuZHe0iSpPzWlHCzeunQS7nlBsB4sEecVcvRJfXOklLh2vZfouQdaT14gXJ+Hwb2SuyRQLU6Ug==",
       "dependencies": {
-        "@algolia/requester-common": "4.15.0"
+        "@algolia/requester-common": "4.19.0"
       }
     },
     "node_modules/@algolia/requester-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.15.0.tgz",
-      "integrity": "sha512-w0UUzxElbo4hrKg4QP/jiXDNbIJuAthxdlkos9nS8KAPK2XI3R9BlUjLz/ZVs4F9TDGI0mhjrNHhZ12KXcoyhg=="
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.19.0.tgz",
+      "integrity": "sha512-oBsoYDNx09L163N9aQM/FrGfLoU/sLvvzcHw1fdJg5eysTAXCvdMNXk29ocy0rhq2deQ8ccdU/Z9Qu0RfLGUmA=="
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.15.0.tgz",
-      "integrity": "sha512-eeEOhFtgwKcgAlKAZpgBRZJ0ILSEBCXxZ9uwfVWPD24W1b6z08gVoTJ6J7lCeCnJmudg+tMElDnGzHkjup9CJA==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.19.0.tgz",
+      "integrity": "sha512-UkTZEg5q9VTqfa8cPJbeDpu0Ff50aPx2MxGoYP2v25NFFcTlYRufiPBtux0ZKSyXTaoNPm/OBldWlDi9bTx1jA==",
       "dependencies": {
-        "@algolia/requester-common": "4.15.0"
+        "@algolia/requester-common": "4.19.0"
       }
     },
     "node_modules/@algolia/transporter": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.15.0.tgz",
-      "integrity": "sha512-JoWR+ixG3EmA0UPntQFN/FV5TasYcYu93d5+oKzHFeZ6Z7rtW5Im9iy/Oh/ggk1AAN5fTdqKewtbBpdaYDbKsQ==",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.19.0.tgz",
+      "integrity": "sha512-xgpU6eTzHJ8rqEvhVW9DdyIC+rsRYovIGpCz8k9JjwpLHNltu8wTQik0hasb1z16mFaIQDzgJTxo/C4ciMMr6w==",
       "dependencies": {
-        "@algolia/cache-common": "4.15.0",
-        "@algolia/logger-common": "4.15.0",
-        "@algolia/requester-common": "4.15.0"
+        "@algolia/cache-common": "4.19.0",
+        "@algolia/logger-common": "4.19.0",
+        "@algolia/requester-common": "4.19.0"
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
-      "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.1.0",
+        "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
       },
       "engines": {
@@ -216,44 +228,44 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
+      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
       "dependencies": {
-        "@babel/highlight": "^7.18.6"
+        "@babel/highlight": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.0.tgz",
-      "integrity": "sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.0.tgz",
-      "integrity": "sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz",
+      "integrity": "sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.0",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-module-transforms": "^7.21.0",
-        "@babel/helpers": "^7.21.0",
-        "@babel/parser": "^7.21.0",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0",
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.9",
+        "@babel/helper-module-transforms": "^7.22.9",
+        "@babel/helpers": "^7.22.6",
+        "@babel/parser": "^7.22.7",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.8",
+        "@babel/types": "^7.22.5",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.2.2",
-        "semver": "^6.3.0"
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -264,19 +276,19 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.1.tgz",
-      "integrity": "sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
+      "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
       "dependencies": {
-        "@babel/types": "^7.21.0",
+        "@babel/types": "^7.22.5",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -285,52 +297,38 @@
         "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz",
+      "integrity": "sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==",
       "dependencies": {
-        "@babel/helper-explode-assignable-expression": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
-      "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz",
+      "integrity": "sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==",
       "dependencies": {
-        "@babel/compat-data": "^7.20.5",
-        "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.21.3",
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-validator-option": "^7.22.5",
+        "browserslist": "^4.21.9",
         "lru-cache": "^5.1.1",
-        "semver": "^6.3.0"
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -340,26 +338,27 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz",
-      "integrity": "sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.9.tgz",
+      "integrity": "sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-member-expression-to-functions": "^7.21.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/helper-split-export-declaration": "^7.18.6"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -368,13 +367,22 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.0.tgz",
-      "integrity": "sha512-N+LaFW/auRSWdx7SHD/HiARwXQju1vXTW4fKr4u5SgBUTm51OKEjKgj+cs00ggW3kEvNqwErnlwuq7Y3xBe4eg==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz",
+      "integrity": "sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "regexpu-core": "^5.3.1"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -383,140 +391,127 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
-      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.1.tgz",
+      "integrity": "sha512-kX4oXixDxG197yhX+J3Wp+NpL2wuCFjWQAr6yX2jtCnflK9ulMI51ULFGIrWiX1jGfvAxdHp+XQCcP2bZGPs9A==",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.17.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
         "debug": "^4.1.1",
         "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2",
-        "semver": "^6.1.2"
+        "resolve": "^1.14.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"
-      },
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
-      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
       "dependencies": {
-        "@babel/template": "^7.20.7",
-        "@babel/types": "^7.21.0"
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
-      "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
+      "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
       "dependencies": {
-        "@babel/types": "^7.21.0"
+        "@babel/types": "^7.22.5"
       },
       "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+      "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
-      "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+      "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.20.2",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/helper-validator-identifier": "^7.19.1",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.2",
-        "@babel/types": "^7.21.2"
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
-      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
       "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==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz",
+      "integrity": "sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==",
       "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"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-wrap-function": "^7.22.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -526,111 +521,110 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
-      "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz",
+      "integrity": "sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-member-expression-to-functions": "^7.20.7",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.7",
-        "@babel/types": "^7.20.7"
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-simple-access": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
-      "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
       "dependencies": {
-        "@babel/types": "^7.20.2"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
-      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
       "dependencies": {
-        "@babel/types": "^7.20.0"
+        "@babel/types": "^7.22.5"
       },
       "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==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.19.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
-      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+      "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
-      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.9.tgz",
+      "integrity": "sha512-sZ+QzfauuUEfxSEjKFmi3qDSHgLsTPK/pEpoD/qonZKOtTPTLbf59oabPQ4rKekt9lFcj/hTZaOhWwFYrgjk+Q==",
       "dependencies": {
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.20.5",
-        "@babel/types": "^7.20.5"
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.0.tgz",
-      "integrity": "sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.6.tgz",
+      "integrity": "sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==",
       "dependencies": {
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0"
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.6",
+        "@babel/types": "^7.22.5"
       },
       "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
+      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.22.5",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       },
@@ -703,9 +697,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
-      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
+      "version": "7.22.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
+      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -714,11 +708,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "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.22.5.tgz",
+      "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -728,13 +722,13 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
-      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
+      "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -743,218 +737,23 @@
         "@babel/core": "^7.13.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
-      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-remap-async-to-generator": "^7.18.9",
-        "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
-      "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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-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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
-      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
-      "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
-      "dependencies": {
-        "@babel/compat-data": "^7.20.5",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.20.7"
-      },
-      "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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
-      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@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==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
+      "integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-transform-parameters": "^7.12.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz",
-      "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      },
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1036,11 +835,25 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
-      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz",
+      "integrity": "sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz",
+      "integrity": "sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.19.0"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1049,6 +862,17 @@
         "@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",
@@ -1061,11 +885,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
+      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1169,11 +993,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
-      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz",
+      "integrity": "sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.19.0"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1182,28 +1006,27 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
-      "integrity": "sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==",
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@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"
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
-      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
+      "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-remap-async-to-generator": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1212,12 +1035,15 @@
         "@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==",
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.22.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.7.tgz",
+      "integrity": "sha512-7HmE7pk/Fmke45TODvxvkxRMV9RazV+ZZzhOL9AG8G29TLrr3jkjwF7uJfxZ30EoXpO+LJkq4oA8NjO2DTnEDg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.5",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1226,12 +1052,14 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
-      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
+      "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1240,20 +1068,12 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
-      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "globals": "^11.1.0"
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
+      "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1262,13 +1082,12 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz",
-      "integrity": "sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==",
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.5.tgz",
+      "integrity": "sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/template": "^7.20.7"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1277,12 +1096,13 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz",
-      "integrity": "sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==",
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz",
+      "integrity": "sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1291,13 +1111,80 @@
         "@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==",
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz",
+      "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz",
+      "integrity": "sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.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.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
+      "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/template": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.5.tgz",
+      "integrity": "sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
+      "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1307,11 +1194,26 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
+      "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz",
+      "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1321,12 +1223,27 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
+      "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz",
+      "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1336,11 +1253,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz",
-      "integrity": "sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
+      "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1350,13 +1267,28 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
+      "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz",
+      "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1366,11 +1298,26 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
+      "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz",
+      "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1380,11 +1327,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
+      "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1394,12 +1341,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.20.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
-      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
+      "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1409,13 +1356,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz",
-      "integrity": "sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz",
+      "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.21.2",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-simple-access": "^7.20.2"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1425,14 +1372,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.20.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
-      "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
+      "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
       "dependencies": {
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-identifier": "^7.19.1"
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1442,12 +1389,12 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
+      "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1457,12 +1404,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
-      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1472,11 +1419,59 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
+      "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz",
+      "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@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-transform-numeric-separator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz",
+      "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
+      "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1486,12 +1481,43 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
+      "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz",
+      "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@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-transform-optional-chaining": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.6.tgz",
+      "integrity": "sha512-Vd5HiWml0mDVtcLHIoEU5sw6HOUW/Zk0acLs/SAeuLzkGNOPc9DB4nkUajemhCmTIz3eiaKREZn2hQQqF79YTg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1501,11 +1527,43 @@
       }
     },
     "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz",
-      "integrity": "sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
+      "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz",
+      "integrity": "sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz",
+      "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1515,11 +1573,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
+      "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1529,11 +1587,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-constant-elements": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz",
-      "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.22.5.tgz",
+      "integrity": "sha512-BF5SXoO+nX3h5OhlN78XbbDrBOffv+AxPP2ENaJOVqjWCgBDeOY3WcaUcddutGSfoap+5NEQ/q/4I3WZIvgkXA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1543,11 +1601,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz",
+      "integrity": "sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1557,15 +1615,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz",
-      "integrity": "sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz",
+      "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.21.0"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1575,11 +1633,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+      "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
       "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.18.6"
+        "@babel/plugin-transform-react-jsx": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1589,12 +1647,12 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz",
+      "integrity": "sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1604,11 +1662,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz",
-      "integrity": "sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.5.tgz",
+      "integrity": "sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-plugin-utils": "^7.22.5",
         "regenerator-transform": "^0.15.1"
       },
       "engines": {
@@ -1619,11 +1677,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
+      "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1633,16 +1691,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz",
-      "integrity": "sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.1",
-        "semver": "^6.3.0"
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.9.tgz",
+      "integrity": "sha512-9KjBH61AGJetCPYp/IEyLEp47SyybZb0nDRpBvmtEkm+rUIwxdlKpyNHI1TmsGkeuLclJdleQHRZ8XLBnnh8CQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "babel-plugin-polyfill-corejs2": "^0.4.4",
+        "babel-plugin-polyfill-corejs3": "^0.8.2",
+        "babel-plugin-polyfill-regenerator": "^0.5.1",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1652,19 +1710,19 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
+      "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1674,12 +1732,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
-      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
+      "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1689,11 +1747,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
+      "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1703,11 +1761,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
+      "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1717,11 +1775,11 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
+      "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1731,13 +1789,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz",
-      "integrity": "sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.9.tgz",
+      "integrity": "sha512-BnVR1CpKiuD0iobHPaM1iLvcwPYN2uVFAqoLVSpEDKWuOikoCv5HbKLxclhKYUXlWkX86DoZGtqI4XhbOsyrMg==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-typescript": "^7.20.0"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.9",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-typescript": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1747,11 +1806,26 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
-      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.5.tgz",
+      "integrity": "sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz",
+      "integrity": "sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1761,12 +1835,12 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
+      "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1775,38 +1849,41 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz",
+      "integrity": "sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
     "node_modules/@babel/preset-env": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
-      "integrity": "sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==",
-      "dependencies": {
-        "@babel/compat-data": "^7.20.1",
-        "@babel/helper-compilation-targets": "^7.20.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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.20.1",
-        "@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.20.2",
-        "@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",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.9.tgz",
+      "integrity": "sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.9",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.5",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
         "@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.20.0",
+        "@babel/plugin-syntax-import-assertions": "^7.22.5",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
         "@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",
@@ -1816,45 +1893,62 @@
         "@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.20.2",
-        "@babel/plugin-transform-classes": "^7.20.2",
-        "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.20.2",
-        "@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.19.6",
-        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
-        "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
-        "@babel/plugin-transform-new-target": "^7.18.6",
-        "@babel/plugin-transform-object-super": "^7.18.6",
-        "@babel/plugin-transform-parameters": "^7.20.1",
-        "@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.19.0",
-        "@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.10",
-        "@babel/plugin-transform-unicode-regex": "^7.18.6",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.22.5",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.7",
+        "@babel/plugin-transform-async-to-generator": "^7.22.5",
+        "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
+        "@babel/plugin-transform-block-scoping": "^7.22.5",
+        "@babel/plugin-transform-class-properties": "^7.22.5",
+        "@babel/plugin-transform-class-static-block": "^7.22.5",
+        "@babel/plugin-transform-classes": "^7.22.6",
+        "@babel/plugin-transform-computed-properties": "^7.22.5",
+        "@babel/plugin-transform-destructuring": "^7.22.5",
+        "@babel/plugin-transform-dotall-regex": "^7.22.5",
+        "@babel/plugin-transform-duplicate-keys": "^7.22.5",
+        "@babel/plugin-transform-dynamic-import": "^7.22.5",
+        "@babel/plugin-transform-exponentiation-operator": "^7.22.5",
+        "@babel/plugin-transform-export-namespace-from": "^7.22.5",
+        "@babel/plugin-transform-for-of": "^7.22.5",
+        "@babel/plugin-transform-function-name": "^7.22.5",
+        "@babel/plugin-transform-json-strings": "^7.22.5",
+        "@babel/plugin-transform-literals": "^7.22.5",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.22.5",
+        "@babel/plugin-transform-member-expression-literals": "^7.22.5",
+        "@babel/plugin-transform-modules-amd": "^7.22.5",
+        "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+        "@babel/plugin-transform-modules-systemjs": "^7.22.5",
+        "@babel/plugin-transform-modules-umd": "^7.22.5",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+        "@babel/plugin-transform-new-target": "^7.22.5",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.5",
+        "@babel/plugin-transform-numeric-separator": "^7.22.5",
+        "@babel/plugin-transform-object-rest-spread": "^7.22.5",
+        "@babel/plugin-transform-object-super": "^7.22.5",
+        "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.22.6",
+        "@babel/plugin-transform-parameters": "^7.22.5",
+        "@babel/plugin-transform-private-methods": "^7.22.5",
+        "@babel/plugin-transform-private-property-in-object": "^7.22.5",
+        "@babel/plugin-transform-property-literals": "^7.22.5",
+        "@babel/plugin-transform-regenerator": "^7.22.5",
+        "@babel/plugin-transform-reserved-words": "^7.22.5",
+        "@babel/plugin-transform-shorthand-properties": "^7.22.5",
+        "@babel/plugin-transform-spread": "^7.22.5",
+        "@babel/plugin-transform-sticky-regex": "^7.22.5",
+        "@babel/plugin-transform-template-literals": "^7.22.5",
+        "@babel/plugin-transform-typeof-symbol": "^7.22.5",
+        "@babel/plugin-transform-unicode-escapes": "^7.22.5",
+        "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
+        "@babel/plugin-transform-unicode-regex": "^7.22.5",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
         "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.1",
-        "core-js-compat": "^3.25.1",
-        "semver": "^6.3.0"
+        "@babel/types": "^7.22.5",
+        "babel-plugin-polyfill-corejs2": "^0.4.4",
+        "babel-plugin-polyfill-corejs3": "^0.8.2",
+        "babel-plugin-polyfill-regenerator": "^0.5.1",
+        "core-js-compat": "^3.31.0",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1864,9 +1958,9 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1887,16 +1981,16 @@
       }
     },
     "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==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.22.5.tgz",
+      "integrity": "sha512-M+Is3WikOpEJHgR385HbuCITPTaPRaNkibTEa9oiofmJvIsrceb4yp9RL9Kb+TE8LznmeyZqpP+Lopwcx59xPQ==",
       "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"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-transform-react-display-name": "^7.22.5",
+        "@babel/plugin-transform-react-jsx": "^7.22.5",
+        "@babel/plugin-transform-react-jsx-development": "^7.22.5",
+        "@babel/plugin-transform-react-pure-annotations": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1906,13 +2000,15 @@
       }
     },
     "node_modules/@babel/preset-typescript": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz",
-      "integrity": "sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.22.5.tgz",
+      "integrity": "sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-option": "^7.21.0",
-        "@babel/plugin-transform-typescript": "^7.21.0"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+        "@babel/plugin-transform-typescript": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1927,9 +2023,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1938,11 +2034,11 @@
       }
     },
     "node_modules/@babel/runtime-corejs3": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.21.0.tgz",
-      "integrity": "sha512-TDD4UJzos3JJtM+tHX+w2Uc+KWj7GV+VKKFdMVd2Rx8sdA19hcc3P3AHFYd5LVOw+pYuSd5lICC3gm52B6Rwxw==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.22.6.tgz",
+      "integrity": "sha512-M+37LLIRBTEVjktoJjbw4KVhupF0U/3PYUCbBwgAd9k17hoKhRu1n935QiG7Tuxv0LJOMrb2vuKEeYUlv0iyiw==",
       "dependencies": {
-        "core-js-pure": "^3.25.1",
+        "core-js-pure": "^3.30.2",
         "regenerator-runtime": "^0.13.11"
       },
       "engines": {
@@ -1950,31 +2046,31 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
-      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
       "dependencies": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7"
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.2.tgz",
-      "integrity": "sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==",
-      "dependencies": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.1",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.21.2",
-        "@babel/types": "^7.21.2",
+      "version": "7.22.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.8.tgz",
+      "integrity": "sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.7",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.22.7",
+        "@babel/types": "^7.22.5",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -1983,12 +2079,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
-      "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.19.4",
-        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -2026,18 +2122,18 @@
       }
     },
     "node_modules/@docsearch/css": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.3.tgz",
-      "integrity": "sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg=="
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.1.tgz",
+      "integrity": "sha512-2Pu9HDg/uP/IT10rbQ+4OrTQuxIWdKVUEdcw9/w7kZJv9NeHS6skJx1xuRiFyoGKwAzcHXnLp7csE99sj+O1YA=="
     },
     "node_modules/@docsearch/react": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.3.tgz",
-      "integrity": "sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.1.tgz",
+      "integrity": "sha512-t5mEODdLzZq4PTFAm/dvqcvZFdPDMdfPE5rJS5SC8OUq9mPzxEy6b+9THIqNM9P0ocCb4UC5jqBrxKclnuIbzQ==",
       "dependencies": {
-        "@algolia/autocomplete-core": "1.7.4",
-        "@algolia/autocomplete-preset-algolia": "1.7.4",
-        "@docsearch/css": "3.3.3",
+        "@algolia/autocomplete-core": "1.9.3",
+        "@algolia/autocomplete-preset-algolia": "1.9.3",
+        "@docsearch/css": "3.5.1",
         "algoliasearch": "^4.0.0"
       },
       "peerDependencies": {
@@ -2751,27 +2847,22 @@
       }
     },
     "node_modules/@ionic/prettier-config": {
-<<<<<<< HEAD
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz",
-      "integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==",
-=======
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-3.0.0.tgz",
-      "integrity": "sha512-dg5ovuMjfE5h3WW3kzfe9+7IflH9M9F7qlVYfpyONYlgs+4M2JZh628Csal4lWeyWGwugqMDk2zy7/fM7ygB8A==",
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-3.1.0.tgz",
+      "integrity": "sha512-5cQ9qy9G0JDcIfUSP03EyX9ReEHK0mD34anvc2eCNpcca8GbY/wB0QS125FBkmV2DhDc5BvQSSM6VWZSGkxDJQ==",
       "dev": true,
       "peerDependencies": {
-        "prettier": "^2.4.0"
+        "prettier": "^2.4.0 || ^3.0.0"
       }
     },
     "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==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.0",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -2794,41 +2885,33 @@
       }
     },
     "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==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
       "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=="
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.17",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
-      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "dependencies": {
         "@jridgewell/resolve-uri": "3.1.0",
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@jridgewell/trace-mapping/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/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -2906,9 +2989,9 @@
       }
     },
     "node_modules/@mdx-js/mdx/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "bin": {
         "semver": "bin/semver"
       }
@@ -2962,6 +3045,14 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@nicolo-ribaudo/semver-v6": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
+      "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3000,18 +3091,18 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
       }
     },
     "node_modules/@prismicio/client": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.7.3.tgz",
-      "integrity": "sha512-zQVZhuQDYIgdaY636u+QNk2tvvbtpkaKsEiLT0Ef51nFW/y5fqpOG5U0eU3cVsikZaYNlZ17x6O1wmvVCLdimQ==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.8.0.tgz",
+      "integrity": "sha512-6E2dGp1zsZRKe9g/YH/vUeKf2OZJqZJGJjTXuI+EjQxNROf0L1aTDxcpcxWRwLbHxFyMxdNAMY4rUyuNzRKY9Q==",
       "dependencies": {
         "@prismicio/helpers": "^2.3.8",
         "@prismicio/types": "^0.2.7"
@@ -3034,31 +3125,24 @@
       }
     },
     "node_modules/@prismicio/react": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.5.2.tgz",
-      "integrity": "sha512-X00mT3/mHDnnb9NKUeAZnBWDDngXhr84RVzh9+eSeZjJKIVYEHHgfZqex4R6LgjZzeueaGp0UCLhwrUeiRp5DA==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.7.1.tgz",
+      "integrity": "sha512-AEPL1Ng6K5+dqUG6RTARMQg3g3oGWcIjRl5bgGaJwvRP43wp3gltdZm4P/63XV3Rb4MuMdp7IRT93XGhzLwkww==",
       "dependencies": {
-        "@prismicio/helpers": "^2.3.8",
-        "@prismicio/richtext": "^2.1.3",
-        "@prismicio/types": "^0.2.7"
+        "@prismicio/richtext": "^2.1.5"
       },
       "engines": {
         "node": ">=12.7.0"
       },
       "peerDependencies": {
-        "@prismicio/client": "^6",
-        "react": "^16.8 || ^17 || ^18"
-      },
-      "peerDependenciesMeta": {
-        "@prismicio/client": {
-          "optional": true
-        }
+        "@prismicio/client": "^6 || ^7",
+        "react": "^18"
       }
     },
     "node_modules/@prismicio/richtext": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.4.tgz",
-      "integrity": "sha512-hyC8XItj+2yMmLGNjg9xGA/lRMO5UgbPF132VFrpZHzHhtIKvHN3iYxCZxnrEoPaTcT6JjA8vWyYLjmmB49bvw==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.5.tgz",
+      "integrity": "sha512-Sf6iCsciPmfK3uQeFmeY9RTRSuhrCVzyU39OkiJ1VJn8O0531pKapGoWS+5WGxouJtE5+jGqV8L+L2mKP7NkXQ==",
       "dependencies": {
         "@prismicio/types": "^0.2.7"
       },
@@ -3067,9 +3151,9 @@
       }
     },
     "node_modules/@prismicio/types": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.7.tgz",
-      "integrity": "sha512-xHPBWg+lPcl8U97VB/2oYK3MJlQoVPZq91hbeQO8WRyvq+zgpNST3xFOTk8SkQpgoH6wd50AxGZELvPrpojajQ==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.8.tgz",
+      "integrity": "sha512-EmuYYil56U+UtEifMD/9TmLzpWliV+X6kypwPq47GNXmIXyFK1JsP3z872fUziXwoBjd2YILj28DNdYXlLOpXg==",
       "engines": {
         "node": ">=12.7.0"
       }
@@ -3152,9 +3236,9 @@
       }
     },
     "node_modules/@stackblitz/sdk": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.8.2.tgz",
-      "integrity": "sha512-3aTg0Tb9dNs1huPkpdYxPEX/yc8A28eZneUMOEJzOLi7EJwl5onr9gCAVjIOkN4WLYu1iBSiJiGBYT629bZIJQ=="
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.9.0.tgz",
+      "integrity": "sha512-3m6C7f8pnR5KXys/Hqx2x6ylnpqOak6HtnZI6T5keEO0yT+E4Spkw37VEbdwuC+2oxmjdgq6YZEgiKX7hM1GmQ=="
     },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
@@ -3419,9 +3503,9 @@
       "dev": true
     },
     "node_modules/@tsconfig/node16": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
-      "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
       "dev": true
     },
     "node_modules/@types/body-parser": {
@@ -3450,18 +3534,18 @@
       }
     },
     "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==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
+      "integrity": "sha512-4x5FkPpLipqwthjPsF7ZRbOv3uoLUFkTA9G9v583qi4pACvq0uTELrB8OLUzPWUI4IJIyvM85vzkV1nyiI2Lig==",
       "dependencies": {
         "@types/express-serve-static-core": "*",
         "@types/node": "*"
       }
     },
     "node_modules/@types/eslint": {
-      "version": "8.21.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
-      "integrity": "sha512-rc9K8ZpVjNcLs8Fp0dkozd5Pt2Apk1glO4Vgz8ix1u6yFByxfqo5Yavpy65o+93TAe24jr7v+eSBtFLvOQtCRQ==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz",
+      "integrity": "sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -3493,13 +3577,14 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.33",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz",
-      "integrity": "sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==",
+      "version": "4.17.35",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz",
+      "integrity": "sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
-        "@types/range-parser": "*"
+        "@types/range-parser": "*",
+        "@types/send": "*"
       }
     },
     "node_modules/@types/github-slugger": {
@@ -3508,11 +3593,11 @@
       "integrity": "sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g=="
     },
     "node_modules/@types/hast": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
-      "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.5.tgz",
+      "integrity": "sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==",
       "dependencies": {
-        "@types/unist": "*"
+        "@types/unist": "^2"
       }
     },
     "node_modules/@types/history": {
@@ -3526,36 +3611,41 @@
       "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-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ=="
+    },
     "node_modules/@types/http-proxy": {
-      "version": "1.17.10",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
-      "integrity": "sha512-Qs5aULi+zV1bwKAg5z1PWnDXWmsn+LxIvUGv6E2+OOMYhclZMO+OXd9pYVf2gLykf2I7IV2u7oTHwChPNsvJ7g==",
+      "version": "1.17.11",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.11.tgz",
+      "integrity": "sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==",
       "dependencies": {
         "@types/node": "*"
       }
     },
     "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=="
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
     },
     "node_modules/@types/mdast": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
-      "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.12.tgz",
+      "integrity": "sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==",
       "dependencies": {
-        "@types/unist": "*"
+        "@types/unist": "^2"
       }
     },
     "node_modules/@types/mime": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
-      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
+      "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": "18.15.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.0.tgz",
-      "integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w=="
+      "version": "20.4.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz",
+      "integrity": "sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3588,9 +3678,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "17.0.53",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.53.tgz",
-      "integrity": "sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==",
+      "version": "17.0.62",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.62.tgz",
+      "integrity": "sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3617,14 +3707,14 @@
       }
     },
     "node_modules/@types/react-router-config": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@types/react-router-config/-/react-router-config-5.0.6.tgz",
-      "integrity": "sha512-db1mx37a1EJDf1XeX8jJN7R3PZABmJQXR8r28yUjVMFSjkmnQo6X6pOEEmNl+Tp2gYQOGPdYbFIipBtdElZ3Yg==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-router-config/-/react-router-config-5.0.7.tgz",
+      "integrity": "sha512-pFFVXUIydHlcJP6wJm7sDii5mD/bCmmAY0wQzq+M+uX7bqS95AQqHZWP1iNMKrWVQSuHIzj5qi9BvrtLX2/T4w==",
       "dev": true,
       "dependencies": {
         "@types/history": "^4.7.11",
         "@types/react": "*",
-        "@types/react-router": "*"
+        "@types/react-router": "^5.1.0"
       }
     },
     "node_modules/@types/react-router-dom": {
@@ -3652,9 +3742,18 @@
       }
     },
     "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=="
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
+    "node_modules/@types/send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
     },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
@@ -3665,10 +3764,11 @@
       }
     },
     "node_modules/@types/serve-static": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
-      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.2.tgz",
+      "integrity": "sha512-J2LqtvFYCzaj8pVYKw8klQXrLLk7TBZmQ4ShlcdkELFKGwGMfevMLneMMRkMgZxotOD9wg497LpC7O8PcvAmfw==",
       "dependencies": {
+        "@types/http-errors": "*",
         "@types/mime": "*",
         "@types/node": "*"
       }
@@ -3682,146 +3782,146 @@
       }
     },
     "node_modules/@types/unist": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
-      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.7.tgz",
+      "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g=="
     },
     "node_modules/@types/ws": {
-      "version": "8.5.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "version": "8.5.5",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
       "dependencies": {
         "@types/node": "*"
       }
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
       }
     },
     "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=="
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
     },
     "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=="
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
     },
     "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=="
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA=="
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
-        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
         "@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=="
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
       "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"
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6"
       }
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
       "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
       "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=="
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
       "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"
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-opt": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6",
+        "@webassemblyjs/wast-printer": "1.11.6"
       }
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
       "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"
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-buffer": "1.11.1",
-        "@webassemblyjs/wasm-gen": "1.11.1",
-        "@webassemblyjs/wasm-parser": "1.11.1"
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6"
       }
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
       "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"
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "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==",
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -3868,9 +3968,9 @@
       }
     },
     "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==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -3971,30 +4071,30 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.15.0.tgz",
-      "integrity": "sha512-+vgKQF5944dYsz9zhKk07JbOYeNdKisoD5GeG0woBL3nLzbn2a+nGwki60DXg7CXvaFXBcTXyJG4C+VaBVd44g==",
-      "dependencies": {
-        "@algolia/cache-browser-local-storage": "4.15.0",
-        "@algolia/cache-common": "4.15.0",
-        "@algolia/cache-in-memory": "4.15.0",
-        "@algolia/client-account": "4.15.0",
-        "@algolia/client-analytics": "4.15.0",
-        "@algolia/client-common": "4.15.0",
-        "@algolia/client-personalization": "4.15.0",
-        "@algolia/client-search": "4.15.0",
-        "@algolia/logger-common": "4.15.0",
-        "@algolia/logger-console": "4.15.0",
-        "@algolia/requester-browser-xhr": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/requester-node-http": "4.15.0",
-        "@algolia/transporter": "4.15.0"
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.19.0.tgz",
+      "integrity": "sha512-UIzLHOkprUFzwFxqgw+TOhEG2usLv8q9l4V/Ul82IgNNO+g5RjENd5Sl/J6BU4BlRdMLy/OvPfbSc7Y1dOdwgA==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.19.0",
+        "@algolia/cache-common": "4.19.0",
+        "@algolia/cache-in-memory": "4.19.0",
+        "@algolia/client-account": "4.19.0",
+        "@algolia/client-analytics": "4.19.0",
+        "@algolia/client-common": "4.19.0",
+        "@algolia/client-personalization": "4.19.0",
+        "@algolia/client-search": "4.19.0",
+        "@algolia/logger-common": "4.19.0",
+        "@algolia/logger-console": "4.19.0",
+        "@algolia/requester-browser-xhr": "4.19.0",
+        "@algolia/requester-common": "4.19.0",
+        "@algolia/requester-node-http": "4.19.0",
+        "@algolia/transporter": "4.19.0"
       }
     },
     "node_modules/algoliasearch-helper": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.12.0.tgz",
-      "integrity": "sha512-/j1U3PEwdan0n6P/QqSnSpNSLC5+cEMvyljd5CnmNmUjDlGrys+vFEOwjVEnqELIiAGMHEA/Nl3CiKVFBUYqyQ==",
+      "version": "3.13.5",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.13.5.tgz",
+      "integrity": "sha512-UsiDw8/RN3S/46EEJ6s5fX/vCNPlMNPQrB0TL/105Umyc+UdgbErCTaSf46pcVDIctAFN+9HF7txEg1eMHUvww==",
       "dependencies": {
         "@algolia/events": "^4.0.1"
       },
@@ -4007,50 +4107,7 @@
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
       "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
       "dependencies": {
-<<<<<<< HEAD
         "string-width": "^4.1.0"
-=======
-        "string-width": "^3.0.0"
-      }
-    },
-    "node_modules/ansi-align/node_modules/ansi-regex": {
-      "version": "4.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/ansi-align/node_modules/emoji-regex": {
-      "version": "7.0.3",
-      "license": "MIT"
-    },
-    "node_modules/ansi-align/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/ansi-align/node_modules/string-width": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/ansi-align/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
       }
     },
     "node_modules/ansi-colors": {
@@ -4062,30 +4119,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/ansi-escapes": {
-      "version": "4.3.2",
-      "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.21.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/ansi-escapes/node_modules/type-fest": {
-      "version": "0.21.3",
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
-      }
-    },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -4141,6 +4174,18 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -4172,11 +4217,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
+      "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "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/async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+      "dev": true
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -4234,11 +4304,12 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
-      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
       "dependencies": {
-        "follow-redirects": "^1.14.7"
+        "follow-redirects": "^1.14.0"
       }
     },
     "node_modules/babel-loader": {
@@ -4306,44 +4377,36 @@
       "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
-      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.4.tgz",
+      "integrity": "sha512-9WeK9snM1BfxB38goUEv2FLnA6ja07UMfazFHzCXUb3NyDZAwfXvQiURQ6guTTMeHcOsdknULm1PDhs4uWtKyA==",
       "dependencies": {
-        "@babel/compat-data": "^7.17.7",
-        "@babel/helper-define-polyfill-provider": "^0.3.3",
-        "semver": "^6.1.1"
+        "@babel/compat-data": "^7.22.6",
+        "@babel/helper-define-polyfill-provider": "^0.4.1",
+        "@nicolo-ribaudo/semver-v6": "^6.3.3"
       },
       "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.6.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
-      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.2.tgz",
+      "integrity": "sha512-Cid+Jv1BrY9ReW9lIfNlNpsI53N+FN7gE+f73zLAUbr9C52W4gKLWSByx47pfDJsEysojKArqOtOKZSVIIUTuQ==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.3",
-        "core-js-compat": "^3.25.1"
+        "@babel/helper-define-polyfill-provider": "^0.4.1",
+        "core-js-compat": "^3.31.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
-      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.1.tgz",
+      "integrity": "sha512-L8OyySuI6OSQ5hFy9O+7zFjyr4WhAfRjLIOkhQGYl+emwJkd/S4XXT1JpfrgR1jrQ1NcGiOh+yAdGlF8pnC3Jw==",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.3"
+        "@babel/helper-define-polyfill-provider": "^0.4.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
@@ -4409,8 +4472,6 @@
         "node": ">=8"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -4422,11 +4483,6 @@
         "readable-stream": "^3.4.0"
       }
     },
-    "node_modules/bluebird": {
-      "version": "3.7.2",
-      "license": "MIT"
-    },
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
     "node_modules/body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -4472,9 +4528,9 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/bonjour-service": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.0.tgz",
-      "integrity": "sha512-LVRinRB3k1/K0XzZ2p58COnWvkQknIY6sf0zF2rpErvcJXpMBttEPQSxK+HEXSS9VmpZlDoDnQWv8ftJT20B0Q==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz",
+      "integrity": "sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==",
       "dependencies": {
         "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
@@ -4529,9 +4585,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.21.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "version": "4.21.9",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
+      "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4540,13 +4596,17 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
+        "caniuse-lite": "^1.0.30001503",
+        "electron-to-chromium": "^1.4.431",
+        "node-releases": "^2.0.12",
+        "update-browserslist-db": "^1.0.11"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -4818,9 +4878,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001464",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz",
-      "integrity": "sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==",
+      "version": "1.0.30001517",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
+      "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4829,6 +4889,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -5003,16 +5067,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-<<<<<<< HEAD
-    "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/cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -5035,7 +5089,16 @@
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
+      }
+    },
+    "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/clone": {
@@ -5186,9 +5249,9 @@
       "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
     "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=="
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
     },
     "node_modules/combine-promises": {
       "version": "1.1.0",
@@ -5390,9 +5453,9 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
     "node_modules/copy-text-to-clipboard": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
-      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
+      "integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==",
       "engines": {
         "node": ">=12"
       },
@@ -5435,9 +5498,9 @@
       }
     },
     "node_modules/copy-webpack-plugin/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -5452,9 +5515,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.29.0.tgz",
-      "integrity": "sha512-VG23vuEisJNkGl6XQmFJd3rEG/so/CNatqeE+7uZAwTSwFeB/qaO0be8xZYUNWprJ/GIwL8aMt9cj1kvbpTZhg==",
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz",
+      "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5462,11 +5525,11 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.29.0.tgz",
-      "integrity": "sha512-ScMn3uZNAFhK2DGoEfErguoiAHhV2Ju+oJo/jK08p7B3f3UhocUrCCkTvnZaiS+edl5nlIoiBXKcwMc6elv4KQ==",
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.1.tgz",
+      "integrity": "sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA==",
       "dependencies": {
-        "browserslist": "^4.21.5"
+        "browserslist": "^4.21.9"
       },
       "funding": {
         "type": "opencollective",
@@ -5474,9 +5537,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.29.0.tgz",
-      "integrity": "sha512-v94gUjN5UTe1n0yN/opTihJ8QBWD2O8i19RfTZR7foONPWArnjB96QA/wk5ozu1mm6ja3udQCzOzwQXTxi3xOQ==",
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.31.1.tgz",
+      "integrity": "sha512-w+C62kvWti0EPs4KPMCMVv9DriHSXfQOCQ94bGGBiEW5rrbtt/Rz8n5Krhfw9cpFyzXBjf3DB3QnPdEzGDY4Fw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5510,11 +5573,11 @@
       "dev": true
     },
     "node_modules/cross-fetch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
       "dependencies": {
-        "node-fetch": "2.6.7"
+        "node-fetch": "^2.6.12"
       }
     },
     "node_modules/cross-spawn": {
@@ -5581,9 +5644,9 @@
       }
     },
     "node_modules/css-declaration-sorter": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
-      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
       "engines": {
         "node": "^10 || ^12 || >=14"
       },
@@ -5619,9 +5682,9 @@
       }
     },
     "node_modules/css-loader/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -5704,14 +5767,14 @@
       "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==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
-        "ajv": "^8.8.0",
+        "ajv": "^8.9.0",
         "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.0.0"
+        "ajv-keywords": "^5.1.0"
       },
       "engines": {
         "node": ">= 12.13.0"
@@ -5896,9 +5959,9 @@
       "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
     },
     "node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/dag-map": {
       "version": "1.0.2",
@@ -5906,9 +5969,12 @@
       "integrity": "sha512-+LSAiGFwQ9dRnRdOeaj7g47ZFJcOUPukAP8J3A3fuZ1g9Y44BG+P1sgApjLXTQPOzC4+7S9Wr8kXsfpINM4jpw=="
     },
     "node_modules/date-fns": {
-      "version": "2.29.3",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
-      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
       "engines": {
         "node": ">=0.11"
       },
@@ -5962,19 +6028,10 @@
         "querystring": "^0.2.0"
       }
     },
-    "node_modules/deepl/node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-      "dev": true,
-      "dependencies": {
-        "follow-redirects": "^1.14.0"
-      }
-    },
     "node_modules/deepmerge": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
-      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6182,9 +6239,9 @@
       "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==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.0.tgz",
+      "integrity": "sha512-rza3UH1LwdHh9qyPXp8lkwpjSNk/AMD3dPytUoRoqnypDUhY0xvbdmVhWOfxO68frEfV9BU8V12Ez7ZsHGZpCQ==",
       "dependencies": {
         "@leichtgewicht/ip-codec": "^2.0.1"
       },
@@ -6204,9 +6261,9 @@
       }
     },
     "node_modules/docusaurus-plugin-sass": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.3.tgz",
-      "integrity": "sha512-FbaE06K8NF8SPUYTwiG+83/jkXrwHJ/Afjqz3SUIGon6QvFwSSoKOcoxGQmUBnjTOk+deUONDx8jNWsegFJcBQ==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.4.tgz",
+      "integrity": "sha512-r9bLXW6X2z64bzQUQZB1SxmNlGvSO9swTFALgiMjr/1O4FRDti6BseU4Sw2mlZkYvVQTq8cJMJIP6w7z/5We8Q==",
       "dependencies": {
         "sass-loader": "^10.1.1"
       },
@@ -6332,9 +6389,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.328",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.328.tgz",
-      "integrity": "sha512-DE9tTy2PNmy1v55AZAO542ui+MLC2cvINMK4P2LXGsJdput/ThVG9t+QGecPuAZZSgC8XoI+Jh9M1OG9IoNSCw=="
+      "version": "1.4.464",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.464.tgz",
+      "integrity": "sha512-guZ84yoou4+ILNdj0XEbmGs6DEWj6zpVOWYpY09GU66yEb0DSYvP/biBPzHn0GuW/3RC/pnaYNUWlQE1fJYtgA=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -6375,9 +6432,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
-      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
+      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -6415,17 +6472,18 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.21.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
-      "integrity": "sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==",
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
+      "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
       "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.1",
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
         "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.3",
+        "get-intrinsic": "^1.2.1",
         "get-symbol-description": "^1.0.0",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
@@ -6433,8 +6491,8 @@
         "has-property-descriptors": "^1.0.0",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.4",
-        "is-array-buffer": "^3.0.1",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
         "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
@@ -6442,16 +6500,21 @@
         "is-string": "^1.0.7",
         "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.2",
+        "object-inspect": "^1.12.3",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.4.3",
+        "regexp.prototype.flags": "^1.5.0",
+        "safe-array-concat": "^1.0.0",
         "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.7",
         "string.prototype.trimend": "^1.0.6",
         "string.prototype.trimstart": "^1.0.6",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
         "typed-array-length": "^1.0.4",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.9"
+        "which-typed-array": "^1.1.10"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6466,9 +6529,9 @@
       "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=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
+      "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA=="
     },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.1",
@@ -6777,9 +6840,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
+      "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -6832,9 +6895,9 @@
       }
     },
     "node_modules/fbjs": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.4.tgz",
-      "integrity": "sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.5.tgz",
+      "integrity": "sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==",
       "dependencies": {
         "cross-fetch": "^3.1.5",
         "fbjs-css-vars": "^1.0.0",
@@ -6842,7 +6905,7 @@
         "object-assign": "^4.1.0",
         "promise": "^7.1.1",
         "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.30"
+        "ua-parser-js": "^1.0.35"
       }
     },
     "node_modules/fbjs-css-vars": {
@@ -6881,9 +6944,9 @@
       }
     },
     "node_modules/file-loader/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -7005,9 +7068,9 @@
       }
     },
     "node_modules/flux": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.3.tgz",
-      "integrity": "sha512-yKAbrp7JhZhj6uiT1FTuVMlIAT1J4jqEyBpFApi1kxpGZCvacMVc/t1pMQyotqHhAgvoE3bNvAykhCo2CLjnYw==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.4.tgz",
+      "integrity": "sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==",
       "dependencies": {
         "fbemitter": "^3.0.0",
         "fbjs": "^3.0.1"
@@ -7208,9 +7271,9 @@
       }
     },
     "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=="
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.4.tgz",
+      "integrity": "sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ=="
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
@@ -7277,12 +7340,13 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
-      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3"
       },
       "funding": {
@@ -7491,9 +7555,9 @@
       }
     },
     "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=="
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/gray-matter": {
       "version": "4.0.3",
@@ -7858,9 +7922,19 @@
       }
     },
     "node_modules/html-entities": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
-      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.4.0.tgz",
+      "integrity": "sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ]
     },
     "node_modules/html-loader": {
       "version": "3.1.2",
@@ -7964,9 +8038,9 @@
       }
     },
     "node_modules/html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "engines": {
         "node": ">=8"
       },
@@ -7984,9 +8058,9 @@
       }
     },
     "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==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
+      "integrity": "sha512-6YrDKTuqaP/TquFH7h4srYWsZx+x6k6+FbsTm0ziCwGHDP78Unr1r9F/H4+sGmMbX08GQcJ+K64x55b+7VM/jg==",
       "dependencies": {
         "@types/html-minifier-terser": "^6.0.0",
         "html-minifier-terser": "^6.0.2",
@@ -8224,18 +8298,18 @@
       }
     },
     "node_modules/immer": {
-      "version": "9.0.19",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
-      "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==",
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.1.tgz",
+      "integrity": "sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A=="
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -8339,9 +8413,9 @@
       }
     },
     "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==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
+      "integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
       "engines": {
         "node": ">= 10"
       }
@@ -8456,9 +8530,9 @@
       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
     },
     "node_modules/is-core-module": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -8778,15 +8852,11 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
-      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "which-typed-array": "^1.1.11"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8912,24 +8982,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/jake/node_modules/async": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
-      "dev": true
-    },
-    "node_modules/jake/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -8958,9 +9010,9 @@
       }
     },
     "node_modules/joi": {
-      "version": "17.8.3",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.8.3.tgz",
-      "integrity": "sha512-q5Fn6Tj/jR8PfrLrx4fpGH4v9qM6o+vDUfD4/3vxxyg34OmKcNqYZ1qn2mpLza96S8tL0p0rIw2gOZX+/cTg9w==",
+      "version": "17.9.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.9.2.tgz",
+      "integrity": "sha512-Itk/r+V4Dx0V3c7RLFdRh12IOjySm2/WGPMubBT92cQvRfYZhPM2W0hZlctjj72iES8jsRCwp7S/cRmWBnJ4nw==",
       "dependencies": {
         "@hapi/hoek": "^9.0.0",
         "@hapi/topo": "^5.0.0",
@@ -9094,6 +9146,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/launch-editor": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.0.tgz",
+      "integrity": "sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "shell-quote": "^1.7.3"
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -9256,9 +9317,9 @@
       }
     },
     "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==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -9359,11 +9420,11 @@
       }
     },
     "node_modules/memfs": {
-      "version": "3.4.13",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz",
-      "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
+      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
       "dependencies": {
-        "fs-monkey": "^1.0.3"
+        "fs-monkey": "^1.0.4"
       },
       "engines": {
         "node": ">= 4.0.0"
@@ -9479,9 +9540,9 @@
       }
     },
     "node_modules/mini-css-extract-plugin/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -9576,9 +9637,15 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -9616,9 +9683,9 @@
       }
     },
     "node_modules/node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
+      "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -9643,9 +9710,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -9740,14 +9807,15 @@
       }
     },
     "node_modules/object.getownpropertydescriptors": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.5.tgz",
-      "integrity": "sha512-yDNzckpM6ntyQiGTik1fKV1DcVDRS+w8bvpWNCBanvH5LfRX9O8WTHqQzG4RZwRAM4I0oU7TV11Lj5v0g20ibw==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.6.tgz",
+      "integrity": "sha512-lq+61g26E/BgHv0ZTFgRvi7NMEPuAxLkFU7rukXjc/AlwH4Am5xXVnIXy3un1bg/JPbXHrixRkK1itUzzPiIjQ==",
       "dependencies": {
         "array.prototype.reduce": "^1.0.5",
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.21.2",
+        "safe-array-concat": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.8"
@@ -9946,9 +10014,9 @@
       }
     },
     "node_modules/package-json/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -10180,9 +10248,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
+      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
       "funding": [
         {
           "type": "opencollective",
@@ -10191,10 +10259,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -10444,9 +10516,9 @@
       }
     },
     "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==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
       "dependencies": {
         "icss-utils": "^5.0.0",
         "postcss-selector-parser": "^6.0.2",
@@ -10682,9 +10754,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
-      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10694,9 +10766,9 @@
       }
     },
     "node_modules/postcss-sort-media-queries": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.3.0.tgz",
-      "integrity": "sha512-jAl8gJM2DvuIJiI9sL1CuiHtKM4s5aEIomkU8G3LFvbP+p8i7Sz8VV63uieTgoewGqKbi+hxBTiOKJlB35upCg==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.4.1.tgz",
+      "integrity": "sha512-QDESFzDDGKgpiIh4GYXsSy6sek2yAwQx1JASl5AxBtU1Lq2JfKBljIPNdil989NcSKRQX1ToiaKphImtBuhXWw==",
       "dependencies": {
         "sort-css-media-queries": "2.1.0"
       },
@@ -10806,15 +10878,9 @@
       }
     },
     "node_modules/prettier": {
-<<<<<<< HEAD
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
-      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
-=======
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -11220,9 +11286,9 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
     "node_modules/react-fast-compare": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
     "node_modules/react-helmet": {
       "version": "6.1.0",
@@ -11348,11 +11414,11 @@
       }
     },
     "node_modules/react-textarea-autosize": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
-      "integrity": "sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==",
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.2.tgz",
+      "integrity": "sha512-uOkyjkEl0ByEK21eCJMHDGBAAd/BoFQBawYK5XItjAmCTeSbjxghd8qnt7nzsLYzidjnoObu6M26xts0YGKsGg==",
       "dependencies": {
-        "@babel/runtime": "^7.10.2",
+        "@babel/runtime": "^7.20.13",
         "use-composed-ref": "^1.3.0",
         "use-latest": "^1.2.1"
       },
@@ -11444,13 +11510,13 @@
       }
     },
     "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==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "functions-have-names": "^1.2.2"
+        "define-properties": "^1.2.0",
+        "functions-have-names": "^1.2.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11716,19 +11782,6 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
       "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
     },
-    "node_modules/remark-mdx/node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
-      "integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.12.1"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/remark-mdx/node_modules/@babel/plugin-syntax-jsx": {
       "version": "7.12.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
@@ -11741,9 +11794,9 @@
       }
     },
     "node_modules/remark-mdx/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "bin": {
         "semver": "bin/semver"
       }
@@ -11845,11 +11898,11 @@
       "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==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
       "dependencies": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.11.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -12039,19 +12092,41 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
-    "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"
-        },
+    "node_modules/safe-array-concat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
+      "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-array-concat/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
+    "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"
@@ -12077,9 +12152,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.59.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.59.2.tgz",
-      "integrity": "sha512-jJyO6SmbzkJexF8MUorHx5tAilcgabioYxT/BHbY4+OvoqmbHxsYlrjZ8Adhqcgl6Zqwie0TgMXLCAmPFxXOuw==",
+      "version": "1.63.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+      "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -12089,7 +12164,7 @@
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sass-loader": {
@@ -12129,9 +12204,9 @@
       }
     },
     "node_modules/sass-loader/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -12205,9 +12280,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -12230,9 +12305,9 @@
       }
     },
     "node_modules/semver-diff/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -12483,9 +12558,9 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.0.tgz",
-      "integrity": "sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -12734,6 +12809,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/string.prototype.trimend": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
@@ -13057,12 +13148,12 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.6.tgz",
-      "integrity": "sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg==",
+      "version": "5.19.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.1.tgz",
+      "integrity": "sha512-27hxBUVdV6GoNg1pKQ7Z5cbR6V9txPVyBA+FQw3BaZ1Wuzvztce5p156DaP0NVZNrMZZ+6iG9Syf7WgMNKDg2Q==",
       "dependencies": {
-        "@jridgewell/source-map": "^0.3.2",
-        "acorn": "^8.5.0",
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -13074,15 +13165,15 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz",
-      "integrity": "sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==",
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
+      "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.17",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.1",
-        "terser": "^5.16.5"
+        "terser": "^5.16.8"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -13107,9 +13198,9 @@
       }
     },
     "node_modules/terser-webpack-plugin/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -13124,9 +13215,9 @@
       }
     },
     "node_modules/terser/node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -13308,9 +13399,9 @@
       }
     },
     "node_modules/ts-node/node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -13326,9 +13417,9 @@
       "dev": true
     },
     "node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
+      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
     },
     "node_modules/type-fest": {
       "version": "0.20.2",
@@ -13353,6 +13444,54 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typed-array-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
@@ -13388,9 +13527,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "0.7.34",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",
-      "integrity": "sha512-cJMeh/eOILyGu0ejgTKB95yKT3zOenSe9UGE3vj6WfiOwgGYnmATUsnDixMFvdU+rNMvWih83hrUP8VwhF9yXQ==",
+      "version": "1.0.35",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
+      "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==",
       "funding": [
         {
           "type": "opencollective",
@@ -13639,9 +13778,9 @@
       "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
       "funding": [
         {
           "type": "opencollective",
@@ -13650,6 +13789,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
@@ -13657,7 +13800,7 @@
         "picocolors": "^1.0.0"
       },
       "bin": {
-        "browserslist-lint": "cli.js"
+        "update-browserslist-db": "cli.js"
       },
       "peerDependencies": {
         "browserslist": ">= 4.21.0"
@@ -13746,9 +13889,9 @@
       }
     },
     "node_modules/url-loader/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -13959,10 +14102,18 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/wait-on/node_modules/axios": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
+      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "dependencies": {
+        "follow-redirects": "^1.14.7"
+      }
+    },
     "node_modules/wait-on/node_modules/rxjs": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
-      "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -14011,21 +14162,21 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack": {
-      "version": "5.76.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
-      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
+      "version": "5.88.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
+      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
       "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",
+        "@types/estree": "^1.0.0",
+        "@webassemblyjs/ast": "^1.11.5",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.7.6",
+        "acorn-import-assertions": "^1.9.0",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.10.0",
-        "es-module-lexer": "^0.9.0",
+        "enhanced-resolve": "^5.15.0",
+        "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
@@ -14034,9 +14185,9 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.0",
+        "schema-utils": "^3.2.0",
         "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.3",
+        "terser-webpack-plugin": "^5.3.7",
         "watchpack": "^2.4.0",
         "webpack-sources": "^3.2.3"
       },
@@ -14057,9 +14208,9 @@
       }
     },
     "node_modules/webpack-bundle-analyzer": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
-      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz",
+      "integrity": "sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==",
       "dependencies": {
         "@discoveryjs/json-ext": "0.5.7",
         "acorn": "^8.0.4",
@@ -14080,9 +14231,9 @@
       }
     },
     "node_modules/webpack-bundle-analyzer/node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -14174,14 +14325,14 @@
       }
     },
     "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==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
-        "ajv": "^8.8.0",
+        "ajv": "^8.9.0",
         "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.0.0"
+        "ajv-keywords": "^5.1.0"
       },
       "engines": {
         "node": ">= 12.13.0"
@@ -14192,9 +14343,9 @@
       }
     },
     "node_modules/webpack-dev-server": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
-      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
+      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -14202,7 +14353,7 @@
         "@types/serve-index": "^1.9.1",
         "@types/serve-static": "^1.13.10",
         "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.5.1",
+        "@types/ws": "^8.5.5",
         "ansi-html-community": "^0.0.8",
         "bonjour-service": "^1.0.11",
         "chokidar": "^3.5.3",
@@ -14215,6 +14366,7 @@
         "html-entities": "^2.3.2",
         "http-proxy-middleware": "^2.0.3",
         "ipaddr.js": "^2.0.1",
+        "launch-editor": "^2.6.0",
         "open": "^8.0.9",
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
@@ -14224,7 +14376,7 @@
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
         "webpack-dev-middleware": "^5.3.1",
-        "ws": "^8.4.2"
+        "ws": "^8.13.0"
       },
       "bin": {
         "webpack-dev-server": "bin/webpack-dev-server.js"
@@ -14240,6 +14392,9 @@
         "webpack": "^4.37.0 || ^5.0.0"
       },
       "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
         "webpack-cli": {
           "optional": true
         }
@@ -14293,14 +14448,14 @@
       }
     },
     "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==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
-        "ajv": "^8.8.0",
+        "ajv": "^8.9.0",
         "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.0.0"
+        "ajv-keywords": "^5.1.0"
       },
       "engines": {
         "node": ">= 12.13.0"
@@ -14331,9 +14486,9 @@
       }
     },
     "node_modules/webpack-merge": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.9.0.tgz",
+      "integrity": "sha512-6NbRQw4+Sy50vYNTw7EyOn41OZItPiXB8GNv3INSoe3PSFaHJEz3SHTrYVaRm2LilNGnFUzh0FAwqPEmU/CwDg==",
       "dependencies": {
         "clone-deep": "^4.0.1",
         "wildcard": "^2.0.0"
@@ -14351,14 +14506,14 @@
       }
     },
     "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=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
     },
     "node_modules/webpack/node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -14367,9 +14522,9 @@
       }
     },
     "node_modules/webpack/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==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -14401,9 +14556,9 @@
       }
     },
     "node_modules/webpackbar/node_modules/std-env": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
-      "integrity": "sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA=="
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz",
+      "integrity": "sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg=="
     },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
@@ -14465,16 +14620,15 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
-      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
+      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.10"
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -14495,9 +14649,9 @@
       }
     },
     "node_modules/wildcard": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ=="
     },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
@@ -14599,7 +14753,6 @@
         "node": ">= 6"
       }
     },
-<<<<<<< HEAD
     "node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
@@ -14618,6 +14771,15 @@
       }
     },
     "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/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==",
@@ -14632,15 +14794,6 @@
       "dev": true,
       "engines": {
         "node": ">=6"
-=======
-    "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
       }
     },
     "node_modules/yocto-queue": {
@@ -14663,10575 +14816,5 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     }
-  },
-  "dependencies": {
-    "@algolia/autocomplete-core": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.7.4.tgz",
-      "integrity": "sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==",
-      "requires": {
-        "@algolia/autocomplete-shared": "1.7.4"
-      }
-    },
-    "@algolia/autocomplete-preset-algolia": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.4.tgz",
-      "integrity": "sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==",
-      "requires": {
-        "@algolia/autocomplete-shared": "1.7.4"
-      }
-    },
-    "@algolia/autocomplete-shared": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.4.tgz",
-      "integrity": "sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg=="
-    },
-    "@algolia/cache-browser-local-storage": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.15.0.tgz",
-      "integrity": "sha512-uxxFhTWh4JJDb2+FFSmNMfEQ8p9o2vjSpU7iW007QX3OvqljPPN68lk3bpZVaG8pwr5MU1DqpkZ71FcQdVTjgQ==",
-      "requires": {
-        "@algolia/cache-common": "4.15.0"
-      }
-    },
-    "@algolia/cache-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.15.0.tgz",
-      "integrity": "sha512-Me3PbI4QurAM+3D+htIE0l1xt6+bl/18SG6Wc7bPQEZAtN7DTGz22HqhKNyLF2lR/cOfpaH7umXZlZEhIHf7gQ=="
-    },
-    "@algolia/cache-in-memory": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.15.0.tgz",
-      "integrity": "sha512-B9mg1wd7CKMfpkbiTQ8KlcKkH6ut/goVaI6XmDCUczOOqeuZlV34tuEi7o3Xo1j66KWr/d9pMjjGYcoVPCVeOA==",
-      "requires": {
-        "@algolia/cache-common": "4.15.0"
-      }
-    },
-    "@algolia/client-account": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.15.0.tgz",
-      "integrity": "sha512-8wqI33HRZy5ydfFt6F5vMhtkOiAUhVfSCYXx4U3Go5RALqWLgVUp6wzOo0mr1z08POCkHDpbQMQvyayb1CZ/kw==",
-      "requires": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/client-search": "4.15.0",
-        "@algolia/transporter": "4.15.0"
-      }
-    },
-    "@algolia/client-analytics": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.15.0.tgz",
-      "integrity": "sha512-jrPjEeNEIIQKeA1XCZXx3f3aybtwF7wjYlnfHbLARuZ9AuHzimOKjX0ZwqvMmvTsHivpcZ2rqY+j1E8HoH1ELA==",
-      "requires": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/client-search": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
-      }
-    },
-    "@algolia/client-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.15.0.tgz",
-      "integrity": "sha512-PlsJMObZuYw4JlG5EhYv1PHDOv7n5mD5PzqFyoNfSOYaEPRZepa3W579ya29yOu3FZ0VGMNJmB7Q5v/+/fwvIw==",
-      "requires": {
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
-      }
-    },
-    "@algolia/client-personalization": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.15.0.tgz",
-      "integrity": "sha512-Bf0bhRAiNL9LWurzyHRH8UBi4fDt3VbCNkInxVngKQT1uCZWXecwoPWGhcSSpdanBqFJA/1WBt+BWx7a50Bhlg==",
-      "requires": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
-      }
-    },
-    "@algolia/client-search": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.15.0.tgz",
-      "integrity": "sha512-dTwZD4u53WdmexnMcoO2Qd/+YCP3ESXKOtD2MryQ1a9dHwB2Y3Qob0kyS1PG82idwM3enbznvscI9Sf4o9PUWQ==",
-      "requires": {
-        "@algolia/client-common": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/transporter": "4.15.0"
-      }
-    },
-    "@algolia/events": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@algolia/events/-/events-4.0.1.tgz",
-      "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
-    },
-    "@algolia/logger-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.15.0.tgz",
-      "integrity": "sha512-D8OFwn/HpvQz66goIcjxOKsYBMuxiruxJ3cA/bnc0EiDvSA2P2z6bNQWgS5gbstuTZIJmbhr+53NyOxFkmMNAA=="
-    },
-    "@algolia/logger-console": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.15.0.tgz",
-      "integrity": "sha512-pQOvVaRSEJQJRXKTnxEA6nN1hipSQadJJ4einw0nIlfMOGZh/kps1ybh8vRUlUGyfEuN/3dyFs0W3Ac7hIItlg==",
-      "requires": {
-        "@algolia/logger-common": "4.15.0"
-      }
-    },
-    "@algolia/requester-browser-xhr": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.15.0.tgz",
-      "integrity": "sha512-va186EfALF+6msYZXaoBSxcnFCg3SoWJ+uv1yMyhQRJRe7cZSHWSVT3s40vmar90gxlBu80KMVwVlsvJhJv6ew==",
-      "requires": {
-        "@algolia/requester-common": "4.15.0"
-      }
-    },
-    "@algolia/requester-common": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.15.0.tgz",
-      "integrity": "sha512-w0UUzxElbo4hrKg4QP/jiXDNbIJuAthxdlkos9nS8KAPK2XI3R9BlUjLz/ZVs4F9TDGI0mhjrNHhZ12KXcoyhg=="
-    },
-    "@algolia/requester-node-http": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.15.0.tgz",
-      "integrity": "sha512-eeEOhFtgwKcgAlKAZpgBRZJ0ILSEBCXxZ9uwfVWPD24W1b6z08gVoTJ6J7lCeCnJmudg+tMElDnGzHkjup9CJA==",
-      "requires": {
-        "@algolia/requester-common": "4.15.0"
-      }
-    },
-    "@algolia/transporter": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.15.0.tgz",
-      "integrity": "sha512-JoWR+ixG3EmA0UPntQFN/FV5TasYcYu93d5+oKzHFeZ6Z7rtW5Im9iy/Oh/ggk1AAN5fTdqKewtbBpdaYDbKsQ==",
-      "requires": {
-        "@algolia/cache-common": "4.15.0",
-        "@algolia/logger-common": "4.15.0",
-        "@algolia/requester-common": "4.15.0"
-      }
-    },
-    "@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"
-      }
-    },
-    "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.0.tgz",
-      "integrity": "sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g=="
-    },
-    "@babel/core": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.0.tgz",
-      "integrity": "sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==",
-      "requires": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.0",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-module-transforms": "^7.21.0",
-        "@babel/helpers": "^7.21.0",
-        "@babel/parser": "^7.21.0",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0",
-        "convert-source-map": "^1.7.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.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/generator": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.1.tgz",
-      "integrity": "sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==",
-      "requires": {
-        "@babel/types": "^7.21.0",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
-      "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
-      "requires": {
-        "@babel/compat-data": "^7.20.5",
-        "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.21.3",
-        "lru-cache": "^5.1.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/helper-create-class-features-plugin": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz",
-      "integrity": "sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-member-expression-to-functions": "^7.21.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/helper-split-export-declaration": "^7.18.6"
-      }
-    },
-    "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.0.tgz",
-      "integrity": "sha512-N+LaFW/auRSWdx7SHD/HiARwXQju1vXTW4fKr4u5SgBUTm51OKEjKgj+cs00ggW3kEvNqwErnlwuq7Y3xBe4eg==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "regexpu-core": "^5.3.1"
-      }
-    },
-    "@babel/helper-define-polyfill-provider": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
-      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
-      "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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
-      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
-      "requires": {
-        "@babel/template": "^7.20.7",
-        "@babel/types": "^7.21.0"
-      }
-    },
-    "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
-      "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
-      "requires": {
-        "@babel/types": "^7.21.0"
-      }
-    },
-    "@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.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
-      "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
-      "requires": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.20.2",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/helper-validator-identifier": "^7.19.1",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.2",
-        "@babel/types": "^7.21.2"
-      }
-    },
-    "@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.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
-      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ=="
-    },
-    "@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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
-      "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
-      "requires": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-member-expression-to-functions": "^7.20.7",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.7",
-        "@babel/types": "^7.20.7"
-      }
-    },
-    "@babel/helper-simple-access": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
-      "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
-      "requires": {
-        "@babel/types": "^7.20.2"
-      }
-    },
-    "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
-      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
-      "requires": {
-        "@babel/types": "^7.20.0"
-      }
-    },
-    "@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-string-parser": {
-      "version": "7.19.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
-    },
-    "@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
-    },
-    "@babel/helper-validator-option": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
-      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ=="
-    },
-    "@babel/helper-wrap-function": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
-      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
-      "requires": {
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.20.5",
-        "@babel/types": "^7.20.5"
-      }
-    },
-    "@babel/helpers": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.0.tgz",
-      "integrity": "sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==",
-      "requires": {
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
-        "@babel/types": "^7.21.0"
-      }
-    },
-    "@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"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "@babel/parser": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
-      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ=="
-    },
-    "@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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
-      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
-      }
-    },
-    "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
-      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
-      "requires": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-remap-async-to-generator": "^7.18.9",
-        "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
-      "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
-      }
-    },
-    "@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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
-      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
-      "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
-      "requires": {
-        "@babel/compat-data": "^7.20.5",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.20.7"
-      }
-    },
-    "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
-      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz",
-      "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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-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-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-import-assertions": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
-      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0"
-      }
-    },
-    "@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.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
-      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0"
-      }
-    },
-    "@babel/plugin-transform-arrow-functions": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
-      "integrity": "sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@babel/plugin-transform-async-to-generator": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
-      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-remap-async-to-generator": "^7.18.9"
-      }
-    },
-    "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
-      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@babel/plugin-transform-classes": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
-      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "globals": "^11.1.0"
-      }
-    },
-    "@babel/plugin-transform-computed-properties": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz",
-      "integrity": "sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/template": "^7.20.7"
-      }
-    },
-    "@babel/plugin-transform-destructuring": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz",
-      "integrity": "sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@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-for-of": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz",
-      "integrity": "sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@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.20.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
-      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz",
-      "integrity": "sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.21.2",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-simple-access": "^7.20.2"
-      }
-    },
-    "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.20.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
-      "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
-      "requires": {
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-identifier": "^7.19.1"
-      }
-    },
-    "@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.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
-      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz",
-      "integrity": "sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@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.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.20.2.tgz",
-      "integrity": "sha512-KS/G8YI8uwMGKErLFOHS/ekhqdHhpEloxs43NecQHVgo2QuQSyJhGIY1fL8UGl9wy5ItVwwoUL4YxVqsplGq2g==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz",
-      "integrity": "sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.21.0"
-      }
-    },
-    "@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.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz",
-      "integrity": "sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "regenerator-transform": "^0.15.1"
-      }
-    },
-    "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz",
-      "integrity": "sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.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.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
-      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
-      }
-    },
-    "@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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz",
-      "integrity": "sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-typescript": "^7.20.0"
-      }
-    },
-    "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
-      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
-      }
-    },
-    "@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.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
-      "integrity": "sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==",
-      "requires": {
-        "@babel/compat-data": "^7.20.1",
-        "@babel/helper-compilation-targets": "^7.20.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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.20.1",
-        "@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.20.2",
-        "@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.20.0",
-        "@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.20.2",
-        "@babel/plugin-transform-classes": "^7.20.2",
-        "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.20.2",
-        "@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.19.6",
-        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
-        "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
-        "@babel/plugin-transform-new-target": "^7.18.6",
-        "@babel/plugin-transform-object-super": "^7.18.6",
-        "@babel/plugin-transform-parameters": "^7.20.1",
-        "@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.19.0",
-        "@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.10",
-        "@babel/plugin-transform-unicode-regex": "^7.18.6",
-        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.1",
-        "core-js-compat": "^3.25.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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz",
-      "integrity": "sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-option": "^7.21.0",
-        "@babel/plugin-transform-typescript": "^7.21.0"
-      }
-    },
-    "@babel/regjsgen": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
-    },
-    "@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "requires": {
-        "regenerator-runtime": "^0.13.11"
-      }
-    },
-    "@babel/runtime-corejs3": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.21.0.tgz",
-      "integrity": "sha512-TDD4UJzos3JJtM+tHX+w2Uc+KWj7GV+VKKFdMVd2Rx8sdA19hcc3P3AHFYd5LVOw+pYuSd5lICC3gm52B6Rwxw==",
-      "requires": {
-        "core-js-pure": "^3.25.1",
-        "regenerator-runtime": "^0.13.11"
-      }
-    },
-    "@babel/template": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
-      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
-      "requires": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7"
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.2.tgz",
-      "integrity": "sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==",
-      "requires": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.1",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.21.2",
-        "@babel/types": "^7.21.2",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      }
-    },
-    "@babel/types": {
-      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
-      "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
-      "requires": {
-        "@babel/helper-string-parser": "^7.19.4",
-        "@babel/helper-validator-identifier": "^7.19.1",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
-    "@cspotcode/source-map-support": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
-      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
-      "requires": {
-        "@jridgewell/trace-mapping": "0.3.9"
-      },
-      "dependencies": {
-        "@jridgewell/trace-mapping": {
-          "version": "0.3.9",
-          "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
-          "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-          "dev": true,
-          "requires": {
-            "@jridgewell/resolve-uri": "^3.0.3",
-            "@jridgewell/sourcemap-codec": "^1.4.10"
-          }
-        }
-      }
-    },
-    "@discoveryjs/json-ext": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
-      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
-    },
-    "@docsearch/css": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.3.tgz",
-      "integrity": "sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg=="
-    },
-    "@docsearch/react": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.3.tgz",
-      "integrity": "sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==",
-      "requires": {
-        "@algolia/autocomplete-core": "1.7.4",
-        "@algolia/autocomplete-preset-algolia": "1.7.4",
-        "@docsearch/css": "3.3.3",
-        "algoliasearch": "^4.0.0"
-      }
-    },
-    "@docusaurus/core": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-0.0.0-4192.tgz",
-      "integrity": "sha512-d1Fv5sYyaiXbuefdsjcAXo/JTlXS3OMJyc4cPObIeBhd41yrOcUKNZkrD4MLcVI6+L9EXh6oKVV44lFvtg9ing==",
-      "requires": {
-        "@babel/core": "^7.12.16",
-        "@babel/generator": "^7.12.15",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.15.0",
-        "@babel/preset-env": "^7.15.6",
-        "@babel/preset-react": "^7.12.13",
-        "@babel/preset-typescript": "^7.12.16",
-        "@babel/runtime": "^7.15.4",
-        "@babel/runtime-corejs3": "^7.15.4",
-        "@babel/traverse": "^7.12.13",
-        "@docusaurus/cssnano-preset": "0.0.0-4192",
-        "@docusaurus/react-loadable": "5.5.2",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-common": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "@slorber/static-site-generator-webpack-plugin": "^4.0.0",
-        "@svgr/webpack": "^5.5.0",
-        "autoprefixer": "^10.3.5",
-        "babel-loader": "^8.2.2",
-        "babel-plugin-dynamic-import-node": "2.3.0",
-        "boxen": "^5.0.1",
-        "chalk": "^4.1.2",
-        "chokidar": "^3.5.2",
-        "clean-css": "^5.1.5",
-        "commander": "^5.1.0",
-        "copy-webpack-plugin": "^9.0.1",
-        "core-js": "^3.18.0",
-        "css-loader": "^5.1.1",
-        "css-minimizer-webpack-plugin": "^3.0.2",
-        "cssnano": "^5.0.8",
-        "del": "^6.0.0",
-        "detect-port": "^1.3.0",
-        "escape-html": "^1.0.3",
-        "eta": "^1.12.3",
-        "file-loader": "^6.2.0",
-        "fs-extra": "^10.0.0",
-        "github-slugger": "^1.4.0",
-        "globby": "^11.0.2",
-        "html-minifier-terser": "^6.0.2",
-        "html-tags": "^3.1.0",
-        "html-webpack-plugin": "^5.4.0",
-        "import-fresh": "^3.3.0",
-        "is-root": "^2.1.0",
-        "leven": "^3.1.0",
-        "lodash": "^4.17.20",
-        "mini-css-extract-plugin": "^1.6.0",
-        "nprogress": "^0.2.0",
-        "postcss": "^8.3.7",
-        "postcss-loader": "^6.1.1",
-        "prompts": "^2.4.1",
-        "react-dev-utils": "12.0.0-next.47",
-        "react-error-overlay": "^6.0.9",
-        "react-helmet": "^6.1.0",
-        "react-loadable": "npm:@docusaurus/react-loadable@5.5.2",
-        "react-loadable-ssr-addon-v5-slorber": "^1.0.1",
-        "react-router": "^5.2.0",
-        "react-router-config": "^5.1.1",
-        "react-router-dom": "^5.2.0",
-        "remark-admonitions": "^1.2.1",
-        "resolve-pathname": "^3.0.0",
-        "rtl-detect": "^1.0.4",
-        "semver": "^7.3.4",
-        "serve-handler": "^6.1.3",
-        "shelljs": "^0.8.4",
-        "std-env": "^2.2.1",
-        "strip-ansi": "^6.0.0",
-        "terser-webpack-plugin": "^5.2.4",
-        "tslib": "^2.3.1",
-        "update-notifier": "^5.1.0",
-        "url-loader": "^4.1.1",
-        "wait-on": "^6.0.0",
-        "webpack": "^5.61.0",
-        "webpack-bundle-analyzer": "^4.4.2",
-        "webpack-dev-server": "^4.4.0",
-        "webpack-merge": "^5.8.0",
-        "webpackbar": "^5.0.0-3"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/cssnano-preset": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-0.0.0-4192.tgz",
-      "integrity": "sha512-poIQ8jWNrUqmvAy6J7umn32uLKx8r7WIX+MSH/Bq3F0LMCvEpa/sA7xOWtkbhW7phnrKKZEDlta4DBWS24cTvA==",
-      "requires": {
-        "cssnano-preset-advanced": "^5.1.4",
-        "postcss": "^8.3.7",
-        "postcss-sort-media-queries": "^4.1.0"
-      }
-    },
-    "@docusaurus/mdx-loader": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-0.0.0-4192.tgz",
-      "integrity": "sha512-TLp1evkn/sRnVnfDAs7OifJ8rOmIHcXDikVALOYk1+7h4ZAluhdFhJh/SSD5yU9zi8NsYo4PrwgaXl3jEjrygw==",
-      "requires": {
-        "@babel/parser": "^7.12.16",
-        "@babel/traverse": "^7.12.13",
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@mdx-js/mdx": "^1.6.21",
-        "@mdx-js/react": "^1.6.21",
-        "chalk": "^4.1.2",
-        "escape-html": "^1.0.3",
-        "file-loader": "^6.2.0",
-        "fs-extra": "^10.0.0",
-        "github-slugger": "^1.4.0",
-        "gray-matter": "^4.0.3",
-        "mdast-util-to-string": "^2.0.0",
-        "remark-emoji": "^2.1.0",
-        "stringify-object": "^3.3.0",
-        "unist-util-visit": "^2.0.2",
-        "url-loader": "^4.1.1",
-        "webpack": "^5.61.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/module-type-aliases": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-0.0.0-4192.tgz",
-      "integrity": "sha512-WIUnRtGB6ALu2/dbfJv3aiMJ743UcjxU24wQu9/w1uAh7VnB8NPVbkOdx9uf6Ddo2q6mjyhYo/g9PStkW8GdMg==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*",
-        "@types/react-helmet": "*",
-        "@types/react-router-config": "*",
-        "@types/react-router-dom": "*"
-      }
-    },
-    "@docusaurus/plugin-client-redirects": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-client-redirects/-/plugin-client-redirects-0.0.0-4192.tgz",
-      "integrity": "sha512-sVJii4n7j3kywSn98JGnsNgJOS0g2SqzIiJg5M3hLGg2X0Yvicg5DTkogMJHVUQmjvq0VGNgSmFdOaxD/dQ3rQ==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-common": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "chalk": "^4.1.2",
-        "eta": "^1.12.3",
-        "fs-extra": "^10.0.0",
-        "globby": "^11.0.2",
-        "lodash": "^4.17.20",
-        "tslib": "^2.3.1"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/plugin-content-blog": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-0.0.0-4192.tgz",
-      "integrity": "sha512-gjd3pKhKJbmILWyU+crYFzaB3wQZA8NTVKbjw7MzIwxys4jfpMx51ijCuF5NUl7D+r8xJ89RUrdkpK9Me6BVLg==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/mdx-loader": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "chalk": "^4.1.2",
-        "escape-string-regexp": "^4.0.0",
-        "feed": "^4.2.2",
-        "fs-extra": "^10.0.0",
-        "globby": "^11.0.2",
-        "js-yaml": "^4.0.0",
-        "loader-utils": "^2.0.0",
-        "lodash": "^4.17.20",
-        "reading-time": "^1.5.0",
-        "remark-admonitions": "^1.2.1",
-        "tslib": "^2.3.1",
-        "utility-types": "^3.10.0",
-        "webpack": "^5.61.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/plugin-content-docs": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-0.0.0-4192.tgz",
-      "integrity": "sha512-wZhDVE3u5BXRhQH0aVMIvet7ZGgFjkFM5QPxYVmXnG6B+cA8GKkxHFBepNn9rufCe+Wai9/TTMLZ3dVlAeUy3g==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/mdx-loader": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "chalk": "^4.1.2",
-        "combine-promises": "^1.1.0",
-        "escape-string-regexp": "^4.0.0",
-        "fs-extra": "^10.0.0",
-        "globby": "^11.0.2",
-        "import-fresh": "^3.2.2",
-        "js-yaml": "^4.0.0",
-        "loader-utils": "^2.0.0",
-        "lodash": "^4.17.20",
-        "remark-admonitions": "^1.2.1",
-        "shelljs": "^0.8.4",
-        "tslib": "^2.3.1",
-        "utility-types": "^3.10.0",
-        "webpack": "^5.61.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/plugin-content-pages": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-0.0.0-4192.tgz",
-      "integrity": "sha512-Hps8MEUM92S51UBEOg+z+5b9ffr2lTSmGPKxsX/QkLkB/X+T38UcgCgwj9p6tak6Zsrac7LjIugplHp8g3tyww==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/mdx-loader": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "globby": "^11.0.2",
-        "lodash": "^4.17.20",
-        "remark-admonitions": "^1.2.1",
-        "tslib": "^2.3.1",
-        "webpack": "^5.61.0"
-      }
-    },
-    "@docusaurus/plugin-debug": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-0.0.0-4192.tgz",
-      "integrity": "sha512-Oc/bqyfRL/td7LQwLaX7s6tX4b/9VLTvZIvl9l2BVeBSJ0NJfsce6isVr7WDWGjVW1kgjCZLH3xIWRnYiz5Euw==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "fs-extra": "^10.0.0",
-        "react-json-view": "^1.21.3",
-        "tslib": "^2.3.1"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/plugin-google-analytics": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-0.0.0-4192.tgz",
-      "integrity": "sha512-DRJlhH+CJyEhvdzIFQns8qD/J4bmeDrlAaPeG1P5KJF8dXIkCidIaQVLXR6xYxIGvWF1n+l2CTuqIi/zdUxfhw==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192"
-      }
-    },
-    "@docusaurus/plugin-google-gtag": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-0.0.0-4192.tgz",
-      "integrity": "sha512-FqJhi0bdZ79YlToCw/oIuIEOWT/Y+9qHXV0lVFng4QTta5qTCSbOCcdSOG7OC/Mpdz2WYYOyH/TThi8HGGPzjg==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192"
-      }
-    },
-    "@docusaurus/plugin-sitemap": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-0.0.0-4192.tgz",
-      "integrity": "sha512-szJP4PL3APZZ6lV/Y9wyxBhVLVUPs2PjSSVyuAtowG8STHf4nTbvYbk1F3Weib37hDe9zJoLKMs/i9Rh+78Ewg==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-common": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "fs-extra": "^10.0.0",
-        "sitemap": "^7.0.0",
-        "tslib": "^2.3.1"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/preset-classic": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-0.0.0-4192.tgz",
-      "integrity": "sha512-6iKJ8yGdCrQiZfvS/NP7HRx13zyH7zRfyjP5BAINJ3I1RstAEPxkFZszm4Wr4JogZzvcSfj0HqiondDUsZaK/g==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/plugin-content-blog": "0.0.0-4192",
-        "@docusaurus/plugin-content-docs": "0.0.0-4192",
-        "@docusaurus/plugin-content-pages": "0.0.0-4192",
-        "@docusaurus/plugin-debug": "0.0.0-4192",
-        "@docusaurus/plugin-google-analytics": "0.0.0-4192",
-        "@docusaurus/plugin-google-gtag": "0.0.0-4192",
-        "@docusaurus/plugin-sitemap": "0.0.0-4192",
-        "@docusaurus/theme-classic": "0.0.0-4192",
-        "@docusaurus/theme-search-algolia": "0.0.0-4192"
-      }
-    },
-    "@docusaurus/react-loadable": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
-      "integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
-      "requires": {
-        "@types/react": "*",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "@docusaurus/theme-classic": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-0.0.0-4192.tgz",
-      "integrity": "sha512-k0yBljXohSL8p6Z7XX/lbmbtnON+IB5gpltbg23Fm3zy2ZH5MRL+Gz03bor5PLcd69cqFESNCLRp42yuyAZlEA==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/plugin-content-blog": "0.0.0-4192",
-        "@docusaurus/plugin-content-docs": "0.0.0-4192",
-        "@docusaurus/plugin-content-pages": "0.0.0-4192",
-        "@docusaurus/theme-common": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "@mdx-js/mdx": "^1.6.21",
-        "@mdx-js/react": "^1.6.21",
-        "chalk": "^4.1.2",
-        "clsx": "^1.1.1",
-        "copy-text-to-clipboard": "^3.0.1",
-        "fs-extra": "^10.0.0",
-        "globby": "^11.0.2",
-        "infima": "0.2.0-alpha.34",
-        "lodash": "^4.17.20",
-        "postcss": "^8.3.7",
-        "prism-react-renderer": "^1.2.1",
-        "prismjs": "^1.23.0",
-        "prop-types": "^15.7.2",
-        "react-router-dom": "^5.2.0",
-        "rtlcss": "^3.3.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/theme-common": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-0.0.0-4192.tgz",
-      "integrity": "sha512-jm14xc4UpFtAB3W0CzPMLLGN5+2cTdqVJLpz9OU/ar3kveVt8lCX36Rmcw461bltsbtAt/lFQUTzR6Y6O6VaMA==",
-      "requires": {
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/plugin-content-blog": "0.0.0-4192",
-        "@docusaurus/plugin-content-docs": "0.0.0-4192",
-        "@docusaurus/plugin-content-pages": "0.0.0-4192",
-        "@docusaurus/types": "0.0.0-4192",
-        "clsx": "^1.1.1",
-        "fs-extra": "^10.0.0",
-        "parse-numeric-range": "^1.3.0",
-        "tslib": "^2.3.1",
-        "utility-types": "^3.10.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/theme-search-algolia": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-0.0.0-4192.tgz",
-      "integrity": "sha512-a2zeVC0xv0ES6pihbq6DrpvQClo8+C3XSrMN9ZDD/dcWGY4MZjE0HZVRbGgtWXaWFSw+GHaSD514OFZV9sKYaA==",
-      "requires": {
-        "@docsearch/react": "^3.0.0-alpha.39",
-        "@docusaurus/core": "0.0.0-4192",
-        "@docusaurus/theme-common": "0.0.0-4192",
-        "@docusaurus/utils": "0.0.0-4192",
-        "@docusaurus/utils-validation": "0.0.0-4192",
-        "algoliasearch": "^4.10.5",
-        "algoliasearch-helper": "^3.5.5",
-        "clsx": "^1.1.1",
-        "eta": "^1.12.3",
-        "lodash": "^4.17.20"
-      }
-    },
-    "@docusaurus/types": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-0.0.0-4192.tgz",
-      "integrity": "sha512-hfH+5yJ4cE2tLUTnFop3suwzgnD2KtBXQxekoyGficuBD8fqtopDfGwsJjQjJQv7i759qTQEOpauptPMaGi+Uw==",
-      "requires": {
-        "commander": "^5.1.0",
-        "joi": "^17.4.2",
-        "querystring": "0.2.0",
-        "utility-types": "^3.10.0",
-        "webpack": "^5.61.0",
-        "webpack-merge": "^5.8.0"
-      }
-    },
-    "@docusaurus/utils": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-0.0.0-4192.tgz",
-      "integrity": "sha512-7RHVwGQMtqMtRiBAQe9zv80bmJ0qr5t7y5SAk59/p/3pik2eBJuHE6M0Vt1UvF216fWGNAmUcyLcYq3ITWfNoQ==",
-      "requires": {
-        "@docusaurus/types": "0.0.0-4192",
-        "@mdx-js/runtime": "^1.6.22",
-        "@types/github-slugger": "^1.3.0",
-        "chalk": "^4.1.2",
-        "escape-string-regexp": "^4.0.0",
-        "fs-extra": "^10.0.0",
-        "globby": "^11.0.4",
-        "gray-matter": "^4.0.3",
-        "lodash": "^4.17.20",
-        "micromatch": "^4.0.4",
-        "remark-mdx-remove-exports": "^1.6.22",
-        "remark-mdx-remove-imports": "^1.6.22",
-        "resolve-pathname": "^3.0.0",
-        "tslib": "^2.3.1"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "@docusaurus/utils-common": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-0.0.0-4192.tgz",
-      "integrity": "sha512-FLkGUKzSu6cprUfuoIcWVdGP4Yck7/97RG9OE1mKTJ2Gg20UvFA8YdNBtrFwrkCldWzQQh05+bC7PmcLr+u8MQ==",
-      "requires": {
-        "@docusaurus/types": "0.0.0-4192",
-        "tslib": "^2.3.1"
-      }
-    },
-    "@docusaurus/utils-validation": {
-      "version": "0.0.0-4192",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-0.0.0-4192.tgz",
-      "integrity": "sha512-qZdoqmMtX5UhXEuelntcccSeH1vZ6h7RNclDIw0tNb1sR/bQQLGGTPc/fOWToMvWyxAYcWq58lyG6l3Sbk2Pdw==",
-      "requires": {
-        "@docusaurus/utils": "0.0.0-4192",
-        "chalk": "^4.1.2",
-        "joi": "^17.4.2",
-        "tslib": "^2.3.1"
-      }
-    },
-    "@hapi/hoek": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
-      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
-    },
-    "@hapi/topo": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
-      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
-      "requires": {
-        "@hapi/hoek": "^9.0.0"
-      }
-    },
-    "@ionic-internal/docusaurus-plugin-tag-manager": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic-internal/docusaurus-plugin-tag-manager/-/docusaurus-plugin-tag-manager-2.0.0.tgz",
-      "integrity": "sha512-jiJI8dWNRBVVoPOdVjjM9MqjOfMA96BZdken6JMQY0eLDg5N5wwm3MHYTVGebLugXIfCflb2hD+Q5cZik1r0hg=="
-    },
-    "@ionic-internal/ionic-ds": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@ionic-internal/ionic-ds/-/ionic-ds-7.1.0.tgz",
-      "integrity": "sha512-8AUQZm4eyTKEfcHsPA8ZshJ75U5ebHy8twG9JuJz3K12Hnp4PDao4iILo+918qI3mkqDmQDosDAbl5oVDg/wOg==",
-      "requires": {
-        "@rollup/plugin-babel": "^5.3.0"
-      }
-    },
-    "@ionic/prettier-config": {
-<<<<<<< HEAD
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz",
-      "integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==",
-=======
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-3.0.0.tgz",
-      "integrity": "sha512-dg5ovuMjfE5h3WW3kzfe9+7IflH9M9F7qlVYfpyONYlgs+4M2JZh628Csal4lWeyWGwugqMDk2zy7/fM7ygB8A==",
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
-      "dev": true
-    },
-    "@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.17",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
-      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
-      "requires": {
-        "@jridgewell/resolve-uri": "3.1.0",
-        "@jridgewell/sourcemap-codec": "1.4.14"
-      }
-    },
-    "@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=="
-    },
-    "@mdx-js/mdx": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz",
-      "integrity": "sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA==",
-      "requires": {
-        "@babel/core": "7.12.9",
-        "@babel/plugin-syntax-jsx": "7.12.1",
-        "@babel/plugin-syntax-object-rest-spread": "7.8.3",
-        "@mdx-js/util": "1.6.22",
-        "babel-plugin-apply-mdx-type-prop": "1.6.22",
-        "babel-plugin-extract-import-names": "1.6.22",
-        "camelcase-css": "2.0.1",
-        "detab": "2.0.4",
-        "hast-util-raw": "6.0.1",
-        "lodash.uniq": "4.5.0",
-        "mdast-util-to-hast": "10.0.1",
-        "remark-footnotes": "2.0.0",
-        "remark-mdx": "1.6.22",
-        "remark-parse": "8.0.3",
-        "remark-squeeze-paragraphs": "4.0.0",
-        "style-to-object": "0.3.0",
-        "unified": "9.2.0",
-        "unist-builder": "2.0.3",
-        "unist-util-visit": "2.0.3"
-      },
-      "dependencies": {
-        "@babel/core": {
-          "version": "7.12.9",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
-          "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.12.5",
-            "@babel/helper-module-transforms": "^7.12.1",
-            "@babel/helpers": "^7.12.5",
-            "@babel/parser": "^7.12.7",
-            "@babel/template": "^7.12.7",
-            "@babel/traverse": "^7.12.9",
-            "@babel/types": "^7.12.7",
-            "convert-source-map": "^1.7.0",
-            "debug": "^4.1.0",
-            "gensync": "^1.0.0-beta.1",
-            "json5": "^2.1.2",
-            "lodash": "^4.17.19",
-            "resolve": "^1.3.2",
-            "semver": "^5.4.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/plugin-syntax-jsx": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
-          "integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-          }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
-        }
-      }
-    },
-    "@mdx-js/react": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
-      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg=="
-    },
-    "@mdx-js/runtime": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/@mdx-js/runtime/-/runtime-1.6.22.tgz",
-      "integrity": "sha512-p17spaO2+55VLCuxXA3LVHC4phRx60NR2XMdZ+qgVU1lKvEX4y88dmFNOzGDCPLJ03IZyKrJ/rPWWRiBrd9JrQ==",
-      "requires": {
-        "@mdx-js/mdx": "1.6.22",
-        "@mdx-js/react": "1.6.22",
-        "buble-jsx-only": "^0.19.8"
-      }
-    },
-    "@mdx-js/util": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
-      "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA=="
-    },
-    "@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"
-      }
-    },
-    "@polka/url": {
-      "version": "1.0.0-next.21",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
-      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
-    },
-    "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
-    },
-    "@prismicio/client": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.7.3.tgz",
-      "integrity": "sha512-zQVZhuQDYIgdaY636u+QNk2tvvbtpkaKsEiLT0Ef51nFW/y5fqpOG5U0eU3cVsikZaYNlZ17x6O1wmvVCLdimQ==",
-      "requires": {
-        "@prismicio/helpers": "^2.3.8",
-        "@prismicio/types": "^0.2.7"
-      }
-    },
-    "@prismicio/helpers": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.9.tgz",
-      "integrity": "sha512-p7Y1sG83A2YPZvptfAzuZA8xH1bdM2wGRjqSKW9Qa0rAnBq2OfVKRvwl9OMCZML4eLUMxSEUAEWRVSoKpQnJvA==",
-      "requires": {
-        "@prismicio/richtext": "^2.1.4",
-        "@prismicio/types": "^0.2.7",
-        "imgix-url-builder": "^0.0.3"
-      }
-    },
-    "@prismicio/react": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.5.2.tgz",
-      "integrity": "sha512-X00mT3/mHDnnb9NKUeAZnBWDDngXhr84RVzh9+eSeZjJKIVYEHHgfZqex4R6LgjZzeueaGp0UCLhwrUeiRp5DA==",
-      "requires": {
-        "@prismicio/helpers": "^2.3.8",
-        "@prismicio/richtext": "^2.1.3",
-        "@prismicio/types": "^0.2.7"
-      }
-    },
-    "@prismicio/richtext": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.4.tgz",
-      "integrity": "sha512-hyC8XItj+2yMmLGNjg9xGA/lRMO5UgbPF132VFrpZHzHhtIKvHN3iYxCZxnrEoPaTcT6JjA8vWyYLjmmB49bvw==",
-      "requires": {
-        "@prismicio/types": "^0.2.7"
-      }
-    },
-    "@prismicio/types": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.7.tgz",
-      "integrity": "sha512-xHPBWg+lPcl8U97VB/2oYK3MJlQoVPZq91hbeQO8WRyvq+zgpNST3xFOTk8SkQpgoH6wd50AxGZELvPrpojajQ=="
-    },
-    "@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/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"
-      }
-    },
-    "@sideway/address": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
-      "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==",
-      "requires": {
-        "@hapi/hoek": "^9.0.0"
-      }
-    },
-    "@sideway/formula": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
-      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
-    },
-    "@sideway/pinpoint": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
-      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
-    },
-    "@sindresorhus/is": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
-      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
-    },
-    "@slorber/static-site-generator-webpack-plugin": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.7.tgz",
-      "integrity": "sha512-Ug7x6z5lwrz0WqdnNFOMYrDQNTPAprvHLSh6+/fmml3qUiz6l5eq+2MzLKWtn/q5K5NpSiFsZTP/fck/3vjSxA==",
-      "requires": {
-        "eval": "^0.1.8",
-        "p-map": "^4.0.0",
-        "webpack-sources": "^3.2.2"
-      }
-    },
-    "@stackblitz/sdk": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.8.2.tgz",
-      "integrity": "sha512-3aTg0Tb9dNs1huPkpdYxPEX/yc8A28eZneUMOEJzOLi7EJwl5onr9gCAVjIOkN4WLYu1iBSiJiGBYT629bZIJQ=="
-    },
-    "@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"
-      }
-    },
-    "@szmarczak/http-timer": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
-      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
-      "requires": {
-        "defer-to-connect": "^1.0.1"
-      }
-    },
-    "@tippyjs/react": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
-      "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
-      "requires": {
-        "tippy.js": "^6.3.1"
-      }
-    },
-    "@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
-    },
-    "@tsconfig/docusaurus": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@tsconfig/docusaurus/-/docusaurus-1.0.7.tgz",
-      "integrity": "sha512-ffTXxGIP/IRMCjuzHd6M4/HdIrw1bMfC7Bv8hMkTadnePkpe0lG0oDSdbRpSDZb2rQMAgpbWiR10BvxvNYwYrg==",
-      "dev": true
-    },
-    "@tsconfig/node10": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
-      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
-      "dev": true
-    },
-    "@tsconfig/node12": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
-      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
-    },
-    "@tsconfig/node14": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
-      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
-    },
-    "@tsconfig/node16": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
-      "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
-      "dev": true
-    },
-    "@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.21.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
-      "integrity": "sha512-rc9K8ZpVjNcLs8Fp0dkozd5Pt2Apk1glO4Vgz8ix1u6yFByxfqo5Yavpy65o+93TAe24jr7v+eSBtFLvOQtCRQ==",
-      "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": "0.0.39",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
-      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
-    },
-    "@types/express": {
-      "version": "4.17.17",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
-      "integrity": "sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==",
-      "requires": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.33",
-        "@types/qs": "*",
-        "@types/serve-static": "*"
-      }
-    },
-    "@types/express-serve-static-core": {
-      "version": "4.17.33",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz",
-      "integrity": "sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==",
-      "requires": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*"
-      }
-    },
-    "@types/github-slugger": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@types/github-slugger/-/github-slugger-1.3.0.tgz",
-      "integrity": "sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g=="
-    },
-    "@types/hast": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
-      "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
-      "requires": {
-        "@types/unist": "*"
-      }
-    },
-    "@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
-      "dev": true
-    },
-    "@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.10",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
-      "integrity": "sha512-Qs5aULi+zV1bwKAg5z1PWnDXWmsn+LxIvUGv6E2+OOMYhclZMO+OXd9pYVf2gLykf2I7IV2u7oTHwChPNsvJ7g==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@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/mdast": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
-      "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
-      "requires": {
-        "@types/unist": "*"
-      }
-    },
-    "@types/mime": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
-      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
-    },
-    "@types/node": {
-      "version": "18.15.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.0.tgz",
-      "integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w=="
-    },
-    "@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/parse5": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
-      "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
-    },
-    "@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": "17.0.53",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.53.tgz",
-      "integrity": "sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==",
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "@types/react-helmet": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
-      "integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "dev": true,
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "@types/react-router-config": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@types/react-router-config/-/react-router-config-5.0.6.tgz",
-      "integrity": "sha512-db1mx37a1EJDf1XeX8jJN7R3PZABmJQXR8r28yUjVMFSjkmnQo6X6pOEEmNl+Tp2gYQOGPdYbFIipBtdElZ3Yg==",
-      "dev": true,
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
-    "@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dev": true,
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
-    "@types/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
-    },
-    "@types/sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@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.15.1",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
-      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
-      "requires": {
-        "@types/mime": "*",
-        "@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/unist": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
-      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
-    },
-    "@types/ws": {
-      "version": "8.5.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@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=="
-    },
-    "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": "6.4.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ=="
-    },
-    "acorn-dynamic-import": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
-    },
-    "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-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
-    },
-    "address": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
-      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA=="
-    },
-    "aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "requires": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
-      }
-    },
-    "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.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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=="
-    },
-    "algoliasearch": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.15.0.tgz",
-      "integrity": "sha512-+vgKQF5944dYsz9zhKk07JbOYeNdKisoD5GeG0woBL3nLzbn2a+nGwki60DXg7CXvaFXBcTXyJG4C+VaBVd44g==",
-      "requires": {
-        "@algolia/cache-browser-local-storage": "4.15.0",
-        "@algolia/cache-common": "4.15.0",
-        "@algolia/cache-in-memory": "4.15.0",
-        "@algolia/client-account": "4.15.0",
-        "@algolia/client-analytics": "4.15.0",
-        "@algolia/client-common": "4.15.0",
-        "@algolia/client-personalization": "4.15.0",
-        "@algolia/client-search": "4.15.0",
-        "@algolia/logger-common": "4.15.0",
-        "@algolia/logger-console": "4.15.0",
-        "@algolia/requester-browser-xhr": "4.15.0",
-        "@algolia/requester-common": "4.15.0",
-        "@algolia/requester-node-http": "4.15.0",
-        "@algolia/transporter": "4.15.0"
-      }
-    },
-    "algoliasearch-helper": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.12.0.tgz",
-      "integrity": "sha512-/j1U3PEwdan0n6P/QqSnSpNSLC5+cEMvyljd5CnmNmUjDlGrys+vFEOwjVEnqELIiAGMHEA/Nl3CiKVFBUYqyQ==",
-      "requires": {
-        "@algolia/events": "^4.0.1"
-      }
-    },
-    "ansi-align": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
-      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
-      "requires": {
-<<<<<<< HEAD
-        "string-width": "^4.1.0"
-=======
-        "string-width": "^3.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0"
-        },
-        "emoji-regex": {
-          "version": "7.0.3"
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0"
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        }
-      }
-    },
-    "ansi-colors": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
-      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "dev": true
-    },
-    "ansi-escapes": {
-      "version": "4.3.2",
-      "requires": {
-        "type-fest": "^0.21.3"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.21.3"
-        }
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
-      }
-    },
-    "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": "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"
-      }
-    },
-    "anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "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": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-    },
-    "array-flatten": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
-    },
-    "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.reduce": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
-      "integrity": "sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "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=="
-    },
-    "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.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
-      "requires": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
-        "fraction.js": "^4.2.0",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
-    },
-    "axios": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
-      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
-      "requires": {
-        "follow-redirects": "^1.14.7"
-      }
-    },
-    "babel-loader": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
-      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
-      "requires": {
-        "find-cache-dir": "^3.3.1",
-        "loader-utils": "^2.0.0",
-        "make-dir": "^3.1.0",
-        "schema-utils": "^2.6.5"
-      }
-    },
-    "babel-plugin-apply-mdx-type-prop": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.22.tgz",
-      "integrity": "sha512-VefL+8o+F/DfK24lPZMtJctrCVOfgbqLAGZSkxwhazQv4VxPg3Za/i40fu22KR2m8eEda+IfSOlPLUSIiLcnCQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "7.10.4",
-        "@mdx-js/util": "1.6.22"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
-        }
-      }
-    },
-    "babel-plugin-dynamic-import-node": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz",
-      "integrity": "sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==",
-      "requires": {
-        "object.assign": "^4.1.0"
-      }
-    },
-    "babel-plugin-extract-import-names": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.22.tgz",
-      "integrity": "sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "7.10.4"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
-        }
-      }
-    },
-    "babel-plugin-polyfill-corejs2": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
-      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
-      "requires": {
-        "@babel/compat-data": "^7.17.7",
-        "@babel/helper-define-polyfill-provider": "^0.3.3",
-        "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.6.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
-      "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.3",
-        "core-js-compat": "^3.25.1"
-      }
-    },
-    "babel-plugin-polyfill-regenerator": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
-      "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.3"
-      }
-    },
-    "bail": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
-      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ=="
-    },
-    "balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "base16": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
-      "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ=="
-    },
-    "base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
-    },
-    "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=="
-    },
-    "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": {
-<<<<<<< HEAD
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
-=======
-      "version": "2.2.0"
-    },
-    "bl": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "dev": true,
-      "requires": {
-        "buffer": "^5.5.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.4.0"
-      }
-    },
-    "bluebird": {
-      "version": "3.7.2"
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
-    },
-    "body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
-      "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.11.0",
-        "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"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
-    "bonjour-service": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.0.tgz",
-      "integrity": "sha512-LVRinRB3k1/K0XzZ2p58COnWvkQknIY6sf0zF2rpErvcJXpMBttEPQSxK+HEXSS9VmpZlDoDnQWv8ftJT20B0Q==",
-      "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=="
-    },
-    "boxen": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
-      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
-      "requires": {
-        "ansi-align": "^3.0.0",
-        "camelcase": "^6.2.0",
-        "chalk": "^4.1.0",
-        "cli-boxes": "^2.2.1",
-        "string-width": "^4.2.2",
-        "type-fest": "^0.20.2",
-        "widest-line": "^3.1.0",
-        "wrap-ansi": "^7.0.0"
-      }
-    },
-    "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"
-      }
-    },
-    "browserslist": {
-      "version": "4.21.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
-      "requires": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
-      }
-    },
-    "buble-jsx-only": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/buble-jsx-only/-/buble-jsx-only-0.19.8.tgz",
-      "integrity": "sha512-7AW19pf7PrKFnGTEDzs6u9+JZqQwM1VnLS19OlqYDhXomtFFknnoQJAPHeg84RMFWAvOhYrG7harizJNwUKJsA==",
-      "requires": {
-        "acorn": "^6.1.1",
-        "acorn-dynamic-import": "^4.0.0",
-        "acorn-jsx": "^5.0.1",
-        "chalk": "^2.4.2",
-        "magic-string": "^0.25.3",
-        "minimist": "^1.2.0",
-        "regexpu-core": "^4.5.4"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "jsesc": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA=="
-        },
-        "regenerate-unicode-properties": {
-          "version": "9.0.0",
-          "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz",
-          "integrity": "sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==",
-          "requires": {
-            "regenerate": "^1.4.2"
-          }
-        },
-        "regexpu-core": {
-          "version": "4.8.0",
-          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz",
-          "integrity": "sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==",
-          "requires": {
-            "regenerate": "^1.4.2",
-            "regenerate-unicode-properties": "^9.0.0",
-            "regjsgen": "^0.5.2",
-            "regjsparser": "^0.7.0",
-            "unicode-match-property-ecmascript": "^2.0.0",
-            "unicode-match-property-value-ecmascript": "^2.0.0"
-          }
-        },
-        "regjsparser": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.7.0.tgz",
-          "integrity": "sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==",
-          "requires": {
-            "jsesc": "~0.5.0"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
-      "requires": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
-    "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=="
-    },
-    "bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
-    },
-    "cacheable-request": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
-      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
-      "requires": {
-        "clone-response": "^1.0.2",
-        "get-stream": "^5.1.0",
-        "http-cache-semantics": "^4.0.0",
-        "keyv": "^3.0.0",
-        "lowercase-keys": "^2.0.0",
-        "normalize-url": "^4.1.0",
-        "responselike": "^1.0.2"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "lowercase-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
-        }
-      }
-    },
-    "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": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
-      "integrity": "sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==",
-      "requires": {
-        "no-case": "^2.2.0",
-        "upper-case": "^1.1.1"
-      }
-    },
-    "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.30001464",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz",
-      "integrity": "sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g=="
-    },
-    "ccount": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
-      "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg=="
-    },
-    "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"
-      }
-    },
-    "change-case": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/change-case/-/change-case-3.1.0.tgz",
-      "integrity": "sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==",
-      "requires": {
-        "camel-case": "^3.0.0",
-        "constant-case": "^2.0.0",
-        "dot-case": "^2.1.0",
-        "header-case": "^1.0.0",
-        "is-lower-case": "^1.1.0",
-        "is-upper-case": "^1.1.0",
-        "lower-case": "^1.1.1",
-        "lower-case-first": "^1.0.0",
-        "no-case": "^2.3.2",
-        "param-case": "^2.1.0",
-        "pascal-case": "^2.0.0",
-        "path-case": "^2.1.0",
-        "sentence-case": "^2.1.0",
-        "snake-case": "^2.1.0",
-        "swap-case": "^1.1.0",
-        "title-case": "^2.1.0",
-        "upper-case": "^1.1.1",
-        "upper-case-first": "^1.1.0"
-      }
-    },
-    "character-entities": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
-      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
-    },
-    "character-entities-html4": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz",
-      "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g=="
-    },
-    "character-entities-legacy": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
-      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
-    },
-    "character-reference-invalid": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
-      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
-    },
-    "charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
-    },
-    "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"
-      }
-    },
-    "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.8.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
-      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw=="
-    },
-    "clean-css": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
-      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
-      "requires": {
-        "source-map": "~0.6.0"
-      }
-    },
-    "clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
-    },
-    "cli-boxes": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
-      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw=="
-    },
-    "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"
-      }
-    },
-    "cli-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
-      "requires": {
-        "restore-cursor": "^3.1.0"
-      }
-    },
-    "cli-spinners": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
-      "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
-      "dev": true
-    },
-    "clone": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
-    },
-    "clone-deep": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-      "requires": {
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.2",
-        "shallow-clone": "^3.0.0"
-      }
-    },
-    "clone-response": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
-      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
-      "requires": {
-        "mimic-response": "^1.0.0"
-      }
-    },
-    "clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
-    },
-    "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"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "collapse-white-space": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
-      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ=="
-    },
-    "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=="
-    },
-    "colord": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
-    },
-    "colorette": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
-      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ=="
-    },
-    "combine-promises": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/combine-promises/-/combine-promises-1.1.0.tgz",
-      "integrity": "sha512-ZI9jvcLDxqwaXEixOhArm3r7ReIivsXkpbyEWyeOhzz1QS0iSgBPnWvEqvIQtYyamGCYA88gFhmUrs9hrrQ0pg=="
-    },
-    "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"
-      }
-    },
-    "comma-separated-tokens": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
-      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
-    },
-    "commander": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg=="
-    },
-    "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=="
-        },
-        "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=="
-        }
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
-    "concurrently": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.5.1.tgz",
-      "integrity": "sha512-FlSwNpGjWQfRwPLXvJ/OgysbBxPkWpiVjy1042b0U7on7S7qwwMIILRj7WTN1mTgqa582bG6NFuScOoh6Zgdag==",
-      "requires": {
-        "chalk": "^4.1.0",
-        "date-fns": "^2.16.1",
-        "lodash": "^4.17.21",
-        "rxjs": "^6.6.3",
-        "spawn-command": "^0.0.2-1",
-        "supports-color": "^8.1.0",
-        "tree-kill": "^1.2.2",
-        "yargs": "^16.2.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "configstore": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
-      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
-      "requires": {
-        "dot-prop": "^5.2.0",
-        "graceful-fs": "^4.1.2",
-        "make-dir": "^3.0.0",
-        "unique-string": "^2.0.0",
-        "write-file-atomic": "^3.0.0",
-        "xdg-basedir": "^4.0.0"
-      }
-    },
-    "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=="
-    },
-    "consola": {
-      "version": "2.15.3",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
-      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
-    },
-    "constant-case": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-2.0.0.tgz",
-      "integrity": "sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==",
-      "requires": {
-        "snake-case": "^2.1.0",
-        "upper-case": "^1.1.1"
-      }
-    },
-    "content-disposition": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
-      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA=="
-    },
-    "content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
-    },
-    "convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-    },
-    "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=="
-    },
-    "copy-text-to-clipboard": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
-      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng=="
-    },
-    "copy-webpack-plugin": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
-      "integrity": "sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==",
-      "requires": {
-        "fast-glob": "^3.2.7",
-        "glob-parent": "^6.0.1",
-        "globby": "^11.0.3",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "core-js": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.29.0.tgz",
-      "integrity": "sha512-VG23vuEisJNkGl6XQmFJd3rEG/so/CNatqeE+7uZAwTSwFeB/qaO0be8xZYUNWprJ/GIwL8aMt9cj1kvbpTZhg=="
-    },
-    "core-js-compat": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.29.0.tgz",
-      "integrity": "sha512-ScMn3uZNAFhK2DGoEfErguoiAHhV2Ju+oJo/jK08p7B3f3UhocUrCCkTvnZaiS+edl5nlIoiBXKcwMc6elv4KQ==",
-      "requires": {
-        "browserslist": "^4.21.5"
-      }
-    },
-    "core-js-pure": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.29.0.tgz",
-      "integrity": "sha512-v94gUjN5UTe1n0yN/opTihJ8QBWD2O8i19RfTZR7foONPWArnjB96QA/wk5ozu1mm6ja3udQCzOzwQXTxi3xOQ=="
-    },
-    "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.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "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"
-      }
-    },
-    "create-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
-    },
-    "cross-fetch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-      "requires": {
-        "node-fetch": "2.6.7"
-      }
-    },
-    "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"
-      }
-    },
-    "crowdin": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/crowdin/-/crowdin-3.5.0.tgz",
-      "integrity": "sha512-qyLtfanpacJq/2SFkkm+Pty6mUTBgV3YySrFAxAY+y3iOILIMuNcKxJ2CpyvIeIqZ2YoUo/AeDzQMchM4FdMZg==",
-      "requires": {
-        "change-case": "^3.1.0",
-        "form-data": "^2.5.1",
-        "got": "^9.6.0",
-        "js-yaml": "^3.13.1",
-        "json-schema-deref-sync": "^0.10.1",
-        "lodash": "^4.17.15",
-        "pupa": "^2.0.1"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="
-    },
-    "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-declaration-sorter": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
-      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
-    },
-    "css-loader": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
-      "integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
-      "requires": {
-        "icss-utils": "^5.1.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.15",
-        "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.1.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.5"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "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.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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"
-          }
-        }
-      }
-    },
-    "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"
-      }
-    },
-    "css-what": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
-    },
-    "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.15",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
-      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
-      "requires": {
-        "cssnano-preset-default": "^5.2.14",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
-      }
-    },
-    "cssnano-preset-advanced": {
-      "version": "5.3.10",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.10.tgz",
-      "integrity": "sha512-fnYJyCS9jgMU+cmHO1rPSPf9axbQyD7iUhLO5Df6O4G+fKIOMps+ZbU0PdGFejFBBZ3Pftf18fn1eG7MAPUSWQ==",
-      "requires": {
-        "autoprefixer": "^10.4.12",
-        "cssnano-preset-default": "^5.2.14",
-        "postcss-discard-unused": "^5.1.0",
-        "postcss-merge-idents": "^5.1.1",
-        "postcss-reduce-idents": "^5.2.0",
-        "postcss-zindex": "^5.1.0"
-      }
-    },
-    "cssnano-preset-default": {
-      "version": "5.2.14",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
-      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
-      "requires": {
-        "css-declaration-sorter": "^6.3.1",
-        "cssnano-utils": "^3.1.0",
-        "postcss-calc": "^8.2.3",
-        "postcss-colormin": "^5.3.1",
-        "postcss-convert-values": "^5.1.3",
-        "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.7",
-        "postcss-merge-rules": "^5.1.4",
-        "postcss-minify-font-values": "^5.1.0",
-        "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.4",
-        "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.1",
-        "postcss-normalize-url": "^5.1.0",
-        "postcss-normalize-whitespace": "^5.1.1",
-        "postcss-ordered-values": "^5.1.3",
-        "postcss-reduce-initial": "^5.1.2",
-        "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=="
-        }
-      }
-    },
-    "csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-    },
-    "dag-map": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz",
-      "integrity": "sha512-+LSAiGFwQ9dRnRdOeaj7g47ZFJcOUPukAP8J3A3fuZ1g9Y44BG+P1sgApjLXTQPOzC4+7S9Wr8kXsfpINM4jpw=="
-    },
-    "date-fns": {
-      "version": "2.29.3",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
-      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
-    },
-    "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"
-      }
-    },
-    "decompress-response": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
-      "integrity": "sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==",
-      "requires": {
-        "mimic-response": "^1.0.0"
-      }
-    },
-    "deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
-    },
-    "deepl": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/deepl/-/deepl-1.0.13.tgz",
-      "integrity": "sha512-ieaHKo+Y2u1jTpbX3SkhFGaOLgXB20gYoLqPhqtjxr612GC9wSMUqrHIfhvQzpevTVcI6H4kgElXActg3DHnqg==",
-      "dev": true,
-      "requires": {
-        "axios": "^0.21.1",
-        "querystring": "^0.2.0"
-      },
-      "dependencies": {
-        "axios": {
-          "version": "0.21.4",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-          "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-          "dev": true,
-          "requires": {
-            "follow-redirects": "^1.14.0"
-          }
-        }
-      }
-    },
-    "deepmerge": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
-      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og=="
-    },
-    "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"
-      }
-    },
-    "defaults": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
-      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
-      "dev": true,
-      "requires": {
-        "clone": "^1.0.2"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-          "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
-          "dev": true
-        }
-      }
-    },
-    "defer-to-connect": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
-      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
-    },
-    "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.2.0",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "requires": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      }
-    },
-    "degit": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/degit/-/degit-2.8.4.tgz",
-      "integrity": "sha512-vqYuzmSA5I50J882jd+AbAhQtgK6bdKUJIex1JNfEUPENCgYsxugzKVZlFyMwV4i06MmnV47/Iqi5Io86zf3Ng==",
-      "dev": true
-    },
-    "del": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
-      "integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
-      "requires": {
-        "globby": "^11.0.1",
-        "graceful-fs": "^4.2.4",
-        "is-glob": "^4.0.1",
-        "is-path-cwd": "^2.2.0",
-        "is-path-inside": "^3.0.2",
-        "p-map": "^4.0.0",
-        "rimraf": "^3.0.2",
-        "slash": "^3.0.0"
-      }
-    },
-    "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=="
-    },
-    "detab": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detab/-/detab-2.0.4.tgz",
-      "integrity": "sha512-8zdsQA5bIkoRECvCrNKPla84lyoR7DSAyf7p0YgXzBO9PDJx8KntPUay7NS6yp+KdxdVtiE5SpHKtbp2ZQyA9g==",
-      "requires": {
-        "repeat-string": "^1.5.4"
-      }
-    },
-    "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": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
-      "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
-      "requires": {
-        "address": "^1.0.1",
-        "debug": "4"
-      }
-    },
-    "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=="
-        }
-      }
-    },
-    "diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true
-    },
-    "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"
-      }
-    },
-    "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"
-      }
-    },
-    "docusaurus-plugin-module-alias": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/docusaurus-plugin-module-alias/-/docusaurus-plugin-module-alias-0.0.2.tgz",
-      "integrity": "sha512-y0PXqIQUEZm8WXCr/FufIM7EvZGe0JVUSOTavDQzs0xGPA6XGqcT/b0Shwub5x1st5kAwwmsDqcsCGpm8PAwrA==",
-      "requires": {
-        "joi": "^17.3.0"
-      }
-    },
-    "docusaurus-plugin-sass": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.3.tgz",
-      "integrity": "sha512-FbaE06K8NF8SPUYTwiG+83/jkXrwHJ/Afjqz3SUIGon6QvFwSSoKOcoxGQmUBnjTOk+deUONDx8jNWsegFJcBQ==",
-      "requires": {
-        "sass-loader": "^10.1.1"
-      }
-    },
-    "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=="
-    },
-    "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": "2.1.1",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.1.tgz",
-      "integrity": "sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==",
-      "requires": {
-        "no-case": "^2.2.0"
-      }
-    },
-    "dot-prop": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
-      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
-      "requires": {
-        "is-obj": "^2.0.0"
-      },
-      "dependencies": {
-        "is-obj": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
-        }
-      }
-    },
-    "duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
-    },
-    "duplexer3": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz",
-      "integrity": "sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA=="
-    },
-    "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.9",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
-      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
-      "dev": true,
-      "requires": {
-        "jake": "^10.8.5"
-      }
-    },
-    "electron-to-chromium": {
-      "version": "1.4.328",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.328.tgz",
-      "integrity": "sha512-DE9tTy2PNmy1v55AZAO542ui+MLC2cvINMK4P2LXGsJdput/ThVG9t+QGecPuAZZSgC8XoI+Jh9M1OG9IoNSCw=="
-    },
-    "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=="
-    },
-    "emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
-    },
-    "emoticon": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-3.2.0.tgz",
-      "integrity": "sha512-SNujglcLTTg+lDAcApPNgEdudaqQFiAbJCqzjNxJkvN9vAwCGi0uu8IUVvx+f16h+V44KCY6Y2yboroc9pilHg=="
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
-    },
-    "end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "requires": {
-        "once": "^1.4.0"
-      }
-    },
-    "enhanced-resolve": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
-      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
-      "requires": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      }
-    },
-    "enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "requires": {
-        "ansi-colors": "^4.1.1"
-      }
-    },
-    "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"
-      }
-    },
-    "es-abstract": {
-      "version": "1.21.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
-      "integrity": "sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==",
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-set-tostringtag": "^2.0.1",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.3",
-        "get-symbol-description": "^1.0.0",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
-        "has": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.4",
-        "is-array-buffer": "^3.0.1",
-        "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.10",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.2",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.4.3",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trimend": "^1.0.6",
-        "string.prototype.trimstart": "^1.0.6",
-        "typed-array-length": "^1.0.4",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.9"
-      }
-    },
-    "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-set-tostringtag": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
-      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
-      "requires": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "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-goat": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
-      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q=="
-    },
-    "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": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
-    },
-    "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"
-      }
-    },
-    "esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
-    },
-    "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"
-      },
-      "dependencies": {
-        "estraverse": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
-        }
-      }
-    },
-    "estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
-    },
-    "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=="
-    },
-    "eta": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/eta/-/eta-1.14.2.tgz",
-      "integrity": "sha512-wZmJAV7EFUG5W8XNXSazIdichnWEhGB1OWg4tnXWPj0CPNUcFdgorGNO6N9p6WBUgoUe4P0OziJYn1+6zxP2aQ=="
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
-    },
-    "eval": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/eval/-/eval-0.1.8.tgz",
-      "integrity": "sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==",
-      "requires": {
-        "@types/node": "*",
-        "require-like": ">= 0.1.1"
-      }
-    },
-    "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"
-      },
-      "dependencies": {
-        "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=="
-        }
-      }
-    },
-    "express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
-      "requires": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
-        "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.11.0",
-        "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=="
-        },
-        "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"
-          }
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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=="
-        }
-      }
-    },
-    "extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
-    },
-    "extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "requires": {
-        "is-extendable": "^0.1.0"
-      }
-    },
-    "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.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "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"
-      }
-    },
-    "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-url-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
-      "requires": {
-        "punycode": "^1.3.2"
-      }
-    },
-    "fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-      "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"
-      }
-    },
-    "fbemitter": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz",
-      "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==",
-      "requires": {
-        "fbjs": "^3.0.0"
-      }
-    },
-    "fbjs": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.4.tgz",
-      "integrity": "sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==",
-      "requires": {
-        "cross-fetch": "^3.1.5",
-        "fbjs-css-vars": "^1.0.0",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.30"
-      }
-    },
-    "fbjs-css-vars": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
-      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
-    },
-    "feed": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/feed/-/feed-4.2.2.tgz",
-      "integrity": "sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==",
-      "requires": {
-        "xml-js": "^1.6.11"
-      }
-    },
-    "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"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "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==",
-      "dev": true,
-      "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==",
-          "dev": true,
-          "requires": {
-            "balanced-match": "^1.0.0"
-          }
-        },
-        "minimatch": {
-          "version": "5.1.6",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^2.0.1"
-          }
-        }
-      }
-    },
-    "filesize": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.4.0.tgz",
-      "integrity": "sha512-mjFIpOHC4jbfcTfoh4rkWpI31mF7viw9ikj/JyLoKzqlwG/YsefKfvYlYhdYdg/9mtK2z1AzgN/0LvVQ3zdlSQ=="
-    },
-    "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": "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"
-      }
-    },
-    "flux": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.3.tgz",
-      "integrity": "sha512-yKAbrp7JhZhj6uiT1FTuVMlIAT1J4jqEyBpFApi1kxpGZCvacMVc/t1pMQyotqHhAgvoE3bNvAykhCo2CLjnYw==",
-      "requires": {
-        "fbemitter": "^3.0.0",
-        "fbjs": "^3.0.1"
-      }
-    },
-    "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
-    },
-    "for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "requires": {
-        "is-callable": "^1.1.3"
-      }
-    },
-    "fork-ts-checker-webpack-plugin": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
-      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
-      "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": {
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "tapable": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-          "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
-        }
-      }
-    },
-    "form-data": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
-      "integrity": "sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==",
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "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=="
-    },
-    "front-matter": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
-      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
-      "dev": true,
-      "requires": {
-        "js-yaml": "^3.13.1"
-      },
-      "dependencies": {
-        "argparse": {
-          "version": "1.0.10",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-          "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-          "dev": true,
-          "requires": {
-            "sprintf-js": "~1.0.2"
-          }
-        },
-        "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==",
-          "dev": true,
-          "requires": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
-          }
-        }
-      }
-    },
-    "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"
-      }
-    },
-    "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"
-      }
-    },
-    "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.2.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
-      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-      "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-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "requires": {
-        "pump": "^3.0.0"
-      }
-    },
-    "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"
-      }
-    },
-    "github-slugger": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
-      "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
-    },
-    "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": "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"
-      }
-    },
-    "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-dirs": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
-      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
-      "requires": {
-        "ini": "2.0.0"
-      },
-      "dependencies": {
-        "ini": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
-          "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA=="
-        }
-      }
-    },
-    "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=="
-    },
-    "globalthis": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
-      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
-      "requires": {
-        "define-properties": "^1.1.3"
-      }
-    },
-    "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"
-      }
-    },
-    "gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "requires": {
-        "get-intrinsic": "^1.1.3"
-      }
-    },
-    "got": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
-      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
-      "requires": {
-        "@sindresorhus/is": "^0.14.0",
-        "@szmarczak/http-timer": "^1.1.2",
-        "cacheable-request": "^6.0.0",
-        "decompress-response": "^3.3.0",
-        "duplexer3": "^0.1.4",
-        "get-stream": "^4.1.0",
-        "lowercase-keys": "^1.0.1",
-        "mimic-response": "^1.0.1",
-        "p-cancelable": "^1.0.0",
-        "to-readable-stream": "^1.0.0",
-        "url-parse-lax": "^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=="
-    },
-    "gray-matter": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
-      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
-      "requires": {
-        "js-yaml": "^3.13.1",
-        "kind-of": "^6.0.2",
-        "section-matter": "^1.0.0",
-        "strip-bom-string": "^1.0.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "gzip-size": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
-      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
-      "requires": {
-        "duplexer": "^0.1.1",
-        "pify": "^4.0.1"
-      }
-    },
-    "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=="
-    },
-    "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": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-    },
-    "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-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
-    },
-    "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"
-      }
-    },
-    "has-yarn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
-      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw=="
-    },
-    "hast-to-hyperscript": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz",
-      "integrity": "sha512-zQgLKqF+O2F72S1aa4y2ivxzSlko3MAvxkwG8ehGmNiqd98BIN3JM1rAJPmplEyLmGLO2QZYJtIneOSZ2YbJuA==",
-      "requires": {
-        "@types/unist": "^2.0.3",
-        "comma-separated-tokens": "^1.0.0",
-        "property-information": "^5.3.0",
-        "space-separated-tokens": "^1.0.0",
-        "style-to-object": "^0.3.0",
-        "unist-util-is": "^4.0.0",
-        "web-namespaces": "^1.0.0"
-      }
-    },
-    "hast-util-from-parse5": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-6.0.1.tgz",
-      "integrity": "sha512-jeJUWiN5pSxW12Rh01smtVkZgZr33wBokLzKLwinYOUfSzm1Nl/c3GUGebDyOKjdsRgMvoVbV0VpAcpjF4NrJA==",
-      "requires": {
-        "@types/parse5": "^5.0.0",
-        "hastscript": "^6.0.0",
-        "property-information": "^5.0.0",
-        "vfile": "^4.0.0",
-        "vfile-location": "^3.2.0",
-        "web-namespaces": "^1.0.0"
-      }
-    },
-    "hast-util-is-element": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz",
-      "integrity": "sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ=="
-    },
-    "hast-util-parse-selector": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
-      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="
-    },
-    "hast-util-raw": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-6.0.1.tgz",
-      "integrity": "sha512-ZMuiYA+UF7BXBtsTBNcLBF5HzXzkyE6MLzJnL605LKE8GJylNjGc4jjxazAHUtcwT5/CEt6afRKViYB4X66dig==",
-      "requires": {
-        "@types/hast": "^2.0.0",
-        "hast-util-from-parse5": "^6.0.0",
-        "hast-util-to-parse5": "^6.0.0",
-        "html-void-elements": "^1.0.0",
-        "parse5": "^6.0.0",
-        "unist-util-position": "^3.0.0",
-        "vfile": "^4.0.0",
-        "web-namespaces": "^1.0.0",
-        "xtend": "^4.0.0",
-        "zwitch": "^1.0.0"
-      }
-    },
-    "hast-util-sanitize": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-3.0.2.tgz",
-      "integrity": "sha512-+2I0x2ZCAyiZOO/sb4yNLFmdwPBnyJ4PBkVTUMKMqBwYNA+lXSgOmoRXlJFazoyid9QPogRRKgKhVEodv181sA==",
-      "requires": {
-        "xtend": "^4.0.0"
-      }
-    },
-    "hast-util-to-html": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-7.1.3.tgz",
-      "integrity": "sha512-yk2+1p3EJTEE9ZEUkgHsUSVhIpCsL/bvT8E5GzmWc+N1Po5gBw+0F8bo7dpxXR0nu0bQVxVZGX2lBGF21CmeDw==",
-      "requires": {
-        "ccount": "^1.0.0",
-        "comma-separated-tokens": "^1.0.0",
-        "hast-util-is-element": "^1.0.0",
-        "hast-util-whitespace": "^1.0.0",
-        "html-void-elements": "^1.0.0",
-        "property-information": "^5.0.0",
-        "space-separated-tokens": "^1.0.0",
-        "stringify-entities": "^3.0.1",
-        "unist-util-is": "^4.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
-    "hast-util-to-parse5": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-6.0.0.tgz",
-      "integrity": "sha512-Lu5m6Lgm/fWuz8eWnrKezHtVY83JeRGaNQ2kn9aJgqaxvVkFCZQBEhgodZUDUvoodgyROHDb3r5IxAEdl6suJQ==",
-      "requires": {
-        "hast-to-hyperscript": "^9.0.0",
-        "property-information": "^5.0.0",
-        "web-namespaces": "^1.0.0",
-        "xtend": "^4.0.0",
-        "zwitch": "^1.0.0"
-      }
-    },
-    "hast-util-whitespace": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz",
-      "integrity": "sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A=="
-    },
-    "hastscript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
-      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
-      "requires": {
-        "@types/hast": "^2.0.0",
-        "comma-separated-tokens": "^1.0.0",
-        "hast-util-parse-selector": "^2.0.0",
-        "property-information": "^5.0.0",
-        "space-separated-tokens": "^1.0.0"
-      }
-    },
-    "he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
-    },
-    "header-case": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/header-case/-/header-case-1.0.1.tgz",
-      "integrity": "sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==",
-      "requires": {
-        "no-case": "^2.2.0",
-        "upper-case": "^1.1.3"
-      }
-    },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "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": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-        },
-        "readable-stream": {
-          "version": "2.3.8",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-          "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"
-          }
-        },
-        "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=="
-        },
-        "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-entities": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
-      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="
-    },
-    "html-loader": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-3.1.2.tgz",
-      "integrity": "sha512-9WQlLiAV5N9fCna4MUmBW/ifaUbuFZ2r7IZmtXzhyfyi4zgPEjXsmsYCKs+yT873MzRj+f1WMjuAiPNA7C6Tcw==",
-      "dev": true,
-      "requires": {
-        "html-minifier-terser": "^6.0.2",
-        "parse5": "^6.0.1"
-      }
-    },
-    "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"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "commander": {
-          "version": "8.3.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg=="
-    },
-    "html-void-elements": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz",
-      "integrity": "sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w=="
-    },
-    "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-cache-semantics": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
-    },
-    "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-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"
-      },
-      "dependencies": {
-        "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=="
-        }
-      }
-    },
-    "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=="
-    },
-    "hygen": {
-      "version": "6.2.11",
-      "resolved": "https://registry.npmjs.org/hygen/-/hygen-6.2.11.tgz",
-      "integrity": "sha512-t6/zLI2XozP5gvV74nnl8LZSbwpVNFUkUs/O9DwuOdiiBbws5k4AQNVwKZ9FGzcKjdJ5EBBYkVzlcUHkLyY0FQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "^17.0.19",
-        "chalk": "^4.1.2",
-        "change-case": "^3.1.0",
-        "debug": "^4.3.3",
-        "degit": "^2.8.4",
-        "ejs": "^3.1.6",
-        "enquirer": "^2.3.6",
-        "execa": "^5.0.0",
-        "front-matter": "^4.0.2",
-        "fs-extra": "^10.0.0",
-        "ignore-walk": "^4.0.1",
-        "inflection": "^1.12.0",
-        "ora": "^5.0.0",
-        "yargs-parser": "^21.0.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "17.0.45",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
-          "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
-          "dev": true
-        },
-        "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==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^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"
-      }
-    },
-    "icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
-    },
-    "ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true
-    },
-    "ignore": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
-      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
-    },
-    "ignore-walk": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-4.0.1.tgz",
-      "integrity": "sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw==",
-      "dev": true,
-      "requires": {
-        "minimatch": "^3.0.4"
-      }
-    },
-    "imgix-url-builder": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/imgix-url-builder/-/imgix-url-builder-0.0.3.tgz",
-      "integrity": "sha512-8Oc2Cn4+jF06sEfJcVPlWYfD2F6RjrwIMbk1xEzux8unoB5LsvFc/GL1BQ47HPaeE12ReX2nMUcjUslGYWLxHA=="
-    },
-    "immer": {
-      "version": "9.0.19",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
-      "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ=="
-    },
-    "immutable": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
-    },
-    "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"
-      }
-    },
-    "import-lazy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
-      "integrity": "sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A=="
-    },
-    "imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
-    },
-    "indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="
-    },
-    "infima": {
-      "version": "0.2.0-alpha.34",
-      "resolved": "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.34.tgz",
-      "integrity": "sha512-Na6A2Tl56i1p9dzu7VOAT1Kmu3f5buz63Wvd+D9ZZWL6siQ47L7wkEZUICVKFgc5gERFZVZ/PoPB57Kl++h37Q=="
-    },
-    "inflection": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.4.tgz",
-      "integrity": "sha512-6I/HUDeYFfuNCVS3td055BaXBwKYuzw7K3ExVMStBowKo9oOAMJIXIHvdyR3iboTCp1b+1i5DSkIZTcwIktuDw==",
-      "dev": true
-    },
-    "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=="
-    },
-    "inline-style-parser": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
-      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
-    },
-    "internal-slot": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
-      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
-      "requires": {
-        "get-intrinsic": "^1.2.0",
-        "has": "^1.0.3",
-        "side-channel": "^1.0.4"
-      }
-    },
-    "interpret": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
-      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
-    },
-    "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-alphabetical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
-      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
-    },
-    "is-alphanumerical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
-      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
-      "requires": {
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0"
-      }
-    },
-    "is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
-      }
-    },
-    "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-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-    },
-    "is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="
-    },
-    "is-ci": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-      "requires": {
-        "ci-info": "^2.0.0"
-      },
-      "dependencies": {
-        "ci-info": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-          "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
-        }
-      }
-    },
-    "is-core-module": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
-      "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-decimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
-      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
-    },
-    "is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="
-    },
-    "is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="
-    },
-    "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-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-hexadecimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
-      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
-    },
-    "is-installed-globally": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
-      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
-      "requires": {
-        "global-dirs": "^3.0.0",
-        "is-path-inside": "^3.0.2"
-      }
-    },
-    "is-interactive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
-      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
-      "dev": true
-    },
-    "is-invalid-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/is-invalid-path/-/is-invalid-path-0.1.0.tgz",
-      "integrity": "sha512-aZMG0T3F34mTg4eTdszcGXx54oiZ4NtHSft3hWNJMGJXUUqdIj3cOZuHcU0nCWWcY3jd7yRe/3AEm3vSNTpBGQ==",
-      "requires": {
-        "is-glob": "^2.0.0"
-      },
-      "dependencies": {
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha512-7Q+VbVafe6x2T+Tu6NcOf6sRklazEPmBoB3IWk3WdGZM2iGUwU/Oe3Wtq5lSEkDTTlpp8yx+5t4pzO/i9Ty1ww=="
-        },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha512-a1dBeB19NXsf/E0+FHqkagizel/LQw2DjSQpvQrj3zT+jYPpaUCryPnrQajXKFLCMuf4I6FhRpaGtw4lPrG6Eg==",
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        }
-      }
-    },
-    "is-lower-case": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz",
-      "integrity": "sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==",
-      "requires": {
-        "lower-case": "^1.1.0"
-      }
-    },
-    "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-npm": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-5.0.0.tgz",
-      "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA=="
-    },
-    "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-path-cwd": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ=="
-    },
-    "is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ=="
-    },
-    "is-plain-obj": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="
-    },
-    "is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "requires": {
-        "isobject": "^3.0.1"
-      }
-    },
-    "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-typed-array": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
-      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
-    },
-    "is-unicode-supported": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
-      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-      "dev": true
-    },
-    "is-upper-case": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz",
-      "integrity": "sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==",
-      "requires": {
-        "upper-case": "^1.1.0"
-      }
-    },
-    "is-valid-path": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-valid-path/-/is-valid-path-0.1.1.tgz",
-      "integrity": "sha512-+kwPrVDu9Ms03L90Qaml+79+6DZHqHyRoANI6IsZJ/g8frhnfchDOBCa0RbQ6/kdHt5CS5OeIEyrYznNuVN+8A==",
-      "requires": {
-        "is-invalid-path": "^0.1.0"
-      }
-    },
-    "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-whitespace-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
-      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w=="
-    },
-    "is-word-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
-      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA=="
-    },
-    "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"
-      }
-    },
-    "is-yarn-global": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
-      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
-    },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-    },
-    "isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
-    },
-    "jake": {
-      "version": "10.8.7",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
-      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
-      "dev": true,
-      "requires": {
-        "async": "^3.2.3",
-        "chalk": "^4.0.2",
-        "filelist": "^1.0.4",
-        "minimatch": "^3.1.2"
-      },
-      "dependencies": {
-        "async": {
-          "version": "3.2.4",
-          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        }
-      }
-    },
-    "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": {
-        "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"
-          }
-        }
-      }
-    },
-    "joi": {
-      "version": "17.8.3",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.8.3.tgz",
-      "integrity": "sha512-q5Fn6Tj/jR8PfrLrx4fpGH4v9qM6o+vDUfD4/3vxxyg34OmKcNqYZ1qn2mpLza96S8tL0p0rIw2gOZX+/cTg9w==",
-      "requires": {
-        "@hapi/hoek": "^9.0.0",
-        "@hapi/topo": "^5.0.0",
-        "@sideway/address": "^4.1.3",
-        "@sideway/formula": "^3.0.1",
-        "@sideway/pinpoint": "^2.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": "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"
-      }
-    },
-    "jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
-    },
-    "json-buffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ=="
-    },
-    "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-deref-sync": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/json-schema-deref-sync/-/json-schema-deref-sync-0.10.1.tgz",
-      "integrity": "sha512-ESkdgGyLg5H0el8VvLe3ss8ANsRH05dPOG19HQ2T4hWG/rD1N6Iei7Xltc8Wwcz4pqc+mGWihP2d4mFWtk7A3A==",
-      "requires": {
-        "clone": "^2.1.2",
-        "dag-map": "~1.0.0",
-        "is-valid-path": "^0.1.1",
-        "lodash": "^4.17.13",
-        "md5": "~2.2.0",
-        "memory-cache": "~0.2.0",
-        "traverse": "~0.6.6",
-        "valid-url": "~1.0.9"
-      }
-    },
-    "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=="
-    },
-    "json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
-    },
-    "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"
-      }
-    },
-    "keyv": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
-      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
-      "requires": {
-        "json-buffer": "3.0.0"
-      }
-    },
-    "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.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
-    },
-    "latest-version": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
-      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
-      "requires": {
-        "package-json": "^6.3.0"
-      }
-    },
-    "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=="
-    },
-    "lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
-    },
-    "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.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "requires": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      }
-    },
-    "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"
-      }
-    },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "lodash.curry": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
-      "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA=="
-    },
-    "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.flow": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
-      "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw=="
-    },
-    "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.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
-    },
-    "log-symbols": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
-      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "is-unicode-supported": "^0.1.0"
-      }
-    },
-    "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": "1.1.4",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
-      "integrity": "sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA=="
-    },
-    "lower-case-first": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.2.tgz",
-      "integrity": "sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==",
-      "requires": {
-        "lower-case": "^1.1.2"
-      }
-    },
-    "lowercase-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
-    },
-    "lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "requires": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "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=="
-        }
-      }
-    },
-    "make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
-    },
-    "markdown-escapes": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
-      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
-    },
-    "md5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz",
-      "integrity": "sha512-PlGG4z5mBANDGCKsYQe0CaUYHdZYZt8ZPZLmEt+Urf0W4GlpTX4HescwHU+dc9+Z/G/vZKYZYFrwgm9VxK6QOQ==",
-      "requires": {
-        "charenc": "~0.0.1",
-        "crypt": "~0.0.1",
-        "is-buffer": "~1.1.1"
-      }
-    },
-    "mdast-squeeze-paragraphs": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-4.0.0.tgz",
-      "integrity": "sha512-zxdPn69hkQ1rm4J+2Cs2j6wDEv7O17TfXTJ33tl/+JPIoEmtV9t2ZzBM5LPHE8QlHsmVD8t3vPKCyY3oH+H8MQ==",
-      "requires": {
-        "unist-util-remove": "^2.0.0"
-      }
-    },
-    "mdast-util-definitions": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
-      "integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==",
-      "requires": {
-        "unist-util-visit": "^2.0.0"
-      }
-    },
-    "mdast-util-to-hast": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz",
-      "integrity": "sha512-BW3LM9SEMnjf4HXXVApZMt8gLQWVNXc3jryK0nJu/rOXPOnlkUjmdkDlmxMirpbU9ILncGFIwLH/ubnWBbcdgA==",
-      "requires": {
-        "@types/mdast": "^3.0.0",
-        "@types/unist": "^2.0.0",
-        "mdast-util-definitions": "^4.0.0",
-        "mdurl": "^1.0.0",
-        "unist-builder": "^2.0.0",
-        "unist-util-generated": "^1.0.0",
-        "unist-util-position": "^3.0.0",
-        "unist-util-visit": "^2.0.0"
-      }
-    },
-    "mdast-util-to-string": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
-      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w=="
-    },
-    "mdn-data": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
-    },
-    "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
-    },
-    "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.13",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz",
-      "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==",
-      "requires": {
-        "fs-monkey": "^1.0.3"
-      }
-    },
-    "memory-cache": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz",
-      "integrity": "sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA=="
-    },
-    "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=="
-    },
-    "mimic-response": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
-    },
-    "mini-css-extract-plugin": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
-      "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0",
-        "webpack-sources": "^1.1.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "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.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
-    },
-    "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"
-      }
-    },
-    "modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA=="
-    },
-    "mrmime": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw=="
-    },
-    "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=="
-    },
-    "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": "2.3.2",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
-      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
-      "requires": {
-        "lower-case": "^1.1.1"
-      }
-    },
-    "node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "requires": {
-        "lodash": "^4.17.21"
-      }
-    },
-    "node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "requires": {
-        "whatwg-url": "^5.0.0"
-      }
-    },
-    "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-releases": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
-    },
-    "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": "4.5.1",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
-      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA=="
-    },
-    "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"
-      }
-    },
-    "nprogress": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
-      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
-    },
-    "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"
-      }
-    },
-    "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-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
-    },
-    "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.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "has-symbols": "^1.0.3",
-        "object-keys": "^1.1.1"
-      }
-    },
-    "object.getownpropertydescriptors": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.5.tgz",
-      "integrity": "sha512-yDNzckpM6ntyQiGTik1fKV1DcVDRS+w8bvpWNCBanvH5LfRX9O8WTHqQzG4RZwRAM4I0oU7TV11Lj5v0g20ibw==",
-      "requires": {
-        "array.prototype.reduce": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "object.values": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
-      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "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": "7.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-      "requires": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
-      }
-    },
-    "opener": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A=="
-    },
-    "ora": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
-      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
-      "dev": true,
-      "requires": {
-        "bl": "^4.1.0",
-        "chalk": "^4.1.0",
-        "cli-cursor": "^3.1.0",
-        "cli-spinners": "^2.5.0",
-        "is-interactive": "^1.0.0",
-        "is-unicode-supported": "^0.1.0",
-        "log-symbols": "^4.1.0",
-        "strip-ansi": "^6.0.0",
-        "wcwidth": "^1.0.1"
-      }
-    },
-    "p-cancelable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
-      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw=="
-    },
-    "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"
-      }
-    },
-    "p-map": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-      "requires": {
-        "aggregate-error": "^3.0.0"
-      }
-    },
-    "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=="
-    },
-    "package-json": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
-      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
-      "requires": {
-        "got": "^9.6.0",
-        "registry-auth-token": "^4.0.0",
-        "registry-url": "^5.0.0",
-        "semver": "^6.2.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-        }
-      }
-    },
-    "param-case": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
-      "integrity": "sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==",
-      "requires": {
-        "no-case": "^2.2.0"
-      }
-    },
-    "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-entities": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
-      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-      "requires": {
-        "character-entities": "^1.0.0",
-        "character-entities-legacy": "^1.0.0",
-        "character-reference-invalid": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-hexadecimal": "^1.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"
-      }
-    },
-    "parse-numeric-range": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
-      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
-    },
-    "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": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-2.0.1.tgz",
-      "integrity": "sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==",
-      "requires": {
-        "camel-case": "^3.0.0",
-        "upper-case-first": "^1.1.0"
-      }
-    },
-    "path-case": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/path-case/-/path-case-2.1.1.tgz",
-      "integrity": "sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==",
-      "requires": {
-        "no-case": "^2.2.0"
-      }
-    },
-    "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-is-inside": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w=="
-    },
-    "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": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
-    "path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
-    },
-    "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": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-    },
-    "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"
-      }
-    },
-    "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-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.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
-      "requires": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      }
-    },
-    "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-colormin": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
-      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.9.1",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-convert-values": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
-      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "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-discard-unused": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-5.1.0.tgz",
-      "integrity": "sha512-KwLWymI9hbwXmJa0dkrzpRbSJEh0vVUd7r8t0yOGPcfKzyJJxFM8kLyC5Ev9avji6nY95pOp1W6HqIrfT+0VGw==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
-    "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-merge-idents": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-5.1.1.tgz",
-      "integrity": "sha512-pCijL1TREiCoog5nQp7wUe+TUonA2tC2sQ54UGeMmryK3UFGIYKqDyjnqd6RcuI4znFn9hWSLNN8xKE/vWcUQw==",
-      "requires": {
-        "cssnano-utils": "^3.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-merge-longhand": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
-      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.1"
-      }
-    },
-    "postcss-merge-rules": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
-      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "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.4",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
-      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "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-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.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
-      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "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"
-      },
-      "dependencies": {
-        "normalize-url": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-          "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
-        }
-      }
-    },
-    "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-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-reduce-idents": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-5.2.0.tgz",
-      "integrity": "sha512-BTrLjICoSB6gxbc58D5mdBK8OhXRDqud/zodYfdSi52qvDHdMwk+9kB9xsM8yJThH/sZU5A6QVSmMmaN001gIg==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-reduce-initial": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
-      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "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-selector-parser": {
-      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
-      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "requires": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      }
-    },
-    "postcss-sort-media-queries": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.3.0.tgz",
-      "integrity": "sha512-jAl8gJM2DvuIJiI9sL1CuiHtKM4s5aEIomkU8G3LFvbP+p8i7Sz8VV63uieTgoewGqKbi+hxBTiOKJlB35upCg==",
-      "requires": {
-        "sort-css-media-queries": "2.1.0"
-      }
-    },
-    "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=="
-        },
-        "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=="
-    },
-    "postcss-zindex": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-5.1.0.tgz",
-      "integrity": "sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A=="
-    },
-    "prepend-http": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-      "integrity": "sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA=="
-    },
-    "prettier": {
-<<<<<<< HEAD
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
-      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
-=======
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
-      "dev": true
-    },
-    "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-time": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
-      "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA=="
-    },
-    "prism-react-renderer": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
-      "integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg=="
-    },
-    "prismjs": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
-    },
-    "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": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
-    "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"
-      }
-    },
-    "property-information": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
-      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
-      "requires": {
-        "xtend": "^4.0.0"
-      }
-    },
-    "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=="
-        }
-      }
-    },
-    "pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
-    },
-    "pupa": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
-      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
-      "requires": {
-        "escape-goat": "^2.0.0"
-      }
-    },
-    "pure-color": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
-      "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA=="
-    },
-    "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.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "requires": {
-        "side-channel": "^1.0.4"
-      }
-    },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g=="
-    },
-    "queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
-    },
-    "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.0",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
-      "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A=="
-    },
-    "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=="
-        }
-      }
-    },
-    "rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "requires": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "dependencies": {
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-          "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="
-        }
-      }
-    },
-    "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "react-base16-styling": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
-      "integrity": "sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==",
-      "requires": {
-        "base16": "^1.0.0",
-        "lodash.curry": "^4.0.1",
-        "lodash.flow": "^3.3.0",
-        "pure-color": "^1.2.0"
-      }
-    },
-    "react-dev-utils": {
-      "version": "12.0.0-next.47",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0-next.47.tgz",
-      "integrity": "sha512-PsE71vP15TZMmp/RZKOJC4fYD5Pvt0+wCoyG3QHclto0d4FyIJI78xGRICOOThZFROqgXYlZP6ddmeybm+jO4w==",
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "address": "^1.1.2",
-        "browserslist": "^4.16.5",
-        "chalk": "^2.4.2",
-        "cross-spawn": "^7.0.3",
-        "detect-port-alt": "^1.1.6",
-        "escape-string-regexp": "^2.0.0",
-        "filesize": "^6.1.0",
-        "find-up": "^4.1.0",
-        "fork-ts-checker-webpack-plugin": "^6.0.5",
-        "global-modules": "^2.0.0",
-        "globby": "^11.0.1",
-        "gzip-size": "^5.1.1",
-        "immer": "^9.0.6",
-        "is-root": "^2.1.0",
-        "loader-utils": "^2.0.0",
-        "open": "^7.0.2",
-        "pkg-up": "^3.1.0",
-        "prompts": "^2.4.0",
-        "react-error-overlay": "7.0.0-next.54+1465357b",
-        "recursive-readdir": "^2.2.2",
-        "shell-quote": "^1.7.2",
-        "strip-ansi": "^6.0.0",
-        "text-table": "^0.2.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          },
-          "dependencies": {
-            "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=="
-            }
-          }
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "react-error-overlay": {
-          "version": "7.0.0-next.54",
-          "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-7.0.0-next.54.tgz",
-          "integrity": "sha512-b96CiTnZahXPDNH9MKplvt5+jD+BkxDw7q5R3jnkUXze/ux1pLv32BBZmlj0OfCUeMqyz4sAmF+0ccJGVMlpXw=="
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
-      }
-    },
-    "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-fast-compare": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-    },
-    "react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
-      }
-    },
-    "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=="
-    },
-    "react-json-view": {
-      "version": "1.21.3",
-      "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz",
-      "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==",
-      "requires": {
-        "flux": "^4.0.1",
-        "react-base16-styling": "^0.6.0",
-        "react-lifecycles-compat": "^3.0.4",
-        "react-textarea-autosize": "^8.3.2"
-      }
-    },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-loadable": {
-      "version": "npm:@docusaurus/react-loadable@5.5.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
-      "integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
-      "requires": {
-        "@types/react": "*",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "react-loadable-ssr-addon-v5-slorber": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz",
-      "integrity": "sha512-lq3Lyw1lGku8zUEJPDxsNm1AfYHBrO9Y1+olAYwpUJ2IGFBskM0DMKok97A6LWUpHm+o7IvQBOWu9MLenp9Z+A==",
-      "requires": {
-        "@babel/runtime": "^7.10.3"
-      }
-    },
-    "react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
-      "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "react-router-config": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-router-config/-/react-router-config-5.1.1.tgz",
-      "integrity": "sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==",
-      "requires": {
-        "@babel/runtime": "^7.1.2"
-      }
-    },
-    "react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "react-side-effect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
-      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw=="
-    },
-    "react-textarea-autosize": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
-      "integrity": "sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==",
-      "requires": {
-        "@babel/runtime": "^7.10.2",
-        "use-composed-ref": "^1.3.0",
-        "use-latest": "^1.2.1"
-      }
-    },
-    "readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "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"
-      }
-    },
-    "reading-time": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
-      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="
-    },
-    "rechoir": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
-      "requires": {
-        "resolve": "^1.1.6"
-      }
-    },
-    "recursive-readdir": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
-      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
-      "requires": {
-        "minimatch": "^3.0.5"
-      }
-    },
-    "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.1.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
-      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
-      "requires": {
-        "regenerate": "^1.4.2"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-    },
-    "regenerator-transform": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
-      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
-      "requires": {
-        "@babel/runtime": "^7.8.4"
-      }
-    },
-    "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"
-      }
-    },
-    "regexpu-core": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
-      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
-      "requires": {
-        "@babel/regjsgen": "^0.8.0",
-        "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.1.0",
-        "regjsparser": "^0.9.1",
-        "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.1.0"
-      }
-    },
-    "registry-auth-token": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.2.tgz",
-      "integrity": "sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==",
-      "requires": {
-        "rc": "1.2.8"
-      }
-    },
-    "registry-url": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
-      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
-      "requires": {
-        "rc": "^1.2.8"
-      }
-    },
-    "regjsgen": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
-    },
-    "regjsparser": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
-      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
-      "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=="
-        }
-      }
-    },
-    "rehype-parse": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-6.0.2.tgz",
-      "integrity": "sha512-0S3CpvpTAgGmnz8kiCyFLGuW5yA4OQhyNTm/nwPopZ7+PI11WnGl1TTWTGv/2hPEe/g2jRLlhVVSsoDH8waRug==",
-      "requires": {
-        "hast-util-from-parse5": "^5.0.0",
-        "parse5": "^5.0.0",
-        "xtend": "^4.0.0"
-      },
-      "dependencies": {
-        "hast-util-from-parse5": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-5.0.3.tgz",
-          "integrity": "sha512-gOc8UB99F6eWVWFtM9jUikjN7QkWxB3nY0df5Z0Zq1/Nkwl5V4hAAsl0tmwlgWl/1shlTF8DnNYLO8X6wRV9pA==",
-          "requires": {
-            "ccount": "^1.0.3",
-            "hastscript": "^5.0.0",
-            "property-information": "^5.0.0",
-            "web-namespaces": "^1.1.2",
-            "xtend": "^4.0.1"
-          }
-        },
-        "hastscript": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.1.2.tgz",
-          "integrity": "sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==",
-          "requires": {
-            "comma-separated-tokens": "^1.0.0",
-            "hast-util-parse-selector": "^2.0.0",
-            "property-information": "^5.0.0",
-            "space-separated-tokens": "^1.0.0"
-          }
-        },
-        "parse5": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
-          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
-        }
-      }
-    },
-    "relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
-    },
-    "remark-admonitions": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/remark-admonitions/-/remark-admonitions-1.2.1.tgz",
-      "integrity": "sha512-Ji6p68VDvD+H1oS95Fdx9Ar5WA2wcDA4kwrrhVU7fGctC6+d3uiMICu7w7/2Xld+lnU7/gi+432+rRbup5S8ow==",
-      "requires": {
-        "rehype-parse": "^6.0.2",
-        "unified": "^8.4.2",
-        "unist-util-visit": "^2.0.1"
-      },
-      "dependencies": {
-        "unified": {
-          "version": "8.4.2",
-          "resolved": "https://registry.npmjs.org/unified/-/unified-8.4.2.tgz",
-          "integrity": "sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==",
-          "requires": {
-            "bail": "^1.0.0",
-            "extend": "^3.0.0",
-            "is-plain-obj": "^2.0.0",
-            "trough": "^1.0.0",
-            "vfile": "^4.0.0"
-          }
-        }
-      }
-    },
-    "remark-emoji": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-2.2.0.tgz",
-      "integrity": "sha512-P3cj9s5ggsUvWw5fS2uzCHJMGuXYRb0NnZqYlNecewXt8QBU9n5vW3DUUKOhepS8F9CwdMx9B8a3i7pqFWAI5w==",
-      "requires": {
-        "emoticon": "^3.2.0",
-        "node-emoji": "^1.10.0",
-        "unist-util-visit": "^2.0.3"
-      }
-    },
-    "remark-footnotes": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz",
-      "integrity": "sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ=="
-    },
-    "remark-html": {
-      "version": "13.0.2",
-      "resolved": "https://registry.npmjs.org/remark-html/-/remark-html-13.0.2.tgz",
-      "integrity": "sha512-LhSRQ+3RKdBqB/RGesFWkNNfkGqprDUCwjq54SylfFeNyZby5kqOG8Dn/vYsRoM8htab6EWxFXCY6XIZvMoRiQ==",
-      "requires": {
-        "hast-util-sanitize": "^3.0.0",
-        "hast-util-to-html": "^7.0.0",
-        "mdast-util-to-hast": "^10.0.0"
-      }
-    },
-    "remark-mdx": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-1.6.22.tgz",
-      "integrity": "sha512-phMHBJgeV76uyFkH4rvzCftLfKCr2RZuF+/gmVcaKrpsihyzmhXjA0BEMDaPTXG5y8qZOKPVo83NAOX01LPnOQ==",
-      "requires": {
-        "@babel/core": "7.12.9",
-        "@babel/helper-plugin-utils": "7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "7.12.1",
-        "@babel/plugin-syntax-jsx": "7.12.1",
-        "@mdx-js/util": "1.6.22",
-        "is-alphabetical": "1.0.4",
-        "remark-parse": "8.0.3",
-        "unified": "9.2.0"
-      },
-      "dependencies": {
-        "@babel/core": {
-          "version": "7.12.9",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
-          "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.12.5",
-            "@babel/helper-module-transforms": "^7.12.1",
-            "@babel/helpers": "^7.12.5",
-            "@babel/parser": "^7.12.7",
-            "@babel/template": "^7.12.7",
-            "@babel/traverse": "^7.12.9",
-            "@babel/types": "^7.12.7",
-            "convert-source-map": "^1.7.0",
-            "debug": "^4.1.0",
-            "gensync": "^1.0.0-beta.1",
-            "json5": "^2.1.2",
-            "lodash": "^4.17.19",
-            "resolve": "^1.3.2",
-            "semver": "^5.4.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
-        },
-        "@babel/plugin-proposal-object-rest-spread": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
-          "integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4",
-            "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-            "@babel/plugin-transform-parameters": "^7.12.1"
-          }
-        },
-        "@babel/plugin-syntax-jsx": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
-          "integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-          }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
-        }
-      }
-    },
-    "remark-mdx-remove-exports": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/remark-mdx-remove-exports/-/remark-mdx-remove-exports-1.6.22.tgz",
-      "integrity": "sha512-7g2uiTmTGfz5QyVb+toeX25frbk1Y6yd03RXGPtqx0+DVh86Gb7MkNYbk7H2X27zdZ3CQv1W/JqlFO0Oo8IxVA==",
-      "requires": {
-        "unist-util-remove": "2.0.0"
-      }
-    },
-    "remark-mdx-remove-imports": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/remark-mdx-remove-imports/-/remark-mdx-remove-imports-1.6.22.tgz",
-      "integrity": "sha512-lmjAXD8Ltw0TsvBzb45S+Dxx7LTJAtDaMneMAv8LAUIPEyYoKkmGbmVsiF0/pY6mhM1Q16swCmu1TN+ie/vn/A==",
-      "requires": {
-        "unist-util-remove": "2.0.0"
-      }
-    },
-    "remark-parse": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz",
-      "integrity": "sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==",
-      "requires": {
-        "ccount": "^1.0.0",
-        "collapse-white-space": "^1.0.2",
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-whitespace-character": "^1.0.0",
-        "is-word-character": "^1.0.0",
-        "markdown-escapes": "^1.0.0",
-        "parse-entities": "^2.0.0",
-        "repeat-string": "^1.5.4",
-        "state-toggle": "^1.0.0",
-        "trim": "0.0.1",
-        "trim-trailing-lines": "^1.0.0",
-        "unherit": "^1.0.4",
-        "unist-util-remove-position": "^2.0.0",
-        "vfile-location": "^3.0.0",
-        "xtend": "^4.0.1"
-      }
-    },
-    "remark-squeeze-paragraphs": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-4.0.0.tgz",
-      "integrity": "sha512-8qRqmL9F4nuLPIgl92XUuxI3pFxize+F1H0e/W3llTk0UsjJaj01+RrirkMw7P21RKe4X6goQhYRSvNWX+70Rw==",
-      "requires": {
-        "mdast-squeeze-paragraphs": "^4.0.0"
-      }
-    },
-    "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"
-      }
-    },
-    "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w=="
-    },
-    "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=="
-    },
-    "require-like": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
-      "integrity": "sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A=="
-    },
-    "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-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
-    },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
-    "responselike": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
-      "integrity": "sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==",
-      "requires": {
-        "lowercase-keys": "^1.0.0"
-      }
-    },
-    "restore-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
-      "requires": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "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"
-      }
-    },
-    "rtl-detect": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
-      "integrity": "sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ=="
-    },
-    "rtlcss": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz",
-      "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==",
-      "requires": {
-        "find-up": "^5.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.3.11",
-        "strip-json-comments": "^3.1.1"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "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"
-      }
-    },
-    "rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-      "requires": {
-        "tslib": "^1.9.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "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=="
-    },
-    "safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
-        "is-regex": "^1.1.4"
-      }
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "sass": {
-      "version": "1.59.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.59.2.tgz",
-      "integrity": "sha512-jJyO6SmbzkJexF8MUorHx5tAilcgabioYxT/BHbY4+OvoqmbHxsYlrjZ8Adhqcgl6Zqwie0TgMXLCAmPFxXOuw==",
-      "requires": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      }
-    },
-    "sass-loader": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz",
-      "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==",
-      "requires": {
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-    },
-    "scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "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"
-      }
-    },
-    "section-matter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
-      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "kind-of": "^6.0.0"
-      }
-    },
-    "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.1.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
-      "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
-      "requires": {
-        "node-forge": "^1"
-      }
-    },
-    "semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
-      "requires": {
-        "lru-cache": "^6.0.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-        }
-      }
-    },
-    "semver-diff": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
-      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
-      "requires": {
-        "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=="
-        }
-      }
-    },
-    "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=="
-        },
-        "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=="
-        }
-      }
-    },
-    "sentence-case": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-2.1.1.tgz",
-      "integrity": "sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==",
-      "requires": {
-        "no-case": "^2.2.0",
-        "upper-case-first": "^1.1.2"
-      }
-    },
-    "serialize-javascript": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
-      "requires": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "serve-handler": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
-      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
-      "requires": {
-        "bytes": "3.0.0",
-        "content-disposition": "0.5.2",
-        "fast-url-parser": "1.1.3",
-        "mime-types": "2.1.18",
-        "minimatch": "3.1.2",
-        "path-is-inside": "1.0.2",
-        "path-to-regexp": "2.2.1",
-        "range-parser": "1.2.0"
-      },
-      "dependencies": {
-        "mime-db": {
-          "version": "1.33.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
-          "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ=="
-        },
-        "mime-types": {
-          "version": "2.1.18",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
-          "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
-          "requires": {
-            "mime-db": "~1.33.0"
-          }
-        },
-        "path-to-regexp": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
-          "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ=="
-        }
-      }
-    },
-    "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"
-      }
-    },
-    "setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-    },
-    "setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-    },
-    "shallow-clone": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
-      "requires": {
-        "kind-of": "^6.0.2"
-      }
-    },
-    "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.8.0",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.0.tgz",
-      "integrity": "sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ=="
-    },
-    "shelljs": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
-      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
-      "requires": {
-        "glob": "^7.0.0",
-        "interpret": "^1.0.0",
-        "rechoir": "^0.6.2"
-      }
-    },
-    "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=="
-    },
-    "sirv": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
-      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
-      "requires": {
-        "@polka/url": "^1.0.0-next.20",
-        "mrmime": "^1.0.0",
-        "totalist": "^1.0.0"
-      }
-    },
-    "sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
-    },
-    "sitemap": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
-      "integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
-      "requires": {
-        "@types/node": "^17.0.5",
-        "@types/sax": "^1.2.1",
-        "arg": "^5.0.0",
-        "sax": "^1.2.4"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "17.0.45",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
-          "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
-        }
-      }
-    },
-    "slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
-    },
-    "snake-case": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz",
-      "integrity": "sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==",
-      "requires": {
-        "no-case": "^2.2.0"
-      }
-    },
-    "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"
-      }
-    },
-    "sort-css-media-queries": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz",
-      "integrity": "sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA=="
-    },
-    "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.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=="
-    },
-    "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"
-      }
-    },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-    },
-    "space-separated-tokens": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
-      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="
-    },
-    "spawn-command": {
-      "version": "0.0.2-1",
-      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-      "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg=="
-    },
-    "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=="
-    },
-    "state-toggle": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
-      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ=="
-    },
-    "statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
-    },
-    "std-env": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-2.3.1.tgz",
-      "integrity": "sha512-eOsoKTWnr6C8aWrqJJ2KAReXoa7Vn5Ywyw6uCXgA/xDhxPoaIsBa5aNJmISY04dLwXPBnDHW4diGM7Sn5K4R/g==",
-      "requires": {
-        "ci-info": "^3.1.1"
-      }
-    },
-    "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"
-      }
-    },
-    "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"
-      }
-    },
-    "string.prototype.trimend": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
-      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "string.prototype.trimstart": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
-      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "stringify-entities": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz",
-      "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==",
-      "requires": {
-        "character-entities-html4": "^1.0.0",
-        "character-entities-legacy": "^1.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
-    "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-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
-      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g=="
-    },
-    "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-to-object": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
-      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
-      "requires": {
-        "inline-style-parser": "0.1.1"
-      }
-    },
-    "stylehacks": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
-      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
-    "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": {
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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=="
-        },
-        "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=="
-            }
-          }
-        },
-        "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=="
-        },
-        "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=="
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "swap-case": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-1.1.2.tgz",
-      "integrity": "sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==",
-      "requires": {
-        "lower-case": "^1.1.1",
-        "upper-case": "^1.1.1"
-      }
-    },
-    "tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
-    },
-    "terser": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.6.tgz",
-      "integrity": "sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg==",
-      "requires": {
-        "@jridgewell/source-map": "^0.3.2",
-        "acorn": "^8.5.0",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "8.8.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
-        },
-        "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.7",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz",
-      "integrity": "sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==",
-      "requires": {
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.1",
-        "terser": "^5.16.5"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "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=="
-    },
-    "thunky": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
-    },
-    "tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
-    "tippy.js": {
-      "version": "6.3.7",
-      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
-      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
-      "requires": {
-        "@popperjs/core": "^2.9.0"
-      }
-    },
-    "title-case": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz",
-      "integrity": "sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==",
-      "requires": {
-        "no-case": "^2.2.0",
-        "upper-case": "^1.0.3"
-      }
-    },
-    "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-readable-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
-      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q=="
-    },
-    "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=="
-    },
-    "totalist": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
-      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
-    },
-    "tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-    },
-    "traverse": {
-      "version": "0.6.7",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.7.tgz",
-      "integrity": "sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg=="
-    },
-    "tree-kill": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="
-    },
-    "trim": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-      "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ=="
-    },
-    "trim-trailing-lines": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
-      "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ=="
-    },
-    "trough": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
-      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
-    },
-    "ts-node": {
-      "version": "10.9.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
-      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
-      "dev": true,
-      "requires": {
-        "@cspotcode/source-map-support": "^0.8.0",
-        "@tsconfig/node10": "^1.0.7",
-        "@tsconfig/node12": "^1.0.7",
-        "@tsconfig/node14": "^1.0.0",
-        "@tsconfig/node16": "^1.0.2",
-        "acorn": "^8.4.1",
-        "acorn-walk": "^8.1.1",
-        "arg": "^4.1.0",
-        "create-require": "^1.1.0",
-        "diff": "^4.0.1",
-        "make-error": "^1.1.1",
-        "v8-compile-cache-lib": "^3.0.1",
-        "yn": "3.1.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "8.8.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-          "dev": true
-        },
-        "arg": {
-          "version": "4.1.3",
-          "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-          "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-          "dev": true
-        }
-      }
-    },
-    "tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
-    },
-    "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=="
-    },
-    "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"
-      }
-    },
-    "typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
-      }
-    },
-    "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.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "dev": true
-    },
-    "ua-parser-js": {
-      "version": "0.7.34",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",
-      "integrity": "sha512-cJMeh/eOILyGu0ejgTKB95yKT3zOenSe9UGE3vj6WfiOwgGYnmATUsnDixMFvdU+rNMvWih83hrUP8VwhF9yXQ=="
-    },
-    "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"
-      }
-    },
-    "unherit": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
-      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
-      "requires": {
-        "inherits": "^2.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
-    "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.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA=="
-    },
-    "unicode-property-aliases-ecmascript": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
-    },
-    "unified": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz",
-      "integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==",
-      "requires": {
-        "bail": "^1.0.0",
-        "extend": "^3.0.0",
-        "is-buffer": "^2.0.0",
-        "is-plain-obj": "^2.0.0",
-        "trough": "^1.0.0",
-        "vfile": "^4.0.0"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
-        }
-      }
-    },
-    "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"
-      }
-    },
-    "unist-builder": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz",
-      "integrity": "sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw=="
-    },
-    "unist-util-generated": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz",
-      "integrity": "sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg=="
-    },
-    "unist-util-is": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-      "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg=="
-    },
-    "unist-util-position": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.1.0.tgz",
-      "integrity": "sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA=="
-    },
-    "unist-util-remove": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-2.0.0.tgz",
-      "integrity": "sha512-HwwWyNHKkeg/eXRnE11IpzY8JT55JNM1YCwwU9YNCnfzk6s8GhPXrVBBZWiwLeATJbI7euvoGSzcy9M29UeW3g==",
-      "requires": {
-        "unist-util-is": "^4.0.0"
-      }
-    },
-    "unist-util-remove-position": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz",
-      "integrity": "sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==",
-      "requires": {
-        "unist-util-visit": "^2.0.0"
-      }
-    },
-    "unist-util-stringify-position": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
-      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
-      "requires": {
-        "@types/unist": "^2.0.2"
-      }
-    },
-    "unist-util-visit": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
-      "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
-      "requires": {
-        "@types/unist": "^2.0.0",
-        "unist-util-is": "^4.0.0",
-        "unist-util-visit-parents": "^3.0.0"
-      }
-    },
-    "unist-util-visit-parents": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
-      "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
-      "requires": {
-        "@types/unist": "^2.0.0",
-        "unist-util-is": "^4.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=="
-    },
-    "update-browserslist-db": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
-      "requires": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
-      }
-    },
-    "update-notifier": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
-      "integrity": "sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==",
-      "requires": {
-        "boxen": "^5.0.0",
-        "chalk": "^4.1.0",
-        "configstore": "^5.0.1",
-        "has-yarn": "^2.1.0",
-        "import-lazy": "^2.1.0",
-        "is-ci": "^2.0.0",
-        "is-installed-globally": "^0.4.0",
-        "is-npm": "^5.0.0",
-        "is-yarn-global": "^0.3.0",
-        "latest-version": "^5.1.0",
-        "pupa": "^2.1.1",
-        "semver": "^7.3.4",
-        "semver-diff": "^3.1.1",
-        "xdg-basedir": "^4.0.0"
-      }
-    },
-    "upper-case": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
-      "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA=="
-    },
-    "upper-case-first": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.2.tgz",
-      "integrity": "sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==",
-      "requires": {
-        "upper-case": "^1.1.1"
-      }
-    },
-    "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"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-          "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
-        }
-      }
-    },
-    "url-loader": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
-      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "mime-types": "^2.1.27",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "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"
-          }
-        }
-      }
-    },
-    "url-parse-lax": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-      "integrity": "sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==",
-      "requires": {
-        "prepend-http": "^2.0.0"
-      }
-    },
-    "use-composed-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
-      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ=="
-    },
-    "use-isomorphic-layout-effect": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
-      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
-    },
-    "use-latest": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
-      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
-      "requires": {
-        "use-isomorphic-layout-effect": "^1.1.1"
-      }
-    },
-    "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=="
-    },
-    "utility-types": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
-      "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg=="
-    },
-    "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-lib": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
-      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
-    },
-    "valid-url": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
-      "integrity": "sha512-QQDsV8OnSf5Uc30CKSwG9lnhMPe6exHtTXLRYX8uMwKENy640pU+2BgBL0LRbDh/eYRahNCS7aewCx0wf3NYVA=="
-    },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
-    },
-    "vfile": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
-      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
-      "requires": {
-        "@types/unist": "^2.0.0",
-        "is-buffer": "^2.0.0",
-        "unist-util-stringify-position": "^2.0.0",
-        "vfile-message": "^2.0.0"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
-        }
-      }
-    },
-    "vfile-location": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
-      "integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA=="
-    },
-    "vfile-message": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
-      "requires": {
-        "@types/unist": "^2.0.0",
-        "unist-util-stringify-position": "^2.0.0"
-      }
-    },
-    "wait-on": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-6.0.1.tgz",
-      "integrity": "sha512-zht+KASY3usTY5u2LgaNqn/Cd8MukxLGjdcZxT2ns5QzDmTFc4XoWBgC+C/na+sMRZTuVygQoMYwdcVjHnYIVw==",
-      "requires": {
-        "axios": "^0.25.0",
-        "joi": "^17.6.0",
-        "lodash": "^4.17.21",
-        "minimist": "^1.2.5",
-        "rxjs": "^7.5.4"
-      },
-      "dependencies": {
-        "rxjs": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
-          "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
-          "requires": {
-            "tslib": "^2.1.0"
-          }
-        }
-      }
-    },
-    "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"
-      }
-    },
-    "wcwidth": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
-      "dev": true,
-      "requires": {
-        "defaults": "^1.0.3"
-      }
-    },
-    "web-namespaces": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
-      "integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw=="
-    },
-    "webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-    },
-    "webpack": {
-      "version": "5.76.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
-      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
-      "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=="
-        },
-        "acorn": {
-          "version": "8.8.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "webpack-bundle-analyzer": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
-      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
-      "requires": {
-        "@discoveryjs/json-ext": "0.5.7",
-        "acorn": "^8.0.4",
-        "acorn-walk": "^8.0.0",
-        "chalk": "^4.1.0",
-        "commander": "^7.2.0",
-        "gzip-size": "^6.0.0",
-        "lodash": "^4.17.20",
-        "opener": "^1.5.2",
-        "sirv": "^1.0.7",
-        "ws": "^7.3.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "8.8.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
-        },
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
-        },
-        "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"
-          }
-        }
-      }
-    },
-    "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.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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=="
-        },
-        "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=="
-        },
-        "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.11.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz",
-      "integrity": "sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==",
-      "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.1.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.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "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=="
-        },
-        "open": {
-          "version": "8.4.2",
-          "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-          "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
-          "requires": {
-            "define-lazy-prop": "^2.0.0",
-            "is-docker": "^2.1.1",
-            "is-wsl": "^2.2.0"
-          }
-        },
-        "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.13.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-          "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA=="
-        }
-      }
-    },
-    "webpack-merge": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
-      "requires": {
-        "clone-deep": "^4.0.1",
-        "wildcard": "^2.0.0"
-      }
-    },
-    "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=="
-    },
-    "webpackbar": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-5.0.2.tgz",
-      "integrity": "sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==",
-      "requires": {
-        "chalk": "^4.1.0",
-        "consola": "^2.15.3",
-        "pretty-time": "^1.1.0",
-        "std-env": "^3.0.1"
-      },
-      "dependencies": {
-        "std-env": {
-          "version": "3.3.2",
-          "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
-          "integrity": "sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA=="
-        }
-      }
-    },
-    "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-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "requires": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.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"
-      }
-    },
-    "which-typed-array": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
-      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.10"
-      }
-    },
-    "widest-line": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
-      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
-      "requires": {
-        "string-width": "^4.0.0"
-      }
-    },
-    "wildcard": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
-    },
-    "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"
-      }
-    },
-    "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=="
-    },
-    "xdg-basedir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
-      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q=="
-    },
-    "xml-js": {
-      "version": "1.6.11",
-      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
-      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
-      "requires": {
-        "sax": "^1.2.4"
-      }
-    },
-    "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": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
-    },
-    "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=="
-    },
-    "yn": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
-      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true
-    },
-    "yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true
-    },
-    "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=="
-    },
-    "zwitch": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
-      "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
-    }
   }
 }
diff --git a/package.json b/package.json
index e57731d0f44..f9d6b0daf89 100644
--- a/package.json
+++ b/package.json
@@ -78,13 +78,9 @@
     "@types/react": "^17.0.37",
     "deepl": "^1.0.13",
     "html-loader": "^3.1.0",
-<<<<<<< HEAD
-    "prettier": "^2.5.0",
-    "ts-node": "^10.4.0",
-=======
     "hygen": "^6.2.11",
     "prettier": "^2.8.8",
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
+    "ts-node": "^10.4.0",
     "typescript": "^4.5.2"
   },
   "prettier": "@ionic/prettier-config"

From 6abe84b909960f31beb75415102fee901a2cb1a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 19 Jul 2023 21:29:43 +0900
Subject: [PATCH 437/469] chore(): fixed lint

---
 docs/angular/lifecycle.md                     |  66 +--
 docs/angular/navigation.md                    |  35 +-
 docs/angular/overview.md                      |   8 +-
 docs/angular/platform.md                      |   6 +-
 docs/angular/storage.md                       |   2 +-
 docs/angular/testing.md                       |  22 +-
 docs/angular/your-first-app.md                |   6 +-
 docs/cli.md                                   |  16 +-
 docs/cli/configuration.md                     |  34 +-
 docs/cli/using-a-proxy.md                     |   4 +-
 docs/components.md                            |  30 +-
 docs/core-concepts/cross-platform.md          |  30 +-
 docs/core-concepts/fundamentals.md            |  36 +-
 docs/core-concepts/webview.md                 |  22 +-
 .../what-are-progressive-web-apps.md          |  16 +-
 docs/deployment/app-store.md                  |  27 +-
 docs/deployment/desktop-app.md                |  18 +-
 docs/deployment/play-store.md                 |  30 +-
 docs/deployment/progressive-web-app.md        |   4 +-
 docs/developer-resources/books.md             |   4 +-
 .../guides/first-app-v4/ios-android-camera.md |   2 +-
 .../guides/first-app-v4/theming.md            |   6 +-
 docs/developer-resources/tools.md             |   8 +-
 docs/developer-resources/videos.md            |   8 +-
 docs/developing/android.md                    |  85 ++--
 docs/developing/hardware-back-button.md       |  28 +-
 docs/developing/ios.md                        |  94 ++--
 docs/developing/keyboard.md                   |  28 +-
 docs/developing/previewing.md                 |  14 +-
 docs/developing/scaffolding.md                |   8 +-
 docs/developing/starting.md                   |   6 +-
 docs/developing/tips.md                       |  32 +-
 docs/index.md                                 |  54 +-
 docs/intro/cdn.md                             |  32 +-
 docs/intro/cli.md                             |  18 +-
 docs/intro/environment.md                     |  24 +-
 docs/intro/first-app.md                       |   9 +-
 docs/intro/next.md                            |   9 +-
 docs/intro/vscode-extension.md                |   6 +-
 docs/layout/css-utilities.md                  |  36 +-
 docs/layout/global-stylesheets.md             |   6 +-
 docs/layout/grid.md                           |  54 +-
 docs/layout/structure.md                      |   9 +-
 docs/react.md                                 |  20 +-
 docs/react/config.md                          |   8 +-
 docs/react/lifecycle.md                       |  36 +-
 docs/react/navigation.md                      |  48 +-
 docs/react/overview.md                        |  20 +-
 docs/react/platform.md                        |   5 +-
 docs/react/pwa.md                             |  24 +-
 docs/react/quickstart.md                      |  84 ++--
 docs/reference/browser-support.md             |  12 +-
 docs/reference/glossary.md                    | 138 +++---
 docs/reference/support.md                     |   2 +-
 docs/reference/versioning.md                  |  15 +-
 docs/studio/setup/installation.md             |  16 +-
 docs/theming/advanced.md                      |  32 +-
 docs/theming/basics.md                        |  19 +-
 docs/theming/color-generator.md               |   2 +-
 docs/theming/colors.md                        |  24 +-
 docs/theming/css-shadow-parts.md              |  57 +--
 docs/theming/css-variables.md                 |  28 +-
 docs/theming/dark-mode.md                     |  28 +-
 docs/theming/platform-styles.md               |  26 +-
 docs/theming/themes.md                        |  12 +-
 docs/troubleshooting/build.md                 |  21 +-
 docs/troubleshooting/native.md                |  20 +-
 docs/troubleshooting/runtime.md               |   2 +-
 docs/updating/6-0.md                          |  35 +-
 docs/updating/7-0.md                          |  31 +-
 docs/vue/config.md                            |  14 +-
 docs/vue/lifecycle.md                         |  45 +-
 docs/vue/navigation.md                        |  51 +-
 docs/vue/overview.md                          |  14 +-
 docs/vue/platform.md                          |   4 +-
 docs/vue/pwa.md                               |  26 +-
 docs/vue/quickstart.md                        |  99 ++--
 .../index.js                                  |  54 +-
 scripts/api.js                                |   8 +-
 scripts/build-translate/index.ts              |  92 ++--
 scripts/build-translate/readme.md             |  26 +-
 scripts/build-translate/translate-type.ts     |   6 +-
 src/components/page/intro/AppWizard/index.tsx |   3 +-
 src/theme/EventNavbar/index.tsx               |  15 +-
 src/translate/.detection/cli/build.readme.md  |   2 +-
 .../.detection/cli/capacitor-add.readme.md    |   3 +-
 .../.detection/cli/capacitor-build.readme.md  |   3 +-
 .../.detection/cli/capacitor-copy.readme.md   |   3 +-
 .../.detection/cli/capacitor-open.readme.md   |   3 +-
 .../.detection/cli/capacitor-run.readme.md    |   3 +-
 .../.detection/cli/capacitor-sync.readme.md   |   3 +-
 .../.detection/cli/capacitor-update.readme.md |   3 +-
 .../.detection/cli/completion.readme.md       |   2 +-
 .../.detection/cli/config-get.readme.md       |   2 +-
 .../.detection/cli/config-set.readme.md       |   2 +-
 .../.detection/cli/config-unset.readme.md     |   2 +-
 .../.detection/cli/cordova-build.readme.md    |   2 +-
 .../.detection/cli/cordova-compile.readme.md  |   2 +-
 .../.detection/cli/cordova-emulate.readme.md  |   2 +-
 .../.detection/cli/cordova-platform.readme.md |   2 +-
 .../.detection/cli/cordova-plugin.readme.md   |   2 +-
 .../.detection/cli/cordova-prepare.readme.md  |   2 +-
 .../cli/cordova-requirements.readme.md        |   2 +-
 .../cli/cordova-resources.readme.md           |   3 +-
 .../.detection/cli/cordova-run.readme.md      |   2 +-
 .../.detection/cli/deploy-add.readme.md       |   2 +-
 .../.detection/cli/deploy-build.readme.md     |   3 +-
 .../.detection/cli/deploy-configure.readme.md |   2 +-
 .../.detection/cli/doctor-check.readme.md     |   2 +-
 .../.detection/cli/doctor-list.readme.md      |   3 +-
 .../.detection/cli/doctor-treat.readme.md     |   2 +-
 .../.detection/cli/generate.readme.md         |   6 +-
 .../.detection/cli/git-remote.readme.md       |   2 +-
 src/translate/.detection/cli/info.readme.md   |   2 +-
 src/translate/.detection/cli/init.readme.md   |   2 +-
 .../cli/integrations-disable.readme.md        |   2 +-
 .../cli/integrations-enable.readme.md         |   2 +-
 .../cli/integrations-list.readme.md           |   2 +-
 src/translate/.detection/cli/link.readme.md   |   2 +-
 src/translate/.detection/cli/login.readme.md  |   2 +-
 src/translate/.detection/cli/logout.readme.md |   2 +-
 .../.detection/cli/package-build.readme.md    |   5 +-
 .../.detection/cli/package-deploy.readme.md   |   2 +-
 src/translate/.detection/cli/repair.readme.md |   2 +-
 src/translate/.detection/cli/serve.readme.md  |   2 +-
 src/translate/.detection/cli/signup.readme.md |   2 +-
 .../.detection/cli/ssh-setup.readme.md        |   2 +-
 .../.detection/cli/ssh-use.readme.md          |   2 +-
 .../.detection/cli/ssl-generate.readme.md     |   2 +-
 src/translate/.detection/cli/start.readme.md  |   2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |   1 -
 ...awesome-cordova-plugins-actsheet.readme.md |   1 -
 .../@awesome-cordova-plugins-adjust.readme.md |   1 -
 ...esome-cordova-plugins-admob-free.readme.md |   1 -
 ...esome-cordova-plugins-admob-plus.readme.md |   1 -
 ...wesome-cordova-plugins-admob-pro.readme.md |   3 +-
 .../@awesome-cordova-plugins-admob.readme.md  |   2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |   1 -
 .../@awesome-cordova-plugins-alipay.readme.md |   1 -
 ...e-cordova-plugins-all-in-one-sdk.readme.md |   1 -
 ...rdova-plugins-analytics-firebase.readme.md |   1 -
 ...ordova-plugins-android-exoplayer.readme.md |   1 -
 ...dova-plugins-android-full-screen.readme.md |   3 +-
 ...me-cordova-plugins-android-notch.readme.md |   1 -
 ...dova-plugins-android-permissions.readme.md |   1 -
 ...@awesome-cordova-plugins-anyline.readme.md |   1 -
 ...cordova-plugins-app-availability.readme.md |   1 -
 ...ova-plugins-app-center-analytics.readme.md |   1 -
 ...rdova-plugins-app-center-crashes.readme.md |   1 -
 ...va-plugins-app-center-low-memory.readme.md |   1 -
 ...-cordova-plugins-app-center-push.readme.md |   2 -
 ...ome-cordova-plugins-app-launcher.readme.md |   1 -
 ...ome-cordova-plugins-app-minimize.readme.md |   1 -
 ...-cordova-plugins-app-preferences.readme.md |   1 -
 ...awesome-cordova-plugins-app-rate.readme.md |   1 -
 ...some-cordova-plugins-app-version.readme.md |   1 -
 ...wesome-cordova-plugins-apple-pay.readme.md |   1 -
 ...ome-cordova-plugins-apple-wallet.readme.md |   1 -
 ...awesome-cordova-plugins-appodeal.readme.md |   1 -
 ...va-plugins-approov-advanced-http.readme.md |   2 +-
 ...wesome-cordova-plugins-appsflyer.readme.md |   1 -
 ...cordova-plugins-audio-management.readme.md |   1 -
 ...wesome-cordova-plugins-autostart.readme.md |   1 -
 ...cordova-plugins-background-fetch.readme.md |   1 -
 ...a-plugins-background-geolocation.readme.md |   1 -
 ...-cordova-plugins-background-mode.readme.md |   3 +-
 ...ordova-plugins-background-upload.readme.md |   1 -
 ...wesome-cordova-plugins-backlight.readme.md |   1 -
 .../@awesome-cordova-plugins-badge.readme.md  |   1 -
 ...esome-cordova-plugins-baidu-push.readme.md |   1 -
 ...-cordova-plugins-barcode-scanner.readme.md |   1 -
 ...ordova-plugins-base64-to-gallery.readme.md |   2 +-
 .../@awesome-cordova-plugins-base64.readme.md |   1 -
 ...e-cordova-plugins-battery-status.readme.md |   1 -
 ...awesome-cordova-plugins-biocatch.readme.md |   1 -
 ...ordova-plugins-biometric-wrapper.readme.md |   1 -
 .../@awesome-cordova-plugins-ble.readme.md    |   1 -
 ...@awesome-cordova-plugins-blinkid.readme.md |   1 -
 ...@awesome-cordova-plugins-blinkup.readme.md |   1 -
 ...ns-bluetooth-classic-serial-port.readme.md |   2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |   1 -
 ...cordova-plugins-bluetooth-serial.readme.md |   2 +-
 ...wesome-cordova-plugins-braintree.readme.md |   5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |   1 -
 ...esome-cordova-plugins-brightness.readme.md |   1 -
 ...some-cordova-plugins-broadcaster.readme.md |   1 -
 ...some-cordova-plugins-browser-tab.readme.md |   1 -
 ...esome-cordova-plugins-build-info.readme.md |   1 -
 ...awesome-cordova-plugins-calendar.readme.md |   2 -
 ...e-cordova-plugins-call-directory.readme.md |   1 -
 ...awesome-cordova-plugins-call-log.readme.md |   1 -
 ...some-cordova-plugins-call-number.readme.md |   1 -
 ...e-cordova-plugins-camera-preview.readme.md |   1 -
 .../@awesome-cordova-plugins-camera.readme.md |   3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |   2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |   1 -
 ...wesome-cordova-plugins-clevertap.readme.md |   1 -
 ...wesome-cordova-plugins-clipboard.readme.md |   2 -
 ...e-cordova-plugins-cloud-settings.readme.md |   1 -
 ...wesome-cordova-plugins-clover-go.readme.md |   1 -
 ...wesome-cordova-plugins-code-push.readme.md |   1 -
 ...ova-plugins-colored-browser-tabs.readme.md |   1 -
 ...awesome-cordova-plugins-contacts.readme.md |   1 -
 ...e-cordova-plugins-couchbase-lite.readme.md |   1 -
 .../@awesome-cordova-plugins-crop.readme.md   |   2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |   1 -
 ...some-cordova-plugins-date-picker.readme.md |   1 -
 ...awesome-cordova-plugins-db-meter.readme.md |   2 +-
 ...-cordova-plugins-device-accounts.readme.md |   1 -
 ...-cordova-plugins-device-feedback.readme.md |   2 -
 ...me-cordova-plugins-device-motion.readme.md |   1 -
 ...rdova-plugins-device-orientation.readme.md |   1 -
 .../@awesome-cordova-plugins-device.readme.md |   1 -
 ...esome-cordova-plugins-dfu-update.readme.md |   1 -
 ...esome-cordova-plugins-diagnostic.readme.md |   1 -
 ...@awesome-cordova-plugins-dialogs.readme.md |   1 -
 ...-cordova-plugins-document-picker.readme.md |   2 -
 ...cordova-plugins-document-scanner.readme.md |   1 -
 ...-cordova-plugins-document-viewer.readme.md |   3 +-
 ...esome-cordova-plugins-downloader.readme.md |   2 -
 ...e-cordova-plugins-email-composer.readme.md |   3 -
 ...e-cordova-plugins-emm-app-config.readme.md |   2 -
 ...cordova-plugins-estimote-beacons.readme.md |   1 -
 ...gins-extended-device-information.readme.md |  10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |   1 -
 ...awesome-cordova-plugins-facebook.readme.md |   8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |   1 -
 ...ome-cordova-plugins-file-chooser.readme.md |   2 -
 ...-cordova-plugins-file-encryption.readme.md |   1 -
 ...some-cordova-plugins-file-opener.readme.md |   1 -
 ...wesome-cordova-plugins-file-path.readme.md |   2 -
 ...some-cordova-plugins-file-picker.readme.md |   2 -
 ...me-cordova-plugins-file-transfer.readme.md |   1 -
 .../@awesome-cordova-plugins-file.readme.md   |  12 +-
 ...rdova-plugins-firebase-analytics.readme.md |   5 +-
 ...-plugins-firebase-authentication.readme.md |   1 -
 ...-cordova-plugins-firebase-config.readme.md |   1 -
 ...e-cordova-plugins-firebase-crash.readme.md |   1 -
 ...ova-plugins-firebase-crashlytics.readme.md |   1 -
 ...a-plugins-firebase-dynamic-links.readme.md |   4 +-
 ...rdova-plugins-firebase-messaging.readme.md |   1 -
 ...-cordova-plugins-firebase-vision.readme.md |   1 -
 ...esome-cordova-plugins-firebase-x.readme.md |   1 -
 ...awesome-cordova-plugins-firebase.readme.md |   1 -
 ...cordova-plugins-flurry-analytics.readme.md |   1 -
 ...rdova-plugins-foreground-service.readme.md |   5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |   1 -
 ...ordova-plugins-full-screen-image.readme.md |   1 -
 ...-cordova-plugins-gao-de-location.readme.md |   1 -
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |   1 -
 ...awesome-cordova-plugins-geofence.readme.md |   2 +-
 ...some-cordova-plugins-geolocation.readme.md |   5 +-
 ...me-cordova-plugins-globalization.readme.md |   1 -
 ...cordova-plugins-google-analytics.readme.md |   4 +-
 ...me-cordova-plugins-google-nearby.readme.md |   1 -
 ...ugins-google-play-games-services.readme.md |   1 -
 ...wesome-cordova-plugins-gyroscope.readme.md |   2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |   1 -
 ...ome-cordova-plugins-header-color.readme.md |   1 -
 ...esome-cordova-plugins-health-kit.readme.md |   1 -
 .../@awesome-cordova-plugins-health.readme.md |   1 -
 ...@awesome-cordova-plugins-hotspot.readme.md |   1 -
 .../@awesome-cordova-plugins-http.readme.md   |   2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |   3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   1 -
 ...@awesome-cordova-plugins-ibeacon.readme.md |   3 +-
 ...ome-cordova-plugins-image-picker.readme.md |   1 -
 ...me-cordova-plugins-image-resizer.readme.md |   1 -
 .../@awesome-cordova-plugins-imap.readme.md   |   1 -
 ...e-cordova-plugins-in-app-browser.readme.md |   2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |  35 +-
 ...-cordova-plugins-in-app-purchase.readme.md |   1 -
 ...me-cordova-plugins-in-app-review.readme.md |   2 -
 ...ordova-plugins-index-app-content.readme.md |   1 -
 ...awesome-cordova-plugins-insomnia.readme.md |   1 -
 ...e-cordova-plugins-intel-security.readme.md |   2 +-
 ...awesome-cordova-plugins-intercom.readme.md |   1 -
 ...me-cordova-plugins-ionic-webview.readme.md |   1 -
 ...s-ios-aswebauthenticationsessapi.readme.md |   1 -
 ...awesome-cordova-plugins-is-debug.readme.md |   1 -
 ...esome-cordova-plugins-janalytics.readme.md |   1 -
 ...wesome-cordova-plugins-jins-meme.readme.md |   1 -
 .../@awesome-cordova-plugins-jumio.readme.md  |   2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |   1 -
 ...ordova-plugins-keychain-touch-id.readme.md |   1 -
 ...awesome-cordova-plugins-keychain.readme.md |   1 -
 ...some-cordova-plugins-kommunicate.readme.md |   1 -
 ...awesome-cordova-plugins-last-cam.readme.md |   1 -
 ...cordova-plugins-launch-navigator.readme.md |   1 -
 ...me-cordova-plugins-launch-review.readme.md |   3 +-
 ...esome-cordova-plugins-line-login.readme.md |   1 -
 ...ome-cordova-plugins-local-backup.readme.md |   1 -
 ...dova-plugins-local-notifications.readme.md |   1 -
 ...me-cordova-plugins-locataccuracy.readme.md |   1 -
 ...ova-plugins-lottie-splash-screen.readme.md |   1 -
 .../@awesome-cordova-plugins-luxand.readme.md |   1 -
 ...ome-cordova-plugins-magnetometer.readme.md |   1 -
 .../@awesome-cordova-plugins-market.readme.md |   1 -
 ...me-cordova-plugins-media-capture.readme.md |   1 -
 .../@awesome-cordova-plugins-media.readme.md  |   1 -
 .../@awesome-cordova-plugins-metrix.readme.md |   1 -
 ...awesome-cordova-plugins-mixpanel.readme.md |   1 -
 ...-cordova-plugins-mlkit-translate.readme.md |   1 -
 ...ova-plugins-mobile-accessibility.readme.md |   1 -
 ...cordova-plugins-mobile-messaging.readme.md |   1 -
 ...@awesome-cordova-plugins-ms-adal.readme.md |   3 +-
 ...plugins-multiple-document-picker.readme.md |   1 -
 ...e-cordova-plugins-music-controls.readme.md |   1 -
 ...ome-cordova-plugins-native-audio.readme.md |   2 +-
 ...-cordova-plugins-native-geocoder.readme.md |   1 -
 ...-cordova-plugins-native-keyboard.readme.md |   2 -
 ...-plugins-native-page-transitions.readme.md |   1 -
 ...cordova-plugins-native-ringtones.readme.md |   1 -
 ...esome-cordova-plugins-navigatbar.readme.md |   1 -
 ...ordova-plugins-network-interface.readme.md |   1 -
 ...@awesome-cordova-plugins-network.readme.md |   1 -
 .../@awesome-cordova-plugins-nfc.readme.md    |   2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |   3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |   6 +-
 ...ova-plugins-open-native-settings.readme.md |   3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |   1 -
 .../@awesome-cordova-plugins-paypal.readme.md |   1 -
 ...@awesome-cordova-plugins-paytabs.readme.md |   1 -
 ...me-cordova-plugins-pdf-generator.readme.md |   1 -
 ...wesome-cordova-plugins-pedometer.readme.md |   1 -
 ...gins-phonegap-local-notification.readme.md |   1 -
 ...me-cordova-plugins-photo-library.readme.md |   1 -
 ...ome-cordova-plugins-photo-viewer.readme.md |   2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |   1 -
 ...esome-cordova-plugins-pin-dialog.readme.md |   3 -
 ...wesome-cordova-plugins-pinterest.readme.md |   1 -
 ...awesome-cordova-plugins-pollfish.readme.md |   1 -
 ...cordova-plugins-power-management.readme.md |   1 -
 ...rdova-plugins-power-optimization.readme.md |   1 -
 ...@awesome-cordova-plugins-printer.readme.md |   2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |   1 -
 ...wesome-cordova-plugins-purchases.readme.md |   6 +-
 .../@awesome-cordova-plugins-push.readme.md   |   1 -
 ...ome-cordova-plugins-pushape-push.readme.md |   1 -
 .../@awesome-cordova-plugins-qqsdk.readme.md  |   1 -
 ...esome-cordova-plugins-qr-scanner.readme.md |   1 -
 ...a-plugins-regula-document-reader.readme.md |   1 -
 ...@awesome-cordova-plugins-restart.readme.md |   1 -
 ...@awesome-cordova-plugins-rollbar.readme.md |   1 -
 ...a-plugins-safari-view-controller.readme.md |   1 -
 ...rdova-plugins-screen-orientation.readme.md |   1 -
 ...esome-cordova-plugins-screenshot.readme.md |   2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |   1 -
 .../@awesome-cordova-plugins-serial.readme.md |   1 -
 ...ordova-plugins-service-discovery.readme.md |   1 -
 .../@awesome-cordova-plugins-shake.readme.md  |   2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |   1 -
 ...ordova-plugins-shortcuts-android.readme.md |   1 -
 ...rdova-plugins-sign-in-with-apple.readme.md |   3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |   1 -
 ...e-cordova-plugins-siri-shortcuts.readme.md |   1 -
 ...wesome-cordova-plugins-smartlook.readme.md |   1 -
 ...me-cordova-plugins-sms-retriever.readme.md |   1 -
 .../@awesome-cordova-plugins-sms.readme.md    |   2 -
 ...e-cordova-plugins-social-sharing.readme.md |   1 -
 ...rdova-plugins-speech-recognition.readme.md |   1 -
 ...wesome-cordova-plugins-speechkit.readme.md |   1 -
 ...e-cordova-plugins-spinner-dialog.readme.md |   1 -
 ...me-cordova-plugins-splash-screen.readme.md |   2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |   2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |   1 -
 ...me-cordova-plugins-sqlite-porter.readme.md |   1 -
 .../@awesome-cordova-plugins-sqlite.readme.md |   1 -
 ...some-cordova-plugins-ssh-connect.readme.md |   1 -
 ...wesome-cordova-plugins-star-prnt.readme.md |   3 +-
 ...esome-cordova-plugins-status-bar.readme.md |   1 -
 ...some-cordova-plugins-stepcounter.readme.md |   2 +-
 ...-cordova-plugins-streaming-media.readme.md |   1 -
 .../@awesome-cordova-plugins-stripe.readme.md |   1 -
 .../@awesome-cordova-plugins-sum-up.readme.md |   1 -
 ...s-system-alert-window-permission.readme.md |   1 -
 ...me-cordova-plugins-taptic-engine.readme.md |   1 -
 ...ova-plugins-tealium-adidentifier.readme.md |   1 -
 ...-plugins-tealium-installreferrer.readme.md |   1 -
 ...@awesome-cordova-plugins-tealium.readme.md |   3 +-
 ...-plugins-text-to-speech-advanced.readme.md |   1 -
 ...e-cordova-plugins-text-to-speech.readme.md |   1 -
 ...-cordova-plugins-theme-detection.readme.md |   1 -
 ...ordova-plugins-themeable-browser.readme.md |   1 -
 ...-cordova-plugins-three-dee-touch.readme.md |   1 -
 .../@awesome-cordova-plugins-toast.readme.md  |   1 -
 ...awesome-cordova-plugins-touch-id.readme.md |   1 -
 ...-cordova-plugins-twitter-connect.readme.md |   4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |   1 -
 ...cordova-plugins-unique-device-id.readme.md |   1 -
 ...dova-plugins-unvired-cordova-sdk.readme.md |  18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |   1 -
 ...ome-cordova-plugins-urbanairship.readme.md |   1 -
 ...ova-plugins-usabilla-cordova-sdk.readme.md |   1 -
 ...esome-cordova-plugins-user-agent.readme.md |   3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |   1 -
 ...wesome-cordova-plugins-vibration.readme.md |   2 +-
 ...rdova-plugins-video-capture-plus.readme.md |   2 +-
 ...ome-cordova-plugins-video-player.readme.md |   1 -
 ...esome-cordova-plugins-web-intent.readme.md |   3 +-
 ...esome-cordova-plugins-web-server.readme.md |   1 -
 ...ordova-plugins-web-socket-server.readme.md |   1 -
 ...wesome-cordova-plugins-webengage.readme.md |   1 -
 .../@awesome-cordova-plugins-wechat.readme.md |   1 -
 ...me-cordova-plugins-wifi-wizard-2.readme.md |   1 -
 ...esome-cordova-plugins-wonderpush.readme.md |   2 -
 ...ova-plugins-youtube-video-player.readme.md |   1 -
 .../@awesome-cordova-plugins-zbar.readme.md   |   1 -
 ...awesome-cordova-plugins-zeroconf.readme.md |   3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |   1 -
 .../@awesome-cordova-plugins-zoom.readme.md   |   1 -
 src/translate/cli/build.readme.md             |   2 +-
 src/translate/cli/capacitor-add.readme.md     |   3 +-
 src/translate/cli/capacitor-build.readme.md   |   3 +-
 src/translate/cli/capacitor-copy.readme.md    |   3 +-
 src/translate/cli/capacitor-open.readme.md    |   3 +-
 src/translate/cli/capacitor-run.readme.md     |   3 +-
 src/translate/cli/capacitor-sync.readme.md    |   3 +-
 src/translate/cli/capacitor-update.readme.md  |   3 +-
 src/translate/cli/completion.readme.md        |   2 +-
 src/translate/cli/config-get.readme.md        |   2 +-
 src/translate/cli/config-set.readme.md        |   2 +-
 src/translate/cli/config-unset.readme.md      |   2 +-
 src/translate/cli/cordova-build.readme.md     |   2 +-
 src/translate/cli/cordova-compile.readme.md   |   2 +-
 src/translate/cli/cordova-emulate.readme.md   |   2 +-
 src/translate/cli/cordova-platform.readme.md  |   2 +-
 src/translate/cli/cordova-plugin.readme.md    |   2 +-
 src/translate/cli/cordova-prepare.readme.md   |   2 +-
 .../cli/cordova-requirements.readme.md        |   2 +-
 src/translate/cli/cordova-resources.readme.md |   3 +-
 src/translate/cli/cordova-run.readme.md       |   2 +-
 src/translate/cli/deploy-add.readme.md        |   2 +-
 src/translate/cli/deploy-build.readme.md      |   3 +-
 src/translate/cli/deploy-configure.readme.md  |   2 +-
 src/translate/cli/doctor-check.readme.md      |   2 +-
 src/translate/cli/doctor-list.readme.md       |   3 +-
 src/translate/cli/doctor-treat.readme.md      |   2 +-
 src/translate/cli/generate.readme.md          |   6 +-
 src/translate/cli/git-remote.readme.md        |   2 +-
 src/translate/cli/info.readme.md              |   2 +-
 src/translate/cli/init.readme.md              |   2 +-
 .../cli/integrations-disable.readme.md        |   2 +-
 .../cli/integrations-enable.readme.md         |   2 +-
 src/translate/cli/integrations-list.readme.md |   2 +-
 src/translate/cli/link.readme.md              |   2 +-
 src/translate/cli/login.readme.md             |   2 +-
 src/translate/cli/logout.readme.md            |   2 +-
 src/translate/cli/package-build.readme.md     |   5 +-
 src/translate/cli/package-deploy.readme.md    |   2 +-
 src/translate/cli/repair.readme.md            |   2 +-
 src/translate/cli/serve.readme.md             |   2 +-
 src/translate/cli/signup.readme.md            |   2 +-
 src/translate/cli/ssh-setup.readme.md         |   2 +-
 src/translate/cli/ssh-use.readme.md           |   2 +-
 src/translate/cli/ssl-generate.readme.md      |   2 +-
 src/translate/cli/start.readme.md             |   2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |   1 -
 ...awesome-cordova-plugins-actsheet.readme.md |   1 -
 .../@awesome-cordova-plugins-adjust.readme.md |   1 -
 ...esome-cordova-plugins-admob-free.readme.md |   1 -
 ...esome-cordova-plugins-admob-plus.readme.md |   1 -
 ...wesome-cordova-plugins-admob-pro.readme.md |   3 +-
 .../@awesome-cordova-plugins-admob.readme.md  |   2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |   1 -
 .../@awesome-cordova-plugins-alipay.readme.md |   1 -
 ...e-cordova-plugins-all-in-one-sdk.readme.md |   1 -
 ...rdova-plugins-analytics-firebase.readme.md |   1 -
 ...ordova-plugins-android-exoplayer.readme.md |   1 -
 ...dova-plugins-android-full-screen.readme.md |   3 +-
 ...me-cordova-plugins-android-notch.readme.md |   1 -
 ...dova-plugins-android-permissions.readme.md |   1 -
 ...@awesome-cordova-plugins-anyline.readme.md |   1 -
 ...cordova-plugins-app-availability.readme.md |   1 -
 ...ova-plugins-app-center-analytics.readme.md |   1 -
 ...rdova-plugins-app-center-crashes.readme.md |   1 -
 ...va-plugins-app-center-low-memory.readme.md |   1 -
 ...-cordova-plugins-app-center-push.readme.md |   2 -
 ...ome-cordova-plugins-app-launcher.readme.md |   1 -
 ...ome-cordova-plugins-app-minimize.readme.md |   1 -
 ...-cordova-plugins-app-preferences.readme.md |   1 -
 ...awesome-cordova-plugins-app-rate.readme.md |   1 -
 ...some-cordova-plugins-app-version.readme.md |   1 -
 ...wesome-cordova-plugins-apple-pay.readme.md |   1 -
 ...ome-cordova-plugins-apple-wallet.readme.md |   1 -
 ...awesome-cordova-plugins-appodeal.readme.md |   1 -
 ...va-plugins-approov-advanced-http.readme.md |   2 +-
 ...wesome-cordova-plugins-appsflyer.readme.md |   1 -
 ...cordova-plugins-audio-management.readme.md |   1 -
 ...wesome-cordova-plugins-autostart.readme.md |   1 -
 ...cordova-plugins-background-fetch.readme.md |   1 -
 ...a-plugins-background-geolocation.readme.md |   1 -
 ...-cordova-plugins-background-mode.readme.md |   3 +-
 ...ordova-plugins-background-upload.readme.md |   1 -
 ...wesome-cordova-plugins-backlight.readme.md |   1 -
 .../@awesome-cordova-plugins-badge.readme.md  |   1 -
 ...esome-cordova-plugins-baidu-push.readme.md |   1 -
 ...-cordova-plugins-barcode-scanner.readme.md |   1 -
 ...ordova-plugins-base64-to-gallery.readme.md |   2 +-
 .../@awesome-cordova-plugins-base64.readme.md |   1 -
 ...e-cordova-plugins-battery-status.readme.md |   1 -
 ...awesome-cordova-plugins-biocatch.readme.md |   1 -
 ...ordova-plugins-biometric-wrapper.readme.md |   1 -
 .../@awesome-cordova-plugins-ble.readme.md    |   1 -
 ...@awesome-cordova-plugins-blinkid.readme.md |   1 -
 ...@awesome-cordova-plugins-blinkup.readme.md |   1 -
 ...ns-bluetooth-classic-serial-port.readme.md |   2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |   1 -
 ...cordova-plugins-bluetooth-serial.readme.md |   2 +-
 ...wesome-cordova-plugins-braintree.readme.md |   5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |   1 -
 ...esome-cordova-plugins-brightness.readme.md |   1 -
 ...some-cordova-plugins-broadcaster.readme.md |   1 -
 ...some-cordova-plugins-browser-tab.readme.md |   1 -
 ...esome-cordova-plugins-build-info.readme.md |   1 -
 ...awesome-cordova-plugins-calendar.readme.md |   2 -
 ...e-cordova-plugins-call-directory.readme.md |   1 -
 ...awesome-cordova-plugins-call-log.readme.md |   1 -
 ...some-cordova-plugins-call-number.readme.md |   1 -
 ...e-cordova-plugins-camera-preview.readme.md |   1 -
 .../@awesome-cordova-plugins-camera.readme.md |   3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |   2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |   1 -
 ...wesome-cordova-plugins-clevertap.readme.md |   1 -
 ...wesome-cordova-plugins-clipboard.readme.md |   2 -
 ...e-cordova-plugins-cloud-settings.readme.md |   1 -
 ...wesome-cordova-plugins-clover-go.readme.md |   1 -
 ...wesome-cordova-plugins-code-push.readme.md |   1 -
 ...ova-plugins-colored-browser-tabs.readme.md |   1 -
 ...awesome-cordova-plugins-contacts.readme.md |   1 -
 ...e-cordova-plugins-couchbase-lite.readme.md |   1 -
 .../@awesome-cordova-plugins-crop.readme.md   |   2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |   1 -
 ...some-cordova-plugins-date-picker.readme.md |   1 -
 ...awesome-cordova-plugins-db-meter.readme.md |   2 +-
 ...-cordova-plugins-device-accounts.readme.md |   1 -
 ...-cordova-plugins-device-feedback.readme.md |   2 -
 ...me-cordova-plugins-device-motion.readme.md |   1 -
 ...rdova-plugins-device-orientation.readme.md |   1 -
 .../@awesome-cordova-plugins-device.readme.md |   1 -
 ...esome-cordova-plugins-dfu-update.readme.md |   1 -
 ...esome-cordova-plugins-diagnostic.readme.md |   1 -
 ...@awesome-cordova-plugins-dialogs.readme.md |   1 -
 ...-cordova-plugins-document-picker.readme.md |   2 -
 ...cordova-plugins-document-scanner.readme.md |   1 -
 ...-cordova-plugins-document-viewer.readme.md |   3 +-
 ...esome-cordova-plugins-downloader.readme.md |   2 -
 ...e-cordova-plugins-email-composer.readme.md |   3 -
 ...e-cordova-plugins-emm-app-config.readme.md |   2 -
 ...cordova-plugins-estimote-beacons.readme.md |   1 -
 ...gins-extended-device-information.readme.md |  10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |   1 -
 ...awesome-cordova-plugins-facebook.readme.md |   8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |   1 -
 ...ome-cordova-plugins-file-chooser.readme.md |   2 -
 ...-cordova-plugins-file-encryption.readme.md |   1 -
 ...some-cordova-plugins-file-opener.readme.md |   1 -
 ...wesome-cordova-plugins-file-path.readme.md |   2 -
 ...some-cordova-plugins-file-picker.readme.md |   2 -
 ...me-cordova-plugins-file-transfer.readme.md |   1 -
 .../@awesome-cordova-plugins-file.readme.md   |  12 +-
 ...rdova-plugins-firebase-analytics.readme.md |   5 +-
 ...-plugins-firebase-authentication.readme.md |   1 -
 ...-cordova-plugins-firebase-config.readme.md |   1 -
 ...e-cordova-plugins-firebase-crash.readme.md |   1 -
 ...ova-plugins-firebase-crashlytics.readme.md |   1 -
 ...a-plugins-firebase-dynamic-links.readme.md |   4 +-
 ...rdova-plugins-firebase-messaging.readme.md |   1 -
 ...-cordova-plugins-firebase-vision.readme.md |   1 -
 ...esome-cordova-plugins-firebase-x.readme.md |   1 -
 ...awesome-cordova-plugins-firebase.readme.md |   1 -
 ...cordova-plugins-flurry-analytics.readme.md |   1 -
 ...rdova-plugins-foreground-service.readme.md |   5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |   1 -
 ...ordova-plugins-full-screen-image.readme.md |   1 -
 ...-cordova-plugins-gao-de-location.readme.md |   1 -
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |   1 -
 ...awesome-cordova-plugins-geofence.readme.md |   2 +-
 ...some-cordova-plugins-geolocation.readme.md |   5 +-
 ...me-cordova-plugins-globalization.readme.md |   1 -
 ...cordova-plugins-google-analytics.readme.md |   4 +-
 ...me-cordova-plugins-google-nearby.readme.md |   1 -
 ...ugins-google-play-games-services.readme.md |   1 -
 ...wesome-cordova-plugins-gyroscope.readme.md |   2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |   1 -
 ...ome-cordova-plugins-header-color.readme.md |   1 -
 ...esome-cordova-plugins-health-kit.readme.md |   1 -
 .../@awesome-cordova-plugins-health.readme.md |   1 -
 ...@awesome-cordova-plugins-hotspot.readme.md |   1 -
 .../@awesome-cordova-plugins-http.readme.md   |   2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |   3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   1 -
 ...@awesome-cordova-plugins-ibeacon.readme.md |   3 +-
 ...ome-cordova-plugins-image-picker.readme.md |   1 -
 ...me-cordova-plugins-image-resizer.readme.md |   1 -
 .../@awesome-cordova-plugins-imap.readme.md   |   1 -
 ...e-cordova-plugins-in-app-browser.readme.md |   2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |  35 +-
 ...-cordova-plugins-in-app-purchase.readme.md |   1 -
 ...me-cordova-plugins-in-app-review.readme.md |   2 -
 ...ordova-plugins-index-app-content.readme.md |   1 -
 ...awesome-cordova-plugins-insomnia.readme.md |   1 -
 ...e-cordova-plugins-intel-security.readme.md |   2 +-
 ...awesome-cordova-plugins-intercom.readme.md |   1 -
 ...me-cordova-plugins-ionic-webview.readme.md |   1 -
 ...s-ios-aswebauthenticationsessapi.readme.md |   1 -
 ...awesome-cordova-plugins-is-debug.readme.md |   1 -
 ...esome-cordova-plugins-janalytics.readme.md |   1 -
 ...wesome-cordova-plugins-jins-meme.readme.md |   1 -
 .../@awesome-cordova-plugins-jumio.readme.md  |   2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |   1 -
 ...ordova-plugins-keychain-touch-id.readme.md |   1 -
 ...awesome-cordova-plugins-keychain.readme.md |   1 -
 ...some-cordova-plugins-kommunicate.readme.md |   1 -
 ...awesome-cordova-plugins-last-cam.readme.md |   1 -
 ...cordova-plugins-launch-navigator.readme.md |   1 -
 ...me-cordova-plugins-launch-review.readme.md |   3 +-
 ...esome-cordova-plugins-line-login.readme.md |   1 -
 ...ome-cordova-plugins-local-backup.readme.md |   1 -
 ...dova-plugins-local-notifications.readme.md |   1 -
 ...me-cordova-plugins-locataccuracy.readme.md |   1 -
 ...ova-plugins-lottie-splash-screen.readme.md |   1 -
 .../@awesome-cordova-plugins-luxand.readme.md |   1 -
 ...ome-cordova-plugins-magnetometer.readme.md |   1 -
 .../@awesome-cordova-plugins-market.readme.md |   1 -
 ...me-cordova-plugins-media-capture.readme.md |   1 -
 .../@awesome-cordova-plugins-media.readme.md  |   1 -
 .../@awesome-cordova-plugins-metrix.readme.md |   1 -
 ...awesome-cordova-plugins-mixpanel.readme.md |   1 -
 ...-cordova-plugins-mlkit-translate.readme.md |   1 -
 ...ova-plugins-mobile-accessibility.readme.md |   1 -
 ...cordova-plugins-mobile-messaging.readme.md |   1 -
 ...@awesome-cordova-plugins-ms-adal.readme.md |   3 +-
 ...plugins-multiple-document-picker.readme.md |   1 -
 ...e-cordova-plugins-music-controls.readme.md |   1 -
 ...ome-cordova-plugins-native-audio.readme.md |   2 +-
 ...-cordova-plugins-native-geocoder.readme.md |   1 -
 ...-cordova-plugins-native-keyboard.readme.md |   2 -
 ...-plugins-native-page-transitions.readme.md |   1 -
 ...cordova-plugins-native-ringtones.readme.md |   1 -
 ...esome-cordova-plugins-navigatbar.readme.md |   1 -
 ...ordova-plugins-network-interface.readme.md |   1 -
 ...@awesome-cordova-plugins-network.readme.md |   1 -
 .../@awesome-cordova-plugins-nfc.readme.md    |   2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |   3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |   6 +-
 ...ova-plugins-open-native-settings.readme.md |   3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |   1 -
 .../@awesome-cordova-plugins-paypal.readme.md |   1 -
 ...@awesome-cordova-plugins-paytabs.readme.md |   1 -
 ...me-cordova-plugins-pdf-generator.readme.md |   1 -
 ...wesome-cordova-plugins-pedometer.readme.md |   1 -
 ...gins-phonegap-local-notification.readme.md |   1 -
 ...me-cordova-plugins-photo-library.readme.md |   1 -
 ...ome-cordova-plugins-photo-viewer.readme.md |   2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |   1 -
 ...esome-cordova-plugins-pin-dialog.readme.md |   3 -
 ...wesome-cordova-plugins-pinterest.readme.md |   1 -
 ...awesome-cordova-plugins-pollfish.readme.md |   1 -
 ...cordova-plugins-power-management.readme.md |   1 -
 ...rdova-plugins-power-optimization.readme.md |   1 -
 ...@awesome-cordova-plugins-printer.readme.md |   2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |   1 -
 ...wesome-cordova-plugins-purchases.readme.md |   6 +-
 .../@awesome-cordova-plugins-push.readme.md   |   1 -
 ...ome-cordova-plugins-pushape-push.readme.md |   1 -
 .../@awesome-cordova-plugins-qqsdk.readme.md  |   1 -
 ...esome-cordova-plugins-qr-scanner.readme.md |   1 -
 ...a-plugins-regula-document-reader.readme.md |   1 -
 ...@awesome-cordova-plugins-restart.readme.md |   1 -
 ...@awesome-cordova-plugins-rollbar.readme.md |   1 -
 ...a-plugins-safari-view-controller.readme.md |   1 -
 ...rdova-plugins-screen-orientation.readme.md |   1 -
 ...esome-cordova-plugins-screenshot.readme.md |   2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |   1 -
 .../@awesome-cordova-plugins-serial.readme.md |   1 -
 ...ordova-plugins-service-discovery.readme.md |   1 -
 .../@awesome-cordova-plugins-shake.readme.md  |   2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |   1 -
 ...ordova-plugins-shortcuts-android.readme.md |   1 -
 ...rdova-plugins-sign-in-with-apple.readme.md |   3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |   1 -
 ...e-cordova-plugins-siri-shortcuts.readme.md |   1 -
 ...wesome-cordova-plugins-smartlook.readme.md |   1 -
 ...me-cordova-plugins-sms-retriever.readme.md |   1 -
 .../@awesome-cordova-plugins-sms.readme.md    |   2 -
 ...e-cordova-plugins-social-sharing.readme.md |   1 -
 ...rdova-plugins-speech-recognition.readme.md |   1 -
 ...wesome-cordova-plugins-speechkit.readme.md |   1 -
 ...e-cordova-plugins-spinner-dialog.readme.md |   1 -
 ...me-cordova-plugins-splash-screen.readme.md |   2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |   2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |   1 -
 ...me-cordova-plugins-sqlite-porter.readme.md |   1 -
 .../@awesome-cordova-plugins-sqlite.readme.md |   1 -
 ...some-cordova-plugins-ssh-connect.readme.md |   1 -
 ...wesome-cordova-plugins-star-prnt.readme.md |   3 +-
 ...esome-cordova-plugins-status-bar.readme.md |   1 -
 ...some-cordova-plugins-stepcounter.readme.md |   2 +-
 ...-cordova-plugins-streaming-media.readme.md |   1 -
 .../@awesome-cordova-plugins-stripe.readme.md |   1 -
 .../@awesome-cordova-plugins-sum-up.readme.md |   1 -
 ...s-system-alert-window-permission.readme.md |   1 -
 ...me-cordova-plugins-taptic-engine.readme.md |   1 -
 ...ova-plugins-tealium-adidentifier.readme.md |   1 -
 ...-plugins-tealium-installreferrer.readme.md |   1 -
 ...@awesome-cordova-plugins-tealium.readme.md |   3 +-
 ...-plugins-text-to-speech-advanced.readme.md |   1 -
 ...e-cordova-plugins-text-to-speech.readme.md |   1 -
 ...-cordova-plugins-theme-detection.readme.md |   1 -
 ...ordova-plugins-themeable-browser.readme.md |   1 -
 ...-cordova-plugins-three-dee-touch.readme.md |   1 -
 .../@awesome-cordova-plugins-toast.readme.md  |   1 -
 ...awesome-cordova-plugins-touch-id.readme.md |   1 -
 ...-cordova-plugins-twitter-connect.readme.md |   4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |   1 -
 ...cordova-plugins-unique-device-id.readme.md |   1 -
 ...dova-plugins-unvired-cordova-sdk.readme.md |  18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |   1 -
 ...ome-cordova-plugins-urbanairship.readme.md |   1 -
 ...ova-plugins-usabilla-cordova-sdk.readme.md |   1 -
 ...esome-cordova-plugins-user-agent.readme.md |   3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |   1 -
 ...wesome-cordova-plugins-vibration.readme.md |   2 +-
 ...rdova-plugins-video-capture-plus.readme.md |   2 +-
 ...ome-cordova-plugins-video-player.readme.md |   1 -
 ...esome-cordova-plugins-web-intent.readme.md |   3 +-
 ...esome-cordova-plugins-web-server.readme.md |   1 -
 ...ordova-plugins-web-socket-server.readme.md |   1 -
 ...wesome-cordova-plugins-webengage.readme.md |   1 -
 .../@awesome-cordova-plugins-wechat.readme.md |   1 -
 ...me-cordova-plugins-wifi-wizard-2.readme.md |   1 -
 ...esome-cordova-plugins-wonderpush.readme.md |   2 -
 ...ova-plugins-youtube-video-player.readme.md |   1 -
 .../@awesome-cordova-plugins-zbar.readme.md   |   1 -
 ...awesome-cordova-plugins-zeroconf.readme.md |   3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |   1 -
 .../@awesome-cordova-plugins-zoom.readme.md   |   1 -
 .../accordion-group/custom-props.md           |   2 +-
 .../auto-generated/accordion-group/events.md  |   8 +-
 .../auto-generated/accordion-group/methods.md |   2 +-
 .../auto-generated/accordion-group/parts.md   |   2 +-
 .../auto-generated/accordion-group/props.md   |  99 ++--
 .../auto-generated/accordion-group/slots.md   |   2 +-
 .../auto-generated/accordion/custom-props.md  |   2 +-
 static/auto-generated/accordion/events.md     |   2 +-
 static/auto-generated/accordion/methods.md    |   2 +-
 static/auto-generated/accordion/parts.md      |  10 +-
 static/auto-generated/accordion/props.md      |  85 ++--
 static/auto-generated/accordion/slots.md      |   8 +-
 .../action-sheet/custom-props.md              |  52 +-
 static/auto-generated/action-sheet/events.md  |  10 +-
 static/auto-generated/action-sheet/methods.md |  31 +-
 static/auto-generated/action-sheet/parts.md   |   2 +-
 static/auto-generated/action-sheet/props.md   | 171 +++----
 static/auto-generated/action-sheet/slots.md   |   2 +-
 static/auto-generated/alert/custom-props.md   |  22 +-
 static/auto-generated/alert/events.md         |  10 +-
 static/auto-generated/alert/methods.md        |  31 +-
 static/auto-generated/alert/parts.md          |   2 +-
 static/auto-generated/alert/props.md          | 201 ++++----
 static/auto-generated/alert/slots.md          |   2 +-
 static/auto-generated/app/custom-props.md     |   2 +-
 static/auto-generated/app/events.md           |   2 +-
 static/auto-generated/app/methods.md          |   2 +-
 static/auto-generated/app/parts.md            |   2 +-
 static/auto-generated/app/props.md            |   2 +-
 static/auto-generated/app/slots.md            |   2 +-
 static/auto-generated/avatar/custom-props.md  |   6 +-
 static/auto-generated/avatar/events.md        |   2 +-
 static/auto-generated/avatar/methods.md       |   2 +-
 static/auto-generated/avatar/parts.md         |   2 +-
 static/auto-generated/avatar/props.md         |   2 +-
 static/auto-generated/avatar/slots.md         |   2 +-
 .../back-button/custom-props.md               |  70 ++-
 static/auto-generated/back-button/events.md   |   2 +-
 static/auto-generated/back-button/methods.md  |   2 +-
 static/auto-generated/back-button/parts.md    |  10 +-
 static/auto-generated/back-button/props.md    | 117 ++---
 static/auto-generated/back-button/slots.md    |   2 +-
 .../auto-generated/backdrop/custom-props.md   |   2 +-
 static/auto-generated/backdrop/events.md      |   6 +-
 static/auto-generated/backdrop/methods.md     |   2 +-
 static/auto-generated/backdrop/parts.md       |   2 +-
 static/auto-generated/backdrop/props.md       |  43 +-
 static/auto-generated/backdrop/slots.md       |   2 +-
 static/auto-generated/badge/custom-props.md   |  18 +-
 static/auto-generated/badge/events.md         |   2 +-
 static/auto-generated/badge/methods.md        |   2 +-
 static/auto-generated/badge/parts.md          |   2 +-
 static/auto-generated/badge/props.md          |  29 +-
 static/auto-generated/badge/slots.md          |   2 +-
 .../auto-generated/breadcrumb/custom-props.md |  16 +-
 static/auto-generated/breadcrumb/events.md    |  10 +-
 static/auto-generated/breadcrumb/methods.md   |   2 +-
 static/auto-generated/breadcrumb/parts.md     |  12 +-
 static/auto-generated/breadcrumb/props.md     | 167 +++----
 static/auto-generated/breadcrumb/slots.md     |   2 +-
 .../breadcrumbs/custom-props.md               |   2 +-
 static/auto-generated/breadcrumbs/events.md   |   6 +-
 static/auto-generated/breadcrumbs/methods.md  |   2 +-
 static/auto-generated/breadcrumbs/parts.md    |   2 +-
 static/auto-generated/breadcrumbs/props.md    |  75 ++-
 static/auto-generated/breadcrumbs/slots.md    |   2 +-
 static/auto-generated/button/custom-props.md  |  52 +-
 static/auto-generated/button/events.md        |   8 +-
 static/auto-generated/button/methods.md       |   2 +-
 static/auto-generated/button/parts.md         |   8 +-
 static/auto-generated/button/props.md         | 241 ++++-----
 static/auto-generated/button/slots.md         |  14 +-
 static/auto-generated/buttons/custom-props.md |   2 +-
 static/auto-generated/buttons/events.md       |   2 +-
 static/auto-generated/buttons/methods.md      |   2 +-
 static/auto-generated/buttons/parts.md        |   2 +-
 static/auto-generated/buttons/props.md        |  19 +-
 static/auto-generated/buttons/slots.md        |   2 +-
 .../card-content/custom-props.md              |   2 +-
 static/auto-generated/card-content/events.md  |   2 +-
 static/auto-generated/card-content/methods.md |   2 +-
 static/auto-generated/card-content/parts.md   |   2 +-
 static/auto-generated/card-content/props.md   |  15 +-
 static/auto-generated/card-content/slots.md   |   2 +-
 .../card-header/custom-props.md               |   2 +-
 static/auto-generated/card-header/events.md   |   2 +-
 static/auto-generated/card-header/methods.md  |   2 +-
 static/auto-generated/card-header/parts.md    |   2 +-
 static/auto-generated/card-header/props.md    |  43 +-
 static/auto-generated/card-header/slots.md    |   2 +-
 .../card-subtitle/custom-props.md             |   6 +-
 static/auto-generated/card-subtitle/events.md |   2 +-
 .../auto-generated/card-subtitle/methods.md   |   2 +-
 static/auto-generated/card-subtitle/parts.md  |   2 +-
 static/auto-generated/card-subtitle/props.md  |  29 +-
 static/auto-generated/card-subtitle/slots.md  |   2 +-
 .../auto-generated/card-title/custom-props.md |   6 +-
 static/auto-generated/card-title/events.md    |   2 +-
 static/auto-generated/card-title/methods.md   |   2 +-
 static/auto-generated/card-title/parts.md     |   2 +-
 static/auto-generated/card-title/props.md     |  29 +-
 static/auto-generated/card-title/slots.md     |   2 +-
 static/auto-generated/card/custom-props.md    |   8 +-
 static/auto-generated/card/events.md          |   2 +-
 static/auto-generated/card/methods.md         |   2 +-
 static/auto-generated/card/parts.md           |   8 +-
 static/auto-generated/card/props.md           | 157 +++---
 static/auto-generated/card/slots.md           |   2 +-
 .../auto-generated/checkbox/custom-props.md   |  26 +-
 static/auto-generated/checkbox/events.md      |  10 +-
 static/auto-generated/checkbox/methods.md     |   2 +-
 static/auto-generated/checkbox/parts.md       |  10 +-
 static/auto-generated/checkbox/props.md       | 105 ++--
 static/auto-generated/checkbox/slots.md       |   2 +-
 static/auto-generated/chip/custom-props.md    |   8 +-
 static/auto-generated/chip/events.md          |   2 +-
 static/auto-generated/chip/methods.md         |   2 +-
 static/auto-generated/chip/parts.md           |   2 +-
 static/auto-generated/chip/props.md           |  57 +--
 static/auto-generated/chip/slots.md           |   2 +-
 static/auto-generated/col/custom-props.md     |  18 +-
 static/auto-generated/col/events.md           |   2 +-
 static/auto-generated/col/methods.md          |   2 +-
 static/auto-generated/col/parts.md            |   2 +-
 static/auto-generated/col/props.md            | 469 ++++++++----------
 static/auto-generated/col/slots.md            |   2 +-
 static/auto-generated/content/custom-props.md |  24 +-
 static/auto-generated/content/events.md       |  10 +-
 static/auto-generated/content/methods.md      |  42 +-
 static/auto-generated/content/parts.md        |  10 +-
 static/auto-generated/content/props.md        | 105 ++--
 static/auto-generated/content/slots.md        |  10 +-
 .../datetime-button/custom-props.md           |   2 +-
 .../auto-generated/datetime-button/events.md  |   2 +-
 .../auto-generated/datetime-button/methods.md |   2 +-
 .../auto-generated/datetime-button/parts.md   |   8 +-
 .../auto-generated/datetime-button/props.md   |  57 +--
 .../auto-generated/datetime-button/slots.md   |   8 +-
 .../auto-generated/datetime/custom-props.md   |  12 +-
 static/auto-generated/datetime/events.md      |  12 +-
 static/auto-generated/datetime/methods.md     |  28 +-
 static/auto-generated/datetime/parts.md       |   2 +-
 static/auto-generated/datetime/props.md       | 449 ++++++++---------
 static/auto-generated/datetime/slots.md       |  12 +-
 .../auto-generated/fab-button/custom-props.md |  52 +-
 static/auto-generated/fab-button/events.md    |   8 +-
 static/auto-generated/fab-button/methods.md   |   2 +-
 static/auto-generated/fab-button/parts.md     |  10 +-
 static/auto-generated/fab-button/props.md     | 215 ++++----
 static/auto-generated/fab-button/slots.md     |   2 +-
 .../auto-generated/fab-list/custom-props.md   |   2 +-
 static/auto-generated/fab-list/events.md      |   2 +-
 static/auto-generated/fab-list/methods.md     |   2 +-
 static/auto-generated/fab-list/parts.md       |   2 +-
 static/auto-generated/fab-list/props.md       |  29 +-
 static/auto-generated/fab-list/slots.md       |   2 +-
 static/auto-generated/fab/custom-props.md     |   2 +-
 static/auto-generated/fab/events.md           |   2 +-
 static/auto-generated/fab/methods.md          |  12 +-
 static/auto-generated/fab/parts.md            |   2 +-
 static/auto-generated/fab/props.md            |  57 +--
 static/auto-generated/fab/slots.md            |   2 +-
 static/auto-generated/footer/custom-props.md  |   2 +-
 static/auto-generated/footer/events.md        |   2 +-
 static/auto-generated/footer/methods.md       |   2 +-
 static/auto-generated/footer/parts.md         |   2 +-
 static/auto-generated/footer/props.md         |  51 +-
 static/auto-generated/footer/slots.md         |   2 +-
 static/auto-generated/grid/custom-props.md    |  28 +-
 static/auto-generated/grid/events.md          |   2 +-
 static/auto-generated/grid/methods.md         |   2 +-
 static/auto-generated/grid/parts.md           |   2 +-
 static/auto-generated/grid/props.md           |  15 +-
 static/auto-generated/grid/slots.md           |   2 +-
 static/auto-generated/header/custom-props.md  |   2 +-
 static/auto-generated/header/events.md        |   2 +-
 static/auto-generated/header/methods.md       |   2 +-
 static/auto-generated/header/parts.md         |   2 +-
 static/auto-generated/header/props.md         |  51 +-
 static/auto-generated/header/slots.md         |   2 +-
 static/auto-generated/img/custom-props.md     |   2 +-
 static/auto-generated/img/events.md           |  12 +-
 static/auto-generated/img/methods.md          |   2 +-
 static/auto-generated/img/parts.md            |   6 +-
 static/auto-generated/img/props.md            |  35 +-
 static/auto-generated/img/slots.md            |   2 +-
 .../infinite-scroll-content/custom-props.md   |   2 +-
 .../infinite-scroll-content/events.md         |   2 +-
 .../infinite-scroll-content/methods.md        |   2 +-
 .../infinite-scroll-content/parts.md          |   2 +-
 .../infinite-scroll-content/props.md          |  39 +-
 .../infinite-scroll-content/slots.md          |   2 +-
 .../infinite-scroll/custom-props.md           |   2 +-
 .../auto-generated/infinite-scroll/events.md  |   6 +-
 .../auto-generated/infinite-scroll/methods.md |  12 +-
 .../auto-generated/infinite-scroll/parts.md   |   2 +-
 .../auto-generated/infinite-scroll/props.md   |  51 +-
 .../auto-generated/infinite-scroll/slots.md   |   2 +-
 static/auto-generated/input/custom-props.md   |  26 +-
 static/auto-generated/input/events.md         |  14 +-
 static/auto-generated/input/methods.md        |  19 +-
 static/auto-generated/input/parts.md          |   2 +-
 static/auto-generated/input/props.md          | 433 +++++++---------
 static/auto-generated/input/slots.md          |   2 +-
 .../item-divider/custom-props.md              |  26 +-
 static/auto-generated/item-divider/events.md  |   2 +-
 static/auto-generated/item-divider/methods.md |   2 +-
 static/auto-generated/item-divider/parts.md   |   2 +-
 static/auto-generated/item-divider/props.md   |  49 +-
 static/auto-generated/item-divider/slots.md   |  12 +-
 .../auto-generated/item-group/custom-props.md |   2 +-
 static/auto-generated/item-group/events.md    |   2 +-
 static/auto-generated/item-group/methods.md   |   2 +-
 static/auto-generated/item-group/parts.md     |   2 +-
 static/auto-generated/item-group/props.md     |   2 +-
 static/auto-generated/item-group/slots.md     |   2 +-
 .../item-option/custom-props.md               |   8 +-
 static/auto-generated/item-option/events.md   |   2 +-
 static/auto-generated/item-option/methods.md  |   2 +-
 static/auto-generated/item-option/parts.md    |   8 +-
 static/auto-generated/item-option/props.md    | 129 ++---
 static/auto-generated/item-option/slots.md    |  18 +-
 .../item-options/custom-props.md              |   2 +-
 static/auto-generated/item-options/events.md  |   6 +-
 static/auto-generated/item-options/methods.md |   2 +-
 static/auto-generated/item-options/parts.md   |   2 +-
 static/auto-generated/item-options/props.md   |  19 +-
 static/auto-generated/item-options/slots.md   |   2 +-
 .../item-sliding/custom-props.md              |   2 +-
 static/auto-generated/item-sliding/events.md  |   6 +-
 static/auto-generated/item-sliding/methods.md |  40 +-
 static/auto-generated/item-sliding/parts.md   |   2 +-
 static/auto-generated/item-sliding/props.md   |  15 +-
 static/auto-generated/item-sliding/slots.md   |   2 +-
 static/auto-generated/item/custom-props.md    |  76 ++-
 static/auto-generated/item/events.md          |   2 +-
 static/auto-generated/item/methods.md         |   2 +-
 static/auto-generated/item/parts.md           |  10 +-
 static/auto-generated/item/props.md           | 257 ++++------
 static/auto-generated/item/slots.md           |  16 +-
 static/auto-generated/label/custom-props.md   |   6 +-
 static/auto-generated/label/events.md         |   2 +-
 static/auto-generated/label/methods.md        |   2 +-
 static/auto-generated/label/parts.md          |   2 +-
 static/auto-generated/label/props.md          |  43 +-
 static/auto-generated/label/slots.md          |   2 +-
 .../list-header/custom-props.md               |  18 +-
 static/auto-generated/list-header/events.md   |   2 +-
 static/auto-generated/list-header/methods.md  |   2 +-
 static/auto-generated/list-header/parts.md    |   2 +-
 static/auto-generated/list-header/props.md    |  43 +-
 static/auto-generated/list-header/slots.md    |   2 +-
 static/auto-generated/list/custom-props.md    |   2 +-
 static/auto-generated/list/events.md          |   2 +-
 static/auto-generated/list/methods.md         |  12 +-
 static/auto-generated/list/parts.md           |   2 +-
 static/auto-generated/list/props.md           |  43 +-
 static/auto-generated/list/slots.md           |   2 +-
 static/auto-generated/loading/custom-props.md |  24 +-
 static/auto-generated/loading/events.md       |  10 +-
 static/auto-generated/loading/methods.md      |  31 +-
 static/auto-generated/loading/parts.md        |   2 +-
 static/auto-generated/loading/props.md        | 187 +++----
 static/auto-generated/loading/slots.md        |   2 +-
 .../menu-button/custom-props.md               |  32 +-
 static/auto-generated/menu-button/events.md   |   2 +-
 static/auto-generated/menu-button/methods.md  |   2 +-
 static/auto-generated/menu-button/parts.md    |   8 +-
 static/auto-generated/menu-button/props.md    |  85 ++--
 static/auto-generated/menu-button/slots.md    |   2 +-
 .../menu-toggle/custom-props.md               |   2 +-
 static/auto-generated/menu-toggle/events.md   |   2 +-
 static/auto-generated/menu-toggle/methods.md  |   2 +-
 static/auto-generated/menu-toggle/parts.md    |   2 +-
 static/auto-generated/menu-toggle/props.md    |  39 +-
 static/auto-generated/menu-toggle/slots.md    |   8 +-
 static/auto-generated/menu/custom-props.md    |  18 +-
 static/auto-generated/menu/events.md          |  12 +-
 static/auto-generated/menu/methods.md         |  47 +-
 static/auto-generated/menu/parts.md           |  10 +-
 static/auto-generated/menu/props.md           | 101 ++--
 static/auto-generated/menu/slots.md           |   2 +-
 static/auto-generated/modal/custom-props.md   |  30 +-
 static/auto-generated/modal/events.md         |  24 +-
 static/auto-generated/modal/methods.md        |  45 +-
 static/auto-generated/modal/parts.md          |  12 +-
 static/auto-generated/modal/props.md          | 285 +++++------
 static/auto-generated/modal/slots.md          |   8 +-
 .../auto-generated/nav-link/custom-props.md   |   2 +-
 static/auto-generated/nav-link/events.md      |   2 +-
 static/auto-generated/nav-link/methods.md     |   2 +-
 static/auto-generated/nav-link/parts.md       |   2 +-
 static/auto-generated/nav-link/props.md       |  61 +--
 static/auto-generated/nav-link/slots.md       |   2 +-
 static/auto-generated/nav/custom-props.md     |   2 +-
 static/auto-generated/nav/events.md           |  10 +-
 static/auto-generated/nav/methods.md          | 100 ++--
 static/auto-generated/nav/parts.md            |   2 +-
 static/auto-generated/nav/props.md            |  73 ++-
 static/auto-generated/nav/slots.md            |   2 +-
 static/auto-generated/note/custom-props.md    |   6 +-
 static/auto-generated/note/events.md          |   2 +-
 static/auto-generated/note/methods.md         |   2 +-
 static/auto-generated/note/parts.md           |   2 +-
 static/auto-generated/note/props.md           |  29 +-
 static/auto-generated/note/slots.md           |   2 +-
 static/auto-generated/picker/custom-props.md  |  32 +-
 static/auto-generated/picker/events.md        |  12 +-
 static/auto-generated/picker/methods.md       |  38 +-
 static/auto-generated/picker/parts.md         |   2 +-
 static/auto-generated/picker/props.md         | 171 +++----
 static/auto-generated/picker/slots.md         |   2 +-
 static/auto-generated/popover/custom-props.md |  28 +-
 static/auto-generated/popover/events.md       |  22 +-
 static/auto-generated/popover/methods.md      |  31 +-
 static/auto-generated/popover/parts.md        |  12 +-
 static/auto-generated/popover/props.md        | 323 ++++++------
 static/auto-generated/popover/slots.md        |   8 +-
 .../progress-bar/custom-props.md              |  12 +-
 static/auto-generated/progress-bar/events.md  |   2 +-
 static/auto-generated/progress-bar/methods.md |   2 +-
 static/auto-generated/progress-bar/parts.md   |  12 +-
 static/auto-generated/progress-bar/props.md   |  89 ++--
 static/auto-generated/progress-bar/slots.md   |   2 +-
 .../radio-group/custom-props.md               |   2 +-
 static/auto-generated/radio-group/events.md   |   6 +-
 static/auto-generated/radio-group/methods.md  |   2 +-
 static/auto-generated/radio-group/parts.md    |   2 +-
 static/auto-generated/radio-group/props.md    |  43 +-
 static/auto-generated/radio-group/slots.md    |   2 +-
 static/auto-generated/radio/custom-props.md   |  12 +-
 static/auto-generated/radio/events.md         |   8 +-
 static/auto-generated/radio/methods.md        |   2 +-
 static/auto-generated/radio/parts.md          |  10 +-
 static/auto-generated/radio/props.md          |  71 ++-
 static/auto-generated/radio/slots.md          |   2 +-
 static/auto-generated/range/custom-props.md   |  28 +-
 static/auto-generated/range/events.md         |  14 +-
 static/auto-generated/range/methods.md        |   2 +-
 static/auto-generated/range/parts.md          |  18 +-
 static/auto-generated/range/props.md          | 215 ++++----
 static/auto-generated/range/slots.md          |  10 +-
 .../refresher-content/custom-props.md         |   2 +-
 .../refresher-content/events.md               |   2 +-
 .../refresher-content/methods.md              |   2 +-
 .../auto-generated/refresher-content/parts.md |   2 +-
 .../auto-generated/refresher-content/props.md |  79 ++-
 .../auto-generated/refresher-content/slots.md |   2 +-
 .../auto-generated/refresher/custom-props.md  |   2 +-
 static/auto-generated/refresher/events.md     |  12 +-
 static/auto-generated/refresher/methods.md    |  26 +-
 static/auto-generated/refresher/parts.md      |   2 +-
 static/auto-generated/refresher/props.md      |  89 ++--
 static/auto-generated/refresher/slots.md      |   2 +-
 .../reorder-group/custom-props.md             |   2 +-
 static/auto-generated/reorder-group/events.md |   6 +-
 .../auto-generated/reorder-group/methods.md   |  12 +-
 static/auto-generated/reorder-group/parts.md  |   2 +-
 static/auto-generated/reorder-group/props.md  |  15 +-
 static/auto-generated/reorder-group/slots.md  |   2 +-
 static/auto-generated/reorder/custom-props.md |   2 +-
 static/auto-generated/reorder/events.md       |   2 +-
 static/auto-generated/reorder/methods.md      |   2 +-
 static/auto-generated/reorder/parts.md        |   8 +-
 static/auto-generated/reorder/props.md        |   2 +-
 static/auto-generated/reorder/slots.md        |   2 +-
 .../ripple-effect/custom-props.md             |   2 +-
 static/auto-generated/ripple-effect/events.md |   2 +-
 .../auto-generated/ripple-effect/methods.md   |  10 +-
 static/auto-generated/ripple-effect/parts.md  |   2 +-
 static/auto-generated/ripple-effect/props.md  |  19 +-
 static/auto-generated/ripple-effect/slots.md  |   2 +-
 .../route-redirect/custom-props.md            |   2 +-
 .../auto-generated/route-redirect/events.md   |   8 +-
 .../auto-generated/route-redirect/methods.md  |   2 +-
 static/auto-generated/route-redirect/parts.md |   2 +-
 static/auto-generated/route-redirect/props.md |  39 +-
 static/auto-generated/route-redirect/slots.md |   2 +-
 static/auto-generated/route/custom-props.md   |   2 +-
 static/auto-generated/route/events.md         |   6 +-
 static/auto-generated/route/methods.md        |   2 +-
 static/auto-generated/route/parts.md          |   2 +-
 static/auto-generated/route/props.md          |  79 ++-
 static/auto-generated/route/slots.md          |   2 +-
 .../router-link/custom-props.md               |  10 +-
 static/auto-generated/router-link/events.md   |   2 +-
 static/auto-generated/router-link/methods.md  |   2 +-
 static/auto-generated/router-link/parts.md    |   2 +-
 static/auto-generated/router-link/props.md    |  91 ++--
 static/auto-generated/router-link/slots.md    |   2 +-
 .../router-outlet/custom-props.md             |   2 +-
 static/auto-generated/router-outlet/events.md |   2 +-
 .../auto-generated/router-outlet/methods.md   |   2 +-
 static/auto-generated/router-outlet/parts.md  |   2 +-
 static/auto-generated/router-outlet/props.md  |  43 +-
 static/auto-generated/router-outlet/slots.md  |   2 +-
 static/auto-generated/router/custom-props.md  |   2 +-
 static/auto-generated/router/events.md        |   8 +-
 static/auto-generated/router/methods.md       |  21 +-
 static/auto-generated/router/parts.md         |   2 +-
 static/auto-generated/router/props.md         |  39 +-
 static/auto-generated/router/slots.md         |   2 +-
 static/auto-generated/row/custom-props.md     |   2 +-
 static/auto-generated/row/events.md           |   2 +-
 static/auto-generated/row/methods.md          |   2 +-
 static/auto-generated/row/parts.md            |   2 +-
 static/auto-generated/row/props.md            |   2 +-
 static/auto-generated/row/slots.md            |   2 +-
 .../auto-generated/searchbar/custom-props.md  |  28 +-
 static/auto-generated/searchbar/events.md     |  18 +-
 static/auto-generated/searchbar/methods.md    |  17 +-
 static/auto-generated/searchbar/parts.md      |   2 +-
 static/auto-generated/searchbar/props.md      | 273 +++++-----
 static/auto-generated/searchbar/slots.md      |   2 +-
 .../segment-button/custom-props.md            |  62 ++-
 .../auto-generated/segment-button/events.md   |   2 +-
 .../auto-generated/segment-button/methods.md  |   2 +-
 static/auto-generated/segment-button/parts.md |  10 +-
 static/auto-generated/segment-button/props.md |  71 ++-
 static/auto-generated/segment-button/slots.md |   2 +-
 static/auto-generated/segment/custom-props.md |   6 +-
 static/auto-generated/segment/events.md       |   8 +-
 static/auto-generated/segment/methods.md      |   2 +-
 static/auto-generated/segment/parts.md        |   2 +-
 static/auto-generated/segment/props.md        |  99 ++--
 static/auto-generated/segment/slots.md        |   2 +-
 .../select-option/custom-props.md             |   2 +-
 static/auto-generated/select-option/events.md |   2 +-
 .../auto-generated/select-option/methods.md   |   2 +-
 static/auto-generated/select-option/parts.md  |   2 +-
 static/auto-generated/select-option/props.md  |  29 +-
 static/auto-generated/select-option/slots.md  |   2 +-
 static/auto-generated/select/custom-props.md  |  18 +-
 static/auto-generated/select/events.md        |  16 +-
 static/auto-generated/select/methods.md       |  10 +-
 static/auto-generated/select/parts.md         |  10 +-
 static/auto-generated/select/props.md         | 177 +++----
 static/auto-generated/select/slots.md         |   2 +-
 .../skeleton-text/custom-props.md             |  12 +-
 static/auto-generated/skeleton-text/events.md |   2 +-
 .../auto-generated/skeleton-text/methods.md   |   2 +-
 static/auto-generated/skeleton-text/parts.md  |   2 +-
 static/auto-generated/skeleton-text/props.md  |  15 +-
 static/auto-generated/skeleton-text/slots.md  |   2 +-
 static/auto-generated/slide/custom-props.md   |   2 +-
 static/auto-generated/slide/events.md         |   2 +-
 static/auto-generated/slide/methods.md        |   2 +-
 static/auto-generated/slide/parts.md          |   2 +-
 static/auto-generated/slide/props.md          |   2 +-
 static/auto-generated/slide/slots.md          |   2 +-
 static/auto-generated/slides/custom-props.md  |  18 +-
 static/auto-generated/slides/events.md        |  38 +-
 static/auto-generated/slides/methods.md       | 119 ++---
 static/auto-generated/slides/parts.md         |   2 +-
 static/auto-generated/slides/props.md         |  59 +--
 static/auto-generated/slides/slots.md         |   2 +-
 static/auto-generated/spinner/custom-props.md |   6 +-
 static/auto-generated/spinner/events.md       |   2 +-
 static/auto-generated/spinner/methods.md      |   2 +-
 static/auto-generated/spinner/parts.md        |   2 +-
 static/auto-generated/spinner/props.md        |  59 +--
 static/auto-generated/spinner/slots.md        |   2 +-
 .../auto-generated/split-pane/custom-props.md |  10 +-
 static/auto-generated/split-pane/events.md    |   6 +-
 static/auto-generated/split-pane/methods.md   |   2 +-
 static/auto-generated/split-pane/parts.md     |   2 +-
 static/auto-generated/split-pane/props.md     |  49 +-
 static/auto-generated/split-pane/slots.md     |   2 +-
 static/auto-generated/tab-bar/custom-props.md |  10 +-
 static/auto-generated/tab-bar/events.md       |   2 +-
 static/auto-generated/tab-bar/methods.md      |   2 +-
 static/auto-generated/tab-bar/parts.md        |   2 +-
 static/auto-generated/tab-bar/props.md        |  57 +--
 static/auto-generated/tab-bar/slots.md        |   2 +-
 .../auto-generated/tab-button/custom-props.md |  28 +-
 static/auto-generated/tab-button/events.md    |   2 +-
 static/auto-generated/tab-button/methods.md   |   2 +-
 static/auto-generated/tab-button/parts.md     |   8 +-
 static/auto-generated/tab-button/props.md     | 133 +++--
 static/auto-generated/tab-button/slots.md     |   2 +-
 static/auto-generated/tab/custom-props.md     |   2 +-
 static/auto-generated/tab/events.md           |   2 +-
 static/auto-generated/tab/methods.md          |  10 +-
 static/auto-generated/tab/parts.md            |   2 +-
 static/auto-generated/tab/props.md            |  29 +-
 static/auto-generated/tab/slots.md            |   2 +-
 static/auto-generated/tabs/custom-props.md    |   2 +-
 static/auto-generated/tabs/events.md          |  10 +-
 static/auto-generated/tabs/methods.md         |  24 +-
 static/auto-generated/tabs/parts.md           |   2 +-
 static/auto-generated/tabs/props.md           |   2 +-
 static/auto-generated/tabs/slots.md           |  12 +-
 static/auto-generated/text/custom-props.md    |   2 +-
 static/auto-generated/text/events.md          |   2 +-
 static/auto-generated/text/methods.md         |   2 +-
 static/auto-generated/text/parts.md           |   2 +-
 static/auto-generated/text/props.md           |  29 +-
 static/auto-generated/text/slots.md           |   2 +-
 .../auto-generated/textarea/custom-props.md   |  28 +-
 static/auto-generated/textarea/events.md      |  14 +-
 static/auto-generated/textarea/methods.md     |  19 +-
 static/auto-generated/textarea/parts.md       |   2 +-
 static/auto-generated/textarea/props.md       | 305 +++++-------
 static/auto-generated/textarea/slots.md       |   2 +-
 .../auto-generated/thumbnail/custom-props.md  |   8 +-
 static/auto-generated/thumbnail/events.md     |   2 +-
 static/auto-generated/thumbnail/methods.md    |   2 +-
 static/auto-generated/thumbnail/parts.md      |   2 +-
 static/auto-generated/thumbnail/props.md      |   2 +-
 static/auto-generated/thumbnail/slots.md      |   2 +-
 static/auto-generated/title/custom-props.md   |   6 +-
 static/auto-generated/title/events.md         |   2 +-
 static/auto-generated/title/methods.md        |   2 +-
 static/auto-generated/title/parts.md          |   2 +-
 static/auto-generated/title/props.md          |  29 +-
 static/auto-generated/title/slots.md          |   2 +-
 static/auto-generated/toast/custom-props.md   |  40 +-
 static/auto-generated/toast/events.md         |  12 +-
 static/auto-generated/toast/methods.md        |  31 +-
 static/auto-generated/toast/parts.md          |  16 +-
 static/auto-generated/toast/props.md          | 229 ++++-----
 static/auto-generated/toast/slots.md          |   2 +-
 static/auto-generated/toggle/custom-props.md  |  28 +-
 static/auto-generated/toggle/events.md        |  12 +-
 static/auto-generated/toggle/methods.md       |   2 +-
 static/auto-generated/toggle/parts.md         |   8 +-
 static/auto-generated/toggle/props.md         | 105 ++--
 static/auto-generated/toggle/slots.md         |   2 +-
 static/auto-generated/toolbar/custom-props.md |  28 +-
 static/auto-generated/toolbar/events.md       |   2 +-
 static/auto-generated/toolbar/methods.md      |   2 +-
 static/auto-generated/toolbar/parts.md        |   2 +-
 static/auto-generated/toolbar/props.md        |  29 +-
 static/auto-generated/toolbar/slots.md        |  14 +-
 .../virtual-scroll/custom-props.md            |   2 +-
 .../auto-generated/virtual-scroll/events.md   |   2 +-
 .../auto-generated/virtual-scroll/methods.md  |  28 +-
 static/auto-generated/virtual-scroll/parts.md |   2 +-
 static/auto-generated/virtual-scroll/props.md | 213 ++++----
 static/auto-generated/virtual-scroll/slots.md |   2 +-
 versioned_docs/version-v6/api/slide.md        |   2 +-
 versioned_docs/version-v6/api/slides.md       |  26 +-
 .../version-v6/api/virtual-scroll.md          |  10 +-
 .../version-v6/developing/config.md           |  10 +-
 .../version-v6/intro/upgrading-to-ionic-6.md  |  39 +-
 versioned_docs/version-v6/studio.md           |   8 +-
 1284 files changed, 6700 insertions(+), 8807 deletions(-)

diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md
index a64a8e2ba74..007cdd56667 100644
--- a/docs/angular/lifecycle.md
+++ b/docs/angular/lifecycle.md
@@ -11,37 +11,37 @@ sidebar_label: ライフサイクル
   />
 </head>
 
-このガイドでは、IonicとAngularを使用して構築されたアプリでのPage Life Cycleのしくみについて説明します。（追記：Life Cycleとは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントをLife Cycle Eventsといいます）
+このガイドでは、Ionic と Angular を使用して構築されたアプリでの Page Life Cycle のしくみについて説明します。（追記：Life Cycle とは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントを Life Cycle Events といいます）
 
 ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png)
 
-## AngularのLife Cycle Events
+## Angular の Life Cycle Events
 
-IonicはAngularが提供するLife Cycle Eventsを取り入れています。最もよく使う2つのAngularイベントは次のとおりです。
+Ionic は Angular が提供する Life Cycle Events を取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。
 
-| Event Name    | Description                                                                                                                                                 |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要があるServiceを呼び出すことができます。 |
-| `ngOnDestroy`  | Angularがビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 |
+| Event Name    | Description                                                                                                                                             |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ngOnInit`    | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 |
+| `ngOnDestroy` | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。                                              |
 
-AngularのComponent Life Cycleイベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。
+Angular の Component Life Cycle イベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。
 
 :::note
 `ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。
 :::
 
-## IonicのPage Events
+## Ionic の Page Events
 
-AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能ないくつかの追加イベントがあります:
+Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります:
 
-| Event Name         | Description                                                        |
-| ------------------ | ------------------------------------------------------------------ |
-| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
-| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが __終了した時に__ 発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが __はじまる時に__ 発火します。  |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが __終了した時に__ 発火します。 |
+| Event Name         | Description                                                              |
+| ------------------ | ------------------------------------------------------------------------ |
+| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。       |
+| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが **終了した時に** 発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが **はじまる時に** 発火します。   |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが **終了した時に** 発火します。   |
 
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
 
 `ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。
 
@@ -49,26 +49,26 @@ AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能な
 
 ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif)
 
-## IonicがPageのLifeをどのように処理するか
+## Ionic が Page の Life をどのように処理するか
 
-Ionic は `<ion-router-outlet />` という router outlet を持っています。この outlet が Angularの `<router-outlet />` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。
+Ionic は `<ion-router-outlet />` という router outlet を持っています。この outlet が Angular の `<router-outlet />` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。
 
-`<ion-router-outlet />` にアプリがラップされることで、Ionicはナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionicは古いページを既存のDOMに残しますが、ビューから隠して新しいページに移行します。これを行う理由は2つあります:
+`<ion-router-outlet />` にアプリがラップされることで、Ionic はナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionic は古いページを既存の DOM に残しますが、ビューから隠して新しいページに移行します。これを行う理由は 2 つあります:
 
-1) 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。
-2) ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。
+1. 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。
+2. ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。
 
-たとえば、UIの "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページはDOMから削除されるだけとなります。
+たとえば、UI の "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページは DOM から削除されるだけとなります。
 
 この特別な処理のために、`ngOnInit` と `ngOnDestroy` のメソッドは通常そうあるべきだと思うときには発火しないかもしれません。
 
-`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の1回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。
+`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の 1 回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。
 
 ## ルートガード
 
-Ionic 3では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。
+Ionic 3 では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。
 
-これらの方法は、Angularのルートガードを使用するためにIonic 4で削除されました。
+これらの方法は、Angular のルートガードを使用するために Ionic 4 で削除されました。
 
 ルートガードは、ルートに対して特定のアクションを実行できるかどうかを判断するのに役立ちます。それらは特定のインターフェースを実装するクラスです。`CanActive` と `CanDeactivate` のインターフェイスは、`ionViewCanEnter` と `ionViewCanLeave` と同様のロジックでイベントを削除することができます。
 
@@ -89,15 +89,15 @@ export class AuthGuard implements CanActivate {
 { path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }
 ```
 
-ルートガードの使い方の詳細については、Angularの [router documentation](https://angular.jp/guide/router) を参照してください。
+ルートガードの使い方の詳細については、Angular の [router documentation](https://angular.jp/guide/router) を参照してください。
 
-## Life Cycleメソッドのガイダンス
+## Life Cycle メソッドのガイダンス
 
-以下は、life cycle eventsごとのユースケースに関するヒントです。
+以下は、life cycle events ごとのユースケースに関するヒントです。
 
-- `ngOnInit` - コンポーネントを初期化し、Serviceからアクセスごとに更新する必要がないデータをロードします。
-- `ionViewWillEnter` - `ionViewWillEnter` はViewがナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Serviceからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量のDOM操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
-- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Pageがユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
-- `ionViewWillLeave` - observablesのunsubscribingのように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
+- `ngOnInit` - コンポーネントを初期化し、Service からアクセスごとに更新する必要がないデータをロードします。
+- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
+- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
+- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
 - `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
 - `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。
diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md
index a91f01ca64d..a4b72d42482 100644
--- a/docs/angular/navigation.md
+++ b/docs/angular/navigation.md
@@ -13,12 +13,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
   />
 </head>
 
-このガイドでは、IonicとAngularを使用して構築されたアプリでのルーティングのしくみについて説明します。
+このガイドでは、Ionic と Angular を使用して構築されたアプリでのルーティングのしくみについて説明します。
 
+Angular Router は、Angular アプリケーションで最も重要なライブラリの 1 つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Router を使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionic と組み合わせると！）。Angular Router の基本と、それを Ionic アプリケーション用に設定する方法を見てみましょう。
 
-Angular Routerは、Angularアプリケーションで最も重要なライブラリの1つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Routerを使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionicと組み合わせると！）。Angular Routerの基本と、それをIonicアプリケーション用に設定する方法を見てみましょう。
-
-## シンプルなRoute
+## シンプルな Route
 
 ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります：
 
@@ -37,7 +36,7 @@ import { RouterModule } from '@angular/router';
 })
 ```
 
-URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしているURLを読むことで動作を開始します。私たちのサンプルでは、Routeは `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべてのRouteのエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？
+URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしている URL を読むことで動作を開始します。私たちのサンプルでは、Route は `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべての Route のエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？
 
 ## リダイレクトの処理
 
@@ -53,14 +52,14 @@ URL path と Component の組み合わせを確認する最も簡単な方法は
 
 このリダイレクトでは、アプリのインデックス（`''`）を探しはじめると、`login` にリダイレクトします。最後の `pathMatch` キーは、ルータにパスの検索方法を指示するために必要です。
 
-`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致するpathがなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。
+`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致する path がなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。
 
 ```tsx
 { path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },
 { path: 'login', component: LoginComponent },
 ```
 
-このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべてのpathが一致しないのでリダイレクトを行いません。
+このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべての path が一致しないのでリダイレクトを行いません。
 
 あるいは、こういう書き方もできます:
 
@@ -71,9 +70,9 @@ URL path と Component の組み合わせを確認する最も簡単な方法は
 
 `/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。
 
-## routesへのナビゲーション
+## routes へのナビゲーション
 
-routesについて説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directiveを利用します。先ほどの簡単なrouter設定でこれを確認してみましょう:
+routes について説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directive を利用します。先ほどの簡単な router 設定でこれを確認してみましょう:
 
 ```ts
 RouterModule.forRoot([
@@ -82,7 +81,7 @@ RouterModule.forRoot([
 ]);
 ```
 
-わたしたちは、次のHTMLを利用することで、`LoginComponent` から `detail` routeに遷移することができます。
+わたしたちは、次の HTML を利用することで、`LoginComponent` から `detail` route に遷移することができます。
 
 ```html
 <ion-header>
@@ -96,9 +95,9 @@ RouterModule.forRoot([
 </ion-content>
 ```
 
-ここで重要なのは`ion-button` と `routerLink` directiveです。RouterLinkは典型的な `href` と同様の考えで動作しますが、URLを文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。
+ここで重要なのは`ion-button` と `routerLink` directive です。RouterLink は典型的な `href` と同様の考えで動作しますが、URL を文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。
 
-Router APIを使用して、プログラムで遷移することもできます。
+Router API を使用して、プログラムで遷移することもできます。
 
 ```tsx
 import { Component } from '@angular/core';
@@ -119,9 +118,9 @@ export class LoginComponent {
 
 どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。
 
-### LocationStrategy.historyGoを使ったナビゲーション
+### LocationStrategy.historyGo を使ったナビゲーション
 
-Angular Routerには [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メソッドがあり、アプリケーションの履歴を進んだり戻ったりすることができます。例を見てみましょう。
+Angular Router には [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メソッドがあり、アプリケーションの履歴を進んだり戻ったりすることができます。例を見てみましょう。
 
 次のようなアプリケーションの履歴があるとします：
 
@@ -133,7 +132,7 @@ Angular Routerには [LocationStrategy.historyGo](https://angular.io/api/common/
 
 ## Lazy loading routes
 
-現在のルート設定では、すべてのComponentが、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
+現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
 
 ```tsx
 
@@ -348,7 +347,7 @@ There are very few use cases in which nested routes make sense in mobile applica
 
 ## Working with Tabs
 
-タブを使用すると、Angular Routerにどのコンポーネントをロードする必要があるかを知るためのメカニズムをIonicが提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。
+タブを使用すると、Angular Router にどのコンポーネントをロードする必要があるかを知るためのメカニズムを Ionic が提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。
 
 ```ts
 const routes: Routes = [
@@ -380,7 +379,7 @@ const routes: Routes = [
 ];
 ```
 
-ここでは、 `tabs` パスを読み込んでいます。この例では、pathを `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabsのマークアップは、次のとおりです:
+ここでは、 `tabs` パスを読み込んでいます。この例では、path を `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabs のマークアップは、次のとおりです:
 
 ```html
 <ion-tabs>
@@ -393,7 +392,7 @@ const routes: Routes = [
 </ion-tabs>
 ```
 
-Ionicを使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `<ion-tab>` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定はRouterの設定によって行えるようになりました。
+Ionic を使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `<ion-tab>` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定は Router の設定によって行えるようになりました。
 
 ### How Tabs in Ionic Work
 
diff --git a/docs/angular/overview.md b/docs/angular/overview.md
index f7e37efb4f8..60d2910bfec 100644
--- a/docs/angular/overview.md
+++ b/docs/angular/overview.md
@@ -14,15 +14,15 @@ sidebar_label: 概要
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-`@ionic/angular` はcore Ionic experienceに、Angular開発者向けにカスタマイズされたツールとAPIを組み合わせたものです。
+`@ionic/angular` は core Ionic experience に、Angular 開発者向けにカスタマイズされたツールと API を組み合わせたものです。
 
-## Angularバージョンサポート
+## Angular バージョンサポート
 
-Ionic v7はAngular v14+をサポートしています。アップグレード戦略の一環として、Angularにはアップグレードを自動化するためのツールが組み込まれており、APIに変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。
+Ionic v7 は Angular v14+をサポートしています。アップグレード戦略の一環として、Angular にはアップグレードを自動化するためのツールが組み込まれており、API に変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。
 
 ## Angular Tooling
 
-Ionic4以降では、アプリケーション構築とルーティングのために公式のAngularスタックが使用されているため、あなたのアプリケーションはAngularエコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionicは`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。
+Ionic4 以降では、アプリケーション構築とルーティングのために公式の Angular スタックが使用されているため、あなたのアプリケーションは Angular エコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionic は`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。
 
 ## Resources
 
diff --git a/docs/angular/platform.md b/docs/angular/platform.md
index 5b872bc9753..686a0c6fb20 100644
--- a/docs/angular/platform.md
+++ b/docs/angular/platform.md
@@ -10,7 +10,7 @@ title: Platform
   />
 </head>
 
-プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Androidなど）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。
+プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Android など）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。
 
 ## Usage
 
@@ -181,7 +181,7 @@ type PlatformConfig = {
 
 ### `pause`
 
-`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitorアプリケーションがバックグラウンドに置かれたときに発生しますが、標準的なWebブラウザでは発生しません。
+`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitor アプリケーションがバックグラウンドに置かれたときに発生しますが、標準的な Web ブラウザでは発生しません。
 
 #### Examples
 
@@ -205,7 +205,7 @@ this.platform.resize.subscribe(async () => {
 
 ### `resume`
 
-`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitorアプリがバックグラウンドから出てきても、標準的なWebブラウザで起動しない場合に発生します。
+`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから出てきても、標準的な Web ブラウザで起動しない場合に発生します。
 
 #### Examples
 
diff --git a/docs/angular/storage.md b/docs/angular/storage.md
index 2a7397d7f99..23c365eb7d4 100644
--- a/docs/angular/storage.md
+++ b/docs/angular/storage.md
@@ -11,7 +11,7 @@ sidebar_label: ストレージ
   />
 </head>
 
-Ionicアプリ内にデータを保存するためのさまざまなオプションを用意しています。
+Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています。
 
 Here are two official Ionic options:
 
diff --git a/docs/angular/testing.md b/docs/angular/testing.md
index 821ab761bf6..095c38c8061 100644
--- a/docs/angular/testing.md
+++ b/docs/angular/testing.md
@@ -22,7 +22,7 @@ Ionic CLI を使用して `@ionic/angular` アプリケーションを生成す
 
 ## ユニットテスト
 
-ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipeなど）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。
+ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipe など）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。
 
 適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。
 
@@ -34,7 +34,7 @@ Ionic CLI を使用して `@ionic/angular` アプリケーションを生成す
 
 モックを使用すると、モックが呼び出されたかどうか、および `toHaveBeenCalled*` セットの関数を介してどのように呼び出されたかを判断するために、テストでモックを確認することもできます。これらの関数では、メソッドが呼び出されたことをテストするときに、`toHaveBeenCalled` メソッドの呼び出しよりも `toHaveBeenCalledTimes` の呼び出しを優先して、テストをできるだけ具体的に行う必要があります。つまり、`expect(mock.foo).toHaveBeenCalledTimes(1)` は `expect(mock.foo).toHaveBeenCalled()` よりも優れています。何かが呼ばれていないこと（`expect(mock.foo).not.toHaveBeenCalled()`）をテストする際は、逆のアドバイスに従うべきです。
 
-Jasmine でモックオブジェクトを作成する一般的な方法は2つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。
+Jasmine でモックオブジェクトを作成する一般的な方法は 2 つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。
 
 ### `jasmine.createSpy` と `jasmine.createSpyObj` の利用
 
@@ -50,7 +50,7 @@ Jasmine でモックオブジェクトを作成する一般的な方法は2つ
 
 ### 一般的なテストの構成
 
-ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに1つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。
+ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに 1 つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。
 
 `spec` ファイル自体には、そのテスト全体を定義するただ一つの `describe` コールが含まれています。その中には、主要な機能領域を定義する他の `describe` コールがネストされています。各 `describe` コールには、setup コードと teardown コード（一般的に `beforeEach` と `afterEach` コールによって処理される）、機能を階層的に分解した `describe` コール、また個々のテストケースを定義する `it` コールが含まれます。
 
@@ -72,7 +72,7 @@ describe('Calculation', () => {
 });
 ```
 
-外側の `describe` コールは  `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。
+外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。
 
 ### ページとコンポーネント
 
@@ -111,7 +111,7 @@ describe('TabsPage', () => {
 
 ## Service
 
-Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主にHTTP操作やデータ操作を実行するデータの service の2つの大まかなカテゴリーのいずれかに分類されます。
+Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。
 
 ### 基本的な Service のテスト
 
@@ -180,7 +180,7 @@ describe('PayrolService', () => {
 
 #### HTTP データ Service のテスト
 
-HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは <a href="https://angular.jp/guide/http#testing-http-requests" target="_blank">Angular の HTTPリクエストをテストする</a> のガイドを参照してください。
+HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは <a href="https://angular.jp/guide/http#testing-http-requests" target="_blank">Angular の HTTP リクエストをテストする</a> のガイドを参照してください。
 
 このようなテストの基本的な設定は次のようになります:
 
@@ -289,7 +289,7 @@ describe('NamePipe', () => {
 
 ### テストの構成
 
-`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは <a href="https://www.protractortest.org/" target="_blank">Protractor</a> を使用してブラウザを制御し、<a href="https://jasmine.github.io/" target="_blank">Jasmine</a> を使用してテストを構築し、実行します。アプリケーションは、初期時は次の4つのファイルで構成されています:
+`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは <a href="https://www.protractortest.org/" target="_blank">Protractor</a> を使用してブラウザを制御し、<a href="https://jasmine.github.io/" target="_blank">Jasmine</a> を使用してテストを構築し、実行します。アプリケーションは、初期時は次の 4 つのファイルで構成されています:
 
 - `protractor.conf.js` - Protractor の設定ファイル
 - `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定
@@ -300,11 +300,11 @@ describe('NamePipe', () => {
 
 エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。
 
-ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用するAPIを提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
+ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
 
 ##### ベースページオブジェクト
 
-多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用されるCSSセレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
+多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
 
 すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します:
 
@@ -501,7 +501,7 @@ describe('Login', () => {
 
 ### 設定
 
-デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する1つの方法を示します。
+デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。
 
 #### テスト環境
 
@@ -570,7 +570,7 @@ export const environment = {
 
 #### テストクリーンアップ
 
-エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための1つの方法は:
+エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための 1 つの方法は:
 
 1. クリーンアップを実行するエンドポイントを生成する。
 1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する
diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md
index 8c2a873a651..3b097970d69 100644
--- a/docs/angular/your-first-app.md
+++ b/docs/angular/your-first-app.md
@@ -11,7 +11,7 @@ sidebar_label: はじめてのアプリ
   />
 </head>
 
-Ionic の素晴らしいところは、1つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 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:
 
@@ -71,13 +71,13 @@ Consider setting up npm to operate globally without elevated permissions. See [R
 
 ## アプリの作成
 
-次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native機能を使うためにCapacitorを追加します。
+次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。
 
 ```shell
 ionic start photo-gallery tabs --type=angular --capacitor
 ```
 
-このスタータープロジェクトには、Ionic 開発のために事前に構成された3つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
+このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
 
 次に、アプリのフォルダに移動します:
 
diff --git a/docs/cli.md b/docs/cli.md
index fac64336ea2..b9ceb42ea2c 100644
--- a/docs/cli.md
+++ b/docs/cli.md
@@ -11,11 +11,11 @@ sidebar_label: 概要
   />
 </head>
 
-The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionicアプリを開発する時に頼りになるツールです。
+The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionic アプリを開発する時に頼りになるツールです。
 
 ## インストール
 
-Ionic CLI はnpmでグローバルにインストールできます:
+Ionic CLI は npm でグローバルにインストールできます:
 
 ```shell
 npm install -g @ionic/cli
@@ -23,7 +23,7 @@ npm install -g @ionic/cli
 
 ## Help
 
-Ionic CLIでは `--help` フラグをつけることでコマンドのドキュメントを利用できます。
+Ionic CLI では `--help` フラグをつけることでコマンドのドキュメントを利用できます。
 
 ```shell
 $ ionic --help
@@ -41,14 +41,14 @@ $ ionic <command> <subcommand> --help
 
 ## 構成
 
-Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新のNode LTSが推奨です。Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">Github repository</a>.
+Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新の Node LTS が推奨です。Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">Github repository</a>.
 
 ## トラブルシューティング
 
-Ionic CLIの問題をトラブルシューティングするには、以下の方法が役立ちます:
+Ionic CLI の問題をトラブルシューティングするには、以下の方法が役立ちます:
 
-- 最新バージョンのIonic CLIがインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。
-- 最新のNode LTSがインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setupを参照してください。
+- 最新バージョンの Ionic CLI がインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。
+- 最新の Node LTS がインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setup を参照してください。
 - `verbose` フラグは、デバッグメッセージを表示し、問題を絞り込むことができます。
 - 接続の問題は、プロキシの設定が適切でないことが原因である可能性があります。リクエストプロキシの設定については、[Using a Proxy](/docs/cli/using-a-proxy) を参照してください。
-- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLIが再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI環境変数](/docs/cli/configuration#environment-variables)で設定します。
+- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLI が再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI 環境変数](/docs/cli/configuration#environment-variables)で設定します。
diff --git a/docs/cli/configuration.md b/docs/cli/configuration.md
index 947eb20f6b0..293fc0bc9bd 100644
--- a/docs/cli/configuration.md
+++ b/docs/cli/configuration.md
@@ -12,13 +12,13 @@ title: 設定
 
 ## ファイル
 
-設定された値はJSONファイルに格納されます。Ionic CLIは、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。
+設定された値は JSON ファイルに格納されます。Ionic CLI は、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。
 
-CLIには、プロジェクト設定ファイルおよびグローバルCLI設定ファイルから設定値を設定およびprintfするためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。
+CLI には、プロジェクト設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定および printf するためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。
 
 ### プロジェクト設定ファイル
 
-各Ionicプロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。
+各 Ionic プロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。
 
 ```json
 {
@@ -49,7 +49,7 @@ CLIには、プロジェクト設定ファイルおよびグローバルCLI設
 
 ## 環境変数
 
-CLIは、次の環境変数を検索します:
+CLI は、次の環境変数を検索します:
 
 - `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).
@@ -57,7 +57,7 @@ CLIは、次の環境変数を検索します:
 
 ## Flags
 
-CLI flagsは、CLIコマンドの動作を変更するグローバルオプションです。
+CLI flags は、CLI コマンドの動作を変更するグローバルオプションです。
 
 - `--help`: Instead of running the command, view its help page.
 - `--verbose`: Show all log messages for debugging purposes.
@@ -67,15 +67,15 @@ CLI flagsは、CLIコマンドの動作を変更するグローバルオプシ
 
 ## Hooks
 
-CLIは、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLIにフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。:
+CLI は、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLI にフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。:
 
-* `ionic:serve:before`: dev server が start される前に実行されます
-* `ionic:serve:after`: dev server が終了される前に実行されます
-* `ionic:build:before`: web assetの構築がはじまる前に実行されます
-* `ionic:build:after`: web assetの構築が終了して実行されます。
-* `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed
-* `ionic:capacitor:build:before` : executed on capacitor build before capacitor open is executed
-* `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync
+- `ionic:serve:before`: dev server が start される前に実行されます
+- `ionic:serve:after`: dev server が終了される前に実行されます
+- `ionic:build:before`: web asset の構築がはじまる前に実行されます
+- `ionic:build:after`: web asset の構築が終了して実行されます。
+- `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed
+- `ionic:capacitor:build:before` : executed on 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_`.
 
@@ -93,7 +93,7 @@ IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=ionic-starter-app
 IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false
 ```
 
-Hooksは `ionic.config.json` で定義することもできます。プロジェクト内でHooksオブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値はJavaScriptファイルへのパスまたはパスの配列です。
+Hooks は `ionic.config.json` で定義することもできます。プロジェクト内で Hooks オブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値は JavaScript ファイルへのパスまたはパスの配列です。
 
 次の例では、ファイルは `ionic:build:before` フックでインポートされ、実行されます。
 
@@ -124,7 +124,7 @@ module.exports = function (ctx) {
 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
-Ionic CLIは multi-app 構成セットアップをサポートしており、複数のIonicアプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。
+Ionic CLI は multi-app 構成セットアップをサポートしており、複数の Ionic アプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。
 
 If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples.
 :::
@@ -217,7 +217,7 @@ $ ionic init
 
 ## 詳細設定
 
-### Buildの上書き
+### 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.
 
@@ -240,4 +240,4 @@ If these variables are set in the environment, `ionic cordova build ios` will us
 
 ### 遠隔計測について
 
-CLIからIonicに使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。
+CLI から Ionic に使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。
diff --git a/docs/cli/using-a-proxy.md b/docs/cli/using-a-proxy.md
index 57680535f4f..76fe15db241 100644
--- a/docs/cli/using-a-proxy.md
+++ b/docs/cli/using-a-proxy.md
@@ -16,7 +16,7 @@ $ export HTTPS_PROXY="https://proxy.example.com:8888" # also used by npm
 $ export IONIC_HTTP_PROXY="http://proxy.example.com:8888"
 ```
 
-### 他のCLI
+### 他の CLI
 
 Each CLI that you use must be configured separately to proxy network requests.
 
@@ -32,7 +32,7 @@ npm config set proxy http://proxy.company.com:8888
 git config --global http.proxy http://proxy.example.com:8888
 ```
 
-### SSLの設定
+### SSL の設定
 
 The Ionic CLI can be configured to use various SSL settings for HTTP requests.
 
diff --git a/docs/components.md b/docs/components.md
index 90cd49769ae..5fae65c456e 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionicには、modals、popups、cardsなど、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。
+Ionic アプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionic には、modals、popups、cards など、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。
 
 <intro-end />
 
@@ -37,13 +37,13 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Button" href="api/button" icon="/icons/component-button-icon.png">
-  <p>Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。</p>
+  <p>
+    Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。
+  </p>
 </DocsCard>
 
 <DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
-  <p>
-    Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。
-  </p>
+  <p>Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。</p>
 </DocsCard>
 
 <DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
@@ -59,11 +59,15 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Date & Time Pickers" href="api/datetime" icon="/icons/component-datetimepicker-icon.png">
-  <p>日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。</p>
+  <p>
+    日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。
+  </p>
 </DocsCard>
 
 <DocsCard header="Floating Action Button" href="api/fab" icon="/icons/component-fab-icon.png">
-  <p>フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。</p>
+  <p>
+    フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。
+  </p>
 </DocsCard>
 
 <DocsCard header="Icons" href="api/icon" img="/icons/feature-component-icons-icon.png">
@@ -95,11 +99,15 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Menu" href="api/menu" icon="/icons/component-menu-icon.png">
-  <p>Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。</p>
+  <p>
+    Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。
+  </p>
 </DocsCard>
 
 <DocsCard header="Modal" href="api/modal" icon="/icons/component-modal-icon.png">
-  <p>Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。</p>
+  <p>
+    Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。
+  </p>
 </DocsCard>
 
 <DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
@@ -139,7 +147,9 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Tabs" href="api/tabs" img="/icons/feature-component-tabs-icon.png">
-  <p>Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。</p>
+  <p>
+    Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。
+  </p>
 </DocsCard>
 
 <DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
diff --git a/docs/core-concepts/cross-platform.md b/docs/core-concepts/cross-platform.md
index 4564e31fa34..cfa520f8ee9 100644
--- a/docs/core-concepts/cross-platform.md
+++ b/docs/core-concepts/cross-platform.md
@@ -4,19 +4,19 @@ disableHtmlPreviews: true
 
 # クロスプラットフォーム
 
-Ionicは、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。
+Ionic は、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。
 
-## ハードウェアAPI
+## ハードウェア API
 
-ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するためのAPIを呼び出すことがよくあります。これらのAPI呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionicにはこの問題に対応するためのいくつかの方法があります。
+ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するための API を呼び出すことがよくあります。これらの API 呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionic にはこの問題に対応するためのいくつかの方法があります。
 
 ### Ionic Native
 
-[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったりCordovaプラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、アプリがクラッシュすることなく動き続けるということです。
+[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったり Cordova プラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、 アプリがクラッシュすることなく動き続けるということです。
 
 ### プラットフォーム検知
 
-Ionicアプリ内では、ネイティブAPIを呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例:
+Ionic アプリ内では、ネイティブ API を呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例:
 
 ```tsx
 this.platform.ready().then(() => {
@@ -29,11 +29,11 @@ this.platform.ready().then(() => {
 });
 ```
 
-このコードは、ネイティブAPIが使えるかどうか不確かな環境向けに開発していたとしても非常に役に立ちます。
+このコードは、ネイティブ API が使える  かどうか不確かな環境向けに開発していたとしても非常に役に立ちます。
 
 ### ブラウザのフォールバック
 
-多くのネイティブAPI（例えばFile API）はブラウザで利用できません。APIは常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの2つの点を考慮すると、アプリが実行されているプラ​​ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。
+多くのネイティブ API（例えば File API）はブラウザで利用できません。API は常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの 2 つの点を考慮すると、アプリが実行されているプラ ​​ ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。
 
 ## デスクトップ
 
@@ -41,7 +41,7 @@ this.platform.ready().then(() => {
 
 ### レイアウト
 
-多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的なUIパターンを考えてください:
+多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的な UI パターンを考えてください:
 
 ```html
 <ion-content>
@@ -63,7 +63,7 @@ this.platform.ready().then(() => {
 </ion-content>
 ```
 
-このコードは幅が100%の5つの項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。
+このコードは幅が 100%の 5 つの  項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。
 
 <img src={require('@site/static/img/building/cross-platform-items.png').default} />
 
@@ -101,7 +101,7 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co
 </ion-grid>
 ```
 
-全体を `ion-grid` 要素で囲むことで、Ionicのグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。
+全体を `ion-grid` 要素で囲むことで、Ionic のグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。
 
 <img src={require('@site/static/img/building/cross-platform-grid.png').default} />
 
@@ -145,7 +145,7 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co
 
 上の例ではたくさんのコードが追加されていますが、キーポイントは下記になります:
 
-- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は12です。
+- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は 12 です。
 
 - `size`属性は`size-{breakpoint}`の形式で各画面幅に応じたブレークポイントを持つこともできます。
 
@@ -153,13 +153,13 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co
 
 ## ストレージ
 
-ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHRリクエストからJSONを保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLiteデータベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic開発者はそれを心配する必要はありません。
+ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHR リクエストから JSON を保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLite データベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic 開発者はそれを心配する必要はありません。
 
 ### Ionic Storage
 
-この場合、<a href="https://github.com/ionic-team/ionic-storage" target="_blank">Ionicのストレージライブラリ</a>は複数の環境において最適な選択肢です。Ionicのストレージクラスは、十分にテストされたLocalForageライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。
+この場合、<a href="https://github.com/ionic-team/ionic-storage" target="_blank">Ionic のストレージライブラリ</a>は複数の環境において最適な選択肢です。Ionic のストレージクラスは、十分にテストされた LocalForage ライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。
 
-現在、ネイティブ向けにはSQLiteを通して実行され、他にもIndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定したAPIを使ってデータの読み書きが可能です。
+現在、ネイティブ向けには SQLite を通して実行され、他にも IndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定した API を使ってデータの読み書きが可能です。
 
 ```tsx
 class MyClass {
@@ -177,4 +177,4 @@ class MyClass {
 }
 ```
 
-PouchDBといった他のストレージを選択することも可能です。
+PouchDB といった他のストレージを選択することも可能です。
diff --git a/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.md
index 54f4995468a..dbceb51b028 100644
--- a/docs/core-concepts/fundamentals.md
+++ b/docs/core-concepts/fundamentals.md
@@ -11,43 +11,47 @@ sidebar_label: 基本的な考え方
   />
 </head>
 
-Ionicアプリの開発に慣れていない人には、Ionicプロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Frameworkとは何か、そしてそれがどのように機能するかについての基本を説明します。
+Ionic アプリの開発に慣れていない人には、Ionic プロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Framework とは何か、そしてそれがどのように機能するかについての基本を説明します。
 
-## UIコンポーネント
+## UI コンポーネント
 
-Ionic Frameworkは、アプリケーションの構成要素として機能する、再利用可能なUIコンポーネントのライブラリです。Ionicのコンポーネントは、HTML、CSS、JavaScriptを利用した[Web標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionicコンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。
+Ionic Framework は、アプリケーションの構成要素として機能する、再利用可能な UI コンポーネントのライブラリです。Ionic のコンポーネントは、HTML、CSS、JavaScript を利用した[Web 標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionic コンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。
 
 ## スタイルの適用
 
-スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できるIonic Frameworkに組み込まれている機能です。すべてのIonicコンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhoneやiPadなどのAppleデバイスは、Apple独自の<a href="https://www.apple.com/ios" target="_blank">iOSデザイン</a>を使用します。同様に、Androidデバイスは、<a href="https://material.io/guidelines/" target="_blank">Material Design</a>と呼ばれるGoogleのデザインを使用します。
+スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できる Ionic Framework に組み込まれている機能です。すべての Ionic コンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhone や iPad などの Apple デバイスは、Apple 独自の<a href="https://www.apple.com/ios" target="_blank">iOS デザイン</a>を使用します。同様に、Android デバイスは、<a href="https://material.io/guidelines/" target="_blank">Material Design</a>と呼ばれる Google のデザインを使用します。
 
-プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリのUXを提供します。AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを使用し、AndroidのPlay StoreからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからProgressive Web Apps（PWA）として表示アプリを表示する場合、IonicはデフォルトでMaterial Designテーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。
+プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリの UX を提供します。Apple の App Store からダウンロードした Ionic アプリは iOS テーマを使用し、Android の Play Store からダウンロードした Ionic アプリは Material Design テーマを取得します。ブラウザから Progressive Web Apps（PWA）として表示アプリを表示する場合、Ionic はデフォルトで Material Design テーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。
 
 ## ナビゲーション
 
-従来のWebアプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。
-この例としては、ユーザが、Wikipediaのようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。
+従来の Web アプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。
+この例としては、ユーザが、Wikipedia のようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。
 
 これとは対照的に、モバイルアプリはしばしば平行な「非線形」ナビゲーションを利用します。たとえば、タブのついたインタフェースでは、タブごとにナビゲーションスタックを個別に設定できるため、ユーザがタブ間を移動したり切り替えたりするときにユーザが自分の場所を失うことはありません。
 
-Ionicアプリは、このモバイルナビゲーションのアプローチを採用しており、Web開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。
+Ionic アプリは、このモバイルナビゲーションのアプローチを採用しており、Web 開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。
 
-Angularと`@ionic/angular`で構築するアプリは、<a href="https://angular.jp/guide/router" target="_blank">Angular Router</a>を使用することをお勧めします。これはAngularとIonic 4の組み合わせから使うことができます。
+Angular と`@ionic/angular`で構築するアプリは、<a href="https://angular.jp/guide/router" target="_blank">Angular Router</a>を使用することをお勧めします。これは Angular と Ionic 4 の組み合わせから使うことができます。
 
-## Nativeアクセス
+## Native アクセス
 
-Webテクノロジで構築されたアプリ（Ionicアプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionicアプリ用のベースとなるコードは、Web標準とこれらのプラットフォーム間で共有される共通のAPIに基づいているため、多くのプラットフォームで機能します。
+Web テクノロジで構築されたアプリ（Ionic アプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionic アプリ用のベースとなるコードは、Web 標準とこれらのプラットフォーム間で共有される共通の API に基づいているため、多くのプラットフォームで機能します。
 
-Ionicの最も一般的な使用例の1つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOSとAndroidの両方のソフトウェア開発キット（SDK）は、完全なネイティブSDKアクセスを可能にしながら、あらゆるIonicアプリをレンダリングする [Web Views](webview.md) を提供します。
+Ionic の最も一般的な使用例の 1 つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOS と Android の両方のソフトウェア開発キット（SDK）は、完全なネイティブ SDK アクセスを可能にしながら、あらゆる Ionic アプリをレンダリングする [Web Views](webview.md) を提供します。
 
-<a href="https://capacitorjs.com/" target="_blank">Capacitor</a> や <a href="https://cordova.apache.org/" target="_blank">Cordova</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
+<a href="https://capacitorjs.com/" target="_blank">
+  Capacitor
+</a> や <a href="https://cordova.apache.org/" target="_blank">
+  Cordova
+</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
 
 ## テーマ
 
-Ionic Frameworkは<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>を使って構築されており、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSSプロパティ（変数）</a>が提供する柔軟性を活用できます。これにより、ウェブ標準に従いつつ、見栄えのするアプリを驚くほど簡単にデザインできます。私たちは、開発者がいくつかの素晴らしいデフォルトを持つことができるように色のセットを提供しますが、ブランド、企業、または希望のカラーパレットに一致するデザインを作成するためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマ設定の詳細については、 [Theming](../theming/basics.md) を参照してください。
+Ionic Framework は<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>を使って構築されており、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS プロパティ（変数）</a>が提供する柔軟性を活用できます。これにより、ウェブ標準に従いつつ、見栄えのするアプリを驚くほど簡単にデザインできます。私たちは、開発者がいくつかの素晴らしいデフォルトを持つことができるように色のセットを提供しますが、ブランド、企業、または希望のカラーパレットに一致するデザインを作成するためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマ設定の詳細については、 [Theming](../theming/basics.md) を参照してください。
 
 ## イベント
 
-多くのIonicコンポーネントは [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) を使用して、コンポーネントの重要な状態変化を開発者に通知します。例えば、 `ion-datetime` コンポーネントは、選択された日付が変更されると `ionChange` を発行します。
+多くの Ionic コンポーネントは [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) を使用して、コンポーネントの重要な状態変化を開発者に通知します。例えば、 `ion-datetime` コンポーネントは、選択された日付が変更されると `ionChange` を発行します。
 
-開発者は通常通り `click` などの標準的なイベントを使用することができる。しかし、コンポーネントの [shadow root](../reference/glossary.md#shadow) 内で発生した多くのイベントは、ホスト要素に [retargeted](https://dom.spec.whatwg.org/#retarget) されます。この結果、ユーザーが1回しかクリックしなくても、複数の `click` ハンドラが実行される可能性があります。そのため、開発者はIonicコンポーネントの状態変化を適切に通知するために、Ionicのイベントに頼る必要があります。Ionicのイベントには、標準的なイベントとの衝突を避けるために`ion`というプレフィックスが付けられています。各コンポーネントのドキュメントページには、開発者がアプリケーションでリッスンできる利用可能なイベントのリストがあります。
+開発者は通常通り `click` などの標準的なイベントを使用することができる。しかし、コンポーネントの [shadow root](../reference/glossary.md#shadow) 内で発生した多くのイベントは、ホスト要素に [retargeted](https://dom.spec.whatwg.org/#retarget) されます。この結果、ユーザーが 1 回しかクリックしなくても、複数の `click` ハンドラが実行される可能性があります。そのため、開発者は Ionic コンポーネントの状態変化を適切に通知するために、Ionic のイベントに頼る必要があります。Ionic のイベントには、標準的なイベントとの衝突を避けるために`ion`というプレフィックスが付けられています。各コンポーネントのドキュメントページには、開発者がアプリケーションでリッスンできる利用可能なイベントのリストがあります。
diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md
index 9a1344cc5af..8c40ee79471 100644
--- a/docs/core-concepts/webview.md
+++ b/docs/core-concepts/webview.md
@@ -10,31 +10,31 @@ title: Web View
   />
 </head>
 
-Web Viewは、ネイティブデバイス上のWebアプリを強化します。
+Web View は、ネイティブデバイス上の Web アプリを強化します。
 
-[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web Viewは自動的に提供されます。
+[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web View は自動的に提供されます。
 
-[Cordova](../reference/glossary.md#cordova)については、Ionicが<a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View のプラグイン</a>を管理しています。このプラグインは、Ionic CLIを使用する際にデフォルトで提供されます。
+[Cordova](../reference/glossary.md#cordova)については、Ionic が<a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View のプラグイン</a>を管理しています。このプラグインは、Ionic CLI を使用する際にデフォルトで提供されます。
 
-## Web Viewとは
+## Web View とは
 
-Ionicアプリは[Web技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Webブラウザのすべての機能が使えるWeb Viewを使ってレンダリングされます。
+Ionic アプリは[Web 技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Web ブラウザのすべての機能が使える Web View を使ってレンダリングされます。
 
-最近のWeb Viewは、カメラ、センサー、GPS、スピーカー、Bluetoothなどのハードウェア機能のための組み込み<a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a>を多数提供していますが、プラットフォーム固有のハードウェアAPIにアクセスする必要がある場合もあります。Ionicアプリでは、通常はJavaScript APIを利用してネイティブプラグインにアクセスしてブリッジする形でハードウェアAPIを利用することができます。
+最近の Web View は、カメラ、センサー、GPS、スピーカー、Bluetooth などのハードウェア機能のための組み込み<a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a>を多数提供していますが、プラットフォーム固有のハードウェア API にアクセスする必要がある場合もあります。Ionic アプリでは、通常は JavaScript API を利用してネイティブプラグインにアクセスしてブリッジする形でハードウェア API を利用することができます。
 
 ![webview architecture](/img/building/webview-architecture.png)
 
-Ionic Web Viewプラグインは、最新のJavaScriptアプリケーションに特化しています。iOSとAndroidの両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化されたHTTPサーバーにホストされます。
+Ionic Web View プラグインは、最新の JavaScript アプリケーションに特化しています。iOS と Android の両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化された HTTP サーバーにホストされます。
 
 ### 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プロトコル
+### File プロトコル
 
-CordovaとCapacitorのアプリはローカルのHTTPサーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルのHTTPサーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
+Cordova と Capacitor のアプリはローカルの HTTP サーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルの HTTP サーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
 
-Capacitorアプリの場合、URIはこのように変換します。
+Capacitor アプリの場合、URI はこのように変換します。
 
 ```javascript
 import { Capacitor } from '@capacitor/core';
@@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
 Capacitor.convertFileSrc(filePath);
 ```
 
-Cordovaアプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　がFile URIを変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応するIonic Nativeプラグインもあります。また、対応するIonic Nativeプラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。
+Cordova アプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　が File URI を変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応する Ionic Native プラグインもあります。また、対応する Ionic Native プラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。
 
 ### 実装
 
diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/docs/core-concepts/what-are-progressive-web-apps.md
index 2517935b7b1..47020a40c74 100644
--- a/docs/core-concepts/what-are-progressive-web-apps.md
+++ b/docs/core-concepts/what-are-progressive-web-apps.md
@@ -16,12 +16,12 @@ title: Progressive Web Apps
 ### The web...それよりもいいもの
 
 Progressive Web App (PWA) は、最新の Web 機能を使用して、ユーザーにアプリのようなエクスペリエンスを提供する Web アプリです。
-これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URLからアクセスでき、検索エンジンにインデックスされます。
+これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URL からアクセスでき、検索エンジンにインデックスされます。
 
 [Capacitor](https://capacitorjs.com)と連携して、すべてのユーザーに複数のデプロイ対象を提供することができます。
-アプリをPWAとしてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。
+アプリを PWA としてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。
 
-Ionicでは、アプリストアへのリリースだけでなく、PWAとしてモバイルWebにデプロイすることも可能です。
+Ionic では、アプリストアへのリリースだけでなく、PWA としてモバイル Web にデプロイすることも可能です。
 
 ### 要求されるもの
 
@@ -37,7 +37,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
 
 - フレッシュ - サービスワーカーの更新プロセスにより、常に最新の情報を提供します。
 
-- 安全 - HTTPS経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。
+- 安全 - HTTPS 経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。
 
 - 発見性 - W3C マニフェストとサービスワーカー登録により、「アプリケーション」として識別可能であり、検索エンジンに見つけてもらうことができます。
 
@@ -45,7 +45,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
 
 - インストール可能 - アプリストアのような煩わしさがなく、ユーザーが最も便利だと思うアプリをホーム画面に置いておくことができます。
 
-- リンク可能 - 複雑なインストールを必要とせず、URLで簡単に共有できます。
+- リンク可能 - 複雑なインストールを必要とせず、URL で簡単に共有できます。
 
 <em>
   <a href="https://addyosmani.com/blog/getting-started-with-progressive-web-apps/" target="_blank">
@@ -53,7 +53,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
   </a>
 </em>
 
-たくさんありますが、Ionicアプリの場合はいくつかのポイントに集約されます。
+たくさんありますが、Ionic アプリの場合はいくつかのポイントに集約されます。
 
 #### オフライン対応
 
@@ -61,8 +61,8 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
 
 #### <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank">Web App Manifest</a>
 
-App Manifestファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。
+App Manifest ファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。
 
 #### <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>
 
-Service Workerについては、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。
+Service Worker については、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。
diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.md
index 7d9cf5898d5..6a2a1a0a58c 100644
--- a/docs/deployment/app-store.md
+++ b/docs/deployment/app-store.md
@@ -13,18 +13,18 @@ sidebar_label: iOS App Store
 
 ## 要件
 
-iOS App Storeにアプリを提出するには、いくつかのことが必要です。
+iOS App Store にアプリを提出するには、いくつかのことが必要です。
 
 - Xcode
-- 有料のApple Developersアカウント
+- 有料の Apple Developers アカウント
 - 有効なプロビジョニングプロファイル
 - アプリの開発および配布に関する証明書
 
-Apple Developer Programへの登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。
+Apple Developer Program への登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。
 
 ## リリースビルドの作成
 
-iOSプラットフォームがまだ追加されていない場合は、必ず追加してください。
+iOS プラットフォームがまだ追加されていない場合は、必ず追加してください。
 
 ```shell
 ionic cordova platform add ios
@@ -48,29 +48,30 @@ ionic cordova build ios --prod
 
 iOS 用の証明書の生成は少し複雑なので、証明書とは何か、どのように生成するかについては、[Apple の公式ドキュメント](https://help.apple.com/xcode/mac/current/#/dev3a05256b8) を必ず確認してください。
 
-必要な証明書とプロファイルを作成するには、[Appleのメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Appleのドキュメントに記載されているリンクをたどってください。
+必要な証明書とプロファイルを作成するには、[Apple のメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Apple のドキュメントに記載されているリンクをたどってください。
 
-ここで重要なのは、開発用と配布用の2種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。
+ここで重要なのは、開発用と配布用の 2 種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。
 
 ディストリビューション証明書は、アプリをストアに配布するためのものです。アプリがディストリビューション証明書で署名されると、どのデバイスにもインストールできるようになります。
 
-## XCodeでのアプリへの署名
+## XCode でのアプリへの署名
 
-正しい証明書を生成した後、Xcodeに自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しいDevelopmentとDistributionの証明書が使用されることを確認するためです。
+正しい証明書を生成した後、Xcode に自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しい Development と Distribution の証明書が使用されることを確認するためです。
 
-このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizerが開かれます。
+このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizer が開かれます。
 
-Xcode Organizerは、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、'Upload to App Store'をクリックします。
+Xcode Organizer は、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、'Upload to App Store'をクリックします。
 チームを選択する場所があり、アプリの詳細情報と'Upload'ボタンをクリックします。
 
-アップロードに成功すると、アプリは[iTunes Connect](https://itunesconnect.apple.com)の「アクティビティ」に表示されるか、[App Store Connect](https://appstoreconnect.apple.com/)の「Apps」に表示されます。ここから、アプリをTestFlightに公開したり、Appleに送信してApp Storeの承認を得ることができます。
+アップロードに成功すると、アプリは[iTunes Connect](https://itunesconnect.apple.com)の「アクティビティ」に表示されるか、[App Store Connect](https://appstoreconnect.apple.com/)の「Apps」に表示されます。ここから、アプリを TestFlight に公開したり、Apple に送信して App Store の承認を得ることができます。
 
 ## アプリのアップデート
 
 アプリが成長するにつれ、新機能や修正を加えて更新する必要があります。
-アプリのアップデートは、Appleに新バージョンを提出するか、Appflowのような<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">live update機能</a>を使用することで可能です。
+アプリのアップデートは、Apple に新バージョンを提出するか、Appflow のような<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">live update 機能</a>を使用することで可能です。
 
-<strong>Live Updates</strong>を使うと, アプリの変更は、App Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。
+<strong>Live Updates</strong>を使うと, アプリの変更は、App
+Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。
 
 :::note
 iOS App Store が更新されたビルドを受け入れるには、config.xml ファイルを編集してバージョン値を増やし、上記の手順でアプリをリリース用に再構築する必要があります。
diff --git a/docs/deployment/desktop-app.md b/docs/deployment/desktop-app.md
index 4ca4a877a7a..6d72e41298d 100644
--- a/docs/deployment/desktop-app.md
+++ b/docs/deployment/desktop-app.md
@@ -11,26 +11,26 @@ sidebar_label: Electronデスクトップアプリ
   />
 </head>
 
-Ionicでデスクトップアプリケーションを構築すると、開発者はコードを100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electronに精通していることを前提としており、Electronアプリの「作り方」については触れません。 詳しくは <a href="https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app" target="_blank">Electron guide</a>. をご覧ください。
+Ionic でデスクトップアプリケーションを構築すると、開発者はコードを 100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electron に精通していることを前提としており、Electron アプリの「作り方」については触れません。 詳しくは <a href="https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app" target="_blank">Electron guide</a>. をご覧ください。
 
-## macOSアプリ
+## macOS アプリ
 
 ### 要件
 
-macOSアプリをストアでアプリを公開するには、難しい要件が2つあります。
+macOS アプリをストアでアプリを公開するには、難しい要件が 2 つあります。
 
-* [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること
-* 開発者アカウント ($100 through Apple's developer portal) が有効であること
+- [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること
+- 開発者アカウント ($100 through Apple's developer portal) が有効であること
 
 ### リリース
 
-Electronチームは、macOS用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。
+Electron チームは、macOS 用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。
 
-## Windowsアプリ
+## Windows アプリ
 
 ### 要件
 
-Windowsアプリをストアでアプリを公開するには、2つの厳しい要件があります。
+Windows アプリをストアでアプリを公開するには、2 つの厳しい要件があります。
 
 - 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)
@@ -45,4 +45,4 @@ npm install -g electron-windows-store
 
 ### リリース作業
 
-macOSと同様、ElectronはWindows用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください
+macOS と同様、Electron は Windows 用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください
diff --git a/docs/deployment/play-store.md b/docs/deployment/play-store.md
index e3202c3ae60..d45dd27aa13 100644
--- a/docs/deployment/play-store.md
+++ b/docs/deployment/play-store.md
@@ -13,19 +13,19 @@ sidebar_label: Android Play Store
 
 ## アプリのリリースビルド作成
 
-Android用のリリースビルドを生成するには、以下のcliコマンドを実行します。
+Android 用のリリースビルドを生成するには、以下の cli コマンドを実行します。
 
 ```shell
 $ ionic cordova build android --prod --release
 ```
 
 これは、アプリの `platforms/android/app/build/outputs/apk` ディレクトリにある `config.xml` の設定に基づき、リリースビルドを生成するものです。
-Ionicアプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。
+Ionic アプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。
 
-## APKへの署名
+## APK への署名
 
 まず、署名されていない APK に署名する必要があります。署名鍵がすでに生成されている場合は、この手順をスキップして、代わりにその鍵を使用します。
-Android SDKに付属するkeytoolコマンドを使用して、秘密鍵を生成します。
+Android SDK に付属する keytool コマンドを使用して、秘密鍵を生成します。
 
 ```shell
 $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
@@ -34,33 +34,33 @@ $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg
 このコマンドを実行し、プロンプトに答えると、カレントディレクトリに `my-release-key.keystore` という名前のファイルが作成されます。
 
 :::caution
-このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Playストアはこのアプリのアップデートを受け付けません!
+このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Play ストアはこのアプリのアップデートを受け付けません!
 :::
 
-署名されていないAPKに署名するには、Android SDKに含まれるjarsignerツールを実行します。
+署名されていない APK に署名するには、Android SDK に含まれる jarsigner ツールを実行します。
 
 ```shell
 $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
 ```
 
-最後に、APKを最適化するために、zipalignツールを実行する必要があります。
+最後に、APK を最適化するために、zipalign ツールを実行する必要があります。
 `zipalign` ツールは `/path/to/Android/sdk/build-tools/VERSION/zipalign` にあります。
-例えば、Android StudioがインストールされているmacOSでは、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。
+例えば、Android Studio がインストールされている macOS では、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。
 
 ```shell
 $ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
 ```
 
-これにより、Google Playストアに受け入れられるHelloWorld.apkという最終リリースバイナリが生成されます。
+これにより、Google Play ストアに受け入れられる HelloWorld.apk という最終リリースバイナリが生成されます。
 
-## Google Play Storeにアプリを送信する
+## Google Play Store にアプリを送信する
 
-リリース用APKが生成されたので、Playストアのリスティングを書き、APKをアップロードすることができるようになりました。
+リリース用 APK が生成されたので、Play ストアのリスティングを書き、APK をアップロードすることができるようになりました。
 
 まずは、[Google Play Store Developer Console](https://play.google.com/apps/publish)にアクセスし、開発者アカウントを新規に作成します。
 
 :::note
-Google Playで開発者アカウントを作るには、25USドルが必要です。
+Google Play で開発者アカウントを作るには、25US ドルが必要です。
 :::
 
 開発者アカウントを作成したら、「アプリケーションを作成する」ボタン(Create an Application)をクリックします。
@@ -68,12 +68,12 @@ Google Playで開発者アカウントを作るには、25USドルが必要で
 ![Create an App button](/img/publishing/newAppGPlay.png)
 
 アプリの説明、スクリーンショット、その他の情報を入力してください。
-準備ができたら、生成された署名付きリリースAPKをアップロードし、アプリを公開します。
+準備ができたら、生成された署名付きリリース APK をアップロードし、アプリを公開します。
 
 ## アプリのアップデート
 
-アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Storeに新バージョンを提出するか、AppflowのLive Update機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Playストアに変更を送信することなく、Appflowのダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Updateについてもっと知るためには<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">こちら</a>にアクセスください。
+アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Store に新バージョンを提出するか、Appflow の Live Update 機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Play ストアに変更を送信することなく、Appflow のダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Update についてもっと知るためには<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">こちら</a>にアクセスください。
 
 :::note
-Google PlayストアでアップデートされたAPKを受け入れるには、config.xmlファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。
+Google Play ストアでアップデートされた APK を受け入れるには、config.xml ファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。
 :::
diff --git a/docs/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.md
index b9c70ec7239..83ecdcfd90a 100644
--- a/docs/deployment/progressive-web-app.md
+++ b/docs/deployment/progressive-web-app.md
@@ -14,9 +14,9 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWAとは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。
+Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWA とは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。
 
-Ionicが対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、AngularとReactとVueのリンクです。
+Ionic が対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、Angular と React と Vue のリンクです。
 
 <DocsCards>
   <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg"></DocsCard>
diff --git a/docs/developer-resources/books.md b/docs/developer-resources/books.md
index 00b4b8b77d6..483da7da603 100644
--- a/docs/developer-resources/books.md
+++ b/docs/developer-resources/books.md
@@ -1,8 +1,8 @@
 # Books
 
-### [Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉](https://amzn.to/2Ygk5bA)
+### [Ionic で作る モバイルアプリ制作入門〈Web/iPhone/Android 対応〉](https://amzn.to/2Ygk5bA)
 
-WEBサイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTMLでモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。
+WEB サイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTML でモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。
 
 by [rdlabo](https://twitter.com/rdlabo)
 
diff --git a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md b/docs/developer-resources/guides/first-app-v4/ios-android-camera.md
index 81d33c7f1c6..565be644bdf 100644
--- a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/docs/developer-resources/guides/first-app-v4/ios-android-camera.md
@@ -57,7 +57,7 @@ ionic cordova plugin add cordova-plugin-camera
 <plugin name="cordova-plugin-camera" spec="^4.0.3" />
 ```
 
-次のステップは iOS ユーザーのみ必要です。iOS10では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section (<platform name="ios"></platform>) の `config.xml` の最後に追加します:
+次のステップは iOS ユーザーのみ必要です。iOS10 では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section (<platform name="ios"></platform>) の `config.xml` の最後に追加します:
 
 ```xml
 <!-- iOS 10 で必須: Camera 許可プロンプト -->
diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/docs/developer-resources/guides/first-app-v4/theming.md
index 199a870ae31..140d3aef091 100644
--- a/docs/developer-resources/guides/first-app-v4/theming.md
+++ b/docs/developer-resources/guides/first-app-v4/theming.md
@@ -2,7 +2,7 @@
 
 今までは、単なるカメラアプリを壮大なフォトギャラリーに発展してきました。では、Ionic のテーマ設定でフォトギャラリーを独自のものにする方法を見てみましょう。このアプリのビジュアルデザインは非常に重要で、幸運なことに、Ionic はすぐに使える多くの柔軟なテーマを提供してくれます。
 
-Ionic には CSS 変数として定義された9つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます:
+Ionic には CSS 変数として定義された 9 つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます:
 
 ![v4-theming-defaults](/img/guides/first-app-v4/theming-defaults.png)
 
@@ -27,7 +27,7 @@ base、contrast、shade、tint プロパティを指定することによって
 }
 ```
 
-アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の16進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。
+アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の 16 進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。
 
 しかし待ってください、まだあります！Ionic は、アプリケーションが実行されているデバイスに基づいて、プラットフォーム固有のスタイルを自動的に提供し、ユーザーが慣れているネイティブなルック・アンド・フィールを与えます:
 
@@ -51,6 +51,6 @@ imports: [
 
 ![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png)
 
-CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的なIonic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。
+CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的な Ionic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。
 
 素晴らしいアプリ作りに旅立ちましょう！
diff --git a/docs/developer-resources/tools.md b/docs/developer-resources/tools.md
index bd81b630b44..00587c68984 100644
--- a/docs/developer-resources/tools.md
+++ b/docs/developer-resources/tools.md
@@ -2,19 +2,19 @@
 
 ### [Angular CLI](https://github.com/angular/angular-cli)
 
-Angular CLIの機能の詳細
+Angular CLI の機能の詳細
 
 ### [StackBlitz](https://stackblitz.com/)
 
-ブラウザで0から新しいIonicアプリを始めましょう！
+ブラウザで 0 から新しい Ionic アプリを始めましょう！
 
 ### [TypeScript](https://www.typescriptlang.org/)
 
-TypeScriptでの作業を素晴らしいものにする機能を調べてください。
+TypeScript での作業を素晴らしいものにする機能を調べてください。
 
 ### [Glossary](../reference/glossary.md)
 
-Ionicで開発中に利用される一般的な用語の一覧。
+Ionic で開発中に利用される一般的な用語の一覧。
 
 ### [Starter Apps](https://ionicthemes.com)
 
diff --git a/docs/developer-resources/videos.md b/docs/developer-resources/videos.md
index 8a51e148ad3..a6c946e7532 100644
--- a/docs/developer-resources/videos.md
+++ b/docs/developer-resources/videos.md
@@ -2,7 +2,7 @@
 
 ### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be)
 
-Ionic2の簡単な紹介と最初のアプリの作り方です。
+Ionic2 の簡単な紹介と最初のアプリの作り方です。
 
 ### [Ionic &amp; Async](https://blog.ionicframework.com/screencast-ionic-async/)
 
@@ -10,12 +10,12 @@ Ionic2の簡単な紹介と最初のアプリの作り方です。
 
 ### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/)
 
-Ionic2アプリを構築する方法を学びましょう。
+Ionic2 アプリを構築する方法を学びましょう。
 
 ### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY)
 
-Ionic2の裏にあるアイデアと目標を掘り下げてみましょう。
+Ionic2 の裏にあるアイデアと目標を掘り下げてみましょう。
 
 ### [Ionic &amp; Typings](https://blog.ionicframework.com/ionic-and-typings/)
 
-Ionic2アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。
+Ionic2 アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。
diff --git a/docs/developing/android.md b/docs/developing/android.md
index 42c469c464e..78c9cbb4879 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -11,38 +11,45 @@ sidebar_label: Androidでの開発
   />
 </head>
 
-このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Androidエミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。AndroidアプリはWindows、macOS、Linux上で開発できます。
+このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Android エミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。Android アプリは Windows、macOS、Linux 上で開発できます。
 
 ## Android Studio
 
-[Android Studio](https://developer.android.com/studio/) はネイティブなAndroidアプリを作るためのIDEです。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。
+[Android Studio](https://developer.android.com/studio/) はネイティブな Android アプリを作るための IDE です。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。
 
-Androidエミュレータに必要な [Android仮想デバイス](android.md#creating-an-android-virtual-device) の作成にもAndroid Studioが使用されます。Ionicアプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。
+Android エミュレータに必要な [Android 仮想デバイス](android.md#creating-an-android-virtual-device) の作成にも Android Studio が使用されます。Ionic アプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。
 
 :::note
-Android Studioを使ってIonicアプリを開発することはお勧めしません。実際には、ネイティブのAndroidプラットフォーム向けにアプリをビルドして実行したり、Android SDKや仮想デバイスを管理するためだけに使うべきです。
+Android Studio を使って Ionic アプリを開発することはお勧めしません。実際には、ネイティブの Android プラットフォーム向けにアプリをビルドして実行したり、Android SDK や仮想デバイスを管理するためだけに使うべきです。
 :::
 
-### Android Studioのインストール
+### Android Studio のインストール
 
-<a href="https://developer.android.com/studio/" target="_blank">Android website</a> からAndroid Studioをダウンロードします。より詳しいインストール手順は <a href="https://developer.android.com/studio/install" target="_blank">User Guide</a> をご覧ください。
+<a href="https://developer.android.com/studio/" target="_blank">
+  Android website
+</a> からAndroid Studioをダウンロードします。より詳しいインストール手順は <a
+  href="https://developer.android.com/studio/install"
+  target="_blank"
+>
+  User Guide
+</a> をご覧ください。
 
-### Android SDKのインストール
+### Android SDK のインストール
 
-Android Studioをインストールしたら起動します。IDEは、Android SDKのインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDKのインストールを完了して、**Android SDKのパス**のをメモしておいてください。
+Android Studio をインストールしたら起動します。IDE は、Android SDK のインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDK のインストールを完了して、**Android SDK のパス**のをメモしておいてください。
 
 ![Android Studio SDK Setup](/img/installation/android-studio-sdk-setup.png)
 
-デフォルトでは、最新の安定版SDKプラットフォームがインストールされ、そのバージョンのAndroidをターゲットにするために必要なパッケージもコレクションされています。
+デフォルトでは、最新の安定版 SDK プラットフォームがインストールされ、そのバージョンの Android をターゲットにするために必要なパッケージもコレクションされています。
 
-システムイメージやその他のマイナーSDKプラットフォームパッケージをインストールするには、SDK Managerの下部にある **Show Package Details** がオンになっていることを確認する必要があります。
+システムイメージやその他のマイナー SDK プラットフォームパッケージをインストールするには、SDK Manager の下部にある **Show Package Details** がオンになっていることを確認する必要があります。
 ![Android Studio SDK Manager](/img/installation/android-studio-sdk.png)
 
-今後の参考情報ですが、Android SDKはAndroid Studioの起動画面の **Configure** &raquo; **SDK Manager** メニュー、またはAndroidプロジェクト内の **Tools** &raquo; **SDK Manager** で管理することができます。
+今後の参考情報ですが、Android SDK は Android Studio の起動画面の **Configure** &raquo; **SDK Manager** メニュー、または Android プロジェクト内の **Tools** &raquo; **SDK Manager** で管理することができます。
 
 ### コマンドラインツールの設定
 
-Android SDKには<a href="https://developer.android.com/studio/command-line/" target="_blank">便利なコマンドラインツール</a>が付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOSとLinuxのものです。WIndowsの場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。
+Android SDK には<a href="https://developer.android.com/studio/command-line/" target="_blank">便利なコマンドラインツール</a>が付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOS と Linux のものです。WIndows の場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。
 
 `~/.bashrc`もしくは`~/.bash_profile`、または同様のシェル起動スクリプトを、次のように変更します。s:
 
@@ -67,30 +74,30 @@ Android SDKには<a href="https://developer.android.com/studio/command-line/" ta
    For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools<version>` must also be added to `PATH`.
    :::
 
-### Android仮想デバイスの作成
+### Android 仮想デバイスの作成
 
-Android仮想デバイス（AVD）は、AndroidエミュレータがAndroid OSを実行するために利用する設計図です。以下のドキュメントはAndroidエミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、<a href="https://developer.android.com/studio/run/managing-avds" target="_blank">Android のドキュメント</a>を参照ください。
+Android 仮想デバイス（AVD）は、Android エミュレータが Android OS を実行するために利用する設計図です。以下のドキュメントは Android エミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、<a href="https://developer.android.com/studio/run/managing-avds" target="_blank">Android のドキュメント</a>を参照ください。
 
 AVDs are managed with the Virtual Device Manager. In the Android Studio welcome screen, the context menu at the top right, then **Virtual Device Manager**. The Virtual Device Manager can also be opened inside Android projects in the **Tools** &raquo; **Device Manager** menu.
 
 ![AVD Setup](/img/installation/android-studio-avd-setup.png)
 
-**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play servicesを選択してください。Androidのバージョンについては、Androidのバージョン履歴を参照してください。
+**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play services を選択してください。Android のバージョンについては、Android のバージョン履歴を参照してください。
 
-AVDが作成されたら、AndroidエミュレータでAVDを起動します。エミュレータを実行し続けることは、Android用のIonicアプリケーションを開発しながら検出を確実にするための最良の方法です。
+AVD が作成されたら、Android エミュレータで AVD を起動します。エミュレータを実行し続けることは、Android 用の Ionic アプリケーションを開発しながら検出を確実にするための最良の方法です。
 
 <figure className="device">
   <img alt="Android Emulator Booting" src="/docs/img/installation/android-emulator-booting.png" />
 </figure>
 
-### Androidデバイスを設定する
+### Android デバイスを設定する
 
-Androidハードウェアの実物は、Ionicアプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用にAndroidデバイスを設定する簡単な方法です。詳細な手順と情報については、<a href="https://developer.android.com/studio/run/device" target="_blank">the Android documentation</a>を参照してください。
+Android ハードウェアの実物は、Ionic アプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用に Android デバイスを設定する簡単な方法です。詳細な手順と情報については、<a href="https://developer.android.com/studio/run/device" target="_blank">the Android documentation</a>を参照してください。
 
-1. デバイスのUSBデバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順については<a href="https://developer.android.com/studio/debug/dev-options" target="_blank">the Android documentation</a>をご確認ください。
-1. デバイスにコンピュータへの接続許可があることを確認してください。macOSの場合、追加の設定は不要です。Windowsの場合は<a href="https://developer.android.com/studio/run/oem-usb" target="_blank">OEM USB drivers</a>をインストールしてください。
+1. デバイスの USB デバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順については<a href="https://developer.android.com/studio/debug/dev-options" target="_blank">the Android documentation</a>をご確認ください。
+1. デバイスにコンピュータへの接続許可があることを確認してください。macOS の場合、追加の設定は不要です。Windows の場合は<a href="https://developer.android.com/studio/run/oem-usb" target="_blank">OEM USB drivers</a>をインストールしてください。
 
-USBケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
+USB ケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
 
 ```shell
 adb devices
@@ -100,7 +107,7 @@ adb devices
 
 ## Cordova Setup
 
-Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。
+Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。
 
 ### Java
 
@@ -123,7 +130,7 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th
 
 ## プロジェクトのセットアップ
 
-アプリをAndroidシミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
+アプリを Android シミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
 
 1. **Perform an Ionic build, if you haven't already.**
 
@@ -133,13 +140,13 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th
 
 2. **Generate the native project, if it does not already exist.**
 
-   Capacitorでは以下の実行をサポートしています:
+   Capacitor では以下の実行をサポートしています:
 
    ```shell
    $ ionic capacitor add android
    ```
 
-   Cordovaでは以下のように実行します。
+   Cordova では以下のように実行します。
 
    ```shell
    $ ionic cordova prepare android
@@ -149,19 +156,19 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th
 
 Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId` プロパティを修正します。
 
-Cordovaの場合は、`config.xml`ファイルを開き、ルート要素である `<widget>` の `id` 属性を変更します。詳しくは、[Cordovaのドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。
+Cordova の場合は、`config.xml`ファイルを開き、ルート要素である `<widget>` の `id` 属性を変更します。詳しくは、[Cordova のドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。
 
-## Capacitorでの実行
+## Capacitor での実行
 
-CapacitorはAndroid Studioを使って、シミュレータやデバイスへのアプリの構築と実行を行います。
+Capacitor は Android Studio を使って、シミュレータやデバイスへのアプリの構築と実行を行います。
 
-1. **Ionicアプリを開発してネイティブプロジェクトに同期します**
+1. **Ionic アプリを開発してネイティブプロジェクトに同期します**
 
-  重要な変更が行われるたびに、変更がAndroidシミュレータやデバイスに表示されるようにするには、WebアセットにIonicアプリを組み込む必要があります。次に、Webアセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスはIonic CLIコマンド1つで簡単になります。
+重要な変更が行われるたびに、変更が Android シミュレータやデバイスに表示されるようにするには、Web アセットに Ionic アプリを組み込む必要があります。次に、Web アセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスは Ionic CLI コマンド 1 つで簡単になります。
 
-   ```shell
-   $ ionic capacitor copy android
-   ```
+```shell
+$ ionic capacitor copy android
+```
 
 2. **Run the app on a simulator or device.**
 
@@ -197,13 +204,13 @@ ionic cordova run android -l
 
 これで、アプリのソースファイルに変更があった場合、Web アセットが再構築され、再度デプロイしなくてもシミュレータやデバイスに変更が反映されるようになりました。
 
-## Androidアプリのデバッグ
+## Android アプリのデバッグ
 
-アプリがAndroidデバイスやエミュレータ上で動作するようになったら、 Chrome DevToolsを使ってデバッグすることができます。
+アプリが Android デバイスやエミュレータ上で動作するようになったら、 Chrome DevTools を使ってデバッグすることができます。
 
-### Chrome DevToolsの利用
+### Chrome DevTools の利用
 
-Chromeは、AndroidシミュレータとデバイスのためのWeb開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間にChromeで `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。
+Chrome は、Android シミュレータとデバイスのための Web 開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間に Chrome で `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。
 
 :::note
 アプリケーションがデバイスまたはシミュレータで実行されていることを確認してください。実行されていない場合は、リストに表示されません。
@@ -211,9 +218,9 @@ Chromeは、AndroidシミュレータとデバイスのためのWeb開発者ツ
 
 ![Android Chrome DevTools](/img/running/android-chrome-devtools.png)
 
-### Native Logsの表示
+### Native Logs の表示
 
-Android Studioで実行している場合、ネイティブログは **Logcat** に表示されます。
+Android Studio で実行している場合、ネイティブログは **Logcat** に表示されます。
 
 :::note
 **Logcat** ウインドウが非表示の場合は、 **View** &raquo; **Tool Windows** &raquo; **Logcat** から有効にします。
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index 3ebce250156..d29a604d3f9 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -13,13 +13,13 @@ import TabItem from '@theme/TabItem';
   />
 </head>
 
-ハードウェアの戻るボタンは、ほとんどのAndroidデバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。
+ハードウェアの戻るボタンは、ほとんどの Android デバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。
 
 :::note
-ハードウェアの 「戻る」 ボタンとはAndroidデバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Androidデバイスにのみ適用されます。
+ハードウェアの 「戻る」 ボタンとは Android デバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Android デバイスにのみ適用されます。
 :::
 
-## CapacitorとCordovaにおける戻るボタン
+## Capacitor と Cordova における戻るボタン
 
 :::note
 The `@capacitor/app` package must be installed in Capacitor apps to use the hardware back button.
@@ -27,18 +27,18 @@ The `@capacitor/app` package must be installed in Capacitor apps to use the hard
 
 When running in a Capacitor or Cordova application, Ionic Framework will emit an `ionBackButton` event when a user presses the hardware back button.
 
-`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに1つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に1つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。
+`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに 1 つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に 1 つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。
 
 複数のハンドラを起動したい場合があります。各ハンドラのコールバックは、フレームワークに次のハンドラを呼び出すように指示するために使用できるパラメーターとして関数を渡します。
 
 ## ブラウザにおける戻るボタン
 
-モバイルブラウザーやPWAでアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、CapacitorとCordovaが、通常のWebブラウザでは公開されないデバイスAPIを利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。
+モバイルブラウザーや PWA でアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、Capacitor と Cordova が、通常の Web ブラウザでは公開されないデバイス API を利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。
 
-ハードウェアバックボタンを完全にサポートするには、CapacitorまたはCordovaの使用をお勧めします。
+ハードウェアバックボタンを完全にサポートするには、Capacitor または Cordova の使用をお勧めします。
 
 :::note
-ブラウザやPWAで実行してる時、 `ionBackButton` イベントは実行されません。
+ブラウザや PWA で実行してる時、 `ionBackButton` イベントは実行されません。
 :::
 
 ## Basic Usage
@@ -109,7 +109,7 @@ export default {
 </Tabs>
 ````
 
-この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を10に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が10未満のハンドラは呼び出されません。優先度が10より大きいハンドラが最初に呼び出されます。
+この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を 10 に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が 10 未満のハンドラは呼び出されません。優先度が 10 より大きいハンドラが最初に呼び出されます。
 
 同じ優先順位値を持つハンドラが存在する場合は、最後に登録されたハンドラが呼び出されます。詳細は、 [Handlers with the Same Priorities](#handlers-with-the-same-priorities) を参照してください。
 
@@ -207,11 +207,11 @@ export default {
 </Tabs>
 ````
 
-この例は、次のハンドラを起動するようにIonic Frameworkに指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。
+この例は、次のハンドラを起動するように Ionic Framework に指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。
 
 ## 同じ優先順位のハンドラ
 
-内部的には、Ionic Frameworkはハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handlerが、最初に呼び出されるハンドラになります。
+内部的には、Ionic Framework はハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handler が、最初に呼び出されるハンドラになります。
 
 ```javascript
 document.addEventListener('ionBackButton', (ev) => {
@@ -231,11 +231,11 @@ document.addEventListener('ionBackButton', (ev) => {
 });
 ```
 
-上の例では、ハンドラAとBの両方の優先度は10です。ハンドラBは最後に登録されているため、Ionic FrameworkはハンドラAを呼び出す前にハンドラBを呼び出します。
+上の例では、ハンドラ A と B の両方の優先度は 10 です。ハンドラ B は最後に登録されているため、Ionic Framework はハンドラ A を呼び出す前にハンドラ B を呼び出します。
 
 ## アプリの終了
 
-場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordovaが提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。
+場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordova が提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。
 
 ````mdx-code-block
 <Tabs
@@ -332,11 +332,11 @@ export default {
 
 この例は、ユーザがハードウェアの戻るボタンを押したときにアプリケーションが終了し、ナビゲーションスタックに何も残っていないことを示しています。アプリを終了する前に確認ダイアログを表示することも可能です。
 
-アプリケーションを終了する前に、ユーザーがルート・ページにあるかどうかを確認することをお勧めします。開発者は、Ionic Angularの `IonRouterOutlet` で`canGoBack` 、 Ionic ReactおよびIonic Vueの `IonRouter` で `canGoBack` メソッドを使用できます。
+アプリケーションを終了する前に、ユーザーがルート・ページにあるかどうかを確認することをお勧めします。開発者は、Ionic Angular の `IonRouterOutlet` で`canGoBack` 、 Ionic React および Ionic Vue の `IonRouter` で `canGoBack` メソッドを使用できます。
 
 ## 内部フレームワークハンドラ
 
-次の表は、Ionic Frameworkが使用するすべての内部ハードウェアバックボタンイベントハンドラの一覧です。 `Propagates` 列は、その特定のハンドラがIonic Frameworkに次の戻るボタンハンドラを呼び出すように指示するかどうかを示します。
+次の表は、Ionic Framework が使用するすべての内部ハードウェアバックボタンイベントハンドラの一覧です。 `Propagates` 列は、その特定のハンドラが Ionic Framework に次の戻るボタンハンドラを呼び出すように指示するかどうかを示します。
 
 | Handler    | Priority | Propagates | Description                                                                                                                 |
 | ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
diff --git a/docs/developing/ios.md b/docs/developing/ios.md
index 0980197d07b..78cf2f15ef1 100644
--- a/docs/developing/ios.md
+++ b/docs/developing/ios.md
@@ -12,48 +12,48 @@ skipIntros: true
   />
 </head>
 
-このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOSシミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。iOSアプリは、XcodeがインストールされているmacOS上でのみ開発できます。
+このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOS シミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。iOS アプリは、Xcode がインストールされている macOS 上でのみ開発できます。
 
-iOS上でIonicアプリを実行するためのワークフローは2つあります:
+iOS 上で Ionic アプリを実行するためのワークフローは 2 つあります:
 
-* [Xcodeで実行](#running-with-xcode)
-* [Ionic CLIでの実行](#running-with-the-ionic-cli)
+- [Xcode で実行](#running-with-xcode)
+- [Ionic CLI での実行](#running-with-the-ionic-cli)
 
-Xcodeアプローチの方が一般的に安定していますが、Ionic CLIを使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。
+Xcode アプローチの方が一般的に安定していますが、Ionic CLI を使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。
 
-## Xcodeのセットアップ
+## Xcode のセットアップ
 
-[Xcode](https://developer.apple.com/xcode/) はネイティブなiOSアプリを作るためのIDEです。これにはiOS SDKとXcodeコマンドラインツールが含まれている。XcodeはAppleアカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Storeからインストールすることもできます。
+[Xcode](https://developer.apple.com/xcode/) はネイティブな iOS アプリを作るための IDE です。これには iOS SDK と Xcode コマンドラインツールが含まれている。Xcode は Apple アカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Store からインストールすることもできます。
 
-Xcodeをインストールしたら、使用するコマンドラインツールが選択されていることを確認します:
+Xcode をインストールしたら、使用するコマンドラインツールが選択されていることを確認します:
 
 ```shell
 xcode-select --install
 ```
 
-### Development Teamの設定
+### Development Team の設定
 
-すべてのiOSアプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcodeは自動コード署名によってこれを簡単にしてくれます。唯一の前提条件はApple IDです。
+すべての iOS アプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcode は自動コード署名によってこれを簡単にしてくれます。唯一の前提条件は Apple ID です。
 
-Xcodeを開き、 **Xcode** &raquo; **Preferences** &raquo; **Accounts** に移動します。Apple IDが表示されない場合は、追加します。ログインすると、Personal TeamがApple IDのチームリストに表示されます。
+Xcode を開き、 **Xcode** &raquo; **Preferences** &raquo; **Accounts** に移動します。Apple ID が表示されない場合は、追加します。ログインすると、Personal Team が Apple ID のチームリストに表示されます。
 
 ![Xcode Accounts](/img/installation/ios-xcode-accounts.png)
 
-### iOS Simulatorの作成
+### iOS Simulator の作成
 
-iOSシミュレータは、Mac上のiOSデバイスをエミュレートする。次のドキュメントは、iOSシミュレータを簡単にセットアップする方法です。詳細については、 [Appleのドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。
+iOS シミュレータは、Mac 上の iOS デバイスをエミュレートする。次のドキュメントは、iOS シミュレータを簡単にセットアップする方法です。詳細については、 [Apple のドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。
 
-Xcodeを開き、**Window** &raquo; **Devices and Simulators** に移動します。iPhone 11シミュレータが存在しない場合は作成します。
+Xcode を開き、**Window** &raquo; **Devices and Simulators** に移動します。iPhone 11 シミュレータが存在しない場合は作成します。
 
 ![iOS Simulators](/img/installation/ios-xcode-simulators-setup.png)
 
 ## Cordova のセットアップ
 
-Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。
+Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。
 
 ### ios-sim & ios-deploy
 
- [`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。
+[`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中に iOS シミュレータと iOS デバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。
 
 ```shell
 $ npm install -g ios-sim
@@ -62,17 +62,17 @@ $ brew install ios-deploy
 
 ## プロジェクト設定
 
-アプリをiOSシミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。
+アプリを iOS シミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。
 
 1. **ネイティブのプロジェクトが存在しない場合は、以下を実行します。**
 
-   Capacitorの場合は、以下を実行します。
+   Capacitor の場合は、以下を実行します。
 
    ```shell
    $ ionic capacitor add ios
    ```
 
-   Cordovaの場合は、以下を実行します。
+   Cordova の場合は、以下を実行します。
 
    ```shell
    $ ionic cordova prepare ios
@@ -80,76 +80,76 @@ $ brew install ios-deploy
 
    1. **[Package ID](/reference/glossary.md#package-id)を設定**
 
-       Capacitorの場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。
+      Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。
 
-       Cordovaの場合は、`config.xml`ファイルを開き、`id`を変更し`<widget>`でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。
+      Cordova の場合は、`config.xml`ファイルを開き、`id`を変更し`<widget>`でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。
 
    1. **<b>Xcode</b>でプロジェクトを開きます**
 
-       Capacitorの場合は、次のコマンドを実行してXcodeでアプリを開きます。
+      Capacitor の場合は、次のコマンドを実行して Xcode でアプリを開きます。
 
    ```shell
    $ ionic capacitor open ios
    ```
 
-    Cordovaの場合は、Xcodeを起動したあと、**File** &raquo; **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。
+   Cordova の場合は、Xcode を起動したあと、**File** &raquo; **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。
 
-1. **<b>Projectのナビゲーション</b>から、プロジェクトのrootにあるproject editorを開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。**
+1. **<b>Project のナビゲーション</b>から、プロジェクトの root にある project editor を開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。**
 
    ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
 
-1. **同じproject editorの<b>Signing</b>で、セクションで、<b>Automatically manage signing</b>が有効になっていることを確認します。** 次に、Development Teamを選択してください。Development Teamを選択すると、Xcodeは自動的にプロビジョニングと署名を準備しようとします。
+1. **同じ project editor の<b>Signing</b>で、セクションで、<b>Automatically manage signing</b>が有効になっていることを確認します。** 次に、Development Team を選択してください。Development Team を選択すると、Xcode は自動的にプロビジョニングと署名を準備しようとします。
 
    ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
 
-## Xcodeで実行する
+## Xcode で実行する
 
-このワークフローでは、Xcodeは一般的なコンパイルと署名の問題を自動的に修正できます。
+このワークフローでは、Xcode は一般的なコンパイルと署名の問題を自動的に修正できます。
 
-1. **Ionicアプリを開発し、それをネイティブプロジェクトと同期させます。**
+1. **Ionic アプリを開発し、それをネイティブプロジェクトと同期させます。**
 
-    変更が検知がある度に、iOSシミュレータやデバイスが変更を検知するより前に、IonicアプリをWebアセットにビルドする必要があります。その後、Webアセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスはIonic CLIコマンドひとつで簡単にできます。
+   変更が検知がある度に、iOS シミュレータやデバイスが変更を検知するより前に、Ionic アプリを Web アセットにビルドする必要があります。その後、Web アセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスは Ionic CLI コマンドひとつで簡単にできます。
 
-    Capacitorの場合は、以下を実行します。
+   Capacitor の場合は、以下を実行します。
 
    ```shell
    $ ionic capacitor copy ios
    $ ionic capacitor update
    ```
 
-   Cordovaの場合は、以下を実行します。
+   Cordova の場合は、以下を実行します。
 
    ```shell
    $ ionic cordova prepare ios
    ```
 
-1. **Xcodeで、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。**
+1. **Xcode で、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。**
 
    ![Xcode Play Button Area](/img/running/ios-xcode-play-button-area.png)
 
-## Ionic CLIを使用して実行する
+## Ionic CLI を使用して実行する
 
-Ionic CLIは、コマンドひとつで、Ionicアプリを作成、コピーし、iOSシミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。
+Ionic CLI は、コマンドひとつで、Ionic アプリを作成、コピーし、iOS シミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。
 
 ライブリロードを使うと、アプリのソースファイルに加えられた変更がウェブアセットの再構築を引き起こし、その変更は再デプロイすることなくシミュレータやデバイスに反映されます。
 
 :::caution
-iOSデバイスでは、デバイスとコンピュータが同じWi-Fiネットワーク上にある必要があります。デバイスが接続できるように、devサーバーの外部URLも必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。
+iOS デバイスでは、デバイスとコンピュータが同じ Wi-Fi ネットワーク上にある必要があります。デバイスが接続できるように、dev サーバーの外部 URL も必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。
 :::
 
-### Capacitorを使ったライブリロード
+### Capacitor を使ったライブリロード
 
-CapacitorにはXcodeを利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLIで、ライブリロードサーバを起動し、Capacitorを設定して1つのコマンドで使用できます。
+Capacitor には Xcode を利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLI で、ライブリロードサーバを起動し、Capacitor を設定して 1 つのコマンドで使用できます。
 
-以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcodeの再生ボタンをクリックします:
+以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcode の再生ボタンをクリックします:
 
 ```shell
 ionic capacitor run ios -l --external
 ```
 
-### Cordovaを使ったライブリロード
+### Cordova を使ったライブリロード
 
-Cordovaはネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。
+Cordova はネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。
 
 ライブリロードサーバを起動し、アプリをビルドしてデプロイするには、以下を実行します:
 
@@ -157,25 +157,25 @@ Cordovaはネイティブプロジェクトをプログラムでビルドして
 ionic cordova run ios -l --external
 ```
 
-## iOSアプリのデバッグ
+## iOS アプリのデバッグ
 
-アプリがiOSデバイスやシミュレーター上で動くようになったら、Safariでデバッグできます。
+アプリが iOS デバイスやシミュレーター上で動くようになったら、Safari でデバッグできます。
 
-### Safari Web Inspectorを使う
+### Safari Web Inspector を使う
 
-SafariはiOSシミュレータとデバイスのWeb Inspectorをサポートしています。Developメニューを開いてシミュレータまたはデバイスを選択し、Ionic Appを選択してWeb Inspectorを開きます。
+Safari は iOS シミュレータとデバイスの Web Inspector をサポートしています。Develop メニューを開いてシミュレータまたはデバイスを選択し、Ionic App を選択して Web Inspector を開きます。
 
 :::note
-*Develop** メニューが非表示になってる場合は、**Safari** &raquo; **Preferences** &raquo; **Advanced** &raquo; **Show Develop menu in menu bar** から有効にします。
+\*Develop** メニューが非表示になってる場合は、**Safari** &raquo; **Preferences** &raquo; **Advanced** &raquo; **Show Develop menu in menu bar\*\* から有効にします。
 
-アプリがリストにない場合は、 **Settings** &raquo; **Safari** &raquo; **Advanced** &raquo; **Web Inspector** からデバイスのWeb Inspectorを有効にする必要があります。
+アプリがリストにない場合は、 **Settings** &raquo; **Safari** &raquo; **Advanced** &raquo; **Web Inspector** からデバイスの Web Inspector を有効にする必要があります。
 :::
 
 ![Safari Web Inspector](/img/running/ios-safari-web-inspector-timelines.png)
 
 ## ネイティブログの表示
 
-Xcodeで実行している場合、ネイティブログはXcodeの **Console** にあります。
+Xcode で実行している場合、ネイティブログは Xcode の **Console** にあります。
 
 :::note
 **Console** が表示されない場合, **View** &raquo; **Debug Area** &raquo; **Activate Console**を有効化してください。
diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md
index 3e5ea1a3c22..1125091b1da 100644
--- a/docs/developing/keyboard.md
+++ b/docs/developing/keyboard.md
@@ -14,16 +14,16 @@ import TabItem from '@theme/TabItem';
   />
 </head>
 
-開発者がモバイルアプリやPWAを開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。
+開発者がモバイルアプリや PWA を開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。
 
 ## inputmode
 
-開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他のemail入力の最適化も行われます。
+開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他の email 入力の最適化も行われます。
 
-`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。
+`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。
 
-特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、emailの入力では、 `inputmode.` を指定するのではなく、`type="email"`
-を使用する必要があります。これは、入力されるデータが常にemailの形式になるためです。一方、inputがemailまたはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。
+特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、email の入力では、 `inputmode.` を指定するのではなく、`type="email"`
+を使用する必要があります。これは、入力されるデータが常に email の形式になるためです。一方、input が email またはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。
 
 使用可能な値のリストについては、<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode" target="_blank" rel="noreferrer">inputmode Documentation</a>を参照してください。
 
@@ -102,14 +102,14 @@ import TabItem from '@theme/TabItem';
 <Codepen user="ionic" slug="abvJVVv" height="400" />
 
 :::note
-`inputmode` 属性はChrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
+`inputmode` 属性は Chrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
 :::
 
 ## enterkeyhint
 
-`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者はinputが `enterkeyhint="search"` であることを確認する必要があります。
+`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者は input が `enterkeyhint="search"` であることを確認する必要があります。
 
-`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。
+`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。
 
 使用可能な値のリストについては、 <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute" target="_blank" rel="noreferrer">enterkeyhint Standard</a> を参照してください。
 
@@ -173,23 +173,23 @@ import TabItem from '@theme/TabItem';
 
 ## ダークモード
 
-デフォルトでは、キーボードテーマはOSによって決定されます。たとえば、iOSでダークモードが有効になっている場合、アプリケーションのCSSにダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。
+デフォルトでは、キーボードテーマは OS によって決定されます。たとえば、iOS でダークモードが有効になっている場合、アプリケーションの CSS にダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。
 
-モバイルWebブラウザやPWAでアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。
+モバイル Web ブラウザや PWA でアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。
 
 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>.
 
 ## アクセサリバーを非表示にする
 
-ウェブベースのアプリケーションを実行すると、iOSはキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。
+ウェブベースのアプリケーションを実行すると、iOS はキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。
 
-モバイルWebブラウザやPWAでアプリを実行する場合、アクセサリバーを非表示にする方法はありません。
+モバイル Web ブラウザや PWA でアプリを実行する場合、アクセサリバーを非表示にする方法はありません。
 
 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>.
 
 ## キーボードのライフサイクルイベント
 
-スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。CapacitorとCordovaアプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントをListenします。モバイルブラウザやPWAで動作するアプリでは、サポートされていればVisual Viewport APIを使用することができる。Ionic Frameworkはこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。
+スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。Capacitor と Cordova アプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントを Listen します。モバイルブラウザや PWA で動作するアプリでは、サポートされていれば Visual Viewport API を使用することができる。Ionic Framework はこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。
 
 ### Usage
 
@@ -269,5 +269,5 @@ watch(keyboardHeight, () => {
 ````
 
 :::note
-モバイルWebブラウザやPWAで動作するアプリでは、 Keyboard Lifecycle EventsはChrome 62以降とiOS Safari 13.0以降でのみサポートされています。
+モバイル Web ブラウザや PWA で動作するアプリでは、 Keyboard Lifecycle Events は Chrome 62 以降と iOS Safari 13.0 以降でのみサポートされています。
 :::
diff --git a/docs/developing/previewing.md b/docs/developing/previewing.md
index a2f494f10e1..205f6873632 100644
--- a/docs/developing/previewing.md
+++ b/docs/developing/previewing.md
@@ -13,12 +13,12 @@ title: プレビュー
 ネイティブ機能のテストには、ターゲットとするプラットフォームやニーズに応じて、さまざまなオプションがあります。
 
 - Web ブラウザでローカルに実行する (ネイティブ機能については [Platform Detection](../core-concepts/cross-platform.md) を使用します)
-- [iOSへのデプロイ](ios.md)
-- [Androidへのデプロイ](android.md)
+- [iOS へのデプロイ](ios.md)
+- [Android へのデプロイ](android.md)
 
 ## ウェブブラウザでローカルに実行する
 
-Ionic の最も強力な機能の1つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefoxの開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。
+Ionic の最も強力な機能の 1 つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefox の開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。
 
 これを行うには、プロジェクトのディレクトリで、コマンドラインから `ionic serve` を実行します。
 
@@ -47,7 +47,7 @@ $ ionic serve
 
 ### Chrome
 
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linuxでは`Ctrl+Shift+I`、Macでは`Cmd+Opt+I`を押して、Chrome開発者ツールを開きます。
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では`Ctrl+Shift+I`、Mac では`Cmd+Opt+I`を押して、Chrome 開発者ツールを開きます。
 
 <img src="/docs/img/developing/previewing/chrome-dev-tools.png" alt="Chrome Dev Tools" />
 
@@ -59,11 +59,11 @@ $ ionic serve
 
 :::note
 
-前提条件：Safariの詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。
+前提条件：Safari の詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。
 
 :::
 
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safariの**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safari の**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。
 
 <img src="/docs/img/developing/previewing/safari-responsive-design-mode.png" alt="Safari Responsive Design Mode" />
 
@@ -73,7 +73,7 @@ $ ionic serve
 
 ### Firefox
 
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/LinuxではCtrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefoxの開発者ツールを開きます。
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では Ctrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefox の開発者ツールを開きます。
 
 <img src="/docs/img/developing/previewing/firefox-responsive-design-mode.png" alt="Firefox Responsive Design Mode" />
 
diff --git a/docs/developing/scaffolding.md b/docs/developing/scaffolding.md
index 71e2d2e70a1..4b653c2eebf 100644
--- a/docs/developing/scaffolding.md
+++ b/docs/developing/scaffolding.md
@@ -10,7 +10,7 @@ title: 基本
   />
 </head>
 
-Ionic CLIでアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。
+Ionic CLI でアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。
 
 ## プロジェクト構成
 
@@ -62,7 +62,7 @@ $ ionic generate
   guard
 ```
 
-選択後、Ionic CLIは名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。
+選択後、Ionic CLI は名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。
 
 :::note
 `portfolio/intro` のような任意のレベルのネストが可能です。例えば、`ionic g component "portfolio/intro/About Me"`とすることで、コンポーネントを簡単にページにスコープすることができます。
@@ -88,8 +88,8 @@ UPDATE src/app/app-routing.module.ts (475 bytes)
 [OK] Generated page!
 ```
 
-Ionic CLIは、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLIがフードの下で使用されます。
+Ionic CLI は、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLI がフードの下で使用されます。
 
-新しいページ用のファイルとディレクトリを作成した後、CLIは新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。
+新しいページ用のファイルとディレクトリを作成した後、CLI は新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。
 
 詳細については、コマンドラインから `ionic g --help` を実行するか、`ionic generate` の [the documentation](../cli/commands/generate.md) を参照してください。
diff --git a/docs/developing/starting.md b/docs/developing/starting.md
index 878d4b41995..0897de64e2e 100644
--- a/docs/developing/starting.md
+++ b/docs/developing/starting.md
@@ -11,7 +11,7 @@ sidebar_label: はじめ方
   />
 </head>
 
-新しいIonicアプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとはCLIが処理してくれる。
+新しい Ionic アプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとは CLI が処理してくれる。
 
 ```shell-session
 $ ionic start
@@ -25,7 +25,7 @@ the first argument to ionic start.
 ? Project name: █
 ```
 
-Ionic CLIでは、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。
+Ionic CLI では、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。
 
 ```shell-session
 $ ionic start myApp tabs
@@ -33,7 +33,7 @@ $ ionic start myApp tabs
 
 ここでは、 `myApp` がプロジェクト名、 `tabs` がスターターテンプレート、そしてプロジェクトの種類は `angular` です。
 
-利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3つのテンプレートが利用可能です。
+利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3 つのテンプレートが利用可能です。
 
 - `tabs`: タブベースのレイアウト
 - `sidemenu`: サイドメニューレイアウト
diff --git a/docs/developing/tips.md b/docs/developing/tips.md
index 23862952c0f..141b2ae509a 100644
--- a/docs/developing/tips.md
+++ b/docs/developing/tips.md
@@ -12,45 +12,45 @@ title: 開発者向けのヒント
 
 ## Permission Errors の解決
 
-パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するようにnpmを設定する必要があります。
+パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するように npm を設定する必要があります。
 
 :::note
-`sudo` とnpmの併用は、さらなる問題を引き起こす可能性があるため、推奨されません。
+`sudo` と npm の併用は、さらなる問題を引き起こす可能性があるため、推奨されません。
 :::
 
-このガイドには、パーミッションの問題を解決するための2つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。
+このガイドには、パーミッションの問題を解決するための 2 つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。
 
 ### Option 1
 
-権限の問題を回避する最善の方法は、 node version manager を使用してNodeJSとnpmを再インストールすることです。
+権限の問題を回避する最善の方法は、 node version manager を使用して NodeJS と npm を再インストールすることです。
 
-このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、  [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) を参照してください。Windowsの追加オプションと手順については、npmのドキュメントを参照してください。
+このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、 [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) を参照してください。Windows の追加オプションと手順については、npm のドキュメントを参照してください。
 
-1. nvmのインストール
+1. nvm のインストール
 
    ```shell
    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
    ```
 
-1. 新しい端末はnvmを使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。
+1. 新しい端末は nvm を使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。
 
    ```shell
    $ command -v nvm
    ```
 
-1. NodeJSの最新のLTSリリースをダウンロードしてインストールするには、次のコマンドを実行します:
+1. NodeJS の最新の LTS リリースをダウンロードしてインストールするには、次のコマンドを実行します:
 
    ```shell
    $ nvm install --lts
    ```
 
-1. 新しくインストールしたNodeJSをデフォルト環境として設定します:
+1. 新しくインストールした NodeJS をデフォルト環境として設定します:
 
    ```shell
    $ nvm alias default lts/*
    ```
 
-1. 新しい端末はnvmコントロールのNodeJSを使うようになりました:
+1. 新しい端末は nvm コントロールの NodeJS を使うようになりました:
 
    ```shell
    $ node -v  # will print the version installed above
@@ -65,7 +65,7 @@ title: 開発者向けのヒント
   <em>Windowsでは利用できません</em>
 </small>
 
-npmのディレクトリの所有者を現在のユーザに変更します:
+npm のディレクトリの所有者を現在のユーザに変更します:
 
 ```shell
 $ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
@@ -77,7 +77,7 @@ $ sudo chown -R $(whoami) ~/.npm ~/.npmrc
 
 ## 依存モジュールの更新
 
-[npm](https://www.npmjs.com/) dependencyをアップデートするためには、`<package-name>` をアップデートしたいパッケージ名に変更して以下を実行します:
+[npm](https://www.npmjs.com/) dependency をアップデートするためには、`<package-name>` をアップデートしたいパッケージ名に変更して以下を実行します:
 
 ```shell
 npm install <package-name>@<version|latest> --save
@@ -112,11 +112,11 @@ function myBrokenFunction() {
 }
 ```
 
-アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScriptを1行ずつ実行し、関数が正確にどこで中断するかを調べることができます。
+アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScript を 1 行ずつ実行し、関数が正確にどこで中断するかを調べることができます。
 
 ## モードの変更
 
-デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動しているURL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URLはこうなります: `http://localhost:8100/?ionic:mode=ios`
+デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動している URL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URL はこうなります: `http://localhost:8100/?ionic:mode=ios`
 
 :::note
 しかし、どのプラットフォームが現在使用されているかをブラウザがどのように認識するか、ということは変わらないでしょう。プラットフォームはデバイスの検出とユーザーエージェントの検査によって決定されます。そのため、プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。これを行うには、Chrome DevTools を開き、<kbd>Ctrl+Shift+i</kbd>(Mac では <kbd>Cmd+Option+I</kbd>) でデバイスのモードをオンに切り替えでください。デバイスモードの切り替えは、<kbd>Ctrl+Shift+M</kbd>(<kbd>Cmd+Option+M</kbd> on Mac)で行います。
@@ -148,6 +148,6 @@ Xcode を開き、`../path-to-app/platforms/ios/myApp.xcodeproj` を開きます
 
 ## Genymotion Android エミュレーターを使用する
 
-Android SDKには標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。
+Android SDK には標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。
 
-[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPSやカメラなどのネイティブ機能へのアクセスを許可します。
+[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPS やカメラなどのネイティブ機能へのアクセスを許可します。
diff --git a/docs/index.md b/docs/index.md
index ed09b6446ab..10083ff549a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,9 +22,9 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS、JavaScriptなどのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
+Ionic Framework はオープンソースの UI ツールキットで、HTML、CSS、JavaScript などのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
 
-[Ionicのインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。
+[Ionic のインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。
 
 <intro-end />
 
@@ -58,62 +58,62 @@ Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS
 
 ## 概要
 
-Ionicは、アプリのフロントエンドのUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionicについてもっと知りたい方向けに、<a href="https://youtu.be/p3AN3igqiRc" target="_blank">私たちはビデオを作成しました</a>。ここから、基本的な使い方を学ぶことができます。
+Ionic は、アプリのフロントエンドの UX と UI インタラクション（UI コントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionic についてもっと知りたい方向けに、<a href="https://youtu.be/p3AN3igqiRc" target="_blank">私たちはビデオを作成しました</a>。ここから、基本的な使い方を学ぶことができます。
 
 ### どこでもひとつのコードで
 
-Ionicは、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionicアプリはすべてのデバイス上で適切な外観と操作感を提供します。
+Ionic は、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionic アプリはすべてのデバイス上で適切な外観と操作感を提供します。
 
 ### パフォーマンスにフォーカス
 
-Ionicは、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。
+Ionic は、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。
 
 ### クリーンでシンプル、機能的なデザイン
 
-Ionicは、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。
+Ionic は、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。
 
-### ネイティブおよびWebに最適化
+### ネイティブおよび Web に最適化
 
-IonicはネイティブアプリケーションのUIガイドラインをエミュレートし、ネイティブSDKを使用して、ネイティブアプリのUI標準とデバイス機能を、オープンWebの完全なパワーと柔軟性とともに実現します。IonicはCapacitor(またはCordova)を使ってネイティブにデプロイするか、Progressive Web Appとしてブラウザで実行します。
+Ionic はネイティブアプリケーションの UI ガイドラインをエミュレートし、ネイティブ SDK を使用して、ネイティブアプリの UI 標準とデバイス機能を、オープン Web の完全なパワーと柔軟性とともに実現します。Ionic は Capacitor(または Cordova)を使ってネイティブにデプロイするか、Progressive Web App としてブラウザで実行します。
 
 ## ゴール
 
 ### クロスプラットフォーム
 
-ネイティブのiOS、Android、デスクトップ、Webなど、複数のプラットフォームで動作するアプリをProgressive Web Appとして、すべて1つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。
+ネイティブの iOS、Android、デスクトップ、Web など、複数のプラットフォームで動作するアプリを Progressive Web App として、すべて 1 つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。
 
-### Web標準
+### Web 標準
 
-Ionic Frameworkは、Custom ElementsやShadow DOMなどの最新のWeb APIを使用して、信頼性の高い [Web標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、およびJavaScriptの上に構築されています。このため、Ionicコンポーネントは安定したAPIを備えており、単一のプラットフォーム・ベンダーの思い付きではありません。
+Ionic Framework は、Custom Elements や Shadow DOM などの最新の Web API を使用して、信頼性の高い [Web 標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、および JavaScript の上に構築されています。このため、Ionic コンポーネントは安定した API を備えており、単一のプラットフォーム・ベンダーの思い付きではありません。
 
 ### 美しいデザイン
 
-クリーンでシンプル、機能的。Ionic Frameworkは全てのプラットフォームで動作し、美しく表示されるように設計されています。
+クリーンでシンプル、機能的。Ionic Framework は全てのプラットフォームで動作し、美しく表示されるように設計されています。
 あらかじめデザインされたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、すばらしい(まだ拡張可能な)基本テーマから始めます。
 
 ### シンプル
 
-Ionic Frameworkはシンプルさを念頭に置いて構築されているので、Ionicアプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。
+Ionic Framework はシンプルさを念頭に置いて構築されているので、Ionic アプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。
 
-## Frameworkの互換性
+## Framework の互換性
 
-Ionicの過去のリリースはAngularと密結合されていましたが、フレームワークのバージョン4.xからはスタンドアロンの<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Component</a>ライブラリとして動作するように再設計され、Angularのような最新のJavaScriptフレームワークと併用できるようになりました。IonicはReactやVueを含むほとんどのフロントエンドフレームワークで使用できますが、Webコンポーネントを完全にサポートするにはshimが必要なフレームワークもあります。
+Ionic の過去のリリースは Angular と密結合されていましたが、フレームワークのバージョン 4.x からはスタンドアロンの<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Component</a>ライブラリとして動作するように再設計され、Angular のような最新の JavaScript フレームワークと併用できるようになりました。Ionic は React や Vue を含むほとんどのフロントエンドフレームワークで使用できますが、Web コンポーネントを完全にサポートするには shim が必要なフレームワークもあります。
 
 ### JavaScript
 
-Ionic Frameworkを <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、scriptタグだけでWebページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、IonicをWordPressのようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。
+Ionic Framework を <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、script タグだけで Web ページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、Ionic を WordPress のようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。
 
 ### Angular
 
-Angularは常にIonicの素晴らしさの中心にありました。コアコンポーネントはスタンドアロンのWeb Componentライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージはAngularエコシステムとの統合を簡単にします。 `@ionic/angular` はIonic 2/3に期待されるすべての機能を含んでおり、AngularルータのようなコアAngularライブラリと統合されています。
+Angular は常に Ionic の素晴らしさの中心にありました。コアコンポーネントはスタンドアロンの Web Component ライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージは Angular エコシステムとの統合を簡単にします。 `@ionic/angular` は Ionic 2/3 に期待されるすべての機能を含んでおり、Angular ルータのようなコア Angular ライブラリと統合されています。
 
 ### React
 
-Ionicは現在、人気のReactライブラリを公式にサポートしています。Ionic Reactを使うと、React開発者は既存のWebスキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコアIonicコンポーネントを、ネイティブなReactコンポーネントを使っているような感覚で使用することができます。
+Ionic は現在、人気の React ライブラリを公式にサポートしています。Ionic React を使うと、React 開発者は既存の Web スキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコア Ionic コンポーネントを、ネイティブな React コンポーネントを使っているような感覚で使用することができます。
 
 ### Vue
 
-Ionicは現在、人気のVue3ライブラリを公式にサポートしています。 Ionic Vueを使用すると、Vue開発者は既存のWebスキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコアIonicコンポーネントを使用できますが、ネイティブのVueコンポーネントを使用しているように感じられます。
+Ionic は現在、人気の Vue3 ライブラリを公式にサポートしています。 Ionic Vue を使用すると、Vue 開発者は既存の Web スキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコア Ionic コンポーネントを使用できますが、ネイティブの Vue コンポーネントを使用しているように感じられます。
 
 ### Future Support
 
@@ -121,23 +121,23 @@ Ionicは現在、人気のVue3ライブラリを公式にサポートしてい
 
 ## Ionic CLI
 
-公式の [Ionic CLI](cli.md) は、Ionicアプリを迅速に構築し、Ionic開発者に多くの役に立つコマンドを提供するツールです。CLIには、Ionicのインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLIを使用してクラウドの構築と展開を実行し、アカウントを管理できます。
+公式の [Ionic CLI](cli.md) は、Ionic アプリを迅速に構築し、Ionic 開発者に多くの役に立つコマンドを提供するツールです。CLI には、Ionic のインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLI を使用してクラウドの構築と展開を実行し、アカウントを管理できます。
 
 ## Appflow
 
-Ionicアプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは <strong> オープンソースフレームワーク</strong> とは分離した <a href="https://ionic.io/appflow" target="_blank">Appflow</a> と呼んでいる製品アプリ用の商用サービスを提供しています。
+Ionic アプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは <strong> オープンソースフレームワーク</strong> とは分離した <a href="https://ionic.io/appflow" target="_blank">Appflow</a> と呼んでいる製品アプリ用の商用サービスを提供しています。
 
-Appflowは、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードからIonicアプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。
+Appflow は、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードから Ionic アプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。
 
-Appflowには <a href="https://dashboard.ionicframework.com/signup" target="_blank">Ionic Account</a> が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。
+Appflow には <a href="https://dashboard.ionicframework.com/signup" target="_blank">Ionic Account</a> が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。
 
 ## エコシステム
 
-Ionic Frameworkはコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業がIonicを使って、どこでも動くすばらしいアプリを作ってリリースしています。
+Ionic Framework はコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業が Ionic を使って、どこでも動くすばらしいアプリを作ってリリースしています。
 
 ### コミュニティに参加する
 
-Ionicの開発者は世界200か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:
+Ionic の開発者は世界 200 か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:
 
 - <a href="https://forum.ionicframework.com/" target="_blank">
     Forum:
@@ -154,6 +154,6 @@ Ionicの開発者は世界200か国以上に何百万人もいます。コミュ
 
 ## ライセンス
 
-Ionic Frameworkは無料のオープンソースプロジェクトで、 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a> ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MITライセンスは、jQueryやRuby on Railsなどの人気プロジェクトで使用されているのと同じライセンスです。
+Ionic Framework は無料のオープンソースプロジェクトで、 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a> ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MIT ライセンスは、jQuery や Ruby on Rails などの人気プロジェクトで使用されているのと同じライセンスです。
 
-このドキュメントコンテンツ(<a href="https://github.com/ionic-team/ionic-docs" target="_blank">ionic-docs</a>リポジトリにあります)は、Apache 2ライセンスでライセンスされています。
+このドキュメントコンテンツ(<a href="https://github.com/ionic-team/ionic-docs" target="_blank">ionic-docs</a>リポジトリにあります)は、Apache 2 ライセンスでライセンスされています。
diff --git a/docs/intro/cdn.md b/docs/intro/cdn.md
index 1563c927755..30ea8431b54 100644
--- a/docs/intro/cdn.md
+++ b/docs/intro/cdn.md
@@ -11,13 +11,13 @@ sidebar_label: パッケージ & CDN
   />
 </head>
 
-Ionicは、テスト環境、Angular、その他のフレームワーク、またはVanilla JSといったすべての状況で、Ionic Frameworkを使い始めるために使用できるさまざまなパッケージを提供しています。
+Ionic は、テスト環境、Angular、その他のフレームワーク、または Vanilla JS といったすべての状況で、Ionic Framework を使い始めるために使用できるさまざまなパッケージを提供しています。
 
 ## Ionic Framework CDN
 
-Ionicフレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDNから組み込むことができます。。
+Ionic フレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDN から組み込むことができます。。
 
-CDNからフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTMLファイルの `<head>`  要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。
+CDN からフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTML ファイルの `<head>` 要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
@@ -25,23 +25,23 @@ CDNからフレームワークにアクセスするには、 [jsdelivr](https://
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
 ```
 
-これにより、フレームワークをインストールしなくても、すべてのIonic Frameworkのコアコンポーネントを使用することができます。CSSバンドルには、すべてのIonic [Global Stylesheets](../layout/global-stylesheets) が含まれます。
+これにより、フレームワークをインストールしなくても、すべての Ionic Framework のコアコンポーネントを使用することができます。CSS バンドルには、すべての Ionic [Global Stylesheets](../layout/global-stylesheets) が含まれます。
 
 :::note
-これはAngularや他のフレームワークをインストールしません。これにより、フレームワークなしでIonic Frameworkのコアコンポーネントを使用できます。
+これは Angular や他のフレームワークをインストールしません。これにより、フレームワークなしで Ionic Framework のコアコンポーネントを使用できます。
 :::
 
 ## Ionic + Angular
 
-AngularプロジェクトでIonic Frameworkを使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべてのIonic Frameworkコンポーネントと、Angularのサービスおよび機能を使うことができます。
+Angular プロジェクトで Ionic Framework を使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべての Ionic Framework コンポーネントと、Angular のサービスおよび機能を使うことができます。
 
 ```shell
 npm install @ionic/angular@latest --save
 ```
 
-新しいIonic Frameworkのリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npmを使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。
+新しい Ionic Framework のリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npm を使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。
 
-Ionicを既存のAngularプロジェクトに追加するには、Angular CLIの `ng add` 機能を使用します。
+Ionic を既存の Angular プロジェクトに追加するには、Angular CLI の `ng add` 機能を使用します。
 
 ```shell
 ng add @ionic/angular
@@ -51,7 +51,7 @@ ng add @ionic/angular
 
 ## Ionic + React
 
-Ionicを既存のReactプロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。
+Ionic を既存の React プロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。
 
 ```shell
 $ npm install @ionic/react
@@ -60,7 +60,7 @@ $ npm install @ionic/react-router
 
 ### CSS
 
-必要なCSSをReactプロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。
+必要な CSS を React プロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。
 
 ```javascript
 /* Core CSS required for Ionic components to work properly */
@@ -82,13 +82,13 @@ import '@ionic/react/css/display.css';
 
 ## Ionic + Vue
 
-既存のVueプロジェクトにIonic Frameworkを追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。
+既存の Vue プロジェクトに Ionic Framework を追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。
 
 ```shell
 npm install @ionic/vue @ionic/vue-router
 ```
 
-その後、Vueアプリに`IonicVue`プラグインをインストールする必要があります。
+その後、Vue アプリに`IonicVue`プラグインをインストールする必要があります。
 
 **main.js**
 
@@ -109,7 +109,7 @@ router.isReady().then(() => {
 
 ### ルーティング
 
-Vueアプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/vue-router`から依存関係をインポートする必要があります。
+Vue アプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/vue-router`から依存関係をインポートする必要があります。
 
 **router/index.js**
 
@@ -130,7 +130,7 @@ export default router;
 
 ### CSS
 
-Vueプロジェクトで必要なCSSをimportするには、`main.js` ファイルに以下を追加します。
+Vue プロジェクトで必要な CSS を import するには、`main.js` ファイルに以下を追加します。
 
 ```javascript
 /* Core CSS required for Ionic components to work properly */
@@ -150,11 +150,11 @@ import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 ```
 
-ここからは、Ionic Frameworkでの開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。
+ここからは、Ionic Framework での開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。
 
 ## Ionicons CDN
 
-IoniconsはデフォルトでIonic Frameworkに同梱されているので、Ionicを使用している場合はインストールは不要です。Ionic Frameworkを使用せずにIoniconsを使用するためには、ページの終わりの近くにある `</body>` の閉じタグの直前に以下の `<script>` タグを配置します。
+Ionicons はデフォルトで Ionic Framework に同梱されているので、Ionic を使用している場合はインストールは不要です。Ionic Framework を使用せずに Ionicons を使用するためには、ページの終わりの近くにある `</body>` の閉じタグの直前に以下の `<script>` タグを配置します。
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
diff --git a/docs/intro/cli.md b/docs/intro/cli.md
index b52014cd3f1..3ee3bd82f49 100644
--- a/docs/intro/cli.md
+++ b/docs/intro/cli.md
@@ -13,21 +13,21 @@ import AppWizard from '@components/page/intro/AppWizard';
   />
 </head>
 
-Ionicアプリは、主にIonic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLIは、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic teamが推奨しているインストール方法です。Ionic CLIは、アプリの実行や、Appflowといった他のサービスに接続などができる重要なツールです。
+Ionic アプリは、主に Ionic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLI は、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic team が推奨しているインストール方法です。Ionic CLI は、アプリの実行や、Appflow といった他のサービスに接続などができる重要なツールです。
 
 <AppWizard />
 
-## Ionic CLIをインストール
+## Ionic CLI をインストール
 
-続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)でIonicをセットアップできる環境を説明しています。
+続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)で Ionic をセットアップできる環境を説明しています。
 
-npmを使って Ionic CLI をインストールします:
+npm を使って Ionic CLI をインストールします:
 
 ```shell
 npm install -g @ionic/cli
 ```
 
-Ionic CLIが以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。
+Ionic CLI が以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。
 
 ```shell
 $ npm uninstall -g ionic
@@ -37,12 +37,12 @@ $ npm install -g @ionic/cli
 
 :::note
 `-g` オプションは、 _グローバルにインストール_ することを意味しています。パッケージをグローバルにインストールすると `EACCES` パーミッションエラーが起きる可能性があります。
-管理権限なしでnpmがグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。
+管理権限なしで npm がグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。
 :::
 
 ## アプリケーションの起動
 
-Ionicアプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な3つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。
+Ionic アプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な 3 つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。
 
 ```shell
 ionic start
@@ -50,11 +50,11 @@ ionic start
 
 ![start app thumbnails](/img/installation/start-app-thumbnails.png)
 
-Ionicアプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。
+Ionic アプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。
 
 ## アプリケーションを実行する
 
-ほとんどのIonicアプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。
+ほとんどの Ionic アプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。
 
 ```shell
 $ cd myApp
diff --git a/docs/intro/environment.md b/docs/intro/environment.md
index 9d1ab81a06d..101674bd522 100644
--- a/docs/intro/environment.md
+++ b/docs/intro/environment.md
@@ -10,29 +10,29 @@ title: 環境設定
   />
 </head>
 
-Ionic Frameworkをはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。
+Ionic Framework をはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。
 
-もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Codeは
-Microsoft製の無料でとてもパワフルなテキストエディタです。
+もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Code は
+Microsoft 製の無料でとてもパワフルなテキストエディタです。
 
 ## ターミナル
 
 :::note
-Ionic開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。
+Ionic 開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。
 :::
 
-一般的に、OSに最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末はIonicで正常に動作しますが、サポートされていない場合があります。
+一般的に、OS に最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末は Ionic で正常に動作しますが、サポートされていない場合があります。
 
-- Windowsでは、 **コマンドプロンプト** と **PowerShell** がサポートされています。<a href="https://docs.microsoft.com/en-us/windows/wsl/faq" target="_blank">WSL</a>はIonicで動作することがわかっていますが、サポートされていない可能性があります。
-- macOSでは、組み込みの **ターミナル** アプリがサポートされています。
+- Windows では、 **コマンドプロンプト** と **PowerShell** がサポートされています。<a href="https://docs.microsoft.com/en-us/windows/wsl/faq" target="_blank">WSL</a>は Ionic で動作することがわかっていますが、サポートされていない可能性があります。
+- macOS では、組み込みの **ターミナル** アプリがサポートされています。
 
-Git Bash（<a href="https://git-scm.com" target="_blank">git-scm.com</a>）はTTY対話機能をサポートしておらず、Ionicはサポートしていません。
+Git Bash（<a href="https://git-scm.com" target="_blank">git-scm.com</a>）は TTY 対話機能をサポートしておらず、Ionic はサポートしていません。
 
 ## Node と npm
 
-モダンなJavaScriptプロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するためにLTSバージョンを選択することをお勧めします。
+モダンな JavaScript プロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するために LTS バージョンを選択することをお勧めします。
 
-NodeにはJavaScriptパッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。
+Node には JavaScript パッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。
 
 インストールできているかを確認するためには、新しいターミナルウィンドウを開いて以下を実行します。
 
@@ -49,7 +49,7 @@ $ npm --version
 
 必須ではありませんが、バージョン管理システムの[Git](../reference/glossary.md#git)の利用を強くお勧めします。
 
-Gitは [GitHub](https://github.com/) のようなGitホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらのGitホスティングサービスのチュートリアルをご確認ください:
+Git は [GitHub](https://github.com/) のような Git ホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらの 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)
@@ -65,4 +65,4 @@ git --version
 
 ### Git GUI
 
-Gitはコマンドラインユーティリティですが、利用可能な [GUIクライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHubとうまく連携します。
+Git はコマンドラインユーティリティですが、利用可能な [GUI クライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHub とうまく連携します。
diff --git a/docs/intro/first-app.md b/docs/intro/first-app.md
index feefd9a52f6..f39f660cd26 100644
--- a/docs/intro/first-app.md
+++ b/docs/intro/first-app.md
@@ -7,16 +7,17 @@ import DocsCards from '@components/global/DocsCards';
 
 # はじめてアプリ制作チュートリアル
 
-Ionicアプリの構築に使用する予定のJavaScriptフレームワークを選びます。
+Ionic アプリの構築に使用する予定の JavaScript フレームワークを選びます。
 
 <DocsCards>
   <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
     <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
   </DocsCard>
 
-  <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
-    <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
+{' '}
+<DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+  <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+</DocsCard>
 
   <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
     <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
diff --git a/docs/intro/next.md b/docs/intro/next.md
index 670df170b88..a51d0019e16 100644
--- a/docs/intro/next.md
+++ b/docs/intro/next.md
@@ -17,16 +17,17 @@ import DeveloperExperts from '@components/page/intro/next/DeveloperExperts';
 
 ## 最初のアプリをつくる
 
-Ionicアプリを構築する際に使用する予定のJavaScriptフレームワークを選択します。
+Ionic アプリを構築する際に使用する予定の JavaScript フレームワークを選択します。
 
 <DocsCards>
   <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
     <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
   </DocsCard>
 
-  <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
-    <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
+{' '}
+<DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+  <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+</DocsCard>
 
   <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
     <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
diff --git a/docs/intro/vscode-extension.md b/docs/intro/vscode-extension.md
index 5c41a8bf083..e3824a71af0 100644
--- a/docs/intro/vscode-extension.md
+++ b/docs/intro/vscode-extension.md
@@ -10,11 +10,11 @@ title: Ionic VS Code Extension
   />
 </head>
 
-Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさまざまな機能を、VS Codeのウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーにIonicのロゴが表示されるようになります。
+Ionic Visual Studio Code 拡張は、Ionic アプリの開発に共通するさまざまな機能を、VS Code のウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace 上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーに Ionic のロゴが表示されるようになります。
 
 ## 新規プロジェクトの作成
 
-空のディレクトリから、テンプレートオプションの1つをクリックし、アプリ名を指定することで、新しいAngular、React、またはVueプロジェクトを作成することができます。
+空のディレクトリから、テンプレートオプションの 1 つをクリックし、アプリ名を指定することで、新しい Angular、React、または Vue プロジェクトを作成することができます。
 
 <img
   src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif"
@@ -32,7 +32,7 @@ Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさ
   alt="Capacitor追加のビデオ"
 />
 
-Capacitorが統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS上でアプリを実行することができるようになりました。
+Capacitor が統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS 上でアプリを実行することができるようになりました。
 
 ## Doing More
 
diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
index 3a0a715180b..e427cd56c58 100644
--- a/docs/layout/css-utilities.md
+++ b/docs/layout/css-utilities.md
@@ -12,10 +12,10 @@ inlineHtmlPreviews: true
   />
 </head>
 
-Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置やpaddingやmarginを修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
+Ionic Framewor は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
 
 :::note
-使用可能なIonic Frameworkスターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。
+使用可能な Ionic Framework スターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。
 :::
 
 ## テキストの修正
@@ -113,7 +113,7 @@ Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置
 
 ### Responsive Text Classes
 
-上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの1つです。
+上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの 1 つです。
 
 以下の表は、 `{modifier}` のデフォルトの挙動です。 `left`, `right`, `start`, `end`, `center`, `justify`, `wrap`, `nowrap`, `uppercase`, `lowercase`, `capitalize` は上記の通りです。
 
@@ -127,9 +127,9 @@ Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置
 
 ## 要素の配置
 
-### Float要素
+### Float 要素
 
-CSSプロパティのfloatは、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。
+CSS プロパティの float は、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。
 
 ```html
 <ion-grid>
@@ -174,9 +174,9 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ
 | `.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. |
 
-### レスポンシブなFloatクラス
+### レスポンシブな Float クラス
 
-上記のすべてのfloatクラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。
+上記のすべての float クラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。
 
 次の表に、デフォルトの動作を示します。 `{modifier}` は、前述のように `left`, `right`, `start`, `end` のいずれかです。
 
@@ -190,7 +190,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ
 
 ## 要素の表示
 
-display CSSプロパティは、要素を表示するかどうかを決定します。要素はDOM内に残りますが、非表示の場合はレンダリングされません。
+display CSS プロパティは、要素を表示するかどうかを決定します。要素は DOM 内に残りますが、非表示の場合はレンダリングされません。
 
 ```html
 <ion-grid>
@@ -215,9 +215,9 @@ display CSSプロパティは、要素を表示するかどうかを決定しま
 | ----------- | --------------- | --------------------------- |
 | `.ion-hide` | `display: none` | The element will be hidden. |
 
-### ResponsiveなDisplay属性
+### Responsive な Display 属性
 
-画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
+画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
 
 | Class                | Description                                                                                          |
 | -------------------- | ---------------------------------------------------------------------------------------------------- |
@@ -228,9 +228,9 @@ display CSSプロパティは、要素を表示するかどうかを決定しま
 
 ## コンテンツのスペース
 
-### 要素のPadding
+### 要素の Padding
 
-padding属性は、要素のpaddingエリアを設定します。paddingエリアは、要素のコンテンツとその境界線のスペースです。
+padding 属性は、要素の padding エリアを設定します。padding エリアは、要素のコンテンツとその境界線のスペースです。
 
 `padding` で適用されるデフォルトの数値は `16px` で、これは `--ion-padding`　変数で設定することができます。これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
 
@@ -278,9 +278,9 @@ padding属性は、要素のpaddingエリアを設定します。paddingエリ
 | `.ion-padding-horizontal` | `padding: 0 16px`      | Applies padding to the left and right. |
 | `.ion-no-padding`         | `padding: 0`           | Applies no padding to all sides.       |
 
-### 要素のMargin
+### 要素の Margin
 
-Marginエリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。
+Margin エリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。
 
 `margin`　はデフォルトで `16px` が設定されており、 `--ion-margin` 変数で設定されています。 これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
 
@@ -516,9 +516,9 @@ Marginエリアは、隣り合う要素とのスペースを広げるために
 | `.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の表示
+## Border の表示
 
-border display CSSプロパティは、borderを表示するかどうかを指定します。このプロパティは、 `ion-header` と` ion-footer` に適用できます。
+border display CSS プロパティは、border を表示するかどうかを指定します。このプロパティは、 `ion-header` と` ion-footer` に適用できます。
 
 ```html
 <ion-header class="ion-no-border">
@@ -538,9 +538,9 @@ border display CSSプロパティは、borderを表示するかどうかを指
 | ---------------- | -------------------------------- |
 | `.ion-no-border` | The element will have no border. |
 
-## Ionicのブレイクポイント
+## Ionic のブレイクポイント
 
-Ionicは、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。
+Ionic は、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。
 
 | Breakpoint Name | Width    |
 | --------------- | -------- |
diff --git a/docs/layout/global-stylesheets.md b/docs/layout/global-stylesheets.md
index f1bde8ae88e..6cc5a214162 100644
--- a/docs/layout/global-stylesheets.md
+++ b/docs/layout/global-stylesheets.md
@@ -12,7 +12,7 @@ inlineHtmlPreviews: true
   />
 </head>
 
-Ionic Frameworkのコンポーネントスタイルは自己完結していますが、Ionicのすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Frameworkアプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。
+Ionic Framework のコンポーネントスタイルは自己完結していますが、Ionic のすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Framework アプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。
 
 ## 利用可能
 
@@ -26,7 +26,7 @@ Ionic Framework が正常に動作するためには、以下の CSS ファイ
 
 ### 推奨
 
-Ionic Frameworkアプリでは、以下のCSSファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Frameworkのコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。
+Ionic Framework アプリでは、以下の CSS ファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Framework のコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。
 
 #### structure.css
 
@@ -42,7 +42,7 @@ typography はドキュメント全体の font-family を変更し、見出し
 
 ### オプション
 
-以下のCSSファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。
+以下の CSS ファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。
 
 #### padding.css
 
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index fbe80a2515b..b44b618c2cb 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -10,7 +10,7 @@ title: レスポンシブグリッド
   />
 </head>
 
-グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ12列のレイアウトに基づいています。カラムの数はCSSを使ってカスタマイズすることができます。
+グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ 12 列のレイアウトに基づいています。カラムの数は CSS を使ってカスタマイズすることができます。
 
 ## How it works
 
@@ -34,24 +34,24 @@ title: レスポンシブグリッド
   しかし、`fixed`属性を追加すると、スクリーンサイズごとの幅を指定することができます。
 - 行は、列を適切に並べるための水平方向のグループです。
 - コンテンツは列の中に配置されるべきで、列のみが行の直接の子となることができます。
-- `size-{breakpoint}` 属性は、1行あたりデフォルトの12列のうち、使用する列の数を指定します。
-  つまり、`size="4"` を指定すると、グリッドの1/3、つまり12列のうち4列を占有することができます。
-- sizeに値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を4つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に25%になります。
+- `size-{breakpoint}` 属性は、1 行あたりデフォルトの 12 列のうち、使用する列の数を指定します。
+  つまり、`size="4"` を指定すると、グリッドの 1/3、つまり 12 列のうち 4 列を占有することができます。
+- size に値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を 4 つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に 25%になります。
 - カラムの幅はパーセンテージで設定されるため、常に流動的で、親要素からの相対的な大きさになります。
 - カラムは個々のカラムの間にパディングを持ちますが、パディングはグリッドとカラムから削除することができます。
   しかし、グリッドに `ion-no-padding` クラスを追加することで、グリッドとカラムからパディングを取り除くことができます。グリッドに適用できるその他のスタイルについては、[CSS ユーティリティ](css-utilities.md) を参照してください。
-- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の5段階あります。
+- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の 5 段階あります。
 - グリッドの階層は最小幅を基準にしており、その階層とそれより大きな階層に適用されます。
   (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
 - グリッドは CSS 変数で簡単にカスタマイズすることができます。グリッドのカスタマイズ](#customizing-the-grid)を参照してください。
 
 ### ライブでの実装例
 
-Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。
+Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。
 
 ## グリッドの大きさ
 
-デフォルトでは、グリッドは100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
+デフォルトでは、グリッドは 100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS 変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
 
 | Name | Value  | Description                                       |
 | ---- | ------ | ------------------------------------------------- |
@@ -63,7 +63,7 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid)
 
 ### ライブでの実装例
 
-Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。
+Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。
 
 ## グリッドの属性
 
@@ -115,9 +115,9 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width
 </ion-grid>
 ```
 
-### 1列の幅を設定する
+### 1 列の幅を設定する
 
-1つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。
+1 つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。
 
 ```html
 <ion-grid>
@@ -148,7 +148,7 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。
 
 ### 可変幅
 
@@ -188,7 +188,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。
 
 ## レスポンシブ属性
 
@@ -217,7 +217,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 
 
 ### 積み上げから水平へ
 
-width属性とbreakpoint属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。
+width 属性と breakpoint 属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。
 
 ```html
 <ion-grid>
@@ -240,13 +240,13 @@ width属性とbreakpoint属性の組み合わせで、超小型画面では積
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、React では [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。
 
 ##並び替え
 
 ### カラムのオフセット
 
-offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは3カラム分オフセットされ、3カラムを占めることになります。
+offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは 3 カラム分オフセットされ、3 カラムを占めることになります。
 
 ```html
 <ion-grid>
@@ -261,7 +261,7 @@ offset` プロパティを追加することで、カラムを右に移動させ
 </ion-grid>
 ```
 
-また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが3カラム分オフセットされるグリッドの例です。
+また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが 3 カラム分オフセットされるグリッドの例です。
 
 ```html
 <ion-grid>
@@ -281,7 +281,7 @@ offset` プロパティを追加することで、カラムを右に移動させ
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、React では [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。
 
 ### プッシュとプル
 
@@ -300,7 +300,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols)
 </ion-grid>
 ```
 
-また、画面のブレークポイントに基づいてPushとPullを追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。
+また、画面のブレークポイントに基づいて Push と Pull を追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。
 
 ```html
 <ion-grid>
@@ -320,7 +320,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols)
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。
 
 ## アライメント
 
@@ -377,7 +377,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 
 </ion-grid>
 ```
 
-カラムはまた、カラムに直接alignmentクラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-item-properties) を参照してください。
+カラムはまた、カラムに直接 alignment クラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-item-properties) を参照してください。
 
 ```html
 <ion-grid>
@@ -400,11 +400,11 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。
 
 ### 水平方向の整列
 
-行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[cssユーティリティ](css-utilities.md#flex-container-properties) を参照してください。
+行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css ユーティリティ](css-utilities.md#flex-container-properties) を参照してください。
 
 ```html
 <ion-grid>
@@ -457,7 +457,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-ali
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。
 
 ## グリッドのカスタマイズ
 
@@ -465,15 +465,15 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-a
 
 ### 列の数
 
-グリッドのカラム数は、CSS変数 `--ion-grid-columns` で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。
+グリッドのカラム数は、CSS 変数 `--ion-grid-columns` で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。
 
 ```css
 --ion-grid-columns: 12;
 ```
 
-### グリッドのPadding
+### グリッドの Padding
 
-グリッドコンテナのPaddingは、CSS変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS変数 `--ion-grid-padding-{breakpoint}` を使用します。
+グリッドコンテナの Padding は、CSS 変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS 変数 `--ion-grid-padding-{breakpoint}` を使用します。
 
 ```css
 --ion-grid-padding: 5px;
@@ -499,7 +499,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-a
 
 ### Column Padding
 
-列のpaddingは `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS変数 `--ion-grid-column-padding-{breakpoint}` を使用します。
+列の padding は `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS 変数 `--ion-grid-column-padding-{breakpoint}` を使用します。
 
 ```css
 --ion-grid-column-padding: 5px;
diff --git a/docs/layout/structure.md b/docs/layout/structure.md
index d5e947f1a8a..ecaccc5c3da 100644
--- a/docs/layout/structure.md
+++ b/docs/layout/structure.md
@@ -14,13 +14,13 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Ionic Frameworkは、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
+Ionic Framework は、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
 
-## HeaderとFooterのレイアウト
+## Header と Footer のレイアウト
 
 ### Header
 
-最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般的にこの2つを備えていますが、コンテンツを使用するためにヘッダーは必要ではありません。
+最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般的にこの 2 つを備えていますが、コンテンツを使用するためにヘッダーは必要ではありません。
 
 import Header from '@site/static/usage/v7/header/basic/index.md';
 
@@ -34,7 +34,6 @@ import Footer from '@site/static/usage/v7/footer/basic/index.md';
 
 <Footer />
 
-
 ## タブレイアウト
 
 水平な [タブ](../api/tabs.md) からなるレイアウトを使用すると、ユーザーはコンテンツビューをすばやく切り替えることができます。各タブには、[router outlet](../api/router-outlet.md) や [nav](../api/nav.md) を使用して、静的コンテンツやナビゲーション・スタックを含めることができます。
@@ -43,7 +42,6 @@ import Tabs from '@site/static/usage/v7/tabs/router/index.md';
 
 <Tabs />
 
-
 ## メニューレイアウト
 
 モバイルアプリの標準的なレイアウトには、ボタンをクリックするか、横からスワイプして開くことで サイドメニュー [menu](../api/menu.md) を切り替えられる機能が含まれています。サイドメニューは一般的にナビゲーションのために使用されますが、任意のコンテンツを含むことができます。
@@ -52,7 +50,6 @@ import Menu from '@site/static/usage/v7/menu/basic/index.md';
 
 <Menu />
 
-
 ## 分割ペインレイアウト
 
 [split pane](../api/split-pane.md) レイアウトは、前述のレイアウトを組み合わせることができるため、より複雑な構造を持っています。これは、ビューポートが指定されたブレークポイントより上にある場合に、複数のビューを表示することができます。デバイスの画面サイズが一定以下の場合、分割ペインビューは非表示になります。
diff --git a/docs/react.md b/docs/react.md
index c7eaa45a96e..2b4fc71a4d9 100644
--- a/docs/react.md
+++ b/docs/react.md
@@ -25,8 +25,8 @@ import DocsCards from '@components/global/DocsCards';
   <h1>コードひとつで <br/> あらゆるプラットフォーム <br/> <strong>まさにReact</strong></h1>
 
 - ✓ 100 以上のモバイルに最適化された React UI コンポーネント
-- ✓ Reactの標準的なツールであるreact-dom
-- ✓ iOS / Android / Electron / PWAに対応
+- ✓ React の標準的なツールである react-dom
+- ✓ iOS / Android / Electron / PWA に対応
 
 [Get Started](#installation)
 
@@ -37,11 +37,11 @@ import DocsCards from '@components/global/DocsCards';
   </div>
 </div>
 
-### モバイル、デスクトップ、ウェブにまたがる素晴らしいアプリを、あなたが知っている、そして愛するReactで構築してください。
+### モバイル、デスクトップ、ウェブにまたがる素晴らしいアプリを、あなたが知っている、そして愛する React で構築してください。
 
-Ionic Reactは、Ionic FrameworkのネイティブReactバージョンで、世界中の何百万ものミッションクリティカルなアプリを動かしている、無料のオープンソースSDKです。
+Ionic React は、Ionic Framework のネイティブ React バージョンで、世界中の何百万ものミッションクリティカルなアプリを動かしている、無料のオープンソース SDK です。
 
-Reactを使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。
+React を使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。
 
 <div class="flex" >
 
@@ -49,7 +49,7 @@ Reactを使用して、あらゆるプラットフォーム向けに受賞歴の
 
 ## すばらしいデザイン
 
-100種類以上の美しいモバイル対応のUIコンポーネント、アニメーション、ジェスチャーから選択でき、軽量であなたのブランドに合うようにカスタマイズできます。
+100 種類以上の美しいモバイル対応の UI コンポーネント、アニメーション、ジェスチャーから選択でき、軽量であなたのブランドに合うようにカスタマイズできます。
 
 [Explore UI components](/docs/components)
 
@@ -67,7 +67,7 @@ Reactを使用して、あらゆるプラットフォーム向けに受賞歴の
 
 ## 使い慣れたツール
 
-IonicのReactプロジェクトはReactプロジェクトと同じように、[react-dom](https://reactjs.org/docs/react-dom.html) を活用し、[Create React App (CRA)](https://github.com/facebook/create-react-app) アプリで見られるようなセットアップが可能です。ルーティングとナビゲーション](/docs/react/navigation)では、React Routerが使用されています。
+Ionic の React プロジェクトは React プロジェクトと同じように、[react-dom](https://reactjs.org/docs/react-dom.html) を活用し、[Create React App (CRA)](https://github.com/facebook/create-react-app) アプリで見られるようなセットアップが可能です。ルーティングとナビゲーション](/docs/react/navigation)では、React Router が使用されています。
 React バージョン 16.8 以降に対応しています。
 
 </div>
@@ -84,7 +84,7 @@ React バージョン 16.8 以降に対応しています。
 
 ## More than mobile
 
-最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic ReactプロジェクトをネイティブのiOS、Android、Electron、WebにProgressive Web Appとしてデプロイできます。すべて1つの共有コードベースで。
+最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic React プロジェクトをネイティブの iOS、Android、Electron、Web に Progressive Web App としてデプロイできます。すべて 1 つの共有コードベースで。
 
 </div>
 
@@ -98,9 +98,9 @@ React バージョン 16.8 以降に対応しています。
 
   <div class="pull-left">
 
-## まさにReact
+## まさに React
 
-結局のところ、ただのReactなのです。Ionic ReactはオープンなWeb標準とビルトインのブラウザ機能を使用しているため、何百万とあるWebライブラリのどれとも互換性があります。
+結局のところ、ただの React なのです。Ionic React はオープンな Web 標準とビルトインのブラウザ機能を使用しているため、何百万とある Web ライブラリのどれとも互換性があります。
 
   </div>
 
diff --git a/docs/react/config.md b/docs/react/config.md
index b51d449cba8..3340ce5b263 100644
--- a/docs/react/config.md
+++ b/docs/react/config.md
@@ -1,10 +1,10 @@
 # Config
 
-Ionic Configは、アプリ全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。 アプリのモード、Tabボタンのレイアウト、アニメーションなどを設定できます。
+Ionic Config は、アプリ全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。 アプリのモード、Tab ボタンのレイアウト、アニメーションなどを設定できます。
 
 ## 使い方
 
-アプリのIonicの初期設定をオーバーライドするには、Ionicコンポーネント (`IonApp`を含めます)をレンダリングする前に、`@ionic/react` から `setupConfig` メソッドをインポートして呼び出します:
+アプリの Ionic の初期設定をオーバーライドするには、Ionic コンポーネント (`IonApp`を含めます)をレンダリングする前に、`@ionic/react` から `setupConfig` メソッドをインポートして呼び出します:
 
 ```tsx
 setupIonicReact({
@@ -13,7 +13,7 @@ setupIonicReact({
 });
 ```
 
-上記の例では、アプリ全体でマテリアルデザインのリップル効果を無効にし、modeをマテリアルデザインに強制しています。
+上記の例では、アプリ全体でマテリアルデザインのリップル効果を無効にし、mode をマテリアルデザインに強制しています。
 
 ## Per-Platform Config
 
@@ -77,7 +77,7 @@ setupIonicReact(getConfig());
 
 ### IonicConfig
 
-以下は、Ionicで使用できる設定オプションのリストです。
+以下は、Ionic で使用できる設定オプションのリストです。
 
 | Config                   | Type                                                                            | Description                                                                                              |
 | ------------------------ | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md
index 239bd646586..cab06c748d5 100644
--- a/docs/react/lifecycle.md
+++ b/docs/react/lifecycle.md
@@ -11,26 +11,26 @@ sidebar_label: ライフサイクル
   />
 </head>
 
-このガイドでは、Ionic ReactアプリケーションでIonicのライフサイクルイベントを利用する方法について説明します。
+このガイドでは、Ionic React アプリケーションで Ionic のライフサイクルイベントを利用する方法について説明します。
 
-## Ionicのライフサイクルメソッド
+## Ionic のライフサイクルメソッド
 
-Ionicは、アプリで利用できるいくつかのライフサイクルメソッドを提供します:
+Ionic は、アプリで利用できるいくつかのライフサイクルメソッドを提供します:
 
-| Event Name         | Description                                                          |
-|--------------------|------------------------------------------------------------------|
-| `ionViewWillEnter` | コンポーネントが表示されるアニメーションが __はじまる時に__ 発火します。 |
-| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが __終了した時に__ 発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが __はじまる時に__ 発火します。  |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが __終了した時に__発火します。 |
+| Event Name         | Description                                                              |
+| ------------------ | ------------------------------------------------------------------------ |
+| `ionViewWillEnter` | コンポーネントが表示されるアニメーションが **はじまる時に** 発火します。 |
+| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが **終了した時に** 発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが **はじまる時に** 発火します。   |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが **終了した時に**発火します。    |
 
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
 
 これらのメソッドにアクセスする方法は、クラスベースのコンポーネントを使用しているか、機能的なコンポーネントを使用しているかによって異なります。以下では、両方の方法について説明します。
 
 ## クラスベースのコンポーネントにおけるライフサイクルメソッド
 
-クラスベースのコンポーネントでIonicのライフサイクルメソッドを使用するには、次のように `withIonLifeCycle` という higher order component (HOC) でコンポーネントをラップする必要があります:
+クラスベースのコンポーネントで Ionic のライフサイクルメソッドを使用するには、次のように `withIonLifeCycle` という higher order component (HOC) でコンポーネントをラップする必要があります:
 
 ```tsx
 export default withIonLifeCycle(HomePage);
@@ -40,7 +40,7 @@ export default withIonLifeCycle(HomePage);
 `withIonLifeCycle` は `@ionic/react` からインポートします
 :::
 
-そして、クラスコンポーネントに適切なライフサイクルメソッドを追加すると、イベントが発生した時にHOCがそのメソッドを呼び出します。以下は、各ライフサイクルメソッドを実装したコンポーネント全体です:
+そして、クラスコンポーネントに適切なライフサイクルメソッドを追加すると、イベントが発生した時に HOC がそのメソッドを呼び出します。以下は、各ライフサイクルメソッドを実装したコンポーネント全体です:
 
 ```tsx
 import React from 'react';
@@ -80,9 +80,9 @@ class HomePage extends React.Component {
 export default withIonLifeCycle(HomePage);
 ```
 
-## Functionベースのコンポーネントにおけるライフサイクルメソッド
+## Function ベースのコンポーネントにおけるライフサイクルメソッド
 
-Ionic Reactは、ファンクションコンポーネントで使用できる各ライフサイクルメソッドのフックをエクスポートします。各フックは、イベントが発生したときに呼び出すメソッドを実行します。
+Ionic React は、ファンクションコンポーネントで使用できる各ライフサイクルメソッドのフックをエクスポートします。各フックは、イベントが発生したときに呼び出すメソッドを実行します。
 
 ```tsx
 import {
@@ -133,9 +133,9 @@ export default HomePage;
 クラスコンポーネントのように、ファンクションコンポーネントを `withIonLifeCycle` HOC でラップする必要はありません。
 :::
 
-## Reactライフサイクルメソッド
+## React ライフサイクルメソッド
 
-Reactのすべてのライフサイクルメソッド（ `componentDidMount` 、`componentWillUnmount` など）も使用できます。 ただし、Ionic Reactはページのライフタイムを管理するため、特定のイベントが期待どおりに発生しない場合があります。 たとえば、最初にページが表示されたときは `componentDidMount` が起動しますが、ページから移動した時にIonicはページをDOMツリーに保持しているため、その後の当該ページへのアクセスでは `componentDidMount` を再度呼び出さない場合があります。 このシナリオは、Ionicライフサイクルメソッドが存在する主な理由であり、ネイティブフレームワークのイベントが発生しない場合にビューが開始および終了するときにロジックを呼び出す方法を提供します。
+React のすべてのライフサイクルメソッド（ `componentDidMount` 、`componentWillUnmount` など）も使用できます。 ただし、Ionic React はページのライフタイムを管理するため、特定のイベントが期待どおりに発生しない場合があります。 たとえば、最初にページが表示されたときは `componentDidMount` が起動しますが、ページから移動した時に Ionic はページを DOM ツリーに保持しているため、その後の当該ページへのアクセスでは `componentDidMount` を再度呼び出さない場合があります。 このシナリオは、Ionic ライフサイクルメソッドが存在する主な理由であり、ネイティブフレームワークのイベントが発生しない場合にビューが開始および終了するときにロジックを呼び出す方法を提供します。
 
 ## 各ライフサイクルメソッドのガイドライン
 
@@ -143,12 +143,12 @@ Reactのすべてのライフサイクルメソッド（ `componentDidMount` 、
 
 - `ionViewWillEnter` - コンポーネントが初期化されているかどうかに関係なくビューが表示される度に `ionViewWillEnter` が呼び出されるため、サービスからデータをロードするのに適したメソッドです。
 - `ionViewDidEnter` - データのロード時に `ionViewWillEnter` を使用することでパフォーマンスの問題が発生する場合は、代わりに `ionViewDidEnter` でデータ呼び出しを行うことができます。 ただし、ページがユーザーに表示されるまでこのイベントは発生しません。そのため、ロードインジケーターまたはスケルトンスクリーンを使用して、表示が完了した後にコンテンツが不自然にフラッシュしないようにすることができます。
-- `ionViewWillLeave` - データソースからの unsubscribe など、クリーンアップに使用できます。  `componentWillUnmount` は現在のページから移動しても起動しない場合があるため、画面が表示されていないときにアクティブにしたくない場合は、クリーンアップコードをここに配置します。
+- `ionViewWillLeave` - データソースからの unsubscribe など、クリーンアップに使用できます。 `componentWillUnmount` は現在のページから移動しても起動しない場合があるため、画面が表示されていないときにアクティブにしたくない場合は、クリーンアップコードをここに配置します。
 - `ionViewDidLeave` - このイベントが発生すると、新しいページに完全に移行したことがわかります。そのため、ビューが表示されているときに通常実行しないロジックはここに移動できます。
 
 ## ページ間で状態を受け渡す
 
-Ionic Reactはページのライフタイムを管理するため、ユーザーがアプリケーションをナビゲートすると、以前のページの状態が更新されることがあります。これは、Reactの `useEffect` や React Routerの `useLocation` を使って決定された状態に影響を与えることがあります。例えば、`PageA` が `useLocation` を呼び出した場合、ユーザーが `PageA` から `PageB` に移動すると `useLocation` の状態は変化します。
+Ionic React はページのライフタイムを管理するため、ユーザーがアプリケーションをナビゲートすると、以前のページの状態が更新されることがあります。これは、React の `useEffect` や React Router の `useLocation` を使って決定された状態に影響を与えることがあります。例えば、`PageA` が `useLocation` を呼び出した場合、ユーザーが `PageA` から `PageB` に移動すると `useLocation` の状態は変化します。
 
 開発者は、前のページが定義された状態にしかアクセスしないことを保証するために、適切なチェックを含める必要があります。
 
diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index 2656b8f49a7..569200f3efb 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -13,15 +13,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
   />
 </head>
 
-このガイドでは、IonicとReactで構築されたアプリでのルーティングの仕組みについて説明します。
+このガイドでは、Ionic と React で構築されたアプリでのルーティングの仕組みについて説明します。
 
 `IonReactRouter` は一般的な [React Router](https://github.com/ReactTraining/react-router) ライブラリを内部で使用しています。Ionic と React Router を使うことで、ページ遷移がリッチなマルチページアプリをつくることができます。
 
-React Routerを使用したルーティングについて知っていることはすべて、Ionic Reactで利用することができます。Ionic Reactアプリの基本と、ルーティングがどのように機能するかを見てみましょう。
+React Router を使用したルーティングについて知っていることはすべて、Ionic React で利用することができます。Ionic React アプリの基本と、ルーティングがどのように機能するかを見てみましょう。
 
-## Ionic Reactにおけるルーティング
+## Ionic React におけるルーティング
 
-これは `App` コンポーネントのサンプルで、 "/dashboard" URLへの単一ルートを定義しています。"/dashboard"にアクセスすると、 `DashboardPage` コンポーネントをレンダリングします。
+これは `App` コンポーネントのサンプルで、 "/dashboard" URL への単一ルートを定義しています。"/dashboard"にアクセスすると、 `DashboardPage` コンポーネントをレンダリングします。
 
 **App.tsx**
 
@@ -38,11 +38,11 @@ const App: React.FC = () => (
 );
 ```
 
-`Route` の直後に、デフォルトの `Redirect` を定義します。これは、ユーザーがアプリのルートURL（"/"）にアクセスすると、"/dashboard" URLにリダイレクトします。
+`Route` の直後に、デフォルトの `Redirect` を定義します。これは、ユーザーがアプリのルート URL（"/"）にアクセスすると、"/dashboard" URL にリダイレクトします。
 
-リダイレクトには `exact` という prop もあります。つまり、このルートが一致するためには、URLが `from` prop（もしくは `Route` で `exact` が使われている場合の `path` prop）と正確に一致する必要があります。すべてのルートは"/"で始まるため、これがないと、このリダイレクトはすべてのルートに対してレンダリングされます。
+リダイレクトには `exact` という prop もあります。つまり、このルートが一致するためには、URL が `from` prop（もしくは `Route` で `exact` が使われている場合の `path` prop）と正確に一致する必要があります。すべてのルートは"/"で始まるため、これがないと、このリダイレクトはすべてのルートに対してレンダリングされます。
 
-ユーザーが認証されているかどうかを確認するなど、条件に基づいてルートのrenderメソッドからプログラムでリダイレクトすることもできます:
+ユーザーが認証されているかどうかを確認するなど、条件に基づいてルートの render メソッドからプログラムでリダイレクトすることもできます:
 
 ```tsx
 <Route
@@ -56,7 +56,7 @@ const App: React.FC = () => (
 
 ## IonReactRouter
 
-`IonReactRouter` コンポーネントは、React Routerの従来の [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) コンポーネントをラップし、アプリケーションをルーティング用にセットアップします。したがって、 `BrowserRouter` の代わりに `IonReactRouter` を使用します。任意のpropを `IonReactRouter` に渡すことができ、それらはベースとなる `BrowserRouter` に渡されます。
+`IonReactRouter` コンポーネントは、React Router の従来の [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) コンポーネントをラップし、アプリケーションをルーティング用にセットアップします。したがって、 `BrowserRouter` の代わりに `IonReactRouter` を使用します。任意の prop を `IonReactRouter` に渡すことができ、それらはベースとなる `BrowserRouter` に渡されます。
 
 ## ルーターのネスト
 
@@ -77,9 +77,9 @@ const DashboardPage: React.FC = () => {
 };
 ```
 
-ここでは、アプリの DashboardPage から更にコンポーネントが定義された2つのルートがあります。pathにはルートの全体を定義する必要があり、そのURLからこのページに到達した場合でも、 "/dashboard" を省略できないことに注意してください。 React Routerは絶対パスを必要とし、相対パスはサポートされていません。
+ここでは、アプリの DashboardPage から更にコンポーネントが定義された 2 つのルートがあります。path にはルートの全体を定義する必要があり、その URL からこのページに到達した場合でも、 "/dashboard" を省略できないことに注意してください。 React Router は絶対パスを必要とし、相対パスはサポートされていません。
 
-ただし、 [`match`](https://reacttraining.com/react-router/web/api/match) オブジェクトの `url` プロパティを使用して、コンポーネントをレンダリングするために match したURLを提供できます。これは、ネストされたルートを操作するときに役立ちます。
+ただし、 [`match`](https://reacttraining.com/react-router/web/api/match) オブジェクトの `url` プロパティを使用して、コンポーネントをレンダリングするために match した URL を提供できます。これは、ネストされたルートを操作するときに役立ちます。
 
 ```tsx
 const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
@@ -94,15 +94,15 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 };
 ```
 
-ここでは、 `match.url` には "/dashboard" の値が含まれています。これは、 `DashboardPage` のレンダリングに使用されるURLであるためです。
+ここでは、 `match.url` には "/dashboard" の値が含まれています。これは、 `DashboardPage` のレンダリングに使用される URL であるためです。
 
 これらのルートは `IonRouterOutlet` にグループ化されています。次に説明します。
 
 ## IonRouterOutlet
 
-`IonRouterOutlet` コンポーネントは、Ionicの "ページ" をレンダリングするルートコンテナを提供します。 ページが `IonRouterOutlet` にある場合、コンテナはページ間の遷移アニメーションを制御し、ページが作成および破棄されるタイミングを制御します。これにより、ビューを切り替える際にビュー間の状態を維持できます。
+`IonRouterOutlet` コンポーネントは、Ionic の "ページ" をレンダリングするルートコンテナを提供します。 ページが `IonRouterOutlet` にある場合、コンテナはページ間の遷移アニメーションを制御し、ページが作成および破棄されるタイミングを制御します。これにより、ビューを切り替える際にビュー間の状態を維持できます。
 
-上記の `DashboardPage` には、ユーザーリストページと詳細ページが表示されます。 2つのページ間を移動するとき、 `IonRouterOutlet` は適切なプラットフォームページの遷移を提供し、前のページの状態をそのまま保持するため、ユーザーがリストページに戻ると、前のページと同じ状態で表示されます。
+上記の `DashboardPage` には、ユーザーリストページと詳細ページが表示されます。 2 つのページ間を移動するとき、 `IonRouterOutlet` は適切なプラットフォームページの遷移を提供し、前のページの状態をそのまま保持するため、ユーザーがリストページに戻ると、前のページと同じ状態で表示されます。
 
 `IonRouterOutlet` には、 `Route` と `Redirect` のみを含める必要があります。 他のコンポーネントは、 `Route` の結果、または `IonRouterOutlet` の外部でレンダリングする必要があります。
 
@@ -167,7 +167,7 @@ export default Home;
 
 ## Navigation
 
-Ionic Reactアプリでさまざまなビューにルーティングする場合、いくつかのオプションを使用できます。 ここで、 `UsersListPageはIonItem` は `IonItem` の `routerLink` prop を使用して、タップ/クリックされたときに移動するルートを指定します:
+Ionic React アプリでさまざまなビューにルーティングする場合、いくつかのオプションを使用できます。 ここで、 `UsersListPageはIonItem` は `IonItem` の `routerLink` prop を使用して、タップ/クリックされたときに移動するルートを指定します:
 
 **UsersListPage.tsx**
 
@@ -207,7 +207,7 @@ Outside of these components that have the `routerLink` prop, you can also use Re
 
 ルーティングは可能な限り、上記の方法のいずれかを使用することをお勧めします。 これらのアプローチの利点は、両方ともアンカー（ `<a>` ）タグをレンダリングすることです。これはアプリ全体のアクセシビリティに適しています。
 
-ナビゲーションのためのプログラムオプションとして、React Routerがルート経由でレンダリングするコンポーネントに提供する [`history`](https://reacttraining.com/react-router/web/api/history) prop を使用することもできます。
+ナビゲーションのためのプログラムオプションとして、React Router がルート経由でレンダリングするコンポーネントに提供する [`history`](https://reacttraining.com/react-router/web/api/history) prop を使用することもできます。
 
 ```tsx
 <IonButton
@@ -238,7 +238,7 @@ Using `history.go()` in Ionic React is not supported at the moment. Interested i
 
 ## URL Parameters
 
-Dashboard Pageで定義された2番目のルートには、URLパラメーターが定義されています（パスの ":id" 部分）。 URLパラメーターは `path` の動的な部分であり、ユーザーが "/dashboard/users/1" などのURLに移動すると、"1" はルートがレンダリングするコンポーネント上で "id" という名前のパラメーターに保存されます。それがどのように行われるかを見てみましょう。
+Dashboard Page で定義された 2 番目のルートには、URL パラメーターが定義されています（パスの ":id" 部分）。 URL パラメーターは `path` の動的な部分であり、ユーザーが "/dashboard/users/1" などの URL に移動すると、"1" はルートがレンダリングするコンポーネント上で "id" という名前のパラメーターに保存されます。それがどのように行われるかを見てみましょう。
 
 **UserDetailPage.tsx**
 
@@ -262,9 +262,9 @@ const UserDetailPage: React.FC<UserDetailPageProps> = ({ match }) => {
 };
 ```
 
-[`match`](https://reacttraining.com/react-router/web/api/match) prop には、URLパラメーターなど、一致したルートに関する情報が含まれます。 ここで `id` パラメータを取得し、画面に表示します。
+[`match`](https://reacttraining.com/react-router/web/api/match) prop には、URL パラメーターなど、一致したルートに関する情報が含まれます。 ここで `id` パラメータを取得し、画面に表示します。
 
-> Note: TypeScriptインターフェイスを使用して props オブジェクトを厳密に入力する方法に注意してください。 このインターフェースにより、コンポーネント内部でタイプセーフティとコード補完が可能になります。
+> Note: TypeScript インターフェイスを使用して props オブジェクトを厳密に入力する方法に注意してください。 このインターフェースにより、コンポーネント内部でタイプセーフティとコード補完が可能になります。
 
 ## Linear Routing versus Non-Linear Routing
 
@@ -562,11 +562,11 @@ If you would prefer to get hands on with the concepts and code described above,
 
 ### IonRouterOutlet in a Tabs View
 
-Tabビューで作業する場合、Ionic Reactには、どのビューがどのTabに属しているかを判断する方法が必要です。これは、 `Route` に提供されるパスが正規表現であるという事実を利用することにより実現します。
+Tab ビューで作業する場合、Ionic React には、どのビューがどの Tab に属しているかを判断する方法が必要です。これは、 `Route` に提供されるパスが正規表現であるという事実を利用することにより実現します。
 
 この構文は少し不思議に見えますが、理解すればかなり簡単です。
 
-例えば、2つのタブ (sessions と speakers) をもつビューのルートは次のように設定できます:
+例えば、2 つのタブ (sessions と speakers) をもつビューのルートは次のように設定できます:
 
 ```tsx
 <IonRouterOutlet>
@@ -576,11 +576,11 @@ Tabビューで作業する場合、Ionic Reactには、どのビューがどの
 </IonRouterOutlet>
 ```
 
-ナビゲートされたURLが "/sessions" の場合、最初のルートと一致します。 "tab" というURLパラメーターに "sessions" の値を格納して、 `match` オブジェクトに `SessionsPage` として追加します。
+ナビゲートされた URL が "/sessions" の場合、最初のルートと一致します。 "tab" という URL パラメーターに "sessions" の値を格納して、 `match` オブジェクトに `SessionsPage` として追加します。
 
-ユーザーがセッションの詳細ページ（たとえば "/sessions/1" ）に移動すると、2番目のルートは "tabs" というURLパラメーターに "sessions" という値を追加します。 `IonRouterOutlet` は、両方のページが同じ "sessions" タブにあることを認識すると、新しいビューへのアニメーションページ遷移を提供します。 ユーザーが新しいタブ（この場合は "speakers" ）に移動すると、 `IonRouterOutlet` はアニメーションを提供しないことを認識します。
+ユーザーがセッションの詳細ページ（たとえば "/sessions/1" ）に移動すると、2 番目のルートは "tabs" という URL パラメーターに "sessions" という値を追加します。 `IonRouterOutlet` は、両方のページが同じ "sessions" タブにあることを認識すると、新しいビューへのアニメーションページ遷移を提供します。 ユーザーが新しいタブ（この場合は "speakers" ）に移動すると、 `IonRouterOutlet` はアニメーションを提供しないことを認識します。
 
-### IonRouterOutletの `Switch`
+### IonRouterOutlet の `Switch`
 
 `IonRouterOutlet` は、どのルートをレンダリングするかを決定する仕事を引き継ぐので、React Router の `Switch` を `IonRouterOutlet` の内部で使用しても効果はない。スイッチは `IonRouterOutlet` の外部で使用されても、期待通りに機能します。
 
@@ -643,7 +643,7 @@ const MyComponent: React.FC = () => {
 
 ## More Information
 
-React Routerを使用したReactでのルーティングの詳細については、次の [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web) でドキュメントをご覧ください。
+React Router を使用した React でのルーティングの詳細については、次の [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web) でドキュメントをご覧ください。
 
 ## From the Community
 
diff --git a/docs/react/overview.md b/docs/react/overview.md
index a9ad0ccd6df..b042b1b7a78 100644
--- a/docs/react/overview.md
+++ b/docs/react/overview.md
@@ -1,12 +1,12 @@
-# Ionic Reactの概要
+# Ionic React の概要
 
-`@ionic/react` はIonic Coreに、React開発者向けにカスタマイズされたツールとAPIを組み合わせたものです。
+`@ionic/react` は Ionic Core に、React 開発者向けにカスタマイズされたツールと API を組み合わせたものです。
 
 :::note
 The first official version of Ionic React is v4.11.
 :::
 
-最初に、Ionic CLIをインストールします:
+最初に、Ionic CLI をインストールします:
 
 ```shell
 npm install -g @ionic/cli
@@ -18,7 +18,7 @@ npm install -g @ionic/cli
 ionic start myAppName
 ```
 
-CLIは、使用するフレームワーク(もちろんReact!)と利用するスターターテンプレートを含むいくつかの質問をすることで、セットアップ・プロセスを案内します。
+CLI は、使用するフレームワーク(もちろん React!)と利用するスターターテンプレートを含むいくつかの質問をすることで、セットアップ・プロセスを案内します。
 
 アプリを作成したら、アプリを起動します:
 
@@ -28,18 +28,18 @@ ionic serve
 
 もう [Ionic UI components](../components.md) を使ってアプリの開発をはじめることができます。
 
-## Reactバージョンサポート
+## React バージョンサポート
 
-Reactバージョン16.8以降と互換性があります。
+React バージョン 16.8 以降と互換性があります。
 
-## Reactツール
+## React ツール
 
-Ionic ReactプロジェクトはReactプロジェクトそのものようなもので、 [react-dom](https://reactjs.org/docs/react-dom.html) を活用して,一般的な [Create React App (CRA)](https://github.com/facebook/create-react-app) のセットアップを利用しています。 [routing and navigation](navigation.md) では、React Routerを内部で使用します。
+Ionic React プロジェクトは React プロジェクトそのものようなもので、 [react-dom](https://reactjs.org/docs/react-dom.html) を活用して,一般的な [Create React App (CRA)](https://github.com/facebook/create-react-app) のセットアップを利用しています。 [routing and navigation](navigation.md) では、React Router を内部で使用します。
 
-1つの違いは、 [TypeScript](http://www.typescriptlang.org/) を使用することで、生産性が向上していることです。プレーンJavaScriptを使用するには、ファイル名を `.js` に変更します。次に、各ファイルの型注釈を削除します。
+1 つの違いは、 [TypeScript](http://www.typescriptlang.org/) を使用することで、生産性が向上していることです。プレーン JavaScript を使用するには、ファイル名を `.js` に変更します。次に、各ファイルの型注釈を削除します。
 
 ## ネイティブツール
 
-[Capacitor](https://capacitorjs.com) は `Ionic React` でつくられたWebアプリを、iOS、Android、ElectronとWebでネイティブに実行するために利用することができる公式のクロスプラットフォームアプリライブラリです。
+[Capacitor](https://capacitorjs.com) は `Ionic React` でつくられた Web アプリを、iOS、Android、Electron と 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/docs/react/platform.md b/docs/react/platform.md
index 8f83ee4a7f6..4c692c014c3 100644
--- a/docs/react/platform.md
+++ b/docs/react/platform.md
@@ -10,7 +10,7 @@ import { isPlatform } from '@ionic/react';
 isPlatform('ios'); // iOSデバイスで実行されてる時は true を返します
 ```
 
-ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPadから実行するアプリは、mobile、ios、ipad、およびtabletのプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordovaもtrueになります。
+ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPad から実行するアプリは、mobile、ios、ipad、および tablet のプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordova も true になります。
 
 ## getPlatforms
 
@@ -22,8 +22,7 @@ import { getPlatforms } from '@ionic/react';
 getPlatforms(); // iPhoneの場合 ["iphone", "ios", "mobile", "mobileweb"] を返します
 ```
 
-
-使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhoneでは、mobile、ios、およびiphoneが返されます。
+使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhone では、mobile、ios、および iphone が返されます。
 
 ## Platforms
 
diff --git a/docs/react/pwa.md b/docs/react/pwa.md
index 1b14e26032e..f5d7a1a7fc7 100644
--- a/docs/react/pwa.md
+++ b/docs/react/pwa.md
@@ -47,9 +47,9 @@ As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create Re
 
 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 Application 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.
 
-PWAの主な要件は、 <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> と <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a> の2つです。これらの両方を手動でアプリに追加することは可能ですが、Create React App (CRA)とIonic CLIのベースプロジェクトがこれらをすでに提供しています。
+PWA の主な要件は、 <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> と <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a> の 2 つです。これらの両方を手動でアプリに追加することは可能ですが、Create React App (CRA)と Ionic CLI のベースプロジェクトがこれらをすでに提供しています。
 
-アプリケーションの  `index.ts` には、`serviceWorker.unregister()` 関数の呼び出しがあります。基本CRAが提供するservice workersはオプトイン機能なので、有効にする必要があります。
+アプリケーションの `index.ts` には、`serviceWorker.unregister()` 関数の呼び出しがあります。基本 CRA が提供する service workers はオプトイン機能なので、有効にする必要があります。
 有効にするには、`serviceWorker.register ()`を呼び出します。
 
 ```ts
@@ -72,31 +72,31 @@ root.render(
 serviceWorkerRegistration.register();
 ```
 
-このパッケージを追加したら、 `ionic build` を実行し、 `build` ディレクトリをPWAとしてデプロイする準備ができます。
+このパッケージを追加したら、 `ionic build` を実行し、 `build` ディレクトリを PWA としてデプロイする準備ができます。
 
 :::note
-デフォルトでは、Reactアプリのパッケージには、アプリアイコン用のIonicロゴが付属しています。正しいアプリケーション名を使用するようにmanifestを更新し、アイコンを置き換えてください。
+デフォルトでは、React アプリのパッケージには、アプリアイコン用の Ionic ロゴが付属しています。正しいアプリケーション名を使用するように manifest を更新し、アイコンを置き換えてください。
 :::
 
 :::note
-Service Workersや多くのJavaScript API (位置情報など)のような機能は、セキュアなコンテキストでアプリをホストする必要があります。ホスティングサービスを介してアプリケーションを配備する場合は、Service Workersを最大限に活用するためにHTTPSが必要になることに注意してください。
+Service Workers や多くの JavaScript API (位置情報など)のような機能は、セキュアなコンテキストでアプリをホストする必要があります。ホスティングサービスを介してアプリケーションを配備する場合は、Service Workers を最大限に活用するために HTTPS が必要になることに注意してください。
 :::
 
-###  Service Workerの設定
+### Service Worker の設定
 
-デフォルトでは、CRA/React Scriptには [WorkboxのWebpackプラグイン](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいて事前設定されたService Workerセットアップが付属しています。これはキャッシュファースト戦略を利用しており、ネットワークが新しいバージョンのアプリを返しても、アプリはキャッシュからロードされます。
+デフォルトでは、CRA/React Script には [Workbox の Webpack プラグイン](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいて事前設定された Service Worker セットアップが付属しています。これはキャッシュファースト戦略を利用しており、ネットワークが新しいバージョンのアプリを返しても、アプリはキャッシュからロードされます。
 
-CRA/React Scriptsの性質上、この設定はReact Scriptsの内部で行われるため、React Scriptsから抽出しない限りはカスタマイズできません。現在、Ionic CLIはReact Appのイジェクトをサポートしていないため、このアクションを実行する場合は、Ionic CLIの代わりにnpm/yearスクリプトを使用する必要があります。
+CRA/React Scripts の性質上、この設定は React Scripts の内部で行われるため、React Scripts から抽出しない限りはカスタマイズできません。現在、Ionic CLI は React App のイジェクトをサポートしていないため、このアクションを実行する場合は、Ionic CLI の代わりに npm/year スクリプトを使用する必要があります。
 
 ### デプロイ
 
 #### Firebase
 
-FirebaseホスティングはProgressive Web Appsに多くの利点を提供しており、CDNによる高速応答、デフォルトで有効になっているHTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
+Firebase ホスティングは Progressive Web Apps に多くの利点を提供しており、CDN による高速応答、デフォルトで有効になっている HTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
 
-まず、まだ使用していない場合は、Firebaseで [プロジェクトを作成](https://console.firebase.google.com) します。
+まず、まだ使用していない場合は、Firebase で [プロジェクトを作成](https://console.firebase.google.com) します。
 
-次にターミナルでFirebase CLIをインストールします:
+次にターミナルで Firebase CLI をインストールします:
 
 ```shell
 npm install -g firebase-tools
@@ -112,7 +112,7 @@ With the Firebase CLI installed, run `firebase init` within your Ionic project.
 
 Create a new Firebase project or select an existing one.
 
-**"Select a default Firebase project for this directory:"** FirebaseのWebサイト上で作成したプロジェクトを選択します。
+**"Select a default Firebase project for this directory:"** Firebase の Web サイト上で作成したプロジェクトを選択します。
 
 **"What do you want to use as your public directory?"** "dist" を選択ください。
 
diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index 0475a234544..c884e42d54e 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -11,23 +11,23 @@ sidebar_label: クイックスタート
   />
 </head>
 
-## Ionic Frameworkとは
+## Ionic Framework とは
 
-まず、ここに来たばかりの人を歓迎します！Ionic Frameworkは、 iOS, Android, Electron, Web上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
+まず、ここに来たばかりの人を歓迎します！Ionic Framework は、 iOS, Android, Electron, Web 上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
 
-UIコンポーネントに加えて、Ionic Frameworkは新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
+UI コンポーネントに加えて、Ionic Framework は新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
 
-このガイドでは、Ionic Framework特有の機能を含め、ReactとIonic Frameworkの基本について説明します。Reactに精通している方は、ガイドを楽しみ、Ionic Frameworkについて新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
+このガイドでは、Ionic Framework 特有の機能を含め、React と Ionic Framework の基本について説明します。React に精通している方は、ガイドを楽しみ、Ionic Framework について新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
 
-## Ionic CLIを使ったプロジェクト新規作成
+## Ionic CLI を使ったプロジェクト新規作成
 
-はじめに、Ionic CLIの最新版をインストールしましょう。
+はじめに、Ionic CLI の最新版をインストールしましょう。
 
 ```shell
 npm install -g @ionic/cli
 ```
 
-これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Frameworkと他の依存関係を持つReactプロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
+これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Framework と他の依存関係を持つ React プロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
 
 ```shell
 ionic start myApp blank --type=react
@@ -36,7 +36,7 @@ cd myApp
 
 これで、 `ionic serve` を実行することによって、プロジェクトをブラウザで実行することができます。
 
-## Reactコンポーネントの確認
+## React コンポーネントの確認
 
 アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `index.tsx` になります。エディタでプロジェクトを開き、`index.tsx` を確認すると、次のように表示されます:
 
@@ -48,11 +48,11 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-ここでは何が処理されてるでしょう。最初の3行はいくつかの依存関係をimportしています。1つ目はReact自身です。これにより、JSXと呼ばれるHTMLに似た構文でコンポーネントを記述できるようになります。JSXについては後ほど説明します。
+ここでは何が処理されてるでしょう。最初の 3 行はいくつかの依存関係を import しています。1 つ目は React 自身です。これにより、JSX と呼ばれる HTML に似た構文でコンポーネントを記述できるようになります。JSX については後ほど説明します。
 
-2番目のimportはReactDOMです。 `ReactDOM.render` メソッドは、コンポーネントを取得し、指定されたDOMノードにレンダリングするためのbrowser/DOM固有の方法です。
+2 番目の import は ReactDOM です。 `ReactDOM.render` メソッドは、コンポーネントを取得し、指定された DOM ノードにレンダリングするための browser/DOM 固有の方法です。
 
-最後のインポートは、単純に `App` という名前のアプリケーションのルートコンポーネントです。これは私たちの最初のReactコンポーネントであり、Reactアプリの起動処理で使用されます。
+最後のインポートは、単純に `App` という名前のアプリケーションのルートコンポーネントです。これは私たちの最初の React コンポーネントであり、React アプリの起動処理で使用されます。
 
 `App.tsx` を開くと、以下のコードが確認できます。
 
@@ -78,7 +78,7 @@ const App: React.FC = () => (
 );
 ```
 
-一見、多くのことが起こっているように見えるかもしれないので、最初のimportからみていきましょう。
+一見、多くのことが起こっているように見えるかもしれないので、最初の import からみていきましょう。
 
 ```tsx
 import React from 'react';
@@ -88,19 +88,19 @@ import { IonReactRouter } from '@ionic/react-router';
 import Home from './pages/Home';
 ```
 
-`index.tsx` に似ていますが、まずReactをインポートしてJSXを使用できるようにする必要があります。
+`index.tsx` に似ていますが、まず React をインポートして JSX を使用できるようにする必要があります。
 
-次のインポートは `react-router-dom` からです。Routeをインポートし、アプリのURLとレンダリングしたいコンポーネントをマッチさせます。
+次のインポートは `react-router-dom` からです。Route をインポートし、アプリの URL とレンダリングしたいコンポーネントをマッチさせます。
 
-ReactRouterに続いて、Ionicをimportします。Reactでコンポーネントを使用する前にimportする必要があります。Ionicの場合、ButtonやCardを使いたい時はいつもimportしなければなりません。Appコンポーネントの場合は、 `IonApp`、 `IonRouterOutlet` 、および `IonReactRouter` を使用します。
+ReactRouter に続いて、Ionic を import します。React でコンポーネントを使用する前に import する必要があります。Ionic の場合、Button や Card を使いたい時はいつも import しなければなりません。App コンポーネントの場合は、 `IonApp`、 `IonRouterOutlet` 、および `IonReactRouter` を使用します。
 
-`IonReactRouter` は、ReactRouterのBrowserRouterコンポーネントをラップするコンポーネントです。多少の違いはありますが、BrowserRouterと同じように動作します。これらの違いについては、 [React Navigation Docs](navigation.md) で詳しく説明しています。
+`IonReactRouter` は、ReactRouter の BrowserRouter コンポーネントをラップするコンポーネントです。多少の違いはありますが、BrowserRouter と同じように動作します。これらの違いについては、 [React Navigation Docs](navigation.md) で詳しく説明しています。
 
 最後の重要なインポートは `Home` コンポーネントのインポートです。これは、このアプリケーションでナビゲートできるコンポーネントです。ナビゲーション部分については、後で説明します。
 
-CSSのimportはIonicからpaddingやtypographyなどのユーティリティスタイルを取り込んでいます。
+CSS の import は Ionic から padding や typography などのユーティリティスタイルを取り込んでいます。
 
-すべてのimportを確認したので、続いてReact Componentを初めて見てみましょう。
+すべての import を確認したので、続いて React Component を初めて見てみましょう。
 
 ```tsx
 const App: React.FC = () => (
@@ -115,15 +115,15 @@ const App: React.FC = () => (
 );
 ```
 
-このReactコンポーネントは、アプリの初期ルーティングをセットアップし、アニメーションとレイアウトのためのいくつかの重要なIonicコンポーネントを含んでいます(IonRouterOutletとIonApp)。一見変わった書き方にみえますが、Reactではデータバインディングを行うために、値が中括弧 (`{}`) で渡されることに注目してください。つまり `Route` コンポーネントでは、 `component` の値を以前の `Home` コンポーネントに設定しています。これにより、Reactはその値が文字列ではなくコンポーネントへの参照であることを認識します。
+この React コンポーネントは、アプリの初期ルーティングをセットアップし、アニメーションとレイアウトのためのいくつかの重要な Ionic コンポーネントを含んでいます(IonRouterOutlet と IonApp)。一見変わった書き方にみえますが、React ではデータバインディングを行うために、値が中括弧 (`{}`) で渡されることに注目してください。つまり `Route` コンポーネントでは、 `component` の値を以前の `Home` コンポーネントに設定しています。これにより、React はその値が文字列ではなくコンポーネントへの参照であることを認識します。
 
 :::note
-ここで重要なのは、これらはすべて標準のReact DOMライブラリであり、カスタムの統合レイヤや変換ステップがないことです。
+ここで重要なのは、これらはすべて標準の React DOM ライブラリであり、カスタムの統合レイヤや変換ステップがないことです。
 :::
 
 ## コンポーネントのスタイル
 
-`App` を変更することはあまりありません。これは、コンテナ・コンポーネントの基本的な例です。Routerのロジックでは、指定されたURLルートに一致するコンポーネントをレンダリングするだけです。すでに1つのコンポーネント/ルータが設定されているので、`Home` コンポーネントを変更します。
+`App` を変更することはあまりありません。これは、コンテナ・コンポーネントの基本的な例です。Router のロジックでは、指定された URL ルートに一致するコンポーネントをレンダリングするだけです。すでに 1 つのコンポーネント/ルータが設定されているので、`Home` コンポーネントを変更します。
 
 現在、 `Home` コンポーネントはこうなっています:
 
@@ -156,22 +156,22 @@ const Home: React.FC = () => {
 };
 ```
 
-最初の `App` コンポーネントと同じように、特定のIonicコンポーネントのimport、Reactコンポーネントのimport、そしてReactコンポーネント自体のimportがあります。
+最初の `App` コンポーネントと同じように、特定の Ionic コンポーネントの import、React コンポーネントの import、そして React コンポーネント自体の import があります。
 
-`IonPage` は、すべてのページ(ルート/URLを持つコンポーネント)のベースコンポーネントであり、Header、Title、Contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素を含んでいます。
+`IonPage` は、すべてのページ(ルート/URL を持つコンポーネント)のベースコンポーネントであり、Header、Title、Content コンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素を含んでいます。
 
 :::note
-独自のページを作成するときは、 `IonPage` をそのルートコンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、トランジションが正しく動作することを保証し、Ionicコンポーネントが依存するベースCSSを提供するために重要です。
+独自のページを作成するときは、 `IonPage` をそのルートコンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、トランジションが正しく動作することを保証し、Ionic コンポーネントが依存するベース CSS を提供するために重要です。
 :::
 
-`IonHeader` は、ページの先頭に存在することを意図したコンポーネントです。`IonHeader` 自体は、いくつかのflexboxのレイアウトを処理する以外は、ほとんど何もしません。これは、`IonToolbar` や `IonSearchbar` などの他のコンポーネントを保持するためのものです。
+`IonHeader` は、ページの先頭に存在することを意図したコンポーネントです。`IonHeader` 自体は、いくつかの flexbox のレイアウトを処理する以外は、ほとんど何もしません。これは、`IonToolbar` や `IonSearchbar` などの他のコンポーネントを保持するためのものです。
 
 `IonContent` はその名の通り、私たちのページのメインコンテンツ領域です。ユーザーが操作するスクロール可能なコンテンツと、アプリで使用できるスクロールイベントを提供する責任をもっています。
 
 私たちの現在のコンテンツは比較的シンプルが、実際のアプリで使えるようなものは何も含まれていません。
 
 :::note
-簡潔にするために、他のコンポーネントの関数宣言やimport文など、コンポーネントの繰り返し部分を除外しています。
+簡潔にするために、他のコンポーネントの関数宣言や import 文など、コンポーネントの繰り返し部分を除外しています。
 :::
 
 ```tsx
@@ -194,7 +194,7 @@ const Home: React.FC = () => {
 </IonPage>
 ```
 
-この `IonContent` では、 `IonList` と、さらに複雑な `IonItem`  コンポーネントを追加します。ここでは `IonItem`  を中心に見ていきます。
+この `IonContent` では、 `IonList` と、さらに複雑な `IonItem` コンポーネントを追加します。ここでは `IonItem` を中心に見ていきます。
 
 ```tsx
 <IonItem>
@@ -209,11 +209,11 @@ const Home: React.FC = () => {
 </IonItem>
 ```
 
-ItemはReactの概念とWeb Componentの概念が混在していることを明確に示す重要な要素です。Reactの概念の最初の明確な例は、 `IonCheckbox` のReactコンポーネントの自己終了タグです。これは、子コンテンツを含まないコンポーネントを記述する単純な方法です。
+Item は React の概念と Web Component の概念が混在していることを明確に示す重要な要素です。React の概念の最初の明確な例は、 `IonCheckbox` の React コンポーネントの自己終了タグです。これは、子コンテンツを含まないコンポーネントを記述する単純な方法です。
 
-Webコンポーネント側には、 `slot` という特殊な属性があります。これは、レンダリング時に `IonItem` に `IonCheckbox` を配置する場所を知らせるためのキーです。これはReact APIではなく、Web標準APIです。
+Web コンポーネント側には、 `slot` という特殊な属性があります。これは、レンダリング時に `IonItem` に `IonCheckbox` を配置する場所を知らせるためのキーです。これは React API ではなく、Web 標準 API です。
 
-Ionic Frameworkの別のコンポーネントであるFAB（フローティング・アクション・ボタン）を見てみましょう。FABは、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。このFABには、FAB、FABボタンおよびアイコンの3つのコンポーネントが必要です。
+Ionic Framework の別のコンポーネントである FAB（フローティング・アクション・ボタン）を見てみましょう。FAB は、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。この FAB には、FAB、FAB ボタンおよびアイコンの 3 つのコンポーネントが必要です。
 
 ```tsx
 import { add } from ‘ionicons/icons’;
@@ -233,7 +233,7 @@ import { add } from ‘ionicons/icons’;
 </IonContent>
 ```
 
-メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
+メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot 属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
 
 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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package.
 
@@ -260,15 +260,15 @@ const Home: React.FC<RouteComponentProps> = () => {
 export default Home;
 ```
 
-コンポーネント宣言では、`RouteComponentProps` 型 (`react-router` からimport)の `props` を渡しています。この `props`オブジェクトは、React Routerから履歴APIへのアクセスを提供し、新しいルートをナビゲーション・スタックにプッシュできるようにします。`IonFabButton` では、クリックハンドラーを追加し、 `props.history.push` を呼び出して新しいルートを渡すだけです。この場合は、 `new` に移動します。
+コンポーネント宣言では、`RouteComponentProps` 型 (`react-router` から import)の `props` を渡しています。この `props`オブジェクトは、React Router から履歴 API へのアクセスを提供し、新しいルートをナビゲーション・スタックにプッシュできるようにします。`IonFabButton` では、クリックハンドラーを追加し、 `props.history.push` を呼び出して新しいルートを渡すだけです。この場合は、 `new` に移動します。
 
 ```tsx
 <IonFabButton onClick={() => props.history.push('/new')} >
 ```
 
-## 新しいRouteの作成
+## 新しい Route の作成
 
-これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しいrouteをルーターの宣言に追加する必要があります。 `App.tsx` を開いて、 `new` のrouteを追加します。
+これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しい route をルーターの宣言に追加する必要があります。 `App.tsx` を開いて、 `new` の route を追加します。
 
 ```tsx
 ...
@@ -293,7 +293,7 @@ const App: React.FC = () => {
 export default App;
 ```
 
-ルータにroute `/new` のエントリが追加されたので、必要なコンポーネント `NewItem` を作成します。これは `src/pages/NewItem.tsx` にあります。
+ルータに route `/new` のエントリが追加されたので、必要なコンポーネント `NewItem` を作成します。これは `src/pages/NewItem.tsx` にあります。
 
 とりあえず、 `NewItem.tsx` にプレースホルダの内容を入力してみましょう。
 
@@ -325,7 +325,7 @@ Each view must contain an `IonPage` component. Page transitions will not work co
 
 ここの内容は非常に単純で、 `Home` コンポーネントに似ているはずです。新しいのは `IonBackButton` コンポーネントです。これは、前のルートに戻るために使用されます。まっすぐ前に?では、ページをリロードしたらどうなりますか?
 
-この場合、メモリ内の履歴が失われるため、戻るボタンが消えます。これに対処するには、 `defaultHref` 属性値を、履歴がない場合にナビゲートするURLに設定します。
+この場合、メモリ内の履歴が失われるため、戻るボタンが消えます。これに対処するには、 `defaultHref` 属性値を、履歴がない場合にナビゲートする URL に設定します。
 
 ```tsx
 return (
@@ -384,9 +384,9 @@ export const IconExample: React.FC = () => {
 
 ## Build a Native App
 
-UIコンポーネントやナビゲーションなど、Ionic Reactアプリの基本的な部分はすでに完成しています。Ionic Frameworkのコンポーネントの素晴らしいところは、iOS、Android、PWAを含むどこでも動作することです。モバイル、デスクトップ、その他にもデプロイするために、Ionicのクロスプラットフォームライブラリ [Capacitor](https://capacitorjs.com) を使用することができます。一貫性のあるWebに特化したAPIセットを提供することで、 Web標準をサポートするプラットフォーム上の豊富なネイティブデバイス機能にアクセスしながら、アプリケーションを可能な限りWeb標準に近づけることが可能になります。
+UI コンポーネントやナビゲーションなど、Ionic React アプリの基本的な部分はすでに完成しています。Ionic Framework のコンポーネントの素晴らしいところは、iOS、Android、PWA を含むどこでも動作することです。モバイル、デスクトップ、その他にもデプロイするために、Ionic のクロスプラットフォームライブラリ [Capacitor](https://capacitorjs.com) を使用することができます。一貫性のある Web に特化した API セットを提供することで、 Web 標準をサポートするプラットフォーム上の豊富なネイティブデバイス機能にアクセスしながら、アプリケーションを可能な限り Web 標準に近づけることが可能になります。
 
-ネイティブ機能を追加するのは簡単で、最初にプロジェクトにCapacitorを追加します:
+ネイティブ機能を追加するのは簡単で、最初にプロジェクトに Capacitor を追加します:
 
 ```shell
 ionic integrations enable capacitor
@@ -400,7 +400,7 @@ ionic cap add ios
 ionic cap add android
 ```
 
-iOSとAndroidのプロジェクトを開いたり、ビルド、実行するのに、ネイティブのIDE(Xcode と Android Studio)を使います:
+iOS と Android のプロジェクトを開いたり、ビルド、実行するのに、ネイティブの IDE(Xcode と Android Studio)を使います:
 
 ```shell
 ionic cap open ios
@@ -409,7 +409,7 @@ ionic cap open android
 
 詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
 
-次に、 [すべての利用可能なAPIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
+次に、 [すべての利用可能な APIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
 
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
@@ -447,8 +447,8 @@ export default Home;
 
 ## 次にすること
 
-このガイドでは、Ionic Reactアプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としてのCapacitorの紹介について説明した。ReactとCapacitorで完全なIonicアプリを作るには、[First App guide](your-first-app.md)を参照してください。
+このガイドでは、Ionic React アプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としての Capacitor の紹介について説明した。React と Capacitor で完全な Ionic アプリを作るには、[First App guide](your-first-app.md)を参照してください。
 
-Ionicのコンポーネントの詳細は [component API pages](https://ionicframework.com/docs/components) をチェックしてほしい。Reactの詳細については、 [React Docs](https://reactjs.org/) を参照ください。ネイティブ機能の構築を続けるには、 [Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
+Ionic のコンポーネントの詳細は [component API pages](https://ionicframework.com/docs/components) をチェックしてほしい。React の詳細については、 [React Docs](https://reactjs.org/) を参照ください。ネイティブ機能の構築を続けるには、 [Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
 
 アプリ構築をお楽しみください! 🎉
diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md
index fffb404019c..4387363afee 100644
--- a/docs/reference/browser-support.md
+++ b/docs/reference/browser-support.md
@@ -10,11 +10,11 @@ title: ブラウザサポート
   />
 </head>
 
-Ionicの本来の目標は、HTML、CSS、JavaScriptといったWeb技術を使用してモバイルアプリを開発することを簡単にすることでした。Ionicはこのウェブテクノロジーの基盤により、ウェブ、iOS、Android、ブラウザ、PWAなど、どこでも実行できます。
+Ionic の本来の目標は、HTML、CSS、JavaScript といった Web 技術を使用してモバイルアプリを開発することを簡単にすることでした。Ionic はこのウェブテクノロジーの基盤により、ウェブ、iOS、Android、ブラウザ、PWA など、どこでも実行できます。
 
 ## モバイルブラウザ
 
-[スタイルの適用](../core-concepts/fundamentals.md#adaptive-styling)を追求するために, Ionicは以下のモバイルプラットフォームを完全にサポート、テストしています。:
+[スタイルの適用](../core-concepts/fundamentals.md#adaptive-styling)を追求するために, Ionic は以下のモバイルプラットフォームを完全にサポート、テストしています。:
 
 | Framework |        Android         |  iOS  |
 | :-------: | :--------------------: | :---: |
@@ -27,15 +27,15 @@ Ionicの本来の目標は、HTML、CSS、JavaScriptといったWeb技術を使
 最新のプラットフォームの情報については [latest Android stats](https://developer.android.com/about/dashboards/) と [latest iOS stats](https://developer.apple.com/support/app-store/) をご確認ください。
 :::
 
-### Android Supportの注意点
+### Android Support の注意点
 
-Android 5.0から、WebviewはAndroidから独立して更新できる別のアプリケーションに移されました。これは、ほとんどのAndroid 5.0以上のデバイスがChromiumの最新バージョンを実行していることを意味します。しかし、ウェブビューを更新することができないAndroidデバイスがまだ存在しています。これらのウェブビューは、通常、デバイスが最初に出荷されたときに利用可能だったバージョンに留まっています。
+Android 5.0 から、Webview は Android から独立して更新できる別のアプリケーションに移されました。これは、ほとんどの Android 5.0 以上のデバイスが Chromium の最新バージョンを実行していることを意味します。しかし、ウェブビューを更新することができない Android デバイスがまだ存在しています。これらのウェブビューは、通常、デバイスが最初に出荷されたときに利用可能だったバージョンに留まっています。
 
-デバイスが実行しているWebViewのバージョンを調べるには、Chrome Dev Toolsを使用してアプリケーションを検査する際に、コンソールに`window.navigator.userAgent`を記録してください。
+デバイスが実行している WebView のバージョンを調べるには、Chrome Dev Tools を使用してアプリケーションを検査する際に、コンソールに`window.navigator.userAgent`を記録してください。
 
 ## デスクトップブラウザ
 
-Ionicはウェブ技術をベースにしているため、モバイルデバイスと同じようにデスクトップブラウザーでも動作します。デスクトップのレイアウトについては、[クロスプラットフォーム](../core-concepts/cross-platform.md#desktop)を参照してください。
+Ionic はウェブ技術をベースにしているため、モバイルデバイスと同じようにデスクトップブラウザーでも動作します。デスクトップのレイアウトについては、[クロスプラットフォーム](../core-concepts/cross-platform.md#desktop)を参照してください。
 
 |   Browser   | Ionic v7 | Ionic v6 | Ionic v5 | Ionic v4 |
 | :---------: | :------: | :------: | :------: | :------: |
diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md
index 5771df70379..b5ec13f1739 100644
--- a/docs/reference/glossary.md
+++ b/docs/reference/glossary.md
@@ -21,8 +21,8 @@ title: 用語集
     <a href="http://developer.android.com/sdk/index.html" target="_blank">
       Android SDK
     </a>{' '}
-    は、Google の Android Platform の開発をする開発者向けに作られたソフトウェア開発キットです。
-    Android アプリケーションのビルド、テスト、デバッグ用のツールが含まれています。
+    は、Google の Android Platform の開発をする開発者向けに作られたソフトウェア開発キットです。 Android
+    アプリケーションのビルド、テスト、デバッグ用のツールが含まれています。
   </p>
 </section>
 
@@ -46,9 +46,9 @@ title: 用語集
     <a href="https://github.com/postcss/autoprefixer" target="_blank">
       Autoprefixer
     </a>{' '}
-    は、ベンダー固有のプレフィックスを手書きの Sass/CSS コードに追加するツールです。
-    これにより、作成する標準化された CSS ルールが、サポートするすべてのブラウザに確実に適用されます。
-    たとえば、autoprefixer を使用すると、さまざまなブラウザで使用されるすべての flexbox 構文を知る必要がなく、
+    は、ベンダー固有のプレフィックスを手書きの Sass/CSS コードに追加するツールです。 これにより、作成する標準化された
+    CSS ルールが、サポートするすべてのブラウザに確実に適用されます。 たとえば、autoprefixer
+    を使用すると、さまざまなブラウザで使用されるすべての flexbox 構文を知る必要がなく、
     <code>display: flex;</code> と記述するだけで済み、かつ自動的に正しくCSSに差し込まれます。
   </p>
 </section>
@@ -58,8 +58,8 @@ title: 用語集
     <h3>Bundling</h3>
   </a>
   <p>
-    バンドルとは、アプリケーションの依存関係（自分で書いたコードと任意にインストールされている npm モジュール）を取得し、
-    コンパイル/トランスパイルすることで一つのファイルに落とし込むプロセスです。
+    バンドルとは、アプリケーションの依存関係（自分で書いたコードと任意にインストールされている npm
+    モジュール）を取得し、 コンパイル/トランスパイルすることで一つのファイルに落とし込むプロセスです。
   </p>
 </section>
 
@@ -72,9 +72,10 @@ title: 用語集
       Capacitor
     </a>{' '}
     は、web ベースのアプリケーションをネイティブの iOS、Android、Electron、web上で実行できるようにするオープンソースの
-    クロスプラットフォームアプリランタイムです。
-    「ネイティブのプログレッシブ Web アプリケーション」を示すこれらのアプリはとても参考になり、
-    それらは従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitor は Ionic 社によって作られ、活発に開発/サポートされています。
+    クロスプラットフォームアプリランタイムです。 「ネイティブのプログレッシブ Web
+    アプリケーション」を示すこれらのアプリはとても参考になり、
+    それらは従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitor は Ionic
+    社によって作られ、活発に開発/サポートされています。
   </p>
 </section>
 
@@ -83,15 +84,16 @@ title: 用語集
     <h3>CLI</h3>
   </a>
   <p>
-    CLI、または <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface はプログラムと互いに作用し合う、
-    テキストベースのインターフェースです。Mac ユーザの共通のコマンドラインアプリケーションは
-    Terminal アプリケーションであり、Windows ユーザによく使われるものはコマンドプロンプトです。
-    Ionic コミュニティでよく使われるものは、次に示すこの{' '}
+    CLI、または <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface
+    はプログラムと互いに作用し合う、 テキストベースのインターフェースです。Mac
+    ユーザの共通のコマンドラインアプリケーションは Terminal アプリケーションであり、Windows
+    ユーザによく使われるものはコマンドプロンプトです。 Ionic コミュニティでよく使われるものは、次に示すこの{' '}
     <a href="https://ionicframework.com/docs/cli">Ionic's CLI</a> というターミナルです。Ionic's CLI は、
     アプリケーションのプロダクションビルドの生成や、開発用のサーバーの起動、
-    <a href="https://ionic.io/appflow" target="_blank">Ionic の商用サービス</a>
-    へのアクセス{' '}など、様々なことに使われています
-    。
+    <a href="https://ionic.io/appflow" target="_blank">
+      Ionic の商用サービス
+    </a>
+    へのアクセス など、様々なことに使われています 。
   </p>
 </section>
 
@@ -116,9 +118,10 @@ title: 用語集
     <a href="https://cordova.apache.org" target="_blank">
       Apache Cordova
     </a>{' '}
-    は、標準の HTML/CSS/JS を本格的なネイティブアプリケーションに変換する、オープンソースのモバイルアプリケーション開発用フレームワークです。
-    実機のカメラや加速度計などのネイティブの機能にアクセスする JavaScript API を提供します。
-    Cordova は、ウェブアプリケーションを iOS、Android、Windows Phone にパッケージングするために必要なビルドツールを含みます。
+    は、標準の HTML/CSS/JS
+    を本格的なネイティブアプリケーションに変換する、オープンソースのモバイルアプリケーション開発用フレームワークです。
+    実機のカメラや加速度計などのネイティブの機能にアクセスする JavaScript API を提供します。 Cordova
+    は、ウェブアプリケーションを iOS、Android、Windows Phone にパッケージングするために必要なビルドツールを含みます。
   </p>
 </section>
 
@@ -153,12 +156,10 @@ title: 用語集
     <h3>Decorators</h3>
   </a>
   <p>
-    デコレータは、関数を返す式です。既存の関数を使用して、その動作を拡張できます。
-    TypeScript では、<i>クラス</i> や <i>パラメータ</i> を装飾することもできます。
-    <strong>クラス</strong> を装飾すると、そのコンストラクタの動作がラップおよび拡張されます。
-    つまり、デコレータはコンストラクタが呼び出されるといくつかの機能を追加し、独自のコンストラクタを返します。
-    <strong>パラメータ</strong> を修飾すると、
-    そのパラメータに渡される引数がラップされます。
+    デコレータは、関数を返す式です。既存の関数を使用して、その動作を拡張できます。 TypeScript では、<i>クラス</i> や{' '}
+    <i>パラメータ</i> を装飾することもできます。
+    <strong>クラス</strong> を装飾すると、そのコンストラクタの動作がラップおよび拡張されます。 つまり、デコレータはコンストラクタが呼び出されるといくつかの機能を追加し、独自のコンストラクタを返します。
+    <strong>パラメータ</strong> を修飾すると、 そのパラメータに渡される引数がラップされます。
     デコレータは、引数がメソッドに渡されると機能を追加し、独自の引数を返します。
   </p>
 </section>
@@ -168,8 +169,8 @@ title: 用語集
     <h3>ES5</h3>
   </a>
   <p>
-    ES5 とは EcmaScript 5th Edition のことです。
-    簡単に言えば、ES5 は今日開発者が最もよく知っている JavaScript のバージョンのことです。
+    ES5 とは EcmaScript 5th Edition のことです。 簡単に言えば、ES5 は今日開発者が最もよく知っている JavaScript
+    のバージョンのことです。
   </p>
 </section>
 
@@ -179,9 +180,10 @@ title: 用語集
   </a>
   <p>
     このバージョンの JavaScript には、クラス、モジュール、イテレーター、Promise など、
-    広範囲の新機能が導入されています。Evergreen のブラウザ(Chrome、Safari、Firefox、Edge)は
-    ES6 を完全にサポートしていますが、古いブラウザで ES6 の機能を使うには、<a href="#babel">Babel</a> や
-    <a href="#typescript">TypeScript</a> のようなツールが ES6 のコードを ES5 に<a href="#transpiler">変換</a>する必要があります。
+    広範囲の新機能が導入されています。Evergreen のブラウザ(Chrome、Safari、Firefox、Edge)は ES6
+    を完全にサポートしていますが、古いブラウザで ES6 の機能を使うには、<a href="#babel">Babel</a> や
+    <a href="#typescript">TypeScript</a> のようなツールが ES6 のコードを ES5 に<a href="#transpiler">変換</a>
+    する必要があります。
   </p>
 </section>
 
@@ -211,9 +213,9 @@ title: 用語集
     <h3>Genymotion</h3>
   </a>
   <p>
-    Genymotion はサードパーティーの Android エミュレータです。
-    非常に高速で、Android 上でアプリを素早くテストするのに便利だ。
-    詳しくは、Genymotion の<a href="../developing/tips#using-genymotion-android">リソースのセクション</a>を参照してください。
+    Genymotion はサードパーティーの Android エミュレータです。 非常に高速で、Android
+    上でアプリを素早くテストするのに便利だ。 詳しくは、Genymotion の
+    <a href="../developing/tips#using-genymotion-android">リソースのセクション</a>を参照してください。
   </p>
 </section>
 
@@ -266,9 +268,9 @@ title: 用語集
     <a href="https://ionic.io/ionicons/" target="_blank">
       Ionicons
     </a>{' '}
-    は Ionic社によって作成・利用されているオープンソースのアイコンのセットです。
-    1:1 で iOS とマテリアルデザインのアイコンと、よく使われるソーシャル/アプリケーションのアイコンを含みます。
-    Ionicons はデフォルトで Ionic ディストリビューションに含まれますが、任意のプロジェクトでも使うことが出来ます。
+    は Ionic社によって作成・利用されているオープンソースのアイコンのセットです。 1:1 で iOS
+    とマテリアルデザインのアイコンと、よく使われるソーシャル/アプリケーションのアイコンを含みます。 Ionicons
+    はデフォルトで Ionic ディストリビューションに含まれますが、任意のプロジェクトでも使うことが出来ます。
   </p>
 </section>
 
@@ -311,8 +313,10 @@ title: 用語集
   </a>
   <p>
     <strong>Live Reload</strong> (or <strong>live-reload</strong>) は、アプリケーションの変更を検出すると、
-    自動的にブラウザまたは{' '} <a href="../core-concepts/webview">Web View</a> をリロードするツールです。場合によっては、ウィンドウ全体をリロードしなくても、
-    アプリケーションの一部を置き換えることができます。ライブリロード には実行中の開発サーバーが必要なので、Web View にはデプロイされたファイルを単に読むのではなく、URLをロードする必要があるため、別のデバイスでライブリロードを使用するのは難しいかもしれません。詳しくは{' '}
+    自動的にブラウザまたは <a href="../core-concepts/webview">Web View</a>{' '}
+    をリロードするツールです。場合によっては、ウィンドウ全体をリロードしなくても、
+    アプリケーションの一部を置き換えることができます。ライブリロード には実行中の開発サーバーが必要なので、Web View
+    にはデプロイされたファイルを単に読むのではなく、URLをロードする必要があるため、別のデバイスでライブリロードを使用するのは難しいかもしれません。詳しくは{' '}
     <a href="../cli/livereload">Live Reload docs</a> を御覧ください。
   </p>
 </section>
@@ -325,8 +329,8 @@ title: 用語集
     <a href="https://nodejs.org/" target="_blank">
       Node
     </a>{' '}
-    は、サーバサイドで JavaScript を書くことができるランタイム環境です。
-    加えて、Node は Web サービスに使用されるだけでなく、<a href="#cli">Ionic CLI</a>などの開発者ツールの構築にもよく使用されます。
+    は、サーバサイドで JavaScript を書くことができるランタイム環境です。 加えて、Node は Web
+    サービスに使用されるだけでなく、<a href="#cli">Ionic CLI</a>などの開発者ツールの構築にもよく使用されます。
   </p>
 </section>
 
@@ -360,8 +364,7 @@ title: 用語集
   </a>
   <p>
     Apple 社が <strong>Bundle ID</strong> と呼び、Android 社が <strong>Application ID</strong> と呼ぶ
-    <strong>Package ID</strong> は、App Store/Play Store に公開されたアプリを識別するために使用されます。
-    これは
+    <strong>Package ID</strong> は、App Store/Play Store に公開されたアプリを識別するために使用されます。 これは
     <a href="https://en.wikipedia.org/wiki/Reverse_domain_name_notation" target="_blank">
       逆 DNS 表記
     </a>
@@ -378,8 +381,9 @@ title: 用語集
     <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank">
       polyfill
     </a>{' '}
-    は、ブラウザに機能を追加し、ブラウザの違いを標準化する少しのコードです。これは <a href="#shim">shim</a> と似ていますが、
-    shim に独自の API がある場合には、ブラウザに実装されていることを期待する API として polyfill を使用します。
+    は、ブラウザに機能を追加し、ブラウザの違いを標準化する少しのコードです。これは <a href="#shim">shim</a>{' '}
+    と似ていますが、 shim に独自の API がある場合には、ブラウザに実装されていることを期待する API として polyfill
+    を使用します。
   </p>
 </section>
 
@@ -391,8 +395,8 @@ title: 用語集
     <a href="https://angular.github.io/protractor/#/" target="_blank">
       Protractor
     </a>{' '}
-     Angular チームが開発したテストフレームワークです。Protractor は、エンドツーエンドのテストのために、
-     Karma のようなテストランナーと一緒に使うことができます。テストランナーを使用すると、コードの品質を高速かつプログラム的に検証できます。
+    Angular チームが開発したテストフレームワークです。Protractor は、エンドツーエンドのテストのために、 Karma
+    のようなテストランナーと一緒に使うことができます。テストランナーを使用すると、コードの品質を高速かつプログラム的に検証できます。
   </p>
 </section>
 
@@ -401,8 +405,7 @@ title: 用語集
     <h3>Sass</h3>
   </a>
   <p>
-    Sass は CSS にコンパイルされるスタイルシート言語で、Ionicで使用されています。
-    Sass は CSS に似ています: {' '}
+    Sass は CSS にコンパイルされるスタイルシート言語で、Ionicで使用されています。 Sass は CSS に似ています:{' '}
     <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_" target="_blank">
       変数
     </a>
@@ -458,8 +461,8 @@ title: 用語集
     <h3>Shim</h3>
   </a>
   <p>
-    Shim は、ブラウザ間で API を正規化するコードです。
-    Shim は、エンドユーザーからブラウザ固有の実装を隠すような独自の API を持つことができます。
+    Shim は、ブラウザ間で API を正規化するコードです。 Shim は、エンドユーザーからブラウザ固有の実装を隠すような独自の
+    API を持つことができます。
   </p>
 </section>
 
@@ -468,10 +471,11 @@ title: 用語集
     <h3>Transpiler</h3>
   </a>
   <p>
-    トランスパイル は、実行前にコードをある言語から別の言語に変換するプロセスです。一般的に、トランスパイルは高級言語を別の高級言語に変換します。
-    Ionic Framework の最も一般的な{' '}
-    <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>
-    (<a href="#typescript">TypeScript</a>) から <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
+    トランスパイル
+    は、実行前にコードをある言語から別の言語に変換するプロセスです。一般的に、トランスパイルは高級言語を別の高級言語に変換します。
+    Ionic Framework の最も一般的な <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>(<a href="#typescript">
+      TypeScript
+    </a>) から <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
   </p>
 </section>
 
@@ -491,7 +495,8 @@ title: 用語集
     <a href="http://www.typescriptlang.org/Handbook#interfaces" target="_blank">
       インターフェース
     </a>
-    などの多くの機能を追加した JavaScript を提供することを意味します。Ionic は TypeScript で構築されていますが、Ionic アプリの構築において TypeScript の使用は完全にオプショナルです。
+    などの多くの機能を追加した JavaScript を提供することを意味します。Ionic は TypeScript で構築されていますが、Ionic アプリの構築において
+    TypeScript の使用は完全にオプショナルです。
   </p>
 </section>
 
@@ -514,8 +519,8 @@ title: 用語集
       Webpack
     </a>{' '}
     は、JavaScript モジュールとその他のアセットを一緒にバンドルします。
-    これを使用して、必要なときにのみ読み込まれる単一の、または複数の「チャンク」を作成できます。
-    Webpack を使うと、多くのファイルや依存関係を1つのファイルか、他のタイプにまとめることができます。
+    これを使用して、必要なときにのみ読み込まれる単一の、または複数の「チャンク」を作成できます。 Webpack
+    を使うと、多くのファイルや依存関係を1つのファイルか、他のタイプにまとめることができます。
   </p>
 </section>
 
@@ -528,10 +533,11 @@ title: 用語集
     <a href="https://www.w3.org/" target="_blank">
       World Wide Web Consortium
     </a>{' '}
-     (W3C) は Web の標準化団体です。業界のリーダーと一般市民が協力して {' '}
-     <a href="https://www.w3.org/standards/" target="_blank">
-       Web 標準
-    </a>を開発します。Web 標準とは、Web プラットフォームを定義するプロトコル、仕様、および技術のセットです。
+    (W3C) は Web の標準化団体です。業界のリーダーと一般市民が協力して{' '}
+    <a href="https://www.w3.org/standards/" target="_blank">
+      Web 標準
+    </a>
+    を開発します。Web 標準とは、Web プラットフォームを定義するプロトコル、仕様、および技術のセットです。
   </p>
 </section>
 
@@ -543,10 +549,10 @@ title: 用語集
     <a href="https://developer.apple.com/xcode/" target="_blank">
       Xcode
     </a>{' '}
-    は Apple 社のオペレーティングシステム(macOS、iOS、watchOS、tvOS) 上でソフトウェア開発を行うための Apple IDE(統合開発環境)であり、
-    他の言語やプラットフォーム用の拡張機能を備えています。
-    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.
+    は Apple 社のオペレーティングシステム(macOS、iOS、watchOS、tvOS) 上でソフトウェア開発を行うための Apple
+    IDE(統合開発環境)であり、 他の言語やプラットフォーム用の拡張機能を備えています。 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>
 
diff --git a/docs/reference/support.md b/docs/reference/support.md
index 8759d06d58d..5247a56b163 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -12,7 +12,7 @@ title: サポートポリシー
 
 ## コミュニティメンテナンス
 
-Ionic Frameworkは当初から100%オープンソース(MIT)で、今後もオープンソースとして公開されます。開発者は、Ionicのコミュニティメンテナンス戦略を通して、Ionicが彼らのクロスプラットフォームアプリにとって正しい選択であることを保証することができます。Ionicチームは定期的に新しいリリースとバグ修正を提供しており、コミュニティからのプルリクエストを歓迎しています。
+Ionic Framework は当初から 100%オープンソース(MIT)で、今後もオープンソースとして公開されます。開発者は、Ionic のコミュニティメンテナンス戦略を通して、Ionic が彼らのクロスプラットフォームアプリにとって正しい選択であることを保証することができます。Ionic チームは定期的に新しいリリースとバグ修正を提供しており、コミュニティからのプルリクエストを歓迎しています。
 
 ## Framework Maintenance and Support Status
 
diff --git a/docs/reference/versioning.md b/docs/reference/versioning.md
index f945dfbdb85..2489fd44447 100644
--- a/docs/reference/versioning.md
+++ b/docs/reference/versioning.md
@@ -2,24 +2,27 @@
 
 <!-- TOC goes here -->
 
-Ionic Frameworkは<a href="https://semver.org/" target="_blank">Semantic Versioning (SemVer)</a>の形式: <code>メジャー.マイナー.パッチ.</code>に従います。互換性のないAPIの変更は<code>メジャー</code>バージョン、後方互換性のある機能を追加する時は<code>マイナー</code>バージョン、後方互換性のあるバグ修正は<code>パッチ</code>バージョンをあげます。
+Ionic Framework は<a href="https://semver.org/" target="_blank">Semantic Versioning (SemVer)</a>の形式: <code>メジャー.マイナー.パッチ.</code>に従います。互換性のない API の変更は<code>メジャー</code>バージョン、後方互換性のある機能を追加する時は<code>マイナー</code>バージョン、後方互換性のあるバグ修正は<code>パッチ</code>バージョンをあげます。
 
 ## リリーススケジュール
 
 ### メジャーリリース
 
-メジャーリリースは、APIに重大な変更が加えられたときに公開されます。メジャーリリースはおよそ**6ヶ月**ごとに行われ、重大な変更が含まれる可能性があります。フィードバックを得るために、いくつかのリリース候補がメジャーリリースの前に公開されます。何が変更されているのか、またその理由がリリース候補に含まれる予定です。
+メジャーリリースは、API に重大な変更が加えられたときに公開されます。メジャーリリースはおよそ**6 ヶ月**ごとに行われ、重大な変更が含まれる可能性があります。フィードバックを得るために、いくつかのリリース候補がメジャーリリースの前に公開されます。何が変更されているのか、またその理由がリリース候補に含まれる予定です。
 
 ### マイナーリリース
 
-マイナーリリースは、新しい機能が追加されたり、APIが変更されたりした場合に発行されます。私たちはリリースに自信を持てるよう、あらゆる変更を徹底的にテストしますが、新しいコードには新しい問題が発生する可能性があります。機能やAPIの変更があった場合、**4週間**ごとにマイナーバージョンをリリースする予定です。
+マイナーリリースは、新しい機能が追加されたり、API が変更されたりした場合に発行されます。私たちはリリースに自信を持てるよう、あらゆる変更を徹底的にテストしますが、新しいコードには新しい問題が発生する可能性があります。機能や API の変更があった場合、**4 週間**ごとにマイナーバージョンをリリースする予定です。
 
 ### パッチリリース
 
-パッチリリースは、バグフィックスが含まれているが、APIが変更されておらず、破壊的な変更が導入されていない場合に公開されます。私たちは新しいパッチバージョンを**毎週**リリースする予定ですが、予定より早く、または遅くリリースする必要がある場合があります。パッチリリースでは、新機能による新たな問題を発生させることなく、既存のコードを修正できるように、パッチリリースは常にマイナーリリースより前に公開されます。
+パッチリリースは、バグフィックスが含まれているが、API が変更されておらず、破壊的な変更が導入されていない場合に公開されます。私たちは新しいパッチバージョンを**毎週**リリースする予定ですが、予定より早く、または遅くリリースする必要がある場合があります。パッチリリースでは、新機能による新たな問題を発生させることなく、既存のコードを修正できるように、パッチリリースは常にマイナーリリースより前に公開されます。
 
 ## Changelog
 
-注目すべき変更点の一覧はchangelogで確認することができます。これには、
+注目すべき変更点の一覧は changelog で確認することができます。これには、
 各リリースでのすべてのバグ修正と新機能の一覧が含まれています。
-<a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md" target="_blank">changelog</a>
+
+<a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md" target="_blank">
+  changelog
+</a>
diff --git a/docs/studio/setup/installation.md b/docs/studio/setup/installation.md
index eb8708c20d8..d9a344ebeec 100644
--- a/docs/studio/setup/installation.md
+++ b/docs/studio/setup/installation.md
@@ -1,17 +1,17 @@
-# Studioのインストール
+# Studio のインストール
 
-Ionic Studioの最新版のダウンロードはこちらです。 [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads).
+Ionic Studio の最新版のダウンロードはこちらです。 [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads).
 
 ## 必要な環境
 
-* macOS あるいは Windows 10
-* [Node &amp; npm](../../intro/environment.md#node-npm) がセットアップされている必要があります。
-* オプションとして、バージョン管理のために [Git](../../intro/environment.md#git) をインストール
+- macOS あるいは Windows 10
+- [Node &amp; npm](../../intro/environment.md#node-npm) がセットアップされている必要があります。
+- オプションとして、バージョン管理のために [Git](../../intro/environment.md#git) をインストール
 
 ## インストール
 
-Ionic Studio のダウンロードリンクはIonicダッシュボードの [downloads section](https://dashboard.ionicframework.com/personal/downloads) にあります。
+Ionic Studio のダウンロードリンクは Ionic ダッシュボードの [downloads section](https://dashboard.ionicframework.com/personal/downloads) にあります。
 
-まずIonic Studioをダウンロードしインストーラーを実行、ウィザードに従います。 Ionic Studioには依存するツールがあり、それらは起動時にインストールやアップデートが自動的に行われます。
+まず Ionic Studio をダウンロードしインストーラーを実行、ウィザードに従います。 Ionic Studio には依存するツールがあり、それらは起動時にインストールやアップデートが自動的に行われます。
 
-Ionic Studioは新しいバージョンがリリースされると自動的にアップデートされますが、上記ダウンロードリンクよりインストールしなおすことも可能です。
+Ionic Studio は新しいバージョンがリリースされると自動的にアップデートされますが、上記ダウンロードリンクよりインストールしなおすことも可能です。
diff --git a/docs/theming/advanced.md b/docs/theming/advanced.md
index d5810c9e90d..57296b57d65 100644
--- a/docs/theming/advanced.md
+++ b/docs/theming/advanced.md
@@ -15,16 +15,16 @@ import CodeColor from '@components/page/theming/CodeColor';
   />
 </head>
 
-CSSベースのテーマ設定では、CSSファイルをロードするか、いくつかのCSSプロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。
+CSS ベースのテーマ設定では、CSS ファイルをロードするか、いくつかの CSS プロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。
 
 ## `theme-color` Meta
 
-メタタグの `theme-color` は、ブラウザがページや周囲のインターフェイスの表示をカスタマイズするために使用する色を示します。この種類のmetaタグはメディアクエリも受け付けることができ、開発者はライトモードとダークモードの両方でテーマカラーを設定することができます。
+メタタグの `theme-color` は、ブラウザがページや周囲のインターフェイスの表示をカスタマイズするために使用する色を示します。この種類の meta タグはメディアクエリも受け付けることができ、開発者はライトモードとダークモードの両方でテーマカラーを設定することができます。
 
 メタタグ `theme-color` の `content` 値には、有効な <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noopener noreferrer">CSS Color</a> を含める必要があり、CSS Variables を含めることはできません。
 
 :::note
-`Theme-color`メタは、WebブラウザまたはPWAとして実行するときにインターフェースのテーマを制御し、アプリがCapacitorまたはCordovaを使用してデプロイされるときには影響しません。ステータスバーの下の領域をカスタマイズしたい場合は、[Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar)を使用することをお勧めします。
+`Theme-color`メタは、Web ブラウザまたは PWA として実行するときにインターフェースのテーマを制御し、アプリが Capacitor または Cordova を使用してデプロイされるときには影響しません。ステータスバーの下の領域をカスタマイズしたい場合は、[Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar)を使用することをお勧めします。
 :::
 
 以下の例では、iOS 15 でブラウザのインターフェイスをスタイルするために `theme-color` を使用する方法を示しています。
@@ -38,11 +38,11 @@ CSSベースのテーマ設定では、CSSファイルをロードするか、
 | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
 | ![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) |
 
-macOS Monterey以降のSafariでは、`theme-color`メタを使用してツールバーをカスタマイズすることもできます。
+macOS Monterey 以降の Safari では、`theme-color`メタを使用してツールバーをカスタマイズすることもできます。
 
-iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しますが、テーマをより細かく制御したい場合はこのmetaタグを追加すると便利です。
+iOS 15 と macOS の Safari は自動的に適切なテーマカラーを決定しますが、テーマをより細かく制御したい場合はこの meta タグを追加すると便利です。
 
-ブラウザのインターフェイスに干渉するため、ブラウザが使用しない色の小さなサブセットがあります。例えば、`content="red"`と設定すると、macOSのSafariでは、ツールバーの赤い閉じるボタンと干渉してしまうため、動作しません。このような状況に遭遇した場合は、色の選択を少し変えてみてください。
+ブラウザのインターフェイスに干渉するため、ブラウザが使用しない色の小さなサブセットがあります。例えば、`content="red"`と設定すると、macOS の Safari では、ツールバーの赤い閉じるボタンと干渉してしまうため、動作しません。このような状況に遭遇した場合は、色の選択を少し変えてみてください。
 
 :::note
 ブラウザは `manifest.json` に `theme` よりも `theme-color` メタが存在する場合、それを優先します。
@@ -87,7 +87,7 @@ iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しま
 
 ### The Alpha Problem
 
-16進数カラーのアルファ使用については、まだ完全な<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility" target="_blank">ブラウザサポート</a>はありません。<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()" target="_blank">rgba()</a> 関数は、`R, G, B, A` (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、`rgba()`　に受け渡される正しい値と間違った値の例を示しています。
+16 進数カラーのアルファ使用については、まだ完全な<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility" target="_blank">ブラウザサポート</a>はありません。<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()" target="_blank">rgba()</a> 関数は、`R, G, B, A` (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、`rgba()`　に受け渡される正しい値と間違った値の例を示しています。
 
 ```css
 /* These examples use the same color: blueviolet. */
@@ -110,7 +110,7 @@ iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しま
 See the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
 :::
 
-Ionicはいくつかのコンポーネントで不透明度（アルファ）を​​持つ色を使用します。これが機能するためには、それらのプロパティはRGBフォーマットで提供されなければなりません。末尾にバリエーションがあるプロパティのいずれかを変更する場合、 `-rgb` で終わる括弧なしのカンマ区切り形式でも提供されることが重要です。以下は、テキストと背景色を変更するための例です。
+Ionic はいくつかのコンポーネントで不透明度（アルファ）を ​​ 持つ色を使用します。これが機能するためには、それらのプロパティは RGB フォーマットで提供されなければなりません。末尾にバリエーションがあるプロパティのいずれかを変更する場合、 `-rgb` で終わる括弧なしのカンマ区切り形式でも提供されることが重要です。以下は、テキストと背景色を変更するための例です。
 
 ```css
 :root {
@@ -124,7 +124,7 @@ Ionicはいくつかのコンポーネントで不透明度（アルファ）を
 }
 ```
 
-RGB形式の色はhexプロパティとまったく同じ色ですが、現在は `rgba()` で使用できることに注意してください。例えば、`--ion-text-color-rgb` は以下のように利用できます。
+RGB 形式の色は hex プロパティとまったく同じ色ですが、現在は `rgba()` で使用できることに注意してください。例えば、`--ion-text-color-rgb` は以下のように利用できます。
 
 ```css
 body {
@@ -134,7 +134,7 @@ body {
 
 ### Variables in Media Queries
 
-[メディアクエリ](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) のCSS変数は現在サポートされていませんが、この問題を解決する[custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) と [custom environment variables](https://drafts.csswg.org/css-env-1/)を追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。
+[メディアクエリ](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) の CSS 変数は現在サポートされていませんが、この問題を解決する[custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) と [custom environment variables](https://drafts.csswg.org/css-env-1/)を追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。
 
 ```css
 :root {
@@ -146,11 +146,11 @@ body {
 }
 ```
 
-### CSSカラー変数の変更
+### CSS カラー変数の変更
 
-Sassの組み込み関数を使用して簡単に色を変更することは可能ですが、現在のところCSS変数で設定された色を変更するのはそれほど簡単ではありません。これは、CSSで [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) チャネルまたはHSLチャネルを分割してそれぞれの値を変更することで実現できますが、複雑で機能が不足しています。
+Sass の組み込み関数を使用して簡単に色を変更することは可能ですが、現在のところ CSS 変数で設定された色を変更するのはそれほど簡単ではありません。これは、CSS で [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) チャネルまたは HSL チャネルを分割してそれぞれの値を変更することで実現できますが、複雑で機能が不足しています。
 
-正確に説明します。基本的に、SassなどのCSSプリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、Sassには次のカラーを作成できます:
+正確に説明します。基本的に、Sass などの CSS プリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、Sass には次のカラーを作成できます:
 
 ```scss
 // Background color, shade, and tint
@@ -175,8 +175,8 @@ After running through the Sass compiler, the colors will have the following valu
 | `$text-darker`      | <CodeColor color="#1e1e1e">#1e1e1e</CodeColor> |
 | `$text-lighter`     | <CodeColor color="#6a6a6a">#6a6a6a</CodeColor> |
 
-ただし、CSS変数は実行時に設定でき、より動的であるため、現時点では単純な関数を使用して操作することはできません。
+ただし、CSS 変数は実行時に設定でき、より動的であるため、現時点では単純な関数を使用して操作することはできません。
 
-これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionicでは、これが[各色にバリエーションがある](colors.md#layered-colors)理由であり、テーマ設定に[stepped colors](themes.md#stepped-colors)が必要な理由でもあります。
+これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionic では、これが[各色にバリエーションがある](colors.md#layered-colors)理由であり、テーマ設定に[stepped colors](themes.md#stepped-colors)が必要な理由でもあります。
 
-これを可能にする[color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187)を議論している草案とIssuesはこちらからご覧いただけます。
+これを可能にする[color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187)を議論している草案と Issues はこちらからご覧いただけます。
diff --git a/docs/theming/basics.md b/docs/theming/basics.md
index 6aedfb3d504..32b6efd71a9 100644
--- a/docs/theming/basics.md
+++ b/docs/theming/basics.md
@@ -13,31 +13,32 @@ import ColorAccordion from '@components/page/theming/ColorAccordion';
   />
 </head>
 
-Ionic Frameworkは、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。IonicアプリのThemingは今まで以上に簡単です。フレームワークはCSSで構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。
+Ionic Framework は、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。Ionic アプリの Theming は今まで以上に簡単です。フレームワークは CSS で構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。
 
 ## 配色
 
-Ionicには9つのデフォルトカラーがあり、多くのコンポーネントの色を変更するのに利用できます。各色は実際には `shade` や `tint` などの複数のプロパティの集まりで、Ionic全体で使用されます。
+Ionic には 9 つのデフォルトカラーがあり、多くのコンポーネントの色を変更するのに利用できます。各色は実際には `shade` や `tint` などの複数のプロパティの集まりで、Ionic 全体で使用されます。
 
-色を変更する際には、関連するすべてのプロパティを設定することが重要です。これは[Color Generator](color-generator.md)ツールで簡単に行えますが、必要であればこれらは手動で記述することもできます。Ionicの色については、[Colors](colors.md)を参照してください。
+色を変更する際には、関連するすべてのプロパティを設定することが重要です。これは[Color Generator](color-generator.md)ツールで簡単に行えますが、必要であればこれらは手動で記述することもできます。Ionic の色については、[Colors](colors.md)を参照してください。
 
 <ColorAccordion />
 
 ## Platform Standards
 
-Ionicコンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを __Adaptive Styling__ と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。
+Ionic コンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを **Adaptive Styling** と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。
 
-Ionicは、2つの **modes** をもっており、これらはプラットフォーム: `ios` と `md` に基づいてコンポーネントの外観がカスタマイズされます。各プラットフォームにはデフォルトモードがありますが、簡単に変更できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、[Platform Styles](platform-styles.md) をご覧ください。
+Ionic は、2 つの **modes** をもっており、これらはプラットフォーム: `ios` と `md` に基づいてコンポーネントの外観がカスタマイズされます。各プラットフォームにはデフォルトモードがありますが、簡単に変更できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、[Platform Styles](platform-styles.md) をご覧ください。
 
 ## CSS Variables
-Ionicコンポーネントは、 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>を使ってテーマ化されています。CSS変数は、動的な値を静的なCSSで利用することができます。これは今まではSassのようなCSSプリプロセッサを必要としていたものです。アプリケーションの外観は、[Ionic Variables](/docs/theming/css-variables#ionic-variables)のいずれかの値を変更することで簡単に変更できます。
 
-Ionic Frameworkのコンポーネントは、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSSプロパティ（変数）</a>を使ってテーマ化されています。CSS 変数は、静的な言語に対して動的な値を追加するものです。これは、従来はSassのようなCSSプリプロセッサが必要だったものです。Ionic Frameworkが提供する[CSS Variables](css-variables.md)のいずれかの値を変更することで、アプリケーションの外観を簡単に変更することができます。
+Ionic コンポーネントは、 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>を使ってテーマ化されています。CSS 変数は、動的な値を静的な CSS で利用することができます。これは今までは Sass のような CSS プリプロセッサを必要としていたものです。アプリケーションの外観は、[Ionic Variables](/docs/theming/css-variables#ionic-variables)のいずれかの値を変更することで簡単に変更できます。
+
+Ionic Framework のコンポーネントは、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS プロパティ（変数）</a>を使ってテーマ化されています。CSS 変数は、静的な言語に対して動的な値を追加するものです。これは、従来は Sass のような CSS プリプロセッサが必要だったものです。Ionic Framework が提供する[CSS Variables](css-variables.md)のいずれかの値を変更することで、アプリケーションの外観を簡単に変更することができます。
 
 ## CSS Shadow Parts
 
-CSS Shadow Partsが追加され、Ionic Framework Shadowコンポーネントの完全なカスタマイズが容易になりました。これまで、 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> を使用するコンポーネントは、シャドウ・ツリー内の要素を直接スタイル設定できませんでした。Shadow Partsが追加されたため、Shadowコンポーネントの内部要素のすべてのプロパティーにCSS変数を使用する必要がなくなりました。パーツを使用したIonic Frameworkコンポーネントのカスタマイズの詳細については、[CSS Shadow Parts](css-shadow-parts.md)ガイドを参照してください。
+CSS Shadow Parts が追加され、Ionic Framework Shadow コンポーネントの完全なカスタマイズが容易になりました。これまで、 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> を使用するコンポーネントは、シャドウ・ツリー内の要素を直接スタイル設定できませんでした。Shadow Parts が追加されたため、Shadow コンポーネントの内部要素のすべてのプロパティーに CSS 変数を使用する必要がなくなりました。パーツを使用した Ionic Framework コンポーネントのカスタマイズの詳細については、[CSS Shadow Parts](css-shadow-parts.md)ガイドを参照してください。
 
 ## Branding
 
-Ionicは、ブランディングや配色にあったテーマとなるアプリケーションの配色を提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まですべてカスタマイズ可能です。ブランディングの詳細については、[Themes](themes.md) をご覧ください。
+Ionic は、ブランディングや配色にあったテーマとなるアプリケーションの配色を提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まですべてカスタマイズ可能です。ブランディングの詳細については、[Themes](themes.md) をご覧ください。
diff --git a/docs/theming/color-generator.md b/docs/theming/color-generator.md
index 10b2704f82e..41dbce60f73 100644
--- a/docs/theming/color-generator.md
+++ b/docs/theming/color-generator.md
@@ -14,6 +14,6 @@ import ColorGenerator from '@components/page/theming/ColorGenerator';
   />
 </head>
 
-アプリのUIにカスタムカラーパレットを作成します。色の16進数値を更新し、右のデモアプリで確認した後、生成されたコードをIonicプロジェクトに直接コピー＆ペーストしてください。
+アプリの UI にカスタムカラーパレットを作成します。色の 16 進数値を更新し、右のデモアプリで確認した後、生成されたコードを Ionic プロジェクトに直接コピー＆ペーストしてください。
 
 <ColorGenerator />
diff --git a/docs/theming/colors.md b/docs/theming/colors.md
index 19608dd4d59..822680c22e5 100644
--- a/docs/theming/colors.md
+++ b/docs/theming/colors.md
@@ -16,9 +16,9 @@ import CodeColor from '@components/page/theming/CodeColor';
   />
 </head>
 
-Ionicには、多くのコンポーネントの配色を変更するために使用できる9つのデフォルトカラーがあります。 それぞれの配色は、 `shade` と `tint` を含む複数のプロパティを持つコレクションであり、Ionic全体で利用されます。
+Ionic には、多くのコンポーネントの配色を変更するために使用できる 9 つのデフォルトカラーがあります。 それぞれの配色は、 `shade` と `tint` を含む複数のプロパティを持つコレクションであり、Ionic 全体で利用されます。
 
-デフォルトの配色を変更するために、 `color` 属性を使って任意の色をIonicのコンポーネントに適用できます。以下の buttons はテキストと背景が `color` 属性に基づいて変更されていることに注目してください。button に `color` 属性がない時は、デフォルト値として `primary` の配色が適用されます。
+デフォルトの配色を変更するために、 `color` 属性を使って任意の色を Ionic のコンポーネントに適用できます。以下の buttons はテキストと背景が `color` 属性に基づいて変更されていることに注目してください。button に `color` 属性がない時は、デフォルト値として `primary` の配色が適用されます。
 
 ```html
 <ion-button>Default</ion-button>
@@ -35,13 +35,13 @@ Ionicには、多くのコンポーネントの配色を変更するために使
 
 ### 配色のレイヤードスタイル
 
-それぞれの配色は、これらのプロパティで構成されています: `base`, `contrast`, `shade`, と `tint` です。`base` と `contrast` の配色は `rgb` プロパティと同一の配色が求められます。 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a> をご覧ください。この `rgb` の変数が必要な理由は [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。下のドロップダウンから選択することで、Ionicが提供するデフォルトの配色とそのバリエーションを確認することができます。
+それぞれの配色は、これらのプロパティで構成されています: `base`, `contrast`, `shade`, と `tint` です。`base` と `contrast` の配色は `rgb` プロパティと同一の配色が求められます。 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a> をご覧ください。この `rgb` の変数が必要な理由は [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。下のドロップダウンから選択することで、Ionic が提供するデフォルトの配色とそのバリエーションを確認することができます。
 
 <LayeredColorsSelect />
 
 ## Modifying Colors
 
-配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、`secondary color` を <code-color mode="md" value="#006600"></code-color> に変更する時、以下のCSSプロパティが必要です。
+配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、`secondary color` を <code-color mode="md" value="#006600"></code-color> に変更する時、以下の CSS プロパティが必要です。
 
 ```css
 :root {
@@ -60,13 +60,13 @@ Ionicには、多くのコンポーネントの配色を変更するために使
 ベースカラーからバリエーションカラーを取得する方法がわからない？その場合、 [Color Generator](color-generator.md) をお試しください。これはすべてのバリエーションを計算し、アプリにコピー&ペーストできるコードを提供します！
 :::
 
-CSS変数についてもっと詳しく知りたい時は [CSS Variables documentation](css-variables.md) をご覧ください。
+CSS 変数についてもっと詳しく知りたい時は [CSS Variables documentation](css-variables.md) をご覧ください。
 
 ### 配色の追加
 
-カラーは、Ionicコンポーネントの 「color」 プロパティを設定するか、CSSを使用してスタイル設定することで、アプリケーション全体で使用できるように追加できます。新しいカラーを手動で追加する方法については、この後の 「New Color Creator」 を参照してください。コピーしてアプリケーションに貼り付ける新しいカラーのコードを簡単に生成する方法については、次の 「New Color Creator」 を参照してください。
+カラーは、Ionic コンポーネントの 「color」 プロパティを設定するか、CSS を使用してスタイル設定することで、アプリケーション全体で使用できるように追加できます。新しいカラーを手動で追加する方法については、この後の 「New Color Creator」 を参照してください。コピーしてアプリケーションに貼り付ける新しいカラーのコードを簡単に生成する方法については、次の 「New Color Creator」 を参照してください。
 
-新しいカラーを追加するには、最初にルートのカラーのすべてのバリエーションのCSS変数を定義します。たとえば、`favorite`という新しいカラーを追加するには、次の変数を定義します:
+新しいカラーを追加するには、最初にルートのカラーのすべてのバリエーションの CSS 変数を定義します。たとえば、`favorite`という新しいカラーを追加するには、次の変数を定義します:
 
 ```css
 :root {
@@ -79,7 +79,7 @@ CSS変数についてもっと詳しく知りたい時は [CSS Variables documen
 }
 ```
 
-次に、これらのCSS変数を使用する新しいクラスを作成します。クラスは、`.ion-color-{COLOR}` の形式で記述する**必要があります**。 `{COLOR}` は追加するカラーの名前です:
+次に、これらの CSS 変数を使用する新しいクラスを作成します。クラスは、`.ion-color-{COLOR}` の形式で記述する**必要があります**。 `{COLOR}` は追加するカラーの名前です:
 
 ```css
 .ion-color-favorite {
@@ -92,13 +92,13 @@ CSS変数についてもっと詳しく知りたい時は [CSS Variables documen
 }
 ```
 
-クラスを追加すると、colorプロパティーをサポートする任意のIonicコンポーネントでカラーを使用できるようになります。Ionicボタンに`favorite`の色を使用する例を以下に示します。
+クラスを追加すると、color プロパティーをサポートする任意の Ionic コンポーネントでカラーを使用できるようになります。Ionic ボタンに`favorite`の色を使用する例を以下に示します。
 
 ```html
 <ion-button color="favorite">Favorite</ion-button>
 ```
 
-ルートで定義されたCSS変数は、CSSを使用して任意のエレメントのスタイル設定にも使用できます:
+ルートで定義された CSS 変数は、CSS を使用して任意のエレメントのスタイル設定にも使用できます:
 
 ```css
 div {
@@ -107,10 +107,10 @@ div {
 }
 ```
 
-CSS変数の設定方法と使い方についての詳しい情報は [CSS Variables documentation](css-variables.md) をご覧ください。
+CSS 変数の設定方法と使い方についての詳しい情報は [CSS Variables documentation](css-variables.md) をご覧ください。
 
 ## New Color Creator
 
-名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色をIonicプロジェクトで利用できます。
+名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色を Ionic プロジェクトで利用できます。
 
 <NewColorGenerator />
diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.md
index 6bc6730b7f2..ae15b6c6462 100644
--- a/docs/theming/css-shadow-parts.md
+++ b/docs/theming/css-shadow-parts.md
@@ -12,17 +12,17 @@ title: CSS Shadow Parts
 
 CSS Shadow Parts は、開発者がシャドウツリー内の要素に CSS プロパティをスタイル設定することを可能にします。これは、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>コンポーネントをカスタマイズする際に非常に便利です。
 
-## なぜShadow Parts?
+## なぜ Shadow Parts?
 
-Ionic Frameworkは、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>の分散型セットです。Web Componentsは、スタイルとマークアップをカプセル化するために<a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOMの仕様</a>に従っています。
+Ionic Framework は、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>の分散型セットです。Web Components は、スタイルとマークアップをカプセル化するために<a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOM の仕様</a>に従っています。
 
 :::note
-Ionic Frameworkのコンポーネントは、すべてのShadow DOMコンポーネント**ではありません**。Shadow DOM コンポーネントの場合、その [component documentation](../components.md) の右上にバッジが表示されます。Shadow DOM コンポーネントの例としては、[button component](../api/button.md) があります。
+Ionic Framework のコンポーネントは、すべての Shadow DOM コンポーネント**ではありません**。Shadow DOM コンポーネントの場合、その [component documentation](../components.md) の右上にバッジが表示されます。Shadow DOM コンポーネントの例としては、[button component](../api/button.md) があります。
 :::
 
 Shadow DOM は、スタイルがコンポーネントから漏れて、意図せずに他の要素に適用されるのを防ぐのに便利です。例えば、`ion-button` コンポーネントに `.button` クラスを割り当てています。Shadow DOM によるカプセル化がなければ、ユーザーが自分の要素に `.button` クラスを設定した場合、Ionic Framework のボタンスタイルを継承してしまうでしょう。ion-button` は Shadow コンポーネントであるため、これは問題ではありません。
 
-しかし、このカプセル化のために、スタイルはShadowコンポーネントの内部要素に侵入することができません。つまり、Shadow コンポーネントがそのシャドウツリーの内部にある要素をレンダリングする場合、その内部要素を CSS で直接ターゲットにすることはできません。例として `ion-select` コンポーネントを使用すると、次のようなマークアップがレンダリングされます。
+しかし、このカプセル化のために、スタイルは Shadow コンポーネントの内部要素に侵入することができません。つまり、Shadow コンポーネントがそのシャドウツリーの内部にある要素をレンダリングする場合、その内部要素を CSS で直接ターゲットにすることはできません。例として `ion-select` コンポーネントを使用すると、次のようなマークアップがレンダリングされます。
 
 ```html
 <ion-select>
@@ -32,7 +32,7 @@ Shadow DOM は、スタイルがコンポーネントから漏れて、意図せ
 </ion-select>
 ```
 
-プレースホルダーのテキストとアイコン要素は `#shadow-root` の内部にあるため、以下のCSSはプレースホルダーのスタイル付けに **無効** です。
+プレースホルダーのテキストとアイコン要素は `#shadow-root` の内部にあるため、以下の CSS はプレースホルダーのスタイル付けに **無効** です。
 
 ```css
 /* Does NOT work */
@@ -43,13 +43,13 @@ ion-select .select-placeholder {
 
 So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
 
-## Shadow Partsの説明
+## Shadow Parts の説明
 
-Shadow Partsは、開発者がシャドウツリーの外側から、シャドウツリー内のスタイルを設定することを可能にします。これを行うには、[part](#exposing-a-part) を公開し 、[::part](#how-part-works) を使用してスタイルを設定する必要があります。
+Shadow Parts は、開発者がシャドウツリーの外側から、シャドウツリー内のスタイルを設定することを可能にします。これを行うには、[part](#exposing-a-part) を公開し 、[::part](#how-part-works) を使用してスタイルを設定する必要があります。
 
-### Partsの公開
+### Parts の公開
 
-シャドウ DOM コンポーネントを作成する際、シャドウツリー内の要素に `part` 属性を割り当てることで、パートを追加することができます。これはIonic Frameworkでコンポーネントに追加され、エンドユーザーからのアクションは必要ありません。
+シャドウ DOM コンポーネントを作成する際、シャドウツリー内の要素に `part` 属性を割り当てることで、パートを追加することができます。これは Ionic Framework でコンポーネントに追加され、エンドユーザーからのアクションは必要ありません。
 
 引き続き、例として `ion-select` コンポーネントを使用し、マークアップは以下のように更新されます。
 
@@ -61,15 +61,17 @@ Shadow Partsは、開発者がシャドウツリーの外側から、シャド
 </ion-select>
 ```
 
-上記では、`placeholder`と`icon`という2つのPartsを表示しています。すべてのPartsについては、[select documentation](../api/select.md#css-shadow-parts) を参照してください。
+上記では、`placeholder`と`icon`という 2 つの Parts を表示しています。すべての Parts については、[select documentation](../api/select.md#css-shadow-parts) を参照してください。
 
-これらのPartsが公開されたことで、要素は [::part](#how-part-works) を使って直接スタイルを設定することができるようになりました。
+これらの Parts が公開されたことで、要素は [::part](#how-part-works) を使って直接スタイルを設定することができるようになりました。
 
 ### How ::part works
 
-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">`::part()`</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">
+  `::part()`
+</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
 
-`ion-select` は、値が選択されていないときにテキストをスタイル付けするための `placeholder` Partを公開していることが分かっているので、次のようにカスタマイズすることができます。
+`ion-select` は、値が選択されていないときにテキストをスタイル付けするための `placeholder` Part を公開していることが分かっているので、次のようにカスタマイズすることができます。
 
 ```css
 ion-select::part(placeholder) {
@@ -78,9 +80,9 @@ ion-select::part(placeholder) {
 }
 ```
 
-`part` を使ったスタイリングでは、その要素で受け付けられる任意のCSSプロパティを変更することができます。
+`part` を使ったスタイリングでは、その要素で受け付けられる任意の CSS プロパティを変更することができます。
 
-partをターゲットにできることに加え、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer">擬似要素</a>を明示的に露出させずにスタイル付けすることができます。
+part をターゲットにできることに加え、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer">擬似要素</a>を明示的に露出させずにスタイル付けすることができます。
 
 ```css
 ion-select::part(placeholder)::first-letter {
@@ -89,7 +91,7 @@ ion-select::part(placeholder)::first-letter {
 }
 ```
 
-Partsは、ほとんどの<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">擬似クラス</a>でも動作します。
+Parts は、ほとんどの<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">擬似クラス</a>でも動作します。
 
 ```css
 ion-item::part(native):hover {
@@ -101,25 +103,25 @@ ion-item::part(native):hover {
 [ベンダープレフィックス擬似要素](#vendor-prefixed-pseudo-elements) と [構造擬似クラス](#structural-pseudo-classes) には、いくつかの既知の制限があります。
 :::
 
-## Ionic FrameworkのParts
+## Ionic Framework の Parts
 
-Ionic Frameworkコンポーネントのすべての公開Partsは、そのAPIページの「CSS Shadow Parts」の見出しで確認できます。すべてのコンポーネントとそのAPIページを表示するには、[Component documentation](../components.md) を参照してください。
+Ionic Framework コンポーネントのすべての公開 Parts は、その API ページの「CSS Shadow Parts」の見出しで確認できます。すべてのコンポーネントとその API ページを表示するには、[Component documentation](../components.md) を参照してください。
 
-コンポーネントがPartsを持つためには、以下の条件を満たしている必要があります。
+コンポーネントが Parts を持つためには、以下の条件を満たしている必要があります。
 
 - [Shadow DOM](../reference/glossary.md#shadow) コンポーネントであること。 [Scoped](../reference/glossary.md#scoped) または Light DOM コンポーネントの場合、子要素を直接対象とすることができる。コンポーネントが Scoped または Shadow の場合、[コンポーネントのドキュメントページ](../components.md) にその名前で表示されます。
-- これは子要素を含んでいます。例えば、`ion-card-header` はShadowコンポーネントですが、すべてのスタイルはホストエレメントに適用されます。子要素を持たないので、Partsは必要ありません。
+- これは子要素を含んでいます。例えば、`ion-card-header` は Shadow コンポーネントですが、すべてのスタイルはホストエレメントに適用されます。子要素を持たないので、Parts は必要ありません。
 - 子要素は構造的なものではありません。`ion-title` を含む特定のコンポーネントでは、子要素は内部要素を配置するために使用される構造的な要素です。構造的な要素をカスタマイズすることは、予期しない結果をもたらす可能性があるため、お勧めしません。
 
 :::note
-追加partsの推奨を歓迎します。partsをリクエストする際は、<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> にできるだけ多くの情報を添えて作成してください。
+追加 parts の推奨を歓迎します。parts をリクエストする際は、<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> にできるだけ多くの情報を添えて作成してください。
 :::
 
 ## 既知の制限
 
 ### ブラウザサポート
 
-CSS Shadow Partsは最近のすべてのメジャーブラウザでサポートされています。ただし、一部の古いバージョンではshadow partsがサポートされていません。アプリにpartsを実装する前に、<a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">ブラウザのサポート</a>が要件を満たしていることを確認してください。旧バージョンのブラウザのサポートが必要な場合は、引き続き [CSS Variables](../theming/css-variables.md) を使用してスタイリングすることをお勧めします。
+CSS Shadow Parts は最近のすべてのメジャーブラウザでサポートされています。ただし、一部の古いバージョンでは shadow parts がサポートされていません。アプリに parts を実装する前に、<a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">ブラウザのサポート</a>が要件を満たしていることを確認してください。旧バージョンのブラウザのサポートが必要な場合は、引き続き [CSS Variables](../theming/css-variables.md) を使用してスタイリングすることをお勧めします。
 
 ### ベンダープレフィックス擬似要素
 
@@ -127,8 +129,7 @@ CSS Shadow Partsは最近のすべてのメジャーブラウザでサポート
   <a href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix" target="_blank" rel="noopener noreferrer">
     Vendor prefixed
   </a>
-  擬似要素は現時点ではサポートされていません。この例としては、 `::-webkit-scrollbar` 擬似要素があります：
-  pseudo-elements:
+  擬似要素は現時点ではサポートされていません。この例としては、 `::-webkit-scrollbar` 擬似要素があります： pseudo-elements:
 </p>
 
 ```css
@@ -138,11 +139,11 @@ my-component::part(scroll)::-webkit-scrollbar {
 }
 ```
 
-詳しくは <a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer">GitHubのIssue</a> をご覧ください。
+詳しくは <a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer">GitHub の Issue</a> をご覧ください。
 
 ### 構造的な擬似クラス
 
-ほとんどの擬似クラスはPartsでサポートされていますが、<a href="https://www.w3.org/TR/selectors-4/#structural-pseudos" target="_blank" rel="noopener noreferrer">構造的な擬似クラス</a>はサポートされていません。動作しない構造的擬似クラスの例を以下に示します。
+ほとんどの擬似クラスは Parts でサポートされていますが、<a href="https://www.w3.org/TR/selectors-4/#structural-pseudos" target="_blank" rel="noopener noreferrer">構造的な擬似クラス</a>はサポートされていません。動作しない構造的擬似クラスの例を以下に示します。
 
 ```css
 /* Does NOT work */
@@ -156,10 +157,10 @@ my-component::part(container):last-child {
 }
 ```
 
-### Partsの連結
+### Parts の連結
 
 擬似要素 `::part()` は追加の `::part()` にマッチすることができません。
 
 例えば、`my-component::part(button)::part(label)`は何もマッチしません。これは、そうすることで意図した以上の構造的な情報を露出してしまうからです。
 
-もし `<my-component>` の内部ボタンが `part="label => button-label"` のようなものを使って、ボタンの内部Partsをパネル自身のpart要素マップに転送していた場合、 `my-component::part(button-label)` といったセレクタはボタンのラベルだけを選び、他のラベルを無視することになるでしょう。
+もし `<my-component>` の内部ボタンが `part="label => button-label"` のようなものを使って、ボタンの内部 Parts をパネル自身の part 要素マップに転送していた場合、 `my-component::part(button-label)` といったセレクタはボタンのラベルだけを選び、他のラベルを無視することになるでしょう。
diff --git a/docs/theming/css-variables.md b/docs/theming/css-variables.md
index 8f8ecf06fba..7e61f67348d 100644
--- a/docs/theming/css-variables.md
+++ b/docs/theming/css-variables.md
@@ -10,15 +10,15 @@ title: CSS変数
   />
 </head>
 
-Ionicのコンポーネントは、アプリケーションを簡単にカスタマイズできるように<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS変数</a>を使用して構築されています。CSS変数を使用すると、1か所に保存している値を、他の複数の場所から参照できます。また、実行時に動的にCSSを変更することを可能にします（以前はCSSプリプロセッサが必要でした）。CSS変数を使用すると、ブランディングやテーマに合わせてIonicコンポーネントをオーバーライドすることが、これまでになく簡単になります。
+Ionic のコンポーネントは、アプリケーションを簡単にカスタマイズできるように<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS 変数</a>を使用して構築されています。CSS 変数を使用すると、1 か所に保存している値を、他の複数の場所から参照できます。また、実行時に動的に CSS を変更することを可能にします（以前は CSS プリプロセッサが必要でした）。CSS 変数を使用すると、ブランディングやテーマに合わせて Ionic コンポーネントをオーバーライドすることが、これまでになく簡単になります。
 
 ## 変数の設定
 
 ### グローバル変数
 
-CSS変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionicが提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
+CSS 変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionic が提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
 
-Ionic CLIを使用してAngularプロジェクトを開始すると Ionicのデフォルト変数を上書きすることができる `src/theme/variables.scss` が作成されます。
+Ionic CLI を使用して Angular プロジェクトを開始すると Ionic のデフォルト変数を上書きすることができる `src/theme/variables.scss` が作成されます。
 
 ```css
 /* Set variables for all modes */
@@ -43,7 +43,7 @@ Ionic CLIを使用してAngularプロジェクトを開始すると Ionicのデ
 
 ### コンポーネント変数
 
-特定のコンポーネントにCSS変数を設定するには、そのセレクタの内側に変数を追加します。Ionicが提供するコンポーネントレベルの変数の詳細については、[Ionic Variables](#ionic-variables) を参照ください。
+特定のコンポーネントに CSS 変数を設定するには、そのセレクタの内側に変数を追加します。Ionic が提供するコンポーネントレベルの変数の詳細については、[Ionic Variables](#ionic-variables) を参照ください。
 
 ```css
 /* Set the color on all ion-button elements */
@@ -57,9 +57,9 @@ ion-button {
 }
 ```
 
-### JavaScriptで変数を設定
+### JavaScript で変数を設定
 
-CSS 変数は[setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) を使ってJavaScriptで変更することもできます:
+CSS 変数は[setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) を使って JavaScript で変更することもできます:
 
 ```js
 const el = document.querySelector('.fancy-button');
@@ -68,9 +68,9 @@ el.style.setProperty('--background', '#36454f');
 
 ## 変数を利用する
 
-### CSSでの使い方
+### CSS での使い方
 
-[CSSの var() 関数](https://developer.mozilla.org/en-US/docs/Web/CSS/var) を使うと、失敗した時の設定とともにCSS変数を取得することができます。 例えば、以下の例では `--background` プロパティに `--charcoal` 変数を利用しますが、もし値を取得できなければ代わりに `#36454f` が適用されます。
+[CSS の var() 関数](https://developer.mozilla.org/en-US/docs/Web/CSS/var) を使うと、失敗した時の設定とともに CSS 変数を取得することができます。 例えば、以下の例では `--background` プロパティに `--charcoal` 変数を利用しますが、もし値を取得できなければ代わりに `#36454f` が適用されます。
 
 ```css
 .fancy-button {
@@ -78,21 +78,21 @@ el.style.setProperty('--background', '#36454f');
 }
 ```
 
-### JavaScriptでの使い方
+### JavaScript での使い方
 
-CSS変数の値は、[getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue) を使用してJavaScriptで読み取ることができます:
+CSS 変数の値は、[getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue) を使用して JavaScript で読み取ることができます:
 
 ```js
 const el = document.querySelector('.fancy-button');
 const color = el.style.getPropertyValue('--charcoal');
 ```
 
-## Ionic変数
+## Ionic 変数
 
-### Component変数
+### Component 変数
 
-Ionicは、`--background` や `--color` のようなコンポーネントレベルの変数を提供します。コンポーネントが受け入れるカスタムプロパティについては、 [API reference](../api.md) の `CSS Custom Properties` セクションをご覧ください。たとえば、[Button Custom Properties](../api/button.md#css-custom-properties) をご覧ください。
+Ionic は、`--background` や `--color` のようなコンポーネントレベルの変数を提供します。コンポーネントが受け入れるカスタムプロパティについては、 [API reference](../api.md) の `CSS Custom Properties` セクションをご覧ください。たとえば、[Button Custom Properties](../api/button.md#css-custom-properties) をご覧ください。
 
 ### グローバル変数
 
-アプリケーション全体のテーマを簡単に変更できるようにIonicが提供するグローバル変数がいくつかあります。すべてのグローバル変数のリストは [Colors](colors.md), [Themes](/docs/theming/themes) and [Advanced Theming](advanced.md) をご覧ください。
+アプリケーション全体のテーマを簡単に変更できるように Ionic が提供するグローバル変数がいくつかあります。すべてのグローバル変数のリストは [Colors](colors.md), [Themes](/docs/theming/themes) and [Advanced Theming](advanced.md) をご覧ください。
diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
index 116b5a21413..e2d83bc1ed1 100644
--- a/docs/theming/dark-mode.md
+++ b/docs/theming/dark-mode.md
@@ -14,11 +14,11 @@ import Codepen from '@components/global/Codepen';
   />
 </head>
 
-Ionicを使えば、ダークカラーのスキームのサポートなど、アプリのテーマを簡単に変更できます。ネイティブアプリでのダークモードのサポートが拡大していることから、開発者はユーザーの好みをサポートするためにアプリにダークモードを追加する流れがあります。
+Ionic を使えば、ダークカラーのスキームのサポートなど、アプリのテーマを簡単に変更できます。ネイティブアプリでのダークモードのサポートが拡大していることから、開発者はユーザーの好みをサポートするためにアプリにダークモードを追加する流れがあります。
 
 ## Media Query の利用
 
-ダークモードを有効にするためにはまず、 [ユーザの設定してるカラースキーマを利用するmedia query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) を使用します。このメディアクエリは、ユーザーのデバイスのシステム設定に接続され、ダークモードが有効になっている場合はテーマを適用します。
+ダークモードを有効にするためにはまず、 [ユーザの設定してるカラースキーマを利用する media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) を使用します。このメディアクエリは、ユーザーのデバイスのシステム設定に接続され、ダークモードが有効になっている場合はテーマを適用します。
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -32,7 +32,7 @@ Ionicを使えば、ダークカラーのスキームのサポートなど、ア
 
 ## CSS Class Fallback
 
-メディアクエリをサポートしていないデバイスの代替メソッドとして、CSSセレクタをスタイル設定し、クラスをドキュメントのbodyに適用することで、ダークモードを適用できます。
+メディアクエリをサポートしていないデバイスの代替メソッドとして、CSS セレクタをスタイル設定し、クラスをドキュメントの body に適用することで、ダークモードを適用できます。
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -49,11 +49,11 @@ body.dark {
 
 `body.dark` セレクタをターゲットとする変数を使用する場合は、アプリケーション内の `<body>` にクラスを追加するだけです。これはアプリケーションが構築されているフレームワークによってさまざまな方法で行うことができます。
 
-この例では、変数は両方の場所にある必要があります。2つの場所に変数を設定しないようにするために、[JavaScriptを使用](#combining-with-javascript) することができます。
+この例では、変数は両方の場所にある必要があります。2 つの場所に変数を設定しないようにするために、[JavaScript を使用](#combining-with-javascript) することができます。
 
-## JavaScriptとの統合
+## JavaScript との統合
 
-CSS変数を一度だけ記述して、複数の場所で更新する必要がないようにするために、フォールバックとクラスをJavaScriptを使用して `prefers-color-scheme`  メディアクエリーの値をチェックし、プリファレンスが `dark` の場合は `dark` クラスを追加することで統合できます。CSSは次のようなものになるでしょう:
+CSS 変数を一度だけ記述して、複数の場所で更新する必要がないようにするために、フォールバックとクラスを JavaScript を使用して `prefers-color-scheme` メディアクエリーの値をチェックし、プリファレンスが `dark` の場合は `dark` クラスを追加することで統合できます。CSS は次のようなものになるでしょう:
 
 ```css
 body.dark {
@@ -65,7 +65,7 @@ body.dark {
 
 ### 自動的にダークモードを有効にする
 
-JavaScriptでは、ドキュメントが [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) を使用してメディアクエリと一致するかどうかをチェックすることによって、 `dark` クラスを `<body>` に追加できます。これにより、ユーザの設定に基づいてダークモードが動作するようになります。
+JavaScript では、ドキュメントが [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) を使用してメディアクエリと一致するかどうかをチェックすることによって、 `dark` クラスを `<body>` に追加できます。これにより、ユーザの設定に基づいてダークモードが動作するようになります。
 
 ```javascript
 // Use matchMedia to check the user preference
@@ -123,17 +123,17 @@ function checkToggle(shouldCheck) {
 
 <Codepen preview="false" user="ionic" slug="zYOpQLj" height="600px" default-tab="js,result" />
 
-## システムUIコンポーネントを調整する
+## システム UI コンポーネントを調整する
 
-ダークテーマを開発するときに、特定のシステムUIコンポーネントがダークモードに正しく調整されていないことがあります。これを修正するには、 `color-scheme` を指定する必要があります。クロスブラウザのサポートの詳細については、 <a href="https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme" target="_blank">ブラウザのカラースキーマの設定</a> を参照してください。
+ダークテーマを開発するときに、特定のシステム UI コンポーネントがダークモードに正しく調整されていないことがあります。これを修正するには、 `color-scheme` を指定する必要があります。クロスブラウザのサポートの詳細については、 <a href="https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme" target="_blank">ブラウザのカラースキーマの設定</a> を参照してください。
 
-ネイティブコンポーネントだけではなく、主にIonicコンポーネントを使用している場合に、 `color-scheme` はスクロールバーなどのアプリケーションの側面にも影響します。 `color-scheme` を使用するには、次のHTMLをアプリケーションの`head`に追加する必要があります:
+ネイティブコンポーネントだけではなく、主に Ionic コンポーネントを使用している場合に、 `color-scheme` はスクロールバーなどのアプリケーションの側面にも影響します。 `color-scheme` を使用するには、次の HTML をアプリケーションの`head`に追加する必要があります:
 
 ```html
 <meta name="color-scheme" content="light dark" />
 ```
 
-これにより、ページは、どのカラースキームでレンダリングするのが快適かを示すことができます。また、次のCSSを追加して、要素ごとに設定することもできます。
+これにより、ページは、どのカラースキームでレンダリングするのが快適かを示すことができます。また、次の CSS を追加して、要素ごとに設定することもできます。
 
 ```css
 color-scheme: light dark;
@@ -153,15 +153,15 @@ color-scheme: light dark;
 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ダークモード
+## Ionic ダークモード
 
-Ionicには、アプリを実行しているデバイスに基づいてダークモードを取得するために使用する変数の推奨テーマがあります。次の部分に分けることができます:
+Ionic には、アプリを実行しているデバイスに基づいてダークモードを取得するために使用する変数の推奨テーマがあります。次の部分に分けることができます:
 
 1. すべてのデフォルトの [modes](platform-styles.md#ionic-modes) のデフォルトの [Ionic colors](colors.md) を変更して `body.dark` セレクタのダークモードの背景色に対応します。
 1. `ios` デバイスでダークテーマの変数を設定します。
 1. `md` デバイスでダークテーマの変数を設定します。
 
-次のコードをコピーしてアプリに貼り付けると、Ionicのダークテーマを取得できます。 [JavaScriptとの統合](#combining-with-javascript) セクションで説明したように、JavaScriptを使用して `dark` クラスをドキュメント bodyに追加します。 `dark` クラスがドキュメント本文に追加されるまで、ダークモードは有効になりません。
+次のコードをコピーしてアプリに貼り付けると、Ionic のダークテーマを取得できます。 [JavaScript との統合](#combining-with-javascript) セクションで説明したように、JavaScript を使用して `dark` クラスをドキュメント body に追加します。 `dark` クラスがドキュメント本文に追加されるまで、ダークモードは有効になりません。
 
 :::note
 さらにカスタマイズするために追加できるその他の変数など、変更する変数の詳細については [Themes](themes.md) をご覧ください。
diff --git a/docs/theming/platform-styles.md b/docs/theming/platform-styles.md
index a439634b82e..2f3be9a87de 100644
--- a/docs/theming/platform-styles.md
+++ b/docs/theming/platform-styles.md
@@ -10,29 +10,29 @@ title: プラットフォームの外観
   />
 </head>
 
-Ionicは、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。
+Ionic は、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。
 
 ## Ionic Modes
 
-Ionicは **modes** を使ってコンポーネントの外観をカスタマイズします。それぞれの **プラットフォーム** はデフォルトの **mode** を持っていますが、これはグローバルの [config](../developing/config.md) で上書き設定をすることができます。次の表は、それぞれの **プラットフォーム** に追加されているデフォルトの **mode** を示しています。
+Ionic は **modes** を使ってコンポーネントの外観をカスタマイズします。それぞれの **プラットフォーム** はデフォルトの **mode** を持っていますが、これはグローバルの [config](../developing/config.md) で上書き設定をすることができます。次の表は、それぞれの **プラットフォーム** に追加されているデフォルトの **mode** を示しています。
 
-| プラットフォーム  | Mode  | 概要                                                                                                                          |
-| --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `ios`     | `ios` | iPhone, iPad, もしくは iPod で表示する時は [iOS styles](https://www.apple.com/ios) が適用されます。                                   |
-| `android` | `md`  | Androidのデバイスから表示する時は [Material Design styles](https://material.io/guidelines/) が適用されます。.                             |
-| `core`    | `md`  | 上記のどのプラットフォームにも当てはまらないプラットフォームでは、 [Material Design styles](https://material.io/guidelines/) が適用されます。  |
+| プラットフォーム | Mode  | 概要                                                                                                                                          |
+| ---------------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ios`            | `ios` | iPhone, iPad, もしくは iPod で表示する時は [iOS styles](https://www.apple.com/ios) が適用されます。                                           |
+| `android`        | `md`  | Android のデバイスから表示する時は [Material Design styles](https://material.io/guidelines/) が適用されます。.                                |
+| `core`           | `md`  | 上記のどのプラットフォームにも当てはまらないプラットフォームでは、 [Material Design styles](https://material.io/guidelines/) が適用されます。 |
 
-例えば、Androidプラットフォームが利用されている時は `md` (Material Design) が標準で利用されます。 `<html>` エレメントに `class="md"` が追加され、すべてのコンポーネントには Material Design styles が適用されます。:
+例えば、Android プラットフォームが利用されている時は `md` (Material Design) が標準で利用されます。 `<html>` エレメントに `class="md"` が追加され、すべてのコンポーネントには Material Design styles が適用されます。:
 
 ```html
 <html class="md"></html>
 ```
 
-_Note: **platform** と **mode** は別物です。platformはアプリの [config](../developing/config.md) で任意の mode を設定することができます。_
+_Note: **platform** と **mode** は別物です。platform はアプリの [config](../developing/config.md) で任意の mode を設定することができます。_
 
-## Mode Stylesの上書き
+## Mode Styles の上書き
 
-それぞれのIonicのコンポーネントは、mode に基づいた外観を設定します。 `html` エレメントは、 現在のmodeに基づいて、 `class` と `mode` の両方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、`ios` modeの時のみ `ion-badge` のテキストに `uppercase` を適用する場合、こうなります:
+それぞれの Ionic のコンポーネントは、mode に基づいた外観を設定します。 `html` エレメントは、 現在の mode に基づいて、 `class` と `mode` の両方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、`ios` mode の時のみ `ion-badge` のテキストに `uppercase` を適用する場合、こうなります:
 
 ```css
 .ios ion-badge {
@@ -40,7 +40,7 @@ _Note: **platform** と **mode** は別物です。platformはアプリの [conf
 }
 ```
 
-スタイルを上書きするために使用できる多くのグローバルCSS変数もあります。`ios` アプリの背景色をスタイルするには、次のように設定します:
+スタイルを上書きするために使用できる多くのグローバル CSS 変数もあります。`ios` アプリの背景色をスタイルするには、次のように設定します:
 
 ```css
 .ios {
@@ -48,4 +48,4 @@ _Note: **platform** と **mode** は別物です。platformはアプリの [conf
 }
 ```
 
-上書きするすべてのグローバルCSS変数のリストについては、[Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md) をご覧ください。
+上書きするすべてのグローバル CSS 変数のリストについては、[Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md) をご覧ください。
diff --git a/docs/theming/themes.md b/docs/theming/themes.md
index b47272b91bd..80d43109809 100644
--- a/docs/theming/themes.md
+++ b/docs/theming/themes.md
@@ -13,13 +13,13 @@ import SteppedColorGenerator from '@components/page/theming/SteppedColorGenerato
   />
 </head>
 
-Ionicは、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: [Application Colors](#application-colors), [Stepped Colors](#stepped-colors)
+Ionic は、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: [Application Colors](#application-colors), [Stepped Colors](#stepped-colors)
 
 ### アプリケーションの配色
 
-アプリケーションの配色は、Ionicの複数の場所で使用されています。ダークテーマや、ブランディングにあったテーマを簡単に作成することができます。
+アプリケーションの配色は、Ionic の複数の場所で使用されています。ダークテーマや、ブランディングにあったテーマを簡単に作成することができます。
 
-背景とテキストの色変数は、RGBである必要があります: <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. なぜ `rgb` プロパティも必要であるかは [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。
+背景とテキストの色変数は、RGB である必要があります: <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. なぜ `rgb` プロパティも必要であるかは [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。
 
 | Name                                       | Description                                          |
 | ------------------------------------------ | ---------------------------------------------------- |
@@ -52,13 +52,13 @@ Ionicは、アプリケーション全体のデフォルトテーマを変更す
 
 ### ステップカラー
 
-Ionicテーマをカスタマイズするためのさまざまな方法を検討した結果、1つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。
+Ionic テーマをカスタマイズするためのさまざまな方法を検討した結果、1 つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。
 
-背景色 (`--ion-background-color`) と テキストカラー (`--ion-text-color`) の変数を更新すると、ほとんどのアプリコンポーネントの外観が変わりますが、見逃したり壊れたりする可能性のある特定のIonicコンポーネントがあります。ダークテーマを適用するとき、これはより明白になります。
+背景色 (`--ion-background-color`) と テキストカラー (`--ion-text-color`) の変数を更新すると、ほとんどのアプリコンポーネントの外観が変わりますが、見逃したり壊れたりする可能性のある特定の Ionic コンポーネントがあります。ダークテーマを適用するとき、これはより明白になります。
 
 一部のコンポーネントでは、背景よりも暗い、またはテキストよりも明るい色合いを使用しています。たとえば、item の見出しテキストは、私たちのデフォルトのテキストカラーよりも数段階明るい色である <CodeColor color="#404040">#404040</CodeColor> になります。一方、ローディングコンポーネントの背景は白よりも濃い色 <CodeColor color="#f2f2f2">#f2f2f2</CodeColor> になります。私達はこれらのわずかな変化を定義するために、ステップカラーを利用します。アプリケーションの背景色やテキストの色を更新するときは、ステップカラーを更新することが重要です。
 
-デフォルトでは、Ionicのステップカラーはデフォルトの背景色の値 <CodeColor color="#ffffff">#ffffff</CodeColor> で始まります。 そしてテキストカラー値 <CodeColor color="#000000">#000000</CodeColor> を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。
+デフォルトでは、Ionic のステップカラーはデフォルトの背景色の値 <CodeColor color="#ffffff">#ffffff</CodeColor> で始まります。 そしてテキストカラー値 <CodeColor color="#000000">#000000</CodeColor> を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。
 
 ## Stepped Color Generator
 
diff --git a/docs/troubleshooting/build.md b/docs/troubleshooting/build.md
index 7045a69b19f..8a856e02438 100644
--- a/docs/troubleshooting/build.md
+++ b/docs/troubleshooting/build.md
@@ -24,7 +24,7 @@ title: Build Errors
 class MyDirective {
   // 誤り、@Optional() とすべき
   // @Optional はここでは何もしないため、MyDirective は parent が undefined の場合にエラーになる
-  constructor( @Optional parent: ParentComponent) { }
+  constructor(@Optional parent: ParentComponent) {}
 }
 ```
 
@@ -36,7 +36,7 @@ class MyDirective {
 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.
 ```
 
-この例外は Angular が `YourClass` のコンストラクタの 1つ以上のパラメータについて困惑していることを意味します。[依存性を注入](https://angular.jp/docs/ts/latest/guide/dependency-injection.html) するため、Angular は 注入するパラメータの型を知る必要があります。パラメータのクラスを指定することで Angular にこのこと（タイプ）を知らせます。次の点を確認してください:
+この例外は Angular が `YourClass` のコンストラクタの 1 つ以上のパラメータについて困惑していることを意味します。[依存性を注入](https://angular.jp/docs/ts/latest/guide/dependency-injection.html) するため、Angular は 注入するパラメータの型を知る必要があります。パラメータのクラスを指定することで Angular にこのこと（タイプ）を知らせます。次の点を確認してください:
 
 - パラメータのクラスをインポートします。
 - パラメータに適切な注釈をつけるか、パラメータの型を指定します。
@@ -49,13 +49,12 @@ import { MyService } from 'my-service'; // 私をインポートすることを
 })
 export class MyClass {
   // service は MyService のタイプです
-  constructor(service: MyService) {
-
-  }
+  constructor(service: MyService) {}
 }
 ```
 
-コード内の循環参照がこのエラーの原因になることがあります。循環参照は、2つのオブジェクトが相互に依存していることを意味するため、両方を相互の前に宣言する方法はありません。この問題を回避するには、Angular に組み込まれている[`forwardRef`](https://angular.jp/docs/ts/latest/api/core/index/forwardRef-function.html) 関数を使用します。
+コード内の循環参照がこのエラーの原因になることがあります。循環参照は、2 つのオブジェクトが相互に依存していることを意味するため、両方を相互の前に宣言する方法はありません。この問題を回避するには、Angular に組み込まれている[`forwardRef`](https://angular.jp/docs/ts/latest/api/core/index/forwardRef-function.html) 関数を使用します。
+
 ```ts
 import { forwardRef } from '@angular/core';
 
@@ -99,7 +98,7 @@ import { MyService } from 'my-service';
 class MyApp {}
 ```
 
-パラメータが別のコンポーネントまたはDirective（たとえば、親コンポーネント）である場合、パラメータを providers のリストに追加するとエラーはなくなりますが、これは前述の [provider の複数のインスタンス](/docs/faq/runtime#provider-) と同じ効果を持ちます。ここでは、コンポーネントクラスの新しいインスタンスを作成しますが、必要なコンポーネントインスタンスへの参照は取得しません。かわりに、注入されるであろうDirectiveまたはコンポーネントがコンポーネントで使用可能であることを確認します（たとえば、親であることを期待している場合は、実際に親であること）。これはおそらく、例を使用すると最も簡単に理解できます:
+パラメータが別のコンポーネントまたは Directive（たとえば、親コンポーネント）である場合、パラメータを providers のリストに追加するとエラーはなくなりますが、これは前述の [provider の複数のインスタンス](/docs/faq/runtime#provider-) と同じ効果を持ちます。ここでは、コンポーネントクラスの新しいインスタンスを作成しますが、必要なコンポーネントインスタンスへの参照は取得しません。かわりに、注入されるであろう Directive またはコンポーネントがコンポーネントで使用可能であることを確認します（たとえば、親であることを期待している場合は、実際に親であること）。これはおそらく、例を使用すると最も簡単に理解できます:
 
 ```tsx
 @Component({
@@ -154,7 +153,7 @@ MyComp の注入なし            +------+------+
                            +-------------+
 ```
 
-前の例を拡張するために、コンポーネント/Directiveの参照を常に期待しているわけではない場合には、Angular の `@Option` アノテーションを使うことができます:
+前の例を拡張するために、コンポーネント/Directive の参照を常に期待しているわけではない場合には、Angular の `@Option` アノテーションを使うことができます:
 
 ```tsx
 @Directive({
@@ -176,7 +175,7 @@ class MyDir {
 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
 ```
 
-これは、そのプロパティを持たない要素にプロパティをバインドしようとしたときに発生します。要素がコンポーネントの場合、または要素に1つ以上のDirectiveがある場合、コンポーネントもDirectiveもそのプロパティを持ちません。
+これは、そのプロパティを持たない要素にプロパティをバインドしようとしたときに発生します。要素がコンポーネントの場合、または要素に 1 つ以上の Directive がある場合、コンポーネントも Directive もそのプロパティを持ちません。
 
 ```html
 <!-- div には 'foo' というプロパティがない -->
@@ -189,7 +188,7 @@ Can't bind to 'propertyName' since it isn't a known property of the 'elementName
 No provider for ControlContainer! (NgControlName -> ControlContainer)
 ```
 
-このエラーは、上記の `No provider` エラーのより具体的なバージョンです。これは、親の [NgForm](https://angular.jp/docs/ts/latest/api/forms/index/NgForm-directive.html) または NgFormModel を指定せずに NgControlName などのフォームコントロールを使用した場合に発生します。ほとんどの場合、これはフォームコントロールが実際のフォーム要素内にあることを確認することで解決できます。NgForm はセレクタとして `form` を使用するので、これは新しいNgFormをインスタンス化します:
+このエラーは、上記の `No provider` エラーのより具体的なバージョンです。これは、親の [NgForm](https://angular.jp/docs/ts/latest/api/forms/index/NgForm-directive.html) または NgFormModel を指定せずに NgControlName などのフォームコントロールを使用した場合に発生します。ほとんどの場合、これはフォームコントロールが実際のフォーム要素内にあることを確認することで解決できます。NgForm はセレクタとして `form` を使用するので、これは新しい NgForm をインスタンス化します:
 
 ```tsx
 @Component({
@@ -206,4 +205,4 @@ No provider for ControlContainer! (NgControlName -> ControlContainer)
 No component factory found for <component name>
 ```
 
-このエラーは、ngModule にインポートおよび追加されていない Component、Provider Pipe、Directiveを使用しようとしたときに発生します。新しい Component、Provider、Pipe、Directiveをアプリケーションに追加する場合は必ず、Angularがそれを使えるようにするために、`src/app/app.module.ts` ファイル内の `ngModule` に追加する必要があります。このエラーを修正するには、問題の Component、Provider、Pipe、Directiveを app.module ファイルにインポートし、Provider の場合は `providers` 配列に追加、Component、Pipe、Directiveの場合は宣言配列と `entryComponents` 配列の両方に追加します。
+このエラーは、ngModule にインポートおよび追加されていない Component、Provider Pipe、Directive を使用しようとしたときに発生します。新しい Component、Provider、Pipe、Directive をアプリケーションに追加する場合は必ず、Angular がそれを使えるようにするために、`src/app/app.module.ts` ファイル内の `ngModule` に追加する必要があります。このエラーを修正するには、問題の Component、Provider、Pipe、Directive を app.module ファイルにインポートし、Provider の場合は `providers` 配列に追加、Component、Pipe、Directive の場合は宣言配列と `entryComponents` 配列の両方に追加します。
diff --git a/docs/troubleshooting/native.md b/docs/troubleshooting/native.md
index 2df9044eb84..63f7b3dd3ce 100644
--- a/docs/troubleshooting/native.md
+++ b/docs/troubleshooting/native.md
@@ -16,14 +16,15 @@ title: ネイティブエラー
 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'
 ```
 
-iOSデバイスでアプリケーションを実行するには、プロビジョニングプロファイルが必要です。プロビジョニングプロファイルが作成されていない場合は、次の手順に従います:
+iOS デバイスでアプリケーションを実行するには、プロビジョニングプロファイルが必要です。プロビジョニングプロファイルが作成されていない場合は、次の手順に従います:
 
 <<<<<<< HEAD
+
 1. <strong>[Package ID](../reference/glossary.md#package-id) を設定する。</strong>
 
-    Capacitor の場合、`capacitor.config.json` ファイルを開き `appId` プロパティを修正します。
+   Capacitor の場合、`capacitor.config.json` ファイルを開き `appId` プロパティを修正します。
 
-    Cordova の場合、`config.xml` ファイルを開き、ルート要素 `<widget>` の `id` 属性を修正します。よりくわしい情報は [Cordova ドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご参照ください。
+   Cordova の場合、`config.xml` ファイルを開き、ルート要素 `<widget>` の `id` 属性を修正します。よりくわしい情報は [Cordova ドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご参照ください。
 
 2. <strong>
      プロジェクトを <b>Xcode</b> で開く。
@@ -38,8 +39,8 @@ iOSデバイスでアプリケーションを実行するには、プロビジ
    Cordova の場合、Xcode 開きます。**File** &raquo; **Open** からアプリケーションを見つけます。アプリケーション内の `platforms/ios` ディレクトリを開きます。
 
 3. <strong>
-     <b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。
-     **Identyty** セクションで、設定された Package ID がバンドル識別子と一致することを確認します。
+     <b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。 **Identyty**
+     セクションで、設定された Package ID がバンドル識別子と一致することを確認します。
    </strong>
 
    ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
@@ -47,8 +48,7 @@ iOSデバイスでアプリケーションを実行するには、プロビジ
 4. <strong>
      同じプロジェクトエディタの <b>署名</b> セクションで、<b>Automatically manage signing</b> が
      有効になっていることを確認します。
-   </strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は
-   プロビジョニングと署名を自動的に準備しようとします。
+   </strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は プロビジョニングと署名を自動的に準備しようとします。
 
    ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
 
@@ -58,7 +58,7 @@ iOSデバイスでアプリケーションを実行するには、プロビジ
 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
 ```
 
-このエラーは Xcode のエラーコードで、プロビジョニングの問題または古いcordova依存関係が原因で発生する可能性があります。このエラーを修正するには、まず上記の手順でプロビジョニングプロファイルが生成されていることを確認したのち、[Xcode からアプリケーションを実行します](../developing/ios.md#running-with-xcode)。
+このエラーは Xcode のエラーコードで、プロビジョニングの問題または古い cordova 依存関係が原因で発生する可能性があります。このエラーを修正するには、まず上記の手順でプロビジョニングプロファイルが生成されていることを確認したのち、[Xcode からアプリケーションを実行します](../developing/ios.md#running-with-xcode)。
 
 もしそれでもエラーが解決しない場合は、次のコマンドを実行してください:
 
@@ -73,13 +73,13 @@ ionic cordova build ios --prod
 
 Once these commands have been ran a fresh build can be done.
 
-## Google Play Servicesのバージョンが衝突
+## Google Play Services のバージョンが衝突
 
 ```shell
 Error: more than one library with package name com.google.android.gms
 ```
 
-このエラーは、2つの異なるプラグインが異なるバージョンの  `Google Play Services` を使用しようとしたことが原因です。この問題を解決するには、バージョンが `7.1.0` 以上の `cordova` および バージョンが `6.3.0` 以上の `cordova-android` を実行していることを確認してください。最新の `cordova` をインストールするには次を実行してください:
+このエラーは、2 つの異なるプラグインが異なるバージョンの `Google Play Services` を使用しようとしたことが原因です。この問題を解決するには、バージョンが `7.1.0` 以上の `cordova` および バージョンが `6.3.0` 以上の `cordova-android` を実行していることを確認してください。最新の `cordova` をインストールするには次を実行してください:
 
 ```shell
 npm install cordova@latest
diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.md
index f84aa86ea7d..da493bb6a8f 100644
--- a/docs/troubleshooting/runtime.md
+++ b/docs/troubleshooting/runtime.md
@@ -22,7 +22,7 @@ title: ランタイムの問題
 
 `@angular/cli@7.3` 以上のプロジェクトの場合、ポリフィルは自動的に含まれます。その前に作成されたプロジェクトでは、ポリフィルを手動で有効にする必要があります。
 
-`src/polyfills.ts` にて、Android 4.4をサポートするために ES6ポリフィルをすべて有効にする必要があります。
+`src/polyfills.ts` にて、Android 4.4 をサポートするために ES6 ポリフィルをすべて有効にする必要があります。
 
 あるいは、プロジェクトを更新して、`@angular/cli` パッケージと `@angular-devkit` パッケージの最新リリースを使用し、`angular.json` のビルドオプションオブジェクトに `es5BrowserSupport` オプションを含めることもできます:
 
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md
index d670fd5597f..77b1a5b5148 100644
--- a/docs/updating/6-0.md
+++ b/docs/updating/6-0.md
@@ -16,14 +16,14 @@ For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refe
 
 ### Angular
 
-1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンのAngularに更新します。.
-2. Ionic6の最新バージョンに更新します。
+1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンの Angular に更新します。.
+2. Ionic6 の最新バージョンに更新します。
 
 ```shell
 npm install @ionic/angular@6
 ```
 
-Ionic Angular Serverを使用している場合は、それも必ず更新してください:
+Ionic Angular Server を使用している場合は、それも必ず更新してください:
 
 ```shell
 npm install @ionic/angular@6 @ionic/angular-server@6
@@ -34,7 +34,7 @@ npm install @ionic/angular@6 @ionic/angular-server@6
 
 ### React
 
-1. Ionic 6 は React 17+ をサポートしています。Reactの最新バージョンに更新します:
+1. Ionic 6 は React 17+ をサポートしています。React の最新バージョンに更新します:
 
 ```shell
 npm install react@latest react-dom@latest
@@ -103,25 +103,25 @@ import { menuController } from '@ionic/core/components';
 
 ### Vue
 
-1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vueの最新バージョンに更新ください。
+1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vue の最新バージョンに更新ください。
 
 ```shell
 npm install vue@3 vue-router@4
 ```
 
-2. Vue CLIを使用するアプリの場合は、Vue CLI 5をインストールします。
+2. Vue CLI を使用するアプリの場合は、Vue CLI 5 をインストールします。
 
 ```shell
 npm install -g @vue/cli@next
 ```
 
-次に、すべてのVue CLIプラグインをアップグレードします。
+次に、すべての Vue CLI プラグインをアップグレードします。
 
 ```shell
 vue upgrade --next
 ```
 
-3. Ionic 6の最新バージョンに更新します。
+3. Ionic 6 の最新バージョンに更新します。
 
 ```shell
 npm install @ionic/vue@6 @ionic/vue-router@6
@@ -318,7 +318,7 @@ npm install @ionic/core@6
 
 2. `text` と `placeholder` の CSS シャドウパーツの使用をすべて削除します。
 
-3. CSS変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSSプロパティのいずれかを使用することができます。
+3. CSS 変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSS プロパティのいずれかを使用することができます。
 
 4. `open` メソッドの使用はすべて削除します。datetime をオーバーレイで表示するには、 `ion-modal` または `ion-popover` コンポーネントの中に配置する。詳細は、[ion-datetime Usage Examples](../api/datetime#usage) を参照してください。
 
@@ -330,7 +330,7 @@ npm install @ionic/core@6
 
 ### Icon
 
-Ionic 6には、Ionicons 6が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
+Ionic 6 には、Ionicons 6 が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
 
 ### Input
 
@@ -414,7 +414,7 @@ ion-popover::part(content) {
 
 ### ブラウザサポート
 
-Ionicがサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
+Ionic がサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
 
 If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
 
@@ -426,14 +426,13 @@ Safari >=13
 iOS >=13
 ```
 
-
 ### テスト
 
-Ionic 6は、ESモジュールとして出荷されるようになりました。ESモジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jestでテストする開発者は、Jest 27の時点でJestがES Modulesを完全にサポートしていないため、Jestの設定を更新する必要があります。
+Ionic 6 は、ES モジュールとして出荷されるようになりました。ES モジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jest でテストする開発者は、Jest 27 の時点で Jest が ES Modules を完全にサポートしていないため、Jest の設定を更新する必要があります。
 
-このアップデートでは、Babelを使用してIonicのESモジュールをJestが理解できるCommonJS (CJS) 形式にコンパイルする必要があります。JestがESモジュールをサポートするようになれば、この変更は必要なくなります。JestのESモジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
+このアップデートでは、Babel を使用して Ionic の ES モジュールを Jest が理解できる CommonJS (CJS) 形式にコンパイルする必要があります。Jest が ES モジュールをサポートするようになれば、この変更は必要なくなります。Jest の ES モジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
 
-新しいIonicアプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存のIonicアプリをお持ちの方は、以下の手順でJestをIonic 6で動作させることができます。
+新しい Ionic アプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存の Ionic アプリをお持ちの方は、以下の手順で Jest を Ionic 6 で動作させることができます。
 
 1. Jest の設定に、関連する Ionic パッケージを含む `transformIgnorePatterns` フィールドを追加します。これは通常 `jest.config.js` または `package.json` の `jest` フィールドに含まれています。
 
@@ -454,10 +453,10 @@ module.exports = {
 ```
 
 :::note
-Ionic ReactまたはIonic Vueを使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic Reactの場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vueの場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
+Ionic React または Ionic Vue を使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic React の場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vue の場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
 :::
 
-Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これはCRAの制限であり、Ionicがコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
+Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これは CRA の制限であり、Ionic がコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
 
 ```json title="package.json"
 "scripts": {
@@ -474,6 +473,6 @@ Create React App (CRA) を使用している開発者にとっては、現在の
 
 ## アップグレートへの助けが必要？
 
-[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティとCSS変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
+[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティと CSS 変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
 
 アップグレードに助けが必要な場合、 [Ionic Forum](https://forum.ionicframework.com/) にスレッドを立ててください。
diff --git a/docs/updating/7-0.md b/docs/updating/7-0.md
index eea78c84315..95858cea562 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -16,20 +16,20 @@ For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refe
 
 ### Angular
 
-1. Ionic 7はAngular 14+に対応しています。 [Angular Update Guide](https://update.angular.io/) に従い、Angularの最新バージョンにアップデートしてください。
-2. プロジェクトでrxjsを使用している場合、Ionic 7ではrxjsの最低バージョンが7.5.0である必要があります：
+1. Ionic 7 は Angular 14+に対応しています。 [Angular Update Guide](https://update.angular.io/) に従い、Angular の最新バージョンにアップデートしてください。
+2. プロジェクトで rxjs を使用している場合、Ionic 7 では rxjs の最低バージョンが 7.5.0 である必要があります：
 
 ```shell
 npm install rxjs@7.5.0
 ```
 
-3. Ionic 7の最新バージョンにアップデートしてください：
+3. Ionic 7 の最新バージョンにアップデートしてください：
 
 ```shell
 npm install @ionic/angular@7
 ```
 
-Ionic Angular ServerとIonic Angular Toolkitを使用している場合は、必ずそちらも更新してください。
+Ionic Angular Server と Ionic Angular Toolkit を使用している場合は、必ずそちらも更新してください。
 
 ```shell
 npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9
@@ -39,13 +39,13 @@ npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9
 
 ### React
 
-1. Ionic 7はReact 17+に対応しています。Reactの最新バージョンにアップデートしてください。
+1. Ionic 7 は React 17+に対応しています。React の最新バージョンにアップデートしてください。
 
 ```shell
 npm install react@latest react-dom@latest
 ```
 
-2. Ionic 7の最新バージョンにアップデートします。
+2. Ionic 7 の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/react@7 @ionic/react-router@7
@@ -53,13 +53,13 @@ npm install @ionic/react@7 @ionic/react-router@7
 
 ### Vue
 
-1. Ionic 7はVue 3.0.6+をサポートしています。Vueの最新バージョンにアップデートしてください。
+1. Ionic 7 は Vue 3.0.6+をサポートしています。Vue の最新バージョンにアップデートしてください。
 
 ```shell
 npm install vue@latest vue-router@latest
 ```
 
-3. Ionic 7の最新バージョンにアップデートします。
+3. Ionic 7 の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/vue@7 @ionic/vue-router@7
@@ -67,7 +67,7 @@ npm install @ionic/vue@7 @ionic/vue-router@7
 
 ### Core
 
-1. Ionic 7の最新バージョンにアップデートします。
+1. Ionic 7 の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/core@7
@@ -77,7 +77,7 @@ npm install @ionic/core@7
 
 ### ブラウザサポート
 
-Ionicがサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
+Ionic がサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
 
 `browserslist` または `.browserslistrc` ファイルをお持ちの場合は、以下の内容で更新してください。
 
@@ -101,7 +101,7 @@ iOS >=14
 ### Datetime
 
 1. `value` プロパティに空文字列(`''`)を設定するコードを削除します
-2.  `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetimeはタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
+2. `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetime はタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
 
 ### Input
 
@@ -126,7 +126,7 @@ iOS >=14
 
 ### Slides
 
-1. `ion-slides`、`ion-slide`、および関連する型を削除する。これらのコンポーネントは、Swiper.jsを直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
+1. `ion-slides`、`ion-slide`、および関連する型を削除する。これらのコンポーネントは、Swiper.js を直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
 
 [Angular Migration Guide](https://ionicframework.com/docs/angular/slides)<br />
 [React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
@@ -138,11 +138,11 @@ iOS >=14
 
 ### Toggle
 
-1. CSS変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--track-background` と `--track-background-checked` にリネームします。
+1. CSS 変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--track-background` と `--track-background-checked` にリネームします。
 
 ### Virtual Scroll
 
-`ion-virtual-scroll`とそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworksが提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
+`ion-virtual-scroll`とそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworks が提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
 
 [Angular Migration Guide](https://ionicframework.com/docs/angular/virtual-scroll)<br />
 [React Migration Guide](https://ionicframework.com/docs/react/virtual-scroll)<br />
@@ -150,7 +150,6 @@ iOS >=14
 
 ## アップグレードに助けが必要？
 
-[Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x) を必ず見てください。デフォルトのプロパティとCSS Variableの値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。
+[Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x) を必ず見てください。デフォルトのプロパティと CSS Variable の値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。
 
 アップグレードのヘルプが必要な場合は、[Ionic Forum](https://forum.ionicframework.com/)にスレッドを投稿してください。
-
diff --git a/docs/vue/config.md b/docs/vue/config.md
index 65c8340d4ac..5f5dba435fe 100644
--- a/docs/vue/config.md
+++ b/docs/vue/config.md
@@ -1,10 +1,10 @@
 # Config
 
-Ionic Configは、アプリケーション全体にわたってコンポーネントのプロパティをグローバルに変更する方法を提供します。Ionic Configは、アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。
+Ionic Config は、アプリケーション全体にわたってコンポーネントのプロパティをグローバルに変更する方法を提供します。Ionic Config は、アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。
 
 ## グローバル設定
 
-アプリケーションの初期のIonic Configを上書きするには、IonicVueプラグインのインストール時に追加パラメータとしてConfigオブジェクトを指定します。
+アプリケーションの初期の Ionic Config を上書きするには、IonicVue プラグインのインストール時に追加パラメータとして Config オブジェクトを指定します。
 
 ```tsx
 createApp(App).use(IonicVue, {
@@ -13,13 +13,13 @@ createApp(App).use(IonicVue, {
 });
 ```
 
-上の例では、Material Designのリップル効果を無効にし、モードをMaterial Designにしています。
+上の例では、Material Design のリップル効果を無効にし、モードを Material Design にしています。
 
 ## プラットフォームごとの構成
 
-Ionic Configは、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができます。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
+Ionic Config は、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができます。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
 
-次の例では、アプリケーションがモバイルWebブラウザで実行されている場合にのみ、Ionicアプリケーションのすべてのアニメーションを無効にしています。
+次の例では、アプリケーションがモバイル Web ブラウザで実行されている場合にのみ、Ionic アプリケーションのすべてのアニメーションを無効にしています。
 `isPlatform ()` 呼び出しは、渡されたプラットフォームに基づいて `true` または `false` を返します。 [Platform Documentation](platform.md#platforms) を指定します。
 
 ```tsx
@@ -76,9 +76,9 @@ createApp(App).use(IonicVue, getConfig());
 
 ## Interfaces
 
-### Configオプション
+### Config オプション
 
-以下はIonicで使用できる設定オプションのリストです。
+以下は Ionic で使用できる設定オプションのリストです。
 
 | Config                   | Type                                                                          | Description                                                                                              |
 | ------------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index 1cdb5a88821..15c106b5b47 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -2,24 +2,24 @@
 sidebar_label: ライフサイクル
 ---
 
-# Vueのライフサイクル
+# Vue のライフサイクル
 
-このガイドでは、Ionic FrameworkのライフサイクルイベントをIonic Vueアプリケーションで使用する方法について説明します。
+このガイドでは、Ionic Framework のライフサイクルイベントを Ionic Vue アプリケーションで使用する方法について説明します。
 
-## Ionic Frameworkのライフサイクルメソッド
+## Ionic Framework のライフサイクルメソッド
 
-Ionic Frameworkはアプリで使えるいくつかのライフサイクルメソッドを提供します:
+Ionic Framework はアプリで使えるいくつかのライフサイクルメソッドを提供します:
 
-| Event Name         | Description                                                          |
-|--------------------|------------------------------------------------------------------|
-| `ionViewWillEnter` | コンポーネントが表示されるアニメーションが __はじまる時に__ 発火します。 |
-| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが __終了した時に__ 発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが __はじまる時に__ 発火します。  |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが __終了した時に__ 発火します。 |
+| Event Name         | Description                                                              |
+| ------------------ | ------------------------------------------------------------------------ |
+| `ionViewWillEnter` | コンポーネントが表示されるアニメーションが **はじまる時に** 発火します。 |
+| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが **終了した時に** 発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが **はじまる時に** 発火します。   |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが **終了した時に** 発火します。   |
 
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
 
-ライフサイクルは、Vueのライフサイクルメソッドと同じように、Vueコンポーネントのルートで関数として定義されます：
+ライフサイクルは、Vue のライフサイクルメソッドと同じように、Vue コンポーネントのルートで関数として定義されます：
 
 ```tsx
 import { IonPage } from '@ionic/vue';
@@ -82,27 +82,26 @@ export default defineComponent({
 Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly.
 :::
 
-## Ionic Frameworkがページのライフを処理する仕組み
+## Ionic Framework がページのライフを処理する仕組み
 
-Ionic Frameworkには `<ion-router-outlet>` と呼ばれるルータアウトレットがあります。このアウトレットは、Vue Routerの `<router-view>` を拡張し、モバイルデバイスのエクスペリエンスを向上させるためのいくつかの追加機能を提供します。
+Ionic Framework には `<ion-router-outlet>` と呼ばれるルータアウトレットがあります。このアウトレットは、Vue Router の `<router-view>` を拡張し、モバイルデバイスのエクスペリエンスを向上させるためのいくつかの追加機能を提供します。
 
-アプリが `<ion-router-outlet>` でラップされている場合、Ionic Frameworkはナビゲーションを少し異なる扱いにします。新しいページに移動すると、Ionic Frameworkは古いページを既存のDOMに保持しますが、ビューからは非表示にして新しいページに移動します。これを行う理由は2つあります:
+アプリが `<ion-router-outlet>` でラップされている場合、Ionic Framework はナビゲーションを少し異なる扱いにします。新しいページに移動すると、Ionic Framework は古いページを既存の DOM に保持しますが、ビューからは非表示にして新しいページに移動します。これを行う理由は 2 つあります:
 
 1. 古いページの状態を維持できます(画面上のデータ、スクロール位置など...)
 2. ページはすでに存在しており、作成する必要がないため、よりスムーズにページに戻ることができます。
 
-ページがDOMから削除されるのは、UIの戻るボタンやブラウザーの戻るボタンを押すなど、ページが "popped" された場合のみです。
+ページが DOM から削除されるのは、UI の戻るボタンやブラウザーの戻るボタンを押すなど、ページが "popped" された場合のみです。
 
-この特別な処理のため、 `<keep-alive>`, `<transition>`,`<router-view>` などの特定のVueルータコンポーネントは、Ionic Vueアプリケーションでは使用しないでください。また、各ページのスクロール位置は自動的に保存されるため、ここではVue Routerのスクロール動作APIは必要ありません。
-
-Vueのすべてのライフサイクルメソッド(`mounted` や `beforeUnmount`など)も使用可能です。ただし、Ionic Vueはページのライフタイムを管理するため、特定のイベントは予期したときに起動しない場合があります。たとえば、mountedはページが最初に表示されたときに起動しますが、ページから離れると、Ionic FrameworkによってページがDOM内に保持され、その後ページにアクセスしても再度 `mounted` が呼び出されることはありません。このシナリオは、Ionic Frameworkのライフサイクル・メソッドが存在する主な理由であり、ネイティブ・フレームワークのイベントが起動しない可能性がある場合でも、ビューの開始時と終了時にロジックを呼び出す方法を提供します。
+この特別な処理のため、 `<keep-alive>`, `<transition>`,`<router-view>` などの特定の Vue ルータコンポーネントは、Ionic Vue アプリケーションでは使用しないでください。また、各ページのスクロール位置は自動的に保存されるため、ここでは Vue Router のスクロール動作 API は必要ありません。
 
+Vue のすべてのライフサイクルメソッド(`mounted` や `beforeUnmount`など)も使用可能です。ただし、Ionic Vue はページのライフタイムを管理するため、特定のイベントは予期したときに起動しない場合があります。たとえば、mounted はページが最初に表示されたときに起動しますが、ページから離れると、Ionic Framework によってページが DOM 内に保持され、その後ページにアクセスしても再度 `mounted` が呼び出されることはありません。このシナリオは、Ionic Framework のライフサイクル・メソッドが存在する主な理由であり、ネイティブ・フレームワークのイベントが起動しない可能性がある場合でも、ビューの開始時と終了時にロジックを呼び出す方法を提供します。
 
 ## 各ライフサイクルメソッドのガイダンス
 
-以下は、life cycle eventsごとのユースケースに関するヒントです。
+以下は、life cycle events ごとのユースケースに関するヒントです。
 
-- `ionViewWillEnter` - `ionViewWillEnter` はViewがナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Serviceからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量のDOM操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
-- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Pageがユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたは [ion-skeleton-text](../api/skeleton-text) を使ったスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
-- `ionViewWillLeave` - observablesのunsubscribingのように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
+- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
+- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたは [ion-skeleton-text](../api/skeleton-text) を使ったスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
+- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
 - `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index 25ad5d53f3d..5b9ad1b1f98 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -13,19 +13,19 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
   />
 </head>
 
-このガイドでは、IonicとVueで構築されたアプリでルーティングがどのように機能するかについて説明します。
+このガイドでは、Ionic と Vue で構築されたアプリでルーティングがどのように機能するかについて説明します。
 
-`IonRouterOutlet` コンポーネントは、内部で一般的な [Vue Router](https://router.vuejs.org/) ライブラリを使用します。IonicとVue Routerを使えば、リッチなページ遷移を持つマルチページアプリを作ることができます。
+`IonRouterOutlet` コンポーネントは、内部で一般的な [Vue Router](https://router.vuejs.org/) ライブラリを使用します。Ionic と Vue Router を使えば、リッチなページ遷移を持つマルチページアプリを作ることができます。
 
-Vue Routerを使ったルーティングについて知っていることはすべてIonic Vueに引き継がれます。Ionic Vueアプリの基本とルーティングの仕組みを見てみましょう。
+Vue Router を使ったルーティングについて知っていることはすべて Ionic Vue に引き継がれます。Ionic Vue アプリの基本とルーティングの仕組みを見てみましょう。
 
 ## 簡単なメモ
 
-このガイドを読んでいると、これらのコンセプトのほとんどが、Ionic Frameworkを使わずにVue Routerで見られるコンセプトと非常に似ていることに気がつくかもしれません。あなたの観察は正しいでしょう! Ionic Vueは、Ionic Frameworkでアプリを構築するための移行をできるだけシームレスにするために、Vue Routerの最良の部分を活用しています。そのため、独自のルーティングソリューションを構築しようとするよりも、できるだけVue Routerの機能に依存することをお勧めします。
+このガイドを読んでいると、これらのコンセプトのほとんどが、Ionic Framework を使わずに Vue Router で見られるコンセプトと非常に似ていることに気がつくかもしれません。あなたの観察は正しいでしょう! Ionic Vue は、Ionic Framework でアプリを構築するための移行をできるだけシームレスにするために、Vue Router の最良の部分を活用しています。そのため、独自のルーティングソリューションを構築しようとするよりも、できるだけ Vue Router の機能に依存することをお勧めします。
 
-## 簡単なRoute
+## 簡単な Route
 
-次に示すのは、 "/home" URLへの単一のルートを定義するルーティング設定の例です。 "/home" にアクセスすると、ルートによって `HomePage`  コンポーネントがレンダリングされます。
+次に示すのは、 "/home" URL への単一のルートを定義するルーティング設定の例です。 "/home" にアクセスすると、ルートによって `HomePage` コンポーネントがレンダリングされます。
 
 **router/index.ts**
 
@@ -70,9 +70,9 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-このリダイレクトでは、最初にインデックスのパスが参照されます。そして、 `home` routeにリダイレクトしてロードを行います。
+このリダイレクトでは、最初にインデックスのパスが参照されます。そして、 `home` route にリダイレクトしてロードを行います。
 
-## 異なるRoutesへのナビゲーション
+## 異なる Routes へのナビゲーション
 
 これは素晴らしいことですが、実際にルートにナビゲートするにはどうすればよいのでしょうか。これには、 `router-link` プロパティを使用できます。新しいルーティング設定を作成します:
 
@@ -95,13 +95,13 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-`home` routeで開始し、`detail` routeに移動するボタンを追加するとします。`detail` routeに移動するには、次のHTMLを使用します:
+`home` route で開始し、`detail` route に移動するボタンを追加するとします。`detail` route に移動するには、次の HTML を使用します:
 
 ```html
 <ion-button router-link="/detail">Go to detail</ion-button>
 ```
 
-また、ルーターAPIを使用して、プログラムでアプリケーション内を移動することもできます:
+また、ルーター API を使用して、プログラムでアプリケーション内を移動することもできます:
 
 ```html
 <template>
@@ -208,7 +208,7 @@ A key characteristic of `router.go()` is that it expects your application histor
 
 ## Lazy Loading Routes
 
-現在のrouteの設定方法では、アプリをロードするときに同じ初期チャンクに含まれるようになっているが、これは必ずしも理想的ではありません。代わりに、必要に応じてコンポーネントがロードされるようにrouteを設定できます。
+現在の route の設定方法では、アプリをロードするときに同じ初期チャンクに含まれるようになっているが、これは必ずしも理想的ではありません。代わりに、必要に応じてコンポーネントがロードされるように route を設定できます。
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -299,9 +299,9 @@ For more on nested router outlets, please see [Nested Routes](#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.
 
-### 共有URL
+### 共有 URL
 
-共有URLは、ルートが共通のURLの一部を持つルート設定です。共有URL設定の例を次に示します:
+共有 URL は、ルートが共通の URL の一部を持つルート設定です。共有 URL 設定の例を次に示します:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -316,11 +316,11 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-上記のルートは、URLの `dashboard` 部分を再利用するため、 "shared" と見なされます。
+上記のルートは、URL の `dashboard` 部分を再利用するため、 "shared" と見なされます。
 
-### ネストされたRoute
+### ネストされた Route
 
-Nested Routesは、ルートが他のルートの子としてリストされるルート設定です。ネストされたルート設定の例を次に示します:
+Nested Routes は、ルートが他のルートの子としてリストされるルート設定です。ネストされたルート設定の例を次に示します:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -345,16 +345,15 @@ const routes: Array<RouteRecordRaw> = [
 
 ### どちらを選ぶべきか
 
-共有URLは、URLの2つのページ間の関係を維持しながら、ページAからページBに遷移する場合に便利です。前述の例では、 `/dashboard` ページのボタンで `/dashboard/stats` ページに移行できます。2つのページ間の関係は、a) ページの遷移とb) URLによって維持されます。
+共有 URL は、URL の 2 つのページ間の関係を維持しながら、ページ A からページ B に遷移する場合に便利です。前述の例では、 `/dashboard` ページのボタンで `/dashboard/stats` ページに移行できます。2 つのページ間の関係は、a) ページの遷移と b) URL によって維持されます。
 
-ネストされたルートは、コンセントAのコンテンツをレンダリングする必要がある場合、およびネストされたコンセントBの内部のサブコンテンツをレンダリングする必要がある場合に便利です。最も一般的な使用例は、タブです。Ionicスターターアプリのタブをロードすると、最初の `ion-router-outlet` で `ion-tab-bar`  および `ion-tabs` コンポーネントがレンダリングされます。`ion-tabs` コンポーネントは、各タブの内容をレンダリングする別の 「イオンルータ出力」 をレンダリングします。
-
-モバイルアプリケーションでネストされたルートが意味をなすユースケースはほとんどありません。疑わしい場合は、共有URLルート設定を使用します。ネストされたルーティングをタブ以外のコンテキストで使用すると、アプリのナビゲーションが混乱する可能性があるため、使用しないように強く注意しています。
+ネストされたルートは、コンセント A のコンテンツをレンダリングする必要がある場合、およびネストされたコンセント B の内部のサブコンテンツをレンダリングする必要がある場合に便利です。最も一般的な使用例は、タブです。Ionic スターターアプリのタブをロードすると、最初の `ion-router-outlet` で `ion-tab-bar` および `ion-tabs` コンポーネントがレンダリングされます。`ion-tabs` コンポーネントは、各タブの内容をレンダリングする別の 「イオンルータ出力」 をレンダリングします。
 
+モバイルアプリケーションでネストされたルートが意味をなすユースケースはほとんどありません。疑わしい場合は、共有 URL ルート設定を使用します。ネストされたルーティングをタブ以外のコンテキストで使用すると、アプリのナビゲーションが混乱する可能性があるため、使用しないように強く注意しています。
 
 ## タブの操作
 
-タブを操作する場合、Ionic Vueはどのビューがどのタブに属しているかを知る方法を必要とします。ここでは `IonTabs` コンポーネントが便利ですが、この場合のルーティング設定を見てみましょう:
+タブを操作する場合、Ionic Vue はどのビューがどのタブに属しているかを知る方法を必要とします。ここでは `IonTabs` コンポーネントが便利ですが、この場合のルーティング設定を見てみましょう:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -442,7 +441,7 @@ const routes: Array<RouteRecordRaw> = [
 </script>
 ```
 
-以前にIonic Frameworkを使ったことがある人なら、このことをよく知っているはずです。`ion-tabs` コンポーネントを作成し、 `ion-tab-bar` を提供します。`ion-tab-bar` は `ion-tab-button` コンポーネントを提供し、それぞれにルータの設定の対応するタブに関連付けられた `tab` プロパティがあります。
+以前に Ionic Framework を使ったことがある人なら、このことをよく知っているはずです。`ion-tabs` コンポーネントを作成し、 `ion-tab-bar` を提供します。`ion-tab-bar` は `ion-tab-button` コンポーネントを提供し、それぞれにルータの設定の対応するタブに関連付けられた `tab` プロパティがあります。
 
 ### タブ内の子ルート
 
@@ -533,7 +532,7 @@ The example below shows how the Spotify app reuses the same album component to s
 
 ### IonRouterOutlet
 
-`IonRouterOutlet` コンポーネントは、ビューをレンダリングするためのコンテナを提供します。これは他のVueアプリケーションに見られる `RouterView` コンポーネントに似ていますが、 `IonRouterOutlet` は同じアウトレット内のDOMで複数のページをレンダリングできるという点が異なります。コンポーネントが `IonRouterOutlet` でレンダリングされる場合、これはIonic Framework "Page"と見なされます。ルーター・アウトレット・コンテナーは、ページ間の遷移アニメーションを制御するだけでなく、ページがいつ作成および破棄されるかを制御します。これにより、ビューを切り替えるときにビュー間の状態を維持することができます。
+`IonRouterOutlet` コンポーネントは、ビューをレンダリングするためのコンテナを提供します。これは他の Vue アプリケーションに見られる `RouterView` コンポーネントに似ていますが、 `IonRouterOutlet` は同じアウトレット内の DOM で複数のページをレンダリングできるという点が異なります。コンポーネントが `IonRouterOutlet` でレンダリングされる場合、これは Ionic Framework "Page"と見なされます。ルーター・アウトレット・コンテナーは、ページ間の遷移アニメーションを制御するだけでなく、ページがいつ作成および破棄されるかを制御します。これにより、ビューを切り替えるときにビュー間の状態を維持することができます。
 
 テンプレートで設定する際に、 `IonRouterOutlet` の内部には何も指定しないでください。`IonRouterOutlet` は子コンポーネントにネストすることができますが、通常はアプリケーション内のナビゲーションが混乱するため注意が必要です。詳細については、[Shared URLs versus Nested Routes](#shared-urls-versus-nested-routes) を参照してください。
 
@@ -581,9 +580,9 @@ Returns the Ionic router instance, containing API methods for navigating, custom
 
 For example usages, please refer to our [Utility Functions](utility-functions#useionrouter).
 
-## URLパラメーター
+## URL パラメーター
 
-元のルーティング例を拡張して、URLパラメータの使用方法を示します:
+元のルーティング例を拡張して、URL パラメータの使用方法を示します:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -604,7 +603,7 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-ここで、 `detail` パス文字列の最後に `:id` を追加したことに注意してください。URLパラメータは、ルートパスの動的な部分です。ユーザーが `/details/1` などのURLに移動すると、 "1" が "id" という名前のパラメータに保存され、ルートのレンダリング時にコンポーネントでアクセスできるようになります。
+ここで、 `detail` パス文字列の最後に `:id` を追加したことに注意してください。URL パラメータは、ルートパスの動的な部分です。ユーザーが `/details/1` などの URL に移動すると、 "1" が "id" という名前のパラメータに保存され、ルートのレンダリング時にコンポーネントでアクセスできるようになります。
 
 コンポーネントでの使用方法を見てみましょう。
 
diff --git a/docs/vue/overview.md b/docs/vue/overview.md
index 9b6d49f113d..65578a7cf4f 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -14,21 +14,21 @@ sidebar_label: 概要
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-Ionic Frameworkのコアな経験と、Vue開発者向けにカスタマイズされたツールやAPIを組み合わせたものが `@ionic/vue` です。
+Ionic Framework のコアな経験と、Vue 開発者向けにカスタマイズされたツールや API を組み合わせたものが `@ionic/vue` です。
 
-## Vueバージョンサポート
+## Vue バージョンサポート
 
-Ionic VueはVue 3.0.0上に構築されています。Ionic Vueの初期バージョンでアプリを構築している場合は、最新のリリースにアップグレードして、Vueの依存関係をアップグレードしてください。
+Ionic Vue は Vue 3.0.0 上に構築されています。Ionic Vue の初期バージョンでアプリを構築している場合は、最新のリリースにアップグレードして、Vue の依存関係をアップグレードしてください。
 
-## Vueツール
+## Vue ツール
 
-Ionic Vueプロジェクトには通常のVue CLIプロジェクトと同じツールが付属しています。つまり、Vue CLIとそのすべての機能を使って構築することになります。VueのデフォルトテンプレートにはルーティングやTypeScriptのサポートなど、デフォルトで有効になっている機能がほとんどありませんが、Ionic Vueはそれらをデフォルトで有効にしています。
+Ionic Vue プロジェクトには通常の Vue CLI プロジェクトと同じツールが付属しています。つまり、Vue CLI とそのすべての機能を使って構築することになります。Vue のデフォルトテンプレートにはルーティングや TypeScript のサポートなど、デフォルトで有効になっている機能がほとんどありませんが、Ionic Vue はそれらをデフォルトで有効にしています。
 
 ## Native Tooling
 
-[Capacitor](https://capacitorjs.com) は、Ionic VueウェブアプリをiOS、Android、ウェブ上でネイティブに動作させるための公式クロスプラットフォームアプリライブラリです。
+[Capacitor](https://capacitorjs.com) は、Ionic Vue ウェブアプリを iOS、Android、ウェブ上でネイティブに動作させるための公式クロスプラットフォームアプリライブラリです。
 
-[Cordova](https://cordova.apache.org/) とCordovaプラグインでIonic Vueを使用する際の技術的な制限はありませんが、Capacitorが公式に推奨されています。現時点では、[Ionic CLIツール](/docs/cli) ツールでIonic VueのCordova統合をサポートする計画はない。詳細は [こちら](https://capacitorjs.com/docs/cordova) をご覧ください。
+[Cordova](https://cordova.apache.org/) と Cordova プラグインで Ionic Vue を使用する際の技術的な制限はありませんが、Capacitor が公式に推奨されています。現時点では、[Ionic CLI ツール](/docs/cli) ツールで Ionic Vue の Cordova 統合をサポートする計画はない。詳細は [こちら](https://capacitorjs.com/docs/cordova) をご覧ください。
 
 ## コミュニティからの情報
 
diff --git a/docs/vue/platform.md b/docs/vue/platform.md
index 5e6463d33ba..e1bdf32cde2 100644
--- a/docs/vue/platform.md
+++ b/docs/vue/platform.md
@@ -10,7 +10,7 @@ import { isPlatform } from '@ionic/vue';
 isPlatform('ios'); // returns true when running on a iOS device
 ```
 
-ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPadから実行するアプリは、mobile、ios、ipad、およびtabletのプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordovaもtrueになります。
+ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPad から実行するアプリは、mobile、ios、ipad、および tablet のプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordova も true になります。
 
 ## getPlatforms
 
@@ -22,7 +22,7 @@ import { getPlatforms } from '@ionic/vue';
 getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone
 ```
 
-使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhoneでは、mobile、ios、およびiphoneが返されます。
+使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhone では、mobile、ios、および iphone が返されます。
 
 ## Platforms
 
diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md
index 7b46056db75..a44ca48bf53 100644
--- a/docs/vue/pwa.md
+++ b/docs/vue/pwa.md
@@ -47,17 +47,17 @@ As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. Se
 
 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 Application 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.
 
-既存のプロジェクトの場合は、 `vue add` コマンドを実行して、VueのPWAプラグインをインストールできます。
+既存のプロジェクトの場合は、 `vue add` コマンドを実行して、Vue の PWA プラグインをインストールできます。
 
 ```shell
 vue add pwa
 ```
 
 :::note
-変更する前に、現在の状況を必ずGitにコミットしてください。
+変更する前に、現在の状況を必ず Git にコミットしてください。
 :::
 
-これが完了すると、VueのCLIは新しく `registerServiceWorker.ts` を作成します。それを `main.ts` ファイルにインポートします。
+これが完了すると、Vue の CLI は新しく `registerServiceWorker.ts` を作成します。それを `main.ts` ファイルにインポートします。
 
 ```tsx
 import { createApp } from 'vue';
@@ -69,7 +69,7 @@ import './registerServiceWorker';
 createApp(App).use(router).mount('#app');
 ```
 
-`registerServiceWorker.ts` はCLIがビルド時に作成するservice workerです。ここでは、service workerがアップデート、ネットワーク接続の変更、またはエラーを検出したときのユーザの操作性をカスタマイズできます。
+`registerServiceWorker.ts` は CLI がビルド時に作成する service worker です。ここでは、service worker がアップデート、ネットワーク接続の変更、またはエラーを検出したときのユーザの操作性をカスタマイズできます。
 
 ```tsx
 import { register } from 'register-service-worker';
@@ -103,13 +103,13 @@ if (process.env.NODE_ENV === 'production') {
 }
 ```
 
-生成されるService Workerは、 [Workbox's webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいており、デフォルトで `GenerateSW()` を使用するように設定されています。つまり、Workboxはビルド時に、処理するすべてのファイルのService Workerキャッシュを自動的に生成します。
+生成される Service Worker は、 [Workbox's webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいており、デフォルトで `GenerateSW()` を使用するように設定されています。つまり、Workbox はビルド時に、処理するすべてのファイルの Service Worker キャッシュを自動的に生成します。
 
-これを設定してデフォルトの動作を変更したい場合は、GitHubにある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) をチェックアウトします。
+これを設定してデフォルトの動作を変更したい場合は、GitHub にある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) をチェックアウトします。
 
 ### Manifest
 
-Service Workerに加えて、Vue PWAプラグインはアプリケーションのmanifestファイルも作成します。デフォルトでは、CLIは次のエントリーを含むmanifestを生成します。
+Service Worker に加えて、Vue PWA プラグインはアプリケーションの manifest ファイルも作成します。デフォルトでは、CLI は次のエントリーを含む manifest を生成します。
 
 ```json
 {
@@ -146,19 +146,19 @@ Service Workerに加えて、Vue PWAプラグインはアプリケーション
 }
 ```
 
-`public/img/icons` 内のアイコンは、必ずご使用のブランドに合わせて更新してください。テーマの色や名前をカスタマイズしたい場合は、GitHubにある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) のドキュメントを必ず読んでください。
+`public/img/icons` 内のアイコンは、必ずご使用のブランドに合わせて更新してください。テーマの色や名前をカスタマイズしたい場合は、GitHub にある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) のドキュメントを必ず読んでください。
 
 ### Deploying
 
-Firebase, Vercel, Netlify,さらにはAzure Static Web Appsなど、さまざまなホストを使用することができる。いずれの場合も、同様のセットアッププロセスを完了する必要があります。このガイドでは、ホストの例としてFirebaseを使用します。このガイドに加えて、 [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) のドキュメントには、さまざまなプロバイダーにデプロイするためのガイドも含まれています。
+Firebase, Vercel, Netlify,さらには Azure Static Web Apps など、さまざまなホストを使用することができる。いずれの場合も、同様のセットアッププロセスを完了する必要があります。このガイドでは、ホストの例として Firebase を使用します。このガイドに加えて、 [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) のドキュメントには、さまざまなプロバイダーにデプロイするためのガイドも含まれています。
 
 #### Firebase
 
-FirebaseホスティングはProgressive Web Appsに多くの利点を提供しており、CDNによる高速応答、デフォルトで有効になっているHTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
+Firebase ホスティングは Progressive Web Apps に多くの利点を提供しており、CDN による高速応答、デフォルトで有効になっている HTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
 
-まず、まだ使用していない場合は、Firebaseで [プロジェクトを作成](https://console.firebase.google.com) します。
+まず、まだ使用していない場合は、Firebase で [プロジェクトを作成](https://console.firebase.google.com) します。
 
-次にターミナルでFirebase CLIをインストールします:
+次にターミナルで Firebase CLI をインストールします:
 
 ```shell
 npm install -g firebase-tools
@@ -174,7 +174,7 @@ With the Firebase CLI installed, run `firebase init` within your Ionic project.
 
 Create a new Firebase project or select an existing one.
 
-**"Select a default Firebase project for this directory:"** FirebaseのWebサイト上で作成したプロジェクトを選択します。
+**"Select a default Firebase project for this directory:"** Firebase の Web サイト上で作成したプロジェクトを選択します。
 
 **"What do you want to use as your public directory?"** "dist" を選択ください。
 
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index cca38cdb87d..f94b38d743d 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -11,23 +11,23 @@ sidebar_label: クイックスタート
   />
 </head>
 
-## Ionic Frameworkとは
+## Ionic Framework とは
 
-まず、ここに来たばかりの人を歓迎します！Ionic Frameworkは、 iOS, Android, Electron, Web上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
+まず、ここに来たばかりの人を歓迎します！Ionic Framework は、 iOS, Android, Electron, Web 上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
 
-UIコンポーネントに加えて、Ionic Frameworkは新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
+UI コンポーネントに加えて、Ionic Framework は新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
 
-このガイドでは、Ionic Framework特有の機能を含め、VueとIonic Frameworkの基本について説明します。Vueに精通している方は、ガイドを楽しみ、Ionic Frameworkについて新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
+このガイドでは、Ionic Framework 特有の機能を含め、Vue と Ionic Framework の基本について説明します。Vue に精通している方は、ガイドを楽しみ、Ionic Framework について新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
 
-## Ionic CLIを使ったプロジェクト新規作成
+## Ionic CLI を使ったプロジェクト新規作成
 
-はじめに、Ionic CLIの最新版をインストールしましょう。
+はじめに、Ionic CLI の最新版をインストールしましょう。
 
 ```shell
 npm install -g @ionic/cli@latest
 ```
 
-これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Frameworkと他の依存関係を持つVueプロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
+これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Framework と他の依存関係を持つ Vue プロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
 
 ```shell
 ionic start myApp blank --type vue
@@ -38,11 +38,11 @@ cd myApp
 
 ## TypeScript と JavaScript のどちらで構築するかを選べます
 
-私たちはTypeScriptが大好きで、スケールさせるアプリを構築するための素晴らしいツールだと確信しています。とはいえ、Vueコミュニティがいかにシンプルさを重視しているかは、ツールや言語などでわかっています。実際、そもそもVueに興味を持ったのはそのおかげかもしれません。シンプルに開始し、必要に応じてスケールアップします。
+私たちは TypeScript が大好きで、スケールさせるアプリを構築するための素晴らしいツールだと確信しています。とはいえ、Vue コミュニティがいかにシンプルさを重視しているかは、ツールや言語などでわかっています。実際、そもそも Vue に興味を持ったのはそのおかげかもしれません。シンプルに開始し、必要に応じてスケールアップします。
 
-したがって、TypeScriptの代わりにJavaScriptを使うことができます。Ionic Vueアプリケーションを生成したら、次の手順を実行してください。
+したがって、TypeScript の代わりに JavaScript を使うことができます。Ionic Vue アプリケーションを生成したら、次の手順を実行してください。
 
-1. TypeScriptの依存を削除:
+1. TypeScript の依存を削除:
 
 ```shell
 npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
@@ -66,8 +66,7 @@ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @ty
 
 10. Install terser `npm i -D terser`.
 
-
-## Vueコンポーネントの確認
+## Vue コンポーネントの確認
 
 アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `main.ts` になります。エディタでプロジェクトを開き、`main.ts` を確認すると、次のように表示されます:
 
@@ -105,7 +104,7 @@ The fourth import gets our routing configuration. We will look at this more in d
 </script>
 ```
 
-scriptに書かれているimportのグループを分解してみていきましょう。
+script に書かれている import のグループを分解してみていきましょう。
 
 ```html
 <script setup lang="ts">
@@ -127,13 +126,13 @@ You can also register components globally if you find yourself importing the sam
 </template>
 ```
 
-すべてのVueコンポーネントには `<template>` が必要です。その中に `IonApp` と `IonRouterOutlet` のコンポーネントを配置します。
+すべての Vue コンポーネントには `<template>` が必要です。その中に `IonApp` と `IonRouterOutlet` のコンポーネントを配置します。
 
 ## Initializing the router
 
 ## ルーターのインストール
 
-Ionic Vueは内部的に [vue-router](https://router.vuejs.org/) を使用しているため、Vue Routerにすでに慣れている場合は、これまでの知識をIonic Vueのナビゲーションに適用できます。先ほど述べたルータの設定を見てみましょう。`router/index.ts` で次のように表示されます。
+Ionic Vue は内部的に [vue-router](https://router.vuejs.org/) を使用しているため、Vue Router にすでに慣れている場合は、これまでの知識を Ionic Vue のナビゲーションに適用できます。先ほど述べたルータの設定を見てみましょう。`router/index.ts` で次のように表示されます。
 
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
@@ -161,14 +160,14 @@ export default router;
 ```
 
 :::note
-この例では、Ionic VueのBlank starterを使っているので、実際にみるrouteは少し違うかもしれません
+この例では、Ionic Vue の Blank starter を使っているので、実際にみる route は少し違うかもしれません
 :::
 
 ここでの設定は `vue-router` を直接使用する場合と同じですが、代わりに `@ionic/vue-router` パッケージから `createRouter` や `createWebHistory` などの依存関係をインポートする必要があります。
 
-依存関係をインポートした後、 `routes` 配列に route を宣言できます。そこから、 routerインスタンスを作成し、routeと使用するhistoryのタイプを提供できます。
+依存関係をインポートした後、 `routes` 配列に route を宣言できます。そこから、 router インスタンスを作成し、route と使用する history のタイプを提供できます。
 
-Ionic Vueでは、遅延ローディングはすぐに使うことができます。 `Home` コンポーネントをインポートする代わりに、次の操作を実行することもできます:
+Ionic Vue では、遅延ローディングはすぐに使うことができます。 `Home` コンポーネントをインポートする代わりに、次の操作を実行することもできます:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -188,7 +187,7 @@ Now, you might be wondering: Why do we use `@` when describing the path to our c
 
 ## コンポーネントのスタイル
 
-ここでは、 `App` コンポーネントを変更する必要はあまりありません。コンテナコンポーネントの基本的な例です。ルータロジックを設定すると、指定されたURLルートに一致するコンポーネントをレンダリングするだけで済みます。すでに1つのコンポーネント/ルータが設定されているので、 `Home` コンポーネントを変更しましょう。
+ここでは、 `App` コンポーネントを変更する必要はあまりありません。コンテナコンポーネントの基本的な例です。ルータロジックを設定すると、指定された URL ルートに一致するコンポーネントをレンダリングするだけで済みます。すでに 1 つのコンポーネント/ルータが設定されているので、 `Home` コンポーネントを変更しましょう。
 
 現在、 `Home` コンポーネントはこうなっています:
 
@@ -258,14 +257,14 @@ Now, you might be wondering: Why do we use `@` when describing the path to our c
 </style>
 ```
 
-最初に確認した `App` コンポーネントと同様に、特定のIonic Frameworkコンポーネントのインポート、Vueからのインポート、Vueコンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。
+最初に確認した `App` コンポーネントと同様に、特定の Ionic Framework コンポーネントのインポート、Vue からのインポート、Vue コンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。
 
-スタイルに `scoped` を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vueアプリケーションでは、 `scoped` のついたスタイルを使用することを強くお勧めします。
+スタイルに `scoped` を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vue アプリケーションでは、 `scoped` のついたスタイルを使用することを強くお勧めします。
 
-`IonPage` はすべてのページ(route/URLを持つコンポーネント)の基本コンポーネントであり、header, title, contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。
+`IonPage` はすべてのページ(route/URL を持つコンポーネント)の基本コンポーネントであり、header, title, content コンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。
 
 :::note
-独自のページを作成する場合は、 `IonPage` をそのルート・コンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、Ionic Frameworkコンポーネントが依存するベースCSSを提供するだけでなく、トランジションが適切に動作することを保証するために重要です。
+独自のページを作成する場合は、 `IonPage` をそのルート・コンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、Ionic Framework コンポーネントが依存するベース CSS を提供するだけでなく、トランジションが適切に動作することを保証するために重要です。
 :::
 
 `IonHeader` は、ページの先頭に配置されるコンポーネントです。これは、フレックスボックスベースのレイアウトを処理する以外には、単独ではあまり機能しません。これは、`IonToolbar` や `IonSearchbar`などのコンポーネントを保持するためのものです。
@@ -327,9 +326,9 @@ Now, you might be wondering: Why do we use `@` when describing the path to our c
 </ion-item>
 ```
 
-コードを見ると、 `slot` という特殊な属性があります。これは、レンダリング時に `IonCheckbox` を配置する場所を `IonItem` に知らせるためのキーです。これはVue APIではなく、Web標準APIです。また、Vue 2のslot APIとは異なります。
+コードを見ると、 `slot` という特殊な属性があります。これは、レンダリング時に `IonCheckbox` を配置する場所を `IonItem` に知らせるためのキーです。これは Vue API ではなく、Web 標準 API です。また、Vue 2 の slot API とは異なります。
 
-Ionic Frameworkの別のコンポーネントであるFAB（フローティング・アクション・ボタン）を見てみましょう。FABは、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。このFABには、FAB、FABボタンおよびアイコンの3つのコンポーネントが必要です。
+Ionic Framework の別のコンポーネントである FAB（フローティング・アクション・ボタン）を見てみましょう。FAB は、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。この FAB には、FAB、FAB ボタンおよびアイコンの 3 つのコンポーネントが必要です。
 
 ```html
 <template>
@@ -367,9 +366,9 @@ Ionic Frameworkの別のコンポーネントであるFAB（フローティン
 </script>
 ```
 
-メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
+メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot 属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
 
-次に、これにクリックハンドラを設定します。FABボタンをクリックすると、新しいページ(この後、すぐに作成します)に移動します。これを行うには、Vue RouterのナビゲーションAPIにアクセスする必要があります。これは `useRouter` パッケージから `vue-router` をインポートすることで実現できます。
+次に、これにクリックハンドラを設定します。FAB ボタンをクリックすると、新しいページ(この後、すぐに作成します)に移動します。これを行うには、Vue Router のナビゲーション API にアクセスする必要があります。これは `useRouter` パッケージから `vue-router` をインポートすることで実現できます。
 
 ```html
 <template>
@@ -393,15 +392,15 @@ Ionic Frameworkの別のコンポーネントであるFAB（フローティン
 </script>
 ```
 
-このコンポーネントファイルでは、 `useRouter` 関数をインポートしています。この関数を呼び出すと、コンポーネントからルーティングを操作することができます。つまり、Vue Routerから履歴APIにアクセスし、新しいrouteをナビゲーションスタックにプッシュすることができます。利用方法は `IonFabButton` にクリックイベントを追加し、`router.push` を呼び出すだけです。この場合、私たちは `/new` というrouteにナビゲーションします。
+このコンポーネントファイルでは、 `useRouter` 関数をインポートしています。この関数を呼び出すと、コンポーネントからルーティングを操作することができます。つまり、Vue Router から履歴 API にアクセスし、新しい route をナビゲーションスタックにプッシュすることができます。利用方法は `IonFabButton` にクリックイベントを追加し、`router.push` を呼び出すだけです。この場合、私たちは `/new` という route にナビゲーションします。
 
 ```html
 <ion-fab-button @click="() => router.push('/new')"> ... </ion-fab-button>
 ```
 
-## 新しいrouteを作成する
+## 新しい route を作成する
 
-これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しいrouteをルーターの宣言に追加する必要があります。 `router/index.ts` を開いて、 `new` のrouteを追加します。
+これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しい route をルーターの宣言に追加する必要があります。 `router/index.ts` を開いて、 `new` の route を追加します。
 
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
@@ -434,7 +433,7 @@ const router = createRouter({
 export default router;
 ```
 
-routeに `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
+route に `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
 
 新しく `NewItem.vue` ファイルを作成します。
 
@@ -462,15 +461,15 @@ routeに `/new` を追加したので、該当するコンポーネントとな
 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.
 :::
 
-ここでの内容は、 `Home` コンポーネントに似ています。異なるのは、 `IonBackButton` コンポーネントです。これは、前のrouteに戻るために使用されます。簡単でしょ?わかりました、でもページをリロードしたらどうなりますか?
+ここでの内容は、 `Home` コンポーネントに似ています。異なるのは、 `IonBackButton` コンポーネントです。これは、前の route に戻るために使用されます。簡単でしょ?わかりました、でもページをリロードしたらどうなりますか?
 
-この場合、インメモリ内から履歴は失われるため、 戻るボタンは表示されません。この問題を解決するには、 `default-href` 属性値を、履歴がない場合にナビゲートするURLに設定します。
+この場合、インメモリ内から履歴は失われるため、 戻るボタンは表示されません。この問題を解決するには、 `default-href` 属性値を、履歴がない場合にナビゲートする URL に設定します。
 
 ```html
 <ion-back-button default-href="/home"></ion-back-button>
 ```
 
-これで、アプリの履歴がない場合も、home routeに戻るための戻るボタンを表示することができます。
+これで、アプリの履歴がない場合も、home route に戻るための戻るボタンを表示することができます。
 
 ## Calling Methods on Components
 
@@ -500,7 +499,7 @@ In other framework integrations such as Ionic React, this is not needed as any `
 
 ## Adding Icons
 
-Ionic Vueには [Ionicons](https://ionic.io/ionicons/) がプリインストールされています。開発者がアプリケーションで使用できるオプションはいくつかあります。
+Ionic Vue には [Ionicons](https://ionic.io/ionicons/) がプリインストールされています。開発者がアプリケーションで使用できるオプションはいくつかあります。
 
 ### Per-Component Imports
 
@@ -521,7 +520,7 @@ Per-Component Imports is the recommended approach to using Ionicons. This involv
 </script>
 ```
 
-ここでやっていることを詳しく説明しましょう。まず、 `heart` のアイコンを `ionicons/icons` からインポートします。これにより、アイコンの適切なSVGデータがロードされます。
+ここでやっていることを詳しく説明しましょう。まず、 `heart` のアイコンを `ionicons/icons` からインポートします。これにより、アイコンの適切な SVG データがロードされます。
 
 Then we pass the icon data into the `ion-icon` component via the `icon` property.
 
@@ -546,7 +545,7 @@ Then we pass the icon data into the `ion-icon` component via the `icon` property
 
 ### グローバルインポート
 
-もう1つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
+もう 1 つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
 
 とはいえ、特定のアイコンをグローバルにロードすることに意味があるユースケースがあるかもしれません:
 
@@ -581,15 +580,15 @@ addIcons({
 
 ## ビルドの最適化
 
-Vueには、アプリケーションを調整するためのツールがいくつか用意されています。このセクションでは、Ionic Frameworkに最も関連するオプションについて説明します。
+Vue には、アプリケーションを調整するためのツールがいくつか用意されています。このセクションでは、Ionic Framework に最も関連するオプションについて説明します。
 
 ### ローカルコンポーネント登録 (推奨)
 
-デフォルトでは、Ionic Frameworkコンポーネントはローカルに登録されます。ローカルでの登録では、これらのコンポーネントはそれぞれのVueコンポーネントにインポートされ、提供されます。これは、遅延読み込みとツリーの共有がIonic Frameworkコンポーネントで正しく動作するため、推奨される方法です。
+デフォルトでは、Ionic Framework コンポーネントはローカルに登録されます。ローカルでの登録では、これらのコンポーネントはそれぞれの Vue コンポーネントにインポートされ、提供されます。これは、遅延読み込みとツリーの共有が Ionic Framework コンポーネントで正しく動作するため、推奨される方法です。
 
-この方法の1つの欠点は、Ionic Frameworkコンポーネントを何度もインポートし直すのが面倒なことです。しかし、その見返りとして得られるパフォーマンス上のメリットには価値があると考えています。
+この方法の 1 つの欠点は、Ionic Framework コンポーネントを何度もインポートし直すのが面倒なことです。しかし、その見返りとして得られるパフォーマンス上のメリットには価値があると考えています。
 
-また、ローカルに登録されたコンポーネントはサブコンポーネントでは使用できません。サブコンポーネントで使用するためには、Ionic Frameworkコンポーネントを再インポートする必要があります。
+また、ローカルに登録されたコンポーネントはサブコンポーネントでは使用できません。サブコンポーネントで使用するためには、Ionic Framework コンポーネントを再インポートする必要があります。
 
 ローカルコンポーネント登録の仕組みを見てみましょう:
 
@@ -616,9 +615,9 @@ Note that since we are registering these components locally, neither `IonPage` n
 
 ### グローバルコンポーネント登録
 
-コンポーネントを登録するためのもう1つのオプションは、グローバル登録を使用することです。グローバル登録には、 `main.ts` で使用するコンポーネントをインポートし、Vueアプリインスタンスで`component` メソッドを呼び出すことが含まれます。
+コンポーネントを登録するためのもう 1 つのオプションは、グローバル登録を使用することです。グローバル登録には、 `main.ts` で使用するコンポーネントをインポートし、Vue アプリインスタンスで`component` メソッドを呼び出すことが含まれます。
 
-これにより、VueアプリにIonic Frameworkコンポーネントを追加するのは簡単になりますが、グローバル登録は理想的ではありません。Vueのドキュメントを引用すると、「Webpackなどのビルドシステムを使用している場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントの使用を停止しても、最終ビルドに含めることができます。これにより、ユーザーがダウンロードしなければならないJavaScriptの量が不必要に増加します」とあります。
+これにより、Vue アプリに Ionic Framework コンポーネントを追加するのは簡単になりますが、グローバル登録は理想的ではありません。Vue のドキュメントを引用すると、「Webpack などのビルドシステムを使用している場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントの使用を停止しても、最終ビルドに含めることができます。これにより、ユーザーがダウンロードしなければならない JavaScript の量が不必要に増加します」とあります。
 
 グローバルコンポーネント登録の仕組みを見てみましょう:
 
@@ -649,13 +648,13 @@ app.component('ion-page', IonPage);
 </script>
 ```
 
-上の例では、 `IonPage` コンポーネントと `IonPage` コンポーネントを使用しています。これらを使用するには、まず `main.ts` の `@ionic/vue` からインポートします。次に、appインスタンスで `component` メソッドを呼び出し、タグ名とコンポーネント定義を渡します。これを行うと、各Vueコンポーネントにコンポーネントをインポートしなくても、アプリケーションの残りの部分でコンポーネントを使用できます。
+上の例では、 `IonPage` コンポーネントと `IonPage` コンポーネントを使用しています。これらを使用するには、まず `main.ts` の `@ionic/vue` からインポートします。次に、app インスタンスで `component` メソッドを呼び出し、タグ名とコンポーネント定義を渡します。これを行うと、各 Vue コンポーネントにコンポーネントをインポートしなくても、アプリケーションの残りの部分でコンポーネントを使用できます。
 
 詳細については、<a href="https://v3.vuejs.org/guide/component-registration.html#global-registration" target="_blank" rel="noopener noreferrer">Global Registration Vue Documentation</a> のドキュメントを参照してください。
 
-### JavaScriptのプリフェッチ
+### JavaScript のプリフェッチ
 
-デフォルトでは、Vue CLIはアプリケーション内のJavaScriptのプリフェッチ・ヒントを自動的に生成します。プリフェッチでは、ブラウザのアイドル時間を利用して、ユーザーが近い将来にアクセスする可能性のある文書をダウンロードします。ユーザーがプリフェッチされたドキュメントを必要とするページにアクセスすると、ブラウザのキャッシュからすぐに提供できます。
+デフォルトでは、Vue CLI はアプリケーション内の JavaScript のプリフェッチ・ヒントを自動的に生成します。プリフェッチでは、ブラウザのアイドル時間を利用して、ユーザーが近い将来にアクセスする可能性のある文書をダウンロードします。ユーザーがプリフェッチされたドキュメントを必要とするページにアクセスすると、ブラウザのキャッシュからすぐに提供できます。
 
 プリフェッチは帯域幅を消費するため、大規模なアプリケーションを使用している場合は無効にすることをお勧めします。これを行うには、`vue.config.js`ファイルを変更または作成します:
 
@@ -689,7 +688,7 @@ ionic cap add ios
 ionic cap add android
 ```
 
-iOSとAndroidのプロジェクトを開いたり、ビルド、実行するのに、ネイティブのIDE(Xcode と Android Studio)を使います:
+iOS と Android のプロジェクトを開いたり、ビルド、実行するのに、ネイティブの IDE(Xcode と Android Studio)を使います:
 
 ```shell
 ionic cap open ios
@@ -698,7 +697,7 @@ ionic cap open android
 
 詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
 
-次に、 [すべての利用可能なAPIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
+次に、 [すべての利用可能な APIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
 
 ```html
 <template>
@@ -735,8 +734,8 @@ ionic cap open android
 
 ## 次にすること
 
-このガイドでは、Ionic Vueアプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としてのCapacitorの紹介について説明した。VueとCapacitorを使って完全なIonic Frameworkアプリを構築するには、我々の [First App guide](your-first-app.md) をご覧ください。
+このガイドでは、Ionic Vue アプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としての Capacitor の紹介について説明した。Vue と Capacitor を使って完全な Ionic Framework アプリを構築するには、我々の [First App guide](your-first-app.md) をご覧ください。
 
-Ionic Frameworksのコンポーネントの詳細については、 [component API pages](https://ionicframework.com/docs/components) を参照してください。Vueの詳細については、 [Vue Docs](https://v3.vuejs.org/) を参照のこと。ネイティブ機能の構築を続けるには、[Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
+Ionic Frameworks のコンポーネントの詳細については、 [component API pages](https://ionicframework.com/docs/components) を参照してください。Vue の詳細については、 [Vue Docs](https://v3.vuejs.org/) を参照のこと。ネイティブ機能の構築を続けるには、[Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
 
 アプリ構築をお楽しみください! 🎉
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index 5bb22bc4132..c74a3dbe5ec 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -226,33 +226,33 @@ ${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).jo
 
 function translateDocs(comp) {
   const { props, events, methods, parts, styles, slots } = comp;
-    return {
-      ...comp,
-      props: props.map((prop) => ({
-        ...prop,
-        docs: translate(prop.docs),
-      })),
-      events: events.map((event) => ({
-        ...event,
-        docs: translate(event.docs),
-      })),
-      methods: methods.map((method) => ({
-        ...method,
-        docs: translate(method.docs),
-      })),
-      parts: parts.map((part) => ({
-        ...part,
-        docs: translate(part.docs),
-      })),
-      styles: styles.map((styles) => ({
-        ...styles,
-        docs: translate(styles.docs),
-      })),
-      slots: slots.map((slot) => ({
-        ...slot,
-        docs: translate(slot.docs),
-      })),
-    };
+  return {
+    ...comp,
+    props: props.map((prop) => ({
+      ...prop,
+      docs: translate(prop.docs),
+    })),
+    events: events.map((event) => ({
+      ...event,
+      docs: translate(event.docs),
+    })),
+    methods: methods.map((method) => ({
+      ...method,
+      docs: translate(method.docs),
+    })),
+    parts: parts.map((part) => ({
+      ...part,
+      docs: translate(part.docs),
+    })),
+    styles: styles.map((styles) => ({
+      ...styles,
+      docs: translate(styles.docs),
+    })),
+    slots: slots.map((slot) => ({
+      ...slot,
+      docs: translate(slot.docs),
+    })),
+  };
 }
 
 function translate(docs) {
diff --git a/scripts/api.js b/scripts/api.js
index 4296d113ea0..0ecbe59e7e2 100644
--- a/scripts/api.js
+++ b/scripts/api.js
@@ -101,8 +101,8 @@ function renderMethods({ methods }) {
   // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly
   return `
 ${methods
-    .map(
-      (method) => `
+  .map(
+    (method) => `
 ### ${method.name}
 
 | | |
@@ -110,8 +110,8 @@ ${methods
 | **Description** | ${formatMultiline(method.docs)} |
 | **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` |
 `
-    )
-    .join('\n')}
+  )
+  .join('\n')}
 
 `;
 }
diff --git a/scripts/build-translate/index.ts b/scripts/build-translate/index.ts
index 841b854d624..18fb66df86e 100644
--- a/scripts/build-translate/index.ts
+++ b/scripts/build-translate/index.ts
@@ -18,7 +18,7 @@ const apply = async () => {
     let directoryFiles: string[] | any = readdirSync(directory, { encoding: 'utf8' });
     directoryFiles = directoryFiles
       .filter((file: string) => {
-        return (/.*\.json$/.test(file) && !file.match(/readme/));
+        return /.*\.json$/.test(file) && !file.match(/readme/);
       })
       .map((file: string) => {
         return directory + '/' + file;
@@ -31,39 +31,43 @@ const apply = async () => {
       if (existsSync(readmePath)) {
         componentObject[translateType.markdown] = readFileSync(readmePath, { encoding: 'utf8' });
       }
-      await Promise.all(translateType.translateTarget.map(async (target: string) => {
-        if (componentObject[target]) {
-          await Promise.all(componentObject[target].map(async (ob: any) => {
-            if (ob[translateType.translateTargetKey]) {
-              const translateText = ob[translateType.translateTargetKey].replace(/\n/g, ' ');
-
-              // キャッシュデータにあるか確認
-              if (cacheTranslated.hasOwnProperty(translateText)) {
-                ob[translateType.translateTargetKey] = cacheTranslated[translateText];
-                return;
-              }
-
-              // 今回翻訳データにあるか確認
-              // if (translatedNow.hasOwnProperty(ob[translateType.translateTargetKey])) {
-              //   ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translatedNow[translateText]}`;
-              //   return;
-              // }
-
-              const response = await translate({
-                free_api: true,
-                text: translateText,
-                source_lang: DeeplConfig.fromLanguage,
-                target_lang: DeeplConfig.toLanguage,
-                auth_key: process.env.DEEPLAUTHKEY,
-              });
-              const translated = response.data.translations[0].text;
-              translatedNow[translateText] = translated;
-
-              // ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translated}`;
-            }
-          }));
-        }
-      }));
+      await Promise.all(
+        translateType.translateTarget.map(async (target: string) => {
+          if (componentObject[target]) {
+            await Promise.all(
+              componentObject[target].map(async (ob: any) => {
+                if (ob[translateType.translateTargetKey]) {
+                  const translateText = ob[translateType.translateTargetKey].replace(/\n/g, ' ');
+
+                  // キャッシュデータにあるか確認
+                  if (cacheTranslated.hasOwnProperty(translateText)) {
+                    ob[translateType.translateTargetKey] = cacheTranslated[translateText];
+                    return;
+                  }
+
+                  // 今回翻訳データにあるか確認
+                  // if (translatedNow.hasOwnProperty(ob[translateType.translateTargetKey])) {
+                  //   ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translatedNow[translateText]}`;
+                  //   return;
+                  // }
+
+                  const response = await translate({
+                    free_api: true,
+                    text: translateText,
+                    source_lang: DeeplConfig.fromLanguage,
+                    target_lang: DeeplConfig.toLanguage,
+                    auth_key: process.env.DEEPLAUTHKEY,
+                  });
+                  const translated = response.data.translations[0].text;
+                  translatedNow[translateText] = translated;
+
+                  // ob[translateType.translateTargetKey] = ob[translateType.translateTargetKey] + `\n\n自動翻訳: ${translated}`;
+                }
+              })
+            );
+          }
+        })
+      );
       componentsObject.push(componentObject);
     }
     let resource = translateType.resource;
@@ -74,14 +78,20 @@ const apply = async () => {
       resource = componentsObject;
     }
 
-    writeFileSync(process.cwd() + '/scripts/data/translated-' + translateType.type + '.json', JSON.stringify(resource, null, 2), { encoding: 'utf8' });
+    writeFileSync(
+      process.cwd() + '/scripts/data/translated-' + translateType.type + '.json',
+      JSON.stringify(resource, null, 2),
+      { encoding: 'utf8' }
+    );
   }
 
   // 翻訳データの結合
   const writeTranslateCache = {
-    cache: Object.assign(cacheTranslated, translatedNow)
+    cache: Object.assign(cacheTranslated, translatedNow),
   };
-  writeFileSync(process.cwd() + '/scripts/data/translated-cache.json', JSON.stringify(writeTranslateCache, null, 2), { encoding: 'utf8' });
+  writeFileSync(process.cwd() + '/scripts/data/translated-cache.json', JSON.stringify(writeTranslateCache, null, 2), {
+    encoding: 'utf8',
+  });
 };
 
 const create = async () => {
@@ -98,7 +108,7 @@ const create = async () => {
         real: folder.real + key + '.json',
         realReadme: folder.real + key + '.readme.md',
         shadow: folder.shadow + key + '.json',
-        shadowReadme: folder.shadow + key + '.readme.md'
+        shadowReadme: folder.shadow + key + '.readme.md',
       };
 
       if (!existsSync(folder.real)) {
@@ -128,14 +138,16 @@ const diff = async () => {
   const translateTypes = await getTranslateType();
 
   for (const translateType of translateTypes) {
-    execSync('git diff src/translate/.detection/' + translateType.type + '/*  > structure_' + translateType.type + '.patch');
+    execSync(
+      'git diff src/translate/.detection/' + translateType.type + '/*  > structure_' + translateType.type + '.patch'
+    );
 
     const patchPath = process.cwd() + '/structure_' + translateType.type + '.patch';
     const patchTxt = readFileSync(patchPath, { encoding: 'utf8' });
     writeFileSync(patchPath, patchTxt.replace(/\/\.detection/g, ''), { encoding: 'utf8' });
 
     try {
-      execSync('patch -p1 < \'structure_' + translateType.type + '.patch\'');
+      execSync("patch -p1 < 'structure_" + translateType.type + ".patch'");
     } catch (e) {
       console.log('▲ this patch request contains merge conflicts!');
     }
diff --git a/scripts/build-translate/readme.md b/scripts/build-translate/readme.md
index 101f4e718b1..6228a266f3d 100644
--- a/scripts/build-translate/readme.md
+++ b/scripts/build-translate/readme.md
@@ -2,7 +2,7 @@
 
 ## What is?
 
-This script using for translate api, cli, and native document. 
+This script using for translate api, cli, and native document.
 This can do this.
 
 - Create editable file for translate.
@@ -13,27 +13,29 @@ This can do this.
 
 Some Ionic document is created by resource of JSON file.
 
-|  Type  |  Document URL  | Resource |
-| ---- | ---- | ---- |
-|  API  | [Components](https://ionicframework.com/docs/components) | `@ionic/docs/core.json` |
-|  CLI  |  [Command Reference](https://ionicframework.com/docs/cli)  | [cli.json](https://github.com/ionic-team/ionic-docs/blob/master/scripts/data/cli.json) |
-|  Native  | [Ionic Native](https://ionicframework.com/docs/native) | [native.json](https://github.com/ionic-team/ionic-docs/blob/master/scripts/data/native.json) |
+| Type   | Document URL                                             | Resource                                                                                     |
+| ------ | -------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| API    | [Components](https://ionicframework.com/docs/components) | `@ionic/docs/core.json`                                                                      |
+| CLI    | [Command Reference](https://ionicframework.com/docs/cli) | [cli.json](https://github.com/ionic-team/ionic-docs/blob/master/scripts/data/cli.json)       |
+| Native | [Ionic Native](https://ionicframework.com/docs/native)   | [native.json](https://github.com/ionic-team/ionic-docs/blob/master/scripts/data/native.json) |
 
-And these JSON file include Markdown language for document. 
+And these JSON file include Markdown language for document.
 It is very difficult to translate as it is.
 
 ## Installation
+
 1. Move this folder to your project into scripts.
 2. create folder `src/translate` and `src/translate/.detection`;
 
 ## Usage
+
 ### Create editable file
 
 ```shell
 $ ts-node -P scripts/tsconfig.json scripts/build-translate create
 ```
 
-Then generate editable file under `src/translate/*`. 
+Then generate editable file under `src/translate/*`.
 
 And `src/translate/.detection/*` is use for get diff from original. **don't use or add .gitignore**.
 
@@ -49,12 +51,14 @@ This is resource file instead of original file.
 #### require change file
 
 ##### scripts/build-data/api-reference.ts
+
 ```diff
 -import { components } from '@ionic/docs/core.json';
 +import { components } from '../data/translated-api.json';
 ```
 
 ##### scripts/build-menus/index.ts
+
 ```diff
 -import { commands } from '../data/cli.json';
 +import { commands } from '../data/translated-cli.json';
@@ -63,24 +67,28 @@ This is resource file instead of original file.
 ```
 
 ##### scripts/build-pages/page-types/api.ts
+
 ```diff
 -import { components } from '@ionic/docs/core.json';
 +import { components } from '../../data/translated-api.json';
 ```
 
 ##### scripts/build-pages/page-types/cli.ts
+
 ```diff
 -import { commands } from '../../data/cli.json';
 +import { commands } from '../../data/translated-cli.json';
 ```
 
 ##### scripts/build-pages/page-types/native.ts
+
 ```diff
 -import plugins from '../../data/native.json';
 +import plugins from '../../data/translated-native.json';
 ```
 
 ##### .gitignore
+
 ```diff
 +scripts/data/translated-*
 ```
@@ -92,7 +100,9 @@ $ ts-node -P scripts/tsconfig.json scripts/build-translate diff
 ```
 
 ## Sample
+
 ### Japanese Docs
+
 [ionicframework.jp](https://ionicframework.jp)
 
 ### diff package.json
diff --git a/scripts/build-translate/translate-type.ts b/scripts/build-translate/translate-type.ts
index e4a79044778..75622daa098 100644
--- a/scripts/build-translate/translate-type.ts
+++ b/scripts/build-translate/translate-type.ts
@@ -22,7 +22,7 @@ export const getTranslateType = async () => {
       key: 'name',
       contentsKey: 'commands',
       markdown: 'description',
-      translateTarget: ["inputs"],
+      translateTarget: ['inputs'],
       translateTargetKey: 'summary',
       resource: require('../data/cli.json'),
     },
@@ -35,6 +35,6 @@ export const getTranslateType = async () => {
       translateTarget: [],
       translateTargetKey: 'undefined',
       resource: require('../data/native.json'),
-    }
+    },
   ];
-}
+};
diff --git a/src/components/page/intro/AppWizard/index.tsx b/src/components/page/intro/AppWizard/index.tsx
index 9548e85806e..4ecf372ac47 100644
--- a/src/components/page/intro/AppWizard/index.tsx
+++ b/src/components/page/intro/AppWizard/index.tsx
@@ -9,7 +9,8 @@ export default function AppWizard(props) {
       <div className="heading-group">
         <header>ウィザードではじめる</header>
         <p>
-          App Wizard を使用して、Ionic プロジェクトをビジュアルに生成します。テンプレート、カスタムカラー、アプリアイコン、JavaScriptフレームワークを選択し
+          App Wizard を使用して、Ionic
+          プロジェクトをビジュアルに生成します。テンプレート、カスタムカラー、アプリアイコン、JavaScriptフレームワークを選択し
           JavaScript Framework を選択し、ビルドを迅速に開始します。
         </p>
       </div>
diff --git a/src/theme/EventNavbar/index.tsx b/src/theme/EventNavbar/index.tsx
index 9dea274e1dd..12b500c89e7 100644
--- a/src/theme/EventNavbar/index.tsx
+++ b/src/theme/EventNavbar/index.tsx
@@ -12,17 +12,22 @@ const limitDatetime = '2022-07-09 14:00:00';
 
 function EventNavbar(): JSX.Element {
   return (
-    new Date().getTime() < new Date(limitDatetime).getTime() &&
-    (
+    new Date().getTime() < new Date(limitDatetime).getTime() && (
       <section className={styles.eventNavbar}>
         <aside className={styles.eventNavbarContent}>
-          <h1 className={styles.headerTitle}>Ionic Meetup<br />#22 Tokyo</h1>
+          <h1 className={styles.headerTitle}>
+            Ionic Meetup
+            <br />
+            #22 Tokyo
+          </h1>
           <p className={styles.headerCopy}>新宿駅徒歩圏内の好立地での開催。2022/07/09(土)、東京開催。</p>
-          <a className={styles.headerLink} href="https://ionic-jp.connpass.com/event/251256/" target="_blank">参加登録</a>
+          <a className={styles.headerLink} href="https://ionic-jp.connpass.com/event/251256/" target="_blank">
+            参加登録
+          </a>
         </aside>
       </section>
     )
-  )
+  );
 }
 
 export default EventNavbar;
diff --git a/src/translate/.detection/cli/build.readme.md b/src/translate/.detection/cli/build.readme.md
index 7de5f855455..5f6c540c109 100644
--- a/src/translate/.detection/cli/build.readme.md
+++ b/src/translate/.detection/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
diff --git a/src/translate/.detection/cli/capacitor-add.readme.md b/src/translate/.detection/cli/capacitor-add.readme.md
index 6a1ecf8bc10..464a4fb5a49 100644
--- a/src/translate/.detection/cli/capacitor-add.readme.md
+++ b/src/translate/.detection/cli/capacitor-add.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor add` will do the following:
+
 - Install the Capacitor platform package
-- Copy the native platform template into your project
\ No newline at end of file
+- Copy the native platform template into your project
diff --git a/src/translate/.detection/cli/capacitor-build.readme.md b/src/translate/.detection/cli/capacitor-build.readme.md
index 0ccb955a383..ecbb4a9e00a 100644
--- a/src/translate/.detection/cli/capacitor-build.readme.md
+++ b/src/translate/.detection/cli/capacitor-build.readme.md
@@ -1,8 +1,9 @@
 `ionic capacitor build` will do the following:
+
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
diff --git a/src/translate/.detection/cli/capacitor-copy.readme.md b/src/translate/.detection/cli/capacitor-copy.readme.md
index 2e5ddd1f0e7..ad813a2f858 100644
--- a/src/translate/.detection/cli/capacitor-copy.readme.md
+++ b/src/translate/.detection/cli/capacitor-copy.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor copy` will do the following:
+
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
+- Copy web assets to Capacitor native platform(s)
diff --git a/src/translate/.detection/cli/capacitor-open.readme.md b/src/translate/.detection/cli/capacitor-open.readme.md
index 6a4f8a5eeba..c52c1f44711 100644
--- a/src/translate/.detection/cli/capacitor-open.readme.md
+++ b/src/translate/.detection/cli/capacitor-open.readme.md
@@ -1,2 +1,3 @@
 `ionic capacitor open` will do the following:
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
+
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
diff --git a/src/translate/.detection/cli/capacitor-run.readme.md b/src/translate/.detection/cli/capacitor-run.readme.md
index a17e32b9a99..56a76e0d464 100644
--- a/src/translate/.detection/cli/capacitor-run.readme.md
+++ b/src/translate/.detection/cli/capacitor-run.readme.md
@@ -1,4 +1,5 @@
 `ionic capacitor run` will do the following:
+
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -6,4 +7,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
diff --git a/src/translate/.detection/cli/capacitor-sync.readme.md b/src/translate/.detection/cli/capacitor-sync.readme.md
index 4ab54b5269d..403ecdf9af3 100644
--- a/src/translate/.detection/cli/capacitor-sync.readme.md
+++ b/src/translate/.detection/cli/capacitor-sync.readme.md
@@ -1,5 +1,6 @@
 `ionic capacitor sync` will do the following:
+
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/.detection/cli/capacitor-update.readme.md b/src/translate/.detection/cli/capacitor-update.readme.md
index 6941a9bbe77..6691448d373 100644
--- a/src/translate/.detection/cli/capacitor-update.readme.md
+++ b/src/translate/.detection/cli/capacitor-update.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor update` will do the following:
+
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/.detection/cli/completion.readme.md b/src/translate/.detection/cli/completion.readme.md
index c614f27c143..98969ac91c0 100644
--- a/src/translate/.detection/cli/completion.readme.md
+++ b/src/translate/.detection/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
diff --git a/src/translate/.detection/cli/config-get.readme.md b/src/translate/.detection/cli/config-get.readme.md
index ecfdc6708ac..b993225035b 100644
--- a/src/translate/.detection/cli/config-get.readme.md
+++ b/src/translate/.detection/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
diff --git a/src/translate/.detection/cli/config-set.readme.md b/src/translate/.detection/cli/config-set.readme.md
index fd2916c6e27..4cfe7872088 100644
--- a/src/translate/.detection/cli/config-set.readme.md
+++ b/src/translate/.detection/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
diff --git a/src/translate/.detection/cli/config-unset.readme.md b/src/translate/.detection/cli/config-unset.readme.md
index 9b7c09a8699..7dca73c33a4 100644
--- a/src/translate/.detection/cli/config-unset.readme.md
+++ b/src/translate/.detection/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
diff --git a/src/translate/.detection/cli/cordova-build.readme.md b/src/translate/.detection/cli/cordova-build.readme.md
index 774bb3c3bab..5859a7e2658 100644
--- a/src/translate/.detection/cli/cordova-build.readme.md
+++ b/src/translate/.detection/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
diff --git a/src/translate/.detection/cli/cordova-compile.readme.md b/src/translate/.detection/cli/cordova-compile.readme.md
index 947b914334f..f234fefe548 100644
--- a/src/translate/.detection/cli/cordova-compile.readme.md
+++ b/src/translate/.detection/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova compile` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-emulate.readme.md b/src/translate/.detection/cli/cordova-emulate.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/.detection/cli/cordova-emulate.readme.md
+++ b/src/translate/.detection/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/.detection/cli/cordova-platform.readme.md b/src/translate/.detection/cli/cordova-platform.readme.md
index f65aea27395..1b289c0ac8f 100644
--- a/src/translate/.detection/cli/cordova-platform.readme.md
+++ b/src/translate/.detection/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-plugin.readme.md b/src/translate/.detection/cli/cordova-plugin.readme.md
index b3ea63900d4..162ba073340 100644
--- a/src/translate/.detection/cli/cordova-plugin.readme.md
+++ b/src/translate/.detection/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova plugin` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-prepare.readme.md b/src/translate/.detection/cli/cordova-prepare.readme.md
index 90b7d18e711..6ae022dcaa0 100644
--- a/src/translate/.detection/cli/cordova-prepare.readme.md
+++ b/src/translate/.detection/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
diff --git a/src/translate/.detection/cli/cordova-requirements.readme.md b/src/translate/.detection/cli/cordova-requirements.readme.md
index 04bdf9cef01..edf47772b1f 100644
--- a/src/translate/.detection/cli/cordova-requirements.readme.md
+++ b/src/translate/.detection/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova requirements` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-resources.readme.md b/src/translate/.detection/cli/cordova-resources.readme.md
index 730573a47c3..e93fdd8a890 100644
--- a/src/translate/.detection/cli/cordova-resources.readme.md
+++ b/src/translate/.detection/cli/cordova-resources.readme.md
@@ -11,5 +11,6 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
+
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
diff --git a/src/translate/.detection/cli/cordova-run.readme.md b/src/translate/.detection/cli/cordova-run.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/.detection/cli/cordova-run.readme.md
+++ b/src/translate/.detection/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/.detection/cli/deploy-add.readme.md b/src/translate/.detection/cli/deploy-add.readme.md
index bcb0d71e78d..0cd91d4ee17 100644
--- a/src/translate/.detection/cli/deploy-add.readme.md
+++ b/src/translate/.detection/cli/deploy-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Deploy plugin (`cordova-plugin-ionic`) for both Ca
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
diff --git a/src/translate/.detection/cli/deploy-build.readme.md b/src/translate/.detection/cli/deploy-build.readme.md
index e9819c41204..d5fc09a1a73 100644
--- a/src/translate/.detection/cli/deploy-build.readme.md
+++ b/src/translate/.detection/cli/deploy-build.readme.md
@@ -3,4 +3,5 @@ This command creates a deploy build on Appflow. While the build is running, it p
 Apart from `--commit`, every option can be specified using the full name setup within the Appflow [Dashboard](https://dashboard.ionicframework.com).
 
 Customizing the build:
-- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build.
\ No newline at end of file
+
+- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build.
diff --git a/src/translate/.detection/cli/deploy-configure.readme.md b/src/translate/.detection/cli/deploy-configure.readme.md
index 7e2359629eb..bd1edee884e 100644
--- a/src/translate/.detection/cli/deploy-configure.readme.md
+++ b/src/translate/.detection/cli/deploy-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Deploy plugin (`cordova-plu
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
diff --git a/src/translate/.detection/cli/doctor-check.readme.md b/src/translate/.detection/cli/doctor-check.readme.md
index 560f3efe4e2..f7bff101958 100644
--- a/src/translate/.detection/cli/doctor-check.readme.md
+++ b/src/translate/.detection/cli/doctor-check.readme.md
@@ -2,4 +2,4 @@ This command detects and prints common issues and suggested steps to fix them.
 
 Some issues can be fixed automatically. See `ionic doctor treat --help`.
 
-Optionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.
\ No newline at end of file
+Optionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.
diff --git a/src/translate/.detection/cli/doctor-list.readme.md b/src/translate/.detection/cli/doctor-list.readme.md
index 64d7b975b46..6189f7a77a4 100644
--- a/src/translate/.detection/cli/doctor-list.readme.md
+++ b/src/translate/.detection/cli/doctor-list.readme.md
@@ -1,6 +1,7 @@
 Issues can have various tags:
+
 - **treatable**: `ionic doctor treat` can attempt to fix the issue
 - **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`
 - **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`
 
-You can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.
\ No newline at end of file
+You can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.
diff --git a/src/translate/.detection/cli/doctor-treat.readme.md b/src/translate/.detection/cli/doctor-treat.readme.md
index b8f9d02bc86..35e0882b14a 100644
--- a/src/translate/.detection/cli/doctor-treat.readme.md
+++ b/src/translate/.detection/cli/doctor-treat.readme.md
@@ -1,3 +1,3 @@
 This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.
 
-Optionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.
\ No newline at end of file
+Optionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.
diff --git a/src/translate/.detection/cli/generate.readme.md b/src/translate/.detection/cli/generate.readme.md
index 30de99a2484..042f64a7a4c 100644
--- a/src/translate/.detection/cli/generate.readme.md
+++ b/src/translate/.detection/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
- - For a full list of available types, use `npx ng g --help`
- - For a list of options for a types, use `npx ng g <type> --help`
+- For a full list of available types, use `npx ng g --help`
+- For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
+To test a generator before file modifications are made, use the `--dry-run` option.
diff --git a/src/translate/.detection/cli/git-remote.readme.md b/src/translate/.detection/cli/git-remote.readme.md
index b4caf425642..58347c24535 100644
--- a/src/translate/.detection/cli/git-remote.readme.md
+++ b/src/translate/.detection/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/.detection/cli/info.readme.md b/src/translate/.detection/cli/info.readme.md
index 03f86bc2907..d633e373984 100644
--- a/src/translate/.detection/cli/info.readme.md
+++ b/src/translate/.detection/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
diff --git a/src/translate/.detection/cli/init.readme.md b/src/translate/.detection/cli/init.readme.md
index 98b3118bed5..918620be789 100644
--- a/src/translate/.detection/cli/init.readme.md
+++ b/src/translate/.detection/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
diff --git a/src/translate/.detection/cli/integrations-disable.readme.md b/src/translate/.detection/cli/integrations-disable.readme.md
index 5418badf555..b4f4a38bdd0 100644
--- a/src/translate/.detection/cli/integrations-disable.readme.md
+++ b/src/translate/.detection/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
+Integrations, such as Cordova, can be disabled with this command.
diff --git a/src/translate/.detection/cli/integrations-enable.readme.md b/src/translate/.detection/cli/integrations-enable.readme.md
index 945fcbbb226..76526785eaa 100644
--- a/src/translate/.detection/cli/integrations-enable.readme.md
+++ b/src/translate/.detection/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
\ No newline at end of file
+Integrations can be re-added with the `--add` option.
diff --git a/src/translate/.detection/cli/integrations-list.readme.md b/src/translate/.detection/cli/integrations-list.readme.md
index 044dd455e0e..d075d211e95 100644
--- a/src/translate/.detection/cli/integrations-list.readme.md
+++ b/src/translate/.detection/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
+- To disable integrations, see `ionic integrations disable --help`
diff --git a/src/translate/.detection/cli/link.readme.md b/src/translate/.detection/cli/link.readme.md
index e621a2e948a..f5a96a51946 100644
--- a/src/translate/.detection/cli/link.readme.md
+++ b/src/translate/.detection/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/login.readme.md b/src/translate/.detection/cli/login.readme.md
index 0fbe95d2ae8..ce63bb58ac0 100644
--- a/src/translate/.detection/cli/login.readme.md
+++ b/src/translate/.detection/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/logout.readme.md b/src/translate/.detection/cli/logout.readme.md
index 4122a7422e5..540a69a156c 100644
--- a/src/translate/.detection/cli/logout.readme.md
+++ b/src/translate/.detection/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
+If you need to create an Ionic account, use `ionic signup`.
diff --git a/src/translate/.detection/cli/package-build.readme.md b/src/translate/.detection/cli/package-build.readme.md
index 63e316c7955..bc752c5cfd5 100644
--- a/src/translate/.detection/cli/package-build.readme.md
+++ b/src/translate/.detection/cli/package-build.readme.md
@@ -5,12 +5,15 @@ Apart from `--commit`, every option can be specified using the full name setup w
 The `--signing-certificate` option is mandatory for any iOS build but not for Android debug builds.
 
 Customizing the build:
+
 - The `--environment` and `--native-config` options can be used to customize the groups of values exposed to the build.
 - Override the preferred platform with `--build-stack`. This is useful for building older iOS apps.
 
 Deploying the build to an App Store:
+
 - The `--destination` option can be used to deliver the app created by the build to the configured App Store. This can be used only together with build type `release` for Android and build types `app-store` or `enterprise` for iOS.
 
 Downloading build artifacts:
+
 - By default once the build is complete, all artifacts are downloaded for the selected platform. `aab` and `apk` for Android `ipa` and `dsym` for iOS.
-- The `--artifact-type` option can be used to limit artifact downloads to only of that type. For instance, with Android, you can specify `aab` if you do not wish to download `apk`.
\ No newline at end of file
+- The `--artifact-type` option can be used to limit artifact downloads to only of that type. For instance, with Android, you can specify `aab` if you do not wish to download `apk`.
diff --git a/src/translate/.detection/cli/package-deploy.readme.md b/src/translate/.detection/cli/package-deploy.readme.md
index 26b239f4792..4088f9ee6d5 100644
--- a/src/translate/.detection/cli/package-deploy.readme.md
+++ b/src/translate/.detection/cli/package-deploy.readme.md
@@ -1,4 +1,4 @@
 This command deploys a binary to a destination using Appflow. While running, the remote log is printed to the terminal.
 
 The command takes two parameters: the numeric ID of the package build that previously created the binary and the name of the destination where the binary is going to be deployed.
-Both can be retrieved from the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+Both can be retrieved from the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/.detection/cli/repair.readme.md b/src/translate/.detection/cli/repair.readme.md
index dbb18055c3a..9b01e9d40d8 100644
--- a/src/translate/.detection/cli/repair.readme.md
+++ b/src/translate/.detection/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
diff --git a/src/translate/.detection/cli/serve.readme.md b/src/translate/.detection/cli/serve.readme.md
index 6710e65953b..3090717db0b 100644
--- a/src/translate/.detection/cli/serve.readme.md
+++ b/src/translate/.detection/cli/serve.readme.md
@@ -6,4 +6,4 @@ Try the `--lab` option to see multiple platforms at once.
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
diff --git a/src/translate/.detection/cli/signup.readme.md b/src/translate/.detection/cli/signup.readme.md
index 4761dfdf982..82d215181a5 100644
--- a/src/translate/.detection/cli/signup.readme.md
+++ b/src/translate/.detection/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/ssh-setup.readme.md b/src/translate/.detection/cli/ssh-setup.readme.md
index f6ed6f93cb8..b95050beae9 100644
--- a/src/translate/.detection/cli/ssh-setup.readme.md
+++ b/src/translate/.detection/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/ssh-use.readme.md b/src/translate/.detection/cli/ssh-use.readme.md
index b9a78d4db3e..4714fa29928 100644
--- a/src/translate/.detection/cli/ssh-use.readme.md
+++ b/src/translate/.detection/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
diff --git a/src/translate/.detection/cli/ssl-generate.readme.md b/src/translate/.detection/cli/ssl-generate.readme.md
index c49644b96ef..aea3ec98cc5 100644
--- a/src/translate/.detection/cli/ssl-generate.readme.md
+++ b/src/translate/.detection/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
diff --git a/src/translate/.detection/cli/start.readme.md b/src/translate/.detection/cli/start.readme.md
index 45b725f705d..9b3d3b471e4 100644
--- a/src/translate/.detection/cli/start.readme.md
+++ b/src/translate/.detection/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 1fbd6aab841..986eeabbc94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,3 +1,2 @@
-
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
index deb9dde4602..90e1ee9b77e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,4 +1,3 @@
-
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
index 420a0d400d4..11db0748e34 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
index fb2004ca29c..a21a70fb083 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,4 +1,3 @@
-
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
index 56e36fe9053..41472b2e411 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1,2 +1 @@
-
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-pro.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-pro.readme.md
index 9b369ee50e3..5ca2ae8659d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-pro.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-pro.readme.md
@@ -1,4 +1,3 @@
-
 Plugin for Google Ads, including AdMob / DFP (DoubleClick for publisher) and mediations to other Ad networks.
 
-IMPORTANT NOTICE: this plugin takes a percentage out of your earnings if you profit more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see [AdMobPro Free](../admob-free).
\ No newline at end of file
+IMPORTANT NOTICE: this plugin takes a percentage out of your earnings if you profit more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see [AdMobPro Free](../admob-free).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
index b18059b0829..8f50b6279c0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
-
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
+
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
index 8bc209c7e54..e11ad80b4a3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,4 +1,3 @@
-
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
index 18f742e5108..0303990f06b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,4 +1,3 @@
-
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 76387367a61..23e8c973bf2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index 822209a4a72..e27b0ba6540 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1,2 +1 @@
-
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index 93a3f290203..c31c989a3d3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,4 +1,3 @@
-
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 3592aee1757..64f0fad3191 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
index 2eb94af7221..a82b309d78c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
index 0c671a0c2d0..8e414578f93 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
index 48c289cc3fb..5f6722050b0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1,2 +1 @@
-
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
index 5672e0b2213..2813a5d498b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index d7ef092bae5..95a88837497 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index c331a7d05f5..ef9f2968a8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index 6d2e7862965..e84626aea1d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,3 +1,2 @@
-
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
index c1b58f99edf..e89f74940ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1,3 +1 @@
-
-
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
index 0db391fddba..aff2e2cb4d6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1,2 +1 @@
-
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
index 12d31c41dd7..bb919529254 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1,2 +1 @@
-
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
index 87dd87d5765..fbde6778edf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to read and write app preferences
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
index c0210b3f9e5..c2d7f1730a0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,4 +1,3 @@
-
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
index 08cfe48a452..6b4fa2e5c61 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,4 +1,3 @@
-
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
index 1e612327b09..6213470725d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1,2 +1 @@
-
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
index 79bd464667d..b3fd1055a9a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
index af28dc677bd..41c425d19c7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1,2 +1 @@
-
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-approov-advanced-http.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-approov-advanced-http.readme.md
index 5da37b82a9c..b31d6fe439a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-approov-advanced-http.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-approov-advanced-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
index f0017f9025d..4197b26f800 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1,2 +1 @@
-
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
index d1ce36553bc..4c69face47f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,3 +1,2 @@
-
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
index 48d67747675..b066c65401a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,3 +1,2 @@
-
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
index 62278126195..3a4a3e352cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,4 +1,3 @@
-
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
index a43e7c719b2..b1cfb8cd04b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,3 +1,2 @@
-
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
index 90ce8edd2ad..ee73844b3c8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,3 +1,2 @@
-
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
index bc94608b2c6..9ab2fed769b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1,2 +1 @@
-
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
index 11775820229..52465e564f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,4 +1,3 @@
-
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
index ebe978c896a..33af83938f9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1,2 +1 @@
-
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index d40a29ab2a1..747418e7857 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,4 +1,3 @@
-
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index 9f16d6d8f42..b84c09c835f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
+This plugin allows you to save base64 data as a png image into the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
index 06a0311c510..340db120adf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
@@ -1,2 +1 @@
-
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
index da71524f3d1..2c657416aef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
index 0725aba40ce..bd325268e71 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1,2 +1 @@
-
 BioCatch SDK Cordova support
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index 6be6e7318ae..b1b5ec0f81c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,3 +1,2 @@
-
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
index 4818853ac89..8d23815cab0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
index 52d671c0034..f0f05bc6a1f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,3 +1,2 @@
-
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
index b6cae0f21fd..6f149bce706 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1,2 +1 @@
-
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index 639b85fee5c..c0281f22a59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3ae195d12de..3b80e3d0ecd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,4 +1,3 @@
-
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index f3579d8e616..d0939b5fde7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
index 29af8d97385..9921b18062b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,9 +1,8 @@
-
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
- Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
- For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
index b9836ebd4c6..a222a2efbe7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1,2 +1 @@
-
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
index 51b06d0cc15..d97dd2af981 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,4 +1,3 @@
-
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
index 71995e79760..b925da2342c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1,2 +1 @@
-
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
index bf83901883b..f03b8b179a9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1,2 +1 @@
-
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
index 7e5a437d1d3..7b8674b3871 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1,2 +1 @@
-
 This plugin provides build information.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
index 5a83eede868..515f629e662 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,5 +1,3 @@
-
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
index 16d031664c6..b0ecb7bb40b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,3 +1,2 @@
-
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
index a2b5e1bab30..76f6447e69b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1,2 +1 @@
-
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
index d68a0a44b0e..2914b087a64 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,3 +1,2 @@
-
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
index 31cf59dc30b..9b06352e407 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,4 +1,3 @@
-
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
index a354d9c7925..aa5cc82125d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,12 +1,13 @@
-
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
+
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
+
 inside of the <platform name='ios> section
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
index 76c58120b44..752a6da1f4f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
-
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
+
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
index 8518bffadeb..953ca23cf89 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,6 +1,5 @@
 Plugin for using Apple's ClassKit framework.
 
-
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
index f6b4973e48e..5b82513228d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
index 3176d5f4017..603b2b8f6b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1,3 +1 @@
-
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 939c06b2441..7e3928e3cd5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1,2 +1 @@
-
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
index 3688eedbcac..9d0f8be2ea1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1,2 +1 @@
-
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
index 9cf894081e8..b03bd091c4c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,4 +1,3 @@
-
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index 4bb2367cd5c..b32e2c7cacd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1,2 +1 @@
-
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
index 0243a89bfa0..b7061033770 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1,2 +1 @@
-
 Access and manage Contacts on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index 4a13e8229fa..ee32121391a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1,2 +1 @@
-
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
index 6c659180b50..9faa50aaed7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
\ No newline at end of file
+Crops images
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 5c24399bc42..9116ddca6eb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1,2 +1 @@
-
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
index 5eed8b85866..d2632a61abf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1,2 +1 @@
-
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
index 08fbb92c20c..cabc3d4ff44 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
index bffae754b58..8943e5b9ca4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1,2 +1 @@
-
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
index ad508847c3e..f11c48fa910 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1,3 +1 @@
-
-
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
index abe72e3b6c0..4dbbb06d71c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
index 02c713e2138..e96364431a7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
index c6ef6980695..3dbd2dec8e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
@@ -1,2 +1 @@
-
 Access information about the underlying device and platform.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
index 893058bc4eb..ac9d8279b92 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1,2 +1 @@
-
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
index a90f9cfbe85..64c6b6393fe 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1,2 +1 @@
-
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
index 11ac16aafc6..f988d884a0c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
index 7eac80f6cff..3a08f9c811c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,4 +1,2 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
index 29d32018802..03cd028ccfd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1,2 +1 @@
-
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
index 7e39f62d9b0..605e7b14d41 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1,2 +1 @@
-
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
index f15e01b1143..dad89444163 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1,3 +1 @@
-
 This plugin is designed to support downloading files using Android DownloadManager.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
index 4176ac2a7b9..a305d027409 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1,4 +1 @@
-
-
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
index 81259d50cc1..d0554945c4c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,5 +1,3 @@
-
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index 40349a8306b..b76b54f6046 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1,2 +1 @@
-
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 16c3ea63d2a..043375415ac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-
 Retrieves additional device information from the Device Hardware
- - memory
- - cpumhz
- - totalstorage
- - freestorage
+
+- memory
+- cpumhz
+- totalstorage
+- freestorage
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
index 12d214e6d38..b140e97cb32 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,4 +1,3 @@
-
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
index df9af63f74b..93e5e887491 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,11 +1,10 @@
-
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
- To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -30,6 +29,7 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
+
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
+
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-
 #### Android Install
+
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
-
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
index f3790772c17..dbbb3b72132 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1,2 +1 @@
-
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
index b4553ad9baf..4bf1bdf418f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
index 4fdfccbf60d..f1b5408277a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1,2 +1 @@
-
 Simple file encryption for Cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
index ba26e51b8cd..a719c048fe4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1,2 +1 @@
-
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
index c9445ac1ce7..1f3eeb42d5a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1,3 +1 @@
-
-
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
index b33dc3c0f97..3616dbd3573 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
index c8ba532eae9..4770407e60d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to upload and download files.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
index 1e61b343d6b..28bc40d6e90 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
-
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
+
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
- This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
- The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
- Although most of the plugin code was written when an earlier spec was current: http:
-  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
+This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+Although most of the plugin code was written when an earlier spec was current: http:
+//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+//dev.w3.org/2009/dap/file-system/file-writer.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index f87a05030d7..ce125266039 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -6,7 +5,9 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
+
+For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
+
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 4da15cc2ef6..410431f731b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
index 45a214eee3a..38a8b24123d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
index 2d8b3effb06..a1c32524c76 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1,2 +1 @@
-
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index 2ad1e2109bd..b88fed62436 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1,2 +1 @@
-
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 6efc1b8ae10..2cfe3a22194 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -10,6 +9,7 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
+
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 5bdcf74de11..6a18f9fcf39 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
index 433e365a6a5..d1f83c84392 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
index e044eb6dc66..aa17963327a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,3 +1,2 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
index 25001f76e05..6c21f982616 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1,2 +1 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index 80ef2d51635..e57049202bf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1,2 +1 @@
-
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
index 6d68d07b0fe..563b7c87954 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,9 +1,8 @@
-
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into ```config.xml```:
+For android API 28+, the following xml snippet should be inserted into `config.xml`:
 
 ```
 ...
@@ -12,4 +11,4 @@ For android API 28+, the following xml snippet should be inserted into ```config
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
index 0cd5a4278d8..5987065177c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1,2 +1 @@
-
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
index a56ed3a0093..5dda6c71ade 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,3 +1,2 @@
-
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
index 6e993e8f8a8..2f83489f5fb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
index 8d55357a600..0391a010ff3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,12 +1,11 @@
-
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
- This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
+
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
index d1a3161e0b4..840cf8d4fb5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1,2 +1 @@
-
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
index 1c759160579..8ebef774b81 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
-
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
+
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
index 42ea1211a02..0e715c64736 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1,2 +1 @@
-
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index e40dfc4db5e..a10f89326aa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
index fb0392b4d72..676268db9d5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
\ No newline at end of file
+Read Gyroscope sensor data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
index 9cc2bc1f297..6f496fc37ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
@@ -1,2 +1 @@
-
 HCE Cordova Wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
index ad82eb6b43a..271a47a93b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
index dbd72bc8324..466271d3cba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,3 +1,2 @@
-
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
index 349af915eac..f49780a8921 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
@@ -1,2 +1 @@
-
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
index e49b6cbc6ca..2ba246ebaf0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
index 40ad52f5a5d..3fcae7e8052 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
index 4421569a8f0..14a21342440 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1,2 +1 @@
-
-Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
+Embedded httpd for Cordova apps. Light weight HTTP server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index d223513c705..8a8ae830783 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
index ee369f17322..accd867793f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides functions for working with iBeacons.
 
- The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
index 75f3775bff1..8f9c76acd94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,4 +1,3 @@
-
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
index 40b02d55e6b..88fa3c7bf5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin For Image Resize
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
index f699597a628..e6e57be76e7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,4 +1,3 @@
-
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 87d0037b909..0485062862e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
\ No newline at end of file
+Launches in app Browser
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index 5bcd6494c48..b6be39d32c9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,25 +1,24 @@
-
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|  | ios | android | win-8 | win-10/uwp | mac |
-|--|--|--|--|--|--|
-| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
-| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
-| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
-| downloadable content | ✅ |   |   |   | ✅ |
-| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
+|                      | ios | android | win-8 | win-10/uwp | mac |
+| -------------------- | --- | ------- | ----- | ---------- | --- |
+| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
+| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
+| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
+| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
+| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
+| downloadable content | ✅  |         |       |            | ✅  |
+| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
 
 Supports:
 
- - **iOS** version 7.0 or higher.
- - **Android** version 2.2 (API level 8) or higher
-   - with Google Play client version 3.9.16 or higher
- - **Windows** Store/Phone 8.1 or higher
- - **Windows 10 Mobile**
- - **macOS** version 10
- - **Xbox One**
-   - (and any platform supporting Microsoft's UWP)
+- **iOS** version 7.0 or higher.
+- **Android** version 2.2 (API level 8) or higher
+  - with Google Play client version 3.9.16 or higher
+- **Windows** Store/Phone 8.1 or higher
+- **Windows 10 Mobile**
+- **macOS** version 10
+- **Xbox One**
+  - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 5fbffa5c65b..143985e329b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1,2 +1 @@
-
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
index 32b56cbab41..8e174f56973 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,5 +1,3 @@
-
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
index 365932222f7..c28c9dcb463 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
index 77bbacfc378..680fb4b5caa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1,2 +1 @@
-
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
index 93b6eee3eb3..685bec69d99 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
-
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
+
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
index 3cecc84de9e..6526cd4d4ff 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 6fe62b6c53a..1c68245f996 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,4 +1,3 @@
-
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index b8ea2b47c9e..708074a0ab2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1,2 +1 @@
-
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
index 8a75e4fc94f..03fc8b67cb1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,3 +1,2 @@
-
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
index 2895fffa54c..ed15dd96b1c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1,2 +1 @@
-
 Implementation of the JINS MEME SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
index 9fde9b57805..be8555b753a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
index 1ccf061fc98..b86b22652c5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,4 +1,3 @@
-
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index cca62d8b43e..d2e63dd18d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,3 +1,2 @@
-
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
index 7764ef64d16..ae817d52f6d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,4 +1,3 @@
-
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
index c28100fc7ff..013e0cacbed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,4 +1,3 @@
-
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
index 125e1108746..a272d33f4e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,3 +1,2 @@
-
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 0306a39d956..105b197495b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
index 942352f7056..2f3437ec5c2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,5 +1,4 @@
-
-
 Assists in leaving user reviews/ratings in the App Stores.
+
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
index 6cc5413db8f..fc39816081a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1,2 +1 @@
-
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
index 2085ded77a8..f6123e51703 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1,2 +1 @@
-
 This plugin to create local backup
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
index 82c183d6fee..6cfdd379643 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
index 99d60417c8f..ed018edb499 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index 539dbf0c5b4..e67243449ae 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
index 55292ec8b1b..bead6de72c2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1,2 +1 @@
-
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
index 9e5778eab23..ca5ec6a2525 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
index 281c8d456ad..0fa09982e5b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
@@ -1,2 +1 @@
-
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
index 92cacd40a12..69b6b0ebf1b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
index 9d07585f502..f67d2174eea 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
index 13edc56092e..63f05dbf100 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
index 75e25a2c230..f3eb05040cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index b8584c4e0ae..c159f3801cb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1,2 +1 @@
-
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index e9f6b965a20..0d06c413e79 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,3 +1,2 @@
-
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index 30c9e83dc6d..d71ef31d811 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,4 +1,3 @@
-
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
index 72ffec61b13..0390d514207 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,5 +1,4 @@
-
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index ba01c25cf88..1a4f27e7fd5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1,2 +1 @@
-
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
index e5465ae0a91..04fe4a3bf33 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,4 +1,3 @@
-
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
index b37886b1b59..7bbca215ca4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
\ No newline at end of file
+Native Audio Playback
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 3e9b7575290..5468f7f9077 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
index cd2d3dab18a..faea3298df2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1,3 +1 @@
-
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index edd6e9c39ee..266ae69275a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1,2 +1 @@
-
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 7bcffb8dee4..9a2e0d43722 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,3 +1,2 @@
-
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
index ad0db3ff5c9..4e29c4eeb6a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1,2 +1 @@
-
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
index ab6d1bf9d08..837c7e475a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1,2 +1 @@
-
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
index 5ad7357168c..9a5f7a35d4e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
index 92837035391..a81214659db 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
-
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
+
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
index 4e1c4bcb571..9632b1f0155 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,5 +1,4 @@
-
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
index 5ddc2066105..dd7010c8876 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,4 +1,3 @@
-
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -6,11 +5,13 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
+
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
+
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -65,5 +66,4 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-`$ chmod +x hooks/copy_android_notification_icons.js`
-
+   `$ chmod +x hooks/copy_android_notification_icons.js`
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 0be0100f96d..11e9c0ca52c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1,2 +1 @@
-
-Plugin to open native screens of iOS/android settings
\ No newline at end of file
+Plugin to open native screens of iOS/android settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
index 077568f6f76..c59128571c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1,2 +1 @@
-
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
index 97823a256c7..4caf38450f4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1,2 +1 @@
-
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
index e45425cee51..4f099e14ed4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 0b14edafe4a..22692f6e35d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
index c6fcd66be8f..81ece364e1f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,3 +1,2 @@
-
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index dd840c8b485..1510b50b7b6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,3 +1,2 @@
-
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
index 1f20587b9e3..77e517bcbd9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,4 +1,3 @@
-
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
index 642ad87c3ba..c4ca80fa312 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
index 6ea7514c5fa..6596e0e430f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
index 2c12503cd71..d1bb01fec7e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,6 +1,3 @@
-
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
-
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
index fa7a099a33f..9a9cc59bc6c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Pinterest
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
index c42c478d81d..b1cab91f830 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1,2 +1 @@
-
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
index eaca280cad2..4ed7aff21ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,3 +1,2 @@
-
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
index 779cd5d6ec2..1985ca44851 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,3 +1,2 @@
-
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
index 312ac4a9125..5aff311b111 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
\ No newline at end of file
+Prints documents or HTML rendered content
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 51bb27361c9..909c2ef0dbb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1,2 +1 @@
-
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
index 7f42a5bcd96..dc1a4fbbb4b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
-
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
+
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
index 5ae1db23037..a9c3464e985 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
index 464bba08731..e65c6c7edd7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
index fcc40802c3d..d9b32939ab5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,4 +1,3 @@
-
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 3dcb9304702..55b6fc63435 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,4 +1,3 @@
-
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index a90b29a29b0..505b461b09c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1,2 +1 @@
-
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
index 13214fabab4..2d13f688d77 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
@@ -1,2 +1 @@
-
 This plugin to restart android application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
index 1b4e50f1b68..9f1d179bd5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1,2 +1 @@
-
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index c635a5fd046..6153b43d685 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,4 +1,3 @@
-
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
index 416c63df2e9..a83e7487c9e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
index 15c0b85bf5f..e9b365c009a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
\ No newline at end of file
+Captures a screen shot
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
index a4c9c37f0b3..5af0e96163c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1,2 +1 @@
-
 This plugin enables sensors on Android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
index 125a3910c49..a16c1211a8c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
@@ -1,2 +1 @@
-
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
index aca58cc645a..b13d7210b0e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
index 5608715c9fa..917873665cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
\ No newline at end of file
+Handles shake gesture
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 8ab0b4dd94f..630d79ceeb0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index d7fe4d72b94..40b7e9082ef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,4 +1,3 @@
-
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index e8991e9348b..f02092735e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,7 +1,6 @@
-
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-*Source:* https://developer.apple.com/sign-in-with-apple/
+_Source:_ https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
index 52c91993c93..80e74390f46 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,4 +1,3 @@
-
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index e6270053a4a..00c77e7cdfc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,4 +1,3 @@
-
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
index 83f1f737e59..696999e2340 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,3 +1,2 @@
-
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
index eb6aaf6b11c..3af874243f1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1,2 +1 @@
-
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
index b0ba3252b25..d64c2f4cab6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
@@ -1,3 +1 @@
-
-
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
index 760be2d9030..3edd7dba0d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,4 +1,3 @@
-
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
index ccd38016353..efc07916d88 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1,2 +1 @@
-
 This plugin does speech recognition using cloud services
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
index 8623152c556..5521af0b3b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1,2 +1 @@
-
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 66329069921..97f3a5146a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
index 31117f45f87..1a5acf29e82 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
index bce7a50dba7..cbc01dcad68 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-
 Cordova plugin for authenticating with Spotify
+
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 92e4d096de7..1f34ca227ed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
index 0d19359e763..bfb4c960c5d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1,2 +1 @@
-
 Access SQLite databases on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 62c602df45a..4c8d739d81f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
index 8866094f12f..167ed6673b8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1,2 +1 @@
-
-* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
index d2df403f415..0c999e9b7e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,4 +1,3 @@
-
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
index 918f0320b25..b6a57d237ac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
-
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
+
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
index b093d14b4af..5a521be5eb5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
index 32f49f8fb59..2e8f0e8c676 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
index 373fa2e0f42..22c07237113 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1,2 +1 @@
-
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 6a1864ed364..4c4cc795164 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1,2 +1 @@
-
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 577ae87896a..8f1ca44e3ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 80ce9a5af77..2efbb060915 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
index 41e946cfc8e..b53253d0eef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
index 032d6ec13cc..cd2ff3ab709 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 81e3408cc65..40815363667 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1,2 +1 @@
-
 In-app browser that allows styling.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index a78596064d6..aea7b49108e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,4 +1,3 @@
-
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
index c7b5d6c7fba..9034d3ab1f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
index 02615a1ec9f..0bb27885878 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,4 +1,3 @@
-
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 16ead04e0ed..0fd10d23d96 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
-
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
+
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
index 8876a612197..f1dd7f71fd1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
@@ -1,2 +1 @@
-
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 1db59244ff9..032854e3607 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1,2 +1 @@
-
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 0b49755a0de..5ec8996425d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
+## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+
+## iOS Requirements
 
-This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
--
-iOS Requirements
--
 Update your Cocoapods repo before you install the plugin.
+
 ```
 $ pod repo update
 ```
--
-Browser Requirements
--
-After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
+- Browser Requirements
+- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
index 504b3c9eb24..1bf710ddbcc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 5cf251b3c8e..857e2854746 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
index 9c299395cf9..c5e46b65ea3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,4 +1,3 @@
-
-The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
index 416be944a54..f52e258035a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1,2 +1 @@
-
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
index dba5defbdd0..f82e5deb0ab 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
\ No newline at end of file
+Vibrates the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index a22e03f3945..f3e970c9efb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-
 This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
+
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
index 1ee9f14d4a0..e7f3e1b8a0b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
index 62d0e5158b6..e6bce9df776 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1,2 +1 @@
-
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
index 562d250d54f..74a4213c286 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 732d61641b6..74f478b025e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
index a2eb7545759..981c27c1eb3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1,2 +1 @@
-
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
index 639229cba09..b2e43d635c3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1,2 +1 @@
-
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index e519b6b087f..ca5fcb58975 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,4 +1,3 @@
-
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
index c85ed196728..3fef1483ebd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,5 +1,3 @@
-
-
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 65e5f92754a..17fd2049102 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1,2 +1 @@
-
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
index 33a16ff46c6..e0a91fda385 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,4 +1,3 @@
-
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
index 48620c015e9..b6d33465570 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1,2 +1 @@
-
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
index 8550752032e..6433e0021a7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
index e358d13434b..94a52e6dc07 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
diff --git a/src/translate/cli/build.readme.md b/src/translate/cli/build.readme.md
index 7de5f855455..5f6c540c109 100644
--- a/src/translate/cli/build.readme.md
+++ b/src/translate/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
diff --git a/src/translate/cli/capacitor-add.readme.md b/src/translate/cli/capacitor-add.readme.md
index 6a1ecf8bc10..464a4fb5a49 100644
--- a/src/translate/cli/capacitor-add.readme.md
+++ b/src/translate/cli/capacitor-add.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor add` will do the following:
+
 - Install the Capacitor platform package
-- Copy the native platform template into your project
\ No newline at end of file
+- Copy the native platform template into your project
diff --git a/src/translate/cli/capacitor-build.readme.md b/src/translate/cli/capacitor-build.readme.md
index 0ccb955a383..ecbb4a9e00a 100644
--- a/src/translate/cli/capacitor-build.readme.md
+++ b/src/translate/cli/capacitor-build.readme.md
@@ -1,8 +1,9 @@
 `ionic capacitor build` will do the following:
+
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
diff --git a/src/translate/cli/capacitor-copy.readme.md b/src/translate/cli/capacitor-copy.readme.md
index 2e5ddd1f0e7..ad813a2f858 100644
--- a/src/translate/cli/capacitor-copy.readme.md
+++ b/src/translate/cli/capacitor-copy.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor copy` will do the following:
+
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
+- Copy web assets to Capacitor native platform(s)
diff --git a/src/translate/cli/capacitor-open.readme.md b/src/translate/cli/capacitor-open.readme.md
index 6a4f8a5eeba..c52c1f44711 100644
--- a/src/translate/cli/capacitor-open.readme.md
+++ b/src/translate/cli/capacitor-open.readme.md
@@ -1,2 +1,3 @@
 `ionic capacitor open` will do the following:
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
+
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
diff --git a/src/translate/cli/capacitor-run.readme.md b/src/translate/cli/capacitor-run.readme.md
index a17e32b9a99..56a76e0d464 100644
--- a/src/translate/cli/capacitor-run.readme.md
+++ b/src/translate/cli/capacitor-run.readme.md
@@ -1,4 +1,5 @@
 `ionic capacitor run` will do the following:
+
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -6,4 +7,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
diff --git a/src/translate/cli/capacitor-sync.readme.md b/src/translate/cli/capacitor-sync.readme.md
index 4ab54b5269d..403ecdf9af3 100644
--- a/src/translate/cli/capacitor-sync.readme.md
+++ b/src/translate/cli/capacitor-sync.readme.md
@@ -1,5 +1,6 @@
 `ionic capacitor sync` will do the following:
+
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/cli/capacitor-update.readme.md b/src/translate/cli/capacitor-update.readme.md
index 6941a9bbe77..6691448d373 100644
--- a/src/translate/cli/capacitor-update.readme.md
+++ b/src/translate/cli/capacitor-update.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor update` will do the following:
+
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/cli/completion.readme.md b/src/translate/cli/completion.readme.md
index c614f27c143..98969ac91c0 100644
--- a/src/translate/cli/completion.readme.md
+++ b/src/translate/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
diff --git a/src/translate/cli/config-get.readme.md b/src/translate/cli/config-get.readme.md
index ecfdc6708ac..b993225035b 100644
--- a/src/translate/cli/config-get.readme.md
+++ b/src/translate/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
diff --git a/src/translate/cli/config-set.readme.md b/src/translate/cli/config-set.readme.md
index fd2916c6e27..4cfe7872088 100644
--- a/src/translate/cli/config-set.readme.md
+++ b/src/translate/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
diff --git a/src/translate/cli/config-unset.readme.md b/src/translate/cli/config-unset.readme.md
index 9b7c09a8699..7dca73c33a4 100644
--- a/src/translate/cli/config-unset.readme.md
+++ b/src/translate/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
diff --git a/src/translate/cli/cordova-build.readme.md b/src/translate/cli/cordova-build.readme.md
index 774bb3c3bab..5859a7e2658 100644
--- a/src/translate/cli/cordova-build.readme.md
+++ b/src/translate/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
diff --git a/src/translate/cli/cordova-compile.readme.md b/src/translate/cli/cordova-compile.readme.md
index 947b914334f..f234fefe548 100644
--- a/src/translate/cli/cordova-compile.readme.md
+++ b/src/translate/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova compile` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-emulate.readme.md b/src/translate/cli/cordova-emulate.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/cli/cordova-emulate.readme.md
+++ b/src/translate/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/cli/cordova-platform.readme.md b/src/translate/cli/cordova-platform.readme.md
index f65aea27395..1b289c0ac8f 100644
--- a/src/translate/cli/cordova-platform.readme.md
+++ b/src/translate/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
diff --git a/src/translate/cli/cordova-plugin.readme.md b/src/translate/cli/cordova-plugin.readme.md
index b3ea63900d4..162ba073340 100644
--- a/src/translate/cli/cordova-plugin.readme.md
+++ b/src/translate/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova plugin` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-prepare.readme.md b/src/translate/cli/cordova-prepare.readme.md
index 90b7d18e711..6ae022dcaa0 100644
--- a/src/translate/cli/cordova-prepare.readme.md
+++ b/src/translate/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
diff --git a/src/translate/cli/cordova-requirements.readme.md b/src/translate/cli/cordova-requirements.readme.md
index 04bdf9cef01..edf47772b1f 100644
--- a/src/translate/cli/cordova-requirements.readme.md
+++ b/src/translate/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova requirements` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-resources.readme.md b/src/translate/cli/cordova-resources.readme.md
index 730573a47c3..e93fdd8a890 100644
--- a/src/translate/cli/cordova-resources.readme.md
+++ b/src/translate/cli/cordova-resources.readme.md
@@ -11,5 +11,6 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
+
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
diff --git a/src/translate/cli/cordova-run.readme.md b/src/translate/cli/cordova-run.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/cli/cordova-run.readme.md
+++ b/src/translate/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/cli/deploy-add.readme.md b/src/translate/cli/deploy-add.readme.md
index bcb0d71e78d..0cd91d4ee17 100644
--- a/src/translate/cli/deploy-add.readme.md
+++ b/src/translate/cli/deploy-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Deploy plugin (`cordova-plugin-ionic`) for both Ca
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
diff --git a/src/translate/cli/deploy-build.readme.md b/src/translate/cli/deploy-build.readme.md
index e9819c41204..d5fc09a1a73 100644
--- a/src/translate/cli/deploy-build.readme.md
+++ b/src/translate/cli/deploy-build.readme.md
@@ -3,4 +3,5 @@ This command creates a deploy build on Appflow. While the build is running, it p
 Apart from `--commit`, every option can be specified using the full name setup within the Appflow [Dashboard](https://dashboard.ionicframework.com).
 
 Customizing the build:
-- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build.
\ No newline at end of file
+
+- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build.
diff --git a/src/translate/cli/deploy-configure.readme.md b/src/translate/cli/deploy-configure.readme.md
index 7e2359629eb..bd1edee884e 100644
--- a/src/translate/cli/deploy-configure.readme.md
+++ b/src/translate/cli/deploy-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Deploy plugin (`cordova-plu
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
diff --git a/src/translate/cli/doctor-check.readme.md b/src/translate/cli/doctor-check.readme.md
index 560f3efe4e2..f7bff101958 100644
--- a/src/translate/cli/doctor-check.readme.md
+++ b/src/translate/cli/doctor-check.readme.md
@@ -2,4 +2,4 @@ This command detects and prints common issues and suggested steps to fix them.
 
 Some issues can be fixed automatically. See `ionic doctor treat --help`.
 
-Optionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.
\ No newline at end of file
+Optionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.
diff --git a/src/translate/cli/doctor-list.readme.md b/src/translate/cli/doctor-list.readme.md
index 64d7b975b46..6189f7a77a4 100644
--- a/src/translate/cli/doctor-list.readme.md
+++ b/src/translate/cli/doctor-list.readme.md
@@ -1,6 +1,7 @@
 Issues can have various tags:
+
 - **treatable**: `ionic doctor treat` can attempt to fix the issue
 - **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`
 - **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`
 
-You can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.
\ No newline at end of file
+You can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.
diff --git a/src/translate/cli/doctor-treat.readme.md b/src/translate/cli/doctor-treat.readme.md
index b8f9d02bc86..35e0882b14a 100644
--- a/src/translate/cli/doctor-treat.readme.md
+++ b/src/translate/cli/doctor-treat.readme.md
@@ -1,3 +1,3 @@
 This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.
 
-Optionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.
\ No newline at end of file
+Optionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.
diff --git a/src/translate/cli/generate.readme.md b/src/translate/cli/generate.readme.md
index 30de99a2484..042f64a7a4c 100644
--- a/src/translate/cli/generate.readme.md
+++ b/src/translate/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
- - For a full list of available types, use `npx ng g --help`
- - For a list of options for a types, use `npx ng g <type> --help`
+- For a full list of available types, use `npx ng g --help`
+- For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
+To test a generator before file modifications are made, use the `--dry-run` option.
diff --git a/src/translate/cli/git-remote.readme.md b/src/translate/cli/git-remote.readme.md
index b4caf425642..58347c24535 100644
--- a/src/translate/cli/git-remote.readme.md
+++ b/src/translate/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/cli/info.readme.md b/src/translate/cli/info.readme.md
index 03f86bc2907..d633e373984 100644
--- a/src/translate/cli/info.readme.md
+++ b/src/translate/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
diff --git a/src/translate/cli/init.readme.md b/src/translate/cli/init.readme.md
index 98b3118bed5..918620be789 100644
--- a/src/translate/cli/init.readme.md
+++ b/src/translate/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
diff --git a/src/translate/cli/integrations-disable.readme.md b/src/translate/cli/integrations-disable.readme.md
index 5418badf555..b4f4a38bdd0 100644
--- a/src/translate/cli/integrations-disable.readme.md
+++ b/src/translate/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
+Integrations, such as Cordova, can be disabled with this command.
diff --git a/src/translate/cli/integrations-enable.readme.md b/src/translate/cli/integrations-enable.readme.md
index 945fcbbb226..76526785eaa 100644
--- a/src/translate/cli/integrations-enable.readme.md
+++ b/src/translate/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
\ No newline at end of file
+Integrations can be re-added with the `--add` option.
diff --git a/src/translate/cli/integrations-list.readme.md b/src/translate/cli/integrations-list.readme.md
index 044dd455e0e..d075d211e95 100644
--- a/src/translate/cli/integrations-list.readme.md
+++ b/src/translate/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
+- To disable integrations, see `ionic integrations disable --help`
diff --git a/src/translate/cli/link.readme.md b/src/translate/cli/link.readme.md
index e621a2e948a..f5a96a51946 100644
--- a/src/translate/cli/link.readme.md
+++ b/src/translate/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/login.readme.md b/src/translate/cli/login.readme.md
index 0fbe95d2ae8..ce63bb58ac0 100644
--- a/src/translate/cli/login.readme.md
+++ b/src/translate/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/logout.readme.md b/src/translate/cli/logout.readme.md
index 4122a7422e5..540a69a156c 100644
--- a/src/translate/cli/logout.readme.md
+++ b/src/translate/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
+If you need to create an Ionic account, use `ionic signup`.
diff --git a/src/translate/cli/package-build.readme.md b/src/translate/cli/package-build.readme.md
index 63e316c7955..bc752c5cfd5 100644
--- a/src/translate/cli/package-build.readme.md
+++ b/src/translate/cli/package-build.readme.md
@@ -5,12 +5,15 @@ Apart from `--commit`, every option can be specified using the full name setup w
 The `--signing-certificate` option is mandatory for any iOS build but not for Android debug builds.
 
 Customizing the build:
+
 - The `--environment` and `--native-config` options can be used to customize the groups of values exposed to the build.
 - Override the preferred platform with `--build-stack`. This is useful for building older iOS apps.
 
 Deploying the build to an App Store:
+
 - The `--destination` option can be used to deliver the app created by the build to the configured App Store. This can be used only together with build type `release` for Android and build types `app-store` or `enterprise` for iOS.
 
 Downloading build artifacts:
+
 - By default once the build is complete, all artifacts are downloaded for the selected platform. `aab` and `apk` for Android `ipa` and `dsym` for iOS.
-- The `--artifact-type` option can be used to limit artifact downloads to only of that type. For instance, with Android, you can specify `aab` if you do not wish to download `apk`.
\ No newline at end of file
+- The `--artifact-type` option can be used to limit artifact downloads to only of that type. For instance, with Android, you can specify `aab` if you do not wish to download `apk`.
diff --git a/src/translate/cli/package-deploy.readme.md b/src/translate/cli/package-deploy.readme.md
index 26b239f4792..4088f9ee6d5 100644
--- a/src/translate/cli/package-deploy.readme.md
+++ b/src/translate/cli/package-deploy.readme.md
@@ -1,4 +1,4 @@
 This command deploys a binary to a destination using Appflow. While running, the remote log is printed to the terminal.
 
 The command takes two parameters: the numeric ID of the package build that previously created the binary and the name of the destination where the binary is going to be deployed.
-Both can be retrieved from the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+Both can be retrieved from the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/cli/repair.readme.md b/src/translate/cli/repair.readme.md
index dbb18055c3a..9b01e9d40d8 100644
--- a/src/translate/cli/repair.readme.md
+++ b/src/translate/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
diff --git a/src/translate/cli/serve.readme.md b/src/translate/cli/serve.readme.md
index 6710e65953b..3090717db0b 100644
--- a/src/translate/cli/serve.readme.md
+++ b/src/translate/cli/serve.readme.md
@@ -6,4 +6,4 @@ Try the `--lab` option to see multiple platforms at once.
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
diff --git a/src/translate/cli/signup.readme.md b/src/translate/cli/signup.readme.md
index 4761dfdf982..82d215181a5 100644
--- a/src/translate/cli/signup.readme.md
+++ b/src/translate/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/ssh-setup.readme.md b/src/translate/cli/ssh-setup.readme.md
index f6ed6f93cb8..b95050beae9 100644
--- a/src/translate/cli/ssh-setup.readme.md
+++ b/src/translate/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/ssh-use.readme.md b/src/translate/cli/ssh-use.readme.md
index b9a78d4db3e..4714fa29928 100644
--- a/src/translate/cli/ssh-use.readme.md
+++ b/src/translate/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
diff --git a/src/translate/cli/ssl-generate.readme.md b/src/translate/cli/ssl-generate.readme.md
index c49644b96ef..aea3ec98cc5 100644
--- a/src/translate/cli/ssl-generate.readme.md
+++ b/src/translate/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
diff --git a/src/translate/cli/start.readme.md b/src/translate/cli/start.readme.md
index 45b725f705d..9b3d3b471e4 100644
--- a/src/translate/cli/start.readme.md
+++ b/src/translate/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
diff --git a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 1fbd6aab841..986eeabbc94 100644
--- a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,3 +1,2 @@
-
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
index deb9dde4602..90e1ee9b77e 100644
--- a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,4 +1,3 @@
-
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
index 420a0d400d4..11db0748e34 100644
--- a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
index fb2004ca29c..a21a70fb083 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,4 +1,3 @@
-
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
index 56e36fe9053..41472b2e411 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1,2 +1 @@
-
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-pro.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-pro.readme.md
index 9b369ee50e3..5ca2ae8659d 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-pro.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-pro.readme.md
@@ -1,4 +1,3 @@
-
 Plugin for Google Ads, including AdMob / DFP (DoubleClick for publisher) and mediations to other Ad networks.
 
-IMPORTANT NOTICE: this plugin takes a percentage out of your earnings if you profit more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see [AdMobPro Free](../admob-free).
\ No newline at end of file
+IMPORTANT NOTICE: this plugin takes a percentage out of your earnings if you profit more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see [AdMobPro Free](../admob-free).
diff --git a/src/translate/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
index b18059b0829..8f50b6279c0 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
-
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
+
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
index 8bc209c7e54..e11ad80b4a3 100644
--- a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,4 +1,3 @@
-
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
index 18f742e5108..0303990f06b 100644
--- a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,4 +1,3 @@
-
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 76387367a61..23e8c973bf2 100644
--- a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index 822209a4a72..e27b0ba6540 100644
--- a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1,2 +1 @@
-
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index 93a3f290203..c31c989a3d3 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,4 +1,3 @@
-
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 3592aee1757..64f0fad3191 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
index 2eb94af7221..a82b309d78c 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
index 0c671a0c2d0..8e414578f93 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
index 48c289cc3fb..5f6722050b0 100644
--- a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1,2 +1 @@
-
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
index 5672e0b2213..2813a5d498b 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index d7ef092bae5..95a88837497 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index c331a7d05f5..ef9f2968a8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index 6d2e7862965..e84626aea1d 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,3 +1,2 @@
-
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
index c1b58f99edf..e89f74940ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1,3 +1 @@
-
-
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
index 0db391fddba..aff2e2cb4d6 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1,2 +1 @@
-
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
index 12d31c41dd7..bb919529254 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1,2 +1 @@
-
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
index 87dd87d5765..fbde6778edf 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to read and write app preferences
diff --git a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
index c0210b3f9e5..c2d7f1730a0 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,4 +1,3 @@
-
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
index 08cfe48a452..6b4fa2e5c61 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,4 +1,3 @@
-
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
index 1e612327b09..6213470725d 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1,2 +1 @@
-
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
index 79bd464667d..b3fd1055a9a 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
index af28dc677bd..41c425d19c7 100644
--- a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1,2 +1 @@
-
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/native/@awesome-cordova-plugins-approov-advanced-http.readme.md b/src/translate/native/@awesome-cordova-plugins-approov-advanced-http.readme.md
index 5da37b82a9c..b31d6fe439a 100644
--- a/src/translate/native/@awesome-cordova-plugins-approov-advanced-http.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-approov-advanced-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
index f0017f9025d..4197b26f800 100644
--- a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1,2 +1 @@
-
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
index d1ce36553bc..4c69face47f 100644
--- a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,3 +1,2 @@
-
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
index 48d67747675..b066c65401a 100644
--- a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,3 +1,2 @@
-
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
index 62278126195..3a4a3e352cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,4 +1,3 @@
-
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
index a43e7c719b2..b1cfb8cd04b 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,3 +1,2 @@
-
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
index 90ce8edd2ad..ee73844b3c8 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,3 +1,2 @@
-
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
diff --git a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
index bc94608b2c6..9ab2fed769b 100644
--- a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1,2 +1 @@
-
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
index 11775820229..52465e564f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,4 +1,3 @@
-
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
index ebe978c896a..33af83938f9 100644
--- a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1,2 +1 @@
-
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index d40a29ab2a1..747418e7857 100644
--- a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,4 +1,3 @@
-
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index 9f16d6d8f42..b84c09c835f 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
+This plugin allows you to save base64 data as a png image into the device
diff --git a/src/translate/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
index 06a0311c510..340db120adf 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
@@ -1,2 +1 @@
-
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
index da71524f3d1..2c657416aef 100644
--- a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
index 0725aba40ce..bd325268e71 100644
--- a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1,2 +1 @@
-
 BioCatch SDK Cordova support
diff --git a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index 6be6e7318ae..b1b5ec0f81c 100644
--- a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,3 +1,2 @@
-
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
index 4818853ac89..8d23815cab0 100644
--- a/src/translate/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
index 52d671c0034..f0f05bc6a1f 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,3 +1,2 @@
-
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
index b6cae0f21fd..6f149bce706 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1,2 +1 @@
-
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index 639b85fee5c..c0281f22a59 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3ae195d12de..3b80e3d0ecd 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,4 +1,3 @@
-
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index f3579d8e616..d0939b5fde7 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
diff --git a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
index 29af8d97385..9921b18062b 100644
--- a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,9 +1,8 @@
-
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
- Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
- For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
index b9836ebd4c6..a222a2efbe7 100644
--- a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1,2 +1 @@
-
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
index 51b06d0cc15..d97dd2af981 100644
--- a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,4 +1,3 @@
-
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
index 71995e79760..b925da2342c 100644
--- a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1,2 +1 @@
-
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
index bf83901883b..f03b8b179a9 100644
--- a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1,2 +1 @@
-
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
index 7e5a437d1d3..7b8674b3871 100644
--- a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1,2 +1 @@
-
 This plugin provides build information.
diff --git a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
index 5a83eede868..515f629e662 100644
--- a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,5 +1,3 @@
-
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
index 16d031664c6..b0ecb7bb40b 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,3 +1,2 @@
-
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
index a2b5e1bab30..76f6447e69b 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1,2 +1 @@
-
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
index d68a0a44b0e..2914b087a64 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,3 +1,2 @@
-
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
index 31cf59dc30b..9b06352e407 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,4 +1,3 @@
-
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
index a354d9c7925..aa5cc82125d 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,12 +1,13 @@
-
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
+
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
+
 inside of the <platform name='ios> section
diff --git a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
index 76c58120b44..752a6da1f4f 100644
--- a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
-
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
+
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
index 8518bffadeb..953ca23cf89 100644
--- a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,6 +1,5 @@
 Plugin for using Apple's ClassKit framework.
 
-
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
index f6b4973e48e..5b82513228d 100644
--- a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
index 3176d5f4017..603b2b8f6b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1,3 +1 @@
-
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 939c06b2441..7e3928e3cd5 100644
--- a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1,2 +1 @@
-
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
index 3688eedbcac..9d0f8be2ea1 100644
--- a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1,2 +1 @@
-
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
index 9cf894081e8..b03bd091c4c 100644
--- a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,4 +1,3 @@
-
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index 4bb2367cd5c..b32e2c7cacd 100644
--- a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1,2 +1 @@
-
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
index 0243a89bfa0..b7061033770 100644
--- a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1,2 +1 @@
-
 Access and manage Contacts on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index 4a13e8229fa..ee32121391a 100644
--- a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1,2 +1 @@
-
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
index 6c659180b50..9faa50aaed7 100644
--- a/src/translate/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
\ No newline at end of file
+Crops images
diff --git a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 5c24399bc42..9116ddca6eb 100644
--- a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1,2 +1 @@
-
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
index 5eed8b85866..d2632a61abf 100644
--- a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1,2 +1 @@
-
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
index 08fbb92c20c..cabc3d4ff44 100644
--- a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
index bffae754b58..8943e5b9ca4 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1,2 +1 @@
-
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
index ad508847c3e..f11c48fa910 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1,3 +1 @@
-
-
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
index abe72e3b6c0..4dbbb06d71c 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
index 02c713e2138..e96364431a7 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-device.readme.md b/src/translate/native/@awesome-cordova-plugins-device.readme.md
index c6ef6980695..3dbd2dec8e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device.readme.md
@@ -1,2 +1 @@
-
 Access information about the underlying device and platform.
diff --git a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
index 893058bc4eb..ac9d8279b92 100644
--- a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1,2 +1 @@
-
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
index a90f9cfbe85..64c6b6393fe 100644
--- a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1,2 +1 @@
-
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
index 11ac16aafc6..f988d884a0c 100644
--- a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
index 7eac80f6cff..3a08f9c811c 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,4 +1,2 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
index 29d32018802..03cd028ccfd 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1,2 +1 @@
-
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
index 7e39f62d9b0..605e7b14d41 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1,2 +1 @@
-
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
index f15e01b1143..dad89444163 100644
--- a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1,3 +1 @@
-
 This plugin is designed to support downloading files using Android DownloadManager.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
index 4176ac2a7b9..a305d027409 100644
--- a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1,4 +1 @@
-
-
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
index 81259d50cc1..d0554945c4c 100644
--- a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,5 +1,3 @@
-
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index 40349a8306b..b76b54f6046 100644
--- a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1,2 +1 @@
-
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 16c3ea63d2a..043375415ac 100644
--- a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-
 Retrieves additional device information from the Device Hardware
- - memory
- - cpumhz
- - totalstorage
- - freestorage
+
+- memory
+- cpumhz
+- totalstorage
+- freestorage
diff --git a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
index 12d214e6d38..b140e97cb32 100644
--- a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,4 +1,3 @@
-
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
index df9af63f74b..93e5e887491 100644
--- a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,11 +1,10 @@
-
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
- To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -30,6 +29,7 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
+
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
+
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-
 #### Android Install
+
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
-
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
index f3790772c17..dbbb3b72132 100644
--- a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1,2 +1 @@
-
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
index b4553ad9baf..4bf1bdf418f 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
index 4fdfccbf60d..f1b5408277a 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1,2 +1 @@
-
 Simple file encryption for Cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
index ba26e51b8cd..a719c048fe4 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1,2 +1 @@
-
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
index c9445ac1ce7..1f3eeb42d5a 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1,3 +1 @@
-
-
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
index b33dc3c0f97..3616dbd3573 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
index c8ba532eae9..4770407e60d 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to upload and download files.
diff --git a/src/translate/native/@awesome-cordova-plugins-file.readme.md b/src/translate/native/@awesome-cordova-plugins-file.readme.md
index 1e61b343d6b..28bc40d6e90 100644
--- a/src/translate/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
-
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
+
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
- This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
- The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
- Although most of the plugin code was written when an earlier spec was current: http:
-  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
+This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+Although most of the plugin code was written when an earlier spec was current: http:
+//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+//dev.w3.org/2009/dap/file-system/file-writer.html
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index f87a05030d7..ce125266039 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -6,7 +5,9 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
+
+For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
+
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 4da15cc2ef6..410431f731b 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
index 45a214eee3a..38a8b24123d 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Config
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
index 2d8b3effb06..a1c32524c76 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1,2 +1 @@
-
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index 2ad1e2109bd..b88fed62436 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1,2 +1 @@
-
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 6efc1b8ae10..2cfe3a22194 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -10,6 +9,7 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
+
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 5bdcf74de11..6a18f9fcf39 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
index 433e365a6a5..d1f83c84392 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
index e044eb6dc66..aa17963327a 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,3 +1,2 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
index 25001f76e05..6c21f982616 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1,2 +1 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index 80ef2d51635..e57049202bf 100644
--- a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1,2 +1 @@
-
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
index 6d68d07b0fe..563b7c87954 100644
--- a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,9 +1,8 @@
-
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into ```config.xml```:
+For android API 28+, the following xml snippet should be inserted into `config.xml`:
 
 ```
 ...
@@ -12,4 +11,4 @@ For android API 28+, the following xml snippet should be inserted into ```config
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
index 0cd5a4278d8..5987065177c 100644
--- a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1,2 +1 @@
-
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
index a56ed3a0093..5dda6c71ade 100644
--- a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,3 +1,2 @@
-
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
index 6e993e8f8a8..2f83489f5fb 100644
--- a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
diff --git a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
index 8d55357a600..0391a010ff3 100644
--- a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,12 +1,11 @@
-
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
- This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
+
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
-
diff --git a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
index d1a3161e0b4..840cf8d4fb5 100644
--- a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1,2 +1 @@
-
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
index 1c759160579..8ebef774b81 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
-
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
+
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
diff --git a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
index 42ea1211a02..0e715c64736 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1,2 +1 @@
-
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index e40dfc4db5e..a10f89326aa 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
index fb0392b4d72..676268db9d5 100644
--- a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
\ No newline at end of file
+Read Gyroscope sensor data
diff --git a/src/translate/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
index 9cc2bc1f297..6f496fc37ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
@@ -1,2 +1 @@
-
 HCE Cordova Wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
index ad82eb6b43a..271a47a93b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
index dbd72bc8324..466271d3cba 100644
--- a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,3 +1,2 @@
-
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-health.readme.md b/src/translate/native/@awesome-cordova-plugins-health.readme.md
index 349af915eac..f49780a8921 100644
--- a/src/translate/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health.readme.md
@@ -1,2 +1 @@
-
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
index e49b6cbc6ca..2ba246ebaf0 100644
--- a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-http.readme.md b/src/translate/native/@awesome-cordova-plugins-http.readme.md
index 40ad52f5a5d..3fcae7e8052 100644
--- a/src/translate/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
index 4421569a8f0..14a21342440 100644
--- a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1,2 +1 @@
-
-Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
+Embedded httpd for Cordova apps. Light weight HTTP server.
diff --git a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index d223513c705..8a8ae830783 100644
--- a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
index ee369f17322..accd867793f 100644
--- a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides functions for working with iBeacons.
 
- The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
index 75f3775bff1..8f9c76acd94 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,4 +1,3 @@
-
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
index 40b02d55e6b..88fa3c7bf5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin For Image Resize
diff --git a/src/translate/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
index f699597a628..e6e57be76e7 100644
--- a/src/translate/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,4 +1,3 @@
-
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 87d0037b909..0485062862e 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
\ No newline at end of file
+Launches in app Browser
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index 5bcd6494c48..b6be39d32c9 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,25 +1,24 @@
-
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|  | ios | android | win-8 | win-10/uwp | mac |
-|--|--|--|--|--|--|
-| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
-| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
-| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
-| downloadable content | ✅ |   |   |   | ✅ |
-| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
+|                      | ios | android | win-8 | win-10/uwp | mac |
+| -------------------- | --- | ------- | ----- | ---------- | --- |
+| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
+| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
+| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
+| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
+| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
+| downloadable content | ✅  |         |       |            | ✅  |
+| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
 
 Supports:
 
- - **iOS** version 7.0 or higher.
- - **Android** version 2.2 (API level 8) or higher
-   - with Google Play client version 3.9.16 or higher
- - **Windows** Store/Phone 8.1 or higher
- - **Windows 10 Mobile**
- - **macOS** version 10
- - **Xbox One**
-   - (and any platform supporting Microsoft's UWP)
+- **iOS** version 7.0 or higher.
+- **Android** version 2.2 (API level 8) or higher
+  - with Google Play client version 3.9.16 or higher
+- **Windows** Store/Phone 8.1 or higher
+- **Windows 10 Mobile**
+- **macOS** version 10
+- **Xbox One**
+  - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 5fbffa5c65b..143985e329b 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1,2 +1 @@
-
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
index 32b56cbab41..8e174f56973 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,5 +1,3 @@
-
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
-
diff --git a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
index 365932222f7..c28c9dcb463 100644
--- a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
index 77bbacfc378..680fb4b5caa 100644
--- a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1,2 +1 @@
-
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
index 93b6eee3eb3..685bec69d99 100644
--- a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
-
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
+
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
index 3cecc84de9e..6526cd4d4ff 100644
--- a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 6fe62b6c53a..1c68245f996 100644
--- a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,4 +1,3 @@
-
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index b8ea2b47c9e..708074a0ab2 100644
--- a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1,2 +1 @@
-
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
index 8a75e4fc94f..03fc8b67cb1 100644
--- a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,3 +1,2 @@
-
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
index 2895fffa54c..ed15dd96b1c 100644
--- a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1,2 +1 @@
-
 Implementation of the JINS MEME SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
index 9fde9b57805..be8555b753a 100644
--- a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
index 1ccf061fc98..b86b22652c5 100644
--- a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,4 +1,3 @@
-
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index cca62d8b43e..d2e63dd18d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,3 +1,2 @@
-
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
index 7764ef64d16..ae817d52f6d 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,4 +1,3 @@
-
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
index c28100fc7ff..013e0cacbed 100644
--- a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,4 +1,3 @@
-
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
index 125e1108746..a272d33f4e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,3 +1,2 @@
-
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 0306a39d956..105b197495b 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
index 942352f7056..2f3437ec5c2 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,5 +1,4 @@
-
-
 Assists in leaving user reviews/ratings in the App Stores.
+
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
index 6cc5413db8f..fc39816081a 100644
--- a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1,2 +1 @@
-
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
index 2085ded77a8..f6123e51703 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1,2 +1 @@
-
 This plugin to create local backup
diff --git a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
index 82c183d6fee..6cfdd379643 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
index 99d60417c8f..ed018edb499 100644
--- a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index 539dbf0c5b4..e67243449ae 100644
--- a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
index 55292ec8b1b..bead6de72c2 100644
--- a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1,2 +1 @@
-
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
index 9e5778eab23..ca5ec6a2525 100644
--- a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/native/@awesome-cordova-plugins-market.readme.md b/src/translate/native/@awesome-cordova-plugins-market.readme.md
index 281c8d456ad..0fa09982e5b 100644
--- a/src/translate/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-market.readme.md
@@ -1,2 +1 @@
-
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
index 92cacd40a12..69b6b0ebf1b 100644
--- a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/native/@awesome-cordova-plugins-media.readme.md b/src/translate/native/@awesome-cordova-plugins-media.readme.md
index 9d07585f502..f67d2174eea 100644
--- a/src/translate/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
index 13edc56092e..63f05dbf100 100644
--- a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
index 75e25a2c230..f3eb05040cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index b8584c4e0ae..c159f3801cb 100644
--- a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1,2 +1 @@
-
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index e9f6b965a20..0d06c413e79 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,3 +1,2 @@
-
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index 30c9e83dc6d..d71ef31d811 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,4 +1,3 @@
-
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
index 72ffec61b13..0390d514207 100644
--- a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,5 +1,4 @@
-
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
diff --git a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index ba01c25cf88..1a4f27e7fd5 100644
--- a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1,2 +1 @@
-
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
index e5465ae0a91..04fe4a3bf33 100644
--- a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,4 +1,3 @@
-
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
index b37886b1b59..7bbca215ca4 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
\ No newline at end of file
+Native Audio Playback
diff --git a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 3e9b7575290..5468f7f9077 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
index cd2d3dab18a..faea3298df2 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1,3 +1 @@
-
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index edd6e9c39ee..266ae69275a 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1,2 +1 @@
-
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 7bcffb8dee4..9a2e0d43722 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,3 +1,2 @@
-
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
index ad0db3ff5c9..4e29c4eeb6a 100644
--- a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1,2 +1 @@
-
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
index ab6d1bf9d08..837c7e475a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1,2 +1 @@
-
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/native/@awesome-cordova-plugins-network.readme.md b/src/translate/native/@awesome-cordova-plugins-network.readme.md
index 5ad7357168c..9a5f7a35d4e 100644
--- a/src/translate/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
index 92837035391..a81214659db 100644
--- a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
-
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
+
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
index 4e1c4bcb571..9632b1f0155 100644
--- a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,5 +1,4 @@
-
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
diff --git a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
index 5ddc2066105..dd7010c8876 100644
--- a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,4 +1,3 @@
-
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -6,11 +5,13 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
+
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
+
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -65,5 +66,4 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-`$ chmod +x hooks/copy_android_notification_icons.js`
-
+   `$ chmod +x hooks/copy_android_notification_icons.js`
diff --git a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 0be0100f96d..11e9c0ca52c 100644
--- a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1,2 +1 @@
-
-Plugin to open native screens of iOS/android settings
\ No newline at end of file
+Plugin to open native screens of iOS/android settings
diff --git a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
index 077568f6f76..c59128571c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1,2 +1 @@
-
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
index 97823a256c7..4caf38450f4 100644
--- a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1,2 +1 @@
-
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
index e45425cee51..4f099e14ed4 100644
--- a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 0b14edafe4a..22692f6e35d 100644
--- a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
index c6fcd66be8f..81ece364e1f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,3 +1,2 @@
-
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index dd840c8b485..1510b50b7b6 100644
--- a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,3 +1,2 @@
-
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
index 1f20587b9e3..77e517bcbd9 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,4 +1,3 @@
-
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
index 642ad87c3ba..c4ca80fa312 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
index 6ea7514c5fa..6596e0e430f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
index 2c12503cd71..d1bb01fec7e 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,6 +1,3 @@
-
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
-
-
diff --git a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
index fa7a099a33f..9a9cc59bc6c 100644
--- a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Pinterest
diff --git a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
index c42c478d81d..b1cab91f830 100644
--- a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1,2 +1 @@
-
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
index eaca280cad2..4ed7aff21ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,3 +1,2 @@
-
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
index 779cd5d6ec2..1985ca44851 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,3 +1,2 @@
-
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
index 312ac4a9125..5aff311b111 100644
--- a/src/translate/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
\ No newline at end of file
+Prints documents or HTML rendered content
diff --git a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 51bb27361c9..909c2ef0dbb 100644
--- a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1,2 +1 @@
-
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
index 7f42a5bcd96..dc1a4fbbb4b 100644
--- a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
-
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
+
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/native/@awesome-cordova-plugins-push.readme.md b/src/translate/native/@awesome-cordova-plugins-push.readme.md
index 5ae1db23037..a9c3464e985 100644
--- a/src/translate/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
index 464bba08731..e65c6c7edd7 100644
--- a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
index fcc40802c3d..d9b32939ab5 100644
--- a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,4 +1,3 @@
-
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 3dcb9304702..55b6fc63435 100644
--- a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,4 +1,3 @@
-
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index a90b29a29b0..505b461b09c 100644
--- a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1,2 +1 @@
-
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
index 13214fabab4..2d13f688d77 100644
--- a/src/translate/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
@@ -1,2 +1 @@
-
 This plugin to restart android application
diff --git a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
index 1b4e50f1b68..9f1d179bd5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1,2 +1 @@
-
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index c635a5fd046..6153b43d685 100644
--- a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,4 +1,3 @@
-
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
index 416c63df2e9..a83e7487c9e 100644
--- a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
index 15c0b85bf5f..e9b365c009a 100644
--- a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
\ No newline at end of file
+Captures a screen shot
diff --git a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
index a4c9c37f0b3..5af0e96163c 100644
--- a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1,2 +1 @@
-
 This plugin enables sensors on Android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
index 125a3910c49..a16c1211a8c 100644
--- a/src/translate/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
@@ -1,2 +1 @@
-
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
index aca58cc645a..b13d7210b0e 100644
--- a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
index 5608715c9fa..917873665cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
\ No newline at end of file
+Handles shake gesture
diff --git a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 8ab0b4dd94f..630d79ceeb0 100644
--- a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index d7fe4d72b94..40b7e9082ef 100644
--- a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,4 +1,3 @@
-
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index e8991e9348b..f02092735e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,7 +1,6 @@
-
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-*Source:* https://developer.apple.com/sign-in-with-apple/
+_Source:_ https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
index 52c91993c93..80e74390f46 100644
--- a/src/translate/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,4 +1,3 @@
-
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index e6270053a4a..00c77e7cdfc 100644
--- a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,4 +1,3 @@
-
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
index 83f1f737e59..696999e2340 100644
--- a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,3 +1,2 @@
-
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
index eb6aaf6b11c..3af874243f1 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1,2 +1 @@
-
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
index b0ba3252b25..d64c2f4cab6 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
@@ -1,3 +1 @@
-
-
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
index 760be2d9030..3edd7dba0d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,4 +1,3 @@
-
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
index ccd38016353..efc07916d88 100644
--- a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1,2 +1 @@
-
 This plugin does speech recognition using cloud services
diff --git a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
index 8623152c556..5521af0b3b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1,2 +1 @@
-
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 66329069921..97f3a5146a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
index 31117f45f87..1a5acf29e82 100644
--- a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
diff --git a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
index bce7a50dba7..cbc01dcad68 100644
--- a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-
 Cordova plugin for authenticating with Spotify
+
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 92e4d096de7..1f34ca227ed 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
index 0d19359e763..bfb4c960c5d 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1,2 +1 @@
-
 Access SQLite databases on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 62c602df45a..4c8d739d81f 100644
--- a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
index 8866094f12f..167ed6673b8 100644
--- a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1,2 +1 @@
-
-* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
index d2df403f415..0c999e9b7e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,4 +1,3 @@
-
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
index 918f0320b25..b6a57d237ac 100644
--- a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
-
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
+
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
index b093d14b4af..5a521be5eb5 100644
--- a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
index 32f49f8fb59..2e8f0e8c676 100644
--- a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
index 373fa2e0f42..22c07237113 100644
--- a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1,2 +1 @@
-
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 6a1864ed364..4c4cc795164 100644
--- a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1,2 +1 @@
-
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 577ae87896a..8f1ca44e3ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 80ce9a5af77..2efbb060915 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
index 41e946cfc8e..b53253d0eef 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
index 032d6ec13cc..cd2ff3ab709 100644
--- a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 81e3408cc65..40815363667 100644
--- a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1,2 +1 @@
-
 In-app browser that allows styling.
diff --git a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index a78596064d6..aea7b49108e 100644
--- a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,4 +1,3 @@
-
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
index c7b5d6c7fba..9034d3ab1f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
index 02615a1ec9f..0bb27885878 100644
--- a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,4 +1,3 @@
-
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 16ead04e0ed..0fd10d23d96 100644
--- a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
-
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
+
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
index 8876a612197..f1dd7f71fd1 100644
--- a/src/translate/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
@@ -1,2 +1 @@
-
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 1db59244ff9..032854e3607 100644
--- a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1,2 +1 @@
-
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 0b49755a0de..5ec8996425d 100644
--- a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
+## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+
+## iOS Requirements
 
-This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
--
-iOS Requirements
--
 Update your Cocoapods repo before you install the plugin.
+
 ```
 $ pod repo update
 ```
--
-Browser Requirements
--
-After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
+- Browser Requirements
+- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
index 504b3c9eb24..1bf710ddbcc 100644
--- a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 5cf251b3c8e..857e2854746 100644
--- a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
index 9c299395cf9..c5e46b65ea3 100644
--- a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,4 +1,3 @@
-
-The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
index 416be944a54..f52e258035a 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1,2 +1 @@
-
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
index dba5defbdd0..f82e5deb0ab 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
\ No newline at end of file
+Vibrates the device
diff --git a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index a22e03f3945..f3e970c9efb 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-
 This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
+
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
index 1ee9f14d4a0..e7f3e1b8a0b 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
index 62d0e5158b6..e6bce9df776 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1,2 +1 @@
-
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
index 562d250d54f..74a4213c286 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 732d61641b6..74f478b025e 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
index a2eb7545759..981c27c1eb3 100644
--- a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1,2 +1 @@
-
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
index 639229cba09..b2e43d635c3 100644
--- a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1,2 +1 @@
-
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index e519b6b087f..ca5fcb58975 100644
--- a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,4 +1,3 @@
-
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
index c85ed196728..3fef1483ebd 100644
--- a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,5 +1,3 @@
-
-
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 65e5f92754a..17fd2049102 100644
--- a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1,2 +1 @@
-
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
index 33a16ff46c6..e0a91fda385 100644
--- a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,4 +1,3 @@
-
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
index 48620c015e9..b6d33465570 100644
--- a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1,2 +1 @@
-
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
diff --git a/src/translate/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
index 8550752032e..6433e0021a7 100644
--- a/src/translate/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
index e358d13434b..94a52e6dc07 100644
--- a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
diff --git a/static/auto-generated/accordion-group/custom-props.md b/static/auto-generated/accordion-group/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/accordion-group/custom-props.md
+++ b/static/auto-generated/accordion-group/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/accordion-group/events.md b/static/auto-generated/accordion-group/events.md
index bf6cbdc2429..f09ddb8fe7e 100644
--- a/static/auto-generated/accordion-group/events.md
+++ b/static/auto-generated/accordion-group/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `ionChange` | Emitted when the value property has changed.<br /><br />自動翻訳: valueプロパティが変更されたときに発行される。 |
-
+| Name        | Description                                                                                                      |
+| ----------- | ---------------------------------------------------------------------------------------------------------------- |
+| `ionChange` | Emitted when the value property has changed.<br /><br />自動翻訳: value プロパティが変更されたときに発行される。 |
diff --git a/static/auto-generated/accordion-group/methods.md b/static/auto-generated/accordion-group/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/accordion-group/methods.md
+++ b/static/auto-generated/accordion-group/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/accordion-group/parts.md b/static/auto-generated/accordion-group/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/accordion-group/parts.md
+++ b/static/auto-generated/accordion-group/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/accordion-group/props.md b/static/auto-generated/accordion-group/props.md
index 3ec6a38c1a1..6847b67fc25 100644
--- a/static/auto-generated/accordion-group/props.md
+++ b/static/auto-generated/accordion-group/props.md
@@ -1,77 +1,62 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.<br /><br />自動翻訳: `true`の場合、アコーディオングループ内のすべてのアコーディオンが拡大・縮小時にアニメーションを行います。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `animated`                                                                                                                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                                                                                                                        |
+| **Default**     | `true`                                                                                                                                                                                                                           |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the accordion group cannot be interacted with.<br /><br />自動翻訳: `true`の場合、アコーディオングループと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `disabled`                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                     |
+| **Default**     | `false`                                                                                                                                       |
 
+### expand
 
-
-### expand 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.<br /><br />自動翻訳: 各アコーディオンの拡張動作を記述する。指定可能な値は `"compact"` と `"inset"` です。デフォルトは `"compact"` です。 |
-| **Attribute** | `expand` |
-| **Type** | `"compact" ｜ "inset"` |
-| **Default** | `'compact'` |
-
-
+| **Attribute**   | `expand`                                                                                                                                                                                                                                                              |
+| **Type**        | `"compact" ｜ "inset"`                                                                                                                                                                                                                                                |
+| **Default**     | `'compact'`                                                                                                                                                                                                                                                           |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### multiple
 
-
-### multiple 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the accordion group can have multiple accordion components expanded at the same time.<br /><br />自動翻訳: `true`の場合、アコーディオングループは複数のアコーディオンコンポーネントを同時に展開することができます。 |
-| **Attribute** | `multiple` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `multiple`                                                                                                                                                                                                                     |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                    |
 
-### readonly 
+### readonly
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the accordion group cannot be interacted with, but does not alter the opacity.<br /><br />自動翻訳: `true`の場合、アコーディオングループはインタラクティブに操作できないが、不透明度は変更されない。 |
-| **Attribute** | `readonly` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `readonly`                                                                                                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                                                                                                       |
+| **Default**     | `false`                                                                                                                                                                                                         |
 
+### value
 
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------- |
 | **Description** | The value of the accordion group.<br /><br />自動翻訳: アコーディオングループの値です。 |
-| **Attribute** | `value` |
-| **Type** | `null ｜ string ｜ string[] ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `value`                                                                                 |
+| **Type**        | `null ｜ string ｜ string[] ｜ undefined`                                               |
+| **Default**     | `undefined`                                                                             |
diff --git a/static/auto-generated/accordion-group/slots.md b/static/auto-generated/accordion-group/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/accordion-group/slots.md
+++ b/static/auto-generated/accordion-group/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/accordion/custom-props.md b/static/auto-generated/accordion/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/accordion/custom-props.md
+++ b/static/auto-generated/accordion/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/accordion/events.md b/static/auto-generated/accordion/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/accordion/events.md
+++ b/static/auto-generated/accordion/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/accordion/methods.md b/static/auto-generated/accordion/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/accordion/methods.md
+++ b/static/auto-generated/accordion/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/accordion/parts.md b/static/auto-generated/accordion/parts.md
index 55920f5d66e..0c842fefb41 100644
--- a/static/auto-generated/accordion/parts.md
+++ b/static/auto-generated/accordion/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `content` | The wrapper element for the content slot.<br /><br />自動翻訳: コンテンツスロットのラッパー要素。 |
+| Name       | Description                                                                                                                                                                                                                                                         |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `content`  | The wrapper element for the content slot.<br /><br />自動翻訳: コンテンツスロットのラッパー要素。                                                                                                                                                                   |
 | `expanded` | The expanded element. Can be used in combination with the `header` and `content` parts (i.e. `::part(header expanded)`).<br /><br />自動翻訳: 拡張された要素です。ヘッダ`とコンテンツ`の部分と組み合わせて使用することができます（例：`::part(header expanded)`）。 |
-| `header` | The wrapper element for the header slot.<br /><br />自動翻訳: ヘッダースロットのラッパーの要素です。 |
-
+| `header`   | The wrapper element for the header slot.<br /><br />自動翻訳: ヘッダースロットのラッパーの要素です。                                                                                                                                                                |
diff --git a/static/auto-generated/accordion/props.md b/static/auto-generated/accordion/props.md
index e475cdaf98c..df5d1017e0a 100644
--- a/static/auto-generated/accordion/props.md
+++ b/static/auto-generated/accordion/props.md
@@ -1,66 +1,53 @@
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                 |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the accordion cannot be interacted with.<br /><br />自動翻訳: `true`の場合、アコーディオンは対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `disabled`                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                       |
+| **Default**     | `false`                                                                                                                         |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### readonly
 
-
-### readonly 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the accordion cannot be interacted with, but does not alter the opacity.<br /><br />自動翻訳: `true`の場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。 |
-| **Attribute** | `readonly` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `readonly`                                                                                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                                                                                     |
+| **Default**     | `false`                                                                                                                                                                                                       |
 
+### toggleIcon
 
-### toggleIcon 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.<br /><br />自動翻訳: 使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。 |
-| **Attribute** | `toggle-icon` |
-| **Type** | `string` |
-| **Default** | `chevronDown` |
-
-
+| **Attribute**   | `toggle-icon`                                                                                                                                                                                                      |
+| **Type**        | `string`                                                                                                                                                                                                           |
+| **Default**     | `chevronDown`                                                                                                                                                                                                      |
 
-### toggleIconSlot 
+### toggleIconSlot
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.<br /><br />自動翻訳: トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `'end'` です。 |
-| **Attribute** | `toggle-icon-slot` |
-| **Type** | `"end" ｜ "start"` |
-| **Default** | `'end'` |
+| **Attribute**   | `toggle-icon-slot`                                                                                                                                                                  |
+| **Type**        | `"end" ｜ "start"`                                                                                                                                                                  |
+| **Default**     | `'end'`                                                                                                                                                                             |
 
+### value
 
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The value of the accordion. Defaults to an autogenerated value.<br /><br />自動翻訳: アコーディオンの値です。デフォルトは自動生成された値です。 |
-| **Attribute** | `value` |
-| **Type** | `string` |
-| **Default** | ``ion-accordion-${accordionIds++}`` |
-
+| **Attribute**   | `value`                                                                                                                                         |
+| **Type**        | `string`                                                                                                                                        |
+| **Default**     | `ion-accordion-${accordionIds++}`                                                                                                               |
diff --git a/static/auto-generated/accordion/slots.md b/static/auto-generated/accordion/slots.md
index 23c42c492d9..fabc3a807c3 100644
--- a/static/auto-generated/accordion/slots.md
+++ b/static/auto-generated/accordion/slots.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                                                                                                                                                              |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `content` | Content is placed below the header and is shown or hidden based on expanded state.<br /><br />自動翻訳: コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。 |
-| `header` | Content is placed at the top and is used to expand or collapse the accordion item.<br /><br />自動翻訳: コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。 |
-
+| `header`  | Content is placed at the top and is used to expand or collapse the accordion item.<br /><br />自動翻訳: コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。   |
diff --git a/static/auto-generated/action-sheet/custom-props.md b/static/auto-generated/action-sheet/custom-props.md
index 8ecc38c5db1..27cf199113d 100644
--- a/static/auto-generated/action-sheet/custom-props.md
+++ b/static/auto-generated/action-sheet/custom-props.md
@@ -1,27 +1,25 @@
-
-| Name | Description |
-| --- | --- |
-| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度 |
-| `--background` | Background of the action sheet group<br /><br />自動翻訳: アクションシートグループの背景 |
-| `--button-background` | Background of the action sheet button<br /><br />自動翻訳: アクションシートボタンの背景 |
-| `--button-background-activated` | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: アクションシートボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。 |
-| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed<br /><br />自動翻訳: アクションシートボタンが押されたときの背景の不透明度 |
-| `--button-background-focused` | Background of the action sheet button when tabbed to<br /><br />自動翻訳: にタブしたときのアクションシートボタンの背景。 |
-| `--button-background-focused-opacity` | Opacity of the action sheet button background when tabbed to<br /><br />自動翻訳: にタブしたときのアクションシートボタンの背景の不透明度。 |
-| `--button-background-hover` | Background of the action sheet button on hover<br /><br />自動翻訳: ホバー時のアクションシートボタンの背景 |
-| `--button-background-hover-opacity` | Opacity of the action sheet button background on hover<br /><br />自動翻訳: ホバー時のアクションシートボタンの背景の不透明度 |
-| `--button-background-selected` | Background of the selected action sheet button<br /><br />自動翻訳: 選択したアクションシートボタンの背景 |
-| `--button-background-selected-opacity` | Opacity of the selected action sheet button background<br /><br />自動翻訳: 選択されたアクションシートボタンの背景の不透明度 |
-| `--button-color` | Color of the action sheet button<br /><br />自動翻訳: アクションシートボタンの色 |
-| `--button-color-activated` | Color of the action sheet button when pressed<br /><br />自動翻訳: アクションシートボタンが押されたときの色 |
-| `--button-color-focused` | Color of the action sheet button when tabbed to<br /><br />自動翻訳: にタブで移動したときのアクションシートのボタンの色。 |
-| `--button-color-hover` | Color of the action sheet button on hover<br /><br />自動翻訳: ホバー時のアクションシートボタンの色 |
-| `--button-color-selected` | Color of the selected action sheet button<br /><br />自動翻訳: 選択されたアクションシートのボタンの色 |
-| `--color` | Color of the action sheet text<br /><br />自動翻訳: アクションシートテキストの色 |
-| `--height` | height of the action sheet<br /><br />自動翻訳: アクションシートの高さ |
-| `--max-height` | Maximum height of the action sheet<br /><br />自動翻訳: アクションシートの最大高さ |
-| `--max-width` | Maximum width of the action sheet<br /><br />自動翻訳: アクションシートの最大幅 |
-| `--min-height` | Minimum height of the action sheet<br /><br />自動翻訳: アクションシートの最小高さ |
-| `--min-width` | Minimum width of the action sheet<br /><br />自動翻訳: アクションシートの最小幅 |
-| `--width` | Width of the action sheet<br /><br />自動翻訳: アクションシートの横幅 |
-
+| Name                                    | Description                                                                                                                                                                                                                                            |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--backdrop-opacity`                    | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度                                                                                                                                                                                            |
+| `--background`                          | Background of the action sheet group<br /><br />自動翻訳: アクションシートグループの背景                                                                                                                                                               |
+| `--button-background`                   | Background of the action sheet button<br /><br />自動翻訳: アクションシートボタンの背景                                                                                                                                                                |
+| `--button-background-activated`         | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: アクションシートボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。 |
+| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed<br /><br />自動翻訳: アクションシートボタンが押されたときの背景の不透明度                                                                                                                   |
+| `--button-background-focused`           | Background of the action sheet button when tabbed to<br /><br />自動翻訳: にタブしたときのアクションシートボタンの背景。                                                                                                                               |
+| `--button-background-focused-opacity`   | Opacity of the action sheet button background when tabbed to<br /><br />自動翻訳: にタブしたときのアクションシートボタンの背景の不透明度。                                                                                                             |
+| `--button-background-hover`             | Background of the action sheet button on hover<br /><br />自動翻訳: ホバー時のアクションシートボタンの背景                                                                                                                                             |
+| `--button-background-hover-opacity`     | Opacity of the action sheet button background on hover<br /><br />自動翻訳: ホバー時のアクションシートボタンの背景の不透明度                                                                                                                           |
+| `--button-background-selected`          | Background of the selected action sheet button<br /><br />自動翻訳: 選択したアクションシートボタンの背景                                                                                                                                               |
+| `--button-background-selected-opacity`  | Opacity of the selected action sheet button background<br /><br />自動翻訳: 選択されたアクションシートボタンの背景の不透明度                                                                                                                           |
+| `--button-color`                        | Color of the action sheet button<br /><br />自動翻訳: アクションシートボタンの色                                                                                                                                                                       |
+| `--button-color-activated`              | Color of the action sheet button when pressed<br /><br />自動翻訳: アクションシートボタンが押されたときの色                                                                                                                                            |
+| `--button-color-focused`                | Color of the action sheet button when tabbed to<br /><br />自動翻訳: にタブで移動したときのアクションシートのボタンの色。                                                                                                                              |
+| `--button-color-hover`                  | Color of the action sheet button on hover<br /><br />自動翻訳: ホバー時のアクションシートボタンの色                                                                                                                                                    |
+| `--button-color-selected`               | Color of the selected action sheet button<br /><br />自動翻訳: 選択されたアクションシートのボタンの色                                                                                                                                                  |
+| `--color`                               | Color of the action sheet text<br /><br />自動翻訳: アクションシートテキストの色                                                                                                                                                                       |
+| `--height`                              | height of the action sheet<br /><br />自動翻訳: アクションシートの高さ                                                                                                                                                                                 |
+| `--max-height`                          | Maximum height of the action sheet<br /><br />自動翻訳: アクションシートの最大高さ                                                                                                                                                                     |
+| `--max-width`                           | Maximum width of the action sheet<br /><br />自動翻訳: アクションシートの最大幅                                                                                                                                                                        |
+| `--min-height`                          | Minimum height of the action sheet<br /><br />自動翻訳: アクションシートの最小高さ                                                                                                                                                                     |
+| `--min-width`                           | Minimum width of the action sheet<br /><br />自動翻訳: アクションシートの最小幅                                                                                                                                                                        |
+| `--width`                               | Width of the action sheet<br /><br />自動翻訳: アクションシートの横幅                                                                                                                                                                                  |
diff --git a/static/auto-generated/action-sheet/events.md b/static/auto-generated/action-sheet/events.md
index ec080585051..fab5ec0b402 100644
--- a/static/auto-generated/action-sheet/events.md
+++ b/static/auto-generated/action-sheet/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionActionSheetDidDismiss` | Emitted after the alert has dismissed.<br /><br />自動翻訳: アラートが解除された後に発せられる。 |
-| `ionActionSheetDidPresent` | Emitted after the alert has presented.<br /><br />自動翻訳: アラートが提示された後に発せられる。 |
+| Name                        | Description                                                                                       |
+| --------------------------- | ------------------------------------------------------------------------------------------------- |
+| `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.<br /><br />自動翻訳: アラートが解除された後に発せられる。  |
+| `ionActionSheetDidPresent`  | Emitted after the alert has presented.<br /><br />自動翻訳: アラートが提示された後に発せられる。  |
 | `ionActionSheetWillDismiss` | Emitted before the alert has dismissed.<br /><br />自動翻訳: アラートが解除される前に発せられる。 |
 | `ionActionSheetWillPresent` | Emitted before the alert has presented.<br /><br />自動翻訳: アラートが提示される前に発せられる。 |
-
diff --git a/static/auto-generated/action-sheet/methods.md b/static/auto-generated/action-sheet/methods.md
index cf67dcab36e..9b66152b11a 100644
--- a/static/auto-generated/action-sheet/methods.md
+++ b/static/auto-generated/action-sheet/methods.md
@@ -1,34 +1,27 @@
-
-
 ### dismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Dismiss the action sheet overlay after it has been presented.<br /><br />自動翻訳: アクションシートのオーバーレイが提示された後、それを解除する。 |
-| **Signature** | `dismiss(data?: any, role?: string) => Promise<boolean>` |
-
+| **Signature**   | `dismiss(data?: any, role?: string) => Promise<boolean>`                                                                                          |
 
 ### onDidDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the action sheet did dismiss.<br /><br />自動翻訳: アクションシートが解散したときに解決するプロミスを返します。 |
-| **Signature** | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                          |
 
 ### onWillDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                             |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the action sheet will dismiss.<br /><br />自動翻訳: アクションシートが解散するタイミングを解決するプロミスを返します。 |
-| **Signature** | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                                |
 
 ### present
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Present the action sheet overlay after it has been created.<br /><br />自動翻訳: アクションシートのオーバーレイを作成後に提示する。 |
-| **Signature** | `present() => Promise<void>` |
-
-
+| **Signature**   | `present() => Promise<void>`                                                                                                        |
diff --git a/static/auto-generated/action-sheet/parts.md b/static/auto-generated/action-sheet/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/action-sheet/parts.md
+++ b/static/auto-generated/action-sheet/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/action-sheet/props.md b/static/auto-generated/action-sheet/props.md
index 81752b55bad..5c9c8a29323 100644
--- a/static/auto-generated/action-sheet/props.md
+++ b/static/auto-generated/action-sheet/props.md
@@ -1,132 +1,107 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the action sheet will animate.<br /><br />自動翻訳: `true`の場合、アクションシートはアニメーションを行います。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `animated`                                                                                                                |
+| **Type**        | `boolean`                                                                                                                 |
+| **Default**     | `true`                                                                                                                    |
 
-### backdropDismiss 
+### backdropDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                 |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the action sheet will be dismissed when the backdrop is clicked.<br /><br />自動翻訳: `true`の場合、バックドロップがクリックされるとアクションシートが解除されます。 |
-| **Attribute** | `backdrop-dismiss` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `backdrop-dismiss`                                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                                                       |
+| **Default**     | `true`                                                                                                                                                                          |
 
+### buttons
 
-
-### buttons 
-
-| | |
-| --- | --- |
+|                 |                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------- |
 | **Description** | An array of buttons for the action sheet.<br /><br />自動翻訳: アクションシートのボタンの配列です。 |
-| **Attribute** | `undefined` |
-| **Type** | `(string ｜ ActionSheetButton<any>)[]` |
-| **Default** | `[]` |
-
+| **Attribute**   | `undefined`                                                                                         |
+| **Type**        | `(string ｜ ActionSheetButton<any>)[]`                                                              |
+| **Default**     | `[]`                                                                                                |
 
+### cssClass
 
-### cssClass 
+|                 |                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
+| **Attribute**   | `css-class`                                                                                                                                                                                                                               |
+| **Type**        | `string ｜ string[] ｜ undefined`                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                               |
 
-| | |
-| --- | --- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
-| **Attribute** | `css-class` |
-| **Type** | `string ｜ string[] ｜ undefined` |
-| **Default** | `undefined` |
+### enterAnimation
 
-
-
-### enterAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the action sheet is presented.<br /><br />自動翻訳: アクションシートの提示時に使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `undefined`                                                                                                                      |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                          |
+| **Default**     | `undefined`                                                                                                                      |
 
+### header
 
-
-### header 
-
-| | |
-| --- | --- |
+|                 |                                                                                   |
+| --------------- | --------------------------------------------------------------------------------- |
 | **Description** | Title for the action sheet.<br /><br />自動翻訳: アクションシートのタイトルです。 |
-| **Attribute** | `header` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `header`                                                                          |
+| **Type**        | `string ｜ undefined`                                                             |
+| **Default**     | `undefined`                                                                       |
 
+### htmlAttributes
 
-### htmlAttributes 
-
-| | |
-| --- | --- |
+|                 |                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------- |
 | **Description** | Additional attributes to pass to the action sheet.<br /><br />自動翻訳: アクションシートに渡す追加属性。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                              |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                                   |
+| **Default**     | `undefined`                                                                                              |
 
-### keyboardClose 
+### keyboardClose
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented.<br /><br />自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
-| **Attribute** | `keyboard-close` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `keyboard-close`                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                                     |
 
+### leaveAnimation
 
-
-### leaveAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the action sheet is dismissed.<br /><br />自動翻訳: アクションシートが解除されたときに使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                                              |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                  |
+| **Default**     | `undefined`                                                                                                                              |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-### subHeader 
+### subHeader
 
-| | |
-| --- | --- |
+|                 |                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------- |
 | **Description** | Subtitle for the action sheet.<br /><br />自動翻訳: アクションシートのサブタイトルです。 |
-| **Attribute** | `sub-header` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `sub-header`                                                                             |
+| **Type**        | `string ｜ undefined`                                                                    |
+| **Default**     | `undefined`                                                                              |
 
+### translucent
 
-
-### translucent 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、アクションシートは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
diff --git a/static/auto-generated/action-sheet/slots.md b/static/auto-generated/action-sheet/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/action-sheet/slots.md
+++ b/static/auto-generated/action-sheet/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/alert/custom-props.md b/static/auto-generated/alert/custom-props.md
index 432907869da..db583a76fb2 100644
--- a/static/auto-generated/alert/custom-props.md
+++ b/static/auto-generated/alert/custom-props.md
@@ -1,12 +1,10 @@
-
-| Name | Description |
-| --- | --- |
-| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度 |
-| `--background` | Background of the alert<br /><br />自動翻訳: 注意喚起の背景 |
-| `--height` | Height of the alert<br /><br />自動翻訳: アラートの高さ |
-| `--max-height` | Maximum height of the alert<br /><br />自動翻訳: アラートの最大高さ |
-| `--max-width` | Maximum width of the alert<br /><br />自動翻訳: アラートの最大幅 |
-| `--min-height` | Minimum height of the alert<br /><br />自動翻訳: アラートの最低高さ |
-| `--min-width` | Minimum width of the alert<br /><br />自動翻訳: アラートの最小幅 |
-| `--width` | Width of the alert<br /><br />自動翻訳: アラートの幅 |
-
+| Name                 | Description                                                         |
+| -------------------- | ------------------------------------------------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度         |
+| `--background`       | Background of the alert<br /><br />自動翻訳: 注意喚起の背景         |
+| `--height`           | Height of the alert<br /><br />自動翻訳: アラートの高さ             |
+| `--max-height`       | Maximum height of the alert<br /><br />自動翻訳: アラートの最大高さ |
+| `--max-width`        | Maximum width of the alert<br /><br />自動翻訳: アラートの最大幅    |
+| `--min-height`       | Minimum height of the alert<br /><br />自動翻訳: アラートの最低高さ |
+| `--min-width`        | Minimum width of the alert<br /><br />自動翻訳: アラートの最小幅    |
+| `--width`            | Width of the alert<br /><br />自動翻訳: アラートの幅                |
diff --git a/static/auto-generated/alert/events.md b/static/auto-generated/alert/events.md
index f94fa58bb60..4f4cc50920b 100644
--- a/static/auto-generated/alert/events.md
+++ b/static/auto-generated/alert/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionAlertDidDismiss` | Emitted after the alert has dismissed.<br /><br />自動翻訳: アラートが解除された後に発せられる。 |
-| `ionAlertDidPresent` | Emitted after the alert has presented.<br /><br />自動翻訳: アラートが提示された後に発せられる。 |
+| Name                  | Description                                                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------- |
+| `ionAlertDidDismiss`  | Emitted after the alert has dismissed.<br /><br />自動翻訳: アラートが解除された後に発せられる。  |
+| `ionAlertDidPresent`  | Emitted after the alert has presented.<br /><br />自動翻訳: アラートが提示された後に発せられる。  |
 | `ionAlertWillDismiss` | Emitted before the alert has dismissed.<br /><br />自動翻訳: アラートが解除される前に発せられる。 |
 | `ionAlertWillPresent` | Emitted before the alert has presented.<br /><br />自動翻訳: アラートが提示される前に発せられる。 |
-
diff --git a/static/auto-generated/alert/methods.md b/static/auto-generated/alert/methods.md
index 0d0ed2649da..011a4827655 100644
--- a/static/auto-generated/alert/methods.md
+++ b/static/auto-generated/alert/methods.md
@@ -1,34 +1,27 @@
-
-
 ### dismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Dismiss the alert overlay after it has been presented.<br /><br />自動翻訳: アラートオーバーレイが表示された後、解除する。 |
-| **Signature** | `dismiss(data?: any, role?: string) => Promise<boolean>` |
-
+| **Signature**   | `dismiss(data?: any, role?: string) => Promise<boolean>`                                                                   |
 
 ### onDidDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the alert did dismiss.<br /><br />自動翻訳: アラートが解除されたことを解決するプロミスを返します。 |
-| **Signature** | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                             |
 
 ### onWillDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the alert will dismiss.<br /><br />自動翻訳: アラートが解除されるタイミングを解決するプロミスを返します。 |
-| **Signature** | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                   |
 
 ### present
 
-| | |
-| --- | --- |
+|                 |                                                                                                                        |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Present the alert overlay after it has been created.<br /><br />自動翻訳: アラートオーバーレイを作成した後に提示する。 |
-| **Signature** | `present() => Promise<void>` |
-
-
+| **Signature**   | `present() => Promise<void>`                                                                                           |
diff --git a/static/auto-generated/alert/parts.md b/static/auto-generated/alert/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/alert/parts.md
+++ b/static/auto-generated/alert/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/alert/props.md b/static/auto-generated/alert/props.md
index 3c07a9f1208..acda920f370 100644
--- a/static/auto-generated/alert/props.md
+++ b/static/auto-generated/alert/props.md
@@ -1,154 +1,125 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the alert will animate.<br /><br />自動翻訳: `true`の場合、アラートはアニメーションで表示されます。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `animated`                                                                                                     |
+| **Type**        | `boolean`                                                                                                      |
+| **Default**     | `true`                                                                                                         |
 
-### backdropDismiss 
+### backdropDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the alert will be dismissed when the backdrop is clicked.<br /><br />自動翻訳: `true`の場合、バックドロップがクリックされるとアラートが解除される。 |
-| **Attribute** | `backdrop-dismiss` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `backdrop-dismiss`                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                      |
+| **Default**     | `true`                                                                                                                                                         |
 
+### buttons
 
-
-### buttons 
-
-| | |
-| --- | --- |
+|                 |                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------- |
 | **Description** | Array of buttons to be added to the alert.<br /><br />自動翻訳: アラートに追加されるボタンの配列。 |
-| **Attribute** | `undefined` |
-| **Type** | `(string ｜ AlertButton)[]` |
-| **Default** | `[]` |
-
-
+| **Attribute**   | `undefined`                                                                                        |
+| **Type**        | `(string ｜ AlertButton)[]`                                                                        |
+| **Default**     | `[]`                                                                                               |
 
-### cssClass 
+### cssClass
 
-| | |
-| --- | --- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
-| **Attribute** | `css-class` |
-| **Type** | `string ｜ string[] ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
+| **Attribute**   | `css-class`                                                                                                                                                                                                                               |
+| **Type**        | `string ｜ string[] ｜ undefined`                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                               |
 
+### enterAnimation
 
-
-### enterAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the alert is presented.<br /><br />自動翻訳: アラート提示時に使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                     |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                         |
+| **Default**     | `undefined`                                                                                                     |
 
-### header 
+### header
 
-| | |
-| --- | --- |
+|                 |                                                                                                             |
+| --------------- | ----------------------------------------------------------------------------------------------------------- |
 | **Description** | The main title in the heading of the alert.<br /><br />自動翻訳: アラートの見出しにあるメインタイトルです。 |
-| **Attribute** | `header` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `header`                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                       |
+| **Default**     | `undefined`                                                                                                 |
 
+### htmlAttributes
 
-
-### htmlAttributes 
-
-| | |
-| --- | --- |
+|                 |                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------- |
 | **Description** | Additional attributes to pass to the alert.<br /><br />自動翻訳: アラートに渡す追加属性。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                               |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                    |
+| **Default**     | `undefined`                                                                               |
 
+### inputs
 
-### inputs 
-
-| | |
-| --- | --- |
+|                 |                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------- |
 | **Description** | Array of input to show in the alert.<br /><br />自動翻訳: アラートに表示する入力の配列。 |
-| **Attribute** | `undefined` |
-| **Type** | `AlertInput[]` |
-| **Default** | `[]` |
-
+| **Attribute**   | `undefined`                                                                              |
+| **Type**        | `AlertInput[]`                                                                           |
+| **Default**     | `[]`                                                                                     |
 
+### keyboardClose
 
-### keyboardClose 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented.<br /><br />自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
-| **Attribute** | `keyboard-close` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `keyboard-close`                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                                     |
 
+### leaveAnimation
 
-### leaveAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the alert is dismissed.<br /><br />自動翻訳: アラートが解除されたときに使用するアニメーション。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                           |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                               |
+| **Default**     | `undefined`                                                                                                           |
 
-### message 
+### message
 
-| | |
-| --- | --- |
-| **Description** | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
-| **Attribute** | `message` |
-| **Type** | `IonicSafeString ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: アラートに表示されるメインメッセージ。 `message` には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
+| **Attribute**   | `message`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `IonicSafeString ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-### subHeader 
+### subHeader
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The subtitle in the heading of the alert. Displayed under the title.<br /><br />自動翻訳: アラートの見出しにあるサブタイトルです。タイトルの下に表示されます。 |
-| **Attribute** | `sub-header` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `sub-header`                                                                                                                                                   |
+| **Type**        | `string ｜ undefined`                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                    |
 
+### translucent
 
-
-### translucent 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、アラートは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
diff --git a/static/auto-generated/alert/slots.md b/static/auto-generated/alert/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/alert/slots.md
+++ b/static/auto-generated/alert/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/app/custom-props.md b/static/auto-generated/app/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/app/custom-props.md
+++ b/static/auto-generated/app/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/app/events.md b/static/auto-generated/app/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/app/events.md
+++ b/static/auto-generated/app/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/app/methods.md b/static/auto-generated/app/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/app/methods.md
+++ b/static/auto-generated/app/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/app/parts.md b/static/auto-generated/app/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/app/parts.md
+++ b/static/auto-generated/app/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/app/props.md b/static/auto-generated/app/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/app/props.md
+++ b/static/auto-generated/app/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/app/slots.md b/static/auto-generated/app/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/app/slots.md
+++ b/static/auto-generated/app/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/avatar/custom-props.md b/static/auto-generated/avatar/custom-props.md
index 774e9c02fd4..8d4f15e1df7 100644
--- a/static/auto-generated/avatar/custom-props.md
+++ b/static/auto-generated/avatar/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name              | Description                                                                                           |
+| ----------------- | ----------------------------------------------------------------------------------------------------- |
 | `--border-radius` | Border radius of the avatar and inner image<br /><br />自動翻訳: アバターとインナーイメージの境界半径 |
-
diff --git a/static/auto-generated/avatar/events.md b/static/auto-generated/avatar/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/avatar/events.md
+++ b/static/auto-generated/avatar/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/avatar/methods.md b/static/auto-generated/avatar/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/avatar/methods.md
+++ b/static/auto-generated/avatar/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/avatar/parts.md b/static/auto-generated/avatar/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/avatar/parts.md
+++ b/static/auto-generated/avatar/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/avatar/props.md b/static/auto-generated/avatar/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/avatar/props.md
+++ b/static/auto-generated/avatar/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/avatar/slots.md b/static/auto-generated/avatar/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/avatar/slots.md
+++ b/static/auto-generated/avatar/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/back-button/custom-props.md b/static/auto-generated/back-button/custom-props.md
index ab1c0a9d09c..1c78b32c4e6 100644
--- a/static/auto-generated/back-button/custom-props.md
+++ b/static/auto-generated/back-button/custom-props.md
@@ -1,36 +1,34 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the button<br /><br />自動翻訳: ボタンの背景 |
-| `--background-focused` | Background of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景 |
-| `--background-focused-opacity` | Opacity of the button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度 |
-| `--background-hover` | Background of the button on hover<br /><br />自動翻訳: ホバー時のボタンの背景 |
-| `--background-hover-opacity` | Opacity of the background on hover<br /><br />自動翻訳: ホバー時の背景の不透明度 |
-| `--border-radius` | Border radius of the button<br /><br />自動翻訳: ボタンの境界半径 |
-| `--color` | Text color of the button<br /><br />自動翻訳: ボタンの文字色 |
-| `--color-focused` | Text color of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの文字色 |
-| `--color-hover` | Text color of the button on hover<br /><br />自動翻訳: ホバー時のボタンの文字色 |
-| `--icon-font-size` | Font size of the button icon<br /><br />自動翻訳: ボタンアイコンのフォントサイズ |
-| `--icon-font-weight` | Font weight of the button icon<br /><br />自動翻訳: ボタンアイコンのフォントの太さ |
-| `--icon-margin-bottom` | Bottom margin of the button icon<br /><br />自動翻訳: ボタンアイコンの下端マージン |
-| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの方向が左から右の場合は右マージン、右から左の場合は左マージン |
-| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの方向が左から右の場合は左マージン、右から左の場合は右マージン |
-| `--icon-margin-top` | Top margin of the button icon<br /><br />自動翻訳: ボタンアイコンの上マージン |
-| `--icon-padding-bottom` | Bottom padding of the button icon<br /><br />自動翻訳: ボタンアイコンの下パディング |
-| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。 |
-| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。 |
-| `--icon-padding-top` | Top padding of the button icon<br /><br />自動翻訳: ボタンアイコンの上部パディング |
-| `--margin-bottom` | Bottom margin of the button<br /><br />自動翻訳: ボタンの下端マージン |
-| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右マージン、右から左の場合は左マージン |
-| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左マージン、右から左の場合は右マージン |
-| `--margin-top` | Top margin of the button<br /><br />自動翻訳: ボタンの上マージン |
-| `--min-height` | Minimum height of the button<br /><br />自動翻訳: ボタンの最小高さ |
-| `--min-width` | Minimum width of the button<br /><br />自動翻訳: ボタンの最小幅 |
-| `--opacity` | Opacity of the button<br /><br />自動翻訳: ボタンの不透明度 |
-| `--padding-bottom` | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング |
-| `--ripple-color` | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色 |
-| `--transition` | Transition of the button<br /><br />自動翻訳: ボタンの遷移 |
-
+| Name                           | Description                                                                                                                                                                                                                        |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the button<br /><br />自動翻訳: ボタンの背景                                                                                                                                                                         |
+| `--background-focused`         | Background of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景                                                                                                             |
+| `--background-focused-opacity` | Opacity of the button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度                                                                                           |
+| `--background-hover`           | Background of the button on hover<br /><br />自動翻訳: ホバー時のボタンの背景                                                                                                                                                      |
+| `--background-hover-opacity`   | Opacity of the background on hover<br /><br />自動翻訳: ホバー時の背景の不透明度                                                                                                                                                   |
+| `--border-radius`              | Border radius of the button<br /><br />自動翻訳: ボタンの境界半径                                                                                                                                                                  |
+| `--color`                      | Text color of the button<br /><br />自動翻訳: ボタンの文字色                                                                                                                                                                       |
+| `--color-focused`              | Text color of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの文字色                                                                                                           |
+| `--color-hover`                | Text color of the button on hover<br /><br />自動翻訳: ホバー時のボタンの文字色                                                                                                                                                    |
+| `--icon-font-size`             | Font size of the button icon<br /><br />自動翻訳: ボタンアイコンのフォントサイズ                                                                                                                                                   |
+| `--icon-font-weight`           | Font weight of the button icon<br /><br />自動翻訳: ボタンアイコンのフォントの太さ                                                                                                                                                 |
+| `--icon-margin-bottom`         | Bottom margin of the button icon<br /><br />自動翻訳: ボタンアイコンの下端マージン                                                                                                                                                 |
+| `--icon-margin-end`            | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの方向が左から右の場合は右マージン、右から左の場合は左マージン                     |
+| `--icon-margin-start`          | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの方向が左から右の場合は左マージン、右から左の場合は右マージン                     |
+| `--icon-margin-top`            | Top margin of the button icon<br /><br />自動翻訳: ボタンアイコンの上マージン                                                                                                                                                      |
+| `--icon-padding-bottom`        | Bottom padding of the button icon<br /><br />自動翻訳: ボタンアイコンの下パディング                                                                                                                                                |
+| `--icon-padding-end`           | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。 |
+| `--icon-padding-start`         | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon<br /><br />自動翻訳: ボタンアイコンの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。 |
+| `--icon-padding-top`           | Top padding of the button icon<br /><br />自動翻訳: ボタンアイコンの上部パディング                                                                                                                                                 |
+| `--margin-bottom`              | Bottom margin of the button<br /><br />自動翻訳: ボタンの下端マージン                                                                                                                                                              |
+| `--margin-end`                 | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右マージン、右から左の場合は左マージン                                  |
+| `--margin-start`               | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左マージン、右から左の場合は右マージン                                  |
+| `--margin-top`                 | Top margin of the button<br /><br />自動翻訳: ボタンの上マージン                                                                                                                                                                   |
+| `--min-height`                 | Minimum height of the button<br /><br />自動翻訳: ボタンの最小高さ                                                                                                                                                                 |
+| `--min-width`                  | Minimum width of the button<br /><br />自動翻訳: ボタンの最小幅                                                                                                                                                                    |
+| `--opacity`                    | Opacity of the button<br /><br />自動翻訳: ボタンの不透明度                                                                                                                                                                        |
+| `--padding-bottom`             | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング                                                                                                                                                             |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる                      |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる                      |
+| `--padding-top`                | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング                                                                                                                                                              |
+| `--ripple-color`               | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色                                                                                                                                                  |
+| `--transition`                 | Transition of the button<br /><br />自動翻訳: ボタンの遷移                                                                                                                                                                         |
diff --git a/static/auto-generated/back-button/events.md b/static/auto-generated/back-button/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/back-button/events.md
+++ b/static/auto-generated/back-button/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/back-button/methods.md b/static/auto-generated/back-button/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/back-button/methods.md
+++ b/static/auto-generated/back-button/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/back-button/parts.md b/static/auto-generated/back-button/parts.md
index 343dfc04ee0..165494f2e4e 100644
--- a/static/auto-generated/back-button/parts.md
+++ b/static/auto-generated/back-button/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `icon` | The back button icon (uses ion-icon).<br /><br />自動翻訳: 戻るボタンのアイコン（ion-iconを使用）。 |
+| Name     | Description                                                                                                                         |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`   | The back button icon (uses ion-icon).<br /><br />自動翻訳: 戻るボタンのアイコン（ion-icon を使用）。                                |
 | `native` | The native HTML button element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。 |
-| `text` | The back button text.<br /><br />自動翻訳: 戻るボタンのテキストです。 |
-
+| `text`   | The back button text.<br /><br />自動翻訳: 戻るボタンのテキストです。                                                               |
diff --git a/static/auto-generated/back-button/props.md b/static/auto-generated/back-button/props.md
index 0584eb9b547..11b8a7078d1 100644
--- a/static/auto-generated/back-button/props.md
+++ b/static/auto-generated/back-button/props.md
@@ -1,88 +1,71 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### defaultHref 
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-| | |
-| --- | --- |
-| **Description** | The url to navigate back to by default when there is no history.<br /><br />自動翻訳: 履歴がない場合に、デフォルトで戻るためのURL。 |
-| **Attribute** | `default-href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### defaultHref
 
+|                 |                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The url to navigate back to by default when there is no history.<br /><br />自動翻訳: 履歴がない場合に、デフォルトで戻るための URL。 |
+| **Attribute**   | `default-href`                                                                                                                       |
+| **Type**        | `string ｜ undefined`                                                                                                                |
+| **Default**     | `undefined`                                                                                                                          |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the button.<br /><br />自動翻訳: `true`の場合、ユーザはボタンと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### icon 
+| **Attribute**   | `disabled`                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                        |
+| **Default**     | `false`                                                                                                                          |
 
-| | |
-| --- | --- |
-| **Description** | The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.<br /><br />自動翻訳: 戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確な`src`を指定する。 |
-| **Attribute** | `icon` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+### icon
 
+|                 |                                                                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.<br /><br />自動翻訳: 戻るボタンに使用する内蔵の名前付き SVG アイコン名または SVG ファイルの正確な`src`を指定する。 |
+| **Attribute**   | `icon`                                                                                                                                                                                                            |
+| **Type**        | `null ｜ string ｜ undefined`                                                                                                                                                                                     |
+| **Default**     | `undefined`                                                                                                                                                                                                       |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### routerAnimation
 
-### routerAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition animation when navigating to another page.<br /><br />自動翻訳: ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                                                                                                       |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                       |
 
+### text
 
-### text 
-
-| | |
-| --- | --- |
+|                 |                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------- |
 | **Description** | The text to display in the back button.<br /><br />自動翻訳: バックボタンに表示するテキストです。 |
-| **Attribute** | `text` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `text`                                                                                            |
+| **Type**        | `null ｜ string ｜ undefined`                                                                     |
+| **Default**     | `undefined`                                                                                       |
 
+### type
 
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | The type of the button.<br /><br />自動翻訳: ボタンの種類です。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                          |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                               |
+| **Default**     | `'button'`                                                      |
diff --git a/static/auto-generated/back-button/slots.md b/static/auto-generated/back-button/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/back-button/slots.md
+++ b/static/auto-generated/back-button/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/backdrop/custom-props.md b/static/auto-generated/backdrop/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/backdrop/custom-props.md
+++ b/static/auto-generated/backdrop/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/backdrop/events.md b/static/auto-generated/backdrop/events.md
index e153cf6e049..50efa91a90d 100644
--- a/static/auto-generated/backdrop/events.md
+++ b/static/auto-generated/backdrop/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name             | Description                                                                                              |
+| ---------------- | -------------------------------------------------------------------------------------------------------- |
 | `ionBackdropTap` | Emitted when the backdrop is tapped.<br /><br />自動翻訳: バックドロップがタップされたときに発せられる。 |
-
diff --git a/static/auto-generated/backdrop/methods.md b/static/auto-generated/backdrop/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/backdrop/methods.md
+++ b/static/auto-generated/backdrop/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/backdrop/parts.md b/static/auto-generated/backdrop/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/backdrop/parts.md
+++ b/static/auto-generated/backdrop/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/backdrop/props.md b/static/auto-generated/backdrop/props.md
index b4e511e3834..80ae5c5949d 100644
--- a/static/auto-generated/backdrop/props.md
+++ b/static/auto-generated/backdrop/props.md
@@ -1,33 +1,26 @@
+### stopPropagation
 
-
-### stopPropagation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the backdrop will stop propagation on tap.<br /><br />自動翻訳: `true`の場合、バックドロップはタップ時に伝搬を停止します。 |
-| **Attribute** | `stop-propagation` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `stop-propagation`                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                             |
+| **Default**     | `true`                                                                                                                                |
 
-### tappable 
+### tappable
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.<br /><br />自動翻訳: `true`の場合、背景をクリックすることができ、`ionBackdropTap`イベントを発生させます。 |
-| **Attribute** | `tappable` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `tappable`                                                                                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                                                                                       |
+| **Default**     | `true`                                                                                                                                                                                          |
 
+### visible
 
-
-### visible 
-
-| | |
-| --- | --- |
+|                 |                                                                                                            |
+| --------------- | ---------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the backdrop will be visible.<br /><br />自動翻訳: `true`の場合、バックドロップが表示されます。 |
-| **Attribute** | `visible` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `visible`                                                                                                  |
+| **Type**        | `boolean`                                                                                                  |
+| **Default**     | `true`                                                                                                     |
diff --git a/static/auto-generated/backdrop/slots.md b/static/auto-generated/backdrop/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/backdrop/slots.md
+++ b/static/auto-generated/backdrop/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/badge/custom-props.md b/static/auto-generated/badge/custom-props.md
index 117c59168dd..822008132b4 100644
--- a/static/auto-generated/badge/custom-props.md
+++ b/static/auto-generated/badge/custom-props.md
@@ -1,10 +1,8 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the badge<br /><br />自動翻訳: バッジの背景 |
-| `--color` | Text color of the badge<br /><br />自動翻訳: バッジの文字色 |
-| `--padding-bottom` | Bottom padding of the badge<br /><br />自動翻訳: バッジの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge<br /><br />自動翻訳: バッジの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge<br /><br />自動翻訳: バッジの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the badge<br /><br />自動翻訳: バッジの上部パディング |
-
+| Name               | Description                                                                                                                                                                                                  |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--background`     | Background of the badge<br /><br />自動翻訳: バッジの背景                                                                                                                                                    |
+| `--color`          | Text color of the badge<br /><br />自動翻訳: バッジの文字色                                                                                                                                                  |
+| `--padding-bottom` | Bottom padding of the badge<br /><br />自動翻訳: バッジの下パディング                                                                                                                                        |
+| `--padding-end`    | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge<br /><br />自動翻訳: バッジの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
+| `--padding-start`  | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge<br /><br />自動翻訳: バッジの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
+| `--padding-top`    | Top padding of the badge<br /><br />自動翻訳: バッジの上部パディング                                                                                                                                         |
diff --git a/static/auto-generated/badge/events.md b/static/auto-generated/badge/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/badge/events.md
+++ b/static/auto-generated/badge/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/badge/methods.md b/static/auto-generated/badge/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/badge/methods.md
+++ b/static/auto-generated/badge/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/badge/parts.md b/static/auto-generated/badge/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/badge/parts.md
+++ b/static/auto-generated/badge/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/badge/props.md b/static/auto-generated/badge/props.md
index 565c8944d7f..eb0c49ee657 100644
--- a/static/auto-generated/badge/props.md
+++ b/static/auto-generated/badge/props.md
@@ -1,22 +1,17 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/badge/slots.md b/static/auto-generated/badge/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/badge/slots.md
+++ b/static/auto-generated/badge/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/breadcrumb/custom-props.md b/static/auto-generated/breadcrumb/custom-props.md
index eeb8e550597..8f388531201 100644
--- a/static/auto-generated/breadcrumb/custom-props.md
+++ b/static/auto-generated/breadcrumb/custom-props.md
@@ -1,9 +1,7 @@
-
-| Name | Description |
-| --- | --- |
-| `--background-focused` | Background color of the breadcrumb when focused<br /><br />自動翻訳: フォーカス時のパンくずの背景色 |
-| `--color` | Text color of the breadcrumb<br /><br />自動翻訳: パンくずの文字色 |
-| `--color-active` | Text color of the active breadcrumb<br /><br />自動翻訳: アクティブなパンくずのテキスト色 |
-| `--color-focused` | Text color of the breadcrumb when focused<br /><br />自動翻訳: フォーカスされたときのパンくずのテキスト色 |
-| `--color-hover` | Text color of the breadcrumb on hover<br /><br />自動翻訳: ホバー時のパンくずのテキスト色 |
-
+| Name                   | Description                                                                                               |
+| ---------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--background-focused` | Background color of the breadcrumb when focused<br /><br />自動翻訳: フォーカス時のパンくずの背景色       |
+| `--color`              | Text color of the breadcrumb<br /><br />自動翻訳: パンくずの文字色                                        |
+| `--color-active`       | Text color of the active breadcrumb<br /><br />自動翻訳: アクティブなパンくずのテキスト色                 |
+| `--color-focused`      | Text color of the breadcrumb when focused<br /><br />自動翻訳: フォーカスされたときのパンくずのテキスト色 |
+| `--color-hover`        | Text color of the breadcrumb on hover<br /><br />自動翻訳: ホバー時のパンくずのテキスト色                 |
diff --git a/static/auto-generated/breadcrumb/events.md b/static/auto-generated/breadcrumb/events.md
index 301e2d322f0..d61384cc2a7 100644
--- a/static/auto-generated/breadcrumb/events.md
+++ b/static/auto-generated/breadcrumb/events.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the breadcrumb loses focus.<br /><br />自動翻訳: パンくずのフォーカスが外れたときに発せられる。 |
-| `ionFocus` | Emitted when the breadcrumb has focus.<br /><br />自動翻訳: パンくずがフォーカスされたときに発せられる。 |
-
+| Name       | Description                                                                                                  |
+| ---------- | ------------------------------------------------------------------------------------------------------------ |
+| `ionBlur`  | Emitted when the breadcrumb loses focus.<br /><br />自動翻訳: パンくずのフォーカスが外れたときに発せられる。 |
+| `ionFocus` | Emitted when the breadcrumb has focus.<br /><br />自動翻訳: パンくずがフォーカスされたときに発せられる。     |
diff --git a/static/auto-generated/breadcrumb/methods.md b/static/auto-generated/breadcrumb/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/breadcrumb/methods.md
+++ b/static/auto-generated/breadcrumb/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/breadcrumb/parts.md b/static/auto-generated/breadcrumb/parts.md
index e91e36ed16b..e5fee2a7444 100644
--- a/static/auto-generated/breadcrumb/parts.md
+++ b/static/auto-generated/breadcrumb/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `collapsed-indicator` | The indicator element that shows the breadcrumbs are collapsed.<br /><br />自動翻訳: パンくずが折りたたまれていることを示すインジケーター要素です。 |
-| `native` | The native HTML anchor or div element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブHTMLのアンカーまたはdiv要素です。 |
-| `separator` | The separator element between each breadcrumb.<br /><br />自動翻訳: 各パンくずの間のセパレータ要素です。 |
-
+| Name                  | Description                                                                                                                                                   |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `collapsed-indicator` | The indicator element that shows the breadcrumbs are collapsed.<br /><br />自動翻訳: パンくずが折りたたまれていることを示すインジケーター要素です。           |
+| `native`              | The native HTML anchor or div element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブ HTML のアンカーまたは div 要素です。 |
+| `separator`           | The separator element between each breadcrumb.<br /><br />自動翻訳: 各パンくずの間のセパレータ要素です。                                                      |
diff --git a/static/auto-generated/breadcrumb/props.md b/static/auto-generated/breadcrumb/props.md
index 558b76a57fe..17187e3651d 100644
--- a/static/auto-generated/breadcrumb/props.md
+++ b/static/auto-generated/breadcrumb/props.md
@@ -1,121 +1,98 @@
+### active
 
-
-### active 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.<br /><br />自動翻訳: `true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。 |
-| **Attribute** | `active` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `active`                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                               |
 
-### color 
+### color
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the breadcrumb.<br /><br />自動翻訳: `true`の場合、ユーザーはパンくずと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                               |
+| **Type**        | `boolean`                                                                                                                                |
+| **Default**     | `false`                                                                                                                                  |
 
+### download
 
-### download 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).<br /><br />自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
-| **Attribute** | `download` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `download`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
+### href
 
-### href 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-### rel 
+### rel
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
+### routerAnimation
 
-
-### routerAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition animation when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                |
 
-### routerDirection 
+### routerDirection
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition direction when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。 |
-| **Attribute** | `router-direction` |
-| **Type** | `"back" ｜ "forward" ｜ "root"` |
-| **Default** | `'forward'` |
-
-
-
-### separator 
-
-| | |
-| --- | --- |
-| **Description** | If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.<br /><br />自動翻訳: trueの場合、このパンくずと次のパンくずの間にセパレータを表示する。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。 |
-| **Attribute** | `separator` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### target 
-
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `router-direction`                                                                                                                                                                                               |
+| **Type**        | `"back" ｜ "forward" ｜ "root"`                                                                                                                                                                                  |
+| **Default**     | `'forward'`                                                                                                                                                                                                      |
+
+### separator
+
+|                 |                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.<br /><br />自動翻訳: true の場合、このパンくずと次のパンくずの間にセパレータを表示する。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。 |
+| **Attribute**   | `separator`                                                                                                                                                                                                                                                                                  |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                  |
+
+### target
+
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/breadcrumb/slots.md b/static/auto-generated/breadcrumb/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/breadcrumb/slots.md
+++ b/static/auto-generated/breadcrumb/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/breadcrumbs/custom-props.md b/static/auto-generated/breadcrumbs/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/breadcrumbs/custom-props.md
+++ b/static/auto-generated/breadcrumbs/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/breadcrumbs/events.md b/static/auto-generated/breadcrumbs/events.md
index fa691378c68..2cc88f7f5ab 100644
--- a/static/auto-generated/breadcrumbs/events.md
+++ b/static/auto-generated/breadcrumbs/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name                | Description                                                                                                                   |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | `ionCollapsedClick` | Emitted when the collapsed indicator is clicked on.<br /><br />自動翻訳: 折りたたみインジケータがクリックされたときに発する。 |
-
diff --git a/static/auto-generated/breadcrumbs/methods.md b/static/auto-generated/breadcrumbs/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/breadcrumbs/methods.md
+++ b/static/auto-generated/breadcrumbs/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/breadcrumbs/parts.md b/static/auto-generated/breadcrumbs/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/breadcrumbs/parts.md
+++ b/static/auto-generated/breadcrumbs/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/breadcrumbs/props.md b/static/auto-generated/breadcrumbs/props.md
index cf37875ea11..b459c052b45 100644
--- a/static/auto-generated/breadcrumbs/props.md
+++ b/static/auto-generated/breadcrumbs/props.md
@@ -1,55 +1,44 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### itemsAfterCollapse 
-
-| | |
-| --- | --- |
-| **Description** | The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.<br /><br />自動翻訳: 折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。 |
-| **Attribute** | `items-after-collapse` |
-| **Type** | `number` |
-| **Default** | `1` |
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### itemsAfterCollapse
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.<br /><br />自動翻訳: 折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse`+`itemsAfterCollapse`が`maxItems` よりも大きい場合、パンくずは折りたたまれない。 |
+| **Attribute**   | `items-after-collapse`                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                            |
+| **Default**     | `1`                                                                                                                                                                                                                                                                                                                                                                 |
 
-### itemsBeforeCollapse 
+### itemsBeforeCollapse
 
-| | |
-| --- | --- |
-| **Description** | The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.<br /><br />自動翻訳: 折りたたんだインジケータの前に表示するパンくずの数を指定する。itemsBeforeCollapse` + `itemsAfterCollapse` が `maxItems` よりも大きい場合、パンくずは折りたたまれない。 |
-| **Attribute** | `items-before-collapse` |
-| **Type** | `number` |
-| **Default** | `1` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.<br /><br />自動翻訳: 折りたたんだインジケータの前に表示するパンくずの数を指定する。itemsBeforeCollapse`+`itemsAfterCollapse`が`maxItems` よりも大きい場合、パンくずは折りたたまれない。 |
+| **Attribute**   | `items-before-collapse`                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `1`                                                                                                                                                                                                                                                                                                                                                                          |
 
+### maxItems
 
-
-### maxItems 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The maximum number of breadcrumbs to show before collapsing.<br /><br />自動翻訳: 折りたたむ前に表示するパンくずの最大数を指定します。 |
-| **Attribute** | `max-items` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `max-items`                                                                                                                            |
+| **Type**        | `number ｜ undefined`                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                            |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/breadcrumbs/slots.md b/static/auto-generated/breadcrumbs/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/breadcrumbs/slots.md
+++ b/static/auto-generated/breadcrumbs/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/button/custom-props.md b/static/auto-generated/button/custom-props.md
index 04ff7f353bf..33cabdbf93d 100644
--- a/static/auto-generated/button/custom-props.md
+++ b/static/auto-generated/button/custom-props.md
@@ -1,27 +1,25 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the button<br /><br />自動翻訳: ボタンの背景 |
-| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。 |
-| `--background-activated-opacity` | Opacity of the button when pressed<br /><br />自動翻訳: ボタンが押されたときの不透明度 |
-| `--background-focused` | Background of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景 |
-| `--background-focused-opacity` | Opacity of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの不透明度 |
-| `--background-hover` | Background of the button on hover<br /><br />自動翻訳: ホバー時のボタンの背景 |
-| `--background-hover-opacity` | Opacity of the background on hover<br /><br />自動翻訳: ホバー時の背景の不透明度 |
-| `--border-color` | Border color of the button<br /><br />自動翻訳: ボタンのボーダーカラー |
-| `--border-radius` | Border radius of the button<br /><br />自動翻訳: ボタンの境界半径 |
-| `--border-style` | Border style of the button<br /><br />自動翻訳: ボタンのボーダースタイル |
-| `--border-width` | Border width of the button<br /><br />自動翻訳: ボタンのボーダー幅 |
-| `--box-shadow` | Box shadow of the button<br /><br />自動翻訳: ボタンのボックスシャドウ |
-| `--color` | Text color of the button<br /><br />自動翻訳: ボタンの文字色 |
-| `--color-activated` | Text color of the button when pressed<br /><br />自動翻訳: ボタンが押されたときの文字色 |
-| `--color-focused` | Text color of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの文字色 |
-| `--color-hover` | Text color of the button when hover<br /><br />自動翻訳: ホバー時のボタンの文字色 |
-| `--opacity` | Opacity of the button<br /><br />自動翻訳: ボタンの不透明度 |
-| `--padding-bottom` | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング |
-| `--ripple-color` | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色 |
-| `--transition` | Transition of the button<br /><br />自動翻訳: ボタンの遷移 |
-
+| Name                             | Description                                                                                                                                                                                                               |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the button<br /><br />自動翻訳: ボタンの背景                                                                                                                                                                |
+| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。 |
+| `--background-activated-opacity` | Opacity of the button when pressed<br /><br />自動翻訳: ボタンが押されたときの不透明度                                                                                                                                    |
+| `--background-focused`           | Background of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景                                                                                                    |
+| `--background-focused-opacity`   | Opacity of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの不透明度                                                                                                   |
+| `--background-hover`             | Background of the button on hover<br /><br />自動翻訳: ホバー時のボタンの背景                                                                                                                                             |
+| `--background-hover-opacity`     | Opacity of the background on hover<br /><br />自動翻訳: ホバー時の背景の不透明度                                                                                                                                          |
+| `--border-color`                 | Border color of the button<br /><br />自動翻訳: ボタンのボーダーカラー                                                                                                                                                    |
+| `--border-radius`                | Border radius of the button<br /><br />自動翻訳: ボタンの境界半径                                                                                                                                                         |
+| `--border-style`                 | Border style of the button<br /><br />自動翻訳: ボタンのボーダースタイル                                                                                                                                                  |
+| `--border-width`                 | Border width of the button<br /><br />自動翻訳: ボタンのボーダー幅                                                                                                                                                        |
+| `--box-shadow`                   | Box shadow of the button<br /><br />自動翻訳: ボタンのボックスシャドウ                                                                                                                                                    |
+| `--color`                        | Text color of the button<br /><br />自動翻訳: ボタンの文字色                                                                                                                                                              |
+| `--color-activated`              | Text color of the button when pressed<br /><br />自動翻訳: ボタンが押されたときの文字色                                                                                                                                   |
+| `--color-focused`                | Text color of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの文字色                                                                                                  |
+| `--color-hover`                  | Text color of the button when hover<br /><br />自動翻訳: ホバー時のボタンの文字色                                                                                                                                         |
+| `--opacity`                      | Opacity of the button<br /><br />自動翻訳: ボタンの不透明度                                                                                                                                                               |
+| `--padding-bottom`               | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング                                                                                                                                                    |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる             |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる             |
+| `--padding-top`                  | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング                                                                                                                                                     |
+| `--ripple-color`                 | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色                                                                                                                                         |
+| `--transition`                   | Transition of the button<br /><br />自動翻訳: ボタンの遷移                                                                                                                                                                |
diff --git a/static/auto-generated/button/events.md b/static/auto-generated/button/events.md
index b31ef92d9d7..e2d31bce301 100644
--- a/static/auto-generated/button/events.md
+++ b/static/auto-generated/button/events.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the button loses focus.<br /><br />自動翻訳: ボタンのフォーカスが外れたときに発せられる。 |
+| Name       | Description                                                                                                |
+| ---------- | ---------------------------------------------------------------------------------------------------------- |
+| `ionBlur`  | Emitted when the button loses focus.<br /><br />自動翻訳: ボタンのフォーカスが外れたときに発せられる。     |
 | `ionFocus` | Emitted when the button has focus.<br /><br />自動翻訳: ボタンにフォーカスが当たっているときに発せられる。 |
-
diff --git a/static/auto-generated/button/methods.md b/static/auto-generated/button/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/button/methods.md
+++ b/static/auto-generated/button/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/button/parts.md b/static/auto-generated/button/parts.md
index 1712d38416e..76e16482789 100644
--- a/static/auto-generated/button/parts.md
+++ b/static/auto-generated/button/parts.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `native` | The native HTML button or anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。 |
-
+| Name     | Description                                                                                                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `native` | The native HTML button or anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブ HTML のボタンまたはアンカー要素です。 |
diff --git a/static/auto-generated/button/props.md b/static/auto-generated/button/props.md
index 665ae98f017..c43eddf0cf5 100644
--- a/static/auto-generated/button/props.md
+++ b/static/auto-generated/button/props.md
@@ -1,187 +1,152 @@
+### buttonType
 
-
-### buttonType 
-
-| | |
-| --- | --- |
+|                 |                                                             |
+| --------------- | ----------------------------------------------------------- |
 | **Description** | The type of button.<br /><br />自動翻訳: ボタンの種類です。 |
-| **Attribute** | `button-type` |
-| **Type** | `string` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `button-type`                                               |
+| **Type**        | `string`                                                    |
+| **Default**     | `'button'`                                                  |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the button.<br /><br />自動翻訳: `true`の場合、ユーザはボタンと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                        |
+| **Default**     | `false`                                                                                                                          |
 
+### download
 
-### download 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).<br /><br />自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
-| **Attribute** | `download` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `download`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
+### expand
 
-### expand 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.<br /><br />自動翻訳: 全角のボタンなら`"block"`、角が四角く左右のボーダーがない全角のボタンなら`"full"`に設定します。 |
-| **Attribute** | `expand` |
-| **Type** | `"block" ｜ "full" ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `expand`                                                                                                                                                                                                                                               |
+| **Type**        | `"block" ｜ "full" ｜ undefined`                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                            |
 
-### fill 
+### fill
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.<br /><br />自動翻訳: フラットなボタンに似た透明なボタンには `"clear"` を、ボーダーのある透明なボタンには `"outline"` を、背景を塗りつぶしたボタンには `"solid"` を設定します。デフォルトの塗りつぶしは `"solid"` です。ただし、ツールバーの内側では `"clear"` となります。 |
-| **Attribute** | `fill` |
-| **Type** | `"clear" ｜ "default" ｜ "outline" ｜ "solid" ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `fill`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `"clear" ｜ "default" ｜ "outline" ｜ "solid" ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
-### form 
+### form
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The HTML form element or form element id. Used to submit a form when the button is not a child of the form.<br /><br />自動翻訳: HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。 |
-| **Attribute** | `form` |
-| **Type** | `HTMLFormElement ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `form`                                                                                                                                                                                                                                            |
+| **Type**        | `HTMLFormElement ｜ string ｜ undefined`                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                       |
 
+### href
 
-
-### href 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### rel
 
-
-### rel 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
+### routerAnimation
 
-### routerAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition animation when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                |
 
+### routerDirection
 
-### routerDirection 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition direction when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。 |
-| **Attribute** | `router-direction` |
-| **Type** | `"back" ｜ "forward" ｜ "root"` |
-| **Default** | `'forward'` |
-
+| **Attribute**   | `router-direction`                                                                                                                                                                                               |
+| **Type**        | `"back" ｜ "forward" ｜ "root"`                                                                                                                                                                                  |
+| **Default**     | `'forward'`                                                                                                                                                                                                      |
 
+### shape
 
-### shape 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set to `"round"` for a button with more rounded corners.<br /><br />自動翻訳: round"` に設定すると、より角が丸いボタンになります。 |
-| **Attribute** | `shape` |
-| **Type** | `"round" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `shape`                                                                                                                            |
+| **Type**        | `"round" ｜ undefined`                                                                                                             |
+| **Default**     | `undefined`                                                                                                                        |
 
+### size
 
-### size 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.<br /><br />自動翻訳: ボタンの高さとパディングが少ない場合は `"small"` に、ボタンの高さとパディングがデフォルトの場合は `"default"` に、ボタンの高さとパディングが多い場合は `"large"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `"small"` になっています。アイテムの内部でサイズを `"default"` に設定すると、標準サイズのボタンになります。 |
-| **Attribute** | `size` |
-| **Type** | `"default" ｜ "large" ｜ "small" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `size`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `"default" ｜ "large" ｜ "small" ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
+### strong
 
-### strong 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, activates a button with a heavier font weight.<br /><br />自動翻訳: `true`の場合、より重いフォントウェイトを持つボタンをアクティブにする。 |
-| **Attribute** | `strong` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `strong`                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                             |
+| **Default**     | `false`                                                                                                                                               |
 
+### target
 
-### target 
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
 
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### type
 
-
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | The type of the button.<br /><br />自動翻訳: ボタンの種類です。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                          |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                               |
+| **Default**     | `'button'`                                                      |
diff --git a/static/auto-generated/button/slots.md b/static/auto-generated/button/slots.md
index f8adf0af12c..43bf629a791 100644
--- a/static/auto-generated/button/slots.md
+++ b/static/auto-generated/button/slots.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
-| `end` | Content is placed to the right of the button text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。 |
-| `icon-only` | Should be used on an icon in a button that has no text.<br /><br />自動翻訳: テキストを持たないボタン内のアイコンに対して使用されるべきである。 |
-| `start` | Content is placed to the left of the button text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。 |
-
+| Name        | Description                                                                                                                                                                               |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ``          | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。           |
+| `end`       | Content is placed to the right of the button text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTR の場合はボタンテキストの右側に、RTL の場合は左側に配置されます。 |
+| `icon-only` | Should be used on an icon in a button that has no text.<br /><br />自動翻訳: テキストを持たないボタン内のアイコンに対して使用されるべきである。                                           |
+| `start`     | Content is placed to the left of the button text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTR ではボタンテキストの左側に、RTL では右側に配置されます。         |
diff --git a/static/auto-generated/buttons/custom-props.md b/static/auto-generated/buttons/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/buttons/custom-props.md
+++ b/static/auto-generated/buttons/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/buttons/events.md b/static/auto-generated/buttons/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/buttons/events.md
+++ b/static/auto-generated/buttons/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/buttons/methods.md b/static/auto-generated/buttons/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/buttons/methods.md
+++ b/static/auto-generated/buttons/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/buttons/parts.md b/static/auto-generated/buttons/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/buttons/parts.md
+++ b/static/auto-generated/buttons/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/buttons/props.md b/static/auto-generated/buttons/props.md
index ffd23abaf82..bf9b76b13bc 100644
--- a/static/auto-generated/buttons/props.md
+++ b/static/auto-generated/buttons/props.md
@@ -1,11 +1,8 @@
-
-
-### collapse 
-
-| | |
-| --- | --- |
-| **Description** | If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.<br /><br />Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.<br /><br />Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)<br /><br />自動翻訳: trueを指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。  ion-header`で `collapse` を `true` に設定した `ios` モードにのみ適用されます。  通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。 |
-| **Attribute** | `collapse` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+### collapse
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.<br /><br />Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.<br /><br />Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)<br /><br />自動翻訳: true を指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。 ion-header`で `collapse`を`true`に設定した`ios` モードにのみ適用されます。 通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。 |
+| **Attribute**   | `collapse`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
diff --git a/static/auto-generated/buttons/slots.md b/static/auto-generated/buttons/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/buttons/slots.md
+++ b/static/auto-generated/buttons/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/card-content/custom-props.md b/static/auto-generated/card-content/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/card-content/custom-props.md
+++ b/static/auto-generated/card-content/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/card-content/events.md b/static/auto-generated/card-content/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/card-content/events.md
+++ b/static/auto-generated/card-content/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/card-content/methods.md b/static/auto-generated/card-content/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/card-content/methods.md
+++ b/static/auto-generated/card-content/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/card-content/parts.md b/static/auto-generated/card-content/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/card-content/parts.md
+++ b/static/auto-generated/card-content/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/card-content/props.md b/static/auto-generated/card-content/props.md
index 9c61d785696..023a7c00652 100644
--- a/static/auto-generated/card-content/props.md
+++ b/static/auto-generated/card-content/props.md
@@ -1,11 +1,8 @@
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/card-content/slots.md b/static/auto-generated/card-content/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/card-content/slots.md
+++ b/static/auto-generated/card-content/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/card-header/custom-props.md b/static/auto-generated/card-header/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/card-header/custom-props.md
+++ b/static/auto-generated/card-header/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/card-header/events.md b/static/auto-generated/card-header/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/card-header/events.md
+++ b/static/auto-generated/card-header/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/card-header/methods.md b/static/auto-generated/card-header/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/card-header/methods.md
+++ b/static/auto-generated/card-header/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/card-header/parts.md b/static/auto-generated/card-header/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/card-header/parts.md
+++ b/static/auto-generated/card-header/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/card-header/props.md b/static/auto-generated/card-header/props.md
index dfe8580a0f0..a9b553283fd 100644
--- a/static/auto-generated/card-header/props.md
+++ b/static/auto-generated/card-header/props.md
@@ -1,33 +1,26 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### translucent
 
-
-### translucent 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、カードヘッダは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
diff --git a/static/auto-generated/card-header/slots.md b/static/auto-generated/card-header/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/card-header/slots.md
+++ b/static/auto-generated/card-header/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/card-subtitle/custom-props.md b/static/auto-generated/card-subtitle/custom-props.md
index b6f5b580626..7343fbbd4bc 100644
--- a/static/auto-generated/card-subtitle/custom-props.md
+++ b/static/auto-generated/card-subtitle/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                                            |
+| --------- | ---------------------------------------------------------------------- |
 | `--color` | Color of the card subtitle<br /><br />自動翻訳: カードサブタイトルの色 |
-
diff --git a/static/auto-generated/card-subtitle/events.md b/static/auto-generated/card-subtitle/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/card-subtitle/events.md
+++ b/static/auto-generated/card-subtitle/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/card-subtitle/methods.md b/static/auto-generated/card-subtitle/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/card-subtitle/methods.md
+++ b/static/auto-generated/card-subtitle/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/card-subtitle/parts.md b/static/auto-generated/card-subtitle/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/card-subtitle/parts.md
+++ b/static/auto-generated/card-subtitle/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/card-subtitle/props.md b/static/auto-generated/card-subtitle/props.md
index 565c8944d7f..eb0c49ee657 100644
--- a/static/auto-generated/card-subtitle/props.md
+++ b/static/auto-generated/card-subtitle/props.md
@@ -1,22 +1,17 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/card-subtitle/slots.md b/static/auto-generated/card-subtitle/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/card-subtitle/slots.md
+++ b/static/auto-generated/card-subtitle/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/card-title/custom-props.md b/static/auto-generated/card-title/custom-props.md
index 46d8c1af90f..80428bbcdbe 100644
--- a/static/auto-generated/card-title/custom-props.md
+++ b/static/auto-generated/card-title/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                                     |
+| --------- | --------------------------------------------------------------- |
 | `--color` | Color of the card title<br /><br />自動翻訳: カードタイトルの色 |
-
diff --git a/static/auto-generated/card-title/events.md b/static/auto-generated/card-title/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/card-title/events.md
+++ b/static/auto-generated/card-title/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/card-title/methods.md b/static/auto-generated/card-title/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/card-title/methods.md
+++ b/static/auto-generated/card-title/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/card-title/parts.md b/static/auto-generated/card-title/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/card-title/parts.md
+++ b/static/auto-generated/card-title/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/card-title/props.md b/static/auto-generated/card-title/props.md
index 565c8944d7f..eb0c49ee657 100644
--- a/static/auto-generated/card-title/props.md
+++ b/static/auto-generated/card-title/props.md
@@ -1,22 +1,17 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/card-title/slots.md b/static/auto-generated/card-title/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/card-title/slots.md
+++ b/static/auto-generated/card-title/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/card/custom-props.md b/static/auto-generated/card/custom-props.md
index 9fa16678c7d..2e2f32d691b 100644
--- a/static/auto-generated/card/custom-props.md
+++ b/static/auto-generated/card/custom-props.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
+| Name           | Description                                              |
+| -------------- | -------------------------------------------------------- |
 | `--background` | Background of the card<br /><br />自動翻訳: カードの背景 |
-| `--color` | Color of the card<br /><br />自動翻訳: カードの色 |
-
+| `--color`      | Color of the card<br /><br />自動翻訳: カードの色        |
diff --git a/static/auto-generated/card/events.md b/static/auto-generated/card/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/card/events.md
+++ b/static/auto-generated/card/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/card/methods.md b/static/auto-generated/card/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/card/methods.md
+++ b/static/auto-generated/card/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/card/parts.md b/static/auto-generated/card/parts.md
index 8212aba6cb8..fbc0e642b74 100644
--- a/static/auto-generated/card/parts.md
+++ b/static/auto-generated/card/parts.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `native` | The native HTML button, anchor, or div element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。 |
-
+| Name     | Description                                                                                                                                                                            |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `native` | The native HTML button, anchor, or div element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブ HTML のボタン、アンカー、または div 要素です。 |
diff --git a/static/auto-generated/card/props.md b/static/auto-generated/card/props.md
index cd51de1e929..55e564de805 100644
--- a/static/auto-generated/card/props.md
+++ b/static/auto-generated/card/props.md
@@ -1,121 +1,98 @@
+### button
 
-
-### button 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a button tag will be rendered and the card will be tappable.<br /><br />自動翻訳: `true`の場合、ボタンタグがレンダリングされ、カードはタップ可能になる。 |
-| **Attribute** | `button` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `button`                                                                                                                                                            |
+| **Type**        | `boolean`                                                                                                                                                           |
+| **Default**     | `false`                                                                                                                                                             |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the user cannot interact with the card.<br /><br />自動翻訳: `true`の場合、ユーザはカードと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `disabled`                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                      |
+| **Default**     | `false`                                                                                                                        |
 
+### download
 
-
-### download 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).<br /><br />自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
-| **Attribute** | `download` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `download`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
+### href
 
-### href 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### rel
 
-
-### rel 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
+### routerAnimation
 
-### routerAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition animation when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                |
 
-### routerDirection 
+### routerDirection
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition direction when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。 |
-| **Attribute** | `router-direction` |
-| **Type** | `"back" ｜ "forward" ｜ "root"` |
-| **Default** | `'forward'` |
+| **Attribute**   | `router-direction`                                                                                                                                                                                               |
+| **Type**        | `"back" ｜ "forward" ｜ "root"`                                                                                                                                                                                  |
+| **Default**     | `'forward'`                                                                                                                                                                                                      |
 
+### target
 
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
 
-### target 
+### type
 
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The type of the button. Only used when an `onclick` or `button` property is present.<br /><br />自動翻訳: ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                                                                                                                                                   |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                                                                                                                                                        |
+| **Default**     | `'button'`                                                                                                                                                                               |
diff --git a/static/auto-generated/card/slots.md b/static/auto-generated/card/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/card/slots.md
+++ b/static/auto-generated/card/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/checkbox/custom-props.md b/static/auto-generated/checkbox/custom-props.md
index 73873c93c2d..257df076f7c 100644
--- a/static/auto-generated/checkbox/custom-props.md
+++ b/static/auto-generated/checkbox/custom-props.md
@@ -1,15 +1,13 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンの背景 |
-| `--background-checked` | Background of the checkbox icon when checked<br /><br />自動翻訳: チェックしたときのチェックボックスアイコンの背景 |
-| `--border-color` | Border color of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンのボーダーカラー |
+| Name                     | Description                                                                                                                        |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`           | Background of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンの背景                                                |
+| `--background-checked`   | Background of the checkbox icon when checked<br /><br />自動翻訳: チェックしたときのチェックボックスアイコンの背景                 |
+| `--border-color`         | Border color of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンのボーダーカラー                                    |
 | `--border-color-checked` | Border color of the checkbox icon when checked<br /><br />自動翻訳: チェックボックスのアイコンがチェックされたときのボーダーカラー |
-| `--border-radius` | Border radius of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンの境界半径 |
-| `--border-style` | Border style of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンのボーダースタイル |
-| `--border-width` | Border width of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンのボーダー幅 |
-| `--checkmark-color` | Color of the checkbox checkmark when checked<br /><br />自動翻訳: チェックボックスのチェックマークがチェックされたときの色 |
-| `--checkmark-width` | Stroke width of the checkbox checkmark<br /><br />自動翻訳: チェックボックス・チェックマークのストローク幅 |
-| `--size` | Size of the checkbox icon<br /><br />自動翻訳: チェックボックスのアイコンの大きさ |
-| `--transition` | Transition of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンの遷移 |
-
+| `--border-radius`        | Border radius of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンの境界半径                                         |
+| `--border-style`         | Border style of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンのボーダースタイル                                  |
+| `--border-width`         | Border width of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンのボーダー幅                                        |
+| `--checkmark-color`      | Color of the checkbox checkmark when checked<br /><br />自動翻訳: チェックボックスのチェックマークがチェックされたときの色         |
+| `--checkmark-width`      | Stroke width of the checkbox checkmark<br /><br />自動翻訳: チェックボックス・チェックマークのストローク幅                         |
+| `--size`                 | Size of the checkbox icon<br /><br />自動翻訳: チェックボックスのアイコンの大きさ                                                  |
+| `--transition`           | Transition of the checkbox icon<br /><br />自動翻訳: チェックボックスアイコンの遷移                                                |
diff --git a/static/auto-generated/checkbox/events.md b/static/auto-generated/checkbox/events.md
index bcc6101737e..cf80d2e783f 100644
--- a/static/auto-generated/checkbox/events.md
+++ b/static/auto-generated/checkbox/events.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the checkbox loses focus.<br /><br />自動翻訳: チェックボックスのフォーカスが外れたときに発せられる。 |
+| Name        | Description                                                                                                                |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `ionBlur`   | Emitted when the checkbox loses focus.<br /><br />自動翻訳: チェックボックスのフォーカスが外れたときに発せられる。         |
 | `ionChange` | Emitted when the checked property has changed.<br /><br />自動翻訳: チェックされたプロパティが変更されたときに発行される。 |
-| `ionFocus` | Emitted when the checkbox has focus.<br /><br />自動翻訳: チェックボックスにフォーカスが当たったときに発せられる。 |
-
+| `ionFocus`  | Emitted when the checkbox has focus.<br /><br />自動翻訳: チェックボックスにフォーカスが当たったときに発せられる。         |
diff --git a/static/auto-generated/checkbox/methods.md b/static/auto-generated/checkbox/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/checkbox/methods.md
+++ b/static/auto-generated/checkbox/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/checkbox/parts.md b/static/auto-generated/checkbox/parts.md
index 1faea458301..c765921013e 100644
--- a/static/auto-generated/checkbox/parts.md
+++ b/static/auto-generated/checkbox/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `container` | The container for the checkbox mark.<br /><br />自動翻訳: チェックボックスマークのコンテナです。 |
-| `mark` | The checkmark used to indicate the checked state.<br /><br />自動翻訳: チェックされた状態を示すために使用されるチェックマークです。 |
-
+| Name        | Description                                                                                                                         |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `container` | The container for the checkbox mark.<br /><br />自動翻訳: チェックボックスマークのコンテナです。                                    |
+| `mark`      | The checkmark used to indicate the checked state.<br /><br />自動翻訳: チェックされた状態を示すために使用されるチェックマークです。 |
diff --git a/static/auto-generated/checkbox/props.md b/static/auto-generated/checkbox/props.md
index 32204ff164b..5b94435e58c 100644
--- a/static/auto-generated/checkbox/props.md
+++ b/static/auto-generated/checkbox/props.md
@@ -1,77 +1,62 @@
+### checked
 
-
-### checked 
-
-| | |
-| --- | --- |
+|                 |                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the checkbox is selected.<br /><br />自動翻訳: `true`の場合、チェックボックスが選択される。 |
-| **Attribute** | `checked` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `checked`                                                                                              |
+| **Type**        | `boolean`                                                                                              |
+| **Default**     | `false`                                                                                                |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the checkbox.<br /><br />自動翻訳: `true`の場合、ユーザはチェックボックスと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                                   |
+| **Type**        | `boolean`                                                                                                                                    |
+| **Default**     | `false`                                                                                                                                      |
 
+### indeterminate
 
-### indeterminate 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the checkbox will visually appear as indeterminate.<br /><br />自動翻訳: `true`の場合、チェックボックスは視覚的に不定形と表示されます。 |
-| **Attribute** | `indeterminate` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `indeterminate`                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                          |
+| **Default**     | `false`                                                                                                                                            |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### name
 
-### name 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
-
-
-
-### value 
-
-| | |
-| --- | --- |
-| **Description** | The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.<br /><br />The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.<br /><br />自動翻訳: チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。  チェックボックスの値は `<input type="checkbox">` の値に似ており、チェックボックスがネイティブの `<form>` に参加する場合にのみ使用されます。 |
-| **Attribute** | `value` |
-| **Type** | `any` |
-| **Default** | `'on'` |
-
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
+
+### value
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.<br /><br />The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.<br /><br />自動翻訳: チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。 チェックボックスの値は `<input type="checkbox">` の値に似ており、チェックボックスがネイティブの `<form>` に参加する場合にのみ使用されます。 |
+| **Attribute**   | `value`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `'on'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
diff --git a/static/auto-generated/checkbox/slots.md b/static/auto-generated/checkbox/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/checkbox/slots.md
+++ b/static/auto-generated/checkbox/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/chip/custom-props.md b/static/auto-generated/chip/custom-props.md
index e9dda0219ac..8f818bec62b 100644
--- a/static/auto-generated/chip/custom-props.md
+++ b/static/auto-generated/chip/custom-props.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
+| Name           | Description                                              |
+| -------------- | -------------------------------------------------------- |
 | `--background` | Background of the chip<br /><br />自動翻訳: チップの背景 |
-| `--color` | Color of the chip<br /><br />自動翻訳: チップの色 |
-
+| `--color`      | Color of the chip<br /><br />自動翻訳: チップの色        |
diff --git a/static/auto-generated/chip/events.md b/static/auto-generated/chip/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/chip/events.md
+++ b/static/auto-generated/chip/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/chip/methods.md b/static/auto-generated/chip/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/chip/methods.md
+++ b/static/auto-generated/chip/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/chip/parts.md b/static/auto-generated/chip/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/chip/parts.md
+++ b/static/auto-generated/chip/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/chip/props.md b/static/auto-generated/chip/props.md
index 5f45b4c1ac6..0719c6b2782 100644
--- a/static/auto-generated/chip/props.md
+++ b/static/auto-generated/chip/props.md
@@ -1,44 +1,35 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the user cannot interact with the chip.<br /><br />自動翻訳: `true`の場合、ユーザはチップと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                      |
+| **Default**     | `false`                                                                                                                        |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### outline
 
-### outline 
-
-| | |
-| --- | --- |
+|                 |                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------- |
 | **Description** | Display an outline style button.<br /><br />自動翻訳: アウトラインスタイルボタンを表示する。 |
-| **Attribute** | `outline` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `outline`                                                                                    |
+| **Type**        | `boolean`                                                                                    |
+| **Default**     | `false`                                                                                      |
diff --git a/static/auto-generated/chip/slots.md b/static/auto-generated/chip/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/chip/slots.md
+++ b/static/auto-generated/chip/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/col/custom-props.md b/static/auto-generated/col/custom-props.md
index f51e4b46cdf..b6a88c5a521 100644
--- a/static/auto-generated/col/custom-props.md
+++ b/static/auto-generated/col/custom-props.md
@@ -1,11 +1,9 @@
-
-| Name | Description |
-| --- | --- |
-| `--ion-grid-column-padding` | Padding for the Column<br /><br />自動翻訳: カラムのパディング |
-| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up<br /><br />自動翻訳: LG以上の画面でのコラムのパディング |
-| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up<br /><br />自動翻訳: mdスクリーン以上のカラムのパディングについて |
+| Name                           | Description                                                                                                             |
+| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `--ion-grid-column-padding`    | Padding for the Column<br /><br />自動翻訳: カラムのパディング                                                          |
+| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up<br /><br />自動翻訳: LG 以上の画面でのコラムのパディング                    |
+| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up<br /><br />自動翻訳: md スクリーン以上のカラムのパディングについて          |
 | `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up<br /><br />自動翻訳: スマートフォン以上の画面では、コラムにパッドを入れる。 |
-| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up<br /><br />自動翻訳: XL以上の画面でのカラムのパディングについて |
-| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up<br /><br />自動翻訳: xsスクリーン以上のカラムのパディングについて |
-| `--ion-grid-columns` | The number of total Columns in the Grid<br /><br />自動翻訳: グリッドのカラムの総数 |
-
+| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up<br /><br />自動翻訳: XL 以上の画面でのカラムのパディングについて            |
+| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up<br /><br />自動翻訳: xs スクリーン以上のカラムのパディングについて          |
+| `--ion-grid-columns`           | The number of total Columns in the Grid<br /><br />自動翻訳: グリッドのカラムの総数                                     |
diff --git a/static/auto-generated/col/events.md b/static/auto-generated/col/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/col/events.md
+++ b/static/auto-generated/col/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/col/methods.md b/static/auto-generated/col/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/col/methods.md
+++ b/static/auto-generated/col/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/col/parts.md b/static/auto-generated/col/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/col/parts.md
+++ b/static/auto-generated/col/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/col/props.md b/static/auto-generated/col/props.md
index 6bedcdded8f..a746825a29b 100644
--- a/static/auto-generated/col/props.md
+++ b/static/auto-generated/col/props.md
@@ -1,264 +1,215 @@
+### offset
 
-
-### offset 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | The amount to offset the column, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。 |
-| **Attribute** | `offset` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### offsetLg 
-
-| | |
-| --- | --- |
-| **Description** | The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: Lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `offset-lg` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### offsetMd 
-
-| | |
-| --- | --- |
-| **Description** | The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `offset-md` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### offsetSm 
-
-| | |
-| --- | --- |
-| **Description** | The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `offset-sm` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### offsetXl 
-
-| | |
-| --- | --- |
-| **Description** | The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `offset-xl` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### offsetXs 
-
-| | |
-| --- | --- |
-| **Description** | The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。 |
-| **Attribute** | `offset-xs` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pull 
-
-| | |
-| --- | --- |
+| **Attribute**   | `offset`                                                                                                                                                                                                           |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                        |
+
+### offsetLg
+
+|                 |                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: Lg スクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `offset-lg`                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                    |
+
+### offsetMd
+
+|                 |                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: md スクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `offset-md`                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                    |
+
+### offsetSm
+
+|                 |                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: sm スクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `offset-sm`                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                    |
+
+### offsetXl
+
+|                 |                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xl スクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `offset-xl`                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                    |
+
+### offsetXs
+
+|                 |                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xs 画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。 |
+| **Attribute**   | `offset-xs`                                                                                                                                                                                                                                      |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                            |
+| **Default**     | `undefined`                                                                                                                                                                                                                                      |
+
+### pull
+
+|                 |                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The amount to pull the column, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: 列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。 |
-| **Attribute** | `pull` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pullLg 
-
-| | |
-| --- | --- |
-| **Description** | The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: LGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `pull-lg` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pullMd 
-
-| | |
-| --- | --- |
-| **Description** | The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。 |
-| **Attribute** | `pull-md` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pullSm 
-
-| | |
-| --- | --- |
-| **Description** | The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `pull-sm` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pullXl 
-
-| | |
-| --- | --- |
-| **Description** | The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `pull-xl` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pullXs 
-
-| | |
-| --- | --- |
-| **Description** | The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `pull-xs` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### push 
-
-| | |
-| --- | --- |
+| **Attribute**   | `pull`                                                                                                                                                                                                         |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                    |
+
+### pullLg
+
+|                 |                                                                                                                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: LG スクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `pull-lg`                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                                              |
+
+### pullMd
+
+|                 |                                                                                                                                                                                                                                                            |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: md スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。 |
+| **Attribute**   | `pull-md`                                                                                                                                                                                                                                                  |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                      |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                |
+
+### pullSm
+
+|                 |                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: sm スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `pull-sm`                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                  |
+
+### pullXl
+
+|                 |                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: xl スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `pull-xl`                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                  |
+
+### pullXs
+
+|                 |                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.<br /><br />自動翻訳: xs スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `pull-xs`                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                  |
+
+### push
+
+|                 |                                                                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | The amount to push the column, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `push` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pushLg 
-
-| | |
-| --- | --- |
-| **Description** | The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: LGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。 |
-| **Attribute** | `push-lg` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pushMd 
-
-| | |
-| --- | --- |
-| **Description** | The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。 |
-| **Attribute** | `push-md` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pushSm 
-
-| | |
-| --- | --- |
-| **Description** | The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
-| **Attribute** | `push-sm` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pushXl 
-
-| | |
-| --- | --- |
-| **Description** | The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。 |
-| **Attribute** | `push-xl` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pushXs 
-
-| | |
-| --- | --- |
-| **Description** | The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定する。 |
-| **Attribute** | `push-xs` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### size 
-
-| | |
-| --- | --- |
+| **Attribute**   | `push`                                                                                                                                                                                                             |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                        |
+
+### pushLg
+
+|                 |                                                                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: LG スクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。 |
+| **Attribute**   | `push-lg`                                                                                                                                                                                                                                                        |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                            |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                      |
+
+### pushMd
+
+|                 |                                                                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: md スクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。 |
+| **Attribute**   | `push-md`                                                                                                                                                                                                                                  |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                      |
+| **Default**     | `undefined`                                                                                                                                                                                                                                |
+
+### pushSm
+
+|                 |                                                                                                                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: sm スクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
+| **Attribute**   | `push-sm`                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                                                        |
+
+### pushXl
+
+|                 |                                                                                                                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xl スクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。 |
+| **Attribute**   | `push-xl`                                                                                                                                                                                                                                              |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                                                                                                                            |
+
+### pushXs
+
+|                 |                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.<br /><br />自動翻訳: xs 画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定する。 |
+| **Attribute**   | `push-xs`                                                                                                                                                                                                                  |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                      |
+| **Default**     | `undefined`                                                                                                                                                                                                                |
+
+### size
+
+|                 |                                                                                                                                                                                                                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
-| **Attribute** | `size` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### sizeLg 
-
-| | |
-| --- | --- |
-| **Description** | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
-| **Attribute** | `size-lg` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### sizeMd 
-
-| | |
-| --- | --- |
-| **Description** | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
-| **Attribute** | `size-md` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### sizeSm 
-
-| | |
-| --- | --- |
-| **Description** | The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
-| **Attribute** | `size-sm` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### sizeXl 
-
-| | |
-| --- | --- |
-| **Description** | The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
-| **Attribute** | `size-xl` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### sizeXs 
-
-| | |
-| --- | --- |
-| **Description** | The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズとなる。 |
-| **Attribute** | `size-xs` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `size`                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                       |
+
+### sizeLg
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: lg スクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
+| **Attribute**   | `size-lg`                                                                                                                                                                                                                                                                                                                                                                               |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                             |
+
+### sizeMd
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: md スクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
+| **Attribute**   | `size-md`                                                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                       |
+
+### sizeSm
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: sm スクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
+| **Attribute**   | `size-sm`                                                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                       |
+
+### sizeXl
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: xl スクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 |
+| **Attribute**   | `size-xl`                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                           |
+
+### sizeXs
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.<br /><br />自動翻訳: xs スクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定する。auto"`が渡された場合、カラムはそのコンテンツのサイズとなる。 |
+| **Attribute**   | `size-xs`                                                                                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                               |
diff --git a/static/auto-generated/col/slots.md b/static/auto-generated/col/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/col/slots.md
+++ b/static/auto-generated/col/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/content/custom-props.md b/static/auto-generated/content/custom-props.md
index bdc34d602e5..2144d10f1eb 100644
--- a/static/auto-generated/content/custom-props.md
+++ b/static/auto-generated/content/custom-props.md
@@ -1,13 +1,11 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the content<br /><br />自動翻訳: コンテンツの背景 |
-| `--color` | Color of the content<br /><br />自動翻訳: コンテンツの色 |
-| `--keyboard-offset` | Keyboard offset of the content<br /><br />自動翻訳: コンテンツのキーボードオフセット |
-| `--offset-bottom` | Offset bottom of the content<br /><br />自動翻訳: コンテンツのオフセットボトム |
-| `--offset-top` | Offset top of the content<br /><br />自動翻訳: コンテンツのオフセットトップ |
-| `--padding-bottom` | Bottom padding of the content<br /><br />自動翻訳: コンテンツのボトムパディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content<br /><br />自動翻訳: コンテンツの方向が左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content<br /><br />自動翻訳: コンテンツの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the content<br /><br />自動翻訳: コンテンツのトップパディング |
-
+| Name                | Description                                                                                                                                                                                                        |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--background`      | Background of the content<br /><br />自動翻訳: コンテンツの背景                                                                                                                                                    |
+| `--color`           | Color of the content<br /><br />自動翻訳: コンテンツの色                                                                                                                                                           |
+| `--keyboard-offset` | Keyboard offset of the content<br /><br />自動翻訳: コンテンツのキーボードオフセット                                                                                                                               |
+| `--offset-bottom`   | Offset bottom of the content<br /><br />自動翻訳: コンテンツのオフセットボトム                                                                                                                                     |
+| `--offset-top`      | Offset top of the content<br /><br />自動翻訳: コンテンツのオフセットトップ                                                                                                                                        |
+| `--padding-bottom`  | Bottom padding of the content<br /><br />自動翻訳: コンテンツのボトムパディング                                                                                                                                    |
+| `--padding-end`     | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content<br /><br />自動翻訳: コンテンツの方向が左から右の場合は右パディング、右から左の場合は左パディングとなる |
+| `--padding-start`   | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content<br /><br />自動翻訳: コンテンツの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる |
+| `--padding-top`     | Top padding of the content<br /><br />自動翻訳: コンテンツのトップパディング                                                                                                                                       |
diff --git a/static/auto-generated/content/events.md b/static/auto-generated/content/events.md
index 00114523df2..277a689af4a 100644
--- a/static/auto-generated/content/events.md
+++ b/static/auto-generated/content/events.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `ionScroll` | Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.<br /><br />自動翻訳: スクロール中に発せられる。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。 |
-| `ionScrollEnd` | Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.<br /><br />自動翻訳: スクロールが終了したときに発せられる。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。 |
+| Name             | Description                                                                                                                                                                                                                                                                             |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ionScroll`      | Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.<br /><br />自動翻訳: スクロール中に発せられる。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。                                 |
+| `ionScrollEnd`   | Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.<br /><br />自動翻訳: スクロールが終了したときに発せられる。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。             |
 | `ionScrollStart` | Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.<br /><br />自動翻訳: スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。 |
-
diff --git a/static/auto-generated/content/methods.md b/static/auto-generated/content/methods.md
index c7ab478f41f..fefa43d82a2 100644
--- a/static/auto-generated/content/methods.md
+++ b/static/auto-generated/content/methods.md
@@ -1,42 +1,34 @@
-
-
 ### getScrollElement
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`:<br /><br />i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.<br /><br />自動翻訳: 実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。 |
-| **Signature** | `getScrollElement() => Promise<HTMLElement>` |
-
+| **Signature**   | `getScrollElement() => Promise<HTMLElement>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
 ### scrollByPoint
 
-| | |
-| --- | --- |
-| **Description** | Scroll by a specified X/Y distance in the component.<br /><br />自動翻訳: コンポーネントを指定したX/Y距離だけスクロールさせる。 |
-| **Signature** | `scrollByPoint(x: number, y: number, duration: number) => Promise<void>` |
-
+|                 |                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Scroll by a specified X/Y distance in the component.<br /><br />自動翻訳: コンポーネントを指定した X/Y 距離だけスクロールさせる。 |
+| **Signature**   | `scrollByPoint(x: number, y: number, duration: number) => Promise<void>`                                                          |
 
 ### scrollToBottom
 
-| | |
-| --- | --- |
+|                 |                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------- |
 | **Description** | Scroll to the bottom of the component.<br /><br />自動翻訳: コンポーネントの一番下までスクロールします。 |
-| **Signature** | `scrollToBottom(duration?: number) => Promise<void>` |
-
+| **Signature**   | `scrollToBottom(duration?: number) => Promise<void>`                                                     |
 
 ### scrollToPoint
 
-| | |
-| --- | --- |
-| **Description** | Scroll to a specified X/Y location in the component.<br /><br />自動翻訳: コンポーネント内の指定したX/Y位置までスクロールする。 |
-| **Signature** | `scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>` |
-
+|                 |                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Scroll to a specified X/Y location in the component.<br /><br />自動翻訳: コンポーネント内の指定した X/Y 位置までスクロールする。 |
+| **Signature**   | `scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>`               |
 
 ### scrollToTop
 
-| | |
-| --- | --- |
+|                 |                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------- |
 | **Description** | Scroll to the top of the component.<br /><br />自動翻訳: コンポーネントの上部にスクロールします。 |
-| **Signature** | `scrollToTop(duration?: number) => Promise<void>` |
-
-
+| **Signature**   | `scrollToTop(duration?: number) => Promise<void>`                                                 |
diff --git a/static/auto-generated/content/parts.md b/static/auto-generated/content/parts.md
index 570387da87e..8f3a5ba9636 100644
--- a/static/auto-generated/content/parts.md
+++ b/static/auto-generated/content/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `background` | The background of the content.<br /><br />自動翻訳: コンテンツの背景です。 |
-| `scroll` | The scrollable container of the content.<br /><br />自動翻訳: コンテンツのスクロール可能なコンテナ。 |
-
+| Name         | Description                                                                                          |
+| ------------ | ---------------------------------------------------------------------------------------------------- |
+| `background` | The background of the content.<br /><br />自動翻訳: コンテンツの背景です。                           |
+| `scroll`     | The scrollable container of the content.<br /><br />自動翻訳: コンテンツのスクロール可能なコンテナ。 |
diff --git a/static/auto-generated/content/props.md b/static/auto-generated/content/props.md
index 6c4935ba738..1b7d4ad3b38 100644
--- a/static/auto-generated/content/props.md
+++ b/static/auto-generated/content/props.md
@@ -1,66 +1,53 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### forceOverscroll 
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-| | |
-| --- | --- |
-| **Description** | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.<br /><br />自動翻訳: `true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。 |
-| **Attribute** | `force-overscroll` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
+### forceOverscroll
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.<br /><br />自動翻訳: `true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツが ionContent の境界を超えた場合、何も変化しません。iOS のシステムバウンスを無効にしないことに注意してください。これは OS レベルの設定です。 |
+| **Attribute**   | `force-overscroll`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
+### fullscreen
 
-### fullscreen 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.<br /><br />自動翻訳: `true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。 |
-| **Attribute** | `fullscreen` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### scrollEvents 
-
-| | |
-| --- | --- |
-| **Description** | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.<br /><br />自動翻訳: パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。 |
-| **Attribute** | `scroll-events` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### scrollX 
-
-| | |
-| --- | --- |
-| **Description** | If you want to enable the content scrolling in the X axis, set this property to `true`.<br /><br />自動翻訳: X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。 |
-| **Attribute** | `scroll-x` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### scrollY 
-
-| | |
-| --- | --- |
-| **Description** | If you want to disable the content scrolling in the Y axis, set this property to `false`.<br /><br />自動翻訳: Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。 |
-| **Attribute** | `scroll-y` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `fullscreen`                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                          |
+
+### scrollEvents
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.<br /><br />自動翻訳: パフォーマンス上の理由から、ionScroll イベントはデフォルトで無効になっています。ionScroll イベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。 |
+| **Attribute**   | `scroll-events`                                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                               |
+
+### scrollX
+
+|                 |                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If you want to enable the content scrolling in the X axis, set this property to `true`.<br /><br />自動翻訳: X 軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。 |
+| **Attribute**   | `scroll-x`                                                                                                                                                                                            |
+| **Type**        | `boolean`                                                                                                                                                                                             |
+| **Default**     | `false`                                                                                                                                                                                               |
+
+### scrollY
+
+|                 |                                                                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If you want to disable the content scrolling in the Y axis, set this property to `false`.<br /><br />自動翻訳: Y 軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。 |
+| **Attribute**   | `scroll-y`                                                                                                                                                                                               |
+| **Type**        | `boolean`                                                                                                                                                                                                |
+| **Default**     | `true`                                                                                                                                                                                                   |
diff --git a/static/auto-generated/content/slots.md b/static/auto-generated/content/slots.md
index a3b53570d45..a89a2086ec1 100644
--- a/static/auto-generated/content/slots.md
+++ b/static/auto-generated/content/slots.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed in the scrollable area if provided without a slot.<br /><br />自動翻訳: スロットなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。 |
-| `fixed` | Should be used for fixed content that should not scroll.<br /><br />自動翻訳: スクロールしてはいけない固定コンテンツに使用する必要があります。 |
-
+| Name    | Description                                                                                                                                                              |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ``      | Content is placed in the scrollable area if provided without a slot.<br /><br />自動翻訳: スロットなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。 |
+| `fixed` | Should be used for fixed content that should not scroll.<br /><br />自動翻訳: スクロールしてはいけない固定コンテンツに使用する必要があります。                           |
diff --git a/static/auto-generated/datetime-button/custom-props.md b/static/auto-generated/datetime-button/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/datetime-button/custom-props.md
+++ b/static/auto-generated/datetime-button/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/datetime-button/events.md b/static/auto-generated/datetime-button/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/datetime-button/events.md
+++ b/static/auto-generated/datetime-button/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/datetime-button/methods.md b/static/auto-generated/datetime-button/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/datetime-button/methods.md
+++ b/static/auto-generated/datetime-button/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/datetime-button/parts.md b/static/auto-generated/datetime-button/parts.md
index 06903d5d2cf..069a08ae766 100644
--- a/static/auto-generated/datetime-button/parts.md
+++ b/static/auto-generated/datetime-button/parts.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `native` | The native HTML button that wraps the slotted text.<br /><br />自動翻訳: スロットされたテキストをラップするネイティブHTMLボタンです。 |
-
+| Name     | Description                                                                                                                             |
+| -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `native` | The native HTML button that wraps the slotted text.<br /><br />自動翻訳: スロットされたテキストをラップするネイティブ HTML ボタンです。 |
diff --git a/static/auto-generated/datetime-button/props.md b/static/auto-generated/datetime-button/props.md
index 2648d6818cc..7b9bc16badf 100644
--- a/static/auto-generated/datetime-button/props.md
+++ b/static/auto-generated/datetime-button/props.md
@@ -1,44 +1,35 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `'primary'` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `'primary'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### datetime
 
-### datetime 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | The ID of the `ion-datetime` instance associated with the datetime button.<br /><br />自動翻訳: datetime ボタンに関連付けられた `ion-datetime` インスタンスの ID。 |
-| **Attribute** | `datetime` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `datetime`                                                                                                                                                         |
+| **Type**        | `string ｜ undefined`                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                        |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the button.<br /><br />自動翻訳: `true`の場合、ユーザはボタンと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                        |
+| **Default**     | `false`                                                                                                                          |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/datetime-button/slots.md b/static/auto-generated/datetime-button/slots.md
index d31bf9d2609..e4864cd4a17 100644
--- a/static/auto-generated/datetime-button/slots.md
+++ b/static/auto-generated/datetime-button/slots.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
+| Name          | Description                                                                                                    |
+| ------------- | -------------------------------------------------------------------------------------------------------------- |
 | `date-target` | Content displayed inside of the date button.<br /><br />自動翻訳: 日付ボタンの内側に表示されるコンテンツです。 |
-| `time-target` | Content displayed inside of the time button.<br /><br />自動翻訳: 時刻ボタンの内側に表示される内容。 |
-
+| `time-target` | Content displayed inside of the time button.<br /><br />自動翻訳: 時刻ボタンの内側に表示される内容。           |
diff --git a/static/auto-generated/datetime/custom-props.md b/static/auto-generated/datetime/custom-props.md
index f618fc9b8d8..9492f2f3b17 100644
--- a/static/auto-generated/datetime/custom-props.md
+++ b/static/auto-generated/datetime/custom-props.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | The primary background of the datetime component.<br /><br />自動翻訳: datetimeコンポーネントの主な背景。 |
-| `--background-rgb` | The primary background of the datetime component in RGB format.<br /><br />自動翻訳: datetimeコンポーネントの主な背景をRGBフォーマットで示す。 |
-| `--title-color` | The text color of the title.<br /><br />自動翻訳: タイトルの文字色です。 |
-
+| Name               | Description                                                                                                                                       |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`     | The primary background of the datetime component.<br /><br />自動翻訳: datetime コンポーネントの主な背景。                                        |
+| `--background-rgb` | The primary background of the datetime component in RGB format.<br /><br />自動翻訳: datetime コンポーネントの主な背景を RGB フォーマットで示す。 |
+| `--title-color`    | The text color of the title.<br /><br />自動翻訳: タイトルの文字色です。                                                                          |
diff --git a/static/auto-generated/datetime/events.md b/static/auto-generated/datetime/events.md
index 2714bb37334..0efd1397a62 100644
--- a/static/auto-generated/datetime/events.md
+++ b/static/auto-generated/datetime/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the datetime loses focus.<br /><br />自動翻訳: datetimeのフォーカスが外れたときに発せられる。 |
-| `ionCancel` | Emitted when the datetime selection was cancelled.<br /><br />自動翻訳: datetimeの選択がキャンセルされたときに発生する。 |
+| Name        | Description                                                                                                               |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `ionBlur`   | Emitted when the datetime loses focus.<br /><br />自動翻訳: datetime のフォーカスが外れたときに発せられる。               |
+| `ionCancel` | Emitted when the datetime selection was cancelled.<br /><br />自動翻訳: datetime の選択がキャンセルされたときに発生する。 |
 | `ionChange` | Emitted when the value (selected date) has changed.<br /><br />自動翻訳: 値（選択された日付）が変化したときに発せられる。 |
-| `ionFocus` | Emitted when the datetime has focus.<br /><br />自動翻訳: datetimeにフォーカスが当たったときに発行される。 |
-
+| `ionFocus`  | Emitted when the datetime has focus.<br /><br />自動翻訳: datetime にフォーカスが当たったときに発行される。               |
diff --git a/static/auto-generated/datetime/methods.md b/static/auto-generated/datetime/methods.md
index be3bfb42191..84601c7911b 100644
--- a/static/auto-generated/datetime/methods.md
+++ b/static/auto-generated/datetime/methods.md
@@ -1,26 +1,20 @@
-
-
 ### cancel
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.<br /><br />自動翻訳: ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。 |
-| **Signature** | `cancel(closeOverlay?: boolean) => Promise<void>` |
-
+| **Signature**   | `cancel(closeOverlay?: boolean) => Promise<void>`                                                                                                                                                                                    |
 
 ### confirm
 
-| | |
-| --- | --- |
-| **Description** | Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.<br /><br />自動翻訳: 選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。 |
-| **Signature** | `confirm(closeOverlay?: boolean) => Promise<void>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.<br /><br />自動翻訳: 選択された datetime の値を確認し、`value`プロパティを更新し、オプションで datetime が表示されていたポップオーバーまたはモーダルを閉じます。 |
+| **Signature**   | `confirm(closeOverlay?: boolean) => Promise<void>`                                                                                                                                                                                                                                                                  |
 
 ### reset
 
-| | |
-| --- | --- |
-| **Description** | Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.<br /><br />自動翻訳: datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。 |
-| **Signature** | `reset(startDate?: string) => Promise<void>` |
-
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.<br /><br />自動翻訳: datetime の内部状態をリセットするが、値は更新しない。有効な ISO-8601 文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態は min、max、today のクランプされた値にリセットされます。 |
+| **Signature**   | `reset(startDate?: string) => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
diff --git a/static/auto-generated/datetime/parts.md b/static/auto-generated/datetime/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/datetime/parts.md
+++ b/static/auto-generated/datetime/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/datetime/props.md b/static/auto-generated/datetime/props.md
index ac4785523b5..7e684f36549 100644
--- a/static/auto-generated/datetime/props.md
+++ b/static/auto-generated/datetime/props.md
@@ -1,330 +1,269 @@
+### cancelText
 
-
-### cancelText 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The text to display on the picker's cancel button.<br /><br />自動翻訳: ピッカーのキャンセルボタンに表示するテキストです。 |
-| **Attribute** | `cancel-text` |
-| **Type** | `string` |
-| **Default** | `'Cancel'` |
-
-
+| **Attribute**   | `cancel-text`                                                                                                              |
+| **Type**        | `string`                                                                                                                   |
+| **Default**     | `'Cancel'`                                                                                                                 |
 
-### clearText 
+### clearText
 
-| | |
-| --- | --- |
+|                 |                                                                                                                             |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The text to display on the picker's "Clear" button.<br /><br />自動翻訳: ピッカーの「クリア」ボタンに表示するテキストです。 |
-| **Attribute** | `clear-text` |
-| **Type** | `string` |
-| **Default** | `'Clear'` |
+| **Attribute**   | `clear-text`                                                                                                                |
+| **Type**        | `string`                                                                                                                    |
+| **Default**     | `'Clear'`                                                                                                                   |
 
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `'primary'` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `'primary'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### dayValues 
+### dayValues
 
-| | |
-| --- | --- |
-| **Description** | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.<br /><br />自動翻訳: 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列のdayが2月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。 |
-| **Attribute** | `day-values` |
-| **Type** | `number ｜ number[] ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.<br /><br />自動翻訳: 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列の day が 2 月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。 |
+| **Attribute**   | `day-values`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `number ｜ number[] ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
+### disabled
 
+|                 |                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the user cannot interact with the datetime.<br /><br />自動翻訳: `true`の場合、ユーザは datetime を操作することができない。 |
+| **Attribute**   | `disabled`                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                              |
+| **Default**     | `false`                                                                                                                                |
 
-### disabled 
+### doneText
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the user cannot interact with the datetime.<br /><br />自動翻訳: `true`の場合、ユーザはdatetimeを操作することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### doneText 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                      |
+| --------------- | -------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The text to display on the picker's "Done" button.<br /><br />自動翻訳: ピッカーの "Done "ボタンに表示するテキスト。 |
-| **Attribute** | `done-text` |
-| **Type** | `string` |
-| **Default** | `'Done'` |
+| **Attribute**   | `done-text`                                                                                                          |
+| **Type**        | `string`                                                                                                             |
+| **Default**     | `'Done'`                                                                                                             |
 
+### firstDayOfWeek
 
-
-### firstDayOfWeek 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.<br /><br />自動翻訳: ion-datetime`に使用する週の最初の曜日を指定する。デフォルト値は `0` で、日曜日を表す。 |
-| **Attribute** | `first-day-of-week` |
-| **Type** | `number` |
-| **Default** | `0` |
-
-
+| **Attribute**   | `first-day-of-week`                                                                                                                                                                                              |
+| **Type**        | `number`                                                                                                                                                                                                         |
+| **Default**     | `0`                                                                                                                                                                                                              |
 
-### highlightedDates 
+### highlightedDates
 
-| | |
-| --- | --- |
-| **Description** | Used to apply custom text and background colors to specific dates.<br /><br />Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.<br /><br />Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.<br /><br />自動翻訳: 特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel="false"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。 |
-| **Attribute** | `undefined` |
-| **Type** | `((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Used to apply custom text and background colors to specific dates.<br /><br />Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.<br /><br />Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.<br /><br />自動翻訳: 特定の日付にカスタムテキストと背景色を適用するために使用します。 ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。 preferWheel="false"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 
+### hourCycle
 
-
-### hourCycle 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.<br /><br />自動翻訳: ion-datetime`の時間周期を指定する。値が設定されていない場合、現在のロケールによって指定される。 |
-| **Attribute** | `hour-cycle` |
-| **Type** | `"h12" ｜ "h23" ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### hourValues 
-
-| | |
-| --- | --- |
-| **Description** | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.<br /><br />自動翻訳: 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24時間制の場合は `0` から `23` まで、12時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。 |
-| **Attribute** | `hour-values` |
-| **Type** | `number ｜ number[] ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `hour-cycle`                                                                                                                                                                                                            |
+| **Type**        | `"h12" ｜ "h23" ｜ undefined`                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                             |
 
-### isDateEnabled 
+### hourValues
 
-| | |
-| --- | --- |
-| **Description** | Returns if an individual date (calendar day) is enabled or disabled.<br /><br />If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.<br /><br />The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.<br /><br />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.<br /><br />自動翻訳: 個々の日付(暦日)が有効か無効かを返す。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブである。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。 |
-| **Attribute** | `undefined` |
-| **Type** | `((dateIsoString: string) => boolean) ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.<br /><br />自動翻訳: 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24 時間制の場合は `0` から `23` まで、12 時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。 |
+| **Attribute**   | `hour-values`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `number ｜ number[] ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
+### isDateEnabled
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns if an individual date (calendar day) is enabled or disabled.<br /><br />If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.<br /><br />The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.<br /><br />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.<br /><br />自動翻訳: 個々の日付(暦日)が有効か無効かを返す。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブである。 この関数は、指定された日の ISO 8601 の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。 この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Type**        | `((dateIsoString: string) => boolean) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
-### locale 
+### locale
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.<br /><br />自動翻訳: ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。 |
-| **Attribute** | `locale` |
-| **Type** | `string` |
-| **Default** | `'default'` |
-
-
-
-### max 
-
-| | |
-| --- | --- |
-| **Description** | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.<br /><br />自動翻訳: 許容される最大のdatetimeを指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。 |
-| **Attribute** | `max` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### min 
+| **Attribute**   | `locale`                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `'default'`                                                                                                                                                                                                                                                                                                                                          |
 
-| | |
-| --- | --- |
-| **Description** | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.<br /><br />自動翻訳: 許容される最小のdatetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでよい。デフォルトは、今日から100年前の年頭です。 |
-| **Attribute** | `min` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### max
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.<br /><br />自動翻訳: 許容される最大の datetime を指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。 |
+| **Attribute**   | `max`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
+### min
 
-### minuteValues 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.<br /><br />自動翻訳: 許容される最小の datetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでよい。デフォルトは、今日から 100 年前の年頭です。 |
+| **Attribute**   | `min`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
-| | |
-| --- | --- |
-| **Description** | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.<br /><br />自動翻訳: 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を15分ごとに行う場合は、 `minuteValues="0,15,30,45"` と入力することになります。 |
-| **Attribute** | `minute-values` |
-| **Type** | `number ｜ number[] ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+### minuteValues
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.<br /><br />自動翻訳: 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を 15 分ごとに行う場合は、 `minuteValues="0,15,30,45"` と入力することになります。 |
+| **Attribute**   | `minute-values`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `number ｜ number[] ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
-
-### monthValues 
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-| | |
-| --- | --- |
-| **Description** | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.<br /><br />自動翻訳: 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues="6,7,8"` となります。つまり、1月の値は `1` であり、12月の値は `12` です。 |
-| **Attribute** | `month-values` |
-| **Type** | `number ｜ number[] ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+### monthValues
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do _not_ have a zero-based index, meaning January's value is `1`, and December's is `12`.<br /><br />自動翻訳: 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues`入力には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues="6,7,8"` となります。つまり、1 月の値は `1` であり、12 月の値は `12` です。 |
+| **Attribute**   | `month-values`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Type**        | `number ｜ number[] ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 
+### multiple
 
-### multiple 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.<br /><br />自動翻訳: `true`の場合、複数の日付を一度に選択することができる。presentation="date"`と `preferWheel="false"` にのみ適用される。 |
-| **Attribute** | `multiple` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `multiple`                                                                                                                                                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                      |
+| **Default**     | `false`                                                                                                                                                                                                                                                        |
 
+### name
 
-### name 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
-
-
-
-### preferWheel 
-
-| | |
-| --- | --- |
-| **Description** | If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.<br /><br />A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.<br /><br />A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.<br /><br />自動翻訳: `true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。time'`, `month'`, `'month-year'`, または `-year'`. |
-| **Attribute** | `prefer-wheel` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### presentation 
-
-| | |
-| --- | --- |
-| **Description** | Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.<br /><br />自動翻訳: どの値を選択するか。date'`はカレンダーピッカーを表示し、月、日、年を選択します。time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。'time-date'`は時間ピッカーを最初に、日付ピッカーを2番目に表示します。 |
-| **Attribute** | `presentation` |
-| **Type** | `"date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year"` |
-| **Default** | `'date-time'` |
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
 
+### preferWheel
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.<br /><br />A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.<br /><br />A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.<br /><br />自動翻訳: `true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。 ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます。presentation`が `'date'`, `'date-time'`, または `'time-date'`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます。time'`, `month'`, `'month-year'`, または `-year'`. |
+| **Attribute**   | `prefer-wheel`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
-### readonly 
+### presentation
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the datetime appears normal but is not interactive.<br /><br />自動翻訳: `true`の場合、datetimeは正常に表示されるが、インタラクティブにはならない。 |
-| **Attribute** | `readonly` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.<br /><br />自動翻訳: どの値を選択するか。date'`はカレンダーピッカーを表示し、月、日、年を選択します。time'`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PM を選択します。date-time'`は日付ピッカーを最初に表示し、時間ピッカーを次に表示します。'time-date'`は時間ピッカーを最初に、日付ピッカーを 2 番目に表示します。 |
+| **Attribute**   | `presentation`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `"date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `'date-time'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
+### readonly
 
+|                 |                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the datetime appears normal but is not interactive.<br /><br />自動翻訳: `true`の場合、datetime は正常に表示されるが、インタラクティブにはならない。 |
+| **Attribute**   | `readonly`                                                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                                                       |
+| **Default**     | `false`                                                                                                                                                         |
 
-### showClearButton 
+### showClearButton
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.<br /><br />自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの "Cancel "と "OK "ボタンと一緒に "Clear "ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` スロットを使用することもできる。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。 |
-| **Attribute** | `show-clear-button` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `show-clear-button`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
+### showDefaultButtons
 
-
-### showDefaultButtons 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.<br /><br />自動翻訳: `true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの "Cancel" と "OK" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`スロットを使用することもできます。カスタムボタンが `button` スロットに設定されている場合、デフォルトのボタンはレンダリングされません。 |
-| **Attribute** | `show-default-buttons` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `show-default-buttons`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 
-### showDefaultTimeLabel 
+### showDefaultTimeLabel
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.<br /><br />自動翻訳: `true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの "Time "ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`スロットを使用することもできます。time-label`スロットにカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。 |
-| **Attribute** | `show-default-time-label` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `show-default-time-label`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
+### showDefaultTitle
 
-
-### showDefaultTitle 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.<br /><br />自動翻訳: `true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、スロットされたタイトルと、選択された日付の両方が含まれます。 |
-| **Attribute** | `show-default-title` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `show-default-title`                                                                                                                                                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                               |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                 |
 
-### size 
+### size
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.<br /><br />自動翻訳: cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。fixed`の場合、`ion-datetime`は固定幅になる。 |
-| **Attribute** | `size` |
-| **Type** | `"cover" ｜ "fixed"` |
-| **Default** | `'fixed'` |
+| **Attribute**   | `size`                                                                                                                                                                                                                                                                             |
+| **Type**        | `"cover" ｜ "fixed"`                                                                                                                                                                                                                                                               |
+| **Default**     | `'fixed'`                                                                                                                                                                                                                                                                          |
 
+### titleSelectedDatesFormatter
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".<br /><br />自動翻訳: 選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が 0 または 1 以上の場合のみ使用されます（つまり、ちょうど 1 の場合は未使用です）。デフォルトでは、ヘッダーテキストは "numberOfDates days "に設定されています。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `((selectedDates: string[]) => string) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
-### titleSelectedDatesFormatter 
+### value
 
-| | |
-| --- | --- |
-| **Description** | A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".<br /><br />自動翻訳: 選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは "numberOfDates days "に設定されています。 |
-| **Attribute** | `undefined` |
-| **Type** | `((selectedDates: string[]) => string) ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple="true"`.<br /><br />自動翻訳: datetime の値を有効な ISO 8601 datetime 文字列として指定する。multiple="true"`の場合は、文字列の配列とする必要がある。 |
+| **Attribute**   | `value`                                                                                                                                                                                                                                                        |
+| **Type**        | `null ｜ string ｜ string[] ｜ undefined`                                                                                                                                                                                                                      |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                    |
 
+### yearValues
 
-
-### value 
-
-| | |
-| --- | --- |
-| **Description** | The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple="true"`.<br /><br />自動翻訳: datetimeの値を有効なISO 8601 datetime文字列として指定する。multiple="true"`の場合は、文字列の配列とする必要がある。 |
-| **Attribute** | `value` |
-| **Type** | `null ｜ string ｜ string[] ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### yearValues 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.<br /><br />自動翻訳: 選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` 入力には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues="2024,2020,2016,2012,2008"` となります。 |
-| **Attribute** | `year-values` |
-| **Type** | `number ｜ number[] ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `year-values`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `number ｜ number[] ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
diff --git a/static/auto-generated/datetime/slots.md b/static/auto-generated/datetime/slots.md
index 0e51cc62aec..51ffba14b22 100644
--- a/static/auto-generated/datetime/slots.md
+++ b/static/auto-generated/datetime/slots.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `buttons` | The buttons in the datetime.<br /><br />自動翻訳: datetimeのボタンです。 |
-| `time-label` | The label for the time selector in the datetime.<br /><br />自動翻訳: datetimeの時間セレクタのラベルです。 |
-| `title` | The title of the datetime.<br /><br />自動翻訳: datetimeのタイトルです。 |
-
+| Name         | Description                                                                                                 |
+| ------------ | ----------------------------------------------------------------------------------------------------------- |
+| `buttons`    | The buttons in the datetime.<br /><br />自動翻訳: datetime のボタンです。                                   |
+| `time-label` | The label for the time selector in the datetime.<br /><br />自動翻訳: datetime の時間セレクタのラベルです。 |
+| `title`      | The title of the datetime.<br /><br />自動翻訳: datetime のタイトルです。                                   |
diff --git a/static/auto-generated/fab-button/custom-props.md b/static/auto-generated/fab-button/custom-props.md
index dbb4786a050..57645d1d700 100644
--- a/static/auto-generated/fab-button/custom-props.md
+++ b/static/auto-generated/fab-button/custom-props.md
@@ -1,27 +1,25 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the button<br /><br />自動翻訳: ボタンの背景 |
-| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。 |
-| `--background-activated-opacity` | Opacity of the button background when pressed<br /><br />自動翻訳: 押されたときのボタンの背景の不透明度 |
-| `--background-focused` | Background of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景 |
-| `--background-focused-opacity` | Opacity of the button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度 |
-| `--background-hover` | Background of the button on hover<br /><br />自動翻訳: ホバー時のボタンの背景 |
-| `--background-hover-opacity` | Opacity of the button background on hover<br /><br />自動翻訳: ホバー時のボタン背景の不透明度 |
-| `--border-color` | Border color of the button<br /><br />自動翻訳: ボタンのボーダーカラー |
-| `--border-radius` | Border radius of the button<br /><br />自動翻訳: ボタンの境界半径 |
-| `--border-style` | Border style of the button<br /><br />自動翻訳: ボタンのボーダースタイル |
-| `--border-width` | Border width of the button<br /><br />自動翻訳: ボタンのボーダー幅 |
-| `--box-shadow` | Box shadow of the button<br /><br />自動翻訳: ボタンのボックスシャドウ |
-| `--close-icon-font-size` | Font size of the close icon<br /><br />自動翻訳: クローズアイコンのフォントサイズ |
-| `--color` | Text color of the button<br /><br />自動翻訳: ボタンの文字色 |
-| `--color-activated` | Text color of the button when pressed<br /><br />自動翻訳: ボタンが押されたときの文字色 |
-| `--color-focused` | Text color of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの文字色 |
-| `--color-hover` | Text color of the button on hover<br /><br />自動翻訳: ホバー時のボタンの文字色 |
-| `--padding-bottom` | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング |
-| `--ripple-color` | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色 |
-| `--transition` | Transition of the button<br /><br />自動翻訳: ボタンの遷移 |
-
+| Name                             | Description                                                                                                                                                                                                               |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the button<br /><br />自動翻訳: ボタンの背景                                                                                                                                                                |
+| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: ボタンが押されたときの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。 |
+| `--background-activated-opacity` | Opacity of the button background when pressed<br /><br />自動翻訳: 押されたときのボタンの背景の不透明度                                                                                                                   |
+| `--background-focused`           | Background of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景                                                                                                    |
+| `--background-focused-opacity`   | Opacity of the button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの背景の不透明度                                                                                  |
+| `--background-hover`             | Background of the button on hover<br /><br />自動翻訳: ホバー時のボタンの背景                                                                                                                                             |
+| `--background-hover-opacity`     | Opacity of the button background on hover<br /><br />自動翻訳: ホバー時のボタン背景の不透明度                                                                                                                             |
+| `--border-color`                 | Border color of the button<br /><br />自動翻訳: ボタンのボーダーカラー                                                                                                                                                    |
+| `--border-radius`                | Border radius of the button<br /><br />自動翻訳: ボタンの境界半径                                                                                                                                                         |
+| `--border-style`                 | Border style of the button<br /><br />自動翻訳: ボタンのボーダースタイル                                                                                                                                                  |
+| `--border-width`                 | Border width of the button<br /><br />自動翻訳: ボタンのボーダー幅                                                                                                                                                        |
+| `--box-shadow`                   | Box shadow of the button<br /><br />自動翻訳: ボタンのボックスシャドウ                                                                                                                                                    |
+| `--close-icon-font-size`         | Font size of the close icon<br /><br />自動翻訳: クローズアイコンのフォントサイズ                                                                                                                                         |
+| `--color`                        | Text color of the button<br /><br />自動翻訳: ボタンの文字色                                                                                                                                                              |
+| `--color-activated`              | Text color of the button when pressed<br /><br />自動翻訳: ボタンが押されたときの文字色                                                                                                                                   |
+| `--color-focused`                | Text color of the button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのボタンの文字色                                                                                                  |
+| `--color-hover`                  | Text color of the button on hover<br /><br />自動翻訳: ホバー時のボタンの文字色                                                                                                                                           |
+| `--padding-bottom`               | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング                                                                                                                                                    |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる             |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる             |
+| `--padding-top`                  | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング                                                                                                                                                     |
+| `--ripple-color`                 | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色                                                                                                                                         |
+| `--transition`                   | Transition of the button<br /><br />自動翻訳: ボタンの遷移                                                                                                                                                                |
diff --git a/static/auto-generated/fab-button/events.md b/static/auto-generated/fab-button/events.md
index b31ef92d9d7..e2d31bce301 100644
--- a/static/auto-generated/fab-button/events.md
+++ b/static/auto-generated/fab-button/events.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the button loses focus.<br /><br />自動翻訳: ボタンのフォーカスが外れたときに発せられる。 |
+| Name       | Description                                                                                                |
+| ---------- | ---------------------------------------------------------------------------------------------------------- |
+| `ionBlur`  | Emitted when the button loses focus.<br /><br />自動翻訳: ボタンのフォーカスが外れたときに発せられる。     |
 | `ionFocus` | Emitted when the button has focus.<br /><br />自動翻訳: ボタンにフォーカスが当たっているときに発せられる。 |
-
diff --git a/static/auto-generated/fab-button/methods.md b/static/auto-generated/fab-button/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/fab-button/methods.md
+++ b/static/auto-generated/fab-button/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/fab-button/parts.md b/static/auto-generated/fab-button/parts.md
index a42ffd03928..fe029074fcd 100644
--- a/static/auto-generated/fab-button/parts.md
+++ b/static/auto-generated/fab-button/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `close-icon` | The close icon that is displayed when a fab list opens (uses ion-icon).<br /><br />自動翻訳: ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。 |
-| `native` | The native HTML button or anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。 |
-
+| Name         | Description                                                                                                                                                                  |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `close-icon` | The close icon that is displayed when a fab list opens (uses ion-icon).<br /><br />自動翻訳: ファブリストを開いたときに表示されるクローズアイコン（ion-icon を使用します）。 |
+| `native`     | The native HTML button or anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブ HTML のボタンまたはアンカー要素です。      |
diff --git a/static/auto-generated/fab-button/props.md b/static/auto-generated/fab-button/props.md
index 8bdf2f60961..54eef36e934 100644
--- a/static/auto-generated/fab-button/props.md
+++ b/static/auto-generated/fab-button/props.md
@@ -1,165 +1,134 @@
+### activated
 
-
-### activated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the fab button will be show a close icon.<br /><br />自動翻訳: `true`の場合、ファブボタンにクローズアイコンを表示します。 |
-| **Attribute** | `activated` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `activated`                                                                                                                          |
+| **Type**        | `boolean`                                                                                                                            |
+| **Default**     | `false`                                                                                                                              |
 
-### closeIcon 
+### closeIcon
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.<br /><br />自動翻訳: クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。 |
-| **Attribute** | `close-icon` |
-| **Type** | `string` |
-| **Default** | `close` |
+| **Attribute**   | `close-icon`                                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `close`                                                                                                                                                                                                                                                                                                                                              |
 
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the fab button.<br /><br />自動翻訳: `true`の場合、ユーザーはファブボタンを操作することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `disabled`                                                                                                                                   |
+| **Type**        | `boolean`                                                                                                                                    |
+| **Default**     | `false`                                                                                                                                      |
 
+### download
 
-
-### download 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).<br /><br />自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
-| **Attribute** | `download` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `download`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
-### href 
+### href
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-### rel 
+### rel
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
+### routerAnimation
 
-
-### routerAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition animation when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                |
 
-### routerDirection 
+### routerDirection
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition direction when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。 |
-| **Attribute** | `router-direction` |
-| **Type** | `"back" ｜ "forward" ｜ "root"` |
-| **Default** | `'forward'` |
-
-
-
-### show 
-
-| | |
-| --- | --- |
-| **Description** | If `true`, the fab button will show when in a fab-list.<br /><br />自動翻訳: `true`の場合、fabボタンがfab-listにあるときに表示されます。 |
-| **Attribute** | `show` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `router-direction`                                                                                                                                                                                               |
+| **Type**        | `"back" ｜ "forward" ｜ "root"`                                                                                                                                                                                  |
+| **Default**     | `'forward'`                                                                                                                                                                                                      |
 
+### show
 
+|                 |                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the fab button will show when in a fab-list.<br /><br />自動翻訳: `true`の場合、fab ボタンが fab-list にあるときに表示されます。 |
+| **Attribute**   | `show`                                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                                   |
+| **Default**     | `false`                                                                                                                                     |
 
-### size 
+### size
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The size of the button. Set this to `small` in order to have a mini fab button.<br /><br />自動翻訳: ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。 |
-| **Attribute** | `size` |
-| **Type** | `"small" ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `size`                                                                                                                                                                             |
+| **Type**        | `"small" ｜ undefined`                                                                                                                                                             |
+| **Default**     | `undefined`                                                                                                                                                                        |
 
+### target
 
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
 
-### target 
+### translucent
 
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### translucent 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、ファブボタンが半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
+### type
 
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | The type of the button.<br /><br />自動翻訳: ボタンの種類です。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                          |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                               |
+| **Default**     | `'button'`                                                      |
diff --git a/static/auto-generated/fab-button/slots.md b/static/auto-generated/fab-button/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/fab-button/slots.md
+++ b/static/auto-generated/fab-button/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/fab-list/custom-props.md b/static/auto-generated/fab-list/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/fab-list/custom-props.md
+++ b/static/auto-generated/fab-list/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/fab-list/events.md b/static/auto-generated/fab-list/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/fab-list/events.md
+++ b/static/auto-generated/fab-list/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/fab-list/methods.md b/static/auto-generated/fab-list/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/fab-list/methods.md
+++ b/static/auto-generated/fab-list/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/fab-list/parts.md b/static/auto-generated/fab-list/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/fab-list/parts.md
+++ b/static/auto-generated/fab-list/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/fab-list/props.md b/static/auto-generated/fab-list/props.md
index 785216d9302..7fad9b45492 100644
--- a/static/auto-generated/fab-list/props.md
+++ b/static/auto-generated/fab-list/props.md
@@ -1,22 +1,17 @@
+### activated
 
-
-### activated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the fab list will show all fab buttons in the list.<br /><br />自動翻訳: `true`の場合、ファブリストに全てのファブボタンが表示されます。 |
-| **Attribute** | `activated` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `activated`                                                                                                                                        |
+| **Type**        | `boolean`                                                                                                                                          |
+| **Default**     | `false`                                                                                                                                            |
 
+### side
 
-### side 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The side the fab list will show on relative to the main fab button.<br /><br />自動翻訳: メインファブボタンに対して、ファブリストが表示される側を指定します。 |
-| **Attribute** | `side` |
-| **Type** | `"bottom" ｜ "end" ｜ "start" ｜ "top"` |
-| **Default** | `'bottom'` |
-
+| **Attribute**   | `side`                                                                                                                                                        |
+| **Type**        | `"bottom" ｜ "end" ｜ "start" ｜ "top"`                                                                                                                       |
+| **Default**     | `'bottom'`                                                                                                                                                    |
diff --git a/static/auto-generated/fab-list/slots.md b/static/auto-generated/fab-list/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/fab-list/slots.md
+++ b/static/auto-generated/fab-list/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/fab/custom-props.md b/static/auto-generated/fab/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/fab/custom-props.md
+++ b/static/auto-generated/fab/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/fab/events.md b/static/auto-generated/fab/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/fab/events.md
+++ b/static/auto-generated/fab/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/fab/methods.md b/static/auto-generated/fab/methods.md
index dc2b4b8bc8f..95ee1fdb1f7 100644
--- a/static/auto-generated/fab/methods.md
+++ b/static/auto-generated/fab/methods.md
@@ -1,10 +1,6 @@
-
-
 ### close
 
-| | |
-| --- | --- |
-| **Description** | Close an active FAB list container.<br /><br />自動翻訳: アクティブなFABリストコンテナを閉じる。 |
-| **Signature** | `close() => Promise<void>` |
-
-
+|                 |                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------- |
+| **Description** | Close an active FAB list container.<br /><br />自動翻訳: アクティブな FAB リストコンテナを閉じる。 |
+| **Signature**   | `close() => Promise<void>`                                                                         |
diff --git a/static/auto-generated/fab/parts.md b/static/auto-generated/fab/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/fab/parts.md
+++ b/static/auto-generated/fab/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/fab/props.md b/static/auto-generated/fab/props.md
index dff2854d895..3a633cd41c8 100644
--- a/static/auto-generated/fab/props.md
+++ b/static/auto-generated/fab/props.md
@@ -1,44 +1,35 @@
+### activated
 
-
-### activated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.<br /><br />自動翻訳: もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。 |
-| **Attribute** | `activated` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `activated`                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                      |
 
+### edge
 
-### edge 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.<br /><br />自動翻訳: `true`の場合、`vertical`が`"top"`の場合はヘッダーの端に、`"bottom"`の場合はフッターの端にファブを表示します。fixed` スロットと一緒に使用する必要があります。 |
-| **Attribute** | `edge` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `edge`                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                    |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                      |
 
+### horizontal
 
-### horizontal 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Where to align the fab horizontally in the viewport.<br /><br />自動翻訳: ビューポートでファブを水平に揃える場所。 |
-| **Attribute** | `horizontal` |
-| **Type** | `"center" ｜ "end" ｜ "start" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `horizontal`                                                                                                       |
+| **Type**        | `"center" ｜ "end" ｜ "start" ｜ undefined`                                                                        |
+| **Default**     | `undefined`                                                                                                        |
 
+### vertical
 
-### vertical 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
 | **Description** | Where to align the fab vertically in the viewport.<br /><br />自動翻訳: ビューポートでファブを縦に並べる場所。 |
-| **Attribute** | `vertical` |
-| **Type** | `"bottom" ｜ "center" ｜ "top" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `vertical`                                                                                                     |
+| **Type**        | `"bottom" ｜ "center" ｜ "top" ｜ undefined`                                                                   |
+| **Default**     | `undefined`                                                                                                    |
diff --git a/static/auto-generated/fab/slots.md b/static/auto-generated/fab/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/fab/slots.md
+++ b/static/auto-generated/fab/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/footer/custom-props.md b/static/auto-generated/footer/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/footer/custom-props.md
+++ b/static/auto-generated/footer/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/footer/events.md b/static/auto-generated/footer/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/footer/events.md
+++ b/static/auto-generated/footer/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/footer/methods.md b/static/auto-generated/footer/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/footer/methods.md
+++ b/static/auto-generated/footer/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/footer/parts.md b/static/auto-generated/footer/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/footer/parts.md
+++ b/static/auto-generated/footer/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/footer/props.md b/static/auto-generated/footer/props.md
index 42309d86715..65478195bf6 100644
--- a/static/auto-generated/footer/props.md
+++ b/static/auto-generated/footer/props.md
@@ -1,33 +1,26 @@
+### collapse
 
+|                 |                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.<br /><br />自動翻訳: フッターに適用されるスクロール効果を記述する。iOS モードでのみ適用されます。 |
+| **Attribute**   | `collapse`                                                                                                                                                                                  |
+| **Type**        | `"fade" ｜ undefined`                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                 |
 
-### collapse 
+### mode
 
-| | |
-| --- | --- |
-| **Description** | Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.<br /><br />自動翻訳: フッターに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。 |
-| **Attribute** | `collapse` |
-| **Type** | `"fade" ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
-
-### translucent 
-
-| | |
-| --- | --- |
-| **Description** | If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.<br /><br />自動翻訳: `true`の場合、フッターは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。  注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
+
+### translucent
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.<br /><br />自動翻訳: `true`の場合、フッターは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。 注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。 |
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
diff --git a/static/auto-generated/footer/slots.md b/static/auto-generated/footer/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/footer/slots.md
+++ b/static/auto-generated/footer/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/grid/custom-props.md b/static/auto-generated/grid/custom-props.md
index b9ab0e20599..f74134242a5 100644
--- a/static/auto-generated/grid/custom-props.md
+++ b/static/auto-generated/grid/custom-props.md
@@ -1,16 +1,14 @@
-
-| Name | Description |
-| --- | --- |
-| `--ion-grid-padding` | Padding for the Grid<br /><br />自動翻訳: グリッドのパディング |
-| `--ion-grid-padding-lg` | Padding for the Grid on lg screens<br /><br />自動翻訳: LG画面でのグリッドのパディングについて |
-| `--ion-grid-padding-md` | Padding for the Grid on md screens<br /><br />自動翻訳: md画面におけるグリッドのパディングについて |
+| Name                    | Description                                                                                            |
+| ----------------------- | ------------------------------------------------------------------------------------------------------ |
+| `--ion-grid-padding`    | Padding for the Grid<br /><br />自動翻訳: グリッドのパディング                                         |
+| `--ion-grid-padding-lg` | Padding for the Grid on lg screens<br /><br />自動翻訳: LG 画面でのグリッドのパディングについて        |
+| `--ion-grid-padding-md` | Padding for the Grid on md screens<br /><br />自動翻訳: md 画面におけるグリッドのパディングについて    |
 | `--ion-grid-padding-sm` | Padding for the Grid on sm screens<br /><br />自動翻訳: スマートスクリーンにおけるグリッドのパディング |
-| `--ion-grid-padding-xl` | Padding for the Grid on xl screens<br /><br />自動翻訳: XL画面でのグリッドのパディングについて |
-| `--ion-grid-padding-xs` | Padding for the Grid on xs screens<br /><br />自動翻訳: xs画面でのGridのパディングについて |
-| `--ion-grid-width` | Width of the fixed Grid<br /><br />自動翻訳: 固定Gridの幅 |
-| `--ion-grid-width-lg` | Width of the fixed Grid on lg screens<br /><br />自動翻訳: LGスクリーンで固定されたGridの幅 |
-| `--ion-grid-width-md` | Width of the fixed Grid on md screens<br /><br />自動翻訳: md画面での固定Gridの幅 |
-| `--ion-grid-width-sm` | Width of the fixed Grid on sm screens<br /><br />自動翻訳: sm画面での固定Gridの幅 |
-| `--ion-grid-width-xl` | Width of the fixed Grid on xl screens<br /><br />自動翻訳: xl画面での固定Gridの幅 |
-| `--ion-grid-width-xs` | Width of the fixed Grid on xs screens<br /><br />自動翻訳: xsスクリーンで固定されたGridの幅 |
-
+| `--ion-grid-padding-xl` | Padding for the Grid on xl screens<br /><br />自動翻訳: XL 画面でのグリッドのパディングについて        |
+| `--ion-grid-padding-xs` | Padding for the Grid on xs screens<br /><br />自動翻訳: xs 画面での Grid のパディングについて          |
+| `--ion-grid-width`      | Width of the fixed Grid<br /><br />自動翻訳: 固定 Grid の幅                                            |
+| `--ion-grid-width-lg`   | Width of the fixed Grid on lg screens<br /><br />自動翻訳: LG スクリーンで固定された Grid の幅         |
+| `--ion-grid-width-md`   | Width of the fixed Grid on md screens<br /><br />自動翻訳: md 画面での固定 Grid の幅                   |
+| `--ion-grid-width-sm`   | Width of the fixed Grid on sm screens<br /><br />自動翻訳: sm 画面での固定 Grid の幅                   |
+| `--ion-grid-width-xl`   | Width of the fixed Grid on xl screens<br /><br />自動翻訳: xl 画面での固定 Grid の幅                   |
+| `--ion-grid-width-xs`   | Width of the fixed Grid on xs screens<br /><br />自動翻訳: xs スクリーンで固定された Grid の幅         |
diff --git a/static/auto-generated/grid/events.md b/static/auto-generated/grid/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/grid/events.md
+++ b/static/auto-generated/grid/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/grid/methods.md b/static/auto-generated/grid/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/grid/methods.md
+++ b/static/auto-generated/grid/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/grid/parts.md b/static/auto-generated/grid/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/grid/parts.md
+++ b/static/auto-generated/grid/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/grid/props.md b/static/auto-generated/grid/props.md
index da0c9af636f..601cf789d0c 100644
--- a/static/auto-generated/grid/props.md
+++ b/static/auto-generated/grid/props.md
@@ -1,11 +1,8 @@
+### fixed
 
-
-### fixed 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the grid will have a fixed width based on the screen size.<br /><br />自動翻訳: `true`の場合、グリッドの幅は画面サイズに応じた固定幅となる。 |
-| **Attribute** | `fixed` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `fixed`                                                                                                                                                 |
+| **Type**        | `boolean`                                                                                                                                               |
+| **Default**     | `false`                                                                                                                                                 |
diff --git a/static/auto-generated/grid/slots.md b/static/auto-generated/grid/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/grid/slots.md
+++ b/static/auto-generated/grid/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/header/custom-props.md b/static/auto-generated/header/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/header/custom-props.md
+++ b/static/auto-generated/header/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/header/events.md b/static/auto-generated/header/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/header/events.md
+++ b/static/auto-generated/header/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/header/methods.md b/static/auto-generated/header/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/header/methods.md
+++ b/static/auto-generated/header/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/header/parts.md b/static/auto-generated/header/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/header/parts.md
+++ b/static/auto-generated/header/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/header/props.md b/static/auto-generated/header/props.md
index 5425083533b..c7e1df486d6 100644
--- a/static/auto-generated/header/props.md
+++ b/static/auto-generated/header/props.md
@@ -1,33 +1,26 @@
+### collapse
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Describes the scroll effect that will be applied to the header. Only applies in iOS mode.<br /><br />Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)<br /><br />自動翻訳: ヘッダーに適用されるスクロール効果を記述する。iOS モードでのみ適用されます。 通常、[折りたたみ式大型タイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。 |
+| **Attribute**   | `collapse`                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `"condense" ｜ "fade" ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
-### collapse 
+### mode
 
-| | |
-| --- | --- |
-| **Description** | Describes the scroll effect that will be applied to the header. Only applies in iOS mode.<br /><br />Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)<br /><br />自動翻訳: ヘッダーに適用されるスクロール効果を記述する。iOSモードでのみ適用されます。  通常、[折りたたみ式大型タイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。 |
-| **Attribute** | `collapse` |
-| **Type** | `"condense" ｜ "fade" ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
-
-### translucent 
-
-| | |
-| --- | --- |
-| **Description** | If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.<br /><br />自動翻訳: `true`の場合、ヘッダーは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。  注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
+
+### translucent
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.<br /><br />自動翻訳: `true`の場合、ヘッダーは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。 |
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/static/auto-generated/header/slots.md b/static/auto-generated/header/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/header/slots.md
+++ b/static/auto-generated/header/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/img/custom-props.md b/static/auto-generated/img/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/img/custom-props.md
+++ b/static/auto-generated/img/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/img/events.md b/static/auto-generated/img/events.md
index dcf58286134..eca50e81b35 100644
--- a/static/auto-generated/img/events.md
+++ b/static/auto-generated/img/events.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `ionError` | Emitted when the img fails to load<br /><br />自動翻訳: imgの読み込みに失敗したときに発せられる |
-| `ionImgDidLoad` | Emitted when the image has finished loading<br /><br />自動翻訳: 画像の読み込みが終了したときに発せられる |
-| `ionImgWillLoad` | Emitted when the img src has been set<br /><br />自動翻訳: img srcが設定されたときに発せられる。 |
-
+| Name             | Description                                                                                               |
+| ---------------- | --------------------------------------------------------------------------------------------------------- |
+| `ionError`       | Emitted when the img fails to load<br /><br />自動翻訳: img の読み込みに失敗したときに発せられる          |
+| `ionImgDidLoad`  | Emitted when the image has finished loading<br /><br />自動翻訳: 画像の読み込みが終了したときに発せられる |
+| `ionImgWillLoad` | Emitted when the img src has been set<br /><br />自動翻訳: img src が設定されたときに発せられる。         |
diff --git a/static/auto-generated/img/methods.md b/static/auto-generated/img/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/img/methods.md
+++ b/static/auto-generated/img/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/img/parts.md b/static/auto-generated/img/parts.md
index 294dc58fdbc..8dbdfddabc9 100644
--- a/static/auto-generated/img/parts.md
+++ b/static/auto-generated/img/parts.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name    | Description                                                       |
+| ------- | ----------------------------------------------------------------- |
 | `image` | The inner `img` element.<br /><br />自動翻訳: 内側の `img` 要素。 |
-
diff --git a/static/auto-generated/img/props.md b/static/auto-generated/img/props.md
index d0b1e4f9735..3ad19e49e40 100644
--- a/static/auto-generated/img/props.md
+++ b/static/auto-generated/img/props.md
@@ -1,22 +1,17 @@
+### alt
 
-
-### alt 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.<br /><br />自動翻訳: この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。 |
-| **Attribute** | `alt` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### src 
-
-| | |
-| --- | --- |
-| **Description** | The image URL. This attribute is mandatory for the `<img>` element.<br /><br />自動翻訳: 画像のURL。この属性は `<img>` 要素では必須である。 |
-| **Attribute** | `src` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `alt`                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+
+### src
+
+|                 |                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The image URL. This attribute is mandatory for the `<img>` element.<br /><br />自動翻訳: 画像の URL。この属性は `<img>` 要素では必須である。 |
+| **Attribute**   | `src`                                                                                                                                        |
+| **Type**        | `string ｜ undefined`                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                  |
diff --git a/static/auto-generated/img/slots.md b/static/auto-generated/img/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/img/slots.md
+++ b/static/auto-generated/img/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/infinite-scroll-content/custom-props.md b/static/auto-generated/infinite-scroll-content/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/infinite-scroll-content/custom-props.md
+++ b/static/auto-generated/infinite-scroll-content/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/infinite-scroll-content/events.md b/static/auto-generated/infinite-scroll-content/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/infinite-scroll-content/events.md
+++ b/static/auto-generated/infinite-scroll-content/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/infinite-scroll-content/methods.md b/static/auto-generated/infinite-scroll-content/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/infinite-scroll-content/methods.md
+++ b/static/auto-generated/infinite-scroll-content/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/infinite-scroll-content/parts.md b/static/auto-generated/infinite-scroll-content/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/infinite-scroll-content/parts.md
+++ b/static/auto-generated/infinite-scroll-content/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/infinite-scroll-content/props.md b/static/auto-generated/infinite-scroll-content/props.md
index de2edcfdac5..afb5747b69e 100644
--- a/static/auto-generated/infinite-scroll-content/props.md
+++ b/static/auto-generated/infinite-scroll-content/props.md
@@ -1,22 +1,17 @@
-
-
-### loadingSpinner 
-
-| | |
-| --- | --- |
-| **Description** | An animated SVG spinner that shows while loading.<br /><br />自動翻訳: ロード中に表示されるアニメーションSVGスピナーです。 |
-| **Attribute** | `loading-spinner` |
-| **Type** | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### loadingText 
-
-| | |
-| --- | --- |
-| **Description** | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
-| **Attribute** | `loading-text` |
-| **Type** | `IonicSafeString ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+### loadingSpinner
+
+|                 |                                                                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | An animated SVG spinner that shows while loading.<br /><br />自動翻訳: ロード中に表示されるアニメーション SVG スピナーです。                            |
+| **Attribute**   | `loading-spinner`                                                                                                                                       |
+| **Type**        | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined` |
+| **Default**     | `undefined`                                                                                                                                             |
+
+### loadingText
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: ロード中に表示するオプションのテキスト。 `loadingText` には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
+| **Attribute**   | `loading-text`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `IonicSafeString ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
diff --git a/static/auto-generated/infinite-scroll-content/slots.md b/static/auto-generated/infinite-scroll-content/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/infinite-scroll-content/slots.md
+++ b/static/auto-generated/infinite-scroll-content/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/infinite-scroll/custom-props.md b/static/auto-generated/infinite-scroll/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/infinite-scroll/custom-props.md
+++ b/static/auto-generated/infinite-scroll/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/infinite-scroll/events.md b/static/auto-generated/infinite-scroll/events.md
index da97a9e0271..f389613a89b 100644
--- a/static/auto-generated/infinite-scroll/events.md
+++ b/static/auto-generated/infinite-scroll/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name          | Description                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `ionInfinite` | Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed.<br /><br />自動翻訳: スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。 |
-
diff --git a/static/auto-generated/infinite-scroll/methods.md b/static/auto-generated/infinite-scroll/methods.md
index a1c40379a20..f3a61a3b244 100644
--- a/static/auto-generated/infinite-scroll/methods.md
+++ b/static/auto-generated/infinite-scroll/methods.md
@@ -1,10 +1,6 @@
-
-
 ### complete
 
-| | |
-| --- | --- |
-| **Description** | Call `complete()` within the `ionInfinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`.<br /><br />自動翻訳: 非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。 |
-| **Signature** | `complete() => Promise<void>` |
-
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Call `complete()` within the `ionInfinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`.<br /><br />自動翻訳: 非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信と UI の更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。 |
+| **Signature**   | `complete() => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
diff --git a/static/auto-generated/infinite-scroll/parts.md b/static/auto-generated/infinite-scroll/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/infinite-scroll/parts.md
+++ b/static/auto-generated/infinite-scroll/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/infinite-scroll/props.md b/static/auto-generated/infinite-scroll/props.md
index 9837fc98d37..9a2301c92b4 100644
--- a/static/auto-generated/infinite-scroll/props.md
+++ b/static/auto-generated/infinite-scroll/props.md
@@ -1,33 +1,26 @@
+### disabled
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.<br /><br />Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.<br /><br />自動翻訳: `true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 true を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。 |
+| **Attribute**   | `disabled`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 
-### disabled 
+### position
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.<br /><br />Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.<br /><br />自動翻訳: `true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。  trueを設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### position 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The position of the infinite scroll element. The value can be either `top` or `bottom`.<br /><br />自動翻訳: 無限スクロール要素の位置を指定する。値は `top` または `bottom` のどちらかである。 |
-| **Attribute** | `position` |
-| **Type** | `"bottom" ｜ "top"` |
-| **Default** | `'bottom'` |
-
-
-
-### threshold 
-
-| | |
-| --- | --- |
-| **Description** | The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.<br /><br />自動翻訳: スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、`100px`という値を使用します。 |
-| **Attribute** | `threshold` |
-| **Type** | `string` |
-| **Default** | `'15%'` |
-
+| **Attribute**   | `position`                                                                                                                                                                                     |
+| **Type**        | `"bottom" ｜ "top"`                                                                                                                                                                            |
+| **Default**     | `'bottom'`                                                                                                                                                                                     |
+
+### threshold
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.<br /><br />自動翻訳: スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から 10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から 100 ピクセル以内にスクロールした場合には、`100px`という値を使用します。 |
+| **Attribute**   | `threshold`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `'15%'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/static/auto-generated/infinite-scroll/slots.md b/static/auto-generated/infinite-scroll/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/infinite-scroll/slots.md
+++ b/static/auto-generated/infinite-scroll/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/input/custom-props.md b/static/auto-generated/input/custom-props.md
index 52b598665f7..ed13dcf9e05 100644
--- a/static/auto-generated/input/custom-props.md
+++ b/static/auto-generated/input/custom-props.md
@@ -1,14 +1,12 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the input<br /><br />自動翻訳: 入力の背景 |
-| `--color` | Color of the input text<br /><br />自動翻訳: 入力テキストの色 |
-| `--padding-bottom` | Bottom padding of the input<br /><br />自動翻訳: 入力の下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input<br /><br />自動翻訳: 入力の方向が左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input<br /><br />自動翻訳: 入力の方向が左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the input<br /><br />自動翻訳: 入力のトップパディング |
-| `--placeholder-color` | Color of the input placeholder text<br /><br />自動翻訳: 入力用プレースホルダーテキストの色 |
-| `--placeholder-font-style` | Font style of the input placeholder text<br /><br />自動翻訳: 入力用プレースホルダーテキストのフォントスタイル |
-| `--placeholder-font-weight` | Font weight of the input placeholder text<br /><br />自動翻訳: 入力用プレースホルダーテキストのフォントウェイト |
-| `--placeholder-opacity` | Opacity of the input placeholder text<br /><br />自動翻訳: 入力プレースホルダーテキストの不透明度 |
-
+| Name                        | Description                                                                                                                                                                                                |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`              | Background of the input<br /><br />自動翻訳: 入力の背景                                                                                                                                                    |
+| `--color`                   | Color of the input text<br /><br />自動翻訳: 入力テキストの色                                                                                                                                              |
+| `--padding-bottom`          | Bottom padding of the input<br /><br />自動翻訳: 入力の下パディング                                                                                                                                        |
+| `--padding-end`             | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input<br /><br />自動翻訳: 入力の方向が左から右の場合は右パディング、右から左の場合は左パディングとなる |
+| `--padding-start`           | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input<br /><br />自動翻訳: 入力の方向が左から右の場合は左パディング、右から左の場合は右パディングとなる |
+| `--padding-top`             | Top padding of the input<br /><br />自動翻訳: 入力のトップパディング                                                                                                                                       |
+| `--placeholder-color`       | Color of the input placeholder text<br /><br />自動翻訳: 入力用プレースホルダーテキストの色                                                                                                                |
+| `--placeholder-font-style`  | Font style of the input placeholder text<br /><br />自動翻訳: 入力用プレースホルダーテキストのフォントスタイル                                                                                             |
+| `--placeholder-font-weight` | Font weight of the input placeholder text<br /><br />自動翻訳: 入力用プレースホルダーテキストのフォントウェイト                                                                                            |
+| `--placeholder-opacity`     | Opacity of the input placeholder text<br /><br />自動翻訳: 入力プレースホルダーテキストの不透明度                                                                                                          |
diff --git a/static/auto-generated/input/events.md b/static/auto-generated/input/events.md
index 8dcfe8d24f6..7a8903294f3 100644
--- a/static/auto-generated/input/events.md
+++ b/static/auto-generated/input/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the input loses focus.<br /><br />自動翻訳: 入力のフォーカスが外れたときに発せられる。 |
-| `ionChange` | Emitted when the value has changed.<br /><br />自動翻訳: 値が変更されたときに発せられる。 |
-| `ionFocus` | Emitted when the input has focus.<br /><br />自動翻訳: 入力にフォーカスが当たったときに発せられる。 |
-| `ionInput` | Emitted when a keyboard input occurred.<br /><br />自動翻訳: キーボード入力が発生したときに発する。 |
-
+| Name        | Description                                                                                         |
+| ----------- | --------------------------------------------------------------------------------------------------- |
+| `ionBlur`   | Emitted when the input loses focus.<br /><br />自動翻訳: 入力のフォーカスが外れたときに発せられる。 |
+| `ionChange` | Emitted when the value has changed.<br /><br />自動翻訳: 値が変更されたときに発せられる。           |
+| `ionFocus`  | Emitted when the input has focus.<br /><br />自動翻訳: 入力にフォーカスが当たったときに発せられる。 |
+| `ionInput`  | Emitted when a keyboard input occurred.<br /><br />自動翻訳: キーボード入力が発生したときに発する。 |
diff --git a/static/auto-generated/input/methods.md b/static/auto-generated/input/methods.md
index f8223dc5797..515e2e842ea 100644
--- a/static/auto-generated/input/methods.md
+++ b/static/auto-generated/input/methods.md
@@ -1,18 +1,13 @@
-
-
 ### getInputElement
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Returns the native `<input>` element used under the hood.<br /><br />自動翻訳: フードの下で使用されているネイティブの `<input>` 要素を返します。 |
-| **Signature** | `getInputElement() => Promise<HTMLInputElement>` |
-
+| **Signature**   | `getInputElement() => Promise<HTMLInputElement>`                                                                                                 |
 
 ### setFocus
 
-| | |
-| --- | --- |
-| **Description** | Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.<br /><br />Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.<br /><br />自動翻訳: ion-input` のネイティブ `input` にフォーカスを設定する。グローバルな `input.focus()` の代わりに、このメソッドを使用します。  ページが入ったときに入力にフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。 |
-| **Signature** | `setFocus() => Promise<void>` |
-
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.<br /><br />Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.<br /><br />自動翻訳: ion-input`のネイティブ`input`にフォーカスを設定する。グローバルな`input.focus()` の代わりに、このメソッドを使用します。  ページが入ったときに入力にフォーカスを当てたい開発者は、`ionViewDidEnter()`ライフサイクルメソッドの中で`setFocus()` を呼び出してください。 |
+| **Signature**   | `setFocus() => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
diff --git a/static/auto-generated/input/parts.md b/static/auto-generated/input/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/input/parts.md
+++ b/static/auto-generated/input/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/input/props.md b/static/auto-generated/input/props.md
index 6ccca53e233..156a3ec61ac 100644
--- a/static/auto-generated/input/props.md
+++ b/static/auto-generated/input/props.md
@@ -1,308 +1,251 @@
-
-
 ### accept (deprecated)
 
-| | |
-| --- | --- |
-| **Description** | This attribute is ignored.<br /><br />自動翻訳: この属性は無視されます。 _Deprecated_  |
-| **Attribute** | `accept` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### autocapitalize 
+|                 |                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------- |
+| **Description** | This attribute is ignored.<br /><br />自動翻訳: この属性は無視されます。 _Deprecated_ |
+| **Attribute**   | `accept`                                                                              |
+| **Type**        | `string ｜ undefined`                                                                 |
+| **Default**     | `undefined`                                                                           |
 
-| | |
-| --- | --- |
-| **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.<br /><br />自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. |
-| **Attribute** | `autocapitalize` |
-| **Type** | `string` |
-| **Default** | `'off'` |
+### autocapitalize
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.<br /><br />自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. |
+| **Attribute**   | `autocapitalize`                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `'off'`                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 
+### autocomplete
 
-### autocomplete 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Indicates whether the value of the control can be automatically completed by the browser.<br /><br />自動翻訳: コントロールの値が、ブラウザによって自動的に補完されるかどうかを示す。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Attribute**   | `autocomplete`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `"name" ｜ "email" ｜ "tel" ｜ "url" ｜ "on" ｜ "off" ｜ "honorific-prefix" ｜ "given-name" ｜ "additional-name" ｜ "family-name" ｜ "honorific-suffix" ｜ "nickname" ｜ "username" ｜ "new-password" ｜ "current-password" ｜ "one-time-code" ｜ "organization-title" ｜ "organization" ｜ "street-address" ｜ "address-line1" ｜ "address-line2" ｜ "address-line3" ｜ "address-level4" ｜ "address-level3" ｜ "address-level2" ｜ "address-level1" ｜ "country" ｜ "country-name" ｜ "postal-code" ｜ "cc-name" ｜ "cc-given-name" ｜ "cc-additional-name" ｜ "cc-family-name" ｜ "cc-number" ｜ "cc-exp" ｜ "cc-exp-month" ｜ "cc-exp-year" ｜ "cc-csc" ｜ "cc-type" ｜ "transaction-currency" ｜ "transaction-amount" ｜ "language" ｜ "bday" ｜ "bday-day" ｜ "bday-month" ｜ "bday-year" ｜ "sex" ｜ "tel-country-code" ｜ "tel-national" ｜ "tel-area-code" ｜ "tel-local" ｜ "tel-extension" ｜ "impp" ｜ "photo"` |
+| **Default**     | `'off'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 
-| | |
-| --- | --- |
-| **Description** | Indicates whether the value of the control can be automatically completed by the browser.<br /><br />自動翻訳: コントロールの値が、ブラウザによって自動的に補完されるかどうかを示す。 |
-| **Attribute** | `autocomplete` |
-| **Type** | `"name" ｜ "email" ｜ "tel" ｜ "url" ｜ "on" ｜ "off" ｜ "honorific-prefix" ｜ "given-name" ｜ "additional-name" ｜ "family-name" ｜ "honorific-suffix" ｜ "nickname" ｜ "username" ｜ "new-password" ｜ "current-password" ｜ "one-time-code" ｜ "organization-title" ｜ "organization" ｜ "street-address" ｜ "address-line1" ｜ "address-line2" ｜ "address-line3" ｜ "address-level4" ｜ "address-level3" ｜ "address-level2" ｜ "address-level1" ｜ "country" ｜ "country-name" ｜ "postal-code" ｜ "cc-name" ｜ "cc-given-name" ｜ "cc-additional-name" ｜ "cc-family-name" ｜ "cc-number" ｜ "cc-exp" ｜ "cc-exp-month" ｜ "cc-exp-year" ｜ "cc-csc" ｜ "cc-type" ｜ "transaction-currency" ｜ "transaction-amount" ｜ "language" ｜ "bday" ｜ "bday-day" ｜ "bday-month" ｜ "bday-year" ｜ "sex" ｜ "tel-country-code" ｜ "tel-national" ｜ "tel-area-code" ｜ "tel-local" ｜ "tel-extension" ｜ "impp" ｜ "photo"` |
-| **Default** | `'off'` |
+### autocorrect
 
-
-
-### autocorrect 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Whether auto correction should be enabled when the user is entering/editing the text value.<br /><br />自動翻訳: ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。 |
-| **Attribute** | `autocorrect` |
-| **Type** | `"off" ｜ "on"` |
-| **Default** | `'off'` |
-
+| **Attribute**   | `autocorrect`                                                                                                                                                                            |
+| **Type**        | `"off" ｜ "on"`                                                                                                                                                                          |
+| **Default**     | `'off'`                                                                                                                                                                                  |
 
+### autofocus
 
-### autofocus 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This Boolean attribute lets you specify that a form control should have input focus when the page loads.<br /><br />自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。 |
-| **Attribute** | `autofocus` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `autofocus`                                                                                                                                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                                                                                                                                         |
+| **Default**     | `false`                                                                                                                                                                                                                                           |
 
+### clearInput
 
-### clearInput 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.<br /><br />自動翻訳: `true`の場合、値があるときに入力にクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。 |
-| **Attribute** | `clear-input` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `clear-input`                                                                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                                                               |
+| **Default**     | `false`                                                                                                                                                                                                                                 |
 
+### clearOnEdit
 
-### clearOnEdit 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.<br /><br />自動翻訳: `true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `"password"` のとき `true` で、それ以外のときは `false` です。 |
-| **Attribute** | `clear-on-edit` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `clear-on-edit`                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                     |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### debounce
 
-### debounce 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.<br /><br />自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。 |
-| **Attribute** | `debounce` |
-| **Type** | `number` |
-| **Default** | `0` |
-
-
+| **Attribute**   | `debounce`                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `0`                                                                                                                                                                                                                                                                                                                                                            |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the input.<br /><br />自動翻訳: `true`の場合、ユーザは入力と対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `disabled`                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                     |
+| **Default**     | `false`                                                                                                                       |
 
-### enterkeyhint 
+### enterkeyhint
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.<br /><br />自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. |
-| **Attribute** | `enterkeyhint` |
-| **Type** | `"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `enterkeyhint`                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined`                                                                                                                                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                             |
 
+### inputmode
 
-
-### inputmode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.<br /><br />自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. |
-| **Attribute** | `inputmode` |
-| **Type** | `"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### max 
-
-| | |
-| --- | --- |
-| **Description** | The maximum value, which must not be less than its minimum (min attribute) value.<br /><br />自動翻訳: 最大値で、その最小値（min属性）より小さくてはならない。 |
-| **Attribute** | `max` |
-| **Type** | `number ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### maxlength 
-
-| | |
-| --- | --- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.<br /><br />自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。 |
-| **Attribute** | `maxlength` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### min 
-
-| | |
-| --- | --- |
-| **Description** | The minimum value, which must not be greater than its maximum (max attribute) value.<br /><br />自動翻訳: 最小値で、その最大値（max属性）より大きくてはならない。 |
-| **Attribute** | `min` |
-| **Type** | `number ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### minlength 
-
-| | |
-| --- | --- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.<br /><br />自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。 |
-| **Attribute** | `minlength` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### mode 
-
-| | |
-| --- | --- |
+| **Attribute**   | `inputmode`                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                  |
+
+### max
+
+|                 |                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The maximum value, which must not be less than its minimum (min attribute) value.<br /><br />自動翻訳: 最大値で、その最小値（min 属性）より小さくてはならない。 |
+| **Attribute**   | `max`                                                                                                                                                           |
+| **Type**        | `number ｜ string ｜ undefined`                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                     |
+
+### maxlength
+
+|                 |                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.<br /><br />自動翻訳: type 属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。 |
+| **Attribute**   | `maxlength`                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                     |
+
+### min
+
+|                 |                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The minimum value, which must not be greater than its maximum (max attribute) value.<br /><br />自動翻訳: 最小値で、その最大値（max 属性）より大きくてはならない。 |
+| **Attribute**   | `min`                                                                                                                                                              |
+| **Type**        | `number ｜ string ｜ undefined`                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                        |
+
+### minlength
+
+|                 |                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.<br /><br />自動翻訳: type 属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。 |
+| **Attribute**   | `minlength`                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                     |
+
+### mode
+
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
-
-### multiple 
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.<br /><br />自動翻訳: `true`の場合、ユーザは複数の値を入力することができる。この属性は、type属性が `"email"` に設定されている場合に適用され、それ以外の場合は無視される。 |
-| **Attribute** | `multiple` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
+### multiple
 
+|                 |                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.<br /><br />自動翻訳: `true`の場合、ユーザは複数の値を入力することができる。この属性は、type 属性が `"email"` に設定されている場合に適用され、それ以外の場合は無視される。 |
+| **Attribute**   | `multiple`                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                               |
 
+### name
 
-### name 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
-
-
-
-### pattern 
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
 
-| | |
-| --- | --- |
-| **Description** | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.<br /><br />自動翻訳: 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, または `"password"` であるときに適用され、それ以外のときは無視されます。type 属性が `"date"` の場合、`pattern` は `"date"` 入力タイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。 |
-| **Attribute** | `pattern` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### pattern
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.<br /><br />自動翻訳: 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type 属性の値が `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, または `"password"` であるときに適用され、それ以外のときは無視されます。type 属性が `"date"` の場合、`pattern` は `"date"` 入力タイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。 |
+| **Attribute**   | `pattern`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 
+### placeholder
 
-### placeholder 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.<br /><br />自動翻訳: 入力が値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, または `"url"` に設定されている場合にのみ適用され、それ以外は無視されます。 |
-| **Attribute** | `placeholder` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `placeholder`                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
+### readonly
 
-### readonly 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                        |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot modify the value.<br /><br />自動翻訳: `true`の場合、ユーザーは値を変更することができない。 |
-| **Attribute** | `readonly` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `readonly`                                                                                                             |
+| **Type**        | `boolean`                                                                                                              |
+| **Default**     | `false`                                                                                                                |
 
+### required
 
-### required 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the user must fill in a value before submitting a form.<br /><br />自動翻訳: `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。 |
-| **Attribute** | `required` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### size 
+| **Attribute**   | `required`                                                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                                                          |
+| **Default**     | `false`                                                                                                                                                            |
 
-| | |
-| --- | --- |
-| **Description** | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.<br /><br />自動翻訳: コントロールの初期サイズ。ただし、type属性の値が `"text"` または `"password"` である場合は、整数値の文字数である。この属性は、`type`属性が `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, または `"password"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。 |
-| **Attribute** | `size` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
+### size
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.<br /><br />自動翻訳: コントロールの初期サイズ。ただし、type 属性の値が `"text"` または `"password"` である場合は、整数値の文字数である。この属性は、`type`属性が `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, または `"password"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。 |
+| **Attribute**   | `size`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
+### spellcheck
 
-### spellcheck 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the element will have its spelling and grammar checked.<br /><br />自動翻訳: `true`の場合、その要素のスペルチェックと文法チェックが行われる。 |
-| **Attribute** | `spellcheck` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### step 
+| **Attribute**   | `spellcheck`                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                |
+| **Default**     | `false`                                                                                                                                                  |
 
-| | |
-| --- | --- |
-| **Description** | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.<br /><br />自動翻訳: min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any"`または正の浮動小数点数。 |
-| **Attribute** | `step` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### step
 
+|                 |                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.<br /><br />自動翻訳: min 属性、max 属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any"`または正の浮動小数点数。 |
+| **Attribute**   | `step`                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                               |
 
+### type
 
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The type of control to display. The default type is text.<br /><br />自動翻訳: 表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。 |
-| **Attribute** | `type` |
-| **Type** | `"date" ｜ "datetime-local" ｜ "email" ｜ "month" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "time" ｜ "url" ｜ "week"` |
-| **Default** | `'text'` |
-
+| **Attribute**   | `type`                                                                                                                                                    |
+| **Type**        | `"date" ｜ "datetime-local" ｜ "email" ｜ "month" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "time" ｜ "url" ｜ "week"`                  |
+| **Default**     | `'text'`                                                                                                                                                  |
 
+### value
 
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | The value of the input.<br /><br />自動翻訳: 入力された値です。 |
-| **Attribute** | `value` |
-| **Type** | `null ｜ number ｜ string ｜ undefined` |
-| **Default** | `''` |
-
+| **Attribute**   | `value`                                                         |
+| **Type**        | `null ｜ number ｜ string ｜ undefined`                         |
+| **Default**     | `''`                                                            |
diff --git a/static/auto-generated/input/slots.md b/static/auto-generated/input/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/input/slots.md
+++ b/static/auto-generated/input/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/item-divider/custom-props.md b/static/auto-generated/item-divider/custom-props.md
index 781f8e6663d..036b80a526a 100644
--- a/static/auto-generated/item-divider/custom-props.md
+++ b/static/auto-generated/item-divider/custom-props.md
@@ -1,14 +1,12 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the item divider<br /><br />自動翻訳: アイテムディバイダーの背景 |
-| `--color` | Color of the item divider<br /><br />自動翻訳: アイテムディバイダーの色 |
-| `--inner-padding-bottom` | Bottom inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーのボトムインナーパディング |
-| `--inner-padding-end` | End inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーの内側パディングを終了する |
-| `--inner-padding-start` | Start inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーの内側パディングを開始する |
-| `--inner-padding-top` | Top inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーの上部内側パディング |
-| `--padding-bottom` | Bottom padding of the item divider<br /><br />自動翻訳: アイテムディバイダーのボトムパディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider<br /><br />自動翻訳: アイテムディバイダーの方向が左から右の場合は右パディング、右から左の場合は左パディング |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider<br /><br />自動翻訳: アイテムディバイダーの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the item divider<br /><br />自動翻訳: アイテムディバイダーのトップパディング |
-
+| Name                     | Description                                                                                                                                                                                                                       |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`           | Background of the item divider<br /><br />自動翻訳: アイテムディバイダーの背景                                                                                                                                                    |
+| `--color`                | Color of the item divider<br /><br />自動翻訳: アイテムディバイダーの色                                                                                                                                                           |
+| `--inner-padding-bottom` | Bottom inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーのボトムインナーパディング                                                                                                                      |
+| `--inner-padding-end`    | End inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーの内側パディングを終了する                                                                                                                         |
+| `--inner-padding-start`  | Start inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーの内側パディングを開始する                                                                                                                       |
+| `--inner-padding-top`    | Top inner padding of the item divider<br /><br />自動翻訳: アイテムディバイダーの上部内側パディング                                                                                                                               |
+| `--padding-bottom`       | Bottom padding of the item divider<br /><br />自動翻訳: アイテムディバイダーのボトムパディング                                                                                                                                    |
+| `--padding-end`          | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider<br /><br />自動翻訳: アイテムディバイダーの方向が左から右の場合は右パディング、右から左の場合は左パディング       |
+| `--padding-start`        | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider<br /><br />自動翻訳: アイテムディバイダーの方向が左から右の場合は左パディング、右から左の場合は右パディングとなる |
+| `--padding-top`          | Top padding of the item divider<br /><br />自動翻訳: アイテムディバイダーのトップパディング                                                                                                                                       |
diff --git a/static/auto-generated/item-divider/events.md b/static/auto-generated/item-divider/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/item-divider/events.md
+++ b/static/auto-generated/item-divider/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/item-divider/methods.md b/static/auto-generated/item-divider/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/item-divider/methods.md
+++ b/static/auto-generated/item-divider/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/item-divider/parts.md b/static/auto-generated/item-divider/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/item-divider/parts.md
+++ b/static/auto-generated/item-divider/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/item-divider/props.md b/static/auto-generated/item-divider/props.md
index 8a1facb5ae8..94567340efe 100644
--- a/static/auto-generated/item-divider/props.md
+++ b/static/auto-generated/item-divider/props.md
@@ -1,33 +1,26 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
-
-### sticky 
-
-| | |
-| --- | --- |
-| **Description** | When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.<br /><br />This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky<br /><br />自動翻訳: `true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。  この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky |
-| **Attribute** | `sticky` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
+
+### sticky
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.<br /><br />This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky<br /><br />自動翻訳: `true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。 この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky |
+| **Attribute**   | `sticky`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/item-divider/slots.md b/static/auto-generated/item-divider/slots.md
index eea33edb6ef..230fb177739 100644
--- a/static/auto-generated/item-divider/slots.md
+++ b/static/auto-generated/item-divider/slots.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
-| `end` | Content is placed to the right of the divider text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。 |
-| `start` | Content is placed to the left of the divider text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTRでは仕切り文字の左側に、RTLでは右側に配置されます。 |
-
+| Name    | Description                                                                                                                                                                     |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ``      | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
+| `end`   | Content is placed to the right of the divider text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTR では仕切り文字の右側に、RTL では左側に配置されます。  |
+| `start` | Content is placed to the left of the divider text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTR では仕切り文字の左側に、RTL では右側に配置されます。  |
diff --git a/static/auto-generated/item-group/custom-props.md b/static/auto-generated/item-group/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/item-group/custom-props.md
+++ b/static/auto-generated/item-group/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/item-group/events.md b/static/auto-generated/item-group/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/item-group/events.md
+++ b/static/auto-generated/item-group/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/item-group/methods.md b/static/auto-generated/item-group/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/item-group/methods.md
+++ b/static/auto-generated/item-group/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/item-group/parts.md b/static/auto-generated/item-group/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/item-group/parts.md
+++ b/static/auto-generated/item-group/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/item-group/props.md b/static/auto-generated/item-group/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/item-group/props.md
+++ b/static/auto-generated/item-group/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/item-group/slots.md b/static/auto-generated/item-group/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/item-group/slots.md
+++ b/static/auto-generated/item-group/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/item-option/custom-props.md b/static/auto-generated/item-option/custom-props.md
index 24af999ad82..12f2d95d6a2 100644
--- a/static/auto-generated/item-option/custom-props.md
+++ b/static/auto-generated/item-option/custom-props.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
+| Name           | Description                                                                 |
+| -------------- | --------------------------------------------------------------------------- |
 | `--background` | Background of the item option<br /><br />自動翻訳: アイテムオプションの背景 |
-| `--color` | Color of the item option<br /><br />自動翻訳: アイテムオプションのカラー |
-
+| `--color`      | Color of the item option<br /><br />自動翻訳: アイテムオプションのカラー    |
diff --git a/static/auto-generated/item-option/events.md b/static/auto-generated/item-option/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/item-option/events.md
+++ b/static/auto-generated/item-option/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/item-option/methods.md b/static/auto-generated/item-option/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/item-option/methods.md
+++ b/static/auto-generated/item-option/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/item-option/parts.md b/static/auto-generated/item-option/parts.md
index 1712d38416e..76e16482789 100644
--- a/static/auto-generated/item-option/parts.md
+++ b/static/auto-generated/item-option/parts.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `native` | The native HTML button or anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。 |
-
+| Name     | Description                                                                                                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `native` | The native HTML button or anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブ HTML のボタンまたはアンカー要素です。 |
diff --git a/static/auto-generated/item-option/props.md b/static/auto-generated/item-option/props.md
index 006705414b8..8f9acda96b9 100644
--- a/static/auto-generated/item-option/props.md
+++ b/static/auto-generated/item-option/props.md
@@ -1,99 +1,80 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the item option.<br /><br />自動翻訳: `true`の場合、ユーザーはアイテムオプションと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                                          |
+| **Type**        | `boolean`                                                                                                                                           |
+| **Default**     | `false`                                                                                                                                             |
 
+### download
 
-### download 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).<br /><br />自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
-| **Attribute** | `download` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `download`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
-### expandable 
+### expandable
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the option will expand to take up the available width and cover any other options.<br /><br />自動翻訳: `true`の場合、オプションは利用可能な幅を占めるように展開し、他のオプションをカバーします。 |
-| **Attribute** | `expandable` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `expandable`                                                                                                                                                                                                  |
+| **Type**        | `boolean`                                                                                                                                                                                                     |
+| **Default**     | `false`                                                                                                                                                                                                       |
 
-### href 
+### href
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### rel
 
-### rel 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
+### target
 
-### target 
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
 
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### type
 
-
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | The type of the button.<br /><br />自動翻訳: ボタンの種類です。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                          |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                               |
+| **Default**     | `'button'`                                                      |
diff --git a/static/auto-generated/item-option/slots.md b/static/auto-generated/item-option/slots.md
index 7c04e85b811..ae7b47c5779 100644
--- a/static/auto-generated/item-option/slots.md
+++ b/static/auto-generated/item-option/slots.md
@@ -1,10 +1,8 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
-| `bottom` | Content is placed below the option text.<br /><br />自動翻訳: コンテンツは、オプションテキストの下に配置されます。 |
-| `end` | Content is placed to the right of the option text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTRではオプションテキストの右側に、RTLでは左側に配置されます。 |
-| `icon-only` | Should be used on an icon in an option that has no text.<br /><br />自動翻訳: テキストを持たないオプションのアイコンに使用されるべきです。 |
-| `start` | Content is placed to the left of the option text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTRではオプションテキストの左側に、RTLでは右側に配置されます。 |
-| `top` | Content is placed above the option text.<br /><br />自動翻訳: オプションテキストの上にコンテンツが配置されます。 |
-
+| Name        | Description                                                                                                                                                                           |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ``          | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。       |
+| `bottom`    | Content is placed below the option text.<br /><br />自動翻訳: コンテンツは、オプションテキストの下に配置されます。                                                                    |
+| `end`       | Content is placed to the right of the option text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTR ではオプションテキストの右側に、RTL では左側に配置されます。 |
+| `icon-only` | Should be used on an icon in an option that has no text.<br /><br />自動翻訳: テキストを持たないオプションのアイコンに使用されるべきです。                                            |
+| `start`     | Content is placed to the left of the option text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTR ではオプションテキストの左側に、RTL では右側に配置されます。 |
+| `top`       | Content is placed above the option text.<br /><br />自動翻訳: オプションテキストの上にコンテンツが配置されます。                                                                      |
diff --git a/static/auto-generated/item-options/custom-props.md b/static/auto-generated/item-options/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/item-options/custom-props.md
+++ b/static/auto-generated/item-options/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/item-options/events.md b/static/auto-generated/item-options/events.md
index e2c6a38a084..64c1475619d 100644
--- a/static/auto-generated/item-options/events.md
+++ b/static/auto-generated/item-options/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name       | Description                                                                                                        |
+| ---------- | ------------------------------------------------------------------------------------------------------------------ |
 | `ionSwipe` | Emitted when the item has been fully swiped.<br /><br />自動翻訳: アイテムが完全にスワイプされたときに発せられる。 |
-
diff --git a/static/auto-generated/item-options/methods.md b/static/auto-generated/item-options/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/item-options/methods.md
+++ b/static/auto-generated/item-options/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/item-options/parts.md b/static/auto-generated/item-options/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/item-options/parts.md
+++ b/static/auto-generated/item-options/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/item-options/props.md b/static/auto-generated/item-options/props.md
index d9fae62e08d..78441baaab2 100644
--- a/static/auto-generated/item-options/props.md
+++ b/static/auto-generated/item-options/props.md
@@ -1,11 +1,8 @@
-
-
-### side 
-
-| | |
-| --- | --- |
-| **Description** | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.<br /><br />自動翻訳: オプションボタンを配置する側を指定します。指定可能な値。start"` と `"end"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。 |
-| **Attribute** | `side` |
-| **Type** | `"end" ｜ "start"` |
-| **Default** | `'end'` |
-
+### side
+
+|                 |                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.<br /><br />自動翻訳: オプションボタンを配置する側を指定します。指定可能な値。start"`と`"end"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。 |
+| **Attribute**   | `side`                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `"end" ｜ "start"`                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `'end'`                                                                                                                                                                                                                                                                                                                                      |
diff --git a/static/auto-generated/item-options/slots.md b/static/auto-generated/item-options/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/item-options/slots.md
+++ b/static/auto-generated/item-options/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/item-sliding/custom-props.md b/static/auto-generated/item-sliding/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/item-sliding/custom-props.md
+++ b/static/auto-generated/item-sliding/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/item-sliding/events.md b/static/auto-generated/item-sliding/events.md
index fbcf730443c..d6ce78080b5 100644
--- a/static/auto-generated/item-sliding/events.md
+++ b/static/auto-generated/item-sliding/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                                                                              |
+| --------- | -------------------------------------------------------------------------------------------------------- |
 | `ionDrag` | Emitted when the sliding position changes.<br /><br />自動翻訳: スライド位置が変化したときに発せられる。 |
-
diff --git a/static/auto-generated/item-sliding/methods.md b/static/auto-generated/item-sliding/methods.md
index 5d430ce7ba6..8a5b488e16b 100644
--- a/static/auto-generated/item-sliding/methods.md
+++ b/static/auto-generated/item-sliding/methods.md
@@ -1,42 +1,34 @@
-
-
 ### close
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Close the sliding item. Items can also be closed from the [List](./list).<br /><br />自動翻訳: スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。 |
-| **Signature** | `close() => Promise<void>` |
-
+| **Signature**   | `close() => Promise<void>`                                                                                                                                                              |
 
 ### closeOpened
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Close all of the sliding items in the list. Items can also be closed from the [List](./list).<br /><br />自動翻訳: リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。 |
-| **Signature** | `closeOpened() => Promise<boolean>` |
-
+| **Signature**   | `closeOpened() => Promise<boolean>`                                                                                                                                                                                     |
 
 ### getOpenAmount
 
-| | |
-| --- | --- |
+|                 |                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Get the amount the item is open in pixels.<br /><br />自動翻訳: アイテムが開いている量をピクセル単位で取得します。 |
-| **Signature** | `getOpenAmount() => Promise<number>` |
-
+| **Signature**   | `getOpenAmount() => Promise<number>`                                                                               |
 
 ### getSlidingRatio
 
-| | |
-| --- | --- |
-| **Description** | Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.<br /><br />自動翻訳: オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いている。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。 |
-| **Signature** | `getSlidingRatio() => Promise<number>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.<br /><br />自動翻訳: オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いている。数値の絶対値が 1 より大きい場合、その項目は選択肢の幅より多く開いていることになります。 |
+| **Signature**   | `getSlidingRatio() => Promise<number>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
 ### open
 
-| | |
-| --- | --- |
+|                 |                                                                      |
+| --------------- | -------------------------------------------------------------------- |
 | **Description** | Open the sliding item.<br /><br />自動翻訳: スライド式の項目を開く。 |
-| **Signature** | `open(side: Side ｜ undefined) => Promise<void>` |
-
-
+| **Signature**   | `open(side: Side ｜ undefined) => Promise<void>`                     |
diff --git a/static/auto-generated/item-sliding/parts.md b/static/auto-generated/item-sliding/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/item-sliding/parts.md
+++ b/static/auto-generated/item-sliding/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/item-sliding/props.md b/static/auto-generated/item-sliding/props.md
index b4c5c19c015..c42ec15265d 100644
--- a/static/auto-generated/item-sliding/props.md
+++ b/static/auto-generated/item-sliding/props.md
@@ -1,11 +1,8 @@
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the sliding item.<br /><br />自動翻訳: `true`の場合、ユーザーはスライドアイテムを操作することができません。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                            |
+| **Default**     | `false`                                                                                                                                              |
diff --git a/static/auto-generated/item-sliding/slots.md b/static/auto-generated/item-sliding/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/item-sliding/slots.md
+++ b/static/auto-generated/item-sliding/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/item/custom-props.md b/static/auto-generated/item/custom-props.md
index 891cd6a7e5a..6f2a23fe99e 100644
--- a/static/auto-generated/item/custom-props.md
+++ b/static/auto-generated/item/custom-props.md
@@ -1,39 +1,37 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the item<br /><br />自動翻訳: アイテムの背景 |
-| `--background-activated` | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: 押されたときのアイテムの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。 |
-| `--background-activated-opacity` | Opacity of the item background when pressed<br /><br />自動翻訳: 押されたときのアイテム背景の不透明度 |
-| `--background-focused` | Background of the item when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのアイテムの背景 |
-| `--background-focused-opacity` | Opacity of the item background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのアイテムの背景の不透明度 |
-| `--background-hover` | Background of the item on hover<br /><br />自動翻訳: ホバー時のアイテムの背景 |
-| `--background-hover-opacity` | Opacity of the background of the item on hover<br /><br />自動翻訳: ホバー時のアイテムの背景の不透明度 |
-| `--border-color` | Color of the item border<br /><br />自動翻訳: アイテムの縁取りの色 |
-| `--border-radius` | Radius of the item border<br /><br />自動翻訳: アイテムの境界線の半径 |
-| `--border-style` | Style of the item border<br /><br />自動翻訳: アイテムの枠のスタイル |
-| `--border-width` | Width of the item border<br /><br />自動翻訳: アイテムの枠の幅 |
-| `--color` | Color of the item<br /><br />自動翻訳: アイテムのカラー |
-| `--color-activated` | Color of the item when pressed<br /><br />自動翻訳: 押したときのアイテムの色 |
-| `--color-focused` | Color of the item when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのアイテムの色 |
-| `--color-hover` | Color of the item on hover<br /><br />自動翻訳: ホバー時のアイテムの色 |
-| `--detail-icon-color` | Color of the item detail icon<br /><br />自動翻訳: アイテム詳細アイコンの色 |
-| `--detail-icon-font-size` | Font size of the item detail icon<br /><br />自動翻訳: アイテム詳細アイコンのフォントサイズ |
-| `--detail-icon-opacity` | Opacity of the item detail icon<br /><br />自動翻訳: アイテム詳細アイコンの不透明度 |
-| `--highlight-color-focused` | The color of the highlight on the item when focused<br /><br />自動翻訳: フォーカスされたときのアイテムのハイライトの色 |
-| `--highlight-color-invalid` | The color of the highlight on the item when invalid<br /><br />自動翻訳: 無効時のアイテムのハイライトの色 |
-| `--highlight-color-valid` | The color of the highlight on the item when valid<br /><br />自動翻訳: 有効時のアイテム上のハイライトの色 |
-| `--highlight-height` | The height of the highlight on the item<br /><br />自動翻訳: アイテムに表示されるハイライトの高さ |
-| `--inner-border-width` | Width of the item inner border<br /><br />自動翻訳: アイテム内枠の幅 |
-| `--inner-box-shadow` | Box shadow of the item inner<br /><br />自動翻訳: アイテム内側のボックスシャドウ |
-| `--inner-padding-bottom` | Bottom padding of the item inner<br /><br />自動翻訳: アイテム内側のボトムパディング |
-| `--inner-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner<br /><br />自動翻訳: 方向が左から右の場合は右パディング、方向がアイテムの内側の右から左の場合は左パディングとなる |
-| `--inner-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner<br /><br />自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングがアイテム内側に入る |
-| `--inner-padding-top` | Top padding of the item inner<br /><br />自動翻訳: アイテム内側のトップパディング |
-| `--min-height` | Minimum height of the item<br /><br />自動翻訳: アイテムの最小高さ |
-| `--padding-bottom` | Bottom padding of the item<br /><br />自動翻訳: アイテムの底面パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item<br /><br />自動翻訳: 方向が左から右の場合は右パディング、方向が右から左の場合は左パディングで項目を囲む |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item<br /><br />自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングで項目を囲む |
-| `--padding-top` | Top padding of the item<br /><br />自動翻訳: アイテムのトップパディング |
-| `--ripple-color` | Color of the item ripple effect<br /><br />自動翻訳: アイテム波及効果の色 |
-| `--transition` | Transition of the item<br /><br />自動翻訳: アイテムの変遷 |
-
+| Name                             | Description                                                                                                                                                                                                                     |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the item<br /><br />自動翻訳: アイテムの背景                                                                                                                                                                      |
+| `--background-activated`         | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.<br /><br />自動翻訳: 押されたときのアイテムの背景。注意：これを設定すると、マテリアルデザインの波紋に干渉します。       |
+| `--background-activated-opacity` | Opacity of the item background when pressed<br /><br />自動翻訳: 押されたときのアイテム背景の不透明度                                                                                                                           |
+| `--background-focused`           | Background of the item when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのアイテムの背景                                                                                                          |
+| `--background-focused-opacity`   | Opacity of the item background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのアイテムの背景の不透明度                                                                                        |
+| `--background-hover`             | Background of the item on hover<br /><br />自動翻訳: ホバー時のアイテムの背景                                                                                                                                                   |
+| `--background-hover-opacity`     | Opacity of the background of the item on hover<br /><br />自動翻訳: ホバー時のアイテムの背景の不透明度                                                                                                                          |
+| `--border-color`                 | Color of the item border<br /><br />自動翻訳: アイテムの縁取りの色                                                                                                                                                              |
+| `--border-radius`                | Radius of the item border<br /><br />自動翻訳: アイテムの境界線の半径                                                                                                                                                           |
+| `--border-style`                 | Style of the item border<br /><br />自動翻訳: アイテムの枠のスタイル                                                                                                                                                            |
+| `--border-width`                 | Width of the item border<br /><br />自動翻訳: アイテムの枠の幅                                                                                                                                                                  |
+| `--color`                        | Color of the item<br /><br />自動翻訳: アイテムのカラー                                                                                                                                                                         |
+| `--color-activated`              | Color of the item when pressed<br /><br />自動翻訳: 押したときのアイテムの色                                                                                                                                                    |
+| `--color-focused`                | Color of the item when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのアイテムの色                                                                                                                 |
+| `--color-hover`                  | Color of the item on hover<br /><br />自動翻訳: ホバー時のアイテムの色                                                                                                                                                          |
+| `--detail-icon-color`            | Color of the item detail icon<br /><br />自動翻訳: アイテム詳細アイコンの色                                                                                                                                                     |
+| `--detail-icon-font-size`        | Font size of the item detail icon<br /><br />自動翻訳: アイテム詳細アイコンのフォントサイズ                                                                                                                                     |
+| `--detail-icon-opacity`          | Opacity of the item detail icon<br /><br />自動翻訳: アイテム詳細アイコンの不透明度                                                                                                                                             |
+| `--highlight-color-focused`      | The color of the highlight on the item when focused<br /><br />自動翻訳: フォーカスされたときのアイテムのハイライトの色                                                                                                         |
+| `--highlight-color-invalid`      | The color of the highlight on the item when invalid<br /><br />自動翻訳: 無効時のアイテムのハイライトの色                                                                                                                       |
+| `--highlight-color-valid`        | The color of the highlight on the item when valid<br /><br />自動翻訳: 有効時のアイテム上のハイライトの色                                                                                                                       |
+| `--highlight-height`             | The height of the highlight on the item<br /><br />自動翻訳: アイテムに表示されるハイライトの高さ                                                                                                                               |
+| `--inner-border-width`           | Width of the item inner border<br /><br />自動翻訳: アイテム内枠の幅                                                                                                                                                            |
+| `--inner-box-shadow`             | Box shadow of the item inner<br /><br />自動翻訳: アイテム内側のボックスシャドウ                                                                                                                                                |
+| `--inner-padding-bottom`         | Bottom padding of the item inner<br /><br />自動翻訳: アイテム内側のボトムパディング                                                                                                                                            |
+| `--inner-padding-end`            | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner<br /><br />自動翻訳: 方向が左から右の場合は右パディング、方向がアイテムの内側の右から左の場合は左パディングとなる |
+| `--inner-padding-start`          | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner<br /><br />自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングがアイテム内側に入る   |
+| `--inner-padding-top`            | Top padding of the item inner<br /><br />自動翻訳: アイテム内側のトップパディング                                                                                                                                               |
+| `--min-height`                   | Minimum height of the item<br /><br />自動翻訳: アイテムの最小高さ                                                                                                                                                              |
+| `--padding-bottom`               | Bottom padding of the item<br /><br />自動翻訳: アイテムの底面パディング                                                                                                                                                        |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item<br /><br />自動翻訳: 方向が左から右の場合は右パディング、方向が右から左の場合は左パディングで項目を囲む                 |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item<br /><br />自動翻訳: 方向が左から右の場合は左パディング、方向が右から左の場合は右パディングで項目を囲む                 |
+| `--padding-top`                  | Top padding of the item<br /><br />自動翻訳: アイテムのトップパディング                                                                                                                                                         |
+| `--ripple-color`                 | Color of the item ripple effect<br /><br />自動翻訳: アイテム波及効果の色                                                                                                                                                       |
+| `--transition`                   | Transition of the item<br /><br />自動翻訳: アイテムの変遷                                                                                                                                                                      |
diff --git a/static/auto-generated/item/events.md b/static/auto-generated/item/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/item/events.md
+++ b/static/auto-generated/item/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/item/methods.md b/static/auto-generated/item/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/item/methods.md
+++ b/static/auto-generated/item/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/item/parts.md b/static/auto-generated/item/parts.md
index 6032424d902..0135757ad17 100644
--- a/static/auto-generated/item/parts.md
+++ b/static/auto-generated/item/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `detail-icon` | The chevron icon for the item. Only applies when `detail="true"`.<br /><br />自動翻訳: アイテムのシェブロンアイコンを表示します。detail="true"`のときのみ適用されます。 |
-| `native` | The native HTML button, anchor or div element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。 |
-
+| Name          | Description                                                                                                                                                                           |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `detail-icon` | The chevron icon for the item. Only applies when `detail="true"`.<br /><br />自動翻訳: アイテムのシェブロンアイコンを表示します。detail="true"`のときのみ適用されます。               |
+| `native`      | The native HTML button, anchor or div element that wraps all child elements.<br /><br />自動翻訳: すべての子要素をラップするネイティブ HTML のボタン、アンカー、または div 要素です。 |
diff --git a/static/auto-generated/item/props.md b/static/auto-generated/item/props.md
index 49b2bc078a8..68fbdca5751 100644
--- a/static/auto-generated/item/props.md
+++ b/static/auto-generated/item/props.md
@@ -1,198 +1,161 @@
+### button
 
-
-### button 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a button tag will be rendered and the item will be tappable.<br /><br />自動翻訳: `true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。 |
-| **Attribute** | `button` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `button`                                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                                             |
+| **Default**     | `false`                                                                                                                                                               |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### counter
 
-### counter 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.<br /><br />自動翻訳: `true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。 |
-| **Attribute** | `counter` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `counter`                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                           |
 
-### counterFormatter 
+### counterFormatter
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".<br /><br />自動翻訳: カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは「itemLength / maxLength」に設定されています。 |
-| **Attribute** | `undefined` |
-| **Type** | `((inputLength: number, maxLength: number) => string) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                   |
+| **Type**        | `((inputLength: number, maxLength: number) => string) ｜ undefined`                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                   |
 
-### detail 
+### detail
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                             |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.<br /><br />自動翻訳: `true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。 |
-| **Attribute** | `detail` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `detail`                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                                                                                                                                                                                      |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                 |
 
+### detailIcon
 
+|                 |                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The icon to use when `detail` is set to `true`.<br /><br />自動翻訳: detail`が`true` に設定されているときに使用するアイコンです。 |
+| **Attribute**   | `detail-icon`                                                                                                                     |
+| **Type**        | `string`                                                                                                                          |
+| **Default**     | `chevronForward`                                                                                                                  |
 
-### detailIcon 
+### disabled
 
-| | |
-| --- | --- |
-| **Description** | The icon to use when `detail` is set to `true`.<br /><br />自動翻訳: detail` が `true` に設定されているときに使用するアイコンです。 |
-| **Attribute** | `detail-icon` |
-| **Type** | `string` |
-| **Default** | `chevronForward` |
-
-
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the user cannot interact with the item.<br /><br />自動翻訳: `true`の場合、ユーザはそのアイテムと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                            |
+| **Default**     | `false`                                                                                                                              |
 
+### download
 
-### download 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).<br /><br />自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
-| **Attribute** | `download` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `download`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
+### fill
 
-### fill 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.<br /><br />自動翻訳: アイテムの塗りつぶし。もし `'solid'` ならば、アイテムは背景を持つようになる。もし `'outline'` ならば、アイテムは透明でボーダーを持つようになります。md`モードでのみ使用可能です。 |
-| **Attribute** | `fill` |
-| **Type** | `"outline" ｜ "solid" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `fill`                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `"outline" ｜ "solid" ｜ undefined`                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                         |
 
+### href
 
-### href 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
-### lines 
+### lines
 
-| | |
-| --- | --- |
+|                 |                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------- |
 | **Description** | How the bottom border should be displayed on the item.<br /><br />自動翻訳: アイテムに表示される下枠の表示方法。 |
-| **Attribute** | `lines` |
-| **Type** | `"full" ｜ "inset" ｜ "none" ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `lines`                                                                                                          |
+| **Type**        | `"full" ｜ "inset" ｜ "none" ｜ undefined`                                                                       |
+| **Default**     | `undefined`                                                                                                      |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### rel
 
-
-### rel 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
-### routerAnimation 
+### routerAnimation
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition animation when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                |
 
+### routerDirection
 
-
-### routerDirection 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition direction when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。 |
-| **Attribute** | `router-direction` |
-| **Type** | `"back" ｜ "forward" ｜ "root"` |
-| **Default** | `'forward'` |
-
+| **Attribute**   | `router-direction`                                                                                                                                                                                               |
+| **Type**        | `"back" ｜ "forward" ｜ "root"`                                                                                                                                                                                  |
+| **Default**     | `'forward'`                                                                                                                                                                                                      |
 
+### shape
 
-### shape 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The shape of the item. If "round" it will have increased border radius.<br /><br />自動翻訳: アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。 |
-| **Attribute** | `shape` |
-| **Type** | `"round" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `shape`                                                                                                                                                               |
+| **Type**        | `"round" ｜ undefined`                                                                                                                                                |
+| **Default**     | `undefined`                                                                                                                                                           |
 
+### target
 
-### target 
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
 
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### type
 
-
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The type of the button. Only used when an `onclick` or `button` property is present.<br /><br />自動翻訳: ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                                                                                                                                                   |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                                                                                                                                                        |
+| **Default**     | `'button'`                                                                                                                                                                               |
diff --git a/static/auto-generated/item/slots.md b/static/auto-generated/item/slots.md
index 69f0864fa94..fbb774a384f 100644
--- a/static/auto-generated/item/slots.md
+++ b/static/auto-generated/item/slots.md
@@ -1,9 +1,7 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
-| `end` | Content is placed to the right of the item text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。 |
-| `error` | Content is placed under the item and displayed when an error is detected.<br /><br />自動翻訳: 項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。 |
-| `helper` | Content is placed under the item and displayed when no error is detected.<br /><br />自動翻訳: 項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。 |
-| `start` | Content is placed to the left of the item text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。 |
-
+| Name     | Description                                                                                                                                                                       |
+| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ``       | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。   |
+| `end`    | Content is placed to the right of the item text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTR ではアイテムテキストの右側に、RTL では左側に配置されます。 |
+| `error`  | Content is placed under the item and displayed when an error is detected.<br /><br />自動翻訳: 項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。             |
+| `helper` | Content is placed under the item and displayed when no error is detected.<br /><br />自動翻訳: 項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。             |
+| `start`  | Content is placed to the left of the item text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTR ではアイテムテキストの左側に、RTL では右側に配置されます。 |
diff --git a/static/auto-generated/label/custom-props.md b/static/auto-generated/label/custom-props.md
index 05a689f739f..c05362c707e 100644
--- a/static/auto-generated/label/custom-props.md
+++ b/static/auto-generated/label/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                                                                                                                                                                                                |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `--color` | Color of the label. This property is only available when using `ion-label` inside of an `ion-item`.<br /><br />自動翻訳: ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能である。 |
-
diff --git a/static/auto-generated/label/events.md b/static/auto-generated/label/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/label/events.md
+++ b/static/auto-generated/label/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/label/methods.md b/static/auto-generated/label/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/label/methods.md
+++ b/static/auto-generated/label/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/label/parts.md b/static/auto-generated/label/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/label/parts.md
+++ b/static/auto-generated/label/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/label/props.md b/static/auto-generated/label/props.md
index dd8f0189417..3ff33878834 100644
--- a/static/auto-generated/label/props.md
+++ b/static/auto-generated/label/props.md
@@ -1,33 +1,26 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### position
 
-
-### position 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The position determines where and how the label behaves inside an item.<br /><br />自動翻訳: 位置は、ラベルがアイテム内のどこで、どのように動作するかを決定します。 |
-| **Attribute** | `position` |
-| **Type** | `"fixed" ｜ "floating" ｜ "stacked" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `position`                                                                                                                                                          |
+| **Type**        | `"fixed" ｜ "floating" ｜ "stacked" ｜ undefined`                                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                                         |
diff --git a/static/auto-generated/label/slots.md b/static/auto-generated/label/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/label/slots.md
+++ b/static/auto-generated/label/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/list-header/custom-props.md b/static/auto-generated/list-header/custom-props.md
index 929fa8c19ac..41fe4db1977 100644
--- a/static/auto-generated/list-header/custom-props.md
+++ b/static/auto-generated/list-header/custom-props.md
@@ -1,10 +1,8 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the list header<br /><br />自動翻訳: リストヘッダーの背景 |
-| `--border-color` | Color of the list header border<br /><br />自動翻訳: リストヘッダーボーダーの色 |
-| `--border-style` | Style of the list header border<br /><br />自動翻訳: リストヘッダーボーダーのスタイル |
-| `--border-width` | Width of the list header border<br /><br />自動翻訳: リストヘッダー枠の幅 |
-| `--color` | Color of the list header text<br /><br />自動翻訳: リストヘッダーテキストの色 |
-| `--inner-border-width` | Width of the inner list header border<br /><br />自動翻訳: リストヘッダー内枠の幅 |
-
+| Name                   | Description                                                                           |
+| ---------------------- | ------------------------------------------------------------------------------------- |
+| `--background`         | Background of the list header<br /><br />自動翻訳: リストヘッダーの背景               |
+| `--border-color`       | Color of the list header border<br /><br />自動翻訳: リストヘッダーボーダーの色       |
+| `--border-style`       | Style of the list header border<br /><br />自動翻訳: リストヘッダーボーダーのスタイル |
+| `--border-width`       | Width of the list header border<br /><br />自動翻訳: リストヘッダー枠の幅             |
+| `--color`              | Color of the list header text<br /><br />自動翻訳: リストヘッダーテキストの色         |
+| `--inner-border-width` | Width of the inner list header border<br /><br />自動翻訳: リストヘッダー内枠の幅     |
diff --git a/static/auto-generated/list-header/events.md b/static/auto-generated/list-header/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/list-header/events.md
+++ b/static/auto-generated/list-header/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/list-header/methods.md b/static/auto-generated/list-header/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/list-header/methods.md
+++ b/static/auto-generated/list-header/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/list-header/parts.md b/static/auto-generated/list-header/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/list-header/parts.md
+++ b/static/auto-generated/list-header/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/list-header/props.md b/static/auto-generated/list-header/props.md
index 65050ae64e8..83db75c5fc0 100644
--- a/static/auto-generated/list-header/props.md
+++ b/static/auto-generated/list-header/props.md
@@ -1,33 +1,26 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### lines 
+### lines
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | How the bottom border should be displayed on the list header.<br /><br />自動翻訳: リストヘッダーの下辺のボーダーをどのように表示するか。 |
-| **Attribute** | `lines` |
-| **Type** | `"full" ｜ "inset" ｜ "none" ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `lines`                                                                                                                                   |
+| **Type**        | `"full" ｜ "inset" ｜ "none" ｜ undefined`                                                                                                |
+| **Default**     | `undefined`                                                                                                                               |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/list-header/slots.md b/static/auto-generated/list-header/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/list-header/slots.md
+++ b/static/auto-generated/list-header/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/list/custom-props.md b/static/auto-generated/list/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/list/custom-props.md
+++ b/static/auto-generated/list/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/list/events.md b/static/auto-generated/list/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/list/events.md
+++ b/static/auto-generated/list/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/list/methods.md b/static/auto-generated/list/methods.md
index bbf6fc0dcd7..88169599cb1 100644
--- a/static/auto-generated/list/methods.md
+++ b/static/auto-generated/list/methods.md
@@ -1,10 +1,6 @@
-
-
 ### closeSlidingItems
 
-| | |
-| --- | --- |
-| **Description** | If `ion-item-sliding` are used inside the list, this method closes any open sliding item.<br /><br />Returns `true` if an actual `ion-item-sliding` is closed.<br /><br />自動翻訳: リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。  実際に `ion-item-sliding` が閉じられた場合は `true` を返します。 |
-| **Signature** | `closeSlidingItems() => Promise<boolean>` |
-
-
+|                 |                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `ion-item-sliding` are used inside the list, this method closes any open sliding item.<br /><br />Returns `true` if an actual `ion-item-sliding` is closed.<br /><br />自動翻訳: リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。 実際に `ion-item-sliding` が閉じられた場合は `true` を返します。 |
+| **Signature**   | `closeSlidingItems() => Promise<boolean>`                                                                                                                                                                                                                                                                                                                   |
diff --git a/static/auto-generated/list/parts.md b/static/auto-generated/list/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/list/parts.md
+++ b/static/auto-generated/list/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/list/props.md b/static/auto-generated/list/props.md
index a3cab94cf04..cdebbd5c556 100644
--- a/static/auto-generated/list/props.md
+++ b/static/auto-generated/list/props.md
@@ -1,33 +1,26 @@
+### inset
 
-
-### inset 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the list will have margin around it and rounded corners.<br /><br />自動翻訳: `true`の場合、リストの周囲に余白ができ、角が丸くなる。 |
-| **Attribute** | `inset` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `inset`                                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                                       |
+| **Default**     | `false`                                                                                                                                         |
 
-### lines 
+### lines
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | How the bottom border should be displayed on all items.<br /><br />自動翻訳: すべてのアイテムで、下のボーダーをどのように表示させるか。 |
-| **Attribute** | `lines` |
-| **Type** | `"full" ｜ "inset" ｜ "none" ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `lines`                                                                                                                                 |
+| **Type**        | `"full" ｜ "inset" ｜ "none" ｜ undefined`                                                                                              |
+| **Default**     | `undefined`                                                                                                                             |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/list/slots.md b/static/auto-generated/list/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/list/slots.md
+++ b/static/auto-generated/list/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/loading/custom-props.md b/static/auto-generated/loading/custom-props.md
index 2839e33b84d..0b655aad347 100644
--- a/static/auto-generated/loading/custom-props.md
+++ b/static/auto-generated/loading/custom-props.md
@@ -1,13 +1,11 @@
-
-| Name | Description |
-| --- | --- |
-| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度 |
-| `--background` | Background of the loading dialog<br /><br />自動翻訳: ローディングダイアログの背景 |
-| `--height` | Height of the loading dialog<br /><br />自動翻訳: ローディングダイアログの高さ |
-| `--max-height` | Maximum height of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最大高さ |
-| `--max-width` | Maximum width of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最大幅 |
-| `--min-height` | Minimum height of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最小高さ |
-| `--min-width` | Minimum width of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最小幅 |
-| `--spinner-color` | Color of the loading spinner<br /><br />自動翻訳: ローディングスピナーの色 |
-| `--width` | Width of the loading dialog<br /><br />自動翻訳: ローディングダイアログの幅 |
-
+| Name                 | Description                                                                                |
+| -------------------- | ------------------------------------------------------------------------------------------ |
+| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度                                |
+| `--background`       | Background of the loading dialog<br /><br />自動翻訳: ローディングダイアログの背景         |
+| `--height`           | Height of the loading dialog<br /><br />自動翻訳: ローディングダイアログの高さ             |
+| `--max-height`       | Maximum height of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最大高さ |
+| `--max-width`        | Maximum width of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最大幅    |
+| `--min-height`       | Minimum height of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最小高さ |
+| `--min-width`        | Minimum width of the loading dialog<br /><br />自動翻訳: ローディングダイアログの最小幅    |
+| `--spinner-color`    | Color of the loading spinner<br /><br />自動翻訳: ローディングスピナーの色                 |
+| `--width`            | Width of the loading dialog<br /><br />自動翻訳: ローディングダイアログの幅                |
diff --git a/static/auto-generated/loading/events.md b/static/auto-generated/loading/events.md
index b2928dbd6ca..c2125275b11 100644
--- a/static/auto-generated/loading/events.md
+++ b/static/auto-generated/loading/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionLoadingDidDismiss` | Emitted after the loading has dismissed.<br /><br />自動翻訳: ローディングが解除された後に発せられる。 |
-| `ionLoadingDidPresent` | Emitted after the loading has presented.<br /><br />自動翻訳: ローディングが提示された後に発せられる。 |
+| Name                    | Description                                                                                             |
+| ----------------------- | ------------------------------------------------------------------------------------------------------- |
+| `ionLoadingDidDismiss`  | Emitted after the loading has dismissed.<br /><br />自動翻訳: ローディングが解除された後に発せられる。  |
+| `ionLoadingDidPresent`  | Emitted after the loading has presented.<br /><br />自動翻訳: ローディングが提示された後に発せられる。  |
 | `ionLoadingWillDismiss` | Emitted before the loading has dismissed.<br /><br />自動翻訳: ローディングが解除される前に発せられる。 |
 | `ionLoadingWillPresent` | Emitted before the loading has presented.<br /><br />自動翻訳: ローディングが提示される前に発せられる。 |
-
diff --git a/static/auto-generated/loading/methods.md b/static/auto-generated/loading/methods.md
index e6edfa324ae..1e74ffe4f9c 100644
--- a/static/auto-generated/loading/methods.md
+++ b/static/auto-generated/loading/methods.md
@@ -1,34 +1,27 @@
-
-
 ### dismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Dismiss the loading overlay after it has been presented.<br /><br />自動翻訳: ローディングオーバーレイが提示された後、それを解除する。 |
-| **Signature** | `dismiss(data?: any, role?: string) => Promise<boolean>` |
-
+| **Signature**   | `dismiss(data?: any, role?: string) => Promise<boolean>`                                                                               |
 
 ### onDidDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the loading did dismiss.<br /><br />自動翻訳: ローディングが解除されたタイミングを解決するプロミスを返します。 |
-| **Signature** | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                         |
 
 ### onWillDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the loading will dismiss.<br /><br />自動翻訳: ローディングが解除されるタイミングを解決するプロミスを返します。 |
-| **Signature** | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                         |
 
 ### present
 
-| | |
-| --- | --- |
+|                 |                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Present the loading overlay after it has been created.<br /><br />自動翻訳: 作成後のローディングオーバーレイを提示する。 |
-| **Signature** | `present() => Promise<void>` |
-
-
+| **Signature**   | `present() => Promise<void>`                                                                                             |
diff --git a/static/auto-generated/loading/parts.md b/static/auto-generated/loading/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/loading/parts.md
+++ b/static/auto-generated/loading/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/loading/props.md b/static/auto-generated/loading/props.md
index 216a060048f..3e70340a644 100644
--- a/static/auto-generated/loading/props.md
+++ b/static/auto-generated/loading/props.md
@@ -1,143 +1,116 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the loading indicator will animate.<br /><br />自動翻訳: `true`の場合、ロードインジケータをアニメーションで表示します。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `animated`                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                          |
+| **Default**     | `true`                                                                                                                             |
 
-### backdropDismiss 
+### backdropDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the loading indicator will be dismissed when the backdrop is clicked.<br /><br />自動翻訳: `true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。 |
-| **Attribute** | `backdrop-dismiss` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### cssClass 
+| **Attribute**   | `backdrop-dismiss`                                                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                                                      |
+| **Default**     | `false`                                                                                                                                                                                        |
 
-| | |
-| --- | --- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
-| **Attribute** | `css-class` |
-| **Type** | `string ｜ string[] ｜ undefined` |
-| **Default** | `undefined` |
+### cssClass
 
+|                 |                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
+| **Attribute**   | `css-class`                                                                                                                                                                                                                               |
+| **Type**        | `string ｜ string[] ｜ undefined`                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                               |
 
+### duration
 
-### duration 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Number of milliseconds to wait before dismissing the loading indicator.<br /><br />自動翻訳: ローディングインジケータを解除するまでの待ち時間（ミリ秒）。 |
-| **Attribute** | `duration` |
-| **Type** | `number` |
-| **Default** | `0` |
-
+| **Attribute**   | `duration`                                                                                                                                                |
+| **Type**        | `number`                                                                                                                                                  |
+| **Default**     | `0`                                                                                                                                                       |
 
+### enterAnimation
 
-### enterAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the loading indicator is presented.<br /><br />自動翻訳: ローディングインジケータが表示されたときに使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                                                           |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                               |
+| **Default**     | `undefined`                                                                                                                                           |
 
+### htmlAttributes
 
-### htmlAttributes 
-
-| | |
-| --- | --- |
+|                 |                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------ |
 | **Description** | Additional attributes to pass to the loader.<br /><br />自動翻訳: ローダーに渡す追加属性。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                     |
+| **Default**     | `undefined`                                                                                |
 
-### keyboardClose 
+### keyboardClose
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented.<br /><br />自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
-| **Attribute** | `keyboard-close` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `keyboard-close`                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                                     |
 
+### leaveAnimation
 
-
-### leaveAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the loading indicator is dismissed.<br /><br />自動翻訳: ローディングインジケータが解除されたときに使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                           |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                               |
+| **Default**     | `undefined`                                                                                                                                           |
 
-### message 
+### message
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Optional text content to display in the loading indicator.<br /><br />自動翻訳: ロードインジケータに表示するテキストコンテンツは任意です。 |
-| **Attribute** | `message` |
-| **Type** | `IonicSafeString ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `message`                                                                                                                                  |
+| **Type**        | `IonicSafeString ｜ string ｜ undefined`                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### showBackdrop
 
-### showBackdrop 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a backdrop will be displayed behind the loading indicator.<br /><br />自動翻訳: `true`の場合、ロードインジケータの後ろにバックドロップが表示されます。 |
-| **Attribute** | `show-backdrop` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `show-backdrop`                                                                                                                                                   |
+| **Type**        | `boolean`                                                                                                                                                         |
+| **Default**     | `true`                                                                                                                                                            |
 
-### spinner 
+### spinner
 
-| | |
-| --- | --- |
-| **Description** | The name of the spinner to display.<br /><br />自動翻訳: 表示するスピナーの名前。 |
-| **Attribute** | `spinner` |
-| **Type** | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The name of the spinner to display.<br /><br />自動翻訳: 表示するスピナーの名前。                                                                       |
+| **Attribute**   | `spinner`                                                                                                                                               |
+| **Type**        | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined` |
+| **Default**     | `undefined`                                                                                                                                             |
 
+### translucent
 
-
-### translucent 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、ロードインジケータは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
diff --git a/static/auto-generated/loading/slots.md b/static/auto-generated/loading/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/loading/slots.md
+++ b/static/auto-generated/loading/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/menu-button/custom-props.md b/static/auto-generated/menu-button/custom-props.md
index c8836d61b38..2e095868f8e 100644
--- a/static/auto-generated/menu-button/custom-props.md
+++ b/static/auto-generated/menu-button/custom-props.md
@@ -1,17 +1,15 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the menu button<br /><br />自動翻訳: メニューボタンの背景 |
-| `--background-focused` | Background of the menu button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景色 |
-| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景の不透明度 |
-| `--background-hover` | Background of the menu button on hover<br /><br />自動翻訳: ホバー時のメニューボタンの背景 |
-| `--background-hover-opacity` | Opacity of the background on hover<br /><br />自動翻訳: ホバー時の背景の不透明度 |
-| `--border-radius` | Border radius of the menu button<br /><br />自動翻訳: メニューボタンのボーダー半径 |
-| `--color` | Color of the menu button<br /><br />自動翻訳: メニューボタンの色 |
-| `--color-focused` | Color of the menu button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのメニューボタンの色 |
-| `--color-hover` | Color of the menu button on hover<br /><br />自動翻訳: ホバー時のメニューボタンの色 |
-| `--padding-bottom` | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング |
-
+| Name                           | Description                                                                                                                                                                                                   |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the menu button<br /><br />自動翻訳: メニューボタンの背景                                                                                                                                       |
+| `--background-focused`         | Background of the menu button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景色                                                                         |
+| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのメニューボタンの背景の不透明度                                                         |
+| `--background-hover`           | Background of the menu button on hover<br /><br />自動翻訳: ホバー時のメニューボタンの背景                                                                                                                    |
+| `--background-hover-opacity`   | Opacity of the background on hover<br /><br />自動翻訳: ホバー時の背景の不透明度                                                                                                                              |
+| `--border-radius`              | Border radius of the menu button<br /><br />自動翻訳: メニューボタンのボーダー半径                                                                                                                            |
+| `--color`                      | Color of the menu button<br /><br />自動翻訳: メニューボタンの色                                                                                                                                              |
+| `--color-focused`              | Color of the menu button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのメニューボタンの色                                                                                  |
+| `--color-hover`                | Color of the menu button on hover<br /><br />自動翻訳: ホバー時のメニューボタンの色                                                                                                                           |
+| `--padding-bottom`             | Bottom padding of the button<br /><br />自動翻訳: ボタンの下パディング                                                                                                                                        |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button<br /><br />自動翻訳: ボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
+| `--padding-top`                | Top padding of the button<br /><br />自動翻訳: ボタンの上部パディング                                                                                                                                         |
diff --git a/static/auto-generated/menu-button/events.md b/static/auto-generated/menu-button/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/menu-button/events.md
+++ b/static/auto-generated/menu-button/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/menu-button/methods.md b/static/auto-generated/menu-button/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/menu-button/methods.md
+++ b/static/auto-generated/menu-button/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/menu-button/parts.md b/static/auto-generated/menu-button/parts.md
index 3e94225377e..330e01c9546 100644
--- a/static/auto-generated/menu-button/parts.md
+++ b/static/auto-generated/menu-button/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `icon` | The menu button icon (uses ion-icon).<br /><br />自動翻訳: メニューボタンのアイコン（ion-iconを使用）です。 |
+| Name     | Description                                                                                                                         |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`   | The menu button icon (uses ion-icon).<br /><br />自動翻訳: メニューボタンのアイコン（ion-icon を使用）です。                        |
 | `native` | The native HTML button element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。 |
-
diff --git a/static/auto-generated/menu-button/props.md b/static/auto-generated/menu-button/props.md
index 12bfe2dfdb3..a2be694775e 100644
--- a/static/auto-generated/menu-button/props.md
+++ b/static/auto-generated/menu-button/props.md
@@ -1,66 +1,53 @@
+### autoHide
 
-
-### autoHide 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Automatically hides the menu button when the corresponding menu is not active<br /><br />自動翻訳: 対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。 |
-| **Attribute** | `auto-hide` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `auto-hide`                                                                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                                                                           |
+| **Default**     | `true`                                                                                                                                                                              |
 
-### color 
+### color
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the menu button.<br /><br />自動翻訳: `true`の場合、ユーザはメニューボタンを操作することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                     |
+| **Default**     | `false`                                                                                                                                       |
 
+### menu
 
-### menu 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle<br /><br />自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。 |
-| **Attribute** | `menu` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `menu`                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                        |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### type
 
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | The type of the button.<br /><br />自動翻訳: ボタンの種類です。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                          |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                               |
+| **Default**     | `'button'`                                                      |
diff --git a/static/auto-generated/menu-button/slots.md b/static/auto-generated/menu-button/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/menu-button/slots.md
+++ b/static/auto-generated/menu-button/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/menu-toggle/custom-props.md b/static/auto-generated/menu-toggle/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/menu-toggle/custom-props.md
+++ b/static/auto-generated/menu-toggle/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/menu-toggle/events.md b/static/auto-generated/menu-toggle/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/menu-toggle/events.md
+++ b/static/auto-generated/menu-toggle/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/menu-toggle/methods.md b/static/auto-generated/menu-toggle/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/menu-toggle/methods.md
+++ b/static/auto-generated/menu-toggle/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/menu-toggle/parts.md b/static/auto-generated/menu-toggle/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/menu-toggle/parts.md
+++ b/static/auto-generated/menu-toggle/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/menu-toggle/props.md b/static/auto-generated/menu-toggle/props.md
index 766a3da0719..19bb8fd0da1 100644
--- a/static/auto-generated/menu-toggle/props.md
+++ b/static/auto-generated/menu-toggle/props.md
@@ -1,22 +1,17 @@
-
-
-### autoHide 
-
-| | |
-| --- | --- |
-| **Description** | Automatically hides the content when the corresponding menu is not active.<br /><br />By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.<br /><br />自動翻訳: 対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にする。  デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。 |
-| **Attribute** | `auto-hide` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
-
-### menu 
-
-| | |
-| --- | --- |
-| **Description** | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.<br /><br />If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.<br /><br />自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。  このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルする。 |
-| **Attribute** | `menu` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+### autoHide
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Automatically hides the content when the corresponding menu is not active.<br /><br />By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.<br /><br />自動翻訳: 対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にする。 デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。 |
+| **Attribute**   | `auto-hide`                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+
+### menu
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.<br /><br />If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.<br /><br />自動翻訳: メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。 このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルする。 |
+| **Attribute**   | `menu`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
diff --git a/static/auto-generated/menu-toggle/slots.md b/static/auto-generated/menu-toggle/slots.md
index 4f95be80578..10e17457d1a 100644
--- a/static/auto-generated/menu-toggle/slots.md
+++ b/static/auto-generated/menu-toggle/slots.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed inside the toggle to act as the click target.<br /><br />自動翻訳: トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。 |
-
+| Name | Description                                                                                                                                                   |
+| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ``   | Content is placed inside the toggle to act as the click target.<br /><br />自動翻訳: トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。 |
diff --git a/static/auto-generated/menu/custom-props.md b/static/auto-generated/menu/custom-props.md
index bc35e91b34a..5e02d9a453e 100644
--- a/static/auto-generated/menu/custom-props.md
+++ b/static/auto-generated/menu/custom-props.md
@@ -1,11 +1,9 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the menu<br /><br />自動翻訳: メニューの背景 |
-| `--height` | Height of the menu<br /><br />自動翻訳: メニューの高さ |
-| `--max-height` | Maximum height of the menu<br /><br />自動翻訳: メニューの最大高さ |
-| `--max-width` | Maximum width of the menu<br /><br />自動翻訳: メニューの最大幅 |
+| Name           | Description                                                            |
+| -------------- | ---------------------------------------------------------------------- |
+| `--background` | Background of the menu<br /><br />自動翻訳: メニューの背景             |
+| `--height`     | Height of the menu<br /><br />自動翻訳: メニューの高さ                 |
+| `--max-height` | Maximum height of the menu<br /><br />自動翻訳: メニューの最大高さ     |
+| `--max-width`  | Maximum width of the menu<br /><br />自動翻訳: メニューの最大幅        |
 | `--min-height` | Minimum height of the menu<br /><br />自動翻訳: メニューの高さの最小値 |
-| `--min-width` | Minimum width of the menu<br /><br />自動翻訳: メニューの最小幅 |
-| `--width` | Width of the menu<br /><br />自動翻訳: メニューの幅 |
-
+| `--min-width`  | Minimum width of the menu<br /><br />自動翻訳: メニューの最小幅        |
+| `--width`      | Width of the menu<br /><br />自動翻訳: メニューの幅                    |
diff --git a/static/auto-generated/menu/events.md b/static/auto-generated/menu/events.md
index ad35d67e0d4..9bcdcb32b51 100644
--- a/static/auto-generated/menu/events.md
+++ b/static/auto-generated/menu/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionDidClose` | Emitted when the menu is closed.<br /><br />自動翻訳: メニューが閉じられたときに発する。 |
-| `ionDidOpen` | Emitted when the menu is open.<br /><br />自動翻訳: メニューが開いているときに発せられる。 |
+| Name           | Description                                                                                                  |
+| -------------- | ------------------------------------------------------------------------------------------------------------ |
+| `ionDidClose`  | Emitted when the menu is closed.<br /><br />自動翻訳: メニューが閉じられたときに発する。                     |
+| `ionDidOpen`   | Emitted when the menu is open.<br /><br />自動翻訳: メニューが開いているときに発せられる。                   |
 | `ionWillClose` | Emitted when the menu is about to be closed.<br /><br />自動翻訳: メニューが閉じられようとするときに発する。 |
-| `ionWillOpen` | Emitted when the menu is about to be opened.<br /><br />自動翻訳: メニューが開かれようとするときに発する。 |
-
+| `ionWillOpen`  | Emitted when the menu is about to be opened.<br /><br />自動翻訳: メニューが開かれようとするときに発する。   |
diff --git a/static/auto-generated/menu/methods.md b/static/auto-generated/menu/methods.md
index fdfb4d0b753..372e1d78754 100644
--- a/static/auto-generated/menu/methods.md
+++ b/static/auto-generated/menu/methods.md
@@ -1,50 +1,41 @@
-
-
 ### close
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.<br /><br />自動翻訳: メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返す。 |
-| **Signature** | `close(animated?: boolean) => Promise<boolean>` |
-
+| **Signature**   | `close(animated?: boolean) => Promise<boolean>`                                                                                                                                                              |
 
 ### isActive
 
-| | |
-| --- | --- |
-| **Description** | Returns `true` is the menu is active.<br /><br />A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.<br /><br />自動翻訳: メニューがアクティブであれば `true` を返す。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味する。 |
-| **Signature** | `isActive() => Promise<boolean>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns `true` is the menu is active.<br /><br />A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.<br /><br />自動翻訳: メニューがアクティブであれば `true` を返す。 メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味する。 |
+| **Signature**   | `isActive() => Promise<boolean>`                                                                                                                                                                                                                                                                                                                                                        |
 
 ### isOpen
 
-| | |
-| --- | --- |
+|                 |                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------- |
 | **Description** | Returns `true` is the menu is open.<br /><br />自動翻訳: メニューが開いている場合は `true` を返す。 |
-| **Signature** | `isOpen() => Promise<boolean>` |
-
+| **Signature**   | `isOpen() => Promise<boolean>`                                                                      |
 
 ### open
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Opens the menu. If the menu is already open or it can't be opened, it returns `false`.<br /><br />自動翻訳: メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返す。 |
-| **Signature** | `open(animated?: boolean) => Promise<boolean>` |
-
+| **Signature**   | `open(animated?: boolean) => Promise<boolean>`                                                                                                                                                    |
 
 ### setOpen
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Opens or closes the button. If the operation can't be completed successfully, it returns `false`.<br /><br />自動翻訳: ボタンを開いたり閉じたりする。操作が正常に完了しない場合は `false` を返す。 |
-| **Signature** | `setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>` |
-
+| **Signature**   | `setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>`                                                                                                                             |
 
 ### toggle
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.<br /><br />自動翻訳: メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとする。操作が正常に完了しない場合は、`false`を返す。 |
-| **Signature** | `toggle(animated?: boolean) => Promise<boolean>` |
-
-
+| **Signature**   | `toggle(animated?: boolean) => Promise<boolean>`                                                                                                                                                                                                                                                                                                    |
diff --git a/static/auto-generated/menu/parts.md b/static/auto-generated/menu/parts.md
index 5c3daf9993e..ac30476dc11 100644
--- a/static/auto-generated/menu/parts.md
+++ b/static/auto-generated/menu/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `backdrop` | The backdrop that appears over the main content when the menu is open.<br /><br />自動翻訳: メニューを開いているときに、メインコンテンツの上に表示される背景です。 |
-| `container` | The container for the menu content.<br /><br />自動翻訳: メニューの内容を格納するコンテナです。 |
-
+| Name        | Description                                                                                                                                                        |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `backdrop`  | The backdrop that appears over the main content when the menu is open.<br /><br />自動翻訳: メニューを開いているときに、メインコンテンツの上に表示される背景です。 |
+| `container` | The container for the menu content.<br /><br />自動翻訳: メニューの内容を格納するコンテナです。                                                                    |
diff --git a/static/auto-generated/menu/props.md b/static/auto-generated/menu/props.md
index 1c1e629d40b..2914dab284c 100644
--- a/static/auto-generated/menu/props.md
+++ b/static/auto-generated/menu/props.md
@@ -1,77 +1,62 @@
+### contentId
 
-
-### contentId 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.<br /><br />自動翻訳: メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。 |
-| **Attribute** | `content-id` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `content-id`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the menu is disabled.<br /><br />自動翻訳: `true`の場合、メニューは無効化される。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `disabled`                                                                                   |
+| **Type**        | `boolean`                                                                                    |
+| **Default**     | `false`                                                                                      |
 
+### maxEdgeStart
 
-
-### maxEdgeStart 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.<br /><br />自動翻訳: ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。 |
-| **Attribute** | `max-edge-start` |
-| **Type** | `number` |
-| **Default** | `50` |
-
-
+| **Attribute**   | `max-edge-start`                                                                                                                                                                                                                                                      |
+| **Type**        | `number`                                                                                                                                                                                                                                                              |
+| **Default**     | `50`                                                                                                                                                                                                                                                                  |
 
-### menuId 
+### menuId
 
-| | |
-| --- | --- |
-| **Description** | An id for the menu.<br /><br />自動翻訳: メニューのIDです。 |
-| **Attribute** | `menu-id` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                               |
+| --------------- | ------------------------------------------------------------- |
+| **Description** | An id for the menu.<br /><br />自動翻訳: メニューの ID です。 |
+| **Attribute**   | `menu-id`                                                     |
+| **Type**        | `string ｜ undefined`                                         |
+| **Default**     | `undefined`                                                   |
 
+### side
 
-
-### side 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Which side of the view the menu should be placed.<br /><br />自動翻訳: メニューがビューのどの側に配置されるべきか。 |
-| **Attribute** | `side` |
-| **Type** | `"end" ｜ "start"` |
-| **Default** | `'start'` |
-
-
+| **Attribute**   | `side`                                                                                                              |
+| **Type**        | `"end" ｜ "start"`                                                                                                  |
+| **Default**     | `'start'`                                                                                                           |
 
-### swipeGesture 
+### swipeGesture
 
-| | |
-| --- | --- |
+|                 |                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, swiping the menu is enabled.<br /><br />自動翻訳: `true`の場合、スワイプによるメニュー操作が有効になる。 |
-| **Attribute** | `swipe-gesture` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `swipe-gesture`                                                                                                     |
+| **Type**        | `boolean`                                                                                                           |
+| **Default**     | `true`                                                                                                              |
 
+### type
 
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.<br /><br />自動翻訳: メニューの表示形式を指定します。利用可能なオプション。overlay"`, `"reveal"`, `"push"`. |
-| **Attribute** | `type` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `type`                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                     |
diff --git a/static/auto-generated/menu/slots.md b/static/auto-generated/menu/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/menu/slots.md
+++ b/static/auto-generated/menu/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/modal/custom-props.md b/static/auto-generated/modal/custom-props.md
index cbc924729b3..442244a095a 100644
--- a/static/auto-generated/modal/custom-props.md
+++ b/static/auto-generated/modal/custom-props.md
@@ -1,16 +1,14 @@
-
-| Name | Description |
-| --- | --- |
-| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度 |
-| `--background` | Background of the modal content<br /><br />自動翻訳: モーダルコンテンツの背景 |
-| `--border-color` | Border color of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダーカラー |
-| `--border-radius` | Border radius of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダー半径 |
-| `--border-style` | Border style of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダースタイル |
-| `--border-width` | Border width of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダー幅 |
-| `--height` | Height of the modal<br /><br />自動翻訳: モーダルの高さ |
-| `--max-height` | Maximum height of the modal<br /><br />自動翻訳: モーダルの最大高さ |
-| `--max-width` | Maximum width of the modal<br /><br />自動翻訳: モーダルの最大幅 |
-| `--min-height` | Minimum height of the modal<br /><br />自動翻訳: モーダルの最小高さ |
-| `--min-width` | Minimum width of the modal<br /><br />自動翻訳: モーダルの最小幅 |
-| `--width` | Width of the modal<br /><br />自動翻訳: モーダルの幅 |
-
+| Name                 | Description                                                                                 |
+| -------------------- | ------------------------------------------------------------------------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度                                 |
+| `--background`       | Background of the modal content<br /><br />自動翻訳: モーダルコンテンツの背景               |
+| `--border-color`     | Border color of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダーカラー   |
+| `--border-radius`    | Border radius of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダー半径    |
+| `--border-style`     | Border style of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダースタイル |
+| `--border-width`     | Border width of the modal content<br /><br />自動翻訳: モーダルコンテンツのボーダー幅       |
+| `--height`           | Height of the modal<br /><br />自動翻訳: モーダルの高さ                                     |
+| `--max-height`       | Maximum height of the modal<br /><br />自動翻訳: モーダルの最大高さ                         |
+| `--max-width`        | Maximum width of the modal<br /><br />自動翻訳: モーダルの最大幅                            |
+| `--min-height`       | Minimum height of the modal<br /><br />自動翻訳: モーダルの最小高さ                         |
+| `--min-width`        | Minimum width of the modal<br /><br />自動翻訳: モーダルの最小幅                            |
+| `--width`            | Width of the modal<br /><br />自動翻訳: モーダルの幅                                        |
diff --git a/static/auto-generated/modal/events.md b/static/auto-generated/modal/events.md
index 864cf96e6c7..c087771ba31 100644
--- a/static/auto-generated/modal/events.md
+++ b/static/auto-generated/modal/events.md
@@ -1,13 +1,11 @@
-
-| Name | Description |
-| --- | --- |
-| `didDismiss` | Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.<br /><br />自動翻訳: モーダルが解散した後に発せられる。ionModalDidDismiss の略記です。 |
-| `didPresent` | Emitted after the modal has presented. Shorthand for ionModalDidPresent.<br /><br />自動翻訳: モードが提示された後に発せられる。ionModalDidPresent の略記です。 |
-| `ionBreakpointDidChange` | Emitted after the modal breakpoint has changed.<br /><br />自動翻訳: モードブレークポイントが変更された後に発せられる。 |
-| `ionModalDidDismiss` | Emitted after the modal has dismissed.<br /><br />自動翻訳: モーダルが終了した後に発行されます。 |
-| `ionModalDidPresent` | Emitted after the modal has presented.<br /><br />自動翻訳: モードが提示された後に発せられる。 |
-| `ionModalWillDismiss` | Emitted before the modal has dismissed.<br /><br />自動翻訳: モーダルが解散する前に発行される。 |
-| `ionModalWillPresent` | Emitted before the modal has presented.<br /><br />自動翻訳: モーダルが提示される前に発せられる。 |
-| `willDismiss` | Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.<br /><br />自動翻訳: モーダルが解散する前に発せられる。ionModalWillDismiss の略記です。 |
-| `willPresent` | Emitted before the modal has presented. Shorthand for ionModalWillPresent.<br /><br />自動翻訳: モーダルが提示される前に発せられる。ionModalWillPresent の略記です。 |
-
+| Name                     | Description                                                                                                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `didDismiss`             | Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.<br /><br />自動翻訳: モーダルが解散した後に発せられる。ionModalDidDismiss の略記です。      |
+| `didPresent`             | Emitted after the modal has presented. Shorthand for ionModalDidPresent.<br /><br />自動翻訳: モードが提示された後に発せられる。ionModalDidPresent の略記です。      |
+| `ionBreakpointDidChange` | Emitted after the modal breakpoint has changed.<br /><br />自動翻訳: モードブレークポイントが変更された後に発せられる。                                              |
+| `ionModalDidDismiss`     | Emitted after the modal has dismissed.<br /><br />自動翻訳: モーダルが終了した後に発行されます。                                                                     |
+| `ionModalDidPresent`     | Emitted after the modal has presented.<br /><br />自動翻訳: モードが提示された後に発せられる。                                                                       |
+| `ionModalWillDismiss`    | Emitted before the modal has dismissed.<br /><br />自動翻訳: モーダルが解散する前に発行される。                                                                      |
+| `ionModalWillPresent`    | Emitted before the modal has presented.<br /><br />自動翻訳: モーダルが提示される前に発せられる。                                                                    |
+| `willDismiss`            | Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.<br /><br />自動翻訳: モーダルが解散する前に発せられる。ionModalWillDismiss の略記です。   |
+| `willPresent`            | Emitted before the modal has presented. Shorthand for ionModalWillPresent.<br /><br />自動翻訳: モーダルが提示される前に発せられる。ionModalWillPresent の略記です。 |
diff --git a/static/auto-generated/modal/methods.md b/static/auto-generated/modal/methods.md
index d73731d89d1..dc1bd008222 100644
--- a/static/auto-generated/modal/methods.md
+++ b/static/auto-generated/modal/methods.md
@@ -1,50 +1,41 @@
-
-
 ### dismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Dismiss the modal overlay after it has been presented.<br /><br />自動翻訳: モーダルオーバーレイが表示された後、それを解除する。 |
-| **Signature** | `dismiss(data?: any, role?: string) => Promise<boolean>` |
-
+| **Signature**   | `dismiss(data?: any, role?: string) => Promise<boolean>`                                                                         |
 
 ### getCurrentBreakpoint
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns the current breakpoint of a sheet style modal<br /><br />自動翻訳: シートスタイルモーダルの現在のブレークポイントを返します。 |
-| **Signature** | `getCurrentBreakpoint() => Promise<number ｜ undefined>` |
-
+| **Signature**   | `getCurrentBreakpoint() => Promise<number ｜ undefined>`                                                                              |
 
 ### onDidDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the modal did dismiss.<br /><br />自動翻訳: モーダルが解除されたときに解決するプロミスを返します。 |
-| **Signature** | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                             |
 
 ### onWillDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the modal will dismiss.<br /><br />自動翻訳: モーダルがいつ解散するかを解決するプロミスを返します。 |
-| **Signature** | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                             |
 
 ### present
 
-| | |
-| --- | --- |
+|                 |                                                                                                                        |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Present the modal overlay after it has been created.<br /><br />自動翻訳: モーダルオーバーレイを作成した後に提示する。 |
-| **Signature** | `present() => Promise<void>` |
-
+| **Signature**   | `present() => Promise<void>`                                                                                           |
 
 ### setCurrentBreakpoint
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.<br /><br />自動翻訳: シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。 |
-| **Signature** | `setCurrentBreakpoint(breakpoint: number) => Promise<void>` |
-
-
+| **Signature**   | `setCurrentBreakpoint(breakpoint: number) => Promise<void>`                                                                                                                                                                                                                                   |
diff --git a/static/auto-generated/modal/parts.md b/static/auto-generated/modal/parts.md
index b6a7193b6eb..58e0072af66 100644
--- a/static/auto-generated/modal/parts.md
+++ b/static/auto-generated/modal/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `backdrop` | The `ion-backdrop` element.<br /><br />自動翻訳: ion-backdrop`要素です。 |
-| `content` | The wrapper element for the default slot.<br /><br />自動翻訳: デフォルトスロットのラッパー要素です。 |
-| `handle` | The handle that is displayed at the top of the sheet modal when `handle="true"`.<br /><br />自動翻訳: handle="true"`のときにシートモーダルの上部に表示されるハンドルです。 |
-
+| Name       | Description                                                                                                                                                                |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `backdrop` | The `ion-backdrop` element.<br /><br />自動翻訳: ion-backdrop`要素です。                                                                                                   |
+| `content`  | The wrapper element for the default slot.<br /><br />自動翻訳: デフォルトスロットのラッパー要素です。                                                                      |
+| `handle`   | The handle that is displayed at the top of the sheet modal when `handle="true"`.<br /><br />自動翻訳: handle="true"`のときにシートモーダルの上部に表示されるハンドルです。 |
diff --git a/static/auto-generated/modal/props.md b/static/auto-generated/modal/props.md
index 3edfe1c5a4c..0d996b01259 100644
--- a/static/auto-generated/modal/props.md
+++ b/static/auto-generated/modal/props.md
@@ -1,209 +1,170 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                            |
+| --------------- | ---------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the modal will animate.<br /><br />自動翻訳: `true`の場合、モーダルはアニメーションを行います。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
-
-### backdropBreakpoint 
-
-| | |
-| --- | --- |
-| **Description** | A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.<br /><br />自動翻訳: シートモーダル使用時に背景がフェードインし始めるポイントを示す0～1の10進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。 |
-| **Attribute** | `backdrop-breakpoint` |
-| **Type** | `number` |
-| **Default** | `0` |
+| **Attribute**   | `animated`                                                                                                 |
+| **Type**        | `boolean`                                                                                                  |
+| **Default**     | `true`                                                                                                     |
 
+### backdropBreakpoint
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.<br /><br />自動翻訳: シートモーダル使用時に背景がフェードインし始めるポイントを示す 0 ～ 1 の 10 進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。 |
+| **Attribute**   | `backdrop-breakpoint`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `0`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
-### backdropDismiss 
+### backdropDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the modal will be dismissed when the backdrop is clicked.<br /><br />自動翻訳: `true`の場合、バックドロップがクリックされるとモーダルは解除されます。 |
-| **Attribute** | `backdrop-dismiss` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
-
-### breakpoints 
-
-| | |
-| --- | --- |
-| **Description** | The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]<br /><br />自動翻訳: シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1] |
-| **Attribute** | `undefined` |
-| **Type** | `number[] ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `backdrop-dismiss`                                                                                                                                               |
+| **Type**        | `boolean`                                                                                                                                                        |
+| **Default**     | `true`                                                                                                                                                           |
 
+### breakpoints
 
-### canDismiss 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]<br /><br />自動翻訳: シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の 1 つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1] |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Type**        | `number[] ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
-| | |
-| --- | --- |
-| **Description** | Determines whether or not a modal can dismiss when calling the `dismiss` method.<br /><br />If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.<br /><br />自動翻訳: モーダルが `dismiss` メソッドを呼び出したときに、退出できるかどうかを決定します。  値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。 |
-| **Attribute** | `can-dismiss` |
-| **Type** | `((data?: any, role?: string ｜ undefined) => Promise<boolean>) ｜ boolean ｜ undefined` |
-| **Default** | `undefined` |
+### canDismiss
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Determines whether or not a modal can dismiss when calling the `dismiss` method.<br /><br />If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.<br /><br />自動翻訳: モーダルが `dismiss` メソッドを呼び出したときに、退出できるかどうかを決定します。 値が `true` または値の関数が `true` を返す場合、モーダルは終了しようとするときに閉じます。値が `false` または値の関数が `false` を返す場合、モーダルは終了しようとしたときに閉じません。 |
+| **Attribute**   | `can-dismiss`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `((data?: any, role?: string ｜ undefined) => Promise<boolean>) ｜ boolean ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
+### enterAnimation
 
-### enterAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the modal is presented.<br /><br />自動翻訳: モーダルが表示されたときに使用するアニメーション。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                           |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                               |
+| **Default**     | `undefined`                                                                                                           |
 
-### handle 
+### handle
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.<br /><br />自動翻訳: シートモーダルの上部に表示される水平線です。breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。 |
-| **Attribute** | `handle` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `handle`                                                                                                                                                                                                                                                                                                           |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                                                                                                                                                                             |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                        |
 
-### handleBehavior 
+### handleBehavior
 
-| | |
-| --- | --- |
-| **Description** | The interaction behavior for the sheet modal when the handle is pressed.<br /><br />Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.<br /><br />Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).<br /><br />自動翻訳: ハンドルが押されたときのシートモーダルのインタラクション動作です。  デフォルトは `"none"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle` プロパティが `false` に設定されている場合、または `breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。 |
-| **Attribute** | `handle-behavior` |
-| **Type** | `"cycle" ｜ "none" ｜ undefined` |
-| **Default** | `'none'` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The interaction behavior for the sheet modal when the handle is pressed.<br /><br />Defaults to `"none"`, which means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.<br /><br />Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).<br /><br />自動翻訳: ハンドルが押されたときのシートモーダルのインタラクション動作です。 デフォルトは `"none"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。  ハンドルの動作は、`handle`プロパティが`false`に設定されている場合、または`breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。 |
+| **Attribute**   | `handle-behavior`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `"cycle" ｜ "none" ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `'none'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
+### htmlAttributes
 
-
-### htmlAttributes 
-
-| | |
-| --- | --- |
+|                 |                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------- |
 | **Description** | Additional attributes to pass to the modal.<br /><br />自動翻訳: モーダルに渡す追加属性。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                               |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                    |
+| **Default**     | `undefined`                                                                               |
 
+### initialBreakpoint
 
-### initialBreakpoint 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array.<br /><br />自動翻訳: シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。 |
-| **Attribute** | `initial-breakpoint` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `initial-breakpoint`                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                  |
 
+### isOpen
 
-### isOpen 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.<br /><br />自動翻訳: `true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。 |
-| **Attribute** | `is-open` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### keepContentsMounted 
-
-| | |
-| --- | --- |
-| **Description** | If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.<br /><br />Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.<br /><br />自動翻訳: `true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。  注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。 |
-| **Attribute** | `keep-contents-mounted` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `is-open`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 
+### keepContentsMounted
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.<br /><br />Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.<br /><br />自動翻訳: `true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。 注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。 |
+| **Attribute**   | `keep-contents-mounted`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 
-### keyboardClose 
+### keyboardClose
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented.<br /><br />自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
-| **Attribute** | `keyboard-close` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `keyboard-close`                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                                     |
 
+### leaveAnimation
 
-
-### leaveAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the modal is dismissed.<br /><br />自動翻訳: モーダルが解除されたときに使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                               |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                   |
+| **Default**     | `undefined`                                                                                                               |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### presentingElement
 
-### presentingElement 
+|                 |                                                                                                                                                                                                                                                                                                             |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.<br /><br />自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOS モードでのみ適用されます。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `HTMLElement ｜ undefined`                                                                                                                                                                                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                 |
 
-| | |
-| --- | --- |
-| **Description** | The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.<br /><br />自動翻訳: モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOSモードでのみ適用されます。 |
-| **Attribute** | `undefined` |
-| **Type** | `HTMLElement ｜ undefined` |
-| **Default** | `undefined` |
+### showBackdrop
 
-
-
-### showBackdrop 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.<br /><br />自動翻訳: `true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。 |
-| **Attribute** | `show-backdrop` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `show-backdrop`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
 ### swipeToClose (deprecated)
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.<br /><br />自動翻訳: `true`の場合、スワイプでモーダルを解除することができます。iOSモードでのみ適用されます。 _Deprecated_ - To prevent modals from dismissing, use canDismiss instead. |
-| **Attribute** | `swipe-to-close` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### trigger 
-
-| | |
-| --- | --- |
-| **Description** | An ID corresponding to the trigger element that causes the modal to open when clicked.<br /><br />自動翻訳: クリックされたときにモーダルを開かせるトリガー要素に対応するIDです。 |
-| **Attribute** | `trigger` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+|                 |                                                                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.<br /><br />自動翻訳: `true`の場合、スワイプでモーダルを解除することができます。iOS モードでのみ適用されます。 _Deprecated_ - To prevent modals from dismissing, use canDismiss instead. |
+| **Attribute**   | `swipe-to-close`                                                                                                                                                                                                                                                 |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                        |
+| **Default**     | `false`                                                                                                                                                                                                                                                          |
+
+### trigger
+
+|                 |                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | An ID corresponding to the trigger element that causes the modal to open when clicked.<br /><br />自動翻訳: クリックされたときにモーダルを開かせるトリガー要素に対応する ID です。 |
+| **Attribute**   | `trigger`                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                        |
diff --git a/static/auto-generated/modal/slots.md b/static/auto-generated/modal/slots.md
index 2377b0697e2..b2e6124d8ad 100644
--- a/static/auto-generated/modal/slots.md
+++ b/static/auto-generated/modal/slots.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed inside of the `.modal-content` element.<br /><br />自動翻訳: コンテンツは `.modal-content` 要素の内側に配置されます。 |
-
+| Name | Description                                                                                                                             |
+| ---- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| ``   | Content is placed inside of the `.modal-content` element.<br /><br />自動翻訳: コンテンツは `.modal-content` 要素の内側に配置されます。 |
diff --git a/static/auto-generated/nav-link/custom-props.md b/static/auto-generated/nav-link/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/nav-link/custom-props.md
+++ b/static/auto-generated/nav-link/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/nav-link/events.md b/static/auto-generated/nav-link/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/nav-link/events.md
+++ b/static/auto-generated/nav-link/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/nav-link/methods.md b/static/auto-generated/nav-link/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/nav-link/methods.md
+++ b/static/auto-generated/nav-link/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/nav-link/parts.md b/static/auto-generated/nav-link/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/nav-link/parts.md
+++ b/static/auto-generated/nav-link/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/nav-link/props.md b/static/auto-generated/nav-link/props.md
index 55b623aafd4..817079889fc 100644
--- a/static/auto-generated/nav-link/props.md
+++ b/static/auto-generated/nav-link/props.md
@@ -1,44 +1,35 @@
+### component
 
+|                 |                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.<br /><br />自動翻訳: ナビゲート先のコンポーネント。routerDirection`が `"forward"`または`"root"` である場合にのみ使用する。 |
+| **Attribute**   | `component`                                                                                                                                                                                                         |
+| **Type**        | `Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined`                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                         |
 
-### component 
+### componentProps
 
-| | |
-| --- | --- |
-| **Description** | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.<br /><br />自動翻訳: ナビゲート先のコンポーネント。routerDirection`が `"forward"` または `"root"` である場合にのみ使用する。 |
-| **Attribute** | `component` |
-| **Type** | `Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.<br /><br />自動翻訳: コンポーネントに props として渡したいデータ。routerDirection"`が`"forward"`または`"root"` である場合のみ使用する。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                               |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                                               |
 
+### routerAnimation
 
-
-### componentProps 
-
-| | |
-| --- | --- |
-| **Description** | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.<br /><br />自動翻訳: コンポーネントにpropsとして渡したいデータ。routerDirection"` が `"forward"` または `"root"` である場合のみ使用する。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
-
-
-### routerAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The transition animation when navigating to another page.<br /><br />自動翻訳: 別ページに移動する際の遷移アニメーション。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                               |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                   |
+| **Default**     | `undefined`                                                                                                               |
 
+### routerDirection
 
-### routerDirection 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The transition direction when navigating to another page.<br /><br />自動翻訳: 別ページに移動する際の遷移方向です。 |
-| **Attribute** | `router-direction` |
-| **Type** | `"back" ｜ "forward" ｜ "root"` |
-| **Default** | `'forward'` |
-
+| **Attribute**   | `router-direction`                                                                                                  |
+| **Type**        | `"back" ｜ "forward" ｜ "root"`                                                                                     |
+| **Default**     | `'forward'`                                                                                                         |
diff --git a/static/auto-generated/nav-link/slots.md b/static/auto-generated/nav-link/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/nav-link/slots.md
+++ b/static/auto-generated/nav-link/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/nav/custom-props.md b/static/auto-generated/nav/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/nav/custom-props.md
+++ b/static/auto-generated/nav/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/nav/events.md b/static/auto-generated/nav/events.md
index 944597284d8..b1c4949fac5 100644
--- a/static/auto-generated/nav/events.md
+++ b/static/auto-generated/nav/events.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `ionNavDidChange` | Event fired when the nav has changed components<br /><br />自動翻訳: ナビのコンポーネントが変更されたときに発生するイベント |
-| `ionNavWillChange` | Event fired when the nav will change components<br /><br />自動翻訳: ナビコンポーネントが変更されたときに発生するイベント |
-
+| Name               | Description                                                                                                                 |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| `ionNavDidChange`  | Event fired when the nav has changed components<br /><br />自動翻訳: ナビのコンポーネントが変更されたときに発生するイベント |
+| `ionNavWillChange` | Event fired when the nav will change components<br /><br />自動翻訳: ナビコンポーネントが変更されたときに発生するイベント   |
diff --git a/static/auto-generated/nav/methods.md b/static/auto-generated/nav/methods.md
index 011eacec93c..962c3ecd811 100644
--- a/static/auto-generated/nav/methods.md
+++ b/static/auto-generated/nav/methods.md
@@ -1,106 +1,90 @@
-
-
 ### canGoBack
 
-| | |
-| --- | --- |
+|                 |                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns `true` if the current view can go back.<br /><br />自動翻訳: 現在のビューが戻ることができる場合は `true` を返します。 |
-| **Signature** | `canGoBack(view?: ViewController) => Promise<boolean>` |
-
+| **Signature**   | `canGoBack(view?: ViewController) => Promise<boolean>`                                                                        |
 
 ### getActive
 
-| | |
-| --- | --- |
+|                 |                                                                          |
+| --------------- | ------------------------------------------------------------------------ |
 | **Description** | Get the active view.<br /><br />自動翻訳: アクティブビューを取得します。 |
-| **Signature** | `getActive() => Promise<ViewController ｜ undefined>` |
-
+| **Signature**   | `getActive() => Promise<ViewController ｜ undefined>`                    |
 
 ### getByIndex
 
-| | |
-| --- | --- |
+|                 |                                                                                                            |
+| --------------- | ---------------------------------------------------------------------------------------------------------- |
 | **Description** | Get the view at the specified index.<br /><br />自動翻訳: 指定されたインデックスにあるビューを取得します。 |
-| **Signature** | `getByIndex(index: number) => Promise<ViewController ｜ undefined>` |
-
+| **Signature**   | `getByIndex(index: number) => Promise<ViewController ｜ undefined>`                                        |
 
 ### getPrevious
 
-| | |
-| --- | --- |
-| **Description** | Get the previous view.<br /><br />自動翻訳: 前のビューを取得します。 |
-| **Signature** | `getPrevious(view?: ViewController) => Promise<ViewController ｜ undefined>` |
-
+|                 |                                                                              |
+| --------------- | ---------------------------------------------------------------------------- |
+| **Description** | Get the previous view.<br /><br />自動翻訳: 前のビューを取得します。         |
+| **Signature**   | `getPrevious(view?: ViewController) => Promise<ViewController ｜ undefined>` |
 
 ### insert
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.<br /><br />自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。 |
-| **Signature** | `insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+| **Signature**   | `insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`                                                                                                                                           |
 
 ### insertPages
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.<br /><br />自動翻訳: 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入する。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。 |
-| **Signature** | `insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+| **Signature**   | `insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`                                                                                                                                                                                                                                        |
 
 ### pop
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Pop a component off of the navigation stack. Navigates back from the current component.<br /><br />自動翻訳: ナビゲーションスタックからコンポーネントをポップオフする。現在のコンポーネントからナビゲートして戻る。 |
-| **Signature** | `pop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+| **Signature**   | `pop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`                                                                                                                                       |
 
 ### popTo
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Pop to a specific index in the navigation stack.<br /><br />自動翻訳: ナビゲーションスタック内の特定のインデックスにポップします。 |
-| **Signature** | `popTo(indexOrViewCtrl: number ｜ ViewController, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+| **Signature**   | `popTo(indexOrViewCtrl: number ｜ ViewController, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`         |
 
 ### popToRoot
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Navigate back to the root of the stack, no matter how far back that is.<br /><br />自動翻訳: スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。 |
-| **Signature** | `popToRoot(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+| **Signature**   | `popToRoot(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`                                                                             |
 
 ### push
 
-| | |
-| --- | --- |
-| **Description** | Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.<br /><br />自動翻訳: 新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。 |
-| **Signature** | `push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.<br /><br />自動翻訳: 新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParams からアクセスできます。 |
+| **Signature**   | `push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`                                                                                                                                                                                                     |
 
 ### removeIndex
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Removes a component from the navigation stack at the specified index.<br /><br />自動翻訳: 指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。 |
-| **Signature** | `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+| **Signature**   | `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`                                               |
 
 ### setPages
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.<br /><br />自動翻訳: 現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。 |
-| **Signature** | `setPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
+| **Signature**   | `setPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>`                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
 ### setRoot
 
-| | |
-| --- | --- |
-| **Description** | Set the root for the current navigation stack to a component.<br /><br />自動翻訳: 現在のナビゲーションスタックのルートをコンポーネントに設定します。 |
-| **Signature** | `setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
-
-
+|                 |                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Set the root for the current navigation stack to a component.<br /><br />自動翻訳: 現在のナビゲーションスタックのルートをコンポーネントに設定します。               |
+| **Signature**   | `setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>` |
diff --git a/static/auto-generated/nav/parts.md b/static/auto-generated/nav/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/nav/parts.md
+++ b/static/auto-generated/nav/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/nav/props.md b/static/auto-generated/nav/props.md
index a2ac606d47c..00f64cfd5de 100644
--- a/static/auto-generated/nav/props.md
+++ b/static/auto-generated/nav/props.md
@@ -1,55 +1,44 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the nav should animate the transition of components.<br /><br />自動翻訳: `true`の場合、コンポーネントの遷移をアニメーションで表現する。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `animated`                                                                                                                                          |
+| **Type**        | `boolean`                                                                                                                                           |
+| **Default**     | `true`                                                                                                                                              |
 
+### animation
 
-### animation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.<br /><br />自動翻訳: デフォルトでは、`ion-nav` はモード（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
-### root 
+### root
 
-| | |
-| --- | --- |
-| **Description** | Root NavComponent to load<br /><br />自動翻訳: ロードするルートNavComponent |
-| **Attribute** | `root` |
-| **Type** | `Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                              |
+| --------------- | ---------------------------------------------------------------------------- |
+| **Description** | Root NavComponent to load<br /><br />自動翻訳: ロードするルート NavComponent |
+| **Attribute**   | `root`                                                                       |
+| **Type**        | `Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined`   |
+| **Default**     | `undefined`                                                                  |
 
+### rootParams
 
-
-### rootParams 
-
-| | |
-| --- | --- |
+|                 |                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------- |
 | **Description** | Any parameters for the root component<br /><br />自動翻訳: ルートコンポーネントの任意のパラメータ |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                       |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                            |
+| **Default**     | `undefined`                                                                                       |
 
+### swipeGesture
 
-### swipeGesture 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If the nav component should allow for swipe-to-go-back.<br /><br />自動翻訳: ナビコンポーネントがスワイプで戻ることができるようにする場合。 |
-| **Attribute** | `swipe-gesture` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `swipe-gesture`                                                                                                                             |
+| **Type**        | `boolean ｜ undefined`                                                                                                                      |
+| **Default**     | `undefined`                                                                                                                                 |
diff --git a/static/auto-generated/nav/slots.md b/static/auto-generated/nav/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/nav/slots.md
+++ b/static/auto-generated/nav/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/note/custom-props.md b/static/auto-generated/note/custom-props.md
index 8399b9e8137..d61e7f96dcd 100644
--- a/static/auto-generated/note/custom-props.md
+++ b/static/auto-generated/note/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                       |
+| --------- | ------------------------------------------------- |
 | `--color` | Color of the note<br /><br />自動翻訳: ノートの色 |
-
diff --git a/static/auto-generated/note/events.md b/static/auto-generated/note/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/note/events.md
+++ b/static/auto-generated/note/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/note/methods.md b/static/auto-generated/note/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/note/methods.md
+++ b/static/auto-generated/note/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/note/parts.md b/static/auto-generated/note/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/note/parts.md
+++ b/static/auto-generated/note/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/note/props.md b/static/auto-generated/note/props.md
index 565c8944d7f..eb0c49ee657 100644
--- a/static/auto-generated/note/props.md
+++ b/static/auto-generated/note/props.md
@@ -1,22 +1,17 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/note/slots.md b/static/auto-generated/note/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/note/slots.md
+++ b/static/auto-generated/note/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/picker/custom-props.md b/static/auto-generated/picker/custom-props.md
index 28215669f62..f08d65012fa 100644
--- a/static/auto-generated/picker/custom-props.md
+++ b/static/auto-generated/picker/custom-props.md
@@ -1,17 +1,15 @@
-
-| Name | Description |
-| --- | --- |
-| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度 |
-| `--background` | Background of the picker<br /><br />自動翻訳: ピッカーの背景 |
-| `--background-rgb` | Background of the picker in rgb format<br /><br />自動翻訳: ピッカーの背景（rgb形式 |
-| `--border-color` | Border color of the picker<br /><br />自動翻訳: ピッカーのボーダーカラー |
-| `--border-radius` | Border radius of the picker<br /><br />自動翻訳: ピッカーのボーダー半径 |
-| `--border-style` | Border style of the picker<br /><br />自動翻訳: ピッカーのボーダースタイル |
-| `--border-width` | Border width of the picker<br /><br />自動翻訳: ピッカーのボーダー幅 |
-| `--height` | Height of the picker<br /><br />自動翻訳: ピッカーの高さ |
-| `--max-height` | Maximum height of the picker<br /><br />自動翻訳: ピッカーの最大高さ |
-| `--max-width` | Maximum width of the picker<br /><br />自動翻訳: ピッカーの最大幅 |
-| `--min-height` | Minimum height of the picker<br /><br />自動翻訳: ピッカーの最低高さ |
-| `--min-width` | Minimum width of the picker<br /><br />自動翻訳: ピッカーの最小幅 |
-| `--width` | Width of the picker<br /><br />自動翻訳: ピッカーの幅 |
-
+| Name                 | Description                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------ |
+| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度                          |
+| `--background`       | Background of the picker<br /><br />自動翻訳: ピッカーの背景                         |
+| `--background-rgb`   | Background of the picker in rgb format<br /><br />自動翻訳: ピッカーの背景（rgb 形式 |
+| `--border-color`     | Border color of the picker<br /><br />自動翻訳: ピッカーのボーダーカラー             |
+| `--border-radius`    | Border radius of the picker<br /><br />自動翻訳: ピッカーのボーダー半径              |
+| `--border-style`     | Border style of the picker<br /><br />自動翻訳: ピッカーのボーダースタイル           |
+| `--border-width`     | Border width of the picker<br /><br />自動翻訳: ピッカーのボーダー幅                 |
+| `--height`           | Height of the picker<br /><br />自動翻訳: ピッカーの高さ                             |
+| `--max-height`       | Maximum height of the picker<br /><br />自動翻訳: ピッカーの最大高さ                 |
+| `--max-width`        | Maximum width of the picker<br /><br />自動翻訳: ピッカーの最大幅                    |
+| `--min-height`       | Minimum height of the picker<br /><br />自動翻訳: ピッカーの最低高さ                 |
+| `--min-width`        | Minimum width of the picker<br /><br />自動翻訳: ピッカーの最小幅                    |
+| `--width`            | Width of the picker<br /><br />自動翻訳: ピッカーの幅                                |
diff --git a/static/auto-generated/picker/events.md b/static/auto-generated/picker/events.md
index ac8b0123188..b29429b8b3a 100644
--- a/static/auto-generated/picker/events.md
+++ b/static/auto-generated/picker/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionPickerDidDismiss` | Emitted after the picker has dismissed.<br /><br />自動翻訳: ピッカーが解散した後に発せられる。 |
-| `ionPickerDidPresent` | Emitted after the picker has presented.<br /><br />自動翻訳: ピッカーが提示された後に発せられる。 |
-| `ionPickerWillDismiss` | Emitted before the picker has dismissed.<br /><br />自動翻訳: ピッカーが解散する前に発行される。 |
+| Name                   | Description                                                                                        |
+| ---------------------- | -------------------------------------------------------------------------------------------------- |
+| `ionPickerDidDismiss`  | Emitted after the picker has dismissed.<br /><br />自動翻訳: ピッカーが解散した後に発せられる。    |
+| `ionPickerDidPresent`  | Emitted after the picker has presented.<br /><br />自動翻訳: ピッカーが提示された後に発せられる。  |
+| `ionPickerWillDismiss` | Emitted before the picker has dismissed.<br /><br />自動翻訳: ピッカーが解散する前に発行される。   |
 | `ionPickerWillPresent` | Emitted before the picker has presented.<br /><br />自動翻訳: ピッカーが提示される前に発せられる。 |
-
diff --git a/static/auto-generated/picker/methods.md b/static/auto-generated/picker/methods.md
index 42335efaedb..8b8479cf659 100644
--- a/static/auto-generated/picker/methods.md
+++ b/static/auto-generated/picker/methods.md
@@ -1,42 +1,34 @@
-
-
 ### dismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Dismiss the picker overlay after it has been presented.<br /><br />自動翻訳: ピッカー・オーバーレイが表示された後、それを解除する。 |
-| **Signature** | `dismiss(data?: any, role?: string) => Promise<boolean>` |
-
+| **Signature**   | `dismiss(data?: any, role?: string) => Promise<boolean>`                                                                            |
 
 ### getColumn
 
-| | |
-| --- | --- |
+|                 |                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------- |
 | **Description** | Get the column that matches the specified name.<br /><br />自動翻訳: 指定された名前に一致するカラムを取得します。 |
-| **Signature** | `getColumn(name: string) => Promise<PickerColumn ｜ undefined>` |
-
+| **Signature**   | `getColumn(name: string) => Promise<PickerColumn ｜ undefined>`                                                   |
 
 ### onDidDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the picker did dismiss.<br /><br />自動翻訳: ピッカーが解散したことを解決するプロミスを返します。 |
-| **Signature** | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                            |
 
 ### onWillDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the picker will dismiss.<br /><br />自動翻訳: ピッカーが解散するタイミングを解決するプロミスを返します。 |
-| **Signature** | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                  |
 
 ### present
 
-| | |
-| --- | --- |
+|                 |                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Present the picker overlay after it has been created.<br /><br />自動翻訳: ピッカー・オーバーレイを作成した後に提示する。 |
-| **Signature** | `present() => Promise<void>` |
-
-
+| **Signature**   | `present() => Promise<void>`                                                                                              |
diff --git a/static/auto-generated/picker/parts.md b/static/auto-generated/picker/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/picker/parts.md
+++ b/static/auto-generated/picker/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/picker/props.md b/static/auto-generated/picker/props.md
index a97531d300e..ad0737f85dc 100644
--- a/static/auto-generated/picker/props.md
+++ b/static/auto-generated/picker/props.md
@@ -1,132 +1,107 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                             |
+| --------------- | ----------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the picker will animate.<br /><br />自動翻訳: `true`の場合、ピッカーはアニメーションを行います。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `animated`                                                                                                  |
+| **Type**        | `boolean`                                                                                                   |
+| **Default**     | `true`                                                                                                      |
 
-### backdropDismiss 
+### backdropDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the picker will be dismissed when the backdrop is clicked.<br /><br />自動翻訳: `true`の場合、バックドロップがクリックされるとピッカーが解除される。 |
-| **Attribute** | `backdrop-dismiss` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `backdrop-dismiss`                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                                       |
+| **Default**     | `true`                                                                                                                                                          |
 
+### buttons
 
-
-### buttons 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Array of buttons to be displayed at the top of the picker.<br /><br />自動翻訳: ピッカーの上部に表示されるボタンの配列。 |
-| **Attribute** | `undefined` |
-| **Type** | `PickerButton[]` |
-| **Default** | `[]` |
-
+| **Attribute**   | `undefined`                                                                                                              |
+| **Type**        | `PickerButton[]`                                                                                                         |
+| **Default**     | `[]`                                                                                                                     |
 
+### columns
 
-### columns 
-
-| | |
-| --- | --- |
+|                 |                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------- |
 | **Description** | Array of columns to be displayed in the picker.<br /><br />自動翻訳: ピッカーに表示されるカラムの配列。 |
-| **Attribute** | `undefined` |
-| **Type** | `PickerColumn[]` |
-| **Default** | `[]` |
-
-
+| **Attribute**   | `undefined`                                                                                             |
+| **Type**        | `PickerColumn[]`                                                                                        |
+| **Default**     | `[]`                                                                                                    |
 
-### cssClass 
+### cssClass
 
-| | |
-| --- | --- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
-| **Attribute** | `css-class` |
-| **Type** | `string ｜ string[] ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
+| **Attribute**   | `css-class`                                                                                                                                                                                                                               |
+| **Type**        | `string ｜ string[] ｜ undefined`                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                               |
 
+### duration
 
-
-### duration 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Number of milliseconds to wait before dismissing the picker.<br /><br />自動翻訳: ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。 |
-| **Attribute** | `duration` |
-| **Type** | `number` |
-| **Default** | `0` |
-
+| **Attribute**   | `duration`                                                                                                                                   |
+| **Type**        | `number`                                                                                                                                     |
+| **Default**     | `0`                                                                                                                                          |
 
+### enterAnimation
 
-### enterAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                        |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the picker is presented.<br /><br />自動翻訳: ピッカーが表示されたときに使用するアニメーション。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                            |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                |
+| **Default**     | `undefined`                                                                                                            |
 
-### htmlAttributes 
+### htmlAttributes
 
-| | |
-| --- | --- |
+|                 |                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------ |
 | **Description** | Additional attributes to pass to the picker.<br /><br />自動翻訳: ピッカーに渡す追加属性。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
+| **Attribute**   | `undefined`                                                                                |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                     |
+| **Default**     | `undefined`                                                                                |
 
+### keyboardClose
 
-
-### keyboardClose 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented.<br /><br />自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
-| **Attribute** | `keyboard-close` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `keyboard-close`                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                                     |
 
+### leaveAnimation
 
-### leaveAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the picker is dismissed.<br /><br />自動翻訳: ピッカーが解除されたときに使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                    |
+| **Default**     | `undefined`                                                                                                                |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### showBackdrop
 
-
-### showBackdrop 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a backdrop will be displayed behind the picker.<br /><br />自動翻訳: `true`の場合、ピッカーの後ろに背景が表示されます。 |
-| **Attribute** | `show-backdrop` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `show-backdrop`                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                          |
+| **Default**     | `true`                                                                                                                             |
diff --git a/static/auto-generated/picker/slots.md b/static/auto-generated/picker/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/picker/slots.md
+++ b/static/auto-generated/picker/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/popover/custom-props.md b/static/auto-generated/popover/custom-props.md
index 43701cc2a51..2f8931b041d 100644
--- a/static/auto-generated/popover/custom-props.md
+++ b/static/auto-generated/popover/custom-props.md
@@ -1,15 +1,13 @@
-
-| Name | Description |
-| --- | --- |
-| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度 |
-| `--background` | Background of the popover<br /><br />自動翻訳: ポップオーバーの背景 |
-| `--box-shadow` | Box shadow of the popover<br /><br />自動翻訳: ポップオーバーのボックスシャドウ |
-| `--height` | Height of the popover<br /><br />自動翻訳: ポップオーバーの高さ |
-| `--max-height` | Maximum height of the popover<br /><br />自動翻訳: ポップオーバーの最大高さ |
-| `--max-width` | Maximum width of the popover<br /><br />自動翻訳: ポップオーバーの最大幅 |
-| `--min-height` | Minimum height of the popover<br /><br />自動翻訳: ポップオーバーの高さの最小値 |
-| `--min-width` | Minimum width of the popover<br /><br />自動翻訳: ポップオーバーの最小幅 |
-| `--offset-x` | The amount to move the popover by on the x-axis<br /><br />自動翻訳: ポップオーバーをX軸方向に移動させる量 |
-| `--offset-y` | The amount to move the popover by on the y-axis<br /><br />自動翻訳: ポップオーバーをY軸方向に移動させる量を指定します。 |
-| `--width` | Width of the popover<br /><br />自動翻訳: ポップオーバーの幅 |
-
+| Name                 | Description                                                                                                                |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop<br /><br />自動翻訳: 背景の不透明度                                                                |
+| `--background`       | Background of the popover<br /><br />自動翻訳: ポップオーバーの背景                                                        |
+| `--box-shadow`       | Box shadow of the popover<br /><br />自動翻訳: ポップオーバーのボックスシャドウ                                            |
+| `--height`           | Height of the popover<br /><br />自動翻訳: ポップオーバーの高さ                                                            |
+| `--max-height`       | Maximum height of the popover<br /><br />自動翻訳: ポップオーバーの最大高さ                                                |
+| `--max-width`        | Maximum width of the popover<br /><br />自動翻訳: ポップオーバーの最大幅                                                   |
+| `--min-height`       | Minimum height of the popover<br /><br />自動翻訳: ポップオーバーの高さの最小値                                            |
+| `--min-width`        | Minimum width of the popover<br /><br />自動翻訳: ポップオーバーの最小幅                                                   |
+| `--offset-x`         | The amount to move the popover by on the x-axis<br /><br />自動翻訳: ポップオーバーを X 軸方向に移動させる量               |
+| `--offset-y`         | The amount to move the popover by on the y-axis<br /><br />自動翻訳: ポップオーバーを Y 軸方向に移動させる量を指定します。 |
+| `--width`            | Width of the popover<br /><br />自動翻訳: ポップオーバーの幅                                                               |
diff --git a/static/auto-generated/popover/events.md b/static/auto-generated/popover/events.md
index ef2059379fb..96957438187 100644
--- a/static/auto-generated/popover/events.md
+++ b/static/auto-generated/popover/events.md
@@ -1,12 +1,10 @@
-
-| Name | Description |
-| --- | --- |
-| `didDismiss` | Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.<br /><br />自動翻訳: ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。 |
-| `didPresent` | Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.<br /><br />自動翻訳: ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。 |
-| `ionPopoverDidDismiss` | Emitted after the popover has dismissed.<br /><br />自動翻訳: ポップオーバーが解除された後に発行されます。 |
-| `ionPopoverDidPresent` | Emitted after the popover has presented.<br /><br />自動翻訳: ポップオーバーが表示された後に発行されます。 |
-| `ionPopoverWillDismiss` | Emitted before the popover has dismissed.<br /><br />自動翻訳: ポップオーバーが解除される前に発行されます。 |
-| `ionPopoverWillPresent` | Emitted before the popover has presented.<br /><br />自動翻訳: ポップオーバーが表示される前に発行されます。 |
-| `willDismiss` | Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.<br /><br />自動翻訳: ポップオーバーが解散する前に発せられる。ionPopoverWillDismissの略記です。 |
-| `willPresent` | Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.<br /><br />自動翻訳: ポップオーバーが提示される前に発行されます。ionPopoverWillPresentの略記です。 |
-
+| Name                    | Description                                                                                                                                                                        |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `didDismiss`            | Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.<br /><br />自動翻訳: ポップオーバーが解散した後に発行されます。ionPopoverDidDismiss の略記です。      |
+| `didPresent`            | Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.<br /><br />自動翻訳: ポップオーバーが提示された後に発行されます。ionPopoverWillDismiss の略記です。  |
+| `ionPopoverDidDismiss`  | Emitted after the popover has dismissed.<br /><br />自動翻訳: ポップオーバーが解除された後に発行されます。                                                                         |
+| `ionPopoverDidPresent`  | Emitted after the popover has presented.<br /><br />自動翻訳: ポップオーバーが表示された後に発行されます。                                                                         |
+| `ionPopoverWillDismiss` | Emitted before the popover has dismissed.<br /><br />自動翻訳: ポップオーバーが解除される前に発行されます。                                                                        |
+| `ionPopoverWillPresent` | Emitted before the popover has presented.<br /><br />自動翻訳: ポップオーバーが表示される前に発行されます。                                                                        |
+| `willDismiss`           | Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.<br /><br />自動翻訳: ポップオーバーが解散する前に発せられる。ionPopoverWillDismiss の略記です。     |
+| `willPresent`           | Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.<br /><br />自動翻訳: ポップオーバーが提示される前に発行されます。ionPopoverWillPresent の略記です。 |
diff --git a/static/auto-generated/popover/methods.md b/static/auto-generated/popover/methods.md
index 9399a6d1871..bf1767f55be 100644
--- a/static/auto-generated/popover/methods.md
+++ b/static/auto-generated/popover/methods.md
@@ -1,34 +1,27 @@
-
-
 ### dismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Dismiss the popover overlay after it has been presented.<br /><br />自動翻訳: ポップオーバーオーバーレイが提示された後、それを解除する。 |
-| **Signature** | `dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>` |
-
+| **Signature**   | `dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>`                                                 |
 
 ### onDidDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the popover did dismiss.<br /><br />自動翻訳: ポップオーバーが解除されたタイミングを解決するプロミスを返します。 |
-| **Signature** | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                           |
 
 ### onWillDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Returns a promise that resolves when the popover will dismiss.<br /><br />自動翻訳: ポップオーバーが解除されるタイミングを解決するプロミスを返します。 |
-| **Signature** | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                           |
 
 ### present
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.<br /><br />自動翻訳: ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。 |
-| **Signature** | `present(event?: MouseEvent ｜ TouchEvent ｜ PointerEvent ｜ CustomEvent) => Promise<void>` |
-
-
+| **Signature**   | `present(event?: MouseEvent ｜ TouchEvent ｜ PointerEvent ｜ CustomEvent) => Promise<void>`                                                                                                                                                                                                                                                                                                                            |
diff --git a/static/auto-generated/popover/parts.md b/static/auto-generated/popover/parts.md
index 51e6a13a963..f18ad935ac0 100644
--- a/static/auto-generated/popover/parts.md
+++ b/static/auto-generated/popover/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `arrow` | The arrow that points to the reference element. Only applies on `ios` mode.<br /><br />自動翻訳: 参照要素を指し示す矢印。ios`モード時のみ適用される。 |
-| `backdrop` | The `ion-backdrop` element.<br /><br />自動翻訳: ion-backdrop`要素です。 |
-| `content` | The wrapper element for the default slot.<br /><br />自動翻訳: デフォルトスロットのラッパー要素です。 |
-
+| Name       | Description                                                                                                                                           |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `arrow`    | The arrow that points to the reference element. Only applies on `ios` mode.<br /><br />自動翻訳: 参照要素を指し示す矢印。ios`モード時のみ適用される。 |
+| `backdrop` | The `ion-backdrop` element.<br /><br />自動翻訳: ion-backdrop`要素です。                                                                              |
+| `content`  | The wrapper element for the default slot.<br /><br />自動翻訳: デフォルトスロットのラッパー要素です。                                                 |
diff --git a/static/auto-generated/popover/props.md b/static/auto-generated/popover/props.md
index 449a8a8e654..6dfaa08fe39 100644
--- a/static/auto-generated/popover/props.md
+++ b/static/auto-generated/popover/props.md
@@ -1,242 +1,197 @@
+### alignment
 
-
-### alignment 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.<br /><br />自動翻訳: ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `'center'` で、`md` モードでは `'start'` です。 |
-| **Attribute** | `alignment` |
-| **Type** | `"center" ｜ "end" ｜ "start" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `alignment`                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `"center" ｜ "end" ｜ "start" ｜ undefined`                                                                                                                                                                                                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                              |
 
+### animated
 
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the popover will animate.<br /><br />自動翻訳: `true`の場合、ポップオーバーはアニメーションを行います。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `animated`                                                                                                         |
+| **Type**        | `boolean`                                                                                                          |
+| **Default**     | `true`                                                                                                             |
 
-### arrow 
+### arrow
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.<br /><br />自動翻訳: `true`の場合、`ios`モードで動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。md` モードでは適用されない。 |
-| **Attribute** | `arrow` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `arrow`                                                                                                                                                                                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                    |
+| **Default**     | `true`                                                                                                                                                                                                                                                                                       |
 
+### backdropDismiss
 
-
-### backdropDismiss 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the popover will be dismissed when the backdrop is clicked.<br /><br />自動翻訳: `true`の場合、バックドロップがクリックされたときにポップオーバーが解除される。 |
-| **Attribute** | `backdrop-dismiss` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
-
-### component 
-
-| | |
-| --- | --- |
-| **Description** | The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.<br /><br />自動翻訳: ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでよい。 |
-| **Attribute** | `component` |
-| **Type** | `Function ｜ HTMLElement ｜ null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `backdrop-dismiss`                                                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                     |
 
+### component
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.<br /><br />自動翻訳: ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScript フレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでよい。 |
+| **Attribute**   | `component`                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `Function ｜ HTMLElement ｜ null ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
-### componentProps 
+### componentProps
 
-| | |
-| --- | --- |
-| **Description** | The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.<br /><br />自動翻訳: ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.<br /><br />自動翻訳: ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScript フレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接 props を設定すればよいのです。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                   |
 
+### dismissOnSelect
 
-
-### dismissOnSelect 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the popover will be automatically dismissed when the content has been clicked.<br /><br />自動翻訳: `true`の場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。 |
-| **Attribute** | `dismiss-on-select` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `dismiss-on-select`                                                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                                                       |
+| **Default**     | `false`                                                                                                                                                                                         |
 
+### enterAnimation
 
-### enterAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the popover is presented.<br /><br />自動翻訳: ポップオーバーが表示されたときに使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                       |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                           |
+| **Default**     | `undefined`                                                                                                                       |
 
-### event 
+### event
 
-| | |
-| --- | --- |
+|                 |                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The event to pass to the popover animation.<br /><br />自動翻訳: ポップオーバー・アニメーションに渡すイベントです。 |
-| **Attribute** | `event` |
-| **Type** | `any` |
-| **Default** | `undefined` |
+| **Attribute**   | `event`                                                                                                             |
+| **Type**        | `any`                                                                                                               |
+| **Default**     | `undefined`                                                                                                         |
 
+### htmlAttributes
 
-
-### htmlAttributes 
-
-| | |
-| --- | --- |
+|                 |                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------- |
 | **Description** | Additional attributes to pass to the popover.<br /><br />自動翻訳: ポップオーバーに渡す追加属性。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                       |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                            |
+| **Default**     | `undefined`                                                                                       |
 
+### isOpen
 
-### isOpen 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.<br /><br />自動翻訳: `true`の場合、ポップオーバーは開く。もし `false` ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または `trigger` プロパティを使用します。注意: ポップオーバーが閉じると `isOpen` は自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。 |
-| **Attribute** | `is-open` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `is-open`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
+### keepContentsMounted
 
-### keepContentsMounted 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.<br /><br />Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.<br /><br />自動翻訳: `true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。 注：この機能は、Angular、React、Vue などの JavaScript フレームワークのインラインポップオーバーにのみ適用されます。 |
+| **Attribute**   | `keep-contents-mounted`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.<br /><br />Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.<br /><br />自動翻訳: `true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。  注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。 |
-| **Attribute** | `keep-contents-mounted` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+### keyboardClose
 
-
-
-### keyboardClose 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented.<br /><br />自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
-| **Attribute** | `keyboard-close` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `keyboard-close`                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                                     |
 
+### leaveAnimation
 
-
-### leaveAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                   |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the popover is dismissed.<br /><br />自動翻訳: ポップオーバーが解除されたときに使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                                       |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                           |
+| **Default**     | `undefined`                                                                                                                       |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
-
-### reference 
-
-| | |
-| --- | --- |
-| **Description** | Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.<br /><br />自動翻訳: ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetで決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。 |
-| **Attribute** | `reference` |
-| **Type** | `"event" ｜ "trigger"` |
-| **Default** | `'trigger'` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### reference
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.<br /><br />自動翻訳: ポップオーバーを何に対して相対的に配置するかを記述します。もし `'trigger'` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.target で決定されます。もし `'event'` ならば、ポップオーバーはトリガーアクションの x/y 座標に相対的に配置されます。イベントを渡す場合、これは event.clientX と event.clientY を介して決定されます。 |
+| **Attribute**   | `reference`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Type**        | `"event" ｜ "trigger"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `'trigger'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
-### showBackdrop 
+### showBackdrop
 
-| | |
-| --- | --- |
-| **Description** | If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.<br /><br />自動翻訳: `true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、またはDOMに存在するかどうかを制御しません。 |
-| **Attribute** | `show-backdrop` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.<br /><br />自動翻訳: `true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御しません。 |
+| **Attribute**   | `show-backdrop`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Default**     | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 
+### side
 
+|                 |                                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.<br /><br />自動翻訳: ポップオーバーを `reference` ポイントのどちら側に配置するかを記述する。start'`と`end'` は RTL を意識した値で、`left'`と`right'` はそうでない値です。 |
+| **Attribute**   | `side`                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"bottom" ｜ "end" ｜ "left" ｜ "right" ｜ "start" ｜ "top"`                                                                                                                                                                                                                                                                                       |
+| **Default**     | `'bottom'`                                                                                                                                                                                                                                                                                                                                         |
 
-### side 
+### size
 
-| | |
-| --- | --- |
-| **Description** | Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.<br /><br />自動翻訳: ポップオーバーを `reference` ポイントのどちら側に配置するかを記述する。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。 |
-| **Attribute** | `side` |
-| **Type** | `"bottom" ｜ "end" ｜ "left" ｜ "right" ｜ "start" ｜ "top"` |
-| **Default** | `'bottom'` |
-
-
-
-### size 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Describes how to calculate the popover width. If `'cover'`, the popover width will match the width of the trigger. If `'auto'`, the popover width will be determined by the content in the popover.<br /><br />自動翻訳: ポップオーバーの幅を計算する方法を説明します。cover'` の場合、ポップオーバーの幅はトリガーの幅と一致します。auto'` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定されます。 |
-| **Attribute** | `size` |
-| **Type** | `"auto" ｜ "cover"` |
-| **Default** | `'auto'` |
-
-
+| **Attribute**   | `size`                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `"auto" ｜ "cover"`                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `'auto'`                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
-### translucent 
+### translucent
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、ポップオーバーは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
+### trigger
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.<br /><br />自動翻訳: ポップオーバーを開かせるトリガー要素に対応する ID です。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。 |
+| **Attribute**   | `trigger`                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                    |
 
-### trigger 
+### triggerAction
 
-| | |
-| --- | --- |
-| **Description** | An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.<br /><br />自動翻訳: ポップオーバーを開かせるトリガー要素に対応するIDです。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。 |
-| **Attribute** | `trigger` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### triggerAction 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.<br /><br />自動翻訳: どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述する。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。 |
-| **Attribute** | `trigger-action` |
-| **Type** | `"click" ｜ "context-menu" ｜ "hover"` |
-| **Default** | `'click'` |
-
+| **Attribute**   | `trigger-action`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `"click" ｜ "context-menu" ｜ "hover"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `'click'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
diff --git a/static/auto-generated/popover/slots.md b/static/auto-generated/popover/slots.md
index 689c8cb2ae4..27e79eb5874 100644
--- a/static/auto-generated/popover/slots.md
+++ b/static/auto-generated/popover/slots.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed inside of the `.popover-content` element.<br /><br />自動翻訳: コンテンツは `.popover-content` 要素の内部に配置される。 |
-
+| Name | Description                                                                                                                               |
+| ---- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| ``   | Content is placed inside of the `.popover-content` element.<br /><br />自動翻訳: コンテンツは `.popover-content` 要素の内部に配置される。 |
diff --git a/static/auto-generated/progress-bar/custom-props.md b/static/auto-generated/progress-bar/custom-props.md
index eebac0fe48b..6bb1e061c38 100644
--- a/static/auto-generated/progress-bar/custom-props.md
+++ b/static/auto-generated/progress-bar/custom-props.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the progress track, or the buffer bar if `buffer` is set<br /><br />自動翻訳: プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。 |
-| `--buffer-background` | DEPRECATED, use `--background` instead<br /><br />自動翻訳: DEPRECATED、代わりに `--background` を使用する。 |
-| `--progress-background` | Background of the progress bar representing the current value<br /><br />自動翻訳: 現在値を表すプログレスバーの背景 |
-
+| Name                    | Description                                                                                                                                                                |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`          | Background of the progress track, or the buffer bar if `buffer` is set<br /><br />自動翻訳: プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。 |
+| `--buffer-background`   | DEPRECATED, use `--background` instead<br /><br />自動翻訳: DEPRECATED、代わりに `--background` を使用する。                                                               |
+| `--progress-background` | Background of the progress bar representing the current value<br /><br />自動翻訳: 現在値を表すプログレスバーの背景                                                        |
diff --git a/static/auto-generated/progress-bar/events.md b/static/auto-generated/progress-bar/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/progress-bar/events.md
+++ b/static/auto-generated/progress-bar/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/progress-bar/methods.md b/static/auto-generated/progress-bar/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/progress-bar/methods.md
+++ b/static/auto-generated/progress-bar/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/progress-bar/parts.md b/static/auto-generated/progress-bar/parts.md
index be34014f6c9..a989ae346f9 100644
--- a/static/auto-generated/progress-bar/parts.md
+++ b/static/auto-generated/progress-bar/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `progress` | The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.<br /><br />自動翻訳: type`が`"determinate"`のときは現在値を表示し、`type`が`"indeterminate"`のときは前後にスライドするプログレスバーです。 |
-| `stream` | The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.<br /><br />自動翻訳: バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `"determinate"` のときのみ表示される。 |
-| `track` | The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the width of the `buffer` value.<br /><br />自動翻訳: プログレスバーの後ろにあるトラックバーです。buffer`プロパティが設定され、`type`が `"determinate"` である場合、トラックは `buffer` 値の幅となる。 |
-
+| Name       | Description                                                                                                                                                                                                                                                                                                                 |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `progress` | The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.<br /><br />自動翻訳: type`が`"determinate"`のときは現在値を表示し、`type`が`"indeterminate"`のときは前後にスライドするプログレスバーです。                                         |
+| `stream`   | The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.<br /><br />自動翻訳: バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `"determinate"` のときのみ表示される。                                                 |
+| `track`    | The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the width of the `buffer` value.<br /><br />自動翻訳: プログレスバーの後ろにあるトラックバーです。buffer`プロパティが設定され、`type`が `"determinate"`である場合、トラックは`buffer` 値の幅となる。 |
diff --git a/static/auto-generated/progress-bar/props.md b/static/auto-generated/progress-bar/props.md
index ff9f559a297..2c85496026e 100644
--- a/static/auto-generated/progress-bar/props.md
+++ b/static/auto-generated/progress-bar/props.md
@@ -1,66 +1,53 @@
+### buffer
 
+|                 |                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].<br /><br />自動翻訳: バッファと値が 1 より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。 |
+| **Attribute**   | `buffer`                                                                                                                                                                                                                                    |
+| **Type**        | `number`                                                                                                                                                                                                                                    |
+| **Default**     | `1`                                                                                                                                                                                                                                         |
 
-### buffer 
+### color
 
-| | |
-| --- | --- |
-| **Description** | If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].<br /><br />自動翻訳: バッファと値が1より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。 |
-| **Attribute** | `buffer` |
-| **Type** | `number` |
-| **Default** | `1` |
-
-
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### reversed
 
-### reversed 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If true, reverse the progress bar direction.<br /><br />自動翻訳: true の場合、プログレスバーの方向を反転させます。 |
-| **Attribute** | `reversed` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `reversed`                                                                                                          |
+| **Type**        | `boolean`                                                                                                           |
+| **Default**     | `false`                                                                                                             |
 
-### type 
+### type
 
-| | |
-| --- | --- |
-| **Description** | The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).<br /><br />自動翻訳: 処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate"` (アニメーションなし), `"indeterminate"` (左から右へアニメーションする). |
-| **Attribute** | `type` |
-| **Type** | `"determinate" ｜ "indeterminate"` |
-| **Default** | `'determinate'` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).<br /><br />自動翻訳: 処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate"`(アニメーションなし),`"indeterminate"` (左から右へアニメーションする). |
+| **Attribute**   | `type`                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Type**        | `"determinate" ｜ "indeterminate"`                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `'determinate'`                                                                                                                                                                                                                                                                                                                                                                                                  |
 
+### value
 
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].<br /><br />自動翻訳: この値は、`type`が`"determinate"`である場合に、アクティブバーをどれだけ表示するかを決定するものである。値は [0, 1] の間であるべきです。 |
-| **Attribute** | `value` |
-| **Type** | `number` |
-| **Default** | `0` |
-
+| **Attribute**   | `value`                                                                                                                                                                                                                                                                                             |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                            |
+| **Default**     | `0`                                                                                                                                                                                                                                                                                                 |
diff --git a/static/auto-generated/progress-bar/slots.md b/static/auto-generated/progress-bar/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/progress-bar/slots.md
+++ b/static/auto-generated/progress-bar/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/radio-group/custom-props.md b/static/auto-generated/radio-group/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/radio-group/custom-props.md
+++ b/static/auto-generated/radio-group/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/radio-group/events.md b/static/auto-generated/radio-group/events.md
index 9eb0fbbd20f..081fca72027 100644
--- a/static/auto-generated/radio-group/events.md
+++ b/static/auto-generated/radio-group/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name        | Description                                                                               |
+| ----------- | ----------------------------------------------------------------------------------------- |
 | `ionChange` | Emitted when the value has changed.<br /><br />自動翻訳: 値が変更されたときに発せられる。 |
-
diff --git a/static/auto-generated/radio-group/methods.md b/static/auto-generated/radio-group/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/radio-group/methods.md
+++ b/static/auto-generated/radio-group/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/radio-group/parts.md b/static/auto-generated/radio-group/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/radio-group/parts.md
+++ b/static/auto-generated/radio-group/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/radio-group/props.md b/static/auto-generated/radio-group/props.md
index 29cb8a6eb04..832955c8e47 100644
--- a/static/auto-generated/radio-group/props.md
+++ b/static/auto-generated/radio-group/props.md
@@ -1,33 +1,26 @@
+### allowEmptySelection
 
-
-### allowEmptySelection 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the radios can be deselected.<br /><br />自動翻訳: `true`の場合、ラジオを非選択にすることができる。 |
-| **Attribute** | `allow-empty-selection` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `allow-empty-selection`                                                                                        |
+| **Type**        | `boolean`                                                                                                      |
+| **Default**     | `false`                                                                                                        |
 
-### name 
+### name
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
 
+### value
 
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                           |
+| --------------- | ------------------------------------------------------------------------- |
 | **Description** | the value of the radio group.<br /><br />自動翻訳: 無線グループの値です。 |
-| **Attribute** | `value` |
-| **Type** | `any` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `value`                                                                   |
+| **Type**        | `any`                                                                     |
+| **Default**     | `undefined`                                                               |
diff --git a/static/auto-generated/radio-group/slots.md b/static/auto-generated/radio-group/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/radio-group/slots.md
+++ b/static/auto-generated/radio-group/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/radio/custom-props.md b/static/auto-generated/radio/custom-props.md
index 7fbf51935fa..ca0fdb083d6 100644
--- a/static/auto-generated/radio/custom-props.md
+++ b/static/auto-generated/radio/custom-props.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `--border-radius` | Border radius of the radio<br /><br />自動翻訳: 無線機のボーダー半径 |
-| `--color` | Color of the radio<br /><br />自動翻訳: ラジオのカラー |
-| `--color-checked` | Color of the checked radio<br /><br />自動翻訳: チェックしたラジオの色 |
+| Name                    | Description                                                                                          |
+| ----------------------- | ---------------------------------------------------------------------------------------------------- |
+| `--border-radius`       | Border radius of the radio<br /><br />自動翻訳: 無線機のボーダー半径                                 |
+| `--color`               | Color of the radio<br /><br />自動翻訳: ラジオのカラー                                               |
+| `--color-checked`       | Color of the checked radio<br /><br />自動翻訳: チェックしたラジオの色                               |
 | `--inner-border-radius` | Border radius of the inner checked radio<br /><br />自動翻訳: 内側のチェック付きラジオのボーダー半径 |
-
diff --git a/static/auto-generated/radio/events.md b/static/auto-generated/radio/events.md
index 01309d9d4be..eccb68c3b59 100644
--- a/static/auto-generated/radio/events.md
+++ b/static/auto-generated/radio/events.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the radio button loses focus.<br /><br />自動翻訳: ラジオボタンのフォーカスが外れたときに発せられる。 |
+| Name       | Description                                                                                                        |
+| ---------- | ------------------------------------------------------------------------------------------------------------------ |
+| `ionBlur`  | Emitted when the radio button loses focus.<br /><br />自動翻訳: ラジオボタンのフォーカスが外れたときに発せられる。 |
 | `ionFocus` | Emitted when the radio button has focus.<br /><br />自動翻訳: ラジオボタンにフォーカスが当たったときに発せられる。 |
-
diff --git a/static/auto-generated/radio/methods.md b/static/auto-generated/radio/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/radio/methods.md
+++ b/static/auto-generated/radio/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/radio/parts.md b/static/auto-generated/radio/parts.md
index 59ba22f117d..4d076dfe61c 100644
--- a/static/auto-generated/radio/parts.md
+++ b/static/auto-generated/radio/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `container` | The container for the radio mark.<br /><br />自動翻訳: ラジオマークの入れ物です。 |
-| `mark` | The checkmark or dot used to indicate the checked state.<br /><br />自動翻訳: チェックされた状態を示すために使用されるチェックマークまたはドットです。 |
-
+| Name        | Description                                                                                                                                            |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `container` | The container for the radio mark.<br /><br />自動翻訳: ラジオマークの入れ物です。                                                                      |
+| `mark`      | The checkmark or dot used to indicate the checked state.<br /><br />自動翻訳: チェックされた状態を示すために使用されるチェックマークまたはドットです。 |
diff --git a/static/auto-generated/radio/props.md b/static/auto-generated/radio/props.md
index 3ecc527f363..54e628481bc 100644
--- a/static/auto-generated/radio/props.md
+++ b/static/auto-generated/radio/props.md
@@ -1,55 +1,44 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                 |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the radio.<br /><br />自動翻訳: `true`の場合、ユーザはラジオと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `disabled`                                                                                                                      |
+| **Type**        | `boolean`                                                                                                                       |
+| **Default**     | `false`                                                                                                                         |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### name
 
-
-### name 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
-
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
 
+### value
 
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                   |
+| --------------- | ----------------------------------------------------------------- |
 | **Description** | the value of the radio.<br /><br />自動翻訳: は、無線機の値です。 |
-| **Attribute** | `value` |
-| **Type** | `any` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `value`                                                           |
+| **Type**        | `any`                                                             |
+| **Default**     | `undefined`                                                       |
diff --git a/static/auto-generated/radio/slots.md b/static/auto-generated/radio/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/radio/slots.md
+++ b/static/auto-generated/radio/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/range/custom-props.md b/static/auto-generated/range/custom-props.md
index ad801e4d146..02d6c60f20d 100644
--- a/static/auto-generated/range/custom-props.md
+++ b/static/auto-generated/range/custom-props.md
@@ -1,15 +1,13 @@
-
-| Name | Description |
-| --- | --- |
-| `--bar-background` | Background of the range bar<br /><br />自動翻訳: レンジバーの背景 |
-| `--bar-background-active` | Background of the active range bar<br /><br />自動翻訳: アクティブレンジバーの背景 |
-| `--bar-border-radius` | Border radius of the range bar<br /><br />自動翻訳: レンジバーのボーダー半径 |
-| `--bar-height` | Height of the range bar<br /><br />自動翻訳: レンジバーの高さ |
-| `--height` | Height of the range<br /><br />自動翻訳: レンジの高さ |
-| `--knob-background` | Background of the range knob<br /><br />自動翻訳: レンジノブの背景 |
-| `--knob-border-radius` | Border radius of the range knob<br /><br />自動翻訳: レンジツマミのボーダー半径 |
-| `--knob-box-shadow` | Box shadow of the range knob<br /><br />自動翻訳: レンジノブのボックスシャドウ |
-| `--knob-size` | Size of the range knob<br /><br />自動翻訳: レンジツマミの大きさ |
-| `--pin-background` | Background of the range pin (only available in MD mode)<br /><br />自動翻訳: レンジピンの背景（MDモード時のみ有効） |
-| `--pin-color` | Color of the range pin (only available in MD mode)<br /><br />自動翻訳: レンジピンの色（MDモード時のみ有効） |
-
+| Name                      | Description                                                                                                          |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `--bar-background`        | Background of the range bar<br /><br />自動翻訳: レンジバーの背景                                                    |
+| `--bar-background-active` | Background of the active range bar<br /><br />自動翻訳: アクティブレンジバーの背景                                   |
+| `--bar-border-radius`     | Border radius of the range bar<br /><br />自動翻訳: レンジバーのボーダー半径                                         |
+| `--bar-height`            | Height of the range bar<br /><br />自動翻訳: レンジバーの高さ                                                        |
+| `--height`                | Height of the range<br /><br />自動翻訳: レンジの高さ                                                                |
+| `--knob-background`       | Background of the range knob<br /><br />自動翻訳: レンジノブの背景                                                   |
+| `--knob-border-radius`    | Border radius of the range knob<br /><br />自動翻訳: レンジツマミのボーダー半径                                      |
+| `--knob-box-shadow`       | Box shadow of the range knob<br /><br />自動翻訳: レンジノブのボックスシャドウ                                       |
+| `--knob-size`             | Size of the range knob<br /><br />自動翻訳: レンジツマミの大きさ                                                     |
+| `--pin-background`        | Background of the range pin (only available in MD mode)<br /><br />自動翻訳: レンジピンの背景（MD モード時のみ有効） |
+| `--pin-color`             | Color of the range pin (only available in MD mode)<br /><br />自動翻訳: レンジピンの色（MD モード時のみ有効）        |
diff --git a/static/auto-generated/range/events.md b/static/auto-generated/range/events.md
index 9f5d30d9188..2897153284b 100644
--- a/static/auto-generated/range/events.md
+++ b/static/auto-generated/range/events.md
@@ -1,9 +1,7 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the range loses focus.<br /><br />自動翻訳: レンジの焦点が合わなくなったときに発する。 |
-| `ionChange` | Emitted when the value property has changed.<br /><br />自動翻訳: valueプロパティが変更されたときに発行される。 |
-| `ionFocus` | Emitted when the range has focus.<br /><br />自動翻訳: レンジのフォーカスが合ったときに発する。 |
-| `ionKnobMoveEnd` | Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.<br /><br />自動翻訳: マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。 |
+| Name               | Description                                                                                                                                                                                                                                                   |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ionBlur`          | Emitted when the range loses focus.<br /><br />自動翻訳: レンジの焦点が合わなくなったときに発する。                                                                                                                                                           |
+| `ionChange`        | Emitted when the value property has changed.<br /><br />自動翻訳: value プロパティが変更されたときに発行される。                                                                                                                                              |
+| `ionFocus`         | Emitted when the range has focus.<br /><br />自動翻訳: レンジのフォーカスが合ったときに発する。                                                                                                                                                               |
+| `ionKnobMoveEnd`   | Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.<br /><br />自動翻訳: マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。 |
 | `ionKnobMoveStart` | Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.<br /><br />自動翻訳: マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。 |
-
diff --git a/static/auto-generated/range/methods.md b/static/auto-generated/range/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/range/methods.md
+++ b/static/auto-generated/range/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/range/parts.md b/static/auto-generated/range/parts.md
index cd3c2784d3a..1ecf4037f45 100644
--- a/static/auto-generated/range/parts.md
+++ b/static/auto-generated/range/parts.md
@@ -1,10 +1,8 @@
-
-| Name | Description |
-| --- | --- |
-| `bar` | The inactive part of the bar.<br /><br />自動翻訳: バーの非アクティブな部分。 |
-| `bar-active` | The active part of the bar.<br /><br />自動翻訳: バーのアクティブな部分です。 |
-| `knob` | The handle that is used to drag the range.<br /><br />自動翻訳: 範囲をドラッグする際に使用するハンドル。 |
-| `pin` | The counter that appears above a knob.<br /><br />自動翻訳: ノブの上に表示されるカウンターです。 |
-| `tick` | An inactive tick mark.<br /><br />自動翻訳: 非アクティブなティックマークです。 |
-| `tick-active` | An active tick mark.<br /><br />自動翻訳: アクティブなティックマークです。 |
-
+| Name          | Description                                                                                              |
+| ------------- | -------------------------------------------------------------------------------------------------------- |
+| `bar`         | The inactive part of the bar.<br /><br />自動翻訳: バーの非アクティブな部分。                            |
+| `bar-active`  | The active part of the bar.<br /><br />自動翻訳: バーのアクティブな部分です。                            |
+| `knob`        | The handle that is used to drag the range.<br /><br />自動翻訳: 範囲をドラッグする際に使用するハンドル。 |
+| `pin`         | The counter that appears above a knob.<br /><br />自動翻訳: ノブの上に表示されるカウンターです。         |
+| `tick`        | An inactive tick mark.<br /><br />自動翻訳: 非アクティブなティックマークです。                           |
+| `tick-active` | An active tick mark.<br /><br />自動翻訳: アクティブなティックマークです。                               |
diff --git a/static/auto-generated/range/props.md b/static/auto-generated/range/props.md
index 12708b5888e..e50b8198668 100644
--- a/static/auto-generated/range/props.md
+++ b/static/auto-generated/range/props.md
@@ -1,165 +1,134 @@
+### activeBarStart
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.<br /><br />自動翻訳: レンジアクティブバーの開始位置です。この機能は、ノブが 1 つの場合のみ有効です（dualKnobs="false"）。有効な値は、min 値以上、max 値以下です。 |
+| **Attribute**   | `active-bar-start`                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                           |
 
-### activeBarStart 
+### color
 
-| | |
-| --- | --- |
-| **Description** | The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.<br /><br />自動翻訳: レンジアクティブバーの開始位置です。この機能は、ノブが1つの場合のみ有効です（dualKnobs="false"）。有効な値は、min値以上、max値以下です。 |
-| **Attribute** | `active-bar-start` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### debounce
 
-
-### debounce 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.<br /><br />自動翻訳: 範囲の値が変化するたびに `ionChange` イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは `ngModel` や `v-model` のようなフォームバインディングにも影響します。 |
-| **Attribute** | `debounce` |
-| **Type** | `number` |
-| **Default** | `0` |
-
-
+| **Attribute**   | `debounce`                                                                                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `0`                                                                                                                                                                                                                                                                                                                                                                        |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the range.<br /><br />自動翻訳: `true`の場合、ユーザは範囲と対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `disabled`                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                     |
+| **Default**     | `false`                                                                                                                       |
 
+### dualKnobs
 
+|                 |                                                             |
+| --------------- | ----------------------------------------------------------- |
+| **Description** | Show two knobs.<br /><br />自動翻訳: 2 つのノブを表示する。 |
+| **Attribute**   | `dual-knobs`                                                |
+| **Type**        | `boolean`                                                   |
+| **Default**     | `false`                                                     |
 
-### dualKnobs 
+### max
 
-| | |
-| --- | --- |
-| **Description** | Show two knobs.<br /><br />自動翻訳: 2つのノブを表示する。 |
-| **Attribute** | `dual-knobs` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### max 
-
-| | |
-| --- | --- |
+|                 |                                                                             |
+| --------------- | --------------------------------------------------------------------------- |
 | **Description** | Maximum integer value of the range.<br /><br />自動翻訳: 範囲の最大整数値。 |
-| **Attribute** | `max` |
-| **Type** | `number` |
-| **Default** | `100` |
+| **Attribute**   | `max`                                                                       |
+| **Type**        | `number`                                                                    |
+| **Default**     | `100`                                                                       |
 
+### min
 
-
-### min 
-
-| | |
-| --- | --- |
+|                 |                                                                               |
+| --------------- | ----------------------------------------------------------------------------- |
 | **Description** | Minimum integer value of the range.<br /><br />自動翻訳: 範囲の最小の整数値。 |
-| **Attribute** | `min` |
-| **Type** | `number` |
-| **Default** | `0` |
-
-
+| **Attribute**   | `min`                                                                         |
+| **Type**        | `number`                                                                      |
+| **Default**     | `0`                                                                           |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### name
 
-
-### name 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `''` |
-
-
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `''`                                                                                                                                      |
 
-### pin 
+### pin
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, a pin with integer value is shown when the knob is pressed.<br /><br />自動翻訳: `true`の場合、ノブを押したときに整数値のピンが表示されます。 |
-| **Attribute** | `pin` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `pin`                                                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                                                |
+| **Default**     | `false`                                                                                                                                                  |
 
+### pinFormatter
 
-
-### pinFormatter 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                             |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.<br /><br />自動翻訳: ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。 |
-| **Attribute** | `undefined` |
-| **Type** | `(value: number) => string ｜ number` |
-| **Default** | `(value: number): number => Math.round(value)` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                 |
+| **Type**        | `(value: number) => string ｜ number`                                                                                                                                                                                                                       |
+| **Default**     | `(value: number): number => Math.round(value)`                                                                                                                                                                                                              |
 
-### snaps 
+### snaps
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the knob snaps to tick marks evenly spaced based on the step property value.<br /><br />自動翻訳: `true`の場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。 |
-| **Attribute** | `snaps` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `snaps`                                                                                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                                                                           |
+| **Default**     | `false`                                                                                                                                                                                                             |
 
+### step
 
-
-### step 
-
-| | |
-| --- | --- |
+|                 |                                                                            |
+| --------------- | -------------------------------------------------------------------------- |
 | **Description** | Specifies the value granularity.<br /><br />自動翻訳: 値の粒度を指定する。 |
-| **Attribute** | `step` |
-| **Type** | `number` |
-| **Default** | `1` |
-
-
+| **Attribute**   | `step`                                                                     |
+| **Type**        | `number`                                                                   |
+| **Default**     | `1`                                                                        |
 
-### ticks 
+### ticks
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                             |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.<br /><br />自動翻訳: `true`の場合、ステップの値に基づいてティックマークを表示する。snaps`が `true` の場合のみ適用される。 |
-| **Attribute** | `ticks` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `ticks`                                                                                                                                                                                                                     |
+| **Type**        | `boolean`                                                                                                                                                                                                                   |
+| **Default**     | `true`                                                                                                                                                                                                                      |
 
+### value
 
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                             |
+| --------------- | ----------------------------------------------------------- |
 | **Description** | the value of the range.<br /><br />自動翻訳: 範囲の値です。 |
-| **Attribute** | `value` |
-| **Type** | `number ｜ { lower: number; upper: number; }` |
-| **Default** | `0` |
-
+| **Attribute**   | `value`                                                     |
+| **Type**        | `number ｜ { lower: number; upper: number; }`               |
+| **Default**     | `0`                                                         |
diff --git a/static/auto-generated/range/slots.md b/static/auto-generated/range/slots.md
index f8ff291120d..963527c2f3b 100644
--- a/static/auto-generated/range/slots.md
+++ b/static/auto-generated/range/slots.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `end` | Content is placed to the right of the range slider in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。 |
-| `start` | Content is placed to the left of the range slider in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。 |
-
+| Name    | Description                                                                                                                                                                        |
+| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `end`   | Content is placed to the right of the range slider in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTR では範囲スライダーの右側に、RTL では左側に配置されます。 |
+| `start` | Content is placed to the left of the range slider in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTR では範囲スライダーの左側に、RTL では右側に配置されます。 |
diff --git a/static/auto-generated/refresher-content/custom-props.md b/static/auto-generated/refresher-content/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/refresher-content/custom-props.md
+++ b/static/auto-generated/refresher-content/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/refresher-content/events.md b/static/auto-generated/refresher-content/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/refresher-content/events.md
+++ b/static/auto-generated/refresher-content/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/refresher-content/methods.md b/static/auto-generated/refresher-content/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/refresher-content/methods.md
+++ b/static/auto-generated/refresher-content/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/refresher-content/parts.md b/static/auto-generated/refresher-content/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/refresher-content/parts.md
+++ b/static/auto-generated/refresher-content/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/refresher-content/props.md b/static/auto-generated/refresher-content/props.md
index fef32c9d43b..f47158344e6 100644
--- a/static/auto-generated/refresher-content/props.md
+++ b/static/auto-generated/refresher-content/props.md
@@ -1,44 +1,35 @@
-
-
-### pullingIcon 
-
-| | |
-| --- | --- |
-| **Description** | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.<br /><br />自動翻訳: プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOSデバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。 |
-| **Attribute** | `pulling-icon` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### pullingText 
-
-| | |
-| --- | --- |
-| **Description** | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
-| **Attribute** | `pulling-text` |
-| **Type** | `IonicSafeString ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### refreshingSpinner 
-
-| | |
-| --- | --- |
-| **Description** | An animated SVG spinner that shows when refreshing begins<br /><br />自動翻訳: リフレッシュ開始を示すアニメーションSVGスピナー |
-| **Attribute** | `refreshing-spinner` |
-| **Type** | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### refreshingText 
-
-| | |
-| --- | --- |
-| **Description** | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
-| **Attribute** | `refreshing-text` |
-| **Type** | `IonicSafeString ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+### pullingIcon
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.<br /><br />自動翻訳: プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOS デバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。 |
+| **Attribute**   | `pulling-icon`                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `null ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                          |
+
+### pullingText
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたは HTML のいずれかを受け取ることができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
+| **Attribute**   | `pulling-text`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `IonicSafeString ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+
+### refreshingSpinner
+
+|                 |                                                                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | An animated SVG spinner that shows when refreshing begins<br /><br />自動翻訳: リフレッシュ開始を示すアニメーション SVG スピナー                        |
+| **Attribute**   | `refreshing-spinner`                                                                                                                                    |
+| **Type**        | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined` |
+| **Default**     | `undefined`                                                                                                                                             |
+
+### refreshingText
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
+| **Attribute**   | `refreshing-text`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `IonicSafeString ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
diff --git a/static/auto-generated/refresher-content/slots.md b/static/auto-generated/refresher-content/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/refresher-content/slots.md
+++ b/static/auto-generated/refresher-content/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/refresher/custom-props.md b/static/auto-generated/refresher/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/refresher/custom-props.md
+++ b/static/auto-generated/refresher/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/refresher/events.md b/static/auto-generated/refresher/events.md
index 7958ebe37ef..03bcd0ecbf8 100644
--- a/static/auto-generated/refresher/events.md
+++ b/static/auto-generated/refresher/events.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `ionPull` | Emitted while the user is pulling down the content and exposing the refresher.<br /><br />自動翻訳: ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発する。 |
-| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.<br /><br />自動翻訳: ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発せられる。リフレッシャーの状態を `refreshing` に更新する。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。 |
-| `ionStart` | Emitted when the user begins to start pulling down.<br /><br />自動翻訳: ユーザーが引き下げを開始するときに発する。 |
-
+| Name         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ionPull`    | Emitted while the user is pulling down the content and exposing the refresher.<br /><br />自動翻訳: ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発する。                                                                                                                                                                                                                                                                                                                                                                              |
+| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.<br /><br />自動翻訳: ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMax を越えたときに発せられる。リフレッシャーの状態を `refreshing` に更新する。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。 |
+| `ionStart`   | Emitted when the user begins to start pulling down.<br /><br />自動翻訳: ユーザーが引き下げを開始するときに発する。                                                                                                                                                                                                                                                                                                                                                                                                                                       |
diff --git a/static/auto-generated/refresher/methods.md b/static/auto-generated/refresher/methods.md
index 47912e960c4..30ead5bdfeb 100644
--- a/static/auto-generated/refresher/methods.md
+++ b/static/auto-generated/refresher/methods.md
@@ -1,26 +1,20 @@
-
-
 ### cancel
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Changes the refresher's state from `refreshing` to `cancelling`.<br /><br />自動翻訳: リフレッシュの状態を `refreshing` から `cancelling` に変更する。 |
-| **Signature** | `cancel() => Promise<void>` |
-
+| **Signature**   | `cancel() => Promise<void>`                                                                                                                            |
 
 ### complete
 
-| | |
-| --- | --- |
-| **Description** | Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`.<br /><br />自動翻訳: 非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。 |
-| **Signature** | `complete() => Promise<void>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`.<br /><br />自動翻訳: 非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリが AJAX リクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。 |
+| **Signature**   | `complete() => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
 ### getProgress
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.<br /><br />自動翻訳: ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。 |
-| **Signature** | `getProgress() => Promise<number>` |
-
-
+| **Signature**   | `getProgress() => Promise<number>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/static/auto-generated/refresher/parts.md b/static/auto-generated/refresher/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/refresher/parts.md
+++ b/static/auto-generated/refresher/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/refresher/props.md b/static/auto-generated/refresher/props.md
index 6aae83170b0..78eeef14cac 100644
--- a/static/auto-generated/refresher/props.md
+++ b/static/auto-generated/refresher/props.md
@@ -1,66 +1,53 @@
+### closeDuration
 
-
-### closeDuration 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.<br /><br />自動翻訳: リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 |
-| **Attribute** | `close-duration` |
-| **Type** | `string` |
-| **Default** | `'280ms'` |
-
-
+| **Attribute**   | `close-duration`                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                             |
+| **Default**     | `'280ms'`                                                                                                                                                                                                                                                                                            |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                            |
+| --------------- | ---------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the refresher will be hidden.<br /><br />自動翻訳: `true`の場合、リフレッシャーは非表示となる。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### pullFactor 
+| **Attribute**   | `disabled`                                                                                                 |
+| **Type**        | `boolean`                                                                                                  |
+| **Default**     | `false`                                                                                                    |
 
-| | |
-| --- | --- |
-| **Description** | How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.<br /><br />For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.<br /><br />Does not apply when the refresher content uses a spinner, enabling the native refresher.<br /><br />自動翻訳: 引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。  例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。  リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 |
-| **Attribute** | `pull-factor` |
-| **Type** | `number` |
-| **Default** | `1` |
+### pullFactor
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.<br /><br />For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.<br /><br />Does not apply when the refresher content uses a spinner, enabling the native refresher.<br /><br />自動翻訳: 引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。 例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。 リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 |
+| **Attribute**   | `pull-factor`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
+### pullMax
 
-### pullMax 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when the refresher content uses a spinner, enabling the native refresher.<br /><br />自動翻訳: リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果である。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 |
+| **Attribute**   | `pull-max`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Default**     | `this.pullMin + 60`                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 
-| | |
-| --- | --- |
-| **Description** | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.<br /><br />自動翻訳: リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果である。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 |
-| **Attribute** | `pull-max` |
-| **Type** | `number` |
-| **Default** | `this.pullMin + 60` |
+### pullMin
 
-
-
-### pullMin 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.<br /><br />自動翻訳: リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。 |
-| **Attribute** | `pull-min` |
-| **Type** | `number` |
-| **Default** | `60` |
+| **Attribute**   | `pull-min`                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `60`                                                                                                                                                                                                                                                                                                                                                                                                     |
 
+### snapbackDuration
 
-
-### snapbackDuration 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.<br /><br />自動翻訳: リフレッシャーが `refreshing` 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。 |
-| **Attribute** | `snapback-duration` |
-| **Type** | `string` |
-| **Default** | `'280ms'` |
-
+| **Attribute**   | `snapback-duration`                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                         |
+| **Default**     | `'280ms'`                                                                                                                                                                                                                                                                                                                                                        |
diff --git a/static/auto-generated/refresher/slots.md b/static/auto-generated/refresher/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/refresher/slots.md
+++ b/static/auto-generated/refresher/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/reorder-group/custom-props.md b/static/auto-generated/reorder-group/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/reorder-group/custom-props.md
+++ b/static/auto-generated/reorder-group/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/reorder-group/events.md b/static/auto-generated/reorder-group/events.md
index 1aced4f615a..47adcd341c6 100644
--- a/static/auto-generated/reorder-group/events.md
+++ b/static/auto-generated/reorder-group/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name             | Description                                                                                                                                                                                                                                                                                                                                                                                           |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `ionItemReorder` | Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.<br /><br />自動翻訳: 再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。 |
-
diff --git a/static/auto-generated/reorder-group/methods.md b/static/auto-generated/reorder-group/methods.md
index 885bc46df9a..9aef52081e6 100644
--- a/static/auto-generated/reorder-group/methods.md
+++ b/static/auto-generated/reorder-group/methods.md
@@ -1,10 +1,6 @@
-
-
 ### complete
 
-| | |
-| --- | --- |
-| **Description** | Completes the reorder operation. Must be called by the `ionItemReorder` event.<br /><br />If a list of items is passed, the list will be reordered and returned in the proper order.<br /><br />If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.<br /><br />自動翻訳: 再注文操作を完了する。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。 |
-| **Signature** | `complete(listOrReorder?: boolean ｜ any[]) => Promise<any>` |
-
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Completes the reorder operation. Must be called by the `ionItemReorder` event.<br /><br />If a list of items is passed, the list will be reordered and returned in the proper order.<br /><br />If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.<br /><br />自動翻訳: 再注文操作を完了する。ionItemReorder`イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または`true`が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。`false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。 |
+| **Signature**   | `complete(listOrReorder?: boolean ｜ any[]) => Promise<any>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
diff --git a/static/auto-generated/reorder-group/parts.md b/static/auto-generated/reorder-group/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/reorder-group/parts.md
+++ b/static/auto-generated/reorder-group/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/reorder-group/props.md b/static/auto-generated/reorder-group/props.md
index 7260befd9eb..213d95a4546 100644
--- a/static/auto-generated/reorder-group/props.md
+++ b/static/auto-generated/reorder-group/props.md
@@ -1,11 +1,8 @@
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the reorder will be hidden.<br /><br />自動翻訳: `true`の場合、リオーダーは非表示になる。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `disabled`                                                                                           |
+| **Type**        | `boolean`                                                                                            |
+| **Default**     | `true`                                                                                               |
diff --git a/static/auto-generated/reorder-group/slots.md b/static/auto-generated/reorder-group/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/reorder-group/slots.md
+++ b/static/auto-generated/reorder-group/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/reorder/custom-props.md b/static/auto-generated/reorder/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/reorder/custom-props.md
+++ b/static/auto-generated/reorder/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/reorder/events.md b/static/auto-generated/reorder/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/reorder/events.md
+++ b/static/auto-generated/reorder/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/reorder/methods.md b/static/auto-generated/reorder/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/reorder/methods.md
+++ b/static/auto-generated/reorder/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/reorder/parts.md b/static/auto-generated/reorder/parts.md
index c000567f2a0..914ffe8a642 100644
--- a/static/auto-generated/reorder/parts.md
+++ b/static/auto-generated/reorder/parts.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `icon` | The icon of the reorder handle (uses ion-icon).<br /><br />自動翻訳: リオーダーハンドルのアイコンです（ion-iconを使用）。 |
-
+| Name   | Description                                                                                                                |
+| ------ | -------------------------------------------------------------------------------------------------------------------------- |
+| `icon` | The icon of the reorder handle (uses ion-icon).<br /><br />自動翻訳: リオーダーハンドルのアイコンです（ion-icon を使用）。 |
diff --git a/static/auto-generated/reorder/props.md b/static/auto-generated/reorder/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/reorder/props.md
+++ b/static/auto-generated/reorder/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/reorder/slots.md b/static/auto-generated/reorder/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/reorder/slots.md
+++ b/static/auto-generated/reorder/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/ripple-effect/custom-props.md b/static/auto-generated/ripple-effect/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/ripple-effect/custom-props.md
+++ b/static/auto-generated/ripple-effect/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/ripple-effect/events.md b/static/auto-generated/ripple-effect/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/ripple-effect/events.md
+++ b/static/auto-generated/ripple-effect/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/ripple-effect/methods.md b/static/auto-generated/ripple-effect/methods.md
index bdf0b42a827..ed480507ce0 100644
--- a/static/auto-generated/ripple-effect/methods.md
+++ b/static/auto-generated/ripple-effect/methods.md
@@ -1,10 +1,6 @@
-
-
 ### addRipple
 
-| | |
-| --- | --- |
+|                 |                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------- |
 | **Description** | Adds the ripple effect to the parent element.<br /><br />自動翻訳: 親要素に波及効果を付加する。 |
-| **Signature** | `addRipple(x: number, y: number) => Promise<() => void>` |
-
-
+| **Signature**   | `addRipple(x: number, y: number) => Promise<() => void>`                                        |
diff --git a/static/auto-generated/ripple-effect/parts.md b/static/auto-generated/ripple-effect/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/ripple-effect/parts.md
+++ b/static/auto-generated/ripple-effect/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/ripple-effect/props.md b/static/auto-generated/ripple-effect/props.md
index 9512773c6ee..935fca447fd 100644
--- a/static/auto-generated/ripple-effect/props.md
+++ b/static/auto-generated/ripple-effect/props.md
@@ -1,11 +1,8 @@
-
-
-### type 
-
-| | |
-| --- | --- |
-| **Description** | Sets the type of ripple-effect:<br /><br />- `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.<br /><br />NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.<br /><br />自動翻訳: リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。  注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。 |
-| **Attribute** | `type` |
-| **Type** | `"bounded" ｜ "unbounded"` |
-| **Default** | `'bounded'` |
-
+### type
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Sets the type of ripple-effect:<br /><br />- `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.<br /><br />NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.<br /><br />自動翻訳: リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。 注：境界のある波紋のサーフェスは、overflow プロパティを hidden に設定し、境界のない波紋のサーフェスは、visible に設定する必要があります。 |
+| **Attribute**   | `type`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `"bounded" ｜ "unbounded"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Default**     | `'bounded'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
diff --git a/static/auto-generated/ripple-effect/slots.md b/static/auto-generated/ripple-effect/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/ripple-effect/slots.md
+++ b/static/auto-generated/ripple-effect/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/route-redirect/custom-props.md b/static/auto-generated/route-redirect/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/route-redirect/custom-props.md
+++ b/static/auto-generated/route-redirect/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/route-redirect/events.md b/static/auto-generated/route-redirect/events.md
index 0c694e41822..e966e22bb0a 100644
--- a/static/auto-generated/route-redirect/events.md
+++ b/static/auto-generated/route-redirect/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.<br /><br />`ion-router` captures this event in order to update his internal registry of router rules.<br /><br />自動翻訳: このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。 |
-
+| Name                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.<br /><br />`ion-router` captures this event in order to update his internal registry of router rules.<br /><br />自動翻訳: このルールの値が DOM から追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。 ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。 |
diff --git a/static/auto-generated/route-redirect/methods.md b/static/auto-generated/route-redirect/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/route-redirect/methods.md
+++ b/static/auto-generated/route-redirect/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/route-redirect/parts.md b/static/auto-generated/route-redirect/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/route-redirect/parts.md
+++ b/static/auto-generated/route-redirect/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/route-redirect/props.md b/static/auto-generated/route-redirect/props.md
index 4813e535325..60e9792c362 100644
--- a/static/auto-generated/route-redirect/props.md
+++ b/static/auto-generated/route-redirect/props.md
@@ -1,22 +1,17 @@
-
-
-### from 
-
-| | |
-| --- | --- |
-| **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.<br /><br />The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.<br /><br />自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その「from」URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。  この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。 |
-| **Attribute** | `from` |
-| **Type** | `string` |
-| **Default** | `undefined` |
-
-
-
-### to 
-
-| | |
-| --- | --- |
-| **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.<br /><br />The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.<br /><br />Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.<br /><br />When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches.<br /><br />自動翻訳: リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その "to "URLである。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトする。  このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできない。  これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。  このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ "from" の値が一致しても、リダイレクトルート全体は noop となります。 |
-| **Attribute** | `to` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+### from
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.<br /><br />The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.<br /><br />自動翻訳: リダイレクトルートは、ある URL から別の URL へリダイレクトさせるルートです。このプロパティは、その「from」URL です。このプロパティを適用するには、ナビゲートされる URL と完全に一致する必要があります。 この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。 |
+| **Attribute**   | `from`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+
+### to
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.<br /><br />The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.<br /><br />Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.<br /><br />When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches.<br /><br />自動翻訳: リダイレクトルートは、ある URL から別の URL へリダイレクトさせるルートです。このプロパティは、その "to "URL である。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトする。 このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできない。 これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。 このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ "from" の値が一致しても、リダイレクトルート全体は noop となります。 |
+| **Attribute**   | `to`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `null ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/route-redirect/slots.md b/static/auto-generated/route-redirect/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/route-redirect/slots.md
+++ b/static/auto-generated/route-redirect/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/route/custom-props.md b/static/auto-generated/route/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/route/custom-props.md
+++ b/static/auto-generated/route/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/route/events.md b/static/auto-generated/route/events.md
index 2c25c871c58..9a37cb2f880 100644
--- a/static/auto-generated/route/events.md
+++ b/static/auto-generated/route/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name                  | Description                                                                                                                                                       |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `ionRouteDataChanged` | Used internally by `ion-router` to know when this route did change.<br /><br />自動翻訳: このルートがいつ変更されたかを知るために `ion-router` が内部で使用する。 |
-
diff --git a/static/auto-generated/route/methods.md b/static/auto-generated/route/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/route/methods.md
+++ b/static/auto-generated/route/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/route/parts.md b/static/auto-generated/route/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/route/parts.md
+++ b/static/auto-generated/route/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/route/props.md b/static/auto-generated/route/props.md
index 40f7a1cd9a3..5d023742dc9 100644
--- a/static/auto-generated/route/props.md
+++ b/static/auto-generated/route/props.md
@@ -1,55 +1,44 @@
+### beforeEnter
 
-
-### beforeEnter 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.<br /><br />自動翻訳: ルートが入力しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。 |
-| **Attribute** | `undefined` |
-| **Type** | `(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
-### beforeLeave 
+### beforeLeave
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.<br /><br />自動翻訳: ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。 |
-| **Attribute** | `undefined` |
-| **Type** | `(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### component 
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
-| | |
-| --- | --- |
-| **Description** | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.<br /><br />The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.<br /><br />自動翻訳: ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。  このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。 |
-| **Attribute** | `component` |
-| **Type** | `string` |
-| **Default** | `undefined` |
+### component
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.<br /><br />The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.<br /><br />自動翻訳: ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。 このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。 |
+| **Attribute**   | `component`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
+### componentProps
 
-### componentProps 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.<br /><br />自動翻訳: キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
-
-
-### url 
-
-| | |
-| --- | --- |
-| **Description** | Relative path that needs to match in order for this route to apply.<br /><br />Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.<br /><br />自動翻訳: このルートを適用するために一致させる必要がある相対パスです。  expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。 |
-| **Attribute** | `url` |
-| **Type** | `string` |
-| **Default** | `''` |
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                                                                                                                                                                                                     |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                |
+
+### url
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Relative path that needs to match in order for this route to apply.<br /><br />Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.<br /><br />自動翻訳: このルートを適用するために一致させる必要がある相対パスです。 expressjs と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。 |
+| **Attribute**   | `url`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Default**     | `''`                                                                                                                                                                                                                                                                                                                                                                                                                                             |
diff --git a/static/auto-generated/route/slots.md b/static/auto-generated/route/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/route/slots.md
+++ b/static/auto-generated/route/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/router-link/custom-props.md b/static/auto-generated/router-link/custom-props.md
index d9e0baf62aa..371f4142206 100644
--- a/static/auto-generated/router-link/custom-props.md
+++ b/static/auto-generated/router-link/custom-props.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the router link<br /><br />自動翻訳: ルーターリンクの背景 |
-| `--color` | Text color of the router link<br /><br />自動翻訳: ルーターリンクの文字色 |
-
+| Name           | Description                                                               |
+| -------------- | ------------------------------------------------------------------------- |
+| `--background` | Background of the router link<br /><br />自動翻訳: ルーターリンクの背景   |
+| `--color`      | Text color of the router link<br /><br />自動翻訳: ルーターリンクの文字色 |
diff --git a/static/auto-generated/router-link/events.md b/static/auto-generated/router-link/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/router-link/events.md
+++ b/static/auto-generated/router-link/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/router-link/methods.md b/static/auto-generated/router-link/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/router-link/methods.md
+++ b/static/auto-generated/router-link/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/router-link/parts.md b/static/auto-generated/router-link/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/router-link/parts.md
+++ b/static/auto-generated/router-link/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/router-link/props.md b/static/auto-generated/router-link/props.md
index a72d773fa6d..ad6bfb27751 100644
--- a/static/auto-generated/router-link/props.md
+++ b/static/auto-generated/router-link/props.md
@@ -1,66 +1,53 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### href 
+### href
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
+### rel
 
-
-### rel 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
-### routerAnimation 
+### routerAnimation
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition animation when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定する。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                |
 
+### routerDirection
 
-
-### routerDirection 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | When using a router, it specifies the transition direction when navigating to another page using `href`.<br /><br />自動翻訳: ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定する。 |
-| **Attribute** | `router-direction` |
-| **Type** | `"back" ｜ "forward" ｜ "root"` |
-| **Default** | `'forward'` |
-
-
-
-### target 
-
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `router-direction`                                                                                                                                                                                               |
+| **Type**        | `"back" ｜ "forward" ｜ "root"`                                                                                                                                                                                  |
+| **Default**     | `'forward'`                                                                                                                                                                                                      |
+
+### target
+
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/router-link/slots.md b/static/auto-generated/router-link/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/router-link/slots.md
+++ b/static/auto-generated/router-link/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/router-outlet/custom-props.md b/static/auto-generated/router-outlet/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/router-outlet/custom-props.md
+++ b/static/auto-generated/router-outlet/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/router-outlet/events.md b/static/auto-generated/router-outlet/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/router-outlet/events.md
+++ b/static/auto-generated/router-outlet/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/router-outlet/methods.md b/static/auto-generated/router-outlet/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/router-outlet/methods.md
+++ b/static/auto-generated/router-outlet/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/router-outlet/parts.md b/static/auto-generated/router-outlet/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/router-outlet/parts.md
+++ b/static/auto-generated/router-outlet/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/router-outlet/props.md b/static/auto-generated/router-outlet/props.md
index 58cbe1a5ff2..29e84241913 100644
--- a/static/auto-generated/router-outlet/props.md
+++ b/static/auto-generated/router-outlet/props.md
@@ -1,33 +1,26 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the router-outlet should animate the transition of components.<br /><br />自動翻訳: `true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
-
+| **Attribute**   | `animated`                                                                                                                                                                                        |
+| **Type**        | `boolean`                                                                                                                                                                                         |
+| **Default**     | `true`                                                                                                                                                                                            |
 
-### animation 
+### animation
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This property allows to create custom transition using AnimationBuilder functions.<br /><br />自動翻訳: このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `undefined`                                                                                                                                                                                                   |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                   |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `getIonMode(this)` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `getIonMode(this)`                                                                                                                        |
diff --git a/static/auto-generated/router-outlet/slots.md b/static/auto-generated/router-outlet/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/router-outlet/slots.md
+++ b/static/auto-generated/router-outlet/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/router/custom-props.md b/static/auto-generated/router/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/router/custom-props.md
+++ b/static/auto-generated/router/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/router/events.md b/static/auto-generated/router/events.md
index 4e790c08915..93976fa8f9e 100644
--- a/static/auto-generated/router/events.md
+++ b/static/auto-generated/router/events.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `ionRouteDidChange` | Emitted when the route had changed<br /><br />自動翻訳: ルートが変更されたときに発する |
+| Name                 | Description                                                                                                             |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `ionRouteDidChange`  | Emitted when the route had changed<br /><br />自動翻訳: ルートが変更されたときに発する                                  |
 | `ionRouteWillChange` | Event emitted when the route is about to change<br /><br />自動翻訳: ルートが変更されようとするときに発せられるイベント |
-
diff --git a/static/auto-generated/router/methods.md b/static/auto-generated/router/methods.md
index 3e539734302..9a0b5426d95 100644
--- a/static/auto-generated/router/methods.md
+++ b/static/auto-generated/router/methods.md
@@ -1,18 +1,13 @@
-
-
 ### back
 
-| | |
-| --- | --- |
-| **Description** | Go back to previous page in the window.history.<br /><br />自動翻訳: window.historyで前ページに戻る。 |
-| **Signature** | `back() => Promise<void>` |
-
+|                 |                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------ |
+| **Description** | Go back to previous page in the window.history.<br /><br />自動翻訳: window.history で前ページに戻る。 |
+| **Signature**   | `back() => Promise<void>`                                                                              |
 
 ### push
 
-| | |
-| --- | --- |
-| **Description** | Navigate to the specified path.<br /><br />自動翻訳: 指定されたパスに移動する。 |
-| **Signature** | `push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>` |
-
-
+|                 |                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------- |
+| **Description** | Navigate to the specified path.<br /><br />自動翻訳: 指定されたパスに移動する。                     |
+| **Signature**   | `push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>` |
diff --git a/static/auto-generated/router/parts.md b/static/auto-generated/router/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/router/parts.md
+++ b/static/auto-generated/router/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/router/props.md b/static/auto-generated/router/props.md
index 28ca47a922d..a6c3dc383fe 100644
--- a/static/auto-generated/router/props.md
+++ b/static/auto-generated/router/props.md
@@ -1,22 +1,17 @@
-
-
-### root 
-
-| | |
-| --- | --- |
-| **Description** | The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.<br /><br />自動翻訳: URLのマッチング時に使用するルートパスです。デフォルトでは"/"に設定されていますが、すべてのURLパスに対して代替プレフィックスを指定することができます。 |
-| **Attribute** | `root` |
-| **Type** | `string` |
-| **Default** | `'/'` |
-
-
-
-### useHash 
-
-| | |
-| --- | --- |
-| **Description** | The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`<br /><br />Using one or another might depend in the requirements of your app and/or where it's deployed.<br /><br />Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.<br /><br />On the other side hash-navigation is much easier to deploy, it even works over the file protocol.<br /><br />By default, this property is `true`, change to `false` to allow hash-less URLs.<br /><br />自動翻訳: ルーターは2つの "モード "で動作します。- ハッシュを使用する。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。  通常、「ハッシュなし」ナビゲーションはSEOに有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。  一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。  デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。 |
-| **Attribute** | `use-hash` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+### root
+
+|                 |                                                                                                                                                                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.<br /><br />自動翻訳: URL のマッチング時に使用するルートパスです。デフォルトでは"/"に設定されていますが、すべての URL パスに対して代替プレフィックスを指定することができます。 |
+| **Attribute**   | `root`                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `'/'`                                                                                                                                                                                                                                                                                                             |
+
+### useHash
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`<br /><br />Using one or another might depend in the requirements of your app and/or where it's deployed.<br /><br />Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.<br /><br />On the other side hash-navigation is much easier to deploy, it even works over the file protocol.<br /><br />By default, this property is `true`, change to `false` to allow hash-less URLs.<br /><br />自動翻訳: ルーターは 2 つの "モード "で動作します。- ハッシュを使用する。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。 通常、「ハッシュなし」ナビゲーションは SEO に有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。 一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。 デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。 |
+| **Attribute**   | `use-hash`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Default**     | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/router/slots.md b/static/auto-generated/router/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/router/slots.md
+++ b/static/auto-generated/router/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/row/custom-props.md b/static/auto-generated/row/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/row/custom-props.md
+++ b/static/auto-generated/row/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/row/events.md b/static/auto-generated/row/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/row/events.md
+++ b/static/auto-generated/row/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/row/methods.md b/static/auto-generated/row/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/row/methods.md
+++ b/static/auto-generated/row/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/row/parts.md b/static/auto-generated/row/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/row/parts.md
+++ b/static/auto-generated/row/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/row/props.md b/static/auto-generated/row/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/row/props.md
+++ b/static/auto-generated/row/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/row/slots.md b/static/auto-generated/row/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/row/slots.md
+++ b/static/auto-generated/row/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/searchbar/custom-props.md b/static/auto-generated/searchbar/custom-props.md
index 86fb05d9a5d..2bd68a3fcd1 100644
--- a/static/auto-generated/searchbar/custom-props.md
+++ b/static/auto-generated/searchbar/custom-props.md
@@ -1,15 +1,13 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the searchbar input<br /><br />自動翻訳: 検索バー入力の背景 |
-| `--border-radius` | Border radius of the searchbar input<br /><br />自動翻訳: 検索バー入力のボーダー半径 |
-| `--box-shadow` | Box shadow of the searchbar input<br /><br />自動翻訳: 検索バー入力のボックスシャドウ |
-| `--cancel-button-color` | Color of the searchbar cancel button<br /><br />自動翻訳: 検索バーキャンセルボタンの色 |
-| `--clear-button-color` | Color of the searchbar clear button<br /><br />自動翻訳: 検索バークリアボタンの色 |
-| `--color` | Color of the searchbar text<br /><br />自動翻訳: 検索バーテキストの色 |
-| `--icon-color` | Color of the searchbar icon<br /><br />自動翻訳: 検索バーのアイコンの色 |
-| `--placeholder-color` | Color of the searchbar placeholder<br /><br />自動翻訳: 検索バーのプレースホルダーの色 |
-| `--placeholder-font-style` | Font style of the searchbar placeholder<br /><br />自動翻訳: 検索バー・プレースホルダーのフォントスタイル |
-| `--placeholder-font-weight` | Font weight of the searchbar placeholder<br /><br />自動翻訳: 検索バー・プレースホルダーのフォントの太さ |
-| `--placeholder-opacity` | Opacity of the searchbar placeholder<br /><br />自動翻訳: 検索バー・プレースホルダーの不透明度 |
-
+| Name                        | Description                                                                                               |
+| --------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--background`              | Background of the searchbar input<br /><br />自動翻訳: 検索バー入力の背景                                 |
+| `--border-radius`           | Border radius of the searchbar input<br /><br />自動翻訳: 検索バー入力のボーダー半径                      |
+| `--box-shadow`              | Box shadow of the searchbar input<br /><br />自動翻訳: 検索バー入力のボックスシャドウ                     |
+| `--cancel-button-color`     | Color of the searchbar cancel button<br /><br />自動翻訳: 検索バーキャンセルボタンの色                    |
+| `--clear-button-color`      | Color of the searchbar clear button<br /><br />自動翻訳: 検索バークリアボタンの色                         |
+| `--color`                   | Color of the searchbar text<br /><br />自動翻訳: 検索バーテキストの色                                     |
+| `--icon-color`              | Color of the searchbar icon<br /><br />自動翻訳: 検索バーのアイコンの色                                   |
+| `--placeholder-color`       | Color of the searchbar placeholder<br /><br />自動翻訳: 検索バーのプレースホルダーの色                    |
+| `--placeholder-font-style`  | Font style of the searchbar placeholder<br /><br />自動翻訳: 検索バー・プレースホルダーのフォントスタイル |
+| `--placeholder-font-weight` | Font weight of the searchbar placeholder<br /><br />自動翻訳: 検索バー・プレースホルダーのフォントの太さ  |
+| `--placeholder-opacity`     | Opacity of the searchbar placeholder<br /><br />自動翻訳: 検索バー・プレースホルダーの不透明度            |
diff --git a/static/auto-generated/searchbar/events.md b/static/auto-generated/searchbar/events.md
index b2684ba7c4c..2363869cd4f 100644
--- a/static/auto-generated/searchbar/events.md
+++ b/static/auto-generated/searchbar/events.md
@@ -1,10 +1,8 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the input loses focus.<br /><br />自動翻訳: 入力のフォーカスが外れたときに発せられる。 |
-| `ionCancel` | Emitted when the cancel button is clicked.<br /><br />自動翻訳: キャンセルボタンがクリックされたときに発せられる。 |
-| `ionChange` | Emitted when the value has changed.<br /><br />自動翻訳: 値が変更されたときに発せられる。 |
-| `ionClear` | Emitted when the clear input button is clicked.<br /><br />自動翻訳: クリア入力ボタンがクリックされたときに発せられる。 |
-| `ionFocus` | Emitted when the input has focus.<br /><br />自動翻訳: 入力にフォーカスが当たったときに発せられる。 |
-| `ionInput` | Emitted when a keyboard input occurred.<br /><br />自動翻訳: キーボード入力が発生したときに発する。 |
-
+| Name        | Description                                                                                                             |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `ionBlur`   | Emitted when the input loses focus.<br /><br />自動翻訳: 入力のフォーカスが外れたときに発せられる。                     |
+| `ionCancel` | Emitted when the cancel button is clicked.<br /><br />自動翻訳: キャンセルボタンがクリックされたときに発せられる。      |
+| `ionChange` | Emitted when the value has changed.<br /><br />自動翻訳: 値が変更されたときに発せられる。                               |
+| `ionClear`  | Emitted when the clear input button is clicked.<br /><br />自動翻訳: クリア入力ボタンがクリックされたときに発せられる。 |
+| `ionFocus`  | Emitted when the input has focus.<br /><br />自動翻訳: 入力にフォーカスが当たったときに発せられる。                     |
+| `ionInput`  | Emitted when a keyboard input occurred.<br /><br />自動翻訳: キーボード入力が発生したときに発する。                     |
diff --git a/static/auto-generated/searchbar/methods.md b/static/auto-generated/searchbar/methods.md
index e5873984e7a..03af532e09d 100644
--- a/static/auto-generated/searchbar/methods.md
+++ b/static/auto-generated/searchbar/methods.md
@@ -1,18 +1,13 @@
-
-
 ### getInputElement
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Returns the native `<input>` element used under the hood.<br /><br />自動翻訳: フードの下で使用されているネイティブの `<input>` 要素を返します。 |
-| **Signature** | `getInputElement() => Promise<HTMLInputElement>` |
-
+| **Signature**   | `getInputElement() => Promise<HTMLInputElement>`                                                                                                 |
 
 ### setFocus
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`.<br /><br />自動翻訳: 指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。 |
-| **Signature** | `setFocus() => Promise<void>` |
-
-
+| **Signature**   | `setFocus() => Promise<void>`                                                                                                                                                                                                                   |
diff --git a/static/auto-generated/searchbar/parts.md b/static/auto-generated/searchbar/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/searchbar/parts.md
+++ b/static/auto-generated/searchbar/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/searchbar/props.md b/static/auto-generated/searchbar/props.md
index a9242e14293..411773e9855 100644
--- a/static/auto-generated/searchbar/props.md
+++ b/static/auto-generated/searchbar/props.md
@@ -1,209 +1,170 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, enable searchbar animation.<br /><br />自動翻訳: `true`の場合、検索バーのアニメーションを有効にする。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### autocomplete 
+| **Attribute**   | `animated`                                                                                                       |
+| **Type**        | `boolean`                                                                                                        |
+| **Default**     | `false`                                                                                                          |
 
-| | |
-| --- | --- |
-| **Description** | Set the input's autocomplete property.<br /><br />自動翻訳: 入力のオートコンプリートプロパティを設定します。 |
-| **Attribute** | `autocomplete` |
-| **Type** | `"name" ｜ "email" ｜ "tel" ｜ "url" ｜ "on" ｜ "off" ｜ "honorific-prefix" ｜ "given-name" ｜ "additional-name" ｜ "family-name" ｜ "honorific-suffix" ｜ "nickname" ｜ "username" ｜ "new-password" ｜ "current-password" ｜ "one-time-code" ｜ "organization-title" ｜ "organization" ｜ "street-address" ｜ "address-line1" ｜ "address-line2" ｜ "address-line3" ｜ "address-level4" ｜ "address-level3" ｜ "address-level2" ｜ "address-level1" ｜ "country" ｜ "country-name" ｜ "postal-code" ｜ "cc-name" ｜ "cc-given-name" ｜ "cc-additional-name" ｜ "cc-family-name" ｜ "cc-number" ｜ "cc-exp" ｜ "cc-exp-month" ｜ "cc-exp-year" ｜ "cc-csc" ｜ "cc-type" ｜ "transaction-currency" ｜ "transaction-amount" ｜ "language" ｜ "bday" ｜ "bday-day" ｜ "bday-month" ｜ "bday-year" ｜ "sex" ｜ "tel-country-code" ｜ "tel-national" ｜ "tel-area-code" ｜ "tel-local" ｜ "tel-extension" ｜ "impp" ｜ "photo"` |
-| **Default** | `'off'` |
+### autocomplete
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Set the input's autocomplete property.<br /><br />自動翻訳: 入力のオートコンプリートプロパティを設定します。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Attribute**   | `autocomplete`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `"name" ｜ "email" ｜ "tel" ｜ "url" ｜ "on" ｜ "off" ｜ "honorific-prefix" ｜ "given-name" ｜ "additional-name" ｜ "family-name" ｜ "honorific-suffix" ｜ "nickname" ｜ "username" ｜ "new-password" ｜ "current-password" ｜ "one-time-code" ｜ "organization-title" ｜ "organization" ｜ "street-address" ｜ "address-line1" ｜ "address-line2" ｜ "address-line3" ｜ "address-level4" ｜ "address-level3" ｜ "address-level2" ｜ "address-level1" ｜ "country" ｜ "country-name" ｜ "postal-code" ｜ "cc-name" ｜ "cc-given-name" ｜ "cc-additional-name" ｜ "cc-family-name" ｜ "cc-number" ｜ "cc-exp" ｜ "cc-exp-month" ｜ "cc-exp-year" ｜ "cc-csc" ｜ "cc-type" ｜ "transaction-currency" ｜ "transaction-amount" ｜ "language" ｜ "bday" ｜ "bday-day" ｜ "bday-month" ｜ "bday-year" ｜ "sex" ｜ "tel-country-code" ｜ "tel-national" ｜ "tel-area-code" ｜ "tel-local" ｜ "tel-extension" ｜ "impp" ｜ "photo"` |
+| **Default**     | `'off'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 
+### autocorrect
 
-### autocorrect 
-
-| | |
-| --- | --- |
+|                 |                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the input's autocorrect property.<br /><br />自動翻訳: 入力のオートコレクトプロパティを設定します。 |
-| **Attribute** | `autocorrect` |
-| **Type** | `"off" ｜ "on"` |
-| **Default** | `'off'` |
-
-
+| **Attribute**   | `autocorrect`                                                                                           |
+| **Type**        | `"off" ｜ "on"`                                                                                         |
+| **Default**     | `'off'`                                                                                                 |
 
-### cancelButtonIcon 
+### cancelButtonIcon
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.<br /><br />自動翻訳: キャンセルボタンのアイコンを設定する。md`モードのみに適用されます。デフォルトは `arrow-back-sharp` です。 |
-| **Attribute** | `cancel-button-icon` |
-| **Type** | `string` |
-| **Default** | `config.get('backButtonIcon', arrowBackSharp) as string` |
-
-
+| **Attribute**   | `cancel-button-icon`                                                                                                                                                                                                  |
+| **Type**        | `string`                                                                                                                                                                                                              |
+| **Default**     | `config.get('backButtonIcon', arrowBackSharp) as string`                                                                                                                                                              |
 
-### cancelButtonText 
+### cancelButtonText
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the the cancel button text. Only applies to `ios` mode.<br /><br />自動翻訳: キャンセルボタンのテキストを設定します。ios`モードのみ適用されます。 |
-| **Attribute** | `cancel-button-text` |
-| **Type** | `string` |
-| **Default** | `'Cancel'` |
+| **Attribute**   | `cancel-button-text`                                                                                                                                  |
+| **Type**        | `string`                                                                                                                                              |
+| **Default**     | `'Cancel'`                                                                                                                                            |
 
+### clearIcon
 
-
-### clearIcon 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.<br /><br />自動翻訳: クリアアイコンを設定する。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。 |
-| **Attribute** | `clear-icon` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `clear-icon`                                                                                                                                                                                                        |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                               |
+| **Default**     | `undefined`                                                                                                                                                                                                         |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### debounce
 
-### debounce 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.<br /><br />自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。 |
-| **Attribute** | `debounce` |
-| **Type** | `number` |
-| **Default** | `250` |
-
-
+| **Attribute**   | `debounce`                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `250`                                                                                                                                                                                                                                                                                                                                                          |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the input.<br /><br />自動翻訳: `true`の場合、ユーザは入力と対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `disabled`                                                                                                                    |
+| **Type**        | `boolean`                                                                                                                     |
+| **Default**     | `false`                                                                                                                       |
 
-### enterkeyhint 
+### enterkeyhint
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.<br /><br />自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. |
-| **Attribute** | `enterkeyhint` |
-| **Type** | `"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `enterkeyhint`                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined`                                                                                                                                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                             |
 
+### inputmode
 
-
-### inputmode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.<br /><br />自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. |
-| **Attribute** | `inputmode` |
-| **Type** | `"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `inputmode`                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                  |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### placeholder
 
-### placeholder 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: 入力のプレースホルダーを設定します。 `placeholder` には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
+| **Attribute**   | `placeholder`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `'Search'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 
-| | |
-| --- | --- |
-| **Description** | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`<br /><br />For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)<br /><br />自動翻訳: 入力のプレースホルダーを設定します。 `placeholder` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば `<Ionic>` は `&lt;Ionic&gt;` になります。詳細はこちら。[セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) |
-| **Attribute** | `placeholder` |
-| **Type** | `string` |
-| **Default** | `'Search'` |
+### searchIcon
 
-
-
-### searchIcon 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.<br /><br />自動翻訳: 検索アイコンとして使用するアイコンです。デフォルトは `ios` モードでは `search-outline` 、`md` モードでは `search-sharp` である。 |
-| **Attribute** | `search-icon` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `search-icon`                                                                                                                                                                                                                                                         |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                           |
 
-### showCancelButton 
+### showCancelButton
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.<br /><br />自動翻訳: キャンセルボタンに関する動作を設定する。デフォルトは `"never"` です。focus"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never"`に設定すると、キャンセルボタンを非表示にする。always"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示する。 |
-| **Attribute** | `show-cancel-button` |
-| **Type** | `"always" ｜ "focus" ｜ "never"` |
-| **Default** | `'never'` |
+| **Attribute**   | `show-cancel-button`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `"always" ｜ "focus" ｜ "never"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Default**     | `'never'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
+### showClearButton
 
-
-### showClearButton 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.<br /><br />自動翻訳: クリアボタンに関する動作を設定する。デフォルトは `"focus"` です。focus"`に設定すると、入力が空でない場合、フォーカス時にクリアボタンを表示します。never"`に設定すると、クリアボタンを非表示にします。always"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、入力が空でない場合にのみクリアボタンを表示する。 |
-| **Attribute** | `show-clear-button` |
-| **Type** | `"always" ｜ "focus" ｜ "never"` |
-| **Default** | `'always'` |
-
+| **Attribute**   | `show-clear-button`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `"always" ｜ "focus" ｜ "never"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `'always'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
+### spellcheck
 
-### spellcheck 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                  |
+| --------------- | ---------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, enable spellcheck on the input.<br /><br />自動翻訳: `true`の場合、入力のスペルチェックを有効にする。 |
-| **Attribute** | `spellcheck` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `spellcheck`                                                                                                     |
+| **Type**        | `boolean`                                                                                                        |
+| **Default**     | `false`                                                                                                          |
 
+### type
 
-### type 
+|                 |                                                                             |
+| --------------- | --------------------------------------------------------------------------- |
+| **Description** | Set the type of the input.<br /><br />自動翻訳: 入力の種類を設定します。    |
+| **Attribute**   | `type`                                                                      |
+| **Type**        | `"email" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "url"` |
+| **Default**     | `'search'`                                                                  |
 
-| | |
-| --- | --- |
-| **Description** | Set the type of the input.<br /><br />自動翻訳: 入力の種類を設定します。 |
-| **Attribute** | `type` |
-| **Type** | `"email" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "url"` |
-| **Default** | `'search'` |
+### value
 
-
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | the value of the searchbar.<br /><br />自動翻訳: 検索バーの値。 |
-| **Attribute** | `value` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `''` |
-
+| **Attribute**   | `value`                                                         |
+| **Type**        | `null ｜ string ｜ undefined`                                   |
+| **Default**     | `''`                                                            |
diff --git a/static/auto-generated/searchbar/slots.md b/static/auto-generated/searchbar/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/searchbar/slots.md
+++ b/static/auto-generated/searchbar/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/segment-button/custom-props.md b/static/auto-generated/segment-button/custom-props.md
index 13b4c144b89..3610aef0cbe 100644
--- a/static/auto-generated/segment-button/custom-props.md
+++ b/static/auto-generated/segment-button/custom-props.md
@@ -1,32 +1,30 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the segment button<br /><br />自動翻訳: セグメントボタンの背景 |
-| `--background-checked` | Background of the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンの背景 |
-| `--background-focused` | Background of the segment button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスされたときのセグメントボタンの背景 |
-| `--background-focused-opacity` | Opacity of the segment button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのセグメントボタンの背景の不透明度 |
-| `--background-hover` | Background of the segment button on hover<br /><br />自動翻訳: セグメントボタンがホバーされたときの背景 |
-| `--background-hover-opacity` | Opacity of the segment button background on hover<br /><br />自動翻訳: ホバー時のセグメントボタンの背景の不透明度 |
-| `--border-color` | Color of the segment button border<br /><br />自動翻訳: セグメントボタンのボーダーの色 |
-| `--border-radius` | Radius of the segment button border<br /><br />自動翻訳: セグメントボタンのボーダーの半径 |
-| `--border-style` | Style of the segment button border<br /><br />自動翻訳: セグメントボタンのボーダーのスタイル |
-| `--border-width` | Width of the segment button border<br /><br />自動翻訳: セグメントボタンの枠の幅 |
-| `--color` | Color of the segment button<br /><br />自動翻訳: セグメントボタンの色 |
-| `--color-checked` | Color of the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンの色 |
-| `--color-focused` | Color of the segment button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのセグメントボタンの色 |
-| `--color-hover` | Color of the segment button on hover<br /><br />自動翻訳: ホバー時のセグメントボタンの色 |
-| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける |
-| `--indicator-color` | Color of the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケーターの色 |
-| `--indicator-height` | Height of the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケータの高さ |
-| `--indicator-transform` | Transform of the indicator for the checked segment button<br /><br />自動翻訳: チェックされたセグメントボタンのインジケータのトランスフォーム |
-| `--indicator-transition` | Transition of the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケーターの遷移 |
-| `--margin-bottom` | Bottom margin of the segment button<br /><br />自動翻訳: セグメントボタンの下端マージン |
-| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの方向が左から右の場合は右マージン、右から左の場合は左マージン |
-| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの方向が左から右の場合は左マージン、右から左の場合は右マージン |
-| `--margin-top` | Top margin of the segment button<br /><br />自動翻訳: セグメントボタンの上マージン |
-| `--padding-bottom` | Bottom padding of the segment button<br /><br />自動翻訳: セグメントボタンの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなります。 |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなります。 |
-| `--padding-top` | Top padding of the segment button<br /><br />自動翻訳: セグメントボタンのトップパディング |
-| `--transition` | Transition of the segment button<br /><br />自動翻訳: セグメントボタンの遷移 |
-
+| Name                           | Description                                                                                                                                                                                                                           |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the segment button<br /><br />自動翻訳: セグメントボタンの背景                                                                                                                                                          |
+| `--background-checked`         | Background of the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンの背景                                                                                                                                      |
+| `--background-focused`         | Background of the segment button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスされたときのセグメントボタンの背景                                                                                            |
+| `--background-focused-opacity` | Opacity of the segment button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのセグメントボタンの背景の不透明度                                                                            |
+| `--background-hover`           | Background of the segment button on hover<br /><br />自動翻訳: セグメントボタンがホバーされたときの背景                                                                                                                               |
+| `--background-hover-opacity`   | Opacity of the segment button background on hover<br /><br />自動翻訳: ホバー時のセグメントボタンの背景の不透明度                                                                                                                     |
+| `--border-color`               | Color of the segment button border<br /><br />自動翻訳: セグメントボタンのボーダーの色                                                                                                                                                |
+| `--border-radius`              | Radius of the segment button border<br /><br />自動翻訳: セグメントボタンのボーダーの半径                                                                                                                                             |
+| `--border-style`               | Style of the segment button border<br /><br />自動翻訳: セグメントボタンのボーダーのスタイル                                                                                                                                          |
+| `--border-width`               | Width of the segment button border<br /><br />自動翻訳: セグメントボタンの枠の幅                                                                                                                                                      |
+| `--color`                      | Color of the segment button<br /><br />自動翻訳: セグメントボタンの色                                                                                                                                                                 |
+| `--color-checked`              | Color of the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンの色                                                                                                                                             |
+| `--color-focused`              | Color of the segment button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのセグメントボタンの色                                                                                                     |
+| `--color-hover`                | Color of the segment button on hover<br /><br />自動翻訳: ホバー時のセグメントボタンの色                                                                                                                                              |
+| `--indicator-box-shadow`       | Box shadow on the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける                                                                                |
+| `--indicator-color`            | Color of the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケーターの色                                                                                                           |
+| `--indicator-height`           | Height of the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケータの高さ                                                                                                          |
+| `--indicator-transform`        | Transform of the indicator for the checked segment button<br /><br />自動翻訳: チェックされたセグメントボタンのインジケータのトランスフォーム                                                                                         |
+| `--indicator-transition`       | Transition of the indicator for the checked segment button<br /><br />自動翻訳: チェックしたセグメントボタンのインジケーターの遷移                                                                                                    |
+| `--margin-bottom`              | Bottom margin of the segment button<br /><br />自動翻訳: セグメントボタンの下端マージン                                                                                                                                               |
+| `--margin-end`                 | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの方向が左から右の場合は右マージン、右から左の場合は左マージン                   |
+| `--margin-start`               | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの方向が左から右の場合は左マージン、右から左の場合は右マージン                   |
+| `--margin-top`                 | Top margin of the segment button<br /><br />自動翻訳: セグメントボタンの上マージン                                                                                                                                                    |
+| `--padding-bottom`             | Bottom padding of the segment button<br /><br />自動翻訳: セグメントボタンの下パディング                                                                                                                                              |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなります。 |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button<br /><br />自動翻訳: セグメントボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなります。 |
+| `--padding-top`                | Top padding of the segment button<br /><br />自動翻訳: セグメントボタンのトップパディング                                                                                                                                             |
+| `--transition`                 | Transition of the segment button<br /><br />自動翻訳: セグメントボタンの遷移                                                                                                                                                          |
diff --git a/static/auto-generated/segment-button/events.md b/static/auto-generated/segment-button/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/segment-button/events.md
+++ b/static/auto-generated/segment-button/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/segment-button/methods.md b/static/auto-generated/segment-button/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/segment-button/methods.md
+++ b/static/auto-generated/segment-button/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/segment-button/parts.md b/static/auto-generated/segment-button/parts.md
index 130493d8363..1163a444196 100644
--- a/static/auto-generated/segment-button/parts.md
+++ b/static/auto-generated/segment-button/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `indicator` | The indicator displayed on the checked segment button.<br /><br />自動翻訳: チェックしたセグメントボタンに表示されるインジケーターです。 |
+| Name                   | Description                                                                                                                                                                 |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `indicator`            | The indicator displayed on the checked segment button.<br /><br />自動翻訳: チェックしたセグメントボタンに表示されるインジケーターです。                                    |
 | `indicator-background` | The background element for the indicator displayed on the checked segment button.<br /><br />自動翻訳: チェックしたセグメントボタンに表示されるインジケータの背景要素です。 |
-| `native` | The native HTML button element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。 |
-
+| `native`               | The native HTML button element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブ HTML ボタン要素。                                         |
diff --git a/static/auto-generated/segment-button/props.md b/static/auto-generated/segment-button/props.md
index c9606d42913..1532466ebe6 100644
--- a/static/auto-generated/segment-button/props.md
+++ b/static/auto-generated/segment-button/props.md
@@ -1,55 +1,44 @@
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the user cannot interact with the segment button.<br /><br />自動翻訳: `true`の場合、ユーザーはセグメントボタンを操作することができません。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                              |
+| **Default**     | `false`                                                                                                                                                |
 
+### layout
 
-### layout 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the layout of the text and icon in the segment.<br /><br />自動翻訳: セグメント内のテキストとアイコンのレイアウトを設定します。 |
-| **Attribute** | `layout` |
-| **Type** | `"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined` |
-| **Default** | `'icon-top'` |
-
-
+| **Attribute**   | `layout`                                                                                                                            |
+| **Type**        | `"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined`                             |
+| **Default**     | `'icon-top'`                                                                                                                        |
 
-### mode 
+### mode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### type
 
-
-### type 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | The type of the button.<br /><br />自動翻訳: ボタンの種類です。 |
-| **Attribute** | `type` |
-| **Type** | `"button" ｜ "reset" ｜ "submit"` |
-| **Default** | `'button'` |
-
+| **Attribute**   | `type`                                                          |
+| **Type**        | `"button" ｜ "reset" ｜ "submit"`                               |
+| **Default**     | `'button'`                                                      |
 
+### value
 
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                                  |
+| --------------- | -------------------------------------------------------------------------------- |
 | **Description** | The value of the segment button.<br /><br />自動翻訳: セグメントボタンの値です。 |
-| **Attribute** | `value` |
-| **Type** | `string` |
-| **Default** | `'ion-sb-' + ids++` |
-
+| **Attribute**   | `value`                                                                          |
+| **Type**        | `string`                                                                         |
+| **Default**     | `'ion-sb-' + ids++`                                                              |
diff --git a/static/auto-generated/segment-button/slots.md b/static/auto-generated/segment-button/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/segment-button/slots.md
+++ b/static/auto-generated/segment-button/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/segment/custom-props.md b/static/auto-generated/segment/custom-props.md
index a33d23c9220..866ee93d52b 100644
--- a/static/auto-generated/segment/custom-props.md
+++ b/static/auto-generated/segment/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name           | Description                                                                  |
+| -------------- | ---------------------------------------------------------------------------- |
 | `--background` | Background of the segment button<br /><br />自動翻訳: セグメントボタンの背景 |
-
diff --git a/static/auto-generated/segment/events.md b/static/auto-generated/segment/events.md
index 4546f9fbe92..f684ae98516 100644
--- a/static/auto-generated/segment/events.md
+++ b/static/auto-generated/segment/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `ionChange` | Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.<br /><br />自動翻訳: valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行される。 |
-
+| Name        | Description                                                                                                                                                                                                                 |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ionChange` | Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.<br /><br />自動翻訳: value プロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行される。 |
diff --git a/static/auto-generated/segment/methods.md b/static/auto-generated/segment/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/segment/methods.md
+++ b/static/auto-generated/segment/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/segment/parts.md b/static/auto-generated/segment/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/segment/parts.md
+++ b/static/auto-generated/segment/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/segment/props.md b/static/auto-generated/segment/props.md
index 683676443d0..6eb8d35b9be 100644
--- a/static/auto-generated/segment/props.md
+++ b/static/auto-generated/segment/props.md
@@ -1,77 +1,62 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-### disabled 
+### disabled
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the segment.<br /><br />自動翻訳: `true`の場合、ユーザーはセグメントと対話することができません。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `disabled`                                                                                                                                |
+| **Type**        | `boolean`                                                                                                                                 |
+| **Default**     | `false`                                                                                                                                   |
 
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-### scrollable 
+### scrollable
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.<br /><br />自動翻訳: `true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。 |
-| **Attribute** | `scrollable` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `scrollable`                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
+### selectOnFocus
 
-
-### selectOnFocus 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.<br /><br />自動翻訳: `true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。 |
-| **Attribute** | `select-on-focus` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `select-on-focus`                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                      |
 
-### swipeGesture 
+### swipeGesture
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, users will be able to swipe between segment buttons to activate them.<br /><br />自動翻訳: `true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。 |
-| **Attribute** | `swipe-gesture` |
-| **Type** | `boolean` |
-| **Default** | `true` |
+| **Attribute**   | `swipe-gesture`                                                                                                                                                                                  |
+| **Type**        | `boolean`                                                                                                                                                                                        |
+| **Default**     | `true`                                                                                                                                                                                           |
 
+### value
 
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                 |
+| --------------- | --------------------------------------------------------------- |
 | **Description** | the value of the segment.<br /><br />自動翻訳: セグメントの価値 |
-| **Attribute** | `value` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `value`                                                         |
+| **Type**        | `null ｜ string ｜ undefined`                                   |
+| **Default**     | `undefined`                                                     |
diff --git a/static/auto-generated/segment/slots.md b/static/auto-generated/segment/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/segment/slots.md
+++ b/static/auto-generated/segment/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/select-option/custom-props.md b/static/auto-generated/select-option/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/select-option/custom-props.md
+++ b/static/auto-generated/select-option/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/select-option/events.md b/static/auto-generated/select-option/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/select-option/events.md
+++ b/static/auto-generated/select-option/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/select-option/methods.md b/static/auto-generated/select-option/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/select-option/methods.md
+++ b/static/auto-generated/select-option/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/select-option/parts.md b/static/auto-generated/select-option/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/select-option/parts.md
+++ b/static/auto-generated/select-option/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/select-option/props.md b/static/auto-generated/select-option/props.md
index f01e52194ed..faf91d00233 100644
--- a/static/auto-generated/select-option/props.md
+++ b/static/auto-generated/select-option/props.md
@@ -1,22 +1,17 @@
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.<br /><br />自動翻訳: `true`の場合、ユーザは選択オプションと対話することができない。このプロパティは、`interface="action-sheet"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからである。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                               |
 
+### value
 
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                                 |
+| --------------- | ------------------------------------------------------------------------------- |
 | **Description** | The text value of the option.<br /><br />自動翻訳: オプションのテキスト値です。 |
-| **Attribute** | `value` |
-| **Type** | `any` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `value`                                                                         |
+| **Type**        | `any`                                                                           |
+| **Default**     | `undefined`                                                                     |
diff --git a/static/auto-generated/select-option/slots.md b/static/auto-generated/select-option/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/select-option/slots.md
+++ b/static/auto-generated/select-option/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/select/custom-props.md b/static/auto-generated/select/custom-props.md
index 52a4540a0d6..f6e29205609 100644
--- a/static/auto-generated/select/custom-props.md
+++ b/static/auto-generated/select/custom-props.md
@@ -1,10 +1,8 @@
-
-| Name | Description |
-| --- | --- |
-| `--padding-bottom` | Bottom padding of the select<br /><br />自動翻訳: セレクトの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select<br /><br />自動翻訳: セレクトの方向が左から右の場合は右パディング、右から左の場合は左パディングを行う |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select<br /><br />自動翻訳: セレクトの方向が左から右の場合は左パディング、右から左の場合は右パディング |
-| `--padding-top` | Top padding of the select<br /><br />自動翻訳: セレクトのトップパディング |
-| `--placeholder-color` | Color of the select placeholder text<br /><br />自動翻訳: セレクトプレースホルダーテキストの色 |
-| `--placeholder-opacity` | Opacity of the select placeholder text<br /><br />自動翻訳: 選択プレースホルダーテキストの不透明度 |
-
+| Name                    | Description                                                                                                                                                                                                     |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--padding-bottom`      | Bottom padding of the select<br /><br />自動翻訳: セレクトの下パディング                                                                                                                                        |
+| `--padding-end`         | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select<br /><br />自動翻訳: セレクトの方向が左から右の場合は右パディング、右から左の場合は左パディングを行う |
+| `--padding-start`       | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select<br /><br />自動翻訳: セレクトの方向が左から右の場合は左パディング、右から左の場合は右パディング       |
+| `--padding-top`         | Top padding of the select<br /><br />自動翻訳: セレクトのトップパディング                                                                                                                                       |
+| `--placeholder-color`   | Color of the select placeholder text<br /><br />自動翻訳: セレクトプレースホルダーテキストの色                                                                                                                  |
+| `--placeholder-opacity` | Opacity of the select placeholder text<br /><br />自動翻訳: 選択プレースホルダーテキストの不透明度                                                                                                              |
diff --git a/static/auto-generated/select/events.md b/static/auto-generated/select/events.md
index 2ea2d9da80f..b8e6d18e266 100644
--- a/static/auto-generated/select/events.md
+++ b/static/auto-generated/select/events.md
@@ -1,9 +1,7 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the select loses focus.<br /><br />自動翻訳: セレクトのフォーカスが外れたときに発せられる。 |
-| `ionCancel` | Emitted when the selection is cancelled.<br /><br />自動翻訳: 選択がキャンセルされたときに発する。 |
-| `ionChange` | Emitted when the value has changed.<br /><br />自動翻訳: 値が変更されたときに発せられる。 |
-| `ionDismiss` | Emitted when the overlay is dismissed.<br /><br />自動翻訳: オーバーレイが解除されたときに発せられる。 |
-| `ionFocus` | Emitted when the select has focus.<br /><br />自動翻訳: セレクトにフォーカスが当たったときに発する。 |
-
+| Name         | Description                                                                                              |
+| ------------ | -------------------------------------------------------------------------------------------------------- |
+| `ionBlur`    | Emitted when the select loses focus.<br /><br />自動翻訳: セレクトのフォーカスが外れたときに発せられる。 |
+| `ionCancel`  | Emitted when the selection is cancelled.<br /><br />自動翻訳: 選択がキャンセルされたときに発する。       |
+| `ionChange`  | Emitted when the value has changed.<br /><br />自動翻訳: 値が変更されたときに発せられる。                |
+| `ionDismiss` | Emitted when the overlay is dismissed.<br /><br />自動翻訳: オーバーレイが解除されたときに発せられる。   |
+| `ionFocus`   | Emitted when the select has focus.<br /><br />自動翻訳: セレクトにフォーカスが当たったときに発する。     |
diff --git a/static/auto-generated/select/methods.md b/static/auto-generated/select/methods.md
index 6aab01154ea..a1940b82406 100644
--- a/static/auto-generated/select/methods.md
+++ b/static/auto-generated/select/methods.md
@@ -1,10 +1,6 @@
-
-
 ### open
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.<br /><br />自動翻訳: セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。 |
-| **Signature** | `open(event?: UIEvent) => Promise<any>` |
-
-
+| **Signature**   | `open(event?: UIEvent) => Promise<any>`                                                                                                                                                                                                                                                                                            |
diff --git a/static/auto-generated/select/parts.md b/static/auto-generated/select/parts.md
index 85d60972ae6..58ba8c44f5a 100644
--- a/static/auto-generated/select/parts.md
+++ b/static/auto-generated/select/parts.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `icon` | The select icon container.<br /><br />自動翻訳: セレクトアイコンのコンテナです。 |
+| Name          | Description                                                                                                                |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `icon`        | The select icon container.<br /><br />自動翻訳: セレクトアイコンのコンテナです。                                           |
 | `placeholder` | The text displayed in the select when there is no value.<br /><br />自動翻訳: 値がないときにセレクトに表示されるテキスト。 |
-| `text` | The displayed value of the select.<br /><br />自動翻訳: セレクトの表示値です。 |
-
+| `text`        | The displayed value of the select.<br /><br />自動翻訳: セレクトの表示値です。                                             |
diff --git a/static/auto-generated/select/props.md b/static/auto-generated/select/props.md
index 3736931e66e..ffcc2667a47 100644
--- a/static/auto-generated/select/props.md
+++ b/static/auto-generated/select/props.md
@@ -1,132 +1,107 @@
+### cancelText
 
-
-### cancelText 
-
-| | |
-| --- | --- |
+|                 |                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------- |
 | **Description** | The text to display on the cancel button.<br /><br />自動翻訳: キャンセルボタンに表示するテキストです。 |
-| **Attribute** | `cancel-text` |
-| **Type** | `string` |
-| **Default** | `'Cancel'` |
-
-
+| **Attribute**   | `cancel-text`                                                                                           |
+| **Type**        | `string`                                                                                                |
+| **Default**     | `'Cancel'`                                                                                              |
 
-### compareWith 
+### compareWith
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A property name or function used to compare object values<br /><br />自動翻訳: オブジェクトの値を比較するために使用されるプロパティ名または関数。 |
-| **Attribute** | `compare-with` |
-| **Type** | `((currentValue: any, compareValue: any) => boolean) ｜ null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `compare-with`                                                                                                                                    |
+| **Type**        | `((currentValue: any, compareValue: any) => boolean) ｜ null ｜ string ｜ undefined`                                                              |
+| **Default**     | `undefined`                                                                                                                                       |
 
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the select.<br /><br />自動翻訳: `true`の場合、ユーザはセレクトと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                          |
+| **Default**     | `false`                                                                                                                            |
 
+### interface
 
-### interface 
+|                 |                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The interface the select should use: `action-sheet`, `popover` or `alert`.<br /><br />自動翻訳: select が使用するインターフェース。action-sheet`, `popover`または`alert`. |
+| **Attribute**   | `interface`                                                                                                                                                               |
+| **Type**        | `"action-sheet" ｜ "alert" ｜ "popover"`                                                                                                                                  |
+| **Default**     | `'alert'`                                                                                                                                                                 |
 
-| | |
-| --- | --- |
-| **Description** | The interface the select should use: `action-sheet`, `popover` or `alert`.<br /><br />自動翻訳: selectが使用するインターフェース。action-sheet`, `popover` または `alert`. |
-| **Attribute** | `interface` |
-| **Type** | `"action-sheet" ｜ "alert" ｜ "popover"` |
-| **Default** | `'alert'` |
+### interfaceOptions
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface.<br /><br />Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.<br /><br />自動翻訳: alert`、`action-sheet`、`popover`インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意:`interfaceOptions`は`alert`インターフェースで`inputs`や`buttons` をオーバーライドしません。 |
+| **Attribute**   | `interface-options`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Default**     | `{}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
+### mode
 
-### interfaceOptions 
-
-| | |
-| --- | --- |
-| **Description** | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface.<br /><br />Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.<br /><br />自動翻訳: alert`、`action-sheet`、`popover` インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。  注意: `interfaceOptions` は `alert` インターフェースで `inputs` や `buttons` をオーバーライドしません。 |
-| **Attribute** | `interface-options` |
-| **Type** | `any` |
-| **Default** | `{}` |
-
-
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### multiple
 
-### multiple 
+|                 |                                                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the select can accept multiple values.<br /><br />自動翻訳: `true`の場合、select は複数の値を受け入れることができる。 |
+| **Attribute**   | `multiple`                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                        |
+| **Default**     | `false`                                                                                                                          |
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the select can accept multiple values.<br /><br />自動翻訳: `true`の場合、selectは複数の値を受け入れることができる。 |
-| **Attribute** | `multiple` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+### name
 
-
-
-### name 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
-
-
-
-### okText 
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
 
-| | |
-| --- | --- |
-| **Description** | The text to display on the ok button.<br /><br />自動翻訳: okボタンに表示するテキストです。 |
-| **Attribute** | `ok-text` |
-| **Type** | `string` |
-| **Default** | `'OK'` |
+### okText
 
+|                 |                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------- |
+| **Description** | The text to display on the ok button.<br /><br />自動翻訳: ok ボタンに表示するテキストです。 |
+| **Attribute**   | `ok-text`                                                                                    |
+| **Type**        | `string`                                                                                     |
+| **Default**     | `'OK'`                                                                                       |
 
+### placeholder
 
-### placeholder 
-
-| | |
-| --- | --- |
+|                 |                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------- |
 | **Description** | The text to display when the select is empty.<br /><br />自動翻訳: セレクトが空のときに表示するテキストです。 |
-| **Attribute** | `placeholder` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `placeholder`                                                                                                 |
+| **Type**        | `string ｜ undefined`                                                                                         |
+| **Default**     | `undefined`                                                                                                   |
 
-### selectedText 
+### selectedText
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The text to display instead of the selected option's value.<br /><br />自動翻訳: 選択されたオプションの値の代わりに表示するテキストです。 |
-| **Attribute** | `selected-text` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `selected-text`                                                                                                                           |
+| **Type**        | `null ｜ string ｜ undefined`                                                                                                             |
+| **Default**     | `undefined`                                                                                                                               |
 
+### value
 
-
-### value 
-
-| | |
-| --- | --- |
+|                 |                                                                  |
+| --------------- | ---------------------------------------------------------------- |
 | **Description** | the value of the select.<br /><br />自動翻訳: セレクトの値です。 |
-| **Attribute** | `value` |
-| **Type** | `any` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `value`                                                          |
+| **Type**        | `any`                                                            |
+| **Default**     | `undefined`                                                      |
diff --git a/static/auto-generated/select/slots.md b/static/auto-generated/select/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/select/slots.md
+++ b/static/auto-generated/select/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/skeleton-text/custom-props.md b/static/auto-generated/skeleton-text/custom-props.md
index a786414e681..5f7f480c49c 100644
--- a/static/auto-generated/skeleton-text/custom-props.md
+++ b/static/auto-generated/skeleton-text/custom-props.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the skeleton text<br /><br />自動翻訳: スケルトンテキストの背景 |
-| `--background-rgb` | Background of the skeleton text in rgb format<br /><br />自動翻訳: スケルトンテキストの背景（rgb形式 |
-| `--border-radius` | Border radius of the skeleton text<br /><br />自動翻訳: スケルトンテキストのボーダー半径 |
-
+| Name               | Description                                                                                           |
+| ------------------ | ----------------------------------------------------------------------------------------------------- |
+| `--background`     | Background of the skeleton text<br /><br />自動翻訳: スケルトンテキストの背景                         |
+| `--background-rgb` | Background of the skeleton text in rgb format<br /><br />自動翻訳: スケルトンテキストの背景（rgb 形式 |
+| `--border-radius`  | Border radius of the skeleton text<br /><br />自動翻訳: スケルトンテキストのボーダー半径              |
diff --git a/static/auto-generated/skeleton-text/events.md b/static/auto-generated/skeleton-text/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/skeleton-text/events.md
+++ b/static/auto-generated/skeleton-text/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/skeleton-text/methods.md b/static/auto-generated/skeleton-text/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/skeleton-text/methods.md
+++ b/static/auto-generated/skeleton-text/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/skeleton-text/parts.md b/static/auto-generated/skeleton-text/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/skeleton-text/parts.md
+++ b/static/auto-generated/skeleton-text/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/skeleton-text/props.md b/static/auto-generated/skeleton-text/props.md
index 40f74ff1aed..67b480bae56 100644
--- a/static/auto-generated/skeleton-text/props.md
+++ b/static/auto-generated/skeleton-text/props.md
@@ -1,11 +1,8 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the skeleton text will animate.<br /><br />自動翻訳: `true`の場合、スケルトンテキストをアニメーションさせる。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `animated`                                                                                                               |
+| **Type**        | `boolean`                                                                                                                |
+| **Default**     | `false`                                                                                                                  |
diff --git a/static/auto-generated/skeleton-text/slots.md b/static/auto-generated/skeleton-text/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/skeleton-text/slots.md
+++ b/static/auto-generated/skeleton-text/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/slide/custom-props.md b/static/auto-generated/slide/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/slide/custom-props.md
+++ b/static/auto-generated/slide/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/slide/events.md b/static/auto-generated/slide/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/slide/events.md
+++ b/static/auto-generated/slide/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/slide/methods.md b/static/auto-generated/slide/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/slide/methods.md
+++ b/static/auto-generated/slide/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/slide/parts.md b/static/auto-generated/slide/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/slide/parts.md
+++ b/static/auto-generated/slide/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/slide/props.md b/static/auto-generated/slide/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/slide/props.md
+++ b/static/auto-generated/slide/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/slide/slots.md b/static/auto-generated/slide/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/slide/slots.md
+++ b/static/auto-generated/slide/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/slides/custom-props.md b/static/auto-generated/slides/custom-props.md
index efb79afe09a..30a9b14b6b5 100644
--- a/static/auto-generated/slides/custom-props.md
+++ b/static/auto-generated/slides/custom-props.md
@@ -1,10 +1,8 @@
-
-| Name | Description |
-| --- | --- |
-| `--bullet-background` | Background of the pagination bullets<br /><br />自動翻訳: ページネーションの箇条書きの背景 |
-| `--bullet-background-active` | Background of the active pagination bullet<br /><br />自動翻訳: アクティブなページネーションバレットの背景 |
-| `--progress-bar-background` | Background of the pagination progress-bar<br /><br />自動翻訳: ページネーションの進行バーの背景 |
-| `--progress-bar-background-active` | Background of the active pagination progress-bar<br /><br />自動翻訳: アクティブなページネーションの進行バーの背景 |
-| `--scroll-bar-background` | Background of the pagination scroll-bar<br /><br />自動翻訳: ページネーション用スクロールバーの背景 |
-| `--scroll-bar-background-active` | Background of the active pagination scroll-bar<br /><br />自動翻訳: アクティブなページネーションのスクロールバーの背景 |
-
+| Name                               | Description                                                                                                            |
+| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `--bullet-background`              | Background of the pagination bullets<br /><br />自動翻訳: ページネーションの箇条書きの背景                             |
+| `--bullet-background-active`       | Background of the active pagination bullet<br /><br />自動翻訳: アクティブなページネーションバレットの背景             |
+| `--progress-bar-background`        | Background of the pagination progress-bar<br /><br />自動翻訳: ページネーションの進行バーの背景                        |
+| `--progress-bar-background-active` | Background of the active pagination progress-bar<br /><br />自動翻訳: アクティブなページネーションの進行バーの背景     |
+| `--scroll-bar-background`          | Background of the pagination scroll-bar<br /><br />自動翻訳: ページネーション用スクロールバーの背景                    |
+| `--scroll-bar-background-active`   | Background of the active pagination scroll-bar<br /><br />自動翻訳: アクティブなページネーションのスクロールバーの背景 |
diff --git a/static/auto-generated/slides/events.md b/static/auto-generated/slides/events.md
index 48c94ac97d3..0078b0bdc21 100644
--- a/static/auto-generated/slides/events.md
+++ b/static/auto-generated/slides/events.md
@@ -1,20 +1,18 @@
-
-| Name | Description |
-| --- | --- |
-| `ionSlideDidChange` | Emitted after the active slide has changed.<br /><br />自動翻訳: アクティブスライドが変更された後に発せられる。 |
-| `ionSlideDoubleTap` | Emitted when the user double taps on the slide's container.<br /><br />自動翻訳: ユーザがスライドのコンテナをダブルタップしたときに発生する。 |
-| `ionSlideDrag` | Emitted when the slider is actively being moved.<br /><br />自動翻訳: スライダーがアクティブに移動しているときに発せられる。 |
-| `ionSlideNextEnd` | Emitted when the next slide has ended.<br /><br />自動翻訳: 次のスライドが終了したときに発せられる。 |
-| `ionSlideNextStart` | Emitted when the next slide has started.<br /><br />自動翻訳: 次のスライドが開始されたときに発せられる。 |
-| `ionSlidePrevEnd` | Emitted when the previous slide has ended.<br /><br />自動翻訳: 前のスライドが終了したときに発せられる。 |
-| `ionSlidePrevStart` | Emitted when the previous slide has started.<br /><br />自動翻訳: 前のスライドが開始されたときに発せられる。 |
-| `ionSlideReachEnd` | Emitted when the slider is at the last slide.<br /><br />自動翻訳: スライダーが最後のスライドになったときに発せられる。 |
-| `ionSlideReachStart` | Emitted when the slider is at its initial position.<br /><br />自動翻訳: スライダーが初期位置にあるときに発せられる。 |
-| `ionSlidesDidLoad` | Emitted after Swiper initialization<br /><br />自動翻訳: Swiperの初期化後に発せられる |
-| `ionSlideTap` | Emitted when the user taps/clicks on the slide's container.<br /><br />自動翻訳: ユーザがスライドのコンテナをタップ/クリックしたときに発せられる。 |
-| `ionSlideTouchEnd` | Emitted when the user releases the touch.<br /><br />自動翻訳: ユーザーがタッチを離したときに発せられる。 |
-| `ionSlideTouchStart` | Emitted when the user first touches the slider.<br /><br />自動翻訳: ユーザーがスライダーに初めて触れたときに発せられる。 |
-| `ionSlideTransitionEnd` | Emitted when the slide transition has ended.<br /><br />自動翻訳: スライド遷移が終了したときに発せられる。 |
-| `ionSlideTransitionStart` | Emitted when the slide transition has started.<br /><br />自動翻訳: スライド遷移が開始されたときに発せられる。 |
-| `ionSlideWillChange` | Emitted before the active slide has changed.<br /><br />自動翻訳: アクティブスライドが変更される前に発せられる。 |
-
+| Name                      | Description                                                                                                                                        |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ionSlideDidChange`       | Emitted after the active slide has changed.<br /><br />自動翻訳: アクティブスライドが変更された後に発せられる。                                    |
+| `ionSlideDoubleTap`       | Emitted when the user double taps on the slide's container.<br /><br />自動翻訳: ユーザがスライドのコンテナをダブルタップしたときに発生する。      |
+| `ionSlideDrag`            | Emitted when the slider is actively being moved.<br /><br />自動翻訳: スライダーがアクティブに移動しているときに発せられる。                       |
+| `ionSlideNextEnd`         | Emitted when the next slide has ended.<br /><br />自動翻訳: 次のスライドが終了したときに発せられる。                                               |
+| `ionSlideNextStart`       | Emitted when the next slide has started.<br /><br />自動翻訳: 次のスライドが開始されたときに発せられる。                                           |
+| `ionSlidePrevEnd`         | Emitted when the previous slide has ended.<br /><br />自動翻訳: 前のスライドが終了したときに発せられる。                                           |
+| `ionSlidePrevStart`       | Emitted when the previous slide has started.<br /><br />自動翻訳: 前のスライドが開始されたときに発せられる。                                       |
+| `ionSlideReachEnd`        | Emitted when the slider is at the last slide.<br /><br />自動翻訳: スライダーが最後のスライドになったときに発せられる。                            |
+| `ionSlideReachStart`      | Emitted when the slider is at its initial position.<br /><br />自動翻訳: スライダーが初期位置にあるときに発せられる。                              |
+| `ionSlidesDidLoad`        | Emitted after Swiper initialization<br /><br />自動翻訳: Swiper の初期化後に発せられる                                                             |
+| `ionSlideTap`             | Emitted when the user taps/clicks on the slide's container.<br /><br />自動翻訳: ユーザがスライドのコンテナをタップ/クリックしたときに発せられる。 |
+| `ionSlideTouchEnd`        | Emitted when the user releases the touch.<br /><br />自動翻訳: ユーザーがタッチを離したときに発せられる。                                          |
+| `ionSlideTouchStart`      | Emitted when the user first touches the slider.<br /><br />自動翻訳: ユーザーがスライダーに初めて触れたときに発せられる。                          |
+| `ionSlideTransitionEnd`   | Emitted when the slide transition has ended.<br /><br />自動翻訳: スライド遷移が終了したときに発せられる。                                         |
+| `ionSlideTransitionStart` | Emitted when the slide transition has started.<br /><br />自動翻訳: スライド遷移が開始されたときに発せられる。                                     |
+| `ionSlideWillChange`      | Emitted before the active slide has changed.<br /><br />自動翻訳: アクティブスライドが変更される前に発せられる。                                   |
diff --git a/static/auto-generated/slides/methods.md b/static/auto-generated/slides/methods.md
index 336c462226f..02eb838a354 100644
--- a/static/auto-generated/slides/methods.md
+++ b/static/auto-generated/slides/methods.md
@@ -1,130 +1,111 @@
-
-
 ### getActiveIndex
 
-| | |
-| --- | --- |
+|                 |                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------- |
 | **Description** | Get the index of the active slide.<br /><br />自動翻訳: アクティブなスライドのインデックスを取得します。 |
-| **Signature** | `getActiveIndex() => Promise<number>` |
-
+| **Signature**   | `getActiveIndex() => Promise<number>`                                                                    |
 
 ### getPreviousIndex
 
-| | |
-| --- | --- |
+|                 |                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------- |
 | **Description** | Get the index of the previous slide.<br /><br />自動翻訳: 前のスライドのインデックスを取得します。 |
-| **Signature** | `getPreviousIndex() => Promise<number>` |
-
+| **Signature**   | `getPreviousIndex() => Promise<number>`                                                            |
 
 ### getSwiper
 
-| | |
-| --- | --- |
-| **Description** | Get the Swiper instance. Use this to access the full Swiper API. See https://swiperjs.com/swiper-api for all API options.<br /><br />自動翻訳: Swiperのインスタンスを取得します。これを使用して、SwiperのフルAPIにアクセスします。すべてのAPIオプションについては、https://swiperjs.com/swiper-api を参照してください。 |
-| **Signature** | `getSwiper() => Promise<any>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                               |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Get the Swiper instance. Use this to access the full Swiper API. See https://swiperjs.com/swiper-api for all API options.<br /><br />自動翻訳: Swiper のインスタンスを取得します。これを使用して、Swiper のフル API にアクセスします。すべての API オプションについては、https://swiperjs.com/swiper-api を参照してください。 |
+| **Signature**   | `getSwiper() => Promise<any>`                                                                                                                                                                                                                                                                                                 |
 
 ### isBeginning
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Get whether or not the current slide is the first slide.<br /><br />自動翻訳: 現在のスライドが最初のスライドであるか否かを取得する。 |
-| **Signature** | `isBeginning() => Promise<boolean>` |
-
+| **Signature**   | `isBeginning() => Promise<boolean>`                                                                                                  |
 
 ### isEnd
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Get whether or not the current slide is the last slide.<br /><br />自動翻訳: 現在のスライドが最後のスライドであるか否かを取得する。 |
-| **Signature** | `isEnd() => Promise<boolean>` |
-
+| **Signature**   | `isEnd() => Promise<boolean>`                                                                                                       |
 
 ### length
 
-| | |
-| --- | --- |
+|                 |                                                                                   |
+| --------------- | --------------------------------------------------------------------------------- |
 | **Description** | Get the total number of slides.<br /><br />自動翻訳: スライドの総枚数を取得する。 |
-| **Signature** | `length() => Promise<number>` |
-
+| **Signature**   | `length() => Promise<number>`                                                     |
 
 ### lockSwipeToNext
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Lock or unlock the ability to slide to the next slide.<br /><br />自動翻訳: 次のスライドにスライドする機能をロックまたはアンロックする。 |
-| **Signature** | `lockSwipeToNext(lock: boolean) => Promise<void>` |
-
+| **Signature**   | `lockSwipeToNext(lock: boolean) => Promise<void>`                                                                                        |
 
 ### lockSwipeToPrev
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Lock or unlock the ability to slide to the previous slide.<br /><br />自動翻訳: 前のスライドにスライドする機能をロックまたはアンロックします。 |
-| **Signature** | `lockSwipeToPrev(lock: boolean) => Promise<void>` |
-
+| **Signature**   | `lockSwipeToPrev(lock: boolean) => Promise<void>`                                                                                              |
 
 ### lockSwipes
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                      |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Lock or unlock the ability to slide to the next or previous slide.<br /><br />自動翻訳: 次のスライドや前のスライドにスライドする機能をロックまたはアンロックします。 |
-| **Signature** | `lockSwipes(lock: boolean) => Promise<void>` |
-
+| **Signature**   | `lockSwipes(lock: boolean) => Promise<void>`                                                                                                                         |
 
 ### slideNext
 
-| | |
-| --- | --- |
+|                 |                                                                               |
+| --------------- | ----------------------------------------------------------------------------- |
 | **Description** | Transition to the next slide.<br /><br />自動翻訳: 次のスライドに遷移します。 |
-| **Signature** | `slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>` |
-
+| **Signature**   | `slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>`          |
 
 ### slidePrev
 
-| | |
-| --- | --- |
+|                 |                                                                                   |
+| --------------- | --------------------------------------------------------------------------------- |
 | **Description** | Transition to the previous slide.<br /><br />自動翻訳: 前のスライドに遷移します。 |
-| **Signature** | `slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>` |
-
+| **Signature**   | `slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>`              |
 
 ### slideTo
 
-| | |
-| --- | --- |
+|                 |                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------- |
 | **Description** | Transition to the specified slide.<br /><br />自動翻訳: 指定されたスライドに遷移する。 |
-| **Signature** | `slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>` |
-
+| **Signature**   | `slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>`      |
 
 ### startAutoplay
 
-| | |
-| --- | --- |
+|                 |                                                                |
+| --------------- | -------------------------------------------------------------- |
 | **Description** | Start auto play.<br /><br />自動翻訳: オートプレイを開始する。 |
-| **Signature** | `startAutoplay() => Promise<void>` |
-
+| **Signature**   | `startAutoplay() => Promise<void>`                             |
 
 ### stopAutoplay
 
-| | |
-| --- | --- |
+|                 |                                                           |
+| --------------- | --------------------------------------------------------- |
 | **Description** | Stop auto play.<br /><br />自動翻訳: 自動再生を停止する。 |
-| **Signature** | `stopAutoplay() => Promise<void>` |
-
+| **Signature**   | `stopAutoplay() => Promise<void>`                         |
 
 ### update
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Update the underlying slider implementation. Call this if you've added or removed child slides.<br /><br />自動翻訳: 基礎となるスライダーの実装を更新します。子スライダーを追加または削除した場合に呼び出します。 |
-| **Signature** | `update() => Promise<void>` |
-
+| **Signature**   | `update() => Promise<void>`                                                                                                                                                                                       |
 
 ### updateAutoHeight
 
-| | |
-| --- | --- |
-| **Description** | Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.<br /><br />自動翻訳: speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeightが有効な場合）。 |
-| **Signature** | `updateAutoHeight(speed?: number) => Promise<void>` |
-
-
+|                 |                                                                                                                                                                                                                                 |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.<br /><br />自動翻訳: speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeight が有効な場合）。 |
+| **Signature**   | `updateAutoHeight(speed?: number) => Promise<void>`                                                                                                                                                                             |
diff --git a/static/auto-generated/slides/parts.md b/static/auto-generated/slides/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/slides/parts.md
+++ b/static/auto-generated/slides/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/slides/props.md b/static/auto-generated/slides/props.md
index ffcf3d44d5c..12a1ffd12f8 100644
--- a/static/auto-generated/slides/props.md
+++ b/static/auto-generated/slides/props.md
@@ -1,44 +1,35 @@
+### mode
 
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
-
-### options 
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-| | |
-| --- | --- |
-| **Description** | Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options<br /><br />自動翻訳: swiperインスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。 |
-| **Attribute** | `options` |
-| **Type** | `any` |
-| **Default** | `{}` |
+### options
 
+|                 |                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options<br /><br />自動翻訳: swiper インスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。 |
+| **Attribute**   | `options`                                                                                                                                                                                                                                    |
+| **Type**        | `any`                                                                                                                                                                                                                                        |
+| **Default**     | `{}`                                                                                                                                                                                                                                         |
 
+### pager
 
-### pager 
-
-| | |
-| --- | --- |
+|                 |                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, show the pagination.<br /><br />自動翻訳: もし `true` ならば、ページネーションを表示する。 |
-| **Attribute** | `pager` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `pager`                                                                                               |
+| **Type**        | `boolean`                                                                                             |
+| **Default**     | `false`                                                                                               |
 
+### scrollbar
 
-### scrollbar 
-
-| | |
-| --- | --- |
+|                 |                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, show the scrollbar.<br /><br />自動翻訳: `true`の場合、スクロールバーを表示する。 |
-| **Attribute** | `scrollbar` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `scrollbar`                                                                                  |
+| **Type**        | `boolean`                                                                                    |
+| **Default**     | `false`                                                                                      |
diff --git a/static/auto-generated/slides/slots.md b/static/auto-generated/slides/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/slides/slots.md
+++ b/static/auto-generated/slides/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/spinner/custom-props.md b/static/auto-generated/spinner/custom-props.md
index 15c785e32e4..d7e92aec0af 100644
--- a/static/auto-generated/spinner/custom-props.md
+++ b/static/auto-generated/spinner/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                            |
+| --------- | ------------------------------------------------------ |
 | `--color` | Color of the spinner<br /><br />自動翻訳: スピナーの色 |
-
diff --git a/static/auto-generated/spinner/events.md b/static/auto-generated/spinner/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/spinner/events.md
+++ b/static/auto-generated/spinner/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/spinner/methods.md b/static/auto-generated/spinner/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/spinner/methods.md
+++ b/static/auto-generated/spinner/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/spinner/parts.md b/static/auto-generated/spinner/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/spinner/parts.md
+++ b/static/auto-generated/spinner/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/spinner/props.md b/static/auto-generated/spinner/props.md
index 006845ce6ff..f091b4d9614 100644
--- a/static/auto-generated/spinner/props.md
+++ b/static/auto-generated/spinner/props.md
@@ -1,44 +1,35 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### duration
 
-### duration 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Duration of the spinner animation in milliseconds. The default varies based on the spinner.<br /><br />自動翻訳: スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。 |
-| **Attribute** | `duration` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `duration`                                                                                                                                                                                        |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                             |
+| **Default**     | `undefined`                                                                                                                                                                                       |
 
+### name
 
-### name 
+|                 |                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.<br /><br />自動翻訳: 使用する SVG スピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。 |
+| **Attribute**   | `name`                                                                                                                                                                                                                                       |
+| **Type**        | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ undefined`                                                                                              |
+| **Default**     | `undefined`                                                                                                                                                                                                                                  |
 
-| | |
-| --- | --- |
-| **Description** | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.<br /><br />自動翻訳: 使用するSVGスピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。 |
-| **Attribute** | `name` |
-| **Type** | `"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ undefined` |
-| **Default** | `undefined` |
+### paused
 
-
-
-### paused 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the spinner's animation will be paused.<br /><br />自動翻訳: `true`の場合、スピナーのアニメーションは一時停止されます。 |
-| **Attribute** | `paused` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `paused`                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                          |
+| **Default**     | `false`                                                                                                                            |
diff --git a/static/auto-generated/spinner/slots.md b/static/auto-generated/spinner/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/spinner/slots.md
+++ b/static/auto-generated/spinner/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/split-pane/custom-props.md b/static/auto-generated/split-pane/custom-props.md
index c6252e2a44d..fe1f2086d42 100644
--- a/static/auto-generated/split-pane/custom-props.md
+++ b/static/auto-generated/split-pane/custom-props.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `--border` | Border between panes<br /><br />自動翻訳: ペイン間のボーダー |
+| Name               | Description                                                                                                                                                                            |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--border`         | Border between panes<br /><br />自動翻訳: ペイン間のボーダー                                                                                                                           |
 | `--side-max-width` | Maximum width of the side pane. Does not apply when split pane is collapsed.<br /><br />自動翻訳: サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
 | `--side-min-width` | Minimum width of the side pane. Does not apply when split pane is collapsed.<br /><br />自動翻訳: サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
-| `--side-width` | Width of the side pane. Does not apply when split pane is collapsed.<br /><br />自動翻訳: サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
-
+| `--side-width`     | Width of the side pane. Does not apply when split pane is collapsed.<br /><br />自動翻訳: サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。             |
diff --git a/static/auto-generated/split-pane/events.md b/static/auto-generated/split-pane/events.md
index 2f1830cf236..6f5b4c5bb5e 100644
--- a/static/auto-generated/split-pane/events.md
+++ b/static/auto-generated/split-pane/events.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name                  | Description                                                                                                                          |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed<br /><br />自動翻訳: 分割画面の表示が変わったときに呼び出される式 |
-
diff --git a/static/auto-generated/split-pane/methods.md b/static/auto-generated/split-pane/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/split-pane/methods.md
+++ b/static/auto-generated/split-pane/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/split-pane/parts.md b/static/auto-generated/split-pane/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/split-pane/parts.md
+++ b/static/auto-generated/split-pane/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/split-pane/props.md b/static/auto-generated/split-pane/props.md
index f2130752811..47506bd53d8 100644
--- a/static/auto-generated/split-pane/props.md
+++ b/static/auto-generated/split-pane/props.md
@@ -1,33 +1,26 @@
+### contentId
 
-
-### contentId 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.<br /><br />自動翻訳: メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。 |
-| **Attribute** | `content-id` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `content-id`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                             |
+| --------------- | ----------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the split pane will be hidden.<br /><br />自動翻訳: `true`の場合、分割ペインが非表示になります。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
-
-### when 
-
-| | |
-| --- | --- |
-| **Description** | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.<br /><br />自動翻訳: 分割パネルを表示するタイミング。CSSメディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。 |
-| **Attribute** | `when` |
-| **Type** | `boolean ｜ string` |
-| **Default** | `QUERY['lg']` |
-
+| **Attribute**   | `disabled`                                                                                                  |
+| **Type**        | `boolean`                                                                                                   |
+| **Default**     | `false`                                                                                                     |
+
+### when
+
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.<br /><br />自動翻訳: 分割パネルを表示するタイミング。CSS メディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。 |
+| **Attribute**   | `when`                                                                                                                                                                                                                                                                                |
+| **Type**        | `boolean ｜ string`                                                                                                                                                                                                                                                                   |
+| **Default**     | `QUERY['lg']`                                                                                                                                                                                                                                                                         |
diff --git a/static/auto-generated/split-pane/slots.md b/static/auto-generated/split-pane/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/split-pane/slots.md
+++ b/static/auto-generated/split-pane/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/tab-bar/custom-props.md b/static/auto-generated/tab-bar/custom-props.md
index 8212abc681d..b2f5145a9b5 100644
--- a/static/auto-generated/tab-bar/custom-props.md
+++ b/static/auto-generated/tab-bar/custom-props.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
+| Name           | Description                                                   |
+| -------------- | ------------------------------------------------------------- |
 | `--background` | Background of the tab bar<br /><br />自動翻訳: タブバーの背景 |
-| `--border` | Border of the tab bar<br /><br />自動翻訳: タブバーの境界線 |
-| `--color` | Color of the tab bar<br /><br />自動翻訳: タブバーの色 |
-
+| `--border`     | Border of the tab bar<br /><br />自動翻訳: タブバーの境界線   |
+| `--color`      | Color of the tab bar<br /><br />自動翻訳: タブバーの色        |
diff --git a/static/auto-generated/tab-bar/events.md b/static/auto-generated/tab-bar/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/tab-bar/events.md
+++ b/static/auto-generated/tab-bar/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/tab-bar/methods.md b/static/auto-generated/tab-bar/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/tab-bar/methods.md
+++ b/static/auto-generated/tab-bar/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/tab-bar/parts.md b/static/auto-generated/tab-bar/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/tab-bar/parts.md
+++ b/static/auto-generated/tab-bar/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/tab-bar/props.md b/static/auto-generated/tab-bar/props.md
index 6b6eda4bb74..ee607950f70 100644
--- a/static/auto-generated/tab-bar/props.md
+++ b/static/auto-generated/tab-bar/props.md
@@ -1,44 +1,35 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### selectedTab
 
-### selectedTab 
-
-| | |
-| --- | --- |
+|                 |                                                                              |
+| --------------- | ---------------------------------------------------------------------------- |
 | **Description** | The selected tab component<br /><br />自動翻訳: 選択されたタブコンポーネント |
-| **Attribute** | `selected-tab` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `selected-tab`                                                               |
+| **Type**        | `string ｜ undefined`                                                        |
+| **Default**     | `undefined`                                                                  |
 
+### translucent
 
-### translucent 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、タブバーを半透明にする。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/tab-bar/slots.md b/static/auto-generated/tab-bar/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/tab-bar/slots.md
+++ b/static/auto-generated/tab-bar/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/tab-button/custom-props.md b/static/auto-generated/tab-button/custom-props.md
index 0231f801fa2..15703a0d670 100644
--- a/static/auto-generated/tab-button/custom-props.md
+++ b/static/auto-generated/tab-button/custom-props.md
@@ -1,15 +1,13 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the tab button<br /><br />自動翻訳: タブボタンの背景 |
-| `--background-focused` | Background of the tab button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスされたときのタブボタンの背景 |
-| `--background-focused-opacity` | Opacity of the tab button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのタブボタンの背景の不透明度 |
-| `--color` | Color of the tab button<br /><br />自動翻訳: タブボタンの色 |
-| `--color-focused` | Color of the tab button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのタブボタンの色 |
-| `--color-selected` | Color of the selected tab button<br /><br />自動翻訳: 選択されたタブボタンの色 |
-| `--padding-bottom` | Bottom padding of the tab button<br /><br />自動翻訳: タブボタンの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button<br /><br />自動翻訳: タブボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button<br /><br />自動翻訳: タブボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
-| `--padding-top` | Top padding of the tab button<br /><br />自動翻訳: タブボタンのトップパディング |
-| `--ripple-color` | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色 |
-
+| Name                           | Description                                                                                                                                                                                                           |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the tab button<br /><br />自動翻訳: タブボタンの背景                                                                                                                                                    |
+| `--background-focused`         | Background of the tab button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスされたときのタブボタンの背景                                                                                      |
+| `--background-focused-opacity` | Opacity of the tab button background when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのタブボタンの背景の不透明度                                                                      |
+| `--color`                      | Color of the tab button<br /><br />自動翻訳: タブボタンの色                                                                                                                                                           |
+| `--color-focused`              | Color of the tab button when focused with the tab key<br /><br />自動翻訳: タブキーでフォーカスしたときのタブボタンの色                                                                                               |
+| `--color-selected`             | Color of the selected tab button<br /><br />自動翻訳: 選択されたタブボタンの色                                                                                                                                        |
+| `--padding-bottom`             | Bottom padding of the tab button<br /><br />自動翻訳: タブボタンの下パディング                                                                                                                                        |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button<br /><br />自動翻訳: タブボタンの向きが左から右の場合は右パディング、右から左の場合は左パディングとなる |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button<br /><br />自動翻訳: タブボタンの向きが左から右の場合は左パディング、右から左の場合は右パディングとなる |
+| `--padding-top`                | Top padding of the tab button<br /><br />自動翻訳: タブボタンのトップパディング                                                                                                                                       |
+| `--ripple-color`               | Color of the button ripple effect<br /><br />自動翻訳: ボタンリプルエフェクトの色                                                                                                                                     |
diff --git a/static/auto-generated/tab-button/events.md b/static/auto-generated/tab-button/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/tab-button/events.md
+++ b/static/auto-generated/tab-button/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/tab-button/methods.md b/static/auto-generated/tab-button/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/tab-button/methods.md
+++ b/static/auto-generated/tab-button/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/tab-button/parts.md b/static/auto-generated/tab-button/parts.md
index 2ad66044637..9c84d72cada 100644
--- a/static/auto-generated/tab-button/parts.md
+++ b/static/auto-generated/tab-button/parts.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
-| `native` | The native HTML anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブHTMLのアンカー要素です。 |
-
+| Name     | Description                                                                                                                                 |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `native` | The native HTML anchor element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包むネイティブ HTML のアンカー要素です。 |
diff --git a/static/auto-generated/tab-button/props.md b/static/auto-generated/tab-button/props.md
index 39aa394f3b4..84c50d3fe9c 100644
--- a/static/auto-generated/tab-button/props.md
+++ b/static/auto-generated/tab-button/props.md
@@ -1,99 +1,80 @@
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the tab button.<br /><br />自動翻訳: `true`の場合、ユーザはタブボタンを操作することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                               |
+| **Type**        | `boolean`                                                                                                                                |
+| **Default**     | `false`                                                                                                                                  |
 
+### download
 
-### download 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).<br /><br />自動翻訳: この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
-| **Attribute** | `download` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `download`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
-### href 
+### href
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.<br /><br />自動翻訳: ハイパーリンクが指し示す URL または URL フラグメントを格納する。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
-| **Attribute** | `href` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `href`                                                                                                                                                                                                                                                                                |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                           |
 
+### layout
 
-
-### layout 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.<br /><br />自動翻訳: タブバーのテキストとアイコンのレイアウトを設定する。デフォルトは `'icon-top'` です。 |
-| **Attribute** | `layout` |
-| **Type** | `"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `layout`                                                                                                                                                                                   |
+| **Type**        | `"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined`                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### rel
 
-### rel 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).<br /><br />自動翻訳: ターゲットオブジェクトとリンクオブジェクトの関係を指定する。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストである。 |
-| **Attribute** | `rel` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `rel`                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                    |
 
-### selected 
+### selected
 
-| | |
-| --- | --- |
+|                 |                                                                              |
+| --------------- | ---------------------------------------------------------------------------- |
 | **Description** | The selected tab component<br /><br />自動翻訳: 選択されたタブコンポーネント |
-| **Attribute** | `selected` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `selected`                                                                   |
+| **Type**        | `boolean`                                                                    |
+| **Default**     | `false`                                                                      |
 
-### tab 
+### tab
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.<br /><br />自動翻訳: 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。 |
-| **Attribute** | `tab` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### target 
-
-| | |
-| --- | --- |
-| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先のURLを表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
-| **Attribute** | `target` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `tab`                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                          |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                    |
+
+### target
+
+|                 |                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.<br /><br />自動翻訳: リンク先の URL を表示する場所を指定する。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. |
+| **Attribute**   | `target`                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/tab-button/slots.md b/static/auto-generated/tab-button/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/tab-button/slots.md
+++ b/static/auto-generated/tab-button/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/tab/custom-props.md b/static/auto-generated/tab/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/tab/custom-props.md
+++ b/static/auto-generated/tab/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/tab/events.md b/static/auto-generated/tab/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/tab/events.md
+++ b/static/auto-generated/tab/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/tab/methods.md b/static/auto-generated/tab/methods.md
index 94f13385a95..3ad8e9cb55a 100644
--- a/static/auto-generated/tab/methods.md
+++ b/static/auto-generated/tab/methods.md
@@ -1,10 +1,6 @@
-
-
 ### setActive
 
-| | |
-| --- | --- |
+|                 |                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------- |
 | **Description** | Set the active component for the tab<br /><br />自動翻訳: タブのアクティブコンポーネントを設定する |
-| **Signature** | `setActive() => Promise<void>` |
-
-
+| **Signature**   | `setActive() => Promise<void>`                                                                     |
diff --git a/static/auto-generated/tab/parts.md b/static/auto-generated/tab/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/tab/parts.md
+++ b/static/auto-generated/tab/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/tab/props.md b/static/auto-generated/tab/props.md
index 39dc78591a1..85173dc24d9 100644
--- a/static/auto-generated/tab/props.md
+++ b/static/auto-generated/tab/props.md
@@ -1,22 +1,17 @@
+### component
 
-
-### component 
-
-| | |
-| --- | --- |
+|                 |                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------- |
 | **Description** | The component to display inside of the tab.<br /><br />自動翻訳: タブの内側に表示するコンポーネントです。 |
-| **Attribute** | `component` |
-| **Type** | `Function ｜ HTMLElement ｜ null ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `component`                                                                                               |
+| **Type**        | `Function ｜ HTMLElement ｜ null ｜ string ｜ undefined`                                                  |
+| **Default**     | `undefined`                                                                                               |
 
+### tab
 
-### tab 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.<br /><br />自動翻訳: 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。 |
-| **Attribute** | `tab` |
-| **Type** | `string` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `tab`                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                    |
diff --git a/static/auto-generated/tab/slots.md b/static/auto-generated/tab/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/tab/slots.md
+++ b/static/auto-generated/tab/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/tabs/custom-props.md b/static/auto-generated/tabs/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/tabs/custom-props.md
+++ b/static/auto-generated/tabs/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/tabs/events.md b/static/auto-generated/tabs/events.md
index 4f38884e642..0c83322e342 100644
--- a/static/auto-generated/tabs/events.md
+++ b/static/auto-generated/tabs/events.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
-| `ionTabsDidChange` | Emitted when the navigation has finished transitioning to a new component.<br /><br />自動翻訳: ナビゲーションが新しいコンポーネントに遷移し終わったときに発せられる。 |
-| `ionTabsWillChange` | Emitted when the navigation is about to transition to a new component.<br /><br />自動翻訳: ナビゲーションが新しいコンポーネントに移行しようとするときに発せられる。 |
-
+| Name                | Description                                                                                                                                                            |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ionTabsDidChange`  | Emitted when the navigation has finished transitioning to a new component.<br /><br />自動翻訳: ナビゲーションが新しいコンポーネントに遷移し終わったときに発せられる。 |
+| `ionTabsWillChange` | Emitted when the navigation is about to transition to a new component.<br /><br />自動翻訳: ナビゲーションが新しいコンポーネントに移行しようとするときに発せられる。   |
diff --git a/static/auto-generated/tabs/methods.md b/static/auto-generated/tabs/methods.md
index 974addb2c69..52b5ad29721 100644
--- a/static/auto-generated/tabs/methods.md
+++ b/static/auto-generated/tabs/methods.md
@@ -1,26 +1,20 @@
-
-
 ### getSelected
 
-| | |
-| --- | --- |
+|                 |                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------- |
 | **Description** | Get the currently selected tab.<br /><br />自動翻訳: 現在選択されているタブを取得します。 |
-| **Signature** | `getSelected() => Promise<string ｜ undefined>` |
-
+| **Signature**   | `getSelected() => Promise<string ｜ undefined>`                                           |
 
 ### getTab
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                 |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Get a specific tab by the value of its `tab` property or an element reference.<br /><br />自動翻訳: タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得する。 |
-| **Signature** | `getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>` |
-
+| **Signature**   | `getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>`                                                                                           |
 
 ### select
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Select a tab by the value of its `tab` property or an element reference.<br /><br />自動翻訳: タブの `tab` プロパティの値、または要素の参照によってタブを選択する。 |
-| **Signature** | `select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>` |
-
-
+| **Signature**   | `select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>`                                                                                                      |
diff --git a/static/auto-generated/tabs/parts.md b/static/auto-generated/tabs/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/tabs/parts.md
+++ b/static/auto-generated/tabs/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/tabs/props.md b/static/auto-generated/tabs/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/tabs/props.md
+++ b/static/auto-generated/tabs/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/tabs/slots.md b/static/auto-generated/tabs/slots.md
index cf77fedeaee..7b7ada20e32 100644
--- a/static/auto-generated/tabs/slots.md
+++ b/static/auto-generated/tabs/slots.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
-| `bottom` | Content is placed at the bottom of the screen.<br /><br />自動翻訳: コンテンツは画面下部に配置されます。 |
-| `top` | Content is placed at the top of the screen.<br /><br />自動翻訳: コンテンツは画面上部に配置されます。 |
-
+| Name     | Description                                                                                                                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ``       | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
+| `bottom` | Content is placed at the bottom of the screen.<br /><br />自動翻訳: コンテンツは画面下部に配置されます。                                                                        |
+| `top`    | Content is placed at the top of the screen.<br /><br />自動翻訳: コンテンツは画面上部に配置されます。                                                                           |
diff --git a/static/auto-generated/text/custom-props.md b/static/auto-generated/text/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/text/custom-props.md
+++ b/static/auto-generated/text/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/text/events.md b/static/auto-generated/text/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/text/events.md
+++ b/static/auto-generated/text/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/text/methods.md b/static/auto-generated/text/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/text/methods.md
+++ b/static/auto-generated/text/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/text/parts.md b/static/auto-generated/text/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/text/parts.md
+++ b/static/auto-generated/text/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/text/props.md b/static/auto-generated/text/props.md
index 565c8944d7f..eb0c49ee657 100644
--- a/static/auto-generated/text/props.md
+++ b/static/auto-generated/text/props.md
@@ -1,22 +1,17 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/text/slots.md b/static/auto-generated/text/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/text/slots.md
+++ b/static/auto-generated/text/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/textarea/custom-props.md b/static/auto-generated/textarea/custom-props.md
index fe00e9343cd..92e48174b75 100644
--- a/static/auto-generated/textarea/custom-props.md
+++ b/static/auto-generated/textarea/custom-props.md
@@ -1,15 +1,13 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the textarea<br /><br />自動翻訳: textareaの背景 |
-| `--border-radius` | Border radius of the textarea<br /><br />自動翻訳: テキストエリアの境界半径 |
-| `--color` | Color of the text<br /><br />自動翻訳: 本文の色 |
-| `--padding-bottom` | Bottom padding of the textarea<br /><br />自動翻訳: テキストエリアの底面パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea<br /><br />自動翻訳: テキストエリアの方向が左から右の場合は右パディング、右から左の場合は左パディングを使用します。 |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea<br /><br />自動翻訳: textareaの方向が左から右の場合は左パディング、右から左の場合は右パディング。 |
-| `--padding-top` | Top padding of the textarea<br /><br />自動翻訳: textareaのトップパディング |
-| `--placeholder-color` | Color of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストの色 |
-| `--placeholder-font-style` | Style of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストのスタイル |
-| `--placeholder-font-weight` | Weight of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストの重さ |
-| `--placeholder-opacity` | Opacity of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストの不透明度 |
-
+| Name                        | Description                                                                                                                                                                                                                     |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`              | Background of the textarea<br /><br />自動翻訳: textarea の背景                                                                                                                                                                 |
+| `--border-radius`           | Border radius of the textarea<br /><br />自動翻訳: テキストエリアの境界半径                                                                                                                                                     |
+| `--color`                   | Color of the text<br /><br />自動翻訳: 本文の色                                                                                                                                                                                 |
+| `--padding-bottom`          | Bottom padding of the textarea<br /><br />自動翻訳: テキストエリアの底面パディング                                                                                                                                              |
+| `--padding-end`             | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea<br /><br />自動翻訳: テキストエリアの方向が左から右の場合は右パディング、右から左の場合は左パディングを使用します。 |
+| `--padding-start`           | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea<br /><br />自動翻訳: textarea の方向が左から右の場合は左パディング、右から左の場合は右パディング。                  |
+| `--padding-top`             | Top padding of the textarea<br /><br />自動翻訳: textarea のトップパディング                                                                                                                                                    |
+| `--placeholder-color`       | Color of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストの色                                                                                                                                                 |
+| `--placeholder-font-style`  | Style of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストのスタイル                                                                                                                                           |
+| `--placeholder-font-weight` | Weight of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストの重さ                                                                                                                                              |
+| `--placeholder-opacity`     | Opacity of the placeholder text<br /><br />自動翻訳: プレースホルダーテキストの不透明度                                                                                                                                         |
diff --git a/static/auto-generated/textarea/events.md b/static/auto-generated/textarea/events.md
index a8b486d8790..22ec91f9a7f 100644
--- a/static/auto-generated/textarea/events.md
+++ b/static/auto-generated/textarea/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the input loses focus.<br /><br />自動翻訳: 入力のフォーカスが外れたときに発せられる。 |
-| `ionChange` | Emitted when the input value has changed.<br /><br />自動翻訳: 入力値が変化したときに発せられる。 |
-| `ionFocus` | Emitted when the input has focus.<br /><br />自動翻訳: 入力にフォーカスが当たったときに発せられる。 |
-| `ionInput` | Emitted when a keyboard input occurred.<br /><br />自動翻訳: キーボード入力が発生したときに発する。 |
-
+| Name        | Description                                                                                         |
+| ----------- | --------------------------------------------------------------------------------------------------- |
+| `ionBlur`   | Emitted when the input loses focus.<br /><br />自動翻訳: 入力のフォーカスが外れたときに発せられる。 |
+| `ionChange` | Emitted when the input value has changed.<br /><br />自動翻訳: 入力値が変化したときに発せられる。   |
+| `ionFocus`  | Emitted when the input has focus.<br /><br />自動翻訳: 入力にフォーカスが当たったときに発せられる。 |
+| `ionInput`  | Emitted when a keyboard input occurred.<br /><br />自動翻訳: キーボード入力が発生したときに発する。 |
diff --git a/static/auto-generated/textarea/methods.md b/static/auto-generated/textarea/methods.md
index 4f09d37dd45..56f94fa32dd 100644
--- a/static/auto-generated/textarea/methods.md
+++ b/static/auto-generated/textarea/methods.md
@@ -1,18 +1,13 @@
-
-
 ### getInputElement
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns the native `<textarea>` element used under the hood.<br /><br />自動翻訳: フードの下で使用されるネイティブの `<textarea>` 要素を返します。 |
-| **Signature** | `getInputElement() => Promise<HTMLTextAreaElement>` |
-
+| **Signature**   | `getInputElement() => Promise<HTMLTextAreaElement>`                                                                                                |
 
 ### setFocus
 
-| | |
-| --- | --- |
-| **Description** | Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.<br /><br />自動翻訳: ion-textarea` のネイティブ `textarea` にフォーカスを設定する。グローバルな `textarea.focus()` の代わりに、このメソッドを使用する。 |
-| **Signature** | `setFocus() => Promise<void>` |
-
-
+|                 |                                                                                                                                                                                                                                                                      |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.<br /><br />自動翻訳: ion-textarea`のネイティブ`textarea`にフォーカスを設定する。グローバルな`textarea.focus()` の代わりに、このメソッドを使用する。 |
+| **Signature**   | `setFocus() => Promise<void>`                                                                                                                                                                                                                                        |
diff --git a/static/auto-generated/textarea/parts.md b/static/auto-generated/textarea/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/textarea/parts.md
+++ b/static/auto-generated/textarea/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/textarea/props.md b/static/auto-generated/textarea/props.md
index f8ac4569d2c..8271af87281 100644
--- a/static/auto-generated/textarea/props.md
+++ b/static/auto-generated/textarea/props.md
@@ -1,231 +1,188 @@
+### autoGrow
 
+|                 |                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If `true`, the textarea container will grow and shrink based on the contents of the textarea.<br /><br />自動翻訳: `true`の場合、textarea コンテナは textarea の内容に応じて拡大・縮小する。 |
+| **Attribute**   | `auto-grow`                                                                                                                                                                                  |
+| **Type**        | `boolean`                                                                                                                                                                                    |
+| **Default**     | `false`                                                                                                                                                                                      |
 
-### autoGrow 
+### autocapitalize
 
-| | |
-| --- | --- |
-| **Description** | If `true`, the textarea container will grow and shrink based on the contents of the textarea.<br /><br />自動翻訳: `true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小する。 |
-| **Attribute** | `auto-grow` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.<br /><br />自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. |
+| **Attribute**   | `autocapitalize`                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `'none'`                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 
+### autofocus
 
-
-### autocapitalize 
-
-| | |
-| --- | --- |
-| **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.<br /><br />自動翻訳: テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. |
-| **Attribute** | `autocapitalize` |
-| **Type** | `string` |
-| **Default** | `'none'` |
-
-
-
-### autofocus 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                   |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | This Boolean attribute lets you specify that a form control should have input focus when the page loads.<br /><br />自動翻訳: この Boolean 属性により、ページロード時にフォームコントロールに入力フォーカスが当たるように指定することができます。 |
-| **Attribute** | `autofocus` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `autofocus`                                                                                                                                                                                                                                       |
+| **Type**        | `boolean`                                                                                                                                                                                                                                         |
+| **Default**     | `false`                                                                                                                                                                                                                                           |
 
+### clearOnEdit
 
-
-### clearOnEdit 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.<br /><br />自動翻訳: `true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `"password"` のとき `true` で、それ以外のときは `false` です。 |
-| **Attribute** | `clear-on-edit` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `clear-on-edit`                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                         |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### cols
 
-### cols 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.<br /><br />自動翻訳: テキストコントロールの可視幅を、平均文字幅で指定する。指定する場合は、正の整数である必要があります。 |
-| **Attribute** | `cols` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `cols`                                                                                                                                                                                                                                           |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                            |
+| **Default**     | `undefined`                                                                                                                                                                                                                                      |
 
-### debounce 
+### debounce
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.<br /><br />自動翻訳: キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。 |
-| **Attribute** | `debounce` |
-| **Type** | `number` |
-| **Default** | `0` |
+| **Attribute**   | `debounce`                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `0`                                                                                                                                                                                                                                                                                                                                                            |
 
+### disabled
 
-
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the user cannot interact with the textarea.<br /><br />自動翻訳: `true`の場合、ユーザはテキストエリアと対話することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                                 |
+| **Type**        | `boolean`                                                                                                                                  |
+| **Default**     | `false`                                                                                                                                    |
 
+### enterkeyhint
 
-### enterkeyhint 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.<br /><br />自動翻訳: どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. |
-| **Attribute** | `enterkeyhint` |
-| **Type** | `"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `enterkeyhint`                                                                                                                                                                                                                                                                                                          |
+| **Type**        | `"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined`                                                                                                                                                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                             |
 
-### inputmode 
+### inputmode
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.<br /><br />自動翻訳: どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. |
-| **Attribute** | `inputmode` |
-| **Type** | `"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `inputmode`                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                  |
 
-### maxlength 
+### maxlength
 
-| | |
-| --- | --- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.<br /><br />自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。 |
-| **Attribute** | `maxlength` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
+|                 |                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.<br /><br />自動翻訳: type 属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。 |
+| **Attribute**   | `maxlength`                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                     |
 
+### minlength
 
+|                 |                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.<br /><br />自動翻訳: type 属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。 |
+| **Attribute**   | `minlength`                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number ｜ undefined`                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                     |
 
-### minlength 
+### mode
 
-| | |
-| --- | --- |
-| **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.<br /><br />自動翻訳: type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。 |
-| **Attribute** | `minlength` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
-### name 
+### name
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
 
+### placeholder
 
-
-### placeholder 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Instructional text that shows before the input has a value.<br /><br />自動翻訳: 入力が値を持つ前に表示される指示文。 |
-| **Attribute** | `placeholder` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `placeholder`                                                                                                         |
+| **Type**        | `string ｜ undefined`                                                                                                 |
+| **Default**     | `undefined`                                                                                                           |
 
+### readonly
 
-### readonly 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                        |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot modify the value.<br /><br />自動翻訳: `true`の場合、ユーザーは値を変更することができない。 |
-| **Attribute** | `readonly` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `readonly`                                                                                                             |
+| **Type**        | `boolean`                                                                                                              |
+| **Default**     | `false`                                                                                                                |
 
+### required
 
-### required 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the user must fill in a value before submitting a form.<br /><br />自動翻訳: `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。 |
-| **Attribute** | `required` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
-
+| **Attribute**   | `required`                                                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                                                          |
+| **Default**     | `false`                                                                                                                                                            |
 
-### rows 
+### rows
 
-| | |
-| --- | --- |
+|                 |                                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------- |
 | **Description** | The number of visible text lines for the control.<br /><br />自動翻訳: コントロールの可視テキスト行数。 |
-| **Attribute** | `rows` |
-| **Type** | `number ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `rows`                                                                                                  |
+| **Type**        | `number ｜ undefined`                                                                                   |
+| **Default**     | `undefined`                                                                                             |
 
-### spellcheck 
+### spellcheck
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the element will have its spelling and grammar checked.<br /><br />自動翻訳: `true`の場合、その要素のスペルチェックと文法チェックが行われる。 |
-| **Attribute** | `spellcheck` |
-| **Type** | `boolean` |
-| **Default** | `false` |
+| **Attribute**   | `spellcheck`                                                                                                                                             |
+| **Type**        | `boolean`                                                                                                                                                |
+| **Default**     | `false`                                                                                                                                                  |
 
+### value
 
+|                 |                                                                     |
+| --------------- | ------------------------------------------------------------------- |
+| **Description** | The value of the textarea.<br /><br />自動翻訳: textarea の値です。 |
+| **Attribute**   | `value`                                                             |
+| **Type**        | `null ｜ string ｜ undefined`                                       |
+| **Default**     | `''`                                                                |
 
-### value 
+### wrap
 
-| | |
-| --- | --- |
-| **Description** | The value of the textarea.<br /><br />自動翻訳: textareaの値です。 |
-| **Attribute** | `value` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `''` |
-
-
-
-### wrap 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                 |
+| --------------- | --------------------------------------------------------------------------------------------------------------- |
 | **Description** | Indicates how the control wraps text.<br /><br />自動翻訳: コントロールがテキストをどのように折り返すかを示す。 |
-| **Attribute** | `wrap` |
-| **Type** | `"hard" ｜ "off" ｜ "soft" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `wrap`                                                                                                          |
+| **Type**        | `"hard" ｜ "off" ｜ "soft" ｜ undefined`                                                                        |
+| **Default**     | `undefined`                                                                                                     |
diff --git a/static/auto-generated/textarea/slots.md b/static/auto-generated/textarea/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/textarea/slots.md
+++ b/static/auto-generated/textarea/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/thumbnail/custom-props.md b/static/auto-generated/thumbnail/custom-props.md
index 3f605bc881e..d13ec339a1f 100644
--- a/static/auto-generated/thumbnail/custom-props.md
+++ b/static/auto-generated/thumbnail/custom-props.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
+| Name              | Description                                                                  |
+| ----------------- | ---------------------------------------------------------------------------- |
 | `--border-radius` | Border radius of the thumbnail<br /><br />自動翻訳: サムネイルのボーダー半径 |
-| `--size` | Size of the thumbnail<br /><br />自動翻訳: サムネイルの大きさ |
-
+| `--size`          | Size of the thumbnail<br /><br />自動翻訳: サムネイルの大きさ                |
diff --git a/static/auto-generated/thumbnail/events.md b/static/auto-generated/thumbnail/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/thumbnail/events.md
+++ b/static/auto-generated/thumbnail/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/thumbnail/methods.md b/static/auto-generated/thumbnail/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/thumbnail/methods.md
+++ b/static/auto-generated/thumbnail/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/thumbnail/parts.md b/static/auto-generated/thumbnail/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/thumbnail/parts.md
+++ b/static/auto-generated/thumbnail/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/thumbnail/props.md b/static/auto-generated/thumbnail/props.md
index 29427a80106..da15cf52d5a 100644
--- a/static/auto-generated/thumbnail/props.md
+++ b/static/auto-generated/thumbnail/props.md
@@ -1 +1 @@
-No properties available for this component.
\ No newline at end of file
+No properties available for this component.
diff --git a/static/auto-generated/thumbnail/slots.md b/static/auto-generated/thumbnail/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/thumbnail/slots.md
+++ b/static/auto-generated/thumbnail/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/title/custom-props.md b/static/auto-generated/title/custom-props.md
index d35a73e78d2..74a71edf02f 100644
--- a/static/auto-generated/title/custom-props.md
+++ b/static/auto-generated/title/custom-props.md
@@ -1,5 +1,3 @@
-
-| Name | Description |
-| --- | --- |
+| Name      | Description                                                   |
+| --------- | ------------------------------------------------------------- |
 | `--color` | Text color of the title<br /><br />自動翻訳: タイトルの文字色 |
-
diff --git a/static/auto-generated/title/events.md b/static/auto-generated/title/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/title/events.md
+++ b/static/auto-generated/title/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/title/methods.md b/static/auto-generated/title/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/title/methods.md
+++ b/static/auto-generated/title/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/title/parts.md b/static/auto-generated/title/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/title/parts.md
+++ b/static/auto-generated/title/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/title/props.md b/static/auto-generated/title/props.md
index 97eb82c8aa4..602c1815dc8 100644
--- a/static/auto-generated/title/props.md
+++ b/static/auto-generated/title/props.md
@@ -1,22 +1,17 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### size
 
-### size 
-
-| | |
-| --- | --- |
+|                 |                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------- |
 | **Description** | The size of the toolbar title.<br /><br />自動翻訳: ツールバーのタイトルの大きさを指定します。 |
-| **Attribute** | `size` |
-| **Type** | `"large" ｜ "small" ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `size`                                                                                         |
+| **Type**        | `"large" ｜ "small" ｜ undefined`                                                              |
+| **Default**     | `undefined`                                                                                    |
diff --git a/static/auto-generated/title/slots.md b/static/auto-generated/title/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/title/slots.md
+++ b/static/auto-generated/title/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/toast/custom-props.md b/static/auto-generated/toast/custom-props.md
index 8afdc7c4632..47f2f0ab28f 100644
--- a/static/auto-generated/toast/custom-props.md
+++ b/static/auto-generated/toast/custom-props.md
@@ -1,21 +1,19 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the toast<br /><br />自動翻訳: 乾杯の背景 |
-| `--border-color` | Border color of the toast<br /><br />自動翻訳: トーストのボーダーカラー |
-| `--border-radius` | Border radius of the toast<br /><br />自動翻訳: トーストのボーダー半径 |
-| `--border-style` | Border style of the toast<br /><br />自動翻訳: トーストのボーダースタイル |
-| `--border-width` | Border width of the toast<br /><br />自動翻訳: トーストのボーダー幅 |
-| `--box-shadow` | Box shadow of the toast<br /><br />自動翻訳: 乾杯の箱影 |
-| `--button-color` | Color of the button text<br /><br />自動翻訳: ボタンテキストの色 |
-| `--color` | Color of the toast text<br /><br />自動翻訳: トーストの文字色 |
-| `--end` | Position from the right if direction is left-to-right, and from the left if direction is right-to-left<br /><br />自動翻訳: 方向が左から右の場合は右から、方向が右から左の場合は左から位置すること |
-| `--height` | Height of the toast<br /><br />自動翻訳: トーストの高さ |
-| `--max-height` | Maximum height of the toast<br /><br />自動翻訳: トーストの最大高さ |
-| `--max-width` | Maximum width of the toast<br /><br />自動翻訳: トーストの最大幅 |
-| `--min-height` | Minimum height of the toast<br /><br />自動翻訳: トーストの最低高さ |
-| `--min-width` | Minimum width of the toast<br /><br />自動翻訳: トーストの最小幅 |
-| `--start` | Position from the left if direction is left-to-right, and from the right if direction is right-to-left<br /><br />自動翻訳: 方向が左から右の場合は左から、方向が右から左の場合は右から位置すること |
-| `--white-space` | White space of the toast message<br /><br />自動翻訳: 乾杯メッセージのホワイトスペース |
-| `--width` | Width of the toast<br /><br />自動翻訳: トーストの幅 |
-
+| Name              | Description                                                                                                                                                                                        |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`    | Background of the toast<br /><br />自動翻訳: 乾杯の背景                                                                                                                                            |
+| `--border-color`  | Border color of the toast<br /><br />自動翻訳: トーストのボーダーカラー                                                                                                                            |
+| `--border-radius` | Border radius of the toast<br /><br />自動翻訳: トーストのボーダー半径                                                                                                                             |
+| `--border-style`  | Border style of the toast<br /><br />自動翻訳: トーストのボーダースタイル                                                                                                                          |
+| `--border-width`  | Border width of the toast<br /><br />自動翻訳: トーストのボーダー幅                                                                                                                                |
+| `--box-shadow`    | Box shadow of the toast<br /><br />自動翻訳: 乾杯の箱影                                                                                                                                            |
+| `--button-color`  | Color of the button text<br /><br />自動翻訳: ボタンテキストの色                                                                                                                                   |
+| `--color`         | Color of the toast text<br /><br />自動翻訳: トーストの文字色                                                                                                                                      |
+| `--end`           | Position from the right if direction is left-to-right, and from the left if direction is right-to-left<br /><br />自動翻訳: 方向が左から右の場合は右から、方向が右から左の場合は左から位置すること |
+| `--height`        | Height of the toast<br /><br />自動翻訳: トーストの高さ                                                                                                                                            |
+| `--max-height`    | Maximum height of the toast<br /><br />自動翻訳: トーストの最大高さ                                                                                                                                |
+| `--max-width`     | Maximum width of the toast<br /><br />自動翻訳: トーストの最大幅                                                                                                                                   |
+| `--min-height`    | Minimum height of the toast<br /><br />自動翻訳: トーストの最低高さ                                                                                                                                |
+| `--min-width`     | Minimum width of the toast<br /><br />自動翻訳: トーストの最小幅                                                                                                                                   |
+| `--start`         | Position from the left if direction is left-to-right, and from the right if direction is right-to-left<br /><br />自動翻訳: 方向が左から右の場合は左から、方向が右から左の場合は右から位置すること |
+| `--white-space`   | White space of the toast message<br /><br />自動翻訳: 乾杯メッセージのホワイトスペース                                                                                                             |
+| `--width`         | Width of the toast<br /><br />自動翻訳: トーストの幅                                                                                                                                               |
diff --git a/static/auto-generated/toast/events.md b/static/auto-generated/toast/events.md
index a7894e2ee25..9c14e291b54 100644
--- a/static/auto-generated/toast/events.md
+++ b/static/auto-generated/toast/events.md
@@ -1,8 +1,6 @@
-
-| Name | Description |
-| --- | --- |
-| `ionToastDidDismiss` | Emitted after the toast has dismissed.<br /><br />自動翻訳: トーストが解散した後に発せられる。 |
-| `ionToastDidPresent` | Emitted after the toast has presented.<br /><br />自動翻訳: トーストが提示された後に発する。 |
-| `ionToastWillDismiss` | Emitted before the toast has dismissed.<br /><br />自動翻訳: 乾杯が解散する前に発する。 |
+| Name                  | Description                                                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------- |
+| `ionToastDidDismiss`  | Emitted after the toast has dismissed.<br /><br />自動翻訳: トーストが解散した後に発せられる。    |
+| `ionToastDidPresent`  | Emitted after the toast has presented.<br /><br />自動翻訳: トーストが提示された後に発する。      |
+| `ionToastWillDismiss` | Emitted before the toast has dismissed.<br /><br />自動翻訳: 乾杯が解散する前に発する。           |
 | `ionToastWillPresent` | Emitted before the toast has presented.<br /><br />自動翻訳: トーストが提示される前に発せられる。 |
-
diff --git a/static/auto-generated/toast/methods.md b/static/auto-generated/toast/methods.md
index 0b16e6db209..e4947763fda 100644
--- a/static/auto-generated/toast/methods.md
+++ b/static/auto-generated/toast/methods.md
@@ -1,34 +1,27 @@
-
-
 ### dismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Dismiss the toast overlay after it has been presented.<br /><br />自動翻訳: トーストのオーバーレイが提示された後、それを解除する。 |
-| **Signature** | `dismiss(data?: any, role?: string) => Promise<boolean>` |
-
+| **Signature**   | `dismiss(data?: any, role?: string) => Promise<boolean>`                                                                           |
 
 ### onDidDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the toast did dismiss.<br /><br />自動翻訳: トーストが解散したことを解決するプロミスを返します。 |
-| **Signature** | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                           |
 
 ### onWillDismiss
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns a promise that resolves when the toast will dismiss.<br /><br />自動翻訳: トーストが解散するタイミングを解決するプロミスを返します。 |
-| **Signature** | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>` |
-
+| **Signature**   | `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`                                                                                 |
 
 ### present
 
-| | |
-| --- | --- |
+|                 |                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | Present the toast overlay after it has been created.<br /><br />自動翻訳: トーストのオーバーレイを作成した後に提示する。 |
-| **Signature** | `present() => Promise<void>` |
-
-
+| **Signature**   | `present() => Promise<void>`                                                                                             |
diff --git a/static/auto-generated/toast/parts.md b/static/auto-generated/toast/parts.md
index 1cc809efe45..8ea4ee35b19 100644
--- a/static/auto-generated/toast/parts.md
+++ b/static/auto-generated/toast/parts.md
@@ -1,9 +1,7 @@
-
-| Name | Description |
-| --- | --- |
-| `button` | Any button element that is displayed inside of the toast.<br /><br />自動翻訳: トーストの内側に表示される任意のボタン要素。 |
-| `container` | The element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包む要素。 |
-| `header` | The header text of the toast.<br /><br />自動翻訳: 乾杯のヘッダーテキストです。 |
-| `icon` | The icon that appears next to the toast content.<br /><br />自動翻訳: トーストの内容の横に表示されるアイコンです。 |
-| `message` | The body text of the toast.<br /><br />自動翻訳: 乾杯の音頭の本文です。 |
-
+| Name        | Description                                                                                                                 |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `button`    | Any button element that is displayed inside of the toast.<br /><br />自動翻訳: トーストの内側に表示される任意のボタン要素。 |
+| `container` | The element that wraps all child elements.<br /><br />自動翻訳: すべての子要素を包む要素。                                  |
+| `header`    | The header text of the toast.<br /><br />自動翻訳: 乾杯のヘッダーテキストです。                                             |
+| `icon`      | The icon that appears next to the toast content.<br /><br />自動翻訳: トーストの内容の横に表示されるアイコンです。          |
+| `message`   | The body text of the toast.<br /><br />自動翻訳: 乾杯の音頭の本文です。                                                     |
diff --git a/static/auto-generated/toast/props.md b/static/auto-generated/toast/props.md
index 4031a7cdcbe..b3bc59650df 100644
--- a/static/auto-generated/toast/props.md
+++ b/static/auto-generated/toast/props.md
@@ -1,176 +1,143 @@
+### animated
 
-
-### animated 
-
-| | |
-| --- | --- |
+|                 |                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the toast will animate.<br /><br />自動翻訳: `true`の場合、トーストはアニメーションします。 |
-| **Attribute** | `animated` |
-| **Type** | `boolean` |
-| **Default** | `true` |
-
+| **Attribute**   | `animated`                                                                                             |
+| **Type**        | `boolean`                                                                                              |
+| **Default**     | `true`                                                                                                 |
 
+### buttons
 
-### buttons 
-
-| | |
-| --- | --- |
+|                 |                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------ |
 | **Description** | An array of buttons for the toast.<br /><br />自動翻訳: トースト用のボタンがずらり。 |
-| **Attribute** | `undefined` |
-| **Type** | `(string ｜ ToastButton)[] ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                          |
+| **Type**        | `(string ｜ ToastButton)[] ｜ undefined`                                             |
+| **Default**     | `undefined`                                                                          |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### cssClass 
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-| | |
-| --- | --- |
-| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
-| **Attribute** | `css-class` |
-| **Type** | `string ｜ string[] ｜ undefined` |
-| **Default** | `undefined` |
+### cssClass
 
+|                 |                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.<br /><br />自動翻訳: カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
+| **Attribute**   | `css-class`                                                                                                                                                                                                                               |
+| **Type**        | `string ｜ string[] ｜ undefined`                                                                                                                                                                                                         |
+| **Default**     | `undefined`                                                                                                                                                                                                                               |
 
+### duration
 
-### duration 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.<br /><br />自動翻訳: トーストを隠すまでに何ミリ秒待つかを指定します。デフォルトでは、`dismiss()`が呼ばれるまで表示されます。 |
-| **Attribute** | `duration` |
-| **Type** | `number` |
-| **Default** | `config.getNumber('toastDuration', 0)` |
-
+| **Attribute**   | `duration`                                                                                                                                                                                                                                |
+| **Type**        | `number`                                                                                                                                                                                                                                  |
+| **Default**     | `config.getNumber('toastDuration', 0)`                                                                                                                                                                                                    |
 
+### enterAnimation
 
-### enterAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the toast is presented.<br /><br />自動翻訳: 乾杯の音頭をとるときに使うアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                       |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                           |
+| **Default**     | `undefined`                                                                                                       |
 
+### header
 
-### header 
-
-| | |
-| --- | --- |
+|                 |                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------ |
 | **Description** | Header to be shown in the toast.<br /><br />自動翻訳: トーストに表示されるヘッダー。 |
-| **Attribute** | `header` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `header`                                                                             |
+| **Type**        | `string ｜ undefined`                                                                |
+| **Default**     | `undefined`                                                                          |
 
+### htmlAttributes
 
-### htmlAttributes 
-
-| | |
-| --- | --- |
+|                 |                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------- |
 | **Description** | Additional attributes to pass to the toast.<br /><br />自動翻訳: トーストに渡す追加の属性。 |
-| **Attribute** | `undefined` |
-| **Type** | `undefined ｜ { [key: string]: any; }` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                 |
+| **Type**        | `undefined ｜ { [key: string]: any; }`                                                      |
+| **Default**     | `undefined`                                                                                 |
 
+### icon
 
-### icon 
+|                 |                                                                                                                                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons<br /><br />自動翻訳: 表示するアイコンの名前、または有効な SVG ファイルへのパスを指定する。ion-icon`を参照。https://ionic.io/ionicons |
+| **Attribute**   | `icon`                                                                                                                                                                                                                                           |
+| **Type**        | `string ｜ undefined`                                                                                                                                                                                                                            |
+| **Default**     | `undefined`                                                                                                                                                                                                                                      |
 
-| | |
-| --- | --- |
-| **Description** | The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons<br /><br />自動翻訳: 表示するアイコンの名前、または有効なSVGファイルへのパスを指定する。ion-icon`を参照。https://ionic.io/ionicons |
-| **Attribute** | `icon` |
-| **Type** | `string ｜ undefined` |
-| **Default** | `undefined` |
+### keyboardClose
 
-
-
-### keyboardClose 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented.<br /><br />自動翻訳: `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
-| **Attribute** | `keyboard-close` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `keyboard-close`                                                                                                                                                                           |
+| **Type**        | `boolean`                                                                                                                                                                                  |
+| **Default**     | `false`                                                                                                                                                                                    |
 
+### layout
 
-### layout 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.<br /><br />自動翻訳: トーストのメッセージやボタンの配置を定義します。'baseline'を指定します。メッセージとボタンは同じ行に表示されます。メッセージテキストはメッセージコンテナ内で折り返すことができます。'stacked':ボタンコンテナとメッセージが重なるように表示されます。ボタンに長いテキストがある場合に使用します。 |
-| **Attribute** | `layout` |
-| **Type** | `"baseline" ｜ "stacked"` |
-| **Default** | `'baseline'` |
-
+| **Attribute**   | `layout`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Type**        | `"baseline" ｜ "stacked"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Default**     | `'baseline'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
+### leaveAnimation
 
-### leaveAnimation 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------- |
 | **Description** | Animation to use when the toast is dismissed.<br /><br />自動翻訳: トーストの解散時に使用するアニメーションです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((baseEl: any, opts?: any) => Animation) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                       |
+| **Type**        | `((baseEl: any, opts?: any) => Animation) ｜ undefined`                                                           |
+| **Default**     | `undefined`                                                                                                       |
 
+### message
 
-### message 
-
-| | |
-| --- | --- |
+|                 |                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------- |
 | **Description** | Message to be shown in the toast.<br /><br />自動翻訳: 乾杯の際に表示するメッセージ |
-| **Attribute** | `message` |
-| **Type** | `IonicSafeString ｜ string ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `message`                                                                           |
+| **Type**        | `IonicSafeString ｜ string ｜ undefined`                                            |
+| **Default**     | `undefined`                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### position
 
-### position 
-
-| | |
-| --- | --- |
+|                 |                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------ |
 | **Description** | The position of the toast on the screen.<br /><br />自動翻訳: 画面上のトーストの位置です。 |
-| **Attribute** | `position` |
-| **Type** | `"bottom" ｜ "middle" ｜ "top"` |
-| **Default** | `'bottom'` |
-
+| **Attribute**   | `position`                                                                                 |
+| **Type**        | `"bottom" ｜ "middle" ｜ "top"`                                                            |
+| **Default**     | `'bottom'`                                                                                 |
 
+### translucent
 
-### translucent 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).<br /><br />自動翻訳: `true`の場合、トーストは半透明になります。モードが `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 |
-| **Attribute** | `translucent` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `translucent`                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Default**     | `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
diff --git a/static/auto-generated/toast/slots.md b/static/auto-generated/toast/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/toast/slots.md
+++ b/static/auto-generated/toast/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/toggle/custom-props.md b/static/auto-generated/toggle/custom-props.md
index 6581584b276..95f79272c6a 100644
--- a/static/auto-generated/toggle/custom-props.md
+++ b/static/auto-generated/toggle/custom-props.md
@@ -1,16 +1,14 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the toggle<br /><br />自動翻訳: トグルの背景 |
-| `--background-checked` | Background of the toggle when checked<br /><br />自動翻訳: チェックしたときのトグルの背景 |
-| `--border-radius` | Border radius of the toggle track<br /><br />自動翻訳: トグルトラックのボーダー半径 |
-| `--handle-background` | Background of the toggle handle<br /><br />自動翻訳: トグルハンドルの背景 |
+| Name                          | Description                                                                                              |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `--background`                | Background of the toggle<br /><br />自動翻訳: トグルの背景                                               |
+| `--background-checked`        | Background of the toggle when checked<br /><br />自動翻訳: チェックしたときのトグルの背景                |
+| `--border-radius`             | Border radius of the toggle track<br /><br />自動翻訳: トグルトラックのボーダー半径                      |
+| `--handle-background`         | Background of the toggle handle<br /><br />自動翻訳: トグルハンドルの背景                                |
 | `--handle-background-checked` | Background of the toggle handle when checked<br /><br />自動翻訳: チェックしたときのトグルハンドルの背景 |
-| `--handle-border-radius` | Border radius of the toggle handle<br /><br />自動翻訳: トグルハンドルのボーダー半径 |
-| `--handle-box-shadow` | Box shadow of the toggle handle<br /><br />自動翻訳: トグルハンドルのボックスシャドウ |
-| `--handle-height` | Height of the toggle handle<br /><br />自動翻訳: トグルハンドルの高さ |
-| `--handle-max-height` | Maximum height of the toggle handle<br /><br />自動翻訳: トグルハンドルの最大高さ |
-| `--handle-spacing` | Horizontal spacing around the toggle handle<br /><br />自動翻訳: トグルハンドル周辺の横方向の間隔 |
-| `--handle-transition` | Transition of the toggle handle<br /><br />自動翻訳: トグルハンドルの変遷 |
-| `--handle-width` | Width of the toggle handle<br /><br />自動翻訳: トグルハンドルの幅 |
-
+| `--handle-border-radius`      | Border radius of the toggle handle<br /><br />自動翻訳: トグルハンドルのボーダー半径                     |
+| `--handle-box-shadow`         | Box shadow of the toggle handle<br /><br />自動翻訳: トグルハンドルのボックスシャドウ                    |
+| `--handle-height`             | Height of the toggle handle<br /><br />自動翻訳: トグルハンドルの高さ                                    |
+| `--handle-max-height`         | Maximum height of the toggle handle<br /><br />自動翻訳: トグルハンドルの最大高さ                        |
+| `--handle-spacing`            | Horizontal spacing around the toggle handle<br /><br />自動翻訳: トグルハンドル周辺の横方向の間隔        |
+| `--handle-transition`         | Transition of the toggle handle<br /><br />自動翻訳: トグルハンドルの変遷                                |
+| `--handle-width`              | Width of the toggle handle<br /><br />自動翻訳: トグルハンドルの幅                                       |
diff --git a/static/auto-generated/toggle/events.md b/static/auto-generated/toggle/events.md
index 2edeefb3da0..c5cf1218ef5 100644
--- a/static/auto-generated/toggle/events.md
+++ b/static/auto-generated/toggle/events.md
@@ -1,7 +1,5 @@
-
-| Name | Description |
-| --- | --- |
-| `ionBlur` | Emitted when the toggle loses focus.<br /><br />自動翻訳: トグルのフォーカスが外れたときに発せられる。 |
-| `ionChange` | Emitted when the value property has changed.<br /><br />自動翻訳: valueプロパティが変更されたときに発行される。 |
-| `ionFocus` | Emitted when the toggle has focus.<br /><br />自動翻訳: トグルにフォーカスが当たったときに発せられる。 |
-
+| Name        | Description                                                                                                      |
+| ----------- | ---------------------------------------------------------------------------------------------------------------- |
+| `ionBlur`   | Emitted when the toggle loses focus.<br /><br />自動翻訳: トグルのフォーカスが外れたときに発せられる。           |
+| `ionChange` | Emitted when the value property has changed.<br /><br />自動翻訳: value プロパティが変更されたときに発行される。 |
+| `ionFocus`  | Emitted when the toggle has focus.<br /><br />自動翻訳: トグルにフォーカスが当たったときに発せられる。           |
diff --git a/static/auto-generated/toggle/methods.md b/static/auto-generated/toggle/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/toggle/methods.md
+++ b/static/auto-generated/toggle/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/toggle/parts.md b/static/auto-generated/toggle/parts.md
index bbfd21a6866..deee5d761cd 100644
--- a/static/auto-generated/toggle/parts.md
+++ b/static/auto-generated/toggle/parts.md
@@ -1,6 +1,4 @@
-
-| Name | Description |
-| --- | --- |
+| Name     | Description                                                                                                                                               |
+| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `handle` | The toggle handle, or knob, used to change the checked state.<br /><br />自動翻訳: チェックした状態を変更するために使用するトグルハンドル（つまみ）です。 |
-| `track` | The background track of the toggle.<br /><br />自動翻訳: トグルの背景トラックです。 |
-
+| `track`  | The background track of the toggle.<br /><br />自動翻訳: トグルの背景トラックです。                                                                       |
diff --git a/static/auto-generated/toggle/props.md b/static/auto-generated/toggle/props.md
index fa97eb51222..16443c9b787 100644
--- a/static/auto-generated/toggle/props.md
+++ b/static/auto-generated/toggle/props.md
@@ -1,77 +1,62 @@
+### checked
 
-
-### checked 
-
-| | |
-| --- | --- |
+|                 |                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the toggle is selected.<br /><br />自動翻訳: `true`の場合、トグルが選択されます。 |
-| **Attribute** | `checked` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `checked`                                                                                    |
+| **Type**        | `boolean`                                                                                    |
+| **Default**     | `false`                                                                                      |
 
+### color
 
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### disabled
 
-### disabled 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | If `true`, the user cannot interact with the toggle.<br /><br />自動翻訳: `true`の場合、ユーザーはトグルを操作することができない。 |
-| **Attribute** | `disabled` |
-| **Type** | `boolean` |
-| **Default** | `false` |
-
+| **Attribute**   | `disabled`                                                                                                                         |
+| **Type**        | `boolean`                                                                                                                          |
+| **Default**     | `false`                                                                                                                            |
 
+### enableOnOffLabels
 
-### enableOnOffLabels 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Enables the on/off accessibility switch labels within the toggle.<br /><br />自動翻訳: トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。 |
-| **Attribute** | `enable-on-off-labels` |
-| **Type** | `boolean ｜ undefined` |
-| **Default** | `config.get('toggleOnOffLabels')` |
-
+| **Attribute**   | `enable-on-off-labels`                                                                                                                                    |
+| **Type**        | `boolean ｜ undefined`                                                                                                                                    |
+| **Default**     | `config.get('toggleOnOffLabels')`                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
 
+### name
 
-### name 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The name of the control, which is submitted with the form data.<br /><br />自動翻訳: フォームデータとともに送信されるコントロールの名前。 |
-| **Attribute** | `name` |
-| **Type** | `string` |
-| **Default** | `this.inputId` |
-
-
-
-### value 
-
-| | |
-| --- | --- |
-| **Description** | The value of the toggle does not mean if it's checked or not, use the `checked` property for that.<br /><br />The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.<br /><br />自動翻訳: トグルの値は、チェックされているかどうかを意味するものではありません。  トグルの値は `<input type="checkbox">` の値に類似しており、トグルがネイティブの `<form>` に参加する場合にのみ使用されます。 |
-| **Attribute** | `value` |
-| **Type** | `null ｜ string ｜ undefined` |
-| **Default** | `'on'` |
-
+| **Attribute**   | `name`                                                                                                                                    |
+| **Type**        | `string`                                                                                                                                  |
+| **Default**     | `this.inputId`                                                                                                                            |
+
+### value
+
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The value of the toggle does not mean if it's checked or not, use the `checked` property for that.<br /><br />The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.<br /><br />自動翻訳: トグルの値は、チェックされているかどうかを意味するものではありません。 トグルの値は `<input type="checkbox">` の値に類似しており、トグルがネイティブの `<form>` に参加する場合にのみ使用されます。 |
+| **Attribute**   | `value`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Type**        | `null ｜ string ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Default**     | `'on'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
diff --git a/static/auto-generated/toggle/slots.md b/static/auto-generated/toggle/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/toggle/slots.md
+++ b/static/auto-generated/toggle/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/static/auto-generated/toolbar/custom-props.md b/static/auto-generated/toolbar/custom-props.md
index 866dbc02fcb..4571327a66a 100644
--- a/static/auto-generated/toolbar/custom-props.md
+++ b/static/auto-generated/toolbar/custom-props.md
@@ -1,15 +1,13 @@
-
-| Name | Description |
-| --- | --- |
-| `--background` | Background of the toolbar<br /><br />自動翻訳: ツールバーの背景 |
-| `--border-color` | Color of the toolbar border<br /><br />自動翻訳: ツールバーの枠の色 |
-| `--border-style` | Style of the toolbar border<br /><br />自動翻訳: ツールバーのボーダーのスタイル |
-| `--border-width` | Width of the toolbar border<br /><br />自動翻訳: ツールバーの枠の幅 |
-| `--color` | Color of the toolbar text<br /><br />自動翻訳: ツールバーテキストの色 |
-| `--min-height` | Minimum height of the toolbar<br /><br />自動翻訳: ツールバーの最小高さ |
-| `--opacity` | Opacity of the toolbar background<br /><br />自動翻訳: ツールバーの背景の不透明度 |
-| `--padding-bottom` | Bottom padding of the toolbar<br /><br />自動翻訳: ツールバーの下パディング |
-| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar<br /><br />自動翻訳: ツールバーの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。 |
-| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar<br /><br />自動翻訳: ツールバーの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。 |
-| `--padding-top` | Top padding of the toolbar<br /><br />自動翻訳: ツールバーの上部パディング |
-
+| Name               | Description                                                                                                                                                                                                                |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--background`     | Background of the toolbar<br /><br />自動翻訳: ツールバーの背景                                                                                                                                                            |
+| `--border-color`   | Color of the toolbar border<br /><br />自動翻訳: ツールバーの枠の色                                                                                                                                                        |
+| `--border-style`   | Style of the toolbar border<br /><br />自動翻訳: ツールバーのボーダーのスタイル                                                                                                                                            |
+| `--border-width`   | Width of the toolbar border<br /><br />自動翻訳: ツールバーの枠の幅                                                                                                                                                        |
+| `--color`          | Color of the toolbar text<br /><br />自動翻訳: ツールバーテキストの色                                                                                                                                                      |
+| `--min-height`     | Minimum height of the toolbar<br /><br />自動翻訳: ツールバーの最小高さ                                                                                                                                                    |
+| `--opacity`        | Opacity of the toolbar background<br /><br />自動翻訳: ツールバーの背景の不透明度                                                                                                                                          |
+| `--padding-bottom` | Bottom padding of the toolbar<br /><br />自動翻訳: ツールバーの下パディング                                                                                                                                                |
+| `--padding-end`    | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar<br /><br />自動翻訳: ツールバーの向きが左から右の場合は右パディング、右から左の場合は左パディングを使用します。 |
+| `--padding-start`  | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar<br /><br />自動翻訳: ツールバーの方向が左から右の場合は左パディング、右から左の場合は右パディングを使用します。 |
+| `--padding-top`    | Top padding of the toolbar<br /><br />自動翻訳: ツールバーの上部パディング                                                                                                                                                 |
diff --git a/static/auto-generated/toolbar/events.md b/static/auto-generated/toolbar/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/toolbar/events.md
+++ b/static/auto-generated/toolbar/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/toolbar/methods.md b/static/auto-generated/toolbar/methods.md
index caeb316d4fe..2d65165f34a 100644
--- a/static/auto-generated/toolbar/methods.md
+++ b/static/auto-generated/toolbar/methods.md
@@ -1 +1 @@
-No public methods available for this component.
\ No newline at end of file
+No public methods available for this component.
diff --git a/static/auto-generated/toolbar/parts.md b/static/auto-generated/toolbar/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/toolbar/parts.md
+++ b/static/auto-generated/toolbar/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/toolbar/props.md b/static/auto-generated/toolbar/props.md
index 565c8944d7f..eb0c49ee657 100644
--- a/static/auto-generated/toolbar/props.md
+++ b/static/auto-generated/toolbar/props.md
@@ -1,22 +1,17 @@
+### color
 
-
-### color 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).<br /><br />自動翻訳: アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。一次色"`、二次色"`、三次色"`、成功色"`、警告色"`、危険色"`、明色"`、中色"`、暗色"`です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 |
-| **Attribute** | `color` |
-| **Type** | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Type**        | `"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### mode
 
-### mode 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                           |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The mode determines which platform styles to use.<br /><br />自動翻訳: モードは、どのプラットフォームのスタイルを使用するかを決定します。 |
-| **Attribute** | `mode` |
-| **Type** | `"ios" ｜ "md"` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `mode`                                                                                                                                    |
+| **Type**        | `"ios" ｜ "md"`                                                                                                                           |
+| **Default**     | `undefined`                                                                                                                               |
diff --git a/static/auto-generated/toolbar/slots.md b/static/auto-generated/toolbar/slots.md
index 2641097e5d5..34f66dee37a 100644
--- a/static/auto-generated/toolbar/slots.md
+++ b/static/auto-generated/toolbar/slots.md
@@ -1,9 +1,7 @@
-
-| Name | Description |
-| --- | --- |
-| `` | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。 |
-| `end` | Content is placed to the right of the toolbar text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。 |
-| `primary` | Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.<br /><br />自動翻訳: コンテンツは、`ios`モードではツールバーテキストの右側に、`md`モードでは右端に配置されます。 |
+| Name        | Description                                                                                                                                                                                                                   |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ``          | Content is placed between the named slots if provided without a slot.<br /><br />自動翻訳: スロットがない状態で提供される場合、コンテンツは名前付きスロットの間に配置されます。                                               |
+| `end`       | Content is placed to the right of the toolbar text in LTR, and to the left in RTL.<br /><br />自動翻訳: コンテンツは、LTR ではツールバーテキストの右側に、RTL では左側に配置されます。                                        |
+| `primary`   | Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.<br /><br />自動翻訳: コンテンツは、`ios`モードではツールバーテキストの右側に、`md`モードでは右端に配置されます。         |
 | `secondary` | Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.<br /><br />自動翻訳: コンテンツは、`ios`モードではツールバーテキストの左側に、`md`モードでは右側に直接配置されます。 |
-| `start` | Content is placed to the left of the toolbar text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。 |
-
+| `start`     | Content is placed to the left of the toolbar text in LTR, and to the right in RTL.<br /><br />自動翻訳: コンテンツは、LTR ではツールバーテキストの左側に、RTL では右側に配置されます。                                        |
diff --git a/static/auto-generated/virtual-scroll/custom-props.md b/static/auto-generated/virtual-scroll/custom-props.md
index 28a30260511..0b57a183548 100644
--- a/static/auto-generated/virtual-scroll/custom-props.md
+++ b/static/auto-generated/virtual-scroll/custom-props.md
@@ -1 +1 @@
-No CSS custom properties available for this component.
\ No newline at end of file
+No CSS custom properties available for this component.
diff --git a/static/auto-generated/virtual-scroll/events.md b/static/auto-generated/virtual-scroll/events.md
index 75b6f089611..ba929789da2 100644
--- a/static/auto-generated/virtual-scroll/events.md
+++ b/static/auto-generated/virtual-scroll/events.md
@@ -1 +1 @@
-No events available for this component.
\ No newline at end of file
+No events available for this component.
diff --git a/static/auto-generated/virtual-scroll/methods.md b/static/auto-generated/virtual-scroll/methods.md
index 4e52a25c19f..61b8727b921 100644
--- a/static/auto-generated/virtual-scroll/methods.md
+++ b/static/auto-generated/virtual-scroll/methods.md
@@ -1,26 +1,20 @@
-
-
 ### checkEnd
 
-| | |
-| --- | --- |
-| **Description** | This method marks the tail the items array as dirty, so they can be re-rendered.<br /><br />It's equivalent to calling:<br /><br />```js virtualScroll.checkRange(lastItemLen); ```<br /><br />自動翻訳: このメソッドは、アイテム配列の末尾をダーティとしてマークし、再レンダリングできるようにします。  これは次のように呼び出すのと同じです： ``js virtualScroll.checkRange(lastItemLen); ```。 |
-| **Signature** | `checkEnd() => Promise<void>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | This method marks the tail the items array as dirty, so they can be re-rendered.<br /><br />It's equivalent to calling:<br /><br />`js virtualScroll.checkRange(lastItemLen); `<br /><br />自動翻訳: このメソッドは、アイテム配列の末尾をダーティとしてマークし、再レンダリングできるようにします。 これは次のように呼び出すのと同じです： ``js virtualScroll.checkRange(lastItemLen); ```。 |
+| **Signature**   | `checkEnd() => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                |
 
 ### checkRange
 
-| | |
-| --- | --- |
-| **Description** | This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.<br /><br />The subset of items to be updated can are specifying by an offset and a length.<br /><br />自動翻訳: このメソッドは、アイテムのサブセットをダーティとしてマークし、再レンダリングができるようにします。アイテムは、コンテンツまたはそのスタイルが変更されるたびに、ダーティとしてマークされる必要があります。  更新されるアイテムのサブセットは、オフセットと長さで指定することができます。 |
-| **Signature** | `checkRange(offset: number, len?: number) => Promise<void>` |
-
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.<br /><br />The subset of items to be updated can are specifying by an offset and a length.<br /><br />自動翻訳: このメソッドは、アイテムのサブセットをダーティとしてマークし、再レンダリングができるようにします。アイテムは、コンテンツまたはそのスタイルが変更されるたびに、ダーティとしてマークされる必要があります。 更新されるアイテムのサブセットは、オフセットと長さで指定することができます。 |
+| **Signature**   | `checkRange(offset: number, len?: number) => Promise<void>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
 ### positionForItem
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Returns the position of the virtual item at the given index.<br /><br />自動翻訳: 指定されたインデックスの位置にある仮想アイテムの位置を返します。 |
-| **Signature** | `positionForItem(index: number) => Promise<number>` |
-
-
+| **Signature**   | `positionForItem(index: number) => Promise<number>`                                                                                                |
diff --git a/static/auto-generated/virtual-scroll/parts.md b/static/auto-generated/virtual-scroll/parts.md
index 5b6707d219b..1987138c492 100644
--- a/static/auto-generated/virtual-scroll/parts.md
+++ b/static/auto-generated/virtual-scroll/parts.md
@@ -1 +1 @@
-No CSS shadow parts available for this component.
\ No newline at end of file
+No CSS shadow parts available for this component.
diff --git a/static/auto-generated/virtual-scroll/props.md b/static/auto-generated/virtual-scroll/props.md
index 6bd4a2b6f39..1d88296bd7d 100644
--- a/static/auto-generated/virtual-scroll/props.md
+++ b/static/auto-generated/virtual-scroll/props.md
@@ -1,143 +1,116 @@
+### approxFooterHeight
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.<br /><br />自動翻訳: 各フッターテンプレートのセルのおおよその幅を指定します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。 |
+| **Attribute**   | `approx-footer-height`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Default**     | `30`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
-### approxFooterHeight 
+### approxHeaderHeight
 
-| | |
-| --- | --- |
-| **Description** | The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.<br /><br />自動翻訳: 各フッターテンプレートのセルのおおよその幅を指定します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。 |
-| **Attribute** | `approx-footer-height` |
-| **Type** | `number` |
-| **Default** | `30` |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.<br /><br />自動翻訳: 各ヘッダーテンプレートのセルのおおよその高さを表します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。 |
+| **Attribute**   | `approx-header-height`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Default**     | `30`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
+### approxItemHeight
 
-
-### approxHeaderHeight 
-
-| | |
-| --- | --- |
-| **Description** | The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.<br /><br />自動翻訳: 各ヘッダーテンプレートのセルのおおよその高さを表します。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリのCSSから得られますが、この近似値はアイテムがレンダリングされる前に初期寸法を計算するために使用されることに注意してください。 |
-| **Attribute** | `approx-header-height` |
-| **Type** | `number` |
-| **Default** | `30` |
-
-
-
-### approxItemHeight 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.<br /><br />自動翻訳: 仮想アイテムの高さがデフォルトよりかなり大きくなる場合は、これを指定することが重要です。 各仮想アイテムテンプレートのセルのおおよその高さ。この寸法は、初期化時に作成されるべきセルの数を決定したり、スクロール可能な領域の高さを計算したりするのに使用されます。この高さの値には `px` 単位しか使用できません。各セルの実際のレンダリングサイズはアプリの CSS から得られるもので、この近似値はアイテムがレンダリングされる前に初期寸法を計算するのに役立つものであることに注意してください。 |
-| **Attribute** | `approx-item-height` |
-| **Type** | `number` |
-| **Default** | `45` |
-
+| **Attribute**   | `approx-item-height`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **Default**     | `45`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 
+### footerFn
 
-### footerFn 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created.<br /><br />自動翻訳: セクションフッターと与えられたテンプレート内で使用されるデータは、`footerFn`に関数を渡すことで動的に作成することができます。フッター関数内のロジックは、フッターテンプレートを使用するかどうか、またフッターテンプレートにどのようなデータを与えるかを決定することができます。フッターセルが作成されない場合は、関数は `null` を返さなければならない。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number, items: any[]) => string ｜ null ｜ undefined) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **Type**        | `((item: any, index: number, items: any[]) => string ｜ null ｜ undefined) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### footerHeight
 
-### footerHeight 
-
-| | |
-| --- | --- |
+|                 |                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | An optional function that maps each item footer within their height.<br /><br />自動翻訳: 各項目のフッターをその高さ内にマッピングするオプション関数。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number) => number) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                            |
+| **Type**        | `((item: any, index: number) => number) ｜ undefined`                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                            |
 
-### headerFn 
+### headerFn
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created.<br /><br />自動翻訳: セクションヘッダーとそのテンプレート内で使用されるデータは、`headerFn`に関数を渡すことによって動的に作成することができます。例えば、大きな連絡先リストでは、通常、アルファベットの各文字の間に仕切りがあります。アプリは独自のカスタム `headerFn` を提供することができ、データセット内の各レコードで呼び出される。ヘッダー関数内のロジックは、ヘッダーテンプレートを使用するかどうか、またヘッダーテンプレートにどのようなデータを与えるかを決定することができる。ヘッダーセルが作成されない場合は、この関数は `null` を返さなければならない。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number, items: any[]) => string ｜ null ｜ undefined) ｜ undefined` |
-| **Default** | `undefined` |
-
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Type**        | `((item: any, index: number, items: any[]) => string ｜ null ｜ undefined) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
-### headerHeight 
+### headerHeight
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Description** | An optional function that maps each item header within their height.<br /><br />自動翻訳: 各項目のヘッダを高さの範囲内でマッピングするオプション関数。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number) => number) ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### itemHeight 
-
-| | |
-| --- | --- |
-| **Description** | An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements.<br /><br />This function allows to skip all DOM reads, which can be Doing so leads to massive performance<br /><br />自動翻訳: 各アイテムをその高さ内にマッピングするオプションの関数です。この関数が提供されると、`ion-virtual-scroll`によって重い最適化と高速パスが取られるようになり、大幅な性能向上が期待できる。  この関数は、DOMの読み込みをすべてスキップすることができ、Doingすることで大幅なパフォーマンスの向上につながります。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number) => number) ｜ undefined` |
-| **Default** | `undefined` |
+| **Attribute**   | `undefined`                                                                                                                                            |
+| **Type**        | `((item: any, index: number) => number) ｜ undefined`                                                                                                  |
+| **Default**     | `undefined`                                                                                                                                            |
 
+### itemHeight
 
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements.<br /><br />This function allows to skip all DOM reads, which can be Doing so leads to massive performance<br /><br />自動翻訳: 各アイテムをその高さ内にマッピングするオプションの関数です。この関数が提供されると、`ion-virtual-scroll`によって重い最適化と高速パスが取られるようになり、大幅な性能向上が期待できる。 この関数は、DOM の読み込みをすべてスキップすることができ、Doing することで大幅なパフォーマンスの向上につながります。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Type**        | `((item: any, index: number) => number) ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
-### items 
+### items
 
-| | |
-| --- | --- |
+|                 |                                                                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Description** | The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible.<br /><br />自動翻訳: 仮想スクロール内のテンプレートを構築するためのデータです。このデータが変更された場合、仮想スクロール全体がリセットされることになります。 |
-| **Attribute** | `undefined` |
-| **Type** | `any[] ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### nodeRender 
-
-| | |
-| --- | --- |
-| **Description** | NOTE: only Vanilla JS API.<br /><br />自動翻訳: 注：Vanilla JS APIのみです。 |
-| **Attribute** | `undefined` |
-| **Type** | `((el: HTMLElement ｜ null, cell: Cell, domIndex: number) => HTMLElement) ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### renderFooter 
-
-| | |
-| --- | --- |
-| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the footer to be rendered. Returns a JSX virtual-dom.<br /><br />自動翻訳: 注：ステンシル用のJSX APIのみ。  フッターをレンダリングするためのrender関数を提供する。JSXのvirtual-domを返す。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number) => any) ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### renderHeader 
-
-| | |
-| --- | --- |
-| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the header to be rendered. Returns a JSX virtual-dom.<br /><br />自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングされるヘッダーのrender関数を提供する。JSXのvirtual-domを返す。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number) => any) ｜ undefined` |
-| **Default** | `undefined` |
-
-
-
-### renderItem 
-
-| | |
-| --- | --- |
-| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the items to be rendered. Returns a JSX virtual-dom.<br /><br />自動翻訳: 注：ステンシル用のJSX APIのみ。  レンダリングするアイテムのレンダー関数を用意する。JSXのvirtual-domを返す。 |
-| **Attribute** | `undefined` |
-| **Type** | `((item: any, index: number) => any) ｜ undefined` |
-| **Default** | `undefined` |
-
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type**        | `any[] ｜ undefined`                                                                                                                                                                                                                                                                                                                                                                            |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                                                                                                                                                     |
+
+### nodeRender
+
+|                 |                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------- |
+| **Description** | NOTE: only Vanilla JS API.<br /><br />自動翻訳: 注：Vanilla JS API のみです。           |
+| **Attribute**   | `undefined`                                                                             |
+| **Type**        | `((el: HTMLElement ｜ null, cell: Cell, domIndex: number) => HTMLElement) ｜ undefined` |
+| **Default**     | `undefined`                                                                             |
+
+### renderFooter
+
+|                 |                                                                                                                                                                                                                                                                           |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the footer to be rendered. Returns a JSX virtual-dom.<br /><br />自動翻訳: 注：ステンシル用の JSX API のみ。 フッターをレンダリングするための render 関数を提供する。JSX の virtual-dom を返す。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                               |
+| **Type**        | `((item: any, index: number) => any) ｜ undefined`                                                                                                                                                                                                                        |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                               |
+
+### renderHeader
+
+|                 |                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the header to be rendered. Returns a JSX virtual-dom.<br /><br />自動翻訳: 注：ステンシル用の JSX API のみ。 レンダリングされるヘッダーの render 関数を提供する。JSX の virtual-dom を返す。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                           |
+| **Type**        | `((item: any, index: number) => any) ｜ undefined`                                                                                                                                                                                                                    |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                           |
+
+### renderItem
+
+|                 |                                                                                                                                                                                                                                                                    |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Description** | NOTE: only JSX API for stencil.<br /><br />Provide a render function for the items to be rendered. Returns a JSX virtual-dom.<br /><br />自動翻訳: 注：ステンシル用の JSX API のみ。 レンダリングするアイテムのレンダー関数を用意する。JSX の virtual-dom を返す。 |
+| **Attribute**   | `undefined`                                                                                                                                                                                                                                                        |
+| **Type**        | `((item: any, index: number) => any) ｜ undefined`                                                                                                                                                                                                                 |
+| **Default**     | `undefined`                                                                                                                                                                                                                                                        |
diff --git a/static/auto-generated/virtual-scroll/slots.md b/static/auto-generated/virtual-scroll/slots.md
index 87b8771c6ce..aa63991c7db 100644
--- a/static/auto-generated/virtual-scroll/slots.md
+++ b/static/auto-generated/virtual-scroll/slots.md
@@ -1 +1 @@
-No slots available for this component.
\ No newline at end of file
+No slots available for this component.
diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.md
index b0a2ee5848f..a6a35f4833f 100644
--- a/versioned_docs/version-v6/api/slide.md
+++ b/versioned_docs/version-v6/api/slide.md
@@ -45,7 +45,7 @@ See the [Slides API Docs](./slides) for more usage information.
 
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 <CustomProps />
 
diff --git a/versioned_docs/version-v6/api/slides.md b/versioned_docs/version-v6/api/slides.md
index 0ad2db7bcfa..5d279d4e976 100644
--- a/versioned_docs/version-v6/api/slides.md
+++ b/versioned_docs/version-v6/api/slides.md
@@ -34,12 +34,12 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 This component has been deprecated in favor of using Swiper.js directly. Please see the [migration guide](#migration) below.
 :::
 
-Slidesコンポーネントは複数セクションのコンテナです。
+Slides コンポーネントは複数セクションのコンテナです。
 各セクション間をスワイプまたはドラッグできます。これには任意の数の[Slide](slide.md)コンポーネントが含まれます。
 
-このガイドでは、廃止予定の `ion-slides` コンポーネントから、Swiper.jsが提供するフレームワーク固有のソリューションへの移行、および、まだそのコンポーネントを使用している開発者向けの既存の `ion-slides` API について説明します。
+このガイドでは、廃止予定の `ion-slides` コンポーネントから、Swiper.js が提供するフレームワーク固有のソリューションへの移行、および、まだそのコンポーネントを使用している開発者向けの既存の `ion-slides` API について説明します。
 
-Swiper.jsを採用しています:
+Swiper.js を採用しています:
 ハードウェアアクセラレートされたトランジションを備えた最新のモバイルタッチスライダとフレームワークです。
 
 http://www.idangero.us/swiper/
@@ -52,22 +52,22 @@ Licensed under MIT
 
 ## 移行
 
-Ionic Framework v6のリリースに伴い、Ionicチームは `ion-slides` と `ion-slide` コンポーネントを非推奨とし、Swiperが提供する公式フレームワーク統合を使用することを決定しました。心配はご無用です。Ionicチームは `ion-slides` と `ion-slide` コンポーネントを廃止しましたが、Swiperを使用しているため、slidesコンポーネントの機能は全く変わりません。
+Ionic Framework v6 のリリースに伴い、Ionic チームは `ion-slides` と `ion-slide` コンポーネントを非推奨とし、Swiper が提供する公式フレームワーク統合を使用することを決定しました。心配はご無用です。Ionic チームは `ion-slides` と `ion-slide` コンポーネントを廃止しましたが、Swiper を使用しているため、slides コンポーネントの機能は全く変わりません。
 
-### Swiper.jsとは？
+### Swiper.js とは？
 
-Swiper.jsは `ion-slides` を駆動するカルーセル/スライダーライブラリです。このライブラリは、Ionic Frameworkのすべてのバージョンに自動的にバンドルされています。Ionic Framework v4.がリリースされた当初、Swiperにはフレームワーク固有のライブラリ統合機能がなかったため、SwiperのコアライブラリとAngular、React、Vueなどのフレームワークのギャップを埋める手段として `ion-slides` が作成されました。
+Swiper.js は `ion-slides` を駆動するカルーセル/スライダーライブラリです。このライブラリは、Ionic Framework のすべてのバージョンに自動的にバンドルされています。Ionic Framework v4.がリリースされた当初、Swiper にはフレームワーク固有のライブラリ統合機能がなかったため、Swiper のコアライブラリと Angular、React、Vue などのフレームワークのギャップを埋める手段として `ion-slides` が作成されました。
 
-それ以来、Swiperチームは、Angular、React、Vueなどのフレームワークに特化したSwiper.jsの統合をリリースしています。
+それ以来、Swiper チームは、Angular、React、Vue などのフレームワークに特化した Swiper.js の統合をリリースしています。
 
 ### この変更の利点は何ですか？
 
-Ionic Frameworkコミュニティのメンバーにとって、いくつかの利点があります。公式のSwiper.jsフレームワーク統合を使用することで、。
+Ionic Framework コミュニティのメンバーにとって、いくつかの利点があります。公式の Swiper.js フレームワーク統合を使用することで、。
 
-- 開発者は、使用したいSwiper.jsのバージョンを正確にコントロールできるようになりました。これまで開発者は、Ionicチームが内部でバージョンを更新し、Ionic Frameworkの新バージョンをリリースすることに依存する必要がありました。
-- Ionicチームは、スライド以外の問題のトリアージと修正により多くの時間を費やし、開発プロセスをスピードアップして、コミュニティのためにフレームワークをより良く機能させることができます。
+- 開発者は、使用したい Swiper.js のバージョンを正確にコントロールできるようになりました。これまで開発者は、Ionic チームが内部でバージョンを更新し、Ionic Framework の新バージョンをリリースすることに依存する必要がありました。
+- Ionic チームは、スライド以外の問題のトリアージと修正により多くの時間を費やし、開発プロセスをスピードアップして、コミュニティのためにフレームワークをより良く機能させることができます。
 - 開発者はより少ないバグを経験することができます。
-- アプリケーションのバンドルサイズを縮小できる場合があります。Swiper.jsをサードパーティの依存関係としてアプリケーションにインストールすることで、WebpackやRollupなどのバンドルは、コードをよりよくトレースすることができるようになるはずです。
+- アプリケーションのバンドルサイズを縮小できる場合があります。Swiper.js をサードパーティの依存関係としてアプリケーションにインストールすることで、Webpack や Rollup などのバンドルは、コードをよりよくトレースすることができるようになるはずです。
 - 開発者は、`ion-slides`を使用する場合、以前はなかった新しい機能にアクセスすることができます。
 
 ### いつまでに移行しなければならないのですか？
@@ -90,7 +90,7 @@ Ionic Framework v7 で `ion-slides` と `ion-slide` を削除する予定です
 
 ## カスタムアニメーション
 
-デフォルトでは、Ionicのスライドはビルトインの `slide` アニメーションエフェクトを使用します。カスタムのアニメーションは `options` プロパティで指定できます。その他のアニメーションの例は以下をご参照ください。
+デフォルトでは、Ionic のスライドはビルトインの `slide` アニメーションエフェクトを使用します。カスタムのアニメーションは `options` プロパティで指定できます。その他のアニメーションの例は以下をご参照ください。
 
 ### Coverflow
 
@@ -766,7 +766,7 @@ ion-slides {
 
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 <CustomProps />
 
diff --git a/versioned_docs/version-v6/api/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.md
index 07e511a1eb2..2fb6aad0c4d 100644
--- a/versioned_docs/version-v6/api/virtual-scroll.md
+++ b/versioned_docs/version-v6/api/virtual-scroll.md
@@ -30,19 +30,19 @@ consist of items, headers, and footers. For performance reasons, not every recor
 in the list is rendered at once; instead a small subset of records (enough to fill the viewport)
 are rendered and reused as the user scrolls.
 
-このガイドでは、各フレームワークの統合に推奨される仮想スクロールパッケージと、Ionic Angularの非推奨コンポーネントである `ion-virtual-scroll` のドキュメントについて説明します。フレームワーク固有のソリューションの利用をお勧めしますが、まだそのコンポーネントを使用している開発者のために `ion-virtual-scroll` のドキュメントを以下に掲載します。
+このガイドでは、各フレームワークの統合に推奨される仮想スクロールパッケージと、Ionic Angular の非推奨コンポーネントである `ion-virtual-scroll` のドキュメントについて説明します。フレームワーク固有のソリューションの利用をお勧めしますが、まだそのコンポーネントを使用している開発者のために `ion-virtual-scroll` のドキュメントを以下に掲載します。
 
 ## Angular
 
-Ionic Angularの仮想スクロールのオプションについては、[Angular仮想スクロールガイド](../angular/virtual-scroll.md)を参照してください。
+Ionic Angular の仮想スクロールのオプションについては、[Angular 仮想スクロールガイド](../angular/virtual-scroll.md)を参照してください。
 
 ## React
 
-Ionic Reactでの仮想スクロールのオプションについては、[React仮想スクロールガイド](../react/virtual-scroll.md)を参照してください。
+Ionic React での仮想スクロールのオプションについては、[React 仮想スクロールガイド](../react/virtual-scroll.md)を参照してください。
 
 ## Vue
 
-Ionic Vueでの仮想スクロールのオプションについては、[Vue仮想スクロールガイド](../vue/virtual-scroll.md)を参照してください。
+Ionic Vue での仮想スクロールのオプションについては、[Vue 仮想スクロールガイド](../vue/virtual-scroll.md)を参照してください。
 
 ---
 
@@ -281,7 +281,7 @@ within a `<div>` is a safe way to make sure dimensions are measured correctly.
 
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 <CustomProps />
 
diff --git a/versioned_docs/version-v6/developing/config.md b/versioned_docs/version-v6/developing/config.md
index 53634608080..29716fc052d 100644
--- a/versioned_docs/version-v6/developing/config.md
+++ b/versioned_docs/version-v6/developing/config.md
@@ -16,15 +16,15 @@ import GlobalExample from './config/global/index.md';
 
 ## コンポーネント単位のコンフィグ
 
-Ionic Configはリアクティブではありません。コンポーネントがレンダリングされた後にコンフィグの値を更新すると、以前の値が適用されます。リアクティブな値が必要な場合は、configを更新するのではなく、コンポーネントのプロパティを使用することが推奨されます。
+Ionic Config はリアクティブではありません。コンポーネントがレンダリングされた後にコンフィグの値を更新すると、以前の値が適用されます。リアクティブな値が必要な場合は、config を更新するのではなく、コンポーネントのプロパティを使用することが推奨されます。
 
 import PerComponentExample from './config/per-component/index.md';
 
 <PerComponentExample />
 
-## プラットフォームごとの設定Per-Platform Config
+## プラットフォームごとの設定 Per-Platform Config
 
-Ionic Configは、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができる。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
+Ionic Config は、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができる。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
 
@@ -101,9 +101,9 @@ class AppComponent {
 
 ## Interfaces
 
-### Configオプション
+### Config オプション
 
-以下はIonicが使用する設定オプションのリストです。
+以下は Ionic が使用する設定オプションのリストです。
 
 | Config                      | Type                                                                              | Description                                                                                                                                                                                                                                                                                |
 | --------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
diff --git a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
index 9e34a0a17c2..07f8b1a68eb 100644
--- a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
+++ b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md
@@ -1,19 +1,19 @@
-# Ionic 6へのアップデート
+# Ionic 6 へのアップデート
 
-あなたのIonic5でつくったアプリをIonic6にアップデートする方法を案内します。
+あなたの Ionic5 でつくったアプリを Ionic6 にアップデートする方法を案内します。
 
 ## はじめ方
 
 ### Angular
 
-1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンのAngularに更新します。.
-2. Ionic6の最新バージョンに更新します。
+1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンの Angular に更新します。.
+2. Ionic6 の最新バージョンに更新します。
 
 ```shell
 npm install @ionic/angular@6
 ```
 
-Ionic Angular Serverを使用している場合は、それも必ず更新してください:
+Ionic Angular Server を使用している場合は、それも必ず更新してください:
 
 ```shell
 npm install @ionic/angular@6 @ionic/angular-server@6
@@ -24,7 +24,7 @@ npm install @ionic/angular@6 @ionic/angular-server@6
 
 ### React
 
-1. Ionic 6 は React 17+ をサポートしています。Reactの最新バージョンに更新します:
+1. Ionic 6 は React 17+ をサポートしています。React の最新バージョンに更新します:
 
 ```shell
 npm install react@latest react-dom@latest
@@ -93,25 +93,25 @@ import { menuController } from '@ionic/core/components';
 
 ### Vue
 
-1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vueの最新バージョンに更新ください。
+1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vue の最新バージョンに更新ください。
 
 ```shell
 npm install vue@3 vue-router@4
 ```
 
-2. Vue CLIを使用するアプリの場合は、Vue CLI 5をインストールします。
+2. Vue CLI を使用するアプリの場合は、Vue CLI 5 をインストールします。
 
 ```shell
 npm install -g @vue/cli@next
 ```
 
-次に、すべてのVue CLIプラグインをアップグレードします。
+次に、すべての Vue CLI プラグインをアップグレードします。
 
 ```shell
 vue upgrade --next
 ```
 
-3. Ionic 6の最新バージョンに更新します。
+3. Ionic 6 の最新バージョンに更新します。
 
 ```shell
 npm install @ionic/vue@6 @ionic/vue-router@6
@@ -308,7 +308,7 @@ npm install @ionic/core@6
 
 2. `text` と `placeholder` の CSS シャドウパーツの使用をすべて削除します。
 
-3. CSS変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSSプロパティのいずれかを使用することができます。
+3. CSS 変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSS プロパティのいずれかを使用することができます。
 
 4. `open` メソッドの使用はすべて削除します。datetime をオーバーレイで表示するには、 `ion-modal` または `ion-popover` コンポーネントの中に配置する。詳細は、[ion-datetime Usage Examples](../api/datetime#usage) を参照してください。
 
@@ -320,7 +320,7 @@ npm install @ionic/core@6
 
 ### Icon
 
-Ionic 6には、Ionicons 6が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
+Ionic 6 には、Ionicons 6 が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
 
 ### Input
 
@@ -404,7 +404,7 @@ ion-popover::part(content) {
 
 ### ブラウザサポート
 
-Ionicがサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
+Ionic がサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
 
 If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
 
@@ -416,14 +416,13 @@ Safari >=13
 iOS >=13
 ```
 
-
 ### テスト
 
-Ionic 6は、ESモジュールとして出荷されるようになりました。ESモジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jestでテストする開発者は、Jest 27の時点でJestがES Modulesを完全にサポートしていないため、Jestの設定を更新する必要があります。
+Ionic 6 は、ES モジュールとして出荷されるようになりました。ES モジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jest でテストする開発者は、Jest 27 の時点で Jest が ES Modules を完全にサポートしていないため、Jest の設定を更新する必要があります。
 
-このアップデートでは、Babelを使用してIonicのESモジュールをJestが理解できるCommonJS (CJS) 形式にコンパイルする必要があります。JestがESモジュールをサポートするようになれば、この変更は必要なくなります。JestのESモジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
+このアップデートでは、Babel を使用して Ionic の ES モジュールを Jest が理解できる CommonJS (CJS) 形式にコンパイルする必要があります。Jest が ES モジュールをサポートするようになれば、この変更は必要なくなります。Jest の ES モジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
 
-新しいIonicアプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存のIonicアプリをお持ちの方は、以下の手順でJestをIonic 6で動作させることができます。
+新しい Ionic アプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存の Ionic アプリをお持ちの方は、以下の手順で Jest を Ionic 6 で動作させることができます。
 
 1. Jest の設定に、関連する Ionic パッケージを含む `transformIgnorePatterns` フィールドを追加します。これは通常 `jest.config.js` または `package.json` の `jest` フィールドに含まれています。
 
@@ -444,10 +443,10 @@ module.exports = {
 ```
 
 :::note
-Ionic ReactまたはIonic Vueを使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic Reactの場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vueの場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
+Ionic React または Ionic Vue を使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic React の場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vue の場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
 :::
 
-Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これはCRAの制限であり、Ionicがコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
+Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これは CRA の制限であり、Ionic がコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
 
 ```json title="package.json"
 "scripts": {
@@ -464,6 +463,6 @@ Create React App (CRA) を使用している開発者にとっては、現在の
 
 ## アップグレートへの助けが必要？
 
-[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティとCSS変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。 
+[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティと CSS 変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
 
 アップグレードに助けが必要な場合、 [Ionic Forum](https://forum.ionicframework.com/) にスレッドを立ててください。
diff --git a/versioned_docs/version-v6/studio.md b/versioned_docs/version-v6/studio.md
index f8b675a5a83..53770bef9f7 100644
--- a/versioned_docs/version-v6/studio.md
+++ b/versioned_docs/version-v6/studio.md
@@ -5,16 +5,16 @@ hide_table_of_contents: true
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-# Studioへようこそ
+# Studio へようこそ
 
-Ionic Studioは、最小限のコーディングでアプリを構築し、プロトタイプを作成できるようにする、高速で簡単なアプリビルダーです。
+Ionic Studio は、最小限のコーディングでアプリを構築し、プロトタイプを作成できるようにする、高速で簡単なアプリビルダーです。
 
-Studioは、開発者のワークフローを置き換えるのではなく、既存のワークフローに統合するように設計されており、開発者やアーキテクトはお気に入りのツールを使って視覚的に構築したり、コードに落とし込んだりすることが可能です。
+Studio は、開発者のワークフローを置き換えるのではなく、既存のワークフローに統合するように設計されており、開発者やアーキテクトはお気に入りのツールを使って視覚的に構築したり、コードに落とし込んだりすることが可能です。
 
 Studio
 は、コードをツールに戻すことを完全にサポートしています。これは、アプリ開発ツール市場では事実上前例のないことです。
 
-Studioはデスクトップツールであり、サブスクリプションが必要で、Ionic Angular 4.x+プロジェクトのみが対象です。開始するには、下記からサインアップしてください。
+Studio はデスクトップツールであり、サブスクリプションが必要で、Ionic Angular 4.x+プロジェクトのみが対象です。開始するには、下記からサインアップしてください。
 
 <DocsCards class="static-width">
   <DocsCard header="Studioをはじめる" href="https://ionicframework.com/studio?utm_source=docs&utm_medium=website&utm_campaign=studio%20launch" icon="/icons/guide-installation-icon.png">

From d6a3256a5a0cf8477083a84ff89b90d70178589c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Wed, 19 Jul 2023 21:43:18 +0900
Subject: [PATCH 438/469] fix(ci): fix lint and diff

---
 docs/intro/first-app.md    | 1 -
 docs/intro/next.md         | 1 -
 docs/reference/glossary.md | 6 +++---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs/intro/first-app.md b/docs/intro/first-app.md
index f39f660cd26..bbccf176835 100644
--- a/docs/intro/first-app.md
+++ b/docs/intro/first-app.md
@@ -14,7 +14,6 @@ Ionic アプリの構築に使用する予定の JavaScript フレームワー
     <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
   </DocsCard>
 
-{' '}
 <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
   <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
 </DocsCard>
diff --git a/docs/intro/next.md b/docs/intro/next.md
index a51d0019e16..801626e379d 100644
--- a/docs/intro/next.md
+++ b/docs/intro/next.md
@@ -24,7 +24,6 @@ Ionic アプリを構築する際に使用する予定の JavaScript フレー
     <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
   </DocsCard>
 
-{' '}
 <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
   <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
 </DocsCard>
diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md
index b5ec13f1739..86e1e157261 100644
--- a/docs/reference/glossary.md
+++ b/docs/reference/glossary.md
@@ -473,9 +473,9 @@ title: 用語集
   <p>
     トランスパイル
     は、実行前にコードをある言語から別の言語に変換するプロセスです。一般的に、トランスパイルは高級言語を別の高級言語に変換します。
-    Ionic Framework の最も一般的な <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>(<a href="#typescript">
-      TypeScript
-    </a>) から <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
+    Ionic Framework の最も一般的な <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>(
+    <a href="#typescript">TypeScript</a>) から
+    <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
   </p>
 </section>
 

From c9a58f603567b2db83ac52b2398805174435e8db Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 19 Jul 2023 12:55:16 -0400
Subject: [PATCH 439/469] chore: lint

---
 docs/reference/glossary.md                         | 4 +++-
 static/usage/v7/button/text-wrapping/angular.md    | 5 ++++-
 static/usage/v7/button/text-wrapping/demo.html     | 5 ++++-
 static/usage/v7/button/text-wrapping/javascript.md | 5 ++++-
 static/usage/v7/button/text-wrapping/react.md      | 3 +--
 static/usage/v7/button/text-wrapping/vue.md        | 5 ++++-
 6 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md
index 4c86dd95d4c..0ac1a08c706 100644
--- a/docs/reference/glossary.md
+++ b/docs/reference/glossary.md
@@ -20,7 +20,9 @@ title: Glossary
     <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank">
       Accessibility
     </a>{' '}
-    (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows.
+    (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited
+    abilities. This includes people with disabilities, those using mobile devices, and those with slow network
+    connections. Content should be developed to be as accessible as technology allows.
   </p>
 </section>
 
diff --git a/static/usage/v7/button/text-wrapping/angular.md b/static/usage/v7/button/text-wrapping/angular.md
index 6f4f27df707..876e9dc8344 100644
--- a/static/usage/v7/button/text-wrapping/angular.md
+++ b/static/usage/v7/button/text-wrapping/angular.md
@@ -1,4 +1,7 @@
 ```html
 <ion-button>Default</ion-button>
-<ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+<ion-button class="ion-text-wrap" style="max-width: 400px"
+  >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+  friends</ion-button
+>
 ```
diff --git a/static/usage/v7/button/text-wrapping/demo.html b/static/usage/v7/button/text-wrapping/demo.html
index de02ce9c31d..ae3e5b9ca4a 100644
--- a/static/usage/v7/button/text-wrapping/demo.html
+++ b/static/usage/v7/button/text-wrapping/demo.html
@@ -15,7 +15,10 @@
       <ion-content>
         <div class="container">
           <ion-button>Default</ion-button>
-          <ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+          <ion-button class="ion-text-wrap" style="max-width: 400px"
+            >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+            friends</ion-button
+          >
         </div>
       </ion-content>
     </ion-app>
diff --git a/static/usage/v7/button/text-wrapping/javascript.md b/static/usage/v7/button/text-wrapping/javascript.md
index 6f4f27df707..876e9dc8344 100644
--- a/static/usage/v7/button/text-wrapping/javascript.md
+++ b/static/usage/v7/button/text-wrapping/javascript.md
@@ -1,4 +1,7 @@
 ```html
 <ion-button>Default</ion-button>
-<ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+<ion-button class="ion-text-wrap" style="max-width: 400px"
+  >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+  friends</ion-button
+>
 ```
diff --git a/static/usage/v7/button/text-wrapping/react.md b/static/usage/v7/button/text-wrapping/react.md
index f0e5fe2ef40..babad89f4c1 100644
--- a/static/usage/v7/button/text-wrapping/react.md
+++ b/static/usage/v7/button/text-wrapping/react.md
@@ -7,8 +7,7 @@ function Example() {
     <>
       <IonButton>Default</IonButton>
       <IonButton className="ion-text-wrap" style={{ maxWidth: '400px' }}>
-        This is the button that never ends it just goes on and on and on and on
-        and on and on and on and on my friends
+        This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
       </IonButton>
     </>
   );
diff --git a/static/usage/v7/button/text-wrapping/vue.md b/static/usage/v7/button/text-wrapping/vue.md
index 1af8055c939..3462f7357ea 100644
--- a/static/usage/v7/button/text-wrapping/vue.md
+++ b/static/usage/v7/button/text-wrapping/vue.md
@@ -1,7 +1,10 @@
 ```html
 <template>
   <ion-button>Default</ion-button>
-  <ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+  <ion-button class="ion-text-wrap" style="max-width: 400px"
+    >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+    friends</ion-button
+  >
 </template>
 
 <script lang="ts">

From d4f47d9930020eac05b31f74391d4bc8d9161d10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 20 Jul 2023 09:10:18 +0900
Subject: [PATCH 440/469] fix(script): follow new docs script

---
 plugins/docusaurus-plugin-ionic-component-api/index.js | 2 +-
 scripts/{api-ja.js => _api-ja.js}                      | 0
 scripts/{api.js => _api.js}                            | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename scripts/{api-ja.js => _api-ja.js} (100%)
 rename scripts/{api.js => _api.js} (100%)

diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index c74a3dbe5ec..aefdfd7842f 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -19,7 +19,7 @@ module.exports = function (context, options) {
        * @param {*} isCurrentVersion Whether or not this is the current version of the docs
        */
       const generateMarkdownForVersion = async (version, npmTag, isCurrentVersion) => {
-        const response = await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
+        const response = isCurrentVersion ? await fetch(`https://raw.githubusercontent.com/ionic-jp/ionic-docs/main/scripts/data/translated-api.json`) : await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
         const { components } = await response.json();
 
         const names = components.map((component) => component.tag.slice(4));
diff --git a/scripts/api-ja.js b/scripts/_api-ja.js
similarity index 100%
rename from scripts/api-ja.js
rename to scripts/_api-ja.js
diff --git a/scripts/api.js b/scripts/_api.js
similarity index 100%
rename from scripts/api.js
rename to scripts/_api.js

From e95ddf7f34954ff6b72467a515fb2651895280dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 20 Jul 2023 09:10:41 +0900
Subject: [PATCH 441/469] translate

---
 .../version-v6/README.md                      |   17 +
 .../version-v6/angular/lifecycle.md           |  103 ++
 .../version-v6/angular/navigation.md          |  502 +++++
 .../version-v6/angular/overview.md            |   42 +
 .../version-v6/angular/performance.md         |   69 +
 .../version-v6/angular/platform.md            |  216 +++
 .../version-v6/angular/pwa.md                 |  152 ++
 .../version-v6/angular/slides.md              |  335 ++++
 .../version-v6/angular/storage.md             |   32 +
 .../version-v6/angular/testing.md             |  595 ++++++
 .../version-v6/angular/virtual-scroll.md      |  133 ++
 .../version-v6/angular/your-first-app.md      |  176 ++
 .../angular/your-first-app/2-taking-photos.md |  134 ++
 .../angular/your-first-app/3-saving-photos.md |   81 +
 .../your-first-app/4-loading-photos.md        |   69 +
 .../angular/your-first-app/5-adding-mobile.md |  117 ++
 .../your-first-app/6-deploying-mobile.md      |  114 ++
 .../angular/your-first-app/7-live-reload.md   |  114 ++
 .../angular/your-first-app/8-distribute.md    |  100 +
 .../version-v6/api.md                         |   17 +
 .../version-v6/api/accordion-group.md         |   59 +
 .../version-v6/api/accordion.md               |  211 +++
 .../version-v6/api/action-sheet.md            |  153 ++
 .../version-v6/api/alert.md                   |  202 ++
 .../version-v6/api/app.md                     |   47 +
 .../version-v6/api/avatar.md                  |   67 +
 .../version-v6/api/back-button.md             |   57 +
 .../version-v6/api/backdrop.md                |   51 +
 .../version-v6/api/badge.md                   |   58 +
 .../version-v6/api/breadcrumb.md              |   60 +
 .../version-v6/api/breadcrumbs.md             |  104 ++
 .../version-v6/api/button.md                  |   97 +
 .../version-v6/api/buttons.md                 |   87 +
 .../version-v6/api/card-content.md            |   35 +
 .../version-v6/api/card-header.md             |   37 +
 .../version-v6/api/card-subtitle.md           |   37 +
 .../version-v6/api/card-title.md              |   42 +
 .../version-v6/api/card.md                    |   87 +
 .../version-v6/api/checkbox.md                |  127 ++
 .../version-v6/api/chip.md                    |   64 +
 .../version-v6/api/col.md                     |   49 +
 .../version-v6/api/content.md                 |  156 ++
 .../version-v6/api/datetime-button.md         |   72 +
 .../version-v6/api/datetime.md                |  456 +++++
 .../version-v6/api/fab-button.md              |   43 +
 .../version-v6/api/fab-list.md                |   35 +
 .../version-v6/api/fab.md                     |   95 +
 .../version-v6/api/footer.md                  |   79 +
 .../version-v6/api/grid.md                    |  215 +++
 .../version-v6/api/header.md                  |   92 +
 .../version-v6/api/icon.md                    |   45 +
 .../version-v6/api/img.md                     |   46 +
 .../version-v6/api/infinite-scroll-content.md |   34 +
 .../version-v6/api/infinite-scroll.md         |  115 ++
 .../version-v6/api/input.md                   |  175 ++
 .../version-v6/api/item-divider.md            |   63 +
 .../version-v6/api/item-group.md              |   50 +
 .../version-v6/api/item-option.md             |   42 +
 .../version-v6/api/item-options.md            |   50 +
 .../version-v6/api/item-sliding.md            |   77 +
 .../version-v6/api/item.md                    |  152 ++
 .../version-v6/api/label.md                   |   66 +
 .../version-v6/api/list-header.md             |   74 +
 .../version-v6/api/list.md                    |   66 +
 .../version-v6/api/loading.md                 |  114 ++
 .../version-v6/api/menu-button.md             |   42 +
 .../version-v6/api/menu-toggle.md             |   44 +
 .../version-v6/api/menu.md                    |   90 +
 .../version-v6/api/modal.md                   |  293 +++
 .../version-v6/api/nav-link.md                |   42 +
 .../version-v6/api/nav.md                     |   62 +
 .../version-v6/api/note.md                    |   65 +
 .../version-v6/api/picker.md                  |  142 ++
 .../version-v6/api/popover.md                 |  259 +++
 .../version-v6/api/progress-bar.md            |   96 +
 .../version-v6/api/radio-group.md             |   60 +
 .../version-v6/api/radio.md                   |  122 ++
 .../version-v6/api/range.md                   |  197 ++
 .../version-v6/api/refresher-content.md       |   35 +
 .../version-v6/api/refresher.md               |  121 ++
 .../version-v6/api/reorder-group.md           |   64 +
 .../version-v6/api/reorder.md                 |   98 +
 .../version-v6/api/ripple-effect.md           |   67 +
 .../version-v6/api/route-redirect.md          |  114 ++
 .../version-v6/api/route.md                   |  269 +++
 .../version-v6/api/router-link.md             |   59 +
 .../version-v6/api/router-outlet.md           |   59 +
 .../version-v6/api/router.md                  |  114 ++
 .../version-v6/api/row.md                     |   49 +
 .../version-v6/api/searchbar.md               |  141 ++
 .../version-v6/api/segment-button.md          |   71 +
 .../version-v6/api/segment.md                 |  119 ++
 .../version-v6/api/select-option.md           |   42 +
 .../version-v6/api/select.md                  |  227 +++
 .../version-v6/api/skeleton-text.md           |   54 +
 .../version-v6/api/spinner.md                 |   63 +
 .../version-v6/api/split-pane.md              |   81 +
 .../version-v6/api/tab-bar.md                 |  207 +++
 .../version-v6/api/tab-button.md              |  295 +++
 .../version-v6/api/tab.md                     |   49 +
 .../version-v6/api/tabs.md                    |   79 +
 .../version-v6/api/text.md                    |   49 +
 .../version-v6/api/textarea.md                |  150 ++
 .../version-v6/api/thumbnail.md               |   61 +
 .../version-v6/api/title.md                   |   84 +
 .../version-v6/api/toast.md                   |  169 ++
 .../version-v6/api/toggle.md                  |  152 ++
 .../version-v6/api/toolbar.md                 |  109 ++
 .../version-v6/cli.md                         |   54 +
 .../version-v6/cli/commands/.gitignore        |    2 +
 .../version-v6/cli/configuration.md           |  243 +++
 .../version-v6/cli/livereload.md              |   71 +
 .../version-v6/cli/using-a-proxy.md           |   45 +
 .../version-v6/components.md                  |  156 ++
 .../version-v6/contributing/coc.md            |   11 +
 .../contributing/how-to-contribute.md         |  252 +++
 .../core-concepts/cross-platform.md           |  180 ++
 .../version-v6/core-concepts/fundamentals.md  |   47 +
 .../version-v6/core-concepts/webview.md       |   50 +
 .../what-are-progressive-web-apps.md          |   68 +
 .../version-v6/deployment/app-store.md        |   74 +
 .../version-v6/deployment/desktop-app.md      |   48 +
 .../version-v6/deployment/play-store.md       |   79 +
 .../version-v6/deployment/play-store.mdx      |  167 ++
 .../deployment/progressive-web-app.md         |   25 +
 .../version-v6/developer-resources/books.md   |   59 +
 .../version-v6/developer-resources/courses.md |   83 +
 .../version-v6/developer-resources/guides.md  |    9 +
 .../creating-photo-gallery-device-storage.md  |  195 ++
 .../guides/first-app-v3/intro.md              |  117 ++
 .../guides/first-app-v3/ios-android-camera.md |  156 ++
 .../realtime-updates-ionic-deploy.md          |  193 ++
 .../guides/first-app-v3/theming.md            |   47 +
 .../track-bugs-ionic-monitoring.md            |   92 +
 .../creating-photo-gallery-device-storage.md  |  202 ++
 .../guides/first-app-v4/intro.md              |   97 +
 .../guides/first-app-v4/ios-android-camera.md |  154 ++
 .../guides/first-app-v4/theming.md            |   56 +
 .../version-v6/developer-resources/posts.md   |   77 +
 .../version-v6/developer-resources/tools.md   |   21 +
 .../version-v6/developer-resources/videos.md  |   21 +
 .../version-v6/developing/android.md          |  222 +++
 .../version-v6/developing/config.md           |  147 ++
 .../developing/config/global/index.md         |   67 +
 .../developing/config/per-component/index.md  |  143 ++
 .../config/per-platform-fallback/index.md     |   79 +
 .../config/per-platform-overrides/index.md    |   88 +
 .../developing/config/per-platform/index.md   |   63 +
 .../developing/hardware-back-button.md        |  345 ++++
 .../version-v6/developing/ios.md              |  184 ++
 .../version-v6/developing/keyboard.md         |  273 +++
 .../version-v6/developing/previewing.md       |   82 +
 .../version-v6/developing/scaffolding.md      |   95 +
 .../version-v6/developing/starting.md         |   48 +
 .../version-v6/developing/tips.md             |  152 ++
 .../version-v6/index.md                       |  159 ++
 .../version-v6/intro/cdn.md                   |  166 ++
 .../version-v6/intro/cli.md                   |   64 +
 .../version-v6/intro/environment.md           |   68 +
 .../version-v6/intro/first-app.md             |   24 +
 .../version-v6/intro/next.md                  |   32 +
 .../version-v6/intro/vscode-extension.md      |   39 +
 .../version-v6/layout/css-utilities.md        |  554 ++++++
 .../version-v6/layout/global-stylesheets.md   |   73 +
 .../version-v6/layout/grid.md                 |  512 ++++++
 .../version-v6/layout/structure.md            |  236 +++
 .../version-v6/native-faq.md                  |   25 +
 .../version-v6/native-setup.md                |  146 ++
 .../version-v6/native.md                      |   36 +
 .../version-v6/native/.gitignore              |    2 +
 .../version-v6/react.md                       |  147 ++
 ...onic-react-to-an-existing-react-project.md |  213 +++
 .../version-v6/react/config.md                |  118 ++
 .../version-v6/react/lifecycle.md             |  147 ++
 .../version-v6/react/navigation.md            |  600 ++++++
 .../version-v6/react/overlays.md              |   91 +
 .../version-v6/react/overview.md              |   45 +
 .../version-v6/react/performance.md           |   47 +
 .../version-v6/react/platform.md              |   84 +
 .../version-v6/react/pwa.md                   |  176 ++
 .../version-v6/react/quickstart.md            |  454 +++++
 .../version-v6/react/slides.md                |  569 ++++++
 .../version-v6/react/storage.md               |   25 +
 .../version-v6/react/testing.md               |    7 +
 .../version-v6/react/virtual-scroll.md        |   76 +
 .../version-v6/react/your-first-app.md        |  204 ++
 .../react/your-first-app/2-taking-photos.md   |  146 ++
 .../react/your-first-app/3-saving-photos.md   |   81 +
 .../react/your-first-app/4-loading-photos.md  |   65 +
 .../react/your-first-app/5-adding-mobile.md   |   73 +
 .../your-first-app/6-deploying-mobile.md      |  107 ++
 .../react/your-first-app/7-live-reload.md     |  120 ++
 .../react/your-first-app/8-distribute.md      |  100 +
 .../version-v6/reference/browser-support.md   |   47 +
 .../version-v6/reference/glossary.md          |  553 ++++++
 .../version-v6/reference/release-notes.md     |    7 +
 .../version-v6/reference/support.md           |  115 ++
 .../version-v6/reference/versioning.md        |   25 +
 .../version-v6/studio/assets.md               |   17 +
 .../version-v6/studio/code.md                 |   40 +
 .../version-v6/studio/designer.md             |  179 ++
 .../version-v6/studio/faq.md                  |   23 +
 .../studio/guides/routing-and-navigation.md   |   29 +
 .../guides/using-native-functionality.md      |   17 +
 .../version-v6/studio/running.md              |   66 +
 .../version-v6/studio/settings.md             |   68 +
 .../version-v6/studio/setup/installation.md   |   17 +
 .../version-v6/studio/setup/native.md         |   13 +
 .../version-v6/studio/start.md                |   13 +
 .../version-v6/studio/support.md              |   15 +
 .../version-v6/studio/terminal.md             |   36 +
 .../version-v6/studio/theming.md              |   15 +
 .../version-v6/techniques/security.md         |  158 ++
 .../version-v6/test/page1.md                  |    3 +
 .../version-v6/test/page2.md                  |    3 +
 .../version-v6/theming/advanced.md            |  182 ++
 .../version-v6/theming/basics.md              |   43 +
 .../version-v6/theming/color-generator.md     |   19 +
 .../version-v6/theming/colors.md              |  116 ++
 .../version-v6/theming/css-shadow-parts.md    |  161 ++
 .../version-v6/theming/css-variables.md       |   98 +
 .../version-v6/theming/dark-mode.md           |  327 ++++
 .../version-v6/theming/platform-styles.md     |   51 +
 .../version-v6/theming/themes.md              |   67 +
 .../version-v6/troubleshooting/build.md       |  209 +++
 .../version-v6/troubleshooting/cors.md        |  300 +++
 .../version-v6/troubleshooting/debugging.md   |  100 +
 .../version-v6/troubleshooting/native.md      |  103 ++
 .../version-v6/troubleshooting/runtime.md     |  209 +++
 .../version-v6/updating/4-0.md                |  282 +++
 .../version-v6/updating/5-0.md                |   37 +
 .../version-v6/updating/6-0.md                |  470 +++++
 .../version-v6/updating/7-0.md                |  158 ++
 .../version-v6/utilities/animations.md        | 1635 +++++++++++++++++
 .../version-v6/utilities/gestures.md          |  505 +++++
 .../version-v6/vue/config.md                  |  119 ++
 .../version-v6/vue/lifecycle.md               |  108 ++
 .../version-v6/vue/navigation.md              |  673 +++++++
 .../version-v6/vue/overview.md                |   61 +
 .../version-v6/vue/performance.md             |   50 +
 .../version-v6/vue/platform.md                |   87 +
 .../version-v6/vue/pwa.md                     |  248 +++
 .../version-v6/vue/quickstart.md              |  707 +++++++
 .../version-v6/vue/slides.md                  |  570 ++++++
 .../version-v6/vue/storage.md                 |   32 +
 .../version-v6/vue/testing.md                 |    3 +
 .../version-v6/vue/troubleshooting.md         |  134 ++
 .../version-v6/vue/utility-functions.md       |  184 ++
 .../version-v6/vue/virtual-scroll.md          |  143 ++
 .../version-v6/vue/your-first-app.md          |  222 +++
 .../vue/your-first-app/2-taking-photos.md     |  155 ++
 .../vue/your-first-app/3-saving-photos.md     |   70 +
 .../vue/your-first-app/4-loading-photos.md    |   69 +
 .../vue/your-first-app/5-adding-mobile.md     |   80 +
 .../vue/your-first-app/6-deploying-mobile.md  |  118 ++
 .../vue/your-first-app/7-live-reload.md       |  134 ++
 .../vue/your-first-app/8-distribute.md        |  100 +
 scripts/data/translated-api.json              |  288 +--
 scripts/data/translated-cache.json            |    2 +-
 scripts/data/translated-cli.json              |   92 +-
 scripts/data/translated-native.json           |  562 +++---
 scripts/i18n.sh                               |    2 +-
 .../reference/ReleaseNotes/release-notes.json |   84 +-
 src/translate/.detection/api/datetime.json    |   55 +-
 src/translate/.detection/api/input.json       |   21 +-
 src/translate/.detection/api/range.json       |   19 +
 src/translate/.detection/api/searchbar.json   |   19 +-
 .../.detection/api/segment-button.json        |    7 +-
 src/translate/.detection/api/segment.json     |    5 +-
 src/translate/.detection/api/select.json      |   95 +-
 src/translate/.detection/api/tabs.json        |    6 +-
 src/translate/.detection/api/textarea.json    |   17 +-
 src/translate/.detection/cli/build.readme.md  |    2 +-
 .../.detection/cli/capacitor-add.readme.md    |    3 +-
 .../.detection/cli/capacitor-build.readme.md  |    3 +-
 .../.detection/cli/capacitor-copy.readme.md   |    3 +-
 .../.detection/cli/capacitor-open.readme.md   |    3 +-
 .../.detection/cli/capacitor-run.readme.md    |    3 +-
 .../.detection/cli/capacitor-sync.readme.md   |    3 +-
 .../.detection/cli/capacitor-update.readme.md |    3 +-
 .../.detection/cli/completion.readme.md       |    2 +-
 .../.detection/cli/config-get.readme.md       |    2 +-
 .../.detection/cli/config-set.readme.md       |    2 +-
 .../.detection/cli/config-unset.readme.md     |    2 +-
 .../.detection/cli/cordova-build.readme.md    |    2 +-
 .../.detection/cli/cordova-compile.readme.md  |    2 +-
 .../.detection/cli/cordova-emulate.readme.md  |    2 +-
 .../.detection/cli/cordova-platform.readme.md |    2 +-
 .../.detection/cli/cordova-plugin.readme.md   |    2 +-
 .../.detection/cli/cordova-prepare.readme.md  |    2 +-
 .../cli/cordova-requirements.readme.md        |    2 +-
 .../cli/cordova-resources.readme.md           |    3 +-
 .../.detection/cli/cordova-run.readme.md      |    2 +-
 .../.detection/cli/generate.readme.md         |    6 +-
 .../.detection/cli/git-remote.readme.md       |    2 +-
 src/translate/.detection/cli/info.readme.md   |    2 +-
 src/translate/.detection/cli/init.readme.md   |    2 +-
 .../cli/integrations-disable.readme.md        |    2 +-
 .../cli/integrations-enable.readme.md         |    2 +-
 .../cli/integrations-list.readme.md           |    2 +-
 src/translate/.detection/cli/link.readme.md   |    2 +-
 .../.detection/cli/live-update-add.json       |   80 +
 .../.detection/cli/live-update-add.readme.md  |    5 +
 .../.detection/cli/live-update-configure.json |   86 +
 .../cli/live-update-configure.readme.md       |    5 +
 .../.detection/cli/live-update-manifest.json  |   18 +
 .../cli/live-update-manifest.readme.md        |    0
 src/translate/.detection/cli/login.readme.md  |    2 +-
 src/translate/.detection/cli/logout.readme.md |    2 +-
 src/translate/.detection/cli/repair.readme.md |    2 +-
 src/translate/.detection/cli/serve.json       |    2 +-
 src/translate/.detection/cli/serve.readme.md  |    4 +-
 src/translate/.detection/cli/signup.readme.md |    2 +-
 .../.detection/cli/ssh-setup.readme.md        |    2 +-
 .../.detection/cli/ssh-use.readme.md          |    2 +-
 .../.detection/cli/ssl-generate.readme.md     |    2 +-
 src/translate/.detection/cli/start.readme.md  |    2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |    1 +
 ...awesome-cordova-plugins-actsheet.readme.md |    1 +
 .../@awesome-cordova-plugins-adjust.readme.md |    1 +
 ...esome-cordova-plugins-admob-free.readme.md |    1 +
 ...esome-cordova-plugins-admob-plus.readme.md |    1 +
 .../@awesome-cordova-plugins-admob.readme.md  |    2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |    1 +
 .../@awesome-cordova-plugins-alipay.readme.md |    1 +
 ...e-cordova-plugins-all-in-one-sdk.readme.md |    1 +
 ...rdova-plugins-analytics-firebase.readme.md |    1 +
 ...ordova-plugins-android-exoplayer.readme.md |    1 +
 ...dova-plugins-android-full-screen.readme.md |    3 +-
 ...me-cordova-plugins-android-notch.readme.md |    1 +
 ...dova-plugins-android-permissions.readme.md |    1 +
 ...@awesome-cordova-plugins-anyline.readme.md |    1 +
 ...cordova-plugins-app-availability.readme.md |    1 +
 ...ova-plugins-app-center-analytics.readme.md |    1 +
 ...rdova-plugins-app-center-crashes.readme.md |    1 +
 ...va-plugins-app-center-low-memory.readme.md |    1 +
 ...-cordova-plugins-app-center-push.readme.md |    2 +
 ...ome-cordova-plugins-app-launcher.readme.md |    1 +
 ...ome-cordova-plugins-app-minimize.readme.md |    1 +
 ...-cordova-plugins-app-preferences.readme.md |    1 +
 ...awesome-cordova-plugins-app-rate.readme.md |    1 +
 ...some-cordova-plugins-app-version.readme.md |    1 +
 ...wesome-cordova-plugins-apple-pay.readme.md |    1 +
 ...ome-cordova-plugins-apple-wallet.readme.md |    1 +
 ...awesome-cordova-plugins-appodeal.readme.md |    1 +
 ...wesome-cordova-plugins-appsflyer.readme.md |    1 +
 ...cordova-plugins-audio-management.readme.md |    1 +
 ...wesome-cordova-plugins-autostart.readme.md |    1 +
 ...cordova-plugins-background-fetch.readme.md |    1 +
 ...a-plugins-background-geolocation.readme.md |    1 +
 ...-cordova-plugins-background-mode.readme.md |    3 +-
 ...ordova-plugins-background-upload.readme.md |    1 +
 ...wesome-cordova-plugins-backlight.readme.md |    1 +
 .../@awesome-cordova-plugins-badge.readme.md  |    1 +
 ...esome-cordova-plugins-baidu-push.readme.md |    1 +
 ...-cordova-plugins-barcode-scanner.readme.md |    1 +
 ...ordova-plugins-base64-to-gallery.readme.md |    2 +-
 .../@awesome-cordova-plugins-base64.readme.md |    1 +
 ...e-cordova-plugins-battery-status.readme.md |    1 +
 ...awesome-cordova-plugins-biocatch.readme.md |    1 +
 ...ordova-plugins-biometric-wrapper.readme.md |    1 +
 .../@awesome-cordova-plugins-ble.readme.md    |    1 +
 ...@awesome-cordova-plugins-blinkid.readme.md |    1 +
 ...@awesome-cordova-plugins-blinkup.readme.md |    1 +
 ...ns-bluetooth-classic-serial-port.readme.md |    2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |    1 +
 ...cordova-plugins-bluetooth-serial.readme.md |    2 +-
 ...wesome-cordova-plugins-braintree.readme.md |    5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |    1 +
 ...esome-cordova-plugins-brightness.readme.md |    1 +
 ...some-cordova-plugins-broadcaster.readme.md |    1 +
 ...some-cordova-plugins-browser-tab.readme.md |    1 +
 ...esome-cordova-plugins-build-info.readme.md |    1 +
 ...awesome-cordova-plugins-calendar.readme.md |    2 +
 ...e-cordova-plugins-call-directory.readme.md |    1 +
 ...awesome-cordova-plugins-call-log.readme.md |    1 +
 ...some-cordova-plugins-call-number.readme.md |    1 +
 ...e-cordova-plugins-camera-preview.readme.md |    1 +
 .../@awesome-cordova-plugins-camera.readme.md |    3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |    2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |    1 +
 ...wesome-cordova-plugins-clevertap.readme.md |    1 +
 ...wesome-cordova-plugins-clipboard.readme.md |    2 +
 ...e-cordova-plugins-cloud-settings.readme.md |    1 +
 ...wesome-cordova-plugins-clover-go.readme.md |    1 +
 ...wesome-cordova-plugins-code-push.readme.md |    1 +
 ...ova-plugins-colored-browser-tabs.readme.md |    1 +
 ...awesome-cordova-plugins-contacts.readme.md |    1 +
 ...e-cordova-plugins-couchbase-lite.readme.md |    1 +
 .../@awesome-cordova-plugins-crop.readme.md   |    2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |    1 +
 ...some-cordova-plugins-date-picker.readme.md |    1 +
 ...awesome-cordova-plugins-db-meter.readme.md |    2 +-
 ...-cordova-plugins-device-accounts.readme.md |    1 +
 ...-cordova-plugins-device-feedback.readme.md |    2 +
 ...me-cordova-plugins-device-motion.readme.md |    1 +
 ...rdova-plugins-device-orientation.readme.md |    1 +
 .../@awesome-cordova-plugins-device.readme.md |    1 +
 ...esome-cordova-plugins-dfu-update.readme.md |    1 +
 ...esome-cordova-plugins-diagnostic.readme.md |    1 +
 ...@awesome-cordova-plugins-dialogs.readme.md |    1 +
 ...-cordova-plugins-document-picker.readme.md |    2 +
 ...cordova-plugins-document-scanner.readme.md |    1 +
 ...-cordova-plugins-document-viewer.readme.md |    3 +-
 ...esome-cordova-plugins-downloader.readme.md |    2 +
 ...e-cordova-plugins-email-composer.readme.md |    3 +
 ...e-cordova-plugins-emm-app-config.readme.md |    2 +
 ...cordova-plugins-estimote-beacons.readme.md |    1 +
 ...gins-extended-device-information.readme.md |   10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |    1 +
 ...awesome-cordova-plugins-facebook.readme.md |    8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |    1 +
 ...ome-cordova-plugins-file-chooser.readme.md |    2 +
 ...-cordova-plugins-file-encryption.readme.md |    1 +
 ...some-cordova-plugins-file-opener.readme.md |    1 +
 ...wesome-cordova-plugins-file-path.readme.md |    2 +
 ...some-cordova-plugins-file-picker.readme.md |    2 +
 ...me-cordova-plugins-file-transfer.readme.md |    1 +
 .../@awesome-cordova-plugins-file.readme.md   |   12 +-
 ...rdova-plugins-firebase-analytics.readme.md |    5 +-
 ...-plugins-firebase-authentication.readme.md |    1 +
 ...-cordova-plugins-firebase-config.readme.md |    1 +
 ...e-cordova-plugins-firebase-crash.readme.md |    1 +
 ...ova-plugins-firebase-crashlytics.readme.md |    1 +
 ...a-plugins-firebase-dynamic-links.readme.md |    4 +-
 ...rdova-plugins-firebase-messaging.readme.md |    1 +
 ...-cordova-plugins-firebase-vision.readme.md |    1 +
 ...esome-cordova-plugins-firebase-x.readme.md |    1 +
 ...awesome-cordova-plugins-firebase.readme.md |    1 +
 ...cordova-plugins-flurry-analytics.readme.md |    1 +
 ...rdova-plugins-foreground-service.readme.md |    5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |    1 +
 ...ordova-plugins-full-screen-image.readme.md |    1 +
 ...-cordova-plugins-gao-de-location.readme.md |    1 +
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |    1 +
 ...awesome-cordova-plugins-geofence.readme.md |    2 +-
 ...some-cordova-plugins-geolocation.readme.md |    5 +-
 ...me-cordova-plugins-globalization.readme.md |    1 +
 ...cordova-plugins-google-analytics.readme.md |    4 +-
 ...me-cordova-plugins-google-nearby.readme.md |    1 +
 ...ugins-google-play-games-services.readme.md |    1 +
 ...wesome-cordova-plugins-gyroscope.readme.md |    2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |    1 +
 ...ome-cordova-plugins-header-color.readme.md |    1 +
 ...esome-cordova-plugins-health-kit.readme.md |    1 +
 .../@awesome-cordova-plugins-health.readme.md |    1 +
 ...@awesome-cordova-plugins-hotspot.readme.md |    1 +
 .../@awesome-cordova-plugins-http.readme.md   |    2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |    3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |    1 +
 ...@awesome-cordova-plugins-ibeacon.readme.md |    3 +-
 ...ome-cordova-plugins-image-picker.readme.md |    1 +
 ...me-cordova-plugins-image-resizer.readme.md |    1 +
 .../@awesome-cordova-plugins-imap.readme.md   |    1 +
 ...e-cordova-plugins-in-app-browser.readme.md |    2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |   35 +-
 ...-cordova-plugins-in-app-purchase.readme.md |    1 +
 ...me-cordova-plugins-in-app-review.readme.md |    2 +
 ...ordova-plugins-index-app-content.readme.md |    1 +
 ...awesome-cordova-plugins-insomnia.readme.md |    1 +
 ...e-cordova-plugins-intel-security.readme.md |    2 +-
 ...awesome-cordova-plugins-intercom.readme.md |    1 +
 ...me-cordova-plugins-ionic-webview.readme.md |    1 +
 ...s-ios-aswebauthenticationsessapi.readme.md |    1 +
 ...awesome-cordova-plugins-is-debug.readme.md |    1 +
 ...esome-cordova-plugins-janalytics.readme.md |    1 +
 ...wesome-cordova-plugins-jins-meme.readme.md |    1 +
 .../@awesome-cordova-plugins-jumio.readme.md  |    2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |    1 +
 ...ordova-plugins-keychain-touch-id.readme.md |    1 +
 ...awesome-cordova-plugins-keychain.readme.md |    1 +
 ...some-cordova-plugins-kommunicate.readme.md |    1 +
 ...awesome-cordova-plugins-last-cam.readme.md |    1 +
 ...cordova-plugins-launch-navigator.readme.md |    1 +
 ...me-cordova-plugins-launch-review.readme.md |    3 +-
 ...esome-cordova-plugins-line-login.readme.md |    1 +
 ...ome-cordova-plugins-local-backup.readme.md |    1 +
 ...dova-plugins-local-notifications.readme.md |    1 +
 ...me-cordova-plugins-locataccuracy.readme.md |    1 +
 ...ova-plugins-lottie-splash-screen.readme.md |    1 +
 .../@awesome-cordova-plugins-luxand.readme.md |    1 +
 ...ome-cordova-plugins-magnetometer.readme.md |    1 +
 .../@awesome-cordova-plugins-market.readme.md |    1 +
 ...me-cordova-plugins-media-capture.readme.md |    1 +
 .../@awesome-cordova-plugins-media.readme.md  |    1 +
 .../@awesome-cordova-plugins-metrix.readme.md |    1 +
 ...awesome-cordova-plugins-mixpanel.readme.md |    1 +
 ...-cordova-plugins-mlkit-translate.readme.md |    1 +
 ...ova-plugins-mobile-accessibility.readme.md |    1 +
 ...cordova-plugins-mobile-messaging.readme.md |    1 +
 ...@awesome-cordova-plugins-ms-adal.readme.md |    3 +-
 ...plugins-multiple-document-picker.readme.md |    1 +
 ...e-cordova-plugins-music-controls.readme.md |    1 +
 ...ome-cordova-plugins-native-audio.readme.md |    2 +-
 ...-cordova-plugins-native-geocoder.readme.md |    1 +
 ...-cordova-plugins-native-keyboard.readme.md |    2 +
 ...-plugins-native-page-transitions.readme.md |    1 +
 ...cordova-plugins-native-ringtones.readme.md |    1 +
 ...esome-cordova-plugins-navigatbar.readme.md |    1 +
 ...ordova-plugins-network-interface.readme.md |    1 +
 ...@awesome-cordova-plugins-network.readme.md |    1 +
 .../@awesome-cordova-plugins-nfc.readme.md    |    2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |    3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |    6 +-
 ...ova-plugins-open-native-settings.readme.md |    3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |    1 +
 .../@awesome-cordova-plugins-paypal.readme.md |    1 +
 ...@awesome-cordova-plugins-paytabs.readme.md |    1 +
 ...me-cordova-plugins-pdf-generator.readme.md |    1 +
 ...wesome-cordova-plugins-pedometer.readme.md |    1 +
 ...gins-phonegap-local-notification.readme.md |    1 +
 ...me-cordova-plugins-photo-library.readme.md |    1 +
 ...ome-cordova-plugins-photo-viewer.readme.md |    2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |    1 +
 ...esome-cordova-plugins-pin-dialog.readme.md |    3 +
 ...wesome-cordova-plugins-pinterest.readme.md |    1 +
 ...awesome-cordova-plugins-pollfish.readme.md |    1 +
 ...cordova-plugins-power-management.readme.md |    1 +
 ...rdova-plugins-power-optimization.readme.md |    1 +
 ...@awesome-cordova-plugins-printer.readme.md |    2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |    1 +
 ...wesome-cordova-plugins-purchases.readme.md |    6 +-
 .../@awesome-cordova-plugins-push.readme.md   |    1 +
 ...ome-cordova-plugins-pushape-push.readme.md |    1 +
 .../@awesome-cordova-plugins-qqsdk.readme.md  |    1 +
 ...esome-cordova-plugins-qr-scanner.readme.md |    1 +
 ...a-plugins-regula-document-reader.readme.md |    1 +
 ...@awesome-cordova-plugins-restart.readme.md |    1 +
 ...@awesome-cordova-plugins-rollbar.readme.md |    1 +
 ...a-plugins-safari-view-controller.readme.md |    1 +
 ...rdova-plugins-screen-orientation.readme.md |    1 +
 ...esome-cordova-plugins-screenshot.readme.md |    2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |    1 +
 .../@awesome-cordova-plugins-serial.readme.md |    1 +
 ...ordova-plugins-service-discovery.readme.md |    1 +
 .../@awesome-cordova-plugins-shake.readme.md  |    2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |    1 +
 ...ordova-plugins-shortcuts-android.readme.md |    1 +
 ...rdova-plugins-sign-in-with-apple.readme.md |    3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |    1 +
 ...e-cordova-plugins-siri-shortcuts.readme.md |    1 +
 ...wesome-cordova-plugins-smartlook.readme.md |    1 +
 ...me-cordova-plugins-sms-retriever.readme.md |    1 +
 .../@awesome-cordova-plugins-sms.readme.md    |    2 +
 ...e-cordova-plugins-social-sharing.readme.md |    1 +
 ...rdova-plugins-speech-recognition.readme.md |    1 +
 ...wesome-cordova-plugins-speechkit.readme.md |    1 +
 ...e-cordova-plugins-spinner-dialog.readme.md |    1 +
 ...me-cordova-plugins-splash-screen.readme.md |    2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |    2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |    1 +
 ...me-cordova-plugins-sqlite-porter.readme.md |    1 +
 .../@awesome-cordova-plugins-sqlite.readme.md |    1 +
 ...some-cordova-plugins-ssh-connect.readme.md |    1 +
 ...wesome-cordova-plugins-star-prnt.readme.md |    3 +-
 ...esome-cordova-plugins-status-bar.readme.md |    1 +
 ...some-cordova-plugins-stepcounter.readme.md |    2 +-
 ...-cordova-plugins-streaming-media.readme.md |    1 +
 .../@awesome-cordova-plugins-stripe.readme.md |    1 +
 .../@awesome-cordova-plugins-sum-up.readme.md |    1 +
 ...s-system-alert-window-permission.readme.md |    1 +
 ...me-cordova-plugins-taptic-engine.readme.md |    1 +
 ...ova-plugins-tealium-adidentifier.readme.md |    1 +
 ...-plugins-tealium-installreferrer.readme.md |    1 +
 ...@awesome-cordova-plugins-tealium.readme.md |    3 +-
 ...-plugins-text-to-speech-advanced.readme.md |    1 +
 ...e-cordova-plugins-text-to-speech.readme.md |    1 +
 ...-cordova-plugins-theme-detection.readme.md |    1 +
 ...ordova-plugins-themeable-browser.readme.md |    1 +
 ...-cordova-plugins-three-dee-touch.readme.md |    1 +
 .../@awesome-cordova-plugins-toast.readme.md  |    1 +
 ...awesome-cordova-plugins-touch-id.readme.md |    1 +
 ...-cordova-plugins-twitter-connect.readme.md |    4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |    1 +
 ...cordova-plugins-unique-device-id.readme.md |    1 +
 ...dova-plugins-unvired-cordova-sdk.readme.md |   18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |    1 +
 ...ome-cordova-plugins-urbanairship.readme.md |    1 +
 ...ova-plugins-usabilla-cordova-sdk.readme.md |    1 +
 ...esome-cordova-plugins-user-agent.readme.md |    3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |    1 +
 ...wesome-cordova-plugins-vibration.readme.md |    2 +-
 ...rdova-plugins-video-capture-plus.readme.md |    2 +-
 ...ome-cordova-plugins-video-player.readme.md |    1 +
 ...esome-cordova-plugins-web-intent.readme.md |    3 +-
 ...esome-cordova-plugins-web-server.readme.md |    1 +
 ...ordova-plugins-web-socket-server.readme.md |    1 +
 ...wesome-cordova-plugins-webengage.readme.md |    1 +
 .../@awesome-cordova-plugins-wechat.readme.md |    1 +
 ...me-cordova-plugins-wifi-wizard-2.readme.md |    1 +
 ...esome-cordova-plugins-wonderpush.readme.md |    2 +
 ...ova-plugins-youtube-video-player.readme.md |    1 +
 .../@awesome-cordova-plugins-zbar.readme.md   |    1 +
 ...awesome-cordova-plugins-zeroconf.readme.md |    3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |    1 +
 .../@awesome-cordova-plugins-zoom.readme.md   |    1 +
 src/translate/api/datetime.json               |   55 +-
 src/translate/api/input.json                  |   21 +-
 src/translate/api/range.json                  |   19 +
 src/translate/api/searchbar.json              |   19 +-
 src/translate/api/segment-button.json         |    7 +-
 src/translate/api/segment.json                |    5 +-
 src/translate/api/select.json                 |   95 +-
 src/translate/api/tabs.json                   |    6 +-
 src/translate/api/textarea.json               |   17 +-
 src/translate/cli/build.readme.md             |    2 +-
 src/translate/cli/capacitor-add.readme.md     |    3 +-
 src/translate/cli/capacitor-build.readme.md   |    3 +-
 src/translate/cli/capacitor-copy.readme.md    |    3 +-
 src/translate/cli/capacitor-open.readme.md    |    3 +-
 src/translate/cli/capacitor-run.readme.md     |    3 +-
 src/translate/cli/capacitor-sync.readme.md    |    3 +-
 src/translate/cli/capacitor-update.readme.md  |    3 +-
 src/translate/cli/completion.readme.md        |    2 +-
 src/translate/cli/config-get.readme.md        |    2 +-
 src/translate/cli/config-set.readme.md        |    2 +-
 src/translate/cli/config-unset.readme.md      |    2 +-
 src/translate/cli/cordova-build.readme.md     |    2 +-
 src/translate/cli/cordova-compile.readme.md   |    2 +-
 src/translate/cli/cordova-emulate.readme.md   |    2 +-
 src/translate/cli/cordova-platform.readme.md  |    2 +-
 src/translate/cli/cordova-plugin.readme.md    |    2 +-
 src/translate/cli/cordova-prepare.readme.md   |    2 +-
 .../cli/cordova-requirements.readme.md        |    2 +-
 src/translate/cli/cordova-resources.readme.md |    3 +-
 src/translate/cli/cordova-run.readme.md       |    2 +-
 src/translate/cli/generate.readme.md          |    6 +-
 src/translate/cli/git-remote.readme.md        |    2 +-
 src/translate/cli/info.readme.md              |    2 +-
 src/translate/cli/init.readme.md              |    2 +-
 .../cli/integrations-disable.readme.md        |    2 +-
 .../cli/integrations-enable.readme.md         |    2 +-
 src/translate/cli/integrations-list.readme.md |    2 +-
 src/translate/cli/link.readme.md              |    2 +-
 src/translate/cli/live-update-add.json        |   80 +
 src/translate/cli/live-update-add.readme.md   |    5 +
 src/translate/cli/live-update-configure.json  |   86 +
 .../cli/live-update-configure.readme.md       |    5 +
 src/translate/cli/live-update-manifest.json   |   18 +
 .../cli/live-update-manifest.readme.md        |    0
 src/translate/cli/login.readme.md             |    2 +-
 src/translate/cli/logout.readme.md            |    2 +-
 src/translate/cli/repair.readme.md            |    2 +-
 src/translate/cli/serve.json                  |    2 +-
 src/translate/cli/serve.readme.md             |    4 +-
 src/translate/cli/signup.readme.md            |    2 +-
 src/translate/cli/ssh-setup.readme.md         |    2 +-
 src/translate/cli/ssh-use.readme.md           |    2 +-
 src/translate/cli/ssl-generate.readme.md      |    2 +-
 src/translate/cli/start.readme.md             |    2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |    1 +
 ...awesome-cordova-plugins-actsheet.readme.md |    1 +
 .../@awesome-cordova-plugins-adjust.readme.md |    1 +
 ...esome-cordova-plugins-admob-free.readme.md |    1 +
 ...esome-cordova-plugins-admob-plus.readme.md |    1 +
 .../@awesome-cordova-plugins-admob.readme.md  |    2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |    1 +
 .../@awesome-cordova-plugins-alipay.readme.md |    1 +
 ...e-cordova-plugins-all-in-one-sdk.readme.md |    1 +
 ...rdova-plugins-analytics-firebase.readme.md |    1 +
 ...ordova-plugins-android-exoplayer.readme.md |    1 +
 ...dova-plugins-android-full-screen.readme.md |    3 +-
 ...me-cordova-plugins-android-notch.readme.md |    1 +
 ...dova-plugins-android-permissions.readme.md |    1 +
 ...@awesome-cordova-plugins-anyline.readme.md |    1 +
 ...cordova-plugins-app-availability.readme.md |    1 +
 ...ova-plugins-app-center-analytics.readme.md |    1 +
 ...rdova-plugins-app-center-crashes.readme.md |    1 +
 ...va-plugins-app-center-low-memory.readme.md |    1 +
 ...-cordova-plugins-app-center-push.readme.md |    2 +
 ...ome-cordova-plugins-app-launcher.readme.md |    1 +
 ...ome-cordova-plugins-app-minimize.readme.md |    1 +
 ...-cordova-plugins-app-preferences.readme.md |    1 +
 ...awesome-cordova-plugins-app-rate.readme.md |    1 +
 ...some-cordova-plugins-app-version.readme.md |    1 +
 ...wesome-cordova-plugins-apple-pay.readme.md |    1 +
 ...ome-cordova-plugins-apple-wallet.readme.md |    1 +
 ...awesome-cordova-plugins-appodeal.readme.md |    1 +
 ...wesome-cordova-plugins-appsflyer.readme.md |    1 +
 ...cordova-plugins-audio-management.readme.md |    1 +
 ...wesome-cordova-plugins-autostart.readme.md |    1 +
 ...cordova-plugins-background-fetch.readme.md |    1 +
 ...a-plugins-background-geolocation.readme.md |    1 +
 ...-cordova-plugins-background-mode.readme.md |    3 +-
 ...ordova-plugins-background-upload.readme.md |    1 +
 ...wesome-cordova-plugins-backlight.readme.md |    1 +
 .../@awesome-cordova-plugins-badge.readme.md  |    1 +
 ...esome-cordova-plugins-baidu-push.readme.md |    1 +
 ...-cordova-plugins-barcode-scanner.readme.md |    1 +
 ...ordova-plugins-base64-to-gallery.readme.md |    2 +-
 .../@awesome-cordova-plugins-base64.readme.md |    1 +
 ...e-cordova-plugins-battery-status.readme.md |    1 +
 ...awesome-cordova-plugins-biocatch.readme.md |    1 +
 ...ordova-plugins-biometric-wrapper.readme.md |    1 +
 .../@awesome-cordova-plugins-ble.readme.md    |    1 +
 ...@awesome-cordova-plugins-blinkid.readme.md |    1 +
 ...@awesome-cordova-plugins-blinkup.readme.md |    1 +
 ...ns-bluetooth-classic-serial-port.readme.md |    2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |    1 +
 ...cordova-plugins-bluetooth-serial.readme.md |    2 +-
 ...wesome-cordova-plugins-braintree.readme.md |    5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |    1 +
 ...esome-cordova-plugins-brightness.readme.md |    1 +
 ...some-cordova-plugins-broadcaster.readme.md |    1 +
 ...some-cordova-plugins-browser-tab.readme.md |    1 +
 ...esome-cordova-plugins-build-info.readme.md |    1 +
 ...awesome-cordova-plugins-calendar.readme.md |    2 +
 ...e-cordova-plugins-call-directory.readme.md |    1 +
 ...awesome-cordova-plugins-call-log.readme.md |    1 +
 ...some-cordova-plugins-call-number.readme.md |    1 +
 ...e-cordova-plugins-camera-preview.readme.md |    1 +
 .../@awesome-cordova-plugins-camera.readme.md |    3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |    2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |    1 +
 ...wesome-cordova-plugins-clevertap.readme.md |    1 +
 ...wesome-cordova-plugins-clipboard.readme.md |    2 +
 ...e-cordova-plugins-cloud-settings.readme.md |    1 +
 ...wesome-cordova-plugins-clover-go.readme.md |    1 +
 ...wesome-cordova-plugins-code-push.readme.md |    1 +
 ...ova-plugins-colored-browser-tabs.readme.md |    1 +
 ...awesome-cordova-plugins-contacts.readme.md |    1 +
 ...e-cordova-plugins-couchbase-lite.readme.md |    1 +
 .../@awesome-cordova-plugins-crop.readme.md   |    2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |    1 +
 ...some-cordova-plugins-date-picker.readme.md |    1 +
 ...awesome-cordova-plugins-db-meter.readme.md |    2 +-
 ...-cordova-plugins-device-accounts.readme.md |    1 +
 ...-cordova-plugins-device-feedback.readme.md |    2 +
 ...me-cordova-plugins-device-motion.readme.md |    1 +
 ...rdova-plugins-device-orientation.readme.md |    1 +
 .../@awesome-cordova-plugins-device.readme.md |    1 +
 ...esome-cordova-plugins-dfu-update.readme.md |    1 +
 ...esome-cordova-plugins-diagnostic.readme.md |    1 +
 ...@awesome-cordova-plugins-dialogs.readme.md |    1 +
 ...-cordova-plugins-document-picker.readme.md |    2 +
 ...cordova-plugins-document-scanner.readme.md |    1 +
 ...-cordova-plugins-document-viewer.readme.md |    3 +-
 ...esome-cordova-plugins-downloader.readme.md |    2 +
 ...e-cordova-plugins-email-composer.readme.md |    3 +
 ...e-cordova-plugins-emm-app-config.readme.md |    2 +
 ...cordova-plugins-estimote-beacons.readme.md |    1 +
 ...gins-extended-device-information.readme.md |   10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |    1 +
 ...awesome-cordova-plugins-facebook.readme.md |    8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |    1 +
 ...ome-cordova-plugins-file-chooser.readme.md |    2 +
 ...-cordova-plugins-file-encryption.readme.md |    1 +
 ...some-cordova-plugins-file-opener.readme.md |    1 +
 ...wesome-cordova-plugins-file-path.readme.md |    2 +
 ...some-cordova-plugins-file-picker.readme.md |    2 +
 ...me-cordova-plugins-file-transfer.readme.md |    1 +
 .../@awesome-cordova-plugins-file.readme.md   |   12 +-
 ...rdova-plugins-firebase-analytics.readme.md |    5 +-
 ...-plugins-firebase-authentication.readme.md |    1 +
 ...-cordova-plugins-firebase-config.readme.md |    1 +
 ...e-cordova-plugins-firebase-crash.readme.md |    1 +
 ...ova-plugins-firebase-crashlytics.readme.md |    1 +
 ...a-plugins-firebase-dynamic-links.readme.md |    4 +-
 ...rdova-plugins-firebase-messaging.readme.md |    1 +
 ...-cordova-plugins-firebase-vision.readme.md |    1 +
 ...esome-cordova-plugins-firebase-x.readme.md |    1 +
 ...awesome-cordova-plugins-firebase.readme.md |    1 +
 ...cordova-plugins-flurry-analytics.readme.md |    1 +
 ...rdova-plugins-foreground-service.readme.md |    5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |    1 +
 ...ordova-plugins-full-screen-image.readme.md |    1 +
 ...-cordova-plugins-gao-de-location.readme.md |    1 +
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |    1 +
 ...awesome-cordova-plugins-geofence.readme.md |    2 +-
 ...some-cordova-plugins-geolocation.readme.md |    5 +-
 ...me-cordova-plugins-globalization.readme.md |    1 +
 ...cordova-plugins-google-analytics.readme.md |    4 +-
 ...me-cordova-plugins-google-nearby.readme.md |    1 +
 ...ugins-google-play-games-services.readme.md |    1 +
 ...wesome-cordova-plugins-gyroscope.readme.md |    2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |    1 +
 ...ome-cordova-plugins-header-color.readme.md |    1 +
 ...esome-cordova-plugins-health-kit.readme.md |    1 +
 .../@awesome-cordova-plugins-health.readme.md |    1 +
 ...@awesome-cordova-plugins-hotspot.readme.md |    1 +
 .../@awesome-cordova-plugins-http.readme.md   |    2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |    3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |    1 +
 ...@awesome-cordova-plugins-ibeacon.readme.md |    3 +-
 ...ome-cordova-plugins-image-picker.readme.md |    1 +
 ...me-cordova-plugins-image-resizer.readme.md |    1 +
 .../@awesome-cordova-plugins-imap.readme.md   |    1 +
 ...e-cordova-plugins-in-app-browser.readme.md |    2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |   35 +-
 ...-cordova-plugins-in-app-purchase.readme.md |    1 +
 ...me-cordova-plugins-in-app-review.readme.md |    2 +
 ...ordova-plugins-index-app-content.readme.md |    1 +
 ...awesome-cordova-plugins-insomnia.readme.md |    1 +
 ...e-cordova-plugins-intel-security.readme.md |    2 +-
 ...awesome-cordova-plugins-intercom.readme.md |    1 +
 ...me-cordova-plugins-ionic-webview.readme.md |    1 +
 ...s-ios-aswebauthenticationsessapi.readme.md |    1 +
 ...awesome-cordova-plugins-is-debug.readme.md |    1 +
 ...esome-cordova-plugins-janalytics.readme.md |    1 +
 ...wesome-cordova-plugins-jins-meme.readme.md |    1 +
 .../@awesome-cordova-plugins-jumio.readme.md  |    2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |    1 +
 ...ordova-plugins-keychain-touch-id.readme.md |    1 +
 ...awesome-cordova-plugins-keychain.readme.md |    1 +
 ...some-cordova-plugins-kommunicate.readme.md |    1 +
 ...awesome-cordova-plugins-last-cam.readme.md |    1 +
 ...cordova-plugins-launch-navigator.readme.md |    1 +
 ...me-cordova-plugins-launch-review.readme.md |    3 +-
 ...esome-cordova-plugins-line-login.readme.md |    1 +
 ...ome-cordova-plugins-local-backup.readme.md |    1 +
 ...dova-plugins-local-notifications.readme.md |    1 +
 ...me-cordova-plugins-locataccuracy.readme.md |    1 +
 ...ova-plugins-lottie-splash-screen.readme.md |    1 +
 .../@awesome-cordova-plugins-luxand.readme.md |    1 +
 ...ome-cordova-plugins-magnetometer.readme.md |    1 +
 .../@awesome-cordova-plugins-market.readme.md |    1 +
 ...me-cordova-plugins-media-capture.readme.md |    1 +
 .../@awesome-cordova-plugins-media.readme.md  |    1 +
 .../@awesome-cordova-plugins-metrix.readme.md |    1 +
 ...awesome-cordova-plugins-mixpanel.readme.md |    1 +
 ...-cordova-plugins-mlkit-translate.readme.md |    1 +
 ...ova-plugins-mobile-accessibility.readme.md |    1 +
 ...cordova-plugins-mobile-messaging.readme.md |    1 +
 ...@awesome-cordova-plugins-ms-adal.readme.md |    3 +-
 ...plugins-multiple-document-picker.readme.md |    1 +
 ...e-cordova-plugins-music-controls.readme.md |    1 +
 ...ome-cordova-plugins-native-audio.readme.md |    2 +-
 ...-cordova-plugins-native-geocoder.readme.md |    1 +
 ...-cordova-plugins-native-keyboard.readme.md |    2 +
 ...-plugins-native-page-transitions.readme.md |    1 +
 ...cordova-plugins-native-ringtones.readme.md |    1 +
 ...esome-cordova-plugins-navigatbar.readme.md |    1 +
 ...ordova-plugins-network-interface.readme.md |    1 +
 ...@awesome-cordova-plugins-network.readme.md |    1 +
 .../@awesome-cordova-plugins-nfc.readme.md    |    2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |    3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |    6 +-
 ...ova-plugins-open-native-settings.readme.md |    3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |    1 +
 .../@awesome-cordova-plugins-paypal.readme.md |    1 +
 ...@awesome-cordova-plugins-paytabs.readme.md |    1 +
 ...me-cordova-plugins-pdf-generator.readme.md |    1 +
 ...wesome-cordova-plugins-pedometer.readme.md |    1 +
 ...gins-phonegap-local-notification.readme.md |    1 +
 ...me-cordova-plugins-photo-library.readme.md |    1 +
 ...ome-cordova-plugins-photo-viewer.readme.md |    2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |    1 +
 ...esome-cordova-plugins-pin-dialog.readme.md |    3 +
 ...wesome-cordova-plugins-pinterest.readme.md |    1 +
 ...awesome-cordova-plugins-pollfish.readme.md |    1 +
 ...cordova-plugins-power-management.readme.md |    1 +
 ...rdova-plugins-power-optimization.readme.md |    1 +
 ...@awesome-cordova-plugins-printer.readme.md |    2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |    1 +
 ...wesome-cordova-plugins-purchases.readme.md |    6 +-
 .../@awesome-cordova-plugins-push.readme.md   |    1 +
 ...ome-cordova-plugins-pushape-push.readme.md |    1 +
 .../@awesome-cordova-plugins-qqsdk.readme.md  |    1 +
 ...esome-cordova-plugins-qr-scanner.readme.md |    1 +
 ...a-plugins-regula-document-reader.readme.md |    1 +
 ...@awesome-cordova-plugins-restart.readme.md |    1 +
 ...@awesome-cordova-plugins-rollbar.readme.md |    1 +
 ...a-plugins-safari-view-controller.readme.md |    1 +
 ...rdova-plugins-screen-orientation.readme.md |    1 +
 ...esome-cordova-plugins-screenshot.readme.md |    2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |    1 +
 .../@awesome-cordova-plugins-serial.readme.md |    1 +
 ...ordova-plugins-service-discovery.readme.md |    1 +
 .../@awesome-cordova-plugins-shake.readme.md  |    2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |    1 +
 ...ordova-plugins-shortcuts-android.readme.md |    1 +
 ...rdova-plugins-sign-in-with-apple.readme.md |    3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |    1 +
 ...e-cordova-plugins-siri-shortcuts.readme.md |    1 +
 ...wesome-cordova-plugins-smartlook.readme.md |    1 +
 ...me-cordova-plugins-sms-retriever.readme.md |    1 +
 .../@awesome-cordova-plugins-sms.readme.md    |    2 +
 ...e-cordova-plugins-social-sharing.readme.md |    1 +
 ...rdova-plugins-speech-recognition.readme.md |    1 +
 ...wesome-cordova-plugins-speechkit.readme.md |    1 +
 ...e-cordova-plugins-spinner-dialog.readme.md |    1 +
 ...me-cordova-plugins-splash-screen.readme.md |    2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |    2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |    1 +
 ...me-cordova-plugins-sqlite-porter.readme.md |    1 +
 .../@awesome-cordova-plugins-sqlite.readme.md |    1 +
 ...some-cordova-plugins-ssh-connect.readme.md |    1 +
 ...wesome-cordova-plugins-star-prnt.readme.md |    3 +-
 ...esome-cordova-plugins-status-bar.readme.md |    1 +
 ...some-cordova-plugins-stepcounter.readme.md |    2 +-
 ...-cordova-plugins-streaming-media.readme.md |    1 +
 .../@awesome-cordova-plugins-stripe.readme.md |    1 +
 .../@awesome-cordova-plugins-sum-up.readme.md |    1 +
 ...s-system-alert-window-permission.readme.md |    1 +
 ...me-cordova-plugins-taptic-engine.readme.md |    1 +
 ...ova-plugins-tealium-adidentifier.readme.md |    1 +
 ...-plugins-tealium-installreferrer.readme.md |    1 +
 ...@awesome-cordova-plugins-tealium.readme.md |    3 +-
 ...-plugins-text-to-speech-advanced.readme.md |    1 +
 ...e-cordova-plugins-text-to-speech.readme.md |    1 +
 ...-cordova-plugins-theme-detection.readme.md |    1 +
 ...ordova-plugins-themeable-browser.readme.md |    1 +
 ...-cordova-plugins-three-dee-touch.readme.md |    1 +
 .../@awesome-cordova-plugins-toast.readme.md  |    1 +
 ...awesome-cordova-plugins-touch-id.readme.md |    1 +
 ...-cordova-plugins-twitter-connect.readme.md |    4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |    1 +
 ...cordova-plugins-unique-device-id.readme.md |    1 +
 ...dova-plugins-unvired-cordova-sdk.readme.md |   18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |    1 +
 ...ome-cordova-plugins-urbanairship.readme.md |    1 +
 ...ova-plugins-usabilla-cordova-sdk.readme.md |    1 +
 ...esome-cordova-plugins-user-agent.readme.md |    3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |    1 +
 ...wesome-cordova-plugins-vibration.readme.md |    2 +-
 ...rdova-plugins-video-capture-plus.readme.md |    2 +-
 ...ome-cordova-plugins-video-player.readme.md |    1 +
 ...esome-cordova-plugins-web-intent.readme.md |    3 +-
 ...esome-cordova-plugins-web-server.readme.md |    1 +
 ...ordova-plugins-web-socket-server.readme.md |    1 +
 ...wesome-cordova-plugins-webengage.readme.md |    1 +
 .../@awesome-cordova-plugins-wechat.readme.md |    1 +
 ...me-cordova-plugins-wifi-wizard-2.readme.md |    1 +
 ...esome-cordova-plugins-wonderpush.readme.md |    2 +
 ...ova-plugins-youtube-video-player.readme.md |    1 +
 .../@awesome-cordova-plugins-zbar.readme.md   |    1 +
 ...awesome-cordova-plugins-zeroconf.readme.md |    3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |    1 +
 .../@awesome-cordova-plugins-zoom.readme.md   |    1 +
 929 files changed, 35712 insertions(+), 904 deletions(-)
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/README.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/8-distribute.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/coc.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/how-to-contribute.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.mdx
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/courses.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/intro.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/theming.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/intro.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/posts.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overlays.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/storage.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/8-distribute.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/assets.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/code.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/designer.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/faq.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/routing-and-navigation.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/using-native-functionality.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/running.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/settings.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/native.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/start.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/support.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/terminal.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/theming.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page1.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page2.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/cors.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/debugging.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/8-distribute.md
 create mode 100644 src/translate/.detection/cli/live-update-add.json
 create mode 100644 src/translate/.detection/cli/live-update-add.readme.md
 create mode 100644 src/translate/.detection/cli/live-update-configure.json
 create mode 100644 src/translate/.detection/cli/live-update-configure.readme.md
 create mode 100644 src/translate/.detection/cli/live-update-manifest.json
 create mode 100644 src/translate/.detection/cli/live-update-manifest.readme.md
 create mode 100644 src/translate/cli/live-update-add.json
 create mode 100644 src/translate/cli/live-update-add.readme.md
 create mode 100644 src/translate/cli/live-update-configure.json
 create mode 100644 src/translate/cli/live-update-configure.readme.md
 create mode 100644 src/translate/cli/live-update-manifest.json
 create mode 100644 src/translate/cli/live-update-manifest.readme.md

diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/README.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/README.md
new file mode 100644
index 00000000000..2da29748116
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
new file mode 100644
index 00000000000..2e4f4afa24f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
@@ -0,0 +1,103 @@
+---
+title: Ionic PageのLife Cycle
+sidebar_label: ライフサイクル
+---
+
+<head>
+  <title>AngularのページコンポーネントのLife Cycle - すべてのイベントのドキュメンテーション</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>
+
+このガイドでは、IonicとAngularを使用して構築されたアプリでのPage Life Cycleのしくみについて説明します。（追記：Life Cycleとは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントをLife Cycle Eventsといいます）
+
+![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png)
+
+## AngularのLife Cycle Events
+
+IonicはAngularが提供するLife Cycle Eventsを取り入れています。最もよく使う2つのAngularイベントは次のとおりです。
+
+| Event Name    | Description                                                                                                                                                 |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要があるServiceを呼び出すことができます。 |
+| `ngOnDestroy`  | Angularがビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 |
+
+AngularのComponent Life Cycleイベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。
+
+:::note
+`ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。
+:::
+
+## IonicのPage Events
+
+AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能ないくつかの追加イベントがあります:
+
+| Event Name         | Description                                                        |
+| ------------------ | ------------------------------------------------------------------ |
+| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
+| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
+
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+
+`ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。
+
+`ionViewWillLeave` と `ionViewDidLeave` についてですが、 `ionViewWillLeave` は現在のページから離脱する処理がはじまる前に呼び出されますが、 `ionViewDidLeave` は新しいページに遷移する処理が成功してから呼び出されます (新しいページの `ionViewDidEnter` が発火した後になります)。
+
+![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif)
+
+## IonicがPageのLifeをどのように処理するか
+
+Ionic は `<ion-router-outlet />` という router outlet を持っています。この outlet が Angularの `<router-outlet />` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。
+
+`<ion-router-outlet />` にアプリがラップされることで、Ionicはナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionicは古いページを既存のDOMに残しますが、ビューから隠して新しいページに移行します。これを行う理由は2つあります:
+
+1) 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。
+2) ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。
+
+たとえば、UIの "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページはDOMから削除されるだけとなります。
+
+この特別な処理のために、`ngOnInit` と `ngOnDestroy` のメソッドは通常そうあるべきだと思うときには発火しないかもしれません。
+
+`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の1回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。
+
+## ルートガード
+
+Ionic 3では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。
+
+これらの方法は、Angularのルートガードを使用するためにIonic 4で削除されました。
+
+ルートガードは、ルートに対して特定のアクションを実行できるかどうかを判断するのに役立ちます。それらは特定のインターフェースを実装するクラスです。`CanActive` と `CanDeactivate` のインターフェイスは、`ionViewCanEnter` と `ionViewCanLeave` と同様のロジックでイベントを削除することができます。
+
+```tsx
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    return this.authService.isAuthenticated();
+  }
+}
+```
+
+このガードを使用するには、それをルート定義の適切なパラメータに追加します:
+
+```tsx
+{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }
+```
+
+ルートガードの使い方の詳細については、Angularの [router documentation](https://angular.jp/guide/router) を参照してください。
+
+## Life Cycleメソッドのガイダンス
+
+以下は、life cycle eventsごとのユースケースに関するヒントです。
+
+- `ngOnInit` - コンポーネントを初期化し、Serviceからアクセスごとに更新する必要がないデータをロードします。
+- `ionViewWillEnter` - `ionViewWillEnter` はViewがナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Serviceからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量のDOM操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
+- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Pageがユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
+- `ionViewWillLeave` - observablesのunsubscribingのように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
+- `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
+- `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
new file mode 100644
index 00000000000..1fd76d76af8
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
@@ -0,0 +1,502 @@
+---
+title: Angular ナビゲーション
+sidebar_label: ナビゲーション/ルーティング
+---
+
+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>
+
+このガイドでは、IonicとAngularを使用して構築されたアプリでのルーティングのしくみについて説明します。
+
+
+Angular Routerは、Angularアプリケーションで最も重要なライブラリの1つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Routerを使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionicと組み合わせると！）。Angular Routerの基本と、それをIonicアプリケーション用に設定する方法を見てみましょう。
+
+## シンプルなRoute
+
+ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります：
+
+```tsx
+
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+  ...
+  RouterModule.forRoot([
+    { path: '', component: LoginComponent },
+    { path: 'detail', component: DetailComponent },
+  ])
+  ],
+})
+```
+
+URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしているURLを読むことで動作を開始します。私たちのサンプルでは、Routeは `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべてのRouteのエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？
+
+## リダイレクトの処理
+
+そういう場合には、ルーターリダイレクトを使用できます。リダイレクトは通常のルートオブジェクトと同じように書くことができますが、いくつかの異なるキーが含まれます。
+
+```tsx
+[
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
+  { path: 'detail', component: DetailComponent },
+];
+```
+
+このリダイレクトでは、アプリのインデックス（`''`）を探しはじめると、`login` にリダイレクトします。最後の `pathMatch` キーは、ルータにパスの検索方法を指示するために必要です。
+
+`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致するpathがなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。
+
+```tsx
+{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },
+{ path: 'login', component: LoginComponent },
+```
+
+このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべてのpathが一致しないのでリダイレクトを行いません。
+
+あるいは、こういう書き方もできます:
+
+```tsx
+{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' },
+{ path: 'login', component: LoginComponent },
+```
+
+`/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。
+
+## routesへのナビゲーション
+
+routesについて説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directiveを利用します。先ほどの簡単なrouter設定でこれを確認してみましょう:
+
+```ts
+RouterModule.forRoot([
+  { path: '', component: LoginComponent },
+  { path: 'detail', component: DetailComponent },
+]);
+```
+
+わたしたちは、次のHTMLを利用することで、`LoginComponent` から `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>
+```
+
+ここで重要なのは`ion-button` と `routerLink` directiveです。RouterLinkは典型的な `href` と同様の考えで動作しますが、URLを文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。
+
+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'])
+  }
+}
+```
+
+どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。
+
+:::note
+相対URLを使用したナビゲーションに関するメモ：現在、複数のナビゲーションスタックをサポートするために、相対URLはサポートされていません。
+:::
+
+### 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
+
+現在のルート設定では、すべてのComponentが、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
+
+```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) }
+  ])
+  ],
+})
+```
+
+`loadChildren` プロパティはコンポーネントの代わりにネイティブインポートを直接仕様してモジュールを参照する方法です。ただしこれを行うには、コンポーネントごとにモジュールを作成する必要があります。
+
+```tsx
+...
+import { RouterModule } from '@angular/router';
+import { LoginComponent } from './login.component';
+
+@NgModule({
+  imports: [
+  ...
+  RouterModule.forChild([
+    { path: '', component: LoginComponent },
+  ])
+  ],
+})
+```
+
+:::note
+一部のコードを省略して紹介しています
+:::
+
+ここでは、`RouterModule` のインポートとともに、典型的な `Angular Module` の設定がありますが、`RouterModule` では `forChild` によってコンポーネントを使用することを宣言しています。この設定では、ビルドを実行するときに、`App Component`（Root）、 `login Component` 、および `detail Component` において別々のチャンクを作成します。
+
+## Standalone Components
+
+:::caution Experimental API
+
+Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable.
+
+:::
+
+Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module.
+
+To use standalone components with routing and Ionic Framework, you must first be on Ionic ^6.3.0. The experimental API requires developers to assign the `EnvironmentInjector` instance for each router outlet (`ion-router-outlet` and `ion-tabs`) that uses standalone component routing.
+
+```ts title="app.component.ts"
+import { Component, EnvironmentInjector } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: 'app.component.html',
+})
+export class AppComponent {
+  constructor(public environmentInjector: EnvironmentInjector) {}
+}
+```
+
+```html title="app.component.html"
+<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+<!-- or if you are using ion-tabs -->
+<ion-tabs [environmentInjector]="environmentInjector"> ... </ion-tabs>
+```
+
+Developers can use the existing syntax for standalone component routing from Angular:
+
+```ts
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: 'standalone-route',
+        loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent),
+      },
+    ]),
+  ],
+})
+export class AppRoutingModule {}
+```
+
+To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).
+
+## 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
+
+タブを使用すると、Angular Routerにどのコンポーネントをロードする必要があるかを知るためのメカニズムをIonicが提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。
+
+```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',
+  },
+];
+```
+
+ここでは、 `tabs` パスを読み込んでいます。この例では、pathを `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabsのマークアップは、次のとおりです:
+
+```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>
+```
+
+Ionicを使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `<ion-tab>` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定はRouterの設定によって行えるようになりました。
+
+### 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
new file mode 100644
index 00000000000..f7e37efb4f8
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
@@ -0,0 +1,42 @@
+---
+title: Ionic Angular の概要
+sidebar_label: 概要
+---
+
+<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>
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+`@ionic/angular` はcore Ionic experienceに、Angular開発者向けにカスタマイズされたツールとAPIを組み合わせたものです。
+
+## Angularバージョンサポート
+
+Ionic v7はAngular v14+をサポートしています。アップグレード戦略の一環として、Angularにはアップグレードを自動化するためのツールが組み込まれており、APIに変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。
+
+## Angular Tooling
+
+Ionic4以降では、アプリケーション構築とルーティングのために公式のAngularスタックが使用されているため、あなたのアプリケーションはAngularエコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionicは`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。
+
+## 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 Angular 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md
new file mode 100644
index 00000000000..cf441e2adfc
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md
@@ -0,0 +1,69 @@
+---
+title: Angularのパフォーマンス
+sidebar_label: パフォーマンス
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
new file mode 100644
index 00000000000..5b872bc9753
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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>
+
+プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Androidなど）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。
+
+## 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
+
+以下は、利用可能なすべての platform の値とそれに対応する説明をまとめた表です。
+
+| 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](../developing/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`
+
+`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitorアプリケーションがバックグラウンドに置かれたときに発生しますが、標準的なWebブラウザでは発生しません。
+
+#### Examples
+
+```tsx
+this.platform.pause.subscribe(async () => {
+  alert('Pause event detected');
+});
+```
+
+### `resize`
+
+`resize` イベントは、ブラウザウィンドウの寸法が変更されたときに発生します。これは、ブラウザーウィンドウが物理的にサイズ変更されている場合や、デバイスの向きが変わっている場合に発生します。
+
+#### Examples
+
+```tsx
+this.platform.resize.subscribe(async () => {
+  alert('Resize event detected');
+});
+```
+
+### `resume`
+
+`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitorアプリがバックグラウンドから出てきても、標準的なWebブラウザで起動しない場合に発生します。
+
+#### Examples
+
+```tsx
+this.platform.resume.subscribe(async () => {
+  alert('Resume event detected');
+});
+```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md
new file mode 100644
index 00000000000..9f915668dfa
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md
@@ -0,0 +1,152 @@
+---
+title: AngularでのPWA
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
new file mode 100644
index 00000000000..e9ffe1b23f8
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
@@ -0,0 +1,335 @@
+---
+title: Migrating from ion-slides to Swiper.js
+---
+
+<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. Swiper 9 introduced <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element.
+
+## 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@latest
+```
+
+Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper.
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+  schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
+});
+...
+```
+
+Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`.
+
+```typescript
+import { register } from 'swiper/element/bundle';
+
+register();
+
+@Component({
+  ...
+})
+...
+```
+
+From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own.
+
+```html
+<swiper-container>
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
+```
+
+## Bundled vs. Core Versions
+
+By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features.
+
+If you would like to use the Core version instead, which does not include additional modules automatically, see <a href="https://swiperjs.com/element#core-version-and-modules" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#core-version-and-modules</a>. The rest of this migration guide will assume you are using the bundled version.
+
+## Swiping with Style
+
+To migrate over your CSS, first update your selectors to target the new custom elements instead:
+
+| ion-slides Selector | Swiper Selector    |
+| ------------------- | ------------------ | 
+| `ion-slides`        | `swiper-container` |
+| `ion-slide`         | `swiper-slide`     |
+
+If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper.
+
+| `ion-slides` CSS property          | `swiper-container` CSS property             |
+| ---------------------------------- | ------------------------------------------- |
+| `--bullet-background`              | `--swiper-pagination-bullet-inactive-color` |
+| `--bullet-background-active`       | `--swiper-pagination-color`                 |
+| `--progress-bar-background`        | `--swiper-pagination-progressbar-bg-color`  |
+| `--progress-bar-background-active` | `--swiper-pagination-color`                 |
+| `--scroll-bar-background`          | `--swiper-scrollbar-bg-color`               |
+| `--scroll-bar-background-active`   | `--swiper-scrollbar-drag-bg-color`          |
+
+For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
+
+### Additional `ion-slides` Styles
+
+The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`:
+
+```css
+swiper-container {
+  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+  --swiper-pagination-color: var(--ion-color-primary, #3880ff);
+  --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
+  --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+  --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+}
+
+swiper-slide {
+  display: flex;
+  position: relative;
+
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  font-size: 18px;
+
+  text-align: center;
+  box-sizing: border-box;
+}
+
+swiper-slide img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
+```
+
+## 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. However, using this module is **not** required to use Swiper.js in Ionic.
+
+We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array:
+
+```typescript
+// home.page.ts
+
+import { IonicSlides } from '@ionic/angular';
+
+@Component({
+  ...
+})
+export class HomePage {
+  swiperModules = [IonicSlides];
+}
+```
+
+```html
+<!-- home.page.html -->
+
+<swiper-container [modules]="swiperModules">
+  ...
+</swiper-container>
+```
+
+:::note
+If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is 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 should be provided as individual properties directly on the `<swiper-container>` component.
+
+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-container>` we would do the following:
+
+```html
+<swiper-container [slidesPerView]="3" [loop]="true">
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
+```
+
+Below is a full list of property changes when going from `ion-slides` to Swiper Element:
+
+| Name      | Notes                                                                                                                                   |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager     | Use the `pagination` property instead.                                                                                                  |
+
+:::note
+All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
+:::
+
+## Events
+
+Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase.
+
+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-container (slidechange)="onSlideChange()">
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
+```
+
+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 Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
+:::
+
+## Methods
+
+Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `<swiper-container>` element (such as through `ViewChild`), then access its `swiper` prop:
+
+```html
+<!-- slides.component.html -->
+
+<swiper-container #swiper>
+  <swiper-slide>Slide 1</swiper-slide>
+  <swiper-slide>Slide 2</swiper-slide>
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
+```
+
+```typescript
+// slides.component.ts
+
+import { ..., ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  ...
+})
+export class SlidesExample {
+  @ViewChild('swiper')
+  swiperRef: ElementRef | undefined;
+
+  logActiveIndex() {
+    console.log(this.swiperRef?.nativeElement.swiper.activeIndex);
+  }
+}
+```
+
+Below is a full list of method changes when going from `ion-slides` to Swiper Element:
+
+| 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 the `swiper` prop. See example above.   |
+| isBeginning()      | Use the `isBeginning` property instead.                                              |
+| isEnd()            | Use the `isEnd` property instead.                                                    |
+| length()           | Use the `slides` property instead. (i.e swiper.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.                                                 |
+
+:::note
+All methods and properties available on the Swiper instance can be found at <a href="https://swiperjs.com/swiper-api#methods-and-properties" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#methods-and-properties</a>.
+:::
+
+## Effects
+
+Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
+
+```html
+<swiper-container effect="flip">
+  ...
+</swiper-container>
+```
+
+:::note
+For more information on effects in Swiper, please see <a href="https://swiperjs.com/swiper-api#fade-effect" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#fade-effect</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/element" target="_blank" rel="noopener noreferrer">Swiper Element documentation</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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
new file mode 100644
index 00000000000..2a7397d7f99
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
@@ -0,0 +1,32 @@
+---
+title: データストレージ
+sidebar_label: ストレージ
+---
+
+<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>
+
+Ionicアプリ内にデータを保存するためのさまざまなオプションを用意しています。
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
new file mode 100644
index 00000000000..60406db92d5
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
@@ -0,0 +1,595 @@
+---
+title: テスト
+---
+
+<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>
+
+Ionic CLI を使用して `@ionic/angular` アプリケーションを生成すると、アプリケーションのユニットテストとエンドツーエンドのテスト用に自動的に準備されます。これは Angular CLI で使われる設定と同じものです。Angular で作られたアプリケーションのテストについての詳細は <a href="https://angular.jp/guide/testing" target="_blank">Angular Testing Guide</a> をご参照ください。
+
+## テストの原則
+
+アプリケーションをテストするときは、テストによってシステムに欠陥があるかどうかを確認できる、ということを覚えておくことが一番です。しかし、どんなささいなシステムも完全に欠陥のないことを証明することは不可能です。このため、テストの目的はコードが正しいことを確認することではなく、コードの中の問題を見つけることです。これは微妙ですが、重要な違いです。
+
+もし私たちがコードが正しいことを証明しようとするのであれば、私たちはコードを通じて幸せな道を歩み続けようとするでしょう。もし私が問題の発見しようとするのであれば、コードをより完全に実行し、そこに潜むバグを発見する可能性が高くなります。
+
+最初からアプリケーションのテストを開始することも最良です。これにより、修正が容易な段階で早期に欠陥を発見できます。またこれにより、システムに新しい機能が追加されたときに、コードを確実にリファクタリングすることもできます。
+
+## ユニットテスト
+
+ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipeなど）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。
+
+適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。
+
+ユニットテストはコードを分離して実行するため、高速で堅牢であり、高度なコードカバレッジが可能です。
+
+### モックの利用
+
+ユニットテストでは、コードをコードをモジュールで分離して実行します。これを簡単にするには、Jasmine(https://jasmine.github.io/) を使用することをお勧めします。Jasmine は、テスト実行中に依存関係の代わりにモックオブジェクト(Jasmine は 「スパイ」 と呼んでいます)を作成します。モックオブジェクトを使用すると、テストはその依存関係への呼び出しによって返される値を制御できるため、依存関係に加えられた変更から現在のテストを独立させることができます。これにより、テストのセットアップも簡単になり、テスト対象のモジュール内のコードだけをテストすることができます。
+
+モックを使用すると、モックが呼び出されたかどうか、および `toHaveBeenCalled*` セットの関数を介してどのように呼び出されたかを判断するために、テストでモックを確認することもできます。これらの関数では、メソッドが呼び出されたことをテストするときに、`toHaveBeenCalled` メソッドの呼び出しよりも `toHaveBeenCalledTimes` の呼び出しを優先して、テストをできるだけ具体的に行う必要があります。つまり、`expect(mock.foo).toHaveBeenCalledTimes(1)` は `expect(mock.foo).toHaveBeenCalled()` よりも優れています。何かが呼ばれていないこと（`expect(mock.foo).not.toHaveBeenCalled()`）をテストする際は、逆のアドバイスに従うべきです。
+
+Jasmine でモックオブジェクトを作成する一般的な方法は2つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。
+
+### `jasmine.createSpy` と `jasmine.createSpyObj` の利用
+
+`jasmine.createSpyObj` は、作成時に定義された一連のモックメソッドを使用して、完全なモックオブジェクトをスクラッチで作成します。これはとてもシンプルで便利です。テストのために何かを組み立てたり注入したりする必要はありません。この関数の使用する欠点は、実際のオブジェクトと一致しないオブジェクトを生成できることです。
+
+`jasmine.createSpy` も似ていますが、スタンドアロンのモック関数を作成します。
+
+#### `spyOn()` と `spyOnProperty()` の利用
+
+`spyOn()` は、既存のオブジェクトにスパイをインストールします。この手法を使用する利点は、オブジェクト上に存在しないメソッドをスパイしようとすると、例外が発生することです。これにより、テストが存在しないメソッドをモックすることを防ぎます。欠点は、テストが最初から完全に整形されたオブジェクトを必要とすることであり、これはテストに必要なセットアップの量を増加させるかと思います。
+
+`spyOnProperty()` は似ていますが、メソッドではなくプロパティに対してスパイするという点で異なります。
+
+### 一般的なテストの構成
+
+ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに1つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。
+
+`spec` ファイル自体には、そのテスト全体を定義するただ一つの `describe` コールが含まれています。その中には、主要な機能領域を定義する他の `describe` コールがネストされています。各 `describe` コールには、setup コードと teardown コード（一般的に `beforeEach` と `afterEach` コールによって処理される）、機能を階層的に分解した `describe` コール、また個々のテストケースを定義する `it` コールが含まれます。
+
+`describe` と `it` コールには、説明のテキストラベルも含まれます。適切な形式のテストでは、`describe` と `it` をコールすると、ラベルと組み合わせた適切なフレーズが実行され、各テストケースのすべてのラベルが `describe` と `it` ラベルを組み合わせて構成され、完全な文が作成されます。
+
+例:
+
+```tsx
+describe('Calculation', () => {
+  describe('divide', () => {
+    it('calculates 4 / 2 properly' () => {});
+    it('cowardly refuses to divide by zero' () => {});
+    ...
+  });
+
+  describe('multiply', () => {
+    ...
+  });
+});
+```
+
+外側の `describe` コールは  `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。
+
+### ページとコンポーネント
+
+Pages は単なる Angular コンポーネントです。そのため、ページとコンポーネントは両方とも <a href="https://angular.jp/guide/testing#コンポーネントテストの基本">Angular のコンポーネントテストガイドライン</a> を使ってテストされます。
+
+ページとコンポーネントには TypeScript コードと HTML テンプレートマークアップの両方が含まれているため、コンポーネントクラスのテストとコンポーネント DOM のテストの両方を実行できます。ページが作成されると、生成されるテンプレートテストは次のようになります:
+
+```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();
+  });
+});
+```
+
+コンポーネントクラスのテストを行う場合、コンポーネントオブジェクトは `component=fixture.componentInstance;` によって定義されたコンポーネントオブジェクトを使用してアクセスされます。これはコンポーネントクラスのインスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが使用されます。これはコンポーネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの標準の HTML API メソッドを使うことを可能にします。
+
+## Service
+
+Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主にHTTP操作やデータ操作を実行するデータの service の2つの大まかなカテゴリーのいずれかに分類されます。
+
+### 基本的な Service のテスト
+
+ほとんどの service をテストするために推奨する方法は、service をインスタンス化し、service が持つ依存関係のモックを手動で注入することです。こうすることで、コードを分離してテストすることができます。
+
+たとえば、タイムカードの配列を取得して差引支給額を計算するメソッドを持つ service があるとします。また税金計算は、現在の service が依存しているもう一つの service を介して処理されるとします。この給与計算の service は、このようにテストすることができます:
+
+```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', () => {
+     ...
+   });
+});
+```
+
+これにより、テストでは `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)` などのモックの設定を介して様々な税金計算から戻される値を制御できます。これにより、「差引支給額」のテストを税金計算ロジックから独立させることができます。税金のコードが変更された場合、修正する必要があるのは税金 service 関連のコードとテストのみです。差引支給額のテストは、税金がどのように計算されるかを考慮せず、値が適切に適用されるのみであるため、そのまま機能し続けることができます。
+
+`ionic g service name` で service を生成するときに使われる scaffold は Angular のテストユーティリティを使ってテストモジュールをセットアップします。必ずしもそうする必要はありません。ただし、このコードを残しておくことで、手動でサービスを構築したり、次のように注入したりすることができます:
+
+```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();
+  });
+});
+```
+
+#### HTTP データ Service のテスト
+
+HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは <a href="https://angular.jp/guide/http#testing-http-requests" target="_blank">Angular の HTTPリクエストをテストする</a> のガイドを参照してください。
+
+このようなテストの基本的な設定は次のようになります:
+
+```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();
+    });
+  });
+});
+```
+
+### Pipe
+
+pipe は、特別に定義されたインタフェースを持つ service のようなものです。このクラスには、入力値(およびその他のオプションの引数)を操作してページにレンダリングされる出力を作成するための public メソッド `transform` が含まれています。パイプをテストするには、パイプをインスタンス化し、transform メソッドを呼び出して結果を検証します。
+
+簡単な例として、`Person` オブジェクトを受け取り、名前をフォーマットする pipe を見てみましょう。簡単にするために、`Person` は `id`、`firstName`、`lastName`、`middleInitial` で構成されるとします。パイプの要件は、名・姓・ミドルネームのいずれかが存在しない場合に、名前を「性、名 M(ミドルネーム)。」として出力することです。このようなテストは次のようになります:
+
+```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.');
+  });
+});
+```
+
+また、pipe を利用するコンポーネントおよびページでの DOM テストを介して pipe を実行することも有益です。
+
+## エンドツーエンドテスト
+
+エンドツーエンドのテストは、アプリケーションが全体として機能し、多くの場合、ライブデータへの接続を含むことを検証するために使用されます。一方で、ユニットテストは分離されたコードユニットに重点を置いているため、アプリケーションロジックの低レベルのテストが可能ですが、エンドツーエンドテストはさまざまなユーザーストーリーや使用・シナリオに重点を置いており、アプリケーション全体を通したデータフローの総合的な高レベルのテストを提供します。また一方で、ユニットテストではアプリケーションのロジックの問題を明らかにしようとしますが、エンドツーエンドテストでは、個々のユニットが一緒に使用される場合に発生する問題を明らかにしようとします。エンドツーエンドのテストにより、アプリケーションの全体的なアーキテクチャに関する問題が明らかになります。
+
+エンドツーエンドテストはユーザーストーリーを実行し、個々のコードモジュールではなくアプリケーション全体を対象とするため、エンドツーエンドテストは、メインアプリケーション自体のコードとは別に、プロジェクト内の独自のアプリケーションとして存在します。ほとんどのエンドツーエンドテストは、アプリケーションとの共通のユーザー対話を自動化し、それらの対話の結果を判別するために DOM を調査します。
+
+### テストの構成
+
+`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは <a href="https://www.protractortest.org/" target="_blank">Protractor</a> を使用してブラウザを制御し、<a href="https://jasmine.github.io/" target="_blank">Jasmine</a> を使用してテストを構築し、実行します。アプリケーションは、初期時は次の4つのファイルで構成されています:
+
+- `protractor.conf.js` - Protractor の設定ファイル
+- `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定
+- `src/app.po.ts` - アプリケーションをナビゲートするメソッド、DOM 内の要素を照会するメソッド、ページ上の要素を操作するメソッドを含むページオブジェクト
+- `src/app.e2e-spec.ts` - テスト用のスクリプト
+
+#### ページオブジェクト
+
+エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。
+
+ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用するAPIを提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
+
+##### ベースページオブジェクト
+
+多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用されるCSSセレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
+
+すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します:
+
+```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();
+  }
+}
+```
+
+##### ページ毎の要約
+
+アプリケーションの各ページには、そのページの要素を抽象化する独自のページオブジェクトクラスがあります。ベースとなるページオブジェクトクラスを使用する場合、ページオブジェクトを作成するには、ほとんどの場合そのページに固有の要素のカスタムメソッドを作成する必要があります。多くの場合、これらのカスタム要素は、必要な作業を実行するためにベースクラスのメソッドの恩恵を受けます。
+
+次に、単純ですが典型的なログインページのページオブジェクトの例を示します。`enterEMail()` のような多くのメソッドは、作業の大部分を行うベースクラスのメソッドを呼び出すことに注意してください。
+
+```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');
+  }
+}
+```
+
+#### テストスクリプト
+
+ユニットテストと同様に、エンドツーエンドのテストスクリプトはネストされた `describe()` と `it()` 関数で構成されています。エンドツーエンドのテストの場合、`describe()` 関数は一般に、特定のシナリオを、そのシナリオ内でアクションが実行されるときにアプリケーションによって表されるべき特定の振る舞いを示す `it()` 関数とともに示します。
+
+また、ユニットテストと同様に、`describe()` および `it()` 関数で使用されるラベルは、"describe" または "it"と、完全なテストケースを形成するためにともに連結されるとき、両方とも意味をなします。
+
+典型的なログインシナリオを実行するエンドツーエンドのテストスクリプトの簡単な例を次に示します。
+
+```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();
+    });
+  });
+});
+```
+
+### 設定
+
+デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する1つの方法を示します。
+
+#### テスト環境
+
+テスト環境を設定するには、テスト専用のバックエンドを使用する新しい環境ファイルを作成し、その環境を使うために `angular.json` ファイルを更新し、`package.json` 中の `e2e` スクリプトを `test` 環境を指定するように修正します。
+
+##### `environment.e2e.ts` ファイルを生成
+
+Angular の `environment.ts` と `environment.prod.ts` ファイルは、アプリケーションのバックエンドのデータサービスのベース URL などの情報を格納するために度々使用されます。また、同じ情報を提供する `environment.e2e.ts` を作成してください。これは、開発または本番のバックエンドサービスではなく、テスト専用のバックエンドサービスにのみ接続します。以下に例を示します:
+
+```tsx
+export const environment = {
+  production: false,
+  databaseURL: 'https://e2e-test-api.my-great-app.com',
+  projectId: 'my-great-app-e2e',
+};
+```
+
+##### `angular.json` ファイルを修正
+
+`angular.json` ファイルを使用するには、このファイルを修正する必要があります。これは階層化プロセスです。以下の XPath リストに従って、必要な設定を追加しましょう。
+
+`/projects/app/architect/build/configurations` にファイルの置換を行う `test` という名前の設定を追加します:
+
+```json
+"test": {
+  "fileReplacements": [
+    {
+      "replace": "src/environments/environment.ts",
+      "with": "src/environments/environment.e2e.ts"
+    }
+  ]
+}
+```
+
+`/projects/app/architect/serve/configurations` に、上記で定義した `test` というビルドの設定をブラウザターゲットに指定する `test` という名前の設定を追加します。
+
+```json
+"test": {
+  "browserTarget": "app:build:test"
+}
+```
+
+`/projects/app-e2e/architect/e2e/configurations` に、上記で定義した `test` という起動設定で開発サーバーターゲットを指定する `test` という名前の設定を追加します。
+
+```json
+"test": {
+  "devServerTarget": "app:serve:test"
+}
+```
+
+##### `package.json` ファイルを修正
+
+`npm run e2e` が `test` の設定を使うように `package.json` ファイルを修正します。
+
+```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"
+},
+```
+
+#### テストクリーンアップ
+
+エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための1つの方法は:
+
+1. クリーンアップを実行するエンドポイントを生成する。
+1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する
+
+次に例を示します:
+
+```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md
new file mode 100644
index 00000000000..5ce19bf4c9d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md
@@ -0,0 +1,133 @@
+# 仮想スクロール
+
+:::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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
new file mode 100644
index 00000000000..8c2a873a651
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
@@ -0,0 +1,176 @@
+---
+title: 'はじめてのIonicアプリ: Angular'
+sidebar_label: はじめてのアプリ
+---
+
+<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>
+
+Ionic の素晴らしいところは、1つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 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.
+:::
+
+## アプリの作成
+
+次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native機能を使うためにCapacitorを追加します。
+
+```shell
+ionic start photo-gallery tabs --type=angular --capacitor
+```
+
+このスタータープロジェクトには、Ionic 開発のために事前に構成された3つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
+
+次に、アプリのフォルダに移動します:
+
+```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.
+
+## アプリを起動
+
+次のコマンドを実行してください:
+
+```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..0500def6158
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md
@@ -0,0 +1,134 @@
+---
+title: Taking Photos with the Camera
+sidebar_label: カメラ撮影
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..588ebd4397e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md
@@ -0,0 +1,81 @@
+---
+sidebar_label: 写真の保存
+---
+
+# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md
new file mode 100644
index 00000000000..79759c48c53
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: 写真の読み込み
+---
+
+# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md
new file mode 100644
index 00000000000..f07de10841e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md
@@ -0,0 +1,117 @@
+---
+strip_number_prefixes: false
+---
+
+# モバイルデバイス機能の追加
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md
new file mode 100644
index 00000000000..82e392c2e64
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md
@@ -0,0 +1,114 @@
+---
+title: Deploying to iOS and Android
+sidebar_label: モバイルへのデプロイ
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md
new file mode 100644
index 00000000000..484feddcc0f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md
@@ -0,0 +1,114 @@
+---
+title: アプリ開発を高速化するためのライブリロード
+sidebar_label: ライブリロード
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/8-distribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..44b3781b476
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md
new file mode 100644
index 00000000000..ec0f91ca8e6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md
@@ -0,0 +1,17 @@
+---
+title: APIインデックス
+---
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
new file mode 100644
index 00000000000..65c2348de79
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
@@ -0,0 +1,59 @@
+---
+title: "ion-accordion-group"
+---
+import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+アコーディオン・グループは、アコーディオンインスタンスのためのコンテナです。これは、アコーディオンの状態を管理し、キーボードナビゲーションを提供します。
+
+より詳細な情報や使用方法については、 [Accordion](./accordion) を参照ください。
+
+
+## Interfaces
+
+### AccordionGroupChangeEventDetail
+
+```typescript
+interface AccordionGroupChangeEventDetail<T = any> {
+  value: T;
+}
+```
+
+### AccordionGroupCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
+  detail: AccordionGroupChangeEventDetail<T>;
+  target: HTMLIonAccordionGroupElement;
+}
+```
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
new file mode 100644
index 00000000000..e21df328dd7
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
@@ -0,0 +1,211 @@
+---
+title: "ion-accordion"
+---
+import Props from '@ionic-internal/component-api/v7/accordion/props.md';
+import Events from '@ionic-internal/component-api/v7/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
+
+<head>
+  <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
+  <meta name="description" content="Ion-accordionコンポーネントは、コンテンツに折りたたみ可能なセクションを設け、縦方向のスペースを減らし、情報を整理することができます。組み立て方とサンプルをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての `ion-accordion` コンポーネントは `ion-accordion-group` コンポーネントの中にグループ化されている必要があります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/accordion/basic/index.md';
+
+<Basic />
+
+## アコーディオンをトグルする方法
+
+どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
+
+import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
+
+<Toggle />
+
+## アコーディオンの状態変化を監視
+
+開発者は `ionChange` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。
+
+import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
+
+<ListenChanges />
+
+## 複数のアコーディオン
+
+開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。
+
+import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
+
+<Multiple />
+
+## アコーディオンの無効化
+
+### アコーディオンを無効にする
+
+個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。
+
+import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
+
+<DisableIndividual />
+
+### アコーディオングループ
+
+アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。
+
+import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
+
+<DisableGroup />
+
+## 読み込み可能なアコーディオン
+
+### 個別アコーディオン
+
+個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。
+
+import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
+
+<ReadonlyIndividual />
+
+### アコーディオングループ
+
+アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。
+
+import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
+
+<ReadonlyGroup />
+
+## 構造
+
+## ヘッダー
+
+`header` slotは、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは `ion-item` を使用することをお勧めします。
+
+`header` slotに `ion-item` を使用する場合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に設定されます。さらに、`ion-item` にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 [アイコンのカスタマイズ](#icons) を参照してください。
+
+### コンテンツ
+
+`content` slotは、アコーディオンの状態に応じて表示/非表示される部分として使用されます。1ページに1つだけ `ion-content` インスタンスを追加する必要があるため、ここには他の `ion-content` インスタンスを除いて何でも置くことができます。
+
+## カスタマイズ
+
+### 拡張スタイル
+
+組み込みの拡張スタイルには、`compact` と `inset` の 2 種類があります。この拡張スタイルは `ion-accordion-group` の `expand` プロパティによって設定されます。
+
+`expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
+
+import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
+
+<ExpansionStyles />
+
+### 高度な拡張スタイル
+
+アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
+
+| 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 |
+
+アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。
+
+```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/v7/accordion/customization/advanced-expansion-styles/index.md';
+
+<AdvancedExpansionStyles />
+
+### アイコン
+
+`header` slot に `ion-item` を使用する場合、自動的に `ion-icon` が追加されます。使用するアイコンの種類は `toggleIcon` プロパティで制御でき、追加するスロットも `toggleIconSlot` プロパティで制御することができます。
+
+アイコンを自分で管理したい場合や、`ion-icon` 以外のアイコンを使用したい場合は、icon 要素に `ion-accordion-toggle-icon` クラスを追加することができます。
+
+どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
+
+import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
+
+<Icons />
+
+### テーマ
+
+`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と  [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。
+
+import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
+
+<Theming />
+
+## アクセシビリティ
+
+### アニメーション
+
+デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。
+
+import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
+
+<AccessibilityAnimations />
+
+### キーボードナビゲーション
+
+`ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。
+
+| 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. |
+
+## パフォーマンス
+
+### アニメーション
+
+アコーディオンアニメーションは、アニメーションを開始するときに `content` slotの高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。
+
+例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slotの高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。
+
+1. 遅延読み込みを行わない `img` 要素を使用します。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。
+
+2. `ion-img` に最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して `ion-img` に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 `img` 要素を `loading="lazy"` と共に使用する場合にも有効です!
+
+3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
new file mode 100644
index 00000000000..7068b9eda66
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
@@ -0,0 +1,153 @@
+---
+title: "ion-action-sheet"
+---
+import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
+
+<head>
+  <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
+  <meta name="description" content="アクションシートはアプリのコンテンツの上に一連のオプションを表示するダイアログで、手動で解除する必要があります。iOSとAndroidのデバイスでの使用方法については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+
+Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
+
+## インラインアクションシート (推奨)
+
+`ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
+
+import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
+
+<Trigger />
+
+### `isOpen` を使う
+
+`ion-action-sheet` の `isOpen` プロパティは、開発者がアプリケーションの状態からアクションシートの表示状態を制御することを可能にします。つまり、`isOpen`が`true`に設定されるとアクションシートが表示され、`isOpen`が`false`に設定されるとアクションシートは解除されます。
+
+`isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
+
+import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
+
+<IsOpen />
+
+## Controller アクションシート
+
+アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
+
+import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
+
+<Controller />
+
+## Buttons
+
+Buttonの `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つButtonは、配列 `buttons` のどこに配置してもアクションシートの最下部に表示されます。 Note: `destructive` roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。
+
+Buttonは `ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これは `onDidDismiss` メソッドの戻り値にある `data` フィールドにデータを入力します。
+
+## Collecting Role Information on Dismiss
+
+`didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
+
+import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
+
+<RoleInfo />
+
+## テーマ
+
+アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+
+### スタイリング
+
+私たちは、 `create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
+
+```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/v7/action-sheet/theming/styling/index.md';
+
+<Styling />
+
+## CSSカスタムプロパティ
+
+[CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
+
+import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
+
+<CssCustomProperties />
+
+## アクセシビリティ
+
+アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が与えられます。ARIA仕様に合わせるため、`aria-label`属性または`aria-labelledby`属性のいずれかを設定する必要があります。
+
+Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することが強く推奨されています。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使用して、説明的な`aria-label`を提供するか、カスタム`aria-labelledby`値を設定することも可能です。
+
+## 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;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
new file mode 100644
index 00000000000..bf2488d06c1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
@@ -0,0 +1,202 @@
+---
+title: "ion-alert"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@ionic-internal/component-api/v7/alert/props.md';
+import Events from '@ionic-internal/component-api/v7/alert/events.md';
+import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
+
+<head>
+  <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
+  <meta name="description" content="ion-alertダイアログは、Inputを使用して情報を提示または収集します。カスタムアラートボタンメッセージは、アプリのコンテンツの上に表示され、手動で解除する必要があります。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
+
+## インラインアラート(推奨)
+
+`ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
+
+import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md';
+
+<Trigger />
+
+### `isOpen` を使う
+
+`ion-alert` の `isOpen` プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、`isOpen` を `true` に設定するとアラートが表示され、`isOpen` を `false` に設定するとアラートは解除されます。
+
+`isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。
+
+import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
+
+<IsOpen />
+
+## Controller Alerts
+
+`alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。
+
+import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
+
+<Controller />
+
+## Buttons
+
+`buttons` の配列には、各buttonの `text` のプロパティと、オプションで `handler` を利用することができます。 `handler` が `false` を返した場合、buttonがクリックされてもAlertは自動的に解除されません。すべての `buttons` は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の1つ)がメインボタンです。
+
+オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。
+
+import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
+
+<Buttons />
+
+
+## Inputs
+
+Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 `url`, `email`, `text` などの複数のtypeを混ぜて利用することはできます。アラートのガイドラインに収まらない複雑なForm UIが必要な場合は、代わりにModal内でFormを構築することをお勧めします。
+
+### Text Inputs Example
+
+import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md';
+
+<TextInputs />
+
+### Radio Example
+
+import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
+
+<Radios />
+
+## カスタマイズ
+
+Alertはscopedによるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的にCSSをスコープします。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+
+`create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
+
+```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;
+}
+```
+
+[CSSカスタムプロパティ](#css-custom-properties) は、個々の要素をターゲットにすることなく、アラートのスタイルに使用することができます。
+
+```css
+.my-custom-class {
+  --background: #e5e5e5;
+}
+```
+
+import Customization from '@site/static/usage/v7/alert/customization/index.md';
+
+<Customization />
+
+:::note
+IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。
+:::
+
+## アクセシビリティ
+
+Ionicは、アラートの `role` を、Inputやボタンがある場合は [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) に、何もない場合は [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) のいずれかに自動的に設定します。
+
+アラートに対して `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header`が定義されていない場合は、`subHeader`要素がフォールバックとして使用されます。同様に、`aria-describedby`属性は、`message`要素のIDが定義されていれば自動的に設定されます。
+
+ARIAの仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。
+
+すべてのARIA属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することにより、手動で上書きすることができます。
+
+
+## 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;
+  /**
+   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+   */
+  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;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
new file mode 100644
index 00000000000..c92f455e3b6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
@@ -0,0 +1,47 @@
+---
+title: "ion-app"
+---
+import Props from '@ionic-internal/component-api/v7/app/props.md';
+import Events from '@ionic-internal/component-api/v7/app/events.md';
+import Methods from '@ionic-internal/component-api/v7/app/methods.md';
+import Parts from '@ionic-internal/component-api/v7/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/app/slots.md';
+
+<head>
+  <title>ion-app: Container Element for an Ionic Application</title>
+  <meta name="description" content="ion-appは、Ionicアプリケーションのためのコンテナ要素です。アプリは、メニュー、ヘッダー、コンテンツ、フッターなど、多くのIonicコンポーネントを持つことができます。詳しくはこちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+AppはIonicアプリケーションのコンテナ要素です。プロジェクトごとに `<ion-app>` 要素は1つだけにしてください。アプリケーションには、menus, headers, content, footersなど、多くのIonicコンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `<ion-app>` に追加されます。
+
+`ion-app`を使用すると、以下の動作が可能になります。
+
+* [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。
+* Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます
+* Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。
+* テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。
+* Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
+* Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
new file mode 100644
index 00000000000..782ea64a91f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
@@ -0,0 +1,67 @@
+---
+title: "ion-avatar"
+---
+
+import Props from '@ionic-internal/component-api/v7/avatar/props.md';
+import Events from '@ionic-internal/component-api/v7/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v7/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
+
+<head>
+  <title>ion-avatar: Circular Application Avatar Icon Component</title>
+  <meta name="description" content="Ion-avatarsは画像やアイコンを包む円形のアプリケーション部品です。人物や物体を表現することができ、単体でも、要素の中に入れてもかまいません。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Avatarは通常、写真やアイコンをラップする円形のコンポーネントです。これらは、人またはオブジェクトを表示するために使用できます。
+
+Avatarは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-chip` または `ion-item` の内部に配置すると、Avatarは親コンポーネントに合わせてサイズ変更します。Avatarをitemの左側または右側に配置するには、`slot` を `start` か `end` に設定します。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/avatar/basic/index.md';
+
+<Basic />
+
+## Chip Avatar
+
+import Chip from '@site/static/usage/v7/avatar/chip/index.md';
+
+<Chip />
+
+## Item Avatar
+
+import Item from '@site/static/usage/v7/avatar/item/index.md';
+
+<Item />
+
+## テーマ
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md';
+
+<CSSProps />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
new file mode 100644
index 00000000000..66a28fea381
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
@@ -0,0 +1,57 @@
+---
+title: "ion-back-button"
+---
+import Props from '@ionic-internal/component-api/v7/back-button/props.md';
+import Events from '@ionic-internal/component-api/v7/back-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/back-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/back-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
+
+<head>
+  <title>Back Button | ion-back-button: Custom Menu Icon for Applications</title>
+  <meta name="description" content="ion-back-buttonは、Android、iOS、およびProgressive Web Apps用のカスタムメニューアイコンです。Ionic Frameworkのコンポーネントを使用して、簡単にアプリケーションを構築できます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Back Buttonは、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/back-button/basic/index.md';
+
+<Basic />
+
+## カスタムのBack Button
+
+デフォルトでは、Back Buttonはテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Config docs](../developing/config) を参照してください。
+
+import Custom from '@site/static/usage/v7/back-button/custom/index.md';
+
+<Custom />
+
+## デフォルトのBack履歴
+
+時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
new file mode 100644
index 00000000000..ac2f25308d1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
@@ -0,0 +1,51 @@
+---
+title: "ion-backdrop"
+---
+import Props from '@ionic-internal/component-api/v7/backdrop/props.md';
+import Events from '@ionic-internal/component-api/v7/backdrop/events.md';
+import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md';
+import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
+
+## 基本的な使い方
+
+バックドロップは、デフォルトで透明です。バックドロップは、その背後にあるコンテンツのクリックやタップを防ぐことができます。
+
+import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
+
+<Basic />
+
+## スタイリング
+
+バックドロップは、CSSプロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには `background-color`, `background`, `opacity` があります。
+
+コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。
+
+import Styling from '@site/static/usage/v7/backdrop/styling/index.md';
+
+<Styling />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
new file mode 100644
index 00000000000..787249d1ad0
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
@@ -0,0 +1,58 @@
+---
+title: "ion-badge"
+---
+import Props from '@ionic-internal/component-api/v7/badge/props.md';
+import Events from '@ionic-internal/component-api/v7/badge/events.md';
+import Methods from '@ionic-internal/component-api/v7/badge/methods.md';
+import Parts from '@ionic-internal/component-api/v7/badge/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
+
+<head>
+  <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
+  <meta name="description" content="BadgesはiOS/Androidアプリで他の要素の近くに表示されるインラインブロック要素で、アイテムの数を示す通知として使用します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+バッジはインラインブロック要素で、通常は他の要素の近くに表示されます。通常、数字やその他の文字が含まれています。バッジは、ある要素に関連する追加項目があることを知らせたり、その項目の数を示したりするために使用されます。バッジは、コンテンツが渡されないと非表示になります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/badge/basic/index.md';
+
+<Basic />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/badge/theming/colors/index.md';
+
+<Colors />
+
+### CSS Properties
+
+import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.md';
+
+<CSSProps />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
new file mode 100644
index 00000000000..ec0d92798fe
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
@@ -0,0 +1,60 @@
+---
+title: "ion-breadcrumb"
+---
+import Props from '@ionic-internal/component-api/v7/breadcrumb/props.md';
+import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md';
+import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md';
+import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Breadcrumbは、Breadcrumbsコンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumbは、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbsは、次のBreadcrumbとの間にセパレータを持ち、オプションでアイコンを含むことができます。
+
+詳しい説明は [Breadcrumbs](./breadcrumbs) を参照ください。
+
+## Interfaces
+
+### BreadcrumbCollapsedClickEventDetail
+
+```typescript
+interface BreadcrumbCollapsedClickEventDetail {
+  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
+}
+```
+
+### BreadcrumbCustomEvent
+
+必須ではありませんが、より強い型付けのために、このインターフェースを `CustomEvent` インターフェースの代わりに使用することができます。
+
+```typescript
+interface BreadcrumbCustomEvent extends CustomEvent {
+  detail: BreadcrumbCollapsedClickEventDetail;
+  target: HTMLIonBreadcrumbElement;
+}
+```
+
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
new file mode 100644
index 00000000000..162b5852469
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
@@ -0,0 +1,104 @@
+---
+title: "ion-breadcrumbs"
+---
+import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md';
+import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md';
+import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md';
+import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md';
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbsは、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだBreadcrumbを展開することができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md';
+
+<Basic />
+
+## Using Icons
+
+### アイテムでのアイコン
+
+import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md';
+
+<IconsOnItems />
+
+### Custom Separators
+
+import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.md';
+
+<CustomSeparators />
+
+## Collapsing Items
+
+### Max Items
+
+`maxItems` の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。
+
+import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md';
+
+<MaxItems />
+
+### Items Before or After Collapse
+
+アイテムが折りたたまれた後、表示するアイテムの数は `itemsBeforeCollapse` と `itemsAfterCollapse` プロパティで制御することができます。
+
+import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md';
+
+<ItemsBeforeAfter />
+
+### Collapsed Indicator Click -- Expand Breadcrumbs
+
+インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。
+
+import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md';
+
+<ExpandOnClick />
+
+### Collapsed Indicator Click -- Present Popover
+
+また、`ionCollapsedClick` イベントは、隠されたパンくずを表示するオーバーレイ（この場合は `ion-popover` ）を提示するために使用することができます。
+
+import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md';
+
+<PopoverOnClick />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
new file mode 100644
index 00000000000..04b6750e964
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
@@ -0,0 +1,97 @@
+---
+title: "ion-button"
+---
+import Props from '@ionic-internal/component-api/v7/button/props.md';
+import Events from '@ionic-internal/component-api/v7/button/events.md';
+import Methods from '@ionic-internal/component-api/v7/button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/button/slots.md';
+
+<head>
+  <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
+  <meta name="description" content="ion-button は、標準的なボタン機能が必要な場所で使用するためのクリック可能な要素を提供します。カスタム CSS プロパティを使用して、ボタン要素をデザインし、スタイルを設定します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/button/basic/index.md';
+
+<Basic />
+
+## Expand
+
+このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは `display: inline-block` を持ちますが、このプロパティを設定すると、ボタンは `display: block` を持つ全角要素に変更されます。
+
+import Expand from '@site/static/usage/v7/button/expand/index.md';
+
+<Expand />
+
+## Shape
+
+このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを `"round"` に設定すると、ボタンは丸みを帯びた要素に変更されます。
+
+import Shape from '@site/static/usage/v7/button/shape/index.md';
+
+<Shape />
+
+
+## Fill
+
+この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。
+
+import Fill from '@site/static/usage/v7/button/fill/index.md';
+
+<Fill />
+
+## Size
+
+この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます
+
+import Size from '@site/static/usage/v7/button/size/index.md';
+
+<Size />
+
+## Icons
+
+import Icons from '@site/static/usage/v7/button/icons/index.md';
+
+<Icons />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/button/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md';
+
+<CSSProps />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
new file mode 100644
index 00000000000..2d81136da74
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
@@ -0,0 +1,87 @@
+---
+title: "ion-buttons"
+---
+import Props from '@ionic-internal/component-api/v7/buttons/props.md';
+import Events from '@ionic-internal/component-api/v7/buttons/events.md';
+import Methods from '@ionic-internal/component-api/v7/buttons/methods.md';
+import Parts from '@ionic-internal/component-api/v7/buttons/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/buttons/slots.md';
+
+<head>
+  <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
+  <meta name="description" content="Buttonsコンポーネントは、コンテナ要素です。ツールバーに配置されるボタンはion-buttons要素の中にあるべきで、名前付きスロットを使って配置することができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+
+Buttonsコンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/buttons/basic/index.md';
+
+<Basic />
+
+
+## Buttons Placement
+
+ツールバー内のボタンは、スロットという名前を使って配置することができます。下図は各スロットの説明です。
+
+| 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/v7/buttons/placement/index.md';
+
+<Placement />
+
+
+## Buttonsのタイプ
+
+ツールバーのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例で [バックボタン](./back-button) と [メニューボタン](./menu-button) に含まれるプロパティは表示目的であり、正しい使用方法はそれぞれのドキュメントをご覧ください。
+
+import Types from '@site/static/usage/v7/buttons/types/index.md';
+
+<Types />
+
+
+## Collapsible Buttons
+
+ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[collapsible large titles](./title#collapsible-large-titles) と共に使用します。
+
+:::info
+
+この機能はiOS modeでのみ有効です。
+
+:::
+
+<!-- Reuse the playground from the Title directory -->
+import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
+
+<CollapsibleLargeTitleButtons />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
new file mode 100644
index 00000000000..be18d82c580
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
@@ -0,0 +1,35 @@
+---
+title: "ion-card-content"
+---
+import Props from '@ionic-internal/component-api/v7/card-content/props.md';
+import Events from '@ionic-internal/component-api/v7/card-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-content/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+カードコンテンツは、カードの子コンポーネントで、そのコンテンツの周りにパディングを追加します。カードのテキストコンテンツは、カードコンテンツの中に配置することが推奨されます。
+
+詳しくは、[Card](./card)のドキュメントを参照してください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
new file mode 100644
index 00000000000..c3ac19f2bba
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
@@ -0,0 +1,37 @@
+---
+title: "ion-card-header"
+---
+import Props from '@ionic-internal/component-api/v7/card-header/props.md';
+import Events from '@ionic-internal/component-api/v7/card-header/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-header/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。
+
+詳しくは、[Card](./card)のドキュメントを参照してください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
new file mode 100644
index 00000000000..4aab84d40d9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
@@ -0,0 +1,37 @@
+---
+title: "ion-card-subtitle"
+---
+import Props from '@ionic-internal/component-api/v7/card-subtitle/props.md';
+import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、cardの子コンポーネントです。
+
+詳しくは、[Card](./card)のドキュメントを参照してください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
new file mode 100644
index 00000000000..1ce75913505
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
@@ -0,0 +1,42 @@
+---
+title: "ion-card-title"
+---
+import Props from '@ionic-internal/component-api/v7/card-title/props.md';
+import Events from '@ionic-internal/component-api/v7/card-title/events.md';
+import Methods from '@ionic-internal/component-api/v7/card-title/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card-title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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は、ion-cardの子コンポーネントです。カードタイトルのプロパティの詳細と、このコンポーネントがIonic Frameworkアプリでどのように使用されるかについては、こちらをご覧ください。" />
+</head>
+
+<EncapsulationPill type="shadow" />
+
+
+Card titleはcardの子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。
+
+詳しくは、[Card](./card)のドキュメントを参照してください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
new file mode 100644
index 00000000000..e4f5148d4cd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
@@ -0,0 +1,87 @@
+---
+title: "ion-card"
+---
+import Props from '@ionic-internal/component-api/v7/card/props.md';
+import Events from '@ionic-internal/component-api/v7/card/events.md';
+import Methods from '@ionic-internal/component-api/v7/card/methods.md';
+import Parts from '@ionic-internal/component-api/v7/card/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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コンポーネントは、より詳細な情報へのエントリーポイントです。カードは単一のコンポーネントであることも、いくつかのヘッダ、タイトル、サブタイトル、コンテンツから構成されることもあります。" />
+</head>
+
+<EncapsulationPill type="shadow" />
+
+
+カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。
+カードは1つのコンポーネントで構成することもできますが、
+多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。
+カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。
+[カードヘッダ](./card-header)、[カードタイトル](./card-title)、[カードサブタイトル](./card-subtitle)、[カードコンテンツ](./card-content)。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/card/basic/index.md';
+
+<Basic />
+
+
+## Media Cards
+
+import Media from '@site/static/usage/v7/card/media/index.md';
+
+<Media />
+
+
+## Card Buttons
+
+import Buttons from '@site/static/usage/v7/card/buttons/index.md';
+
+<Buttons />
+
+
+## List Card
+
+import List from '@site/static/usage/v7/card/list/index.md';
+
+<List />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/card/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
new file mode 100644
index 00000000000..d8472cf6f3a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
@@ -0,0 +1,127 @@
+---
+title: "ion-checkbox"
+---
+
+import Props from '@ionic-internal/component-api/v7/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v7/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
+
+<head>
+  <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
+  <meta name="description" content="ion-checkboxは、セットから複数の選択肢を選択でき、アクティブにするとチェックされた（ticked）ように表示されます。Ionicアプリのチェックボックスコンポーネントについて説明します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
+
+<Basic />
+
+## Label Placement
+
+開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+
+import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
+
+<LabelPlacement />
+
+## Justification
+
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
+
+import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
+
+<Justify />
+
+
+:::note
+`ion-item`は、 `justify` がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
+:::
+
+## Indeterminate Checkboxes
+
+import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md';
+
+<Indeterminate />
+
+## テーマ
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md';
+
+<CSSProps />
+
+## Interfaces
+
+### CheckboxChangeEventDetail
+
+```typescript
+interface CheckboxChangeEventDetail<T = any> {
+  value: T;
+  checked: boolean;
+}
+```
+
+### CheckboxCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface CheckboxCustomEvent<T = any> extends CustomEvent {
+  detail: CheckboxChangeEventDetail<T>;
+  target: HTMLIonCheckboxElement;
+}
+```
+
+## レガシーなチェックボックス構文からのマイグレーション
+
+Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+### 最新の構文の使い方
+
+最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。
+
+import Migration from '@site/static/usage/v7/checkbox/migration/index.md';
+
+<Migration />
+  
+
+:::note
+Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。
+:::
+
+### レガシーな構文の使い方
+
+Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
new file mode 100644
index 00000000000..deb8708806d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
@@ -0,0 +1,64 @@
+---
+title: "ion-chip"
+---
+import Props from '@ionic-internal/component-api/v7/chip/props.md';
+import Events from '@ionic-internal/component-api/v7/chip/events.md';
+import Methods from '@ionic-internal/component-api/v7/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v7/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
+
+<head>
+  <title>ion-chip:  Name, Text, Icon and Avatar for Ionic Framework Apps</title>
+  <meta name="description" content="ion-chipは、複雑な実体をコンタクトのような小さなブロックに表現します。1つのチップには、名前、アバター、テキスト、アイコンなど、複数の異なる要素を含めることができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Chipは連絡先などを複数の小さなエンティティで表示します。 Chipにはavatars, text, や iconsなど、いくつかの異なる要素を含めることができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/chip/basic/index.md';
+
+<Basic />
+
+## Slotting Components and Icons
+
+import SlotExample from '@site/static/usage/v7/chip/slots/index.md';
+
+<SlotExample />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/chip/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md';
+
+<CSSProps />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
new file mode 100644
index 00000000000..46e43818edf
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
@@ -0,0 +1,49 @@
+---
+title: "ion-col"
+---
+import Props from '@ionic-internal/component-api/v7/col/props.md';
+import Events from '@ionic-internal/component-api/v7/col/events.md';
+import Methods from '@ionic-internal/component-api/v7/col/methods.md';
+import Parts from '@ionic-internal/component-api/v7/col/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/col/slots.md';
+
+<head>
+  <title>ion-col: Column Component Padding, Size and Other Properties</title>
+  <meta name="description" content="ion-colは、rowの内側に入るカラムコンポーネントです。グリッド内のコンテンツは、カラムの中に入ります。列のパディング、サイズ、その他のプロパティについては、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Columnは、[Grid](./grid) システムのセルラーコンポーネントで、[row](./row)の内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
+
+詳しくは、[grid](./grid)のドキュメントを参照してください。
+
+
+## Column Alignment
+
+デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。
+
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
new file mode 100644
index 00000000000..0e25f9f51ad
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
@@ -0,0 +1,156 @@
+---
+title: "ion-content"
+---
+import Props from '@ionic-internal/component-api/v7/content/props.md';
+import Events from '@ionic-internal/component-api/v7/content/events.md';
+import Methods from '@ionic-internal/component-api/v7/content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/content/slots.md';
+
+<head>
+  <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
+  <meta name="description" content="ion-contentは、スクロール可能な領域を制御する便利なメソッドを備えた、使いやすいコンテンツ領域を提供します。このIonicアプリ用CSSコンポーネントの詳細については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、
+使いやすいコンテンツ領域を提供します。
+1つのビューに表示できるコンテンツは1つだけです。
+
+Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/content/basic/index.md';
+
+<Basic />
+
+
+## Header & Footer
+
+コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。
+
+import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
+
+<HeaderFooter />
+
+
+## Fullscreen Content
+
+デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。
+
+import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md';
+
+<Fullscreen />
+
+
+## コンテンツの固定
+
+スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSSの[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。
+
+import Fixed from '@site/static/usage/v7/content/fixed/index.md';
+
+<Fixed />
+
+## スクロールメソッド
+
+コンテンツには [メソッド](#methods) が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには `duration` を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。
+
+import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md';
+
+<ScrollMethods />
+
+## Scroll Events
+
+スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、`scrollEvents` を `true` に設定することで、有効にすることができます。これは、 スクロール [イベント](#events) を聞く前に必要です。
+
+import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
+
+<ScrollEvents />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/content/theming/colors/index.md';
+
+<Colors />
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/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
+
+必須ではありませんが、`ionScrollStart` と `ionScrollEnd` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。
+
+```typescript
+interface ScrollBaseCustomEvent extends CustomEvent {
+  detail: ScrollBaseDetail;
+  target: HTMLIonContentElement;
+}
+```
+
+### ScrollCustomEvent
+
+必須ではありませんが、`ionScroll` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。
+
+```typescript
+interface ScrollCustomEvent extends ScrollBaseCustomEvent {
+  detail: ScrollDetail;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
new file mode 100644
index 00000000000..bde607c4354
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
@@ -0,0 +1,72 @@
+---
+title: "ion-datetime-button"
+---
+import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
+import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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ボタンは、[Datetime](./datetime) コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。
+
+## 概要
+
+Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。
+
+Angular、React、VueなどのJavaScriptフレームワークでDatetime Buttonを使用する場合は、 [ion-modalのkeepContentsMountedプロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされたdatetimeインスタンスがマウントされるようになります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';
+
+<Basic />
+
+## ローカライゼーション
+
+`ion-datetime-button` のローカライズされたテキストは、関連する `ion-datetime` インスタンスの `locale` プロパティによって決まります。詳しくは、[Datetime Localization](./datetime#localization) を参照してください。
+
+## モーダルやポップオーバーと使う
+
+`ion-datetime-button` は、マウントされた `ion-datetime` インスタンスと関連付ける必要があります。そのため、[Inline Modals](./modal#inline-modals-recommended) と [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に設定して使用しなければなりません。
+
+<!--
+## Customization
+
+TODO
+
+### Buttons
+
+TODO
+
+### テーマ
+
+TODO
+-->
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
new file mode 100644
index 00000000000..85877fd9ad3
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
@@ -0,0 +1,456 @@
+---
+title: "ion-datetime"
+---
+import Props from '@ionic-internal/component-api/v7/datetime/props.md';
+import Events from '@ionic-internal/component-api/v7/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v7/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v7/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/datetime/slots.md';
+
+import Basic from '@site/static/usage/v7/datetime/basic/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/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/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/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/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 HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md';
+import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md';
+
+import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/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>
+  <meta name="description" content="Datetimeは、日付や時刻を選択するためのピッカーインターフェイスを提供します。IonicのAPI Datetime入力コンポーネントは、好みの形式を簡単に表示し、値を管理します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Datetimeはカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetimeはネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic FrameworkのDatetimeコンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetimeの値を管理することが簡単にできます。
+
+## 概要 
+
+これまで、JavaScriptやHTMLの入力でdatetimeの値を扱うことは、常に困難でした。
+入力でさえも、常に課題でした。
+特に、JavaScriptの `Date` オブジェクトは、datetime文字列を正しく解析したり、datetime値をフォーマットしたりするのが難しいことで有名です。
+さらに悪いことに、ブラウザやJavaScriptのバージョンによって、
+特にロケールごとに様々なdatetime文字列の解析が異なるのです。
+
+Ionic Frameworkのdatetimeは、開発者が一般的な落とし穴を回避できるように設計されており、
+開発者は簡単にdatetime値を操作し、ユーザーにシンプルなdatetimeピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。
+
+### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
+
+Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。
+この値は、JavaScriptの `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。
+ISO datetimeフォーマットを使用することで、
+JSONオブジェクトやデータベース内でのシリアライズやパースが容易になります。
+
+以下は、 `ion-datetime` で使用できる ISO 8601 フォーマットの例です:
+
+| 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                         |
+
+年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。
+ミリ秒は3桁、その他は2桁である。
+ですから、1月を表す数字には 1月を表す数字には常に先頭のゼロ、例えば`01`が付きます。
+また、時刻は常に24時間表示で、
+12時間表示の時計では「00」は「午前12時」、「13」は「午後1時」、「23」は「午後3時」を意味します。
+
+:::note
+秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 `ion-datetime` は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。
+:::
+
+## 基本的な使い方
+
+<Basic />
+
+## 日付ボタンと使う
+
+モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 [ion-datetime-button](./datetime-button) を使用することをお勧めします。スペースに制約がある場合は、 `ion-datetime-button` を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。
+
+## 日付コンテナ
+
+### 日付の最小値と最大値
+
+日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。
+
+次の例では、日付の選択を 2022 年 3 月から 2022 年 5 月のみに制限しています。
+
+<MaxMin />
+
+### 特定の値を選択する
+
+`min` と `max` プロパティでは、日付の選択をある範囲に制限することができますが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。
+
+次の例では、15分単位で分を選択することができます。また、日付を5刻みで選択することができます。
+
+<Values />
+
+### 高度な日付制限
+
+`isDateEnabled` プロパティを使用すると、開発者は ISO 8601 日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にするように `ion-datetime` をカスタマイズすることができます。
+`isDateEnabled` プロパティは、日付が有効かどうかを示す boolean 値を返す関数を受け付けます。この関数は、レンダリングされた各日付、前月、今月、来月に対して呼び出されます。カスタムの実装では、ジャンキングを避けるために、パフォーマンスを最適化する必要があります。
+
+次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 `date-fns` のような日付ユーティリティを使用することをお勧めします。
+
+<Advanced />
+
+## ローカライゼーション
+
+Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web APIを利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。
+
+### カスタムロケール
+
+特定のロケールが必要な場合、 `locale` プロパティを使用して設定することができます。ロケールは、表示される言語と日付・時刻のフォーマットの両方を制御します。
+
+次の例では、ロケールをスペイン語（Spanish）に設定する方法を示しています。
+
+<CustomLocale />
+
+:::note
+時刻の表記は、自動的にローカライズされません。詳しくは [Time Label](#time-label) を参照してください。
+:::
+
+### 時間サイクル
+
+`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は12時間のサイクルを使用します。
+
+時間サイクルには4つのタイプがあります。
+
+| 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
+  ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+:::
+
+
+どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 `hourCycle` プロパティが役に立ちます。
+
+次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に12時間周期を使用するように強制することができます。
+
+<HourCycle />
+
+### 週初めの日
+
+`ion-datetime`の場合、週初めの曜日はデフォルトで日曜日です。2022年現在、Ionicがデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザAPIはありませんが、これに関する作業は進行中です（参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) )．
+
+<FirstDayOfWeek />
+
+### 時刻表記
+
+時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionicでは `time-label` スロットで簡単にカスタムのローカライズを提供することができます。
+
+<TimeLabel />
+
+### ロケールエクステンションタグ
+
+`ion-datetime` は、 `Intl.Locale` API の一部として [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) もサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードすることができます。開発者は、アプリの中で [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を使っている場合、拡張タグのアプローチを使うことを好むかもしれません。
+
+たとえば、 `en-GB` ロケールで 12 時間周期を使用したい場合は、 `locale` と `hourCycle` の両方のプロパティを使用するのではなく、拡張タグを使用します。
+
+<LocaleExtensionTags />
+
+:::note
+アプリで使用する前に、 `Intl.Locale` の [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) を必ず確認してください。
+:::
+
+## プレゼンテーション
+
+デフォルトでは、 `ion-datetime` は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。
+
+ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーはtimeピッカーの後に表示されます。
+
+### 月と年の選択
+
+月と年の選択は、  `presentation` プロパティに `month-year` , `year-month` , `month` , または `year` を渡すことで行うことができます。
+
+この例では、 `month-year` を設定した datetime を示しています。
+
+<MonthAndYear />
+
+### 時刻の選択
+
+時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, `time` を渡すことで行うことができます。
+
+この例では、`time`の設定で datetime を表示しています。
+
+<Time />
+
+### 日付の選択
+
+時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, または `date` を渡すことで行うことで有効になります。
+
+この例では、`date`の設定でdatetimeを指定しています。
+
+<Date />
+
+### ピッカーのホイールスタイル
+
+デフォルトでは、Ionicは `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。preferWheel` が `true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。
+
+特定の `presentation` オプションには、グリッドとホイールの両方のスタイルがあり、開発者は `preferWheel` プロパティで選択することができます。その他の `presentation` の値はホイールスタイルのみを持ち、グリッドスタイルは決して表示されません。下の表は、どの `presentation` の値がグリッドスタイルとホイールスタイルを持つかを示しています。
+
+| `presentation` | グリッドシステム   | ホイールシステム   |
+| -------------- | --------------- | ---------------- |
+| `date`         | Yes             | Yes              |
+| `date-time`    | Yes             | Yes              |
+| `month`        | No              | Yes              |
+| `month-year`   | No              | Yes              |
+| `time`         | No              | Yes              |
+| `time-date`    | Yes             | Yes              |
+| `year`         | No              | Yes              |
+
+以下の例では、ホイールピッカーに `presentation="date-time"` を指定しています。
+
+import Wheel from '@site/static/usage/v7/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 />
+
+## タイトル
+
+デフォルトでは、`ion-datetime`は、コンポーネントに関連するヘッダーやタイトルを表示しません。開発者は `showDefaultTitle` プロパティを使用して、デフォルトのタイトル/ヘッダー構成を表示することができます。また、 `title` スロットを使用して、ヘッダーに表示される内容をカスタマイズすることもできます。
+
+### デフォルトタイトルを表示
+
+<ShowingDefaultTitle />
+
+### タイトルをカスタマイズ
+
+<CustomizingTitle />
+
+## ボタン
+
+デフォルトでは、新しい日付が選択されると、新しいdatetimeの値で `ionChange` が発行されます。 `ionChange` を発行する前にユーザの確認を必要とする場合は、 `showDefaultButtons` プロパティを `true` に設定するか、 `buttons` スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メソッドを呼び出す必要があります。
+
+### 確認ボタンの表示
+
+デフォルトのDoneボタンとCancelボタンは、それぞれ [`confirm`](#confirm) と [`cancel`](#cancel) メソッドを呼び出すように予め設定されています。
+
+<ShowingConfirmationButtons />
+
+### ボタンテキストのカスタマイズ
+
+単純なユースケースの場合、開発者は `doneText` と `cancelText` プロパティを使用して、確認とキャンセルの値にカスタムボタンテキストを指定することができます。この方法は、ボタンのテキストを変更するだけで、カスタムビヘイビアを必要としない場合に推奨します。
+
+<CustomizingButtonTexts />
+
+### ボタン要素のカスタマイズ
+
+開発者は、高度なカスタム動作のための独自のボタンを提供することができる。
+
+`ion-datetime` には `confirm`, `cancel`, `reset` メソッドがあり、開発者がカスタムボタンをクリックした際に呼び出すことができる。また、 `reset` メソッドには、日付のリセット先を指定することができます。
+
+<CustomizingButtons />
+
+## Highlighting Specific Dates
+
+Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
+
+When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
+
+To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
+
+:::note
+This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
+:::
+
+### Using Array
+
+An array is better when the highlights apply to fixed dates, such as due dates.
+
+<HighlightedDatesArray />
+
+### Using Callback
+
+A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
+
+<HighlightedDatesCallback />
+
+## テーマ
+
+Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。
+
+この方法の利点は、`ion-datetime`だけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。
+
+<Theming />
+
+## タイムゾーン
+
+Ionicの `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動作に従い、datetimeコントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。
+
+[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなライブラリを使用して、datetimeの値を希望するタイムゾーンに変換することをお勧めします。
+
+以下は、ISO-8601文字列をユーザーのデバイスに設定されたタイムゾーンで表示するためのフォーマット例です。
+
+```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 });
+```
+
+### 日付の値のパース
+
+`ionChange` イベントは、イベントのペイロードに ISO-8601 形式の文字列として日付の値を出力します。アプリケーションのニーズに応じてこれをフォーマットするのは、開発者の責任です。日付の値をフォーマットするには、[date-fns](https://date-fns.org) を使用することを推奨します。
+
+以下は、月、日、年を表示するために ISO-8601 文字列をフォーマットする例である。
+
+```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.
+
+
+## 高度な日時の検証および操作
+
+datetime ピッカーは、正確なフォーマットを選択するシンプルさを提供し、
+標準化された [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を使用して、
+datetime 値を文字列として持続させることができます。
+しかし、 `ion-datetime` は、datetimeの値を検証したり操作したりするときに、
+すべての状況を解決しようとするわけではないことに注意することが重要です。
+もし、datetimeの値を特定のフォーマットからパースしたり、
+操作したり(例えば、日付に5日足したり、30分を引いたり)、
+あるいは、特定のロケールにデータをフォーマットする必要があるなら、
+JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使うことを強くお勧めします。
+
+## アクセシビリティ
+
+### キーボードナビゲーション
+
+`ion-datetime` は、コンポーネント内のフォーカス可能な要素間を移動するためのフルキーボードサポートを備えています。次の表は、それぞれのキーが何をするのかの詳細です。
+
+| 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.                                |
+
+#### 日付の表示
+
+| 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. |
+
+#### 時刻、月、年のホイール
+
+タイムホイールピッカーを使用する場合、列がフォーカスされているときに、数字キーで時、分の値を選択することができます。
+
+| 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
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface DatetimeCustomEvent extends CustomEvent {
+  detail: DatetimeChangeEventDetail;
+  target: HTMLIonDatetimeElement;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
new file mode 100644
index 00000000000..0b657e39078
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
@@ -0,0 +1,43 @@
+---
+title: "ion-fab-button"
+---
+import Props from '@ionic-internal/component-api/v7/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v7/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
+
+<head>
+  <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
+  <meta name="description" content="フローティング・アクション・ボタン（FAB）は、アプリ内の主要なアクションを表します。アイコンは円形で、ボタンを押すと、関連するアクションを開くことができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+フローティングアクションボタン（FAB）は、アプリケーションの主要なアクションを表します。デフォルトでは、円形の形をしています。ボタンが押されると、関連するアクションがさらに開かれることもあります。
+
+その名が示すように、FABは一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FABボタンを[fab](./fab)コンポーネントで包むことで実現されます。もしボタンがfabで包まれていない場合は、コンテンツと一緒にスクロールします。
+
+使用例については、[fab documentation](./fab)を参照してください。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
new file mode 100644
index 00000000000..b010268cc7c
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
@@ -0,0 +1,35 @@
+---
+title: "ion-fab-list"
+---
+import Props from '@ionic-internal/component-api/v7/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v7/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab-list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab-list/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+`ion-fab-list` 要素は、複数のfab buttonのコンテナです。この一連のfab buttonには、メインのfab buttonに関連するアクションが含まれ、メインのfab buttonをクリックすると表示されます。ボタンを表示する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に設定します。
+
+使用例については、[fab documentation](./fab)を参照してください。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
new file mode 100644
index 00000000000..33dde3ebccc
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
@@ -0,0 +1,95 @@
+---
+title: "ion-fab"
+---
+import Props from '@ionic-internal/component-api/v7/fab/props.md';
+import Events from '@ionic-internal/component-api/v7/fab/events.md';
+import Methods from '@ionic-internal/component-api/v7/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v7/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
+
+<head>
+  <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
+  <meta name="description" content="Fabs（フローティングアクションボタン）は、1つまたは複数のFabボタンを含むコンテナ要素です。Ionic FrameworkでAndroidおよびiOSアプリを作成する際にion-fabを使用します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Fabは、1つ以上の[fabボタン](./fab-button)を含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fabは1つのメインFabボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む1つ以上の[fabリスト](./fab-list)を含むことができます。
+
+## 基本的な使い方
+
+import BasicUsage from '@site/static/usage/v7/fab/basic/index.md';
+
+<BasicUsage />
+
+## List Side
+
+[fabリスト](./fab-list)コンポーネントの`side`プロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、`side`の値が全て異なる限り、複数のfabリストを持つことができます。
+
+import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
+
+<ListSide />
+
+## ポジション
+
+fabを固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。
+
+import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
+
+<Positioning />
+
+## ボタンサイズ
+
+メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。
+
+import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md';
+
+<ButtonSizing />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/fab/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.md';
+
+<CSSCustomProperties />
+
+### CSS Shadow Parts
+
+import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
+
+<CSSShadowParts />
+ 
+
+## アクセシビリティ
+
+### ラベル
+
+FABはアイコンのみを含むことができるため、開発者は各`ion-fab-button`インスタンスに `aria-label` を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
new file mode 100644
index 00000000000..32d64e2e426
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
@@ -0,0 +1,79 @@
+---
+title: "ion-footer"
+---
+import Props from '@ionic-internal/component-api/v7/footer/props.md';
+import Events from '@ionic-internal/component-api/v7/footer/events.md';
+import Methods from '@ionic-internal/component-api/v7/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v7/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
+
+<head>
+  <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
+  <meta name="description" content="footerはページの下部に配置されるルートコンポーネントのことです。Ionicのfooterはion-toolbarのラッパーとして、コンテンツ領域が正しいサイズであることを確認することができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上の [ツールバー](./toolbar) のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/footer/basic/index.md';
+
+<Basic />
+
+
+## 半透明のフッター
+
+フッターは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
+
+import Translucent from '@site/static/usage/v7/footer/translucent/index.md';
+
+<Translucent />
+
+
+## フェードフッター
+
+多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。
+
+import Fade from '@site/static/usage/v7/footer/fade/index.md';
+
+<Fade />
+
+
+### 仮想スクロールでの使用方法
+
+フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
+
+import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
+## ボーダー
+
+`"md"`モードでは、フッターは上部に `box-shadow` が表示されます。`"ios"`モードでは、上部に `border` が表示されます。これらは、フッターに `.ion-no-border` クラスを追加することで削除することができます。
+
+import NoBorder from '@site/static/usage/v7/footer/no-border/index.md';
+
+<NoBorder />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
new file mode 100644
index 00000000000..e2010ec93d4
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
@@ -0,0 +1,215 @@
+---
+title: "ion-grid"
+---
+import Props from '@ionic-internal/component-api/v7/grid/props.md';
+import Events from '@ionic-internal/component-api/v7/grid/events.md';
+import Methods from '@ionic-internal/component-api/v7/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v7/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
+
+<head>
+  <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
+  <meta name="description" content="Ion-Gridは、12カラムのレイアウトと画面サイズに応じて異なるブレークポイントを持つカスタムアプリケーションの表示レイアウトを構築するためのモバイルファーストのフレックスボックスシステムです。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の3つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ12列のレイアウトをベースにしています。カラムの数は、CSSを使ってカスタマイズすることができます。
+
+## 概要
+
+- グリッドは、すべての行と列のコンテナとして機能します。グリッドは、そのコンテナの幅を完全に占有します。
+  が、`fixed`プロパティを追加すると、画面サイズに応じた幅が設定されます。後述の[Fixed Grid](#fixed-grid)を参照してください。
+- 行は、列を適切に並べるための水平方向のグループです。
+- コンテンツは列の中に配置されるべきで、列だけが行の直属の子になることができる。
+- `size`プロパティは、1行あたりデフォルトの12列のうち、使用する列の数を示します。
+  つまり、`size="4"`をカラムに追加することで、グリッドの1/3、つまり12カラムのうち4カラムを占有することができます。
+- sizeに値を指定しないカラムは、自動的に等しい幅を持つようになります。例えば、4つのカラムは、それぞれ自動的に25％の幅になります。
+- カラムの幅はパーセンテージで設定されるため、常に流動的で親要素からの相対的なサイズになります。
+- 個々のカラムの間にはパディングがあります。しかし、パディングはグリッドから削除することができます。
+  カラムを表示するには、グリッドに `ion-no-padding` クラスを追加します。グリッドに適用できるその他のスタイルについては、[CSS Utilities](../layout/css-utilities) を参照してください。
+- グリッドの階層は5つあり、レスポンシブ・ブレークポイントごとに1つずつ、すべてのブレークポイント（特小）、小、中、大、特大が用意されています。
+- グリッドの階層は最小幅を基準としており、その階層とそれよりも大きい階層に適用されます。
+  (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
+- グリッドはCSS変数でカスタマイズすることができます。 [グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
+
+## デフォルトのブレイキング・ポイント
+
+グリッドのデフォルトのブレークポイントとそれに対応するプロパティは、以下の表で定義されています。ブレイクポイントの値は、現時点ではカスタマイズすることができません。カスタマイズできない理由については、 [メディアクエリの変数](../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) |
+
+
+## 基本的な使い方
+
+デフォルトでは、すべてのデバイスと画面サイズにおいて、列は行の中で同じ幅を占めます。
+
+import Basic from '@site/static/usage/v7/grid/basic/index.md';
+
+<Basic />
+
+
+## グリッドの固定
+
+グリッドはコンテナの幅を100%占有します。グリッドに `fixed` プロパティを追加することで、画面サイズに応じた幅を設定することができます。各ブレイクポイントのグリッドの幅は以下の表に記載されていますが、カスタマイズすることも可能です。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化することを確認できます。
+
+| 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/v7/grid/fixed/index.md';
+
+<Fixed />
+
+
+## カラムのサイズ
+
+カラムは、全体のカラム数のうち特定の数を占めるように特定のサイズに設定したり、コンテンツに応じて幅を変更したりすることができます。デフォルトのカラム数は12ですが、これはカスタマイズ可能です。詳しくは、下記の [カラム数](#number-of-columns) の項を参照してください。
+
+### コンテンツベースサイズ
+
+`size`を`"auto"`に設定することで、カラムはコンテンツの自然な幅に基づいたサイズを設定することができます。これは、カラムを特定のピクセル数のような絶対的な幅に設定するときに必要です。自動幅のカラムの隣にあるカラムは、行を埋めるようにリサイズされます。
+
+import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md';
+
+<SizeAuto />
+
+
+### 指定されたサイズ
+
+カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。
+
+import Size from '@site/static/usage/v7/grid/size/index.md';
+
+<Size />
+
+### レスポンシブサイズ
+
+`size`プロパティは、すべての [ブレークポイント](#default-breakpoints) の列幅を変更します。また、Columnでは、"size" の末尾にブレークポイント名を付加したいくつかのsizeプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムの幅を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムの幅が変化するのがわかります。
+
+import SizeResponsive from '@site/static/usage/v7/grid/size-responsive/index.md';
+
+<SizeResponsive />
+
+
+## 列のオフセット
+
+カラムは、全カラム数のうち一定のカラム数だけ右にずらすオフセットが可能です。
+
+### 指定されたオフセット
+
+カラムは、`offset`プロパティを用いて右に移動させることができます。このプロパティは、カラムの左マージンを指定したカラムの数だけ増やします。また、その右側にカラムが存在する場合は、そのカラムを移動させます。
+
+import Offset from '@site/static/usage/v7/grid/offset/index.md';
+
+<Offset />
+
+### レスポンシブオフセット
+
+`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの左マージンを変更します。また、カラムには、"offset"の末尾にブレークポイント名が付加されたいくつかのoffsetプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムのオフセットを変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムのオフセットが変化するのを確認できます。
+
+import OffsetResponsive from '@site/static/usage/v7/grid/offset-responsive/index.md';
+
+<OffsetResponsive />
+
+
+## コラム プッシュ＆プル
+
+カラムの総数のうち、一定のカラム数だけ、カラムを右に押したり、左に引いたりすることができます。
+
+### 指定されたプッシュ＆プル
+
+`push`と`pull`のプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、指定された列数だけ列の `left` と `right` を調整し、列の並び替えを簡単に行うことができます。この場合、他のカラムが配置されている場所にカラムを移動させると、カラムが重なることになります。
+
+import PushPull from '@site/static/usage/v7/grid/push-pull/index.md';
+
+<PushPull />
+
+### プッシュ＆プルのレスポンシブ対応
+
+`push`と`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの位置を変更します。また、カラムには、"push" / "pull "の末尾にブレークポイント名を付加した `push` と `pull` プロパティがいくつかあります。これらのプロパティは、画面サイズに応じてカラムの位置を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、列の位置が変化するのがわかります。
+
+import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md';
+
+<PushPullResponsive />
+
+## Alignment
+
+### 垂直方向のアライメント
+
+行に異なるクラスを追加することで、すべての列を行の内側に垂直に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities#flex-container-properties) を参照してください。
+
+import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/index.md';
+
+<VerticalAlignment />
+
+
+### 水平アライメント
+
+行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities.md#flex-container-properties) を参照してください。
+
+import HorizontalAlignment from '@site/static/usage/v7/grid/horizontal-alignment/index.md';
+
+<HorizontalAlignment />
+
+## グリッドのカスタマイズ
+
+組み込みのCSS変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。
+
+### 固定幅
+
+固定グリッドの幅は、CSS変数 `--ion-grid-width` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS変数を使用します。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化するのが確認できます。
+
+import Width from '@site/static/usage/v7/grid/customizing/width/index.md';
+
+<Width />
+
+### 列数
+
+グリッドのカラム数は `--ion-grid-columns` というCSS変数で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。
+
+import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md';
+
+<ColumnNumber />
+
+### Padding
+
+グリッドコンテナのpaddingは、CSS変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS変数を使用します。
+
+列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS変数を使用します。
+
+import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md';
+
+<Padding />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
new file mode 100644
index 00000000000..4fd35fd6473
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
@@ -0,0 +1,92 @@
+---
+title: "ion-header"
+---
+import Props from '@ionic-internal/component-api/v7/header/props.md';
+import Events from '@ionic-internal/component-api/v7/header/events.md';
+import Methods from '@ionic-internal/component-api/v7/header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/header/slots.md';
+
+<head>
+  <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
+  <meta name="description" content="ion-headerは、ツールバーを保持する親コンポーネントです。ion-headerは、ページの3つのルート要素のうちの1つである必要があることに注意することが重要です。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上の[ツールバー](./toolbar)のラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/header/basic/index.md';
+
+<Basic />
+
+
+## 半透明のヘッダー
+
+ヘッダーは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
+
+import Translucent from '@site/static/usage/v7/header/translucent/index.md';
+
+<Translucent />
+
+
+## 折りたたみのヘッダー
+
+Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
+
+import Condense from '@site/static/usage/v7/header/condense/index.md';
+
+<Condense />
+
+
+## フェードヘッダー
+
+多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの `collapse` プロパティを `"fade"` に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「ios」のときだけ適用されます。
+
+この機能は、[Condensed Header](#condensed-header)と組み合わせることができます。collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用されるはずです。
+
+import Fade from '@site/static/usage/v7/header/fade/index.md';
+
+<Fade />
+
+
+### 仮想スクロールの使用方法
+
+フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
+
+import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
+
+## Borders
+
+`"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。
+
+import NoBorder from '@site/static/usage/v7/header/no-border/index.md';
+
+<NoBorder />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
new file mode 100644
index 00000000000..14d903a5e5f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
@@ -0,0 +1,45 @@
+---
+title: 'ion-icon'
+---
+
+<head>
+  <title>ion-icon: Icon Component for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="Ion-icon is a component for displaying premium designed icons with support for SVG and web font."
+  />
+</head>
+
+Iconは、<a href="https://ionic.io/ionicons">Ionicons</a>ライブラリを通じて利用できるシンプルなコンポーネントで、すべてのIonic Frameworkアプリケーションにデフォルトでプリパッケージされています。Ioniconsのセットから任意のアイコン、またはカスタムSVGを表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。
+
+利用可能なアイコンのリストは <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a> をご覧ください。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/icon/basic/index.md';
+
+<Basic />
+
+
+## アクセシビリティ
+
+純粋に装飾的なコンテンツであるアイコンは、<code>aria-hidden="true"</code>を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。
+
+```html
+<ion-icon name="heart" aria-hidden="true"></ion-icon>
+```
+
+
+アイコンがインタラクティブな場合は、<code>aria-label</code>を追加することで代替テキストを定義する必要があります。
+
+```html
+<ion-icon name="heart" aria-label="Favorite"></ion-icon>
+```
+
+また、アイコンが説明する他の要素の中にある場合は、その要素に <code>aria-label</code> を付加し、 <code>aria-hidden</code> でアイコンを非表示とします。
+
+```html
+<ion-button aria-label="Favorite">
+  <ion-icon name="heart" aria-hidden="true"></ion-icon>
+</ion-button>
+```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
new file mode 100644
index 00000000000..02c5abb5b6f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
@@ -0,0 +1,46 @@
+---
+title: "ion-img"
+---
+
+import Props from '@ionic-internal/component-api/v7/img/props.md';
+import Events from '@ionic-internal/component-api/v7/img/events.md';
+import Methods from '@ionic-internal/component-api/v7/img/methods.md';
+import Parts from '@ionic-internal/component-api/v7/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/img/slots.md';
+
+<head>
+  <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
+  <meta name="description" content="Imgタグは、タグがビューポートにあるときに、画像を遅延して読み込みます。大きなリストを作成する際にこのコンポーネントを利用すると、画像が表示されているときだけ読み込まれます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Img は、タグがビューポートに表示されているときに画像をLazy Loadするタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) を内部的に使用します。Intersection Observerは、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は `setTimeout` で処理されます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/img/basic/index.md';
+
+<Basic />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
new file mode 100644
index 00000000000..9579435660b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
@@ -0,0 +1,34 @@
+---
+title: "ion-infinite-scroll-content"
+---
+
+import Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+`ion-infinite-scroll-content` コンポーネントは、`ion-infinite-scroll` で使用されるデフォルトの子コンポーネントです。無限スクロールのスピナーが表示されます。このスピナーはプラットフォームに応じて最適に表示され、無限スクロールの状態に応じて外観が変化します。`loadingSpinner` and `loadingText` プロパティを設定することにより、既定値のスピナーを変更したり、テキストを追加することができます。
+
+For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
new file mode 100644
index 00000000000..991fad7ee4d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
@@ -0,0 +1,115 @@
+---
+title: "ion-infinite-scroll"
+---
+
+import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md';
+import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
+
+<head>
+  <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
+  <meta name="description" content="ion-infinite-scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離だけスクロールしたときに実行されるアクションを呼び出します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+Infinite Scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離をスクロールしたときに実行されるアクションを呼び出します。
+
+ユーザが定義された距離に達したときに、`ionInfinite` イベントに割り当てられた関数が呼び出されます。この関数がすべてのタスクを完了したら、無限スクロールインスタンスに対して `complete()` メソッドを呼び出す必要があります。
+
+import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
+
+<Basic />
+
+## 無限スクロールのコンテンツ
+
+`ion-infinite-scroll`コンポーネントは、無限スクロールのロジックを持っています。コンテンツを表示するには、子コンポーネントが必要です。Ionicは、デフォルトでその `ion-infinite-scroll-content` コンポーネントを使用します。このコンポーネントは、無限スクロールを表示し、無限スクロールの状態に応じて外観を変更します。ユーザが使用しているプラットフォームに応じて最適なスピナーが表示されます。ただし、`ion-infinite-scroll-content` コンポーネントのプロパティを設定することにより、デフォルトのスピナーを変更したり、テキストを追加することができます。
+
+import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md';
+
+<InfiniteScrollContent />
+
+## Custom Content
+
+`ion-infinite-scroll` と `ion-infinite-scroll-content` コンポーネントを分離することで、開発者は必要に応じて独自のコンテンツコンポーネントを作成できます。このコンテンツには、SVG要素から固有のCSSアニメーションを持つ要素まで、あらゆるものを含めることができます。
+
+import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md';
+
+<CustomContent />
+
+## Virtual Scrollの使い方
+
+無限スクロールを機能させるには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content`のスクロールを無効にし、`.ion-content-scroll-host`クラスのターゲットで、どの要素コンテナがスクロールコンテナを担当するのかを指定する必要があります。
+
+```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>
+```
+
+## アクセシビリティ
+
+開発者は、ユーザーがスクロールすると追加されたり削除されたりするスクロール可能なリストアイテムに `role="feed"` 属性を割り当てる必要があります。
+
+個々のリストアイテムは `role="article"` を持つか、`<article>` 要素を直接使用しなければならない。
+
+例えば、`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>
+```
+
+その他の情報については、[ARIA: feed role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role) のドキュメントを参照してください。
+
+## Interfaces
+
+### InfiniteScrollCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface InfiniteScrollCustomEvent extends CustomEvent {
+  target: HTMLIonInfiniteScrollElement;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
new file mode 100644
index 00000000000..c28cb4dc359
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
@@ -0,0 +1,175 @@
+---
+title: "ion-input"
+---
+import Props from '@ionic-internal/component-api/v7/input/props.md';
+import Events from '@ionic-internal/component-api/v7/input/events.md';
+import Methods from '@ionic-internal/component-api/v7/input/methods.md';
+import Parts from '@ionic-internal/component-api/v7/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/input/slots.md';
+
+<head>
+  <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
+  <meta name="description" content="ion-inputは、HTMLのinput要素のラッパーで、カスタムな値型のスタイルと機能を備えています。デスクトップでも動作し、モバイルではキーボードと統合されます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+
+inputコンポーネントは、カスタム・スタイル設定と追加機能を持つHTMLのInput要素のラッパーです。HTML Inputとほとんど同じプロパティーを受け入れますが、デスクトップ・デバイスでは優れた動作をし、モバイル・デバイスではキーボードと統合されます。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/input/basic/index.md';
+
+<Basic />
+
+
+## Types
+
+input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
+
+import Types from '@site/static/usage/v7/input/types/index.md';
+
+<Types />
+
+
+## Label Placement
+
+ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+
+import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
+
+<LabelPlacement />
+
+
+## Clear Options
+
+Inputsには、入力の操作方法に応じて、Inputをクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Inputに `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されているInputは、デフォルトで `clearOnEdit` が有効になっています。
+
+import Clear from '@site/static/usage/v7/input/clear/index.md';
+
+<Clear />
+
+
+## Filled Inputs
+
+Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+
+`fill` スタイルはInputコンテナを視覚的に定義するため、`fill` を使用するInputは `ion-item` で使用すべきではありません。
+
+import Fill from '@site/static/usage/v7/input/fill/index.md';
+
+<Fill />
+
+
+## Helper & Error Text
+
+ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使用して入力の内部で使用することができます。エラーテキストは、 `ion-invalid` クラスと `ion-touched` クラスが `ion-input` に追加されていない限り表示されない。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。
+
+Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
+
+import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
+
+<HelperError />
+
+## Input Counter
+
+Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
+
+import Counter from '@site/static/usage/v7/input/counter/index.md';
+
+<Counter />
+
+## Filtering User Input
+
+開発者は `ionInput` イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。
+
+ステート変数に値を格納する場合、ステート変数と `ion-input` コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と `ion-input` コンポーネントの値が確実に同期されます。
+
+import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
+
+<FilteringData />
+
+## テーマ
+
+### Colors
+
+`color`プロパティを設定すると、各Inputのカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
+
+import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
+
+import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md';
+
+<CSSProps />
+
+## レガシーな Input 構文からの移行
+
+Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者は、この移行を一度に1つのInputで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+### 最新の構文の使い方
+
+最新の構文を使うには、3つのステップがあります。
+
+1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用します。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
+2. Input固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
+3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
+
+import Migration from '@site/static/usage/v7/input/migration/index.md';
+
+<Migration />
+
+### レガシー構文の使用
+
+Ionicは、アプリが最新のInput構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、そのInputのインスタンスにレガシー構文を使用するように強制できます。
+
+## Interfaces
+
+### InputChangeEventDetail
+
+```typescript
+interface InputChangeEventDetail {
+  value: string | undefined | null;
+}
+```
+
+### InputCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface InputCustomEvent extends CustomEvent {
+  detail: InputChangeEventDetail;
+  target: HTMLIonInputElement;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
new file mode 100644
index 00000000000..cef627db927
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
@@ -0,0 +1,63 @@
+---
+title: "ion-item-divider"
+---
+import Props from '@ionic-internal/component-api/v7/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v7/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
+
+<head>
+  <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
+  <meta name="description" content="Item Dividersは、リスト内のアイテムを区切るために使用するブロック要素です。リストヘッダーに似ていますが、項目のグループの間に挟みます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+アイテムディバイダは、リスト内の [アイテム](./item) を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/item-divider/basic/index.md';
+
+<Basic />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.md';
+
+<Colors />
+
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
new file mode 100644
index 00000000000..89ffdac16a0
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
@@ -0,0 +1,50 @@
+---
+title: "ion-item-group"
+---
+import Props from '@ionic-internal/component-api/v7/item-group/props.md';
+import Events from '@ionic-internal/component-api/v7/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-group/slots.md';
+
+<head>
+  <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
+  <meta name="description" content="ion-item-groupには、アイテムを複数のセクションに分割するためのアイテムディバイダを含めることができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+アイテムグループとは、類似の[アイテム](./item)をまとめて整理するためのコンテナです。アイテムグループには、アイテムを複数のセクションに分けるための[アイテムディバイダー](./item-divider)を含めることができます。また、[スライドアイテム](./item-sliding)をグループ化するために使用することができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/item-group/basic/index.md';
+
+<Basic />
+
+## Sliding Items
+
+import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.md';
+
+<SlidingItems />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
new file mode 100644
index 00000000000..ed84bdeb50b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
@@ -0,0 +1,42 @@
+---
+title: "ion-item-option"
+---
+import Props from '@ionic-internal/component-api/v7/item-option/props.md';
+import Events from '@ionic-internal/component-api/v7/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
+
+<head>
+  <title>ion-item-options: Option Button Components for Ionic Apps</title>
+  <meta name="description" content="ion-item-optionはion-item-slidingのオプションボタンで、ion-item-optionsの中に配置する必要があります。プロパティの詳細については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。アイテムオプション](./item-options)の中に配置する必要があります。ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。
+
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
new file mode 100644
index 00000000000..7c103eb5d20
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
@@ -0,0 +1,50 @@
+---
+title: "ion-item-options"
+---
+import Props from '@ionic-internal/component-api/v7/item-options/props.md';
+import Events from '@ionic-internal/component-api/v7/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-options/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-options/slots.md';
+
+<head>
+  <title>ion-item-options: Option Button Components for Ionic Apps</title>
+  <meta name="description" content="ion-item-optionsはion-item-slidingのためのものです。このオプションボタンは、開始側と終了側のどちらにも配置することができます。Ionicアプリでの使用については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[startまたはend](#side-description)のいずれかに配置することができます。
+
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
+
+
+## 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. |
+
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
new file mode 100644
index 00000000000..2f6fd70b029
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
@@ -0,0 +1,77 @@
+---
+title: "ion-item-sliding"
+---
+import Props from '@ionic-internal/component-api/v7/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v7/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
+
+<head>
+  <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
+  <meta name="description" content="ion-item-sliding コンポーネントには、ドラッグしてボタンを表示するアイテムが含まれています。スライドしたアイテムが左から右にスワイプされると、オプションが表示されます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として [item](./item) コンポーネントが必要です。表示させるオプションはすべて [item options](./item-options) 要素に記述する必要があります。
+
+
+## 基本的な使い方
+
+スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。
+
+import Basic from '@site/static/usage/v7/item-sliding/basic/index.md';
+
+<Basic />
+
+
+## Icon Options
+
+[アイテムオプション](./item-option) でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な [アイテムオプションスロット](./item-option#slots) に変更することで位置を変更することが可能です。
+
+import Icons from '@site/static/usage/v7/item-sliding/icons/index.md';
+
+<Icons />
+
+
+## 拡張可能なオプション
+
+オプションは、あるポイントを超えてスワイプすると、アイテムの幅いっぱいに広がるように拡張することができます。これは、 [item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができるようになります。
+
+import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md';
+
+<Expandable />
+
+
+## Interfaces
+
+### ItemSlidingCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface ItemSlidingCustomEvent extends CustomEvent {
+  target: HTMLIonItemSlidingElement;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
new file mode 100644
index 00000000000..4310fb7eb4f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
@@ -0,0 +1,152 @@
+---
+title: "ion-item"
+---
+import Props from '@ionic-internal/component-api/v7/item/props.md';
+import Events from '@ionic-internal/component-api/v7/item/events.md';
+import Methods from '@ionic-internal/component-api/v7/item/methods.md';
+import Parts from '@ionic-internal/component-api/v7/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/item/slots.md';
+
+<head>
+  <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
+  <meta name="description" content="iOS/Android用ion-item要素は、テキスト、アイコン、画像、その他のカスタム要素を含みます。これらはリストに配置され、入力、削除、編集などが可能です。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒に[list](./list)に配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。
+
+## 基本的な使い方
+
+アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では `.ion-text-wrap` を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照してください。
+
+import Basic from '@site/static/usage/v7/item/basic/index.md';
+
+<Basic />
+
+
+## クリック可能なItems
+
+`href` か `button` プロパティが設定されている場合、itemは "clickable（クリック可能）" と見なされます。clickableなitemsには、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickableなitemは、`md` modeではrippleエフェクトを持ち、`ios` modeではハイライト表示され、`ios` modeでの [detail arrow](/#detail-arrows) が表示されます。
+
+import Clickable from '@site/static/usage/v7/item/clickable/index.md';
+
+<Clickable />
+
+
+## Detail Arrows
+
+デフォルトでは、[clickableなitems](/#clickable-items) は、`ios` modeで右矢印アイコンを表示します。clickableな要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。
+
+import DetailArrows from '@site/static/usage/v7/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
+
+アイテムはデフォルトで下部のボーダーを挿入して表示します。ボーダーは左側にパディングを持ち、 `"start"` スロットにスロットされたコンテンツの下に表示されることはありません。 `lines` プロパティを `"full"` または `"none"` に変更すると、それぞれ全幅のボーダーが表示され、ボーダーを表示しないようになります。
+
+import Lines from '@site/static/usage/v7/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/v7/item/media/index.md';
+
+<Media />
+
+
+## Buttons in Items
+
+Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
+
+import Buttons from '@site/static/usage/v7/item/buttons/index.md';
+
+<Buttons />
+
+
+## Icons in Items
+
+import Icons from '@site/static/usage/v7/item/icons/index.md';
+
+<Icons />
+
+
+## Item Inputs
+
+import Inputs from '@site/static/usage/v7/item/inputs/index.md';
+
+<Inputs />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/item/theming/colors/index.md';
+
+<Colors />
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+### Inputハイライト
+
+input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Inputの下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。
+
+ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、Inputのハイライトは `primary` カラーを使用します。Inputが有効な場合は `success` カラーが使用され、無効なInputは `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。
+
+import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
+
+<InputHighlight />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
new file mode 100644
index 00000000000..c3e61246dfe
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
@@ -0,0 +1,66 @@
+---
+title: "ion-label"
+---
+import Props from '@ionic-internal/component-api/v7/label/props.md';
+import Events from '@ionic-internal/component-api/v7/label/events.md';
+import Methods from '@ionic-internal/component-api/v7/label/methods.md';
+import Parts from '@ionic-internal/component-api/v7/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/label/slots.md';
+
+<head>
+  <title>Item Label Color and Properties for Applications | ion-label</title>
+  <meta name="description" content="Labelは、他のIonicコンポーネントと組み合わせて使用できるラッパー要素です。ion-labelでアイテムラベルの色やその他のプロパティを簡単にデザインできます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+Labelは `ion-item`、`ion-input`、`ion-toggle` 等と共に使用できるラッパー(wrapper)要素です。item内のlabelの位置はinline、fixed、stacked、またはfloatingにすることができます。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/label/basic/index.md';
+
+<Basic />
+
+## Item Labels
+
+import Item from '@site/static/usage/v7/label/item/index.md';
+
+<Item />
+
+## Input Labels
+
+import Input from '@site/static/usage/v7/label/input/index.md';
+
+<Input />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/label/theming/colors/index.md';
+
+<Colors />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
new file mode 100644
index 00000000000..5af4f78c8b2
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
@@ -0,0 +1,74 @@
+---
+title: "ion-list-header"
+---
+import Props from '@ionic-internal/component-api/v7/list-header/props.md';
+import Events from '@ionic-internal/component-api/v7/list-header/events.md';
+import Methods from '@ionic-internal/component-api/v7/list-header/methods.md';
+import Parts from '@ionic-internal/component-api/v7/list-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/list-header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/list-header/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+リストヘッダーは、[リスト](./list)の内容を記述するために使用されるブロック要素です。アイテムディバイダー](./item-divider)とは異なり、リストヘッダーは[アイテム](./item)のリストの先頭で一度だけ使用する必要があります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/list-header/basic/index.md';
+
+<Basic />
+
+
+## リストヘッダーのボタン
+
+リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。
+
+import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
+
+<Buttons />
+
+
+## List Headerの下線
+
+リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。
+
+import Lines from '@site/static/usage/v7/list-header/lines/index.md';
+
+<Lines />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/list-header/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
new file mode 100644
index 00000000000..dd788ff02cc
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
@@ -0,0 +1,66 @@
+---
+title: "ion-list"
+---
+import Props from '@ionic-internal/component-api/v7/list/props.md';
+import Events from '@ionic-internal/component-api/v7/list/events.md';
+import Methods from '@ionic-internal/component-api/v7/list/methods.md';
+import Parts from '@ionic-internal/component-api/v7/list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/list/slots.md';
+
+<head>
+  <title>ion-list: Item List View Component for iOS and Android Apps</title>
+  <meta name="description" content="ion-listsは、テキスト、アイコン、トグルなどを含むアイテムの複数の行で構成されています。iOSおよびAndroidのIonicアプリのリストビューコンポーネントについて説明します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+リストは、Text、Buttons、Toggleを含むこと [アイテム](./item) の複数の行で構成されています。
+アイコンやサムネイルなど、さまざまな機能を備えています。リストには一般的に、画像やテキストなど、類似したデータ内容を持つアイテムが含まれます。
+
+リストは、アイテムをスワイプしてオプションを表示したり、ドラッグしてリスト内のアイテムを[並び替え](./reorder)したり、アイテムを削除したりするなどの操作をサポートしています。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/list/basic/index.md';
+
+<Basic />
+
+
+## Inset List
+
+リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。
+
+import Inset from '@site/static/usage/v7/list/inset/index.md';
+
+<Inset />
+
+
+## List Lines
+
+リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左paddingで調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。
+
+import Lines from '@site/static/usage/v7/list/lines/index.md';
+
+<Lines />
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
new file mode 100644
index 00000000000..b2bdd3a60dd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
@@ -0,0 +1,114 @@
+---
+title: "ion-loading"
+---
+import Props from '@ionic-internal/component-api/v7/loading/props.md';
+import Events from '@ionic-internal/component-api/v7/loading/events.md';
+import Methods from '@ionic-internal/component-api/v7/loading/methods.md';
+import Parts from '@ionic-internal/component-api/v7/loading/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
+
+<head>
+  <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
+  <meta name="description" content="ion-loadingは、ユーザーのインタラクションをブロックしながら、アクティビティを表示します。ローディングインジケータは、アプリのコンテンツの上に表示され、解除することができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+
+ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションでbackdropが含まれており、`showBackdrop: false` で無効にすることができます。
+
+## 基本的な使い方
+
+一度表示されると、ロードインジケータはデフォルトで無期限に表示されます。開発者は、コンポーネント上で `dismiss()` メソッドを呼び出すことで、作成後にローディングインジケータを手動で解除することができます。onDidDismiss` 関数を呼び出すと、ローディングインジケータが解除された後にアクションを実行することができます。
+
+また、ロードオプションの `duration` に表示するミリ秒数を渡すことで、特定の時間が経過した後にロードインジケータを自動的に解除するよう設定することもできます。
+
+### インラインロード (推奨)
+
+import Inline from '@site/static/usage/v7/loading/inline/index.md';
+
+<Inline />
+
+### Controller
+
+import Controller from '@site/static/usage/v7/loading/controller/index.md';
+
+<Controller />
+
+## Customization
+
+### スピナー
+
+使用するスピナーは `spinner` プロパティを使用してカスタマイズすることができます。オプションの完全なリストは [spinner property documentation](#spinner) を参照してください。
+
+import Spinners from '@site/static/usage/v7/loading/spinners/index.md';
+
+<Spinners />
+
+### テーマ
+
+Loading は scoped encapsulation を使用しています。これは、実行時に各スタイルに追加のクラスを付加することで、自動的に CSS をスコープ化することを意味します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+
+カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。
+
+import Theming from '@site/static/usage/v7/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.
+:::
+
+## アクセシビリティ
+
+Ionicは自動的にLoadingの`role`を[`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)に設定します。
+
+Loadingに`message`プロパティが定義されている場合、`aria-labelledby`属性は自動的にmessage要素のIDに設定されます。そうでない場合、`aria-labelledby`は設定されず、開発者は `htmlAttributes` プロパティを使用して `aria-label` を提供する必要があります。
+
+すべてのARIA属性は、Loadingの`htmlAttributes`プロパティにカスタム値を定義することによって、手動で上書きすることができます。
+
+## 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;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
new file mode 100644
index 00000000000..16fa8831107
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
@@ -0,0 +1,42 @@
+---
+title: "ion-menu-button"
+---
+import Props from '@ionic-internal/component-api/v7/menu-button/props.md';
+import Events from '@ionic-internal/component-api/v7/menu-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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は、アプリのページでメニューを開くためのアイコンと機能を自動的に作成するコンポーネントです。ion-menu-buttonの詳細については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Menu Buttonコンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。
+
+詳しくは、[menu](./menu)のドキュメントをご覧ください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
new file mode 100644
index 00000000000..1c085782b02
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
@@ -0,0 +1,44 @@
+---
+title: "ion-menu-toggle"
+---
+import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md';
+import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
+
+<head>
+  <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
+  <meta name="description" content="MenuToggleコンポーネントは、メニューの開閉を切り替えるために使用します。デフォルトでは、選択されたメニューがアクティブなときにのみ表示されます。使用方法についてもっと読む。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Menu Toggleコンポーネントは、メニューの開閉を切り替えるために使用することができます。
+
+メニュートグルは、選択されたメニューが有効な場合にのみ表示されます。メニューが無効になっている場合や、分割ペインとして表示されている場合は、メニュートグルは非表示になります。常にメニュートグルを表示するには、`autoHide`プロパティを`false`に設定します。
+
+詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照してください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
new file mode 100644
index 00000000000..dd952566387
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
@@ -0,0 +1,90 @@
+---
+title: "ion-menu"
+---
+import Props from '@ionic-internal/component-api/v7/menu/props.md';
+import Events from '@ionic-internal/component-api/v7/menu/events.md';
+import Methods from '@ionic-internal/component-api/v7/menu/methods.md';
+import Parts from '@ionic-internal/component-api/v7/menu/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/menu/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/menu/slots.md';
+
+<head>
+  <title>ion-menu: API Framework Docs for Types of Menu Components</title>
+  <meta name="description" content="ion-menuコンポーネントは、現在のビューの横からスライドして入ってくるナビゲーションドロワーです。Ionic APIで利用可能なメニューの種類については、フレームワークのドキュメントをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Menuコンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。
+デフォルトでは左からスライドしますが、サイドはオーバーライドできます。
+Menuの表示はmodeによって異なりますが、表示するtypeはmenuのtypeによって変更することができます。
+menu要素は、root content要素と同じ深度である必要があります。
+コンテンツにつけるMenuの数に制限はありません。
+これらはテンプレートから、またはプログラムでMenuControllerを使用して制御できます。
+
+## 基本的な使い方
+
+import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
+
+<BasicUsage />
+
+## Menu Toggle
+
+[ion-menu-toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
+
+import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
+
+<MenuToggle />
+
+## Menu Types
+
+`type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
+
+import MenuType from '@site/static/usage/v7/menu/type/index.md';
+
+<MenuType />
+
+## テーマ
+
+### CSS Shadow Parts
+
+import Theming from '@site/static/usage/v7/menu/theming/index.md';
+
+<Theming />
+
+## Interfaces
+
+### MenuCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface MenuCustomEvent<T = any> extends CustomEvent {
+  detail: T;
+  target: HTMLIonMenuElement;
+}
+```
+
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
new file mode 100644
index 00000000000..987532187c3
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
@@ -0,0 +1,293 @@
+---
+title: "ion-modal"
+---
+import Props from '@ionic-internal/component-api/v7/modal/props.md';
+import Events from '@ionic-internal/component-api/v7/modal/events.md';
+import Methods from '@ionic-internal/component-api/v7/modal/methods.md';
+import Parts from '@ionic-internal/component-api/v7/modal/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/modal/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/modal/slots.md';
+
+<head>
+  <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
+  <meta name="description" content="ion-modal は、モバイルアプリケーションのコンテンツの上に表示されるダイアログで、インタラクションを再開する前に解除する必要があります。カスタムモーダルコンポーネントについて詳しくはこちら" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Modalは、アプリのコンテンツの上に表示されるダイアログであり、インタラクションを再開する前にはアプリによって消されなければならない。選択できるオプションが多い場合や、リスト内の項目をフィルタする場合、およびその他の多くのユースケースで、Selectコンポーネントとして役立ちます。
+
+
+## インラインモーダル(推奨)
+
+テンプレートに直接コンポーネントを記述することで、 `ion-modal` を使用することができます。これにより、モーダルを表示するために必要なハンドラの数を減らすことができます。
+
+Angular、React、Vue で `ion-modal` を使用する場合、渡されたコンポーネントはモーダルが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークなしで `ion-modal` を使用しても、渡されたコンポーネントは破棄されません。この機能が必要な場合は、代わりに `modalController` を使用することをお勧めします。
+
+import InlineModalTriggerExample from '@site/static/usage/v7/modal/inline/basic/index.md';
+
+<InlineModalTriggerExample />
+
+### `isOpen` の使用
+
+`ion-modal` の `isOpen` プロパティを使用すると、開発者がアプリケーションの状態からモーダルの表示状態を制御することができます。つまり、 `isOpen` を `true` に設定するとモーダルが表示され、 `isOpen` を `false` に設定するとモーダルが解除されます。
+
+`isOpen` は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に `false` にセットされることはありません。開発者は `ionModalDidDismiss` または `didDismiss` イベントを監視して、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-modal` の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供するboolean値だけを気にすればいいです。双方向のデータバインディングでは、モーダルはboolean値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
+
+import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open/index.md';
+
+<InlineModalIsOpenExample />
+
+## モーダルコントローラ
+
+`ModalController` を使用すると、開発者はプログラムによって `ion-modal` を表示させることができます。開発者は、モーダルの表示と非表示を完全に制御することができます。
+
+import ControllerExample from '@site/static/usage/v7/modal/controller/index.md';
+
+<ControllerExample />
+
+## モーダルの終了を防止する
+
+モーダルにデータを入力しているとき、誤ってデータが失われないようにする方法があると便利です。 `ion-modal` の `canDismiss` プロパティは、モーダルをいつ終了させるかを開発者がコントロールできるようにします。
+
+canDismiss`プロパティの使用方法には、boolean値の設定とコールバック関数の設定の2種類があります。
+
+:::note
+ Note: シートモーダルでは、`0` ブレークポイントが設定されていない場合、スワイプ時に `canDismiss` はチェックされません。しかし、`Esc` やハードウェアのバックボタンを押すと、チェックされます。
+:::
+
+### boolean値の設定
+
+開発者は `canDismiss` にboolean値を設定することができます。 `canDismiss` が `true` の場合、ユーザーがモーダルを閉じようとすると、モーダルは閉じます。 `canDismiss` が `false` の場合、ユーザーがモーダルを閉じようとしても、モーダルは閉じません。
+
+boolean値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は `canDismiss` を `false` に設定し、チェックボックスがチェックされたら `true` に更新することが可能です。
+
+import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/boolean/index.md';
+
+<CanDismissBooleanExample />
+
+### コールバック関数を設定する
+
+開発者は `canDismiss` を関数として設定することができます。この関数は、 `true` か `false` のどちらかに解決する `Promise` を返さなければなりません。もし、約束が `true` に解決されたら、モーダルは解除されます。もし、プロミスが `false` に解決された場合、モーダルは解除されません。
+
+コールバック関数を設定するのは、モーダルを終了する前に確認ダイアログを表示するなど、終了条件が複雑な場合に使用する必要があります。ユーザーがこのダイアログで選択したオプションは、モーダルの終了を続行するかどうかの判断に使用されます。
+
+コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionicが、あなたのコールバック関数が何を解決するか事前に知らないためです。
+
+import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/function/index.md';
+
+<CanDismissFunctionExample />
+
+### スワイプで閉じないようにする
+
+開発者は、ユーザーがスワイプしてモーダルを閉じるのを防ぎたい場合があります。これは `canDismiss` のコールバック関数を設定し、`role` が `gesture` でないことをチェックすることで実現できます。
+
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md';
+
+<CanDismissPreventSwipeToCloseExample />
+
+## モーダルの種類
+ 
+### 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`.
+
+開発者は、アプリのメインコンテンツの上にカードが積み重なったように表示されるカードモーダル効果を作成することができます。カードモーダルを作成するには、開発者は `ion-modal` に `presentingElement` プロパティと `swipeToClose` プロパティを設定する必要があります。
+
+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/v7/modal/card/basic/index.md';
+
+<CardExample />
+
+### シートモーダル
+
+マップアプリのドロワーコンポーネントに似たシートモーダルエフェクトを作成します。シートモーダルを作成するには、`ion-modal` に `breakpoints` と `initialBreakpoint` プロパティを設定する必要があります。
+
+`breakpoints`プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。 `breakpoints` プロパティが `[0, 0.5, 1]` の場合、シートをスワイプすると、モーダルの 0%、50%、100%を表示することができることを示します。モーダルが0%にスワイプされると、モーダルは自動的にディスクローズされます。 `0` ブレークポイントが含まれていない場合、スワイプ時にモーダルを解除することはできませんが、`Esc` またはハードウェアの戻るボタンを押すことで解除することができることに注意してください。
+
+`initialBreakpoint` プロパティは、シート モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。 `initialBreakpoint` の値は、 `breakpoints` 配列にも存在する必要があります。例えば、 `breakpoints` の値が `[0, 0.5, 1]` である場合、 `initialBreakpoint` の値が `0.5` であれば、 `breakpoints` 配列に `0.5` が存在するため有効であると考えられます。 `0.25` は `breakpoints` 配列に存在しないので、 `initialBreakpoint` の値は無効になります。
+
+`backdropBreakpoint` プロパティは、 `ion-backdrop` がフェードインし始めるポイントをカスタマイズするために使用することができます。これは、シートの下にインタラクティブなコンテンツがあるようなインタフェースを作成する際に便利です。よくある使用例としては、シートが完全に展開されるまでマップがインタラクティブになるような、マップをオーバーレイするシートモーダルです。
+
+import SheetExample from '@site/static/usage/v7/modal/sheet/basic/index.md';
+
+<SheetExample />
+
+#### 背景コンテンツとのインタラクション
+
+import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/background-content/index.md';
+
+<SheetBackgroundContentExample />
+
+#### ハンドルの動作
+
+シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。
+
+import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle-behavior/index.md';
+
+<SheetHandleBehaviorExample />
+
+## スタイリング
+
+モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。この動作は、インライン モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
+
+:::note
+IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。詳しくは、以下のAngularセクションの [Style Placement](#style-placement) をお読みください。
+:::
+
+
+:::note
+`ion-modal` は、積み重ねられたモーダルは同じサイズであるという前提で動作します。その結果、後続の各モーダルはボックスシャドウを持たず、背景の不透明度は `0` になります。これは、モーダルが追加されるたびに影や背景が濃くなるのを避けるためです。これは、CSS 変数 `--box-shadow` と `--backdrop-opacity` を設定することで変更することができます。
+:::
+
+``` 
+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/v7/modal/styling/theming/index.md';
+
+<ThemeExample />
+
+### アニメーション
+
+アニメーションビルダーを使用し、`enterAnimation` と `leaveAnimation` にアニメーションを割り当てることで、表示時、非表示時のアニメーションをカスタマイズすることができます。
+
+import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/index.md';
+
+<AnimationsExample />
+
+## Custom Dialogs
+
+`ion-modal`は、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、[ion-alert](./alert)や[ion-loading](./loading)などのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。
+
+import CustomDialogs from '@site/static/usage/v7/modal/custom-dialogs/index.md';
+
+<CustomDialogs />
+
+カスタムダイアログを作成する際に注意すべき点がいくつかあります。
+
+* `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。
+* カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。
+
+## Interfaces
+
+### ModalOptions
+
+下記は `modalController` を使用する際に利用できるすべてのオプションです。これらのオプションは、 `modalController.create()` を呼び出す際に指定します。
+
+```typescript
+interface ModalOptions {
+  component: any;
+  componentProps?: { [key: string]: any };
+  presentingElement?: HTMLElement;
+  showBackdrop?: boolean;
+  backdropDismiss?: boolean;
+  cssClass?: string | string[];
+  animated?: boolean;
+  canDismiss?: boolean | ((data?: any, role?: string) => 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
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface ModalCustomEvent extends CustomEvent {
+  target: HTMLIonModalElement;
+}
+```
+
+## アクセシビリティ
+
+### Keyboard Navigation
+
+| Key   | Function            |
+| ----- | ------------------- |
+| `Esc` | Dismisses the modal |
+
+
+### ラベル
+
+モーダルには [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) という役割があります。そのため、開発者はモーダルに適切なラベル付けを行う必要があります。モーダルが `ion-title` を使用している場合、 `ion-modal` で [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) を設定すると、内部のテキストをモーダル自体のラベルに使用することができます。モーダルに追加の説明テキストが含まれている場合、このテキストは [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使ってモーダルと関連付けることができます。
+
+### スクリーンリーダー
+
+モーダルには `aria-modal` 属性が適用されています。この属性は、支援技術によるナビゲーションをモーダル要素のコンテンツに制限させることがあります。その結果、次や前の項目に移動するジェスチャを使用しても、モーダルの外側の要素にフォーカスが当たらない場合があります。これは、`backdropBreakpoint` プロパティを使用して、シート モーダルでバックドロップを無効にした場合にも当てはまります。
+
+開発者が手動でフォーカスを移動しても、アシストはモーダル要素のコンテンツへのナビゲーションを制限しません。ただし、Ionic では、フォーカスのトラッピングが有効になっているモーダルに対して、モーダルの外側に手動でフォーカスを移動することはサポートされていません。
+
+See https://w3c.github.io/aria/#aria-modal for more information.
+
+### フォーカスのトラッピング
+
+モーダルが表示されると、フォーカスは表示されたモーダルの内側に閉じ込められます。ユーザーは、モーダル内の他のインタラクティブ要素にフォーカスを合わせることができますが、モーダルが表示されている間は、モーダルの外側のインタラクティブ要素にフォーカスを合わせることができません。複数のスタック モーダルを表示するアプリケーションでは、最後に表示されたモーダルにフォーカスが移動します。
+
+`backdropBreakpoint` プロパティによって背景が無効にされたシート モーダルは、フォーカスのトラッピングの対象にはなりません。
+
+### シートモーダル
+
+シートモーダルでは、`backdropBreakpoint` プロパティが使用されているとき、ユーザがモーダルの後ろのコンテンツとインタラクトできるようにします。バックドロップは、指定された `backdropBreakpoint` までは無効になり、それ以降は有効になります。
+
+バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。入力支援は、`aria-modal` の使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。オートフォーカスなどの機能は、ユーザーに警告することなく、支援技術が 2つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。
+
+## パフォーマンス
+
+### インナー コンテンツのマウント
+
+インラインの `ion-modal` のコンテンツは、閉じられるとアンマウントされます。このコンテンツがレンダリングに時間がかかる場合、開発者は `keepContentsMounted` プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。これにより、モーダルが開かれたときにインナー コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。
+
+import Mount from '@site/static/usage/v7/modal/performance/mount/index.md';
+
+<Mount />
+
+開発者は `keepContentsMounted` を使用する際に、以下の点に注意する必要があります。
+
+- この機能は、既存のパフォーマンスの問題に対処するための最後の手段として使用すべきです。この機能を使用する前に、パフォーマンスのボトルネックを特定し、解決するように努めてください。さらに、パフォーマンスの問題を予測するためにこの機能を使用しないでください。
+
+- この機能は、JavaScriptフレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。
+
+- この機能はインラインモーダルでのみ動作します。 `modalController` で作成されたモーダルは先に作成されないので、インナーコンテンツも作成されません。
+
+- インナー コンポーネントの JavaScript Framework ライフサイクル フックはすべて、モーダルが表示されたときではなく、モーダルがマウントされたときに実行されます。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
new file mode 100644
index 00000000000..57352d56999
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
@@ -0,0 +1,42 @@
+---
+title: "ion-nav-link"
+---
+import Props from '@ionic-internal/component-api/v7/nav-link/props.md';
+import Events from '@ionic-internal/component-api/v7/nav-link/events.md';
+import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md';
+import Parts from '@ionic-internal/component-api/v7/nav-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
+
+<head>
+  <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
+  <meta name="description" content="ナビゲーションリンクは、指定されたコンポーネントにナビゲートします。これは、push(), pop(), setRoot() メソッドを呼び出すための要素形式です。ion-nav-linkの詳細については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+ナビゲーションリンクは指定されたコンポーネントに移動するために使用されます。コンポーネントは `forward`, `back` または `root` コンポーネントとして移動することができます。
+
+これは、ナビゲーションコントローラの `push()`, `pop()`, `setRoot()` メソッドを呼び出すための要素形式となります。
+
+See the [nav](./nav#using-navlink) documentation for more information.
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
new file mode 100644
index 00000000000..61e847bcf50
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
@@ -0,0 +1,62 @@
+---
+title: "ion-nav"
+---
+import Props from '@ionic-internal/component-api/v7/nav/props.md';
+import Events from '@ionic-internal/component-api/v7/nav/events.md';
+import Methods from '@ionic-internal/component-api/v7/nav/methods.md';
+import Parts from '@ionic-internal/component-api/v7/nav/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
+
+<head>
+  <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
+  <meta name="description" content="ion-navは、任意のコンポーネントをロードしたり、新しいコンポーネントをスタックにPushするために単独で利用できます。ナビビューをロードしたり、他をプッシュしても、ルータ全体に影響を与えることはありません。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
+
+RouterOutletとは異なり、Navは特定のルーターに関連付けられていません。つまり、Navコンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリのURLに縛られないモーダルを持つことができるユースケースに適しています。
+
+## NavLinkを利用する
+
+NavLinkは、Navと対話する際の簡略化されたAPIです。開発者は、コンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
+
+import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
+
+<NavLinkExample />
+
+## Interfaces
+
+### NavCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface NavCustomEvent extends CustomEvent {
+  target: HTMLIonNavElement;
+}
+```
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
new file mode 100644
index 00000000000..22ba5850db2
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
@@ -0,0 +1,65 @@
+---
+title: "ion-note"
+---
+import Props from '@ionic-internal/component-api/v7/note/props.md';
+import Events from '@ionic-internal/component-api/v7/note/events.md';
+import Methods from '@ionic-internal/component-api/v7/note/methods.md';
+import Parts from '@ionic-internal/component-api/v7/note/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/note/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/note/slots.md';
+
+<head>
+  <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
+  <meta name="description" content="ion-notesは、一般的に詳細な情報を提供するテキスト要素です。iOSおよびAndroidのIonicアプリでnotesをどのように使用し、どのようにスタイリングできるかをご紹介します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Noteは、一般的に詳細情報を提供するサブタイトルとして使用されるテキスト要素です。デフォルトではグレーで表示されるように設計されています。Noteは、メタデータテキストとしてアイテム内で使用することができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/note/basic/index.md';
+
+<Basic />
+
+## Item Notes
+
+import Item from '@site/static/usage/v7/note/item/index.md';
+
+<Item />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/note/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
new file mode 100644
index 00000000000..863fbd4e69c
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
@@ -0,0 +1,142 @@
+---
+title: "ion-picker"
+---
+import Props from '@ionic-internal/component-api/v7/picker/props.md';
+import Events from '@ionic-internal/component-api/v7/picker/events.md';
+import Methods from '@ionic-internal/component-api/v7/picker/methods.md';
+import Parts from '@ionic-internal/component-api/v7/picker/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
+
+<head>
+  <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
+  <meta name="description" content="Pickerは、ボタンの列とその下にコラムを表示するダイアログです。イオンピッカーは、アプリのコンテンツの上、そしてビューポートの下に表示されます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+Pickerは、画面下にボタンと列の行を表示するダイアログです。アプリケーションのコンテンツの上部とビューポートの下部に表示されます。
+
+## インラインピッカー（推奨）
+
+`ion-picker`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ピッカーを表示するために必要なハンドラの数を減らすことができます。
+
+import Trigger from '@site/static/usage/v7/picker/inline/trigger/index.md';
+
+<Trigger />
+
+### `isOpen` を使う
+
+`ion-picker` の `isOpen` プロパティにより、開発者はアプリケーションの状態からピッカーの表示状態を制御することができます。つまり、`isOpen` を `true` に設定するとピッカーが表示され、`isOpen` を `false` に設定するとピッカーは退場します。
+
+`isOpen` は一方通行のデータバインディングを使用しているため、ピッカーが終了したときに自動的に `false` に設定されることはありません。開発者は `ionPickerDidDismiss` または `didDismiss` イベントを待ち、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-picker`の内部がアプリケーションの状態と密に結合するのを防ぐためです。一方通行のデータバインディングでは、ピッカーはリアクティブ変数が提供するブーリアン値のみに関心を持つ必要があります。一方通行のデータバインディングでは、ピッカーはリアクティブ変数のブール値だけでなく、リアクティブ変数の存在も気にする必要があります。このため、非決定的な動作が発生し、アプリケーションのデバッグが困難になる可能性があります。
+
+import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md';
+
+<IsOpen />
+
+## Controller Pickers
+
+`pickerController`は、ピッカーの表示・非表示をより細かく制御する必要がある場合に使用することができます。
+
+import Controller from '@site/static/usage/v7/picker/controller/index.md';
+
+<Controller />
+
+## マルチカラム
+
+`columns`プロパティは、異なる選択肢を複数の列で表示するピッカーを表示するために使用することができます。
+
+import MultipleColumn from '@site/static/usage/v7/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;
+  /**
+   * The optional text to assign as the aria-label on the picker column option.
+   */
+  ariaLabel?: string;
+}
+```
+
+### 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;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
new file mode 100644
index 00000000000..f6323977ebd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
@@ -0,0 +1,259 @@
+---
+title: "ion-popover"
+---
+import Props from '@ionic-internal/component-api/v7/popover/props.md';
+import Events from '@ionic-internal/component-api/v7/popover/events.md';
+import Methods from '@ionic-internal/component-api/v7/popover/methods.md';
+import Parts from '@ionic-internal/component-api/v7/popover/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
+
+<head>
+  <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
+  <meta name="description" content="ion-popoverは、現在のページの上に表示されるダイアログです。iOSとAndroidデバイス用のpopover UIコンポーネントとCSSカスタムプロパティについて説明します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Popoverは、現在のページの上部に表示されるダイアログです。これは何にでも使用できますが、通常はナビゲーションバーに収まらないオーバーフローアクションに使用されます。
+
+`ion-popover` を使用するには、インラインで使用する方法と `popoverController` を使用する方法がります。それぞれの方法には異なる考慮点があるので、あなたのユースケースに最も適した方法を使用するようにしましょう。
+
+## インラインポップオーバー
+
+`ion-popover` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ポップオーバーを表示するために必要なハンドラの数を減らすことができます。
+
+Angular、React、Vue で `ion-popover` を使用する場合、渡されたコンポーネントはポップオーバーが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークを使わずに `ion-popover` を使用しても、渡したコンポーネントは破棄されない。この機能が必要な場合は、代わりに `popoverController` を使用することを推奨します
+
+### いつ使うか
+
+ポップオーバーをインラインで使用することは、ポップオーバーを開くためにクリックイベントを明示的に配線したくない場合に便利です。例えば、 `trigger` プロパティを使用して、クリックされたときにポップオーバーを表示するボタンを指定することができます。また、`trigger-action` プロパティを使って、トリガーが左クリックされたとき、右クリックされたとき、ホーバーされたときにポップオーバーを表示するかどうかをカスタマイズすることができます。
+
+もし、ポップオーバーの表示と非表示を細かく制御したい場合は、 `popoverController` を使用することをお勧めします。
+
+### Angular 
+
+渡されたコンポーネントは、ポップオーバーが表示されたときに作成され、ポップオーバーが解除されたときに破棄される必要があるため、内部で `<ng-content>` を使用してコンテンツを投影することはできません。代わりに、`<ng-container>` を使用します。これは、`<ng-template>` が渡されることを想定しています。そのため、コンポーネントを渡す際には、`<ng-template>`でラップする必要があります。
+
+```html
+<ion-popover [isOpen]="isPopoverOpen">
+  <ng-template>
+    <app-popover-content></app-popover-content>
+  </ng-template>
+</ion-popover>
+```
+
+### トリガー
+
+インラインの `ion-popover` のトリガーは、インタラクションされたときにポップオーバーを開く要素です。インタラクションの動作は `trigger-action` プロパティを設定することでカスタマイズすることができます。なお、`trigger-action="context-menu"` はシステムのデフォルトのコンテキストメニューを開かせないようにします。
+
+:::note
+ `popoverController` を使用する場合、`ion-popover` は前もって作成されないので、トリガーは適用されません。
+:::
+
+import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigger/index.md';
+
+<InlineTrigger />
+
+### isOpen プロパティ
+
+インラインポップオーバーは `isOpen` プロパティを `true` に設定することによっても開くことができます。この方法はトリガーよりも細かくポップオーバーをコントロールする必要がある場合に使用されます。
+
+`isOpen` は一方向のデータバインディングを使用しています。つまり、ポップオーバーが閉じられたときに自動的に `false` に設定されることはありません。開発者は `ionPopoverDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` にセットする必要があります。この理由は、`ion-popover` の内部がアプリケーションの状態と密に結合されるのを防ぐためである。一方通行のデータバインディングでは、ポップオーバーはリアクティブ変数が提供するブーリアン値だけを気にすればよいのです。双方向のデータバインディングでは、ポップオーバーはブール値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは非決定的な動作につながり、アプリケーションのデバッグを難しくします。
+
+
+import IsOpenTrigger from '@site/static/usage/v7/popover/presenting/inline-isopen/index.md';
+
+<IsOpenTrigger />
+
+## ポップオーバーコントローラ
+
+Ionic Framework からインポートされた `popoverController` を使用することで、`ion-popover` をプログラム的に表示することも可能です。これにより、インラインポップオーバーのカスタマイズ以上に、ポップオーバーを表示するタイミングを完全に制御することができます。
+
+### どのような場合に使用するのか
+
+ポップオーバーはインラインで記述することをお勧めします。ポップオーバーをインラインで書くことが現実的でない複雑なユースケースの場合にのみ `popoverController` を使用すべきです。コントローラを使用する場合、ポップオーバーは前もって作成されないので、 `trigger` や `trigger-action` などのプロパティはここでは適用されません。さらに、ネストされたポップオーバーはコントローラのアプローチと互換性がありません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに自動的にアプリケーションのルートに追加されるからです。
+
+### React
+
+コントローラの代わりに、React には `useIonPopover` というHookがあり、同じような振る舞いをします。なお、 `useIonPopover` は `<IonApp>` の子孫であることが必要です。もし、 `<IonApp>` の外側でポップオーバーを使用する必要がある場合は、代わりにインラインポップオーバーを使用することを検討してください。
+
+### 使い方
+
+import ControllerExample from '@site/static/usage/v7/popover/presenting/controller/index.md';
+
+<ControllerExample />
+
+
+## スタイリング
+
+ポップオーバーはアプリケーションのルートで表示されるので、アプリケーション全体を覆うように表示されます。この動作はインラインポップオーバーとコントローラから表示されるポップオーバーの両方に適用されます。そのため、カスタムポップオーバースタイリングは特定のコンポーネントにスコープすることができません。代わりに、スタイルはグローバルに適用されなければなりません。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
+
+:::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/v7/popover/customization/styling/index.md';
+
+<Styling />
+
+
+## 配置
+
+### リファレンス
+
+ポップオーバーを表示するとき、Ionic Framework はポップオーバーを相対的に表示するための参照点を必要とします。`reference="event"` を指定すると、ポップオーバーはトリガー要素で dispatch されたポインターイベントのx-y座標に相対的に表示されます。 `reference="trigger"` を指定すると、ポップオーバーはトリガー要素のバウンディングボックスに対して相対的に表示されます。
+
+### Side
+
+`side` プロパティを使用することで、基準点の上、右、左、下のいずれかにポップオーバーを配置することができます。また、LTRやRTLのモードに応じてサイドを切り替えたい場合は、 `start` や `end` を使用することができます。
+
+### Alignment
+
+`alignment` プロパティは、ポップオーバーのエッジをトリガーエレメントの対応するエッジに揃えることができます。使用される正確なエッジは `side` プロパティの値に依存します。
+
+### Side and Alignment Demo
+
+import Positioning from '@site/static/usage/v7/popover/customization/positioning/index.md';
+
+<Positioning />
+
+### オフセット
+
+ポップオーバーの位置をより細かく制御したい場合は、CSS 変数 `--offset-x` と `--offset-y` を使用することができます。例えば、`--offset-x: 10px` はポップオーバーのコンテンツを `10px` だけ右側に移動させます。
+
+## サイズ調整
+
+ドロップダウンメニューを作成するとき、ポップオーバーの幅をトリガー要素の幅と一致させたい場合があります。トリガーの幅を事前に知らずにこれを行うのは厄介です。 `size` プロパティを `'cover'` に設定すると、Ionic Framework はポップオーバーの幅をトリガー要素の幅に一致させるようにします。
+
+`popoverController` を使用する場合は、`event` オプションでイベントを指定する必要があり、Ionic Framework は `event.target` を参照要素に使用します。このパターンの例は [controller demo](#controller-popovers) を参照してください。
+
+import Sizing from '@site/static/usage/v7/popover/customization/sizing/index.md';
+
+<Sizing />
+
+## ポップオーバーをネスト
+
+インラインで `ion-popover` を使用する場合、ポップオーバーを入れ子にして入れ子のドロップダウンメニューを作成することができます。このとき、最初のポップオーバーの背景だけが表示されるので、ポップオーバーを開くたびに画面がだんだん暗くなっていくことはありません。
+
+`dismissOnSelect` プロパティを使用すると、ポップオーバーのコンテンツがクリックされたときに自動的にポップオーバーを閉じることができます。この動作は、他のポップオーバーのトリガー要素をクリックしたときには適用されません。
+
+:::note
+ `popoverController` を使用する場合、ネストしたポップオーバーは作成できません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに、自動的にアプリケーションのルートに追加されるからです。
+:::
+
+import NestedPopover from '@site/static/usage/v7/popover/nested/index.md';
+
+<NestedPopover />
+
+
+## Interfaces
+
+以下に、`popoverController` を使用する際に利用可能なすべてのオプションを示します。これらのオプションは `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
+
+以下に、`ion-popover` のすべてのカスタムTypeを紹介します。
+
+```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';
+```
+
+## アクセシビリティ
+
+### キーボードナビゲーション
+
+`ion-popover` は、ポップオーバー内のフォーカス可能な要素間を移動するための基本的なキーボードをサポートしています。次の表は、それぞれのキーが何をするのかの詳細です:
+
+| 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` は、 `button` プロパティを持つ `ion-item` 要素間を移動するための矢印キーを完全にサポートしています。最も一般的な使用例としては、デスクトップにフォーカスしたアプリケーションにおけるドロップダウンメニューとして使用することができます。基本的なキーボードのサポートに加え、次の表ではドロップダウンメニューの矢印キーのサポートについて詳しく説明します。
+
+| 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
+
+### Innerコンテンツのマウント
+
+インライン `ion-popover` のコンテンツは、閉じるとマウントされなくなります。このコンテンツのレンダリングにコストがかかる場合、開発者は `keepContentsMounted` プロパティを使用して、ポップオーバーがマウントされると同時にコンテンツをマウントすることができます。これにより、ポップオーバーが開いたときに内部コンテンツがすでにマウントされているため、アプリケーションの応答性を最適化することができます。
+
+import Mount from '@site/static/usage/v7/popover/performance/mount/index.md';
+
+<Mount />
+
+開発者は `keepContentsMounted` を使用する際に、以下の点に留意する必要があります。
+
+- この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用する必要があります。この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用されるべきです。また、パフォーマンスの問題を予期してこの機能を使用しないでください。
+
+- この機能は、JavaScriptフレームワークを使用する場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをポップオーバーに渡すことができ、コンテンツは自動的にレンダリングされます。
+
+- この機能はインラインポップオーバーでのみ機能します。 `popoverController`で作成されたポップオーバーは先に作成されないので、内部のコンテンツも作成されません。
+
+- 内部コンポーネントの JavaScript Framework ライフサイクルフックは、ポップオーバーが表示されたときではなく、ポップオーバーがマウントされたときにすぐに実行されます。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
new file mode 100644
index 00000000000..98b9206aee9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
@@ -0,0 +1,96 @@
+---
+title: "ion-progress-bar"
+---
+import Props from '@ionic-internal/component-api/v7/progress-bar/props.md';
+import Events from '@ionic-internal/component-api/v7/progress-bar/events.md';
+import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
+
+<head>
+  <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
+  <meta name="description" content="ion-progress-barは、水平方向の読み込みインジケーターで、フォームの送信や更新の保存など、進行中のアプリ処理のステータスをユーザーに知らせます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには2つのタイプがあります。プログレスバーには、`determinate`と`indeterminate`の2種類があります。
+
+## Determinate
+
+Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は `value` プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。
+
+import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md';
+
+<Determinate />
+
+### Buffer
+
+`buffer`プロパティが設定されている場合、バッファーストリームがアニメーションの円と共に表示され、アクティビティを示します。また、`buffer`プロパティの値は、目に見えるトラックの量によって表されます。もし `buffer` の値が `value` プロパティより小さければ、目に見えるトラックはありません。もし `buffer` が `1` に等しければ、バッファースリームは隠されます。
+
+import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md';
+
+<Buffer />
+
+
+## Indeterminate
+
+Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは `value` と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。
+
+import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/index.md';
+
+<Indeterminate />
+
+
+## Progress Bars in Toolbars
+
+<!-- Reuse the playground from the Toolbar directory -->
+import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md';
+
+<Toolbar />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.md';
+
+<Colors />
+
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
new file mode 100644
index 00000000000..9b597b0aa9a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
@@ -0,0 +1,60 @@
+---
+title: "ion-radio-group"
+---
+import Props from '@ionic-internal/component-api/v7/radio-group/props.md';
+import Events from '@ionic-internal/component-api/v7/radio-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/radio-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
+
+<head>
+  <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
+  <meta name="description" content="radio groupとは、radioボタンのグループです。radio groupは、ユーザーがセットから最大1つのradioボタンを選択できるようにします。 ion-radio-groupの使用方法について、詳しくはこちらをご覧ください。" />
+</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
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface RadioGroupCustomEvent<T = any> extends CustomEvent {
+  detail: RadioGroupChangeEventDetail<T>;
+  target: HTMLIonRadioGroupElement;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
new file mode 100644
index 00000000000..833a0699772
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
@@ -0,0 +1,122 @@
+---
+title: "ion-radio"
+---
+import Props from '@ionic-internal/component-api/v7/radio/props.md';
+import Events from '@ionic-internal/component-api/v7/radio/events.md';
+import Methods from '@ionic-internal/component-api/v7/radio/methods.md';
+import Parts from '@ionic-internal/component-api/v7/radio/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
+
+<head>
+  <title>ion-radio Component: Radio Property for iOS and Android</title>
+  <meta name="description" content="Radioコンポーネントは、iOSおよびAndroidデバイスのion-radio-groupsの内部で使用する必要があります。Radioコンポーネントの使用方法とインストール方法については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+ラジオは、[ラジオグループ](./radio-group)の中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
+
+ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、[checkboxes](./checkbox)を代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/radio/basic/index.md';
+
+<Basic />
+
+## Label Placement
+
+開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+
+import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
+
+<LabelPlacement />
+
+## Justification
+
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
+
+import Justify from '@site/static/usage/v7/radio/justify/index.md';
+
+<Justify />
+
+
+:::note
+`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
+:::
+
+## ラジオの選択を解除する
+
+デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの `allowEmptySelection` プロパティを使用することで変更することができ、ラジオを非選択にすることができます。
+
+import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md';
+
+<EmptySelection />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/radio/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.md';
+
+<CSSProps />
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## Legacy Radio Syntaxからの移行
+
+Ionic 7.0では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+### 最新の構文の使い方
+
+最新の構文を使用するには、`ion-label`を削除して、`ion-radio`の内部にラベルを直接渡します。ラベルの配置は `ion-radio` の `labelPlacement` プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、`ion-radio` の `justify` プロパティを使用して制御することができます。
+
+import Migration from '@site/static/usage/v7/radio/migration/index.md';
+
+<Migration />
+  
+
+:::note
+Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
+:::
+
+### レガシー構文の使用
+
+Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
new file mode 100644
index 00000000000..2464ca37fdd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
@@ -0,0 +1,197 @@
+---
+title: "ion-range"
+---
+import Props from '@ionic-internal/component-api/v7/range/props.md';
+import Events from '@ionic-internal/component-api/v7/range/events.md';
+import Methods from '@ionic-internal/component-api/v7/range/methods.md';
+import Parts from '@ionic-internal/component-api/v7/range/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/range/slots.md';
+
+<head>
+  <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
+  <meta name="description" content="ion-rangeは、スライダーを動かして値の範囲を選択することができます。2つのノブを使用できますが、1つは値を制御し、ラベルはどちらか一方に置くことができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Rangeスライダは、スライダノブを動かして、ユーザーが値の範囲を選択できるようにするものです。デフォルトでは、1つのノブがレンジの値を制御します。この動作は [dual knobs](#dual-knobs) を使ってカスタマイズすることができます。
+
+デフォルトでは、Rangeスライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/range/basic/index.md';
+
+<Basic />
+
+## Label Placement
+
+import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
+
+<LabelsPlayground />
+
+## Decorations
+
+Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.
+
+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 DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md';
+
+<DecorationsPlayground />
+
+## Dual Knobs
+
+Dual knobs はユーザーが下限と上限の値を選択するために使用できる2つのknobsコントロールを導入しています。選択されると、Range は選択された上下限の値を含む [RangeValue](#rangevalue) を持つ `ionChange` イベントを発信します。
+
+import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.md';
+
+<DualKnobs />
+
+## ピン
+
+`pin` 属性は、ドラッグしたときにノブの上にレンジの値を表示します。これにより、ユーザはRange内の特定の値を選択することができます。
+
+`pinFormatter` 関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。
+
+import Pins from '@site/static/usage/v7/range/pins/index.md';
+
+<Pins />
+
+## Snapping & Ticks
+
+TicksはRange 上で利用可能な各値のインジケータを表示します。Ticksを使用するためには、開発者は `snaps` と `ticks` プロパティの両方を `true` に設定する必要があります。
+
+snapsを有効にし、knobをドラッグして放すと、Range knobは最も近い利用可能な値にスナップします。
+
+import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
+
+<SnappingTicks />
+
+## イベントハンドリング
+
+### Using `ionChange`
+
+`ionChange` イベントはRange knobの値の変更を監視します。
+
+import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.md';
+
+<IonChangeEvent />
+
+### `ionKnobMoveStart` と `ionKnobMoveEnd` を使う
+
+マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knobのドラッグが開始されると `ionKnobMoveStart` イベントが発行されます。逆に、`ionKnobMoveEnd`はRange knobがリリースされたときに発生します。両イベントは `RangeValue` タイプで発生し、`dualKnobs` プロパティと組み合わせて動作します。
+
+import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/index.md';
+
+<IonKnobMoveEvent />
+
+## テーマ
+
+## CSSカスタムプロパティ
+
+Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。
+
+import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.md';
+
+<CSSProps />
+
+### CSS Shadow Parts
+
+Rangeには [CSS Shadow Parts](#css-shadow-parts) があり、Rangeコンポーネント内の特定の要素ノードを完全にカスタマイズすることができます。CSS Shadow Partsは最も多くのカスタマイズ機能を提供し、Rangeコンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。
+
+import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## Migrating from Legacy Range Syntax
+
+A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an range, resolves accessibility issues, and improves the developer experience.
+
+Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+
+### 最新の構文の使い方
+
+Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`.
+
+import Migration from '@site/static/usage/v7/range/migration/index.md';
+
+<Migration />
+
+
+:::note
+In past versions of Ionic, `ion-item` was required for `ion-range` to function properly. Starting in Ionic 7.0, `ion-range` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-range` to function properly.
+:::
+
+### Using the Legacy Syntax
+
+Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-range` to `true` to force that instance of the range to use the legacy syntax.
+
+
+## Interfaces
+
+### RangeChangeEventDetail
+
+```typescript
+interface RangeChangeEventDetail {
+  value: RangeValue;
+}
+```
+
+### RangeKnobMoveStartEventDetail
+
+```typescript
+interface RangeKnobMoveStartEventDetail {
+  value: RangeValue;
+}
+```
+
+### RangeKnobMoveEndEventDetail
+
+```typescript
+interface RangeKnobMoveEndEventDetail {
+  value: RangeValue;
+}
+```
+
+### RangeCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface RangeCustomEvent extends CustomEvent {
+  detail: RangeChangeEventDetail;
+  target: HTMLIonRangeElement;
+}
+```
+
+## Types
+
+### RangeValue
+
+```typescript
+type RangeValue = number | { lower: number, upper: number };
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
new file mode 100644
index 00000000000..34f009ee313
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
@@ -0,0 +1,35 @@
+---
+title: "ion-refresher-content"
+---
+import Props from '@ionic-internal/component-api/v7/refresher-content/props.md';
+import Events from '@ionic-internal/component-api/v7/refresher-content/events.md';
+import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md';
+import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/refresher-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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.
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
new file mode 100644
index 00000000000..964a079d6cd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
@@ -0,0 +1,121 @@
+---
+title: "ion-refresher"
+---
+import Props from '@ionic-internal/component-api/v7/refresher/props.md';
+import Events from '@ionic-internal/component-api/v7/refresher/events.md';
+import Methods from '@ionic-internal/component-api/v7/refresher/methods.md';
+import Parts from '@ionic-internal/component-api/v7/refresher/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/refresher/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
+
+<head>
+  <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
+  <meta name="description" content="ion-refresherは、コンテンツコンポーネントにpull-to-refresh機能を提供します。これにより、ユーザーはタッチ操作でページをプルダウンし、より多くのデータを取得することができます。" />
+</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.
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/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/v7/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/v7/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 が機能するためには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content` のスクロールを無効にし、`.ion-content-scroll-host` クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するかを指定する必要があります。
+
+import CustomScrollTarget from '@site/static/usage/v7/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/v7/refresher/advanced/index.md';
+
+<Advanced />
+
+
+## Interfaces
+
+### RefresherEventDetail
+
+```typescript
+interface RefresherEventDetail {
+  complete(): void;
+}
+```
+
+### RefresherCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface RefresherCustomEvent extends CustomEvent {
+  detail: RefresherEventDetail;
+  target: HTMLIonRefresherElement;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
new file mode 100644
index 00000000000..4c5fc4efe46
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
@@ -0,0 +1,64 @@
+---
+title: "ion-reorder-group"
+---
+import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
+import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
+import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
+import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
+
+<head>
+  <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
+  <meta name="description" content="ion-reorder-groupは、Ionicアプリでion-reorderコンポーネントを使用するアイテムのためのラッパーコンポーネントです。ion-reorder-groupの使い方はこちらをご覧ください。" />
+</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
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface ItemReorderCustomEvent extends CustomEvent {
+  detail: ItemReorderEventDetail;
+  target: HTMLIonReorderGroupElement;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
new file mode 100644
index 00000000000..6c7497b5169
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
@@ -0,0 +1,98 @@
+---
+title: "ion-reorder"
+---
+import Props from '@ionic-internal/component-api/v7/reorder/props.md';
+import Events from '@ionic-internal/component-api/v7/reorder/events.md';
+import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
+import Parts from '@ionic-internal/component-api/v7/reorder/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
+
+<head>
+  <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
+  <meta name="description" content="ion-reorderは、ion-reorder-groupの中のアイテムをドラッグ＆ドロップするために使用されるアンカーです。カスタム並び替えアイコンとアイテムの詳細については、こちらをご覧ください。" />
+</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.
+
+
+## 基本的な使い方
+
+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/v7/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/v7/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/v7/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/v7/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/v7/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/v7/reorder/custom-scroll-target/index.md';
+
+<CustomScrollTarget />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
new file mode 100644
index 00000000000..4524af68a2a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
@@ -0,0 +1,67 @@
+---
+title: "ion-ripple-effect"
+---
+import Props from '@ionic-internal/component-api/v7/ripple-effect/props.md';
+import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md';
+import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md';
+import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/ripple-effect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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="ripple effect buttonコンポーネントは、Material Designインクのリップルインタラクション効果を追加します。ion-appでのみ使用可能で、任意のコンポーネントに追加することができます。" />
+</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.
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/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/v7/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/v7/ripple-effect/customizing/index.md';
+
+<Customizing />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
new file mode 100644
index 00000000000..2b7522e4d34
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
@@ -0,0 +1,114 @@
+---
+title: "ion-route-redirect"
+---
+
+import Props from '@ionic-internal/component-api/v7/route-redirect/props.md';
+import Events from '@ionic-internal/component-api/v7/route-redirect/events.md';
+import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.md';
+import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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は、ion-routerの直接の子として使用され、URLから他のURLへのリダイレクトを行います。ルートリダイレクトプラグインについては、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+A route redirect can only be used with an `ion-router` as a direct child of it.
+
+:::note
+ Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+:::
+
+
+ルートリダイレクトには、2つの設定可能なプロパティがあります。
+- `from`
+- `to`
+
+これは、ある URL から別の URL へとリダイレクトします。定義された `ion-route-redirect` ルールがマッチすると、ルータは `from` プロパティで指定されたパスから `to` プロパティで指定されたパスへリダイレクトします。リダイレクトを行うには、`from` のパスがナビゲートされる URL と完全に一致する必要があります。
+
+
+## 複数ルートのリダイレクト
+
+任意の数のリダイレクトルートを `ion-router` の内部で定義することができますが、合致するのは1つだけです。
+
+ルートリダイレクトは、それ自身のリダイレクトの後に別のリダイレクトを呼び出すことはありません。
+
+次の2つのリダイレクトを考えてみましょう。
+
+```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>
+```
+
+ユーザーが `/admin` に移動した場合、ルーターは `/login` にリダイレクトし、そこで停止します。複数のリダイレクトを評価することはありません。
+
+
+
+
+## 使い方
+
+```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>
+```
+
+### ルートリダイレクトのガード
+
+リダイレクトルートは、ユーザーが認証されているかどうかなど、与えられた条件に基づいて、ユーザーがアプリケーションの特定の領域に移動するのを防ぐためのガードとして機能することができます。
+
+ルートリダイレクトは動的に追加・削除することができ、一部のルートをアクセスできないようにリダイレクト（ガード）することができます。次の例では、 `isLoggedIn` が `false` の場合、すべての URL `*` は `/login` にリダイレクトされます。
+
+```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);
+}
+```
+
+また、`to`の値は条件に基づいて変更することもできます。次の例では、ルートリダイレクトはユーザーがログインしているかどうかをチェックし、ログインしていない場合は `/login` url にリダイレクトします。
+
+```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');
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
new file mode 100644
index 00000000000..56733f9c66e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
@@ -0,0 +1,269 @@
+---
+title: "ion-route"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@ionic-internal/component-api/v7/route/props.md';
+import Events from '@ionic-internal/component-api/v7/route/events.md';
+import Methods from '@ionic-internal/component-api/v7/route/methods.md';
+import Parts from '@ionic-internal/component-api/v7/route/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/route/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/route/slots.md';
+
+<head>
+  <title>ion-route: API Route Component for Ionic Framework Apps</title>
+  <meta name="description" content="ion-routeコンポーネントは、コンポーネントを受け取り、Browser URLがURLプロパティに一致したときにレンダリングします。Ionic AppsのAPIルートコンポーネントの詳細はこちら。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+The route component takes a component and renders it when the Browser URL matches the url property.
+
+:::note
+ Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+:::
+
+
+## ナビゲーションフック
+
+ナビゲーションフックは、タスクを実行したり、ナビゲーションガードとして動作させるために使用することができます。フックは、各 `ion-route` の `beforeEnter` と `beforeLeave` プロパティに関数を提供することで使用します。`true` を返すとナビゲーションを進めることができ、`false` を返すとナビゲーションがキャンセルされる。NavigationHookOptions` 型のオブジェクトを返すと、ナビゲーションを別のページにリダイレクトすることができます。
+
+## Interfaces
+
+```typescript
+interface NavigationHookOptions {
+  /**
+   * A valid path to redirect navigation to.
+   */
+  redirect: string;
+}
+```
+
+
+
+
+## 使い方
+
+<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>
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
new file mode 100644
index 00000000000..051704b0d28
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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 '@ionic-internal/component-api/v7/router-link/props.md';
+import Events from '@ionic-internal/component-api/v7/router-link/events.md';
+import Methods from '@ionic-internal/component-api/v7/router-link/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
+
+<head>
+  <title>Router Link | Navigating The ion-router-link Component</title>
+  <meta name="description" content="ion-router-linkコンポーネントを使用すると、指定したリンクに移動することができます。ルーターリンクは、hrefで場所を、directionで遷移のアニメーションを指定することができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+<h2 className="table-of-contents__title">コンテンツ</h2>
+
+<TOCInline
+  toc={toc}
+  maxHeadingLevel={2}
+/>
+
+
+
+router linkコンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、hrefで場所を、directionで遷移のアニメーションを指定することができます。
+
+:::note
+ Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+:::
+
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
new file mode 100644
index 00000000000..1986e142f70
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
@@ -0,0 +1,59 @@
+---
+title: "ion-router-outlet"
+---
+
+import Props from '@ionic-internal/component-api/v7/router-outlet/props.md';
+import Events from '@ionic-internal/component-api/v7/router-outlet/events.md';
+import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md';
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+router outletはAngularの組み込みrouter outletコンポーネントやVueのルーター・ビューコンポーネントと同様の振る舞いをしますが、スタック式のナビゲーションを提供し、ビューをアニメーションで出し入れするためのロジックを含んでいます。
+
+router outlet はナビゲーション用のメソッドを備えていますが、フレームワークのルーターにあるナビゲーションメソッドを使用することをお勧めします。
+
+## ライフサイクルHook
+
+Router OutletでRoutesがレンダリングされた時、アニメーションに関連付けられた特定のIonicイベントにアクセスできます。
+
+
+| Event Name         | Description                                                          |
+|--------------------|------------------------------------------------------------------|
+| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
+| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
+
+
+これらのイベントはIonicのアニメーションシステムと連携し、コンポーネントがアニメーションを完成させたときにアプリの挙動を調整するのに使用できる。これらのイベントはフレームワーク独自のイベントシステムに代わるものではなく、追加されたものです。
+
+Router Guardsを扱うために、以前の`ionViewCanEnter` と `ionViewCanLeave`は、フレームワーク特有の同等のものに置き換えられました。Angularには[Router Guards](https://angular.jp/guide/router#milestone-5-route-guards)があります。
+
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
new file mode 100644
index 00000000000..a5bcc2d1923
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
@@ -0,0 +1,114 @@
+---
+title: "ion-router"
+---
+
+import Props from '@ionic-internal/component-api/v7/router/props.md';
+import Events from '@ionic-internal/component-api/v7/router/events.md';
+import Methods from '@ionic-internal/component-api/v7/router/methods.md';
+import Parts from '@ionic-internal/component-api/v7/router/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/router/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/router/slots.md';
+
+<head>
+  <title>ion-router: Router Component to Coordinate URL Navigation</title>
+  <meta name="description" content="ion-routerは、ionicのナビゲーションアウトレットであるion-navとion-tabsのためのURLコーディネータです。ルーターコンポーネントは vanilla と Stencil JavaScript 内のルーティングを処理します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+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. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
+:::
+
+
+アプリケーションはコードベースに単一の `ion-router` コンポーネントを持たなければなりません。
+このコンポーネントは、ブラウザの履歴とのすべての対話を制御し、イベント・システムを介して更新を集約します。
+
+`ion-router` は、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` というIonicのナビゲーション機能のURL調整機能に過ぎません。
+
+つまり、 `ion-router` はDOMにアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザのURLに基づいて、`ion-nav` と `ion-tabs` 、 `ion-router-outlet`  に何をいつ「show」すべきかを指示するだけです。
+
+コンポーネント(ロード/選択)とURLの間の関係を設定するために、`ion-router` はJSX/HTMLを使ってルートのツリーを定義する宣言的な構文を利用します。
+
+## 基本的な使い方
+
+import BasicExample from '@site/static/usage/v7/router/basic/index.md';
+
+<BasicExample />
+
+## Interfaces
+
+### RouterEventDetail
+
+```typescript
+interface RouterEventDetail {
+  from: string | null;
+  redirectedFrom: string | null;
+  to: string;
+}
+```
+
+### RouterCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface RouterCustomEvent extends CustomEvent {
+  detail: RouterEventDetail;
+  target: HTMLIonRouterElement;
+}
+```
+
+
+
+## 使い方
+
+```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>
+
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
new file mode 100644
index 00000000000..1496666cad9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
@@ -0,0 +1,49 @@
+---
+title: "ion-row"
+---
+import Props from '@ionic-internal/component-api/v7/row/props.md';
+import Events from '@ionic-internal/component-api/v7/row/events.md';
+import Methods from '@ionic-internal/component-api/v7/row/methods.md';
+import Parts from '@ionic-internal/component-api/v7/row/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/row/slots.md';
+
+<head>
+  <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
+  <meta name="description" content="Rowsはグリッドシステムの水平方向のコンポーネントで、さまざまな数のカラムを含んでいます。行の配置や使用方法については、ion-row API Docs を参照してください。" />
+</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
+
+デフォルトでは、列は行の高さ全体を埋めるように伸縮し、必要に応じて折り返されます。行は [Flexコンテナ](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) なので、この動作をカスタマイズするために、行に適用できるいくつかの [CSS クラス](/docs/layout/css-utilities#flex-container-properties) が用意されています。
+
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
new file mode 100644
index 00000000000..40953824dad
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
@@ -0,0 +1,141 @@
+---
+title: "ion-searchbar"
+---
+import Props from '@ionic-internal/component-api/v7/searchbar/props.md';
+import Events from '@ionic-internal/component-api/v7/searchbar/events.md';
+import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/searchbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
+
+<head>
+  <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
+  <meta name="description" content="Search barsは、コレクションを検索するために使用できるテキストフィールドを表します。AndroidとiOSのキーボード表示で、Ion-Search Barをアイコンとして入力する方法をご紹介します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+検索バーは、コレクションを検索するために使用できるテキストフィールドを表します。ツールバーやメインコンテンツの中に表示することができます。検索バーは、検索リストへの入力の代わりに使用する必要があります。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/searchbar/basic/index.md';
+
+<Basic />
+
+
+## 検索アイコン
+
+検索バーのInputフィールドの左に表示される検索アイコンです。任意の [Ionicon](https://ionic.io/ionicons/) にカスタマイズすることが可能です。
+
+import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md';
+
+<SearchIcon />
+
+
+## クリアボタン
+
+検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意の[Ionicon](https://ionic.io/ionicons/)にカスタマイズすることができます。
+
+import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md';
+
+<ClearButton />
+
+
+## キャンセルボタン
+
+キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは `ios` モードではテキストとして、`md` モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意の[Ionicon](https://ionic.io/ionicons/)を使用することができます。
+
+import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md';
+
+<CancelButton />
+
+
+## ツールバーの中に配置した検索バー
+
+検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOSでは、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Designでは、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。
+
+<!-- Reuse the playground from the Toolbar directory -->
+import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
+
+<Toolbar />
+
+
+## Debounce
+
+検索バーにDebounceを設定して、`ionChange`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
+
+import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
+
+<Debounce />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化することを意味します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
+
+import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## キーボード表示
+
+### Android
+
+デフォルトでは、Inputをタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からarriage returnに変更されます。
+
+### iOS
+
+デフォルトでは、Inputをタップするとキーボードが表示され、グレーのSubmitボタンに「return」のテキストが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、テキストが "return" から "go" に変わり、ボタンの色もグレーから青に変わります。また、`ion-searchbar` を `form` 要素でラップして、 `action` プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青いSubmitボタンが表示されるようになります。
+
+## Interfaces
+
+### SearchbarChangeEventDetail
+
+```typescript
+interface SearchbarChangeEventDetail {
+  value?: string;
+}
+```
+
+### SearchbarCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface SearchbarCustomEvent extends CustomEvent {
+  detail: SearchbarChangeEventDetail;
+  target: HTMLIonSearchbarElement;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
new file mode 100644
index 00000000000..a13d47afe68
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
@@ -0,0 +1,71 @@
+---
+title: "ion-segment-button"
+---
+import Props from '@ionic-internal/component-api/v7/segment-button/props.md';
+import Events from '@ionic-internal/component-api/v7/segment-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/segment-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/segment-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md';
+
+<head>
+  <title>ion-segment-button | Segment Button Icon and Segment Value</title>
+  <meta name="description" content="ion-segment-buttonsは、Segmentの中にある関連するボタンのグループです。Ionic Frameworkアプリでsegment-buttonsのアイコンの使い方を学び、その値を確認します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+セグメントボタンは、[segment](segment.md)の中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの `value` をセグメントボタンの `value` に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは1つだけです。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/segment-button/basic/index.md';
+
+<Basic />
+
+
+## Layout
+
+`layout`プロパティは、デフォルトで `"icon-top"` に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は `layout` プロパティを `"icon-bottom"`, `"icon-start"`, `"icon-end"` に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、ラベルの末尾（LTRでは右、RTLでは左）に表示することができます。
+
+import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
+
+<Layout />
+
+
+## テーマ
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
new file mode 100644
index 00000000000..0cc6e3fdd1c
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
@@ -0,0 +1,119 @@
+---
+title: "ion-segment"
+---
+import Props from '@ionic-internal/component-api/v7/segment/props.md';
+import Events from '@ionic-internal/component-api/v7/segment/events.md';
+import Methods from '@ionic-internal/component-api/v7/segment/methods.md';
+import Parts from '@ionic-internal/component-api/v7/segment/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/segment/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/segment/slots.md';
+
+<head>
+  <title>ion-segment: API Documentation for Segmented Controls</title>
+  <meta name="description" content="ion-segmentは、関連するボタンのグループを表示します（セグメントコントロールとも呼ばれます）。使用方法の詳細については、Segment API ドキュメンテーションを参照してください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Segmentsは、関連するボタンのグループを水平方向の行に表示することができ、segmented controlsとも呼ばれます。これらは、toolbarまたはメインコンテンツの内部に表示できます。
+
+これらの機能は、1つを選択すると他のすべてが選択解除されるTabsと似ています。Segmentsは、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segmentsの代わりにTabsを使用してください。
+
+
+## 基本的な使い方
+
+セグメントは[セグメントボタン](./segment-button)からなり、各ボタンには`value`プロパティが設定されています。セグメントの `value` プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。
+
+import Basic from '@site/static/usage/v7/segment/basic/index.md';
+
+<Basic />
+
+
+## Scrollable Segments
+
+デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、`scrollable` プロパティを `true` に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。
+
+import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md';
+
+<Scrollable />
+
+
+## Segments in Toolbars
+
+<!-- Reuse the playground from the Toolbar directory -->
+import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md';
+
+<Toolbar />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/segment/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## アクセシビリティ
+
+### キーボードナビゲーション
+
+このコンポーネントは、`ion-segment-button`要素間のナビゲーションと選択について、フルキーボードサポートを備えています。デフォルトでは、キーボードナビゲーションは `ion-segment-button` 要素にのみフォーカスしますが、`selectOnFocus` プロパティを使用すると、フォーカスされた要素も確実に選択されるようになります。次の表は、それぞれのキーが何をするのかの詳細です。
+
+| 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
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface SegmentCustomEvent extends CustomEvent {
+  target: HTMLIonSegmentElement;
+  detail: SegmentChangeEventDetail;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
new file mode 100644
index 00000000000..f6afc3e40e2
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
@@ -0,0 +1,42 @@
+---
+title: "ion-select-option"
+---
+import Props from '@ionic-internal/component-api/v7/select-option/props.md';
+import Events from '@ionic-internal/component-api/v7/select-option/events.md';
+import Methods from '@ionic-internal/component-api/v7/select-option/methods.md';
+import Parts from '@ionic-internal/component-api/v7/select-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
+
+<head>
+  <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
+  <meta name="description" content="Select Optionとは？Select OptionはSelectの子要素で、定義された各オプションはSelectダイアログに渡され表示されます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+セレクトオプションは、セレクトの子要素となるコンポーネントです。定義された各オプションは、Selectダイアログに渡され表示されます。
+
+使用例については、[Select](./select)のドキュメントを参照してください。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
new file mode 100644
index 00000000000..29a5fa9e4e1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
@@ -0,0 +1,227 @@
+---
+title: "ion-select"
+---
+import Props from '@ionic-internal/component-api/v7/select/props.md';
+import Events from '@ionic-internal/component-api/v7/select/events.md';
+import Methods from '@ionic-internal/component-api/v7/select/methods.md';
+import Parts from '@ionic-internal/component-api/v7/select/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/select/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/select/slots.md';
+
+<head>
+  <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
+  <meta name="description" content="ion-selectは、選択された値（複数可）、またはプレースホルダー、ドロップダウンのアイコンによって表現されます。 selectをタップすると、選択しやすいリストを表示するダイアログボックスが表示されます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Selectは、ネイティブの `<select>` 要素と同様に、オプションのセットからオプションを選択するためのフォームコントロールです。ユーザがselectをタップすると、すべてのオプションを含むダイアログが、選択しやすい大きなリストで表示されます。
+
+selectは、子要素 `<ion-select-option>` とともに使用する必要があります。子要素のオプションに`value`属性が指定されていない場合、そのtextが値として使用されます。
+
+`value` が `<ion-select>` にセットされている場合、オプションはその値に基づいて選択済みになります。
+
+## 単一選択
+
+デフォルトでは、selectを使用すると、ユーザは1つのOptionだけを選択できます。Alertのインターフェースでは、Optionのリストがradio button形式で表示されます。action sheetインタフェースは、1つの値選択でのみ使用できます。selectコンポーネントの値は、選択したオプションの値の値を受け取ります。
+
+import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
+
+<SingleSelectionExample />
+
+## インターフェイス
+
+デフォルトでは、select は [ion-alert](alert.md) を使ってAlertのオプションのオーバーレイを開きます。インターフェイスを変更して、[ion-action-sheet](action-sheet.md) または [ion-popover](popover.md) を使用するには、 `action-sheet` または `popover` を `interface` プロパティに渡します。各インタフェースの制限については、他のセクションを参照してください。
+
+### Action Sheet
+
+import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md';
+
+<ActionSheetExample />
+
+### Popover
+
+import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.md';
+
+<PopoverExample />
+
+## 複数選択
+
+`multiple` 属性を追加して選択すると、複数のOptionを選択できます。複数のOptionを選択できる場合は、checkbox形式のオプションのリストがAlertオーバーレイで表示されます。selectコンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。
+
+Note: `action-sheet` と `popover` インターフェイスでは、複数選択は動作しません
+
+import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
+
+<MultipleSelectionExample />
+
+## Responding to Interaction
+
+select とユーザーのインタラクションを処理する主な方法は、 `ionChange` イベント、 `ionDismiss` イベント、 `ionCancel` イベントです。これらのイベントと select が発生するその他のイベントの詳細については、[イベント](#events) を参照してください。
+
+import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/responding-to-interaction/index.md';
+
+<RespondingToInteractionExample />
+
+## Object値について
+
+選択した値にObjectを使用する場合、これらのObjectの識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的のObject値を持つ既存の値がselectにロードされたが、新しく取得されたselectオプションが異なるIDを持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。
+
+デフォルトでは、selectはObjectの等価性(`===`)を使用して、オプションが選択されているかどうかを判断します。これは`compareWiths`プロパティにプロパティ名または関数を指定することで上書きできます。
+
+### Using compareWith
+
+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/v7/select/objects-as-values/multiple-selection/index.md';
+
+<ObjectValuesAndMultipleSelectionExample />
+  
+
+## Label Placement
+
+Labelsは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+
+import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
+
+<LabelPlacement />
+
+## Justification
+  
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
+
+import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
+
+<JustifyExample />
+
+## Filled Selects
+
+Material Designでは、セレクトに塗りつぶしのスタイルが用意されています。セレクトの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+
+`fill` スタイルはセレクトコンテナを視覚的に定義するため、`fill` を使用するセレクトは `ion-item` で使用すべきではありません。
+
+import FillExample from '@site/static/usage/v7/select/fill/index.md';
+
+<FillExample />
+
+## SelectのButton
+
+alertはふたつのボタンをサポートしています: `Cancel` と `OK` です。それぞれのボタンは、 `cancelText` と `okText`  プロパティを使ってカスタマイズできます。
+
+`action-sheet` と `popover` インタフェースには `OK` ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。`popover` インターフェースには`Cancel`ボタンがないので、backdropをクリックするとオーバーレイが閉じます。
+
+import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.md';
+
+<ButtonTextExample />
+
+## インターフェイスオプション
+
+select は alert、action sheet、popover インターフェースを使用するので、`interfaceOptions` プロパティを通して、これらのコンポーネントにオプションを渡すことができます。これは、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すために使用できます。
+
+各インターフェースが受け付けるプロパティは、[ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md) を参照してください。
+
+Note: `alert` インターフェースでは、 `interfaceOptions` は `inputs` や `buttons` をオーバーライドしません。
+
+import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.md';
+
+<InterfaceOptionsExample />
+
+## カスタマイズ
+
+Selectコンポーネントを構成する2つのユニットがあり、それぞれを別々にスタイルする必要があります。 `ion-select`要素は、ビュー上で選択された値（複数可）、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記の [インターフェース](#interfaces) セクションで定義されており、 `ion-select` をクリックすると開かれるダイアログです。インターフェースには、 `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。
+
+### Select 要素のスタイリング
+
+前述の通り、`ion-select` 要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSSと[CSSカスタムプロパティ](#css-custom-properties)を組み合わせてスタイルを設定します。
+
+また、必要な [ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part) に応じて、CSSのシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意のCSSプロパティをターゲットにすることができることに注意してください。
+
+import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.md';
+
+<StylingSelectExample />
+
+### Select インターフェイスのスタイリング
+
+インターフェイスのダイアログのカスタマイズは、そのインターフェイスのドキュメントのカスタマイズのセクションにしたがって行ってください。
+
+- [アラートのカスタマイズ](alert.md#customization)
+- [アクションシートのカスタマイズ](action-sheet.md#customization)
+- [ポップオーバーのカスタマイズ](popover.md#customization)
+
+ただし、Selectオプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、[Selectオプションのドキュメント](select-option.md)を参照してください。
+
+## Typeahead Component
+
+Typeaheadやオートコンプリートの機能は、既存のIonicコンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。
+
+import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
+
+<TypeaheadExample />
+
+## Interfaces
+
+### SelectChangeEventDetail
+
+```typescript
+interface SelectChangeEventDetail<T = any> {
+  value: T;
+}
+```
+
+### SelectCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface SelectCustomEvent<T = any> extends CustomEvent {
+  detail: SelectChangeEventDetail<T>;
+  target: HTMLIonSelectElement;
+}
+```
+
+## Legacy Select Syntaxからの移行
+
+Ionic 7.0では、よりシンプルなselect構文が導入されました。この新しい構文は、selectの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者は、この移行を一度に1つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+
+### 最新の構文の使い方
+
+最新の構文を使うには、2つのステップがあります。
+
+1. ion-label` を削除して、代わりに `ion-select` の `label` プロパティを使用します。ラベルの配置は `ion-select` の `labelPlacement` プロパティを使用して設定することができる。
+2. fill` と `shape` の使い方を `ion-item` から `ion-select` に移動します。
+
+import Migration from '@site/static/usage/v7/select/migration/index.md';
+
+<Migration />
+
+### レガシー構文の使用
+
+Ionicは、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、そのInputインスタンスでレガシー構文を使用するように強制できます。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
new file mode 100644
index 00000000000..4da94f4ed3f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
@@ -0,0 +1,54 @@
+---
+title: "ion-skeleton-text"
+---
+import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md';
+import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md';
+import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md';
+import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
+
+<head>
+  <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
+  <meta name="description" content="ion-skeleton-text は、プレースホルダコンテンツをレンダリングするためのコンポーネントです。この要素は、ローディングテキストのフレームワークとして、指定された幅で灰色のブロックをレンダリングします。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+
+Skeleton Textは、placeholderコンテンツをレンダリングするためのコンポーネントです。要素は、指定した幅でグレーのブロックをレンダリングします。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md';
+
+<Basic />
+
+## テーマ
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.md';
+
+<CSSProps />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
new file mode 100644
index 00000000000..7d32a2ec0ad
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
@@ -0,0 +1,63 @@
+---
+title: "ion-spinner"
+---
+import Props from '@ionic-internal/component-api/v7/spinner/props.md';
+import Events from '@ionic-internal/component-api/v7/spinner/events.md';
+import Methods from '@ionic-internal/component-api/v7/spinner/methods.md';
+import Parts from '@ionic-internal/component-api/v7/spinner/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
+
+<head>
+  <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
+  <meta name="description" content="ion-spinner コンポーネントは、アニメーションするさまざまな SVG スピナーを提供します。これらのアイコンは、アプリがロード中であることや、別の処理を実行していることを示し、待機させることができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Spinnerコンポーネントには、さまざまなアニメーションつきのSVG Spinnerが用意されています。Spinnerは、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
+
+
+## 基本的な使い方
+
+デフォルトのスピナーは、モードに基づいて決定されます。モードが `ios` の場合、スピナーは `"lines"` となり、モードが `md` の場合、スピナーは `"circular"` となります。 `name` プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。
+
+import Basic from '@site/static/usage/v7/spinner/basic/index.md';
+
+<Basic />
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
new file mode 100644
index 00000000000..74ddf3b1702
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
@@ -0,0 +1,81 @@
+---
+title: "ion-split-pane"
+---
+
+import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
+import Events from '@ionic-internal/component-api/v7/split-pane/events.md';
+import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md';
+import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/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は、マルチビューのアプリレイアウトを作成する際に便利です。これにより、メニューなどのUI要素を、ビューポートの幅が広がるにつれて表示することができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+分割ペインは、マルチビューレイアウトを作成する際に便利です。
+メニューのようなUI要素は、分割されたペインで表示することができます。ビューポートの幅が大きくなるにつれて表示されます。
+
+デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。
+
+## 基本的な使い方
+
+:::note
+このデモでは `when` プロパティを `'xs'` に設定し、分割ペインが常に表示されるようにしています。小さなビューポートで分割ペインを折りたたみたい場合は、Ionicアプリケーションにこの設定は必要ありません。詳しくは、[ブレークポイントの設定](#setting-breakpoints)を参照してください。
+:::
+
+import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
+
+<Basic />
+
+## ブレイキング・ポイントを決める
+
+デフォルトでは、画面が992pxを超えると分割ペインが拡張表示されます。これをカスタマイズするには、 `when` プロパティにブレークポイントを渡します。`when` プロパティには、真偽値、有効なメディア・クエリー、またはIonicの事前定義サイズのいずれかを指定できます。
+
+
+```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                      |
+## テーマ
+
+## CSSカスタムプロパティ
+
+import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md';
+
+<CSSProperties />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
new file mode 100644
index 00000000000..62d6b90f0c7
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
@@ -0,0 +1,207 @@
+---
+title: "ion-tab-bar"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@ionic-internal/component-api/v7/tab-bar/props.md';
+import Events from '@ionic-internal/component-api/v7/tab-bar/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
+
+<head>
+  <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</title>
+  <meta name="description" content="tab barコンポーネントには、タブボタンのセットが含まれており、通信するためにはタブの内側にタブバーを用意する必要があります。使用方法とCSSカスタムプロパティについてはこちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+TabBarは、[tab buttons](tab-button.md)のセットを含むUIコンポーネントです。各[tab](tab.md)と通信するには、[tabs](tabs.md)の内部にTabBarを設定する必要があります。
+
+
+
+
+## 使い方
+
+<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>
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
new file mode 100644
index 00000000000..cb2c489accf
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
@@ -0,0 +1,295 @@
+---
+title: "ion-tab-button"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@ionic-internal/component-api/v7/tab-button/props.md';
+import Events from '@ionic-internal/component-api/v7/tab-button/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md';
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポーネントです。tab buttonを使用すると、iconとlabelのレイアウトを指定し、[tab view](tab.md)に接続できます。
+
+タブの設定の詳細については、[tabs documentation](tabs.md)を参照してください。
+
+
+
+
+## 使い方
+
+<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" aria-hidden="true"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers">
+      <ion-icon name="person-circle" aria-hidden="true"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map">
+      <ion-icon name="map" aria-hidden="true"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about">
+      <ion-icon name="information-circle" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+      <ion-icon name="map" aria-hidden="true"></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" aria-hidden="true"></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} aria-hidden="true" />
+          <IonLabel>Schedule</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="speakers">
+          <IonIcon icon={personCircle} aria-hidden="true" />
+          <IonLabel>Speakers</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="map">
+          <IonIcon icon={map} aria-hidden="true" />
+          <IonLabel>Map</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="about">
+          <IonIcon icon={informationCircle} aria-hidden="true" />
+          <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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
+            <ion-label>Speakers</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+            <ion-icon name="map" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
+        <ion-label>Schedule</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="speakers" href="/tabs/speakers">
+        <ion-icon :icon="person-circle" aria-hidden="true"></ion-icon>
+        <ion-label>Speakers</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="map" href="/tabs/map">
+        <ion-icon :icon="map" aria-hidden="true"></ion-icon>
+        <ion-label>Map</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="about" href="/tabs/about">
+        <ion-icon :icon="informationCircle" aria-hidden="true"></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>
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
new file mode 100644
index 00000000000..5bbda670ff4
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
@@ -0,0 +1,49 @@
+---
+title: "ion-tab"
+---
+
+import Props from '@ionic-internal/component-api/v7/tab/props.md';
+import Events from '@ionic-internal/component-api/v7/tab/events.md';
+import Methods from '@ionic-internal/component-api/v7/tab/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
+
+<head>
+  <title>ion-tab - Ionic Framework Application Component</title>
+  <meta name="description" content="ion-tabは、タブの子コンポーネントです。各ion-tabは、アプリケーションまたは単一のビューのトップレベルのナビゲーションスタックを含むことができます。詳しくは、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+タブコンポーネントは、[tabs](tabs.md) の子コンポーネントです。各タブには、アプリまたは単一のビューのトップレベルのナビゲーション スタックを含めることができます。アプリには多くのタブがあり、それぞれが独立したナビゲーションを持つことができます。
+
+:::note
+ Note: このコンポーネントは、バニラまたはステンシルJavaScriptプロジェクトでのみ使用する必要があります。Angular、React、Vue のアプリでは、タブコンポーネントを宣言するために `ion-tab` を使用する必要はありません。
+:::
+
+
+詳しい設定方法は [tabs documentation](tabs.md) をご覧ください。
+
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
new file mode 100644
index 00000000000..1e39a3f8696
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
@@ -0,0 +1,79 @@
+---
+title: "ion-tabs"
+---
+import Props from '@ionic-internal/component-api/v7/tabs/props.md';
+import Events from '@ionic-internal/component-api/v7/tabs/events.md';
+import Methods from '@ionic-internal/component-api/v7/tabs/methods.md';
+import Parts from '@ionic-internal/component-api/v7/tabs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
+
+<head>
+  <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
+  <meta name="description" content="Tabsは、タブベースのナビゲーションを実装するためのトップレベルのコンポーネントです。イオンタブはスタイリングを持たず、ネイティブアプリのように動作するナビゲーションのルーター出口として機能します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+タブは、タブベースのナビゲーションを実装するためのトップレベルのナビゲーションコンポーネントです。
+このコンポーネントは、個々の[Tab](tab.md)コンポーネントのコンテナである。
+
+`ion-tabs` コンポーネントはスタイルを持たず、ナビゲーションを処理するためのルータアウトレットとして動作します。また、UI フィードバックやタブを切り替えるための機構は提供しない。タブを切り替えるには、`ion-tabs` の直接の子として `ion-tab-bar` を用意しなければなりません。
+
+`ion-tabs` と `ion-tab-bar` はどちらもスタンドアロンな要素として利用することができます。これらは互いに依存せずに動作しますが、通常は、ネイティブアプリのように動作するタブベースのナビゲーションを実装するために一緒に使用します。
+
+`ion-tab-bar` は、`ion-tabs` コンポーネントの適切な場所に投影するために、スロットを定義する必要があります。
+
+:::note Framework Support
+
+Angular、React、Vueで `ion-tabs` を使用するには、 `ion-router-outlet` または `ion-nav` コンポーネントを使用する必要があります。
+
+:::
+
+## ルーターとの併用
+
+タブはIonicルーターと一緒に使うことで、タブベースのナビゲーションを実装することができます。タブバーとアクティブなタブは、urlに基づいて自動的に解決されます。これはタブナビゲーションで最も一般的なパターンです。
+
+import Router from '@site/static/usage/v7/tabs/router/index.md';
+
+<Router />
+
+:::tip Best Practices
+
+Ionicでは、タブを使ったルーティングパターンのベストプラクティスに関するガイドを用意しています。 Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
+
+:::
+
+
+## Interfaces
+
+### TabsCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface TabsCustomEvent extends CustomEvent {
+  detail: { tab: string };
+  target: HTMLIonTabsElement;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
new file mode 100644
index 00000000000..96146e07b2a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
@@ -0,0 +1,49 @@
+---
+title: "ion-text"
+---
+import Props from '@ionic-internal/component-api/v7/text/props.md';
+import Events from '@ionic-internal/component-api/v7/text/events.md';
+import Methods from '@ionic-internal/component-api/v7/text/methods.md';
+import Parts from '@ionic-internal/component-api/v7/text/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/text/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/text/slots.md';
+
+<head>
+  <title>ion-text: Ionic App Component to Style or Change Text Color</title>
+  <meta name="description" content="ion-textは、任意の要素のテキストカラーをスタイルするために使用できるシンプルなアプリコンポーネントです。テキスト色を変更するために、ion-textがどのように要素をラップしているかを説明します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+textコンポーネントは、任意の要素のテキストカラーのスタイル設定に使用できる単純なコンポーネントです。テキストカラーを変更するには、要素を `ion-text` 要素で囲む必要があります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/text/basic/index.md';
+
+<Basic />
+
+
+## テーマ
+
+テキストコンポーネントは、Ionicが提供するデフォルトの[colors](../../docs/theming/colors)のいずれかを変更することでカスタマイズすることが可能です。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
new file mode 100644
index 00000000000..27c74dc86b0
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
@@ -0,0 +1,150 @@
+---
+title: "ion-textarea"
+---
+import Props from '@ionic-internal/component-api/v7/textarea/props.md';
+import Events from '@ionic-internal/component-api/v7/textarea/events.md';
+import Methods from '@ionic-internal/component-api/v7/textarea/methods.md';
+import Parts from '@ionic-internal/component-api/v7/textarea/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/textarea/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/textarea/slots.md';
+
+<head>
+  <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
+  <meta name="description" content="Textareaは複数行の入力のためのものです。このコンポーネントは、Ionicのプロパティに加えて、ネイティブのtextareaの属性を受け付けます。使用方法とCSS要素については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="scoped" />
+
+textareaコンポーネントは、複数行のテキスト入力に使用されます。ネイティブの textarea 要素は、コンポーネントの内部でレンダリングされます。ネイティブのtextareaを制御することで、textareaコンポーネントのユーザーエクスペリエンスとインタラクティブ性を向上させることができます。
+
+ネイティブのtextarea要素とは異なり、Ionicのtextareaは要素内部のコンテンツからその値を読み込むことをサポートしていません。textareaの値は`value`属性で設定しなくてはなりません。
+
+textareaコンポーネントはIonicのプロパティに加えて [ネイティブのtextareaの属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) に対応します。
+
+## 基本的な使い方
+
+import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
+
+<BasicPlayground />
+
+## Label Placement
+
+ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+
+import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
+
+<LabelPlacement />
+
+## Filled Textareas
+
+Material Designでは、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+
+`fill` スタイルはテキストエリアのコンテナを視覚的に定義するため、`fill` を使用するテキストエリアは `ion-item` で使用すべきではありません。
+
+import Fill from '@site/static/usage/v7/textarea/fill/index.md';
+
+<Fill />
+
+## Helper & Error Text
+
+ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使って textarea 内で使用することができます。エラーテキストは、`ion-invalid` と `ion-touched` クラスが `ion-textarea` に追加されていない限り表示されません。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。
+
+Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
+
+import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
+
+<HelperError />
+
+## Textarea Counter
+
+textareaカウンターは、textareaの下に表示されるテキストで、textareaが受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
+
+import Counter from '@site/static/usage/v7/textarea/counter/index.md';
+
+<Counter />
+
+## Autogrow
+
+`autoGrow`プロパティが`true`に設定されている場合、テキストエリアはその内容に基づいて拡大・縮小します。
+
+import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md';
+
+<AutogrowPlayground />
+
+## Clear on Edit
+
+`clearOnEdit`プロパティを`true`に設定すると、テキストエリアが編集削除された後、再度入力されるとクリアされます。
+
+import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.md';
+
+<ClearOnEditPlayground />
+
+## レガシーtextarea構文からの移行
+
+Ionic 7.0では、よりシンプルなtextareaの構文が導入されました。この新しい構文は、textareaを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。
+
+開発者はこの移行を一度に1つのtextareaで行うことができます。開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+
+### 最新の構文の使い方
+
+最新の構文を使うには、3つのステップがあります。
+
+1. `ion-label` を削除して、代わりに `ion-textarea` の `label` プロパティを使用します。ラベルの配置は `ion-textarea` の `labelPlacement` プロパティを使用して設定することができる。
+2. テキストエリア固有のプロパティを `ion-item` から `ion-textarea` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれます。
+3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-textarea` の `helperText` と `errorText` プロパティを使用します。
+
+import Migration from '@site/static/usage/v7/textarea/migration/index.md';
+
+<Migration />
+
+### レガシー構文の使用
+
+Ionicは、アプリが最新のtextarea構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-textarea`の`legacy`プロパティを`true`に設定することで、そのインスタンスのtextareaがレガシー構文を使用するように強制できます。
+
+## テーマ
+
+import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.md';
+
+<ThemingPlayground />
+
+## Interfaces
+
+### TextareaChangeEventDetail
+
+```typescript
+interface TextareaChangeEventDetail {
+  value?: string | null;
+}
+```
+
+### TextareaCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface TextareaCustomEvent extends CustomEvent {
+  detail: TextareaChangeEventDetail;
+  target: HTMLIonTextareaElement;
+}
+```
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
new file mode 100644
index 00000000000..74a5543b6e4
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
@@ -0,0 +1,61 @@
+---
+title: "ion-thumbnail"
+---
+
+import Props from '@ionic-internal/component-api/v7/thumbnail/props.md';
+import Events from '@ionic-internal/component-api/v7/thumbnail/events.md';
+import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.md';
+import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
+
+<head>
+  <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
+  <meta name="description" content="ion-thumbnailコンポーネントは、画像やアイコンを包み込み、画像のレイアウト表示や原寸大のプレビューに使用することができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+Thumbnailsは、通常、画像またはアイコンをラップする四角形のコンポーネントです。これを使用すると、大きな画像のグループを簡単に表示したり、フルサイズのイメージのプレビューを表示したりできます。
+
+Thumbnailsは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-item` の内部に配置すると、Thumbnailsのサイズが親コンポーネントに合わせて変更されます。Thumbnailsをアイテムの左側または右側に配置するには、slotをそれぞれ `start` または `end` に設定します。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/thumbnail/basic/index.md';
+
+<Basic />
+
+## Item Thumbnails
+
+import Item from '@site/static/usage/v7/thumbnail/item/index.md';
+
+<Item />
+
+## テーマ
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.md';
+
+<CSSProps />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
new file mode 100644
index 00000000000..d564830d946
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
@@ -0,0 +1,84 @@
+---
+title: "ion-title"
+---
+import Props from '@ionic-internal/component-api/v7/title/props.md';
+import Events from '@ionic-internal/component-api/v7/title/events.md';
+import Methods from '@ionic-internal/component-api/v7/title/methods.md';
+import Parts from '@ionic-internal/component-api/v7/title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/title/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/title/slots.md';
+
+<head>
+  <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
+  <meta name="description" content="ion-titleは、ツールバーのタイトルを設定するコンポーネントです。Ionic Frameworkアプリのtitleとcollapsible titleコンポーネントの詳細と使用方法については、こちらをご覧ください。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+Titleは、[ツールバー](./toolbar)のタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。
+
+## Basic
+
+import Basic from '@site/static/usage/v7/title/basic/index.md';
+
+<Basic />
+
+## 折りたたみ式ラージタイトル
+
+大きなタイトルは、[content](./content)がスクロールコンテナの開始位置までスクロールされたときに表示されます。タイトルがヘッダーの後ろにスクロールされると、縮小されたタイトルがフェードインします。
+
+:::info
+
+This feature is only available for iOS.
+
+:::
+
+import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large-title/basic/index.md';
+
+<CollapsibleLargeTitle />
+
+### 折りたたみ式ボタン
+
+[buttons](./buttons.md)コンポーネントは、[`collapse`](./buttons.md#collapse)プロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。
+
+
+import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
+
+<CollapsibleLargeTitleButtons />
+
+## テーマ
+
+折りたたみ式ラージタイトルは、コンテンツの他の部分との関係でシームレスに表示される必要があります。つまり、折りたたみ可能なラージタイトルを含むツールバーの背景色は、常にコンテンツの背景色と一致する必要があります。
+
+デフォルトでは、標準タイトルを含むツールバーは `opacity: 0` を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。
+
+標準タイトルのあるツールバーの背景色は、CSS変数に `--background` を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。
+
+ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
+
+## CSSカスタムプロパティ
+
+import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.md';
+
+<CSSCustomProperties />
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
new file mode 100644
index 00000000000..18c6117e269
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
@@ -0,0 +1,169 @@
+---
+title: "ion-toast"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@ionic-internal/component-api/v7/toast/props.md';
+import Events from '@ionic-internal/component-api/v7/toast/events.md';
+import Methods from '@ionic-internal/component-api/v7/toast/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toast/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
+
+<head>
+  <title>ion-toast Component: A Dismissible App Notification Alert</title>
+  <meta name="description" content="ion-toast コンポーネントは、システムメッセージやフィードバックを表示するアプリの通知です。トーストのアラートはコンテンツの上に表示され、インタラクションを再開するには解除されます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+トーストは、最近のアプリケーションでよく使われる小さな通知です。操作に関するフィードバックを提供したり、システムメッセージを表示したりするために使用されます。トーストは、アプリケーションのコンテンツの上に表示され、アプリケーションによって解除されると、アプリケーションとの対話を再開することができます。
+
+## インラインToasts (推奨)
+
+`ion-toast`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。
+
+import InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/index.md';
+
+<InlineToastTriggerExample />
+
+### Using `isOpen​`
+
+`ion-toast` の `isOpen` プロパティは、開発者がアプリケーションの状態からトーストの表示状態を制御できるようにするものです。つまり、`isOpen` を `true` に設定するとトーストが表示され、`isOpen` を `false` に設定するとトーストは破棄されます。
+
+`isOpen` は一方通行のデータバインディングを使用しているため、トーストが破棄されたときに自動的に `false` に設定されることはありません。開発者は `ionToastDidDismiss` または `didDismiss` イベントをリスニングして `isOpen` を `false` に設定する必要があります。この理由は、`ion-toast` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、トーストはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、トーストはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
+
+import InlineToastIsOpenExample from '@site/static/usage/v7/toast/inline/is-open/index.md';
+
+<InlineToastIsOpenExample />
+
+## Controller Toasts
+
+import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.md';
+
+<ControllerExample />
+
+## Dismissing
+
+トーストは静かな通知であり、ユーザーの邪魔をしないように意図されています。そのため、トーストを解除するためにユーザーの操作を必要とするべきではありません。
+
+トーストは、トーストオプションの `duration` に表示するミリ秒数を渡すことで、特定の時間経過後に自動的に解除されるようにすることができます。もし `"cancel"` という役割を持つボタンが追加された場合、そのボタンがトーストを終了させます。作成後にトーストを破棄するには、インスタンスの `dismiss()` メソッドを呼び出してください。
+
+ハードウェアの戻るボタンを押しても、トーストはユーザーの邪魔をしないようになっているので、トーストは破棄されません。
+
+次の例では、`buttons` プロパティを使用して、クリックすると自動的にトーストを解散させるボタンを追加する方法と、解散イベントの `role` を収集する方法を示しています。
+
+import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
+
+<ButtonsPlayground />
+
+## ポジショニング
+
+トーストは、ビューポートの上部、下部、中部に配置することができます。位置は作成時に渡すことができます。指定できる値は `top`, `bottom`, `middle` です。位置が指定されない場合、トーストはビューポートの一番下に表示されます。
+
+## レイアウト
+
+トースト内のボタンコンテナは、`layout`プロパティを使用して、メッセージと同じ行に表示するか、別々の行に積み重ねて表示することができます。スタックレイアウトは、長いテキスト値を持つボタンで使用する必要があります。さらに、スタックトーストレイアウトのボタンは `side` の値として `start` または `end` のどちらかを使用できますが、両方を使用することはできません。
+
+import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
+
+<StackedPlayground />
+
+## Icons
+
+トースト内のコンテンツの横にアイコンを追加することができます。一般的に、トーストのアイコンはスタイルやコンテキストを追加するために使用されるべきで、ユーザーの注意を引いたり、トーストの優先順位を上げたりするために使用すべきではありません。より優先順位の高いメッセージをユーザーに伝えたい場合や、応答を保証したい場合は、代わりに [Alert](alert.md) を使用することをお勧めします。
+
+import IconPlayground from '@site/static/usage/v7/toast/icon/index.md';
+
+<IconPlayground />
+
+## テーマ
+
+import ThemingPlayground from '@site/static/usage/v7/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;
+}
+```
+
+## アクセシビリティ
+
+### フォーカスの管理
+
+トーストはさりげなく通知するものであり、ユーザーの邪魔をするものではありません。トーストを消すためにユーザーの操作が必要であってはなりません。そのため、トーストが表示されても、フォーカスが自動的に移動することはありません。
+
+### スクリーンリーダー
+
+`ion-toast` は、デフォルトで `aria-live="polite"` と `aria-atomic="true"` が設定されています。
+
+`aria-live` を指定すると、トーストの内容が更新されたときにスクリーンリーダがアナウンスするようになります。しかし、この属性は `'polite'` に設定されているため、スクリーン・リーダーは通常、現在のタスクを中断することはありません。開発者は `htmlAttributes` プロパティを使用して `aria-live` を `'assertive'` に設定することで、この動作をカスタマイズすることができます。これにより、トーストが更新されると、スクリーン・リーダーはすぐにユーザーに通知し、それまでの更新を中断させる可能性があります。
+
+また、`aria-atomic="true"`を設定すると、トースト全体を1つのユニットとしてアナウンスすることができます。これはトーストのコンテンツを動的に更新するときに便利で、スクリーン・リーダーが変更されたコンテンツのみをアナウンスすることを防ぎます。
+
+### ヒント
+
+これは完全なリストではありませんが、トーストを使用する際に従うべきガイドラインをいくつか紹介します。
+
+* トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss" ボタンがあるのは良いですが、タイムアウト後にトーストが自動的に終了するようにします。通知のためにユーザーの操作が必要な場合は、代わりに [ion-alert](./alert) を使用することを検討してください。
+
+* 複数のトーストを連続して開くことは避けてください。もし `aria-live` が `'assertive'` に設定されている場合、スクリーンリーダーは新しいトーストをアナウンスするために現在のタスクの読み込みを中断し、前のトーストのコンテキストが失われる可能性があります。
+
+* 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
new file mode 100644
index 00000000000..2d9f83b747b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
@@ -0,0 +1,152 @@
+---
+title: "ion-toggle"
+---
+import Props from '@ionic-internal/component-api/v7/toggle/props.md';
+import Events from '@ionic-internal/component-api/v7/toggle/events.md';
+import Methods from '@ionic-internal/component-api/v7/toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
+
+<head>
+  <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
+  <meta name="description" content="Toggleは、1つのオプションの状態を変更します。ion-toggleを使用して、アプリケーションのオン/オフを切り替えることができるカスタマイズ可能なトグルボタンを作成します。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+トグルは、1つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、`checked`プロパティを設定することで、プログラムによってチェックすることも可能です。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v7/toggle/basic/index.md';
+
+<Basic />
+
+
+## On / Off Labels
+
+トグルは、`enableOnOffLabels`プロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。
+
+import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
+
+<OnOff />
+
+
+## Toggles in a List
+
+[アイテム](./item)と[リスト](./list)コンポーネントを使用すると、リストビューでトグルを使用することも可能です。
+
+import List from '@site/static/usage/v7/toggle/list/index.md';
+
+<List />
+
+
+## Label Placement
+
+開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+
+import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.md';
+
+<LabelPlacement />
+
+
+## Justification
+
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
+
+import Justify from '@site/static/usage/v7/toggle/justify/index.md';
+
+<Justify />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+CSSカスタムプロパティは、標準CSSと組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの `width` と `height` を直接変更してトラックのサイズを変更し、`--handle-width` と `--handle-height` カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。
+
+import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.md';
+
+<CSSProps />
+
+### CSS Shadow Parts
+
+トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのようなCSSプロパティでもスタイルを設定でき、CSSカスタムプロパティと組み合わせることも可能です。
+
+import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.md';
+
+<CSSParts />
+
+## レガシーなトグル構文からの移行
+
+Ionic 7.0では、よりシンプルなトグル構文が導入されました。この新しい構文は、トグルの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+### 最新の構文の使い方
+
+最新の構文を使用するには、`ion-label`を削除して、`ion-toggle`の内部にラベルを直接渡します。ラベルの配置は `ion-toggle` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-toggle` の `justify` プロパティを使用して制御することができます。
+
+import Migration from '@site/static/usage/v7/toggle/migration/index.md';
+
+<Migration />
+  
+
+:::note
+Ionic の過去のバージョンでは、`ion-toggle` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-toggle` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-toggle`が正しく機能するためには、`ion-item`はもはや必須ではありません。
+:::
+
+### レガシー構文の使用
+
+Ionicは、アプリが最新のトグル構文を使用しているかどうかを検出するためにヒューリスティックを使用しています。場合によっては、レガシー構文を使い続けることが望ましいこともあります。開発者は、`ion-toggle`の`legacy`プロパティを`true`に設定することで、そのトグルのインスタンスがレガシー構文を使用するように強制できます。
+
+## Interfaces
+
+### ToggleChangeEventDetail
+
+```typescript
+interface ToggleChangeEventDetail<T = any> {
+  value: T;
+  checked: boolean;
+}
+```
+
+### ToggleCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface ToggleCustomEvent<T = any> extends CustomEvent {
+  detail: ToggleChangeEventDetail<T>;
+  target: HTMLIonToggleElement;
+}
+```
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
new file mode 100644
index 00000000000..ce3cc779294
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
@@ -0,0 +1,109 @@
+---
+title: "ion-toolbar"
+---
+import Props from '@ionic-internal/component-api/v7/toolbar/props.md';
+import Events from '@ionic-internal/component-api/v7/toolbar/events.md';
+import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md';
+import Parts from '@ionic-internal/component-api/v7/toolbar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
+
+<head>
+  <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
+  <meta name="description" content="Ion-toolbar コンポーネントは、アプリのメニューにあるツールバーボタンをカスタマイズすることができます。コンテンツの上下に固定ツールバーを追加したり、コンテンツと一緒にスクロールするフルスクリーンを使用することができます。" />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+
+ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。コンテンツ](./content)内に配置された場合、ツールバーはコンテンツと一緒にスクロールします。
+
+ツールバーには、タイトル、ボタン、アイコン、戻るボタン、メニューボタン、検索バー、セグメント、プログレスバーなど、さまざまなコンポーネントを含めることができます。
+
+
+## 基本的な使い方
+
+ツールバーを正しく配置するために、[header](./header)または[footer](./footer)の内部に配置することをお勧めします。ツールバーをヘッダーに配置すると、コンテンツの上部に固定されて表示されます。フッターに配置された場合は、下側に固定されて表示されます。フルスクリーンのコンテンツは、ヘッダーやフッターにあるツールバーの後ろでスクロールします。 [title](./title) コンポーネントを使用すると、ツールバーの内側にテキストを表示することができます。
+
+import Basic from '@site/static/usage/v7/toolbar/basic/index.md';
+
+<Basic />
+
+
+## Buttons in Toolbars
+
+ツールバーに配置するボタンは、[buttons](./buttons)コンポーネントの内部に配置する必要があります。ボタンコンポーネントは、名前付きの [スロット](#slots) を使ってツールバーの内側に配置することができます。スロットの `"primary"` と `"secondary"` は `ios` モードと `md` モードで異なる動作をします。
+
+buttons コンポーネントは、標準的な [ボタン](./button)、[戻るボタン](./back-button)、[メニューボタン](./menu-button)、またはそれらのいずれかをラップすることができます。ツールバーのボタンはデフォルトで透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例でバックボタンとメニューボタンに含まれているプロパティは表示目的であり、適切な使用方法についてはそれぞれのドキュメントを参照してください。
+
+import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
+
+<Buttons />
+
+
+## Searchbars in Toolbars
+
+[searchbar](./searchbar)は、ツールバーの中に配置することで、コンテンツを検索することができます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さを完全に占有します。
+
+import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md';
+
+<Searchbars />
+
+
+## ツールバーのセグメント
+
+[セグメント](./segment)は、一般的にツールバーで、同じページ内の2つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。
+
+import Segments from '@site/static/usage/v7/toolbar/segments/index.md';
+
+<Segments />
+
+
+## ツールバーのプログレスバー
+
+[プログレスバー](./progress-bar)は、アプリで進行中のプロセスを示すローディングインジケータとして使用されます。プログレスバーは、ツールバーの下部に配置されるため、ツールバーの中の他のコンポーネントと一緒に配置することができます。
+
+import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
+
+<ProgressBars />
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.md';
+
+<Colors />
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.md';
+
+<CSSProps />
+
+
+## Borders
+
+`md` モードでは、`<ion-header>` は下部にボックスシャドウを、`<ion-footer>` は上部にボックスシャドウを表示します。 `ios` モードでは、`<ion-header>` の下部にボーダーが、`<ion-footer>` の上部にボーダーが表示されます。
+
+
+## プロパティ
+<Props />
+
+## イベント
+<Events />
+
+## メソッド
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSSカスタムプロパティ
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
new file mode 100644
index 00000000000..fac64336ea2
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
@@ -0,0 +1,54 @@
+---
+title: Ionic CLI
+sidebar_label: 概要
+---
+
+<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)) は、Ionicアプリを開発する時に頼りになるツールです。
+
+## インストール
+
+Ionic CLI はnpmでグローバルにインストールできます:
+
+```shell
+npm install -g @ionic/cli
+```
+
+## Help
+
+Ionic CLIでは `--help` フラグをつけることでコマンドのドキュメントを利用できます。
+
+```shell
+$ ionic --help
+$ ionic <command> --help
+$ ionic <command> <subcommand> --help
+```
+
+:::note
+プロジェクトディレクトリで `ionic <command> --help` を必ず実行してください。
+
+コマンドの中には `ionic serve` のように、React と Angular のように、プロジェクトのタイプに応じたヘルプが表示されるものがあります。
+:::
+
+<!-- TODO: image? -->
+
+## 構成
+
+Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新のNode LTSが推奨です。Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">Github repository</a>.
+
+## トラブルシューティング
+
+Ionic CLIの問題をトラブルシューティングするには、以下の方法が役立ちます:
+
+- 最新バージョンのIonic CLIがインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。
+- 最新のNode LTSがインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setupを参照してください。
+- `verbose` フラグは、デバッグメッセージを表示し、問題を絞り込むことができます。
+- 接続の問題は、プロキシの設定が適切でないことが原因である可能性があります。リクエストプロキシの設定については、[Using a Proxy](/docs/cli/using-a-proxy) を参照してください。
+- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLIが再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI環境変数](/docs/cli/configuration#environment-variables)で設定します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore
new file mode 100644
index 00000000000..d6b7ef32c84
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
new file mode 100644
index 00000000000..947eb20f6b0
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
@@ -0,0 +1,243 @@
+---
+title: 設定
+---
+
+<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>
+
+## ファイル
+
+設定された値はJSONファイルに格納されます。Ionic CLIは、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。
+
+CLIには、プロジェクト設定ファイルおよびグローバルCLI設定ファイルから設定値を設定およびprintfするためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。
+
+### プロジェクト設定ファイル
+
+各Ionicプロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。
+
+```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": {
+    ...
+  }
+}
+```
+
+## 環境変数
+
+CLIは、次の環境変数を検索します:
+
+- `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は、CLIコマンドの動作を変更するグローバルオプションです。
+
+- `--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
+
+CLIは、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLIにフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。:
+
+* `ionic:serve:before`: dev server が start される前に実行されます
+* `ionic:serve:after`: dev server が終了される前に実行されます
+* `ionic:build:before`: web assetの構築がはじまる前に実行されます
+* `ionic:build:after`: web assetの構築が終了して実行されます。
+* `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed
+* `ionic:capacitor:build:before` : executed on 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は `ionic.config.json` で定義することもできます。プロジェクト内でHooksオブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値はJavaScriptファイルへのパスまたはパスの配列です。
+
+次の例では、ファイルは `ionic:build:before` フックでインポートされ、実行されます。
+
+```json
+"hooks": {
+  "build:before": "./scripts/build-before.js"
+},
+```
+
+JavaScript Hook ファイルは、フックが実行されるたびに単一の引数(`ctx`)が渡される単一の関数をエクスポートする必要があります。
+
+引数は、Hook ファイルに指定されたコンテキストであり、Hook ごと、および呼び出しごとに異なります。
+
+`./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
+Ionic CLIは multi-app 構成セットアップをサポートしており、複数のIonicアプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。
+
+If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples.
+:::
+
+### セットアップステップ
+
+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).
+
+### プロジェクト構成
+
+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
+```
+
+### 設定ファイル
+
+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.
+
+### アプリの追加
+
+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
+```
+
+## 詳細設定
+
+### 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 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.
+
+### 遠隔計測について
+
+CLIからIonicに使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
new file mode 100644
index 00000000000..23703954a9e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
@@ -0,0 +1,71 @@
+# Live Reload
+
+Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. 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
+
+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 IP 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.
+
+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.
+
+### Using SSL
+
+Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS.
+
+For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:
+```shell
+ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
+```
+
+Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
new file mode 100644
index 00000000000..57680535f4f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
@@ -0,0 +1,45 @@
+# プロキシを利用する
+
+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"
+```
+
+### 他のCLI
+
+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の設定
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
new file mode 100644
index 00000000000..90cd49769ae
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
@@ -0,0 +1,156 @@
+---
+title: UIコンポーネント
+hide_table_of_contents: true
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>UIコンポーネント | 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アプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionicには、modals、popups、cardsなど、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。
+
+<intro-end />
+
+<DocsCards>
+  <DocsCard header="Action Sheet" href="api/action-sheet" img="/icons/feature-component-actionsheet-icon.png">
+    <p>Action Sheetは、一連のオプションを表示して、アクションを確認または取り消すことができます。</p>
+  </DocsCard>
+
+<DocsCard header="Alert" href="api/alert" icon="/icons/component-alert-icon.png">
+  <p>Alertは、特定のアクションまたはアクションのリストを選択する機能を、ユーザーに提供するための優れた方法です。</p>
+</DocsCard>
+
+<DocsCard header="Badge" href="api/badge" icon="/icons/component-badge-icon.png">
+  <p>Badgeコンポーネントは、通常は数値をユーザーに伝えるための小さなコンポーネントです。</p>
+</DocsCard>
+
+<DocsCard header="Button" href="api/button" icon="/icons/component-button-icon.png">
+  <p>Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。</p>
+</DocsCard>
+
+<DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
+  <p>
+    Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。
+  </p>
+</DocsCard>
+
+<DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
+  <p>Checkboxを使用して、択一の決定をする必要があることをユーザーに知らせることができます。</p>
+</DocsCard>
+
+<DocsCard header="Chip" href="api/chip" icon="/icons/component-chip-icon.png">
+  <p>チップはデータやアクションを表示するためのコンパクトな方法です。</p>
+</DocsCard>
+
+<DocsCard header="Content" href="api/content" icon="/icons/component-content-icon.png">
+  <p>コンテンツは、アプリと対話してアプリをナビゲートするための典型的な方法です。</p>
+</DocsCard>
+
+<DocsCard header="Date & Time Pickers" href="api/datetime" icon="/icons/component-datetimepicker-icon.png">
+  <p>日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。</p>
+</DocsCard>
+
+<DocsCard header="Floating Action Button" href="api/fab" icon="/icons/component-fab-icon.png">
+  <p>フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。</p>
+</DocsCard>
+
+<DocsCard header="Icons" href="api/icon" 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>Gridはカスタムレイアウトを構築するための強力なモバイルファーストシステムです。</p>
+</DocsCard>
+
+<DocsCard header="Infinite Scroll" href="api/infinite-scroll" icon="/icons/component-infinitescroll-icon.png">
+  <p>Infinite scrollは、ユーザーがアプリをスクロールするときに新しいデータを読み込むことができます。</p>
+</DocsCard>
+
+<DocsCard header="Input" href="api/input" icon="/icons/component-input-icon.png">
+  <p>Inputsはユーザーがアプリにデータを入力する方法を提供します。</p>
+</DocsCard>
+
+<DocsCard header="Item" href="api/item" icon="/icons/component-item-icon.png">
+  <p>Itemsは、Listの一部として使用できる汎用のUIコンテナです。</p>
+</DocsCard>
+
+<DocsCard header="List" href="api/list" icon="/icons/component-lists-icon.png">
+  <p>Listは、連絡先リスト、再生リスト、メニューなどの情報の行を表示できます。</p>
+</DocsCard>
+
+<DocsCard header="Navigation" href="api/nav" img="/icons/feature-component-navigation-icon.png">
+  <p>Navigationは、ユーザーがアプリ内の異なるページ間を移動する方法です。</p>
+</DocsCard>
+
+<DocsCard header="Menu" href="api/menu" icon="/icons/component-menu-icon.png">
+  <p>Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。</p>
+</DocsCard>
+
+<DocsCard header="Modal" href="api/modal" icon="/icons/component-modal-icon.png">
+  <p>Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。</p>
+</DocsCard>
+
+<DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
+  <p>Popoverは、コンテキストを変えずに情報やオプションを提示する簡単な方法を提供します。</p>
+</DocsCard>
+
+<DocsCard header="Progress Indicators" href="api/progress-bar" icon="/icons/component-progress-icon.png">
+  <p>Progress indicatorsは、操作またはアクティビティの進行状況を視覚化します。</p>
+</DocsCard>
+
+<DocsCard header="Radio" href="api/radio" icon="/icons/component-radio-icon.png">
+  <p>Radio inputsはあなたが排他的なオプションのセットを提示することを可能にします。</p>
+</DocsCard>
+
+<DocsCard header="Refresher" href="api/refresher" icon="/icons/component-refresher-icon.png">
+  <p>Refresherは、コンテンツコンポーネントの更新機能を提供します。</p>
+</DocsCard>
+
+<DocsCard header="Searchbar" href="api/searchbar" img="/icons/feature-component-search-icon.png">
+  <p>Searchbarは、ールバーからアイテムを検索またはフィルタリングするために使用されます。</p>
+</DocsCard>
+
+<DocsCard header="Reorder" href="api/reorder" icon="/icons/component-reorder-icon.png">
+  <p>Reorderを使用すると、ユーザーはドラッグアンドドロップでアイテムのリストを並べ替えることができます。</p>
+</DocsCard>
+
+<DocsCard header="Routing" href="api/router" icon="/icons/component-routing-icon.png">
+  <p>Routingは現在のpathに基づいてナビゲーションを可能にします。</p>
+</DocsCard>
+
+<DocsCard header="Segment" href="api/segment" icon="/icons/component-segment-icon.png">
+  <p>Segmentsは、フィルターまたはViewの切り替えとして使用できる一連の専用ボタンを提供します。</p>
+</DocsCard>
+
+<DocsCard header="Select" href="api/select" icon="/icons/component-select-icon.png">
+  <p>SelectはネイティブのHTML選択に似ていますが、Sortと選択が少し改善されています。</p>
+</DocsCard>
+
+<DocsCard header="Tabs" href="api/tabs" img="/icons/feature-component-tabs-icon.png">
+  <p>Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。</p>
+</DocsCard>
+
+<DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
+  <p>Toastは、アプリのコンテンツの上に通知を表示するために使用されます。一時的なものでも却下可能なものでもあります。</p>
+</DocsCard>
+
+<DocsCard header="Toggle" href="api/toggle" icon="/icons/component-toggle-icon.png">
+  <p>Togglesは択一のInputでありオプションやスイッチによく使われます。</p>
+</DocsCard>
+
+  <DocsCard header="Toolbar" href="api/toolbar" icon="/icons/component-toolbar-icon.png">
+    <p>Toolbarsは、アプリに関連する情報や操作を格納するために使用されます。</p>
+  </DocsCard>
+</DocsCards>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/coc.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/coc.md
new file mode 100644
index 00000000000..5e9c1a94d20
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/how-to-contribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/how-to-contribute.md
new file mode 100644
index 00000000000..df5f6efbd23
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
new file mode 100644
index 00000000000..4564e31fa34
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
@@ -0,0 +1,180 @@
+---
+disableHtmlPreviews: true
+---
+
+# クロスプラットフォーム
+
+Ionicは、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。
+
+## ハードウェアAPI
+
+ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するためのAPIを呼び出すことがよくあります。これらのAPI呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionicにはこの問題に対応するためのいくつかの方法があります。
+
+### Ionic Native
+
+[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったりCordovaプラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、アプリがクラッシュすることなく動き続けるということです。
+
+### プラットフォーム検知
+
+Ionicアプリ内では、ネイティブAPIを呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例:
+
+```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
+  }
+});
+```
+
+このコードは、ネイティブAPIが使えるかどうか不確かな環境向けに開発していたとしても非常に役に立ちます。
+
+### ブラウザのフォールバック
+
+多くのネイティブAPI（例えばFile API）はブラウザで利用できません。APIは常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの2つの点を考慮すると、アプリが実行されているプラ​​ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。
+
+## デスクトップ
+
+デスクトップ向けアプリの開発を計画しているときは、<a href="https://electronjs.org" target="_blank">Electron</a>として開発するか、<strong>Progressive Web App</strong>として開発するか検討し、より大きなデバイスでアプリがスムーズに機能するかを確認することが重要です。
+
+### レイアウト
+
+多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的なUIパターンを考えてください:
+
+```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>
+```
+
+このコードは幅が100%の5つの項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。
+
+<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>
+```
+
+全体を `ion-grid` 要素で囲むことで、Ionicのグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。
+
+<img src={require('@site/static/img/building/cross-platform-grid.png').default} />
+
+`<ion-grid>` 要素に `fixed` 属性を追加することでより良くすることができます。これにより、グリッドは画面幅に基づいて固定幅を持つようになります。どんなに大きな画面でもグリッド幅が不自然に大きくなることはありません。
+
+<img src={require('@site/static/img/building/cross-platform-grid-fixed.png').default} />
+
+`ion-col` プロパティを追加することで列の幅をよりカスタマイズすることができます。
+
+```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>
+```
+
+上の例ではたくさんのコードが追加されていますが、キーポイントは下記になります:
+
+- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は12です。
+
+- `size`属性は`size-{breakpoint}`の形式で各画面幅に応じたブレークポイントを持つこともできます。
+
+グリッドのカスタマイズについてより詳細な情報は[Grid]((../api/grid.md)をご覧ください。
+
+## ストレージ
+
+ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHRリクエストからJSONを保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLiteデータベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic開発者はそれを心配する必要はありません。
+
+### Ionic Storage
+
+この場合、<a href="https://github.com/ionic-team/ionic-storage" target="_blank">Ionicのストレージライブラリ</a>は複数の環境において最適な選択肢です。Ionicのストレージクラスは、十分にテストされたLocalForageライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。
+
+現在、ネイティブ向けにはSQLiteを通して実行され、他にもIndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定した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);
+  }
+}
+```
+
+PouchDBといった他のストレージを選択することも可能です。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
new file mode 100644
index 00000000000..1c73465725e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
@@ -0,0 +1,47 @@
+---
+title: 基本的な考え方
+sidebar_label: 基本的な考え方
+---
+
+<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>
+
+Ionicアプリの開発に慣れていない人には、Ionicプロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Frameworkとは何か、そしてそれがどのように機能するかについての基本を説明します。
+
+## UIコンポーネント
+
+Ionic Frameworkは、アプリケーションの構成要素として機能する、再利用可能なUIコンポーネントのライブラリです。Ionicのコンポーネントは、HTML、CSS、JavaScriptを利用した[Web標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionicコンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。
+
+## スタイルの適用
+
+スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できるIonic Frameworkに組み込まれている機能です。すべてのIonicコンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhoneやiPadなどのAppleデバイスは、Apple独自の<a href="https://www.apple.com/ios" target="_blank">iOSデザイン</a>を使用します。同様に、Androidデバイスは、<a href="https://material.io/guidelines/" target="_blank">Material Design</a>と呼ばれるGoogleのデザインを使用します。
+
+プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリのUXを提供します。AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを使用し、AndroidのPlay StoreからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからProgressive Web Apps（PWA）として表示アプリを表示する場合、IonicはデフォルトでMaterial Designテーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。
+
+## ナビゲーション
+
+従来のWebアプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。
+この例としては、ユーザが、Wikipediaのようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。
+
+これとは対照的に、モバイルアプリはしばしば平行な「非線形」ナビゲーションを利用します。たとえば、タブのついたインタフェースでは、タブごとにナビゲーションスタックを個別に設定できるため、ユーザがタブ間を移動したり切り替えたりするときにユーザが自分の場所を失うことはありません。
+
+Ionicアプリは、このモバイルナビゲーションのアプローチを採用しており、Web開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。
+
+Angularと`@ionic/angular`で構築するアプリは、<a href="https://angular.jp/guide/router" target="_blank">Angular Router</a>を使用することをお勧めします。これはAngularとIonic 4の組み合わせから使うことができます。
+
+## Nativeアクセス
+
+Webテクノロジで構築されたアプリ（Ionicアプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionicアプリ用のベースとなるコードは、Web標準とこれらのプラットフォーム間で共有される共通のAPIに基づいているため、多くのプラットフォームで機能します。
+
+Ionicの最も一般的な使用例の1つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOSとAndroidの両方のソフトウェア開発キット（SDK）は、完全なネイティブSDKアクセスを可能にしながら、あらゆるIonicアプリをレンダリングする [Web Views](webview.md) を提供します。
+
+<a href="https://capacitorjs.com/" target="_blank">Capacitor</a> や <a href="https://cordova.apache.org/" target="_blank">Cordova</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
+
+## テーマ
+
+基本的に、Ionic Frameworkは<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>を使用して構築されているので、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSSプロパティ (variables)</a>の柔軟性を利用することができます。これにより、Web標準に準拠しながら見栄えのするアプリを設計することがとても簡単になります。デフォルトでもすばらしいものがつくれるように、私たちはテーマカラーのデフォルトセットを提供しますが、ブランド、会社、または希望のカラーパレットに合うデザインにするためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマに関する詳細は[Theming](../theming/basics.md)をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
new file mode 100644
index 00000000000..9a1344cc5af
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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 Viewは、ネイティブデバイス上のWebアプリを強化します。
+
+[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web Viewは自動的に提供されます。
+
+[Cordova](../reference/glossary.md#cordova)については、Ionicが<a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View のプラグイン</a>を管理しています。このプラグインは、Ionic CLIを使用する際にデフォルトで提供されます。
+
+## Web Viewとは
+
+Ionicアプリは[Web技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Webブラウザのすべての機能が使えるWeb Viewを使ってレンダリングされます。
+
+最近のWeb Viewは、カメラ、センサー、GPS、スピーカー、Bluetoothなどのハードウェア機能のための組み込み<a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a>を多数提供していますが、プラットフォーム固有のハードウェアAPIにアクセスする必要がある場合もあります。Ionicアプリでは、通常はJavaScript APIを利用してネイティブプラグインにアクセスしてブリッジする形でハードウェアAPIを利用することができます。
+
+![webview architecture](/img/building/webview-architecture.png)
+
+Ionic Web Viewプラグインは、最新のJavaScriptアプリケーションに特化しています。iOSとAndroidの両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化されたHTTPサーバーにホストされます。
+
+### 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プロトコル
+
+CordovaとCapacitorのアプリはローカルのHTTPサーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルのHTTPサーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
+
+Capacitorアプリの場合、URIはこのように変換します。
+
+```javascript
+import { Capacitor } from '@capacitor/core';
+
+Capacitor.convertFileSrc(filePath);
+```
+
+Cordovaアプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　がFile URIを変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応するIonic Nativeプラグインもあります。また、対応するIonic Nativeプラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。
+
+### 実装
+
+- **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/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
new file mode 100644
index 00000000000..2517935b7b1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
@@ -0,0 +1,68 @@
+---
+sidebar_label: PWAとは?
+title: Progressive Web Apps
+---
+
+<head>
+  <title>Progressive Web Applications: 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...それよりもいいもの
+
+Progressive Web App (PWA) は、最新の Web 機能を使用して、ユーザーにアプリのようなエクスペリエンスを提供する Web アプリです。
+これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URLからアクセスでき、検索エンジンにインデックスされます。
+
+[Capacitor](https://capacitorjs.com)と連携して、すべてのユーザーに複数のデプロイ対象を提供することができます。
+アプリをPWAとしてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。
+
+Ionicでは、アプリストアへのリリースだけでなく、PWAとしてモバイルWebにデプロイすることも可能です。
+
+### 要求されるもの
+
+Progressive Web App と見なされるには、アプリが以下の要件を満たしている必要があります。
+
+- プログレッシブ - ブラウザの種類に関係なく、すべてのユーザーに対して機能します。これは、プログレッシブ・エンハンスメントを中核として構築されているためです。
+
+- レスポンシブ - デスクトップ、モバイル、タブレットなど、あらゆるフォームファクターに対応。
+
+- 接続に依存しない - オフラインや低品質のネットワークでも動作するように、サービスワーカーが強化されています。
+
+- アプリライク - アプリシェルモデルを使用し、アプリスタイルのナビゲーションとインタラクションを提供します。
+
+- フレッシュ - サービスワーカーの更新プロセスにより、常に最新の情報を提供します。
+
+- 安全 - HTTPS経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。
+
+- 発見性 - W3C マニフェストとサービスワーカー登録により、「アプリケーション」として識別可能であり、検索エンジンに見つけてもらうことができます。
+
+- 再エンゲージメント - プッシュ通知などの機能により、再エンゲージメントを容易にします。
+
+- インストール可能 - アプリストアのような煩わしさがなく、ユーザーが最も便利だと思うアプリをホーム画面に置いておくことができます。
+
+- リンク可能 - 複雑なインストールを必要とせず、URLで簡単に共有できます。
+
+<em>
+  <a href="https://addyosmani.com/blog/getting-started-with-progressive-web-apps/" target="_blank">
+    Addy Osmani: Progressive web apps
+  </a>
+</em>
+
+たくさんありますが、Ionicアプリの場合はいくつかのポイントに集約されます。
+
+#### オフライン対応
+
+アプリはオフラインで動作する必要があります。適切な「オフライン」メッセージの表示や、表示用にアプリデータをキャッシュすることなどです。
+
+#### <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank">Web App Manifest</a>
+
+App Manifestファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。
+
+#### <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>
+
+Service Workerについては、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
new file mode 100644
index 00000000000..ec8b0266c20
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
@@ -0,0 +1,74 @@
+---
+title: iOS App Storeへの開発
+sidebar_label: iOS App Store
+---
+
+<head>
+  <title>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>
+
+## 要件
+
+iOS App Storeにアプリを提出するには、いくつかのことが必要です。
+
+- Xcode
+- 有料のApple Developersアカウント
+- 有効なプロビジョニングプロファイル
+- アプリの開発および配布に関する証明書
+
+Apple Developer Programへの登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。
+
+## リリースビルドの作成
+
+iOSプラットフォームがまだ追加されていない場合は、必ず追加してください。
+
+```shell
+ionic cordova platform add ios
+```
+
+プラットフォームが追加されたら、ビルドコマンドを `--prod` フラグを付けて実行します。
+
+```shell
+ionic cordova build ios --prod
+```
+
+これで、アプリの Web 部分の minified コードが生成され、iOS のコードベースにコピーされます。
+
+ここから、`.xcworkspace` ファイルを `./platforms/ios/` に開き、Xcode を起動します。
+
+## 署名証明書の生成
+
+iOS 用の証明書の生成は少し複雑なので、証明書とは何か、どのように生成するかについては、[Apple の公式ドキュメント](https://help.apple.com/xcode/mac/current/#/dev3a05256b8) を必ず確認してください。
+
+必要な証明書とプロファイルを作成するには、[Appleのメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Appleのドキュメントに記載されているリンクをたどってください。
+
+ここで重要なのは、開発用と配布用の2種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。
+
+ディストリビューション証明書は、アプリをストアに配布するためのものです。アプリがディストリビューション証明書で署名されると、どのデバイスにもインストールできるようになります。
+
+## XCodeでのアプリへの署名
+
+正しい証明書を生成した後、Xcodeに自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しいDevelopmentとDistributionの証明書が使用されることを確認するためです。
+
+このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizerが開かれます。
+
+Xcode Organizerは、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、「Upload to App Store」をクリックします。
+チームを選択する場所と、アプリの詳細情報、そして「Upload」ボタンがあるはずなので、それをクリックします。
+
+アップロードに成功すると、アプリは [iTunes Connect](https://itunesconnect.apple.com) にリストされ、 "Activity" にリストされるはずです。
+ここから、TestFlightをベータテスト用に有効にしたり、アプリをAppleの承認用に送信したりすることができます。
+
+## アプリのアップデート
+
+アプリが成長するにつれ、新機能や修正を加えて更新する必要があります。
+アプリのアップデートは、Appleに新バージョンを提出するか、Appflowのような<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">live update機能</a>を使用することで可能です。
+
+<strong>Live Updates</strong>を使うと, アプリの変更は、App Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。
+
+:::note
+iOS App Store が更新されたビルドを受け入れるには、config.xml ファイルを編集してバージョン値を増やし、上記の手順でアプリをリリース用に再構築する必要があります。
+:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
new file mode 100644
index 00000000000..4ca4a877a7a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
@@ -0,0 +1,48 @@
+---
+title: デスクトップアプリへのデプロイ
+sidebar_label: Electronデスクトップアプリ
+---
+
+<head>
+  <title>Windowsと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>
+
+Ionicでデスクトップアプリケーションを構築すると、開発者はコードを100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electronに精通していることを前提としており、Electronアプリの「作り方」については触れません。 詳しくは <a href="https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app" target="_blank">Electron guide</a>. をご覧ください。
+
+## macOSアプリ
+
+### 要件
+
+macOSアプリをストアでアプリを公開するには、難しい要件が2つあります。
+
+* [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること
+* 開発者アカウント ($100 through Apple's developer portal) が有効であること
+
+### リリース
+
+Electronチームは、macOS用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。
+
+## Windowsアプリ
+
+### 要件
+
+Windowsアプリをストアでアプリを公開するには、2つの厳しい要件があります。
+
+- 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` は npm を使ってインストールすることができます:
+
+```shell
+npm install -g electron-windows-store
+```
+
+### リリース作業
+
+macOSと同様、ElectronはWindows用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
new file mode 100644
index 00000000000..e3202c3ae60
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
@@ -0,0 +1,79 @@
+---
+title: Android Play Storeへの開発
+sidebar_label: Android Play Store
+---
+
+<head>
+  <title>Android Play Storeでのリリース: 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>
+
+## アプリのリリースビルド作成
+
+Android用のリリースビルドを生成するには、以下のcliコマンドを実行します。
+
+```shell
+$ ionic cordova build android --prod --release
+```
+
+これは、アプリの `platforms/android/app/build/outputs/apk` ディレクトリにある `config.xml` の設定に基づき、リリースビルドを生成するものです。
+Ionicアプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。
+
+## APKへの署名
+
+まず、署名されていない APK に署名する必要があります。署名鍵がすでに生成されている場合は、この手順をスキップして、代わりにその鍵を使用します。
+Android SDKに付属するkeytoolコマンドを使用して、秘密鍵を生成します。
+
+```shell
+$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
+```
+
+このコマンドを実行し、プロンプトに答えると、カレントディレクトリに `my-release-key.keystore` という名前のファイルが作成されます。
+
+:::caution
+このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Playストアはこのアプリのアップデートを受け付けません!
+:::
+
+署名されていないAPKに署名するには、Android SDKに含まれるjarsignerツールを実行します。
+
+```shell
+$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
+```
+
+最後に、APKを最適化するために、zipalignツールを実行する必要があります。
+`zipalign` ツールは `/path/to/Android/sdk/build-tools/VERSION/zipalign` にあります。
+例えば、Android StudioがインストールされているmacOSでは、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。
+
+```shell
+$ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
+```
+
+これにより、Google Playストアに受け入れられるHelloWorld.apkという最終リリースバイナリが生成されます。
+
+## Google Play Storeにアプリを送信する
+
+リリース用APKが生成されたので、Playストアのリスティングを書き、APKをアップロードすることができるようになりました。
+
+まずは、[Google Play Store Developer Console](https://play.google.com/apps/publish)にアクセスし、開発者アカウントを新規に作成します。
+
+:::note
+Google Playで開発者アカウントを作るには、25USドルが必要です。
+:::
+
+開発者アカウントを作成したら、「アプリケーションを作成する」ボタン(Create an Application)をクリックします。
+
+![Create an App button](/img/publishing/newAppGPlay.png)
+
+アプリの説明、スクリーンショット、その他の情報を入力してください。
+準備ができたら、生成された署名付きリリースAPKをアップロードし、アプリを公開します。
+
+## アプリのアップデート
+
+アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Storeに新バージョンを提出するか、AppflowのLive Update機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Playストアに変更を送信することなく、Appflowのダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Updateについてもっと知るためには<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">こちら</a>にアクセスください。
+
+:::note
+Google PlayストアでアップデートされたAPKを受け入れるには、config.xmlファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。
+:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.mdx b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.mdx
new file mode 100644
index 00000000000..4a68ada3389
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
new file mode 100644
index 00000000000..1caee78f3bf
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
@@ -0,0 +1,25 @@
+---
+title: Progressive Web Appへの開発
+sidebar_label: Progressive Web App (PWA)
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>Progressive Web Applicationへのデプロイ</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>
+
+Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWAとは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。
+
+Ionicが対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、Angularと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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
new file mode 100644
index 00000000000..00b4b8b77d6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
@@ -0,0 +1,59 @@
+# Books
+
+### [Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉](https://amzn.to/2Ygk5bA)
+
+WEBサイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTMLでモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。
+
+by [rdlabo](https://twitter.com/rdlabo)
+
+### [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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/courses.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/courses.md
new file mode 100644
index 00000000000..46038f4ffb1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides.md
new file mode 100644
index 00000000000..dbe6d9477b8
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/intro.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/intro.md
new file mode 100644
index 00000000000..844aef86a7e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
new file mode 100644
index 00000000000..ff861040e51
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
new file mode 100644
index 00000000000..b33fb66ea8a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/theming.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/theming.md
new file mode 100644
index 00000000000..19ef3364069
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
new file mode 100644
index 00000000000..c4fac8c2871
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/intro.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/intro.md
new file mode 100644
index 00000000000..bffc7ea9c28
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
new file mode 100644
index 00000000000..81d33c7f1c6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
@@ -0,0 +1,154 @@
+# Android, iOS, and the Camera - Oh My!
+
+以前は、Ionic アプリを立ち上げて、ウェブブラウザでローカルに実行していました。さて、自分の iOS または Android デバイスにインストールして、フォトギャラリー機能の構築を始めましょう。
+
+## Cordova の iOS および Android プラットフォームを追加
+
+Ionic はオープンソースの [Cordova プロジェクト](https://cordova.apache.org/docs/ja/latest/guide/overview/)を活用して、ネイティブなハードウェアサポートを提供しています。まず iOS と Android の _プラットフォーム_ を追加し、その後 Camera のような特定の _プラグイン_ を追加します。
+
+```shell
+$ ionic cordova platform add ios
+$ ionic cordova platform add android
+```
+
+これらのコマンドは `config.xml` ファイルを作成します。これは Cordova iOS と Android の設定を定義するために使われます。Cordova はこのファイルを読み込み、各ネイティブアプリのバイナリをビルドする際に各設定を適用します。
+
+There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
+
+とてもいいよ！これで、カメラ機能を追加できます。ちなみに、このリファレンスコードは [GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4) にあります。
+
+`tab2.page.html` に戻り、以下を追加します:
+
+```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>
+```
+
+ファイルを保存して監視 - カメラボタンが表示されます！これをタップすると、何も実行されないことに気付きます。次に、これを修正します。
+
+## CLI を介してカメラの依存関係を追加
+
+Camera を使用するためには、その JavaScript とネイティブライブラリの依存関係を取り込む必要があります。ターミナルウィンドウに戻り、次のコマンドを実行して JavaScript ライブラリをプロジェクトに追加し、TypeScript コードに Camera API を公開します:
+
+```shell
+npm install @awesome-cordova-plugins/camera
+```
+
+`package.json` 内に、次のようなバージョン番号の新しい JavaScript 依存関係が追加されていることがわかります。
+
+`"@awesome-cordova-plugins/camera": "^5.4.0"`
+
+次に、このコマンドを実行して iOS と Android のネイティブコードを追加し、実際にカメラをモバイルデバイスで動作させます。こちらのより詳細な情報は、[Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) と [Ionic Native](https://cordova.apache.org/docs/en/latest/guide/overview/) を御覧ください。
+
+```shell
+ionic cordova plugin add cordova-plugin-camera
+```
+
+`config.xml` ファイルが更新され、ネイティブカメラコードに次のようなエントリが追加されます。
+
+```xml
+<plugin name="cordova-plugin-camera" spec="^4.0.3" />
+```
+
+次のステップは iOS ユーザーのみ必要です。iOS10では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section (<platform name="ios"></platform>) の `config.xml` の最後に追加します:
+
+```xml
+<!-- iOS 10 で必須: Camera 許可プロンプト -->
+<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
+    <string>Used to take pictures</string>
+</edit-config>
+```
+
+## Angular アプリの Module に Camera プラグインを追加
+
+これは Angular プロジェクトなので、もうひとつやるべきことがあります: App Module(`src/app/app.module.ts`) に Camera を登録します。まず、カメラモジュールをインポートします:
+
+```Javascript
+import { Camera } from '@awesome-cordova-plugins/camera/ngx';
+```
+
+では、これを Provider として追加します:
+
+```Javascript
+providers: [
+    StatusBar,
+    SplashScreen,
+    Camera,
+    {provide: ErrorHandler, useClass: IonicErrorHandler}
+  ],
+```
+
+これでアプリ内のどのページでも利用できます。
+
+## ギャラリーページへの Camera の追加
+
+カメラボタンはまだ何もしていません。`tab2.page.html` では、ボタンにクリックハンドラを追加します:
+
+```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>
+```
+
+次に、イメージプレースホルダーを更新します。次の例では、"currentImage" 変数(次に取り組んでいきます)がイメージにバインドされ、ユーザに表示されます。
+
+```html
+<img [src]="currentImage" *ngIf="currentImage" />
+```
+
+次に、`tab2.page.ts` を開き、Camera ライブラリをインポートします:
+
+```Javascript
+import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';
+```
+
+次に、"currentImage” 変数を定義し、コンストラクタを使用して Camera をこのクラスに挿入します:
+
+```Javascript
+export class Tab2Page {
+  currentImage: any;
+
+  constructor(private camera: Camera) { }
+}
+```
+
+最後に、 `tab2.page.ts` の "takePicture" メソッドを追加します。カメラボタンをタップした後に実行するように既に設定されています。
+
+```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);
+    });
+  }
+}
+```
+
+注意: iOS や Android には言及されていません！これはプラグインの素晴らしい能力です: ある API(この場合は `camera.getPicture()`)を使い、プラグインがプラットフォームの違いを処理してくれます。一度書けば、どこでも実行できます。😀
+
+このファイルを保存し、DevApp の Camera ボタンをタップします。ほら見て！デバイスでカメラが起動します。撮影した写真は、フォトギャラリーページに表示されます。
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
new file mode 100644
index 00000000000..199a870ae31
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
@@ -0,0 +1,56 @@
+# 自分らしさを！Ionic テーマ
+
+今までは、単なるカメラアプリを壮大なフォトギャラリーに発展してきました。では、Ionic のテーマ設定でフォトギャラリーを独自のものにする方法を見てみましょう。このアプリのビジュアルデザインは非常に重要で、幸運なことに、Ionic はすぐに使える多くの柔軟なテーマを提供してくれます。
+
+Ionic には CSS 変数として定義された9つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます:
+
+![v4-theming-defaults](/img/guides/first-app-v4/theming-defaults.png)
+
+base、contrast、shade、tint プロパティを指定することによって、各カラーをさらにカスタマイズできます。これらにより、スタイルを柔軟にコントロールできます:
+
+![v4-theming-properties](/img/guides/first-app-v4/theming-properties.png)
+
+これらのカラーは `src/theme/variables.scss` 内に定義されていることがわかります。
+
+これらの変数をあちこちで変更することで、アプリケーション全体のテーマを簡単に更新することができます！いくつかの色を変更して、DevApp でアプリの更新を見てみましょう。例えば、Primary のデフォルトの青色を紫色に変更します:
+
+```css
+/** Ionic における CSS 変数 **/
+: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;
+}
+```
+
+アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の16進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。
+
+しかし待ってください、まだあります！Ionic は、アプリケーションが実行されているデバイスに基づいて、プラットフォーム固有のスタイルを自動的に提供し、ユーザーが慣れているネイティブなルック・アンド・フィールを与えます:
+
+![ios and android comparison](/img/guides/first-app-v3/ion-lab-comparison.png)
+
+私たちのアプリでは、これはヘッダーとアイコンがどのようにスタイルされているかで、はっきりと見えます。
+
+もし一貫性が必要な場合は、プラットフォームに関係なく同じモードを使用するように Ionic に指示できます。例えば、マテリアルデザイン(Android プラットフォームのスタイル)を適用するには、App Module クラスでグローバルに設定します。`src/app/app.module.ts` を開き、そして `mode` プロパティを設定します:
+
+```Javascript
+imports: [
+    BrowserModule,
+    IonicModule.forRoot({
+      mode: "md"
+    }),
+    IonicStorageModule.forRoot()
+  ],
+```
+
+これで、iOS 版のアプリにマテリアルデザインのスキンが追加されました！
+
+![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png)
+
+CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的なIonic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。
+
+素晴らしいアプリ作りに旅立ちましょう！
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/posts.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/posts.md
new file mode 100644
index 00000000000..a8c5b3f861c
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
new file mode 100644
index 00000000000..bd81b630b44
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
@@ -0,0 +1,21 @@
+# Tools
+
+### [Angular CLI](https://github.com/angular/angular-cli)
+
+Angular CLIの機能の詳細
+
+### [StackBlitz](https://stackblitz.com/)
+
+ブラウザで0から新しいIonicアプリを始めましょう！
+
+### [TypeScript](https://www.typescriptlang.org/)
+
+TypeScriptでの作業を素晴らしいものにする機能を調べてください。
+
+### [Glossary](../reference/glossary.md)
+
+Ionicで開発中に利用される一般的な用語の一覧。
+
+### [Starter Apps](https://ionicthemes.com)
+
+Ionic Starter Apps to speed up and improve your app development.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
new file mode 100644
index 00000000000..8a51e148ad3
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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)
+
+Ionic2の簡単な紹介と最初のアプリの作り方です。
+
+### [Ionic &amp; Async](https://blog.ionicframework.com/screencast-ionic-async/)
+
+複数のイベントをしかるべきタイミングで調整する方法を説明します。
+
+### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/)
+
+Ionic2アプリを構築する方法を学びましょう。
+
+### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY)
+
+Ionic2の裏にあるアイデアと目標を掘り下げてみましょう。
+
+### [Ionic &amp; Typings](https://blog.ionicframework.com/ionic-and-typings/)
+
+Ionic2アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
new file mode 100644
index 00000000000..8874bb90f0e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
@@ -0,0 +1,222 @@
+---
+title: Androidでの開発
+sidebar_label: Androidでの開発
+---
+
+<head>
+  <title>Androidアプリ開発ガイド: 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>
+
+このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Androidエミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。AndroidアプリはWindows、macOS、Linux上で開発できます。
+
+## Android Studio
+
+[Android Studio](https://developer.android.com/studio/) はネイティブなAndroidアプリを作るためのIDEです。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。
+
+Androidエミュレータに必要な [Android仮想デバイス](android.md#creating-an-android-virtual-device) の作成にもAndroid Studioが使用されます。Ionicアプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。
+
+:::note
+Android Studioを使ってIonicアプリを開発することはお勧めしません。実際には、ネイティブのAndroidプラットフォーム向けにアプリをビルドして実行したり、Android SDKや仮想デバイスを管理するためだけに使うべきです。
+:::
+
+### Android Studioのインストール
+
+<a href="https://developer.android.com/studio/" target="_blank">Android website</a> からAndroid Studioをダウンロードします。より詳しいインストール手順は <a href="https://developer.android.com/studio/install" target="_blank">User Guide</a> をご覧ください。
+
+### Android SDKのインストール
+
+Android Studioをインストールしたら起動します。IDEは、Android SDKのインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDKのインストールを完了して、**Android SDKのパス**のをメモしておいてください。
+
+![Android Studio SDK Setup](/img/installation/android-studio-sdk-setup.png)
+
+デフォルトでは、最新の安定版SDKプラットフォームがインストールされ、そのバージョンのAndroidをターゲットにするために必要なパッケージもコレクションされています。
+
+システムイメージやその他のマイナーSDKプラットフォームパッケージをインストールするには、SDK Managerの下部にある **Show Package Details** がオンになっていることを確認する必要があります。
+![Android Studio SDK Manager](/img/installation/android-studio-sdk.png)
+
+今後の参考情報ですが、Android SDKはAndroid Studioの起動画面の **Configure** &raquo; **SDK Manager** メニュー、またはAndroidプロジェクト内の **Tools** &raquo; **SDK Manager** で管理することができます。
+
+### コマンドラインツールの設定
+
+Android SDKには<a href="https://developer.android.com/studio/command-line/" target="_blank">便利なコマンドラインツール</a>が付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOSとLinuxのものです。WIndowsの場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。
+
+`~/.bashrc`もしくは`~/.bash_profile`、または同様のシェル起動スクリプトを、次のように変更します。s:
+
+1. `ANDROID_SDK_ROOT`環境変数を設定します。このパスは、前のセクションでメモした**Android SDKのパス**です。
+
+   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`.
+   :::
+
+### Android仮想デバイスの作成
+
+Android仮想デバイス（AVD）は、AndroidエミュレータがAndroid OSを実行するために利用する設計図です。以下のドキュメントはAndroidエミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、<a href="https://developer.android.com/studio/run/managing-avds" target="_blank">Android のドキュメント</a>を参照ください。
+
+AVDはAVD Managerで管理します。Android Studioの初期画面で、 **Configure** &raquo; **AVD Manager** をクリックします。AVD Managerは、Androidプロジェクト内で、-**Tools** &raquo; **AVD Manager** メニューから開くこともできます。
+
+![AVD Setup](/img/installation/android-studio-avd-setup.png)
+
+**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play servicesを選択してください。Androidのバージョンについては、Androidのバージョン履歴を参照してください。
+
+AVDが作成されたら、AndroidエミュレータでAVDを起動します。エミュレータを実行し続けることは、Android用のIonicアプリケーションを開発しながら検出を確実にするための最良の方法です。
+
+<figure className="device">
+  <img alt="Android Emulator Booting" src="/docs/img/installation/android-emulator-booting.png" />
+</figure>
+
+### Androidデバイスを設定する
+
+Androidハードウェアの実物は、Ionicアプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用にAndroidデバイスを設定する簡単な方法です。詳細な手順と情報については、<a href="https://developer.android.com/studio/run/device" target="_blank">the Android documentation</a>を参照してください。
+
+1. デバイスのUSBデバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順については<a href="https://developer.android.com/studio/debug/dev-options" target="_blank">the Android documentation</a>をご確認ください。
+1. デバイスにコンピュータへの接続許可があることを確認してください。macOSの場合、追加の設定は不要です。Windowsの場合は<a href="https://developer.android.com/studio/run/oem-usb" target="_blank">OEM USB drivers</a>をインストールしてください。
+
+USBケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
+
+```shell
+adb devices
+```
+
+デバイスがリストされます。トラブルシューティングと詳細情報については、 <a href="https://developer.android.com/studio/command-line/adb" target="_blank">`adb` documentation</a> を参照してください。
+
+## Cordova Setup
+
+Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。
+
+### Java
+
+ネイティブのAndroidアプリは <a href="https://java.com/en/" target="_blank">Java</a> プログラミング言語でコンパイルされている。ダウンロードページからJDK 8を<a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">download page</a>します。
+
+:::note
+残念ながら、Cordovaは最新バージョンのJavaと互換性がありません。
+:::
+
+### Gradle
+
+<a href="https://gradle.org/" target="_blank">
+  Gradle
+</a> はAndroidアプリで使用されるビルドツールで、別途インストールする必要があります。詳細については、 <a
+  href="https://gradle.org/install/"
+  target="_blank"
+>
+  install page
+</a> を参照してください。
+
+## プロジェクトのセットアップ
+
+アプリをAndroidシミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
+
+1. **ネイティブプロジェクトが存在しない場合は、生成します。**
+
+   Capacitorでは以下の実行をサポートしています:
+
+   ```shell
+   $ ionic capacitor add android
+   ```
+
+   Cordovaでは以下のように実行します。
+
+   ```shell
+   $ ionic cordova prepare android
+   ```
+
+2. **[Package ID](../reference/glossary.md#package-id) を設定します。**
+
+Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId` プロパティを修正します。
+
+Cordovaの場合は、`config.xml`ファイルを開き、ルート要素である `<widget>` の `id` 属性を変更します。詳しくは、[Cordovaのドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。
+
+## Capacitorでの実行
+
+CapacitorはAndroid Studioを使って、シミュレータやデバイスへのアプリの構築と実行を行います。
+
+1. **Ionicアプリを開発してネイティブプロジェクトに同期します**
+
+  重要な変更が行われるたびに、変更がAndroidシミュレータやデバイスに表示されるようにするには、WebアセットにIonicアプリを組み込む必要があります。次に、Webアセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスはIonic CLIコマンド1つで簡単になります。
+
+   ```shell
+   $ ionic capacitor copy android
+   ```
+
+2. **Android StudioでRunボタンをクリックして、シュミレーターかデバイスを選択ください。**
+
+![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png)
+
+### ライブリロード
+
+リロードサーバを起動するには、次のコマンドを実行します。
+
+```shell
+ionic capacitor run android -l --external
+```
+
+デバイス上で実行する場合は、デバイスと開発マシンが同じネットワークに接続されていることを確認してください。
+
+## Cordova で実行する
+
+Ionic CLI は、コマンドひとつで Ionic アプリをビルド、コピー、Android シミュレーターやデバイスにデプロイすることができます。また、`ionic serve`で使用されているような開発サーバーをスピンアップして、[live-reload](../reference/glossary.md#livereload) 機能を提供することが可能です。
+
+次のコマンドを実行すると、live-reload サーバを起動する CLI プロセスが長時間実行されます。
+
+```shell
+ionic cordova run android -l
+```
+
+これで、アプリのソースファイルに変更があった場合、Web アセットが再構築され、再度デプロイしなくてもシミュレータやデバイスに変更が反映されるようになりました。
+
+## Androidアプリのデバッグ
+
+アプリがAndroidデバイスやエミュレータ上で動作するようになったら、 Chrome DevToolsを使ってデバッグすることができます。
+
+### Chrome DevToolsの利用
+
+Chromeは、AndroidシミュレータとデバイスのためのWeb開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間にChromeで `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。
+
+:::note
+アプリケーションがデバイスまたはシミュレータで実行されていることを確認してください。実行されていない場合は、リストに表示されません。
+:::
+
+![Android Chrome DevTools](/img/running/android-chrome-devtools.png)
+
+### Native Logsの表示
+
+Android Studioで実行している場合、ネイティブログは **Logcat** に表示されます。
+
+:::note
+**Logcat** ウインドウが非表示の場合は、 **View** &raquo; **Tool Windows** &raquo; **Logcat** から有効にします。
+:::
+
+![Android Studio Logcat](/img/running/android-studio-logcat.png)
+
+**Logcat** には [ADB](https://developer.android.com/studio/command-line/adb) を利用してアクセスすることもできます。
+
+```shell
+adb logcat
+```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
new file mode 100644
index 00000000000..10ad73cec8d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
@@ -0,0 +1,147 @@
+---
+title: 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
+
+The available config keys can be found in the [`IonicConfig`](#ionicconfig) interface.
+
+The following example disables ripple effects and default the mode to Material Design:
+
+import GlobalExample from '@site/docs/developing/config/global/index.md';
+
+<GlobalExample />
+
+## 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.
+
+import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
+
+<PerComponentExample />
+  
+
+## 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.
+
+import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
+
+<PerPlatformExample />
+
+
+### Fallbacks
+
+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:
+
+import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
+
+<PerPlatformFallbackExample />
+
+### Overrides
+
+This final example allows you to accumulate a config object based upon different platform requirements.
+
+import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
+
+<PerPlatformOverridesExample />
+
+## Reading the Config (Angular)
+
+Ionic Angular provides a `Config` provider for accessing the Ionic Config.
+
+### 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`                             |
+
+## 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.                                        |
+| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. |
+| `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.                     |
+| `toastDuration`          | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                         |
+| `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".               |
+| `toggleOnOffLabels`      | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
new file mode 100644
index 00000000000..bbfbaa83a71
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
@@ -0,0 +1,67 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="global-config"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="javascript">
+
+```javascript title="example.js"
+window.Ionic = {
+  config: {
+    rippleEffect: false,
+    mode: 'md'
+  }
+}
+```
+</TabItem>
+<TabItem value="angular">
+
+```tsx title="app.module.ts"
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      rippleEffect: false,
+      mode: 'md'
+    })
+  ],
+  ...
+})
+```
+</TabItem>
+<TabItem value="react">
+
+The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
+```tsx title="App.tsx"
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+```tsx title="main.ts"
+
+import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+ 
+createApp(App).use(IonicVue, {
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
new file mode 100644
index 00000000000..64b868a70ee
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
@@ -0,0 +1,143 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-component-config"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="javascript">
+
+**Not recommended**
+
+```ts
+window.Ionic = {
+  config: {
+    // Not recommended when your app requires reactive values
+    backButtonText: 'Go Back'
+  }
+}
+```
+
+**Recommended**
+
+```html
+<ion-back-button></ion-back-button>
+
+<script>
+  const backButton = document.querySelector('ion-back-button');
+  
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  backButton.text = 'Go Back';
+</script>
+```
+</TabItem>
+<TabItem value="angular">
+
+**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 {
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  backButtonText = 'Go Back';
+}
+```
+</TabItem>
+<TabItem value="react">
+
+**Not recommended**
+
+```tsx
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  // Not recommended when your app requires reactive values
+  backButtonText: 'Go Back'
+});
+```
+
+**Recommended**
+
+```tsx
+import { useState } from 'react';
+import { IonBackButton } from '@ionic/react';
+
+const ExampleComponent = () => {
+  const [backButtonText, setBackButtonText] = useState('Go Back');
+  return (
+    {/*
+     * The back button text can be updated
+     * anytime the locale changes.
+     */}
+    <IonBackButton text={backButtonText}></IonBackButton>
+  )
+}
+```
+</TabItem>
+<TabItem value="vue">
+
+**Not recommended**
+
+```ts
+import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+ 
+ // Not recommended when your app requires reactive values
+createApp(App).use(IonicVue, {
+  backButtonText: 'Go Back'
+});
+```
+
+**Recommended**
+
+```html
+<template>
+  <ion-back-button [text]="backButtonText"></ion-back-button>
+</template>
+
+<script setup lang="ts">
+  import { IonBackButton } from '@ionic/vue';
+  import { ref } from 'vue';
+
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  const backButtonText = ref('Go Back');
+</script>
+```
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
new file mode 100644
index 00000000000..02a5f27a3c0
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
@@ -0,0 +1,79 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-fallback-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+```ts title="app.module.ts"
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+}
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot(getConfig())
+  ],
+  ...
+});
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+  
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+};
+
+setupIonicReact(getConfig());
+
+```
+</TabItem>
+<TabItem value="vue">
+
+```ts title="main.ts"
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+  
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+};
+
+createApp(App).use(IonicVue, getConfig());
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
new file mode 100644
index 00000000000..243cfa9c2fc
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
@@ -0,0 +1,88 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-fallback-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+```ts title="app.module.ts"
+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())
+  ],
+  ...
+});
+```
+</TabItem>
+<TabItem value="react">
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+const getConfig = () => {
+  let config = {
+    animated: false,
+  };
+
+  if (isPlatform('iphone')) {
+    config = {
+      ...config,
+      backButtonText: 'Previous',
+    };
+  }
+
+  return config;
+};
+
+setupIonicReact(getConfig());
+
+```
+</TabItem>
+<TabItem value="vue">
+
+```ts title="main.ts"
+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());
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
new file mode 100644
index 00000000000..7d17299d0f8
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
@@ -0,0 +1,63 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  groupId="per-platform-config"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+>
+<TabItem value="angular">
+
+:::note
+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.
+
+See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect.
+:::
+
+```ts title="app.module.ts"
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+@NgModule({
+  ...
+  imports: [
+    IonicModule.forRoot({
+      animated: !isPlatform('mobileweb')
+    })
+  ],
+  ...
+})
+```
+</TabItem>
+<TabItem value="react">
+
+:::note
+See the [React Platform Documentation](../react/platform) for the types of platforms you can detect.
+:::
+
+```tsx title="App.tsx"
+import { isPlatform, setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  animated: !isPlatform('mobileweb'),
+});
+```
+</TabItem>
+<TabItem value="vue">
+
+:::note
+See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect.
+:::
+
+```ts title="main.ts"
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+createApp(App).use(IonicVue, {
+  animated: !isPlatform('mobileweb'),
+});
+````
+</TabItem>
+</Tabs>
\ No newline at end of file
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
new file mode 100644
index 00000000000..e9019a90855
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
@@ -0,0 +1,345 @@
+---
+title: ハードウェアの戻るボタン
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Androidデバイスでのハードウェアの戻るボタン</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>
+
+ハードウェアの戻るボタンは、ほとんどのAndroidデバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。
+
+:::note
+ハードウェアの 「戻る」 ボタンとはAndroidデバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Androidデバイスにのみ適用されます。
+:::
+
+## Capacitorと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.
+
+`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに1つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に1つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。
+
+複数のハンドラを起動したい場合があります。各ハンドラのコールバックは、フレームワークに次のハンドラを呼び出すように指示するために使用できるパラメーターとして関数を渡します。
+
+## ブラウザにおける戻るボタン
+
+モバイルブラウザーやPWAでアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、CapacitorとCordovaが、通常のWebブラウザでは公開されないデバイスAPIを利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。
+
+ハードウェアバックボタンを完全にサポートするには、CapacitorまたはCordovaの使用をお勧めします。
+
+:::note
+ブラウザやPWAで実行してる時、 `ionBackButton` イベントは実行されません。
+:::
+
+## 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>
+````
+
+この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を10に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が10未満のハンドラは呼び出されません。優先度が10より大きいハンドラが最初に呼び出されます。
+
+同じ優先順位値を持つハンドラが存在する場合は、最後に登録されたハンドラが呼び出されます。詳細は、 [Handlers with the Same Priorities](#handlers-with-the-same-priorities) を参照してください。
+
+## 複数ハンドラの呼び出し
+
+各ハードウェアバックボタンコールバックには、 `processNextHandler` パラメータがあります。この関数を呼び出すと、ハードウェアバックボタンハンドラの呼び出しを続行できます。
+
+````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>
+````
+
+この例は、次のハンドラを起動するようにIonic Frameworkに指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。
+
+## 同じ優先順位のハンドラ
+
+内部的には、Ionic Frameworkはハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handlerが、最初に呼び出されるハンドラになります。
+
+```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();
+  });
+});
+```
+
+上の例では、ハンドラAとBの両方の優先度は10です。ハンドラBは最後に登録されているため、Ionic FrameworkはハンドラAを呼び出す前にハンドラBを呼び出します。
+
+## アプリの終了
+
+場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordovaが提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。
+
+````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>
+````
+
+この例は、ユーザがハードウェアの戻るボタンを押したときにアプリケーションが終了し、ナビゲーションスタックに何も残っていないことを示しています。アプリを終了する前に確認ダイアログを表示することも可能です。
+
+アプリケーションを終了する前に、ユーザーがルート・ページにあるかどうかを確認することをお勧めします。開発者は、Ionic Angularの `IonRouterOutlet` で`canGoBack` 、 Ionic ReactおよびIonic Vueの `IonRouter` で `canGoBack` メソッドを使用できます。
+
+## 内部フレームワークハンドラ
+
+次の表は、Ionic Frameworkが使用するすべての内部ハードウェアバックボタンイベントハンドラの一覧です。 `Propagates` 列は、その特定のハンドラがIonic Frameworkに次の戻るボタンハンドラを呼び出すように指示するかどうかを示します。
+
+| Handler    | Priority | Propagates | Description                                                                                                                              |
+| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
+| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                                   |
+| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                                    |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
new file mode 100644
index 00000000000..0980197d07b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
@@ -0,0 +1,184 @@
+---
+title: iOSでの開発
+sidebar_label: iOSでの開発
+skipIntros: true
+---
+
+<head>
+  <title>iOSアプリ開発ガイド: 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>
+
+このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOSシミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。iOSアプリは、XcodeがインストールされているmacOS上でのみ開発できます。
+
+iOS上でIonicアプリを実行するためのワークフローは2つあります:
+
+* [Xcodeで実行](#running-with-xcode)
+* [Ionic CLIでの実行](#running-with-the-ionic-cli)
+
+Xcodeアプローチの方が一般的に安定していますが、Ionic CLIを使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。
+
+## Xcodeのセットアップ
+
+[Xcode](https://developer.apple.com/xcode/) はネイティブなiOSアプリを作るためのIDEです。これにはiOS SDKとXcodeコマンドラインツールが含まれている。XcodeはAppleアカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Storeからインストールすることもできます。
+
+Xcodeをインストールしたら、使用するコマンドラインツールが選択されていることを確認します:
+
+```shell
+xcode-select --install
+```
+
+### Development Teamの設定
+
+すべてのiOSアプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcodeは自動コード署名によってこれを簡単にしてくれます。唯一の前提条件はApple IDです。
+
+Xcodeを開き、 **Xcode** &raquo; **Preferences** &raquo; **Accounts** に移動します。Apple IDが表示されない場合は、追加します。ログインすると、Personal TeamがApple IDのチームリストに表示されます。
+
+![Xcode Accounts](/img/installation/ios-xcode-accounts.png)
+
+### iOS Simulatorの作成
+
+iOSシミュレータは、Mac上のiOSデバイスをエミュレートする。次のドキュメントは、iOSシミュレータを簡単にセットアップする方法です。詳細については、 [Appleのドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。
+
+Xcodeを開き、**Window** &raquo; **Devices and Simulators** に移動します。iPhone 11シミュレータが存在しない場合は作成します。
+
+![iOS Simulators](/img/installation/ios-xcode-simulators-setup.png)
+
+## Cordova のセットアップ
+
+Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。
+
+### ios-sim & ios-deploy
+
+ [`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。
+
+```shell
+$ npm install -g ios-sim
+$ brew install ios-deploy
+```
+
+## プロジェクト設定
+
+アプリをiOSシミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。
+
+1. **ネイティブのプロジェクトが存在しない場合は、以下を実行します。**
+
+   Capacitorの場合は、以下を実行します。
+
+   ```shell
+   $ ionic capacitor add ios
+   ```
+
+   Cordovaの場合は、以下を実行します。
+
+   ```shell
+   $ ionic cordova prepare ios
+   ```
+
+   1. **[Package ID](/reference/glossary.md#package-id)を設定**
+
+       Capacitorの場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。
+
+       Cordovaの場合は、`config.xml`ファイルを開き、`id`を変更し`<widget>`でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。
+
+   1. **<b>Xcode</b>でプロジェクトを開きます**
+
+       Capacitorの場合は、次のコマンドを実行してXcodeでアプリを開きます。
+
+   ```shell
+   $ ionic capacitor open ios
+   ```
+
+    Cordovaの場合は、Xcodeを起動したあと、**File** &raquo; **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。
+
+1. **<b>Projectのナビゲーション</b>から、プロジェクトのrootにあるproject editorを開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。**
+
+   ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
+
+1. **同じproject editorの<b>Signing</b>で、セクションで、<b>Automatically manage signing</b>が有効になっていることを確認します。** 次に、Development Teamを選択してください。Development Teamを選択すると、Xcodeは自動的にプロビジョニングと署名を準備しようとします。
+
+   ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
+
+## Xcodeで実行する
+
+このワークフローでは、Xcodeは一般的なコンパイルと署名の問題を自動的に修正できます。
+
+1. **Ionicアプリを開発し、それをネイティブプロジェクトと同期させます。**
+
+    変更が検知がある度に、iOSシミュレータやデバイスが変更を検知するより前に、IonicアプリをWebアセットにビルドする必要があります。その後、Webアセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスはIonic CLIコマンドひとつで簡単にできます。
+
+    Capacitorの場合は、以下を実行します。
+
+   ```shell
+   $ ionic capacitor copy ios
+   $ ionic capacitor update
+   ```
+
+   Cordovaの場合は、以下を実行します。
+
+   ```shell
+   $ ionic cordova prepare ios
+   ```
+
+1. **Xcodeで、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。**
+
+   ![Xcode Play Button Area](/img/running/ios-xcode-play-button-area.png)
+
+## Ionic CLIを使用して実行する
+
+Ionic CLIは、コマンドひとつで、Ionicアプリを作成、コピーし、iOSシミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。
+
+ライブリロードを使うと、アプリのソースファイルに加えられた変更がウェブアセットの再構築を引き起こし、その変更は再デプロイすることなくシミュレータやデバイスに反映されます。
+
+:::caution
+iOSデバイスでは、デバイスとコンピュータが同じWi-Fiネットワーク上にある必要があります。デバイスが接続できるように、devサーバーの外部URLも必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。
+:::
+
+### Capacitorを使ったライブリロード
+
+CapacitorにはXcodeを利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLIで、ライブリロードサーバを起動し、Capacitorを設定して1つのコマンドで使用できます。
+
+以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcodeの再生ボタンをクリックします:
+
+```shell
+ionic capacitor run ios -l --external
+```
+
+### Cordovaを使ったライブリロード
+
+Cordovaはネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。
+
+ライブリロードサーバを起動し、アプリをビルドしてデプロイするには、以下を実行します:
+
+```shell
+ionic cordova run ios -l --external
+```
+
+## iOSアプリのデバッグ
+
+アプリがiOSデバイスやシミュレーター上で動くようになったら、Safariでデバッグできます。
+
+### Safari Web Inspectorを使う
+
+SafariはiOSシミュレータとデバイスのWeb Inspectorをサポートしています。Developメニューを開いてシミュレータまたはデバイスを選択し、Ionic Appを選択してWeb Inspectorを開きます。
+
+:::note
+*Develop** メニューが非表示になってる場合は、**Safari** &raquo; **Preferences** &raquo; **Advanced** &raquo; **Show Develop menu in menu bar** から有効にします。
+
+アプリがリストにない場合は、 **Settings** &raquo; **Safari** &raquo; **Advanced** &raquo; **Web Inspector** からデバイスのWeb Inspectorを有効にする必要があります。
+:::
+
+![Safari Web Inspector](/img/running/ios-safari-web-inspector-timelines.png)
+
+## ネイティブログの表示
+
+Xcodeで実行している場合、ネイティブログはXcodeの **Console** にあります。
+
+:::note
+**Console** が表示されない場合, **View** &raquo; **Debug Area** &raquo; **Activate Console**を有効化してください。
+:::
+
+![Xcode Console](/img/running/ios-xcode-console.png)
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
new file mode 100644
index 00000000000..3e5ea1a3c22
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
@@ -0,0 +1,273 @@
+---
+title: Keyboard
+---
+
+import Codepen from '@components/global/Codepen';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>キーボードガイド: 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>
+
+開発者がモバイルアプリやPWAを開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。
+
+## inputmode
+
+開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他のemail入力の最適化も行われます。
+
+`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。
+
+特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、emailの入力では、 `inputmode.` を指定するのではなく、`type="email"`
+を使用する必要があります。これは、入力されるデータが常にemailの形式になるためです。一方、inputがemailまたはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。
+
+使用可能な値のリストについては、<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
+`inputmode` 属性はChrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
+:::
+
+## enterkeyhint
+
+`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者はinputが `enterkeyhint="search"` であることを確認する必要があります。
+
+`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。
+
+使用可能な値のリストについては、 <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
+`enterkeyhint` 属性は Chrome 77+ and iOS Safari 13.4+ のデバイスでサポートされています
+:::
+
+## ダークモード
+
+デフォルトでは、キーボードテーマはOSによって決定されます。たとえば、iOSでダークモードが有効になっている場合、アプリケーションのCSSにダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。
+
+モバイルWebブラウザやPWAでアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。
+
+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>.
+
+## アクセサリバーを非表示にする
+
+ウェブベースのアプリケーションを実行すると、iOSはキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。
+
+モバイルWebブラウザやPWAでアプリを実行する場合、アクセサリバーを非表示にする方法はありません。
+
+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>.
+
+## キーボードのライフサイクルイベント
+
+スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。CapacitorとCordovaアプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントをListenします。モバイルブラウザやPWAで動作するアプリでは、サポートされていればVisual Viewport APIを使用することができる。Ionic Frameworkはこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。
+
+### 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
+モバイルWebブラウザやPWAで動作するアプリでは、 Keyboard Lifecycle EventsはChrome 62以降とiOS Safari 13.0以降でのみサポートされています。
+:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
new file mode 100644
index 00000000000..a2f494f10e1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
@@ -0,0 +1,82 @@
+---
+title: プレビュー
+---
+
+<head>
+  <title>プレビュー: WebブラウザでのIonicアプリローカル実行</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>
+
+ネイティブ機能のテストには、ターゲットとするプラットフォームやニーズに応じて、さまざまなオプションがあります。
+
+- Web ブラウザでローカルに実行する (ネイティブ機能については [Platform Detection](../core-concepts/cross-platform.md) を使用します)
+- [iOSへのデプロイ](ios.md)
+- [Androidへのデプロイ](android.md)
+
+## ウェブブラウザでローカルに実行する
+
+Ionic の最も強力な機能の1つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefoxの開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。
+
+これを行うには、プロジェクトのディレクトリで、コマンドラインから `ionic serve` を実行します。
+
+```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!
+```
+
+`ionic serve` を起動したまま、アプリの開発を続けます。変更を保存すると、その変更が適用された状態でアプリがリロードされます。
+
+ネイティブ機能を実装する場合は、[Platform Detection](../core-concepts/cross-platform.md) を使用します。
+実機でテストする場合は、[iOS](ios.md) と [Android](android.md) はこちらを参照してください。
+
+## モバイルビューポートのシミュレーション
+
+各主要ブラウザベンダーは、モバイルエミュレーションのための開発者向けツールを提供しています。これらのツールは、エミュレートするデバイスの種類を変更する機能を備えています。
+
+### Chrome
+
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linuxでは`Ctrl+Shift+I`、Macでは`Cmd+Opt+I`を押して、Chrome開発者ツールを開きます。
+
+<img src="/docs/img/developing/previewing/chrome-dev-tools.png" alt="Chrome Dev Tools" />
+
+ここから、ドロップダウンから異なるデバイスタイプを選択し、デバイスの方向を変更し、ネットワーク速度をスロットルすることができます。
+
+その他の機能および情報については、https://developer.chrome.com/docs/devtools/device-mode/ を参照してください。
+
+### Safari
+
+:::note
+
+前提条件：Safariの詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。
+
+:::
+
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safariの**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。
+
+<img src="/docs/img/developing/previewing/safari-responsive-design-mode.png" alt="Safari Responsive Design Mode" />
+
+ここから、エミュレートするデバイスの種類を選択したり、デバイスの向きを変更したりすることができます。
+
+その他の機能および情報については、https://developer.apple.com/safari/tools/ を参照してください。
+
+### Firefox
+
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/LinuxではCtrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefoxの開発者ツールを開きます。
+
+<img src="/docs/img/developing/previewing/firefox-responsive-design-mode.png" alt="Firefox Responsive Design Mode" />
+
+ここから、ドロップダウンから異なるデバイスタイプを選択し、デバイスの方向を変更し、ネットワーク速度をスロットルすることができます。
+
+その他の機能および情報については、https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/ を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
new file mode 100644
index 00000000000..71e2d2e70a1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
@@ -0,0 +1,95 @@
+---
+title: 基本
+---
+
+<head>
+  <title>アプリ開発の基本 | 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>
+
+Ionic CLIでアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。
+
+## プロジェクト構成
+
+```bash
+src/
+├── app/
+├── assets/
+├── environments/
+├── theme/
+├── global.scss
+├── index.html
+├── main.ts
+├── polyfills.ts
+├── test.ts
+└── zone-flags.ts
+```
+
+`src/` ディレクトリには、 `index.html` ファイル、テスト用の設定ファイル、画像を格納する assets フォルダ、アプリのコードを格納する main `app/` ディレクトリなどの項目があります。
+
+```bash
+src/
+└── app/
+    ├── app-routing.module.ts
+    ├── app.component.html
+    ├── app.component.spec.ts
+    ├── app.component.ts
+    └── app.module.ts
+```
+
+`src/app/` ディレクトリには、ルートアプリのコンポーネントとモジュール、およびページ、コンポーネント、サービスなどのアプリの機能を含む追加のディレクトリが含まれます。
+
+## 新しい機能を生成する
+
+:::note
+This command is only supported in Ionic Angular.
+:::
+
+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
+```
+
+選択後、Ionic CLIは名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。
+
+:::note
+`portfolio/intro` のような任意のレベルのネストが可能です。例えば、`ionic g component "portfolio/intro/About Me"`とすることで、コンポーネントを簡単にページにスコープすることができます。
+:::
+
+```shell-session
+$ ionic generate
+? What would you like to generate? page
+? Name/path of page: portfolio █
+```
+
+また、生成される機能の `type` と `name` はコマンドラインで入力することもできます。
+
+```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!
+```
+
+Ionic CLIは、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLIがフードの下で使用されます。
+
+新しいページ用のファイルとディレクトリを作成した後、CLIは新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。
+
+詳細については、コマンドラインから `ionic g --help` を実行するか、`ionic generate` の [the documentation](../cli/commands/generate.md) を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
new file mode 100644
index 00000000000..878d4b41995
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
@@ -0,0 +1,48 @@
+---
+title: アプリをはじめよう
+sidebar_label: はじめ方
+---
+
+<head>
+  <title>アプリをはじめよう: スタートガイド | 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>
+
+新しいIonicアプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとはCLIが処理してくれる。
+
+```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: █
+```
+
+Ionic CLIでは、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。
+
+```shell-session
+$ ionic start myApp tabs
+```
+
+ここでは、 `myApp` がプロジェクト名、 `tabs` がスターターテンプレート、そしてプロジェクトの種類は `angular` です。
+
+利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3つのテンプレートが利用可能です。
+
+- `tabs`: タブベースのレイアウト
+- `sidemenu`: サイドメニューレイアウト
+- `blank`: 単一ページで構成された空のプロジェクト
+
+以下のコマンドで利用可能なすべてのテンプレートを見ることができます。
+
+```shell-session
+$ ionic start --list
+```
+
+これらのテンプレートは、どんなアプリにも素晴らしい出発点を提供し、コードベースを拡張するためのすべてのベストプラクティスを含んでいます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
new file mode 100644
index 00000000000..00efcb1b71a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
@@ -0,0 +1,152 @@
+---
+title: 開発者向けのヒント
+---
+
+<head>
+  <title>アプリ開発チップ: 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>
+
+## Permission Errors の解決
+
+パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するようにnpmを設定する必要があります。
+
+:::note
+`sudo` とnpmの併用は、さらなる問題を引き起こす可能性があるため、推奨されません。
+:::
+
+このガイドには、パーミッションの問題を解決するための2つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。
+
+### Option 1
+
+権限の問題を回避する最善の方法は、 node version manager を使用してNodeJSとnpmを再インストールすることです。
+
+このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、  [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) を参照してください。Windowsの追加オプションと手順については、npmのドキュメントを参照してください。
+
+1. nvmのインストール
+
+   ```shell
+   $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
+   ```
+
+1. 新しい端末はnvmを使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。
+
+   ```shell
+   $ command -v nvm
+   ```
+
+1. NodeJSの最新のLTSリリースをダウンロードしてインストールするには、次のコマンドを実行します:
+
+   ```shell
+   $ nvm install --lts
+   ```
+
+1. 新しくインストールしたNodeJSをデフォルト環境として設定します:
+
+   ```shell
+   $ nvm alias default lts/*
+   ```
+
+1. 新しい端末はnvmコントロールのNodeJSを使うようになりました:
+
+   ```shell
+   $ node -v  # will print the version installed above
+   $ which npm  # will print a path somewhere within the ~/.nvm folder
+   ```
+
+グローバルパッケージが `~/.nvm` にインストールされます。 `sudo` なしで `npm` を使用している限り、パーミッションエラーは発生しません。
+
+### Option 2
+
+<small>
+  <em>Windowsでは利用できません</em>
+</small>
+
+npmのディレクトリの所有者を現在のユーザに変更します:
+
+```shell
+$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
+$ sudo chown -R $(whoami) ~/.npm ~/.npmrc
+```
+
+これらのグローバルディレクトリは `root` が所有しなくなったため、 `sudo` を使用せずにパッケージをグローバルにインストールできます。
+
+## 依存モジュールの更新
+
+[npm](https://www.npmjs.com/) dependencyをアップデートするためには、`<package-name>` をアップデートしたいパッケージ名に変更して以下を実行します:
+
+```shell
+npm install <package-name>@<version|latest> --save
+```
+
+例えば、`@ionic/angular` パッケージを `最新` リリースのものに更新するには、以下を実行してください:
+
+```shell
+npm install @ionic/angular@latest --save
+```
+
+npm は最初に `package.lock.json` からパッケージのバージョンを読み込みにいきますので、パッケージを更新する際は CLI を利用することをおすすめします。
+
+## エディタ
+
+選択できるコードエディターはたくさんあります。ここに私たちのお気に入りのいくつかがあります：
+
+- [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
+
+## デバッガの利用
+
+`デバッガ` というキーワードはアプリケーションをデバッグするために利用されます。ほとんどのブラウザが`デバッガ`ステートメントに直面する時、 実行中の JavaScript の処理は停止され、ブラウザはデバッガをロードします。これはアプリケーションに"ブレークポイント"をセットするために使用されます。
+
+例えば、ある関数が正しい値を返さない時は、デバッガを使用してコードをステップ実行し、変数を調べることができます。
+
+```javascript
+function myBrokenFunction() {
+  debugger;
+  // do other stuff
+}
+```
+
+アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScriptを1行ずつ実行し、関数が正確にどこで中断するかを調べることができます。
+
+## モードの変更
+
+デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動しているURL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URLはこうなります: `http://localhost:8100/?ionic:mode=ios`
+
+:::note
+しかし、どのプラットフォームが現在使用されているかをブラウザがどのように認識するか、ということは変わらないでしょう。プラットフォームはデバイスの検出とユーザーエージェントの検査によって決定されます。そのため、プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。これを行うには、Chrome DevTools を開き、<kbd>Ctrl+Shift+i</kbd>(Mac では <kbd>Cmd+Option+I</kbd>) でデバイスのモードをオンに切り替えでください。デバイスモードの切り替えは、<kbd>Ctrl+Shift+M</kbd>(<kbd>Cmd+Option+M</kbd> on Mac)で行います。
+:::
+
+![別のモードのアプリケーション](/img/faq/tips/change-device-platform.png)
+
+デバイスのドロップダウンからデバイスを選択すると viewport の大きさと同様に、ユーザーエージェントも変更されます。
+
+## iOS シミュレータを使用する
+
+iOS シミュレータは実際のデバイスに届く前にアプリケーションのテストとデバッグを可能にします。
+
+シミュレータを利用可能にする前に、[Xcode](https://developer.apple.com/xcode/download/)、アップルの IDE をインストールする必要があります。
+
+[Ionic CLI](../cli.md) を用いて、シミュレータ上の現在のディレクトリでアプリケーションを実行可能にします:
+
+```shell
+ionic cordova emulate ios -lc
+```
+
+`-lc` フラグを渡すことでライブリロードを有効にし、かつログコンソールををターミナルに出力することができます。
+
+また Xcode を利用することでエミュレータを起動し、アプリケーションをデバッグすることもできます。
+
+Xcode を開き、`../path-to-app/platforms/ios/myApp.xcodeproj` を開きます。
+
+アプリケーションが読み込まれると、コンソール出力とデバイスのログが Xcode の出力ウィンドウに表示されます。
+
+## Genymotion Android エミュレーターを使用する
+
+Android SDKには標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。
+
+[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPSやカメラなどのネイティブ機能へのアクセスを許可します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
new file mode 100644
index 00000000000..ed09b6446ab
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
@@ -0,0 +1,159 @@
+---
+title: Ionicの紹介
+sidebar_label: 概要
+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>モバイルとディスクトップアプリをつくるためのオープンソースのUIキット</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 FrameworkはオープンソースのUIツールキットで、HTML、CSS、JavaScriptなどのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
+
+[Ionicのインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。
+
+<intro-end />
+
+<DocsCards>
+  <DocsCard header="Installation Guide" href="/intro/cli" icon="/icons/guide-installation-icon.svg" hoverIcon="/icons/guide-installation-icon-hover.svg">
+    <p>あなたのシステムの設定方法とフレームワークのインストールガイド。</p>
+  </DocsCard>
+
+<DocsCard
+  header="UI Components"
+  href="/components"
+  icon="/icons/guide-components-icon.svg"
+  hoverIcon="/icons/guide-components-icon-hover.svg"
+>
+  <p>Ionic Frameworkの美しくデザインされたUIコンポーネントにダイブしましょう。</p>
+</DocsCard>
+
+<DocsCard
+  header="Native Functionality"
+  href="/native"
+  icon="/icons/guide-native-icon.svg"
+  hoverIcon="/icons/guide-native-icon-hover.svg"
+>
+  <p>BluetoothやMap、HealthKitのようなNativeデバイスプラグインの統合方法。</p>
+</DocsCard>
+
+  <DocsCard header="Theming" href="/theming/basics" icon="/icons/guide-theming-icon.svg" hoverIcon="/icons/guide-theming-icon-hover.svg">
+    <p>Ionicアプリのビジュアルデザインをブランドに合わせて簡単にカスタマイズおよび変更する方法を学びましょう。</p>
+  </DocsCard>
+</DocsCards>
+
+## 概要
+
+Ionicは、アプリのフロントエンドのUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionicについてもっと知りたい方向けに、<a href="https://youtu.be/p3AN3igqiRc" target="_blank">私たちはビデオを作成しました</a>。ここから、基本的な使い方を学ぶことができます。
+
+### どこでもひとつのコードで
+
+Ionicは、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionicアプリはすべてのデバイス上で適切な外観と操作感を提供します。
+
+### パフォーマンスにフォーカス
+
+Ionicは、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。
+
+### クリーンでシンプル、機能的なデザイン
+
+Ionicは、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。
+
+### ネイティブおよびWebに最適化
+
+IonicはネイティブアプリケーションのUIガイドラインをエミュレートし、ネイティブSDKを使用して、ネイティブアプリのUI標準とデバイス機能を、オープンWebの完全なパワーと柔軟性とともに実現します。IonicはCapacitor(またはCordova)を使ってネイティブにデプロイするか、Progressive Web Appとしてブラウザで実行します。
+
+## ゴール
+
+### クロスプラットフォーム
+
+ネイティブのiOS、Android、デスクトップ、Webなど、複数のプラットフォームで動作するアプリをProgressive Web Appとして、すべて1つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。
+
+### Web標準
+
+Ionic Frameworkは、Custom ElementsやShadow DOMなどの最新のWeb APIを使用して、信頼性の高い [Web標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、およびJavaScriptの上に構築されています。このため、Ionicコンポーネントは安定したAPIを備えており、単一のプラットフォーム・ベンダーの思い付きではありません。
+
+### 美しいデザイン
+
+クリーンでシンプル、機能的。Ionic Frameworkは全てのプラットフォームで動作し、美しく表示されるように設計されています。
+あらかじめデザインされたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、すばらしい(まだ拡張可能な)基本テーマから始めます。
+
+### シンプル
+
+Ionic Frameworkはシンプルさを念頭に置いて構築されているので、Ionicアプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。
+
+## Frameworkの互換性
+
+Ionicの過去のリリースはAngularと密結合されていましたが、フレームワークのバージョン4.xからはスタンドアロンの<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Component</a>ライブラリとして動作するように再設計され、Angularのような最新のJavaScriptフレームワークと併用できるようになりました。IonicはReactやVueを含むほとんどのフロントエンドフレームワークで使用できますが、Webコンポーネントを完全にサポートするにはshimが必要なフレームワークもあります。
+
+### JavaScript
+
+Ionic Frameworkを <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、scriptタグだけでWebページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、IonicをWordPressのようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。
+
+### Angular
+
+Angularは常にIonicの素晴らしさの中心にありました。コアコンポーネントはスタンドアロンのWeb Componentライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージはAngularエコシステムとの統合を簡単にします。 `@ionic/angular` はIonic 2/3に期待されるすべての機能を含んでおり、AngularルータのようなコアAngularライブラリと統合されています。
+
+### React
+
+Ionicは現在、人気のReactライブラリを公式にサポートしています。Ionic Reactを使うと、React開発者は既存のWebスキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコアIonicコンポーネントを、ネイティブなReactコンポーネントを使っているような感覚で使用することができます。
+
+### Vue
+
+Ionicは現在、人気のVue3ライブラリを公式にサポートしています。 Ionic Vueを使用すると、Vue開発者は既存のWebスキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコアIonicコンポーネントを使用できますが、ネイティブのVueコンポーネントを使用しているように感じられます。
+
+### Future Support
+
+他のフレームワークのサポートは、将来のリリースで検討される予定です。
+
+## Ionic CLI
+
+公式の [Ionic CLI](cli.md) は、Ionicアプリを迅速に構築し、Ionic開発者に多くの役に立つコマンドを提供するツールです。CLIには、Ionicのインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLIを使用してクラウドの構築と展開を実行し、アカウントを管理できます。
+
+## Appflow
+
+Ionicアプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは <strong> オープンソースフレームワーク</strong> とは分離した <a href="https://ionic.io/appflow" target="_blank">Appflow</a> と呼んでいる製品アプリ用の商用サービスを提供しています。
+
+Appflowは、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードからIonicアプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。
+
+Appflowには <a href="https://dashboard.ionicframework.com/signup" target="_blank">Ionic Account</a> が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。
+
+## エコシステム
+
+Ionic Frameworkはコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業がIonicを使って、どこでも動くすばらしいアプリを作ってリリースしています。
+
+### コミュニティに参加する
+
+Ionicの開発者は世界200か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:
+
+- <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.
+
+## ライセンス
+
+Ionic Frameworkは無料のオープンソースプロジェクトで、 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a> ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MITライセンスは、jQueryやRuby on Railsなどの人気プロジェクトで使用されているのと同じライセンスです。
+
+このドキュメントコンテンツ(<a href="https://github.com/ionic-team/ionic-docs" target="_blank">ionic-docs</a>リポジトリにあります)は、Apache 2ライセンスでライセンスされています。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
new file mode 100644
index 00000000000..1563c927755
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
@@ -0,0 +1,166 @@
+---
+title: Ionicパッケージ
+sidebar_label: パッケージ & 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は、テスト環境、Angular、その他のフレームワーク、またはVanilla JSといったすべての状況で、Ionic Frameworkを使い始めるために使用できるさまざまなパッケージを提供しています。
+
+## Ionic Framework CDN
+
+Ionicフレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDNから組み込むことができます。。
+
+CDNからフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTMLファイルの `<head>`  要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。
+
+```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" />
+```
+
+これにより、フレームワークをインストールしなくても、すべてのIonic Frameworkのコアコンポーネントを使用することができます。CSSバンドルには、すべてのIonic [Global Stylesheets](../layout/global-stylesheets) が含まれます。
+
+:::note
+これはAngularや他のフレームワークをインストールしません。これにより、フレームワークなしでIonic Frameworkのコアコンポーネントを使用できます。
+:::
+
+## Ionic + Angular
+
+AngularプロジェクトでIonic Frameworkを使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべてのIonic Frameworkコンポーネントと、Angularのサービスおよび機能を使うことができます。
+
+```shell
+npm install @ionic/angular@latest --save
+```
+
+新しいIonic Frameworkのリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npmを使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。
+
+Ionicを既存のAngularプロジェクトに追加するには、Angular CLIの `ng add` 機能を使用します。
+
+```shell
+ng add @ionic/angular
+```
+
+これにより、`@ionic/angular` に必要なパッケージと、必要なスタイルが追加されます。
+
+## Ionic + React
+
+Ionicを既存のReactプロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。
+
+```shell
+$ npm install @ionic/react
+$ npm install @ionic/react-router
+```
+
+### CSS
+
+必要なCSSをReactプロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。
+
+```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
+
+既存のVueプロジェクトにIonic Frameworkを追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。
+
+```shell
+npm install @ionic/vue @ionic/vue-router
+```
+
+その後、Vueアプリに`IonicVue`プラグインをインストールする必要があります。
+
+**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');
+});
+```
+
+`router.isReady()`が解決したら、必ずアプリをマウントしてください。
+
+### ルーティング
+
+Vueアプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/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
+
+Vueプロジェクトで必要なCSSをimportするには、`main.js` ファイルに以下を追加します。
+
+```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';
+```
+
+ここからは、Ionic Frameworkでの開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。
+
+## Ionicons CDN
+
+IoniconsはデフォルトでIonic Frameworkに同梱されているので、Ionicを使用している場合はインストールは不要です。Ionic Frameworkを使用せずにIoniconsを使用するためには、ページの終わりの近くにある `</body>` の閉じタグの直前に以下の `<script>` タグを配置します。
+
+```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
+アイコンの使い方については [Ionicons usage](https://ionic.io/ionicons/usage) をご覧ください。
+:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
new file mode 100644
index 00000000000..b52014cd3f1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
@@ -0,0 +1,64 @@
+---
+title: Ionicのインストール
+sidebar_label: CLIインストール
+---
+
+import AppWizard from '@components/page/intro/AppWizard';
+
+<head>
+  <title>Ionic Framework CLIのインストール方法</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アプリは、主にIonic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLIは、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic teamが推奨しているインストール方法です。Ionic CLIは、アプリの実行や、Appflowといった他のサービスに接続などができる重要なツールです。
+
+<AppWizard />
+
+## Ionic CLIをインストール
+
+続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)でIonicをセットアップできる環境を説明しています。
+
+npmを使って Ionic CLI をインストールします:
+
+```shell
+npm install -g @ionic/cli
+```
+
+Ionic CLIが以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。
+
+```shell
+$ npm uninstall -g ionic
+$ npm install -g @ionic/cli
+
+```
+
+:::note
+`-g` オプションは、 _グローバルにインストール_ することを意味しています。パッケージをグローバルにインストールすると `EACCES` パーミッションエラーが起きる可能性があります。
+管理権限なしでnpmがグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。
+:::
+
+## アプリケーションの起動
+
+Ionicアプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な3つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。
+
+```shell
+ionic start
+```
+
+![start app thumbnails](/img/installation/start-app-thumbnails.png)
+
+Ionicアプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。
+
+## アプリケーションを実行する
+
+ほとんどのIonicアプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。
+
+```shell
+$ cd myApp
+$ ionic serve
+```
+
+アプリを実行する方法は他にもたくさんありますが、まずはこのワークフローから始めることをおすすめします。デバイスやエミュレーターでアプリを開発・テストするには、[アプリの実行ガイド](../developing/previewing.md) を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
new file mode 100644
index 00000000000..9d1ab81a06d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
@@ -0,0 +1,68 @@
+---
+title: 環境設定
+---
+
+<head>
+  <title>環境設定 | IonicアプリをはじめるためのNode と NPM 環境</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>
+
+Ionic Frameworkをはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。
+
+もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Codeは
+Microsoft製の無料でとてもパワフルなテキストエディタです。
+
+## ターミナル
+
+:::note
+Ionic開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。
+:::
+
+一般的に、OSに最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末はIonicで正常に動作しますが、サポートされていない場合があります。
+
+- Windowsでは、 **コマンドプロンプト** と **PowerShell** がサポートされています。<a href="https://docs.microsoft.com/en-us/windows/wsl/faq" target="_blank">WSL</a>はIonicで動作することがわかっていますが、サポートされていない可能性があります。
+- macOSでは、組み込みの **ターミナル** アプリがサポートされています。
+
+Git Bash（<a href="https://git-scm.com" target="_blank">git-scm.com</a>）はTTY対話機能をサポートしておらず、Ionicはサポートしていません。
+
+## Node と npm
+
+モダンなJavaScriptプロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するためにLTSバージョンを選択することをお勧めします。
+
+NodeにはJavaScriptパッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。
+
+インストールできているかを確認するためには、新しいターミナルウィンドウを開いて以下を実行します。
+
+```shell
+$ node --version
+$ npm --version
+```
+
+:::note
+`npm` のグローバルパッケージをインストールする時、パーミッションエラーが起きがちです。 もし `EACCES` エラーがでたら、 [Resolving Permission Errors](/docs/developing/tips#resolving-permission-errors) を確認ください。
+:::
+
+## Git
+
+必須ではありませんが、バージョン管理システムの[Git](../reference/glossary.md#git)の利用を強くお勧めします。
+
+Gitは [GitHub](https://github.com/) のようなGitホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらの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)
+
+それ以外の場合は、 [公式のインストール手順](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) をご確認ください。コマンドラインユーティリティは、[download page](https://git-scm.com/downloads) からダウンロードできます。.
+
+インストールできているかを確認するためには、新しいターミナルウィンドウを開いて以下を実行します。
+
+```shell
+git --version
+```
+
+### Git GUI
+
+Gitはコマンドラインユーティリティですが、利用可能な [GUIクライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHubとうまく連携します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
new file mode 100644
index 00000000000..feefd9a52f6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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';
+
+# はじめてアプリ制作チュートリアル
+
+Ionicアプリの構築に使用する予定のJavaScriptフレームワークを選びます。
+
+<DocsCards>
+  <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
+    <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+  </DocsCard>
+
+  <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+    <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+  </DocsCard>
+
+  <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
+    <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+  </DocsCard>
+</DocsCards>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
new file mode 100644
index 00000000000..e19041a8e66
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
@@ -0,0 +1,32 @@
+---
+title: 次のステップ
+---
+
+<head>
+  <title>アプリをはじめるための次のステップ: 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';
+
+## 最初のアプリを作る
+
+Ionicアプリを構築する際に使用する予定のJavaScriptフレームワークを選択します。
+
+<DocsCards>
+  <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
+    <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+  </DocsCard>
+
+  <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+    <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+  </DocsCard>
+
+  <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
+    <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+  </DocsCard>
+</DocsCards>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
new file mode 100644
index 00000000000..5c41a8bf083
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
@@ -0,0 +1,39 @@
+---
+title: Ionic VS Code Extension
+---
+
+<head>
+  <title>Ionic Visual Studio Codeエクステンションを使う</title>
+  <meta
+    name="description"
+    content="Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさまざまな機能の実行を支援します。"
+  />
+</head>
+
+Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさまざまな機能を、VS Codeのウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーにIonicのロゴが表示されるようになります。
+
+## 新規プロジェクトの作成
+
+空のディレクトリから、テンプレートオプションの1つをクリックし、アプリ名を指定することで、新しいAngular、React、またはVueプロジェクトを作成することができます。
+
+<img
+  src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif"
+  alt="Video of creating a project"
+/>
+
+新しいプロジェクトを作成すると、拡張機能は `package.json` にあるすべての共通タスクにアクセスできるようになります。
+
+## Capacitor の追加
+
+[Capacitor](https://capacitorjs.com/) をアプリケーションに追加するには、"Integrate Capacitor "を選択します。
+
+<img
+  src="https://user-images.githubusercontent.com/84595830/159510570-b5a151bb-2e17-42c8-8cab-bffbaa849576.gif"
+  alt="Capacitor追加のビデオ"
+/>
+
+Capacitorが統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS上でアプリを実行することができるようになりました。
+
+## Doing More
+
+Ionic VS Code 拡張は、マイグレーション、デバッグ、モノレポのサポートなど、非常に多くのことを支援します。拡張機能の全リストは、[extension overview on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をご確認ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
new file mode 100644
index 00000000000..3a03ad0fb58
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
@@ -0,0 +1,554 @@
+---
+title: CSSユーティリティ
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+<head>
+  <title>CSSユーティリティ: 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 Frameworは、テキストの順番を入れ替えたり、要素の配置やpaddingやmarginを修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
+
+:::note
+使用可能なIonic Frameworkスターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。
+:::
+
+## テキストの修正
+
+### テキストの配置
+
+```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.                                                                       |
+
+### テキストの変換
+
+```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
+
+上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの1つです。
+
+以下の表は、 `{modifier}` のデフォルトの挙動です。 `left`, `right`, `start`, `end`, `center`, `justify`, `wrap`, `nowrap`, `uppercase`, `lowercase`, `capitalize` は上記の通りです。
+
+| 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`. |
+
+## 要素の配置
+
+### Float要素
+
+CSSプロパティのfloatは、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <h3>no float</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
+    </ion-col>
+    <ion-col>
+      <h3>float-left</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+        class="ion-float-left"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
+    </ion-col>
+    <ion-col>
+      <h3>float-right</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+        class="ion-float-right"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
+    </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. |
+
+### レスポンシブなFloatクラス
+
+上記のすべてのfloatクラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。
+
+次の表に、デフォルトの動作を示します。 `{modifier}` は、前述のように `left`, `right`, `start`, `end` のいずれかです。
+
+| 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`. |
+
+## 要素の表示
+
+display CSSプロパティは、要素を表示するかどうかを決定します。要素はDOM内に残りますが、非表示の場合はレンダリングされません。
+
+```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属性
+
+画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
+
+| 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`). |
+
+## コンテンツのスペース
+
+### 要素のPadding
+
+padding属性は、要素のpaddingエリアを設定します。paddingエリアは、要素のコンテンツとその境界線のスペースです。
+
+`padding` で適用されるデフォルトの数値は `16px` で、これは `--ion-padding`　変数で設定することができます。これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
+
+```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.       |
+
+### 要素のMargin
+
+Marginエリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。
+
+`margin`　はデフォルトで `16px` が設定されており、 `--ion-margin` 変数で設定されています。 これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
+
+```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 プロパティ
+
+<img src={require('@site/static/img/layout/diagram-flex-attributes.png').default} />
+
+### Flex コンテナのプロパティ
+
+```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の表示
+
+border display CSSプロパティは、borderを表示するかどうかを指定します。このプロパティは、 `ion-header` と` 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のブレイクポイント
+
+Ionicは、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。
+
+| Breakpoint Name | Width    |
+| --------------- | -------- |
+| `xs`            | `0`      |
+| `sm`            | `576px`  |
+| `md`            | `768px`  |
+| `lg`            | `992px`  |
+| `xl`            | `1200px` |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
new file mode 100644
index 00000000000..f1bde8ae88e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
@@ -0,0 +1,73 @@
+---
+title: グローバルスタイルシート
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+<head>
+  <title>グローバルスタイルシート: 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>
+
+Ionic Frameworkのコンポーネントスタイルは自己完結していますが、Ionicのすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Frameworkアプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。
+
+## 利用可能
+
+### 必須
+
+Ionic Framework が正常に動作するためには、以下の CSS ファイルが含まれている必要があります。
+
+#### core.css
+
+このファイルは、Ionic コンポーネントが正常に動作するために必要な唯一のスタイルシートです。アプリ固有のスタイルが含まれており、`color`プロパティがコンポーネント間で動作するようにします。このファイルが含まれていない場合、色は表示されず、いくつかの要素が正しく表示されない可能性があります。
+
+### 推奨
+
+Ionic Frameworkアプリでは、以下のCSSファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Frameworkのコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。
+
+#### structure.css
+
+`html>` にスタイルを適用し、`box-sizing` のデフォルトを `border-box` にします。これにより、モバイルデバイスでのスクロールがネイティブのように動作するようになります。
+
+#### typography.css
+
+typography はドキュメント全体の font-family を変更し、見出し要素のフォントスタイルを変更する。また、いくつかのネイティブのテキスト要素に位置決めスタイルを適用します。
+
+#### normalize.css
+
+ブラウザがすべての要素をより一貫して、現代の標準に沿った形で表示するようにします。これは [Normalize.css](https://necolas.github.io/normalize.css/) をベースにしています。
+
+### オプション
+
+以下のCSSファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。
+
+#### padding.css
+
+任意の要素のパディングやマージンを変更するためのユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#content-space) を参照してください。
+
+#### float-elements.css
+
+ブレイクポイントとサイドに基づいて要素をフロートさせるユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#element-placement) を参照してください。
+
+#### text-alignment.css
+
+ブレークポイントに応じて、要素のテキストを整列させたり、空白を調整するためのユーティリティクラスを追加します。使い方は [CSS Utilities](css-utilities.md#text-alignment) を参照してください。
+
+#### text-transformation.css
+
+要素のテキストをブレイクポイントに応じて `大文字`, `小文字`, `大文字` に変換するユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#text-transformation) を参照してください。
+
+#### flex-utils.css
+
+フレックスコンテナやアイテムを整列させるためのユーティリティクラスを追加。使い方は [CSS Utilities](css-utilities.md#flex-properties) を参照してください。
+
+#### display.css
+
+ブレイクポイントに基づき、任意の要素を隠すためのユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#element-display) を参照してください。
+
+## 使用方法
+
+フレームワークに基づくグローバルなスタイルシートのインクルード方法は [Ionic Packages](../intro/cdn.md) を、オプションのユーティリティの使用方法は [CSS Utilities](css-utilities.md) を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
new file mode 100644
index 00000000000..fbe80a2515b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
@@ -0,0 +1,512 @@
+---
+title: レスポンシブグリッド
+---
+
+<head>
+  <title>レスポンシブグリッドシステムとスクリーンサイズに応じたカルムレイアウト</title>
+  <meta
+    name="description"
+    content="Ionic's responsive grid is a powerful mobile-first flexbox system for building custom layouts based on a 12 column layout with breakpoints based on screen size."
+  />
+</head>
+
+グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ12列のレイアウトに基づいています。カラムの数はCSSを使ってカスタマイズすることができます。
+
+## How it works
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <div>1 of 3</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 3</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 3</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+- グリッドは、すべての行と列のためのコンテナとして機能します。グリッドはコンテナの幅いっぱいに表示されます。
+  しかし、`fixed`属性を追加すると、スクリーンサイズごとの幅を指定することができます。
+- 行は、列を適切に並べるための水平方向のグループです。
+- コンテンツは列の中に配置されるべきで、列のみが行の直接の子となることができます。
+- `size-{breakpoint}` 属性は、1行あたりデフォルトの12列のうち、使用する列の数を指定します。
+  つまり、`size="4"` を指定すると、グリッドの1/3、つまり12列のうち4列を占有することができます。
+- sizeに値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を4つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に25%になります。
+- カラムの幅はパーセンテージで設定されるため、常に流動的で、親要素からの相対的な大きさになります。
+- カラムは個々のカラムの間にパディングを持ちますが、パディングはグリッドとカラムから削除することができます。
+  しかし、グリッドに `ion-no-padding` クラスを追加することで、グリッドとカラムからパディングを取り除くことができます。グリッドに適用できるその他のスタイルについては、[CSS ユーティリティ](css-utilities.md) を参照してください。
+- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の5段階あります。
+- グリッドの階層は最小幅を基準にしており、その階層とそれより大きな階層に適用されます。
+  (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
+- グリッドは CSS 変数で簡単にカスタマイズすることができます。グリッドのカスタマイズ](#customizing-the-grid)を参照してください。
+
+### ライブでの実装例
+
+Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。
+
+## グリッドの大きさ
+
+デフォルトでは、グリッドは100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
+
+| Name | Value  | Description                                       |
+| ---- | ------ | ------------------------------------------------- |
+| xs   | 100%   | Don't set the grid width 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) |
+
+### ライブでの実装例
+
+Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。
+
+## グリッドの属性
+
+グリッドは、デフォルトでは画面の幅いっぱいに表示されます。これは、以下の属性を使って変更できます。
+
+| Property | Description                                       |
+| -------- | ------------------------------------------------- |
+| fixed    | Set a max width based on the current screen size. |
+
+## デフォルトのブレークポイント
+
+デフォルトのブレークポイントは、以下の表で定義されています。現時点では、ブレイクポイントをカスタマイズすることはできません。カスタマイズできない理由については、 [Variables in Media Queries](../theming/advanced.md#variables-in-media-queries) を参照してください。
+
+| Name | Value  | Width Prefix | Offset Prefix | Push Prefix | Pull Prefix | Description                          |
+| ---- | ------ | ------------ | ------------- | ----------- | ----------- | ------------------------------------ |
+| xs   | 0      | `size-`      | `offset-`     | `push-`     | `pull-`     | Set columns when (min-width: 0)      |
+| sm   | 576px  | `size-sm-`   | `offset-sm-`  | `push-sm-`  | `pull-sm-`  | Set columns when (min-width: 576px)  |
+| md   | 768px  | `size-md-`   | `offset-md-`  | `push-md-`  | `pull-md-`  | Set columns when (min-width: 768px)  |
+| lg   | 992px  | `size-lg-`   | `offset-lg-`  | `push-lg-`  | `pull-lg-`  | Set columns when (min-width: 992px)  |
+| xl   | 1200px | `size-xl-`   | `offset-xl-`  | `push-xl-`  | `pull-xl-`  | Set columns when (min-width: 1200px) |
+
+## オートレイアウトカラム
+
+### 均等な幅
+
+デフォルトでは、すべてのデバイスと画面サイズにおいて、カラムは行の中で同じ幅を占めます。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <div>1 of 3</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 3</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 3</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+### 1列の幅を設定する
+
+1つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <div>1 of 3</div>
+    </ion-col>
+    <ion-col size="8">
+      <div>2 of 3 (wider)</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 3</div>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <div>1 of 3</div>
+    </ion-col>
+    <ion-col size="6">
+      <div>2 of 3 (wider)</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 3</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+#### ライブでの実装例
+
+Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。
+
+### 可変幅
+
+`size-{breakpoint}` プロパティを `"auto"` に設定することで、カラムはそのコンテンツの自然な幅に基づいてサイズを変更することができます。これは、ピクセルでカラムの幅を設定する場合に非常に便利です。可変幅のカラムの隣のカラムは、行を埋めるようにリサイズされます。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <div>1 of 3</div>
+    </ion-col>
+    <ion-col size="auto">
+      <div>Variable width content</div>
+    </ion-col>
+    <ion-col>
+      <div>3 of 3</div>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col>
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col size="auto">
+      <div>
+        <ion-input placeholder="Variable width input"></ion-input>
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>4 of 4</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+#### ライブでの実装例
+
+Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。
+
+## レスポンシブ属性
+
+### すべてのブレークポイント
+
+すべてのデバイスとスクリーンに対してカラムの幅をカスタマイズするには、`size` プロパティを設定します。このプロパティの値は、利用可能なカラムのうち、このカラムが占めるべきカラムの数を決定します。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="4">
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col size="2">
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col size="2">
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col size="4">
+      <div>4 of 4</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+### 積み上げから水平へ
+
+width属性とbreakpoint属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="12" size-sm>
+      <div>1 of 4</div>
+    </ion-col>
+    <ion-col size="12" size-sm>
+      <div>2 of 4</div>
+    </ion-col>
+    <ion-col size="12" size-sm>
+      <div>3 of 4</div>
+    </ion-col>
+    <ion-col size="12" size-sm>
+      <div>4 of 4</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+#### ライブでの実装例
+
+Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。
+
+##並び替え
+
+### カラムのオフセット
+
+offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは3カラム分オフセットされ、3カラムを占めることになります。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3" offset="3">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが3カラム分オフセットされるグリッドの例です。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size-md="3">
+      <div>1 of 3</div>
+    </ion-col>
+    <ion-col size-md="3">
+      <div>2 of 3</div>
+    </ion-col>
+    <ion-col size-md="3" offset-md="3">
+      <div>3 of 3</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+#### ライブでの実装例
+
+Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。
+
+### プッシュとプル
+
+`push` と `pull` というプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、カラムの `left` と `right` を指定したカラム数だけ調整し、カラムの並び替えを簡単に行うことができます。例えば、以下のグリッドでは、`1 of 2`と記述されたカラムが実際には最後のカラムとなり、`2 of 2`が最初のカラムとなります。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="9" push="3">
+      <div>1 of 2</div>
+    </ion-col>
+    <ion-col size="3" pull="9">
+      <div>2 of 2</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+また、画面のブレークポイントに基づいてPushとPullを追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。
+
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size-md="6" push-md="3">
+      <div>1 of 3</div>
+    </ion-col>
+    <ion-col size-md="3" push-md="3">
+      <div>2 of 3</div>
+    </ion-col>
+    <ion-col size-md="3" pull-md="9">
+      <div>3 of 3</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+#### ライブでの実装例
+
+Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。
+
+## アライメント
+
+### 垂直方向のアラインメント
+
+行に異なるクラスを追加することで、すべての列を行の内側に垂直に整列させることができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-container-properties) を参照してください。
+
+```html
+<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-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-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-grid>
+```
+
+カラムはまた、カラムに直接alignmentクラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#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>
+```
+
+#### ライブでの実装例
+
+Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。
+
+### 水平方向の整列
+
+行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[cssユーティリティ](css-utilities.md#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-grid>
+```
+
+#### ライブでの実装例
+
+Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。
+
+## グリッドのカスタマイズ
+
+組み込みの CSS 変数を使用すると、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラムの数などを変更できます。
+
+### 列の数
+
+グリッドのカラム数は、CSS変数 `--ion-grid-columns` で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。
+
+```css
+--ion-grid-columns: 12;
+```
+
+### グリッドのPadding
+
+グリッドコンテナのPaddingは、CSS変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS変数 `--ion-grid-padding-{breakpoint}` を使用します。
+
+```css
+--ion-grid-padding: 5px;
+
+--ion-grid-padding-xs: 5px;
+--ion-grid-padding-sm: 5px;
+--ion-grid-padding-md: 5px;
+--ion-grid-padding-lg: 5px;
+--ion-grid-padding-xl: 5px;
+```
+
+### Grid width
+
+固定グリッドの幅の値を画面サイズに応じてカスタマイズするには、各ブレークポイントごとに `--ion-grid-width-{breakpoint}` の値をオーバーライドします。
+
+```css
+--ion-grid-width-xs: 100%;
+--ion-grid-width-sm: 540px;
+--ion-grid-width-md: 720px;
+--ion-grid-width-lg: 960px;
+--ion-grid-width-xl: 1140px;
+```
+
+### Column Padding
+
+列のpaddingは `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS変数 `--ion-grid-column-padding-{breakpoint}` を使用します。
+
+```css
+--ion-grid-column-padding: 5px;
+
+--ion-grid-column-padding-xs: 5px;
+--ion-grid-column-padding-sm: 5px;
+--ion-grid-column-padding-md: 5px;
+--ion-grid-column-padding-lg: 5px;
+--ion-grid-column-padding-xl: 5px;
+```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
new file mode 100644
index 00000000000..fbe0d72ef21
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
@@ -0,0 +1,236 @@
+---
+title: 構造
+initialTab: 'preview'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+<head>
+  <title>レイアウトの構成 | 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は、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
+
+## HeaderとFooterのレイアウト
+
+### Header
+
+<aside>
+  <DocsCard href="../api/header" header="Learn More" icon="/icons/component-header-icon.png">
+    <code>ion-header</code> API docs
+  </DocsCard>
+</aside>
+
+最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般にこの両方を持ちますが、contentを使用するためにheaderは必要ありません。
+
+```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>
+
+ご覧のように、footerのツールバーはコンテンツの上に表示されます。アプリでは、コンテンツの下にツールバーを表示する必要がある場合があり、そのような場合にfooterが使用されます。
+
+```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 と Footer
+
+また、これらを1つのページにまとめて、コンテンツの上と下にツールバーを表示させることも可能です。
+
+```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>
+```
+
+### ライブでの実装例
+
+この設定のライブ例を、Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-header-footer) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-head-foot) で見ることができます。
+
+## タブレイアウト
+
+水平な[tabs](../api/tabs.md)からなるレイアウトを使用すると、ユーザーはコンテンツビュー間をすばやく切り替えることができます。各タブには、静的コンテンツや、`ion-router-outlet` や `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>
+```
+
+### ライブでの実装例
+
+この設定は、Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-tabs) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-tab-layout) で実例を見ることができます。
+
+## メニューレイアウト
+
+モバイルアプリの標準的なレイアウトには、ボタンをクリックするか、横からスワイプして開くことで サイドメニュー [menu](../api/menu.md) を切り替えられる機能が含まれています。サイドメニューは一般的にナビゲーションのために使用されますが、任意のコンテンツを含むことができます。
+
+```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>
+```
+
+### ライブでの実装例
+
+この設定は、Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-menu-layout) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-menu)で 実例を見ることができます。
+
+## 分割ペインレイアウト
+
+[split pane](../api/split-pane.md) レイアウトは、前述のレイアウトを組み合わせることができるため、より複雑な構造を持っています。これは、ビューポートが指定されたブレークポイントより上にある場合に、複数のビューを表示することができます。デバイスの画面サイズが一定以下の場合、分割ペインビューは非表示になります。
+
+デフォルトでは、画面が `768px` または `md` ブレークポイントより大きい場合に分割ペインビューが表示されますが、`when` プロパティを設定することで、異なるブレークポイントを使用するようにカスタマイズすることが可能です。以下は、`sm`スクリーン以上、またはビューポートが `576px` より大きい場合に表示されるメニューを分割ペインに含む例です。これよりアプリが小さくなるようにブラウザの水平サイズを変更することで、分割ペインの表示が消えます。
+
+```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>
+```
+
+重要なのは、分割ペインで指定した `content-id` に一致する `id` を持つ要素が、常に表示されるメインコンテンツとなることです。これは、[ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), または [ion-tabs](../api/tabs.md) など任意の要素にすることが可能です。
+
+### ライブでの実装例
+
+Angularでの実装例は [こちら](https://stackblitz.com/edit/ionic-ng-split-pane) 、Reactでの実装例は [こちら](https://stackblitz.com/edit/ionic-react-split-pane) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
new file mode 100644
index 00000000000..4cbeec67432
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
@@ -0,0 +1,25 @@
+---
+sidebar_label: よくある質問
+slug: /native/faq
+---
+
+# Frequently Asked Question
+
+## What is Capacitor? 
+
+Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. 
+
+## Permission Issues
+
+If you're using a plugin, it may require adding additional permissions to your native project after you install the plugin. For instance, the Capacitor Camera plugin requires the following permission for iOS:
+
+- `NSCameraUsageDescription` (`Privacy - Camera Usage Description`)
+- `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
+- `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
+
+You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. 
+
+
+## Unexpected behaviour
+
+If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md
new file mode 100644
index 00000000000..30a8ac5c0fc
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md
@@ -0,0 +1,146 @@
+---
+title: Capacitor Plugins
+sidebar_label: Setup
+hide_table_of_contents: true
+slug: /native/setup
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<head>
+  <title>Capacitor Plugins | Capacitor Core Plugins for Ionic Apps</title>
+  <meta
+    name="description"
+    content="Capacitor offers a collection APIs that make adding native functionality to your Ionic app as simple as using any JavaScript library."
+  />
+  <style>{`
+    :root {
+      --doc-item-container-width: 60rem;
+    }
+  `}</style>
+</head>
+
+Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project.
+<intro-end />
+
+## Install
+
+To install a plugin, find the plugin you want to use and install it using your package manager, like npm:
+
+```shell
+# Install the Capacitor Plugins
+$ npm install @capacitor/camera
+```
+
+## Usage
+
+Once installed, plugins can be imported into a component and you can call the native functionality directly from your code.
+
+Using the [Camera plugin](native/camera.md) as an example, first install it:
+
+````mdx-code-block
+<Tabs
+  groupId="runtime"
+  defaultValue="javascript"
+  values={[
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'react', label: 'React' },
+  ]
+}>
+<TabItem value="javascript">
+
+```javascript
+import { Camera, CameraResultType } from '@capacitor/camera';
+
+const takePicture = async () => {
+  const image = await Camera.getPhoto({
+    quality: 90,
+    allowEditing: true,
+    resultType: CameraResultType.Uri
+  });
+  const imageUrl = image.webPath;
+  imageElement.src = imageUrl;
+};
+```
+
+</TabItem>
+<TabItem value="angular">
+
+```javascript
+import { Component } from '@angular/core';
+import { Camera, CameraResultType } from '@capacitor/camera';
+
+@Component({...})
+export class CameraComponent{
+  public imageSrc = '';
+
+  async takePicture() {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri
+    });
+    const imageUrl = image.webPath;
+    this.imageSrc = imageUrl;
+  };
+
+}
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```typescript
+
+<template>
+...
+</template>
+
+<script setup lang="typescript">
+import { ref } from 'vue';
+import { Camera, CameraResultType } from '@capacitor/camera';
+const imageSrc = ref('');
+
+const takePicture = async () => {
+  const image = await Camera.getPhoto({
+    quality: 90,
+    allowEditing: true,
+    resultType: CameraResultType.Uri
+  });
+  const imageUrl = image.webPath;
+  imageSrc.value = imageUrl;
+};
+
+</script>
+
+```
+
+</TabItem>
+<TabItem value="react">
+
+```javascript
+import { Camera, CameraResultType } from '@capacitor/camera';
+import { useState } from 'react';
+
+export function CameraComponent() {
+  const [imageSrc, setImageSrc] = usetState('');
+
+  const takePicture = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri
+    });
+    const imageUrl = image.webPath;
+    setImageSrc(imageUrl);
+  };
+  return (...)
+}
+```
+
+</TabItem>
+</Tabs>
+````
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
new file mode 100644
index 00000000000..c863908c42f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
@@ -0,0 +1,36 @@
+---
+title: Capacitor
+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>
+
+<intro-end />
+
+
+Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences.
+
+While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
+
+
+
+
+<NativeEnterpriseCard />
+
+> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/)
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore
new file mode 100644
index 00000000000..d6b7ef32c84
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
new file mode 100644
index 00000000000..c7eaa45a96e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
@@ -0,0 +1,147 @@
+---
+title: Ionic React
+sidebar_label: 概要
+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>Ionic Reactでアプリをつくろう: 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>コードひとつで <br/> あらゆるプラットフォーム <br/> <strong>まさにReact</strong></h1>
+
+- ✓ 100 以上のモバイルに最適化された React UI コンポーネント
+- ✓ Reactの標準的なツールである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>
+
+### モバイル、デスクトップ、ウェブにまたがる素晴らしいアプリを、あなたが知っている、そして愛するReactで構築してください。
+
+Ionic Reactは、Ionic FrameworkのネイティブReactバージョンで、世界中の何百万ものミッションクリティカルなアプリを動かしている、無料のオープンソースSDKです。
+
+Reactを使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。
+
+<div class="flex" >
+
+<div class="pull-left">
+
+## すばらしいデザイン
+
+100種類以上の美しいモバイル対応のUIコンポーネント、アニメーション、ジェスチャーから選択でき、軽量であなたのブランドに合うようにカスタマイズできます。
+
+[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">
+
+## 使い慣れたツール
+
+IonicのReactプロジェクトはReactプロジェクトと同じように、[react-dom](https://reactjs.org/docs/react-dom.html) を活用し、[Create React App (CRA)](https://github.com/facebook/create-react-app) アプリで見られるようなセットアップが可能です。ルーティングとナビゲーション](/docs/react/navigation)では、React Routerが使用されています。
+React バージョン 16.8 以降に対応しています。
+
+</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
+
+最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic ReactプロジェクトをネイティブのiOS、Android、Electron、WebにProgressive Web Appとしてデプロイできます。すべて1つの共有コードベースで。
+
+</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">
+
+## まさにReact
+
+結局のところ、ただのReactなのです。Ionic ReactはオープンなWeb標準とビルトインのブラウザ機能を使用しているため、何百万とあるWebライブラリのどれとも互換性があります。
+
+  </div>
+
+<div class="pull-right">
+  <img src={require('@site/static/img/frameworks/react.svg').default} />
+</div>
+
+</div>
+
+## インストール
+
+```shell-session
+$ npm install -g @ionic/cli
+$ ionic start myApp tabs --type react
+
+$ ionic serve █
+```
+
+## Resources
+
+<DocsCards>
+  <DocsCard header="はじめ方" href="react/your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
+    <p>Ionic Frameworkで素晴らしいアプリを作り始めるために知っておくべき基礎知識を学びます。</p>
+  </DocsCard>
+
+<DocsCard
+  header="Add Ionic to Existing React App"
+  href="/docs/react/adding-ionic-react-to-an-existing-react-project"
+  icon="/icons/logo-react-icon.png"
+>
+  <p>個々のコンポーネントを使用するか、完全なアプリ体験をつくるか。</p>
+</DocsCard>
+
+<DocsCard header="ナビゲーション" href="react/navigation" icon="/icons/feature-component-navigation-icon.png">
+  <p>IonicとReact Routerでアプリ内ナビゲーションの基本を学ぶ</p>
+</DocsCard>
+
+<DocsCard header="ライフサイクル" href="react/lifecycle" icon="/icons/feature-guide-components-icon.png">
+  <p>Ionicのライフサイクルイベントをクラスコンポーネントやフックで使用する方法について学びます。</p>
+</DocsCard>
+
+</DocsCards>
+
+</PageStyles>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md
new file mode 100644
index 00000000000..94c253f3bed
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md
@@ -0,0 +1,213 @@
+# Adding To An Existing React App
+
+This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic.
+
+### Using Individual Ionic Components
+
+Ionic React has around 100 components that you can begin using in your app immediately to help make it more mobile-friendly.
+
+To get started with using components install the `@ionic/react` package:
+
+```bash
+npm i @ionic/react
+```
+
+Import the stylesheets from Ionic in your main app file:
+
+```tsx title="App.tsx"
+import '@ionic/react/css/core.css';
+```
+
+Add the `setupIonicReact` function to your app:
+
+```tsx title="App.tsx"
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact();
+
+const App = () => {
+  return (
+    ...
+  );
+}
+
+export default App;
+```
+
+:::note
+
+`setupIonicReact` is a function that will set up the Ionic React components to work with your app. It is required to be called before using any of the Ionic React components.
+
+:::
+
+You can import any of the components and begin to use them right away. Here we are importing the `IonButton` and `IonDatetime` components and using them anywhere in our app:
+
+```tsx
+import React from 'react';
+import { IonButton, IonDatetime } from '@ionic/react';
+
+const MyComponent = () => {
+  return (
+    <>
+      <IonDatetime></IonDatetime>
+      <IonButton fill="clear">Start</IonButton>
+    </>
+  );
+};
+```
+
+### Using Ionic Pages
+
+If you want to convert part of your app and give it the whole Ionic experience, there are a few additional steps to take to get this setup.
+
+First, import some additional CSS files that help set up the overall structure of the page and some utility helpers:
+
+```js
+/* 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';
+```
+
+If you are using another CSS framework (like Bootstrap), you might want to isolate the Ionic pages away from them. This will help to ensure there aren't any CSS conflicts between the libraries.
+
+Next, install the `@ionic/react-router` library:
+
+```bash
+npm i @ionic/react-router
+```
+
+The Ionic React Router library is a small wrapper around the popular React Router library and helps provide the functionality we need for native-like page transitions. The Ionic React Router library is compatible with v5 of React Router.
+
+The main Ionic page will need a couple of base components. First, use a `IonApp` component (from `@ionic/react`) as the root component, and then use `IonReactRouter` (from `@ionic/react-router`).
+
+`IonApp` sets up our main container, with the necessary styling needed for our structural components. `IonReactRouter` is a small wrapper for React Routers `BrowserRouter` and should be used in its place.
+
+Then, wrap all your routes in an `IonRouterOutlet`, which is what manages our Ionic pages.
+
+```tsx
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+...
+
+<IonApp>
+  <IonReactRouter>
+    <IonRouterOutlet>
+      <Route path="/" exact component={Home} />
+      <Route path="/about" exact component={About} />
+    </IonRouterOutlet>
+  </IonReactRouter>
+</IonApp>
+```
+
+Now you can setup Ionic pages like so:
+
+```tsx
+<IonPage>
+  <IonHeader>
+    <IonToolbar>
+      <IonTitle>My Page</IonTitle>
+    </IonToolbar>
+  </IonHeader>
+  <IonContent>
+    <IonDatetime></IonDatetime>
+    <IonButton fill="clear">Start</IonButton>
+  </IonContent>
+</IonPage>
+```
+
+:::note
+
+`IonPage` is important to have as the base component for your "Ionic" pages. `IonPage` is the element Ionic performs page transitions on.
+
+:::
+
+For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation).
+
+### Customize the Theme
+
+To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file:
+
+```css title="main.css"
+:root {
+  --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;
+
+  --ion-color-secondary: #0cd1e8;
+  --ion-color-secondary-rgb: 12, 209, 232;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #0bb8cc;
+  --ion-color-secondary-tint: #24d6ea;
+
+  --ion-color-tertiary: #7044ff;
+  --ion-color-tertiary-rgb: 112, 68, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #633ce0;
+  --ion-color-tertiary-tint: #7e57ff;
+
+  --ion-color-success: #10dc60;
+  --ion-color-success-rgb: 16, 220, 96;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #0ec254;
+  --ion-color-success-tint: #28e070;
+
+  --ion-color-warning: #ffce00;
+  --ion-color-warning-rgb: 255, 206, 0;
+  --ion-color-warning-contrast: #ffffff;
+  --ion-color-warning-contrast-rgb: 255, 255, 255;
+  --ion-color-warning-shade: #e0b500;
+  --ion-color-warning-tint: #ffd31a;
+
+  --ion-color-danger: #f04141;
+  --ion-color-danger-rgb: 245, 61, 61;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #d33939;
+  --ion-color-danger-tint: #f25454;
+
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 34, 34;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 244, 244;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+```
+
+For more info on theming your Ionic app, see the guide [here](/docs/theming/themes).
+
+### Wrapping up
+
+Adding Ionic React to an existing React project is fairly simple and can be done in just a few minutes.
+
+The great thing about using individual components from Ionic React is that you only import the component you need. This makes Ionic React ideal for adding it to existing projects that need to look and work great on mobile devices.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
new file mode 100644
index 00000000000..b51d449cba8
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
@@ -0,0 +1,118 @@
+# Config
+
+Ionic Configは、アプリ全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。 アプリのモード、Tabボタンのレイアウト、アニメーションなどを設定できます。
+
+## 使い方
+
+アプリのIonicの初期設定をオーバーライドするには、Ionicコンポーネント (`IonApp`を含めます)をレンダリングする前に、`@ionic/react` から `setupConfig` メソッドをインポートして呼び出します:
+
+```tsx
+setupIonicReact({
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+
+上記の例では、アプリ全体でマテリアルデザインのリップル効果を無効にし、modeをマテリアルデザインに強制しています。
+
+## 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
+
+以下は、Ionicで使用できる設定オプションのリストです。
+
+| 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.                     |
+| `toastDuration`          | `number`                                                                        | Overrides the default `duration` for all `ion-toast` components.                                         |
+| `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".               |
+| `toggleOnOffLabels`      | `boolean`                                                                       | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
new file mode 100644
index 00000000000..fb90c3e7568
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
@@ -0,0 +1,147 @@
+---
+title: React Lifecycle
+sidebar_label: ライフサイクル
+---
+
+<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>
+
+このガイドでは、Ionic ReactアプリケーションでIonicのライフサイクルイベントを利用する方法について説明します。
+
+## Ionicのライフサイクルメソッド
+
+Ionicは、アプリで利用できるいくつかのライフサイクルメソッドを提供します:
+
+| Event Name         | Description                                                          |
+|--------------------|------------------------------------------------------------------|
+| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
+| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
+
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+
+これらのメソッドにアクセスする方法は、クラスベースのコンポーネントを使用しているか、機能的なコンポーネントを使用しているかによって異なります。以下では、両方の方法について説明します。
+
+## クラスベースのコンポーネントにおけるライフサイクルメソッド
+
+クラスベースのコンポーネントでIonicのライフサイクルメソッドを使用するには、次のように `withIonLifeCycle` という higher order component (HOC) でコンポーネントをラップする必要があります:
+
+```tsx
+export default withIonLifeCycle(HomePage);
+```
+
+:::note
+`withIonLifeCycle` は `@ionic/react` からインポートします
+:::
+
+そして、クラスコンポーネントに適切なライフサイクルメソッドを追加すると、イベントが発生した時にHOCがそのメソッドを呼び出します。以下は、各ライフサイクルメソッドを実装したコンポーネント全体です:
+
+```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);
+```
+
+## Functionベースのコンポーネントにおけるライフサイクルメソッド
+
+Ionic Reactは、ファンクションコンポーネントで使用できる各ライフサイクルメソッドのフックをエクスポートします。各フックは、イベントが発生したときに呼び出すメソッドを実行します。
+
+```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
+クラスコンポーネントのように、ファンクションコンポーネントを `withIonLifeCycle` HOC でラップする必要はありません。
+:::
+
+## Reactライフサイクルメソッド
+
+Reactのすべてのライフサイクルメソッド（ `componentDidMount` 、`componentWillUnmount` など）も使用できます。 ただし、Ionic Reactはページのライフタイムを管理するため、特定のイベントが期待どおりに発生しない場合があります。 たとえば、最初にページが表示されたときは `componentDidMount` が起動しますが、ページから移動した時にIonicはページをDOMツリーに保持しているため、その後の当該ページへのアクセスでは `componentDidMount` を再度呼び出さない場合があります。 このシナリオは、Ionicライフサイクルメソッドが存在する主な理由であり、ネイティブフレームワークのイベントが発生しない場合にビューが開始および終了するときにロジックを呼び出す方法を提供します。
+
+## 各ライフサイクルメソッドのガイドライン
+
+以下は、各ライフサイクルイベントのユースケースに関するヒントです。
+
+- `ionViewWillEnter` - コンポーネントが初期化されているかどうかに関係なくビューが表示される度に `ionViewWillEnter` が呼び出されるため、サービスからデータをロードするのに適したメソッドです。
+- `ionViewDidEnter` - データのロード時に `ionViewWillEnter` を使用することでパフォーマンスの問題が発生する場合は、代わりに `ionViewDidEnter` でデータ呼び出しを行うことができます。 ただし、ページがユーザーに表示されるまでこのイベントは発生しません。そのため、ロードインジケーターまたはスケルトンスクリーンを使用して、表示が完了した後にコンテンツが不自然にフラッシュしないようにすることができます。
+- `ionViewWillLeave` - データソースからの unsubscribe など、クリーンアップに使用できます。  `componentWillUnmount` は現在のページから移動しても起動しない場合があるため、画面が表示されていないときにアクティブにしたくない場合は、クリーンアップコードをここに配置します。
+- `ionViewDidLeave` - このイベントが発生すると、新しいページに完全に移行したことがわかります。そのため、ビューが表示されているときに通常実行しないロジックはここに移動できます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
new file mode 100644
index 00000000000..bf6874715fe
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
@@ -0,0 +1,600 @@
+---
+title: React Navigation
+sidebar_label: ナビゲーション/ルーティング
+---
+
+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>
+
+このガイドでは、IonicとReactで構築されたアプリでのルーティングの仕組みについて説明します。
+
+`IonReactRouter` は一般的な [React Router](https://github.com/ReactTraining/react-router) ライブラリを内部で使用しています。Ionic と React Router を使うことで、ページ遷移がリッチなマルチページアプリをつくることができます。
+
+React Routerを使用したルーティングについて知っていることはすべて、Ionic Reactで利用することができます。Ionic Reactアプリの基本と、ルーティングがどのように機能するかを見てみましょう。
+
+## Ionic Reactにおけるルーティング
+
+これは `App` コンポーネントのサンプルで、 "/dashboard" URLへの単一ルートを定義しています。"/dashboard"にアクセスすると、 `DashboardPage` コンポーネントをレンダリングします。
+
+**App.tsx**
+
+```tsx
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/dashboard" component={DashboardPage} />
+        <Redirect exact from="/" to="/dashboard" />
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+);
+```
+
+`Route` の直後に、デフォルトの `Redirect` を定義します。これは、ユーザーがアプリのルートURL（"/"）にアクセスすると、"/dashboard" URLにリダイレクトします。
+
+リダイレクトには `exact` という prop もあります。つまり、このルートが一致するためには、URLが `from` prop（もしくは `Route` で `exact` が使われている場合の `path` prop）と正確に一致する必要があります。すべてのルートは"/"で始まるため、これがないと、このリダイレクトはすべてのルートに対してレンダリングされます。
+
+ユーザーが認証されているかどうかを確認するなど、条件に基づいてルートのrenderメソッドからプログラムでリダイレクトすることもできます:
+
+```tsx
+<Route
+  exact
+  path="/dashboard"
+  render={(props) => {
+    return isAuthed ? <DashboardPage {...props} /> : <LoginPage />;
+  }}
+/>
+```
+
+## IonReactRouter
+
+`IonReactRouter` コンポーネントは、React Routerの従来の [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) コンポーネントをラップし、アプリケーションをルーティング用にセットアップします。したがって、 `BrowserRouter` の代わりに `IonReactRouter` を使用します。任意のpropを `IonReactRouter` に渡すことができ、それらはベースとなる `BrowserRouter` に渡されます。
+
+## ルーターのネスト
+
+DashboardPage 内で、アプリのこの特定のセクションに関連するルートをさらに定義します。
+
+**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>
+  );
+};
+```
+
+ここでは、アプリの DashboardPage から更にコンポーネントが定義された2つのルートがあります。pathにはルートの全体を定義する必要があり、そのURLからこのページに到達した場合でも、 "/dashboard" を省略できないことに注意してください。 React Routerは絶対パスを必要とし、相対パスはサポートされていません。
+
+ただし、 [`match`](https://reacttraining.com/react-router/web/api/match) オブジェクトの `url` プロパティを使用して、コンポーネントをレンダリングするために match したURLを提供できます。これは、ネストされたルートを操作するときに役立ちます。
+
+```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>
+  );
+};
+```
+
+ここでは、 `match.url` には "/dashboard" の値が含まれています。これは、 `DashboardPage` のレンダリングに使用されるURLであるためです。
+
+これらのルートは `IonRouterOutlet` にグループ化されています。次に説明します。
+
+## IonRouterOutlet
+
+`IonRouterOutlet` コンポーネントは、Ionicの "ページ" をレンダリングするルートコンテナを提供します。 ページが `IonRouterOutlet` にある場合、コンテナはページ間の遷移アニメーションを制御し、ページが作成および破棄されるタイミングを制御します。これにより、ビューを切り替える際にビュー間の状態を維持できます。
+
+上記の `DashboardPage` には、ユーザーリストページと詳細ページが表示されます。 2つのページ間を移動するとき、 `IonRouterOutlet` は適切なプラットフォームページの遷移を提供し、前のページの状態をそのまま保持するため、ユーザーがリストページに戻ると、前のページと同じ状態で表示されます。
+
+`IonRouterOutlet` には、 `Route` と `Redirect` のみを含める必要があります。 他のコンポーネントは、 `Route` の結果、または `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
+
+Ionic Reactアプリでさまざまなビューにルーティングする場合、いくつかのオプションを使用できます。 ここで、 `UsersListPageはIonItem` は `IonItem` の `routerLink` prop を使用して、タップ/クリックされたときに移動するルートを指定します:
+
+**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>
+```
+
+ルーティングは可能な限り、上記の方法のいずれかを使用することをお勧めします。 これらのアプローチの利点は、両方ともアンカー（ `<a>` ）タグをレンダリングすることです。これはアプリ全体のアクセシビリティに適しています。
+
+ナビゲーションのためのプログラムオプションとして、React Routerがルート経由でレンダリングするコンポーネントに提供する [`history`](https://reacttraining.com/react-router/web/api/history) prop を使用することもできます。
+
+```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
+
+Dashboard Pageで定義された2番目のルートには、URLパラメーターが定義されています（パスの ":id" 部分）。 URLパラメーターは `path` の動的な部分であり、ユーザーが "/dashboard/users/1" などのURLに移動すると、"1" はルートがレンダリングするコンポーネント上で "id" という名前のパラメーターに保存されます。それがどのように行われるかを見てみましょう。
+
+**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>
+  );
+};
+```
+
+[`match`](https://reacttraining.com/react-router/web/api/match) prop には、URLパラメーターなど、一致したルートに関する情報が含まれます。 ここで `id` パラメータを取得し、画面に表示します。
+
+> Note: TypeScriptインターフェイスを使用して props オブジェクトを厳密に入力する方法に注意してください。 このインターフェースにより、コンポーネント内部でタイプセーフティとコード補完が可能になります。
+
+## 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
+
+Tabビューで作業する場合、Ionic Reactには、どのビューがどのTabに属しているかを判断する方法が必要です。これは、 `Route` に提供されるパスが正規表現であるという事実を利用することにより実現します。
+
+この構文は少し不思議に見えますが、理解すればかなり簡単です。
+
+例えば、2つのタブ (sessions と speakers) をもつビューのルートは次のように設定できます:
+
+```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>
+```
+
+ナビゲートされたURLが "/sessions" の場合、最初のルートと一致します。 "tab" というURLパラメーターに "sessions" の値を格納して、 `match` オブジェクトに `SessionsPage` として追加します。
+
+ユーザーがセッションの詳細ページ（たとえば "/sessions/1" ）に移動すると、2番目のルートは "tabs" というURLパラメーターに "sessions" という値を追加します。 `IonRouterOutlet` は、両方のページが同じ "sessions" タブにあることを認識すると、新しいビューへのアニメーションページ遷移を提供します。 ユーザーが新しいタブ（この場合は "speakers" ）に移動すると、 `IonRouterOutlet` はアニメーションを提供しないことを認識します。
+
+### IonRouterOutletの `Switch`
+
+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`.
+
+## 更に知りたい場合
+
+React Routerを使用したReactでのルーティングの詳細については、次の [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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overlays.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overlays.md
new file mode 100644
index 00000000000..d7285f1e7d9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
new file mode 100644
index 00000000000..a9ad0ccd6df
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
@@ -0,0 +1,45 @@
+# Ionic Reactの概要
+
+`@ionic/react` はIonic Coreに、React開発者向けにカスタマイズされたツールとAPIを組み合わせたものです。
+
+:::note
+The first official version of Ionic React is v4.11.
+:::
+
+最初に、Ionic CLIをインストールします:
+
+```shell
+npm install -g @ionic/cli
+```
+
+そして、次のコマンドを実行します:
+
+```shell
+ionic start myAppName
+```
+
+CLIは、使用するフレームワーク(もちろんReact!)と利用するスターターテンプレートを含むいくつかの質問をすることで、セットアップ・プロセスを案内します。
+
+アプリを作成したら、アプリを起動します:
+
+```shell
+ionic serve
+```
+
+もう [Ionic UI components](../components.md) を使ってアプリの開発をはじめることができます。
+
+## Reactバージョンサポート
+
+Reactバージョン16.8以降と互換性があります。
+
+## Reactツール
+
+Ionic ReactプロジェクトはReactプロジェクトそのものようなもので、 [react-dom](https://reactjs.org/docs/react-dom.html) を活用して,一般的な [Create React App (CRA)](https://github.com/facebook/create-react-app) のセットアップを利用しています。 [routing and navigation](navigation.md) では、React Routerを内部で使用します。
+
+1つの違いは、 [TypeScript](http://www.typescriptlang.org/) を使用することで、生産性が向上していることです。プレーンJavaScriptを使用するには、ファイル名を `.js` に変更します。次に、各ファイルの型注釈を削除します。
+
+## ネイティブツール
+
+[Capacitor](https://capacitorjs.com) は `Ionic React` でつくられたWebアプリを、iOS、Android、Electronと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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md
new file mode 100644
index 00000000000..b36c915b424
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: パフォーマンス
+title: React パフォーマンス
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
new file mode 100644
index 00000000000..8f83ee4a7f6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
@@ -0,0 +1,84 @@
+# Platform
+
+## isPlatform
+
+`isPlatform` メソッドを使用して、アプリが特定のプラットフォームで実行されているかどうかを確認できます:
+
+```tsx
+import { isPlatform } from '@ionic/react';
+
+isPlatform('ios'); // iOSデバイスで実行されてる時は true を返します
+```
+
+ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPadから実行するアプリは、mobile、ios、ipad、およびtabletのプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordovaもtrueになります。
+
+## getPlatforms
+
+`getPlatforms` メソッドを使用して、アプリが現在実行されているプラットフォームを判別できます。
+
+```tsx
+import { getPlatforms } from '@ionic/react';
+
+getPlatforms(); // iPhoneの場合 ["iphone", "ios", "mobile", "mobileweb"] を返します
+```
+
+
+使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhoneでは、mobile、ios、およびiphoneが返されます。
+
+## Platforms
+
+次の表に、使用可能なすべてのプラットフォーム値とその説明を示します。
+
+| 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](../developing/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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
new file mode 100644
index 00000000000..3e3fe7259eb
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
@@ -0,0 +1,176 @@
+---
+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."
+  />
+</head>
+
+## Making your React app a PWA with Vite
+
+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 Application Manifest</a>. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead.
+
+To get started, install the `vite-plugin-pwa` package:
+
+```shell
+npm install -D vite-plugin-pwa
+```
+
+Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
+
+```javascript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({ registerType: 'autoUpdate' })
+  ],
+})
+```
+
+This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
+
+For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/).
+
+See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA.
+
+## Making your React app a PWA with Create React App
+
+:::note
+As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create React App. See [Making your React app a PWA with Vite](#making-your-react-app-a-pwa-with-vite) for Vite instructions.
+:::
+
+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 Application 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.
+
+PWAの主な要件は、 <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> と <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a> の2つです。これらの両方を手動でアプリに追加することは可能ですが、Create React App (CRA)とIonic CLIのベースプロジェクトがこれらをすでに提供しています。
+
+アプリケーションの  `index.ts` には、`serviceWorker.unregister()` 関数の呼び出しがあります。基本CRAが提供するservice workersはオプトイン機能なので、有効にする必要があります。
+有効にするには、`serviceWorker.register ()`を呼び出します。
+
+```ts
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// 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://cra.link/PWA
+serviceWorkerRegistration.register();
+```
+
+このパッケージを追加したら、 `ionic build` を実行し、 `build` ディレクトリをPWAとしてデプロイする準備ができます。
+
+:::note
+デフォルトでは、Reactアプリのパッケージには、アプリアイコン用のIonicロゴが付属しています。正しいアプリケーション名を使用するようにmanifestを更新し、アイコンを置き換えてください。
+:::
+
+:::note
+Service Workersや多くのJavaScript API (位置情報など)のような機能は、セキュアなコンテキストでアプリをホストする必要があります。ホスティングサービスを介してアプリケーションを配備する場合は、Service Workersを最大限に活用するためにHTTPSが必要になることに注意してください。
+:::
+
+<<<<<<< HEAD
+## Service Workerの設定
+=======
+### Service Worker configuration
+>>>>>>> 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
+
+デフォルトでは、CRA/React Scriptには [WorkboxのWebpackプラグイン](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいて事前設定されたService Workerセットアップが付属しています。これはキャッシュファースト戦略を利用しており、ネットワークが新しいバージョンのアプリを返しても、アプリはキャッシュからロードされます。
+
+CRA/React Scriptsの性質上、この設定はReact Scriptsの内部で行われるため、React Scriptsから抽出しない限りはカスタマイズできません。現在、Ionic CLIはReact Appのイジェクトをサポートしていないため、このアクションを実行する場合は、Ionic CLIの代わりにnpm/yearスクリプトを使用する必要があります。
+
+<<<<<<< HEAD
+## デプロイ
+=======
+### Deploying
+>>>>>>> 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
+
+#### Firebase
+
+FirebaseホスティングはProgressive Web Appsに多くの利点を提供しており、CDNによる高速応答、デフォルトで有効になっているHTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
+
+まず、まだ使用していない場合は、Firebaseで [プロジェクトを作成](https://console.firebase.google.com) します。
+
+次にターミナルでFirebase CLIをインストールします:
+
+```shell
+npm install -g firebase-tools
+```
+
+Firebase CLIをインストールした状態で、Ionicプロジェクト内で `firebase init` を実行します。CLI上で様々な確認を行っていきます:
+
+**"Which Firebase CLI features do you want to set up for this folder?"** "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
+
+**"Select a default Firebase project for this directory:"** FirebaseのWebサイト上で作成したプロジェクトを選択します。
+
+**"What do you want to use as your public directory?"** "dist" を選択ください。
+
+:::note
+次の2つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
+:::
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** "Yes" を選択します.
+
+**"File dist/index.html already exists. Overwrite?"** "No" を選択します。
+
+`firebase.json` という設定ファイルが生成されるので、アプリの設定にあわせて変更します。
+
+最後に、キャッシング・ヘッダーが正しく設定されていることを確認する必要があります。これを行うには、 `headers` スニペットを `firebase.json` に追加します。完全な`firebase。json`は次のようになります:
+
+```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"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+より詳しい `firebase.json` についての設定は [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json) を参照ください。
+
+次に、次のコマンドを実行して、アプリケーションの最適化バージョンを構築します:
+
+```shell
+ionic build --prod
+```
+
+最後に、アプリをデプロイします:
+
+```shell
+firebase deploy
+```
+
+これが完了すると、アプリがライブになります。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
new file mode 100644
index 00000000000..ca786265a2d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
@@ -0,0 +1,454 @@
+---
+title: Ionic Reactクイックスタート
+sidebar_label: クイックスタート
+---
+
+<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>
+
+## Ionic Frameworkとは
+
+まず、ここに来たばかりの人を歓迎します！Ionic Frameworkは、 iOS, Android, Electron, Web上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
+
+UIコンポーネントに加えて、Ionic Frameworkは新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
+
+このガイドでは、Ionic Framework特有の機能を含め、ReactとIonic Frameworkの基本について説明します。Reactに精通している方は、ガイドを楽しみ、Ionic Frameworkについて新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
+
+## Ionic CLIを使ったプロジェクト新規作成
+
+はじめに、Ionic CLIの最新版をインストールしましょう。
+
+```shell
+npm install -g @ionic/cli
+```
+
+これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Frameworkと他の依存関係を持つReactプロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
+
+```shell
+ionic start myApp blank --type=react
+cd myApp
+```
+
+これで、 `ionic serve` を実行することによって、プロジェクトをブラウザで実行することができます。
+
+## Reactコンポーネントの確認
+
+アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `index.tsx` になります。エディタでプロジェクトを開き、`index.tsx` を確認すると、次のように表示されます:
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+ここでは何が処理されてるでしょう。最初の3行はいくつかの依存関係をimportしています。1つ目はReact自身です。これにより、JSXと呼ばれるHTMLに似た構文でコンポーネントを記述できるようになります。JSXについては後ほど説明します。
+
+2番目のimportはReactDOMです。 `ReactDOM.render` メソッドは、コンポーネントを取得し、指定されたDOMノードにレンダリングするためのbrowser/DOM固有の方法です。
+
+最後のインポートは、単純に `App` という名前のアプリケーションのルートコンポーネントです。これは私たちの最初のReactコンポーネントであり、Reactアプリの起動処理で使用されます。
+
+`App.tsx` を開くと、以下のコードが確認できます。
+
+```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>
+);
+```
+
+一見、多くのことが起こっているように見えるかもしれないので、最初のimportからみていきましょう。
+
+```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';
+```
+
+`index.tsx` に似ていますが、まずReactをインポートしてJSXを使用できるようにする必要があります。
+
+次のインポートは `react-router-dom` からです。Routeをインポートし、アプリのURLとレンダリングしたいコンポーネントをマッチさせます。
+
+ReactRouterに続いて、Ionicをimportします。Reactでコンポーネントを使用する前にimportする必要があります。Ionicの場合、ButtonやCardを使いたい時はいつもimportしなければなりません。Appコンポーネントの場合は、 `IonApp`、 `IonRouterOutlet` 、および `IonReactRouter` を使用します。
+
+`IonReactRouter` は、ReactRouterのBrowserRouterコンポーネントをラップするコンポーネントです。多少の違いはありますが、BrowserRouterと同じように動作します。これらの違いについては、 [React Navigation Docs](navigation.md) で詳しく説明しています。
+
+最後の重要なインポートは `Home` コンポーネントのインポートです。これは、このアプリケーションでナビゲートできるコンポーネントです。ナビゲーション部分については、後で説明します。
+
+CSSのimportはIonicからpaddingやtypographyなどのユーティリティスタイルを取り込んでいます。
+
+すべてのimportを確認したので、続いて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>
+);
+```
+
+このReactコンポーネントは、アプリの初期ルーティングをセットアップし、アニメーションとレイアウトのためのいくつかの重要なIonicコンポーネントを含んでいます(IonRouterOutletとIonApp)。一見変わった書き方にみえますが、Reactではデータバインディングを行うために、値が中括弧 (`{}`) で渡されることに注目してください。つまり `Route` コンポーネントでは、 `component` の値を以前の `Home` コンポーネントに設定しています。これにより、Reactはその値が文字列ではなくコンポーネントへの参照であることを認識します。
+
+:::note
+ここで重要なのは、これらはすべて標準のReact DOMライブラリであり、カスタムの統合レイヤや変換ステップがないことです。
+:::
+
+## コンポーネントのスタイル
+
+`App` を変更することはあまりありません。これは、コンテナ・コンポーネントの基本的な例です。Routerのロジックでは、指定されたURLルートに一致するコンポーネントをレンダリングするだけです。すでに1つのコンポーネント/ルータが設定されているので、`Home` コンポーネントを変更します。
+
+現在、 `Home` コンポーネントはこうなっています:
+
+![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>
+  );
+};
+```
+
+最初の `App` コンポーネントと同じように、特定のIonicコンポーネントのimport、Reactコンポーネントのimport、そしてReactコンポーネント自体のimportがあります。
+
+`IonPage` は、すべてのページ(ルート/URLを持つコンポーネント)のベースコンポーネントであり、Header、Title、Contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素を含んでいます。
+
+:::note
+独自のページを作成するときは、 `IonPage` をそのルートコンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、トランジションが正しく動作することを保証し、Ionicコンポーネントが依存するベースCSSを提供するために重要です。
+:::
+
+`IonHeader` は、ページの先頭に存在することを意図したコンポーネントです。`IonHeader` 自体は、いくつかのflexboxのレイアウトを処理する以外は、ほとんど何もしません。これは、`IonToolbar` や `IonSearchbar` などの他のコンポーネントを保持するためのものです。
+
+`IonContent` はその名の通り、私たちのページのメインコンテンツ領域です。ユーザーが操作するスクロール可能なコンテンツと、アプリで使用できるスクロールイベントを提供する責任をもっています。
+
+私たちの現在のコンテンツは比較的シンプルが、実際のアプリで使えるようなものは何も含まれていません。
+
+:::note
+簡潔にするために、他のコンポーネントの関数宣言やimport文など、コンポーネントの繰り返し部分を除外しています。
+:::
+
+```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>
+```
+
+この `IonContent` では、 `IonList` と、さらに複雑な `IonItem`  コンポーネントを追加します。ここでは `IonItem`  を中心に見ていきます。
+
+```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はReactの概念とWeb Componentの概念が混在していることを明確に示す重要な要素です。Reactの概念の最初の明確な例は、 `IonCheckbox` のReactコンポーネントの自己終了タグです。これは、子コンテンツを含まないコンポーネントを記述する単純な方法です。
+
+Webコンポーネント側には、 `slot` という特殊な属性があります。これは、レンダリング時に `IonItem` に `IonCheckbox` を配置する場所を知らせるためのキーです。これはReact APIではなく、Web標準APIです。
+
+Ionic Frameworkの別のコンポーネントであるFAB（フローティング・アクション・ボタン）を見てみましょう。FABは、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。このFABには、FAB、FABボタンおよびアイコンの3つのコンポーネントが必要です。
+
+```tsx
+import { add } from ‘ionicons/icons’;
+…
+
+<IonContent>
+  <IonList>
+  ...
+  </IonList>
+
+  <IonFab vertical="bottom" horizontal="end" slot="fixed">
+    <IonFabButton>
+      <IonIcon icon={add} />
+    </IonFabButton>
+  </IonFab>
+
+</IonContent>
+```
+
+メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
+
+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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. 
+
+```tsx
+import { add } from 'ionicons/icons';
+import { useHistory } from 'react-router';
+...
+const Home: React.FC<RouteComponentProps> = () => {
+  const history = useHistory();
+  return (
+    <IonPage>
+      <IonHeader>...</IonHeader>
+      <IonContent>
+        <IonList>...</IonList>
+        <IonFab vertical="bottom" horizontal="end" slot="fixed">
+          <IonFabButton onClick={() => history.push('/new')}>
+            <IonIcon icon={add} />
+          </IonFabButton>
+        </IonFab>
+      </IonContent>
+    </IonPage>
+  );
+}
+export default Home;
+```
+
+コンポーネント宣言では、`RouteComponentProps` 型 (`react-router` からimport)の `props` を渡しています。この `props`オブジェクトは、React Routerから履歴APIへのアクセスを提供し、新しいルートをナビゲーション・スタックにプッシュできるようにします。`IonFabButton` では、クリックハンドラーを追加し、 `props.history.push` を呼び出して新しいルートを渡すだけです。この場合は、 `new` に移動します。
+
+```tsx
+<IonFabButton onClick={() => props.history.push('/new')} >
+```
+
+## 新しいRouteの作成
+
+これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しいrouteをルーターの宣言に追加する必要があります。 `App.tsx` を開いて、 `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;
+```
+
+ルータにroute `/new` のエントリが追加されたので、必要なコンポーネント `NewItem` を作成します。これは `src/pages/NewItem.tsx` にあります。
+
+とりあえず、 `NewItem.tsx` にプレースホルダの内容を入力してみましょう。
+
+```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.
+:::
+
+ここの内容は非常に単純で、 `Home` コンポーネントに似ているはずです。新しいのは `IonBackButton` コンポーネントです。これは、前のルートに戻るために使用されます。まっすぐ前に?では、ページをリロードしたらどうなりますか?
+
+この場合、メモリ内の履歴が失われるため、戻るボタンが消えます。これに対処するには、 `defaultHref` 属性値を、履歴がない場合にナビゲートするURLに設定します。
+
+```tsx
+return (
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton defaultHref="/home" />
+        </IonButtons>
+        <IonTitle>New Item</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent />
+  </IonPage>
+);
+```
+
+ここでリロードすると、アプリの履歴がなければ、ホームルートに戻ることができます。
+
+## 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
+
+UIコンポーネントやナビゲーションなど、Ionic Reactアプリの基本的な部分はすでに完成しています。Ionic Frameworkのコンポーネントの素晴らしいところは、iOS、Android、PWAを含むどこでも動作することです。モバイル、デスクトップ、その他にもデプロイするために、Ionicのクロスプラットフォームライブラリ [Capacitor](https://capacitorjs.com) を使用することができます。一貫性のあるWebに特化したAPIセットを提供することで、 Web標準をサポートするプラットフォーム上の豊富なネイティブデバイス機能にアクセスしながら、アプリケーションを可能な限りWeb標準に近づけることが可能になります。
+
+ネイティブ機能を追加するのは簡単で、最初にプロジェクトにCapacitorを追加します:
+
+```shell
+ionic integrations enable capacitor
+```
+
+次に、プロジェクトをビルドしてから利用するプラットフォームを選択します:
+
+```shell
+ionic build
+ionic cap add ios
+ionic cap add android
+```
+
+iOSとAndroidのプロジェクトを開いたり、ビルド、実行するのに、ネイティブのIDE(Xcode と Android Studio)を使います:
+
+```shell
+ionic cap open ios
+ionic cap open android
+```
+
+詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
+
+次に、 [すべての利用可能なAPIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
+
+```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;
+```
+
+## 次にすること
+
+このガイドでは、Ionic Reactアプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としてのCapacitorの紹介について説明した。ReactとCapacitorで完全なIonicアプリを作るには、[First App guide](your-first-app.md)を参照してください。
+
+Ionicのコンポーネントの詳細は [component API pages](https://ionicframework.com/docs/components) をチェックしてほしい。Reactの詳細については、 [React Docs](https://reactjs.org/) を参照ください。ネイティブ機能の構築を続けるには、 [Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
+
+アプリ構築をお楽しみください! 🎉
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md
new file mode 100644
index 00000000000..b8d88392314
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md
@@ -0,0 +1,569 @@
+---
+title: Migrating From IonSlides to Swiper.js
+---
+
+<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.
+
+:::note
+Swiper's React component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
+
+Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
+:::
+
+## 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@latest
+```
+
+:::note
+Developers using Create React App must use `react-scripts` v5.0.0+ with the latest version of 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 `IonSlides`.
+
+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/css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    ...
+  );
+};
+export default Home;
+```
+
+:::note
+Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
+### 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/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/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`:
+
+```tsx
+import React from 'react';
+import { IonContent, IonPage } from '@ionic/react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/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;
+```
+
+## 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.
+
+`IonSlides` 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';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+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/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;
+```
+
+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';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+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/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';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+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/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 `IonSlides`, 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. However, using this module is **not** required to use Swiper.js in Ionic.
+
+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';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+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/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 can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#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';
+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:
+
+| IonSlides 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';
+
+import 'swiper/css';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper modules={[EffectFade, 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';
+
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper modules={[EffectFade, IonicSlides]}>
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+        </Swiper>
+      </IonContent>
+    </IonPage>
+  );
+};
+export default Home;
+```
+
+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';
+
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import '@ionic/react/css/ionic-swiper.css';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent>
+        <Swiper modules={[EffectFade, IonicSlides]} effect="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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/storage.md
new file mode 100644
index 00000000000..ea044c7ccc6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md
new file mode 100644
index 00000000000..c40482a29f6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md
@@ -0,0 +1,7 @@
+---
+sidebar_label: テスト
+---
+
+# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md
new file mode 100644
index 00000000000..8e72abb6361
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md
@@ -0,0 +1,76 @@
+# 仮想スクロール
+
+:::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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md
new file mode 100644
index 00000000000..6a41f3df0bd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md
@@ -0,0 +1,204 @@
+---
+title: 'はじめてのIonicアプリ: React'
+sidebar_label: はじめてのアプリ
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..9b361758b68
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md
@@ -0,0 +1,146 @@
+---
+title: 写真をカメラを使って撮影する
+sidebar_label: カメラ撮影
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..e005724c4ad
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md
@@ -0,0 +1,81 @@
+---
+sidebar_label: 写真の保存
+---
+
+# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md
new file mode 100644
index 00000000000..9a7119a5f7a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md
@@ -0,0 +1,65 @@
+---
+title: ファイルシステムからの写真の読み込み
+sidebar_label: 写真の読み込み
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md
new file mode 100644
index 00000000000..bc498de2c22
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md
@@ -0,0 +1,73 @@
+---
+sidebar_label: 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md
new file mode 100644
index 00000000000..eb5cf411a1e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md
@@ -0,0 +1,107 @@
+---
+sidebar_label: モバイルへのデプロイ
+---
+
+# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md
new file mode 100644
index 00000000000..8ae2a7adcdb
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md
@@ -0,0 +1,120 @@
+---
+sidebar_label: ライブリロード
+---
+
+# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/8-distribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..74966e8de58
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
new file mode 100644
index 00000000000..1b11c8063b2
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
@@ -0,0 +1,47 @@
+---
+title: ブラウザサポート
+---
+
+<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の本来の目標は、HTML、CSS、JavaScriptといったWeb技術を使用してモバイルアプリを開発することを簡単にすることでした。Ionicはこのウェブテクノロジーの基盤により、ウェブ、iOS、Android、ブラウザ、PWAなど、どこでも実行できます。
+
+## モバイルブラウザ
+
+[スタイルの適用](../core-concepts/fundamentals.md#adaptive-styling)を追求するために, Ionicは以下のモバイルプラットフォームを完全にサポート、テストしています。:
+
+| 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
+最新のプラットフォームの情報については [latest Android stats](https://developer.android.com/about/dashboards/) と [latest iOS stats](https://developer.apple.com/support/app-store/) をご確認ください。
+:::
+
+### Android Supportの注意点
+
+Android 5.0から、WebviewはAndroidから独立して更新できる別のアプリケーションに移されました。これは、ほとんどのAndroid 5.0以上のデバイスがChromiumの最新バージョンを実行していることを意味します。しかし、ウェブビューを更新することができないAndroidデバイスがまだ存在しています。これらのウェブビューは、通常、デバイスが最初に出荷されたときに利用可能だったバージョンに留まっています。
+
+デバイスが実行しているWebViewのバージョンを調べるには、Chrome Dev Toolsを使用してアプリケーションを検査する際に、コンソールに`window.navigator.userAgent`を記録してください。
+
+## デスクトップブラウザ
+
+Ionicはウェブ技術をベースにしているため、モバイルデバイスと同じようにデスクトップブラウザーでも動作します。デスクトップのレイアウトについては、[クロスプラットフォーム](../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** | 70+      | 63+      | ✔        | ✔        |
+|  **IE 11**  | **X**    | **X**    | **X**    | **X**    |
+
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
new file mode 100644
index 00000000000..9b10bc85e54
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
@@ -0,0 +1,553 @@
+---
+title: 用語集
+---
+
+<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>{' '}
+    は、Google の Android Platform の開発をする開発者向けに作られたソフトウェア開発キットです。
+    Android アプリケーションのビルド、テスト、デバッグ用のツールが含まれています。
+  </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>{' '}
+    は、ネイティブ Android アプリ開発のための正式な統合開発環境（IDE）である。
+  </p>
+</section>
+
+<section id="autoprefixer">
+  <a href="#autoprefixer">
+    <h3>Autoprefixer</h3>
+  </a>
+  <p>
+    <a href="https://github.com/postcss/autoprefixer" target="_blank">
+      Autoprefixer
+    </a>{' '}
+    は、ベンダー固有のプレフィックスを手書きの Sass/CSS コードに追加するツールです。
+    これにより、作成する標準化された CSS ルールが、サポートするすべてのブラウザに確実に適用されます。
+    たとえば、autoprefixer を使用すると、さまざまなブラウザで使用されるすべての flexbox 構文を知る必要がなく、
+    <code>display: flex;</code> と記述するだけで済み、かつ自動的に正しくCSSに差し込まれます。
+  </p>
+</section>
+
+<section id="bundling">
+  <a href="#bundling">
+    <h3>Bundling</h3>
+  </a>
+  <p>
+    バンドルとは、アプリケーションの依存関係（自分で書いたコードと任意にインストールされている npm モジュール）を取得し、
+    コンパイル/トランスパイルすることで一つのファイルに落とし込むプロセスです。
+  </p>
+</section>
+
+<section id="capacitor">
+  <a href="#capacitor">
+    <h3>Capacitor</h3>
+  </a>
+  <p>
+    <a href="https://capacitorjs.com/" target="_blank">
+      Capacitor
+    </a>{' '}
+    は、web ベースのアプリケーションをネイティブの iOS、Android、Electron、web上で実行できるようにするオープンソースの
+    クロスプラットフォームアプリランタイムです。
+    「ネイティブのプログレッシブ Web アプリケーション」を示すこれらのアプリはとても参考になり、
+    それらは従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitor は Ionic 社によって作られ、活発に開発/サポートされています。
+  </p>
+</section>
+
+<section id="cli">
+  <a href="#cli">
+    <h3>CLI</h3>
+  </a>
+  <p>
+    CLI、または <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface はプログラムと互いに作用し合う、
+    テキストベースのインターフェースです。Mac ユーザの共通のコマンドラインアプリケーションは
+    Terminal アプリケーションであり、Windows ユーザによく使われるものはコマンドプロンプトです。
+    Ionic コミュニティでよく使われるものは、次に示すこの{' '}
+    <a href="https://ionicframework.com/docs/v1/cli/">Ionic's CLI</a> というターミナルです。Ionic's CLI は、
+    アプリケーションのプロダクションビルドの生成や、開発用のサーバーの起動、
+    <a href="https://ionic.io/appflow" target="_blank">Ionic の商用サービス</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>{' '}
+    は JavaScript の標準化団体が定義した API の集合です。彼らは JavaScript のモジュールと
+    パッケージの標準を定義しました。
+  </p>
+</section>
+
+<section id="cordova">
+  <a href="#cordova">
+    <h3>Cordova</h3>
+  </a>
+  <p>
+    <a href="https://cordova.apache.org" target="_blank">
+      Apache Cordova
+    </a>{' '}
+    は、標準の HTML/CSS/JS を本格的なネイティブアプリケーションに変換する、オープンソースのモバイルアプリケーション開発用フレームワークです。
+    実機のカメラや加速度計などのネイティブの機能にアクセスする JavaScript API を提供します。
+    Cordova は、ウェブアプリケーションを iOS、Android、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) は、サーバがクライアントから Web 資産へのアクセスを制御するメカニズムです。 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>
+    デコレータは、関数を返す式です。既存の関数を使用して、その動作を拡張できます。
+    TypeScript では、<i>クラス</i> や <i>パラメータ</i> を装飾することもできます。
+    <strong>クラス</strong> を装飾すると、そのコンストラクタの動作がラップおよび拡張されます。
+    つまり、デコレータはコンストラクタが呼び出されるといくつかの機能を追加し、独自のコンストラクタを返します。
+    <strong>パラメータ</strong> を修飾すると、
+    そのパラメータに渡される引数がラップされます。
+    デコレータは、引数がメソッドに渡されると機能を追加し、独自の引数を返します。
+  </p>
+</section>
+
+<section id="es5">
+  <a href="#es5">
+    <h3>ES5</h3>
+  </a>
+  <p>
+    ES5 とは EcmaScript 5th Edition のことです。
+    簡単に言えば、ES5 は今日開発者が最もよく知っている JavaScript のバージョンのことです。
+  </p>
+</section>
+
+<section id="es2015-es6">
+  <a href="#es2015-es6">
+    <h3>ES2015/ES6</h3>
+  </a>
+  <p>
+    このバージョンの JavaScript には、クラス、モジュール、イテレーター、Promise など、
+    広範囲の新機能が導入されています。Evergreen のブラウザ(Chrome、Safari、Firefox、Edge)は
+    ES6 を完全にサポートしていますが、古いブラウザで ES6 の機能を使うには、<a href="#babel">Babel</a> や
+    <a href="#typescript">TypeScript</a> のようなツールが ES6 のコードを ES5 に<a href="#transpiler">変換</a>する必要があります。
+  </p>
+</section>
+
+<section id="es2016-es7">
+  <a href="#es2016-es7">
+    <h3>ES2016/ES7</h3>
+  </a>
+  <p>
+    このバージョンの JavaScript は、<code>Array.includes</code> や
+    指数演算子を含む多くの新機能を言語に追加した。このバージョンのJavaScriptは、すべてのEvergreenのブラウザ(Chrome、Safari、Firefox、Edge)で
+    完全にサポートされています。
+  </p>
+</section>
+
+<section id="es2017-es8">
+  <a href="#es2017-es8">
+    <h3>ES2017/ES8</h3>
+  </a>
+  <p>
+    このバージョンの JavaScript は最新の標準です。これは新しい公式規格になる前の最終段階にある。
+    この仕様には、Async/Await(既に全ての Evergreen のブラウザ上で可)と共有メモリ/アトミックが含まれています。
+  </p>
+</section>
+
+<section id="genymotion">
+  <a href="#genymotion">
+    <h3>Genymotion</h3>
+  </a>
+  <p>
+    Genymotion はサードパーティーの Android エミュレータです。
+    非常に高速で、Android 上でアプリを素早くテストするのに便利だ。
+    詳しくは、Genymotion の<a href="../developing/tips#using-genymotion-android">リソースのセクション</a>を参照してください。
+  </p>
+</section>
+
+<section id="git">
+  <a href="#git">
+    <h3>Git</h3>
+  </a>
+  <p>
+    <a href="https://git-scm.com/" target="_blank">
+      Git
+    </a>{' '}
+    は、コードを管理するための分散バージョン管理システムです。これにより、開発チームはコードの競合を引き起こすことなく、
+    同じプロジェクトのコードに貢献できます。
+  </p>
+</section>
+
+<section id="gulp">
+  <a href="#gulp">
+    <h3>Gulp</h3>
+  </a>
+  <p>
+    <a href="http://gulpjs.com/" target="_blank">
+      Gulp
+    </a>{' '}
+    は、アプリケーションをビルドするためのタスクを実行するために使用されるツールです。一般的なビルドタスクには、{' '}
+    <a href="#es2015-es6">ES6</a> から <a href="#es5">ES5</a>, <a href="#sass">Sass</a> から CSSへの変換、
+    コードの縮小、ファイルの連結などがあります。
+  </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>{' '}
+    はモジュールの概念を JavaScript にそのまま持ち込んだものになります。
+    モジュールでは、クラスと変数はグローバルスコープ内にないため、使用するには明示的にプロジェクトにインポートする必要があります。
+    これにより、コードがどこから来ているのかを理解しやすくなり、機能のモジュール化と区分化が進みます。
+  </p>
+</section>
+
+<section id="ionicons">
+  <a href="#ionicons">
+    <h3>Ionicons</h3>
+  </a>
+  <p>
+    <a href="https://ionic.io/ionicons/" target="_blank">
+      Ionicons
+    </a>{' '}
+    は Ionic社によって作成・利用されているオープンソースのアイコンのセットです。
+    1:1 で iOS とマテリアルデザインのアイコンと、よく使われるソーシャル/アプリケーションのアイコンを含みます。
+    Ionicons はデフォルトで Ionic ディストリビューションに含まれますが、任意のプロジェクトでも使うことが出来ます。
+  </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>{' '}
+    は、実際にブラウザ上でアプリケーションのテストを実行するテストランナーです。任意のテストフレームワークで書かれたテストケースを、
+    実際にブラウザで実行します。Karma はもともと Angular 1 用に書かれたものです。
+  </p>
+</section>
+
+<section id="module">
+  <a href="#module">
+    <h3>Module</h3>
+  </a>
+  <p>
+    JavaScript のモジュールは、小さく独立しており、再利用可能なピースか互いに分離したコードであり、
+    グローバルスコープです。
+  </p>
+</section>
+
+<section id="monorepo">
+  <a href="#monorepo">
+    <h3>Monorepo</h3>
+  </a>
+  <p>
+    A <strong>monorepo</strong> は複数のプロジェクトを持つ単一のgit リポジトリです。利点としては、よりシンプルな構成、
+    ツールと依存関係の共有、チームメイトとのより良いコラボレーションが挙げられます。
+  </p>
+</section>
+
+<section id="livereload">
+  <a href="#livereload">
+    <h3>Live Reload</h3>
+  </a>
+  <p>
+    <strong>Live Reload</strong> (or <strong>live-reload</strong>) は、アプリケーションの変更を検出すると、
+    自動的にブラウザまたは{' '} <a href="../core-concepts/webview">Web View</a> をリロードするツールです。場合によっては、ウィンドウ全体をリロードしなくても、
+    アプリケーションの一部を置き換えることができます。ライブリロード には実行中の開発サーバーが必要なので、Web View にはデプロイされたファイルを単に読むのではなく、URLをロードする必要があるため、別のデバイスでライブリロードを使用するのは難しいかもしれません。詳しくは{' '}
+    <a href="../cli/livereload">Live Reload docs</a> を御覧ください。
+  </p>
+</section>
+
+<section id="node">
+  <a href="#node">
+    <h3>Node</h3>
+  </a>
+  <p>
+    <a href="https://nodejs.org/" target="_blank">
+      Node
+    </a>{' '}
+    は、サーバサイドで JavaScript を書くことができるランタイム環境です。
+    加えて、Node は Web サービスに使用されるだけでなく、<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>{' '}
+    は <a href="#node">node</a> のパッケージマネージャです。これにより、開発者はノードモジュールをインストール、
+    共有、およびパッケージ化できます。Ionic は npm からいくつかの依存関係と一緒にインストールすることができます。
+  </p>
+</section>
+
+<section id="observable">
+  <a href="#observable">
+    <h3>Observable</h3>
+  </a>
+  <p>
+    Observable はイベントを発生(または通知)させるオブジェクトです。
+    オブザーバは、これらのイベントを監視し、イベントが受信されたときに何かを実行するオブジェクトです。
+    これらが一緒になって、非同期プログラミングに使用できるパターンを作成します。
+  </p>
+</section>
+
+<section id="package-id">
+  <a href="#package-id">
+    <h3>Package ID</h3>
+  </a>
+  <p>
+    Apple 社が <strong>Bundle ID</strong> と呼び、Android 社が <strong>Application ID</strong> と呼ぶ
+    <strong>Package ID</strong> は、App Store/Play Store に公開されたアプリを識別するために使用されます。
+    これは
+    <a href="https://en.wikipedia.org/wiki/Reverse_domain_name_notation" target="_blank">
+      逆 DNS 表記
+    </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>{' '}
+    は、ブラウザに機能を追加し、ブラウザの違いを標準化する少しのコードです。これは <a href="#shim">shim</a> と似ていますが、
+    shim に独自の API がある場合には、ブラウザに実装されていることを期待する API として polyfill を使用します。
+  </p>
+</section>
+
+<section id="protractor">
+  <a href="#protractor">
+    <h3>Protractor</h3>
+  </a>
+  <p>
+    <a href="https://angular.github.io/protractor/#/" target="_blank">
+      Protractor
+    </a>{' '}
+     Angular チームが開発したテストフレームワークです。Protractor は、エンドツーエンドのテストのために、
+     Karma のようなテストランナーと一緒に使うことができます。テストランナーを使用すると、コードの品質を高速かつプログラム的に検証できます。
+  </p>
+</section>
+
+<section id="sass">
+  <a href="#sass">
+    <h3>Sass</h3>
+  </a>
+  <p>
+    Sass は CSS にコンパイルされるスタイルシート言語で、Ionicで使用されています。
+    Sass は CSS に似ています: {' '}
+    <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_" target="_blank">
+      変数
+    </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>
+    Shim は、ブラウザ間で API を正規化するコードです。
+    Shim は、エンドユーザーからブラウザ固有の実装を隠すような独自の API を持つことができます。
+  </p>
+</section>
+
+<section id="transpiler">
+  <a href="#transpiler">
+    <h3>Transpiler</h3>
+  </a>
+  <p>
+    トランスパイル は、実行前にコードをある言語から別の言語に変換するプロセスです。一般的に、トランスパイルは高級言語を別の高級言語に変換します。
+    Ionic Framework の最も一般的な{' '}
+    <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>
+    (<a href="#typescript">TypeScript</a>) から <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
+  </p>
+</section>
+
+<section id="typescript">
+  <a href="#typescript">
+    <h3>TypeScript</h3>
+  </a>
+  <p>
+    <a href="http://www.typescriptlang.org" target="_blank">
+      TypeScript
+    </a>{' '}
+    は JavaScript のスーパーセットであり、{' '}
+    <a href="http://www.typescriptlang.org/Handbook#basic-types" target="_blank">
+      型宣言
+    </a>{' '}
+    and{' '}
+    <a href="http://www.typescriptlang.org/Handbook#interfaces" target="_blank">
+      インターフェース
+    </a>
+    などの多くの機能を追加した JavaScript を提供することを意味します。Ionic は TypeScript で構築されていますが、Ionic アプリの構築において TypeScript の使用は完全にオプショナルです。
+  </p>
+</section>
+
+<section id="unit-tests">
+  <a href="#unit-tests">
+    <h3>Unit Tests</h3>
+  </a>
+  <p>
+    ユニットテストとその実行は、小さなコードをテストして、それらが期待どおりに動作するかどうかを確認する方法です。
+    ユニットテストのフレームワークには、Jasmine、Mocha、QUnit など、数多く存在します。
+  </p>
+</section>
+
+<section id="webpack">
+  <a href="#webpack">
+    <h3>Webpack</h3>
+  </a>
+  <p>
+    <a href="https://webpack.github.io/" target="_blank">
+      Webpack
+    </a>{' '}
+    は、JavaScript モジュールとその他のアセットを一緒にバンドルします。
+    これを使用して、必要なときにのみ読み込まれる単一の、または複数の「チャンク」を作成できます。
+    Webpack を使うと、多くのファイルや依存関係を1つのファイルか、他のタイプにまとめることができます。
+  </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) は Web の標準化団体です。業界のリーダーと一般市民が協力して {' '}
+     <a href="https://www.w3.org/standards/" target="_blank">
+       Web 標準
+    </a>を開発します。Web 標準とは、Web プラットフォームを定義するプロトコル、仕様、および技術のセットです。
+  </p>
+</section>
+
+<section id="xcode">
+  <a href="#xcode">
+    <h3>Xcode</h3>
+  </a>
+  <p>
+    <a href="https://developer.apple.com/xcode/" target="_blank">
+      Xcode
+    </a>{' '}
+    は Apple 社のオペレーティングシステム(macOS、iOS、watchOS、tvOS) 上でソフトウェア開発を行うための Apple IDE(統合開発環境)であり、
+    他の言語やプラットフォーム用の拡張機能を備えています。
+    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/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md
new file mode 100644
index 00000000000..e25b7cbb83b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md
@@ -0,0 +1,7 @@
+---
+title: リリースノート
+---
+
+import ReleaseNotes from '@components/page/reference/ReleaseNotes';
+
+<ReleaseNotes />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
new file mode 100644
index 00000000000..c754cb8d3af
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
@@ -0,0 +1,115 @@
+---
+title: サポートポリシー
+---
+
+<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>
+
+## コミュニティメンテナンス
+
+Ionic Frameworkは当初から100%オープンソース(MIT)で、今後もオープンソースとして公開されます。開発者は、Ionicのコミュニティメンテナンス戦略を通して、Ionicが彼らのクロスプラットフォームアプリにとって正しい選択であることを保証することができます。Ionicチームは定期的に新しいリリースとバグ修正を提供しており、コミュニティからのプルリクエストを歓迎しています。
+
+## 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      | Beta                  | TBD          | TBD              | TBD               |
+| V6      | **Active**            | Dec 8, 2021  | TBD              | TBD               |
+| V5      | End of Support        | 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        | v14                     | v15.x^                  | 4.6+       |   
+| 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
new file mode 100644
index 00000000000..7f046f84893
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
@@ -0,0 +1,25 @@
+# バージョニング
+
+<!-- TOC goes here -->
+
+Ionic Frameworkは<a href="https://semver.org/" target="_blank">Semantic Versioning (SemVer)</a>の形式: <code>メジャー.マイナー.パッチ.</code>に従います。互換性のないAPIの変更は<code>メジャー</code>バージョン、後方互換性のある機能を追加する時は<code>マイナー</code>バージョン、後方互換性のあるバグ修正は<code>パッチ</code>バージョンをあげます。
+
+## リリーススケジュール
+
+### メジャーリリース
+
+メジャーリリースは、APIに重大な変更が加えられたときに公開されます。メジャーリリースはおよそ**6ヶ月**ごとに行われ、重大な変更が含まれる可能性があります。フィードバックを得るために、いくつかのリリース候補がメジャーリリースの前に公開されます。何が変更されているのか、またその理由がリリース候補に含まれる予定です。
+
+### マイナーリリース
+
+マイナーリリースは、新しい機能が追加されたり、APIが変更されたりした場合に公開されます。私たちは、リリースに自信を持てるよう、すべての変更点を徹底的にテストしますが、新しいコードには新しい問題が発生する可能性があります。マイナーバージョンのリリースは、機能追加やAPIの変更があった場合、**6週間ごと**に行う予定です。
+
+### パッチリリース
+
+パッチリリースは、バグフィックスが含まれているが、APIが変更されておらず、破壊的な変更が導入されていない場合に公開されます。私たちは新しいパッチバージョンを**毎週**リリースする予定ですが、予定より早く、または遅くリリースする必要がある場合があります。パッチリリースでは、新機能による新たな問題を発生させることなく、既存のコードを修正できるように、パッチリリースは常にマイナーリリースより前に公開されます。
+
+## Changelog
+
+注目すべき変更点の一覧はchangelogで確認することができます。これには、
+各リリースでのすべてのバグ修正と新機能の一覧が含まれています。
+<a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md" target="_blank">changelog</a>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/assets.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/assets.md
new file mode 100644
index 00000000000..20a68326ab6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/code.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/code.md
new file mode 100644
index 00000000000..7196a738e52
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/designer.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/designer.md
new file mode 100644
index 00000000000..f026bd5e459
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/faq.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/faq.md
new file mode 100644
index 00000000000..49a116ceabd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/routing-and-navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/routing-and-navigation.md
new file mode 100644
index 00000000000..ac666208502
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/using-native-functionality.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/using-native-functionality.md
new file mode 100644
index 00000000000..41e0f4089e6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/running.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/running.md
new file mode 100644
index 00000000000..8636ae2f597
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/settings.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/settings.md
new file mode 100644
index 00000000000..3adc2e9bd06
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
new file mode 100644
index 00000000000..eb8708c20d8
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
@@ -0,0 +1,17 @@
+# Studioのインストール
+
+Ionic Studioの最新版のダウンロードはこちらです。 [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads).
+
+## 必要な環境
+
+* macOS あるいは Windows 10
+* [Node &amp; npm](../../intro/environment.md#node-npm) がセットアップされている必要があります。
+* オプションとして、バージョン管理のために [Git](../../intro/environment.md#git) をインストール
+
+## インストール
+
+Ionic Studio のダウンロードリンクはIonicダッシュボードの [downloads section](https://dashboard.ionicframework.com/personal/downloads) にあります。
+
+まずIonic Studioをダウンロードしインストーラーを実行、ウィザードに従います。 Ionic Studioには依存するツールがあり、それらは起動時にインストールやアップデートが自動的に行われます。
+
+Ionic Studioは新しいバージョンがリリースされると自動的にアップデートされますが、上記ダウンロードリンクよりインストールしなおすことも可能です。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/native.md
new file mode 100644
index 00000000000..392c8137d73
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/start.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/start.md
new file mode 100644
index 00000000000..ea562de7458
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/support.md
new file mode 100644
index 00000000000..591c5983d5a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/terminal.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/terminal.md
new file mode 100644
index 00000000000..83556ffdde2
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/theming.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/theming.md
new file mode 100644
index 00000000000..adc47a29e9c
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md
new file mode 100644
index 00000000000..4528b69ec18
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md
@@ -0,0 +1,158 @@
+---
+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 a basic sanitization implementation for the components it provides. However, it is not a comprehensive solution. It is up to the developer to make sure all data that is passed 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).
+
+## Enabling Custom HTML Parsing via `innerHTML`
+
+`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` can accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. This behavior is disabled by default which means values passed to the affected components will always be interpreted as plaintext. Developers can enable this custom HTML behavior by setting `innerHTMLTemplatesEnabled: true` in the [IonicConfig](../developing/config#ionicconfig).
+
+## 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page1.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page1.md
new file mode 100644
index 00000000000..d965196cf5d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page2.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page2.md
new file mode 100644
index 00000000000..2d2d61adacf
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
new file mode 100644
index 00000000000..d5810c9e90d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
@@ -0,0 +1,182 @@
+---
+title: 高度なカスタマイズ
+sidebar_label: 高度なカスタマイズ
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+import CodeColor from '@components/page/theming/CodeColor';
+
+<head>
+  <title>高度なカスタマイズ: 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ベースのテーマ設定では、CSSファイルをロードするか、いくつかのCSSプロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。
+
+## `theme-color` Meta
+
+メタタグの `theme-color` は、ブラウザがページや周囲のインターフェイスの表示をカスタマイズするために使用する色を示します。この種類のmetaタグはメディアクエリも受け付けることができ、開発者はライトモードとダークモードの両方でテーマカラーを設定することができます。
+
+メタタグ `theme-color` の `content` 値には、有効な <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noopener noreferrer">CSS Color</a> を含める必要があり、CSS Variables を含めることはできません。
+
+:::note
+`Theme-color`メタは、WebブラウザまたはPWAとして実行するときにインターフェースのテーマを制御し、アプリがCapacitorまたはCordovaを使用してデプロイされるときには影響しません。ステータスバーの下の領域をカスタマイズしたい場合は、[Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar)を使用することをお勧めします。
+:::
+
+以下の例では、iOS 15 でブラウザのインターフェイスをスタイルするために `theme-color` を使用する方法を示しています。
+
+```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) |
+
+macOS Monterey以降のSafariでは、`theme-color`メタを使用してツールバーをカスタマイズすることもできます。
+
+iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しますが、テーマをより細かく制御したい場合はこのmetaタグを追加すると便利です。
+
+ブラウザのインターフェイスに干渉するため、ブラウザが使用しない色の小さなサブセットがあります。例えば、`content="red"`と設定すると、macOSのSafariでは、ツールバーの赤い閉じるボタンと干渉してしまうため、動作しません。このような状況に遭遇した場合は、色の選択を少し変えてみてください。
+
+:::note
+ブラウザは `manifest.json` に `theme` よりも `theme-color` メタが存在する場合、それを優先します。
+:::
+
+詳しくは、<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> をご覧ください。
+
+## グローバル変数
+
+テーマセクションのアプリケーション変数とステップ変数は、アプリケーションの色を変更するのに便利ですが、しばしば、複数のコンポーネントで使用される変数が必要になることがあります。以下の変数は、コンポーネント間で共有され、グローバルなパディング設定などを変更することができます。
+
+### 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 |
+
+## 既知の変数の制限
+
+### The Alpha Problem
+
+16進数カラーのアルファ使用については、まだ完全な<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility" target="_blank">ブラウザサポート</a>はありません。<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()" target="_blank">rgba()</a> 関数は、`R, G, B, A` (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、`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はいくつかのコンポーネントで不透明度（アルファ）を​​持つ色を使用します。これが機能するためには、それらのプロパティはRGBフォーマットで提供されなければなりません。末尾にバリエーションがあるプロパティのいずれかを変更する場合、 `-rgb` で終わる括弧なしのカンマ区切り形式でも提供されることが重要です。以下は、テキストと背景色を変更するための例です。
+
+```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;
+}
+```
+
+RGB形式の色はhexプロパティとまったく同じ色ですが、現在は `rgba()` で使用できることに注意してください。例えば、`--ion-text-color-rgb` は以下のように利用できます。
+
+```css
+body {
+  color: rgba(var(--ion-text-color-rgb), 0.25);
+}
+```
+
+### Variables in Media Queries
+
+[メディアクエリ](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) のCSS変数は現在サポートされていませんが、この問題を解決する[custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) と [custom environment variables](https://drafts.csswg.org/css-env-1/)を追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。
+
+```css
+:root {
+  --breakpoint: 600px;
+}
+
+@media (min-width: var(--breakpoint)) {
+  /* Doesn't work :( */
+}
+```
+
+### CSSカラー変数の変更
+
+Sassの組み込み関数を使用して簡単に色を変更することは可能ですが、現在のところCSS変数で設定された色を変更するのはそれほど簡単ではありません。これは、CSSで [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) チャネルまたはHSLチャネルを分割してそれぞれの値を変更することで実現できますが、複雑で機能が不足しています。
+
+正確に説明します。基本的に、SassなどのCSSプリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、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> |
+
+ただし、CSS変数は実行時に設定でき、より動的であるため、現時点では単純な関数を使用して操作することはできません。
+
+これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionicでは、これが[各色にバリエーションがある](colors.md#layered-colors)理由であり、テーマ設定に[stepped colors](themes.md#stepped-colors)が必要な理由でもあります。
+
+これを可能にする[color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187)を議論している草案とIssuesはこちらからご覧いただけます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
new file mode 100644
index 00000000000..6aedfb3d504
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
@@ -0,0 +1,43 @@
+---
+title: テーマの基本
+sidebar_label: 基本的な考え方
+---
+
+import ColorAccordion from '@components/page/theming/ColorAccordion';
+
+<head>
+  <title>テーマ | 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は、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。IonicアプリのThemingは今まで以上に簡単です。フレームワークはCSSで構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。
+
+## 配色
+
+Ionicには9つのデフォルトカラーがあり、多くのコンポーネントの色を変更するのに利用できます。各色は実際には `shade` や `tint` などの複数のプロパティの集まりで、Ionic全体で使用されます。
+
+色を変更する際には、関連するすべてのプロパティを設定することが重要です。これは[Color Generator](color-generator.md)ツールで簡単に行えますが、必要であればこれらは手動で記述することもできます。Ionicの色については、[Colors](colors.md)を参照してください。
+
+<ColorAccordion />
+
+## Platform Standards
+
+Ionicコンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを __Adaptive Styling__ と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。
+
+Ionicは、2つの **modes** をもっており、これらはプラットフォーム: `ios` と `md` に基づいてコンポーネントの外観がカスタマイズされます。各プラットフォームにはデフォルトモードがありますが、簡単に変更できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、[Platform Styles](platform-styles.md) をご覧ください。
+
+## CSS Variables
+Ionicコンポーネントは、 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>を使ってテーマ化されています。CSS変数は、動的な値を静的なCSSで利用することができます。これは今まではSassのようなCSSプリプロセッサを必要としていたものです。アプリケーションの外観は、[Ionic Variables](/docs/theming/css-variables#ionic-variables)のいずれかの値を変更することで簡単に変更できます。
+
+Ionic Frameworkのコンポーネントは、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSSプロパティ（変数）</a>を使ってテーマ化されています。CSS 変数は、静的な言語に対して動的な値を追加するものです。これは、従来はSassのようなCSSプリプロセッサが必要だったものです。Ionic Frameworkが提供する[CSS Variables](css-variables.md)のいずれかの値を変更することで、アプリケーションの外観を簡単に変更することができます。
+
+## CSS Shadow Parts
+
+CSS Shadow Partsが追加され、Ionic Framework Shadowコンポーネントの完全なカスタマイズが容易になりました。これまで、 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> を使用するコンポーネントは、シャドウ・ツリー内の要素を直接スタイル設定できませんでした。Shadow Partsが追加されたため、Shadowコンポーネントの内部要素のすべてのプロパティーにCSS変数を使用する必要がなくなりました。パーツを使用したIonic Frameworkコンポーネントのカスタマイズの詳細については、[CSS Shadow Parts](css-shadow-parts.md)ガイドを参照してください。
+
+## Branding
+
+Ionicは、ブランディングや配色にあったテーマとなるアプリケーションの配色を提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まですべてカスタマイズ可能です。ブランディングの詳細については、[Themes](themes.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
new file mode 100644
index 00000000000..10b2704f82e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
@@ -0,0 +1,19 @@
+---
+title: カラージェネレーター
+hide_table_of_contents: true
+demoUrl: /docs/demos/color-generator/index.html
+---
+
+import ColorGenerator from '@components/page/theming/ColorGenerator';
+
+<head>
+  <title>カラージェネレーター: Ionicアプリのカスタムカラーをつくる</title>
+  <meta
+    name="description"
+    content="カラージェネレーターでAndroidやiOSアプリのUIにカスタムカラーパレットを作成しましょう。Ionic Frameworkを使用してカスタムテーマとシェードを生成する方法を学びます。"
+  />
+</head>
+
+アプリのUIにカスタムカラーパレットを作成します。色の16進数値を更新し、右のデモアプリで確認した後、生成されたコードをIonicプロジェクトに直接コピー＆ペーストしてください。
+
+<ColorGenerator />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
new file mode 100644
index 00000000000..19608dd4d59
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
@@ -0,0 +1,116 @@
+---
+title: 配色
+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には、多くのコンポーネントの配色を変更するために使用できる9つのデフォルトカラーがあります。 それぞれの配色は、 `shade` と `tint` を含む複数のプロパティを持つコレクションであり、Ionic全体で利用されます。
+
+デフォルトの配色を変更するために、 `color` 属性を使って任意の色をIonicのコンポーネントに適用できます。以下の buttons はテキストと背景が `color` 属性に基づいて変更されていることに注目してください。button に `color` 属性がない時は、デフォルト値として `primary` の配色が適用されます。
+
+```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>
+```
+
+### 配色のレイヤードスタイル
+
+それぞれの配色は、これらのプロパティで構成されています: `base`, `contrast`, `shade`, と `tint` です。`base` と `contrast` の配色は `rgb` プロパティと同一の配色が求められます。 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a> をご覧ください。この `rgb` の変数が必要な理由は [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。下のドロップダウンから選択することで、Ionicが提供するデフォルトの配色とそのバリエーションを確認することができます。
+
+<LayeredColorsSelect />
+
+## Modifying Colors
+
+配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、`secondary color` を <code-color mode="md" value="#006600"></code-color> に変更する時、以下のCSSプロパティが必要です。
+
+```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;
+}
+```
+
+`secondary` をボタンに適用した時、利用されるのはベースカラー <CodeColor color="#006600">#006600</CodeColor> だけではありません。`contrast color` <CodeColor color="#ffffff">#ffffff</CodeColor> はテキストに適用され、それに加えて `shade` <CodeColor color="#005a00">#005a00</CodeColor> と `tint` <CodeColor color="#1a751a">#1a751a</CodeColor> はボタンのステータスが変更された時に利用されます。
+
+:::note
+ベースカラーからバリエーションカラーを取得する方法がわからない？その場合、 [Color Generator](color-generator.md) をお試しください。これはすべてのバリエーションを計算し、アプリにコピー&ペーストできるコードを提供します！
+:::
+
+CSS変数についてもっと詳しく知りたい時は [CSS Variables documentation](css-variables.md) をご覧ください。
+
+### 配色の追加
+
+カラーは、Ionicコンポーネントの 「color」 プロパティを設定するか、CSSを使用してスタイル設定することで、アプリケーション全体で使用できるように追加できます。新しいカラーを手動で追加する方法については、この後の 「New Color Creator」 を参照してください。コピーしてアプリケーションに貼り付ける新しいカラーのコードを簡単に生成する方法については、次の 「New Color Creator」 を参照してください。
+
+新しいカラーを追加するには、最初にルートのカラーのすべてのバリエーションのCSS変数を定義します。たとえば、`favorite`という新しいカラーを追加するには、次の変数を定義します:
+
+```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;
+}
+```
+
+次に、これらのCSS変数を使用する新しいクラスを作成します。クラスは、`.ion-color-{COLOR}` の形式で記述する**必要があります**。 `{COLOR}` は追加するカラーの名前です:
+
+```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);
+}
+```
+
+クラスを追加すると、colorプロパティーをサポートする任意のIonicコンポーネントでカラーを使用できるようになります。Ionicボタンに`favorite`の色を使用する例を以下に示します。
+
+```html
+<ion-button color="favorite">Favorite</ion-button>
+```
+
+ルートで定義されたCSS変数は、CSSを使用して任意のエレメントのスタイル設定にも使用できます:
+
+```css
+div {
+  background: var(--ion-color-favorite);
+  color: var(--ion-color-favorite-contrast);
+}
+```
+
+CSS変数の設定方法と使い方についての詳しい情報は [CSS Variables documentation](css-variables.md) をご覧ください。
+
+## New Color Creator
+
+名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色をIonicプロジェクトで利用できます。
+
+<NewColorGenerator />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
new file mode 100644
index 00000000000..e5aa23f873d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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 は、開発者がシャドウツリー内の要素に CSS プロパティをスタイル設定することを可能にします。これは、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>コンポーネントをカスタマイズする際に非常に便利です。
+
+## なぜShadow Parts?
+
+Ionic Frameworkは、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>の分散型セットです。Web Componentsは、スタイルとマークアップをカプセル化するために<a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOMの仕様</a>に従っています。
+
+:::note
+Ionic Frameworkのコンポーネントは、すべてのShadow DOMコンポーネント**ではありません**。Shadow DOM コンポーネントの場合、その [component documentation](../components.md) の右上にバッジが表示されます。Shadow DOM コンポーネントの例としては、[button component](../api/button.md) があります。
+:::
+
+Shadow DOM は、スタイルがコンポーネントから漏れて、意図せずに他の要素に適用されるのを防ぐのに便利です。例えば、`ion-button` コンポーネントに `.button` クラスを割り当てています。Shadow DOM によるカプセル化がなければ、ユーザーが自分の要素に `.button` クラスを設定した場合、Ionic Framework のボタンスタイルを継承してしまうでしょう。ion-button` は Shadow コンポーネントであるため、これは問題ではありません。
+
+しかし、このカプセル化のために、スタイルはShadowコンポーネントの内部要素に侵入することができません。つまり、Shadow コンポーネントがそのシャドウツリーの内部にある要素をレンダリングする場合、その内部要素を CSS で直接ターゲットにすることはできません。例として `ion-select` コンポーネントを使用すると、次のようなマークアップがレンダリングされます。
+
+```html
+<ion-select>
+  #shadow-root
+  <div class="select-text select-placeholder"></div>
+  <div class="select-icon"></div>
+</ion-select>
+```
+
+プレースホルダーのテキストとアイコン要素は `#shadow-root` の内部にあるため、以下のCSSはプレースホルダーのスタイル付けに **無効** です。
+
+```css
+/* Does NOT work */
+ion-select .select-placeholder {
+  color: blue;
+}
+```
+
+So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
+
+## Shadow Partsの説明
+
+Shadow Partsは、開発者がシャドウツリーの外側から、シャドウツリー内のスタイルを設定することを可能にします。これを行うには、[part](#exposing-a-part) を公開し 、[::part](#how-part-works) を使用してスタイルを設定する必要があります。
+
+### Partsの公開
+
+シャドウ DOM コンポーネントを作成する際、シャドウツリー内の要素に `part` 属性を割り当てることで、パートを追加することができます。これはIonic Frameworkでコンポーネントに追加され、エンドユーザーからのアクションは必要ありません。
+
+引き続き、例として `ion-select` コンポーネントを使用し、マークアップは以下のように更新されます。
+
+```html
+<ion-select>
+  #shadow-root
+  <div part="placeholder" class="select-text select-placeholder"></div>
+  <div part="icon" class="select-icon"></div>
+</ion-select>
+```
+
+上記では、`placeholder`と`icon`という2つのPartsを表示しています。すべてのPartsについては、[select documentation](../api/select.md#css-shadow-parts) を参照してください。
+
+これらのPartsが公開されたことで、要素は [::part](#how-part-works) を使って直接スタイルを設定することができるようになりました。
+
+### How ::part works
+
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">`::part()`</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
+
+`ion-select` は、値が選択されていないときにテキストをスタイル付けするための `placeholder` Partを公開していることが分かっているので、次のようにカスタマイズすることができます。
+
+```css
+ion-select::part(placeholder) {
+  color: blue;
+  opacity: 1;
+}
+```
+
+`part` を使ったスタイリングでは、その要素で受け付けられる任意のCSSプロパティを変更することができます。
+
+partをターゲットにできることに加え、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer">擬似要素</a>を明示的に露出させずにスタイル付けすることができます。
+
+```css
+ion-select::part(placeholder)::first-letter {
+  font-size: 22px;
+  font-weight: 500;
+}
+```
+
+Partsは、ほとんどの<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">擬似クラス</a>でも動作します。
+
+```css
+ion-item::part(native):hover {
+  color: green;
+}
+```
+
+:::note
+[ベンダープレフィックス擬似要素](#vendor-prefixed-pseudo-elements) と [構造擬似クラス](#structural-pseudo-classes) には、いくつかの既知の制限があります。
+:::
+
+## Ionic FrameworkのParts
+
+Ionic Frameworkコンポーネントのすべての公開Partsは、そのAPIページの「CSS Shadow Parts」の見出しで確認できます。すべてのコンポーネントとそのAPIページを表示するには、[Component documentation](../components.md) を参照してください。
+
+コンポーネントがPartsを持つためには、以下の条件を満たしている必要があります。
+
+- [Shadow DOM](../reference/glossary.md#shadow) コンポーネントであること。 [Scoped](../reference/glossary.md#scoped) または Light DOM コンポーネントの場合、子要素を直接対象とすることができる。コンポーネントが Scoped または Shadow の場合、[コンポーネントのドキュメントページ](../components.md) にその名前で表示されます。
+- これは子要素を含んでいます。例えば、`ion-card-header` はShadowコンポーネントですが、すべてのスタイルはホストエレメントに適用されます。子要素を持たないので、Partsは必要ありません。
+- 子要素は構造的なものではありません。`ion-title` を含む特定のコンポーネントでは、子要素は内部要素を配置するために使用される構造的な要素です。構造的な要素をカスタマイズすることは、予期しない結果をもたらす可能性があるため、お勧めしません。
+
+:::note
+追加partsの推奨を歓迎します。partsをリクエストする際は、<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> にできるだけ多くの情報を添えて作成してください。
+:::
+
+## 既知の制限
+
+### ブラウザサポート
+
+CSS Shadow Partsは最近のすべてのメジャーブラウザでサポートされています。ただし、一部の古いバージョンではshadow partsがサポートされていません。アプリにpartsを実装する前に、<a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">ブラウザのサポート</a>が要件を満たしていることを確認してください。旧バージョンのブラウザのサポートが必要な場合は、引き続き [CSS Variables](../theming/css-variables.md) を使用してスタイリングすることをお勧めします。
+
+### ベンダープレフィックス擬似要素
+
+<a href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix" target="_blank" rel="noopener noreferrer">
+  Vendor prefixed
+</a> 擬似要素は、現時点ではサポートされていません。例えば、`::-webkit-scrollbar`擬似要素のようなものです。
+
+```css
+/* Does NOT work */
+my-component::part(scroll)::-webkit-scrollbar {
+  background: green;
+}
+```
+
+詳しくは <a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer">GitHubのIssue</a> をご覧ください。
+
+### 構造的な擬似クラス
+
+ほとんどの擬似クラスはPartsでサポートされていますが、<a href="https://www.w3.org/TR/selectors-4/#structural-pseudos" target="_blank" rel="noopener noreferrer">構造的な擬似クラス</a>はサポートされていません。動作しない構造的擬似クラスの例を以下に示します。
+
+```css
+/* Does NOT work */
+my-component::part(container):first-child {
+  background: green;
+}
+
+/* Does NOT work */
+my-component::part(container):last-child {
+  background: green;
+}
+```
+
+### Partsの連結
+
+擬似要素 `::part()` は追加の `::part()` にマッチすることができません。
+
+例えば、`my-component::part(button)::part(label)`は何もマッチしません。これは、そうすることで意図した以上の構造的な情報を露出してしまうからです。
+
+もし `<my-component>` の内部ボタンが `part="label => button-label"` のようなものを使って、ボタンの内部Partsをパネル自身のpart要素マップに転送していた場合、 `my-component::part(button-label)` といったセレクタはボタンのラベルだけを選び、他のラベルを無視することになるでしょう。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
new file mode 100644
index 00000000000..8f8ecf06fba
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
@@ -0,0 +1,98 @@
+---
+title: CSS変数
+---
+
+<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のコンポーネントは、アプリケーションを簡単にカスタマイズできるように<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS変数</a>を使用して構築されています。CSS変数を使用すると、1か所に保存している値を、他の複数の場所から参照できます。また、実行時に動的にCSSを変更することを可能にします（以前はCSSプリプロセッサが必要でした）。CSS変数を使用すると、ブランディングやテーマに合わせてIonicコンポーネントをオーバーライドすることが、これまでになく簡単になります。
+
+## 変数の設定
+
+### グローバル変数
+
+CSS変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionicが提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
+
+Ionic CLIを使用してAngularプロジェクトを開始すると Ionicのデフォルト変数を上書きすることができる `src/theme/variables.scss` が作成されます。
+
+```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;
+}
+```
+
+### コンポーネント変数
+
+特定のコンポーネントにCSS変数を設定するには、そのセレクタの内側に変数を追加します。Ionicが提供するコンポーネントレベルの変数の詳細については、[Ionic Variables](#ionic-variables) を参照ください。
+
+```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;
+}
+```
+
+### JavaScriptで変数を設定
+
+CSS 変数は[setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) を使ってJavaScriptで変更することもできます:
+
+```js
+const el = document.querySelector('.fancy-button');
+el.style.setProperty('--background', '#36454f');
+```
+
+## 変数を利用する
+
+### CSSでの使い方
+
+[CSSの var() 関数](https://developer.mozilla.org/en-US/docs/Web/CSS/var) を使うと、失敗した時の設定とともにCSS変数を取得することができます。 例えば、以下の例では `--background` プロパティに `--charcoal` 変数を利用しますが、もし値を取得できなければ代わりに `#36454f` が適用されます。
+
+```css
+.fancy-button {
+  --background: var(--charcoal, #36454f);
+}
+```
+
+### JavaScriptでの使い方
+
+CSS変数の値は、[getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue) を使用してJavaScriptで読み取ることができます:
+
+```js
+const el = document.querySelector('.fancy-button');
+const color = el.style.getPropertyValue('--charcoal');
+```
+
+## Ionic変数
+
+### Component変数
+
+Ionicは、`--background` や `--color` のようなコンポーネントレベルの変数を提供します。コンポーネントが受け入れるカスタムプロパティについては、 [API reference](../api.md) の `CSS Custom Properties` セクションをご覧ください。たとえば、[Button Custom Properties](../api/button.md#css-custom-properties) をご覧ください。
+
+### グローバル変数
+
+アプリケーション全体のテーマを簡単に変更できるようにIonicが提供するグローバル変数がいくつかあります。すべてのグローバル変数のリストは [Colors](colors.md), [Themes](/docs/theming/themes) and [Advanced Theming](advanced.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
new file mode 100644
index 00000000000..096a41a9f98
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
@@ -0,0 +1,327 @@
+---
+title: ダークモード
+initialTab: 'preview'
+inlineHtmlPreviews: true
+---
+
+import Codepen from '@components/global/Codepen';
+
+<head>
+  <title>ダークモード 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を使えば、ダークカラーのスキームのサポートなど、アプリのテーマを簡単に変更できます。ネイティブアプリでのダークモードのサポートが拡大していることから、開発者はユーザーの好みをサポートするためにアプリにダークモードを追加する流れがあります。
+
+## Media Query の利用
+
+ダークモードを有効にするためにはまず、 [ユーザの設定してるカラースキーマを利用するmedia query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) を使用します。このメディアクエリは、ユーザーのデバイスのシステム設定に接続され、ダークモードが有効になっている場合はテーマを適用します。
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* dark mode variables go here */
+  }
+}
+```
+
+現在、media query `prefers-color-scheme` は[限られたブラウザサポート](https://caniuse.com/#feat=prefers-color-scheme) であるため、一部のブラウザでは、このメディアクエリを使用してダークモードを適用することはできません。ただし、ダークモードは、 [CSS class fallback](#css-class-fallback) を使用して適用することもできます。
+
+## CSS Class Fallback
+
+メディアクエリをサポートしていないデバイスの代替メソッドとして、CSSセレクタをスタイル設定し、クラスをドキュメントの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 */
+}
+```
+
+`body.dark` セレクタをターゲットとする変数を使用する場合は、アプリケーション内の `<body>` にクラスを追加するだけです。これはアプリケーションが構築されているフレームワークによってさまざまな方法で行うことができます。
+
+この例では、変数は両方の場所にある必要があります。2つの場所に変数を設定しないようにするために、[JavaScriptを使用](#combining-with-javascript) することができます。
+
+## JavaScriptとの統合
+
+CSS変数を一度だけ記述して、複数の場所で更新する必要がないようにするために、フォールバックとクラスをJavaScriptを使用して `prefers-color-scheme`  メディアクエリーの値をチェックし、プリファレンスが `dark` の場合は `dark` クラスを追加することで統合できます。CSSは次のようなものになるでしょう:
+
+```css
+body.dark {
+  /* Dark mode variables go here */
+}
+```
+
+上記の変数は `body.dark` セレクタにのみあり、 `prefers-color-scheme` メディアクエリは削除されています。
+
+### 自動的にダークモードを有効にする
+
+JavaScriptでは、ドキュメントが [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) を使用してメディアクエリと一致するかどうかをチェックすることによって、 `dark` クラスを `<body>` に追加できます。これにより、ユーザの設定に基づいてダークモードが動作するようになります。
+
+```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" />
+
+### 手動でダークモードをトグルする
+
+アプリケーションがロードされたとき、およびメディアのクエリが変更されたときに、 `toggleDarkTheme()` を呼び出すことに加えて、 `toggleDarkTheme()` 関数は、ユーザーがトグルを変更し、ライトテーマとダークテーマを切り替えるときなどに、アプリケーションによって呼び出すことができます:
+
+```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" />
+
+## システムUIコンポーネントを調整する
+
+ダークテーマを開発するときに、特定のシステムUIコンポーネントがダークモードに正しく調整されていないことがあります。これを修正するには、 `color-scheme` を指定する必要があります。クロスブラウザのサポートの詳細については、 <a href="https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme" target="_blank">ブラウザのカラースキーマの設定</a> を参照してください。
+
+ネイティブコンポーネントだけではなく、主にIonicコンポーネントを使用している場合に、 `color-scheme` はスクロールバーなどのアプリケーションの側面にも影響します。 `color-scheme` を使用するには、次のHTMLをアプリケーションの`head`に追加する必要があります:
+
+```html
+<meta name="color-scheme" content="light dark" />
+```
+
+これにより、ページは、どのカラースキームでレンダリングするのが快適かを示すことができます。また、次のCSSを追加して、要素ごとに設定することもできます。
+
+```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) |
+
+より詳しい `color-scheme` の情報については https://web.dev/color-scheme/ をご覧ください。
+
+:::note
+`color-scheme` はキーボードに反映されません。キーボードのダークモードについての詳しい情報は [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ダークモード
+
+Ionicには、アプリを実行しているデバイスに基づいてダークモードを取得するために使用する変数の推奨テーマがあります。次の部分に分けることができます:
+
+1. すべてのデフォルトの [modes](platform-styles.md#ionic-modes) のデフォルトの [Ionic colors](colors.md) を変更して `body.dark` セレクタのダークモードの背景色に対応します。
+1. `ios` デバイスでダークテーマの変数を設定します。
+1. `md` デバイスでダークテーマの変数を設定します。
+
+次のコードをコピーしてアプリに貼り付けると、Ionicのダークテーマを取得できます。 [JavaScriptとの統合](#combining-with-javascript) セクションで説明したように、JavaScriptを使用して `dark` クラスをドキュメント bodyに追加します。 `dark` クラスがドキュメント本文に追加されるまで、ダークモードは有効になりません。
+
+:::note
+さらにカスタマイズするために追加できるその他の変数など、変更する変数の詳細については [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/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
new file mode 100644
index 00000000000..a439634b82e
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
@@ -0,0 +1,51 @@
+---
+title: プラットフォームの外観
+---
+
+<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は、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。
+
+## Ionic Modes
+
+Ionicは **modes** を使ってコンポーネントの外観をカスタマイズします。それぞれの **プラットフォーム** はデフォルトの **mode** を持っていますが、これはグローバルの [config](../developing/config.md) で上書き設定をすることができます。次の表は、それぞれの **プラットフォーム** に追加されているデフォルトの **mode** を示しています。
+
+| プラットフォーム  | Mode  | 概要                                                                                                                          |
+| --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `ios`     | `ios` | iPhone, iPad, もしくは iPod で表示する時は [iOS styles](https://www.apple.com/ios) が適用されます。                                   |
+| `android` | `md`  | Androidのデバイスから表示する時は [Material Design styles](https://material.io/guidelines/) が適用されます。.                             |
+| `core`    | `md`  | 上記のどのプラットフォームにも当てはまらないプラットフォームでは、 [Material Design styles](https://material.io/guidelines/) が適用されます。  |
+
+例えば、Androidプラットフォームが利用されている時は `md` (Material Design) が標準で利用されます。 `<html>` エレメントに `class="md"` が追加され、すべてのコンポーネントには Material Design styles が適用されます。:
+
+```html
+<html class="md"></html>
+```
+
+_Note: **platform** と **mode** は別物です。platformはアプリの [config](../developing/config.md) で任意の mode を設定することができます。_
+
+## Mode Stylesの上書き
+
+それぞれのIonicのコンポーネントは、mode に基づいた外観を設定します。 `html` エレメントは、 現在のmodeに基づいて、 `class` と `mode` の両方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、`ios` modeの時のみ `ion-badge` のテキストに `uppercase` を適用する場合、こうなります:
+
+```css
+.ios ion-badge {
+  text-transform: uppercase;
+}
+```
+
+スタイルを上書きするために使用できる多くのグローバルCSS変数もあります。`ios` アプリの背景色をスタイルするには、次のように設定します:
+
+```css
+.ios {
+  --ion-background-color: #222;
+}
+```
+
+上書きするすべてのグローバルCSS変数のリストについては、[Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
new file mode 100644
index 00000000000..b47272b91bd
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
@@ -0,0 +1,67 @@
+---
+title: テーマのカスタマイズ
+---
+
+import CodeColor from '@components/page/theming/CodeColor';
+import SteppedColorGenerator from '@components/page/theming/SteppedColorGenerator';
+
+<head>
+  <title>Ionicアプリのテーマ | 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は、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: [Application Colors](#application-colors), [Stepped Colors](#stepped-colors)
+
+### アプリケーションの配色
+
+アプリケーションの配色は、Ionicの複数の場所で使用されています。ダークテーマや、ブランディングにあったテーマを簡単に作成することができます。
+
+背景とテキストの色変数は、RGBである必要があります: <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. なぜ `rgb` プロパティも必要であるかは [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。
+
+| 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                   |
+
+### ステップカラー
+
+Ionicテーマをカスタマイズするためのさまざまな方法を検討した結果、1つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。
+
+背景色 (`--ion-background-color`) と テキストカラー (`--ion-text-color`) の変数を更新すると、ほとんどのアプリコンポーネントの外観が変わりますが、見逃したり壊れたりする可能性のある特定のIonicコンポーネントがあります。ダークテーマを適用するとき、これはより明白になります。
+
+一部のコンポーネントでは、背景よりも暗い、またはテキストよりも明るい色合いを使用しています。たとえば、item の見出しテキストは、私たちのデフォルトのテキストカラーよりも数段階明るい色である <CodeColor color="#404040">#404040</CodeColor> になります。一方、ローディングコンポーネントの背景は白よりも濃い色 <CodeColor color="#f2f2f2">#f2f2f2</CodeColor> になります。私達はこれらのわずかな変化を定義するために、ステップカラーを利用します。アプリケーションの背景色やテキストの色を更新するときは、ステップカラーを更新することが重要です。
+
+デフォルトでは、Ionicのステップカラーはデフォルトの背景色の値 <CodeColor color="#ffffff">#ffffff</CodeColor> で始まります。 そしてテキストカラー値 <CodeColor color="#000000">#000000</CodeColor> を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。
+
+## 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
new file mode 100644
index 00000000000..7045a69b19f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
@@ -0,0 +1,209 @@
+---
+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>
+
+## 一般的な間違い
+
+### デコレーターにて丸括弧を忘れる
+
+デコレーターはアノテーションの後に丸括弧 `()` を持つべきです。いくつか例を示します: `@Injectable()`, `@Optional()`, `@Input()`, など。
+
+```tsx
+@Directive({
+  selector: 'my-dir',
+})
+class MyDirective {
+  // 誤り、@Optional() とすべき
+  // @Optional はここでは何もしないため、MyDirective は parent が undefined の場合にエラーになる
+  constructor( @Optional parent: ParentComponent) { }
+}
+```
+
+## 一般的なエラー
+
+### すべてのパラメータを解決できない
+
+```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.
+```
+
+この例外は Angular が `YourClass` のコンストラクタの 1つ以上のパラメータについて困惑していることを意味します。[依存性を注入](https://angular.jp/docs/ts/latest/guide/dependency-injection.html) するため、Angular は 注入するパラメータの型を知る必要があります。パラメータのクラスを指定することで Angular にこのこと（タイプ）を知らせます。次の点を確認してください:
+
+- パラメータのクラスをインポートします。
+- パラメータに適切な注釈をつけるか、パラメータの型を指定します。
+
+```tsx
+import { MyService } from 'my-service'; // 私をインポートすることを忘れないで！
+
+@Component({
+  template: `Hello World`,
+})
+export class MyClass {
+  // service は MyService のタイプです
+  constructor(service: MyService) {
+
+  }
+}
+```
+
+コード内の循環参照がこのエラーの原因になることがあります。循環参照は、2つのオブジェクトが相互に依存していることを意味するため、両方を相互の前に宣言する方法はありません。この問題を回避するには、Angular に組み込まれている[`forwardRef`](https://angular.jp/docs/ts/latest/api/core/index/forwardRef-function.html) 関数を使用します。
+```ts
+import { forwardRef } from '@angular/core';
+
+@Component({
+  selector: 'my-button',
+  template: `<div>
+    <icon></icon>
+    <input type="button" />
+  </div>`,
+  directives: [forwardRef(() => MyIcon)], // MyIcon はまだ定義されていません
+}) // forwardRef は MyIcon が必要なときに MyIcon として解決します
+class MyButton {
+  constructor() {}
+}
+
+@Directive({
+  selector: 'icon',
+})
+class MyIcon {
+  constructor(containerButton: MyButton) {} // MyButton が定義されました
+}
+```
+
+### No provider for ParamType
+
+```shell
+No provider for ParamType! (MyClass -> ParamType)
+```
+
+これは、Angular は注入されるべきパラメータの型を知っているが、注入方法を知らないことを意味する。
+
+パラメータが Service の場合は、指定したクラスがアプリケーションで使用可能な providers のリストに追加されていることを確認します:
+
+```tsx
+import { MyService } from 'my-service';
+
+@Component({
+  templateUrl: 'app/app.html',
+  providers: [MyService], // 私を忘れないで！
+})
+class MyApp {}
+```
+
+パラメータが別のコンポーネントまたはDirective（たとえば、親コンポーネント）である場合、パラメータを providers のリストに追加するとエラーはなくなりますが、これは前述の [provider の複数のインスタンス](/docs/faq/runtime#provider-) と同じ効果を持ちます。ここでは、コンポーネントクラスの新しいインスタンスを作成しますが、必要なコンポーネントインスタンスへの参照は取得しません。かわりに、注入されるであろうDirectiveまたはコンポーネントがコンポーネントで使用可能であることを確認します（たとえば、親であることを期待している場合は、実際に親であること）。これはおそらく、例を使用すると最も簡単に理解できます:
+
+```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
+
+    // コンポーネントツリーにMyCompがなく、注入するMyCompがないため、
+    // Directiveが通常のdivにある場合のエラーのdivにある場合のエラー
+    console.log("Host component's name: " + c.name);
+  }
+}
+
+@Component({
+  template:
+    '<my-comp></my-comp>' + // MyDir コンストラクタ内ではエラーなし、MyComp は MyDir の親
+    '<my-comp my-dir></my-comp>' + // MyDir コンストラクタ内ではエラーなし、MyComp は MyDir のホスト
+    '<div my-dir></div>', // MyDir コンストラクタ内でエラー
+  directives: [MyComp, MyDir],
+})
+class MyApp {}
+```
+
+以下に、使用可能な注入するものの図を示します:
+
+```
+                 +-------+
+                 |  App  |
+                 +---+---+
+                     |
+       +-------------+------------+
+       |                          |
++------+------+          +--------+--------+
+| Div (MyDir) |          | MyComp (MyDir)  |  <- MyComp は注入可能
++-------------+          +--------+--------+
+       ^                          |
+MyComp の注入なし            +------+------+
+                           | P (MyDir)   | <- MyComp は親から注入可能
+                           +-------------+
+```
+
+前の例を拡張するために、コンポーネント/Directiveの参照を常に期待しているわけではない場合には、Angular の `@Option` アノテーションを使うことができます:
+
+```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}`);
+    }
+  }
+}
+```
+
+### 既知のプロパティではないため、`propertyName` にバインドできない
+
+```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
+```
+
+これは、そのプロパティを持たない要素にプロパティをバインドしようとしたときに発生します。要素がコンポーネントの場合、または要素に1つ以上のDirectiveがある場合、コンポーネントもDirectiveもそのプロパティを持ちません。
+
+```html
+<!-- div には 'foo' というプロパティがない -->
+<div [foo]="bar"></div>
+```
+
+### ControlContainer の Provider がない
+
+```shell
+No provider for ControlContainer! (NgControlName -> ControlContainer)
+```
+
+このエラーは、上記の `No provider` エラーのより具体的なバージョンです。これは、親の [NgForm](https://angular.jp/docs/ts/latest/api/forms/index/NgForm-directive.html) または NgFormModel を指定せずに NgControlName などのフォームコントロールを使用した場合に発生します。ほとんどの場合、これはフォームコントロールが実際のフォーム要素内にあることを確認することで解決できます。NgForm はセレクタとして `form` を使用するので、これは新しいNgFormをインスタンス化します:
+
+```tsx
+@Component({
+  template:
+  '<form>' +
+  '<input ngControl="login">' +
+  '</form>'
+})
+```
+
+### コンポーネントファクトリがない
+
+```shell
+No component factory found for <component name>
+```
+
+このエラーは、ngModule にインポートおよび追加されていない Component、Provider Pipe、Directiveを使用しようとしたときに発生します。新しい Component、Provider、Pipe、Directiveをアプリケーションに追加する場合は必ず、Angularがそれを使えるようにするために、`src/app/app.module.ts` ファイル内の `ngModule` に追加する必要があります。このエラーを修正するには、問題の Component、Provider、Pipe、Directiveを app.module ファイルにインポートし、Provider の場合は `providers` 配列に追加、Component、Pipe、Directiveの場合は宣言配列と `entryComponents` 配列の両方に追加します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/cors.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/cors.md
new file mode 100644
index 00000000000..5b497f74a12
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/debugging.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/debugging.md
new file mode 100644
index 00000000000..326f1513653
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
new file mode 100644
index 00000000000..2df9044eb84
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
@@ -0,0 +1,103 @@
+---
+title: ネイティブエラー
+---
+
+<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>
+
+## コードの署名エラー
+
+```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'
+```
+
+iOSデバイスでアプリケーションを実行するには、プロビジョニングプロファイルが必要です。プロビジョニングプロファイルが作成されていない場合は、次の手順に従います:
+
+<<<<<<< HEAD
+1. <strong>[Package ID](../reference/glossary.md#package-id) を設定する。</strong>
+
+    Capacitor の場合、`capacitor.config.json` ファイルを開き `appId` プロパティを修正します。
+
+    Cordova の場合、`config.xml` ファイルを開き、ルート要素 `<widget>` の `id` 属性を修正します。よりくわしい情報は [Cordova ドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご参照ください。
+
+2. <strong>
+     プロジェクトを <b>Xcode</b> で開く。
+   </strong>
+
+   Capacitor の場合、以下を実行し Xcode でアプリケーションを開いてください:
+
+   ```shell
+   $ ionic capacitor open ios
+   ```
+
+   Cordova の場合、Xcode 開きます。**File** &raquo; **Open** からアプリケーションを見つけます。アプリケーション内の `platforms/ios` ディレクトリを開きます。
+
+3. <strong>
+     <b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。
+     **Identyty** セクションで、設定された Package ID がバンドル識別子と一致することを確認します。
+   </strong>
+
+   ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
+
+4. <strong>
+     同じプロジェクトエディタの <b>署名</b> セクションで、<b>Automatically manage signing</b> が
+     有効になっていることを確認します。
+   </strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は
+   プロビジョニングと署名を自動的に準備しようとします。
+
+   ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
+
+## Xcode のビルドエラー 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
+```
+
+このエラーは Xcode のエラーコードで、プロビジョニングの問題または古いcordova依存関係が原因で発生する可能性があります。このエラーを修正するには、まず上記の手順でプロビジョニングプロファイルが生成されていることを確認したのち、[Xcode からアプリケーションを実行します](../developing/ios.md#running-with-xcode)。
+
+もしそれでもエラーが解決しない場合は、次のコマンドを実行してください:
+
+```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.
+
+## Google Play Servicesのバージョンが衝突
+
+```shell
+Error: more than one library with package name com.google.android.gms
+```
+
+このエラーは、2つの異なるプラグインが異なるバージョンの  `Google Play Services` を使用しようとしたことが原因です。この問題を解決するには、バージョンが `7.1.0` 以上の `cordova` および バージョンが `6.3.0` 以上の `cordova-android` を実行していることを確認してください。最新の `cordova` をインストールするには次を実行してください:
+
+```shell
+npm install cordova@latest
+```
+
+また、`cordova-android` をアップデートするには次を実行してください:
+
+```shell
+cordova platform update android
+```
+
+`Google Play Services` に依存するプラグインをアップデートして、同じバージョンを使用できるようになりました。例えば、`pluginA` ではバージョン 11.0 を使用し、`pluginB` では バージョン 15.0 を使用する場合、`config.xml` ファイルでは以下のスニペットで同じバージョンを使用するように更新できます:
+
+```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
new file mode 100644
index 00000000000..f84aa86ea7d
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
@@ -0,0 +1,209 @@
+---
+title: ランタイムの問題
+---
+
+<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>
+
+## 真っ白なアプリケーション
+
+:::note
+私のアプリケーションにはエラーはありません。なぜ真っ白な画面が表示されるのでしょうか？
+:::
+
+この事象が発生しうる理由がいくつかあります。もしあなたがフォーラム上で解決策を見つけられなかった場合、これらを確認して下さい:
+
+- ポリフィルには古い android のブラウザ/バージョンは含まれない
+
+`@angular/cli@7.3` 以上のプロジェクトの場合、ポリフィルは自動的に含まれます。その前に作成されたプロジェクトでは、ポリフィルを手動で有効にする必要があります。
+
+`src/polyfills.ts` にて、Android 4.4をサポートするために ES6ポリフィルをすべて有効にする必要があります。
+
+あるいは、プロジェクトを更新して、`@angular/cli` パッケージと `@angular-devkit` パッケージの最新リリースを使用し、`angular.json` のビルドオプションオブジェクトに `es5BrowserSupport` オプションを含めることもできます:
+
+```diff
+        "input": "src/global.scss"
+      }
+    ],
+-   "scripts": []
++   "scripts": [],
++   "es5BrowserSupport": true
+  },
+  "configurations": {
+    "production": {
+```
+
+これにより、古いブラウザに必要なポリフィルが自動的に追加されます。
+
+## ディレクティブが動作しない
+
+:::note
+なぜ私のカスタムコンポーネント/ディレクティブは動作しないのでしょうか？
+:::
+
+あなたが確認できるものがいくつか存在します。
+
+- セレクタにスペルミスがない
+- 属性、要素、クラスとして、セレクタを正確に使用している
+- セレクタの構文が適切:
+  - 属性セレクタの場合は `[attr]`
+  - 要素セレクタの場合は `element`
+  - クラスセレクタの場合は `.class`
+
+以下に、属性セレクタの例を挙げます:
+
+```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 { }
+```
+
+## クリックの遅延
+
+:::note
+なぜ私のクリックイベントは遅延するのでしょうか？
+:::
+
+一般的に、我々は標準的なクリックイベントを要素に追加する場合は `(click)` のみを勧めています。
+これには `<button>` や `<a>` 要素も含まります。これにより、
+画面を読むときに各要素がクリック可能であることを伝えることができるため、アクセシビリティを
+向上します。
+
+しかしながら、おそらくあなたは通常はなクリックできない要素に `(click)` イベントを要素に追加することを
+求められるかもしれません。もしあなたがこれを実行すると、要素をクリックしてイベントが発火するまで
+`300ms` の遅延が発生するかもしれません。この遅延を改善するには、あなたは
+要素に `tappable` 属性を追加することができます。
+
+```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 プラグインがブラウザ上で動作しない
+
+あなたの開発中のある時点で、Cordova プラグインを呼び出そうとしますが、
+警告:
+
+```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)
+```
+
+これは、あなたがネイティブプラグインを呼び出そうとしますが、Cordova プラグインが利用できないときに発生します。
+ありがたいことに、Ionic Native はエラーの代わりに良い警告を表示してくれます。
+
+他のケースでは、プラグインが Ionic Native を介して利用されない場合、プラグインは
+より曖昧な警告を表示することができます。
+
+```shell
+EXCEPTION: Error: Uncaught (in promise): TypeError: undefined is not an object
+(evaluating 'navigator.camera.getPicture')
+```
+
+もしこれが発生した場合は、そのプラグインを実機かシミュレーターでテストしてみてください。
+
+## provider の複数のインスタンス
+
+あなたは provider をすべてのコンポーネントで利用可能にしたいので、すべてのコンポーネントに provider を注入した場合、
+provider の複数のインスタンスが生成されます。
+子コンポーネントで使用できるようにする場合は、親コンポーネントに一度だけ Provider を
+注入する必要があります。
+
+```tsx
+let id = 0;
+export class MyService {
+  id: number;
+
+  constructor() {
+    this.id = id++;
+  }
+}
+
+@Component({
+  selector: 'my-component',
+  template: 'Hello World',
+  providers: [MyService], // <-- MyService の新しいインスタンスの生成 :(
+}) // 不要。なぜなら MyService は App の providers の中だらか
+class MyComp {
+  // id は 1, s は MyApp とは異なる MyService インスタンス
+  constructor(s: MyService) {
+    console.log('MyService id is: ' + s.id);
+  }
+}
+
+@Component({
+  template: '<my-component></my-component>',
+  providers: [MyService], // MyService はここのみ必要
+  directives: [MyComp],
+})
+class MyApp {
+  // id は 0
+  constructor(s: MyService) {
+    console.log('MyService id is: ' + s.id);
+  }
+}
+```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md
new file mode 100644
index 00000000000..ac769548707
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md
@@ -0,0 +1,282 @@
+---
+title: Updating to v4
+---
+
+# Updating to Ionic 4
+
+## Updating from Ionic 3 to 4
+
+:::note
+This guide assumes that you have already updated your app to the latest version of Ionic 3. If you are using Ionic 1 or 2, Make sure to follow the [Updating from Ionic 1 to 4 Guide](#updating-from-ionic-1-to-4) instead.
+:::
+
+:::info Breaking Changes
+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-framework/blob/main/BREAKING_ARCHIVE/v4.md) in the Ionic Framework repository.
+:::
+
+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@v4-lts
+```
+
+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.
+
+## Updating from Ionic 1 to 4
+
+### Ionic 1 to Ionic 4: What’s Involved?
+
+Migrating from Ionic 1 to Ionic 4 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 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 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 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 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 training, architecture reviews, and migration assistance.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md
new file mode 100644
index 00000000000..6a5f621b4e9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md
@@ -0,0 +1,37 @@
+---
+title: Updating to v5
+---
+
+# Updating from Ionic 4 to 5
+
+Migrating an app from Ionic 4 to 5 requires a few updates to the API properties, CSS utilities, and the installed package dependencies.
+
+:::note
+This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide.
+:::
+
+:::info Breaking Changes
+For a **complete list of breaking changes** from Ionic 4 to Ionic 5, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md) in the Ionic Framework repository.
+:::
+
+### Packages and Dependencies
+
+For Angular based projects, you can simply run:
+
+```shell
+npm install @ionic/angular@v5-lts @ionic/angular-toolkit@4.0.0 --save
+```
+
+For React projects, you can run:
+
+```shell
+npm install @ionic/react@v5-lts @ionic/react-router@v5-lts ionicons@5.5.3
+```
+
+For Stencil / vanilla JS projects, you can run:
+
+```shell
+npm i @ionic/core@v5-lts --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.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
new file mode 100644
index 00000000000..267b4ba5f33
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
@@ -0,0 +1,470 @@
+---
+title: Updating to v6
+---
+
+# Updating from Ionic 5 to 6
+
+:::note
+This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide.
+:::
+
+:::info Breaking Changes
+For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) in the Ionic Framework repository.
+:::
+
+## はじめ方
+
+### Angular
+
+1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンのAngularに更新します。.
+2. Ionic6の最新バージョンに更新します。
+
+```shell
+npm install @ionic/angular@6
+```
+
+Ionic Angular Serverを使用している場合は、それも必ず更新してください:
+
+```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](../developing/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 は React 17+ をサポートしています。Reactの最新バージョンに更新します:
+
+```shell
+npm install react@latest react-dom@latest
+```
+
+2. Ionic 6 の最新バージョンに更新します:
+
+```shell
+npm install @ionic/react@6 @ionic/react-router@6
+```
+
+3. `package.json` の `scripts` オブジェクトにある `test` フィールドを更新して、 `transformIgnorePatterns` を含めます:
+
+```json
+"scripts": {
+  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
+  ...
+}
+```
+
+4. あなたの `App` コンポーネントで `setupIonicReact` を呼び出して下さい。もう `setupConfig` を利用している場合は、 `setupIonicReact` に置き換えてください:
+
+**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
+開発者は、 `setupIonicReact` カスタム構成を設定していない場合でも、インポートして呼び出す必要があります。
+:::
+
+See the [React Config Documentation](../developing/config) for more examples.
+
+5.すべてのコントローラのインポートを `@ionic/core` から `@ionic/core/components` に更新します。例として、`menuController` のマイグレーションを紹介します。
+
+**Before**
+```tsx
+import { menuController } from '@ionic/core';
+```
+
+**After**
+```tsx
+import { menuController } from '@ionic/core/components';
+```
+
+### Vue
+
+1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vueの最新バージョンに更新ください。
+
+```shell
+npm install vue@3 vue-router@4
+```
+
+2. Vue CLIを使用するアプリの場合は、Vue CLI 5をインストールします。
+
+```shell
+npm install -g @vue/cli@next
+```
+
+次に、すべてのVue CLIプラグインをアップグレードします。
+
+```shell
+vue upgrade --next
+```
+
+3. Ionic 6の最新バージョンに更新します。
+
+```shell
+npm install @ionic/vue@6 @ionic/vue-router@6
+```
+
+4. `package.json` の`jest.config.js` か `jest` のどちらかに `transformIgnorePatterns` を含めます。
+
+```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)"]
+    }
+  }
+```
+
+詳しくは [Testing section below](#testing) をご覧ください。
+
+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](../developing/config) for more examples.
+
+6. `useIonRouter` で利用してる型 `IonRouter` を `UseIonRouterResult` に変更してください。
+
+7. `useKeyboard` で利用してる型 `IonKeyboardRef` を `UseKeyboardResult` に変更してください。
+
+8. すべてのオーバーレイイベントリスナーの名前を変更し、新しいフォーマットを使用するようにします。
+
+**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
+これらは `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-picker`, `ion-popover`, `ion-toast` に適用されます。
+:::
+
+9.  `ion-router-outlet` を `ion-tabs` の中にいれて利用します。
+
+**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. タブ内の追加ルートは、子ルートではなく兄弟ルートとして書き直す必要があります。
+
+**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. Ionic 6 の最新バージョンにアップデートください。
+
+```shell
+npm install @ionic/core@6
+```
+
+## コアのアップデート
+
+### Datetime
+
+1. `placeholder`, `pickerOptions`, `pickerFormat`, `monthNames`, `monthShortNames`, `dayNames`, `dayShortNames`プロパティの使用をすべて削除してください。`ion-datetime` は、デバイスに設定されている言語と地域に応じて、コンポーネント内に表示される月名、日名、時刻を自動的にフォーマットするようになりました。詳細は、[ion-datetime Localization Documentation](../api/datetime#localization) を参照してください。
+
+2. `text` と `placeholder` の CSS シャドウパーツの使用をすべて削除します。
+
+3. CSS変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSSプロパティのいずれかを使用することができます。
+
+4. `open` メソッドの使用はすべて削除します。datetime をオーバーレイで表示するには、 `ion-modal` または `ion-popover` コンポーネントの中に配置する。詳細は、[ion-datetime Usage Examples](../api/datetime#usage) を参照してください。
+
+5. `displayFormat` プロパティまたは `displayTimezone` プロパティの使用をすべて削除します。ionChange` イベントのペイロードで提供される UTC 文字列をパースするには、[date-fns](https://date-fns.org/) を使用することをお勧めします。例としては、[ion-datetime Parsing Dates Documentation](../api/datetime#parsing-dates) を参照してください。
+
+:::note
+マイグレーション例は [Datetime Migration Sample Application](https://github.com/ionic-team/datetime-migration-samples) をご覧ください。
+:::
+
+### Icon
+
+Ionic 6には、Ionicons 6が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
+
+### Input
+
+`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
+
+### Modal
+
+`ion-modal` は Shadow DOM を使用するようになりました。 `ion-modal` の内部をターゲットとするスタイルは、[ion-modal CSS Variables](../api/modal#css-custom-properties) または [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` は Shadow DOM を使用するようになりました。 `ion-popover` の内部をターゲットとするスタイルは、[ion-popover CSS Variables](../api/popover#css-custom-properties) または [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
+
+`RadioChangeEventDetail` インターフェースのすべての使用法を削除します。
+
+### Select
+
+`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
+
+### Textarea
+
+`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
+
+### ブラウザサポート
+
+Ionicがサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
+
+If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
+
+```
+Chrome >=60
+Firefox >=63
+Edge >=79
+Safari >=13
+iOS >=13
+```
+
+
+### テスト
+
+Ionic 6は、ESモジュールとして出荷されるようになりました。ESモジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jestでテストする開発者は、Jest 27の時点でJestがES Modulesを完全にサポートしていないため、Jestの設定を更新する必要があります。
+
+このアップデートでは、Babelを使用してIonicのESモジュールをJestが理解できるCommonJS (CJS) 形式にコンパイルする必要があります。JestがESモジュールをサポートするようになれば、この変更は必要なくなります。JestのESモジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
+
+新しいIonicアプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存のIonicアプリをお持ちの方は、以下の手順でJestをIonic 6で動作させることができます。
+
+1. Jest の設定に、関連する Ionic パッケージを含む `transformIgnorePatterns` フィールドを追加します。これは通常 `jest.config.js` または `package.json` の `jest` フィールドに含まれています。
+
+```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
+Ionic ReactまたはIonic Vueを使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic Reactの場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vueの場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
+:::
+
+Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これはCRAの制限であり、Ionicがコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
+
+```json title="package.json"
+"scripts": {
+  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
+  ...
+}
+```
+
+それでも問題が発生する場合は、以下のことを試してみてください。
+
+1. `@babel/preset-env` が [file-relative configuration](https://babeljs.io/docs/en/config-files#file-relative-configuration) ではなく、 [project-wide configuration](https://babeljs.io/docs/en/config-files#project-wide-configuration) に含まれていることを確認します。これは通常、 `<project-root>/babel.config.json` で Babel 設定を定義することを意味します。
+
+2. `package.json` ファイルに `browserslist/test` フィールドがある場合、それが `current node` に設定されていることを確認してください。
+
+## アップグレートへの助けが必要？
+
+[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティとCSS変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
+
+アップグレードに助けが必要な場合、 [Ionic Forum](https://forum.ionicframework.com/) にスレッドを立ててください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
new file mode 100644
index 00000000000..c79f71874ba
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
@@ -0,0 +1,158 @@
+---
+title: Updating to v7
+---
+
+# Updating from Ionic 6 to 7
+
+:::note
+This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
+:::
+
+:::info Breaking Changes
+For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) in the Ionic Framework repository.
+:::
+
+## はじめ方
+
+### Angular
+
+1. Ionic 7はAngular 14+に対応しています。 [Angular Update Guide](https://update.angular.io/) に従い、Angularの最新バージョンにアップデートしてください。
+2. プロジェクトでrxjsを使用している場合、Ionic 7ではrxjsの最低バージョンが7.5.0である必要があります：
+
+```shell
+npm install rxjs@7.5.0
+```
+
+3. Ionic 7の最新バージョンにアップデートしてください：
+
+```shell
+npm install @ionic/angular@next
+```
+
+Ionic Angular Serverを使用している場合は、必ずそちらも更新してください。
+
+```shell
+npm install @ionic/angular@next @ionic/angular-server@next
+```
+
+### React
+
+1. Ionic 7はReact 17+に対応しています。Reactの最新バージョンにアップデートしてください。
+
+```shell
+npm install react@latest react-dom@latest
+```
+
+2. Ionic 7の最新バージョンにアップデートします。
+
+```shell
+npm install @ionic/react@next @ionic/react-router@next
+```
+
+### Vue
+
+1. Ionic 7はVue 3.0.6+をサポートしています。Vueの最新バージョンにアップデートしてください。
+
+```shell
+npm install vue@latest vue-router@latest
+```
+
+3. Ionic 7の最新バージョンにアップデートします。
+
+```shell
+npm install @ionic/vue@next @ionic/vue-router@next
+```
+
+### Core
+
+1. Ionic 7の最新バージョンにアップデートします。
+
+```shell
+npm install @ionic/core@next
+```
+
+## あなたのコードのアップデート
+
+### ブラウザサポート
+
+Ionicがサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
+
+`browserslist` または `.browserslistrc` ファイルをお持ちの場合は、以下の内容で更新してください。
+
+```
+Chrome >=79
+ChromeAndroid >=79
+Firefox >=70
+Edge >=79
+Safari >=14
+iOS >=14
+```
+
+### 型
+
+1.  `ActionSheetAttributes`、`AlertAttributes`、`AlertTextareaAttributes`、`AlertInputAttributes`、`LoadingAttributes`、`ModalAttributes`、`PickerAttributes`、`PopoverAttributes`および `ToastAttributes` は削除されました。開発者は、代わりに `{ [key: string]: any }` を使用する必要があります。
+
+### Checkbox
+
+1. CSS 変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--checkbox-background` と `--checkbox-background-checked` にリネームします。
+
+### Datetime
+
+1. `value` プロパティに空文字列(`''`)を設定するコードを削除します
+2.  `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetimeはタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
+
+### Input
+
+1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの `detail` ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
+
+### Modal
+
+1. Remove any usage of the `swipeToClose` property. Card modals are swipeable by default, so you can remove `swipeToClose` if you want your card modal to remain swipeable. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property if you want to prevent a modal from dismissing.
+2. Remove any code that sets the `canDismiss` property to `undefined`. The `canDismiss` property now defaults to `true`, so this code is no longer needed.
+
+### Picker
+
+1. `ion-picker-column` の `refresh` にアクセスするコードをすべて削除する。代わりに `ion-picker` の `columns` プロパティを使用してビューをリフレッシュする必要があります。
+
+### Searchbar
+
+1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの`detail`ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
+
+### Segment
+
+1. Remove any code that sets the `value` property to `null`. Developers should use either `''` or `undefined` instead.
+
+### Slides
+
+1. `ion-slides`、`ion-slide`、および関連する型を削除する。これらのコンポーネントは、Swiper.jsを直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
+
+[Angular Migration Guide](https://ionicframework.com/docs/angular/slides)<br />
+[React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
+[Vue Migration Guide](https://ionicframework.com/docs/vue/slides)
+
+### Textarea
+
+1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの`detail`ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
+
+### Toggle
+
+1. CSS変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--track-background` と `--track-background-checked` にリネームします。
+
+### Virtual Scroll
+
+`ion-virtual-scroll`とそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworksが提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
+
+[Angular Migration Guide](https://ionicframework.com/docs/angular/virtual-scroll)<br />
+[React Migration Guide](https://ionicframework.com/docs/react/virtual-scroll)<br />
+[Vue Migration Guide](https://ionicframework.com/docs/vue/virtual-scroll)
+
+## アップグレードに助けが必要？
+
+[Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) を必ず見てください。デフォルトのプロパティとCSS Variableの値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。
+
+<<<<<<< HEAD
+アップグレードのヘルプが必要な場合は、[Ionic Forum](https://forum.ionicframework.com/)にスレッドを投稿してください。
+
+=======
+If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).
+>>>>>>> 3bd16bc620b471736c9f4ce90e2f3eae53781174
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md
new file mode 100644
index 00000000000..92c6eebc67a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md
@@ -0,0 +1,1635 @@
+---
+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 tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
+
+Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use up CPU time.
+
+Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
+
+## 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');
+```
+
+## API
+
+This section provides a list of all the methods and properties available on the `Animation` class.
+
+### Interfaces
+
+#### AnimationDirection
+
+```tsx
+type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+```
+
+#### AnimationFill
+
+```tsx
+type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
+```
+
+#### AnimationBuilder
+
+```tsx
+type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+```
+
+:::note
+
+`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
+
+:::
+
+#### AnimationCallbackOptions
+
+```tsx
+interface AnimationCallbackOptions {
+  /**
+   * If true, the associated callback will only be fired once.
+   */
+  oneTimeCallback: boolean;
+}
+```
+
+#### AnimationPlayOptions
+
+```tsx
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md
new file mode 100644
index 00000000000..ab65cfb8f7b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md
@@ -0,0 +1,505 @@
+---
+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)
+
+## 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
new file mode 100644
index 00000000000..65c8340d4ac
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
@@ -0,0 +1,119 @@
+# Config
+
+Ionic Configは、アプリケーション全体にわたってコンポーネントのプロパティをグローバルに変更する方法を提供します。Ionic Configは、アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。
+
+## グローバル設定
+
+アプリケーションの初期のIonic Configを上書きするには、IonicVueプラグインのインストール時に追加パラメータとしてConfigオブジェクトを指定します。
+
+```tsx
+createApp(App).use(IonicVue, {
+  rippleEffect: false,
+  mode: 'md',
+});
+```
+
+上の例では、Material Designのリップル効果を無効にし、モードをMaterial Designにしています。
+
+## プラットフォームごとの構成
+
+Ionic Configは、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができます。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
+
+次の例では、アプリケーションがモバイルWebブラウザで実行されている場合にのみ、Ionicアプリケーションのすべてのアニメーションを無効にしています。
+`isPlatform ()` 呼び出しは、渡されたプラットフォームに基づいて `true` または `false` を返します。 [Platform Documentation](platform.md#platforms) を指定します。
+
+```tsx
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+createApp(App).use(IonicVue, {
+  animated: !isPlatform('mobileweb'),
+});
+```
+
+次の例では、プラットフォームに基づいてまったく異なる構成を設定し、一致するプラットフォームがない場合はデフォルトの構成に戻すことができます:
+
+```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());
+```
+
+最後に、この例では、異なるプラットフォーム要件に基づいて構成オブジェクトを蓄積できます:
+
+```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
+
+### Configオプション
+
+以下はIonicで使用できる設定オプションのリストです。
+
+| 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.                     |
+| `toastDuration`          | `number`                                                                      | Overrides the default `duration` for all `ion-toast` components.                                         |
+| `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".               |
+| `toggleOnOffLabels`      | `boolean`                                                                     | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
new file mode 100644
index 00000000000..fd19d33cda9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
@@ -0,0 +1,108 @@
+---
+sidebar_label: ライフサイクル
+---
+
+# Vueのライフサイクル
+
+このガイドでは、Ionic FrameworkのライフサイクルイベントをIonic Vueアプリケーションで使用する方法について説明します。
+
+## Ionic Frameworkのライフサイクルメソッド
+
+Ionic Frameworkはアプリで使えるいくつかのライフサイクルメソッドを提供します:
+
+| Event Name         | Description                                                          |
+|--------------------|------------------------------------------------------------------|
+| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
+| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
+
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+
+ライフサイクルは、Vueのライフサイクルメソッドと同じように、Vueコンポーネントのルートで関数として定義されます：
+
+```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.
+:::
+
+## Ionic Frameworkがページのライフを処理する仕組み
+
+Ionic Frameworkには `<ion-router-outlet>` と呼ばれるルータアウトレットがあります。このアウトレットは、Vue Routerの `<router-view>` を拡張し、モバイルデバイスのエクスペリエンスを向上させるためのいくつかの追加機能を提供します。
+
+アプリが `<ion-router-outlet>` でラップされている場合、Ionic Frameworkはナビゲーションを少し異なる扱いにします。新しいページに移動すると、Ionic Frameworkは古いページを既存のDOMに保持しますが、ビューからは非表示にして新しいページに移動します。これを行う理由は2つあります:
+
+1. 古いページの状態を維持できます(画面上のデータ、スクロール位置など...)
+2. ページはすでに存在しており、作成する必要がないため、よりスムーズにページに戻ることができます。
+
+ページがDOMから削除されるのは、UIの戻るボタンやブラウザーの戻るボタンを押すなど、ページが "popped" された場合のみです。
+
+この特別な処理のため、 `<keep-alive>`, `<transition>`,`<router-view>` などの特定のVueルータコンポーネントは、Ionic Vueアプリケーションでは使用しないでください。また、各ページのスクロール位置は自動的に保存されるため、ここではVue Routerのスクロール動作APIは必要ありません。
+
+Vueのすべてのライフサイクルメソッド(`mounted` や `beforeUnmount`など)も使用可能です。ただし、Ionic Vueはページのライフタイムを管理するため、特定のイベントは予期したときに起動しない場合があります。たとえば、mountedはページが最初に表示されたときに起動しますが、ページから離れると、Ionic FrameworkによってページがDOM内に保持され、その後ページにアクセスしても再度 `mounted` が呼び出されることはありません。このシナリオは、Ionic Frameworkのライフサイクル・メソッドが存在する主な理由であり、ネイティブ・フレームワークのイベントが起動しない可能性がある場合でも、ビューの開始時と終了時にロジックを呼び出す方法を提供します。
+
+
+## 各ライフサイクルメソッドのガイダンス
+
+以下は、life cycle eventsごとのユースケースに関するヒントです。
+
+- `ionViewWillEnter` - `ionViewWillEnter` はViewがナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Serviceからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量のDOM操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
+- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Pageがユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたは [ion-skeleton-text](../api/skeleton-text) を使ったスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
+- `ionViewWillLeave` - observablesのunsubscribingのように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
+- `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
new file mode 100644
index 00000000000..6879a644dc9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
@@ -0,0 +1,673 @@
+---
+title: Vueナビゲーション
+sidebar_label: ナビゲーション/ルーティング
+---
+
+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>
+
+このガイドでは、IonicとVueで構築されたアプリでルーティングがどのように機能するかについて説明します。
+
+`IonRouterOutlet` コンポーネントは、内部で一般的な [Vue Router](https://router.vuejs.org/) ライブラリを使用します。IonicとVue Routerを使えば、リッチなページ遷移を持つマルチページアプリを作ることができます。
+
+Vue Routerを使ったルーティングについて知っていることはすべてIonic Vueに引き継がれます。Ionic Vueアプリの基本とルーティングの仕組みを見てみましょう。
+
+## 簡単なメモ
+
+このガイドを読んでいると、これらのコンセプトのほとんどが、Ionic Frameworkを使わずにVue Routerで見られるコンセプトと非常に似ていることに気がつくかもしれません。あなたの観察は正しいでしょう! Ionic Vueは、Ionic Frameworkでアプリを構築するための移行をできるだけシームレスにするために、Vue Routerの最良の部分を活用しています。そのため、独自のルーティングソリューションを構築しようとするよりも、できるだけVue Routerの機能に依存することをお勧めします。
+
+## 簡単なRoute
+
+次に示すのは、 "/home" URLへの単一のルートを定義するルーティング設定の例です。 "/home" にアクセスすると、ルートによって `HomePage`  コンポーネントがレンダリングされます。
+
+**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;
+```
+
+アプリケーションが最初にロードされると、 `HomePage` コンポーネントがここで設定したとおりに表示されます。
+
+## リダイレクトの設定
+
+最初ロードされたパスに別のパスを設定したい場合はどうすればよいでしょうか。これには、ルータリダイレクトを使用できます。リダイレクトは通常のルートオブジェクトと同じように機能しますが、いくつかの異なるキーが含まれています。
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+];
+```
+
+このリダイレクトでは、最初にインデックスのパスが参照されます。そして、 `home` routeにリダイレクトしてロードを行います。
+
+## 異なるRoutesへのナビゲーション
+
+これは素晴らしいことですが、実際にルートにナビゲートするにはどうすればよいのでしょうか。これには、 `router-link` プロパティを使用できます。新しいルーティング設定を作成します:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/detail',
+    name: 'Detail',
+    component: DetailPage,
+  },
+];
+```
+
+`home` routeで開始し、`detail` routeに移動するボタンを追加するとします。`detail` routeに移動するには、次のHTMLを使用します:
+
+```html
+<ion-button router-link="/detail">Go to detail</ion-button>
+```
+
+また、ルーター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>
+```
+
+どちらのオプションも同じナビゲーション機構を提供し、異なるユースケースに対応します。
+
+### 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
+
+現在のrouteの設定方法では、アプリをロードするときに同じ初期チャンクに含まれるようになっているが、これは必ずしも理想的ではありません。代わりに、必要に応じてコンポーネントがロードされるようにrouteを設定できます。
+
+```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.
+
+### 共有URL
+
+共有URLは、ルートが共通のURLの一部を持つルート設定です。共有URL設定の例を次に示します:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/dashboard',
+    component: DashboardMainPage,
+  },
+  {
+    path: '/dashboard/stats',
+    component: DashboardStatsPage,
+  },
+];
+```
+
+上記のルートは、URLの `dashboard` 部分を再利用するため、 "shared" と見なされます。
+
+### ネストされたRoute
+
+Nested Routesは、ルートが他のルートの子としてリストされるルート設定です。ネストされたルート設定の例を次に示します:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/dashboard/:id',
+    component: DashboardRouterOutlet,
+    children: [
+      {
+        path: '',
+        component: DashboardMainPage,
+      },
+      {
+        path: 'stats',
+        component: DashboardStatsPage,
+      },
+    ],
+  },
+];
+```
+
+上記のルートは、親ルートの `children` 配列にあるため、ネストされています。親ルートが `DashboardRouterOutlet` コンポーネントをレンダリングしていることに注目してください。ルートをネストする場合は、 `ion-router-outlet` の別のインスタンスをレンダリングする必要があります。
+
+### どちらを選ぶべきか
+
+共有URLは、URLの2つのページ間の関係を維持しながら、ページAからページBに遷移する場合に便利です。前述の例では、 `/dashboard` ページのボタンで `/dashboard/stats` ページに移行できます。2つのページ間の関係は、a) ページの遷移とb) URLによって維持されます。
+
+ネストされたルートは、コンセントAのコンテンツをレンダリングする必要がある場合、およびネストされたコンセントBの内部のサブコンテンツをレンダリングする必要がある場合に便利です。最も一般的な使用例は、タブです。Ionicスターターアプリのタブをロードすると、最初の `ion-router-outlet` で `ion-tab-bar`  および `ion-tabs` コンポーネントがレンダリングされます。`ion-tabs` コンポーネントは、各タブの内容をレンダリングする別の 「イオンルータ出力」 をレンダリングします。
+
+モバイルアプリケーションでネストされたルートが意味をなすユースケースはほとんどありません。疑わしい場合は、共有URLルート設定を使用します。ネストされたルーティングをタブ以外のコンテキストで使用すると、アプリのナビゲーションが混乱する可能性があるため、使用しないように強く注意しています。
+
+
+## タブの操作
+
+タブを操作する場合、Ionic Vueはどのビューがどのタブに属しているかを知る方法を必要とします。ここでは `IonTabs` コンポーネントが便利ですが、この場合のルーティング設定を見てみましょう:
+
+```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'),
+      },
+    ],
+  },
+];
+```
+
+ここで、 `tabs` パスは `Tabs` コンポーネントをロードします。各タブは、 `children` 配列内のルートオブジェクトとして提供されます。この例では、パスを `tabs` としていますがこれはカスタマイズできます。
+
+まず、 `Tabs` コンポーネントをみていきましょう:
+
+```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>
+```
+
+以前にIonic Frameworkを使ったことがある人なら、このことをよく知っているはずです。`ion-tabs` コンポーネントを作成し、 `ion-tab-bar` を提供します。`ion-tab-bar` は `ion-tab-button` コンポーネントを提供し、それぞれにルータの設定の対応するタブに関連付けられた `tab` プロパティがあります。
+
+### タブ内の子ルート
+
+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
+
+`IonRouterOutlet` コンポーネントは、ビューをレンダリングするためのコンテナを提供します。これは他のVueアプリケーションに見られる `RouterView` コンポーネントに似ていますが、 `IonRouterOutlet` は同じアウトレット内のDOMで複数のページをレンダリングできるという点が異なります。コンポーネントが `IonRouterOutlet` でレンダリングされる場合、これはIonic Framework "Page"と見なされます。ルーター・アウトレット・コンテナーは、ページ間の遷移アニメーションを制御するだけでなく、ページがいつ作成および破棄されるかを制御します。これにより、ビューを切り替えるときにビュー間の状態を維持することができます。
+
+テンプレートで設定する際に、 `IonRouterOutlet` の内部には何も指定しないでください。`IonRouterOutlet` は子コンポーネントにネストすることができますが、通常はアプリケーション内のナビゲーションが混乱するため注意が必要です。詳細については、[Shared URLs versus Nested Routes](#shared-urls-versus-nested-routes) を参照してください。
+
+### 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パラメーター
+
+元のルーティング例を拡張して、URLパラメータの使用方法を示します:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/detail/:id',
+    name: 'Detail',
+    component: DetailPage,
+  },
+];
+```
+
+ここで、 `detail` パス文字列の最後に `:id` を追加したことに注意してください。URLパラメータは、ルートパスの動的な部分です。ユーザーが `/details/1` などのURLに移動すると、 "1" が "id" という名前のパラメータに保存され、ルートのレンダリング時にコンポーネントでアクセスできるようになります。
+
+コンポーネントでの使用方法を見てみましょう。
+
+```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
new file mode 100644
index 00000000000..f5148e490a9
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
@@ -0,0 +1,61 @@
+---
+title: 'Ionic Vueの概要'
+sidebar_label: 概要
+---
+
+<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 Frameworkのコアな経験と、Vue開発者向けにカスタマイズされたツールやAPIを組み合わせたものが `@ionic/vue` です。
+
+## Vueバージョンサポート
+
+Ionic VueはVue 3.0.0上に構築されています。Ionic Vueの初期バージョンでアプリを構築している場合は、最新のリリースにアップグレードして、Vueの依存関係をアップグレードしてください。
+
+## Vueツール
+
+Ionic Vueプロジェクトには通常のVue CLIプロジェクトと同じツールが付属しています。つまり、Vue CLIとそのすべての機能を使って構築することになります。VueのデフォルトテンプレートにはルーティングやTypeScriptのサポートなど、デフォルトで有効になっている機能がほとんどありませんが、Ionic Vueはそれらをデフォルトで有効にしています。
+
+## Native Tooling
+
+[Capacitor](https://capacitorjs.com) は、Ionic VueウェブアプリをiOS、Android、ウェブ上でネイティブに動作させるための公式クロスプラットフォームアプリライブラリです。
+
+[Cordova](https://cordova.apache.org/) とCordovaプラグインでIonic Vueを使用する際の技術的な制限はありませんが、Capacitorが公式に推奨されています。現時点では、[Ionic CLIツール](/docs/cli) ツールでIonic VueのCordova統合をサポートする計画はない。詳細は [こちら](https://capacitorjs.com/docs/cordova) をご覧ください。
+
+## コミュニティからの情報
+
+- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders
+
+## インストール
+
+```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md
new file mode 100644
index 00000000000..42f71a72eb1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: パフォーマンス
+---
+
+# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
new file mode 100644
index 00000000000..5e6463d33ba
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
@@ -0,0 +1,87 @@
+# Platform
+
+## isPlatform
+
+`isPlatform` メソッドを使用して、アプリが特定のプラットフォームで実行されているかどうかを確認できます:
+
+```tsx
+import { isPlatform } from '@ionic/vue';
+
+isPlatform('ios'); // returns true when running on a iOS device
+```
+
+ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPadから実行するアプリは、mobile、ios、ipad、およびtabletのプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordovaもtrueになります。
+
+## getPlatforms
+
+`getPlatforms` メソッドを使用して、アプリが現在実行されているプラットフォームを判別できます。
+
+```tsx
+import { getPlatforms } from '@ionic/vue';
+
+getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone
+```
+
+使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhoneでは、mobile、ios、およびiphoneが返されます。
+
+## Platforms
+
+次の表に、使用可能なすべてのプラットフォーム値とその説明を示します。
+
+| 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](../developing/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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
new file mode 100644
index 00000000000..a431da43752
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
@@ -0,0 +1,248 @@
+---
+title: Progressive Web Apps in Vue
+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>
+
+## Making your Vue app a PWA with Vite
+
+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 Application Manifest</a>. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead.
+
+To get started, install the `vite-plugin-pwa` package:
+
+```shell
+npm install -D vite-plugin-pwa
+```
+
+Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
+
+```javascript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    VitePWA({ registerType: 'autoUpdate' })
+  ],
+})
+```
+
+This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
+
+For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/).
+
+See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA.
+
+## Making your Vue app a PWA with Vue CLI
+
+:::note
+As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. See [Making your Vue app a PWA with Vite](#making-your-vue-app-a-pwa-with-vite) for Vite instructions.
+:::
+
+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 Application 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.
+
+既存のプロジェクトの場合は、 `vue add` コマンドを実行して、VueのPWAプラグインをインストールできます。
+
+```shell
+vue add pwa
+```
+
+:::note
+変更する前に、現在の状況を必ずGitにコミットしてください。
+:::
+
+これが完了すると、VueのCLIは新しく `registerServiceWorker.ts` を作成します。それを `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');
+```
+
+`registerServiceWorker.ts` はCLIがビルド時に作成するservice workerです。ここでは、service workerがアップデート、ネットワーク接続の変更、またはエラーを検出したときのユーザの操作性をカスタマイズできます。
+
+```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);
+    },
+  });
+}
+```
+
+生成されるService Workerは、 [Workbox's webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいており、デフォルトで `GenerateSW()` を使用するように設定されています。つまり、Workboxはビルド時に、処理するすべてのファイルのService Workerキャッシュを自動的に生成します。
+
+これを設定してデフォルトの動作を変更したい場合は、GitHubにある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) をチェックアウトします。
+
+### Manifest
+
+Service Workerに加えて、Vue PWAプラグインはアプリケーションのmanifestファイルも作成します。デフォルトでは、CLIは次のエントリーを含むmanifestを生成します。
+
+```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"
+}
+```
+
+`public/img/icons` 内のアイコンは、必ずご使用のブランドに合わせて更新してください。テーマの色や名前をカスタマイズしたい場合は、GitHubにある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) のドキュメントを必ず読んでください。
+
+### Deploying
+
+Firebase, Vercel, Netlify,さらにはAzure Static Web Appsなど、さまざまなホストを使用することができる。いずれの場合も、同様のセットアッププロセスを完了する必要があります。このガイドでは、ホストの例としてFirebaseを使用します。このガイドに加えて、 [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) のドキュメントには、さまざまなプロバイダーにデプロイするためのガイドも含まれています。
+
+#### Firebase
+
+FirebaseホスティングはProgressive Web Appsに多くの利点を提供しており、CDNによる高速応答、デフォルトで有効になっているHTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
+
+まず、まだ使用していない場合は、Firebaseで [プロジェクトを作成](https://console.firebase.google.com) します。
+
+次にターミナルでFirebase CLIをインストールします:
+
+```shell
+npm install -g firebase-tools
+```
+
+Firebase CLIをインストールした状態で、Ionicプロジェクト内で `firebase init` を実行します。CLI上で様々な確認を行っていきます:
+
+**"Which Firebase CLI features do you want to set up for this folder?"**  "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
+
+**"Select a default Firebase project for this directory:"** FirebaseのWebサイト上で作成したプロジェクトを選択します。
+
+**"What do you want to use as your public directory?"** "dist" を選択ください。
+
+:::note
+次の2つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
+:::
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** "Yes" を選択します.
+
+**"File dist/index.html already exists. Overwrite?"** "No" を選択します。
+
+`firebase.json` という設定ファイルが生成されるので、アプリの設定にあわせて変更します。
+
+最後に、キャッシング・ヘッダーが正しく設定されていることを確認する必要があります。これを行うには、 `headers` スニペットを `firebase.json` に追加します。完全な`firebase。json`は次のようになります:
+
+```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"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+より詳しい `firebase.json` についての設定は [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json) を参照ください。
+
+次に、次のコマンドを実行して、アプリケーションの最適化バージョンを構築します:
+
+```shell
+ionic build
+```
+
+最後に、アプリをデプロイします:
+
+```shell
+firebase deploy
+```
+
+これが完了すると、アプリがライブになります。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
new file mode 100644
index 00000000000..65bf601b283
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
@@ -0,0 +1,707 @@
+---
+title: Ionic Vueクイックスタート
+sidebar_label: クイックスタート
+---
+
+<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>
+
+## Ionic Frameworkとは
+
+まず、ここに来たばかりの人を歓迎します！Ionic Frameworkは、 iOS, Android, Electron, Web上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
+
+UIコンポーネントに加えて、Ionic Frameworkは新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
+
+このガイドでは、Ionic Framework特有の機能を含め、VueとIonic Frameworkの基本について説明します。Vueに精通している方は、ガイドを楽しみ、Ionic Frameworkについて新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
+
+## Ionic CLIを使ったプロジェクト新規作成
+
+はじめに、Ionic CLIの最新版をインストールしましょう。
+
+```shell
+npm install -g @ionic/cli@latest
+```
+
+これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Frameworkと他の依存関係を持つVueプロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
+
+```shell
+ionic start myApp blank --type vue
+cd myApp
+```
+
+これで、 `ionic serve` を実行することによって、プロジェクトをブラウザで実行することができます。
+
+## TypeScript と JavaScript のどちらで構築するかを選べます
+
+私たちはTypeScriptが大好きで、スケールさせるアプリを構築するための素晴らしいツールだと確信しています。とはいえ、Vueコミュニティがいかにシンプルさを重視しているかは、ツールや言語などでわかっています。実際、そもそもVueに興味を持ったのはそのおかげかもしれません。シンプルに開始し、必要に応じてスケールアップします。
+
+したがって、TypeScriptの代わりにJavaScriptを使うことができます。Ionic Vueアプリケーションを生成したら、次の手順を実行してください。
+
+1. TypeScriptの依存を削除:
+
+```shell
+npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
+```
+
+2. すべての `.ts` ファイルの拡張子を `.js` にします。blank Ionic Vueアプリでは、 `router/index.ts` と `main.ts` が該当します。
+
+3. `@vue/typescript/recommended` と `@typescript-eslint/no-explicit-any: ‘off’, ` を `.eslintrc.js` から削除します。
+
+4. `router/index.js` から `Array<RouteRecordRaw>` を削除します。
+
+5. `shims-vue.d.ts`ファイルを削除します。
+
+6. Vueコンポーネントにある `script` タグから `lang="ts"` を削除します。blank Ionic Vueアプリの場合、 `App.vue` と `views/HomePage.vue` が該当します。
+
+
+## Vueコンポーネントの確認
+
+アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `main.ts` になります。エディタでプロジェクトを開き、`main.ts` を確認すると、次のように表示されます:
+
+```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.
+
+`App.vue` を開くと、次のように表示されます:
+
+```html
+<template>
+  <ion-app>
+    <ion-router-outlet />
+  </ion-app>
+</template>
+
+<script setup lang="ts">
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+</script>
+```
+
+scriptに書かれているimportのグループを分解してみていきましょう。
+
+```tsx
+<script setup lang="ts">
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+</script>
+```
+
+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`. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
+
+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).
+
+次に、テンプレートを見てみましょう。
+
+```html
+<template>
+  <ion-app>
+    <ion-router-outlet />
+  </ion-app>
+</template>
+```
+
+すべてのVueコンポーネントには `<template>` が必要です。その中に `IonApp` と `IonRouterOutlet` のコンポーネントを配置します。
+
+## Initializing the router
+
+## ルーターのインストール
+
+Ionic Vueは内部的に [vue-router](https://router.vuejs.org/) を使用しているため、Vue Routerにすでに慣れている場合は、これまでの知識をIonic Vueのナビゲーションに適用できます。先ほど述べたルータの設定を見てみましょう。`router/index.ts` で次のように表示されます。
+
+```tsx
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import HomePage from '@/views/HomePage.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
+```
+
+:::note
+この例では、Ionic VueのBlank starterを使っているので、実際にみるrouteは少し違うかもしれません
+:::
+
+ここでの設定は `vue-router` を直接使用する場合と同じですが、代わりに `@ionic/vue-router` パッケージから `createRouter` や `createWebHistory` などの依存関係をインポートする必要があります。
+
+依存関係をインポートした後、 `routes` 配列に route を宣言できます。そこから、 routerインスタンスを作成し、routeと使用するhistoryのタイプを提供できます。
+
+Ionic Vueでは、遅延ローディングはすぐに使うことができます。 `Home` コンポーネントをインポートする代わりに、次の操作を実行することもできます:
+
+```tsx
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: () => import('@/views/HomePage.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/HomePage.vue'`, we could simply do `'@/views/HomePage.vue'`.
+
+## コンポーネントのスタイル
+
+ここでは、 `App` コンポーネントを変更する必要はあまりありません。コンテナコンポーネントの基本的な例です。ルータロジックを設定すると、指定されたURLルートに一致するコンポーネントをレンダリングするだけで済みます。すでに1つのコンポーネント/ルータが設定されているので、 `Home` コンポーネントを変更しましょう。
+
+現在、 `Home` コンポーネントはこうなっています:
+
+![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 setup lang="ts">
+  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</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>
+```
+
+最初に確認した `App` コンポーネントと同様に、特定のIonic Frameworkコンポーネントのインポート、Vueからのインポート、Vueコンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。
+
+スタイルに `scoped` を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vueアプリケーションでは、 `scoped` のついたスタイルを使用することを強くお勧めします。
+
+`IonPage` はすべてのページ(route/URLを持つコンポーネント)の基本コンポーネントであり、header, title, contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。
+
+:::note
+独自のページを作成する場合は、 `IonPage` をそのルート・コンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、Ionic Frameworkコンポーネントが依存するベースCSSを提供するだけでなく、トランジションが適切に動作することを保証するために重要です。
+:::
+
+`IonHeader` は、ページの先頭に配置されるコンポーネントです。これは、フレックスボックスベースのレイアウトを処理する以外には、単独ではあまり機能しません。これは、`IonToolbar` や `IonSearchbar`などのコンポーネントを保持するためのものです。
+
+`IonContent` は、その名前が示すように、ページのメインコンテンツ領域です。ユーザーが操作するスクロール可能なコンテンツと、アプリで使用できるスクロールイベントを提供する役割を担っています。
+
+現在のコンテンツは比較的シンプルで実際のアプリで使えるものは何も入っていないので、それを変えましょう。
+
+:::note
+簡潔に表記するために、関数宣言や他のコンポーネントからのインポート文など、コンポーネントの繰り返し部分を除外します。
+:::
+
+```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>
+
+<script setup lang="ts">
+  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
+```
+
+ここでは、 `IonContent` に `IonList` と `IonItem` コンポーネントを追加します。ここでは `IonItem` を中心に説明します。
+
+```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>
+```
+
+コードを見ると、 `slot` という特殊な属性があります。これは、レンダリング時に `IonCheckbox` を配置する場所を `IonItem` に知らせるためのキーです。これはVue APIではなく、Web標準APIです。また、Vue 2のslot APIとは異なります。
+
+Ionic Frameworkの別のコンポーネントであるFAB（フローティング・アクション・ボタン）を見てみましょう。FABは、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。このFABには、FAB、FABボタンおよびアイコンの3つのコンポーネントが必要です。
+
+```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 setup>
+  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { add } from 'ionicons/icons';
+</script>
+```
+
+メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
+
+次に、これにクリックハンドラを設定します。FABボタンをクリックすると、新しいページ(この後、すぐに作成します)に移動します。これを行うには、Vue RouterのナビゲーションAPIにアクセスする必要があります。これは `useRouter` パッケージから `vue-router` をインポートすることで実現できます。
+
+```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 setup>
+  import { add } from 'ionicons/icons';
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+</script>
+```
+
+このコンポーネントファイルでは、 `useRouter` 関数をインポートしています。この関数を呼び出すと、コンポーネントからルーティングを操作することができます。つまり、Vue Routerから履歴APIにアクセスし、新しいrouteをナビゲーションスタックにプッシュすることができます。利用方法は `IonFabButton` にクリックイベントを追加し、`router.push` を呼び出すだけです。この場合、私たちは `/new` というrouteにナビゲーションします。
+
+```html
+<ion-fab-button @click="() => router.push('/new')"> ... </ion-fab-button>
+```
+
+## 新しいrouteを作成する
+
+これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しいrouteをルーターの宣言に追加する必要があります。 `router/index.ts` を開いて、 `new` のrouteを追加します。
+
+```tsx
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import HomePage from '@/views/HomePage.vue';
+import NewItem from '@/views/NewItem.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/new',
+    name: 'NewItem',
+    component: NewItem,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
+```
+
+routeに `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
+
+新しく `NewItem.vue` ファイルを作成します。
+
+```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 setup lang="ts">
+  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</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.
+:::
+
+ここでの内容は、 `Home` コンポーネントに似ています。異なるのは、 `IonBackButton` コンポーネントです。これは、前のrouteに戻るために使用されます。簡単でしょ?わかりました、でもページをリロードしたらどうなりますか?
+
+この場合、インメモリ内から履歴は失われるため、 戻るボタンは表示されません。この問題を解決するには、 `default-href` 属性値を、履歴がない場合にナビゲートするURLに設定します。
+
+```html
+<ion-back-button default-href="/home"></ion-back-button>
+```
+
+これで、アプリの履歴がない場合も、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 setup lang="ts">
+  import { IonButton, IonContent } from '@ionic/vue';
+  import { ref } from 'vue';
+
+  const content = ref();
+  const scrollToBottom = () => {
+    content.value.$el.scrollToBottom(300);
+  };
+</script>
+```
+
+## Adding Icons
+
+Ionic Vueには [Ionicons](https://ionic.io/ionicons/) がプリインストールされています。開発者がアプリケーションで使用できるオプションはいくつかあります。
+
+### 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 setup>
+  import { heart } from 'ionicons/icons';
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
+</script>
+```
+
+ここでやっていることを詳しく説明しましょう。まず、 `heart` のアイコンを `ionicons/icons` からインポートします。これにより、アイコンの適切なSVGデータがロードされます。
+
+Then we pass the icon data into the `ion-icon` component via the `icon` property.
+
+開発者は、モードに応じて異なるアイコンを設定することもできます:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-icon :ios="logoApple" :md="logoAndroid"></ion-icon>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup>
+  import { logoAndroid, logoApple } from 'ionicons/icons';
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
+</script>
+```
+
+> Note: これらのアイコン名は、読み込み時にはキャメルケースで読み込む必要があります。
+
+### グローバルインポート
+
+もう1つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
+
+とはいえ、特定のアイコンをグローバルにロードすることに意味があるユースケースがあるかもしれません:
+
+**main.ts**
+
+```tsx
+import { addIcons } from 'ionicons';
+import { heart } from 'ionicons/icons';
+
+addIcons({
+  heart: heart,
+});
+```
+
+**HomePage.vue**
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-icon icon="heart"></ion-icon>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup>
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
+</script>
+```
+
+`main.ts` で `addIcons` 関数を利用すると、アイコンをグローバルに登録し、キーとして文字列で指定することができます。この場合、 `Home` コンポーネントでキーでアイコンを参照します。
+
+## ビルドの最適化
+
+Vueには、アプリケーションを調整するためのツールがいくつか用意されています。このセクションでは、Ionic Frameworkに最も関連するオプションについて説明します。
+
+### ローカルコンポーネント登録 (推奨)
+
+デフォルトでは、Ionic Frameworkコンポーネントはローカルに登録されます。ローカルでの登録では、これらのコンポーネントはそれぞれのVueコンポーネントにインポートされ、提供されます。これは、遅延読み込みとツリーの共有がIonic Frameworkコンポーネントで正しく動作するため、推奨される方法です。
+
+この方法の1つの欠点は、Ionic Frameworkコンポーネントを何度もインポートし直すのが面倒なことです。しかし、その見返りとして得られるパフォーマンス上のメリットには価値があると考えています。
+
+また、ローカルに登録されたコンポーネントはサブコンポーネントでは使用できません。サブコンポーネントで使用するためには、Ionic Frameworkコンポーネントを再インポートする必要があります。
+
+ローカルコンポーネント登録の仕組みを見てみましょう:
+
+```html
+<template>
+  <ion-page>
+    <ion-content>
+      <SubComponent></SubComponent>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+  import { IonContent, IonPage } from '@ionic/vue';
+  import SubComponent from '@/components/SubComponent.vue';
+</script>
+```
+
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. 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.
+
+詳細については、<a href="https://v3.vuejs.org/guide/component-registration.html#local-registration" target="_blank" rel="noopener noreferrer">Local Registration Vue Documentation</a> のマニュアルを参照してください。
+
+### グローバルコンポーネント登録
+
+コンポーネントを登録するためのもう1つのオプションは、グローバル登録を使用することです。グローバル登録には、 `main.ts` で使用するコンポーネントをインポートし、Vueアプリインスタンスで`component` メソッドを呼び出すことが含まれます。
+
+これにより、VueアプリにIonic Frameworkコンポーネントを追加するのは簡単になりますが、グローバル登録は理想的ではありません。Vueのドキュメントを引用すると、「Webpackなどのビルドシステムを使用している場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントの使用を停止しても、最終ビルドに含めることができます。これにより、ユーザーがダウンロードしなければならないJavaScriptの量が不必要に増加します」とあります。
+
+グローバルコンポーネント登録の仕組みを見てみましょう:
+
+**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 setup lang="ts">
+  import SubComponent from '@/components/SubComponent.vue';
+</script>
+```
+
+上の例では、 `IonPage` コンポーネントと `IonPage` コンポーネントを使用しています。これらを使用するには、まず `main.ts` の `@ionic/vue` からインポートします。次に、appインスタンスで `component` メソッドを呼び出し、タグ名とコンポーネント定義を渡します。これを行うと、各Vueコンポーネントにコンポーネントをインポートしなくても、アプリケーションの残りの部分でコンポーネントを使用できます。
+
+詳細については、<a href="https://v3.vuejs.org/guide/component-registration.html#global-registration" target="_blank" rel="noopener noreferrer">Global Registration Vue Documentation</a> のドキュメントを参照してください。
+
+### JavaScriptのプリフェッチ
+
+デフォルトでは、Vue CLIはアプリケーション内のJavaScriptのプリフェッチ・ヒントを自動的に生成します。プリフェッチでは、ブラウザのアイドル時間を利用して、ユーザーが近い将来にアクセスする可能性のある文書をダウンロードします。ユーザーがプリフェッチされたドキュメントを必要とするページにアクセスすると、ブラウザのキャッシュからすぐに提供できます。
+
+プリフェッチは帯域幅を消費するため、大規模なアプリケーションを使用している場合は無効にすることをお勧めします。これを行うには、`vue.config.js`ファイルを変更または作成します:
+
+**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
+```
+
+次に、プロジェクトをビルドしてから利用するプラットフォームを選択します:
+
+```shell
+ionic build
+ionic cap add ios
+ionic cap add android
+```
+
+iOSとAndroidのプロジェクトを開いたり、ビルド、実行するのに、ネイティブのIDE(Xcode と Android Studio)を使います:
+
+```shell
+ionic cap open ios
+ionic cap open android
+```
+
+詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
+
+次に、 [すべての利用可能なAPIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
+
+```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="imageSrc" />
+      <ion-button @click="takePhoto()">Take Photo</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+  import { IonButton, IonContent, IonHeader, IonPage, IonTitle } from '@ionic/vue';
+  import { ref } from 'vue';
+  import { Camera, CameraResultType } from '@capacitor/camera';
+
+  const imageSrc = ref('');
+  const takePhoto = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri,
+    });
+
+    imageSrc.value = image.webPath;
+  };
+</script>
+```
+
+## 次にすること
+
+このガイドでは、Ionic Vueアプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としてのCapacitorの紹介について説明した。VueとCapacitorを使って完全なIonic Frameworkアプリを構築するには、我々の [First App guide](your-first-app.md) をご覧ください。
+
+Ionic Frameworksのコンポーネントの詳細については、 [component API pages](https://ionicframework.com/docs/components) を参照してください。Vueの詳細については、 [Vue Docs](https://v3.vuejs.org/) を参照のこと。ネイティブ機能の構築を続けるには、[Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
+
+アプリ構築をお楽しみください! 🎉
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
new file mode 100644
index 00000000000..4f02bd9813c
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
@@ -0,0 +1,570 @@
+---
+title: Migrating From ion-slides to Swiper.js
+---
+
+<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.
+
+:::note
+Swiper's Vue component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
+
+Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
+:::
+
+## 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@latest
+```
+
+## 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>
+```
+
+:::note
+Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
+### 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. However, using this module is **not** required to use Swiper.js in Ionic.
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md
new file mode 100644
index 00000000000..a39c00b38b3
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md
@@ -0,0 +1,32 @@
+---
+title: データストレージ
+sidebar_label: ストレージ
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md
new file mode 100644
index 00000000000..fee206f3407
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md
@@ -0,0 +1,3 @@
+# テスト
+
+Coming Soon!
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md
new file mode 100644
index 00000000000..faf7f6f620c
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md
@@ -0,0 +1,134 @@
+---
+title: トラブルシューティング
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md
new file mode 100644
index 00000000000..bf3918d19ee
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md
@@ -0,0 +1,184 @@
+# ユーティリティ関数
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md
new file mode 100644
index 00000000000..f0f65260b51
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md
@@ -0,0 +1,143 @@
+# 仮想スクロール
+
+:::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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
new file mode 100644
index 00000000000..02e5e8ab98f
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
@@ -0,0 +1,222 @@
+---
+title: 'Your First Ionic App: Vue'
+sidebar_label: はじめてのアプリ
+---
+
+<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
+```
+
+:::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
+```
+
+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 `ExploreContainer` node from the HTML markup in the `template`.
+
+```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 setup>`  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';
+```
+
+Since our pages are generated as [Vue Single File Components](https://vuejs.org/api/sfc-spec.html) using the [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html#script-setup) syntax these items are now exposed for use in our template.
+
+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>
+```
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..8de9fdfdcd4
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
@@ -0,0 +1,155 @@
+---
+sidebar_label: カメラ撮影
+---
+
+# 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:
+
+```typescript
+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:
+
+```typescript
+export const 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 `Tab2Page.vue` and import it:
+
+```tsx
+import { usePhotoGallery } from '@/composables/usePhotoGallery';
+```
+
+Destructure the `takePhoto` function from `usePhotoGallery` so we can use it in our `template`:
+
+```tsx
+<script setup lang="ts">
+import {
+  IonContent,
+  IonCol,
+  IonFab,
+  IonFabButton,
+  IonGrid,
+  IonPage,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue';
+import { camera, trash, close } from 'ionicons/icons';
+import { usePhotoGallery } from '@/composables/usePhotoGallery';
+
+const { takePhoto } = usePhotoGallery();
+</script>
+```
+
+Save the file. Start the development server via `ionic serve` if it is not already running. In your browser, 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;
+}
+```
+
+At the top of the `usePhotoGallery` function, 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` function, 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();
+```
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..1c5be3c3957
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md
@@ -0,0 +1,70 @@
+---
+sidebar_label: 写真の保存
+---
+
+# 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`).
+
+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> => {
+  // Fetch the photo, read as a blob, then convert to base64 format
+  const response = await fetch(photo.webPath!);
+  const blob = await response.blob();
+  const 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md
new file mode 100644
index 00000000000..5abafd7eba3
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: 写真の読み込み
+---
+
+# 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). Earlier we had already imported `onMounted` from Vue:
+
+```tsx
+import { ref, onMounted, watch } from 'vue';
+```
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md
new file mode 100644
index 00000000000..303530bf690
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md
@@ -0,0 +1,80 @@
+# モバイルデバイス機能の追加
+
+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 and `Capacitor` from Capacitor's `core` package:
+
+```tsx
+import { isPlatform } from '@ionic/vue';
+import { Capacitor } from '@capacitor/core';
+```
+
+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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md
new file mode 100644
index 00000000000..7e31d2b0796
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md
@@ -0,0 +1,118 @@
+---
+title: iOS と Android へデプロイ
+sidebar_label: モバイルへのデプロイ
+---
+
+<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md
new file mode 100644
index 00000000000..e432a9eb581
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: ライブリロード
+---
+
+# 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 `Tab2Page.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
+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 `script 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, 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/8-distribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..d6b38ea5b5a
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-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/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 962eb059ddb..1514c23d2ae 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -134,7 +134,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`",
+          "docs": "アコーディオングループの値です。これは、どのアコーディオンを展開するかを制御します。これは、`multiple=\"true\"`のときだけ、文字列の配列でなければなりません。",
           "docsTags": [],
           "values": [
             {
@@ -162,7 +162,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
+          "docs": "クリックなどのユーザー操作により、valueプロパティが変化したときに発生します。プログラムによってvalueプロパティを設定した場合は、このイベントは発生しません。",
           "docsTags": []
         }
       ],
@@ -291,7 +291,7 @@
           "mutable": false,
           "attr": "toggle-icon-slot",
           "reflectToAttr": false,
-          "docs": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`.",
+          "docs": "トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `\"end\"` です。",
           "docsTags": [],
           "default": "'end'",
           "values": [
@@ -512,7 +512,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code.",
+          "docs": "`true`の場合、アクションシートは開かれます。`false`の場合、アクションシートは閉じます。プレゼンテーションの細かな制御が必要な場合はこれを使用し、そうでない場合は actionSheetController または `trigger` プロパティを使用します。注意: アクションシートが終了しても、`isOpen`は自動的に`false`に戻されません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -621,7 +621,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked.",
+          "docs": "クリックするとアクションシートが開くトリガー要素に対応するID。",
           "docsTags": [],
           "values": [
             {
@@ -697,7 +697,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the action sheet has dismissed.\nShorthand for ionActionSheetDidDismiss.",
+          "docs": "アクションシートが解散した後に発行されます。ionActionSheetDidDismissの略記。",
           "docsTags": []
         },
         {
@@ -706,7 +706,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the action sheet has presented.\nShorthand for ionActionSheetWillDismiss.",
+          "docs": "アクションシートが提示された後に発行されます。ionActionSheetWillDismissの略語。",
           "docsTags": []
         },
         {
@@ -715,7 +715,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the action sheet has dismissed.",
+          "docs": "アクションシートが解散した後に発行されます。",
           "docsTags": []
         },
         {
@@ -724,7 +724,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the action sheet has presented.",
+          "docs": "アクションシートが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -733,7 +733,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the action sheet has dismissed.",
+          "docs": "アクションシートが解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -742,7 +742,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the action sheet has presented.",
+          "docs": "アクションシートが提示される前に発行されます。",
           "docsTags": []
         },
         {
@@ -751,7 +751,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the action sheet has dismissed.\nShorthand for ionActionSheetWillDismiss.",
+          "docs": "アクションシートが解散する前に発行されます。ionActionSheetWillDismissの略記。",
           "docsTags": []
         },
         {
@@ -760,7 +760,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the action sheet has presented.\nShorthand for ionActionSheetWillPresent.",
+          "docs": "アクションシートが提示される前に発行されます。ionActionSheetWillPresentの略記。",
           "docsTags": []
         }
       ],
@@ -1068,7 +1068,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code.",
+          "docs": "`true`の場合、アラートは開く。もし `false` ならば、アラートは閉じます。alertControllerや`trigger`プロパティを使用してください。注意: アラートが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1120,7 +1120,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
+          "docs": "アラートに表示されるメインメッセージ。`message`には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタムHTMLを文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -1199,7 +1199,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked.",
+          "docs": "クリックされるとアラートが開くトリガー要素に対応するID。",
           "docsTags": [],
           "values": [
             {
@@ -1275,7 +1275,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has dismissed.\nShorthand for ionAlertDidDismiss.",
+          "docs": "アラートが解除された後に発行されます。ionAlertDidDismissの略記。",
           "docsTags": []
         },
         {
@@ -1284,7 +1284,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the alert has presented.\nShorthand for ionAlertWillDismiss.",
+          "docs": "アラートが提示された後に発行されます。ionAlertWillDismissの略記。",
           "docsTags": []
         },
         {
@@ -1329,7 +1329,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has dismissed.\nShorthand for ionAlertWillDismiss.",
+          "docs": "アラートが解除される前に発行されます。ionAlertWillDismissの略記。",
           "docsTags": []
         },
         {
@@ -1338,7 +1338,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the alert has presented.\nShorthand for ionAlertWillPresent.",
+          "docs": "アラートが提示される前に発行されます。ionAlertWillPresentの略記。",
           "docsTags": []
         }
       ],
@@ -2618,7 +2618,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "折りたたみインジケータがクリックされたときに発します。",
+          "docs": "折りたたみインジケータがクリックされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -4106,7 +4106,7 @@
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
-          "docs": "How to pack the label and checkbox within a line.\n`\"start\"`: The label and checkbox will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and checkbox will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and checkbox will appear on opposite\nends of the line with space between the two elements.",
+          "docs": "ラベルとチェックボックスを1行にまとめる方法。`\"start\"`：ラベルとチェックボックスは、LTRでは左に、RTLでは右に表示されます。`\"end\"`：ラベルとチェックボックスは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとチェックボックスは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
           "docsTags": [],
           "default": "'space-between'",
           "values": [
@@ -4132,7 +4132,7 @@
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "チェックボックスに対して相対的にラベルを配置する場所。`\"start\"`：ラベルはLTRではチェックボックスの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではチェックボックスの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -4158,7 +4158,7 @@
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docs": "`legacy`プロパティを`true`に設定すると、強制的にレガシーフォームコントロールのマークアップを使用することができます。Ionicは、チェックボックスが`aria-label`属性を使用しているか、デフォルトスロットにテキストがある場合にのみ、モダンなフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントは最新のフォームマークアップを使用するようオプトインされる予定です。",
           "docsTags": [],
           "values": [
             {
@@ -4244,7 +4244,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
+          "docs": "クリックなどのユーザー操作によりcheckedプロパティが変更された場合に発生します。プログラムによってcheckedプロパティを設定した場合は、このイベントは発生しません。",
           "docsTags": []
         },
         {
@@ -4318,7 +4318,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "The label text to associate with the checkbox. Use the \"labelPlacement\" property to control where the label is placed relative to the checkbox."
+          "docs": "チェックボックスと関連付けるラベルテキスト。\"labelPlacement\"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。"
         }
       ],
       "parts": [
@@ -5096,7 +5096,7 @@
           "mutable": true,
           "attr": "force-overscroll",
           "reflectToAttr": false,
-          "docs": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, this does not disable the system bounce on iOS. That is an OS level setting.",
+          "docs": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。なお、これはiOSのシステムバウンスを無効にするものではありません。これはOSレベルの設定です。",
           "docsTags": [],
           "values": [
             {
@@ -5842,7 +5842,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `\"default\"` value refers to the default\nlocale set by your device.",
+          "docs": "ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`\"default\"`の値は、あなたのデバイスが設定するデフォルトのロケールを指します。",
           "docsTags": [],
           "default": "'default'",
           "values": [
@@ -6002,7 +6002,7 @@
           "mutable": false,
           "attr": "prefer-wheel",
           "reflectToAttr": false,
-          "docs": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`.",
+          "docs": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます：`presentation`が `\"date\"`, `\"date-time\"`, または `\"time-date\"`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます：`\"time\"`, `\"month\"`, `\"month-year\"`, または `\"year\"`.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -6019,7 +6019,7 @@
           "mutable": false,
           "attr": "presentation",
           "reflectToAttr": false,
-          "docs": "Which values you want to select. `\"date\"` will show\na calendar picker to select the month, day, and year. `\"time\"`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `\"date-time\"` will show the date picker first and time picker second.\n`\"time-date\"` will show the time picker first and date picker second.",
+          "docs": "どの値を選択するか。`\"date\"`はカレンダーピッカーを表示し、月、日、年を選択します。`\"time\"`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。`\"date-time\"`は、日付ピッカーを最初に、時間ピッカーを次に表示します。\"time-date\"`は、最初に時間ピッカー、2番目に日付ピッカーを表示します。",
           "docsTags": [],
           "default": "'date-time'",
           "values": [
@@ -6186,7 +6186,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the datetime as a valid ISO 8601 datetime string.\nThis should be an array of strings only when `multiple=\"true\"`.",
+          "docs": "datetimeの値を有効なISO 8601 datetime文字列として指定します。これは、`multiple=\"true\"`の場合のみ、文字列の配列です。",
           "docsTags": [],
           "values": [
             {
@@ -6262,7 +6262,7 @@
           },
           "signature": "reset(startDate?: string) => Promise<void>",
           "parameters": [],
-          "docs": "datetimeの内部状態をリセットするが、値は更新しない。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
+          "docs": "datetimeの内部状態をリセットするが、値は更新しません。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
           "docsTags": []
         }
       ],
@@ -7499,7 +7499,7 @@
           "mutable": false,
           "attr": "loading-text",
           "reflectToAttr": false,
-          "docs": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
+          "docs": "ロード中に表示するオプションのテキスト。`loadingText`には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。詳しくはこちら：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタムHTMLを文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -8049,7 +8049,7 @@
           "mutable": false,
           "attr": "counter",
           "reflectToAttr": false,
-          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.",
+          "docs": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -8084,7 +8084,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
+          "docs": "キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。",
           "docsTags": [],
           "values": [
             {
@@ -8164,7 +8164,7 @@
           "mutable": false,
           "attr": "error-text",
           "reflectToAttr": false,
-          "docs": "Text that is placed under the input and displayed when an error is detected.",
+          "docs": "Inputの下に配置され、エラーが検出されたときに表示されるテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -8183,7 +8183,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+          "docs": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -8207,7 +8207,7 @@
           "mutable": false,
           "attr": "helper-text",
           "reflectToAttr": false,
-          "docs": "Text that is placed under the input and displayed when no error is detected.",
+          "docs": "Inputの下に配置され、エラーが検出されなかった場合に表示されるテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -8274,7 +8274,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "The visible label associated with the input.",
+          "docs": "Inputに関連する可視ラベル。",
           "docsTags": [],
           "values": [
             {
@@ -8293,7 +8293,7 @@
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the input in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the input in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.\n`\"stacked\"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "入力に対してラベルを配置する位置。`\"start\"`：ラベルはLTRでは入力の左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRでは入力の右側、RTLでは左側に表示されます。\"floating\"`：`\"floating\"`：ラベルは、入力にフォーカスが当たっているときや、入力に値があるときは小さく表示され、入力の上に表示されます。それ以外の場合は、入力の上に表示されます。`\"スタック(stacked)\"`：入力がぼやけた状態や値がない場合でも、ラベルは小さく表示され、入力の上に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -8327,7 +8327,7 @@
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docs": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。",
           "docsTags": [],
           "values": [
             {
@@ -8557,7 +8557,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
-          "docs": "The shape of the input. If \"round\" it will have an increased border radius.",
+          "docs": "入力の形状を指定します。\"round\"の場合、境界線の半径が大きくなります。",
           "docsTags": [],
           "values": [
             {
@@ -8755,7 +8755,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired for `<ion-input>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
+          "docs": "`ionChange` イベントは、ユーザーが要素の値を変更したときに `<ion-input>` 要素に対して発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは必ずしも要素の値が変更されるたびに発生するわけではない。  ユーザーが要素と対話する方法に応じて、`ionChange` イベントは次のような異なるタイミングで発生します。 - ユーザーが明示的に変更をコミットしたとき (例えば、`<ion-input type=\"date\">` の日付ピッカーから日付を選択し、「Enter」キーを押すなど)。- 値が変更された後、要素がフォーカスを失ったとき：ユーザーの対話がタイピングである要素について。",
           "docsTags": []
         },
         {
@@ -8773,7 +8773,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionInput` event fires when the `value` of an `<ion-input>` element\nhas been changed.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
+          "docs": "`ionInput`イベントは `<ion-input>` 要素の `value` が変更されたときに発生するイベントです。  テキスト入力を受け付ける要素 (`type=text`, `type=tel` など) のインタフェースは [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) である。その他の要素のインタフェースは [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) です。編集時に入力がクリアされる場合、型は `null` となります。",
           "docsTags": []
         }
       ],
@@ -8787,22 +8787,22 @@
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the border below the input when using helper text, error text, or counter"
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のInput下のボーダーの色"
         },
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Radius of the input"
+          "docs": "Inputの半径"
         },
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the border below the input when using helper text, error text, or counter"
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the border below the input when using helper text, error text, or counter"
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅"
         },
         {
           "name": "--color",
@@ -8812,17 +8812,17 @@
         {
           "name": "--highlight-color-focused",
           "annotation": "prop",
-          "docs": "The color of the highlight on the input when focused"
+          "docs": "フォーカスされたときの入力のハイライトの色"
         },
         {
           "name": "--highlight-color-invalid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the input when invalid"
+          "docs": "入力が無効な場合のハイライトの色"
         },
         {
           "name": "--highlight-color-valid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the input when valid"
+          "docs": "有効時の入力のハイライトの色"
         },
         {
           "name": "--padding-bottom",
@@ -9795,7 +9795,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+          "docs": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -10217,11 +10217,11 @@
         },
         {
           "name": "error",
-          "docs": "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
+          "docs": "コンテンツはアイテムの下に配置され、エラーが検出されたときに表示されます。**DEPRECATED** 代わりに ion-input または ion-textarea の \"errorText\" プロパティを使用してください。"
         },
         {
           "name": "helper",
-          "docs": "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
+          "docs": "コンテンツはアイテムの下に配置され、エラーが検出されない場合に表示されます。**DEPRECATED** 代わりに ion-input または ion-textarea の \"helperText\" プロパティを使用してください。"
         },
         {
           "name": "start",
@@ -10806,7 +10806,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code.",
+          "docs": "`true`の場合、ローディングインジケータは開きます。`false`の場合、ローディングインジケータは閉じます。より細かく表示を制御したい場合に使用します。そうでない場合は、loadingController または `trigger` プロパティを使用してください。注意: ローディングインジケータが終了しても、`isOpen`は自動的に `false`に戻されません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -10858,7 +10858,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "Optional text content to display in the loading indicator.\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
+          "docs": "ローディングインジケータに表示するテキストコンテンツを任意で指定します。  このプロパティは、文字列としてカスタムHTMLを受け入れます。コンテンツはデフォルトでプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -10990,7 +10990,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked.",
+          "docs": "クリックするとローディングインジケータが開くトリガー要素に対応するIDです。",
           "docsTags": [],
           "values": [
             {
@@ -11066,7 +11066,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading indicator has dismissed.\nShorthand for ionLoadingDidDismiss.",
+          "docs": "ローディングインジケータが解除された後に発行されます。ionLoadingDidDismissの略記。",
           "docsTags": []
         },
         {
@@ -11075,7 +11075,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the loading indicator has presented.\nShorthand for ionLoadingWillDismiss.",
+          "docs": "ローディングインジケータが提示された後に放出される。ionLoadingWillDismissの略記。",
           "docsTags": []
         },
         {
@@ -11120,7 +11120,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading indicator has dismissed.\nShorthand for ionLoadingWillDismiss.",
+          "docs": "ローディングインジケータが解散する前に発行されます。ionLoadingWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -11129,7 +11129,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the loading indicator has presented.\nShorthand for ionLoadingWillPresent.",
+          "docs": "ローディングインジケータが提示される前に発行されます。ionLoadingWillPresentの略記。",
           "docsTags": []
         }
       ],
@@ -11779,7 +11779,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "メニューが閉じられたときに発します。",
+          "docs": "メニューが閉じられたときに発行されます。",
           "docsTags": []
         },
         {
@@ -11797,7 +11797,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "メニューが閉じられようとするときに発します。",
+          "docs": "メニューが閉じられようとするときに発行されます。",
           "docsTags": []
         },
         {
@@ -11806,7 +11806,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "メニューが開かれようとするときに発します。",
+          "docs": "メニューが開かれようとするときに発行されます。",
           "docsTags": []
         }
       ],
@@ -13321,7 +13321,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
+          "docs": "`true`の場合、ピッカーは開きます。`false`の場合、ピッカーは閉じます。ピッカーの表示をより細かく制御したい場合に使用します。それ以外の場合は pickerController や `trigger` プロパティを使用します。注意: ピッカーが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13411,7 +13411,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
+          "docs": "クリックするとピッカーが開くトリガー要素に対応するID。",
           "docsTags": [],
           "values": [
             {
@@ -13503,7 +13503,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
+          "docs": "ピッカーが解散した後に発行されます。ionPickerDidDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13512,7 +13512,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
+          "docs": "ピッカーが提示された後に発行されます。ionPickerWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13557,7 +13557,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
+          "docs": "ピッカーが解散する前に発行されます。ionPickerWillDismissの略記です。",
           "docsTags": []
         },
         {
@@ -13566,7 +13566,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
+          "docs": "ピッカーが提示される前に発行されます。ionPickerWillPresentの略記です。",
           "docsTags": []
         }
       ],
@@ -13687,7 +13687,7 @@
           "mutable": true,
           "attr": "alignment",
           "reflectToAttr": false,
-          "docs": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode.",
+          "docs": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `\"center\"` で、`md` モードでは `\"start\"` です。",
           "docsTags": [],
           "values": [
             {
@@ -13971,7 +13971,7 @@
           "mutable": false,
           "attr": "reference",
           "reflectToAttr": false,
-          "docs": "Describes what to position the popover relative to.\nIf `\"trigger\"`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `\"event\"`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
+          "docs": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `\"trigger\"` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetによって決定されます。もし `\"event\"` ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。",
           "docsTags": [],
           "default": "'trigger'",
           "values": [
@@ -14010,7 +14010,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "Describes which side of the `reference` point to position\nthe popover on. The `\"start\"` and `\"end\"` values are RTL-aware,\nand the `\"left\"` and `\"right\"` values are not.",
+          "docs": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。`\"start\"` と `\"end\"` の値はRTLを意識しており、`\"left\"` と `\"right\"` の値はそうではない。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -14048,7 +14048,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be determined by the content in\nthe popover.",
+          "docs": "ポップオーバーの幅を計算する方法を記述します。もし `\"cover\"` ならば、ポップオーバーの幅はトリガーの幅と一致します。auto\"` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定される。",
           "docsTags": [],
           "default": "'auto'",
           "values": [
@@ -14106,7 +14106,7 @@
           "mutable": false,
           "attr": "trigger-action",
           "reflectToAttr": false,
-          "docs": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `\"click\"`, the popover will be presented when the trigger is left clicked.\nIf `\"hover\"`, the popover will be presented when a pointer hovers over the trigger.\nIf `\"context-menu\"`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
+          "docs": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。 `trigger`プロパティが `undefined` の場合は適用されません。`\"click\"` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。`\"hover\"` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニューの場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
           "docsTags": [],
           "default": "'click'",
           "values": [
@@ -14766,7 +14766,7 @@
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
-          "docs": "How to pack the label and radio within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.",
+          "docs": "ラベルとラジオを1行にまとめる方法。`\"start\"` とします：ラベルとラジオは、LTRでは左側に、RTLでは右側に表示されます。`\"end\"`：ラベルとラジオは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとラジオは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
           "docsTags": [],
           "default": "'space-between'",
           "values": [
@@ -14792,7 +14792,7 @@
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "ラジオから相対的にラベルを配置する場所。`\"start\"`：ラベルはLTRではラジオの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではラジオの右、RTLでは左に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -14818,7 +14818,7 @@
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docs": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。",
           "docsTags": [],
           "values": [
             {
@@ -14933,7 +14933,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "The label text to associate with the radio. Use the \"labelPlacement\" property to control where the label is placed relative to the radio."
+          "docs": "ラジオに関連付けるラベルテキストです。\"labelPlacement\"プロパティを使用して、ラジオに対するラベルの相対的な配置を制御します。"
         }
       ],
       "parts": [
@@ -15085,7 +15085,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "How long, in milliseconds, to wait to trigger the\n`ionInput` event after each change in the range value.",
+          "docs": "レンジの値が変化するたびに `ionInput` イベントをトリガーするまでの待ち時間（ミリ秒単位）。",
           "docsTags": [],
           "values": [
             {
@@ -15138,7 +15138,7 @@
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "範囲に対してラベルを配置する場所。`\"start\"`：ラベルはLTRでは範囲の左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRでは範囲の右側、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作をします。長いテキストは省略記号(\"...\")で切り捨てられます。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -15164,7 +15164,7 @@
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docs": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。",
           "docsTags": [],
           "values": [
             {
@@ -15365,7 +15365,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "レンジの焦点が合わなくなったときに発します。",
+          "docs": "レンジの焦点が合わなくなったときに発行されます。",
           "docsTags": []
         },
         {
@@ -15374,7 +15374,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
+          "docs": "`ionChange`イベントは、`<ion-range>`要素に対して、ユーザーがその要素の値を変更したときに発生します： - ドラッグした後にノブを離したとき - キーボードの矢印でノブを動かしたとき プログラムで値を変更したときは、`ionChange`イベントは発生しません。",
           "docsTags": []
         },
         {
@@ -15383,7 +15383,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "レンジのフォーカスが合ったときに発します。",
+          "docs": "レンジのフォーカスが合ったときに発行されます。",
           "docsTags": []
         },
         {
@@ -15392,7 +15392,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionInput` event is fired for `<ion-range>` elements when the value\nis modified. Unlike `ionChange`, `ionInput` is fired continuously\nwhile the user is dragging the knob.",
+          "docs": "`ionInput`イベントは、`<ion-range>`要素に対して、値が変更されたときに発生するイベントです。`ionChange`とは異なり、`ionInput`はユーザがノブをドラッグしている間、継続して発生します。",
           "docsTags": []
         },
         {
@@ -15479,7 +15479,7 @@
         },
         {
           "name": "label",
-          "docs": "The label text to associate with the range. Use the \"labelPlacement\" property to control where the label is placed relative to the range."
+          "docs": "範囲に関連付けるラベルテキスト。`\"labelPlacement`\"プロパティを使用して、ラベルが範囲に対してどの位置に配置されるかを制御します。"
         },
         {
           "name": "start",
@@ -15552,7 +15552,7 @@
           "mutable": false,
           "attr": "pulling-text",
           "reflectToAttr": false,
-          "docs": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
+          "docs": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -15629,7 +15629,7 @@
           "mutable": false,
           "attr": "refreshing-text",
           "reflectToAttr": false,
-          "docs": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
+          "docs": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -15817,7 +15817,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発します。",
+          "docs": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発行されます。",
           "docsTags": []
         },
         {
@@ -15835,7 +15835,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ユーザーが引き下げを開始するときに発します。",
+          "docs": "ユーザーが引き下げを開始するときに発行されます。",
           "docsTags": []
         }
       ],
@@ -16604,7 +16604,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ルートが変更されたときに発します。",
+          "docs": "ルートが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17052,7 +17052,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
+          "docs": "キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。",
           "docsTags": [],
           "values": [
             {
@@ -17415,7 +17415,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
+          "docs": "`ionChange` イベントは、`<ion-searchbar>` 要素に対して、ユーザがその要素の値を変更したときに発生します。ionInput` イベントとは異なり、要素の値が変更されるたびに `ionChange` イベントが発生する必要はない。`ionChange`イベントは、ユーザーによって値がコミットされたときに発生します。これは、要素のフォーカスが外れたときや、\"Enter \"キーが押されたときに発生します。また、クリアボタンやキャンセルボタンをクリックしたときにも `ionChange` イベントが発生することがあります。",
           "docsTags": []
         },
         {
@@ -17442,7 +17442,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the `value` of the `ion-searchbar` element has changed.",
+          "docs": "ion-searchbar`要素の `value` が変更されたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -18143,7 +18143,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\nThis property is only available when using the modern select syntax.",
+          "docs": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです：`\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色についての詳細は [theming](/docs/theming/basics) を参照してください。  このプロパティは、modern select構文を使用する場合にのみ利用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -18240,7 +18240,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+          "docs": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -18307,7 +18307,7 @@
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
-          "docs": "How to pack the label and select within a line.\n`justify` does not apply when the label and select\nare on different lines when `labelPlacement` is set to\n`\"floating\"` or `\"stacked\"`.\n`\"start\"`: The label and select will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and select will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and select will appear on opposite\nends of the line with space between the two elements.",
+          "docs": "ラベルとセレクトを1行にまとめる方法。`labelPlacement`が `\"floating\"` または `\"stacked\"` に設定されている場合、ラベルとセレクトが異なる行にあるときは `justify` は適用されません。`\"start\"`：ラベルとセレクトはLTRでは左側に、RTLでは右側に表示されます。`\"end\"`：ラベルとセレクトはLTRでは右に、RTLでは左に表示されます。\"space-between\"`：ラベルとセレクトは行の反対側の端に表示され、2つの要素の間にはスペースがあります。",
           "docsTags": [],
           "default": "'space-between'",
           "values": [
@@ -18333,7 +18333,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "The visible label associated with the select.",
+          "docs": "セレクトに関連する可視ラベル。",
           "docsTags": [],
           "values": [
             {
@@ -18352,7 +18352,7 @@
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the select.\n`\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.\n`\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\nWhen using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`.",
+          "docs": "セレクトに対してラベルを配置する位置。`\"start\"`：ラベルはLTRではセレクトの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではセレクトの右側に、RTLでは左側に表示されます。\"floating\"`：ラベルは、セレクトがフォーカスされているか、セレクトに値がある場合、小さく表示され、セレクトの上に表示されます。それ以外の場合は、セレクトの上に表示されます。\"stacked\"`：ラベルは、セレクトがぼやけた状態や値がない状態でも、小さく表示され、セレクトの上に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。`\"floating\"`や \"stacked\"`を使用する場合は、selectに `value` か `placeholder` のどちらかを指定して初期化することをお勧めします。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -18389,7 +18389,7 @@
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docs": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。",
           "docsTags": [],
           "values": [
             {
@@ -18521,7 +18521,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
-          "docs": "The shape of the select. If \"round\" it will have an increased border radius.",
+          "docs": "セレクトの形状を指定します。`round`の場合、境界線の半径が大きくなります。",
           "docsTags": [],
           "values": [
             {
@@ -18541,7 +18541,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the select.",
+          "docs": "セレクトの値です。",
           "docsTags": [],
           "values": [
             {
@@ -18586,7 +18586,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "選択がキャンセルされたときに発します。",
+          "docs": "選択がキャンセルされたときに発行されます。",
           "docsTags": []
         },
         {
@@ -18613,7 +18613,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "セレクトにフォーカスが当たったときに発します。",
+          "docs": "セレクトにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
@@ -18622,7 +18622,7 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the select"
+          "docs": "セレクトの背景"
         },
         {
           "name": "--border-color Color of the select border",
@@ -18692,7 +18692,7 @@
         {
           "name": "--ripple-color",
           "annotation": "prop",
-          "docs": "The color of the ripple effect on MD mode."
+          "docs": "MDモード時のリップルエフェクトの色です。"
         }
       ],
       "slots": [],
@@ -19842,7 +19842,7 @@
           "mutable": true,
           "attr": "layout",
           "reflectToAttr": false,
-          "docs": "Set the layout of the text and icon in the tab bar.\nIt defaults to `\"icon-top\"`.",
+          "docs": "タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは`\"icon-top\"`です。",
           "docsTags": [],
           "values": [
             {
@@ -20408,7 +20408,7 @@
           "mutable": false,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
-          "docs": "If `true`, the value will be cleared after focus upon edit.",
+          "docs": "true`の場合、編集時にフォーカスが当たった後、値がクリアされる。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20499,7 +20499,7 @@
           "mutable": false,
           "attr": "counter",
           "reflectToAttr": false,
-          "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit.\nDevelopers must also set the `maxlength` property for the counter to be calculated correctly.",
+          "docs": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -20534,7 +20534,7 @@
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.",
+          "docs": "キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。",
           "docsTags": [],
           "values": [
             {
@@ -20614,7 +20614,7 @@
           "mutable": false,
           "attr": "error-text",
           "reflectToAttr": false,
-          "docs": "Text that is placed under the textarea and displayed when an error is detected.",
+          "docs": "テキストエリアの下に配置され、エラーが検出されたときに表示されるテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -20633,7 +20633,7 @@
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
-          "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
+          "docs": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -20657,7 +20657,7 @@
           "mutable": false,
           "attr": "helper-text",
           "reflectToAttr": false,
-          "docs": "Text that is placed under the textarea and displayed when no error is detected.",
+          "docs": "textareaの下に配置され、エラーが検出されなかった場合に表示されるテキストです。",
           "docsTags": [],
           "values": [
             {
@@ -20724,7 +20724,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "The visible label associated with the textarea.",
+          "docs": "テキストエリアに関連する可視ラベル。",
           "docsTags": [],
           "values": [
             {
@@ -20743,7 +20743,7 @@
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the textarea.\n`\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.\n`\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "テキストエリアと相対的にラベルを配置する場所。\"start\"`：ラベルはLTRではテキストエリアの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではテキストエリアの右側に、RTLでは左側に表示されます。\"floating\"`：ラベルは、テキストエリアにフォーカスが当たっているか、値がある場合、小さく表示され、テキストエリアの上に表示されます。それ以外の場合はtextareaの上に表示されます。`\"stacked\"`：テキストエリアがぼやけた状態や値がない場合でも、ラベルは小さく表示され、テキストエリアの上に表示されます。固定\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -20777,7 +20777,7 @@
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docs": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。",
           "docsTags": [],
           "values": [
             {
@@ -20796,7 +20796,7 @@
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
-          "docs": "This attribute specifies the maximum number of characters that the user can enter.",
+          "docs": "この属性は、ユーザが入力できる最大文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -20815,7 +20815,7 @@
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
-          "docs": "This attribute specifies the minimum number of characters that the user can enter.",
+          "docs": "この属性は、ユーザーが入力できる最小の文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -20944,7 +20944,7 @@
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
-          "docs": "The shape of the textarea. If \"round\" it will have an increased border radius.",
+          "docs": "テキストエリアの形状を指定します。round \"の場合、ボーダーの半径が大きくなります。",
           "docsTags": [],
           "values": [
             {
@@ -21067,7 +21067,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired for `<ion-textarea>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the element loses focus after its value\nhas been modified.",
+          "docs": "`ionChange` イベントは `<ion-textarea>` 要素に対して、ユーザがその要素の値を変更したときに発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは要素の値が変更されるたびに発生する必要はない。  値が変更された後、要素のフォーカスが外れると `ionChange` イベントが発生します。",
           "docsTags": []
         },
         {
@@ -21085,7 +21085,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionInput` event fires when the `value` of an `<ion-textarea>` element\nhas been changed.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
+          "docs": "`ionInput` イベントは、`<ion-textarea>` 要素の `value` が変更されたときに発生します。 `clearOnEdit` が有効な場合、ユーザがキーダウンイベントを実行してテキストエリアをクリアしたときに `ionInput` イベントが発生します。",
           "docsTags": []
         }
       ],
@@ -21099,7 +21099,7 @@
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of the border below the textarea when using helper text, error text, or counter"
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの色"
         },
         {
           "name": "--border-radius",
@@ -21109,12 +21109,12 @@
         {
           "name": "--border-style",
           "annotation": "prop",
-          "docs": "Style of the border below the textarea when using helper text, error text, or counter"
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンター使用時のテキストエリア下のボーダーのスタイル"
         },
         {
           "name": "--border-width",
           "annotation": "prop",
-          "docs": "Width of the border below the textarea when using helper text, error text, or counter"
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの幅"
         },
         {
           "name": "--color",
@@ -21124,17 +21124,17 @@
         {
           "name": "--highlight-color-focused",
           "annotation": "prop",
-          "docs": "The color of the highlight on the textarea when focused"
+          "docs": "フォーカスされたときのテキストエリアのハイライトの色"
         },
         {
           "name": "--highlight-color-invalid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the textarea when invalid"
+          "docs": "無効時のテキストエリア上のハイライトの色"
         },
         {
           "name": "--highlight-color-valid",
           "annotation": "prop",
-          "docs": "The color of the highlight on the textarea when valid"
+          "docs": "有効時のテキストエリアのハイライトの色"
         },
         {
           "name": "--padding-bottom",
@@ -21561,7 +21561,7 @@
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
-          "docs": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast dismisses. You will need to do that in your code.",
+          "docs": "もし `true` ならば、トーストは表示されます。もし `false` ならば、トーストは閉じます。プレゼンテーションの細かい制御が必要な場合はこれを使用し、そうでない場合は toastController または `trigger` プロパティを使用してください。注意: トーストが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -21635,7 +21635,7 @@
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
-          "docs": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used.",
+          "docs": "トーストに表示するメッセージ。このプロパティは、文字列としてカスタムHTMLを受け入れます。デフォルトではコンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -21721,7 +21721,7 @@
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
-          "docs": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked.",
+          "docs": "クリックされたときにトーストを開かせるトリガー要素に対応するID。",
           "docsTags": [],
           "values": [
             {
@@ -21797,7 +21797,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has dismissed.\nShorthand for ionToastDidDismiss.",
+          "docs": "トーストが終了した後に発行されます。ionToastDidDismissの略記。",
           "docsTags": []
         },
         {
@@ -21806,7 +21806,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the toast has presented.\nShorthand for ionToastWillDismiss.",
+          "docs": "トーストがはじまった後に発行されます。ionToastWillDismissの略語。",
           "docsTags": []
         },
         {
@@ -21824,7 +21824,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "トーストが提示された後に発します。",
+          "docs": "トーストが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -21833,7 +21833,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "乾杯が解散する前に発します。",
+          "docs": "乾杯が解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -21851,7 +21851,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has dismissed.\nShorthand for ionToastWillDismiss.",
+          "docs": "トーストが終了する前に発行されます。ionToastWillDismissの略語です。",
           "docsTags": []
         },
         {
@@ -21860,7 +21860,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted before the toast has presented.\nShorthand for ionToastWillPresent.",
+          "docs": "トーストが表示される前に発行されます。ionToastWillPresentの略記。",
           "docsTags": []
         }
       ],
@@ -22127,7 +22127,7 @@
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
-          "docs": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.",
+          "docs": "ラベルとトグルを1行にまとめる方法。`\"start\"`：ラベルとトグルは、LTRでは左に、RTLでは右に表示されます。`\"end\"`：ラベルとトグルは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとトグルは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
           "docsTags": [],
           "default": "'space-between'",
           "values": [
@@ -22153,7 +22153,7 @@
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "Inputに対してラベルを配置する場所。\"start\"`とする：ラベルはLTRではトグルの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではトグルの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -22179,7 +22179,7 @@
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
+          "docs": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。",
           "docsTags": [],
           "values": [
             {
@@ -22271,7 +22271,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
+          "docs": "ユーザがトグルのオン/オフを切り替えたときに発行されます。プログラムによって `checked` プロパティの値が変更された場合は発生しません。",
           "docsTags": []
         },
         {
@@ -22339,18 +22339,18 @@
         {
           "name": "--track-background",
           "annotation": "prop",
-          "docs": "Background of the toggle track"
+          "docs": "トグルトラックの背景"
         },
         {
           "name": "--track-background-checked",
           "annotation": "prop",
-          "docs": "Background of the toggle track when checked"
+          "docs": "チェックしたときのトグルトラックの背景"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle."
+          "docs": "トグルに関連付けるラベルテキストです。`\"labelPlacement`\"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。"
         }
       ],
       "parts": [
diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
index 5b50a67aac6..15cfa6cb189 100644
--- a/scripts/data/translated-cache.json
+++ b/scripts/data/translated-cache.json
@@ -1264,4 +1264,4 @@
     "Where to place the label relative to the input. `\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "Inputに対してラベルを配置する場所。\"start\"`とする：ラベルはLTRではトグルの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではトグルの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
     "Emitted when the user switches the toggle on or off. Does not emit when programmatically changing the value of the `checked` property.": "ユーザがトグルのオン/オフを切り替えたときに発行されます。プログラムによって `checked` プロパティの値が変更された場合は発生しません。"
   }
-}
+}
\ No newline at end of file
diff --git a/scripts/data/translated-cli.json b/scripts/data/translated-cli.json
index ef56bcbaa20..513d82d4342 100644
--- a/scripts/data/translated-cli.json
+++ b/scripts/data/translated-cli.json
@@ -11,7 +11,7 @@
         "ionic"
       ],
       "summary": "Build web assets and prepare your app for any platform targets",
-      "description": "`ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.\n\n`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.",
+      "description": "`ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.\n\n`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -108,7 +108,7 @@
         "capacitor"
       ],
       "summary": "Add a native platform to your Ionic project",
-      "description": "`ionic capacitor add` will do the following:\n- Install the Capacitor platform package\n- Copy the native platform template into your project",
+      "description": "`ionic capacitor add` will do the following:\n\n- Install the Capacitor platform package\n- Copy the native platform template into your project\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -130,7 +130,7 @@
         "capacitor"
       ],
       "summary": "Build an Ionic project for a given platform",
-      "description": "`ionic capacitor build` will do the following:\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).",
+      "description": "`ionic capacitor build` will do the following:\n\n- Perform `ionic build`\n- Copy web assets into the specified native platform\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n\nOnce the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.\n\nTo configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).\n",
       "footnotes": [],
       "groups": [
         "beta"
@@ -233,7 +233,7 @@
         "capacitor"
       ],
       "summary": "Copy web assets to native platforms",
-      "description": "`ionic capacitor copy` will do the following:\n- Perform an Ionic build, which compiles web assets\n- Copy web assets to Capacitor native platform(s)",
+      "description": "`ionic capacitor copy` will do the following:\n\n- Perform an Ionic build, which compiles web assets\n- Copy web assets to Capacitor native platform(s)\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -319,7 +319,7 @@
         "capacitor"
       ],
       "summary": "Open the IDE for a given native platform project",
-      "description": "`ionic capacitor open` will do the following:\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)",
+      "description": "`ionic capacitor open` will do the following:\n\n- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -341,7 +341,7 @@
         "capacitor"
       ],
       "summary": "Run an Ionic project on a connected device",
-      "description": "`ionic capacitor run` will do the following:\n- Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)\n- Run `capacitor run` (or open IDE for your native project with the `--open` option)\n\nWhen using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.\n\nIf you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.\n\nFor Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).",
+      "description": "`ionic capacitor run` will do the following:\n\n- Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)\n- Run `capacitor run` (or open IDE for your native project with the `--open` option)\n\nWhen using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.\n\nIf you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.\n\nFor Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -541,7 +541,7 @@
         "capacitor"
       ],
       "summary": "Sync (copy + update) an Ionic project",
-      "description": "`ionic capacitor sync` will do the following:\n- Perform an Ionic build, which compiles web assets\n- Copy web assets to Capacitor native platform(s)\n- Update Capacitor native platform(s) and dependencies\n- Install any discovered Capacitor or Cordova plugins",
+      "description": "`ionic capacitor sync` will do the following:\n\n- Perform an Ionic build, which compiles web assets\n- Copy web assets to Capacitor native platform(s)\n- Update Capacitor native platform(s) and dependencies\n- Install any discovered Capacitor or Cordova plugins\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -627,7 +627,7 @@
         "capacitor"
       ],
       "summary": "Update Capacitor native platforms, install Capacitor/Cordova plugins",
-      "description": "`ionic capacitor update` will do the following:\n- Update Capacitor native platform(s) and dependencies\n- Install any discovered Capacitor or Cordova plugins",
+      "description": "`ionic capacitor update` will do the following:\n\n- Update Capacitor native platform(s) and dependencies\n- Install any discovered Capacitor or Cordova plugins\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -648,7 +648,7 @@
         "ionic"
       ],
       "summary": "Enables tab-completion for Ionic CLI commands.",
-      "description": "This command is experimental and only works for Z shell (zsh) and non-Windows platforms.\n\nTo enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.",
+      "description": "This command is experimental and only works for Z shell (zsh) and non-Windows platforms.\n\nTo enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.\n",
       "footnotes": [],
       "groups": [
         "experimental"
@@ -669,7 +669,7 @@
         "config"
       ],
       "summary": "Print config values",
-      "description": "This command reads and prints configuration values from the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option.\n\nFor nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.\n\nWithout a `property` argument, this command prints out the entire config.\n\nFor multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.\n\nIf you are using this command programmatically, you can use the `--json` option.\n\nThis command will sanitize config output for known sensitive fields (disabled when using `--json`).",
+      "description": "This command reads and prints configuration values from the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option.\n\nFor nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.\n\nWithout a `property` argument, this command prints out the entire config.\n\nFor multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.\n\nIf you are using this command programmatically, you can use the `--json` option.\n\nThis command will sanitize config output for known sensitive fields (disabled when using `--json`).\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -733,7 +733,7 @@
         "config"
       ],
       "summary": "Set config values",
-      "description": "This command writes configuration values to the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option.\n\nFor nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.\n\nFor multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.\n\nThis command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.\n\nBy default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.",
+      "description": "This command writes configuration values to the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option.\n\nFor nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.\n\nFor multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.\n\nThis command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.\n\nBy default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -813,7 +813,7 @@
         "config"
       ],
       "summary": "Delete config values",
-      "description": "This command deletes configuration values from the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option.\n\nFor nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.\n\nFor multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.",
+      "description": "This command deletes configuration values from the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option.\n\nFor nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.\n\nFor multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -868,7 +868,7 @@
         "cordova"
       ],
       "summary": "Use Cordova to build for Android and iOS platform targets",
-      "description": "Like running `cordova build` directly, `ionic cordova build` also builds web assets from `ionic build` and provides friendly checks for Android and iOS platforms.\n\nTo pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.\n\nThe Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.",
+      "description": "Like running `cordova build` directly, `ionic cordova build` also builds web assets from `ionic build` and provides friendly checks for Android and iOS platforms.\n\nTo pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.\n\nThe Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -1023,7 +1023,7 @@
         "cordova"
       ],
       "summary": "Compile native platform code",
-      "description": "Like running `cordova compile` directly, but provides friendly checks.",
+      "description": "Like running `cordova compile` directly, but provides friendly checks.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -1118,7 +1118,7 @@
         "cordova"
       ],
       "summary": "Emulate an Ionic project on a simulator/emulator",
-      "description": "Build your app and deploy it to devices and emulators using this command. Optionally specify the `--livereload` option to use the dev server from `ionic serve` for livereload functionality.\n\nThis command will first use `ionic build` to build web assets (or `ionic serve` with the `--livereload` option). Then, `cordova build` is used to compile and prepare your app. Finally, the `native-run` [utility](https://github.com/ionic-team/native-run) is used to run your app on a device. To use Cordova for this process instead, use the `--no-native-run` option.\n\nIf you have multiple devices and emulators, you can target a specific one with the `--target` option. You can list targets with `--list`.\n\nFor Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).\n\nWhen using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.\n\nJust like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.",
+      "description": "Build your app and deploy it to devices and emulators using this command. Optionally specify the `--livereload` option to use the dev server from `ionic serve` for livereload functionality.\n\nThis command will first use `ionic build` to build web assets (or `ionic serve` with the `--livereload` option). Then, `cordova build` is used to compile and prepare your app. Finally, the `native-run` [utility](https://github.com/ionic-team/native-run) is used to run your app on a device. To use Cordova for this process instead, use the `--no-native-run` option.\n\nIf you have multiple devices and emulators, you can target a specific one with the `--target` option. You can list targets with `--list`.\n\nFor Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).\n\nWhen using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.\n\nJust like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -1454,7 +1454,7 @@
         "cordova"
       ],
       "summary": "Manage Cordova platform targets",
-      "description": "Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.",
+      "description": "Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -1500,7 +1500,7 @@
         "cordova"
       ],
       "summary": "Manage Cordova plugins",
-      "description": "Like running `cordova plugin` directly, but provides friendly checks.",
+      "description": "Like running `cordova plugin` directly, but provides friendly checks.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -1562,7 +1562,7 @@
         "cordova"
       ],
       "summary": "Copies assets to Cordova platforms, preparing them for native builds",
-      "description": "`ionic cordova prepare` will do the following:\n\n- Perform an Ionic build, which compiles web assets to **www/**.\n- Copy the **www/** directory into your Cordova platforms.\n- Transform **config.xml** into platform-specific manifest files.\n- Copy icons and splash screens from **resources/** to into your Cordova platforms.\n- Copy plugin files into specified platforms.\n\nYou may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.",
+      "description": "`ionic cordova prepare` will do the following:\n\n- Perform an Ionic build, which compiles web assets to **www/**.\n- Copy the **www/** directory into your Cordova platforms.\n- Transform **config.xml** into platform-specific manifest files.\n- Copy icons and splash screens from **resources/** to into your Cordova platforms.\n- Copy plugin files into specified platforms.\n\nYou may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -1652,7 +1652,7 @@
         "cordova"
       ],
       "summary": "Checks and print out all the requirements for platforms",
-      "description": "Like running `cordova requirements` directly, but provides friendly checks.",
+      "description": "Like running `cordova requirements` directly, but provides friendly checks.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -1674,7 +1674,7 @@
         "cordova"
       ],
       "summary": "Automatically create icon and splash screen resources",
-      "description": "Generate perfectly sized icons and splash screens from PNG source images for your Cordova platforms with this command.\n\nThe source image for icons should ideally be at least **1024×1024px** and located at **resources/icon.png**. The source image for splash screens should ideally be at least **2732×2732px** and located at **resources/splash.png**. If you used `ionic start`, there should already be default Ionic resources in the **resources/** directory, which you can overwrite.\n\nYou can also generate platform-specific icons and splash screens by placing them in the respective **resources/&lt;platform&gt;/** directory. For example, to generate an icon for Android, place your image at **resources/android/icon.png**.\n\nFor best results, the splash screen's artwork should roughly fit within a square (**1200×1200px**) at the center of the image. You can use **[https://code.ionicframework.com/resources/splash.psd](https://code.ionicframework.com/resources/splash.psd)** as a template for your splash screen.\n\n`ionic cordova resources` will automatically update your **config.xml** to reflect the changes in the generated images, which Cordova then configures.\n\nThis command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.\n\nCordova reference documentation:\n- Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**\n- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**",
+      "description": "Generate perfectly sized icons and splash screens from PNG source images for your Cordova platforms with this command.\n\nThe source image for icons should ideally be at least **1024×1024px** and located at **resources/icon.png**. The source image for splash screens should ideally be at least **2732×2732px** and located at **resources/splash.png**. If you used `ionic start`, there should already be default Ionic resources in the **resources/** directory, which you can overwrite.\n\nYou can also generate platform-specific icons and splash screens by placing them in the respective **resources/&lt;platform&gt;/** directory. For example, to generate an icon for Android, place your image at **resources/android/icon.png**.\n\nFor best results, the splash screen's artwork should roughly fit within a square (**1200×1200px**) at the center of the image. You can use **[https://code.ionicframework.com/resources/splash.psd](https://code.ionicframework.com/resources/splash.psd)** as a template for your splash screen.\n\n`ionic cordova resources` will automatically update your **config.xml** to reflect the changes in the generated images, which Cordova then configures.\n\nThis command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.\n\nCordova reference documentation:\n\n- Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**\n- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -1727,7 +1727,7 @@
         "cordova"
       ],
       "summary": "Run an Ionic project on a connected device",
-      "description": "Build your app and deploy it to devices and emulators using this command. Optionally specify the `--livereload` option to use the dev server from `ionic serve` for livereload functionality.\n\nThis command will first use `ionic build` to build web assets (or `ionic serve` with the `--livereload` option). Then, `cordova build` is used to compile and prepare your app. Finally, the `native-run` [utility](https://github.com/ionic-team/native-run) is used to run your app on a device. To use Cordova for this process instead, use the `--no-native-run` option.\n\nIf you have multiple devices and emulators, you can target a specific one with the `--target` option. You can list targets with `--list`.\n\nFor Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).\n\nWhen using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.\n\nJust like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.",
+      "description": "Build your app and deploy it to devices and emulators using this command. Optionally specify the `--livereload` option to use the dev server from `ionic serve` for livereload functionality.\n\nThis command will first use `ionic build` to build web assets (or `ionic serve` with the `--livereload` option). Then, `cordova build` is used to compile and prepare your app. Finally, the `native-run` [utility](https://github.com/ionic-team/native-run) is used to run your app on a device. To use Cordova for this process instead, use the `--no-native-run` option.\n\nIf you have multiple devices and emulators, you can target a specific one with the `--target` option. You can list targets with `--list`.\n\nFor Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).\n\nWhen using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.\n\nJust like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -2063,7 +2063,7 @@
         "deploy"
       ],
       "summary": "Adds Appflow Deploy to the project",
-      "description": "This command adds the Appflow Deploy plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.\n\nFor Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.\n\nFor Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.",
+      "description": "This command adds the Appflow Deploy plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.\n\nFor Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.\n\nFor Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.\n",
       "footnotes": [],
       "groups": [
         "paid"
@@ -2143,7 +2143,7 @@
         "deploy"
       ],
       "summary": "Create a deploy build on Appflow",
-      "description": "This command creates a deploy build on Appflow. While the build is running, it prints the remote build log to the terminal. If the build is successful, it downloads the created web build zip file in the current directory. Downloading build artifacts can be skipped by supplying the flag `skip-download`.\n\nApart from `--commit`, every option can be specified using the full name setup within the Appflow [Dashboard](https://dashboard.ionicframework.com).\n\nCustomizing the build:\n- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build.",
+      "description": "This command creates a deploy build on Appflow. While the build is running, it prints the remote build log to the terminal. If the build is successful, it downloads the created web build zip file in the current directory. Downloading build artifacts can be skipped by supplying the flag `skip-download`.\n\nApart from `--commit`, every option can be specified using the full name setup within the Appflow [Dashboard](https://dashboard.ionicframework.com).\n\nCustomizing the build:\n\n- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build.\n",
       "footnotes": [],
       "groups": [
         "paid",
@@ -2213,7 +2213,7 @@
         "deploy"
       ],
       "summary": "Overrides Appflow Deploy configuration",
-      "description": "This command overrides configuration for the Appflow Deploy plugin (`cordova-plugin-ionic`) in Capacitor projects.\n\nFor Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.\n\nFor Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.",
+      "description": "This command overrides configuration for the Appflow Deploy plugin (`cordova-plugin-ionic`) in Capacitor projects.\n\nFor Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.\n\nFor Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.\n",
       "footnotes": [],
       "groups": [
         "paid"
@@ -2347,7 +2347,7 @@
         "doctor"
       ],
       "summary": "Check the health of your Ionic project",
-      "description": "This command detects and prints common issues and suggested steps to fix them.\n\nSome issues can be fixed automatically. See `ionic doctor treat --help`.\n\nOptionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.",
+      "description": "This command detects and prints common issues and suggested steps to fix them.\n\nSome issues can be fixed automatically. See `ionic doctor treat --help`.\n\nOptionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues.\n",
       "footnotes": [],
       "groups": [
         "deprecated"
@@ -2377,7 +2377,7 @@
         "doctor"
       ],
       "summary": "List all issues and their identifiers",
-      "description": "Issues can have various tags:\n- **treatable**: `ionic doctor treat` can attempt to fix the issue\n- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`\n- **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`\n\nYou can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.",
+      "description": "Issues can have various tags:\n\n- **treatable**: `ionic doctor treat` can attempt to fix the issue\n- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat`\n- **explicit-detection**: issue is only detected explicitly with `ionic doctor check <issue-id>`\n\nYou can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues.<issue-id>.ignored true/false`, where `<issue-id>` matches an ID listed with this command.\n",
       "footnotes": [],
       "groups": [
         "deprecated"
@@ -2397,7 +2397,7 @@
         "doctor"
       ],
       "summary": "Attempt to fix issues in your Ionic project",
-      "description": "This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.\n\nOptionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.",
+      "description": "This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed.\n\nOptionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues.\n",
       "footnotes": [],
       "groups": [
         "deprecated"
@@ -2464,7 +2464,7 @@
         "ionic"
       ],
       "summary": "Create Pages, Components, & Angular Features",
-      "description": "Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.\n\n - For a full list of available types, use `npx ng g --help`\n - For a list of options for a types, use `npx ng g <type> --help`\n\nYou can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `\"pages/New Page\"` to generate page files at **src/app/pages/new-page/**.\n\nTo test a generator before file modifications are made, use the `--dry-run` option.",
+      "description": "Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.\n\n- For a full list of available types, use `npx ng g --help`\n- For a list of options for a types, use `npx ng g <type> --help`\n\nYou can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `\"pages/New Page\"` to generate page files at **src/app/pages/new-page/**.\n\nTo test a generator before file modifications are made, use the `--dry-run` option.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -2501,7 +2501,7 @@
         "git"
       ],
       "summary": "Adds/updates the Appflow git remote to your local Ionic app",
-      "description": "This command is used by `ionic link` when Appflow is used as the git host.\n\n`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).",
+      "description": "This command is used by `ionic link` when Appflow is used as the git host.\n\n`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).\n",
       "footnotes": [],
       "groups": [
         "paid"
@@ -2518,7 +2518,7 @@
         "ionic"
       ],
       "summary": "Print project, system, and environment information",
-      "description": "This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.",
+      "description": "This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -2544,7 +2544,7 @@
         "ionic"
       ],
       "summary": "Initialize existing projects with Ionic",
-      "description": "This command will initialize an Ionic app within the current directory. Usually, this means an `ionic.config.json` file is created. If used within a multi-app project, the app is initialized in the root `ionic.config.json`.\n\n`ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.\n\nIf the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.",
+      "description": "This command will initialize an Ionic app within the current directory. Usually, this means an `ionic.config.json` file is created. If used within a multi-app project, the app is initialized in the root `ionic.config.json`.\n\n`ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.\n\nIf the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.\n",
       "footnotes": [],
       "groups": [
         "beta"
@@ -2632,7 +2632,7 @@
         "integrations"
       ],
       "summary": "Disable an integration",
-      "description": "Integrations, such as Cordova, can be disabled with this command.",
+      "description": "Integrations, such as Cordova, can be disabled with this command.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -2660,7 +2660,7 @@
         "integrations"
       ],
       "summary": "Add & enable integrations to your app",
-      "description": "Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.\n\nIntegrations can be re-added with the `--add` option.",
+      "description": "Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.\n\nIntegrations can be re-added with the `--add` option.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -2716,7 +2716,7 @@
         "integrations"
       ],
       "summary": "List available and active integrations in your app",
-      "description": "This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).\n\n- To enable or add integrations, see `ionic integrations enable --help`\n- To disable integrations, see `ionic integrations disable --help`",
+      "description": "This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).\n\n- To enable or add integrations, see `ionic integrations enable --help`\n- To disable integrations, see `ionic integrations disable --help`\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -2733,7 +2733,7 @@
         "ionic"
       ],
       "summary": "Connect local apps to Ionic",
-      "description": "Link apps on Appflow to local Ionic projects with this command.\n\nIf the `id` argument is excluded, this command will prompt you to select an app from Appflow.\n\nAppflow uses a git-based workflow to manage app updates. During the linking process, select **GitHub** (recommended) or **Appflow** as a git host. See our [documentation](https://ionicframework.com/docs/appflow/basics/git) for more information.\n\nUltimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.\n\nIf you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).",
+      "description": "Link apps on Appflow to local Ionic projects with this command.\n\nIf the `id` argument is excluded, this command will prompt you to select an app from Appflow.\n\nAppflow uses a git-based workflow to manage app updates. During the linking process, select **GitHub** (recommended) or **Appflow** as a git host. See our [documentation](https://ionicframework.com/docs/appflow/basics/git) for more information.\n\nUltimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.\n\nIf you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).\n",
       "footnotes": [],
       "groups": [
         "paid"
@@ -2759,7 +2759,7 @@
         "ionic"
       ],
       "summary": "Log in to Ionic",
-      "description": "Authenticate with Ionic and retrieve a user token, which is stored in the CLI config. Running `ionic login` will open a browser where you can submit your credentials.\n\nIf the `IONIC_TOKEN` environment variable is set, the CLI will automatically authenticate you. Use the Dashboard to generate a Personal Access Token.\n\nIf you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).\n\nIf you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).",
+      "description": "Authenticate with Ionic and retrieve a user token, which is stored in the CLI config. Running `ionic login` will open a browser where you can submit your credentials.\n\nIf the `IONIC_TOKEN` environment variable is set, the CLI will automatically authenticate you. Use the Dashboard to generate a Personal Access Token.\n\nIf you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).\n\nIf you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -2787,7 +2787,7 @@
         "ionic"
       ],
       "summary": "Log out of Ionic",
-      "description": "Remove the Ionic user token from the CLI config.\n\nLog in again with `ionic login`.\n\nIf you need to create an Ionic account, use `ionic signup`.",
+      "description": "Remove the Ionic user token from the CLI config.\n\nLog in again with `ionic login`.\n\nIf you need to create an Ionic account, use `ionic signup`.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -2803,7 +2803,7 @@
         "package"
       ],
       "summary": "Create a package build on Appflow",
-      "description": "This command creates a package build on Appflow. While the build is running, it prints the remote build log to the terminal. If the build is successful, it downloads the created app package file in the current directory. Downloading build artifacts can be skipped by supplying the flag `skip-download`.\n\nApart from `--commit`, every option can be specified using the full name setup within the [Dashboard](https://dashboard.ionicframework.com).\n\nThe `--signing-certificate` option is mandatory for any iOS build but not for Android debug builds.\n\nCustomizing the build:\n- The `--environment` and `--native-config` options can be used to customize the groups of values exposed to the build.\n- Override the preferred platform with `--build-stack`. This is useful for building older iOS apps.\n\nDeploying the build to an App Store:\n- The `--destination` option can be used to deliver the app created by the build to the configured App Store. This can be used only together with build type `release` for Android and build types `app-store` or `enterprise` for iOS.\n\nDownloading build artifacts:\n- By default once the build is complete, all artifacts are downloaded for the selected platform. `aab` and `apk` for Android `ipa` and `dsym` for iOS.\n- The `--artifact-type` option can be used to limit artifact downloads to only of that type. For instance, with Android, you can specify `aab` if you do not wish to download `apk`.",
+      "description": "This command creates a package build on Appflow. While the build is running, it prints the remote build log to the terminal. If the build is successful, it downloads the created app package file in the current directory. Downloading build artifacts can be skipped by supplying the flag `skip-download`.\n\nApart from `--commit`, every option can be specified using the full name setup within the [Dashboard](https://dashboard.ionicframework.com).\n\nThe `--signing-certificate` option is mandatory for any iOS build but not for Android debug builds.\n\nCustomizing the build:\n\n- The `--environment` and `--native-config` options can be used to customize the groups of values exposed to the build.\n- Override the preferred platform with `--build-stack`. This is useful for building older iOS apps.\n\nDeploying the build to an App Store:\n\n- The `--destination` option can be used to deliver the app created by the build to the configured App Store. This can be used only together with build type `release` for Android and build types `app-store` or `enterprise` for iOS.\n\nDownloading build artifacts:\n\n- By default once the build is complete, all artifacts are downloaded for the selected platform. `aab` and `apk` for Android `ipa` and `dsym` for iOS.\n- The `--artifact-type` option can be used to limit artifact downloads to only of that type. For instance, with Android, you can specify `aab` if you do not wish to download `apk`.\n",
       "footnotes": [],
       "groups": [
         "paid",
@@ -2991,7 +2991,7 @@
         "package"
       ],
       "summary": "Deploys a binary to a destination, such as an app store using Appflow",
-      "description": "This command deploys a binary to a destination using Appflow. While running, the remote log is printed to the terminal.\n\nThe command takes two parameters: the numeric ID of the package build that previously created the binary and the name of the destination where the binary is going to be deployed.\nBoth can be retrieved from the [Dashboard](https://dashboard.ionicframework.com).",
+      "description": "This command deploys a binary to a destination using Appflow. While running, the remote log is printed to the terminal.\n\nThe command takes two parameters: the numeric ID of the package build that previously created the binary and the name of the destination where the binary is going to be deployed.\nBoth can be retrieved from the [Dashboard](https://dashboard.ionicframework.com).\n",
       "footnotes": [],
       "groups": [
         "paid",
@@ -3022,7 +3022,7 @@
         "ionic"
       ],
       "summary": "Remove and recreate dependencies and generated files",
-      "description": "This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.\n\nFor Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.",
+      "description": "This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.\n\nFor Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -3048,7 +3048,7 @@
         "ionic"
       ],
       "summary": "Start a local dev server for app dev/testing",
-      "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\nTry the `--lab` option to see multiple platforms at once.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
+      "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\nTry the `--lab` option to see multiple platforms at once.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
@@ -3249,7 +3249,7 @@
         "ionic"
       ],
       "summary": "Create an Ionic account",
-      "description": "If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).",
+      "description": "If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -3421,7 +3421,7 @@
         "ssh"
       ],
       "summary": "Setup your Ionic SSH keys automatically",
-      "description": "This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).\n\nIf you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).",
+      "description": "This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).\n\nIf you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -3437,7 +3437,7 @@
         "ssh"
       ],
       "summary": "Set your active Ionic SSH key",
-      "description": "This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).\n\nBefore making changes, `ionic ssh use` will print a diff and ask for permission to write the file.",
+      "description": "This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).\n\nBefore making changes, `ionic ssh use` will print a diff and ask for permission to write the file.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [],
@@ -3459,7 +3459,7 @@
         "ssl"
       ],
       "summary": "Generates an SSL key & certificate",
-      "description": "Uses OpenSSL to create a self-signed certificate for **localhost** (by default).\n\nAfter the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.\n\nThe default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.",
+      "description": "Uses OpenSSL to create a self-signed certificate for **localhost** (by default).\n\nAfter the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.\n\nThe default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.\n",
       "footnotes": [],
       "groups": [
         "experimental"
@@ -3581,7 +3581,7 @@
         "ionic"
       ],
       "summary": "Create a new project",
-      "description": "This command creates a working Ionic app. It installs dependencies for you and sets up your project.\n\nRunning `ionic start` without any arguments will prompt you for information about your new project.\n\nThe first argument is your app's `name`. Don't worry--you can always change this later. The `--project-id` is generated from `name` unless explicitly specified.\n\nThe second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.\n\nUse the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.",
+      "description": "This command creates a working Ionic app. It installs dependencies for you and sets up your project.\n\nRunning `ionic start` without any arguments will prompt you for information about your new project.\n\nThe first argument is your app's `name`. Don't worry--you can always change this later. The `--project-id` is generated from `name` unless explicitly specified.\n\nThe second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.\n\nUse the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [
diff --git a/scripts/data/translated-native.json b/scripts/data/translated-native.json
index d825982deec..96127766a05 100644
--- a/scripts/data/translated-native.json
+++ b/scripts/data/translated-native.json
@@ -2,7 +2,7 @@
   {
     "packageName": "@awesome-cordova-plugins/abbyy-rtr",
     "displayName": "ABBYY Real-Time Recognition",
-    "description": "\nThis plugin allows to use the Text Capture and Data Capture features of\nABBYY Real-Time Recognition SDK (RTR SDK) in apps.\n",
+    "description": "This plugin allows to use the Text Capture and Data Capture features of\nABBYY Real-Time Recognition SDK (RTR SDK) in apps.\n",
     "usage": "\n```typescript\nimport { AbbyyRTR } from '@awesome-cordova-plugins/abbyy-rtr/ngx';\n\n\nconstructor(private abbyyRTR: AbbyyRTR) { }\n\n...\n\n\nthis.abbyyRTR.startTextCapture(options)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n\nthis.abbyyRTR.startDataCapture(options)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -16,7 +16,7 @@
   {
     "packageName": "@awesome-cordova-plugins/action-sheet",
     "displayName": "Action Sheet",
-    "description": "\nThe ActionSheet plugin shows a native list of options the user can choose from.\n\nRequires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).\n",
+    "description": "The ActionSheet plugin shows a native list of options the user can choose from.\n\nRequires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).\n",
     "usage": "\n```typescript\nimport { ActionSheet, ActionSheetOptions } from '@awesome-cordova-plugins/action-sheet/ngx';\n\nconstructor(private actionSheet: ActionSheet) { }\n\n...\n\n\nlet buttonLabels = ['Share via Facebook', 'Share via Twitter'];\n\nconst options: ActionSheetOptions = {\n  title: 'What do you want with this image?',\n  subtitle: 'Choose an action',\n  buttonLabels: buttonLabels,\n  addCancelButtonWithLabel: 'Cancel',\n  addDestructiveButtonWithLabel: 'Delete',\n  androidTheme: this.actionSheet.ANDROID_THEMES.THEME_HOLO_DARK,\n  destructiveButtonLast: true\n}\n\nthis.actionSheet.show(options).then((buttonIndex: number) => {\n  console.log('Button pressed: ' + buttonIndex);\n});\n```",
     "platforms": [
       "Android",
@@ -33,7 +33,7 @@
   {
     "packageName": "@awesome-cordova-plugins/adjust",
     "displayName": "Adjust",
-    "description": "\nThis is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.\n\nRequires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)\n",
+    "description": "This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.\n\nRequires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)\n",
     "usage": "\n```typescript\n import { Adjust, AdjustConfig, AdjustEnvironment } from '@awesome-cordova-plugins/adjust/ngx';\n\n constructor(private adjust: Adjust) { }\n\n ...\n\n const config = new AdjustConfig('APP-TOKEN-HERE', AdjustEnvironment.Sandbox);\n config.logLevel = AdjustLogLevel.Verbose;\n // Set other config properties.\n adjust.create(config);\n\n```",
     "platforms": [
       "Android",
@@ -47,7 +47,7 @@
   {
     "packageName": "@awesome-cordova-plugins/admob-free",
     "displayName": "AdMob Free",
-    "description": "\nA free, no ad-sharing version of Google AdMob plugin for Cordova.\n\nRequires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).\n",
+    "description": "A free, no ad-sharing version of Google AdMob plugin for Cordova.\n\nRequires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).\n",
     "usage": "\n```typescript\nimport { AdMobFree, AdMobFreeBannerConfig } from '@awesome-cordova-plugins/admob-free/ngx';\n\n\nconstructor(private admobFree: AdMobFree) { }\n\n\n...\n\n\nconst bannerConfig: AdMobFreeBannerConfig = {\n // add your config here\n // for the sake of this example we will just use the test config\n isTesting: true,\n autoShow: true\n};\nthis.admobFree.banner.config(bannerConfig);\n\nthis.admobFree.banner.prepare()\n  .then(() => {\n    // banner Ad is ready\n    // if we set autoShow to false, then we will need to call the show method here\n  })\n  .catch(e => console.log(e));\n\n\n```",
     "platforms": [
       "Android",
@@ -61,7 +61,7 @@
   {
     "packageName": "@awesome-cordova-plugins/admob-plus",
     "displayName": "AdMob Plus",
-    "description": "\nAdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.\n",
+    "description": "AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.\n",
     "platforms": [
       "Android",
       "iOS"
@@ -74,7 +74,7 @@
   {
     "packageName": "@awesome-cordova-plugins/admob-pro",
     "displayName": "AdMob Pro",
-    "description": "\nPlugin for Google Ads, including AdMob / DFP (DoubleClick for publisher) and mediations to other Ad networks.\n\nIMPORTANT NOTICE: this plugin takes a percentage out of your earnings if you profit more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see [AdMobPro Free](../admob-free).",
+    "description": "Plugin for Google Ads, including AdMob / DFP (DoubleClick for publisher) and mediations to other Ad networks.\n\nIMPORTANT NOTICE: this plugin takes a percentage out of your earnings if you profit more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see [AdMobPro Free](../admob-free).\n",
     "usage": "\n```typescript\nimport { AdMobPro } from '@awesome-cordova-plugins/admob-pro/ngx';\nimport { Platform } from '@ionic/angular';\n\nconstructor(private admob: AdMobPro, private platform: Platform ) { }\n\nionViewDidLoad() {\n  this.admob.onAdDismiss()\n    .subscribe(() => { console.log('User dismissed ad'); });\n}\n\nonClick() {\n  let adId;\n  if(this.platform.is('android')) {\n    adId = 'YOUR_ADID_ANDROID';\n  } else if (this.platform.is('ios')) {\n    adId = 'YOUR_ADID_IOS';\n  }\n  this.admob.prepareInterstitial({adId: adId})\n    .then(() => { this.admob.showInterstitial(); });\n}\n\n```\n",
     "platforms": [
       "Android",
@@ -90,7 +90,7 @@
   {
     "packageName": "@awesome-cordova-plugins/admob",
     "displayName": "AdMob",
-    "description": "\nMost complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.\nMonetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!\n\n**Supports:**\n- Banner ads (top and bottom)\n- Interstitial ads\n- Rewarded ads\n- [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads\n",
+    "description": "Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.\nMonetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!\n\n**Supports:**\n\n- Banner ads (top and bottom)\n- Interstitial ads\n- Rewarded ads\n- [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads\n",
     "usage": "\n**Note:** No ads will be served on apps with package name `io.ionic.starter`. This is the default package name for new `ionic` apps. Make sure to rename the package name so ads can be displayed.\n```typescript\nimport { Admob, AdmobOptions } from '@awesome-cordova-plugins/admob';\n\n\nconstructor(private admob: Admob) {\n    // Admob options config\n    const admobOptions: AdmobOptions = {\n      bannerAdId: 'XXX-XXXX-XXXX',\n      interstitialAdId: 'XXX-XXXX-XXXX',\n      rewardedAdId: 'XXX-XXXX-XXXX',\n      isTesting: true,\n      autoShowBanner: false,\n      autoShowInterstitial: false,\n      autoShowRewarded: false,\n      adSize: this.admob.AD_SIZE.BANNER\n    };\n\n    // Set admob options\n    this.admob.setOptions(admobOptions)\n      .then(() => console.log('Admob options have been successfully set'))\n      .catch(err => console.error('Error setting admob options:', err));\n}\n\n\n\n// (Optionally) Load banner ad, in order to have it ready to show\nthis.admob.createBannerView()\n  .then(() => console.log('Banner ad loaded'))\n  .catch(err => console.error('Error loading banner ad:', err));\n\n\n// Show banner ad (createBannerView must be called before and onAdLoaded() event raised)\nthis.admob.onAdLoaded().subscribe((ad) => {\n  if (ad.adType === this.admob.AD_TYPE.BANNER) {\n    this.admob.showBannerAd()\n      .then(() => console.log('Banner ad shown'))\n      .catch(err => console.error('Error showing banner ad:', err));\n  }\n});\n\n\n// Hide banner ad, but do not destroy it, so it can be shown later on\n// See destroyBannerView in order to hide and destroy banner ad\nthis.admob.showBannerAd(false)\n  .then(() => console.log('Banner ad hidden'))\n  .catch(err => console.error('Error hiding banner ad:', err));\n\n\n\n// Request an interstitial ad, in order to be shown later on\n// It is possible to autoshow it via options parameter, see docs\nthis.admob.requestInterstitialAd()\n  .then(() => console.log('Interstitial ad loaded'))\n  .catch(err => console.error('Error loading interstitial ad:', err));\n\n\n// Show an interstitial ad (requestInterstitialAd must be called before)\nthis.admob.onAdLoaded().subscribe((ad) => {\n  if (ad.adType === this.admob.AD_TYPE.INTERSTITIAL) {\n    this.admob.showInterstitialAd()\n      .then(() => console.log('Interstitial ad shown'))\n      .catch(err => console.error('Error showing interstitial ad:', err));\n  }\n});\n\n\n// Request a rewarded ad\nthis.admob.requestRewardedAd()\n  .then(() => console.log('Rewarded ad loaded'))\n  .catch(err => console.error('Error loading rewarded ad:', err));\n\n\n// Show rewarded ad (requestRewardedAd must be called before)\nthis.admob.onAdLoaded().subscribe((ad) => {\n  if (ad.adType === this.admob.AD_TYPE.REWARDED) {\n    this.admob.showRewardedAd()\n      .then(() => console.log('Rewarded ad shown'))\n      .catch(err => console.error('Error showing rewarded ad:', err));\n  }\n});\n\n\n// Hide and destroy banner or interstitial ad\nthis.admob.destroyBannerView()\n  .then(() => console.log('Banner or interstitial ad destroyed'))\n  .catch(err => console.error('Error destroying banner or interstitial ad:', err));\n\n\n\n// On Ad loaded event\nthis.admob.onAdLoaded().subscribe((ad) => {\n  if (ad.adType === this.admob.AD_TYPE.BANNER) {\n    console.log('Banner ad is loaded');\n    this.admob.showBannerAd();\n  } else if (ad.adType === this.admob.AD_TYPE.INTERSTITIAL) {\n    console.log('Interstitial ad is loaded');\n    this.admob.showInterstitialAd();\n  } else if (ad.adType === this.admob.AD_TYPE.REWARDED) {\n    console.log('Rewarded ad is loaded');\n    this.admob.showRewardedAd();\n  }\n});\n\n\n\n// On ad failed to load\nthis.admob.onAdFailedToLoad().subscribe(err => console.log('Error loading ad:', err));\n\n\n\n// On interstitial ad opened\nthis.admob.onAdOpened().subscribe(() => console.log('Interstitial ad opened'));\n\n\n\n// On interstitial ad closed\nthis.admob.onAdClosed().subscribe(() => console.log('Interstitial ad closed'));\n\n\n\n// On ad clicked and left application\nthis.admob.onAdLeftApplication().subscribe(() => console.log('Ad lefted application'));\n\n\n\n// On user ad rewarded\nthis.admob.onRewardedAd().subscribe(() => console.log('The user has been rewarded'));\n\n\n\n// On rewarded ad video started\nthis.admob.onRewardedAdVideoStarted().subscribe(() => console.log('Rewarded ad vieo started'));\n\n\n\n// On rewarded ad video completed\nthis.admob.onRewardedAdVideoCompleted().subscribe(() => console.log('Rewarded ad video completed'));\n\n```\n",
     "platforms": [
       "Android",
@@ -105,7 +105,7 @@
   {
     "packageName": "@awesome-cordova-plugins/aes-256",
     "displayName": "AES256",
-    "description": "\nThis cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.\nIt's a cross-platform plugin which supports both Android and iOS.\nThe encryption and decryption are performed on the device native layer so that the performance is much faster.\n",
+    "description": "This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.\nIt's a cross-platform plugin which supports both Android and iOS.\nThe encryption and decryption are performed on the device native layer so that the performance is much faster.\n",
     "usage": "\n```typescript\nimport { AES256 } from '@awesome-cordova-plugins/aes-256/ngx';\n\nprivate secureKey: string;\nprivate secureIV: string;\n\nconstructor(private aes256: AES256) {\n   this.generateSecureKeyAndIV(); // To generate the random secureKey and secureIV\n}\n\n...\n\nasync generateSecureKeyAndIV() {\n   this.secureKey = await this.aes256.generateSecureKey('random password 12345'); // Returns a 32 bytes string\n   this.secureIV = await this.aes256.generateSecureIV('random password 12345'); // Returns a 16 bytes string\n}\n\nthis.aes256.encrypt(this.secureKey, this.secureIV, 'testdata')\n  .then(res => console.log('Encrypted Data: ',res))\n  .catch((error: any) => console.error(error));\n\nthis.aes256.decrypt(this.secureKey, this.secureIV, 'encryptedData')\n  .then(res => console.log('Decrypted Data : ',res))\n  .catch((error: any) => console.error(error));\n\n\n* this.aes256.generateSecureKey('random password 12345')\n  .then(res => console.log('Secure Key : ',res))\n  .catch((error: any) => console.error(error));\n\n\n* this.aes256.generateSecureIV('random password 12345')\n  .then(res => console.log('Secure IV : ',res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -119,7 +119,7 @@
   {
     "packageName": "@awesome-cordova-plugins/alipay",
     "displayName": "Alipay",
-    "description": "\nThis plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.\n\nRequires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .\n",
+    "description": "This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.\n\nRequires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .\n",
     "usage": "\n```typescript\nimport { Alipay } from '@awesome-cordova-plugins/alipay/ngx';\n\nconstructor(private alipay: Alipay) {\n\n//alipayOrder is a string that has been generated and signed by the server side.\nthis.alipay.pay(alipayOrder, success, error)\n   .then(result => {\n      console.log(result); // Success\n   })\n   .catch(error => {\n      console.log(error); // Failed\n   });\n\n}\n\n```\n",
     "platforms": [
       "Android",
@@ -136,7 +136,7 @@
   {
     "packageName": "@awesome-cordova-plugins/all-in-one-sdk",
     "displayName": "AllInOneSDK",
-    "description": "\nPaytm All-in-One SDK plugin for Cordova/Ionic Applications\nPaytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.\nPaytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.\nFor more information about Paytm All-in-One SDK, please visit https://developer.paytm.com/docs/all-in-one-sdk/hybrid-apps/cordova/\n",
+    "description": "Paytm All-in-One SDK plugin for Cordova/Ionic Applications\nPaytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.\nPaytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.\nFor more information about Paytm All-in-One SDK, please visit https://developer.paytm.com/docs/all-in-one-sdk/hybrid-apps/cordova/\n",
     "usage": "\n```typescript\nimport { AllInOneSDK } from '@awesome-cordova-plugins/all-in-one-sdk/ngx';\n\n\nconstructor(private allInOneSDK: AllInOneSDK) { }\n\n...\n\nFor below parameters see [documentation](https://developer.paytm.com/docs/all-in-one-sdk/hybrid-apps/cordova/)\nlet paymentIntent = { mid : merchantID, orderId: orderId, txnToken: transactionToken, amount: amount, isStaging: isStaging, callbackUrl:callBackURL,  restrictAppInvoke:restrictAppInvoke  }\n\nthis.allInOneSDK.startTransaction(paymentIntent)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n\nFor iOS:\nAfter adding the plugin, open the iOS project, you can find the same at <projectName>/platforms/ios.\nIn case merchant don’t have callback URL, Add an entry into Info.plist LSApplicationQueriesSchemes(Array) Item 0 (String)-> paytm\nAdd a URL Scheme “paytm”+”MID”\n\n",
     "platforms": [
       "Android",
@@ -150,7 +150,7 @@
   {
     "packageName": "@awesome-cordova-plugins/analytics-firebase",
     "displayName": "Analytics Firebase",
-    "description": "\nGoogle Analytics Firebase plugin for Ionic Native apps.\n",
+    "description": "Google Analytics Firebase plugin for Ionic Native apps.\n",
     "usage": "\n```typescript\nimport { AnalyticsFirebase } from '@awesome-cordova-plugins/analytics-firebase';\n\n\nconstructor(private analyticsFirebase: AnalyticsFirebase) { }\n\n// Track an event with default events and params\nconst eventParams = {};\neventParams[this.analyticsFirebase.DEFAULT_PARAMS.LEVEL] = 29;\nthis.analyticsFirebase.logEvent(this.analyticsFirebase.DEFAULT_EVENTS.LEVEL_UP, eventParams)\n  .then(() => console.log('Event successfully tracked'))\n  .catch(err => console.log('Error tracking event:', err));\n\n// Track an event with custom events and params\nconst eventParams = {};\neventParams['my-prop'] = 29;\nthis.analyticsFirebase.logEvent('my-event', eventParams)\n  .then(() => console.log('Event successfully tracked'))\n  .catch(err => console.log('Error tracking event:', err));\n\n\n// Reset analytics data\nthis.analyticsFirebase.resetAnalyticsData()\n  .then(() => console.log('Analytics data have been reset'))\n  .catch(err => console.log('Error resetting analytics data:', err));\n\n\n// Track a screen view\nthis.analyticsFirebase.setCurrentScreen('Home')\n  .then(() => console.log('View successfully tracked'))\n  .catch(err => console.log('Error tracking view:', err));\n\n\n// Set user id\nthis.analyticsFirebase.setUserId('USER-ID')\n  .then(() => console.log('User id successfully set'))\n  .catch(err => console.log('Error setting user id:', err));\n\n\n// Set user property from default properties\nthis.analyticsFirebase.setUserProperty('KEY', 'VALUE')\n  .then(() => console.log('User property successfully set'))\n  .catch(err => console.log('Error setting user property:', err));\n\n```\n",
     "platforms": [
       "Android",
@@ -164,7 +164,7 @@
   {
     "packageName": "@awesome-cordova-plugins/android-exoplayer",
     "displayName": "Android ExoPlayer",
-    "description": "\nCordova media player plugin using Google's ExoPlayer framework.\n\nhttps://github.com/google/ExoPlayer\n",
+    "description": "Cordova media player plugin using Google's ExoPlayer framework.\n\nhttps://github.com/google/ExoPlayer\n",
     "usage": "\n```typescript\nimport { AndroidExoPlayer } from '@awesome-cordova-plugins/android-exoplayer/ngx';\n\nconstructor(private androidExoPlayer: AndroidExoPlayer) { }\n\n...\n\nthis.androidExoPlayer.show({url: 'http://www.youtube.com/api/manifest/dash/id/bf5bb2419360daf1/source/youtube'});\n\n```\n",
     "platforms": [
       "Android"
@@ -177,7 +177,7 @@
   {
     "packageName": "@awesome-cordova-plugins/android-full-screen",
     "displayName": "Android Full Screen",
-    "description": "\nThis plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.\nUsing Android 4.0+, you can use true full screen in \"lean mode\", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.\nIn Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.",
+    "description": "This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.\nUsing Android 4.0+, you can use true full screen in \"lean mode\", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.\nIn Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.\n",
     "usage": "\n```typescript\nimport { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen/ngx';\n\nconstructor(private androidFullScreen: AndroidFullScreen) { }\n\n...\n\nthis.androidFullScreen.isImmersiveModeSupported()\n  .then(() => console.log('Immersive mode supported'))\n  .catch(err => console.log(err));\n\n```\n",
     "platforms": [
       "Android"
@@ -190,7 +190,7 @@
   {
     "packageName": "@awesome-cordova-plugins/android-notch",
     "displayName": "Android Notch",
-    "description": "\nThis plugin enables developers to get the cutout and android devices inset sizes\nIt is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch\nThis plugin works on all android versions, but we can only detect notches starting from Android 9.\n",
+    "description": "This plugin enables developers to get the cutout and android devices inset sizes\nIt is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch\nThis plugin works on all android versions, but we can only detect notches starting from Android 9.\n",
     "usage": "\n```typescript\nimport { AndroidNotch } from '@awesome-cordova-plugins/android-notch/ngx';\n\n\nconstructor(private androidNotch: AndroidNotch) { }\n\n...\n\n\nthis.androidNotch.hasCutout()\n   .then((px: number) => console.log('Inset size: '), px)\n   .catch((error: any) => console.log('Error: ', error))\n\nthis.androidNotch.getInsetTop()\n   .then((px: number) => console.log('Inset size: '), px)\n   .catch((error: any) => console.log('Error: ', error))\n\nthis.androidNotch.getInsetRight()\n   .then((px: number) => console.log('Inset size: '), px)\n   .catch((error: any) => console.log('Error: ', error))\n\nthis.androidNotch.getInsetBottom()\n   .then((px: number) => console.log('Inset size: '), px)\n   .catch((error: any) => console.log('Error: ', error))\n\nthis.androidNotch.getInsetLeft()\n   .then((px: number) => console.log('Inset size: '), px)\n   .catch((error: any) => console.log('Error: ', error))\n\n```\n",
     "platforms": [
       "Android"
@@ -203,7 +203,7 @@
   {
     "packageName": "@awesome-cordova-plugins/android-permissions",
     "displayName": "Android Permissions",
-    "description": "\nThis plugin is designed to support Android new permissions checking mechanism.\n\nYou can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html\n",
+    "description": "This plugin is designed to support Android new permissions checking mechanism.\n\nYou can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html\n",
     "usage": "\n```\nimport { AndroidPermissions } from '@awesome-cordova-plugins/android-permissions/ngx';\n\n\nconstructor(private androidPermissions: AndroidPermissions) { }\n\n...\n\nthis.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(\n  result => console.log('Has permission?',result.hasPermission),\n  err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)\n);\n\nthis.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.androidPermissions.PERMISSION.GET_ACCOUNTS]);\n\n```\n\nAndroid 26 and above: due to Android 26's changes to permissions handling (permissions are requested at time of use rather than at runtime,) if your app does not include any functions (eg. other Ionic Native plugins) that utilize a particular permission, then `requestPermission()` and `requestPermissions()` will resolve immediately with no prompt shown to the user.  Thus, you must include a function utilizing the feature you would like to use before requesting permission for it.\n",
     "platforms": [
       "Android"
@@ -217,7 +217,7 @@
   {
     "packageName": "@awesome-cordova-plugins/anyline",
     "displayName": "Anyline",
-    "description": "\nAnyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.\n",
+    "description": "Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.\n",
     "usage": "\n```typescript\nimport { Anyline } from '@awesome-cordova-plugins/anyline/ngx';\n\n\nconstructor(private anyline: Anyline) { }\n\n...\n\n\nthis.anyline.scan(options)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -231,7 +231,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-availability",
     "displayName": "App Availability",
-    "description": "\nThis plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.\n\nRequires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).\n",
+    "description": "This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.\n\nRequires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).\n",
     "usage": "\n```typescript\nimport { AppAvailability } from '@awesome-cordova-plugins/app-availability/ngx';\nimport { Platform } from 'ionic-angular';\n\nconstructor(private appAvailability: AppAvailability, private platform: Platform) { }\n\n...\n\nlet app;\n\nif (this.platform.is('ios')) {\n  app = 'twitter://';\n} else if (this.platform.is('android')) {\n  app = 'com.twitter.android';\n}\n\nthis.appAvailability.check(app)\n  .then(\n    (yes: boolean) => console.log(app + ' is available'),\n    (no: boolean) => console.log(app + ' is NOT available')\n  );\n```\n",
     "platforms": [
       "Android",
@@ -245,7 +245,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-center-analytics",
     "displayName": "App Center Analytics",
-    "description": "\nApp Center Analytics helps you understand user behavior and customer engagement to improve your app.\nThe SDK automatically captures session count and device properties like model, OS version, etc.\nYou can define your own custom events to measure things that matter to you.\nAll the information captured is available in the App Center portal for you to analyze the data.\n\nFor more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/analytics/cordova\n",
+    "description": "App Center Analytics helps you understand user behavior and customer engagement to improve your app.\nThe SDK automatically captures session count and device properties like model, OS version, etc.\nYou can define your own custom events to measure things that matter to you.\nAll the information captured is available in the App Center portal for you to analyze the data.\n\nFor more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/analytics/cordova\n",
     "usage": "\n```typescript\nimport { AppCenterAnalytics } from '@awesome-cordova-plugins/app-center-analytics/ngx';\n\n\nconstructor(private appCenterAnalytics: AppCenterAnalytics) { }\n\n...\n\nthis.appCenterAnalytics.setEnabled(true).then(() => {\n   this.appCenterAnalytics.trackEvent('My Event', { TEST: 'HELLO_WORLD' }).then(() => {\n       console.log('Custom event tracked');\n   });\n});\n\n```",
     "platforms": [
       "Android",
@@ -259,7 +259,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-center-crashes",
     "displayName": "App Center Crashes",
-    "description": "\nApp Center Analytics helps you understand user behavior and customer engagement to improve your app.\nThe SDK automatically captures session count and device properties like model, OS version, etc.\nYou can define your own custom events to measure things that matter to you.\nAll the information captured is available in the App Center portal for you to analyze the data.\n\nFor more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/crashes/cordova\n",
+    "description": "App Center Analytics helps you understand user behavior and customer engagement to improve your app.\nThe SDK automatically captures session count and device properties like model, OS version, etc.\nYou can define your own custom events to measure things that matter to you.\nAll the information captured is available in the App Center portal for you to analyze the data.\n\nFor more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/crashes/cordova\n",
     "usage": "\n```typescript\nimport { AppCenterCrashes } from '@awesome-cordova-plugins/app-center-crashes/ngx';\n\n\nconstructor(private AppCenterCrashes: AppCenterCrashes) { }\n\n...\n\nthis.AppCenterCrashes.setEnabled(true).then(() => {\n   this.AppCenterCrashes.lastSessionCrashReport().then(report => {\n       console.log('Crash report', report);\n   });\n});\n\n```",
     "platforms": [
       "Android",
@@ -273,7 +273,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-center-low-memory",
     "displayName": "App Center Low Memory",
-    "description": "\nGenerates a low memory warning.\nFor more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory\n",
+    "description": "Generates a low memory warning.\nFor more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory\n",
     "usage": "\n```typescript\nimport { LowMemory } from '@awesome-cordova-plugins/app-center-low-memory/ngx';\n\n...\n\nconstructor(private lowMemory: LowMemory) { }\n\nasync warning() {\n  await this.lowMemory.generateLowMemory();\n}\n```\n",
     "platforms": [
       "Android",
@@ -287,7 +287,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-center-push",
     "displayName": "App Center Push",
-    "description": "\n\nFor more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova\n",
+    "description": "For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova\n",
     "usage": "\n```typescript\nimport { AppCenterPush } from '@awesome-cordova-plugins/app-center-push/ngx';\n\n\nconstructor(private appCenterPush: AppCenterPush) { }\n\n...\n\nthis.appCenterPush.setEnabled(true).then(() => {\n   this.appCenterPush.addEventListener('My Event').subscribe(pushNotification => {\n       console.log('Recived push notification', pushNotification);\n   });\n});\n\n```\n",
     "platforms": [
       "Android",
@@ -301,7 +301,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-launcher",
     "displayName": "App Launcher",
-    "description": "\nSimple Cordova plugin to see if other apps are installed and launch them.\n",
+    "description": "Simple Cordova plugin to see if other apps are installed and launch them.\n",
     "usage": "\n```typescript\nimport { AppLauncher, AppLauncherOptions } from '@awesome-cordova-plugins/app-launcher/ngx';\nimport { Platform } from '@ionic/angular';\n\nconstructor(private appLauncher: AppLauncher, private platform: Platform) { }\n\n...\n\nconst options: AppLauncherOptions = {\n}\n\nif(this.platform.is('ios')) {\n  options.uri = 'fb://'\n} else {\n  options.packageName = 'com.facebook.katana'\n}\n\nthis.appLauncher.canLaunch(options)\n  .then((canLaunch: boolean) => console.log('Facebook is available'))\n  .catch((error: any) => console.error('Facebook is not available'));\n\n```\n",
     "platforms": [
       "Android",
@@ -315,7 +315,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-minimize",
     "displayName": "App Minimize",
-    "description": "\nAppMinimize is a plugin to minimize the application on android devices\n",
+    "description": "AppMinimize is a plugin to minimize the application on android devices\n",
     "usage": "\n```typescript\nimport { Platfrom } from '@ionic/angular';\nimport { AppMinimize } from '@awesome-cordova-plugins/app-minimize/ngx';\n\n\nconstructor(private platform: Platform, private appMinimize: AppMinimize) { }\n\n...\n\nthis.platform.registerBackButtonAction(() => {\n   this.appMinimize.minimize();\n});\n\n```\n",
     "platforms": [
       "Android"
@@ -328,7 +328,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-preferences",
     "displayName": "App Preferences",
-    "description": "\nThis plugin allows you to read and write app preferences\n",
+    "description": "This plugin allows you to read and write app preferences\n",
     "usage": "\n```typescript\nimport { AppPreferences } from '@awesome-cordova-plugins/app-preferences/ngx';\n\nconstructor(private appPreferences: AppPreferences) { }\n\n...\n\nthis.appPreferences.fetch('key').then((res) => { console.log(res); });\n\n```\n\n",
     "platforms": [
       "Android",
@@ -347,7 +347,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-rate",
     "displayName": "App Rate",
-    "description": "\nThe AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.\n\nRequires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).\n",
+    "description": "The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.\n\nRequires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).\n",
     "usage": "\n```typescript\nimport { AppRate } from '@awesome-cordova-plugins/app-rate/ngx';\n\nconstructor(private appRate: AppRate) { }\n\n...\n// set certain preferences\nthis.appRate.setPreferences({\n  storeAppURL: {\n    ios: '<app_id>',\n    android: 'market://details?id=<package_name>',\n    windows: 'ms-windows-store://review/?ProductId=<store_id>'\n  }\n});\n\nthis.appRate.promptForRating(true);\n\n// or, override the whole preferences object\nthis.appRate.setPreferences({\n  usesUntilPrompt: 3,\n  storeAppURL: {\n   ios: '<app_id>',\n   android: 'market://details?id=<package_name>',\n   windows: 'ms-windows-store://review/?ProductId=<store_id>'\n  }\n});\n\nthis.appRate.promptForRating(false);\n```\n",
     "platforms": [
       "Android",
@@ -364,7 +364,7 @@
   {
     "packageName": "@awesome-cordova-plugins/app-version",
     "displayName": "App Version",
-    "description": "\nReads the version of your app from the target build settings.\n\nRequires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).\n",
+    "description": "Reads the version of your app from the target build settings.\n\nRequires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).\n",
     "usage": "\n```typescript\nimport { AppVersion } from '@awesome-cordova-plugins/app-version/ngx';\n\nconstructor(private appVersion: AppVersion) { }\n\n...\n\n\nthis.appVersion.getAppName();\nthis.appVersion.getPackageName();\nthis.appVersion.getVersionCode();\nthis.appVersion.getVersionNumber();\n\n```\n",
     "platforms": [
       "Android",
@@ -380,7 +380,7 @@
   {
     "packageName": "@awesome-cordova-plugins/apple-pay",
     "displayName": "Apple Pay",
-    "description": "\nA dependency free Cordova plugin to provide Apple Pay functionality.\n",
+    "description": "A dependency free Cordova plugin to provide Apple Pay functionality.\n",
     "usage": "\n```typescript\nimport { ApplePay } from '@awesome-cordova-plugins/apple-pay/ngx';\n\n\nconstructor(private applePay: ApplePay) { }\n\n...\nasync applePay() {\n  // This block is optional -- only if you need to update order items/shipping\n  // methods in response to shipping method selections\n  this.applePay.startListeningForShippingContactSelection()\n    .subscribe(async selection => {\n      try {\n        await this.applePay.updateItemsAndShippingMethods({\n          items: getFromSelection(selection),\n          shippingMethods: getFromSelection(selection),\n        });\n      }\n      catch {\n        // handle update items error\n      }\n    });\n\n  try {\n    const applePayTransaction = await this.applePay.makePaymentRequest({\n      items,\n      shippingMethods,\n      merchantIdentifier,\n      currencyCode,\n      countryCode,\n      billingAddressRequirement: ['name', 'email', 'phone'],\n      shippingAddressRequirement: 'none',\n      shippingType: 'shipping'\n    });\n\n    const transactionStatus = await completeTransactionWithMerchant(applePayTransaction);\n    await this.applePay.completeLastTransaction(transactionStatus);\n  } catch {\n    // handle payment request error\n    // Can also handle stop complete transaction but these should normally not occur\n  }\n\n  // only if you started listening before\n  await this.applePay.stopListeningForShippingContactSelection();\n}\n```\n",
     "platforms": [
       "iOS"
@@ -393,7 +393,7 @@
   {
     "packageName": "@awesome-cordova-plugins/apple-wallet",
     "displayName": "Apple Wallet",
-    "description": "\nA Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.\n",
+    "description": "A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.\n",
     "usage": "\n```typescript\nimport { AppleWallet } from '@awesome-cordova-plugins/apple-wallet/ngx';\n\n\nconstructor(private appleWallet: AppleWallet) { }\n\n\n...\n\n\n// Simple call to determine if the current device supports Apple Pay and has a supported card installed.\nthis.appleWallet.isAvailable()\n .then((res: boolean) => {\n   // Expect res to be boolean\n  })\n .catch((err) => {\n   // Catch {{err}} here\n });\n\n...\n\n\n// Simple call to check Card Eligibility\nthis.appleWallet.checkCardEligibility(primaryAccountIdentifier: string)\n .then((res: boolean) => {\n   // Expect res to be boolean\n  })\n .catch((err) => {\n   // Catch {{err}} here\n });\n\n\n...\n\n\n// Simple call to checkCardEligibilityBySuffix\nthis.appleWallet.checkCardEligibilityBySuffix(cardSuffix: string)\n .then((res: boolean) => {\n   // Expect res to be boolean\n  })\n .catch((err) => {\n   // Catch {{err}} here\n });\n\n\n...\n\n// Simple call to check out if there is any paired Watches so that you can toggle visibility of 'Add to Watch' button\nthis.appleWallet.checkPairedDevices()\n .then((res: WatchExistData) => {\n   // object contains boolean flags showing paired devices\n  })\n .catch((err) => {\n   // Catch {{err}} here\n });\n\n\n...\n\n\n\n// Simple call to check paired devices with a card by its suffix\nthis.appleWallet.checkPairedDevicesBySuffix(cardSuffix: string)\n .then((res: PairedDevicesFlags) => {\n   // object contains boolean values that ensure that card is already exists in wallet or paired-watch\n  })\n .catch((err) => {\n   // Catch {{err}} here\n });\n\n\n...\n\n\n// Simple call with the configuration data needed to instantiate a new PKAddPaymentPassViewController object.\n// This method provides the data needed to create a request to add your payment pass (credit/debit card). After a successful callback, pass the certificate chain to your issuer server-side using our callback delegate method `AppleWallet.completeAddPaymentPass`. The issuer server-side should returns an encrypted JSON payload containing the encrypted card data, which is required to be get the final response\n\nthis.appleWallet.startAddPaymentPass(data: cardData)\n .then((res: SignatureCertificatesData) => {\n   // User proceed and successfully asked to add card to his wallet\n   // Use the callback response JSON payload to complete addition process\n  })\n .catch((err) => {\n   // Catch {{err}} here\n });\n\n\n...\n\n\nthis.appleWallet.completeAddPaymentPass(data: encryptedCardData)\n .then((res: string) => {\n   // Expect res to be string either 'success' or 'error'\n  })\n .catch((err) => {\n   // Catch {{err}} here\n   // Error and can not add the card, or something wrong happend\n   // PKAddPaymentPassViewController will be dismissed\n });\n\n```",
     "platforms": [
       "iOS"
@@ -406,7 +406,7 @@
   {
     "packageName": "@awesome-cordova-plugins/appodeal",
     "displayName": "Appodeal",
-    "description": "\nPlugin to serve ads through native Appodeal SDKs\n",
+    "description": "Plugin to serve ads through native Appodeal SDKs\n",
     "usage": "\n```typescript\nimport { Appodeal } from '@awesome-cordova-plugins/appodeal/ngx';\n\nconstructor(private appodeal: Appodeal) {\n\n   const appKey = '<your app key>';\n   appodeal.initialize(appKey, appodeal.AD_TYPES.REWARDED_VIDEO);\n   appodeal.show(appodeal.AD_TYPES.REWARDED_VIDEO);\n\n}\n```\n",
     "platforms": [
       "iOS",
@@ -420,7 +420,7 @@
   {
     "packageName": "@awesome-cordova-plugins/approov-advanced-http",
     "displayName": "HTTP",
-    "description": "\nCordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.\n\nAdvantages over Javascript requests:\n- SSL / TLS Pinning\n- CORS restrictions do not apply\n- Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)\n\nNote: This plugin extends the pre-existing [cordova-advanced-http-plugin](https://github.com/silkimen/cordova-plugin-advanced-http),\nwe have only added approov functionality on top of it. All credit goes to the actual plugin developer.\n",
+    "description": "Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.\n\nAdvantages over Javascript requests:\n\n- SSL / TLS Pinning\n- CORS restrictions do not apply\n- Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)\n\nNote: This plugin extends the pre-existing [cordova-advanced-http-plugin](https://github.com/silkimen/cordova-plugin-advanced-http),\nwe have only added approov functionality on top of it. All credit goes to the actual plugin developer.\n",
     "usage": "\n```typescript\nimport { ApproovHttp } from '@awesome-cordova-plugins/http/ngx';\n\nconstructor(private http: ApproovHttp) {}\n\n...\n\nthis.http.get('http://ionic.io', {}, {})\n  .then(data => {\n\n    console.log(data.status);\n    console.log(data.data); // data received by server\n    console.log(data.headers);\n\n  })\n  .catch(error => {\n\n    console.log(error.status);\n    console.log(error.error); // error message as string\n    console.log(error.headers);\n\n  });\n\n```",
     "platforms": [
       "Android",
@@ -434,7 +434,7 @@
   {
     "packageName": "@awesome-cordova-plugins/appsflyer",
     "displayName": "Appsflyer",
-    "description": "\nAppsflyer Cordova SDK support for Attribution\n",
+    "description": "Appsflyer Cordova SDK support for Attribution\n",
     "usage": "\n```typescript\nimport { Appsflyer } from '@awesome-cordova-plugins/appsflyer/ngx';\n\n\nconstructor(private appsflyer: Appsflyer) { }\n\n...\n\n\nthis.appsflyer.initSdk(options);\n\n```\n",
     "platforms": [
       "iOS",
@@ -448,7 +448,7 @@
   {
     "packageName": "@awesome-cordova-plugins/audio-management",
     "displayName": "Audio Management",
-    "description": "\nA Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible\nringer values for those streams are: silent, vibrate and normal.\n",
+    "description": "A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible\nringer values for those streams are: silent, vibrate and normal.\n",
     "usage": "\n```typescript\nimport { AudioManagement } from '@awesome-cordova-plugins/audio-management/ngx';\n\n\nconstructor(public audioman: AudioManagement) { }\n\n...\n\nsetAudioMode() {\n this.audioman.setAudioMode(AudioManagement.AudioMode.NORMAL)\n   .then(() => {\n    console.log('Device audio mode is now NORMAL');\n   })\n   .catch((reason) => {\n     console.log(reason);\n   });\n}\n\ngetAudioMode() {\n this.audioman.getAudioMode()\n   .then((value: AudioManagement.AudioModeReturn) => {\n    console.log('Device audio mode is ' + value.label + ' (' + value.audioMode + ')');\n   })\n   .catch((reason) => {\n     console.log(reason);\n   });\n}\n\n```",
     "platforms": [
       "Android"
@@ -461,7 +461,7 @@
   {
     "packageName": "@awesome-cordova-plugins/autostart",
     "displayName": "Autostart",
-    "description": "\nThis plugin automatically starts your Android app after every boot or auto-update.\nYou can enable or disable the autostart function in your app.\n",
+    "description": "This plugin automatically starts your Android app after every boot or auto-update.\nYou can enable or disable the autostart function in your app.\n",
     "usage": "\n```typescript\nimport { Autostart } from '@awesome-cordova-plugins/autostart/ngx';\n\n\nconstructor(private autostart: Autostart) { }\n\n...\n\nthis.autostart.enable();\n\nthis.autostart.disable();\n\n```\n",
     "platforms": [
       "Android"
@@ -474,7 +474,7 @@
   {
     "packageName": "@awesome-cordova-plugins/background-fetch",
     "displayName": "Background Fetch",
-    "description": "\niOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399\niOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).\nFor more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch\n",
+    "description": "iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399\niOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).\nFor more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch\n",
     "usage": "\n\n```typescript\nimport { BackgroundFetch, BackgroundFetchConfig } from '@awesome-cordova-plugins/background-fetch/ngx';\n\n\nconstructor(private backgroundFetch: BackgroundFetch) {\n\n  const config: BackgroundFetchConfig = {\n    stopOnTerminate: false, // Set true to cease background-fetch from operating after user \"closes\" the app. Defaults to true.\n  }\n\n  backgroundFetch.configure(config)\n     .then(() => {\n         console.log('Background Fetch initialized');\n\n         this.backgroundFetch.finish();\n\n     })\n     .catch(e => console.log('Error initializing background fetch', e));\n\n  // Start the background-fetch API. Your callbackFn provided to #configure will be executed each time a background-fetch event occurs. NOTE the #configure method automatically calls #start. You do not have to call this method after you #configure the plugin\n  backgroundFetch.start();\n\n  // Stop the background-fetch API from firing fetch events. Your callbackFn provided to #configure will no longer be executed.\n  backgroundFetch.stop();\n\n\n}\n\n```",
     "platforms": [
       "iOS"
@@ -487,7 +487,7 @@
   {
     "packageName": "@awesome-cordova-plugins/background-geolocation",
     "displayName": "Background Geolocation",
-    "description": "\nThis plugin provides foreground and background geolocation with battery-saving \"circular region monitoring\" and \"stop detection\". For\nmore detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation\n",
+    "description": "This plugin provides foreground and background geolocation with battery-saving \"circular region monitoring\" and \"stop detection\". For\nmore detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation\n",
     "usage": "\n\nBackgroundGeolocation must be called within app.ts and or before Geolocation. Otherwise the platform will not ask you for background tracking permission.\n\n```typescript\nimport { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationEvents, BackgroundGeolocationResponse } from '@awesome-cordova-plugins/background-geolocation/ngx';\n\nconstructor(private backgroundGeolocation: BackgroundGeolocation) { }\n\n...\n\nconst config: BackgroundGeolocationConfig = {\n            desiredAccuracy: 10,\n            stationaryRadius: 20,\n            distanceFilter: 30,\n            debug: true, //  enable this hear sounds for background-geolocation life-cycle.\n            stopOnTerminate: false, // enable this to clear background location settings when the app terminates\n    };\n\nthis.backgroundGeolocation.configure(config)\n  .then(() => {\n\n    this.backgroundGeolocation.on(BackgroundGeolocationEvents.location).subscribe((location: BackgroundGeolocationResponse) => {\n      console.log(location);\n\n      // IMPORTANT:  You must execute the finish method here to inform the native plugin that you're finished,\n      // and the background-task may be completed.  You must do this regardless if your operations are successful or not.\n      // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.\n      this.backgroundGeolocation.finish(); // FOR IOS ONLY\n    });\n\n  });\n\n// start recording location\nthis.backgroundGeolocation.start();\n\n// If you wish to turn OFF background-tracking, call the #stop method.\nthis.backgroundGeolocation.stop();\n\n```",
     "platforms": [
       "Android",
@@ -501,7 +501,7 @@
   {
     "packageName": "@awesome-cordova-plugins/background-mode",
     "displayName": "Background Mode",
-    "description": "\nCordova plugin to prevent the app from going to sleep while in background.\nRequires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode",
+    "description": "Cordova plugin to prevent the app from going to sleep while in background.\nRequires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode\n",
     "usage": "\n```typescript\nimport { BackgroundMode } from '@awesome-cordova-plugins/background-mode/ngx';\n\nconstructor(private backgroundMode: BackgroundMode) { }\n\n...\n\nthis.backgroundMode.enable();\n```\n",
     "platforms": [
       "AmazonFire OS",
@@ -518,7 +518,7 @@
   {
     "packageName": "@awesome-cordova-plugins/background-upload",
     "displayName": "BackgroundUpload",
-    "description": "\nThis plugin does something\n",
+    "description": "This plugin does something\n",
     "usage": "\n```typescript\nimport { BackgroundUpload } from '@awesome-cordova-plugins/background-upload/ngx';\n\n\nconstructor(private backgroundUpload: BackgroundUpload) { }\n\n...\n\n\nthis.backgroundUpload.init({})\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -532,7 +532,7 @@
   {
     "packageName": "@awesome-cordova-plugins/backlight",
     "displayName": "Backlight",
-    "description": "\nThis plugin adds turning on/off the device backlight.\n",
+    "description": "This plugin adds turning on/off the device backlight.\n",
     "usage": "\n```typescript\nimport { Backlight } from '@awesome-cordova-plugins/backlight/ngx';\n\nconstructor(private backlight: Backlight) { }\n\n...\n\n// Turn backlight on\nthis.backlight.on().then(() => console.log('backlight on'));\n\n// Turn backlight off\nthis.backlight.off().then(() => console.log('backlight off'));\n\n```\n",
     "platforms": [
       "Android"
@@ -545,7 +545,7 @@
   {
     "packageName": "@awesome-cordova-plugins/badge",
     "displayName": "Badge",
-    "description": "\nThe essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.\n\nRequires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).\n\nAndroid Note: Badges have historically only been a feature implemented by third party launchers and not visible unless one of those launchers was being used (E.G. Samsung or Nova Launcher) and if enabled by the user. As of Android 8 (Oreo), [notification badges](https://developer.android.com/training/notify-user/badges) were introduced officially to reflect unread notifications. This plugin is unlikely to work as expected on devices running Android 8 or newer. Please see the [local notifications plugin docs](https://github.com/katzer/cordova-plugin-local-notifications) for more information on badge use with notifications.\n",
+    "description": "The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.\n\nRequires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).\n\nAndroid Note: Badges have historically only been a feature implemented by third party launchers and not visible unless one of those launchers was being used (E.G. Samsung or Nova Launcher) and if enabled by the user. As of Android 8 (Oreo), [notification badges](https://developer.android.com/training/notify-user/badges) were introduced officially to reflect unread notifications. This plugin is unlikely to work as expected on devices running Android 8 or newer. Please see the [local notifications plugin docs](https://github.com/katzer/cordova-plugin-local-notifications) for more information on badge use with notifications.\n",
     "usage": "\n```typescript\nimport { Badge } from '@awesome-cordova-plugins/badge/ngx';\n\nconstructor(private badge: Badge) { }\n\n...\n\nthis.badge.set(10);\nthis.badge.increase(1);\nthis.badge.clear();\n```\n",
     "platforms": [
       "Android",
@@ -562,7 +562,7 @@
   {
     "packageName": "@awesome-cordova-plugins/baidu-push",
     "displayName": "Baidu Push",
-    "description": "\nThis plugin faciliates the use of Baidu Push notifications.\n",
+    "description": "This plugin faciliates the use of Baidu Push notifications.\n",
     "usage": "\n```typescript\nimport { BaiduPush } from '@awesome-cordova-plugins/baidu-push/ngx';\n\n\nconstructor(private baiduPush: BaiduPush) { }\n\n...\n\nthis.baiduPush.startWork('xxxxxx')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```",
     "platforms": [
       "Android",
@@ -576,7 +576,7 @@
   {
     "packageName": "@awesome-cordova-plugins/barcode-scanner",
     "displayName": "Barcode Scanner",
-    "description": "\nThe Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.\n\nRequires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).\n",
+    "description": "The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.\n\nRequires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).\n",
     "usage": "\n```typescript\nimport { BarcodeScanner } from '@awesome-cordova-plugins/barcode-scanner/ngx';\n\nconstructor(private barcodeScanner: BarcodeScanner) { }\n\n...\n\n\nthis.barcodeScanner.scan().then(barcodeData => {\n console.log('Barcode data', barcodeData);\n}).catch(err => {\n\tconsole.log('Error', err);\n});\n```",
     "platforms": [
       "Android",
@@ -593,7 +593,7 @@
   {
     "packageName": "@awesome-cordova-plugins/base64-to-gallery",
     "displayName": "Base64 To Gallery",
-    "description": "This plugin allows you to save base64 data as a png image into the device",
+    "description": "This plugin allows you to save base64 data as a png image into the device\n",
     "usage": "\n```typescript\nimport { Base64ToGallery } from '@awesome-cordova-plugins/base64-to-gallery/ngx';\n\nconstructor(private base64ToGallery: Base64ToGallery) { }\n\n\n...\n\n\nthis.base64ToGallery.base64ToGallery(base64Data, { prefix: '_img' }).then(\n  res => console.log('Saved image to gallery ', res),\n  err => console.log('Error saving image to gallery ', err)\n);\n```",
     "platforms": [
       "Android",
@@ -608,7 +608,7 @@
   {
     "packageName": "@awesome-cordova-plugins/base64",
     "displayName": "Base64",
-    "description": "\nThis Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3\n",
+    "description": "This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3\n",
     "usage": "\n```typescript\nimport { Base64 } from '@awesome-cordova-plugins/base64/ngx';\n\nconstructor(private base64: Base64) { }\n\n...\n\nlet filePath: string = 'file:///...';\nthis.base64.encodeFile(filePath).then((base64File: string) => {\n  console.log(base64File);\n}, (err) => {\n  console.log(err);\n});\n\n```\n",
     "platforms": [
       "Android",
@@ -622,7 +622,7 @@
   {
     "packageName": "@awesome-cordova-plugins/battery-status",
     "displayName": "Battery Status",
-    "description": "\nRequires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).\n",
+    "description": "Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).\n",
     "usage": "\n```typescript\nimport { BatteryStatus } from '@awesome-cordova-plugins/battery-status/ngx';\n\nconstructor(private batteryStatus: BatteryStatus) { }\n\n...\n\n\n// watch change in battery status\nconst subscription = this.batteryStatus.onChange().subscribe(status => {\n   console.log(status.level, status.isPlugged);\n});\n\n// stop watch\nsubscription.unsubscribe();\n\n```",
     "platforms": [
       "iOS",
@@ -638,7 +638,7 @@
   {
     "packageName": "@awesome-cordova-plugins/biocatch",
     "displayName": "BioCatch",
-    "description": "\nBioCatch SDK Cordova support\n",
+    "description": "BioCatch SDK Cordova support\n",
     "usage": "\n```typescript\nimport { BioCatch } from '@awesome-cordova-plugins/biocatch';\n\n\nconstructor(private biocatch: BioCatch) { }\n\n...\n\n\nthis.biocatch.start('customer-session-1', 'http://example.com', 'some-public-key')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "iOS",
@@ -652,7 +652,7 @@
   {
     "packageName": "@awesome-cordova-plugins/biometric-wrapper",
     "displayName": "BiometricWrapper",
-    "description": "\nThis plugin capture biometric(Iris and Fingerprint) and validate the user.\nMay be used in Banking domain\n",
+    "description": "This plugin capture biometric(Iris and Fingerprint) and validate the user.\nMay be used in Banking domain\n",
     "usage": "\n```typescript\nimport { BiometricWrapper } from '@awesome-cordova-plugins/biometric-wrapper/ngx';\n\n\nconstructor(private biometricWrapper: BiometricWrapper) { }\n\n...\n\n\nthis.biometricWrapper.activateIris({'PID_XML': '<pid-xml/>'})\n  .then((res: any) => )\n  .catch((error: any) => );\n\n```\n",
     "platforms": [
       "Android"
@@ -666,7 +666,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ble",
     "displayName": "BLE",
-    "description": "\nThis plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.\n\nThe plugin provides a simple JavaScript API for iOS and Android.\n\n- Scan for peripherals\n- Connect to a peripheral\n- Read the value of a characteristic\n- Write new value to a characteristic\n- Get notified when characteristic's value changes\n\nAdvertising information is returned when scanning for peripherals. Service, characteristic, and property info is returned when connecting to a peripheral. All access is via service and characteristic UUIDs. The plugin manages handles internally.\n\nSimultaneous connections to multiple peripherals are supported.\n",
+    "description": "This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.\n\nThe plugin provides a simple JavaScript API for iOS and Android.\n\n- Scan for peripherals\n- Connect to a peripheral\n- Read the value of a characteristic\n- Write new value to a characteristic\n- Get notified when characteristic's value changes\n\nAdvertising information is returned when scanning for peripherals. Service, characteristic, and property info is returned when connecting to a peripheral. All access is via service and characteristic UUIDs. The plugin manages handles internally.\n\nSimultaneous connections to multiple peripherals are supported.\n",
     "usage": "\n\n```typescript\n\nimport { BLE } from '@awesome-cordova-plugins/ble/ngx';\n\nconstructor(private ble: BLE) { }\n\n```\n\n## Peripheral Data\n\nPeripheral Data is passed to the success callback when scanning and connecting. Limited data is passed when scanning.\n\n```typescript\n  {\n      'name': 'Battery Demo',\n      'id': '20:FF:D0:FF:D1:C0',\n      'advertising': [2,1,6,3,3,15,24,8,9,66,97,116,116,101,114,121],\n      'rssi': -55\n  }\n```\nAfter connecting, the peripheral object also includes service, characteristic and descriptor information.\n\n```typescript\n  {\n      'name': 'Battery Demo',\n      'id': '20:FF:D0:FF:D1:C0',\n      'advertising': [2,1,6,3,3,15,24,8,9,66,97,116,116,101,114,121],\n      'rssi': -55,\n      'services': [\n          '1800',\n          '1801',\n          '180f'\n      ],\n      'characteristics': [\n          {\n              'service': '1800',\n              'characteristic': '2a00',\n              'properties': [\n                  'Read'\n              ]\n          },\n          {\n              'service': '1800',\n              'characteristic': '2a01',\n              'properties': [\n                  'Read'\n              ]\n          },\n          {\n              'service': '1801',\n              'characteristic': '2a05',\n              'properties': [\n                  'Read'\n              ]\n          },\n          {\n              'service': '180f',\n              'characteristic': '2a19',\n              'properties': [\n                  'Read'\n              ],\n              'descriptors': [\n                  {\n                      'uuid': '2901'\n                  },\n                  {\n                      'uuid': '2904'\n                  }\n              ]\n          }\n      ]\n  }\n```\n\n## Advertising Data\nBluetooth advertising data is returned in when scanning for devices. The format varies depending on your platform. On Android advertising data will be the raw advertising bytes. iOS does not allow access to raw advertising data, so a dictionary of data is returned.\n\nThe advertising information for both Android and iOS appears to be a combination of advertising data and scan response data.\n\n### Android\n\n```typescript\n  {\n      'name': 'demo',\n      'id': '00:1A:7D:DA:71:13',\n      'advertising': ArrayBuffer,\n     'rssi': -37\n }\n```\n\nConvert the advertising info to a Uint8Array for processing. `var adData = new Uint8Array(peripheral.advertising)`\n\n### iOS\n\nNote that iOS uses the string value of the constants for the [Advertisement Data Retrieval Keys](https://developer.apple.com/library/ios/documentation/CoreBluetooth/Reference/CBCentralManagerDelegate_Protocol/index.html#//apple_ref/doc/constant_group/Advertisement_Data_Retrieval_Keys). This will likely change in the future.\n\n```typescript\n  {\n      'name': 'demo',\n      'id': 'D8479A4F-7517-BCD3-91B5-3302B2F81802',\n      'advertising': {\n          'kCBAdvDataChannel': 37,\n          'kCBAdvDataServiceData': {\n              'FED8': {\n                  'byteLength': 7 // data not shown\n              }\n          },\n          'kCBAdvDataLocalName': 'demo',\n          'kCBAdvDataServiceUUIDs': ['FED8'],\n          'kCBAdvDataManufacturerData': {\n              'byteLength': 7  // data not shown\n          },\n          'kCBAdvDataTxPowerLevel': 32,\n          'kCBAdvDataIsConnectable': true\n      },\n      'rssi': -53\n  }\n```\n\n## Typed Arrays\n\nThis plugin uses typed Arrays or ArrayBuffers for sending and receiving data.\n\nThis means that you need convert your data to ArrayBuffers before sending and from ArrayBuffers when receiving.\n\n```typescript\n  // ASCII only\n  function stringToBytes(string) {\n     var array = new Uint8Array(string.length);\n     for (var i = 0, l = string.length; i < l; i++) {\n         array[i] = string.charCodeAt(i);\n      }\n      return array.buffer;\n  }\n\n  // ASCII only\n  function bytesToString(buffer) {\n      return String.fromCharCode.apply(null, new Uint8Array(buffer));\n  }\n```\nYou can read more about typed arrays in these articles on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) and [HTML5 Rocks](http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/).\n\n## UUIDs\n\nUUIDs are always strings and not numbers. Some 16-bit UUIDs, such as '2220' look like integers, but they're not. (The integer 2220 is 0x8AC in hex.) This isn't a problem with 128 bit UUIDs since they look like strings 82b9e6e1-593a-456f-be9b-9215160ebcac. All 16-bit UUIDs should also be passed to methods as strings.\n",
     "platforms": [
       "Android",
@@ -680,7 +680,7 @@
   {
     "packageName": "@awesome-cordova-plugins/blinkid",
     "displayName": "BlinkId",
-    "description": "\nMicroblink SDK wrapper for barcode and document scanning. See the\nblinkid-phonegap repository for available recognizers and other settings\n",
+    "description": "Microblink SDK wrapper for barcode and document scanning. See the\nblinkid-phonegap repository for available recognizers and other settings\n",
     "usage": "\n```typescript\nimport { BlinkId, RecognizerResultState } from '@awesome-cordova-plugins/blinkid/ngx';\n\nconstructor(private blinkId: BlinkId) { }\n\n...\n\nconst overlaySettings = new this.blinkId.DocumentOverlaySettings();\n\nconst usdlRecognizer = new this.blinkId.UsdlRecognizer();\nconst usdlSuccessFrameGrabber = new this.blinkId.SuccessFrameGrabberRecognizer(usdlRecognizer);\n\nconst barcodeRecognizer = new this.blinkId.BarcodeRecognizer();\nbarcodeRecognizer.scanPdf417 = true;\n\nconst recognizerCollection = new this.blinkId.RecognizerCollection([\n  usdlSuccessFrameGrabber,\n  barcodeRecognizer,\n]);\n\nconst canceled = await this.blinkId.scanWithCamera(\n  overlaySettings,\n  recognizerCollection,\n  { ios: IOS_LICENSE_KEY, android: ANDROID_LICENSE_KEY },\n);\n\nif (!canceled) {\n  if (usdlRecognizer.result.resultState === RecognizerResultState.valid) {\n    const successFrame = usdlSuccessFrameGrabber.result.successFrame;\n    if (successFrame) {\n      this.base64Img = `data:image/jpg;base64, ${successFrame}`;\n      this.fields = usdlRecognizer.result.fields;\n    }\n  } else {\n    this.barcodeStringData = barcodeRecognizer.result.stringData;\n  }\n}\n\n...\n\nconst overlaySettings = new this.blinkId.BlinkCardOverlaySettings();\nconst recognizer = new this.blinkId.BlinkCardRecognizer();\nrecognizer.returnFullDocumentImage = false;\nrecognizer.detectGlare = true;\nrecognizer.extractCvv = true;\nrecognizer.extractValidThru = true;\nrecognizer.extractOwner = true;\n\nconst recognizerCollection = new this.blinkId.RecognizerCollection([recognizer]);\nconst canceled = await this.blinkId.scanWithCamera(\n  overlaySettings,\n  recognizerCollection,\n  {\n    ios: '', //iOS License Key\n    android: '' //Android License Key\n  },\n);\n\nif (!canceled) {\n  if (recognizer.result.resultState === RecognizerResultState.valid) {\n    const results = recognizer.result;\n\n    if (results.resultState === RecognizerResultState.valid) {\n      const ccInfo = {\n        cardNumber: Number(results.cardNumber),\n        expirationMonth: Number(results.validThru.month),\n        expirationYear: Number(results.validThru.year),\n        cvv: Number(results.cvv)\n      };\n    }\n  }\n```\n",
     "platforms": [
       "iOS",
@@ -694,7 +694,7 @@
   {
     "packageName": "@awesome-cordova-plugins/blinkup",
     "displayName": "BlinkUp",
-    "description": "\nElectric Imp BlinkUp ionic plugin.\n",
+    "description": "Electric Imp BlinkUp ionic plugin.\n",
     "usage": "\n```typescript\nimport { BlinkUp } from '@awesome-cordova-plugins/blinkup/ngx';\n\nconst options = <BlinkUpWifiOptions>{\n   apiKey: 'API_KEY',\n   timeoutMs: 60000,\n   ssid: 'MY_SSID',\n   password: 'MY_PASSWORD'\n }\n BlinkUp.flashWifiBlinkUp(options).subscribe(\n    (result) => console.log('Done'),\n    (error) => console.log(error)\n  )\n```\n",
     "platforms": [
       "Android",
@@ -708,7 +708,7 @@
   {
     "packageName": "@awesome-cordova-plugins/bluetooth-classic-serial-port",
     "displayName": "Bluetooth Classic Serial Port",
-    "description": "This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.",
+    "description": "This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.\n",
     "usage": "\n```typescript\nimport { BluetoothClassicSerialPort } from '@awesome-cordova-plugins/bluetooth-classic-serial-port/ngx';\n\nconstructor(private bluetoothClassicSerialPort: BluetoothClassicSerialPort) { }\n\n\n// Write a string\nthis.bluetoothClassicSerialPort.write(\"00001101-0000-1000-8000-00805F9B34FB\", \"hello, world\", success, failure);\n\n// Array of int or bytes\nthis.bluetoothClassicSerialPort.write(\"00001101-0000-1000-8000-00805F9B34FB\", [186, 220, 222], success, failure);\n\n// Typed Array\nvar data = new Uint8Array(4);\ndata[0] = 0x41;\ndata[1] = 0x42;\ndata[2] = 0x43;\ndata[3] = 0x44;\nthis.bluetoothClassicSerialPort.write(interfaceId, data, success, failure);\n\n// Array Buffer\nthis.bluetoothClassicSerialPort.write(interfaceId, data.buffer, success, failure);\n```\n\n// iOS select accessory\n\n```typescript\n async selectAccessory() {\n   const deviceDiscovery = this.bluetoothClassicSerialPort.setDeviceDiscoveredListener().subscribe(async (connectionConfig) => {\n     deviceDiscovery.unsubscribe();\n   })\n\n   await this.bluetoothClassicSerialPort.discoverUnpaired().catch(error => {\n     deviceDiscovery.unsubscribe();\n   })\n\n }\n```\n\n",
     "platforms": [
       "Android",
@@ -723,7 +723,7 @@
   {
     "packageName": "@awesome-cordova-plugins/bluetooth-le",
     "displayName": "BluetoothLE",
-    "description": "\nThis plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.\nIt's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.\nIt supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.\n",
+    "description": "This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.\nIt's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.\nIt supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.\n",
     "usage": "\n```typescript\nimport { BluetoothLE } from '@awesome-cordova-plugins/bluetooth-le/ngx';\n\n\nconstructor(public bluetoothle: BluetoothLE, public plt: Platform) {\n\n this.plt.ready().then((readySource) => {\n\n   console.log('Platform ready from', readySource);\n\n   this.bluetoothle.initialize().then(ble => {\n     console.log('ble', ble.status) // logs 'enabled'\n   });\n\n  });\n}\n\n```\n\n",
     "platforms": [
       "Android",
@@ -738,7 +738,7 @@
   {
     "packageName": "@awesome-cordova-plugins/bluetooth-serial",
     "displayName": "Bluetooth Serial",
-    "description": "This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).",
+    "description": "This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).\n",
     "usage": "\n```typescript\nimport { BluetoothSerial } from '@awesome-cordova-plugins/bluetooth-serial/ngx';\n\nconstructor(private bluetoothSerial: BluetoothSerial) { }\n\n\n// Write a string\nthis.bluetoothSerial.write('hello world').then(success, failure);\n\n// Array of int or bytes\nthis.bluetoothSerial.write([186, 220, 222]).then(success, failure);\n\n// Typed Array\nvar data = new Uint8Array(4);\ndata[0] = 0x41;\ndata[1] = 0x42;\ndata[2] = 0x43;\ndata[3] = 0x44;\nthis.bluetoothSerial.write(data).then(success, failure);\n\n// Array Buffer\nthis.bluetoothSerial.write(data.buffer).then(success, failure);\n```\n",
     "platforms": [
       "Android",
@@ -753,7 +753,7 @@
   {
     "packageName": "@awesome-cordova-plugins/braintree",
     "displayName": "Braintree",
-    "description": "\nThis plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).\n\n Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`\n\n For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)\n\n**NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.\nSee the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.\n",
+    "description": "This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).\n\nIonic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`\n\nFor information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)\n\n**NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.\nSee the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.\n",
     "usage": "\n```typescript\nimport { Braintree, ApplePayOptions, PaymentUIOptions } from '@awesome-cordova-plugins/braintree/ngx';\n\nconstructor(private braintree: Braintree) { }\n\n...\n\n// Your Braintree `Tokenization Key` from the Braintree dashboard.\n// Alternatively you can also generate this token server-side\n// using a client ID in order to allow users to use stored payment methods.\n// See the [Braintree Client Token documentation](https://developers.braintreepayments.com/reference/request/client-token/generate/node#customer_id) for details.\nconst BRAINTREE_TOKEN = '<YOUR_BRAINTREE_TOKEN>';\n\n// NOTE: Do not provide this unless you have configured your Apple Developer account\n// as well as your Braintree merchant account, otherwise the Braintree module will fail.\nconst appleOptions: ApplePayOptions = {\n  merchantId: '<YOUR MERCHANT ID>',\n  currency: 'USD',\n  country: 'US'\n}\n\nconst paymentOptions: PaymentUIOptions = {\n  amount: '14.99',\n  primaryDescription: 'Your product or service (per /item, /month, /week, etc)',\n}\n\nthis.braintree.initialize(BRAINTREE_TOKEN)\n  .then(() => this.braintree.setupApplePay(appleOptions))\n  .then(() => this.braintree.presentDropInPaymentUI(paymentOptions))\n  .then((result: PaymentUIResult) => {\n    if (result.userCancelled) {\n      console.log(\"User cancelled payment dialog.\");\n    } else {\n      console.log(\"User successfully completed payment!\");\n      console.log(\"Payment Nonce: \" + result.nonce);\n      console.log(\"Payment Result.\", result);\n    }\n  })\n  .catch((error: string) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -769,7 +769,7 @@
   {
     "packageName": "@awesome-cordova-plugins/branch-io",
     "displayName": "BranchIo",
-    "description": "\nBranch.io is an attribution service for deeplinking and invitation links\n",
+    "description": "Branch.io is an attribution service for deeplinking and invitation links\n",
     "usage": "\n```\nimport { BranchIo } from '@awesome-cordova-plugins/branch-io/ngx';\n\n\nconstructor(private branch: BranchIo) { }\n\n```\n",
     "platforms": [
       "iOS",
@@ -783,7 +783,7 @@
   {
     "packageName": "@awesome-cordova-plugins/brightness",
     "displayName": "Brightness",
-    "description": "\nThe Brightness plugin let you control the display brightness of your device.\n\nRequires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).\n",
+    "description": "The Brightness plugin let you control the display brightness of your device.\n\nRequires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).\n",
     "usage": "\n```typescript\nimport { Brightness } from '@awesome-cordova-plugins/brightness/ngx';\n\nconstructor(private brightness: Brightness) { }\n\n...\n\nlet brightnessValue = 0.8;\nthis.brightness.setBrightness(brightnessValue);\n```\n\n",
     "platforms": [
       "Android",
@@ -797,7 +797,7 @@
   {
     "packageName": "@awesome-cordova-plugins/broadcaster",
     "displayName": "Broadcaster",
-    "description": "\nThis plugin adds exchanging events between native code and your app.\n",
+    "description": "This plugin adds exchanging events between native code and your app.\n",
     "usage": "\n```typescript\nimport { Broadcaster } from '@awesome-cordova-plugins/broadcaster/ngx';\n\nconstructor(private broadcaster: Broadcaster) { }\n\n...\n\n// Listen to events from Native\nthis.broadcaster.addEventListener('eventName').subscribe((event) => console.log(event));\n\n// Send event to Native\nthis.broadcaster.fireNativeEvent('eventName', {}).then(() => console.log('success'));\n\n```\n",
     "platforms": [
       "Android",
@@ -812,7 +812,7 @@
   {
     "packageName": "@awesome-cordova-plugins/browser-tab",
     "displayName": "Browser Tab",
-    "description": "\nThis plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.\n",
+    "description": "This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.\n",
     "usage": "\n```typescript\nimport { BrowserTab } from '@awesome-cordova-plugins/browser-tab/ngx';\n\nconstructor(private browserTab: BrowserTab) {\n\n  browserTab.isAvailable()\n    .then(isAvailable => {\n      if (isAvailable) {\n        browserTab.openUrl('https://ionic.io');\n      } else {\n        // open URL with InAppBrowser instead or SafariViewController\n      }\n    });\n}\n\n```\n",
     "platforms": [
       "Android",
@@ -826,7 +826,7 @@
   {
     "packageName": "@awesome-cordova-plugins/build-info",
     "displayName": "Build Info",
-    "description": "\nThis plugin provides build information.\n",
+    "description": "This plugin provides build information.\n",
     "usage": "\n```\nimport { BuildInfo } from '@awesome-cordova-plugins/build-info/ngx';\n\nthis.platform.ready().then(() => {\n    console.log('BuildInfo.baseUrl        =' + BuildInfo.baseUrl)\n    console.log('BuildInfo.packageName    =' + BuildInfo.packageName)\n    console.log('BuildInfo.basePackageName=' + BuildInfo.basePackageName)\n    console.log('BuildInfo.displayName    =' + BuildInfo.displayName)\n    console.log('BuildInfo.name           =' + BuildInfo.name)\n    console.log('BuildInfo.version        =' + BuildInfo.version)\n    console.log('BuildInfo.versionCode    =' + BuildInfo.versionCode)\n    console.log('BuildInfo.debug          =' + BuildInfo.debug)\n    console.log('BuildInfo.buildType      =' + BuildInfo.buildType)\n    console.log('BuildInfo.flavor         =' + BuildInfo.flavor)\n    console.log('BuildInfo.buildDate      =' + BuildInfo.buildDate)\n    console.log('BuildInfo.installDate    =' + BuildInfo.installDate)\n})\n```\n",
     "platforms": [
       "Android",
@@ -844,7 +844,7 @@
   {
     "packageName": "@awesome-cordova-plugins/calendar",
     "displayName": "Calendar",
-    "description": "\nThis plugin allows you to add events to the Calendar of the mobile device.\n\nRequires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).\n\n",
+    "description": "This plugin allows you to add events to the Calendar of the mobile device.\n\nRequires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).\n",
     "usage": "\n```typescript\nimport { Calendar } from '@awesome-cordova-plugins/calendar/ngx';\n\nconstructor(private calendar: Calendar) { }\n\n\nthis.calendar.createCalendar('MyCalendar').then(\n  (msg) => { console.log(msg); },\n  (err) => { console.log(err); }\n);\n```",
     "platforms": [
       "Android",
@@ -859,7 +859,7 @@
   {
     "packageName": "@awesome-cordova-plugins/call-directory",
     "displayName": "Call Directory",
-    "description": "\nThis plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`\nto process the changes in the call directory extension.\n",
+    "description": "This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`\nto process the changes in the call directory extension.\n",
     "usage": "\n```typescript\nimport { CallDirectory } from '@awesome-cordova-plugins/call-directory/ngx';\n\n\nconstructor(private callDirectory: CallDirectory) { }\n\n\nlet items = [{label: \"Hello\", number: \"123\"}];\nthis.callDirectory.addIdentification(items)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.callDirectory.reloadExtension()\n  .then(res: string) => console.log(res))\n  .catch((error: any) => console.error(error));\n```\n",
     "platforms": [
       "iOS"
@@ -876,7 +876,7 @@
   {
     "packageName": "@awesome-cordova-plugins/call-log",
     "displayName": "Call Log",
-    "description": "\nThis plugin access the call history on a device and that can be filtered\n",
+    "description": "This plugin access the call history on a device and that can be filtered\n",
     "usage": "\n```typescript\nimport { CallLog } from '@awesome-cordova-plugins/call-log/ngx';\n\n\nconstructor(private callLog: CallLog) { }\n\n````",
     "platforms": [
       "Android"
@@ -889,7 +889,7 @@
   {
     "packageName": "@awesome-cordova-plugins/call-number",
     "displayName": "Call Number",
-    "description": "\nCall a number directly from your Cordova/Ionic application.\n**NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.\n",
+    "description": "Call a number directly from your Cordova/Ionic application.\n**NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.\n",
     "usage": "\n```typescript\nimport { CallNumber } from '@awesome-cordova-plugins/call-number/ngx';\n\nconstructor(private callNumber: CallNumber) { }\n\n...\n\n\nthis.callNumber.callNumber(\"18001010101\", true)\n  .then(res => console.log('Launched dialer!', res))\n  .catch(err => console.log('Error launching dialer', err));\n\n```\n",
     "platforms": [
       "Android",
@@ -903,7 +903,7 @@
   {
     "packageName": "@awesome-cordova-plugins/camera-preview",
     "displayName": "Camera Preview",
-    "description": "\nShowing camera preview in HTML\n\nRequires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).\n",
+    "description": "Showing camera preview in HTML\n\nRequires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).\n",
     "usage": "\n```typescript\nimport { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@awesome-cordova-plugins/camera-preview/ngx';\n\nconstructor(private cameraPreview: CameraPreview) { }\n\n...\n\n// camera options (Size and location). In the following example, the preview uses the rear camera and display the preview in the back of the webview\nconst cameraPreviewOpts: CameraPreviewOptions = {\n  x: 0,\n  y: 0,\n  width: window.screen.width,\n  height: window.screen.height,\n  camera: 'rear',\n  tapPhoto: true,\n  previewDrag: true,\n  toBack: true,\n  alpha: 1\n}\n\n// start camera\nthis.cameraPreview.startCamera(cameraPreviewOpts).then(\n  (res) => {\n    console.log(res)\n  },\n  (err) => {\n    console.log(err)\n  });\n\n// Set the handler to run every time we take a picture\nthis.cameraPreview.setOnPictureTakenHandler().subscribe((result) => {\n  console.log(result);\n  // do something with the result\n});\n\n\n// picture options\nconst pictureOpts: CameraPreviewPictureOptions = {\n  width: 1280,\n  height: 1280,\n  quality: 85\n}\n\n// take a picture\nthis.cameraPreview.takePicture(this.pictureOpts).then((imageData) => {\n  this.picture = 'data:image/jpeg;base64,' + imageData;\n}, (err) => {\n  console.log(err);\n  this.picture = 'assets/img/test.jpg';\n});\n\n// take a snap shot\nthis.cameraPreview.takeSnapshot(this.pictureOpts).then((imageData) => {\n  this.picture = 'data:image/jpeg;base64,' + imageData;\n}, (err) => {\n  console.log(err);\n  this.picture = 'assets/img/test.jpg';\n});\n\n\n// Switch camera\nthis.cameraPreview.switchCamera();\n\n// set color effect to negative\nthis.cameraPreview.setColorEffect('negative');\n\n// Stop the camera preview\nthis.cameraPreview.stopCamera();\n\n```\n",
     "platforms": [
       "Android",
@@ -917,7 +917,7 @@
   {
     "packageName": "@awesome-cordova-plugins/camera",
     "displayName": "Camera",
-    "description": "\nTake a photo or capture video.\n\nRequires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).\n\n[Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add\n```xml\n<config-file parent=\"NSCameraUsageDescription\" platform=\"ios\" target=\"*-Info.plist\">\n <string>You can take photos</string>\n</config-file>\n```\ninside of the <platform name='ios> section\n",
+    "description": "Take a photo or capture video.\n\nRequires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).\n\n[Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add\n\n```xml\n<config-file parent=\"NSCameraUsageDescription\" platform=\"ios\" target=\"*-Info.plist\">\n <string>You can take photos</string>\n</config-file>\n```\n\ninside of the <platform name='ios> section\n",
     "usage": "\n```typescript\nimport { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';\n\nconstructor(private camera: Camera) { }\n\n...\n\n\nconst options: CameraOptions = {\n  quality: 100,\n  destinationType: this.camera.DestinationType.FILE_URI,\n  encodingType: this.camera.EncodingType.JPEG,\n  mediaType: this.camera.MediaType.PICTURE\n}\n\nthis.camera.getPicture(options).then((imageData) => {\n // imageData is either a base64 encoded string or a file URI\n // If it's base64 (DATA_URL):\n let base64Image = 'data:image/jpeg;base64,' + imageData;\n}, (err) => {\n // Handle error\n});\n```",
     "platforms": [
       "Android",
@@ -948,7 +948,7 @@
   {
     "packageName": "@awesome-cordova-plugins/chooser",
     "displayName": "Chooser",
-    "description": "\nFile chooser plugin for Cordova.\n\nThe following must be added to config.xml to prevent crashing when selecting large files on Android:\n```xml\n<platform name=\"android\">\n <edit-config\n   file=\"app/src/main/AndroidManifest.xml\"\n   mode=\"merge\"\n   target=\"/manifest/application\">\n   <application android:largeHeap=\"true\" />\n </edit-config>\n</platform>\n```\n",
+    "description": "File chooser plugin for Cordova.\n\nThe following must be added to config.xml to prevent crashing when selecting large files on Android:\n\n```xml\n<platform name=\"android\">\n <edit-config\n   file=\"app/src/main/AndroidManifest.xml\"\n   mode=\"merge\"\n   target=\"/manifest/application\">\n   <application android:largeHeap=\"true\" />\n </edit-config>\n</platform>\n```\n",
     "usage": "\n```typescript\nimport { Chooser } from '@awesome-cordova-plugins/chooser/ngx';\n\n\nconstructor(private chooser: Chooser) { }\n\n...\n\n\nthis.chooser.getFile()\n  .then(file => console.log(file ? file.name : 'canceled'))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -962,7 +962,7 @@
   {
     "packageName": "@awesome-cordova-plugins/class-kit",
     "displayName": "Class Kit",
-    "description": "Plugin for using Apple's ClassKit framework.\n\n\nPrerequisites:\nOnly works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.\nAlso note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.\n",
+    "description": "Plugin for using Apple's ClassKit framework.\n\nPrerequisites:\nOnly works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.\nAlso note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.\n",
     "usage": "\n```typescript\nimport { ClassKit, CCKContext, CCKBinaryItem, CCKQuantityItem, CCKScoreItem, CCKContextTopic, CCKContextType, CCKBinaryType } from '@awesome-cordova-plugins/class-kit/ngx';\n\n// Init contexts defined in XML file 'CCK-contexts.xml'\nconstructor( ..., private classKit: ClassKit) {\n  platform.ready().then(() => {\n    classKit.initContextsFromXml(\"classkitplugin://\")\n      .then(() => console.log(\"success\"))\n      .catch(e => console.log(\"error: \", e));\n  });\n}\n\n...\n\n// Init context with identifier path\nconst context: CCKContext = {\n  identifierPath: [\"parent_title_one\", \"child_one\", \"child_one_correct_quiz\"],\n  title: \"child one correct quiz\",\n  type: CCKContextType.exercise,\n  topic: CCKContextTopic.science,\n  displayOrder: 0\n};\n\nthis.classKit.addContext(\"classkitplugin://\", context)\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Remove all contexts\nthis.classKit.removeContexts()\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Remove context with identifier path\nthis.classKit.removeContext([\"parent_title_one\", \"child_one\", \"child_one_correct_quiz\"])\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Begin a new activity or restart an activity for a given context\nthis.classKit.beginActivity([\"parent_title_one\", \"child_two\", \"child_two_quiz\"], false)\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Adds a progress range to the active given activity\nthis.classKit.setProgressRange(0, 0.66)\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Adds a progress to the active given activity\nthis.classKit.setProgress(0.66)\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Adds activity information that is true or false, pass or fail, yes or no\nconst binaryItem: CCKBinaryItem = {\n  identifier: \"child_two_quiz_IDENTIFIER_1\",\n  title: \"CHILD TWO QUIZ 1\",\n  type: CCKBinaryType.trueFalse,\n  isCorrect: isCorrect,\n  isPrimaryActivityItem: false\n};\n\nthis.classKit.setBinaryItem(binaryItem)\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Adds activity information that signifies a score out of a possible maximum\nconst scoreItem: CCKScoreItem = {\n  identifier: \"total_score\",\n  title: \"Total Score :-)\",\n  score: 0.66,\n  maxScore: 1.0,\n  isPrimaryActivityItem: true\n};\n\nthis.classKit.setScoreItem(scoreItem)\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n\n// Activity information that signifies a quantity\nconst quantityItem: CCKQuantityItem = {\n   identifier: \"quantity_item_hints\",\n   title: \"Hints\",\n   quantity: 12,\n   isPrimaryActivityItem: false\n};\n\nthis.classKit.setQuantityItem(quantityItem)\n   .then(() => console.log(\"success\"))\n   .catch(e => console.log(\"error: \", e));\n\n```\n",
     "platforms": [
       "iOS"
@@ -975,7 +975,7 @@
   {
     "packageName": "@awesome-cordova-plugins/clevertap",
     "displayName": "CleverTap",
-    "description": "\nCordova Plugin that wraps CleverTap SDK for Android and iOS\n",
+    "description": "Cordova Plugin that wraps CleverTap SDK for Android and iOS\n",
     "usage": "\n```typescript\nimport { CleverTap } from '@awesome-cordova-plugins/clevertap/ngx';\n\nconstructor(private clevertap: CleverTap) { }\n\n```\n",
     "platforms": [
       "Android",
@@ -989,7 +989,7 @@
   {
     "packageName": "@awesome-cordova-plugins/clipboard",
     "displayName": "Clipboard",
-    "description": "\nClipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.\n\n",
+    "description": "Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.\n",
     "usage": "\n```typescript\nimport { Clipboard } from '@awesome-cordova-plugins/clipboard/ngx';\n\nconstructor(private clipboard: Clipboard) { }\n\n...\n\n\nthis.clipboard.copy('Hello world');\n\nthis.clipboard.paste().then(\n   (resolve: string) => {\n      alert(resolve);\n    },\n    (reject: string) => {\n      alert('Error: ' + reject);\n    }\n  );\n\nthis.clipboard.clear();\n```\n",
     "platforms": [
       "Android",
@@ -1005,7 +1005,7 @@
   {
     "packageName": "@awesome-cordova-plugins/cloud-settings",
     "displayName": "Cloud Settings",
-    "description": "\nStores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.\n",
+    "description": "Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.\n",
     "usage": "\n```typescript\nimport { CloudSettings } from '@awesome-cordova-plugins/cloud-settings/ngx';\n\n\nconstructor(private cloudSettings: CloudSettings) { }\n\n...\n\nthis.cloudSettings.exists()\n  .then((exists: boolean) => console.log(\"Saved settings exist: \" + exists) )\n\nthis.cloudSettings.load()\n  .then((settings: any) => this.settings = settings)\n  .catch((error: any) => console.error(error));\n\nthis.cloudSettings.save(this.settings)\n  .then((savedSettings: any) => console.log(\"Saved settings: \" + JSON.stringify(savedSettings)))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1022,7 +1022,7 @@
   {
     "packageName": "@awesome-cordova-plugins/clover-go",
     "displayName": "Clover Go",
-    "description": "\nThis plugin connect to Clover Go payment device and process payments.\n",
+    "description": "This plugin connect to Clover Go payment device and process payments.\n",
     "usage": "\n```typescript\nimport { CloverGo } from '@awesome-cordova-plugins/clover-go/ngx';\n\n\nconstructor(private cloverGo: CloverGo) { }\n\n...\n\n\nthis.cloverGo.init(configuration)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.cloverGo.connect()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.cloverGo.disconnect()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.cloverGo.sale(saleInfo)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.cloverGo.sign(signInfo)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.cloverGo.voidPayment(paymentInfo)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android"
@@ -1035,7 +1035,7 @@
   {
     "packageName": "@awesome-cordova-plugins/code-push",
     "displayName": "Code Push",
-    "description": "\nCodePush plugin for Cordova by Microsoft that supports iOS and Android.\n\nFor more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin\n",
+    "description": "CodePush plugin for Cordova by Microsoft that supports iOS and Android.\n\nFor more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin\n",
     "usage": "\n```typescript\nimport { CodePush } from '@awesome-cordova-plugins/code-push/ngx';\n\nconstructor(private codePush: CodePush) { }\n\n...\n\n// note - mostly error & completed methods of observable will not fire\n// as syncStatus will contain the current state of the update\nthis.codePush.sync().subscribe((syncStatus) => console.log(syncStatus));\n\nconst downloadProgress = (progress) => { console.log(`Downloaded ${progress.receivedBytes} of ${progress.totalBytes}`); }\nthis.codePush.sync({}, downloadProgress).subscribe((syncStatus) => console.log(syncStatus));\n\n```\n",
     "platforms": [
       "Android",
@@ -1049,7 +1049,7 @@
   {
     "packageName": "@awesome-cordova-plugins/colored-browser-tabs",
     "displayName": "Colored Browser Tabs",
-    "description": "\nThis plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS\n",
+    "description": "This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS\n",
     "usage": "\n```typescript\nimport { ColoredBrowserTabs } from '@awesome-cordova-plugins/colored-browser-tabs/ngx';\n\n\nconstructor(private browserTabs: ColoredBrowserTabs) { }\n\n...\n\n\nthis.browserTabs.openTab('www.example.url', '#ffffff')\n  .subscribe()\n\nthis.browserTabs.openTabWithAnimation('www.example.url', 'slide_x', '#ffffff')\n  .subscribe()\n\n```\n",
     "platforms": [
       "Android",
@@ -1063,7 +1063,7 @@
   {
     "packageName": "@awesome-cordova-plugins/contacts",
     "displayName": "Contacts",
-    "description": "\nAccess and manage Contacts on the device.\n",
+    "description": "Access and manage Contacts on the device.\n",
     "usage": "\n\n```typescript\nimport { Contacts, Contact, ContactField, ContactName } from '@awesome-cordova-plugins/contacts/ngx';\n\nconstructor(private contacts: Contacts) { }\n\nlet contact: Contact = this.contacts.create();\n\ncontact.name = new ContactName(null, 'Smith', 'John');\ncontact.phoneNumbers = [new ContactField('mobile', '6471234567')];\ncontact.save().then(\n  () => console.log('Contact saved!', contact),\n  (error: any) => console.error('Error saving contact.', error)\n);\n\n```",
     "platforms": [
       "Android",
@@ -1085,7 +1085,7 @@
   {
     "packageName": "@awesome-cordova-plugins/couchbase-lite",
     "displayName": "Couchbase Lite",
-    "description": "\nPlugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href=\"https://ionicframework.com/integrations/couchbase-lite\" ionicon=\"alert\">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>\n",
+    "description": "Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href=\"https://ionicframework.com/integrations/couchbase-lite\" ionicon=\"alert\">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>\n",
     "usage": "\n```typescript\nimport { CouchbaseLite } from '@awesome-cordova-plugins/couchbase-lite/ngx';\nimport { Http } from '@angular/http';\nimport { Observable } from 'rxjs'\nconstructor(private couchbase: CouchbaseLite, private platform:Platform,private _http:Http) {\n   this.initMethod();\n}\nurl:string;\ninitMethod() {\n   this.couchbase.getURL().then((url)=> {\n       this.url = url;\n   })\n}\ngetUrl() {\n     return this.url;\n}\n// DATABASES //\ncreateDatabase(database_name:string) {\n     let url = this.getUrl();\n     url = url+database_name;\n     return this._http\n       .put(url)\n       .map(data => { this.results = data['results'] })\n       .catch((error:any) => {\n          return Observable.throw(error.json() || 'Couchbase Lite error');\n        })\n }\ndeleteDatabase(database_name:string) {\n     let url = this.getUrl();\n     url = url+database_name;\n     return this._http\n       .delete(url)\n       .map(data => { this.results = data['results'] })\n       .catch((error:any) => {\n          return Observable.throw(error.json() || 'Couchbase Lite error');\n       })\n}\ngetAllDbs() {\n     let url = this.getUrl();\n     url = url+'_all_dbs';\n     return this._http\n       .get(url)\n       .map(data => { this.results = data['results'] })\n       .catch((error:any) => {\n          return Observable.throw(error.json() || 'Couchbase Lite error');\n       })\n}\n// DOCUMENTS //\ngetAllDocuments(database_name:string){\n     let url = this.getUrl();\n     // include_docs=true will include a doc inside response, it is false by default\n     url = url + database_name + '/_all_docs?include_docs=true';\n     return this._http\n       .get(url)\n       .map(data => { this.results = data['results'] })\n       .catch((error:any) => {\n          return Observable.throw(error.json() || 'Couchbase Lite error');\n       })        .\n}\ncreateDocument(database_name:string,document){\n     let url = this.getUrl();\n     url = url + database_name;\n     return this._http\n       .post(url,document)\n       .map(data => { this.results = data['results'] })\n       .catch((error:any) => {\n          return Observable.throw(error.json() || 'Couchbase Lite error');\n       })        .\n}\nlet document = {\n   _id:'You can either specify the document ID (must be string) else couchbase generates one for your doc',\n   data:{name:'sandman',age:25,city:pune}\n }\ncreateDocument('justbe', document);\n// successful response\n{ \"id\": \"string\",\"rev\": \"string\",\"ok\": true }\nupdateDocument(database_name:string,document){\n     let url = this.getUrl();\n     url = url + database_name + '/' + document._id;\n     return this._http\n       .put(url,document)\n       .map(data => { this.results = data['results'] })\n       .catch((error:any) => {\n          return Observable.throw(error.json() || 'Couchbase Lite error');\n       })        .\n}\n// for updation of document your document must contain most recent rev(revision) id.\n// for each updation of document new rev id is get generated\n// successful response\n{ \"id\": \"string\",\"rev\": \"string(new revision id)\",\"ok\": true }\ndeleteDocument(database_name:string,document){\n     let url = this.getUrl();\n     url = url + database_name + '/' + document._id +'?rev='+doc._rev;\n     return this._http\n       .delete(url)\n       .map(data => { this.results = data['results'] })\n       .catch((error:any) => {\n          return Observable.throw(error.json() || 'Couchbase Lite error');\n       })        .\n}\n\n\n```\n",
     "platforms": [
       "Android",
@@ -1099,7 +1099,7 @@
   {
     "packageName": "@awesome-cordova-plugins/crop",
     "displayName": "Crop",
-    "description": "Crops images",
+    "description": "Crops images\n",
     "usage": "\n```typescript\nimport { Crop } from '@awesome-cordova-plugins/crop/ngx';\n\nconstructor(private crop: Crop) { }\n\n...\n\nthis.crop.crop('path/to/image.jpg', {quality: 75})\n  .then(\n    newImage => console.log('new image path is: ' + newImage),\n    error => console.error('Error cropping image', error)\n  );\n```",
     "platforms": [
       "Android",
@@ -1113,7 +1113,7 @@
   {
     "packageName": "@awesome-cordova-plugins/custom-uisdk",
     "displayName": "CustomUISDK",
-    "description": "\nThis plugin is used to access Paytm's native CustomUISDK framework's apis.\n",
+    "description": "This plugin is used to access Paytm's native CustomUISDK framework's apis.\n",
     "usage": "\n```typescript\nimport { CustomUISDK } from '@awesome-cordova-plugins/custom-uisdk/ngx';\n\nconstructor(private customuisdk: CustomUISDK) { }\n\n...\nthis.customuisdk.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n```\n",
     "platforms": [
       "Android, iOS"
@@ -1127,7 +1127,7 @@
   {
     "packageName": "@awesome-cordova-plugins/date-picker",
     "displayName": "Date Picker",
-    "description": "\nThe DatePicker plugin allows the user to fetch date or time using native dialogs.\n",
+    "description": "The DatePicker plugin allows the user to fetch date or time using native dialogs.\n",
     "usage": "\n```typescript\nimport { DatePicker } from '@awesome-cordova-plugins/date-picker/ngx';\n\nconstructor(private datePicker: DatePicker) { }\n\n\n...\n\n\nthis.datePicker.show({\n  date: new Date(),\n  mode: 'date',\n  androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK\n}).then(\n  date => console.log('Got date: ', date),\n  err => console.log('Error occurred while getting date: ', err)\n);\n```",
     "platforms": [
       "Android",
@@ -1142,7 +1142,7 @@
   {
     "packageName": "@awesome-cordova-plugins/db-meter",
     "displayName": "DB Meter",
-    "description": "This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.",
+    "description": "This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.\n",
     "usage": "\n```typescript\nimport { DBMeter } from '@awesome-cordova-plugins/db-meter/ngx';\n\nconstructor(private dbMeter: DBMeter) { }\n\n...\n\n\n// Start listening\nlet subscription = this.dbMeter.start().subscribe(\n  data => console.log(data)\n);\n\n// Check if we are listening\nthis.dbMeter.isListening().then(\n  isListening => console.log(isListening)\n);\n\n// Stop listening\nsubscription.unsubscribe();\n\n// Delete DBMeter instance from memory\nthis.dbMeter.delete().then(\n  () => console.log('Deleted DB Meter instance'),\n  error => console.log('Error occurred while deleting DB Meter instance')\n);\n```\n",
     "platforms": [
       "Android",
@@ -1178,7 +1178,7 @@
   {
     "packageName": "@awesome-cordova-plugins/device-accounts",
     "displayName": "Device Accounts",
-    "description": "\nGets the Google accounts associated with the Android device\n",
+    "description": "Gets the Google accounts associated with the Android device\n",
     "usage": "\n```typescript\nimport { DeviceAccounts } from '@awesome-cordova-plugins/device-accounts/ngx';\n\nconstructor(private deviceAccounts: DeviceAccounts) { }\n\n...\n\nthis.deviceAccounts.get()\n  .then(accounts => console.log(accounts))\n  .catch(error => console.error(error));\n\n```",
     "platforms": [
       "Android"
@@ -1191,7 +1191,7 @@
   {
     "packageName": "@awesome-cordova-plugins/device-feedback",
     "displayName": "Device Feedback",
-    "description": "\n\nPlugin that lets you provide haptic or acoustic feedback on Android devices.\n",
+    "description": "Plugin that lets you provide haptic or acoustic feedback on Android devices.\n",
     "usage": "\n```typescript\nimport { DeviceFeedback } from '@awesome-cordova-plugins/device-feedback/ngx';\n\nconstructor(private deviceFeedback: DeviceFeedback) { }\n\n...\n\n\nthis.deviceFeedback.acoustic();\n\nthis.deviceFeedback.haptic(0);\n\nthis.deviceFeedback.isFeedbackEnabled().then(feedback => {\n    console.log(feedback);\n    // {\n    //   acoustic: true,\n    //   haptic: true\n    // }\n  });\n\n```",
     "platforms": [
       "Android"
@@ -1205,7 +1205,7 @@
   {
     "packageName": "@awesome-cordova-plugins/device-motion",
     "displayName": "Device Motion",
-    "description": "\nRequires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).\n",
+    "description": "Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).\n",
     "usage": "\n```typescript\nimport { DeviceMotion, DeviceMotionAccelerationData } from '@awesome-cordova-plugins/device-motion/ngx';\n\nconstructor(private deviceMotion: DeviceMotion) { }\n\n...\n\n// Get the device current acceleration\nthis.deviceMotion.getCurrentAcceleration().then(\n  (acceleration: DeviceMotionAccelerationData) => console.log(acceleration),\n  (error: any) => console.log(error)\n);\n\n// Watch device acceleration\nvar subscription = this.deviceMotion.watchAcceleration().subscribe((acceleration: DeviceMotionAccelerationData) => {\n  console.log(acceleration);\n});\n\n// Stop watch\nsubscription.unsubscribe();\n\n```",
     "platforms": [
       "Android",
@@ -1226,7 +1226,7 @@
   {
     "packageName": "@awesome-cordova-plugins/device-orientation",
     "displayName": "Device Orientation",
-    "description": "\nRequires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).\n",
+    "description": "Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).\n",
     "usage": "\n```typescript\n// DeviceOrientationCompassHeading is an interface for compass\nimport { DeviceOrientation, DeviceOrientationCompassHeading } from '@awesome-cordova-plugins/device-orientation/ngx';\n\nconstructor(private deviceOrientation: DeviceOrientation) { }\n\n...\n\n// Get the device current compass heading\nthis.deviceOrientation.getCurrentHeading().then(\n  (data: DeviceOrientationCompassHeading) => console.log(data),\n  (error: any) => console.log(error)\n);\n\n// Watch the device compass heading change\nvar subscription = this.deviceOrientation.watchHeading().subscribe(\n  (data: DeviceOrientationCompassHeading) => console.log(data)\n);\n\n// Stop watching heading change\nsubscription.unsubscribe();\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -1248,7 +1248,7 @@
   {
     "packageName": "@awesome-cordova-plugins/device",
     "displayName": "Device",
-    "description": "\nAccess information about the underlying device and platform.\n",
+    "description": "Access information about the underlying device and platform.\n",
     "usage": "\n```typescript\nimport { Device } from '@awesome-cordova-plugins/device/ngx';\n\nconstructor(private device: Device) { }\n\n...\n\nconsole.log('Device UUID is: ' + this.device.uuid);\n```\n",
     "platforms": [
       "Android",
@@ -1266,7 +1266,7 @@
   {
     "packageName": "@awesome-cordova-plugins/dfu-update",
     "displayName": "Dfu Update",
-    "description": "\nThis plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.\n",
+    "description": "This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.\n",
     "usage": "\n```typescript\nimport { DfuUpdate } from '@awesome-cordova-plugins/dfu-update/ngx';\n\n\nconstructor(private dfuUpdate: DfuUpdate) { }\n\n...\n\n\nthis.dfuUpdate.updateFirmware('fileURL', 'deviceIdentifier')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1283,7 +1283,7 @@
   {
     "packageName": "@awesome-cordova-plugins/diagnostic",
     "displayName": "Diagnostic",
-    "description": "\nChecks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi\n",
+    "description": "Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi\n",
     "usage": "\n```typescript\nimport { Diagnostic } from '@awesome-cordova-plugins/diagnostic/ngx';\n\nconstructor(private diagnostic: Diagnostic) { }\n\n...\n\nlet successCallback = (isAvailable) => { console.log('Is available? ' + isAvailable); }\nlet errorCallback = (e) => console.error(e);\n\nthis.diagnostic.isCameraAvailable().then(successCallback).catch(errorCallback);\n\nthis.diagnostic.isBluetoothAvailable().then(successCallback, errorCallback);\n\n\nthis.diagnostic.getBluetoothState()\n  .then((state) => {\n    if (state == this.diagnostic.bluetoothState.POWERED_ON){\n      // do something\n    } else {\n      // do something else\n    }\n  }).catch(e => console.error(e));\n\n```\n\n",
     "platforms": [
       "Android",
@@ -1298,7 +1298,7 @@
   {
     "packageName": "@awesome-cordova-plugins/dialogs",
     "displayName": "Dialogs",
-    "description": "\nThis plugin gives you ability to access and customize the device native dialogs.\n\nRequires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).\n",
+    "description": "This plugin gives you ability to access and customize the device native dialogs.\n\nRequires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).\n",
     "usage": "\n```typescript\nimport { Dialogs } from '@awesome-cordova-plugins/dialogs/ngx';\n\nconstructor(private dialogs: Dialogs) { }\n\n...\n\nthis.dialogs.alert('Hello world')\n  .then(() => console.log('Dialog dismissed'))\n  .catch(e => console.log('Error displaying dialog', e));\n\n\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -1329,7 +1329,7 @@
   {
     "packageName": "@awesome-cordova-plugins/document-picker",
     "displayName": "iOS DocumentPicker",
-    "description": "\n\nOpens the file picker on iOS for the user to select a file, returns a file URI.\nAllows the user to upload files from iCloud\n",
+    "description": "Opens the file picker on iOS for the user to select a file, returns a file URI.\nAllows the user to upload files from iCloud\n",
     "usage": "\n```typescript\nimport { DocumentPicker } from '@awesome-cordova-plugins/document-picker/ngx';\n\nconstructor(private docPicker: DocumentPicker) { }\n\n...\n\nthis.docPicker.getFile('all')\n  .then(uri => console.log(uri))\n  .catch(e => console.log(e));\n\n```\n",
     "platforms": [
       "iOS"
@@ -1342,7 +1342,7 @@
   {
     "packageName": "@awesome-cordova-plugins/document-scanner",
     "displayName": "Document Scanner",
-    "description": "\nThis plugin processes images of documents, compensating for perspective.\n",
+    "description": "This plugin processes images of documents, compensating for perspective.\n",
     "usage": "\n```typescript\nimport { DocumentScanner, DocumentScannerOptions } from '@awesome-cordova-plugins/document-scanner';\n\n\nconstructor(private documentScanner: DocumentScanner) { }\n\n...\n\nlet opts: DocumentScannerOptions = {};\nthis.documentScanner.scanDocument(opts)\n  .then((res: string) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1356,7 +1356,7 @@
   {
     "packageName": "@awesome-cordova-plugins/document-viewer",
     "displayName": "Document Viewer",
-    "description": "\nThis plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.\n",
+    "description": "This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\\*) or in any other file system directory available via the cordova file plugin.\n",
     "usage": "\n```typescript\nimport { DocumentViewer } from '@awesome-cordova-plugins/document-viewer/ngx';\n\n\nconstructor(private document: DocumentViewer) { }\n\n...\nconst options: DocumentViewerOptions = {\n  title: 'My PDF'\n}\n\nthis.document.viewDocument('assets/myFile.pdf', 'application/pdf', options)\n\n```\n",
     "platforms": [
       "Android",
@@ -1371,7 +1371,7 @@
   {
     "packageName": "@awesome-cordova-plugins/downloader",
     "displayName": "Downloader",
-    "description": "\nThis plugin is designed to support downloading files using Android DownloadManager.\n\n",
+    "description": "This plugin is designed to support downloading files using Android DownloadManager.\n",
     "usage": "\n```typescript\nimport { Downloader } from '@awesome-cordova-plugins/downloader/ngx';\n\n\nconstructor(private downloader: Downloader) { }\n\n...\n\n   var request: DownloadRequest = {\n          uri: YOUR_URI,\n          title: 'MyDownload',\n          description: '',\n          mimeType: '',\n          visibleInDownloadsUi: true,\n          notificationVisibility: NotificationVisibility.VisibleNotifyCompleted,\n          destinationInExternalFilesDir: {\n              dirType: 'Downloads',\n              subPath: 'MyFile.apk'\n          }\n      };\n\n\n  this.downloader.download(request)\n  \t\t\t.then((location: string) => console.log('File downloaded at:'+location))\n  \t\t\t.catch((error: any) => console.error(error));\n\n```",
     "platforms": [
       "Android"
@@ -1384,7 +1384,7 @@
   {
     "packageName": "@awesome-cordova-plugins/email-composer",
     "displayName": "Email Composer",
-    "description": "\n\nRequires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).\n\n",
+    "description": "Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).\n",
     "usage": "\n```typescript\nimport { EmailComposer } from '@awesome-cordova-plugins/email-composer/ngx';\n\nconstructor(private emailComposer: EmailComposer) { }\n\n...\n\n\nthis.emailComposer.getClients().then((apps: []) => {\n   // Returns an array of configured email clients for the device\n});\n\nthis.emailComposer.hasClient().then(app, (isValid: boolean) => {\n if (isValid) {\n   // Now we know we have a valid email client configured\n   // Not specifying an app will return true if at least one email client is configured\n }\n});\n\nthis.emailComposer.hasAccount().then((isValid: boolean) => {\n if (isValid) {\n   // Now we know we have a valid email account configured\n }\n});\n\nthis.emailComposer.isAvailable().then(app, (available: boolean) => {\n if(available) {\n   // Now we know we can send an email, calls hasClient and hasAccount\n   // Not specifying an app will return true if at least one email client is configured\n }\n});\n\nlet email = {\n  to: 'max@mustermann.de',\n  cc: 'erika@mustermann.de',\n  bcc: ['john@doe.com', 'jane@doe.com'],\n  attachments: [\n    'file://img/logo.png',\n    'res://icon.png',\n    'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',\n    'file://README.pdf'\n  ],\n  subject: 'Cordova Icons',\n  body: 'How are you? Nice greetings from Leipzig',\n  isHtml: true\n}\n\n// Send a text message using default options\nthis.emailComposer.open(email);\n```\n\nYou can also assign aliases to email apps\n```ts\n// add alias\nthis.email.addAlias('gmail', 'com.google.android.gm');\n\n// then use alias when sending email\nthis.email.open({\n  app: 'gmail',\n  ...\n});\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -1403,7 +1403,7 @@
   {
     "packageName": "@awesome-cordova-plugins/emm-app-config",
     "displayName": "Emm App Config",
-    "description": "\nThis plugin provides information on EMM application configuration\n\nRequires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).\n\n",
+    "description": "This plugin provides information on EMM application configuration\n\nRequires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).\n",
     "usage": "\n```typescript\nimport { EmmAppConfig } from '@awesome-cordova-plugins/emm-app-config/ngx';\n\n\nconstructor(private readonly emmAppConfig: EmmAppConfig) { }\n\n...\n\n// Get all the values of the emm app configuration\nconst values = this.emmAppConfig.getValue();\n\n// Get specific value of the emm app configuration\nconst value = this.emmAppConfig.getValue('serverUrl');\n\n// Get an event every time the emm app config changes\nthis.emmAppConfig.registerChangedListener()\n  .subscribe(() => console.log('App config changes'));\n\n```\n",
     "platforms": [
       "Android",
@@ -1417,7 +1417,7 @@
   {
     "packageName": "@awesome-cordova-plugins/estimote-beacons",
     "displayName": "Estimote Beacons\n",
-    "description": "\nThis plugin enables communication between a phone and Estimote Beacons peripherals.\n",
+    "description": "This plugin enables communication between a phone and Estimote Beacons peripherals.\n",
     "usage": "\n```typescript\nimport { EstimoteBeacons } from '@awesome-cordova-plugins/estimote-beacons/ngx';\n\nconstructor(private eb: EstimoteBeacons) { }\n\n...\n\nthis.eb.requestAlwaysAuthorization();\n\nthis.eb.enableAnalytics(true);\n\n```\n",
     "platforms": [
       "Android",
@@ -1431,7 +1431,7 @@
   {
     "packageName": "@awesome-cordova-plugins/extended-device-information",
     "displayName": "Extended Device Information",
-    "description": "\nRetrieves additional device information from the Device Hardware\n - memory\n - cpumhz\n - totalstorage\n - freestorage\n",
+    "description": "Retrieves additional device information from the Device Hardware\n\n- memory\n- cpumhz\n- totalstorage\n- freestorage\n",
     "usage": "\n```typescript\nimport { ExtendedDeviceInformation } from '@awesome-cordova-plugins/extended-device-information/ngx';\n\n\nconstructor(private extendedDeviceInformation: ExtendedDeviceInformation) { }\n\n...\n\nconsole.log('The Memory is: ' + this.extendedDeviceInformation.memory);\n```\n",
     "platforms": [
       "Android"
@@ -1444,7 +1444,7 @@
   {
     "packageName": "@awesome-cordova-plugins/fabric",
     "displayName": "Answers",
-    "description": "\nAPI for interacting with the Answers kit.\n\nhttps://docs.fabric.io/crashlytics/index.html\n",
+    "description": "API for interacting with the Answers kit.\n\nhttps://docs.fabric.io/crashlytics/index.html\n",
     "usage": "\n```typescript\nimport { Answers } from '@awesome-cordova-plugins/fabric/ngx';\n\n\nconstructor(private answers: Answers) { }\n\n...\n\nthis.answers.sendCustomEvent('SomeCustomEvent', { some: \"attributes\" })\n\n```\n",
     "platforms": [
       "Android",
@@ -1462,7 +1462,7 @@
   {
     "packageName": "@awesome-cordova-plugins/facebook",
     "displayName": "Facebook",
-    "description": "\nUse the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.\n\nRequires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).\n\n#### Installation\n\n To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).\n\n[![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)\n\nRetrieve the `App ID` and `App Name`.\n\n[![fb-getstarted-2](/img/docs/native/Facebook/2.png)](https://developers.facebook.com/apps/)\n\nThen type in the following command in your Terminal, where APP_ID and APP_NAME are the values from the Facebook Developer portal.\n\n```bash\n ionic cordova plugin add cordova-plugin-facebook-connect --variable APP_ID=\"123456789\" --variable APP_NAME=\"myApplication\"\n```\n\nAfter, you'll need to add the native platforms you'll be using to your app in the Facebook Developer portal under your app's Settings:\n\n[![fb-getstarted-3](/img/docs/native/Facebook/3.png)](https://developers.facebook.com/apps/)\n\nClick `'Add Platform'`.\n\n[![fb-getstarted-4](/img/docs/native/Facebook/4.png)](https://developers.facebook.com/apps/)\n\nAt this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.\n\nTake note of the `id` for the next step:\n```\n<widget id=\"com.mycompany.testapp\" version=\"0.0.1\" xmlns=\"http://www.w3.org/ns/widgets\" xmlns:cdv=\"http://cordova.apache.org/ns/1.0\">\n```\n\nYou can also edit the `id` to whatever you'd like it to be.\n\n#### iOS Install\nUnder 'Bundle ID', add the `id` from your `config.xml` file:\n\n[![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)\n\n\n#### Android Install\nUnder 'Google Play Package Name', add the `id` from your `config.xml` file:\n\n[![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)\n\n\nAnd that's it! You can now make calls to Facebook using the plugin.\n\n## Events\n\nApp events allow you to understand the makeup of users engaging with your app, measure the performance of your Facebook mobile app ads, and reach specific sets of your users with Facebook mobile app ads.\n\n- [iOS] [https://developers.facebook.com/docs/ios/app-events](https://developers.facebook.com/docs/ios/app-events)\n- [Android] [https://developers.facebook.com/docs/android/app-events](https://developers.facebook.com/docs/android/app-events)\n- [JS] Does not have an Events API, so the plugin functions are empty and will return an automatic success\n\nActivation events are automatically tracked for you in the plugin.\n\nEvents are listed on the [insights page](https://www.facebook.com/insights/).\n\nFor tracking events, see `logEvent` and `logPurchase`.\n",
+    "description": "Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.\n\nRequires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).\n\n#### Installation\n\nTo use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).\n\n[![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)\n\nRetrieve the `App ID` and `App Name`.\n\n[![fb-getstarted-2](/img/docs/native/Facebook/2.png)](https://developers.facebook.com/apps/)\n\nThen type in the following command in your Terminal, where APP_ID and APP_NAME are the values from the Facebook Developer portal.\n\n```bash\n ionic cordova plugin add cordova-plugin-facebook-connect --variable APP_ID=\"123456789\" --variable APP_NAME=\"myApplication\"\n```\n\nAfter, you'll need to add the native platforms you'll be using to your app in the Facebook Developer portal under your app's Settings:\n\n[![fb-getstarted-3](/img/docs/native/Facebook/3.png)](https://developers.facebook.com/apps/)\n\nClick `'Add Platform'`.\n\n[![fb-getstarted-4](/img/docs/native/Facebook/4.png)](https://developers.facebook.com/apps/)\n\nAt this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.\n\nTake note of the `id` for the next step:\n\n```\n<widget id=\"com.mycompany.testapp\" version=\"0.0.1\" xmlns=\"http://www.w3.org/ns/widgets\" xmlns:cdv=\"http://cordova.apache.org/ns/1.0\">\n```\n\nYou can also edit the `id` to whatever you'd like it to be.\n\n#### iOS Install\n\nUnder 'Bundle ID', add the `id` from your `config.xml` file:\n\n[![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)\n\n#### Android Install\n\nUnder 'Google Play Package Name', add the `id` from your `config.xml` file:\n\n[![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)\n\nAnd that's it! You can now make calls to Facebook using the plugin.\n\n## Events\n\nApp events allow you to understand the makeup of users engaging with your app, measure the performance of your Facebook mobile app ads, and reach specific sets of your users with Facebook mobile app ads.\n\n- [iOS] [https://developers.facebook.com/docs/ios/app-events](https://developers.facebook.com/docs/ios/app-events)\n- [Android] [https://developers.facebook.com/docs/android/app-events](https://developers.facebook.com/docs/android/app-events)\n- [JS] Does not have an Events API, so the plugin functions are empty and will return an automatic success\n\nActivation events are automatically tracked for you in the plugin.\n\nEvents are listed on the [insights page](https://www.facebook.com/insights/).\n\nFor tracking events, see `logEvent` and `logPurchase`.\n",
     "usage": "\n```typescript\nimport { Facebook, FacebookLoginResponse } from '@awesome-cordova-plugins/facebook/ngx';\n\nconstructor(private fb: Facebook) { }\n\n...\n\nthis.fb.login(['public_profile', 'user_friends', 'email'])\n  .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))\n  .catch(e => console.log('Error logging into Facebook', e));\n\n\nthis.fb.logEvent(this.fb.EVENTS.EVENT_NAME_ADDED_TO_CART);\n\n```\n\n",
     "platforms": [
       "Android",
@@ -1481,7 +1481,7 @@
   {
     "packageName": "@awesome-cordova-plugins/fcm",
     "displayName": "FCM",
-    "description": "\nProvides basic functionality for Firebase Cloud Messaging\n",
+    "description": "Provides basic functionality for Firebase Cloud Messaging\n",
     "usage": "\n```typescript\nimport { FCM } from '@awesome-cordova-plugins/fcm/ngx';\n\nconstructor(private fcm: FCM) {}\n\n...\n\nthis.fcm.subscribeToTopic('marketing');\n\nthis.fcm.getToken().then(token => {\n  backend.registerToken(token);\n});\n\nthis.fcm.onNotification().subscribe(data => {\n  if(data.wasTapped){\n    console.log(\"Received in background\");\n  } else {\n    console.log(\"Received in foreground\");\n  };\n});\n\nthis.fcm.onTokenRefresh().subscribe(token => {\n  backend.registerToken(token);\n});\n\nthis.fcm.hasPermission().then(hasPermission => {\n  if (hasPermission) {\n    console.log(\"Has permission!\");\n  }\n})\n\nthis.fcm.clearAllNotifications();\n\nthis.fcm.unsubscribeFromTopic('marketing');\n\n```",
     "platforms": [
       "Android",
@@ -1496,7 +1496,7 @@
   {
     "packageName": "@awesome-cordova-plugins/file-chooser",
     "displayName": "File Chooser",
-    "description": "\n\nOpens the file picker on Android for the user to select a file, returns a file URI.\n",
+    "description": "Opens the file picker on Android for the user to select a file, returns a file URI.\n",
     "usage": "\n```typescript\nimport { FileChooser } from '@awesome-cordova-plugins/file-chooser/ngx';\n\nconstructor(private fileChooser: FileChooser) { }\n\n...\n\nthis.fileChooser.open()\n  .then(uri => console.log(uri))\n  .catch(e => console.log(e));\n\n```",
     "platforms": [
       "Android"
@@ -1509,7 +1509,7 @@
   {
     "packageName": "@awesome-cordova-plugins/file-encryption",
     "displayName": "File Encryption",
-    "description": "\nSimple file encryption for Cordova.\n",
+    "description": "Simple file encryption for Cordova.\n",
     "usage": "\n```typescript\nimport { FileEncryption } from '@awesome-cordova-plugins/file-encryption/ngx';\n\n\nconstructor(private fileEncryption: FileEncryption) { }\n\n...\n\nthis.fileEncryption.decrypt('assets/json/topSecret.json', 'secretKey');\n\nthis.fileEncryption.encrypt('assets/json/topSecret.json', 'secretKey');\n\n```\n",
     "platforms": [
       "Android",
@@ -1523,7 +1523,7 @@
   {
     "packageName": "@awesome-cordova-plugins/file-opener",
     "displayName": "File Opener",
-    "description": "\nThis plugin will open a file on your device file system with its default application.\n",
+    "description": "This plugin will open a file on your device file system with its default application.\n",
     "usage": "\n```typescript\nimport { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';\n\nconstructor(private fileOpener: FileOpener) { }\n\n...\n\nthis.fileOpener.open('path/to/file.pdf', 'application/pdf')\n  .then(() => console.log('File is opened'))\n  .catch(e => console.log('Error opening file', e));\n\nthis.fileOpener.showOpenWithDialog('path/to/file.pdf', 'application/pdf')\n  .then(() => console.log('File is opened'))\n  .catch(e => console.log('Error opening file', e));\n\n```\n",
     "platforms": [
       "Android",
@@ -1539,7 +1539,7 @@
   {
     "packageName": "@awesome-cordova-plugins/file-path",
     "displayName": "File Path",
-    "description": "\n\nThis plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.\n",
+    "description": "This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.\n",
     "usage": "\n```typescript\nimport { FilePath } from '@awesome-cordova-plugins/file-path/ngx';\n\nconstructor(private filePath: FilePath) { }\n\n...\n\nthis.filePath.resolveNativePath(path)\n  .then(filePath => console.log(filePath))\n  .catch(err => console.log(err));\n\n```\n",
     "platforms": [
       "Android"
@@ -1553,7 +1553,7 @@
   {
     "packageName": "@awesome-cordova-plugins/file-picker",
     "displayName": "iOS File Picker",
-    "description": "\n\nOpens the file picker on iOS for the user to select a file, returns a file URI.\n",
+    "description": "Opens the file picker on iOS for the user to select a file, returns a file URI.\n",
     "usage": "\n```typescript\nimport { IOSFilePicker } from '@awesome-cordova-plugins/file-picker/ngx';\n\nconstructor(private filePicker: IOSFilePicker) { }\n\n...\n\nthis.filePicker.pickFile()\n  .then(uri => console.log(uri))\n  .catch(err => console.log('Error', err));\n\n```",
     "platforms": [
       "iOS"
@@ -1566,7 +1566,7 @@
   {
     "packageName": "@awesome-cordova-plugins/file-transfer",
     "displayName": "File Transfer\n",
-    "description": "\nThis plugin allows you to upload and download files.\n",
+    "description": "This plugin allows you to upload and download files.\n",
     "usage": "\n```typescript\nimport { FileTransfer, FileUploadOptions, FileTransferObject } from '@awesome-cordova-plugins/file-transfer/ngx';\nimport { File } from '@awesome-cordova-plugins/file';\n\nconstructor(private transfer: FileTransfer, private file: File) { }\n\n...\n\nconst fileTransfer: FileTransferObject = this.transfer.create();\n\n// Upload a file:\nfileTransfer.upload(..).then(..).catch(..);\n\n// Download a file:\nfileTransfer.download(..).then(..).catch(..);\n\n// Abort active transfer:\nfileTransfer.abort();\n\n// full example\nupload() {\n  let options: FileUploadOptions = {\n     fileKey: 'file',\n     fileName: 'name.jpg',\n     headers: {}\n     .....\n  }\n\n  fileTransfer.upload('<file path>', '<api endpoint>', options)\n   .then((data) => {\n     // success\n   }, (err) => {\n     // error\n   })\n}\n\ndownload() {\n  const url = 'http://www.example.com/file.pdf';\n  fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {\n    console.log('download complete: ' + entry.toURL());\n  }, (error) => {\n    // handle error\n  });\n}\n\n```\n\nTo store files in a different/publicly accessible directory, please refer to the following link\nhttps://github.com/apache/cordova-plugin-file#where-to-store-files\n",
     "platforms": [
       "Amazon Fire OS",
@@ -1585,7 +1585,7 @@
   {
     "packageName": "@awesome-cordova-plugins/file",
     "displayName": "File",
-    "description": "\nThis plugin implements a File API allowing read/write access to files residing on the device.\n\nThe File class implements static convenience functions to access files and directories.\n\nExample:\n```\nimport { File } from '@awesome-cordova-plugins/file/ngx';\n\nconstructor(private file: File) { }\n\n...\n\nthis.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Directory exists')).catch(err =>\n  console.log('Directory doesn't exist'));\n\n```\n\n This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/\n The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/\n Although most of the plugin code was written when an earlier spec was current: http:\n  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:\n  //dev.w3.org/2009/dap/file-system/file-writer.html",
+    "description": "This plugin implements a File API allowing read/write access to files residing on the device.\n\nThe File class implements static convenience functions to access files and directories.\n\nExample:\n\n```\nimport { File } from '@awesome-cordova-plugins/file/ngx';\n\nconstructor(private file: File) { }\n\n...\n\nthis.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Directory exists')).catch(err =>\n  console.log('Directory doesn't exist'));\n\n```\n\nThis plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/\nThe (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/\nAlthough most of the plugin code was written when an earlier spec was current: http:\n//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:\n//dev.w3.org/2009/dap/file-system/file-writer.html\n",
     "platforms": [
       "Android",
       "Browser",
@@ -1602,7 +1602,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-analytics",
     "displayName": "Firebase Analytics",
-    "description": "\nCordova plugin for Firebase Analytics\n\nGo to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.\n\nNOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.\n\n## Using capacitor?\nFor Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`\n```\n<meta-data\n     tools:replace=\"android:value\"\n     android:name=\"firebase_analytics_collection_enabled\"\n     android:value=\"true\"/>\n\n<meta-data\n     tools:replace=\"android:value\"\n     android:name=\"google_analytics_automatic_screen_reporting_enabled\"\n     android:value=\"false\"/>\n```\n\nAnd in the same file, you'll have to add `xmlns:tools=\"http://schemas.android.com/tools\"` to your _manifest_ tag.\n",
+    "description": "Cordova plugin for Firebase Analytics\n\nGo to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.\n\nNOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.\n\n## Using capacitor?\n\nFor Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`\n\n```\n<meta-data\n     tools:replace=\"android:value\"\n     android:name=\"firebase_analytics_collection_enabled\"\n     android:value=\"true\"/>\n\n<meta-data\n     tools:replace=\"android:value\"\n     android:name=\"google_analytics_automatic_screen_reporting_enabled\"\n     android:value=\"false\"/>\n```\n\nAnd in the same file, you'll have to add `xmlns:tools=\"http://schemas.android.com/tools\"` to your _manifest_ tag.\n",
     "usage": "\n```typescript\nimport { FirebaseAnalytics } from '@awesome-cordova-plugins/firebase-analytics/ngx';\n\n\nconstructor(private firebaseAnalytics: FirebaseAnalytics) { }\n\n...\n\nthis.firebaseAnalytics.logEvent('page_view', {page: \"dashboard\"})\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1616,7 +1616,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-authentication",
     "displayName": "Firebase Authentication",
-    "description": "\nCordova plugin for Firebase Authentication\n",
+    "description": "Cordova plugin for Firebase Authentication\n",
     "usage": "\n```typescript\nimport { FirebaseAuthentication } from '@awesome-cordova-plugins/firebase-authentication/ngx';\n\n\nconstructor(private firebaseAuthentication: FirebaseAuthentication) { }\n\n...\n\n\nthis.firebaseAuthentication.createUserWithEmailAndPassword('test@gmail.com', '123')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1633,7 +1633,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-config",
     "displayName": "Firebase Config",
-    "description": "\nCordova plugin for Firebase Config\n",
+    "description": "Cordova plugin for Firebase Config\n",
     "usage": "\n```typescript\nimport { FirebaseConfig } from '@awesome-cordova-plugins/firebase-config/ngx';\n\n\nconstructor(private firebaseConfig: FirebaseConfig) { }\n\n...\n\n\nthis.firebaseConfig.getBoolean('my_key')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1647,7 +1647,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-crash",
     "displayName": "FirebaseCrash",
-    "description": "\nThis plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.\n",
+    "description": "This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.\n",
     "usage": "\n```typescript\nimport { FirebaseCrash } from '@awesome-cordova-plugins/firebase-crash';\n\nconstructor(private firebaseCrash: FirebaseCrash) { }\n\n...\n\nthis.firebaseCrash.setUserId('123456789');\nthis.firebaseCrash.log('message');\nthis.firebaseCrash.logError('non fatal exception');\n\n```\n",
     "platforms": [
       "Android",
@@ -1661,7 +1661,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-crashlytics",
     "displayName": "Firebase Crashlytics",
-    "description": "\nA Google Firebase Crashlytics plugin to enable capture of crash reports.\n",
+    "description": "A Google Firebase Crashlytics plugin to enable capture of crash reports.\n",
     "usage": "\n```typescript\nimport { FirebaseCrashlytics } from '@awesome-cordova-plugins/firebase-crashlytics/ngx';\n\n\nconstructor(private firebaseCrashlytics: FirebaseCrashlytics) { }\n\n...\n\n\nconst crashlytics = this.firebaseCrashlytics.initialise();\ncrashlytics.logException('my caught exception');\n\n```\n",
     "platforms": [
       "Android",
@@ -1678,7 +1678,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-dynamic-links",
     "displayName": "Firebase Dynamic Links",
-    "description": "\nCordova plugin for Firebase Dynamic Links\n\nVariables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.\nGo to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.\n\nPreferences:\n\nPreferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynamic links when you have an app for several platforms.\nYou can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).\n\nconfig.xml:\n```xml\n<platform name=\"ios\">\n    <preference name=\"GoogleIOSClientId\" value=\"...\" />\n</platform>\n<platform name=\"android\">\n    <preference name=\"GoogleAndroidClientId\" value=\"...\" />\n</platform>\n```",
+    "description": "Cordova plugin for Firebase Dynamic Links\n\nVariables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.\nGo to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.\n\nPreferences:\n\nPreferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynamic links when you have an app for several platforms.\nYou can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).\n\nconfig.xml:\n\n```xml\n<platform name=\"ios\">\n    <preference name=\"GoogleIOSClientId\" value=\"...\" />\n</platform>\n<platform name=\"android\">\n    <preference name=\"GoogleAndroidClientId\" value=\"...\" />\n</platform>\n```\n",
     "usage": "\n```typescript\nimport { FirebaseDynamicLinks } from '@awesome-cordova-plugins/firebase-dynamic-links/ngx';\n\n\nconstructor(private firebaseDynamicLinks: FirebaseDynamicLinks) { }\n\n...\n// Handle the logic here after opening the app with the Dynamic link\nthis.firebaseDynamicLinks.onDynamicLink()\n  .subscribe((res: any) => console.log(res), (error:any) => console.log(error));\n```\n",
     "platforms": [
       "Android",
@@ -1696,7 +1696,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-messaging",
     "displayName": "Firebase Messaging",
-    "description": "\nCordova plugin for Firebase Messaging\n",
+    "description": "Cordova plugin for Firebase Messaging\n",
     "usage": "\n```typescript\nimport { FirebaseMessaging } from '@awesome-cordova-plugins/firebase-messaging/ngx';\n\n\nconstructor(private firebaseMessaging: FirebaseMessaging) { }\n\n...\n\n\nthis.firebaseMessaging.logEvent('page_view', {page: \"dashboard\"})\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```",
     "platforms": [
       "Android",
@@ -1710,7 +1710,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-vision",
     "displayName": "Firebase Vision",
-    "description": "\nCordova plugin for Firebase MLKit Vision\n",
+    "description": "Cordova plugin for Firebase MLKit Vision\n",
     "usage": "\n```typescript\nimport { FirebaseVision } from '@awesome-cordova-plugins/firebase-vision/ngx';\n\n\nconstructor(private firebaseVision: FirebaseVision) { }\n\n...\n\n\nthis.firebaseVision.onDeviceTextRecognizer(FILE_URI)\n  .then((res: string) => console.log(res))\n  .catch((error: string) => console.error(error));\n\nthis.firebaseVision.barcodeDetector(FILE_URI)\n  .then((res: Barcode[]) => console.log(res))\n  .catch((error: string) => console.error(error));\n\nthis.firebaseVision.imageLabeler(FILE_URI)\n  .then((res: ImageLabel[]) => console.log(res))\n  .catch((error: string) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1724,7 +1724,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase-x",
     "displayName": "Firebase X",
-    "description": "\nThis plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.\nIt is a maintained fork from unmaintained ionic-navite plugin called Firebase.\n",
+    "description": "This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.\nIt is a maintained fork from unmaintained ionic-navite plugin called Firebase.\n",
     "usage": "\n```typescript\nimport { FirebaseX } from '@awesome-cordova-plugins/firebase-x/ngx';\n\n\nconstructor(private firebaseX: FirebaseX) { }\n\n...\n\n\nthis.firebaseX.getToken()\n  .then(token => console.log(`The token is ${token}`)) // save the token server-side and use it to push notifications to this device\n  .catch(error => console.error('Error getting token', error));\n\nthis.firebaseX.onMessageReceived()\n  .subscribe(data => console.log(`User opened a notification ${data}`));\n\nthis.firebaseX.onTokenRefresh()\n  .subscribe((token: string) => console.log(`Got a new token ${token}`));\n```",
     "platforms": [
       "Android",
@@ -1738,7 +1738,7 @@
   {
     "packageName": "@awesome-cordova-plugins/firebase",
     "displayName": "Firebase",
-    "description": "\nThis plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).\n",
+    "description": "This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).\n",
     "usage": "\n```typescript\nimport { Firebase } from '@awesome-cordova-plugins/firebase/ngx';\n\nconstructor(private firebase: Firebase) { }\n\n...\n\nthis.firebase.getToken()\n  .then(token => console.log(`The token is ${token}`)) // save the token server-side and use it to push notifications to this device\n  .catch(error => console.error('Error getting token', error));\n\nthis.firebase.onNotificationOpen()\n   .subscribe(data => console.log(`User opened a notification ${data}`));\n\nthis.firebase.onTokenRefresh()\n  .subscribe((token: string) => console.log(`Got a new token ${token}`));\n\n```\n",
     "platforms": [
       "Android",
@@ -1768,7 +1768,7 @@
   {
     "packageName": "@awesome-cordova-plugins/flurry-analytics",
     "displayName": "Flurry Analytics",
-    "description": "\nThis plugin connects to Flurry Analytics SDK\n",
+    "description": "This plugin connects to Flurry Analytics SDK\n",
     "usage": "\n```typescript\nimport { FlurryAnalytics, FlurryAnalyticsObject, FlurryAnalyticsOptions } from '@awesome-cordova-plugins/flurry-analytics/ngx';\n\nconstructor(private flurryAnalytics: FlurryAnalytics) { }\n\n...\n\nconst options: FlurryAnalyticsOptions = {\n appKey: '<your app key>', // REQUIRED\n reportSessionsOnClose: true,\n enableLogging: true\n}\n\nlet fa: FlurryAnalyticsObject = this.flurryAnalytics.create(options);\n\nfa.logEvent('event name')\n  .then(() => console.log('Logged an event!'))\n  .catch(e => console.log('Error logging the event', e));\n\n```",
     "platforms": [
       "Android",
@@ -1782,7 +1782,7 @@
   {
     "packageName": "@awesome-cordova-plugins/foreground-service",
     "displayName": "Foreground Service",
-    "description": "\nThis plugin allows for android devices to continue running services in the background, using a\nforeground ongoing notification. This is targeted towards use with plugins such as\n'cordova-geolocation' that will not run while the app is in the background on android API 26+.\n\nFor android API 28+, the following xml snippet should be inserted into ```config.xml```:\n\n```\n...\n<platform name=\"android\">\n  <config-file parent=\"/*\" target=\"AndroidManifest.xml\">\n    <uses-permission android:name=\"android.permission.FOREGROUND_SERVICE\" />\n  </config-file>\n  ...\n```",
+    "description": "This plugin allows for android devices to continue running services in the background, using a\nforeground ongoing notification. This is targeted towards use with plugins such as\n'cordova-geolocation' that will not run while the app is in the background on android API 26+.\n\nFor android API 28+, the following xml snippet should be inserted into `config.xml`:\n\n```\n...\n<platform name=\"android\">\n  <config-file parent=\"/*\" target=\"AndroidManifest.xml\">\n    <uses-permission android:name=\"android.permission.FOREGROUND_SERVICE\" />\n  </config-file>\n  ...\n```\n",
     "usage": "\n```typescript\nimport { ForegroundService } from '@awesome-cordova-plugins/foreground-service/ngx';\n\n\nconstructor(public foregroundService: ForegroundService) { }\n\n...\n\nstartService() {\n // Notification importance is optional, the default is 1 - Low (no sound or vibration)\n this.foregroundService.start('GPS Running', 'Background Service', 'drawable/fsicon');\n}\n\nstopService() {\n // Disable the foreground service\n this.foregroundService.stop();\n}\n\n```\n",
     "platforms": [
       "Android"
@@ -1795,7 +1795,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ftp",
     "displayName": "FTP",
-    "description": "\nThis cordova plugin is created to use ftp (client) in web/js.\n",
+    "description": "This cordova plugin is created to use ftp (client) in web/js.\n",
     "usage": "\n```typescript\nimport { FTP } from '@awesome-cordova-plugins/ftp/ngx';\n\n\nconstructor(private fTP: FTP) { }\n\n...\n\n\nthis.fTP.connect('ftp_host', 'ftp_user', 'ftp_password')\n  .then((res: any) => console.log('Login successful', res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1809,7 +1809,7 @@
   {
     "packageName": "@awesome-cordova-plugins/full-screen-image",
     "displayName": "Full Screen Image",
-    "description": "\nThis plugin does something\n",
+    "description": "This plugin does something\n",
     "usage": "\n```typescript\nimport { FullScreenImage } from '@awesome-cordova-plugins/full-screen-image';\n\n\nconstructor(private fullScreenImage: FullScreenImage) { }\n\n...\n\nthis.fullScreenImage.showImageURL('/assets/...')\n  .then((data: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n...\n\nthis.fullScreenImage.showImageBase64('iVBORw0KGgoAAAANSUhEUgAAA...')\n  .then((data: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1823,7 +1823,7 @@
   {
     "packageName": "@awesome-cordova-plugins/gao-de-location",
     "displayName": "Gao De Location",
-    "description": "\nBecause the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.\nGaode location can directly return address informationGaode location can directly return address information\n",
+    "description": "Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.\nGaode location can directly return address informationGaode location can directly return address information\n",
     "usage": "\n```typescript\nimport { GaoDeLocation } from '@awesome-cordova-plugins/gao-de-location/ngx';\n\n\nconstructor(private gaoDeLocation: GaoDeLocation) { }\n\n\nconst positionOptions: PositionOptions = {\n    androidOption: {\n     locationMode: LocationModeEnum.Hight_Accuracy,\n     gpsFirst: false,\n      HttpTimeOut: 30000,\n      interval: 2000,\n      needAddress: true,\n      onceLocation: false,\n      onceLocationLatest: false,\n      locationProtocol: LocationProtocolEnum.HTTP,\n      sensorEnable: false,\n      wifiScan: true,\n      locationCacheEnable: true\n    }, iosOption: {\n      desiredAccuracy: DesiredAccuracyEnum.kCLLocationAccuracyBest,\n      pausesLocationUpdatesAutomatically: 'YES',\n      allowsBackgroundLocationUpdates: 'NO',\n      locationTimeout: 10,\n      reGeocodeTimeout: 5,\n    }\n  };\nconst positionRes: PositionRes = await this.gaoDeLocation.getCurrentPosition(positionOptions).catch((e: any) => {\n    console.log(e);\n  }) || null;\nconsole.log(JSON.stringify(positionRes));\n\n\nthis.gaoDeLocation.startSerialLocation(positionOptions).subscribe((positionRes: PositionRes) => {\n   console.log(JSON.stringify(positionRes));\n});\n\nconst positionRes: any = this.gaoDeLocation.stopSerialLocation().catch((e) => {\n    console.log(e);\n  }) || null;\nconsole.log(JSON.stringify(positionRes));\n\n```\n",
     "platforms": [
       "Android",
@@ -1841,7 +1841,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ge-tui-sdk-plugin",
     "displayName": "Ge Tui Sdk Plugin",
-    "description": "\nThis plugin does something\n",
+    "description": "This plugin does something\n",
     "usage": "\n```typescript\nimport { GeTuiSdkPlugin } from '@awesome-cordova-plugins/ge-tui-sdk-plugin';\n\n\nconstructor(private geTuiSdkPlugin: GeTuiSdkPlugin) { }\n\n this.geTuiSdkPlugin.callback_init((res) => { console.log(res)});\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n this.geTuiSdkPlugin.initialize();\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n this.geTuiSdkPlugin.getClientId();\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n this.geTuiSdkPlugin.getVersion();\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -1860,7 +1860,7 @@
   {
     "packageName": "@awesome-cordova-plugins/geofence",
     "displayName": "Geofence",
-    "description": "Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.\nGeofences persist after device reboot. Geofences will be monitored even when the app is not running.",
+    "description": "Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.\nGeofences persist after device reboot. Geofences will be monitored even when the app is not running.\n",
     "usage": "\n```typescript\nimport { Geofence } from '@awesome-cordova-plugins/geofence/ngx';\n\n...\n\nconstructor(private geofence: Geofence) {\n  // initialize the plugin\n  geofence.initialize().then(\n    // resolved promise does not return a value\n    () => console.log('Geofence Plugin Ready'),\n    (err) => console.log(err)\n  )\n}\n\n...\n\nprivate addGeofence() {\n  //options describing geofence\n  let fence = {\n    id: '69ca1b88-6fbe-4e80-a4d4-ff4d3748acdb', //any unique ID\n    latitude:       37.285951, //center of geofence radius\n    longitude:      -121.936650,\n    radius:         100, //radius to edge of geofence in meters\n    transitionType: 3, //see 'Transition Types' below\n    notification: { //notification settings\n        id:             1, //any unique ID\n        title:          'You crossed a fence', //notification title\n        text:           'You just arrived to Gliwice city center.', //notification body\n        openAppOnClick: true //open app when notification is tapped\n    }\n  }\n\n  this.geofence.addOrUpdate(fence).then(\n     () => console.log('Geofence added'),\n     (err) => console.log('Geofence failed to add')\n   );\n}\n\n```\n### Transition Types ###\nTransition type specifies whether the geofence should trigger when the user enters and/or leaves the geofence.\n\n#### Supported values ####\n- 1: Enter\n- 2: Leave\n- 3: Both\n\n### Defining a Geofence ###\nGeofences are defined by an object that is passed to `addOrUpdate()`. Object properties are:\n- id: Any unique ID for the geofence. This ID is used to remove and update a geofence\n- latitude: Latitude coordinate of the center of the geofence radius\n- longitude: Latitude coordinate of the center of the geofence radius\n- radius: Radius from the center to the edge of the geofence\n- transitionType: Type of geofence transition to monitor for. See 'Transition Types' above\n- notification: Object. Options for defining the notification sent when a geofence is crossed\n  - id: Any unique ID\n  - title: Notification title\n  - text: Notification body\n  - openAppOnClick: Boolean. Whether to open the app when the notification is tapped by the user\n\n### Troubleshooting ###\n#### I get compile errors when I run `ionic build ios` or `ionic run ios`. ####\nThis could be caused by the Cordova project directory in `/platforms/ios` not being named correctly.\nTry running `ionic cordova platform rm <platform>` then run `ionic cordova platform add <platform>` to recreate the\nplatform directories.\n",
     "platforms": [
       "Android",
@@ -1876,7 +1876,7 @@
   {
     "packageName": "@awesome-cordova-plugins/geolocation",
     "displayName": "Geolocation",
-    "description": "\nThis plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.\n\n This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.\n\nFor iOS you have to add this configuration to your configuration.xml file\n```xml\n<edit-config file=\"*-Info.plist\" mode=\"merge\" target=\"NSLocationWhenInUseUsageDescription\">\n   <string>We use your location for full functionality of certain app features.</string>\n</edit-config>\n```\n\n",
+    "description": "This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.\n\nThis API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.\n\nFor iOS you have to add this configuration to your configuration.xml file\n\n```xml\n<edit-config file=\"*-Info.plist\" mode=\"merge\" target=\"NSLocationWhenInUseUsageDescription\">\n   <string>We use your location for full functionality of certain app features.</string>\n</edit-config>\n```\n",
     "usage": "\n\n```typescript\nimport { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';\n\n...\n\nconstructor(private geolocation: Geolocation) {}\n\n...\n\nthis.geolocation.getCurrentPosition().then((resp) => {\n // resp.coords.latitude\n // resp.coords.longitude\n}).catch((error) => {\n  console.log('Error getting location', error);\n});\n\nlet watch = this.geolocation.watchPosition();\nwatch.subscribe((data) => {\n // data can be a set of coordinates, or an error (if an error occurred).\n // data.coords.latitude\n // data.coords.longitude\n});\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -1897,7 +1897,7 @@
   {
     "packageName": "@awesome-cordova-plugins/globalization",
     "displayName": "Globalization",
-    "description": "\nThis plugin obtains information and performs operations specific to the user's locale, language, and timezone.\n",
+    "description": "This plugin obtains information and performs operations specific to the user's locale, language, and timezone.\n",
     "usage": "\n```typescript\nimport { Globalization } from '@awesome-cordova-plugins/globalization/ngx';\n\nconstructor(private globalization: Globalization) { }\n\n\n...\n\n\nthis.globalization.getPreferredLanguage()\n  .then(res => console.log(res))\n  .catch(e => console.log(e));\n\n\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -1915,7 +1915,7 @@
   {
     "packageName": "@awesome-cordova-plugins/google-analytics",
     "displayName": "Google Analytics",
-    "description": "\nThis plugin connects to Google's native Universal Analytics SDK\nPrerequisites:\n- A Cordova 3.0+ project for iOS and/or Android\n- A Mobile App property through the Google Analytics Admin Console\n- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)",
+    "description": "This plugin connects to Google's native Universal Analytics SDK\nPrerequisites:\n\n- A Cordova 3.0+ project for iOS and/or Android\n- A Mobile App property through the Google Analytics Admin Console\n- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)\n",
     "usage": "\n```typescript\nimport { GoogleAnalytics } from '@awesome-cordova-plugins/google-analytics/ngx';\n\nconstructor(private ga: GoogleAnalytics) { }\n\n...\n\nthis.ga.startTrackerWithId('YOUR_TRACKER_ID')\n   .then(() => {\n     console.log('Google analytics is ready now');\n      this.ga.trackView('test');\n     // Tracker is ready\n     // You can now track pages or set additional information such as AppVersion or UserId\n   })\n   .catch(e => console.log('Error starting GoogleAnalytics', e));\n\n\n```\n",
     "platforms": [
       "Android",
@@ -1931,7 +1931,7 @@
   {
     "packageName": "@awesome-cordova-plugins/google-nearby",
     "displayName": "Google Nearby",
-    "description": "\nThis plugin adds support for the Google Nearby Messages API.\n",
+    "description": "This plugin adds support for the Google Nearby Messages API.\n",
     "usage": "\n```typescript\nimport { GoogleNearby } from '@awesome-cordova-plugins/google-nearby/ngx';\n\n\nconstructor(private googleNearby: GoogleNearby) { }\n\nthis.googleNearby.publish('Hello')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.googleNearby.subscribe()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n```\n",
     "platforms": [
       "Android"
@@ -1947,7 +1947,7 @@
   {
     "packageName": "@awesome-cordova-plugins/google-play-games-services",
     "displayName": "Google Play Games Services",
-    "description": "\nA Cordova plugin that let's you interact with Google Play Games Services.\n",
+    "description": "A Cordova plugin that let's you interact with Google Play Games Services.\n",
     "usage": "\n```typescript\nimport { GooglePlayGamesServices } from '@awesome-cordova-plugins/google-play-games-services/ngx';\n\n\nconstructor(private googlePlayGamesServices: GooglePlayGamesServices) { }\n\n...\n\n// Authenticate with Play Games Services\nthis.googlePlayGamesServices.auth()\n    .then(() => console.log('Logged in to Play Games Services'))\n    .catch(e) => console.log('Error logging in Play Games Services', e);\n\n// Sign out of Play Games Services.\nthis.googlePlayGamesServices.signOut()\n    .then(() => console.log('Logged out of Play Games Services'))\n    .catch(e => console.log('Error logging out of Play Games Services', e);\n\n// Check auth status.\nthis.googlePlayGamesServices.isSignedIn()\n    .then((signedIn: SignedInResponse) => {\n        if (signedIn.isSignedIn) {\n            hideLoginButton();\n        }\n    });\n\n// Fetch currently authenticated user's data.\nthis.googlePlayGamesServices.showPlayer().then((data: Player) => {\n   console.log('Player data', data);\n});\n\n// Submit a score.\nthis.googlePlayGamesServices.submitScore({\n    score: 100,\n    leaderboardId: 'SomeLeaderboardId'\n});\n\n// Submit a score and wait for reponse.\nthis.googlePlayGamesServices.submitScoreNow({\n    score: 100,\n    leaderboardId: 'SomeLeaderboardId'\n}).then((data: SubmittedScoreData) => {\n   console.log('Score related data', data);\n});\n\n// Get the player score on a leaderboard.\nthis.googlePlayGamesServices.getPlayerScore({\n    leaderboardId: 'SomeLeaderBoardId'\n}).then((data: PlayerScoreData) => {\n    console.log('Player score', data);\n});\n\n// Show the native leaderboards window.\nthis.googlePlayGamesServices.showAllLeaderboards()\n    .then(() => console.log('The leaderboard window is visible.'));\n\n// Show a signle native leaderboard window.\nthis.googlePlayGamesServices.showLeaderboard({\n    leaderboardId: 'SomeLeaderBoardId'\n}).then(() => console.log('The leaderboard window is visible.'));\n\n// Unlock an achievement.\nthis.googlePlayGamesServices.unlockAchievement({\n    achievementId: 'SomeAchievementId'\n}).then(() => console.log('Achievement sent'));\n\n// Unlock an achievement and wait for response.\nthis.googlePlayGamesServices.unlockAchievementNow({\n    achievementId: 'SomeAchievementId'\n}).then(() => console.log('Achievement unlocked'));\n\n// Incremement an achievement.\nthis.googlePlayGamesServices.incrementAchievement({\n    step: 1,\n    achievementId: 'SomeAchievementId'\n}).then(() => console.log('Achievement increment sent'));\n\n// Incremement an achievement and wait for response.\nthis.googlePlayGamesServices.incrementAchievementNow({\n    step: 1,\n    achievementId: 'SomeAchievementId'\n}).then(() => console.log('Achievement incremented'));\n\n// Show the native achievements window.\nthis.googlePlayGamesServices.showAchivements()\n   .then(() => console.log('The achievements window is visible.'));\n\n```\n",
     "platforms": [
       "Android"
@@ -1977,7 +1977,7 @@
   {
     "packageName": "@awesome-cordova-plugins/gyroscope",
     "displayName": "Gyroscope",
-    "description": "Read Gyroscope sensor data",
+    "description": "Read Gyroscope sensor data\n",
     "usage": "\n```typescript\nimport { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '@awesome-cordova-plugins/gyroscope/ngx';\n\n\nconstructor(private gyroscope: Gyroscope) { }\n\n...\n\n\nlet options: GyroscopeOptions = {\n   frequency: 1000\n}\n\nthis.gyroscope.getCurrent(options)\n  .then((orientation: GyroscopeOrientation) => {\n     console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);\n   })\n  .catch()\n\n\nthis.gyroscope.watch()\n   .subscribe((orientation: GyroscopeOrientation) => {\n      console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);\n   });\n\n```",
     "platforms": [
       "Android",
@@ -1991,7 +1991,7 @@
   {
     "packageName": "@awesome-cordova-plugins/hce",
     "displayName": "hce",
-    "description": "\nHCE Cordova Wrapper\n",
+    "description": "HCE Cordova Wrapper\n",
     "usage": "\n```typescript\nimport { hce } from '@awesome-cordova-plugins/hce/ngx';\n\n\nconstructor(private hce: hce) { }\n\n...\n\nfunction onCommand(command){\n  var commandAsBytes = new Uint8Array(command);\n  var commandAsString = hce.util.byteArrayToHexString(commandAsBytes);\n\n  // do something with the command\n\n  // send the response\n  hce.sendReponse(commandResponse);\n}\nthis.hce.registerCommandCallback().then(onCommand);\n\n```\n",
     "platforms": [
       "Android"
@@ -2007,7 +2007,7 @@
   {
     "packageName": "@awesome-cordova-plugins/header-color",
     "displayName": "Header Color",
-    "description": "\nCordova plugin to change color of header in Android Multitask View\n",
+    "description": "Cordova plugin to change color of header in Android Multitask View\n",
     "usage": "\n```typescript\nimport { HeaderColor } from '@awesome-cordova-plugins/header-color/ngx';\n\nconstructor(private headerColor: HeaderColor) { }\n\n...\n\nthis.headerColor.tint('#becb29');\n```\n",
     "platforms": [
       "Android"
@@ -2020,7 +2020,7 @@
   {
     "packageName": "@awesome-cordova-plugins/health-kit",
     "displayName": "Health Kit",
-    "description": "\nThe HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.\nAny data saved shows up in the iOS Health app and is available for other iOS apps.\n",
+    "description": "The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.\nAny data saved shows up in the iOS Health app and is available for other iOS apps.\n",
     "usage": "\n```typescript\nimport { HealthKit } from '@awesome-cordova-plugins/health-kit/ngx';\n\n\nconstructor(private healthKit: HealthKit) { }\n\n...\n```\n",
     "platforms": [
       "iOS"
@@ -2033,7 +2033,7 @@
   {
     "packageName": "@awesome-cordova-plugins/health",
     "displayName": "Health",
-    "description": "\nA plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.\n",
+    "description": "A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.\n",
     "usage": "\n```typescript\nimport { Health } from '@awesome-cordova-plugins/health/ngx';\n\n\nconstructor(private health: Health) { }\n\n...\n\nthis.health.isAvailable()\n.then((available:boolean) => {\n  console.log(available);\n  this.health.requestAuthorization([\n    'distance', 'nutrition',  //read and write permissions\n    {\n      read: ['steps'],       //read only permission\n      write: ['height', 'weight']  //write only permission\n    }\n  ])\n  .then(res => console.log(res))\n  .catch(e => console.log(e));\n})\n.catch(e => console.log(e));\n\n```\nSee description at https://github.com/dariosalvi78/cordova-plugin-health for a full list of Datatypes and see examples.\n",
     "platforms": [
       "Android",
@@ -2047,7 +2047,7 @@
   {
     "packageName": "@awesome-cordova-plugins/hotspot",
     "displayName": "Hotspot",
-    "description": "\nA Cordova plugin for managing Hotspot networks on Android.\n\nRequires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).\n",
+    "description": "A Cordova plugin for managing Hotspot networks on Android.\n\nRequires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).\n",
     "usage": "\n```typescript\nimport { Hotspot, HotspotNetwork } from '@awesome-cordova-plugins/hotspot/ngx';\n\nconstructor(private hotspot: Hotspot) { }\n\n...\n\n\nthis.hotspot.scanWifi().then((networks: HotspotNetwork[]) => {\n    console.log(networks);\n});\n\n```",
     "platforms": [
       "Android"
@@ -2060,7 +2060,7 @@
   {
     "packageName": "@awesome-cordova-plugins/http",
     "displayName": "HTTP",
-    "description": "\nCordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.\n\nAdvantages over Javascript requests:\n- SSL / TLS Pinning\n- CORS restrictions do not apply\n- Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)\n",
+    "description": "Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.\n\nAdvantages over Javascript requests:\n\n- SSL / TLS Pinning\n- CORS restrictions do not apply\n- Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)\n",
     "usage": "\n```typescript\nimport { HTTP } from '@awesome-cordova-plugins/http/ngx';\n\nconstructor(private http: HTTP) {}\n\n...\n\nthis.http.get('http://ionic.io', {}, {})\n  .then(data => {\n\n    console.log(data.status);\n    console.log(data.data); // data received by server\n    console.log(data.headers);\n\n  })\n  .catch(error => {\n\n    console.log(error.status);\n    console.log(error.error); // error message as string\n    console.log(error.headers);\n\n  });\n\n```",
     "platforms": [
       "Android",
@@ -2074,7 +2074,7 @@
   {
     "packageName": "@awesome-cordova-plugins/httpd",
     "displayName": "Httpd",
-    "description": "\nEmbedded httpd for Cordova apps. Light weight HTTP server.",
+    "description": "Embedded httpd for Cordova apps. Light weight HTTP server.\n",
     "usage": "\n```typescript\nimport { Httpd, HttpdOptions } from '@awesome-cordova-plugins/httpd/ngx';\n\nconstructor(private httpd: Httpd) { }\n\n...\n\n\nlet options: HttpdOptions = {\n     www_root: 'httpd_root', // relative path to app's www directory\n     port: 80,\n     localhost_only: false\n }\n\nthis.httpd.startServer(options).subscribe((data) => {\n console.log('Server is live');\n});\n\n```",
     "platforms": [
       "Android",
@@ -2089,7 +2089,7 @@
   {
     "packageName": "@awesome-cordova-plugins/iamport-cordova",
     "displayName": "Iamport Cordova",
-    "description": "\nCordova plugin that integrates with and handles multiple payment gateways.\n",
+    "description": "Cordova plugin that integrates with and handles multiple payment gateways.\n",
     "usage": "\n```typescript\nimport { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx';\n\n\nconstructor(private iamportCordova: IamportCordova) { }\n\n...\n\n\nthis.iamportCordova.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "ios",
@@ -2103,7 +2103,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ibeacon",
     "displayName": "IBeacon",
-    "description": "\nThis plugin provides functions for working with iBeacons.\n\n The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.\n",
+    "description": "This plugin provides functions for working with iBeacons.\n\nThe plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.\n",
     "usage": "\n\n```typescript\nimport { IBeacon } from '@awesome-cordova-plugins/ibeacon/ngx';\n\nconstructor(private ibeacon: IBeacon) { }\n\n...\n\n\n// Request permission to use location on iOS\nthis.ibeacon.requestAlwaysAuthorization();\n// create a new delegate and register it with the native layer\nlet delegate = this.ibeacon.Delegate();\n\n// Subscribe to some of the delegate's event handlers\ndelegate.didRangeBeaconsInRegion()\n  .subscribe(\n    data => console.log('didRangeBeaconsInRegion: ', data),\n    error => console.error()\n  );\ndelegate.didStartMonitoringForRegion()\n  .subscribe(\n    data => console.log('didStartMonitoringForRegion: ', data),\n    error => console.error()\n  );\ndelegate.didEnterRegion()\n  .subscribe(\n    data => {\n      console.log('didEnterRegion: ', data);\n    }\n  );\n\nlet beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E');\n\nthis.ibeacon.startMonitoringForRegion(beaconRegion)\n  .then(\n    () => console.log('Native layer received the request to monitoring'),\n    error => console.error('Native layer failed to begin monitoring: ', error)\n  );\n```",
     "platforms": [
       "Android",
@@ -2117,7 +2117,7 @@
   {
     "packageName": "@awesome-cordova-plugins/image-picker",
     "displayName": "Image Picker",
-    "description": "\nCordova Plugin For Multiple Image Selection\n\nRequires Cordova plugin: `cordova-plugin-image-picker`.\nFor more info, please see the https://github.com/Telerik-Verified-Plugins/ImagePicker\n",
+    "description": "Cordova Plugin For Multiple Image Selection\n\nRequires Cordova plugin: `cordova-plugin-image-picker`.\nFor more info, please see the https://github.com/Telerik-Verified-Plugins/ImagePicker\n",
     "usage": "\n```typescript\nimport { ImagePicker } from '@awesome-cordova-plugins/image-picker/ngx';\n\n\nconstructor(private imagePicker: ImagePicker) { }\n\n...\n\nthis.imagePicker.getPictures(options).then((results) => {\n  for (var i = 0; i < results.length; i++) {\n      console.log('Image URI: ' + results[i]);\n  }\n}, (err) => { });\n\n```",
     "platforms": [
       "Android",
@@ -2134,7 +2134,7 @@
   {
     "packageName": "@awesome-cordova-plugins/image-resizer",
     "displayName": "Image Resizer",
-    "description": "\nCordova Plugin For Image Resize\n",
+    "description": "Cordova Plugin For Image Resize\n",
     "usage": "\n```typescript\nimport { ImageResizer, ImageResizerOptions } from '@awesome-cordova-plugins/image-resizer/ngx';\n\nconstructor(private imageResizer: ImageResizer) { }\n\n...\n\nlet options = {\n uri: uri,\n folderName: 'Protonet',\n quality: 90,\n width: 1280,\n height: 1280\n} as ImageResizerOptions;\n\nthis.imageResizer\n  .resize(options)\n  .then((filePath: string) => console.log('FilePath', filePath))\n  .catch(e => console.log(e));\n\n```",
     "platforms": [
       "Android",
@@ -2149,7 +2149,7 @@
   {
     "packageName": "@awesome-cordova-plugins/imap",
     "displayName": "Imap",
-    "description": "\nThis plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.\nThis plugin is in Beta version and it offers support only for Android.\nThe plugin uses Java Mail API.\nPlanned improvements and support for iOS.\n",
+    "description": "This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.\nThis plugin is in Beta version and it offers support only for Android.\nThe plugin uses Java Mail API.\nPlanned improvements and support for iOS.\n",
     "usage": "\n```typescript\nimport { Imap } from '@awesome-cordova-plugins/imap/ngx';\n\n\nconstructor(private imap: Imap) { }\n\n...\n\n\nthis.imap.connect({\n host: 'imap.gmail.com',\n user: 'my_email@gmail.com',\n password: 'my-pass'\n})\n  .then((res: Connection) => console.log(res))\n  .catch((error) => console.error(error));\n\n\n\n this.imap.disconnect()\n  .then((res: boolean) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n\n\nthis.imap.isConnected()\n  .then((res: boolean) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n Note: Connected to an IMAP service is REQUIRED to be able to get data from the below functions.\n\n\n  this.imap.listMailFolders()\n  .then((res: boolean) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n\n  this.imap.getMessageCountByFolderName('INBOX')\n  .then((res: number) => {\n  // Returns the count of the messages in the folder as a result\n   console.log(res)\n  })\n  .catch((error: any) => {\n    console.error(error)\n  });\n\n\n\n  this.imap.searchMessagesByDatePeriod('INBOX', 1601503200000, Comparison.GE)\n  .then((res: number[]) => {\n  // Returns array with messages' consecutive numbers\n  // ex. [1207, 1208, 1209]\n   console.log(res)\n  })\n  .catch((error: any) => {\n    console.error(error)\n  });\n\n\n  this.imap.listMessagesHeadersByConsecutiveNumber('INBOX', 1200, 1280)\n  .then((res: Message[]) => {\n  //  Returns array with messages' headers data\n   console.log(res)\n  })\n  .catch((error: any) => {\n    console.error(error)\n  });\n\n\n  this.imap.listMessagesHeadersByDate('INBOX', 1601503200000, Comparison.GE)\n  .then((res: Message[]) => {\n  // Returns array with messages' headers data\n   console.log(res)\n  })\n  .catch((error: any) => {\n    console.error(error)\n  });\n\n\n  this.imap.getFullMessageData('INBOX', 1205)\n  .then((res: Message) => {\n  // Returns \"Message\" object with the full message data including attachments.\n   console.log(res)\n  })\n  .catch((error: any) => {\n    console.error(error)\n  });\n\n\n  this.imap.copyToFolder('INBOX', 'Spam', [1204, 1205, 1206, 1207])\n  .then((res: boolean) => {\n  // Returns \"true\" if the process is successful, else returns \"false\".\n   console.log(res)\n  })\n  .catch((error: any) => {\n    console.error(error)\n  });\n\n\n  * Sets a flag on a message\n  * \"setFlag()\" can be used for deleting messages setting the Delete flag to \"FlagEnum.DELETED\"\n  this.imap.setFlag('INBOX', [1206, 1205, 1204], FlagEnum.SEEN, true)\n  .then((res: ModificationResult) => {\n\n   // res.status - return true or false based on the deletion success\n\n  //res.modifiedMessages - for ex.[1206, 1205, 1204];\n\n  })\n  .catch((error: any) => {\n    console.error(error)\n  });\n\n```\n",
     "platforms": [
       "Android"
@@ -2162,7 +2162,7 @@
   {
     "packageName": "@awesome-cordova-plugins/in-app-browser",
     "displayName": "In App Browser",
-    "description": "Launches in app Browser",
+    "description": "Launches in app Browser\n",
     "usage": "\n```typescript\nimport { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';\n\nconstructor(private iab: InAppBrowser) { }\n\n\n...\n\n\nconst browser = this.iab.create('https://ionicframework.com/');\n\nbrowser.executeScript(...);\n\nbrowser.insertCSS(...);\nbrowser.on('loadstop').subscribe(event => {\n   browser.insertCSS({ code: \"body{color: red;\" });\n});\n\nbrowser.close();\n\n```",
     "platforms": [
       "AmazonFire OS",
@@ -2181,7 +2181,7 @@
   {
     "packageName": "@awesome-cordova-plugins/in-app-purchase-2",
     "displayName": "In App Purchase 2",
-    "description": "\nIn-App Purchase on iOS, Android, Windows, macOS and XBox.\n\n## Features\n\n|  | ios | android | win-8 | win-10/uwp | mac |\n|--|--|--|--|--|--|\n| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |\n| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |\n| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |\n| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |\n| receipt validations | ✅ | ✅ |  | ✅ | ✅ |\n| downloadable content | ✅ |   |   |   | ✅ |\n| introductory prices | ✅ | ✅ |   | ✅ | ✅ |\n\nSupports:\n\n - **iOS** version 7.0 or higher.\n - **Android** version 2.2 (API level 8) or higher\n   - with Google Play client version 3.9.16 or higher\n - **Windows** Store/Phone 8.1 or higher\n - **Windows 10 Mobile**\n - **macOS** version 10\n - **Xbox One**\n   - (and any platform supporting Microsoft's UWP)\n",
+    "description": "In-App Purchase on iOS, Android, Windows, macOS and XBox.\n\n## Features\n\n|                      | ios | android | win-8 | win-10/uwp | mac |\n| -------------------- | --- | ------- | ----- | ---------- | --- |\n| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |\n| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |\n| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |\n| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |\n| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |\n| downloadable content | ✅  |         |       |            | ✅  |\n| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |\n\nSupports:\n\n- **iOS** version 7.0 or higher.\n- **Android** version 2.2 (API level 8) or higher\n  - with Google Play client version 3.9.16 or higher\n- **Windows** Store/Phone 8.1 or higher\n- **Windows 10 Mobile**\n- **macOS** version 10\n- **Xbox One**\n  - (and any platform supporting Microsoft's UWP)\n",
     "usage": "\n```typescript\nimport { InAppPurchase2 } from '@awesome-cordova-plugins/in-app-purchase-2/ngx';\n\nconstructor(public platform: Platform, private store: InAppPurchase2) {\n  platform.ready().then(() => {\n   this.store.register({\n     id: \"my_product_id\",\n     type: this.store.NON_RENEWING_SUBSCRIPTION,\n   });\n   this.store.when(\"my_product_id\")\n     .approved(p => p.verify())\n     .verified(p => p.finish());\n   this.store.refresh();\n  });\n}\n\n...\n\nthis.store.order(\"my_product_id\");\n\n```\n\n## Full example\n\n```typescript\n // After platform ready\n this.store.verbosity = this.store.DEBUG;\n this.store.register({\n   id: \"my_product_id\",\n   type: this.store.PAID_SUBSCRIPTION,\n });\n\n // Register event handlers for the specific product\n this.store.when(\"my_product_id\").registered( (product: IAPProduct) => {\n   console.log('Registered: ' + JSON.stringify(product));\n });\n\n // Updated\n this.store.when(\"my_product_id\").updated( (product: IAPProduct) => {\n   console.log('Updated' + JSON.stringify(product));\n });\n\n // User closed the native purchase dialog\n this.store.when(\"my_product_id\").cancelled( (product) => {\n     console.error('Purchase was Cancelled');\n });\n\n // Track all store errors\n this.store.error( (err) => {\n   console.error('Store Error ' + JSON.stringify(err));\n });\n\n // Run some code only when the store is ready to be used\n this.store.ready(() =>  {\n   console.log('Store is ready');\n   console.log('Products: ' + JSON.stringify(this.store.products));\n   console.log(JSON.stringify(this.store.get(\"my_product_id\")));\n });\n\n // Refresh the status of in-app products\n this.store.refresh();\n\n ...\n\n // To make a purchase\n this.store.order(\"my_product_id\");\n\n```\n\n## Philosophy\n\nThe API is mostly events based. As a user of this plugin,\nyou will have to register listeners to changes happening to the products\nyou register.\n\nThe core of the listening mechanism is the `when()` method. It allows you to\nbe notified of changes to one or a set of products using a query mechanism:\n```typescript\n this.store.when(\"product\").updated(refreshScreen); // match any product\n this.store.when(\"full_version\").owned(unlockApp); // match a specific product\n this.store.when(\"subscription\").approved(serverCheck); // match all subscriptions\n this.store.when(\"downloadable content\").downloaded(showContent);\n```\n\nThe `updated` event is fired whenever one of the fields of a product is\nchanged (its `owned` status for instance).\n\nThis event provides a generic way to track the statuses of your purchases,\nto unlock features when needed and to refresh your views accordingly.\n\n## Registering products\n\nThe store needs to know the type and identifiers of your products before you\ncan use them in your code.\n\nUse `store.register()` to define them before your first call to `store.refresh()`.\n\nOnce registered, you can use `store.get()` to retrieve an `IAPProduct` object.\n\n```typescript\n this.store.register({\n   id: \"my_consumable1\",\n   type: this.store.CONSUMABLE\n });\n ...\n const p = this.store.get(\"my_consumable1\");\n```\n\nThe product `id` and `type` have to match products defined in your\nApple, Google or Microsoft developer consoles.\n\nLearn more about it [from the wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki).\n\n## Displaying products\n\nRight after you registered your products, nothing much is known about them\nexcept their `id`, `type` and an optional `alias`.\n\nWhen you perform the initial call to `store.refresh()`, the platforms' server will\nbe contacted to load informations about the registered products: human\nreadable `title` and `description`, `price`, etc.\n\nThis isn't an optional step, store owners require you\nto display information about a product exactly as retrieved from their server: no\nhard-coding of price and title allowed! This is also convenient for you\nas you can change the price of your items knowing that it'll be reflected instantly\non your clients' devices.\n\nNote that the information may not be available when the first view that needs\nthem appears on screen. For you, the best option is to have your view monitor\nchanges made to the product.\n\n## Purchasing\n\n#### initiate a purchase\n\nPurchases are initiated using the `store.order(\"some_product_id\")` method.\n\nThe store will manage the internal purchase flow. It'll end:\n\n - with an `approved` event. The product enters the `APPROVED` state.\n - with a `cancelled` event. The product gets back to the `VALID` state.\n - with an `error` event. The product gets back to the `VALID` state.\n\nSee the product life-cycle section for details about product states.\n\n#### finish a purchase\n\nOnce the transaction is approved, the product still isn't owned: the store needs\nconfirmation that the purchase was delivered before closing the transaction.\n\nTo confirm delivery, you'll use the `product.finish()` method.\n\n#### example usage\n\nDuring initialization:\n```typescript\nthis.store.when(\"extra_chapter\").approved((product: IAPProduct) => {\n  // download the feature\n  app.downloadExtraChapter()\n  .then(() => product.finish());\n});\n```\n\nWhen the purchase button is clicked:\n```typescript\nthis.store.order(\"extra_chapter\");\n```\n\n#### un-finished purchases\n\nIf your app wasn't able to deliver the content, `product.finish()` won't be called.\n\nDon't worry: the `approved` event will be re-triggered the next time you\ncall `store.refresh()`, which can very well be the next time\nthe application starts. Pending transactions are persistant.\n\n#### simple case\n\nIn the most simple case, where:\n\n - delivery of purchases is only local ;\n - you don't want (or need) to implement receipt validation ;\n\nYou may just want to finish all purchases automatically. You can do it this way:\n```js\nthis.store.when(\"product\").approved((p: IAPProduct) => p.finish());\n```\n\nNOTE: the \"product\" query will match any purchases (see \"queries\" to learn more details about queries).\n\n## Receipt validation\n\nTo get the most up-to-date information about purchases (in case a purchase have been canceled, or a subscription renewed),\nyou should implement server side receipt validation.\n\nThis also protects you against fake \"purchases\", made by some users using\n\"free in-app purchase\" apps on their devices.\n\nWhen a purchase has been approved by the store, it's enriched with\ntransaction information (see `product.transaction` attribute).\n\nTo verify a purchase you'll have to do three things:\n\n - configure the validator.\n - call `product.verify()` from the `approved` event, before finishing the transaction.\n - finish the transaction when transaction is `verified`.\n\n**Shameless Plug**: this is a feature many users struggle with, so as the author of this plugin, we can provide it to you as-a-service: https://billing.fovea.cc/\n(which is free until you start making serious money)\n\n#### example using a validation URL\n\n```js\nthis.store.validator = \"https://billing.fovea.cc/\";\n\nthis.store.when(\"my stuff\")\n  .approved((p: IAPProduct) => p.verify())\n  .verified((p: IAPProduct) => p.finish());\n```\n\n## Subscriptions\n\nFor subscription, you MUST implement remote receipt validation.\n\nWhen the receipt validator returns a `store.PURCHASE_EXPIRED` error code, the subscription will\nautomatically loose its `owned` status.\n\nTypically, you'll enable and disable access to your content this way.\n```typescript\nthis.store.when(\"my_subcription\").updated((product: IAPProduct) => {\n  if (product.owned)\n    app.subscriberMode();\n  else\n    app.guestMode();\n});\n```\n\n## Product life-cycle\n\nA product will change state during the application execution.\n\nFind below a diagram of the different states a product can pass by.\n\n```\nREGISTERED +--> INVALID\n           |\n           +--> VALID +--> REQUESTED +--> INITIATED +-+\n                                                      |\n                ^      +------------------------------+\n                |      |\n                |      |             +--> DOWNLOADING +--> DOWNLOADED +\n                |      |             |                                |\n                |      +--> APPROVED +--------------------------------+--> FINISHED +--> OWNED\n                |                                                             |\n                +-------------------------------------------------------------+\n\n#### Notes\n\n - When finished, a consumable product will get back to the `VALID` state, while other will enter the `OWNED` state.\n - Any error in the purchase process will bring a product back to the `VALID` state.\n - During application startup, products may go instantly from `REGISTERED` to `APPROVED` or `OWNED`, for example if they are purchased non-consumables or non-expired subscriptions.\n - Non-Renewing Subscriptions are iOS products only. Please see the [iOS Non Renewing Subscriptions documentation](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/ios.md#non-renewing) for a detailed explanation.\n\n## events\n\n - `loaded(IAPProduct)`\n   - Called when product data is loaded from the store.\n - `updated(IAPProduct)`\n   - Called when any change occured to a product.\n - `error(err)`\n   - Called when an order failed.\n   - The `err` parameter is an error object\n - `approved(IAPProduct)`\n   - Called when a product order is approved.\n - `owned(IAPProduct)`\n   - Called when a non-consumable product or subscription is owned.\n - `cancelled(IAPProduct)`\n   - Called when a product order is cancelled by the user.\n - `refunded(IAPProduct)`\n   - Called when an order is refunded by the user.\n - Actually, all other product states have their promise\n   - `registered`, `valid`, `invalid`, `requested`,\n     `initiated` and `finished`\n - `verified(IAPProduct)`\n   - Called when receipt validation successful\n - `unverified(IAPProduct)`\n   - Called when receipt verification failed\n - `expired(IAPProduct)`\n   - Called when validation find a subscription to be expired\n - `downloading(IAPProduct, progress, time_remaining)`\n   - Called when content download is started\n - `downloaded(IAPProduct)`\n   - Called when content download has successfully completed\n\n## Learn More\n\n - [GitHub](https://github.com/j3k0/cordova-plugin-purchase)\n - [GitBook](https://purchase.cordova.fovea.cc/)\n - [Wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki)\n - [API reference](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/api.md)\n\n## Technical Support or Questions\n\nIf you have questions or need help integrating In-App Purchase, [Open an Issue on GitHub](https://github.com/j3k0/cordova-plugin-purchase/issues) or email us at _support@fovea.cc_.\n\n@interfaces\nIAPProduct\nIAPProductOptions\nIAPProductEvents\n```\n",
     "platforms": [
       "iOS",
@@ -2196,7 +2196,7 @@
   {
     "packageName": "@awesome-cordova-plugins/in-app-purchase",
     "displayName": "In App Purchase",
-    "description": "\nA lightweight Cordova plugin for in app purchases on iOS/Android.\n",
+    "description": "A lightweight Cordova plugin for in app purchases on iOS/Android.\n",
     "usage": "\n```typescript\nimport { InAppPurchase } from '@awesome-cordova-plugins/in-app-purchase/ngx';\n\nconstructor(private iap: InAppPurchase) { }\n\n...\n\nthis.iap\n .getProducts(['prod1', 'prod2', ...])\n .then((products) => {\n   console.log(products);\n    //  [{ productId: 'com.yourapp.prod1', 'title': '...', description: '...', price: '...' }, ...]\n })\n .catch((err) => {\n   console.log(err);\n });\n\n\nthis.iap\n  .buy('prod1')\n  .then((data)=> {\n    console.log(data);\n    // {\n    //   transactionId: ...\n    //   receipt: ...\n    //   signature: ...\n    // }\n  })\n  .catch((err)=> {\n    console.log(err);\n  });\n\n```\n",
     "platforms": [
       "Android",
@@ -2210,7 +2210,7 @@
   {
     "packageName": "@awesome-cordova-plugins/in-app-review",
     "displayName": "In App Review",
-    "description": "\nThis plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3\n\nThis functionality only works on iOS devices\n\n",
+    "description": "This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3\n\nThis functionality only works on iOS devices\n",
     "usage": "\n```typescript\nimport { InAppReview } from '@awesome-cordova-plugins/in-app-review/ngx';\n\n\nconstructor(private inAppReview: InAppReview) { }\n\n...\n\n\nthis.inAppReview.requestReview()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "iOS"
@@ -2223,7 +2223,7 @@
   {
     "packageName": "@awesome-cordova-plugins/index-app-content",
     "displayName": "Index App Content",
-    "description": "\nThis plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).\nYou can add, update and delete items to the spotlight search index.\nSpotlight Search will include these items in the result list. You can deep-link the search results with your app.\n",
+    "description": "This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).\nYou can add, update and delete items to the spotlight search index.\nSpotlight Search will include these items in the result list. You can deep-link the search results with your app.\n",
     "usage": "\n```typescript\nimport { IndexAppContent } from '@awesome-cordova-plugins/index-app-content/ngx';\n\n\nconstructor(private indexAppContent: IndexAppContent) { }\n\n...\n\nvar items = [\n     {\n       domain: 'com.my.domain',\n       identifier: '88asdf7dsf',\n       title: 'Foo',\n       description: 'Bar',\n       url: 'http://location/of/my/image.jpg',\n   },\n   {\n       domain: 'com.other.domain',\n       identifier: '9asd67g6a',\n       title: 'Baz',\n       description: 'Woot',\n       url: 'http://location/of/my/image2.jpg',\n    }\n];\n\nthis.indexAppContent.setItems(items)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "iOS"
@@ -2236,7 +2236,7 @@
   {
     "packageName": "@awesome-cordova-plugins/insomnia",
     "displayName": "Insomnia",
-    "description": "\nPrevent the screen of the mobile device from falling asleep.\n",
+    "description": "Prevent the screen of the mobile device from falling asleep.\n",
     "usage": "\n```typescript\nimport { Insomnia } from '@awesome-cordova-plugins/insomnia/ngx';\n\nconstructor(private insomnia: Insomnia) { }\n\n...\n\nthis.insomnia.keepAwake()\n  .then(\n    () => console.log('success'),\n    () => console.log('error')\n  );\n\nthis.insomnia.allowSleepAgain()\n  .then(\n    () => console.log('success'),\n    () => console.log('error')\n  );\n```\n\n",
     "platforms": [
       "Android",
@@ -2268,7 +2268,7 @@
   {
     "packageName": "@awesome-cordova-plugins/intel-security",
     "displayName": "Intel Security",
-    "description": "\nThe App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.\n\nFor example:\n- Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation\n- Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation\n\nFor more information please visit the [API documentation](https://software.intel.com/en-us/app-security-api/api).\n",
+    "description": "The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.\n\nFor example:\n\n- Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation\n- Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation\n\nFor more information please visit the [API documentation](https://software.intel.com/en-us/app-security-api/api).\n",
     "usage": "\n```typescript\nimport { IntelSecurity } from '@awesome-cordova-plugins/intel-security/ngx';\n...\nconstructor(private intelSecurity: IntelSecurity) { }\n...\n\nlet storageID = 'id';\n\nthis.intelSecurity.data.createFromData({ data: 'Sample Data' })\n  .then((instanceID: Number) => this.intelSecurity.storage.write({ id: storageId, instanceID: instanceID }))\n  .catch((error: any) => console.log(error));\n\nthis.intelSecurity.storage.read({id: storageID })\n  .then((instanceID: number) => this.intelSecurity.data.getData(instanceID))\n  .then((data: string) => console.log(data)) // Resolves to 'Sample Data'\n  .catch((error: any) => console.log(error));\n\nthis.intelSecurity.storage.delete({ id: storageID })\n  .then(() => console.log('Deleted Successfully'))\n  .catch((error: any) => console.log(error));\n```",
     "platforms": [
       "Android",
@@ -2284,7 +2284,7 @@
   {
     "packageName": "@awesome-cordova-plugins/intercom",
     "displayName": "Intercom",
-    "description": "\nThis is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.\nFollow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration\n",
+    "description": "This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.\nFollow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration\n",
     "usage": "\n```typescript\nimport { Intercom } from '@awesome-cordova-plugins/intercom/ngx';\n\n\nconstructor(private intercom: Intercom) { }\n\n...\n\nthis.intercom.registerUnidentifiedUser();\n...\nthis.intercom.registerForPush();\n\n```\n",
     "platforms": [
       "Android",
@@ -2298,7 +2298,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ionic-webview",
     "displayName": "Ionic Webview",
-    "description": "\nAccess Web View utilities.\n\nRequires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.\n",
+    "description": "Access Web View utilities.\n\nRequires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.\n",
     "usage": "\n```typescript\nimport { WebView } from '@awesome-cordova-plugins/ionic-webview/ngx';\n\n\nconstructor(private webview: WebView) { }\n\n...\n\nimg = this.webview.convertFileSrc('file:///Users/dan/camera-image-12345.png')\n\n```\n",
     "platforms": [
       "Android",
@@ -2313,7 +2313,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ios-aswebauthenticationsession-api",
     "displayName": "ios-aswebauthenticationsession-api",
-    "description": "\nPlugin for iOS 12 ASWebAuthenticationSession API\n",
+    "description": "Plugin for iOS 12 ASWebAuthenticationSession API\n",
     "usage": "\n```typescript\nimport { IosASWebauthenticationSession } from '@awesome-cordova-plugins/ios-aswebauthenticationsession-api/ngx';\n\n\nconstructor(private IosASWebauthenticationSession: ios-aswebauthenticationsession-api) { }\n\n...\n\n\nthis.IosASWebauthenticationSession.start(callbackUrl, authorizeURL)\n  .then((redirectUrl: string) => console.log(redirectUrl))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "iOS"
@@ -2326,7 +2326,7 @@
   {
     "packageName": "@awesome-cordova-plugins/is-debug",
     "displayName": "Is Debug",
-    "description": "\nDetect if the app is running in debug mode or not.\nDebug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.\n",
+    "description": "Detect if the app is running in debug mode or not.\nDebug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.\n",
     "usage": "\n```typescript\nimport { IsDebug } from '@awesome-cordova-plugins/is-debug/ngx';\n\nconstructor(private isDebug: IsDebug) { }\n\n...\n\nthis.isDebug.getIsDebug()\n  .then(isDebug => console.log('Is debug:', isDebug))\n  .catch(err => console.error(err));\n\n```\n",
     "platforms": [
       "Android",
@@ -2340,7 +2340,7 @@
   {
     "packageName": "@awesome-cordova-plugins/janalytics",
     "displayName": "jAnalytics",
-    "description": "\nThis plugin does something\n",
+    "description": "This plugin does something\n",
     "usage": "\n```typescript\nimport { JAnalytics } from '@awesome-cordova-plugins/JAnalytics/ngx';\n\n\nconstructor(private jAnalytics: JAnalytics) { }\n\n...\n\n\nthis.jAnalytics.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2357,7 +2357,7 @@
   {
     "packageName": "@awesome-cordova-plugins/jins-meme",
     "displayName": "Jins Meme",
-    "description": "\nImplementation of the JINS MEME SDK\n",
+    "description": "Implementation of the JINS MEME SDK\n",
     "usage": "\n```typescript\nimport { JinsMeme } from '@awesome-cordova-plugins/jins-meme/ngx';\n\nconstructor(private jinsMeme: JinsMeme) { }\n\n...\n\nthis.jinsMeme.setAppClientID(appClientId: string, clientSecret: string).then(\n  // Bluetooth should be enabled and the JINS MEME powered on (blinking blue light)\n  this.jinsMeme.startScan().subscribe((meme_addr) => {\n    this.jinsMeme.connect(meme_addr).subscribe((connectResult) => {\n      this.memeService.startDataReport().subscribe((dataReport) => {\n        console.log(dataReport);\n      });\n    });\n  });\n.catch(console.log('jinsMeme.setAppClientID authentication error'));\n\n```\n",
     "platforms": [
       "Android",
@@ -2371,7 +2371,7 @@
   {
     "packageName": "@awesome-cordova-plugins/jumio",
     "displayName": "Jumio",
-    "description": "Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigital/jumio-ionic-demo)\n\n[Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible\n\nOriginal source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova",
+    "description": "Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigital/jumio-ionic-demo)\n\n[Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible\n\nOriginal source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova\n",
     "usage": "\n```typescript\nimport {\n  Jumio,\n  JumioNetverifyConfig,\n  JumioDocVerificationConfig,\n  NetverifyDocumentData\n  DocVerificationDocumentData\n} from '@awesome-cordova-plugins/jumio/ngx';\n\n\nconstructor(private jumio: Jumio) { }\n\n...\n\nthis.jumio.initNetverify(\"API_TOKEN\", \"API_SECRET\", \"US\", {\n  requireVerification: false,\n  userReference: \"USER_REFERENCE\",\n  preselectedCountry: \"USA\",\n  cameraPosition: \"BACK\",\n  documentTypes: [\"DRIVER_LICENSE\", \"PASSPORT\", \"IDENTITY_CARD\", \"VISA\"],\n  enableWatchlistScreening: \"ENABLED\",\n  watchlistSearchProfile: \"YOUR_PROFILE_NAME\"\n});\n\nlet documentData: NetverifyDocumentData = await this.jumio.startNetverify();\n\n```\n",
     "platforms": [
       "Android",
@@ -2385,7 +2385,7 @@
   {
     "packageName": "@awesome-cordova-plugins/keyboard",
     "displayName": "Keyboard",
-    "description": "\nKeyboard plugin for Cordova.\n\nRequires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).\n",
+    "description": "Keyboard plugin for Cordova.\n\nRequires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).\n",
     "usage": "\n```typescript\nimport { Keyboard } from '@awesome-cordova-plugins/keyboard/ngx';\n\nconstructor(private keyboard: Keyboard) { }\n\n...\n\nthis.keyboard.show();\n\nthis.keyboard.hide();\n\n```\n",
     "platforms": [
       "Android",
@@ -2401,7 +2401,7 @@
   {
     "packageName": "@awesome-cordova-plugins/keychain-touch-id",
     "displayName": "Keychain Touch Id",
-    "description": "\nA cordova plugin adding the iOS TouchID / Android fingerprint to your\napp and allowing you to store a password securely in the device keychain.\n",
+    "description": "A cordova plugin adding the iOS TouchID / Android fingerprint to your\napp and allowing you to store a password securely in the device keychain.\n",
     "usage": "\n```typescript\nimport { KeychainTouchId } from '@awesome-cordova-plugins/keychain-touch-id/ngx';\n\n\nconstructor(private keychainTouchId: KeychainTouchId) { }\n\n...\n\n\nthis.keychainTouchId.isAvailable()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2415,7 +2415,7 @@
   {
     "packageName": "@awesome-cordova-plugins/keychain",
     "displayName": "Keychain",
-    "description": "\nGet and set data in the iOS Keychain\n\nRequires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).\n\nSee also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/) for more supported platforms.\n",
+    "description": "Get and set data in the iOS Keychain\n\nRequires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).\n\nSee also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/) for more supported platforms.\n",
     "usage": "\n```typescript\nimport { Keychain } from '@awesome-cordova-plugins/keychain/ngx';\n\nconstructor(private keychain: Keychain) { }\n\n...\n\nthis.keychain.set(key, value).then(() => {\n  this.keychain.get(key)\n    .then(value => console.log('Got value', value))\n    .catch(err => console.error('Error getting', err));\n})\n.catch(err => console.error('Error setting', err));\n```\n",
     "platforms": [
       "iOS"
@@ -2428,7 +2428,7 @@
   {
     "packageName": "@awesome-cordova-plugins/kommunicate",
     "displayName": "Kommunicate",
-    "description": "\nThe plugin for the Kommunicate SDK.\nWith the help of this plugin, you can easily add human + bot chat support functionality to you app.\nRefer to: TODO: insert site link\nFor documentation: TODO: insert link\n",
+    "description": "The plugin for the Kommunicate SDK.\nWith the help of this plugin, you can easily add human + bot chat support functionality to you app.\nRefer to: TODO: insert site link\nFor documentation: TODO: insert link\n",
     "usage": "\n```typescript\nimport { Kommunicate } from '@awesome-cordova-plugins/Kommunicate';\n\nconstructor(private kommunicate: Kommunicate) { }\n//also add [..., Kommunicate, ... ] inside the providers array, if required\n\nvar kmUser = {\n   userId : 'randomstring',\n   authenticationTypeId : 1\n};\n\nthis.kommunicate.login(kmUser)\n  .then((res: any) => console.log(\"Sucessfully logged in.\" + res))\n  .catch((error: any) => console.error(\"Error logging in.\" + error));\n\nvar conversationObject = {\n   isUnique : false\n};\n\nthis.kommunicate.conversationBuilder(converationObject)\n  .then((clientChannelKey: any) => console.log(\"Kommunicate create conversation successful the clientChannelKey is : \" + clientChannelKey))\n  .catch((error: any) => console.error(\"Error creating conversation.\" + error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2443,7 +2443,7 @@
   {
     "packageName": "@awesome-cordova-plugins/last-cam",
     "displayName": "LastCam",
-    "description": "\nLast Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a\ncustom html preview of your choice.\n",
+    "description": "Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a\ncustom html preview of your choice.\n",
     "platforms": [
       "iOS"
     ],
@@ -2455,7 +2455,7 @@
   {
     "packageName": "@awesome-cordova-plugins/launch-navigator",
     "displayName": "Launch Navigator",
-    "description": "\nRequires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).\n",
+    "description": "Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).\n",
     "usage": "\nPlease refer to the plugin's repo for detailed usage. This docs page only explains the Native wrapper.\n\n```typescript\nimport { LaunchNavigator, LaunchNavigatorOptions } from '@awesome-cordova-plugins/launch-navigator/ngx';\n\nconstructor(private launchNavigator: LaunchNavigator) { }\n\n...\n\nlet options: LaunchNavigatorOptions = {\n  start: 'London, ON',\n  app: LaunchNavigator.APPS.UBER\n}\n\nthis.launchNavigator.navigate('Toronto, ON', options)\n  .then(\n    success => console.log('Launched navigator'),\n    error => console.log('Error launching navigator', error)\n  );\n```",
     "platforms": [
       "Android",
@@ -2471,7 +2471,7 @@
   {
     "packageName": "@awesome-cordova-plugins/launch-review",
     "displayName": "Launch Review",
-    "description": "\n\nAssists in leaving user reviews/ratings in the App Stores.\n- Launches the platform's App Store page for the current app in order for the user to leave a review.\n- On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.\n",
+    "description": "Assists in leaving user reviews/ratings in the App Stores.\n\n- Launches the platform's App Store page for the current app in order for the user to leave a review.\n- On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.\n",
     "usage": "\n```typescript\nimport { LaunchReview } from '@awesome-cordova-plugins/launch-review/ngx';\n\nconstructor(private launchReview: LaunchReview) { }\n\n...\n\nthis.launchReview.launch()\n  .then(() => console.log('Successfully launched store app'));\n\nif(this.launchReview.isRatingSupported()){\n  this.launchReview.rating()\n    .then(() => console.log('Successfully launched rating dialog'));\n}\n```\n",
     "platforms": [
       "Android",
@@ -2485,7 +2485,7 @@
   {
     "packageName": "@awesome-cordova-plugins/line-login",
     "displayName": "Line Login",
-    "description": "\nThe function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.\n",
+    "description": "The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.\n",
     "usage": "\n```typescript\nimport { LineLogin } from '@awesome-cordova-plugins/line-login/ngx';\n\n\nconstructor(private lineLogin: LineLogin) { }\n\n...\n\n\nthis.lineLogin.initialize({ channel_id: \"xxxxxxxxxx\" })\n\nthis.lineLogin.login()\n  .then(result => console.log(result))\n  .catch(error => console.log(error))\n\n```\n",
     "platforms": [
       "Android",
@@ -2502,7 +2502,7 @@
   {
     "packageName": "@awesome-cordova-plugins/local-backup",
     "displayName": "LocalBackup",
-    "description": "\nThis plugin to create local backup\n",
+    "description": "This plugin to create local backup\n",
     "usage": "\n```typescript\nimport { LocalBackup } from '@awesome-cordova-plugins/local-backup/ngx';\n\n\nconstructor(private localBackup: LocalBackup) { }\n\n...\n\n\nthis.localBackup.create({data: {key: 'value'}})\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2516,7 +2516,7 @@
   {
     "packageName": "@awesome-cordova-plugins/local-notifications",
     "displayName": "Local Notifications",
-    "description": "\nThis plugin allows you to display local notifications on the device\n",
+    "description": "This plugin allows you to display local notifications on the device\n",
     "usage": "\n```typescript\nimport { LocalNotifications } from '@awesome-cordova-plugins/local-notifications/ngx';\n\n\nconstructor(private localNotifications: LocalNotifications) { }\n\n...\n\n\n// Schedule a single notification\nthis.localNotifications.schedule({\n  id: 1,\n  text: 'Single ILocalNotification',\n  sound: isAndroid? 'file://sound.mp3': 'file://beep.caf',\n  data: { secret: key }\n});\n\n\n// Schedule multiple notifications\nthis.localNotifications.schedule([{\n   id: 1,\n   text: 'Multi ILocalNotification 1',\n   sound: isAndroid ? 'file://sound.mp3': 'file://beep.caf',\n   data: { secret:key }\n  },{\n   id: 2,\n   title: 'Local ILocalNotification Example',\n   text: 'Multi ILocalNotification 2',\n   icon: 'http://example.com/icon.png'\n}]);\n\n\n// Schedule delayed notification\nthis.localNotifications.schedule({\n   text: 'Delayed ILocalNotification',\n   trigger: {at: new Date(new Date().getTime() + 3600)},\n   led: 'FF0000',\n   sound: null\n});\n```",
     "platforms": [
       "Android",
@@ -2531,7 +2531,7 @@
   {
     "packageName": "@awesome-cordova-plugins/location-accuracy",
     "displayName": "Location Accuracy",
-    "description": "\nThis Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.\n",
+    "description": "This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.\n",
     "usage": "\n```typescript\nimport { LocationAccuracy } from '@awesome-cordova-plugins/location-accuracy/ngx';\n\nconstructor(private locationAccuracy: LocationAccuracy) { }\n\n...\n\nthis.locationAccuracy.canRequest().then((canRequest: boolean) => {\n\n  if(canRequest) {\n    // the accuracy option will be ignored by iOS\n    this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(\n      () => console.log('Request successful'),\n      error => console.log('Error requesting location permissions', error)\n    );\n  }\n\n});\n\n```\n",
     "platforms": [
       "Android",
@@ -2545,7 +2545,7 @@
   {
     "packageName": "@awesome-cordova-plugins/lottie-splash-screen",
     "displayName": "Lottie Splash Screen",
-    "description": "\nCordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper\n",
+    "description": "Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper\n",
     "usage": "\n```typescript\nimport { LottieSplashScreen } from '@awesome-cordova-plugins/lottie-splash-screen/ngx';\n\n\nconstructor(private lottieSplashScreen: LottieSplashScreen) { }\n\n...\n\n\nthis.lottieSplashScreen.show('www/lottie/animation.json', false, 1024, 768)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2560,7 +2560,7 @@
   {
     "packageName": "@awesome-cordova-plugins/luxand",
     "displayName": "Luxand",
-    "description": "\nThis plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.\n",
+    "description": "This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.\n",
     "usage": "\n```typescript\nimport { Luxand } from '@awesome-cordova-plugins/luxand';\n\n\nconstructor(private luxand: Luxand) { }\n\n...\n\n//init Luxand  Face SDK\n\nthis.luxand.init({\n licence: \"\",\n dbname: \"data.dat\",\n loginTryCount: 3\n})\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n// register a face\nthis.luxand.register({\n timeout: 20000//20 seconds\n})\n.then(r=>{\n console.log(\"Your FACE ID:\", r.id);\n console.log(\"Your AGE:\", r.extra.AGE);\n console.log(\"Your GENDER:\", r.extra.GENDER);\n console.log(\"SIMILING:\", r.extra.SMILE>35? \"YES\": \"NO\");\n console.log(\"EYE OPENED:\", r.extra.EYESOPENED>45? \"YES\": \"NO\");\n})\n.catch(err=>{\n if(err.messgae === \"Already registered\") {\n   //extra data available\n   console.log(\"Your AGE:\", r.extra.AGE);\n   console.log(\"Your GENDER:\", r.extra.GENDER);\n   console.log(\"SIMILING:\", r.extra.SMILE>35? \"YES\": \"NO\");\n   console.log(\"EYE OPENED:\", r.extra.EYESOPENED>45? \"YES\": \"NO\");\n }\n})\n//to login using a face\nthis.luxand.login({\ntimeout: 20000\n}).then(r=>console.log(r))\n.catch(err=>console.log(err));\n\n```",
     "platforms": [
       "Android",
@@ -2574,7 +2574,7 @@
   {
     "packageName": "@awesome-cordova-plugins/magnetometer",
     "displayName": "Device eMagnetometer",
-    "description": "\nRequires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).\n",
+    "description": "Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).\n",
     "usage": "\n```typescript\n// DeviceOrientationCompassHeading is an interface for compass\nimport { Magnetometer, MagnetometerReading } from '@awesome-cordova-plugins/device-orientation/ngx';\n\nconstructor(private magnetometer: Magnetometer) { }\n\n...\n\n// Get the device current compass heading\nthis.deviceOrientation.getReading().then(\n  (data: MagnetometerReading) => console.log(data),\n  (error: any) => console.log(error)\n);\n\n// Watch the device compass heading change\nvar subscription = this.deviceOrientation.watchReadings().subscribe(\n  (data: MagnetometerReading) => console.log(data)\n);\n\n// Stop watching heading change\nsubscription.unsubscribe();\n```",
     "platforms": [
       "Android",
@@ -2588,7 +2588,7 @@
   {
     "packageName": "@awesome-cordova-plugins/market",
     "displayName": "Market",
-    "description": "\nOpens an app's page in the market place (Google Play, App Store)\n",
+    "description": "Opens an app's page in the market place (Google Play, App Store)\n",
     "usage": "\n```typescript\nimport { Market } from '@awesome-cordova-plugins/market/ngx';\n\nconstructor(private market: Market) { }\n\n...\n\nthis.market.open('your.package.name');\n\n```\n",
     "platforms": [
       "Android",
@@ -2602,7 +2602,7 @@
   {
     "packageName": "@awesome-cordova-plugins/media-capture",
     "displayName": "Media Capture",
-    "description": "\nThis plugin provides access to the device's audio, image, and video capture capabilities.\n\nRequires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).\n",
+    "description": "This plugin provides access to the device's audio, image, and video capture capabilities.\n\nRequires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).\n",
     "usage": "\n```typescript\nimport { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@awesome-cordova-plugins/media-capture/ngx';\n\n\nconstructor(private mediaCapture: MediaCapture) { }\n\n...\n\n\nlet options: CaptureImageOptions = { limit: 3 }\nthis.mediaCapture.captureImage(options)\n  .then(\n    (data: MediaFile[]) => console.log(data),\n    (err: CaptureError) => console.error(err)\n  );\n\n```",
     "platforms": [
       "Android",
@@ -2619,7 +2619,7 @@
   {
     "packageName": "@awesome-cordova-plugins/media",
     "displayName": "Media",
-    "description": "\nThis plugin provides the ability to record and play back audio files on a device.\n",
+    "description": "This plugin provides the ability to record and play back audio files on a device.\n",
     "usage": "\n```typescript\nimport { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx';\n\n\nconstructor(private media: Media) { }\n\n\n...\n\n\n// Create a Media instance.  Expects path to file or url as argument\n// We can optionally pass a second argument to track the status of the media\n\nconst file: MediaObject = this.media.create('file.mp3');\n\n// to listen to plugin events:\n\nfile.onStatusUpdate.subscribe(status => console.log(status)); // fires when file status changes\n\nfile.onSuccess.subscribe(() => console.log('Action is successful'));\n\nfile.onError.subscribe(error => console.log('Error!', error));\n\n// play the file\nfile.play();\n\n// pause the file\nfile.pause();\n\n// get current playback position\nfile.getCurrentPosition().then((position) => {\n  console.log(position);\n});\n\n// get file duration\nlet duration = file.getDuration();\nconsole.log(duration);\n\n// skip to 10 seconds (expects int value in ms)\nfile.seekTo(10000);\n\n// stop playing the file\nfile.stop();\n\n// release the native audio resource\n// Platform Quirks:\n// iOS simply create a new instance and the old one will be overwritten\n// Android you must call release() to destroy instances of media when you are done\nfile.release();\n\n\n\n// Recording to a file\nconst file: MediaObject = this.media.create('path/to/file.mp3');\n\nfile.startRecord();\n\nfile.stopRecord();\n\n\n```\n\nSome hints if you are using iOS and recording doesn't work:\n1.) Try to use a absolute file path but remove beginning \"file://\".\nThen it looks like: `/var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/tmp/my_file.m4a`\nExample: `this.media.create(this.file.tempDirectory.replace(/^file:\\/\\//, '') + 'my_file.m4a')`\n2.) If that's not working, too, create the file before using.\nExample:\n```typescript\nimport { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx';\nimport { File } from '@awesome-cordova-plugins/file/ngx';\n\n...\n\nconstructor(private media: Media, private file: File) { }\n\n...\n\nthis.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => {\n  let file = this.media.create(this.file.tempDirectory.replace(/^file:\\/\\//, '') + 'my_file.m4a');\n  file.startRecord();\n  window.setTimeout(() => file.stopRecord(), 10000);\n});\n```\n\nYou can find the reasons here: https://github.com/ionic-team/ionic-native/issues/1452#issuecomment-299605906",
     "platforms": [
       "Android",
@@ -2636,7 +2636,7 @@
   {
     "packageName": "@awesome-cordova-plugins/metrix",
     "displayName": "Metrix",
-    "description": "\nThis is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.\n\nRequires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)\n",
+    "description": "This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.\n\nRequires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)\n",
     "usage": "\n```typescript\n import { Metrix, MetrixConfig } from '@awesome-cordova-plugins/metrix';\n\n constructor(private metrix: Metrix) { }\n\n ...\n\n const config = new MetrixConfig('APP-ID-HERE');\n // Set other config properties.\n metrix.create(config);\n\n```",
     "platforms": [
       "Android"
@@ -2649,7 +2649,7 @@
   {
     "packageName": "@awesome-cordova-plugins/mixpanel",
     "displayName": "Mixpanel",
-    "description": "\nCordova Plugin that wraps Mixpanel SDK for Android and iOS\n",
+    "description": "Cordova Plugin that wraps Mixpanel SDK for Android and iOS\n",
     "usage": "\n```typescript\nimport { Mixpanel } from '@awesome-cordova-plugins/mixpanel/ngx';\n\nconstructor(private mixpanel: Mixpanel, private mixpanelPeople: MixpanelPeople) { }\n\n...\n\nthis.mixpanel.init(token)\n  .then(onSuccess)\n  .catch(onError);\n\n```",
     "platforms": [
       "Android",
@@ -2664,7 +2664,7 @@
   {
     "packageName": "@awesome-cordova-plugins/mlkit-translate",
     "displayName": "MLKitTranslate",
-    "description": "\nPlugin that implements MLKit Translation and Language Identification features.\n",
+    "description": "Plugin that implements MLKit Translation and Language Identification features.\n",
     "usage": "\n```typescript\nimport { MLKitTranslate } from '@awesome-cordova-plugins/ml-kit-translate';\n\n\nconstructor(private mlkitTranslate: MLKitTranslate) { }\n\n...\n\nthis.mlkitTranslate.translate('Hello', 'en', 'es')\n  .then((resultText: string) => console.log(res))\n  .catch((error: string) => console.error(error));\n\n@interfaces\nLanguageModel\n```\n",
     "platforms": [
       "Android",
@@ -2678,7 +2678,7 @@
   {
     "packageName": "@awesome-cordova-plugins/mobile-accessibility",
     "displayName": "Mobile Accessibility",
-    "description": "\nThis plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.\nIt also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.\n",
+    "description": "This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.\nIt also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.\n",
     "usage": "\n```typescript\nimport { MobileAccessibility } from '@awesome-cordova-plugins/mobile-accessibility/ngx';\n\n\nconstructor(private mobileAccessibility: MobileAccessibility) { }\n\n...\n\nif(this.mobileAccessibility.isScreenReaderRunningCallback();\n\n```\n",
     "platforms": [
       "Android Fire OS",
@@ -2694,7 +2694,7 @@
   {
     "packageName": "@awesome-cordova-plugins/mobile-messaging",
     "displayName": "Mobile Messaging",
-    "description": "\nMobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.\nIn almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).\nThis document describes library integration steps for your Cordova project.\n\nFor more info see [Cordova plugin docs](https://github.com/infobip/mobile-messaging-cordova-plugin)\n",
+    "description": "Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.\nIn almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).\nThis document describes library integration steps for your Cordova project.\n\nFor more info see [Cordova plugin docs](https://github.com/infobip/mobile-messaging-cordova-plugin)\n",
     "usage": "\n```typescript\nimport { MobileMessaging } from '@awesome-cordova-plugins/mobile-messaging/ngx';\n\n\nconstructor(private mobileMessaging: MobileMessaging) { }\n\n...\n\n\n this.mobileMessaging.init({\n   applicationCode: '<your_application_code>',\n   geofencingEnabled: '<true/false>',\n   defaultMessageStorage: '<true/false>',\n   ios: {\n     notificationTypes: ['alert', 'badge', 'sound']\n   },\n   android: {\n     notificationIcon: <String; a resource name for a status bar icon (without extension), located in '/platforms/android/app/src/main/res/mipmap'>,\n     multipleNotifications: <Boolean; set to 'true' to enable multiple notifications>,\n     notificationAccentColor: <String; set to hex color value in format '#RRGGBB' or '#AARRGGBB'>\n    }}, (err) => {\n     ...\n   });\n\n this.mobileMessaging.register('messageReceived').subscribe((message: Message) => {\n   ...\n });\n\n```\n",
     "platforms": [
       "Android",
@@ -2708,7 +2708,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ms-adal",
     "displayName": "MS ADAL",
-    "description": "\nActive Directory Authentication Library (ADAL) plugin.\nActive Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))\nplugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of\nWindows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.",
+    "description": "Active Directory Authentication Library (ADAL) plugin.\nActive Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))\nplugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of\nWindows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.\n",
     "usage": "\n```typescript\nimport { MSAdal, AuthenticationContext, AuthenticationResult } from '@awesome-cordova-plugins/ms-adal/ngx';\n\n\nconstructor(private msAdal: MSAdal) {}\n\n...\n\nlet authContext: AuthenticationContext = this.msAdal.createAuthenticationContext('https://login.windows.net/common');\n\nauthContext.acquireTokenAsync('https://graph.windows.net', 'a5d92493-ae5a-4a9f-bcbf-9f1d354067d3', 'http://MyDirectorySearcherApp')\n  .then((authResponse: AuthenticationResult) => {\n    console.log('Token is' , authResponse.accessToken);\n    console.log('Token will expire on', authResponse.expiresOn);\n  })\n  .catch((e: any) => console.log('Authentication failed', e));\n\n\n```\n",
     "platforms": [
       "Android",
@@ -2723,7 +2723,7 @@
   {
     "packageName": "@awesome-cordova-plugins/multiple-document-picker",
     "displayName": "Multiple Documents Picker",
-    "description": "\nThis plugin allows users to pick multiple documents/images at once\n",
+    "description": "This plugin allows users to pick multiple documents/images at once\n",
     "usage": "\n```typescript\nimport { MultipleDocumentsPicker } from '@awesome-cordova-plugins/multiple-document-picker/ngx';\n\n\nconstructor(private multipleDocumentsPicker: MultipleDocumentsPicker) { }\n\n...\n\n\nthis.multipleDocumentsPicker.pick(1)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2737,7 +2737,7 @@
   {
     "packageName": "@awesome-cordova-plugins/music-controls",
     "displayName": "Music Controls",
-    "description": "\nMusic controls for Cordova applications.\nDisplay a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.\nHandle also headset event (plug, unplug, headset button).\n",
+    "description": "Music controls for Cordova applications.\nDisplay a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.\nHandle also headset event (plug, unplug, headset button).\n",
     "usage": "\n```typescript\nimport { MusicControls } from '@awesome-cordova-plugins/music-controls/ngx';\n\nconstructor(private musicControls: MusicControls) { }\n\n...\n\nthis.musicControls.create({\n  track       : 'Time is Running Out',        // optional, default : ''\n  artist      : 'Muse',                       // optional, default : ''\n  cover       : 'albums/absolution.jpg',      // optional, default : nothing\n  // cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app)\n  //           or a remote url ('http://...', 'https://...', 'ftp://...')\n  isPlaying   : true,                         // optional, default : true\n  dismissable : true,                         // optional, default : false\n\n  // hide previous/next/close buttons:\n  hasPrev   : false,      // show previous button, optional, default: true\n  hasNext   : false,      // show next button, optional, default: true\n  hasClose  : true,       // show close button, optional, default: false\n\n// iOS only, optional\n  album       : 'Absolution',     // optional, default: ''\n  duration : 60, // optional, default: 0\n  elapsed : 10, // optional, default: 0\n  hasSkipForward : true,  // show skip forward button, optional, default: false\n  hasSkipBackward : true, // show skip backward button, optional, default: false\n  skipForwardInterval: 15, // display number for skip forward, optional, default: 0\n  skipBackwardInterval: 15, // display number for skip backward, optional, default: 0\n  hasScrubbing: false, // enable scrubbing from control center and lockscreen progress bar, optional\n\n  // Android only, optional\n  // text displayed in the status bar when the notification (and the ticker) are updated, optional\n  ticker    : 'Now playing \"Time is Running Out\"',\n  // All icons default to their built-in android equivalents\n  playIcon: 'media_play',\n  pauseIcon: 'media_pause',\n  prevIcon: 'media_prev',\n  nextIcon: 'media_next',\n  closeIcon: 'media_close',\n  notificationIcon: 'notification'\n });\n\n this.musicControls.subscribe().subscribe(action => {\n\n   function events(action) {\n     const message = JSON.parse(action).message;\n     \tswitch(message) {\n     \t\tcase 'music-controls-next':\n     \t\t\t// Do something\n     \t\t\tbreak;\n     \t\tcase 'music-controls-previous':\n     \t\t\t// Do something\n     \t\t\tbreak;\n     \t\tcase 'music-controls-pause':\n     \t\t\t// Do something\n     \t\t\tbreak;\n     \t\tcase 'music-controls-play':\n     \t\t\t// Do something\n     \t\t\tbreak;\n     \t\tcase 'music-controls-destroy':\n     \t\t\t// Do something\n     \t\t\tbreak;\n\n         // External controls (iOS only)\n         case 'music-controls-toggle-play-pause' :\n     \t\t\t// Do something\n     \t\t\tbreak;\n         case 'music-controls-seek-to':\n           const seekToInSeconds = JSON.parse(action).position;\n           this.musicControls.updateElapsed({\n             elapsed: seekToInSeconds,\n             isPlaying: true\n           });\n           // Do something\n           break;\n         case 'music-controls-skip-forward':\n           // Do something\n           break;\n         case 'music-controls-skip-backward':\n           // Do something\n           break;\n\n     \t\t// Headset events (Android only)\n     \t\t// All media button events are listed below\n     \t\tcase 'music-controls-media-button' :\n     \t\t\t// Do something\n     \t\t\tbreak;\n     \t\tcase 'music-controls-headset-unplugged':\n     \t\t\t// Do something\n     \t\t\tbreak;\n     \t\tcase 'music-controls-headset-plugged':\n     \t\t\t// Do something\n     \t\t\tbreak;\n     \t\tdefault:\n     \t\t\tbreak;\n     \t}\n     }\n    });\n\n this.musicControls.listen(); // activates the observable above\n\n this.musicControls.updateIsPlaying(true);\n\n\n```",
     "platforms": [
       "Android",
@@ -2753,7 +2753,7 @@
   {
     "packageName": "@awesome-cordova-plugins/native-audio",
     "displayName": "Native Audio",
-    "description": "Native Audio Playback",
+    "description": "Native Audio Playback\n",
     "usage": "\n```typescript\nimport { NativeAudio } from '@awesome-cordova-plugins/native-audio/ngx';\n\nconstructor(private nativeAudio: NativeAudio) { }\n\n...\n\nthis.nativeAudio.preloadSimple('uniqueId1', 'path/to/file.mp3').then(onSuccess, onError);\nthis.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);\n\nthis.nativeAudio.play('uniqueId1').then(onSuccess, onError);\n\n// can optionally pass a callback to be called when the file is done playing\nthis.nativeAudio.play('uniqueId1', () => console.log('uniqueId1 is done playing'));\n\nthis.nativeAudio.loop('uniqueId2').then(onSuccess, onError);\n\nthis.nativeAudio.setVolumeForComplexAsset('uniqueId2', 0.6).then(onSuccess,onError);\n\nthis.nativeAudio.stop('uniqueId1').then(onSuccess,onError);\n\nthis.nativeAudio.unload('uniqueId1').then(onSuccess,onError);\n\n```\n",
     "platforms": [
       "Android",
@@ -2768,7 +2768,7 @@
   {
     "packageName": "@awesome-cordova-plugins/native-geocoder",
     "displayName": "Native Geocoder",
-    "description": "\nCordova plugin for native forward and reverse geocoding\n",
+    "description": "Cordova plugin for native forward and reverse geocoding\n",
     "usage": "\n```typescript\nimport { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@awesome-cordova-plugins/native-geocoder/ngx';\n\nconstructor(private nativeGeocoder: NativeGeocoder) { }\n\n...\n\nlet options: NativeGeocoderOptions = {\n    useLocale: true,\n    maxResults: 5\n};\n\nthis.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818, options)\n  .then((result: NativeGeocoderResult[]) => console.log(JSON.stringify(result[0])))\n  .catch((error: any) => console.log(error));\n\nthis.nativeGeocoder.forwardGeocode('Berlin', options)\n  .then((result: NativeGeocoderResult[]) => console.log('The coordinates are latitude=' + result[0].latitude + ' and longitude=' + result[0].longitude))\n  .catch((error: any) => console.log(error));\n```",
     "platforms": [
       "iOS",
@@ -2782,7 +2782,7 @@
   {
     "packageName": "@awesome-cordova-plugins/native-keyboard",
     "displayName": "Native Keyboard",
-    "description": "\nA cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.\n\n",
+    "description": "A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.\n",
     "usage": "\n```\nimport { NativeKeyboard } from '@awesome-cordova-plugins/native-keyboard/ngx';\n\n\nconstructor(private nativeKeyboard: NativeKeyboard) { }\n\n...\n\n\n```",
     "platforms": [
       "Android",
@@ -2796,7 +2796,7 @@
   {
     "packageName": "@awesome-cordova-plugins/native-page-transitions",
     "displayName": "Native Page Transitions",
-    "description": "\nThe Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.\n",
+    "description": "The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.\n",
     "usage": "\n```typescript\nimport { NativePageTransitions, NativeTransitionOptions } from '@awesome-cordova-plugins/native-page-transitions/ngx';\n\nconstructor(private nativePageTransitions: NativePageTransitions) { }\n\n...\n\n\n// example of adding a transition when a page/modal closes\nionViewWillLeave() {\n\n let options: NativeTransitionOptions = {\n    direction: 'up',\n    duration: 500,\n    slowdownfactor: 3,\n    slidePixels: 20,\n    iosdelay: 100,\n    androiddelay: 150,\n    fixedPixelsTop: 0,\n    fixedPixelsBottom: 60\n   }\n\n this.nativePageTransitions.slide(options)\n   .then(onSuccess)\n   .catch(onError);\n\n}\n\n\n// example of adding a transition when pushing a new page\nopenPage(page: any) {\n\n  this.nativePageTransitions.slide(options);\n  this.navCtrl.push(page);\n\n}\n\n```\n",
     "platforms": [
       "Android",
@@ -2811,7 +2811,7 @@
   {
     "packageName": "@awesome-cordova-plugins/native-ringtones",
     "displayName": "Native Ringtones",
-    "description": "\nThe plugin helps get the native ringtones list on Android or IOS devices.\nAnd you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).\n",
+    "description": "The plugin helps get the native ringtones list on Android or IOS devices.\nAnd you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).\n",
     "usage": "\n```\nimport { NativeRingtones } from '@awesome-cordova-plugins/native-ringtones/ngx';\n\n\nconstructor(private ringtones: NativeRingtones) { }\n\n...\nthis.ringtones.getRingtone().then((ringtones) => { console.log(ringtones); });\n\nthis.ringtones.playRingtone('assets/ringtones/sound_1.caf');\n\nthis.ringtones.stopRingtone('assets/ringtones/sound_1.caf');\n\n```\n",
     "platforms": [
       "Android",
@@ -2843,7 +2843,7 @@
   {
     "packageName": "@awesome-cordova-plugins/navigation-bar",
     "displayName": "Navigation Bar",
-    "description": "\nThe NavigationBar plugin allows you to hide and auto hide the android navigation bar.\n",
+    "description": "The NavigationBar plugin allows you to hide and auto hide the android navigation bar.\n",
     "usage": "\n```typescript\nimport { NavigationBar } from '@awesome-cordova-plugins/navigation-bar/ngx';\n\nconstructor(private navigationBar: NavigationBar) { }\n\n...\n\nlet autoHide: boolean = true;\nthis.navigationBar.setUp(autoHide);\n```\n",
     "platforms": [
       "Android"
@@ -2856,7 +2856,7 @@
   {
     "packageName": "@awesome-cordova-plugins/network-interface",
     "displayName": "Network Interface",
-    "description": "\nNetwork interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.\n",
+    "description": "Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.\n",
     "usage": "\n```typescript\nimport { NetworkInterface } from '@awesome-cordova-plugins/network-interface/ngx';\n\nconstructor( private networkInterface: NetworkInterface ) {\n\n  this.networkInterface.getWiFiIPAddress()\n    .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`))\n    .catch(error => console.error(`Unable to get IP: ${error}`));\n\n  this.networkInterface.getCarrierIPAddress()\n    .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`))\n    .catch(error => console.error(`Unable to get IP: ${error}`));\n\n  const url = 'www.github.com';\n  this.networkInterface.getHttpProxyInformation(url)\n    .then(proxy => console.info(`Type: ${proxy.type}, Host: ${proxy.host}, Port: ${proxy.port}`))\n    .catch(error => console.error(`Unable to get proxy info: ${error}`));\n}\n```\n",
     "platforms": [
       "Android",
@@ -2874,7 +2874,7 @@
   {
     "packageName": "@awesome-cordova-plugins/network",
     "displayName": "Network",
-    "description": "\nRequires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).\n",
+    "description": "Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).\n",
     "usage": "\n```typescript\nimport { Network } from '@awesome-cordova-plugins/network/ngx';\n\nconstructor(private network: Network) { }\n\n...\n\n// watch network for a disconnection\nlet disconnectSubscription = this.network.onDisconnect().subscribe(() => {\n  console.log('network was disconnected :-(');\n});\n\n// stop disconnect watch\ndisconnectSubscription.unsubscribe();\n\n\n// watch network for a connection\nlet connectSubscription = this.network.onConnect().subscribe(() => {\n  console.log('network connected!');\n  // We just got a connection but we need to wait briefly\n   // before we determine the connection type. Might need to wait.\n  // prior to doing any api requests as well.\n  setTimeout(() => {\n    if (this.network.type === 'wifi') {\n      console.log('we got a wifi connection, woohoo!');\n    }\n  }, 3000);\n});\n\n// stop connect watch\nconnectSubscription.unsubscribe();\n\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -2892,7 +2892,7 @@
   {
     "packageName": "@awesome-cordova-plugins/nfc",
     "displayName": "NFC",
-    "description": "\nThe NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.\n\nUse to\n- read data from NFC tags\n- write data to NFC tags\n- send data to other NFC enabled devices\n- receive data from NFC devices\n\nThis plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty between NFC devices, tag types, and operating systems.\n",
+    "description": "The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.\n\nUse to\n\n- read data from NFC tags\n- write data to NFC tags\n- send data to other NFC enabled devices\n- receive data from NFC devices\n\nThis plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty between NFC devices, tag types, and operating systems.\n",
     "usage": "\n```typescript\nimport { NFC, Ndef } from '@awesome-cordova-plugins/nfc/ngx';\n\nconstructor(private nfc: NFC, private ndef: Ndef) { }\n\n...\n\n// Read NFC Tag - Android\n// Once the reader mode is enabled, any tags that are scanned are sent to the subscriber\n let flags = this.nfc.FLAG_READER_NFC_A | this.nfc.FLAG_READER_NFC_V;\n this.readerMode$ = this.nfc.readerMode(flags).subscribe(\n     tag => console.log(JSON.stringify(tag)),\n     err => console.log('Error reading tag', err)\n );\n\n// Read NFC Tag - iOS\n// On iOS, a NFC reader session takes control from your app while scanning tags then returns a tag\ntry {\n    let tag = await this.nfc.scanNdef();\n    console.log(JSON.stringify(tag));\n } catch (err) {\n     console.log('Error reading tag', err);\n }\n\n```\n\nFor more details on NFC tag operations see https://github.com/chariotsolutions/phonegap-nfc\n",
     "platforms": [
       "Android",
@@ -2907,7 +2907,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ocr",
     "displayName": "OCR",
-    "description": "\nThis plugin attempts to identify and extract text from an image.\nPlease note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.\nDon't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`\nFor more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).",
+    "description": "This plugin attempts to identify and extract text from an image.\nPlease note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.\nDon't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`\nFor more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).\n",
     "usage": "\n```typescript\nimport { OCR, OCRSourceType } from '@awesome-cordova-plugins/ocr/ngx';\n\n\nconstructor(private ocr: OCR) { }\n\n...\n\nthis.ocr.recText(OCRSourceType.NORMFILEURL, \"file://path/to/image.png\")\n  .then((res: OCRResult) => console.log(JSON.stringify(res)))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2921,7 +2921,7 @@
   {
     "packageName": "@awesome-cordova-plugins/onesignal",
     "displayName": "OneSignal",
-    "description": "\nThe OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.\nOneSignal is a simple implementation for delivering push notifications.\n\nPlease view the official [OneSignal Ionic SDK Installation](https://documentation.onesignal.com/docs/ionic-sdk-setup) guide\nfor more information.\n\n#### Icons\nIf you want to use generated icons with command `ionic cordova resources`:\n\n1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`\n\n2. Configure the hook in your config.xml\n```\n    <platform name=\"android\">\n        <hook type=\"after_prepare\" src=\"hooks/copy_android_notification_icons.js\" />\n    </platform>\n```\n\n3. Put the following code in it:\n\n```\n#!/usr/bin/env node\n\nvar fs = require('fs');\nvar path = require('path');\n\nvar filestocopy = [{\n    \"resources/android/icon/drawable-hdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-mdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-xhdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-xxhdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-xxxhdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-xxxhdpi/ic_stat_onesignal_default.png\"\n} ];\n\nmodule.exports = function(context) {\n\n    // no need to configure below\n    var rootdir = context.opts.projectRoot;\n\n    filestocopy.forEach(function(obj) {\n        Object.keys(obj).forEach(function(key) {\n            var val = obj[key];\n            var srcfile = path.join(rootdir, key);\n            var destfile = path.join(rootdir, val);\n            console.log(\"copying \"+srcfile+\" to \"+destfile);\n            var destdir = path.dirname(destfile);\n            if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {\n                fs.createReadStream(srcfile).pipe(\n                    fs.createWriteStream(destfile));\n            }\n        });\n    });\n\n};\n```\n\n3. From the root of your project make the file executable:\n`$ chmod +x hooks/copy_android_notification_icons.js`\n\n",
+    "description": "The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.\nOneSignal is a simple implementation for delivering push notifications.\n\nPlease view the official [OneSignal Ionic SDK Installation](https://documentation.onesignal.com/docs/ionic-sdk-setup) guide\nfor more information.\n\n#### Icons\n\nIf you want to use generated icons with command `ionic cordova resources`:\n\n1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`\n\n2. Configure the hook in your config.xml\n\n```\n    <platform name=\"android\">\n        <hook type=\"after_prepare\" src=\"hooks/copy_android_notification_icons.js\" />\n    </platform>\n```\n\n3. Put the following code in it:\n\n```\n#!/usr/bin/env node\n\nvar fs = require('fs');\nvar path = require('path');\n\nvar filestocopy = [{\n    \"resources/android/icon/drawable-hdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-mdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-xhdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-xxhdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png\"\n}, {\n    \"resources/android/icon/drawable-xxxhdpi-icon.png\":\n        \"platforms/android/app/src/main/res/drawable-xxxhdpi/ic_stat_onesignal_default.png\"\n} ];\n\nmodule.exports = function(context) {\n\n    // no need to configure below\n    var rootdir = context.opts.projectRoot;\n\n    filestocopy.forEach(function(obj) {\n        Object.keys(obj).forEach(function(key) {\n            var val = obj[key];\n            var srcfile = path.join(rootdir, key);\n            var destfile = path.join(rootdir, val);\n            console.log(\"copying \"+srcfile+\" to \"+destfile);\n            var destdir = path.dirname(destfile);\n            if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {\n                fs.createReadStream(srcfile).pipe(\n                    fs.createWriteStream(destfile));\n            }\n        });\n    });\n\n};\n```\n\n3. From the root of your project make the file executable:\n   `$ chmod +x hooks/copy_android_notification_icons.js`\n",
     "usage": "\n```typescript\nimport { OneSignal } from '@awesome-cordova-plugins/onesignal/ngx';\n\nconstructor(private oneSignal: OneSignal) { }\n\n...\n\nthis.oneSignal.startInit('b2f7f966-d8cc-11e4-bed1-df8f05be55ba', '703322744261');\n\nthis.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);\n\nthis.oneSignal.handleNotificationReceived().subscribe(() => {\n // do something when notification is received\n});\n\nthis.oneSignal.handleNotificationOpened().subscribe(() => {\n  // do something when a notification is opened\n});\n\nthis.oneSignal.endInit();\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -2937,7 +2937,7 @@
   {
     "packageName": "@awesome-cordova-plugins/open-native-settings",
     "displayName": "Open Native Settings",
-    "description": "\nPlugin to open native screens of iOS/android settings",
+    "description": "Plugin to open native screens of iOS/android settings\n",
     "usage": "\nYou can open any of these settings:\n```\n \"about\", // ios\n \"accessibility\", // ios, android\n \"account\", // ios, android\n \"airplane_mode\", // ios, android\n \"apn\", // android\n \"application_details\", // ios, android\n \"application_development\", // android\n \"application\", // android\n \"autolock\", // ios\n \"battery_optimization\", // android\n \"bluetooth\", // ios, android\n \"castle\", // ios\n \"captioning\", // android\n \"cast\", // android\n \"cellular_usage\", // ios\n \"configuration_list\", // ios\n \"data_roaming\", // android\n \"date\", // ios, android\n \"display\", // ios, android\n \"dream\", // android\n \"facetime\", // ios\n \"home\", // android\n \"keyboard\", // ios, android\n \"keyboard_subtype\", // android\n \"locale\", // ios, android\n\"location\", // ios, android\n\"locations\", // ios\n\"manage_all_applications\", // android\n\"manage_applications\", // android\n\"memory_card\", // android\n\"music\", // ios\n\"music_equalizer\", // ios\n\"music_volume\", // ios\n\"network\", // ios, android\n\"nike_ipod\", // ios\n\"nfcsharing\", // android\n\"nfc_payment\", // android\n\"nfc_settings\", // android\n\"notes\", // ios\n\"notification_id\", // ios\n\"passbook\", // ios\n\"phone\", // ios\n\"photos\", // ios\n\"print\", // android\n\"privacy\", // android\n\"quick_launch\", // android\n\"reset\", // ios\n\"ringtone\", // ios\n\"browser\", // ios\n\"search\", // ios, android\n\"security\", // android\n\"settings\", // ios, android\n\"show_regulatory_info\",\n\"sound\", // ios, android\n\"software_update\", // ios\n\"storage\", // ios, android\n\"store\", // ios, android\n\"sync\", // android\n\"tethering\", // ios\n\"twitter\", // ios\n\"touch\", // ios\n\"usage\", // ios, android\n\"user_dictionary\", // android\n\"video\", // ios\n\"voice_input\", // android\n\"vpn\", // ios\n\"wallpaper\", // ios\n\"wifi_ip\", // android\n\"wifi\", // ios, android\n\"wireless\" // android\n ```\n```typescript\nimport { OpenNativeSettings } from '@awesome-cordova-plugins/open-native-settings/ngx';\n\n\nconstructor(private openNativeSettings: OpenNativeSettings) { }\n\n...\n\n\n```\n",
     "platforms": [
       "Android",
@@ -2951,7 +2951,7 @@
   {
     "packageName": "@awesome-cordova-plugins/openalpr",
     "displayName": "OpenALPR",
-    "description": "\nThis Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.\n",
+    "description": "This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.\n",
     "usage": "\n```typescript\nimport { OpenALPR, OpenALPROptions, OpenALPRResult } from '@awesome-cordova-plugins/openalpr/ngx';\n\n\nconstructor(private openALPR: OpenALPR) { }\n\nconst scanOptions: OpenALPROptions = {\n   country: this.openALPR.Country.EU,\n   amount: 3\n}\n\n// To get imageData, you can use the @awesome-cordova-plugins/camera module for example. It works with DestinationType.FILE_URI and DATA_URL\n\nthis.openALPR.scan(imageData, scanOptions)\n  .then((res: [OpenALPRResult]) => console.log(res))\n  .catch((error: Error) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2965,7 +2965,7 @@
   {
     "packageName": "@awesome-cordova-plugins/paypal",
     "displayName": "PayPal",
-    "description": "\nPayPal plugin for Cordova/Ionic Applications\n",
+    "description": "PayPal plugin for Cordova/Ionic Applications\n",
     "usage": "\n```typescript\nimport { PayPal, PayPalPayment, PayPalConfiguration } from '@awesome-cordova-plugins/paypal/ngx';\n\nconstructor(private payPal: PayPal) { }\n\n...\n\n\nthis.payPal.init({\n  PayPalEnvironmentProduction: 'YOUR_PRODUCTION_CLIENT_ID',\n  PayPalEnvironmentSandbox: 'YOUR_SANDBOX_CLIENT_ID'\n}).then(() => {\n  // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction\n  this.payPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({\n    // Only needed if you get an \"Internal Service Error\" after PayPal login!\n    //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal\n  })).then(() => {\n    let payment = new PayPalPayment('3.33', 'USD', 'Description', 'sale');\n    this.payPal.renderSinglePaymentUI(payment).then(() => {\n      // Successfully paid\n\n      // Example sandbox response\n      //\n      // {\n      //   \"client\": {\n      //     \"environment\": \"sandbox\",\n      //     \"product_name\": \"PayPal iOS SDK\",\n      //     \"paypal_sdk_version\": \"2.16.0\",\n      //     \"platform\": \"iOS\"\n      //   },\n      //   \"response_type\": \"payment\",\n      //   \"response\": {\n      //     \"id\": \"PAY-1AB23456CD789012EF34GHIJ\",\n      //     \"state\": \"approved\",\n      //     \"create_time\": \"2016-10-03T13:33:33Z\",\n      //     \"intent\": \"sale\"\n      //   }\n      // }\n    }, () => {\n      // Error or render dialog closed without being successful\n    });\n  }, () => {\n    // Error in configuration\n  });\n}, () => {\n  // Error in initialization, maybe PayPal isn't supported or something else\n});\n```",
     "platforms": [
       "Android",
@@ -2979,7 +2979,7 @@
   {
     "packageName": "@awesome-cordova-plugins/paytabs",
     "displayName": "PayTabs",
-    "description": "\nA plugin that allows you to use PayTabs's Native SDKs for Android and iOS.\n",
+    "description": "A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.\n",
     "usage": "\n```typescript\nimport { PayTabs } from '@awesome-cordova-plugins/paytabs/ngx';\n\nconstructor(private paytabs: PayTabs) { }\n\n...\nlet billingDetails: PaymentSDKBillingDetails = {\n   name: \"John Smith\",\n   email: \"email@domain.com\",\n   phone: \"+201111111111\",\n   addressLine: \"Address line\",\n   city: \"Dubai\",\n   state: \"Dubai\",\n   countryCode: \"AE\",\n   zip: \"1234\"\n };\n\nvar configuration: PaymentSDKConfiguration = {\n   profileID: \"*profile id*\",\n   serverKey: \"*server key*\",\n   clientKey: \"*cleint key*\",\n   cartID: \"12345\",\n   currency: \"USD\",\n   cartDescription: \"Flowers\",\n   merchantCountryCode: \"ae\",\n   merchantName: \"Flowers Store\",\n   amount: 20,\n   screenTitle:\"Pay with Card\",\n   billingDetails: billingDetails\n }\n\nthis.paytabs.startCardPayment(configuration)\n               .then(result => console.log(result))\n               .catch(error => console.error(error));\n\nthis.paytabs.startApplePayPayment(configuration)\n               .then(result => console.log(result))\n               .catch(error => console.error(error));\n\nthis.paytabs.startAlternativePaymentMethod(configuration)\n               .then(result => console.log(result))\n               .catch(error => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -2993,7 +2993,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pdf-generator",
     "displayName": "PDFGenerator",
-    "description": "\nSimple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.\n",
+    "description": "Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.\n",
     "usage": "\n```typescript\nimport { PDFGenerator } from '@awesome-cordova-plugins/pdf-generator';\n\nconstructor(private pdfGenerator: PDFGenerator) { }\n\n...\n\nthis.pdfGenerator.fromURL(url, options).then(base64String => console.log(base64String));\n\n```\n",
     "platforms": [
       "Android",
@@ -3007,7 +3007,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pedometer",
     "displayName": "Pedometer",
-    "description": "\nFetch pedestrian-related pedometer data,\nsuch as step counts and other information about the distance travelled.\n",
+    "description": "Fetch pedestrian-related pedometer data,\nsuch as step counts and other information about the distance travelled.\n",
     "usage": "\n```typescript\nimport { Pedometer } from '@awesome-cordova-plugins/pedometer/ngx';\n\nPedometer.isDistanceAvailable()\n  .then((available: boolean) => console.log(available))\n  .catch((error: any) => console.log(error));\n\nPedometer.startPedometerUpdates()\n   .subscribe((data: IPedometerData) => {\n     console.log(data);\n   });\n```\n",
     "platforms": [
       "Android",
@@ -3021,7 +3021,7 @@
   {
     "packageName": "@awesome-cordova-plugins/phonegap-local-notification",
     "displayName": "Phonegap Local Notification",
-    "description": "\nThe Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.\nThe API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/\n",
+    "description": "The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.\nThe API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/\n",
     "usage": "\n```\nimport { PhonegapLocalNotification } from '@awesome-cordova-plugins/phonegap-local-notification/ngx';\n\n\nconstructor(private localNotification: PhonegapLocalNotification) { }\n\n...\n\nthis.localNotification.requestPermission().then(\n  (permission) => {\n    if (permission === 'granted') {\n\n      // Create the notification\n      this.localNotification.create('My Title', {\n        tag: 'message1',\n        body: 'My body',\n        icon: 'assets/icon/favicon.ico'\n      });\n\n    }\n  }\n);\n\n```\n",
     "platforms": [
       "Android",
@@ -3037,7 +3037,7 @@
   {
     "packageName": "@awesome-cordova-plugins/photo-library",
     "displayName": "Photo Library",
-    "description": "\nThe PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.\nSaving photos and videos to the library is also supported.\ncdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.\n",
+    "description": "The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.\nSaving photos and videos to the library is also supported.\ncdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.\n",
     "usage": "\n```typescript\nimport { PhotoLibrary } from '@awesome-cordova-plugins/photo-library/ngx';\n\nconstructor(private photoLibrary: PhotoLibrary) { }\n\nthis.photoLibrary.requestAuthorization().then(() => {\n  this.photoLibrary.getLibrary().subscribe({\n    next: library => {\n      library.forEach(function(libraryItem) {\n        console.log(libraryItem.id);          // ID of the photo\n        console.log(libraryItem.photoURL);    // Cross-platform access to photo\n        console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail\n        console.log(libraryItem.fileName);\n        console.log(libraryItem.width);\n        console.log(libraryItem.height);\n        console.log(libraryItem.creationDate);\n        console.log(libraryItem.latitude);\n        console.log(libraryItem.longitude);\n        console.log(libraryItem.albumIds);    // array of ids of appropriate AlbumItem, only of includeAlbumsData was used\n      });\n    },\n    error: err => { console.log('could not get photos'); },\n    complete: () => { console.log('done getting photos'); }\n  });\n})\n.catch(err => console.log('permissions weren\\'t granted'));\n\n```\n",
     "platforms": [
       "Android",
@@ -3055,7 +3055,7 @@
   {
     "packageName": "@awesome-cordova-plugins/photo-viewer",
     "displayName": "Photo Viewer",
-    "description": "This plugin can display your image in full screen with the ability to pan, zoom, and share the image.",
+    "description": "This plugin can display your image in full screen with the ability to pan, zoom, and share the image.\n",
     "usage": "\n```typescript\nimport { PhotoViewer } from '@awesome-cordova-plugins/photo-viewer/ngx';\n\nconstructor(private photoViewer: PhotoViewer) { }\n\n...\n\nthis.photoViewer.show('https://mysite.com/path/to/image.jpg');\n\nthis.photoViewer.show('https://mysite.com/path/to/image.jpg', 'My image title', {share: false});\n\nthis.photoViewer.show('https://mysecuresite.com/path/to/image.jpg', 'My image title', {share: false, headers: '{username:foo,password:bar}'});\n```\n",
     "platforms": [
       "Android",
@@ -3069,7 +3069,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pin-check",
     "displayName": "Pin Check",
-    "description": "\nThis plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.\n\nRequires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).\n",
+    "description": "This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.\n\nRequires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).\n",
     "usage": "\n```typescript\nimport { PinCheck } from '@awesome-cordova-plugins/pin-check/ngx';\nimport { Platform } from 'ionic-angular';\n\nconstructor(private pinCheck: PinCheck, private platform: Platform) { }\n\n...\n\nthis.pinCheck.isPinSetup()\n  .then(\n    (success: string) =>  console.log(\"pin is setup.\");,\n    (error: string) => console.log(\"pin not setup.\");\n  );\n```\n",
     "platforms": [
       "Android",
@@ -3083,7 +3083,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pin-dialog",
     "displayName": "Pin Dialog",
-    "description": "\nPhoneGap numeric password dialog plugin for Android and iOS.\n\nRequires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).\n\n\n",
+    "description": "PhoneGap numeric password dialog plugin for Android and iOS.\n\nRequires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).\n",
     "usage": "\n```typescript\nimport { PinDialog } from '@awesome-cordova-plugins/pin-dialog/ngx';\n\n\nconstructor(private pinDialog: PinDialog) { }\n\n...\n\nthis.pinDialog.prompt('Enter your PIN', 'Verify PIN', ['OK', 'Cancel'])\n  .then(\n    (result: any) => {\n      if (result.buttonIndex == 1) console.log('User clicked OK, value is: ', result.input1);\n      else if(result.buttonIndex == 2) console.log('User cancelled');\n    }\n  );\n```\n",
     "platforms": [
       "Android",
@@ -3097,7 +3097,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pinterest",
     "displayName": "Pinterest",
-    "description": "\nCordova plugin for Pinterest\n",
+    "description": "Cordova plugin for Pinterest\n",
     "usage": "\n```typescript\nimport { Pinterest, PinterestUser, PinterestPin, PinterestBoard } from '@awesome-cordova-plugins/pinterest/ngx';\n\nconstructor(private pinterest: Pinterest) { }\n\n...\n\nconst scopes = [\n  this.pinterest.SCOPES.READ_PUBLIC,\n  this.pinterest.SCOPES.WRITE_PUBLIC,\n  this.pinterest.SCOPES.READ_RELATIONSHIPS,\n  this.pinterest.SCOPES.WRITE_RELATIONSHIPS\n];\n\nthis.pinterest.login(scopes)\n  .then(res => console.log('Logged in!', res))\n  .catch(err => console.error('Error loggin in', err));\n\nthis.pinterest.getMyPins()\n  .then((pins: PinterestPin[]) => console.log(pins))\n  .catch(err => console.error(err));\n\nthis.pinterest.getMe()\n  .then((user: PinterestUser) => console.log(user));\n\nthis.pinterest.getMyBoards()\n  .then((boards: PinterestBoard[]) => console.log(boards));\n\n```",
     "platforms": [
       "Android",
@@ -3114,7 +3114,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pollfish",
     "displayName": "Pollfish",
-    "description": "\nPollfish Ionic Native plugin wrapper\n",
+    "description": "Pollfish Ionic Native plugin wrapper\n",
     "usage": "\n```typescript\nimport { Pollfish } from '@awesome-cordova-plugins/pollfish/ngx';\n\n\nconstructor(private pollfish: Pollfish) { }\n\n...\n\nthis.pollfish.init(false, false, 'YOUR_API_KEY', 1, 8, 'REQUEST_UUID', false);\n\nthis.pollfish.initWithUserAttributes(false, false, 'YOUR_API_KEY', 1, 8, 'REQUEST_UUID', false, {\n 'gender': '1',\n ...\n});\n\nthis.pollfish.showPollfish();\n\nthis.pollfish.hidePollfish();\n\n// Event Listeners\n\nthis.pollfish.setEventCallback(pollfish.EventListener.OnPollfishSurveyReceived, (surveyInfo) => {\n console.log(\"Survey Received: \" + JSON.stringify(surveyInfo));\n});\n\nthis.pollfish.setEventCallback(pollfish.EventListener.OnPollfishSurveyCompleted, (result) => {\n console.log(\"Survey Completed: \" + JSON.stringify(surveyInfo));\n});\n\nthis.pollfish.setEventCallback(pollfish.EventListener.OnPollfishUserNotEligible, (_) => {\n console.log(\"Pollfish User Not Eligible\");\n});\n\nthis.pollfish.setEventCallback(pollfish.EventListener.OnPollfishSurveyNotAvailable, (_) => {\n console.log(\"Pollfish Survey not available\");\n});\n\nthis.pollfish.setEventCallback(pollfish.EventListener.OnPollfishOpened, (_) => {\n console.log(\"Pollfish Survey panel is open\");\n});\n\nthis.pollfish.setEventCallback(pollfish.EventListener.OnPollfishClosed, (_) => {\n console.log(\"Pollfish Survey panel is closed\");\n});\n\nthis.pollfish.setEventCallback(pollfish.EventListener.OnPollfishUserRejectedSurvey, (_) => {\n console.log(\"Pollfish User Rejected Survey\");\n});\n\n```\n",
     "platforms": [
       "Android",
@@ -3128,7 +3128,7 @@
   {
     "packageName": "@awesome-cordova-plugins/power-management",
     "displayName": "Power Management",
-    "description": "\nThe PowerManagement plugin offers access to the devices power-management functionality.\nIt should be used for applications which keep running for a long time without any user interaction.\n",
+    "description": "The PowerManagement plugin offers access to the devices power-management functionality.\nIt should be used for applications which keep running for a long time without any user interaction.\n",
     "usage": "\n```typescript\nimport { PowerManagement } from '@awesome-cordova-plugins/power-management/ngx';\n\nconstructor(private powerManagement: PowerManagement) { }\n\n...\n\nthis.powerManagement.acquire()\n  .then(onSuccess)\n  .catch(onError);\n\n```\n",
     "platforms": [
       "Android",
@@ -3144,7 +3144,7 @@
   {
     "packageName": "@awesome-cordova-plugins/power-optimization",
     "displayName": "Power Optimization",
-    "description": "\nAndroid Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.\nThe Power Optimization plugin give you android PowerManager methods with cordova.\n",
+    "description": "Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.\nThe Power Optimization plugin give you android PowerManager methods with cordova.\n",
     "usage": "\n```typescript\nimport { PowerOptimization } from '@awesome-cordova-plugins/power-optimization/ngx';\n\nconstructor(private powerOptimization: PowerOptimization) { }\n\n...\n\nthis.powerOptimization.IsIgnoringBatteryOptimizations()\n  .then(onSuccess)\n  .catch(onError);\n\n```\n",
     "platforms": [
       "Android"
@@ -3157,7 +3157,7 @@
   {
     "packageName": "@awesome-cordova-plugins/printer",
     "displayName": "Printer",
-    "description": "Prints documents or HTML rendered content",
+    "description": "Prints documents or HTML rendered content\n",
     "usage": "\n```typescript\nimport { Printer, PrintOptions } from '@awesome-cordova-plugins/printer/ngx';\n\nconstructor(private printer: Printer) { }\n\n...\n\nthis.printer.isAvailable().then(onSuccess, onError);\n\nlet options: PrintOptions = {\n     name: 'MyDocument',\n     duplex: true,\n     orientation: 'landscape',\n     monochrome: true\n}\n\nthis.printer.print(content, options).then(onSuccess, onError);\n```",
     "platforms": [
       "Android",
@@ -3172,7 +3172,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pspdfkit-cordova",
     "displayName": "PSPDFKit-Cordova",
-    "description": "\nThe official plugin to use PSPDFKit with Cordova and Ionic.\n",
+    "description": "The official plugin to use PSPDFKit with Cordova and Ionic.\n",
     "usage": "\n```typescript\nimport { PSPDFKit } from '@awesome-cordova-plugins/pspdfkit-cordova/ngx';\n\n\nconstructor(private pspdfkit: PSPDFKit) { }\n\n...\n\n// Set your license key here.\nthis.pspdfkit.setLicenseKey(\"YOUR KEY\");\n\n// Show a PDF in single page mode, with a black background.\nthis.pspdfkit.present('document.pdf', {pageMode: 'single', backgroundColor: \"black\"})\n  .then(result => {\n     console.log(result); // Success\n  })\n  .catch(error => {\n     console.log(error); // Failed\n  });\n}\n\n// Scroll to page at index 1.\nthis.pspdfkit.setPage(1, true);\n\n```\n",
     "platforms": [
       "Android",
@@ -3186,7 +3186,7 @@
   {
     "packageName": "@awesome-cordova-plugins/purchases",
     "displayName": "Purchases",
-    "description": "\nPurchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)\n\n## Features\n|     | RevenueCat                                                                                                                                                   |\n| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| ✅  | Server-side receipt validation                                                                                                                               |\n| ➡️  | [Webhooks](https://docs.revenuecat.com/docs/webhooks) - enhanced server-to-server communication with events for purchases, renewals, cancellations, and more |\n| 🎯  | Subscription status tracking - know whether a user is subscribed whether they're on iOS, Android or web                                                      |\n| 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |\n| 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |\n| 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |\n| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |\n| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |\n| 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |\n\n## Getting Started\n\nFor more detailed information, you can view our complete documentation at [docs.revenuecat.com](https://docs.revenuecat.com/docs).\n",
+    "description": "Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)\n\n## Features\n\n|     | RevenueCat                                                                                                                                                   |\n| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| ✅  | Server-side receipt validation                                                                                                                               |\n| ➡️  | [Webhooks](https://docs.revenuecat.com/docs/webhooks) - enhanced server-to-server communication with events for purchases, renewals, cancellations, and more |\n| 🎯  | Subscription status tracking - know whether a user is subscribed whether they're on iOS, Android or web                                                      |\n| 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |\n| 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |\n| 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |\n| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |\n| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |\n| 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |\n\n## Getting Started\n\nFor more detailed information, you can view our complete documentation at [docs.revenuecat.com](https://docs.revenuecat.com/docs).\n",
     "usage": "\n#### 1. Get a RevenueCat API key\n\nLog in to the [RevenueCat dashboard](https://app.revenuecat.com) and obtain a free API key for your application.\n\n#### 2. Initialize the SDK\n\nYou should only configure _Purchases_ once (usually on app launch) as soon as your app has a unique user id for your user. This can be when a user logs in if you have accounts or on launch if you can generate a random user identifier.\n\n```typescript\n import { Platform } from \"@ionic/angular\";\n import { Purchases } from \"@awesome-cordova-plugins/purchases/ngx\";\n\n constructor(public platform: Platform, private purchases: Purchases) {\n     platform.ready().then(() => {\n         this.purchases.setDebugLogsEnabled(true); // Enable to get debug logs\n         this.purchases.setup(\"my_api_key\", \"my_app_user_id\");\n     }\n }\n```\n\n#### 3. Quickstart\nPlease follow the [Quickstart Guide](https://docs.revenuecat.com/docs/) for more information on how to use the SDK\n\n### Requirements\nRequires XCode 11.0+ and minimum target iOS 9.0+\nThis plugin has been tested with cordova-plugin-purchases@\n",
     "platforms": [
       "Android",
@@ -3200,7 +3200,7 @@
   {
     "packageName": "@awesome-cordova-plugins/push",
     "displayName": "Push",
-    "description": "\nRegister and receive push notifications.\n\nRequires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).\n\nFor TypeScript users, see the [Push plugin docs about using TypeScript for custom notifications](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/TYPESCRIPT.md).\n",
+    "description": "Register and receive push notifications.\n\nRequires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).\n\nFor TypeScript users, see the [Push plugin docs about using TypeScript for custom notifications](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/TYPESCRIPT.md).\n",
     "usage": "\n```typescript\nimport { Push, PushObject, PushOptions } from '@awesome-cordova-plugins/push/ngx';\n\nconstructor(private push: Push) { }\n\n...\n\n\n// to check if we have permission\nthis.push.hasPermission()\n  .then((res: any) => {\n\n    if (res.isEnabled) {\n      console.log('We have permission to send push notifications');\n    } else {\n      console.log('We do not have permission to send push notifications');\n    }\n\n  });\n\n// Create a channel (Android O and above). You'll need to provide the id, description and importance properties.\nthis.push.createChannel({\n id: \"testchannel1\",\n description: \"My first test channel\",\n // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.\n importance: 3,\n //badge is used to if badge appears on the app icon see https://developer.android.com/reference/android/app/NotificationChannel.html#setShowBadge(boolean).\n //false = no badge on app icon.\n //true = badge on app icon\n badge: false\n}).then(() => console.log('Channel created'));\n\n// Delete a channel (Android O and above)\nthis.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));\n\n// Return a list of currently configured channels\nthis.push.listChannels().then((channels) => console.log('List of channels', channels))\n\n// to initialize push notifications\n\nconst options: PushOptions = {\n   android: {},\n   ios: {\n       alert: 'true',\n       badge: true,\n       sound: 'false'\n   },\n   windows: {},\n   browser: {\n       pushServiceURL: 'http://push.api.phonegap.com/v1/push'\n   }\n}\n\nconst pushObject: PushObject = this.push.init(options);\n\n\npushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));\n\npushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));\n\npushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));\n\n\n```\n",
     "platforms": [
       "Android",
@@ -3216,7 +3216,7 @@
   {
     "packageName": "@awesome-cordova-plugins/pushape-push",
     "displayName": "PushapePush",
-    "description": "\nRegister and receive push notifications.\nThis plugin extends functionalities of Push native plugin in order to use it with Pushape service.\n\nPushape service: @link https://glue-labs.com/pushape-invio-notifiche-push-ios-android-api-sdk\n\nRequires Cordova plugin: `pushape-cordova-push`. For more info, please see the [Pushape plugin docs](https://github.com/gluelabs/pushape-cordova-push).\n\nFor TypeScript users, see the [Pushape plugin docs about using TypeScript for custom notifications](https://github.com/gluelabs/pushape-cordova-push/blob/master/docs/PUSHAPE_TYPESCRIPT.md).\n",
+    "description": "Register and receive push notifications.\nThis plugin extends functionalities of Push native plugin in order to use it with Pushape service.\n\nPushape service: @link https://glue-labs.com/pushape-invio-notifiche-push-ios-android-api-sdk\n\nRequires Cordova plugin: `pushape-cordova-push`. For more info, please see the [Pushape plugin docs](https://github.com/gluelabs/pushape-cordova-push).\n\nFor TypeScript users, see the [Pushape plugin docs about using TypeScript for custom notifications](https://github.com/gluelabs/pushape-cordova-push/blob/master/docs/PUSHAPE_TYPESCRIPT.md).\n",
     "usage": "\n```typescript\nimport { PushapePush } from '@awesome-cordova-plugins/pushape-push/ngx';\n\n\nconstructor(private readonly pushapePush: PushapePush) { }\n\n...\n\n\n\n```\n",
     "platforms": [
       "Android",
@@ -3231,7 +3231,7 @@
   {
     "packageName": "@awesome-cordova-plugins/qqsdk",
     "displayName": "QQSDK",
-    "description": "\nThis Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.\n\nRequires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).\n",
+    "description": "This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.\n\nRequires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).\n",
     "usage": "\n```typescript\nimport { QQSDK, QQShareOptions } from '@awesome-cordova-plugins/qqsdk/ngx';\n\nconstructor(private qq: QQSDK) { }\n\n...\n\n\nconst options: QQShareOptions = {\n  client: this.qq.ClientType.QQ,\n  scene: this.qq.Scene.QQ,\n  title: 'This is a title for cordova-plugin-qqsdk',\n  url: 'https://cordova.apache.org/',\n  image: 'https://cordova.apache.org/static/img/cordova_bot.png',\n  description: 'This is  Cordova QQ share description',\n  flashUrl:  'http://stream20.qqmusic.qq.com/30577158.mp3',\n}\n\nconst clientOptions: QQShareOptions = {\n  client: this.qq.ClientType.QQ,\n}\n\nconst shareTextOptions: QQShareOptions = {\n  client: this.qq.ClientType.QQ,\n  text: 'This is Share Text',\n  scene: this.qq.Scene.QQ,\n}\n\nthis.qq.ssoLogin(clientOptions)\n   .then(result => {\n      // Success\n      console.log('token is ' + result.access_token);\n      console.log('userid is ' + result.userid);\n      console.log('expires_time is ' + new Date(parseInt(result.expires_time)) + ' TimeStamp is ' + result.expires_time);\n   })\n   .catch(error => {\n      console.log(error); // Failed\n   });\n\nthis.qq.logout()\n   .then(() => {\n      console.log('logout success');\n   })\n   .catch(error => {\n      console.log(error);\n   });\n\nthis.qq.checkClientInstalled(clientOptions)\n   .then(() => {\n      console.log('Installed');\n   })\n   .catch(() => {\n      console.log('Not Installed');\n   });\n\nthis.qq.shareText(shareTextOptions)\n   .then(() => {\n      console.log('shareText success');\n   })\n   .catch(error => {\n      console.log(error);\n   });\n\nthis.qq.shareImage(options)\n   .then(() => {\n      console.log('shareImage success');\n   })\n   .catch(error => {\n      console.log(error);\n   });\n}\n\nthis.qq.shareNews(options)\n   .then(() => {\n      console.log('shareNews success');\n   })\n   .catch(error => {\n      console.log(error);\n   });\n}\n\nthis.qq.shareAudio(options)\n   .then(() => {\n      console.log('shareAudio success');\n   })\n   .catch(error => {\n      console.log(error);\n   });\n\n```\n",
     "platforms": [
       "Android",
@@ -3248,7 +3248,7 @@
   {
     "packageName": "@awesome-cordova-plugins/qr-scanner",
     "displayName": "QR Scanner",
-    "description": "\nA fast, energy efficient, highly-configurable QR code scanner for Cordova apps.\n\nRequires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).\n",
+    "description": "A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.\n\nRequires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).\n",
     "usage": "\n```typescript\nimport { QRScanner, QRScannerStatus } from '@awesome-cordova-plugins/qr-scanner/ngx';\n\n\nconstructor(private qrScanner: QRScanner) { }\n\n...\n\n// Optionally request the permission early\nthis.qrScanner.prepare()\n  .then((status: QRScannerStatus) => {\n     if (status.authorized) {\n       // camera permission was granted\n\n\n       // start scanning\n       let scanSub = this.qrScanner.scan().subscribe((text: string) => {\n         console.log('Scanned something', text);\n\n         this.qrScanner.hide(); // hide camera preview\n         scanSub.unsubscribe(); // stop scanning\n       });\n\n     } else if (status.denied) {\n       // camera permission was permanently denied\n       // you must use QRScanner.openSettings() method to guide the user to the settings page\n       // then they can grant the permission from there\n     } else {\n       // permission was denied, but not permanently. You can ask for permission again at a later time.\n     }\n  })\n  .catch((e: any) => console.log('Error is', e));\n\n\n```",
     "platforms": [
       "Android",
@@ -3278,7 +3278,7 @@
   {
     "packageName": "@awesome-cordova-plugins/regula-document-reader",
     "displayName": "Regula Document Reader",
-    "description": "\nPlugin for reading and validation of identification documents.\n",
+    "description": "Plugin for reading and validation of identification documents.\n",
     "usage": "\n```typescript\nimport { RegulaDocumentReader } from '@awesome-cordova-plugins/regula-document-reader/ngx';\n\nlet license; // read regula.license file\nRegulaDocumentReader.initReader(license); // initialize reader\nRegulaDocumentReader.scanDocument().then((result) => {\n\t\t// read result\n})\n```\n",
     "platforms": [
       "iOS",
@@ -3292,7 +3292,7 @@
   {
     "packageName": "@awesome-cordova-plugins/restart",
     "displayName": "Restart",
-    "description": "\nThis plugin to restart android application\n",
+    "description": "This plugin to restart android application\n",
     "usage": "\n```typescript\nimport { Restart } from '@awesome-cordova-plugins/restart';\n\n\nconstructor(private restart: Restart) { }\n\n...\n\n\nthis.restart.restart(true)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android"
@@ -3305,7 +3305,7 @@
   {
     "packageName": "@awesome-cordova-plugins/rollbar",
     "displayName": "Rollbar",
-    "description": "\nThis plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application\n",
+    "description": "This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application\n",
     "usage": "\n```typescript\nimport { Rollbar } from '@awesome-cordova-plugins/rollbar/ngx';\n\nconstructor(private rollbar: Rollbar) { }\n\n...\n\nthis.rollbar.init();\n\n```\n",
     "platforms": [
       "Android",
@@ -3323,7 +3323,7 @@
   {
     "packageName": "@awesome-cordova-plugins/safari-view-controller",
     "displayName": "Safari View Controller",
-    "description": "\nFor displaying read-only web content.\n\nRequires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).\n",
+    "description": "For displaying read-only web content.\n\nRequires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).\n",
     "usage": "\n```typescript\nimport { SafariViewController } from '@awesome-cordova-plugins/safari-view-controller/ngx';\n\nconstructor(private safariViewController: SafariViewController) { }\n\n...\n\nthis.safariViewController.isAvailable()\n  .then((available: boolean) => {\n      if (available) {\n\n        this.safariViewController.show({\n          url: 'http://ionic.io',\n          hidden: false,\n          animated: false,\n          transition: 'curl',\n          enterReaderModeIfAvailable: true,\n          tintColor: '#ff0000'\n        })\n        .subscribe((result: any) => {\n            if(result.event === 'opened') console.log('Opened');\n            else if(result.event === 'loaded') console.log('Loaded');\n            else if(result.event === 'closed') console.log('Closed');\n          },\n          (error: any) => console.error(error)\n        );\n\n      } else {\n        // use fallback browser, example InAppBrowser\n      }\n    }\n  );\n```",
     "platforms": [
       "Android",
@@ -3337,7 +3337,7 @@
   {
     "packageName": "@awesome-cordova-plugins/screen-orientation",
     "displayName": "Screen Orientation",
-    "description": "\nCordova plugin to set/lock the screen orientation in a common way.\n\nRequires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).\n",
+    "description": "Cordova plugin to set/lock the screen orientation in a common way.\n\nRequires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).\n",
     "usage": "\n```typescript\nimport { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation/ngx';\n\nconstructor(private screenOrientation: ScreenOrientation) { }\n\n...\n\n\n// get current\nconsole.log(this.screenOrientation.type); // logs the current orientation, example: 'landscape'\n\n// set to landscape\nthis.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);\n\n// allow user rotate\nthis.screenOrientation.unlock();\n\n// detect orientation changes\nthis.screenOrientation.onChange().subscribe(\n   () => {\n       console.log(\"Orientation Changed\");\n   }\n);\n\n```\n",
     "platforms": [
       "Android",
@@ -3353,7 +3353,7 @@
   {
     "packageName": "@awesome-cordova-plugins/screenshot",
     "displayName": "Screenshot",
-    "description": "Captures a screen shot",
+    "description": "Captures a screen shot\n",
     "usage": "\n```typescript\nimport { Screenshot } from '@awesome-cordova-plugins/screenshot/ngx';\n\nconstructor(private screenshot: Screenshot) { }\n\n...\n\n// Take a screenshot and save to file\nthis.screenshot.save('jpg', 80, 'myscreenshot.jpg').then(onSuccess, onError);\n\n// Take a screenshot and get temporary file URI\nthis.screenshot.URI(80).then(onSuccess, onError);\n```\n",
     "platforms": [
       "Android",
@@ -3368,7 +3368,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sensors",
     "displayName": "Sensors",
-    "description": "\nThis plugin enables sensors on Android devices\n",
+    "description": "This plugin enables sensors on Android devices\n",
     "usage": "\n```typescript\nimport { Sensors, TYPE_SENSOR } from '@awesome-cordova-plugins/sensors/ngx';\n\n\nconstructor(private sensors: Sensors) { }\n\n...\n\n\nthis.sensors.enableSensor(TYPE_SENSOR.LIGHT);\n\n```\n",
     "platforms": [
       "Android"
@@ -3381,7 +3381,7 @@
   {
     "packageName": "@awesome-cordova-plugins/serial",
     "displayName": "Serial",
-    "description": "\nThis plugin provides functions for working with Serial connections\n",
+    "description": "This plugin provides functions for working with Serial connections\n",
     "usage": "\n```typescript\nimport { Serial } from '@awesome-cordova-plugins/serial/ngx';\n\nconstructor(private serial: Serial) { }\n\n...\n\nthis.serial.requestPermission().then(() => {\n  this.serial.open({\n    baudRate: 9800,\n    dataBits: 4,\n    stopBits: 1,\n    parity: 0,\n    dtr: true,\n    rts: true,\n    sleepOnPause: false\n  }).then(() => {\n    console.log('Serial connection opened');\n  });\n}).catch((error: any) => console.log(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -3395,7 +3395,7 @@
   {
     "packageName": "@awesome-cordova-plugins/service-discovery",
     "displayName": "ServiceDiscovery",
-    "description": "\nSimple plugin to get any SSDP / UPnP / DLNA service on a local network\n",
+    "description": "Simple plugin to get any SSDP / UPnP / DLNA service on a local network\n",
     "usage": "\n```typescript\nimport { ServiceDiscovery } from '@awesome-cordova-plugins/service-discovery';\n\n\nconstructor(private serviceDiscovery: ServiceDiscovery) { }\n\n...\n\n\nthis.serviceDiscovery.getNetworkServices('ssdp:all')\n  .then(devices => console.log(devices))\n  .catch(error => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -3409,7 +3409,7 @@
   {
     "packageName": "@awesome-cordova-plugins/shake",
     "displayName": "Shake",
-    "description": "Handles shake gesture",
+    "description": "Handles shake gesture\n",
     "usage": "\n```typescript\nimport { Shake } from '@awesome-cordova-plugins/shake/ngx';\n\nconstructor(private shake: Shake) { }\n\n...\n\nconst watch = this.shake.startWatch(60).subscribe(() => {\n  // do something\n  });\n\nwatch.unsubscribe();\n```\n",
     "platforms": [
       "iOS"
@@ -3422,7 +3422,7 @@
   {
     "packageName": "@awesome-cordova-plugins/shop-checkout",
     "displayName": "ShopCheckout",
-    "description": "\nThis is a plugin that allows your Ionic app to use ShopChecout for Android.\nFollow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap\n",
+    "description": "This is a plugin that allows your Ionic app to use ShopChecout for Android.\nFollow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap\n",
     "usage": "\n```typescript\nimport { ShopCheckout } from '@awesome-cordova-plugins/shop-checkout/ngx';\n\n\nconstructor(private shopCheckout: ShopCheckout) { }\n\n...\n\nthis.shopCheckout.registerAgent();\n...\nthis.shopCheckout.openProducts();\n\n```\n",
     "platforms": [
       "Android"
@@ -3435,7 +3435,7 @@
   {
     "packageName": "@awesome-cordova-plugins/shortcuts-android",
     "displayName": "ShortcutsAndroid",
-    "description": "\nUse this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.\nFor more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html\nFor more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html\n\nThe work that went into creating this plug-in was inspired by the existing plugins: cordova-plugin-shortcut and cordova-plugin-webintent2.\n",
+    "description": "Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.\nFor more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html\nFor more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html\n\nThe work that went into creating this plug-in was inspired by the existing plugins: cordova-plugin-shortcut and cordova-plugin-webintent2.\n",
     "usage": "\nPlease do refer to the original plugin's repo for detailed usage. The usage example here might not be sufficient.\n\n```typescript\nimport { ShortcutsAndroid } from '@awesome-cordova-plugins/shortcuts-android/ngx';\n\n\nconstructor(private shortcutsAndroid: ShortcutsAndroid) { }\n\n...\n\nthis.shortcutsAndroid.supportsDynamic()\n  .then((supported: boolean) => console.log(`Dynamic shortcuts are ${supported ? '' : 'not'} supported`))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android"
@@ -3448,7 +3448,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sign-in-with-apple",
     "displayName": "Sign In With Apple",
-    "description": "\nSign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.\nInstead of filling out forms, verifying email addresses, and choosing new passwords,\nthey can use Sign in with Apple to set up an account and start using your app right away.\nAll accounts are protected with two-factor authentication for superior security,\nand Apple will not track users’ activity in your app or website.\n*Source:* https://developer.apple.com/sign-in-with-apple/\n",
+    "description": "Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.\nInstead of filling out forms, verifying email addresses, and choosing new passwords,\nthey can use Sign in with Apple to set up an account and start using your app right away.\nAll accounts are protected with two-factor authentication for superior security,\nand Apple will not track users’ activity in your app or website.\n_Source:_ https://developer.apple.com/sign-in-with-apple/\n",
     "usage": "\n```typescript\nimport { SignInWithApple, AppleSignInResponse, AppleSignInErrorResponse, ASAuthorizationAppleIDRequest } from '@awesome-cordova-plugins/sign-in-with-apple/ngx';\n\n\nconstructor(private signInWithApple: SignInWithApple) { }\n\n...\n\n\n  this.signInWithApple.signin({\n    requestedScopes: [\n      ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,\n      ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail\n    ]\n  })\n  .then((res: AppleSignInResponse) => {\n    // https://developer.apple.com/documentation/signinwithapplerestapi/verifying_a_user\n    alert('Send token to apple for verification: ' + res.identityToken);\n    console.log(res);\n  })\n  .catch((error: AppleSignInErrorResponse) => {\n    alert(error.code + ' ' + error.localizedDescription);\n    console.error(error);\n  });\n\n```\n",
     "platforms": [
       "iOS"
@@ -3461,7 +3461,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sim",
     "displayName": "Sim",
-    "description": "\nGets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.\n\nRequires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).\n",
+    "description": "Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.\n\nRequires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).\n",
     "usage": "\n```typescript\nimport { Sim } from '@awesome-cordova-plugins/sim/ngx';\n\n\nconstructor(private sim: Sim) { }\n\n...\n\nthis.sim.getSimInfo().then(\n  (info) => console.log('Sim info: ', info),\n  (err) => console.log('Unable to get sim info: ', err)\n);\n\nthis.sim.hasReadPermission().then(\n  (info) => console.log('Has permission: ', info)\n);\n\nthis.sim.requestReadPermission().then(\n  () => console.log('Permission granted'),\n  () => console.log('Permission denied')\n);\n```\n",
     "platforms": [
       "Android",
@@ -3477,7 +3477,7 @@
   {
     "packageName": "@awesome-cordova-plugins/siri-shortcuts",
     "displayName": "Siri Shortcuts",
-    "description": "\nThis plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0\n\nThis plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.\nAfter you have donated a shortcut to Siri, it will appear in the settings menu, after which the user is able to add the action. You can check\nwhether the user launched your app through a shortcut by calling `getActivatedShortcut()` when the app is resumed. It will return `null`\nif it has not been launched by Siri, and if it did, it will return an object with `SiriShortcut` properties.\n",
+    "description": "This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0\n\nThis plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.\nAfter you have donated a shortcut to Siri, it will appear in the settings menu, after which the user is able to add the action. You can check\nwhether the user launched your app through a shortcut by calling `getActivatedShortcut()` when the app is resumed. It will return `null`\nif it has not been launched by Siri, and if it did, it will return an object with `SiriShortcut` properties.\n",
     "usage": "\n```typescript\nimport { SiriShortcuts } from '@awesome-cordova-plugins/siri-shortcuts/ngx';\n\n\nconstructor(private siriShortcuts: SiriShortcuts) { }\n\n...\n\n\nthis.siriShortcuts.donate({\n      persistentIdentifier: 'open-my-app',\n      title: 'Open my app',\n      suggestedInvocationPhrase: 'Open my app',\n      userInfo: { username: 'username' },\n      isEligibleForSearch: true,\n      isEligibleForPrediction: true,\n  })\n  .then(() => console.log('Shortcut donated.'))\n  .catch((error: any) => console.error(error));\n\nthis.siriShortcuts.present({\n      persistentIdentifier: 'open-my-app',\n      title: 'Open my app',\n      suggestedInvocationPhrase: 'Open my app',\n      userInfo: { username: 'username' },\n  })\n  .then(() => console.log('Shortcut added.'))\n  .catch((error: any) => console.error(error));\n\nthis.siriShortcuts.remove('open-my-app')\n  .then(() => console.log('Shortcut removed.'))\n  .catch((error: any) => console.error(error));\n\nthis.siriShortcuts.removeAll()\n  .then(() => console.log('All shortcuts removed removed.'))\n  .catch((error: any) => console.error(error));\n\nthis.siriShortcuts.getActivatedShortcut()\n  .then((data: SiriShortcut|null) => console.log(data))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "iOS"
@@ -3490,7 +3490,7 @@
   {
     "packageName": "@awesome-cordova-plugins/smartlook",
     "displayName": "Smartlook",
-    "description": "\nOfficial Smartlook SDK plugin.\nFull documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/\n",
+    "description": "Official Smartlook SDK plugin.\nFull documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/\n",
     "usage": "\n```typescript\nimport { Smartlook, SmartlookSetupConfig } from '@awesome-cordova-plugins/smartlook/ngx';\n\n...\n\n@Component( ... )\nexport class AppComponent {\n    constructor(private smartlook: Smartlook) {\n       this.platform.ready().then(() => {\n           this.smartlook.setupAndStartRecording(new SmartlookSetupConfig(\"YOUR API KEY\"));\n       }\n    }\n}\n```",
     "platforms": [
       "Android",
@@ -3504,7 +3504,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sms-retriever",
     "displayName": "Sms Retriever",
-    "description": "\nThis plugin retrives the SMS which arrive without requiring READ permissions.\n",
+    "description": "This plugin retrives the SMS which arrive without requiring READ permissions.\n",
     "usage": "\n```typescript\nimport { SmsRetriever } from '@awesome-cordova-plugins/sms-retriever';\n\n\nconstructor(private smsRetriever: SmsRetriever) { }\n\n...\n\n\nthis.smsRetriever.getAppHash()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\nthis.smsRetriever.startWatching()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android"
@@ -3520,7 +3520,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sms",
     "displayName": "SMS",
-    "description": "\n\nRequires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).\n",
+    "description": "Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).\n",
     "usage": "\n```typescript\nimport { SMS } from '@awesome-cordova-plugins/sms/ngx';\n\nconstructor(private sms: SMS) { }\n\n\n...\n\n\n// Send a text message using default options\nthis.sms.send('416123456', 'Hello world!');\n```",
     "platforms": [
       "Android",
@@ -3536,7 +3536,7 @@
   {
     "packageName": "@awesome-cordova-plugins/social-sharing",
     "displayName": "Social Sharing",
-    "description": "\nShare text, files, images, and links via social networks, sms, and email.\n\nFor Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api\n",
+    "description": "Share text, files, images, and links via social networks, sms, and email.\n\nFor Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api\n",
     "usage": "\n```typescript\nimport { SocialSharing } from '@awesome-cordova-plugins/social-sharing/ngx';\n\nconstructor(private socialSharing: SocialSharing) { }\n\n...\n\n// Check if sharing via email is supported\nthis.socialSharing.canShareViaEmail().then(() => {\n  // Sharing via email is possible\n}).catch(() => {\n  // Sharing via email is not possible\n});\n\n// Share via email\nthis.socialSharing.shareViaEmail('Body', 'Subject', ['recipient@example.org']).then(() => {\n  // Success!\n}).catch(() => {\n  // Error!\n});\n```\n",
     "platforms": [
       "Android",
@@ -3554,7 +3554,7 @@
   {
     "packageName": "@awesome-cordova-plugins/speech-recognition",
     "displayName": "Speech Recognition",
-    "description": "\nThis plugin does speech recognition using cloud services\n",
+    "description": "This plugin does speech recognition using cloud services\n",
     "usage": "\n```typescript\nimport { SpeechRecognition } from '@awesome-cordova-plugins/speech-recognition/ngx';\n\nconstructor(private speechRecognition: SpeechRecognition) { }\n\n...\n\n\n\n// Check feature available\nthis.speechRecognition.isRecognitionAvailable()\n  .then((available: boolean) => console.log(available))\n\n// Start the recognition process\nthis.speechRecognition.startListening(options)\n  .subscribe(\n    (matches: string[]) => console.log(matches),\n    (onerror) => console.log('error:', onerror)\n  )\n\n// Stop the recognition process (iOS only)\nthis.speechRecognition.stopListening()\n\n// Get the list of supported languages\nthis.speechRecognition.getSupportedLanguages()\n  .then(\n    (languages: string[]) => console.log(languages),\n    (error) => console.log(error)\n  )\n\n// Check permission\nthis.speechRecognition.hasPermission()\n  .then((hasPermission: boolean) => console.log(hasPermission))\n\n// Request permissions\nthis.speechRecognition.requestPermission()\n  .then(\n    () => console.log('Granted'),\n    () => console.log('Denied')\n  )\n\n```\n",
     "platforms": [
       "Android",
@@ -3568,7 +3568,7 @@
   {
     "packageName": "@awesome-cordova-plugins/speechkit",
     "displayName": "SpeechKit",
-    "description": "\nImplementation of Nuance SpeechKit SDK on Ionic\n",
+    "description": "Implementation of Nuance SpeechKit SDK on Ionic\n",
     "usage": "\n```typescript\nimport { SpeechKit } from '@awesome-cordova-plugins/speechkit/ngx';\n\nconstructor(private speechkit: SpeechKit) { }\n\n\n// find voice names that match language from: https://developer.nuance.com/public/index.php?task=supportedLanguages\nthis.speechkit.tts('Text to be read out loud', 'ENG-GBR', 'Serena').then(\n  (msg) => { console.log(msg); },\n  (err) => { console.log(err); }\n);\n```\n",
     "platforms": [
       "Android",
@@ -3582,7 +3582,7 @@
   {
     "packageName": "@awesome-cordova-plugins/spinner-dialog",
     "displayName": "Spinner Dialog",
-    "description": "\nCordova plugin for showing a native spinner based on Paldom/SpinnerDialog.\n\nRequires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).\n",
+    "description": "Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.\n\nRequires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).\n",
     "usage": "\n```typescript\nimport { SpinnerDialog } from '@awesome-cordova-plugins/spinner-dialog/ngx';\n\nconstructor(private spinnerDialog: SpinnerDialog) { }\n\n...\n\nthis.spinnerDialog.show();\n\nthis.spinnerDialog.hide();\n```",
     "platforms": [
       "Android",
@@ -3598,7 +3598,7 @@
   {
     "packageName": "@awesome-cordova-plugins/splash-screen",
     "displayName": "Splash Screen",
-    "description": "This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.",
+    "description": "This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.\n",
     "usage": "\n```typescript\nimport { SplashScreen } from '@awesome-cordova-plugins/splash-screen/ngx';\n\nconstructor(private splashScreen: SplashScreen) { }\n\n...\n\nthis.splashScreen.show();\n\nthis.splashScreen.hide();\n```\n",
     "platforms": [
       "Amazon Fire OS",
@@ -3616,7 +3616,7 @@
   {
     "packageName": "@awesome-cordova-plugins/spotify-auth",
     "displayName": "Spotify Auth",
-    "description": "\nCordova plugin for authenticating with Spotify\n> https://github.com/Festify/cordova-spotify-oauth\n",
+    "description": "Cordova plugin for authenticating with Spotify\n\n> https://github.com/Festify/cordova-spotify-oauth\n",
     "usage": "\n```typescript\nimport { SpotifyAuth } from '@awesome-cordova-plugins/spotify-auth/ngx';\n\n// [...]\n\nconstructor(private spotifyAuth: SpotifyAuth) { }\n\n// [...]\n\nconst config = {\n  clientId: \"<SPOTIFY CLIENT ID>\",\n  redirectUrl: \"<REDIRECT URL, MUST MATCH WITH AUTH ENDPOINT AND SPOTIFY DEV CONSOLE>\",\n  scopes: [\"streaming\"], // see Spotify Dev console for all scopes\n  tokenExchangeUrl: \"<URL OF TOKEN EXCHANGE HTTP ENDPOINT>\",\n  tokenRefreshUrl: \"<URL OF TOKEN REFRESH HTTP ENDPOINT>\",\n};\n\n...\n\nthis.spotifyAuth.authorize(config)\n  .then(({ accessToken, expiresAt }) => {\n    console.log(`Got an access token, its ${accessToken}!`);\n    console.log(`Its going to expire in ${expiresAt - Date.now()}ms.`);\n  });\n\n// [...]\n\nthis.spotifyAuth.forget();\n\n// [...]\n```\n",
     "platforms": [
       "Android",
@@ -3633,7 +3633,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sqlite-db-copy",
     "displayName": "Sqlite Db Copy",
-    "description": "\nThis plugin does something\n",
+    "description": "This plugin does something\n",
     "usage": "\n```typescript\nimport { SqliteDbCopy } from '@awesome-cordova-plugins/sqlite-db-copy/ngx';\n\n\nconstructor(private sqliteDbCopy: SqliteDbCopy) { }\n\n...\n\n\nthis.sqliteDbCopy.copy('sample.db', 0)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -3647,7 +3647,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sqlite-porter",
     "displayName": "SQLite Porter",
-    "description": "\nThis Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.\n",
+    "description": "This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.\n",
     "usage": "\n```typescript\nimport { SQLitePorter } from '@awesome-cordova-plugins/sqlite-porter/ngx';\n\n\nconstructor(private sqlitePorter: SQLitePorter) { }\n\n...\n\nlet db = window.openDatabase('Test', '1.0', 'TestDB', 1 * 1024);\n// or we can use SQLite plugin\n// we will assume that we injected SQLite into this component as sqlite\nthis.sqlite.create({\n  name: 'data.db',\n  location: 'default'\n})\n  .then((db: any) => {\n    let dbInstance = db._objectInstance;\n    // we can pass db._objectInstance as the database option in all SQLitePorter methods\n  });\n\n\nlet sql = 'CREATE TABLE Artist ([Id] PRIMARY KEY, [Title]);' +\n           'INSERT INTO Artist(Id,Title) VALUES (\"1\",\"Fred\");';\n\nthis.sqlitePorter.importSqlToDb(db, sql)\n  .then(() => console.log('Imported'))\n  .catch(e => console.error(e));\n\n\n```\n",
     "platforms": [
       "Amazon Fire OS",
@@ -3667,7 +3667,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sqlite",
     "displayName": "SQLite\n",
-    "description": "\nAccess SQLite databases on the device.\n",
+    "description": "Access SQLite databases on the device.\n",
     "usage": "\n\n```typescript\nimport { SQLite, SQLiteObject } from '@awesome-cordova-plugins/sqlite/ngx';\n\nconstructor(private sqlite: SQLite) { }\n\n...\n\nthis.sqlite.create({\n  name: 'data.db',\n  location: 'default'\n})\n  .then((db: SQLiteObject) => {\n\n\n    db.executeSql('create table danceMoves(name VARCHAR(32))', [])\n      .then(() => console.log('Executed SQL'))\n      .catch(e => console.log(e));\n\n\n  })\n  .catch(e => console.log(e));\n\n```\n",
     "platforms": [
       "Android",
@@ -3683,7 +3683,7 @@
   {
     "packageName": "@awesome-cordova-plugins/ssh-connect",
     "displayName": "SSH Connect",
-    "description": "\nCordova plugin to make connections and execute commands through SSH\n",
+    "description": "Cordova plugin to make connections and execute commands through SSH\n",
     "usage": "\n```typescript\nimport { SSHConnect } from '@awesome-cordova-plugins/ssh-connect/ngx';\n\n\nconstructor(private sshConnect: SSHConnect) { }\n\n...\n\n\nthis.sshConnect.connect('user', 'password', 'host', port)\n  .then(resp => console.log(resp))\n  .catch(error => console.error(error));\n\nthis.sshConnect.executeCommand('command')\n  .then(resp => console.log(resp))\n  .catch(error => console.error(error));\n\nthis.sshConnect.disconnect()\n  .then(resp => console.log(resp))\n  .catch(error => console.error(error));\n\n```\n",
     "platforms": [
       "Android"
@@ -3696,7 +3696,7 @@
   {
     "packageName": "@awesome-cordova-plugins/star-prnt",
     "displayName": "StarPRNT",
-    "description": "\n* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers\n",
+    "description": "- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers\n",
     "usage": "\n```typescript\nimport { StarPRNT } from '@awesome-cordova-plugins/star-prnt/ngx';\n\n\nconstructor(private starprnt: StarPRNT) { }\n\n...\n\n\nthis.starprnt.portDiscovery('all')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -3710,7 +3710,7 @@
   {
     "packageName": "@awesome-cordova-plugins/status-bar",
     "displayName": "Status Bar",
-    "description": "\nManage the appearance of the native status bar.\n\nRequires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).\n",
+    "description": "Manage the appearance of the native status bar.\n\nRequires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).\n",
     "usage": "\n```typescript\nimport { StatusBar } from '@awesome-cordova-plugins/status-bar/ngx';\n\nconstructor(private statusBar: StatusBar) { }\n\n...\n\n// let status bar overlay webview\nthis.statusBar.overlaysWebView(true);\n\n// set status bar to white\nthis.statusBar.backgroundColorByHexString('#ffffff');\n```\n\n",
     "platforms": [
       "Android",
@@ -3727,7 +3727,7 @@
   {
     "packageName": "@awesome-cordova-plugins/stepcounter",
     "displayName": "Stepcounter",
-    "description": "\nCordova plugin for using device's stepcounter on Android (API > 19)\n\nUse to\n- start and stop stepcounter service\n- read device's stepcounter data\n",
+    "description": "Cordova plugin for using device's stepcounter on Android (API > 19)\n\nUse to\n\n- start and stop stepcounter service\n- read device's stepcounter data\n",
     "usage": "\n```typescript\nimport { Stepcounter } from '@awesome-cordova-plugins/stepcounter/ngx';\n\nconstructor(private stepcounter: Stepcounter) { }\n\n...\n\nlet startingOffset = 0;\nthis.stepcounter.start(startingOffset).then(onSuccess => console.log('stepcounter-start success', onSuccess), onFailure => console.log('stepcounter-start error', onFailure));\n\nthis.stepcounter.getHistory().then(historyObj => console.log('stepcounter-history success', historyObj), onFailure => console.log('stepcounter-history error', onFailure));\n\n```\n",
     "platforms": [
       "Android"
@@ -3740,7 +3740,7 @@
   {
     "packageName": "@awesome-cordova-plugins/streaming-media",
     "displayName": "Streaming Media",
-    "description": "\nThis plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.\n",
+    "description": "This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.\n",
     "usage": "\n```typescript\nimport { StreamingMedia, StreamingVideoOptions } from '@awesome-cordova-plugins/streaming-media/ngx';\n\nconstructor(private streamingMedia: StreamingMedia) { }\n\nlet options: StreamingVideoOptions = {\n  successCallback: () => { console.log('Video played') },\n  errorCallback: (e) => { console.log('Error streaming') },\n  orientation: 'landscape',\n  shouldAutoClose: true,\n  controls: false\n};\n\nthis.streamingMedia.playVideo('https://path/to/video/stream', options);\n\n```",
     "platforms": [
       "Amazon Fire OS",
@@ -3755,7 +3755,7 @@
   {
     "packageName": "@awesome-cordova-plugins/stripe",
     "displayName": "Stripe",
-    "description": "\nA plugin that allows you to use Stripe's Native SDKs for Android and iOS.\n",
+    "description": "A plugin that allows you to use Stripe's Native SDKs for Android and iOS.\n",
     "usage": "\n```typescript\nimport { Stripe } from '@awesome-cordova-plugins/stripe/ngx';\n\nconstructor(private stripe: Stripe) { }\n\n...\n\nthis.stripe.setPublishableKey('my_publishable_key');\n\nlet card = {\n number: '4242424242424242',\n expMonth: 12,\n expYear: 2020,\n cvc: '220'\n}\n\nthis.stripe.createCardToken(card)\n   .then(token => console.log(token.id))\n   .catch(error => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -3770,7 +3770,7 @@
   {
     "packageName": "@awesome-cordova-plugins/sum-up",
     "displayName": "SumUp",
-    "description": "\nPlugin to communicate with a SumUp payment terminal\n",
+    "description": "Plugin to communicate with a SumUp payment terminal\n",
     "usage": "\n```typescript\nimport { SumUp } from '@awesome-cordova-plugins/sum-up';\n\n\nconstructor(private sumUp: SumUp) { }\n\nconst sumUpKeys: SumUpKeys = new SumUpKeys();\nsumUpKeys.affiliateKey = 'YOUR_API_KEY'; // if not provided in installation\nsumUpKeys.accessToken = 'YOUR_ACCESS_TOKEN';\n\nthis.sumUp.login(sumUpKeys)\n  .then((res: SumUpResponse) => console.log(res))\n  .catch((error: SumUpResponse) => console.error(error));\n\n this.sumUp.auth('YOUR_ACCESS_TOKEN')\n  .then((res: SumUpResponse) => console.log(res))\n  .catch((error: SumUpResponse) => console.error(error));\n\n this.sumUp.getSettings()\n  .then((res: SumUpResponse) => console.log(res))\n  .catch((error: SumUpResponse) => console.error(error));\n\n this.sumUp.logout()\n  .then((res: SumUpResponse) => console.log(res))\n  .catch((error: SumUpResponse) => console.error(error));\n\n this.sumUp.isLoggedIn()\n  .then((res: SumUpLoginStatus) => console.log(res))\n  .catch((error: SumUpLoginStatus) => console.error(error));\n\n this.sumUp.prepare()\n  .then((res: SumUpResponse) => console.log(res))\n  .catch((error: SumUpResponse) => console.error(error));\n\nthis.sumUp.closeConnection()\n  .then((res: SumUpResponse) => console.log(res))\n  .catch((error: SumUpResponse) => console.error(error));\n\nthis.sumUp.pay(10.0, 'EUR')\n  .then((res: SumUpPayment) => console.log(res))\n  .catch((error: SumUpPayment) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -3787,7 +3787,7 @@
   {
     "packageName": "@awesome-cordova-plugins/system-alert-window-permission",
     "displayName": "System Alert Window Permission",
-    "description": "\nThis plugin does something\n",
+    "description": "This plugin does something\n",
     "usage": "\n```typescript\nimport { SystemAlertWindowPermission } from '@awesome-cordova-plugins/system-alert-window-permission/ngx';\n\n\nconstructor(private systemAlertWindowPermission: SystemAlertWindowPermission) { }\n\n...\n\n\nthis.systemAlertWindowPermission.hasPermission()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\nthis.systemAlertWindowPermission.requestPermission()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android"
@@ -3800,7 +3800,7 @@
   {
     "packageName": "@awesome-cordova-plugins/taptic-engine",
     "displayName": "Taptic Engine",
-    "description": "\nAn Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.\n",
+    "description": "An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.\n",
     "usage": "\n```typescript\nimport { TapticEngine } from '@awesome-cordova-plugins/taptic-engine/ngx';\n\n...\n\nconstructor(private taptic: TapticEngine) { }\n\n...\n\nthis.taptic.selection();\n\nthis.taptic.notification();\n\nthis.taptic.impact();\n\n```\n",
     "platforms": [
       "iOS"
@@ -3813,7 +3813,7 @@
   {
     "packageName": "@awesome-cordova-plugins/tealium-adidentifier",
     "displayName": "TealiumAdIdentifier",
-    "description": "\nThis module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.\nMakes the IDFA and Google Ad Identifier available in the Tealium data layer.\n",
+    "description": "This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.\nMakes the IDFA and Google Ad Identifier available in the Tealium data layer.\n",
     "usage": "\n```\nimport { TealiumAdIdentifier } from '@awesome-cordova-plugins/tealium-adidentifier/ngx';\n\n\nconstructor(private adIdentifier: TealiumAdIdentifier) { }\n\n...\n\n\nthis.adIdentifier.setPersistent(\"main\");\nthis.adIdentifier.setVolatile(\"main\");\n\n```\n",
     "platforms": [
       "Android",
@@ -3827,7 +3827,7 @@
   {
     "packageName": "@awesome-cordova-plugins/tealium-installreferrer",
     "displayName": "TealiumInstallReferrer",
-    "description": "\nThis module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.\nImplements a Broadcast Receiver for the INSTALL_REFERRER intent.\n",
+    "description": "This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.\nImplements a Broadcast Receiver for the INSTALL_REFERRER intent.\n",
     "usage": "\n```\nimport { TealiumInstallReferrer } from '@awesome-cordova-plugins/tealium-installreferrer/ngx';\n\n\nconstructor(private installReferrer: TealiumInstallReferrer) { }\n\n\nthis.installReferrer.setPersistent(\"main\");\nthis.installReferrer.setVolatile(\"main\");\n\n\n\n```\n",
     "platforms": [
       "Android"
@@ -3840,7 +3840,7 @@
   {
     "packageName": "@awesome-cordova-plugins/tealium",
     "displayName": "Tealium",
-    "description": "\nThis plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.\n\nFor full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)",
+    "description": "This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.\n\nFor full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)\n",
     "usage": "\n```\nimport { Tealium, TealConfig } from '@awesome-cordova-plugins/tealium/ngx';\n\n\nconstructor(private tealium: Tealium) { }\n\n...\n\nlet tealConfig: TealConfig = {\n account: \"<your-account>\",\n profile: \"<your-profile>\",\n environment: \"<your-environment>\", // usually \"dev\", \"qa\" or \"prod\"\n isLifecycleEnabled: \"true\", // pass \"false\" to disable lifecycle tracking\n isCrashReporterEnabled: \"false\", // pass \"true\" to enable crash reporter (Android only)\n instance: \"<your-instance-name\" // an arbitrary instance name. use the same instance name for all subsequent API calls\n}\n\nthis.tealium.init(tealConfig).then(()=>{\n  this.tealium.trackView({\"screen_name\": \"homescreen\"});\n});\n\n```",
     "platforms": [
       "Android",
@@ -3854,7 +3854,7 @@
   {
     "packageName": "@awesome-cordova-plugins/text-to-speech-advanced",
     "displayName": "Text To Speech Advanced",
-    "description": "\nText to Speech plugin\n",
+    "description": "Text to Speech plugin\n",
     "usage": "\n```typescript\nimport { TextToSpeechAdvanced } from '@awesome-cordova-plugins/text-to-speech-advanced/ngx';\n\nconstructor(private tts: TextToSpeechAdvanced) { }\n\n...\n\nthis.tts.speak('Hello World')\n  .then(() => console.log('Success'))\n  .catch((reason: any) => console.log(reason));\n\n```",
     "platforms": [
       "Android",
@@ -3868,7 +3868,7 @@
   {
     "packageName": "@awesome-cordova-plugins/text-to-speech",
     "displayName": "Text To Speech",
-    "description": "\nText to Speech plugin\n",
+    "description": "Text to Speech plugin\n",
     "usage": "\n```typescript\nimport { TextToSpeech } from '@awesome-cordova-plugins/text-to-speech/ngx';\n\nconstructor(private tts: TextToSpeech) { }\n\n...\n\nthis.tts.speak('Hello World')\n  .then(() => console.log('Success'))\n  .catch((reason: any) => console.log(reason));\n\n```",
     "platforms": [
       "Android",
@@ -3883,7 +3883,7 @@
   {
     "packageName": "@awesome-cordova-plugins/theme-detection",
     "displayName": "Theme Detection",
-    "description": "\nCordova plugin to detect whether dark mode is enabled or not\n",
+    "description": "Cordova plugin to detect whether dark mode is enabled or not\n",
     "usage": "\n```typescript\nimport { ThemeDetection } from '@awesome-cordova-plugins/theme-detection';\n\n\nconstructor(private themeDetection: ThemeDetection) { }\n\n...\n\nthis.themeDetection.isAvailable()\n  .then((res: ThemeDetectionResponse) => {\n     if(res.value) {\n       this.themeDetection.isDarkModeEnabled().then((res: ThemeDetectionResponse) => {\n         console.log(res);\n       })\n       .catch((error: any) => console.error(error));\n     }\n  })\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "iOS",
@@ -3898,7 +3898,7 @@
   {
     "packageName": "@awesome-cordova-plugins/themeable-browser",
     "displayName": "Themeable Browser",
-    "description": "\nIn-app browser that allows styling.\n",
+    "description": "In-app browser that allows styling.\n",
     "usage": "\n```typescript\nimport { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@awesome-cordova-plugins/themeable-browser/ngx';\n\nconstructor(private themeableBrowser: ThemeableBrowser) { }\n\n...\n\n// can add options from the original InAppBrowser in a JavaScript object form (not string)\n// This options object also takes additional parameters introduced by the ThemeableBrowser plugin\n// This example only shows the additional parameters for ThemeableBrowser\n// Note that that `image` and `imagePressed` values refer to resources that are stored in your app\nconst options: ThemeableBrowserOptions = {\n     statusbar: {\n         color: '#ffffffff'\n     },\n     toolbar: {\n         height: 44,\n         color: '#f0f0f0ff'\n     },\n     title: {\n         color: '#003264ff',\n         showPageTitle: true\n     },\n     backButton: {\n         image: 'back',\n         imagePressed: 'back_pressed',\n         align: 'left',\n         event: 'backPressed'\n     },\n     forwardButton: {\n         image: 'forward',\n         imagePressed: 'forward_pressed',\n         align: 'left',\n         event: 'forwardPressed'\n     },\n     closeButton: {\n         image: 'close',\n         imagePressed: 'close_pressed',\n         align: 'left',\n         event: 'closePressed'\n     },\n     customButtons: [\n         {\n             image: 'share',\n             imagePressed: 'share_pressed',\n             align: 'right',\n             event: 'sharePressed'\n         }\n     ],\n     menu: {\n         image: 'menu',\n         imagePressed: 'menu_pressed',\n         title: 'Test',\n         cancel: 'Cancel',\n         align: 'right',\n         items: [\n             {\n                 event: 'helloPressed',\n                 label: 'Hello World!'\n             },\n             {\n                 event: 'testPressed',\n                 label: 'Test!'\n             }\n         ]\n     },\n     backButtonCanClose: true\n}\n\nconst browser: ThemeableBrowserObject = this.themeableBrowser.create('https://ionic.io', '_blank', options);\n\n```\nWe suggest that you refer to the plugin's repository for additional information on usage that may not be covered here.",
     "platforms": [
       "Amazon Fire OS",
@@ -3919,7 +3919,7 @@
   {
     "packageName": "@awesome-cordova-plugins/three-dee-touch",
     "displayName": "3D Touch",
-    "description": "\nThe 3D Touch plugin adds 3D Touch capabilities to your Cordova app.\n\nRequires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).\n",
+    "description": "The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.\n\nRequires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).\n",
     "usage": "\nPlease do refer to the original plugin's repo for detailed usage. The usage example here might not be sufficient.\n```typescript\nimport { ThreeDeeTouch, ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from '@awesome-cordova-plugins/three-dee-touch/ngx';\n\nconstructor(private threeDeeTouch: ThreeDeeTouch) { }\n\n...\n\nthis.threeDeeTouch.isAvailable().then(isAvailable => console.log('3D Touch available? ' + isAvailable));\n\nthis.threeDeeTouch.watchForceTouches()\n  .subscribe(\n    (data: ThreeDeeTouchForceTouch) => {\n      console.log('Force touch %' + data.force);\n      console.log('Force touch timestamp: ' + data.timestamp);\n      console.log('Force touch x: ' + data.x);\n      console.log('Force touch y: ' + data.y);\n    }\n  );\n\n\nlet actions: ThreeDeeTouchQuickAction[] = [\n  {\n    type: 'checkin',\n    title: 'Check in',\n    subtitle: 'Quickly check in',\n    iconType: 'Compose'\n  },\n  {\n    type: 'share',\n    title: 'Share',\n    subtitle: 'Share like you care',\n    iconType: 'Share'\n  },\n  {\n    type: 'search',\n    title: 'Search',\n    iconType: 'Search'\n  },\n  {\n    title: 'Show favorites',\n    iconTemplate: 'HeartTemplate'\n  }\n];\n\nthis.threeDeeTouch.configureQuickActions(actions);\n\nthis.threeDeeTouch.onHomeIconPressed().subscribe(\n (payload) => {\n   // returns an object that is the button you presed\n   console.log('Pressed the ${payload.title} button')\n   console.log(payload.type)\n\n }\n)\n```",
     "platforms": [
       "iOS"
@@ -3932,7 +3932,7 @@
   {
     "packageName": "@awesome-cordova-plugins/toast",
     "displayName": "Toast",
-    "description": "\nThis plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.\n\nRequires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).\n",
+    "description": "This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.\n\nRequires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).\n",
     "usage": "\n```typescript\nimport { Toast } from '@awesome-cordova-plugins/toast/ngx';\n\nconstructor(private toast: Toast) { }\n\n...\n\nthis.toast.show(`I'm a toast`, '5000', 'center').subscribe(\n  toast => {\n    console.log(toast);\n  }\n);\n```",
     "platforms": [
       "Android",
@@ -3949,7 +3949,7 @@
   {
     "packageName": "@awesome-cordova-plugins/touch-id",
     "displayName": "Touch ID",
-    "description": "\nScan the fingerprint of a user with the TouchID sensor.\n\nRequires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).\n",
+    "description": "Scan the fingerprint of a user with the TouchID sensor.\n\nRequires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).\n",
     "usage": "\n```typescript\nimport { TouchID } from '@awesome-cordova-plugins/touch-id/ngx';\n\nconstructor(private touchId: TouchID) { }\n\n...\n\nthis.touchId.isAvailable()\n  .then(\n    res => console.log('TouchID is available!'),\n    err => console.error('TouchID is not available', err)\n  );\n\nthis.touchId.verifyFingerprint('Scan your fingerprint please')\n  .then(\n    res => console.log('Ok', res),\n    err => console.error('Error', err)\n  );\n```\n\n### Error Codes\n\nThe plugin will reject for various reasons. Your app will most likely need to respond to the cases differently.\n\nHere is a list of some of the error codes:\n\n -  `-1` - Fingerprint scan failed more than 3 times\n -  `-2` or `-128` - User tapped the 'Cancel' button\n -  `-3` - User tapped the 'Enter Passcode' or 'Enter Password' button\n -  `-4` - The scan was cancelled by the system (Home button for example)\n -  `-6` - TouchID is not Available\n -  `-8` - TouchID is locked out from too many tries\n",
     "platforms": [
       "iOS"
@@ -3962,7 +3962,7 @@
   {
     "packageName": "@awesome-cordova-plugins/twitter-connect",
     "displayName": "Twitter Connect",
-    "description": "\nPlugin to use Twitter Single Sign On\nUses Twitter's Fabric SDK\n```typescript\nimport { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';\n\nconstructor(private twitter: TwitterConnect) { }\n\n...\n\nfunction onSuccess(response) {\n  console.log(response);\n\n  // Will console log something like:\n  // {\n  //   userName: 'myuser',\n  //   userId: '12358102',\n  //   secret: 'tokenSecret'\n  //   token: 'accessTokenHere'\n  // }\n}\n\nthis.twitter.login().then(onSuccess, onError);\n\nthis.twitter.logout().then(onLogoutSuccess, onLogoutError);\n```",
+    "description": "Plugin to use Twitter Single Sign On\nUses Twitter's Fabric SDK\n\n```typescript\nimport { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';\n\nconstructor(private twitter: TwitterConnect) { }\n\n...\n\nfunction onSuccess(response) {\n  console.log(response);\n\n  // Will console log something like:\n  // {\n  //   userName: 'myuser',\n  //   userId: '12358102',\n  //   secret: 'tokenSecret'\n  //   token: 'accessTokenHere'\n  // }\n}\n\nthis.twitter.login().then(onSuccess, onError);\n\nthis.twitter.logout().then(onLogoutSuccess, onLogoutError);\n```\n",
     "platforms": [
       "Android",
       "iOS"
@@ -3980,7 +3980,7 @@
   {
     "packageName": "@awesome-cordova-plugins/uid",
     "displayName": "Uid",
-    "description": "\nGet unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.\n",
+    "description": "Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.\n",
     "usage": "\n```typescript\nimport { Uid } from '@awesome-cordova-plugins/uid/ngx';\nimport { AndroidPermissions } from '@awesome-cordova-plugins/android-permissions/ngx';\n\nconstructor(private uid: Uid, private androidPermissions: AndroidPermissions) { }\n\n\nasync getImei() {\n const { hasPermission } = await this.androidPermissions.checkPermission(\n   this.androidPermissions.PERMISSION.READ_PHONE_STATE\n );\n\n if (!hasPermission) {\n   const result = await this.androidPermissions.requestPermission(\n     this.androidPermissions.PERMISSION.READ_PHONE_STATE\n   );\n\n   if (!result.hasPermission) {\n     throw new Error('Permissions required');\n   }\n\n   // ok, a user gave us permission, we can get him identifiers after restart app\n   return;\n }\n\n  return this.uid.IMEI\n}\n```\n",
     "platforms": [
       "Android"
@@ -3993,7 +3993,7 @@
   {
     "packageName": "@awesome-cordova-plugins/unique-device-id",
     "displayName": "Unique Device ID",
-    "description": "\nThis plugin produces a unique, cross-install, app-specific device id.\n",
+    "description": "This plugin produces a unique, cross-install, app-specific device id.\n",
     "usage": "\n```typescript\nimport { UniqueDeviceID } from '@awesome-cordova-plugins/unique-device-id/ngx';\n\nconstructor(private uniqueDeviceID: UniqueDeviceID) { }\n\n...\n\nthis.uniqueDeviceID.get()\n  .then((uuid: any) => console.log(uuid))\n  .catch((error: any) => console.log(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -4008,7 +4008,7 @@
   {
     "packageName": "@awesome-cordova-plugins/unvired-cordova-sdk",
     "displayName": "Unvired Cordova SDK",
-    "description": "\nThis plugin lets you build apps which connect to Unvired Mobile Platform (UMP).\n-\niOS Requirements\n-\nUpdate your Cocoapods repo before you install the plugin.\n```\n$ pod repo update\n```\n-\nBrowser Requirements\n-\nAfter you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.\n```\n<script src=\"assets/js/sql.js\"></script>\n<script src=\"assets/js/kernel.js\"></script>\n<script src=\"assets/js/winstore-jscompat.js\"></script>\n<script src=\"assets/js/jquery-3.2.1.js\"></script>\n```",
+    "description": "## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).\n\n## iOS Requirements\n\nUpdate your Cocoapods repo before you install the plugin.\n\n```\n$ pod repo update\n```\n\n- Browser Requirements\n- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.\n\n```\n<script src=\"assets/js/sql.js\"></script>\n<script src=\"assets/js/kernel.js\"></script>\n<script src=\"assets/js/winstore-jscompat.js\"></script>\n<script src=\"assets/js/jquery-3.2.1.js\"></script>\n```\n",
     "usage": "\n```typescript\nimport { UnviredCordovaSDK } from '@awesome-cordova-plugins/unvired-cordova-sdk/ngx';\n\n\nconstructor(private unviredSDK: UnviredCordovaSDK) { }\n\n...\n// This is usually done in app.component.ts of your app.\n// Before you can interact with UMP, you need to initialize the SDK and authenticate with UMP.\n// SDK Initialization\nlet loginParameters = new LoginParameters()\nloginParameters.appName = 'UNVIRED_DIGITAL_FORMS'\nloginParameters.metadataPath = '../assets/metadata.json'\nlet loginResult: LoginResult\ntry {\n  loginResult = await this.unviredSDK.login(loginParameters)\n}\ncatch (error) {\n  this.unviredSDK.logError(\"AppComponent\", \"Initialize\", \"Error during login: \" + error)\n}\n\n\nswitch (loginResult.type) {\ncase LoginListenerType.auth_activation_required:\n// App is not activated. i.e, User is using the app for the very first time.\n// App needs to be activated before it can interact with UMP.\n// At this point of time, you basically navigate to a login screen & accept username / password from the user.\n// Set the username & password to loginParameters object and call authenticateAndActivate\ntry {\n // Execute this block of code in a login screen.\nlet loginParameters = new LoginParameters();\nloginParameters.url = '<UMP_URL>';\nloginParameters.company = '<Company>';\nloginParameters.username = '<Username>';\nloginParameters.password = '<Password>';\nloginParameters.loginType = LoginType.unvired;\nlet authenticateActivateResult: AuthenticateActivateResult = await this.unviredSDK.authenticateAndActivate(loginParameters);\nif (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_success) {\n// App is fully setup. Navigate to your app's home screen.\n} else if (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_error) {\nconsole.log(\"Error during login: \" + authenticateActivateResult.error)\n} catch (error) {\nthis.unviredSDK.logError('LoginPage', 'auth_activation_required', 'ERROR: ' + error);\n}\nbreak;\n\n\n\ncase LoginListenerType.app_requires_login:\n// App is already activated. But, the user needs to enter credentials because the setting LOCAL_PASSWORD is set to YES in Unvired Admin Cockpit.\n// To set LOCAL_PASSWORD property for your app, contact your administrator.\ntry {\n // Execute this block of code in a login screen.\n let loginParameters = new LoginParameters()\n loginParameters.username = '<Username>';\n loginParameters.password = '<Password>';\n let authenticateLocalResult: AuthenticateLocalResult = await this.unviredSDK.authenticateLocal(loginParameters);\n if (authenticateLocalResult.type === AuthenticateLocalResultType.login_success) {\n // App is fully setup. Navigate to your app's home screen.\n } else if (authenticateLocalResult.type === AuthenticateLocalResultType.login_error) {\n  console.log(\"Error during local login: \" + authenticateActivateResult.error)\n } catch (error) {\n  this.unviredSDK.logError('LoginPage', 'app_requires_login', 'ERROR: ' + error);\n}\nbreak;\n\n\n\ncase login_success:\n// The setting LOCAL_PASSWORD is set to false.\n// App is fully initialized. Users can interact with the UMP\n// Navigate to Home screen\nbreak;\n}\n\n\n\n\n\n// Synchronization APIs\n// Example 1: Make a Sync RQST call\n```\nawait this.unviredSDK.syncForeground(RequestType.RQST, {\"CUSTOMER_HEADER\": {\"CUST_NO\" : \"007\", \"CUST_NAME\" : \"James Bond\"}}, '', 'PA_GET_CUSTOMER_DETAILS', true)\n```\n\n// Example 2: Make a Sync QUERY / PULL call\n```\nawait this.unviredSDK.syncForeground(RequestType.QUERY, '', {\"CUSTOMER_SEARCH_CONTEXT\":[{\"CUSTOMER_SEARCH_HEADER\":{\"CUST_NO\":\"007\"}}]}, 'PA_SEARCH_CUSTOMER', true)\n```\n\nExample 3: Make a Async RQST call\n```\nawait this.unviredSDK.syncBackground(RequestType.RQST, {\"CUSTOMER_HEADER\": {\"CUST_NO\" : \"007\", \"CUST_NAME\" : \"James Bond\"}}, '', 'PA_GET_CUSTOMER_DETAILS', 'CUSTOMER', beLID, false)\n```\n\nExample 4: Make a Async QUERY / PULL call\n```\nawait this.unviredSDK.syncBackground(RequestType.QUERY, '', {\"CUSTOMER_SEARCH_CONTEXT\":[{\"CUSTOMER_SEARCH_HEADER\":{\"CUST_NO\":\"007\"}}]}, 'PA_SEARCH_CUSTOMER', '', '', true)\n```\n\n// Note: Subscribe to NotificationListener to get updates on data processing in background\n// However, only one screen can listen to background data updates at any point of time.\nthis.unviredSDK.registerNotifListener().subscribe( data => {\nswitch (data.type) {\ncase NotificationListenerType.dataSend:\nbreak;\ncase NotificationListenerType.dataChanged:\nbreak;\ncase NotificationListenerType.dataReceived:\nbreak;\n.\n.\n.\n}})\n\n\n\n\n\n// Database APIs\n// Insert a record onto database\nthis.unviredsdk.dbInsert(\"CUSTOMER_HEADER\", {\"NAME\":\"James Bond\",\"CUST_NO\":\"007\"}, true);\n\n// Update a record in database\nthis.unviredSDK.dbUpdate('CUSTOMER_HEADER', {\"NAME\":\"John Doe\",\"CUST_NO\":\"008\"}, \"CUST_NO = '007'\")\n\n// Delete a record in database\nthis.unviredSDK.dbDelete('CUSTOMER_HEADER', \"CUST_NO = '007'\")\n\n// Execute a SQL Query\nthis.unviredSDK.dbExecuteStatement('SELECT * FROM CUSTOMER_HEADER WHERE CUSTOMER_ID = \"007\"')\n",
     "platforms": [
       "iOS",
@@ -4025,7 +4025,7 @@
   {
     "packageName": "@awesome-cordova-plugins/uptime",
     "displayName": "Uptime",
-    "description": "\nThis plugin provides the time spent in milliseconds since boot (uptime).\n",
+    "description": "This plugin provides the time spent in milliseconds since boot (uptime).\n",
     "usage": "\n```typescript\nimport { Uptime } from '@awesome-cordova-plugins/uptime/ngx';\n\nconstructor(private uptime: Uptime) { }\n\n...\n\nthis.uptime.getUptime(includeDeepSleep)\n  .then(uptime => console.log(uptime))\n  .catch(error => console.log(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -4039,7 +4039,7 @@
   {
     "packageName": "@awesome-cordova-plugins/urbanairship",
     "displayName": "UrbanAirShip",
-    "description": "\nThis plugin does something\n",
+    "description": "This plugin does something\n",
     "usage": "\n```typescript\nimport { UrbanAirShip } from '@awesome-cordova-plugins/urbanairship/ngx';\n\n\nconstructor(private urbanAirShip: UrbanAirShip) { }\n\n...\n\n\nthis.urbanAirShip.takeOff(config)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -4053,7 +4053,7 @@
   {
     "packageName": "@awesome-cordova-plugins/usabilla-cordova-sdk",
     "displayName": "Usabilla",
-    "description": "\nUsabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.\nThis document describes library integration steps for your Cordova project.\n\nFor more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a-cordova)\n",
+    "description": "Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.\nThis document describes library integration steps for your Cordova project.\n\nFor more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a-cordova)\n",
     "usage": "\n```typescript\nimport { Usabilla } from '@awesome-cordova-plugins/usabilla-cordova-sdk/ngx';\n\n\nconstructor(private usabilla: Usabilla) { }\n\n...\n\n\n this.usabilla.initialize(\n   appID: '<your_application_id>',\n   custom_vars: {\n     \"key\": \"value\"\n   });\n\n this.usabilla.loadFeedbackForm(\n   formID : '<your_form_id>'\n   );\n\n```\n",
     "platforms": [
       "Android",
@@ -4067,7 +4067,7 @@
   {
     "packageName": "@awesome-cordova-plugins/user-agent",
     "displayName": "User Agent",
-    "description": "\nThe UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).\n\nRequires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).\n",
+    "description": "The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).\n\nRequires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).\n",
     "usage": "\n```typescript\nimport { UserAgent } from '@awesome-cordova-plugins/user-agent/ngx';\n\n\nconstructor(private userAgent: UserAgent) { }\n\n...\n\n\nthis.userAgent.set('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36')\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n* this.userAgent.get()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n* this.userAgent.reset()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -4081,7 +4081,7 @@
   {
     "packageName": "@awesome-cordova-plugins/vibes",
     "displayName": "Vibes",
-    "description": "\nThis plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.\n",
+    "description": "This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.\n",
     "usage": "\n```typescript\nimport { Vibes } from '@awesome-cordova-plugins/vibes/ngx';\n\n\nconstructor(private vibes: Vibes) { }\n\n...\n\n\nthis.vibes.registerDevice()\n  .then((res: any) => console.log(`device registration success: ${res}`)) // retrieve and save the device_id from `res` JSON object\n  .catch((error: any) => console.error('Error registering device', error));\n\nthis.vibes.registerPush()\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error('Error registering push', error));\n\nthis.vibes.getVibesDeviceInfo()\n  .then((res: any) => console.log(res)) // retrieve the `device_id` and `push_token` from the JSON object\n  .catch((error: any) => console.error('Error retrieving deviceinfo', error));\n\nthis.vibes.fetchInboxMessages()\n  .then((res: any) => console.log(res)) // fetches inbox messages for this person.\n  .catch((error: any) => console.error('Error fetching inbox messages for this person', error));\n```\n",
     "platforms": [
       "Android",
@@ -4099,7 +4099,7 @@
   {
     "packageName": "@awesome-cordova-plugins/vibration",
     "displayName": "Vibration",
-    "description": "Vibrates the device",
+    "description": "Vibrates the device\n",
     "usage": "\n```typescript\nimport { Vibration } from '@awesome-cordova-plugins/vibration/ngx';\n\nconstructor(private vibration: Vibration) { }\n\n...\n\n// Vibrate the device for a second\n// Duration is ignored on iOS.\nthis.vibration.vibrate(1000);\n\n// Vibrate 2 seconds\n// Pause for 1 second\n// Vibrate for 2 seconds\n// Patterns work on Android and Windows only\nthis.vibration.vibrate([2000,1000,2000]);\n\n// Stop any current vibrations immediately\n// Works on Android and Windows only\nthis.vibration.vibrate(0);\n```\n",
     "platforms": [
       "Android",
@@ -4115,7 +4115,7 @@
   {
     "packageName": "@awesome-cordova-plugins/video-capture-plus",
     "displayName": "Video Capture Plus",
-    "description": "\nThis plugin offers some useful extras on top of the default Media Capture Plugin capabilities:\n- HD recording.\n- Starting with the front camera.\n- A custom overlay (currently iOS only).\n",
+    "description": "This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:\n\n- HD recording.\n- Starting with the front camera.\n- A custom overlay (currently iOS only).\n",
     "usage": "\n```typescript\nimport { VideoCapturePlus, VideoCapturePlusOptions, MediaFile } from '@awesome-cordova-plugins/video-capture-plus/ngx';\n\n\nconstructor(private videoCapturePlus: VideoCapturePlus) { }\n\n...\n\nconst options: VideoCapturePlusOptions = {\n   limit: 1,\n   highquality: true,\n   portraitOverlay: 'assets/img/camera/overlay/portrait.png',\n   landscapeOverlay: 'assets/img/camera/overlay/landscape.png'\n}\n\nthis.videoCapturePlus.captureVideo(options).then(mediafile: MediaFile[] => console.log(mediafile), error => console.log('Something went wrong'));\n\n```",
     "platforms": [
       "Android",
@@ -4145,7 +4145,7 @@
   {
     "packageName": "@awesome-cordova-plugins/video-player",
     "displayName": "Video Player",
-    "description": "\nA Cordova plugin that simply allows you to immediately play a video in fullscreen mode.\n\nRequires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).\n",
+    "description": "A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.\n\nRequires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).\n",
     "usage": "\n```typescript\nimport { VideoPlayer } from '@awesome-cordova-plugins/video-player/ngx';\n\nconstructor(private videoPlayer: VideoPlayer) { }\n\n...\n\n// Playing a video.\nthis.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => {\n console.log('video completed');\n}).catch(err => {\n console.log(err);\n});\n\n```",
     "platforms": [
       "Android"
@@ -4158,7 +4158,7 @@
   {
     "packageName": "@awesome-cordova-plugins/web-intent",
     "displayName": "Web Intent",
-    "description": "\nThis Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.",
+    "description": "This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.\n",
     "usage": "\nFor usage information please refer to the plugin's Github repo.\n\n```typescript\nimport { WebIntent } from '@awesome-cordova-plugins/web-intent/ngx';\n\nconstructor(private webIntent: WebIntent) { }\n\n...\n\nconst options = {\n  action: this.webIntent.ACTION_VIEW,\n  url: 'path/to/file',\n  type: 'application/vnd.android.package-archive'\n}\n\nthis.webIntent.startActivity(options).then(onSuccess, onError);\n\n```",
     "platforms": [
       "Android"
@@ -4171,7 +4171,7 @@
   {
     "packageName": "@awesome-cordova-plugins/web-server",
     "displayName": "Web Server",
-    "description": "\nThis plugin allows you to start a local dynamic content web server for android and iOS devices.\n",
+    "description": "This plugin allows you to start a local dynamic content web server for android and iOS devices.\n",
     "usage": "\n```typescript\nimport { WebServer } from '@awesome-cordova-plugins/web-server/ngx';\n\n\nconstructor(private webServer: WebServer) { }\n\n...\n\nthis.webServer.onRequest().subscribe(data => {\n  console.log(data);\n  const res: Response = {\n    status: 200,\n    body: '',\n    headers: {\n      'Content-Type': 'text/html'\n    }\n  };\n\n  this.webServer.sendResponse(data.requestId, res)\n    .catch((error: any) => console.error(error));\n});\n\nthis.webServer.start(80)\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -4185,7 +4185,7 @@
   {
     "packageName": "@awesome-cordova-plugins/web-socket-server",
     "displayName": "WebSocket Server",
-    "description": "\nThis plugin allows you to run a single, lightweight, barebone WebSocket Server.\n",
+    "description": "This plugin allows you to run a single, lightweight, barebone WebSocket Server.\n",
     "usage": "\n```typescript\nimport { WebSocketServer } from '@awesome-cordova-plugins/web-socket-server';\n\nconstructor(private wsserver: WebSocketServer) { }\n\n...\n\n// start websocket server\nthis.wsserver.start(8888, {}).subscribe({\n  next: server => console.log(`Listening on ${server.addr}:${server.port}`),\n  error: error => console.log(`Unexpected error`, error);\n});\n\n// watch for any messages\nthis.wsserver.watchMessage().subscribe(result => {\n  console.log(`Received message ${result.msg} from ${result.conn.uuid}`);\n});\n\n// send message to connection with specified uuid\nthis.wsserver.send({ uuid: '8e7c4f48-de68-4b6f-8fca-1067a353968d' }, 'Hello World');\n\n// stop websocket server\nthis.wsserver.stop().then(server => {\n  console.log(`Stop listening on ${server.addr}:${server.port}`);\n});\n\n```\n",
     "platforms": [
       "Android",
@@ -4199,7 +4199,7 @@
   {
     "packageName": "@awesome-cordova-plugins/webengage",
     "displayName": "Webengage",
-    "description": "\nIonic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS\n",
+    "description": "Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS\n",
     "usage": "\n```typescript\nimport { Webengage, WebengageUser, WebengagePush, WebengageNotification } from '@awesome-cordova-plugins/webengage/ngx';\n\n\nconstructor(private webengage: Webengage, private webengageUser: WebengageUser, private webengagePush: WebengagePush, private webengageNotification: WebengageNotification ) { }\n\n...\n\nthis.webengage.engage();\n```\n",
     "platforms": [
       "Android",
@@ -4213,7 +4213,7 @@
   {
     "packageName": "@awesome-cordova-plugins/wechat",
     "displayName": "Wechat",
-    "description": "\nA cordova plugin, a JS version of Wechat SDK\n",
+    "description": "A cordova plugin, a JS version of Wechat SDK\n",
     "usage": "\n```typescript\nimport { Wechat } from '@awesome-cordova-plugins/wechat/ngx';\n\n\nconstructor(private wechat: Wechat) { }\n\n...\n\n\nthis.wechat.functionName('Hello', 123)\n  .then((res: any) => console.log(res))\n  .catch((error: any) => console.error(error));\n\n```\n",
     "platforms": [
       "Android",
@@ -4244,7 +4244,7 @@
   {
     "packageName": "@awesome-cordova-plugins/wifi-wizard-2",
     "displayName": "WifiWizard2",
-    "description": "\nWifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.\n\nThis project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.\n",
+    "description": "WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.\n\nThis project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.\n",
     "usage": "\n```typescript\nimport { WifiWizard2 } from '@awesome-cordova-plugins/wifi-wizard-2/ngx';\n\n\nconstructor(private wifiWizard2: WifiWizard2) { }\n\n\n# Global Functions\n These are functions that can be used by both Android and iOS applications\n ```typescript\n this.wifiWizard2.getConnectedSSID()\n ```\n - Returns connected network SSID (only if connected) in success callback, otherwise fail callback will be called (if not connected or unable to retrieve)\n - This does **NOT** return the BSSID if unable to obtain SSID (like original WifiWizard did)\n ```typescript\n this.wifiWizard2.getConnectedBSSID()\n ```\n - Same as above, except BSSID (mac) is returned\n\n ```typescript\n this.wifiWizard2.timeout(delay)\n ```\n - `delay` should be time in milliseconds to delay\n - Helper async timeout delay, `delay` is optional, default is 2000ms = 2 seconds\n - This method always returns a resolved promise after the delay, it will never reject or throw an error\n\n **Example inside async function**\n ```typescript\n async function example(){\n    await this.wifiWizard2.timeout(4000);\n    // do something after 4 seconds\n}\n ```\n\n **Example inside standard non-async function**\n ```typescript\n function example(){\n    this.wifiWizard2.timeout(4000).then( function(){\n        // do something after waiting 4 seconds\n    }):\n}\n ```\n\n **Thrown Errors**\n\n - `TIMEOUT_WAITING_FOR_SCAN` on timeout waiting for scan 10 seconds +\n - `SCAN_FAILED` if unable to start scan\n\n # iOS Functions\n For functionality, you need to note the following:\n - Connect/Disconnect only works for iOS11+\n - Can't run in the simulator so you need to attach an actual device when building with xCode\n - Will ensure 'HotspotConfiguration' and 'NetworkExtensions' capabilities are added to your xCode project\n - To connect to open network omit `ssidPassword` or call with `false`\n\n ```typescript\n this.wifiWizard2.iOSConnectNetwork(ssid, ssidPassword)\n ```\n ```typescript\n this.wifiWizard2.iOSDisconnectNetwork(ssid)\n ```\n\n # Android Functions\n - **WifiWizard2** *will automagically try to enable WiFi if it's disabled when calling any android related methods that require WiFi to be enabled*\n\n ## Connect vs Enable\n When writing Android Java code, there is no `connect` methods, you basically either `enable` or `disable` a network. In the original versions of WifiWizard the `connect` method would basically just call `enable` in Android.\n I have changed the way this works in WifiWizard2 version 3.0.0+, converting it to a helper method to eliminate having to call `formatWifiConfig` then `add` and then `enable` ... the `connect` method will now automatically call `formatWifiConfig`, then call `add` to either add or update the network configuration, and then call `enable`.\n If the connect method is unable to update existing network configuration (added by user or other apps), but there is a valid network ID, it will still attempt to enable that network ID.\n\n ```typescript\n this.wifiWizard2.connect(ssid, bindAll, password, algorithm, isHiddenSSID)\n ```\n - `ssid` should be the SSID to connect to *required*\n - `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection (default is `false`) *optional*\n - See `WifiWizard2.enable` for more details regarding `bindAll` feature\n - `algorithm` and `password` is not required if connecting to an open network\n - Currently `WPA` and `WEP` are only supported algorithms\n - For `WPA2` just pass `WPA` as the algorithm\n - Set `isHiddenSSID` to `true` if the network you're connecting to is hidden\n - These arguments are the same as for `formatWifiConfig`\n - This method essentially calls `formatWifiConfig` then `add` then `enable`\n - If unable to update network configuration (was added by user or other app), but a valid network ID exists, this method will still attempt to enable the network\n - Promise will not be returned until method has verified that connection to WiFi was in completed state (waits up to 60 seconds)\n\n **Thrown Errors**\n\n\n - `CONNECT_FAILED_TIMEOUT` unable to verify connection, timed out after 60 seconds\n - `INVALID_NETWORK_ID_TO_CONNECT` Unable to connect based on generated wifi config\n - `INTERPUT_EXCEPT_WHILE_CONNECTING` Interupt exception while waiting for connection\n\n\n\n ## Disconnect vs Disable\n Same as above for Connect vs Enable, except in this situation, `disconnect` will first disable the network, and then attempt to remove it (if SSID is passed)\n\n ```typescript\n this.wifiWizard2.disconnect(ssid)\n ```\n - `ssid` can either be an SSID (string) or a network ID (integer)\n - `ssid` is **OPTIONAL** .. if not passed, will disconnect current WiFi (almost all Android versions now will just automatically reconnect to last wifi after disconnecting)\n - If `ssid` is provided, this method will first attempt to `disable` and then `remove` the network\n - If you do not want to remove network configuration, use `disable` instead\n\n **Thrown Errors**\n\n - `DISCONNECT_NET_REMOVE_ERROR` Android returned error when removing wifi configuration\n - `DISCONNECT_NET_DISABLE_ERROR` Unable to connect based on generated wifi config\n - `DISCONNECT_NET_ID_NOT_FOUND` Unable to determine network ID to disconnect/remove (from passed SSID)\n - `ERROR_DISCONNECT` - Android error disconnecting wifi (only when SSID is not passed)\n\n ```typescript\n this.wifiWizard2.formatWifiConfig(ssid, password, algorithm, isHiddenSSID)\n ```\n - `algorithm` and `password` is not required if connecting to an open network\n - Currently `WPA` and `WEP` are only supported algorithms\n - For `WPA2` just pass `WPA` as the algorithm\n - Set `isHiddenSSID` to `true` if the network you're connecting to is hidden\n ```typescript\n this.wifiWizard2.formatWPAConfig(ssid, password, isHiddenSSID)\n ```\n - This is just a helper method that calls `WifiWizard2.formatWifiConfig( ssid, password, 'WPA', isHiddenSSID );`\n\n ```typescript\n this.wifiWizard2.add(wifi)\n ```\n - `wifi` must be an object formatted by `formatWifiConfig`, this **must** be done before calling `enable`\n\n **Thrown Errors**\n\n - `AUTH_TYPE_NOT_SUPPORTED` - Invalid auth type specified\n - `ERROR_ADDING_NETWORK` - Android returned `-1` specifying error adding network\n - `ERROR_UPDATING_NETWORK` - Same as above, except an existing network ID was found, and unable to update it\n\n ```typescript\n this.wifiWizard2.remove(ssid)\n ```\n - `ssid` can either be an SSID (string) or a network ID (integer)\n - Please note, most newer versions of Android will only allow wifi to be removed if created by your application\n\n **Thrown Errors**\n\n - `UNABLE_TO_REMOVE` Android returned failure in removing network\n - `REMOVE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID\n\n\n ```typescript\n this.wifiWizard2.listNetworks()\n ```\n\n ```typescript\n this.wifiWizard2.scan([options])\n ```\n - Same as calling `startScan` and then `getScanResults`, except this method will only resolve the promise after the scan completes and returns the results.\n\n ```typescript\n this.wifiWizard2.startScan()\n ```\n - It is recommended to just use the `scan` method instead of `startScan`\n\n **Thrown Errors**\n\n - `STARTSCAN_FAILED` Android returned failure in starting scan\n\n\n ```typescript\n this.wifiWizard2.getScanResults([options])\n ```\n - `getScanResults` should only be called after calling `startScan` (it is recommended to use `scan` instead as this starts the scan, then returns the results)\n - `[options]` is optional, if you do not want to specify, just pass `success` callback as first parameter, and `fail` callback as second parameter\n - Retrieves a list of the available networks as an array of objects and passes them to the function listHandler. The format of the array is:\n ```typescript\n networks = [\n {   \"level\": signal_level, // raw RSSI value\n        \"SSID\": ssid, // SSID as string, with escaped double quotes: \"\\\"ssid name\\\"\"\n        \"BSSID\": bssid // MAC address of WiFi router as string\n        \"frequency\": frequency of the access point channel in MHz\n        \"capabilities\": capabilities // Describes the authentication, key management, and encryption schemes supported by the access point.\n        \"timestamp\": timestamp // timestamp of when the scan was completed\n        \"channelWidth\":\n        \"centerFreq0\":\n        \"centerFreq1\":\n    }\n ]\n ```\n - `channelWidth` `centerFreq0` and `centerFreq1` are only supported on API > 23 (Marshmallow), any older API will return null for these values\n\n An options object may be passed. Currently, the only supported option is `numLevels`, and it has the following behavior:\n\n - if `(n == true || n < 2)`, `*.getScanResults({numLevels: n})` will return data as before, split in 5 levels;\n - if `(n > 1)`, `*.getScanResults({numLevels: n})` will calculate the signal level, split in n levels;\n - if `(n == false)`, `*.getScanResults({numLevels: n})` will use the raw signal level;\n\n ```typescript\n this.wifiWizard2.isWifiEnabled()\n ```\n - Returns boolean value of whether Wifi is enabled or not\n ```typescript\n this.wifiWizard2.setWifiEnabled(enabled)\n ```\n - Pass `true` for `enabled` parameter to set Wifi enabled\n - You do not need to call this function to set WiFi enabled to call other methods that require wifi enabled.  This plugin will automagically enable WiFi if a method is called that requires WiFi to be enabled.\n\n **Thrown Errors**\n\n - `ERROR_SETWIFIENABLED` wifi state does not match call (enable or disable)\n\n ```typescript\n this.wifiWizard2.getConnectedNetworkID()\n ```\n - Returns currently connected network ID in success callback (only if connected), otherwise fail callback will be called\n\n **Thrown Errors**\n\n - `GET_CONNECTED_NET_ID_ERROR` Unable to determine currently connected network ID (may not be connected)\n\n ## New to 3.1.1+\n ```typescript\n this.wifiWizard2.resetBindAll()\n ```\n - Disable bindAll to WiFi network without disconnecting from WiFi\n\n ```typescript\n this.wifiWizard2.setBindAll()\n ```\n - Enable bindAll to WiFi network without disconnecting from WiFi\n\n ```typescript\n this.wifiWizard2.canConnectToInternet()\n ```\n\n - Returns boolean, true or false, if device is able to connect to https://www.google.com via HTTP connection (since ping is unreliable)\n - Unknown errors will still be thrown like all other async functions\n - If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection.\n - If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)\n\n\n ```typescript\n this.wifiWizard2.canConnectToRouter()\n ```\n - As `canPingWifiRouter` is notoriously unreliable, this method uses HTTP connection to test if able to connect to router (as most routers should have web server running on port 80)\n - Unknown errors will still be thrown like all other async functions\n - This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi\n - This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)\n - Attempts to connect router IP HTTP server on port 80 (example: `http://192.168.0.1/` where `192.168.0.1` is the automatically detected IP address)\n\n ## New to 3.0.0+\n ```typescript\n this.wifiWizard2.isConnectedToInternet()\n ```\n\n - Returns boolean, true or false, if device is able to ping 8.8.8.8\n - Unknown errors will still be thrown like all other async functions\n - If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection.\n - If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)\n\n ```typescript\n this.wifiWizard2.canPingWifiRouter()\n ```\n\n - Returns boolean, true or false, if device is able to ping the connected WiFi router IP (obtained from DHCP info)\n - Version 3.1.1+ uses HTTP connection to test if able to connect to router (as ping previous did not work)\n - Unknown errors will still be thrown like all other async functions\n - This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi\n - This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)\n\n ```typescript\n this.wifiWizard2.enableWifi()\n ```\n\n ```typescript\n this.wifiWizard2.disableWifi()\n ```\n\n ```typescript\n this.wifiWizard2.getWifiIP()\n ```\n - Returns IPv4 address of currently connected WiFi, or rejects promise if IP not found or wifi not connected\n\n ```typescript\n this.wifiWizard2.getWifiRouterIP()\n ```\n - Returns IPv4 WiFi router IP from currently connected WiFi, or rejects promise if unable to determine, or wifi not connected\n\n **Thrown Errors**\n\n - `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`)\n\n ```typescript\n this.wifiWizard2.getWifiIPInfo()\n ```\n - Returns a JSON object with IPv4 address and subnet `{\"ip\": \"192.168.1.2\", \"subnet\": \"255.255.255.0\" }` or rejected promise if not found or not connected\n **Thrown Errors**\n\n - `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`)\n\n ```typescript\n this.wifiWizard2.reconnect()\n ```\n - Reconnect to the currently active access point, **if we are currently disconnected.**\n\n **Thrown Errors**\n\n - `ERROR_RECONNECT` Android returned error when reconnecting\n\n ```typescript\n this.wifiWizard2.reassociate()\n ```\n - Reconnect to the currently active access point, **even if we are already connected.**\n\n **Thrown Errors**\n\n - `ERROR_REASSOCIATE` Android returned error when reassociating\n\n\n ```typescript\n this.wifiWizard2.getSSIDNetworkID(ssid)\n ```\n - Get Android Network ID from passed SSID\n\n ```typescript\n this.wifiWizard2.disable(ssid)\n ```\n - `ssid` can either be an SSID (string) or a network ID (integer)\n - Disable the passed SSID network\n - Please note that most newer versions of Android will only allow you to disable networks created by your application\n\n **Thrown Errors**\n\n - `UNABLE_TO_DISABLE` Android returned failure in disabling network\n - `DISABLE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID to disable\n\n\n ```typescript\n this.wifiWizard2.requestPermission()\n ```\n - Request `ACCESS_FINE_LOCATION` permssion\n - This Android permission is required to run `scan`, `startStart` and `getScanResults`\n - You can request permission by running this function manually, or WifiWizard2 will automagically request permission when one of the functions above is called\n\n **Thrown Errors**\n\n - `PERMISSION_DENIED` user denied permission on device\n\n\n ```typescript\n this.wifiWizard2.enable(ssid, bindAll, waitForConnection)\n ```\n - `ssid` can either be an SSID (string) or a network ID (integer)\n - `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection\n - Android Lollipop+ (API 21+) will not route connections to the WiFi device if it does not have internet connection.  Passing `true` to `bindAll` will force Android to route connections from your Android app through Wifi, regardless of internet connection.\n - If you are having problems connecting to a local IP through WiFi because it does not have internet, try enabling `bindAll` and this should fix the problem.\n - During my testing, some versions of Android (5.0 - 7.1.2) would still route connections through WiFi without internet, but it was random that some versions would and would not work.\n - Testing Android Oreo+ (8.0.0+) if wifi does not have internet, 100% of the time it would NOT route connections through WiFi, so you *must* enable this for Oreo or newer to route connections from your application through wifi without internet.\n - When `bindAll` is enabled, *ALL* connections from your app will be routed through WiFi, until you call `disconnect` or `disable`\n - See the Google Android Blog for [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)\n - This feature *ONLY* works for Android Lollipop+ (API 21+), if device is running API older than 21, `bindall` will be ignored (as API older than 21 does this by default)\n - Enable the passed SSID network\n - You **MUST** call `WifiWizard2.add(wifi)` before calling `enable` as the wifi configuration must exist before you can enable it (or previously used `connect` without calling `disconnect`)\n - This method does NOT wait or verify connection to wifi network, pass `true` to `waitForConnection` to only return promise once connection is verified in COMPLETED state to specific `ssid`\n\n **Thrown Errors**\n\n `UNABLE_TO_ENABLE` - Android returned `-1` signifying failure enabling\n\n # Installation\n\n ## Master\n\n Run ```cordova plugin add https://github.com/tripflex/wifiwizard2```\n\n To install from the master branch (latest on GitHub)\n\n To install a specific branch (add `#tag` replacing `tag` with tag from this repo, example:\n ```cordova plugin add https://github.com/tripflex/wifiwizard2#v3.1.1```\n\n Find available tags here:\n https://github.com/tripflex/WifiWizard2/tags\n\n\n If you are wanting to have the latest and greatest stable version, then run the 'Releases' command below.\n\n ## Releases\n Run ```cordova plugin add cordova-plugin-wifiwizard2```\n\n ## Meteor\n To install and use this plugin in a Meteor project, you have to specify the exact version from NPM repository:\n [https://www.npmjs.com/package/cordova-plugin-wifiwizard2](https://www.npmjs.com/package/cordova-plugin-wifiwizard2)\n\n As of April 4th 2019, the latest version is 3.1.1:\n\n ```meteor add cordova:cordova-plugin-wifiwizard2@3.1.1```\n\n # Errors/Rejections\n Methods now return formatted string errors as detailed below, instead of returning generic error messages.  This allows you to check yourself what specific error was returned, and customize the error message.\n In an upcoming release I may add easy ways to override generic messages, or set your own, but for now, errors returned can be found below each method/function.\n\n ## Generic **Thrown Errors**\n `WIFI_NOT_ENABLED`\n ```\n",
     "platforms": [
       "Android",
@@ -4258,7 +4258,7 @@
   {
     "packageName": "@awesome-cordova-plugins/wonderpush",
     "displayName": "Push Notifications - WonderPush",
-    "description": "\n\nSend unlimited push notifications to iOS and Android devices.\n\nGet started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).\n\nAdvanced segmentation, automation and personalization of push messages for €1 per 1000 subscribers.\n\nRequires the Cordova plugin `wonderpush-cordova-sdk`.\n\n[WonderPush push notifications](https://www.wonderpush.com) are the most effective way\nto retain your users and grow your audience while remaining fully GDPR compliant.\n",
+    "description": "Send unlimited push notifications to iOS and Android devices.\n\nGet started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).\n\nAdvanced segmentation, automation and personalization of push messages for €1 per 1000 subscribers.\n\nRequires the Cordova plugin `wonderpush-cordova-sdk`.\n\n[WonderPush push notifications](https://www.wonderpush.com) are the most effective way\nto retain your users and grow your audience while remaining fully GDPR compliant.\n",
     "usage": "\n```typescript\nimport { WonderPush } from '@awesome-cordova-plugins/wonderpush';\n\n\nconstructor(private wonderPush: WonderPush) { }\n\n...\n\n// Subscribe user\nthis.wonderPush.subscribeToNotifications()\n  .then(() => console.log(\"User subscribed to notifications\"))\n  .catch((error: any) => console.error(error));\n\n\n// Send an event (a purchase in this example)\nthis.wonderPush.sendEvent('purchase', {\n  float_price: 12.99,\n  string_sku: \"X123456\"\n});\n\n// Tag users (as customers)\nthis.wonderPush.addTag('customer');\n\n// Personalize\n// 1. Store user details.\n// 2. Use those details to create segments.\n// 3. Include those details in your notifications.\nthis.wonderPush.putProperties({\n  string_name: 'John D.',\n  int_age: 24\n});\n\n// GDPR\n// 1. set REQUIRES_USER_CONSENT=true to enable GDPR compliance.\n// 2. WonderPush doesn't start until setUserConsent(true) is called.\nconst onClick = (userConsent: boolean) => this.wonderPush.setUserConsent(userConsent);\n\n// Listen to notification clicks\ndocument.addEventListener('wonderpush.notificationOpen', function(event) {\n  console.log('Notification opened', event.notification);\n  if (event.notificationType === 'data') {\n    console.log('Silent notification', event.notification);\n  }\n});\n```\n",
     "platforms": [
       "Android",
@@ -4276,7 +4276,7 @@
   {
     "packageName": "@awesome-cordova-plugins/youtube-video-player",
     "displayName": "Youtube Video Player",
-    "description": "\nPlays YouTube videos in Native YouTube App\n",
+    "description": "Plays YouTube videos in Native YouTube App\n",
     "usage": "\nFor Android 5.0+ you will need to add the following to config.xml\n```xml\n<preference name=\"YouTubeDataApiKey\" value=\"[YOUR YOUTUBE API]\" />\n```\nFor more information: https://developers.google.com/youtube/v3/getting-started\n\n\n```typescript\nimport { YoutubeVideoPlayer } from '@awesome-cordova-plugins/youtube-video-player/ngx';\n\nconstructor(private youtube: YoutubeVideoPlayer) { }\n\n...\n\n\nthis.youtube.openVideo('myvideoid');\n\n```\n",
     "platforms": [
       "Android",
@@ -4290,7 +4290,7 @@
   {
     "packageName": "@awesome-cordova-plugins/zbar",
     "displayName": "ZBar",
-    "description": "\nThe ZBar Scanner Plugin allows you to scan 2d barcodes.\n\nRequires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).\n",
+    "description": "The ZBar Scanner Plugin allows you to scan 2d barcodes.\n\nRequires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).\n",
     "usage": "\n```typescript\nimport { ZBar, ZBarOptions } from '@awesome-cordova-plugins/zbar/ngx';\n\nconstructor(private zbar: ZBar) { }\n\n...\n\nlet options: ZBarOptions = {\n      flash: 'off',\n      drawSight: false\n    }\n\nthis.zbar.scan(options)\n   .then(result => {\n      console.log(result); // Scanned code\n   })\n   .catch(error => {\n      console.log(error); // Error message\n   });\n\n```\n",
     "platforms": [
       "Android",
@@ -4304,7 +4304,7 @@
   {
     "packageName": "@awesome-cordova-plugins/zeroconf",
     "displayName": "Zeroconf",
-    "description": "\nThis plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.",
+    "description": "This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.\n",
     "usage": "\n```typescript\nimport { Zeroconf } from '@awesome-cordova-plugins/zeroconf/ngx';\n\nconstructor(private zeroconf: Zeroconf) { }\n\n...\n\n// watch for services of a specified type\nthis.zeroconf.watch('_http._tcp.', 'local.').subscribe(result => {\n  if (result.action == 'added') {\n    console.log('service added', result.service);\n  } else {\n    console.log('service removed', result.service);\n  }\n});\n\n// publish a zeroconf service of your own\nthis.zeroconf.register('_http._tcp.', 'local.', 'Becvert\\'s iPad', 80, {\n  'foo': 'bar'\n}).then(result => {\n  console.log('Service registered', result.service);\n});\n\n\n// unregister your service\nthis.zeroconf.unregister('_http._tcp.', 'local.', 'Becvert\\'s iPad');\n```\n",
     "platforms": [
       "Android",
@@ -4318,7 +4318,7 @@
   {
     "packageName": "@awesome-cordova-plugins/zip",
     "displayName": "Zip",
-    "description": "\nA Cordova plugin to unzip files in Android and iOS.\n",
+    "description": "A Cordova plugin to unzip files in Android and iOS.\n",
     "usage": "\n```typescript\nimport { Zip } from '@awesome-cordova-plugins/zip/ngx';\n\nconstructor(private zip: Zip) { }\n\n...\n\nthis.zip.unzip('path/to/source.zip', 'path/to/dest', (progress) => console.log('Unzipping, ' + Math.round((progress.loaded / progress.total) * 100) + '%'))\n .then((result) => {\n   if(result === 0) console.log('SUCCESS');\n   if(result === -1) console.log('FAILED');\n });\n\n```\n",
     "platforms": [
       "Android",
@@ -4332,7 +4332,7 @@
   {
     "packageName": "@awesome-cordova-plugins/zoom",
     "displayName": "Zoom",
-    "description": "\nA Cordova plugin to use Zoom Video Conferencing services on Cordova applications.\n",
+    "description": "A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.\n",
     "usage": "\n```typescript\nimport { Zoom } from '@awesome-cordova-plugins/zoom';\n\n\nconstructor(private zoomService: Zoom) { }\n\n...\n\n// Initialize Zoom SDK, need to be called when app fired up.\nthis.zoomService.initialize(API_KEY, API_SECRET)\n  .then((success: any) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// Log user in with Zoom username and password.\nthis.zoomService.login(userName, password)\n  .then((success: any) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// Log user out.\nthis.zoomService.logout()\n  .then((success: boolean) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// Check whether user is logged in.\nthis.zoomService.isLoggedIn()\n  .then((success: boolean) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// meeting options (Only available for Android)\nlet options = {\n\"no_driving_mode\":true,\n\"no_invite\":true,\n\"no_meeting_end_message\":true,\n\"no_titlebar\":false,\n\"no_bottom_toolbar\":false,\n\"no_dial_in_via_phone\":true,\n\"no_dial_out_to_phone\":true,\n\"no_disconnect_audio\":true,\n\"no_share\":true,\n\"no_audio\":true,\n\"no_video\":true,\n\"no_meeting_error_message\":true\n};\n\n// Join meeting.\nthis.zoomService.joinMeeting(meetingNumber, meetingPassword, displayName, options)\n  .then((success: any) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// Start an existing meeting for non-login user.\nthis.zoomService.startMeetingWithZAK(meetingNumber, displayName, zoomToken, zoomAccessToken, userId, options)\n  .then((success: any) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// Start an existing meeting for logged in user.\nthis.zoomService.startMeeting(meetingNumber, vanityId, options)\n  .then((success: any) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// Start an instant meeting for logged in user.\nthis.zoomService.startInstantMeeting()\n  .then((success: anu) => console.log(success))\n  .catch((error: any) => console.log(error));\n\n// Set language.\nthis.zoomService.setLanguage(\"en-US\")\n  .then((success: any) => console.log(success))\n  .catch((error: any) => console.log(error));\n```\n",
     "platforms": [
       "Android",
diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index a0950441fb8..dc2e6d6e740 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -5,4 +5,4 @@ set -o nounset
 mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v6/
 curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
   tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v6/ --strip-components 2 ionic-docs-translation-jp/docs
-node scripts/api-ja.js
+# node scripts/api-ja.js
diff --git a/src/components/page/reference/ReleaseNotes/release-notes.json b/src/components/page/reference/ReleaseNotes/release-notes.json
index 0d8ab485b48..2d4934fb691 100644
--- a/src/components/page/reference/ReleaseNotes/release-notes.json
+++ b/src/components/page/reference/ReleaseNotes/release-notes.json
@@ -1,72 +1,50 @@
 [
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v7.0.0...v7.0.1\">7.0.1</a> (2023-04-05)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>breadcrumbs:</strong> color attribute shows on DOM for Vue (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27068\">#27068</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/141ced50103098fd711e0088ea8be4efdaadd0a9\">141ced5</a>)</li>\n<li><strong>item-divider:</strong> removal of unneeded margin unset (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27042\">#27042</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d925237082cd2f55a573ddb0301afcbd84f4fda0\">d925237</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/17012\">#17012</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/27024\">ionic-team/ionic-framework#27024</a></li>\n<li><strong>item-divider:</strong> set padding-end for md (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27019\">#27019</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/426913d0de50e65a76b029258daa09e6567c6515\">426913d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23785\">#23785</a></li>\n<li><strong>menu:</strong> update location when dynamically changing side or doc dir (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27079\">#27079</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a35886e71c7c4b8abdd01ad33d92828c04249dc5\">a35886e</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25601\">#25601</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/19489\">#19489</a></li>\n<li><strong>picker-column-internal:</strong> hide empty picker items from screenreaders (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27038\">#27038</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/4e7424de035888e324b03af321c90ebbb6402746\">4e7424d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26809\">#26809</a></li>\n<li><strong>refresher:</strong> set overflow styles when using custom scroll target (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27058\">#27058</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/adbb50ca5b92793ba002e4d704b2a643b92aabc7\">adbb50c</a>)</li>\n<li><strong>vue:</strong> v-model props have correct type (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27067\">#27067</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/14145dcaebef4dde7654317597fdee6a0cdb4bfa\">14145dc</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27057\">#27057</a></li>\n</ul>\n",
-    "element": "Unobtainium",
-    "name": "v7.0.1",
-    "published_at": "April 5 2023",
-    "symbol": "Uo",
-    "tag_name": "v7.0.1",
+    "body": "<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> menu button is enabled with Angular Universal builds (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27814\">#27814</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2cf1a0bcae7d766aa25951c53470876f9569906c\">2cf1a0b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27524\">#27524</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/22206\">#22206</a></li>\n<li><strong>button:</strong> submit form when pressing enter key (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27790\">#27790</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b78af7598f19ca5e1b440ddc0091a62d86321066\">b78af75</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19368\">#19368</a></li>\n<li><strong>radio, checkbox, toggle:</strong> add top and bottom margins when in ion-item (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27788\">#27788</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/35f0ec581a55e0cb080f0793fb94d3e424c06d4d\">35f0ec5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27498\">#27498</a></li>\n<li>safari no longer adjusts text in landscape (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27787\">#27787</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/66584b03d0b33507170f954009998c72fb3f7755\">66584b0</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27782\">#27782</a></li>\n<li><strong>textarea:</strong> stacked/floating textarea size is correct on safari (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27766\">#27766</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2cb701395487c6a0304400f6b821659ae6def820\">2cb7013</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27345\">#27345</a></li>\n</ul>\n",
+    "name": "v7.1.4",
+    "published_at": "July 19 2023",
+    "tag_name": "v7.1.4",
     "type": "patch",
-    "version": "7.0.1"
+    "version": "7.1.4"
   },
   {
-    "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.5...v7.0.0\">7.0.0</a> (2023-03-29)</h1>\n<p>Enjoy! See <a href=\"https://ionicframework.com/docs/updating/7-0\">https://ionicframework.com/docs/updating/7-0</a> for a migration guide.</p>\n",
-    "element": "Unobtainium",
-    "name": "v7.0.0",
-    "published_at": "March 30 2023",
-    "symbol": "Uo",
-    "tag_name": "v7.0.0",
-    "type": "major",
-    "version": "7.0.0"
+    "body": "<h3>Bug Fixes</h3>\n<ul>\n<li>avoid unresolved import warning on stencil apps (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27765\">#27765</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2085025644f075e63d04bece56eca4f2beeadbb6\">2085025</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27762\">#27762</a></li>\n<li><strong>overlays:</strong> first button is not focused on backdrop tap (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27774\">#27774</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b\">82c568b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27773\">#27773</a></li>\n</ul>\n",
+    "name": "v7.1.3",
+    "published_at": "July 12 2023",
+    "tag_name": "v7.1.3",
+    "type": "patch",
+    "version": "7.1.3"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.7.1...v6.7.2\">6.7.2</a> (2023-04-05)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>item-divider:</strong> set padding-end for md (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27070\">#27070</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/214e83529f7115852c27a37869c8231330fdb8ac\">214e835</a>)</li>\n<li><strong>picker-column-internal:</strong> hide empty picker items from screenreaders (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27114\">#27114</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3ecfb9ce43d9d5cf93f1f2be26a0922a16894362\">3ecfb9c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26809\">#26809</a></li>\n</ul>\n",
-    "element": "Unobtainium",
-    "name": "v6.7.2",
-    "published_at": "April 5 2023",
-    "symbol": "Uo",
-    "tag_name": "v6.7.2",
+    "body": "<h3>Bug Fixes</h3>\n<ul>\n<li><strong>back-button:</strong> show correct background on focus + hover with ios (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27723\">#27723</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/db9a0010df3c7fd0fcd0dbcd8c4ad3b30d022b5c\">db9a001</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27722\">#27722</a></li>\n<li><strong>nav:</strong> root component is mounted with root params (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27676\">#27676</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1f06be4a31965f2a949b4866a585aee6af0af29d\">1f06be4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27146\">#27146</a></li>\n</ul>\n",
+    "name": "v7.1.2",
+    "published_at": "July 7 2023",
+    "tag_name": "v7.1.2",
     "type": "patch",
-    "version": "6.7.2"
+    "version": "7.1.2"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.7.0...v6.7.1\">6.7.1</a> (2023-03-29)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>item-sliding:</strong> open method works with items added async (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27035\">#27035</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/521063bf241dc2c55bcd02a92ed8a418cfec6b1e\">521063b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26991\">#26991</a></li>\n<li><strong>item:</strong> use thumbnail's size when present (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27014\">#27014</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6cecdf41451a5c7aa908494dfad9fab1496a0c6c\">6cecdf4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22935\">#22935</a></li>\n<li><strong>radio-group:</strong> radios participate in form submission (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27018\">#27018</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3b99c31bab41bf7fcec340ac7159d3e8fce126c1\">3b99c31</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27016\">#27016</a></li>\n<li><strong>select:</strong> inherit white-space in select-text to allow text wrapping (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26973\">#26973</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/19c1e25399ca18c8e6a8dd39c0131979c0bb01e9\">19c1e25</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19949\">#19949</a></li>\n</ul>\n",
-    "element": "Unobtainium",
-    "name": "v6.7.1",
-    "published_at": "March 29 2023",
-    "symbol": "Uo",
-    "tag_name": "v6.7.1",
+    "body": "<h3>Bug Fixes</h3>\n<ul>\n<li><strong>textarea:</strong> autogrow resizes correctly (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27691\">#27691</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f263611260c465bfeefc2db7b1ea04bfa5b54303\">f263611</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27688\">#27688</a></li>\n</ul>\n",
+    "name": "v7.1.1",
+    "published_at": "June 26 2023",
+    "tag_name": "v7.1.1",
     "type": "patch",
-    "version": "6.7.1"
+    "version": "7.1.1"
   },
   {
-    "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.3...v6.7.0\">6.7.0</a> (2023-03-23)</h1>\n<h3>Features</h3>\n<ul>\n<li><strong>config:</strong> add option to disable custom html functionality (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26956\">#26956</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3b0af7c55d4fa039be33d6605414761494d5af8f\">3b0af7c</a>)</li>\n</ul>\n",
-    "element": "Unobtainium",
-    "name": "v6.7.0",
-    "published_at": "March 23 2023",
-    "symbol": "Uo",
-    "tag_name": "v6.7.0",
+    "body": "<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> tabs supports conditional slot bindings (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27582\">#27582</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d20bea561c362eacd250cdedbc9b79159eb2c95f\">d20bea5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19484\">#19484</a></li>\n<li><strong>datetime:</strong> ascending order for years (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27551\">#27551</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/209880622a4600f88c4878e82975ad0492bd55db\">2098806</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27422\">#27422</a></li>\n<li><strong>select:</strong> hide notch cutout if no visible label provided (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27649\">#27649</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/606a892e400a531cac5c413dc7492a54ae0e1fea\">606a892</a>)</li>\n</ul>\n<h3>Features</h3>\n<ul>\n<li><strong>datetime:</strong> add part for month/year button (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27618\">#27618</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d44422e224374804010746a12f398d3c0d6a9f2c\">d44422e</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26596\">#26596</a></li>\n<li><strong>datetime:</strong> add shadow parts and CSS variables for styling wheel pickers (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27529\">#27529</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f2c1845fba11d8273331c601052f0f34457b6649\">f2c1845</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25945\">#25945</a></li>\n<li><strong>input:</strong> add experimental label slot (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27650\">#27650</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a45395cc02b2617b80e6c2389fa745e7c20540fc\">a45395c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27061\">#27061</a></li>\n<li><strong>range:</strong> add label prop (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27408\">#27408</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/368add2a5ca3820a1f9623c96d29bcccfa693fdc\">368add2</a>)</li>\n<li>return if the pop on NavController was successful (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27404\">#27404</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/e80f0b240968de0d642463e95a35adf8dbffd2e1\">e80f0b2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27403\">#27403</a></li>\n<li><strong>segment, segment-button:</strong> update segment value property to accept numbers (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27222\">#27222</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e\">ec95ae5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27221\">#27221</a></li>\n<li><strong>segment:</strong> display segment as a grid and add an ellipsis to overflowing text in a segment button  (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27457\">#27457</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/448e63fef0aca603214cb357dec37e1db2a0f052\">448e63f</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/16532\">#16532</a></li>\n<li><strong>select:</strong> add label slot (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27545\">#27545</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/af92cb28c8819c88b40192b5dcbafedc1eb2064a\">af92cb2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26838\">#26838</a></li>\n<li><strong>select:</strong> add props to customize toggle icons (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27648\">#27648</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/95e28b6629843af7dce62f20bc8e31adfb391990\">95e28b6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/17248\">#17248</a></li>\n<li><strong>select:</strong> expose container and label as CSS parts  (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27541\">#27541</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5c10f88b2eb4d869966ea9a6d1db34185cefe676\">5c10f88</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27112\">#27112</a></li>\n<li><strong>textarea:</strong> add experimental label slot (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27677\">#27677</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8bcd9e8b35f252a4efaec7a7be7d69a70beefa9f\">8bcd9e8</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27061\">#27061</a></li>\n</ul>\n",
+    "name": "v7.1.0",
+    "published_at": "June 21 2023",
+    "tag_name": "v7.1.0",
     "type": "minor",
-    "version": "6.7.0"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.2...v6.6.3\">6.6.3</a> (2023-03-22)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>menu:</strong> main content is not scrollable while swiping (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26976\">#26976</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/88bd8a47c5e844d1d3a2b3b13621826faf776afb\">88bd8a4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/21193\">#21193</a></li>\n</ul>\n",
-    "element": "Nickel",
-    "name": "v6.6.3",
-    "published_at": "March 22 2023",
-    "symbol": "Ni",
-    "tag_name": "v6.6.3",
-    "type": "patch",
-    "version": "6.6.3"
+    "version": "7.1.0"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v6.6.2\">6.6.2</a> (2023-03-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>accordion:</strong> include margins during expand animation (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26390\">#26390</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f80991813ae8873d8ef6038b0aeb763d727f402e\">f809918</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26381\">#26381</a></li>\n<li><strong>IonicSlides:</strong> remove unnecessary autoplay option (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26935\">#26935</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b8f893731471052df198824b7ece47606ffcc500\">b8f8937</a>)</li>\n<li><strong>radio:</strong> checked state is updated when value changes (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26936\">#26936</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/27a5356fa2b72073d565e9d6f527107869faa3ee\">27a5356</a>)</li>\n<li><strong>react/vue:</strong> properly switch ionicon based on the mode when ios/md is set (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26924\">#26924</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae\">1eb9a08</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26207\">#26207</a></li>\n<li><strong>textarea:</strong> inherit tabindex to inner textarea (<a href=\"https://github.com/ionic-team/ionic-framework/issues/26945\">#26945</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2c68d01b898a2f879445b8b64014189afe1255d7\">2c68d01</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/26944\">#26944</a></li>\n</ul>\n",
-    "element": "Nickel",
-    "name": "v6.6.2",
-    "published_at": "March 15 2023",
-    "symbol": "Ni",
-    "tag_name": "v6.6.2",
+    "body": "<h3>Bug Fixes</h3>\n<ul>\n<li><strong>keyboard:</strong> keyboard events emit correctly when Capacitor is available but the Keyboard plugin is not (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27655\">#27655</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7a38a006a94f1240d93102f2f42bbfc4d76a679e\">7a38a00</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27654\">#27654</a></li>\n<li><strong>toast:</strong> allow color for translucent toast (<a href=\"https://github.com/ionic-team/ionic-framework/issues/27652\">#27652</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d555375c146639b32e85c57a8cdd4d52313ef4cf\">d555375</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/27567\">#27567</a></li>\n</ul>\n",
+    "name": "v7.0.14",
+    "published_at": "June 16 2023",
+    "tag_name": "v7.0.14",
     "type": "patch",
-    "version": "6.6.2"
+    "version": "7.0.14"
   }
 ]
diff --git a/src/translate/.detection/api/datetime.json b/src/translate/.detection/api/datetime.json
index 2559aafb7b5..3c5637d3ed6 100644
--- a/src/translate/.detection/api/datetime.json
+++ b/src/translate/.detection/api/datetime.json
@@ -19,6 +19,26 @@
     {
       "name": "slot",
       "text": "time-label - The label for the time selector in the datetime."
+    },
+    {
+      "name": "part",
+      "text": "wheel-item - The individual items when using a wheel style layout, or in the\nmonth/year picker when using a grid style layout."
+    },
+    {
+      "name": "part",
+      "text": "wheel-item active - The currently selected wheel-item."
+    },
+    {
+      "name": "part",
+      "text": "time-button - The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."
+    },
+    {
+      "name": "part",
+      "text": "time-button active - The time picker button when the picker is open."
+    },
+    {
+      "name": "part",
+      "text": "month-year-button - The button that opens the month/year picker when\nusing a grid style layout."
     }
   ],
   "usage": {},
@@ -655,7 +675,7 @@
       "mutable": false,
       "attr": "year-values",
       "reflectToAttr": false,
-      "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.",
+      "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2008,2012,2016,2020,2024\"`.",
       "docsTags": [],
       "values": [
         {
@@ -764,6 +784,16 @@
       "name": "--title-color",
       "annotation": "prop",
       "docs": "The text color of the title."
+    },
+    {
+      "name": "--wheel-fade-background-rgb",
+      "annotation": "prop",
+      "docs": "The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. `255, 255, 255`."
+    },
+    {
+      "name": "--wheel-highlight-background",
+      "annotation": "prop",
+      "docs": "The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."
     }
   ],
   "slots": [
@@ -780,7 +810,28 @@
       "docs": "The title of the datetime."
     }
   ],
-  "parts": [],
+  "parts": [
+    {
+      "name": "month-year-button",
+      "docs": "The button that opens the month/year picker when\nusing a grid style layout."
+    },
+    {
+      "name": "time-button",
+      "docs": "The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."
+    },
+    {
+      "name": "time-button active",
+      "docs": "The time picker button when the picker is open."
+    },
+    {
+      "name": "wheel-item",
+      "docs": "The individual items when using a wheel style layout, or in the\nmonth/year picker when using a grid style layout."
+    },
+    {
+      "name": "wheel-item active",
+      "docs": "The currently selected wheel-item."
+    }
+  ],
   "dependents": [],
   "dependencies": [
     "ion-buttons",
diff --git a/src/translate/.detection/api/input.json b/src/translate/.detection/api/input.json
index ef6164f4516..69e165cdcfc 100644
--- a/src/translate/.detection/api/input.json
+++ b/src/translate/.detection/api/input.json
@@ -7,6 +7,10 @@
     {
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+    },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
     }
   ],
   "usage": {},
@@ -643,7 +647,7 @@
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
-      "docs": "The visible label associated with the input.",
+      "docs": "The visible label associated with the input.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
       "docsTags": [],
       "values": [
         {
@@ -1104,7 +1108,7 @@
       },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
-      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.",
+      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
       "docsTags": []
     }
   ],
@@ -1124,7 +1128,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionChange` event is fired for `<ion-input>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
+      "docs": "The `ionChange` event is fired when the user modifies the input's value.\nUnlike the `ionInput` event, the `ionChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
       "docsTags": []
     },
     {
@@ -1142,7 +1146,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionInput` event fires when the `value` of an `<ion-input>` element\nhas been changed.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
+      "docs": "The `ionInput` event is fired each time the user modifies the input's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
       "docsTags": []
     }
   ],
@@ -1161,7 +1165,7 @@
     {
       "name": "--border-radius",
       "annotation": "prop",
-      "docs": "Radius of the input"
+      "docs": "Radius of the input. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
     },
     {
       "name": "--border-style",
@@ -1234,7 +1238,12 @@
       "docs": "Opacity of the input placeholder text"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "label",
+      "docs": "The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+    }
+  ],
   "parts": [],
   "dependents": [],
   "dependencies": [
diff --git a/src/translate/.detection/api/range.json b/src/translate/.detection/api/range.json
index b7774667215..6ad20a7202c 100644
--- a/src/translate/.detection/api/range.json
+++ b/src/translate/.detection/api/range.json
@@ -174,6 +174,25 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The text to display as the control's label. Use this over the `label` slot if\nyou only need plain text. The `label` property will take priority over the\n`label` slot if both are used.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
diff --git a/src/translate/.detection/api/searchbar.json b/src/translate/.detection/api/searchbar.json
index 2b395a040cc..acb6dfc2bda 100644
--- a/src/translate/.detection/api/searchbar.json
+++ b/src/translate/.detection/api/searchbar.json
@@ -537,6 +537,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "name",
+      "type": "string",
+      "mutable": false,
+      "attr": "name",
+      "reflectToAttr": false,
+      "docs": "If used in a form, set the name of the control, which is submitted with the form data.",
+      "docsTags": [],
+      "default": "this.inputId",
+      "values": [
+        {
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "placeholder",
       "type": "string",
@@ -728,7 +745,7 @@
       },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
-      "docs": "Sets focus on the specified `ion-searchbar`. Use this method instead of the global\n`input.focus()`.",
+      "docs": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/.detection/api/segment-button.json b/src/translate/.detection/api/segment-button.json
index 2abc08eb2b5..5941ef23559 100644
--- a/src/translate/.detection/api/segment-button.json
+++ b/src/translate/.detection/api/segment-button.json
@@ -26,7 +26,7 @@
     {
       "name": "disabled",
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "attr": "disabled",
       "reflectToAttr": false,
       "docs": "If `true`, the user cannot interact with the segment button.",
@@ -130,7 +130,7 @@
     },
     {
       "name": "value",
-      "type": "string",
+      "type": "number | string",
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -138,6 +138,9 @@
       "docsTags": [],
       "default": "'ion-sb-' + ids++",
       "values": [
+        {
+          "type": "number"
+        },
         {
           "type": "string"
         }
diff --git a/src/translate/.detection/api/segment.json b/src/translate/.detection/api/segment.json
index dfd6d5af642..ca1bb642a35 100644
--- a/src/translate/.detection/api/segment.json
+++ b/src/translate/.detection/api/segment.json
@@ -157,13 +157,16 @@
     },
     {
       "name": "value",
-      "type": "string | undefined",
+      "type": "number | string | undefined",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
       "docs": "the value of the segment.",
       "docsTags": [],
       "values": [
+        {
+          "type": "number"
+        },
         {
           "type": "string"
         },
diff --git a/src/translate/.detection/api/select.json b/src/translate/.detection/api/select.json
index 8bcaf17a8fe..605077bbba5 100644
--- a/src/translate/.detection/api/select.json
+++ b/src/translate/.detection/api/select.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
+    },
     {
       "name": "part",
       "text": "placeholder - The text displayed in the select when there is no value."
@@ -19,6 +23,14 @@
     {
       "name": "part",
       "text": "icon - The select icon container."
+    },
+    {
+      "name": "part",
+      "text": "container - The container for the selected text or placeholder."
+    },
+    {
+      "name": "part",
+      "text": "label - The label text describing the select."
     }
   ],
   "usage": {},
@@ -137,6 +149,25 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "expandedIcon",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "expanded-icon",
+      "reflectToAttr": false,
+      "docs": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
@@ -236,7 +267,7 @@
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
-      "docs": "The visible label associated with the select.",
+      "docs": "The visible label associated with the select.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
       "docsTags": [],
       "values": [
         {
@@ -438,6 +469,25 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "toggleIcon",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "toggle-icon",
+      "reflectToAttr": false,
+      "docs": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "value",
       "type": "any",
@@ -528,39 +578,39 @@
       "docs": "Background of the select"
     },
     {
-      "name": "--border-color Color of the select border",
+      "name": "--border-color",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Color of the select border"
     },
     {
-      "name": "--border-radius Radius of the select border",
+      "name": "--border-radius",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Radius of the select border. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
     },
     {
-      "name": "--border-style Style of the select border",
+      "name": "--border-style",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Style of the select border"
     },
     {
-      "name": "--border-width Width of the select border",
+      "name": "--border-width",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Width of the select border"
     },
     {
-      "name": "--highlight-color-focused The color of the highlight on the select when focused",
+      "name": "--highlight-color-focused",
       "annotation": "prop",
-      "docs": ""
+      "docs": "The color of the highlight on the select when focused"
     },
     {
-      "name": "--highlight-color-invalid The color of the highlight on the select when invalid",
+      "name": "--highlight-color-invalid",
       "annotation": "prop",
-      "docs": ""
+      "docs": "The color of the highlight on the select when invalid"
     },
     {
-      "name": "--highlight-color-valid The color of the highlight on the select when valid",
+      "name": "--highlight-color-valid",
       "annotation": "prop",
-      "docs": ""
+      "docs": "The color of the highlight on the select when valid"
     },
     {
       "name": "--padding-bottom",
@@ -598,12 +648,25 @@
       "docs": "The color of the ripple effect on MD mode."
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "label",
+      "docs": "The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
+    }
+  ],
   "parts": [
+    {
+      "name": "container",
+      "docs": "The container for the selected text or placeholder."
+    },
     {
       "name": "icon",
       "docs": "The select icon container."
     },
+    {
+      "name": "label",
+      "docs": "The label text describing the select."
+    },
     {
       "name": "placeholder",
       "docs": "The text displayed in the select when there is no value."
diff --git a/src/translate/.detection/api/tabs.json b/src/translate/.detection/api/tabs.json
index 6d81519aa15..055e313e9c5 100644
--- a/src/translate/.detection/api/tabs.json
+++ b/src/translate/.detection/api/tabs.json
@@ -28,7 +28,7 @@
       },
       "signature": "getSelected() => Promise<string | undefined>",
       "parameters": [],
-      "docs": "Get the currently selected tab.",
+      "docs": "Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
       "docsTags": []
     },
     {
@@ -39,7 +39,7 @@
       },
       "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
       "parameters": [],
-      "docs": "Get a specific tab by the value of its `tab` property or an element reference.",
+      "docs": "Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
       "docsTags": [
         {
           "name": "param",
@@ -55,7 +55,7 @@
       },
       "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
       "parameters": [],
-      "docs": "Select a tab by the value of its `tab` property or an element reference.",
+      "docs": "Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
       "docsTags": [
         {
           "name": "param",
diff --git a/src/translate/.detection/api/textarea.json b/src/translate/.detection/api/textarea.json
index 3aca0e883c2..58240340488 100644
--- a/src/translate/.detection/api/textarea.json
+++ b/src/translate/.detection/api/textarea.json
@@ -7,6 +7,10 @@
     {
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+    },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
     }
   ],
   "usage": {},
@@ -384,7 +388,7 @@
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
-      "docs": "The visible label associated with the textarea.",
+      "docs": "The visible label associated with the textarea.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
       "docsTags": [],
       "values": [
         {
@@ -727,7 +731,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionChange` event is fired for `<ion-textarea>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the element loses focus after its value\nhas been modified.",
+      "docs": "The `ionChange` event is fired when the user modifies the textarea's value.\nUnlike the `ionInput` event, the `ionChange` event is fired when\nthe element loses focus after its value has been modified.",
       "docsTags": []
     },
     {
@@ -745,7 +749,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionInput` event fires when the `value` of an `<ion-textarea>` element\nhas been changed.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
+      "docs": "The `ionInput` event is fired each time the user modifies the textarea's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the textarea's value. This typically happens for each keystroke as the user types.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
       "docsTags": []
     }
   ],
@@ -837,7 +841,12 @@
       "docs": "Opacity of the placeholder text"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "label",
+      "docs": "The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+    }
+  ],
   "parts": [],
   "dependents": [],
   "dependencies": [],
diff --git a/src/translate/.detection/cli/build.readme.md b/src/translate/.detection/cli/build.readme.md
index 5f6c540c109..7de5f855455 100644
--- a/src/translate/.detection/cli/build.readme.md
+++ b/src/translate/.detection/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-add.readme.md b/src/translate/.detection/cli/capacitor-add.readme.md
index 464a4fb5a49..6a1ecf8bc10 100644
--- a/src/translate/.detection/cli/capacitor-add.readme.md
+++ b/src/translate/.detection/cli/capacitor-add.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor add` will do the following:
-
 - Install the Capacitor platform package
-- Copy the native platform template into your project
+- Copy the native platform template into your project
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-build.readme.md b/src/translate/.detection/cli/capacitor-build.readme.md
index ecbb4a9e00a..0ccb955a383 100644
--- a/src/translate/.detection/cli/capacitor-build.readme.md
+++ b/src/translate/.detection/cli/capacitor-build.readme.md
@@ -1,9 +1,8 @@
 `ionic capacitor build` will do the following:
-
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-copy.readme.md b/src/translate/.detection/cli/capacitor-copy.readme.md
index ad813a2f858..2e5ddd1f0e7 100644
--- a/src/translate/.detection/cli/capacitor-copy.readme.md
+++ b/src/translate/.detection/cli/capacitor-copy.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor copy` will do the following:
-
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
+- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-open.readme.md b/src/translate/.detection/cli/capacitor-open.readme.md
index c52c1f44711..6a4f8a5eeba 100644
--- a/src/translate/.detection/cli/capacitor-open.readme.md
+++ b/src/translate/.detection/cli/capacitor-open.readme.md
@@ -1,3 +1,2 @@
 `ionic capacitor open` will do the following:
-
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-run.readme.md b/src/translate/.detection/cli/capacitor-run.readme.md
index 56a76e0d464..a17e32b9a99 100644
--- a/src/translate/.detection/cli/capacitor-run.readme.md
+++ b/src/translate/.detection/cli/capacitor-run.readme.md
@@ -1,5 +1,4 @@
 `ionic capacitor run` will do the following:
-
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -7,4 +6,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-sync.readme.md b/src/translate/.detection/cli/capacitor-sync.readme.md
index 403ecdf9af3..4ab54b5269d 100644
--- a/src/translate/.detection/cli/capacitor-sync.readme.md
+++ b/src/translate/.detection/cli/capacitor-sync.readme.md
@@ -1,6 +1,5 @@
 `ionic capacitor sync` will do the following:
-
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-update.readme.md b/src/translate/.detection/cli/capacitor-update.readme.md
index 6691448d373..6941a9bbe77 100644
--- a/src/translate/.detection/cli/capacitor-update.readme.md
+++ b/src/translate/.detection/cli/capacitor-update.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor update` will do the following:
-
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/.detection/cli/completion.readme.md b/src/translate/.detection/cli/completion.readme.md
index 98969ac91c0..c614f27c143 100644
--- a/src/translate/.detection/cli/completion.readme.md
+++ b/src/translate/.detection/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/config-get.readme.md b/src/translate/.detection/cli/config-get.readme.md
index b993225035b..ecfdc6708ac 100644
--- a/src/translate/.detection/cli/config-get.readme.md
+++ b/src/translate/.detection/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/config-set.readme.md b/src/translate/.detection/cli/config-set.readme.md
index 4cfe7872088..fd2916c6e27 100644
--- a/src/translate/.detection/cli/config-set.readme.md
+++ b/src/translate/.detection/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/config-unset.readme.md b/src/translate/.detection/cli/config-unset.readme.md
index 7dca73c33a4..9b7c09a8699 100644
--- a/src/translate/.detection/cli/config-unset.readme.md
+++ b/src/translate/.detection/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-build.readme.md b/src/translate/.detection/cli/cordova-build.readme.md
index 5859a7e2658..774bb3c3bab 100644
--- a/src/translate/.detection/cli/cordova-build.readme.md
+++ b/src/translate/.detection/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-compile.readme.md b/src/translate/.detection/cli/cordova-compile.readme.md
index f234fefe548..947b914334f 100644
--- a/src/translate/.detection/cli/cordova-compile.readme.md
+++ b/src/translate/.detection/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
+Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-emulate.readme.md b/src/translate/.detection/cli/cordova-emulate.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/.detection/cli/cordova-emulate.readme.md
+++ b/src/translate/.detection/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-platform.readme.md b/src/translate/.detection/cli/cordova-platform.readme.md
index 1b289c0ac8f..f65aea27395 100644
--- a/src/translate/.detection/cli/cordova-platform.readme.md
+++ b/src/translate/.detection/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-plugin.readme.md b/src/translate/.detection/cli/cordova-plugin.readme.md
index 162ba073340..b3ea63900d4 100644
--- a/src/translate/.detection/cli/cordova-plugin.readme.md
+++ b/src/translate/.detection/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
+Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-prepare.readme.md b/src/translate/.detection/cli/cordova-prepare.readme.md
index 6ae022dcaa0..90b7d18e711 100644
--- a/src/translate/.detection/cli/cordova-prepare.readme.md
+++ b/src/translate/.detection/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-requirements.readme.md b/src/translate/.detection/cli/cordova-requirements.readme.md
index edf47772b1f..04bdf9cef01 100644
--- a/src/translate/.detection/cli/cordova-requirements.readme.md
+++ b/src/translate/.detection/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
+Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-resources.readme.md b/src/translate/.detection/cli/cordova-resources.readme.md
index e93fdd8a890..730573a47c3 100644
--- a/src/translate/.detection/cli/cordova-resources.readme.md
+++ b/src/translate/.detection/cli/cordova-resources.readme.md
@@ -11,6 +11,5 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
-
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-run.readme.md b/src/translate/.detection/cli/cordova-run.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/.detection/cli/cordova-run.readme.md
+++ b/src/translate/.detection/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/generate.readme.md b/src/translate/.detection/cli/generate.readme.md
index 042f64a7a4c..30de99a2484 100644
--- a/src/translate/.detection/cli/generate.readme.md
+++ b/src/translate/.detection/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
-- For a full list of available types, use `npx ng g --help`
-- For a list of options for a types, use `npx ng g <type> --help`
+ - For a full list of available types, use `npx ng g --help`
+ - For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
+To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/git-remote.readme.md b/src/translate/.detection/cli/git-remote.readme.md
index 58347c24535..b4caf425642 100644
--- a/src/translate/.detection/cli/git-remote.readme.md
+++ b/src/translate/.detection/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/info.readme.md b/src/translate/.detection/cli/info.readme.md
index d633e373984..03f86bc2907 100644
--- a/src/translate/.detection/cli/info.readme.md
+++ b/src/translate/.detection/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/init.readme.md b/src/translate/.detection/cli/init.readme.md
index 918620be789..98b3118bed5 100644
--- a/src/translate/.detection/cli/init.readme.md
+++ b/src/translate/.detection/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/integrations-disable.readme.md b/src/translate/.detection/cli/integrations-disable.readme.md
index b4f4a38bdd0..5418badf555 100644
--- a/src/translate/.detection/cli/integrations-disable.readme.md
+++ b/src/translate/.detection/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
+Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/integrations-enable.readme.md b/src/translate/.detection/cli/integrations-enable.readme.md
index 76526785eaa..945fcbbb226 100644
--- a/src/translate/.detection/cli/integrations-enable.readme.md
+++ b/src/translate/.detection/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
+Integrations can be re-added with the `--add` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/integrations-list.readme.md b/src/translate/.detection/cli/integrations-list.readme.md
index d075d211e95..044dd455e0e 100644
--- a/src/translate/.detection/cli/integrations-list.readme.md
+++ b/src/translate/.detection/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
+- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
diff --git a/src/translate/.detection/cli/link.readme.md b/src/translate/.detection/cli/link.readme.md
index f5a96a51946..e621a2e948a 100644
--- a/src/translate/.detection/cli/link.readme.md
+++ b/src/translate/.detection/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-add.json b/src/translate/.detection/cli/live-update-add.json
new file mode 100644
index 00000000000..46f0fe803b2
--- /dev/null
+++ b/src/translate/.detection/cli/live-update-add.json
@@ -0,0 +1,80 @@
+{
+  "name": "ionic live-update add",
+  "namespace": [
+    "ionic",
+    "live-update"
+  ],
+  "summary": "Adds Appflow Live Update plugin to the project",
+  "description": "This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.\n\nFor Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.\n\nFor Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.",
+  "footnotes": [],
+  "groups": [
+    "paid"
+  ],
+  "exampleCommands": [
+    "ionic live-update add ",
+    "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+    "ionic live-update add --max-store=2 --min-background-duration=30",
+    "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30"
+  ],
+  "aliases": [],
+  "inputs": [],
+  "options": [
+    {
+      "name": "app-id",
+      "type": "string",
+      "summary": "Your Appflow app ID",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "id"
+      }
+    },
+    {
+      "name": "channel-name",
+      "type": "string",
+      "summary": "The channel to check for updates from",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "update-method",
+      "type": "string",
+      "summary": "The update method that dictates the behavior of the plugin",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "max-store",
+      "type": "string",
+      "summary": "The maximum number of downloaded versions to store on the device",
+      "default": "2",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "quantity"
+      }
+    },
+    {
+      "name": "min-background-duration",
+      "type": "string",
+      "summary": "The minimum duration after which the app checks for an update in the background",
+      "default": "30",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "seconds"
+      }
+    }
+  ],
+  "type": "project"
+}
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-add.readme.md b/src/translate/.detection/cli/live-update-add.readme.md
new file mode 100644
index 00000000000..bc0316117d7
--- /dev/null
+++ b/src/translate/.detection/cli/live-update-add.readme.md
@@ -0,0 +1,5 @@
+This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.
+
+For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
+
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-configure.json b/src/translate/.detection/cli/live-update-configure.json
new file mode 100644
index 00000000000..cfcaeac37ee
--- /dev/null
+++ b/src/translate/.detection/cli/live-update-configure.json
@@ -0,0 +1,86 @@
+{
+  "name": "ionic live-update configure",
+  "namespace": [
+    "ionic",
+    "live-update"
+  ],
+  "summary": "Overrides Appflow Live Update configuration",
+  "description": "This command overrides configuration for the Appflow Live Update plugin (`cordova-plugin-ionic`) in Capacitor projects.\n\nFor Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.\n\nFor Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.",
+  "footnotes": [],
+  "groups": [
+    "paid"
+  ],
+  "exampleCommands": [
+    "ionic live-update configure ",
+    "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+    "ionic live-update configure --max-store=2 --min-background-duration=30",
+    "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30",
+    "ionic live-update configure android",
+    "ionic live-update configure ios"
+  ],
+  "aliases": [],
+  "inputs": [
+    {
+      "name": "platform",
+      "summary": "The native platform (e.g. `ios`, `android`)",
+      "required": false
+    }
+  ],
+  "options": [
+    {
+      "name": "app-id",
+      "type": "string",
+      "summary": "Your Appflow app ID",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "id"
+      }
+    },
+    {
+      "name": "channel-name",
+      "type": "string",
+      "summary": "The channel to check for updates from",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "update-method",
+      "type": "string",
+      "summary": "The update method that dictates the behavior of the plugin",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "max-store",
+      "type": "string",
+      "summary": "The maximum number of downloaded versions to store on the device",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "quantity"
+      }
+    },
+    {
+      "name": "min-background-duration",
+      "type": "string",
+      "summary": "The minimum duration after which the app checks for an update in the background",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "seconds"
+      }
+    }
+  ],
+  "type": "project"
+}
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-configure.readme.md b/src/translate/.detection/cli/live-update-configure.readme.md
new file mode 100644
index 00000000000..1d8c7504c8f
--- /dev/null
+++ b/src/translate/.detection/cli/live-update-configure.readme.md
@@ -0,0 +1,5 @@
+This command overrides configuration for the Appflow Live Update plugin (`cordova-plugin-ionic`) in Capacitor projects.
+
+For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
+
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-manifest.json b/src/translate/.detection/cli/live-update-manifest.json
new file mode 100644
index 00000000000..78ee4a6a7ba
--- /dev/null
+++ b/src/translate/.detection/cli/live-update-manifest.json
@@ -0,0 +1,18 @@
+{
+  "name": "ionic live-update manifest",
+  "namespace": [
+    "ionic",
+    "live-update"
+  ],
+  "summary": "Generates a manifest file for the Live Update service from a built app directory",
+  "description": "",
+  "footnotes": [],
+  "groups": [
+    "paid"
+  ],
+  "exampleCommands": [],
+  "aliases": [],
+  "inputs": [],
+  "options": [],
+  "type": "global"
+}
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-manifest.readme.md b/src/translate/.detection/cli/live-update-manifest.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/.detection/cli/login.readme.md b/src/translate/.detection/cli/login.readme.md
index ce63bb58ac0..0fbe95d2ae8 100644
--- a/src/translate/.detection/cli/login.readme.md
+++ b/src/translate/.detection/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/logout.readme.md b/src/translate/.detection/cli/logout.readme.md
index 540a69a156c..4122a7422e5 100644
--- a/src/translate/.detection/cli/logout.readme.md
+++ b/src/translate/.detection/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
+If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/repair.readme.md b/src/translate/.detection/cli/repair.readme.md
index 9b01e9d40d8..dbb18055c3a 100644
--- a/src/translate/.detection/cli/repair.readme.md
+++ b/src/translate/.detection/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/serve.json b/src/translate/.detection/cli/serve.json
index 03b95b8e464..d0961e3c8e5 100644
--- a/src/translate/.detection/cli/serve.json
+++ b/src/translate/.detection/cli/serve.json
@@ -4,7 +4,7 @@
     "ionic"
   ],
   "summary": "Start a local dev server for app dev/testing",
-  "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\nTry the `--lab` option to see multiple platforms at once.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
+  "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
   "footnotes": [],
   "groups": [],
   "exampleCommands": [
diff --git a/src/translate/.detection/cli/serve.readme.md b/src/translate/.detection/cli/serve.readme.md
index 3090717db0b..b08bf89fccf 100644
--- a/src/translate/.detection/cli/serve.readme.md
+++ b/src/translate/.detection/cli/serve.readme.md
@@ -2,8 +2,6 @@ Easily spin up a development server which launches in your browser. It watches f
 
 By default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.
 
-Try the `--lab` option to see multiple platforms at once.
-
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/signup.readme.md b/src/translate/.detection/cli/signup.readme.md
index 82d215181a5..4761dfdf982 100644
--- a/src/translate/.detection/cli/signup.readme.md
+++ b/src/translate/.detection/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/ssh-setup.readme.md b/src/translate/.detection/cli/ssh-setup.readme.md
index b95050beae9..f6ed6f93cb8 100644
--- a/src/translate/.detection/cli/ssh-setup.readme.md
+++ b/src/translate/.detection/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/ssh-use.readme.md b/src/translate/.detection/cli/ssh-use.readme.md
index 4714fa29928..b9a78d4db3e 100644
--- a/src/translate/.detection/cli/ssh-use.readme.md
+++ b/src/translate/.detection/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/ssl-generate.readme.md b/src/translate/.detection/cli/ssl-generate.readme.md
index aea3ec98cc5..c49644b96ef 100644
--- a/src/translate/.detection/cli/ssl-generate.readme.md
+++ b/src/translate/.detection/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/start.readme.md b/src/translate/.detection/cli/start.readme.md
index 9b3d3b471e4..45b725f705d 100644
--- a/src/translate/.detection/cli/start.readme.md
+++ b/src/translate/.detection/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 986eeabbc94..1fbd6aab841 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,2 +1,3 @@
+
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
index 90e1ee9b77e..deb9dde4602 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,3 +1,4 @@
+
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
index 11db0748e34..420a0d400d4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
index a21a70fb083..fb2004ca29c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,3 +1,4 @@
+
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
index 41472b2e411..56e36fe9053 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1 +1,2 @@
+
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
index 8f50b6279c0..b18059b0829 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
+
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
-
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
index e11ad80b4a3..8bc209c7e54 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,3 +1,4 @@
+
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
index 0303990f06b..18f742e5108 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,3 +1,4 @@
+
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 23e8c973bf2..76387367a61 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index e27b0ba6540..822209a4a72 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1 +1,2 @@
+
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index c31c989a3d3..93a3f290203 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,3 +1,4 @@
+
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 64f0fad3191..3592aee1757 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
index a82b309d78c..2eb94af7221 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
index 8e414578f93..0c671a0c2d0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
index 5f6722050b0..48c289cc3fb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1 +1,2 @@
+
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
index 2813a5d498b..5672e0b2213 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index 95a88837497..d7ef092bae5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index ef9f2968a8f..c331a7d05f5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index e84626aea1d..6d2e7862965 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,2 +1,3 @@
+
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
index e89f74940ca..c1b58f99edf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1 +1,3 @@
+
+
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
index aff2e2cb4d6..0db391fddba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1 +1,2 @@
+
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
index bb919529254..12d31c41dd7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1 +1,2 @@
+
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
index fbde6778edf..87dd87d5765 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to read and write app preferences
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
index c2d7f1730a0..c0210b3f9e5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,3 +1,4 @@
+
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
index 6b4fa2e5c61..08cfe48a452 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,3 +1,4 @@
+
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
index 6213470725d..1e612327b09 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1 +1,2 @@
+
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
index b3fd1055a9a..79bd464667d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
index 41c425d19c7..af28dc677bd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1 +1,2 @@
+
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
index 4197b26f800..f0017f9025d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1 +1,2 @@
+
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
index 4c69face47f..d1ce36553bc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,2 +1,3 @@
+
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
index b066c65401a..48d67747675 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,2 +1,3 @@
+
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
index 3a4a3e352cf..62278126195 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,3 +1,4 @@
+
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
index b1cfb8cd04b..a43e7c719b2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,2 +1,3 @@
+
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
index ee73844b3c8..90ce8edd2ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,2 +1,3 @@
+
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
index 9ab2fed769b..bc94608b2c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1 +1,2 @@
+
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
index 52465e564f0..11775820229 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,3 +1,4 @@
+
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
index 33af83938f9..ebe978c896a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1 +1,2 @@
+
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index 747418e7857..d40a29ab2a1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,3 +1,4 @@
+
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index b84c09c835f..9f16d6d8f42 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
+This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
index 340db120adf..06a0311c510 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
@@ -1 +1,2 @@
+
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
index 2c657416aef..da71524f3d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
index bd325268e71..0725aba40ce 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1 +1,2 @@
+
 BioCatch SDK Cordova support
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index b1b5ec0f81c..6be6e7318ae 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,2 +1,3 @@
+
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
index 8d23815cab0..4818853ac89 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
index f0f05bc6a1f..52d671c0034 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,2 +1,3 @@
+
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
index 6f149bce706..b6cae0f21fd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1 +1,2 @@
+
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index c0281f22a59..639b85fee5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3b80e3d0ecd..3ae195d12de 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,3 +1,4 @@
+
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index d0939b5fde7..f3579d8e616 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
index 9921b18062b..29af8d97385 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,8 +1,9 @@
+
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
-Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+ Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
-For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+ For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
index a222a2efbe7..b9836ebd4c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1 +1,2 @@
+
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
index d97dd2af981..51b06d0cc15 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,3 +1,4 @@
+
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
index b925da2342c..71995e79760 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1 +1,2 @@
+
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
index f03b8b179a9..bf83901883b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1 +1,2 @@
+
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
index 7b8674b3871..7e5a437d1d3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1 +1,2 @@
+
 This plugin provides build information.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
index 515f629e662..5a83eede868 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,3 +1,5 @@
+
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
index b0ecb7bb40b..16d031664c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,2 +1,3 @@
+
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
index 76f6447e69b..a2b5e1bab30 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1 +1,2 @@
+
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
index 2914b087a64..d68a0a44b0e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,2 +1,3 @@
+
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
index 9b06352e407..31cf59dc30b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,3 +1,4 @@
+
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
index aa5cc82125d..a354d9c7925 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,13 +1,12 @@
+
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
-
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
-
 inside of the <platform name='ios> section
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
index 752a6da1f4f..76c58120b44 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
+
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
-
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
index 953ca23cf89..8518bffadeb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,5 +1,6 @@
 Plugin for using Apple's ClassKit framework.
 
+
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
index 5b82513228d..f6b4973e48e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
index 603b2b8f6b3..3176d5f4017 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1 +1,3 @@
+
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 7e3928e3cd5..939c06b2441 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1 +1,2 @@
+
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
index 9d0f8be2ea1..3688eedbcac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1 +1,2 @@
+
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
index b03bd091c4c..9cf894081e8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,3 +1,4 @@
+
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index b32e2c7cacd..4bb2367cd5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1 +1,2 @@
+
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
index b7061033770..0243a89bfa0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1 +1,2 @@
+
 Access and manage Contacts on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index ee32121391a..4a13e8229fa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1 +1,2 @@
+
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
index 9faa50aaed7..6c659180b50 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
+Crops images
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 9116ddca6eb..5c24399bc42 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1 +1,2 @@
+
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
index d2632a61abf..5eed8b85866 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1 +1,2 @@
+
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
index cabc3d4ff44..08fbb92c20c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
index 8943e5b9ca4..bffae754b58 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1 +1,2 @@
+
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
index f11c48fa910..ad508847c3e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1 +1,3 @@
+
+
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
index 4dbbb06d71c..abe72e3b6c0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
index e96364431a7..02c713e2138 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
index 3dbd2dec8e3..c6ef6980695 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
@@ -1 +1,2 @@
+
 Access information about the underlying device and platform.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
index ac9d8279b92..893058bc4eb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1 +1,2 @@
+
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
index 64c6b6393fe..a90f9cfbe85 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1 +1,2 @@
+
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
index f988d884a0c..11ac16aafc6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
index 3a08f9c811c..7eac80f6cff 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,2 +1,4 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
index 03cd028ccfd..29d32018802 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1 +1,2 @@
+
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
index 605e7b14d41..7e39f62d9b0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1 +1,2 @@
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
+
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
index dad89444163..f15e01b1143 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1 +1,3 @@
+
 This plugin is designed to support downloading files using Android DownloadManager.
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
index a305d027409..4176ac2a7b9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1 +1,4 @@
+
+
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
index d0554945c4c..81259d50cc1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,3 +1,5 @@
+
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index b76b54f6046..40349a8306b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1 +1,2 @@
+
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 043375415ac..16c3ea63d2a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-Retrieves additional device information from the Device Hardware
 
-- memory
-- cpumhz
-- totalstorage
-- freestorage
+Retrieves additional device information from the Device Hardware
+ - memory
+ - cpumhz
+ - totalstorage
+ - freestorage
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
index b140e97cb32..12d214e6d38 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,3 +1,4 @@
+
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
index 93e5e887491..df9af63f74b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,10 +1,11 @@
+
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
-To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+ To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -29,7 +30,6 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
-
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
-
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-#### Android Install
 
+#### Android Install
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
+
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
index dbbb3b72132..f3790772c17 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1 +1,2 @@
+
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
index 4bf1bdf418f..b4553ad9baf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
index f1b5408277a..4fdfccbf60d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1 +1,2 @@
+
 Simple file encryption for Cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
index a719c048fe4..ba26e51b8cd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1 +1,2 @@
+
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
index 1f3eeb42d5a..c9445ac1ce7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1 +1,3 @@
+
+
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
index 3616dbd3573..b33dc3c0f97 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
index 4770407e60d..c8ba532eae9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to upload and download files.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
index 28bc40d6e90..1e61b343d6b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
+
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
-
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
-This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
-The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
-Although most of the plugin code was written when an earlier spec was current: http:
-//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-//dev.w3.org/2009/dap/file-system/file-writer.html
+ This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+ The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+ Although most of the plugin code was written when an earlier spec was current: http:
+  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index ce125266039..f87a05030d7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -5,9 +6,7 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-
-For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
-
+For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 410431f731b..4da15cc2ef6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
index 38a8b24123d..45a214eee3a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
index a1c32524c76..2d8b3effb06 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1 +1,2 @@
+
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index b88fed62436..2ad1e2109bd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1 +1,2 @@
+
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 2cfe3a22194..6efc1b8ae10 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -9,7 +10,6 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
-
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 6a18f9fcf39..5bdcf74de11 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
index d1f83c84392..433e365a6a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
index aa17963327a..e044eb6dc66 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,2 +1,3 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
index 6c21f982616..25001f76e05 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1 +1,2 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index e57049202bf..80ef2d51635 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1 +1,2 @@
+
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
index 563b7c87954..6d68d07b0fe 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,8 +1,9 @@
+
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into `config.xml`:
+For android API 28+, the following xml snippet should be inserted into ```config.xml```:
 
 ```
 ...
@@ -11,4 +12,4 @@ For android API 28+, the following xml snippet should be inserted into `config.x
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
index 5987065177c..0cd5a4278d8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1 +1,2 @@
+
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
index 5dda6c71ade..a56ed3a0093 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,2 +1,3 @@
+
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
index 2f83489f5fb..6e993e8f8a8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
index 0391a010ff3..8d55357a600 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,11 +1,12 @@
+
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
-This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+ This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
-
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
index 840cf8d4fb5..d1a3161e0b4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1 +1,2 @@
+
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
index 8ebef774b81..1c759160579 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
+
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
-
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
index 0e715c64736..42ea1211a02 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1 +1,2 @@
+
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index a10f89326aa..e40dfc4db5e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
index 676268db9d5..fb0392b4d72 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
+Read Gyroscope sensor data
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
index 6f496fc37ad..9cc2bc1f297 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
@@ -1 +1,2 @@
+
 HCE Cordova Wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
index 271a47a93b3..ad82eb6b43a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
index 466271d3cba..dbd72bc8324 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,2 +1,3 @@
+
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
index f49780a8921..349af915eac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
@@ -1 +1,2 @@
+
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
index 2ba246ebaf0..e49b6cbc6ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
index 3fcae7e8052..40ad52f5a5d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
+
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
-
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
index 14a21342440..4421569a8f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1 +1,2 @@
-Embedded httpd for Cordova apps. Light weight HTTP server.
+
+Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index 8a8ae830783..d223513c705 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
index accd867793f..ee369f17322 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides functions for working with iBeacons.
 
-The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+ The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
index 8f9c76acd94..75f3775bff1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,3 +1,4 @@
+
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
index 88fa3c7bf5c..40b02d55e6b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin For Image Resize
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
index e6e57be76e7..f699597a628 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,3 +1,4 @@
+
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 0485062862e..87d0037b909 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
+Launches in app Browser
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index b6be39d32c9..5bcd6494c48 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,24 +1,25 @@
+
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|                      | ios | android | win-8 | win-10/uwp | mac |
-| -------------------- | --- | ------- | ----- | ---------- | --- |
-| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
-| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
-| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
-| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
-| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
-| downloadable content | ✅  |         |       |            | ✅  |
-| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
+|  | ios | android | win-8 | win-10/uwp | mac |
+|--|--|--|--|--|--|
+| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
+| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
+| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
+| downloadable content | ✅ |   |   |   | ✅ |
+| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
 
 Supports:
 
-- **iOS** version 7.0 or higher.
-- **Android** version 2.2 (API level 8) or higher
-  - with Google Play client version 3.9.16 or higher
-- **Windows** Store/Phone 8.1 or higher
-- **Windows 10 Mobile**
-- **macOS** version 10
-- **Xbox One**
-  - (and any platform supporting Microsoft's UWP)
+ - **iOS** version 7.0 or higher.
+ - **Android** version 2.2 (API level 8) or higher
+   - with Google Play client version 3.9.16 or higher
+ - **Windows** Store/Phone 8.1 or higher
+ - **Windows 10 Mobile**
+ - **macOS** version 10
+ - **Xbox One**
+   - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 143985e329b..5fbffa5c65b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1 +1,2 @@
+
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
index 8e174f56973..32b56cbab41 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,3 +1,5 @@
+
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
index c28c9dcb463..365932222f7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
index 680fb4b5caa..77bbacfc378 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1 +1,2 @@
+
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
index 685bec69d99..93b6eee3eb3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
+
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
-
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
index 6526cd4d4ff..3cecc84de9e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 1c68245f996..6fe62b6c53a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,3 +1,4 @@
+
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index 708074a0ab2..b8ea2b47c9e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1 +1,2 @@
+
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
index 03fc8b67cb1..8a75e4fc94f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,2 +1,3 @@
+
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
index ed15dd96b1c..2895fffa54c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1 +1,2 @@
+
 Implementation of the JINS MEME SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
index be8555b753a..9fde9b57805 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
index b86b22652c5..1ccf061fc98 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,3 +1,4 @@
+
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index d2e63dd18d1..cca62d8b43e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,2 +1,3 @@
+
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
index ae817d52f6d..7764ef64d16 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,3 +1,4 @@
+
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
index 013e0cacbed..c28100fc7ff 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,3 +1,4 @@
+
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
index a272d33f4e3..125e1108746 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,2 +1,3 @@
+
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 105b197495b..0306a39d956 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
index 2f3437ec5c2..942352f7056 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,4 +1,5 @@
-Assists in leaving user reviews/ratings in the App Stores.
 
+
+Assists in leaving user reviews/ratings in the App Stores.
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
index fc39816081a..6cc5413db8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1 +1,2 @@
+
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
index f6123e51703..2085ded77a8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1 +1,2 @@
+
 This plugin to create local backup
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
index 6cfdd379643..82c183d6fee 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
index ed018edb499..99d60417c8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index e67243449ae..539dbf0c5b4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
index bead6de72c2..55292ec8b1b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1 +1,2 @@
+
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
index ca5ec6a2525..9e5778eab23 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
index 0fa09982e5b..281c8d456ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
@@ -1 +1,2 @@
+
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
index 69b6b0ebf1b..92cacd40a12 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
index f67d2174eea..9d07585f502 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
index 63f05dbf100..13edc56092e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
index f3eb05040cf..75e25a2c230 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index c159f3801cb..b8584c4e0ae 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1 +1,2 @@
+
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index 0d06c413e79..e9f6b965a20 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,2 +1,3 @@
+
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index d71ef31d811..30c9e83dc6d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,3 +1,4 @@
+
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
index 0390d514207..72ffec61b13 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,4 +1,5 @@
+
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index 1a4f27e7fd5..ba01c25cf88 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1 +1,2 @@
+
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
index 04fe4a3bf33..e5465ae0a91 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,3 +1,4 @@
+
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
index 7bbca215ca4..b37886b1b59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
+Native Audio Playback
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 5468f7f9077..3e9b7575290 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
index faea3298df2..cd2d3dab18a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1 +1,3 @@
+
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index 266ae69275a..edd6e9c39ee 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1 +1,2 @@
+
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 9a2e0d43722..7bcffb8dee4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,2 +1,3 @@
+
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
index 4e29c4eeb6a..ad0db3ff5c9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1 +1,2 @@
+
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
index 837c7e475a5..ab6d1bf9d08 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1 +1,2 @@
+
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
index 9a5f7a35d4e..5ad7357168c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
index a81214659db..92837035391 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
+
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
-
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
index 9632b1f0155..4e1c4bcb571 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,4 +1,5 @@
+
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
index dd7010c8876..5ddc2066105 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,3 +1,4 @@
+
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -5,13 +6,11 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
-
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
-
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -66,4 +65,5 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-   `$ chmod +x hooks/copy_android_notification_icons.js`
+`$ chmod +x hooks/copy_android_notification_icons.js`
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 11e9c0ca52c..0be0100f96d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1 +1,2 @@
-Plugin to open native screens of iOS/android settings
+
+Plugin to open native screens of iOS/android settings
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
index c59128571c6..077568f6f76 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1 +1,2 @@
+
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
index 4caf38450f4..97823a256c7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1 +1,2 @@
+
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
index 4f099e14ed4..e45425cee51 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 22692f6e35d..0b14edafe4a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
index 81ece364e1f..c6fcd66be8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,2 +1,3 @@
+
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index 1510b50b7b6..dd840c8b485 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,2 +1,3 @@
+
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
index 77e517bcbd9..1f20587b9e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,3 +1,4 @@
+
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
index c4ca80fa312..642ad87c3ba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
index 6596e0e430f..6ea7514c5fa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
index d1bb01fec7e..2c12503cd71 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,3 +1,6 @@
+
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
+
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
index 9a9cc59bc6c..fa7a099a33f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Pinterest
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
index b1cab91f830..c42c478d81d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1 +1,2 @@
+
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
index 4ed7aff21ca..eaca280cad2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,2 +1,3 @@
+
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
index 1985ca44851..779cd5d6ec2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,2 +1,3 @@
+
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
index 5aff311b111..312ac4a9125 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
+Prints documents or HTML rendered content
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 909c2ef0dbb..51bb27361c9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1 +1,2 @@
+
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
index dc1a4fbbb4b..7f42a5bcd96 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
+
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
-
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
index a9c3464e985..5ae1db23037 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
index e65c6c7edd7..464bba08731 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
index d9b32939ab5..fcc40802c3d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,3 +1,4 @@
+
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 55b6fc63435..3dcb9304702 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,3 +1,4 @@
+
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index 505b461b09c..a90b29a29b0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1 +1,2 @@
+
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
index 2d13f688d77..13214fabab4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
@@ -1 +1,2 @@
+
 This plugin to restart android application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
index 9f1d179bd5c..1b4e50f1b68 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1 +1,2 @@
+
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index 6153b43d685..c635a5fd046 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,3 +1,4 @@
+
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
index a83e7487c9e..416c63df2e9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
index e9b365c009a..15c0b85bf5f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
+Captures a screen shot
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
index 5af0e96163c..a4c9c37f0b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1 +1,2 @@
+
 This plugin enables sensors on Android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
index a16c1211a8c..125a3910c49 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
@@ -1 +1,2 @@
+
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
index b13d7210b0e..aca58cc645a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
index 917873665cf..5608715c9fa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
+Handles shake gesture
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 630d79ceeb0..8ab0b4dd94f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index 40b7e9082ef..d7fe4d72b94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,3 +1,4 @@
+
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index f02092735e3..e8991e9348b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,6 +1,7 @@
+
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-_Source:_ https://developer.apple.com/sign-in-with-apple/
+*Source:* https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
index 80e74390f46..52c91993c93 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,3 +1,4 @@
+
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index 00c77e7cdfc..e6270053a4a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,3 +1,4 @@
+
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
index 696999e2340..83f1f737e59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,2 +1,3 @@
+
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
index 3af874243f1..eb6aaf6b11c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1 +1,2 @@
+
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
index d64c2f4cab6..b0ba3252b25 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
@@ -1 +1,3 @@
+
+
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
index 3edd7dba0d1..760be2d9030 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,3 +1,4 @@
+
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
index efc07916d88..ccd38016353 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1 +1,2 @@
+
 This plugin does speech recognition using cloud services
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
index 5521af0b3b3..8623152c556 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1 +1,2 @@
+
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 97f3a5146a5..66329069921 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
index 1a5acf29e82..31117f45f87 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
index cbc01dcad68..bce7a50dba7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-Cordova plugin for authenticating with Spotify
 
+Cordova plugin for authenticating with Spotify
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 1f34ca227ed..92e4d096de7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
index bfb4c960c5d..0d19359e763 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1 +1,2 @@
+
 Access SQLite databases on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 4c8d739d81f..62c602df45a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
index 167ed6673b8..8866094f12f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1 +1,2 @@
-- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+
+* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
index 0c999e9b7e3..d2df403f415 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,3 +1,4 @@
+
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
index b6a57d237ac..918f0320b25 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
+
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
-
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
index 5a521be5eb5..b093d14b4af 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
index 2e8f0e8c676..32f49f8fb59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
index 22c07237113..373fa2e0f42 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1 +1,2 @@
+
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 4c4cc795164..6a1864ed364 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1 +1,2 @@
+
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 8f1ca44e3ad..577ae87896a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 2efbb060915..80ce9a5af77 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
index b53253d0eef..41e946cfc8e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
index cd2ff3ab709..032d6ec13cc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 40815363667..81e3408cc65 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1 +1,2 @@
+
 In-app browser that allows styling.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index aea7b49108e..a78596064d6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,3 +1,4 @@
+
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
index 9034d3ab1f0..c7b5d6c7fba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
index 0bb27885878..02615a1ec9f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,3 +1,4 @@
+
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 0fd10d23d96..16ead04e0ed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
+
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
-
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
index f1dd7f71fd1..8876a612197 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
@@ -1 +1,2 @@
+
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 032854e3607..1db59244ff9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1 +1,2 @@
+
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 5ec8996425d..0b49755a0de 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
-## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
-
-## iOS Requirements
 
+This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+-
+iOS Requirements
+-
 Update your Cocoapods repo before you install the plugin.
-
 ```
 $ pod repo update
 ```
-
-- Browser Requirements
-- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
-
+-
+Browser Requirements
+-
+After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
index 1bf710ddbcc..504b3c9eb24 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 857e2854746..5cf251b3c8e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
index c5e46b65ea3..9c299395cf9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,3 +1,4 @@
-The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+
+The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
index f52e258035a..416be944a54 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1 +1,2 @@
+
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
index f82e5deb0ab..dba5defbdd0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
+Vibrates the device
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index f3e970c9efb..a22e03f3945 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 
+This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
index e7f3e1b8a0b..1ee9f14d4a0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
index e6bce9df776..62d0e5158b6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1 +1,2 @@
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
+
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
index 74a4213c286..562d250d54f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 74f478b025e..732d61641b6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
index 981c27c1eb3..a2eb7545759 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1 +1,2 @@
+
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
index b2e43d635c3..639229cba09 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1 +1,2 @@
+
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index ca5fcb58975..e519b6b087f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,3 +1,4 @@
+
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
index 3fef1483ebd..c85ed196728 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,3 +1,5 @@
+
+
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 17fd2049102..65e5f92754a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1 +1,2 @@
+
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
index e0a91fda385..33a16ff46c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,3 +1,4 @@
+
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
index b6d33465570..48620c015e9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1 +1,2 @@
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
+
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
index 6433e0021a7..8550752032e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
index 94a52e6dc07..e358d13434b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
diff --git a/src/translate/api/datetime.json b/src/translate/api/datetime.json
index 2559aafb7b5..3c5637d3ed6 100644
--- a/src/translate/api/datetime.json
+++ b/src/translate/api/datetime.json
@@ -19,6 +19,26 @@
     {
       "name": "slot",
       "text": "time-label - The label for the time selector in the datetime."
+    },
+    {
+      "name": "part",
+      "text": "wheel-item - The individual items when using a wheel style layout, or in the\nmonth/year picker when using a grid style layout."
+    },
+    {
+      "name": "part",
+      "text": "wheel-item active - The currently selected wheel-item."
+    },
+    {
+      "name": "part",
+      "text": "time-button - The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."
+    },
+    {
+      "name": "part",
+      "text": "time-button active - The time picker button when the picker is open."
+    },
+    {
+      "name": "part",
+      "text": "month-year-button - The button that opens the month/year picker when\nusing a grid style layout."
     }
   ],
   "usage": {},
@@ -655,7 +675,7 @@
       "mutable": false,
       "attr": "year-values",
       "reflectToAttr": false,
-      "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2024,2020,2016,2012,2008\"`.",
+      "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2008,2012,2016,2020,2024\"`.",
       "docsTags": [],
       "values": [
         {
@@ -764,6 +784,16 @@
       "name": "--title-color",
       "annotation": "prop",
       "docs": "The text color of the title."
+    },
+    {
+      "name": "--wheel-fade-background-rgb",
+      "annotation": "prop",
+      "docs": "The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. `255, 255, 255`."
+    },
+    {
+      "name": "--wheel-highlight-background",
+      "annotation": "prop",
+      "docs": "The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."
     }
   ],
   "slots": [
@@ -780,7 +810,28 @@
       "docs": "The title of the datetime."
     }
   ],
-  "parts": [],
+  "parts": [
+    {
+      "name": "month-year-button",
+      "docs": "The button that opens the month/year picker when\nusing a grid style layout."
+    },
+    {
+      "name": "time-button",
+      "docs": "The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."
+    },
+    {
+      "name": "time-button active",
+      "docs": "The time picker button when the picker is open."
+    },
+    {
+      "name": "wheel-item",
+      "docs": "The individual items when using a wheel style layout, or in the\nmonth/year picker when using a grid style layout."
+    },
+    {
+      "name": "wheel-item active",
+      "docs": "The currently selected wheel-item."
+    }
+  ],
   "dependents": [],
   "dependencies": [
     "ion-buttons",
diff --git a/src/translate/api/input.json b/src/translate/api/input.json
index ef6164f4516..69e165cdcfc 100644
--- a/src/translate/api/input.json
+++ b/src/translate/api/input.json
@@ -7,6 +7,10 @@
     {
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+    },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
     }
   ],
   "usage": {},
@@ -643,7 +647,7 @@
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
-      "docs": "The visible label associated with the input.",
+      "docs": "The visible label associated with the input.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
       "docsTags": [],
       "values": [
         {
@@ -1104,7 +1108,7 @@
       },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
-      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.",
+      "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
       "docsTags": []
     }
   ],
@@ -1124,7 +1128,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionChange` event is fired for `<ion-input>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
+      "docs": "The `ionChange` event is fired when the user modifies the input's value.\nUnlike the `ionInput` event, the `ionChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
       "docsTags": []
     },
     {
@@ -1142,7 +1146,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionInput` event fires when the `value` of an `<ion-input>` element\nhas been changed.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
+      "docs": "The `ionInput` event is fired each time the user modifies the input's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
       "docsTags": []
     }
   ],
@@ -1161,7 +1165,7 @@
     {
       "name": "--border-radius",
       "annotation": "prop",
-      "docs": "Radius of the input"
+      "docs": "Radius of the input. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
     },
     {
       "name": "--border-style",
@@ -1234,7 +1238,12 @@
       "docs": "Opacity of the input placeholder text"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "label",
+      "docs": "The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+    }
+  ],
   "parts": [],
   "dependents": [],
   "dependencies": [
diff --git a/src/translate/api/range.json b/src/translate/api/range.json
index b7774667215..6ad20a7202c 100644
--- a/src/translate/api/range.json
+++ b/src/translate/api/range.json
@@ -174,6 +174,25 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "docs": "The text to display as the control's label. Use this over the `label` slot if\nyou only need plain text. The `label` property will take priority over the\n`label` slot if both are used.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
diff --git a/src/translate/api/searchbar.json b/src/translate/api/searchbar.json
index 2b395a040cc..acb6dfc2bda 100644
--- a/src/translate/api/searchbar.json
+++ b/src/translate/api/searchbar.json
@@ -537,6 +537,23 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "name",
+      "type": "string",
+      "mutable": false,
+      "attr": "name",
+      "reflectToAttr": false,
+      "docs": "If used in a form, set the name of the control, which is submitted with the form data.",
+      "docsTags": [],
+      "default": "this.inputId",
+      "values": [
+        {
+          "type": "string"
+        }
+      ],
+      "optional": false,
+      "required": false
+    },
     {
       "name": "placeholder",
       "type": "string",
@@ -728,7 +745,7 @@
       },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
-      "docs": "Sets focus on the specified `ion-searchbar`. Use this method instead of the global\n`input.focus()`.",
+      "docs": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
       "docsTags": []
     }
   ],
diff --git a/src/translate/api/segment-button.json b/src/translate/api/segment-button.json
index 2abc08eb2b5..5941ef23559 100644
--- a/src/translate/api/segment-button.json
+++ b/src/translate/api/segment-button.json
@@ -26,7 +26,7 @@
     {
       "name": "disabled",
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "attr": "disabled",
       "reflectToAttr": false,
       "docs": "If `true`, the user cannot interact with the segment button.",
@@ -130,7 +130,7 @@
     },
     {
       "name": "value",
-      "type": "string",
+      "type": "number | string",
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -138,6 +138,9 @@
       "docsTags": [],
       "default": "'ion-sb-' + ids++",
       "values": [
+        {
+          "type": "number"
+        },
         {
           "type": "string"
         }
diff --git a/src/translate/api/segment.json b/src/translate/api/segment.json
index dfd6d5af642..ca1bb642a35 100644
--- a/src/translate/api/segment.json
+++ b/src/translate/api/segment.json
@@ -157,13 +157,16 @@
     },
     {
       "name": "value",
-      "type": "string | undefined",
+      "type": "number | string | undefined",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
       "docs": "the value of the segment.",
       "docsTags": [],
       "values": [
+        {
+          "type": "number"
+        },
         {
           "type": "string"
         },
diff --git a/src/translate/api/select.json b/src/translate/api/select.json
index 8bcaf17a8fe..605077bbba5 100644
--- a/src/translate/api/select.json
+++ b/src/translate/api/select.json
@@ -8,6 +8,10 @@
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
     },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
+    },
     {
       "name": "part",
       "text": "placeholder - The text displayed in the select when there is no value."
@@ -19,6 +23,14 @@
     {
       "name": "part",
       "text": "icon - The select icon container."
+    },
+    {
+      "name": "part",
+      "text": "container - The container for the selected text or placeholder."
+    },
+    {
+      "name": "part",
+      "text": "label - The label text describing the select."
     }
   ],
   "usage": {},
@@ -137,6 +149,25 @@
       "optional": false,
       "required": false
     },
+    {
+      "name": "expandedIcon",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "expanded-icon",
+      "reflectToAttr": false,
+      "docs": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
@@ -236,7 +267,7 @@
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
-      "docs": "The visible label associated with the select.",
+      "docs": "The visible label associated with the select.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
       "docsTags": [],
       "values": [
         {
@@ -438,6 +469,25 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "toggleIcon",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "toggle-icon",
+      "reflectToAttr": false,
+      "docs": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode.",
+      "docsTags": [],
+      "values": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "undefined"
+        }
+      ],
+      "optional": true,
+      "required": false
+    },
     {
       "name": "value",
       "type": "any",
@@ -528,39 +578,39 @@
       "docs": "Background of the select"
     },
     {
-      "name": "--border-color Color of the select border",
+      "name": "--border-color",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Color of the select border"
     },
     {
-      "name": "--border-radius Radius of the select border",
+      "name": "--border-radius",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Radius of the select border. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
     },
     {
-      "name": "--border-style Style of the select border",
+      "name": "--border-style",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Style of the select border"
     },
     {
-      "name": "--border-width Width of the select border",
+      "name": "--border-width",
       "annotation": "prop",
-      "docs": ""
+      "docs": "Width of the select border"
     },
     {
-      "name": "--highlight-color-focused The color of the highlight on the select when focused",
+      "name": "--highlight-color-focused",
       "annotation": "prop",
-      "docs": ""
+      "docs": "The color of the highlight on the select when focused"
     },
     {
-      "name": "--highlight-color-invalid The color of the highlight on the select when invalid",
+      "name": "--highlight-color-invalid",
       "annotation": "prop",
-      "docs": ""
+      "docs": "The color of the highlight on the select when invalid"
     },
     {
-      "name": "--highlight-color-valid The color of the highlight on the select when valid",
+      "name": "--highlight-color-valid",
       "annotation": "prop",
-      "docs": ""
+      "docs": "The color of the highlight on the select when valid"
     },
     {
       "name": "--padding-bottom",
@@ -598,12 +648,25 @@
       "docs": "The color of the ripple effect on MD mode."
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "label",
+      "docs": "The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
+    }
+  ],
   "parts": [
+    {
+      "name": "container",
+      "docs": "The container for the selected text or placeholder."
+    },
     {
       "name": "icon",
       "docs": "The select icon container."
     },
+    {
+      "name": "label",
+      "docs": "The label text describing the select."
+    },
     {
       "name": "placeholder",
       "docs": "The text displayed in the select when there is no value."
diff --git a/src/translate/api/tabs.json b/src/translate/api/tabs.json
index 6d81519aa15..055e313e9c5 100644
--- a/src/translate/api/tabs.json
+++ b/src/translate/api/tabs.json
@@ -28,7 +28,7 @@
       },
       "signature": "getSelected() => Promise<string | undefined>",
       "parameters": [],
-      "docs": "Get the currently selected tab.",
+      "docs": "Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
       "docsTags": []
     },
     {
@@ -39,7 +39,7 @@
       },
       "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
       "parameters": [],
-      "docs": "Get a specific tab by the value of its `tab` property or an element reference.",
+      "docs": "Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
       "docsTags": [
         {
           "name": "param",
@@ -55,7 +55,7 @@
       },
       "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
       "parameters": [],
-      "docs": "Select a tab by the value of its `tab` property or an element reference.",
+      "docs": "Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
       "docsTags": [
         {
           "name": "param",
diff --git a/src/translate/api/textarea.json b/src/translate/api/textarea.json
index 3aca0e883c2..58240340488 100644
--- a/src/translate/api/textarea.json
+++ b/src/translate/api/textarea.json
@@ -7,6 +7,10 @@
     {
       "name": "virtualProp",
       "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+    },
+    {
+      "name": "slot",
+      "text": "label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
     }
   ],
   "usage": {},
@@ -384,7 +388,7 @@
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
-      "docs": "The visible label associated with the textarea.",
+      "docs": "The visible label associated with the textarea.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
       "docsTags": [],
       "values": [
         {
@@ -727,7 +731,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionChange` event is fired for `<ion-textarea>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the element loses focus after its value\nhas been modified.",
+      "docs": "The `ionChange` event is fired when the user modifies the textarea's value.\nUnlike the `ionInput` event, the `ionChange` event is fired when\nthe element loses focus after its value has been modified.",
       "docsTags": []
     },
     {
@@ -745,7 +749,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "The `ionInput` event fires when the `value` of an `<ion-textarea>` element\nhas been changed.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
+      "docs": "The `ionInput` event is fired each time the user modifies the textarea's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the textarea's value. This typically happens for each keystroke as the user types.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
       "docsTags": []
     }
   ],
@@ -837,7 +841,12 @@
       "docs": "Opacity of the placeholder text"
     }
   ],
-  "slots": [],
+  "slots": [
+    {
+      "name": "label",
+      "docs": "The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+    }
+  ],
   "parts": [],
   "dependents": [],
   "dependencies": [],
diff --git a/src/translate/cli/build.readme.md b/src/translate/cli/build.readme.md
index 5f6c540c109..7de5f855455 100644
--- a/src/translate/cli/build.readme.md
+++ b/src/translate/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-add.readme.md b/src/translate/cli/capacitor-add.readme.md
index 464a4fb5a49..6a1ecf8bc10 100644
--- a/src/translate/cli/capacitor-add.readme.md
+++ b/src/translate/cli/capacitor-add.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor add` will do the following:
-
 - Install the Capacitor platform package
-- Copy the native platform template into your project
+- Copy the native platform template into your project
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-build.readme.md b/src/translate/cli/capacitor-build.readme.md
index ecbb4a9e00a..0ccb955a383 100644
--- a/src/translate/cli/capacitor-build.readme.md
+++ b/src/translate/cli/capacitor-build.readme.md
@@ -1,9 +1,8 @@
 `ionic capacitor build` will do the following:
-
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-copy.readme.md b/src/translate/cli/capacitor-copy.readme.md
index ad813a2f858..2e5ddd1f0e7 100644
--- a/src/translate/cli/capacitor-copy.readme.md
+++ b/src/translate/cli/capacitor-copy.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor copy` will do the following:
-
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
+- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-open.readme.md b/src/translate/cli/capacitor-open.readme.md
index c52c1f44711..6a4f8a5eeba 100644
--- a/src/translate/cli/capacitor-open.readme.md
+++ b/src/translate/cli/capacitor-open.readme.md
@@ -1,3 +1,2 @@
 `ionic capacitor open` will do the following:
-
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-run.readme.md b/src/translate/cli/capacitor-run.readme.md
index 56a76e0d464..a17e32b9a99 100644
--- a/src/translate/cli/capacitor-run.readme.md
+++ b/src/translate/cli/capacitor-run.readme.md
@@ -1,5 +1,4 @@
 `ionic capacitor run` will do the following:
-
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -7,4 +6,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-sync.readme.md b/src/translate/cli/capacitor-sync.readme.md
index 403ecdf9af3..4ab54b5269d 100644
--- a/src/translate/cli/capacitor-sync.readme.md
+++ b/src/translate/cli/capacitor-sync.readme.md
@@ -1,6 +1,5 @@
 `ionic capacitor sync` will do the following:
-
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-update.readme.md b/src/translate/cli/capacitor-update.readme.md
index 6691448d373..6941a9bbe77 100644
--- a/src/translate/cli/capacitor-update.readme.md
+++ b/src/translate/cli/capacitor-update.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor update` will do the following:
-
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/cli/completion.readme.md b/src/translate/cli/completion.readme.md
index 98969ac91c0..c614f27c143 100644
--- a/src/translate/cli/completion.readme.md
+++ b/src/translate/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
diff --git a/src/translate/cli/config-get.readme.md b/src/translate/cli/config-get.readme.md
index b993225035b..ecfdc6708ac 100644
--- a/src/translate/cli/config-get.readme.md
+++ b/src/translate/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
diff --git a/src/translate/cli/config-set.readme.md b/src/translate/cli/config-set.readme.md
index 4cfe7872088..fd2916c6e27 100644
--- a/src/translate/cli/config-set.readme.md
+++ b/src/translate/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
diff --git a/src/translate/cli/config-unset.readme.md b/src/translate/cli/config-unset.readme.md
index 7dca73c33a4..9b7c09a8699 100644
--- a/src/translate/cli/config-unset.readme.md
+++ b/src/translate/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-build.readme.md b/src/translate/cli/cordova-build.readme.md
index 5859a7e2658..774bb3c3bab 100644
--- a/src/translate/cli/cordova-build.readme.md
+++ b/src/translate/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-compile.readme.md b/src/translate/cli/cordova-compile.readme.md
index f234fefe548..947b914334f 100644
--- a/src/translate/cli/cordova-compile.readme.md
+++ b/src/translate/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
+Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-emulate.readme.md b/src/translate/cli/cordova-emulate.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/cli/cordova-emulate.readme.md
+++ b/src/translate/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-platform.readme.md b/src/translate/cli/cordova-platform.readme.md
index 1b289c0ac8f..f65aea27395 100644
--- a/src/translate/cli/cordova-platform.readme.md
+++ b/src/translate/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-plugin.readme.md b/src/translate/cli/cordova-plugin.readme.md
index 162ba073340..b3ea63900d4 100644
--- a/src/translate/cli/cordova-plugin.readme.md
+++ b/src/translate/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
+Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-prepare.readme.md b/src/translate/cli/cordova-prepare.readme.md
index 6ae022dcaa0..90b7d18e711 100644
--- a/src/translate/cli/cordova-prepare.readme.md
+++ b/src/translate/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-requirements.readme.md b/src/translate/cli/cordova-requirements.readme.md
index edf47772b1f..04bdf9cef01 100644
--- a/src/translate/cli/cordova-requirements.readme.md
+++ b/src/translate/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
+Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-resources.readme.md b/src/translate/cli/cordova-resources.readme.md
index e93fdd8a890..730573a47c3 100644
--- a/src/translate/cli/cordova-resources.readme.md
+++ b/src/translate/cli/cordova-resources.readme.md
@@ -11,6 +11,5 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
-
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
diff --git a/src/translate/cli/cordova-run.readme.md b/src/translate/cli/cordova-run.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/cli/cordova-run.readme.md
+++ b/src/translate/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/cli/generate.readme.md b/src/translate/cli/generate.readme.md
index 042f64a7a4c..30de99a2484 100644
--- a/src/translate/cli/generate.readme.md
+++ b/src/translate/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
-- For a full list of available types, use `npx ng g --help`
-- For a list of options for a types, use `npx ng g <type> --help`
+ - For a full list of available types, use `npx ng g --help`
+ - For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
+To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
diff --git a/src/translate/cli/git-remote.readme.md b/src/translate/cli/git-remote.readme.md
index 58347c24535..b4caf425642 100644
--- a/src/translate/cli/git-remote.readme.md
+++ b/src/translate/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
diff --git a/src/translate/cli/info.readme.md b/src/translate/cli/info.readme.md
index d633e373984..03f86bc2907 100644
--- a/src/translate/cli/info.readme.md
+++ b/src/translate/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
diff --git a/src/translate/cli/init.readme.md b/src/translate/cli/init.readme.md
index 918620be789..98b3118bed5 100644
--- a/src/translate/cli/init.readme.md
+++ b/src/translate/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
diff --git a/src/translate/cli/integrations-disable.readme.md b/src/translate/cli/integrations-disable.readme.md
index b4f4a38bdd0..5418badf555 100644
--- a/src/translate/cli/integrations-disable.readme.md
+++ b/src/translate/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
+Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
diff --git a/src/translate/cli/integrations-enable.readme.md b/src/translate/cli/integrations-enable.readme.md
index 76526785eaa..945fcbbb226 100644
--- a/src/translate/cli/integrations-enable.readme.md
+++ b/src/translate/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
+Integrations can be re-added with the `--add` option.
\ No newline at end of file
diff --git a/src/translate/cli/integrations-list.readme.md b/src/translate/cli/integrations-list.readme.md
index d075d211e95..044dd455e0e 100644
--- a/src/translate/cli/integrations-list.readme.md
+++ b/src/translate/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
+- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
diff --git a/src/translate/cli/link.readme.md b/src/translate/cli/link.readme.md
index f5a96a51946..e621a2e948a 100644
--- a/src/translate/cli/link.readme.md
+++ b/src/translate/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/live-update-add.json b/src/translate/cli/live-update-add.json
new file mode 100644
index 00000000000..46f0fe803b2
--- /dev/null
+++ b/src/translate/cli/live-update-add.json
@@ -0,0 +1,80 @@
+{
+  "name": "ionic live-update add",
+  "namespace": [
+    "ionic",
+    "live-update"
+  ],
+  "summary": "Adds Appflow Live Update plugin to the project",
+  "description": "This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.\n\nFor Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.\n\nFor Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.",
+  "footnotes": [],
+  "groups": [
+    "paid"
+  ],
+  "exampleCommands": [
+    "ionic live-update add ",
+    "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+    "ionic live-update add --max-store=2 --min-background-duration=30",
+    "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30"
+  ],
+  "aliases": [],
+  "inputs": [],
+  "options": [
+    {
+      "name": "app-id",
+      "type": "string",
+      "summary": "Your Appflow app ID",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "id"
+      }
+    },
+    {
+      "name": "channel-name",
+      "type": "string",
+      "summary": "The channel to check for updates from",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "update-method",
+      "type": "string",
+      "summary": "The update method that dictates the behavior of the plugin",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "max-store",
+      "type": "string",
+      "summary": "The maximum number of downloaded versions to store on the device",
+      "default": "2",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "quantity"
+      }
+    },
+    {
+      "name": "min-background-duration",
+      "type": "string",
+      "summary": "The minimum duration after which the app checks for an update in the background",
+      "default": "30",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "seconds"
+      }
+    }
+  ],
+  "type": "project"
+}
\ No newline at end of file
diff --git a/src/translate/cli/live-update-add.readme.md b/src/translate/cli/live-update-add.readme.md
new file mode 100644
index 00000000000..bc0316117d7
--- /dev/null
+++ b/src/translate/cli/live-update-add.readme.md
@@ -0,0 +1,5 @@
+This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.
+
+For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
+
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
diff --git a/src/translate/cli/live-update-configure.json b/src/translate/cli/live-update-configure.json
new file mode 100644
index 00000000000..cfcaeac37ee
--- /dev/null
+++ b/src/translate/cli/live-update-configure.json
@@ -0,0 +1,86 @@
+{
+  "name": "ionic live-update configure",
+  "namespace": [
+    "ionic",
+    "live-update"
+  ],
+  "summary": "Overrides Appflow Live Update configuration",
+  "description": "This command overrides configuration for the Appflow Live Update plugin (`cordova-plugin-ionic`) in Capacitor projects.\n\nFor Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.\n\nFor Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.",
+  "footnotes": [],
+  "groups": [
+    "paid"
+  ],
+  "exampleCommands": [
+    "ionic live-update configure ",
+    "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+    "ionic live-update configure --max-store=2 --min-background-duration=30",
+    "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30",
+    "ionic live-update configure android",
+    "ionic live-update configure ios"
+  ],
+  "aliases": [],
+  "inputs": [
+    {
+      "name": "platform",
+      "summary": "The native platform (e.g. `ios`, `android`)",
+      "required": false
+    }
+  ],
+  "options": [
+    {
+      "name": "app-id",
+      "type": "string",
+      "summary": "Your Appflow app ID",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "id"
+      }
+    },
+    {
+      "name": "channel-name",
+      "type": "string",
+      "summary": "The channel to check for updates from",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "update-method",
+      "type": "string",
+      "summary": "The update method that dictates the behavior of the plugin",
+      "groups": [],
+      "aliases": [],
+      "spec": {
+        "value": "name"
+      }
+    },
+    {
+      "name": "max-store",
+      "type": "string",
+      "summary": "The maximum number of downloaded versions to store on the device",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "quantity"
+      }
+    },
+    {
+      "name": "min-background-duration",
+      "type": "string",
+      "summary": "The minimum duration after which the app checks for an update in the background",
+      "groups": [
+        "advanced"
+      ],
+      "aliases": [],
+      "spec": {
+        "value": "seconds"
+      }
+    }
+  ],
+  "type": "project"
+}
\ No newline at end of file
diff --git a/src/translate/cli/live-update-configure.readme.md b/src/translate/cli/live-update-configure.readme.md
new file mode 100644
index 00000000000..1d8c7504c8f
--- /dev/null
+++ b/src/translate/cli/live-update-configure.readme.md
@@ -0,0 +1,5 @@
+This command overrides configuration for the Appflow Live Update plugin (`cordova-plugin-ionic`) in Capacitor projects.
+
+For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
+
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
diff --git a/src/translate/cli/live-update-manifest.json b/src/translate/cli/live-update-manifest.json
new file mode 100644
index 00000000000..78ee4a6a7ba
--- /dev/null
+++ b/src/translate/cli/live-update-manifest.json
@@ -0,0 +1,18 @@
+{
+  "name": "ionic live-update manifest",
+  "namespace": [
+    "ionic",
+    "live-update"
+  ],
+  "summary": "Generates a manifest file for the Live Update service from a built app directory",
+  "description": "",
+  "footnotes": [],
+  "groups": [
+    "paid"
+  ],
+  "exampleCommands": [],
+  "aliases": [],
+  "inputs": [],
+  "options": [],
+  "type": "global"
+}
\ No newline at end of file
diff --git a/src/translate/cli/live-update-manifest.readme.md b/src/translate/cli/live-update-manifest.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/cli/login.readme.md b/src/translate/cli/login.readme.md
index ce63bb58ac0..0fbe95d2ae8 100644
--- a/src/translate/cli/login.readme.md
+++ b/src/translate/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/logout.readme.md b/src/translate/cli/logout.readme.md
index 540a69a156c..4122a7422e5 100644
--- a/src/translate/cli/logout.readme.md
+++ b/src/translate/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
+If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
diff --git a/src/translate/cli/repair.readme.md b/src/translate/cli/repair.readme.md
index 9b01e9d40d8..dbb18055c3a 100644
--- a/src/translate/cli/repair.readme.md
+++ b/src/translate/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
diff --git a/src/translate/cli/serve.json b/src/translate/cli/serve.json
index 03b95b8e464..d0961e3c8e5 100644
--- a/src/translate/cli/serve.json
+++ b/src/translate/cli/serve.json
@@ -4,7 +4,7 @@
     "ionic"
   ],
   "summary": "Start a local dev server for app dev/testing",
-  "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\nTry the `--lab` option to see multiple platforms at once.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
+  "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).",
   "footnotes": [],
   "groups": [],
   "exampleCommands": [
diff --git a/src/translate/cli/serve.readme.md b/src/translate/cli/serve.readme.md
index 3090717db0b..b08bf89fccf 100644
--- a/src/translate/cli/serve.readme.md
+++ b/src/translate/cli/serve.readme.md
@@ -2,8 +2,6 @@ Easily spin up a development server which launches in your browser. It watches f
 
 By default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.
 
-Try the `--lab` option to see multiple platforms at once.
-
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
diff --git a/src/translate/cli/signup.readme.md b/src/translate/cli/signup.readme.md
index 82d215181a5..4761dfdf982 100644
--- a/src/translate/cli/signup.readme.md
+++ b/src/translate/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/ssh-setup.readme.md b/src/translate/cli/ssh-setup.readme.md
index b95050beae9..f6ed6f93cb8 100644
--- a/src/translate/cli/ssh-setup.readme.md
+++ b/src/translate/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/ssh-use.readme.md b/src/translate/cli/ssh-use.readme.md
index 4714fa29928..b9a78d4db3e 100644
--- a/src/translate/cli/ssh-use.readme.md
+++ b/src/translate/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
diff --git a/src/translate/cli/ssl-generate.readme.md b/src/translate/cli/ssl-generate.readme.md
index aea3ec98cc5..c49644b96ef 100644
--- a/src/translate/cli/ssl-generate.readme.md
+++ b/src/translate/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
diff --git a/src/translate/cli/start.readme.md b/src/translate/cli/start.readme.md
index 9b3d3b471e4..45b725f705d 100644
--- a/src/translate/cli/start.readme.md
+++ b/src/translate/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 986eeabbc94..1fbd6aab841 100644
--- a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,2 +1,3 @@
+
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
index 90e1ee9b77e..deb9dde4602 100644
--- a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,3 +1,4 @@
+
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
index 11db0748e34..420a0d400d4 100644
--- a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
index a21a70fb083..fb2004ca29c 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,3 +1,4 @@
+
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
index 41472b2e411..56e36fe9053 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1 +1,2 @@
+
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
index 8f50b6279c0..b18059b0829 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
+
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
-
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
index e11ad80b4a3..8bc209c7e54 100644
--- a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,3 +1,4 @@
+
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
index 0303990f06b..18f742e5108 100644
--- a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,3 +1,4 @@
+
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 23e8c973bf2..76387367a61 100644
--- a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index e27b0ba6540..822209a4a72 100644
--- a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1 +1,2 @@
+
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index c31c989a3d3..93a3f290203 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,3 +1,4 @@
+
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 64f0fad3191..3592aee1757 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
index a82b309d78c..2eb94af7221 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
index 8e414578f93..0c671a0c2d0 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
index 5f6722050b0..48c289cc3fb 100644
--- a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1 +1,2 @@
+
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
index 2813a5d498b..5672e0b2213 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index 95a88837497..d7ef092bae5 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index ef9f2968a8f..c331a7d05f5 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index e84626aea1d..6d2e7862965 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,2 +1,3 @@
+
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
index e89f74940ca..c1b58f99edf 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1 +1,3 @@
+
+
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
index aff2e2cb4d6..0db391fddba 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1 +1,2 @@
+
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
index bb919529254..12d31c41dd7 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1 +1,2 @@
+
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
index fbde6778edf..87dd87d5765 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to read and write app preferences
diff --git a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
index c2d7f1730a0..c0210b3f9e5 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,3 +1,4 @@
+
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
index 6b4fa2e5c61..08cfe48a452 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,3 +1,4 @@
+
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
index 6213470725d..1e612327b09 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1 +1,2 @@
+
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
index b3fd1055a9a..79bd464667d 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
index 41c425d19c7..af28dc677bd 100644
--- a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1 +1,2 @@
+
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
index 4197b26f800..f0017f9025d 100644
--- a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1 +1,2 @@
+
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
index 4c69face47f..d1ce36553bc 100644
--- a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,2 +1,3 @@
+
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
index b066c65401a..48d67747675 100644
--- a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,2 +1,3 @@
+
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
index 3a4a3e352cf..62278126195 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,3 +1,4 @@
+
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
index b1cfb8cd04b..a43e7c719b2 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,2 +1,3 @@
+
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
index ee73844b3c8..90ce8edd2ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,2 +1,3 @@
+
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
index 9ab2fed769b..bc94608b2c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1 +1,2 @@
+
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
index 52465e564f0..11775820229 100644
--- a/src/translate/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,3 +1,4 @@
+
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
index 33af83938f9..ebe978c896a 100644
--- a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1 +1,2 @@
+
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index 747418e7857..d40a29ab2a1 100644
--- a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,3 +1,4 @@
+
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index b84c09c835f..9f16d6d8f42 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
+This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
index 340db120adf..06a0311c510 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
@@ -1 +1,2 @@
+
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
index 2c657416aef..da71524f3d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
index bd325268e71..0725aba40ce 100644
--- a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1 +1,2 @@
+
 BioCatch SDK Cordova support
diff --git a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index b1b5ec0f81c..6be6e7318ae 100644
--- a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,2 +1,3 @@
+
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
index 8d23815cab0..4818853ac89 100644
--- a/src/translate/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
index f0f05bc6a1f..52d671c0034 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,2 +1,3 @@
+
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
index 6f149bce706..b6cae0f21fd 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1 +1,2 @@
+
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index c0281f22a59..639b85fee5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3b80e3d0ecd..3ae195d12de 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,3 +1,4 @@
+
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index d0939b5fde7..f3579d8e616 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
index 9921b18062b..29af8d97385 100644
--- a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,8 +1,9 @@
+
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
-Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+ Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
-For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+ For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
index a222a2efbe7..b9836ebd4c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1 +1,2 @@
+
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
index d97dd2af981..51b06d0cc15 100644
--- a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,3 +1,4 @@
+
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
index b925da2342c..71995e79760 100644
--- a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1 +1,2 @@
+
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
index f03b8b179a9..bf83901883b 100644
--- a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1 +1,2 @@
+
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
index 7b8674b3871..7e5a437d1d3 100644
--- a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1 +1,2 @@
+
 This plugin provides build information.
diff --git a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
index 515f629e662..5a83eede868 100644
--- a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,3 +1,5 @@
+
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
+
diff --git a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
index b0ecb7bb40b..16d031664c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,2 +1,3 @@
+
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
index 76f6447e69b..a2b5e1bab30 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1 +1,2 @@
+
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
index 2914b087a64..d68a0a44b0e 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,2 +1,3 @@
+
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
index 9b06352e407..31cf59dc30b 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,3 +1,4 @@
+
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
index aa5cc82125d..a354d9c7925 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,13 +1,12 @@
+
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
-
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
-
 inside of the <platform name='ios> section
diff --git a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
index 752a6da1f4f..76c58120b44 100644
--- a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
+
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
-
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
index 953ca23cf89..8518bffadeb 100644
--- a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,5 +1,6 @@
 Plugin for using Apple's ClassKit framework.
 
+
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
index 5b82513228d..f6b4973e48e 100644
--- a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
index 603b2b8f6b3..3176d5f4017 100644
--- a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1 +1,3 @@
+
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
+
diff --git a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 7e3928e3cd5..939c06b2441 100644
--- a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1 +1,2 @@
+
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
index 9d0f8be2ea1..3688eedbcac 100644
--- a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1 +1,2 @@
+
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
index b03bd091c4c..9cf894081e8 100644
--- a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,3 +1,4 @@
+
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index b32e2c7cacd..4bb2367cd5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1 +1,2 @@
+
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
index b7061033770..0243a89bfa0 100644
--- a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1 +1,2 @@
+
 Access and manage Contacts on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index ee32121391a..4a13e8229fa 100644
--- a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1 +1,2 @@
+
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
index 9faa50aaed7..6c659180b50 100644
--- a/src/translate/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
+Crops images
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 9116ddca6eb..5c24399bc42 100644
--- a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1 +1,2 @@
+
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
index d2632a61abf..5eed8b85866 100644
--- a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1 +1,2 @@
+
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
index cabc3d4ff44..08fbb92c20c 100644
--- a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
index 8943e5b9ca4..bffae754b58 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1 +1,2 @@
+
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
index f11c48fa910..ad508847c3e 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1 +1,3 @@
+
+
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
index 4dbbb06d71c..abe72e3b6c0 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
index e96364431a7..02c713e2138 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-device.readme.md b/src/translate/native/@awesome-cordova-plugins-device.readme.md
index 3dbd2dec8e3..c6ef6980695 100644
--- a/src/translate/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device.readme.md
@@ -1 +1,2 @@
+
 Access information about the underlying device and platform.
diff --git a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
index ac9d8279b92..893058bc4eb 100644
--- a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1 +1,2 @@
+
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
index 64c6b6393fe..a90f9cfbe85 100644
--- a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1 +1,2 @@
+
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
index f988d884a0c..11ac16aafc6 100644
--- a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
index 3a08f9c811c..7eac80f6cff 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,2 +1,4 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
index 03cd028ccfd..29d32018802 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1 +1,2 @@
+
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
index 605e7b14d41..7e39f62d9b0 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1 +1,2 @@
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
+
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
index dad89444163..f15e01b1143 100644
--- a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1 +1,3 @@
+
 This plugin is designed to support downloading files using Android DownloadManager.
+
diff --git a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
index a305d027409..4176ac2a7b9 100644
--- a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1 +1,4 @@
+
+
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
+
diff --git a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
index d0554945c4c..81259d50cc1 100644
--- a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,3 +1,5 @@
+
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
+
diff --git a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index b76b54f6046..40349a8306b 100644
--- a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1 +1,2 @@
+
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 043375415ac..16c3ea63d2a 100644
--- a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-Retrieves additional device information from the Device Hardware
 
-- memory
-- cpumhz
-- totalstorage
-- freestorage
+Retrieves additional device information from the Device Hardware
+ - memory
+ - cpumhz
+ - totalstorage
+ - freestorage
diff --git a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
index b140e97cb32..12d214e6d38 100644
--- a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,3 +1,4 @@
+
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
index 93e5e887491..df9af63f74b 100644
--- a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,10 +1,11 @@
+
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
-To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+ To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -29,7 +30,6 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
-
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
-
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-#### Android Install
 
+#### Android Install
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
+
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
index dbbb3b72132..f3790772c17 100644
--- a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1 +1,2 @@
+
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
index 4bf1bdf418f..b4553ad9baf 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
index f1b5408277a..4fdfccbf60d 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1 +1,2 @@
+
 Simple file encryption for Cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
index a719c048fe4..ba26e51b8cd 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1 +1,2 @@
+
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
index 1f3eeb42d5a..c9445ac1ce7 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1 +1,3 @@
+
+
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
index 3616dbd3573..b33dc3c0f97 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
index 4770407e60d..c8ba532eae9 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to upload and download files.
diff --git a/src/translate/native/@awesome-cordova-plugins-file.readme.md b/src/translate/native/@awesome-cordova-plugins-file.readme.md
index 28bc40d6e90..1e61b343d6b 100644
--- a/src/translate/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
+
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
-
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
-This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
-The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
-Although most of the plugin code was written when an earlier spec was current: http:
-//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-//dev.w3.org/2009/dap/file-system/file-writer.html
+ This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+ The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+ Although most of the plugin code was written when an earlier spec was current: http:
+  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index ce125266039..f87a05030d7 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -5,9 +6,7 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-
-For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
-
+For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 410431f731b..4da15cc2ef6 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
index 38a8b24123d..45a214eee3a 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Config
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
index a1c32524c76..2d8b3effb06 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1 +1,2 @@
+
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index b88fed62436..2ad1e2109bd 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1 +1,2 @@
+
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 2cfe3a22194..6efc1b8ae10 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -9,7 +10,6 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
-
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 6a18f9fcf39..5bdcf74de11 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
index d1f83c84392..433e365a6a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
index aa17963327a..e044eb6dc66 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,2 +1,3 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
index 6c21f982616..25001f76e05 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1 +1,2 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index e57049202bf..80ef2d51635 100644
--- a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1 +1,2 @@
+
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
index 563b7c87954..6d68d07b0fe 100644
--- a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,8 +1,9 @@
+
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into `config.xml`:
+For android API 28+, the following xml snippet should be inserted into ```config.xml```:
 
 ```
 ...
@@ -11,4 +12,4 @@ For android API 28+, the following xml snippet should be inserted into `config.x
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
index 5987065177c..0cd5a4278d8 100644
--- a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1 +1,2 @@
+
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
index 5dda6c71ade..a56ed3a0093 100644
--- a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,2 +1,3 @@
+
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
index 2f83489f5fb..6e993e8f8a8 100644
--- a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
index 0391a010ff3..8d55357a600 100644
--- a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,11 +1,12 @@
+
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
-This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+ This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
-
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
+
diff --git a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
index 840cf8d4fb5..d1a3161e0b4 100644
--- a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1 +1,2 @@
+
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
index 8ebef774b81..1c759160579 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
+
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
-
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
index 0e715c64736..42ea1211a02 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1 +1,2 @@
+
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index a10f89326aa..e40dfc4db5e 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
index 676268db9d5..fb0392b4d72 100644
--- a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
+Read Gyroscope sensor data
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
index 6f496fc37ad..9cc2bc1f297 100644
--- a/src/translate/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
@@ -1 +1,2 @@
+
 HCE Cordova Wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
index 271a47a93b3..ad82eb6b43a 100644
--- a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
index 466271d3cba..dbd72bc8324 100644
--- a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,2 +1,3 @@
+
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-health.readme.md b/src/translate/native/@awesome-cordova-plugins-health.readme.md
index f49780a8921..349af915eac 100644
--- a/src/translate/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health.readme.md
@@ -1 +1,2 @@
+
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
index 2ba246ebaf0..e49b6cbc6ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-http.readme.md b/src/translate/native/@awesome-cordova-plugins-http.readme.md
index 3fcae7e8052..40ad52f5a5d 100644
--- a/src/translate/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
+
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
-
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
index 14a21342440..4421569a8f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1 +1,2 @@
-Embedded httpd for Cordova apps. Light weight HTTP server.
+
+Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index 8a8ae830783..d223513c705 100644
--- a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
index accd867793f..ee369f17322 100644
--- a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides functions for working with iBeacons.
 
-The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+ The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
index 8f9c76acd94..75f3775bff1 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,3 +1,4 @@
+
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
index 88fa3c7bf5c..40b02d55e6b 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin For Image Resize
diff --git a/src/translate/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
index e6e57be76e7..f699597a628 100644
--- a/src/translate/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,3 +1,4 @@
+
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 0485062862e..87d0037b909 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
+Launches in app Browser
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index b6be39d32c9..5bcd6494c48 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,24 +1,25 @@
+
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|                      | ios | android | win-8 | win-10/uwp | mac |
-| -------------------- | --- | ------- | ----- | ---------- | --- |
-| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
-| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
-| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
-| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
-| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
-| downloadable content | ✅  |         |       |            | ✅  |
-| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
+|  | ios | android | win-8 | win-10/uwp | mac |
+|--|--|--|--|--|--|
+| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
+| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
+| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
+| downloadable content | ✅ |   |   |   | ✅ |
+| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
 
 Supports:
 
-- **iOS** version 7.0 or higher.
-- **Android** version 2.2 (API level 8) or higher
-  - with Google Play client version 3.9.16 or higher
-- **Windows** Store/Phone 8.1 or higher
-- **Windows 10 Mobile**
-- **macOS** version 10
-- **Xbox One**
-  - (and any platform supporting Microsoft's UWP)
+ - **iOS** version 7.0 or higher.
+ - **Android** version 2.2 (API level 8) or higher
+   - with Google Play client version 3.9.16 or higher
+ - **Windows** Store/Phone 8.1 or higher
+ - **Windows 10 Mobile**
+ - **macOS** version 10
+ - **Xbox One**
+   - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 143985e329b..5fbffa5c65b 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1 +1,2 @@
+
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
index 8e174f56973..32b56cbab41 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,3 +1,5 @@
+
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
+
diff --git a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
index c28c9dcb463..365932222f7 100644
--- a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
index 680fb4b5caa..77bbacfc378 100644
--- a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1 +1,2 @@
+
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
index 685bec69d99..93b6eee3eb3 100644
--- a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
+
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
-
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
index 6526cd4d4ff..3cecc84de9e 100644
--- a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 1c68245f996..6fe62b6c53a 100644
--- a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,3 +1,4 @@
+
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index 708074a0ab2..b8ea2b47c9e 100644
--- a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1 +1,2 @@
+
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
index 03fc8b67cb1..8a75e4fc94f 100644
--- a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,2 +1,3 @@
+
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
index ed15dd96b1c..2895fffa54c 100644
--- a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1 +1,2 @@
+
 Implementation of the JINS MEME SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
index be8555b753a..9fde9b57805 100644
--- a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
index b86b22652c5..1ccf061fc98 100644
--- a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,3 +1,4 @@
+
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index d2e63dd18d1..cca62d8b43e 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,2 +1,3 @@
+
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
index ae817d52f6d..7764ef64d16 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,3 +1,4 @@
+
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
index 013e0cacbed..c28100fc7ff 100644
--- a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,3 +1,4 @@
+
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
index a272d33f4e3..125e1108746 100644
--- a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,2 +1,3 @@
+
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 105b197495b..0306a39d956 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
index 2f3437ec5c2..942352f7056 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,4 +1,5 @@
-Assists in leaving user reviews/ratings in the App Stores.
 
+
+Assists in leaving user reviews/ratings in the App Stores.
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
index fc39816081a..6cc5413db8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1 +1,2 @@
+
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
index f6123e51703..2085ded77a8 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1 +1,2 @@
+
 This plugin to create local backup
diff --git a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
index 6cfdd379643..82c183d6fee 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
index ed018edb499..99d60417c8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index e67243449ae..539dbf0c5b4 100644
--- a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
index bead6de72c2..55292ec8b1b 100644
--- a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1 +1,2 @@
+
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
index ca5ec6a2525..9e5778eab23 100644
--- a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/native/@awesome-cordova-plugins-market.readme.md b/src/translate/native/@awesome-cordova-plugins-market.readme.md
index 0fa09982e5b..281c8d456ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-market.readme.md
@@ -1 +1,2 @@
+
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
index 69b6b0ebf1b..92cacd40a12 100644
--- a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/native/@awesome-cordova-plugins-media.readme.md b/src/translate/native/@awesome-cordova-plugins-media.readme.md
index f67d2174eea..9d07585f502 100644
--- a/src/translate/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
index 63f05dbf100..13edc56092e 100644
--- a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
index f3eb05040cf..75e25a2c230 100644
--- a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index c159f3801cb..b8584c4e0ae 100644
--- a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1 +1,2 @@
+
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index 0d06c413e79..e9f6b965a20 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,2 +1,3 @@
+
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index d71ef31d811..30c9e83dc6d 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,3 +1,4 @@
+
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
index 0390d514207..72ffec61b13 100644
--- a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,4 +1,5 @@
+
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index 1a4f27e7fd5..ba01c25cf88 100644
--- a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1 +1,2 @@
+
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
index 04fe4a3bf33..e5465ae0a91 100644
--- a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,3 +1,4 @@
+
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
index 7bbca215ca4..b37886b1b59 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
+Native Audio Playback
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 5468f7f9077..3e9b7575290 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
index faea3298df2..cd2d3dab18a 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1 +1,3 @@
+
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
+
diff --git a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index 266ae69275a..edd6e9c39ee 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1 +1,2 @@
+
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 9a2e0d43722..7bcffb8dee4 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,2 +1,3 @@
+
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
index 4e29c4eeb6a..ad0db3ff5c9 100644
--- a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1 +1,2 @@
+
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
index 837c7e475a5..ab6d1bf9d08 100644
--- a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1 +1,2 @@
+
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/native/@awesome-cordova-plugins-network.readme.md b/src/translate/native/@awesome-cordova-plugins-network.readme.md
index 9a5f7a35d4e..5ad7357168c 100644
--- a/src/translate/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
index a81214659db..92837035391 100644
--- a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
+
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
-
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
index 9632b1f0155..4e1c4bcb571 100644
--- a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,4 +1,5 @@
+
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
index dd7010c8876..5ddc2066105 100644
--- a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,3 +1,4 @@
+
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -5,13 +6,11 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
-
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
-
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -66,4 +65,5 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-   `$ chmod +x hooks/copy_android_notification_icons.js`
+`$ chmod +x hooks/copy_android_notification_icons.js`
+
diff --git a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 11e9c0ca52c..0be0100f96d 100644
--- a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1 +1,2 @@
-Plugin to open native screens of iOS/android settings
+
+Plugin to open native screens of iOS/android settings
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
index c59128571c6..077568f6f76 100644
--- a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1 +1,2 @@
+
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
index 4caf38450f4..97823a256c7 100644
--- a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1 +1,2 @@
+
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
index 4f099e14ed4..e45425cee51 100644
--- a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 22692f6e35d..0b14edafe4a 100644
--- a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
index 81ece364e1f..c6fcd66be8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,2 +1,3 @@
+
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index 1510b50b7b6..dd840c8b485 100644
--- a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,2 +1,3 @@
+
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
index 77e517bcbd9..1f20587b9e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,3 +1,4 @@
+
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
index c4ca80fa312..642ad87c3ba 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
index 6596e0e430f..6ea7514c5fa 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
index d1bb01fec7e..2c12503cd71 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,3 +1,6 @@
+
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
+
+
diff --git a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
index 9a9cc59bc6c..fa7a099a33f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Pinterest
diff --git a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
index b1cab91f830..c42c478d81d 100644
--- a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1 +1,2 @@
+
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
index 4ed7aff21ca..eaca280cad2 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,2 +1,3 @@
+
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
index 1985ca44851..779cd5d6ec2 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,2 +1,3 @@
+
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
index 5aff311b111..312ac4a9125 100644
--- a/src/translate/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
+Prints documents or HTML rendered content
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 909c2ef0dbb..51bb27361c9 100644
--- a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1 +1,2 @@
+
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
index dc1a4fbbb4b..7f42a5bcd96 100644
--- a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
+
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
-
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/native/@awesome-cordova-plugins-push.readme.md b/src/translate/native/@awesome-cordova-plugins-push.readme.md
index a9c3464e985..5ae1db23037 100644
--- a/src/translate/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
index e65c6c7edd7..464bba08731 100644
--- a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
index d9b32939ab5..fcc40802c3d 100644
--- a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,3 +1,4 @@
+
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 55b6fc63435..3dcb9304702 100644
--- a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,3 +1,4 @@
+
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index 505b461b09c..a90b29a29b0 100644
--- a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1 +1,2 @@
+
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
index 2d13f688d77..13214fabab4 100644
--- a/src/translate/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
@@ -1 +1,2 @@
+
 This plugin to restart android application
diff --git a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
index 9f1d179bd5c..1b4e50f1b68 100644
--- a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1 +1,2 @@
+
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index 6153b43d685..c635a5fd046 100644
--- a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,3 +1,4 @@
+
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
index a83e7487c9e..416c63df2e9 100644
--- a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
index e9b365c009a..15c0b85bf5f 100644
--- a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
+Captures a screen shot
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
index 5af0e96163c..a4c9c37f0b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1 +1,2 @@
+
 This plugin enables sensors on Android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
index a16c1211a8c..125a3910c49 100644
--- a/src/translate/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
@@ -1 +1,2 @@
+
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
index b13d7210b0e..aca58cc645a 100644
--- a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
index 917873665cf..5608715c9fa 100644
--- a/src/translate/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
+Handles shake gesture
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 630d79ceeb0..8ab0b4dd94f 100644
--- a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index 40b7e9082ef..d7fe4d72b94 100644
--- a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,3 +1,4 @@
+
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index f02092735e3..e8991e9348b 100644
--- a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,6 +1,7 @@
+
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-_Source:_ https://developer.apple.com/sign-in-with-apple/
+*Source:* https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
index 80e74390f46..52c91993c93 100644
--- a/src/translate/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,3 +1,4 @@
+
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index 00c77e7cdfc..e6270053a4a 100644
--- a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,3 +1,4 @@
+
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
index 696999e2340..83f1f737e59 100644
--- a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,2 +1,3 @@
+
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
index 3af874243f1..eb6aaf6b11c 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1 +1,2 @@
+
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
index d64c2f4cab6..b0ba3252b25 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
@@ -1 +1,3 @@
+
+
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
index 3edd7dba0d1..760be2d9030 100644
--- a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,3 +1,4 @@
+
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
index efc07916d88..ccd38016353 100644
--- a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1 +1,2 @@
+
 This plugin does speech recognition using cloud services
diff --git a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
index 5521af0b3b3..8623152c556 100644
--- a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1 +1,2 @@
+
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 97f3a5146a5..66329069921 100644
--- a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
index 1a5acf29e82..31117f45f87 100644
--- a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
index cbc01dcad68..bce7a50dba7 100644
--- a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-Cordova plugin for authenticating with Spotify
 
+Cordova plugin for authenticating with Spotify
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 1f34ca227ed..92e4d096de7 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
index bfb4c960c5d..0d19359e763 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1 +1,2 @@
+
 Access SQLite databases on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 4c8d739d81f..62c602df45a 100644
--- a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
index 167ed6673b8..8866094f12f 100644
--- a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1 +1,2 @@
-- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+
+* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
index 0c999e9b7e3..d2df403f415 100644
--- a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,3 +1,4 @@
+
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
index b6a57d237ac..918f0320b25 100644
--- a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
+
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
-
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
index 5a521be5eb5..b093d14b4af 100644
--- a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
index 2e8f0e8c676..32f49f8fb59 100644
--- a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
index 22c07237113..373fa2e0f42 100644
--- a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1 +1,2 @@
+
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 4c4cc795164..6a1864ed364 100644
--- a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1 +1,2 @@
+
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 8f1ca44e3ad..577ae87896a 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 2efbb060915..80ce9a5af77 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
index b53253d0eef..41e946cfc8e 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
index cd2ff3ab709..032d6ec13cc 100644
--- a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 40815363667..81e3408cc65 100644
--- a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1 +1,2 @@
+
 In-app browser that allows styling.
diff --git a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index aea7b49108e..a78596064d6 100644
--- a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,3 +1,4 @@
+
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
index 9034d3ab1f0..c7b5d6c7fba 100644
--- a/src/translate/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
index 0bb27885878..02615a1ec9f 100644
--- a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,3 +1,4 @@
+
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 0fd10d23d96..16ead04e0ed 100644
--- a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
+
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
-
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
index f1dd7f71fd1..8876a612197 100644
--- a/src/translate/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
@@ -1 +1,2 @@
+
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 032854e3607..1db59244ff9 100644
--- a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1 +1,2 @@
+
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 5ec8996425d..0b49755a0de 100644
--- a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
-## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
-
-## iOS Requirements
 
+This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+-
+iOS Requirements
+-
 Update your Cocoapods repo before you install the plugin.
-
 ```
 $ pod repo update
 ```
-
-- Browser Requirements
-- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
-
+-
+Browser Requirements
+-
+After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
index 1bf710ddbcc..504b3c9eb24 100644
--- a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 857e2854746..5cf251b3c8e 100644
--- a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
index c5e46b65ea3..9c299395cf9 100644
--- a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,3 +1,4 @@
-The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+
+The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
index f52e258035a..416be944a54 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1 +1,2 @@
+
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
index f82e5deb0ab..dba5defbdd0 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
+Vibrates the device
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index f3e970c9efb..a22e03f3945 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 
+This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
index e7f3e1b8a0b..1ee9f14d4a0 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
index e6bce9df776..62d0e5158b6 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1 +1,2 @@
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
+
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
index 74a4213c286..562d250d54f 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 74f478b025e..732d61641b6 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
index 981c27c1eb3..a2eb7545759 100644
--- a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1 +1,2 @@
+
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
index b2e43d635c3..639229cba09 100644
--- a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1 +1,2 @@
+
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index ca5fcb58975..e519b6b087f 100644
--- a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,3 +1,4 @@
+
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
index 3fef1483ebd..c85ed196728 100644
--- a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,3 +1,5 @@
+
+
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 17fd2049102..65e5f92754a 100644
--- a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1 +1,2 @@
+
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
index e0a91fda385..33a16ff46c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,3 +1,4 @@
+
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
index b6d33465570..48620c015e9 100644
--- a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1 +1,2 @@
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
+
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
index 6433e0021a7..8550752032e 100644
--- a/src/translate/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
index 94a52e6dc07..e358d13434b 100644
--- a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.

From 3ec07a77b75ca4508eaf811ea70906ab6c32e05b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 20 Jul 2023 09:45:10 +0900
Subject: [PATCH 442/469] chore

---
 docs/api/select.md | 84 +++++++++++++++++++++++-----------------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/docs/api/select.md b/docs/api/select.md
index 6efafccc80f..5713344106a 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -82,11 +82,11 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde
 
 <PopoverExample />
 
-## 複数選択
+## Multiple Selection
 
-select に `multiple` 属性を追加することで、ユーザーは複数のオプションを選択することができるようになります。複数のオプションを選択できる場合、アラートまたはポップオーバーのオーバーレイは、チェックボックススタイルのオプションのリストをユーザーに提示します。select コンポーネントの値には、選択されたすべてのオプションの値の配列が格納されます。
+By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover 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.
 
-注意： `action-sheet` インターフェースは、複数選択では動作しません。
+Note: the `action-sheet` interface will not work with multiple selection.
 
 import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
 
@@ -94,17 +94,17 @@ import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multipl
 
 ## Responding to Interaction
 
-select とユーザーのインタラクションを処理する主な方法は、 `ionChange` イベント、 `ionDismiss` イベント、 `ionCancel` イベントです。これらのイベントと select が発生するその他のイベントの詳細については、[イベント](#events) を参照してください。
+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/v7/select/basic/responding-to-interaction/index.md';
 
 <RespondingToInteractionExample />
 
-## Object値について
+## Object Value References
 
-選択した値にObjectを使用する場合、これらのObjectの識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的のObject値を持つ既存の値がselectにロードされたが、新しく取得されたselectオプションが異なるIDを持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。
+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.
 
-デフォルトでは、selectはObjectの等価性(`===`)を使用して、オプションが選択されているかどうかを判断します。これは`compareWiths`プロパティにプロパティ名または関数を指定することで上書きできます。
+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
 
@@ -140,59 +140,59 @@ import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
 
 ## Filled Selects
 
-Material Designでは、セレクトに塗りつぶしのスタイルが用意されています。セレクトの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+Material Design offers filled styles for a select. The `fill` property on the select can be set to either `"solid"` or `"outline"`.
 
-`fill` スタイルはセレクトコンテナを視覚的に定義するため、`fill` を使用するセレクトは `ion-item` で使用すべきではありません。
+Since the `fill` styles visually defines the select container, selects that use `fill` should not be used in `ion-item`.
 
 import FillExample from '@site/static/usage/v7/select/fill/index.md';
 
 <FillExample />
 
-## SelectのButton
+## Select Buttons
 
-alertはふたつのボタンをサポートしています: `Cancel` と `OK` です。それぞれのボタンは、 `cancelText` と `okText`  プロパティを使ってカスタマイズできます。
+The alert supports two buttons: `Cancel` and `OK`. Each button's text can be customized using the `cancelText` and `okText` properties.
 
-`action-sheet` と `popover` インタフェースには `OK` ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。`popover` インターフェースには`Cancel`ボタンがないので、backdropをクリックするとオーバーレイが閉じます。
+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/v7/select/customization/button-text/index.md';
 
 <ButtonTextExample />
 
-## インターフェイスオプション
+## Interface Options
 
-select は alert、action sheet、popover インターフェースを使用するので、`interfaceOptions` プロパティを通して、これらのコンポーネントにオプションを渡すことができます。これは、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すために使用できます。
+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.
 
-各インターフェースが受け付けるプロパティは、[ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md) を参照してください。
+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: `alert` インターフェースでは、 `interfaceOptions` は `inputs` や `buttons` をオーバーライドしません。
+Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
 
 import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.md';
 
 <InterfaceOptionsExample />
 
-## カスタマイズ
+## Customization
 
-Selectコンポーネントを構成する2つのユニットがあり、それぞれを別々にスタイルする必要があります。 `ion-select`要素は、ビュー上で選択された値（複数可）、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記の [インターフェース](#interfaces) セクションで定義されており、 `ion-select` をクリックすると開かれるダイアログです。インターフェースには、 `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。
+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.
 
-### Select 要素のスタイリング
+### Styling Select Element
 
-前述の通り、`ion-select` 要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSSと[CSSカスタムプロパティ](#css-custom-properties)を組み合わせてスタイルを設定します。
+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).
 
-また、必要な [ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part) に応じて、CSSのシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意のCSSプロパティをターゲットにすることができることに注意してください。
+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/v7/select/customization/styling-select/index.md';
 
 <StylingSelectExample />
 
-### Select インターフェイスのスタイリング
+### Styling Select Interface
 
-インターフェイスのダイアログのカスタマイズは、そのインターフェイスのドキュメントのカスタマイズのセクションにしたがって行ってください。
+Customizing the interface dialog should be done by following the Customization section in that interface's documentation:
 
-- [アラートのカスタマイズ](alert.md#customization)
-- [アクションシートのカスタマイズ](action-sheet.md#customization)
-- [ポップオーバーのカスタマイズ](popover.md#customization)
+- [Alert Customization](alert.md#customization)
+- [Action Sheet Customization](action-sheet.md#customization)
+- [Popover Customization](popover.md#customization)
 
-ただし、Selectオプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、[Selectオプションのドキュメント](select-option.md)を参照してください。
+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.
 
 ### Custom Toggle Icons
 
@@ -214,7 +214,7 @@ import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/
 
 ## Typeahead Component
 
-Typeaheadやオートコンプリートの機能は、既存のIonicコンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。
+Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
 
 import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
 
@@ -232,7 +232,7 @@ interface SelectChangeEventDetail<T = any> {
 
 ### SelectCustomEvent
 
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+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 {
@@ -241,41 +241,41 @@ interface SelectCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## Legacy Select Syntaxからの移行
+## Migrating from Legacy Select Syntax
 
-Ionic 7.0では、よりシンプルなselect構文が導入されました。この新しい構文は、selectの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.
 
-開発者は、この移行を一度に1つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
 
 
-### 最新の構文の使い方
+### Using the Modern Syntax
 
-最新の構文を使うには、2つのステップがあります。
+Using the modern syntax involves two steps:
 
-1. ion-label` を削除して、代わりに `ion-select` の `label` プロパティを使用します。ラベルの配置は `ion-select` の `labelPlacement` プロパティを使用して設定することができる。
-2. fill` と `shape` の使い方を `ion-item` から `ion-select` に移動します。
+1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`.
+2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`.
 
 import Migration from '@site/static/usage/v7/select/migration/index.md';
 
 <Migration />
 
-### レガシー構文の使用
+### Using the Legacy Syntax
 
-Ionicは、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、そのInputインスタンスでレガシー構文を使用するように強制できます。
+Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax.
 
-## プロパティ
+## Properties
 <Props />
 
-## イベント
+## Events
 <Events />
 
-## メソッド
+## Methods
 <Methods />
 
 ## CSS Shadow Parts
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS Custom Properties
 <CustomProps />
 
 ## Slots

From 80134d96f4551e7a21ae38b0f8ec60d9dcaf5c90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 20 Jul 2023 09:46:59 +0900
Subject: [PATCH 443/469] chore(): fix confrect

---
 docs/api/menu.md   | 10 +---------
 docs/api/select.md | 12 ------------
 2 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/docs/api/menu.md b/docs/api/menu.md
index 3dfd397e6e2..20902fa474d 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -31,11 +31,7 @@ import Basic from '@site/static/usage/v7/menu/basic/index.md';
 
 ## Menu Toggle
 
-<<<<<<< HEAD
-[ion-menu-toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
-=======
-The [menu toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
+[menu toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
 
 import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
@@ -50,9 +46,6 @@ import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
 <MenuType />
 
-<<<<<<< HEAD
-## テーマ
-=======
 
 ## Menu Sides
 
@@ -75,7 +68,6 @@ import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
 
 
 ## Theming
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
 
 ### CSS Shadow Parts
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 5713344106a..dbccd8cdea7 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -117,18 +117,6 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val
 import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';
 
 <ObjectValuesAndMultipleSelectionExample />
-<<<<<<< HEAD
-  
-
-## Label Placement
-
-Labelsは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
-
-<LabelPlacement />
-=======
->>>>>>> d57ab7ec755642f79e3d277c81f0306469ee806f
 
 ## Justification
   

From 7e04aefc2ea58f8b115c31fd555ec6bfc0039074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 20 Jul 2023 09:58:31 +0900
Subject: [PATCH 444/469] fmt

---
 .../version-v6/angular/lifecycle.md           |  58 +++---
 .../version-v6/angular/navigation.md          |  33 ++-
 .../version-v6/angular/overview.md            |   8 +-
 .../version-v6/angular/platform.md            |   6 +-
 .../version-v6/angular/slides.md              |  20 +-
 .../version-v6/angular/storage.md             |   2 +-
 .../version-v6/angular/testing.md             |  22 +-
 .../version-v6/angular/your-first-app.md      |   6 +-
 .../version-v6/api/accordion-group.md         |  14 +-
 .../version-v6/api/accordion.md               |  67 +++---
 .../version-v6/api/action-sheet.md            |  35 ++--
 .../version-v6/api/alert.md                   |  44 ++--
 .../version-v6/api/app.md                     |  32 +--
 .../version-v6/api/avatar.md                  |  21 +-
 .../version-v6/api/back-button.md             |  25 ++-
 .../version-v6/api/backdrop.md                |  17 +-
 .../version-v6/api/badge.md                   |  16 +-
 .../version-v6/api/breadcrumb.md              |  17 +-
 .../version-v6/api/breadcrumbs.md             |  22 +-
 .../version-v6/api/button.md                  |  25 ++-
 .../version-v6/api/buttons.md                 |  40 ++--
 .../version-v6/api/card-content.md            |  13 +-
 .../version-v6/api/card-header.md             |  13 +-
 .../version-v6/api/card-subtitle.md           |  15 +-
 .../version-v6/api/card-title.md              |  20 +-
 .../version-v6/api/card.md                    |  27 +--
 .../version-v6/api/checkbox.md                |  29 +--
 .../version-v6/api/chip.md                    |  22 +-
 .../version-v6/api/col.md                     |  25 ++-
 .../version-v6/api/content.md                 |  34 +--
 .../version-v6/api/datetime-button.md         |  20 +-
 .../version-v6/api/datetime.md                | 194 +++++++++---------
 .../version-v6/api/fab-button.md              |  21 +-
 .../version-v6/api/fab-list.md                |  15 +-
 .../version-v6/api/fab.md                     |  27 ++-
 .../version-v6/api/footer.md                  |  27 ++-
 .../version-v6/api/grid.md                    |  56 ++---
 .../version-v6/api/header.md                  |  32 +--
 .../version-v6/api/icon.md                    |   4 +-
 .../version-v6/api/img.md                     |  20 +-
 .../version-v6/api/infinite-scroll-content.md |  12 +-
 .../version-v6/api/infinite-scroll.md         |  34 +--
 .../version-v6/api/input.md                   |  54 ++---
 .../version-v6/api/item-divider.md            |  23 ++-
 .../version-v6/api/item-group.md              |  18 +-
 .../version-v6/api/item-option.md             |  18 +-
 .../version-v6/api/item-options.md            |  25 ++-
 .../version-v6/api/item-sliding.md            |  23 ++-
 .../version-v6/api/item.md                    |  42 ++--
 .../version-v6/api/label.md                   |  20 +-
 .../version-v6/api/list-header.md             |  22 +-
 .../version-v6/api/list.md                    |  25 ++-
 .../version-v6/api/loading.md                 |  30 ++-
 .../version-v6/api/menu-button.md             |  20 +-
 .../version-v6/api/menu-toggle.md             |  20 +-
 .../version-v6/api/menu.md                    |  30 +--
 .../version-v6/api/modal.md                   |  53 ++---
 .../version-v6/api/nav-link.md                |  18 +-
 .../version-v6/api/nav.md                     |  26 ++-
 .../version-v6/api/note.md                    |  21 +-
 .../version-v6/api/picker.md                  |  18 +-
 .../version-v6/api/popover.md                 |  75 +++----
 .../version-v6/api/progress-bar.md            |  32 +--
 .../version-v6/api/radio-group.md             |  19 +-
 .../version-v6/api/radio.md                   |  36 ++--
 .../version-v6/api/range.md                   |  44 ++--
 .../version-v6/api/refresher-content.md       |  13 +-
 .../version-v6/api/refresher.md               |  24 ++-
 .../version-v6/api/reorder-group.md           |  19 +-
 .../version-v6/api/reorder.md                 |  24 ++-
 .../version-v6/api/ripple-effect.md           |  21 +-
 .../version-v6/api/route-redirect.md          |  30 +--
 .../version-v6/api/route.md                   | 103 +++++-----
 .../version-v6/api/router-link.md             |  36 ++--
 .../version-v6/api/router-outlet.md           |  38 ++--
 .../version-v6/api/router.md                  |  32 +--
 .../version-v6/api/row.md                     |  22 +-
 .../version-v6/api/searchbar.md               |  40 ++--
 .../version-v6/api/segment-button.md          |  29 +--
 .../version-v6/api/segment.md                 |  44 ++--
 .../version-v6/api/select-option.md           |  22 +-
 .../version-v6/api/select.md                  |  73 ++++---
 .../version-v6/api/skeleton-text.md           |  22 +-
 .../version-v6/api/spinner.md                 |  23 ++-
 .../version-v6/api/split-pane.md              |  40 ++--
 .../version-v6/api/tab-bar.md                 |  54 ++---
 .../version-v6/api/tab-button.md              |  70 +++----
 .../version-v6/api/tab.md                     |  23 ++-
 .../version-v6/api/tabs.md                    |  23 ++-
 .../version-v6/api/text.md                    |  21 +-
 .../version-v6/api/textarea.md                |  39 ++--
 .../version-v6/api/thumbnail.md               |  21 +-
 .../version-v6/api/title.md                   |  24 ++-
 .../version-v6/api/toast.md                   |  26 ++-
 .../version-v6/api/toggle.md                  |  36 ++--
 .../version-v6/api/toolbar.md                 |  29 +--
 .../version-v6/cli.md                         |  16 +-
 .../version-v6/cli/configuration.md           |  34 +--
 .../version-v6/cli/livereload.md              |   3 +-
 .../version-v6/cli/using-a-proxy.md           |   4 +-
 .../version-v6/components.md                  |  30 ++-
 .../core-concepts/cross-platform.md           |  30 +--
 .../version-v6/core-concepts/fundamentals.md  |  32 +--
 .../version-v6/core-concepts/webview.md       |  22 +-
 .../what-are-progressive-web-apps.md          |  16 +-
 .../version-v6/deployment/app-store.md        |  27 +--
 .../version-v6/deployment/desktop-app.md      |  18 +-
 .../version-v6/deployment/play-store.md       |  30 +--
 .../deployment/progressive-web-app.md         |   4 +-
 .../version-v6/developer-resources/books.md   |   4 +-
 .../guides/first-app-v4/ios-android-camera.md |   2 +-
 .../guides/first-app-v4/theming.md            |   6 +-
 .../version-v6/developer-resources/tools.md   |   8 +-
 .../version-v6/developer-resources/videos.md  |   8 +-
 .../version-v6/developing/android.md          |  95 +++++----
 .../version-v6/developing/config.md           |  84 ++++----
 .../developing/config/global/index.md         |  16 +-
 .../developing/config/per-component/index.md  |  22 +-
 .../config/per-platform-fallback/index.md     |  24 ++-
 .../config/per-platform-overrides/index.md    |   8 +-
 .../developing/config/per-platform/index.md   |   7 +-
 .../developing/hardware-back-button.md        |  36 ++--
 .../version-v6/developing/ios.md              |  94 ++++-----
 .../version-v6/developing/keyboard.md         |  28 +--
 .../version-v6/developing/previewing.md       |  14 +-
 .../version-v6/developing/scaffolding.md      |   8 +-
 .../version-v6/developing/starting.md         |   6 +-
 .../version-v6/developing/tips.md             |  32 +--
 .../version-v6/index.md                       |  54 ++---
 .../version-v6/intro/cdn.md                   |  32 +--
 .../version-v6/intro/cli.md                   |  18 +-
 .../version-v6/intro/environment.md           |  24 +--
 .../version-v6/intro/first-app.md             |   9 +-
 .../version-v6/intro/next.md                  |   9 +-
 .../version-v6/intro/vscode-extension.md      |   6 +-
 .../version-v6/layout/css-utilities.md        |  45 ++--
 .../version-v6/layout/global-stylesheets.md   |   6 +-
 .../version-v6/layout/grid.md                 |  54 ++---
 .../version-v6/layout/structure.md            |  18 +-
 .../version-v6/native-faq.md                  |   7 +-
 .../version-v6/native.md                      |   4 -
 .../version-v6/react.md                       |  20 +-
 .../version-v6/react/config.md                |   8 +-
 .../version-v6/react/lifecycle.md             |  30 +--
 .../version-v6/react/navigation.md            |  82 ++++----
 .../version-v6/react/overview.md              |  20 +-
 .../version-v6/react/platform.md              |   5 +-
 .../version-v6/react/pwa.md                   |  53 ++---
 .../version-v6/react/quickstart.md            |  86 ++++----
 .../version-v6/reference/browser-support.md   |  23 +--
 .../version-v6/reference/glossary.md          | 138 +++++++------
 .../version-v6/reference/support.md           |  44 ++--
 .../version-v6/reference/versioning.md        |  15 +-
 .../version-v6/studio/setup/installation.md   |  16 +-
 .../version-v6/theming/advanced.md            |  32 +--
 .../version-v6/theming/basics.md              |  19 +-
 .../version-v6/theming/color-generator.md     |   2 +-
 .../version-v6/theming/colors.md              |  24 +--
 .../version-v6/theming/css-shadow-parts.md    |  54 ++---
 .../version-v6/theming/css-variables.md       |  28 +--
 .../version-v6/theming/dark-mode.md           |  28 +--
 .../version-v6/theming/platform-styles.md     |  26 +--
 .../version-v6/theming/themes.md              |  12 +-
 .../version-v6/troubleshooting/build.md       |  21 +-
 .../version-v6/troubleshooting/native.md      |  20 +-
 .../version-v6/troubleshooting/runtime.md     |   2 +-
 .../version-v6/updating/6-0.md                | 102 ++++-----
 .../version-v6/updating/7-0.md                |  33 +--
 .../version-v6/vue/config.md                  |  14 +-
 .../version-v6/vue/lifecycle.md               |  41 ++--
 .../version-v6/vue/navigation.md              |  67 +++---
 .../version-v6/vue/overview.md                |  14 +-
 .../version-v6/vue/platform.md                |   4 +-
 .../version-v6/vue/pwa.md                     |  45 ++--
 .../version-v6/vue/quickstart.md              | 136 +++++++-----
 .../version-v6/vue/slides.md                  |   2 +-
 .../version-v6/vue/your-first-app.md          |   2 +-
 .../vue/your-first-app/2-taking-photos.md     |   2 +-
 .../index.js                                  |   4 +-
 src/translate/.detection/cli/build.readme.md  |   2 +-
 .../.detection/cli/capacitor-add.readme.md    |   3 +-
 .../.detection/cli/capacitor-build.readme.md  |   3 +-
 .../.detection/cli/capacitor-copy.readme.md   |   3 +-
 .../.detection/cli/capacitor-open.readme.md   |   3 +-
 .../.detection/cli/capacitor-run.readme.md    |   3 +-
 .../.detection/cli/capacitor-sync.readme.md   |   3 +-
 .../.detection/cli/capacitor-update.readme.md |   3 +-
 .../.detection/cli/completion.readme.md       |   2 +-
 .../.detection/cli/config-get.readme.md       |   2 +-
 .../.detection/cli/config-set.readme.md       |   2 +-
 .../.detection/cli/config-unset.readme.md     |   2 +-
 .../.detection/cli/cordova-build.readme.md    |   2 +-
 .../.detection/cli/cordova-compile.readme.md  |   2 +-
 .../.detection/cli/cordova-emulate.readme.md  |   2 +-
 .../.detection/cli/cordova-platform.readme.md |   2 +-
 .../.detection/cli/cordova-plugin.readme.md   |   2 +-
 .../.detection/cli/cordova-prepare.readme.md  |   2 +-
 .../cli/cordova-requirements.readme.md        |   2 +-
 .../cli/cordova-resources.readme.md           |   3 +-
 .../.detection/cli/cordova-run.readme.md      |   2 +-
 .../.detection/cli/generate.readme.md         |   6 +-
 .../.detection/cli/git-remote.readme.md       |   2 +-
 src/translate/.detection/cli/info.readme.md   |   2 +-
 src/translate/.detection/cli/init.readme.md   |   2 +-
 .../cli/integrations-disable.readme.md        |   2 +-
 .../cli/integrations-enable.readme.md         |   2 +-
 .../cli/integrations-list.readme.md           |   2 +-
 src/translate/.detection/cli/link.readme.md   |   2 +-
 .../.detection/cli/live-update-add.readme.md  |   2 +-
 .../cli/live-update-configure.readme.md       |   2 +-
 src/translate/.detection/cli/login.readme.md  |   2 +-
 src/translate/.detection/cli/logout.readme.md |   2 +-
 src/translate/.detection/cli/repair.readme.md |   2 +-
 src/translate/.detection/cli/serve.readme.md  |   2 +-
 src/translate/.detection/cli/signup.readme.md |   2 +-
 .../.detection/cli/ssh-setup.readme.md        |   2 +-
 .../.detection/cli/ssh-use.readme.md          |   2 +-
 .../.detection/cli/ssl-generate.readme.md     |   2 +-
 src/translate/.detection/cli/start.readme.md  |   2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |   1 -
 ...awesome-cordova-plugins-actsheet.readme.md |   1 -
 .../@awesome-cordova-plugins-adjust.readme.md |   1 -
 ...esome-cordova-plugins-admob-free.readme.md |   1 -
 ...esome-cordova-plugins-admob-plus.readme.md |   1 -
 .../@awesome-cordova-plugins-admob.readme.md  |   2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |   1 -
 .../@awesome-cordova-plugins-alipay.readme.md |   1 -
 ...e-cordova-plugins-all-in-one-sdk.readme.md |   1 -
 ...rdova-plugins-analytics-firebase.readme.md |   1 -
 ...ordova-plugins-android-exoplayer.readme.md |   1 -
 ...dova-plugins-android-full-screen.readme.md |   3 +-
 ...me-cordova-plugins-android-notch.readme.md |   1 -
 ...dova-plugins-android-permissions.readme.md |   1 -
 ...@awesome-cordova-plugins-anyline.readme.md |   1 -
 ...cordova-plugins-app-availability.readme.md |   1 -
 ...ova-plugins-app-center-analytics.readme.md |   1 -
 ...rdova-plugins-app-center-crashes.readme.md |   1 -
 ...va-plugins-app-center-low-memory.readme.md |   1 -
 ...-cordova-plugins-app-center-push.readme.md |   2 -
 ...ome-cordova-plugins-app-launcher.readme.md |   1 -
 ...ome-cordova-plugins-app-minimize.readme.md |   1 -
 ...-cordova-plugins-app-preferences.readme.md |   1 -
 ...awesome-cordova-plugins-app-rate.readme.md |   1 -
 ...some-cordova-plugins-app-version.readme.md |   1 -
 ...wesome-cordova-plugins-apple-pay.readme.md |   1 -
 ...ome-cordova-plugins-apple-wallet.readme.md |   1 -
 ...awesome-cordova-plugins-appodeal.readme.md |   1 -
 ...wesome-cordova-plugins-appsflyer.readme.md |   1 -
 ...cordova-plugins-audio-management.readme.md |   1 -
 ...wesome-cordova-plugins-autostart.readme.md |   1 -
 ...cordova-plugins-background-fetch.readme.md |   1 -
 ...a-plugins-background-geolocation.readme.md |   1 -
 ...-cordova-plugins-background-mode.readme.md |   3 +-
 ...ordova-plugins-background-upload.readme.md |   1 -
 ...wesome-cordova-plugins-backlight.readme.md |   1 -
 .../@awesome-cordova-plugins-badge.readme.md  |   1 -
 ...esome-cordova-plugins-baidu-push.readme.md |   1 -
 ...-cordova-plugins-barcode-scanner.readme.md |   1 -
 ...ordova-plugins-base64-to-gallery.readme.md |   2 +-
 .../@awesome-cordova-plugins-base64.readme.md |   1 -
 ...e-cordova-plugins-battery-status.readme.md |   1 -
 ...awesome-cordova-plugins-biocatch.readme.md |   1 -
 ...ordova-plugins-biometric-wrapper.readme.md |   1 -
 .../@awesome-cordova-plugins-ble.readme.md    |   1 -
 ...@awesome-cordova-plugins-blinkid.readme.md |   1 -
 ...@awesome-cordova-plugins-blinkup.readme.md |   1 -
 ...ns-bluetooth-classic-serial-port.readme.md |   2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |   1 -
 ...cordova-plugins-bluetooth-serial.readme.md |   2 +-
 ...wesome-cordova-plugins-braintree.readme.md |   5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |   1 -
 ...esome-cordova-plugins-brightness.readme.md |   1 -
 ...some-cordova-plugins-broadcaster.readme.md |   1 -
 ...some-cordova-plugins-browser-tab.readme.md |   1 -
 ...esome-cordova-plugins-build-info.readme.md |   1 -
 ...awesome-cordova-plugins-calendar.readme.md |   2 -
 ...e-cordova-plugins-call-directory.readme.md |   1 -
 ...awesome-cordova-plugins-call-log.readme.md |   1 -
 ...some-cordova-plugins-call-number.readme.md |   1 -
 ...e-cordova-plugins-camera-preview.readme.md |   1 -
 .../@awesome-cordova-plugins-camera.readme.md |   3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |   2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |   1 -
 ...wesome-cordova-plugins-clevertap.readme.md |   1 -
 ...wesome-cordova-plugins-clipboard.readme.md |   2 -
 ...e-cordova-plugins-cloud-settings.readme.md |   1 -
 ...wesome-cordova-plugins-clover-go.readme.md |   1 -
 ...wesome-cordova-plugins-code-push.readme.md |   1 -
 ...ova-plugins-colored-browser-tabs.readme.md |   1 -
 ...awesome-cordova-plugins-contacts.readme.md |   1 -
 ...e-cordova-plugins-couchbase-lite.readme.md |   1 -
 .../@awesome-cordova-plugins-crop.readme.md   |   2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |   1 -
 ...some-cordova-plugins-date-picker.readme.md |   1 -
 ...awesome-cordova-plugins-db-meter.readme.md |   2 +-
 ...-cordova-plugins-device-accounts.readme.md |   1 -
 ...-cordova-plugins-device-feedback.readme.md |   2 -
 ...me-cordova-plugins-device-motion.readme.md |   1 -
 ...rdova-plugins-device-orientation.readme.md |   1 -
 .../@awesome-cordova-plugins-device.readme.md |   1 -
 ...esome-cordova-plugins-dfu-update.readme.md |   1 -
 ...esome-cordova-plugins-diagnostic.readme.md |   1 -
 ...@awesome-cordova-plugins-dialogs.readme.md |   1 -
 ...-cordova-plugins-document-picker.readme.md |   2 -
 ...cordova-plugins-document-scanner.readme.md |   1 -
 ...-cordova-plugins-document-viewer.readme.md |   3 +-
 ...esome-cordova-plugins-downloader.readme.md |   2 -
 ...e-cordova-plugins-email-composer.readme.md |   3 -
 ...e-cordova-plugins-emm-app-config.readme.md |   2 -
 ...cordova-plugins-estimote-beacons.readme.md |   1 -
 ...gins-extended-device-information.readme.md |  10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |   1 -
 ...awesome-cordova-plugins-facebook.readme.md |   8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |   1 -
 ...ome-cordova-plugins-file-chooser.readme.md |   2 -
 ...-cordova-plugins-file-encryption.readme.md |   1 -
 ...some-cordova-plugins-file-opener.readme.md |   1 -
 ...wesome-cordova-plugins-file-path.readme.md |   2 -
 ...some-cordova-plugins-file-picker.readme.md |   2 -
 ...me-cordova-plugins-file-transfer.readme.md |   1 -
 .../@awesome-cordova-plugins-file.readme.md   |  12 +-
 ...rdova-plugins-firebase-analytics.readme.md |   5 +-
 ...-plugins-firebase-authentication.readme.md |   1 -
 ...-cordova-plugins-firebase-config.readme.md |   1 -
 ...e-cordova-plugins-firebase-crash.readme.md |   1 -
 ...ova-plugins-firebase-crashlytics.readme.md |   1 -
 ...a-plugins-firebase-dynamic-links.readme.md |   4 +-
 ...rdova-plugins-firebase-messaging.readme.md |   1 -
 ...-cordova-plugins-firebase-vision.readme.md |   1 -
 ...esome-cordova-plugins-firebase-x.readme.md |   1 -
 ...awesome-cordova-plugins-firebase.readme.md |   1 -
 ...cordova-plugins-flurry-analytics.readme.md |   1 -
 ...rdova-plugins-foreground-service.readme.md |   5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |   1 -
 ...ordova-plugins-full-screen-image.readme.md |   1 -
 ...-cordova-plugins-gao-de-location.readme.md |   1 -
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |   1 -
 ...awesome-cordova-plugins-geofence.readme.md |   2 +-
 ...some-cordova-plugins-geolocation.readme.md |   5 +-
 ...me-cordova-plugins-globalization.readme.md |   1 -
 ...cordova-plugins-google-analytics.readme.md |   4 +-
 ...me-cordova-plugins-google-nearby.readme.md |   1 -
 ...ugins-google-play-games-services.readme.md |   1 -
 ...wesome-cordova-plugins-gyroscope.readme.md |   2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |   1 -
 ...ome-cordova-plugins-header-color.readme.md |   1 -
 ...esome-cordova-plugins-health-kit.readme.md |   1 -
 .../@awesome-cordova-plugins-health.readme.md |   1 -
 ...@awesome-cordova-plugins-hotspot.readme.md |   1 -
 .../@awesome-cordova-plugins-http.readme.md   |   2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |   3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   1 -
 ...@awesome-cordova-plugins-ibeacon.readme.md |   3 +-
 ...ome-cordova-plugins-image-picker.readme.md |   1 -
 ...me-cordova-plugins-image-resizer.readme.md |   1 -
 .../@awesome-cordova-plugins-imap.readme.md   |   1 -
 ...e-cordova-plugins-in-app-browser.readme.md |   2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |  35 ++--
 ...-cordova-plugins-in-app-purchase.readme.md |   1 -
 ...me-cordova-plugins-in-app-review.readme.md |   2 -
 ...ordova-plugins-index-app-content.readme.md |   1 -
 ...awesome-cordova-plugins-insomnia.readme.md |   1 -
 ...e-cordova-plugins-intel-security.readme.md |   2 +-
 ...awesome-cordova-plugins-intercom.readme.md |   1 -
 ...me-cordova-plugins-ionic-webview.readme.md |   1 -
 ...s-ios-aswebauthenticationsessapi.readme.md |   1 -
 ...awesome-cordova-plugins-is-debug.readme.md |   1 -
 ...esome-cordova-plugins-janalytics.readme.md |   1 -
 ...wesome-cordova-plugins-jins-meme.readme.md |   1 -
 .../@awesome-cordova-plugins-jumio.readme.md  |   2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |   1 -
 ...ordova-plugins-keychain-touch-id.readme.md |   1 -
 ...awesome-cordova-plugins-keychain.readme.md |   1 -
 ...some-cordova-plugins-kommunicate.readme.md |   1 -
 ...awesome-cordova-plugins-last-cam.readme.md |   1 -
 ...cordova-plugins-launch-navigator.readme.md |   1 -
 ...me-cordova-plugins-launch-review.readme.md |   3 +-
 ...esome-cordova-plugins-line-login.readme.md |   1 -
 ...ome-cordova-plugins-local-backup.readme.md |   1 -
 ...dova-plugins-local-notifications.readme.md |   1 -
 ...me-cordova-plugins-locataccuracy.readme.md |   1 -
 ...ova-plugins-lottie-splash-screen.readme.md |   1 -
 .../@awesome-cordova-plugins-luxand.readme.md |   1 -
 ...ome-cordova-plugins-magnetometer.readme.md |   1 -
 .../@awesome-cordova-plugins-market.readme.md |   1 -
 ...me-cordova-plugins-media-capture.readme.md |   1 -
 .../@awesome-cordova-plugins-media.readme.md  |   1 -
 .../@awesome-cordova-plugins-metrix.readme.md |   1 -
 ...awesome-cordova-plugins-mixpanel.readme.md |   1 -
 ...-cordova-plugins-mlkit-translate.readme.md |   1 -
 ...ova-plugins-mobile-accessibility.readme.md |   1 -
 ...cordova-plugins-mobile-messaging.readme.md |   1 -
 ...@awesome-cordova-plugins-ms-adal.readme.md |   3 +-
 ...plugins-multiple-document-picker.readme.md |   1 -
 ...e-cordova-plugins-music-controls.readme.md |   1 -
 ...ome-cordova-plugins-native-audio.readme.md |   2 +-
 ...-cordova-plugins-native-geocoder.readme.md |   1 -
 ...-cordova-plugins-native-keyboard.readme.md |   2 -
 ...-plugins-native-page-transitions.readme.md |   1 -
 ...cordova-plugins-native-ringtones.readme.md |   1 -
 ...esome-cordova-plugins-navigatbar.readme.md |   1 -
 ...ordova-plugins-network-interface.readme.md |   1 -
 ...@awesome-cordova-plugins-network.readme.md |   1 -
 .../@awesome-cordova-plugins-nfc.readme.md    |   2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |   3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |   6 +-
 ...ova-plugins-open-native-settings.readme.md |   3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |   1 -
 .../@awesome-cordova-plugins-paypal.readme.md |   1 -
 ...@awesome-cordova-plugins-paytabs.readme.md |   1 -
 ...me-cordova-plugins-pdf-generator.readme.md |   1 -
 ...wesome-cordova-plugins-pedometer.readme.md |   1 -
 ...gins-phonegap-local-notification.readme.md |   1 -
 ...me-cordova-plugins-photo-library.readme.md |   1 -
 ...ome-cordova-plugins-photo-viewer.readme.md |   2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |   1 -
 ...esome-cordova-plugins-pin-dialog.readme.md |   3 -
 ...wesome-cordova-plugins-pinterest.readme.md |   1 -
 ...awesome-cordova-plugins-pollfish.readme.md |   1 -
 ...cordova-plugins-power-management.readme.md |   1 -
 ...rdova-plugins-power-optimization.readme.md |   1 -
 ...@awesome-cordova-plugins-printer.readme.md |   2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |   1 -
 ...wesome-cordova-plugins-purchases.readme.md |   6 +-
 .../@awesome-cordova-plugins-push.readme.md   |   1 -
 ...ome-cordova-plugins-pushape-push.readme.md |   1 -
 .../@awesome-cordova-plugins-qqsdk.readme.md  |   1 -
 ...esome-cordova-plugins-qr-scanner.readme.md |   1 -
 ...a-plugins-regula-document-reader.readme.md |   1 -
 ...@awesome-cordova-plugins-restart.readme.md |   1 -
 ...@awesome-cordova-plugins-rollbar.readme.md |   1 -
 ...a-plugins-safari-view-controller.readme.md |   1 -
 ...rdova-plugins-screen-orientation.readme.md |   1 -
 ...esome-cordova-plugins-screenshot.readme.md |   2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |   1 -
 .../@awesome-cordova-plugins-serial.readme.md |   1 -
 ...ordova-plugins-service-discovery.readme.md |   1 -
 .../@awesome-cordova-plugins-shake.readme.md  |   2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |   1 -
 ...ordova-plugins-shortcuts-android.readme.md |   1 -
 ...rdova-plugins-sign-in-with-apple.readme.md |   3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |   1 -
 ...e-cordova-plugins-siri-shortcuts.readme.md |   1 -
 ...wesome-cordova-plugins-smartlook.readme.md |   1 -
 ...me-cordova-plugins-sms-retriever.readme.md |   1 -
 .../@awesome-cordova-plugins-sms.readme.md    |   2 -
 ...e-cordova-plugins-social-sharing.readme.md |   1 -
 ...rdova-plugins-speech-recognition.readme.md |   1 -
 ...wesome-cordova-plugins-speechkit.readme.md |   1 -
 ...e-cordova-plugins-spinner-dialog.readme.md |   1 -
 ...me-cordova-plugins-splash-screen.readme.md |   2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |   2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |   1 -
 ...me-cordova-plugins-sqlite-porter.readme.md |   1 -
 .../@awesome-cordova-plugins-sqlite.readme.md |   1 -
 ...some-cordova-plugins-ssh-connect.readme.md |   1 -
 ...wesome-cordova-plugins-star-prnt.readme.md |   3 +-
 ...esome-cordova-plugins-status-bar.readme.md |   1 -
 ...some-cordova-plugins-stepcounter.readme.md |   2 +-
 ...-cordova-plugins-streaming-media.readme.md |   1 -
 .../@awesome-cordova-plugins-stripe.readme.md |   1 -
 .../@awesome-cordova-plugins-sum-up.readme.md |   1 -
 ...s-system-alert-window-permission.readme.md |   1 -
 ...me-cordova-plugins-taptic-engine.readme.md |   1 -
 ...ova-plugins-tealium-adidentifier.readme.md |   1 -
 ...-plugins-tealium-installreferrer.readme.md |   1 -
 ...@awesome-cordova-plugins-tealium.readme.md |   3 +-
 ...-plugins-text-to-speech-advanced.readme.md |   1 -
 ...e-cordova-plugins-text-to-speech.readme.md |   1 -
 ...-cordova-plugins-theme-detection.readme.md |   1 -
 ...ordova-plugins-themeable-browser.readme.md |   1 -
 ...-cordova-plugins-three-dee-touch.readme.md |   1 -
 .../@awesome-cordova-plugins-toast.readme.md  |   1 -
 ...awesome-cordova-plugins-touch-id.readme.md |   1 -
 ...-cordova-plugins-twitter-connect.readme.md |   4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |   1 -
 ...cordova-plugins-unique-device-id.readme.md |   1 -
 ...dova-plugins-unvired-cordova-sdk.readme.md |  18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |   1 -
 ...ome-cordova-plugins-urbanairship.readme.md |   1 -
 ...ova-plugins-usabilla-cordova-sdk.readme.md |   1 -
 ...esome-cordova-plugins-user-agent.readme.md |   3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |   1 -
 ...wesome-cordova-plugins-vibration.readme.md |   2 +-
 ...rdova-plugins-video-capture-plus.readme.md |   2 +-
 ...ome-cordova-plugins-video-player.readme.md |   1 -
 ...esome-cordova-plugins-web-intent.readme.md |   3 +-
 ...esome-cordova-plugins-web-server.readme.md |   1 -
 ...ordova-plugins-web-socket-server.readme.md |   1 -
 ...wesome-cordova-plugins-webengage.readme.md |   1 -
 .../@awesome-cordova-plugins-wechat.readme.md |   1 -
 ...me-cordova-plugins-wifi-wizard-2.readme.md |   1 -
 ...esome-cordova-plugins-wonderpush.readme.md |   2 -
 ...ova-plugins-youtube-video-player.readme.md |   1 -
 .../@awesome-cordova-plugins-zbar.readme.md   |   1 -
 ...awesome-cordova-plugins-zeroconf.readme.md |   3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |   1 -
 .../@awesome-cordova-plugins-zoom.readme.md   |   1 -
 src/translate/cli/build.readme.md             |   2 +-
 src/translate/cli/capacitor-add.readme.md     |   3 +-
 src/translate/cli/capacitor-build.readme.md   |   3 +-
 src/translate/cli/capacitor-copy.readme.md    |   3 +-
 src/translate/cli/capacitor-open.readme.md    |   3 +-
 src/translate/cli/capacitor-run.readme.md     |   3 +-
 src/translate/cli/capacitor-sync.readme.md    |   3 +-
 src/translate/cli/capacitor-update.readme.md  |   3 +-
 src/translate/cli/completion.readme.md        |   2 +-
 src/translate/cli/config-get.readme.md        |   2 +-
 src/translate/cli/config-set.readme.md        |   2 +-
 src/translate/cli/config-unset.readme.md      |   2 +-
 src/translate/cli/cordova-build.readme.md     |   2 +-
 src/translate/cli/cordova-compile.readme.md   |   2 +-
 src/translate/cli/cordova-emulate.readme.md   |   2 +-
 src/translate/cli/cordova-platform.readme.md  |   2 +-
 src/translate/cli/cordova-plugin.readme.md    |   2 +-
 src/translate/cli/cordova-prepare.readme.md   |   2 +-
 .../cli/cordova-requirements.readme.md        |   2 +-
 src/translate/cli/cordova-resources.readme.md |   3 +-
 src/translate/cli/cordova-run.readme.md       |   2 +-
 src/translate/cli/generate.readme.md          |   6 +-
 src/translate/cli/git-remote.readme.md        |   2 +-
 src/translate/cli/info.readme.md              |   2 +-
 src/translate/cli/init.readme.md              |   2 +-
 .../cli/integrations-disable.readme.md        |   2 +-
 .../cli/integrations-enable.readme.md         |   2 +-
 src/translate/cli/integrations-list.readme.md |   2 +-
 src/translate/cli/link.readme.md              |   2 +-
 src/translate/cli/live-update-add.readme.md   |   2 +-
 .../cli/live-update-configure.readme.md       |   2 +-
 src/translate/cli/login.readme.md             |   2 +-
 src/translate/cli/logout.readme.md            |   2 +-
 src/translate/cli/repair.readme.md            |   2 +-
 src/translate/cli/serve.readme.md             |   2 +-
 src/translate/cli/signup.readme.md            |   2 +-
 src/translate/cli/ssh-setup.readme.md         |   2 +-
 src/translate/cli/ssh-use.readme.md           |   2 +-
 src/translate/cli/ssl-generate.readme.md      |   2 +-
 src/translate/cli/start.readme.md             |   2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |   1 -
 ...awesome-cordova-plugins-actsheet.readme.md |   1 -
 .../@awesome-cordova-plugins-adjust.readme.md |   1 -
 ...esome-cordova-plugins-admob-free.readme.md |   1 -
 ...esome-cordova-plugins-admob-plus.readme.md |   1 -
 .../@awesome-cordova-plugins-admob.readme.md  |   2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |   1 -
 .../@awesome-cordova-plugins-alipay.readme.md |   1 -
 ...e-cordova-plugins-all-in-one-sdk.readme.md |   1 -
 ...rdova-plugins-analytics-firebase.readme.md |   1 -
 ...ordova-plugins-android-exoplayer.readme.md |   1 -
 ...dova-plugins-android-full-screen.readme.md |   3 +-
 ...me-cordova-plugins-android-notch.readme.md |   1 -
 ...dova-plugins-android-permissions.readme.md |   1 -
 ...@awesome-cordova-plugins-anyline.readme.md |   1 -
 ...cordova-plugins-app-availability.readme.md |   1 -
 ...ova-plugins-app-center-analytics.readme.md |   1 -
 ...rdova-plugins-app-center-crashes.readme.md |   1 -
 ...va-plugins-app-center-low-memory.readme.md |   1 -
 ...-cordova-plugins-app-center-push.readme.md |   2 -
 ...ome-cordova-plugins-app-launcher.readme.md |   1 -
 ...ome-cordova-plugins-app-minimize.readme.md |   1 -
 ...-cordova-plugins-app-preferences.readme.md |   1 -
 ...awesome-cordova-plugins-app-rate.readme.md |   1 -
 ...some-cordova-plugins-app-version.readme.md |   1 -
 ...wesome-cordova-plugins-apple-pay.readme.md |   1 -
 ...ome-cordova-plugins-apple-wallet.readme.md |   1 -
 ...awesome-cordova-plugins-appodeal.readme.md |   1 -
 ...wesome-cordova-plugins-appsflyer.readme.md |   1 -
 ...cordova-plugins-audio-management.readme.md |   1 -
 ...wesome-cordova-plugins-autostart.readme.md |   1 -
 ...cordova-plugins-background-fetch.readme.md |   1 -
 ...a-plugins-background-geolocation.readme.md |   1 -
 ...-cordova-plugins-background-mode.readme.md |   3 +-
 ...ordova-plugins-background-upload.readme.md |   1 -
 ...wesome-cordova-plugins-backlight.readme.md |   1 -
 .../@awesome-cordova-plugins-badge.readme.md  |   1 -
 ...esome-cordova-plugins-baidu-push.readme.md |   1 -
 ...-cordova-plugins-barcode-scanner.readme.md |   1 -
 ...ordova-plugins-base64-to-gallery.readme.md |   2 +-
 .../@awesome-cordova-plugins-base64.readme.md |   1 -
 ...e-cordova-plugins-battery-status.readme.md |   1 -
 ...awesome-cordova-plugins-biocatch.readme.md |   1 -
 ...ordova-plugins-biometric-wrapper.readme.md |   1 -
 .../@awesome-cordova-plugins-ble.readme.md    |   1 -
 ...@awesome-cordova-plugins-blinkid.readme.md |   1 -
 ...@awesome-cordova-plugins-blinkup.readme.md |   1 -
 ...ns-bluetooth-classic-serial-port.readme.md |   2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |   1 -
 ...cordova-plugins-bluetooth-serial.readme.md |   2 +-
 ...wesome-cordova-plugins-braintree.readme.md |   5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |   1 -
 ...esome-cordova-plugins-brightness.readme.md |   1 -
 ...some-cordova-plugins-broadcaster.readme.md |   1 -
 ...some-cordova-plugins-browser-tab.readme.md |   1 -
 ...esome-cordova-plugins-build-info.readme.md |   1 -
 ...awesome-cordova-plugins-calendar.readme.md |   2 -
 ...e-cordova-plugins-call-directory.readme.md |   1 -
 ...awesome-cordova-plugins-call-log.readme.md |   1 -
 ...some-cordova-plugins-call-number.readme.md |   1 -
 ...e-cordova-plugins-camera-preview.readme.md |   1 -
 .../@awesome-cordova-plugins-camera.readme.md |   3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |   2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |   1 -
 ...wesome-cordova-plugins-clevertap.readme.md |   1 -
 ...wesome-cordova-plugins-clipboard.readme.md |   2 -
 ...e-cordova-plugins-cloud-settings.readme.md |   1 -
 ...wesome-cordova-plugins-clover-go.readme.md |   1 -
 ...wesome-cordova-plugins-code-push.readme.md |   1 -
 ...ova-plugins-colored-browser-tabs.readme.md |   1 -
 ...awesome-cordova-plugins-contacts.readme.md |   1 -
 ...e-cordova-plugins-couchbase-lite.readme.md |   1 -
 .../@awesome-cordova-plugins-crop.readme.md   |   2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |   1 -
 ...some-cordova-plugins-date-picker.readme.md |   1 -
 ...awesome-cordova-plugins-db-meter.readme.md |   2 +-
 ...-cordova-plugins-device-accounts.readme.md |   1 -
 ...-cordova-plugins-device-feedback.readme.md |   2 -
 ...me-cordova-plugins-device-motion.readme.md |   1 -
 ...rdova-plugins-device-orientation.readme.md |   1 -
 .../@awesome-cordova-plugins-device.readme.md |   1 -
 ...esome-cordova-plugins-dfu-update.readme.md |   1 -
 ...esome-cordova-plugins-diagnostic.readme.md |   1 -
 ...@awesome-cordova-plugins-dialogs.readme.md |   1 -
 ...-cordova-plugins-document-picker.readme.md |   2 -
 ...cordova-plugins-document-scanner.readme.md |   1 -
 ...-cordova-plugins-document-viewer.readme.md |   3 +-
 ...esome-cordova-plugins-downloader.readme.md |   2 -
 ...e-cordova-plugins-email-composer.readme.md |   3 -
 ...e-cordova-plugins-emm-app-config.readme.md |   2 -
 ...cordova-plugins-estimote-beacons.readme.md |   1 -
 ...gins-extended-device-information.readme.md |  10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |   1 -
 ...awesome-cordova-plugins-facebook.readme.md |   8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |   1 -
 ...ome-cordova-plugins-file-chooser.readme.md |   2 -
 ...-cordova-plugins-file-encryption.readme.md |   1 -
 ...some-cordova-plugins-file-opener.readme.md |   1 -
 ...wesome-cordova-plugins-file-path.readme.md |   2 -
 ...some-cordova-plugins-file-picker.readme.md |   2 -
 ...me-cordova-plugins-file-transfer.readme.md |   1 -
 .../@awesome-cordova-plugins-file.readme.md   |  12 +-
 ...rdova-plugins-firebase-analytics.readme.md |   5 +-
 ...-plugins-firebase-authentication.readme.md |   1 -
 ...-cordova-plugins-firebase-config.readme.md |   1 -
 ...e-cordova-plugins-firebase-crash.readme.md |   1 -
 ...ova-plugins-firebase-crashlytics.readme.md |   1 -
 ...a-plugins-firebase-dynamic-links.readme.md |   4 +-
 ...rdova-plugins-firebase-messaging.readme.md |   1 -
 ...-cordova-plugins-firebase-vision.readme.md |   1 -
 ...esome-cordova-plugins-firebase-x.readme.md |   1 -
 ...awesome-cordova-plugins-firebase.readme.md |   1 -
 ...cordova-plugins-flurry-analytics.readme.md |   1 -
 ...rdova-plugins-foreground-service.readme.md |   5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |   1 -
 ...ordova-plugins-full-screen-image.readme.md |   1 -
 ...-cordova-plugins-gao-de-location.readme.md |   1 -
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |   1 -
 ...awesome-cordova-plugins-geofence.readme.md |   2 +-
 ...some-cordova-plugins-geolocation.readme.md |   5 +-
 ...me-cordova-plugins-globalization.readme.md |   1 -
 ...cordova-plugins-google-analytics.readme.md |   4 +-
 ...me-cordova-plugins-google-nearby.readme.md |   1 -
 ...ugins-google-play-games-services.readme.md |   1 -
 ...wesome-cordova-plugins-gyroscope.readme.md |   2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |   1 -
 ...ome-cordova-plugins-header-color.readme.md |   1 -
 ...esome-cordova-plugins-health-kit.readme.md |   1 -
 .../@awesome-cordova-plugins-health.readme.md |   1 -
 ...@awesome-cordova-plugins-hotspot.readme.md |   1 -
 .../@awesome-cordova-plugins-http.readme.md   |   2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |   3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   1 -
 ...@awesome-cordova-plugins-ibeacon.readme.md |   3 +-
 ...ome-cordova-plugins-image-picker.readme.md |   1 -
 ...me-cordova-plugins-image-resizer.readme.md |   1 -
 .../@awesome-cordova-plugins-imap.readme.md   |   1 -
 ...e-cordova-plugins-in-app-browser.readme.md |   2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |  35 ++--
 ...-cordova-plugins-in-app-purchase.readme.md |   1 -
 ...me-cordova-plugins-in-app-review.readme.md |   2 -
 ...ordova-plugins-index-app-content.readme.md |   1 -
 ...awesome-cordova-plugins-insomnia.readme.md |   1 -
 ...e-cordova-plugins-intel-security.readme.md |   2 +-
 ...awesome-cordova-plugins-intercom.readme.md |   1 -
 ...me-cordova-plugins-ionic-webview.readme.md |   1 -
 ...s-ios-aswebauthenticationsessapi.readme.md |   1 -
 ...awesome-cordova-plugins-is-debug.readme.md |   1 -
 ...esome-cordova-plugins-janalytics.readme.md |   1 -
 ...wesome-cordova-plugins-jins-meme.readme.md |   1 -
 .../@awesome-cordova-plugins-jumio.readme.md  |   2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |   1 -
 ...ordova-plugins-keychain-touch-id.readme.md |   1 -
 ...awesome-cordova-plugins-keychain.readme.md |   1 -
 ...some-cordova-plugins-kommunicate.readme.md |   1 -
 ...awesome-cordova-plugins-last-cam.readme.md |   1 -
 ...cordova-plugins-launch-navigator.readme.md |   1 -
 ...me-cordova-plugins-launch-review.readme.md |   3 +-
 ...esome-cordova-plugins-line-login.readme.md |   1 -
 ...ome-cordova-plugins-local-backup.readme.md |   1 -
 ...dova-plugins-local-notifications.readme.md |   1 -
 ...me-cordova-plugins-locataccuracy.readme.md |   1 -
 ...ova-plugins-lottie-splash-screen.readme.md |   1 -
 .../@awesome-cordova-plugins-luxand.readme.md |   1 -
 ...ome-cordova-plugins-magnetometer.readme.md |   1 -
 .../@awesome-cordova-plugins-market.readme.md |   1 -
 ...me-cordova-plugins-media-capture.readme.md |   1 -
 .../@awesome-cordova-plugins-media.readme.md  |   1 -
 .../@awesome-cordova-plugins-metrix.readme.md |   1 -
 ...awesome-cordova-plugins-mixpanel.readme.md |   1 -
 ...-cordova-plugins-mlkit-translate.readme.md |   1 -
 ...ova-plugins-mobile-accessibility.readme.md |   1 -
 ...cordova-plugins-mobile-messaging.readme.md |   1 -
 ...@awesome-cordova-plugins-ms-adal.readme.md |   3 +-
 ...plugins-multiple-document-picker.readme.md |   1 -
 ...e-cordova-plugins-music-controls.readme.md |   1 -
 ...ome-cordova-plugins-native-audio.readme.md |   2 +-
 ...-cordova-plugins-native-geocoder.readme.md |   1 -
 ...-cordova-plugins-native-keyboard.readme.md |   2 -
 ...-plugins-native-page-transitions.readme.md |   1 -
 ...cordova-plugins-native-ringtones.readme.md |   1 -
 ...esome-cordova-plugins-navigatbar.readme.md |   1 -
 ...ordova-plugins-network-interface.readme.md |   1 -
 ...@awesome-cordova-plugins-network.readme.md |   1 -
 .../@awesome-cordova-plugins-nfc.readme.md    |   2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |   3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |   6 +-
 ...ova-plugins-open-native-settings.readme.md |   3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |   1 -
 .../@awesome-cordova-plugins-paypal.readme.md |   1 -
 ...@awesome-cordova-plugins-paytabs.readme.md |   1 -
 ...me-cordova-plugins-pdf-generator.readme.md |   1 -
 ...wesome-cordova-plugins-pedometer.readme.md |   1 -
 ...gins-phonegap-local-notification.readme.md |   1 -
 ...me-cordova-plugins-photo-library.readme.md |   1 -
 ...ome-cordova-plugins-photo-viewer.readme.md |   2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |   1 -
 ...esome-cordova-plugins-pin-dialog.readme.md |   3 -
 ...wesome-cordova-plugins-pinterest.readme.md |   1 -
 ...awesome-cordova-plugins-pollfish.readme.md |   1 -
 ...cordova-plugins-power-management.readme.md |   1 -
 ...rdova-plugins-power-optimization.readme.md |   1 -
 ...@awesome-cordova-plugins-printer.readme.md |   2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |   1 -
 ...wesome-cordova-plugins-purchases.readme.md |   6 +-
 .../@awesome-cordova-plugins-push.readme.md   |   1 -
 ...ome-cordova-plugins-pushape-push.readme.md |   1 -
 .../@awesome-cordova-plugins-qqsdk.readme.md  |   1 -
 ...esome-cordova-plugins-qr-scanner.readme.md |   1 -
 ...a-plugins-regula-document-reader.readme.md |   1 -
 ...@awesome-cordova-plugins-restart.readme.md |   1 -
 ...@awesome-cordova-plugins-rollbar.readme.md |   1 -
 ...a-plugins-safari-view-controller.readme.md |   1 -
 ...rdova-plugins-screen-orientation.readme.md |   1 -
 ...esome-cordova-plugins-screenshot.readme.md |   2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |   1 -
 .../@awesome-cordova-plugins-serial.readme.md |   1 -
 ...ordova-plugins-service-discovery.readme.md |   1 -
 .../@awesome-cordova-plugins-shake.readme.md  |   2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |   1 -
 ...ordova-plugins-shortcuts-android.readme.md |   1 -
 ...rdova-plugins-sign-in-with-apple.readme.md |   3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |   1 -
 ...e-cordova-plugins-siri-shortcuts.readme.md |   1 -
 ...wesome-cordova-plugins-smartlook.readme.md |   1 -
 ...me-cordova-plugins-sms-retriever.readme.md |   1 -
 .../@awesome-cordova-plugins-sms.readme.md    |   2 -
 ...e-cordova-plugins-social-sharing.readme.md |   1 -
 ...rdova-plugins-speech-recognition.readme.md |   1 -
 ...wesome-cordova-plugins-speechkit.readme.md |   1 -
 ...e-cordova-plugins-spinner-dialog.readme.md |   1 -
 ...me-cordova-plugins-splash-screen.readme.md |   2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |   2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |   1 -
 ...me-cordova-plugins-sqlite-porter.readme.md |   1 -
 .../@awesome-cordova-plugins-sqlite.readme.md |   1 -
 ...some-cordova-plugins-ssh-connect.readme.md |   1 -
 ...wesome-cordova-plugins-star-prnt.readme.md |   3 +-
 ...esome-cordova-plugins-status-bar.readme.md |   1 -
 ...some-cordova-plugins-stepcounter.readme.md |   2 +-
 ...-cordova-plugins-streaming-media.readme.md |   1 -
 .../@awesome-cordova-plugins-stripe.readme.md |   1 -
 .../@awesome-cordova-plugins-sum-up.readme.md |   1 -
 ...s-system-alert-window-permission.readme.md |   1 -
 ...me-cordova-plugins-taptic-engine.readme.md |   1 -
 ...ova-plugins-tealium-adidentifier.readme.md |   1 -
 ...-plugins-tealium-installreferrer.readme.md |   1 -
 ...@awesome-cordova-plugins-tealium.readme.md |   3 +-
 ...-plugins-text-to-speech-advanced.readme.md |   1 -
 ...e-cordova-plugins-text-to-speech.readme.md |   1 -
 ...-cordova-plugins-theme-detection.readme.md |   1 -
 ...ordova-plugins-themeable-browser.readme.md |   1 -
 ...-cordova-plugins-three-dee-touch.readme.md |   1 -
 .../@awesome-cordova-plugins-toast.readme.md  |   1 -
 ...awesome-cordova-plugins-touch-id.readme.md |   1 -
 ...-cordova-plugins-twitter-connect.readme.md |   4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |   1 -
 ...cordova-plugins-unique-device-id.readme.md |   1 -
 ...dova-plugins-unvired-cordova-sdk.readme.md |  18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |   1 -
 ...ome-cordova-plugins-urbanairship.readme.md |   1 -
 ...ova-plugins-usabilla-cordova-sdk.readme.md |   1 -
 ...esome-cordova-plugins-user-agent.readme.md |   3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |   1 -
 ...wesome-cordova-plugins-vibration.readme.md |   2 +-
 ...rdova-plugins-video-capture-plus.readme.md |   2 +-
 ...ome-cordova-plugins-video-player.readme.md |   1 -
 ...esome-cordova-plugins-web-intent.readme.md |   3 +-
 ...esome-cordova-plugins-web-server.readme.md |   1 -
 ...ordova-plugins-web-socket-server.readme.md |   1 -
 ...wesome-cordova-plugins-webengage.readme.md |   1 -
 .../@awesome-cordova-plugins-wechat.readme.md |   1 -
 ...me-cordova-plugins-wifi-wizard-2.readme.md |   1 -
 ...esome-cordova-plugins-wonderpush.readme.md |   2 -
 ...ova-plugins-youtube-video-player.readme.md |   1 -
 .../@awesome-cordova-plugins-zbar.readme.md   |   1 -
 ...awesome-cordova-plugins-zeroconf.readme.md |   3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |   1 -
 .../@awesome-cordova-plugins-zoom.readme.md   |   1 -
 817 files changed, 3205 insertions(+), 3162 deletions(-)

diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
index 2e4f4afa24f..46a669d0186 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
@@ -11,37 +11,37 @@ sidebar_label: ライフサイクル
   />
 </head>
 
-このガイドでは、IonicとAngularを使用して構築されたアプリでのPage Life Cycleのしくみについて説明します。（追記：Life Cycleとは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントをLife Cycle Eventsといいます）
+このガイドでは、Ionic と Angular を使用して構築されたアプリでの Page Life Cycle のしくみについて説明します。（追記：Life Cycle とは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントを Life Cycle Events といいます）
 
 ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png)
 
-## AngularのLife Cycle Events
+## Angular の Life Cycle Events
 
-IonicはAngularが提供するLife Cycle Eventsを取り入れています。最もよく使う2つのAngularイベントは次のとおりです。
+Ionic は Angular が提供する Life Cycle Events を取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。
 
-| Event Name    | Description                                                                                                                                                 |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要があるServiceを呼び出すことができます。 |
-| `ngOnDestroy`  | Angularがビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 |
+| Event Name    | Description                                                                                                                                             |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ngOnInit`    | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 |
+| `ngOnDestroy` | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。                                              |
 
-AngularのComponent Life Cycleイベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。
+Angular の Component Life Cycle イベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。
 
 :::note
 `ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。
 :::
 
-## IonicのPage Events
+## Ionic の Page Events
 
-AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能ないくつかの追加イベントがあります:
+Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります:
 
 | Event Name         | Description                                                        |
 | ------------------ | ------------------------------------------------------------------ |
 | `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
 | `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
 
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
 
 `ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。
 
@@ -49,26 +49,26 @@ AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能な
 
 ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif)
 
-## IonicがPageのLifeをどのように処理するか
+## Ionic が Page の Life をどのように処理するか
 
-Ionic は `<ion-router-outlet />` という router outlet を持っています。この outlet が Angularの `<router-outlet />` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。
+Ionic は `<ion-router-outlet />` という router outlet を持っています。この outlet が Angular の `<router-outlet />` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。
 
-`<ion-router-outlet />` にアプリがラップされることで、Ionicはナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionicは古いページを既存のDOMに残しますが、ビューから隠して新しいページに移行します。これを行う理由は2つあります:
+`<ion-router-outlet />` にアプリがラップされることで、Ionic はナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionic は古いページを既存の DOM に残しますが、ビューから隠して新しいページに移行します。これを行う理由は 2 つあります:
 
-1) 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。
-2) ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。
+1. 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。
+2. ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。
 
-たとえば、UIの "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページはDOMから削除されるだけとなります。
+たとえば、UI の "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページは DOM から削除されるだけとなります。
 
 この特別な処理のために、`ngOnInit` と `ngOnDestroy` のメソッドは通常そうあるべきだと思うときには発火しないかもしれません。
 
-`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の1回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。
+`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の 1 回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。
 
 ## ルートガード
 
-Ionic 3では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。
+Ionic 3 では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。
 
-これらの方法は、Angularのルートガードを使用するためにIonic 4で削除されました。
+これらの方法は、Angular のルートガードを使用するために Ionic 4 で削除されました。
 
 ルートガードは、ルートに対して特定のアクションを実行できるかどうかを判断するのに役立ちます。それらは特定のインターフェースを実装するクラスです。`CanActive` と `CanDeactivate` のインターフェイスは、`ionViewCanEnter` と `ionViewCanLeave` と同様のロジックでイベントを削除することができます。
 
@@ -89,15 +89,15 @@ export class AuthGuard implements CanActivate {
 { path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }
 ```
 
-ルートガードの使い方の詳細については、Angularの [router documentation](https://angular.jp/guide/router) を参照してください。
+ルートガードの使い方の詳細については、Angular の [router documentation](https://angular.jp/guide/router) を参照してください。
 
-## Life Cycleメソッドのガイダンス
+## Life Cycle メソッドのガイダンス
 
-以下は、life cycle eventsごとのユースケースに関するヒントです。
+以下は、life cycle events ごとのユースケースに関するヒントです。
 
-- `ngOnInit` - コンポーネントを初期化し、Serviceからアクセスごとに更新する必要がないデータをロードします。
-- `ionViewWillEnter` - `ionViewWillEnter` はViewがナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Serviceからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量のDOM操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
-- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Pageがユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
-- `ionViewWillLeave` - observablesのunsubscribingのように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
+- `ngOnInit` - コンポーネントを初期化し、Service からアクセスごとに更新する必要がないデータをロードします。
+- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
+- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
+- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
 - `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
 - `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
index 1fd76d76af8..b340041c599 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
@@ -13,12 +13,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
   />
 </head>
 
-このガイドでは、IonicとAngularを使用して構築されたアプリでのルーティングのしくみについて説明します。
+このガイドでは、Ionic と Angular を使用して構築されたアプリでのルーティングのしくみについて説明します。
 
+Angular Router は、Angular アプリケーションで最も重要なライブラリの 1 つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Router を使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionic と組み合わせると！）。Angular Router の基本と、それを Ionic アプリケーション用に設定する方法を見てみましょう。
 
-Angular Routerは、Angularアプリケーションで最も重要なライブラリの1つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Routerを使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionicと組み合わせると！）。Angular Routerの基本と、それをIonicアプリケーション用に設定する方法を見てみましょう。
-
-## シンプルなRoute
+## シンプルな Route
 
 ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります：
 
@@ -37,7 +36,7 @@ import { RouterModule } from '@angular/router';
 })
 ```
 
-URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしているURLを読むことで動作を開始します。私たちのサンプルでは、Routeは `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべてのRouteのエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？
+URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしている URL を読むことで動作を開始します。私たちのサンプルでは、Route は `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべての Route のエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？
 
 ## リダイレクトの処理
 
@@ -53,14 +52,14 @@ URL path と Component の組み合わせを確認する最も簡単な方法は
 
 このリダイレクトでは、アプリのインデックス（`''`）を探しはじめると、`login` にリダイレクトします。最後の `pathMatch` キーは、ルータにパスの検索方法を指示するために必要です。
 
-`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致するpathがなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。
+`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致する path がなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。
 
 ```tsx
 { path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },
 { path: 'login', component: LoginComponent },
 ```
 
-このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべてのpathが一致しないのでリダイレクトを行いません。
+このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべての path が一致しないのでリダイレクトを行いません。
 
 あるいは、こういう書き方もできます:
 
@@ -71,9 +70,9 @@ URL path と Component の組み合わせを確認する最も簡単な方法は
 
 `/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。
 
-## routesへのナビゲーション
+## routes へのナビゲーション
 
-routesについて説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directiveを利用します。先ほどの簡単なrouter設定でこれを確認してみましょう:
+routes について説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directive を利用します。先ほどの簡単な router 設定でこれを確認してみましょう:
 
 ```ts
 RouterModule.forRoot([
@@ -82,7 +81,7 @@ RouterModule.forRoot([
 ]);
 ```
 
-わたしたちは、次のHTMLを利用することで、`LoginComponent` から `detail` routeに遷移することができます。
+わたしたちは、次の HTML を利用することで、`LoginComponent` から `detail` route に遷移することができます。
 
 ```html
 <ion-header>
@@ -96,9 +95,9 @@ RouterModule.forRoot([
 </ion-content>
 ```
 
-ここで重要なのは`ion-button` と `routerLink` directiveです。RouterLinkは典型的な `href` と同様の考えで動作しますが、URLを文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。
+ここで重要なのは`ion-button` と `routerLink` directive です。RouterLink は典型的な `href` と同様の考えで動作しますが、URL を文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。
 
-Router APIを使用して、プログラムで遷移することもできます。
+Router API を使用して、プログラムで遷移することもできます。
 
 ```tsx
 import { Component } from '@angular/core';
@@ -120,7 +119,7 @@ export class LoginComponent {
 どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。
 
 :::note
-相対URLを使用したナビゲーションに関するメモ：現在、複数のナビゲーションスタックをサポートするために、相対URLはサポートされていません。
+相対 URL を使用したナビゲーションに関するメモ：現在、複数のナビゲーションスタックをサポートするために、相対 URL はサポートされていません。
 :::
 
 ### Navigating using LocationStrategy.historyGo
@@ -137,7 +136,7 @@ An key characteristic of `LocationStrategy.historyGo()` is that it expects your
 
 ## Lazy loading routes
 
-現在のルート設定では、すべてのComponentが、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
+現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
 
 ```tsx
 
@@ -352,7 +351,7 @@ There are very few use cases in which nested routes make sense in mobile applica
 
 ## Working with Tabs
 
-タブを使用すると、Angular Routerにどのコンポーネントをロードする必要があるかを知るためのメカニズムをIonicが提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。
+タブを使用すると、Angular Router にどのコンポーネントをロードする必要があるかを知るためのメカニズムを Ionic が提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。
 
 ```ts
 const routes: Routes = [
@@ -384,7 +383,7 @@ const routes: Routes = [
 ];
 ```
 
-ここでは、 `tabs` パスを読み込んでいます。この例では、pathを `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabsのマークアップは、次のとおりです:
+ここでは、 `tabs` パスを読み込んでいます。この例では、path を `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabs のマークアップは、次のとおりです:
 
 ```html
 <ion-tabs>
@@ -397,7 +396,7 @@ const routes: Routes = [
 </ion-tabs>
 ```
 
-Ionicを使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `<ion-tab>` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定はRouterの設定によって行えるようになりました。
+Ionic を使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `<ion-tab>` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定は Router の設定によって行えるようになりました。
 
 ### How Tabs in Ionic Work
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
index f7e37efb4f8..60d2910bfec 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
@@ -14,15 +14,15 @@ sidebar_label: 概要
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-`@ionic/angular` はcore Ionic experienceに、Angular開発者向けにカスタマイズされたツールとAPIを組み合わせたものです。
+`@ionic/angular` は core Ionic experience に、Angular 開発者向けにカスタマイズされたツールと API を組み合わせたものです。
 
-## Angularバージョンサポート
+## Angular バージョンサポート
 
-Ionic v7はAngular v14+をサポートしています。アップグレード戦略の一環として、Angularにはアップグレードを自動化するためのツールが組み込まれており、APIに変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。
+Ionic v7 は Angular v14+をサポートしています。アップグレード戦略の一環として、Angular にはアップグレードを自動化するためのツールが組み込まれており、API に変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。
 
 ## Angular Tooling
 
-Ionic4以降では、アプリケーション構築とルーティングのために公式のAngularスタックが使用されているため、あなたのアプリケーションはAngularエコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionicは`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。
+Ionic4 以降では、アプリケーション構築とルーティングのために公式の Angular スタックが使用されているため、あなたのアプリケーションは Angular エコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionic は`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。
 
 ## Resources
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
index 5b872bc9753..686a0c6fb20 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
@@ -10,7 +10,7 @@ title: Platform
   />
 </head>
 
-プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Androidなど）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。
+プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Android など）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。
 
 ## Usage
 
@@ -181,7 +181,7 @@ type PlatformConfig = {
 
 ### `pause`
 
-`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitorアプリケーションがバックグラウンドに置かれたときに発生しますが、標準的なWebブラウザでは発生しません。
+`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitor アプリケーションがバックグラウンドに置かれたときに発生しますが、標準的な Web ブラウザでは発生しません。
 
 #### Examples
 
@@ -205,7 +205,7 @@ this.platform.resize.subscribe(async () => {
 
 ### `resume`
 
-`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitorアプリがバックグラウンドから出てきても、標準的なWebブラウザで起動しない場合に発生します。
+`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから出てきても、標準的な Web ブラウザで起動しない場合に発生します。
 
 #### Examples
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
index e9ffe1b23f8..d05b309a95f 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
@@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi
 To migrate over your CSS, first update your selectors to target the new custom elements instead:
 
 | ion-slides Selector | Swiper Selector    |
-| ------------------- | ------------------ | 
+| ------------------- | ------------------ |
 | `ion-slides`        | `swiper-container` |
 | `ion-slide`         | `swiper-slide`     |
 
@@ -152,9 +152,7 @@ export class HomePage {
 ```html
 <!-- home.page.html -->
 
-<swiper-container [modules]="swiperModules">
-  ...
-</swiper-container>
+<swiper-container [modules]="swiperModules"> ... </swiper-container>
 ```
 
 :::note
@@ -187,11 +185,11 @@ To set these options as properties directly on `<swiper-container>` we would do
 
 Below is a full list of property changes when going from `ion-slides` to Swiper Element:
 
-| Name      | Notes                                                                                                                                   |
-| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
-| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
-| pager     | Use the `pagination` property instead.                                                                                                  |
+| Name    | Notes                                                                                                                                   |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode    | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager   | Use the `pagination` property instead.                                                                                                  |
 
 :::note
 All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
@@ -303,9 +301,7 @@ All methods and properties available on the Swiper instance can be found at <a h
 Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
 
 ```html
-<swiper-container effect="flip">
-  ...
-</swiper-container>
+<swiper-container effect="flip"> ... </swiper-container>
 ```
 
 :::note
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
index 2a7397d7f99..23c365eb7d4 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
@@ -11,7 +11,7 @@ sidebar_label: ストレージ
   />
 </head>
 
-Ionicアプリ内にデータを保存するためのさまざまなオプションを用意しています。
+Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています。
 
 Here are two official Ionic options:
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
index 60406db92d5..c6e5e2f8ec3 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
@@ -22,7 +22,7 @@ Ionic CLI を使用して `@ionic/angular` アプリケーションを生成す
 
 ## ユニットテスト
 
-ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipeなど）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。
+ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipe など）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。
 
 適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。
 
@@ -34,7 +34,7 @@ Ionic CLI を使用して `@ionic/angular` アプリケーションを生成す
 
 モックを使用すると、モックが呼び出されたかどうか、および `toHaveBeenCalled*` セットの関数を介してどのように呼び出されたかを判断するために、テストでモックを確認することもできます。これらの関数では、メソッドが呼び出されたことをテストするときに、`toHaveBeenCalled` メソッドの呼び出しよりも `toHaveBeenCalledTimes` の呼び出しを優先して、テストをできるだけ具体的に行う必要があります。つまり、`expect(mock.foo).toHaveBeenCalledTimes(1)` は `expect(mock.foo).toHaveBeenCalled()` よりも優れています。何かが呼ばれていないこと（`expect(mock.foo).not.toHaveBeenCalled()`）をテストする際は、逆のアドバイスに従うべきです。
 
-Jasmine でモックオブジェクトを作成する一般的な方法は2つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。
+Jasmine でモックオブジェクトを作成する一般的な方法は 2 つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。
 
 ### `jasmine.createSpy` と `jasmine.createSpyObj` の利用
 
@@ -50,7 +50,7 @@ Jasmine でモックオブジェクトを作成する一般的な方法は2つ
 
 ### 一般的なテストの構成
 
-ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに1つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。
+ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに 1 つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。
 
 `spec` ファイル自体には、そのテスト全体を定義するただ一つの `describe` コールが含まれています。その中には、主要な機能領域を定義する他の `describe` コールがネストされています。各 `describe` コールには、setup コードと teardown コード（一般的に `beforeEach` と `afterEach` コールによって処理される）、機能を階層的に分解した `describe` コール、また個々のテストケースを定義する `it` コールが含まれます。
 
@@ -72,7 +72,7 @@ describe('Calculation', () => {
 });
 ```
 
-外側の `describe` コールは  `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。
+外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。
 
 ### ページとコンポーネント
 
@@ -113,7 +113,7 @@ describe('TabsPage', () => {
 
 ## Service
 
-Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主にHTTP操作やデータ操作を実行するデータの service の2つの大まかなカテゴリーのいずれかに分類されます。
+Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。
 
 ### 基本的な Service のテスト
 
@@ -182,7 +182,7 @@ describe('PayrolService', () => {
 
 #### HTTP データ Service のテスト
 
-HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは <a href="https://angular.jp/guide/http#testing-http-requests" target="_blank">Angular の HTTPリクエストをテストする</a> のガイドを参照してください。
+HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは <a href="https://angular.jp/guide/http#testing-http-requests" target="_blank">Angular の HTTP リクエストをテストする</a> のガイドを参照してください。
 
 このようなテストの基本的な設定は次のようになります:
 
@@ -291,7 +291,7 @@ describe('NamePipe', () => {
 
 ### テストの構成
 
-`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは <a href="https://www.protractortest.org/" target="_blank">Protractor</a> を使用してブラウザを制御し、<a href="https://jasmine.github.io/" target="_blank">Jasmine</a> を使用してテストを構築し、実行します。アプリケーションは、初期時は次の4つのファイルで構成されています:
+`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは <a href="https://www.protractortest.org/" target="_blank">Protractor</a> を使用してブラウザを制御し、<a href="https://jasmine.github.io/" target="_blank">Jasmine</a> を使用してテストを構築し、実行します。アプリケーションは、初期時は次の 4 つのファイルで構成されています:
 
 - `protractor.conf.js` - Protractor の設定ファイル
 - `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定
@@ -302,11 +302,11 @@ describe('NamePipe', () => {
 
 エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。
 
-ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用するAPIを提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
+ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
 
 ##### ベースページオブジェクト
 
-多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用されるCSSセレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
+多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
 
 すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します:
 
@@ -503,7 +503,7 @@ describe('Login', () => {
 
 ### 設定
 
-デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する1つの方法を示します。
+デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。
 
 #### テスト環境
 
@@ -572,7 +572,7 @@ export const environment = {
 
 #### テストクリーンアップ
 
-エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための1つの方法は:
+エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための 1 つの方法は:
 
 1. クリーンアップを実行するエンドポイントを生成する。
 1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
index 8c2a873a651..3b097970d69 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
@@ -11,7 +11,7 @@ sidebar_label: はじめてのアプリ
   />
 </head>
 
-Ionic の素晴らしいところは、1つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 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:
 
@@ -71,13 +71,13 @@ Consider setting up npm to operate globally without elevated permissions. See [R
 
 ## アプリの作成
 
-次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native機能を使うためにCapacitorを追加します。
+次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。
 
 ```shell
 ionic start photo-gallery tabs --type=angular --capacitor
 ```
 
-このスタータープロジェクトには、Ionic 開発のために事前に構成された3つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
+このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
 
 次に、アプリのフォルダに移動します:
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
index 65c2348de79..6dc8d34de5d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-accordion-group"
+title: 'ion-accordion-group'
 ---
+
 import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
 import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
 import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
@@ -16,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 より詳細な情報や使用方法については、 [Accordion](./accordion) を参照ください。
 
-
 ## Interfaces
 
 ### AccordionGroupChangeEventDetail
@@ -38,22 +38,26 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
index e21df328dd7..dcb5eda1b31 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-accordion"
+title: 'ion-accordion'
 ---
+
 import Props from '@ionic-internal/component-api/v7/accordion/props.md';
 import Events from '@ionic-internal/component-api/v7/accordion/events.md';
 import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
@@ -10,14 +11,16 @@ import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
 
 <head>
   <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
-  <meta name="description" content="Ion-accordionコンポーネントは、コンテンツに折りたたみ可能なセクションを設け、縦方向のスペースを減らし、情報を整理することができます。組み立て方とサンプルをご覧ください。" />
+  <meta
+    name="description"
+    content="Ion-accordionコンポーネントは、コンテンツに折りたたみ可能なセクションを設け、縦方向のスペースを減らし、情報を整理することができます。組み立て方とサンプルをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての `ion-accordion` コンポーネントは `ion-accordion-group` コンポーネントの中にグループ化されている必要があります。
 
 ## 基本的な使い方
@@ -90,13 +93,13 @@ import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.
 
 ## ヘッダー
 
-`header` slotは、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは `ion-item` を使用することをお勧めします。
+`header` slot は、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは `ion-item` を使用することをお勧めします。
 
-`header` slotに `ion-item` を使用する場合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に設定されます。さらに、`ion-item` にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 [アイコンのカスタマイズ](#icons) を参照してください。
+`header` slot に `ion-item` を使用する場合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に設定されます。さらに、`ion-item` にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 [アイコンのカスタマイズ](#icons) を参照してください。
 
 ### コンテンツ
 
-`content` slotは、アコーディオンの状態に応じて表示/非表示される部分として使用されます。1ページに1つだけ `ion-content` インスタンスを追加する必要があるため、ここには他の `ion-content` インスタンスを除いて何でも置くことができます。
+`content` slot は、アコーディオンの状態に応じて表示/非表示される部分として使用されます。1 ページに 1 つだけ `ion-content` インスタンスを追加する必要があるため、ここには他の `ion-content` インスタンスを除いて何でも置くことができます。
 
 ## カスタマイズ
 
@@ -104,7 +107,7 @@ import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.
 
 組み込みの拡張スタイルには、`compact` と `inset` の 2 種類があります。この拡張スタイルは `ion-accordion-group` の `expand` プロパティによって設定されます。
 
-`expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
+`expand="inset"` の場合、アコーディオングループには border radius が与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
 
 import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
 
@@ -112,20 +115,20 @@ import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expan
 
 ### 高度な拡張スタイル
 
-アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
+アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には 4 つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
 
-| Class Name | Description |
-| ---------- | ----------- |
-| `.accordion-expanding` | Applied when the accordion is actively expanding |
-| `.accordion-expanded` | Applied when the accordion is fully expanded |
+| 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 |
+| `.accordion-collapsed`  | Applied when the accordion is fully collapsed     |
 
 アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。
 
 ```css
-ion-accordion.accordion-expanding ion-item[slot="header"],
-ion-accordion.accordion-expanded ion-item[slot="header"] {
+ion-accordion.accordion-expanding ion-item[slot='header'],
+ion-accordion.accordion-expanded ion-item[slot='header'] {
   --color: red;
 }
 ```
@@ -148,7 +151,7 @@ import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md'
 
 ### テーマ
 
-`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と  [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。
+`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slot にある要素をターゲットにすることで簡単に実現できます。
 
 import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
 
@@ -158,7 +161,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index
 
 ### アニメーション
 
-デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。
+デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Framework アプリで `animated` を設定することで、アニメーションを無効にすることができます。
 
 import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
 
@@ -168,23 +171,23 @@ import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibili
 
 `ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。
 
-| 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. |
+| 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.                                                                                                      |
 
 ## パフォーマンス
 
 ### アニメーション
 
-アコーディオンアニメーションは、アニメーションを開始するときに `content` slotの高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。
+アコーディオンアニメーションは、アニメーションを開始するときに `content` slot の高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。
 
-例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slotの高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。
+例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slot の高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。
 
 1. 遅延読み込みを行わない `img` 要素を使用します。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。
 
@@ -193,19 +196,25 @@ import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibili
 3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
index 7068b9eda66..ed9146c2d83 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-action-sheet"
+title: 'ion-action-sheet'
 ---
+
 import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
 import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
 import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
 
 <head>
   <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
-  <meta name="description" content="アクションシートはアプリのコンテンツの上に一連のオプションを表示するダイアログで、手動で解除する必要があります。iOSとAndroidのデバイスでの使用方法については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="アクションシートはアプリのコンテンツの上に一連のオプションを表示するダイアログで、手動で解除する必要があります。iOSとAndroidのデバイスでの使用方法については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-
-Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
+Action Sheet は複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` mode では、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheet を破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
 
 ## インラインアクションシート (推奨)
 
@@ -48,9 +51,9 @@ import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
 
 ## Buttons
 
-Buttonの `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つButtonは、配列 `buttons` のどこに配置してもアクションシートの最下部に表示されます。 Note: `destructive` roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。
+Button の `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 role プロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つ Button は、配列 `buttons` のどこに配置してもアクションシートの最下部に表示されます。 Note: `destructive` role をつける Button は、一番上の Button として配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されている handler が実行されます。
 
-Buttonは `ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これは `onDidDismiss` メソッドの戻り値にある `data` フィールドにデータを入力します。
+Button は `ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これは `onDidDismiss` メソッドの戻り値にある `data` フィールドにデータを入力します。
 
 ## Collecting Role Information on Dismiss
 
@@ -62,7 +65,7 @@ import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/in
 
 ## テーマ
 
-アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+アクションシートは scoped によるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的に CSS をスコープ化します。CSS で scoped セレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
 
 ### スタイリング
 
@@ -84,9 +87,9 @@ import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md
 
 <Styling />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
-[CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
+[CSS カスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
 
 import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
 
@@ -94,9 +97,9 @@ import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-
 
 ## アクセシビリティ
 
-アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が与えられます。ARIA仕様に合わせるため、`aria-label`属性または`aria-labelledby`属性のいずれかを設定する必要があります。
+アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が与えられます。ARIA 仕様に合わせるため、`aria-label`属性または`aria-labelledby`属性のいずれかを設定する必要があります。
 
-Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することが強く推奨されています。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使用して、説明的な`aria-label`を提供するか、カスタム`aria-labelledby`値を設定することも可能です。
+Ionic は自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することが強く推奨されています。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使用して、説明的な`aria-label`を提供するか、カスタム`aria-labelledby`値を設定することも可能です。
 
 ## Interfaces
 
@@ -135,19 +138,25 @@ interface ActionSheetOptions {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
index bf2488d06c1..a64de0b109b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-alert"
+title: 'ion-alert'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -13,14 +14,17 @@ import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
 
 <head>
   <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
-  <meta name="description" content="ion-alertダイアログは、Inputを使用して情報を提示または収集します。カスタムアラートボタンメッセージは、アプリのコンテンツの上に表示され、手動で解除する必要があります。" />
+  <meta
+    name="description"
+    content="ion-alertダイアログは、Inputを使用して情報を提示または収集します。カスタムアラートボタンメッセージは、アプリのコンテンツの上に表示され、手動で解除する必要があります。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
+アラートは、ユーザーに情報を提示したり、Input を使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
 
 ## インラインアラート(推奨)
 
@@ -50,7 +54,7 @@ import Controller from '@site/static/usage/v7/alert/presenting/controller/index.
 
 ## Buttons
 
-`buttons` の配列には、各buttonの `text` のプロパティと、オプションで `handler` を利用することができます。 `handler` が `false` を返した場合、buttonがクリックされてもAlertは自動的に解除されません。すべての `buttons` は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の1つ)がメインボタンです。
+`buttons` の配列には、各 button の `text` のプロパティと、オプションで `handler` を利用することができます。 `handler` が `false` を返した場合、button がクリックされても Alert は自動的に解除されません。すべての `buttons` は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の 1 つ)がメインボタンです。
 
 オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。
 
@@ -58,10 +62,9 @@ import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
 
 <Buttons />
 
-
 ## Inputs
 
-Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 `url`, `email`, `text` などの複数のtypeを混ぜて利用することはできます。アラートのガイドラインに収まらない複雑なForm UIが必要な場合は、代わりにModal内でFormを構築することをお勧めします。
+Alert には、複数の異なる Input を含めることもでき、そのデータをアプリで受け取ることができます。 Input はユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alert はすべて button Input であったり、すべて checkbox での Input を持つことはできますが、同一の Alert に radio と checkbox Input を混ぜることはできません。ただし、"text" Input では、 `url`, `email`, `text` などの複数の type を混ぜて利用することはできます。アラートのガイドラインに収まらない複雑な Form UI が必要な場合は、代わりに Modal 内で Form を構築することをお勧めします。
 
 ### Text Inputs Example
 
@@ -77,7 +80,7 @@ import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
 
 ## カスタマイズ
 
-Alertはscopedによるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的にCSSをスコープします。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+Alert は scoped によるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的に CSS をスコープします。CSS で scoped セレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
 
 `create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
 
@@ -93,7 +96,7 @@ Alertはscopedによるカプセル化を使用しており、実行時に各ス
 }
 ```
 
-[CSSカスタムプロパティ](#css-custom-properties) は、個々の要素をターゲットにすることなく、アラートのスタイルに使用することができます。
+[CSS カスタムプロパティ](#css-custom-properties) は、個々の要素をターゲットにすることなく、アラートのスタイルに使用することができます。
 
 ```css
 .my-custom-class {
@@ -106,19 +109,18 @@ import Customization from '@site/static/usage/v7/alert/customization/index.md';
 <Customization />
 
 :::note
-IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。
+Ionic の Angular アプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。
 :::
 
 ## アクセシビリティ
 
-Ionicは、アラートの `role` を、Inputやボタンがある場合は [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) に、何もない場合は [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) のいずれかに自動的に設定します。
-
-アラートに対して `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header`が定義されていない場合は、`subHeader`要素がフォールバックとして使用されます。同様に、`aria-describedby`属性は、`message`要素のIDが定義されていれば自動的に設定されます。
+Ionic は、アラートの `role` を、Input やボタンがある場合は [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) に、何もない場合は [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) のいずれかに自動的に設定します。
 
-ARIAの仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。
+アラートに対して `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header`が定義されていない場合は、`subHeader`要素がフォールバックとして使用されます。同様に、`aria-describedby`属性は、`message`要素の ID が定義されていれば自動的に設定されます。
 
-すべてのARIA属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することにより、手動で上書きすることができます。
+ARIA の仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。
 
+すべての ARIA 属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することにより、手動で上書きすることができます。
 
 ## Interfaces
 
@@ -129,11 +131,10 @@ interface AlertButton {
   text: string;
   role?: 'cancel' | 'destructive' | string;
   cssClass?: string | string[];
-  handler?: (value: any) => boolean | void | {[key: string]: any};
+  handler?: (value: any) => boolean | void | { [key: string]: any };
 }
 ```
 
-
 ### AlertInput
 
 ```typescript
@@ -158,7 +159,6 @@ interface AlertInput {
 }
 ```
 
-
 ### AlertOptions
 
 ```typescript
@@ -184,19 +184,25 @@ interface AlertOptions {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
index c92f455e3b6..2f059be07fe 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-app"
+title: 'ion-app'
 ---
+
 import Props from '@ionic-internal/component-api/v7/app/props.md';
 import Events from '@ionic-internal/component-api/v7/app/events.md';
 import Methods from '@ionic-internal/component-api/v7/app/methods.md';
@@ -10,38 +11,45 @@ import Slots from '@ionic-internal/component-api/v7/app/slots.md';
 
 <head>
   <title>ion-app: Container Element for an Ionic Application</title>
-  <meta name="description" content="ion-appは、Ionicアプリケーションのためのコンテナ要素です。アプリは、メニュー、ヘッダー、コンテンツ、フッターなど、多くのIonicコンポーネントを持つことができます。詳しくはこちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-appは、Ionicアプリケーションのためのコンテナ要素です。アプリは、メニュー、ヘッダー、コンテンツ、フッターなど、多くのIonicコンポーネントを持つことができます。詳しくはこちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-AppはIonicアプリケーションのコンテナ要素です。プロジェクトごとに `<ion-app>` 要素は1つだけにしてください。アプリケーションには、menus, headers, content, footersなど、多くのIonicコンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `<ion-app>` に追加されます。
+App は Ionic アプリケーションのコンテナ要素です。プロジェクトごとに `<ion-app>` 要素は 1 つだけにしてください。アプリケーションには、menus, headers, content, footers など、多くの Ionic コンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `<ion-app>` に追加されます。
 
 `ion-app`を使用すると、以下の動作が可能になります。
 
-* [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。
-* Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます
-* Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。
-* テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。
-* Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
-* Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
-
+- [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。
+- Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます
+- Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。
+- テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。
+- Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
+- Ionic アプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
index 782ea64a91f..a36a1426f8f 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-avatar"
+title: 'ion-avatar'
 ---
 
 import Props from '@ionic-internal/component-api/v7/avatar/props.md';
@@ -11,16 +11,19 @@ import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
 
 <head>
   <title>ion-avatar: Circular Application Avatar Icon Component</title>
-  <meta name="description" content="Ion-avatarsは画像やアイコンを包む円形のアプリケーション部品です。人物や物体を表現することができ、単体でも、要素の中に入れてもかまいません。" />
+  <meta
+    name="description"
+    content="Ion-avatarsは画像やアイコンを包む円形のアプリケーション部品です。人物や物体を表現することができ、単体でも、要素の中に入れてもかまいません。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Avatarは通常、写真やアイコンをラップする円形のコンポーネントです。これらは、人またはオブジェクトを表示するために使用できます。
+Avatar は通常、写真やアイコンをラップする円形のコンポーネントです。これらは、人またはオブジェクトを表示するために使用できます。
 
-Avatarは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-chip` または `ion-item` の内部に配置すると、Avatarは親コンポーネントに合わせてサイズ変更します。Avatarをitemの左側または右側に配置するには、`slot` を `start` か `end` に設定します。
+Avatar は、単独で使用することも、任意の要素の内部で使用することもできます。`ion-chip` または `ion-item` の内部に配置すると、Avatar は親コンポーネントに合わせてサイズ変更します。Avatar を item の左側または右側に配置するには、`slot` を `start` か `end` に設定します。
 
 ## 基本的な使い方
 
@@ -42,26 +45,32 @@ import Item from '@site/static/usage/v7/avatar/item/index.md';
 
 ## テーマ
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md';
 
 <CSSProps />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
index 66a28fea381..cef2a6ed82b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-back-button"
+title: 'ion-back-button'
 ---
+
 import Props from '@ionic-internal/component-api/v7/back-button/props.md';
 import Events from '@ionic-internal/component-api/v7/back-button/events.md';
 import Methods from '@ionic-internal/component-api/v7/back-button/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
 
 <head>
   <title>Back Button | ion-back-button: Custom Menu Icon for Applications</title>
-  <meta name="description" content="ion-back-buttonは、Android、iOS、およびProgressive Web Apps用のカスタムメニューアイコンです。Ionic Frameworkのコンポーネントを使用して、簡単にアプリケーションを構築できます。" />
+  <meta
+    name="description"
+    content="ion-back-buttonは、Android、iOS、およびProgressive Web Apps用のカスタムメニューアイコンです。Ionic Frameworkのコンポーネントを使用して、簡単にアプリケーションを構築できます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Back Buttonは、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。
+Back Button は、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。
 
 ## 基本的な使い方
 
@@ -26,32 +29,38 @@ import Basic from '@site/static/usage/v7/back-button/basic/index.md';
 
 <Basic />
 
-## カスタムのBack Button
+## カスタムの Back Button
 
-デフォルトでは、Back Buttonはテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Config docs](../developing/config) を参照してください。
+デフォルトでは、Back Button はテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Config docs](../developing/config) を参照してください。
 
 import Custom from '@site/static/usage/v7/back-button/custom/index.md';
 
 <Custom />
 
-## デフォルトのBack履歴
+## デフォルトの Back 履歴
 
 時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
index ac2f25308d1..ea9357b66e1 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-backdrop"
+title: 'ion-backdrop'
 ---
+
 import Props from '@ionic-internal/component-api/v7/backdrop/props.md';
 import Events from '@ionic-internal/component-api/v7/backdrop/events.md';
 import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md';
@@ -12,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
+Backdrop は、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
 
 ## 基本的な使い方
 
@@ -24,7 +25,7 @@ import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
 
 ## スタイリング
 
-バックドロップは、CSSプロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには `background-color`, `background`, `opacity` があります。
+バックドロップは、CSS プロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには `background-color`, `background`, `opacity` があります。
 
 コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。
 
@@ -33,19 +34,25 @@ import Styling from '@site/static/usage/v7/backdrop/styling/index.md';
 <Styling />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
index 787249d1ad0..eb83e4ab27a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-badge"
+title: 'ion-badge'
 ---
+
 import Props from '@ionic-internal/component-api/v7/badge/props.md';
 import Events from '@ionic-internal/component-api/v7/badge/events.md';
 import Methods from '@ionic-internal/component-api/v7/badge/methods.md';
@@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
 
 <head>
   <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
-  <meta name="description" content="BadgesはiOS/Androidアプリで他の要素の近くに表示されるインラインブロック要素で、アイテムの数を示す通知として使用します。" />
+  <meta
+    name="description"
+    content="BadgesはiOS/Androidアプリで他の要素の近くに表示されるインラインブロック要素で、アイテムの数を示す通知として使用します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -40,19 +44,25 @@ import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.m
 <CSSProps />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
index ec0d92798fe..8b02f54304e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-breadcrumb"
+title: 'ion-breadcrumb'
 ---
+
 import Props from '@ionic-internal/component-api/v7/breadcrumb/props.md';
 import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md';
 import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md';
@@ -12,8 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Breadcrumbは、Breadcrumbsコンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumbは、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbsは、次のBreadcrumbとの間にセパレータを持ち、オプションでアイコンを含むことができます。
+Breadcrumb は、Breadcrumbs コンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumb は、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbs は、次の Breadcrumb との間にセパレータを持ち、オプションでアイコンを含むことができます。
 
 詳しい説明は [Breadcrumbs](./breadcrumbs) を参照ください。
 
@@ -38,23 +38,26 @@ interface BreadcrumbCustomEvent extends CustomEvent {
 }
 ```
 
-
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
index 162b5852469..8d7937f143a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-breadcrumbs"
+title: 'ion-breadcrumbs'
 ---
+
 import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md';
 import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md';
 import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md';
@@ -8,13 +9,11 @@ import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md';
 import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbsは、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだBreadcrumbを展開することができます。
+Breadcrumbs は、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbs は、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだ Breadcrumb を展開することができます。
 
 ## 基本的な使い方
 
@@ -40,7 +39,7 @@ import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-sep
 
 ### Max Items
 
-`maxItems` の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。
+`maxItems` の値よりも多くのアイテムがある場合、breadcrumbs は折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。
 
 import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md';
 
@@ -56,7 +55,7 @@ import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items
 
 ### Collapsed Indicator Click -- Expand Breadcrumbs
 
-インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。
+インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbs を展開するために使うことができます。
 
 import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md';
 
@@ -78,27 +77,32 @@ import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
index 04b6750e964..88a6a08f248 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-button"
+title: 'ion-button'
 ---
+
 import Props from '@ionic-internal/component-api/v7/button/props.md';
 import Events from '@ionic-internal/component-api/v7/button/events.md';
 import Methods from '@ionic-internal/component-api/v7/button/methods.md';
@@ -10,14 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/button/slots.md';
 
 <head>
   <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
-  <meta name="description" content="ion-button は、標準的なボタン機能が必要な場所で使用するためのクリック可能な要素を提供します。カスタム CSS プロパティを使用して、ボタン要素をデザインし、スタイルを設定します。" />
+  <meta
+    name="description"
+    content="ion-button は、標準的なボタン機能が必要な場所で使用するためのクリック可能な要素を提供します。カスタム CSS プロパティを使用して、ボタン要素をデザインし、スタイルを設定します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
+Button はクリック可能な要素を提供し、Form 内や、標準の単機能な Button 機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Button は、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
 
 ## 基本的な使い方
 
@@ -41,10 +45,9 @@ import Shape from '@site/static/usage/v7/button/shape/index.md';
 
 <Shape />
 
-
 ## Fill
 
-この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。
+この属性は、Button の background と border-color を設定します。デフォルトでは、Button は toolbar 内にない限り、background は塗りつぶされます。toolbar 内にある場合は、background は透明になります。
 
 import Fill from '@site/static/usage/v7/button/fill/index.md';
 
@@ -52,7 +55,7 @@ import Fill from '@site/static/usage/v7/button/fill/index.md';
 
 ## Size
 
-この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます
+この属性は、Button のサイズを指定します。この属性を設定すると、Button の高さと padding が変更されます
 
 import Size from '@site/static/usage/v7/button/size/index.md';
 
@@ -72,26 +75,32 @@ import Colors from '@site/static/usage/v7/button/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md';
 
 <CSSProps />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
index 2d81136da74..e020f372d3b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-buttons"
+title: 'ion-buttons'
 ---
+
 import Props from '@ionic-internal/component-api/v7/buttons/props.md';
 import Events from '@ionic-internal/component-api/v7/buttons/events.md';
 import Methods from '@ionic-internal/component-api/v7/buttons/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/buttons/slots.md';
 
 <head>
   <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
-  <meta name="description" content="Buttonsコンポーネントは、コンテナ要素です。ツールバーに配置されるボタンはion-buttons要素の中にあるべきで、名前付きスロットを使って配置することができます。" />
+  <meta
+    name="description"
+    content="Buttonsコンポーネントは、コンテナ要素です。ツールバーに配置されるボタンはion-buttons要素の中にあるべきで、名前付きスロットを使って配置することができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-
-Buttonsコンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。
+Buttons コンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。
 
 ## 基本的な使い方
 
@@ -26,24 +29,22 @@ import Basic from '@site/static/usage/v7/buttons/basic/index.md';
 
 <Basic />
 
-
 ## Buttons Placement
 
 ツールバー内のボタンは、スロットという名前を使って配置することができます。下図は各スロットの説明です。
 
-| 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.      |
+| 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/v7/buttons/placement/index.md';
 
 <Placement />
 
-
-## Buttonsのタイプ
+## Buttons のタイプ
 
 ツールバーのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例で [バックボタン](./back-button) と [メニューボタン](./menu-button) に含まれるプロパティは表示目的であり、正しい使用方法はそれぞれのドキュメントをご覧ください。
 
@@ -51,37 +52,42 @@ import Types from '@site/static/usage/v7/buttons/types/index.md';
 
 <Types />
 
-
 ## Collapsible Buttons
 
 ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[collapsible large titles](./title#collapsible-large-titles) と共に使用します。
 
 :::info
 
-この機能はiOS modeでのみ有効です。
+この機能は iOS mode でのみ有効です。
 
 :::
 
 <!-- Reuse the playground from the Title directory -->
+
 import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
 
 <CollapsibleLargeTitleButtons />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
index be18d82c580..1887682865d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-card-content"
+title: 'ion-card-content'
 ---
+
 import Props from '@ionic-internal/component-api/v7/card-content/props.md';
 import Events from '@ionic-internal/component-api/v7/card-content/events.md';
 import Methods from '@ionic-internal/component-api/v7/card-content/methods.md';
@@ -10,26 +11,30 @@ import Slots from '@ionic-internal/component-api/v7/card-content/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 カードコンテンツは、カードの子コンポーネントで、そのコンテンツの周りにパディングを追加します。カードのテキストコンテンツは、カードコンテンツの中に配置することが推奨されます。
 
 詳しくは、[Card](./card)のドキュメントを参照してください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
index c3ac19f2bba..a52e43fc976 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-card-header"
+title: 'ion-card-header'
 ---
+
 import Props from '@ionic-internal/component-api/v7/card-header/props.md';
 import Events from '@ionic-internal/component-api/v7/card-header/events.md';
 import Methods from '@ionic-internal/component-api/v7/card-header/methods.md';
@@ -12,26 +13,30 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。
 
 詳しくは、[Card](./card)のドキュメントを参照してください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
index 4aab84d40d9..b892d683f25 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-card-subtitle"
+title: 'ion-card-subtitle'
 ---
+
 import Props from '@ionic-internal/component-api/v7/card-subtitle/props.md';
 import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md';
 import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md';
@@ -12,26 +13,30 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、cardの子コンポーネントです。
+カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、card の子コンポーネントです。
 
 詳しくは、[Card](./card)のドキュメントを参照してください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
index 1ce75913505..d9d2e3a8724 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-card-title"
+title: 'ion-card-title'
 ---
+
 import Props from '@ionic-internal/component-api/v7/card-title/props.md';
 import Events from '@ionic-internal/component-api/v7/card-title/events.md';
 import Methods from '@ionic-internal/component-api/v7/card-title/methods.md';
@@ -12,31 +13,38 @@ 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は、ion-cardの子コンポーネントです。カードタイトルのプロパティの詳細と、このコンポーネントがIonic Frameworkアプリでどのように使用されるかについては、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-card-titleは、ion-cardの子コンポーネントです。カードタイトルのプロパティの詳細と、このコンポーネントがIonic Frameworkアプリでどのように使用されるかについては、こちらをご覧ください。"
+  />
 </head>
 
 <EncapsulationPill type="shadow" />
 
-
-Card titleはcardの子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。
+Card title は card の子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。
 
 詳しくは、[Card](./card)のドキュメントを参照してください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
index e4f5148d4cd..a51a754827c 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-card"
+title: 'ion-card'
 ---
+
 import Props from '@ionic-internal/component-api/v7/card/props.md';
 import Events from '@ionic-internal/component-api/v7/card/events.md';
 import Methods from '@ionic-internal/component-api/v7/card/methods.md';
@@ -12,47 +13,44 @@ 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コンポーネントは、より詳細な情報へのエントリーポイントです。カードは単一のコンポーネントであることも、いくつかのヘッダ、タイトル、サブタイトル、コンテンツから構成されることもあります。" />
+  <meta
+    name="description"
+    content="ion-card UIコンポーネントは、より詳細な情報へのエントリーポイントです。カードは単一のコンポーネントであることも、いくつかのヘッダ、タイトル、サブタイトル、コンテンツから構成されることもあります。"
+  />
 </head>
 
 <EncapsulationPill type="shadow" />
 
-
 カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。
-カードは1つのコンポーネントで構成することもできますが、
+カードは 1 つのコンポーネントで構成することもできますが、
 多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。
 カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。
 [カードヘッダ](./card-header)、[カードタイトル](./card-title)、[カードサブタイトル](./card-subtitle)、[カードコンテンツ](./card-content)。
 
-
 ## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/card/basic/index.md';
 
 <Basic />
 
-
 ## Media Cards
 
 import Media from '@site/static/usage/v7/card/media/index.md';
 
 <Media />
 
-
 ## Card Buttons
 
 import Buttons from '@site/static/usage/v7/card/buttons/index.md';
 
 <Buttons />
 
-
 ## List Card
 
 import List from '@site/static/usage/v7/card/list/index.md';
 
 <List />
 
-
 ## テーマ
 
 ### Colors
@@ -61,27 +59,32 @@ import Colors from '@site/static/usage/v7/card/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
index d8472cf6f3a..9ca943b325a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-checkbox"
+title: 'ion-checkbox'
 ---
 
 import Props from '@ionic-internal/component-api/v7/checkbox/props.md';
@@ -11,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
 
 <head>
   <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
-  <meta name="description" content="ion-checkboxは、セットから複数の選択肢を選択でき、アクティブにするとチェックされた（ticked）ように表示されます。Ionicアプリのチェックボックスコンポーネントについて説明します。" />
+  <meta
+    name="description"
+    content="ion-checkboxは、セットから複数の選択肢を選択でき、アクティブにするとチェックされた（ticked）ように表示されます。Ionicアプリのチェックボックスコンポーネントについて説明します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。
+Checkbox を使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkbox をクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。
 
 ## 基本的な使い方
 
@@ -43,7 +45,6 @@ import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
 
 <Justify />
 
-
 :::note
 `ion-item`は、 `justify` がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
 :::
@@ -56,7 +57,7 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md
 
 ## テーマ
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md';
 
@@ -86,9 +87,9 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {
 
 ## レガシーなチェックボックス構文からのマイグレーション
 
-Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+Ionic 7.0 では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+開発者は、この移行を一度に 1 つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### 最新の構文の使い方
 
@@ -97,7 +98,6 @@ Ionic 7.0では、よりシンプルなチェックボックス構文が導入
 import Migration from '@site/static/usage/v7/checkbox/migration/index.md';
 
 <Migration />
-  
 
 :::note
 Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。
@@ -105,23 +105,28 @@ Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能す
 
 ### レガシーな構文の使い方
 
-Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
-
+Ionic は、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
index deb8708806d..91c819fc5bc 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-chip"
+title: 'ion-chip'
 ---
+
 import Props from '@ionic-internal/component-api/v7/chip/props.md';
 import Events from '@ionic-internal/component-api/v7/chip/events.md';
 import Methods from '@ionic-internal/component-api/v7/chip/methods.md';
@@ -9,15 +10,18 @@ import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
 
 <head>
-  <title>ion-chip:  Name, Text, Icon and Avatar for Ionic Framework Apps</title>
-  <meta name="description" content="ion-chipは、複雑な実体をコンタクトのような小さなブロックに表現します。1つのチップには、名前、アバター、テキスト、アイコンなど、複数の異なる要素を含めることができます。" />
+  <title>ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps</title>
+  <meta
+    name="description"
+    content="ion-chipは、複雑な実体をコンタクトのような小さなブロックに表現します。1つのチップには、名前、アバター、テキスト、アイコンなど、複数の異なる要素を含めることができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Chipは連絡先などを複数の小さなエンティティで表示します。 Chipにはavatars, text, や iconsなど、いくつかの異なる要素を含めることができます。
+Chip は連絡先などを複数の小さなエンティティで表示します。 Chip には avatars, text, や icons など、いくつかの異なる要素を含めることができます。
 
 ## 基本的な使い方
 
@@ -39,26 +43,32 @@ import Colors from '@site/static/usage/v7/chip/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md';
 
 <CSSProps />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
index 46e43818edf..614b2d0bbea 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-col"
+title: 'ion-col'
 ---
+
 import Props from '@ionic-internal/component-api/v7/col/props.md';
 import Events from '@ionic-internal/component-api/v7/col/events.md';
 import Methods from '@ionic-internal/component-api/v7/col/methods.md';
@@ -10,40 +11,44 @@ import Slots from '@ionic-internal/component-api/v7/col/slots.md';
 
 <head>
   <title>ion-col: Column Component Padding, Size and Other Properties</title>
-  <meta name="description" content="ion-colは、rowの内側に入るカラムコンポーネントです。グリッド内のコンテンツは、カラムの中に入ります。列のパディング、サイズ、その他のプロパティについては、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-colは、rowの内側に入るカラムコンポーネントです。グリッド内のコンテンツは、カラムの中に入ります。列のパディング、サイズ、その他のプロパティについては、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Columnは、[Grid](./grid) システムのセルラーコンポーネントで、[row](./row)の内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
+Column は、[Grid](./grid) システムのセルラーコンポーネントで、[row](./row)の内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
 
 詳しくは、[grid](./grid)のドキュメントを参照してください。
 
-
 ## Column Alignment
 
-デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。
-
-
-
+デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSS クラス](/docs/layout/css-utilities#flex-item-properties) があります。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
index 0e25f9f51ad..9a90892e96c 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-content"
+title: 'ion-content'
 ---
+
 import Props from '@ionic-internal/component-api/v7/content/props.md';
 import Events from '@ionic-internal/component-api/v7/content/events.md';
 import Methods from '@ionic-internal/component-api/v7/content/methods.md';
@@ -10,20 +11,21 @@ import Slots from '@ionic-internal/component-api/v7/content/slots.md';
 
 <head>
   <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
-  <meta name="description" content="ion-contentは、スクロール可能な領域を制御する便利なメソッドを備えた、使いやすいコンテンツ領域を提供します。このIonicアプリ用CSSコンポーネントの詳細については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-contentは、スクロール可能な領域を制御する便利なメソッドを備えた、使いやすいコンテンツ領域を提供します。このIonicアプリ用CSSコンポーネントの詳細については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、
+Content コンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、
 使いやすいコンテンツ領域を提供します。
-1つのビューに表示できるコンテンツは1つだけです。
-
-Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
+1 つのビューに表示できるコンテンツは 1 つだけです。
 
+Content は、他の多くの Ionic コンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSS および使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
 
 ## 基本的な使い方
 
@@ -31,7 +33,6 @@ import Basic from '@site/static/usage/v7/content/basic/index.md';
 
 <Basic />
 
-
 ## Header & Footer
 
 コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。
@@ -40,7 +41,6 @@ import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
 
 <HeaderFooter />
 
-
 ## Fullscreen Content
 
 デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。
@@ -49,10 +49,9 @@ import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md';
 
 <Fullscreen />
 
-
 ## コンテンツの固定
 
-スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSSの[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。
+スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSS の[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。
 
 import Fixed from '@site/static/usage/v7/content/fixed/index.md';
 
@@ -74,7 +73,6 @@ import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
 
 <ScrollEvents />
 
-
 ## テーマ
 
 ### Colors
@@ -89,13 +87,12 @@ import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/ind
 
 <CSSParts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## Interfaces
 
 ### ScrollBaseDetail
@@ -136,21 +133,26 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
index bde607c4354..4755375901e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-datetime-button"
+title: 'ion-datetime-button'
 ---
+
 import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
 import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
 import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
@@ -10,20 +11,23 @@ import Slots from '@ionic-internal/component-api/v7/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." />
+  <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ボタンは、[Datetime](./datetime) コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。
+Datetime ボタンは、[Datetime](./datetime) コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。
 
 ## 概要
 
-Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。
+Datetime ボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。
 
-Angular、React、VueなどのJavaScriptフレームワークでDatetime Buttonを使用する場合は、 [ion-modalのkeepContentsMountedプロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされたdatetimeインスタンスがマウントされるようになります。
+Angular、React、Vue などの JavaScript フレームワークで Datetime Button を使用する場合は、 [ion-modal の keepContentsMounted プロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされた datetime インスタンスがマウントされるようになります。
 
 ## 基本的な使い方
 
@@ -54,19 +58,25 @@ TODO
 -->
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## Methods
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
 ## CSS Custom Properties
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
index 85877fd9ad3..61f1fb3fcf3 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-datetime"
+title: 'ion-datetime'
 ---
+
 import Props from '@ionic-internal/component-api/v7/datetime/props.md';
 import Events from '@ionic-internal/component-api/v7/datetime/events.md';
 import Methods from '@ionic-internal/component-api/v7/datetime/methods.md';
@@ -40,50 +41,53 @@ import Theming from '@site/static/usage/v7/datetime/theming/index.md';
 
 <head>
   <title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
-  <meta name="description" content="Datetimeは、日付や時刻を選択するためのピッカーインターフェイスを提供します。IonicのAPI Datetime入力コンポーネントは、好みの形式を簡単に表示し、値を管理します。" />
+  <meta
+    name="description"
+    content="Datetimeは、日付や時刻を選択するためのピッカーインターフェイスを提供します。IonicのAPI Datetime入力コンポーネントは、好みの形式を簡単に表示し、値を管理します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Datetimeはカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetimeはネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic FrameworkのDatetimeコンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetimeの値を管理することが簡単にできます。
+Datetime はカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetime はネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic Framework の Datetime コンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetime の値を管理することが簡単にできます。
 
-## 概要 
+## 概要
 
-これまで、JavaScriptやHTMLの入力でdatetimeの値を扱うことは、常に困難でした。
+これまで、JavaScript や HTML の入力で datetime の値を扱うことは、常に困難でした。
 入力でさえも、常に課題でした。
-特に、JavaScriptの `Date` オブジェクトは、datetime文字列を正しく解析したり、datetime値をフォーマットしたりするのが難しいことで有名です。
-さらに悪いことに、ブラウザやJavaScriptのバージョンによって、
-特にロケールごとに様々なdatetime文字列の解析が異なるのです。
+特に、JavaScript の `Date` オブジェクトは、datetime 文字列を正しく解析したり、datetime 値をフォーマットしたりするのが難しいことで有名です。
+さらに悪いことに、ブラウザや JavaScript のバージョンによって、
+特にロケールごとに様々な datetime 文字列の解析が異なるのです。
 
-Ionic Frameworkのdatetimeは、開発者が一般的な落とし穴を回避できるように設計されており、
-開発者は簡単にdatetime値を操作し、ユーザーにシンプルなdatetimeピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。
+Ionic Framework の datetime は、開発者が一般的な落とし穴を回避できるように設計されており、
+開発者は簡単に datetime 値を操作し、ユーザーにシンプルな datetime ピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。
 
 ### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
 
-Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。
-この値は、JavaScriptの `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。
-ISO datetimeフォーマットを使用することで、
-JSONオブジェクトやデータベース内でのシリアライズやパースが容易になります。
+Ionic Framework では、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。
+この値は、JavaScript の `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。
+ISO datetime フォーマットを使用することで、
+JSON オブジェクトやデータベース内でのシリアライズやパースが容易になります。
 
 以下は、 `ion-datetime` で使用できる ISO 8601 フォーマットの例です:
 
-| 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                         |
-
-年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。
-ミリ秒は3桁、その他は2桁である。
-ですから、1月を表す数字には 1月を表す数字には常に先頭のゼロ、例えば`01`が付きます。
-また、時刻は常に24時間表示で、
-12時間表示の時計では「00」は「午前12時」、「13」は「午後1時」、「23」は「午後3時」を意味します。
+| 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                     |
+
+年号は常に 4 桁、ミリ秒は（加算される場合は）常に 3 桁、その他は常に 2 桁であることに注意してください。
+ミリ秒は 3 桁、その他は 2 桁である。
+ですから、1 月を表す数字には 1 月を表す数字には常に先頭のゼロ、例えば`01`が付きます。
+また、時刻は常に 24 時間表示で、
+12 時間表示の時計では「00」は「午前 12 時」、「13」は「午後 1 時」、「23」は「午後 3 時」を意味します。
 
 :::note
 秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 `ion-datetime` は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。
@@ -111,7 +115,7 @@ JSONオブジェクトやデータベース内でのシリアライズやパー
 
 `min` と `max` プロパティでは、日付の選択をある範囲に制限することができますが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。
 
-次の例では、15分単位で分を選択することができます。また、日付を5刻みで選択することができます。
+次の例では、15 分単位で分を選択することができます。また、日付を 5 刻みで選択することができます。
 
 <Values />
 
@@ -126,7 +130,7 @@ JSONオブジェクトやデータベース内でのシリアライズやパー
 
 ## ローカライゼーション
 
-Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web APIを利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。
+Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API を利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。
 
 ### カスタムロケール
 
@@ -142,37 +146,36 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U
 
 ### 時間サイクル
 
-`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は12時間のサイクルを使用します。
+`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は 12 時間のサイクルを使用します。
 
-時間サイクルには4つのタイプがあります。
+時間サイクルには 4 つのタイプがあります。
 
-| 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. |
+| 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
-  ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
 :::
 
-
 どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 `hourCycle` プロパティが役に立ちます。
 
-次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に12時間周期を使用するように強制することができます。
+次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に 12 時間周期を使用するように強制することができます。
 
 <HourCycle />
 
 ### 週初めの日
 
-`ion-datetime`の場合、週初めの曜日はデフォルトで日曜日です。2022年現在、Ionicがデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザAPIはありませんが、これに関する作業は進行中です（参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) )．
+`ion-datetime`の場合、週初めの曜日はデフォルトで日曜日です。2022 年現在、Ionic がデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザ API はありませんが、これに関する作業は進行中です（参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) )．
 
 <FirstDayOfWeek />
 
 ### 時刻表記
 
-時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionicでは `time-label` スロットで簡単にカスタムのローカライズを提供することができます。
+時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionic では `time-label` スロットで簡単にカスタムのローカライズを提供することができます。
 
 <TimeLabel />
 
@@ -192,11 +195,11 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U
 
 デフォルトでは、 `ion-datetime` は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。
 
-ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーはtimeピッカーの後に表示されます。
+ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーは time ピッカーの後に表示されます。
 
 ### 月と年の選択
 
-月と年の選択は、  `presentation` プロパティに `month-year` , `year-month` , `month` , または `year` を渡すことで行うことができます。
+月と年の選択は、 `presentation` プロパティに `month-year` , `year-month` , `month` , または `year` を渡すことで行うことができます。
 
 この例では、 `month-year` を設定した datetime を示しています。
 
@@ -214,25 +217,25 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U
 
 時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, または `date` を渡すことで行うことで有効になります。
 
-この例では、`date`の設定でdatetimeを指定しています。
+この例では、`date`の設定で datetime を指定しています。
 
 <Date />
 
 ### ピッカーのホイールスタイル
 
-デフォルトでは、Ionicは `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。preferWheel` が `true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。
+デフォルトでは、Ionic は `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。preferWheel`が`true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。
 
 特定の `presentation` オプションには、グリッドとホイールの両方のスタイルがあり、開発者は `preferWheel` プロパティで選択することができます。その他の `presentation` の値はホイールスタイルのみを持ち、グリッドスタイルは決して表示されません。下の表は、どの `presentation` の値がグリッドスタイルとホイールスタイルを持つかを示しています。
 
-| `presentation` | グリッドシステム   | ホイールシステム   |
-| -------------- | --------------- | ---------------- |
-| `date`         | Yes             | Yes              |
-| `date-time`    | Yes             | Yes              |
-| `month`        | No              | Yes              |
-| `month-year`   | No              | Yes              |
-| `time`         | No              | Yes              |
-| `time-date`    | Yes             | Yes              |
-| `year`         | No              | Yes              |
+| `presentation` | グリッドシステム | ホイールシステム |
+| -------------- | ---------------- | ---------------- |
+| `date`         | Yes              | Yes              |
+| `date-time`    | Yes              | Yes              |
+| `month`        | No               | Yes              |
+| `month-year`   | No               | Yes              |
+| `time`         | No               | Yes              |
+| `time-date`    | Yes              | Yes              |
+| `year`         | No               | Yes              |
 
 以下の例では、ホイールピッカーに `presentation="date-time"` を指定しています。
 
@@ -264,11 +267,11 @@ This property is only supported when using `presentation="date"` and `preferWhee
 
 ## ボタン
 
-デフォルトでは、新しい日付が選択されると、新しいdatetimeの値で `ionChange` が発行されます。 `ionChange` を発行する前にユーザの確認を必要とする場合は、 `showDefaultButtons` プロパティを `true` に設定するか、 `buttons` スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メソッドを呼び出す必要があります。
+デフォルトでは、新しい日付が選択されると、新しい datetime の値で `ionChange` が発行されます。 `ionChange` を発行する前にユーザの確認を必要とする場合は、 `showDefaultButtons` プロパティを `true` に設定するか、 `buttons` スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メソッドを呼び出す必要があります。
 
 ### 確認ボタンの表示
 
-デフォルトのDoneボタンとCancelボタンは、それぞれ [`confirm`](#confirm) と [`cancel`](#cancel) メソッドを呼び出すように予め設定されています。
+デフォルトの Done ボタンと Cancel ボタンは、それぞれ [`confirm`](#confirm) と [`cancel`](#cancel) メソッドを呼び出すように予め設定されています。
 
 <ShowingConfirmationButtons />
 
@@ -312,7 +315,7 @@ A callback is better when the highlighted dates are recurring, such as birthdays
 
 ## テーマ
 
-Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。
+Ionic の強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。
 
 この方法の利点は、`ion-datetime`だけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。
 
@@ -320,11 +323,11 @@ Ionicの強力なテーマシステムを使用すると、特定のテーマに
 
 ## タイムゾーン
 
-Ionicの `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動作に従い、datetimeコントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。
+Ionic の `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動作に従い、datetime コントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。
 
-[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなライブラリを使用して、datetimeの値を希望するタイムゾーンに変換することをお勧めします。
+[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなライブラリを使用して、datetime の値を希望するタイムゾーンに変換することをお勧めします。
 
-以下は、ISO-8601文字列をユーザーのデバイスに設定されたタイムゾーンで表示するためのフォーマット例です。
+以下は、ISO-8601 文字列をユーザーのデバイスに設定されたタイムゾーンで表示するためのフォーマット例です。
 
 ```typescript
 import { format, utcToZonedTime } from 'date-fns-tz';
@@ -354,7 +357,7 @@ 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';
@@ -365,18 +368,17 @@ console.log(formattedString); // Jun 4, 2021
 
 See https://date-fns.org/docs/format for a list of all the valid format tokens.
 
-
 ## 高度な日時の検証および操作
 
 datetime ピッカーは、正確なフォーマットを選択するシンプルさを提供し、
 標準化された [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を使用して、
 datetime 値を文字列として持続させることができます。
-しかし、 `ion-datetime` は、datetimeの値を検証したり操作したりするときに、
+しかし、 `ion-datetime` は、datetime の値を検証したり操作したりするときに、
 すべての状況を解決しようとするわけではないことに注意することが重要です。
-もし、datetimeの値を特定のフォーマットからパースしたり、
-操作したり(例えば、日付に5日足したり、30分を引いたり)、
+もし、datetime の値を特定のフォーマットからパースしたり、
+操作したり(例えば、日付に 5 日足したり、30 分を引いたり)、
 あるいは、特定のロケールにデータをフォーマットする必要があるなら、
-JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使うことを強くお勧めします。
+JavaScript で日付を扱うために [date-fns](https://date-fns.org) を使うことを強くお勧めします。
 
 ## アクセシビリティ
 
@@ -384,37 +386,37 @@ JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使う
 
 `ion-datetime` は、コンポーネント内のフォーカス可能な要素間を移動するためのフルキーボードサポートを備えています。次の表は、それぞれのキーが何をするのかの詳細です。
 
-| 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.                                |
+| 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.                  |
 
 #### 日付の表示
 
-| 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. |
+| 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.       |
 
 #### 時刻、月、年のホイール
 
 タイムホイールピッカーを使用する場合、列がフォーカスされているときに、数字キーで時、分の値を選択することができます。
 
-| 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. |
+| 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
 
@@ -438,19 +440,25 @@ interface DatetimeCustomEvent extends CustomEvent {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
index 0b657e39078..95513ba0d07 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-fab-button"
+title: 'ion-fab-button'
 ---
+
 import Props from '@ionic-internal/component-api/v7/fab-button/props.md';
 import Events from '@ionic-internal/component-api/v7/fab-button/events.md';
 import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md';
@@ -10,34 +11,42 @@ import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
 
 <head>
   <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
-  <meta name="description" content="フローティング・アクション・ボタン（FAB）は、アプリ内の主要なアクションを表します。アイコンは円形で、ボタンを押すと、関連するアクションを開くことができます。" />
+  <meta
+    name="description"
+    content="フローティング・アクション・ボタン（FAB）は、アプリ内の主要なアクションを表します。アイコンは円形で、ボタンを押すと、関連するアクションを開くことができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 フローティングアクションボタン（FAB）は、アプリケーションの主要なアクションを表します。デフォルトでは、円形の形をしています。ボタンが押されると、関連するアクションがさらに開かれることもあります。
 
-その名が示すように、FABは一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FABボタンを[fab](./fab)コンポーネントで包むことで実現されます。もしボタンがfabで包まれていない場合は、コンテンツと一緒にスクロールします。
+その名が示すように、FAB は一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FAB ボタンを[fab](./fab)コンポーネントで包むことで実現されます。もしボタンが fab で包まれていない場合は、コンテンツと一緒にスクロールします。
 
 使用例については、[fab documentation](./fab)を参照してください。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
index b010268cc7c..8fe6cacfddb 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-fab-list"
+title: 'ion-fab-list'
 ---
+
 import Props from '@ionic-internal/component-api/v7/fab-list/props.md';
 import Events from '@ionic-internal/component-api/v7/fab-list/events.md';
 import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md';
@@ -12,24 +13,30 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-`ion-fab-list` 要素は、複数のfab buttonのコンテナです。この一連のfab buttonには、メインのfab buttonに関連するアクションが含まれ、メインのfab buttonをクリックすると表示されます。ボタンを表示する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に設定します。
+`ion-fab-list` 要素は、複数の fab button のコンテナです。この一連の fab button には、メインの fab button に関連するアクションが含まれ、メインの fab button をクリックすると表示されます。ボタンを表示する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に設定します。
 
 使用例については、[fab documentation](./fab)を参照してください。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
index 33dde3ebccc..fbeb3893747 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-fab"
+title: 'ion-fab'
 ---
+
 import Props from '@ionic-internal/component-api/v7/fab/props.md';
 import Events from '@ionic-internal/component-api/v7/fab/events.md';
 import Methods from '@ionic-internal/component-api/v7/fab/methods.md';
@@ -10,14 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
 
 <head>
   <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
-  <meta name="description" content="Fabs（フローティングアクションボタン）は、1つまたは複数のFabボタンを含むコンテナ要素です。Ionic FrameworkでAndroidおよびiOSアプリを作成する際にion-fabを使用します。" />
+  <meta
+    name="description"
+    content="Fabs（フローティングアクションボタン）は、1つまたは複数のFabボタンを含むコンテナ要素です。Ionic FrameworkでAndroidおよびiOSアプリを作成する際にion-fabを使用します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Fabは、1つ以上の[fabボタン](./fab-button)を含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fabは1つのメインFabボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む1つ以上の[fabリスト](./fab-list)を含むことができます。
+Fab は、1 つ以上の[fab ボタン](./fab-button)を含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fab は 1 つのメイン Fab ボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む 1 つ以上の[fab リスト](./fab-list)を含むことができます。
 
 ## 基本的な使い方
 
@@ -27,7 +31,7 @@ import BasicUsage from '@site/static/usage/v7/fab/basic/index.md';
 
 ## List Side
 
-[fabリスト](./fab-list)コンポーネントの`side`プロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、`side`の値が全て異なる限り、複数のfabリストを持つことができます。
+[fab リスト](./fab-list)コンポーネントの`side`プロパティは、メイン fab ボタンと相対的に表示される場所を制御します。一つの fab は、`side`の値が全て異なる限り、複数の fab リストを持つことができます。
 
 import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
 
@@ -35,7 +39,7 @@ import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
 
 ## ポジション
 
-fabを固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。
+fab を固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでの fab の配置を制御します。edge`プロップは、アプリのヘッダーやフッターに fab ボタンが重なるようにします。
 
 import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
 
@@ -57,7 +61,7 @@ import Colors from '@site/static/usage/v7/fab/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.md';
 
@@ -68,28 +72,33 @@ import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-pr
 import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
 
 <CSSShadowParts />
- 
 
 ## アクセシビリティ
 
 ### ラベル
 
-FABはアイコンのみを含むことができるため、開発者は各`ion-fab-button`インスタンスに `aria-label` を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
+FAB はアイコンのみを含むことができるため、開発者は各`ion-fab-button`インスタンスに `aria-label` を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
index 32d64e2e426..cc971843e19 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-footer"
+title: 'ion-footer'
 ---
+
 import Props from '@ionic-internal/component-api/v7/footer/props.md';
 import Events from '@ionic-internal/component-api/v7/footer/events.md';
 import Methods from '@ionic-internal/component-api/v7/footer/methods.md';
@@ -10,13 +11,15 @@ import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
 
 <head>
   <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
-  <meta name="description" content="footerはページの下部に配置されるルートコンポーネントのことです。Ionicのfooterはion-toolbarのラッパーとして、コンテンツ領域が正しいサイズであることを確認することができます。" />
+  <meta
+    name="description"
+    content="footerはページの下部に配置されるルートコンポーネントのことです。Ionicのfooterはion-toolbarのラッパーとして、コンテンツ領域が正しいサイズであることを確認することができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上の [ツールバー](./toolbar) のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。
+フッターは、ページの下部に配置されるページのルートコンポーネントです。1 つ以上の [ツールバー](./toolbar) のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。
 
 ## 基本的な使い方
 
@@ -24,25 +27,22 @@ import Basic from '@site/static/usage/v7/footer/basic/index.md';
 
 <Basic />
 
-
 ## 半透明のフッター
 
-フッターは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
+フッターは、`translucent`プロパティを設定することで、ネイティブの iOS アプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
 
 import Translucent from '@site/static/usage/v7/footer/translucent/index.md';
 
 <Translucent />
 
-
 ## フェードフッター
 
-多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。
+多くのネイティブ iOS アプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。
 
 import Fade from '@site/static/usage/v7/footer/fade/index.md';
 
 <Fade />
 
-
 ### 仮想スクロールでの使用方法
 
 フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
@@ -59,21 +59,26 @@ import NoBorder from '@site/static/usage/v7/footer/no-border/index.md';
 
 <NoBorder />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
index e2010ec93d4..881a81a16f5 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-grid"
+title: 'ion-grid'
 ---
+
 import Props from '@ionic-internal/component-api/v7/grid/props.md';
 import Events from '@ionic-internal/component-api/v7/grid/events.md';
 import Methods from '@ionic-internal/component-api/v7/grid/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
 
 <head>
   <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
-  <meta name="description" content="Ion-Gridは、12カラムのレイアウトと画面サイズに応じて異なるブレークポイントを持つカスタムアプリケーションの表示レイアウトを構築するためのモバイルファーストのフレックスボックスシステムです。" />
+  <meta
+    name="description"
+    content="Ion-Gridは、12カラムのレイアウトと画面サイズに応じて異なるブレークポイントを持つカスタムアプリケーションの表示レイアウトを構築するためのモバイルファーストのフレックスボックスシステムです。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の3つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ12列のレイアウトをベースにしています。カラムの数は、CSSを使ってカスタマイズすることができます。
+グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の 3 つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ 12 列のレイアウトをベースにしています。カラムの数は、CSS を使ってカスタマイズすることができます。
 
 ## 概要
 
@@ -26,16 +29,16 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
   が、`fixed`プロパティを追加すると、画面サイズに応じた幅が設定されます。後述の[Fixed Grid](#fixed-grid)を参照してください。
 - 行は、列を適切に並べるための水平方向のグループです。
 - コンテンツは列の中に配置されるべきで、列だけが行の直属の子になることができる。
-- `size`プロパティは、1行あたりデフォルトの12列のうち、使用する列の数を示します。
-  つまり、`size="4"`をカラムに追加することで、グリッドの1/3、つまり12カラムのうち4カラムを占有することができます。
-- sizeに値を指定しないカラムは、自動的に等しい幅を持つようになります。例えば、4つのカラムは、それぞれ自動的に25％の幅になります。
+- `size`プロパティは、1 行あたりデフォルトの 12 列のうち、使用する列の数を示します。
+  つまり、`size="4"`をカラムに追加することで、グリッドの 1/3、つまり 12 カラムのうち 4 カラムを占有することができます。
+- size に値を指定しないカラムは、自動的に等しい幅を持つようになります。例えば、4 つのカラムは、それぞれ自動的に 25％の幅になります。
 - カラムの幅はパーセンテージで設定されるため、常に流動的で親要素からの相対的なサイズになります。
 - 個々のカラムの間にはパディングがあります。しかし、パディングはグリッドから削除することができます。
   カラムを表示するには、グリッドに `ion-no-padding` クラスを追加します。グリッドに適用できるその他のスタイルについては、[CSS Utilities](../layout/css-utilities) を参照してください。
-- グリッドの階層は5つあり、レスポンシブ・ブレークポイントごとに1つずつ、すべてのブレークポイント（特小）、小、中、大、特大が用意されています。
+- グリッドの階層は 5 つあり、レスポンシブ・ブレークポイントごとに 1 つずつ、すべてのブレークポイント（特小）、小、中、大、特大が用意されています。
 - グリッドの階層は最小幅を基準としており、その階層とそれよりも大きい階層に適用されます。
   (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
-- グリッドはCSS変数でカスタマイズすることができます。 [グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
+- グリッドは CSS 変数でカスタマイズすることができます。 [グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
 
 ## デフォルトのブレイキング・ポイント
 
@@ -49,7 +52,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 | lg   | 992px  | `sizeLg`       | `offsetLg`      | `pushLg`      | `pullLg`      | Set columns when (min-width: 992px)  |
 | xl   | 1200px | `sizeXl`       | `offsetXl`      | `pushXl`      | `pullXl`      | Set columns when (min-width: 1200px) |
 
-
 ## 基本的な使い方
 
 デフォルトでは、すべてのデバイスと画面サイズにおいて、列は行の中で同じ幅を占めます。
@@ -58,10 +60,9 @@ import Basic from '@site/static/usage/v7/grid/basic/index.md';
 
 <Basic />
 
-
 ## グリッドの固定
 
-グリッドはコンテナの幅を100%占有します。グリッドに `fixed` プロパティを追加することで、画面サイズに応じた幅を設定することができます。各ブレイクポイントのグリッドの幅は以下の表に記載されていますが、カスタマイズすることも可能です。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化することを確認できます。
+グリッドはコンテナの幅を 100%占有します。グリッドに `fixed` プロパティを追加することで、画面サイズに応じた幅を設定することができます。各ブレイクポイントのグリッドの幅は以下の表に記載されていますが、カスタマイズすることも可能です。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。以下の例を StackBlitz で開き、画面のサイズを変更すると、グリッドの幅が変化することを確認できます。
 
 | Name | Value  | Description                                       |
 | ---- | ------ | ------------------------------------------------- |
@@ -75,10 +76,9 @@ import Fixed from '@site/static/usage/v7/grid/fixed/index.md';
 
 <Fixed />
 
-
 ## カラムのサイズ
 
-カラムは、全体のカラム数のうち特定の数を占めるように特定のサイズに設定したり、コンテンツに応じて幅を変更したりすることができます。デフォルトのカラム数は12ですが、これはカスタマイズ可能です。詳しくは、下記の [カラム数](#number-of-columns) の項を参照してください。
+カラムは、全体のカラム数のうち特定の数を占めるように特定のサイズに設定したり、コンテンツに応じて幅を変更したりすることができます。デフォルトのカラム数は 12 ですが、これはカスタマイズ可能です。詳しくは、下記の [カラム数](#number-of-columns) の項を参照してください。
 
 ### コンテンツベースサイズ
 
@@ -88,7 +88,6 @@ import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md';
 
 <SizeAuto />
 
-
 ### 指定されたサイズ
 
 カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。
@@ -99,13 +98,12 @@ import Size from '@site/static/usage/v7/grid/size/index.md';
 
 ### レスポンシブサイズ
 
-`size`プロパティは、すべての [ブレークポイント](#default-breakpoints) の列幅を変更します。また、Columnでは、"size" の末尾にブレークポイント名を付加したいくつかのsizeプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムの幅を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムの幅が変化するのがわかります。
+`size`プロパティは、すべての [ブレークポイント](#default-breakpoints) の列幅を変更します。また、Column では、"size" の末尾にブレークポイント名を付加したいくつかの size プロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムの幅を変更するために使用することができます。以下の例を StackBlitz で開き、画面のサイズを変更すると、カラムの幅が変化するのがわかります。
 
 import SizeResponsive from '@site/static/usage/v7/grid/size-responsive/index.md';
 
 <SizeResponsive />
 
-
 ## 列のオフセット
 
 カラムは、全カラム数のうち一定のカラム数だけ右にずらすオフセットが可能です。
@@ -120,13 +118,12 @@ import Offset from '@site/static/usage/v7/grid/offset/index.md';
 
 ### レスポンシブオフセット
 
-`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの左マージンを変更します。また、カラムには、"offset"の末尾にブレークポイント名が付加されたいくつかのoffsetプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムのオフセットを変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムのオフセットが変化するのを確認できます。
+`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの左マージンを変更します。また、カラムには、"offset"の末尾にブレークポイント名が付加されたいくつかの offset プロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムのオフセットを変更するために使用することができます。以下の例を StackBlitz で開き、画面のサイズを変更すると、カラムのオフセットが変化するのを確認できます。
 
 import OffsetResponsive from '@site/static/usage/v7/grid/offset-responsive/index.md';
 
 <OffsetResponsive />
 
-
 ## コラム プッシュ＆プル
 
 カラムの総数のうち、一定のカラム数だけ、カラムを右に押したり、左に引いたりすることができます。
@@ -141,7 +138,7 @@ import PushPull from '@site/static/usage/v7/grid/push-pull/index.md';
 
 ### プッシュ＆プルのレスポンシブ対応
 
-`push`と`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの位置を変更します。また、カラムには、"push" / "pull "の末尾にブレークポイント名を付加した `push` と `pull` プロパティがいくつかあります。これらのプロパティは、画面サイズに応じてカラムの位置を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、列の位置が変化するのがわかります。
+`push`と`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの位置を変更します。また、カラムには、"push" / "pull "の末尾にブレークポイント名を付加した `push` と `pull` プロパティがいくつかあります。これらのプロパティは、画面サイズに応じてカラムの位置を変更するために使用することができます。以下の例を StackBlitz で開き、画面のサイズを変更すると、列の位置が変化するのがわかります。
 
 import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md';
 
@@ -157,7 +154,6 @@ import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/ind
 
 <VerticalAlignment />
 
-
 ### 水平アライメント
 
 行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities.md#flex-container-properties) を参照してください。
@@ -168,11 +164,11 @@ import HorizontalAlignment from '@site/static/usage/v7/grid/horizontal-alignment
 
 ## グリッドのカスタマイズ
 
-組み込みのCSS変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。
+組み込みの CSS 変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。
 
 ### 固定幅
 
-固定グリッドの幅は、CSS変数 `--ion-grid-width` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS変数を使用します。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化するのが確認できます。
+固定グリッドの幅は、CSS 変数 `--ion-grid-width` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS 変数を使用します。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例を StackBlitz で開き、画面のサイズを変更すると、グリッドの幅が変化するのが確認できます。
 
 import Width from '@site/static/usage/v7/grid/customizing/width/index.md';
 
@@ -180,7 +176,7 @@ import Width from '@site/static/usage/v7/grid/customizing/width/index.md';
 
 ### 列数
 
-グリッドのカラム数は `--ion-grid-columns` というCSS変数で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。
+グリッドのカラム数は `--ion-grid-columns` という CSS 変数で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。
 
 import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md';
 
@@ -188,28 +184,34 @@ import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/i
 
 ### Padding
 
-グリッドコンテナのpaddingは、CSS変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS変数を使用します。
+グリッドコンテナの padding は、CSS 変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS 変数を使用します。
 
-列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS変数を使用します。
+列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS 変数を使用します。
 
 import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md';
 
 <Padding />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
index 4fd35fd6473..4a1330c721f 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-header"
+title: 'ion-header'
 ---
+
 import Props from '@ionic-internal/component-api/v7/header/props.md';
 import Events from '@ionic-internal/component-api/v7/header/events.md';
 import Methods from '@ionic-internal/component-api/v7/header/methods.md';
@@ -10,14 +11,15 @@ import Slots from '@ionic-internal/component-api/v7/header/slots.md';
 
 <head>
   <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
-  <meta name="description" content="ion-headerは、ツールバーを保持する親コンポーネントです。ion-headerは、ページの3つのルート要素のうちの1つである必要があることに注意することが重要です。" />
+  <meta
+    name="description"
+    content="ion-headerは、ツールバーを保持する親コンポーネントです。ion-headerは、ページの3つのルート要素のうちの1つである必要があることに注意することが重要です。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上の[ツールバー](./toolbar)のラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
-
+ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1 つ以上の[ツールバー](./toolbar)のラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
 
 ## 基本的な使い方
 
@@ -25,28 +27,25 @@ import Basic from '@site/static/usage/v7/header/basic/index.md';
 
 <Basic />
 
-
 ## 半透明のヘッダー
 
-ヘッダーは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
+ヘッダーは、`translucent`プロパティを設定することで、ネイティブの iOS アプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
 
 import Translucent from '@site/static/usage/v7/header/translucent/index.md';
 
 <Translucent />
 
-
 ## 折りたたみのヘッダー
 
-Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
+Ionic では、iOS ネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に 1 つ、コンテンツの中に 1 つ、合計 2 つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
 
 import Condense from '@site/static/usage/v7/header/condense/index.md';
 
 <Condense />
 
-
 ## フェードヘッダー
 
-多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの `collapse` プロパティを `"fade"` に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「ios」のときだけ適用されます。
+多くのネイティブ iOS アプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの `collapse` プロパティを `"fade"` に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「ios」のときだけ適用されます。
 
 この機能は、[Condensed Header](#condensed-header)と組み合わせることができます。collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用されるはずです。
 
@@ -54,7 +53,6 @@ import Fade from '@site/static/usage/v7/header/fade/index.md';
 
 <Fade />
 
-
 ### 仮想スクロールの使用方法
 
 フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
@@ -63,7 +61,6 @@ import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-targe
 
 <CustomScrollTarget />
 
-
 ## Borders
 
 `"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。
@@ -72,21 +69,26 @@ import NoBorder from '@site/static/usage/v7/header/no-border/index.md';
 
 <NoBorder />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
index 14d903a5e5f..e11b7429cf0 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
@@ -10,7 +10,7 @@ title: 'ion-icon'
   />
 </head>
 
-Iconは、<a href="https://ionic.io/ionicons">Ionicons</a>ライブラリを通じて利用できるシンプルなコンポーネントで、すべてのIonic Frameworkアプリケーションにデフォルトでプリパッケージされています。Ioniconsのセットから任意のアイコン、またはカスタムSVGを表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。
+Icon は、<a href="https://ionic.io/ionicons">Ionicons</a>ライブラリを通じて利用できるシンプルなコンポーネントで、すべての Ionic Framework アプリケーションにデフォルトでプリパッケージされています。Ionicons のセットから任意のアイコン、またはカスタム SVG を表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。
 
 利用可能なアイコンのリストは <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a> をご覧ください。
 
@@ -20,7 +20,6 @@ import Basic from '@site/static/usage/v7/icon/basic/index.md';
 
 <Basic />
 
-
 ## アクセシビリティ
 
 純粋に装飾的なコンテンツであるアイコンは、<code>aria-hidden="true"</code>を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。
@@ -29,7 +28,6 @@ import Basic from '@site/static/usage/v7/icon/basic/index.md';
 <ion-icon name="heart" aria-hidden="true"></ion-icon>
 ```
 
-
 アイコンがインタラクティブな場合は、<code>aria-label</code>を追加することで代替テキストを定義する必要があります。
 
 ```html
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
index 02c5abb5b6f..00a4c76bd3b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-img"
+title: 'ion-img'
 ---
 
 import Props from '@ionic-internal/component-api/v7/img/props.md';
@@ -11,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/img/slots.md';
 
 <head>
   <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
-  <meta name="description" content="Imgタグは、タグがビューポートにあるときに、画像を遅延して読み込みます。大きなリストを作成する際にこのコンポーネントを利用すると、画像が表示されているときだけ読み込まれます。" />
+  <meta
+    name="description"
+    content="Imgタグは、タグがビューポートにあるときに、画像を遅延して読み込みます。大きなリストを作成する際にこのコンポーネントを利用すると、画像が表示されているときだけ読み込まれます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Img は、タグがビューポートに表示されているときに画像をLazy Loadするタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) を内部的に使用します。Intersection Observerは、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は `setTimeout` で処理されます。
+Img は、タグがビューポートに表示されているときに画像を Lazy Load するタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) を内部的に使用します。Intersection Observer は、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は `setTimeout` で処理されます。
 
 ## 基本的な使い方
 
@@ -28,19 +30,25 @@ import Basic from '@site/static/usage/v7/img/basic/index.md';
 <Basic />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
index 9579435660b..360a98dda32 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-infinite-scroll-content"
+title: 'ion-infinite-scroll-content'
 ---
 
 import Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md';
@@ -16,19 +16,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
index 991fad7ee4d..7796dab51c7 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-infinite-scroll"
+title: 'ion-infinite-scroll'
 ---
 
 import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md';
@@ -11,13 +11,15 @@ import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
 
 <head>
   <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
-  <meta name="description" content="ion-infinite-scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離だけスクロールしたときに実行されるアクションを呼び出します。" />
+  <meta
+    name="description"
+    content="ion-infinite-scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離だけスクロールしたときに実行されるアクションを呼び出します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-Infinite Scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離をスクロールしたときに実行されるアクションを呼び出します。
+Infinite Scroll コンポーネントは、ユーザーがページの下部または上部から指定された距離をスクロールしたときに実行されるアクションを呼び出します。
 
 ユーザが定義された距離に達したときに、`ionInfinite` イベントに割り当てられた関数が呼び出されます。この関数がすべてのタスクを完了したら、無限スクロールインスタンスに対して `complete()` メソッドを呼び出す必要があります。
 
@@ -27,7 +29,7 @@ import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
 
 ## 無限スクロールのコンテンツ
 
-`ion-infinite-scroll`コンポーネントは、無限スクロールのロジックを持っています。コンテンツを表示するには、子コンポーネントが必要です。Ionicは、デフォルトでその `ion-infinite-scroll-content` コンポーネントを使用します。このコンポーネントは、無限スクロールを表示し、無限スクロールの状態に応じて外観を変更します。ユーザが使用しているプラットフォームに応じて最適なスピナーが表示されます。ただし、`ion-infinite-scroll-content` コンポーネントのプロパティを設定することにより、デフォルトのスピナーを変更したり、テキストを追加することができます。
+`ion-infinite-scroll`コンポーネントは、無限スクロールのロジックを持っています。コンテンツを表示するには、子コンポーネントが必要です。Ionic は、デフォルトでその `ion-infinite-scroll-content` コンポーネントを使用します。このコンポーネントは、無限スクロールを表示し、無限スクロールの状態に応じて外観を変更します。ユーザが使用しているプラットフォームに応じて最適なスピナーが表示されます。ただし、`ion-infinite-scroll-content` コンポーネントのプロパティを設定することにより、デフォルトのスピナーを変更したり、テキストを追加することができます。
 
 import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md';
 
@@ -35,13 +37,13 @@ import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinit
 
 ## Custom Content
 
-`ion-infinite-scroll` と `ion-infinite-scroll-content` コンポーネントを分離することで、開発者は必要に応じて独自のコンテンツコンポーネントを作成できます。このコンテンツには、SVG要素から固有のCSSアニメーションを持つ要素まで、あらゆるものを含めることができます。
+`ion-infinite-scroll` と `ion-infinite-scroll-content` コンポーネントを分離することで、開発者は必要に応じて独自のコンテンツコンポーネントを作成できます。このコンテンツには、SVG 要素から固有の CSS アニメーションを持つ要素まで、あらゆるものを含めることができます。
 
 import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md';
 
 <CustomContent />
 
-## Virtual Scrollの使い方
+## Virtual Scroll の使い方
 
 無限スクロールを機能させるには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content`のスクロールを無効にし、`.ion-content-scroll-host`クラスのターゲットで、どの要素コンテナがスクロールコンテナを担当するのかを指定する必要があります。
 
@@ -67,12 +69,8 @@ import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite
 ```html
 <ion-content role="feed">
   <ion-list>
-    <ion-item role="article">
-      First item
-    </ion-item>
-    <ion-item role="article">
-      Second item
-    </ion-item>
+    <ion-item role="article"> First item </ion-item>
+    <ion-item role="article"> Second item </ion-item>
     ...
   </ion-list>
 
@@ -97,19 +95,25 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
index c28cb4dc359..10d051a4d5d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-input"
+title: 'ion-input'
 ---
+
 import Props from '@ionic-internal/component-api/v7/input/props.md';
 import Events from '@ionic-internal/component-api/v7/input/events.md';
 import Methods from '@ionic-internal/component-api/v7/input/methods.md';
@@ -10,16 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/input/slots.md';
 
 <head>
   <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
-  <meta name="description" content="ion-inputは、HTMLのinput要素のラッパーで、カスタムな値型のスタイルと機能を備えています。デスクトップでも動作し、モバイルではキーボードと統合されます。" />
+  <meta
+    name="description"
+    content="ion-inputは、HTMLのinput要素のラッパーで、カスタムな値型のスタイルと機能を備えています。デスクトップでも動作し、モバイルではキーボードと統合されます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-
-inputコンポーネントは、カスタム・スタイル設定と追加機能を持つHTMLのInput要素のラッパーです。HTML Inputとほとんど同じプロパティーを受け入れますが、デスクトップ・デバイスでは優れた動作をし、モバイル・デバイスではキーボードと統合されます。
-
+input コンポーネントは、カスタム・スタイル設定と追加機能を持つ HTML の Input 要素のラッパーです。HTML Input とほとんど同じプロパティーを受け入れますが、デスクトップ・デバイスでは優れた動作をし、モバイル・デバイスではキーボードと統合されます。
 
 ## 基本的な使い方
 
@@ -27,16 +29,14 @@ import Basic from '@site/static/usage/v7/input/basic/index.md';
 
 <Basic />
 
-
 ## Types
 
-input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
+input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypress などの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
 
 import Types from '@site/static/usage/v7/input/types/index.md';
 
 <Types />
 
-
 ## Label Placement
 
 ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
@@ -45,32 +45,29 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md
 
 <LabelPlacement />
 
-
 ## Clear Options
 
-Inputsには、入力の操作方法に応じて、Inputをクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Inputに `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されているInputは、デフォルトで `clearOnEdit` が有効になっています。
+Inputs には、入力の操作方法に応じて、Input をクリアするための 2 つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Input に `value` があるときにクリアボタンを表示します。2 つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されている Input は、デフォルトで `clearOnEdit` が有効になっています。
 
 import Clear from '@site/static/usage/v7/input/clear/index.md';
 
 <Clear />
 
-
 ## Filled Inputs
 
-Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+Material Design では、Input に塗りつぶしのスタイルが用意されています。Input の `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
-`fill` スタイルはInputコンテナを視覚的に定義するため、`fill` を使用するInputは `ion-item` で使用すべきではありません。
+`fill` スタイルは Input コンテナを視覚的に定義するため、`fill` を使用する Input は `ion-item` で使用すべきではありません。
 
 import Fill from '@site/static/usage/v7/input/fill/index.md';
 
 <Fill />
 
-
 ## Helper & Error Text
 
 ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使用して入力の内部で使用することができます。エラーテキストは、 `ion-invalid` クラスと `ion-touched` クラスが `ion-input` に追加されていない限り表示されない。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。
 
-Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
+Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vue では、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
 
 import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
@@ -78,7 +75,7 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
 
 ## Input Counter
 
-Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
+Input Counter は、Input の下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
 
 import Counter from '@site/static/usage/v7/input/counter/index.md';
 
@@ -98,15 +95,15 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 ### Colors
 
-`color`プロパティを設定すると、各Inputのカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
+`color`プロパティを設定すると、各 Input のカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
 
 import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
-Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
+Input は scoped encapsulation を採用しており、実行時に各スタイルに追加のクラスを付加することで、CSS を自動的にスコープ化します。CSS で scoped セレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
 
 import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md';
 
@@ -114,16 +111,16 @@ import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.m
 
 ## レガシーな Input 構文からの移行
 
-Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+Ionic 7.0 では、よりシンプルな Input 構文が導入されました。この新しい構文は、Input のセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-開発者は、この移行を一度に1つのInputで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+開発者は、この移行を一度に 1 つの Input で実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### 最新の構文の使い方
 
-最新の構文を使うには、3つのステップがあります。
+最新の構文を使うには、3 つのステップがあります。
 
 1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用します。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
-2. Input固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
+2. Input 固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
 3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
 
 import Migration from '@site/static/usage/v7/input/migration/index.md';
@@ -132,7 +129,7 @@ import Migration from '@site/static/usage/v7/input/migration/index.md';
 
 ### レガシー構文の使用
 
-Ionicは、アプリが最新のInput構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、そのInputのインスタンスにレガシー構文を使用するように強制できます。
+Ionic は、アプリが最新の Input 構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、その Input のインスタンスにレガシー構文を使用するように強制できます。
 
 ## Interfaces
 
@@ -155,21 +152,26 @@ interface InputCustomEvent extends CustomEvent {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
index cef627db927..ba2892cec0b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-item-divider"
+title: 'ion-item-divider'
 ---
+
 import Props from '@ionic-internal/component-api/v7/item-divider/props.md';
 import Events from '@ionic-internal/component-api/v7/item-divider/events.md';
 import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md';
@@ -10,24 +11,24 @@ import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
 
 <head>
   <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
-  <meta name="description" content="Item Dividersは、リスト内のアイテムを区切るために使用するブロック要素です。リストヘッダーに似ていますが、項目のグループの間に挟みます。" />
+  <meta
+    name="description"
+    content="Item Dividersは、リスト内のアイテムを区切るために使用するブロック要素です。リストヘッダーに似ていますが、項目のグループの間に挟みます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 アイテムディバイダは、リスト内の [アイテム](./item) を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。
 
-
 ## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/item-divider/basic/index.md';
 
 <Basic />
 
-
 ## テーマ
 
 ### Colors
@@ -36,28 +37,32 @@ import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.md';
 
 <Colors />
 
-
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
index 89ffdac16a0..8528e7522ff 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-item-group"
+title: 'ion-item-group'
 ---
+
 import Props from '@ionic-internal/component-api/v7/item-group/props.md';
 import Events from '@ionic-internal/component-api/v7/item-group/events.md';
 import Methods from '@ionic-internal/component-api/v7/item-group/methods.md';
@@ -10,12 +11,14 @@ import Slots from '@ionic-internal/component-api/v7/item-group/slots.md';
 
 <head>
   <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
-  <meta name="description" content="ion-item-groupには、アイテムを複数のセクションに分割するためのアイテムディバイダを含めることができます。" />
+  <meta
+    name="description"
+    content="ion-item-groupには、アイテムを複数のセクションに分割するためのアイテムディバイダを含めることができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 アイテムグループとは、類似の[アイテム](./item)をまとめて整理するためのコンテナです。アイテムグループには、アイテムを複数のセクションに分けるための[アイテムディバイダー](./item-divider)を含めることができます。また、[スライドアイテム](./item-sliding)をグループ化するために使用することができます。
 
 ## 基本的な使い方
@@ -30,21 +33,26 @@ import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.m
 
 <SlidingItems />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
index ed84bdeb50b..9ee2ff1121e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-item-option"
+title: 'ion-item-option'
 ---
+
 import Props from '@ionic-internal/component-api/v7/item-option/props.md';
 import Events from '@ionic-internal/component-api/v7/item-option/events.md';
 import Methods from '@ionic-internal/component-api/v7/item-option/methods.md';
@@ -10,33 +11,40 @@ import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
-  <meta name="description" content="ion-item-optionはion-item-slidingのオプションボタンで、ion-item-optionsの中に配置する必要があります。プロパティの詳細については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-item-optionはion-item-slidingのオプションボタンで、ion-item-optionsの中に配置する必要があります。プロパティの詳細については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。アイテムオプション](./item-options)の中に配置する必要があります。ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。
 
 詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
index 7c103eb5d20..0878d7c9763 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-item-options"
+title: 'ion-item-options'
 ---
+
 import Props from '@ionic-internal/component-api/v7/item-options/props.md';
 import Events from '@ionic-internal/component-api/v7/item-options/events.md';
 import Methods from '@ionic-internal/component-api/v7/item-options/methods.md';
@@ -10,41 +11,45 @@ import Slots from '@ionic-internal/component-api/v7/item-options/slots.md';
 
 <head>
   <title>ion-item-options: Option Button Components for Ionic Apps</title>
-  <meta name="description" content="ion-item-optionsはion-item-slidingのためのものです。このオプションボタンは、開始側と終了側のどちらにも配置することができます。Ionicアプリでの使用については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-item-optionsはion-item-slidingのためのものです。このオプションボタンは、開始側と終了側のどちらにも配置することができます。Ionicアプリでの使用については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[startまたはend](#side-description)のいずれかに配置することができます。
+アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[start または end](#side-description)のいずれかに配置することができます。
 
 詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
 
-
 ## 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. |
 
-
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
index 2f6fd70b029..973e8c98152 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-item-sliding"
+title: 'ion-item-sliding'
 ---
+
 import Props from '@ionic-internal/component-api/v7/item-sliding/props.md';
 import Events from '@ionic-internal/component-api/v7/item-sliding/events.md';
 import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md';
@@ -10,24 +11,24 @@ import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
 
 <head>
   <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
-  <meta name="description" content="ion-item-sliding コンポーネントには、ドラッグしてボタンを表示するアイテムが含まれています。スライドしたアイテムが左から右にスワイプされると、オプションが表示されます。" />
+  <meta
+    name="description"
+    content="ion-item-sliding コンポーネントには、ドラッグしてボタンを表示するアイテムが含まれています。スライドしたアイテムが左から右にスワイプされると、オプションが表示されます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として [item](./item) コンポーネントが必要です。表示させるオプションはすべて [item options](./item-options) 要素に記述する必要があります。
 
-
 ## 基本的な使い方
 
-スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。
+スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTR では右から左へ、RTL では左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大 2 つまで同時に使用することができ、スワイプの方向によって 2 つの異なるオプションを表示させることができます。
 
 import Basic from '@site/static/usage/v7/item-sliding/basic/index.md';
 
 <Basic />
 
-
 ## Icon Options
 
 [アイテムオプション](./item-option) でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な [アイテムオプションスロット](./item-option#slots) に変更することで位置を変更することが可能です。
@@ -36,7 +37,6 @@ import Icons from '@site/static/usage/v7/item-sliding/icons/index.md';
 
 <Icons />
 
-
 ## 拡張可能なオプション
 
 オプションは、あるポイントを超えてスワイプすると、アイテムの幅いっぱいに広がるように拡張することができます。これは、 [item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができるようになります。
@@ -45,7 +45,6 @@ import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md';
 
 <Expandable />
 
-
 ## Interfaces
 
 ### ItemSlidingCustomEvent
@@ -59,19 +58,25 @@ interface ItemSlidingCustomEvent extends CustomEvent {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
index 4310fb7eb4f..04a83dca2ad 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-item"
+title: 'ion-item'
 ---
+
 import Props from '@ionic-internal/component-api/v7/item/props.md';
 import Events from '@ionic-internal/component-api/v7/item/events.md';
 import Methods from '@ionic-internal/component-api/v7/item/methods.md';
@@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v7/item/slots.md';
 
 <head>
   <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
-  <meta name="description" content="iOS/Android用ion-item要素は、テキスト、アイコン、画像、その他のカスタム要素を含みます。これらはリストに配置され、入力、削除、編集などが可能です。" />
+  <meta
+    name="description"
+    content="iOS/Android用ion-item要素は、テキスト、アイコン、画像、その他のカスタム要素を含みます。これらはリストに配置され、入力、削除、編集などが可能です。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -27,25 +31,22 @@ import Basic from '@site/static/usage/v7/item/basic/index.md';
 
 <Basic />
 
+## クリック可能な Items
 
-## クリック可能なItems
-
-`href` か `button` プロパティが設定されている場合、itemは "clickable（クリック可能）" と見なされます。clickableなitemsには、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickableなitemは、`md` modeではrippleエフェクトを持ち、`ios` modeではハイライト表示され、`ios` modeでの [detail arrow](/#detail-arrows) が表示されます。
+`href` か `button` プロパティが設定されている場合、item は "clickable（クリック可能）" と見なされます。clickable な items には、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickable な item は、`md` mode では ripple エフェクトを持ち、`ios` mode ではハイライト表示され、`ios` mode での [detail arrow](/#detail-arrows) が表示されます。
 
 import Clickable from '@site/static/usage/v7/item/clickable/index.md';
 
 <Clickable />
 
-
 ## Detail Arrows
 
-デフォルトでは、[clickableなitems](/#clickable-items) は、`ios` modeで右矢印アイコンを表示します。clickableな要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。
+デフォルトでは、[clickable な items](/#clickable-items) は、`ios` mode で右矢印アイコンを表示します。clickable な要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。
 
 import DetailArrows from '@site/static/usage/v7/item/detail-arrows/index.md';
 
 <DetailArrows />
 
-
 <!--
 
 TODO add this functionality back as a css variable
@@ -60,7 +61,6 @@ See the [theming documentation](/docs/theming/css-variables) for more informatio
 
 -->
 
-
 ## Item Lines
 
 アイテムはデフォルトで下部のボーダーを挿入して表示します。ボーダーは左側にパディングを持ち、 `"start"` スロットにスロットされたコンテンツの下に表示されることはありません。 `lines` プロパティを `"full"` または `"none"` に変更すると、それぞれ全幅のボーダーが表示され、ボーダーを表示しないようになります。
@@ -69,7 +69,6 @@ import Lines from '@site/static/usage/v7/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.
@@ -78,23 +77,20 @@ import Media from '@site/static/usage/v7/item/media/index.md';
 
 <Media />
 
-
 ## Buttons in Items
 
-Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
+Buttons は、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
 
 import Buttons from '@site/static/usage/v7/item/buttons/index.md';
 
 <Buttons />
 
-
 ## Icons in Items
 
 import Icons from '@site/static/usage/v7/item/icons/index.md';
 
 <Icons />
 
-
 ## Item Inputs
 
 import Inputs from '@site/static/usage/v7/item/inputs/index.md';
@@ -115,38 +111,42 @@ import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.
 
 <CSSParts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md';
 
 <CSSProps />
 
+### Input ハイライト
 
-### Inputハイライト
+input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Input の下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。
 
-input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Inputの下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。
-
-ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、Inputのハイライトは `primary` カラーを使用します。Inputが有効な場合は `success` カラーが使用され、無効なInputは `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。
+ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態で Ionic カラーが使用されます。フォーカスされている場合、Input のハイライトは `primary` カラーを使用します。Input が有効な場合は `success` カラーが使用され、無効な Input は `danger` カラーが使用されます。これは提供されている CSS プロパティを使ってカスタマイズすることができます。
 
 import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
 
 <InputHighlight />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
index c3e61246dfe..478edde23fe 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-label"
+title: 'ion-label'
 ---
+
 import Props from '@ionic-internal/component-api/v7/label/props.md';
 import Events from '@ionic-internal/component-api/v7/label/events.md';
 import Methods from '@ionic-internal/component-api/v7/label/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/label/slots.md';
 
 <head>
   <title>Item Label Color and Properties for Applications | ion-label</title>
-  <meta name="description" content="Labelは、他のIonicコンポーネントと組み合わせて使用できるラッパー要素です。ion-labelでアイテムラベルの色やその他のプロパティを簡単にデザインできます。" />
+  <meta
+    name="description"
+    content="Labelは、他のIonicコンポーネントと組み合わせて使用できるラッパー要素です。ion-labelでアイテムラベルの色やその他のプロパティを簡単にデザインできます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Labelは `ion-item`、`ion-input`、`ion-toggle` 等と共に使用できるラッパー(wrapper)要素です。item内のlabelの位置はinline、fixed、stacked、またはfloatingにすることができます。
-
+Label は `ion-item`、`ion-input`、`ion-toggle` 等と共に使用できるラッパー(wrapper)要素です。item 内の label の位置は inline、fixed、stacked、または floating にすることができます。
 
 ## 基本的な使い方
 
@@ -46,21 +49,26 @@ import Colors from '@site/static/usage/v7/label/theming/colors/index.md';
 
 <Colors />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
index 5af4f78c8b2..837cb6317b5 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-list-header"
+title: 'ion-list-header'
 ---
+
 import Props from '@ionic-internal/component-api/v7/list-header/props.md';
 import Events from '@ionic-internal/component-api/v7/list-header/events.md';
 import Methods from '@ionic-internal/component-api/v7/list-header/methods.md';
@@ -12,7 +13,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 リストヘッダーは、[リスト](./list)の内容を記述するために使用されるブロック要素です。アイテムディバイダー](./item-divider)とは異なり、リストヘッダーは[アイテム](./item)のリストの先頭で一度だけ使用する必要があります。
 
 ## 基本的な使い方
@@ -21,7 +21,6 @@ import Basic from '@site/static/usage/v7/list-header/basic/index.md';
 
 <Basic />
 
-
 ## リストヘッダーのボタン
 
 リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。
@@ -30,10 +29,9 @@ import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
 
 <Buttons />
 
+## List Header の下線
 
-## List Headerの下線
-
-リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。
+リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左 padding を伴う挿入ボーダーが表示されます。
 
 import Lines from '@site/static/usage/v7/list-header/lines/index.md';
 
@@ -47,28 +45,32 @@ import Colors from '@site/static/usage/v7/list-header/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.md';
 
 <CSSProps />
 
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
index dd788ff02cc..3de0dbe0051 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-list"
+title: 'ion-list'
 ---
+
 import Props from '@ionic-internal/component-api/v7/list/props.md';
 import Events from '@ionic-internal/component-api/v7/list/events.md';
 import Methods from '@ionic-internal/component-api/v7/list/methods.md';
@@ -10,13 +11,15 @@ import Slots from '@ionic-internal/component-api/v7/list/slots.md';
 
 <head>
   <title>ion-list: Item List View Component for iOS and Android Apps</title>
-  <meta name="description" content="ion-listsは、テキスト、アイコン、トグルなどを含むアイテムの複数の行で構成されています。iOSおよびAndroidのIonicアプリのリストビューコンポーネントについて説明します。" />
+  <meta
+    name="description"
+    content="ion-listsは、テキスト、アイコン、トグルなどを含むアイテムの複数の行で構成されています。iOSおよびAndroidのIonicアプリのリストビューコンポーネントについて説明します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-リストは、Text、Buttons、Toggleを含むこと [アイテム](./item) の複数の行で構成されています。
+リストは、Text、Buttons、Toggle を含むこと [アイテム](./item) の複数の行で構成されています。
 アイコンやサムネイルなど、さまざまな機能を備えています。リストには一般的に、画像やテキストなど、類似したデータ内容を持つアイテムが含まれます。
 
 リストは、アイテムをスワイプしてオプションを表示したり、ドラッグしてリスト内のアイテムを[並び替え](./reorder)したり、アイテムを削除したりするなどの操作をサポートしています。
@@ -27,7 +30,6 @@ import Basic from '@site/static/usage/v7/list/basic/index.md';
 
 <Basic />
 
-
 ## Inset List
 
 リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。
@@ -36,31 +38,34 @@ import Inset from '@site/static/usage/v7/list/inset/index.md';
 
 <Inset />
 
-
 ## List Lines
 
-リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左paddingで調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。
+リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左 padding で調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。
 
 import Lines from '@site/static/usage/v7/list/lines/index.md';
 
 <Lines />
 
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
index b2bdd3a60dd..3e48eb9cd99 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-loading"
+title: 'ion-loading'
 ---
+
 import Props from '@ionic-internal/component-api/v7/loading/props.md';
 import Events from '@ionic-internal/component-api/v7/loading/events.md';
 import Methods from '@ionic-internal/component-api/v7/loading/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
 
 <head>
   <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
-  <meta name="description" content="ion-loadingは、ユーザーのインタラクションをブロックしながら、アクティビティを表示します。ローディングインジケータは、アプリのコンテンツの上に表示され、解除することができます。" />
+  <meta
+    name="description"
+    content="ion-loadingは、ユーザーのインタラクションをブロックしながら、アクティビティを表示します。ローディングインジケータは、アプリのコンテンツの上に表示され、解除することができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-
-ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションでbackdropが含まれており、`showBackdrop: false` で無効にすることができます。
+ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションで backdrop が含まれており、`showBackdrop: false` で無効にすることができます。
 
 ## 基本的な使い方
 
@@ -50,7 +53,7 @@ import Spinners from '@site/static/usage/v7/loading/spinners/index.md';
 
 ### テーマ
 
-Loading は scoped encapsulation を使用しています。これは、実行時に各スタイルに追加のクラスを付加することで、自動的に CSS をスコープ化することを意味します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+Loading は scoped encapsulation を使用しています。これは、実行時に各スタイルに追加のクラスを付加することで、自動的に CSS をスコープ化することを意味します。CSS で scoped セレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
 
 カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。
 
@@ -59,16 +62,16 @@ import Theming from '@site/static/usage/v7/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.
+`ion-loading` is presented at the root of your application, so we recommend placing any `ion-loading` styles in a global stylesheet.
 :::
 
 ## アクセシビリティ
 
-Ionicは自動的にLoadingの`role`を[`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)に設定します。
+Ionic は自動的に Loading の`role`を[`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)に設定します。
 
-Loadingに`message`プロパティが定義されている場合、`aria-labelledby`属性は自動的にmessage要素のIDに設定されます。そうでない場合、`aria-labelledby`は設定されず、開発者は `htmlAttributes` プロパティを使用して `aria-label` を提供する必要があります。
+Loading に`message`プロパティが定義されている場合、`aria-labelledby`属性は自動的に message 要素の ID に設定されます。そうでない場合、`aria-labelledby`は設定されず、開発者は `htmlAttributes` プロパティを使用して `aria-label` を提供する必要があります。
 
-すべてのARIA属性は、Loadingの`htmlAttributes`プロパティにカスタム値を定義することによって、手動で上書きすることができます。
+すべての ARIA 属性は、Loading の`htmlAttributes`プロパティにカスタム値を定義することによって、手動で上書きすることができます。
 
 ## Interfaces
 
@@ -94,21 +97,26 @@ interface LoadingOptions {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
index 16fa8831107..6d513e2a1e4 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-menu-button"
+title: 'ion-menu-button'
 ---
+
 import Props from '@ionic-internal/component-api/v7/menu-button/props.md';
 import Events from '@ionic-internal/component-api/v7/menu-button/events.md';
 import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md';
@@ -10,33 +11,40 @@ import Slots from '@ionic-internal/component-api/v7/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は、アプリのページでメニューを開くためのアイコンと機能を自動的に作成するコンポーネントです。ion-menu-buttonの詳細については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="Menu Buttonは、アプリのページでメニューを開くためのアイコンと機能を自動的に作成するコンポーネントです。ion-menu-buttonの詳細については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Menu Buttonコンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。
+Menu Button コンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。
 
 詳しくは、[menu](./menu)のドキュメントをご覧ください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
index 1c085782b02..8a384b22d45 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-menu-toggle"
+title: 'ion-menu-toggle'
 ---
+
 import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md';
 import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md';
 import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md';
@@ -10,35 +11,42 @@ import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
 
 <head>
   <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
-  <meta name="description" content="MenuToggleコンポーネントは、メニューの開閉を切り替えるために使用します。デフォルトでは、選択されたメニューがアクティブなときにのみ表示されます。使用方法についてもっと読む。" />
+  <meta
+    name="description"
+    content="MenuToggleコンポーネントは、メニューの開閉を切り替えるために使用します。デフォルトでは、選択されたメニューがアクティブなときにのみ表示されます。使用方法についてもっと読む。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Menu Toggleコンポーネントは、メニューの開閉を切り替えるために使用することができます。
+Menu Toggle コンポーネントは、メニューの開閉を切り替えるために使用することができます。
 
 メニュートグルは、選択されたメニューが有効な場合にのみ表示されます。メニューが無効になっている場合や、分割ペインとして表示されている場合は、メニュートグルは非表示になります。常にメニュートグルを表示するには、`autoHide`プロパティを`false`に設定します。
 
 詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照してください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
index dd952566387..d9ae803f1cf 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-menu"
+title: 'ion-menu'
 ---
+
 import Props from '@ionic-internal/component-api/v7/menu/props.md';
 import Events from '@ionic-internal/component-api/v7/menu/events.md';
 import Methods from '@ionic-internal/component-api/v7/menu/methods.md';
@@ -10,20 +11,22 @@ import Slots from '@ionic-internal/component-api/v7/menu/slots.md';
 
 <head>
   <title>ion-menu: API Framework Docs for Types of Menu Components</title>
-  <meta name="description" content="ion-menuコンポーネントは、現在のビューの横からスライドして入ってくるナビゲーションドロワーです。Ionic APIで利用可能なメニューの種類については、フレームワークのドキュメントをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-menuコンポーネントは、現在のビューの横からスライドして入ってくるナビゲーションドロワーです。Ionic APIで利用可能なメニューの種類については、フレームワークのドキュメントをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Menuコンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。
+Menu コンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。
 デフォルトでは左からスライドしますが、サイドはオーバーライドできます。
-Menuの表示はmodeによって異なりますが、表示するtypeはmenuのtypeによって変更することができます。
-menu要素は、root content要素と同じ深度である必要があります。
-コンテンツにつけるMenuの数に制限はありません。
-これらはテンプレートから、またはプログラムでMenuControllerを使用して制御できます。
+Menu の表示は mode によって異なりますが、表示する type は menu の type によって変更することができます。
+menu 要素は、root content 要素と同じ深度である必要があります。
+コンテンツにつける Menu の数に制限はありません。
+これらはテンプレートから、またはプログラムで MenuController を使用して制御できます。
 
 ## 基本的な使い方
 
@@ -68,23 +71,26 @@ interface MenuCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
index 987532187c3..bc235f5d79a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-modal"
+title: 'ion-modal'
 ---
+
 import Props from '@ionic-internal/component-api/v7/modal/props.md';
 import Events from '@ionic-internal/component-api/v7/modal/events.md';
 import Methods from '@ionic-internal/component-api/v7/modal/methods.md';
@@ -10,16 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/modal/slots.md';
 
 <head>
   <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
-  <meta name="description" content="ion-modal は、モバイルアプリケーションのコンテンツの上に表示されるダイアログで、インタラクションを再開する前に解除する必要があります。カスタムモーダルコンポーネントについて詳しくはこちら" />
+  <meta
+    name="description"
+    content="ion-modal は、モバイルアプリケーションのコンテンツの上に表示されるダイアログで、インタラクションを再開する前に解除する必要があります。カスタムモーダルコンポーネントについて詳しくはこちら"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Modalは、アプリのコンテンツの上に表示されるダイアログであり、インタラクションを再開する前にはアプリによって消されなければならない。選択できるオプションが多い場合や、リスト内の項目をフィルタする場合、およびその他の多くのユースケースで、Selectコンポーネントとして役立ちます。
-
+Modal は、アプリのコンテンツの上に表示されるダイアログであり、インタラクションを再開する前にはアプリによって消されなければならない。選択できるオプションが多い場合や、リスト内の項目をフィルタする場合、およびその他の多くのユースケースで、Select コンポーネントとして役立ちます。
 
 ## インラインモーダル(推奨)
 
@@ -35,7 +37,7 @@ import InlineModalTriggerExample from '@site/static/usage/v7/modal/inline/basic/
 
 `ion-modal` の `isOpen` プロパティを使用すると、開発者がアプリケーションの状態からモーダルの表示状態を制御することができます。つまり、 `isOpen` を `true` に設定するとモーダルが表示され、 `isOpen` を `false` に設定するとモーダルが解除されます。
 
-`isOpen` は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に `false` にセットされることはありません。開発者は `ionModalDidDismiss` または `didDismiss` イベントを監視して、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-modal` の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供するboolean値だけを気にすればいいです。双方向のデータバインディングでは、モーダルはboolean値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
+`isOpen` は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に `false` にセットされることはありません。開発者は `ionModalDidDismiss` または `didDismiss` イベントを監視して、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-modal` の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供する boolean 値だけを気にすればいいです。双方向のデータバインディングでは、モーダルは boolean 値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
 
 import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open/index.md';
 
@@ -53,17 +55,17 @@ import ControllerExample from '@site/static/usage/v7/modal/controller/index.md';
 
 モーダルにデータを入力しているとき、誤ってデータが失われないようにする方法があると便利です。 `ion-modal` の `canDismiss` プロパティは、モーダルをいつ終了させるかを開発者がコントロールできるようにします。
 
-canDismiss`プロパティの使用方法には、boolean値の設定とコールバック関数の設定の2種類があります。
+canDismiss`プロパティの使用方法には、boolean 値の設定とコールバック関数の設定の 2 種類があります。
 
 :::note
- Note: シートモーダルでは、`0` ブレークポイントが設定されていない場合、スワイプ時に `canDismiss` はチェックされません。しかし、`Esc` やハードウェアのバックボタンを押すと、チェックされます。
+Note: シートモーダルでは、`0` ブレークポイントが設定されていない場合、スワイプ時に `canDismiss` はチェックされません。しかし、`Esc` やハードウェアのバックボタンを押すと、チェックされます。
 :::
 
-### boolean値の設定
+### boolean 値の設定
 
-開発者は `canDismiss` にboolean値を設定することができます。 `canDismiss` が `true` の場合、ユーザーがモーダルを閉じようとすると、モーダルは閉じます。 `canDismiss` が `false` の場合、ユーザーがモーダルを閉じようとしても、モーダルは閉じません。
+開発者は `canDismiss` に boolean 値を設定することができます。 `canDismiss` が `true` の場合、ユーザーがモーダルを閉じようとすると、モーダルは閉じます。 `canDismiss` が `false` の場合、ユーザーがモーダルを閉じようとしても、モーダルは閉じません。
 
-boolean値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は `canDismiss` を `false` に設定し、チェックボックスがチェックされたら `true` に更新することが可能です。
+boolean 値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は `canDismiss` を `false` に設定し、チェックボックスがチェックされたら `true` に更新することが可能です。
 
 import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/boolean/index.md';
 
@@ -75,7 +77,7 @@ import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/bo
 
 コールバック関数を設定するのは、モーダルを終了する前に確認ダイアログを表示するなど、終了条件が複雑な場合に使用する必要があります。ユーザーがこのダイアログで選択したオプションは、モーダルの終了を続行するかどうかの判断に使用されます。
 
-コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionicが、あなたのコールバック関数が何を解決するか事前に知らないためです。
+コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionic が、あなたのコールバック関数が何を解決するか事前に知らないためです。
 
 import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/function/index.md';
 
@@ -90,7 +92,7 @@ import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/ca
 <CanDismissPreventSwipeToCloseExample />
 
 ## モーダルの種類
- 
+
 ### 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`.
@@ -111,7 +113,7 @@ import CardExample from '@site/static/usage/v7/modal/card/basic/index.md';
 
 マップアプリのドロワーコンポーネントに似たシートモーダルエフェクトを作成します。シートモーダルを作成するには、`ion-modal` に `breakpoints` と `initialBreakpoint` プロパティを設定する必要があります。
 
-`breakpoints`プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。 `breakpoints` プロパティが `[0, 0.5, 1]` の場合、シートをスワイプすると、モーダルの 0%、50%、100%を表示することができることを示します。モーダルが0%にスワイプされると、モーダルは自動的にディスクローズされます。 `0` ブレークポイントが含まれていない場合、スワイプ時にモーダルを解除することはできませんが、`Esc` またはハードウェアの戻るボタンを押すことで解除することができることに注意してください。
+`breakpoints`プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。 `breakpoints` プロパティが `[0, 0.5, 1]` の場合、シートをスワイプすると、モーダルの 0%、50%、100%を表示することができることを示します。モーダルが 0%にスワイプされると、モーダルは自動的にディスクローズされます。 `0` ブレークポイントが含まれていない場合、スワイプ時にモーダルを解除することはできませんが、`Esc` またはハードウェアの戻るボタンを押すことで解除することができることに注意してください。
 
 `initialBreakpoint` プロパティは、シート モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。 `initialBreakpoint` の値は、 `breakpoints` 配列にも存在する必要があります。例えば、 `breakpoints` の値が `[0, 0.5, 1]` である場合、 `initialBreakpoint` の値が `0.5` であれば、 `breakpoints` 配列に `0.5` が存在するため有効であると考えられます。 `0.25` は `breakpoints` 配列に存在しないので、 `initialBreakpoint` の値は無効になります。
 
@@ -140,15 +142,14 @@ import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle
 モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。この動作は、インライン モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
 
 :::note
-IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。詳しくは、以下のAngularセクションの [Style Placement](#style-placement) をお読みください。
+Ionic の Angular アプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。詳しくは、以下の Angular セクションの [Style Placement](#style-placement) をお読みください。
 :::
 
-
 :::note
 `ion-modal` は、積み重ねられたモーダルは同じサイズであるという前提で動作します。その結果、後続の各モーダルはボックスシャドウを持たず、背景の不透明度は `0` になります。これは、モーダルが追加されるたびに影や背景が濃くなるのを避けるためです。これは、CSS 変数 `--box-shadow` と `--backdrop-opacity` を設定することで変更することができます。
 :::
 
-``` 
+```
 ion-modal.stack-modal {
   --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
@@ -177,8 +178,8 @@ import CustomDialogs from '@site/static/usage/v7/modal/custom-dialogs/index.md';
 
 カスタムダイアログを作成する際に注意すべき点がいくつかあります。
 
-* `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。
-* カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。
+- `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。
+- カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。
 
 ## Interfaces
 
@@ -211,6 +212,7 @@ interface ModalOptions {
   handle?: boolean;
 }
 ```
+
 ### ModalCustomEvent
 
 必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
@@ -229,7 +231,6 @@ interface ModalCustomEvent extends CustomEvent {
 | ----- | ------------------- |
 | `Esc` | Dismisses the modal |
 
-
 ### ラベル
 
 モーダルには [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) という役割があります。そのため、開発者はモーダルに適切なラベル付けを行う必要があります。モーダルが `ion-title` を使用している場合、 `ion-modal` で [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) を設定すると、内部のテキストをモーダル自体のラベルに使用することができます。モーダルに追加の説明テキストが含まれている場合、このテキストは [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使ってモーダルと関連付けることができます。
@@ -252,7 +253,7 @@ See https://w3c.github.io/aria/#aria-modal for more information.
 
 シートモーダルでは、`backdropBreakpoint` プロパティが使用されているとき、ユーザがモーダルの後ろのコンテンツとインタラクトできるようにします。バックドロップは、指定された `backdropBreakpoint` までは無効になり、それ以降は有効になります。
 
-バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。入力支援は、`aria-modal` の使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。オートフォーカスなどの機能は、ユーザーに警告することなく、支援技術が 2つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。
+バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。入力支援は、`aria-modal` の使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。オートフォーカスなどの機能は、ユーザーに警告することなく、支援技術が 2 つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。
 
 ## パフォーマンス
 
@@ -268,26 +269,32 @@ import Mount from '@site/static/usage/v7/modal/performance/mount/index.md';
 
 - この機能は、既存のパフォーマンスの問題に対処するための最後の手段として使用すべきです。この機能を使用する前に、パフォーマンスのボトルネックを特定し、解決するように努めてください。さらに、パフォーマンスの問題を予測するためにこの機能を使用しないでください。
 
-- この機能は、JavaScriptフレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。
+- この機能は、JavaScript フレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。
 
 - この機能はインラインモーダルでのみ動作します。 `modalController` で作成されたモーダルは先に作成されないので、インナーコンテンツも作成されません。
 
 - インナー コンポーネントの JavaScript Framework ライフサイクル フックはすべて、モーダルが表示されたときではなく、モーダルがマウントされたときに実行されます。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
index 57352d56999..f1c273c6d12 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-nav-link"
+title: 'ion-nav-link'
 ---
+
 import Props from '@ionic-internal/component-api/v7/nav-link/props.md';
 import Events from '@ionic-internal/component-api/v7/nav-link/events.md';
 import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md';
@@ -10,33 +11,40 @@ import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
 
 <head>
   <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
-  <meta name="description" content="ナビゲーションリンクは、指定されたコンポーネントにナビゲートします。これは、push(), pop(), setRoot() メソッドを呼び出すための要素形式です。ion-nav-linkの詳細については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ナビゲーションリンクは、指定されたコンポーネントにナビゲートします。これは、push(), pop(), setRoot() メソッドを呼び出すための要素形式です。ion-nav-linkの詳細については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 ナビゲーションリンクは指定されたコンポーネントに移動するために使用されます。コンポーネントは `forward`, `back` または `root` コンポーネントとして移動することができます。
 
 これは、ナビゲーションコントローラの `push()`, `pop()`, `setRoot()` メソッドを呼び出すための要素形式となります。
 
 See the [nav](./nav#using-navlink) documentation for more information.
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
index 61e847bcf50..33c31009111 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-nav"
+title: 'ion-nav'
 ---
+
 import Props from '@ionic-internal/component-api/v7/nav/props.md';
 import Events from '@ionic-internal/component-api/v7/nav/events.md';
 import Methods from '@ionic-internal/component-api/v7/nav/methods.md';
@@ -10,20 +11,23 @@ import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
 
 <head>
   <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
-  <meta name="description" content="ion-navは、任意のコンポーネントをロードしたり、新しいコンポーネントをスタックにPushするために単独で利用できます。ナビビューをロードしたり、他をプッシュしても、ルータ全体に影響を与えることはありません。" />
+  <meta
+    name="description"
+    content="ion-navは、任意のコンポーネントをロードしたり、新しいコンポーネントをスタックにPushするために単独で利用できます。ナビビューをロードしたり、他をプッシュしても、ルータ全体に影響を与えることはありません。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
+Nav は、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
 
-RouterOutletとは異なり、Navは特定のルーターに関連付けられていません。つまり、Navコンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリのURLに縛られないモーダルを持つことができるユースケースに適しています。
+RouterOutlet とは異なり、Nav は特定のルーターに関連付けられていません。つまり、Nav コンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリの URL に縛られないモーダルを持つことができるユースケースに適しています。
 
-## NavLinkを利用する
+## NavLink を利用する
 
-NavLinkは、Navと対話する際の簡略化されたAPIです。開発者は、コンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
+NavLink は、Nav と対話する際の簡略化された API です。開発者は、コンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
 
 import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
 
@@ -41,22 +45,26 @@ interface NavCustomEvent extends CustomEvent {
 }
 ```
 
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
index 22ba5850db2..2d3e984ad43 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-note"
+title: 'ion-note'
 ---
+
 import Props from '@ionic-internal/component-api/v7/note/props.md';
 import Events from '@ionic-internal/component-api/v7/note/events.md';
 import Methods from '@ionic-internal/component-api/v7/note/methods.md';
@@ -10,14 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/note/slots.md';
 
 <head>
   <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
-  <meta name="description" content="ion-notesは、一般的に詳細な情報を提供するテキスト要素です。iOSおよびAndroidのIonicアプリでnotesをどのように使用し、どのようにスタイリングできるかをご紹介します。" />
+  <meta
+    name="description"
+    content="ion-notesは、一般的に詳細な情報を提供するテキスト要素です。iOSおよびAndroidのIonicアプリでnotesをどのように使用し、どのようにスタイリングできるかをご紹介します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Noteは、一般的に詳細情報を提供するサブタイトルとして使用されるテキスト要素です。デフォルトではグレーで表示されるように設計されています。Noteは、メタデータテキストとしてアイテム内で使用することができます。
+Note は、一般的に詳細情報を提供するサブタイトルとして使用されるテキスト要素です。デフォルトではグレーで表示されるように設計されています。Note は、メタデータテキストとしてアイテム内で使用することができます。
 
 ## 基本的な使い方
 
@@ -39,27 +43,32 @@ import Colors from '@site/static/usage/v7/note/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
index 863fbd4e69c..645c695b3fc 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-picker"
+title: 'ion-picker'
 ---
+
 import Props from '@ionic-internal/component-api/v7/picker/props.md';
 import Events from '@ionic-internal/component-api/v7/picker/events.md';
 import Methods from '@ionic-internal/component-api/v7/picker/methods.md';
@@ -10,14 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
 
 <head>
   <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
-  <meta name="description" content="Pickerは、ボタンの列とその下にコラムを表示するダイアログです。イオンピッカーは、アプリのコンテンツの上、そしてビューポートの下に表示されます。" />
+  <meta
+    name="description"
+    content="Pickerは、ボタンの列とその下にコラムを表示するダイアログです。イオンピッカーは、アプリのコンテンツの上、そしてビューポートの下に表示されます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Pickerは、画面下にボタンと列の行を表示するダイアログです。アプリケーションのコンテンツの上部とビューポートの下部に表示されます。
+Picker は、画面下にボタンと列の行を表示するダイアログです。アプリケーションのコンテンツの上部とビューポートの下部に表示されます。
 
 ## インラインピッカー（推奨）
 
@@ -124,19 +128,25 @@ interface PickerOptions {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
index f6323977ebd..9d5e8f44e4b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-popover"
+title: 'ion-popover'
 ---
+
 import Props from '@ionic-internal/component-api/v7/popover/props.md';
 import Events from '@ionic-internal/component-api/v7/popover/events.md';
 import Methods from '@ionic-internal/component-api/v7/popover/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
 
 <head>
   <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
-  <meta name="description" content="ion-popoverは、現在のページの上に表示されるダイアログです。iOSとAndroidデバイス用のpopover UIコンポーネントとCSSカスタムプロパティについて説明します。" />
+  <meta
+    name="description"
+    content="ion-popoverは、現在のページの上に表示されるダイアログです。iOSとAndroidデバイス用のpopover UIコンポーネントとCSSカスタムプロパティについて説明します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Popoverは、現在のページの上部に表示されるダイアログです。これは何にでも使用できますが、通常はナビゲーションバーに収まらないオーバーフローアクションに使用されます。
+Popover は、現在のページの上部に表示されるダイアログです。これは何にでも使用できますが、通常はナビゲーションバーに収まらないオーバーフローアクションに使用されます。
 
 `ion-popover` を使用するには、インラインで使用する方法と `popoverController` を使用する方法がります。それぞれの方法には異なる考慮点があるので、あなたのユースケースに最も適した方法を使用するようにしましょう。
 
@@ -34,7 +37,7 @@ Angular、React、Vue で `ion-popover` を使用する場合、渡されたコ
 
 もし、ポップオーバーの表示と非表示を細かく制御したい場合は、 `popoverController` を使用することをお勧めします。
 
-### Angular 
+### Angular
 
 渡されたコンポーネントは、ポップオーバーが表示されたときに作成され、ポップオーバーが解除されたときに破棄される必要があるため、内部で `<ng-content>` を使用してコンテンツを投影することはできません。代わりに、`<ng-container>` を使用します。これは、`<ng-template>` が渡されることを想定しています。そのため、コンポーネントを渡す際には、`<ng-template>`でラップする必要があります。
 
@@ -51,7 +54,7 @@ Angular、React、Vue で `ion-popover` を使用する場合、渡されたコ
 インラインの `ion-popover` のトリガーは、インタラクションされたときにポップオーバーを開く要素です。インタラクションの動作は `trigger-action` プロパティを設定することでカスタマイズすることができます。なお、`trigger-action="context-menu"` はシステムのデフォルトのコンテキストメニューを開かせないようにします。
 
 :::note
- `popoverController` を使用する場合、`ion-popover` は前もって作成されないので、トリガーは適用されません。
+`popoverController` を使用する場合、`ion-popover` は前もって作成されないので、トリガーは適用されません。
 :::
 
 import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigger/index.md';
@@ -64,7 +67,6 @@ import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigg
 
 `isOpen` は一方向のデータバインディングを使用しています。つまり、ポップオーバーが閉じられたときに自動的に `false` に設定されることはありません。開発者は `ionPopoverDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` にセットする必要があります。この理由は、`ion-popover` の内部がアプリケーションの状態と密に結合されるのを防ぐためである。一方通行のデータバインディングでは、ポップオーバーはリアクティブ変数が提供するブーリアン値だけを気にすればよいのです。双方向のデータバインディングでは、ポップオーバーはブール値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは非決定的な動作につながり、アプリケーションのデバッグを難しくします。
 
-
 import IsOpenTrigger from '@site/static/usage/v7/popover/presenting/inline-isopen/index.md';
 
 <IsOpenTrigger />
@@ -79,7 +81,7 @@ Ionic Framework からインポートされた `popoverController` を使用す
 
 ### React
 
-コントローラの代わりに、React には `useIonPopover` というHookがあり、同じような振る舞いをします。なお、 `useIonPopover` は `<IonApp>` の子孫であることが必要です。もし、 `<IonApp>` の外側でポップオーバーを使用する必要がある場合は、代わりにインラインポップオーバーを使用することを検討してください。
+コントローラの代わりに、React には `useIonPopover` という Hook があり、同じような振る舞いをします。なお、 `useIonPopover` は `<IonApp>` の子孫であることが必要です。もし、 `<IonApp>` の外側でポップオーバーを使用する必要がある場合は、代わりにインラインポップオーバーを使用することを検討してください。
 
 ### 使い方
 
@@ -87,29 +89,27 @@ import ControllerExample from '@site/static/usage/v7/popover/presenting/controll
 
 <ControllerExample />
 
-
 ## スタイリング
 
 ポップオーバーはアプリケーションのルートで表示されるので、アプリケーション全体を覆うように表示されます。この動作はインラインポップオーバーとコントローラから表示されるポップオーバーの両方に適用されます。そのため、カスタムポップオーバースタイリングは特定のコンポーネントにスコープすることができません。代わりに、スタイルはグローバルに適用されなければなりません。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
 
 :::note
- If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
+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/v7/popover/customization/styling/index.md';
 
 <Styling />
 
-
 ## 配置
 
 ### リファレンス
 
-ポップオーバーを表示するとき、Ionic Framework はポップオーバーを相対的に表示するための参照点を必要とします。`reference="event"` を指定すると、ポップオーバーはトリガー要素で dispatch されたポインターイベントのx-y座標に相対的に表示されます。 `reference="trigger"` を指定すると、ポップオーバーはトリガー要素のバウンディングボックスに対して相対的に表示されます。
+ポップオーバーを表示するとき、Ionic Framework はポップオーバーを相対的に表示するための参照点を必要とします。`reference="event"` を指定すると、ポップオーバーはトリガー要素で dispatch されたポインターイベントの x-y 座標に相対的に表示されます。 `reference="trigger"` を指定すると、ポップオーバーはトリガー要素のバウンディングボックスに対して相対的に表示されます。
 
 ### Side
 
-`side` プロパティを使用することで、基準点の上、右、左、下のいずれかにポップオーバーを配置することができます。また、LTRやRTLのモードに応じてサイドを切り替えたい場合は、 `start` や `end` を使用することができます。
+`side` プロパティを使用することで、基準点の上、右、左、下のいずれかにポップオーバーを配置することができます。また、LTR や RTL のモードに応じてサイドを切り替えたい場合は、 `start` や `end` を使用することができます。
 
 ### Alignment
 
@@ -142,14 +142,13 @@ import Sizing from '@site/static/usage/v7/popover/customization/sizing/index.md'
 `dismissOnSelect` プロパティを使用すると、ポップオーバーのコンテンツがクリックされたときに自動的にポップオーバーを閉じることができます。この動作は、他のポップオーバーのトリガー要素をクリックしたときには適用されません。
 
 :::note
- `popoverController` を使用する場合、ネストしたポップオーバーは作成できません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに、自動的にアプリケーションのルートに追加されるからです。
+`popoverController` を使用する場合、ネストしたポップオーバーは作成できません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに、自動的にアプリケーションのルートに追加されるからです。
 :::
 
 import NestedPopover from '@site/static/usage/v7/popover/nested/index.md';
 
 <NestedPopover />
 
-
 ## Interfaces
 
 以下に、`popoverController` を使用する際に利用可能なすべてのオプションを示します。これらのオプションは `popoverController.create()` を呼び出す際に指定します。
@@ -172,7 +171,7 @@ interface PopoverOptions {
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
-  
+
   size?: PopoverSize;
   dismissOnSelect?: boolean;
   reference?: PositionReference;
@@ -182,10 +181,9 @@ interface PopoverOptions {
 }
 ```
 
-
 ## Types
 
-以下に、`ion-popover` のすべてのカスタムTypeを紹介します。
+以下に、`ion-popover` のすべてのカスタム Type を紹介します。
 
 ```typescript
 type PopoverSize = 'cover' | 'auto';
@@ -201,28 +199,27 @@ type PositionAlign = 'start' | 'center' | 'end';
 
 `ion-popover` は、ポップオーバー内のフォーカス可能な要素間を移動するための基本的なキーボードをサポートしています。次の表は、それぞれのキーが何をするのかの詳細です:
 
-| 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. |
-
+| 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` は、 `button` プロパティを持つ `ion-item` 要素間を移動するための矢印キーを完全にサポートしています。最も一般的な使用例としては、デスクトップにフォーカスしたアプリケーションにおけるドロップダウンメニューとして使用することができます。基本的なキーボードのサポートに加え、次の表ではドロップダウンメニューの矢印キーのサポートについて詳しく説明します。
 
-| 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. |
+| 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
 
-### Innerコンテンツのマウント
+### Inner コンテンツのマウント
 
 インライン `ion-popover` のコンテンツは、閉じるとマウントされなくなります。このコンテンツのレンダリングにコストがかかる場合、開発者は `keepContentsMounted` プロパティを使用して、ポップオーバーがマウントされると同時にコンテンツをマウントすることができます。これにより、ポップオーバーが開いたときに内部コンテンツがすでにマウントされているため、アプリケーションの応答性を最適化することができます。
 
@@ -234,26 +231,32 @@ import Mount from '@site/static/usage/v7/popover/performance/mount/index.md';
 
 - この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用する必要があります。この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用されるべきです。また、パフォーマンスの問題を予期してこの機能を使用しないでください。
 
-- この機能は、JavaScriptフレームワークを使用する場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをポップオーバーに渡すことができ、コンテンツは自動的にレンダリングされます。
+- この機能は、JavaScript フレームワークを使用する場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをポップオーバーに渡すことができ、コンテンツは自動的にレンダリングされます。
 
 - この機能はインラインポップオーバーでのみ機能します。 `popoverController`で作成されたポップオーバーは先に作成されないので、内部のコンテンツも作成されません。
 
 - 内部コンポーネントの JavaScript Framework ライフサイクルフックは、ポップオーバーが表示されたときではなく、ポップオーバーがマウントされたときにすぐに実行されます。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
index 98b9206aee9..3779e3fb1b5 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-progress-bar"
+title: 'ion-progress-bar'
 ---
+
 import Props from '@ionic-internal/component-api/v7/progress-bar/props.md';
 import Events from '@ionic-internal/component-api/v7/progress-bar/events.md';
 import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md';
@@ -10,19 +11,21 @@ import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
 
 <head>
   <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
-  <meta name="description" content="ion-progress-barは、水平方向の読み込みインジケーターで、フォームの送信や更新の保存など、進行中のアプリ処理のステータスをユーザーに知らせます。" />
+  <meta
+    name="description"
+    content="ion-progress-barは、水平方向の読み込みインジケーターで、フォームの送信や更新の保存など、進行中のアプリ処理のステータスをユーザーに知らせます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには2つのタイプがあります。プログレスバーには、`determinate`と`indeterminate`の2種類があります。
+プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには 2 つのタイプがあります。プログレスバーには、`determinate`と`indeterminate`の 2 種類があります。
 
 ## Determinate
 
-Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は `value` プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。
+Determinate はデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は `value` プロパティを設定することで表現されます。これは、進捗が 0 から 100%まで増加するように表示するために使用できます。
 
 import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md';
 
@@ -36,24 +39,22 @@ import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md';
 
 <Buffer />
 
-
 ## Indeterminate
 
-Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは `value` と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。
+Indeterminate タイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは `value` と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。
 
 import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/index.md';
 
 <Indeterminate />
 
-
 ## Progress Bars in Toolbars
 
 <!-- Reuse the playground from the Toolbar directory -->
+
 import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 
 <Toolbar />
 
-
 ## テーマ
 
 ### Colors
@@ -62,35 +63,38 @@ import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.md';
 
 <Colors />
 
-
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ### CSS Shadow Parts
 
 import CSSParts from '@site/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
index 9b597b0aa9a..05a231c6db5 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-radio-group"
+title: 'ion-radio-group'
 ---
+
 import Props from '@ionic-internal/component-api/v7/radio-group/props.md';
 import Events from '@ionic-internal/component-api/v7/radio-group/events.md';
 import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md';
@@ -10,15 +11,16 @@ import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
 
 <head>
   <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
-  <meta name="description" content="radio groupとは、radioボタンのグループです。radio groupは、ユーザーがセットから最大1つのradioボタンを選択できるようにします。 ion-radio-groupの使用方法について、詳しくはこちらをご覧ください。" />
+  <meta
+    name="description"
+    content="radio groupとは、radioボタンのグループです。radio groupは、ユーザーがセットから最大1つのradioボタンを選択できるようにします。 ion-radio-groupの使用方法について、詳しくはこちらをご覧ください。"
+  />
 </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
@@ -40,21 +42,26 @@ interface RadioGroupCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
index 833a0699772..f8a0a8981ad 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-radio"
+title: 'ion-radio'
 ---
+
 import Props from '@ionic-internal/component-api/v7/radio/props.md';
 import Events from '@ionic-internal/component-api/v7/radio/events.md';
 import Methods from '@ionic-internal/component-api/v7/radio/methods.md';
@@ -10,17 +11,19 @@ import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
 
 <head>
   <title>ion-radio Component: Radio Property for iOS and Android</title>
-  <meta name="description" content="Radioコンポーネントは、iOSおよびAndroidデバイスのion-radio-groupsの内部で使用する必要があります。Radioコンポーネントの使用方法とインストール方法については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="Radioコンポーネントは、iOSおよびAndroidデバイスのion-radio-groupsの内部で使用する必要があります。Radioコンポーネントの使用方法とインストール方法については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
+ラジオは、[ラジオグループ](./radio-group)の中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループの value プロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
 
-ラジオは、[ラジオグループ](./radio-group)の中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
-
-ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、[checkboxes](./checkbox)を代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
+ラジオがラジオグループの中にある場合、いつでもチェックされるのは 1 つのラジオだけです。複数の項目を選択する場合は、[checkboxes](./checkbox)を代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
 
 ## 基本的な使い方
 
@@ -44,7 +47,6 @@ import Justify from '@site/static/usage/v7/radio/justify/index.md';
 
 <Justify />
 
-
 :::note
 `ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
 :::
@@ -57,7 +59,6 @@ import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md
 
 <EmptySelection />
 
-
 ## テーマ
 
 ### Colors
@@ -66,7 +67,7 @@ import Colors from '@site/static/usage/v7/radio/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.md';
 
@@ -78,11 +79,11 @@ import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index
 
 <CSSParts />
 
-## Legacy Radio Syntaxからの移行
+## Legacy Radio Syntax からの移行
 
-Ionic 7.0では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+Ionic 7.0 では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+開発者は、この移行を一度に 1 つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### 最新の構文の使い方
 
@@ -91,7 +92,6 @@ Ionic 7.0では、よりシンプルなラジオ構文が導入されました
 import Migration from '@site/static/usage/v7/radio/migration/index.md';
 
 <Migration />
-  
 
 :::note
 Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
@@ -99,24 +99,28 @@ Ionic の過去のバージョンでは、`ion-radio` が正しく機能する
 
 ### レガシー構文の使用
 
-Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
-
-
+Ionic は、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
index 2464ca37fdd..6bcd319947a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-range"
+title: 'ion-range'
 ---
+
 import Props from '@ionic-internal/component-api/v7/range/props.md';
 import Events from '@ionic-internal/component-api/v7/range/events.md';
 import Methods from '@ionic-internal/component-api/v7/range/methods.md';
@@ -10,17 +11,19 @@ import Slots from '@ionic-internal/component-api/v7/range/slots.md';
 
 <head>
   <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
-  <meta name="description" content="ion-rangeは、スライダーを動かして値の範囲を選択することができます。2つのノブを使用できますが、1つは値を制御し、ラベルはどちらか一方に置くことができます。" />
+  <meta
+    name="description"
+    content="ion-rangeは、スライダーを動かして値の範囲を選択することができます。2つのノブを使用できますが、1つは値を制御し、ラベルはどちらか一方に置くことができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
+Range スライダは、スライダノブを動かして、ユーザーが値の範囲を選択できるようにするものです。デフォルトでは、1 つのノブがレンジの値を制御します。この動作は [dual knobs](#dual-knobs) を使ってカスタマイズすることができます。
 
-Rangeスライダは、スライダノブを動かして、ユーザーが値の範囲を選択できるようにするものです。デフォルトでは、1つのノブがレンジの値を制御します。この動作は [dual knobs](#dual-knobs) を使ってカスタマイズすることができます。
-
-デフォルトでは、Rangeスライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。
+デフォルトでは、Range スライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。
 
 ## 基本的な使い方
 
@@ -46,7 +49,7 @@ import DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md';
 
 ## Dual Knobs
 
-Dual knobs はユーザーが下限と上限の値を選択するために使用できる2つのknobsコントロールを導入しています。選択されると、Range は選択された上下限の値を含む [RangeValue](#rangevalue) を持つ `ionChange` イベントを発信します。
+Dual knobs はユーザーが下限と上限の値を選択するために使用できる 2 つの knobs コントロールを導入しています。選択されると、Range は選択された上下限の値を含む [RangeValue](#rangevalue) を持つ `ionChange` イベントを発信します。
 
 import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.md';
 
@@ -54,7 +57,7 @@ import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.md';
 
 ## ピン
 
-`pin` 属性は、ドラッグしたときにノブの上にレンジの値を表示します。これにより、ユーザはRange内の特定の値を選択することができます。
+`pin` 属性は、ドラッグしたときにノブの上にレンジの値を表示します。これにより、ユーザは Range 内の特定の値を選択することができます。
 
 `pinFormatter` 関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。
 
@@ -64,9 +67,9 @@ import Pins from '@site/static/usage/v7/range/pins/index.md';
 
 ## Snapping & Ticks
 
-TicksはRange 上で利用可能な各値のインジケータを表示します。Ticksを使用するためには、開発者は `snaps` と `ticks` プロパティの両方を `true` に設定する必要があります。
+Ticks は Range 上で利用可能な各値のインジケータを表示します。Ticks を使用するためには、開発者は `snaps` と `ticks` プロパティの両方を `true` に設定する必要があります。
 
-snapsを有効にし、knobをドラッグして放すと、Range knobは最も近い利用可能な値にスナップします。
+snaps を有効にし、knob をドラッグして放すと、Range knob は最も近い利用可能な値にスナップします。
 
 import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
 
@@ -76,7 +79,7 @@ import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
 
 ### Using `ionChange`
 
-`ionChange` イベントはRange knobの値の変更を監視します。
+`ionChange` イベントは Range knob の値の変更を監視します。
 
 import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.md';
 
@@ -84,7 +87,7 @@ import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.m
 
 ### `ionKnobMoveStart` と `ionKnobMoveEnd` を使う
 
-マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knobのドラッグが開始されると `ionKnobMoveStart` イベントが発行されます。逆に、`ionKnobMoveEnd`はRange knobがリリースされたときに発生します。両イベントは `RangeValue` タイプで発生し、`dualKnobs` プロパティと組み合わせて動作します。
+マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knob のドラッグが開始されると `ionKnobMoveStart` イベントが発行されます。逆に、`ionKnobMoveEnd`は Range knob がリリースされたときに発生します。両イベントは `RangeValue` タイプで発生し、`dualKnobs` プロパティと組み合わせて動作します。
 
 import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/index.md';
 
@@ -92,9 +95,9 @@ import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/in
 
 ## テーマ
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
-Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。
+Range には、アプリケーションのデザインに合わせて Range コンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。
 
 import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.md';
 
@@ -102,7 +105,7 @@ import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.m
 
 ### CSS Shadow Parts
 
-Rangeには [CSS Shadow Parts](#css-shadow-parts) があり、Rangeコンポーネント内の特定の要素ノードを完全にカスタマイズすることができます。CSS Shadow Partsは最も多くのカスタマイズ機能を提供し、Rangeコンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。
+Range には [CSS Shadow Parts](#css-shadow-parts) があり、Range コンポーネント内の特定の要素ノードを完全にカスタマイズすることができます。CSS Shadow Parts は最も多くのカスタマイズ機能を提供し、Range コンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。
 
 import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index.md';
 
@@ -122,7 +125,6 @@ import Migration from '@site/static/usage/v7/range/migration/index.md';
 
 <Migration />
 
-
 :::note
 In past versions of Ionic, `ion-item` was required for `ion-range` to function properly. Starting in Ionic 7.0, `ion-range` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-range` to function properly.
 :::
@@ -131,7 +133,6 @@ In past versions of Ionic, `ion-item` was required for `ion-range` to function p
 
 Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-range` to `true` to force that instance of the range to use the legacy syntax.
 
-
 ## Interfaces
 
 ### RangeChangeEventDetail
@@ -174,24 +175,29 @@ interface RangeCustomEvent extends CustomEvent {
 ### RangeValue
 
 ```typescript
-type RangeValue = number | { lower: number, upper: number };
+type RangeValue = number | { lower: number; upper: number };
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
index 34f009ee313..e629542f0e8 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-refresher-content"
+title: 'ion-refresher-content'
 ---
+
 import Props from '@ionic-internal/component-api/v7/refresher-content/props.md';
 import Events from '@ionic-internal/component-api/v7/refresher-content/events.md';
 import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md';
@@ -10,26 +11,30 @@ import Slots from '@ionic-internal/component-api/v7/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.
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
index 964a079d6cd..5602192b79b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-refresher"
+title: 'ion-refresher'
 ---
+
 import Props from '@ionic-internal/component-api/v7/refresher/props.md';
 import Events from '@ionic-internal/component-api/v7/refresher/events.md';
 import Methods from '@ionic-internal/component-api/v7/refresher/methods.md';
@@ -10,24 +11,24 @@ import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
 
 <head>
   <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
-  <meta name="description" content="ion-refresherは、コンテンツコンポーネントにpull-to-refresh機能を提供します。これにより、ユーザーはタッチ操作でページをプルダウンし、より多くのデータを取得することができます。" />
+  <meta
+    name="description"
+    content="ion-refresherは、コンテンツコンポーネントにpull-to-refresh機能を提供します。これにより、ユーザーはタッチ操作でページをプルダウンし、より多くのデータを取得することができます。"
+  />
 </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.
 
-
 ## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/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.
@@ -38,7 +39,6 @@ import PullProperties from '@site/static/usage/v7/refresher/pull-properties/inde
 
 <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`.
@@ -49,7 +49,6 @@ import CustomContent from '@site/static/usage/v7/refresher/custom-content/index.
 
 <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.
@@ -62,7 +61,6 @@ Certain refresher properties such as the [Pull Properties](#pull-properties), `c
 
 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 が機能するためには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content` のスクロールを無効にし、`.ion-content-scroll-host` クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するかを指定する必要があります。
@@ -71,7 +69,6 @@ import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-ta
 
 <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.
@@ -80,7 +77,6 @@ import Advanced from '@site/static/usage/v7/refresher/advanced/index.md';
 
 <Advanced />
 
-
 ## Interfaces
 
 ### RefresherEventDetail
@@ -103,19 +99,25 @@ interface RefresherCustomEvent extends CustomEvent {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
index 4c5fc4efe46..bc7960fb62b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-reorder-group"
+title: 'ion-reorder-group'
 ---
+
 import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
 import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
 import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
@@ -10,17 +11,18 @@ import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
 
 <head>
   <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
-  <meta name="description" content="ion-reorder-groupは、Ionicアプリでion-reorderコンポーネントを使用するアイテムのためのラッパーコンポーネントです。ion-reorder-groupの使い方はこちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-reorder-groupは、Ionicアプリでion-reorderコンポーネントを使用するアイテムのためのラッパーコンポーネントです。ion-reorder-groupの使い方はこちらをご覧ください。"
+  />
 </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
@@ -44,21 +46,26 @@ interface ItemReorderCustomEvent extends CustomEvent {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
index 6c7497b5169..f12a4975d3e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-reorder"
+title: 'ion-reorder'
 ---
+
 import Props from '@ionic-internal/component-api/v7/reorder/props.md';
 import Events from '@ionic-internal/component-api/v7/reorder/events.md';
 import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
@@ -10,19 +11,20 @@ import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
 
 <head>
   <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
-  <meta name="description" content="ion-reorderは、ion-reorder-groupの中のアイテムをドラッグ＆ドロップするために使用されるアンカーです。カスタム並び替えアイコンとアイテムの詳細については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-reorderは、ion-reorder-groupの中のアイテムをドラッグ＆ドロップするために使用されるアンカーです。カスタム並び替えアイコンとアイテムの詳細については、こちらをご覧ください。"
+  />
 </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.
 
-
 ## 基本的な使い方
 
 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.
@@ -31,7 +33,6 @@ import Basic from '@site/static/usage/v7/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.
@@ -40,7 +41,6 @@ import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/in
 
 <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.
@@ -49,7 +49,6 @@ import CustomIcon from '@site/static/usage/v7/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.
@@ -58,7 +57,6 @@ import Wrapper from '@site/static/usage/v7/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.
@@ -69,7 +67,6 @@ import UpdatingData from '@site/static/usage/v7/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.
@@ -78,21 +75,26 @@ import CustomScrollTarget from '@site/static/usage/v7/reorder/custom-scroll-targ
 
 <CustomScrollTarget />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
index 4524af68a2a..58661e2ca9c 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-ripple-effect"
+title: 'ion-ripple-effect'
 ---
+
 import Props from '@ionic-internal/component-api/v7/ripple-effect/props.md';
 import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md';
 import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md';
@@ -12,24 +13,24 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <head>
   <title>ion-ripple-effect | Ripple Effect Button Component for Ionic Apps</title>
-  <meta name="description" content="ripple effect buttonコンポーネントは、Material Designインクのリップルインタラクション効果を追加します。ion-appでのみ使用可能で、任意のコンポーネントに追加することができます。" />
+  <meta
+    name="description"
+    content="ripple effect buttonコンポーネントは、Material Designインクのリップルインタラクション効果を追加します。ion-appでのみ使用可能で、任意のコンポーネントに追加することができます。"
+  />
 </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.
 
-
 ## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/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"`.
@@ -38,7 +39,6 @@ import Type from '@site/static/usage/v7/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.
@@ -47,21 +47,26 @@ import Customizing from '@site/static/usage/v7/ripple-effect/customizing/index.m
 
 <Customizing />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
index 2b7522e4d34..e157bff6220 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-route-redirect"
+title: 'ion-route-redirect'
 ---
 
 import Props from '@ionic-internal/component-api/v7/route-redirect/props.md';
@@ -11,33 +11,34 @@ import Slots from '@ionic-internal/component-api/v7/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は、ion-routerの直接の子として使用され、URLから他のURLへのリダイレクトを行います。ルートリダイレクトプラグインについては、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-route-redirectは、ion-routerの直接の子として使用され、URLから他のURLへのリダイレクトを行います。ルートリダイレクトプラグインについては、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 A route redirect can only be used with an `ion-router` as a direct child of it.
 
 :::note
- Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+Note: このコンポーネントは、バニラおよびステンシル JavaScript プロジェクトでのみ使用してください。Angular プロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angular ルータを使用してください。
 :::
 
+ルートリダイレクトには、2 つの設定可能なプロパティがあります。
 
-ルートリダイレクトには、2つの設定可能なプロパティがあります。
 - `from`
 - `to`
 
 これは、ある URL から別の URL へとリダイレクトします。定義された `ion-route-redirect` ルールがマッチすると、ルータは `from` プロパティで指定されたパスから `to` プロパティで指定されたパスへリダイレクトします。リダイレクトを行うには、`from` のパスがナビゲートされる URL と完全に一致する必要があります。
 
-
 ## 複数ルートのリダイレクト
 
-任意の数のリダイレクトルートを `ion-router` の内部で定義することができますが、合致するのは1つだけです。
+任意の数のリダイレクトルートを `ion-router` の内部で定義することができますが、合致するのは 1 つだけです。
 
 ルートリダイレクトは、それ自身のリダイレクトの後に別のリダイレクトを呼び出すことはありません。
 
-次の2つのリダイレクトを考えてみましょう。
+次の 2 つのリダイレクトを考えてみましょう。
 
 ```html
 <ion-router>
@@ -48,9 +49,6 @@ A route redirect can only be used with an `ion-router` as a direct child of it.
 
 ユーザーが `/admin` に移動した場合、ルーターは `/login` にリダイレクトし、そこで停止します。複数のリダイレクトを評価することはありません。
 
-
-
-
 ## 使い方
 
 ```html
@@ -96,19 +94,25 @@ routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
index 56733f9c66e..b05629ae811 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-route"
+title: 'ion-route'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -13,19 +14,20 @@ import Slots from '@ionic-internal/component-api/v7/route/slots.md';
 
 <head>
   <title>ion-route: API Route Component for Ionic Framework Apps</title>
-  <meta name="description" content="ion-routeコンポーネントは、コンポーネントを受け取り、Browser URLがURLプロパティに一致したときにレンダリングします。Ionic AppsのAPIルートコンポーネントの詳細はこちら。" />
+  <meta
+    name="description"
+    content="ion-routeコンポーネントは、コンポーネントを受け取り、Browser URLがURLプロパティに一致したときにレンダリングします。Ionic AppsのAPIルートコンポーネントの詳細はこちら。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
 The route component takes a component and renders it when the Browser URL matches the url property.
 
 :::note
- Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+Note: このコンポーネントは、バニラおよびステンシル JavaScript プロジェクトでのみ使用してください。Angular プロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angular ルータを使用してください。
 :::
 
-
 ## ナビゲーションフック
 
 ナビゲーションフックは、タスクを実行したり、ナビゲーションガードとして動作させるために使用することができます。フックは、各 `ion-route` の `beforeEnter` と `beforeLeave` プロパティに関数を提供することで使用します。`true` を返すとナビゲーションを進めることができ、`false` を返すとナビゲーションがキャンセルされる。NavigationHookOptions` 型のオブジェクトを返すと、ナビゲーションを別のページにリダイレクトすることができます。
@@ -41,9 +43,6 @@ interface NavigationHookOptions {
 }
 ```
 
-
-
-
 ## 使い方
 
 <Tabs groupId="framework" defaultValue="javascript" values={[{ value: 'javascript', label: 'Javascript' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
@@ -68,23 +67,23 @@ 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');
@@ -98,23 +97,21 @@ const confirmDiscardChanges = async () => {
     {
       text: 'Discard',
       role: 'destructive',
-    }
+    },
   ];
-  
+
   document.body.appendChild(alert);
-  
+
   await alert.present();
-  
+
   const { role } = await alert.onDidDismiss();
-  
-  return (role === 'Cancel') ? false : true;
-}
-```
 
+  return role === 'Cancel' ? false : true;
+};
+```
 
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```typescript
@@ -123,7 +120,7 @@ import { alertController } from '@ionic/core';
 
 @Component({
   tag: 'router-example',
-  styleUrl: 'router-example.css'
+  styleUrl: 'router-example.css',
 })
 export class RouterExample {
   render() {
@@ -134,29 +131,29 @@ export class RouterExample {
         <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({
@@ -170,22 +167,20 @@ const confirmDiscardChanges = async () => {
       {
         text: 'Discard',
         role: 'destructive',
-      }
-    ]
+      },
+    ],
   });
-  
+
   await alert.present();
-  
+
   const { role } = await alert.onDidDismiss();
-  
-  return (role === 'Cancel') ? false : true;
-}
-```
 
+  return role === 'Cancel' ? false : true;
+};
+```
 
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -203,24 +198,24 @@ const confirmDiscardChanges = async () => {
 
   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?',
@@ -233,16 +228,16 @@ const confirmDiscardChanges = async () => {
         {
           text: 'Discard',
           role: 'destructive',
-        }
-      ]
+        },
+      ],
     });
-    
+
     await alert.present();
-    
+
     const { role } = await alert.onDidDismiss();
-    
-    return (role === 'Cancel') ? false : true;
-  }
+
+    return role === 'Cancel' ? false : true;
+  };
 </script>
 ```
 
@@ -251,19 +246,25 @@ const confirmDiscardChanges = async () => {
 </Tabs>
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
index 051704b0d28..622de5cb636 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
@@ -1,9 +1,10 @@
 ---
-title: "ion-router-link"
+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"
+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 '@ionic-internal/component-api/v7/router-link/props.md';
@@ -15,7 +16,10 @@ import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
 
 <head>
   <title>Router Link | Navigating The ion-router-link Component</title>
-  <meta name="description" content="ion-router-linkコンポーネントを使用すると、指定したリンクに移動することができます。ルーターリンクは、hrefで場所を、directionで遷移のアニメーションを指定することができます。" />
+  <meta
+    name="description"
+    content="ion-router-linkコンポーネントを使用すると、指定したリンクに移動することができます。ルーターリンクは、hrefで場所を、directionで遷移のアニメーションを指定することができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -24,36 +28,34 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <h2 className="table-of-contents__title">コンテンツ</h2>
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
+<TOCInline toc={toc} maxHeadingLevel={2} />
 
-router linkコンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、hrefで場所を、directionで遷移のアニメーションを指定することができます。
+router link コンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、href で場所を、direction で遷移のアニメーションを指定することができます。
 
 :::note
- Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+Note: このコンポーネントは、バニラおよびステンシル JavaScript プロジェクトでのみ使用してください。Angular プロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angular ルータを使用してください。
 :::
 
-
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
index 1986e142f70..ce0fde32c1f 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-router-outlet"
+title: 'ion-router-outlet'
 ---
 
 import Props from '@ionic-internal/component-api/v7/router-outlet/props.md';
@@ -9,51 +9,49 @@ import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md';
 import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-router outletはAngularの組み込みrouter outletコンポーネントやVueのルーター・ビューコンポーネントと同様の振る舞いをしますが、スタック式のナビゲーションを提供し、ビューをアニメーションで出し入れするためのロジックを含んでいます。
+router outlet は Angular の組み込み router outlet コンポーネントや Vue のルーター・ビューコンポーネントと同様の振る舞いをしますが、スタック式のナビゲーションを提供し、ビューをアニメーションで出し入れするためのロジックを含んでいます。
 
 router outlet はナビゲーション用のメソッドを備えていますが、フレームワークのルーターにあるナビゲーションメソッドを使用することをお勧めします。
 
-## ライフサイクルHook
-
-Router OutletでRoutesがレンダリングされた時、アニメーションに関連付けられた特定のIonicイベントにアクセスできます。
+## ライフサイクル Hook
 
+Router Outlet で Routes がレンダリングされた時、アニメーションに関連付けられた特定の Ionic イベントにアクセスできます。
 
-| Event Name         | Description                                                          |
-|--------------------|------------------------------------------------------------------|
+| Event Name         | Description                                                        |
+| ------------------ | ------------------------------------------------------------------ |
 | `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
 | `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
-
-
-これらのイベントはIonicのアニメーションシステムと連携し、コンポーネントがアニメーションを完成させたときにアプリの挙動を調整するのに使用できる。これらのイベントはフレームワーク独自のイベントシステムに代わるものではなく、追加されたものです。
-
-Router Guardsを扱うために、以前の`ionViewCanEnter` と `ionViewCanLeave`は、フレームワーク特有の同等のものに置き換えられました。Angularには[Router Guards](https://angular.jp/guide/router#milestone-5-route-guards)があります。
-
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
 
+これらのイベントは Ionic のアニメーションシステムと連携し、コンポーネントがアニメーションを完成させたときにアプリの挙動を調整するのに使用できる。これらのイベントはフレームワーク独自のイベントシステムに代わるものではなく、追加されたものです。
 
+Router Guards を扱うために、以前の`ionViewCanEnter` と `ionViewCanLeave`は、フレームワーク特有の同等のものに置き換えられました。Angular には[Router Guards](https://angular.jp/guide/router#milestone-5-route-guards)があります。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
index a5bcc2d1923..08c3145da42 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-router"
+title: 'ion-router'
 ---
 
 import Props from '@ionic-internal/component-api/v7/router/props.md';
@@ -11,28 +11,28 @@ import Slots from '@ionic-internal/component-api/v7/router/slots.md';
 
 <head>
   <title>ion-router: Router Component to Coordinate URL Navigation</title>
-  <meta name="description" content="ion-routerは、ionicのナビゲーションアウトレットであるion-navとion-tabsのためのURLコーディネータです。ルーターコンポーネントは vanilla と Stencil JavaScript 内のルーティングを処理します。" />
+  <meta
+    name="description"
+    content="ion-routerは、ionicのナビゲーションアウトレットであるion-navとion-tabsのためのURLコーディネータです。ルーターコンポーネントは vanilla と Stencil JavaScript 内のルーティングを処理します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-
 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. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
+Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
 :::
 
-
 アプリケーションはコードベースに単一の `ion-router` コンポーネントを持たなければなりません。
 このコンポーネントは、ブラウザの履歴とのすべての対話を制御し、イベント・システムを介して更新を集約します。
 
-`ion-router` は、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` というIonicのナビゲーション機能のURL調整機能に過ぎません。
+`ion-router` は、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` という Ionic のナビゲーション機能の URL 調整機能に過ぎません。
 
-つまり、 `ion-router` はDOMにアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザのURLに基づいて、`ion-nav` と `ion-tabs` 、 `ion-router-outlet`  に何をいつ「show」すべきかを指示するだけです。
+つまり、 `ion-router` は DOM にアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザの URL に基づいて、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` に何をいつ「show」すべきかを指示するだけです。
 
-コンポーネント(ロード/選択)とURLの間の関係を設定するために、`ion-router` はJSX/HTMLを使ってルートのツリーを定義する宣言的な構文を利用します。
+コンポーネント(ロード/選択)と URL の間の関係を設定するために、`ion-router` は JSX/HTML を使ってルートのツリーを定義する宣言的な構文を利用します。
 
 ## 基本的な使い方
 
@@ -63,8 +63,6 @@ interface RouterCustomEvent extends CustomEvent {
 }
 ```
 
-
-
 ## 使い方
 
 ```html
@@ -91,24 +89,28 @@ interface RouterCustomEvent extends CustomEvent {
   <ion-route url="/signup" component="page-signup"></ion-route>
   <ion-route url="/support" component="page-support"></ion-route>
 </ion-router>
-
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
index 1496666cad9..7c4a43ddaaf 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-row"
+title: 'ion-row'
 ---
+
 import Props from '@ionic-internal/component-api/v7/row/props.md';
 import Events from '@ionic-internal/component-api/v7/row/events.md';
 import Methods from '@ionic-internal/component-api/v7/row/methods.md';
@@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v7/row/slots.md';
 
 <head>
   <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
-  <meta name="description" content="Rowsはグリッドシステムの水平方向のコンポーネントで、さまざまな数のカラムを含んでいます。行の配置や使用方法については、ion-row API Docs を参照してください。" />
+  <meta
+    name="description"
+    content="Rowsはグリッドシステムの水平方向のコンポーネントで、さまざまな数のカラムを含んでいます。行の配置や使用方法については、ion-row API Docs を参照してください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -22,28 +26,30 @@ Rows are horizontal components of the [grid](./grid) system and contain varying
 
 See the [grid](./grid) documentation for more information.
 
-
 ## Row Alignment
 
-デフォルトでは、列は行の高さ全体を埋めるように伸縮し、必要に応じて折り返されます。行は [Flexコンテナ](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) なので、この動作をカスタマイズするために、行に適用できるいくつかの [CSS クラス](/docs/layout/css-utilities#flex-container-properties) が用意されています。
-
-
-
+デフォルトでは、列は行の高さ全体を埋めるように伸縮し、必要に応じて折り返されます。行は [Flex コンテナ](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) なので、この動作をカスタマイズするために、行に適用できるいくつかの [CSS クラス](/docs/layout/css-utilities#flex-container-properties) が用意されています。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
index 40953824dad..a5a6bcd187d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-searchbar"
+title: 'ion-searchbar'
 ---
+
 import Props from '@ionic-internal/component-api/v7/searchbar/props.md';
 import Events from '@ionic-internal/component-api/v7/searchbar/events.md';
 import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md';
@@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
 
 <head>
   <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
-  <meta name="description" content="Search barsは、コレクションを検索するために使用できるテキストフィールドを表します。AndroidとiOSのキーボード表示で、Ion-Search Barをアイコンとして入力する方法をご紹介します。" />
+  <meta
+    name="description"
+    content="Search barsは、コレクションを検索するために使用できるテキストフィールドを表します。AndroidとiOSのキーボード表示で、Ion-Search Barをアイコンとして入力する方法をご紹介します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -19,23 +23,20 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 検索バーは、コレクションを検索するために使用できるテキストフィールドを表します。ツールバーやメインコンテンツの中に表示することができます。検索バーは、検索リストへの入力の代わりに使用する必要があります。
 
-
 ## 基本的な使い方
 
 import Basic from '@site/static/usage/v7/searchbar/basic/index.md';
 
 <Basic />
 
-
 ## 検索アイコン
 
-検索バーのInputフィールドの左に表示される検索アイコンです。任意の [Ionicon](https://ionic.io/ionicons/) にカスタマイズすることが可能です。
+検索バーの Input フィールドの左に表示される検索アイコンです。任意の [Ionicon](https://ionic.io/ionicons/) にカスタマイズすることが可能です。
 
 import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md';
 
 <SearchIcon />
 
-
 ## クリアボタン
 
 検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意の[Ionicon](https://ionic.io/ionicons/)にカスタマイズすることができます。
@@ -44,7 +45,6 @@ import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md';
 
 <ClearButton />
 
-
 ## キャンセルボタン
 
 キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは `ios` モードではテキストとして、`md` モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意の[Ionicon](https://ionic.io/ionicons/)を使用することができます。
@@ -53,26 +53,24 @@ import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md
 
 <CancelButton />
 
-
 ## ツールバーの中に配置した検索バー
 
-検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOSでは、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Designでは、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。
+検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOS では、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Design では、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。
 
 <!-- Reuse the playground from the Toolbar directory -->
+
 import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 <Toolbar />
 
-
 ## Debounce
 
-検索バーにDebounceを設定して、`ionChange`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
+検索バーに Debounce を設定して、`ionChange`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
 
 import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 
 <Debounce />
 
-
 ## テーマ
 
 ### Colors
@@ -81,24 +79,23 @@ import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
-検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化することを意味します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
+検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSS を自動的にスコープ化することを意味します。CSS で scoped セレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
 
 import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## キーボード表示
 
 ### Android
 
-デフォルトでは、Inputをタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からarriage returnに変更されます。
+デフォルトでは、Input をタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡から arriage return に変更されます。
 
 ### iOS
 
-デフォルトでは、Inputをタップするとキーボードが表示され、グレーのSubmitボタンに「return」のテキストが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、テキストが "return" から "go" に変わり、ボタンの色もグレーから青に変わります。また、`ion-searchbar` を `form` 要素でラップして、 `action` プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青いSubmitボタンが表示されるようになります。
+デフォルトでは、Input をタップするとキーボードが表示され、グレーの Submit ボタンに「return」のテキストが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、テキストが "return" から "go" に変わり、ボタンの色もグレーから青に変わります。また、`ion-searchbar` を `form` 要素でラップして、 `action` プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青い Submit ボタンが表示されるようになります。
 
 ## Interfaces
 
@@ -121,21 +118,26 @@ interface SearchbarCustomEvent extends CustomEvent {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
index a13d47afe68..f224e4745b9 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-segment-button"
+title: 'ion-segment-button'
 ---
+
 import Props from '@ionic-internal/component-api/v7/segment-button/props.md';
 import Events from '@ionic-internal/component-api/v7/segment-button/events.md';
 import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md';
@@ -10,16 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md';
 
 <head>
   <title>ion-segment-button | Segment Button Icon and Segment Value</title>
-  <meta name="description" content="ion-segment-buttonsは、Segmentの中にある関連するボタンのグループです。Ionic Frameworkアプリでsegment-buttonsのアイコンの使い方を学び、その値を確認します。" />
+  <meta
+    name="description"
+    content="ion-segment-buttonsは、Segmentの中にある関連するボタンのグループです。Ionic Frameworkアプリでsegment-buttonsのアイコンの使い方を学び、その値を確認します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-セグメントボタンは、[segment](segment.md)の中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの `value` をセグメントボタンの `value` に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは1つだけです。
-
+セグメントボタンは、[segment](segment.md)の中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの `value` をセグメントボタンの `value` に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは 1 つだけです。
 
 ## 基本的な使い方
 
@@ -27,45 +29,48 @@ import Basic from '@site/static/usage/v7/segment-button/basic/index.md';
 
 <Basic />
 
-
 ## Layout
 
-`layout`プロパティは、デフォルトで `"icon-top"` に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は `layout` プロパティを `"icon-bottom"`, `"icon-start"`, `"icon-end"` に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、ラベルの末尾（LTRでは右、RTLでは左）に表示することができます。
+`layout`プロパティは、デフォルトで `"icon-top"` に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は `layout` プロパティを `"icon-bottom"`, `"icon-start"`, `"icon-end"` に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTR では左、RTL では右）、ラベルの末尾（LTR では右、RTL では左）に表示することができます。
 
 import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
 
 <Layout />
 
-
 ## テーマ
+
 ### CSS Shadow Parts
 
 import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.md';
 
 <CSSParts />
 
-
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
index 0cc6e3fdd1c..0802f43b0ec 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-segment"
+title: 'ion-segment'
 ---
+
 import Props from '@ionic-internal/component-api/v7/segment/props.md';
 import Events from '@ionic-internal/component-api/v7/segment/events.md';
 import Methods from '@ionic-internal/component-api/v7/segment/methods.md';
@@ -10,18 +11,19 @@ import Slots from '@ionic-internal/component-api/v7/segment/slots.md';
 
 <head>
   <title>ion-segment: API Documentation for Segmented Controls</title>
-  <meta name="description" content="ion-segmentは、関連するボタンのグループを表示します（セグメントコントロールとも呼ばれます）。使用方法の詳細については、Segment API ドキュメンテーションを参照してください。" />
+  <meta
+    name="description"
+    content="ion-segmentは、関連するボタンのグループを表示します（セグメントコントロールとも呼ばれます）。使用方法の詳細については、Segment API ドキュメンテーションを参照してください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
+Segments は、関連するボタンのグループを水平方向の行に表示することができ、segmented controls とも呼ばれます。これらは、toolbar またはメインコンテンツの内部に表示できます。
 
-Segmentsは、関連するボタンのグループを水平方向の行に表示することができ、segmented controlsとも呼ばれます。これらは、toolbarまたはメインコンテンツの内部に表示できます。
-
-これらの機能は、1つを選択すると他のすべてが選択解除されるTabsと似ています。Segmentsは、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segmentsの代わりにTabsを使用してください。
-
+これらの機能は、1 つを選択すると他のすべてが選択解除される Tabs と似ています。Segments は、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segments の代わりに Tabs を使用してください。
 
 ## 基本的な使い方
 
@@ -31,7 +33,6 @@ import Basic from '@site/static/usage/v7/segment/basic/index.md';
 
 <Basic />
 
-
 ## Scrollable Segments
 
 デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、`scrollable` プロパティを `true` に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。
@@ -40,15 +41,14 @@ import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md';
 
 <Scrollable />
 
-
 ## Segments in Toolbars
 
 <!-- Reuse the playground from the Toolbar directory -->
+
 import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md';
 
 <Toolbar />
 
-
 ## テーマ
 
 ### Colors
@@ -57,26 +57,25 @@ import Colors from '@site/static/usage/v7/segment/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## アクセシビリティ
 
 ### キーボードナビゲーション
 
 このコンポーネントは、`ion-segment-button`要素間のナビゲーションと選択について、フルキーボードサポートを備えています。デフォルトでは、キーボードナビゲーションは `ion-segment-button` 要素にのみフォーカスしますが、`selectOnFocus` プロパティを使用すると、フォーカスされた要素も確実に選択されるようになります。次の表は、それぞれのキーが何をするのかの詳細です。
 
-| 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.                 |
+| 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
 
@@ -99,21 +98,26 @@ interface SegmentCustomEvent extends CustomEvent {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
index f6afc3e40e2..645b5eac547 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-select-option"
+title: 'ion-select-option'
 ---
+
 import Props from '@ionic-internal/component-api/v7/select-option/props.md';
 import Events from '@ionic-internal/component-api/v7/select-option/events.md';
 import Methods from '@ionic-internal/component-api/v7/select-option/methods.md';
@@ -10,33 +11,40 @@ import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
 
 <head>
   <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
-  <meta name="description" content="Select Optionとは？Select OptionはSelectの子要素で、定義された各オプションはSelectダイアログに渡され表示されます。" />
+  <meta
+    name="description"
+    content="Select Optionとは？Select OptionはSelectの子要素で、定義された各オプションはSelectダイアログに渡され表示されます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-セレクトオプションは、セレクトの子要素となるコンポーネントです。定義された各オプションは、Selectダイアログに渡され表示されます。
+セレクトオプションは、セレクトの子要素となるコンポーネントです。定義された各オプションは、Select ダイアログに渡され表示されます。
 
 使用例については、[Select](./select)のドキュメントを参照してください。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
index 29a5fa9e4e1..fe67f2b1615 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-select"
+title: 'ion-select'
 ---
+
 import Props from '@ionic-internal/component-api/v7/select/props.md';
 import Events from '@ionic-internal/component-api/v7/select/events.md';
 import Methods from '@ionic-internal/component-api/v7/select/methods.md';
@@ -10,23 +11,25 @@ import Slots from '@ionic-internal/component-api/v7/select/slots.md';
 
 <head>
   <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
-  <meta name="description" content="ion-selectは、選択された値（複数可）、またはプレースホルダー、ドロップダウンのアイコンによって表現されます。 selectをタップすると、選択しやすいリストを表示するダイアログボックスが表示されます。" />
+  <meta
+    name="description"
+    content="ion-selectは、選択された値（複数可）、またはプレースホルダー、ドロップダウンのアイコンによって表現されます。 selectをタップすると、選択しやすいリストを表示するダイアログボックスが表示されます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
+Select は、ネイティブの `<select>` 要素と同様に、オプションのセットからオプションを選択するためのフォームコントロールです。ユーザが select をタップすると、すべてのオプションを含むダイアログが、選択しやすい大きなリストで表示されます。
 
-Selectは、ネイティブの `<select>` 要素と同様に、オプションのセットからオプションを選択するためのフォームコントロールです。ユーザがselectをタップすると、すべてのオプションを含むダイアログが、選択しやすい大きなリストで表示されます。
-
-selectは、子要素 `<ion-select-option>` とともに使用する必要があります。子要素のオプションに`value`属性が指定されていない場合、そのtextが値として使用されます。
+select は、子要素 `<ion-select-option>` とともに使用する必要があります。子要素のオプションに`value`属性が指定されていない場合、その text が値として使用されます。
 
 `value` が `<ion-select>` にセットされている場合、オプションはその値に基づいて選択済みになります。
 
 ## 単一選択
 
-デフォルトでは、selectを使用すると、ユーザは1つのOptionだけを選択できます。Alertのインターフェースでは、Optionのリストがradio button形式で表示されます。action sheetインタフェースは、1つの値選択でのみ使用できます。selectコンポーネントの値は、選択したオプションの値の値を受け取ります。
+デフォルトでは、select を使用すると、ユーザは 1 つの Option だけを選択できます。Alert のインターフェースでは、Option のリストが radio button 形式で表示されます。action sheet インタフェースは、1 つの値選択でのみ使用できます。select コンポーネントの値は、選択したオプションの値の値を受け取ります。
 
 import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
 
@@ -34,7 +37,7 @@ import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-se
 
 ## インターフェイス
 
-デフォルトでは、select は [ion-alert](alert.md) を使ってAlertのオプションのオーバーレイを開きます。インターフェイスを変更して、[ion-action-sheet](action-sheet.md) または [ion-popover](popover.md) を使用するには、 `action-sheet` または `popover` を `interface` プロパティに渡します。各インタフェースの制限については、他のセクションを参照してください。
+デフォルトでは、select は [ion-alert](alert.md) を使って Alert のオプションのオーバーレイを開きます。インターフェイスを変更して、[ion-action-sheet](action-sheet.md) または [ion-popover](popover.md) を使用するには、 `action-sheet` または `popover` を `interface` プロパティに渡します。各インタフェースの制限については、他のセクションを参照してください。
 
 ### Action Sheet
 
@@ -50,7 +53,7 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde
 
 ## 複数選択
 
-`multiple` 属性を追加して選択すると、複数のOptionを選択できます。複数のOptionを選択できる場合は、checkbox形式のオプションのリストがAlertオーバーレイで表示されます。selectコンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。
+`multiple` 属性を追加して選択すると、複数の Option を選択できます。複数の Option を選択できる場合は、checkbox 形式のオプションのリストが Alert オーバーレイで表示されます。select コンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。
 
 Note: `action-sheet` と `popover` インターフェイスでは、複数選択は動作しません
 
@@ -66,11 +69,11 @@ import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/r
 
 <RespondingToInteractionExample />
 
-## Object値について
+## Object 値について
 
-選択した値にObjectを使用する場合、これらのObjectの識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的のObject値を持つ既存の値がselectにロードされたが、新しく取得されたselectオプションが異なるIDを持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。
+選択した値に Object を使用する場合、これらの Object の識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的の Object 値を持つ既存の値が select にロードされたが、新しく取得された select オプションが異なる ID を持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。
 
-デフォルトでは、selectはObjectの等価性(`===`)を使用して、オプションが選択されているかどうかを判断します。これは`compareWiths`プロパティにプロパティ名または関数を指定することで上書きできます。
+デフォルトでは、select は Object の等価性(`===`)を使用して、オプションが選択されているかどうかを判断します。これは`compareWiths`プロパティにプロパティ名または関数を指定することで上書きできます。
 
 ### Using compareWith
 
@@ -83,18 +86,17 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val
 import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';
 
 <ObjectValuesAndMultipleSelectionExample />
-  
 
 ## Label Placement
 
-Labelsは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+Labels は、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
 import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
 
 <LabelPlacement />
 
 ## Justification
-  
+
 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
 
 import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
@@ -103,7 +105,7 @@ import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
 
 ## Filled Selects
 
-Material Designでは、セレクトに塗りつぶしのスタイルが用意されています。セレクトの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+Material Design では、セレクトに塗りつぶしのスタイルが用意されています。セレクトの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
 `fill` スタイルはセレクトコンテナを視覚的に定義するため、`fill` を使用するセレクトは `ion-item` で使用すべきではありません。
 
@@ -111,11 +113,11 @@ import FillExample from '@site/static/usage/v7/select/fill/index.md';
 
 <FillExample />
 
-## SelectのButton
+## Select の Button
 
-alertはふたつのボタンをサポートしています: `Cancel` と `OK` です。それぞれのボタンは、 `cancelText` と `okText`  プロパティを使ってカスタマイズできます。
+alert はふたつのボタンをサポートしています: `Cancel` と `OK` です。それぞれのボタンは、 `cancelText` と `okText` プロパティを使ってカスタマイズできます。
 
-`action-sheet` と `popover` インタフェースには `OK` ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。`popover` インターフェースには`Cancel`ボタンがないので、backdropをクリックするとオーバーレイが閉じます。
+`action-sheet` と `popover` インタフェースには `OK` ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。`popover` インターフェースには`Cancel`ボタンがないので、backdrop をクリックするとオーバーレイが閉じます。
 
 import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.md';
 
@@ -135,13 +137,13 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/
 
 ## カスタマイズ
 
-Selectコンポーネントを構成する2つのユニットがあり、それぞれを別々にスタイルする必要があります。 `ion-select`要素は、ビュー上で選択された値（複数可）、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記の [インターフェース](#interfaces) セクションで定義されており、 `ion-select` をクリックすると開かれるダイアログです。インターフェースには、 `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。
+Select コンポーネントを構成する 2 つのユニットがあり、それぞれを別々にスタイルする必要があります。 `ion-select`要素は、ビュー上で選択された値（複数可）、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記の [インターフェース](#interfaces) セクションで定義されており、 `ion-select` をクリックすると開かれるダイアログです。インターフェースには、 `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。
 
 ### Select 要素のスタイリング
 
-前述の通り、`ion-select` 要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSSと[CSSカスタムプロパティ](#css-custom-properties)を組み合わせてスタイルを設定します。
+前述の通り、`ion-select` 要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSS と[CSS カスタムプロパティ](#css-custom-properties)を組み合わせてスタイルを設定します。
 
-また、必要な [ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part) に応じて、CSSのシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意のCSSプロパティをターゲットにすることができることに注意してください。
+また、必要な [ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part) に応じて、CSS のシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意の CSS プロパティをターゲットにすることができることに注意してください。
 
 import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.md';
 
@@ -155,11 +157,11 @@ import StylingSelectExample from '@site/static/usage/v7/select/customization/sty
 - [アクションシートのカスタマイズ](action-sheet.md#customization)
 - [ポップオーバーのカスタマイズ](popover.md#customization)
 
-ただし、Selectオプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、[Selectオプションのドキュメント](select-option.md)を参照してください。
+ただし、Select オプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、[Select オプションのドキュメント](select-option.md)を参照してください。
 
 ## Typeahead Component
 
-Typeaheadやオートコンプリートの機能は、既存のIonicコンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。
+Typeahead やオートコンプリートの機能は、既存の Ionic コンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。
 
 import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
 
@@ -186,19 +188,18 @@ interface SelectCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## Legacy Select Syntaxからの移行
+## Legacy Select Syntax からの移行
 
-Ionic 7.0では、よりシンプルなselect構文が導入されました。この新しい構文は、selectの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に1つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+Ionic 7.0 では、よりシンプルな select 構文が導入されました。この新しい構文は、select の設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
+開発者は、この移行を一度に 1 つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### 最新の構文の使い方
 
-最新の構文を使うには、2つのステップがあります。
+最新の構文を使うには、2 つのステップがあります。
 
-1. ion-label` を削除して、代わりに `ion-select` の `label` プロパティを使用します。ラベルの配置は `ion-select` の `labelPlacement` プロパティを使用して設定することができる。
-2. fill` と `shape` の使い方を `ion-item` から `ion-select` に移動します。
+1. ion-label`を削除して、代わりに`ion-select`の`label`プロパティを使用します。ラベルの配置は`ion-select`の`labelPlacement` プロパティを使用して設定することができる。
+2. fill`と`shape`の使い方を`ion-item`から`ion-select` に移動します。
 
 import Migration from '@site/static/usage/v7/select/migration/index.md';
 
@@ -206,22 +207,28 @@ import Migration from '@site/static/usage/v7/select/migration/index.md';
 
 ### レガシー構文の使用
 
-Ionicは、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、そのInputインスタンスでレガシー構文を使用するように強制できます。
+Ionic は、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、その Input インスタンスでレガシー構文を使用するように強制できます。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
index 4da94f4ed3f..10c87ecc9b9 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-skeleton-text"
+title: 'ion-skeleton-text'
 ---
+
 import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md';
 import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md';
 import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md';
@@ -10,16 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
 
 <head>
   <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
-  <meta name="description" content="ion-skeleton-text は、プレースホルダコンテンツをレンダリングするためのコンポーネントです。この要素は、ローディングテキストのフレームワークとして、指定された幅で灰色のブロックをレンダリングします。" />
+  <meta
+    name="description"
+    content="ion-skeleton-text は、プレースホルダコンテンツをレンダリングするためのコンポーネントです。この要素は、ローディングテキストのフレームワークとして、指定された幅で灰色のブロックをレンダリングします。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-
-Skeleton Textは、placeholderコンテンツをレンダリングするためのコンポーネントです。要素は、指定した幅でグレーのブロックをレンダリングします。
+Skeleton Text は、placeholder コンテンツをレンダリングするためのコンポーネントです。要素は、指定した幅でグレーのブロックをレンダリングします。
 
 ## 基本的な使い方
 
@@ -29,26 +31,32 @@ import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md';
 
 ## テーマ
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.md';
 
 <CSSProps />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
index 7d32a2ec0ad..e62e06ce2e3 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-spinner"
+title: 'ion-spinner'
 ---
+
 import Props from '@ionic-internal/component-api/v7/spinner/props.md';
 import Events from '@ionic-internal/component-api/v7/spinner/events.md';
 import Methods from '@ionic-internal/component-api/v7/spinner/methods.md';
@@ -10,16 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
 
 <head>
   <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
-  <meta name="description" content="ion-spinner コンポーネントは、アニメーションするさまざまな SVG スピナーを提供します。これらのアイコンは、アプリがロード中であることや、別の処理を実行していることを示し、待機させることができます。" />
+  <meta
+    name="description"
+    content="ion-spinner コンポーネントは、アニメーションするさまざまな SVG スピナーを提供します。これらのアイコンは、アプリがロード中であることや、別の処理を実行していることを示し、待機させることができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Spinnerコンポーネントには、さまざまなアニメーションつきのSVG Spinnerが用意されています。Spinnerは、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
-
+Spinner コンポーネントには、さまざまなアニメーションつきの SVG Spinner が用意されています。Spinner は、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
 
 ## 基本的な使い方
 
@@ -37,27 +39,32 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
index 74ddf3b1702..c9479aec6ce 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-split-pane"
+title: 'ion-split-pane'
 ---
 
 import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
@@ -11,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v7/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は、マルチビューのアプリレイアウトを作成する際に便利です。これにより、メニューなどのUI要素を、ビューポートの幅が広がるにつれて表示することができます。" />
+  <meta
+    name="description"
+    content="ion-split-paneは、マルチビューのアプリレイアウトを作成する際に便利です。これにより、メニューなどのUI要素を、ビューポートの幅が広がるにつれて表示することができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -19,14 +22,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 分割ペインは、マルチビューレイアウトを作成する際に便利です。
-メニューのようなUI要素は、分割されたペインで表示することができます。ビューポートの幅が大きくなるにつれて表示されます。
+メニューのような UI 要素は、分割されたペインで表示することができます。ビューポートの幅が大きくなるにつれて表示されます。
 
 デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。
 
 ## 基本的な使い方
 
 :::note
-このデモでは `when` プロパティを `'xs'` に設定し、分割ペインが常に表示されるようにしています。小さなビューポートで分割ペインを折りたたみたい場合は、Ionicアプリケーションにこの設定は必要ありません。詳しくは、[ブレークポイントの設定](#setting-breakpoints)を参照してください。
+このデモでは `when` プロパティを `'xs'` に設定し、分割ペインが常に表示されるようにしています。小さなビューポートで分割ペインを折りたたみたい場合は、Ionic アプリケーションにこの設定は必要ありません。詳しくは、[ブレークポイントの設定](#setting-breakpoints)を参照してください。
 :::
 
 import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
@@ -35,8 +38,7 @@ import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
 
 ## ブレイキング・ポイントを決める
 
-デフォルトでは、画面が992pxを超えると分割ペインが拡張表示されます。これをカスタマイズするには、 `when` プロパティにブレークポイントを渡します。`when` プロパティには、真偽値、有効なメディア・クエリー、またはIonicの事前定義サイズのいずれかを指定できます。
-
+デフォルトでは、画面が 992px を超えると分割ペインが拡張表示されます。これをカスタマイズするには、 `when` プロパティにブレークポイントを渡します。`when` プロパティには、真偽値、有効なメディア・クエリー、または Ionic の事前定義サイズのいずれかを指定できます。
 
 ```html
 <!-- can be "xs", "sm", "md", "lg", or "xl" -->
@@ -46,36 +48,42 @@ import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
 <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                      |
 
- | 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                      |
 ## テーマ
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md';
 
 <CSSProperties />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
index 62d6b90f0c7..cb396d18738 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-tab-bar"
+title: 'ion-tab-bar'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -13,18 +14,17 @@ import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
 
 <head>
   <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</title>
-  <meta name="description" content="tab barコンポーネントには、タブボタンのセットが含まれており、通信するためにはタブの内側にタブバーを用意する必要があります。使用方法とCSSカスタムプロパティについてはこちらをご覧ください。" />
+  <meta
+    name="description"
+    content="tab barコンポーネントには、タブボタンのセットが含まれており、通信するためにはタブの内側にタブバーを用意する必要があります。使用方法とCSSカスタムプロパティについてはこちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-TabBarは、[tab buttons](tab-button.md)のセットを含むUIコンポーネントです。各[tab](tab.md)と通信するには、[tabs](tabs.md)の内部にTabBarを設定する必要があります。
-
-
-
+TabBar は、[tab buttons](tab-button.md)のセットを含む UI コンポーネントです。各[tab](tab.md)と通信するには、[tabs](tabs.md)の内部に TabBar を設定する必要があります。
 
 ## 使い方
 
@@ -51,7 +51,6 @@ TabBarは、[tab buttons](tab-button.md)のセットを含むUIコンポーネ
 
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -78,7 +77,6 @@ TabBarは、[tab buttons](tab-button.md)のセットを含むUIコンポーネ
 
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -106,10 +104,8 @@ export const TabBarExample: React.FC = () => (
 );
 ```
 
-
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -117,7 +113,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-bar-example',
-  styleUrl: 'tab-bar-example.css'
+  styleUrl: 'tab-bar-example.css',
 })
 export class TabBarExample {
   render() {
@@ -140,16 +136,14 @@ export class TabBarExample {
             <ion-icon name="settings"></ion-icon>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>
+      </ion-tabs>,
     ];
   }
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -171,16 +165,16 @@ export class TabBarExample {
 </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 }
-  }
-});
+  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>
 ```
 
@@ -189,19 +183,25 @@ export default defineComponent({
 </Tabs>
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
index cb2c489accf..f1c8e020911 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-tab-button"
+title: 'ion-tab-button'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -11,20 +12,14 @@ import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md';
 import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポーネントです。tab buttonを使用すると、iconとlabelのレイアウトを指定し、[tab view](tab.md)に接続できます。
+tab button は、[tab bar](tab-bar.md)の内部に配置される UI コンポーネントです。tab button を使用すると、icon と label のレイアウトを指定し、[tab view](tab.md)に接続できます。
 
 タブの設定の詳細については、[tabs documentation](tabs.md)を参照してください。
 
-
-
-
 ## 使い方
 
 <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' }]}>
@@ -58,10 +53,8 @@ tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポー
 </ion-tabs>
 ```
 
-
 </TabItem>
 
-
 <TabItem value="javascript">
 
 ```html
@@ -108,10 +101,8 @@ tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポー
 </ion-tabs>
 ```
 
-
 </TabItem>
 
-
 <TabItem value="react">
 
 ```tsx
@@ -149,10 +140,8 @@ export const TabButtonExample: React.FC = () => (
 );
 ```
 
-
 </TabItem>
 
-
 <TabItem value="stencil">
 
 ```tsx
@@ -160,7 +149,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'tab-button-example',
-  styleUrl: 'tab-button-example.css'
+  styleUrl: 'tab-button-example.css',
 })
 export class TabButtonExample {
   render() {
@@ -205,16 +194,14 @@ export class TabButtonExample {
             <ion-label>About</ion-label>
           </ion-tab-button>
         </ion-tab-bar>
-      </ion-tabs>
+      </ion-tabs>,
     ];
   }
 }
 ```
 
-
 </TabItem>
 
-
 <TabItem value="vue">
 
 ```html
@@ -246,50 +233,49 @@ export class TabButtonExample {
 </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 }
-  }
-});
+  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>
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
index 5bbda670ff4..2688f18adb2 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-tab"
+title: 'ion-tab'
 ---
 
 import Props from '@ionic-internal/component-api/v7/tab/props.md';
@@ -11,39 +11,44 @@ import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
 
 <head>
   <title>ion-tab - Ionic Framework Application Component</title>
-  <meta name="description" content="ion-tabは、タブの子コンポーネントです。各ion-tabは、アプリケーションまたは単一のビューのトップレベルのナビゲーションスタックを含むことができます。詳しくは、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-tabは、タブの子コンポーネントです。各ion-tabは、アプリケーションまたは単一のビューのトップレベルのナビゲーションスタックを含むことができます。詳しくは、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 タブコンポーネントは、[tabs](tabs.md) の子コンポーネントです。各タブには、アプリまたは単一のビューのトップレベルのナビゲーション スタックを含めることができます。アプリには多くのタブがあり、それぞれが独立したナビゲーションを持つことができます。
 
 :::note
- Note: このコンポーネントは、バニラまたはステンシルJavaScriptプロジェクトでのみ使用する必要があります。Angular、React、Vue のアプリでは、タブコンポーネントを宣言するために `ion-tab` を使用する必要はありません。
+Note: このコンポーネントは、バニラまたはステンシル JavaScript プロジェクトでのみ使用する必要があります。Angular、React、Vue のアプリでは、タブコンポーネントを宣言するために `ion-tab` を使用する必要はありません。
 :::
 
-
 詳しい設定方法は [tabs documentation](tabs.md) をご覧ください。
 
-
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+
+<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
index 1e39a3f8696..bd017829c60 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-tabs"
+title: 'ion-tabs'
 ---
+
 import Props from '@ionic-internal/component-api/v7/tabs/props.md';
 import Events from '@ionic-internal/component-api/v7/tabs/events.md';
 import Methods from '@ionic-internal/component-api/v7/tabs/methods.md';
@@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
 
 <head>
   <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
-  <meta name="description" content="Tabsは、タブベースのナビゲーションを実装するためのトップレベルのコンポーネントです。イオンタブはスタイリングを持たず、ネイティブアプリのように動作するナビゲーションのルーター出口として機能します。" />
+  <meta
+    name="description"
+    content="Tabsは、タブベースのナビゲーションを実装するためのトップレベルのコンポーネントです。イオンタブはスタイリングを持たず、ネイティブアプリのように動作するナビゲーションのルーター出口として機能します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -28,13 +32,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 :::note Framework Support
 
-Angular、React、Vueで `ion-tabs` を使用するには、 `ion-router-outlet` または `ion-nav` コンポーネントを使用する必要があります。
+Angular、React、Vue で `ion-tabs` を使用するには、 `ion-router-outlet` または `ion-nav` コンポーネントを使用する必要があります。
 
 :::
 
 ## ルーターとの併用
 
-タブはIonicルーターと一緒に使うことで、タブベースのナビゲーションを実装することができます。タブバーとアクティブなタブは、urlに基づいて自動的に解決されます。これはタブナビゲーションで最も一般的なパターンです。
+タブは Ionic ルーターと一緒に使うことで、タブベースのナビゲーションを実装することができます。タブバーとアクティブなタブは、url に基づいて自動的に解決されます。これはタブナビゲーションで最も一般的なパターンです。
 
 import Router from '@site/static/usage/v7/tabs/router/index.md';
 
@@ -42,11 +46,10 @@ import Router from '@site/static/usage/v7/tabs/router/index.md';
 
 :::tip Best Practices
 
-Ionicでは、タブを使ったルーティングパターンのベストプラクティスに関するガイドを用意しています。 Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
+Ionic では、タブを使ったルーティングパターンのベストプラクティスに関するガイドを用意しています。 Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
 
 :::
 
-
 ## Interfaces
 
 ### TabsCustomEvent
@@ -61,19 +64,25 @@ interface TabsCustomEvent extends CustomEvent {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
index 96146e07b2a..f0202cf3dea 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-text"
+title: 'ion-text'
 ---
+
 import Props from '@ionic-internal/component-api/v7/text/props.md';
 import Events from '@ionic-internal/component-api/v7/text/events.md';
 import Methods from '@ionic-internal/component-api/v7/text/methods.md';
@@ -10,14 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/text/slots.md';
 
 <head>
   <title>ion-text: Ionic App Component to Style or Change Text Color</title>
-  <meta name="description" content="ion-textは、任意の要素のテキストカラーをスタイルするために使用できるシンプルなアプリコンポーネントです。テキスト色を変更するために、ion-textがどのように要素をラップしているかを説明します。" />
+  <meta
+    name="description"
+    content="ion-textは、任意の要素のテキストカラーをスタイルするために使用できるシンプルなアプリコンポーネントです。テキスト色を変更するために、ion-textがどのように要素をラップしているかを説明します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-textコンポーネントは、任意の要素のテキストカラーのスタイル設定に使用できる単純なコンポーネントです。テキストカラーを変更するには、要素を `ion-text` 要素で囲む必要があります。
+text コンポーネントは、任意の要素のテキストカラーのスタイル設定に使用できる単純なコンポーネントです。テキストカラーを変更するには、要素を `ion-text` 要素で囲む必要があります。
 
 ## 基本的な使い方
 
@@ -25,25 +29,30 @@ import Basic from '@site/static/usage/v7/text/basic/index.md';
 
 <Basic />
 
-
 ## テーマ
 
-テキストコンポーネントは、Ionicが提供するデフォルトの[colors](../../docs/theming/colors)のいずれかを変更することでカスタマイズすることが可能です。
+テキストコンポーネントは、Ionic が提供するデフォルトの[colors](../../docs/theming/colors)のいずれかを変更することでカスタマイズすることが可能です。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
index 27c74dc86b0..67f4fd0384d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-textarea"
+title: 'ion-textarea'
 ---
+
 import Props from '@ionic-internal/component-api/v7/textarea/props.md';
 import Events from '@ionic-internal/component-api/v7/textarea/events.md';
 import Methods from '@ionic-internal/component-api/v7/textarea/methods.md';
@@ -10,18 +11,21 @@ import Slots from '@ionic-internal/component-api/v7/textarea/slots.md';
 
 <head>
   <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
-  <meta name="description" content="Textareaは複数行の入力のためのものです。このコンポーネントは、Ionicのプロパティに加えて、ネイティブのtextareaの属性を受け付けます。使用方法とCSS要素については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="Textareaは複数行の入力のためのものです。このコンポーネントは、Ionicのプロパティに加えて、ネイティブのtextareaの属性を受け付けます。使用方法とCSS要素については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-textareaコンポーネントは、複数行のテキスト入力に使用されます。ネイティブの textarea 要素は、コンポーネントの内部でレンダリングされます。ネイティブのtextareaを制御することで、textareaコンポーネントのユーザーエクスペリエンスとインタラクティブ性を向上させることができます。
+textarea コンポーネントは、複数行のテキスト入力に使用されます。ネイティブの textarea 要素は、コンポーネントの内部でレンダリングされます。ネイティブの textarea を制御することで、textarea コンポーネントのユーザーエクスペリエンスとインタラクティブ性を向上させることができます。
 
-ネイティブのtextarea要素とは異なり、Ionicのtextareaは要素内部のコンテンツからその値を読み込むことをサポートしていません。textareaの値は`value`属性で設定しなくてはなりません。
+ネイティブの textarea 要素とは異なり、Ionic の textarea は要素内部のコンテンツからその値を読み込むことをサポートしていません。textarea の値は`value`属性で設定しなくてはなりません。
 
-textareaコンポーネントはIonicのプロパティに加えて [ネイティブのtextareaの属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) に対応します。
+textarea コンポーネントは Ionic のプロパティに加えて [ネイティブの textarea の属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) に対応します。
 
 ## 基本的な使い方
 
@@ -39,7 +43,7 @@ import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
 
 ## Filled Textareas
 
-Material Designでは、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
+Material Design では、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
 `fill` スタイルはテキストエリアのコンテナを視覚的に定義するため、`fill` を使用するテキストエリアは `ion-item` で使用すべきではありません。
 
@@ -51,7 +55,7 @@ import Fill from '@site/static/usage/v7/textarea/fill/index.md';
 
 ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使って textarea 内で使用することができます。エラーテキストは、`ion-invalid` と `ion-touched` クラスが `ion-textarea` に追加されていない限り表示されません。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。
 
-Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
+Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vue では、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
 
 import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
 
@@ -59,7 +63,7 @@ import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
 
 ## Textarea Counter
 
-textareaカウンターは、textareaの下に表示されるテキストで、textareaが受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
+textarea カウンターは、textarea の下に表示されるテキストで、textarea が受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
 
 import Counter from '@site/static/usage/v7/textarea/counter/index.md';
 
@@ -81,16 +85,15 @@ import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/
 
 <ClearOnEditPlayground />
 
-## レガシーtextarea構文からの移行
-
-Ionic 7.0では、よりシンプルなtextareaの構文が導入されました。この新しい構文は、textareaを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。
+## レガシー textarea 構文からの移行
 
-開発者はこの移行を一度に1つのtextareaで行うことができます。開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+Ionic 7.0 では、よりシンプルな textarea の構文が導入されました。この新しい構文は、textarea を設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。
 
+開発者はこの移行を一度に 1 つの textarea で行うことができます。開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
 ### 最新の構文の使い方
 
-最新の構文を使うには、3つのステップがあります。
+最新の構文を使うには、3 つのステップがあります。
 
 1. `ion-label` を削除して、代わりに `ion-textarea` の `label` プロパティを使用します。ラベルの配置は `ion-textarea` の `labelPlacement` プロパティを使用して設定することができる。
 2. テキストエリア固有のプロパティを `ion-item` から `ion-textarea` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれます。
@@ -102,7 +105,7 @@ import Migration from '@site/static/usage/v7/textarea/migration/index.md';
 
 ### レガシー構文の使用
 
-Ionicは、アプリが最新のtextarea構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-textarea`の`legacy`プロパティを`true`に設定することで、そのインスタンスのtextareaがレガシー構文を使用するように強制できます。
+Ionic は、アプリが最新の textarea 構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-textarea`の`legacy`プロパティを`true`に設定することで、そのインスタンスの textarea がレガシー構文を使用するように強制できます。
 
 ## テーマ
 
@@ -132,19 +135,25 @@ interface TextareaCustomEvent extends CustomEvent {
 ```
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
index 74a5543b6e4..ad72299341d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
@@ -1,5 +1,5 @@
 ---
-title: "ion-thumbnail"
+title: 'ion-thumbnail'
 ---
 
 import Props from '@ionic-internal/component-api/v7/thumbnail/props.md';
@@ -11,16 +11,19 @@ import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
 
 <head>
   <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
-  <meta name="description" content="ion-thumbnailコンポーネントは、画像やアイコンを包み込み、画像のレイアウト表示や原寸大のプレビューに使用することができます。" />
+  <meta
+    name="description"
+    content="ion-thumbnailコンポーネントは、画像やアイコンを包み込み、画像のレイアウト表示や原寸大のプレビューに使用することができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-Thumbnailsは、通常、画像またはアイコンをラップする四角形のコンポーネントです。これを使用すると、大きな画像のグループを簡単に表示したり、フルサイズのイメージのプレビューを表示したりできます。
+Thumbnails は、通常、画像またはアイコンをラップする四角形のコンポーネントです。これを使用すると、大きな画像のグループを簡単に表示したり、フルサイズのイメージのプレビューを表示したりできます。
 
-Thumbnailsは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-item` の内部に配置すると、Thumbnailsのサイズが親コンポーネントに合わせて変更されます。Thumbnailsをアイテムの左側または右側に配置するには、slotをそれぞれ `start` または `end` に設定します。
+Thumbnails は、単独で使用することも、任意の要素の内部で使用することもできます。`ion-item` の内部に配置すると、Thumbnails のサイズが親コンポーネントに合わせて変更されます。Thumbnails をアイテムの左側または右側に配置するには、slot をそれぞれ `start` または `end` に設定します。
 
 ## 基本的な使い方
 
@@ -36,26 +39,32 @@ import Item from '@site/static/usage/v7/thumbnail/item/index.md';
 
 ## テーマ
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.md';
 
 <CSSProps />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
index d564830d946..e253860ee1e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-title"
+title: 'ion-title'
 ---
+
 import Props from '@ionic-internal/component-api/v7/title/props.md';
 import Events from '@ionic-internal/component-api/v7/title/events.md';
 import Methods from '@ionic-internal/component-api/v7/title/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/title/slots.md';
 
 <head>
   <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
-  <meta name="description" content="ion-titleは、ツールバーのタイトルを設定するコンポーネントです。Ionic Frameworkアプリのtitleとcollapsible titleコンポーネントの詳細と使用方法については、こちらをご覧ください。" />
+  <meta
+    name="description"
+    content="ion-titleは、ツールバーのタイトルを設定するコンポーネントです。Ionic Frameworkアプリのtitleとcollapsible titleコンポーネントの詳細と使用方法については、こちらをご覧ください。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-Titleは、[ツールバー](./toolbar)のタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。
+Title は、[ツールバー](./toolbar)のタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。
 
 ## Basic
 
@@ -44,7 +47,6 @@ import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large
 
 [buttons](./buttons.md)コンポーネントは、[`collapse`](./buttons.md#collapse)プロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。
 
-
 import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
 
 <CollapsibleLargeTitleButtons />
@@ -55,30 +57,36 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsibl
 
 デフォルトでは、標準タイトルを含むツールバーは `opacity: 0` を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。
 
-標準タイトルのあるツールバーの背景色は、CSS変数に `--background` を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。
+標準タイトルのあるツールバーの背景色は、CSS 変数に `--background` を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。
 
 ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.md';
 
 <CSSCustomProperties />
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
index 18c6117e269..3f465b3b595 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-toast"
+title: 'ion-toast'
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -13,7 +14,10 @@ import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
 
 <head>
   <title>ion-toast Component: A Dismissible App Notification Alert</title>
-  <meta name="description" content="ion-toast コンポーネントは、システムメッセージやフィードバックを表示するアプリの通知です。トーストのアラートはコンテンツの上に表示され、インタラクションを再開するには解除されます。" />
+  <meta
+    name="description"
+    content="ion-toast コンポーネントは、システムメッセージやフィードバックを表示するアプリの通知です。トーストのアラートはコンテンツの上に表示され、インタラクションを再開するには解除されます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -22,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 トーストは、最近のアプリケーションでよく使われる小さな通知です。操作に関するフィードバックを提供したり、システムメッセージを表示したりするために使用されます。トーストは、アプリケーションのコンテンツの上に表示され、アプリケーションによって解除されると、アプリケーションとの対話を再開することができます。
 
-## インラインToasts (推奨)
+## インライン Toasts (推奨)
 
 `ion-toast`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。
 
@@ -138,32 +142,38 @@ interface ToastOptions {
 
 `aria-live` を指定すると、トーストの内容が更新されたときにスクリーンリーダがアナウンスするようになります。しかし、この属性は `'polite'` に設定されているため、スクリーン・リーダーは通常、現在のタスクを中断することはありません。開発者は `htmlAttributes` プロパティを使用して `aria-live` を `'assertive'` に設定することで、この動作をカスタマイズすることができます。これにより、トーストが更新されると、スクリーン・リーダーはすぐにユーザーに通知し、それまでの更新を中断させる可能性があります。
 
-また、`aria-atomic="true"`を設定すると、トースト全体を1つのユニットとしてアナウンスすることができます。これはトーストのコンテンツを動的に更新するときに便利で、スクリーン・リーダーが変更されたコンテンツのみをアナウンスすることを防ぎます。
+また、`aria-atomic="true"`を設定すると、トースト全体を 1 つのユニットとしてアナウンスすることができます。これはトーストのコンテンツを動的に更新するときに便利で、スクリーン・リーダーが変更されたコンテンツのみをアナウンスすることを防ぎます。
 
 ### ヒント
 
 これは完全なリストではありませんが、トーストを使用する際に従うべきガイドラインをいくつか紹介します。
 
-* トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss" ボタンがあるのは良いですが、タイムアウト後にトーストが自動的に終了するようにします。通知のためにユーザーの操作が必要な場合は、代わりに [ion-alert](./alert) を使用することを検討してください。
+- トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss" ボタンがあるのは良いですが、タイムアウト後にトーストが自動的に終了するようにします。通知のためにユーザーの操作が必要な場合は、代わりに [ion-alert](./alert) を使用することを検討してください。
 
-* 複数のトーストを連続して開くことは避けてください。もし `aria-live` が `'assertive'` に設定されている場合、スクリーンリーダーは新しいトーストをアナウンスするために現在のタスクの読み込みを中断し、前のトーストのコンテキストが失われる可能性があります。
+- 複数のトーストを連続して開くことは避けてください。もし `aria-live` が `'assertive'` に設定されている場合、スクリーンリーダーは新しいトーストをアナウンスするために現在のタスクの読み込みを中断し、前のトーストのコンテキストが失われる可能性があります。
 
-* 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
+- 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
 
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
index 2d9f83b747b..89f0424fc2e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-toggle"
+title: 'ion-toggle'
 ---
+
 import Props from '@ionic-internal/component-api/v7/toggle/props.md';
 import Events from '@ionic-internal/component-api/v7/toggle/events.md';
 import Methods from '@ionic-internal/component-api/v7/toggle/methods.md';
@@ -10,15 +11,17 @@ import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
 
 <head>
   <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
-  <meta name="description" content="Toggleは、1つのオプションの状態を変更します。ion-toggleを使用して、アプリケーションのオン/オフを切り替えることができるカスタマイズ可能なトグルボタンを作成します。" />
+  <meta
+    name="description"
+    content="Toggleは、1つのオプションの状態を変更します。ion-toggleを使用して、アプリケーションのオン/オフを切り替えることができるカスタマイズ可能なトグルボタンを作成します。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
-トグルは、1つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、`checked`プロパティを設定することで、プログラムによってチェックすることも可能です。
+トグルは、1 つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、`checked`プロパティを設定することで、プログラムによってチェックすることも可能です。
 
 ## 基本的な使い方
 
@@ -26,7 +29,6 @@ import Basic from '@site/static/usage/v7/toggle/basic/index.md';
 
 <Basic />
 
-
 ## On / Off Labels
 
 トグルは、`enableOnOffLabels`プロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。
@@ -35,7 +37,6 @@ import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
 
 <OnOff />
 
-
 ## Toggles in a List
 
 [アイテム](./item)と[リスト](./list)コンポーネントを使用すると、リストビューでトグルを使用することも可能です。
@@ -44,7 +45,6 @@ import List from '@site/static/usage/v7/toggle/list/index.md';
 
 <List />
 
-
 ## Label Placement
 
 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
@@ -53,7 +53,6 @@ import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.m
 
 <LabelPlacement />
 
-
 ## Justification
 
 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
@@ -62,7 +61,6 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
 
 <Justify />
 
-
 ## テーマ
 
 ### Colors
@@ -71,9 +69,9 @@ import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
-CSSカスタムプロパティは、標準CSSと組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの `width` と `height` を直接変更してトラックのサイズを変更し、`--handle-width` と `--handle-height` カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。
+CSS カスタムプロパティは、標準 CSS と組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの `width` と `height` を直接変更してトラックのサイズを変更し、`--handle-width` と `--handle-height` カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。
 
 import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.md';
 
@@ -81,7 +79,7 @@ import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.
 
 ### CSS Shadow Parts
 
-トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのようなCSSプロパティでもスタイルを設定でき、CSSカスタムプロパティと組み合わせることも可能です。
+トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのような CSS プロパティでもスタイルを設定でき、CSS カスタムプロパティと組み合わせることも可能です。
 
 import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.md';
 
@@ -89,7 +87,7 @@ import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/inde
 
 ## レガシーなトグル構文からの移行
 
-Ionic 7.0では、よりシンプルなトグル構文が導入されました。この新しい構文は、トグルの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+Ionic 7.0 では、よりシンプルなトグル構文が導入されました。この新しい構文は、トグルの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
 開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
 
@@ -100,7 +98,6 @@ Ionic 7.0では、よりシンプルなトグル構文が導入されました
 import Migration from '@site/static/usage/v7/toggle/migration/index.md';
 
 <Migration />
-  
 
 :::note
 Ionic の過去のバージョンでは、`ion-toggle` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-toggle` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-toggle`が正しく機能するためには、`ion-item`はもはや必須ではありません。
@@ -108,7 +105,7 @@ Ionic の過去のバージョンでは、`ion-toggle` が正しく機能する
 
 ### レガシー構文の使用
 
-Ionicは、アプリが最新のトグル構文を使用しているかどうかを検出するためにヒューリスティックを使用しています。場合によっては、レガシー構文を使い続けることが望ましいこともあります。開発者は、`ion-toggle`の`legacy`プロパティを`true`に設定することで、そのトグルのインスタンスがレガシー構文を使用するように強制できます。
+Ionic は、アプリが最新のトグル構文を使用しているかどうかを検出するためにヒューリスティックを使用しています。場合によっては、レガシー構文を使い続けることが望ましいこともあります。開発者は、`ion-toggle`の`legacy`プロパティを`true`に設定することで、そのトグルのインスタンスがレガシー構文を使用するように強制できます。
 
 ## Interfaces
 
@@ -132,21 +129,26 @@ interface ToggleCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
index ce3cc779294..cbe7547ffda 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
@@ -1,6 +1,7 @@
 ---
-title: "ion-toolbar"
+title: 'ion-toolbar'
 ---
+
 import Props from '@ionic-internal/component-api/v7/toolbar/props.md';
 import Events from '@ionic-internal/component-api/v7/toolbar/events.md';
 import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md';
@@ -10,19 +11,20 @@ import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
 
 <head>
   <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
-  <meta name="description" content="Ion-toolbar コンポーネントは、アプリのメニューにあるツールバーボタンをカスタマイズすることができます。コンテンツの上下に固定ツールバーを追加したり、コンテンツと一緒にスクロールするフルスクリーンを使用することができます。" />
+  <meta
+    name="description"
+    content="Ion-toolbar コンポーネントは、アプリのメニューにあるツールバーボタンをカスタマイズすることができます。コンテンツの上下に固定ツールバーを追加したり、コンテンツと一緒にスクロールするフルスクリーンを使用することができます。"
+  />
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-
 ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。コンテンツ](./content)内に配置された場合、ツールバーはコンテンツと一緒にスクロールします。
 
 ツールバーには、タイトル、ボタン、アイコン、戻るボタン、メニューボタン、検索バー、セグメント、プログレスバーなど、さまざまなコンポーネントを含めることができます。
 
-
 ## 基本的な使い方
 
 ツールバーを正しく配置するために、[header](./header)または[footer](./footer)の内部に配置することをお勧めします。ツールバーをヘッダーに配置すると、コンテンツの上部に固定されて表示されます。フッターに配置された場合は、下側に固定されて表示されます。フルスクリーンのコンテンツは、ヘッダーやフッターにあるツールバーの後ろでスクロールします。 [title](./title) コンポーネントを使用すると、ツールバーの内側にテキストを表示することができます。
@@ -31,7 +33,6 @@ import Basic from '@site/static/usage/v7/toolbar/basic/index.md';
 
 <Basic />
 
-
 ## Buttons in Toolbars
 
 ツールバーに配置するボタンは、[buttons](./buttons)コンポーネントの内部に配置する必要があります。ボタンコンポーネントは、名前付きの [スロット](#slots) を使ってツールバーの内側に配置することができます。スロットの `"primary"` と `"secondary"` は `ios` モードと `md` モードで異なる動作をします。
@@ -42,7 +43,6 @@ import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
 
 <Buttons />
 
-
 ## Searchbars in Toolbars
 
 [searchbar](./searchbar)は、ツールバーの中に配置することで、コンテンツを検索することができます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さを完全に占有します。
@@ -51,16 +51,14 @@ import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 <Searchbars />
 
-
 ## ツールバーのセグメント
 
-[セグメント](./segment)は、一般的にツールバーで、同じページ内の2つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。
+[セグメント](./segment)は、一般的にツールバーで、同じページ内の 2 つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。
 
 import Segments from '@site/static/usage/v7/toolbar/segments/index.md';
 
 <Segments />
 
-
 ## ツールバーのプログレスバー
 
 [プログレスバー](./progress-bar)は、アプリで進行中のプロセスを示すローディングインジケータとして使用されます。プログレスバーは、ツールバーの下部に配置されるため、ツールバーの中の他のコンポーネントと一緒に配置することができます。
@@ -69,7 +67,6 @@ import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
 
 <ProgressBars />
 
-
 ## テーマ
 
 ### Colors
@@ -78,32 +75,36 @@ import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.md';
 
 <CSSProps />
 
-
 ## Borders
 
 `md` モードでは、`<ion-header>` は下部にボックスシャドウを、`<ion-footer>` は上部にボックスシャドウを表示します。 `ios` モードでは、`<ion-header>` の下部にボーダーが、`<ion-footer>` の上部にボーダーが表示されます。
 
-
 ## プロパティ
+
 <Props />
 
 ## イベント
+
 <Events />
 
 ## メソッド
+
 <Methods />
 
 ## CSS Shadow Parts
+
 <Parts />
 
-## CSSカスタムプロパティ
+## CSS カスタムプロパティ
+
 <CustomProps />
 
 ## Slots
+
 <Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
index fac64336ea2..b9ceb42ea2c 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
@@ -11,11 +11,11 @@ sidebar_label: 概要
   />
 </head>
 
-The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionicアプリを開発する時に頼りになるツールです。
+The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionic アプリを開発する時に頼りになるツールです。
 
 ## インストール
 
-Ionic CLI はnpmでグローバルにインストールできます:
+Ionic CLI は npm でグローバルにインストールできます:
 
 ```shell
 npm install -g @ionic/cli
@@ -23,7 +23,7 @@ npm install -g @ionic/cli
 
 ## Help
 
-Ionic CLIでは `--help` フラグをつけることでコマンドのドキュメントを利用できます。
+Ionic CLI では `--help` フラグをつけることでコマンドのドキュメントを利用できます。
 
 ```shell
 $ ionic --help
@@ -41,14 +41,14 @@ $ ionic <command> <subcommand> --help
 
 ## 構成
 
-Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新のNode LTSが推奨です。Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">Github repository</a>.
+Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新の Node LTS が推奨です。Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">Github repository</a>.
 
 ## トラブルシューティング
 
-Ionic CLIの問題をトラブルシューティングするには、以下の方法が役立ちます:
+Ionic CLI の問題をトラブルシューティングするには、以下の方法が役立ちます:
 
-- 最新バージョンのIonic CLIがインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。
-- 最新のNode LTSがインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setupを参照してください。
+- 最新バージョンの Ionic CLI がインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。
+- 最新の Node LTS がインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setup を参照してください。
 - `verbose` フラグは、デバッグメッセージを表示し、問題を絞り込むことができます。
 - 接続の問題は、プロキシの設定が適切でないことが原因である可能性があります。リクエストプロキシの設定については、[Using a Proxy](/docs/cli/using-a-proxy) を参照してください。
-- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLIが再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI環境変数](/docs/cli/configuration#environment-variables)で設定します。
+- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLI が再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI 環境変数](/docs/cli/configuration#environment-variables)で設定します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
index 947eb20f6b0..293fc0bc9bd 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
@@ -12,13 +12,13 @@ title: 設定
 
 ## ファイル
 
-設定された値はJSONファイルに格納されます。Ionic CLIは、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。
+設定された値は JSON ファイルに格納されます。Ionic CLI は、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。
 
-CLIには、プロジェクト設定ファイルおよびグローバルCLI設定ファイルから設定値を設定およびprintfするためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。
+CLI には、プロジェクト設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定および printf するためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。
 
 ### プロジェクト設定ファイル
 
-各Ionicプロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。
+各 Ionic プロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。
 
 ```json
 {
@@ -49,7 +49,7 @@ CLIには、プロジェクト設定ファイルおよびグローバルCLI設
 
 ## 環境変数
 
-CLIは、次の環境変数を検索します:
+CLI は、次の環境変数を検索します:
 
 - `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).
@@ -57,7 +57,7 @@ CLIは、次の環境変数を検索します:
 
 ## Flags
 
-CLI flagsは、CLIコマンドの動作を変更するグローバルオプションです。
+CLI flags は、CLI コマンドの動作を変更するグローバルオプションです。
 
 - `--help`: Instead of running the command, view its help page.
 - `--verbose`: Show all log messages for debugging purposes.
@@ -67,15 +67,15 @@ CLI flagsは、CLIコマンドの動作を変更するグローバルオプシ
 
 ## Hooks
 
-CLIは、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLIにフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。:
+CLI は、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLI にフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。:
 
-* `ionic:serve:before`: dev server が start される前に実行されます
-* `ionic:serve:after`: dev server が終了される前に実行されます
-* `ionic:build:before`: web assetの構築がはじまる前に実行されます
-* `ionic:build:after`: web assetの構築が終了して実行されます。
-* `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed
-* `ionic:capacitor:build:before` : executed on capacitor build before capacitor open is executed
-* `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync
+- `ionic:serve:before`: dev server が start される前に実行されます
+- `ionic:serve:after`: dev server が終了される前に実行されます
+- `ionic:build:before`: web asset の構築がはじまる前に実行されます
+- `ionic:build:after`: web asset の構築が終了して実行されます。
+- `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed
+- `ionic:capacitor:build:before` : executed on 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_`.
 
@@ -93,7 +93,7 @@ IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=ionic-starter-app
 IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false
 ```
 
-Hooksは `ionic.config.json` で定義することもできます。プロジェクト内でHooksオブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値はJavaScriptファイルへのパスまたはパスの配列です。
+Hooks は `ionic.config.json` で定義することもできます。プロジェクト内で Hooks オブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値は JavaScript ファイルへのパスまたはパスの配列です。
 
 次の例では、ファイルは `ionic:build:before` フックでインポートされ、実行されます。
 
@@ -124,7 +124,7 @@ module.exports = function (ctx) {
 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
-Ionic CLIは multi-app 構成セットアップをサポートしており、複数のIonicアプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。
+Ionic CLI は multi-app 構成セットアップをサポートしており、複数の Ionic アプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。
 
 If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples.
 :::
@@ -217,7 +217,7 @@ $ ionic init
 
 ## 詳細設定
 
-### Buildの上書き
+### 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.
 
@@ -240,4 +240,4 @@ If these variables are set in the environment, `ionic cordova build ios` will us
 
 ### 遠隔計測について
 
-CLIからIonicに使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。
+CLI から Ionic に使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
index 23703954a9e..4d2d160ee78 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
@@ -64,8 +64,9 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS.
 
 For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:
+
 ```shell
 ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
 ```
 
-Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
\ No newline at end of file
+Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
index 57680535f4f..76fe15db241 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
@@ -16,7 +16,7 @@ $ export HTTPS_PROXY="https://proxy.example.com:8888" # also used by npm
 $ export IONIC_HTTP_PROXY="http://proxy.example.com:8888"
 ```
 
-### 他のCLI
+### 他の CLI
 
 Each CLI that you use must be configured separately to proxy network requests.
 
@@ -32,7 +32,7 @@ npm config set proxy http://proxy.company.com:8888
 git config --global http.proxy http://proxy.example.com:8888
 ```
 
-### SSLの設定
+### SSL の設定
 
 The Ionic CLI can be configured to use various SSL settings for HTTP requests.
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
index 90cd49769ae..5fae65c456e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionicには、modals、popups、cardsなど、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。
+Ionic アプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionic には、modals、popups、cards など、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。
 
 <intro-end />
 
@@ -37,13 +37,13 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Button" href="api/button" icon="/icons/component-button-icon.png">
-  <p>Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。</p>
+  <p>
+    Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。
+  </p>
 </DocsCard>
 
 <DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
-  <p>
-    Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。
-  </p>
+  <p>Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。</p>
 </DocsCard>
 
 <DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
@@ -59,11 +59,15 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Date & Time Pickers" href="api/datetime" icon="/icons/component-datetimepicker-icon.png">
-  <p>日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。</p>
+  <p>
+    日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。
+  </p>
 </DocsCard>
 
 <DocsCard header="Floating Action Button" href="api/fab" icon="/icons/component-fab-icon.png">
-  <p>フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。</p>
+  <p>
+    フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。
+  </p>
 </DocsCard>
 
 <DocsCard header="Icons" href="api/icon" img="/icons/feature-component-icons-icon.png">
@@ -95,11 +99,15 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Menu" href="api/menu" icon="/icons/component-menu-icon.png">
-  <p>Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。</p>
+  <p>
+    Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。
+  </p>
 </DocsCard>
 
 <DocsCard header="Modal" href="api/modal" icon="/icons/component-modal-icon.png">
-  <p>Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。</p>
+  <p>
+    Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。
+  </p>
 </DocsCard>
 
 <DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
@@ -139,7 +147,9 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成
 </DocsCard>
 
 <DocsCard header="Tabs" href="api/tabs" img="/icons/feature-component-tabs-icon.png">
-  <p>Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。</p>
+  <p>
+    Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。
+  </p>
 </DocsCard>
 
 <DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
index 4564e31fa34..cfa520f8ee9 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
@@ -4,19 +4,19 @@ disableHtmlPreviews: true
 
 # クロスプラットフォーム
 
-Ionicは、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。
+Ionic は、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。
 
-## ハードウェアAPI
+## ハードウェア API
 
-ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するためのAPIを呼び出すことがよくあります。これらのAPI呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionicにはこの問題に対応するためのいくつかの方法があります。
+ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するための API を呼び出すことがよくあります。これらの API 呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionic にはこの問題に対応するためのいくつかの方法があります。
 
 ### Ionic Native
 
-[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったりCordovaプラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、アプリがクラッシュすることなく動き続けるということです。
+[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったり Cordova プラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、 アプリがクラッシュすることなく動き続けるということです。
 
 ### プラットフォーム検知
 
-Ionicアプリ内では、ネイティブAPIを呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例:
+Ionic アプリ内では、ネイティブ API を呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例:
 
 ```tsx
 this.platform.ready().then(() => {
@@ -29,11 +29,11 @@ this.platform.ready().then(() => {
 });
 ```
 
-このコードは、ネイティブAPIが使えるかどうか不確かな環境向けに開発していたとしても非常に役に立ちます。
+このコードは、ネイティブ API が使える  かどうか不確かな環境向けに開発していたとしても非常に役に立ちます。
 
 ### ブラウザのフォールバック
 
-多くのネイティブAPI（例えばFile API）はブラウザで利用できません。APIは常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの2つの点を考慮すると、アプリが実行されているプラ​​ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。
+多くのネイティブ API（例えば File API）はブラウザで利用できません。API は常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの 2 つの点を考慮すると、アプリが実行されているプラ ​​ ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。
 
 ## デスクトップ
 
@@ -41,7 +41,7 @@ this.platform.ready().then(() => {
 
 ### レイアウト
 
-多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的なUIパターンを考えてください:
+多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的な UI パターンを考えてください:
 
 ```html
 <ion-content>
@@ -63,7 +63,7 @@ this.platform.ready().then(() => {
 </ion-content>
 ```
 
-このコードは幅が100%の5つの項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。
+このコードは幅が 100%の 5 つの  項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。
 
 <img src={require('@site/static/img/building/cross-platform-items.png').default} />
 
@@ -101,7 +101,7 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co
 </ion-grid>
 ```
 
-全体を `ion-grid` 要素で囲むことで、Ionicのグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。
+全体を `ion-grid` 要素で囲むことで、Ionic のグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。
 
 <img src={require('@site/static/img/building/cross-platform-grid.png').default} />
 
@@ -145,7 +145,7 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co
 
 上の例ではたくさんのコードが追加されていますが、キーポイントは下記になります:
 
-- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は12です。
+- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は 12 です。
 
 - `size`属性は`size-{breakpoint}`の形式で各画面幅に応じたブレークポイントを持つこともできます。
 
@@ -153,13 +153,13 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co
 
 ## ストレージ
 
-ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHRリクエストからJSONを保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLiteデータベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic開発者はそれを心配する必要はありません。
+ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHR リクエストから JSON を保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLite データベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic 開発者はそれを心配する必要はありません。
 
 ### Ionic Storage
 
-この場合、<a href="https://github.com/ionic-team/ionic-storage" target="_blank">Ionicのストレージライブラリ</a>は複数の環境において最適な選択肢です。Ionicのストレージクラスは、十分にテストされたLocalForageライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。
+この場合、<a href="https://github.com/ionic-team/ionic-storage" target="_blank">Ionic のストレージライブラリ</a>は複数の環境において最適な選択肢です。Ionic のストレージクラスは、十分にテストされた LocalForage ライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。
 
-現在、ネイティブ向けにはSQLiteを通して実行され、他にもIndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定したAPIを使ってデータの読み書きが可能です。
+現在、ネイティブ向けには SQLite を通して実行され、他にも IndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定した API を使ってデータの読み書きが可能です。
 
 ```tsx
 class MyClass {
@@ -177,4 +177,4 @@ class MyClass {
 }
 ```
 
-PouchDBといった他のストレージを選択することも可能です。
+PouchDB といった他のストレージを選択することも可能です。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
index 1c73465725e..5a8b37310d2 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
@@ -11,37 +11,41 @@ sidebar_label: 基本的な考え方
   />
 </head>
 
-Ionicアプリの開発に慣れていない人には、Ionicプロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Frameworkとは何か、そしてそれがどのように機能するかについての基本を説明します。
+Ionic アプリの開発に慣れていない人には、Ionic プロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Framework とは何か、そしてそれがどのように機能するかについての基本を説明します。
 
-## UIコンポーネント
+## UI コンポーネント
 
-Ionic Frameworkは、アプリケーションの構成要素として機能する、再利用可能なUIコンポーネントのライブラリです。Ionicのコンポーネントは、HTML、CSS、JavaScriptを利用した[Web標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionicコンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。
+Ionic Framework は、アプリケーションの構成要素として機能する、再利用可能な UI コンポーネントのライブラリです。Ionic のコンポーネントは、HTML、CSS、JavaScript を利用した[Web 標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionic コンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。
 
 ## スタイルの適用
 
-スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できるIonic Frameworkに組み込まれている機能です。すべてのIonicコンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhoneやiPadなどのAppleデバイスは、Apple独自の<a href="https://www.apple.com/ios" target="_blank">iOSデザイン</a>を使用します。同様に、Androidデバイスは、<a href="https://material.io/guidelines/" target="_blank">Material Design</a>と呼ばれるGoogleのデザインを使用します。
+スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できる Ionic Framework に組み込まれている機能です。すべての Ionic コンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhone や iPad などの Apple デバイスは、Apple 独自の<a href="https://www.apple.com/ios" target="_blank">iOS デザイン</a>を使用します。同様に、Android デバイスは、<a href="https://material.io/guidelines/" target="_blank">Material Design</a>と呼ばれる Google のデザインを使用します。
 
-プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリのUXを提供します。AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを使用し、AndroidのPlay StoreからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからProgressive Web Apps（PWA）として表示アプリを表示する場合、IonicはデフォルトでMaterial Designテーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。
+プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリの UX を提供します。Apple の App Store からダウンロードした Ionic アプリは iOS テーマを使用し、Android の Play Store からダウンロードした Ionic アプリは Material Design テーマを取得します。ブラウザから Progressive Web Apps（PWA）として表示アプリを表示する場合、Ionic はデフォルトで Material Design テーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。
 
 ## ナビゲーション
 
-従来のWebアプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。
-この例としては、ユーザが、Wikipediaのようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。
+従来の Web アプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。
+この例としては、ユーザが、Wikipedia のようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。
 
 これとは対照的に、モバイルアプリはしばしば平行な「非線形」ナビゲーションを利用します。たとえば、タブのついたインタフェースでは、タブごとにナビゲーションスタックを個別に設定できるため、ユーザがタブ間を移動したり切り替えたりするときにユーザが自分の場所を失うことはありません。
 
-Ionicアプリは、このモバイルナビゲーションのアプローチを採用しており、Web開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。
+Ionic アプリは、このモバイルナビゲーションのアプローチを採用しており、Web 開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。
 
-Angularと`@ionic/angular`で構築するアプリは、<a href="https://angular.jp/guide/router" target="_blank">Angular Router</a>を使用することをお勧めします。これはAngularとIonic 4の組み合わせから使うことができます。
+Angular と`@ionic/angular`で構築するアプリは、<a href="https://angular.jp/guide/router" target="_blank">Angular Router</a>を使用することをお勧めします。これは Angular と Ionic 4 の組み合わせから使うことができます。
 
-## Nativeアクセス
+## Native アクセス
 
-Webテクノロジで構築されたアプリ（Ionicアプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionicアプリ用のベースとなるコードは、Web標準とこれらのプラットフォーム間で共有される共通のAPIに基づいているため、多くのプラットフォームで機能します。
+Web テクノロジで構築されたアプリ（Ionic アプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionic アプリ用のベースとなるコードは、Web 標準とこれらのプラットフォーム間で共有される共通の API に基づいているため、多くのプラットフォームで機能します。
 
-Ionicの最も一般的な使用例の1つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOSとAndroidの両方のソフトウェア開発キット（SDK）は、完全なネイティブSDKアクセスを可能にしながら、あらゆるIonicアプリをレンダリングする [Web Views](webview.md) を提供します。
+Ionic の最も一般的な使用例の 1 つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOS と Android の両方のソフトウェア開発キット（SDK）は、完全なネイティブ SDK アクセスを可能にしながら、あらゆる Ionic アプリをレンダリングする [Web Views](webview.md) を提供します。
 
-<a href="https://capacitorjs.com/" target="_blank">Capacitor</a> や <a href="https://cordova.apache.org/" target="_blank">Cordova</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
+<a href="https://capacitorjs.com/" target="_blank">
+  Capacitor
+</a> や <a href="https://cordova.apache.org/" target="_blank">
+  Cordova
+</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
 
 ## テーマ
 
-基本的に、Ionic Frameworkは<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>を使用して構築されているので、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSSプロパティ (variables)</a>の柔軟性を利用することができます。これにより、Web標準に準拠しながら見栄えのするアプリを設計することがとても簡単になります。デフォルトでもすばらしいものがつくれるように、私たちはテーマカラーのデフォルトセットを提供しますが、ブランド、会社、または希望のカラーパレットに合うデザインにするためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマに関する詳細は[Theming](../theming/basics.md)をご覧ください。
+基本的に、Ionic Framework は<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>を使用して構築されているので、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS プロパティ (variables)</a>の柔軟性を利用することができます。これにより、Web 標準に準拠しながら見栄えのするアプリを設計することがとても簡単になります。デフォルトでもすばらしいものがつくれるように、私たちはテーマカラーのデフォルトセットを提供しますが、ブランド、会社、または希望のカラーパレットに合うデザインにするためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマに関する詳細は[Theming](../theming/basics.md)をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
index 9a1344cc5af..8c40ee79471 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
@@ -10,31 +10,31 @@ title: Web View
   />
 </head>
 
-Web Viewは、ネイティブデバイス上のWebアプリを強化します。
+Web View は、ネイティブデバイス上の Web アプリを強化します。
 
-[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web Viewは自動的に提供されます。
+[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web View は自動的に提供されます。
 
-[Cordova](../reference/glossary.md#cordova)については、Ionicが<a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View のプラグイン</a>を管理しています。このプラグインは、Ionic CLIを使用する際にデフォルトで提供されます。
+[Cordova](../reference/glossary.md#cordova)については、Ionic が<a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View のプラグイン</a>を管理しています。このプラグインは、Ionic CLI を使用する際にデフォルトで提供されます。
 
-## Web Viewとは
+## Web View とは
 
-Ionicアプリは[Web技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Webブラウザのすべての機能が使えるWeb Viewを使ってレンダリングされます。
+Ionic アプリは[Web 技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Web ブラウザのすべての機能が使える Web View を使ってレンダリングされます。
 
-最近のWeb Viewは、カメラ、センサー、GPS、スピーカー、Bluetoothなどのハードウェア機能のための組み込み<a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a>を多数提供していますが、プラットフォーム固有のハードウェアAPIにアクセスする必要がある場合もあります。Ionicアプリでは、通常はJavaScript APIを利用してネイティブプラグインにアクセスしてブリッジする形でハードウェアAPIを利用することができます。
+最近の Web View は、カメラ、センサー、GPS、スピーカー、Bluetooth などのハードウェア機能のための組み込み<a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a>を多数提供していますが、プラットフォーム固有のハードウェア API にアクセスする必要がある場合もあります。Ionic アプリでは、通常は JavaScript API を利用してネイティブプラグインにアクセスしてブリッジする形でハードウェア API を利用することができます。
 
 ![webview architecture](/img/building/webview-architecture.png)
 
-Ionic Web Viewプラグインは、最新のJavaScriptアプリケーションに特化しています。iOSとAndroidの両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化されたHTTPサーバーにホストされます。
+Ionic Web View プラグインは、最新の JavaScript アプリケーションに特化しています。iOS と Android の両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化された HTTP サーバーにホストされます。
 
 ### 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プロトコル
+### File プロトコル
 
-CordovaとCapacitorのアプリはローカルのHTTPサーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルのHTTPサーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
+Cordova と Capacitor のアプリはローカルの HTTP サーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルの HTTP サーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
 
-Capacitorアプリの場合、URIはこのように変換します。
+Capacitor アプリの場合、URI はこのように変換します。
 
 ```javascript
 import { Capacitor } from '@capacitor/core';
@@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
 Capacitor.convertFileSrc(filePath);
 ```
 
-Cordovaアプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　がFile URIを変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応するIonic Nativeプラグインもあります。また、対応するIonic Nativeプラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。
+Cordova アプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　が File URI を変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応する Ionic Native プラグインもあります。また、対応する Ionic Native プラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。
 
 ### 実装
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
index 2517935b7b1..47020a40c74 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
@@ -16,12 +16,12 @@ title: Progressive Web Apps
 ### The web...それよりもいいもの
 
 Progressive Web App (PWA) は、最新の Web 機能を使用して、ユーザーにアプリのようなエクスペリエンスを提供する Web アプリです。
-これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URLからアクセスでき、検索エンジンにインデックスされます。
+これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URL からアクセスでき、検索エンジンにインデックスされます。
 
 [Capacitor](https://capacitorjs.com)と連携して、すべてのユーザーに複数のデプロイ対象を提供することができます。
-アプリをPWAとしてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。
+アプリを PWA としてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。
 
-Ionicでは、アプリストアへのリリースだけでなく、PWAとしてモバイルWebにデプロイすることも可能です。
+Ionic では、アプリストアへのリリースだけでなく、PWA としてモバイル Web にデプロイすることも可能です。
 
 ### 要求されるもの
 
@@ -37,7 +37,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
 
 - フレッシュ - サービスワーカーの更新プロセスにより、常に最新の情報を提供します。
 
-- 安全 - HTTPS経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。
+- 安全 - HTTPS 経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。
 
 - 発見性 - W3C マニフェストとサービスワーカー登録により、「アプリケーション」として識別可能であり、検索エンジンに見つけてもらうことができます。
 
@@ -45,7 +45,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
 
 - インストール可能 - アプリストアのような煩わしさがなく、ユーザーが最も便利だと思うアプリをホーム画面に置いておくことができます。
 
-- リンク可能 - 複雑なインストールを必要とせず、URLで簡単に共有できます。
+- リンク可能 - 複雑なインストールを必要とせず、URL で簡単に共有できます。
 
 <em>
   <a href="https://addyosmani.com/blog/getting-started-with-progressive-web-apps/" target="_blank">
@@ -53,7 +53,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
   </a>
 </em>
 
-たくさんありますが、Ionicアプリの場合はいくつかのポイントに集約されます。
+たくさんありますが、Ionic アプリの場合はいくつかのポイントに集約されます。
 
 #### オフライン対応
 
@@ -61,8 +61,8 @@ Progressive Web App と見なされるには、アプリが以下の要件を満
 
 #### <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank">Web App Manifest</a>
 
-App Manifestファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。
+App Manifest ファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。
 
 #### <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>
 
-Service Workerについては、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。
+Service Worker については、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
index ec8b0266c20..8523eab429d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
@@ -13,18 +13,18 @@ sidebar_label: iOS App Store
 
 ## 要件
 
-iOS App Storeにアプリを提出するには、いくつかのことが必要です。
+iOS App Store にアプリを提出するには、いくつかのことが必要です。
 
 - Xcode
-- 有料のApple Developersアカウント
+- 有料の Apple Developers アカウント
 - 有効なプロビジョニングプロファイル
 - アプリの開発および配布に関する証明書
 
-Apple Developer Programへの登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。
+Apple Developer Program への登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。
 
 ## リリースビルドの作成
 
-iOSプラットフォームがまだ追加されていない場合は、必ず追加してください。
+iOS プラットフォームがまだ追加されていない場合は、必ず追加してください。
 
 ```shell
 ionic cordova platform add ios
@@ -44,30 +44,31 @@ ionic cordova build ios --prod
 
 iOS 用の証明書の生成は少し複雑なので、証明書とは何か、どのように生成するかについては、[Apple の公式ドキュメント](https://help.apple.com/xcode/mac/current/#/dev3a05256b8) を必ず確認してください。
 
-必要な証明書とプロファイルを作成するには、[Appleのメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Appleのドキュメントに記載されているリンクをたどってください。
+必要な証明書とプロファイルを作成するには、[Apple のメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Apple のドキュメントに記載されているリンクをたどってください。
 
-ここで重要なのは、開発用と配布用の2種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。
+ここで重要なのは、開発用と配布用の 2 種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。
 
 ディストリビューション証明書は、アプリをストアに配布するためのものです。アプリがディストリビューション証明書で署名されると、どのデバイスにもインストールできるようになります。
 
-## XCodeでのアプリへの署名
+## XCode でのアプリへの署名
 
-正しい証明書を生成した後、Xcodeに自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しいDevelopmentとDistributionの証明書が使用されることを確認するためです。
+正しい証明書を生成した後、Xcode に自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しい Development と Distribution の証明書が使用されることを確認するためです。
 
-このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizerが開かれます。
+このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizer が開かれます。
 
-Xcode Organizerは、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、「Upload to App Store」をクリックします。
+Xcode Organizer は、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、「Upload to App Store」をクリックします。
 チームを選択する場所と、アプリの詳細情報、そして「Upload」ボタンがあるはずなので、それをクリックします。
 
 アップロードに成功すると、アプリは [iTunes Connect](https://itunesconnect.apple.com) にリストされ、 "Activity" にリストされるはずです。
-ここから、TestFlightをベータテスト用に有効にしたり、アプリをAppleの承認用に送信したりすることができます。
+ここから、TestFlight をベータテスト用に有効にしたり、アプリを Apple の承認用に送信したりすることができます。
 
 ## アプリのアップデート
 
 アプリが成長するにつれ、新機能や修正を加えて更新する必要があります。
-アプリのアップデートは、Appleに新バージョンを提出するか、Appflowのような<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">live update機能</a>を使用することで可能です。
+アプリのアップデートは、Apple に新バージョンを提出するか、Appflow のような<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">live update 機能</a>を使用することで可能です。
 
-<strong>Live Updates</strong>を使うと, アプリの変更は、App Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。
+<strong>Live Updates</strong>を使うと, アプリの変更は、App
+Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。
 
 :::note
 iOS App Store が更新されたビルドを受け入れるには、config.xml ファイルを編集してバージョン値を増やし、上記の手順でアプリをリリース用に再構築する必要があります。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
index 4ca4a877a7a..6d72e41298d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
@@ -11,26 +11,26 @@ sidebar_label: Electronデスクトップアプリ
   />
 </head>
 
-Ionicでデスクトップアプリケーションを構築すると、開発者はコードを100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electronに精通していることを前提としており、Electronアプリの「作り方」については触れません。 詳しくは <a href="https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app" target="_blank">Electron guide</a>. をご覧ください。
+Ionic でデスクトップアプリケーションを構築すると、開発者はコードを 100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electron に精通していることを前提としており、Electron アプリの「作り方」については触れません。 詳しくは <a href="https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app" target="_blank">Electron guide</a>. をご覧ください。
 
-## macOSアプリ
+## macOS アプリ
 
 ### 要件
 
-macOSアプリをストアでアプリを公開するには、難しい要件が2つあります。
+macOS アプリをストアでアプリを公開するには、難しい要件が 2 つあります。
 
-* [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること
-* 開発者アカウント ($100 through Apple's developer portal) が有効であること
+- [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること
+- 開発者アカウント ($100 through Apple's developer portal) が有効であること
 
 ### リリース
 
-Electronチームは、macOS用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。
+Electron チームは、macOS 用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。
 
-## Windowsアプリ
+## Windows アプリ
 
 ### 要件
 
-Windowsアプリをストアでアプリを公開するには、2つの厳しい要件があります。
+Windows アプリをストアでアプリを公開するには、2 つの厳しい要件があります。
 
 - 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)
@@ -45,4 +45,4 @@ npm install -g electron-windows-store
 
 ### リリース作業
 
-macOSと同様、ElectronはWindows用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください
+macOS と同様、Electron は Windows 用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
index e3202c3ae60..d45dd27aa13 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
@@ -13,19 +13,19 @@ sidebar_label: Android Play Store
 
 ## アプリのリリースビルド作成
 
-Android用のリリースビルドを生成するには、以下のcliコマンドを実行します。
+Android 用のリリースビルドを生成するには、以下の cli コマンドを実行します。
 
 ```shell
 $ ionic cordova build android --prod --release
 ```
 
 これは、アプリの `platforms/android/app/build/outputs/apk` ディレクトリにある `config.xml` の設定に基づき、リリースビルドを生成するものです。
-Ionicアプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。
+Ionic アプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。
 
-## APKへの署名
+## APK への署名
 
 まず、署名されていない APK に署名する必要があります。署名鍵がすでに生成されている場合は、この手順をスキップして、代わりにその鍵を使用します。
-Android SDKに付属するkeytoolコマンドを使用して、秘密鍵を生成します。
+Android SDK に付属する keytool コマンドを使用して、秘密鍵を生成します。
 
 ```shell
 $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
@@ -34,33 +34,33 @@ $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg
 このコマンドを実行し、プロンプトに答えると、カレントディレクトリに `my-release-key.keystore` という名前のファイルが作成されます。
 
 :::caution
-このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Playストアはこのアプリのアップデートを受け付けません!
+このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Play ストアはこのアプリのアップデートを受け付けません!
 :::
 
-署名されていないAPKに署名するには、Android SDKに含まれるjarsignerツールを実行します。
+署名されていない APK に署名するには、Android SDK に含まれる jarsigner ツールを実行します。
 
 ```shell
 $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
 ```
 
-最後に、APKを最適化するために、zipalignツールを実行する必要があります。
+最後に、APK を最適化するために、zipalign ツールを実行する必要があります。
 `zipalign` ツールは `/path/to/Android/sdk/build-tools/VERSION/zipalign` にあります。
-例えば、Android StudioがインストールされているmacOSでは、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。
+例えば、Android Studio がインストールされている macOS では、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。
 
 ```shell
 $ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
 ```
 
-これにより、Google Playストアに受け入れられるHelloWorld.apkという最終リリースバイナリが生成されます。
+これにより、Google Play ストアに受け入れられる HelloWorld.apk という最終リリースバイナリが生成されます。
 
-## Google Play Storeにアプリを送信する
+## Google Play Store にアプリを送信する
 
-リリース用APKが生成されたので、Playストアのリスティングを書き、APKをアップロードすることができるようになりました。
+リリース用 APK が生成されたので、Play ストアのリスティングを書き、APK をアップロードすることができるようになりました。
 
 まずは、[Google Play Store Developer Console](https://play.google.com/apps/publish)にアクセスし、開発者アカウントを新規に作成します。
 
 :::note
-Google Playで開発者アカウントを作るには、25USドルが必要です。
+Google Play で開発者アカウントを作るには、25US ドルが必要です。
 :::
 
 開発者アカウントを作成したら、「アプリケーションを作成する」ボタン(Create an Application)をクリックします。
@@ -68,12 +68,12 @@ Google Playで開発者アカウントを作るには、25USドルが必要で
 ![Create an App button](/img/publishing/newAppGPlay.png)
 
 アプリの説明、スクリーンショット、その他の情報を入力してください。
-準備ができたら、生成された署名付きリリースAPKをアップロードし、アプリを公開します。
+準備ができたら、生成された署名付きリリース APK をアップロードし、アプリを公開します。
 
 ## アプリのアップデート
 
-アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Storeに新バージョンを提出するか、AppflowのLive Update機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Playストアに変更を送信することなく、Appflowのダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Updateについてもっと知るためには<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">こちら</a>にアクセスください。
+アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Store に新バージョンを提出するか、Appflow の Live Update 機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Play ストアに変更を送信することなく、Appflow のダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Update についてもっと知るためには<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">こちら</a>にアクセスください。
 
 :::note
-Google PlayストアでアップデートされたAPKを受け入れるには、config.xmlファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。
+Google Play ストアでアップデートされた APK を受け入れるには、config.xml ファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。
 :::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
index 1caee78f3bf..50b9891a5b8 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
@@ -14,9 +14,9 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWAとは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。
+Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWA とは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。
 
-Ionicが対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、AngularとReactのリンクです。
+Ionic が対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、Angular と React のリンクです。
 
 <DocsCards>
   <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg"></DocsCard>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
index 00b4b8b77d6..483da7da603 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
@@ -1,8 +1,8 @@
 # Books
 
-### [Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉](https://amzn.to/2Ygk5bA)
+### [Ionic で作る モバイルアプリ制作入門〈Web/iPhone/Android 対応〉](https://amzn.to/2Ygk5bA)
 
-WEBサイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTMLでモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。
+WEB サイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTML でモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。
 
 by [rdlabo](https://twitter.com/rdlabo)
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
index 81d33c7f1c6..565be644bdf 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
@@ -57,7 +57,7 @@ ionic cordova plugin add cordova-plugin-camera
 <plugin name="cordova-plugin-camera" spec="^4.0.3" />
 ```
 
-次のステップは iOS ユーザーのみ必要です。iOS10では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section (<platform name="ios"></platform>) の `config.xml` の最後に追加します:
+次のステップは iOS ユーザーのみ必要です。iOS10 では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section (<platform name="ios"></platform>) の `config.xml` の最後に追加します:
 
 ```xml
 <!-- iOS 10 で必須: Camera 許可プロンプト -->
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
index 199a870ae31..140d3aef091 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
@@ -2,7 +2,7 @@
 
 今までは、単なるカメラアプリを壮大なフォトギャラリーに発展してきました。では、Ionic のテーマ設定でフォトギャラリーを独自のものにする方法を見てみましょう。このアプリのビジュアルデザインは非常に重要で、幸運なことに、Ionic はすぐに使える多くの柔軟なテーマを提供してくれます。
 
-Ionic には CSS 変数として定義された9つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます:
+Ionic には CSS 変数として定義された 9 つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます:
 
 ![v4-theming-defaults](/img/guides/first-app-v4/theming-defaults.png)
 
@@ -27,7 +27,7 @@ base、contrast、shade、tint プロパティを指定することによって
 }
 ```
 
-アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の16進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。
+アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の 16 進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。
 
 しかし待ってください、まだあります！Ionic は、アプリケーションが実行されているデバイスに基づいて、プラットフォーム固有のスタイルを自動的に提供し、ユーザーが慣れているネイティブなルック・アンド・フィールを与えます:
 
@@ -51,6 +51,6 @@ imports: [
 
 ![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png)
 
-CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的なIonic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。
+CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的な Ionic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。
 
 素晴らしいアプリ作りに旅立ちましょう！
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
index bd81b630b44..00587c68984 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
@@ -2,19 +2,19 @@
 
 ### [Angular CLI](https://github.com/angular/angular-cli)
 
-Angular CLIの機能の詳細
+Angular CLI の機能の詳細
 
 ### [StackBlitz](https://stackblitz.com/)
 
-ブラウザで0から新しいIonicアプリを始めましょう！
+ブラウザで 0 から新しい Ionic アプリを始めましょう！
 
 ### [TypeScript](https://www.typescriptlang.org/)
 
-TypeScriptでの作業を素晴らしいものにする機能を調べてください。
+TypeScript での作業を素晴らしいものにする機能を調べてください。
 
 ### [Glossary](../reference/glossary.md)
 
-Ionicで開発中に利用される一般的な用語の一覧。
+Ionic で開発中に利用される一般的な用語の一覧。
 
 ### [Starter Apps](https://ionicthemes.com)
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
index 8a51e148ad3..a6c946e7532 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
@@ -2,7 +2,7 @@
 
 ### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be)
 
-Ionic2の簡単な紹介と最初のアプリの作り方です。
+Ionic2 の簡単な紹介と最初のアプリの作り方です。
 
 ### [Ionic &amp; Async](https://blog.ionicframework.com/screencast-ionic-async/)
 
@@ -10,12 +10,12 @@ Ionic2の簡単な紹介と最初のアプリの作り方です。
 
 ### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/)
 
-Ionic2アプリを構築する方法を学びましょう。
+Ionic2 アプリを構築する方法を学びましょう。
 
 ### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY)
 
-Ionic2の裏にあるアイデアと目標を掘り下げてみましょう。
+Ionic2 の裏にあるアイデアと目標を掘り下げてみましょう。
 
 ### [Ionic &amp; Typings](https://blog.ionicframework.com/ionic-and-typings/)
 
-Ionic2アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。
+Ionic2 アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
index 8874bb90f0e..42e0d65b7dc 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
@@ -11,42 +11,49 @@ sidebar_label: Androidでの開発
   />
 </head>
 
-このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Androidエミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。AndroidアプリはWindows、macOS、Linux上で開発できます。
+このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Android エミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。Android アプリは Windows、macOS、Linux 上で開発できます。
 
 ## Android Studio
 
-[Android Studio](https://developer.android.com/studio/) はネイティブなAndroidアプリを作るためのIDEです。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。
+[Android Studio](https://developer.android.com/studio/) はネイティブな Android アプリを作るための IDE です。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。
 
-Androidエミュレータに必要な [Android仮想デバイス](android.md#creating-an-android-virtual-device) の作成にもAndroid Studioが使用されます。Ionicアプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。
+Android エミュレータに必要な [Android 仮想デバイス](android.md#creating-an-android-virtual-device) の作成にも Android Studio が使用されます。Ionic アプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。
 
 :::note
-Android Studioを使ってIonicアプリを開発することはお勧めしません。実際には、ネイティブのAndroidプラットフォーム向けにアプリをビルドして実行したり、Android SDKや仮想デバイスを管理するためだけに使うべきです。
+Android Studio を使って Ionic アプリを開発することはお勧めしません。実際には、ネイティブの Android プラットフォーム向けにアプリをビルドして実行したり、Android SDK や仮想デバイスを管理するためだけに使うべきです。
 :::
 
-### Android Studioのインストール
+### Android Studio のインストール
 
-<a href="https://developer.android.com/studio/" target="_blank">Android website</a> からAndroid Studioをダウンロードします。より詳しいインストール手順は <a href="https://developer.android.com/studio/install" target="_blank">User Guide</a> をご覧ください。
+<a href="https://developer.android.com/studio/" target="_blank">
+  Android website
+</a> からAndroid Studioをダウンロードします。より詳しいインストール手順は <a
+  href="https://developer.android.com/studio/install"
+  target="_blank"
+>
+  User Guide
+</a> をご覧ください。
 
-### Android SDKのインストール
+### Android SDK のインストール
 
-Android Studioをインストールしたら起動します。IDEは、Android SDKのインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDKのインストールを完了して、**Android SDKのパス**のをメモしておいてください。
+Android Studio をインストールしたら起動します。IDE は、Android SDK のインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDK のインストールを完了して、**Android SDK のパス**のをメモしておいてください。
 
 ![Android Studio SDK Setup](/img/installation/android-studio-sdk-setup.png)
 
-デフォルトでは、最新の安定版SDKプラットフォームがインストールされ、そのバージョンのAndroidをターゲットにするために必要なパッケージもコレクションされています。
+デフォルトでは、最新の安定版 SDK プラットフォームがインストールされ、そのバージョンの Android をターゲットにするために必要なパッケージもコレクションされています。
 
-システムイメージやその他のマイナーSDKプラットフォームパッケージをインストールするには、SDK Managerの下部にある **Show Package Details** がオンになっていることを確認する必要があります。
+システムイメージやその他のマイナー SDK プラットフォームパッケージをインストールするには、SDK Manager の下部にある **Show Package Details** がオンになっていることを確認する必要があります。
 ![Android Studio SDK Manager](/img/installation/android-studio-sdk.png)
 
-今後の参考情報ですが、Android SDKはAndroid Studioの起動画面の **Configure** &raquo; **SDK Manager** メニュー、またはAndroidプロジェクト内の **Tools** &raquo; **SDK Manager** で管理することができます。
+今後の参考情報ですが、Android SDK は Android Studio の起動画面の **Configure** &raquo; **SDK Manager** メニュー、または Android プロジェクト内の **Tools** &raquo; **SDK Manager** で管理することができます。
 
 ### コマンドラインツールの設定
 
-Android SDKには<a href="https://developer.android.com/studio/command-line/" target="_blank">便利なコマンドラインツール</a>が付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOSとLinuxのものです。WIndowsの場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。
+Android SDK には<a href="https://developer.android.com/studio/command-line/" target="_blank">便利なコマンドラインツール</a>が付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOS と Linux のものです。WIndows の場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。
 
 `~/.bashrc`もしくは`~/.bash_profile`、または同様のシェル起動スクリプトを、次のように変更します。s:
 
-1. `ANDROID_SDK_ROOT`環境変数を設定します。このパスは、前のセクションでメモした**Android SDKのパス**です。
+1. `ANDROID_SDK_ROOT`環境変数を設定します。このパスは、前のセクションでメモした**Android SDK のパス**です。
 
    For Mac:
 
@@ -75,30 +82,30 @@ Android SDKには<a href="https://developer.android.com/studio/command-line/" ta
    For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools&lt;version>` must also be added to `PATH`.
    :::
 
-### Android仮想デバイスの作成
+### Android 仮想デバイスの作成
 
-Android仮想デバイス（AVD）は、AndroidエミュレータがAndroid OSを実行するために利用する設計図です。以下のドキュメントはAndroidエミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、<a href="https://developer.android.com/studio/run/managing-avds" target="_blank">Android のドキュメント</a>を参照ください。
+Android 仮想デバイス（AVD）は、Android エミュレータが Android OS を実行するために利用する設計図です。以下のドキュメントは Android エミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、<a href="https://developer.android.com/studio/run/managing-avds" target="_blank">Android のドキュメント</a>を参照ください。
 
-AVDはAVD Managerで管理します。Android Studioの初期画面で、 **Configure** &raquo; **AVD Manager** をクリックします。AVD Managerは、Androidプロジェクト内で、-**Tools** &raquo; **AVD Manager** メニューから開くこともできます。
+AVD は AVD Manager で管理します。Android Studio の初期画面で、 **Configure** &raquo; **AVD Manager** をクリックします。AVD Manager は、Android プロジェクト内で、-**Tools** &raquo; **AVD Manager** メニューから開くこともできます。
 
 ![AVD Setup](/img/installation/android-studio-avd-setup.png)
 
-**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play servicesを選択してください。Androidのバージョンについては、Androidのバージョン履歴を参照してください。
+**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play services を選択してください。Android のバージョンについては、Android のバージョン履歴を参照してください。
 
-AVDが作成されたら、AndroidエミュレータでAVDを起動します。エミュレータを実行し続けることは、Android用のIonicアプリケーションを開発しながら検出を確実にするための最良の方法です。
+AVD が作成されたら、Android エミュレータで AVD を起動します。エミュレータを実行し続けることは、Android 用の Ionic アプリケーションを開発しながら検出を確実にするための最良の方法です。
 
 <figure className="device">
   <img alt="Android Emulator Booting" src="/docs/img/installation/android-emulator-booting.png" />
 </figure>
 
-### Androidデバイスを設定する
+### Android デバイスを設定する
 
-Androidハードウェアの実物は、Ionicアプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用にAndroidデバイスを設定する簡単な方法です。詳細な手順と情報については、<a href="https://developer.android.com/studio/run/device" target="_blank">the Android documentation</a>を参照してください。
+Android ハードウェアの実物は、Ionic アプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用に Android デバイスを設定する簡単な方法です。詳細な手順と情報については、<a href="https://developer.android.com/studio/run/device" target="_blank">the Android documentation</a>を参照してください。
 
-1. デバイスのUSBデバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順については<a href="https://developer.android.com/studio/debug/dev-options" target="_blank">the Android documentation</a>をご確認ください。
-1. デバイスにコンピュータへの接続許可があることを確認してください。macOSの場合、追加の設定は不要です。Windowsの場合は<a href="https://developer.android.com/studio/run/oem-usb" target="_blank">OEM USB drivers</a>をインストールしてください。
+1. デバイスの USB デバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順については<a href="https://developer.android.com/studio/debug/dev-options" target="_blank">the Android documentation</a>をご確認ください。
+1. デバイスにコンピュータへの接続許可があることを確認してください。macOS の場合、追加の設定は不要です。Windows の場合は<a href="https://developer.android.com/studio/run/oem-usb" target="_blank">OEM USB drivers</a>をインストールしてください。
 
-USBケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
+USB ケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
 
 ```shell
 adb devices
@@ -108,14 +115,14 @@ adb devices
 
 ## Cordova Setup
 
-Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。
+Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。
 
 ### Java
 
-ネイティブのAndroidアプリは <a href="https://java.com/en/" target="_blank">Java</a> プログラミング言語でコンパイルされている。ダウンロードページからJDK 8を<a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">download page</a>します。
+ネイティブの Android アプリは <a href="https://java.com/en/" target="_blank">Java</a> プログラミング言語でコンパイルされている。ダウンロードページから JDK 8 を<a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">download page</a>します。
 
 :::note
-残念ながら、Cordovaは最新バージョンのJavaと互換性がありません。
+残念ながら、Cordova は最新バージョンの Java と互換性がありません。
 :::
 
 ### Gradle
@@ -131,17 +138,17 @@ Cordovaがプログラムビルドをサポートするには、追加のセッ
 
 ## プロジェクトのセットアップ
 
-アプリをAndroidシミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
+アプリを Android シミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
 
 1. **ネイティブプロジェクトが存在しない場合は、生成します。**
 
-   Capacitorでは以下の実行をサポートしています:
+   Capacitor では以下の実行をサポートしています:
 
    ```shell
    $ ionic capacitor add android
    ```
 
-   Cordovaでは以下のように実行します。
+   Cordova では以下のように実行します。
 
    ```shell
    $ ionic cordova prepare android
@@ -151,21 +158,21 @@ Cordovaがプログラムビルドをサポートするには、追加のセッ
 
 Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId` プロパティを修正します。
 
-Cordovaの場合は、`config.xml`ファイルを開き、ルート要素である `<widget>` の `id` 属性を変更します。詳しくは、[Cordovaのドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。
+Cordova の場合は、`config.xml`ファイルを開き、ルート要素である `<widget>` の `id` 属性を変更します。詳しくは、[Cordova のドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。
 
-## Capacitorでの実行
+## Capacitor での実行
 
-CapacitorはAndroid Studioを使って、シミュレータやデバイスへのアプリの構築と実行を行います。
+Capacitor は Android Studio を使って、シミュレータやデバイスへのアプリの構築と実行を行います。
 
-1. **Ionicアプリを開発してネイティブプロジェクトに同期します**
+1. **Ionic アプリを開発してネイティブプロジェクトに同期します**
 
-  重要な変更が行われるたびに、変更がAndroidシミュレータやデバイスに表示されるようにするには、WebアセットにIonicアプリを組み込む必要があります。次に、Webアセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスはIonic CLIコマンド1つで簡単になります。
+重要な変更が行われるたびに、変更が Android シミュレータやデバイスに表示されるようにするには、Web アセットに Ionic アプリを組み込む必要があります。次に、Web アセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスは Ionic CLI コマンド 1 つで簡単になります。
 
-   ```shell
-   $ ionic capacitor copy android
-   ```
+```shell
+$ ionic capacitor copy android
+```
 
-2. **Android StudioでRunボタンをクリックして、シュミレーターかデバイスを選択ください。**
+2. **Android Studio で Run ボタンをクリックして、シュミレーターかデバイスを選択ください。**
 
 ![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png)
 
@@ -191,13 +198,13 @@ ionic cordova run android -l
 
 これで、アプリのソースファイルに変更があった場合、Web アセットが再構築され、再度デプロイしなくてもシミュレータやデバイスに変更が反映されるようになりました。
 
-## Androidアプリのデバッグ
+## Android アプリのデバッグ
 
-アプリがAndroidデバイスやエミュレータ上で動作するようになったら、 Chrome DevToolsを使ってデバッグすることができます。
+アプリが Android デバイスやエミュレータ上で動作するようになったら、 Chrome DevTools を使ってデバッグすることができます。
 
-### Chrome DevToolsの利用
+### Chrome DevTools の利用
 
-Chromeは、AndroidシミュレータとデバイスのためのWeb開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間にChromeで `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。
+Chrome は、Android シミュレータとデバイスのための Web 開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間に Chrome で `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。
 
 :::note
 アプリケーションがデバイスまたはシミュレータで実行されていることを確認してください。実行されていない場合は、リストに表示されません。
@@ -205,9 +212,9 @@ Chromeは、AndroidシミュレータとデバイスのためのWeb開発者ツ
 
 ![Android Chrome DevTools](/img/running/android-chrome-devtools.png)
 
-### Native Logsの表示
+### Native Logs の表示
 
-Android Studioで実行している場合、ネイティブログは **Logcat** に表示されます。
+Android Studio で実行している場合、ネイティブログは **Logcat** に表示されます。
 
 :::note
 **Logcat** ウインドウが非表示の場合は、 **View** &raquo; **Tool Windows** &raquo; **Logcat** から有効にします。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
index 10ad73cec8d..1bb117883fa 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
@@ -21,7 +21,6 @@ Ionic Config is not reactive. Updating the config's value after the component ha
 import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
 
 <PerComponentExample />
-  
 
 ## Per-Platform Config
 
@@ -33,7 +32,6 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index.
 
 <PerPlatformExample />
 
-
 ### Fallbacks
 
 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:
@@ -59,7 +57,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
 |                 |                                                                                  |
 | --------------- | -------------------------------------------------------------------------------- |
 | **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. |
-| **Signature**   | `get(key: string, fallback?: any) => any`                                          |
+| **Signature**   | `get(key: string, fallback?: any) => any`                                        |
 
 #### Examples
 
@@ -79,7 +77,7 @@ class AppComponent {
 |                 |                                                                                      |
 | --------------- | ------------------------------------------------------------------------------------ |
 | **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. |
-| **Signature**   | `getBoolean(key: string, fallback?: boolean) => boolean`                               |
+| **Signature**   | `getBoolean(key: string, fallback?: boolean) => boolean`                             |
 
 #### Examples
 
@@ -99,7 +97,7 @@ class AppComponent {
 |                 |                                                                                 |
 | --------------- | ------------------------------------------------------------------------------- |
 | **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. |
-| **Signature**   | `getNumber(key: string, fallback?: number) => number`                             |
+| **Signature**   | `getNumber(key: string, fallback?: number) => number`                           |
 
 ## Interfaces
 
@@ -107,41 +105,41 @@ class AppComponent {
 
 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.                                        |
-| `innerHTMLTemplatesEnabled`      | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. |
-| `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.                     |
-| `toastDuration`          | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                         |
-| `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".               |
-| `toggleOnOffLabels`      | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
+| 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.                                                                                                                                                                            |
+| `innerHTMLTemplatesEnabled` | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. |
+| `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.                                                                                                                                                         |
+| `toastDuration`             | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                                                                                                                                                             |
+| `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".                                                                                                                                                   |
+| `toggleOnOffLabels`         | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                                                                                                                                                    |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
index bbfbaa83a71..c2358647c26 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
@@ -17,10 +17,11 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     rippleEffect: false,
-    mode: 'md'
-  }
-}
+    mode: 'md',
+  },
+};
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -38,10 +39,12 @@ import { IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
 The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -50,18 +53,19 @@ setupIonicReact({
   mode: 'md',
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
 ```tsx title="main.ts"
-
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
+
 createApp(App).use(IonicVue, {
   rippleEffect: false,
   mode: 'md',
 });
 ```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
index 64b868a70ee..0e4aadeee60 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
@@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     // Not recommended when your app requires reactive values
-    backButtonText: 'Go Back'
-  }
-}
+    backButtonText: 'Go Back',
+  },
+};
 ```
 
 **Recommended**
@@ -31,7 +31,7 @@ window.Ionic = {
 
 <script>
   const backButton = document.querySelector('ion-back-button');
-  
+
   /**
    * The back button text can be updated
    * anytime the locale changes.
@@ -39,6 +39,7 @@ window.Ionic = {
   backButton.text = 'Go Back';
 </script>
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -75,6 +76,7 @@ class MyComponent {
   backButtonText = 'Go Back';
 }
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -85,7 +87,7 @@ import { setupIonicReact } from '@ionic/react';
 
 setupIonicReact({
   // Not recommended when your app requires reactive values
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -106,6 +108,7 @@ const ExampleComponent = () => {
   )
 }
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -114,10 +117,10 @@ const ExampleComponent = () => {
 ```ts
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
- // Not recommended when your app requires reactive values
+
+// Not recommended when your app requires reactive values
 createApp(App).use(IonicVue, {
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -139,5 +142,6 @@ createApp(App).use(IonicVue, {
   const backButtonText = ref('Go Back');
 </script>
 ```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
index 02a5f27a3c0..6390a6120d1 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
@@ -34,6 +34,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -43,18 +44,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -64,16 +65,17 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
index 243cfa9c2fc..a5b8cdc490a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
@@ -37,6 +37,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -59,8 +60,8 @@ const getConfig = () => {
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -83,6 +84,7 @@ const getConfig = () => {
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
index 7d17299d0f8..d21553ad1cf 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
@@ -31,6 +31,7 @@ import { isPlatform, IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -45,6 +46,7 @@ setupIonicReact({
   animated: !isPlatform('mobileweb'),
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -58,6 +60,7 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 createApp(App).use(IonicVue, {
   animated: !isPlatform('mobileweb'),
 });
-````
+```
+
 </TabItem>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
index e9019a90855..d29a604d3f9 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
@@ -13,13 +13,13 @@ import TabItem from '@theme/TabItem';
   />
 </head>
 
-ハードウェアの戻るボタンは、ほとんどのAndroidデバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。
+ハードウェアの戻るボタンは、ほとんどの Android デバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。
 
 :::note
-ハードウェアの 「戻る」 ボタンとはAndroidデバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Androidデバイスにのみ適用されます。
+ハードウェアの 「戻る」 ボタンとは Android デバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Android デバイスにのみ適用されます。
 :::
 
-## CapacitorとCordovaにおける戻るボタン
+## Capacitor と Cordova における戻るボタン
 
 :::note
 The `@capacitor/app` package must be installed in Capacitor apps to use the hardware back button.
@@ -27,18 +27,18 @@ The `@capacitor/app` package must be installed in Capacitor apps to use the hard
 
 When running in a Capacitor or Cordova application, Ionic Framework will emit an `ionBackButton` event when a user presses the hardware back button.
 
-`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに1つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に1つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。
+`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに 1 つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に 1 つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。
 
 複数のハンドラを起動したい場合があります。各ハンドラのコールバックは、フレームワークに次のハンドラを呼び出すように指示するために使用できるパラメーターとして関数を渡します。
 
 ## ブラウザにおける戻るボタン
 
-モバイルブラウザーやPWAでアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、CapacitorとCordovaが、通常のWebブラウザでは公開されないデバイスAPIを利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。
+モバイルブラウザーや PWA でアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、Capacitor と Cordova が、通常の Web ブラウザでは公開されないデバイス API を利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。
 
-ハードウェアバックボタンを完全にサポートするには、CapacitorまたはCordovaの使用をお勧めします。
+ハードウェアバックボタンを完全にサポートするには、Capacitor または Cordova の使用をお勧めします。
 
 :::note
-ブラウザやPWAで実行してる時、 `ionBackButton` イベントは実行されません。
+ブラウザや PWA で実行してる時、 `ionBackButton` イベントは実行されません。
 :::
 
 ## Basic Usage
@@ -109,7 +109,7 @@ export default {
 </Tabs>
 ````
 
-この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を10に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が10未満のハンドラは呼び出されません。優先度が10より大きいハンドラが最初に呼び出されます。
+この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を 10 に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が 10 未満のハンドラは呼び出されません。優先度が 10 より大きいハンドラが最初に呼び出されます。
 
 同じ優先順位値を持つハンドラが存在する場合は、最後に登録されたハンドラが呼び出されます。詳細は、 [Handlers with the Same Priorities](#handlers-with-the-same-priorities) を参照してください。
 
@@ -207,11 +207,11 @@ export default {
 </Tabs>
 ````
 
-この例は、次のハンドラを起動するようにIonic Frameworkに指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。
+この例は、次のハンドラを起動するように Ionic Framework に指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。
 
 ## 同じ優先順位のハンドラ
 
-内部的には、Ionic Frameworkはハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handlerが、最初に呼び出されるハンドラになります。
+内部的には、Ionic Framework はハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handler が、最初に呼び出されるハンドラになります。
 
 ```javascript
 document.addEventListener('ionBackButton', (ev) => {
@@ -231,11 +231,11 @@ document.addEventListener('ionBackButton', (ev) => {
 });
 ```
 
-上の例では、ハンドラAとBの両方の優先度は10です。ハンドラBは最後に登録されているため、Ionic FrameworkはハンドラAを呼び出す前にハンドラBを呼び出します。
+上の例では、ハンドラ A と B の両方の優先度は 10 です。ハンドラ B は最後に登録されているため、Ionic Framework はハンドラ A を呼び出す前にハンドラ B を呼び出します。
 
 ## アプリの終了
 
-場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordovaが提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。
+場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordova が提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。
 
 ````mdx-code-block
 <Tabs
@@ -332,14 +332,14 @@ export default {
 
 この例は、ユーザがハードウェアの戻るボタンを押したときにアプリケーションが終了し、ナビゲーションスタックに何も残っていないことを示しています。アプリを終了する前に確認ダイアログを表示することも可能です。
 
-アプリケーションを終了する前に、ユーザーがルート・ページにあるかどうかを確認することをお勧めします。開発者は、Ionic Angularの `IonRouterOutlet` で`canGoBack` 、 Ionic ReactおよびIonic Vueの `IonRouter` で `canGoBack` メソッドを使用できます。
+アプリケーションを終了する前に、ユーザーがルート・ページにあるかどうかを確認することをお勧めします。開発者は、Ionic Angular の `IonRouterOutlet` で`canGoBack` 、 Ionic React および Ionic Vue の `IonRouter` で `canGoBack` メソッドを使用できます。
 
 ## 内部フレームワークハンドラ
 
-次の表は、Ionic Frameworkが使用するすべての内部ハードウェアバックボタンイベントハンドラの一覧です。 `Propagates` 列は、その特定のハンドラがIonic Frameworkに次の戻るボタンハンドラを呼び出すように指示するかどうかを示します。
+次の表は、Ionic Framework が使用するすべての内部ハードウェアバックボタンイベントハンドラの一覧です。 `Propagates` 列は、その特定のハンドラが Ionic Framework に次の戻るボタンハンドラを呼び出すように指示するかどうかを示します。
 
-| Handler    | Priority | Propagates | Description                                                                                                                              |
-| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Handler    | Priority | Propagates | Description                                                                                                                 |
+| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
 | Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
-| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                                   |
-| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                                    |
+| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                      |
+| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                       |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
index 0980197d07b..78cf2f15ef1 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
@@ -12,48 +12,48 @@ skipIntros: true
   />
 </head>
 
-このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOSシミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。iOSアプリは、XcodeがインストールされているmacOS上でのみ開発できます。
+このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOS シミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。iOS アプリは、Xcode がインストールされている macOS 上でのみ開発できます。
 
-iOS上でIonicアプリを実行するためのワークフローは2つあります:
+iOS 上で Ionic アプリを実行するためのワークフローは 2 つあります:
 
-* [Xcodeで実行](#running-with-xcode)
-* [Ionic CLIでの実行](#running-with-the-ionic-cli)
+- [Xcode で実行](#running-with-xcode)
+- [Ionic CLI での実行](#running-with-the-ionic-cli)
 
-Xcodeアプローチの方が一般的に安定していますが、Ionic CLIを使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。
+Xcode アプローチの方が一般的に安定していますが、Ionic CLI を使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。
 
-## Xcodeのセットアップ
+## Xcode のセットアップ
 
-[Xcode](https://developer.apple.com/xcode/) はネイティブなiOSアプリを作るためのIDEです。これにはiOS SDKとXcodeコマンドラインツールが含まれている。XcodeはAppleアカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Storeからインストールすることもできます。
+[Xcode](https://developer.apple.com/xcode/) はネイティブな iOS アプリを作るための IDE です。これには iOS SDK と Xcode コマンドラインツールが含まれている。Xcode は Apple アカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Store からインストールすることもできます。
 
-Xcodeをインストールしたら、使用するコマンドラインツールが選択されていることを確認します:
+Xcode をインストールしたら、使用するコマンドラインツールが選択されていることを確認します:
 
 ```shell
 xcode-select --install
 ```
 
-### Development Teamの設定
+### Development Team の設定
 
-すべてのiOSアプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcodeは自動コード署名によってこれを簡単にしてくれます。唯一の前提条件はApple IDです。
+すべての iOS アプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcode は自動コード署名によってこれを簡単にしてくれます。唯一の前提条件は Apple ID です。
 
-Xcodeを開き、 **Xcode** &raquo; **Preferences** &raquo; **Accounts** に移動します。Apple IDが表示されない場合は、追加します。ログインすると、Personal TeamがApple IDのチームリストに表示されます。
+Xcode を開き、 **Xcode** &raquo; **Preferences** &raquo; **Accounts** に移動します。Apple ID が表示されない場合は、追加します。ログインすると、Personal Team が Apple ID のチームリストに表示されます。
 
 ![Xcode Accounts](/img/installation/ios-xcode-accounts.png)
 
-### iOS Simulatorの作成
+### iOS Simulator の作成
 
-iOSシミュレータは、Mac上のiOSデバイスをエミュレートする。次のドキュメントは、iOSシミュレータを簡単にセットアップする方法です。詳細については、 [Appleのドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。
+iOS シミュレータは、Mac 上の iOS デバイスをエミュレートする。次のドキュメントは、iOS シミュレータを簡単にセットアップする方法です。詳細については、 [Apple のドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。
 
-Xcodeを開き、**Window** &raquo; **Devices and Simulators** に移動します。iPhone 11シミュレータが存在しない場合は作成します。
+Xcode を開き、**Window** &raquo; **Devices and Simulators** に移動します。iPhone 11 シミュレータが存在しない場合は作成します。
 
 ![iOS Simulators](/img/installation/ios-xcode-simulators-setup.png)
 
 ## Cordova のセットアップ
 
-Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。
+Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。
 
 ### ios-sim & ios-deploy
 
- [`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。
+[`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中に iOS シミュレータと iOS デバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。
 
 ```shell
 $ npm install -g ios-sim
@@ -62,17 +62,17 @@ $ brew install ios-deploy
 
 ## プロジェクト設定
 
-アプリをiOSシミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。
+アプリを iOS シミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。
 
 1. **ネイティブのプロジェクトが存在しない場合は、以下を実行します。**
 
-   Capacitorの場合は、以下を実行します。
+   Capacitor の場合は、以下を実行します。
 
    ```shell
    $ ionic capacitor add ios
    ```
 
-   Cordovaの場合は、以下を実行します。
+   Cordova の場合は、以下を実行します。
 
    ```shell
    $ ionic cordova prepare ios
@@ -80,76 +80,76 @@ $ brew install ios-deploy
 
    1. **[Package ID](/reference/glossary.md#package-id)を設定**
 
-       Capacitorの場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。
+      Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。
 
-       Cordovaの場合は、`config.xml`ファイルを開き、`id`を変更し`<widget>`でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。
+      Cordova の場合は、`config.xml`ファイルを開き、`id`を変更し`<widget>`でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。
 
    1. **<b>Xcode</b>でプロジェクトを開きます**
 
-       Capacitorの場合は、次のコマンドを実行してXcodeでアプリを開きます。
+      Capacitor の場合は、次のコマンドを実行して Xcode でアプリを開きます。
 
    ```shell
    $ ionic capacitor open ios
    ```
 
-    Cordovaの場合は、Xcodeを起動したあと、**File** &raquo; **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。
+   Cordova の場合は、Xcode を起動したあと、**File** &raquo; **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。
 
-1. **<b>Projectのナビゲーション</b>から、プロジェクトのrootにあるproject editorを開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。**
+1. **<b>Project のナビゲーション</b>から、プロジェクトの root にある project editor を開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。**
 
    ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
 
-1. **同じproject editorの<b>Signing</b>で、セクションで、<b>Automatically manage signing</b>が有効になっていることを確認します。** 次に、Development Teamを選択してください。Development Teamを選択すると、Xcodeは自動的にプロビジョニングと署名を準備しようとします。
+1. **同じ project editor の<b>Signing</b>で、セクションで、<b>Automatically manage signing</b>が有効になっていることを確認します。** 次に、Development Team を選択してください。Development Team を選択すると、Xcode は自動的にプロビジョニングと署名を準備しようとします。
 
    ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
 
-## Xcodeで実行する
+## Xcode で実行する
 
-このワークフローでは、Xcodeは一般的なコンパイルと署名の問題を自動的に修正できます。
+このワークフローでは、Xcode は一般的なコンパイルと署名の問題を自動的に修正できます。
 
-1. **Ionicアプリを開発し、それをネイティブプロジェクトと同期させます。**
+1. **Ionic アプリを開発し、それをネイティブプロジェクトと同期させます。**
 
-    変更が検知がある度に、iOSシミュレータやデバイスが変更を検知するより前に、IonicアプリをWebアセットにビルドする必要があります。その後、Webアセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスはIonic CLIコマンドひとつで簡単にできます。
+   変更が検知がある度に、iOS シミュレータやデバイスが変更を検知するより前に、Ionic アプリを Web アセットにビルドする必要があります。その後、Web アセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスは Ionic CLI コマンドひとつで簡単にできます。
 
-    Capacitorの場合は、以下を実行します。
+   Capacitor の場合は、以下を実行します。
 
    ```shell
    $ ionic capacitor copy ios
    $ ionic capacitor update
    ```
 
-   Cordovaの場合は、以下を実行します。
+   Cordova の場合は、以下を実行します。
 
    ```shell
    $ ionic cordova prepare ios
    ```
 
-1. **Xcodeで、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。**
+1. **Xcode で、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。**
 
    ![Xcode Play Button Area](/img/running/ios-xcode-play-button-area.png)
 
-## Ionic CLIを使用して実行する
+## Ionic CLI を使用して実行する
 
-Ionic CLIは、コマンドひとつで、Ionicアプリを作成、コピーし、iOSシミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。
+Ionic CLI は、コマンドひとつで、Ionic アプリを作成、コピーし、iOS シミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。
 
 ライブリロードを使うと、アプリのソースファイルに加えられた変更がウェブアセットの再構築を引き起こし、その変更は再デプロイすることなくシミュレータやデバイスに反映されます。
 
 :::caution
-iOSデバイスでは、デバイスとコンピュータが同じWi-Fiネットワーク上にある必要があります。デバイスが接続できるように、devサーバーの外部URLも必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。
+iOS デバイスでは、デバイスとコンピュータが同じ Wi-Fi ネットワーク上にある必要があります。デバイスが接続できるように、dev サーバーの外部 URL も必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。
 :::
 
-### Capacitorを使ったライブリロード
+### Capacitor を使ったライブリロード
 
-CapacitorにはXcodeを利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLIで、ライブリロードサーバを起動し、Capacitorを設定して1つのコマンドで使用できます。
+Capacitor には Xcode を利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLI で、ライブリロードサーバを起動し、Capacitor を設定して 1 つのコマンドで使用できます。
 
-以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcodeの再生ボタンをクリックします:
+以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcode の再生ボタンをクリックします:
 
 ```shell
 ionic capacitor run ios -l --external
 ```
 
-### Cordovaを使ったライブリロード
+### Cordova を使ったライブリロード
 
-Cordovaはネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。
+Cordova はネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。
 
 ライブリロードサーバを起動し、アプリをビルドしてデプロイするには、以下を実行します:
 
@@ -157,25 +157,25 @@ Cordovaはネイティブプロジェクトをプログラムでビルドして
 ionic cordova run ios -l --external
 ```
 
-## iOSアプリのデバッグ
+## iOS アプリのデバッグ
 
-アプリがiOSデバイスやシミュレーター上で動くようになったら、Safariでデバッグできます。
+アプリが iOS デバイスやシミュレーター上で動くようになったら、Safari でデバッグできます。
 
-### Safari Web Inspectorを使う
+### Safari Web Inspector を使う
 
-SafariはiOSシミュレータとデバイスのWeb Inspectorをサポートしています。Developメニューを開いてシミュレータまたはデバイスを選択し、Ionic Appを選択してWeb Inspectorを開きます。
+Safari は iOS シミュレータとデバイスの Web Inspector をサポートしています。Develop メニューを開いてシミュレータまたはデバイスを選択し、Ionic App を選択して Web Inspector を開きます。
 
 :::note
-*Develop** メニューが非表示になってる場合は、**Safari** &raquo; **Preferences** &raquo; **Advanced** &raquo; **Show Develop menu in menu bar** から有効にします。
+\*Develop** メニューが非表示になってる場合は、**Safari** &raquo; **Preferences** &raquo; **Advanced** &raquo; **Show Develop menu in menu bar\*\* から有効にします。
 
-アプリがリストにない場合は、 **Settings** &raquo; **Safari** &raquo; **Advanced** &raquo; **Web Inspector** からデバイスのWeb Inspectorを有効にする必要があります。
+アプリがリストにない場合は、 **Settings** &raquo; **Safari** &raquo; **Advanced** &raquo; **Web Inspector** からデバイスの Web Inspector を有効にする必要があります。
 :::
 
 ![Safari Web Inspector](/img/running/ios-safari-web-inspector-timelines.png)
 
 ## ネイティブログの表示
 
-Xcodeで実行している場合、ネイティブログはXcodeの **Console** にあります。
+Xcode で実行している場合、ネイティブログは Xcode の **Console** にあります。
 
 :::note
 **Console** が表示されない場合, **View** &raquo; **Debug Area** &raquo; **Activate Console**を有効化してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
index 3e5ea1a3c22..1125091b1da 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
@@ -14,16 +14,16 @@ import TabItem from '@theme/TabItem';
   />
 </head>
 
-開発者がモバイルアプリやPWAを開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。
+開発者がモバイルアプリや PWA を開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。
 
 ## inputmode
 
-開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他のemail入力の最適化も行われます。
+開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他の email 入力の最適化も行われます。
 
-`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。
+`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。
 
-特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、emailの入力では、 `inputmode.` を指定するのではなく、`type="email"`
-を使用する必要があります。これは、入力されるデータが常にemailの形式になるためです。一方、inputがemailまたはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。
+特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、email の入力では、 `inputmode.` を指定するのではなく、`type="email"`
+を使用する必要があります。これは、入力されるデータが常に email の形式になるためです。一方、input が email またはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。
 
 使用可能な値のリストについては、<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode" target="_blank" rel="noreferrer">inputmode Documentation</a>を参照してください。
 
@@ -102,14 +102,14 @@ import TabItem from '@theme/TabItem';
 <Codepen user="ionic" slug="abvJVVv" height="400" />
 
 :::note
-`inputmode` 属性はChrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
+`inputmode` 属性は Chrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
 :::
 
 ## enterkeyhint
 
-`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者はinputが `enterkeyhint="search"` であることを確認する必要があります。
+`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者は input が `enterkeyhint="search"` であることを確認する必要があります。
 
-`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。
+`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。
 
 使用可能な値のリストについては、 <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute" target="_blank" rel="noreferrer">enterkeyhint Standard</a> を参照してください。
 
@@ -173,23 +173,23 @@ import TabItem from '@theme/TabItem';
 
 ## ダークモード
 
-デフォルトでは、キーボードテーマはOSによって決定されます。たとえば、iOSでダークモードが有効になっている場合、アプリケーションのCSSにダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。
+デフォルトでは、キーボードテーマは OS によって決定されます。たとえば、iOS でダークモードが有効になっている場合、アプリケーションの CSS にダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。
 
-モバイルWebブラウザやPWAでアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。
+モバイル Web ブラウザや PWA でアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。
 
 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>.
 
 ## アクセサリバーを非表示にする
 
-ウェブベースのアプリケーションを実行すると、iOSはキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。
+ウェブベースのアプリケーションを実行すると、iOS はキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。
 
-モバイルWebブラウザやPWAでアプリを実行する場合、アクセサリバーを非表示にする方法はありません。
+モバイル Web ブラウザや PWA でアプリを実行する場合、アクセサリバーを非表示にする方法はありません。
 
 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>.
 
 ## キーボードのライフサイクルイベント
 
-スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。CapacitorとCordovaアプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントをListenします。モバイルブラウザやPWAで動作するアプリでは、サポートされていればVisual Viewport APIを使用することができる。Ionic Frameworkはこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。
+スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。Capacitor と Cordova アプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントを Listen します。モバイルブラウザや PWA で動作するアプリでは、サポートされていれば Visual Viewport API を使用することができる。Ionic Framework はこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。
 
 ### Usage
 
@@ -269,5 +269,5 @@ watch(keyboardHeight, () => {
 ````
 
 :::note
-モバイルWebブラウザやPWAで動作するアプリでは、 Keyboard Lifecycle EventsはChrome 62以降とiOS Safari 13.0以降でのみサポートされています。
+モバイル Web ブラウザや PWA で動作するアプリでは、 Keyboard Lifecycle Events は Chrome 62 以降と iOS Safari 13.0 以降でのみサポートされています。
 :::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
index a2f494f10e1..205f6873632 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
@@ -13,12 +13,12 @@ title: プレビュー
 ネイティブ機能のテストには、ターゲットとするプラットフォームやニーズに応じて、さまざまなオプションがあります。
 
 - Web ブラウザでローカルに実行する (ネイティブ機能については [Platform Detection](../core-concepts/cross-platform.md) を使用します)
-- [iOSへのデプロイ](ios.md)
-- [Androidへのデプロイ](android.md)
+- [iOS へのデプロイ](ios.md)
+- [Android へのデプロイ](android.md)
 
 ## ウェブブラウザでローカルに実行する
 
-Ionic の最も強力な機能の1つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefoxの開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。
+Ionic の最も強力な機能の 1 つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefox の開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。
 
 これを行うには、プロジェクトのディレクトリで、コマンドラインから `ionic serve` を実行します。
 
@@ -47,7 +47,7 @@ $ ionic serve
 
 ### Chrome
 
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linuxでは`Ctrl+Shift+I`、Macでは`Cmd+Opt+I`を押して、Chrome開発者ツールを開きます。
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では`Ctrl+Shift+I`、Mac では`Cmd+Opt+I`を押して、Chrome 開発者ツールを開きます。
 
 <img src="/docs/img/developing/previewing/chrome-dev-tools.png" alt="Chrome Dev Tools" />
 
@@ -59,11 +59,11 @@ $ ionic serve
 
 :::note
 
-前提条件：Safariの詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。
+前提条件：Safari の詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。
 
 :::
 
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safariの**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safari の**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。
 
 <img src="/docs/img/developing/previewing/safari-responsive-design-mode.png" alt="Safari Responsive Design Mode" />
 
@@ -73,7 +73,7 @@ $ ionic serve
 
 ### Firefox
 
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/LinuxではCtrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefoxの開発者ツールを開きます。
+アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では Ctrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefox の開発者ツールを開きます。
 
 <img src="/docs/img/developing/previewing/firefox-responsive-design-mode.png" alt="Firefox Responsive Design Mode" />
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
index 71e2d2e70a1..4b653c2eebf 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
@@ -10,7 +10,7 @@ title: 基本
   />
 </head>
 
-Ionic CLIでアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。
+Ionic CLI でアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。
 
 ## プロジェクト構成
 
@@ -62,7 +62,7 @@ $ ionic generate
   guard
 ```
 
-選択後、Ionic CLIは名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。
+選択後、Ionic CLI は名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。
 
 :::note
 `portfolio/intro` のような任意のレベルのネストが可能です。例えば、`ionic g component "portfolio/intro/About Me"`とすることで、コンポーネントを簡単にページにスコープすることができます。
@@ -88,8 +88,8 @@ UPDATE src/app/app-routing.module.ts (475 bytes)
 [OK] Generated page!
 ```
 
-Ionic CLIは、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLIがフードの下で使用されます。
+Ionic CLI は、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLI がフードの下で使用されます。
 
-新しいページ用のファイルとディレクトリを作成した後、CLIは新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。
+新しいページ用のファイルとディレクトリを作成した後、CLI は新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。
 
 詳細については、コマンドラインから `ionic g --help` を実行するか、`ionic generate` の [the documentation](../cli/commands/generate.md) を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
index 878d4b41995..0897de64e2e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
@@ -11,7 +11,7 @@ sidebar_label: はじめ方
   />
 </head>
 
-新しいIonicアプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとはCLIが処理してくれる。
+新しい Ionic アプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとは CLI が処理してくれる。
 
 ```shell-session
 $ ionic start
@@ -25,7 +25,7 @@ the first argument to ionic start.
 ? Project name: █
 ```
 
-Ionic CLIでは、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。
+Ionic CLI では、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。
 
 ```shell-session
 $ ionic start myApp tabs
@@ -33,7 +33,7 @@ $ ionic start myApp tabs
 
 ここでは、 `myApp` がプロジェクト名、 `tabs` がスターターテンプレート、そしてプロジェクトの種類は `angular` です。
 
-利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3つのテンプレートが利用可能です。
+利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3 つのテンプレートが利用可能です。
 
 - `tabs`: タブベースのレイアウト
 - `sidemenu`: サイドメニューレイアウト
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
index 00efcb1b71a..d87fe56bc67 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
@@ -12,45 +12,45 @@ title: 開発者向けのヒント
 
 ## Permission Errors の解決
 
-パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するようにnpmを設定する必要があります。
+パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するように npm を設定する必要があります。
 
 :::note
-`sudo` とnpmの併用は、さらなる問題を引き起こす可能性があるため、推奨されません。
+`sudo` と npm の併用は、さらなる問題を引き起こす可能性があるため、推奨されません。
 :::
 
-このガイドには、パーミッションの問題を解決するための2つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。
+このガイドには、パーミッションの問題を解決するための 2 つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。
 
 ### Option 1
 
-権限の問題を回避する最善の方法は、 node version manager を使用してNodeJSとnpmを再インストールすることです。
+権限の問題を回避する最善の方法は、 node version manager を使用して NodeJS と npm を再インストールすることです。
 
-このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、  [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) を参照してください。Windowsの追加オプションと手順については、npmのドキュメントを参照してください。
+このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、 [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) を参照してください。Windows の追加オプションと手順については、npm のドキュメントを参照してください。
 
-1. nvmのインストール
+1. nvm のインストール
 
    ```shell
    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
    ```
 
-1. 新しい端末はnvmを使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。
+1. 新しい端末は nvm を使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。
 
    ```shell
    $ command -v nvm
    ```
 
-1. NodeJSの最新のLTSリリースをダウンロードしてインストールするには、次のコマンドを実行します:
+1. NodeJS の最新の LTS リリースをダウンロードしてインストールするには、次のコマンドを実行します:
 
    ```shell
    $ nvm install --lts
    ```
 
-1. 新しくインストールしたNodeJSをデフォルト環境として設定します:
+1. 新しくインストールした NodeJS をデフォルト環境として設定します:
 
    ```shell
    $ nvm alias default lts/*
    ```
 
-1. 新しい端末はnvmコントロールのNodeJSを使うようになりました:
+1. 新しい端末は nvm コントロールの NodeJS を使うようになりました:
 
    ```shell
    $ node -v  # will print the version installed above
@@ -65,7 +65,7 @@ title: 開発者向けのヒント
   <em>Windowsでは利用できません</em>
 </small>
 
-npmのディレクトリの所有者を現在のユーザに変更します:
+npm のディレクトリの所有者を現在のユーザに変更します:
 
 ```shell
 $ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
@@ -76,7 +76,7 @@ $ sudo chown -R $(whoami) ~/.npm ~/.npmrc
 
 ## 依存モジュールの更新
 
-[npm](https://www.npmjs.com/) dependencyをアップデートするためには、`<package-name>` をアップデートしたいパッケージ名に変更して以下を実行します:
+[npm](https://www.npmjs.com/) dependency をアップデートするためには、`<package-name>` をアップデートしたいパッケージ名に変更して以下を実行します:
 
 ```shell
 npm install <package-name>@<version|latest> --save
@@ -111,11 +111,11 @@ function myBrokenFunction() {
 }
 ```
 
-アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScriptを1行ずつ実行し、関数が正確にどこで中断するかを調べることができます。
+アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScript を 1 行ずつ実行し、関数が正確にどこで中断するかを調べることができます。
 
 ## モードの変更
 
-デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動しているURL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URLはこうなります: `http://localhost:8100/?ionic:mode=ios`
+デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動している URL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URL はこうなります: `http://localhost:8100/?ionic:mode=ios`
 
 :::note
 しかし、どのプラットフォームが現在使用されているかをブラウザがどのように認識するか、ということは変わらないでしょう。プラットフォームはデバイスの検出とユーザーエージェントの検査によって決定されます。そのため、プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。これを行うには、Chrome DevTools を開き、<kbd>Ctrl+Shift+i</kbd>(Mac では <kbd>Cmd+Option+I</kbd>) でデバイスのモードをオンに切り替えでください。デバイスモードの切り替えは、<kbd>Ctrl+Shift+M</kbd>(<kbd>Cmd+Option+M</kbd> on Mac)で行います。
@@ -147,6 +147,6 @@ Xcode を開き、`../path-to-app/platforms/ios/myApp.xcodeproj` を開きます
 
 ## Genymotion Android エミュレーターを使用する
 
-Android SDKには標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。
+Android SDK には標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。
 
-[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPSやカメラなどのネイティブ機能へのアクセスを許可します。
+[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPS やカメラなどのネイティブ機能へのアクセスを許可します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
index ed09b6446ab..10083ff549a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
@@ -22,9 +22,9 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS、JavaScriptなどのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
+Ionic Framework はオープンソースの UI ツールキットで、HTML、CSS、JavaScript などのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
 
-[Ionicのインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。
+[Ionic のインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。
 
 <intro-end />
 
@@ -58,62 +58,62 @@ Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS
 
 ## 概要
 
-Ionicは、アプリのフロントエンドのUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionicについてもっと知りたい方向けに、<a href="https://youtu.be/p3AN3igqiRc" target="_blank">私たちはビデオを作成しました</a>。ここから、基本的な使い方を学ぶことができます。
+Ionic は、アプリのフロントエンドの UX と UI インタラクション（UI コントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionic についてもっと知りたい方向けに、<a href="https://youtu.be/p3AN3igqiRc" target="_blank">私たちはビデオを作成しました</a>。ここから、基本的な使い方を学ぶことができます。
 
 ### どこでもひとつのコードで
 
-Ionicは、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionicアプリはすべてのデバイス上で適切な外観と操作感を提供します。
+Ionic は、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionic アプリはすべてのデバイス上で適切な外観と操作感を提供します。
 
 ### パフォーマンスにフォーカス
 
-Ionicは、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。
+Ionic は、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。
 
 ### クリーンでシンプル、機能的なデザイン
 
-Ionicは、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。
+Ionic は、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。
 
-### ネイティブおよびWebに最適化
+### ネイティブおよび Web に最適化
 
-IonicはネイティブアプリケーションのUIガイドラインをエミュレートし、ネイティブSDKを使用して、ネイティブアプリのUI標準とデバイス機能を、オープンWebの完全なパワーと柔軟性とともに実現します。IonicはCapacitor(またはCordova)を使ってネイティブにデプロイするか、Progressive Web Appとしてブラウザで実行します。
+Ionic はネイティブアプリケーションの UI ガイドラインをエミュレートし、ネイティブ SDK を使用して、ネイティブアプリの UI 標準とデバイス機能を、オープン Web の完全なパワーと柔軟性とともに実現します。Ionic は Capacitor(または Cordova)を使ってネイティブにデプロイするか、Progressive Web App としてブラウザで実行します。
 
 ## ゴール
 
 ### クロスプラットフォーム
 
-ネイティブのiOS、Android、デスクトップ、Webなど、複数のプラットフォームで動作するアプリをProgressive Web Appとして、すべて1つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。
+ネイティブの iOS、Android、デスクトップ、Web など、複数のプラットフォームで動作するアプリを Progressive Web App として、すべて 1 つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。
 
-### Web標準
+### Web 標準
 
-Ionic Frameworkは、Custom ElementsやShadow DOMなどの最新のWeb APIを使用して、信頼性の高い [Web標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、およびJavaScriptの上に構築されています。このため、Ionicコンポーネントは安定したAPIを備えており、単一のプラットフォーム・ベンダーの思い付きではありません。
+Ionic Framework は、Custom Elements や Shadow DOM などの最新の Web API を使用して、信頼性の高い [Web 標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、および JavaScript の上に構築されています。このため、Ionic コンポーネントは安定した API を備えており、単一のプラットフォーム・ベンダーの思い付きではありません。
 
 ### 美しいデザイン
 
-クリーンでシンプル、機能的。Ionic Frameworkは全てのプラットフォームで動作し、美しく表示されるように設計されています。
+クリーンでシンプル、機能的。Ionic Framework は全てのプラットフォームで動作し、美しく表示されるように設計されています。
 あらかじめデザインされたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、すばらしい(まだ拡張可能な)基本テーマから始めます。
 
 ### シンプル
 
-Ionic Frameworkはシンプルさを念頭に置いて構築されているので、Ionicアプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。
+Ionic Framework はシンプルさを念頭に置いて構築されているので、Ionic アプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。
 
-## Frameworkの互換性
+## Framework の互換性
 
-Ionicの過去のリリースはAngularと密結合されていましたが、フレームワークのバージョン4.xからはスタンドアロンの<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Component</a>ライブラリとして動作するように再設計され、Angularのような最新のJavaScriptフレームワークと併用できるようになりました。IonicはReactやVueを含むほとんどのフロントエンドフレームワークで使用できますが、Webコンポーネントを完全にサポートするにはshimが必要なフレームワークもあります。
+Ionic の過去のリリースは Angular と密結合されていましたが、フレームワークのバージョン 4.x からはスタンドアロンの<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Component</a>ライブラリとして動作するように再設計され、Angular のような最新の JavaScript フレームワークと併用できるようになりました。Ionic は React や Vue を含むほとんどのフロントエンドフレームワークで使用できますが、Web コンポーネントを完全にサポートするには shim が必要なフレームワークもあります。
 
 ### JavaScript
 
-Ionic Frameworkを <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、scriptタグだけでWebページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、IonicをWordPressのようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。
+Ionic Framework を <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、script タグだけで Web ページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、Ionic を WordPress のようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。
 
 ### Angular
 
-Angularは常にIonicの素晴らしさの中心にありました。コアコンポーネントはスタンドアロンのWeb Componentライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージはAngularエコシステムとの統合を簡単にします。 `@ionic/angular` はIonic 2/3に期待されるすべての機能を含んでおり、AngularルータのようなコアAngularライブラリと統合されています。
+Angular は常に Ionic の素晴らしさの中心にありました。コアコンポーネントはスタンドアロンの Web Component ライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージは Angular エコシステムとの統合を簡単にします。 `@ionic/angular` は Ionic 2/3 に期待されるすべての機能を含んでおり、Angular ルータのようなコア Angular ライブラリと統合されています。
 
 ### React
 
-Ionicは現在、人気のReactライブラリを公式にサポートしています。Ionic Reactを使うと、React開発者は既存のWebスキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコアIonicコンポーネントを、ネイティブなReactコンポーネントを使っているような感覚で使用することができます。
+Ionic は現在、人気の React ライブラリを公式にサポートしています。Ionic React を使うと、React 開発者は既存の Web スキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコア Ionic コンポーネントを、ネイティブな React コンポーネントを使っているような感覚で使用することができます。
 
 ### Vue
 
-Ionicは現在、人気のVue3ライブラリを公式にサポートしています。 Ionic Vueを使用すると、Vue開発者は既存のWebスキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコアIonicコンポーネントを使用できますが、ネイティブのVueコンポーネントを使用しているように感じられます。
+Ionic は現在、人気の Vue3 ライブラリを公式にサポートしています。 Ionic Vue を使用すると、Vue 開発者は既存の Web スキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコア Ionic コンポーネントを使用できますが、ネイティブの Vue コンポーネントを使用しているように感じられます。
 
 ### Future Support
 
@@ -121,23 +121,23 @@ Ionicは現在、人気のVue3ライブラリを公式にサポートしてい
 
 ## Ionic CLI
 
-公式の [Ionic CLI](cli.md) は、Ionicアプリを迅速に構築し、Ionic開発者に多くの役に立つコマンドを提供するツールです。CLIには、Ionicのインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLIを使用してクラウドの構築と展開を実行し、アカウントを管理できます。
+公式の [Ionic CLI](cli.md) は、Ionic アプリを迅速に構築し、Ionic 開発者に多くの役に立つコマンドを提供するツールです。CLI には、Ionic のインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLI を使用してクラウドの構築と展開を実行し、アカウントを管理できます。
 
 ## Appflow
 
-Ionicアプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは <strong> オープンソースフレームワーク</strong> とは分離した <a href="https://ionic.io/appflow" target="_blank">Appflow</a> と呼んでいる製品アプリ用の商用サービスを提供しています。
+Ionic アプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは <strong> オープンソースフレームワーク</strong> とは分離した <a href="https://ionic.io/appflow" target="_blank">Appflow</a> と呼んでいる製品アプリ用の商用サービスを提供しています。
 
-Appflowは、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードからIonicアプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。
+Appflow は、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードから Ionic アプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。
 
-Appflowには <a href="https://dashboard.ionicframework.com/signup" target="_blank">Ionic Account</a> が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。
+Appflow には <a href="https://dashboard.ionicframework.com/signup" target="_blank">Ionic Account</a> が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。
 
 ## エコシステム
 
-Ionic Frameworkはコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業がIonicを使って、どこでも動くすばらしいアプリを作ってリリースしています。
+Ionic Framework はコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業が Ionic を使って、どこでも動くすばらしいアプリを作ってリリースしています。
 
 ### コミュニティに参加する
 
-Ionicの開発者は世界200か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:
+Ionic の開発者は世界 200 か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:
 
 - <a href="https://forum.ionicframework.com/" target="_blank">
     Forum:
@@ -154,6 +154,6 @@ Ionicの開発者は世界200か国以上に何百万人もいます。コミュ
 
 ## ライセンス
 
-Ionic Frameworkは無料のオープンソースプロジェクトで、 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a> ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MITライセンスは、jQueryやRuby on Railsなどの人気プロジェクトで使用されているのと同じライセンスです。
+Ionic Framework は無料のオープンソースプロジェクトで、 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a> ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MIT ライセンスは、jQuery や Ruby on Rails などの人気プロジェクトで使用されているのと同じライセンスです。
 
-このドキュメントコンテンツ(<a href="https://github.com/ionic-team/ionic-docs" target="_blank">ionic-docs</a>リポジトリにあります)は、Apache 2ライセンスでライセンスされています。
+このドキュメントコンテンツ(<a href="https://github.com/ionic-team/ionic-docs" target="_blank">ionic-docs</a>リポジトリにあります)は、Apache 2 ライセンスでライセンスされています。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
index 1563c927755..30ea8431b54 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
@@ -11,13 +11,13 @@ sidebar_label: パッケージ & CDN
   />
 </head>
 
-Ionicは、テスト環境、Angular、その他のフレームワーク、またはVanilla JSといったすべての状況で、Ionic Frameworkを使い始めるために使用できるさまざまなパッケージを提供しています。
+Ionic は、テスト環境、Angular、その他のフレームワーク、または Vanilla JS といったすべての状況で、Ionic Framework を使い始めるために使用できるさまざまなパッケージを提供しています。
 
 ## Ionic Framework CDN
 
-Ionicフレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDNから組み込むことができます。。
+Ionic フレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDN から組み込むことができます。。
 
-CDNからフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTMLファイルの `<head>`  要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。
+CDN からフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTML ファイルの `<head>` 要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
@@ -25,23 +25,23 @@ CDNからフレームワークにアクセスするには、 [jsdelivr](https://
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
 ```
 
-これにより、フレームワークをインストールしなくても、すべてのIonic Frameworkのコアコンポーネントを使用することができます。CSSバンドルには、すべてのIonic [Global Stylesheets](../layout/global-stylesheets) が含まれます。
+これにより、フレームワークをインストールしなくても、すべての Ionic Framework のコアコンポーネントを使用することができます。CSS バンドルには、すべての Ionic [Global Stylesheets](../layout/global-stylesheets) が含まれます。
 
 :::note
-これはAngularや他のフレームワークをインストールしません。これにより、フレームワークなしでIonic Frameworkのコアコンポーネントを使用できます。
+これは Angular や他のフレームワークをインストールしません。これにより、フレームワークなしで Ionic Framework のコアコンポーネントを使用できます。
 :::
 
 ## Ionic + Angular
 
-AngularプロジェクトでIonic Frameworkを使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべてのIonic Frameworkコンポーネントと、Angularのサービスおよび機能を使うことができます。
+Angular プロジェクトで Ionic Framework を使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべての Ionic Framework コンポーネントと、Angular のサービスおよび機能を使うことができます。
 
 ```shell
 npm install @ionic/angular@latest --save
 ```
 
-新しいIonic Frameworkのリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npmを使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。
+新しい Ionic Framework のリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npm を使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。
 
-Ionicを既存のAngularプロジェクトに追加するには、Angular CLIの `ng add` 機能を使用します。
+Ionic を既存の Angular プロジェクトに追加するには、Angular CLI の `ng add` 機能を使用します。
 
 ```shell
 ng add @ionic/angular
@@ -51,7 +51,7 @@ ng add @ionic/angular
 
 ## Ionic + React
 
-Ionicを既存のReactプロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。
+Ionic を既存の React プロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。
 
 ```shell
 $ npm install @ionic/react
@@ -60,7 +60,7 @@ $ npm install @ionic/react-router
 
 ### CSS
 
-必要なCSSをReactプロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。
+必要な CSS を React プロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。
 
 ```javascript
 /* Core CSS required for Ionic components to work properly */
@@ -82,13 +82,13 @@ import '@ionic/react/css/display.css';
 
 ## Ionic + Vue
 
-既存のVueプロジェクトにIonic Frameworkを追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。
+既存の Vue プロジェクトに Ionic Framework を追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。
 
 ```shell
 npm install @ionic/vue @ionic/vue-router
 ```
 
-その後、Vueアプリに`IonicVue`プラグインをインストールする必要があります。
+その後、Vue アプリに`IonicVue`プラグインをインストールする必要があります。
 
 **main.js**
 
@@ -109,7 +109,7 @@ router.isReady().then(() => {
 
 ### ルーティング
 
-Vueアプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/vue-router`から依存関係をインポートする必要があります。
+Vue アプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/vue-router`から依存関係をインポートする必要があります。
 
 **router/index.js**
 
@@ -130,7 +130,7 @@ export default router;
 
 ### CSS
 
-Vueプロジェクトで必要なCSSをimportするには、`main.js` ファイルに以下を追加します。
+Vue プロジェクトで必要な CSS を import するには、`main.js` ファイルに以下を追加します。
 
 ```javascript
 /* Core CSS required for Ionic components to work properly */
@@ -150,11 +150,11 @@ import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 ```
 
-ここからは、Ionic Frameworkでの開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。
+ここからは、Ionic Framework での開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。
 
 ## Ionicons CDN
 
-IoniconsはデフォルトでIonic Frameworkに同梱されているので、Ionicを使用している場合はインストールは不要です。Ionic Frameworkを使用せずにIoniconsを使用するためには、ページの終わりの近くにある `</body>` の閉じタグの直前に以下の `<script>` タグを配置します。
+Ionicons はデフォルトで Ionic Framework に同梱されているので、Ionic を使用している場合はインストールは不要です。Ionic Framework を使用せずに Ionicons を使用するためには、ページの終わりの近くにある `</body>` の閉じタグの直前に以下の `<script>` タグを配置します。
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
index b52014cd3f1..3ee3bd82f49 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
@@ -13,21 +13,21 @@ import AppWizard from '@components/page/intro/AppWizard';
   />
 </head>
 
-Ionicアプリは、主にIonic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLIは、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic teamが推奨しているインストール方法です。Ionic CLIは、アプリの実行や、Appflowといった他のサービスに接続などができる重要なツールです。
+Ionic アプリは、主に Ionic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLI は、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic team が推奨しているインストール方法です。Ionic CLI は、アプリの実行や、Appflow といった他のサービスに接続などができる重要なツールです。
 
 <AppWizard />
 
-## Ionic CLIをインストール
+## Ionic CLI をインストール
 
-続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)でIonicをセットアップできる環境を説明しています。
+続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)で Ionic をセットアップできる環境を説明しています。
 
-npmを使って Ionic CLI をインストールします:
+npm を使って Ionic CLI をインストールします:
 
 ```shell
 npm install -g @ionic/cli
 ```
 
-Ionic CLIが以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。
+Ionic CLI が以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。
 
 ```shell
 $ npm uninstall -g ionic
@@ -37,12 +37,12 @@ $ npm install -g @ionic/cli
 
 :::note
 `-g` オプションは、 _グローバルにインストール_ することを意味しています。パッケージをグローバルにインストールすると `EACCES` パーミッションエラーが起きる可能性があります。
-管理権限なしでnpmがグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。
+管理権限なしで npm がグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。
 :::
 
 ## アプリケーションの起動
 
-Ionicアプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な3つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。
+Ionic アプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な 3 つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。
 
 ```shell
 ionic start
@@ -50,11 +50,11 @@ ionic start
 
 ![start app thumbnails](/img/installation/start-app-thumbnails.png)
 
-Ionicアプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。
+Ionic アプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。
 
 ## アプリケーションを実行する
 
-ほとんどのIonicアプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。
+ほとんどの Ionic アプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。
 
 ```shell
 $ cd myApp
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
index 9d1ab81a06d..101674bd522 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
@@ -10,29 +10,29 @@ title: 環境設定
   />
 </head>
 
-Ionic Frameworkをはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。
+Ionic Framework をはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。
 
-もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Codeは
-Microsoft製の無料でとてもパワフルなテキストエディタです。
+もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Code は
+Microsoft 製の無料でとてもパワフルなテキストエディタです。
 
 ## ターミナル
 
 :::note
-Ionic開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。
+Ionic 開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。
 :::
 
-一般的に、OSに最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末はIonicで正常に動作しますが、サポートされていない場合があります。
+一般的に、OS に最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末は Ionic で正常に動作しますが、サポートされていない場合があります。
 
-- Windowsでは、 **コマンドプロンプト** と **PowerShell** がサポートされています。<a href="https://docs.microsoft.com/en-us/windows/wsl/faq" target="_blank">WSL</a>はIonicで動作することがわかっていますが、サポートされていない可能性があります。
-- macOSでは、組み込みの **ターミナル** アプリがサポートされています。
+- Windows では、 **コマンドプロンプト** と **PowerShell** がサポートされています。<a href="https://docs.microsoft.com/en-us/windows/wsl/faq" target="_blank">WSL</a>は Ionic で動作することがわかっていますが、サポートされていない可能性があります。
+- macOS では、組み込みの **ターミナル** アプリがサポートされています。
 
-Git Bash（<a href="https://git-scm.com" target="_blank">git-scm.com</a>）はTTY対話機能をサポートしておらず、Ionicはサポートしていません。
+Git Bash（<a href="https://git-scm.com" target="_blank">git-scm.com</a>）は TTY 対話機能をサポートしておらず、Ionic はサポートしていません。
 
 ## Node と npm
 
-モダンなJavaScriptプロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するためにLTSバージョンを選択することをお勧めします。
+モダンな JavaScript プロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するために LTS バージョンを選択することをお勧めします。
 
-NodeにはJavaScriptパッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。
+Node には JavaScript パッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。
 
 インストールできているかを確認するためには、新しいターミナルウィンドウを開いて以下を実行します。
 
@@ -49,7 +49,7 @@ $ npm --version
 
 必須ではありませんが、バージョン管理システムの[Git](../reference/glossary.md#git)の利用を強くお勧めします。
 
-Gitは [GitHub](https://github.com/) のようなGitホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらのGitホスティングサービスのチュートリアルをご確認ください:
+Git は [GitHub](https://github.com/) のような Git ホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらの 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)
@@ -65,4 +65,4 @@ git --version
 
 ### Git GUI
 
-Gitはコマンドラインユーティリティですが、利用可能な [GUIクライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHubとうまく連携します。
+Git はコマンドラインユーティリティですが、利用可能な [GUI クライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHub とうまく連携します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
index feefd9a52f6..f39f660cd26 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
@@ -7,16 +7,17 @@ import DocsCards from '@components/global/DocsCards';
 
 # はじめてアプリ制作チュートリアル
 
-Ionicアプリの構築に使用する予定のJavaScriptフレームワークを選びます。
+Ionic アプリの構築に使用する予定の JavaScript フレームワークを選びます。
 
 <DocsCards>
   <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
     <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
   </DocsCard>
 
-  <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
-    <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
+{' '}
+<DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+  <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+</DocsCard>
 
   <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
     <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
index e19041a8e66..9c5a6b873bb 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
@@ -15,16 +15,17 @@ import DocsCards from '@components/global/DocsCards';
 
 ## 最初のアプリを作る
 
-Ionicアプリを構築する際に使用する予定のJavaScriptフレームワークを選択します。
+Ionic アプリを構築する際に使用する予定の JavaScript フレームワークを選択します。
 
 <DocsCards>
   <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
     <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
   </DocsCard>
 
-  <DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
-    <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
+{' '}
+<DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
+  <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
+</DocsCard>
 
   <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
     <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
index 5c41a8bf083..e3824a71af0 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
@@ -10,11 +10,11 @@ title: Ionic VS Code Extension
   />
 </head>
 
-Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさまざまな機能を、VS Codeのウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーにIonicのロゴが表示されるようになります。
+Ionic Visual Studio Code 拡張は、Ionic アプリの開発に共通するさまざまな機能を、VS Code のウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace 上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーに Ionic のロゴが表示されるようになります。
 
 ## 新規プロジェクトの作成
 
-空のディレクトリから、テンプレートオプションの1つをクリックし、アプリ名を指定することで、新しいAngular、React、またはVueプロジェクトを作成することができます。
+空のディレクトリから、テンプレートオプションの 1 つをクリックし、アプリ名を指定することで、新しい Angular、React、または Vue プロジェクトを作成することができます。
 
 <img
   src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif"
@@ -32,7 +32,7 @@ Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさ
   alt="Capacitor追加のビデオ"
 />
 
-Capacitorが統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS上でアプリを実行することができるようになりました。
+Capacitor が統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS 上でアプリを実行することができるようになりました。
 
 ## Doing More
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
index 3a03ad0fb58..e427cd56c58 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
@@ -12,10 +12,10 @@ inlineHtmlPreviews: true
   />
 </head>
 
-Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置やpaddingやmarginを修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
+Ionic Framewor は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
 
 :::note
-使用可能なIonic Frameworkスターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。
+使用可能な Ionic Framework スターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。
 :::
 
 ## テキストの修正
@@ -113,7 +113,7 @@ Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置
 
 ### Responsive Text Classes
 
-上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの1つです。
+上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの 1 つです。
 
 以下の表は、 `{modifier}` のデフォルトの挙動です。 `left`, `right`, `start`, `end`, `center`, `justify`, `wrap`, `nowrap`, `uppercase`, `lowercase`, `capitalize` は上記の通りです。
 
@@ -127,9 +127,9 @@ Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置
 
 ## 要素の配置
 
-### Float要素
+### Float 要素
 
-CSSプロパティのfloatは、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。
+CSS プロパティの float は、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。
 
 ```html
 <ion-grid>
@@ -141,8 +141,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ
         src="https://ionicframework.com/docs/img/demos/avatar.svg"
         height="50px"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
     <ion-col>
       <h3>float-left</h3>
@@ -152,8 +151,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ
         height="50px"
         class="ion-float-left"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
     <ion-col>
       <h3>float-right</h3>
@@ -163,8 +161,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ
         height="50px"
         class="ion-float-right"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
   </ion-row>
 </ion-grid>
@@ -177,9 +174,9 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ
 | `.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. |
 
-### レスポンシブなFloatクラス
+### レスポンシブな Float クラス
 
-上記のすべてのfloatクラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。
+上記のすべての float クラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。
 
 次の表に、デフォルトの動作を示します。 `{modifier}` は、前述のように `left`, `right`, `start`, `end` のいずれかです。
 
@@ -193,7 +190,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ
 
 ## 要素の表示
 
-display CSSプロパティは、要素を表示するかどうかを決定します。要素はDOM内に残りますが、非表示の場合はレンダリングされません。
+display CSS プロパティは、要素を表示するかどうかを決定します。要素は DOM 内に残りますが、非表示の場合はレンダリングされません。
 
 ```html
 <ion-grid>
@@ -218,9 +215,9 @@ display CSSプロパティは、要素を表示するかどうかを決定しま
 | ----------- | --------------- | --------------------------- |
 | `.ion-hide` | `display: none` | The element will be hidden. |
 
-### ResponsiveなDisplay属性
+### Responsive な Display 属性
 
-画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
+画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
 
 | Class                | Description                                                                                          |
 | -------------------- | ---------------------------------------------------------------------------------------------------- |
@@ -231,9 +228,9 @@ display CSSプロパティは、要素を表示するかどうかを決定しま
 
 ## コンテンツのスペース
 
-### 要素のPadding
+### 要素の Padding
 
-padding属性は、要素のpaddingエリアを設定します。paddingエリアは、要素のコンテンツとその境界線のスペースです。
+padding 属性は、要素の padding エリアを設定します。padding エリアは、要素のコンテンツとその境界線のスペースです。
 
 `padding` で適用されるデフォルトの数値は `16px` で、これは `--ion-padding`　変数で設定することができます。これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
 
@@ -281,9 +278,9 @@ padding属性は、要素のpaddingエリアを設定します。paddingエリ
 | `.ion-padding-horizontal` | `padding: 0 16px`      | Applies padding to the left and right. |
 | `.ion-no-padding`         | `padding: 0`           | Applies no padding to all sides.       |
 
-### 要素のMargin
+### 要素の Margin
 
-Marginエリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。
+Margin エリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。
 
 `margin`　はデフォルトで `16px` が設定されており、 `--ion-margin` 変数で設定されています。 これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
 
@@ -519,9 +516,9 @@ Marginエリアは、隣り合う要素とのスペースを広げるために
 | `.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の表示
+## Border の表示
 
-border display CSSプロパティは、borderを表示するかどうかを指定します。このプロパティは、 `ion-header` と` ion-footer` に適用できます。
+border display CSS プロパティは、border を表示するかどうかを指定します。このプロパティは、 `ion-header` と` ion-footer` に適用できます。
 
 ```html
 <ion-header class="ion-no-border">
@@ -541,9 +538,9 @@ border display CSSプロパティは、borderを表示するかどうかを指
 | ---------------- | -------------------------------- |
 | `.ion-no-border` | The element will have no border. |
 
-## Ionicのブレイクポイント
+## Ionic のブレイクポイント
 
-Ionicは、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。
+Ionic は、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。
 
 | Breakpoint Name | Width    |
 | --------------- | -------- |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
index f1bde8ae88e..6cc5a214162 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
@@ -12,7 +12,7 @@ inlineHtmlPreviews: true
   />
 </head>
 
-Ionic Frameworkのコンポーネントスタイルは自己完結していますが、Ionicのすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Frameworkアプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。
+Ionic Framework のコンポーネントスタイルは自己完結していますが、Ionic のすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Framework アプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。
 
 ## 利用可能
 
@@ -26,7 +26,7 @@ Ionic Framework が正常に動作するためには、以下の CSS ファイ
 
 ### 推奨
 
-Ionic Frameworkアプリでは、以下のCSSファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Frameworkのコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。
+Ionic Framework アプリでは、以下の CSS ファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Framework のコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。
 
 #### structure.css
 
@@ -42,7 +42,7 @@ typography はドキュメント全体の font-family を変更し、見出し
 
 ### オプション
 
-以下のCSSファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。
+以下の CSS ファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。
 
 #### padding.css
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
index fbe80a2515b..b44b618c2cb 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
@@ -10,7 +10,7 @@ title: レスポンシブグリッド
   />
 </head>
 
-グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ12列のレイアウトに基づいています。カラムの数はCSSを使ってカスタマイズすることができます。
+グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ 12 列のレイアウトに基づいています。カラムの数は CSS を使ってカスタマイズすることができます。
 
 ## How it works
 
@@ -34,24 +34,24 @@ title: レスポンシブグリッド
   しかし、`fixed`属性を追加すると、スクリーンサイズごとの幅を指定することができます。
 - 行は、列を適切に並べるための水平方向のグループです。
 - コンテンツは列の中に配置されるべきで、列のみが行の直接の子となることができます。
-- `size-{breakpoint}` 属性は、1行あたりデフォルトの12列のうち、使用する列の数を指定します。
-  つまり、`size="4"` を指定すると、グリッドの1/3、つまり12列のうち4列を占有することができます。
-- sizeに値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を4つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に25%になります。
+- `size-{breakpoint}` 属性は、1 行あたりデフォルトの 12 列のうち、使用する列の数を指定します。
+  つまり、`size="4"` を指定すると、グリッドの 1/3、つまり 12 列のうち 4 列を占有することができます。
+- size に値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を 4 つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に 25%になります。
 - カラムの幅はパーセンテージで設定されるため、常に流動的で、親要素からの相対的な大きさになります。
 - カラムは個々のカラムの間にパディングを持ちますが、パディングはグリッドとカラムから削除することができます。
   しかし、グリッドに `ion-no-padding` クラスを追加することで、グリッドとカラムからパディングを取り除くことができます。グリッドに適用できるその他のスタイルについては、[CSS ユーティリティ](css-utilities.md) を参照してください。
-- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の5段階あります。
+- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の 5 段階あります。
 - グリッドの階層は最小幅を基準にしており、その階層とそれより大きな階層に適用されます。
   (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
 - グリッドは CSS 変数で簡単にカスタマイズすることができます。グリッドのカスタマイズ](#customizing-the-grid)を参照してください。
 
 ### ライブでの実装例
 
-Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。
+Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。
 
 ## グリッドの大きさ
 
-デフォルトでは、グリッドは100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
+デフォルトでは、グリッドは 100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS 変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
 
 | Name | Value  | Description                                       |
 | ---- | ------ | ------------------------------------------------- |
@@ -63,7 +63,7 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid)
 
 ### ライブでの実装例
 
-Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。
+Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。
 
 ## グリッドの属性
 
@@ -115,9 +115,9 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width
 </ion-grid>
 ```
 
-### 1列の幅を設定する
+### 1 列の幅を設定する
 
-1つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。
+1 つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。
 
 ```html
 <ion-grid>
@@ -148,7 +148,7 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。
 
 ### 可変幅
 
@@ -188,7 +188,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。
 
 ## レスポンシブ属性
 
@@ -217,7 +217,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 
 
 ### 積み上げから水平へ
 
-width属性とbreakpoint属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。
+width 属性と breakpoint 属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。
 
 ```html
 <ion-grid>
@@ -240,13 +240,13 @@ width属性とbreakpoint属性の組み合わせで、超小型画面では積
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、React では [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。
 
 ##並び替え
 
 ### カラムのオフセット
 
-offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは3カラム分オフセットされ、3カラムを占めることになります。
+offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは 3 カラム分オフセットされ、3 カラムを占めることになります。
 
 ```html
 <ion-grid>
@@ -261,7 +261,7 @@ offset` プロパティを追加することで、カラムを右に移動させ
 </ion-grid>
 ```
 
-また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが3カラム分オフセットされるグリッドの例です。
+また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが 3 カラム分オフセットされるグリッドの例です。
 
 ```html
 <ion-grid>
@@ -281,7 +281,7 @@ offset` プロパティを追加することで、カラムを右に移動させ
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、React では [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。
 
 ### プッシュとプル
 
@@ -300,7 +300,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols)
 </ion-grid>
 ```
 
-また、画面のブレークポイントに基づいてPushとPullを追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。
+また、画面のブレークポイントに基づいて Push と Pull を追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。
 
 ```html
 <ion-grid>
@@ -320,7 +320,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols)
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。
 
 ## アライメント
 
@@ -377,7 +377,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 
 </ion-grid>
 ```
 
-カラムはまた、カラムに直接alignmentクラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-item-properties) を参照してください。
+カラムはまた、カラムに直接 alignment クラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-item-properties) を参照してください。
 
 ```html
 <ion-grid>
@@ -400,11 +400,11 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。
 
 ### 水平方向の整列
 
-行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[cssユーティリティ](css-utilities.md#flex-container-properties) を参照してください。
+行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css ユーティリティ](css-utilities.md#flex-container-properties) を参照してください。
 
 ```html
 <ion-grid>
@@ -457,7 +457,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-ali
 
 #### ライブでの実装例
 
-Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。
+Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。
 
 ## グリッドのカスタマイズ
 
@@ -465,15 +465,15 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-a
 
 ### 列の数
 
-グリッドのカラム数は、CSS変数 `--ion-grid-columns` で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。
+グリッドのカラム数は、CSS 変数 `--ion-grid-columns` で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。
 
 ```css
 --ion-grid-columns: 12;
 ```
 
-### グリッドのPadding
+### グリッドの Padding
 
-グリッドコンテナのPaddingは、CSS変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS変数 `--ion-grid-padding-{breakpoint}` を使用します。
+グリッドコンテナの Padding は、CSS 変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS 変数 `--ion-grid-padding-{breakpoint}` を使用します。
 
 ```css
 --ion-grid-padding: 5px;
@@ -499,7 +499,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-a
 
 ### Column Padding
 
-列のpaddingは `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS変数 `--ion-grid-column-padding-{breakpoint}` を使用します。
+列の padding は `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS 変数 `--ion-grid-column-padding-{breakpoint}` を使用します。
 
 ```css
 --ion-grid-column-padding: 5px;
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
index fbe0d72ef21..3c96af0b8c6 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
@@ -14,9 +14,9 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Ionic Frameworkは、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
+Ionic Framework は、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
 
-## HeaderとFooterのレイアウト
+## Header と Footer のレイアウト
 
 ### Header
 
@@ -26,7 +26,7 @@ Ionic Frameworkは、アプリを構成するために使用できるいくつ
   </DocsCard>
 </aside>
 
-最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般にこの両方を持ちますが、contentを使用するためにheaderは必要ありません。
+最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般にこの両方を持ちますが、content を使用するために header は必要ありません。
 
 ```html
 <ion-app>
@@ -50,7 +50,7 @@ Ionic Frameworkは、アプリを構成するために使用できるいくつ
   </DocsCard>
 </aside>
 
-ご覧のように、footerのツールバーはコンテンツの上に表示されます。アプリでは、コンテンツの下にツールバーを表示する必要がある場合があり、そのような場合にfooterが使用されます。
+ご覧のように、footer のツールバーはコンテンツの上に表示されます。アプリでは、コンテンツの下にツールバーを表示する必要がある場合があり、そのような場合に footer が使用されます。
 
 ```html
 <ion-app>
@@ -68,7 +68,7 @@ Ionic Frameworkは、アプリを構成するために使用できるいくつ
 
 ### Header と Footer
 
-また、これらを1つのページにまとめて、コンテンツの上と下にツールバーを表示させることも可能です。
+また、これらを 1 つのページにまとめて、コンテンツの上と下にツールバーを表示させることも可能です。
 
 ```html
 <ion-app>
@@ -92,7 +92,7 @@ Ionic Frameworkは、アプリを構成するために使用できるいくつ
 
 ### ライブでの実装例
 
-この設定のライブ例を、Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-header-footer) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-head-foot) で見ることができます。
+この設定のライブ例を、Angular では [こちら](https://stackblitz.com/edit/ionic-ng-header-footer) 、React では [こちら](https://stackblitz.com/edit/ionic-react-head-foot) で見ることができます。
 
 ## タブレイアウト
 
@@ -124,7 +124,7 @@ Ionic Frameworkは、アプリを構成するために使用できるいくつ
 
 ### ライブでの実装例
 
-この設定は、Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-tabs) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-tab-layout) で実例を見ることができます。
+この設定は、Angular では [こちら](https://stackblitz.com/edit/ionic-ng-tabs) 、React では [こちら](https://stackblitz.com/edit/ionic-react-tab-layout) で実例を見ることができます。
 
 ## メニューレイアウト
 
@@ -177,7 +177,7 @@ Ionic Frameworkは、アプリを構成するために使用できるいくつ
 
 ### ライブでの実装例
 
-この設定は、Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-menu-layout) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-menu)で 実例を見ることができます。
+この設定は、Angular では [こちら](https://stackblitz.com/edit/ionic-ng-menu-layout) 、React では [こちら](https://stackblitz.com/edit/ionic-react-menu)で 実例を見ることができます。
 
 ## 分割ペインレイアウト
 
@@ -233,4 +233,4 @@ Ionic Frameworkは、アプリを構成するために使用できるいくつ
 
 ### ライブでの実装例
 
-Angularでの実装例は [こちら](https://stackblitz.com/edit/ionic-ng-split-pane) 、Reactでの実装例は [こちら](https://stackblitz.com/edit/ionic-react-split-pane) をご覧ください。
+Angular での実装例は [こちら](https://stackblitz.com/edit/ionic-ng-split-pane) 、React での実装例は [こちら](https://stackblitz.com/edit/ionic-react-split-pane) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
index 4cbeec67432..e28675e6fea 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
@@ -5,9 +5,9 @@ slug: /native/faq
 
 # Frequently Asked Question
 
-## What is Capacitor? 
+## What is Capacitor?
 
-Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. 
+Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library.
 
 ## Permission Issues
 
@@ -17,8 +17,7 @@ If you're using a plugin, it may require adding additional permissions to your n
 - `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
 - `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
 
-You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. 
-
+You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail.
 
 ## Unexpected behaviour
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
index c863908c42f..13818c296ad 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
@@ -23,14 +23,10 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard';
 
 <intro-end />
 
-
 Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences.
 
 While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
 
-
-
-
 <NativeEnterpriseCard />
 
 > Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/)
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
index c7eaa45a96e..2b4fc71a4d9 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
@@ -25,8 +25,8 @@ import DocsCards from '@components/global/DocsCards';
   <h1>コードひとつで <br/> あらゆるプラットフォーム <br/> <strong>まさにReact</strong></h1>
 
 - ✓ 100 以上のモバイルに最適化された React UI コンポーネント
-- ✓ Reactの標準的なツールであるreact-dom
-- ✓ iOS / Android / Electron / PWAに対応
+- ✓ React の標準的なツールである react-dom
+- ✓ iOS / Android / Electron / PWA に対応
 
 [Get Started](#installation)
 
@@ -37,11 +37,11 @@ import DocsCards from '@components/global/DocsCards';
   </div>
 </div>
 
-### モバイル、デスクトップ、ウェブにまたがる素晴らしいアプリを、あなたが知っている、そして愛するReactで構築してください。
+### モバイル、デスクトップ、ウェブにまたがる素晴らしいアプリを、あなたが知っている、そして愛する React で構築してください。
 
-Ionic Reactは、Ionic FrameworkのネイティブReactバージョンで、世界中の何百万ものミッションクリティカルなアプリを動かしている、無料のオープンソースSDKです。
+Ionic React は、Ionic Framework のネイティブ React バージョンで、世界中の何百万ものミッションクリティカルなアプリを動かしている、無料のオープンソース SDK です。
 
-Reactを使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。
+React を使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。
 
 <div class="flex" >
 
@@ -49,7 +49,7 @@ Reactを使用して、あらゆるプラットフォーム向けに受賞歴の
 
 ## すばらしいデザイン
 
-100種類以上の美しいモバイル対応のUIコンポーネント、アニメーション、ジェスチャーから選択でき、軽量であなたのブランドに合うようにカスタマイズできます。
+100 種類以上の美しいモバイル対応の UI コンポーネント、アニメーション、ジェスチャーから選択でき、軽量であなたのブランドに合うようにカスタマイズできます。
 
 [Explore UI components](/docs/components)
 
@@ -67,7 +67,7 @@ Reactを使用して、あらゆるプラットフォーム向けに受賞歴の
 
 ## 使い慣れたツール
 
-IonicのReactプロジェクトはReactプロジェクトと同じように、[react-dom](https://reactjs.org/docs/react-dom.html) を活用し、[Create React App (CRA)](https://github.com/facebook/create-react-app) アプリで見られるようなセットアップが可能です。ルーティングとナビゲーション](/docs/react/navigation)では、React Routerが使用されています。
+Ionic の React プロジェクトは React プロジェクトと同じように、[react-dom](https://reactjs.org/docs/react-dom.html) を活用し、[Create React App (CRA)](https://github.com/facebook/create-react-app) アプリで見られるようなセットアップが可能です。ルーティングとナビゲーション](/docs/react/navigation)では、React Router が使用されています。
 React バージョン 16.8 以降に対応しています。
 
 </div>
@@ -84,7 +84,7 @@ React バージョン 16.8 以降に対応しています。
 
 ## More than mobile
 
-最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic ReactプロジェクトをネイティブのiOS、Android、Electron、WebにProgressive Web Appとしてデプロイできます。すべて1つの共有コードベースで。
+最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic React プロジェクトをネイティブの iOS、Android、Electron、Web に Progressive Web App としてデプロイできます。すべて 1 つの共有コードベースで。
 
 </div>
 
@@ -98,9 +98,9 @@ React バージョン 16.8 以降に対応しています。
 
   <div class="pull-left">
 
-## まさにReact
+## まさに React
 
-結局のところ、ただのReactなのです。Ionic ReactはオープンなWeb標準とビルトインのブラウザ機能を使用しているため、何百万とあるWebライブラリのどれとも互換性があります。
+結局のところ、ただの React なのです。Ionic React はオープンな Web 標準とビルトインのブラウザ機能を使用しているため、何百万とある Web ライブラリのどれとも互換性があります。
 
   </div>
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
index b51d449cba8..3340ce5b263 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
@@ -1,10 +1,10 @@
 # Config
 
-Ionic Configは、アプリ全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。 アプリのモード、Tabボタンのレイアウト、アニメーションなどを設定できます。
+Ionic Config は、アプリ全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。 アプリのモード、Tab ボタンのレイアウト、アニメーションなどを設定できます。
 
 ## 使い方
 
-アプリのIonicの初期設定をオーバーライドするには、Ionicコンポーネント (`IonApp`を含めます)をレンダリングする前に、`@ionic/react` から `setupConfig` メソッドをインポートして呼び出します:
+アプリの Ionic の初期設定をオーバーライドするには、Ionic コンポーネント (`IonApp`を含めます)をレンダリングする前に、`@ionic/react` から `setupConfig` メソッドをインポートして呼び出します:
 
 ```tsx
 setupIonicReact({
@@ -13,7 +13,7 @@ setupIonicReact({
 });
 ```
 
-上記の例では、アプリ全体でマテリアルデザインのリップル効果を無効にし、modeをマテリアルデザインに強制しています。
+上記の例では、アプリ全体でマテリアルデザインのリップル効果を無効にし、mode をマテリアルデザインに強制しています。
 
 ## Per-Platform Config
 
@@ -77,7 +77,7 @@ setupIonicReact(getConfig());
 
 ### IonicConfig
 
-以下は、Ionicで使用できる設定オプションのリストです。
+以下は、Ionic で使用できる設定オプションのリストです。
 
 | Config                   | Type                                                                            | Description                                                                                              |
 | ------------------------ | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
index fb90c3e7568..44c491ebb2d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
@@ -11,26 +11,26 @@ sidebar_label: ライフサイクル
   />
 </head>
 
-このガイドでは、Ionic ReactアプリケーションでIonicのライフサイクルイベントを利用する方法について説明します。
+このガイドでは、Ionic React アプリケーションで Ionic のライフサイクルイベントを利用する方法について説明します。
 
-## Ionicのライフサイクルメソッド
+## Ionic のライフサイクルメソッド
 
-Ionicは、アプリで利用できるいくつかのライフサイクルメソッドを提供します:
+Ionic は、アプリで利用できるいくつかのライフサイクルメソッドを提供します:
 
-| Event Name         | Description                                                          |
-|--------------------|------------------------------------------------------------------|
+| Event Name         | Description                                                        |
+| ------------------ | ------------------------------------------------------------------ |
 | `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
 | `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
 
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
 
 これらのメソッドにアクセスする方法は、クラスベースのコンポーネントを使用しているか、機能的なコンポーネントを使用しているかによって異なります。以下では、両方の方法について説明します。
 
 ## クラスベースのコンポーネントにおけるライフサイクルメソッド
 
-クラスベースのコンポーネントでIonicのライフサイクルメソッドを使用するには、次のように `withIonLifeCycle` という higher order component (HOC) でコンポーネントをラップする必要があります:
+クラスベースのコンポーネントで Ionic のライフサイクルメソッドを使用するには、次のように `withIonLifeCycle` という higher order component (HOC) でコンポーネントをラップする必要があります:
 
 ```tsx
 export default withIonLifeCycle(HomePage);
@@ -40,7 +40,7 @@ export default withIonLifeCycle(HomePage);
 `withIonLifeCycle` は `@ionic/react` からインポートします
 :::
 
-そして、クラスコンポーネントに適切なライフサイクルメソッドを追加すると、イベントが発生した時にHOCがそのメソッドを呼び出します。以下は、各ライフサイクルメソッドを実装したコンポーネント全体です:
+そして、クラスコンポーネントに適切なライフサイクルメソッドを追加すると、イベントが発生した時に HOC がそのメソッドを呼び出します。以下は、各ライフサイクルメソッドを実装したコンポーネント全体です:
 
 ```tsx
 import React from 'react';
@@ -80,9 +80,9 @@ class HomePage extends React.Component {
 export default withIonLifeCycle(HomePage);
 ```
 
-## Functionベースのコンポーネントにおけるライフサイクルメソッド
+## Function ベースのコンポーネントにおけるライフサイクルメソッド
 
-Ionic Reactは、ファンクションコンポーネントで使用できる各ライフサイクルメソッドのフックをエクスポートします。各フックは、イベントが発生したときに呼び出すメソッドを実行します。
+Ionic React は、ファンクションコンポーネントで使用できる各ライフサイクルメソッドのフックをエクスポートします。各フックは、イベントが発生したときに呼び出すメソッドを実行します。
 
 ```tsx
 import {
@@ -133,9 +133,9 @@ export default HomePage;
 クラスコンポーネントのように、ファンクションコンポーネントを `withIonLifeCycle` HOC でラップする必要はありません。
 :::
 
-## Reactライフサイクルメソッド
+## React ライフサイクルメソッド
 
-Reactのすべてのライフサイクルメソッド（ `componentDidMount` 、`componentWillUnmount` など）も使用できます。 ただし、Ionic Reactはページのライフタイムを管理するため、特定のイベントが期待どおりに発生しない場合があります。 たとえば、最初にページが表示されたときは `componentDidMount` が起動しますが、ページから移動した時にIonicはページをDOMツリーに保持しているため、その後の当該ページへのアクセスでは `componentDidMount` を再度呼び出さない場合があります。 このシナリオは、Ionicライフサイクルメソッドが存在する主な理由であり、ネイティブフレームワークのイベントが発生しない場合にビューが開始および終了するときにロジックを呼び出す方法を提供します。
+React のすべてのライフサイクルメソッド（ `componentDidMount` 、`componentWillUnmount` など）も使用できます。 ただし、Ionic React はページのライフタイムを管理するため、特定のイベントが期待どおりに発生しない場合があります。 たとえば、最初にページが表示されたときは `componentDidMount` が起動しますが、ページから移動した時に Ionic はページを DOM ツリーに保持しているため、その後の当該ページへのアクセスでは `componentDidMount` を再度呼び出さない場合があります。 このシナリオは、Ionic ライフサイクルメソッドが存在する主な理由であり、ネイティブフレームワークのイベントが発生しない場合にビューが開始および終了するときにロジックを呼び出す方法を提供します。
 
 ## 各ライフサイクルメソッドのガイドライン
 
@@ -143,5 +143,5 @@ Reactのすべてのライフサイクルメソッド（ `componentDidMount` 、
 
 - `ionViewWillEnter` - コンポーネントが初期化されているかどうかに関係なくビューが表示される度に `ionViewWillEnter` が呼び出されるため、サービスからデータをロードするのに適したメソッドです。
 - `ionViewDidEnter` - データのロード時に `ionViewWillEnter` を使用することでパフォーマンスの問題が発生する場合は、代わりに `ionViewDidEnter` でデータ呼び出しを行うことができます。 ただし、ページがユーザーに表示されるまでこのイベントは発生しません。そのため、ロードインジケーターまたはスケルトンスクリーンを使用して、表示が完了した後にコンテンツが不自然にフラッシュしないようにすることができます。
-- `ionViewWillLeave` - データソースからの unsubscribe など、クリーンアップに使用できます。  `componentWillUnmount` は現在のページから移動しても起動しない場合があるため、画面が表示されていないときにアクティブにしたくない場合は、クリーンアップコードをここに配置します。
+- `ionViewWillLeave` - データソースからの unsubscribe など、クリーンアップに使用できます。 `componentWillUnmount` は現在のページから移動しても起動しない場合があるため、画面が表示されていないときにアクティブにしたくない場合は、クリーンアップコードをここに配置します。
 - `ionViewDidLeave` - このイベントが発生すると、新しいページに完全に移行したことがわかります。そのため、ビューが表示されているときに通常実行しないロジックはここに移動できます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
index bf6874715fe..998a6e83ecd 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
@@ -13,15 +13,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
   />
 </head>
 
-このガイドでは、IonicとReactで構築されたアプリでのルーティングの仕組みについて説明します。
+このガイドでは、Ionic と React で構築されたアプリでのルーティングの仕組みについて説明します。
 
 `IonReactRouter` は一般的な [React Router](https://github.com/ReactTraining/react-router) ライブラリを内部で使用しています。Ionic と React Router を使うことで、ページ遷移がリッチなマルチページアプリをつくることができます。
 
-React Routerを使用したルーティングについて知っていることはすべて、Ionic Reactで利用することができます。Ionic Reactアプリの基本と、ルーティングがどのように機能するかを見てみましょう。
+React Router を使用したルーティングについて知っていることはすべて、Ionic React で利用することができます。Ionic React アプリの基本と、ルーティングがどのように機能するかを見てみましょう。
 
-## Ionic Reactにおけるルーティング
+## Ionic React におけるルーティング
 
-これは `App` コンポーネントのサンプルで、 "/dashboard" URLへの単一ルートを定義しています。"/dashboard"にアクセスすると、 `DashboardPage` コンポーネントをレンダリングします。
+これは `App` コンポーネントのサンプルで、 "/dashboard" URL への単一ルートを定義しています。"/dashboard"にアクセスすると、 `DashboardPage` コンポーネントをレンダリングします。
 
 **App.tsx**
 
@@ -38,11 +38,11 @@ const App: React.FC = () => (
 );
 ```
 
-`Route` の直後に、デフォルトの `Redirect` を定義します。これは、ユーザーがアプリのルートURL（"/"）にアクセスすると、"/dashboard" URLにリダイレクトします。
+`Route` の直後に、デフォルトの `Redirect` を定義します。これは、ユーザーがアプリのルート URL（"/"）にアクセスすると、"/dashboard" URL にリダイレクトします。
 
-リダイレクトには `exact` という prop もあります。つまり、このルートが一致するためには、URLが `from` prop（もしくは `Route` で `exact` が使われている場合の `path` prop）と正確に一致する必要があります。すべてのルートは"/"で始まるため、これがないと、このリダイレクトはすべてのルートに対してレンダリングされます。
+リダイレクトには `exact` という prop もあります。つまり、このルートが一致するためには、URL が `from` prop（もしくは `Route` で `exact` が使われている場合の `path` prop）と正確に一致する必要があります。すべてのルートは"/"で始まるため、これがないと、このリダイレクトはすべてのルートに対してレンダリングされます。
 
-ユーザーが認証されているかどうかを確認するなど、条件に基づいてルートのrenderメソッドからプログラムでリダイレクトすることもできます:
+ユーザーが認証されているかどうかを確認するなど、条件に基づいてルートの render メソッドからプログラムでリダイレクトすることもできます:
 
 ```tsx
 <Route
@@ -56,7 +56,7 @@ const App: React.FC = () => (
 
 ## IonReactRouter
 
-`IonReactRouter` コンポーネントは、React Routerの従来の [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) コンポーネントをラップし、アプリケーションをルーティング用にセットアップします。したがって、 `BrowserRouter` の代わりに `IonReactRouter` を使用します。任意のpropを `IonReactRouter` に渡すことができ、それらはベースとなる `BrowserRouter` に渡されます。
+`IonReactRouter` コンポーネントは、React Router の従来の [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) コンポーネントをラップし、アプリケーションをルーティング用にセットアップします。したがって、 `BrowserRouter` の代わりに `IonReactRouter` を使用します。任意の prop を `IonReactRouter` に渡すことができ、それらはベースとなる `BrowserRouter` に渡されます。
 
 ## ルーターのネスト
 
@@ -77,9 +77,9 @@ const DashboardPage: React.FC = () => {
 };
 ```
 
-ここでは、アプリの DashboardPage から更にコンポーネントが定義された2つのルートがあります。pathにはルートの全体を定義する必要があり、そのURLからこのページに到達した場合でも、 "/dashboard" を省略できないことに注意してください。 React Routerは絶対パスを必要とし、相対パスはサポートされていません。
+ここでは、アプリの DashboardPage から更にコンポーネントが定義された 2 つのルートがあります。path にはルートの全体を定義する必要があり、その URL からこのページに到達した場合でも、 "/dashboard" を省略できないことに注意してください。 React Router は絶対パスを必要とし、相対パスはサポートされていません。
 
-ただし、 [`match`](https://reacttraining.com/react-router/web/api/match) オブジェクトの `url` プロパティを使用して、コンポーネントをレンダリングするために match したURLを提供できます。これは、ネストされたルートを操作するときに役立ちます。
+ただし、 [`match`](https://reacttraining.com/react-router/web/api/match) オブジェクトの `url` プロパティを使用して、コンポーネントをレンダリングするために match した URL を提供できます。これは、ネストされたルートを操作するときに役立ちます。
 
 ```tsx
 const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
@@ -94,15 +94,15 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 };
 ```
 
-ここでは、 `match.url` には "/dashboard" の値が含まれています。これは、 `DashboardPage` のレンダリングに使用されるURLであるためです。
+ここでは、 `match.url` には "/dashboard" の値が含まれています。これは、 `DashboardPage` のレンダリングに使用される URL であるためです。
 
 これらのルートは `IonRouterOutlet` にグループ化されています。次に説明します。
 
 ## IonRouterOutlet
 
-`IonRouterOutlet` コンポーネントは、Ionicの "ページ" をレンダリングするルートコンテナを提供します。 ページが `IonRouterOutlet` にある場合、コンテナはページ間の遷移アニメーションを制御し、ページが作成および破棄されるタイミングを制御します。これにより、ビューを切り替える際にビュー間の状態を維持できます。
+`IonRouterOutlet` コンポーネントは、Ionic の "ページ" をレンダリングするルートコンテナを提供します。 ページが `IonRouterOutlet` にある場合、コンテナはページ間の遷移アニメーションを制御し、ページが作成および破棄されるタイミングを制御します。これにより、ビューを切り替える際にビュー間の状態を維持できます。
 
-上記の `DashboardPage` には、ユーザーリストページと詳細ページが表示されます。 2つのページ間を移動するとき、 `IonRouterOutlet` は適切なプラットフォームページの遷移を提供し、前のページの状態をそのまま保持するため、ユーザーがリストページに戻ると、前のページと同じ状態で表示されます。
+上記の `DashboardPage` には、ユーザーリストページと詳細ページが表示されます。 2 つのページ間を移動するとき、 `IonRouterOutlet` は適切なプラットフォームページの遷移を提供し、前のページの状態をそのまま保持するため、ユーザーがリストページに戻ると、前のページと同じ状態で表示されます。
 
 `IonRouterOutlet` には、 `Route` と `Redirect` のみを含める必要があります。 他のコンポーネントは、 `Route` の結果、または `IonRouterOutlet` の外部でレンダリングする必要があります。
 
@@ -167,7 +167,7 @@ export default Home;
 
 ## Navigation
 
-Ionic Reactアプリでさまざまなビューにルーティングする場合、いくつかのオプションを使用できます。 ここで、 `UsersListPageはIonItem` は `IonItem` の `routerLink` prop を使用して、タップ/クリックされたときに移動するルートを指定します:
+Ionic React アプリでさまざまなビューにルーティングする場合、いくつかのオプションを使用できます。 ここで、 `UsersListPageはIonItem` は `IonItem` の `routerLink` prop を使用して、タップ/クリックされたときに移動するルートを指定します:
 
 **UsersListPage.tsx**
 
@@ -207,7 +207,7 @@ Outside of these components that have the `routerLink` prop, you can also use Re
 
 ルーティングは可能な限り、上記の方法のいずれかを使用することをお勧めします。 これらのアプローチの利点は、両方ともアンカー（ `<a>` ）タグをレンダリングすることです。これはアプリ全体のアクセシビリティに適しています。
 
-ナビゲーションのためのプログラムオプションとして、React Routerがルート経由でレンダリングするコンポーネントに提供する [`history`](https://reacttraining.com/react-router/web/api/history) prop を使用することもできます。
+ナビゲーションのためのプログラムオプションとして、React Router がルート経由でレンダリングするコンポーネントに提供する [`history`](https://reacttraining.com/react-router/web/api/history) prop を使用することもできます。
 
 ```tsx
 <IonButton
@@ -238,7 +238,7 @@ Using `history.go()` in Ionic React is not supported at the moment. Interested i
 
 ## URL Parameters
 
-Dashboard Pageで定義された2番目のルートには、URLパラメーターが定義されています（パスの ":id" 部分）。 URLパラメーターは `path` の動的な部分であり、ユーザーが "/dashboard/users/1" などのURLに移動すると、"1" はルートがレンダリングするコンポーネント上で "id" という名前のパラメーターに保存されます。それがどのように行われるかを見てみましょう。
+Dashboard Page で定義された 2 番目のルートには、URL パラメーターが定義されています（パスの ":id" 部分）。 URL パラメーターは `path` の動的な部分であり、ユーザーが "/dashboard/users/1" などの URL に移動すると、"1" はルートがレンダリングするコンポーネント上で "id" という名前のパラメーターに保存されます。それがどのように行われるかを見てみましょう。
 
 **UserDetailPage.tsx**
 
@@ -262,9 +262,9 @@ const UserDetailPage: React.FC<UserDetailPageProps> = ({ match }) => {
 };
 ```
 
-[`match`](https://reacttraining.com/react-router/web/api/match) prop には、URLパラメーターなど、一致したルートに関する情報が含まれます。 ここで `id` パラメータを取得し、画面に表示します。
+[`match`](https://reacttraining.com/react-router/web/api/match) prop には、URL パラメーターなど、一致したルートに関する情報が含まれます。 ここで `id` パラメータを取得し、画面に表示します。
 
-> Note: TypeScriptインターフェイスを使用して props オブジェクトを厳密に入力する方法に注意してください。 このインターフェースにより、コンポーネント内部でタイプセーフティとコード補完が可能になります。
+> Note: TypeScript インターフェイスを使用して props オブジェクトを厳密に入力する方法に注意してください。 このインターフェースにより、コンポーネント内部でタイプセーフティとコード補完が可能になります。
 
 ## Linear Routing versus Non-Linear Routing
 
@@ -276,8 +276,8 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/linear-routing-demo.mp4')}
@@ -302,8 +302,8 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/non-linear-routing-demo.mp4')}
@@ -351,8 +351,8 @@ const App: React.FC = () => {
         </Route>
       </IonRouterOutlet>
     </IonReactRouter>
-  </IonApp>
-}
+  </IonApp>;
+};
 ```
 
 The above routes are considered "shared" because they reuse the `dashboard` piece of the URL.
@@ -372,7 +372,7 @@ const App: React.FC = () => (
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>
-)
+);
 
 const DashboardRouterOutlet: React.FC = () => (
   <IonRouterOutlet>
@@ -383,7 +383,7 @@ const DashboardRouterOutlet: React.FC = () => (
       <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`.
@@ -420,15 +420,7 @@ 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 { 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';
@@ -543,8 +535,8 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/tabs-account-demo.mp4')}
@@ -559,8 +551,8 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
 
 ## Live Example
@@ -569,11 +561,11 @@ If you would prefer to get hands on with the concepts and code described above,
 
 ### IonRouterOutlet in a Tabs View
 
-Tabビューで作業する場合、Ionic Reactには、どのビューがどのTabに属しているかを判断する方法が必要です。これは、 `Route` に提供されるパスが正規表現であるという事実を利用することにより実現します。
+Tab ビューで作業する場合、Ionic React には、どのビューがどの Tab に属しているかを判断する方法が必要です。これは、 `Route` に提供されるパスが正規表現であるという事実を利用することにより実現します。
 
 この構文は少し不思議に見えますが、理解すればかなり簡単です。
 
-例えば、2つのタブ (sessions と speakers) をもつビューのルートは次のように設定できます:
+例えば、2 つのタブ (sessions と speakers) をもつビューのルートは次のように設定できます:
 
 ```tsx
 <IonRouterOutlet>
@@ -583,17 +575,17 @@ Tabビューで作業する場合、Ionic Reactには、どのビューがどの
 </IonRouterOutlet>
 ```
 
-ナビゲートされたURLが "/sessions" の場合、最初のルートと一致します。 "tab" というURLパラメーターに "sessions" の値を格納して、 `match` オブジェクトに `SessionsPage` として追加します。
+ナビゲートされた URL が "/sessions" の場合、最初のルートと一致します。 "tab" という URL パラメーターに "sessions" の値を格納して、 `match` オブジェクトに `SessionsPage` として追加します。
 
-ユーザーがセッションの詳細ページ（たとえば "/sessions/1" ）に移動すると、2番目のルートは "tabs" というURLパラメーターに "sessions" という値を追加します。 `IonRouterOutlet` は、両方のページが同じ "sessions" タブにあることを認識すると、新しいビューへのアニメーションページ遷移を提供します。 ユーザーが新しいタブ（この場合は "speakers" ）に移動すると、 `IonRouterOutlet` はアニメーションを提供しないことを認識します。
+ユーザーがセッションの詳細ページ（たとえば "/sessions/1" ）に移動すると、2 番目のルートは "tabs" という URL パラメーターに "sessions" という値を追加します。 `IonRouterOutlet` は、両方のページが同じ "sessions" タブにあることを認識すると、新しいビューへのアニメーションページ遷移を提供します。 ユーザーが新しいタブ（この場合は "speakers" ）に移動すると、 `IonRouterOutlet` はアニメーションを提供しないことを認識します。
 
-### IonRouterOutletの `Switch`
+### IonRouterOutlet の `Switch`
 
 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`.
 
 ## 更に知りたい場合
 
-React Routerを使用したReactでのルーティングの詳細については、次の [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web) でドキュメントをご覧ください。
+React Router を使用した React でのルーティングの詳細については、次の [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web) でドキュメントをご覧ください。
 
 ## From the Community
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
index a9ad0ccd6df..b042b1b7a78 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
@@ -1,12 +1,12 @@
-# Ionic Reactの概要
+# Ionic React の概要
 
-`@ionic/react` はIonic Coreに、React開発者向けにカスタマイズされたツールとAPIを組み合わせたものです。
+`@ionic/react` は Ionic Core に、React 開発者向けにカスタマイズされたツールと API を組み合わせたものです。
 
 :::note
 The first official version of Ionic React is v4.11.
 :::
 
-最初に、Ionic CLIをインストールします:
+最初に、Ionic CLI をインストールします:
 
 ```shell
 npm install -g @ionic/cli
@@ -18,7 +18,7 @@ npm install -g @ionic/cli
 ionic start myAppName
 ```
 
-CLIは、使用するフレームワーク(もちろんReact!)と利用するスターターテンプレートを含むいくつかの質問をすることで、セットアップ・プロセスを案内します。
+CLI は、使用するフレームワーク(もちろん React!)と利用するスターターテンプレートを含むいくつかの質問をすることで、セットアップ・プロセスを案内します。
 
 アプリを作成したら、アプリを起動します:
 
@@ -28,18 +28,18 @@ ionic serve
 
 もう [Ionic UI components](../components.md) を使ってアプリの開発をはじめることができます。
 
-## Reactバージョンサポート
+## React バージョンサポート
 
-Reactバージョン16.8以降と互換性があります。
+React バージョン 16.8 以降と互換性があります。
 
-## Reactツール
+## React ツール
 
-Ionic ReactプロジェクトはReactプロジェクトそのものようなもので、 [react-dom](https://reactjs.org/docs/react-dom.html) を活用して,一般的な [Create React App (CRA)](https://github.com/facebook/create-react-app) のセットアップを利用しています。 [routing and navigation](navigation.md) では、React Routerを内部で使用します。
+Ionic React プロジェクトは React プロジェクトそのものようなもので、 [react-dom](https://reactjs.org/docs/react-dom.html) を活用して,一般的な [Create React App (CRA)](https://github.com/facebook/create-react-app) のセットアップを利用しています。 [routing and navigation](navigation.md) では、React Router を内部で使用します。
 
-1つの違いは、 [TypeScript](http://www.typescriptlang.org/) を使用することで、生産性が向上していることです。プレーンJavaScriptを使用するには、ファイル名を `.js` に変更します。次に、各ファイルの型注釈を削除します。
+1 つの違いは、 [TypeScript](http://www.typescriptlang.org/) を使用することで、生産性が向上していることです。プレーン JavaScript を使用するには、ファイル名を `.js` に変更します。次に、各ファイルの型注釈を削除します。
 
 ## ネイティブツール
 
-[Capacitor](https://capacitorjs.com) は `Ionic React` でつくられたWebアプリを、iOS、Android、ElectronとWebでネイティブに実行するために利用することができる公式のクロスプラットフォームアプリライブラリです。
+[Capacitor](https://capacitorjs.com) は `Ionic React` でつくられた Web アプリを、iOS、Android、Electron と 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
index 8f83ee4a7f6..4c692c014c3 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
@@ -10,7 +10,7 @@ import { isPlatform } from '@ionic/react';
 isPlatform('ios'); // iOSデバイスで実行されてる時は true を返します
 ```
 
-ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPadから実行するアプリは、mobile、ios、ipad、およびtabletのプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordovaもtrueになります。
+ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPad から実行するアプリは、mobile、ios、ipad、および tablet のプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordova も true になります。
 
 ## getPlatforms
 
@@ -22,8 +22,7 @@ import { getPlatforms } from '@ionic/react';
 getPlatforms(); // iPhoneの場合 ["iphone", "ios", "mobile", "mobileweb"] を返します
 ```
 
-
-使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhoneでは、mobile、ios、およびiphoneが返されます。
+使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhone では、mobile、ios、および iphone が返されます。
 
 ## Platforms
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
index 3e3fe7259eb..4c2ac215b88 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
@@ -24,16 +24,13 @@ npm install -D vite-plugin-pwa
 Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
 
 ```javascript
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { VitePWA } from 'vite-plugin-pwa'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
-  plugins: [
-    react(),
-    VitePWA({ registerType: 'autoUpdate' })
-  ],
-})
+  plugins: [react(), VitePWA({ registerType: 'autoUpdate' })],
+});
 ```
 
 This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
@@ -50,9 +47,9 @@ As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create Re
 
 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 Application 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.
 
-PWAの主な要件は、 <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> と <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a> の2つです。これらの両方を手動でアプリに追加することは可能ですが、Create React App (CRA)とIonic CLIのベースプロジェクトがこれらをすでに提供しています。
+PWA の主な要件は、 <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> と <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a> の 2 つです。これらの両方を手動でアプリに追加することは可能ですが、Create React App (CRA)と Ionic CLI のベースプロジェクトがこれらをすでに提供しています。
 
-アプリケーションの  `index.ts` には、`serviceWorker.unregister()` 関数の呼び出しがあります。基本CRAが提供するservice workersはオプトイン機能なので、有効にする必要があります。
+アプリケーションの `index.ts` には、`serviceWorker.unregister()` 関数の呼び出しがあります。基本 CRA が提供する service workers はオプトイン機能なので、有効にする必要があります。
 有効にするには、`serviceWorker.register ()`を呼び出します。
 
 ```ts
@@ -75,54 +72,62 @@ root.render(
 serviceWorkerRegistration.register();
 ```
 
-このパッケージを追加したら、 `ionic build` を実行し、 `build` ディレクトリをPWAとしてデプロイする準備ができます。
+このパッケージを追加したら、 `ionic build` を実行し、 `build` ディレクトリを PWA としてデプロイする準備ができます。
 
 :::note
-デフォルトでは、Reactアプリのパッケージには、アプリアイコン用のIonicロゴが付属しています。正しいアプリケーション名を使用するようにmanifestを更新し、アイコンを置き換えてください。
+デフォルトでは、React アプリのパッケージには、アプリアイコン用の Ionic ロゴが付属しています。正しいアプリケーション名を使用するように manifest を更新し、アイコンを置き換えてください。
 :::
 
 :::note
-Service Workersや多くのJavaScript API (位置情報など)のような機能は、セキュアなコンテキストでアプリをホストする必要があります。ホスティングサービスを介してアプリケーションを配備する場合は、Service Workersを最大限に活用するためにHTTPSが必要になることに注意してください。
+Service Workers や多くの JavaScript API (位置情報など)のような機能は、セキュアなコンテキストでアプリをホストする必要があります。ホスティングサービスを介してアプリケーションを配備する場合は、Service Workers を最大限に活用するために HTTPS が必要になることに注意してください。
 :::
 
 <<<<<<< HEAD
-## Service Workerの設定
+
+## Service Worker の設定
+
 =======
+
 ### Service Worker configuration
->>>>>>> 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
 
-デフォルトでは、CRA/React Scriptには [WorkboxのWebpackプラグイン](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいて事前設定されたService Workerセットアップが付属しています。これはキャッシュファースト戦略を利用しており、ネットワークが新しいバージョンのアプリを返しても、アプリはキャッシュからロードされます。
+> > > > > > > 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
+
+デフォルトでは、CRA/React Script には [Workbox の Webpack プラグイン](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいて事前設定された Service Worker セットアップが付属しています。これはキャッシュファースト戦略を利用しており、ネットワークが新しいバージョンのアプリを返しても、アプリはキャッシュからロードされます。
 
-CRA/React Scriptsの性質上、この設定はReact Scriptsの内部で行われるため、React Scriptsから抽出しない限りはカスタマイズできません。現在、Ionic CLIはReact Appのイジェクトをサポートしていないため、このアクションを実行する場合は、Ionic CLIの代わりにnpm/yearスクリプトを使用する必要があります。
+CRA/React Scripts の性質上、この設定は React Scripts の内部で行われるため、React Scripts から抽出しない限りはカスタマイズできません。現在、Ionic CLI は React App のイジェクトをサポートしていないため、このアクションを実行する場合は、Ionic CLI の代わりに npm/year スクリプトを使用する必要があります。
 
 <<<<<<< HEAD
+
 ## デプロイ
+
 =======
+
 ### Deploying
->>>>>>> 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
+
+> > > > > > > 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
 
 #### Firebase
 
-FirebaseホスティングはProgressive Web Appsに多くの利点を提供しており、CDNによる高速応答、デフォルトで有効になっているHTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
+Firebase ホスティングは Progressive Web Apps に多くの利点を提供しており、CDN による高速応答、デフォルトで有効になっている HTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
 
-まず、まだ使用していない場合は、Firebaseで [プロジェクトを作成](https://console.firebase.google.com) します。
+まず、まだ使用していない場合は、Firebase で [プロジェクトを作成](https://console.firebase.google.com) します。
 
-次にターミナルでFirebase CLIをインストールします:
+次にターミナルで Firebase CLI をインストールします:
 
 ```shell
 npm install -g firebase-tools
 ```
 
-Firebase CLIをインストールした状態で、Ionicプロジェクト内で `firebase init` を実行します。CLI上で様々な確認を行っていきます:
+Firebase CLI をインストールした状態で、Ionic プロジェクト内で `firebase init` を実行します。CLI 上で様々な確認を行っていきます:
 
 **"Which Firebase CLI features do you want to set up for this folder?"** "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
 
-**"Select a default Firebase project for this directory:"** FirebaseのWebサイト上で作成したプロジェクトを選択します。
+**"Select a default Firebase project for this directory:"** Firebase の Web サイト上で作成したプロジェクトを選択します。
 
 **"What do you want to use as your public directory?"** "dist" を選択ください。
 
 :::note
-次の2つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
+次の 2 つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
 :::
 
 **Configure as a single-page app (rewrite all urls to /index.html)?"** "Yes" を選択します.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
index ca786265a2d..b641e5601c8 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
@@ -11,23 +11,23 @@ sidebar_label: クイックスタート
   />
 </head>
 
-## Ionic Frameworkとは
+## Ionic Framework とは
 
-まず、ここに来たばかりの人を歓迎します！Ionic Frameworkは、 iOS, Android, Electron, Web上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
+まず、ここに来たばかりの人を歓迎します！Ionic Framework は、 iOS, Android, Electron, Web 上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
 
-UIコンポーネントに加えて、Ionic Frameworkは新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
+UI コンポーネントに加えて、Ionic Framework は新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
 
-このガイドでは、Ionic Framework特有の機能を含め、ReactとIonic Frameworkの基本について説明します。Reactに精通している方は、ガイドを楽しみ、Ionic Frameworkについて新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
+このガイドでは、Ionic Framework 特有の機能を含め、React と Ionic Framework の基本について説明します。React に精通している方は、ガイドを楽しみ、Ionic Framework について新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
 
-## Ionic CLIを使ったプロジェクト新規作成
+## Ionic CLI を使ったプロジェクト新規作成
 
-はじめに、Ionic CLIの最新版をインストールしましょう。
+はじめに、Ionic CLI の最新版をインストールしましょう。
 
 ```shell
 npm install -g @ionic/cli
 ```
 
-これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Frameworkと他の依存関係を持つReactプロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
+これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Framework と他の依存関係を持つ React プロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
 
 ```shell
 ionic start myApp blank --type=react
@@ -36,7 +36,7 @@ cd myApp
 
 これで、 `ionic serve` を実行することによって、プロジェクトをブラウザで実行することができます。
 
-## Reactコンポーネントの確認
+## React コンポーネントの確認
 
 アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `index.tsx` になります。エディタでプロジェクトを開き、`index.tsx` を確認すると、次のように表示されます:
 
@@ -48,11 +48,11 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-ここでは何が処理されてるでしょう。最初の3行はいくつかの依存関係をimportしています。1つ目はReact自身です。これにより、JSXと呼ばれるHTMLに似た構文でコンポーネントを記述できるようになります。JSXについては後ほど説明します。
+ここでは何が処理されてるでしょう。最初の 3 行はいくつかの依存関係を import しています。1 つ目は React 自身です。これにより、JSX と呼ばれる HTML に似た構文でコンポーネントを記述できるようになります。JSX については後ほど説明します。
 
-2番目のimportはReactDOMです。 `ReactDOM.render` メソッドは、コンポーネントを取得し、指定されたDOMノードにレンダリングするためのbrowser/DOM固有の方法です。
+2 番目の import は ReactDOM です。 `ReactDOM.render` メソッドは、コンポーネントを取得し、指定された DOM ノードにレンダリングするための browser/DOM 固有の方法です。
 
-最後のインポートは、単純に `App` という名前のアプリケーションのルートコンポーネントです。これは私たちの最初のReactコンポーネントであり、Reactアプリの起動処理で使用されます。
+最後のインポートは、単純に `App` という名前のアプリケーションのルートコンポーネントです。これは私たちの最初の React コンポーネントであり、React アプリの起動処理で使用されます。
 
 `App.tsx` を開くと、以下のコードが確認できます。
 
@@ -78,7 +78,7 @@ const App: React.FC = () => (
 );
 ```
 
-一見、多くのことが起こっているように見えるかもしれないので、最初のimportからみていきましょう。
+一見、多くのことが起こっているように見えるかもしれないので、最初の import からみていきましょう。
 
 ```tsx
 import React from 'react';
@@ -88,19 +88,19 @@ import { IonReactRouter } from '@ionic/react-router';
 import Home from './pages/Home';
 ```
 
-`index.tsx` に似ていますが、まずReactをインポートしてJSXを使用できるようにする必要があります。
+`index.tsx` に似ていますが、まず React をインポートして JSX を使用できるようにする必要があります。
 
-次のインポートは `react-router-dom` からです。Routeをインポートし、アプリのURLとレンダリングしたいコンポーネントをマッチさせます。
+次のインポートは `react-router-dom` からです。Route をインポートし、アプリの URL とレンダリングしたいコンポーネントをマッチさせます。
 
-ReactRouterに続いて、Ionicをimportします。Reactでコンポーネントを使用する前にimportする必要があります。Ionicの場合、ButtonやCardを使いたい時はいつもimportしなければなりません。Appコンポーネントの場合は、 `IonApp`、 `IonRouterOutlet` 、および `IonReactRouter` を使用します。
+ReactRouter に続いて、Ionic を import します。React でコンポーネントを使用する前に import する必要があります。Ionic の場合、Button や Card を使いたい時はいつも import しなければなりません。App コンポーネントの場合は、 `IonApp`、 `IonRouterOutlet` 、および `IonReactRouter` を使用します。
 
-`IonReactRouter` は、ReactRouterのBrowserRouterコンポーネントをラップするコンポーネントです。多少の違いはありますが、BrowserRouterと同じように動作します。これらの違いについては、 [React Navigation Docs](navigation.md) で詳しく説明しています。
+`IonReactRouter` は、ReactRouter の BrowserRouter コンポーネントをラップするコンポーネントです。多少の違いはありますが、BrowserRouter と同じように動作します。これらの違いについては、 [React Navigation Docs](navigation.md) で詳しく説明しています。
 
 最後の重要なインポートは `Home` コンポーネントのインポートです。これは、このアプリケーションでナビゲートできるコンポーネントです。ナビゲーション部分については、後で説明します。
 
-CSSのimportはIonicからpaddingやtypographyなどのユーティリティスタイルを取り込んでいます。
+CSS の import は Ionic から padding や typography などのユーティリティスタイルを取り込んでいます。
 
-すべてのimportを確認したので、続いてReact Componentを初めて見てみましょう。
+すべての import を確認したので、続いて React Component を初めて見てみましょう。
 
 ```tsx
 const App: React.FC = () => (
@@ -115,15 +115,15 @@ const App: React.FC = () => (
 );
 ```
 
-このReactコンポーネントは、アプリの初期ルーティングをセットアップし、アニメーションとレイアウトのためのいくつかの重要なIonicコンポーネントを含んでいます(IonRouterOutletとIonApp)。一見変わった書き方にみえますが、Reactではデータバインディングを行うために、値が中括弧 (`{}`) で渡されることに注目してください。つまり `Route` コンポーネントでは、 `component` の値を以前の `Home` コンポーネントに設定しています。これにより、Reactはその値が文字列ではなくコンポーネントへの参照であることを認識します。
+この React コンポーネントは、アプリの初期ルーティングをセットアップし、アニメーションとレイアウトのためのいくつかの重要な Ionic コンポーネントを含んでいます(IonRouterOutlet と IonApp)。一見変わった書き方にみえますが、React ではデータバインディングを行うために、値が中括弧 (`{}`) で渡されることに注目してください。つまり `Route` コンポーネントでは、 `component` の値を以前の `Home` コンポーネントに設定しています。これにより、React はその値が文字列ではなくコンポーネントへの参照であることを認識します。
 
 :::note
-ここで重要なのは、これらはすべて標準のReact DOMライブラリであり、カスタムの統合レイヤや変換ステップがないことです。
+ここで重要なのは、これらはすべて標準の React DOM ライブラリであり、カスタムの統合レイヤや変換ステップがないことです。
 :::
 
 ## コンポーネントのスタイル
 
-`App` を変更することはあまりありません。これは、コンテナ・コンポーネントの基本的な例です。Routerのロジックでは、指定されたURLルートに一致するコンポーネントをレンダリングするだけです。すでに1つのコンポーネント/ルータが設定されているので、`Home` コンポーネントを変更します。
+`App` を変更することはあまりありません。これは、コンテナ・コンポーネントの基本的な例です。Router のロジックでは、指定された URL ルートに一致するコンポーネントをレンダリングするだけです。すでに 1 つのコンポーネント/ルータが設定されているので、`Home` コンポーネントを変更します。
 
 現在、 `Home` コンポーネントはこうなっています:
 
@@ -156,22 +156,22 @@ const Home: React.FC = () => {
 };
 ```
 
-最初の `App` コンポーネントと同じように、特定のIonicコンポーネントのimport、Reactコンポーネントのimport、そしてReactコンポーネント自体のimportがあります。
+最初の `App` コンポーネントと同じように、特定の Ionic コンポーネントの import、React コンポーネントの import、そして React コンポーネント自体の import があります。
 
-`IonPage` は、すべてのページ(ルート/URLを持つコンポーネント)のベースコンポーネントであり、Header、Title、Contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素を含んでいます。
+`IonPage` は、すべてのページ(ルート/URL を持つコンポーネント)のベースコンポーネントであり、Header、Title、Content コンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素を含んでいます。
 
 :::note
-独自のページを作成するときは、 `IonPage` をそのルートコンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、トランジションが正しく動作することを保証し、Ionicコンポーネントが依存するベースCSSを提供するために重要です。
+独自のページを作成するときは、 `IonPage` をそのルートコンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、トランジションが正しく動作することを保証し、Ionic コンポーネントが依存するベース CSS を提供するために重要です。
 :::
 
-`IonHeader` は、ページの先頭に存在することを意図したコンポーネントです。`IonHeader` 自体は、いくつかのflexboxのレイアウトを処理する以外は、ほとんど何もしません。これは、`IonToolbar` や `IonSearchbar` などの他のコンポーネントを保持するためのものです。
+`IonHeader` は、ページの先頭に存在することを意図したコンポーネントです。`IonHeader` 自体は、いくつかの flexbox のレイアウトを処理する以外は、ほとんど何もしません。これは、`IonToolbar` や `IonSearchbar` などの他のコンポーネントを保持するためのものです。
 
 `IonContent` はその名の通り、私たちのページのメインコンテンツ領域です。ユーザーが操作するスクロール可能なコンテンツと、アプリで使用できるスクロールイベントを提供する責任をもっています。
 
 私たちの現在のコンテンツは比較的シンプルが、実際のアプリで使えるようなものは何も含まれていません。
 
 :::note
-簡潔にするために、他のコンポーネントの関数宣言やimport文など、コンポーネントの繰り返し部分を除外しています。
+簡潔にするために、他のコンポーネントの関数宣言や import 文など、コンポーネントの繰り返し部分を除外しています。
 :::
 
 ```tsx
@@ -194,7 +194,7 @@ const Home: React.FC = () => {
 </IonPage>
 ```
 
-この `IonContent` では、 `IonList` と、さらに複雑な `IonItem`  コンポーネントを追加します。ここでは `IonItem`  を中心に見ていきます。
+この `IonContent` では、 `IonList` と、さらに複雑な `IonItem` コンポーネントを追加します。ここでは `IonItem` を中心に見ていきます。
 
 ```tsx
 <IonItem>
@@ -209,11 +209,11 @@ const Home: React.FC = () => {
 </IonItem>
 ```
 
-ItemはReactの概念とWeb Componentの概念が混在していることを明確に示す重要な要素です。Reactの概念の最初の明確な例は、 `IonCheckbox` のReactコンポーネントの自己終了タグです。これは、子コンテンツを含まないコンポーネントを記述する単純な方法です。
+Item は React の概念と Web Component の概念が混在していることを明確に示す重要な要素です。React の概念の最初の明確な例は、 `IonCheckbox` の React コンポーネントの自己終了タグです。これは、子コンテンツを含まないコンポーネントを記述する単純な方法です。
 
-Webコンポーネント側には、 `slot` という特殊な属性があります。これは、レンダリング時に `IonItem` に `IonCheckbox` を配置する場所を知らせるためのキーです。これはReact APIではなく、Web標準APIです。
+Web コンポーネント側には、 `slot` という特殊な属性があります。これは、レンダリング時に `IonItem` に `IonCheckbox` を配置する場所を知らせるためのキーです。これは React API ではなく、Web 標準 API です。
 
-Ionic Frameworkの別のコンポーネントであるFAB（フローティング・アクション・ボタン）を見てみましょう。FABは、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。このFABには、FAB、FABボタンおよびアイコンの3つのコンポーネントが必要です。
+Ionic Framework の別のコンポーネントである FAB（フローティング・アクション・ボタン）を見てみましょう。FAB は、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。この FAB には、FAB、FAB ボタンおよびアイコンの 3 つのコンポーネントが必要です。
 
 ```tsx
 import { add } from ‘ionicons/icons’;
@@ -233,9 +233,9 @@ import { add } from ‘ionicons/icons’;
 </IonContent>
 ```
 
-メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
+メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot 属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
 
-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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. 
+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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package.
 
 ```tsx
 import { add } from 'ionicons/icons';
@@ -260,15 +260,15 @@ const Home: React.FC<RouteComponentProps> = () => {
 export default Home;
 ```
 
-コンポーネント宣言では、`RouteComponentProps` 型 (`react-router` からimport)の `props` を渡しています。この `props`オブジェクトは、React Routerから履歴APIへのアクセスを提供し、新しいルートをナビゲーション・スタックにプッシュできるようにします。`IonFabButton` では、クリックハンドラーを追加し、 `props.history.push` を呼び出して新しいルートを渡すだけです。この場合は、 `new` に移動します。
+コンポーネント宣言では、`RouteComponentProps` 型 (`react-router` から import)の `props` を渡しています。この `props`オブジェクトは、React Router から履歴 API へのアクセスを提供し、新しいルートをナビゲーション・スタックにプッシュできるようにします。`IonFabButton` では、クリックハンドラーを追加し、 `props.history.push` を呼び出して新しいルートを渡すだけです。この場合は、 `new` に移動します。
 
 ```tsx
 <IonFabButton onClick={() => props.history.push('/new')} >
 ```
 
-## 新しいRouteの作成
+## 新しい Route の作成
 
-これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しいrouteをルーターの宣言に追加する必要があります。 `App.tsx` を開いて、 `new` のrouteを追加します。
+これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しい route をルーターの宣言に追加する必要があります。 `App.tsx` を開いて、 `new` の route を追加します。
 
 ```tsx
 ...
@@ -293,7 +293,7 @@ const App: React.FC = () => {
 export default App;
 ```
 
-ルータにroute `/new` のエントリが追加されたので、必要なコンポーネント `NewItem` を作成します。これは `src/pages/NewItem.tsx` にあります。
+ルータに route `/new` のエントリが追加されたので、必要なコンポーネント `NewItem` を作成します。これは `src/pages/NewItem.tsx` にあります。
 
 とりあえず、 `NewItem.tsx` にプレースホルダの内容を入力してみましょう。
 
@@ -325,7 +325,7 @@ Each view must contain an `IonPage` component. Page transitions will not work co
 
 ここの内容は非常に単純で、 `Home` コンポーネントに似ているはずです。新しいのは `IonBackButton` コンポーネントです。これは、前のルートに戻るために使用されます。まっすぐ前に?では、ページをリロードしたらどうなりますか?
 
-この場合、メモリ内の履歴が失われるため、戻るボタンが消えます。これに対処するには、 `defaultHref` 属性値を、履歴がない場合にナビゲートするURLに設定します。
+この場合、メモリ内の履歴が失われるため、戻るボタンが消えます。これに対処するには、 `defaultHref` 属性値を、履歴がない場合にナビゲートする URL に設定します。
 
 ```tsx
 return (
@@ -384,9 +384,9 @@ export const IconExample: React.FC = () => {
 
 ## Build a Native App
 
-UIコンポーネントやナビゲーションなど、Ionic Reactアプリの基本的な部分はすでに完成しています。Ionic Frameworkのコンポーネントの素晴らしいところは、iOS、Android、PWAを含むどこでも動作することです。モバイル、デスクトップ、その他にもデプロイするために、Ionicのクロスプラットフォームライブラリ [Capacitor](https://capacitorjs.com) を使用することができます。一貫性のあるWebに特化したAPIセットを提供することで、 Web標準をサポートするプラットフォーム上の豊富なネイティブデバイス機能にアクセスしながら、アプリケーションを可能な限りWeb標準に近づけることが可能になります。
+UI コンポーネントやナビゲーションなど、Ionic React アプリの基本的な部分はすでに完成しています。Ionic Framework のコンポーネントの素晴らしいところは、iOS、Android、PWA を含むどこでも動作することです。モバイル、デスクトップ、その他にもデプロイするために、Ionic のクロスプラットフォームライブラリ [Capacitor](https://capacitorjs.com) を使用することができます。一貫性のある Web に特化した API セットを提供することで、 Web 標準をサポートするプラットフォーム上の豊富なネイティブデバイス機能にアクセスしながら、アプリケーションを可能な限り Web 標準に近づけることが可能になります。
 
-ネイティブ機能を追加するのは簡単で、最初にプロジェクトにCapacitorを追加します:
+ネイティブ機能を追加するのは簡単で、最初にプロジェクトに Capacitor を追加します:
 
 ```shell
 ionic integrations enable capacitor
@@ -400,7 +400,7 @@ ionic cap add ios
 ionic cap add android
 ```
 
-iOSとAndroidのプロジェクトを開いたり、ビルド、実行するのに、ネイティブのIDE(Xcode と Android Studio)を使います:
+iOS と Android のプロジェクトを開いたり、ビルド、実行するのに、ネイティブの IDE(Xcode と Android Studio)を使います:
 
 ```shell
 ionic cap open ios
@@ -409,7 +409,7 @@ ionic cap open android
 
 詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
 
-次に、 [すべての利用可能なAPIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
+次に、 [すべての利用可能な APIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
 
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
@@ -447,8 +447,8 @@ export default Home;
 
 ## 次にすること
 
-このガイドでは、Ionic Reactアプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としてのCapacitorの紹介について説明した。ReactとCapacitorで完全なIonicアプリを作るには、[First App guide](your-first-app.md)を参照してください。
+このガイドでは、Ionic React アプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としての Capacitor の紹介について説明した。React と Capacitor で完全な Ionic アプリを作るには、[First App guide](your-first-app.md)を参照してください。
 
-Ionicのコンポーネントの詳細は [component API pages](https://ionicframework.com/docs/components) をチェックしてほしい。Reactの詳細については、 [React Docs](https://reactjs.org/) を参照ください。ネイティブ機能の構築を続けるには、 [Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
+Ionic のコンポーネントの詳細は [component API pages](https://ionicframework.com/docs/components) をチェックしてほしい。React の詳細については、 [React Docs](https://reactjs.org/) を参照ください。ネイティブ機能の構築を続けるには、 [Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
 
 アプリ構築をお楽しみください! 🎉
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
index 1b11c8063b2..4387363afee 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
@@ -10,11 +10,11 @@ title: ブラウザサポート
   />
 </head>
 
-Ionicの本来の目標は、HTML、CSS、JavaScriptといったWeb技術を使用してモバイルアプリを開発することを簡単にすることでした。Ionicはこのウェブテクノロジーの基盤により、ウェブ、iOS、Android、ブラウザ、PWAなど、どこでも実行できます。
+Ionic の本来の目標は、HTML、CSS、JavaScript といった Web 技術を使用してモバイルアプリを開発することを簡単にすることでした。Ionic はこのウェブテクノロジーの基盤により、ウェブ、iOS、Android、ブラウザ、PWA など、どこでも実行できます。
 
 ## モバイルブラウザ
 
-[スタイルの適用](../core-concepts/fundamentals.md#adaptive-styling)を追求するために, Ionicは以下のモバイルプラットフォームを完全にサポート、テストしています。:
+[スタイルの適用](../core-concepts/fundamentals.md#adaptive-styling)を追求するために, Ionic は以下のモバイルプラットフォームを完全にサポート、テストしています。:
 
 | Framework |        Android         |  iOS  |
 | :-------: | :--------------------: | :---: |
@@ -27,21 +27,20 @@ Ionicの本来の目標は、HTML、CSS、JavaScriptといったWeb技術を使
 最新のプラットフォームの情報については [latest Android stats](https://developer.android.com/about/dashboards/) と [latest iOS stats](https://developer.apple.com/support/app-store/) をご確認ください。
 :::
 
-### Android Supportの注意点
+### Android Support の注意点
 
-Android 5.0から、WebviewはAndroidから独立して更新できる別のアプリケーションに移されました。これは、ほとんどのAndroid 5.0以上のデバイスがChromiumの最新バージョンを実行していることを意味します。しかし、ウェブビューを更新することができないAndroidデバイスがまだ存在しています。これらのウェブビューは、通常、デバイスが最初に出荷されたときに利用可能だったバージョンに留まっています。
+Android 5.0 から、Webview は Android から独立して更新できる別のアプリケーションに移されました。これは、ほとんどの Android 5.0 以上のデバイスが Chromium の最新バージョンを実行していることを意味します。しかし、ウェブビューを更新することができない Android デバイスがまだ存在しています。これらのウェブビューは、通常、デバイスが最初に出荷されたときに利用可能だったバージョンに留まっています。
 
-デバイスが実行しているWebViewのバージョンを調べるには、Chrome Dev Toolsを使用してアプリケーションを検査する際に、コンソールに`window.navigator.userAgent`を記録してください。
+デバイスが実行している WebView のバージョンを調べるには、Chrome Dev Tools を使用してアプリケーションを検査する際に、コンソールに`window.navigator.userAgent`を記録してください。
 
 ## デスクトップブラウザ
 
-Ionicはウェブ技術をベースにしているため、モバイルデバイスと同じようにデスクトップブラウザーでも動作します。デスクトップのレイアウトについては、[クロスプラットフォーム](../core-concepts/cross-platform.md#desktop)を参照してください。
+Ionic はウェブ技術をベースにしているため、モバイルデバイスと同じようにデスクトップブラウザーでも動作します。デスクトップのレイアウトについては、[クロスプラットフォーム](../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** | 70+      | 63+      | ✔        | ✔        |
-|  **IE 11**  | **X**    | **X**    | **X**    | **X**    |
-
+| **Chrome**  |   79+    |   60+    |    ✔     |    ✔     |
+| **Safari**  |   14+    |   13+    |    ✔     |    ✔     |
+|  **Edge**   |   79+    |   79+    |   79+    |    ✔     |
+| **Firefox** |   70+    |   63+    |    ✔     |    ✔     |
+|  **IE 11**  |  **X**   |  **X**   |  **X**   |  **X**   |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
index 9b10bc85e54..aeb6e50d5c6 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
@@ -21,8 +21,8 @@ title: 用語集
     <a href="http://developer.android.com/sdk/index.html" target="_blank">
       Android SDK
     </a>{' '}
-    は、Google の Android Platform の開発をする開発者向けに作られたソフトウェア開発キットです。
-    Android アプリケーションのビルド、テスト、デバッグ用のツールが含まれています。
+    は、Google の Android Platform の開発をする開発者向けに作られたソフトウェア開発キットです。 Android
+    アプリケーションのビルド、テスト、デバッグ用のツールが含まれています。
   </p>
 </section>
 
@@ -46,9 +46,9 @@ title: 用語集
     <a href="https://github.com/postcss/autoprefixer" target="_blank">
       Autoprefixer
     </a>{' '}
-    は、ベンダー固有のプレフィックスを手書きの Sass/CSS コードに追加するツールです。
-    これにより、作成する標準化された CSS ルールが、サポートするすべてのブラウザに確実に適用されます。
-    たとえば、autoprefixer を使用すると、さまざまなブラウザで使用されるすべての flexbox 構文を知る必要がなく、
+    は、ベンダー固有のプレフィックスを手書きの Sass/CSS コードに追加するツールです。 これにより、作成する標準化された
+    CSS ルールが、サポートするすべてのブラウザに確実に適用されます。 たとえば、autoprefixer
+    を使用すると、さまざまなブラウザで使用されるすべての flexbox 構文を知る必要がなく、
     <code>display: flex;</code> と記述するだけで済み、かつ自動的に正しくCSSに差し込まれます。
   </p>
 </section>
@@ -58,8 +58,8 @@ title: 用語集
     <h3>Bundling</h3>
   </a>
   <p>
-    バンドルとは、アプリケーションの依存関係（自分で書いたコードと任意にインストールされている npm モジュール）を取得し、
-    コンパイル/トランスパイルすることで一つのファイルに落とし込むプロセスです。
+    バンドルとは、アプリケーションの依存関係（自分で書いたコードと任意にインストールされている npm
+    モジュール）を取得し、 コンパイル/トランスパイルすることで一つのファイルに落とし込むプロセスです。
   </p>
 </section>
 
@@ -72,9 +72,10 @@ title: 用語集
       Capacitor
     </a>{' '}
     は、web ベースのアプリケーションをネイティブの iOS、Android、Electron、web上で実行できるようにするオープンソースの
-    クロスプラットフォームアプリランタイムです。
-    「ネイティブのプログレッシブ Web アプリケーション」を示すこれらのアプリはとても参考になり、
-    それらは従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitor は Ionic 社によって作られ、活発に開発/サポートされています。
+    クロスプラットフォームアプリランタイムです。 「ネイティブのプログレッシブ Web
+    アプリケーション」を示すこれらのアプリはとても参考になり、
+    それらは従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitor は Ionic
+    社によって作られ、活発に開発/サポートされています。
   </p>
 </section>
 
@@ -83,15 +84,16 @@ title: 用語集
     <h3>CLI</h3>
   </a>
   <p>
-    CLI、または <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface はプログラムと互いに作用し合う、
-    テキストベースのインターフェースです。Mac ユーザの共通のコマンドラインアプリケーションは
-    Terminal アプリケーションであり、Windows ユーザによく使われるものはコマンドプロンプトです。
-    Ionic コミュニティでよく使われるものは、次に示すこの{' '}
+    CLI、または <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface
+    はプログラムと互いに作用し合う、 テキストベースのインターフェースです。Mac
+    ユーザの共通のコマンドラインアプリケーションは Terminal アプリケーションであり、Windows
+    ユーザによく使われるものはコマンドプロンプトです。 Ionic コミュニティでよく使われるものは、次に示すこの{' '}
     <a href="https://ionicframework.com/docs/v1/cli/">Ionic's CLI</a> というターミナルです。Ionic's CLI は、
     アプリケーションのプロダクションビルドの生成や、開発用のサーバーの起動、
-    <a href="https://ionic.io/appflow" target="_blank">Ionic の商用サービス</a>
-    へのアクセス{' '}など、様々なことに使われています
-    。
+    <a href="https://ionic.io/appflow" target="_blank">
+      Ionic の商用サービス
+    </a>
+    へのアクセス など、様々なことに使われています 。
   </p>
 </section>
 
@@ -116,9 +118,10 @@ title: 用語集
     <a href="https://cordova.apache.org" target="_blank">
       Apache Cordova
     </a>{' '}
-    は、標準の HTML/CSS/JS を本格的なネイティブアプリケーションに変換する、オープンソースのモバイルアプリケーション開発用フレームワークです。
-    実機のカメラや加速度計などのネイティブの機能にアクセスする JavaScript API を提供します。
-    Cordova は、ウェブアプリケーションを iOS、Android、Windows Phone にパッケージングするために必要なビルドツールを含みます。
+    は、標準の HTML/CSS/JS
+    を本格的なネイティブアプリケーションに変換する、オープンソースのモバイルアプリケーション開発用フレームワークです。
+    実機のカメラや加速度計などのネイティブの機能にアクセスする JavaScript API を提供します。 Cordova
+    は、ウェブアプリケーションを iOS、Android、Windows Phone にパッケージングするために必要なビルドツールを含みます。
   </p>
 </section>
 
@@ -153,12 +156,10 @@ title: 用語集
     <h3>Decorators</h3>
   </a>
   <p>
-    デコレータは、関数を返す式です。既存の関数を使用して、その動作を拡張できます。
-    TypeScript では、<i>クラス</i> や <i>パラメータ</i> を装飾することもできます。
-    <strong>クラス</strong> を装飾すると、そのコンストラクタの動作がラップおよび拡張されます。
-    つまり、デコレータはコンストラクタが呼び出されるといくつかの機能を追加し、独自のコンストラクタを返します。
-    <strong>パラメータ</strong> を修飾すると、
-    そのパラメータに渡される引数がラップされます。
+    デコレータは、関数を返す式です。既存の関数を使用して、その動作を拡張できます。 TypeScript では、<i>クラス</i> や{' '}
+    <i>パラメータ</i> を装飾することもできます。
+    <strong>クラス</strong> を装飾すると、そのコンストラクタの動作がラップおよび拡張されます。 つまり、デコレータはコンストラクタが呼び出されるといくつかの機能を追加し、独自のコンストラクタを返します。
+    <strong>パラメータ</strong> を修飾すると、 そのパラメータに渡される引数がラップされます。
     デコレータは、引数がメソッドに渡されると機能を追加し、独自の引数を返します。
   </p>
 </section>
@@ -168,8 +169,8 @@ title: 用語集
     <h3>ES5</h3>
   </a>
   <p>
-    ES5 とは EcmaScript 5th Edition のことです。
-    簡単に言えば、ES5 は今日開発者が最もよく知っている JavaScript のバージョンのことです。
+    ES5 とは EcmaScript 5th Edition のことです。 簡単に言えば、ES5 は今日開発者が最もよく知っている JavaScript
+    のバージョンのことです。
   </p>
 </section>
 
@@ -179,9 +180,10 @@ title: 用語集
   </a>
   <p>
     このバージョンの JavaScript には、クラス、モジュール、イテレーター、Promise など、
-    広範囲の新機能が導入されています。Evergreen のブラウザ(Chrome、Safari、Firefox、Edge)は
-    ES6 を完全にサポートしていますが、古いブラウザで ES6 の機能を使うには、<a href="#babel">Babel</a> や
-    <a href="#typescript">TypeScript</a> のようなツールが ES6 のコードを ES5 に<a href="#transpiler">変換</a>する必要があります。
+    広範囲の新機能が導入されています。Evergreen のブラウザ(Chrome、Safari、Firefox、Edge)は ES6
+    を完全にサポートしていますが、古いブラウザで ES6 の機能を使うには、<a href="#babel">Babel</a> や
+    <a href="#typescript">TypeScript</a> のようなツールが ES6 のコードを ES5 に<a href="#transpiler">変換</a>
+    する必要があります。
   </p>
 </section>
 
@@ -211,9 +213,9 @@ title: 用語集
     <h3>Genymotion</h3>
   </a>
   <p>
-    Genymotion はサードパーティーの Android エミュレータです。
-    非常に高速で、Android 上でアプリを素早くテストするのに便利だ。
-    詳しくは、Genymotion の<a href="../developing/tips#using-genymotion-android">リソースのセクション</a>を参照してください。
+    Genymotion はサードパーティーの Android エミュレータです。 非常に高速で、Android
+    上でアプリを素早くテストするのに便利だ。 詳しくは、Genymotion の
+    <a href="../developing/tips#using-genymotion-android">リソースのセクション</a>を参照してください。
   </p>
 </section>
 
@@ -266,9 +268,9 @@ title: 用語集
     <a href="https://ionic.io/ionicons/" target="_blank">
       Ionicons
     </a>{' '}
-    は Ionic社によって作成・利用されているオープンソースのアイコンのセットです。
-    1:1 で iOS とマテリアルデザインのアイコンと、よく使われるソーシャル/アプリケーションのアイコンを含みます。
-    Ionicons はデフォルトで Ionic ディストリビューションに含まれますが、任意のプロジェクトでも使うことが出来ます。
+    は Ionic社によって作成・利用されているオープンソースのアイコンのセットです。 1:1 で iOS
+    とマテリアルデザインのアイコンと、よく使われるソーシャル/アプリケーションのアイコンを含みます。 Ionicons
+    はデフォルトで Ionic ディストリビューションに含まれますが、任意のプロジェクトでも使うことが出来ます。
   </p>
 </section>
 
@@ -311,8 +313,10 @@ title: 用語集
   </a>
   <p>
     <strong>Live Reload</strong> (or <strong>live-reload</strong>) は、アプリケーションの変更を検出すると、
-    自動的にブラウザまたは{' '} <a href="../core-concepts/webview">Web View</a> をリロードするツールです。場合によっては、ウィンドウ全体をリロードしなくても、
-    アプリケーションの一部を置き換えることができます。ライブリロード には実行中の開発サーバーが必要なので、Web View にはデプロイされたファイルを単に読むのではなく、URLをロードする必要があるため、別のデバイスでライブリロードを使用するのは難しいかもしれません。詳しくは{' '}
+    自動的にブラウザまたは <a href="../core-concepts/webview">Web View</a>{' '}
+    をリロードするツールです。場合によっては、ウィンドウ全体をリロードしなくても、
+    アプリケーションの一部を置き換えることができます。ライブリロード には実行中の開発サーバーが必要なので、Web View
+    にはデプロイされたファイルを単に読むのではなく、URLをロードする必要があるため、別のデバイスでライブリロードを使用するのは難しいかもしれません。詳しくは{' '}
     <a href="../cli/livereload">Live Reload docs</a> を御覧ください。
   </p>
 </section>
@@ -325,8 +329,8 @@ title: 用語集
     <a href="https://nodejs.org/" target="_blank">
       Node
     </a>{' '}
-    は、サーバサイドで JavaScript を書くことができるランタイム環境です。
-    加えて、Node は Web サービスに使用されるだけでなく、<a href="#cli">Ionic CLI</a>などの開発者ツールの構築にもよく使用されます。
+    は、サーバサイドで JavaScript を書くことができるランタイム環境です。 加えて、Node は Web
+    サービスに使用されるだけでなく、<a href="#cli">Ionic CLI</a>などの開発者ツールの構築にもよく使用されます。
   </p>
 </section>
 
@@ -360,8 +364,7 @@ title: 用語集
   </a>
   <p>
     Apple 社が <strong>Bundle ID</strong> と呼び、Android 社が <strong>Application ID</strong> と呼ぶ
-    <strong>Package ID</strong> は、App Store/Play Store に公開されたアプリを識別するために使用されます。
-    これは
+    <strong>Package ID</strong> は、App Store/Play Store に公開されたアプリを識別するために使用されます。 これは
     <a href="https://en.wikipedia.org/wiki/Reverse_domain_name_notation" target="_blank">
       逆 DNS 表記
     </a>
@@ -378,8 +381,9 @@ title: 用語集
     <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank">
       polyfill
     </a>{' '}
-    は、ブラウザに機能を追加し、ブラウザの違いを標準化する少しのコードです。これは <a href="#shim">shim</a> と似ていますが、
-    shim に独自の API がある場合には、ブラウザに実装されていることを期待する API として polyfill を使用します。
+    は、ブラウザに機能を追加し、ブラウザの違いを標準化する少しのコードです。これは <a href="#shim">shim</a>{' '}
+    と似ていますが、 shim に独自の API がある場合には、ブラウザに実装されていることを期待する API として polyfill
+    を使用します。
   </p>
 </section>
 
@@ -391,8 +395,8 @@ title: 用語集
     <a href="https://angular.github.io/protractor/#/" target="_blank">
       Protractor
     </a>{' '}
-     Angular チームが開発したテストフレームワークです。Protractor は、エンドツーエンドのテストのために、
-     Karma のようなテストランナーと一緒に使うことができます。テストランナーを使用すると、コードの品質を高速かつプログラム的に検証できます。
+    Angular チームが開発したテストフレームワークです。Protractor は、エンドツーエンドのテストのために、 Karma
+    のようなテストランナーと一緒に使うことができます。テストランナーを使用すると、コードの品質を高速かつプログラム的に検証できます。
   </p>
 </section>
 
@@ -401,8 +405,7 @@ title: 用語集
     <h3>Sass</h3>
   </a>
   <p>
-    Sass は CSS にコンパイルされるスタイルシート言語で、Ionicで使用されています。
-    Sass は CSS に似ています: {' '}
+    Sass は CSS にコンパイルされるスタイルシート言語で、Ionicで使用されています。 Sass は CSS に似ています:{' '}
     <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_" target="_blank">
       変数
     </a>
@@ -458,8 +461,8 @@ title: 用語集
     <h3>Shim</h3>
   </a>
   <p>
-    Shim は、ブラウザ間で API を正規化するコードです。
-    Shim は、エンドユーザーからブラウザ固有の実装を隠すような独自の API を持つことができます。
+    Shim は、ブラウザ間で API を正規化するコードです。 Shim は、エンドユーザーからブラウザ固有の実装を隠すような独自の
+    API を持つことができます。
   </p>
 </section>
 
@@ -468,10 +471,11 @@ title: 用語集
     <h3>Transpiler</h3>
   </a>
   <p>
-    トランスパイル は、実行前にコードをある言語から別の言語に変換するプロセスです。一般的に、トランスパイルは高級言語を別の高級言語に変換します。
-    Ionic Framework の最も一般的な{' '}
-    <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>
-    (<a href="#typescript">TypeScript</a>) から <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
+    トランスパイル
+    は、実行前にコードをある言語から別の言語に変換するプロセスです。一般的に、トランスパイルは高級言語を別の高級言語に変換します。
+    Ionic Framework の最も一般的な <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>(<a href="#typescript">
+      TypeScript
+    </a>) から <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
   </p>
 </section>
 
@@ -491,7 +495,8 @@ title: 用語集
     <a href="http://www.typescriptlang.org/Handbook#interfaces" target="_blank">
       インターフェース
     </a>
-    などの多くの機能を追加した JavaScript を提供することを意味します。Ionic は TypeScript で構築されていますが、Ionic アプリの構築において TypeScript の使用は完全にオプショナルです。
+    などの多くの機能を追加した JavaScript を提供することを意味します。Ionic は TypeScript で構築されていますが、Ionic アプリの構築において
+    TypeScript の使用は完全にオプショナルです。
   </p>
 </section>
 
@@ -514,8 +519,8 @@ title: 用語集
       Webpack
     </a>{' '}
     は、JavaScript モジュールとその他のアセットを一緒にバンドルします。
-    これを使用して、必要なときにのみ読み込まれる単一の、または複数の「チャンク」を作成できます。
-    Webpack を使うと、多くのファイルや依存関係を1つのファイルか、他のタイプにまとめることができます。
+    これを使用して、必要なときにのみ読み込まれる単一の、または複数の「チャンク」を作成できます。 Webpack
+    を使うと、多くのファイルや依存関係を1つのファイルか、他のタイプにまとめることができます。
   </p>
 </section>
 
@@ -528,10 +533,11 @@ title: 用語集
     <a href="https://www.w3.org/" target="_blank">
       World Wide Web Consortium
     </a>{' '}
-     (W3C) は Web の標準化団体です。業界のリーダーと一般市民が協力して {' '}
-     <a href="https://www.w3.org/standards/" target="_blank">
-       Web 標準
-    </a>を開発します。Web 標準とは、Web プラットフォームを定義するプロトコル、仕様、および技術のセットです。
+    (W3C) は Web の標準化団体です。業界のリーダーと一般市民が協力して{' '}
+    <a href="https://www.w3.org/standards/" target="_blank">
+      Web 標準
+    </a>
+    を開発します。Web 標準とは、Web プラットフォームを定義するプロトコル、仕様、および技術のセットです。
   </p>
 </section>
 
@@ -543,10 +549,10 @@ title: 用語集
     <a href="https://developer.apple.com/xcode/" target="_blank">
       Xcode
     </a>{' '}
-    は Apple 社のオペレーティングシステム(macOS、iOS、watchOS、tvOS) 上でソフトウェア開発を行うための Apple IDE(統合開発環境)であり、
-    他の言語やプラットフォーム用の拡張機能を備えています。
-    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.
+    は Apple 社のオペレーティングシステム(macOS、iOS、watchOS、tvOS) 上でソフトウェア開発を行うための Apple
+    IDE(統合開発環境)であり、 他の言語やプラットフォーム用の拡張機能を備えています。 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>
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
index c754cb8d3af..0b80d5dc7e9 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
@@ -12,7 +12,7 @@ title: サポートポリシー
 
 ## コミュニティメンテナンス
 
-Ionic Frameworkは当初から100%オープンソース(MIT)で、今後もオープンソースとして公開されます。開発者は、Ionicのコミュニティメンテナンス戦略を通して、Ionicが彼らのクロスプラットフォームアプリにとって正しい選択であることを保証することができます。Ionicチームは定期的に新しいリリースとバグ修正を提供しており、コミュニティからのプルリクエストを歓迎しています。
+Ionic Framework は当初から 100%オープンソース(MIT)で、今後もオープンソースとして公開されます。開発者は、Ionic のコミュニティメンテナンス戦略を通して、Ionic が彼らのクロスプラットフォームアプリにとって正しい選択であることを保証することができます。Ionic チームは定期的に新しいリリースとバグ修正を提供しており、コミュニティからのプルリクエストを歓迎しています。
 
 ## Framework Maintenance and Support Status
 
@@ -20,15 +20,15 @@ Given the reality of time and resource constraints as well as the desire to keep
 
 The current status of each Ionic Framework version is:
 
-| Version |        Status         |   Released   | Maintenance Ends | Ext. Support Ends |
-| :-----: | :-------------------: | :----------: | :--------------: | :---------------: |
-| V7      | Beta                  | TBD          | TBD              | TBD               |
-| V6      | **Active**            | Dec 8, 2021  | TBD              | TBD               |
-| V5      | End of Support        | 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      |
+| Version |     Status     |   Released   | Maintenance Ends | Ext. Support Ends |
+| :-----: | :------------: | :----------: | :--------------: | :---------------: |
+|   V7    |      Beta      |     TBD      |       TBD        |        TBD        |
+|   V6    |   **Active**   | Dec 8, 2021  |       TBD        |        TBD        |
+|   V5    | End of Support | 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).
@@ -43,11 +43,11 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
-| v7        | v14                     | v15.x^                  | 4.6+       |   
-| 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      |
+|    v7     |           v14           |         v15.x^          |    4.6+    |
+|    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.
 
@@ -61,18 +61,18 @@ Note that later versions of Ionic do not support iOS 13; see [mobile support tab
 
 | Framework | Required React Version | TypeScript |
 | :-------: | :--------------------: | :--------: |
-| v7        | v17+                   | 3.7+       |
-| v6        | v17+                   | 3.7+       |
-| v5        | v16.8+                 | 3.7+       |
-| v4        | v16.8+                 | 3.7+       |
+|    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+       |
+|    v7     |       v3.0.6+        |    3.9+    |
+|    v6     |       v3.0.6+        |    3.9+    |
+|    v5     |        v3.0+         |    3.9+    |
 
 ### Native Bridges
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
index 7f046f84893..af90bf12ced 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
@@ -2,24 +2,27 @@
 
 <!-- TOC goes here -->
 
-Ionic Frameworkは<a href="https://semver.org/" target="_blank">Semantic Versioning (SemVer)</a>の形式: <code>メジャー.マイナー.パッチ.</code>に従います。互換性のないAPIの変更は<code>メジャー</code>バージョン、後方互換性のある機能を追加する時は<code>マイナー</code>バージョン、後方互換性のあるバグ修正は<code>パッチ</code>バージョンをあげます。
+Ionic Framework は<a href="https://semver.org/" target="_blank">Semantic Versioning (SemVer)</a>の形式: <code>メジャー.マイナー.パッチ.</code>に従います。互換性のない API の変更は<code>メジャー</code>バージョン、後方互換性のある機能を追加する時は<code>マイナー</code>バージョン、後方互換性のあるバグ修正は<code>パッチ</code>バージョンをあげます。
 
 ## リリーススケジュール
 
 ### メジャーリリース
 
-メジャーリリースは、APIに重大な変更が加えられたときに公開されます。メジャーリリースはおよそ**6ヶ月**ごとに行われ、重大な変更が含まれる可能性があります。フィードバックを得るために、いくつかのリリース候補がメジャーリリースの前に公開されます。何が変更されているのか、またその理由がリリース候補に含まれる予定です。
+メジャーリリースは、API に重大な変更が加えられたときに公開されます。メジャーリリースはおよそ**6 ヶ月**ごとに行われ、重大な変更が含まれる可能性があります。フィードバックを得るために、いくつかのリリース候補がメジャーリリースの前に公開されます。何が変更されているのか、またその理由がリリース候補に含まれる予定です。
 
 ### マイナーリリース
 
-マイナーリリースは、新しい機能が追加されたり、APIが変更されたりした場合に公開されます。私たちは、リリースに自信を持てるよう、すべての変更点を徹底的にテストしますが、新しいコードには新しい問題が発生する可能性があります。マイナーバージョンのリリースは、機能追加やAPIの変更があった場合、**6週間ごと**に行う予定です。
+マイナーリリースは、新しい機能が追加されたり、API が変更されたりした場合に公開されます。私たちは、リリースに自信を持てるよう、すべての変更点を徹底的にテストしますが、新しいコードには新しい問題が発生する可能性があります。マイナーバージョンのリリースは、機能追加や API の変更があった場合、**6 週間ごと**に行う予定です。
 
 ### パッチリリース
 
-パッチリリースは、バグフィックスが含まれているが、APIが変更されておらず、破壊的な変更が導入されていない場合に公開されます。私たちは新しいパッチバージョンを**毎週**リリースする予定ですが、予定より早く、または遅くリリースする必要がある場合があります。パッチリリースでは、新機能による新たな問題を発生させることなく、既存のコードを修正できるように、パッチリリースは常にマイナーリリースより前に公開されます。
+パッチリリースは、バグフィックスが含まれているが、API が変更されておらず、破壊的な変更が導入されていない場合に公開されます。私たちは新しいパッチバージョンを**毎週**リリースする予定ですが、予定より早く、または遅くリリースする必要がある場合があります。パッチリリースでは、新機能による新たな問題を発生させることなく、既存のコードを修正できるように、パッチリリースは常にマイナーリリースより前に公開されます。
 
 ## Changelog
 
-注目すべき変更点の一覧はchangelogで確認することができます。これには、
+注目すべき変更点の一覧は changelog で確認することができます。これには、
 各リリースでのすべてのバグ修正と新機能の一覧が含まれています。
-<a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md" target="_blank">changelog</a>
+
+<a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md" target="_blank">
+  changelog
+</a>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
index eb8708c20d8..d9a344ebeec 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
@@ -1,17 +1,17 @@
-# Studioのインストール
+# Studio のインストール
 
-Ionic Studioの最新版のダウンロードはこちらです。 [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads).
+Ionic Studio の最新版のダウンロードはこちらです。 [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads).
 
 ## 必要な環境
 
-* macOS あるいは Windows 10
-* [Node &amp; npm](../../intro/environment.md#node-npm) がセットアップされている必要があります。
-* オプションとして、バージョン管理のために [Git](../../intro/environment.md#git) をインストール
+- macOS あるいは Windows 10
+- [Node &amp; npm](../../intro/environment.md#node-npm) がセットアップされている必要があります。
+- オプションとして、バージョン管理のために [Git](../../intro/environment.md#git) をインストール
 
 ## インストール
 
-Ionic Studio のダウンロードリンクはIonicダッシュボードの [downloads section](https://dashboard.ionicframework.com/personal/downloads) にあります。
+Ionic Studio のダウンロードリンクは Ionic ダッシュボードの [downloads section](https://dashboard.ionicframework.com/personal/downloads) にあります。
 
-まずIonic Studioをダウンロードしインストーラーを実行、ウィザードに従います。 Ionic Studioには依存するツールがあり、それらは起動時にインストールやアップデートが自動的に行われます。
+まず Ionic Studio をダウンロードしインストーラーを実行、ウィザードに従います。 Ionic Studio には依存するツールがあり、それらは起動時にインストールやアップデートが自動的に行われます。
 
-Ionic Studioは新しいバージョンがリリースされると自動的にアップデートされますが、上記ダウンロードリンクよりインストールしなおすことも可能です。
+Ionic Studio は新しいバージョンがリリースされると自動的にアップデートされますが、上記ダウンロードリンクよりインストールしなおすことも可能です。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
index d5810c9e90d..57296b57d65 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
@@ -15,16 +15,16 @@ import CodeColor from '@components/page/theming/CodeColor';
   />
 </head>
 
-CSSベースのテーマ設定では、CSSファイルをロードするか、いくつかのCSSプロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。
+CSS ベースのテーマ設定では、CSS ファイルをロードするか、いくつかの CSS プロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。
 
 ## `theme-color` Meta
 
-メタタグの `theme-color` は、ブラウザがページや周囲のインターフェイスの表示をカスタマイズするために使用する色を示します。この種類のmetaタグはメディアクエリも受け付けることができ、開発者はライトモードとダークモードの両方でテーマカラーを設定することができます。
+メタタグの `theme-color` は、ブラウザがページや周囲のインターフェイスの表示をカスタマイズするために使用する色を示します。この種類の meta タグはメディアクエリも受け付けることができ、開発者はライトモードとダークモードの両方でテーマカラーを設定することができます。
 
 メタタグ `theme-color` の `content` 値には、有効な <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noopener noreferrer">CSS Color</a> を含める必要があり、CSS Variables を含めることはできません。
 
 :::note
-`Theme-color`メタは、WebブラウザまたはPWAとして実行するときにインターフェースのテーマを制御し、アプリがCapacitorまたはCordovaを使用してデプロイされるときには影響しません。ステータスバーの下の領域をカスタマイズしたい場合は、[Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar)を使用することをお勧めします。
+`Theme-color`メタは、Web ブラウザまたは PWA として実行するときにインターフェースのテーマを制御し、アプリが Capacitor または Cordova を使用してデプロイされるときには影響しません。ステータスバーの下の領域をカスタマイズしたい場合は、[Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar)を使用することをお勧めします。
 :::
 
 以下の例では、iOS 15 でブラウザのインターフェイスをスタイルするために `theme-color` を使用する方法を示しています。
@@ -38,11 +38,11 @@ CSSベースのテーマ設定では、CSSファイルをロードするか、
 | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
 | ![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) |
 
-macOS Monterey以降のSafariでは、`theme-color`メタを使用してツールバーをカスタマイズすることもできます。
+macOS Monterey 以降の Safari では、`theme-color`メタを使用してツールバーをカスタマイズすることもできます。
 
-iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しますが、テーマをより細かく制御したい場合はこのmetaタグを追加すると便利です。
+iOS 15 と macOS の Safari は自動的に適切なテーマカラーを決定しますが、テーマをより細かく制御したい場合はこの meta タグを追加すると便利です。
 
-ブラウザのインターフェイスに干渉するため、ブラウザが使用しない色の小さなサブセットがあります。例えば、`content="red"`と設定すると、macOSのSafariでは、ツールバーの赤い閉じるボタンと干渉してしまうため、動作しません。このような状況に遭遇した場合は、色の選択を少し変えてみてください。
+ブラウザのインターフェイスに干渉するため、ブラウザが使用しない色の小さなサブセットがあります。例えば、`content="red"`と設定すると、macOS の Safari では、ツールバーの赤い閉じるボタンと干渉してしまうため、動作しません。このような状況に遭遇した場合は、色の選択を少し変えてみてください。
 
 :::note
 ブラウザは `manifest.json` に `theme` よりも `theme-color` メタが存在する場合、それを優先します。
@@ -87,7 +87,7 @@ iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しま
 
 ### The Alpha Problem
 
-16進数カラーのアルファ使用については、まだ完全な<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility" target="_blank">ブラウザサポート</a>はありません。<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()" target="_blank">rgba()</a> 関数は、`R, G, B, A` (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、`rgba()`　に受け渡される正しい値と間違った値の例を示しています。
+16 進数カラーのアルファ使用については、まだ完全な<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility" target="_blank">ブラウザサポート</a>はありません。<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()" target="_blank">rgba()</a> 関数は、`R, G, B, A` (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、`rgba()`　に受け渡される正しい値と間違った値の例を示しています。
 
 ```css
 /* These examples use the same color: blueviolet. */
@@ -110,7 +110,7 @@ iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しま
 See the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
 :::
 
-Ionicはいくつかのコンポーネントで不透明度（アルファ）を​​持つ色を使用します。これが機能するためには、それらのプロパティはRGBフォーマットで提供されなければなりません。末尾にバリエーションがあるプロパティのいずれかを変更する場合、 `-rgb` で終わる括弧なしのカンマ区切り形式でも提供されることが重要です。以下は、テキストと背景色を変更するための例です。
+Ionic はいくつかのコンポーネントで不透明度（アルファ）を ​​ 持つ色を使用します。これが機能するためには、それらのプロパティは RGB フォーマットで提供されなければなりません。末尾にバリエーションがあるプロパティのいずれかを変更する場合、 `-rgb` で終わる括弧なしのカンマ区切り形式でも提供されることが重要です。以下は、テキストと背景色を変更するための例です。
 
 ```css
 :root {
@@ -124,7 +124,7 @@ Ionicはいくつかのコンポーネントで不透明度（アルファ）を
 }
 ```
 
-RGB形式の色はhexプロパティとまったく同じ色ですが、現在は `rgba()` で使用できることに注意してください。例えば、`--ion-text-color-rgb` は以下のように利用できます。
+RGB 形式の色は hex プロパティとまったく同じ色ですが、現在は `rgba()` で使用できることに注意してください。例えば、`--ion-text-color-rgb` は以下のように利用できます。
 
 ```css
 body {
@@ -134,7 +134,7 @@ body {
 
 ### Variables in Media Queries
 
-[メディアクエリ](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) のCSS変数は現在サポートされていませんが、この問題を解決する[custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) と [custom environment variables](https://drafts.csswg.org/css-env-1/)を追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。
+[メディアクエリ](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) の CSS 変数は現在サポートされていませんが、この問題を解決する[custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) と [custom environment variables](https://drafts.csswg.org/css-env-1/)を追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。
 
 ```css
 :root {
@@ -146,11 +146,11 @@ body {
 }
 ```
 
-### CSSカラー変数の変更
+### CSS カラー変数の変更
 
-Sassの組み込み関数を使用して簡単に色を変更することは可能ですが、現在のところCSS変数で設定された色を変更するのはそれほど簡単ではありません。これは、CSSで [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) チャネルまたはHSLチャネルを分割してそれぞれの値を変更することで実現できますが、複雑で機能が不足しています。
+Sass の組み込み関数を使用して簡単に色を変更することは可能ですが、現在のところ CSS 変数で設定された色を変更するのはそれほど簡単ではありません。これは、CSS で [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) チャネルまたは HSL チャネルを分割してそれぞれの値を変更することで実現できますが、複雑で機能が不足しています。
 
-正確に説明します。基本的に、SassなどのCSSプリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、Sassには次のカラーを作成できます:
+正確に説明します。基本的に、Sass などの CSS プリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、Sass には次のカラーを作成できます:
 
 ```scss
 // Background color, shade, and tint
@@ -175,8 +175,8 @@ After running through the Sass compiler, the colors will have the following valu
 | `$text-darker`      | <CodeColor color="#1e1e1e">#1e1e1e</CodeColor> |
 | `$text-lighter`     | <CodeColor color="#6a6a6a">#6a6a6a</CodeColor> |
 
-ただし、CSS変数は実行時に設定でき、より動的であるため、現時点では単純な関数を使用して操作することはできません。
+ただし、CSS 変数は実行時に設定でき、より動的であるため、現時点では単純な関数を使用して操作することはできません。
 
-これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionicでは、これが[各色にバリエーションがある](colors.md#layered-colors)理由であり、テーマ設定に[stepped colors](themes.md#stepped-colors)が必要な理由でもあります。
+これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionic では、これが[各色にバリエーションがある](colors.md#layered-colors)理由であり、テーマ設定に[stepped colors](themes.md#stepped-colors)が必要な理由でもあります。
 
-これを可能にする[color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187)を議論している草案とIssuesはこちらからご覧いただけます。
+これを可能にする[color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187)を議論している草案と Issues はこちらからご覧いただけます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
index 6aedfb3d504..32b6efd71a9 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
@@ -13,31 +13,32 @@ import ColorAccordion from '@components/page/theming/ColorAccordion';
   />
 </head>
 
-Ionic Frameworkは、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。IonicアプリのThemingは今まで以上に簡単です。フレームワークはCSSで構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。
+Ionic Framework は、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。Ionic アプリの Theming は今まで以上に簡単です。フレームワークは CSS で構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。
 
 ## 配色
 
-Ionicには9つのデフォルトカラーがあり、多くのコンポーネントの色を変更するのに利用できます。各色は実際には `shade` や `tint` などの複数のプロパティの集まりで、Ionic全体で使用されます。
+Ionic には 9 つのデフォルトカラーがあり、多くのコンポーネントの色を変更するのに利用できます。各色は実際には `shade` や `tint` などの複数のプロパティの集まりで、Ionic 全体で使用されます。
 
-色を変更する際には、関連するすべてのプロパティを設定することが重要です。これは[Color Generator](color-generator.md)ツールで簡単に行えますが、必要であればこれらは手動で記述することもできます。Ionicの色については、[Colors](colors.md)を参照してください。
+色を変更する際には、関連するすべてのプロパティを設定することが重要です。これは[Color Generator](color-generator.md)ツールで簡単に行えますが、必要であればこれらは手動で記述することもできます。Ionic の色については、[Colors](colors.md)を参照してください。
 
 <ColorAccordion />
 
 ## Platform Standards
 
-Ionicコンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを __Adaptive Styling__ と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。
+Ionic コンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを **Adaptive Styling** と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。
 
-Ionicは、2つの **modes** をもっており、これらはプラットフォーム: `ios` と `md` に基づいてコンポーネントの外観がカスタマイズされます。各プラットフォームにはデフォルトモードがありますが、簡単に変更できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、[Platform Styles](platform-styles.md) をご覧ください。
+Ionic は、2 つの **modes** をもっており、これらはプラットフォーム: `ios` と `md` に基づいてコンポーネントの外観がカスタマイズされます。各プラットフォームにはデフォルトモードがありますが、簡単に変更できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、[Platform Styles](platform-styles.md) をご覧ください。
 
 ## CSS Variables
-Ionicコンポーネントは、 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>を使ってテーマ化されています。CSS変数は、動的な値を静的なCSSで利用することができます。これは今まではSassのようなCSSプリプロセッサを必要としていたものです。アプリケーションの外観は、[Ionic Variables](/docs/theming/css-variables#ionic-variables)のいずれかの値を変更することで簡単に変更できます。
 
-Ionic Frameworkのコンポーネントは、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSSプロパティ（変数）</a>を使ってテーマ化されています。CSS 変数は、静的な言語に対して動的な値を追加するものです。これは、従来はSassのようなCSSプリプロセッサが必要だったものです。Ionic Frameworkが提供する[CSS Variables](css-variables.md)のいずれかの値を変更することで、アプリケーションの外観を簡単に変更することができます。
+Ionic コンポーネントは、 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>を使ってテーマ化されています。CSS 変数は、動的な値を静的な CSS で利用することができます。これは今までは Sass のような CSS プリプロセッサを必要としていたものです。アプリケーションの外観は、[Ionic Variables](/docs/theming/css-variables#ionic-variables)のいずれかの値を変更することで簡単に変更できます。
+
+Ionic Framework のコンポーネントは、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS プロパティ（変数）</a>を使ってテーマ化されています。CSS 変数は、静的な言語に対して動的な値を追加するものです。これは、従来は Sass のような CSS プリプロセッサが必要だったものです。Ionic Framework が提供する[CSS Variables](css-variables.md)のいずれかの値を変更することで、アプリケーションの外観を簡単に変更することができます。
 
 ## CSS Shadow Parts
 
-CSS Shadow Partsが追加され、Ionic Framework Shadowコンポーネントの完全なカスタマイズが容易になりました。これまで、 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> を使用するコンポーネントは、シャドウ・ツリー内の要素を直接スタイル設定できませんでした。Shadow Partsが追加されたため、Shadowコンポーネントの内部要素のすべてのプロパティーにCSS変数を使用する必要がなくなりました。パーツを使用したIonic Frameworkコンポーネントのカスタマイズの詳細については、[CSS Shadow Parts](css-shadow-parts.md)ガイドを参照してください。
+CSS Shadow Parts が追加され、Ionic Framework Shadow コンポーネントの完全なカスタマイズが容易になりました。これまで、 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> を使用するコンポーネントは、シャドウ・ツリー内の要素を直接スタイル設定できませんでした。Shadow Parts が追加されたため、Shadow コンポーネントの内部要素のすべてのプロパティーに CSS 変数を使用する必要がなくなりました。パーツを使用した Ionic Framework コンポーネントのカスタマイズの詳細については、[CSS Shadow Parts](css-shadow-parts.md)ガイドを参照してください。
 
 ## Branding
 
-Ionicは、ブランディングや配色にあったテーマとなるアプリケーションの配色を提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まですべてカスタマイズ可能です。ブランディングの詳細については、[Themes](themes.md) をご覧ください。
+Ionic は、ブランディングや配色にあったテーマとなるアプリケーションの配色を提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まですべてカスタマイズ可能です。ブランディングの詳細については、[Themes](themes.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
index 10b2704f82e..41dbce60f73 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
@@ -14,6 +14,6 @@ import ColorGenerator from '@components/page/theming/ColorGenerator';
   />
 </head>
 
-アプリのUIにカスタムカラーパレットを作成します。色の16進数値を更新し、右のデモアプリで確認した後、生成されたコードをIonicプロジェクトに直接コピー＆ペーストしてください。
+アプリの UI にカスタムカラーパレットを作成します。色の 16 進数値を更新し、右のデモアプリで確認した後、生成されたコードを Ionic プロジェクトに直接コピー＆ペーストしてください。
 
 <ColorGenerator />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
index 19608dd4d59..822680c22e5 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
@@ -16,9 +16,9 @@ import CodeColor from '@components/page/theming/CodeColor';
   />
 </head>
 
-Ionicには、多くのコンポーネントの配色を変更するために使用できる9つのデフォルトカラーがあります。 それぞれの配色は、 `shade` と `tint` を含む複数のプロパティを持つコレクションであり、Ionic全体で利用されます。
+Ionic には、多くのコンポーネントの配色を変更するために使用できる 9 つのデフォルトカラーがあります。 それぞれの配色は、 `shade` と `tint` を含む複数のプロパティを持つコレクションであり、Ionic 全体で利用されます。
 
-デフォルトの配色を変更するために、 `color` 属性を使って任意の色をIonicのコンポーネントに適用できます。以下の buttons はテキストと背景が `color` 属性に基づいて変更されていることに注目してください。button に `color` 属性がない時は、デフォルト値として `primary` の配色が適用されます。
+デフォルトの配色を変更するために、 `color` 属性を使って任意の色を Ionic のコンポーネントに適用できます。以下の buttons はテキストと背景が `color` 属性に基づいて変更されていることに注目してください。button に `color` 属性がない時は、デフォルト値として `primary` の配色が適用されます。
 
 ```html
 <ion-button>Default</ion-button>
@@ -35,13 +35,13 @@ Ionicには、多くのコンポーネントの配色を変更するために使
 
 ### 配色のレイヤードスタイル
 
-それぞれの配色は、これらのプロパティで構成されています: `base`, `contrast`, `shade`, と `tint` です。`base` と `contrast` の配色は `rgb` プロパティと同一の配色が求められます。 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a> をご覧ください。この `rgb` の変数が必要な理由は [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。下のドロップダウンから選択することで、Ionicが提供するデフォルトの配色とそのバリエーションを確認することができます。
+それぞれの配色は、これらのプロパティで構成されています: `base`, `contrast`, `shade`, と `tint` です。`base` と `contrast` の配色は `rgb` プロパティと同一の配色が求められます。 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a> をご覧ください。この `rgb` の変数が必要な理由は [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。下のドロップダウンから選択することで、Ionic が提供するデフォルトの配色とそのバリエーションを確認することができます。
 
 <LayeredColorsSelect />
 
 ## Modifying Colors
 
-配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、`secondary color` を <code-color mode="md" value="#006600"></code-color> に変更する時、以下のCSSプロパティが必要です。
+配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、`secondary color` を <code-color mode="md" value="#006600"></code-color> に変更する時、以下の CSS プロパティが必要です。
 
 ```css
 :root {
@@ -60,13 +60,13 @@ Ionicには、多くのコンポーネントの配色を変更するために使
 ベースカラーからバリエーションカラーを取得する方法がわからない？その場合、 [Color Generator](color-generator.md) をお試しください。これはすべてのバリエーションを計算し、アプリにコピー&ペーストできるコードを提供します！
 :::
 
-CSS変数についてもっと詳しく知りたい時は [CSS Variables documentation](css-variables.md) をご覧ください。
+CSS 変数についてもっと詳しく知りたい時は [CSS Variables documentation](css-variables.md) をご覧ください。
 
 ### 配色の追加
 
-カラーは、Ionicコンポーネントの 「color」 プロパティを設定するか、CSSを使用してスタイル設定することで、アプリケーション全体で使用できるように追加できます。新しいカラーを手動で追加する方法については、この後の 「New Color Creator」 を参照してください。コピーしてアプリケーションに貼り付ける新しいカラーのコードを簡単に生成する方法については、次の 「New Color Creator」 を参照してください。
+カラーは、Ionic コンポーネントの 「color」 プロパティを設定するか、CSS を使用してスタイル設定することで、アプリケーション全体で使用できるように追加できます。新しいカラーを手動で追加する方法については、この後の 「New Color Creator」 を参照してください。コピーしてアプリケーションに貼り付ける新しいカラーのコードを簡単に生成する方法については、次の 「New Color Creator」 を参照してください。
 
-新しいカラーを追加するには、最初にルートのカラーのすべてのバリエーションのCSS変数を定義します。たとえば、`favorite`という新しいカラーを追加するには、次の変数を定義します:
+新しいカラーを追加するには、最初にルートのカラーのすべてのバリエーションの CSS 変数を定義します。たとえば、`favorite`という新しいカラーを追加するには、次の変数を定義します:
 
 ```css
 :root {
@@ -79,7 +79,7 @@ CSS変数についてもっと詳しく知りたい時は [CSS Variables documen
 }
 ```
 
-次に、これらのCSS変数を使用する新しいクラスを作成します。クラスは、`.ion-color-{COLOR}` の形式で記述する**必要があります**。 `{COLOR}` は追加するカラーの名前です:
+次に、これらの CSS 変数を使用する新しいクラスを作成します。クラスは、`.ion-color-{COLOR}` の形式で記述する**必要があります**。 `{COLOR}` は追加するカラーの名前です:
 
 ```css
 .ion-color-favorite {
@@ -92,13 +92,13 @@ CSS変数についてもっと詳しく知りたい時は [CSS Variables documen
 }
 ```
 
-クラスを追加すると、colorプロパティーをサポートする任意のIonicコンポーネントでカラーを使用できるようになります。Ionicボタンに`favorite`の色を使用する例を以下に示します。
+クラスを追加すると、color プロパティーをサポートする任意の Ionic コンポーネントでカラーを使用できるようになります。Ionic ボタンに`favorite`の色を使用する例を以下に示します。
 
 ```html
 <ion-button color="favorite">Favorite</ion-button>
 ```
 
-ルートで定義されたCSS変数は、CSSを使用して任意のエレメントのスタイル設定にも使用できます:
+ルートで定義された CSS 変数は、CSS を使用して任意のエレメントのスタイル設定にも使用できます:
 
 ```css
 div {
@@ -107,10 +107,10 @@ div {
 }
 ```
 
-CSS変数の設定方法と使い方についての詳しい情報は [CSS Variables documentation](css-variables.md) をご覧ください。
+CSS 変数の設定方法と使い方についての詳しい情報は [CSS Variables documentation](css-variables.md) をご覧ください。
 
 ## New Color Creator
 
-名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色をIonicプロジェクトで利用できます。
+名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色を Ionic プロジェクトで利用できます。
 
 <NewColorGenerator />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
index e5aa23f873d..0da15d50804 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
@@ -12,17 +12,17 @@ title: CSS Shadow Parts
 
 CSS Shadow Parts は、開発者がシャドウツリー内の要素に CSS プロパティをスタイル設定することを可能にします。これは、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>コンポーネントをカスタマイズする際に非常に便利です。
 
-## なぜShadow Parts?
+## なぜ Shadow Parts?
 
-Ionic Frameworkは、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>の分散型セットです。Web Componentsは、スタイルとマークアップをカプセル化するために<a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOMの仕様</a>に従っています。
+Ionic Framework は、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>の分散型セットです。Web Components は、スタイルとマークアップをカプセル化するために<a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOM の仕様</a>に従っています。
 
 :::note
-Ionic Frameworkのコンポーネントは、すべてのShadow DOMコンポーネント**ではありません**。Shadow DOM コンポーネントの場合、その [component documentation](../components.md) の右上にバッジが表示されます。Shadow DOM コンポーネントの例としては、[button component](../api/button.md) があります。
+Ionic Framework のコンポーネントは、すべての Shadow DOM コンポーネント**ではありません**。Shadow DOM コンポーネントの場合、その [component documentation](../components.md) の右上にバッジが表示されます。Shadow DOM コンポーネントの例としては、[button component](../api/button.md) があります。
 :::
 
 Shadow DOM は、スタイルがコンポーネントから漏れて、意図せずに他の要素に適用されるのを防ぐのに便利です。例えば、`ion-button` コンポーネントに `.button` クラスを割り当てています。Shadow DOM によるカプセル化がなければ、ユーザーが自分の要素に `.button` クラスを設定した場合、Ionic Framework のボタンスタイルを継承してしまうでしょう。ion-button` は Shadow コンポーネントであるため、これは問題ではありません。
 
-しかし、このカプセル化のために、スタイルはShadowコンポーネントの内部要素に侵入することができません。つまり、Shadow コンポーネントがそのシャドウツリーの内部にある要素をレンダリングする場合、その内部要素を CSS で直接ターゲットにすることはできません。例として `ion-select` コンポーネントを使用すると、次のようなマークアップがレンダリングされます。
+しかし、このカプセル化のために、スタイルは Shadow コンポーネントの内部要素に侵入することができません。つまり、Shadow コンポーネントがそのシャドウツリーの内部にある要素をレンダリングする場合、その内部要素を CSS で直接ターゲットにすることはできません。例として `ion-select` コンポーネントを使用すると、次のようなマークアップがレンダリングされます。
 
 ```html
 <ion-select>
@@ -32,7 +32,7 @@ Shadow DOM は、スタイルがコンポーネントから漏れて、意図せ
 </ion-select>
 ```
 
-プレースホルダーのテキストとアイコン要素は `#shadow-root` の内部にあるため、以下のCSSはプレースホルダーのスタイル付けに **無効** です。
+プレースホルダーのテキストとアイコン要素は `#shadow-root` の内部にあるため、以下の CSS はプレースホルダーのスタイル付けに **無効** です。
 
 ```css
 /* Does NOT work */
@@ -43,13 +43,13 @@ ion-select .select-placeholder {
 
 So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
 
-## Shadow Partsの説明
+## Shadow Parts の説明
 
-Shadow Partsは、開発者がシャドウツリーの外側から、シャドウツリー内のスタイルを設定することを可能にします。これを行うには、[part](#exposing-a-part) を公開し 、[::part](#how-part-works) を使用してスタイルを設定する必要があります。
+Shadow Parts は、開発者がシャドウツリーの外側から、シャドウツリー内のスタイルを設定することを可能にします。これを行うには、[part](#exposing-a-part) を公開し 、[::part](#how-part-works) を使用してスタイルを設定する必要があります。
 
-### Partsの公開
+### Parts の公開
 
-シャドウ DOM コンポーネントを作成する際、シャドウツリー内の要素に `part` 属性を割り当てることで、パートを追加することができます。これはIonic Frameworkでコンポーネントに追加され、エンドユーザーからのアクションは必要ありません。
+シャドウ DOM コンポーネントを作成する際、シャドウツリー内の要素に `part` 属性を割り当てることで、パートを追加することができます。これは Ionic Framework でコンポーネントに追加され、エンドユーザーからのアクションは必要ありません。
 
 引き続き、例として `ion-select` コンポーネントを使用し、マークアップは以下のように更新されます。
 
@@ -61,15 +61,17 @@ Shadow Partsは、開発者がシャドウツリーの外側から、シャド
 </ion-select>
 ```
 
-上記では、`placeholder`と`icon`という2つのPartsを表示しています。すべてのPartsについては、[select documentation](../api/select.md#css-shadow-parts) を参照してください。
+上記では、`placeholder`と`icon`という 2 つの Parts を表示しています。すべての Parts については、[select documentation](../api/select.md#css-shadow-parts) を参照してください。
 
-これらのPartsが公開されたことで、要素は [::part](#how-part-works) を使って直接スタイルを設定することができるようになりました。
+これらの Parts が公開されたことで、要素は [::part](#how-part-works) を使って直接スタイルを設定することができるようになりました。
 
 ### How ::part works
 
-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">`::part()`</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">
+  `::part()`
+</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
 
-`ion-select` は、値が選択されていないときにテキストをスタイル付けするための `placeholder` Partを公開していることが分かっているので、次のようにカスタマイズすることができます。
+`ion-select` は、値が選択されていないときにテキストをスタイル付けするための `placeholder` Part を公開していることが分かっているので、次のようにカスタマイズすることができます。
 
 ```css
 ion-select::part(placeholder) {
@@ -78,9 +80,9 @@ ion-select::part(placeholder) {
 }
 ```
 
-`part` を使ったスタイリングでは、その要素で受け付けられる任意のCSSプロパティを変更することができます。
+`part` を使ったスタイリングでは、その要素で受け付けられる任意の CSS プロパティを変更することができます。
 
-partをターゲットにできることに加え、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer">擬似要素</a>を明示的に露出させずにスタイル付けすることができます。
+part をターゲットにできることに加え、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer">擬似要素</a>を明示的に露出させずにスタイル付けすることができます。
 
 ```css
 ion-select::part(placeholder)::first-letter {
@@ -89,7 +91,7 @@ ion-select::part(placeholder)::first-letter {
 }
 ```
 
-Partsは、ほとんどの<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">擬似クラス</a>でも動作します。
+Parts は、ほとんどの<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">擬似クラス</a>でも動作します。
 
 ```css
 ion-item::part(native):hover {
@@ -101,25 +103,25 @@ ion-item::part(native):hover {
 [ベンダープレフィックス擬似要素](#vendor-prefixed-pseudo-elements) と [構造擬似クラス](#structural-pseudo-classes) には、いくつかの既知の制限があります。
 :::
 
-## Ionic FrameworkのParts
+## Ionic Framework の Parts
 
-Ionic Frameworkコンポーネントのすべての公開Partsは、そのAPIページの「CSS Shadow Parts」の見出しで確認できます。すべてのコンポーネントとそのAPIページを表示するには、[Component documentation](../components.md) を参照してください。
+Ionic Framework コンポーネントのすべての公開 Parts は、その API ページの「CSS Shadow Parts」の見出しで確認できます。すべてのコンポーネントとその API ページを表示するには、[Component documentation](../components.md) を参照してください。
 
-コンポーネントがPartsを持つためには、以下の条件を満たしている必要があります。
+コンポーネントが Parts を持つためには、以下の条件を満たしている必要があります。
 
 - [Shadow DOM](../reference/glossary.md#shadow) コンポーネントであること。 [Scoped](../reference/glossary.md#scoped) または Light DOM コンポーネントの場合、子要素を直接対象とすることができる。コンポーネントが Scoped または Shadow の場合、[コンポーネントのドキュメントページ](../components.md) にその名前で表示されます。
-- これは子要素を含んでいます。例えば、`ion-card-header` はShadowコンポーネントですが、すべてのスタイルはホストエレメントに適用されます。子要素を持たないので、Partsは必要ありません。
+- これは子要素を含んでいます。例えば、`ion-card-header` は Shadow コンポーネントですが、すべてのスタイルはホストエレメントに適用されます。子要素を持たないので、Parts は必要ありません。
 - 子要素は構造的なものではありません。`ion-title` を含む特定のコンポーネントでは、子要素は内部要素を配置するために使用される構造的な要素です。構造的な要素をカスタマイズすることは、予期しない結果をもたらす可能性があるため、お勧めしません。
 
 :::note
-追加partsの推奨を歓迎します。partsをリクエストする際は、<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> にできるだけ多くの情報を添えて作成してください。
+追加 parts の推奨を歓迎します。parts をリクエストする際は、<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> にできるだけ多くの情報を添えて作成してください。
 :::
 
 ## 既知の制限
 
 ### ブラウザサポート
 
-CSS Shadow Partsは最近のすべてのメジャーブラウザでサポートされています。ただし、一部の古いバージョンではshadow partsがサポートされていません。アプリにpartsを実装する前に、<a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">ブラウザのサポート</a>が要件を満たしていることを確認してください。旧バージョンのブラウザのサポートが必要な場合は、引き続き [CSS Variables](../theming/css-variables.md) を使用してスタイリングすることをお勧めします。
+CSS Shadow Parts は最近のすべてのメジャーブラウザでサポートされています。ただし、一部の古いバージョンでは shadow parts がサポートされていません。アプリに parts を実装する前に、<a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">ブラウザのサポート</a>が要件を満たしていることを確認してください。旧バージョンのブラウザのサポートが必要な場合は、引き続き [CSS Variables](../theming/css-variables.md) を使用してスタイリングすることをお勧めします。
 
 ### ベンダープレフィックス擬似要素
 
@@ -134,11 +136,11 @@ my-component::part(scroll)::-webkit-scrollbar {
 }
 ```
 
-詳しくは <a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer">GitHubのIssue</a> をご覧ください。
+詳しくは <a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer">GitHub の Issue</a> をご覧ください。
 
 ### 構造的な擬似クラス
 
-ほとんどの擬似クラスはPartsでサポートされていますが、<a href="https://www.w3.org/TR/selectors-4/#structural-pseudos" target="_blank" rel="noopener noreferrer">構造的な擬似クラス</a>はサポートされていません。動作しない構造的擬似クラスの例を以下に示します。
+ほとんどの擬似クラスは Parts でサポートされていますが、<a href="https://www.w3.org/TR/selectors-4/#structural-pseudos" target="_blank" rel="noopener noreferrer">構造的な擬似クラス</a>はサポートされていません。動作しない構造的擬似クラスの例を以下に示します。
 
 ```css
 /* Does NOT work */
@@ -152,10 +154,10 @@ my-component::part(container):last-child {
 }
 ```
 
-### Partsの連結
+### Parts の連結
 
 擬似要素 `::part()` は追加の `::part()` にマッチすることができません。
 
 例えば、`my-component::part(button)::part(label)`は何もマッチしません。これは、そうすることで意図した以上の構造的な情報を露出してしまうからです。
 
-もし `<my-component>` の内部ボタンが `part="label => button-label"` のようなものを使って、ボタンの内部Partsをパネル自身のpart要素マップに転送していた場合、 `my-component::part(button-label)` といったセレクタはボタンのラベルだけを選び、他のラベルを無視することになるでしょう。
+もし `<my-component>` の内部ボタンが `part="label => button-label"` のようなものを使って、ボタンの内部 Parts をパネル自身の part 要素マップに転送していた場合、 `my-component::part(button-label)` といったセレクタはボタンのラベルだけを選び、他のラベルを無視することになるでしょう。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
index 8f8ecf06fba..7e61f67348d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
@@ -10,15 +10,15 @@ title: CSS変数
   />
 </head>
 
-Ionicのコンポーネントは、アプリケーションを簡単にカスタマイズできるように<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS変数</a>を使用して構築されています。CSS変数を使用すると、1か所に保存している値を、他の複数の場所から参照できます。また、実行時に動的にCSSを変更することを可能にします（以前はCSSプリプロセッサが必要でした）。CSS変数を使用すると、ブランディングやテーマに合わせてIonicコンポーネントをオーバーライドすることが、これまでになく簡単になります。
+Ionic のコンポーネントは、アプリケーションを簡単にカスタマイズできるように<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS 変数</a>を使用して構築されています。CSS 変数を使用すると、1 か所に保存している値を、他の複数の場所から参照できます。また、実行時に動的に CSS を変更することを可能にします（以前は CSS プリプロセッサが必要でした）。CSS 変数を使用すると、ブランディングやテーマに合わせて Ionic コンポーネントをオーバーライドすることが、これまでになく簡単になります。
 
 ## 変数の設定
 
 ### グローバル変数
 
-CSS変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionicが提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
+CSS 変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionic が提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
 
-Ionic CLIを使用してAngularプロジェクトを開始すると Ionicのデフォルト変数を上書きすることができる `src/theme/variables.scss` が作成されます。
+Ionic CLI を使用して Angular プロジェクトを開始すると Ionic のデフォルト変数を上書きすることができる `src/theme/variables.scss` が作成されます。
 
 ```css
 /* Set variables for all modes */
@@ -43,7 +43,7 @@ Ionic CLIを使用してAngularプロジェクトを開始すると Ionicのデ
 
 ### コンポーネント変数
 
-特定のコンポーネントにCSS変数を設定するには、そのセレクタの内側に変数を追加します。Ionicが提供するコンポーネントレベルの変数の詳細については、[Ionic Variables](#ionic-variables) を参照ください。
+特定のコンポーネントに CSS 変数を設定するには、そのセレクタの内側に変数を追加します。Ionic が提供するコンポーネントレベルの変数の詳細については、[Ionic Variables](#ionic-variables) を参照ください。
 
 ```css
 /* Set the color on all ion-button elements */
@@ -57,9 +57,9 @@ ion-button {
 }
 ```
 
-### JavaScriptで変数を設定
+### JavaScript で変数を設定
 
-CSS 変数は[setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) を使ってJavaScriptで変更することもできます:
+CSS 変数は[setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) を使って JavaScript で変更することもできます:
 
 ```js
 const el = document.querySelector('.fancy-button');
@@ -68,9 +68,9 @@ el.style.setProperty('--background', '#36454f');
 
 ## 変数を利用する
 
-### CSSでの使い方
+### CSS での使い方
 
-[CSSの var() 関数](https://developer.mozilla.org/en-US/docs/Web/CSS/var) を使うと、失敗した時の設定とともにCSS変数を取得することができます。 例えば、以下の例では `--background` プロパティに `--charcoal` 変数を利用しますが、もし値を取得できなければ代わりに `#36454f` が適用されます。
+[CSS の var() 関数](https://developer.mozilla.org/en-US/docs/Web/CSS/var) を使うと、失敗した時の設定とともに CSS 変数を取得することができます。 例えば、以下の例では `--background` プロパティに `--charcoal` 変数を利用しますが、もし値を取得できなければ代わりに `#36454f` が適用されます。
 
 ```css
 .fancy-button {
@@ -78,21 +78,21 @@ el.style.setProperty('--background', '#36454f');
 }
 ```
 
-### JavaScriptでの使い方
+### JavaScript での使い方
 
-CSS変数の値は、[getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue) を使用してJavaScriptで読み取ることができます:
+CSS 変数の値は、[getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue) を使用して JavaScript で読み取ることができます:
 
 ```js
 const el = document.querySelector('.fancy-button');
 const color = el.style.getPropertyValue('--charcoal');
 ```
 
-## Ionic変数
+## Ionic 変数
 
-### Component変数
+### Component 変数
 
-Ionicは、`--background` や `--color` のようなコンポーネントレベルの変数を提供します。コンポーネントが受け入れるカスタムプロパティについては、 [API reference](../api.md) の `CSS Custom Properties` セクションをご覧ください。たとえば、[Button Custom Properties](../api/button.md#css-custom-properties) をご覧ください。
+Ionic は、`--background` や `--color` のようなコンポーネントレベルの変数を提供します。コンポーネントが受け入れるカスタムプロパティについては、 [API reference](../api.md) の `CSS Custom Properties` セクションをご覧ください。たとえば、[Button Custom Properties](../api/button.md#css-custom-properties) をご覧ください。
 
 ### グローバル変数
 
-アプリケーション全体のテーマを簡単に変更できるようにIonicが提供するグローバル変数がいくつかあります。すべてのグローバル変数のリストは [Colors](colors.md), [Themes](/docs/theming/themes) and [Advanced Theming](advanced.md) をご覧ください。
+アプリケーション全体のテーマを簡単に変更できるように Ionic が提供するグローバル変数がいくつかあります。すべてのグローバル変数のリストは [Colors](colors.md), [Themes](/docs/theming/themes) and [Advanced Theming](advanced.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
index 096a41a9f98..a4977edddd7 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
@@ -14,11 +14,11 @@ import Codepen from '@components/global/Codepen';
   />
 </head>
 
-Ionicを使えば、ダークカラーのスキームのサポートなど、アプリのテーマを簡単に変更できます。ネイティブアプリでのダークモードのサポートが拡大していることから、開発者はユーザーの好みをサポートするためにアプリにダークモードを追加する流れがあります。
+Ionic を使えば、ダークカラーのスキームのサポートなど、アプリのテーマを簡単に変更できます。ネイティブアプリでのダークモードのサポートが拡大していることから、開発者はユーザーの好みをサポートするためにアプリにダークモードを追加する流れがあります。
 
 ## Media Query の利用
 
-ダークモードを有効にするためにはまず、 [ユーザの設定してるカラースキーマを利用するmedia query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) を使用します。このメディアクエリは、ユーザーのデバイスのシステム設定に接続され、ダークモードが有効になっている場合はテーマを適用します。
+ダークモードを有効にするためにはまず、 [ユーザの設定してるカラースキーマを利用する media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) を使用します。このメディアクエリは、ユーザーのデバイスのシステム設定に接続され、ダークモードが有効になっている場合はテーマを適用します。
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -32,7 +32,7 @@ Ionicを使えば、ダークカラーのスキームのサポートなど、ア
 
 ## CSS Class Fallback
 
-メディアクエリをサポートしていないデバイスの代替メソッドとして、CSSセレクタをスタイル設定し、クラスをドキュメントのbodyに適用することで、ダークモードを適用できます。
+メディアクエリをサポートしていないデバイスの代替メソッドとして、CSS セレクタをスタイル設定し、クラスをドキュメントの body に適用することで、ダークモードを適用できます。
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -49,11 +49,11 @@ body.dark {
 
 `body.dark` セレクタをターゲットとする変数を使用する場合は、アプリケーション内の `<body>` にクラスを追加するだけです。これはアプリケーションが構築されているフレームワークによってさまざまな方法で行うことができます。
 
-この例では、変数は両方の場所にある必要があります。2つの場所に変数を設定しないようにするために、[JavaScriptを使用](#combining-with-javascript) することができます。
+この例では、変数は両方の場所にある必要があります。2 つの場所に変数を設定しないようにするために、[JavaScript を使用](#combining-with-javascript) することができます。
 
-## JavaScriptとの統合
+## JavaScript との統合
 
-CSS変数を一度だけ記述して、複数の場所で更新する必要がないようにするために、フォールバックとクラスをJavaScriptを使用して `prefers-color-scheme`  メディアクエリーの値をチェックし、プリファレンスが `dark` の場合は `dark` クラスを追加することで統合できます。CSSは次のようなものになるでしょう:
+CSS 変数を一度だけ記述して、複数の場所で更新する必要がないようにするために、フォールバックとクラスを JavaScript を使用して `prefers-color-scheme` メディアクエリーの値をチェックし、プリファレンスが `dark` の場合は `dark` クラスを追加することで統合できます。CSS は次のようなものになるでしょう:
 
 ```css
 body.dark {
@@ -65,7 +65,7 @@ body.dark {
 
 ### 自動的にダークモードを有効にする
 
-JavaScriptでは、ドキュメントが [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) を使用してメディアクエリと一致するかどうかをチェックすることによって、 `dark` クラスを `<body>` に追加できます。これにより、ユーザの設定に基づいてダークモードが動作するようになります。
+JavaScript では、ドキュメントが [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) を使用してメディアクエリと一致するかどうかをチェックすることによって、 `dark` クラスを `<body>` に追加できます。これにより、ユーザの設定に基づいてダークモードが動作するようになります。
 
 ```javascript
 // Use matchMedia to check the user preference
@@ -123,17 +123,17 @@ function checkToggle(shouldCheck) {
 
 <Codepen preview="false" user="ionic" slug="zYOpQLj" height="600px" default-tab="js,result" />
 
-## システムUIコンポーネントを調整する
+## システム UI コンポーネントを調整する
 
-ダークテーマを開発するときに、特定のシステムUIコンポーネントがダークモードに正しく調整されていないことがあります。これを修正するには、 `color-scheme` を指定する必要があります。クロスブラウザのサポートの詳細については、 <a href="https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme" target="_blank">ブラウザのカラースキーマの設定</a> を参照してください。
+ダークテーマを開発するときに、特定のシステム UI コンポーネントがダークモードに正しく調整されていないことがあります。これを修正するには、 `color-scheme` を指定する必要があります。クロスブラウザのサポートの詳細については、 <a href="https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme" target="_blank">ブラウザのカラースキーマの設定</a> を参照してください。
 
-ネイティブコンポーネントだけではなく、主にIonicコンポーネントを使用している場合に、 `color-scheme` はスクロールバーなどのアプリケーションの側面にも影響します。 `color-scheme` を使用するには、次のHTMLをアプリケーションの`head`に追加する必要があります:
+ネイティブコンポーネントだけではなく、主に Ionic コンポーネントを使用している場合に、 `color-scheme` はスクロールバーなどのアプリケーションの側面にも影響します。 `color-scheme` を使用するには、次の HTML をアプリケーションの`head`に追加する必要があります:
 
 ```html
 <meta name="color-scheme" content="light dark" />
 ```
 
-これにより、ページは、どのカラースキームでレンダリングするのが快適かを示すことができます。また、次のCSSを追加して、要素ごとに設定することもできます。
+これにより、ページは、どのカラースキームでレンダリングするのが快適かを示すことができます。また、次の CSS を追加して、要素ごとに設定することもできます。
 
 ```css
 color-scheme: light dark;
@@ -153,15 +153,15 @@ color-scheme: light dark;
 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ダークモード
+## Ionic ダークモード
 
-Ionicには、アプリを実行しているデバイスに基づいてダークモードを取得するために使用する変数の推奨テーマがあります。次の部分に分けることができます:
+Ionic には、アプリを実行しているデバイスに基づいてダークモードを取得するために使用する変数の推奨テーマがあります。次の部分に分けることができます:
 
 1. すべてのデフォルトの [modes](platform-styles.md#ionic-modes) のデフォルトの [Ionic colors](colors.md) を変更して `body.dark` セレクタのダークモードの背景色に対応します。
 1. `ios` デバイスでダークテーマの変数を設定します。
 1. `md` デバイスでダークテーマの変数を設定します。
 
-次のコードをコピーしてアプリに貼り付けると、Ionicのダークテーマを取得できます。 [JavaScriptとの統合](#combining-with-javascript) セクションで説明したように、JavaScriptを使用して `dark` クラスをドキュメント bodyに追加します。 `dark` クラスがドキュメント本文に追加されるまで、ダークモードは有効になりません。
+次のコードをコピーしてアプリに貼り付けると、Ionic のダークテーマを取得できます。 [JavaScript との統合](#combining-with-javascript) セクションで説明したように、JavaScript を使用して `dark` クラスをドキュメント body に追加します。 `dark` クラスがドキュメント本文に追加されるまで、ダークモードは有効になりません。
 
 :::note
 さらにカスタマイズするために追加できるその他の変数など、変更する変数の詳細については [Themes](themes.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
index a439634b82e..2f3be9a87de 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
@@ -10,29 +10,29 @@ title: プラットフォームの外観
   />
 </head>
 
-Ionicは、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。
+Ionic は、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。
 
 ## Ionic Modes
 
-Ionicは **modes** を使ってコンポーネントの外観をカスタマイズします。それぞれの **プラットフォーム** はデフォルトの **mode** を持っていますが、これはグローバルの [config](../developing/config.md) で上書き設定をすることができます。次の表は、それぞれの **プラットフォーム** に追加されているデフォルトの **mode** を示しています。
+Ionic は **modes** を使ってコンポーネントの外観をカスタマイズします。それぞれの **プラットフォーム** はデフォルトの **mode** を持っていますが、これはグローバルの [config](../developing/config.md) で上書き設定をすることができます。次の表は、それぞれの **プラットフォーム** に追加されているデフォルトの **mode** を示しています。
 
-| プラットフォーム  | Mode  | 概要                                                                                                                          |
-| --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `ios`     | `ios` | iPhone, iPad, もしくは iPod で表示する時は [iOS styles](https://www.apple.com/ios) が適用されます。                                   |
-| `android` | `md`  | Androidのデバイスから表示する時は [Material Design styles](https://material.io/guidelines/) が適用されます。.                             |
-| `core`    | `md`  | 上記のどのプラットフォームにも当てはまらないプラットフォームでは、 [Material Design styles](https://material.io/guidelines/) が適用されます。  |
+| プラットフォーム | Mode  | 概要                                                                                                                                          |
+| ---------------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ios`            | `ios` | iPhone, iPad, もしくは iPod で表示する時は [iOS styles](https://www.apple.com/ios) が適用されます。                                           |
+| `android`        | `md`  | Android のデバイスから表示する時は [Material Design styles](https://material.io/guidelines/) が適用されます。.                                |
+| `core`           | `md`  | 上記のどのプラットフォームにも当てはまらないプラットフォームでは、 [Material Design styles](https://material.io/guidelines/) が適用されます。 |
 
-例えば、Androidプラットフォームが利用されている時は `md` (Material Design) が標準で利用されます。 `<html>` エレメントに `class="md"` が追加され、すべてのコンポーネントには Material Design styles が適用されます。:
+例えば、Android プラットフォームが利用されている時は `md` (Material Design) が標準で利用されます。 `<html>` エレメントに `class="md"` が追加され、すべてのコンポーネントには Material Design styles が適用されます。:
 
 ```html
 <html class="md"></html>
 ```
 
-_Note: **platform** と **mode** は別物です。platformはアプリの [config](../developing/config.md) で任意の mode を設定することができます。_
+_Note: **platform** と **mode** は別物です。platform はアプリの [config](../developing/config.md) で任意の mode を設定することができます。_
 
-## Mode Stylesの上書き
+## Mode Styles の上書き
 
-それぞれのIonicのコンポーネントは、mode に基づいた外観を設定します。 `html` エレメントは、 現在のmodeに基づいて、 `class` と `mode` の両方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、`ios` modeの時のみ `ion-badge` のテキストに `uppercase` を適用する場合、こうなります:
+それぞれの Ionic のコンポーネントは、mode に基づいた外観を設定します。 `html` エレメントは、 現在の mode に基づいて、 `class` と `mode` の両方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、`ios` mode の時のみ `ion-badge` のテキストに `uppercase` を適用する場合、こうなります:
 
 ```css
 .ios ion-badge {
@@ -40,7 +40,7 @@ _Note: **platform** と **mode** は別物です。platformはアプリの [conf
 }
 ```
 
-スタイルを上書きするために使用できる多くのグローバルCSS変数もあります。`ios` アプリの背景色をスタイルするには、次のように設定します:
+スタイルを上書きするために使用できる多くのグローバル CSS 変数もあります。`ios` アプリの背景色をスタイルするには、次のように設定します:
 
 ```css
 .ios {
@@ -48,4 +48,4 @@ _Note: **platform** と **mode** は別物です。platformはアプリの [conf
 }
 ```
 
-上書きするすべてのグローバルCSS変数のリストについては、[Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md) をご覧ください。
+上書きするすべてのグローバル CSS 変数のリストについては、[Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
index b47272b91bd..80d43109809 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
@@ -13,13 +13,13 @@ import SteppedColorGenerator from '@components/page/theming/SteppedColorGenerato
   />
 </head>
 
-Ionicは、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: [Application Colors](#application-colors), [Stepped Colors](#stepped-colors)
+Ionic は、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: [Application Colors](#application-colors), [Stepped Colors](#stepped-colors)
 
 ### アプリケーションの配色
 
-アプリケーションの配色は、Ionicの複数の場所で使用されています。ダークテーマや、ブランディングにあったテーマを簡単に作成することができます。
+アプリケーションの配色は、Ionic の複数の場所で使用されています。ダークテーマや、ブランディングにあったテーマを簡単に作成することができます。
 
-背景とテキストの色変数は、RGBである必要があります: <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. なぜ `rgb` プロパティも必要であるかは [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。
+背景とテキストの色変数は、RGB である必要があります: <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. なぜ `rgb` プロパティも必要であるかは [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。
 
 | Name                                       | Description                                          |
 | ------------------------------------------ | ---------------------------------------------------- |
@@ -52,13 +52,13 @@ Ionicは、アプリケーション全体のデフォルトテーマを変更す
 
 ### ステップカラー
 
-Ionicテーマをカスタマイズするためのさまざまな方法を検討した結果、1つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。
+Ionic テーマをカスタマイズするためのさまざまな方法を検討した結果、1 つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。
 
-背景色 (`--ion-background-color`) と テキストカラー (`--ion-text-color`) の変数を更新すると、ほとんどのアプリコンポーネントの外観が変わりますが、見逃したり壊れたりする可能性のある特定のIonicコンポーネントがあります。ダークテーマを適用するとき、これはより明白になります。
+背景色 (`--ion-background-color`) と テキストカラー (`--ion-text-color`) の変数を更新すると、ほとんどのアプリコンポーネントの外観が変わりますが、見逃したり壊れたりする可能性のある特定の Ionic コンポーネントがあります。ダークテーマを適用するとき、これはより明白になります。
 
 一部のコンポーネントでは、背景よりも暗い、またはテキストよりも明るい色合いを使用しています。たとえば、item の見出しテキストは、私たちのデフォルトのテキストカラーよりも数段階明るい色である <CodeColor color="#404040">#404040</CodeColor> になります。一方、ローディングコンポーネントの背景は白よりも濃い色 <CodeColor color="#f2f2f2">#f2f2f2</CodeColor> になります。私達はこれらのわずかな変化を定義するために、ステップカラーを利用します。アプリケーションの背景色やテキストの色を更新するときは、ステップカラーを更新することが重要です。
 
-デフォルトでは、Ionicのステップカラーはデフォルトの背景色の値 <CodeColor color="#ffffff">#ffffff</CodeColor> で始まります。 そしてテキストカラー値 <CodeColor color="#000000">#000000</CodeColor> を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。
+デフォルトでは、Ionic のステップカラーはデフォルトの背景色の値 <CodeColor color="#ffffff">#ffffff</CodeColor> で始まります。 そしてテキストカラー値 <CodeColor color="#000000">#000000</CodeColor> を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。
 
 ## Stepped Color Generator
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
index 7045a69b19f..8a856e02438 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
@@ -24,7 +24,7 @@ title: Build Errors
 class MyDirective {
   // 誤り、@Optional() とすべき
   // @Optional はここでは何もしないため、MyDirective は parent が undefined の場合にエラーになる
-  constructor( @Optional parent: ParentComponent) { }
+  constructor(@Optional parent: ParentComponent) {}
 }
 ```
 
@@ -36,7 +36,7 @@ class MyDirective {
 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.
 ```
 
-この例外は Angular が `YourClass` のコンストラクタの 1つ以上のパラメータについて困惑していることを意味します。[依存性を注入](https://angular.jp/docs/ts/latest/guide/dependency-injection.html) するため、Angular は 注入するパラメータの型を知る必要があります。パラメータのクラスを指定することで Angular にこのこと（タイプ）を知らせます。次の点を確認してください:
+この例外は Angular が `YourClass` のコンストラクタの 1 つ以上のパラメータについて困惑していることを意味します。[依存性を注入](https://angular.jp/docs/ts/latest/guide/dependency-injection.html) するため、Angular は 注入するパラメータの型を知る必要があります。パラメータのクラスを指定することで Angular にこのこと（タイプ）を知らせます。次の点を確認してください:
 
 - パラメータのクラスをインポートします。
 - パラメータに適切な注釈をつけるか、パラメータの型を指定します。
@@ -49,13 +49,12 @@ import { MyService } from 'my-service'; // 私をインポートすることを
 })
 export class MyClass {
   // service は MyService のタイプです
-  constructor(service: MyService) {
-
-  }
+  constructor(service: MyService) {}
 }
 ```
 
-コード内の循環参照がこのエラーの原因になることがあります。循環参照は、2つのオブジェクトが相互に依存していることを意味するため、両方を相互の前に宣言する方法はありません。この問題を回避するには、Angular に組み込まれている[`forwardRef`](https://angular.jp/docs/ts/latest/api/core/index/forwardRef-function.html) 関数を使用します。
+コード内の循環参照がこのエラーの原因になることがあります。循環参照は、2 つのオブジェクトが相互に依存していることを意味するため、両方を相互の前に宣言する方法はありません。この問題を回避するには、Angular に組み込まれている[`forwardRef`](https://angular.jp/docs/ts/latest/api/core/index/forwardRef-function.html) 関数を使用します。
+
 ```ts
 import { forwardRef } from '@angular/core';
 
@@ -99,7 +98,7 @@ import { MyService } from 'my-service';
 class MyApp {}
 ```
 
-パラメータが別のコンポーネントまたはDirective（たとえば、親コンポーネント）である場合、パラメータを providers のリストに追加するとエラーはなくなりますが、これは前述の [provider の複数のインスタンス](/docs/faq/runtime#provider-) と同じ効果を持ちます。ここでは、コンポーネントクラスの新しいインスタンスを作成しますが、必要なコンポーネントインスタンスへの参照は取得しません。かわりに、注入されるであろうDirectiveまたはコンポーネントがコンポーネントで使用可能であることを確認します（たとえば、親であることを期待している場合は、実際に親であること）。これはおそらく、例を使用すると最も簡単に理解できます:
+パラメータが別のコンポーネントまたは Directive（たとえば、親コンポーネント）である場合、パラメータを providers のリストに追加するとエラーはなくなりますが、これは前述の [provider の複数のインスタンス](/docs/faq/runtime#provider-) と同じ効果を持ちます。ここでは、コンポーネントクラスの新しいインスタンスを作成しますが、必要なコンポーネントインスタンスへの参照は取得しません。かわりに、注入されるであろう Directive またはコンポーネントがコンポーネントで使用可能であることを確認します（たとえば、親であることを期待している場合は、実際に親であること）。これはおそらく、例を使用すると最も簡単に理解できます:
 
 ```tsx
 @Component({
@@ -154,7 +153,7 @@ MyComp の注入なし            +------+------+
                            +-------------+
 ```
 
-前の例を拡張するために、コンポーネント/Directiveの参照を常に期待しているわけではない場合には、Angular の `@Option` アノテーションを使うことができます:
+前の例を拡張するために、コンポーネント/Directive の参照を常に期待しているわけではない場合には、Angular の `@Option` アノテーションを使うことができます:
 
 ```tsx
 @Directive({
@@ -176,7 +175,7 @@ class MyDir {
 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
 ```
 
-これは、そのプロパティを持たない要素にプロパティをバインドしようとしたときに発生します。要素がコンポーネントの場合、または要素に1つ以上のDirectiveがある場合、コンポーネントもDirectiveもそのプロパティを持ちません。
+これは、そのプロパティを持たない要素にプロパティをバインドしようとしたときに発生します。要素がコンポーネントの場合、または要素に 1 つ以上の Directive がある場合、コンポーネントも Directive もそのプロパティを持ちません。
 
 ```html
 <!-- div には 'foo' というプロパティがない -->
@@ -189,7 +188,7 @@ Can't bind to 'propertyName' since it isn't a known property of the 'elementName
 No provider for ControlContainer! (NgControlName -> ControlContainer)
 ```
 
-このエラーは、上記の `No provider` エラーのより具体的なバージョンです。これは、親の [NgForm](https://angular.jp/docs/ts/latest/api/forms/index/NgForm-directive.html) または NgFormModel を指定せずに NgControlName などのフォームコントロールを使用した場合に発生します。ほとんどの場合、これはフォームコントロールが実際のフォーム要素内にあることを確認することで解決できます。NgForm はセレクタとして `form` を使用するので、これは新しいNgFormをインスタンス化します:
+このエラーは、上記の `No provider` エラーのより具体的なバージョンです。これは、親の [NgForm](https://angular.jp/docs/ts/latest/api/forms/index/NgForm-directive.html) または NgFormModel を指定せずに NgControlName などのフォームコントロールを使用した場合に発生します。ほとんどの場合、これはフォームコントロールが実際のフォーム要素内にあることを確認することで解決できます。NgForm はセレクタとして `form` を使用するので、これは新しい NgForm をインスタンス化します:
 
 ```tsx
 @Component({
@@ -206,4 +205,4 @@ No provider for ControlContainer! (NgControlName -> ControlContainer)
 No component factory found for <component name>
 ```
 
-このエラーは、ngModule にインポートおよび追加されていない Component、Provider Pipe、Directiveを使用しようとしたときに発生します。新しい Component、Provider、Pipe、Directiveをアプリケーションに追加する場合は必ず、Angularがそれを使えるようにするために、`src/app/app.module.ts` ファイル内の `ngModule` に追加する必要があります。このエラーを修正するには、問題の Component、Provider、Pipe、Directiveを app.module ファイルにインポートし、Provider の場合は `providers` 配列に追加、Component、Pipe、Directiveの場合は宣言配列と `entryComponents` 配列の両方に追加します。
+このエラーは、ngModule にインポートおよび追加されていない Component、Provider Pipe、Directive を使用しようとしたときに発生します。新しい Component、Provider、Pipe、Directive をアプリケーションに追加する場合は必ず、Angular がそれを使えるようにするために、`src/app/app.module.ts` ファイル内の `ngModule` に追加する必要があります。このエラーを修正するには、問題の Component、Provider、Pipe、Directive を app.module ファイルにインポートし、Provider の場合は `providers` 配列に追加、Component、Pipe、Directive の場合は宣言配列と `entryComponents` 配列の両方に追加します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
index 2df9044eb84..63f7b3dd3ce 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
@@ -16,14 +16,15 @@ title: ネイティブエラー
 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'
 ```
 
-iOSデバイスでアプリケーションを実行するには、プロビジョニングプロファイルが必要です。プロビジョニングプロファイルが作成されていない場合は、次の手順に従います:
+iOS デバイスでアプリケーションを実行するには、プロビジョニングプロファイルが必要です。プロビジョニングプロファイルが作成されていない場合は、次の手順に従います:
 
 <<<<<<< HEAD
+
 1. <strong>[Package ID](../reference/glossary.md#package-id) を設定する。</strong>
 
-    Capacitor の場合、`capacitor.config.json` ファイルを開き `appId` プロパティを修正します。
+   Capacitor の場合、`capacitor.config.json` ファイルを開き `appId` プロパティを修正します。
 
-    Cordova の場合、`config.xml` ファイルを開き、ルート要素 `<widget>` の `id` 属性を修正します。よりくわしい情報は [Cordova ドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご参照ください。
+   Cordova の場合、`config.xml` ファイルを開き、ルート要素 `<widget>` の `id` 属性を修正します。よりくわしい情報は [Cordova ドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご参照ください。
 
 2. <strong>
      プロジェクトを <b>Xcode</b> で開く。
@@ -38,8 +39,8 @@ iOSデバイスでアプリケーションを実行するには、プロビジ
    Cordova の場合、Xcode 開きます。**File** &raquo; **Open** からアプリケーションを見つけます。アプリケーション内の `platforms/ios` ディレクトリを開きます。
 
 3. <strong>
-     <b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。
-     **Identyty** セクションで、設定された Package ID がバンドル識別子と一致することを確認します。
+     <b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。 **Identyty**
+     セクションで、設定された Package ID がバンドル識別子と一致することを確認します。
    </strong>
 
    ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
@@ -47,8 +48,7 @@ iOSデバイスでアプリケーションを実行するには、プロビジ
 4. <strong>
      同じプロジェクトエディタの <b>署名</b> セクションで、<b>Automatically manage signing</b> が
      有効になっていることを確認します。
-   </strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は
-   プロビジョニングと署名を自動的に準備しようとします。
+   </strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は プロビジョニングと署名を自動的に準備しようとします。
 
    ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
 
@@ -58,7 +58,7 @@ iOSデバイスでアプリケーションを実行するには、プロビジ
 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
 ```
 
-このエラーは Xcode のエラーコードで、プロビジョニングの問題または古いcordova依存関係が原因で発生する可能性があります。このエラーを修正するには、まず上記の手順でプロビジョニングプロファイルが生成されていることを確認したのち、[Xcode からアプリケーションを実行します](../developing/ios.md#running-with-xcode)。
+このエラーは Xcode のエラーコードで、プロビジョニングの問題または古い cordova 依存関係が原因で発生する可能性があります。このエラーを修正するには、まず上記の手順でプロビジョニングプロファイルが生成されていることを確認したのち、[Xcode からアプリケーションを実行します](../developing/ios.md#running-with-xcode)。
 
 もしそれでもエラーが解決しない場合は、次のコマンドを実行してください:
 
@@ -73,13 +73,13 @@ ionic cordova build ios --prod
 
 Once these commands have been ran a fresh build can be done.
 
-## Google Play Servicesのバージョンが衝突
+## Google Play Services のバージョンが衝突
 
 ```shell
 Error: more than one library with package name com.google.android.gms
 ```
 
-このエラーは、2つの異なるプラグインが異なるバージョンの  `Google Play Services` を使用しようとしたことが原因です。この問題を解決するには、バージョンが `7.1.0` 以上の `cordova` および バージョンが `6.3.0` 以上の `cordova-android` を実行していることを確認してください。最新の `cordova` をインストールするには次を実行してください:
+このエラーは、2 つの異なるプラグインが異なるバージョンの `Google Play Services` を使用しようとしたことが原因です。この問題を解決するには、バージョンが `7.1.0` 以上の `cordova` および バージョンが `6.3.0` 以上の `cordova-android` を実行していることを確認してください。最新の `cordova` をインストールするには次を実行してください:
 
 ```shell
 npm install cordova@latest
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
index f84aa86ea7d..da493bb6a8f 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
@@ -22,7 +22,7 @@ title: ランタイムの問題
 
 `@angular/cli@7.3` 以上のプロジェクトの場合、ポリフィルは自動的に含まれます。その前に作成されたプロジェクトでは、ポリフィルを手動で有効にする必要があります。
 
-`src/polyfills.ts` にて、Android 4.4をサポートするために ES6ポリフィルをすべて有効にする必要があります。
+`src/polyfills.ts` にて、Android 4.4 をサポートするために ES6 ポリフィルをすべて有効にする必要があります。
 
 あるいは、プロジェクトを更新して、`@angular/cli` パッケージと `@angular-devkit` パッケージの最新リリースを使用し、`angular.json` のビルドオプションオブジェクトに `es5BrowserSupport` オプションを含めることもできます:
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
index 267b4ba5f33..df38caa4e8a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
@@ -16,14 +16,14 @@ For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refe
 
 ### Angular
 
-1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンのAngularに更新します。.
-2. Ionic6の最新バージョンに更新します。
+1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンの Angular に更新します。.
+2. Ionic6 の最新バージョンに更新します。
 
 ```shell
 npm install @ionic/angular@6
 ```
 
-Ionic Angular Serverを使用している場合は、それも必ず更新してください:
+Ionic Angular Server を使用している場合は、それも必ず更新してください:
 
 ```shell
 npm install @ionic/angular@6 @ionic/angular-server@6
@@ -34,7 +34,7 @@ npm install @ionic/angular@6 @ionic/angular-server@6
 
 ### React
 
-1. Ionic 6 は React 17+ をサポートしています。Reactの最新バージョンに更新します:
+1. Ionic 6 は React 17+ をサポートしています。React の最新バージョンに更新します:
 
 ```shell
 npm install react@latest react-dom@latest
@@ -58,6 +58,7 @@ npm install @ionic/react@6 @ionic/react-router@6
 4. あなたの `App` コンポーネントで `setupIonicReact` を呼び出して下さい。もう `setupConfig` を利用している場合は、 `setupIonicReact` に置き換えてください:
 
 **Before**
+
 ```tsx title="App.tsx"
 import { setupConfig } from '@ionic/react';
 
@@ -69,6 +70,7 @@ setupConfig({
 ```
 
 **After**
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -88,36 +90,38 @@ See the [React Config Documentation](../developing/config) for more examples.
 5.すべてのコントローラのインポートを `@ionic/core` から `@ionic/core/components` に更新します。例として、`menuController` のマイグレーションを紹介します。
 
 **Before**
+
 ```tsx
 import { menuController } from '@ionic/core';
 ```
 
 **After**
+
 ```tsx
 import { menuController } from '@ionic/core/components';
 ```
 
 ### Vue
 
-1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vueの最新バージョンに更新ください。
+1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vue の最新バージョンに更新ください。
 
 ```shell
 npm install vue@3 vue-router@4
 ```
 
-2. Vue CLIを使用するアプリの場合は、Vue CLI 5をインストールします。
+2. Vue CLI を使用するアプリの場合は、Vue CLI 5 をインストールします。
 
 ```shell
 npm install -g @vue/cli@next
 ```
 
-次に、すべてのVue CLIプラグインをアップグレードします。
+次に、すべての Vue CLI プラグインをアップグレードします。
 
 ```shell
 vue upgrade --next
 ```
 
-3. Ionic 6の最新バージョンに更新します。
+3. Ionic 6 の最新バージョンに更新します。
 
 ```shell
 npm install @ionic/vue@6 @ionic/vue-router@6
@@ -152,6 +156,7 @@ module.exports = {
 8. すべてのオーバーレイイベントリスナーの名前を変更し、新しいフォーマットを使用するようにします。
 
 **Before**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -165,6 +170,7 @@ module.exports = {
 ```
 
 **After**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -184,11 +190,10 @@ module.exports = {
 9.  `ion-router-outlet` を `ion-tabs` の中にいれて利用します。
 
 **Before**
+
 ```html
 <ion-tabs>
-  <ion-tab-bar slot="bottom">
-    ...
-  </ion-tab-bar>
+  <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
 <script>
@@ -196,18 +201,17 @@ module.exports = {
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonTabs, IonTabBar }
+    components: { IonTabs, IonTabBar },
   });
 </script>
 ```
 
 **After**
+
 ```html
 <ion-tabs>
   <ion-router-outlet></ion-router-outlet>
-  <ion-tab-bar slot="bottom">
-    ...
-  </ion-tab-bar>
+  <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
 <script>
@@ -215,7 +219,7 @@ module.exports = {
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonTabs, IonTabBar, IonRouterOutlet }
+    components: { IonTabs, IonTabBar, IonRouterOutlet },
   });
 </script>
 ```
@@ -223,6 +227,7 @@ module.exports = {
 10. タブ内の追加ルートは、子ルートではなく兄弟ルートとして書き直す必要があります。
 
 **Before**
+
 ```ts
 const routes: Array<RouteRecordRaw> = [
   {
@@ -261,11 +266,12 @@ const routes: Array<RouteRecordRaw> = [
 ```
 
 **After**
+
 ```ts
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/tabs/tab1'
+    redirect: '/tabs/tab1',
   },
   {
     path: '/tabs/',
@@ -273,27 +279,27 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: '',
-        redirect: 'tab1'
+        redirect: 'tab1',
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue')
+        component: () => import('@/views/Tab1.vue'),
       },
       {
         path: 'tab1/view',
-        component: () => import('@/views/Tab1View.vue')
+        component: () => import('@/views/Tab1View.vue'),
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2.vue')
+        component: () => import('@/views/Tab2.vue'),
       },
       {
         path: 'tab3',
-        component: () => import('@/views/Tab3.vue')
-      }
-    ]
-  }
-]
+        component: () => import('@/views/Tab3.vue'),
+      },
+    ],
+  },
+];
 ```
 
 ### Core
@@ -312,7 +318,7 @@ npm install @ionic/core@6
 
 2. `text` と `placeholder` の CSS シャドウパーツの使用をすべて削除します。
 
-3. CSS変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSSプロパティのいずれかを使用することができます。
+3. CSS 変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSS プロパティのいずれかを使用することができます。
 
 4. `open` メソッドの使用はすべて削除します。datetime をオーバーレイで表示するには、 `ion-modal` または `ion-popover` コンポーネントの中に配置する。詳細は、[ion-datetime Usage Examples](../api/datetime#usage) を参照してください。
 
@@ -324,7 +330,7 @@ npm install @ionic/core@6
 
 ### Icon
 
-Ionic 6には、Ionicons 6が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
+Ionic 6 には、Ionicons 6 が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
 
 ### Input
 
@@ -335,24 +341,26 @@ Ionic 6には、Ionicons 6が同梱されるようになりました。[Ionicons
 `ion-modal` は Shadow DOM を使用するようになりました。 `ion-modal` の内部をターゲットとするスタイルは、[ion-modal CSS Variables](../api/modal#css-custom-properties) または [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) {
-  ...
+  ...;
 }
 ```
 
@@ -360,34 +368,35 @@ ion-modal::part(backdrop) {
 
 `ion-popover` は Shadow DOM を使用するようになりました。 `ion-popover` の内部をターゲットとするスタイルは、[ion-popover CSS Variables](../api/popover#css-custom-properties) または [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) {
-  ...
+  ...;
 }
 ```
 
@@ -405,7 +414,7 @@ ion-popover::part(content) {
 
 ### ブラウザサポート
 
-Ionicがサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
+Ionic がサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
 
 If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
 
@@ -417,14 +426,13 @@ Safari >=13
 iOS >=13
 ```
 
-
 ### テスト
 
-Ionic 6は、ESモジュールとして出荷されるようになりました。ESモジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jestでテストする開発者は、Jest 27の時点でJestがES Modulesを完全にサポートしていないため、Jestの設定を更新する必要があります。
+Ionic 6 は、ES モジュールとして出荷されるようになりました。ES モジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jest でテストする開発者は、Jest 27 の時点で Jest が ES Modules を完全にサポートしていないため、Jest の設定を更新する必要があります。
 
-このアップデートでは、Babelを使用してIonicのESモジュールをJestが理解できるCommonJS (CJS) 形式にコンパイルする必要があります。JestがESモジュールをサポートするようになれば、この変更は必要なくなります。JestのESモジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
+このアップデートでは、Babel を使用して Ionic の ES モジュールを Jest が理解できる CommonJS (CJS) 形式にコンパイルする必要があります。Jest が ES モジュールをサポートするようになれば、この変更は必要なくなります。Jest の ES モジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
 
-新しいIonicアプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存のIonicアプリをお持ちの方は、以下の手順でJestをIonic 6で動作させることができます。
+新しい Ionic アプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存の Ionic アプリをお持ちの方は、以下の手順で Jest を Ionic 6 で動作させることができます。
 
 1. Jest の設定に、関連する Ionic パッケージを含む `transformIgnorePatterns` フィールドを追加します。これは通常 `jest.config.js` または `package.json` の `jest` フィールドに含まれています。
 
@@ -445,10 +453,10 @@ module.exports = {
 ```
 
 :::note
-Ionic ReactまたはIonic Vueを使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic Reactの場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vueの場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
+Ionic React または Ionic Vue を使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic React の場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vue の場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
 :::
 
-Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これはCRAの制限であり、Ionicがコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
+Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これは CRA の制限であり、Ionic がコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
 
 ```json title="package.json"
 "scripts": {
@@ -465,6 +473,6 @@ Create React App (CRA) を使用している開発者にとっては、現在の
 
 ## アップグレートへの助けが必要？
 
-[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティとCSS変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
+[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティと CSS 変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
 
 アップグレードに助けが必要な場合、 [Ionic Forum](https://forum.ionicframework.com/) にスレッドを立ててください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
index c79f71874ba..7c2f7efbb36 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
@@ -16,20 +16,20 @@ For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refe
 
 ### Angular
 
-1. Ionic 7はAngular 14+に対応しています。 [Angular Update Guide](https://update.angular.io/) に従い、Angularの最新バージョンにアップデートしてください。
-2. プロジェクトでrxjsを使用している場合、Ionic 7ではrxjsの最低バージョンが7.5.0である必要があります：
+1. Ionic 7 は Angular 14+に対応しています。 [Angular Update Guide](https://update.angular.io/) に従い、Angular の最新バージョンにアップデートしてください。
+2. プロジェクトで rxjs を使用している場合、Ionic 7 では rxjs の最低バージョンが 7.5.0 である必要があります：
 
 ```shell
 npm install rxjs@7.5.0
 ```
 
-3. Ionic 7の最新バージョンにアップデートしてください：
+3. Ionic 7 の最新バージョンにアップデートしてください：
 
 ```shell
 npm install @ionic/angular@next
 ```
 
-Ionic Angular Serverを使用している場合は、必ずそちらも更新してください。
+Ionic Angular Server を使用している場合は、必ずそちらも更新してください。
 
 ```shell
 npm install @ionic/angular@next @ionic/angular-server@next
@@ -37,13 +37,13 @@ npm install @ionic/angular@next @ionic/angular-server@next
 
 ### React
 
-1. Ionic 7はReact 17+に対応しています。Reactの最新バージョンにアップデートしてください。
+1. Ionic 7 は React 17+に対応しています。React の最新バージョンにアップデートしてください。
 
 ```shell
 npm install react@latest react-dom@latest
 ```
 
-2. Ionic 7の最新バージョンにアップデートします。
+2. Ionic 7 の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/react@next @ionic/react-router@next
@@ -51,13 +51,13 @@ npm install @ionic/react@next @ionic/react-router@next
 
 ### Vue
 
-1. Ionic 7はVue 3.0.6+をサポートしています。Vueの最新バージョンにアップデートしてください。
+1. Ionic 7 は Vue 3.0.6+をサポートしています。Vue の最新バージョンにアップデートしてください。
 
 ```shell
 npm install vue@latest vue-router@latest
 ```
 
-3. Ionic 7の最新バージョンにアップデートします。
+3. Ionic 7 の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/vue@next @ionic/vue-router@next
@@ -65,7 +65,7 @@ npm install @ionic/vue@next @ionic/vue-router@next
 
 ### Core
 
-1. Ionic 7の最新バージョンにアップデートします。
+1. Ionic 7 の最新バージョンにアップデートします。
 
 ```shell
 npm install @ionic/core@next
@@ -75,7 +75,7 @@ npm install @ionic/core@next
 
 ### ブラウザサポート
 
-Ionicがサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
+Ionic がサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
 
 `browserslist` または `.browserslistrc` ファイルをお持ちの場合は、以下の内容で更新してください。
 
@@ -99,7 +99,7 @@ iOS >=14
 ### Datetime
 
 1. `value` プロパティに空文字列(`''`)を設定するコードを削除します
-2.  `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetimeはタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
+2. `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetime はタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
 
 ### Input
 
@@ -124,7 +124,7 @@ iOS >=14
 
 ### Slides
 
-1. `ion-slides`、`ion-slide`、および関連する型を削除する。これらのコンポーネントは、Swiper.jsを直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
+1. `ion-slides`、`ion-slide`、および関連する型を削除する。これらのコンポーネントは、Swiper.js を直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
 
 [Angular Migration Guide](https://ionicframework.com/docs/angular/slides)<br />
 [React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
@@ -136,11 +136,11 @@ iOS >=14
 
 ### Toggle
 
-1. CSS変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--track-background` と `--track-background-checked` にリネームします。
+1. CSS 変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--track-background` と `--track-background-checked` にリネームします。
 
 ### Virtual Scroll
 
-`ion-virtual-scroll`とそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworksが提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
+`ion-virtual-scroll`とそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworks が提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
 
 [Angular Migration Guide](https://ionicframework.com/docs/angular/virtual-scroll)<br />
 [React Migration Guide](https://ionicframework.com/docs/react/virtual-scroll)<br />
@@ -148,11 +148,12 @@ iOS >=14
 
 ## アップグレードに助けが必要？
 
-[Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) を必ず見てください。デフォルトのプロパティとCSS Variableの値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。
+[Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) を必ず見てください。デフォルトのプロパティと CSS Variable の値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。
 
 <<<<<<< HEAD
 アップグレードのヘルプが必要な場合は、[Ionic Forum](https://forum.ionicframework.com/)にスレッドを投稿してください。
 
 =======
 If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).
->>>>>>> 3bd16bc620b471736c9f4ce90e2f3eae53781174
+
+> > > > > > > 3bd16bc620b471736c9f4ce90e2f3eae53781174
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
index 65c8340d4ac..5f5dba435fe 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
@@ -1,10 +1,10 @@
 # Config
 
-Ionic Configは、アプリケーション全体にわたってコンポーネントのプロパティをグローバルに変更する方法を提供します。Ionic Configは、アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。
+Ionic Config は、アプリケーション全体にわたってコンポーネントのプロパティをグローバルに変更する方法を提供します。Ionic Config は、アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。
 
 ## グローバル設定
 
-アプリケーションの初期のIonic Configを上書きするには、IonicVueプラグインのインストール時に追加パラメータとしてConfigオブジェクトを指定します。
+アプリケーションの初期の Ionic Config を上書きするには、IonicVue プラグインのインストール時に追加パラメータとして Config オブジェクトを指定します。
 
 ```tsx
 createApp(App).use(IonicVue, {
@@ -13,13 +13,13 @@ createApp(App).use(IonicVue, {
 });
 ```
 
-上の例では、Material Designのリップル効果を無効にし、モードをMaterial Designにしています。
+上の例では、Material Design のリップル効果を無効にし、モードを Material Design にしています。
 
 ## プラットフォームごとの構成
 
-Ionic Configは、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができます。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
+Ionic Config は、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができます。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
 
-次の例では、アプリケーションがモバイルWebブラウザで実行されている場合にのみ、Ionicアプリケーションのすべてのアニメーションを無効にしています。
+次の例では、アプリケーションがモバイル Web ブラウザで実行されている場合にのみ、Ionic アプリケーションのすべてのアニメーションを無効にしています。
 `isPlatform ()` 呼び出しは、渡されたプラットフォームに基づいて `true` または `false` を返します。 [Platform Documentation](platform.md#platforms) を指定します。
 
 ```tsx
@@ -76,9 +76,9 @@ createApp(App).use(IonicVue, getConfig());
 
 ## Interfaces
 
-### Configオプション
+### Config オプション
 
-以下はIonicで使用できる設定オプションのリストです。
+以下は Ionic で使用できる設定オプションのリストです。
 
 | Config                   | Type                                                                          | Description                                                                                              |
 | ------------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
index fd19d33cda9..de5a58c96f1 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
@@ -2,24 +2,24 @@
 sidebar_label: ライフサイクル
 ---
 
-# Vueのライフサイクル
+# Vue のライフサイクル
 
-このガイドでは、Ionic FrameworkのライフサイクルイベントをIonic Vueアプリケーションで使用する方法について説明します。
+このガイドでは、Ionic Framework のライフサイクルイベントを Ionic Vue アプリケーションで使用する方法について説明します。
 
-## Ionic Frameworkのライフサイクルメソッド
+## Ionic Framework のライフサイクルメソッド
 
-Ionic Frameworkはアプリで使えるいくつかのライフサイクルメソッドを提供します:
+Ionic Framework はアプリで使えるいくつかのライフサイクルメソッドを提供します:
 
-| Event Name         | Description                                                          |
-|--------------------|------------------------------------------------------------------|
+| Event Name         | Description                                                        |
+| ------------------ | ------------------------------------------------------------------ |
 | `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
 | `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
+| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
+| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
 
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
 
-ライフサイクルは、Vueのライフサイクルメソッドと同じように、Vueコンポーネントのルートで関数として定義されます：
+ライフサイクルは、Vue のライフサイクルメソッドと同じように、Vue コンポーネントのルートで関数として定義されます：
 
 ```tsx
 import { IonPage } from '@ionic/vue';
@@ -82,27 +82,26 @@ export default defineComponent({
 Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly.
 :::
 
-## Ionic Frameworkがページのライフを処理する仕組み
+## Ionic Framework がページのライフを処理する仕組み
 
-Ionic Frameworkには `<ion-router-outlet>` と呼ばれるルータアウトレットがあります。このアウトレットは、Vue Routerの `<router-view>` を拡張し、モバイルデバイスのエクスペリエンスを向上させるためのいくつかの追加機能を提供します。
+Ionic Framework には `<ion-router-outlet>` と呼ばれるルータアウトレットがあります。このアウトレットは、Vue Router の `<router-view>` を拡張し、モバイルデバイスのエクスペリエンスを向上させるためのいくつかの追加機能を提供します。
 
-アプリが `<ion-router-outlet>` でラップされている場合、Ionic Frameworkはナビゲーションを少し異なる扱いにします。新しいページに移動すると、Ionic Frameworkは古いページを既存のDOMに保持しますが、ビューからは非表示にして新しいページに移動します。これを行う理由は2つあります:
+アプリが `<ion-router-outlet>` でラップされている場合、Ionic Framework はナビゲーションを少し異なる扱いにします。新しいページに移動すると、Ionic Framework は古いページを既存の DOM に保持しますが、ビューからは非表示にして新しいページに移動します。これを行う理由は 2 つあります:
 
 1. 古いページの状態を維持できます(画面上のデータ、スクロール位置など...)
 2. ページはすでに存在しており、作成する必要がないため、よりスムーズにページに戻ることができます。
 
-ページがDOMから削除されるのは、UIの戻るボタンやブラウザーの戻るボタンを押すなど、ページが "popped" された場合のみです。
+ページが DOM から削除されるのは、UI の戻るボタンやブラウザーの戻るボタンを押すなど、ページが "popped" された場合のみです。
 
-この特別な処理のため、 `<keep-alive>`, `<transition>`,`<router-view>` などの特定のVueルータコンポーネントは、Ionic Vueアプリケーションでは使用しないでください。また、各ページのスクロール位置は自動的に保存されるため、ここではVue Routerのスクロール動作APIは必要ありません。
-
-Vueのすべてのライフサイクルメソッド(`mounted` や `beforeUnmount`など)も使用可能です。ただし、Ionic Vueはページのライフタイムを管理するため、特定のイベントは予期したときに起動しない場合があります。たとえば、mountedはページが最初に表示されたときに起動しますが、ページから離れると、Ionic FrameworkによってページがDOM内に保持され、その後ページにアクセスしても再度 `mounted` が呼び出されることはありません。このシナリオは、Ionic Frameworkのライフサイクル・メソッドが存在する主な理由であり、ネイティブ・フレームワークのイベントが起動しない可能性がある場合でも、ビューの開始時と終了時にロジックを呼び出す方法を提供します。
+この特別な処理のため、 `<keep-alive>`, `<transition>`,`<router-view>` などの特定の Vue ルータコンポーネントは、Ionic Vue アプリケーションでは使用しないでください。また、各ページのスクロール位置は自動的に保存されるため、ここでは Vue Router のスクロール動作 API は必要ありません。
 
+Vue のすべてのライフサイクルメソッド(`mounted` や `beforeUnmount`など)も使用可能です。ただし、Ionic Vue はページのライフタイムを管理するため、特定のイベントは予期したときに起動しない場合があります。たとえば、mounted はページが最初に表示されたときに起動しますが、ページから離れると、Ionic Framework によってページが DOM 内に保持され、その後ページにアクセスしても再度 `mounted` が呼び出されることはありません。このシナリオは、Ionic Framework のライフサイクル・メソッドが存在する主な理由であり、ネイティブ・フレームワークのイベントが起動しない可能性がある場合でも、ビューの開始時と終了時にロジックを呼び出す方法を提供します。
 
 ## 各ライフサイクルメソッドのガイダンス
 
-以下は、life cycle eventsごとのユースケースに関するヒントです。
+以下は、life cycle events ごとのユースケースに関するヒントです。
 
-- `ionViewWillEnter` - `ionViewWillEnter` はViewがナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Serviceからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量のDOM操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
-- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Pageがユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたは [ion-skeleton-text](../api/skeleton-text) を使ったスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
-- `ionViewWillLeave` - observablesのunsubscribingのように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
+- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
+- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたは [ion-skeleton-text](../api/skeleton-text) を使ったスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
+- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
 - `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
index 6879a644dc9..d35dc0bddf5 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
@@ -13,19 +13,19 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
   />
 </head>
 
-このガイドでは、IonicとVueで構築されたアプリでルーティングがどのように機能するかについて説明します。
+このガイドでは、Ionic と Vue で構築されたアプリでルーティングがどのように機能するかについて説明します。
 
-`IonRouterOutlet` コンポーネントは、内部で一般的な [Vue Router](https://router.vuejs.org/) ライブラリを使用します。IonicとVue Routerを使えば、リッチなページ遷移を持つマルチページアプリを作ることができます。
+`IonRouterOutlet` コンポーネントは、内部で一般的な [Vue Router](https://router.vuejs.org/) ライブラリを使用します。Ionic と Vue Router を使えば、リッチなページ遷移を持つマルチページアプリを作ることができます。
 
-Vue Routerを使ったルーティングについて知っていることはすべてIonic Vueに引き継がれます。Ionic Vueアプリの基本とルーティングの仕組みを見てみましょう。
+Vue Router を使ったルーティングについて知っていることはすべて Ionic Vue に引き継がれます。Ionic Vue アプリの基本とルーティングの仕組みを見てみましょう。
 
 ## 簡単なメモ
 
-このガイドを読んでいると、これらのコンセプトのほとんどが、Ionic Frameworkを使わずにVue Routerで見られるコンセプトと非常に似ていることに気がつくかもしれません。あなたの観察は正しいでしょう! Ionic Vueは、Ionic Frameworkでアプリを構築するための移行をできるだけシームレスにするために、Vue Routerの最良の部分を活用しています。そのため、独自のルーティングソリューションを構築しようとするよりも、できるだけVue Routerの機能に依存することをお勧めします。
+このガイドを読んでいると、これらのコンセプトのほとんどが、Ionic Framework を使わずに Vue Router で見られるコンセプトと非常に似ていることに気がつくかもしれません。あなたの観察は正しいでしょう! Ionic Vue は、Ionic Framework でアプリを構築するための移行をできるだけシームレスにするために、Vue Router の最良の部分を活用しています。そのため、独自のルーティングソリューションを構築しようとするよりも、できるだけ Vue Router の機能に依存することをお勧めします。
 
-## 簡単なRoute
+## 簡単な Route
 
-次に示すのは、 "/home" URLへの単一のルートを定義するルーティング設定の例です。 "/home" にアクセスすると、ルートによって `HomePage`  コンポーネントがレンダリングされます。
+次に示すのは、 "/home" URL への単一のルートを定義するルーティング設定の例です。 "/home" にアクセスすると、ルートによって `HomePage` コンポーネントがレンダリングされます。
 
 **router/index.ts**
 
@@ -70,9 +70,9 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-このリダイレクトでは、最初にインデックスのパスが参照されます。そして、 `home` routeにリダイレクトしてロードを行います。
+このリダイレクトでは、最初にインデックスのパスが参照されます。そして、 `home` route にリダイレクトしてロードを行います。
 
-## 異なるRoutesへのナビゲーション
+## 異なる Routes へのナビゲーション
 
 これは素晴らしいことですが、実際にルートにナビゲートするにはどうすればよいのでしょうか。これには、 `router-link` プロパティを使用できます。新しいルーティング設定を作成します:
 
@@ -95,13 +95,13 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-`home` routeで開始し、`detail` routeに移動するボタンを追加するとします。`detail` routeに移動するには、次のHTMLを使用します:
+`home` route で開始し、`detail` route に移動するボタンを追加するとします。`detail` route に移動するには、次の HTML を使用します:
 
 ```html
 <ion-button router-link="/detail">Go to detail</ion-button>
 ```
 
-また、ルーターAPIを使用して、プログラムでアプリケーション内を移動することもできます:
+また、ルーター API を使用して、プログラムでアプリケーション内を移動することもできます:
 
 ```html
 <template>
@@ -208,7 +208,7 @@ A key characteristic of `router.go()` is that it expects your application histor
 
 ## Lazy Loading Routes
 
-現在のrouteの設定方法では、アプリをロードするときに同じ初期チャンクに含まれるようになっているが、これは必ずしも理想的ではありません。代わりに、必要に応じてコンポーネントがロードされるようにrouteを設定できます。
+現在の route の設定方法では、アプリをロードするときに同じ初期チャンクに含まれるようになっているが、これは必ずしも理想的ではありません。代わりに、必要に応じてコンポーネントがロードされるように route を設定できます。
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -241,8 +241,8 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/linear-routing-demo.mp4')}
@@ -267,8 +267,8 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/non-linear-routing-demo.mp4')}
@@ -299,9 +299,9 @@ For more on nested router outlets, please see [Nested Routes](#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.
 
-### 共有URL
+### 共有 URL
 
-共有URLは、ルートが共通のURLの一部を持つルート設定です。共有URL設定の例を次に示します:
+共有 URL は、ルートが共通の URL の一部を持つルート設定です。共有 URL 設定の例を次に示します:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -316,11 +316,11 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-上記のルートは、URLの `dashboard` 部分を再利用するため、 "shared" と見なされます。
+上記のルートは、URL の `dashboard` 部分を再利用するため、 "shared" と見なされます。
 
-### ネストされたRoute
+### ネストされた Route
 
-Nested Routesは、ルートが他のルートの子としてリストされるルート設定です。ネストされたルート設定の例を次に示します:
+Nested Routes は、ルートが他のルートの子としてリストされるルート設定です。ネストされたルート設定の例を次に示します:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -345,16 +345,15 @@ const routes: Array<RouteRecordRaw> = [
 
 ### どちらを選ぶべきか
 
-共有URLは、URLの2つのページ間の関係を維持しながら、ページAからページBに遷移する場合に便利です。前述の例では、 `/dashboard` ページのボタンで `/dashboard/stats` ページに移行できます。2つのページ間の関係は、a) ページの遷移とb) URLによって維持されます。
+共有 URL は、URL の 2 つのページ間の関係を維持しながら、ページ A からページ B に遷移する場合に便利です。前述の例では、 `/dashboard` ページのボタンで `/dashboard/stats` ページに移行できます。2 つのページ間の関係は、a) ページの遷移と b) URL によって維持されます。
 
-ネストされたルートは、コンセントAのコンテンツをレンダリングする必要がある場合、およびネストされたコンセントBの内部のサブコンテンツをレンダリングする必要がある場合に便利です。最も一般的な使用例は、タブです。Ionicスターターアプリのタブをロードすると、最初の `ion-router-outlet` で `ion-tab-bar`  および `ion-tabs` コンポーネントがレンダリングされます。`ion-tabs` コンポーネントは、各タブの内容をレンダリングする別の 「イオンルータ出力」 をレンダリングします。
-
-モバイルアプリケーションでネストされたルートが意味をなすユースケースはほとんどありません。疑わしい場合は、共有URLルート設定を使用します。ネストされたルーティングをタブ以外のコンテキストで使用すると、アプリのナビゲーションが混乱する可能性があるため、使用しないように強く注意しています。
+ネストされたルートは、コンセント A のコンテンツをレンダリングする必要がある場合、およびネストされたコンセント B の内部のサブコンテンツをレンダリングする必要がある場合に便利です。最も一般的な使用例は、タブです。Ionic スターターアプリのタブをロードすると、最初の `ion-router-outlet` で `ion-tab-bar` および `ion-tabs` コンポーネントがレンダリングされます。`ion-tabs` コンポーネントは、各タブの内容をレンダリングする別の 「イオンルータ出力」 をレンダリングします。
 
+モバイルアプリケーションでネストされたルートが意味をなすユースケースはほとんどありません。疑わしい場合は、共有 URL ルート設定を使用します。ネストされたルーティングをタブ以外のコンテキストで使用すると、アプリのナビゲーションが混乱する可能性があるため、使用しないように強く注意しています。
 
 ## タブの操作
 
-タブを操作する場合、Ionic Vueはどのビューがどのタブに属しているかを知る方法を必要とします。ここでは `IonTabs` コンポーネントが便利ですが、この場合のルーティング設定を見てみましょう:
+タブを操作する場合、Ionic Vue はどのビューがどのタブに属しているかを知る方法を必要とします。ここでは `IonTabs` コンポーネントが便利ですが、この場合のルーティング設定を見てみましょう:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -454,7 +453,7 @@ const routes: Array<RouteRecordRaw> = [
 </script>
 ```
 
-以前にIonic Frameworkを使ったことがある人なら、このことをよく知っているはずです。`ion-tabs` コンポーネントを作成し、 `ion-tab-bar` を提供します。`ion-tab-bar` は `ion-tab-button` コンポーネントを提供し、それぞれにルータの設定の対応するタブに関連付けられた `tab` プロパティがあります。
+以前に Ionic Framework を使ったことがある人なら、このことをよく知っているはずです。`ion-tabs` コンポーネントを作成し、 `ion-tab-bar` を提供します。`ion-tab-bar` は `ion-tab-button` コンポーネントを提供し、それぞれにルータの設定の対応するタブに関連付けられた `tab` プロパティがあります。
 
 ### タブ内の子ルート
 
@@ -521,8 +520,8 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/tabs-account-demo.mp4')}
@@ -537,15 +536,15 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 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 |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |
 
 ## Components
 
 ### IonRouterOutlet
 
-`IonRouterOutlet` コンポーネントは、ビューをレンダリングするためのコンテナを提供します。これは他のVueアプリケーションに見られる `RouterView` コンポーネントに似ていますが、 `IonRouterOutlet` は同じアウトレット内のDOMで複数のページをレンダリングできるという点が異なります。コンポーネントが `IonRouterOutlet` でレンダリングされる場合、これはIonic Framework "Page"と見なされます。ルーター・アウトレット・コンテナーは、ページ間の遷移アニメーションを制御するだけでなく、ページがいつ作成および破棄されるかを制御します。これにより、ビューを切り替えるときにビュー間の状態を維持することができます。
+`IonRouterOutlet` コンポーネントは、ビューをレンダリングするためのコンテナを提供します。これは他の Vue アプリケーションに見られる `RouterView` コンポーネントに似ていますが、 `IonRouterOutlet` は同じアウトレット内の DOM で複数のページをレンダリングできるという点が異なります。コンポーネントが `IonRouterOutlet` でレンダリングされる場合、これは Ionic Framework "Page"と見なされます。ルーター・アウトレット・コンテナーは、ページ間の遷移アニメーションを制御するだけでなく、ページがいつ作成および破棄されるかを制御します。これにより、ビューを切り替えるときにビュー間の状態を維持することができます。
 
 テンプレートで設定する際に、 `IonRouterOutlet` の内部には何も指定しないでください。`IonRouterOutlet` は子コンポーネントにネストすることができますが、通常はアプリケーション内のナビゲーションが混乱するため注意が必要です。詳細については、[Shared URLs versus Nested Routes](#shared-urls-versus-nested-routes) を参照してください。
 
@@ -593,9 +592,9 @@ Returns the Ionic router instance, containing API methods for navigating, custom
 
 For example usages, please refer to our [Utility Functions](utility-functions#useionrouter).
 
-## URLパラメーター
+## URL パラメーター
 
-元のルーティング例を拡張して、URLパラメータの使用方法を示します:
+元のルーティング例を拡張して、URL パラメータの使用方法を示します:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -616,7 +615,7 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-ここで、 `detail` パス文字列の最後に `:id` を追加したことに注意してください。URLパラメータは、ルートパスの動的な部分です。ユーザーが `/details/1` などのURLに移動すると、 "1" が "id" という名前のパラメータに保存され、ルートのレンダリング時にコンポーネントでアクセスできるようになります。
+ここで、 `detail` パス文字列の最後に `:id` を追加したことに注意してください。URL パラメータは、ルートパスの動的な部分です。ユーザーが `/details/1` などの URL に移動すると、 "1" が "id" という名前のパラメータに保存され、ルートのレンダリング時にコンポーネントでアクセスできるようになります。
 
 コンポーネントでの使用方法を見てみましょう。
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
index f5148e490a9..e7284829832 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
@@ -14,21 +14,21 @@ sidebar_label: 概要
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-Ionic Frameworkのコアな経験と、Vue開発者向けにカスタマイズされたツールやAPIを組み合わせたものが `@ionic/vue` です。
+Ionic Framework のコアな経験と、Vue 開発者向けにカスタマイズされたツールや API を組み合わせたものが `@ionic/vue` です。
 
-## Vueバージョンサポート
+## Vue バージョンサポート
 
-Ionic VueはVue 3.0.0上に構築されています。Ionic Vueの初期バージョンでアプリを構築している場合は、最新のリリースにアップグレードして、Vueの依存関係をアップグレードしてください。
+Ionic Vue は Vue 3.0.0 上に構築されています。Ionic Vue の初期バージョンでアプリを構築している場合は、最新のリリースにアップグレードして、Vue の依存関係をアップグレードしてください。
 
-## Vueツール
+## Vue ツール
 
-Ionic Vueプロジェクトには通常のVue CLIプロジェクトと同じツールが付属しています。つまり、Vue CLIとそのすべての機能を使って構築することになります。VueのデフォルトテンプレートにはルーティングやTypeScriptのサポートなど、デフォルトで有効になっている機能がほとんどありませんが、Ionic Vueはそれらをデフォルトで有効にしています。
+Ionic Vue プロジェクトには通常の Vue CLI プロジェクトと同じツールが付属しています。つまり、Vue CLI とそのすべての機能を使って構築することになります。Vue のデフォルトテンプレートにはルーティングや TypeScript のサポートなど、デフォルトで有効になっている機能がほとんどありませんが、Ionic Vue はそれらをデフォルトで有効にしています。
 
 ## Native Tooling
 
-[Capacitor](https://capacitorjs.com) は、Ionic VueウェブアプリをiOS、Android、ウェブ上でネイティブに動作させるための公式クロスプラットフォームアプリライブラリです。
+[Capacitor](https://capacitorjs.com) は、Ionic Vue ウェブアプリを iOS、Android、ウェブ上でネイティブに動作させるための公式クロスプラットフォームアプリライブラリです。
 
-[Cordova](https://cordova.apache.org/) とCordovaプラグインでIonic Vueを使用する際の技術的な制限はありませんが、Capacitorが公式に推奨されています。現時点では、[Ionic CLIツール](/docs/cli) ツールでIonic VueのCordova統合をサポートする計画はない。詳細は [こちら](https://capacitorjs.com/docs/cordova) をご覧ください。
+[Cordova](https://cordova.apache.org/) と Cordova プラグインで Ionic Vue を使用する際の技術的な制限はありませんが、Capacitor が公式に推奨されています。現時点では、[Ionic CLI ツール](/docs/cli) ツールで Ionic Vue の Cordova 統合をサポートする計画はない。詳細は [こちら](https://capacitorjs.com/docs/cordova) をご覧ください。
 
 ## コミュニティからの情報
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
index 5e6463d33ba..e1bdf32cde2 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
@@ -10,7 +10,7 @@ import { isPlatform } from '@ionic/vue';
 isPlatform('ios'); // returns true when running on a iOS device
 ```
 
-ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPadから実行するアプリは、mobile、ios、ipad、およびtabletのプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordovaもtrueになります。
+ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPad から実行するアプリは、mobile、ios、ipad、および tablet のプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordova も true になります。
 
 ## getPlatforms
 
@@ -22,7 +22,7 @@ import { getPlatforms } from '@ionic/vue';
 getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone
 ```
 
-使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhoneでは、mobile、ios、およびiphoneが返されます。
+使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhone では、mobile、ios、および iphone が返されます。
 
 ## Platforms
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
index a431da43752..bb13be0e161 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
@@ -24,16 +24,13 @@ npm install -D vite-plugin-pwa
 Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
 
 ```javascript
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { VitePWA } from 'vite-plugin-pwa'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    VitePWA({ registerType: 'autoUpdate' })
-  ],
-})
+  plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })],
+});
 ```
 
 This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
@@ -50,17 +47,17 @@ As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. Se
 
 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 Application 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.
 
-既存のプロジェクトの場合は、 `vue add` コマンドを実行して、VueのPWAプラグインをインストールできます。
+既存のプロジェクトの場合は、 `vue add` コマンドを実行して、Vue の PWA プラグインをインストールできます。
 
 ```shell
 vue add pwa
 ```
 
 :::note
-変更する前に、現在の状況を必ずGitにコミットしてください。
+変更する前に、現在の状況を必ず Git にコミットしてください。
 :::
 
-これが完了すると、VueのCLIは新しく `registerServiceWorker.ts` を作成します。それを `main.ts` ファイルにインポートします。
+これが完了すると、Vue の CLI は新しく `registerServiceWorker.ts` を作成します。それを `main.ts` ファイルにインポートします。
 
 ```tsx
 import { createApp } from 'vue';
@@ -72,7 +69,7 @@ import './registerServiceWorker';
 createApp(App).use(router).mount('#app');
 ```
 
-`registerServiceWorker.ts` はCLIがビルド時に作成するservice workerです。ここでは、service workerがアップデート、ネットワーク接続の変更、またはエラーを検出したときのユーザの操作性をカスタマイズできます。
+`registerServiceWorker.ts` は CLI がビルド時に作成する service worker です。ここでは、service worker がアップデート、ネットワーク接続の変更、またはエラーを検出したときのユーザの操作性をカスタマイズできます。
 
 ```tsx
 import { register } from 'register-service-worker';
@@ -106,13 +103,13 @@ if (process.env.NODE_ENV === 'production') {
 }
 ```
 
-生成されるService Workerは、 [Workbox's webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいており、デフォルトで `GenerateSW()` を使用するように設定されています。つまり、Workboxはビルド時に、処理するすべてのファイルのService Workerキャッシュを自動的に生成します。
+生成される Service Worker は、 [Workbox's webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいており、デフォルトで `GenerateSW()` を使用するように設定されています。つまり、Workbox はビルド時に、処理するすべてのファイルの Service Worker キャッシュを自動的に生成します。
 
-これを設定してデフォルトの動作を変更したい場合は、GitHubにある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) をチェックアウトします。
+これを設定してデフォルトの動作を変更したい場合は、GitHub にある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) をチェックアウトします。
 
 ### Manifest
 
-Service Workerに加えて、Vue PWAプラグインはアプリケーションのmanifestファイルも作成します。デフォルトでは、CLIは次のエントリーを含むmanifestを生成します。
+Service Worker に加えて、Vue PWA プラグインはアプリケーションの manifest ファイルも作成します。デフォルトでは、CLI は次のエントリーを含む manifest を生成します。
 
 ```json
 {
@@ -149,34 +146,34 @@ Service Workerに加えて、Vue PWAプラグインはアプリケーション
 }
 ```
 
-`public/img/icons` 内のアイコンは、必ずご使用のブランドに合わせて更新してください。テーマの色や名前をカスタマイズしたい場合は、GitHubにある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) のドキュメントを必ず読んでください。
+`public/img/icons` 内のアイコンは、必ずご使用のブランドに合わせて更新してください。テーマの色や名前をカスタマイズしたい場合は、GitHub にある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) のドキュメントを必ず読んでください。
 
 ### Deploying
 
-Firebase, Vercel, Netlify,さらにはAzure Static Web Appsなど、さまざまなホストを使用することができる。いずれの場合も、同様のセットアッププロセスを完了する必要があります。このガイドでは、ホストの例としてFirebaseを使用します。このガイドに加えて、 [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) のドキュメントには、さまざまなプロバイダーにデプロイするためのガイドも含まれています。
+Firebase, Vercel, Netlify,さらには Azure Static Web Apps など、さまざまなホストを使用することができる。いずれの場合も、同様のセットアッププロセスを完了する必要があります。このガイドでは、ホストの例として Firebase を使用します。このガイドに加えて、 [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) のドキュメントには、さまざまなプロバイダーにデプロイするためのガイドも含まれています。
 
 #### Firebase
 
-FirebaseホスティングはProgressive Web Appsに多くの利点を提供しており、CDNによる高速応答、デフォルトで有効になっているHTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
+Firebase ホスティングは Progressive Web Apps に多くの利点を提供しており、CDN による高速応答、デフォルトで有効になっている HTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
 
-まず、まだ使用していない場合は、Firebaseで [プロジェクトを作成](https://console.firebase.google.com) します。
+まず、まだ使用していない場合は、Firebase で [プロジェクトを作成](https://console.firebase.google.com) します。
 
-次にターミナルでFirebase CLIをインストールします:
+次にターミナルで Firebase CLI をインストールします:
 
 ```shell
 npm install -g firebase-tools
 ```
 
-Firebase CLIをインストールした状態で、Ionicプロジェクト内で `firebase init` を実行します。CLI上で様々な確認を行っていきます:
+Firebase CLI をインストールした状態で、Ionic プロジェクト内で `firebase init` を実行します。CLI 上で様々な確認を行っていきます:
 
-**"Which Firebase CLI features do you want to set up for this folder?"**  "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
+**"Which Firebase CLI features do you want to set up for this folder?"** "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
 
-**"Select a default Firebase project for this directory:"** FirebaseのWebサイト上で作成したプロジェクトを選択します。
+**"Select a default Firebase project for this directory:"** Firebase の Web サイト上で作成したプロジェクトを選択します。
 
 **"What do you want to use as your public directory?"** "dist" を選択ください。
 
 :::note
-次の2つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
+次の 2 つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
 :::
 
 **Configure as a single-page app (rewrite all urls to /index.html)?"** "Yes" を選択します.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
index 65bf601b283..6c71af6669a 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
@@ -11,23 +11,23 @@ sidebar_label: クイックスタート
   />
 </head>
 
-## Ionic Frameworkとは
+## Ionic Framework とは
 
-まず、ここに来たばかりの人を歓迎します！Ionic Frameworkは、 iOS, Android, Electron, Web上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
+まず、ここに来たばかりの人を歓迎します！Ionic Framework は、 iOS, Android, Electron, Web 上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
 
-UIコンポーネントに加えて、Ionic Frameworkは新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
+UI コンポーネントに加えて、Ionic Framework は新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
 
-このガイドでは、Ionic Framework特有の機能を含め、VueとIonic Frameworkの基本について説明します。Vueに精通している方は、ガイドを楽しみ、Ionic Frameworkについて新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
+このガイドでは、Ionic Framework 特有の機能を含め、Vue と Ionic Framework の基本について説明します。Vue に精通している方は、ガイドを楽しみ、Ionic Framework について新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
 
-## Ionic CLIを使ったプロジェクト新規作成
+## Ionic CLI を使ったプロジェクト新規作成
 
-はじめに、Ionic CLIの最新版をインストールしましょう。
+はじめに、Ionic CLI の最新版をインストールしましょう。
 
 ```shell
 npm install -g @ionic/cli@latest
 ```
 
-これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Frameworkと他の依存関係を持つVueプロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
+これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Framework と他の依存関係を持つ Vue プロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
 
 ```shell
 ionic start myApp blank --type vue
@@ -38,17 +38,17 @@ cd myApp
 
 ## TypeScript と JavaScript のどちらで構築するかを選べます
 
-私たちはTypeScriptが大好きで、スケールさせるアプリを構築するための素晴らしいツールだと確信しています。とはいえ、Vueコミュニティがいかにシンプルさを重視しているかは、ツールや言語などでわかっています。実際、そもそもVueに興味を持ったのはそのおかげかもしれません。シンプルに開始し、必要に応じてスケールアップします。
+私たちは TypeScript が大好きで、スケールさせるアプリを構築するための素晴らしいツールだと確信しています。とはいえ、Vue コミュニティがいかにシンプルさを重視しているかは、ツールや言語などでわかっています。実際、そもそも Vue に興味を持ったのはそのおかげかもしれません。シンプルに開始し、必要に応じてスケールアップします。
 
-したがって、TypeScriptの代わりにJavaScriptを使うことができます。Ionic Vueアプリケーションを生成したら、次の手順を実行してください。
+したがって、TypeScript の代わりに JavaScript を使うことができます。Ionic Vue アプリケーションを生成したら、次の手順を実行してください。
 
-1. TypeScriptの依存を削除:
+1. TypeScript の依存を削除:
 
 ```shell
 npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
 ```
 
-2. すべての `.ts` ファイルの拡張子を `.js` にします。blank Ionic Vueアプリでは、 `router/index.ts` と `main.ts` が該当します。
+2. すべての `.ts` ファイルの拡張子を `.js` にします。blank Ionic Vue アプリでは、 `router/index.ts` と `main.ts` が該当します。
 
 3. `@vue/typescript/recommended` と `@typescript-eslint/no-explicit-any: ‘off’, ` を `.eslintrc.js` から削除します。
 
@@ -56,10 +56,9 @@ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @ty
 
 5. `shims-vue.d.ts`ファイルを削除します。
 
-6. Vueコンポーネントにある `script` タグから `lang="ts"` を削除します。blank Ionic Vueアプリの場合、 `App.vue` と `views/HomePage.vue` が該当します。
+6. Vue コンポーネントにある `script` タグから `lang="ts"` を削除します。blank Ionic Vue アプリの場合、 `App.vue` と `views/HomePage.vue` が該当します。
 
-
-## Vueコンポーネントの確認
+## Vue コンポーネントの確認
 
 アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `main.ts` になります。エディタでプロジェクトを開き、`main.ts` を確認すると、次のように表示されます:
 
@@ -97,11 +96,11 @@ The fourth import gets our routing configuration. We will look at this more in d
 </script>
 ```
 
-scriptに書かれているimportのグループを分解してみていきましょう。
+script に書かれている import のグループを分解してみていきましょう。
 
 ```tsx
 <script setup lang="ts">
-  import { IonApp, IonRouterOutlet } from '@ionic/vue';
+  import {(IonApp, IonRouterOutlet)} from '@ionic/vue';
 </script>
 ```
 
@@ -119,13 +118,13 @@ You can also register components globally if you find yourself importing the sam
 </template>
 ```
 
-すべてのVueコンポーネントには `<template>` が必要です。その中に `IonApp` と `IonRouterOutlet` のコンポーネントを配置します。
+すべての Vue コンポーネントには `<template>` が必要です。その中に `IonApp` と `IonRouterOutlet` のコンポーネントを配置します。
 
 ## Initializing the router
 
 ## ルーターのインストール
 
-Ionic Vueは内部的に [vue-router](https://router.vuejs.org/) を使用しているため、Vue Routerにすでに慣れている場合は、これまでの知識をIonic Vueのナビゲーションに適用できます。先ほど述べたルータの設定を見てみましょう。`router/index.ts` で次のように表示されます。
+Ionic Vue は内部的に [vue-router](https://router.vuejs.org/) を使用しているため、Vue Router にすでに慣れている場合は、これまでの知識を Ionic Vue のナビゲーションに適用できます。先ほど述べたルータの設定を見てみましょう。`router/index.ts` で次のように表示されます。
 
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
@@ -153,14 +152,14 @@ export default router;
 ```
 
 :::note
-この例では、Ionic VueのBlank starterを使っているので、実際にみるrouteは少し違うかもしれません
+この例では、Ionic Vue の Blank starter を使っているので、実際にみる route は少し違うかもしれません
 :::
 
 ここでの設定は `vue-router` を直接使用する場合と同じですが、代わりに `@ionic/vue-router` パッケージから `createRouter` や `createWebHistory` などの依存関係をインポートする必要があります。
 
-依存関係をインポートした後、 `routes` 配列に route を宣言できます。そこから、 routerインスタンスを作成し、routeと使用するhistoryのタイプを提供できます。
+依存関係をインポートした後、 `routes` 配列に route を宣言できます。そこから、 router インスタンスを作成し、route と使用する history のタイプを提供できます。
 
-Ionic Vueでは、遅延ローディングはすぐに使うことができます。 `Home` コンポーネントをインポートする代わりに、次の操作を実行することもできます:
+Ionic Vue では、遅延ローディングはすぐに使うことができます。 `Home` コンポーネントをインポートする代わりに、次の操作を実行することもできます:
 
 ```tsx
 const routes: Array<RouteRecordRaw> = [
@@ -180,7 +179,7 @@ Now, you might be wondering: Why do we use `@` when describing the path to our c
 
 ## コンポーネントのスタイル
 
-ここでは、 `App` コンポーネントを変更する必要はあまりありません。コンテナコンポーネントの基本的な例です。ルータロジックを設定すると、指定されたURLルートに一致するコンポーネントをレンダリングするだけで済みます。すでに1つのコンポーネント/ルータが設定されているので、 `Home` コンポーネントを変更しましょう。
+ここでは、 `App` コンポーネントを変更する必要はあまりありません。コンテナコンポーネントの基本的な例です。ルータロジックを設定すると、指定された URL ルートに一致するコンポーネントをレンダリングするだけで済みます。すでに 1 つのコンポーネント/ルータが設定されているので、 `Home` コンポーネントを変更しましょう。
 
 現在、 `Home` コンポーネントはこうなっています:
 
@@ -250,14 +249,14 @@ Now, you might be wondering: Why do we use `@` when describing the path to our c
 </style>
 ```
 
-最初に確認した `App` コンポーネントと同様に、特定のIonic Frameworkコンポーネントのインポート、Vueからのインポート、Vueコンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。
+最初に確認した `App` コンポーネントと同様に、特定の Ionic Framework コンポーネントのインポート、Vue からのインポート、Vue コンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。
 
-スタイルに `scoped` を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vueアプリケーションでは、 `scoped` のついたスタイルを使用することを強くお勧めします。
+スタイルに `scoped` を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vue アプリケーションでは、 `scoped` のついたスタイルを使用することを強くお勧めします。
 
-`IonPage` はすべてのページ(route/URLを持つコンポーネント)の基本コンポーネントであり、header, title, contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。
+`IonPage` はすべてのページ(route/URL を持つコンポーネント)の基本コンポーネントであり、header, title, content コンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。
 
 :::note
-独自のページを作成する場合は、 `IonPage` をそのルート・コンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、Ionic Frameworkコンポーネントが依存するベースCSSを提供するだけでなく、トランジションが適切に動作することを保証するために重要です。
+独自のページを作成する場合は、 `IonPage` をそのルート・コンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、Ionic Framework コンポーネントが依存するベース CSS を提供するだけでなく、トランジションが適切に動作することを保証するために重要です。
 :::
 
 `IonHeader` は、ページの先頭に配置されるコンポーネントです。これは、フレックスボックスベースのレイアウトを処理する以外には、単独ではあまり機能しません。これは、`IonToolbar` や `IonSearchbar`などのコンポーネントを保持するためのものです。
@@ -290,7 +289,19 @@ Now, you might be wondering: Why do we use `@` when describing the path to our c
 </template>
 
 <script setup lang="ts">
-  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonBadge,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
 </script>
 ```
 
@@ -307,9 +318,9 @@ Now, you might be wondering: Why do we use `@` when describing the path to our c
 </ion-item>
 ```
 
-コードを見ると、 `slot` という特殊な属性があります。これは、レンダリング時に `IonCheckbox` を配置する場所を `IonItem` に知らせるためのキーです。これはVue APIではなく、Web標準APIです。また、Vue 2のslot APIとは異なります。
+コードを見ると、 `slot` という特殊な属性があります。これは、レンダリング時に `IonCheckbox` を配置する場所を `IonItem` に知らせるためのキーです。これは Vue API ではなく、Web 標準 API です。また、Vue 2 の slot API とは異なります。
 
-Ionic Frameworkの別のコンポーネントであるFAB（フローティング・アクション・ボタン）を見てみましょう。FABは、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。このFABには、FAB、FABボタンおよびアイコンの3つのコンポーネントが必要です。
+Ionic Framework の別のコンポーネントである FAB（フローティング・アクション・ボタン）を見てみましょう。FAB は、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。この FAB には、FAB、FAB ボタンおよびアイコンの 3 つのコンポーネントが必要です。
 
 ```html
 <template>
@@ -327,14 +338,29 @@ Ionic Frameworkの別のコンポーネントであるFAB（フローティン
 </template>
 
 <script setup>
-  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonBadge,
+    IonCheckbox,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
   import { add } from 'ionicons/icons';
 </script>
 ```
 
-メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
+メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot 属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
 
-次に、これにクリックハンドラを設定します。FABボタンをクリックすると、新しいページ(この後、すぐに作成します)に移動します。これを行うには、Vue RouterのナビゲーションAPIにアクセスする必要があります。これは `useRouter` パッケージから `vue-router` をインポートすることで実現できます。
+次に、これにクリックハンドラを設定します。FAB ボタンをクリックすると、新しいページ(この後、すぐに作成します)に移動します。これを行うには、Vue Router のナビゲーション API にアクセスする必要があります。これは `useRouter` パッケージから `vue-router` をインポートすることで実現できます。
 
 ```html
 <template>
@@ -358,15 +384,15 @@ Ionic Frameworkの別のコンポーネントであるFAB（フローティン
 </script>
 ```
 
-このコンポーネントファイルでは、 `useRouter` 関数をインポートしています。この関数を呼び出すと、コンポーネントからルーティングを操作することができます。つまり、Vue Routerから履歴APIにアクセスし、新しいrouteをナビゲーションスタックにプッシュすることができます。利用方法は `IonFabButton` にクリックイベントを追加し、`router.push` を呼び出すだけです。この場合、私たちは `/new` というrouteにナビゲーションします。
+このコンポーネントファイルでは、 `useRouter` 関数をインポートしています。この関数を呼び出すと、コンポーネントからルーティングを操作することができます。つまり、Vue Router から履歴 API にアクセスし、新しい route をナビゲーションスタックにプッシュすることができます。利用方法は `IonFabButton` にクリックイベントを追加し、`router.push` を呼び出すだけです。この場合、私たちは `/new` という route にナビゲーションします。
 
 ```html
 <ion-fab-button @click="() => router.push('/new')"> ... </ion-fab-button>
 ```
 
-## 新しいrouteを作成する
+## 新しい route を作成する
 
-これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しいrouteをルーターの宣言に追加する必要があります。 `router/index.ts` を開いて、 `new` のrouteを追加します。
+これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しい route をルーターの宣言に追加する必要があります。 `router/index.ts` を開いて、 `new` の route を追加します。
 
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
@@ -399,7 +425,7 @@ const router = createRouter({
 export default router;
 ```
 
-routeに `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
+route に `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
 
 新しく `NewItem.vue` ファイルを作成します。
 
@@ -427,15 +453,15 @@ routeに `/new` を追加したので、該当するコンポーネントとな
 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.
 :::
 
-ここでの内容は、 `Home` コンポーネントに似ています。異なるのは、 `IonBackButton` コンポーネントです。これは、前のrouteに戻るために使用されます。簡単でしょ?わかりました、でもページをリロードしたらどうなりますか?
+ここでの内容は、 `Home` コンポーネントに似ています。異なるのは、 `IonBackButton` コンポーネントです。これは、前の route に戻るために使用されます。簡単でしょ?わかりました、でもページをリロードしたらどうなりますか?
 
-この場合、インメモリ内から履歴は失われるため、 戻るボタンは表示されません。この問題を解決するには、 `default-href` 属性値を、履歴がない場合にナビゲートするURLに設定します。
+この場合、インメモリ内から履歴は失われるため、 戻るボタンは表示されません。この問題を解決するには、 `default-href` 属性値を、履歴がない場合にナビゲートする URL に設定します。
 
 ```html
 <ion-back-button default-href="/home"></ion-back-button>
 ```
 
-これで、アプリの履歴がない場合も、home routeに戻るための戻るボタンを表示することができます。
+これで、アプリの履歴がない場合も、home route に戻るための戻るボタンを表示することができます。
 
 ## Calling Methods on Components
 
@@ -465,7 +491,7 @@ In other framework integrations such as Ionic React, this is not needed as any `
 
 ## Adding Icons
 
-Ionic Vueには [Ionicons](https://ionic.io/ionicons/) がプリインストールされています。開発者がアプリケーションで使用できるオプションはいくつかあります。
+Ionic Vue には [Ionicons](https://ionic.io/ionicons/) がプリインストールされています。開発者がアプリケーションで使用できるオプションはいくつかあります。
 
 ### Per-Component Imports
 
@@ -486,7 +512,7 @@ Per-Component Imports is the recommended approach to using Ionicons. This involv
 </script>
 ```
 
-ここでやっていることを詳しく説明しましょう。まず、 `heart` のアイコンを `ionicons/icons` からインポートします。これにより、アイコンの適切なSVGデータがロードされます。
+ここでやっていることを詳しく説明しましょう。まず、 `heart` のアイコンを `ionicons/icons` からインポートします。これにより、アイコンの適切な SVG データがロードされます。
 
 Then we pass the icon data into the `ion-icon` component via the `icon` property.
 
@@ -511,7 +537,7 @@ Then we pass the icon data into the `ion-icon` component via the `icon` property
 
 ### グローバルインポート
 
-もう1つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
+もう 1 つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
 
 とはいえ、特定のアイコンをグローバルにロードすることに意味があるユースケースがあるかもしれません:
 
@@ -546,15 +572,15 @@ addIcons({
 
 ## ビルドの最適化
 
-Vueには、アプリケーションを調整するためのツールがいくつか用意されています。このセクションでは、Ionic Frameworkに最も関連するオプションについて説明します。
+Vue には、アプリケーションを調整するためのツールがいくつか用意されています。このセクションでは、Ionic Framework に最も関連するオプションについて説明します。
 
 ### ローカルコンポーネント登録 (推奨)
 
-デフォルトでは、Ionic Frameworkコンポーネントはローカルに登録されます。ローカルでの登録では、これらのコンポーネントはそれぞれのVueコンポーネントにインポートされ、提供されます。これは、遅延読み込みとツリーの共有がIonic Frameworkコンポーネントで正しく動作するため、推奨される方法です。
+デフォルトでは、Ionic Framework コンポーネントはローカルに登録されます。ローカルでの登録では、これらのコンポーネントはそれぞれの Vue コンポーネントにインポートされ、提供されます。これは、遅延読み込みとツリーの共有が Ionic Framework コンポーネントで正しく動作するため、推奨される方法です。
 
-この方法の1つの欠点は、Ionic Frameworkコンポーネントを何度もインポートし直すのが面倒なことです。しかし、その見返りとして得られるパフォーマンス上のメリットには価値があると考えています。
+この方法の 1 つの欠点は、Ionic Framework コンポーネントを何度もインポートし直すのが面倒なことです。しかし、その見返りとして得られるパフォーマンス上のメリットには価値があると考えています。
 
-また、ローカルに登録されたコンポーネントはサブコンポーネントでは使用できません。サブコンポーネントで使用するためには、Ionic Frameworkコンポーネントを再インポートする必要があります。
+また、ローカルに登録されたコンポーネントはサブコンポーネントでは使用できません。サブコンポーネントで使用するためには、Ionic Framework コンポーネントを再インポートする必要があります。
 
 ローカルコンポーネント登録の仕組みを見てみましょう:
 
@@ -581,9 +607,9 @@ Note that since we are registering these components locally, neither `IonPage` n
 
 ### グローバルコンポーネント登録
 
-コンポーネントを登録するためのもう1つのオプションは、グローバル登録を使用することです。グローバル登録には、 `main.ts` で使用するコンポーネントをインポートし、Vueアプリインスタンスで`component` メソッドを呼び出すことが含まれます。
+コンポーネントを登録するためのもう 1 つのオプションは、グローバル登録を使用することです。グローバル登録には、 `main.ts` で使用するコンポーネントをインポートし、Vue アプリインスタンスで`component` メソッドを呼び出すことが含まれます。
 
-これにより、VueアプリにIonic Frameworkコンポーネントを追加するのは簡単になりますが、グローバル登録は理想的ではありません。Vueのドキュメントを引用すると、「Webpackなどのビルドシステムを使用している場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントの使用を停止しても、最終ビルドに含めることができます。これにより、ユーザーがダウンロードしなければならないJavaScriptの量が不必要に増加します」とあります。
+これにより、Vue アプリに Ionic Framework コンポーネントを追加するのは簡単になりますが、グローバル登録は理想的ではありません。Vue のドキュメントを引用すると、「Webpack などのビルドシステムを使用している場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントの使用を停止しても、最終ビルドに含めることができます。これにより、ユーザーがダウンロードしなければならない JavaScript の量が不必要に増加します」とあります。
 
 グローバルコンポーネント登録の仕組みを見てみましょう:
 
@@ -614,13 +640,13 @@ app.component('ion-page', IonPage);
 </script>
 ```
 
-上の例では、 `IonPage` コンポーネントと `IonPage` コンポーネントを使用しています。これらを使用するには、まず `main.ts` の `@ionic/vue` からインポートします。次に、appインスタンスで `component` メソッドを呼び出し、タグ名とコンポーネント定義を渡します。これを行うと、各Vueコンポーネントにコンポーネントをインポートしなくても、アプリケーションの残りの部分でコンポーネントを使用できます。
+上の例では、 `IonPage` コンポーネントと `IonPage` コンポーネントを使用しています。これらを使用するには、まず `main.ts` の `@ionic/vue` からインポートします。次に、app インスタンスで `component` メソッドを呼び出し、タグ名とコンポーネント定義を渡します。これを行うと、各 Vue コンポーネントにコンポーネントをインポートしなくても、アプリケーションの残りの部分でコンポーネントを使用できます。
 
 詳細については、<a href="https://v3.vuejs.org/guide/component-registration.html#global-registration" target="_blank" rel="noopener noreferrer">Global Registration Vue Documentation</a> のドキュメントを参照してください。
 
-### JavaScriptのプリフェッチ
+### JavaScript のプリフェッチ
 
-デフォルトでは、Vue CLIはアプリケーション内のJavaScriptのプリフェッチ・ヒントを自動的に生成します。プリフェッチでは、ブラウザのアイドル時間を利用して、ユーザーが近い将来にアクセスする可能性のある文書をダウンロードします。ユーザーがプリフェッチされたドキュメントを必要とするページにアクセスすると、ブラウザのキャッシュからすぐに提供できます。
+デフォルトでは、Vue CLI はアプリケーション内の JavaScript のプリフェッチ・ヒントを自動的に生成します。プリフェッチでは、ブラウザのアイドル時間を利用して、ユーザーが近い将来にアクセスする可能性のある文書をダウンロードします。ユーザーがプリフェッチされたドキュメントを必要とするページにアクセスすると、ブラウザのキャッシュからすぐに提供できます。
 
 プリフェッチは帯域幅を消費するため、大規模なアプリケーションを使用している場合は無効にすることをお勧めします。これを行うには、`vue.config.js`ファイルを変更または作成します:
 
@@ -654,7 +680,7 @@ ionic cap add ios
 ionic cap add android
 ```
 
-iOSとAndroidのプロジェクトを開いたり、ビルド、実行するのに、ネイティブのIDE(Xcode と Android Studio)を使います:
+iOS と Android のプロジェクトを開いたり、ビルド、実行するのに、ネイティブの IDE(Xcode と Android Studio)を使います:
 
 ```shell
 ionic cap open ios
@@ -663,7 +689,7 @@ ionic cap open android
 
 詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
 
-次に、 [すべての利用可能なAPIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
+次に、 [すべての利用可能な APIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
 
 ```html
 <template>
@@ -700,8 +726,8 @@ ionic cap open android
 
 ## 次にすること
 
-このガイドでは、Ionic Vueアプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としてのCapacitorの紹介について説明した。VueとCapacitorを使って完全なIonic Frameworkアプリを構築するには、我々の [First App guide](your-first-app.md) をご覧ください。
+このガイドでは、Ionic Vue アプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としての Capacitor の紹介について説明した。Vue と Capacitor を使って完全な Ionic Framework アプリを構築するには、我々の [First App guide](your-first-app.md) をご覧ください。
 
-Ionic Frameworksのコンポーネントの詳細については、 [component API pages](https://ionicframework.com/docs/components) を参照してください。Vueの詳細については、 [Vue Docs](https://v3.vuejs.org/) を参照のこと。ネイティブ機能の構築を続けるには、[Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
+Ionic Frameworks のコンポーネントの詳細については、 [component API pages](https://ionicframework.com/docs/components) を参照してください。Vue の詳細については、 [Vue Docs](https://v3.vuejs.org/) を参照のこと。ネイティブ機能の構築を続けるには、[Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
 
 アプリ構築をお楽しみください! 🎉
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
index 4f02bd9813c..18aee0b6c25 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
@@ -431,7 +431,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu
 | 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.                                          |
+| 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.                                                 |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
index 02e5e8ab98f..6e8658b964c 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
@@ -168,7 +168,7 @@ Next, remove the `ExploreContainer` node from the HTML markup in the `template`.
 <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 setup>`  tag to include the Camera icon as well as some of the Ionic components we'll use shortly:
+We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the `<script setup>` 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';
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
index 8de9fdfdcd4..62f3b88568e 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
@@ -38,7 +38,7 @@ export const usePhotoGallery = () => {
   return {
     takePhoto,
   };
-}
+};
 ```
 
 Our `usePhotoGallery` function exposes a method called takePhoto, which in turn calls the Capacitor Camera API's `getPhoto` method.
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index aefdfd7842f..dcef2834d9a 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -19,7 +19,9 @@ module.exports = function (context, options) {
        * @param {*} isCurrentVersion Whether or not this is the current version of the docs
        */
       const generateMarkdownForVersion = async (version, npmTag, isCurrentVersion) => {
-        const response = isCurrentVersion ? await fetch(`https://raw.githubusercontent.com/ionic-jp/ionic-docs/main/scripts/data/translated-api.json`) : await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
+        const response = isCurrentVersion
+          ? await fetch(`https://raw.githubusercontent.com/ionic-jp/ionic-docs/main/scripts/data/translated-api.json`)
+          : await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`);
         const { components } = await response.json();
 
         const names = components.map((component) => component.tag.slice(4));
diff --git a/src/translate/.detection/cli/build.readme.md b/src/translate/.detection/cli/build.readme.md
index 7de5f855455..5f6c540c109 100644
--- a/src/translate/.detection/cli/build.readme.md
+++ b/src/translate/.detection/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
diff --git a/src/translate/.detection/cli/capacitor-add.readme.md b/src/translate/.detection/cli/capacitor-add.readme.md
index 6a1ecf8bc10..464a4fb5a49 100644
--- a/src/translate/.detection/cli/capacitor-add.readme.md
+++ b/src/translate/.detection/cli/capacitor-add.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor add` will do the following:
+
 - Install the Capacitor platform package
-- Copy the native platform template into your project
\ No newline at end of file
+- Copy the native platform template into your project
diff --git a/src/translate/.detection/cli/capacitor-build.readme.md b/src/translate/.detection/cli/capacitor-build.readme.md
index 0ccb955a383..ecbb4a9e00a 100644
--- a/src/translate/.detection/cli/capacitor-build.readme.md
+++ b/src/translate/.detection/cli/capacitor-build.readme.md
@@ -1,8 +1,9 @@
 `ionic capacitor build` will do the following:
+
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
diff --git a/src/translate/.detection/cli/capacitor-copy.readme.md b/src/translate/.detection/cli/capacitor-copy.readme.md
index 2e5ddd1f0e7..ad813a2f858 100644
--- a/src/translate/.detection/cli/capacitor-copy.readme.md
+++ b/src/translate/.detection/cli/capacitor-copy.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor copy` will do the following:
+
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
+- Copy web assets to Capacitor native platform(s)
diff --git a/src/translate/.detection/cli/capacitor-open.readme.md b/src/translate/.detection/cli/capacitor-open.readme.md
index 6a4f8a5eeba..c52c1f44711 100644
--- a/src/translate/.detection/cli/capacitor-open.readme.md
+++ b/src/translate/.detection/cli/capacitor-open.readme.md
@@ -1,2 +1,3 @@
 `ionic capacitor open` will do the following:
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
+
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
diff --git a/src/translate/.detection/cli/capacitor-run.readme.md b/src/translate/.detection/cli/capacitor-run.readme.md
index a17e32b9a99..56a76e0d464 100644
--- a/src/translate/.detection/cli/capacitor-run.readme.md
+++ b/src/translate/.detection/cli/capacitor-run.readme.md
@@ -1,4 +1,5 @@
 `ionic capacitor run` will do the following:
+
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -6,4 +7,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
diff --git a/src/translate/.detection/cli/capacitor-sync.readme.md b/src/translate/.detection/cli/capacitor-sync.readme.md
index 4ab54b5269d..403ecdf9af3 100644
--- a/src/translate/.detection/cli/capacitor-sync.readme.md
+++ b/src/translate/.detection/cli/capacitor-sync.readme.md
@@ -1,5 +1,6 @@
 `ionic capacitor sync` will do the following:
+
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/.detection/cli/capacitor-update.readme.md b/src/translate/.detection/cli/capacitor-update.readme.md
index 6941a9bbe77..6691448d373 100644
--- a/src/translate/.detection/cli/capacitor-update.readme.md
+++ b/src/translate/.detection/cli/capacitor-update.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor update` will do the following:
+
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/.detection/cli/completion.readme.md b/src/translate/.detection/cli/completion.readme.md
index c614f27c143..98969ac91c0 100644
--- a/src/translate/.detection/cli/completion.readme.md
+++ b/src/translate/.detection/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
diff --git a/src/translate/.detection/cli/config-get.readme.md b/src/translate/.detection/cli/config-get.readme.md
index ecfdc6708ac..b993225035b 100644
--- a/src/translate/.detection/cli/config-get.readme.md
+++ b/src/translate/.detection/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
diff --git a/src/translate/.detection/cli/config-set.readme.md b/src/translate/.detection/cli/config-set.readme.md
index fd2916c6e27..4cfe7872088 100644
--- a/src/translate/.detection/cli/config-set.readme.md
+++ b/src/translate/.detection/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
diff --git a/src/translate/.detection/cli/config-unset.readme.md b/src/translate/.detection/cli/config-unset.readme.md
index 9b7c09a8699..7dca73c33a4 100644
--- a/src/translate/.detection/cli/config-unset.readme.md
+++ b/src/translate/.detection/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
diff --git a/src/translate/.detection/cli/cordova-build.readme.md b/src/translate/.detection/cli/cordova-build.readme.md
index 774bb3c3bab..5859a7e2658 100644
--- a/src/translate/.detection/cli/cordova-build.readme.md
+++ b/src/translate/.detection/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
diff --git a/src/translate/.detection/cli/cordova-compile.readme.md b/src/translate/.detection/cli/cordova-compile.readme.md
index 947b914334f..f234fefe548 100644
--- a/src/translate/.detection/cli/cordova-compile.readme.md
+++ b/src/translate/.detection/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova compile` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-emulate.readme.md b/src/translate/.detection/cli/cordova-emulate.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/.detection/cli/cordova-emulate.readme.md
+++ b/src/translate/.detection/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/.detection/cli/cordova-platform.readme.md b/src/translate/.detection/cli/cordova-platform.readme.md
index f65aea27395..1b289c0ac8f 100644
--- a/src/translate/.detection/cli/cordova-platform.readme.md
+++ b/src/translate/.detection/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-plugin.readme.md b/src/translate/.detection/cli/cordova-plugin.readme.md
index b3ea63900d4..162ba073340 100644
--- a/src/translate/.detection/cli/cordova-plugin.readme.md
+++ b/src/translate/.detection/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova plugin` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-prepare.readme.md b/src/translate/.detection/cli/cordova-prepare.readme.md
index 90b7d18e711..6ae022dcaa0 100644
--- a/src/translate/.detection/cli/cordova-prepare.readme.md
+++ b/src/translate/.detection/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
diff --git a/src/translate/.detection/cli/cordova-requirements.readme.md b/src/translate/.detection/cli/cordova-requirements.readme.md
index 04bdf9cef01..edf47772b1f 100644
--- a/src/translate/.detection/cli/cordova-requirements.readme.md
+++ b/src/translate/.detection/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova requirements` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-resources.readme.md b/src/translate/.detection/cli/cordova-resources.readme.md
index 730573a47c3..e93fdd8a890 100644
--- a/src/translate/.detection/cli/cordova-resources.readme.md
+++ b/src/translate/.detection/cli/cordova-resources.readme.md
@@ -11,5 +11,6 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
+
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
diff --git a/src/translate/.detection/cli/cordova-run.readme.md b/src/translate/.detection/cli/cordova-run.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/.detection/cli/cordova-run.readme.md
+++ b/src/translate/.detection/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/.detection/cli/generate.readme.md b/src/translate/.detection/cli/generate.readme.md
index 30de99a2484..042f64a7a4c 100644
--- a/src/translate/.detection/cli/generate.readme.md
+++ b/src/translate/.detection/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
- - For a full list of available types, use `npx ng g --help`
- - For a list of options for a types, use `npx ng g <type> --help`
+- For a full list of available types, use `npx ng g --help`
+- For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
+To test a generator before file modifications are made, use the `--dry-run` option.
diff --git a/src/translate/.detection/cli/git-remote.readme.md b/src/translate/.detection/cli/git-remote.readme.md
index b4caf425642..58347c24535 100644
--- a/src/translate/.detection/cli/git-remote.readme.md
+++ b/src/translate/.detection/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/.detection/cli/info.readme.md b/src/translate/.detection/cli/info.readme.md
index 03f86bc2907..d633e373984 100644
--- a/src/translate/.detection/cli/info.readme.md
+++ b/src/translate/.detection/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
diff --git a/src/translate/.detection/cli/init.readme.md b/src/translate/.detection/cli/init.readme.md
index 98b3118bed5..918620be789 100644
--- a/src/translate/.detection/cli/init.readme.md
+++ b/src/translate/.detection/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
diff --git a/src/translate/.detection/cli/integrations-disable.readme.md b/src/translate/.detection/cli/integrations-disable.readme.md
index 5418badf555..b4f4a38bdd0 100644
--- a/src/translate/.detection/cli/integrations-disable.readme.md
+++ b/src/translate/.detection/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
+Integrations, such as Cordova, can be disabled with this command.
diff --git a/src/translate/.detection/cli/integrations-enable.readme.md b/src/translate/.detection/cli/integrations-enable.readme.md
index 945fcbbb226..76526785eaa 100644
--- a/src/translate/.detection/cli/integrations-enable.readme.md
+++ b/src/translate/.detection/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
\ No newline at end of file
+Integrations can be re-added with the `--add` option.
diff --git a/src/translate/.detection/cli/integrations-list.readme.md b/src/translate/.detection/cli/integrations-list.readme.md
index 044dd455e0e..d075d211e95 100644
--- a/src/translate/.detection/cli/integrations-list.readme.md
+++ b/src/translate/.detection/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
+- To disable integrations, see `ionic integrations disable --help`
diff --git a/src/translate/.detection/cli/link.readme.md b/src/translate/.detection/cli/link.readme.md
index e621a2e948a..f5a96a51946 100644
--- a/src/translate/.detection/cli/link.readme.md
+++ b/src/translate/.detection/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/live-update-add.readme.md b/src/translate/.detection/cli/live-update-add.readme.md
index bc0316117d7..d2aebb869cd 100644
--- a/src/translate/.detection/cli/live-update-add.readme.md
+++ b/src/translate/.detection/cli/live-update-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for bo
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
diff --git a/src/translate/.detection/cli/live-update-configure.readme.md b/src/translate/.detection/cli/live-update-configure.readme.md
index 1d8c7504c8f..d4bc34cffba 100644
--- a/src/translate/.detection/cli/live-update-configure.readme.md
+++ b/src/translate/.detection/cli/live-update-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Live Update plugin (`cordov
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
diff --git a/src/translate/.detection/cli/login.readme.md b/src/translate/.detection/cli/login.readme.md
index 0fbe95d2ae8..ce63bb58ac0 100644
--- a/src/translate/.detection/cli/login.readme.md
+++ b/src/translate/.detection/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/logout.readme.md b/src/translate/.detection/cli/logout.readme.md
index 4122a7422e5..540a69a156c 100644
--- a/src/translate/.detection/cli/logout.readme.md
+++ b/src/translate/.detection/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
+If you need to create an Ionic account, use `ionic signup`.
diff --git a/src/translate/.detection/cli/repair.readme.md b/src/translate/.detection/cli/repair.readme.md
index dbb18055c3a..9b01e9d40d8 100644
--- a/src/translate/.detection/cli/repair.readme.md
+++ b/src/translate/.detection/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
diff --git a/src/translate/.detection/cli/serve.readme.md b/src/translate/.detection/cli/serve.readme.md
index b08bf89fccf..a9b7bd7d2af 100644
--- a/src/translate/.detection/cli/serve.readme.md
+++ b/src/translate/.detection/cli/serve.readme.md
@@ -4,4 +4,4 @@ By default, `ionic serve` boots up a development server on `localhost`. To serve
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
diff --git a/src/translate/.detection/cli/signup.readme.md b/src/translate/.detection/cli/signup.readme.md
index 4761dfdf982..82d215181a5 100644
--- a/src/translate/.detection/cli/signup.readme.md
+++ b/src/translate/.detection/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/ssh-setup.readme.md b/src/translate/.detection/cli/ssh-setup.readme.md
index f6ed6f93cb8..b95050beae9 100644
--- a/src/translate/.detection/cli/ssh-setup.readme.md
+++ b/src/translate/.detection/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/ssh-use.readme.md b/src/translate/.detection/cli/ssh-use.readme.md
index b9a78d4db3e..4714fa29928 100644
--- a/src/translate/.detection/cli/ssh-use.readme.md
+++ b/src/translate/.detection/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
diff --git a/src/translate/.detection/cli/ssl-generate.readme.md b/src/translate/.detection/cli/ssl-generate.readme.md
index c49644b96ef..aea3ec98cc5 100644
--- a/src/translate/.detection/cli/ssl-generate.readme.md
+++ b/src/translate/.detection/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
diff --git a/src/translate/.detection/cli/start.readme.md b/src/translate/.detection/cli/start.readme.md
index 45b725f705d..9b3d3b471e4 100644
--- a/src/translate/.detection/cli/start.readme.md
+++ b/src/translate/.detection/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 1fbd6aab841..986eeabbc94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,3 +1,2 @@
-
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
index deb9dde4602..90e1ee9b77e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,4 +1,3 @@
-
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
index 420a0d400d4..11db0748e34 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
index fb2004ca29c..a21a70fb083 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,4 +1,3 @@
-
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
index 56e36fe9053..41472b2e411 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1,2 +1 @@
-
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
index b18059b0829..8f50b6279c0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
-
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
+
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
index 8bc209c7e54..e11ad80b4a3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,4 +1,3 @@
-
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
index 18f742e5108..0303990f06b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,4 +1,3 @@
-
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 76387367a61..23e8c973bf2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index 822209a4a72..e27b0ba6540 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1,2 +1 @@
-
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index 93a3f290203..c31c989a3d3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,4 +1,3 @@
-
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 3592aee1757..64f0fad3191 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
index 2eb94af7221..a82b309d78c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
index 0c671a0c2d0..8e414578f93 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
index 48c289cc3fb..5f6722050b0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1,2 +1 @@
-
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
index 5672e0b2213..2813a5d498b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index d7ef092bae5..95a88837497 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index c331a7d05f5..ef9f2968a8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index 6d2e7862965..e84626aea1d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,3 +1,2 @@
-
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
index c1b58f99edf..e89f74940ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1,3 +1 @@
-
-
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
index 0db391fddba..aff2e2cb4d6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1,2 +1 @@
-
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
index 12d31c41dd7..bb919529254 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1,2 +1 @@
-
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
index 87dd87d5765..fbde6778edf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to read and write app preferences
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
index c0210b3f9e5..c2d7f1730a0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,4 +1,3 @@
-
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
index 08cfe48a452..6b4fa2e5c61 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,4 +1,3 @@
-
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
index 1e612327b09..6213470725d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1,2 +1 @@
-
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
index 79bd464667d..b3fd1055a9a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
index af28dc677bd..41c425d19c7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1,2 +1 @@
-
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
index f0017f9025d..4197b26f800 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1,2 +1 @@
-
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
index d1ce36553bc..4c69face47f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,3 +1,2 @@
-
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
index 48d67747675..b066c65401a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,3 +1,2 @@
-
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
index 62278126195..3a4a3e352cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,4 +1,3 @@
-
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
index a43e7c719b2..b1cfb8cd04b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,3 +1,2 @@
-
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
index 90ce8edd2ad..ee73844b3c8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,3 +1,2 @@
-
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
index bc94608b2c6..9ab2fed769b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1,2 +1 @@
-
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
index 11775820229..52465e564f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,4 +1,3 @@
-
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
index ebe978c896a..33af83938f9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1,2 +1 @@
-
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index d40a29ab2a1..747418e7857 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,4 +1,3 @@
-
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index 9f16d6d8f42..b84c09c835f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
+This plugin allows you to save base64 data as a png image into the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
index 06a0311c510..340db120adf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
@@ -1,2 +1 @@
-
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
index da71524f3d1..2c657416aef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
index 0725aba40ce..bd325268e71 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1,2 +1 @@
-
 BioCatch SDK Cordova support
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index 6be6e7318ae..b1b5ec0f81c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,3 +1,2 @@
-
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
index 4818853ac89..8d23815cab0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
index 52d671c0034..f0f05bc6a1f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,3 +1,2 @@
-
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
index b6cae0f21fd..6f149bce706 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1,2 +1 @@
-
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index 639b85fee5c..c0281f22a59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3ae195d12de..3b80e3d0ecd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,4 +1,3 @@
-
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index f3579d8e616..d0939b5fde7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
index 29af8d97385..9921b18062b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,9 +1,8 @@
-
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
- Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
- For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
index b9836ebd4c6..a222a2efbe7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1,2 +1 @@
-
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
index 51b06d0cc15..d97dd2af981 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,4 +1,3 @@
-
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
index 71995e79760..b925da2342c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1,2 +1 @@
-
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
index bf83901883b..f03b8b179a9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1,2 +1 @@
-
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
index 7e5a437d1d3..7b8674b3871 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1,2 +1 @@
-
 This plugin provides build information.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
index 5a83eede868..515f629e662 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,5 +1,3 @@
-
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
index 16d031664c6..b0ecb7bb40b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,3 +1,2 @@
-
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
index a2b5e1bab30..76f6447e69b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1,2 +1 @@
-
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
index d68a0a44b0e..2914b087a64 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,3 +1,2 @@
-
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
index 31cf59dc30b..9b06352e407 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,4 +1,3 @@
-
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
index a354d9c7925..aa5cc82125d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,12 +1,13 @@
-
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
+
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
+
 inside of the <platform name='ios> section
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
index 76c58120b44..752a6da1f4f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
-
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
+
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
index 8518bffadeb..953ca23cf89 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,6 +1,5 @@
 Plugin for using Apple's ClassKit framework.
 
-
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
index f6b4973e48e..5b82513228d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
index 3176d5f4017..603b2b8f6b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1,3 +1 @@
-
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 939c06b2441..7e3928e3cd5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1,2 +1 @@
-
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
index 3688eedbcac..9d0f8be2ea1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1,2 +1 @@
-
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
index 9cf894081e8..b03bd091c4c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,4 +1,3 @@
-
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index 4bb2367cd5c..b32e2c7cacd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1,2 +1 @@
-
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
index 0243a89bfa0..b7061033770 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1,2 +1 @@
-
 Access and manage Contacts on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index 4a13e8229fa..ee32121391a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1,2 +1 @@
-
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
index 6c659180b50..9faa50aaed7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
\ No newline at end of file
+Crops images
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 5c24399bc42..9116ddca6eb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1,2 +1 @@
-
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
index 5eed8b85866..d2632a61abf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1,2 +1 @@
-
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
index 08fbb92c20c..cabc3d4ff44 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
index bffae754b58..8943e5b9ca4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1,2 +1 @@
-
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
index ad508847c3e..f11c48fa910 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1,3 +1 @@
-
-
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
index abe72e3b6c0..4dbbb06d71c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
index 02c713e2138..e96364431a7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
index c6ef6980695..3dbd2dec8e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
@@ -1,2 +1 @@
-
 Access information about the underlying device and platform.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
index 893058bc4eb..ac9d8279b92 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1,2 +1 @@
-
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
index a90f9cfbe85..64c6b6393fe 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1,2 +1 @@
-
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
index 11ac16aafc6..f988d884a0c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
index 7eac80f6cff..3a08f9c811c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,4 +1,2 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
index 29d32018802..03cd028ccfd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1,2 +1 @@
-
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
index 7e39f62d9b0..605e7b14d41 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1,2 +1 @@
-
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
index f15e01b1143..dad89444163 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1,3 +1 @@
-
 This plugin is designed to support downloading files using Android DownloadManager.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
index 4176ac2a7b9..a305d027409 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1,4 +1 @@
-
-
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
index 81259d50cc1..d0554945c4c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,5 +1,3 @@
-
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index 40349a8306b..b76b54f6046 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1,2 +1 @@
-
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 16c3ea63d2a..043375415ac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-
 Retrieves additional device information from the Device Hardware
- - memory
- - cpumhz
- - totalstorage
- - freestorage
+
+- memory
+- cpumhz
+- totalstorage
+- freestorage
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
index 12d214e6d38..b140e97cb32 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,4 +1,3 @@
-
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
index df9af63f74b..93e5e887491 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,11 +1,10 @@
-
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
- To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -30,6 +29,7 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
+
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
+
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-
 #### Android Install
+
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
-
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
index f3790772c17..dbbb3b72132 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1,2 +1 @@
-
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
index b4553ad9baf..4bf1bdf418f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
index 4fdfccbf60d..f1b5408277a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1,2 +1 @@
-
 Simple file encryption for Cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
index ba26e51b8cd..a719c048fe4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1,2 +1 @@
-
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
index c9445ac1ce7..1f3eeb42d5a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1,3 +1 @@
-
-
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
index b33dc3c0f97..3616dbd3573 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
index c8ba532eae9..4770407e60d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to upload and download files.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
index 1e61b343d6b..28bc40d6e90 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
-
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
+
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
- This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
- The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
- Although most of the plugin code was written when an earlier spec was current: http:
-  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
+This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+Although most of the plugin code was written when an earlier spec was current: http:
+//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+//dev.w3.org/2009/dap/file-system/file-writer.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index f87a05030d7..ce125266039 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -6,7 +5,9 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
+
+For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
+
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 4da15cc2ef6..410431f731b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
index 45a214eee3a..38a8b24123d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
index 2d8b3effb06..a1c32524c76 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1,2 +1 @@
-
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index 2ad1e2109bd..b88fed62436 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1,2 +1 @@
-
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 6efc1b8ae10..2cfe3a22194 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -10,6 +9,7 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
+
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 5bdcf74de11..6a18f9fcf39 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
index 433e365a6a5..d1f83c84392 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
index e044eb6dc66..aa17963327a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,3 +1,2 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
index 25001f76e05..6c21f982616 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1,2 +1 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index 80ef2d51635..e57049202bf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1,2 +1 @@
-
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
index 6d68d07b0fe..563b7c87954 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,9 +1,8 @@
-
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into ```config.xml```:
+For android API 28+, the following xml snippet should be inserted into `config.xml`:
 
 ```
 ...
@@ -12,4 +11,4 @@ For android API 28+, the following xml snippet should be inserted into ```config
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
index 0cd5a4278d8..5987065177c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1,2 +1 @@
-
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
index a56ed3a0093..5dda6c71ade 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,3 +1,2 @@
-
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
index 6e993e8f8a8..2f83489f5fb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
index 8d55357a600..0391a010ff3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,12 +1,11 @@
-
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
- This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
+
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
index d1a3161e0b4..840cf8d4fb5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1,2 +1 @@
-
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
index 1c759160579..8ebef774b81 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
-
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
+
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
index 42ea1211a02..0e715c64736 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1,2 +1 @@
-
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index e40dfc4db5e..a10f89326aa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
index fb0392b4d72..676268db9d5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
\ No newline at end of file
+Read Gyroscope sensor data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
index 9cc2bc1f297..6f496fc37ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
@@ -1,2 +1 @@
-
 HCE Cordova Wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
index ad82eb6b43a..271a47a93b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
index dbd72bc8324..466271d3cba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,3 +1,2 @@
-
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
index 349af915eac..f49780a8921 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
@@ -1,2 +1 @@
-
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
index e49b6cbc6ca..2ba246ebaf0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
index 40ad52f5a5d..3fcae7e8052 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
index 4421569a8f0..14a21342440 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1,2 +1 @@
-
-Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
+Embedded httpd for Cordova apps. Light weight HTTP server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index d223513c705..8a8ae830783 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
index ee369f17322..accd867793f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides functions for working with iBeacons.
 
- The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
index 75f3775bff1..8f9c76acd94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,4 +1,3 @@
-
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
index 40b02d55e6b..88fa3c7bf5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin For Image Resize
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
index f699597a628..e6e57be76e7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,4 +1,3 @@
-
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 87d0037b909..0485062862e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
\ No newline at end of file
+Launches in app Browser
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index 5bcd6494c48..b6be39d32c9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,25 +1,24 @@
-
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|  | ios | android | win-8 | win-10/uwp | mac |
-|--|--|--|--|--|--|
-| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
-| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
-| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
-| downloadable content | ✅ |   |   |   | ✅ |
-| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
+|                      | ios | android | win-8 | win-10/uwp | mac |
+| -------------------- | --- | ------- | ----- | ---------- | --- |
+| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
+| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
+| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
+| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
+| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
+| downloadable content | ✅  |         |       |            | ✅  |
+| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
 
 Supports:
 
- - **iOS** version 7.0 or higher.
- - **Android** version 2.2 (API level 8) or higher
-   - with Google Play client version 3.9.16 or higher
- - **Windows** Store/Phone 8.1 or higher
- - **Windows 10 Mobile**
- - **macOS** version 10
- - **Xbox One**
-   - (and any platform supporting Microsoft's UWP)
+- **iOS** version 7.0 or higher.
+- **Android** version 2.2 (API level 8) or higher
+  - with Google Play client version 3.9.16 or higher
+- **Windows** Store/Phone 8.1 or higher
+- **Windows 10 Mobile**
+- **macOS** version 10
+- **Xbox One**
+  - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 5fbffa5c65b..143985e329b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1,2 +1 @@
-
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
index 32b56cbab41..8e174f56973 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,5 +1,3 @@
-
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
index 365932222f7..c28c9dcb463 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
index 77bbacfc378..680fb4b5caa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1,2 +1 @@
-
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
index 93b6eee3eb3..685bec69d99 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
-
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
+
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
index 3cecc84de9e..6526cd4d4ff 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 6fe62b6c53a..1c68245f996 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,4 +1,3 @@
-
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index b8ea2b47c9e..708074a0ab2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1,2 +1 @@
-
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
index 8a75e4fc94f..03fc8b67cb1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,3 +1,2 @@
-
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
index 2895fffa54c..ed15dd96b1c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1,2 +1 @@
-
 Implementation of the JINS MEME SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
index 9fde9b57805..be8555b753a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
index 1ccf061fc98..b86b22652c5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,4 +1,3 @@
-
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index cca62d8b43e..d2e63dd18d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,3 +1,2 @@
-
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
index 7764ef64d16..ae817d52f6d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,4 +1,3 @@
-
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
index c28100fc7ff..013e0cacbed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,4 +1,3 @@
-
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
index 125e1108746..a272d33f4e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,3 +1,2 @@
-
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 0306a39d956..105b197495b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
index 942352f7056..2f3437ec5c2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,5 +1,4 @@
-
-
 Assists in leaving user reviews/ratings in the App Stores.
+
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
index 6cc5413db8f..fc39816081a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1,2 +1 @@
-
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
index 2085ded77a8..f6123e51703 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1,2 +1 @@
-
 This plugin to create local backup
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
index 82c183d6fee..6cfdd379643 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
index 99d60417c8f..ed018edb499 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index 539dbf0c5b4..e67243449ae 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
index 55292ec8b1b..bead6de72c2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1,2 +1 @@
-
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
index 9e5778eab23..ca5ec6a2525 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
index 281c8d456ad..0fa09982e5b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
@@ -1,2 +1 @@
-
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
index 92cacd40a12..69b6b0ebf1b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
index 9d07585f502..f67d2174eea 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
index 13edc56092e..63f05dbf100 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
index 75e25a2c230..f3eb05040cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index b8584c4e0ae..c159f3801cb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1,2 +1 @@
-
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index e9f6b965a20..0d06c413e79 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,3 +1,2 @@
-
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index 30c9e83dc6d..d71ef31d811 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,4 +1,3 @@
-
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
index 72ffec61b13..0390d514207 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,5 +1,4 @@
-
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index ba01c25cf88..1a4f27e7fd5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1,2 +1 @@
-
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
index e5465ae0a91..04fe4a3bf33 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,4 +1,3 @@
-
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
index b37886b1b59..7bbca215ca4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
\ No newline at end of file
+Native Audio Playback
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 3e9b7575290..5468f7f9077 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
index cd2d3dab18a..faea3298df2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1,3 +1 @@
-
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index edd6e9c39ee..266ae69275a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1,2 +1 @@
-
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 7bcffb8dee4..9a2e0d43722 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,3 +1,2 @@
-
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
index ad0db3ff5c9..4e29c4eeb6a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1,2 +1 @@
-
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
index ab6d1bf9d08..837c7e475a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1,2 +1 @@
-
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
index 5ad7357168c..9a5f7a35d4e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
index 92837035391..a81214659db 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
-
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
+
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
index 4e1c4bcb571..9632b1f0155 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,5 +1,4 @@
-
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
index 5ddc2066105..dd7010c8876 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,4 +1,3 @@
-
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -6,11 +5,13 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
+
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
+
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -65,5 +66,4 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-`$ chmod +x hooks/copy_android_notification_icons.js`
-
+   `$ chmod +x hooks/copy_android_notification_icons.js`
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 0be0100f96d..11e9c0ca52c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1,2 +1 @@
-
-Plugin to open native screens of iOS/android settings
\ No newline at end of file
+Plugin to open native screens of iOS/android settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
index 077568f6f76..c59128571c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1,2 +1 @@
-
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
index 97823a256c7..4caf38450f4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1,2 +1 @@
-
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
index e45425cee51..4f099e14ed4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 0b14edafe4a..22692f6e35d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
index c6fcd66be8f..81ece364e1f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,3 +1,2 @@
-
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index dd840c8b485..1510b50b7b6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,3 +1,2 @@
-
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
index 1f20587b9e3..77e517bcbd9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,4 +1,3 @@
-
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
index 642ad87c3ba..c4ca80fa312 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
index 6ea7514c5fa..6596e0e430f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
index 2c12503cd71..d1bb01fec7e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,6 +1,3 @@
-
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
-
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
index fa7a099a33f..9a9cc59bc6c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Pinterest
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
index c42c478d81d..b1cab91f830 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1,2 +1 @@
-
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
index eaca280cad2..4ed7aff21ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,3 +1,2 @@
-
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
index 779cd5d6ec2..1985ca44851 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,3 +1,2 @@
-
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
index 312ac4a9125..5aff311b111 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
\ No newline at end of file
+Prints documents or HTML rendered content
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 51bb27361c9..909c2ef0dbb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1,2 +1 @@
-
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
index 7f42a5bcd96..dc1a4fbbb4b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
-
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
+
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
index 5ae1db23037..a9c3464e985 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
index 464bba08731..e65c6c7edd7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
index fcc40802c3d..d9b32939ab5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,4 +1,3 @@
-
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 3dcb9304702..55b6fc63435 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,4 +1,3 @@
-
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index a90b29a29b0..505b461b09c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1,2 +1 @@
-
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
index 13214fabab4..2d13f688d77 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
@@ -1,2 +1 @@
-
 This plugin to restart android application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
index 1b4e50f1b68..9f1d179bd5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1,2 +1 @@
-
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index c635a5fd046..6153b43d685 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,4 +1,3 @@
-
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
index 416c63df2e9..a83e7487c9e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
index 15c0b85bf5f..e9b365c009a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
\ No newline at end of file
+Captures a screen shot
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
index a4c9c37f0b3..5af0e96163c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1,2 +1 @@
-
 This plugin enables sensors on Android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
index 125a3910c49..a16c1211a8c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
@@ -1,2 +1 @@
-
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
index aca58cc645a..b13d7210b0e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
index 5608715c9fa..917873665cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
\ No newline at end of file
+Handles shake gesture
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 8ab0b4dd94f..630d79ceeb0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index d7fe4d72b94..40b7e9082ef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,4 +1,3 @@
-
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index e8991e9348b..f02092735e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,7 +1,6 @@
-
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-*Source:* https://developer.apple.com/sign-in-with-apple/
+_Source:_ https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
index 52c91993c93..80e74390f46 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,4 +1,3 @@
-
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index e6270053a4a..00c77e7cdfc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,4 +1,3 @@
-
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
index 83f1f737e59..696999e2340 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,3 +1,2 @@
-
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
index eb6aaf6b11c..3af874243f1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1,2 +1 @@
-
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
index b0ba3252b25..d64c2f4cab6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
@@ -1,3 +1 @@
-
-
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
index 760be2d9030..3edd7dba0d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,4 +1,3 @@
-
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
index ccd38016353..efc07916d88 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1,2 +1 @@
-
 This plugin does speech recognition using cloud services
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
index 8623152c556..5521af0b3b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1,2 +1 @@
-
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 66329069921..97f3a5146a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
index 31117f45f87..1a5acf29e82 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
index bce7a50dba7..cbc01dcad68 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-
 Cordova plugin for authenticating with Spotify
+
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 92e4d096de7..1f34ca227ed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
index 0d19359e763..bfb4c960c5d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1,2 +1 @@
-
 Access SQLite databases on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 62c602df45a..4c8d739d81f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
index 8866094f12f..167ed6673b8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1,2 +1 @@
-
-* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
index d2df403f415..0c999e9b7e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,4 +1,3 @@
-
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
index 918f0320b25..b6a57d237ac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
-
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
+
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
index b093d14b4af..5a521be5eb5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
index 32f49f8fb59..2e8f0e8c676 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
index 373fa2e0f42..22c07237113 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1,2 +1 @@
-
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 6a1864ed364..4c4cc795164 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1,2 +1 @@
-
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 577ae87896a..8f1ca44e3ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 80ce9a5af77..2efbb060915 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
index 41e946cfc8e..b53253d0eef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
index 032d6ec13cc..cd2ff3ab709 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 81e3408cc65..40815363667 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1,2 +1 @@
-
 In-app browser that allows styling.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index a78596064d6..aea7b49108e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,4 +1,3 @@
-
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
index c7b5d6c7fba..9034d3ab1f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
index 02615a1ec9f..0bb27885878 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,4 +1,3 @@
-
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 16ead04e0ed..0fd10d23d96 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
-
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
+
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
index 8876a612197..f1dd7f71fd1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
@@ -1,2 +1 @@
-
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 1db59244ff9..032854e3607 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1,2 +1 @@
-
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 0b49755a0de..5ec8996425d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
+## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+
+## iOS Requirements
 
-This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
--
-iOS Requirements
--
 Update your Cocoapods repo before you install the plugin.
+
 ```
 $ pod repo update
 ```
--
-Browser Requirements
--
-After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
+- Browser Requirements
+- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
index 504b3c9eb24..1bf710ddbcc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 5cf251b3c8e..857e2854746 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
index 9c299395cf9..c5e46b65ea3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,4 +1,3 @@
-
-The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
index 416be944a54..f52e258035a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1,2 +1 @@
-
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
index dba5defbdd0..f82e5deb0ab 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
\ No newline at end of file
+Vibrates the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index a22e03f3945..f3e970c9efb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-
 This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
+
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
index 1ee9f14d4a0..e7f3e1b8a0b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
index 62d0e5158b6..e6bce9df776 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1,2 +1 @@
-
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
index 562d250d54f..74a4213c286 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 732d61641b6..74f478b025e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
index a2eb7545759..981c27c1eb3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1,2 +1 @@
-
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
index 639229cba09..b2e43d635c3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1,2 +1 @@
-
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index e519b6b087f..ca5fcb58975 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,4 +1,3 @@
-
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
index c85ed196728..3fef1483ebd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,5 +1,3 @@
-
-
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 65e5f92754a..17fd2049102 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1,2 +1 @@
-
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
index 33a16ff46c6..e0a91fda385 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,4 +1,3 @@
-
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
index 48620c015e9..b6d33465570 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1,2 +1 @@
-
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
index 8550752032e..6433e0021a7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
index e358d13434b..94a52e6dc07 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
diff --git a/src/translate/cli/build.readme.md b/src/translate/cli/build.readme.md
index 7de5f855455..5f6c540c109 100644
--- a/src/translate/cli/build.readme.md
+++ b/src/translate/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
diff --git a/src/translate/cli/capacitor-add.readme.md b/src/translate/cli/capacitor-add.readme.md
index 6a1ecf8bc10..464a4fb5a49 100644
--- a/src/translate/cli/capacitor-add.readme.md
+++ b/src/translate/cli/capacitor-add.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor add` will do the following:
+
 - Install the Capacitor platform package
-- Copy the native platform template into your project
\ No newline at end of file
+- Copy the native platform template into your project
diff --git a/src/translate/cli/capacitor-build.readme.md b/src/translate/cli/capacitor-build.readme.md
index 0ccb955a383..ecbb4a9e00a 100644
--- a/src/translate/cli/capacitor-build.readme.md
+++ b/src/translate/cli/capacitor-build.readme.md
@@ -1,8 +1,9 @@
 `ionic capacitor build` will do the following:
+
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
diff --git a/src/translate/cli/capacitor-copy.readme.md b/src/translate/cli/capacitor-copy.readme.md
index 2e5ddd1f0e7..ad813a2f858 100644
--- a/src/translate/cli/capacitor-copy.readme.md
+++ b/src/translate/cli/capacitor-copy.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor copy` will do the following:
+
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
+- Copy web assets to Capacitor native platform(s)
diff --git a/src/translate/cli/capacitor-open.readme.md b/src/translate/cli/capacitor-open.readme.md
index 6a4f8a5eeba..c52c1f44711 100644
--- a/src/translate/cli/capacitor-open.readme.md
+++ b/src/translate/cli/capacitor-open.readme.md
@@ -1,2 +1,3 @@
 `ionic capacitor open` will do the following:
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
+
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
diff --git a/src/translate/cli/capacitor-run.readme.md b/src/translate/cli/capacitor-run.readme.md
index a17e32b9a99..56a76e0d464 100644
--- a/src/translate/cli/capacitor-run.readme.md
+++ b/src/translate/cli/capacitor-run.readme.md
@@ -1,4 +1,5 @@
 `ionic capacitor run` will do the following:
+
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -6,4 +7,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
diff --git a/src/translate/cli/capacitor-sync.readme.md b/src/translate/cli/capacitor-sync.readme.md
index 4ab54b5269d..403ecdf9af3 100644
--- a/src/translate/cli/capacitor-sync.readme.md
+++ b/src/translate/cli/capacitor-sync.readme.md
@@ -1,5 +1,6 @@
 `ionic capacitor sync` will do the following:
+
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/cli/capacitor-update.readme.md b/src/translate/cli/capacitor-update.readme.md
index 6941a9bbe77..6691448d373 100644
--- a/src/translate/cli/capacitor-update.readme.md
+++ b/src/translate/cli/capacitor-update.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor update` will do the following:
+
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/cli/completion.readme.md b/src/translate/cli/completion.readme.md
index c614f27c143..98969ac91c0 100644
--- a/src/translate/cli/completion.readme.md
+++ b/src/translate/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
diff --git a/src/translate/cli/config-get.readme.md b/src/translate/cli/config-get.readme.md
index ecfdc6708ac..b993225035b 100644
--- a/src/translate/cli/config-get.readme.md
+++ b/src/translate/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
diff --git a/src/translate/cli/config-set.readme.md b/src/translate/cli/config-set.readme.md
index fd2916c6e27..4cfe7872088 100644
--- a/src/translate/cli/config-set.readme.md
+++ b/src/translate/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
diff --git a/src/translate/cli/config-unset.readme.md b/src/translate/cli/config-unset.readme.md
index 9b7c09a8699..7dca73c33a4 100644
--- a/src/translate/cli/config-unset.readme.md
+++ b/src/translate/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
diff --git a/src/translate/cli/cordova-build.readme.md b/src/translate/cli/cordova-build.readme.md
index 774bb3c3bab..5859a7e2658 100644
--- a/src/translate/cli/cordova-build.readme.md
+++ b/src/translate/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
diff --git a/src/translate/cli/cordova-compile.readme.md b/src/translate/cli/cordova-compile.readme.md
index 947b914334f..f234fefe548 100644
--- a/src/translate/cli/cordova-compile.readme.md
+++ b/src/translate/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova compile` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-emulate.readme.md b/src/translate/cli/cordova-emulate.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/cli/cordova-emulate.readme.md
+++ b/src/translate/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/cli/cordova-platform.readme.md b/src/translate/cli/cordova-platform.readme.md
index f65aea27395..1b289c0ac8f 100644
--- a/src/translate/cli/cordova-platform.readme.md
+++ b/src/translate/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
diff --git a/src/translate/cli/cordova-plugin.readme.md b/src/translate/cli/cordova-plugin.readme.md
index b3ea63900d4..162ba073340 100644
--- a/src/translate/cli/cordova-plugin.readme.md
+++ b/src/translate/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova plugin` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-prepare.readme.md b/src/translate/cli/cordova-prepare.readme.md
index 90b7d18e711..6ae022dcaa0 100644
--- a/src/translate/cli/cordova-prepare.readme.md
+++ b/src/translate/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
diff --git a/src/translate/cli/cordova-requirements.readme.md b/src/translate/cli/cordova-requirements.readme.md
index 04bdf9cef01..edf47772b1f 100644
--- a/src/translate/cli/cordova-requirements.readme.md
+++ b/src/translate/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova requirements` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-resources.readme.md b/src/translate/cli/cordova-resources.readme.md
index 730573a47c3..e93fdd8a890 100644
--- a/src/translate/cli/cordova-resources.readme.md
+++ b/src/translate/cli/cordova-resources.readme.md
@@ -11,5 +11,6 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
+
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
diff --git a/src/translate/cli/cordova-run.readme.md b/src/translate/cli/cordova-run.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/cli/cordova-run.readme.md
+++ b/src/translate/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/cli/generate.readme.md b/src/translate/cli/generate.readme.md
index 30de99a2484..042f64a7a4c 100644
--- a/src/translate/cli/generate.readme.md
+++ b/src/translate/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
- - For a full list of available types, use `npx ng g --help`
- - For a list of options for a types, use `npx ng g <type> --help`
+- For a full list of available types, use `npx ng g --help`
+- For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
+To test a generator before file modifications are made, use the `--dry-run` option.
diff --git a/src/translate/cli/git-remote.readme.md b/src/translate/cli/git-remote.readme.md
index b4caf425642..58347c24535 100644
--- a/src/translate/cli/git-remote.readme.md
+++ b/src/translate/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/cli/info.readme.md b/src/translate/cli/info.readme.md
index 03f86bc2907..d633e373984 100644
--- a/src/translate/cli/info.readme.md
+++ b/src/translate/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
diff --git a/src/translate/cli/init.readme.md b/src/translate/cli/init.readme.md
index 98b3118bed5..918620be789 100644
--- a/src/translate/cli/init.readme.md
+++ b/src/translate/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
diff --git a/src/translate/cli/integrations-disable.readme.md b/src/translate/cli/integrations-disable.readme.md
index 5418badf555..b4f4a38bdd0 100644
--- a/src/translate/cli/integrations-disable.readme.md
+++ b/src/translate/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
+Integrations, such as Cordova, can be disabled with this command.
diff --git a/src/translate/cli/integrations-enable.readme.md b/src/translate/cli/integrations-enable.readme.md
index 945fcbbb226..76526785eaa 100644
--- a/src/translate/cli/integrations-enable.readme.md
+++ b/src/translate/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
\ No newline at end of file
+Integrations can be re-added with the `--add` option.
diff --git a/src/translate/cli/integrations-list.readme.md b/src/translate/cli/integrations-list.readme.md
index 044dd455e0e..d075d211e95 100644
--- a/src/translate/cli/integrations-list.readme.md
+++ b/src/translate/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
+- To disable integrations, see `ionic integrations disable --help`
diff --git a/src/translate/cli/link.readme.md b/src/translate/cli/link.readme.md
index e621a2e948a..f5a96a51946 100644
--- a/src/translate/cli/link.readme.md
+++ b/src/translate/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/live-update-add.readme.md b/src/translate/cli/live-update-add.readme.md
index bc0316117d7..d2aebb869cd 100644
--- a/src/translate/cli/live-update-add.readme.md
+++ b/src/translate/cli/live-update-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for bo
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
diff --git a/src/translate/cli/live-update-configure.readme.md b/src/translate/cli/live-update-configure.readme.md
index 1d8c7504c8f..d4bc34cffba 100644
--- a/src/translate/cli/live-update-configure.readme.md
+++ b/src/translate/cli/live-update-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Live Update plugin (`cordov
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
diff --git a/src/translate/cli/login.readme.md b/src/translate/cli/login.readme.md
index 0fbe95d2ae8..ce63bb58ac0 100644
--- a/src/translate/cli/login.readme.md
+++ b/src/translate/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/logout.readme.md b/src/translate/cli/logout.readme.md
index 4122a7422e5..540a69a156c 100644
--- a/src/translate/cli/logout.readme.md
+++ b/src/translate/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
+If you need to create an Ionic account, use `ionic signup`.
diff --git a/src/translate/cli/repair.readme.md b/src/translate/cli/repair.readme.md
index dbb18055c3a..9b01e9d40d8 100644
--- a/src/translate/cli/repair.readme.md
+++ b/src/translate/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
diff --git a/src/translate/cli/serve.readme.md b/src/translate/cli/serve.readme.md
index b08bf89fccf..a9b7bd7d2af 100644
--- a/src/translate/cli/serve.readme.md
+++ b/src/translate/cli/serve.readme.md
@@ -4,4 +4,4 @@ By default, `ionic serve` boots up a development server on `localhost`. To serve
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
diff --git a/src/translate/cli/signup.readme.md b/src/translate/cli/signup.readme.md
index 4761dfdf982..82d215181a5 100644
--- a/src/translate/cli/signup.readme.md
+++ b/src/translate/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/ssh-setup.readme.md b/src/translate/cli/ssh-setup.readme.md
index f6ed6f93cb8..b95050beae9 100644
--- a/src/translate/cli/ssh-setup.readme.md
+++ b/src/translate/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/ssh-use.readme.md b/src/translate/cli/ssh-use.readme.md
index b9a78d4db3e..4714fa29928 100644
--- a/src/translate/cli/ssh-use.readme.md
+++ b/src/translate/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
diff --git a/src/translate/cli/ssl-generate.readme.md b/src/translate/cli/ssl-generate.readme.md
index c49644b96ef..aea3ec98cc5 100644
--- a/src/translate/cli/ssl-generate.readme.md
+++ b/src/translate/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
diff --git a/src/translate/cli/start.readme.md b/src/translate/cli/start.readme.md
index 45b725f705d..9b3d3b471e4 100644
--- a/src/translate/cli/start.readme.md
+++ b/src/translate/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
diff --git a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 1fbd6aab841..986eeabbc94 100644
--- a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,3 +1,2 @@
-
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
index deb9dde4602..90e1ee9b77e 100644
--- a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,4 +1,3 @@
-
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
index 420a0d400d4..11db0748e34 100644
--- a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
index fb2004ca29c..a21a70fb083 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,4 +1,3 @@
-
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
index 56e36fe9053..41472b2e411 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1,2 +1 @@
-
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
index b18059b0829..8f50b6279c0 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
-
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
+
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
index 8bc209c7e54..e11ad80b4a3 100644
--- a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,4 +1,3 @@
-
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
index 18f742e5108..0303990f06b 100644
--- a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,4 +1,3 @@
-
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 76387367a61..23e8c973bf2 100644
--- a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index 822209a4a72..e27b0ba6540 100644
--- a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1,2 +1 @@
-
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index 93a3f290203..c31c989a3d3 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,4 +1,3 @@
-
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 3592aee1757..64f0fad3191 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
index 2eb94af7221..a82b309d78c 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
index 0c671a0c2d0..8e414578f93 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
index 48c289cc3fb..5f6722050b0 100644
--- a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1,2 +1 @@
-
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
index 5672e0b2213..2813a5d498b 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index d7ef092bae5..95a88837497 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index c331a7d05f5..ef9f2968a8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index 6d2e7862965..e84626aea1d 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,3 +1,2 @@
-
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
index c1b58f99edf..e89f74940ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1,3 +1 @@
-
-
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
index 0db391fddba..aff2e2cb4d6 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1,2 +1 @@
-
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
index 12d31c41dd7..bb919529254 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1,2 +1 @@
-
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
index 87dd87d5765..fbde6778edf 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to read and write app preferences
diff --git a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
index c0210b3f9e5..c2d7f1730a0 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,4 +1,3 @@
-
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
index 08cfe48a452..6b4fa2e5c61 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,4 +1,3 @@
-
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
index 1e612327b09..6213470725d 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1,2 +1 @@
-
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
index 79bd464667d..b3fd1055a9a 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
index af28dc677bd..41c425d19c7 100644
--- a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1,2 +1 @@
-
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
index f0017f9025d..4197b26f800 100644
--- a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1,2 +1 @@
-
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
index d1ce36553bc..4c69face47f 100644
--- a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,3 +1,2 @@
-
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
index 48d67747675..b066c65401a 100644
--- a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,3 +1,2 @@
-
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
index 62278126195..3a4a3e352cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,4 +1,3 @@
-
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
index a43e7c719b2..b1cfb8cd04b 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,3 +1,2 @@
-
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
index 90ce8edd2ad..ee73844b3c8 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,3 +1,2 @@
-
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
diff --git a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
index bc94608b2c6..9ab2fed769b 100644
--- a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1,2 +1 @@
-
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
index 11775820229..52465e564f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,4 +1,3 @@
-
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
index ebe978c896a..33af83938f9 100644
--- a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1,2 +1 @@
-
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index d40a29ab2a1..747418e7857 100644
--- a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,4 +1,3 @@
-
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index 9f16d6d8f42..b84c09c835f 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
+This plugin allows you to save base64 data as a png image into the device
diff --git a/src/translate/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
index 06a0311c510..340db120adf 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
@@ -1,2 +1 @@
-
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
index da71524f3d1..2c657416aef 100644
--- a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
index 0725aba40ce..bd325268e71 100644
--- a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1,2 +1 @@
-
 BioCatch SDK Cordova support
diff --git a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index 6be6e7318ae..b1b5ec0f81c 100644
--- a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,3 +1,2 @@
-
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
index 4818853ac89..8d23815cab0 100644
--- a/src/translate/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
index 52d671c0034..f0f05bc6a1f 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,3 +1,2 @@
-
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
index b6cae0f21fd..6f149bce706 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1,2 +1 @@
-
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index 639b85fee5c..c0281f22a59 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3ae195d12de..3b80e3d0ecd 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,4 +1,3 @@
-
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index f3579d8e616..d0939b5fde7 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
diff --git a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
index 29af8d97385..9921b18062b 100644
--- a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,9 +1,8 @@
-
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
- Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
- For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
index b9836ebd4c6..a222a2efbe7 100644
--- a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1,2 +1 @@
-
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
index 51b06d0cc15..d97dd2af981 100644
--- a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,4 +1,3 @@
-
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
index 71995e79760..b925da2342c 100644
--- a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1,2 +1 @@
-
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
index bf83901883b..f03b8b179a9 100644
--- a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1,2 +1 @@
-
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
index 7e5a437d1d3..7b8674b3871 100644
--- a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1,2 +1 @@
-
 This plugin provides build information.
diff --git a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
index 5a83eede868..515f629e662 100644
--- a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,5 +1,3 @@
-
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
index 16d031664c6..b0ecb7bb40b 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,3 +1,2 @@
-
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
index a2b5e1bab30..76f6447e69b 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1,2 +1 @@
-
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
index d68a0a44b0e..2914b087a64 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,3 +1,2 @@
-
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
index 31cf59dc30b..9b06352e407 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,4 +1,3 @@
-
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
index a354d9c7925..aa5cc82125d 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,12 +1,13 @@
-
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
+
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
+
 inside of the <platform name='ios> section
diff --git a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
index 76c58120b44..752a6da1f4f 100644
--- a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
-
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
+
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
index 8518bffadeb..953ca23cf89 100644
--- a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,6 +1,5 @@
 Plugin for using Apple's ClassKit framework.
 
-
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
index f6b4973e48e..5b82513228d 100644
--- a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
index 3176d5f4017..603b2b8f6b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1,3 +1 @@
-
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 939c06b2441..7e3928e3cd5 100644
--- a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1,2 +1 @@
-
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
index 3688eedbcac..9d0f8be2ea1 100644
--- a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1,2 +1 @@
-
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
index 9cf894081e8..b03bd091c4c 100644
--- a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,4 +1,3 @@
-
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index 4bb2367cd5c..b32e2c7cacd 100644
--- a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1,2 +1 @@
-
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
index 0243a89bfa0..b7061033770 100644
--- a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1,2 +1 @@
-
 Access and manage Contacts on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index 4a13e8229fa..ee32121391a 100644
--- a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1,2 +1 @@
-
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
index 6c659180b50..9faa50aaed7 100644
--- a/src/translate/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
\ No newline at end of file
+Crops images
diff --git a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 5c24399bc42..9116ddca6eb 100644
--- a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1,2 +1 @@
-
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
index 5eed8b85866..d2632a61abf 100644
--- a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1,2 +1 @@
-
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
index 08fbb92c20c..cabc3d4ff44 100644
--- a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
index bffae754b58..8943e5b9ca4 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1,2 +1 @@
-
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
index ad508847c3e..f11c48fa910 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1,3 +1 @@
-
-
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
index abe72e3b6c0..4dbbb06d71c 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
index 02c713e2138..e96364431a7 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-device.readme.md b/src/translate/native/@awesome-cordova-plugins-device.readme.md
index c6ef6980695..3dbd2dec8e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device.readme.md
@@ -1,2 +1 @@
-
 Access information about the underlying device and platform.
diff --git a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
index 893058bc4eb..ac9d8279b92 100644
--- a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1,2 +1 @@
-
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
index a90f9cfbe85..64c6b6393fe 100644
--- a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1,2 +1 @@
-
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
index 11ac16aafc6..f988d884a0c 100644
--- a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
index 7eac80f6cff..3a08f9c811c 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,4 +1,2 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
index 29d32018802..03cd028ccfd 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1,2 +1 @@
-
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
index 7e39f62d9b0..605e7b14d41 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1,2 +1 @@
-
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
index f15e01b1143..dad89444163 100644
--- a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1,3 +1 @@
-
 This plugin is designed to support downloading files using Android DownloadManager.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
index 4176ac2a7b9..a305d027409 100644
--- a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1,4 +1 @@
-
-
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
index 81259d50cc1..d0554945c4c 100644
--- a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,5 +1,3 @@
-
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index 40349a8306b..b76b54f6046 100644
--- a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1,2 +1 @@
-
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 16c3ea63d2a..043375415ac 100644
--- a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-
 Retrieves additional device information from the Device Hardware
- - memory
- - cpumhz
- - totalstorage
- - freestorage
+
+- memory
+- cpumhz
+- totalstorage
+- freestorage
diff --git a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
index 12d214e6d38..b140e97cb32 100644
--- a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,4 +1,3 @@
-
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
index df9af63f74b..93e5e887491 100644
--- a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,11 +1,10 @@
-
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
- To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -30,6 +29,7 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
+
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
+
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-
 #### Android Install
+
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
-
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
index f3790772c17..dbbb3b72132 100644
--- a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1,2 +1 @@
-
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
index b4553ad9baf..4bf1bdf418f 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
index 4fdfccbf60d..f1b5408277a 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1,2 +1 @@
-
 Simple file encryption for Cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
index ba26e51b8cd..a719c048fe4 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1,2 +1 @@
-
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
index c9445ac1ce7..1f3eeb42d5a 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1,3 +1 @@
-
-
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
index b33dc3c0f97..3616dbd3573 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
index c8ba532eae9..4770407e60d 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to upload and download files.
diff --git a/src/translate/native/@awesome-cordova-plugins-file.readme.md b/src/translate/native/@awesome-cordova-plugins-file.readme.md
index 1e61b343d6b..28bc40d6e90 100644
--- a/src/translate/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
-
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
+
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
- This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
- The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
- Although most of the plugin code was written when an earlier spec was current: http:
-  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
+This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+Although most of the plugin code was written when an earlier spec was current: http:
+//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+//dev.w3.org/2009/dap/file-system/file-writer.html
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index f87a05030d7..ce125266039 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -6,7 +5,9 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
+
+For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
+
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 4da15cc2ef6..410431f731b 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
index 45a214eee3a..38a8b24123d 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Config
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
index 2d8b3effb06..a1c32524c76 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1,2 +1 @@
-
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index 2ad1e2109bd..b88fed62436 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1,2 +1 @@
-
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 6efc1b8ae10..2cfe3a22194 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -10,6 +9,7 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
+
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 5bdcf74de11..6a18f9fcf39 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
index 433e365a6a5..d1f83c84392 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
index e044eb6dc66..aa17963327a 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,3 +1,2 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
index 25001f76e05..6c21f982616 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1,2 +1 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index 80ef2d51635..e57049202bf 100644
--- a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1,2 +1 @@
-
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
index 6d68d07b0fe..563b7c87954 100644
--- a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,9 +1,8 @@
-
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into ```config.xml```:
+For android API 28+, the following xml snippet should be inserted into `config.xml`:
 
 ```
 ...
@@ -12,4 +11,4 @@ For android API 28+, the following xml snippet should be inserted into ```config
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
index 0cd5a4278d8..5987065177c 100644
--- a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1,2 +1 @@
-
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
index a56ed3a0093..5dda6c71ade 100644
--- a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,3 +1,2 @@
-
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
index 6e993e8f8a8..2f83489f5fb 100644
--- a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
diff --git a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
index 8d55357a600..0391a010ff3 100644
--- a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,12 +1,11 @@
-
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
- This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
+
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
-
diff --git a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
index d1a3161e0b4..840cf8d4fb5 100644
--- a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1,2 +1 @@
-
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
index 1c759160579..8ebef774b81 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
-
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
+
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
diff --git a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
index 42ea1211a02..0e715c64736 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1,2 +1 @@
-
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index e40dfc4db5e..a10f89326aa 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
index fb0392b4d72..676268db9d5 100644
--- a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
\ No newline at end of file
+Read Gyroscope sensor data
diff --git a/src/translate/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
index 9cc2bc1f297..6f496fc37ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
@@ -1,2 +1 @@
-
 HCE Cordova Wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
index ad82eb6b43a..271a47a93b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
index dbd72bc8324..466271d3cba 100644
--- a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,3 +1,2 @@
-
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-health.readme.md b/src/translate/native/@awesome-cordova-plugins-health.readme.md
index 349af915eac..f49780a8921 100644
--- a/src/translate/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health.readme.md
@@ -1,2 +1 @@
-
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
index e49b6cbc6ca..2ba246ebaf0 100644
--- a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-http.readme.md b/src/translate/native/@awesome-cordova-plugins-http.readme.md
index 40ad52f5a5d..3fcae7e8052 100644
--- a/src/translate/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
index 4421569a8f0..14a21342440 100644
--- a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1,2 +1 @@
-
-Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
+Embedded httpd for Cordova apps. Light weight HTTP server.
diff --git a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index d223513c705..8a8ae830783 100644
--- a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
index ee369f17322..accd867793f 100644
--- a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides functions for working with iBeacons.
 
- The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
index 75f3775bff1..8f9c76acd94 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,4 +1,3 @@
-
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
index 40b02d55e6b..88fa3c7bf5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin For Image Resize
diff --git a/src/translate/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
index f699597a628..e6e57be76e7 100644
--- a/src/translate/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,4 +1,3 @@
-
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 87d0037b909..0485062862e 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
\ No newline at end of file
+Launches in app Browser
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index 5bcd6494c48..b6be39d32c9 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,25 +1,24 @@
-
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|  | ios | android | win-8 | win-10/uwp | mac |
-|--|--|--|--|--|--|
-| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
-| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
-| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
-| downloadable content | ✅ |   |   |   | ✅ |
-| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
+|                      | ios | android | win-8 | win-10/uwp | mac |
+| -------------------- | --- | ------- | ----- | ---------- | --- |
+| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
+| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
+| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
+| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
+| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
+| downloadable content | ✅  |         |       |            | ✅  |
+| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
 
 Supports:
 
- - **iOS** version 7.0 or higher.
- - **Android** version 2.2 (API level 8) or higher
-   - with Google Play client version 3.9.16 or higher
- - **Windows** Store/Phone 8.1 or higher
- - **Windows 10 Mobile**
- - **macOS** version 10
- - **Xbox One**
-   - (and any platform supporting Microsoft's UWP)
+- **iOS** version 7.0 or higher.
+- **Android** version 2.2 (API level 8) or higher
+  - with Google Play client version 3.9.16 or higher
+- **Windows** Store/Phone 8.1 or higher
+- **Windows 10 Mobile**
+- **macOS** version 10
+- **Xbox One**
+  - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 5fbffa5c65b..143985e329b 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1,2 +1 @@
-
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
index 32b56cbab41..8e174f56973 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,5 +1,3 @@
-
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
-
diff --git a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
index 365932222f7..c28c9dcb463 100644
--- a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
index 77bbacfc378..680fb4b5caa 100644
--- a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1,2 +1 @@
-
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
index 93b6eee3eb3..685bec69d99 100644
--- a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
-
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
+
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
index 3cecc84de9e..6526cd4d4ff 100644
--- a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 6fe62b6c53a..1c68245f996 100644
--- a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,4 +1,3 @@
-
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index b8ea2b47c9e..708074a0ab2 100644
--- a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1,2 +1 @@
-
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
index 8a75e4fc94f..03fc8b67cb1 100644
--- a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,3 +1,2 @@
-
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
index 2895fffa54c..ed15dd96b1c 100644
--- a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1,2 +1 @@
-
 Implementation of the JINS MEME SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
index 9fde9b57805..be8555b753a 100644
--- a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
index 1ccf061fc98..b86b22652c5 100644
--- a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,4 +1,3 @@
-
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index cca62d8b43e..d2e63dd18d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,3 +1,2 @@
-
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
index 7764ef64d16..ae817d52f6d 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,4 +1,3 @@
-
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
index c28100fc7ff..013e0cacbed 100644
--- a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,4 +1,3 @@
-
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
index 125e1108746..a272d33f4e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,3 +1,2 @@
-
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 0306a39d956..105b197495b 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
index 942352f7056..2f3437ec5c2 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,5 +1,4 @@
-
-
 Assists in leaving user reviews/ratings in the App Stores.
+
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
index 6cc5413db8f..fc39816081a 100644
--- a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1,2 +1 @@
-
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
index 2085ded77a8..f6123e51703 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1,2 +1 @@
-
 This plugin to create local backup
diff --git a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
index 82c183d6fee..6cfdd379643 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
index 99d60417c8f..ed018edb499 100644
--- a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index 539dbf0c5b4..e67243449ae 100644
--- a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
index 55292ec8b1b..bead6de72c2 100644
--- a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1,2 +1 @@
-
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
index 9e5778eab23..ca5ec6a2525 100644
--- a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/native/@awesome-cordova-plugins-market.readme.md b/src/translate/native/@awesome-cordova-plugins-market.readme.md
index 281c8d456ad..0fa09982e5b 100644
--- a/src/translate/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-market.readme.md
@@ -1,2 +1 @@
-
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
index 92cacd40a12..69b6b0ebf1b 100644
--- a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/native/@awesome-cordova-plugins-media.readme.md b/src/translate/native/@awesome-cordova-plugins-media.readme.md
index 9d07585f502..f67d2174eea 100644
--- a/src/translate/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
index 13edc56092e..63f05dbf100 100644
--- a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
index 75e25a2c230..f3eb05040cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index b8584c4e0ae..c159f3801cb 100644
--- a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1,2 +1 @@
-
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index e9f6b965a20..0d06c413e79 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,3 +1,2 @@
-
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index 30c9e83dc6d..d71ef31d811 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,4 +1,3 @@
-
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
index 72ffec61b13..0390d514207 100644
--- a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,5 +1,4 @@
-
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
diff --git a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index ba01c25cf88..1a4f27e7fd5 100644
--- a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1,2 +1 @@
-
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
index e5465ae0a91..04fe4a3bf33 100644
--- a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,4 +1,3 @@
-
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
index b37886b1b59..7bbca215ca4 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
\ No newline at end of file
+Native Audio Playback
diff --git a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 3e9b7575290..5468f7f9077 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
index cd2d3dab18a..faea3298df2 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1,3 +1 @@
-
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index edd6e9c39ee..266ae69275a 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1,2 +1 @@
-
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 7bcffb8dee4..9a2e0d43722 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,3 +1,2 @@
-
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
index ad0db3ff5c9..4e29c4eeb6a 100644
--- a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1,2 +1 @@
-
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
index ab6d1bf9d08..837c7e475a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1,2 +1 @@
-
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/native/@awesome-cordova-plugins-network.readme.md b/src/translate/native/@awesome-cordova-plugins-network.readme.md
index 5ad7357168c..9a5f7a35d4e 100644
--- a/src/translate/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
index 92837035391..a81214659db 100644
--- a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
-
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
+
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
index 4e1c4bcb571..9632b1f0155 100644
--- a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,5 +1,4 @@
-
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
diff --git a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
index 5ddc2066105..dd7010c8876 100644
--- a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,4 +1,3 @@
-
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -6,11 +5,13 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
+
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
+
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -65,5 +66,4 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-`$ chmod +x hooks/copy_android_notification_icons.js`
-
+   `$ chmod +x hooks/copy_android_notification_icons.js`
diff --git a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 0be0100f96d..11e9c0ca52c 100644
--- a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1,2 +1 @@
-
-Plugin to open native screens of iOS/android settings
\ No newline at end of file
+Plugin to open native screens of iOS/android settings
diff --git a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
index 077568f6f76..c59128571c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1,2 +1 @@
-
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
index 97823a256c7..4caf38450f4 100644
--- a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1,2 +1 @@
-
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
index e45425cee51..4f099e14ed4 100644
--- a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 0b14edafe4a..22692f6e35d 100644
--- a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
index c6fcd66be8f..81ece364e1f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,3 +1,2 @@
-
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index dd840c8b485..1510b50b7b6 100644
--- a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,3 +1,2 @@
-
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
index 1f20587b9e3..77e517bcbd9 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,4 +1,3 @@
-
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
index 642ad87c3ba..c4ca80fa312 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
index 6ea7514c5fa..6596e0e430f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
index 2c12503cd71..d1bb01fec7e 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,6 +1,3 @@
-
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
-
-
diff --git a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
index fa7a099a33f..9a9cc59bc6c 100644
--- a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Pinterest
diff --git a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
index c42c478d81d..b1cab91f830 100644
--- a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1,2 +1 @@
-
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
index eaca280cad2..4ed7aff21ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,3 +1,2 @@
-
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
index 779cd5d6ec2..1985ca44851 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,3 +1,2 @@
-
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
index 312ac4a9125..5aff311b111 100644
--- a/src/translate/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
\ No newline at end of file
+Prints documents or HTML rendered content
diff --git a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 51bb27361c9..909c2ef0dbb 100644
--- a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1,2 +1 @@
-
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
index 7f42a5bcd96..dc1a4fbbb4b 100644
--- a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
-
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
+
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/native/@awesome-cordova-plugins-push.readme.md b/src/translate/native/@awesome-cordova-plugins-push.readme.md
index 5ae1db23037..a9c3464e985 100644
--- a/src/translate/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
index 464bba08731..e65c6c7edd7 100644
--- a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
index fcc40802c3d..d9b32939ab5 100644
--- a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,4 +1,3 @@
-
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 3dcb9304702..55b6fc63435 100644
--- a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,4 +1,3 @@
-
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index a90b29a29b0..505b461b09c 100644
--- a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1,2 +1 @@
-
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
index 13214fabab4..2d13f688d77 100644
--- a/src/translate/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
@@ -1,2 +1 @@
-
 This plugin to restart android application
diff --git a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
index 1b4e50f1b68..9f1d179bd5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1,2 +1 @@
-
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index c635a5fd046..6153b43d685 100644
--- a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,4 +1,3 @@
-
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
index 416c63df2e9..a83e7487c9e 100644
--- a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
index 15c0b85bf5f..e9b365c009a 100644
--- a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
\ No newline at end of file
+Captures a screen shot
diff --git a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
index a4c9c37f0b3..5af0e96163c 100644
--- a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1,2 +1 @@
-
 This plugin enables sensors on Android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
index 125a3910c49..a16c1211a8c 100644
--- a/src/translate/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
@@ -1,2 +1 @@
-
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
index aca58cc645a..b13d7210b0e 100644
--- a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
index 5608715c9fa..917873665cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
\ No newline at end of file
+Handles shake gesture
diff --git a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 8ab0b4dd94f..630d79ceeb0 100644
--- a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index d7fe4d72b94..40b7e9082ef 100644
--- a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,4 +1,3 @@
-
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index e8991e9348b..f02092735e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,7 +1,6 @@
-
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-*Source:* https://developer.apple.com/sign-in-with-apple/
+_Source:_ https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
index 52c91993c93..80e74390f46 100644
--- a/src/translate/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,4 +1,3 @@
-
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index e6270053a4a..00c77e7cdfc 100644
--- a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,4 +1,3 @@
-
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
index 83f1f737e59..696999e2340 100644
--- a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,3 +1,2 @@
-
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
index eb6aaf6b11c..3af874243f1 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1,2 +1 @@
-
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
index b0ba3252b25..d64c2f4cab6 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
@@ -1,3 +1 @@
-
-
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
index 760be2d9030..3edd7dba0d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,4 +1,3 @@
-
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
index ccd38016353..efc07916d88 100644
--- a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1,2 +1 @@
-
 This plugin does speech recognition using cloud services
diff --git a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
index 8623152c556..5521af0b3b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1,2 +1 @@
-
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 66329069921..97f3a5146a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
index 31117f45f87..1a5acf29e82 100644
--- a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
diff --git a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
index bce7a50dba7..cbc01dcad68 100644
--- a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-
 Cordova plugin for authenticating with Spotify
+
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 92e4d096de7..1f34ca227ed 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
index 0d19359e763..bfb4c960c5d 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1,2 +1 @@
-
 Access SQLite databases on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 62c602df45a..4c8d739d81f 100644
--- a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
index 8866094f12f..167ed6673b8 100644
--- a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1,2 +1 @@
-
-* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
index d2df403f415..0c999e9b7e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,4 +1,3 @@
-
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
index 918f0320b25..b6a57d237ac 100644
--- a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
-
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
+
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
index b093d14b4af..5a521be5eb5 100644
--- a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
index 32f49f8fb59..2e8f0e8c676 100644
--- a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
index 373fa2e0f42..22c07237113 100644
--- a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1,2 +1 @@
-
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 6a1864ed364..4c4cc795164 100644
--- a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1,2 +1 @@
-
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 577ae87896a..8f1ca44e3ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 80ce9a5af77..2efbb060915 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
index 41e946cfc8e..b53253d0eef 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
index 032d6ec13cc..cd2ff3ab709 100644
--- a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 81e3408cc65..40815363667 100644
--- a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1,2 +1 @@
-
 In-app browser that allows styling.
diff --git a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index a78596064d6..aea7b49108e 100644
--- a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,4 +1,3 @@
-
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
index c7b5d6c7fba..9034d3ab1f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
index 02615a1ec9f..0bb27885878 100644
--- a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,4 +1,3 @@
-
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 16ead04e0ed..0fd10d23d96 100644
--- a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
-
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
+
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
index 8876a612197..f1dd7f71fd1 100644
--- a/src/translate/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
@@ -1,2 +1 @@
-
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 1db59244ff9..032854e3607 100644
--- a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1,2 +1 @@
-
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 0b49755a0de..5ec8996425d 100644
--- a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
+## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+
+## iOS Requirements
 
-This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
--
-iOS Requirements
--
 Update your Cocoapods repo before you install the plugin.
+
 ```
 $ pod repo update
 ```
--
-Browser Requirements
--
-After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
+- Browser Requirements
+- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
index 504b3c9eb24..1bf710ddbcc 100644
--- a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 5cf251b3c8e..857e2854746 100644
--- a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
index 9c299395cf9..c5e46b65ea3 100644
--- a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,4 +1,3 @@
-
-The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
index 416be944a54..f52e258035a 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1,2 +1 @@
-
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
index dba5defbdd0..f82e5deb0ab 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
\ No newline at end of file
+Vibrates the device
diff --git a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index a22e03f3945..f3e970c9efb 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-
 This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
+
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
index 1ee9f14d4a0..e7f3e1b8a0b 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
index 62d0e5158b6..e6bce9df776 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1,2 +1 @@
-
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
index 562d250d54f..74a4213c286 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 732d61641b6..74f478b025e 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
index a2eb7545759..981c27c1eb3 100644
--- a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1,2 +1 @@
-
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
index 639229cba09..b2e43d635c3 100644
--- a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1,2 +1 @@
-
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index e519b6b087f..ca5fcb58975 100644
--- a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,4 +1,3 @@
-
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
index c85ed196728..3fef1483ebd 100644
--- a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,5 +1,3 @@
-
-
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 65e5f92754a..17fd2049102 100644
--- a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1,2 +1 @@
-
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
index 33a16ff46c6..e0a91fda385 100644
--- a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,4 +1,3 @@
-
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
index 48620c015e9..b6d33465570 100644
--- a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1,2 +1 @@
-
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
diff --git a/src/translate/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
index 8550752032e..6433e0021a7 100644
--- a/src/translate/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
index e358d13434b..94a52e6dc07 100644
--- a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.

From 7476dbec216a6b06072f6af8a46cd321f5ccbd41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 20 Jul 2023 10:25:05 +0900
Subject: [PATCH 445/469] fix(): remove i18n folder from git

---
 .../version-v6/README.md                      |   17 -
 .../version-v6/angular/lifecycle.md           |  103 --
 .../version-v6/angular/navigation.md          |  501 -----
 .../version-v6/angular/overview.md            |   42 -
 .../version-v6/angular/performance.md         |   69 -
 .../version-v6/angular/platform.md            |  216 ---
 .../version-v6/angular/pwa.md                 |  152 --
 .../version-v6/angular/slides.md              |  331 ----
 .../version-v6/angular/storage.md             |   32 -
 .../version-v6/angular/testing.md             |  595 ------
 .../version-v6/angular/virtual-scroll.md      |  133 --
 .../version-v6/angular/your-first-app.md      |  176 --
 .../angular/your-first-app/2-taking-photos.md |  134 --
 .../angular/your-first-app/3-saving-photos.md |   81 -
 .../your-first-app/4-loading-photos.md        |   69 -
 .../angular/your-first-app/5-adding-mobile.md |  117 --
 .../your-first-app/6-deploying-mobile.md      |  114 --
 .../angular/your-first-app/7-live-reload.md   |  114 --
 .../angular/your-first-app/8-distribute.md    |  100 -
 .../version-v6/api.md                         |   17 -
 .../version-v6/api/accordion-group.md         |   63 -
 .../version-v6/api/accordion.md               |  220 ---
 .../version-v6/api/action-sheet.md            |  162 --
 .../version-v6/api/alert.md                   |  208 ---
 .../version-v6/api/app.md                     |   55 -
 .../version-v6/api/avatar.md                  |   76 -
 .../version-v6/api/back-button.md             |   66 -
 .../version-v6/api/backdrop.md                |   58 -
 .../version-v6/api/badge.md                   |   68 -
 .../version-v6/api/breadcrumb.md              |   63 -
 .../version-v6/api/breadcrumbs.md             |  108 --
 .../version-v6/api/button.md                  |  106 --
 .../version-v6/api/buttons.md                 |   93 -
 .../version-v6/api/card-content.md            |   40 -
 .../version-v6/api/card-header.md             |   42 -
 .../version-v6/api/card-subtitle.md           |   42 -
 .../version-v6/api/card-title.md              |   50 -
 .../version-v6/api/card.md                    |   90 -
 .../version-v6/api/checkbox.md                |  132 --
 .../version-v6/api/chip.md                    |   74 -
 .../version-v6/api/col.md                     |   54 -
 .../version-v6/api/content.md                 |  158 --
 .../version-v6/api/datetime-button.md         |   82 -
 .../version-v6/api/datetime.md                |  464 -----
 .../version-v6/api/fab-button.md              |   52 -
 .../version-v6/api/fab-list.md                |   42 -
 .../version-v6/api/fab.md                     |  104 --
 .../version-v6/api/footer.md                  |   84 -
 .../version-v6/api/grid.md                    |  217 ---
 .../version-v6/api/header.md                  |   94 -
 .../version-v6/api/icon.md                    |   43 -
 .../version-v6/api/img.md                     |   54 -
 .../version-v6/api/infinite-scroll-content.md |   40 -
 .../version-v6/api/infinite-scroll.md         |  119 --
 .../version-v6/api/input.md                   |  177 --
 .../version-v6/api/item-divider.md            |   68 -
 .../version-v6/api/item-group.md              |   58 -
 .../version-v6/api/item-option.md             |   50 -
 .../version-v6/api/item-options.md            |   55 -
 .../version-v6/api/item-sliding.md            |   82 -
 .../version-v6/api/item.md                    |  152 --
 .../version-v6/api/label.md                   |   74 -
 .../version-v6/api/list-header.md             |   76 -
 .../version-v6/api/list.md                    |   71 -
 .../version-v6/api/loading.md                 |  122 --
 .../version-v6/api/menu-button.md             |   50 -
 .../version-v6/api/menu-toggle.md             |   52 -
 .../version-v6/api/menu.md                    |   96 -
 .../version-v6/api/modal.md                   |  300 ---
 .../version-v6/api/nav-link.md                |   50 -
 .../version-v6/api/nav.md                     |   70 -
 .../version-v6/api/note.md                    |   74 -
 .../version-v6/api/picker.md                  |  152 --
 .../version-v6/api/popover.md                 |  262 ---
 .../version-v6/api/progress-bar.md            |  100 -
 .../version-v6/api/radio-group.md             |   67 -
 .../version-v6/api/radio.md                   |  126 --
 .../version-v6/api/range.md                   |  203 --
 .../version-v6/api/refresher-content.md       |   40 -
 .../version-v6/api/refresher.md               |  123 --
 .../version-v6/api/reorder-group.md           |   71 -
 .../version-v6/api/reorder.md                 |  100 -
 .../version-v6/api/ripple-effect.md           |   72 -
 .../version-v6/api/route-redirect.md          |  118 --
 .../version-v6/api/route.md                   |  270 ---
 .../version-v6/api/router-link.md             |   61 -
 .../version-v6/api/router-outlet.md           |   57 -
 .../version-v6/api/router.md                  |  116 --
 .../version-v6/api/row.md                     |   55 -
 .../version-v6/api/searchbar.md               |  143 --
 .../version-v6/api/segment-button.md          |   76 -
 .../version-v6/api/segment.md                 |  123 --
 .../version-v6/api/select-option.md           |   50 -
 .../version-v6/api/select.md                  |  234 ---
 .../version-v6/api/skeleton-text.md           |   62 -
 .../version-v6/api/spinner.md                 |   70 -
 .../version-v6/api/split-pane.md              |   89 -
 .../version-v6/api/tab-bar.md                 |  207 ---
 .../version-v6/api/tab-button.md              |  281 ---
 .../version-v6/api/tab.md                     |   54 -
 .../version-v6/api/tabs.md                    |   88 -
 .../version-v6/api/text.md                    |   58 -
 .../version-v6/api/textarea.md                |  159 --
 .../version-v6/api/thumbnail.md               |   70 -
 .../version-v6/api/title.md                   |   92 -
 .../version-v6/api/toast.md                   |  179 --
 .../version-v6/api/toggle.md                  |  154 --
 .../version-v6/api/toolbar.md                 |  110 --
 .../version-v6/cli.md                         |   54 -
 .../version-v6/cli/commands/.gitignore        |    2 -
 .../version-v6/cli/configuration.md           |  243 ---
 .../version-v6/cli/livereload.md              |   72 -
 .../version-v6/cli/using-a-proxy.md           |   45 -
 .../version-v6/components.md                  |  166 --
 .../version-v6/contributing/coc.md            |   11 -
 .../contributing/how-to-contribute.md         |  252 ---
 .../core-concepts/cross-platform.md           |  180 --
 .../version-v6/core-concepts/fundamentals.md  |   51 -
 .../version-v6/core-concepts/webview.md       |   50 -
 .../what-are-progressive-web-apps.md          |   68 -
 .../version-v6/deployment/app-store.md        |   75 -
 .../version-v6/deployment/desktop-app.md      |   48 -
 .../version-v6/deployment/play-store.md       |   79 -
 .../version-v6/deployment/play-store.mdx      |  167 --
 .../deployment/progressive-web-app.md         |   25 -
 .../version-v6/developer-resources/books.md   |   59 -
 .../version-v6/developer-resources/courses.md |   83 -
 .../version-v6/developer-resources/guides.md  |    9 -
 .../creating-photo-gallery-device-storage.md  |  195 --
 .../guides/first-app-v3/intro.md              |  117 --
 .../guides/first-app-v3/ios-android-camera.md |  156 --
 .../realtime-updates-ionic-deploy.md          |  193 --
 .../guides/first-app-v3/theming.md            |   47 -
 .../track-bugs-ionic-monitoring.md            |   92 -
 .../creating-photo-gallery-device-storage.md  |  202 --
 .../guides/first-app-v4/intro.md              |   97 -
 .../guides/first-app-v4/ios-android-camera.md |  154 --
 .../guides/first-app-v4/theming.md            |   56 -
 .../version-v6/developer-resources/posts.md   |   77 -
 .../version-v6/developer-resources/tools.md   |   21 -
 .../version-v6/developer-resources/videos.md  |   21 -
 .../version-v6/developing/android.md          |  229 ---
 .../version-v6/developing/config.md           |  145 --
 .../developing/config/global/index.md         |   71 -
 .../developing/config/per-component/index.md  |  147 --
 .../config/per-platform-fallback/index.md     |   81 -
 .../config/per-platform-overrides/index.md    |   90 -
 .../developing/config/per-platform/index.md   |   66 -
 .../developing/hardware-back-button.md        |  345 ----
 .../version-v6/developing/ios.md              |  184 --
 .../version-v6/developing/keyboard.md         |  273 ---
 .../version-v6/developing/previewing.md       |   82 -
 .../version-v6/developing/scaffolding.md      |   95 -
 .../version-v6/developing/starting.md         |   48 -
 .../version-v6/developing/tips.md             |  152 --
 .../version-v6/index.md                       |  159 --
 .../version-v6/intro/cdn.md                   |  166 --
 .../version-v6/intro/cli.md                   |   64 -
 .../version-v6/intro/environment.md           |   68 -
 .../version-v6/intro/first-app.md             |   25 -
 .../version-v6/intro/next.md                  |   33 -
 .../version-v6/intro/vscode-extension.md      |   39 -
 .../version-v6/layout/css-utilities.md        |  551 ------
 .../version-v6/layout/global-stylesheets.md   |   73 -
 .../version-v6/layout/grid.md                 |  512 ------
 .../version-v6/layout/structure.md            |  236 ---
 .../version-v6/native-faq.md                  |   24 -
 .../version-v6/native-setup.md                |  146 --
 .../version-v6/native.md                      |   32 -
 .../version-v6/native/.gitignore              |    2 -
 .../version-v6/react.md                       |  147 --
 ...onic-react-to-an-existing-react-project.md |  213 ---
 .../version-v6/react/config.md                |  118 --
 .../version-v6/react/lifecycle.md             |  147 --
 .../version-v6/react/navigation.md            |  592 ------
 .../version-v6/react/overlays.md              |   91 -
 .../version-v6/react/overview.md              |   45 -
 .../version-v6/react/performance.md           |   47 -
 .../version-v6/react/platform.md              |   83 -
 .../version-v6/react/pwa.md                   |  181 --
 .../version-v6/react/quickstart.md            |  454 -----
 .../version-v6/react/slides.md                |  569 ------
 .../version-v6/react/storage.md               |   25 -
 .../version-v6/react/testing.md               |    7 -
 .../version-v6/react/virtual-scroll.md        |   76 -
 .../version-v6/react/your-first-app.md        |  204 --
 .../react/your-first-app/2-taking-photos.md   |  146 --
 .../react/your-first-app/3-saving-photos.md   |   81 -
 .../react/your-first-app/4-loading-photos.md  |   65 -
 .../react/your-first-app/5-adding-mobile.md   |   73 -
 .../your-first-app/6-deploying-mobile.md      |  107 --
 .../react/your-first-app/7-live-reload.md     |  120 --
 .../react/your-first-app/8-distribute.md      |  100 -
 .../version-v6/reference/browser-support.md   |   46 -
 .../version-v6/reference/glossary.md          |  559 ------
 .../version-v6/reference/release-notes.md     |    7 -
 .../version-v6/reference/support.md           |  115 --
 .../version-v6/reference/versioning.md        |   28 -
 .../version-v6/studio/assets.md               |   17 -
 .../version-v6/studio/code.md                 |   40 -
 .../version-v6/studio/designer.md             |  179 --
 .../version-v6/studio/faq.md                  |   23 -
 .../studio/guides/routing-and-navigation.md   |   29 -
 .../guides/using-native-functionality.md      |   17 -
 .../version-v6/studio/running.md              |   66 -
 .../version-v6/studio/settings.md             |   68 -
 .../version-v6/studio/setup/installation.md   |   17 -
 .../version-v6/studio/setup/native.md         |   13 -
 .../version-v6/studio/start.md                |   13 -
 .../version-v6/studio/support.md              |   15 -
 .../version-v6/studio/terminal.md             |   36 -
 .../version-v6/studio/theming.md              |   15 -
 .../version-v6/techniques/security.md         |  158 --
 .../version-v6/test/page1.md                  |    3 -
 .../version-v6/test/page2.md                  |    3 -
 .../version-v6/theming/advanced.md            |  182 --
 .../version-v6/theming/basics.md              |   44 -
 .../version-v6/theming/color-generator.md     |   19 -
 .../version-v6/theming/colors.md              |  116 --
 .../version-v6/theming/css-shadow-parts.md    |  163 --
 .../version-v6/theming/css-variables.md       |   98 -
 .../version-v6/theming/dark-mode.md           |  327 ----
 .../version-v6/theming/platform-styles.md     |   51 -
 .../version-v6/theming/themes.md              |   67 -
 .../version-v6/troubleshooting/build.md       |  208 ---
 .../version-v6/troubleshooting/cors.md        |  300 ---
 .../version-v6/troubleshooting/debugging.md   |  100 -
 .../version-v6/troubleshooting/native.md      |  103 --
 .../version-v6/troubleshooting/runtime.md     |  209 ---
 .../version-v6/updating/4-0.md                |  282 ---
 .../version-v6/updating/5-0.md                |   37 -
 .../version-v6/updating/6-0.md                |  478 -----
 .../version-v6/updating/7-0.md                |  159 --
 .../version-v6/utilities/animations.md        | 1635 -----------------
 .../version-v6/utilities/gestures.md          |  505 -----
 .../version-v6/vue/config.md                  |  119 --
 .../version-v6/vue/lifecycle.md               |  107 --
 .../version-v6/vue/navigation.md              |  672 -------
 .../version-v6/vue/overview.md                |   61 -
 .../version-v6/vue/performance.md             |   50 -
 .../version-v6/vue/platform.md                |   87 -
 .../version-v6/vue/pwa.md                     |  245 ---
 .../version-v6/vue/quickstart.md              |  733 --------
 .../version-v6/vue/slides.md                  |  570 ------
 .../version-v6/vue/storage.md                 |   32 -
 .../version-v6/vue/testing.md                 |    3 -
 .../version-v6/vue/troubleshooting.md         |  134 --
 .../version-v6/vue/utility-functions.md       |  184 --
 .../version-v6/vue/virtual-scroll.md          |  143 --
 .../version-v6/vue/your-first-app.md          |  222 ---
 .../vue/your-first-app/2-taking-photos.md     |  155 --
 .../vue/your-first-app/3-saving-photos.md     |   70 -
 .../vue/your-first-app/4-loading-photos.md    |   69 -
 .../vue/your-first-app/5-adding-mobile.md     |   80 -
 .../vue/your-first-app/6-deploying-mobile.md  |  118 --
 .../vue/your-first-app/7-live-reload.md       |  134 --
 .../vue/your-first-app/8-distribute.md        |  100 -
 257 files changed, 34139 deletions(-)
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/README.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/8-distribute.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/coc.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/how-to-contribute.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.mdx
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/courses.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/intro.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/theming.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/intro.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/posts.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overlays.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/storage.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/8-distribute.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/assets.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/code.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/designer.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/faq.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/routing-and-navigation.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/using-native-functionality.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/running.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/settings.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/native.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/start.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/support.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/terminal.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/theming.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page1.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page2.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/cors.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/debugging.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md
 delete mode 100644 i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/8-distribute.md

diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/README.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/README.md
deleted file mode 100644
index 2da29748116..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
deleted file mode 100644
index 46a669d0186..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/lifecycle.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Ionic PageのLife Cycle
-sidebar_label: ライフサイクル
----
-
-<head>
-  <title>AngularのページコンポーネントのLife Cycle - すべてのイベントのドキュメンテーション</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>
-
-このガイドでは、Ionic と Angular を使用して構築されたアプリでの Page Life Cycle のしくみについて説明します。（追記：Life Cycle とは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントを Life Cycle Events といいます）
-
-![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png)
-
-## Angular の Life Cycle Events
-
-Ionic は Angular が提供する Life Cycle Events を取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。
-
-| Event Name    | Description                                                                                                                                             |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ngOnInit`    | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 |
-| `ngOnDestroy` | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。                                              |
-
-Angular の Component Life Cycle イベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。
-
-:::note
-`ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。
-:::
-
-## Ionic の Page Events
-
-Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります:
-
-| Event Name         | Description                                                        |
-| ------------------ | ------------------------------------------------------------------ |
-| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
-| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
-
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
-
-`ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。
-
-`ionViewWillLeave` と `ionViewDidLeave` についてですが、 `ionViewWillLeave` は現在のページから離脱する処理がはじまる前に呼び出されますが、 `ionViewDidLeave` は新しいページに遷移する処理が成功してから呼び出されます (新しいページの `ionViewDidEnter` が発火した後になります)。
-
-![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif)
-
-## Ionic が Page の Life をどのように処理するか
-
-Ionic は `<ion-router-outlet />` という router outlet を持っています。この outlet が Angular の `<router-outlet />` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。
-
-`<ion-router-outlet />` にアプリがラップされることで、Ionic はナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionic は古いページを既存の DOM に残しますが、ビューから隠して新しいページに移行します。これを行う理由は 2 つあります:
-
-1. 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。
-2. ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。
-
-たとえば、UI の "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページは DOM から削除されるだけとなります。
-
-この特別な処理のために、`ngOnInit` と `ngOnDestroy` のメソッドは通常そうあるべきだと思うときには発火しないかもしれません。
-
-`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の 1 回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。
-
-## ルートガード
-
-Ionic 3 では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。
-
-これらの方法は、Angular のルートガードを使用するために Ionic 4 で削除されました。
-
-ルートガードは、ルートに対して特定のアクションを実行できるかどうかを判断するのに役立ちます。それらは特定のインターフェースを実装するクラスです。`CanActive` と `CanDeactivate` のインターフェイスは、`ionViewCanEnter` と `ionViewCanLeave` と同様のロジックでイベントを削除することができます。
-
-```tsx
-@Injectable()
-export class AuthGuard implements CanActivate {
-  constructor(private authService: AuthService) {}
-
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    return this.authService.isAuthenticated();
-  }
-}
-```
-
-このガードを使用するには、それをルート定義の適切なパラメータに追加します:
-
-```tsx
-{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }
-```
-
-ルートガードの使い方の詳細については、Angular の [router documentation](https://angular.jp/guide/router) を参照してください。
-
-## Life Cycle メソッドのガイダンス
-
-以下は、life cycle events ごとのユースケースに関するヒントです。
-
-- `ngOnInit` - コンポーネントを初期化し、Service からアクセスごとに更新する必要がないデータをロードします。
-- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
-- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
-- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
-- `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
-- `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
deleted file mode 100644
index b340041c599..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/navigation.md
+++ /dev/null
@@ -1,501 +0,0 @@
----
-title: Angular ナビゲーション
-sidebar_label: ナビゲーション/ルーティング
----
-
-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>
-
-このガイドでは、Ionic と Angular を使用して構築されたアプリでのルーティングのしくみについて説明します。
-
-Angular Router は、Angular アプリケーションで最も重要なライブラリの 1 つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Router を使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionic と組み合わせると！）。Angular Router の基本と、それを Ionic アプリケーション用に設定する方法を見てみましょう。
-
-## シンプルな Route
-
-ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります：
-
-```tsx
-
-import { RouterModule } from '@angular/router';
-
-@NgModule({
-  imports: [
-  ...
-  RouterModule.forRoot([
-    { path: '', component: LoginComponent },
-    { path: 'detail', component: DetailComponent },
-  ])
-  ],
-})
-```
-
-URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしている URL を読むことで動作を開始します。私たちのサンプルでは、Route は `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべての Route のエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？
-
-## リダイレクトの処理
-
-そういう場合には、ルーターリダイレクトを使用できます。リダイレクトは通常のルートオブジェクトと同じように書くことができますが、いくつかの異なるキーが含まれます。
-
-```tsx
-[
-  { path: '', redirectTo: 'login', pathMatch: 'full' },
-  { path: 'login', component: LoginComponent },
-  { path: 'detail', component: DetailComponent },
-];
-```
-
-このリダイレクトでは、アプリのインデックス（`''`）を探しはじめると、`login` にリダイレクトします。最後の `pathMatch` キーは、ルータにパスの検索方法を指示するために必要です。
-
-`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致する path がなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。
-
-```tsx
-{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },
-{ path: 'login', component: LoginComponent },
-```
-
-このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべての path が一致しないのでリダイレクトを行いません。
-
-あるいは、こういう書き方もできます:
-
-```tsx
-{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' },
-{ path: 'login', component: LoginComponent },
-```
-
-`/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。
-
-## routes へのナビゲーション
-
-routes について説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directive を利用します。先ほどの簡単な router 設定でこれを確認してみましょう:
-
-```ts
-RouterModule.forRoot([
-  { path: '', component: LoginComponent },
-  { path: 'detail', component: DetailComponent },
-]);
-```
-
-わたしたちは、次の HTML を利用することで、`LoginComponent` から `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>
-```
-
-ここで重要なのは`ion-button` と `routerLink` directive です。RouterLink は典型的な `href` と同様の考えで動作しますが、URL を文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。
-
-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'])
-  }
-}
-```
-
-どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。
-
-:::note
-相対 URL を使用したナビゲーションに関するメモ：現在、複数のナビゲーションスタックをサポートするために、相対 URL はサポートされていません。
-:::
-
-### 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
-
-現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
-
-```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) }
-  ])
-  ],
-})
-```
-
-`loadChildren` プロパティはコンポーネントの代わりにネイティブインポートを直接仕様してモジュールを参照する方法です。ただしこれを行うには、コンポーネントごとにモジュールを作成する必要があります。
-
-```tsx
-...
-import { RouterModule } from '@angular/router';
-import { LoginComponent } from './login.component';
-
-@NgModule({
-  imports: [
-  ...
-  RouterModule.forChild([
-    { path: '', component: LoginComponent },
-  ])
-  ],
-})
-```
-
-:::note
-一部のコードを省略して紹介しています
-:::
-
-ここでは、`RouterModule` のインポートとともに、典型的な `Angular Module` の設定がありますが、`RouterModule` では `forChild` によってコンポーネントを使用することを宣言しています。この設定では、ビルドを実行するときに、`App Component`（Root）、 `login Component` 、および `detail Component` において別々のチャンクを作成します。
-
-## Standalone Components
-
-:::caution Experimental API
-
-Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable.
-
-:::
-
-Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module.
-
-To use standalone components with routing and Ionic Framework, you must first be on Ionic ^6.3.0. The experimental API requires developers to assign the `EnvironmentInjector` instance for each router outlet (`ion-router-outlet` and `ion-tabs`) that uses standalone component routing.
-
-```ts title="app.component.ts"
-import { Component, EnvironmentInjector } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  template: 'app.component.html',
-})
-export class AppComponent {
-  constructor(public environmentInjector: EnvironmentInjector) {}
-}
-```
-
-```html title="app.component.html"
-<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
-<!-- or if you are using ion-tabs -->
-<ion-tabs [environmentInjector]="environmentInjector"> ... </ion-tabs>
-```
-
-Developers can use the existing syntax for standalone component routing from Angular:
-
-```ts
-@NgModule({
-  imports: [
-    RouterModule.forRoot([
-      {
-        path: 'standalone-route',
-        loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent),
-      },
-    ]),
-  ],
-})
-export class AppRoutingModule {}
-```
-
-To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).
-
-## 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
-
-タブを使用すると、Angular Router にどのコンポーネントをロードする必要があるかを知るためのメカニズムを Ionic が提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。
-
-```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',
-  },
-];
-```
-
-ここでは、 `tabs` パスを読み込んでいます。この例では、path を `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabs のマークアップは、次のとおりです:
-
-```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>
-```
-
-Ionic を使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `<ion-tab>` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定は Router の設定によって行えるようになりました。
-
-### 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
deleted file mode 100644
index 60d2910bfec..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/overview.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Ionic Angular の概要
-sidebar_label: 概要
----
-
-<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>
-
-import DocsCard from '@components/global/DocsCard';
-import DocsCards from '@components/global/DocsCards';
-
-`@ionic/angular` は core Ionic experience に、Angular 開発者向けにカスタマイズされたツールと API を組み合わせたものです。
-
-## Angular バージョンサポート
-
-Ionic v7 は Angular v14+をサポートしています。アップグレード戦略の一環として、Angular にはアップグレードを自動化するためのツールが組み込まれており、API に変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。
-
-## Angular Tooling
-
-Ionic4 以降では、アプリケーション構築とルーティングのために公式の Angular スタックが使用されているため、あなたのアプリケーションは Angular エコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionic は`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。
-
-## 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 Angular 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md
deleted file mode 100644
index cf441e2adfc..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/performance.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: Angularのパフォーマンス
-sidebar_label: パフォーマンス
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
deleted file mode 100644
index 686a0c6fb20..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/platform.md
+++ /dev/null
@@ -1,216 +0,0 @@
----
-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>
-
-プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Android など）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。
-
-## 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
-
-以下は、利用可能なすべての platform の値とそれに対応する説明をまとめた表です。
-
-| 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](../developing/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`
-
-`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitor アプリケーションがバックグラウンドに置かれたときに発生しますが、標準的な Web ブラウザでは発生しません。
-
-#### Examples
-
-```tsx
-this.platform.pause.subscribe(async () => {
-  alert('Pause event detected');
-});
-```
-
-### `resize`
-
-`resize` イベントは、ブラウザウィンドウの寸法が変更されたときに発生します。これは、ブラウザーウィンドウが物理的にサイズ変更されている場合や、デバイスの向きが変わっている場合に発生します。
-
-#### Examples
-
-```tsx
-this.platform.resize.subscribe(async () => {
-  alert('Resize event detected');
-});
-```
-
-### `resume`
-
-`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから出てきても、標準的な Web ブラウザで起動しない場合に発生します。
-
-#### Examples
-
-```tsx
-this.platform.resume.subscribe(async () => {
-  alert('Resume event detected');
-});
-```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md
deleted file mode 100644
index 9f915668dfa..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/pwa.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: AngularでのPWA
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
deleted file mode 100644
index d05b309a95f..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/slides.md
+++ /dev/null
@@ -1,331 +0,0 @@
----
-title: Migrating from ion-slides to Swiper.js
----
-
-<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. Swiper 9 introduced <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element.
-
-## 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@latest
-```
-
-Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper.
-
-```typescript
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-@NgModule({
-  schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
-});
-...
-```
-
-Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`.
-
-```typescript
-import { register } from 'swiper/element/bundle';
-
-register();
-
-@Component({
-  ...
-})
-...
-```
-
-From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own.
-
-```html
-<swiper-container>
-  <swiper-slide>Slide 1</swiper-slide>
-  <swiper-slide>Slide 2</swiper-slide>
-  <swiper-slide>Slide 3</swiper-slide>
-</swiper-container>
-```
-
-## Bundled vs. Core Versions
-
-By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features.
-
-If you would like to use the Core version instead, which does not include additional modules automatically, see <a href="https://swiperjs.com/element#core-version-and-modules" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#core-version-and-modules</a>. The rest of this migration guide will assume you are using the bundled version.
-
-## Swiping with Style
-
-To migrate over your CSS, first update your selectors to target the new custom elements instead:
-
-| ion-slides Selector | Swiper Selector    |
-| ------------------- | ------------------ |
-| `ion-slides`        | `swiper-container` |
-| `ion-slide`         | `swiper-slide`     |
-
-If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper.
-
-| `ion-slides` CSS property          | `swiper-container` CSS property             |
-| ---------------------------------- | ------------------------------------------- |
-| `--bullet-background`              | `--swiper-pagination-bullet-inactive-color` |
-| `--bullet-background-active`       | `--swiper-pagination-color`                 |
-| `--progress-bar-background`        | `--swiper-pagination-progressbar-bg-color`  |
-| `--progress-bar-background-active` | `--swiper-pagination-color`                 |
-| `--scroll-bar-background`          | `--swiper-scrollbar-bg-color`               |
-| `--scroll-bar-background-active`   | `--swiper-scrollbar-drag-bg-color`          |
-
-For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See <a href="https://swiperjs.com/element#injecting-styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/element#injecting-styles</a> for instructions.
-
-### Additional `ion-slides` Styles
-
-The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`:
-
-```css
-swiper-container {
-  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
-  --swiper-pagination-color: var(--ion-color-primary, #3880ff);
-  --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
-  --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
-  --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
-}
-
-swiper-slide {
-  display: flex;
-  position: relative;
-
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-  height: 100%;
-
-  font-size: 18px;
-
-  text-align: center;
-  box-sizing: border-box;
-}
-
-swiper-slide img {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  max-height: 100%;
-}
-```
-
-## 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. However, using this module is **not** required to use Swiper.js in Ionic.
-
-We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array:
-
-```typescript
-// home.page.ts
-
-import { IonicSlides } from '@ionic/angular';
-
-@Component({
-  ...
-})
-export class HomePage {
-  swiperModules = [IonicSlides];
-}
-```
-
-```html
-<!-- home.page.html -->
-
-<swiper-container [modules]="swiperModules"> ... </swiper-container>
-```
-
-:::note
-If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is 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 should be provided as individual properties directly on the `<swiper-container>` component.
-
-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-container>` we would do the following:
-
-```html
-<swiper-container [slidesPerView]="3" [loop]="true">
-  <swiper-slide>Slide 1</swiper-slide>
-  <swiper-slide>Slide 2</swiper-slide>
-  <swiper-slide>Slide 3</swiper-slide>
-</swiper-container>
-```
-
-Below is a full list of property changes when going from `ion-slides` to Swiper Element:
-
-| Name    | Notes                                                                                                                                   |
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| options | Set each option as a property directly on the `<swiper-container>` component.                                                           |
-| mode    | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
-| pager   | Use the `pagination` property instead.                                                                                                  |
-
-:::note
-All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
-:::
-
-## Events
-
-Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase.
-
-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-container (slidechange)="onSlideChange()">
-  <swiper-slide>Slide 1</swiper-slide>
-  <swiper-slide>Slide 2</swiper-slide>
-  <swiper-slide>Slide 3</swiper-slide>
-</swiper-container>
-```
-
-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 Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
-:::
-
-## Methods
-
-Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `<swiper-container>` element (such as through `ViewChild`), then access its `swiper` prop:
-
-```html
-<!-- slides.component.html -->
-
-<swiper-container #swiper>
-  <swiper-slide>Slide 1</swiper-slide>
-  <swiper-slide>Slide 2</swiper-slide>
-  <swiper-slide>Slide 3</swiper-slide>
-</swiper-container>
-```
-
-```typescript
-// slides.component.ts
-
-import { ..., ElementRef, ViewChild } from '@angular/core';
-
-@Component({
-  ...
-})
-export class SlidesExample {
-  @ViewChild('swiper')
-  swiperRef: ElementRef | undefined;
-
-  logActiveIndex() {
-    console.log(this.swiperRef?.nativeElement.swiper.activeIndex);
-  }
-}
-```
-
-Below is a full list of method changes when going from `ion-slides` to Swiper Element:
-
-| 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 the `swiper` prop. See example above.   |
-| isBeginning()      | Use the `isBeginning` property instead.                                              |
-| isEnd()            | Use the `isEnd` property instead.                                                    |
-| length()           | Use the `slides` property instead. (i.e swiper.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.                                                 |
-
-:::note
-All methods and properties available on the Swiper instance can be found at <a href="https://swiperjs.com/swiper-api#methods-and-properties" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#methods-and-properties</a>.
-:::
-
-## Effects
-
-Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
-
-```html
-<swiper-container effect="flip"> ... </swiper-container>
-```
-
-:::note
-For more information on effects in Swiper, please see <a href="https://swiperjs.com/swiper-api#fade-effect" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#fade-effect</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/element" target="_blank" rel="noopener noreferrer">Swiper Element documentation</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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
deleted file mode 100644
index 23c365eb7d4..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/storage.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: データストレージ
-sidebar_label: ストレージ
----
-
-<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>
-
-Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています。
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
deleted file mode 100644
index c6e5e2f8ec3..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/testing.md
+++ /dev/null
@@ -1,595 +0,0 @@
----
-title: テスト
----
-
-<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>
-
-Ionic CLI を使用して `@ionic/angular` アプリケーションを生成すると、アプリケーションのユニットテストとエンドツーエンドのテスト用に自動的に準備されます。これは Angular CLI で使われる設定と同じものです。Angular で作られたアプリケーションのテストについての詳細は <a href="https://angular.jp/guide/testing" target="_blank">Angular Testing Guide</a> をご参照ください。
-
-## テストの原則
-
-アプリケーションをテストするときは、テストによってシステムに欠陥があるかどうかを確認できる、ということを覚えておくことが一番です。しかし、どんなささいなシステムも完全に欠陥のないことを証明することは不可能です。このため、テストの目的はコードが正しいことを確認することではなく、コードの中の問題を見つけることです。これは微妙ですが、重要な違いです。
-
-もし私たちがコードが正しいことを証明しようとするのであれば、私たちはコードを通じて幸せな道を歩み続けようとするでしょう。もし私が問題の発見しようとするのであれば、コードをより完全に実行し、そこに潜むバグを発見する可能性が高くなります。
-
-最初からアプリケーションのテストを開始することも最良です。これにより、修正が容易な段階で早期に欠陥を発見できます。またこれにより、システムに新しい機能が追加されたときに、コードを確実にリファクタリングすることもできます。
-
-## ユニットテスト
-
-ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipe など）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。
-
-適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。
-
-ユニットテストはコードを分離して実行するため、高速で堅牢であり、高度なコードカバレッジが可能です。
-
-### モックの利用
-
-ユニットテストでは、コードをコードをモジュールで分離して実行します。これを簡単にするには、Jasmine(https://jasmine.github.io/) を使用することをお勧めします。Jasmine は、テスト実行中に依存関係の代わりにモックオブジェクト(Jasmine は 「スパイ」 と呼んでいます)を作成します。モックオブジェクトを使用すると、テストはその依存関係への呼び出しによって返される値を制御できるため、依存関係に加えられた変更から現在のテストを独立させることができます。これにより、テストのセットアップも簡単になり、テスト対象のモジュール内のコードだけをテストすることができます。
-
-モックを使用すると、モックが呼び出されたかどうか、および `toHaveBeenCalled*` セットの関数を介してどのように呼び出されたかを判断するために、テストでモックを確認することもできます。これらの関数では、メソッドが呼び出されたことをテストするときに、`toHaveBeenCalled` メソッドの呼び出しよりも `toHaveBeenCalledTimes` の呼び出しを優先して、テストをできるだけ具体的に行う必要があります。つまり、`expect(mock.foo).toHaveBeenCalledTimes(1)` は `expect(mock.foo).toHaveBeenCalled()` よりも優れています。何かが呼ばれていないこと（`expect(mock.foo).not.toHaveBeenCalled()`）をテストする際は、逆のアドバイスに従うべきです。
-
-Jasmine でモックオブジェクトを作成する一般的な方法は 2 つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。
-
-### `jasmine.createSpy` と `jasmine.createSpyObj` の利用
-
-`jasmine.createSpyObj` は、作成時に定義された一連のモックメソッドを使用して、完全なモックオブジェクトをスクラッチで作成します。これはとてもシンプルで便利です。テストのために何かを組み立てたり注入したりする必要はありません。この関数の使用する欠点は、実際のオブジェクトと一致しないオブジェクトを生成できることです。
-
-`jasmine.createSpy` も似ていますが、スタンドアロンのモック関数を作成します。
-
-#### `spyOn()` と `spyOnProperty()` の利用
-
-`spyOn()` は、既存のオブジェクトにスパイをインストールします。この手法を使用する利点は、オブジェクト上に存在しないメソッドをスパイしようとすると、例外が発生することです。これにより、テストが存在しないメソッドをモックすることを防ぎます。欠点は、テストが最初から完全に整形されたオブジェクトを必要とすることであり、これはテストに必要なセットアップの量を増加させるかと思います。
-
-`spyOnProperty()` は似ていますが、メソッドではなくプロパティに対してスパイするという点で異なります。
-
-### 一般的なテストの構成
-
-ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに 1 つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。
-
-`spec` ファイル自体には、そのテスト全体を定義するただ一つの `describe` コールが含まれています。その中には、主要な機能領域を定義する他の `describe` コールがネストされています。各 `describe` コールには、setup コードと teardown コード（一般的に `beforeEach` と `afterEach` コールによって処理される）、機能を階層的に分解した `describe` コール、また個々のテストケースを定義する `it` コールが含まれます。
-
-`describe` と `it` コールには、説明のテキストラベルも含まれます。適切な形式のテストでは、`describe` と `it` をコールすると、ラベルと組み合わせた適切なフレーズが実行され、各テストケースのすべてのラベルが `describe` と `it` ラベルを組み合わせて構成され、完全な文が作成されます。
-
-例:
-
-```tsx
-describe('Calculation', () => {
-  describe('divide', () => {
-    it('calculates 4 / 2 properly' () => {});
-    it('cowardly refuses to divide by zero' () => {});
-    ...
-  });
-
-  describe('multiply', () => {
-    ...
-  });
-});
-```
-
-外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。
-
-### ページとコンポーネント
-
-Pages は単なる Angular コンポーネントです。そのため、ページとコンポーネントは両方とも <a href="https://angular.jp/guide/testing#コンポーネントテストの基本">Angular のコンポーネントテストガイドライン</a> を使ってテストされます。
-
-ページとコンポーネントには TypeScript コードと HTML テンプレートマークアップの両方が含まれているため、コンポーネントクラスのテストとコンポーネント DOM のテストの両方を実行できます。ページが作成されると、生成されるテンプレートテストは次のようになります:
-
-```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();
-  });
-});
-```
-
-コンポーネントクラスのテストを行う場合、コンポーネントオブジェクトは `component=fixture.componentInstance;` によって定義されたコンポーネントオブジェクトを使用してアクセスされます。これはコンポーネントクラスのインスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが使用されます。これはコンポーネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの標準の HTML API メソッドを使うことを可能にします。
-
-## Service
-
-Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。
-
-### 基本的な Service のテスト
-
-ほとんどの service をテストするために推奨する方法は、service をインスタンス化し、service が持つ依存関係のモックを手動で注入することです。こうすることで、コードを分離してテストすることができます。
-
-たとえば、タイムカードの配列を取得して差引支給額を計算するメソッドを持つ service があるとします。また税金計算は、現在の service が依存しているもう一つの service を介して処理されるとします。この給与計算の service は、このようにテストすることができます:
-
-```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', () => {
-     ...
-   });
-});
-```
-
-これにより、テストでは `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)` などのモックの設定を介して様々な税金計算から戻される値を制御できます。これにより、「差引支給額」のテストを税金計算ロジックから独立させることができます。税金のコードが変更された場合、修正する必要があるのは税金 service 関連のコードとテストのみです。差引支給額のテストは、税金がどのように計算されるかを考慮せず、値が適切に適用されるのみであるため、そのまま機能し続けることができます。
-
-`ionic g service name` で service を生成するときに使われる scaffold は Angular のテストユーティリティを使ってテストモジュールをセットアップします。必ずしもそうする必要はありません。ただし、このコードを残しておくことで、手動でサービスを構築したり、次のように注入したりすることができます:
-
-```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();
-  });
-});
-```
-
-#### HTTP データ Service のテスト
-
-HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは <a href="https://angular.jp/guide/http#testing-http-requests" target="_blank">Angular の HTTP リクエストをテストする</a> のガイドを参照してください。
-
-このようなテストの基本的な設定は次のようになります:
-
-```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();
-    });
-  });
-});
-```
-
-### Pipe
-
-pipe は、特別に定義されたインタフェースを持つ service のようなものです。このクラスには、入力値(およびその他のオプションの引数)を操作してページにレンダリングされる出力を作成するための public メソッド `transform` が含まれています。パイプをテストするには、パイプをインスタンス化し、transform メソッドを呼び出して結果を検証します。
-
-簡単な例として、`Person` オブジェクトを受け取り、名前をフォーマットする pipe を見てみましょう。簡単にするために、`Person` は `id`、`firstName`、`lastName`、`middleInitial` で構成されるとします。パイプの要件は、名・姓・ミドルネームのいずれかが存在しない場合に、名前を「性、名 M(ミドルネーム)。」として出力することです。このようなテストは次のようになります:
-
-```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.');
-  });
-});
-```
-
-また、pipe を利用するコンポーネントおよびページでの DOM テストを介して pipe を実行することも有益です。
-
-## エンドツーエンドテスト
-
-エンドツーエンドのテストは、アプリケーションが全体として機能し、多くの場合、ライブデータへの接続を含むことを検証するために使用されます。一方で、ユニットテストは分離されたコードユニットに重点を置いているため、アプリケーションロジックの低レベルのテストが可能ですが、エンドツーエンドテストはさまざまなユーザーストーリーや使用・シナリオに重点を置いており、アプリケーション全体を通したデータフローの総合的な高レベルのテストを提供します。また一方で、ユニットテストではアプリケーションのロジックの問題を明らかにしようとしますが、エンドツーエンドテストでは、個々のユニットが一緒に使用される場合に発生する問題を明らかにしようとします。エンドツーエンドのテストにより、アプリケーションの全体的なアーキテクチャに関する問題が明らかになります。
-
-エンドツーエンドテストはユーザーストーリーを実行し、個々のコードモジュールではなくアプリケーション全体を対象とするため、エンドツーエンドテストは、メインアプリケーション自体のコードとは別に、プロジェクト内の独自のアプリケーションとして存在します。ほとんどのエンドツーエンドテストは、アプリケーションとの共通のユーザー対話を自動化し、それらの対話の結果を判別するために DOM を調査します。
-
-### テストの構成
-
-`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは <a href="https://www.protractortest.org/" target="_blank">Protractor</a> を使用してブラウザを制御し、<a href="https://jasmine.github.io/" target="_blank">Jasmine</a> を使用してテストを構築し、実行します。アプリケーションは、初期時は次の 4 つのファイルで構成されています:
-
-- `protractor.conf.js` - Protractor の設定ファイル
-- `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定
-- `src/app.po.ts` - アプリケーションをナビゲートするメソッド、DOM 内の要素を照会するメソッド、ページ上の要素を操作するメソッドを含むページオブジェクト
-- `src/app.e2e-spec.ts` - テスト用のスクリプト
-
-#### ページオブジェクト
-
-エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。
-
-ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
-
-##### ベースページオブジェクト
-
-多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
-
-すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します:
-
-```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();
-  }
-}
-```
-
-##### ページ毎の要約
-
-アプリケーションの各ページには、そのページの要素を抽象化する独自のページオブジェクトクラスがあります。ベースとなるページオブジェクトクラスを使用する場合、ページオブジェクトを作成するには、ほとんどの場合そのページに固有の要素のカスタムメソッドを作成する必要があります。多くの場合、これらのカスタム要素は、必要な作業を実行するためにベースクラスのメソッドの恩恵を受けます。
-
-次に、単純ですが典型的なログインページのページオブジェクトの例を示します。`enterEMail()` のような多くのメソッドは、作業の大部分を行うベースクラスのメソッドを呼び出すことに注意してください。
-
-```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');
-  }
-}
-```
-
-#### テストスクリプト
-
-ユニットテストと同様に、エンドツーエンドのテストスクリプトはネストされた `describe()` と `it()` 関数で構成されています。エンドツーエンドのテストの場合、`describe()` 関数は一般に、特定のシナリオを、そのシナリオ内でアクションが実行されるときにアプリケーションによって表されるべき特定の振る舞いを示す `it()` 関数とともに示します。
-
-また、ユニットテストと同様に、`describe()` および `it()` 関数で使用されるラベルは、"describe" または "it"と、完全なテストケースを形成するためにともに連結されるとき、両方とも意味をなします。
-
-典型的なログインシナリオを実行するエンドツーエンドのテストスクリプトの簡単な例を次に示します。
-
-```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();
-    });
-  });
-});
-```
-
-### 設定
-
-デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。
-
-#### テスト環境
-
-テスト環境を設定するには、テスト専用のバックエンドを使用する新しい環境ファイルを作成し、その環境を使うために `angular.json` ファイルを更新し、`package.json` 中の `e2e` スクリプトを `test` 環境を指定するように修正します。
-
-##### `environment.e2e.ts` ファイルを生成
-
-Angular の `environment.ts` と `environment.prod.ts` ファイルは、アプリケーションのバックエンドのデータサービスのベース URL などの情報を格納するために度々使用されます。また、同じ情報を提供する `environment.e2e.ts` を作成してください。これは、開発または本番のバックエンドサービスではなく、テスト専用のバックエンドサービスにのみ接続します。以下に例を示します:
-
-```tsx
-export const environment = {
-  production: false,
-  databaseURL: 'https://e2e-test-api.my-great-app.com',
-  projectId: 'my-great-app-e2e',
-};
-```
-
-##### `angular.json` ファイルを修正
-
-`angular.json` ファイルを使用するには、このファイルを修正する必要があります。これは階層化プロセスです。以下の XPath リストに従って、必要な設定を追加しましょう。
-
-`/projects/app/architect/build/configurations` にファイルの置換を行う `test` という名前の設定を追加します:
-
-```json
-"test": {
-  "fileReplacements": [
-    {
-      "replace": "src/environments/environment.ts",
-      "with": "src/environments/environment.e2e.ts"
-    }
-  ]
-}
-```
-
-`/projects/app/architect/serve/configurations` に、上記で定義した `test` というビルドの設定をブラウザターゲットに指定する `test` という名前の設定を追加します。
-
-```json
-"test": {
-  "browserTarget": "app:build:test"
-}
-```
-
-`/projects/app-e2e/architect/e2e/configurations` に、上記で定義した `test` という起動設定で開発サーバーターゲットを指定する `test` という名前の設定を追加します。
-
-```json
-"test": {
-  "devServerTarget": "app:serve:test"
-}
-```
-
-##### `package.json` ファイルを修正
-
-`npm run e2e` が `test` の設定を使うように `package.json` ファイルを修正します。
-
-```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"
-},
-```
-
-#### テストクリーンアップ
-
-エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための 1 つの方法は:
-
-1. クリーンアップを実行するエンドポイントを生成する。
-1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する
-
-次に例を示します:
-
-```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md
deleted file mode 100644
index 5ce19bf4c9d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/virtual-scroll.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# 仮想スクロール
-
-:::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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
deleted file mode 100644
index 3b097970d69..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: 'はじめてのIonicアプリ: Angular'
-sidebar_label: はじめてのアプリ
----
-
-<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>
-
-Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 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.
-:::
-
-## アプリの作成
-
-次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。
-
-```shell
-ionic start photo-gallery tabs --type=angular --capacitor
-```
-
-このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
-
-次に、アプリのフォルダに移動します:
-
-```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.
-
-## アプリを起動
-
-次のコマンドを実行してください:
-
-```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md
deleted file mode 100644
index 0500def6158..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/2-taking-photos.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Taking Photos with the Camera
-sidebar_label: カメラ撮影
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md
deleted file mode 100644
index 588ebd4397e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/3-saving-photos.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-sidebar_label: 写真の保存
----
-
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md
deleted file mode 100644
index 79759c48c53..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/4-loading-photos.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-sidebar_label: 写真の読み込み
----
-
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md
deleted file mode 100644
index f07de10841e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/5-adding-mobile.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-strip_number_prefixes: false
----
-
-# モバイルデバイス機能の追加
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md
deleted file mode 100644
index 82e392c2e64..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/6-deploying-mobile.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Deploying to iOS and Android
-sidebar_label: モバイルへのデプロイ
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md
deleted file mode 100644
index 484feddcc0f..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/7-live-reload.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: アプリ開発を高速化するためのライブリロード
-sidebar_label: ライブリロード
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/8-distribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/8-distribute.md
deleted file mode 100644
index 44b3781b476..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/angular/your-first-app/8-distribute.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md
deleted file mode 100644
index ec0f91ca8e6..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: APIインデックス
----
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
deleted file mode 100644
index 6dc8d34de5d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion-group.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 'ion-accordion-group'
----
-
-import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-アコーディオン・グループは、アコーディオンインスタンスのためのコンテナです。これは、アコーディオンの状態を管理し、キーボードナビゲーションを提供します。
-
-より詳細な情報や使用方法については、 [Accordion](./accordion) を参照ください。
-
-## Interfaces
-
-### AccordionGroupChangeEventDetail
-
-```typescript
-interface AccordionGroupChangeEventDetail<T = any> {
-  value: T;
-}
-```
-
-### AccordionGroupCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
-  detail: AccordionGroupChangeEventDetail<T>;
-  target: HTMLIonAccordionGroupElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
deleted file mode 100644
index dcb5eda1b31..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/accordion.md
+++ /dev/null
@@ -1,220 +0,0 @@
----
-title: 'ion-accordion'
----
-
-import Props from '@ionic-internal/component-api/v7/accordion/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
-
-<head>
-  <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
-  <meta
-    name="description"
-    content="Ion-accordionコンポーネントは、コンテンツに折りたたみ可能なセクションを設け、縦方向のスペースを減らし、情報を整理することができます。組み立て方とサンプルをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての `ion-accordion` コンポーネントは `ion-accordion-group` コンポーネントの中にグループ化されている必要があります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/accordion/basic/index.md';
-
-<Basic />
-
-## アコーディオンをトグルする方法
-
-どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
-
-import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
-
-<Toggle />
-
-## アコーディオンの状態変化を監視
-
-開発者は `ionChange` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。
-
-import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
-
-<ListenChanges />
-
-## 複数のアコーディオン
-
-開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。
-
-import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
-
-<Multiple />
-
-## アコーディオンの無効化
-
-### アコーディオンを無効にする
-
-個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。
-
-import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
-
-<DisableIndividual />
-
-### アコーディオングループ
-
-アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。
-
-import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
-
-<DisableGroup />
-
-## 読み込み可能なアコーディオン
-
-### 個別アコーディオン
-
-個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。
-
-import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
-
-<ReadonlyIndividual />
-
-### アコーディオングループ
-
-アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。
-
-import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
-
-<ReadonlyGroup />
-
-## 構造
-
-## ヘッダー
-
-`header` slot は、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは `ion-item` を使用することをお勧めします。
-
-`header` slot に `ion-item` を使用する場合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に設定されます。さらに、`ion-item` にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 [アイコンのカスタマイズ](#icons) を参照してください。
-
-### コンテンツ
-
-`content` slot は、アコーディオンの状態に応じて表示/非表示される部分として使用されます。1 ページに 1 つだけ `ion-content` インスタンスを追加する必要があるため、ここには他の `ion-content` インスタンスを除いて何でも置くことができます。
-
-## カスタマイズ
-
-### 拡張スタイル
-
-組み込みの拡張スタイルには、`compact` と `inset` の 2 種類があります。この拡張スタイルは `ion-accordion-group` の `expand` プロパティによって設定されます。
-
-`expand="inset"` の場合、アコーディオングループには border radius が与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
-
-import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
-
-<ExpansionStyles />
-
-### 高度な拡張スタイル
-
-アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には 4 つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
-
-| 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     |
-
-アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。
-
-```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/v7/accordion/customization/advanced-expansion-styles/index.md';
-
-<AdvancedExpansionStyles />
-
-### アイコン
-
-`header` slot に `ion-item` を使用する場合、自動的に `ion-icon` が追加されます。使用するアイコンの種類は `toggleIcon` プロパティで制御でき、追加するスロットも `toggleIconSlot` プロパティで制御することができます。
-
-アイコンを自分で管理したい場合や、`ion-icon` 以外のアイコンを使用したい場合は、icon 要素に `ion-accordion-toggle-icon` クラスを追加することができます。
-
-どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
-
-import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
-
-<Icons />
-
-### テーマ
-
-`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slot にある要素をターゲットにすることで簡単に実現できます。
-
-import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
-
-<Theming />
-
-## アクセシビリティ
-
-### アニメーション
-
-デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Framework アプリで `animated` を設定することで、アニメーションを無効にすることができます。
-
-import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
-
-<AccessibilityAnimations />
-
-### キーボードナビゲーション
-
-`ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。
-
-| 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.                                                                                                      |
-
-## パフォーマンス
-
-### アニメーション
-
-アコーディオンアニメーションは、アニメーションを開始するときに `content` slot の高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。
-
-例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slot の高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。
-
-1. 遅延読み込みを行わない `img` 要素を使用します。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。
-
-2. `ion-img` に最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して `ion-img` に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 `img` 要素を `loading="lazy"` と共に使用する場合にも有効です!
-
-3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
deleted file mode 100644
index ed9146c2d83..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/action-sheet.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: 'ion-action-sheet'
----
-
-import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
-
-<head>
-  <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
-  <meta
-    name="description"
-    content="アクションシートはアプリのコンテンツの上に一連のオプションを表示するダイアログで、手動で解除する必要があります。iOSとAndroidのデバイスでの使用方法については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-Action Sheet は複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` mode では、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheet を破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
-
-## インラインアクションシート (推奨)
-
-`ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
-
-import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
-
-<Trigger />
-
-### `isOpen` を使う
-
-`ion-action-sheet` の `isOpen` プロパティは、開発者がアプリケーションの状態からアクションシートの表示状態を制御することを可能にします。つまり、`isOpen`が`true`に設定されるとアクションシートが表示され、`isOpen`が`false`に設定されるとアクションシートは解除されます。
-
-`isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
-
-import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
-
-<IsOpen />
-
-## Controller アクションシート
-
-アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
-
-import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
-
-<Controller />
-
-## Buttons
-
-Button の `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 role プロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つ Button は、配列 `buttons` のどこに配置してもアクションシートの最下部に表示されます。 Note: `destructive` role をつける Button は、一番上の Button として配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されている handler が実行されます。
-
-Button は `ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これは `onDidDismiss` メソッドの戻り値にある `data` フィールドにデータを入力します。
-
-## Collecting Role Information on Dismiss
-
-`didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
-
-import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
-
-<RoleInfo />
-
-## テーマ
-
-アクションシートは scoped によるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的に CSS をスコープ化します。CSS で scoped セレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
-
-### スタイリング
-
-私たちは、 `create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
-
-```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/v7/action-sheet/theming/styling/index.md';
-
-<Styling />
-
-## CSS カスタムプロパティ
-
-[CSS カスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
-
-import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
-
-<CssCustomProperties />
-
-## アクセシビリティ
-
-アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が与えられます。ARIA 仕様に合わせるため、`aria-label`属性または`aria-labelledby`属性のいずれかを設定する必要があります。
-
-Ionic は自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することが強く推奨されています。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使用して、説明的な`aria-label`を提供するか、カスタム`aria-labelledby`値を設定することも可能です。
-
-## 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;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
deleted file mode 100644
index a64de0b109b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/alert.md
+++ /dev/null
@@ -1,208 +0,0 @@
----
-title: 'ion-alert'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@ionic-internal/component-api/v7/alert/props.md';
-import Events from '@ionic-internal/component-api/v7/alert/events.md';
-import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
-import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
-
-<head>
-  <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
-  <meta
-    name="description"
-    content="ion-alertダイアログは、Inputを使用して情報を提示または収集します。カスタムアラートボタンメッセージは、アプリのコンテンツの上に表示され、手動で解除する必要があります。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-アラートは、ユーザーに情報を提示したり、Input を使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
-
-## インラインアラート(推奨)
-
-`ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
-
-import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md';
-
-<Trigger />
-
-### `isOpen` を使う
-
-`ion-alert` の `isOpen` プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、`isOpen` を `true` に設定するとアラートが表示され、`isOpen` を `false` に設定するとアラートは解除されます。
-
-`isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。
-
-import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
-
-<IsOpen />
-
-## Controller Alerts
-
-`alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。
-
-import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
-
-<Controller />
-
-## Buttons
-
-`buttons` の配列には、各 button の `text` のプロパティと、オプションで `handler` を利用することができます。 `handler` が `false` を返した場合、button がクリックされても Alert は自動的に解除されません。すべての `buttons` は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の 1 つ)がメインボタンです。
-
-オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。
-
-import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
-
-<Buttons />
-
-## Inputs
-
-Alert には、複数の異なる Input を含めることもでき、そのデータをアプリで受け取ることができます。 Input はユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alert はすべて button Input であったり、すべて checkbox での Input を持つことはできますが、同一の Alert に radio と checkbox Input を混ぜることはできません。ただし、"text" Input では、 `url`, `email`, `text` などの複数の type を混ぜて利用することはできます。アラートのガイドラインに収まらない複雑な Form UI が必要な場合は、代わりに Modal 内で Form を構築することをお勧めします。
-
-### Text Inputs Example
-
-import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md';
-
-<TextInputs />
-
-### Radio Example
-
-import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
-
-<Radios />
-
-## カスタマイズ
-
-Alert は scoped によるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的に CSS をスコープします。CSS で scoped セレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
-
-`create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
-
-```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;
-}
-```
-
-[CSS カスタムプロパティ](#css-custom-properties) は、個々の要素をターゲットにすることなく、アラートのスタイルに使用することができます。
-
-```css
-.my-custom-class {
-  --background: #e5e5e5;
-}
-```
-
-import Customization from '@site/static/usage/v7/alert/customization/index.md';
-
-<Customization />
-
-:::note
-Ionic の Angular アプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。
-:::
-
-## アクセシビリティ
-
-Ionic は、アラートの `role` を、Input やボタンがある場合は [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) に、何もない場合は [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) のいずれかに自動的に設定します。
-
-アラートに対して `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header`が定義されていない場合は、`subHeader`要素がフォールバックとして使用されます。同様に、`aria-describedby`属性は、`message`要素の ID が定義されていれば自動的に設定されます。
-
-ARIA の仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。
-
-すべての ARIA 属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することにより、手動で上書きすることができます。
-
-## 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;
-  /**
-   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
-   */
-  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;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
deleted file mode 100644
index 2f059be07fe..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/app.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'ion-app'
----
-
-import Props from '@ionic-internal/component-api/v7/app/props.md';
-import Events from '@ionic-internal/component-api/v7/app/events.md';
-import Methods from '@ionic-internal/component-api/v7/app/methods.md';
-import Parts from '@ionic-internal/component-api/v7/app/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/app/slots.md';
-
-<head>
-  <title>ion-app: Container Element for an Ionic Application</title>
-  <meta
-    name="description"
-    content="ion-appは、Ionicアプリケーションのためのコンテナ要素です。アプリは、メニュー、ヘッダー、コンテンツ、フッターなど、多くのIonicコンポーネントを持つことができます。詳しくはこちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-App は Ionic アプリケーションのコンテナ要素です。プロジェクトごとに `<ion-app>` 要素は 1 つだけにしてください。アプリケーションには、menus, headers, content, footers など、多くの Ionic コンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `<ion-app>` に追加されます。
-
-`ion-app`を使用すると、以下の動作が可能になります。
-
-- [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。
-- Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます
-- Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。
-- テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。
-- Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
-- Ionic アプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
deleted file mode 100644
index a36a1426f8f..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/avatar.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 'ion-avatar'
----
-
-import Props from '@ionic-internal/component-api/v7/avatar/props.md';
-import Events from '@ionic-internal/component-api/v7/avatar/events.md';
-import Methods from '@ionic-internal/component-api/v7/avatar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/avatar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
-
-<head>
-  <title>ion-avatar: Circular Application Avatar Icon Component</title>
-  <meta
-    name="description"
-    content="Ion-avatarsは画像やアイコンを包む円形のアプリケーション部品です。人物や物体を表現することができ、単体でも、要素の中に入れてもかまいません。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Avatar は通常、写真やアイコンをラップする円形のコンポーネントです。これらは、人またはオブジェクトを表示するために使用できます。
-
-Avatar は、単独で使用することも、任意の要素の内部で使用することもできます。`ion-chip` または `ion-item` の内部に配置すると、Avatar は親コンポーネントに合わせてサイズ変更します。Avatar を item の左側または右側に配置するには、`slot` を `start` か `end` に設定します。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/avatar/basic/index.md';
-
-<Basic />
-
-## Chip Avatar
-
-import Chip from '@site/static/usage/v7/avatar/chip/index.md';
-
-<Chip />
-
-## Item Avatar
-
-import Item from '@site/static/usage/v7/avatar/item/index.md';
-
-<Item />
-
-## テーマ
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
deleted file mode 100644
index cef2a6ed82b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/back-button.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: 'ion-back-button'
----
-
-import Props from '@ionic-internal/component-api/v7/back-button/props.md';
-import Events from '@ionic-internal/component-api/v7/back-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/back-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/back-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
-
-<head>
-  <title>Back Button | ion-back-button: Custom Menu Icon for Applications</title>
-  <meta
-    name="description"
-    content="ion-back-buttonは、Android、iOS、およびProgressive Web Apps用のカスタムメニューアイコンです。Ionic Frameworkのコンポーネントを使用して、簡単にアプリケーションを構築できます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Back Button は、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/back-button/basic/index.md';
-
-<Basic />
-
-## カスタムの Back Button
-
-デフォルトでは、Back Button はテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Config docs](../developing/config) を参照してください。
-
-import Custom from '@site/static/usage/v7/back-button/custom/index.md';
-
-<Custom />
-
-## デフォルトの Back 履歴
-
-時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
deleted file mode 100644
index ea9357b66e1..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/backdrop.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'ion-backdrop'
----
-
-import Props from '@ionic-internal/component-api/v7/backdrop/props.md';
-import Events from '@ionic-internal/component-api/v7/backdrop/events.md';
-import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md';
-import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Backdrop は、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
-
-## 基本的な使い方
-
-バックドロップは、デフォルトで透明です。バックドロップは、その背後にあるコンテンツのクリックやタップを防ぐことができます。
-
-import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
-
-<Basic />
-
-## スタイリング
-
-バックドロップは、CSS プロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには `background-color`, `background`, `opacity` があります。
-
-コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。
-
-import Styling from '@site/static/usage/v7/backdrop/styling/index.md';
-
-<Styling />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
deleted file mode 100644
index eb83e4ab27a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/badge.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: 'ion-badge'
----
-
-import Props from '@ionic-internal/component-api/v7/badge/props.md';
-import Events from '@ionic-internal/component-api/v7/badge/events.md';
-import Methods from '@ionic-internal/component-api/v7/badge/methods.md';
-import Parts from '@ionic-internal/component-api/v7/badge/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
-
-<head>
-  <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
-  <meta
-    name="description"
-    content="BadgesはiOS/Androidアプリで他の要素の近くに表示されるインラインブロック要素で、アイテムの数を示す通知として使用します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-バッジはインラインブロック要素で、通常は他の要素の近くに表示されます。通常、数字やその他の文字が含まれています。バッジは、ある要素に関連する追加項目があることを知らせたり、その項目の数を示したりするために使用されます。バッジは、コンテンツが渡されないと非表示になります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/badge/basic/index.md';
-
-<Basic />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/badge/theming/colors/index.md';
-
-<Colors />
-
-### CSS Properties
-
-import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
deleted file mode 100644
index 8b02f54304e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumb.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 'ion-breadcrumb'
----
-
-import Props from '@ionic-internal/component-api/v7/breadcrumb/props.md';
-import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md';
-import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md';
-import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Breadcrumb は、Breadcrumbs コンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumb は、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbs は、次の Breadcrumb との間にセパレータを持ち、オプションでアイコンを含むことができます。
-
-詳しい説明は [Breadcrumbs](./breadcrumbs) を参照ください。
-
-## Interfaces
-
-### BreadcrumbCollapsedClickEventDetail
-
-```typescript
-interface BreadcrumbCollapsedClickEventDetail {
-  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
-}
-```
-
-### BreadcrumbCustomEvent
-
-必須ではありませんが、より強い型付けのために、このインターフェースを `CustomEvent` インターフェースの代わりに使用することができます。
-
-```typescript
-interface BreadcrumbCustomEvent extends CustomEvent {
-  detail: BreadcrumbCollapsedClickEventDetail;
-  target: HTMLIonBreadcrumbElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
deleted file mode 100644
index 8d7937f143a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/breadcrumbs.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: 'ion-breadcrumbs'
----
-
-import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md';
-import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md';
-import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md';
-import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Breadcrumbs は、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbs は、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだ Breadcrumb を展開することができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md';
-
-<Basic />
-
-## Using Icons
-
-### アイテムでのアイコン
-
-import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md';
-
-<IconsOnItems />
-
-### Custom Separators
-
-import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.md';
-
-<CustomSeparators />
-
-## Collapsing Items
-
-### Max Items
-
-`maxItems` の値よりも多くのアイテムがある場合、breadcrumbs は折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。
-
-import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md';
-
-<MaxItems />
-
-### Items Before or After Collapse
-
-アイテムが折りたたまれた後、表示するアイテムの数は `itemsBeforeCollapse` と `itemsAfterCollapse` プロパティで制御することができます。
-
-import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md';
-
-<ItemsBeforeAfter />
-
-### Collapsed Indicator Click -- Expand Breadcrumbs
-
-インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbs を展開するために使うことができます。
-
-import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md';
-
-<ExpandOnClick />
-
-### Collapsed Indicator Click -- Present Popover
-
-また、`ionCollapsedClick` イベントは、隠されたパンくずを表示するオーバーレイ（この場合は `ion-popover` ）を提示するために使用することができます。
-
-import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md';
-
-<PopoverOnClick />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
deleted file mode 100644
index 88a6a08f248..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/button.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: 'ion-button'
----
-
-import Props from '@ionic-internal/component-api/v7/button/props.md';
-import Events from '@ionic-internal/component-api/v7/button/events.md';
-import Methods from '@ionic-internal/component-api/v7/button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/button/slots.md';
-
-<head>
-  <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
-  <meta
-    name="description"
-    content="ion-button は、標準的なボタン機能が必要な場所で使用するためのクリック可能な要素を提供します。カスタム CSS プロパティを使用して、ボタン要素をデザインし、スタイルを設定します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Button はクリック可能な要素を提供し、Form 内や、標準の単機能な Button 機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Button は、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/button/basic/index.md';
-
-<Basic />
-
-## Expand
-
-このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは `display: inline-block` を持ちますが、このプロパティを設定すると、ボタンは `display: block` を持つ全角要素に変更されます。
-
-import Expand from '@site/static/usage/v7/button/expand/index.md';
-
-<Expand />
-
-## Shape
-
-このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを `"round"` に設定すると、ボタンは丸みを帯びた要素に変更されます。
-
-import Shape from '@site/static/usage/v7/button/shape/index.md';
-
-<Shape />
-
-## Fill
-
-この属性は、Button の background と border-color を設定します。デフォルトでは、Button は toolbar 内にない限り、background は塗りつぶされます。toolbar 内にある場合は、background は透明になります。
-
-import Fill from '@site/static/usage/v7/button/fill/index.md';
-
-<Fill />
-
-## Size
-
-この属性は、Button のサイズを指定します。この属性を設定すると、Button の高さと padding が変更されます
-
-import Size from '@site/static/usage/v7/button/size/index.md';
-
-<Size />
-
-## Icons
-
-import Icons from '@site/static/usage/v7/button/icons/index.md';
-
-<Icons />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/button/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
deleted file mode 100644
index e020f372d3b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/buttons.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: 'ion-buttons'
----
-
-import Props from '@ionic-internal/component-api/v7/buttons/props.md';
-import Events from '@ionic-internal/component-api/v7/buttons/events.md';
-import Methods from '@ionic-internal/component-api/v7/buttons/methods.md';
-import Parts from '@ionic-internal/component-api/v7/buttons/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/buttons/slots.md';
-
-<head>
-  <title>ion-buttons: Toolbar Element with Named Slots for Buttons</title>
-  <meta
-    name="description"
-    content="Buttonsコンポーネントは、コンテナ要素です。ツールバーに配置されるボタンはion-buttons要素の中にあるべきで、名前付きスロットを使って配置することができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-Buttons コンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/buttons/basic/index.md';
-
-<Basic />
-
-## Buttons Placement
-
-ツールバー内のボタンは、スロットという名前を使って配置することができます。下図は各スロットの説明です。
-
-| 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/v7/buttons/placement/index.md';
-
-<Placement />
-
-## Buttons のタイプ
-
-ツールバーのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例で [バックボタン](./back-button) と [メニューボタン](./menu-button) に含まれるプロパティは表示目的であり、正しい使用方法はそれぞれのドキュメントをご覧ください。
-
-import Types from '@site/static/usage/v7/buttons/types/index.md';
-
-<Types />
-
-## Collapsible Buttons
-
-ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[collapsible large titles](./title#collapsible-large-titles) と共に使用します。
-
-:::info
-
-この機能は iOS mode でのみ有効です。
-
-:::
-
-<!-- Reuse the playground from the Title directory -->
-
-import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
-
-<CollapsibleLargeTitleButtons />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
deleted file mode 100644
index 1887682865d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-content.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 'ion-card-content'
----
-
-import Props from '@ionic-internal/component-api/v7/card-content/props.md';
-import Events from '@ionic-internal/component-api/v7/card-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card-content/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-カードコンテンツは、カードの子コンポーネントで、そのコンテンツの周りにパディングを追加します。カードのテキストコンテンツは、カードコンテンツの中に配置することが推奨されます。
-
-詳しくは、[Card](./card)のドキュメントを参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
deleted file mode 100644
index a52e43fc976..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-header.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: 'ion-card-header'
----
-
-import Props from '@ionic-internal/component-api/v7/card-header/props.md';
-import Events from '@ionic-internal/component-api/v7/card-header/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card-header/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。
-
-詳しくは、[Card](./card)のドキュメントを参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
deleted file mode 100644
index b892d683f25..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-subtitle.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: 'ion-card-subtitle'
----
-
-import Props from '@ionic-internal/component-api/v7/card-subtitle/props.md';
-import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、card の子コンポーネントです。
-
-詳しくは、[Card](./card)のドキュメントを参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
deleted file mode 100644
index d9d2e3a8724..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card-title.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'ion-card-title'
----
-
-import Props from '@ionic-internal/component-api/v7/card-title/props.md';
-import Events from '@ionic-internal/component-api/v7/card-title/events.md';
-import Methods from '@ionic-internal/component-api/v7/card-title/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card-title/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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は、ion-cardの子コンポーネントです。カードタイトルのプロパティの詳細と、このコンポーネントがIonic Frameworkアプリでどのように使用されるかについては、こちらをご覧ください。"
-  />
-</head>
-
-<EncapsulationPill type="shadow" />
-
-Card title は card の子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。
-
-詳しくは、[Card](./card)のドキュメントを参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
deleted file mode 100644
index a51a754827c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/card.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: 'ion-card'
----
-
-import Props from '@ionic-internal/component-api/v7/card/props.md';
-import Events from '@ionic-internal/component-api/v7/card/events.md';
-import Methods from '@ionic-internal/component-api/v7/card/methods.md';
-import Parts from '@ionic-internal/component-api/v7/card/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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コンポーネントは、より詳細な情報へのエントリーポイントです。カードは単一のコンポーネントであることも、いくつかのヘッダ、タイトル、サブタイトル、コンテンツから構成されることもあります。"
-  />
-</head>
-
-<EncapsulationPill type="shadow" />
-
-カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。
-カードは 1 つのコンポーネントで構成することもできますが、
-多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。
-カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。
-[カードヘッダ](./card-header)、[カードタイトル](./card-title)、[カードサブタイトル](./card-subtitle)、[カードコンテンツ](./card-content)。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/card/basic/index.md';
-
-<Basic />
-
-## Media Cards
-
-import Media from '@site/static/usage/v7/card/media/index.md';
-
-<Media />
-
-## Card Buttons
-
-import Buttons from '@site/static/usage/v7/card/buttons/index.md';
-
-<Buttons />
-
-## List Card
-
-import List from '@site/static/usage/v7/card/list/index.md';
-
-<List />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/card/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
deleted file mode 100644
index 9ca943b325a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/checkbox.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: 'ion-checkbox'
----
-
-import Props from '@ionic-internal/component-api/v7/checkbox/props.md';
-import Events from '@ionic-internal/component-api/v7/checkbox/events.md';
-import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md';
-import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
-
-<head>
-  <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
-  <meta
-    name="description"
-    content="ion-checkboxは、セットから複数の選択肢を選択でき、アクティブにするとチェックされた（ticked）ように表示されます。Ionicアプリのチェックボックスコンポーネントについて説明します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Checkbox を使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkbox をクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
-
-<Basic />
-
-## Label Placement
-
-開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
-
-<LabelPlacement />
-
-## Justification
-
-開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
-
-import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
-
-<Justify />
-
-:::note
-`ion-item`は、 `justify` がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
-:::
-
-## Indeterminate Checkboxes
-
-import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md';
-
-<Indeterminate />
-
-## テーマ
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md';
-
-<CSSProps />
-
-## Interfaces
-
-### CheckboxChangeEventDetail
-
-```typescript
-interface CheckboxChangeEventDetail<T = any> {
-  value: T;
-  checked: boolean;
-}
-```
-
-### CheckboxCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface CheckboxCustomEvent<T = any> extends CustomEvent {
-  detail: CheckboxChangeEventDetail<T>;
-  target: HTMLIonCheckboxElement;
-}
-```
-
-## レガシーなチェックボックス構文からのマイグレーション
-
-Ionic 7.0 では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に 1 つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。
-
-import Migration from '@site/static/usage/v7/checkbox/migration/index.md';
-
-<Migration />
-
-:::note
-Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。
-:::
-
-### レガシーな構文の使い方
-
-Ionic は、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
deleted file mode 100644
index 91c819fc5bc..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/chip.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'ion-chip'
----
-
-import Props from '@ionic-internal/component-api/v7/chip/props.md';
-import Events from '@ionic-internal/component-api/v7/chip/events.md';
-import Methods from '@ionic-internal/component-api/v7/chip/methods.md';
-import Parts from '@ionic-internal/component-api/v7/chip/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
-
-<head>
-  <title>ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="ion-chipは、複雑な実体をコンタクトのような小さなブロックに表現します。1つのチップには、名前、アバター、テキスト、アイコンなど、複数の異なる要素を含めることができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Chip は連絡先などを複数の小さなエンティティで表示します。 Chip には avatars, text, や icons など、いくつかの異なる要素を含めることができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/chip/basic/index.md';
-
-<Basic />
-
-## Slotting Components and Icons
-
-import SlotExample from '@site/static/usage/v7/chip/slots/index.md';
-
-<SlotExample />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/chip/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
deleted file mode 100644
index 614b2d0bbea..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/col.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'ion-col'
----
-
-import Props from '@ionic-internal/component-api/v7/col/props.md';
-import Events from '@ionic-internal/component-api/v7/col/events.md';
-import Methods from '@ionic-internal/component-api/v7/col/methods.md';
-import Parts from '@ionic-internal/component-api/v7/col/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/col/slots.md';
-
-<head>
-  <title>ion-col: Column Component Padding, Size and Other Properties</title>
-  <meta
-    name="description"
-    content="ion-colは、rowの内側に入るカラムコンポーネントです。グリッド内のコンテンツは、カラムの中に入ります。列のパディング、サイズ、その他のプロパティについては、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Column は、[Grid](./grid) システムのセルラーコンポーネントで、[row](./row)の内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
-
-詳しくは、[grid](./grid)のドキュメントを参照してください。
-
-## Column Alignment
-
-デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSS クラス](/docs/layout/css-utilities#flex-item-properties) があります。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
deleted file mode 100644
index 9a90892e96c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/content.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: 'ion-content'
----
-
-import Props from '@ionic-internal/component-api/v7/content/props.md';
-import Events from '@ionic-internal/component-api/v7/content/events.md';
-import Methods from '@ionic-internal/component-api/v7/content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/content/slots.md';
-
-<head>
-  <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
-  <meta
-    name="description"
-    content="ion-contentは、スクロール可能な領域を制御する便利なメソッドを備えた、使いやすいコンテンツ領域を提供します。このIonicアプリ用CSSコンポーネントの詳細については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Content コンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、
-使いやすいコンテンツ領域を提供します。
-1 つのビューに表示できるコンテンツは 1 つだけです。
-
-Content は、他の多くの Ionic コンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSS および使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/content/basic/index.md';
-
-<Basic />
-
-## Header & Footer
-
-コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。
-
-import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md';
-
-<HeaderFooter />
-
-## Fullscreen Content
-
-デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。
-
-import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md';
-
-<Fullscreen />
-
-## コンテンツの固定
-
-スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSS の[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。
-
-import Fixed from '@site/static/usage/v7/content/fixed/index.md';
-
-<Fixed />
-
-## スクロールメソッド
-
-コンテンツには [メソッド](#methods) が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには `duration` を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。
-
-import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md';
-
-<ScrollMethods />
-
-## Scroll Events
-
-スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、`scrollEvents` を `true` に設定することで、有効にすることができます。これは、 スクロール [イベント](#events) を聞く前に必要です。
-
-import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md';
-
-<ScrollEvents />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/content/theming/colors/index.md';
-
-<Colors />
-
-### CSS Shadow Parts
-
-import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/index.md';
-
-<CSSParts />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/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
-
-必須ではありませんが、`ionScrollStart` と `ionScrollEnd` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。
-
-```typescript
-interface ScrollBaseCustomEvent extends CustomEvent {
-  detail: ScrollBaseDetail;
-  target: HTMLIonContentElement;
-}
-```
-
-### ScrollCustomEvent
-
-必須ではありませんが、`ionScroll` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。
-
-```typescript
-interface ScrollCustomEvent extends ScrollBaseCustomEvent {
-  detail: ScrollDetail;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
deleted file mode 100644
index 4755375901e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime-button.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: 'ion-datetime-button'
----
-
-import Props from '@ionic-internal/component-api/v7/datetime-button/props.md';
-import Events from '@ionic-internal/component-api/v7/datetime-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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 ボタンは、[Datetime](./datetime) コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。
-
-## 概要
-
-Datetime ボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。
-
-Angular、React、Vue などの JavaScript フレームワークで Datetime Button を使用する場合は、 [ion-modal の keepContentsMounted プロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされた datetime インスタンスがマウントされるようになります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';
-
-<Basic />
-
-## ローカライゼーション
-
-`ion-datetime-button` のローカライズされたテキストは、関連する `ion-datetime` インスタンスの `locale` プロパティによって決まります。詳しくは、[Datetime Localization](./datetime#localization) を参照してください。
-
-## モーダルやポップオーバーと使う
-
-`ion-datetime-button` は、マウントされた `ion-datetime` インスタンスと関連付ける必要があります。そのため、[Inline Modals](./modal#inline-modals-recommended) と [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に設定して使用しなければなりません。
-
-<!--
-## Customization
-
-TODO
-
-### Buttons
-
-TODO
-
-### テーマ
-
-TODO
--->
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## Methods
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS Custom Properties
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
deleted file mode 100644
index 61f1fb3fcf3..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/datetime.md
+++ /dev/null
@@ -1,464 +0,0 @@
----
-title: 'ion-datetime'
----
-
-import Props from '@ionic-internal/component-api/v7/datetime/props.md';
-import Events from '@ionic-internal/component-api/v7/datetime/events.md';
-import Methods from '@ionic-internal/component-api/v7/datetime/methods.md';
-import Parts from '@ionic-internal/component-api/v7/datetime/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/datetime/slots.md';
-
-import Basic from '@site/static/usage/v7/datetime/basic/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/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/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/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/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 HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md';
-import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md';
-
-import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/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>
-  <meta
-    name="description"
-    content="Datetimeは、日付や時刻を選択するためのピッカーインターフェイスを提供します。IonicのAPI Datetime入力コンポーネントは、好みの形式を簡単に表示し、値を管理します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Datetime はカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetime はネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic Framework の Datetime コンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetime の値を管理することが簡単にできます。
-
-## 概要
-
-これまで、JavaScript や HTML の入力で datetime の値を扱うことは、常に困難でした。
-入力でさえも、常に課題でした。
-特に、JavaScript の `Date` オブジェクトは、datetime 文字列を正しく解析したり、datetime 値をフォーマットしたりするのが難しいことで有名です。
-さらに悪いことに、ブラウザや JavaScript のバージョンによって、
-特にロケールごとに様々な datetime 文字列の解析が異なるのです。
-
-Ionic Framework の datetime は、開発者が一般的な落とし穴を回避できるように設計されており、
-開発者は簡単に datetime 値を操作し、ユーザーにシンプルな datetime ピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。
-
-### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
-
-Ionic Framework では、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。
-この値は、JavaScript の `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。
-ISO datetime フォーマットを使用することで、
-JSON オブジェクトやデータベース内でのシリアライズやパースが容易になります。
-
-以下は、 `ion-datetime` で使用できる ISO 8601 フォーマットの例です:
-
-| 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                     |
-
-年号は常に 4 桁、ミリ秒は（加算される場合は）常に 3 桁、その他は常に 2 桁であることに注意してください。
-ミリ秒は 3 桁、その他は 2 桁である。
-ですから、1 月を表す数字には 1 月を表す数字には常に先頭のゼロ、例えば`01`が付きます。
-また、時刻は常に 24 時間表示で、
-12 時間表示の時計では「00」は「午前 12 時」、「13」は「午後 1 時」、「23」は「午後 3 時」を意味します。
-
-:::note
-秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 `ion-datetime` は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。
-:::
-
-## 基本的な使い方
-
-<Basic />
-
-## 日付ボタンと使う
-
-モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 [ion-datetime-button](./datetime-button) を使用することをお勧めします。スペースに制約がある場合は、 `ion-datetime-button` を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。
-
-## 日付コンテナ
-
-### 日付の最小値と最大値
-
-日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。
-
-次の例では、日付の選択を 2022 年 3 月から 2022 年 5 月のみに制限しています。
-
-<MaxMin />
-
-### 特定の値を選択する
-
-`min` と `max` プロパティでは、日付の選択をある範囲に制限することができますが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。
-
-次の例では、15 分単位で分を選択することができます。また、日付を 5 刻みで選択することができます。
-
-<Values />
-
-### 高度な日付制限
-
-`isDateEnabled` プロパティを使用すると、開発者は ISO 8601 日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にするように `ion-datetime` をカスタマイズすることができます。
-`isDateEnabled` プロパティは、日付が有効かどうかを示す boolean 値を返す関数を受け付けます。この関数は、レンダリングされた各日付、前月、今月、来月に対して呼び出されます。カスタムの実装では、ジャンキングを避けるために、パフォーマンスを最適化する必要があります。
-
-次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 `date-fns` のような日付ユーティリティを使用することをお勧めします。
-
-<Advanced />
-
-## ローカライゼーション
-
-Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API を利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。
-
-### カスタムロケール
-
-特定のロケールが必要な場合、 `locale` プロパティを使用して設定することができます。ロケールは、表示される言語と日付・時刻のフォーマットの両方を制御します。
-
-次の例では、ロケールをスペイン語（Spanish）に設定する方法を示しています。
-
-<CustomLocale />
-
-:::note
-時刻の表記は、自動的にローカライズされません。詳しくは [Time Label](#time-label) を参照してください。
-:::
-
-### 時間サイクル
-
-`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は 12 時間のサイクルを使用します。
-
-時間サイクルには 4 つのタイプがあります。
-
-| 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
-ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
-:::
-
-どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 `hourCycle` プロパティが役に立ちます。
-
-次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に 12 時間周期を使用するように強制することができます。
-
-<HourCycle />
-
-### 週初めの日
-
-`ion-datetime`の場合、週初めの曜日はデフォルトで日曜日です。2022 年現在、Ionic がデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザ API はありませんが、これに関する作業は進行中です（参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) )．
-
-<FirstDayOfWeek />
-
-### 時刻表記
-
-時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionic では `time-label` スロットで簡単にカスタムのローカライズを提供することができます。
-
-<TimeLabel />
-
-### ロケールエクステンションタグ
-
-`ion-datetime` は、 `Intl.Locale` API の一部として [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) もサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードすることができます。開発者は、アプリの中で [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を使っている場合、拡張タグのアプローチを使うことを好むかもしれません。
-
-たとえば、 `en-GB` ロケールで 12 時間周期を使用したい場合は、 `locale` と `hourCycle` の両方のプロパティを使用するのではなく、拡張タグを使用します。
-
-<LocaleExtensionTags />
-
-:::note
-アプリで使用する前に、 `Intl.Locale` の [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) を必ず確認してください。
-:::
-
-## プレゼンテーション
-
-デフォルトでは、 `ion-datetime` は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。
-
-ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーは time ピッカーの後に表示されます。
-
-### 月と年の選択
-
-月と年の選択は、 `presentation` プロパティに `month-year` , `year-month` , `month` , または `year` を渡すことで行うことができます。
-
-この例では、 `month-year` を設定した datetime を示しています。
-
-<MonthAndYear />
-
-### 時刻の選択
-
-時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, `time` を渡すことで行うことができます。
-
-この例では、`time`の設定で datetime を表示しています。
-
-<Time />
-
-### 日付の選択
-
-時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, または `date` を渡すことで行うことで有効になります。
-
-この例では、`date`の設定で datetime を指定しています。
-
-<Date />
-
-### ピッカーのホイールスタイル
-
-デフォルトでは、Ionic は `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。preferWheel`が`true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。
-
-特定の `presentation` オプションには、グリッドとホイールの両方のスタイルがあり、開発者は `preferWheel` プロパティで選択することができます。その他の `presentation` の値はホイールスタイルのみを持ち、グリッドスタイルは決して表示されません。下の表は、どの `presentation` の値がグリッドスタイルとホイールスタイルを持つかを示しています。
-
-| `presentation` | グリッドシステム | ホイールシステム |
-| -------------- | ---------------- | ---------------- |
-| `date`         | Yes              | Yes              |
-| `date-time`    | Yes              | Yes              |
-| `month`        | No               | Yes              |
-| `month-year`   | No               | Yes              |
-| `time`         | No               | Yes              |
-| `time-date`    | Yes              | Yes              |
-| `year`         | No               | Yes              |
-
-以下の例では、ホイールピッカーに `presentation="date-time"` を指定しています。
-
-import Wheel from '@site/static/usage/v7/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 />
-
-## タイトル
-
-デフォルトでは、`ion-datetime`は、コンポーネントに関連するヘッダーやタイトルを表示しません。開発者は `showDefaultTitle` プロパティを使用して、デフォルトのタイトル/ヘッダー構成を表示することができます。また、 `title` スロットを使用して、ヘッダーに表示される内容をカスタマイズすることもできます。
-
-### デフォルトタイトルを表示
-
-<ShowingDefaultTitle />
-
-### タイトルをカスタマイズ
-
-<CustomizingTitle />
-
-## ボタン
-
-デフォルトでは、新しい日付が選択されると、新しい datetime の値で `ionChange` が発行されます。 `ionChange` を発行する前にユーザの確認を必要とする場合は、 `showDefaultButtons` プロパティを `true` に設定するか、 `buttons` スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メソッドを呼び出す必要があります。
-
-### 確認ボタンの表示
-
-デフォルトの Done ボタンと Cancel ボタンは、それぞれ [`confirm`](#confirm) と [`cancel`](#cancel) メソッドを呼び出すように予め設定されています。
-
-<ShowingConfirmationButtons />
-
-### ボタンテキストのカスタマイズ
-
-単純なユースケースの場合、開発者は `doneText` と `cancelText` プロパティを使用して、確認とキャンセルの値にカスタムボタンテキストを指定することができます。この方法は、ボタンのテキストを変更するだけで、カスタムビヘイビアを必要としない場合に推奨します。
-
-<CustomizingButtonTexts />
-
-### ボタン要素のカスタマイズ
-
-開発者は、高度なカスタム動作のための独自のボタンを提供することができる。
-
-`ion-datetime` には `confirm`, `cancel`, `reset` メソッドがあり、開発者がカスタムボタンをクリックした際に呼び出すことができる。また、 `reset` メソッドには、日付のリセット先を指定することができます。
-
-<CustomizingButtons />
-
-## Highlighting Specific Dates
-
-Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
-
-When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
-
-To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
-
-:::note
-This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
-:::
-
-### Using Array
-
-An array is better when the highlights apply to fixed dates, such as due dates.
-
-<HighlightedDatesArray />
-
-### Using Callback
-
-A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
-
-<HighlightedDatesCallback />
-
-## テーマ
-
-Ionic の強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。
-
-この方法の利点は、`ion-datetime`だけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。
-
-<Theming />
-
-## タイムゾーン
-
-Ionic の `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動作に従い、datetime コントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。
-
-[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなライブラリを使用して、datetime の値を希望するタイムゾーンに変換することをお勧めします。
-
-以下は、ISO-8601 文字列をユーザーのデバイスに設定されたタイムゾーンで表示するためのフォーマット例です。
-
-```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 });
-```
-
-### 日付の値のパース
-
-`ionChange` イベントは、イベントのペイロードに ISO-8601 形式の文字列として日付の値を出力します。アプリケーションのニーズに応じてこれをフォーマットするのは、開発者の責任です。日付の値をフォーマットするには、[date-fns](https://date-fns.org) を使用することを推奨します。
-
-以下は、月、日、年を表示するために ISO-8601 文字列をフォーマットする例である。
-
-```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.
-
-## 高度な日時の検証および操作
-
-datetime ピッカーは、正確なフォーマットを選択するシンプルさを提供し、
-標準化された [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を使用して、
-datetime 値を文字列として持続させることができます。
-しかし、 `ion-datetime` は、datetime の値を検証したり操作したりするときに、
-すべての状況を解決しようとするわけではないことに注意することが重要です。
-もし、datetime の値を特定のフォーマットからパースしたり、
-操作したり(例えば、日付に 5 日足したり、30 分を引いたり)、
-あるいは、特定のロケールにデータをフォーマットする必要があるなら、
-JavaScript で日付を扱うために [date-fns](https://date-fns.org) を使うことを強くお勧めします。
-
-## アクセシビリティ
-
-### キーボードナビゲーション
-
-`ion-datetime` は、コンポーネント内のフォーカス可能な要素間を移動するためのフルキーボードサポートを備えています。次の表は、それぞれのキーが何をするのかの詳細です。
-
-| 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.                  |
-
-#### 日付の表示
-
-| 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.       |
-
-#### 時刻、月、年のホイール
-
-タイムホイールピッカーを使用する場合、列がフォーカスされているときに、数字キーで時、分の値を選択することができます。
-
-| 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
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface DatetimeCustomEvent extends CustomEvent {
-  detail: DatetimeChangeEventDetail;
-  target: HTMLIonDatetimeElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
deleted file mode 100644
index 95513ba0d07..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-button.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: 'ion-fab-button'
----
-
-import Props from '@ionic-internal/component-api/v7/fab-button/props.md';
-import Events from '@ionic-internal/component-api/v7/fab-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
-
-<head>
-  <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
-  <meta
-    name="description"
-    content="フローティング・アクション・ボタン（FAB）は、アプリ内の主要なアクションを表します。アイコンは円形で、ボタンを押すと、関連するアクションを開くことができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-フローティングアクションボタン（FAB）は、アプリケーションの主要なアクションを表します。デフォルトでは、円形の形をしています。ボタンが押されると、関連するアクションがさらに開かれることもあります。
-
-その名が示すように、FAB は一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FAB ボタンを[fab](./fab)コンポーネントで包むことで実現されます。もしボタンが fab で包まれていない場合は、コンテンツと一緒にスクロールします。
-
-使用例については、[fab documentation](./fab)を参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
deleted file mode 100644
index 8fe6cacfddb..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab-list.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: 'ion-fab-list'
----
-
-import Props from '@ionic-internal/component-api/v7/fab-list/props.md';
-import Events from '@ionic-internal/component-api/v7/fab-list/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab-list/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/fab-list/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/fab-list/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-`ion-fab-list` 要素は、複数の fab button のコンテナです。この一連の fab button には、メインの fab button に関連するアクションが含まれ、メインの fab button をクリックすると表示されます。ボタンを表示する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に設定します。
-
-使用例については、[fab documentation](./fab)を参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
deleted file mode 100644
index fbeb3893747..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/fab.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: 'ion-fab'
----
-
-import Props from '@ionic-internal/component-api/v7/fab/props.md';
-import Events from '@ionic-internal/component-api/v7/fab/events.md';
-import Methods from '@ionic-internal/component-api/v7/fab/methods.md';
-import Parts from '@ionic-internal/component-api/v7/fab/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
-
-<head>
-  <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
-  <meta
-    name="description"
-    content="Fabs（フローティングアクションボタン）は、1つまたは複数のFabボタンを含むコンテナ要素です。Ionic FrameworkでAndroidおよびiOSアプリを作成する際にion-fabを使用します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Fab は、1 つ以上の[fab ボタン](./fab-button)を含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fab は 1 つのメイン Fab ボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む 1 つ以上の[fab リスト](./fab-list)を含むことができます。
-
-## 基本的な使い方
-
-import BasicUsage from '@site/static/usage/v7/fab/basic/index.md';
-
-<BasicUsage />
-
-## List Side
-
-[fab リスト](./fab-list)コンポーネントの`side`プロパティは、メイン fab ボタンと相対的に表示される場所を制御します。一つの fab は、`side`の値が全て異なる限り、複数の fab リストを持つことができます。
-
-import ListSide from '@site/static/usage/v7/fab/list-side/index.md';
-
-<ListSide />
-
-## ポジション
-
-fab を固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでの fab の配置を制御します。edge`プロップは、アプリのヘッダーやフッターに fab ボタンが重なるようにします。
-
-import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
-
-<Positioning />
-
-## ボタンサイズ
-
-メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。
-
-import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md';
-
-<ButtonSizing />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/fab/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.md';
-
-<CSSCustomProperties />
-
-### CSS Shadow Parts
-
-import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
-
-<CSSShadowParts />
-
-## アクセシビリティ
-
-### ラベル
-
-FAB はアイコンのみを含むことができるため、開発者は各`ion-fab-button`インスタンスに `aria-label` を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
deleted file mode 100644
index cc971843e19..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/footer.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: 'ion-footer'
----
-
-import Props from '@ionic-internal/component-api/v7/footer/props.md';
-import Events from '@ionic-internal/component-api/v7/footer/events.md';
-import Methods from '@ionic-internal/component-api/v7/footer/methods.md';
-import Parts from '@ionic-internal/component-api/v7/footer/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
-
-<head>
-  <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
-  <meta
-    name="description"
-    content="footerはページの下部に配置されるルートコンポーネントのことです。Ionicのfooterはion-toolbarのラッパーとして、コンテンツ領域が正しいサイズであることを確認することができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-フッターは、ページの下部に配置されるページのルートコンポーネントです。1 つ以上の [ツールバー](./toolbar) のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/footer/basic/index.md';
-
-<Basic />
-
-## 半透明のフッター
-
-フッターは、`translucent`プロパティを設定することで、ネイティブの iOS アプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
-
-import Translucent from '@site/static/usage/v7/footer/translucent/index.md';
-
-<Translucent />
-
-## フェードフッター
-
-多くのネイティブ iOS アプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。
-
-import Fade from '@site/static/usage/v7/footer/fade/index.md';
-
-<Fade />
-
-### 仮想スクロールでの使用方法
-
-フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
-
-import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-target/index.md';
-
-<CustomScrollTarget />
-
-## ボーダー
-
-`"md"`モードでは、フッターは上部に `box-shadow` が表示されます。`"ios"`モードでは、上部に `border` が表示されます。これらは、フッターに `.ion-no-border` クラスを追加することで削除することができます。
-
-import NoBorder from '@site/static/usage/v7/footer/no-border/index.md';
-
-<NoBorder />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
deleted file mode 100644
index 881a81a16f5..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/grid.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-title: 'ion-grid'
----
-
-import Props from '@ionic-internal/component-api/v7/grid/props.md';
-import Events from '@ionic-internal/component-api/v7/grid/events.md';
-import Methods from '@ionic-internal/component-api/v7/grid/methods.md';
-import Parts from '@ionic-internal/component-api/v7/grid/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
-
-<head>
-  <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
-  <meta
-    name="description"
-    content="Ion-Gridは、12カラムのレイアウトと画面サイズに応じて異なるブレークポイントを持つカスタムアプリケーションの表示レイアウトを構築するためのモバイルファーストのフレックスボックスシステムです。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の 3 つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ 12 列のレイアウトをベースにしています。カラムの数は、CSS を使ってカスタマイズすることができます。
-
-## 概要
-
-- グリッドは、すべての行と列のコンテナとして機能します。グリッドは、そのコンテナの幅を完全に占有します。
-  が、`fixed`プロパティを追加すると、画面サイズに応じた幅が設定されます。後述の[Fixed Grid](#fixed-grid)を参照してください。
-- 行は、列を適切に並べるための水平方向のグループです。
-- コンテンツは列の中に配置されるべきで、列だけが行の直属の子になることができる。
-- `size`プロパティは、1 行あたりデフォルトの 12 列のうち、使用する列の数を示します。
-  つまり、`size="4"`をカラムに追加することで、グリッドの 1/3、つまり 12 カラムのうち 4 カラムを占有することができます。
-- size に値を指定しないカラムは、自動的に等しい幅を持つようになります。例えば、4 つのカラムは、それぞれ自動的に 25％の幅になります。
-- カラムの幅はパーセンテージで設定されるため、常に流動的で親要素からの相対的なサイズになります。
-- 個々のカラムの間にはパディングがあります。しかし、パディングはグリッドから削除することができます。
-  カラムを表示するには、グリッドに `ion-no-padding` クラスを追加します。グリッドに適用できるその他のスタイルについては、[CSS Utilities](../layout/css-utilities) を参照してください。
-- グリッドの階層は 5 つあり、レスポンシブ・ブレークポイントごとに 1 つずつ、すべてのブレークポイント（特小）、小、中、大、特大が用意されています。
-- グリッドの階層は最小幅を基準としており、その階層とそれよりも大きい階層に適用されます。
-  (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
-- グリッドは CSS 変数でカスタマイズすることができます。 [グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
-
-## デフォルトのブレイキング・ポイント
-
-グリッドのデフォルトのブレークポイントとそれに対応するプロパティは、以下の表で定義されています。ブレイクポイントの値は、現時点ではカスタマイズすることができません。カスタマイズできない理由については、 [メディアクエリの変数](../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) |
-
-## 基本的な使い方
-
-デフォルトでは、すべてのデバイスと画面サイズにおいて、列は行の中で同じ幅を占めます。
-
-import Basic from '@site/static/usage/v7/grid/basic/index.md';
-
-<Basic />
-
-## グリッドの固定
-
-グリッドはコンテナの幅を 100%占有します。グリッドに `fixed` プロパティを追加することで、画面サイズに応じた幅を設定することができます。各ブレイクポイントのグリッドの幅は以下の表に記載されていますが、カスタマイズすることも可能です。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。以下の例を StackBlitz で開き、画面のサイズを変更すると、グリッドの幅が変化することを確認できます。
-
-| 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/v7/grid/fixed/index.md';
-
-<Fixed />
-
-## カラムのサイズ
-
-カラムは、全体のカラム数のうち特定の数を占めるように特定のサイズに設定したり、コンテンツに応じて幅を変更したりすることができます。デフォルトのカラム数は 12 ですが、これはカスタマイズ可能です。詳しくは、下記の [カラム数](#number-of-columns) の項を参照してください。
-
-### コンテンツベースサイズ
-
-`size`を`"auto"`に設定することで、カラムはコンテンツの自然な幅に基づいたサイズを設定することができます。これは、カラムを特定のピクセル数のような絶対的な幅に設定するときに必要です。自動幅のカラムの隣にあるカラムは、行を埋めるようにリサイズされます。
-
-import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md';
-
-<SizeAuto />
-
-### 指定されたサイズ
-
-カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。
-
-import Size from '@site/static/usage/v7/grid/size/index.md';
-
-<Size />
-
-### レスポンシブサイズ
-
-`size`プロパティは、すべての [ブレークポイント](#default-breakpoints) の列幅を変更します。また、Column では、"size" の末尾にブレークポイント名を付加したいくつかの size プロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムの幅を変更するために使用することができます。以下の例を StackBlitz で開き、画面のサイズを変更すると、カラムの幅が変化するのがわかります。
-
-import SizeResponsive from '@site/static/usage/v7/grid/size-responsive/index.md';
-
-<SizeResponsive />
-
-## 列のオフセット
-
-カラムは、全カラム数のうち一定のカラム数だけ右にずらすオフセットが可能です。
-
-### 指定されたオフセット
-
-カラムは、`offset`プロパティを用いて右に移動させることができます。このプロパティは、カラムの左マージンを指定したカラムの数だけ増やします。また、その右側にカラムが存在する場合は、そのカラムを移動させます。
-
-import Offset from '@site/static/usage/v7/grid/offset/index.md';
-
-<Offset />
-
-### レスポンシブオフセット
-
-`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの左マージンを変更します。また、カラムには、"offset"の末尾にブレークポイント名が付加されたいくつかの offset プロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムのオフセットを変更するために使用することができます。以下の例を StackBlitz で開き、画面のサイズを変更すると、カラムのオフセットが変化するのを確認できます。
-
-import OffsetResponsive from '@site/static/usage/v7/grid/offset-responsive/index.md';
-
-<OffsetResponsive />
-
-## コラム プッシュ＆プル
-
-カラムの総数のうち、一定のカラム数だけ、カラムを右に押したり、左に引いたりすることができます。
-
-### 指定されたプッシュ＆プル
-
-`push`と`pull`のプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、指定された列数だけ列の `left` と `right` を調整し、列の並び替えを簡単に行うことができます。この場合、他のカラムが配置されている場所にカラムを移動させると、カラムが重なることになります。
-
-import PushPull from '@site/static/usage/v7/grid/push-pull/index.md';
-
-<PushPull />
-
-### プッシュ＆プルのレスポンシブ対応
-
-`push`と`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの位置を変更します。また、カラムには、"push" / "pull "の末尾にブレークポイント名を付加した `push` と `pull` プロパティがいくつかあります。これらのプロパティは、画面サイズに応じてカラムの位置を変更するために使用することができます。以下の例を StackBlitz で開き、画面のサイズを変更すると、列の位置が変化するのがわかります。
-
-import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md';
-
-<PushPullResponsive />
-
-## Alignment
-
-### 垂直方向のアライメント
-
-行に異なるクラスを追加することで、すべての列を行の内側に垂直に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities#flex-container-properties) を参照してください。
-
-import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/index.md';
-
-<VerticalAlignment />
-
-### 水平アライメント
-
-行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities.md#flex-container-properties) を参照してください。
-
-import HorizontalAlignment from '@site/static/usage/v7/grid/horizontal-alignment/index.md';
-
-<HorizontalAlignment />
-
-## グリッドのカスタマイズ
-
-組み込みの CSS 変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。
-
-### 固定幅
-
-固定グリッドの幅は、CSS 変数 `--ion-grid-width` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS 変数を使用します。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例を StackBlitz で開き、画面のサイズを変更すると、グリッドの幅が変化するのが確認できます。
-
-import Width from '@site/static/usage/v7/grid/customizing/width/index.md';
-
-<Width />
-
-### 列数
-
-グリッドのカラム数は `--ion-grid-columns` という CSS 変数で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。
-
-import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md';
-
-<ColumnNumber />
-
-### Padding
-
-グリッドコンテナの padding は、CSS 変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS 変数を使用します。
-
-列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS 変数を使用します。
-
-import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md';
-
-<Padding />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
deleted file mode 100644
index 4a1330c721f..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/header.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: 'ion-header'
----
-
-import Props from '@ionic-internal/component-api/v7/header/props.md';
-import Events from '@ionic-internal/component-api/v7/header/events.md';
-import Methods from '@ionic-internal/component-api/v7/header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/header/slots.md';
-
-<head>
-  <title>ion-header: Header Parent Component for Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="ion-headerは、ツールバーを保持する親コンポーネントです。ion-headerは、ページの3つのルート要素のうちの1つである必要があることに注意することが重要です。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1 つ以上の[ツールバー](./toolbar)のラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/header/basic/index.md';
-
-<Basic />
-
-## 半透明のヘッダー
-
-ヘッダーは、`translucent`プロパティを設定することで、ネイティブの iOS アプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
-
-import Translucent from '@site/static/usage/v7/header/translucent/index.md';
-
-<Translucent />
-
-## 折りたたみのヘッダー
-
-Ionic では、iOS ネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に 1 つ、コンテンツの中に 1 つ、合計 2 つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
-
-import Condense from '@site/static/usage/v7/header/condense/index.md';
-
-<Condense />
-
-## フェードヘッダー
-
-多くのネイティブ iOS アプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの `collapse` プロパティを `"fade"` に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「ios」のときだけ適用されます。
-
-この機能は、[Condensed Header](#condensed-header)と組み合わせることができます。collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用されるはずです。
-
-import Fade from '@site/static/usage/v7/header/fade/index.md';
-
-<Fade />
-
-### 仮想スクロールの使用方法
-
-フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
-
-import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.md';
-
-<CustomScrollTarget />
-
-## Borders
-
-`"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。
-
-import NoBorder from '@site/static/usage/v7/header/no-border/index.md';
-
-<NoBorder />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
deleted file mode 100644
index e11b7429cf0..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/icon.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: 'ion-icon'
----
-
-<head>
-  <title>ion-icon: Icon Component for Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="Ion-icon is a component for displaying premium designed icons with support for SVG and web font."
-  />
-</head>
-
-Icon は、<a href="https://ionic.io/ionicons">Ionicons</a>ライブラリを通じて利用できるシンプルなコンポーネントで、すべての Ionic Framework アプリケーションにデフォルトでプリパッケージされています。Ionicons のセットから任意のアイコン、またはカスタム SVG を表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。
-
-利用可能なアイコンのリストは <a href="https://ionic.io/ionicons">ionic.io/ionicons</a>. For more information including styling and custom SVG usage, see <a href="https://ionic.io/ionicons/usage">the Usage page</a> をご覧ください。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/icon/basic/index.md';
-
-<Basic />
-
-## アクセシビリティ
-
-純粋に装飾的なコンテンツであるアイコンは、<code>aria-hidden="true"</code>を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。
-
-```html
-<ion-icon name="heart" aria-hidden="true"></ion-icon>
-```
-
-アイコンがインタラクティブな場合は、<code>aria-label</code>を追加することで代替テキストを定義する必要があります。
-
-```html
-<ion-icon name="heart" aria-label="Favorite"></ion-icon>
-```
-
-また、アイコンが説明する他の要素の中にある場合は、その要素に <code>aria-label</code> を付加し、 <code>aria-hidden</code> でアイコンを非表示とします。
-
-```html
-<ion-button aria-label="Favorite">
-  <ion-icon name="heart" aria-hidden="true"></ion-icon>
-</ion-button>
-```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
deleted file mode 100644
index 00a4c76bd3b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/img.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'ion-img'
----
-
-import Props from '@ionic-internal/component-api/v7/img/props.md';
-import Events from '@ionic-internal/component-api/v7/img/events.md';
-import Methods from '@ionic-internal/component-api/v7/img/methods.md';
-import Parts from '@ionic-internal/component-api/v7/img/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/img/slots.md';
-
-<head>
-  <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
-  <meta
-    name="description"
-    content="Imgタグは、タグがビューポートにあるときに、画像を遅延して読み込みます。大きなリストを作成する際にこのコンポーネントを利用すると、画像が表示されているときだけ読み込まれます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Img は、タグがビューポートに表示されているときに画像を Lazy Load するタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) を内部的に使用します。Intersection Observer は、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は `setTimeout` で処理されます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/img/basic/index.md';
-
-<Basic />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
deleted file mode 100644
index 360a98dda32..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll-content.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 'ion-infinite-scroll-content'
----
-
-import Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md';
-import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-`ion-infinite-scroll-content` コンポーネントは、`ion-infinite-scroll` で使用されるデフォルトの子コンポーネントです。無限スクロールのスピナーが表示されます。このスピナーはプラットフォームに応じて最適に表示され、無限スクロールの状態に応じて外観が変化します。`loadingSpinner` and `loadingText` プロパティを設定することにより、既定値のスピナーを変更したり、テキストを追加することができます。
-
-For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
deleted file mode 100644
index 7796dab51c7..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/infinite-scroll.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: 'ion-infinite-scroll'
----
-
-import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md';
-import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.md';
-import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.md';
-import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
-
-<head>
-  <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
-  <meta
-    name="description"
-    content="ion-infinite-scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離だけスクロールしたときに実行されるアクションを呼び出します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-Infinite Scroll コンポーネントは、ユーザーがページの下部または上部から指定された距離をスクロールしたときに実行されるアクションを呼び出します。
-
-ユーザが定義された距離に達したときに、`ionInfinite` イベントに割り当てられた関数が呼び出されます。この関数がすべてのタスクを完了したら、無限スクロールインスタンスに対して `complete()` メソッドを呼び出す必要があります。
-
-import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
-
-<Basic />
-
-## 無限スクロールのコンテンツ
-
-`ion-infinite-scroll`コンポーネントは、無限スクロールのロジックを持っています。コンテンツを表示するには、子コンポーネントが必要です。Ionic は、デフォルトでその `ion-infinite-scroll-content` コンポーネントを使用します。このコンポーネントは、無限スクロールを表示し、無限スクロールの状態に応じて外観を変更します。ユーザが使用しているプラットフォームに応じて最適なスピナーが表示されます。ただし、`ion-infinite-scroll-content` コンポーネントのプロパティを設定することにより、デフォルトのスピナーを変更したり、テキストを追加することができます。
-
-import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md';
-
-<InfiniteScrollContent />
-
-## Custom Content
-
-`ion-infinite-scroll` と `ion-infinite-scroll-content` コンポーネントを分離することで、開発者は必要に応じて独自のコンテンツコンポーネントを作成できます。このコンテンツには、SVG 要素から固有の CSS アニメーションを持つ要素まで、あらゆるものを含めることができます。
-
-import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md';
-
-<CustomContent />
-
-## Virtual Scroll の使い方
-
-無限スクロールを機能させるには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content`のスクロールを無効にし、`.ion-content-scroll-host`クラスのターゲットで、どの要素コンテナがスクロールコンテナを担当するのかを指定する必要があります。
-
-```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>
-```
-
-## アクセシビリティ
-
-開発者は、ユーザーがスクロールすると追加されたり削除されたりするスクロール可能なリストアイテムに `role="feed"` 属性を割り当てる必要があります。
-
-個々のリストアイテムは `role="article"` を持つか、`<article>` 要素を直接使用しなければならない。
-
-例えば、`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>
-```
-
-その他の情報については、[ARIA: feed role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role) のドキュメントを参照してください。
-
-## Interfaces
-
-### InfiniteScrollCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface InfiniteScrollCustomEvent extends CustomEvent {
-  target: HTMLIonInfiniteScrollElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
deleted file mode 100644
index 10d051a4d5d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/input.md
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: 'ion-input'
----
-
-import Props from '@ionic-internal/component-api/v7/input/props.md';
-import Events from '@ionic-internal/component-api/v7/input/events.md';
-import Methods from '@ionic-internal/component-api/v7/input/methods.md';
-import Parts from '@ionic-internal/component-api/v7/input/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/input/slots.md';
-
-<head>
-  <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
-  <meta
-    name="description"
-    content="ion-inputは、HTMLのinput要素のラッパーで、カスタムな値型のスタイルと機能を備えています。デスクトップでも動作し、モバイルではキーボードと統合されます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-input コンポーネントは、カスタム・スタイル設定と追加機能を持つ HTML の Input 要素のラッパーです。HTML Input とほとんど同じプロパティーを受け入れますが、デスクトップ・デバイスでは優れた動作をし、モバイル・デバイスではキーボードと統合されます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/input/basic/index.md';
-
-<Basic />
-
-## Types
-
-input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypress などの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
-
-import Types from '@site/static/usage/v7/input/types/index.md';
-
-<Types />
-
-## Label Placement
-
-ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
-
-<LabelPlacement />
-
-## Clear Options
-
-Inputs には、入力の操作方法に応じて、Input をクリアするための 2 つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Input に `value` があるときにクリアボタンを表示します。2 つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されている Input は、デフォルトで `clearOnEdit` が有効になっています。
-
-import Clear from '@site/static/usage/v7/input/clear/index.md';
-
-<Clear />
-
-## Filled Inputs
-
-Material Design では、Input に塗りつぶしのスタイルが用意されています。Input の `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
-
-`fill` スタイルは Input コンテナを視覚的に定義するため、`fill` を使用する Input は `ion-item` で使用すべきではありません。
-
-import Fill from '@site/static/usage/v7/input/fill/index.md';
-
-<Fill />
-
-## Helper & Error Text
-
-ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使用して入力の内部で使用することができます。エラーテキストは、 `ion-invalid` クラスと `ion-touched` クラスが `ion-input` に追加されていない限り表示されない。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。
-
-Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vue では、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
-
-import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
-
-<HelperError />
-
-## Input Counter
-
-Input Counter は、Input の下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
-
-import Counter from '@site/static/usage/v7/input/counter/index.md';
-
-<Counter />
-
-## Filtering User Input
-
-開発者は `ionInput` イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。
-
-ステート変数に値を格納する場合、ステート変数と `ion-input` コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と `ion-input` コンポーネントの値が確実に同期されます。
-
-import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
-
-<FilteringData />
-
-## テーマ
-
-### Colors
-
-`color`プロパティを設定すると、各 Input のカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
-
-import Colors from '@site/static/usage/v7/input/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-Input は scoped encapsulation を採用しており、実行時に各スタイルに追加のクラスを付加することで、CSS を自動的にスコープ化します。CSS で scoped セレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
-
-import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md';
-
-<CSSProps />
-
-## レガシーな Input 構文からの移行
-
-Ionic 7.0 では、よりシンプルな Input 構文が導入されました。この新しい構文は、Input のセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に 1 つの Input で実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使うには、3 つのステップがあります。
-
-1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用します。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
-2. Input 固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
-3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
-
-import Migration from '@site/static/usage/v7/input/migration/index.md';
-
-<Migration />
-
-### レガシー構文の使用
-
-Ionic は、アプリが最新の Input 構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、その Input のインスタンスにレガシー構文を使用するように強制できます。
-
-## Interfaces
-
-### InputChangeEventDetail
-
-```typescript
-interface InputChangeEventDetail {
-  value: string | undefined | null;
-}
-```
-
-### InputCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface InputCustomEvent extends CustomEvent {
-  detail: InputChangeEventDetail;
-  target: HTMLIonInputElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
deleted file mode 100644
index ba2892cec0b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-divider.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: 'ion-item-divider'
----
-
-import Props from '@ionic-internal/component-api/v7/item-divider/props.md';
-import Events from '@ionic-internal/component-api/v7/item-divider/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-divider/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
-
-<head>
-  <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
-  <meta
-    name="description"
-    content="Item Dividersは、リスト内のアイテムを区切るために使用するブロック要素です。リストヘッダーに似ていますが、項目のグループの間に挟みます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-アイテムディバイダは、リスト内の [アイテム](./item) を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/item-divider/basic/index.md';
-
-<Basic />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
deleted file mode 100644
index 8528e7522ff..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-group.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'ion-item-group'
----
-
-import Props from '@ionic-internal/component-api/v7/item-group/props.md';
-import Events from '@ionic-internal/component-api/v7/item-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-group/slots.md';
-
-<head>
-  <title>ion-item-group: Group Items to Divide into Multiple Sections</title>
-  <meta
-    name="description"
-    content="ion-item-groupには、アイテムを複数のセクションに分割するためのアイテムディバイダを含めることができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-アイテムグループとは、類似の[アイテム](./item)をまとめて整理するためのコンテナです。アイテムグループには、アイテムを複数のセクションに分けるための[アイテムディバイダー](./item-divider)を含めることができます。また、[スライドアイテム](./item-sliding)をグループ化するために使用することができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/item-group/basic/index.md';
-
-<Basic />
-
-## Sliding Items
-
-import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.md';
-
-<SlidingItems />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
deleted file mode 100644
index 9ee2ff1121e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-option.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'ion-item-option'
----
-
-import Props from '@ionic-internal/component-api/v7/item-option/props.md';
-import Events from '@ionic-internal/component-api/v7/item-option/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-option/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-option/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
-
-<head>
-  <title>ion-item-options: Option Button Components for Ionic Apps</title>
-  <meta
-    name="description"
-    content="ion-item-optionはion-item-slidingのオプションボタンで、ion-item-optionsの中に配置する必要があります。プロパティの詳細については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。アイテムオプション](./item-options)の中に配置する必要があります。ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。
-
-詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
deleted file mode 100644
index 0878d7c9763..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-options.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'ion-item-options'
----
-
-import Props from '@ionic-internal/component-api/v7/item-options/props.md';
-import Events from '@ionic-internal/component-api/v7/item-options/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-options/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-options/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-options/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-options/slots.md';
-
-<head>
-  <title>ion-item-options: Option Button Components for Ionic Apps</title>
-  <meta
-    name="description"
-    content="ion-item-optionsはion-item-slidingのためのものです。このオプションボタンは、開始側と終了側のどちらにも配置することができます。Ionicアプリでの使用については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[start または end](#side-description)のいずれかに配置することができます。
-
-詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
-
-## 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. |
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
deleted file mode 100644
index 973e8c98152..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item-sliding.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: 'ion-item-sliding'
----
-
-import Props from '@ionic-internal/component-api/v7/item-sliding/props.md';
-import Events from '@ionic-internal/component-api/v7/item-sliding/events.md';
-import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
-
-<head>
-  <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
-  <meta
-    name="description"
-    content="ion-item-sliding コンポーネントには、ドラッグしてボタンを表示するアイテムが含まれています。スライドしたアイテムが左から右にスワイプされると、オプションが表示されます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として [item](./item) コンポーネントが必要です。表示させるオプションはすべて [item options](./item-options) 要素に記述する必要があります。
-
-## 基本的な使い方
-
-スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTR では右から左へ、RTL では左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大 2 つまで同時に使用することができ、スワイプの方向によって 2 つの異なるオプションを表示させることができます。
-
-import Basic from '@site/static/usage/v7/item-sliding/basic/index.md';
-
-<Basic />
-
-## Icon Options
-
-[アイテムオプション](./item-option) でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な [アイテムオプションスロット](./item-option#slots) に変更することで位置を変更することが可能です。
-
-import Icons from '@site/static/usage/v7/item-sliding/icons/index.md';
-
-<Icons />
-
-## 拡張可能なオプション
-
-オプションは、あるポイントを超えてスワイプすると、アイテムの幅いっぱいに広がるように拡張することができます。これは、 [item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができるようになります。
-
-import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md';
-
-<Expandable />
-
-## Interfaces
-
-### ItemSlidingCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface ItemSlidingCustomEvent extends CustomEvent {
-  target: HTMLIonItemSlidingElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
deleted file mode 100644
index 04a83dca2ad..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/item.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: 'ion-item'
----
-
-import Props from '@ionic-internal/component-api/v7/item/props.md';
-import Events from '@ionic-internal/component-api/v7/item/events.md';
-import Methods from '@ionic-internal/component-api/v7/item/methods.md';
-import Parts from '@ionic-internal/component-api/v7/item/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/item/slots.md';
-
-<head>
-  <title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
-  <meta
-    name="description"
-    content="iOS/Android用ion-item要素は、テキスト、アイコン、画像、その他のカスタム要素を含みます。これらはリストに配置され、入力、削除、編集などが可能です。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒に[list](./list)に配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。
-
-## 基本的な使い方
-
-アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では `.ion-text-wrap` を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照してください。
-
-import Basic from '@site/static/usage/v7/item/basic/index.md';
-
-<Basic />
-
-## クリック可能な Items
-
-`href` か `button` プロパティが設定されている場合、item は "clickable（クリック可能）" と見なされます。clickable な items には、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickable な item は、`md` mode では ripple エフェクトを持ち、`ios` mode ではハイライト表示され、`ios` mode での [detail arrow](/#detail-arrows) が表示されます。
-
-import Clickable from '@site/static/usage/v7/item/clickable/index.md';
-
-<Clickable />
-
-## Detail Arrows
-
-デフォルトでは、[clickable な items](/#clickable-items) は、`ios` mode で右矢印アイコンを表示します。clickable な要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。
-
-import DetailArrows from '@site/static/usage/v7/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
-
-アイテムはデフォルトで下部のボーダーを挿入して表示します。ボーダーは左側にパディングを持ち、 `"start"` スロットにスロットされたコンテンツの下に表示されることはありません。 `lines` プロパティを `"full"` または `"none"` に変更すると、それぞれ全幅のボーダーが表示され、ボーダーを表示しないようになります。
-
-import Lines from '@site/static/usage/v7/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/v7/item/media/index.md';
-
-<Media />
-
-## Buttons in Items
-
-Buttons は、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
-
-import Buttons from '@site/static/usage/v7/item/buttons/index.md';
-
-<Buttons />
-
-## Icons in Items
-
-import Icons from '@site/static/usage/v7/item/icons/index.md';
-
-<Icons />
-
-## Item Inputs
-
-import Inputs from '@site/static/usage/v7/item/inputs/index.md';
-
-<Inputs />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/item/theming/colors/index.md';
-
-<Colors />
-
-### CSS Shadow Parts
-
-import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.md';
-
-<CSSParts />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md';
-
-<CSSProps />
-
-### Input ハイライト
-
-input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Input の下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。
-
-ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態で Ionic カラーが使用されます。フォーカスされている場合、Input のハイライトは `primary` カラーを使用します。Input が有効な場合は `success` カラーが使用され、無効な Input は `danger` カラーが使用されます。これは提供されている CSS プロパティを使ってカスタマイズすることができます。
-
-import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
-
-<InputHighlight />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
deleted file mode 100644
index 478edde23fe..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/label.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'ion-label'
----
-
-import Props from '@ionic-internal/component-api/v7/label/props.md';
-import Events from '@ionic-internal/component-api/v7/label/events.md';
-import Methods from '@ionic-internal/component-api/v7/label/methods.md';
-import Parts from '@ionic-internal/component-api/v7/label/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/label/slots.md';
-
-<head>
-  <title>Item Label Color and Properties for Applications | ion-label</title>
-  <meta
-    name="description"
-    content="Labelは、他のIonicコンポーネントと組み合わせて使用できるラッパー要素です。ion-labelでアイテムラベルの色やその他のプロパティを簡単にデザインできます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-Label は `ion-item`、`ion-input`、`ion-toggle` 等と共に使用できるラッパー(wrapper)要素です。item 内の label の位置は inline、fixed、stacked、または floating にすることができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/label/basic/index.md';
-
-<Basic />
-
-## Item Labels
-
-import Item from '@site/static/usage/v7/label/item/index.md';
-
-<Item />
-
-## Input Labels
-
-import Input from '@site/static/usage/v7/label/input/index.md';
-
-<Input />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/label/theming/colors/index.md';
-
-<Colors />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
deleted file mode 100644
index 837cb6317b5..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list-header.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 'ion-list-header'
----
-
-import Props from '@ionic-internal/component-api/v7/list-header/props.md';
-import Events from '@ionic-internal/component-api/v7/list-header/events.md';
-import Methods from '@ionic-internal/component-api/v7/list-header/methods.md';
-import Parts from '@ionic-internal/component-api/v7/list-header/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/list-header/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/list-header/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-リストヘッダーは、[リスト](./list)の内容を記述するために使用されるブロック要素です。アイテムディバイダー](./item-divider)とは異なり、リストヘッダーは[アイテム](./item)のリストの先頭で一度だけ使用する必要があります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/list-header/basic/index.md';
-
-<Basic />
-
-## リストヘッダーのボタン
-
-リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。
-
-import Buttons from '@site/static/usage/v7/list-header/buttons/index.md';
-
-<Buttons />
-
-## List Header の下線
-
-リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左 padding を伴う挿入ボーダーが表示されます。
-
-import Lines from '@site/static/usage/v7/list-header/lines/index.md';
-
-<Lines />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/list-header/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
deleted file mode 100644
index 3de0dbe0051..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/list.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: 'ion-list'
----
-
-import Props from '@ionic-internal/component-api/v7/list/props.md';
-import Events from '@ionic-internal/component-api/v7/list/events.md';
-import Methods from '@ionic-internal/component-api/v7/list/methods.md';
-import Parts from '@ionic-internal/component-api/v7/list/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/list/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/list/slots.md';
-
-<head>
-  <title>ion-list: Item List View Component for iOS and Android Apps</title>
-  <meta
-    name="description"
-    content="ion-listsは、テキスト、アイコン、トグルなどを含むアイテムの複数の行で構成されています。iOSおよびAndroidのIonicアプリのリストビューコンポーネントについて説明します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-リストは、Text、Buttons、Toggle を含むこと [アイテム](./item) の複数の行で構成されています。
-アイコンやサムネイルなど、さまざまな機能を備えています。リストには一般的に、画像やテキストなど、類似したデータ内容を持つアイテムが含まれます。
-
-リストは、アイテムをスワイプしてオプションを表示したり、ドラッグしてリスト内のアイテムを[並び替え](./reorder)したり、アイテムを削除したりするなどの操作をサポートしています。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/list/basic/index.md';
-
-<Basic />
-
-## Inset List
-
-リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。
-
-import Inset from '@site/static/usage/v7/list/inset/index.md';
-
-<Inset />
-
-## List Lines
-
-リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左 padding で調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。
-
-import Lines from '@site/static/usage/v7/list/lines/index.md';
-
-<Lines />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
deleted file mode 100644
index 3e48eb9cd99..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/loading.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: 'ion-loading'
----
-
-import Props from '@ionic-internal/component-api/v7/loading/props.md';
-import Events from '@ionic-internal/component-api/v7/loading/events.md';
-import Methods from '@ionic-internal/component-api/v7/loading/methods.md';
-import Parts from '@ionic-internal/component-api/v7/loading/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
-
-<head>
-  <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
-  <meta
-    name="description"
-    content="ion-loadingは、ユーザーのインタラクションをブロックしながら、アクティビティを表示します。ローディングインジケータは、アプリのコンテンツの上に表示され、解除することができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションで backdrop が含まれており、`showBackdrop: false` で無効にすることができます。
-
-## 基本的な使い方
-
-一度表示されると、ロードインジケータはデフォルトで無期限に表示されます。開発者は、コンポーネント上で `dismiss()` メソッドを呼び出すことで、作成後にローディングインジケータを手動で解除することができます。onDidDismiss` 関数を呼び出すと、ローディングインジケータが解除された後にアクションを実行することができます。
-
-また、ロードオプションの `duration` に表示するミリ秒数を渡すことで、特定の時間が経過した後にロードインジケータを自動的に解除するよう設定することもできます。
-
-### インラインロード (推奨)
-
-import Inline from '@site/static/usage/v7/loading/inline/index.md';
-
-<Inline />
-
-### Controller
-
-import Controller from '@site/static/usage/v7/loading/controller/index.md';
-
-<Controller />
-
-## Customization
-
-### スピナー
-
-使用するスピナーは `spinner` プロパティを使用してカスタマイズすることができます。オプションの完全なリストは [spinner property documentation](#spinner) を参照してください。
-
-import Spinners from '@site/static/usage/v7/loading/spinners/index.md';
-
-<Spinners />
-
-### テーマ
-
-Loading は scoped encapsulation を使用しています。これは、実行時に各スタイルに追加のクラスを付加することで、自動的に CSS をスコープ化することを意味します。CSS で scoped セレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
-
-カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。
-
-import Theming from '@site/static/usage/v7/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.
-:::
-
-## アクセシビリティ
-
-Ionic は自動的に Loading の`role`を[`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)に設定します。
-
-Loading に`message`プロパティが定義されている場合、`aria-labelledby`属性は自動的に message 要素の ID に設定されます。そうでない場合、`aria-labelledby`は設定されず、開発者は `htmlAttributes` プロパティを使用して `aria-label` を提供する必要があります。
-
-すべての ARIA 属性は、Loading の`htmlAttributes`プロパティにカスタム値を定義することによって、手動で上書きすることができます。
-
-## 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;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
deleted file mode 100644
index 6d513e2a1e4..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-button.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'ion-menu-button'
----
-
-import Props from '@ionic-internal/component-api/v7/menu-button/props.md';
-import Events from '@ionic-internal/component-api/v7/menu-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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は、アプリのページでメニューを開くためのアイコンと機能を自動的に作成するコンポーネントです。ion-menu-buttonの詳細については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Menu Button コンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。
-
-詳しくは、[menu](./menu)のドキュメントをご覧ください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
deleted file mode 100644
index 8a384b22d45..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu-toggle.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: 'ion-menu-toggle'
----
-
-import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md';
-import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
-
-<head>
-  <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
-  <meta
-    name="description"
-    content="MenuToggleコンポーネントは、メニューの開閉を切り替えるために使用します。デフォルトでは、選択されたメニューがアクティブなときにのみ表示されます。使用方法についてもっと読む。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Menu Toggle コンポーネントは、メニューの開閉を切り替えるために使用することができます。
-
-メニュートグルは、選択されたメニューが有効な場合にのみ表示されます。メニューが無効になっている場合や、分割ペインとして表示されている場合は、メニュートグルは非表示になります。常にメニュートグルを表示するには、`autoHide`プロパティを`false`に設定します。
-
-詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
deleted file mode 100644
index d9ae803f1cf..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/menu.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: 'ion-menu'
----
-
-import Props from '@ionic-internal/component-api/v7/menu/props.md';
-import Events from '@ionic-internal/component-api/v7/menu/events.md';
-import Methods from '@ionic-internal/component-api/v7/menu/methods.md';
-import Parts from '@ionic-internal/component-api/v7/menu/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/menu/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/menu/slots.md';
-
-<head>
-  <title>ion-menu: API Framework Docs for Types of Menu Components</title>
-  <meta
-    name="description"
-    content="ion-menuコンポーネントは、現在のビューの横からスライドして入ってくるナビゲーションドロワーです。Ionic APIで利用可能なメニューの種類については、フレームワークのドキュメントをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Menu コンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。
-デフォルトでは左からスライドしますが、サイドはオーバーライドできます。
-Menu の表示は mode によって異なりますが、表示する type は menu の type によって変更することができます。
-menu 要素は、root content 要素と同じ深度である必要があります。
-コンテンツにつける Menu の数に制限はありません。
-これらはテンプレートから、またはプログラムで MenuController を使用して制御できます。
-
-## 基本的な使い方
-
-import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
-
-<BasicUsage />
-
-## Menu Toggle
-
-[ion-menu-toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
-
-import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
-
-<MenuToggle />
-
-## Menu Types
-
-`type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
-
-import MenuType from '@site/static/usage/v7/menu/type/index.md';
-
-<MenuType />
-
-## テーマ
-
-### CSS Shadow Parts
-
-import Theming from '@site/static/usage/v7/menu/theming/index.md';
-
-<Theming />
-
-## Interfaces
-
-### MenuCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface MenuCustomEvent<T = any> extends CustomEvent {
-  detail: T;
-  target: HTMLIonMenuElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
deleted file mode 100644
index bc235f5d79a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/modal.md
+++ /dev/null
@@ -1,300 +0,0 @@
----
-title: 'ion-modal'
----
-
-import Props from '@ionic-internal/component-api/v7/modal/props.md';
-import Events from '@ionic-internal/component-api/v7/modal/events.md';
-import Methods from '@ionic-internal/component-api/v7/modal/methods.md';
-import Parts from '@ionic-internal/component-api/v7/modal/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/modal/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/modal/slots.md';
-
-<head>
-  <title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
-  <meta
-    name="description"
-    content="ion-modal は、モバイルアプリケーションのコンテンツの上に表示されるダイアログで、インタラクションを再開する前に解除する必要があります。カスタムモーダルコンポーネントについて詳しくはこちら"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Modal は、アプリのコンテンツの上に表示されるダイアログであり、インタラクションを再開する前にはアプリによって消されなければならない。選択できるオプションが多い場合や、リスト内の項目をフィルタする場合、およびその他の多くのユースケースで、Select コンポーネントとして役立ちます。
-
-## インラインモーダル(推奨)
-
-テンプレートに直接コンポーネントを記述することで、 `ion-modal` を使用することができます。これにより、モーダルを表示するために必要なハンドラの数を減らすことができます。
-
-Angular、React、Vue で `ion-modal` を使用する場合、渡されたコンポーネントはモーダルが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークなしで `ion-modal` を使用しても、渡されたコンポーネントは破棄されません。この機能が必要な場合は、代わりに `modalController` を使用することをお勧めします。
-
-import InlineModalTriggerExample from '@site/static/usage/v7/modal/inline/basic/index.md';
-
-<InlineModalTriggerExample />
-
-### `isOpen` の使用
-
-`ion-modal` の `isOpen` プロパティを使用すると、開発者がアプリケーションの状態からモーダルの表示状態を制御することができます。つまり、 `isOpen` を `true` に設定するとモーダルが表示され、 `isOpen` を `false` に設定するとモーダルが解除されます。
-
-`isOpen` は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に `false` にセットされることはありません。開発者は `ionModalDidDismiss` または `didDismiss` イベントを監視して、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-modal` の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供する boolean 値だけを気にすればいいです。双方向のデータバインディングでは、モーダルは boolean 値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
-
-import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open/index.md';
-
-<InlineModalIsOpenExample />
-
-## モーダルコントローラ
-
-`ModalController` を使用すると、開発者はプログラムによって `ion-modal` を表示させることができます。開発者は、モーダルの表示と非表示を完全に制御することができます。
-
-import ControllerExample from '@site/static/usage/v7/modal/controller/index.md';
-
-<ControllerExample />
-
-## モーダルの終了を防止する
-
-モーダルにデータを入力しているとき、誤ってデータが失われないようにする方法があると便利です。 `ion-modal` の `canDismiss` プロパティは、モーダルをいつ終了させるかを開発者がコントロールできるようにします。
-
-canDismiss`プロパティの使用方法には、boolean 値の設定とコールバック関数の設定の 2 種類があります。
-
-:::note
-Note: シートモーダルでは、`0` ブレークポイントが設定されていない場合、スワイプ時に `canDismiss` はチェックされません。しかし、`Esc` やハードウェアのバックボタンを押すと、チェックされます。
-:::
-
-### boolean 値の設定
-
-開発者は `canDismiss` に boolean 値を設定することができます。 `canDismiss` が `true` の場合、ユーザーがモーダルを閉じようとすると、モーダルは閉じます。 `canDismiss` が `false` の場合、ユーザーがモーダルを閉じようとしても、モーダルは閉じません。
-
-boolean 値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は `canDismiss` を `false` に設定し、チェックボックスがチェックされたら `true` に更新することが可能です。
-
-import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/boolean/index.md';
-
-<CanDismissBooleanExample />
-
-### コールバック関数を設定する
-
-開発者は `canDismiss` を関数として設定することができます。この関数は、 `true` か `false` のどちらかに解決する `Promise` を返さなければなりません。もし、約束が `true` に解決されたら、モーダルは解除されます。もし、プロミスが `false` に解決された場合、モーダルは解除されません。
-
-コールバック関数を設定するのは、モーダルを終了する前に確認ダイアログを表示するなど、終了条件が複雑な場合に使用する必要があります。ユーザーがこのダイアログで選択したオプションは、モーダルの終了を続行するかどうかの判断に使用されます。
-
-コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionic が、あなたのコールバック関数が何を解決するか事前に知らないためです。
-
-import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/function/index.md';
-
-<CanDismissFunctionExample />
-
-### スワイプで閉じないようにする
-
-開発者は、ユーザーがスワイプしてモーダルを閉じるのを防ぎたい場合があります。これは `canDismiss` のコールバック関数を設定し、`role` が `gesture` でないことをチェックすることで実現できます。
-
-import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md';
-
-<CanDismissPreventSwipeToCloseExample />
-
-## モーダルの種類
-
-### 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`.
-
-開発者は、アプリのメインコンテンツの上にカードが積み重なったように表示されるカードモーダル効果を作成することができます。カードモーダルを作成するには、開発者は `ion-modal` に `presentingElement` プロパティと `swipeToClose` プロパティを設定する必要があります。
-
-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/v7/modal/card/basic/index.md';
-
-<CardExample />
-
-### シートモーダル
-
-マップアプリのドロワーコンポーネントに似たシートモーダルエフェクトを作成します。シートモーダルを作成するには、`ion-modal` に `breakpoints` と `initialBreakpoint` プロパティを設定する必要があります。
-
-`breakpoints`プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。 `breakpoints` プロパティが `[0, 0.5, 1]` の場合、シートをスワイプすると、モーダルの 0%、50%、100%を表示することができることを示します。モーダルが 0%にスワイプされると、モーダルは自動的にディスクローズされます。 `0` ブレークポイントが含まれていない場合、スワイプ時にモーダルを解除することはできませんが、`Esc` またはハードウェアの戻るボタンを押すことで解除することができることに注意してください。
-
-`initialBreakpoint` プロパティは、シート モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。 `initialBreakpoint` の値は、 `breakpoints` 配列にも存在する必要があります。例えば、 `breakpoints` の値が `[0, 0.5, 1]` である場合、 `initialBreakpoint` の値が `0.5` であれば、 `breakpoints` 配列に `0.5` が存在するため有効であると考えられます。 `0.25` は `breakpoints` 配列に存在しないので、 `initialBreakpoint` の値は無効になります。
-
-`backdropBreakpoint` プロパティは、 `ion-backdrop` がフェードインし始めるポイントをカスタマイズするために使用することができます。これは、シートの下にインタラクティブなコンテンツがあるようなインタフェースを作成する際に便利です。よくある使用例としては、シートが完全に展開されるまでマップがインタラクティブになるような、マップをオーバーレイするシートモーダルです。
-
-import SheetExample from '@site/static/usage/v7/modal/sheet/basic/index.md';
-
-<SheetExample />
-
-#### 背景コンテンツとのインタラクション
-
-import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/background-content/index.md';
-
-<SheetBackgroundContentExample />
-
-#### ハンドルの動作
-
-シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。
-
-import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle-behavior/index.md';
-
-<SheetHandleBehaviorExample />
-
-## スタイリング
-
-モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。この動作は、インライン モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
-
-:::note
-Ionic の Angular アプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。詳しくは、以下の Angular セクションの [Style Placement](#style-placement) をお読みください。
-:::
-
-:::note
-`ion-modal` は、積み重ねられたモーダルは同じサイズであるという前提で動作します。その結果、後続の各モーダルはボックスシャドウを持たず、背景の不透明度は `0` になります。これは、モーダルが追加されるたびに影や背景が濃くなるのを避けるためです。これは、CSS 変数 `--box-shadow` と `--backdrop-opacity` を設定することで変更することができます。
-:::
-
-```
-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/v7/modal/styling/theming/index.md';
-
-<ThemeExample />
-
-### アニメーション
-
-アニメーションビルダーを使用し、`enterAnimation` と `leaveAnimation` にアニメーションを割り当てることで、表示時、非表示時のアニメーションをカスタマイズすることができます。
-
-import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/index.md';
-
-<AnimationsExample />
-
-## Custom Dialogs
-
-`ion-modal`は、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、[ion-alert](./alert)や[ion-loading](./loading)などのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。
-
-import CustomDialogs from '@site/static/usage/v7/modal/custom-dialogs/index.md';
-
-<CustomDialogs />
-
-カスタムダイアログを作成する際に注意すべき点がいくつかあります。
-
-- `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。
-- カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。
-
-## Interfaces
-
-### ModalOptions
-
-下記は `modalController` を使用する際に利用できるすべてのオプションです。これらのオプションは、 `modalController.create()` を呼び出す際に指定します。
-
-```typescript
-interface ModalOptions {
-  component: any;
-  componentProps?: { [key: string]: any };
-  presentingElement?: HTMLElement;
-  showBackdrop?: boolean;
-  backdropDismiss?: boolean;
-  cssClass?: string | string[];
-  animated?: boolean;
-  canDismiss?: boolean | ((data?: any, role?: string) => 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
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface ModalCustomEvent extends CustomEvent {
-  target: HTMLIonModalElement;
-}
-```
-
-## アクセシビリティ
-
-### Keyboard Navigation
-
-| Key   | Function            |
-| ----- | ------------------- |
-| `Esc` | Dismisses the modal |
-
-### ラベル
-
-モーダルには [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) という役割があります。そのため、開発者はモーダルに適切なラベル付けを行う必要があります。モーダルが `ion-title` を使用している場合、 `ion-modal` で [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) を設定すると、内部のテキストをモーダル自体のラベルに使用することができます。モーダルに追加の説明テキストが含まれている場合、このテキストは [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使ってモーダルと関連付けることができます。
-
-### スクリーンリーダー
-
-モーダルには `aria-modal` 属性が適用されています。この属性は、支援技術によるナビゲーションをモーダル要素のコンテンツに制限させることがあります。その結果、次や前の項目に移動するジェスチャを使用しても、モーダルの外側の要素にフォーカスが当たらない場合があります。これは、`backdropBreakpoint` プロパティを使用して、シート モーダルでバックドロップを無効にした場合にも当てはまります。
-
-開発者が手動でフォーカスを移動しても、アシストはモーダル要素のコンテンツへのナビゲーションを制限しません。ただし、Ionic では、フォーカスのトラッピングが有効になっているモーダルに対して、モーダルの外側に手動でフォーカスを移動することはサポートされていません。
-
-See https://w3c.github.io/aria/#aria-modal for more information.
-
-### フォーカスのトラッピング
-
-モーダルが表示されると、フォーカスは表示されたモーダルの内側に閉じ込められます。ユーザーは、モーダル内の他のインタラクティブ要素にフォーカスを合わせることができますが、モーダルが表示されている間は、モーダルの外側のインタラクティブ要素にフォーカスを合わせることができません。複数のスタック モーダルを表示するアプリケーションでは、最後に表示されたモーダルにフォーカスが移動します。
-
-`backdropBreakpoint` プロパティによって背景が無効にされたシート モーダルは、フォーカスのトラッピングの対象にはなりません。
-
-### シートモーダル
-
-シートモーダルでは、`backdropBreakpoint` プロパティが使用されているとき、ユーザがモーダルの後ろのコンテンツとインタラクトできるようにします。バックドロップは、指定された `backdropBreakpoint` までは無効になり、それ以降は有効になります。
-
-バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。入力支援は、`aria-modal` の使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。オートフォーカスなどの機能は、ユーザーに警告することなく、支援技術が 2 つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。
-
-## パフォーマンス
-
-### インナー コンテンツのマウント
-
-インラインの `ion-modal` のコンテンツは、閉じられるとアンマウントされます。このコンテンツがレンダリングに時間がかかる場合、開発者は `keepContentsMounted` プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。これにより、モーダルが開かれたときにインナー コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。
-
-import Mount from '@site/static/usage/v7/modal/performance/mount/index.md';
-
-<Mount />
-
-開発者は `keepContentsMounted` を使用する際に、以下の点に注意する必要があります。
-
-- この機能は、既存のパフォーマンスの問題に対処するための最後の手段として使用すべきです。この機能を使用する前に、パフォーマンスのボトルネックを特定し、解決するように努めてください。さらに、パフォーマンスの問題を予測するためにこの機能を使用しないでください。
-
-- この機能は、JavaScript フレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。
-
-- この機能はインラインモーダルでのみ動作します。 `modalController` で作成されたモーダルは先に作成されないので、インナーコンテンツも作成されません。
-
-- インナー コンポーネントの JavaScript Framework ライフサイクル フックはすべて、モーダルが表示されたときではなく、モーダルがマウントされたときに実行されます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
deleted file mode 100644
index f1c273c6d12..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav-link.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'ion-nav-link'
----
-
-import Props from '@ionic-internal/component-api/v7/nav-link/props.md';
-import Events from '@ionic-internal/component-api/v7/nav-link/events.md';
-import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md';
-import Parts from '@ionic-internal/component-api/v7/nav-link/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
-
-<head>
-  <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
-  <meta
-    name="description"
-    content="ナビゲーションリンクは、指定されたコンポーネントにナビゲートします。これは、push(), pop(), setRoot() メソッドを呼び出すための要素形式です。ion-nav-linkの詳細については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-ナビゲーションリンクは指定されたコンポーネントに移動するために使用されます。コンポーネントは `forward`, `back` または `root` コンポーネントとして移動することができます。
-
-これは、ナビゲーションコントローラの `push()`, `pop()`, `setRoot()` メソッドを呼び出すための要素形式となります。
-
-See the [nav](./nav#using-navlink) documentation for more information.
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
deleted file mode 100644
index 33c31009111..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/nav.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 'ion-nav'
----
-
-import Props from '@ionic-internal/component-api/v7/nav/props.md';
-import Events from '@ionic-internal/component-api/v7/nav/events.md';
-import Methods from '@ionic-internal/component-api/v7/nav/methods.md';
-import Parts from '@ionic-internal/component-api/v7/nav/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
-
-<head>
-  <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="ion-navは、任意のコンポーネントをロードしたり、新しいコンポーネントをスタックにPushするために単独で利用できます。ナビビューをロードしたり、他をプッシュしても、ルータ全体に影響を与えることはありません。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Nav は、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
-
-RouterOutlet とは異なり、Nav は特定のルーターに関連付けられていません。つまり、Nav コンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリの URL に縛られないモーダルを持つことができるユースケースに適しています。
-
-## NavLink を利用する
-
-NavLink は、Nav と対話する際の簡略化された API です。開発者は、コンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
-
-import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
-
-<NavLinkExample />
-
-## Interfaces
-
-### NavCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface NavCustomEvent extends CustomEvent {
-  target: HTMLIonNavElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
deleted file mode 100644
index 2d3e984ad43..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/note.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'ion-note'
----
-
-import Props from '@ionic-internal/component-api/v7/note/props.md';
-import Events from '@ionic-internal/component-api/v7/note/events.md';
-import Methods from '@ionic-internal/component-api/v7/note/methods.md';
-import Parts from '@ionic-internal/component-api/v7/note/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/note/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/note/slots.md';
-
-<head>
-  <title>ion-note: Note Text Elements for iOS and Android Ionic Apps</title>
-  <meta
-    name="description"
-    content="ion-notesは、一般的に詳細な情報を提供するテキスト要素です。iOSおよびAndroidのIonicアプリでnotesをどのように使用し、どのようにスタイリングできるかをご紹介します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Note は、一般的に詳細情報を提供するサブタイトルとして使用されるテキスト要素です。デフォルトではグレーで表示されるように設計されています。Note は、メタデータテキストとしてアイテム内で使用することができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/note/basic/index.md';
-
-<Basic />
-
-## Item Notes
-
-import Item from '@site/static/usage/v7/note/item/index.md';
-
-<Item />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/note/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
deleted file mode 100644
index 645c695b3fc..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/picker.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: 'ion-picker'
----
-
-import Props from '@ionic-internal/component-api/v7/picker/props.md';
-import Events from '@ionic-internal/component-api/v7/picker/events.md';
-import Methods from '@ionic-internal/component-api/v7/picker/methods.md';
-import Parts from '@ionic-internal/component-api/v7/picker/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
-
-<head>
-  <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
-  <meta
-    name="description"
-    content="Pickerは、ボタンの列とその下にコラムを表示するダイアログです。イオンピッカーは、アプリのコンテンツの上、そしてビューポートの下に表示されます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-Picker は、画面下にボタンと列の行を表示するダイアログです。アプリケーションのコンテンツの上部とビューポートの下部に表示されます。
-
-## インラインピッカー（推奨）
-
-`ion-picker`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ピッカーを表示するために必要なハンドラの数を減らすことができます。
-
-import Trigger from '@site/static/usage/v7/picker/inline/trigger/index.md';
-
-<Trigger />
-
-### `isOpen` を使う
-
-`ion-picker` の `isOpen` プロパティにより、開発者はアプリケーションの状態からピッカーの表示状態を制御することができます。つまり、`isOpen` を `true` に設定するとピッカーが表示され、`isOpen` を `false` に設定するとピッカーは退場します。
-
-`isOpen` は一方通行のデータバインディングを使用しているため、ピッカーが終了したときに自動的に `false` に設定されることはありません。開発者は `ionPickerDidDismiss` または `didDismiss` イベントを待ち、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-picker`の内部がアプリケーションの状態と密に結合するのを防ぐためです。一方通行のデータバインディングでは、ピッカーはリアクティブ変数が提供するブーリアン値のみに関心を持つ必要があります。一方通行のデータバインディングでは、ピッカーはリアクティブ変数のブール値だけでなく、リアクティブ変数の存在も気にする必要があります。このため、非決定的な動作が発生し、アプリケーションのデバッグが困難になる可能性があります。
-
-import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md';
-
-<IsOpen />
-
-## Controller Pickers
-
-`pickerController`は、ピッカーの表示・非表示をより細かく制御する必要がある場合に使用することができます。
-
-import Controller from '@site/static/usage/v7/picker/controller/index.md';
-
-<Controller />
-
-## マルチカラム
-
-`columns`プロパティは、異なる選択肢を複数の列で表示するピッカーを表示するために使用することができます。
-
-import MultipleColumn from '@site/static/usage/v7/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;
-  /**
-   * The optional text to assign as the aria-label on the picker column option.
-   */
-  ariaLabel?: string;
-}
-```
-
-### 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;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
deleted file mode 100644
index 9d5e8f44e4b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/popover.md
+++ /dev/null
@@ -1,262 +0,0 @@
----
-title: 'ion-popover'
----
-
-import Props from '@ionic-internal/component-api/v7/popover/props.md';
-import Events from '@ionic-internal/component-api/v7/popover/events.md';
-import Methods from '@ionic-internal/component-api/v7/popover/methods.md';
-import Parts from '@ionic-internal/component-api/v7/popover/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
-
-<head>
-  <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
-  <meta
-    name="description"
-    content="ion-popoverは、現在のページの上に表示されるダイアログです。iOSとAndroidデバイス用のpopover UIコンポーネントとCSSカスタムプロパティについて説明します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Popover は、現在のページの上部に表示されるダイアログです。これは何にでも使用できますが、通常はナビゲーションバーに収まらないオーバーフローアクションに使用されます。
-
-`ion-popover` を使用するには、インラインで使用する方法と `popoverController` を使用する方法がります。それぞれの方法には異なる考慮点があるので、あなたのユースケースに最も適した方法を使用するようにしましょう。
-
-## インラインポップオーバー
-
-`ion-popover` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ポップオーバーを表示するために必要なハンドラの数を減らすことができます。
-
-Angular、React、Vue で `ion-popover` を使用する場合、渡されたコンポーネントはポップオーバーが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークを使わずに `ion-popover` を使用しても、渡したコンポーネントは破棄されない。この機能が必要な場合は、代わりに `popoverController` を使用することを推奨します
-
-### いつ使うか
-
-ポップオーバーをインラインで使用することは、ポップオーバーを開くためにクリックイベントを明示的に配線したくない場合に便利です。例えば、 `trigger` プロパティを使用して、クリックされたときにポップオーバーを表示するボタンを指定することができます。また、`trigger-action` プロパティを使って、トリガーが左クリックされたとき、右クリックされたとき、ホーバーされたときにポップオーバーを表示するかどうかをカスタマイズすることができます。
-
-もし、ポップオーバーの表示と非表示を細かく制御したい場合は、 `popoverController` を使用することをお勧めします。
-
-### Angular
-
-渡されたコンポーネントは、ポップオーバーが表示されたときに作成され、ポップオーバーが解除されたときに破棄される必要があるため、内部で `<ng-content>` を使用してコンテンツを投影することはできません。代わりに、`<ng-container>` を使用します。これは、`<ng-template>` が渡されることを想定しています。そのため、コンポーネントを渡す際には、`<ng-template>`でラップする必要があります。
-
-```html
-<ion-popover [isOpen]="isPopoverOpen">
-  <ng-template>
-    <app-popover-content></app-popover-content>
-  </ng-template>
-</ion-popover>
-```
-
-### トリガー
-
-インラインの `ion-popover` のトリガーは、インタラクションされたときにポップオーバーを開く要素です。インタラクションの動作は `trigger-action` プロパティを設定することでカスタマイズすることができます。なお、`trigger-action="context-menu"` はシステムのデフォルトのコンテキストメニューを開かせないようにします。
-
-:::note
-`popoverController` を使用する場合、`ion-popover` は前もって作成されないので、トリガーは適用されません。
-:::
-
-import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigger/index.md';
-
-<InlineTrigger />
-
-### isOpen プロパティ
-
-インラインポップオーバーは `isOpen` プロパティを `true` に設定することによっても開くことができます。この方法はトリガーよりも細かくポップオーバーをコントロールする必要がある場合に使用されます。
-
-`isOpen` は一方向のデータバインディングを使用しています。つまり、ポップオーバーが閉じられたときに自動的に `false` に設定されることはありません。開発者は `ionPopoverDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` にセットする必要があります。この理由は、`ion-popover` の内部がアプリケーションの状態と密に結合されるのを防ぐためである。一方通行のデータバインディングでは、ポップオーバーはリアクティブ変数が提供するブーリアン値だけを気にすればよいのです。双方向のデータバインディングでは、ポップオーバーはブール値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは非決定的な動作につながり、アプリケーションのデバッグを難しくします。
-
-import IsOpenTrigger from '@site/static/usage/v7/popover/presenting/inline-isopen/index.md';
-
-<IsOpenTrigger />
-
-## ポップオーバーコントローラ
-
-Ionic Framework からインポートされた `popoverController` を使用することで、`ion-popover` をプログラム的に表示することも可能です。これにより、インラインポップオーバーのカスタマイズ以上に、ポップオーバーを表示するタイミングを完全に制御することができます。
-
-### どのような場合に使用するのか
-
-ポップオーバーはインラインで記述することをお勧めします。ポップオーバーをインラインで書くことが現実的でない複雑なユースケースの場合にのみ `popoverController` を使用すべきです。コントローラを使用する場合、ポップオーバーは前もって作成されないので、 `trigger` や `trigger-action` などのプロパティはここでは適用されません。さらに、ネストされたポップオーバーはコントローラのアプローチと互換性がありません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに自動的にアプリケーションのルートに追加されるからです。
-
-### React
-
-コントローラの代わりに、React には `useIonPopover` という Hook があり、同じような振る舞いをします。なお、 `useIonPopover` は `<IonApp>` の子孫であることが必要です。もし、 `<IonApp>` の外側でポップオーバーを使用する必要がある場合は、代わりにインラインポップオーバーを使用することを検討してください。
-
-### 使い方
-
-import ControllerExample from '@site/static/usage/v7/popover/presenting/controller/index.md';
-
-<ControllerExample />
-
-## スタイリング
-
-ポップオーバーはアプリケーションのルートで表示されるので、アプリケーション全体を覆うように表示されます。この動作はインラインポップオーバーとコントローラから表示されるポップオーバーの両方に適用されます。そのため、カスタムポップオーバースタイリングは特定のコンポーネントにスコープすることができません。代わりに、スタイルはグローバルに適用されなければなりません。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
-
-:::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/v7/popover/customization/styling/index.md';
-
-<Styling />
-
-## 配置
-
-### リファレンス
-
-ポップオーバーを表示するとき、Ionic Framework はポップオーバーを相対的に表示するための参照点を必要とします。`reference="event"` を指定すると、ポップオーバーはトリガー要素で dispatch されたポインターイベントの x-y 座標に相対的に表示されます。 `reference="trigger"` を指定すると、ポップオーバーはトリガー要素のバウンディングボックスに対して相対的に表示されます。
-
-### Side
-
-`side` プロパティを使用することで、基準点の上、右、左、下のいずれかにポップオーバーを配置することができます。また、LTR や RTL のモードに応じてサイドを切り替えたい場合は、 `start` や `end` を使用することができます。
-
-### Alignment
-
-`alignment` プロパティは、ポップオーバーのエッジをトリガーエレメントの対応するエッジに揃えることができます。使用される正確なエッジは `side` プロパティの値に依存します。
-
-### Side and Alignment Demo
-
-import Positioning from '@site/static/usage/v7/popover/customization/positioning/index.md';
-
-<Positioning />
-
-### オフセット
-
-ポップオーバーの位置をより細かく制御したい場合は、CSS 変数 `--offset-x` と `--offset-y` を使用することができます。例えば、`--offset-x: 10px` はポップオーバーのコンテンツを `10px` だけ右側に移動させます。
-
-## サイズ調整
-
-ドロップダウンメニューを作成するとき、ポップオーバーの幅をトリガー要素の幅と一致させたい場合があります。トリガーの幅を事前に知らずにこれを行うのは厄介です。 `size` プロパティを `'cover'` に設定すると、Ionic Framework はポップオーバーの幅をトリガー要素の幅に一致させるようにします。
-
-`popoverController` を使用する場合は、`event` オプションでイベントを指定する必要があり、Ionic Framework は `event.target` を参照要素に使用します。このパターンの例は [controller demo](#controller-popovers) を参照してください。
-
-import Sizing from '@site/static/usage/v7/popover/customization/sizing/index.md';
-
-<Sizing />
-
-## ポップオーバーをネスト
-
-インラインで `ion-popover` を使用する場合、ポップオーバーを入れ子にして入れ子のドロップダウンメニューを作成することができます。このとき、最初のポップオーバーの背景だけが表示されるので、ポップオーバーを開くたびに画面がだんだん暗くなっていくことはありません。
-
-`dismissOnSelect` プロパティを使用すると、ポップオーバーのコンテンツがクリックされたときに自動的にポップオーバーを閉じることができます。この動作は、他のポップオーバーのトリガー要素をクリックしたときには適用されません。
-
-:::note
-`popoverController` を使用する場合、ネストしたポップオーバーは作成できません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに、自動的にアプリケーションのルートに追加されるからです。
-:::
-
-import NestedPopover from '@site/static/usage/v7/popover/nested/index.md';
-
-<NestedPopover />
-
-## Interfaces
-
-以下に、`popoverController` を使用する際に利用可能なすべてのオプションを示します。これらのオプションは `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
-
-以下に、`ion-popover` のすべてのカスタム Type を紹介します。
-
-```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';
-```
-
-## アクセシビリティ
-
-### キーボードナビゲーション
-
-`ion-popover` は、ポップオーバー内のフォーカス可能な要素間を移動するための基本的なキーボードをサポートしています。次の表は、それぞれのキーが何をするのかの詳細です:
-
-| 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` は、 `button` プロパティを持つ `ion-item` 要素間を移動するための矢印キーを完全にサポートしています。最も一般的な使用例としては、デスクトップにフォーカスしたアプリケーションにおけるドロップダウンメニューとして使用することができます。基本的なキーボードのサポートに加え、次の表ではドロップダウンメニューの矢印キーのサポートについて詳しく説明します。
-
-| 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
-
-### Inner コンテンツのマウント
-
-インライン `ion-popover` のコンテンツは、閉じるとマウントされなくなります。このコンテンツのレンダリングにコストがかかる場合、開発者は `keepContentsMounted` プロパティを使用して、ポップオーバーがマウントされると同時にコンテンツをマウントすることができます。これにより、ポップオーバーが開いたときに内部コンテンツがすでにマウントされているため、アプリケーションの応答性を最適化することができます。
-
-import Mount from '@site/static/usage/v7/popover/performance/mount/index.md';
-
-<Mount />
-
-開発者は `keepContentsMounted` を使用する際に、以下の点に留意する必要があります。
-
-- この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用する必要があります。この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用されるべきです。また、パフォーマンスの問題を予期してこの機能を使用しないでください。
-
-- この機能は、JavaScript フレームワークを使用する場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをポップオーバーに渡すことができ、コンテンツは自動的にレンダリングされます。
-
-- この機能はインラインポップオーバーでのみ機能します。 `popoverController`で作成されたポップオーバーは先に作成されないので、内部のコンテンツも作成されません。
-
-- 内部コンポーネントの JavaScript Framework ライフサイクルフックは、ポップオーバーが表示されたときではなく、ポップオーバーがマウントされたときにすぐに実行されます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
deleted file mode 100644
index 3779e3fb1b5..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/progress-bar.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: 'ion-progress-bar'
----
-
-import Props from '@ionic-internal/component-api/v7/progress-bar/props.md';
-import Events from '@ionic-internal/component-api/v7/progress-bar/events.md';
-import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
-
-<head>
-  <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
-  <meta
-    name="description"
-    content="ion-progress-barは、水平方向の読み込みインジケーターで、フォームの送信や更新の保存など、進行中のアプリ処理のステータスをユーザーに知らせます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには 2 つのタイプがあります。プログレスバーには、`determinate`と`indeterminate`の 2 種類があります。
-
-## Determinate
-
-Determinate はデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は `value` プロパティを設定することで表現されます。これは、進捗が 0 から 100%まで増加するように表示するために使用できます。
-
-import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md';
-
-<Determinate />
-
-### Buffer
-
-`buffer`プロパティが設定されている場合、バッファーストリームがアニメーションの円と共に表示され、アクティビティを示します。また、`buffer`プロパティの値は、目に見えるトラックの量によって表されます。もし `buffer` の値が `value` プロパティより小さければ、目に見えるトラックはありません。もし `buffer` が `1` に等しければ、バッファースリームは隠されます。
-
-import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md';
-
-<Buffer />
-
-## Indeterminate
-
-Indeterminate タイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは `value` と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。
-
-import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/index.md';
-
-<Indeterminate />
-
-## Progress Bars in Toolbars
-
-<!-- Reuse the playground from the Toolbar directory -->
-
-import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md';
-
-<Toolbar />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.md';
-
-<CSSProps />
-
-### CSS Shadow Parts
-
-import CSSParts from '@site/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md';
-
-<CSSParts />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
deleted file mode 100644
index 05a231c6db5..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio-group.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'ion-radio-group'
----
-
-import Props from '@ionic-internal/component-api/v7/radio-group/props.md';
-import Events from '@ionic-internal/component-api/v7/radio-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/radio-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
-
-<head>
-  <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
-  <meta
-    name="description"
-    content="radio groupとは、radioボタンのグループです。radio groupは、ユーザーがセットから最大1つのradioボタンを選択できるようにします。 ion-radio-groupの使用方法について、詳しくはこちらをご覧ください。"
-  />
-</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
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface RadioGroupCustomEvent<T = any> extends CustomEvent {
-  detail: RadioGroupChangeEventDetail<T>;
-  target: HTMLIonRadioGroupElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
deleted file mode 100644
index f8a0a8981ad..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/radio.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: 'ion-radio'
----
-
-import Props from '@ionic-internal/component-api/v7/radio/props.md';
-import Events from '@ionic-internal/component-api/v7/radio/events.md';
-import Methods from '@ionic-internal/component-api/v7/radio/methods.md';
-import Parts from '@ionic-internal/component-api/v7/radio/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
-
-<head>
-  <title>ion-radio Component: Radio Property for iOS and Android</title>
-  <meta
-    name="description"
-    content="Radioコンポーネントは、iOSおよびAndroidデバイスのion-radio-groupsの内部で使用する必要があります。Radioコンポーネントの使用方法とインストール方法については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-ラジオは、[ラジオグループ](./radio-group)の中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループの value プロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
-
-ラジオがラジオグループの中にある場合、いつでもチェックされるのは 1 つのラジオだけです。複数の項目を選択する場合は、[checkboxes](./checkbox)を代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/radio/basic/index.md';
-
-<Basic />
-
-## Label Placement
-
-開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
-
-<LabelPlacement />
-
-## Justification
-
-開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
-
-import Justify from '@site/static/usage/v7/radio/justify/index.md';
-
-<Justify />
-
-:::note
-`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
-:::
-
-## ラジオの選択を解除する
-
-デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの `allowEmptySelection` プロパティを使用することで変更することができ、ラジオを非選択にすることができます。
-
-import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md';
-
-<EmptySelection />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/radio/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.md';
-
-<CSSProps />
-
-### CSS Shadow Parts
-
-import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index.md';
-
-<CSSParts />
-
-## Legacy Radio Syntax からの移行
-
-Ionic 7.0 では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に 1 つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使用するには、`ion-label`を削除して、`ion-radio`の内部にラベルを直接渡します。ラベルの配置は `ion-radio` の `labelPlacement` プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、`ion-radio` の `justify` プロパティを使用して制御することができます。
-
-import Migration from '@site/static/usage/v7/radio/migration/index.md';
-
-<Migration />
-
-:::note
-Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
-:::
-
-### レガシー構文の使用
-
-Ionic は、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
deleted file mode 100644
index 6bcd319947a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/range.md
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: 'ion-range'
----
-
-import Props from '@ionic-internal/component-api/v7/range/props.md';
-import Events from '@ionic-internal/component-api/v7/range/events.md';
-import Methods from '@ionic-internal/component-api/v7/range/methods.md';
-import Parts from '@ionic-internal/component-api/v7/range/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/range/slots.md';
-
-<head>
-  <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
-  <meta
-    name="description"
-    content="ion-rangeは、スライダーを動かして値の範囲を選択することができます。2つのノブを使用できますが、1つは値を制御し、ラベルはどちらか一方に置くことができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Range スライダは、スライダノブを動かして、ユーザーが値の範囲を選択できるようにするものです。デフォルトでは、1 つのノブがレンジの値を制御します。この動作は [dual knobs](#dual-knobs) を使ってカスタマイズすることができます。
-
-デフォルトでは、Range スライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/range/basic/index.md';
-
-<Basic />
-
-## Label Placement
-
-import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
-
-<LabelsPlayground />
-
-## Decorations
-
-Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.
-
-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 DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md';
-
-<DecorationsPlayground />
-
-## Dual Knobs
-
-Dual knobs はユーザーが下限と上限の値を選択するために使用できる 2 つの knobs コントロールを導入しています。選択されると、Range は選択された上下限の値を含む [RangeValue](#rangevalue) を持つ `ionChange` イベントを発信します。
-
-import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.md';
-
-<DualKnobs />
-
-## ピン
-
-`pin` 属性は、ドラッグしたときにノブの上にレンジの値を表示します。これにより、ユーザは Range 内の特定の値を選択することができます。
-
-`pinFormatter` 関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。
-
-import Pins from '@site/static/usage/v7/range/pins/index.md';
-
-<Pins />
-
-## Snapping & Ticks
-
-Ticks は Range 上で利用可能な各値のインジケータを表示します。Ticks を使用するためには、開発者は `snaps` と `ticks` プロパティの両方を `true` に設定する必要があります。
-
-snaps を有効にし、knob をドラッグして放すと、Range knob は最も近い利用可能な値にスナップします。
-
-import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md';
-
-<SnappingTicks />
-
-## イベントハンドリング
-
-### Using `ionChange`
-
-`ionChange` イベントは Range knob の値の変更を監視します。
-
-import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.md';
-
-<IonChangeEvent />
-
-### `ionKnobMoveStart` と `ionKnobMoveEnd` を使う
-
-マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knob のドラッグが開始されると `ionKnobMoveStart` イベントが発行されます。逆に、`ionKnobMoveEnd`は Range knob がリリースされたときに発生します。両イベントは `RangeValue` タイプで発生し、`dualKnobs` プロパティと組み合わせて動作します。
-
-import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/index.md';
-
-<IonKnobMoveEvent />
-
-## テーマ
-
-## CSS カスタムプロパティ
-
-Range には、アプリケーションのデザインに合わせて Range コンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。
-
-import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.md';
-
-<CSSProps />
-
-### CSS Shadow Parts
-
-Range には [CSS Shadow Parts](#css-shadow-parts) があり、Range コンポーネント内の特定の要素ノードを完全にカスタマイズすることができます。CSS Shadow Parts は最も多くのカスタマイズ機能を提供し、Range コンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。
-
-import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index.md';
-
-<CSSParts />
-
-## Migrating from Legacy Range Syntax
-
-A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an range, resolves accessibility issues, and improves the developer experience.
-
-Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-### 最新の構文の使い方
-
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`.
-
-import Migration from '@site/static/usage/v7/range/migration/index.md';
-
-<Migration />
-
-:::note
-In past versions of Ionic, `ion-item` was required for `ion-range` to function properly. Starting in Ionic 7.0, `ion-range` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-range` to function properly.
-:::
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-range` to `true` to force that instance of the range to use the legacy syntax.
-
-## Interfaces
-
-### RangeChangeEventDetail
-
-```typescript
-interface RangeChangeEventDetail {
-  value: RangeValue;
-}
-```
-
-### RangeKnobMoveStartEventDetail
-
-```typescript
-interface RangeKnobMoveStartEventDetail {
-  value: RangeValue;
-}
-```
-
-### RangeKnobMoveEndEventDetail
-
-```typescript
-interface RangeKnobMoveEndEventDetail {
-  value: RangeValue;
-}
-```
-
-### RangeCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface RangeCustomEvent extends CustomEvent {
-  detail: RangeChangeEventDetail;
-  target: HTMLIonRangeElement;
-}
-```
-
-## Types
-
-### RangeValue
-
-```typescript
-type RangeValue = number | { lower: number; upper: number };
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
deleted file mode 100644
index e629542f0e8..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher-content.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 'ion-refresher-content'
----
-
-import Props from '@ionic-internal/component-api/v7/refresher-content/props.md';
-import Events from '@ionic-internal/component-api/v7/refresher-content/events.md';
-import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md';
-import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/refresher-content/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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.
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
deleted file mode 100644
index 5602192b79b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/refresher.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: 'ion-refresher'
----
-
-import Props from '@ionic-internal/component-api/v7/refresher/props.md';
-import Events from '@ionic-internal/component-api/v7/refresher/events.md';
-import Methods from '@ionic-internal/component-api/v7/refresher/methods.md';
-import Parts from '@ionic-internal/component-api/v7/refresher/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/refresher/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
-
-<head>
-  <title>ion-refresher: Pull-to-Refresh Page Content on Ionic Apps</title>
-  <meta
-    name="description"
-    content="ion-refresherは、コンテンツコンポーネントにpull-to-refresh機能を提供します。これにより、ユーザーはタッチ操作でページをプルダウンし、より多くのデータを取得することができます。"
-  />
-</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.
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/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/v7/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/v7/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 が機能するためには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content` のスクロールを無効にし、`.ion-content-scroll-host` クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するかを指定する必要があります。
-
-import CustomScrollTarget from '@site/static/usage/v7/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/v7/refresher/advanced/index.md';
-
-<Advanced />
-
-## Interfaces
-
-### RefresherEventDetail
-
-```typescript
-interface RefresherEventDetail {
-  complete(): void;
-}
-```
-
-### RefresherCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface RefresherCustomEvent extends CustomEvent {
-  detail: RefresherEventDetail;
-  target: HTMLIonRefresherElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
deleted file mode 100644
index bc7960fb62b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder-group.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: 'ion-reorder-group'
----
-
-import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
-import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
-
-<head>
-  <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="ion-reorder-groupは、Ionicアプリでion-reorderコンポーネントを使用するアイテムのためのラッパーコンポーネントです。ion-reorder-groupの使い方はこちらをご覧ください。"
-  />
-</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
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface ItemReorderCustomEvent extends CustomEvent {
-  detail: ItemReorderEventDetail;
-  target: HTMLIonReorderGroupElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
deleted file mode 100644
index f12a4975d3e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/reorder.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: 'ion-reorder'
----
-
-import Props from '@ionic-internal/component-api/v7/reorder/props.md';
-import Events from '@ionic-internal/component-api/v7/reorder/events.md';
-import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
-import Parts from '@ionic-internal/component-api/v7/reorder/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
-
-<head>
-  <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
-  <meta
-    name="description"
-    content="ion-reorderは、ion-reorder-groupの中のアイテムをドラッグ＆ドロップするために使用されるアンカーです。カスタム並び替えアイコンとアイテムの詳細については、こちらをご覧ください。"
-  />
-</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.
-
-## 基本的な使い方
-
-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/v7/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/v7/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/v7/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/v7/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/v7/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/v7/reorder/custom-scroll-target/index.md';
-
-<CustomScrollTarget />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
deleted file mode 100644
index 58661e2ca9c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/ripple-effect.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: 'ion-ripple-effect'
----
-
-import Props from '@ionic-internal/component-api/v7/ripple-effect/props.md';
-import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md';
-import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md';
-import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/ripple-effect/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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="ripple effect buttonコンポーネントは、Material Designインクのリップルインタラクション効果を追加します。ion-appでのみ使用可能で、任意のコンポーネントに追加することができます。"
-  />
-</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.
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/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/v7/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/v7/ripple-effect/customizing/index.md';
-
-<Customizing />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
deleted file mode 100644
index e157bff6220..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route-redirect.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: 'ion-route-redirect'
----
-
-import Props from '@ionic-internal/component-api/v7/route-redirect/props.md';
-import Events from '@ionic-internal/component-api/v7/route-redirect/events.md';
-import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.md';
-import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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は、ion-routerの直接の子として使用され、URLから他のURLへのリダイレクトを行います。ルートリダイレクトプラグインについては、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-A route redirect can only be used with an `ion-router` as a direct child of it.
-
-:::note
-Note: このコンポーネントは、バニラおよびステンシル JavaScript プロジェクトでのみ使用してください。Angular プロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angular ルータを使用してください。
-:::
-
-ルートリダイレクトには、2 つの設定可能なプロパティがあります。
-
-- `from`
-- `to`
-
-これは、ある URL から別の URL へとリダイレクトします。定義された `ion-route-redirect` ルールがマッチすると、ルータは `from` プロパティで指定されたパスから `to` プロパティで指定されたパスへリダイレクトします。リダイレクトを行うには、`from` のパスがナビゲートされる URL と完全に一致する必要があります。
-
-## 複数ルートのリダイレクト
-
-任意の数のリダイレクトルートを `ion-router` の内部で定義することができますが、合致するのは 1 つだけです。
-
-ルートリダイレクトは、それ自身のリダイレクトの後に別のリダイレクトを呼び出すことはありません。
-
-次の 2 つのリダイレクトを考えてみましょう。
-
-```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>
-```
-
-ユーザーが `/admin` に移動した場合、ルーターは `/login` にリダイレクトし、そこで停止します。複数のリダイレクトを評価することはありません。
-
-## 使い方
-
-```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>
-```
-
-### ルートリダイレクトのガード
-
-リダイレクトルートは、ユーザーが認証されているかどうかなど、与えられた条件に基づいて、ユーザーがアプリケーションの特定の領域に移動するのを防ぐためのガードとして機能することができます。
-
-ルートリダイレクトは動的に追加・削除することができ、一部のルートをアクセスできないようにリダイレクト（ガード）することができます。次の例では、 `isLoggedIn` が `false` の場合、すべての URL `*` は `/login` にリダイレクトされます。
-
-```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);
-}
-```
-
-また、`to`の値は条件に基づいて変更することもできます。次の例では、ルートリダイレクトはユーザーがログインしているかどうかをチェックし、ログインしていない場合は `/login` url にリダイレクトします。
-
-```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');
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
deleted file mode 100644
index b05629ae811..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/route.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-title: 'ion-route'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@ionic-internal/component-api/v7/route/props.md';
-import Events from '@ionic-internal/component-api/v7/route/events.md';
-import Methods from '@ionic-internal/component-api/v7/route/methods.md';
-import Parts from '@ionic-internal/component-api/v7/route/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/route/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/route/slots.md';
-
-<head>
-  <title>ion-route: API Route Component for Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="ion-routeコンポーネントは、コンポーネントを受け取り、Browser URLがURLプロパティに一致したときにレンダリングします。Ionic AppsのAPIルートコンポーネントの詳細はこちら。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-The route component takes a component and renders it when the Browser URL matches the url property.
-
-:::note
-Note: このコンポーネントは、バニラおよびステンシル JavaScript プロジェクトでのみ使用してください。Angular プロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angular ルータを使用してください。
-:::
-
-## ナビゲーションフック
-
-ナビゲーションフックは、タスクを実行したり、ナビゲーションガードとして動作させるために使用することができます。フックは、各 `ion-route` の `beforeEnter` と `beforeLeave` プロパティに関数を提供することで使用します。`true` を返すとナビゲーションを進めることができ、`false` を返すとナビゲーションがキャンセルされる。NavigationHookOptions` 型のオブジェクトを返すと、ナビゲーションを別のページにリダイレクトすることができます。
-
-## Interfaces
-
-```typescript
-interface NavigationHookOptions {
-  /**
-   * A valid path to redirect navigation to.
-   */
-  redirect: string;
-}
-```
-
-## 使い方
-
-<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>
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
deleted file mode 100644
index 622de5cb636..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-link.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-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 '@ionic-internal/component-api/v7/router-link/props.md';
-import Events from '@ionic-internal/component-api/v7/router-link/events.md';
-import Methods from '@ionic-internal/component-api/v7/router-link/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router-link/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
-
-<head>
-  <title>Router Link | Navigating The ion-router-link Component</title>
-  <meta
-    name="description"
-    content="ion-router-linkコンポーネントを使用すると、指定したリンクに移動することができます。ルーターリンクは、hrefで場所を、directionで遷移のアニメーションを指定することができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-<h2 className="table-of-contents__title">コンテンツ</h2>
-
-<TOCInline toc={toc} maxHeadingLevel={2} />
-
-router link コンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、href で場所を、direction で遷移のアニメーションを指定することができます。
-
-:::note
-Note: このコンポーネントは、バニラおよびステンシル JavaScript プロジェクトでのみ使用してください。Angular プロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angular ルータを使用してください。
-:::
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
deleted file mode 100644
index ce0fde32c1f..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router-outlet.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 'ion-router-outlet'
----
-
-import Props from '@ionic-internal/component-api/v7/router-outlet/props.md';
-import Events from '@ionic-internal/component-api/v7/router-outlet/events.md';
-import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-router outlet は Angular の組み込み router outlet コンポーネントや Vue のルーター・ビューコンポーネントと同様の振る舞いをしますが、スタック式のナビゲーションを提供し、ビューをアニメーションで出し入れするためのロジックを含んでいます。
-
-router outlet はナビゲーション用のメソッドを備えていますが、フレームワークのルーターにあるナビゲーションメソッドを使用することをお勧めします。
-
-## ライフサイクル Hook
-
-Router Outlet で Routes がレンダリングされた時、アニメーションに関連付けられた特定の Ionic イベントにアクセスできます。
-
-| Event Name         | Description                                                        |
-| ------------------ | ------------------------------------------------------------------ |
-| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
-| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
-
-これらのイベントは Ionic のアニメーションシステムと連携し、コンポーネントがアニメーションを完成させたときにアプリの挙動を調整するのに使用できる。これらのイベントはフレームワーク独自のイベントシステムに代わるものではなく、追加されたものです。
-
-Router Guards を扱うために、以前の`ionViewCanEnter` と `ionViewCanLeave`は、フレームワーク特有の同等のものに置き換えられました。Angular には[Router Guards](https://angular.jp/guide/router#milestone-5-route-guards)があります。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
deleted file mode 100644
index 08c3145da42..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/router.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: 'ion-router'
----
-
-import Props from '@ionic-internal/component-api/v7/router/props.md';
-import Events from '@ionic-internal/component-api/v7/router/events.md';
-import Methods from '@ionic-internal/component-api/v7/router/methods.md';
-import Parts from '@ionic-internal/component-api/v7/router/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/router/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/router/slots.md';
-
-<head>
-  <title>ion-router: Router Component to Coordinate URL Navigation</title>
-  <meta
-    name="description"
-    content="ion-routerは、ionicのナビゲーションアウトレットであるion-navとion-tabsのためのURLコーディネータです。ルーターコンポーネントは vanilla と Stencil JavaScript 内のルーティングを処理します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-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. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
-:::
-
-アプリケーションはコードベースに単一の `ion-router` コンポーネントを持たなければなりません。
-このコンポーネントは、ブラウザの履歴とのすべての対話を制御し、イベント・システムを介して更新を集約します。
-
-`ion-router` は、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` という Ionic のナビゲーション機能の URL 調整機能に過ぎません。
-
-つまり、 `ion-router` は DOM にアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザの URL に基づいて、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` に何をいつ「show」すべきかを指示するだけです。
-
-コンポーネント(ロード/選択)と URL の間の関係を設定するために、`ion-router` は JSX/HTML を使ってルートのツリーを定義する宣言的な構文を利用します。
-
-## 基本的な使い方
-
-import BasicExample from '@site/static/usage/v7/router/basic/index.md';
-
-<BasicExample />
-
-## Interfaces
-
-### RouterEventDetail
-
-```typescript
-interface RouterEventDetail {
-  from: string | null;
-  redirectedFrom: string | null;
-  to: string;
-}
-```
-
-### RouterCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface RouterCustomEvent extends CustomEvent {
-  detail: RouterEventDetail;
-  target: HTMLIonRouterElement;
-}
-```
-
-## 使い方
-
-```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>
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
deleted file mode 100644
index 7c4a43ddaaf..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/row.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'ion-row'
----
-
-import Props from '@ionic-internal/component-api/v7/row/props.md';
-import Events from '@ionic-internal/component-api/v7/row/events.md';
-import Methods from '@ionic-internal/component-api/v7/row/methods.md';
-import Parts from '@ionic-internal/component-api/v7/row/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/row/slots.md';
-
-<head>
-  <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
-  <meta
-    name="description"
-    content="Rowsはグリッドシステムの水平方向のコンポーネントで、さまざまな数のカラムを含んでいます。行の配置や使用方法については、ion-row API Docs を参照してください。"
-  />
-</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
-
-デフォルトでは、列は行の高さ全体を埋めるように伸縮し、必要に応じて折り返されます。行は [Flex コンテナ](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) なので、この動作をカスタマイズするために、行に適用できるいくつかの [CSS クラス](/docs/layout/css-utilities#flex-container-properties) が用意されています。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
deleted file mode 100644
index a5a6bcd187d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/searchbar.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: 'ion-searchbar'
----
-
-import Props from '@ionic-internal/component-api/v7/searchbar/props.md';
-import Events from '@ionic-internal/component-api/v7/searchbar/events.md';
-import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/searchbar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
-
-<head>
-  <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
-  <meta
-    name="description"
-    content="Search barsは、コレクションを検索するために使用できるテキストフィールドを表します。AndroidとiOSのキーボード表示で、Ion-Search Barをアイコンとして入力する方法をご紹介します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-検索バーは、コレクションを検索するために使用できるテキストフィールドを表します。ツールバーやメインコンテンツの中に表示することができます。検索バーは、検索リストへの入力の代わりに使用する必要があります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/searchbar/basic/index.md';
-
-<Basic />
-
-## 検索アイコン
-
-検索バーの Input フィールドの左に表示される検索アイコンです。任意の [Ionicon](https://ionic.io/ionicons/) にカスタマイズすることが可能です。
-
-import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md';
-
-<SearchIcon />
-
-## クリアボタン
-
-検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意の[Ionicon](https://ionic.io/ionicons/)にカスタマイズすることができます。
-
-import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md';
-
-<ClearButton />
-
-## キャンセルボタン
-
-キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは `ios` モードではテキストとして、`md` モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意の[Ionicon](https://ionic.io/ionicons/)を使用することができます。
-
-import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md';
-
-<CancelButton />
-
-## ツールバーの中に配置した検索バー
-
-検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOS では、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Design では、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。
-
-<!-- Reuse the playground from the Toolbar directory -->
-
-import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
-
-<Toolbar />
-
-## Debounce
-
-検索バーに Debounce を設定して、`ionChange`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
-
-import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
-
-<Debounce />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSS を自動的にスコープ化することを意味します。CSS で scoped セレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
-
-import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.md';
-
-<CSSProps />
-
-## キーボード表示
-
-### Android
-
-デフォルトでは、Input をタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡から arriage return に変更されます。
-
-### iOS
-
-デフォルトでは、Input をタップするとキーボードが表示され、グレーの Submit ボタンに「return」のテキストが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、テキストが "return" から "go" に変わり、ボタンの色もグレーから青に変わります。また、`ion-searchbar` を `form` 要素でラップして、 `action` プロパティを設定することもできます。これにより、キーボードが表示され、"search "という青い Submit ボタンが表示されるようになります。
-
-## Interfaces
-
-### SearchbarChangeEventDetail
-
-```typescript
-interface SearchbarChangeEventDetail {
-  value?: string;
-}
-```
-
-### SearchbarCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface SearchbarCustomEvent extends CustomEvent {
-  detail: SearchbarChangeEventDetail;
-  target: HTMLIonSearchbarElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
deleted file mode 100644
index f224e4745b9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment-button.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 'ion-segment-button'
----
-
-import Props from '@ionic-internal/component-api/v7/segment-button/props.md';
-import Events from '@ionic-internal/component-api/v7/segment-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/segment-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/segment-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md';
-
-<head>
-  <title>ion-segment-button | Segment Button Icon and Segment Value</title>
-  <meta
-    name="description"
-    content="ion-segment-buttonsは、Segmentの中にある関連するボタンのグループです。Ionic Frameworkアプリでsegment-buttonsのアイコンの使い方を学び、その値を確認します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-セグメントボタンは、[segment](segment.md)の中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの `value` をセグメントボタンの `value` に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは 1 つだけです。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/segment-button/basic/index.md';
-
-<Basic />
-
-## Layout
-
-`layout`プロパティは、デフォルトで `"icon-top"` に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は `layout` プロパティを `"icon-bottom"`, `"icon-start"`, `"icon-end"` に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTR では左、RTL では右）、ラベルの末尾（LTR では右、RTL では左）に表示することができます。
-
-import Layout from '@site/static/usage/v7/segment-button/layout/index.md';
-
-<Layout />
-
-## テーマ
-
-### CSS Shadow Parts
-
-import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.md';
-
-<CSSParts />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
deleted file mode 100644
index 0802f43b0ec..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/segment.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: 'ion-segment'
----
-
-import Props from '@ionic-internal/component-api/v7/segment/props.md';
-import Events from '@ionic-internal/component-api/v7/segment/events.md';
-import Methods from '@ionic-internal/component-api/v7/segment/methods.md';
-import Parts from '@ionic-internal/component-api/v7/segment/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/segment/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/segment/slots.md';
-
-<head>
-  <title>ion-segment: API Documentation for Segmented Controls</title>
-  <meta
-    name="description"
-    content="ion-segmentは、関連するボタンのグループを表示します（セグメントコントロールとも呼ばれます）。使用方法の詳細については、Segment API ドキュメンテーションを参照してください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Segments は、関連するボタンのグループを水平方向の行に表示することができ、segmented controls とも呼ばれます。これらは、toolbar またはメインコンテンツの内部に表示できます。
-
-これらの機能は、1 つを選択すると他のすべてが選択解除される Tabs と似ています。Segments は、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segments の代わりに Tabs を使用してください。
-
-## 基本的な使い方
-
-セグメントは[セグメントボタン](./segment-button)からなり、各ボタンには`value`プロパティが設定されています。セグメントの `value` プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。
-
-import Basic from '@site/static/usage/v7/segment/basic/index.md';
-
-<Basic />
-
-## Scrollable Segments
-
-デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、`scrollable` プロパティを `true` に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。
-
-import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md';
-
-<Scrollable />
-
-## Segments in Toolbars
-
-<!-- Reuse the playground from the Toolbar directory -->
-
-import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md';
-
-<Toolbar />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/segment/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.md';
-
-<CSSProps />
-
-## アクセシビリティ
-
-### キーボードナビゲーション
-
-このコンポーネントは、`ion-segment-button`要素間のナビゲーションと選択について、フルキーボードサポートを備えています。デフォルトでは、キーボードナビゲーションは `ion-segment-button` 要素にのみフォーカスしますが、`selectOnFocus` プロパティを使用すると、フォーカスされた要素も確実に選択されるようになります。次の表は、それぞれのキーが何をするのかの詳細です。
-
-| 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
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface SegmentCustomEvent extends CustomEvent {
-  target: HTMLIonSegmentElement;
-  detail: SegmentChangeEventDetail;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
deleted file mode 100644
index 645b5eac547..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select-option.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'ion-select-option'
----
-
-import Props from '@ionic-internal/component-api/v7/select-option/props.md';
-import Events from '@ionic-internal/component-api/v7/select-option/events.md';
-import Methods from '@ionic-internal/component-api/v7/select-option/methods.md';
-import Parts from '@ionic-internal/component-api/v7/select-option/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
-
-<head>
-  <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
-  <meta
-    name="description"
-    content="Select Optionとは？Select OptionはSelectの子要素で、定義された各オプションはSelectダイアログに渡され表示されます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-セレクトオプションは、セレクトの子要素となるコンポーネントです。定義された各オプションは、Select ダイアログに渡され表示されます。
-
-使用例については、[Select](./select)のドキュメントを参照してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
deleted file mode 100644
index fe67f2b1615..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/select.md
+++ /dev/null
@@ -1,234 +0,0 @@
----
-title: 'ion-select'
----
-
-import Props from '@ionic-internal/component-api/v7/select/props.md';
-import Events from '@ionic-internal/component-api/v7/select/events.md';
-import Methods from '@ionic-internal/component-api/v7/select/methods.md';
-import Parts from '@ionic-internal/component-api/v7/select/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/select/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/select/slots.md';
-
-<head>
-  <title>ion-select: Select One or Multiple Value Boxes or Placeholders</title>
-  <meta
-    name="description"
-    content="ion-selectは、選択された値（複数可）、またはプレースホルダー、ドロップダウンのアイコンによって表現されます。 selectをタップすると、選択しやすいリストを表示するダイアログボックスが表示されます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Select は、ネイティブの `<select>` 要素と同様に、オプションのセットからオプションを選択するためのフォームコントロールです。ユーザが select をタップすると、すべてのオプションを含むダイアログが、選択しやすい大きなリストで表示されます。
-
-select は、子要素 `<ion-select-option>` とともに使用する必要があります。子要素のオプションに`value`属性が指定されていない場合、その text が値として使用されます。
-
-`value` が `<ion-select>` にセットされている場合、オプションはその値に基づいて選択済みになります。
-
-## 単一選択
-
-デフォルトでは、select を使用すると、ユーザは 1 つの Option だけを選択できます。Alert のインターフェースでは、Option のリストが radio button 形式で表示されます。action sheet インタフェースは、1 つの値選択でのみ使用できます。select コンポーネントの値は、選択したオプションの値の値を受け取ります。
-
-import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
-
-<SingleSelectionExample />
-
-## インターフェイス
-
-デフォルトでは、select は [ion-alert](alert.md) を使って Alert のオプションのオーバーレイを開きます。インターフェイスを変更して、[ion-action-sheet](action-sheet.md) または [ion-popover](popover.md) を使用するには、 `action-sheet` または `popover` を `interface` プロパティに渡します。各インタフェースの制限については、他のセクションを参照してください。
-
-### Action Sheet
-
-import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md';
-
-<ActionSheetExample />
-
-### Popover
-
-import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.md';
-
-<PopoverExample />
-
-## 複数選択
-
-`multiple` 属性を追加して選択すると、複数の Option を選択できます。複数の Option を選択できる場合は、checkbox 形式のオプションのリストが Alert オーバーレイで表示されます。select コンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。
-
-Note: `action-sheet` と `popover` インターフェイスでは、複数選択は動作しません
-
-import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
-
-<MultipleSelectionExample />
-
-## Responding to Interaction
-
-select とユーザーのインタラクションを処理する主な方法は、 `ionChange` イベント、 `ionDismiss` イベント、 `ionCancel` イベントです。これらのイベントと select が発生するその他のイベントの詳細については、[イベント](#events) を参照してください。
-
-import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/responding-to-interaction/index.md';
-
-<RespondingToInteractionExample />
-
-## Object 値について
-
-選択した値に Object を使用する場合、これらの Object の識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的の Object 値を持つ既存の値が select にロードされたが、新しく取得された select オプションが異なる ID を持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。
-
-デフォルトでは、select は Object の等価性(`===`)を使用して、オプションが選択されているかどうかを判断します。これは`compareWiths`プロパティにプロパティ名または関数を指定することで上書きできます。
-
-### Using compareWith
-
-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/v7/select/objects-as-values/multiple-selection/index.md';
-
-<ObjectValuesAndMultipleSelectionExample />
-
-## Label Placement
-
-Labels は、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
-
-<LabelPlacement />
-
-## Justification
-
-開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
-
-import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
-
-<JustifyExample />
-
-## Filled Selects
-
-Material Design では、セレクトに塗りつぶしのスタイルが用意されています。セレクトの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
-
-`fill` スタイルはセレクトコンテナを視覚的に定義するため、`fill` を使用するセレクトは `ion-item` で使用すべきではありません。
-
-import FillExample from '@site/static/usage/v7/select/fill/index.md';
-
-<FillExample />
-
-## Select の Button
-
-alert はふたつのボタンをサポートしています: `Cancel` と `OK` です。それぞれのボタンは、 `cancelText` と `okText` プロパティを使ってカスタマイズできます。
-
-`action-sheet` と `popover` インタフェースには `OK` ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。`popover` インターフェースには`Cancel`ボタンがないので、backdrop をクリックするとオーバーレイが閉じます。
-
-import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.md';
-
-<ButtonTextExample />
-
-## インターフェイスオプション
-
-select は alert、action sheet、popover インターフェースを使用するので、`interfaceOptions` プロパティを通して、これらのコンポーネントにオプションを渡すことができます。これは、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すために使用できます。
-
-各インターフェースが受け付けるプロパティは、[ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md) を参照してください。
-
-Note: `alert` インターフェースでは、 `interfaceOptions` は `inputs` や `buttons` をオーバーライドしません。
-
-import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.md';
-
-<InterfaceOptionsExample />
-
-## カスタマイズ
-
-Select コンポーネントを構成する 2 つのユニットがあり、それぞれを別々にスタイルする必要があります。 `ion-select`要素は、ビュー上で選択された値（複数可）、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記の [インターフェース](#interfaces) セクションで定義されており、 `ion-select` をクリックすると開かれるダイアログです。インターフェースには、 `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。
-
-### Select 要素のスタイリング
-
-前述の通り、`ion-select` 要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSS と[CSS カスタムプロパティ](#css-custom-properties)を組み合わせてスタイルを設定します。
-
-また、必要な [ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part) に応じて、CSS のシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意の CSS プロパティをターゲットにすることができることに注意してください。
-
-import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.md';
-
-<StylingSelectExample />
-
-### Select インターフェイスのスタイリング
-
-インターフェイスのダイアログのカスタマイズは、そのインターフェイスのドキュメントのカスタマイズのセクションにしたがって行ってください。
-
-- [アラートのカスタマイズ](alert.md#customization)
-- [アクションシートのカスタマイズ](action-sheet.md#customization)
-- [ポップオーバーのカスタマイズ](popover.md#customization)
-
-ただし、Select オプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、[Select オプションのドキュメント](select-option.md)を参照してください。
-
-## Typeahead Component
-
-Typeahead やオートコンプリートの機能は、既存の Ionic コンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。
-
-import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
-
-<TypeaheadExample />
-
-## Interfaces
-
-### SelectChangeEventDetail
-
-```typescript
-interface SelectChangeEventDetail<T = any> {
-  value: T;
-}
-```
-
-### SelectCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface SelectCustomEvent<T = any> extends CustomEvent {
-  detail: SelectChangeEventDetail<T>;
-  target: HTMLIonSelectElement;
-}
-```
-
-## Legacy Select Syntax からの移行
-
-Ionic 7.0 では、よりシンプルな select 構文が導入されました。この新しい構文は、select の設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に 1 つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使うには、2 つのステップがあります。
-
-1. ion-label`を削除して、代わりに`ion-select`の`label`プロパティを使用します。ラベルの配置は`ion-select`の`labelPlacement` プロパティを使用して設定することができる。
-2. fill`と`shape`の使い方を`ion-item`から`ion-select` に移動します。
-
-import Migration from '@site/static/usage/v7/select/migration/index.md';
-
-<Migration />
-
-### レガシー構文の使用
-
-Ionic は、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、その Input インスタンスでレガシー構文を使用するように強制できます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
deleted file mode 100644
index 10c87ecc9b9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/skeleton-text.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: 'ion-skeleton-text'
----
-
-import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md';
-import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md';
-import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md';
-import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
-
-<head>
-  <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
-  <meta
-    name="description"
-    content="ion-skeleton-text は、プレースホルダコンテンツをレンダリングするためのコンポーネントです。この要素は、ローディングテキストのフレームワークとして、指定された幅で灰色のブロックをレンダリングします。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Skeleton Text は、placeholder コンテンツをレンダリングするためのコンポーネントです。要素は、指定した幅でグレーのブロックをレンダリングします。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md';
-
-<Basic />
-
-## テーマ
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
deleted file mode 100644
index e62e06ce2e3..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/spinner.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 'ion-spinner'
----
-
-import Props from '@ionic-internal/component-api/v7/spinner/props.md';
-import Events from '@ionic-internal/component-api/v7/spinner/events.md';
-import Methods from '@ionic-internal/component-api/v7/spinner/methods.md';
-import Parts from '@ionic-internal/component-api/v7/spinner/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
-
-<head>
-  <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
-  <meta
-    name="description"
-    content="ion-spinner コンポーネントは、アニメーションするさまざまな SVG スピナーを提供します。これらのアイコンは、アプリがロード中であることや、別の処理を実行していることを示し、待機させることができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Spinner コンポーネントには、さまざまなアニメーションつきの SVG Spinner が用意されています。Spinner は、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
-
-## 基本的な使い方
-
-デフォルトのスピナーは、モードに基づいて決定されます。モードが `ios` の場合、スピナーは `"lines"` となり、モードが `md` の場合、スピナーは `"circular"` となります。 `name` プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。
-
-import Basic from '@site/static/usage/v7/spinner/basic/index.md';
-
-<Basic />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
deleted file mode 100644
index c9479aec6ce..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/split-pane.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: 'ion-split-pane'
----
-
-import Props from '@ionic-internal/component-api/v7/split-pane/props.md';
-import Events from '@ionic-internal/component-api/v7/split-pane/events.md';
-import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md';
-import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/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は、マルチビューのアプリレイアウトを作成する際に便利です。これにより、メニューなどのUI要素を、ビューポートの幅が広がるにつれて表示することができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-分割ペインは、マルチビューレイアウトを作成する際に便利です。
-メニューのような UI 要素は、分割されたペインで表示することができます。ビューポートの幅が大きくなるにつれて表示されます。
-
-デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。
-
-## 基本的な使い方
-
-:::note
-このデモでは `when` プロパティを `'xs'` に設定し、分割ペインが常に表示されるようにしています。小さなビューポートで分割ペインを折りたたみたい場合は、Ionic アプリケーションにこの設定は必要ありません。詳しくは、[ブレークポイントの設定](#setting-breakpoints)を参照してください。
-:::
-
-import Basic from '@site/static/usage/v7/split-pane/basic/index.md';
-
-<Basic />
-
-## ブレイキング・ポイントを決める
-
-デフォルトでは、画面が 992px を超えると分割ペインが拡張表示されます。これをカスタマイズするには、 `when` プロパティにブレークポイントを渡します。`when` プロパティには、真偽値、有効なメディア・クエリー、または Ionic の事前定義サイズのいずれかを指定できます。
-
-```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                      |
-
-## テーマ
-
-## CSS カスタムプロパティ
-
-import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md';
-
-<CSSProperties />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
deleted file mode 100644
index cb396d18738..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-bar.md
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: 'ion-tab-bar'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@ionic-internal/component-api/v7/tab-bar/props.md';
-import Events from '@ionic-internal/component-api/v7/tab-bar/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
-
-<head>
-  <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</title>
-  <meta
-    name="description"
-    content="tab barコンポーネントには、タブボタンのセットが含まれており、通信するためにはタブの内側にタブバーを用意する必要があります。使用方法とCSSカスタムプロパティについてはこちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-TabBar は、[tab buttons](tab-button.md)のセットを含む UI コンポーネントです。各[tab](tab.md)と通信するには、[tabs](tabs.md)の内部に TabBar を設定する必要があります。
-
-## 使い方
-
-<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>
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
deleted file mode 100644
index f1c8e020911..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab-button.md
+++ /dev/null
@@ -1,281 +0,0 @@
----
-title: 'ion-tab-button'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@ionic-internal/component-api/v7/tab-button/props.md';
-import Events from '@ionic-internal/component-api/v7/tab-button/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab-button/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md';
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-tab button は、[tab bar](tab-bar.md)の内部に配置される UI コンポーネントです。tab button を使用すると、icon と label のレイアウトを指定し、[tab view](tab.md)に接続できます。
-
-タブの設定の詳細については、[tabs documentation](tabs.md)を参照してください。
-
-## 使い方
-
-<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" aria-hidden="true"></ion-icon>
-      <ion-label>Schedule</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="speakers">
-      <ion-icon name="person-circle" aria-hidden="true"></ion-icon>
-      <ion-label>Speakers</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="map">
-      <ion-icon name="map" aria-hidden="true"></ion-icon>
-      <ion-label>Map</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="about">
-      <ion-icon name="information-circle" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
-      <ion-label>Speakers</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
-      <ion-icon name="map" aria-hidden="true"></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" aria-hidden="true"></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} aria-hidden="true" />
-          <IonLabel>Schedule</IonLabel>
-        </IonTabButton>
-
-        <IonTabButton tab="speakers">
-          <IonIcon icon={personCircle} aria-hidden="true" />
-          <IonLabel>Speakers</IonLabel>
-        </IonTabButton>
-
-        <IonTabButton tab="map">
-          <IonIcon icon={map} aria-hidden="true" />
-          <IonLabel>Map</IonLabel>
-        </IonTabButton>
-
-        <IonTabButton tab="about">
-          <IonIcon icon={informationCircle} aria-hidden="true" />
-          <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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
-            <ion-label>Speakers</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="map" href="/app/tabs/(map:map)">
-            <ion-icon name="map" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
-        <ion-label>Schedule</ion-label>
-      </ion-tab-button>
-
-      <ion-tab-button tab="speakers" href="/tabs/speakers">
-        <ion-icon :icon="person-circle" aria-hidden="true"></ion-icon>
-        <ion-label>Speakers</ion-label>
-      </ion-tab-button>
-
-      <ion-tab-button tab="map" href="/tabs/map">
-        <ion-icon :icon="map" aria-hidden="true"></ion-icon>
-        <ion-label>Map</ion-label>
-      </ion-tab-button>
-
-      <ion-tab-button tab="about" href="/tabs/about">
-        <ion-icon :icon="informationCircle" aria-hidden="true"></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>
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
deleted file mode 100644
index 2688f18adb2..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tab.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'ion-tab'
----
-
-import Props from '@ionic-internal/component-api/v7/tab/props.md';
-import Events from '@ionic-internal/component-api/v7/tab/events.md';
-import Methods from '@ionic-internal/component-api/v7/tab/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tab/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
-
-<head>
-  <title>ion-tab - Ionic Framework Application Component</title>
-  <meta
-    name="description"
-    content="ion-tabは、タブの子コンポーネントです。各ion-tabは、アプリケーションまたは単一のビューのトップレベルのナビゲーションスタックを含むことができます。詳しくは、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-タブコンポーネントは、[tabs](tabs.md) の子コンポーネントです。各タブには、アプリまたは単一のビューのトップレベルのナビゲーション スタックを含めることができます。アプリには多くのタブがあり、それぞれが独立したナビゲーションを持つことができます。
-
-:::note
-Note: このコンポーネントは、バニラまたはステンシル JavaScript プロジェクトでのみ使用する必要があります。Angular、React、Vue のアプリでは、タブコンポーネントを宣言するために `ion-tab` を使用する必要はありません。
-:::
-
-詳しい設定方法は [tabs documentation](tabs.md) をご覧ください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
deleted file mode 100644
index bd017829c60..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/tabs.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: 'ion-tabs'
----
-
-import Props from '@ionic-internal/component-api/v7/tabs/props.md';
-import Events from '@ionic-internal/component-api/v7/tabs/events.md';
-import Methods from '@ionic-internal/component-api/v7/tabs/methods.md';
-import Parts from '@ionic-internal/component-api/v7/tabs/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
-
-<head>
-  <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
-  <meta
-    name="description"
-    content="Tabsは、タブベースのナビゲーションを実装するためのトップレベルのコンポーネントです。イオンタブはスタイリングを持たず、ネイティブアプリのように動作するナビゲーションのルーター出口として機能します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-タブは、タブベースのナビゲーションを実装するためのトップレベルのナビゲーションコンポーネントです。
-このコンポーネントは、個々の[Tab](tab.md)コンポーネントのコンテナである。
-
-`ion-tabs` コンポーネントはスタイルを持たず、ナビゲーションを処理するためのルータアウトレットとして動作します。また、UI フィードバックやタブを切り替えるための機構は提供しない。タブを切り替えるには、`ion-tabs` の直接の子として `ion-tab-bar` を用意しなければなりません。
-
-`ion-tabs` と `ion-tab-bar` はどちらもスタンドアロンな要素として利用することができます。これらは互いに依存せずに動作しますが、通常は、ネイティブアプリのように動作するタブベースのナビゲーションを実装するために一緒に使用します。
-
-`ion-tab-bar` は、`ion-tabs` コンポーネントの適切な場所に投影するために、スロットを定義する必要があります。
-
-:::note Framework Support
-
-Angular、React、Vue で `ion-tabs` を使用するには、 `ion-router-outlet` または `ion-nav` コンポーネントを使用する必要があります。
-
-:::
-
-## ルーターとの併用
-
-タブは Ionic ルーターと一緒に使うことで、タブベースのナビゲーションを実装することができます。タブバーとアクティブなタブは、url に基づいて自動的に解決されます。これはタブナビゲーションで最も一般的なパターンです。
-
-import Router from '@site/static/usage/v7/tabs/router/index.md';
-
-<Router />
-
-:::tip Best Practices
-
-Ionic では、タブを使ったルーティングパターンのベストプラクティスに関するガイドを用意しています。 Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
-
-:::
-
-## Interfaces
-
-### TabsCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface TabsCustomEvent extends CustomEvent {
-  detail: { tab: string };
-  target: HTMLIonTabsElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
deleted file mode 100644
index f0202cf3dea..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/text.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'ion-text'
----
-
-import Props from '@ionic-internal/component-api/v7/text/props.md';
-import Events from '@ionic-internal/component-api/v7/text/events.md';
-import Methods from '@ionic-internal/component-api/v7/text/methods.md';
-import Parts from '@ionic-internal/component-api/v7/text/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/text/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/text/slots.md';
-
-<head>
-  <title>ion-text: Ionic App Component to Style or Change Text Color</title>
-  <meta
-    name="description"
-    content="ion-textは、任意の要素のテキストカラーをスタイルするために使用できるシンプルなアプリコンポーネントです。テキスト色を変更するために、ion-textがどのように要素をラップしているかを説明します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-text コンポーネントは、任意の要素のテキストカラーのスタイル設定に使用できる単純なコンポーネントです。テキストカラーを変更するには、要素を `ion-text` 要素で囲む必要があります。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/text/basic/index.md';
-
-<Basic />
-
-## テーマ
-
-テキストコンポーネントは、Ionic が提供するデフォルトの[colors](../../docs/theming/colors)のいずれかを変更することでカスタマイズすることが可能です。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
deleted file mode 100644
index 67f4fd0384d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/textarea.md
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: 'ion-textarea'
----
-
-import Props from '@ionic-internal/component-api/v7/textarea/props.md';
-import Events from '@ionic-internal/component-api/v7/textarea/events.md';
-import Methods from '@ionic-internal/component-api/v7/textarea/methods.md';
-import Parts from '@ionic-internal/component-api/v7/textarea/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/textarea/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/textarea/slots.md';
-
-<head>
-  <title>Ionic Textarea Component and CSS Properties for Multi-Line Input</title>
-  <meta
-    name="description"
-    content="Textareaは複数行の入力のためのものです。このコンポーネントは、Ionicのプロパティに加えて、ネイティブのtextareaの属性を受け付けます。使用方法とCSS要素については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="scoped" />
-
-textarea コンポーネントは、複数行のテキスト入力に使用されます。ネイティブの textarea 要素は、コンポーネントの内部でレンダリングされます。ネイティブの textarea を制御することで、textarea コンポーネントのユーザーエクスペリエンスとインタラクティブ性を向上させることができます。
-
-ネイティブの textarea 要素とは異なり、Ionic の textarea は要素内部のコンテンツからその値を読み込むことをサポートしていません。textarea の値は`value`属性で設定しなくてはなりません。
-
-textarea コンポーネントは Ionic のプロパティに加えて [ネイティブの textarea の属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) に対応します。
-
-## 基本的な使い方
-
-import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md';
-
-<BasicPlayground />
-
-## Label Placement
-
-ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import Labels from '@site/static/usage/v7/textarea/label-placement/index.md';
-
-<LabelPlacement />
-
-## Filled Textareas
-
-Material Design では、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
-
-`fill` スタイルはテキストエリアのコンテナを視覚的に定義するため、`fill` を使用するテキストエリアは `ion-item` で使用すべきではありません。
-
-import Fill from '@site/static/usage/v7/textarea/fill/index.md';
-
-<Fill />
-
-## Helper & Error Text
-
-ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使って textarea 内で使用することができます。エラーテキストは、`ion-invalid` と `ion-touched` クラスが `ion-textarea` に追加されていない限り表示されません。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。
-
-Angular では、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vue では、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
-
-import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
-
-<HelperError />
-
-## Textarea Counter
-
-textarea カウンターは、textarea の下に表示されるテキストで、textarea が受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
-
-import Counter from '@site/static/usage/v7/textarea/counter/index.md';
-
-<Counter />
-
-## Autogrow
-
-`autoGrow`プロパティが`true`に設定されている場合、テキストエリアはその内容に基づいて拡大・縮小します。
-
-import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md';
-
-<AutogrowPlayground />
-
-## Clear on Edit
-
-`clearOnEdit`プロパティを`true`に設定すると、テキストエリアが編集削除された後、再度入力されるとクリアされます。
-
-import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.md';
-
-<ClearOnEditPlayground />
-
-## レガシー textarea 構文からの移行
-
-Ionic 7.0 では、よりシンプルな textarea の構文が導入されました。この新しい構文は、textarea を設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。
-
-開発者はこの移行を一度に 1 つの textarea で行うことができます。開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使うには、3 つのステップがあります。
-
-1. `ion-label` を削除して、代わりに `ion-textarea` の `label` プロパティを使用します。ラベルの配置は `ion-textarea` の `labelPlacement` プロパティを使用して設定することができる。
-2. テキストエリア固有のプロパティを `ion-item` から `ion-textarea` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれます。
-3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-textarea` の `helperText` と `errorText` プロパティを使用します。
-
-import Migration from '@site/static/usage/v7/textarea/migration/index.md';
-
-<Migration />
-
-### レガシー構文の使用
-
-Ionic は、アプリが最新の textarea 構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-textarea`の`legacy`プロパティを`true`に設定することで、そのインスタンスの textarea がレガシー構文を使用するように強制できます。
-
-## テーマ
-
-import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.md';
-
-<ThemingPlayground />
-
-## Interfaces
-
-### TextareaChangeEventDetail
-
-```typescript
-interface TextareaChangeEventDetail {
-  value?: string | null;
-}
-```
-
-### TextareaCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface TextareaCustomEvent extends CustomEvent {
-  detail: TextareaChangeEventDetail;
-  target: HTMLIonTextareaElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
deleted file mode 100644
index ad72299341d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/thumbnail.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 'ion-thumbnail'
----
-
-import Props from '@ionic-internal/component-api/v7/thumbnail/props.md';
-import Events from '@ionic-internal/component-api/v7/thumbnail/events.md';
-import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.md';
-import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
-
-<head>
-  <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
-  <meta
-    name="description"
-    content="ion-thumbnailコンポーネントは、画像やアイコンを包み込み、画像のレイアウト表示や原寸大のプレビューに使用することができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Thumbnails は、通常、画像またはアイコンをラップする四角形のコンポーネントです。これを使用すると、大きな画像のグループを簡単に表示したり、フルサイズのイメージのプレビューを表示したりできます。
-
-Thumbnails は、単独で使用することも、任意の要素の内部で使用することもできます。`ion-item` の内部に配置すると、Thumbnails のサイズが親コンポーネントに合わせて変更されます。Thumbnails をアイテムの左側または右側に配置するには、slot をそれぞれ `start` または `end` に設定します。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/thumbnail/basic/index.md';
-
-<Basic />
-
-## Item Thumbnails
-
-import Item from '@site/static/usage/v7/thumbnail/item/index.md';
-
-<Item />
-
-## テーマ
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.md';
-
-<CSSProps />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
deleted file mode 100644
index e253860ee1e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/title.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: 'ion-title'
----
-
-import Props from '@ionic-internal/component-api/v7/title/props.md';
-import Events from '@ionic-internal/component-api/v7/title/events.md';
-import Methods from '@ionic-internal/component-api/v7/title/methods.md';
-import Parts from '@ionic-internal/component-api/v7/title/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/title/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/title/slots.md';
-
-<head>
-  <title>ion-title: Ionic Framework App Title Component for Toolbars</title>
-  <meta
-    name="description"
-    content="ion-titleは、ツールバーのタイトルを設定するコンポーネントです。Ionic Frameworkアプリのtitleとcollapsible titleコンポーネントの詳細と使用方法については、こちらをご覧ください。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-Title は、[ツールバー](./toolbar)のタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。
-
-## Basic
-
-import Basic from '@site/static/usage/v7/title/basic/index.md';
-
-<Basic />
-
-## 折りたたみ式ラージタイトル
-
-大きなタイトルは、[content](./content)がスクロールコンテナの開始位置までスクロールされたときに表示されます。タイトルがヘッダーの後ろにスクロールされると、縮小されたタイトルがフェードインします。
-
-:::info
-
-This feature is only available for iOS.
-
-:::
-
-import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large-title/basic/index.md';
-
-<CollapsibleLargeTitle />
-
-### 折りたたみ式ボタン
-
-[buttons](./buttons.md)コンポーネントは、[`collapse`](./buttons.md#collapse)プロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。
-
-import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md';
-
-<CollapsibleLargeTitleButtons />
-
-## テーマ
-
-折りたたみ式ラージタイトルは、コンテンツの他の部分との関係でシームレスに表示される必要があります。つまり、折りたたみ可能なラージタイトルを含むツールバーの背景色は、常にコンテンツの背景色と一致する必要があります。
-
-デフォルトでは、標準タイトルを含むツールバーは `opacity: 0` を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。
-
-標準タイトルのあるツールバーの背景色は、CSS 変数に `--background` を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。
-
-ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
-
-## CSS カスタムプロパティ
-
-import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.md';
-
-<CSSCustomProperties />
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
deleted file mode 100644
index 3f465b3b595..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toast.md
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: 'ion-toast'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@ionic-internal/component-api/v7/toast/props.md';
-import Events from '@ionic-internal/component-api/v7/toast/events.md';
-import Methods from '@ionic-internal/component-api/v7/toast/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toast/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
-
-<head>
-  <title>ion-toast Component: A Dismissible App Notification Alert</title>
-  <meta
-    name="description"
-    content="ion-toast コンポーネントは、システムメッセージやフィードバックを表示するアプリの通知です。トーストのアラートはコンテンツの上に表示され、インタラクションを再開するには解除されます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-トーストは、最近のアプリケーションでよく使われる小さな通知です。操作に関するフィードバックを提供したり、システムメッセージを表示したりするために使用されます。トーストは、アプリケーションのコンテンツの上に表示され、アプリケーションによって解除されると、アプリケーションとの対話を再開することができます。
-
-## インライン Toasts (推奨)
-
-`ion-toast`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。
-
-import InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/index.md';
-
-<InlineToastTriggerExample />
-
-### Using `isOpen​`
-
-`ion-toast` の `isOpen` プロパティは、開発者がアプリケーションの状態からトーストの表示状態を制御できるようにするものです。つまり、`isOpen` を `true` に設定するとトーストが表示され、`isOpen` を `false` に設定するとトーストは破棄されます。
-
-`isOpen` は一方通行のデータバインディングを使用しているため、トーストが破棄されたときに自動的に `false` に設定されることはありません。開発者は `ionToastDidDismiss` または `didDismiss` イベントをリスニングして `isOpen` を `false` に設定する必要があります。この理由は、`ion-toast` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、トーストはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、トーストはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
-
-import InlineToastIsOpenExample from '@site/static/usage/v7/toast/inline/is-open/index.md';
-
-<InlineToastIsOpenExample />
-
-## Controller Toasts
-
-import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.md';
-
-<ControllerExample />
-
-## Dismissing
-
-トーストは静かな通知であり、ユーザーの邪魔をしないように意図されています。そのため、トーストを解除するためにユーザーの操作を必要とするべきではありません。
-
-トーストは、トーストオプションの `duration` に表示するミリ秒数を渡すことで、特定の時間経過後に自動的に解除されるようにすることができます。もし `"cancel"` という役割を持つボタンが追加された場合、そのボタンがトーストを終了させます。作成後にトーストを破棄するには、インスタンスの `dismiss()` メソッドを呼び出してください。
-
-ハードウェアの戻るボタンを押しても、トーストはユーザーの邪魔をしないようになっているので、トーストは破棄されません。
-
-次の例では、`buttons` プロパティを使用して、クリックすると自動的にトーストを解散させるボタンを追加する方法と、解散イベントの `role` を収集する方法を示しています。
-
-import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
-
-<ButtonsPlayground />
-
-## ポジショニング
-
-トーストは、ビューポートの上部、下部、中部に配置することができます。位置は作成時に渡すことができます。指定できる値は `top`, `bottom`, `middle` です。位置が指定されない場合、トーストはビューポートの一番下に表示されます。
-
-## レイアウト
-
-トースト内のボタンコンテナは、`layout`プロパティを使用して、メッセージと同じ行に表示するか、別々の行に積み重ねて表示することができます。スタックレイアウトは、長いテキスト値を持つボタンで使用する必要があります。さらに、スタックトーストレイアウトのボタンは `side` の値として `start` または `end` のどちらかを使用できますが、両方を使用することはできません。
-
-import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
-
-<StackedPlayground />
-
-## Icons
-
-トースト内のコンテンツの横にアイコンを追加することができます。一般的に、トーストのアイコンはスタイルやコンテキストを追加するために使用されるべきで、ユーザーの注意を引いたり、トーストの優先順位を上げたりするために使用すべきではありません。より優先順位の高いメッセージをユーザーに伝えたい場合や、応答を保証したい場合は、代わりに [Alert](alert.md) を使用することをお勧めします。
-
-import IconPlayground from '@site/static/usage/v7/toast/icon/index.md';
-
-<IconPlayground />
-
-## テーマ
-
-import ThemingPlayground from '@site/static/usage/v7/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;
-}
-```
-
-## アクセシビリティ
-
-### フォーカスの管理
-
-トーストはさりげなく通知するものであり、ユーザーの邪魔をするものではありません。トーストを消すためにユーザーの操作が必要であってはなりません。そのため、トーストが表示されても、フォーカスが自動的に移動することはありません。
-
-### スクリーンリーダー
-
-`ion-toast` は、デフォルトで `aria-live="polite"` と `aria-atomic="true"` が設定されています。
-
-`aria-live` を指定すると、トーストの内容が更新されたときにスクリーンリーダがアナウンスするようになります。しかし、この属性は `'polite'` に設定されているため、スクリーン・リーダーは通常、現在のタスクを中断することはありません。開発者は `htmlAttributes` プロパティを使用して `aria-live` を `'assertive'` に設定することで、この動作をカスタマイズすることができます。これにより、トーストが更新されると、スクリーン・リーダーはすぐにユーザーに通知し、それまでの更新を中断させる可能性があります。
-
-また、`aria-atomic="true"`を設定すると、トースト全体を 1 つのユニットとしてアナウンスすることができます。これはトーストのコンテンツを動的に更新するときに便利で、スクリーン・リーダーが変更されたコンテンツのみをアナウンスすることを防ぎます。
-
-### ヒント
-
-これは完全なリストではありませんが、トーストを使用する際に従うべきガイドラインをいくつか紹介します。
-
-- トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss" ボタンがあるのは良いですが、タイムアウト後にトーストが自動的に終了するようにします。通知のためにユーザーの操作が必要な場合は、代わりに [ion-alert](./alert) を使用することを検討してください。
-
-- 複数のトーストを連続して開くことは避けてください。もし `aria-live` が `'assertive'` に設定されている場合、スクリーンリーダーは新しいトーストをアナウンスするために現在のタスクの読み込みを中断し、前のトーストのコンテキストが失われる可能性があります。
-
-- 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
deleted file mode 100644
index 89f0424fc2e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toggle.md
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: 'ion-toggle'
----
-
-import Props from '@ionic-internal/component-api/v7/toggle/props.md';
-import Events from '@ionic-internal/component-api/v7/toggle/events.md';
-import Methods from '@ionic-internal/component-api/v7/toggle/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toggle/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
-
-<head>
-  <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
-  <meta
-    name="description"
-    content="Toggleは、1つのオプションの状態を変更します。ion-toggleを使用して、アプリケーションのオン/オフを切り替えることができるカスタマイズ可能なトグルボタンを作成します。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-トグルは、1 つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、`checked`プロパティを設定することで、プログラムによってチェックすることも可能です。
-
-## 基本的な使い方
-
-import Basic from '@site/static/usage/v7/toggle/basic/index.md';
-
-<Basic />
-
-## On / Off Labels
-
-トグルは、`enableOnOffLabels`プロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。
-
-import OnOff from '@site/static/usage/v7/toggle/on-off/index.md';
-
-<OnOff />
-
-## Toggles in a List
-
-[アイテム](./item)と[リスト](./list)コンポーネントを使用すると、リストビューでトグルを使用することも可能です。
-
-import List from '@site/static/usage/v7/toggle/list/index.md';
-
-<List />
-
-## Label Placement
-
-開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.md';
-
-<LabelPlacement />
-
-## Justification
-
-開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
-
-import Justify from '@site/static/usage/v7/toggle/justify/index.md';
-
-<Justify />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-CSS カスタムプロパティは、標準 CSS と組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの `width` と `height` を直接変更してトラックのサイズを変更し、`--handle-width` と `--handle-height` カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。
-
-import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.md';
-
-<CSSProps />
-
-### CSS Shadow Parts
-
-トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのような CSS プロパティでもスタイルを設定でき、CSS カスタムプロパティと組み合わせることも可能です。
-
-import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.md';
-
-<CSSParts />
-
-## レガシーなトグル構文からの移行
-
-Ionic 7.0 では、よりシンプルなトグル構文が導入されました。この新しい構文は、トグルの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使用するには、`ion-label`を削除して、`ion-toggle`の内部にラベルを直接渡します。ラベルの配置は `ion-toggle` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-toggle` の `justify` プロパティを使用して制御することができます。
-
-import Migration from '@site/static/usage/v7/toggle/migration/index.md';
-
-<Migration />
-
-:::note
-Ionic の過去のバージョンでは、`ion-toggle` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-toggle` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-toggle`が正しく機能するためには、`ion-item`はもはや必須ではありません。
-:::
-
-### レガシー構文の使用
-
-Ionic は、アプリが最新のトグル構文を使用しているかどうかを検出するためにヒューリスティックを使用しています。場合によっては、レガシー構文を使い続けることが望ましいこともあります。開発者は、`ion-toggle`の`legacy`プロパティを`true`に設定することで、そのトグルのインスタンスがレガシー構文を使用するように強制できます。
-
-## Interfaces
-
-### ToggleChangeEventDetail
-
-```typescript
-interface ToggleChangeEventDetail<T = any> {
-  value: T;
-  checked: boolean;
-}
-```
-
-### ToggleCustomEvent
-
-必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-```typescript
-interface ToggleCustomEvent<T = any> extends CustomEvent {
-  detail: ToggleChangeEventDetail<T>;
-  target: HTMLIonToggleElement;
-}
-```
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
deleted file mode 100644
index cbe7547ffda..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/api/toolbar.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: 'ion-toolbar'
----
-
-import Props from '@ionic-internal/component-api/v7/toolbar/props.md';
-import Events from '@ionic-internal/component-api/v7/toolbar/events.md';
-import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md';
-import Parts from '@ionic-internal/component-api/v7/toolbar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
-
-<head>
-  <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
-  <meta
-    name="description"
-    content="Ion-toolbar コンポーネントは、アプリのメニューにあるツールバーボタンをカスタマイズすることができます。コンテンツの上下に固定ツールバーを追加したり、コンテンツと一緒にスクロールするフルスクリーンを使用することができます。"
-  />
-</head>
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-<EncapsulationPill type="shadow" />
-
-ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。コンテンツ](./content)内に配置された場合、ツールバーはコンテンツと一緒にスクロールします。
-
-ツールバーには、タイトル、ボタン、アイコン、戻るボタン、メニューボタン、検索バー、セグメント、プログレスバーなど、さまざまなコンポーネントを含めることができます。
-
-## 基本的な使い方
-
-ツールバーを正しく配置するために、[header](./header)または[footer](./footer)の内部に配置することをお勧めします。ツールバーをヘッダーに配置すると、コンテンツの上部に固定されて表示されます。フッターに配置された場合は、下側に固定されて表示されます。フルスクリーンのコンテンツは、ヘッダーやフッターにあるツールバーの後ろでスクロールします。 [title](./title) コンポーネントを使用すると、ツールバーの内側にテキストを表示することができます。
-
-import Basic from '@site/static/usage/v7/toolbar/basic/index.md';
-
-<Basic />
-
-## Buttons in Toolbars
-
-ツールバーに配置するボタンは、[buttons](./buttons)コンポーネントの内部に配置する必要があります。ボタンコンポーネントは、名前付きの [スロット](#slots) を使ってツールバーの内側に配置することができます。スロットの `"primary"` と `"secondary"` は `ios` モードと `md` モードで異なる動作をします。
-
-buttons コンポーネントは、標準的な [ボタン](./button)、[戻るボタン](./back-button)、[メニューボタン](./menu-button)、またはそれらのいずれかをラップすることができます。ツールバーのボタンはデフォルトで透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例でバックボタンとメニューボタンに含まれているプロパティは表示目的であり、適切な使用方法についてはそれぞれのドキュメントを参照してください。
-
-import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md';
-
-<Buttons />
-
-## Searchbars in Toolbars
-
-[searchbar](./searchbar)は、ツールバーの中に配置することで、コンテンツを検索することができます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さを完全に占有します。
-
-import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md';
-
-<Searchbars />
-
-## ツールバーのセグメント
-
-[セグメント](./segment)は、一般的にツールバーで、同じページ内の 2 つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。
-
-import Segments from '@site/static/usage/v7/toolbar/segments/index.md';
-
-<Segments />
-
-## ツールバーのプログレスバー
-
-[プログレスバー](./progress-bar)は、アプリで進行中のプロセスを示すローディングインジケータとして使用されます。プログレスバーは、ツールバーの下部に配置されるため、ツールバーの中の他のコンポーネントと一緒に配置することができます。
-
-import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md';
-
-<ProgressBars />
-
-## テーマ
-
-### Colors
-
-import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.md';
-
-<Colors />
-
-## CSS カスタムプロパティ
-
-import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.md';
-
-<CSSProps />
-
-## Borders
-
-`md` モードでは、`<ion-header>` は下部にボックスシャドウを、`<ion-footer>` は上部にボックスシャドウを表示します。 `ios` モードでは、`<ion-header>` の下部にボーダーが、`<ion-footer>` の上部にボーダーが表示されます。
-
-## プロパティ
-
-<Props />
-
-## イベント
-
-<Events />
-
-## メソッド
-
-<Methods />
-
-## CSS Shadow Parts
-
-<Parts />
-
-## CSS カスタムプロパティ
-
-<CustomProps />
-
-## Slots
-
-<Slots />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
deleted file mode 100644
index b9ceb42ea2c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Ionic CLI
-sidebar_label: 概要
----
-
-<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)) は、Ionic アプリを開発する時に頼りになるツールです。
-
-## インストール
-
-Ionic CLI は npm でグローバルにインストールできます:
-
-```shell
-npm install -g @ionic/cli
-```
-
-## Help
-
-Ionic CLI では `--help` フラグをつけることでコマンドのドキュメントを利用できます。
-
-```shell
-$ ionic --help
-$ ionic <command> --help
-$ ionic <command> <subcommand> --help
-```
-
-:::note
-プロジェクトディレクトリで `ionic <command> --help` を必ず実行してください。
-
-コマンドの中には `ionic serve` のように、React と Angular のように、プロジェクトのタイプに応じたヘルプが表示されるものがあります。
-:::
-
-<!-- TODO: image? -->
-
-## 構成
-
-Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新の Node LTS が推奨です。Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">Github repository</a>.
-
-## トラブルシューティング
-
-Ionic CLI の問題をトラブルシューティングするには、以下の方法が役立ちます:
-
-- 最新バージョンの Ionic CLI がインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。
-- 最新の Node LTS がインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setup を参照してください。
-- `verbose` フラグは、デバッグメッセージを表示し、問題を絞り込むことができます。
-- 接続の問題は、プロキシの設定が適切でないことが原因である可能性があります。リクエストプロキシの設定については、[Using a Proxy](/docs/cli/using-a-proxy) を参照してください。
-- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLI が再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI 環境変数](/docs/cli/configuration#environment-variables)で設定します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore
deleted file mode 100644
index d6b7ef32c84..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/commands/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-*
-!.gitignore
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
deleted file mode 100644
index 293fc0bc9bd..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/configuration.md
+++ /dev/null
@@ -1,243 +0,0 @@
----
-title: 設定
----
-
-<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>
-
-## ファイル
-
-設定された値は JSON ファイルに格納されます。Ionic CLI は、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。
-
-CLI には、プロジェクト設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定および printf するためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。
-
-### プロジェクト設定ファイル
-
-各 Ionic プロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。
-
-```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": {
-    ...
-  }
-}
-```
-
-## 環境変数
-
-CLI は、次の環境変数を検索します:
-
-- `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 は、CLI コマンドの動作を変更するグローバルオプションです。
-
-- `--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
-
-CLI は、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLI にフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。:
-
-- `ionic:serve:before`: dev server が start される前に実行されます
-- `ionic:serve:after`: dev server が終了される前に実行されます
-- `ionic:build:before`: web asset の構築がはじまる前に実行されます
-- `ionic:build:after`: web asset の構築が終了して実行されます。
-- `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed
-- `ionic:capacitor:build:before` : executed on 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 は `ionic.config.json` で定義することもできます。プロジェクト内で Hooks オブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値は JavaScript ファイルへのパスまたはパスの配列です。
-
-次の例では、ファイルは `ionic:build:before` フックでインポートされ、実行されます。
-
-```json
-"hooks": {
-  "build:before": "./scripts/build-before.js"
-},
-```
-
-JavaScript Hook ファイルは、フックが実行されるたびに単一の引数(`ctx`)が渡される単一の関数をエクスポートする必要があります。
-
-引数は、Hook ファイルに指定されたコンテキストであり、Hook ごと、および呼び出しごとに異なります。
-
-`./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
-Ionic CLI は multi-app 構成セットアップをサポートしており、複数の Ionic アプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。
-
-If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples.
-:::
-
-### セットアップステップ
-
-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).
-
-### プロジェクト構成
-
-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
-```
-
-### 設定ファイル
-
-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.
-
-### アプリの追加
-
-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
-```
-
-## 詳細設定
-
-### 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 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.
-
-### 遠隔計測について
-
-CLI から Ionic に使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
deleted file mode 100644
index 4d2d160ee78..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/livereload.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Live Reload
-
-Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. 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
-
-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 IP 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.
-
-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.
-
-### Using SSL
-
-Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS.
-
-For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:
-
-```shell
-ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
-```
-
-Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
deleted file mode 100644
index 76fe15db241..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/cli/using-a-proxy.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# プロキシを利用する
-
-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"
-```
-
-### 他の CLI
-
-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 の設定
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
deleted file mode 100644
index 5fae65c456e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/components.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: UIコンポーネント
-hide_table_of_contents: true
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsCards from '@components/global/DocsCards';
-
-<head>
-  <title>UIコンポーネント | 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 アプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionic には、modals、popups、cards など、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。
-
-<intro-end />
-
-<DocsCards>
-  <DocsCard header="Action Sheet" href="api/action-sheet" img="/icons/feature-component-actionsheet-icon.png">
-    <p>Action Sheetは、一連のオプションを表示して、アクションを確認または取り消すことができます。</p>
-  </DocsCard>
-
-<DocsCard header="Alert" href="api/alert" icon="/icons/component-alert-icon.png">
-  <p>Alertは、特定のアクションまたはアクションのリストを選択する機能を、ユーザーに提供するための優れた方法です。</p>
-</DocsCard>
-
-<DocsCard header="Badge" href="api/badge" icon="/icons/component-badge-icon.png">
-  <p>Badgeコンポーネントは、通常は数値をユーザーに伝えるための小さなコンポーネントです。</p>
-</DocsCard>
-
-<DocsCard header="Button" href="api/button" icon="/icons/component-button-icon.png">
-  <p>
-    Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。
-  </p>
-</DocsCard>
-
-<DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
-  <p>Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。</p>
-</DocsCard>
-
-<DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
-  <p>Checkboxを使用して、択一の決定をする必要があることをユーザーに知らせることができます。</p>
-</DocsCard>
-
-<DocsCard header="Chip" href="api/chip" icon="/icons/component-chip-icon.png">
-  <p>チップはデータやアクションを表示するためのコンパクトな方法です。</p>
-</DocsCard>
-
-<DocsCard header="Content" href="api/content" icon="/icons/component-content-icon.png">
-  <p>コンテンツは、アプリと対話してアプリをナビゲートするための典型的な方法です。</p>
-</DocsCard>
-
-<DocsCard header="Date & Time Pickers" href="api/datetime" icon="/icons/component-datetimepicker-icon.png">
-  <p>
-    日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。
-  </p>
-</DocsCard>
-
-<DocsCard header="Floating Action Button" href="api/fab" icon="/icons/component-fab-icon.png">
-  <p>
-    フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。
-  </p>
-</DocsCard>
-
-<DocsCard header="Icons" href="api/icon" 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>Gridはカスタムレイアウトを構築するための強力なモバイルファーストシステムです。</p>
-</DocsCard>
-
-<DocsCard header="Infinite Scroll" href="api/infinite-scroll" icon="/icons/component-infinitescroll-icon.png">
-  <p>Infinite scrollは、ユーザーがアプリをスクロールするときに新しいデータを読み込むことができます。</p>
-</DocsCard>
-
-<DocsCard header="Input" href="api/input" icon="/icons/component-input-icon.png">
-  <p>Inputsはユーザーがアプリにデータを入力する方法を提供します。</p>
-</DocsCard>
-
-<DocsCard header="Item" href="api/item" icon="/icons/component-item-icon.png">
-  <p>Itemsは、Listの一部として使用できる汎用のUIコンテナです。</p>
-</DocsCard>
-
-<DocsCard header="List" href="api/list" icon="/icons/component-lists-icon.png">
-  <p>Listは、連絡先リスト、再生リスト、メニューなどの情報の行を表示できます。</p>
-</DocsCard>
-
-<DocsCard header="Navigation" href="api/nav" img="/icons/feature-component-navigation-icon.png">
-  <p>Navigationは、ユーザーがアプリ内の異なるページ間を移動する方法です。</p>
-</DocsCard>
-
-<DocsCard header="Menu" href="api/menu" icon="/icons/component-menu-icon.png">
-  <p>
-    Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。
-  </p>
-</DocsCard>
-
-<DocsCard header="Modal" href="api/modal" icon="/icons/component-modal-icon.png">
-  <p>
-    Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。
-  </p>
-</DocsCard>
-
-<DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
-  <p>Popoverは、コンテキストを変えずに情報やオプションを提示する簡単な方法を提供します。</p>
-</DocsCard>
-
-<DocsCard header="Progress Indicators" href="api/progress-bar" icon="/icons/component-progress-icon.png">
-  <p>Progress indicatorsは、操作またはアクティビティの進行状況を視覚化します。</p>
-</DocsCard>
-
-<DocsCard header="Radio" href="api/radio" icon="/icons/component-radio-icon.png">
-  <p>Radio inputsはあなたが排他的なオプションのセットを提示することを可能にします。</p>
-</DocsCard>
-
-<DocsCard header="Refresher" href="api/refresher" icon="/icons/component-refresher-icon.png">
-  <p>Refresherは、コンテンツコンポーネントの更新機能を提供します。</p>
-</DocsCard>
-
-<DocsCard header="Searchbar" href="api/searchbar" img="/icons/feature-component-search-icon.png">
-  <p>Searchbarは、ールバーからアイテムを検索またはフィルタリングするために使用されます。</p>
-</DocsCard>
-
-<DocsCard header="Reorder" href="api/reorder" icon="/icons/component-reorder-icon.png">
-  <p>Reorderを使用すると、ユーザーはドラッグアンドドロップでアイテムのリストを並べ替えることができます。</p>
-</DocsCard>
-
-<DocsCard header="Routing" href="api/router" icon="/icons/component-routing-icon.png">
-  <p>Routingは現在のpathに基づいてナビゲーションを可能にします。</p>
-</DocsCard>
-
-<DocsCard header="Segment" href="api/segment" icon="/icons/component-segment-icon.png">
-  <p>Segmentsは、フィルターまたはViewの切り替えとして使用できる一連の専用ボタンを提供します。</p>
-</DocsCard>
-
-<DocsCard header="Select" href="api/select" icon="/icons/component-select-icon.png">
-  <p>SelectはネイティブのHTML選択に似ていますが、Sortと選択が少し改善されています。</p>
-</DocsCard>
-
-<DocsCard header="Tabs" href="api/tabs" img="/icons/feature-component-tabs-icon.png">
-  <p>
-    Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。
-  </p>
-</DocsCard>
-
-<DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
-  <p>Toastは、アプリのコンテンツの上に通知を表示するために使用されます。一時的なものでも却下可能なものでもあります。</p>
-</DocsCard>
-
-<DocsCard header="Toggle" href="api/toggle" icon="/icons/component-toggle-icon.png">
-  <p>Togglesは択一のInputでありオプションやスイッチによく使われます。</p>
-</DocsCard>
-
-  <DocsCard header="Toolbar" href="api/toolbar" icon="/icons/component-toolbar-icon.png">
-    <p>Toolbarsは、アプリに関連する情報や操作を格納するために使用されます。</p>
-  </DocsCard>
-</DocsCards>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/coc.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/coc.md
deleted file mode 100644
index 5e9c1a94d20..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/coc.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/how-to-contribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/how-to-contribute.md
deleted file mode 100644
index df5f6efbd23..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/contributing/how-to-contribute.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
deleted file mode 100644
index cfa520f8ee9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/cross-platform.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-disableHtmlPreviews: true
----
-
-# クロスプラットフォーム
-
-Ionic は、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。
-
-## ハードウェア API
-
-ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するための API を呼び出すことがよくあります。これらの API 呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionic にはこの問題に対応するためのいくつかの方法があります。
-
-### Ionic Native
-
-[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったり Cordova プラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、 アプリがクラッシュすることなく動き続けるということです。
-
-### プラットフォーム検知
-
-Ionic アプリ内では、ネイティブ API を呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例:
-
-```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
-  }
-});
-```
-
-このコードは、ネイティブ API が使える  かどうか不確かな環境向けに開発していたとしても非常に役に立ちます。
-
-### ブラウザのフォールバック
-
-多くのネイティブ API（例えば File API）はブラウザで利用できません。API は常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの 2 つの点を考慮すると、アプリが実行されているプラ ​​ ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。
-
-## デスクトップ
-
-デスクトップ向けアプリの開発を計画しているときは、<a href="https://electronjs.org" target="_blank">Electron</a>として開発するか、<strong>Progressive Web App</strong>として開発するか検討し、より大きなデバイスでアプリがスムーズに機能するかを確認することが重要です。
-
-### レイアウト
-
-多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的な UI パターンを考えてください:
-
-```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>
-```
-
-このコードは幅が 100%の 5 つの  項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。
-
-<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>
-```
-
-全体を `ion-grid` 要素で囲むことで、Ionic のグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。
-
-<img src={require('@site/static/img/building/cross-platform-grid.png').default} />
-
-`<ion-grid>` 要素に `fixed` 属性を追加することでより良くすることができます。これにより、グリッドは画面幅に基づいて固定幅を持つようになります。どんなに大きな画面でもグリッド幅が不自然に大きくなることはありません。
-
-<img src={require('@site/static/img/building/cross-platform-grid-fixed.png').default} />
-
-`ion-col` プロパティを追加することで列の幅をよりカスタマイズすることができます。
-
-```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>
-```
-
-上の例ではたくさんのコードが追加されていますが、キーポイントは下記になります:
-
-- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は 12 です。
-
-- `size`属性は`size-{breakpoint}`の形式で各画面幅に応じたブレークポイントを持つこともできます。
-
-グリッドのカスタマイズについてより詳細な情報は[Grid]((../api/grid.md)をご覧ください。
-
-## ストレージ
-
-ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHR リクエストから JSON を保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLite データベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic 開発者はそれを心配する必要はありません。
-
-### Ionic Storage
-
-この場合、<a href="https://github.com/ionic-team/ionic-storage" target="_blank">Ionic のストレージライブラリ</a>は複数の環境において最適な選択肢です。Ionic のストレージクラスは、十分にテストされた LocalForage ライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。
-
-現在、ネイティブ向けには SQLite を通して実行され、他にも IndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定した 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);
-  }
-}
-```
-
-PouchDB といった他のストレージを選択することも可能です。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
deleted file mode 100644
index 5a8b37310d2..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/fundamentals.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: 基本的な考え方
-sidebar_label: 基本的な考え方
----
-
-<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>
-
-Ionic アプリの開発に慣れていない人には、Ionic プロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Framework とは何か、そしてそれがどのように機能するかについての基本を説明します。
-
-## UI コンポーネント
-
-Ionic Framework は、アプリケーションの構成要素として機能する、再利用可能な UI コンポーネントのライブラリです。Ionic のコンポーネントは、HTML、CSS、JavaScript を利用した[Web 標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionic コンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。
-
-## スタイルの適用
-
-スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できる Ionic Framework に組み込まれている機能です。すべての Ionic コンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhone や iPad などの Apple デバイスは、Apple 独自の<a href="https://www.apple.com/ios" target="_blank">iOS デザイン</a>を使用します。同様に、Android デバイスは、<a href="https://material.io/guidelines/" target="_blank">Material Design</a>と呼ばれる Google のデザインを使用します。
-
-プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリの UX を提供します。Apple の App Store からダウンロードした Ionic アプリは iOS テーマを使用し、Android の Play Store からダウンロードした Ionic アプリは Material Design テーマを取得します。ブラウザから Progressive Web Apps（PWA）として表示アプリを表示する場合、Ionic はデフォルトで Material Design テーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。
-
-## ナビゲーション
-
-従来の Web アプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。
-この例としては、ユーザが、Wikipedia のようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。
-
-これとは対照的に、モバイルアプリはしばしば平行な「非線形」ナビゲーションを利用します。たとえば、タブのついたインタフェースでは、タブごとにナビゲーションスタックを個別に設定できるため、ユーザがタブ間を移動したり切り替えたりするときにユーザが自分の場所を失うことはありません。
-
-Ionic アプリは、このモバイルナビゲーションのアプローチを採用しており、Web 開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。
-
-Angular と`@ionic/angular`で構築するアプリは、<a href="https://angular.jp/guide/router" target="_blank">Angular Router</a>を使用することをお勧めします。これは Angular と Ionic 4 の組み合わせから使うことができます。
-
-## Native アクセス
-
-Web テクノロジで構築されたアプリ（Ionic アプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionic アプリ用のベースとなるコードは、Web 標準とこれらのプラットフォーム間で共有される共通の API に基づいているため、多くのプラットフォームで機能します。
-
-Ionic の最も一般的な使用例の 1 つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOS と Android の両方のソフトウェア開発キット（SDK）は、完全なネイティブ SDK アクセスを可能にしながら、あらゆる Ionic アプリをレンダリングする [Web Views](webview.md) を提供します。
-
-<a href="https://capacitorjs.com/" target="_blank">
-  Capacitor
-</a> や <a href="https://cordova.apache.org/" target="_blank">
-  Cordova
-</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
-
-## テーマ
-
-基本的に、Ionic Framework は<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a>を使用して構築されているので、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS プロパティ (variables)</a>の柔軟性を利用することができます。これにより、Web 標準に準拠しながら見栄えのするアプリを設計することがとても簡単になります。デフォルトでもすばらしいものがつくれるように、私たちはテーマカラーのデフォルトセットを提供しますが、ブランド、会社、または希望のカラーパレットに合うデザインにするためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマに関する詳細は[Theming](../theming/basics.md)をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
deleted file mode 100644
index 8c40ee79471..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/webview.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-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 View は、ネイティブデバイス上の Web アプリを強化します。
-
-[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web View は自動的に提供されます。
-
-[Cordova](../reference/glossary.md#cordova)については、Ionic が<a href="https://github.com/ionic-team/cordova-plugin-ionic-webview" target="_blank">Web View のプラグイン</a>を管理しています。このプラグインは、Ionic CLI を使用する際にデフォルトで提供されます。
-
-## Web View とは
-
-Ionic アプリは[Web 技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Web ブラウザのすべての機能が使える Web View を使ってレンダリングされます。
-
-最近の Web View は、カメラ、センサー、GPS、スピーカー、Bluetooth などのハードウェア機能のための組み込み<a href="https://whatwebcando.today" target="_blank">HTML5 APIs</a>を多数提供していますが、プラットフォーム固有のハードウェア API にアクセスする必要がある場合もあります。Ionic アプリでは、通常は JavaScript API を利用してネイティブプラグインにアクセスしてブリッジする形でハードウェア API を利用することができます。
-
-![webview architecture](/img/building/webview-architecture.png)
-
-Ionic Web View プラグインは、最新の JavaScript アプリケーションに特化しています。iOS と Android の両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化された HTTP サーバーにホストされます。
-
-### 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 プロトコル
-
-Cordova と Capacitor のアプリはローカルの HTTP サーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルの HTTP サーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://<host>:<port>/<prefix>/path/to/device/file` に書き換えなければなりません。
-
-Capacitor アプリの場合、URI はこのように変換します。
-
-```javascript
-import { Capacitor } from '@capacitor/core';
-
-Capacitor.convertFileSrc(filePath);
-```
-
-Cordova アプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　が File URI を変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応する Ionic Native プラグインもあります。また、対応する Ionic Native プラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。
-
-### 実装
-
-- **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/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
deleted file mode 100644
index 47020a40c74..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/core-concepts/what-are-progressive-web-apps.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-sidebar_label: PWAとは?
-title: Progressive Web Apps
----
-
-<head>
-  <title>Progressive Web Applications: 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...それよりもいいもの
-
-Progressive Web App (PWA) は、最新の Web 機能を使用して、ユーザーにアプリのようなエクスペリエンスを提供する Web アプリです。
-これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URL からアクセスでき、検索エンジンにインデックスされます。
-
-[Capacitor](https://capacitorjs.com)と連携して、すべてのユーザーに複数のデプロイ対象を提供することができます。
-アプリを PWA としてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。
-
-Ionic では、アプリストアへのリリースだけでなく、PWA としてモバイル Web にデプロイすることも可能です。
-
-### 要求されるもの
-
-Progressive Web App と見なされるには、アプリが以下の要件を満たしている必要があります。
-
-- プログレッシブ - ブラウザの種類に関係なく、すべてのユーザーに対して機能します。これは、プログレッシブ・エンハンスメントを中核として構築されているためです。
-
-- レスポンシブ - デスクトップ、モバイル、タブレットなど、あらゆるフォームファクターに対応。
-
-- 接続に依存しない - オフラインや低品質のネットワークでも動作するように、サービスワーカーが強化されています。
-
-- アプリライク - アプリシェルモデルを使用し、アプリスタイルのナビゲーションとインタラクションを提供します。
-
-- フレッシュ - サービスワーカーの更新プロセスにより、常に最新の情報を提供します。
-
-- 安全 - HTTPS 経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。
-
-- 発見性 - W3C マニフェストとサービスワーカー登録により、「アプリケーション」として識別可能であり、検索エンジンに見つけてもらうことができます。
-
-- 再エンゲージメント - プッシュ通知などの機能により、再エンゲージメントを容易にします。
-
-- インストール可能 - アプリストアのような煩わしさがなく、ユーザーが最も便利だと思うアプリをホーム画面に置いておくことができます。
-
-- リンク可能 - 複雑なインストールを必要とせず、URL で簡単に共有できます。
-
-<em>
-  <a href="https://addyosmani.com/blog/getting-started-with-progressive-web-apps/" target="_blank">
-    Addy Osmani: Progressive web apps
-  </a>
-</em>
-
-たくさんありますが、Ionic アプリの場合はいくつかのポイントに集約されます。
-
-#### オフライン対応
-
-アプリはオフラインで動作する必要があります。適切な「オフライン」メッセージの表示や、表示用にアプリデータをキャッシュすることなどです。
-
-#### <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank">Web App Manifest</a>
-
-App Manifest ファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。
-
-#### <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>
-
-Service Worker については、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
deleted file mode 100644
index 8523eab429d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/app-store.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: iOS App Storeへの開発
-sidebar_label: iOS App Store
----
-
-<head>
-  <title>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>
-
-## 要件
-
-iOS App Store にアプリを提出するには、いくつかのことが必要です。
-
-- Xcode
-- 有料の Apple Developers アカウント
-- 有効なプロビジョニングプロファイル
-- アプリの開発および配布に関する証明書
-
-Apple Developer Program への登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。
-
-## リリースビルドの作成
-
-iOS プラットフォームがまだ追加されていない場合は、必ず追加してください。
-
-```shell
-ionic cordova platform add ios
-```
-
-プラットフォームが追加されたら、ビルドコマンドを `--prod` フラグを付けて実行します。
-
-```shell
-ionic cordova build ios --prod
-```
-
-これで、アプリの Web 部分の minified コードが生成され、iOS のコードベースにコピーされます。
-
-ここから、`.xcworkspace` ファイルを `./platforms/ios/` に開き、Xcode を起動します。
-
-## 署名証明書の生成
-
-iOS 用の証明書の生成は少し複雑なので、証明書とは何か、どのように生成するかについては、[Apple の公式ドキュメント](https://help.apple.com/xcode/mac/current/#/dev3a05256b8) を必ず確認してください。
-
-必要な証明書とプロファイルを作成するには、[Apple のメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Apple のドキュメントに記載されているリンクをたどってください。
-
-ここで重要なのは、開発用と配布用の 2 種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。
-
-ディストリビューション証明書は、アプリをストアに配布するためのものです。アプリがディストリビューション証明書で署名されると、どのデバイスにもインストールできるようになります。
-
-## XCode でのアプリへの署名
-
-正しい証明書を生成した後、Xcode に自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しい Development と Distribution の証明書が使用されることを確認するためです。
-
-このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizer が開かれます。
-
-Xcode Organizer は、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、「Upload to App Store」をクリックします。
-チームを選択する場所と、アプリの詳細情報、そして「Upload」ボタンがあるはずなので、それをクリックします。
-
-アップロードに成功すると、アプリは [iTunes Connect](https://itunesconnect.apple.com) にリストされ、 "Activity" にリストされるはずです。
-ここから、TestFlight をベータテスト用に有効にしたり、アプリを Apple の承認用に送信したりすることができます。
-
-## アプリのアップデート
-
-アプリが成長するにつれ、新機能や修正を加えて更新する必要があります。
-アプリのアップデートは、Apple に新バージョンを提出するか、Appflow のような<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">live update 機能</a>を使用することで可能です。
-
-<strong>Live Updates</strong>を使うと, アプリの変更は、App
-Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。
-
-:::note
-iOS App Store が更新されたビルドを受け入れるには、config.xml ファイルを編集してバージョン値を増やし、上記の手順でアプリをリリース用に再構築する必要があります。
-:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
deleted file mode 100644
index 6d72e41298d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/desktop-app.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: デスクトップアプリへのデプロイ
-sidebar_label: Electronデスクトップアプリ
----
-
-<head>
-  <title>Windowsと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>
-
-Ionic でデスクトップアプリケーションを構築すると、開発者はコードを 100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electron に精通していることを前提としており、Electron アプリの「作り方」については触れません。 詳しくは <a href="https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app" target="_blank">Electron guide</a>. をご覧ください。
-
-## macOS アプリ
-
-### 要件
-
-macOS アプリをストアでアプリを公開するには、難しい要件が 2 つあります。
-
-- [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること
-- 開発者アカウント ($100 through Apple's developer portal) が有効であること
-
-### リリース
-
-Electron チームは、macOS 用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。
-
-## Windows アプリ
-
-### 要件
-
-Windows アプリをストアでアプリを公開するには、2 つの厳しい要件があります。
-
-- 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` は npm を使ってインストールすることができます:
-
-```shell
-npm install -g electron-windows-store
-```
-
-### リリース作業
-
-macOS と同様、Electron は Windows 用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
deleted file mode 100644
index d45dd27aa13..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Android Play Storeへの開発
-sidebar_label: Android Play Store
----
-
-<head>
-  <title>Android Play Storeでのリリース: 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>
-
-## アプリのリリースビルド作成
-
-Android 用のリリースビルドを生成するには、以下の cli コマンドを実行します。
-
-```shell
-$ ionic cordova build android --prod --release
-```
-
-これは、アプリの `platforms/android/app/build/outputs/apk` ディレクトリにある `config.xml` の設定に基づき、リリースビルドを生成するものです。
-Ionic アプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。
-
-## APK への署名
-
-まず、署名されていない APK に署名する必要があります。署名鍵がすでに生成されている場合は、この手順をスキップして、代わりにその鍵を使用します。
-Android SDK に付属する keytool コマンドを使用して、秘密鍵を生成します。
-
-```shell
-$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
-```
-
-このコマンドを実行し、プロンプトに答えると、カレントディレクトリに `my-release-key.keystore` という名前のファイルが作成されます。
-
-:::caution
-このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Play ストアはこのアプリのアップデートを受け付けません!
-:::
-
-署名されていない APK に署名するには、Android SDK に含まれる jarsigner ツールを実行します。
-
-```shell
-$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
-```
-
-最後に、APK を最適化するために、zipalign ツールを実行する必要があります。
-`zipalign` ツールは `/path/to/Android/sdk/build-tools/VERSION/zipalign` にあります。
-例えば、Android Studio がインストールされている macOS では、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。
-
-```shell
-$ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
-```
-
-これにより、Google Play ストアに受け入れられる HelloWorld.apk という最終リリースバイナリが生成されます。
-
-## Google Play Store にアプリを送信する
-
-リリース用 APK が生成されたので、Play ストアのリスティングを書き、APK をアップロードすることができるようになりました。
-
-まずは、[Google Play Store Developer Console](https://play.google.com/apps/publish)にアクセスし、開発者アカウントを新規に作成します。
-
-:::note
-Google Play で開発者アカウントを作るには、25US ドルが必要です。
-:::
-
-開発者アカウントを作成したら、「アプリケーションを作成する」ボタン(Create an Application)をクリックします。
-
-![Create an App button](/img/publishing/newAppGPlay.png)
-
-アプリの説明、スクリーンショット、その他の情報を入力してください。
-準備ができたら、生成された署名付きリリース APK をアップロードし、アプリを公開します。
-
-## アプリのアップデート
-
-アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Store に新バージョンを提出するか、Appflow の Live Update 機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Play ストアに変更を送信することなく、Appflow のダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Update についてもっと知るためには<a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">こちら</a>にアクセスください。
-
-:::note
-Google Play ストアでアップデートされた APK を受け入れるには、config.xml ファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。
-:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.mdx b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.mdx
deleted file mode 100644
index 4a68ada3389..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/play-store.mdx
+++ /dev/null
@@ -1,167 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
deleted file mode 100644
index 50b9891a5b8..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/deployment/progressive-web-app.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Progressive Web Appへの開発
-sidebar_label: Progressive Web App (PWA)
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsCards from '@components/global/DocsCards';
-
-<head>
-  <title>Progressive Web Applicationへのデプロイ</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>
-
-Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWA とは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。
-
-Ionic が対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、Angular と 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
deleted file mode 100644
index 483da7da603..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/books.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Books
-
-### [Ionic で作る モバイルアプリ制作入門〈Web/iPhone/Android 対応〉](https://amzn.to/2Ygk5bA)
-
-WEB サイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTML でモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。
-
-by [rdlabo](https://twitter.com/rdlabo)
-
-### [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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/courses.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/courses.md
deleted file mode 100644
index 46038f4ffb1..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/courses.md
+++ /dev/null
@@ -1,83 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides.md
deleted file mode 100644
index dbe6d9477b8..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
deleted file mode 100644
index 7887f03a320..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/intro.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/intro.md
deleted file mode 100644
index 844aef86a7e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/intro.md
+++ /dev/null
@@ -1,117 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
deleted file mode 100644
index ff861040e51..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md
+++ /dev/null
@@ -1,156 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
deleted file mode 100644
index b33fb66ea8a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ /dev/null
@@ -1,193 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/theming.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/theming.md
deleted file mode 100644
index 19ef3364069..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/theming.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
deleted file mode 100644
index c4fac8c2871..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
deleted file mode 100644
index 5e1d62fed1b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
+++ /dev/null
@@ -1,202 +0,0 @@
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/intro.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/intro.md
deleted file mode 100644
index bffc7ea9c28..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/intro.md
+++ /dev/null
@@ -1,97 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
deleted file mode 100644
index 565be644bdf..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md
+++ /dev/null
@@ -1,154 +0,0 @@
-# Android, iOS, and the Camera - Oh My!
-
-以前は、Ionic アプリを立ち上げて、ウェブブラウザでローカルに実行していました。さて、自分の iOS または Android デバイスにインストールして、フォトギャラリー機能の構築を始めましょう。
-
-## Cordova の iOS および Android プラットフォームを追加
-
-Ionic はオープンソースの [Cordova プロジェクト](https://cordova.apache.org/docs/ja/latest/guide/overview/)を活用して、ネイティブなハードウェアサポートを提供しています。まず iOS と Android の _プラットフォーム_ を追加し、その後 Camera のような特定の _プラグイン_ を追加します。
-
-```shell
-$ ionic cordova platform add ios
-$ ionic cordova platform add android
-```
-
-これらのコマンドは `config.xml` ファイルを作成します。これは Cordova iOS と Android の設定を定義するために使われます。Cordova はこのファイルを読み込み、各ネイティブアプリのバイナリをビルドする際に各設定を適用します。
-
-There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
-
-とてもいいよ！これで、カメラ機能を追加できます。ちなみに、このリファレンスコードは [GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4) にあります。
-
-`tab2.page.html` に戻り、以下を追加します:
-
-```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>
-```
-
-ファイルを保存して監視 - カメラボタンが表示されます！これをタップすると、何も実行されないことに気付きます。次に、これを修正します。
-
-## CLI を介してカメラの依存関係を追加
-
-Camera を使用するためには、その JavaScript とネイティブライブラリの依存関係を取り込む必要があります。ターミナルウィンドウに戻り、次のコマンドを実行して JavaScript ライブラリをプロジェクトに追加し、TypeScript コードに Camera API を公開します:
-
-```shell
-npm install @awesome-cordova-plugins/camera
-```
-
-`package.json` 内に、次のようなバージョン番号の新しい JavaScript 依存関係が追加されていることがわかります。
-
-`"@awesome-cordova-plugins/camera": "^5.4.0"`
-
-次に、このコマンドを実行して iOS と Android のネイティブコードを追加し、実際にカメラをモバイルデバイスで動作させます。こちらのより詳細な情報は、[Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) と [Ionic Native](https://cordova.apache.org/docs/en/latest/guide/overview/) を御覧ください。
-
-```shell
-ionic cordova plugin add cordova-plugin-camera
-```
-
-`config.xml` ファイルが更新され、ネイティブカメラコードに次のようなエントリが追加されます。
-
-```xml
-<plugin name="cordova-plugin-camera" spec="^4.0.3" />
-```
-
-次のステップは iOS ユーザーのみ必要です。iOS10 では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section (<platform name="ios"></platform>) の `config.xml` の最後に追加します:
-
-```xml
-<!-- iOS 10 で必須: Camera 許可プロンプト -->
-<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
-    <string>Used to take pictures</string>
-</edit-config>
-```
-
-## Angular アプリの Module に Camera プラグインを追加
-
-これは Angular プロジェクトなので、もうひとつやるべきことがあります: App Module(`src/app/app.module.ts`) に Camera を登録します。まず、カメラモジュールをインポートします:
-
-```Javascript
-import { Camera } from '@awesome-cordova-plugins/camera/ngx';
-```
-
-では、これを Provider として追加します:
-
-```Javascript
-providers: [
-    StatusBar,
-    SplashScreen,
-    Camera,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
-  ],
-```
-
-これでアプリ内のどのページでも利用できます。
-
-## ギャラリーページへの Camera の追加
-
-カメラボタンはまだ何もしていません。`tab2.page.html` では、ボタンにクリックハンドラを追加します:
-
-```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>
-```
-
-次に、イメージプレースホルダーを更新します。次の例では、"currentImage" 変数(次に取り組んでいきます)がイメージにバインドされ、ユーザに表示されます。
-
-```html
-<img [src]="currentImage" *ngIf="currentImage" />
-```
-
-次に、`tab2.page.ts` を開き、Camera ライブラリをインポートします:
-
-```Javascript
-import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';
-```
-
-次に、"currentImage” 変数を定義し、コンストラクタを使用して Camera をこのクラスに挿入します:
-
-```Javascript
-export class Tab2Page {
-  currentImage: any;
-
-  constructor(private camera: Camera) { }
-}
-```
-
-最後に、 `tab2.page.ts` の "takePicture" メソッドを追加します。カメラボタンをタップした後に実行するように既に設定されています。
-
-```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);
-    });
-  }
-}
-```
-
-注意: iOS や Android には言及されていません！これはプラグインの素晴らしい能力です: ある API(この場合は `camera.getPicture()`)を使い、プラグインがプラットフォームの違いを処理してくれます。一度書けば、どこでも実行できます。😀
-
-このファイルを保存し、DevApp の Camera ボタンをタップします。ほら見て！デバイスでカメラが起動します。撮影した写真は、フォトギャラリーページに表示されます。
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
deleted file mode 100644
index 140d3aef091..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/guides/first-app-v4/theming.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# 自分らしさを！Ionic テーマ
-
-今までは、単なるカメラアプリを壮大なフォトギャラリーに発展してきました。では、Ionic のテーマ設定でフォトギャラリーを独自のものにする方法を見てみましょう。このアプリのビジュアルデザインは非常に重要で、幸運なことに、Ionic はすぐに使える多くの柔軟なテーマを提供してくれます。
-
-Ionic には CSS 変数として定義された 9 つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます:
-
-![v4-theming-defaults](/img/guides/first-app-v4/theming-defaults.png)
-
-base、contrast、shade、tint プロパティを指定することによって、各カラーをさらにカスタマイズできます。これらにより、スタイルを柔軟にコントロールできます:
-
-![v4-theming-properties](/img/guides/first-app-v4/theming-properties.png)
-
-これらのカラーは `src/theme/variables.scss` 内に定義されていることがわかります。
-
-これらの変数をあちこちで変更することで、アプリケーション全体のテーマを簡単に更新することができます！いくつかの色を変更して、DevApp でアプリの更新を見てみましょう。例えば、Primary のデフォルトの青色を紫色に変更します:
-
-```css
-/** Ionic における CSS 変数 **/
-: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;
-}
-```
-
-アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の 16 進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。
-
-しかし待ってください、まだあります！Ionic は、アプリケーションが実行されているデバイスに基づいて、プラットフォーム固有のスタイルを自動的に提供し、ユーザーが慣れているネイティブなルック・アンド・フィールを与えます:
-
-![ios and android comparison](/img/guides/first-app-v3/ion-lab-comparison.png)
-
-私たちのアプリでは、これはヘッダーとアイコンがどのようにスタイルされているかで、はっきりと見えます。
-
-もし一貫性が必要な場合は、プラットフォームに関係なく同じモードを使用するように Ionic に指示できます。例えば、マテリアルデザイン(Android プラットフォームのスタイル)を適用するには、App Module クラスでグローバルに設定します。`src/app/app.module.ts` を開き、そして `mode` プロパティを設定します:
-
-```Javascript
-imports: [
-    BrowserModule,
-    IonicModule.forRoot({
-      mode: "md"
-    }),
-    IonicStorageModule.forRoot()
-  ],
-```
-
-これで、iOS 版のアプリにマテリアルデザインのスキンが追加されました！
-
-![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png)
-
-CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的な Ionic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。
-
-素晴らしいアプリ作りに旅立ちましょう！
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/posts.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/posts.md
deleted file mode 100644
index a8c5b3f861c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/posts.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
deleted file mode 100644
index 00587c68984..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/tools.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Tools
-
-### [Angular CLI](https://github.com/angular/angular-cli)
-
-Angular CLI の機能の詳細
-
-### [StackBlitz](https://stackblitz.com/)
-
-ブラウザで 0 から新しい Ionic アプリを始めましょう！
-
-### [TypeScript](https://www.typescriptlang.org/)
-
-TypeScript での作業を素晴らしいものにする機能を調べてください。
-
-### [Glossary](../reference/glossary.md)
-
-Ionic で開発中に利用される一般的な用語の一覧。
-
-### [Starter Apps](https://ionicthemes.com)
-
-Ionic Starter Apps to speed up and improve your app development.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
deleted file mode 100644
index a6c946e7532..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developer-resources/videos.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Videos
-
-### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be)
-
-Ionic2 の簡単な紹介と最初のアプリの作り方です。
-
-### [Ionic &amp; Async](https://blog.ionicframework.com/screencast-ionic-async/)
-
-複数のイベントをしかるべきタイミングで調整する方法を説明します。
-
-### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/)
-
-Ionic2 アプリを構築する方法を学びましょう。
-
-### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY)
-
-Ionic2 の裏にあるアイデアと目標を掘り下げてみましょう。
-
-### [Ionic &amp; Typings](https://blog.ionicframework.com/ionic-and-typings/)
-
-Ionic2 アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
deleted file mode 100644
index 42e0d65b7dc..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/android.md
+++ /dev/null
@@ -1,229 +0,0 @@
----
-title: Androidでの開発
-sidebar_label: Androidでの開発
----
-
-<head>
-  <title>Androidアプリ開発ガイド: 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>
-
-このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Android エミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。Android アプリは Windows、macOS、Linux 上で開発できます。
-
-## Android Studio
-
-[Android Studio](https://developer.android.com/studio/) はネイティブな Android アプリを作るための IDE です。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。
-
-Android エミュレータに必要な [Android 仮想デバイス](android.md#creating-an-android-virtual-device) の作成にも Android Studio が使用されます。Ionic アプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。
-
-:::note
-Android Studio を使って Ionic アプリを開発することはお勧めしません。実際には、ネイティブの Android プラットフォーム向けにアプリをビルドして実行したり、Android SDK や仮想デバイスを管理するためだけに使うべきです。
-:::
-
-### Android Studio のインストール
-
-<a href="https://developer.android.com/studio/" target="_blank">
-  Android website
-</a> からAndroid Studioをダウンロードします。より詳しいインストール手順は <a
-  href="https://developer.android.com/studio/install"
-  target="_blank"
->
-  User Guide
-</a> をご覧ください。
-
-### Android SDK のインストール
-
-Android Studio をインストールしたら起動します。IDE は、Android SDK のインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDK のインストールを完了して、**Android SDK のパス**のをメモしておいてください。
-
-![Android Studio SDK Setup](/img/installation/android-studio-sdk-setup.png)
-
-デフォルトでは、最新の安定版 SDK プラットフォームがインストールされ、そのバージョンの Android をターゲットにするために必要なパッケージもコレクションされています。
-
-システムイメージやその他のマイナー SDK プラットフォームパッケージをインストールするには、SDK Manager の下部にある **Show Package Details** がオンになっていることを確認する必要があります。
-![Android Studio SDK Manager](/img/installation/android-studio-sdk.png)
-
-今後の参考情報ですが、Android SDK は Android Studio の起動画面の **Configure** &raquo; **SDK Manager** メニュー、または Android プロジェクト内の **Tools** &raquo; **SDK Manager** で管理することができます。
-
-### コマンドラインツールの設定
-
-Android SDK には<a href="https://developer.android.com/studio/command-line/" target="_blank">便利なコマンドラインツール</a>が付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOS と Linux のものです。WIndows の場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。
-
-`~/.bashrc`もしくは`~/.bash_profile`、または同様のシェル起動スクリプトを、次のように変更します。s:
-
-1. `ANDROID_SDK_ROOT`環境変数を設定します。このパスは、前のセクションでメモした**Android SDK のパス**です。
-
-   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`.
-   :::
-
-### Android 仮想デバイスの作成
-
-Android 仮想デバイス（AVD）は、Android エミュレータが Android OS を実行するために利用する設計図です。以下のドキュメントは Android エミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、<a href="https://developer.android.com/studio/run/managing-avds" target="_blank">Android のドキュメント</a>を参照ください。
-
-AVD は AVD Manager で管理します。Android Studio の初期画面で、 **Configure** &raquo; **AVD Manager** をクリックします。AVD Manager は、Android プロジェクト内で、-**Tools** &raquo; **AVD Manager** メニューから開くこともできます。
-
-![AVD Setup](/img/installation/android-studio-avd-setup.png)
-
-**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play services を選択してください。Android のバージョンについては、Android のバージョン履歴を参照してください。
-
-AVD が作成されたら、Android エミュレータで AVD を起動します。エミュレータを実行し続けることは、Android 用の Ionic アプリケーションを開発しながら検出を確実にするための最良の方法です。
-
-<figure className="device">
-  <img alt="Android Emulator Booting" src="/docs/img/installation/android-emulator-booting.png" />
-</figure>
-
-### Android デバイスを設定する
-
-Android ハードウェアの実物は、Ionic アプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用に Android デバイスを設定する簡単な方法です。詳細な手順と情報については、<a href="https://developer.android.com/studio/run/device" target="_blank">the Android documentation</a>を参照してください。
-
-1. デバイスの USB デバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順については<a href="https://developer.android.com/studio/debug/dev-options" target="_blank">the Android documentation</a>をご確認ください。
-1. デバイスにコンピュータへの接続許可があることを確認してください。macOS の場合、追加の設定は不要です。Windows の場合は<a href="https://developer.android.com/studio/run/oem-usb" target="_blank">OEM USB drivers</a>をインストールしてください。
-
-USB ケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
-
-```shell
-adb devices
-```
-
-デバイスがリストされます。トラブルシューティングと詳細情報については、 <a href="https://developer.android.com/studio/command-line/adb" target="_blank">`adb` documentation</a> を参照してください。
-
-## Cordova Setup
-
-Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。
-
-### Java
-
-ネイティブの Android アプリは <a href="https://java.com/en/" target="_blank">Java</a> プログラミング言語でコンパイルされている。ダウンロードページから JDK 8 を<a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">download page</a>します。
-
-:::note
-残念ながら、Cordova は最新バージョンの Java と互換性がありません。
-:::
-
-### Gradle
-
-<a href="https://gradle.org/" target="_blank">
-  Gradle
-</a> はAndroidアプリで使用されるビルドツールで、別途インストールする必要があります。詳細については、 <a
-  href="https://gradle.org/install/"
-  target="_blank"
->
-  install page
-</a> を参照してください。
-
-## プロジェクトのセットアップ
-
-アプリを Android シミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
-
-1. **ネイティブプロジェクトが存在しない場合は、生成します。**
-
-   Capacitor では以下の実行をサポートしています:
-
-   ```shell
-   $ ionic capacitor add android
-   ```
-
-   Cordova では以下のように実行します。
-
-   ```shell
-   $ ionic cordova prepare android
-   ```
-
-2. **[Package ID](../reference/glossary.md#package-id) を設定します。**
-
-Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId` プロパティを修正します。
-
-Cordova の場合は、`config.xml`ファイルを開き、ルート要素である `<widget>` の `id` 属性を変更します。詳しくは、[Cordova のドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。
-
-## Capacitor での実行
-
-Capacitor は Android Studio を使って、シミュレータやデバイスへのアプリの構築と実行を行います。
-
-1. **Ionic アプリを開発してネイティブプロジェクトに同期します**
-
-重要な変更が行われるたびに、変更が Android シミュレータやデバイスに表示されるようにするには、Web アセットに Ionic アプリを組み込む必要があります。次に、Web アセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスは Ionic CLI コマンド 1 つで簡単になります。
-
-```shell
-$ ionic capacitor copy android
-```
-
-2. **Android Studio で Run ボタンをクリックして、シュミレーターかデバイスを選択ください。**
-
-![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png)
-
-### ライブリロード
-
-リロードサーバを起動するには、次のコマンドを実行します。
-
-```shell
-ionic capacitor run android -l --external
-```
-
-デバイス上で実行する場合は、デバイスと開発マシンが同じネットワークに接続されていることを確認してください。
-
-## Cordova で実行する
-
-Ionic CLI は、コマンドひとつで Ionic アプリをビルド、コピー、Android シミュレーターやデバイスにデプロイすることができます。また、`ionic serve`で使用されているような開発サーバーをスピンアップして、[live-reload](../reference/glossary.md#livereload) 機能を提供することが可能です。
-
-次のコマンドを実行すると、live-reload サーバを起動する CLI プロセスが長時間実行されます。
-
-```shell
-ionic cordova run android -l
-```
-
-これで、アプリのソースファイルに変更があった場合、Web アセットが再構築され、再度デプロイしなくてもシミュレータやデバイスに変更が反映されるようになりました。
-
-## Android アプリのデバッグ
-
-アプリが Android デバイスやエミュレータ上で動作するようになったら、 Chrome DevTools を使ってデバッグすることができます。
-
-### Chrome DevTools の利用
-
-Chrome は、Android シミュレータとデバイスのための Web 開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間に Chrome で `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。
-
-:::note
-アプリケーションがデバイスまたはシミュレータで実行されていることを確認してください。実行されていない場合は、リストに表示されません。
-:::
-
-![Android Chrome DevTools](/img/running/android-chrome-devtools.png)
-
-### Native Logs の表示
-
-Android Studio で実行している場合、ネイティブログは **Logcat** に表示されます。
-
-:::note
-**Logcat** ウインドウが非表示の場合は、 **View** &raquo; **Tool Windows** &raquo; **Logcat** から有効にします。
-:::
-
-![Android Studio Logcat](/img/running/android-studio-logcat.png)
-
-**Logcat** には [ADB](https://developer.android.com/studio/command-line/adb) を利用してアクセスすることもできます。
-
-```shell
-adb logcat
-```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
deleted file mode 100644
index 1bb117883fa..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: 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
-
-The available config keys can be found in the [`IonicConfig`](#ionicconfig) interface.
-
-The following example disables ripple effects and default the mode to Material Design:
-
-import GlobalExample from '@site/docs/developing/config/global/index.md';
-
-<GlobalExample />
-
-## 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.
-
-import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
-
-<PerComponentExample />
-
-## 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.
-
-import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
-
-<PerPlatformExample />
-
-### Fallbacks
-
-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:
-
-import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
-
-<PerPlatformFallbackExample />
-
-### Overrides
-
-This final example allows you to accumulate a config object based upon different platform requirements.
-
-import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
-
-<PerPlatformOverridesExample />
-
-## Reading the Config (Angular)
-
-Ionic Angular provides a `Config` provider for accessing the Ionic Config.
-
-### 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`                           |
-
-## 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.                                                                                                                                                                            |
-| `innerHTMLTemplatesEnabled` | `boolean`                                                                         | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. |
-| `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.                                                                                                                                                         |
-| `toastDuration`             | `number`                                                                          | Overrides the default `duration` for all `ion-toast` components.                                                                                                                                                                             |
-| `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".                                                                                                                                                   |
-| `toggleOnOffLabels`         | `boolean`                                                                         | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                                                                                                                                                    |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
deleted file mode 100644
index c2358647c26..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/global/index.md
+++ /dev/null
@@ -1,71 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs
-  groupId="global-config"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]}
->
-<TabItem value="javascript">
-
-```javascript title="example.js"
-window.Ionic = {
-  config: {
-    rippleEffect: false,
-    mode: 'md',
-  },
-};
-```
-
-</TabItem>
-<TabItem value="angular">
-
-```tsx title="app.module.ts"
-import { IonicModule } from '@ionic/angular';
-
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot({
-      rippleEffect: false,
-      mode: 'md'
-    })
-  ],
-  ...
-})
-```
-
-</TabItem>
-<TabItem value="react">
-
-The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
-
-```tsx title="App.tsx"
-import { setupIonicReact } from '@ionic/react';
-
-setupIonicReact({
-  rippleEffect: false,
-  mode: 'md',
-});
-```
-
-</TabItem>
-<TabItem value="vue">
-
-```tsx title="main.ts"
-import { IonicVue } from '@ionic/vue';
-import { createApp } from 'vue';
-
-createApp(App).use(IonicVue, {
-  rippleEffect: false,
-  mode: 'md',
-});
-```
-
-</TabItem>
-</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
deleted file mode 100644
index 0e4aadeee60..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-component/index.md
+++ /dev/null
@@ -1,147 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs
-  groupId="per-component-config"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]}
->
-<TabItem value="javascript">
-
-**Not recommended**
-
-```ts
-window.Ionic = {
-  config: {
-    // Not recommended when your app requires reactive values
-    backButtonText: 'Go Back',
-  },
-};
-```
-
-**Recommended**
-
-```html
-<ion-back-button></ion-back-button>
-
-<script>
-  const backButton = document.querySelector('ion-back-button');
-
-  /**
-   * The back button text can be updated
-   * anytime the locale changes.
-   */
-  backButton.text = 'Go Back';
-</script>
-```
-
-</TabItem>
-<TabItem value="angular">
-
-**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 {
-  /**
-   * The back button text can be updated
-   * anytime the locale changes.
-   */
-  backButtonText = 'Go Back';
-}
-```
-
-</TabItem>
-<TabItem value="react">
-
-**Not recommended**
-
-```tsx
-import { setupIonicReact } from '@ionic/react';
-
-setupIonicReact({
-  // Not recommended when your app requires reactive values
-  backButtonText: 'Go Back',
-});
-```
-
-**Recommended**
-
-```tsx
-import { useState } from 'react';
-import { IonBackButton } from '@ionic/react';
-
-const ExampleComponent = () => {
-  const [backButtonText, setBackButtonText] = useState('Go Back');
-  return (
-    {/*
-     * The back button text can be updated
-     * anytime the locale changes.
-     */}
-    <IonBackButton text={backButtonText}></IonBackButton>
-  )
-}
-```
-
-</TabItem>
-<TabItem value="vue">
-
-**Not recommended**
-
-```ts
-import { IonicVue } from '@ionic/vue';
-import { createApp } from 'vue';
-
-// Not recommended when your app requires reactive values
-createApp(App).use(IonicVue, {
-  backButtonText: 'Go Back',
-});
-```
-
-**Recommended**
-
-```html
-<template>
-  <ion-back-button [text]="backButtonText"></ion-back-button>
-</template>
-
-<script setup lang="ts">
-  import { IonBackButton } from '@ionic/vue';
-  import { ref } from 'vue';
-
-  /**
-   * The back button text can be updated
-   * anytime the locale changes.
-   */
-  const backButtonText = ref('Go Back');
-</script>
-```
-
-</TabItem>
-</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
deleted file mode 100644
index 6390a6120d1..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-fallback/index.md
+++ /dev/null
@@ -1,81 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs
-  groupId="per-platform-fallback-config"
-  defaultValue="angular"
-  values={[
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]}
->
-<TabItem value="angular">
-
-```ts title="app.module.ts"
-import { isPlatform, IonicModule } from '@ionic/angular';
-
-const getConfig = () => {
-  if (isPlatform('hybrid')) {
-    return {
-      tabButtonLayout: 'label-hide'
-    }
-  }
-
-  return {
-    tabButtonLayout: 'icon-top'
-  };
-}
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot(getConfig())
-  ],
-  ...
-});
-```
-
-</TabItem>
-<TabItem value="react">
-
-```tsx title="App.tsx"
-import { isPlatform, setupIonicReact } from '@ionic/react';
-
-const getConfig = () => {
-  if (isPlatform('hybrid')) {
-    return {
-      tabButtonLayout: 'label-hide',
-    };
-  }
-
-  return {
-    tabButtonLayout: 'icon-top',
-  };
-};
-
-setupIonicReact(getConfig());
-```
-
-</TabItem>
-<TabItem value="vue">
-
-```ts title="main.ts"
-import { IonicVue, isPlatform } from '@ionic/vue';
-
-const getConfig = () => {
-  if (isPlatform('hybrid')) {
-    return {
-      tabButtonLayout: 'label-hide',
-    };
-  }
-
-  return {
-    tabButtonLayout: 'icon-top',
-  };
-};
-
-createApp(App).use(IonicVue, getConfig());
-```
-
-</TabItem>
-</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
deleted file mode 100644
index a5b8cdc490a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform-overrides/index.md
+++ /dev/null
@@ -1,90 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs
-  groupId="per-platform-fallback-config"
-  defaultValue="angular"
-  values={[
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]}
->
-<TabItem value="angular">
-
-```ts title="app.module.ts"
-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())
-  ],
-  ...
-});
-```
-
-</TabItem>
-<TabItem value="react">
-
-```tsx title="App.tsx"
-import { isPlatform, setupIonicReact } from '@ionic/react';
-
-const getConfig = () => {
-  let config = {
-    animated: false,
-  };
-
-  if (isPlatform('iphone')) {
-    config = {
-      ...config,
-      backButtonText: 'Previous',
-    };
-  }
-
-  return config;
-};
-
-setupIonicReact(getConfig());
-```
-
-</TabItem>
-<TabItem value="vue">
-
-```ts title="main.ts"
-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());
-```
-
-</TabItem>
-</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
deleted file mode 100644
index d21553ad1cf..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/config/per-platform/index.md
+++ /dev/null
@@ -1,66 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs
-  groupId="per-platform-config"
-  defaultValue="angular"
-  values={[
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]}
->
-<TabItem value="angular">
-
-:::note
-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.
-
-See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect.
-:::
-
-```ts title="app.module.ts"
-import { isPlatform, IonicModule } from '@ionic/angular';
-
-@NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot({
-      animated: !isPlatform('mobileweb')
-    })
-  ],
-  ...
-})
-```
-
-</TabItem>
-<TabItem value="react">
-
-:::note
-See the [React Platform Documentation](../react/platform) for the types of platforms you can detect.
-:::
-
-```tsx title="App.tsx"
-import { isPlatform, setupIonicReact } from '@ionic/react';
-
-setupIonicReact({
-  animated: !isPlatform('mobileweb'),
-});
-```
-
-</TabItem>
-<TabItem value="vue">
-
-:::note
-See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect.
-:::
-
-```ts title="main.ts"
-import { IonicVue, isPlatform } from '@ionic/vue';
-
-createApp(App).use(IonicVue, {
-  animated: !isPlatform('mobileweb'),
-});
-```
-
-</TabItem>
-</Tabs>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
deleted file mode 100644
index d29a604d3f9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/hardware-back-button.md
+++ /dev/null
@@ -1,345 +0,0 @@
----
-title: ハードウェアの戻るボタン
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<head>
-  <title>Androidデバイスでのハードウェアの戻るボタン</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>
-
-ハードウェアの戻るボタンは、ほとんどの Android デバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。
-
-:::note
-ハードウェアの 「戻る」 ボタンとは Android デバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Android デバイスにのみ適用されます。
-:::
-
-## Capacitor と 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.
-
-`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに 1 つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に 1 つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。
-
-複数のハンドラを起動したい場合があります。各ハンドラのコールバックは、フレームワークに次のハンドラを呼び出すように指示するために使用できるパラメーターとして関数を渡します。
-
-## ブラウザにおける戻るボタン
-
-モバイルブラウザーや PWA でアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、Capacitor と Cordova が、通常の Web ブラウザでは公開されないデバイス API を利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。
-
-ハードウェアバックボタンを完全にサポートするには、Capacitor または Cordova の使用をお勧めします。
-
-:::note
-ブラウザや PWA で実行してる時、 `ionBackButton` イベントは実行されません。
-:::
-
-## 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>
-````
-
-この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を 10 に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が 10 未満のハンドラは呼び出されません。優先度が 10 より大きいハンドラが最初に呼び出されます。
-
-同じ優先順位値を持つハンドラが存在する場合は、最後に登録されたハンドラが呼び出されます。詳細は、 [Handlers with the Same Priorities](#handlers-with-the-same-priorities) を参照してください。
-
-## 複数ハンドラの呼び出し
-
-各ハードウェアバックボタンコールバックには、 `processNextHandler` パラメータがあります。この関数を呼び出すと、ハードウェアバックボタンハンドラの呼び出しを続行できます。
-
-````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>
-````
-
-この例は、次のハンドラを起動するように Ionic Framework に指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。
-
-## 同じ優先順位のハンドラ
-
-内部的には、Ionic Framework はハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handler が、最初に呼び出されるハンドラになります。
-
-```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();
-  });
-});
-```
-
-上の例では、ハンドラ A と B の両方の優先度は 10 です。ハンドラ B は最後に登録されているため、Ionic Framework はハンドラ A を呼び出す前にハンドラ B を呼び出します。
-
-## アプリの終了
-
-場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordova が提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。
-
-````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>
-````
-
-この例は、ユーザがハードウェアの戻るボタンを押したときにアプリケーションが終了し、ナビゲーションスタックに何も残っていないことを示しています。アプリを終了する前に確認ダイアログを表示することも可能です。
-
-アプリケーションを終了する前に、ユーザーがルート・ページにあるかどうかを確認することをお勧めします。開発者は、Ionic Angular の `IonRouterOutlet` で`canGoBack` 、 Ionic React および Ionic Vue の `IonRouter` で `canGoBack` メソッドを使用できます。
-
-## 内部フレームワークハンドラ
-
-次の表は、Ionic Framework が使用するすべての内部ハードウェアバックボタンイベントハンドラの一覧です。 `Propagates` 列は、その特定のハンドラが Ionic Framework に次の戻るボタンハンドラを呼び出すように指示するかどうかを示します。
-
-| Handler    | Priority | Propagates | Description                                                                                                                 |
-| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
-| Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
-| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                      |
-| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                       |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
deleted file mode 100644
index 78cf2f15ef1..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/ios.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: iOSでの開発
-sidebar_label: iOSでの開発
-skipIntros: true
----
-
-<head>
-  <title>iOSアプリ開発ガイド: 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>
-
-このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOS シミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。iOS アプリは、Xcode がインストールされている macOS 上でのみ開発できます。
-
-iOS 上で Ionic アプリを実行するためのワークフローは 2 つあります:
-
-- [Xcode で実行](#running-with-xcode)
-- [Ionic CLI での実行](#running-with-the-ionic-cli)
-
-Xcode アプローチの方が一般的に安定していますが、Ionic CLI を使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。
-
-## Xcode のセットアップ
-
-[Xcode](https://developer.apple.com/xcode/) はネイティブな iOS アプリを作るための IDE です。これには iOS SDK と Xcode コマンドラインツールが含まれている。Xcode は Apple アカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Store からインストールすることもできます。
-
-Xcode をインストールしたら、使用するコマンドラインツールが選択されていることを確認します:
-
-```shell
-xcode-select --install
-```
-
-### Development Team の設定
-
-すべての iOS アプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcode は自動コード署名によってこれを簡単にしてくれます。唯一の前提条件は Apple ID です。
-
-Xcode を開き、 **Xcode** &raquo; **Preferences** &raquo; **Accounts** に移動します。Apple ID が表示されない場合は、追加します。ログインすると、Personal Team が Apple ID のチームリストに表示されます。
-
-![Xcode Accounts](/img/installation/ios-xcode-accounts.png)
-
-### iOS Simulator の作成
-
-iOS シミュレータは、Mac 上の iOS デバイスをエミュレートする。次のドキュメントは、iOS シミュレータを簡単にセットアップする方法です。詳細については、 [Apple のドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。
-
-Xcode を開き、**Window** &raquo; **Devices and Simulators** に移動します。iPhone 11 シミュレータが存在しない場合は作成します。
-
-![iOS Simulators](/img/installation/ios-xcode-simulators-setup.png)
-
-## Cordova のセットアップ
-
-Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。
-
-### ios-sim & ios-deploy
-
-[`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中に iOS シミュレータと iOS デバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。
-
-```shell
-$ npm install -g ios-sim
-$ brew install ios-deploy
-```
-
-## プロジェクト設定
-
-アプリを iOS シミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。
-
-1. **ネイティブのプロジェクトが存在しない場合は、以下を実行します。**
-
-   Capacitor の場合は、以下を実行します。
-
-   ```shell
-   $ ionic capacitor add ios
-   ```
-
-   Cordova の場合は、以下を実行します。
-
-   ```shell
-   $ ionic cordova prepare ios
-   ```
-
-   1. **[Package ID](/reference/glossary.md#package-id)を設定**
-
-      Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。
-
-      Cordova の場合は、`config.xml`ファイルを開き、`id`を変更し`<widget>`でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。
-
-   1. **<b>Xcode</b>でプロジェクトを開きます**
-
-      Capacitor の場合は、次のコマンドを実行して Xcode でアプリを開きます。
-
-   ```shell
-   $ ionic capacitor open ios
-   ```
-
-   Cordova の場合は、Xcode を起動したあと、**File** &raquo; **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。
-
-1. **<b>Project のナビゲーション</b>から、プロジェクトの root にある project editor を開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。**
-
-   ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
-
-1. **同じ project editor の<b>Signing</b>で、セクションで、<b>Automatically manage signing</b>が有効になっていることを確認します。** 次に、Development Team を選択してください。Development Team を選択すると、Xcode は自動的にプロビジョニングと署名を準備しようとします。
-
-   ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
-
-## Xcode で実行する
-
-このワークフローでは、Xcode は一般的なコンパイルと署名の問題を自動的に修正できます。
-
-1. **Ionic アプリを開発し、それをネイティブプロジェクトと同期させます。**
-
-   変更が検知がある度に、iOS シミュレータやデバイスが変更を検知するより前に、Ionic アプリを Web アセットにビルドする必要があります。その後、Web アセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスは Ionic CLI コマンドひとつで簡単にできます。
-
-   Capacitor の場合は、以下を実行します。
-
-   ```shell
-   $ ionic capacitor copy ios
-   $ ionic capacitor update
-   ```
-
-   Cordova の場合は、以下を実行します。
-
-   ```shell
-   $ ionic cordova prepare ios
-   ```
-
-1. **Xcode で、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。**
-
-   ![Xcode Play Button Area](/img/running/ios-xcode-play-button-area.png)
-
-## Ionic CLI を使用して実行する
-
-Ionic CLI は、コマンドひとつで、Ionic アプリを作成、コピーし、iOS シミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。
-
-ライブリロードを使うと、アプリのソースファイルに加えられた変更がウェブアセットの再構築を引き起こし、その変更は再デプロイすることなくシミュレータやデバイスに反映されます。
-
-:::caution
-iOS デバイスでは、デバイスとコンピュータが同じ Wi-Fi ネットワーク上にある必要があります。デバイスが接続できるように、dev サーバーの外部 URL も必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。
-:::
-
-### Capacitor を使ったライブリロード
-
-Capacitor には Xcode を利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLI で、ライブリロードサーバを起動し、Capacitor を設定して 1 つのコマンドで使用できます。
-
-以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcode の再生ボタンをクリックします:
-
-```shell
-ionic capacitor run ios -l --external
-```
-
-### Cordova を使ったライブリロード
-
-Cordova はネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。
-
-ライブリロードサーバを起動し、アプリをビルドしてデプロイするには、以下を実行します:
-
-```shell
-ionic cordova run ios -l --external
-```
-
-## iOS アプリのデバッグ
-
-アプリが iOS デバイスやシミュレーター上で動くようになったら、Safari でデバッグできます。
-
-### Safari Web Inspector を使う
-
-Safari は iOS シミュレータとデバイスの Web Inspector をサポートしています。Develop メニューを開いてシミュレータまたはデバイスを選択し、Ionic App を選択して Web Inspector を開きます。
-
-:::note
-\*Develop** メニューが非表示になってる場合は、**Safari** &raquo; **Preferences** &raquo; **Advanced** &raquo; **Show Develop menu in menu bar\*\* から有効にします。
-
-アプリがリストにない場合は、 **Settings** &raquo; **Safari** &raquo; **Advanced** &raquo; **Web Inspector** からデバイスの Web Inspector を有効にする必要があります。
-:::
-
-![Safari Web Inspector](/img/running/ios-safari-web-inspector-timelines.png)
-
-## ネイティブログの表示
-
-Xcode で実行している場合、ネイティブログは Xcode の **Console** にあります。
-
-:::note
-**Console** が表示されない場合, **View** &raquo; **Debug Area** &raquo; **Activate Console**を有効化してください。
-:::
-
-![Xcode Console](/img/running/ios-xcode-console.png)
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
deleted file mode 100644
index 1125091b1da..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/keyboard.md
+++ /dev/null
@@ -1,273 +0,0 @@
----
-title: Keyboard
----
-
-import Codepen from '@components/global/Codepen';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<head>
-  <title>キーボードガイド: 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>
-
-開発者がモバイルアプリや PWA を開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。
-
-## inputmode
-
-開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他の email 入力の最適化も行われます。
-
-`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。
-
-特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、email の入力では、 `inputmode.` を指定するのではなく、`type="email"`
-を使用する必要があります。これは、入力されるデータが常に email の形式になるためです。一方、input が email またはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。
-
-使用可能な値のリストについては、<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
-`inputmode` 属性は Chrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
-:::
-
-## enterkeyhint
-
-`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者は input が `enterkeyhint="search"` であることを確認する必要があります。
-
-`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。
-
-使用可能な値のリストについては、 <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
-`enterkeyhint` 属性は Chrome 77+ and iOS Safari 13.4+ のデバイスでサポートされています
-:::
-
-## ダークモード
-
-デフォルトでは、キーボードテーマは OS によって決定されます。たとえば、iOS でダークモードが有効になっている場合、アプリケーションの CSS にダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。
-
-モバイル Web ブラウザや PWA でアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。
-
-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>.
-
-## アクセサリバーを非表示にする
-
-ウェブベースのアプリケーションを実行すると、iOS はキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。
-
-モバイル Web ブラウザや PWA でアプリを実行する場合、アクセサリバーを非表示にする方法はありません。
-
-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>.
-
-## キーボードのライフサイクルイベント
-
-スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。Capacitor と Cordova アプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントを Listen します。モバイルブラウザや PWA で動作するアプリでは、サポートされていれば Visual Viewport API を使用することができる。Ionic Framework はこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。
-
-### 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
-モバイル Web ブラウザや PWA で動作するアプリでは、 Keyboard Lifecycle Events は Chrome 62 以降と iOS Safari 13.0 以降でのみサポートされています。
-:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
deleted file mode 100644
index 205f6873632..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/previewing.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: プレビュー
----
-
-<head>
-  <title>プレビュー: WebブラウザでのIonicアプリローカル実行</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>
-
-ネイティブ機能のテストには、ターゲットとするプラットフォームやニーズに応じて、さまざまなオプションがあります。
-
-- Web ブラウザでローカルに実行する (ネイティブ機能については [Platform Detection](../core-concepts/cross-platform.md) を使用します)
-- [iOS へのデプロイ](ios.md)
-- [Android へのデプロイ](android.md)
-
-## ウェブブラウザでローカルに実行する
-
-Ionic の最も強力な機能の 1 つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefox の開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。
-
-これを行うには、プロジェクトのディレクトリで、コマンドラインから `ionic serve` を実行します。
-
-```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!
-```
-
-`ionic serve` を起動したまま、アプリの開発を続けます。変更を保存すると、その変更が適用された状態でアプリがリロードされます。
-
-ネイティブ機能を実装する場合は、[Platform Detection](../core-concepts/cross-platform.md) を使用します。
-実機でテストする場合は、[iOS](ios.md) と [Android](android.md) はこちらを参照してください。
-
-## モバイルビューポートのシミュレーション
-
-各主要ブラウザベンダーは、モバイルエミュレーションのための開発者向けツールを提供しています。これらのツールは、エミュレートするデバイスの種類を変更する機能を備えています。
-
-### Chrome
-
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では`Ctrl+Shift+I`、Mac では`Cmd+Opt+I`を押して、Chrome 開発者ツールを開きます。
-
-<img src="/docs/img/developing/previewing/chrome-dev-tools.png" alt="Chrome Dev Tools" />
-
-ここから、ドロップダウンから異なるデバイスタイプを選択し、デバイスの方向を変更し、ネットワーク速度をスロットルすることができます。
-
-その他の機能および情報については、https://developer.chrome.com/docs/devtools/device-mode/ を参照してください。
-
-### Safari
-
-:::note
-
-前提条件：Safari の詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。
-
-:::
-
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safari の**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。
-
-<img src="/docs/img/developing/previewing/safari-responsive-design-mode.png" alt="Safari Responsive Design Mode" />
-
-ここから、エミュレートするデバイスの種類を選択したり、デバイスの向きを変更したりすることができます。
-
-その他の機能および情報については、https://developer.apple.com/safari/tools/ を参照してください。
-
-### Firefox
-
-アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では Ctrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefox の開発者ツールを開きます。
-
-<img src="/docs/img/developing/previewing/firefox-responsive-design-mode.png" alt="Firefox Responsive Design Mode" />
-
-ここから、ドロップダウンから異なるデバイスタイプを選択し、デバイスの方向を変更し、ネットワーク速度をスロットルすることができます。
-
-その他の機能および情報については、https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/ を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
deleted file mode 100644
index 4b653c2eebf..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/scaffolding.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: 基本
----
-
-<head>
-  <title>アプリ開発の基本 | 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>
-
-Ionic CLI でアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。
-
-## プロジェクト構成
-
-```bash
-src/
-├── app/
-├── assets/
-├── environments/
-├── theme/
-├── global.scss
-├── index.html
-├── main.ts
-├── polyfills.ts
-├── test.ts
-└── zone-flags.ts
-```
-
-`src/` ディレクトリには、 `index.html` ファイル、テスト用の設定ファイル、画像を格納する assets フォルダ、アプリのコードを格納する main `app/` ディレクトリなどの項目があります。
-
-```bash
-src/
-└── app/
-    ├── app-routing.module.ts
-    ├── app.component.html
-    ├── app.component.spec.ts
-    ├── app.component.ts
-    └── app.module.ts
-```
-
-`src/app/` ディレクトリには、ルートアプリのコンポーネントとモジュール、およびページ、コンポーネント、サービスなどのアプリの機能を含む追加のディレクトリが含まれます。
-
-## 新しい機能を生成する
-
-:::note
-This command is only supported in Ionic Angular.
-:::
-
-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
-```
-
-選択後、Ionic CLI は名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。
-
-:::note
-`portfolio/intro` のような任意のレベルのネストが可能です。例えば、`ionic g component "portfolio/intro/About Me"`とすることで、コンポーネントを簡単にページにスコープすることができます。
-:::
-
-```shell-session
-$ ionic generate
-? What would you like to generate? page
-? Name/path of page: portfolio █
-```
-
-また、生成される機能の `type` と `name` はコマンドラインで入力することもできます。
-
-```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!
-```
-
-Ionic CLI は、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLI がフードの下で使用されます。
-
-新しいページ用のファイルとディレクトリを作成した後、CLI は新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。
-
-詳細については、コマンドラインから `ionic g --help` を実行するか、`ionic generate` の [the documentation](../cli/commands/generate.md) を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
deleted file mode 100644
index 0897de64e2e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/starting.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: アプリをはじめよう
-sidebar_label: はじめ方
----
-
-<head>
-  <title>アプリをはじめよう: スタートガイド | 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>
-
-新しい Ionic アプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとは CLI が処理してくれる。
-
-```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: █
-```
-
-Ionic CLI では、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。
-
-```shell-session
-$ ionic start myApp tabs
-```
-
-ここでは、 `myApp` がプロジェクト名、 `tabs` がスターターテンプレート、そしてプロジェクトの種類は `angular` です。
-
-利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3 つのテンプレートが利用可能です。
-
-- `tabs`: タブベースのレイアウト
-- `sidemenu`: サイドメニューレイアウト
-- `blank`: 単一ページで構成された空のプロジェクト
-
-以下のコマンドで利用可能なすべてのテンプレートを見ることができます。
-
-```shell-session
-$ ionic start --list
-```
-
-これらのテンプレートは、どんなアプリにも素晴らしい出発点を提供し、コードベースを拡張するためのすべてのベストプラクティスを含んでいます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
deleted file mode 100644
index d87fe56bc67..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/developing/tips.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: 開発者向けのヒント
----
-
-<head>
-  <title>アプリ開発チップ: 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>
-
-## Permission Errors の解決
-
-パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するように npm を設定する必要があります。
-
-:::note
-`sudo` と npm の併用は、さらなる問題を引き起こす可能性があるため、推奨されません。
-:::
-
-このガイドには、パーミッションの問題を解決するための 2 つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。
-
-### Option 1
-
-権限の問題を回避する最善の方法は、 node version manager を使用して NodeJS と npm を再インストールすることです。
-
-このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、 [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) を参照してください。Windows の追加オプションと手順については、npm のドキュメントを参照してください。
-
-1. nvm のインストール
-
-   ```shell
-   $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
-   ```
-
-1. 新しい端末は nvm を使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。
-
-   ```shell
-   $ command -v nvm
-   ```
-
-1. NodeJS の最新の LTS リリースをダウンロードしてインストールするには、次のコマンドを実行します:
-
-   ```shell
-   $ nvm install --lts
-   ```
-
-1. 新しくインストールした NodeJS をデフォルト環境として設定します:
-
-   ```shell
-   $ nvm alias default lts/*
-   ```
-
-1. 新しい端末は nvm コントロールの NodeJS を使うようになりました:
-
-   ```shell
-   $ node -v  # will print the version installed above
-   $ which npm  # will print a path somewhere within the ~/.nvm folder
-   ```
-
-グローバルパッケージが `~/.nvm` にインストールされます。 `sudo` なしで `npm` を使用している限り、パーミッションエラーは発生しません。
-
-### Option 2
-
-<small>
-  <em>Windowsでは利用できません</em>
-</small>
-
-npm のディレクトリの所有者を現在のユーザに変更します:
-
-```shell
-$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
-$ sudo chown -R $(whoami) ~/.npm ~/.npmrc
-```
-
-これらのグローバルディレクトリは `root` が所有しなくなったため、 `sudo` を使用せずにパッケージをグローバルにインストールできます。
-
-## 依存モジュールの更新
-
-[npm](https://www.npmjs.com/) dependency をアップデートするためには、`<package-name>` をアップデートしたいパッケージ名に変更して以下を実行します:
-
-```shell
-npm install <package-name>@<version|latest> --save
-```
-
-例えば、`@ionic/angular` パッケージを `最新` リリースのものに更新するには、以下を実行してください:
-
-```shell
-npm install @ionic/angular@latest --save
-```
-
-npm は最初に `package.lock.json` からパッケージのバージョンを読み込みにいきますので、パッケージを更新する際は CLI を利用することをおすすめします。
-
-## エディタ
-
-選択できるコードエディターはたくさんあります。ここに私たちのお気に入りのいくつかがあります：
-
-- [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
-
-## デバッガの利用
-
-`デバッガ` というキーワードはアプリケーションをデバッグするために利用されます。ほとんどのブラウザが`デバッガ`ステートメントに直面する時、 実行中の JavaScript の処理は停止され、ブラウザはデバッガをロードします。これはアプリケーションに"ブレークポイント"をセットするために使用されます。
-
-例えば、ある関数が正しい値を返さない時は、デバッガを使用してコードをステップ実行し、変数を調べることができます。
-
-```javascript
-function myBrokenFunction() {
-  debugger;
-  // do other stuff
-}
-```
-
-アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScript を 1 行ずつ実行し、関数が正確にどこで中断するかを調べることができます。
-
-## モードの変更
-
-デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動している URL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URL はこうなります: `http://localhost:8100/?ionic:mode=ios`
-
-:::note
-しかし、どのプラットフォームが現在使用されているかをブラウザがどのように認識するか、ということは変わらないでしょう。プラットフォームはデバイスの検出とユーザーエージェントの検査によって決定されます。そのため、プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。これを行うには、Chrome DevTools を開き、<kbd>Ctrl+Shift+i</kbd>(Mac では <kbd>Cmd+Option+I</kbd>) でデバイスのモードをオンに切り替えでください。デバイスモードの切り替えは、<kbd>Ctrl+Shift+M</kbd>(<kbd>Cmd+Option+M</kbd> on Mac)で行います。
-:::
-
-![別のモードのアプリケーション](/img/faq/tips/change-device-platform.png)
-
-デバイスのドロップダウンからデバイスを選択すると viewport の大きさと同様に、ユーザーエージェントも変更されます。
-
-## iOS シミュレータを使用する
-
-iOS シミュレータは実際のデバイスに届く前にアプリケーションのテストとデバッグを可能にします。
-
-シミュレータを利用可能にする前に、[Xcode](https://developer.apple.com/xcode/download/)、アップルの IDE をインストールする必要があります。
-
-[Ionic CLI](../cli.md) を用いて、シミュレータ上の現在のディレクトリでアプリケーションを実行可能にします:
-
-```shell
-ionic cordova emulate ios -lc
-```
-
-`-lc` フラグを渡すことでライブリロードを有効にし、かつログコンソールををターミナルに出力することができます。
-
-また Xcode を利用することでエミュレータを起動し、アプリケーションをデバッグすることもできます。
-
-Xcode を開き、`../path-to-app/platforms/ios/myApp.xcodeproj` を開きます。
-
-アプリケーションが読み込まれると、コンソール出力とデバイスのログが Xcode の出力ウィンドウに表示されます。
-
-## Genymotion Android エミュレーターを使用する
-
-Android SDK には標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。
-
-[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPS やカメラなどのネイティブ機能へのアクセスを許可します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
deleted file mode 100644
index 10083ff549a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/index.md
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: Ionicの紹介
-sidebar_label: 概要
-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>モバイルとディスクトップアプリをつくるためのオープンソースのUIキット</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 Framework はオープンソースの UI ツールキットで、HTML、CSS、JavaScript などのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
-
-[Ionic のインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。
-
-<intro-end />
-
-<DocsCards>
-  <DocsCard header="Installation Guide" href="/intro/cli" icon="/icons/guide-installation-icon.svg" hoverIcon="/icons/guide-installation-icon-hover.svg">
-    <p>あなたのシステムの設定方法とフレームワークのインストールガイド。</p>
-  </DocsCard>
-
-<DocsCard
-  header="UI Components"
-  href="/components"
-  icon="/icons/guide-components-icon.svg"
-  hoverIcon="/icons/guide-components-icon-hover.svg"
->
-  <p>Ionic Frameworkの美しくデザインされたUIコンポーネントにダイブしましょう。</p>
-</DocsCard>
-
-<DocsCard
-  header="Native Functionality"
-  href="/native"
-  icon="/icons/guide-native-icon.svg"
-  hoverIcon="/icons/guide-native-icon-hover.svg"
->
-  <p>BluetoothやMap、HealthKitのようなNativeデバイスプラグインの統合方法。</p>
-</DocsCard>
-
-  <DocsCard header="Theming" href="/theming/basics" icon="/icons/guide-theming-icon.svg" hoverIcon="/icons/guide-theming-icon-hover.svg">
-    <p>Ionicアプリのビジュアルデザインをブランドに合わせて簡単にカスタマイズおよび変更する方法を学びましょう。</p>
-  </DocsCard>
-</DocsCards>
-
-## 概要
-
-Ionic は、アプリのフロントエンドの UX と UI インタラクション（UI コントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionic についてもっと知りたい方向けに、<a href="https://youtu.be/p3AN3igqiRc" target="_blank">私たちはビデオを作成しました</a>。ここから、基本的な使い方を学ぶことができます。
-
-### どこでもひとつのコードで
-
-Ionic は、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionic アプリはすべてのデバイス上で適切な外観と操作感を提供します。
-
-### パフォーマンスにフォーカス
-
-Ionic は、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。
-
-### クリーンでシンプル、機能的なデザイン
-
-Ionic は、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。
-
-### ネイティブおよび Web に最適化
-
-Ionic はネイティブアプリケーションの UI ガイドラインをエミュレートし、ネイティブ SDK を使用して、ネイティブアプリの UI 標準とデバイス機能を、オープン Web の完全なパワーと柔軟性とともに実現します。Ionic は Capacitor(または Cordova)を使ってネイティブにデプロイするか、Progressive Web App としてブラウザで実行します。
-
-## ゴール
-
-### クロスプラットフォーム
-
-ネイティブの iOS、Android、デスクトップ、Web など、複数のプラットフォームで動作するアプリを Progressive Web App として、すべて 1 つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。
-
-### Web 標準
-
-Ionic Framework は、Custom Elements や Shadow DOM などの最新の Web API を使用して、信頼性の高い [Web 標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、および JavaScript の上に構築されています。このため、Ionic コンポーネントは安定した API を備えており、単一のプラットフォーム・ベンダーの思い付きではありません。
-
-### 美しいデザイン
-
-クリーンでシンプル、機能的。Ionic Framework は全てのプラットフォームで動作し、美しく表示されるように設計されています。
-あらかじめデザインされたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、すばらしい(まだ拡張可能な)基本テーマから始めます。
-
-### シンプル
-
-Ionic Framework はシンプルさを念頭に置いて構築されているので、Ionic アプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。
-
-## Framework の互換性
-
-Ionic の過去のリリースは Angular と密結合されていましたが、フレームワークのバージョン 4.x からはスタンドアロンの<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Component</a>ライブラリとして動作するように再設計され、Angular のような最新の JavaScript フレームワークと併用できるようになりました。Ionic は React や Vue を含むほとんどのフロントエンドフレームワークで使用できますが、Web コンポーネントを完全にサポートするには shim が必要なフレームワークもあります。
-
-### JavaScript
-
-Ionic Framework を <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">Web Components</a> に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、script タグだけで Web ページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、Ionic を WordPress のようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。
-
-### Angular
-
-Angular は常に Ionic の素晴らしさの中心にありました。コアコンポーネントはスタンドアロンの Web Component ライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージは Angular エコシステムとの統合を簡単にします。 `@ionic/angular` は Ionic 2/3 に期待されるすべての機能を含んでおり、Angular ルータのようなコア Angular ライブラリと統合されています。
-
-### React
-
-Ionic は現在、人気の React ライブラリを公式にサポートしています。Ionic React を使うと、React 開発者は既存の Web スキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコア Ionic コンポーネントを、ネイティブな React コンポーネントを使っているような感覚で使用することができます。
-
-### Vue
-
-Ionic は現在、人気の Vue3 ライブラリを公式にサポートしています。 Ionic Vue を使用すると、Vue 開発者は既存の Web スキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコア Ionic コンポーネントを使用できますが、ネイティブの Vue コンポーネントを使用しているように感じられます。
-
-### Future Support
-
-他のフレームワークのサポートは、将来のリリースで検討される予定です。
-
-## Ionic CLI
-
-公式の [Ionic CLI](cli.md) は、Ionic アプリを迅速に構築し、Ionic 開発者に多くの役に立つコマンドを提供するツールです。CLI には、Ionic のインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLI を使用してクラウドの構築と展開を実行し、アカウントを管理できます。
-
-## Appflow
-
-Ionic アプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは <strong> オープンソースフレームワーク</strong> とは分離した <a href="https://ionic.io/appflow" target="_blank">Appflow</a> と呼んでいる製品アプリ用の商用サービスを提供しています。
-
-Appflow は、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードから Ionic アプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。
-
-Appflow には <a href="https://dashboard.ionicframework.com/signup" target="_blank">Ionic Account</a> が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。
-
-## エコシステム
-
-Ionic Framework はコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業が Ionic を使って、どこでも動くすばらしいアプリを作ってリリースしています。
-
-### コミュニティに参加する
-
-Ionic の開発者は世界 200 か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:
-
-- <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.
-
-## ライセンス
-
-Ionic Framework は無料のオープンソースプロジェクトで、 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a> ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MIT ライセンスは、jQuery や Ruby on Rails などの人気プロジェクトで使用されているのと同じライセンスです。
-
-このドキュメントコンテンツ(<a href="https://github.com/ionic-team/ionic-docs" target="_blank">ionic-docs</a>リポジトリにあります)は、Apache 2 ライセンスでライセンスされています。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
deleted file mode 100644
index 30ea8431b54..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cdn.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: Ionicパッケージ
-sidebar_label: パッケージ & 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 は、テスト環境、Angular、その他のフレームワーク、または Vanilla JS といったすべての状況で、Ionic Framework を使い始めるために使用できるさまざまなパッケージを提供しています。
-
-## Ionic Framework CDN
-
-Ionic フレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDN から組み込むことができます。。
-
-CDN からフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTML ファイルの `<head>` 要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。
-
-```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" />
-```
-
-これにより、フレームワークをインストールしなくても、すべての Ionic Framework のコアコンポーネントを使用することができます。CSS バンドルには、すべての Ionic [Global Stylesheets](../layout/global-stylesheets) が含まれます。
-
-:::note
-これは Angular や他のフレームワークをインストールしません。これにより、フレームワークなしで Ionic Framework のコアコンポーネントを使用できます。
-:::
-
-## Ionic + Angular
-
-Angular プロジェクトで Ionic Framework を使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべての Ionic Framework コンポーネントと、Angular のサービスおよび機能を使うことができます。
-
-```shell
-npm install @ionic/angular@latest --save
-```
-
-新しい Ionic Framework のリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npm を使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。
-
-Ionic を既存の Angular プロジェクトに追加するには、Angular CLI の `ng add` 機能を使用します。
-
-```shell
-ng add @ionic/angular
-```
-
-これにより、`@ionic/angular` に必要なパッケージと、必要なスタイルが追加されます。
-
-## Ionic + React
-
-Ionic を既存の React プロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。
-
-```shell
-$ npm install @ionic/react
-$ npm install @ionic/react-router
-```
-
-### CSS
-
-必要な CSS を React プロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。
-
-```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
-
-既存の Vue プロジェクトに Ionic Framework を追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。
-
-```shell
-npm install @ionic/vue @ionic/vue-router
-```
-
-その後、Vue アプリに`IonicVue`プラグインをインストールする必要があります。
-
-**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');
-});
-```
-
-`router.isReady()`が解決したら、必ずアプリをマウントしてください。
-
-### ルーティング
-
-Vue アプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/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
-
-Vue プロジェクトで必要な CSS を import するには、`main.js` ファイルに以下を追加します。
-
-```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';
-```
-
-ここからは、Ionic Framework での開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。
-
-## Ionicons CDN
-
-Ionicons はデフォルトで Ionic Framework に同梱されているので、Ionic を使用している場合はインストールは不要です。Ionic Framework を使用せずに Ionicons を使用するためには、ページの終わりの近くにある `</body>` の閉じタグの直前に以下の `<script>` タグを配置します。
-
-```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
-アイコンの使い方については [Ionicons usage](https://ionic.io/ionicons/usage) をご覧ください。
-:::
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
deleted file mode 100644
index 3ee3bd82f49..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/cli.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Ionicのインストール
-sidebar_label: CLIインストール
----
-
-import AppWizard from '@components/page/intro/AppWizard';
-
-<head>
-  <title>Ionic Framework CLIのインストール方法</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 アプリは、主に Ionic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLI は、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic team が推奨しているインストール方法です。Ionic CLI は、アプリの実行や、Appflow といった他のサービスに接続などができる重要なツールです。
-
-<AppWizard />
-
-## Ionic CLI をインストール
-
-続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)で Ionic をセットアップできる環境を説明しています。
-
-npm を使って Ionic CLI をインストールします:
-
-```shell
-npm install -g @ionic/cli
-```
-
-Ionic CLI が以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。
-
-```shell
-$ npm uninstall -g ionic
-$ npm install -g @ionic/cli
-
-```
-
-:::note
-`-g` オプションは、 _グローバルにインストール_ することを意味しています。パッケージをグローバルにインストールすると `EACCES` パーミッションエラーが起きる可能性があります。
-管理権限なしで npm がグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。
-:::
-
-## アプリケーションの起動
-
-Ionic アプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な 3 つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。
-
-```shell
-ionic start
-```
-
-![start app thumbnails](/img/installation/start-app-thumbnails.png)
-
-Ionic アプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。
-
-## アプリケーションを実行する
-
-ほとんどの Ionic アプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。
-
-```shell
-$ cd myApp
-$ ionic serve
-```
-
-アプリを実行する方法は他にもたくさんありますが、まずはこのワークフローから始めることをおすすめします。デバイスやエミュレーターでアプリを開発・テストするには、[アプリの実行ガイド](../developing/previewing.md) を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
deleted file mode 100644
index 101674bd522..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/environment.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: 環境設定
----
-
-<head>
-  <title>環境設定 | IonicアプリをはじめるためのNode と NPM 環境</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>
-
-Ionic Framework をはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。
-
-もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Code は
-Microsoft 製の無料でとてもパワフルなテキストエディタです。
-
-## ターミナル
-
-:::note
-Ionic 開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。
-:::
-
-一般的に、OS に最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末は Ionic で正常に動作しますが、サポートされていない場合があります。
-
-- Windows では、 **コマンドプロンプト** と **PowerShell** がサポートされています。<a href="https://docs.microsoft.com/en-us/windows/wsl/faq" target="_blank">WSL</a>は Ionic で動作することがわかっていますが、サポートされていない可能性があります。
-- macOS では、組み込みの **ターミナル** アプリがサポートされています。
-
-Git Bash（<a href="https://git-scm.com" target="_blank">git-scm.com</a>）は TTY 対話機能をサポートしておらず、Ionic はサポートしていません。
-
-## Node と npm
-
-モダンな JavaScript プロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するために LTS バージョンを選択することをお勧めします。
-
-Node には JavaScript パッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。
-
-インストールできているかを確認するためには、新しいターミナルウィンドウを開いて以下を実行します。
-
-```shell
-$ node --version
-$ npm --version
-```
-
-:::note
-`npm` のグローバルパッケージをインストールする時、パーミッションエラーが起きがちです。 もし `EACCES` エラーがでたら、 [Resolving Permission Errors](/docs/developing/tips#resolving-permission-errors) を確認ください。
-:::
-
-## Git
-
-必須ではありませんが、バージョン管理システムの[Git](../reference/glossary.md#git)の利用を強くお勧めします。
-
-Git は [GitHub](https://github.com/) のような Git ホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらの 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)
-
-それ以外の場合は、 [公式のインストール手順](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) をご確認ください。コマンドラインユーティリティは、[download page](https://git-scm.com/downloads) からダウンロードできます。.
-
-インストールできているかを確認するためには、新しいターミナルウィンドウを開いて以下を実行します。
-
-```shell
-git --version
-```
-
-### Git GUI
-
-Git はコマンドラインユーティリティですが、利用可能な [GUI クライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHub とうまく連携します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
deleted file mode 100644
index f39f660cd26..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/first-app.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-hide_table_of_contents: true
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsCards from '@components/global/DocsCards';
-
-# はじめてアプリ制作チュートリアル
-
-Ionic アプリの構築に使用する予定の JavaScript フレームワークを選びます。
-
-<DocsCards>
-  <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
-    <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
-
-{' '}
-<DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
-  <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-</DocsCard>
-
-  <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
-    <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
-</DocsCards>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
deleted file mode 100644
index 9c5a6b873bb..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/next.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: 次のステップ
----
-
-<head>
-  <title>アプリをはじめるための次のステップ: 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';
-
-## 最初のアプリを作る
-
-Ionic アプリを構築する際に使用する予定の JavaScript フレームワークを選択します。
-
-<DocsCards>
-  <DocsCard header="Angularではじめる" href="../angular/your-first-app" icon="/icons/logo-angular-icon.png">
-    <p>AngularでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
-
-{' '}
-<DocsCard header="Reactではじめる" href="../react/your-first-app" icon="/icons/logo-react-icon.png">
-  <p>ReactでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-</DocsCard>
-
-  <DocsCard class="disabled" header="Vueではじめる" href="" icon="/icons/logo-vue-icon.png">
-    <p>VueでIonicアプリを作るための基本を押さえた完全ガイドです</p>
-  </DocsCard>
-</DocsCards>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
deleted file mode 100644
index e3824a71af0..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/intro/vscode-extension.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Ionic VS Code Extension
----
-
-<head>
-  <title>Ionic Visual Studio Codeエクステンションを使う</title>
-  <meta
-    name="description"
-    content="Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさまざまな機能の実行を支援します。"
-  />
-</head>
-
-Ionic Visual Studio Code 拡張は、Ionic アプリの開発に共通するさまざまな機能を、VS Code のウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace 上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーに Ionic のロゴが表示されるようになります。
-
-## 新規プロジェクトの作成
-
-空のディレクトリから、テンプレートオプションの 1 つをクリックし、アプリ名を指定することで、新しい Angular、React、または Vue プロジェクトを作成することができます。
-
-<img
-  src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif"
-  alt="Video of creating a project"
-/>
-
-新しいプロジェクトを作成すると、拡張機能は `package.json` にあるすべての共通タスクにアクセスできるようになります。
-
-## Capacitor の追加
-
-[Capacitor](https://capacitorjs.com/) をアプリケーションに追加するには、"Integrate Capacitor "を選択します。
-
-<img
-  src="https://user-images.githubusercontent.com/84595830/159510570-b5a151bb-2e17-42c8-8cab-bffbaa849576.gif"
-  alt="Capacitor追加のビデオ"
-/>
-
-Capacitor が統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS 上でアプリを実行することができるようになりました。
-
-## Doing More
-
-Ionic VS Code 拡張は、マイグレーション、デバッグ、モノレポのサポートなど、非常に多くのことを支援します。拡張機能の全リストは、[extension overview on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をご確認ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
deleted file mode 100644
index e427cd56c58..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/css-utilities.md
+++ /dev/null
@@ -1,551 +0,0 @@
----
-title: CSSユーティリティ
-initialTab: 'preview'
-inlineHtmlPreviews: true
----
-
-<head>
-  <title>CSSユーティリティ: 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 Framewor は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
-
-:::note
-使用可能な Ionic Framework スターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。
-:::
-
-## テキストの修正
-
-### テキストの配置
-
-```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.                                                                       |
-
-### テキストの変換
-
-```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
-
-上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの 1 つです。
-
-以下の表は、 `{modifier}` のデフォルトの挙動です。 `left`, `right`, `start`, `end`, `center`, `justify`, `wrap`, `nowrap`, `uppercase`, `lowercase`, `capitalize` は上記の通りです。
-
-| 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`. |
-
-## 要素の配置
-
-### Float 要素
-
-CSS プロパティの float は、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <h3>no float</h3>
-      <img
-        alt="Silhouette of a person's head"
-        src="https://ionicframework.com/docs/img/demos/avatar.svg"
-        height="50px"
-      />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
-    </ion-col>
-    <ion-col>
-      <h3>float-left</h3>
-      <img
-        alt="Silhouette of a person's head"
-        src="https://ionicframework.com/docs/img/demos/avatar.svg"
-        height="50px"
-        class="ion-float-left"
-      />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
-    </ion-col>
-    <ion-col>
-      <h3>float-right</h3>
-      <img
-        alt="Silhouette of a person's head"
-        src="https://ionicframework.com/docs/img/demos/avatar.svg"
-        height="50px"
-        class="ion-float-right"
-      />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
-    </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. |
-
-### レスポンシブな Float クラス
-
-上記のすべての float クラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。
-
-次の表に、デフォルトの動作を示します。 `{modifier}` は、前述のように `left`, `right`, `start`, `end` のいずれかです。
-
-| 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`. |
-
-## 要素の表示
-
-display CSS プロパティは、要素を表示するかどうかを決定します。要素は DOM 内に残りますが、非表示の場合はレンダリングされません。
-
-```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 属性
-
-画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
-
-| 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`). |
-
-## コンテンツのスペース
-
-### 要素の Padding
-
-padding 属性は、要素の padding エリアを設定します。padding エリアは、要素のコンテンツとその境界線のスペースです。
-
-`padding` で適用されるデフォルトの数値は `16px` で、これは `--ion-padding`　変数で設定することができます。これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
-
-```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.       |
-
-### 要素の Margin
-
-Margin エリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。
-
-`margin`　はデフォルトで `16px` が設定されており、 `--ion-margin` 変数で設定されています。 これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。
-
-```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 プロパティ
-
-<img src={require('@site/static/img/layout/diagram-flex-attributes.png').default} />
-
-### Flex コンテナのプロパティ
-
-```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 の表示
-
-border display CSS プロパティは、border を表示するかどうかを指定します。このプロパティは、 `ion-header` と` 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 のブレイクポイント
-
-Ionic は、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。
-
-| Breakpoint Name | Width    |
-| --------------- | -------- |
-| `xs`            | `0`      |
-| `sm`            | `576px`  |
-| `md`            | `768px`  |
-| `lg`            | `992px`  |
-| `xl`            | `1200px` |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
deleted file mode 100644
index 6cc5a214162..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/global-stylesheets.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: グローバルスタイルシート
-initialTab: 'preview'
-inlineHtmlPreviews: true
----
-
-<head>
-  <title>グローバルスタイルシート: 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>
-
-Ionic Framework のコンポーネントスタイルは自己完結していますが、Ionic のすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Framework アプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。
-
-## 利用可能
-
-### 必須
-
-Ionic Framework が正常に動作するためには、以下の CSS ファイルが含まれている必要があります。
-
-#### core.css
-
-このファイルは、Ionic コンポーネントが正常に動作するために必要な唯一のスタイルシートです。アプリ固有のスタイルが含まれており、`color`プロパティがコンポーネント間で動作するようにします。このファイルが含まれていない場合、色は表示されず、いくつかの要素が正しく表示されない可能性があります。
-
-### 推奨
-
-Ionic Framework アプリでは、以下の CSS ファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Framework のコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。
-
-#### structure.css
-
-`html>` にスタイルを適用し、`box-sizing` のデフォルトを `border-box` にします。これにより、モバイルデバイスでのスクロールがネイティブのように動作するようになります。
-
-#### typography.css
-
-typography はドキュメント全体の font-family を変更し、見出し要素のフォントスタイルを変更する。また、いくつかのネイティブのテキスト要素に位置決めスタイルを適用します。
-
-#### normalize.css
-
-ブラウザがすべての要素をより一貫して、現代の標準に沿った形で表示するようにします。これは [Normalize.css](https://necolas.github.io/normalize.css/) をベースにしています。
-
-### オプション
-
-以下の CSS ファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。
-
-#### padding.css
-
-任意の要素のパディングやマージンを変更するためのユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#content-space) を参照してください。
-
-#### float-elements.css
-
-ブレイクポイントとサイドに基づいて要素をフロートさせるユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#element-placement) を参照してください。
-
-#### text-alignment.css
-
-ブレークポイントに応じて、要素のテキストを整列させたり、空白を調整するためのユーティリティクラスを追加します。使い方は [CSS Utilities](css-utilities.md#text-alignment) を参照してください。
-
-#### text-transformation.css
-
-要素のテキストをブレイクポイントに応じて `大文字`, `小文字`, `大文字` に変換するユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#text-transformation) を参照してください。
-
-#### flex-utils.css
-
-フレックスコンテナやアイテムを整列させるためのユーティリティクラスを追加。使い方は [CSS Utilities](css-utilities.md#flex-properties) を参照してください。
-
-#### display.css
-
-ブレイクポイントに基づき、任意の要素を隠すためのユーティリティクラスを追加します。使用法については [CSS Utilities](css-utilities.md#element-display) を参照してください。
-
-## 使用方法
-
-フレームワークに基づくグローバルなスタイルシートのインクルード方法は [Ionic Packages](../intro/cdn.md) を、オプションのユーティリティの使用方法は [CSS Utilities](css-utilities.md) を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
deleted file mode 100644
index b44b618c2cb..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/grid.md
+++ /dev/null
@@ -1,512 +0,0 @@
----
-title: レスポンシブグリッド
----
-
-<head>
-  <title>レスポンシブグリッドシステムとスクリーンサイズに応じたカルムレイアウト</title>
-  <meta
-    name="description"
-    content="Ionic's responsive grid is a powerful mobile-first flexbox system for building custom layouts based on a 12 column layout with breakpoints based on screen size."
-  />
-</head>
-
-グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ 12 列のレイアウトに基づいています。カラムの数は CSS を使ってカスタマイズすることができます。
-
-## How it works
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-- グリッドは、すべての行と列のためのコンテナとして機能します。グリッドはコンテナの幅いっぱいに表示されます。
-  しかし、`fixed`属性を追加すると、スクリーンサイズごとの幅を指定することができます。
-- 行は、列を適切に並べるための水平方向のグループです。
-- コンテンツは列の中に配置されるべきで、列のみが行の直接の子となることができます。
-- `size-{breakpoint}` 属性は、1 行あたりデフォルトの 12 列のうち、使用する列の数を指定します。
-  つまり、`size="4"` を指定すると、グリッドの 1/3、つまり 12 列のうち 4 列を占有することができます。
-- size に値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を 4 つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に 25%になります。
-- カラムの幅はパーセンテージで設定されるため、常に流動的で、親要素からの相対的な大きさになります。
-- カラムは個々のカラムの間にパディングを持ちますが、パディングはグリッドとカラムから削除することができます。
-  しかし、グリッドに `ion-no-padding` クラスを追加することで、グリッドとカラムからパディングを取り除くことができます。グリッドに適用できるその他のスタイルについては、[CSS ユーティリティ](css-utilities.md) を参照してください。
-- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の 5 段階あります。
-- グリッドの階層は最小幅を基準にしており、その階層とそれより大きな階層に適用されます。
-  (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。
-- グリッドは CSS 変数で簡単にカスタマイズすることができます。グリッドのカスタマイズ](#customizing-the-grid)を参照してください。
-
-### ライブでの実装例
-
-Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。
-
-## グリッドの大きさ
-
-デフォルトでは、グリッドは 100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS 変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。
-
-| Name | Value  | Description                                       |
-| ---- | ------ | ------------------------------------------------- |
-| xs   | 100%   | Don't set the grid width 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) |
-
-### ライブでの実装例
-
-Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。
-
-## グリッドの属性
-
-グリッドは、デフォルトでは画面の幅いっぱいに表示されます。これは、以下の属性を使って変更できます。
-
-| Property | Description                                       |
-| -------- | ------------------------------------------------- |
-| fixed    | Set a max width based on the current screen size. |
-
-## デフォルトのブレークポイント
-
-デフォルトのブレークポイントは、以下の表で定義されています。現時点では、ブレイクポイントをカスタマイズすることはできません。カスタマイズできない理由については、 [Variables in Media Queries](../theming/advanced.md#variables-in-media-queries) を参照してください。
-
-| Name | Value  | Width Prefix | Offset Prefix | Push Prefix | Pull Prefix | Description                          |
-| ---- | ------ | ------------ | ------------- | ----------- | ----------- | ------------------------------------ |
-| xs   | 0      | `size-`      | `offset-`     | `push-`     | `pull-`     | Set columns when (min-width: 0)      |
-| sm   | 576px  | `size-sm-`   | `offset-sm-`  | `push-sm-`  | `pull-sm-`  | Set columns when (min-width: 576px)  |
-| md   | 768px  | `size-md-`   | `offset-md-`  | `push-md-`  | `pull-md-`  | Set columns when (min-width: 768px)  |
-| lg   | 992px  | `size-lg-`   | `offset-lg-`  | `push-lg-`  | `pull-lg-`  | Set columns when (min-width: 992px)  |
-| xl   | 1200px | `size-xl-`   | `offset-xl-`  | `push-xl-`  | `pull-xl-`  | Set columns when (min-width: 1200px) |
-
-## オートレイアウトカラム
-
-### 均等な幅
-
-デフォルトでは、すべてのデバイスと画面サイズにおいて、カラムは行の中で同じ幅を占めます。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 2</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 2</div>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-### 1 列の幅を設定する
-
-1 つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size="8">
-      <div>2 of 3 (wider)</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size="6">
-      <div>2 of 3 (wider)</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### ライブでの実装例
-
-Angular では [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。
-
-### 可変幅
-
-`size-{breakpoint}` プロパティを `"auto"` に設定することで、カラムはそのコンテンツの自然な幅に基づいてサイズを変更することができます。これは、ピクセルでカラムの幅を設定する場合に非常に便利です。可変幅のカラムの隣のカラムは、行を埋めるようにリサイズされます。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col>
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size="auto">
-      <div>Variable width content</div>
-    </ion-col>
-    <ion-col>
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <div>1 of 4</div>
-    </ion-col>
-    <ion-col>
-      <div>2 of 4</div>
-    </ion-col>
-    <ion-col size="auto">
-      <div>
-        <ion-input placeholder="Variable width input"></ion-input>
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>4 of 4</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### ライブでの実装例
-
-Angular では [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。
-
-## レスポンシブ属性
-
-### すべてのブレークポイント
-
-すべてのデバイスとスクリーンに対してカラムの幅をカスタマイズするには、`size` プロパティを設定します。このプロパティの値は、利用可能なカラムのうち、このカラムが占めるべきカラムの数を決定します。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="4">
-      <div>1 of 4</div>
-    </ion-col>
-    <ion-col size="2">
-      <div>2 of 4</div>
-    </ion-col>
-    <ion-col size="2">
-      <div>3 of 4</div>
-    </ion-col>
-    <ion-col size="4">
-      <div>4 of 4</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-### 積み上げから水平へ
-
-width 属性と breakpoint 属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="12" size-sm>
-      <div>1 of 4</div>
-    </ion-col>
-    <ion-col size="12" size-sm>
-      <div>2 of 4</div>
-    </ion-col>
-    <ion-col size="12" size-sm>
-      <div>3 of 4</div>
-    </ion-col>
-    <ion-col size="12" size-sm>
-      <div>4 of 4</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### ライブでの実装例
-
-Angular では [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、React では [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。
-
-##並び替え
-
-### カラムのオフセット
-
-offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは 3 カラム分オフセットされ、3 カラムを占めることになります。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="3">
-      <div>1 of 2</div>
-    </ion-col>
-    <ion-col size="3" offset="3">
-      <div>2 of 2</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが 3 カラム分オフセットされるグリッドの例です。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size-md="3">
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size-md="3">
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col size-md="3" offset-md="3">
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### ライブでの実装例
-
-Angular では [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、React では [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。
-
-### プッシュとプル
-
-`push` と `pull` というプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、カラムの `left` と `right` を指定したカラム数だけ調整し、カラムの並び替えを簡単に行うことができます。例えば、以下のグリッドでは、`1 of 2`と記述されたカラムが実際には最後のカラムとなり、`2 of 2`が最初のカラムとなります。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size="9" push="3">
-      <div>1 of 2</div>
-    </ion-col>
-    <ion-col size="3" pull="9">
-      <div>2 of 2</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-また、画面のブレークポイントに基づいて Push と Pull を追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。
-
-```html
-<ion-grid>
-  <ion-row>
-    <ion-col size-md="6" push-md="3">
-      <div>1 of 3</div>
-    </ion-col>
-    <ion-col size-md="3" push-md="3">
-      <div>2 of 3</div>
-    </ion-col>
-    <ion-col size-md="3" pull-md="9">
-      <div>3 of 3</div>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-```
-
-#### ライブでの実装例
-
-Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。
-
-## アライメント
-
-### 垂直方向のアラインメント
-
-行に異なるクラスを追加することで、すべての列を行の内側に垂直に整列させることができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-container-properties) を参照してください。
-
-```html
-<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-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-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-grid>
-```
-
-カラムはまた、カラムに直接 alignment クラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#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>
-```
-
-#### ライブでの実装例
-
-Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。
-
-### 水平方向の整列
-
-行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css ユーティリティ](css-utilities.md#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-grid>
-```
-
-#### ライブでの実装例
-
-Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。
-
-## グリッドのカスタマイズ
-
-組み込みの CSS 変数を使用すると、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラムの数などを変更できます。
-
-### 列の数
-
-グリッドのカラム数は、CSS 変数 `--ion-grid-columns` で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。
-
-```css
---ion-grid-columns: 12;
-```
-
-### グリッドの Padding
-
-グリッドコンテナの Padding は、CSS 変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS 変数 `--ion-grid-padding-{breakpoint}` を使用します。
-
-```css
---ion-grid-padding: 5px;
-
---ion-grid-padding-xs: 5px;
---ion-grid-padding-sm: 5px;
---ion-grid-padding-md: 5px;
---ion-grid-padding-lg: 5px;
---ion-grid-padding-xl: 5px;
-```
-
-### Grid width
-
-固定グリッドの幅の値を画面サイズに応じてカスタマイズするには、各ブレークポイントごとに `--ion-grid-width-{breakpoint}` の値をオーバーライドします。
-
-```css
---ion-grid-width-xs: 100%;
---ion-grid-width-sm: 540px;
---ion-grid-width-md: 720px;
---ion-grid-width-lg: 960px;
---ion-grid-width-xl: 1140px;
-```
-
-### Column Padding
-
-列の padding は `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS 変数 `--ion-grid-column-padding-{breakpoint}` を使用します。
-
-```css
---ion-grid-column-padding: 5px;
-
---ion-grid-column-padding-xs: 5px;
---ion-grid-column-padding-sm: 5px;
---ion-grid-column-padding-md: 5px;
---ion-grid-column-padding-lg: 5px;
---ion-grid-column-padding-xl: 5px;
-```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
deleted file mode 100644
index 3c96af0b8c6..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/layout/structure.md
+++ /dev/null
@@ -1,236 +0,0 @@
----
-title: 構造
-initialTab: 'preview'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsCards from '@components/global/DocsCards';
-
-<head>
-  <title>レイアウトの構成 | 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 は、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
-
-## Header と Footer のレイアウト
-
-### Header
-
-<aside>
-  <DocsCard href="../api/header" header="Learn More" icon="/icons/component-header-icon.png">
-    <code>ion-header</code> API docs
-  </DocsCard>
-</aside>
-
-最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般にこの両方を持ちますが、content を使用するために header は必要ありません。
-
-```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>
-
-ご覧のように、footer のツールバーはコンテンツの上に表示されます。アプリでは、コンテンツの下にツールバーを表示する必要がある場合があり、そのような場合に footer が使用されます。
-
-```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 と Footer
-
-また、これらを 1 つのページにまとめて、コンテンツの上と下にツールバーを表示させることも可能です。
-
-```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>
-```
-
-### ライブでの実装例
-
-この設定のライブ例を、Angular では [こちら](https://stackblitz.com/edit/ionic-ng-header-footer) 、React では [こちら](https://stackblitz.com/edit/ionic-react-head-foot) で見ることができます。
-
-## タブレイアウト
-
-水平な[tabs](../api/tabs.md)からなるレイアウトを使用すると、ユーザーはコンテンツビュー間をすばやく切り替えることができます。各タブには、静的コンテンツや、`ion-router-outlet` や `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>
-```
-
-### ライブでの実装例
-
-この設定は、Angular では [こちら](https://stackblitz.com/edit/ionic-ng-tabs) 、React では [こちら](https://stackblitz.com/edit/ionic-react-tab-layout) で実例を見ることができます。
-
-## メニューレイアウト
-
-モバイルアプリの標準的なレイアウトには、ボタンをクリックするか、横からスワイプして開くことで サイドメニュー [menu](../api/menu.md) を切り替えられる機能が含まれています。サイドメニューは一般的にナビゲーションのために使用されますが、任意のコンテンツを含むことができます。
-
-```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>
-```
-
-### ライブでの実装例
-
-この設定は、Angular では [こちら](https://stackblitz.com/edit/ionic-ng-menu-layout) 、React では [こちら](https://stackblitz.com/edit/ionic-react-menu)で 実例を見ることができます。
-
-## 分割ペインレイアウト
-
-[split pane](../api/split-pane.md) レイアウトは、前述のレイアウトを組み合わせることができるため、より複雑な構造を持っています。これは、ビューポートが指定されたブレークポイントより上にある場合に、複数のビューを表示することができます。デバイスの画面サイズが一定以下の場合、分割ペインビューは非表示になります。
-
-デフォルトでは、画面が `768px` または `md` ブレークポイントより大きい場合に分割ペインビューが表示されますが、`when` プロパティを設定することで、異なるブレークポイントを使用するようにカスタマイズすることが可能です。以下は、`sm`スクリーン以上、またはビューポートが `576px` より大きい場合に表示されるメニューを分割ペインに含む例です。これよりアプリが小さくなるようにブラウザの水平サイズを変更することで、分割ペインの表示が消えます。
-
-```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>
-```
-
-重要なのは、分割ペインで指定した `content-id` に一致する `id` を持つ要素が、常に表示されるメインコンテンツとなることです。これは、[ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), または [ion-tabs](../api/tabs.md) など任意の要素にすることが可能です。
-
-### ライブでの実装例
-
-Angular での実装例は [こちら](https://stackblitz.com/edit/ionic-ng-split-pane) 、React での実装例は [こちら](https://stackblitz.com/edit/ionic-react-split-pane) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
deleted file mode 100644
index e28675e6fea..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-faq.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-sidebar_label: よくある質問
-slug: /native/faq
----
-
-# Frequently Asked Question
-
-## What is Capacitor?
-
-Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library.
-
-## Permission Issues
-
-If you're using a plugin, it may require adding additional permissions to your native project after you install the plugin. For instance, the Capacitor Camera plugin requires the following permission for iOS:
-
-- `NSCameraUsageDescription` (`Privacy - Camera Usage Description`)
-- `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
-- `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
-
-You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail.
-
-## Unexpected behaviour
-
-If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md
deleted file mode 100644
index 30a8ac5c0fc..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native-setup.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Capacitor Plugins
-sidebar_label: Setup
-hide_table_of_contents: true
-slug: /native/setup
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<head>
-  <title>Capacitor Plugins | Capacitor Core Plugins for Ionic Apps</title>
-  <meta
-    name="description"
-    content="Capacitor offers a collection APIs that make adding native functionality to your Ionic app as simple as using any JavaScript library."
-  />
-  <style>{`
-    :root {
-      --doc-item-container-width: 60rem;
-    }
-  `}</style>
-</head>
-
-Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project.
-<intro-end />
-
-## Install
-
-To install a plugin, find the plugin you want to use and install it using your package manager, like npm:
-
-```shell
-# Install the Capacitor Plugins
-$ npm install @capacitor/camera
-```
-
-## Usage
-
-Once installed, plugins can be imported into a component and you can call the native functionality directly from your code.
-
-Using the [Camera plugin](native/camera.md) as an example, first install it:
-
-````mdx-code-block
-<Tabs
-  groupId="runtime"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'vue', label: 'Vue' },
-    { value: 'react', label: 'React' },
-  ]
-}>
-<TabItem value="javascript">
-
-```javascript
-import { Camera, CameraResultType } from '@capacitor/camera';
-
-const takePicture = async () => {
-  const image = await Camera.getPhoto({
-    quality: 90,
-    allowEditing: true,
-    resultType: CameraResultType.Uri
-  });
-  const imageUrl = image.webPath;
-  imageElement.src = imageUrl;
-};
-```
-
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-import { Component } from '@angular/core';
-import { Camera, CameraResultType } from '@capacitor/camera';
-
-@Component({...})
-export class CameraComponent{
-  public imageSrc = '';
-
-  async takePicture() {
-    const image = await Camera.getPhoto({
-      quality: 90,
-      allowEditing: true,
-      resultType: CameraResultType.Uri
-    });
-    const imageUrl = image.webPath;
-    this.imageSrc = imageUrl;
-  };
-
-}
-```
-
-</TabItem>
-<TabItem value="vue">
-
-```typescript
-
-<template>
-...
-</template>
-
-<script setup lang="typescript">
-import { ref } from 'vue';
-import { Camera, CameraResultType } from '@capacitor/camera';
-const imageSrc = ref('');
-
-const takePicture = async () => {
-  const image = await Camera.getPhoto({
-    quality: 90,
-    allowEditing: true,
-    resultType: CameraResultType.Uri
-  });
-  const imageUrl = image.webPath;
-  imageSrc.value = imageUrl;
-};
-
-</script>
-
-```
-
-</TabItem>
-<TabItem value="react">
-
-```javascript
-import { Camera, CameraResultType } from '@capacitor/camera';
-import { useState } from 'react';
-
-export function CameraComponent() {
-  const [imageSrc, setImageSrc] = usetState('');
-
-  const takePicture = async () => {
-    const image = await Camera.getPhoto({
-      quality: 90,
-      allowEditing: true,
-      resultType: CameraResultType.Uri
-    });
-    const imageUrl = image.webPath;
-    setImageSrc(imageUrl);
-  };
-  return (...)
-}
-```
-
-</TabItem>
-</Tabs>
-````
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
deleted file mode 100644
index 13818c296ad..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Capacitor
-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>
-
-<intro-end />
-
-Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences.
-
-While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk).
-
-<NativeEnterpriseCard />
-
-> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/)
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore b/i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore
deleted file mode 100644
index d6b7ef32c84..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/native/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-*
-!.gitignore
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
deleted file mode 100644
index 2b4fc71a4d9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: Ionic React
-sidebar_label: 概要
-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>Ionic Reactでアプリをつくろう: 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>コードひとつで <br/> あらゆるプラットフォーム <br/> <strong>まさにReact</strong></h1>
-
-- ✓ 100 以上のモバイルに最適化された React UI コンポーネント
-- ✓ React の標準的なツールである 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>
-
-### モバイル、デスクトップ、ウェブにまたがる素晴らしいアプリを、あなたが知っている、そして愛する React で構築してください。
-
-Ionic React は、Ionic Framework のネイティブ React バージョンで、世界中の何百万ものミッションクリティカルなアプリを動かしている、無料のオープンソース SDK です。
-
-React を使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。
-
-<div class="flex" >
-
-<div class="pull-left">
-
-## すばらしいデザイン
-
-100 種類以上の美しいモバイル対応の UI コンポーネント、アニメーション、ジェスチャーから選択でき、軽量であなたのブランドに合うようにカスタマイズできます。
-
-[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">
-
-## 使い慣れたツール
-
-Ionic の React プロジェクトは React プロジェクトと同じように、[react-dom](https://reactjs.org/docs/react-dom.html) を活用し、[Create React App (CRA)](https://github.com/facebook/create-react-app) アプリで見られるようなセットアップが可能です。ルーティングとナビゲーション](/docs/react/navigation)では、React Router が使用されています。
-React バージョン 16.8 以降に対応しています。
-
-</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
-
-最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic React プロジェクトをネイティブの iOS、Android、Electron、Web に Progressive Web App としてデプロイできます。すべて 1 つの共有コードベースで。
-
-</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">
-
-## まさに React
-
-結局のところ、ただの React なのです。Ionic React はオープンな Web 標準とビルトインのブラウザ機能を使用しているため、何百万とある Web ライブラリのどれとも互換性があります。
-
-  </div>
-
-<div class="pull-right">
-  <img src={require('@site/static/img/frameworks/react.svg').default} />
-</div>
-
-</div>
-
-## インストール
-
-```shell-session
-$ npm install -g @ionic/cli
-$ ionic start myApp tabs --type react
-
-$ ionic serve █
-```
-
-## Resources
-
-<DocsCards>
-  <DocsCard header="はじめ方" href="react/your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
-    <p>Ionic Frameworkで素晴らしいアプリを作り始めるために知っておくべき基礎知識を学びます。</p>
-  </DocsCard>
-
-<DocsCard
-  header="Add Ionic to Existing React App"
-  href="/docs/react/adding-ionic-react-to-an-existing-react-project"
-  icon="/icons/logo-react-icon.png"
->
-  <p>個々のコンポーネントを使用するか、完全なアプリ体験をつくるか。</p>
-</DocsCard>
-
-<DocsCard header="ナビゲーション" href="react/navigation" icon="/icons/feature-component-navigation-icon.png">
-  <p>IonicとReact Routerでアプリ内ナビゲーションの基本を学ぶ</p>
-</DocsCard>
-
-<DocsCard header="ライフサイクル" href="react/lifecycle" icon="/icons/feature-guide-components-icon.png">
-  <p>Ionicのライフサイクルイベントをクラスコンポーネントやフックで使用する方法について学びます。</p>
-</DocsCard>
-
-</DocsCards>
-
-</PageStyles>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md
deleted file mode 100644
index 94c253f3bed..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/adding-ionic-react-to-an-existing-react-project.md
+++ /dev/null
@@ -1,213 +0,0 @@
-# Adding To An Existing React App
-
-This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic.
-
-### Using Individual Ionic Components
-
-Ionic React has around 100 components that you can begin using in your app immediately to help make it more mobile-friendly.
-
-To get started with using components install the `@ionic/react` package:
-
-```bash
-npm i @ionic/react
-```
-
-Import the stylesheets from Ionic in your main app file:
-
-```tsx title="App.tsx"
-import '@ionic/react/css/core.css';
-```
-
-Add the `setupIonicReact` function to your app:
-
-```tsx title="App.tsx"
-import { setupIonicReact } from '@ionic/react';
-
-setupIonicReact();
-
-const App = () => {
-  return (
-    ...
-  );
-}
-
-export default App;
-```
-
-:::note
-
-`setupIonicReact` is a function that will set up the Ionic React components to work with your app. It is required to be called before using any of the Ionic React components.
-
-:::
-
-You can import any of the components and begin to use them right away. Here we are importing the `IonButton` and `IonDatetime` components and using them anywhere in our app:
-
-```tsx
-import React from 'react';
-import { IonButton, IonDatetime } from '@ionic/react';
-
-const MyComponent = () => {
-  return (
-    <>
-      <IonDatetime></IonDatetime>
-      <IonButton fill="clear">Start</IonButton>
-    </>
-  );
-};
-```
-
-### Using Ionic Pages
-
-If you want to convert part of your app and give it the whole Ionic experience, there are a few additional steps to take to get this setup.
-
-First, import some additional CSS files that help set up the overall structure of the page and some utility helpers:
-
-```js
-/* 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';
-```
-
-If you are using another CSS framework (like Bootstrap), you might want to isolate the Ionic pages away from them. This will help to ensure there aren't any CSS conflicts between the libraries.
-
-Next, install the `@ionic/react-router` library:
-
-```bash
-npm i @ionic/react-router
-```
-
-The Ionic React Router library is a small wrapper around the popular React Router library and helps provide the functionality we need for native-like page transitions. The Ionic React Router library is compatible with v5 of React Router.
-
-The main Ionic page will need a couple of base components. First, use a `IonApp` component (from `@ionic/react`) as the root component, and then use `IonReactRouter` (from `@ionic/react-router`).
-
-`IonApp` sets up our main container, with the necessary styling needed for our structural components. `IonReactRouter` is a small wrapper for React Routers `BrowserRouter` and should be used in its place.
-
-Then, wrap all your routes in an `IonRouterOutlet`, which is what manages our Ionic pages.
-
-```tsx
-import { IonApp, IonRouterOutlet } from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-
-...
-
-<IonApp>
-  <IonReactRouter>
-    <IonRouterOutlet>
-      <Route path="/" exact component={Home} />
-      <Route path="/about" exact component={About} />
-    </IonRouterOutlet>
-  </IonReactRouter>
-</IonApp>
-```
-
-Now you can setup Ionic pages like so:
-
-```tsx
-<IonPage>
-  <IonHeader>
-    <IonToolbar>
-      <IonTitle>My Page</IonTitle>
-    </IonToolbar>
-  </IonHeader>
-  <IonContent>
-    <IonDatetime></IonDatetime>
-    <IonButton fill="clear">Start</IonButton>
-  </IonContent>
-</IonPage>
-```
-
-:::note
-
-`IonPage` is important to have as the base component for your "Ionic" pages. `IonPage` is the element Ionic performs page transitions on.
-
-:::
-
-For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation).
-
-### Customize the Theme
-
-To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file:
-
-```css title="main.css"
-:root {
-  --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;
-
-  --ion-color-secondary: #0cd1e8;
-  --ion-color-secondary-rgb: 12, 209, 232;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #0bb8cc;
-  --ion-color-secondary-tint: #24d6ea;
-
-  --ion-color-tertiary: #7044ff;
-  --ion-color-tertiary-rgb: 112, 68, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #633ce0;
-  --ion-color-tertiary-tint: #7e57ff;
-
-  --ion-color-success: #10dc60;
-  --ion-color-success-rgb: 16, 220, 96;
-  --ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #0ec254;
-  --ion-color-success-tint: #28e070;
-
-  --ion-color-warning: #ffce00;
-  --ion-color-warning-rgb: 255, 206, 0;
-  --ion-color-warning-contrast: #ffffff;
-  --ion-color-warning-contrast-rgb: 255, 255, 255;
-  --ion-color-warning-shade: #e0b500;
-  --ion-color-warning-tint: #ffd31a;
-
-  --ion-color-danger: #f04141;
-  --ion-color-danger-rgb: 245, 61, 61;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #d33939;
-  --ion-color-danger-tint: #f25454;
-
-  --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 34, 34, 34;
-  --ion-color-dark-contrast: #ffffff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #383a3e;
-
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152, 154, 162;
-  --ion-color-medium-contrast: #ffffff;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-
-  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 244, 244;
-  --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f5f6f9;
-}
-```
-
-For more info on theming your Ionic app, see the guide [here](/docs/theming/themes).
-
-### Wrapping up
-
-Adding Ionic React to an existing React project is fairly simple and can be done in just a few minutes.
-
-The great thing about using individual components from Ionic React is that you only import the component you need. This makes Ionic React ideal for adding it to existing projects that need to look and work great on mobile devices.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
deleted file mode 100644
index 3340ce5b263..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/config.md
+++ /dev/null
@@ -1,118 +0,0 @@
-# Config
-
-Ionic Config は、アプリ全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。 アプリのモード、Tab ボタンのレイアウト、アニメーションなどを設定できます。
-
-## 使い方
-
-アプリの Ionic の初期設定をオーバーライドするには、Ionic コンポーネント (`IonApp`を含めます)をレンダリングする前に、`@ionic/react` から `setupConfig` メソッドをインポートして呼び出します:
-
-```tsx
-setupIonicReact({
-  rippleEffect: false,
-  mode: 'md',
-});
-```
-
-上記の例では、アプリ全体でマテリアルデザインのリップル効果を無効にし、mode をマテリアルデザインに強制しています。
-
-## 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
-
-以下は、Ionic で使用できる設定オプションのリストです。
-
-| 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.                     |
-| `toastDuration`          | `number`                                                                        | Overrides the default `duration` for all `ion-toast` components.                                         |
-| `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".               |
-| `toggleOnOffLabels`      | `boolean`                                                                       | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
deleted file mode 100644
index 44c491ebb2d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/lifecycle.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: React Lifecycle
-sidebar_label: ライフサイクル
----
-
-<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>
-
-このガイドでは、Ionic React アプリケーションで Ionic のライフサイクルイベントを利用する方法について説明します。
-
-## Ionic のライフサイクルメソッド
-
-Ionic は、アプリで利用できるいくつかのライフサイクルメソッドを提供します:
-
-| Event Name         | Description                                                        |
-| ------------------ | ------------------------------------------------------------------ |
-| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
-| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
-
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
-
-これらのメソッドにアクセスする方法は、クラスベースのコンポーネントを使用しているか、機能的なコンポーネントを使用しているかによって異なります。以下では、両方の方法について説明します。
-
-## クラスベースのコンポーネントにおけるライフサイクルメソッド
-
-クラスベースのコンポーネントで Ionic のライフサイクルメソッドを使用するには、次のように `withIonLifeCycle` という higher order component (HOC) でコンポーネントをラップする必要があります:
-
-```tsx
-export default withIonLifeCycle(HomePage);
-```
-
-:::note
-`withIonLifeCycle` は `@ionic/react` からインポートします
-:::
-
-そして、クラスコンポーネントに適切なライフサイクルメソッドを追加すると、イベントが発生した時に HOC がそのメソッドを呼び出します。以下は、各ライフサイクルメソッドを実装したコンポーネント全体です:
-
-```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);
-```
-
-## Function ベースのコンポーネントにおけるライフサイクルメソッド
-
-Ionic React は、ファンクションコンポーネントで使用できる各ライフサイクルメソッドのフックをエクスポートします。各フックは、イベントが発生したときに呼び出すメソッドを実行します。
-
-```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
-クラスコンポーネントのように、ファンクションコンポーネントを `withIonLifeCycle` HOC でラップする必要はありません。
-:::
-
-## React ライフサイクルメソッド
-
-React のすべてのライフサイクルメソッド（ `componentDidMount` 、`componentWillUnmount` など）も使用できます。 ただし、Ionic React はページのライフタイムを管理するため、特定のイベントが期待どおりに発生しない場合があります。 たとえば、最初にページが表示されたときは `componentDidMount` が起動しますが、ページから移動した時に Ionic はページを DOM ツリーに保持しているため、その後の当該ページへのアクセスでは `componentDidMount` を再度呼び出さない場合があります。 このシナリオは、Ionic ライフサイクルメソッドが存在する主な理由であり、ネイティブフレームワークのイベントが発生しない場合にビューが開始および終了するときにロジックを呼び出す方法を提供します。
-
-## 各ライフサイクルメソッドのガイドライン
-
-以下は、各ライフサイクルイベントのユースケースに関するヒントです。
-
-- `ionViewWillEnter` - コンポーネントが初期化されているかどうかに関係なくビューが表示される度に `ionViewWillEnter` が呼び出されるため、サービスからデータをロードするのに適したメソッドです。
-- `ionViewDidEnter` - データのロード時に `ionViewWillEnter` を使用することでパフォーマンスの問題が発生する場合は、代わりに `ionViewDidEnter` でデータ呼び出しを行うことができます。 ただし、ページがユーザーに表示されるまでこのイベントは発生しません。そのため、ロードインジケーターまたはスケルトンスクリーンを使用して、表示が完了した後にコンテンツが不自然にフラッシュしないようにすることができます。
-- `ionViewWillLeave` - データソースからの unsubscribe など、クリーンアップに使用できます。 `componentWillUnmount` は現在のページから移動しても起動しない場合があるため、画面が表示されていないときにアクティブにしたくない場合は、クリーンアップコードをここに配置します。
-- `ionViewDidLeave` - このイベントが発生すると、新しいページに完全に移行したことがわかります。そのため、ビューが表示されているときに通常実行しないロジックはここに移動できます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
deleted file mode 100644
index 998a6e83ecd..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/navigation.md
+++ /dev/null
@@ -1,592 +0,0 @@
----
-title: React Navigation
-sidebar_label: ナビゲーション/ルーティング
----
-
-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>
-
-このガイドでは、Ionic と React で構築されたアプリでのルーティングの仕組みについて説明します。
-
-`IonReactRouter` は一般的な [React Router](https://github.com/ReactTraining/react-router) ライブラリを内部で使用しています。Ionic と React Router を使うことで、ページ遷移がリッチなマルチページアプリをつくることができます。
-
-React Router を使用したルーティングについて知っていることはすべて、Ionic React で利用することができます。Ionic React アプリの基本と、ルーティングがどのように機能するかを見てみましょう。
-
-## Ionic React におけるルーティング
-
-これは `App` コンポーネントのサンプルで、 "/dashboard" URL への単一ルートを定義しています。"/dashboard"にアクセスすると、 `DashboardPage` コンポーネントをレンダリングします。
-
-**App.tsx**
-
-```tsx
-const App: React.FC = () => (
-  <IonApp>
-    <IonReactRouter>
-      <IonRouterOutlet>
-        <Route path="/dashboard" component={DashboardPage} />
-        <Redirect exact from="/" to="/dashboard" />
-      </IonRouterOutlet>
-    </IonReactRouter>
-  </IonApp>
-);
-```
-
-`Route` の直後に、デフォルトの `Redirect` を定義します。これは、ユーザーがアプリのルート URL（"/"）にアクセスすると、"/dashboard" URL にリダイレクトします。
-
-リダイレクトには `exact` という prop もあります。つまり、このルートが一致するためには、URL が `from` prop（もしくは `Route` で `exact` が使われている場合の `path` prop）と正確に一致する必要があります。すべてのルートは"/"で始まるため、これがないと、このリダイレクトはすべてのルートに対してレンダリングされます。
-
-ユーザーが認証されているかどうかを確認するなど、条件に基づいてルートの render メソッドからプログラムでリダイレクトすることもできます:
-
-```tsx
-<Route
-  exact
-  path="/dashboard"
-  render={(props) => {
-    return isAuthed ? <DashboardPage {...props} /> : <LoginPage />;
-  }}
-/>
-```
-
-## IonReactRouter
-
-`IonReactRouter` コンポーネントは、React Router の従来の [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) コンポーネントをラップし、アプリケーションをルーティング用にセットアップします。したがって、 `BrowserRouter` の代わりに `IonReactRouter` を使用します。任意の prop を `IonReactRouter` に渡すことができ、それらはベースとなる `BrowserRouter` に渡されます。
-
-## ルーターのネスト
-
-DashboardPage 内で、アプリのこの特定のセクションに関連するルートをさらに定義します。
-
-**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>
-  );
-};
-```
-
-ここでは、アプリの DashboardPage から更にコンポーネントが定義された 2 つのルートがあります。path にはルートの全体を定義する必要があり、その URL からこのページに到達した場合でも、 "/dashboard" を省略できないことに注意してください。 React Router は絶対パスを必要とし、相対パスはサポートされていません。
-
-ただし、 [`match`](https://reacttraining.com/react-router/web/api/match) オブジェクトの `url` プロパティを使用して、コンポーネントをレンダリングするために match した URL を提供できます。これは、ネストされたルートを操作するときに役立ちます。
-
-```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>
-  );
-};
-```
-
-ここでは、 `match.url` には "/dashboard" の値が含まれています。これは、 `DashboardPage` のレンダリングに使用される URL であるためです。
-
-これらのルートは `IonRouterOutlet` にグループ化されています。次に説明します。
-
-## IonRouterOutlet
-
-`IonRouterOutlet` コンポーネントは、Ionic の "ページ" をレンダリングするルートコンテナを提供します。 ページが `IonRouterOutlet` にある場合、コンテナはページ間の遷移アニメーションを制御し、ページが作成および破棄されるタイミングを制御します。これにより、ビューを切り替える際にビュー間の状態を維持できます。
-
-上記の `DashboardPage` には、ユーザーリストページと詳細ページが表示されます。 2 つのページ間を移動するとき、 `IonRouterOutlet` は適切なプラットフォームページの遷移を提供し、前のページの状態をそのまま保持するため、ユーザーがリストページに戻ると、前のページと同じ状態で表示されます。
-
-`IonRouterOutlet` には、 `Route` と `Redirect` のみを含める必要があります。 他のコンポーネントは、 `Route` の結果、または `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
-
-Ionic React アプリでさまざまなビューにルーティングする場合、いくつかのオプションを使用できます。 ここで、 `UsersListPageはIonItem` は `IonItem` の `routerLink` prop を使用して、タップ/クリックされたときに移動するルートを指定します:
-
-**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>
-```
-
-ルーティングは可能な限り、上記の方法のいずれかを使用することをお勧めします。 これらのアプローチの利点は、両方ともアンカー（ `<a>` ）タグをレンダリングすることです。これはアプリ全体のアクセシビリティに適しています。
-
-ナビゲーションのためのプログラムオプションとして、React Router がルート経由でレンダリングするコンポーネントに提供する [`history`](https://reacttraining.com/react-router/web/api/history) prop を使用することもできます。
-
-```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
-
-Dashboard Page で定義された 2 番目のルートには、URL パラメーターが定義されています（パスの ":id" 部分）。 URL パラメーターは `path` の動的な部分であり、ユーザーが "/dashboard/users/1" などの URL に移動すると、"1" はルートがレンダリングするコンポーネント上で "id" という名前のパラメーターに保存されます。それがどのように行われるかを見てみましょう。
-
-**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>
-  );
-};
-```
-
-[`match`](https://reacttraining.com/react-router/web/api/match) prop には、URL パラメーターなど、一致したルートに関する情報が含まれます。 ここで `id` パラメータを取得し、画面に表示します。
-
-> Note: TypeScript インターフェイスを使用して props オブジェクトを厳密に入力する方法に注意してください。 このインターフェースにより、コンポーネント内部でタイプセーフティとコード補完が可能になります。
-
-## 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
-
-Tab ビューで作業する場合、Ionic React には、どのビューがどの Tab に属しているかを判断する方法が必要です。これは、 `Route` に提供されるパスが正規表現であるという事実を利用することにより実現します。
-
-この構文は少し不思議に見えますが、理解すればかなり簡単です。
-
-例えば、2 つのタブ (sessions と speakers) をもつビューのルートは次のように設定できます:
-
-```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>
-```
-
-ナビゲートされた URL が "/sessions" の場合、最初のルートと一致します。 "tab" という URL パラメーターに "sessions" の値を格納して、 `match` オブジェクトに `SessionsPage` として追加します。
-
-ユーザーがセッションの詳細ページ（たとえば "/sessions/1" ）に移動すると、2 番目のルートは "tabs" という URL パラメーターに "sessions" という値を追加します。 `IonRouterOutlet` は、両方のページが同じ "sessions" タブにあることを認識すると、新しいビューへのアニメーションページ遷移を提供します。 ユーザーが新しいタブ（この場合は "speakers" ）に移動すると、 `IonRouterOutlet` はアニメーションを提供しないことを認識します。
-
-### IonRouterOutlet の `Switch`
-
-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`.
-
-## 更に知りたい場合
-
-React Router を使用した React でのルーティングの詳細については、次の [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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overlays.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overlays.md
deleted file mode 100644
index d7285f1e7d9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overlays.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
deleted file mode 100644
index b042b1b7a78..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/overview.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Ionic React の概要
-
-`@ionic/react` は Ionic Core に、React 開発者向けにカスタマイズされたツールと API を組み合わせたものです。
-
-:::note
-The first official version of Ionic React is v4.11.
-:::
-
-最初に、Ionic CLI をインストールします:
-
-```shell
-npm install -g @ionic/cli
-```
-
-そして、次のコマンドを実行します:
-
-```shell
-ionic start myAppName
-```
-
-CLI は、使用するフレームワーク(もちろん React!)と利用するスターターテンプレートを含むいくつかの質問をすることで、セットアップ・プロセスを案内します。
-
-アプリを作成したら、アプリを起動します:
-
-```shell
-ionic serve
-```
-
-もう [Ionic UI components](../components.md) を使ってアプリの開発をはじめることができます。
-
-## React バージョンサポート
-
-React バージョン 16.8 以降と互換性があります。
-
-## React ツール
-
-Ionic React プロジェクトは React プロジェクトそのものようなもので、 [react-dom](https://reactjs.org/docs/react-dom.html) を活用して,一般的な [Create React App (CRA)](https://github.com/facebook/create-react-app) のセットアップを利用しています。 [routing and navigation](navigation.md) では、React Router を内部で使用します。
-
-1 つの違いは、 [TypeScript](http://www.typescriptlang.org/) を使用することで、生産性が向上していることです。プレーン JavaScript を使用するには、ファイル名を `.js` に変更します。次に、各ファイルの型注釈を削除します。
-
-## ネイティブツール
-
-[Capacitor](https://capacitorjs.com) は `Ionic React` でつくられた Web アプリを、iOS、Android、Electron と 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md
deleted file mode 100644
index b36c915b424..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/performance.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-sidebar_label: パフォーマンス
-title: React パフォーマンス
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
deleted file mode 100644
index 4c692c014c3..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/platform.md
+++ /dev/null
@@ -1,83 +0,0 @@
-# Platform
-
-## isPlatform
-
-`isPlatform` メソッドを使用して、アプリが特定のプラットフォームで実行されているかどうかを確認できます:
-
-```tsx
-import { isPlatform } from '@ionic/react';
-
-isPlatform('ios'); // iOSデバイスで実行されてる時は true を返します
-```
-
-ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPad から実行するアプリは、mobile、ios、ipad、および tablet のプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordova も true になります。
-
-## getPlatforms
-
-`getPlatforms` メソッドを使用して、アプリが現在実行されているプラットフォームを判別できます。
-
-```tsx
-import { getPlatforms } from '@ionic/react';
-
-getPlatforms(); // iPhoneの場合 ["iphone", "ios", "mobile", "mobileweb"] を返します
-```
-
-使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhone では、mobile、ios、および iphone が返されます。
-
-## Platforms
-
-次の表に、使用可能なすべてのプラットフォーム値とその説明を示します。
-
-| 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](../developing/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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
deleted file mode 100644
index 4c2ac215b88..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/pwa.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-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."
-  />
-</head>
-
-## Making your React app a PWA with Vite
-
-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 Application Manifest</a>. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead.
-
-To get started, install the `vite-plugin-pwa` package:
-
-```shell
-npm install -D vite-plugin-pwa
-```
-
-Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
-
-```javascript
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { VitePWA } from 'vite-plugin-pwa';
-
-export default defineConfig({
-  plugins: [react(), VitePWA({ registerType: 'autoUpdate' })],
-});
-```
-
-This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
-
-For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/).
-
-See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA.
-
-## Making your React app a PWA with Create React App
-
-:::note
-As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create React App. See [Making your React app a PWA with Vite](#making-your-react-app-a-pwa-with-vite) for Vite instructions.
-:::
-
-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 Application 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.
-
-PWA の主な要件は、 <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank">Service Worker</a> と <a href="https://developers.google.com/web/fundamentals/web-app-manifest/" target="_blank">Web Manifest</a> の 2 つです。これらの両方を手動でアプリに追加することは可能ですが、Create React App (CRA)と Ionic CLI のベースプロジェクトがこれらをすでに提供しています。
-
-アプリケーションの `index.ts` には、`serviceWorker.unregister()` 関数の呼び出しがあります。基本 CRA が提供する service workers はオプトイン機能なので、有効にする必要があります。
-有効にするには、`serviceWorker.register ()`を呼び出します。
-
-```ts
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-
-const container = document.getElementById('root');
-const root = createRoot(container!);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// 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://cra.link/PWA
-serviceWorkerRegistration.register();
-```
-
-このパッケージを追加したら、 `ionic build` を実行し、 `build` ディレクトリを PWA としてデプロイする準備ができます。
-
-:::note
-デフォルトでは、React アプリのパッケージには、アプリアイコン用の Ionic ロゴが付属しています。正しいアプリケーション名を使用するように manifest を更新し、アイコンを置き換えてください。
-:::
-
-:::note
-Service Workers や多くの JavaScript API (位置情報など)のような機能は、セキュアなコンテキストでアプリをホストする必要があります。ホスティングサービスを介してアプリケーションを配備する場合は、Service Workers を最大限に活用するために HTTPS が必要になることに注意してください。
-:::
-
-<<<<<<< HEAD
-
-## Service Worker の設定
-
-=======
-
-### Service Worker configuration
-
-> > > > > > > 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
-
-デフォルトでは、CRA/React Script には [Workbox の Webpack プラグイン](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいて事前設定された Service Worker セットアップが付属しています。これはキャッシュファースト戦略を利用しており、ネットワークが新しいバージョンのアプリを返しても、アプリはキャッシュからロードされます。
-
-CRA/React Scripts の性質上、この設定は React Scripts の内部で行われるため、React Scripts から抽出しない限りはカスタマイズできません。現在、Ionic CLI は React App のイジェクトをサポートしていないため、このアクションを実行する場合は、Ionic CLI の代わりに npm/year スクリプトを使用する必要があります。
-
-<<<<<<< HEAD
-
-## デプロイ
-
-=======
-
-### Deploying
-
-> > > > > > > 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
-
-#### Firebase
-
-Firebase ホスティングは Progressive Web Apps に多くの利点を提供しており、CDN による高速応答、デフォルトで有効になっている HTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
-
-まず、まだ使用していない場合は、Firebase で [プロジェクトを作成](https://console.firebase.google.com) します。
-
-次にターミナルで Firebase CLI をインストールします:
-
-```shell
-npm install -g firebase-tools
-```
-
-Firebase CLI をインストールした状態で、Ionic プロジェクト内で `firebase init` を実行します。CLI 上で様々な確認を行っていきます:
-
-**"Which Firebase CLI features do you want to set up for this folder?"** "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
-
-**"Select a default Firebase project for this directory:"** Firebase の Web サイト上で作成したプロジェクトを選択します。
-
-**"What do you want to use as your public directory?"** "dist" を選択ください。
-
-:::note
-次の 2 つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
-:::
-
-**Configure as a single-page app (rewrite all urls to /index.html)?"** "Yes" を選択します.
-
-**"File dist/index.html already exists. Overwrite?"** "No" を選択します。
-
-`firebase.json` という設定ファイルが生成されるので、アプリの設定にあわせて変更します。
-
-最後に、キャッシング・ヘッダーが正しく設定されていることを確認する必要があります。これを行うには、 `headers` スニペットを `firebase.json` に追加します。完全な`firebase。json`は次のようになります:
-
-```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"
-          }
-        ]
-      }
-    ]
-  }
-}
-```
-
-より詳しい `firebase.json` についての設定は [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json) を参照ください。
-
-次に、次のコマンドを実行して、アプリケーションの最適化バージョンを構築します:
-
-```shell
-ionic build --prod
-```
-
-最後に、アプリをデプロイします:
-
-```shell
-firebase deploy
-```
-
-これが完了すると、アプリがライブになります。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
deleted file mode 100644
index b641e5601c8..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/quickstart.md
+++ /dev/null
@@ -1,454 +0,0 @@
----
-title: Ionic Reactクイックスタート
-sidebar_label: クイックスタート
----
-
-<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>
-
-## Ionic Framework とは
-
-まず、ここに来たばかりの人を歓迎します！Ionic Framework は、 iOS, Android, Electron, Web 上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
-
-UI コンポーネントに加えて、Ionic Framework は新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
-
-このガイドでは、Ionic Framework 特有の機能を含め、React と Ionic Framework の基本について説明します。React に精通している方は、ガイドを楽しみ、Ionic Framework について新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
-
-## Ionic CLI を使ったプロジェクト新規作成
-
-はじめに、Ionic CLI の最新版をインストールしましょう。
-
-```shell
-npm install -g @ionic/cli
-```
-
-これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Framework と他の依存関係を持つ React プロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
-
-```shell
-ionic start myApp blank --type=react
-cd myApp
-```
-
-これで、 `ionic serve` を実行することによって、プロジェクトをブラウザで実行することができます。
-
-## React コンポーネントの確認
-
-アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `index.tsx` になります。エディタでプロジェクトを開き、`index.tsx` を確認すると、次のように表示されます:
-
-```tsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-```
-
-ここでは何が処理されてるでしょう。最初の 3 行はいくつかの依存関係を import しています。1 つ目は React 自身です。これにより、JSX と呼ばれる HTML に似た構文でコンポーネントを記述できるようになります。JSX については後ほど説明します。
-
-2 番目の import は ReactDOM です。 `ReactDOM.render` メソッドは、コンポーネントを取得し、指定された DOM ノードにレンダリングするための browser/DOM 固有の方法です。
-
-最後のインポートは、単純に `App` という名前のアプリケーションのルートコンポーネントです。これは私たちの最初の React コンポーネントであり、React アプリの起動処理で使用されます。
-
-`App.tsx` を開くと、以下のコードが確認できます。
-
-```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>
-);
-```
-
-一見、多くのことが起こっているように見えるかもしれないので、最初の import からみていきましょう。
-
-```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';
-```
-
-`index.tsx` に似ていますが、まず React をインポートして JSX を使用できるようにする必要があります。
-
-次のインポートは `react-router-dom` からです。Route をインポートし、アプリの URL とレンダリングしたいコンポーネントをマッチさせます。
-
-ReactRouter に続いて、Ionic を import します。React でコンポーネントを使用する前に import する必要があります。Ionic の場合、Button や Card を使いたい時はいつも import しなければなりません。App コンポーネントの場合は、 `IonApp`、 `IonRouterOutlet` 、および `IonReactRouter` を使用します。
-
-`IonReactRouter` は、ReactRouter の BrowserRouter コンポーネントをラップするコンポーネントです。多少の違いはありますが、BrowserRouter と同じように動作します。これらの違いについては、 [React Navigation Docs](navigation.md) で詳しく説明しています。
-
-最後の重要なインポートは `Home` コンポーネントのインポートです。これは、このアプリケーションでナビゲートできるコンポーネントです。ナビゲーション部分については、後で説明します。
-
-CSS の import は Ionic から padding や typography などのユーティリティスタイルを取り込んでいます。
-
-すべての import を確認したので、続いて 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>
-);
-```
-
-この React コンポーネントは、アプリの初期ルーティングをセットアップし、アニメーションとレイアウトのためのいくつかの重要な Ionic コンポーネントを含んでいます(IonRouterOutlet と IonApp)。一見変わった書き方にみえますが、React ではデータバインディングを行うために、値が中括弧 (`{}`) で渡されることに注目してください。つまり `Route` コンポーネントでは、 `component` の値を以前の `Home` コンポーネントに設定しています。これにより、React はその値が文字列ではなくコンポーネントへの参照であることを認識します。
-
-:::note
-ここで重要なのは、これらはすべて標準の React DOM ライブラリであり、カスタムの統合レイヤや変換ステップがないことです。
-:::
-
-## コンポーネントのスタイル
-
-`App` を変更することはあまりありません。これは、コンテナ・コンポーネントの基本的な例です。Router のロジックでは、指定された URL ルートに一致するコンポーネントをレンダリングするだけです。すでに 1 つのコンポーネント/ルータが設定されているので、`Home` コンポーネントを変更します。
-
-現在、 `Home` コンポーネントはこうなっています:
-
-![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>
-  );
-};
-```
-
-最初の `App` コンポーネントと同じように、特定の Ionic コンポーネントの import、React コンポーネントの import、そして React コンポーネント自体の import があります。
-
-`IonPage` は、すべてのページ(ルート/URL を持つコンポーネント)のベースコンポーネントであり、Header、Title、Content コンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素を含んでいます。
-
-:::note
-独自のページを作成するときは、 `IonPage` をそのルートコンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、トランジションが正しく動作することを保証し、Ionic コンポーネントが依存するベース CSS を提供するために重要です。
-:::
-
-`IonHeader` は、ページの先頭に存在することを意図したコンポーネントです。`IonHeader` 自体は、いくつかの flexbox のレイアウトを処理する以外は、ほとんど何もしません。これは、`IonToolbar` や `IonSearchbar` などの他のコンポーネントを保持するためのものです。
-
-`IonContent` はその名の通り、私たちのページのメインコンテンツ領域です。ユーザーが操作するスクロール可能なコンテンツと、アプリで使用できるスクロールイベントを提供する責任をもっています。
-
-私たちの現在のコンテンツは比較的シンプルが、実際のアプリで使えるようなものは何も含まれていません。
-
-:::note
-簡潔にするために、他のコンポーネントの関数宣言や import 文など、コンポーネントの繰り返し部分を除外しています。
-:::
-
-```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>
-```
-
-この `IonContent` では、 `IonList` と、さらに複雑な `IonItem` コンポーネントを追加します。ここでは `IonItem` を中心に見ていきます。
-
-```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 は React の概念と Web Component の概念が混在していることを明確に示す重要な要素です。React の概念の最初の明確な例は、 `IonCheckbox` の React コンポーネントの自己終了タグです。これは、子コンテンツを含まないコンポーネントを記述する単純な方法です。
-
-Web コンポーネント側には、 `slot` という特殊な属性があります。これは、レンダリング時に `IonItem` に `IonCheckbox` を配置する場所を知らせるためのキーです。これは React API ではなく、Web 標準 API です。
-
-Ionic Framework の別のコンポーネントである FAB（フローティング・アクション・ボタン）を見てみましょう。FAB は、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。この FAB には、FAB、FAB ボタンおよびアイコンの 3 つのコンポーネントが必要です。
-
-```tsx
-import { add } from ‘ionicons/icons’;
-…
-
-<IonContent>
-  <IonList>
-  ...
-  </IonList>
-
-  <IonFab vertical="bottom" horizontal="end" slot="fixed">
-    <IonFabButton>
-      <IonIcon icon={add} />
-    </IonFabButton>
-  </IonFab>
-
-</IonContent>
-```
-
-メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot 属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
-
-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 `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package.
-
-```tsx
-import { add } from 'ionicons/icons';
-import { useHistory } from 'react-router';
-...
-const Home: React.FC<RouteComponentProps> = () => {
-  const history = useHistory();
-  return (
-    <IonPage>
-      <IonHeader>...</IonHeader>
-      <IonContent>
-        <IonList>...</IonList>
-        <IonFab vertical="bottom" horizontal="end" slot="fixed">
-          <IonFabButton onClick={() => history.push('/new')}>
-            <IonIcon icon={add} />
-          </IonFabButton>
-        </IonFab>
-      </IonContent>
-    </IonPage>
-  );
-}
-export default Home;
-```
-
-コンポーネント宣言では、`RouteComponentProps` 型 (`react-router` から import)の `props` を渡しています。この `props`オブジェクトは、React Router から履歴 API へのアクセスを提供し、新しいルートをナビゲーション・スタックにプッシュできるようにします。`IonFabButton` では、クリックハンドラーを追加し、 `props.history.push` を呼び出して新しいルートを渡すだけです。この場合は、 `new` に移動します。
-
-```tsx
-<IonFabButton onClick={() => props.history.push('/new')} >
-```
-
-## 新しい Route の作成
-
-これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しい route をルーターの宣言に追加する必要があります。 `App.tsx` を開いて、 `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;
-```
-
-ルータに route `/new` のエントリが追加されたので、必要なコンポーネント `NewItem` を作成します。これは `src/pages/NewItem.tsx` にあります。
-
-とりあえず、 `NewItem.tsx` にプレースホルダの内容を入力してみましょう。
-
-```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.
-:::
-
-ここの内容は非常に単純で、 `Home` コンポーネントに似ているはずです。新しいのは `IonBackButton` コンポーネントです。これは、前のルートに戻るために使用されます。まっすぐ前に?では、ページをリロードしたらどうなりますか?
-
-この場合、メモリ内の履歴が失われるため、戻るボタンが消えます。これに対処するには、 `defaultHref` 属性値を、履歴がない場合にナビゲートする URL に設定します。
-
-```tsx
-return (
-  <IonPage>
-    <IonHeader>
-      <IonToolbar>
-        <IonButtons slot="start">
-          <IonBackButton defaultHref="/home" />
-        </IonButtons>
-        <IonTitle>New Item</IonTitle>
-      </IonToolbar>
-    </IonHeader>
-    <IonContent />
-  </IonPage>
-);
-```
-
-ここでリロードすると、アプリの履歴がなければ、ホームルートに戻ることができます。
-
-## 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
-
-UI コンポーネントやナビゲーションなど、Ionic React アプリの基本的な部分はすでに完成しています。Ionic Framework のコンポーネントの素晴らしいところは、iOS、Android、PWA を含むどこでも動作することです。モバイル、デスクトップ、その他にもデプロイするために、Ionic のクロスプラットフォームライブラリ [Capacitor](https://capacitorjs.com) を使用することができます。一貫性のある Web に特化した API セットを提供することで、 Web 標準をサポートするプラットフォーム上の豊富なネイティブデバイス機能にアクセスしながら、アプリケーションを可能な限り Web 標準に近づけることが可能になります。
-
-ネイティブ機能を追加するのは簡単で、最初にプロジェクトに Capacitor を追加します:
-
-```shell
-ionic integrations enable capacitor
-```
-
-次に、プロジェクトをビルドしてから利用するプラットフォームを選択します:
-
-```shell
-ionic build
-ionic cap add ios
-ionic cap add android
-```
-
-iOS と Android のプロジェクトを開いたり、ビルド、実行するのに、ネイティブの IDE(Xcode と Android Studio)を使います:
-
-```shell
-ionic cap open ios
-ionic cap open android
-```
-
-詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
-
-次に、 [すべての利用可能な APIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
-
-```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;
-```
-
-## 次にすること
-
-このガイドでは、Ionic React アプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としての Capacitor の紹介について説明した。React と Capacitor で完全な Ionic アプリを作るには、[First App guide](your-first-app.md)を参照してください。
-
-Ionic のコンポーネントの詳細は [component API pages](https://ionicframework.com/docs/components) をチェックしてほしい。React の詳細については、 [React Docs](https://reactjs.org/) を参照ください。ネイティブ機能の構築を続けるには、 [Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
-
-アプリ構築をお楽しみください! 🎉
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md
deleted file mode 100644
index b8d88392314..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/slides.md
+++ /dev/null
@@ -1,569 +0,0 @@
----
-title: Migrating From IonSlides to Swiper.js
----
-
-<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.
-
-:::note
-Swiper's React component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
-
-Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
-:::
-
-## 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@latest
-```
-
-:::note
-Developers using Create React App must use `react-scripts` v5.0.0+ with the latest version of 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 `IonSlides`.
-
-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/css';
-import '@ionic/react/css/ionic-swiper.css';
-
-const Home: React.FC = () => {
-  return (
-    ...
-  );
-};
-export default Home;
-```
-
-:::note
-Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
-:::
-
-### 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/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/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`:
-
-```tsx
-import React from 'react';
-import { IonContent, IonPage } from '@ionic/react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-
-import 'swiper/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;
-```
-
-## 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.
-
-`IonSlides` 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';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
-
-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/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;
-```
-
-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';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
-
-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/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';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
-
-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/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 `IonSlides`, 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. However, using this module is **not** required to use Swiper.js in Ionic.
-
-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';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
-
-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/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 can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#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';
-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:
-
-| IonSlides 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';
-
-import 'swiper/css';
-import '@ionic/react/css/ionic-swiper.css';
-
-const Home: React.FC = () => {
-  return (
-    <IonPage>
-      <IonContent>
-        <Swiper modules={[EffectFade, 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';
-
-import 'swiper/css';
-import 'swiper/css/effect-fade';
-import '@ionic/react/css/ionic-swiper.css';
-
-const Home: React.FC = () => {
-  return (
-    <IonPage>
-      <IonContent>
-        <Swiper modules={[EffectFade, IonicSlides]}>
-          <SwiperSlide>Slide 1</SwiperSlide>
-          <SwiperSlide>Slide 2</SwiperSlide>
-          <SwiperSlide>Slide 3</SwiperSlide>
-        </Swiper>
-      </IonContent>
-    </IonPage>
-  );
-};
-export default Home;
-```
-
-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';
-
-import 'swiper/css';
-import 'swiper/css/effect-fade';
-import '@ionic/react/css/ionic-swiper.css';
-
-const Home: React.FC = () => {
-  return (
-    <IonPage>
-      <IonContent>
-        <Swiper modules={[EffectFade, IonicSlides]} effect="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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/storage.md
deleted file mode 100644
index ea044c7ccc6..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/storage.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md
deleted file mode 100644
index c40482a29f6..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/testing.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-sidebar_label: テスト
----
-
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md
deleted file mode 100644
index 8e72abb6361..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/virtual-scroll.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# 仮想スクロール
-
-:::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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md
deleted file mode 100644
index 6a41f3df0bd..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app.md
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: 'はじめてのIonicアプリ: React'
-sidebar_label: はじめてのアプリ
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md
deleted file mode 100644
index 9b361758b68..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/2-taking-photos.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: 写真をカメラを使って撮影する
-sidebar_label: カメラ撮影
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md
deleted file mode 100644
index e005724c4ad..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/3-saving-photos.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-sidebar_label: 写真の保存
----
-
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md
deleted file mode 100644
index 9a7119a5f7a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/4-loading-photos.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: ファイルシステムからの写真の読み込み
-sidebar_label: 写真の読み込み
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md
deleted file mode 100644
index bc498de2c22..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/5-adding-mobile.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-sidebar_label: 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md
deleted file mode 100644
index eb5cf411a1e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/6-deploying-mobile.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-sidebar_label: モバイルへのデプロイ
----
-
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md
deleted file mode 100644
index 8ae2a7adcdb..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/7-live-reload.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-sidebar_label: ライブリロード
----
-
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/8-distribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/8-distribute.md
deleted file mode 100644
index 74966e8de58..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/react/your-first-app/8-distribute.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
deleted file mode 100644
index 4387363afee..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/browser-support.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: ブラウザサポート
----
-
-<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 の本来の目標は、HTML、CSS、JavaScript といった Web 技術を使用してモバイルアプリを開発することを簡単にすることでした。Ionic はこのウェブテクノロジーの基盤により、ウェブ、iOS、Android、ブラウザ、PWA など、どこでも実行できます。
-
-## モバイルブラウザ
-
-[スタイルの適用](../core-concepts/fundamentals.md#adaptive-styling)を追求するために, Ionic は以下のモバイルプラットフォームを完全にサポート、テストしています。:
-
-| 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
-最新のプラットフォームの情報については [latest Android stats](https://developer.android.com/about/dashboards/) と [latest iOS stats](https://developer.apple.com/support/app-store/) をご確認ください。
-:::
-
-### Android Support の注意点
-
-Android 5.0 から、Webview は Android から独立して更新できる別のアプリケーションに移されました。これは、ほとんどの Android 5.0 以上のデバイスが Chromium の最新バージョンを実行していることを意味します。しかし、ウェブビューを更新することができない Android デバイスがまだ存在しています。これらのウェブビューは、通常、デバイスが最初に出荷されたときに利用可能だったバージョンに留まっています。
-
-デバイスが実行している WebView のバージョンを調べるには、Chrome Dev Tools を使用してアプリケーションを検査する際に、コンソールに`window.navigator.userAgent`を記録してください。
-
-## デスクトップブラウザ
-
-Ionic はウェブ技術をベースにしているため、モバイルデバイスと同じようにデスクトップブラウザーでも動作します。デスクトップのレイアウトについては、[クロスプラットフォーム](../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** |   70+    |   63+    |    ✔     |    ✔     |
-|  **IE 11**  |  **X**   |  **X**   |  **X**   |  **X**   |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
deleted file mode 100644
index aeb6e50d5c6..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/glossary.md
+++ /dev/null
@@ -1,559 +0,0 @@
----
-title: 用語集
----
-
-<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>{' '}
-    は、Google の Android Platform の開発をする開発者向けに作られたソフトウェア開発キットです。 Android
-    アプリケーションのビルド、テスト、デバッグ用のツールが含まれています。
-  </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>{' '}
-    は、ネイティブ Android アプリ開発のための正式な統合開発環境（IDE）である。
-  </p>
-</section>
-
-<section id="autoprefixer">
-  <a href="#autoprefixer">
-    <h3>Autoprefixer</h3>
-  </a>
-  <p>
-    <a href="https://github.com/postcss/autoprefixer" target="_blank">
-      Autoprefixer
-    </a>{' '}
-    は、ベンダー固有のプレフィックスを手書きの Sass/CSS コードに追加するツールです。 これにより、作成する標準化された
-    CSS ルールが、サポートするすべてのブラウザに確実に適用されます。 たとえば、autoprefixer
-    を使用すると、さまざまなブラウザで使用されるすべての flexbox 構文を知る必要がなく、
-    <code>display: flex;</code> と記述するだけで済み、かつ自動的に正しくCSSに差し込まれます。
-  </p>
-</section>
-
-<section id="bundling">
-  <a href="#bundling">
-    <h3>Bundling</h3>
-  </a>
-  <p>
-    バンドルとは、アプリケーションの依存関係（自分で書いたコードと任意にインストールされている npm
-    モジュール）を取得し、 コンパイル/トランスパイルすることで一つのファイルに落とし込むプロセスです。
-  </p>
-</section>
-
-<section id="capacitor">
-  <a href="#capacitor">
-    <h3>Capacitor</h3>
-  </a>
-  <p>
-    <a href="https://capacitorjs.com/" target="_blank">
-      Capacitor
-    </a>{' '}
-    は、web ベースのアプリケーションをネイティブの iOS、Android、Electron、web上で実行できるようにするオープンソースの
-    クロスプラットフォームアプリランタイムです。 「ネイティブのプログレッシブ Web
-    アプリケーション」を示すこれらのアプリはとても参考になり、
-    それらは従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitor は Ionic
-    社によって作られ、活発に開発/サポートされています。
-  </p>
-</section>
-
-<section id="cli">
-  <a href="#cli">
-    <h3>CLI</h3>
-  </a>
-  <p>
-    CLI、または <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface
-    はプログラムと互いに作用し合う、 テキストベースのインターフェースです。Mac
-    ユーザの共通のコマンドラインアプリケーションは Terminal アプリケーションであり、Windows
-    ユーザによく使われるものはコマンドプロンプトです。 Ionic コミュニティでよく使われるものは、次に示すこの{' '}
-    <a href="https://ionicframework.com/docs/v1/cli/">Ionic's CLI</a> というターミナルです。Ionic's CLI は、
-    アプリケーションのプロダクションビルドの生成や、開発用のサーバーの起動、
-    <a href="https://ionic.io/appflow" target="_blank">
-      Ionic の商用サービス
-    </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>{' '}
-    は JavaScript の標準化団体が定義した API の集合です。彼らは JavaScript のモジュールと
-    パッケージの標準を定義しました。
-  </p>
-</section>
-
-<section id="cordova">
-  <a href="#cordova">
-    <h3>Cordova</h3>
-  </a>
-  <p>
-    <a href="https://cordova.apache.org" target="_blank">
-      Apache Cordova
-    </a>{' '}
-    は、標準の HTML/CSS/JS
-    を本格的なネイティブアプリケーションに変換する、オープンソースのモバイルアプリケーション開発用フレームワークです。
-    実機のカメラや加速度計などのネイティブの機能にアクセスする JavaScript API を提供します。 Cordova
-    は、ウェブアプリケーションを iOS、Android、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) は、サーバがクライアントから Web 資産へのアクセスを制御するメカニズムです。 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>
-    デコレータは、関数を返す式です。既存の関数を使用して、その動作を拡張できます。 TypeScript では、<i>クラス</i> や{' '}
-    <i>パラメータ</i> を装飾することもできます。
-    <strong>クラス</strong> を装飾すると、そのコンストラクタの動作がラップおよび拡張されます。 つまり、デコレータはコンストラクタが呼び出されるといくつかの機能を追加し、独自のコンストラクタを返します。
-    <strong>パラメータ</strong> を修飾すると、 そのパラメータに渡される引数がラップされます。
-    デコレータは、引数がメソッドに渡されると機能を追加し、独自の引数を返します。
-  </p>
-</section>
-
-<section id="es5">
-  <a href="#es5">
-    <h3>ES5</h3>
-  </a>
-  <p>
-    ES5 とは EcmaScript 5th Edition のことです。 簡単に言えば、ES5 は今日開発者が最もよく知っている JavaScript
-    のバージョンのことです。
-  </p>
-</section>
-
-<section id="es2015-es6">
-  <a href="#es2015-es6">
-    <h3>ES2015/ES6</h3>
-  </a>
-  <p>
-    このバージョンの JavaScript には、クラス、モジュール、イテレーター、Promise など、
-    広範囲の新機能が導入されています。Evergreen のブラウザ(Chrome、Safari、Firefox、Edge)は ES6
-    を完全にサポートしていますが、古いブラウザで ES6 の機能を使うには、<a href="#babel">Babel</a> や
-    <a href="#typescript">TypeScript</a> のようなツールが ES6 のコードを ES5 に<a href="#transpiler">変換</a>
-    する必要があります。
-  </p>
-</section>
-
-<section id="es2016-es7">
-  <a href="#es2016-es7">
-    <h3>ES2016/ES7</h3>
-  </a>
-  <p>
-    このバージョンの JavaScript は、<code>Array.includes</code> や
-    指数演算子を含む多くの新機能を言語に追加した。このバージョンのJavaScriptは、すべてのEvergreenのブラウザ(Chrome、Safari、Firefox、Edge)で
-    完全にサポートされています。
-  </p>
-</section>
-
-<section id="es2017-es8">
-  <a href="#es2017-es8">
-    <h3>ES2017/ES8</h3>
-  </a>
-  <p>
-    このバージョンの JavaScript は最新の標準です。これは新しい公式規格になる前の最終段階にある。
-    この仕様には、Async/Await(既に全ての Evergreen のブラウザ上で可)と共有メモリ/アトミックが含まれています。
-  </p>
-</section>
-
-<section id="genymotion">
-  <a href="#genymotion">
-    <h3>Genymotion</h3>
-  </a>
-  <p>
-    Genymotion はサードパーティーの Android エミュレータです。 非常に高速で、Android
-    上でアプリを素早くテストするのに便利だ。 詳しくは、Genymotion の
-    <a href="../developing/tips#using-genymotion-android">リソースのセクション</a>を参照してください。
-  </p>
-</section>
-
-<section id="git">
-  <a href="#git">
-    <h3>Git</h3>
-  </a>
-  <p>
-    <a href="https://git-scm.com/" target="_blank">
-      Git
-    </a>{' '}
-    は、コードを管理するための分散バージョン管理システムです。これにより、開発チームはコードの競合を引き起こすことなく、
-    同じプロジェクトのコードに貢献できます。
-  </p>
-</section>
-
-<section id="gulp">
-  <a href="#gulp">
-    <h3>Gulp</h3>
-  </a>
-  <p>
-    <a href="http://gulpjs.com/" target="_blank">
-      Gulp
-    </a>{' '}
-    は、アプリケーションをビルドするためのタスクを実行するために使用されるツールです。一般的なビルドタスクには、{' '}
-    <a href="#es2015-es6">ES6</a> から <a href="#es5">ES5</a>, <a href="#sass">Sass</a> から CSSへの変換、
-    コードの縮小、ファイルの連結などがあります。
-  </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>{' '}
-    はモジュールの概念を JavaScript にそのまま持ち込んだものになります。
-    モジュールでは、クラスと変数はグローバルスコープ内にないため、使用するには明示的にプロジェクトにインポートする必要があります。
-    これにより、コードがどこから来ているのかを理解しやすくなり、機能のモジュール化と区分化が進みます。
-  </p>
-</section>
-
-<section id="ionicons">
-  <a href="#ionicons">
-    <h3>Ionicons</h3>
-  </a>
-  <p>
-    <a href="https://ionic.io/ionicons/" target="_blank">
-      Ionicons
-    </a>{' '}
-    は Ionic社によって作成・利用されているオープンソースのアイコンのセットです。 1:1 で iOS
-    とマテリアルデザインのアイコンと、よく使われるソーシャル/アプリケーションのアイコンを含みます。 Ionicons
-    はデフォルトで Ionic ディストリビューションに含まれますが、任意のプロジェクトでも使うことが出来ます。
-  </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>{' '}
-    は、実際にブラウザ上でアプリケーションのテストを実行するテストランナーです。任意のテストフレームワークで書かれたテストケースを、
-    実際にブラウザで実行します。Karma はもともと Angular 1 用に書かれたものです。
-  </p>
-</section>
-
-<section id="module">
-  <a href="#module">
-    <h3>Module</h3>
-  </a>
-  <p>
-    JavaScript のモジュールは、小さく独立しており、再利用可能なピースか互いに分離したコードであり、
-    グローバルスコープです。
-  </p>
-</section>
-
-<section id="monorepo">
-  <a href="#monorepo">
-    <h3>Monorepo</h3>
-  </a>
-  <p>
-    A <strong>monorepo</strong> は複数のプロジェクトを持つ単一のgit リポジトリです。利点としては、よりシンプルな構成、
-    ツールと依存関係の共有、チームメイトとのより良いコラボレーションが挙げられます。
-  </p>
-</section>
-
-<section id="livereload">
-  <a href="#livereload">
-    <h3>Live Reload</h3>
-  </a>
-  <p>
-    <strong>Live Reload</strong> (or <strong>live-reload</strong>) は、アプリケーションの変更を検出すると、
-    自動的にブラウザまたは <a href="../core-concepts/webview">Web View</a>{' '}
-    をリロードするツールです。場合によっては、ウィンドウ全体をリロードしなくても、
-    アプリケーションの一部を置き換えることができます。ライブリロード には実行中の開発サーバーが必要なので、Web View
-    にはデプロイされたファイルを単に読むのではなく、URLをロードする必要があるため、別のデバイスでライブリロードを使用するのは難しいかもしれません。詳しくは{' '}
-    <a href="../cli/livereload">Live Reload docs</a> を御覧ください。
-  </p>
-</section>
-
-<section id="node">
-  <a href="#node">
-    <h3>Node</h3>
-  </a>
-  <p>
-    <a href="https://nodejs.org/" target="_blank">
-      Node
-    </a>{' '}
-    は、サーバサイドで JavaScript を書くことができるランタイム環境です。 加えて、Node は Web
-    サービスに使用されるだけでなく、<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>{' '}
-    は <a href="#node">node</a> のパッケージマネージャです。これにより、開発者はノードモジュールをインストール、
-    共有、およびパッケージ化できます。Ionic は npm からいくつかの依存関係と一緒にインストールすることができます。
-  </p>
-</section>
-
-<section id="observable">
-  <a href="#observable">
-    <h3>Observable</h3>
-  </a>
-  <p>
-    Observable はイベントを発生(または通知)させるオブジェクトです。
-    オブザーバは、これらのイベントを監視し、イベントが受信されたときに何かを実行するオブジェクトです。
-    これらが一緒になって、非同期プログラミングに使用できるパターンを作成します。
-  </p>
-</section>
-
-<section id="package-id">
-  <a href="#package-id">
-    <h3>Package ID</h3>
-  </a>
-  <p>
-    Apple 社が <strong>Bundle ID</strong> と呼び、Android 社が <strong>Application ID</strong> と呼ぶ
-    <strong>Package ID</strong> は、App Store/Play Store に公開されたアプリを識別するために使用されます。 これは
-    <a href="https://en.wikipedia.org/wiki/Reverse_domain_name_notation" target="_blank">
-      逆 DNS 表記
-    </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>{' '}
-    は、ブラウザに機能を追加し、ブラウザの違いを標準化する少しのコードです。これは <a href="#shim">shim</a>{' '}
-    と似ていますが、 shim に独自の API がある場合には、ブラウザに実装されていることを期待する API として polyfill
-    を使用します。
-  </p>
-</section>
-
-<section id="protractor">
-  <a href="#protractor">
-    <h3>Protractor</h3>
-  </a>
-  <p>
-    <a href="https://angular.github.io/protractor/#/" target="_blank">
-      Protractor
-    </a>{' '}
-    Angular チームが開発したテストフレームワークです。Protractor は、エンドツーエンドのテストのために、 Karma
-    のようなテストランナーと一緒に使うことができます。テストランナーを使用すると、コードの品質を高速かつプログラム的に検証できます。
-  </p>
-</section>
-
-<section id="sass">
-  <a href="#sass">
-    <h3>Sass</h3>
-  </a>
-  <p>
-    Sass は CSS にコンパイルされるスタイルシート言語で、Ionicで使用されています。 Sass は CSS に似ています:{' '}
-    <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_" target="_blank">
-      変数
-    </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>
-    Shim は、ブラウザ間で API を正規化するコードです。 Shim は、エンドユーザーからブラウザ固有の実装を隠すような独自の
-    API を持つことができます。
-  </p>
-</section>
-
-<section id="transpiler">
-  <a href="#transpiler">
-    <h3>Transpiler</h3>
-  </a>
-  <p>
-    トランスパイル
-    は、実行前にコードをある言語から別の言語に変換するプロセスです。一般的に、トランスパイルは高級言語を別の高級言語に変換します。
-    Ionic Framework の最も一般的な <em>トランスパイル</em>は、<a href="#es2015-es6">ES2015/ES6</a>(<a href="#typescript">
-      TypeScript
-    </a>) から <a href="#es5">ES5</a>(従来のJavaScript)への変換です。
-  </p>
-</section>
-
-<section id="typescript">
-  <a href="#typescript">
-    <h3>TypeScript</h3>
-  </a>
-  <p>
-    <a href="http://www.typescriptlang.org" target="_blank">
-      TypeScript
-    </a>{' '}
-    は JavaScript のスーパーセットであり、{' '}
-    <a href="http://www.typescriptlang.org/Handbook#basic-types" target="_blank">
-      型宣言
-    </a>{' '}
-    and{' '}
-    <a href="http://www.typescriptlang.org/Handbook#interfaces" target="_blank">
-      インターフェース
-    </a>
-    などの多くの機能を追加した JavaScript を提供することを意味します。Ionic は TypeScript で構築されていますが、Ionic アプリの構築において
-    TypeScript の使用は完全にオプショナルです。
-  </p>
-</section>
-
-<section id="unit-tests">
-  <a href="#unit-tests">
-    <h3>Unit Tests</h3>
-  </a>
-  <p>
-    ユニットテストとその実行は、小さなコードをテストして、それらが期待どおりに動作するかどうかを確認する方法です。
-    ユニットテストのフレームワークには、Jasmine、Mocha、QUnit など、数多く存在します。
-  </p>
-</section>
-
-<section id="webpack">
-  <a href="#webpack">
-    <h3>Webpack</h3>
-  </a>
-  <p>
-    <a href="https://webpack.github.io/" target="_blank">
-      Webpack
-    </a>{' '}
-    は、JavaScript モジュールとその他のアセットを一緒にバンドルします。
-    これを使用して、必要なときにのみ読み込まれる単一の、または複数の「チャンク」を作成できます。 Webpack
-    を使うと、多くのファイルや依存関係を1つのファイルか、他のタイプにまとめることができます。
-  </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) は Web の標準化団体です。業界のリーダーと一般市民が協力して{' '}
-    <a href="https://www.w3.org/standards/" target="_blank">
-      Web 標準
-    </a>
-    を開発します。Web 標準とは、Web プラットフォームを定義するプロトコル、仕様、および技術のセットです。
-  </p>
-</section>
-
-<section id="xcode">
-  <a href="#xcode">
-    <h3>Xcode</h3>
-  </a>
-  <p>
-    <a href="https://developer.apple.com/xcode/" target="_blank">
-      Xcode
-    </a>{' '}
-    は Apple 社のオペレーティングシステム(macOS、iOS、watchOS、tvOS) 上でソフトウェア開発を行うための Apple
-    IDE(統合開発環境)であり、 他の言語やプラットフォーム用の拡張機能を備えています。 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md
deleted file mode 100644
index e25b7cbb83b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/release-notes.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: リリースノート
----
-
-import ReleaseNotes from '@components/page/reference/ReleaseNotes';
-
-<ReleaseNotes />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
deleted file mode 100644
index 0b80d5dc7e9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/support.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: サポートポリシー
----
-
-<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>
-
-## コミュニティメンテナンス
-
-Ionic Framework は当初から 100%オープンソース(MIT)で、今後もオープンソースとして公開されます。開発者は、Ionic のコミュニティメンテナンス戦略を通して、Ionic が彼らのクロスプラットフォームアプリにとって正しい選択であることを保証することができます。Ionic チームは定期的に新しいリリースとバグ修正を提供しており、コミュニティからのプルリクエストを歓迎しています。
-
-## 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    |      Beta      |     TBD      |       TBD        |        TBD        |
-|   V6    |   **Active**   | Dec 8, 2021  |       TBD        |        TBD        |
-|   V5    | End of Support | 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     |           v14           |         v15.x^          |    4.6+    |
-|    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/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
deleted file mode 100644
index af90bf12ced..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/reference/versioning.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# バージョニング
-
-<!-- TOC goes here -->
-
-Ionic Framework は<a href="https://semver.org/" target="_blank">Semantic Versioning (SemVer)</a>の形式: <code>メジャー.マイナー.パッチ.</code>に従います。互換性のない API の変更は<code>メジャー</code>バージョン、後方互換性のある機能を追加する時は<code>マイナー</code>バージョン、後方互換性のあるバグ修正は<code>パッチ</code>バージョンをあげます。
-
-## リリーススケジュール
-
-### メジャーリリース
-
-メジャーリリースは、API に重大な変更が加えられたときに公開されます。メジャーリリースはおよそ**6 ヶ月**ごとに行われ、重大な変更が含まれる可能性があります。フィードバックを得るために、いくつかのリリース候補がメジャーリリースの前に公開されます。何が変更されているのか、またその理由がリリース候補に含まれる予定です。
-
-### マイナーリリース
-
-マイナーリリースは、新しい機能が追加されたり、API が変更されたりした場合に公開されます。私たちは、リリースに自信を持てるよう、すべての変更点を徹底的にテストしますが、新しいコードには新しい問題が発生する可能性があります。マイナーバージョンのリリースは、機能追加や API の変更があった場合、**6 週間ごと**に行う予定です。
-
-### パッチリリース
-
-パッチリリースは、バグフィックスが含まれているが、API が変更されておらず、破壊的な変更が導入されていない場合に公開されます。私たちは新しいパッチバージョンを**毎週**リリースする予定ですが、予定より早く、または遅くリリースする必要がある場合があります。パッチリリースでは、新機能による新たな問題を発生させることなく、既存のコードを修正できるように、パッチリリースは常にマイナーリリースより前に公開されます。
-
-## Changelog
-
-注目すべき変更点の一覧は changelog で確認することができます。これには、
-各リリースでのすべてのバグ修正と新機能の一覧が含まれています。
-
-<a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md" target="_blank">
-  changelog
-</a>
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/assets.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/assets.md
deleted file mode 100644
index 20a68326ab6..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/assets.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/code.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/code.md
deleted file mode 100644
index 7196a738e52..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/code.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/designer.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/designer.md
deleted file mode 100644
index f026bd5e459..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/designer.md
+++ /dev/null
@@ -1,179 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/faq.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/faq.md
deleted file mode 100644
index 49a116ceabd..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/faq.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/routing-and-navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/routing-and-navigation.md
deleted file mode 100644
index ac666208502..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/routing-and-navigation.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/using-native-functionality.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/using-native-functionality.md
deleted file mode 100644
index 41e0f4089e6..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/guides/using-native-functionality.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/running.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/running.md
deleted file mode 100644
index 8636ae2f597..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/running.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/settings.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/settings.md
deleted file mode 100644
index 3adc2e9bd06..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/settings.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
deleted file mode 100644
index d9a344ebeec..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/installation.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Studio のインストール
-
-Ionic Studio の最新版のダウンロードはこちらです。 [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads).
-
-## 必要な環境
-
-- macOS あるいは Windows 10
-- [Node &amp; npm](../../intro/environment.md#node-npm) がセットアップされている必要があります。
-- オプションとして、バージョン管理のために [Git](../../intro/environment.md#git) をインストール
-
-## インストール
-
-Ionic Studio のダウンロードリンクは Ionic ダッシュボードの [downloads section](https://dashboard.ionicframework.com/personal/downloads) にあります。
-
-まず Ionic Studio をダウンロードしインストーラーを実行、ウィザードに従います。 Ionic Studio には依存するツールがあり、それらは起動時にインストールやアップデートが自動的に行われます。
-
-Ionic Studio は新しいバージョンがリリースされると自動的にアップデートされますが、上記ダウンロードリンクよりインストールしなおすことも可能です。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/native.md
deleted file mode 100644
index 392c8137d73..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/setup/native.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/start.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/start.md
deleted file mode 100644
index ea562de7458..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/start.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/support.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/support.md
deleted file mode 100644
index 591c5983d5a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/support.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/terminal.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/terminal.md
deleted file mode 100644
index 83556ffdde2..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/terminal.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/theming.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/theming.md
deleted file mode 100644
index adc47a29e9c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/studio/theming.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md
deleted file mode 100644
index 4528b69ec18..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/techniques/security.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-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 a basic sanitization implementation for the components it provides. However, it is not a comprehensive solution. It is up to the developer to make sure all data that is passed 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).
-
-## Enabling Custom HTML Parsing via `innerHTML`
-
-`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` can accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. This behavior is disabled by default which means values passed to the affected components will always be interpreted as plaintext. Developers can enable this custom HTML behavior by setting `innerHTMLTemplatesEnabled: true` in the [IonicConfig](../developing/config#ionicconfig).
-
-## 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page1.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page1.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 1
-
-This is Testing page 1, Get to Testing Page 2 [here](page2.md).
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page2.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/test/page2.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 2
-
-This is Testing page 2, Get to Testing Page 1 [here](page1.md).
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
deleted file mode 100644
index 57296b57d65..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/advanced.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: 高度なカスタマイズ
-sidebar_label: 高度なカスタマイズ
-initialTab: 'preview'
-inlineHtmlPreviews: true
----
-
-import CodeColor from '@components/page/theming/CodeColor';
-
-<head>
-  <title>高度なカスタマイズ: 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 ベースのテーマ設定では、CSS ファイルをロードするか、いくつかの CSS プロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。
-
-## `theme-color` Meta
-
-メタタグの `theme-color` は、ブラウザがページや周囲のインターフェイスの表示をカスタマイズするために使用する色を示します。この種類の meta タグはメディアクエリも受け付けることができ、開発者はライトモードとダークモードの両方でテーマカラーを設定することができます。
-
-メタタグ `theme-color` の `content` 値には、有効な <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noopener noreferrer">CSS Color</a> を含める必要があり、CSS Variables を含めることはできません。
-
-:::note
-`Theme-color`メタは、Web ブラウザまたは PWA として実行するときにインターフェースのテーマを制御し、アプリが Capacitor または Cordova を使用してデプロイされるときには影響しません。ステータスバーの下の領域をカスタマイズしたい場合は、[Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar)を使用することをお勧めします。
-:::
-
-以下の例では、iOS 15 でブラウザのインターフェイスをスタイルするために `theme-color` を使用する方法を示しています。
-
-```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) |
-
-macOS Monterey 以降の Safari では、`theme-color`メタを使用してツールバーをカスタマイズすることもできます。
-
-iOS 15 と macOS の Safari は自動的に適切なテーマカラーを決定しますが、テーマをより細かく制御したい場合はこの meta タグを追加すると便利です。
-
-ブラウザのインターフェイスに干渉するため、ブラウザが使用しない色の小さなサブセットがあります。例えば、`content="red"`と設定すると、macOS の Safari では、ツールバーの赤い閉じるボタンと干渉してしまうため、動作しません。このような状況に遭遇した場合は、色の選択を少し変えてみてください。
-
-:::note
-ブラウザは `manifest.json` に `theme` よりも `theme-color` メタが存在する場合、それを優先します。
-:::
-
-詳しくは、<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> をご覧ください。
-
-## グローバル変数
-
-テーマセクションのアプリケーション変数とステップ変数は、アプリケーションの色を変更するのに便利ですが、しばしば、複数のコンポーネントで使用される変数が必要になることがあります。以下の変数は、コンポーネント間で共有され、グローバルなパディング設定などを変更することができます。
-
-### 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 |
-
-## 既知の変数の制限
-
-### The Alpha Problem
-
-16 進数カラーのアルファ使用については、まだ完全な<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility" target="_blank">ブラウザサポート</a>はありません。<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()" target="_blank">rgba()</a> 関数は、`R, G, B, A` (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、`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 はいくつかのコンポーネントで不透明度（アルファ）を ​​ 持つ色を使用します。これが機能するためには、それらのプロパティは RGB フォーマットで提供されなければなりません。末尾にバリエーションがあるプロパティのいずれかを変更する場合、 `-rgb` で終わる括弧なしのカンマ区切り形式でも提供されることが重要です。以下は、テキストと背景色を変更するための例です。
-
-```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;
-}
-```
-
-RGB 形式の色は hex プロパティとまったく同じ色ですが、現在は `rgba()` で使用できることに注意してください。例えば、`--ion-text-color-rgb` は以下のように利用できます。
-
-```css
-body {
-  color: rgba(var(--ion-text-color-rgb), 0.25);
-}
-```
-
-### Variables in Media Queries
-
-[メディアクエリ](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) の CSS 変数は現在サポートされていませんが、この問題を解決する[custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) と [custom environment variables](https://drafts.csswg.org/css-env-1/)を追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。
-
-```css
-:root {
-  --breakpoint: 600px;
-}
-
-@media (min-width: var(--breakpoint)) {
-  /* Doesn't work :( */
-}
-```
-
-### CSS カラー変数の変更
-
-Sass の組み込み関数を使用して簡単に色を変更することは可能ですが、現在のところ CSS 変数で設定された色を変更するのはそれほど簡単ではありません。これは、CSS で [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) チャネルまたは HSL チャネルを分割してそれぞれの値を変更することで実現できますが、複雑で機能が不足しています。
-
-正確に説明します。基本的に、Sass などの CSS プリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、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> |
-
-ただし、CSS 変数は実行時に設定でき、より動的であるため、現時点では単純な関数を使用して操作することはできません。
-
-これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionic では、これが[各色にバリエーションがある](colors.md#layered-colors)理由であり、テーマ設定に[stepped colors](themes.md#stepped-colors)が必要な理由でもあります。
-
-これを可能にする[color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187)を議論している草案と Issues はこちらからご覧いただけます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
deleted file mode 100644
index 32b6efd71a9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/basics.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: テーマの基本
-sidebar_label: 基本的な考え方
----
-
-import ColorAccordion from '@components/page/theming/ColorAccordion';
-
-<head>
-  <title>テーマ | 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 は、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。Ionic アプリの Theming は今まで以上に簡単です。フレームワークは CSS で構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。
-
-## 配色
-
-Ionic には 9 つのデフォルトカラーがあり、多くのコンポーネントの色を変更するのに利用できます。各色は実際には `shade` や `tint` などの複数のプロパティの集まりで、Ionic 全体で使用されます。
-
-色を変更する際には、関連するすべてのプロパティを設定することが重要です。これは[Color Generator](color-generator.md)ツールで簡単に行えますが、必要であればこれらは手動で記述することもできます。Ionic の色については、[Colors](colors.md)を参照してください。
-
-<ColorAccordion />
-
-## Platform Standards
-
-Ionic コンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを **Adaptive Styling** と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。
-
-Ionic は、2 つの **modes** をもっており、これらはプラットフォーム: `ios` と `md` に基づいてコンポーネントの外観がカスタマイズされます。各プラットフォームにはデフォルトモードがありますが、簡単に変更できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、[Platform Styles](platform-styles.md) をご覧ください。
-
-## CSS Variables
-
-Ionic コンポーネントは、 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS properties (variables)</a>を使ってテーマ化されています。CSS 変数は、動的な値を静的な CSS で利用することができます。これは今までは Sass のような CSS プリプロセッサを必要としていたものです。アプリケーションの外観は、[Ionic Variables](/docs/theming/css-variables#ionic-variables)のいずれかの値を変更することで簡単に変更できます。
-
-Ionic Framework のコンポーネントは、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank" rel="noopener noreferrer">CSS プロパティ（変数）</a>を使ってテーマ化されています。CSS 変数は、静的な言語に対して動的な値を追加するものです。これは、従来は Sass のような CSS プリプロセッサが必要だったものです。Ionic Framework が提供する[CSS Variables](css-variables.md)のいずれかの値を変更することで、アプリケーションの外観を簡単に変更することができます。
-
-## CSS Shadow Parts
-
-CSS Shadow Parts が追加され、Ionic Framework Shadow コンポーネントの完全なカスタマイズが容易になりました。これまで、 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer">Shadow DOM</a> を使用するコンポーネントは、シャドウ・ツリー内の要素を直接スタイル設定できませんでした。Shadow Parts が追加されたため、Shadow コンポーネントの内部要素のすべてのプロパティーに CSS 変数を使用する必要がなくなりました。パーツを使用した Ionic Framework コンポーネントのカスタマイズの詳細については、[CSS Shadow Parts](css-shadow-parts.md)ガイドを参照してください。
-
-## Branding
-
-Ionic は、ブランディングや配色にあったテーマとなるアプリケーションの配色を提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まですべてカスタマイズ可能です。ブランディングの詳細については、[Themes](themes.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
deleted file mode 100644
index 41dbce60f73..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/color-generator.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: カラージェネレーター
-hide_table_of_contents: true
-demoUrl: /docs/demos/color-generator/index.html
----
-
-import ColorGenerator from '@components/page/theming/ColorGenerator';
-
-<head>
-  <title>カラージェネレーター: Ionicアプリのカスタムカラーをつくる</title>
-  <meta
-    name="description"
-    content="カラージェネレーターでAndroidやiOSアプリのUIにカスタムカラーパレットを作成しましょう。Ionic Frameworkを使用してカスタムテーマとシェードを生成する方法を学びます。"
-  />
-</head>
-
-アプリの UI にカスタムカラーパレットを作成します。色の 16 進数値を更新し、右のデモアプリで確認した後、生成されたコードを Ionic プロジェクトに直接コピー＆ペーストしてください。
-
-<ColorGenerator />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
deleted file mode 100644
index 822680c22e5..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/colors.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: 配色
-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 には、多くのコンポーネントの配色を変更するために使用できる 9 つのデフォルトカラーがあります。 それぞれの配色は、 `shade` と `tint` を含む複数のプロパティを持つコレクションであり、Ionic 全体で利用されます。
-
-デフォルトの配色を変更するために、 `color` 属性を使って任意の色を Ionic のコンポーネントに適用できます。以下の buttons はテキストと背景が `color` 属性に基づいて変更されていることに注目してください。button に `color` 属性がない時は、デフォルト値として `primary` の配色が適用されます。
-
-```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>
-```
-
-### 配色のレイヤードスタイル
-
-それぞれの配色は、これらのプロパティで構成されています: `base`, `contrast`, `shade`, と `tint` です。`base` と `contrast` の配色は `rgb` プロパティと同一の配色が求められます。 <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a> をご覧ください。この `rgb` の変数が必要な理由は [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。下のドロップダウンから選択することで、Ionic が提供するデフォルトの配色とそのバリエーションを確認することができます。
-
-<LayeredColorsSelect />
-
-## Modifying Colors
-
-配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、`secondary color` を <code-color mode="md" value="#006600"></code-color> に変更する時、以下の CSS プロパティが必要です。
-
-```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;
-}
-```
-
-`secondary` をボタンに適用した時、利用されるのはベースカラー <CodeColor color="#006600">#006600</CodeColor> だけではありません。`contrast color` <CodeColor color="#ffffff">#ffffff</CodeColor> はテキストに適用され、それに加えて `shade` <CodeColor color="#005a00">#005a00</CodeColor> と `tint` <CodeColor color="#1a751a">#1a751a</CodeColor> はボタンのステータスが変更された時に利用されます。
-
-:::note
-ベースカラーからバリエーションカラーを取得する方法がわからない？その場合、 [Color Generator](color-generator.md) をお試しください。これはすべてのバリエーションを計算し、アプリにコピー&ペーストできるコードを提供します！
-:::
-
-CSS 変数についてもっと詳しく知りたい時は [CSS Variables documentation](css-variables.md) をご覧ください。
-
-### 配色の追加
-
-カラーは、Ionic コンポーネントの 「color」 プロパティを設定するか、CSS を使用してスタイル設定することで、アプリケーション全体で使用できるように追加できます。新しいカラーを手動で追加する方法については、この後の 「New Color Creator」 を参照してください。コピーしてアプリケーションに貼り付ける新しいカラーのコードを簡単に生成する方法については、次の 「New Color Creator」 を参照してください。
-
-新しいカラーを追加するには、最初にルートのカラーのすべてのバリエーションの CSS 変数を定義します。たとえば、`favorite`という新しいカラーを追加するには、次の変数を定義します:
-
-```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;
-}
-```
-
-次に、これらの CSS 変数を使用する新しいクラスを作成します。クラスは、`.ion-color-{COLOR}` の形式で記述する**必要があります**。 `{COLOR}` は追加するカラーの名前です:
-
-```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);
-}
-```
-
-クラスを追加すると、color プロパティーをサポートする任意の Ionic コンポーネントでカラーを使用できるようになります。Ionic ボタンに`favorite`の色を使用する例を以下に示します。
-
-```html
-<ion-button color="favorite">Favorite</ion-button>
-```
-
-ルートで定義された CSS 変数は、CSS を使用して任意のエレメントのスタイル設定にも使用できます:
-
-```css
-div {
-  background: var(--ion-color-favorite);
-  color: var(--ion-color-favorite-contrast);
-}
-```
-
-CSS 変数の設定方法と使い方についての詳しい情報は [CSS Variables documentation](css-variables.md) をご覧ください。
-
-## New Color Creator
-
-名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色を Ionic プロジェクトで利用できます。
-
-<NewColorGenerator />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
deleted file mode 100644
index 0da15d50804..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-shadow-parts.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-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 は、開発者がシャドウツリー内の要素に CSS プロパティをスタイル設定することを可能にします。これは、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>コンポーネントをカスタマイズする際に非常に便利です。
-
-## なぜ Shadow Parts?
-
-Ionic Framework は、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a>の分散型セットです。Web Components は、スタイルとマークアップをカプセル化するために<a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer">Shadow DOM の仕様</a>に従っています。
-
-:::note
-Ionic Framework のコンポーネントは、すべての Shadow DOM コンポーネント**ではありません**。Shadow DOM コンポーネントの場合、その [component documentation](../components.md) の右上にバッジが表示されます。Shadow DOM コンポーネントの例としては、[button component](../api/button.md) があります。
-:::
-
-Shadow DOM は、スタイルがコンポーネントから漏れて、意図せずに他の要素に適用されるのを防ぐのに便利です。例えば、`ion-button` コンポーネントに `.button` クラスを割り当てています。Shadow DOM によるカプセル化がなければ、ユーザーが自分の要素に `.button` クラスを設定した場合、Ionic Framework のボタンスタイルを継承してしまうでしょう。ion-button` は Shadow コンポーネントであるため、これは問題ではありません。
-
-しかし、このカプセル化のために、スタイルは Shadow コンポーネントの内部要素に侵入することができません。つまり、Shadow コンポーネントがそのシャドウツリーの内部にある要素をレンダリングする場合、その内部要素を CSS で直接ターゲットにすることはできません。例として `ion-select` コンポーネントを使用すると、次のようなマークアップがレンダリングされます。
-
-```html
-<ion-select>
-  #shadow-root
-  <div class="select-text select-placeholder"></div>
-  <div class="select-icon"></div>
-</ion-select>
-```
-
-プレースホルダーのテキストとアイコン要素は `#shadow-root` の内部にあるため、以下の CSS はプレースホルダーのスタイル付けに **無効** です。
-
-```css
-/* Does NOT work */
-ion-select .select-placeholder {
-  color: blue;
-}
-```
-
-So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
-
-## Shadow Parts の説明
-
-Shadow Parts は、開発者がシャドウツリーの外側から、シャドウツリー内のスタイルを設定することを可能にします。これを行うには、[part](#exposing-a-part) を公開し 、[::part](#how-part-works) を使用してスタイルを設定する必要があります。
-
-### Parts の公開
-
-シャドウ DOM コンポーネントを作成する際、シャドウツリー内の要素に `part` 属性を割り当てることで、パートを追加することができます。これは Ionic Framework でコンポーネントに追加され、エンドユーザーからのアクションは必要ありません。
-
-引き続き、例として `ion-select` コンポーネントを使用し、マークアップは以下のように更新されます。
-
-```html
-<ion-select>
-  #shadow-root
-  <div part="placeholder" class="select-text select-placeholder"></div>
-  <div part="icon" class="select-icon"></div>
-</ion-select>
-```
-
-上記では、`placeholder`と`icon`という 2 つの Parts を表示しています。すべての Parts については、[select documentation](../api/select.md#css-shadow-parts) を参照してください。
-
-これらの Parts が公開されたことで、要素は [::part](#how-part-works) を使って直接スタイルを設定することができるようになりました。
-
-### How ::part works
-
-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">
-  `::part()`
-</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
-
-`ion-select` は、値が選択されていないときにテキストをスタイル付けするための `placeholder` Part を公開していることが分かっているので、次のようにカスタマイズすることができます。
-
-```css
-ion-select::part(placeholder) {
-  color: blue;
-  opacity: 1;
-}
-```
-
-`part` を使ったスタイリングでは、その要素で受け付けられる任意の CSS プロパティを変更することができます。
-
-part をターゲットにできることに加え、<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer">擬似要素</a>を明示的に露出させずにスタイル付けすることができます。
-
-```css
-ion-select::part(placeholder)::first-letter {
-  font-size: 22px;
-  font-weight: 500;
-}
-```
-
-Parts は、ほとんどの<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">擬似クラス</a>でも動作します。
-
-```css
-ion-item::part(native):hover {
-  color: green;
-}
-```
-
-:::note
-[ベンダープレフィックス擬似要素](#vendor-prefixed-pseudo-elements) と [構造擬似クラス](#structural-pseudo-classes) には、いくつかの既知の制限があります。
-:::
-
-## Ionic Framework の Parts
-
-Ionic Framework コンポーネントのすべての公開 Parts は、その API ページの「CSS Shadow Parts」の見出しで確認できます。すべてのコンポーネントとその API ページを表示するには、[Component documentation](../components.md) を参照してください。
-
-コンポーネントが Parts を持つためには、以下の条件を満たしている必要があります。
-
-- [Shadow DOM](../reference/glossary.md#shadow) コンポーネントであること。 [Scoped](../reference/glossary.md#scoped) または Light DOM コンポーネントの場合、子要素を直接対象とすることができる。コンポーネントが Scoped または Shadow の場合、[コンポーネントのドキュメントページ](../components.md) にその名前で表示されます。
-- これは子要素を含んでいます。例えば、`ion-card-header` は Shadow コンポーネントですが、すべてのスタイルはホストエレメントに適用されます。子要素を持たないので、Parts は必要ありません。
-- 子要素は構造的なものではありません。`ion-title` を含む特定のコンポーネントでは、子要素は内部要素を配置するために使用される構造的な要素です。構造的な要素をカスタマイズすることは、予期しない結果をもたらす可能性があるため、お勧めしません。
-
-:::note
-追加 parts の推奨を歓迎します。parts をリクエストする際は、<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> にできるだけ多くの情報を添えて作成してください。
-:::
-
-## 既知の制限
-
-### ブラウザサポート
-
-CSS Shadow Parts は最近のすべてのメジャーブラウザでサポートされています。ただし、一部の古いバージョンでは shadow parts がサポートされていません。アプリに parts を実装する前に、<a href="https://caniuse.com/#feat=mdn-css_selectors_part" target="_blank" rel="noopener noreferrer">ブラウザのサポート</a>が要件を満たしていることを確認してください。旧バージョンのブラウザのサポートが必要な場合は、引き続き [CSS Variables](../theming/css-variables.md) を使用してスタイリングすることをお勧めします。
-
-### ベンダープレフィックス擬似要素
-
-<a href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix" target="_blank" rel="noopener noreferrer">
-  Vendor prefixed
-</a> 擬似要素は、現時点ではサポートされていません。例えば、`::-webkit-scrollbar`擬似要素のようなものです。
-
-```css
-/* Does NOT work */
-my-component::part(scroll)::-webkit-scrollbar {
-  background: green;
-}
-```
-
-詳しくは <a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer">GitHub の Issue</a> をご覧ください。
-
-### 構造的な擬似クラス
-
-ほとんどの擬似クラスは Parts でサポートされていますが、<a href="https://www.w3.org/TR/selectors-4/#structural-pseudos" target="_blank" rel="noopener noreferrer">構造的な擬似クラス</a>はサポートされていません。動作しない構造的擬似クラスの例を以下に示します。
-
-```css
-/* Does NOT work */
-my-component::part(container):first-child {
-  background: green;
-}
-
-/* Does NOT work */
-my-component::part(container):last-child {
-  background: green;
-}
-```
-
-### Parts の連結
-
-擬似要素 `::part()` は追加の `::part()` にマッチすることができません。
-
-例えば、`my-component::part(button)::part(label)`は何もマッチしません。これは、そうすることで意図した以上の構造的な情報を露出してしまうからです。
-
-もし `<my-component>` の内部ボタンが `part="label => button-label"` のようなものを使って、ボタンの内部 Parts をパネル自身の part 要素マップに転送していた場合、 `my-component::part(button-label)` といったセレクタはボタンのラベルだけを選び、他のラベルを無視することになるでしょう。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
deleted file mode 100644
index 7e61f67348d..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/css-variables.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: CSS変数
----
-
-<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 のコンポーネントは、アプリケーションを簡単にカスタマイズできるように<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS 変数</a>を使用して構築されています。CSS 変数を使用すると、1 か所に保存している値を、他の複数の場所から参照できます。また、実行時に動的に CSS を変更することを可能にします（以前は CSS プリプロセッサが必要でした）。CSS 変数を使用すると、ブランディングやテーマに合わせて Ionic コンポーネントをオーバーライドすることが、これまでになく簡単になります。
-
-## 変数の設定
-
-### グローバル変数
-
-CSS 変数は、アプリケーションの `:root` セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionic が提供するグローバル変数の詳細については、[Ionic 変数](#ionic-variables)を参照してください。
-
-Ionic CLI を使用して Angular プロジェクトを開始すると Ionic のデフォルト変数を上書きすることができる `src/theme/variables.scss` が作成されます。
-
-```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;
-}
-```
-
-### コンポーネント変数
-
-特定のコンポーネントに CSS 変数を設定するには、そのセレクタの内側に変数を追加します。Ionic が提供するコンポーネントレベルの変数の詳細については、[Ionic Variables](#ionic-variables) を参照ください。
-
-```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;
-}
-```
-
-### JavaScript で変数を設定
-
-CSS 変数は[setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) を使って JavaScript で変更することもできます:
-
-```js
-const el = document.querySelector('.fancy-button');
-el.style.setProperty('--background', '#36454f');
-```
-
-## 変数を利用する
-
-### CSS での使い方
-
-[CSS の var() 関数](https://developer.mozilla.org/en-US/docs/Web/CSS/var) を使うと、失敗した時の設定とともに CSS 変数を取得することができます。 例えば、以下の例では `--background` プロパティに `--charcoal` 変数を利用しますが、もし値を取得できなければ代わりに `#36454f` が適用されます。
-
-```css
-.fancy-button {
-  --background: var(--charcoal, #36454f);
-}
-```
-
-### JavaScript での使い方
-
-CSS 変数の値は、[getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue) を使用して JavaScript で読み取ることができます:
-
-```js
-const el = document.querySelector('.fancy-button');
-const color = el.style.getPropertyValue('--charcoal');
-```
-
-## Ionic 変数
-
-### Component 変数
-
-Ionic は、`--background` や `--color` のようなコンポーネントレベルの変数を提供します。コンポーネントが受け入れるカスタムプロパティについては、 [API reference](../api.md) の `CSS Custom Properties` セクションをご覧ください。たとえば、[Button Custom Properties](../api/button.md#css-custom-properties) をご覧ください。
-
-### グローバル変数
-
-アプリケーション全体のテーマを簡単に変更できるように Ionic が提供するグローバル変数がいくつかあります。すべてのグローバル変数のリストは [Colors](colors.md), [Themes](/docs/theming/themes) and [Advanced Theming](advanced.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
deleted file mode 100644
index a4977edddd7..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/dark-mode.md
+++ /dev/null
@@ -1,327 +0,0 @@
----
-title: ダークモード
-initialTab: 'preview'
-inlineHtmlPreviews: true
----
-
-import Codepen from '@components/global/Codepen';
-
-<head>
-  <title>ダークモード 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 を使えば、ダークカラーのスキームのサポートなど、アプリのテーマを簡単に変更できます。ネイティブアプリでのダークモードのサポートが拡大していることから、開発者はユーザーの好みをサポートするためにアプリにダークモードを追加する流れがあります。
-
-## Media Query の利用
-
-ダークモードを有効にするためにはまず、 [ユーザの設定してるカラースキーマを利用する media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) を使用します。このメディアクエリは、ユーザーのデバイスのシステム設定に接続され、ダークモードが有効になっている場合はテーマを適用します。
-
-```css
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* dark mode variables go here */
-  }
-}
-```
-
-現在、media query `prefers-color-scheme` は[限られたブラウザサポート](https://caniuse.com/#feat=prefers-color-scheme) であるため、一部のブラウザでは、このメディアクエリを使用してダークモードを適用することはできません。ただし、ダークモードは、 [CSS class fallback](#css-class-fallback) を使用して適用することもできます。
-
-## CSS Class Fallback
-
-メディアクエリをサポートしていないデバイスの代替メソッドとして、CSS セレクタをスタイル設定し、クラスをドキュメントの 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 */
-}
-```
-
-`body.dark` セレクタをターゲットとする変数を使用する場合は、アプリケーション内の `<body>` にクラスを追加するだけです。これはアプリケーションが構築されているフレームワークによってさまざまな方法で行うことができます。
-
-この例では、変数は両方の場所にある必要があります。2 つの場所に変数を設定しないようにするために、[JavaScript を使用](#combining-with-javascript) することができます。
-
-## JavaScript との統合
-
-CSS 変数を一度だけ記述して、複数の場所で更新する必要がないようにするために、フォールバックとクラスを JavaScript を使用して `prefers-color-scheme` メディアクエリーの値をチェックし、プリファレンスが `dark` の場合は `dark` クラスを追加することで統合できます。CSS は次のようなものになるでしょう:
-
-```css
-body.dark {
-  /* Dark mode variables go here */
-}
-```
-
-上記の変数は `body.dark` セレクタにのみあり、 `prefers-color-scheme` メディアクエリは削除されています。
-
-### 自動的にダークモードを有効にする
-
-JavaScript では、ドキュメントが [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) を使用してメディアクエリと一致するかどうかをチェックすることによって、 `dark` クラスを `<body>` に追加できます。これにより、ユーザの設定に基づいてダークモードが動作するようになります。
-
-```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" />
-
-### 手動でダークモードをトグルする
-
-アプリケーションがロードされたとき、およびメディアのクエリが変更されたときに、 `toggleDarkTheme()` を呼び出すことに加えて、 `toggleDarkTheme()` 関数は、ユーザーがトグルを変更し、ライトテーマとダークテーマを切り替えるときなどに、アプリケーションによって呼び出すことができます:
-
-```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" />
-
-## システム UI コンポーネントを調整する
-
-ダークテーマを開発するときに、特定のシステム UI コンポーネントがダークモードに正しく調整されていないことがあります。これを修正するには、 `color-scheme` を指定する必要があります。クロスブラウザのサポートの詳細については、 <a href="https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme" target="_blank">ブラウザのカラースキーマの設定</a> を参照してください。
-
-ネイティブコンポーネントだけではなく、主に Ionic コンポーネントを使用している場合に、 `color-scheme` はスクロールバーなどのアプリケーションの側面にも影響します。 `color-scheme` を使用するには、次の HTML をアプリケーションの`head`に追加する必要があります:
-
-```html
-<meta name="color-scheme" content="light dark" />
-```
-
-これにより、ページは、どのカラースキームでレンダリングするのが快適かを示すことができます。また、次の CSS を追加して、要素ごとに設定することもできます。
-
-```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) |
-
-より詳しい `color-scheme` の情報については https://web.dev/color-scheme/ をご覧ください。
-
-:::note
-`color-scheme` はキーボードに反映されません。キーボードのダークモードについての詳しい情報は [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 ダークモード
-
-Ionic には、アプリを実行しているデバイスに基づいてダークモードを取得するために使用する変数の推奨テーマがあります。次の部分に分けることができます:
-
-1. すべてのデフォルトの [modes](platform-styles.md#ionic-modes) のデフォルトの [Ionic colors](colors.md) を変更して `body.dark` セレクタのダークモードの背景色に対応します。
-1. `ios` デバイスでダークテーマの変数を設定します。
-1. `md` デバイスでダークテーマの変数を設定します。
-
-次のコードをコピーしてアプリに貼り付けると、Ionic のダークテーマを取得できます。 [JavaScript との統合](#combining-with-javascript) セクションで説明したように、JavaScript を使用して `dark` クラスをドキュメント body に追加します。 `dark` クラスがドキュメント本文に追加されるまで、ダークモードは有効になりません。
-
-:::note
-さらにカスタマイズするために追加できるその他の変数など、変更する変数の詳細については [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/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
deleted file mode 100644
index 2f3be9a87de..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/platform-styles.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: プラットフォームの外観
----
-
-<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 は、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。
-
-## Ionic Modes
-
-Ionic は **modes** を使ってコンポーネントの外観をカスタマイズします。それぞれの **プラットフォーム** はデフォルトの **mode** を持っていますが、これはグローバルの [config](../developing/config.md) で上書き設定をすることができます。次の表は、それぞれの **プラットフォーム** に追加されているデフォルトの **mode** を示しています。
-
-| プラットフォーム | Mode  | 概要                                                                                                                                          |
-| ---------------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ios`            | `ios` | iPhone, iPad, もしくは iPod で表示する時は [iOS styles](https://www.apple.com/ios) が適用されます。                                           |
-| `android`        | `md`  | Android のデバイスから表示する時は [Material Design styles](https://material.io/guidelines/) が適用されます。.                                |
-| `core`           | `md`  | 上記のどのプラットフォームにも当てはまらないプラットフォームでは、 [Material Design styles](https://material.io/guidelines/) が適用されます。 |
-
-例えば、Android プラットフォームが利用されている時は `md` (Material Design) が標準で利用されます。 `<html>` エレメントに `class="md"` が追加され、すべてのコンポーネントには Material Design styles が適用されます。:
-
-```html
-<html class="md"></html>
-```
-
-_Note: **platform** と **mode** は別物です。platform はアプリの [config](../developing/config.md) で任意の mode を設定することができます。_
-
-## Mode Styles の上書き
-
-それぞれの Ionic のコンポーネントは、mode に基づいた外観を設定します。 `html` エレメントは、 現在の mode に基づいて、 `class` と `mode` の両方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、`ios` mode の時のみ `ion-badge` のテキストに `uppercase` を適用する場合、こうなります:
-
-```css
-.ios ion-badge {
-  text-transform: uppercase;
-}
-```
-
-スタイルを上書きするために使用できる多くのグローバル CSS 変数もあります。`ios` アプリの背景色をスタイルするには、次のように設定します:
-
-```css
-.ios {
-  --ion-background-color: #222;
-}
-```
-
-上書きするすべてのグローバル CSS 変数のリストについては、[Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md) をご覧ください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
deleted file mode 100644
index 80d43109809..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/theming/themes.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: テーマのカスタマイズ
----
-
-import CodeColor from '@components/page/theming/CodeColor';
-import SteppedColorGenerator from '@components/page/theming/SteppedColorGenerator';
-
-<head>
-  <title>Ionicアプリのテーマ | 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 は、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: [Application Colors](#application-colors), [Stepped Colors](#stepped-colors)
-
-### アプリケーションの配色
-
-アプリケーションの配色は、Ionic の複数の場所で使用されています。ダークテーマや、ブランディングにあったテーマを簡単に作成することができます。
-
-背景とテキストの色変数は、RGB である必要があります: <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. なぜ `rgb` プロパティも必要であるかは [The Alpha Problem](advanced.md#the-alpha-problem) をご覧ください。
-
-| 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                   |
-
-### ステップカラー
-
-Ionic テーマをカスタマイズするためのさまざまな方法を検討した結果、1 つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。
-
-背景色 (`--ion-background-color`) と テキストカラー (`--ion-text-color`) の変数を更新すると、ほとんどのアプリコンポーネントの外観が変わりますが、見逃したり壊れたりする可能性のある特定の Ionic コンポーネントがあります。ダークテーマを適用するとき、これはより明白になります。
-
-一部のコンポーネントでは、背景よりも暗い、またはテキストよりも明るい色合いを使用しています。たとえば、item の見出しテキストは、私たちのデフォルトのテキストカラーよりも数段階明るい色である <CodeColor color="#404040">#404040</CodeColor> になります。一方、ローディングコンポーネントの背景は白よりも濃い色 <CodeColor color="#f2f2f2">#f2f2f2</CodeColor> になります。私達はこれらのわずかな変化を定義するために、ステップカラーを利用します。アプリケーションの背景色やテキストの色を更新するときは、ステップカラーを更新することが重要です。
-
-デフォルトでは、Ionic のステップカラーはデフォルトの背景色の値 <CodeColor color="#ffffff">#ffffff</CodeColor> で始まります。 そしてテキストカラー値 <CodeColor color="#000000">#000000</CodeColor> を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。
-
-## 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
deleted file mode 100644
index 8a856e02438..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/build.md
+++ /dev/null
@@ -1,208 +0,0 @@
----
-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>
-
-## 一般的な間違い
-
-### デコレーターにて丸括弧を忘れる
-
-デコレーターはアノテーションの後に丸括弧 `()` を持つべきです。いくつか例を示します: `@Injectable()`, `@Optional()`, `@Input()`, など。
-
-```tsx
-@Directive({
-  selector: 'my-dir',
-})
-class MyDirective {
-  // 誤り、@Optional() とすべき
-  // @Optional はここでは何もしないため、MyDirective は parent が undefined の場合にエラーになる
-  constructor(@Optional parent: ParentComponent) {}
-}
-```
-
-## 一般的なエラー
-
-### すべてのパラメータを解決できない
-
-```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.
-```
-
-この例外は Angular が `YourClass` のコンストラクタの 1 つ以上のパラメータについて困惑していることを意味します。[依存性を注入](https://angular.jp/docs/ts/latest/guide/dependency-injection.html) するため、Angular は 注入するパラメータの型を知る必要があります。パラメータのクラスを指定することで Angular にこのこと（タイプ）を知らせます。次の点を確認してください:
-
-- パラメータのクラスをインポートします。
-- パラメータに適切な注釈をつけるか、パラメータの型を指定します。
-
-```tsx
-import { MyService } from 'my-service'; // 私をインポートすることを忘れないで！
-
-@Component({
-  template: `Hello World`,
-})
-export class MyClass {
-  // service は MyService のタイプです
-  constructor(service: MyService) {}
-}
-```
-
-コード内の循環参照がこのエラーの原因になることがあります。循環参照は、2 つのオブジェクトが相互に依存していることを意味するため、両方を相互の前に宣言する方法はありません。この問題を回避するには、Angular に組み込まれている[`forwardRef`](https://angular.jp/docs/ts/latest/api/core/index/forwardRef-function.html) 関数を使用します。
-
-```ts
-import { forwardRef } from '@angular/core';
-
-@Component({
-  selector: 'my-button',
-  template: `<div>
-    <icon></icon>
-    <input type="button" />
-  </div>`,
-  directives: [forwardRef(() => MyIcon)], // MyIcon はまだ定義されていません
-}) // forwardRef は MyIcon が必要なときに MyIcon として解決します
-class MyButton {
-  constructor() {}
-}
-
-@Directive({
-  selector: 'icon',
-})
-class MyIcon {
-  constructor(containerButton: MyButton) {} // MyButton が定義されました
-}
-```
-
-### No provider for ParamType
-
-```shell
-No provider for ParamType! (MyClass -> ParamType)
-```
-
-これは、Angular は注入されるべきパラメータの型を知っているが、注入方法を知らないことを意味する。
-
-パラメータが Service の場合は、指定したクラスがアプリケーションで使用可能な providers のリストに追加されていることを確認します:
-
-```tsx
-import { MyService } from 'my-service';
-
-@Component({
-  templateUrl: 'app/app.html',
-  providers: [MyService], // 私を忘れないで！
-})
-class MyApp {}
-```
-
-パラメータが別のコンポーネントまたは Directive（たとえば、親コンポーネント）である場合、パラメータを providers のリストに追加するとエラーはなくなりますが、これは前述の [provider の複数のインスタンス](/docs/faq/runtime#provider-) と同じ効果を持ちます。ここでは、コンポーネントクラスの新しいインスタンスを作成しますが、必要なコンポーネントインスタンスへの参照は取得しません。かわりに、注入されるであろう Directive またはコンポーネントがコンポーネントで使用可能であることを確認します（たとえば、親であることを期待している場合は、実際に親であること）。これはおそらく、例を使用すると最も簡単に理解できます:
-
-```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
-
-    // コンポーネントツリーにMyCompがなく、注入するMyCompがないため、
-    // Directiveが通常のdivにある場合のエラーのdivにある場合のエラー
-    console.log("Host component's name: " + c.name);
-  }
-}
-
-@Component({
-  template:
-    '<my-comp></my-comp>' + // MyDir コンストラクタ内ではエラーなし、MyComp は MyDir の親
-    '<my-comp my-dir></my-comp>' + // MyDir コンストラクタ内ではエラーなし、MyComp は MyDir のホスト
-    '<div my-dir></div>', // MyDir コンストラクタ内でエラー
-  directives: [MyComp, MyDir],
-})
-class MyApp {}
-```
-
-以下に、使用可能な注入するものの図を示します:
-
-```
-                 +-------+
-                 |  App  |
-                 +---+---+
-                     |
-       +-------------+------------+
-       |                          |
-+------+------+          +--------+--------+
-| Div (MyDir) |          | MyComp (MyDir)  |  <- MyComp は注入可能
-+-------------+          +--------+--------+
-       ^                          |
-MyComp の注入なし            +------+------+
-                           | P (MyDir)   | <- MyComp は親から注入可能
-                           +-------------+
-```
-
-前の例を拡張するために、コンポーネント/Directive の参照を常に期待しているわけではない場合には、Angular の `@Option` アノテーションを使うことができます:
-
-```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}`);
-    }
-  }
-}
-```
-
-### 既知のプロパティではないため、`propertyName` にバインドできない
-
-```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
-```
-
-これは、そのプロパティを持たない要素にプロパティをバインドしようとしたときに発生します。要素がコンポーネントの場合、または要素に 1 つ以上の Directive がある場合、コンポーネントも Directive もそのプロパティを持ちません。
-
-```html
-<!-- div には 'foo' というプロパティがない -->
-<div [foo]="bar"></div>
-```
-
-### ControlContainer の Provider がない
-
-```shell
-No provider for ControlContainer! (NgControlName -> ControlContainer)
-```
-
-このエラーは、上記の `No provider` エラーのより具体的なバージョンです。これは、親の [NgForm](https://angular.jp/docs/ts/latest/api/forms/index/NgForm-directive.html) または NgFormModel を指定せずに NgControlName などのフォームコントロールを使用した場合に発生します。ほとんどの場合、これはフォームコントロールが実際のフォーム要素内にあることを確認することで解決できます。NgForm はセレクタとして `form` を使用するので、これは新しい NgForm をインスタンス化します:
-
-```tsx
-@Component({
-  template:
-  '<form>' +
-  '<input ngControl="login">' +
-  '</form>'
-})
-```
-
-### コンポーネントファクトリがない
-
-```shell
-No component factory found for <component name>
-```
-
-このエラーは、ngModule にインポートおよび追加されていない Component、Provider Pipe、Directive を使用しようとしたときに発生します。新しい Component、Provider、Pipe、Directive をアプリケーションに追加する場合は必ず、Angular がそれを使えるようにするために、`src/app/app.module.ts` ファイル内の `ngModule` に追加する必要があります。このエラーを修正するには、問題の Component、Provider、Pipe、Directive を app.module ファイルにインポートし、Provider の場合は `providers` 配列に追加、Component、Pipe、Directive の場合は宣言配列と `entryComponents` 配列の両方に追加します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/cors.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/cors.md
deleted file mode 100644
index 5b497f74a12..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/cors.md
+++ /dev/null
@@ -1,300 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/debugging.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/debugging.md
deleted file mode 100644
index 326f1513653..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/debugging.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
deleted file mode 100644
index 63f7b3dd3ce..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/native.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: ネイティブエラー
----
-
-<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>
-
-## コードの署名エラー
-
-```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'
-```
-
-iOS デバイスでアプリケーションを実行するには、プロビジョニングプロファイルが必要です。プロビジョニングプロファイルが作成されていない場合は、次の手順に従います:
-
-<<<<<<< HEAD
-
-1. <strong>[Package ID](../reference/glossary.md#package-id) を設定する。</strong>
-
-   Capacitor の場合、`capacitor.config.json` ファイルを開き `appId` プロパティを修正します。
-
-   Cordova の場合、`config.xml` ファイルを開き、ルート要素 `<widget>` の `id` 属性を修正します。よりくわしい情報は [Cordova ドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご参照ください。
-
-2. <strong>
-     プロジェクトを <b>Xcode</b> で開く。
-   </strong>
-
-   Capacitor の場合、以下を実行し Xcode でアプリケーションを開いてください:
-
-   ```shell
-   $ ionic capacitor open ios
-   ```
-
-   Cordova の場合、Xcode 開きます。**File** &raquo; **Open** からアプリケーションを見つけます。アプリケーション内の `platforms/ios` ディレクトリを開きます。
-
-3. <strong>
-     <b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。 **Identyty**
-     セクションで、設定された Package ID がバンドル識別子と一致することを確認します。
-   </strong>
-
-   ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
-
-4. <strong>
-     同じプロジェクトエディタの <b>署名</b> セクションで、<b>Automatically manage signing</b> が
-     有効になっていることを確認します。
-   </strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は プロビジョニングと署名を自動的に準備しようとします。
-
-   ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
-
-## Xcode のビルドエラー 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
-```
-
-このエラーは Xcode のエラーコードで、プロビジョニングの問題または古い cordova 依存関係が原因で発生する可能性があります。このエラーを修正するには、まず上記の手順でプロビジョニングプロファイルが生成されていることを確認したのち、[Xcode からアプリケーションを実行します](../developing/ios.md#running-with-xcode)。
-
-もしそれでもエラーが解決しない場合は、次のコマンドを実行してください:
-
-```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.
-
-## Google Play Services のバージョンが衝突
-
-```shell
-Error: more than one library with package name com.google.android.gms
-```
-
-このエラーは、2 つの異なるプラグインが異なるバージョンの `Google Play Services` を使用しようとしたことが原因です。この問題を解決するには、バージョンが `7.1.0` 以上の `cordova` および バージョンが `6.3.0` 以上の `cordova-android` を実行していることを確認してください。最新の `cordova` をインストールするには次を実行してください:
-
-```shell
-npm install cordova@latest
-```
-
-また、`cordova-android` をアップデートするには次を実行してください:
-
-```shell
-cordova platform update android
-```
-
-`Google Play Services` に依存するプラグインをアップデートして、同じバージョンを使用できるようになりました。例えば、`pluginA` ではバージョン 11.0 を使用し、`pluginB` では バージョン 15.0 を使用する場合、`config.xml` ファイルでは以下のスニペットで同じバージョンを使用するように更新できます:
-
-```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
deleted file mode 100644
index da493bb6a8f..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/troubleshooting/runtime.md
+++ /dev/null
@@ -1,209 +0,0 @@
----
-title: ランタイムの問題
----
-
-<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>
-
-## 真っ白なアプリケーション
-
-:::note
-私のアプリケーションにはエラーはありません。なぜ真っ白な画面が表示されるのでしょうか？
-:::
-
-この事象が発生しうる理由がいくつかあります。もしあなたがフォーラム上で解決策を見つけられなかった場合、これらを確認して下さい:
-
-- ポリフィルには古い android のブラウザ/バージョンは含まれない
-
-`@angular/cli@7.3` 以上のプロジェクトの場合、ポリフィルは自動的に含まれます。その前に作成されたプロジェクトでは、ポリフィルを手動で有効にする必要があります。
-
-`src/polyfills.ts` にて、Android 4.4 をサポートするために ES6 ポリフィルをすべて有効にする必要があります。
-
-あるいは、プロジェクトを更新して、`@angular/cli` パッケージと `@angular-devkit` パッケージの最新リリースを使用し、`angular.json` のビルドオプションオブジェクトに `es5BrowserSupport` オプションを含めることもできます:
-
-```diff
-        "input": "src/global.scss"
-      }
-    ],
--   "scripts": []
-+   "scripts": [],
-+   "es5BrowserSupport": true
-  },
-  "configurations": {
-    "production": {
-```
-
-これにより、古いブラウザに必要なポリフィルが自動的に追加されます。
-
-## ディレクティブが動作しない
-
-:::note
-なぜ私のカスタムコンポーネント/ディレクティブは動作しないのでしょうか？
-:::
-
-あなたが確認できるものがいくつか存在します。
-
-- セレクタにスペルミスがない
-- 属性、要素、クラスとして、セレクタを正確に使用している
-- セレクタの構文が適切:
-  - 属性セレクタの場合は `[attr]`
-  - 要素セレクタの場合は `element`
-  - クラスセレクタの場合は `.class`
-
-以下に、属性セレクタの例を挙げます:
-
-```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 { }
-```
-
-## クリックの遅延
-
-:::note
-なぜ私のクリックイベントは遅延するのでしょうか？
-:::
-
-一般的に、我々は標準的なクリックイベントを要素に追加する場合は `(click)` のみを勧めています。
-これには `<button>` や `<a>` 要素も含まります。これにより、
-画面を読むときに各要素がクリック可能であることを伝えることができるため、アクセシビリティを
-向上します。
-
-しかしながら、おそらくあなたは通常はなクリックできない要素に `(click)` イベントを要素に追加することを
-求められるかもしれません。もしあなたがこれを実行すると、要素をクリックしてイベントが発火するまで
-`300ms` の遅延が発生するかもしれません。この遅延を改善するには、あなたは
-要素に `tappable` 属性を追加することができます。
-
-```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 プラグインがブラウザ上で動作しない
-
-あなたの開発中のある時点で、Cordova プラグインを呼び出そうとしますが、
-警告:
-
-```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)
-```
-
-これは、あなたがネイティブプラグインを呼び出そうとしますが、Cordova プラグインが利用できないときに発生します。
-ありがたいことに、Ionic Native はエラーの代わりに良い警告を表示してくれます。
-
-他のケースでは、プラグインが Ionic Native を介して利用されない場合、プラグインは
-より曖昧な警告を表示することができます。
-
-```shell
-EXCEPTION: Error: Uncaught (in promise): TypeError: undefined is not an object
-(evaluating 'navigator.camera.getPicture')
-```
-
-もしこれが発生した場合は、そのプラグインを実機かシミュレーターでテストしてみてください。
-
-## provider の複数のインスタンス
-
-あなたは provider をすべてのコンポーネントで利用可能にしたいので、すべてのコンポーネントに provider を注入した場合、
-provider の複数のインスタンスが生成されます。
-子コンポーネントで使用できるようにする場合は、親コンポーネントに一度だけ Provider を
-注入する必要があります。
-
-```tsx
-let id = 0;
-export class MyService {
-  id: number;
-
-  constructor() {
-    this.id = id++;
-  }
-}
-
-@Component({
-  selector: 'my-component',
-  template: 'Hello World',
-  providers: [MyService], // <-- MyService の新しいインスタンスの生成 :(
-}) // 不要。なぜなら MyService は App の providers の中だらか
-class MyComp {
-  // id は 1, s は MyApp とは異なる MyService インスタンス
-  constructor(s: MyService) {
-    console.log('MyService id is: ' + s.id);
-  }
-}
-
-@Component({
-  template: '<my-component></my-component>',
-  providers: [MyService], // MyService はここのみ必要
-  directives: [MyComp],
-})
-class MyApp {
-  // id は 0
-  constructor(s: MyService) {
-    console.log('MyService id is: ' + s.id);
-  }
-}
-```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md
deleted file mode 100644
index ac769548707..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/4-0.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: Updating to v4
----
-
-# Updating to Ionic 4
-
-## Updating from Ionic 3 to 4
-
-:::note
-This guide assumes that you have already updated your app to the latest version of Ionic 3. If you are using Ionic 1 or 2, Make sure to follow the [Updating from Ionic 1 to 4 Guide](#updating-from-ionic-1-to-4) instead.
-:::
-
-:::info Breaking Changes
-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-framework/blob/main/BREAKING_ARCHIVE/v4.md) in the Ionic Framework repository.
-:::
-
-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@v4-lts
-```
-
-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.
-
-## Updating from Ionic 1 to 4
-
-### Ionic 1 to Ionic 4: What’s Involved?
-
-Migrating from Ionic 1 to Ionic 4 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 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 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 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 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 training, architecture reviews, and migration assistance.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md
deleted file mode 100644
index 6a5f621b4e9..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/5-0.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Updating to v5
----
-
-# Updating from Ionic 4 to 5
-
-Migrating an app from Ionic 4 to 5 requires a few updates to the API properties, CSS utilities, and the installed package dependencies.
-
-:::note
-This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide.
-:::
-
-:::info Breaking Changes
-For a **complete list of breaking changes** from Ionic 4 to Ionic 5, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md) in the Ionic Framework repository.
-:::
-
-### Packages and Dependencies
-
-For Angular based projects, you can simply run:
-
-```shell
-npm install @ionic/angular@v5-lts @ionic/angular-toolkit@4.0.0 --save
-```
-
-For React projects, you can run:
-
-```shell
-npm install @ionic/react@v5-lts @ionic/react-router@v5-lts ionicons@5.5.3
-```
-
-For Stencil / vanilla JS projects, you can run:
-
-```shell
-npm i @ionic/core@v5-lts --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.
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
deleted file mode 100644
index df38caa4e8a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/6-0.md
+++ /dev/null
@@ -1,478 +0,0 @@
----
-title: Updating to v6
----
-
-# Updating from Ionic 5 to 6
-
-:::note
-This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide.
-:::
-
-:::info Breaking Changes
-For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) in the Ionic Framework repository.
-:::
-
-## はじめ方
-
-### Angular
-
-1. Ionic 6 は Angular 12+ をサポートしています。 [Angular Update Guide](https://update.angular.io/) に沿って、最新バージョンの Angular に更新します。.
-2. Ionic6 の最新バージョンに更新します。
-
-```shell
-npm install @ionic/angular@6
-```
-
-Ionic Angular Server を使用している場合は、それも必ず更新してください:
-
-```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](../developing/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 は React 17+ をサポートしています。React の最新バージョンに更新します:
-
-```shell
-npm install react@latest react-dom@latest
-```
-
-2. Ionic 6 の最新バージョンに更新します:
-
-```shell
-npm install @ionic/react@6 @ionic/react-router@6
-```
-
-3. `package.json` の `scripts` オブジェクトにある `test` フィールドを更新して、 `transformIgnorePatterns` を含めます:
-
-```json
-"scripts": {
-  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
-  ...
-}
-```
-
-4. あなたの `App` コンポーネントで `setupIonicReact` を呼び出して下さい。もう `setupConfig` を利用している場合は、 `setupIonicReact` に置き換えてください:
-
-**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
-開発者は、 `setupIonicReact` カスタム構成を設定していない場合でも、インポートして呼び出す必要があります。
-:::
-
-See the [React Config Documentation](../developing/config) for more examples.
-
-5.すべてのコントローラのインポートを `@ionic/core` から `@ionic/core/components` に更新します。例として、`menuController` のマイグレーションを紹介します。
-
-**Before**
-
-```tsx
-import { menuController } from '@ionic/core';
-```
-
-**After**
-
-```tsx
-import { menuController } from '@ionic/core/components';
-```
-
-### Vue
-
-1. Ionic 6 は Vue 3.0.6+ をサポートしています。Vue の最新バージョンに更新ください。
-
-```shell
-npm install vue@3 vue-router@4
-```
-
-2. Vue CLI を使用するアプリの場合は、Vue CLI 5 をインストールします。
-
-```shell
-npm install -g @vue/cli@next
-```
-
-次に、すべての Vue CLI プラグインをアップグレードします。
-
-```shell
-vue upgrade --next
-```
-
-3. Ionic 6 の最新バージョンに更新します。
-
-```shell
-npm install @ionic/vue@6 @ionic/vue-router@6
-```
-
-4. `package.json` の`jest.config.js` か `jest` のどちらかに `transformIgnorePatterns` を含めます。
-
-```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)"]
-    }
-  }
-```
-
-詳しくは [Testing section below](#testing) をご覧ください。
-
-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](../developing/config) for more examples.
-
-6. `useIonRouter` で利用してる型 `IonRouter` を `UseIonRouterResult` に変更してください。
-
-7. `useKeyboard` で利用してる型 `IonKeyboardRef` を `UseKeyboardResult` に変更してください。
-
-8. すべてのオーバーレイイベントリスナーの名前を変更し、新しいフォーマットを使用するようにします。
-
-**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
-これらは `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-picker`, `ion-popover`, `ion-toast` に適用されます。
-:::
-
-9.  `ion-router-outlet` を `ion-tabs` の中にいれて利用します。
-
-**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. タブ内の追加ルートは、子ルートではなく兄弟ルートとして書き直す必要があります。
-
-**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. Ionic 6 の最新バージョンにアップデートください。
-
-```shell
-npm install @ionic/core@6
-```
-
-## コアのアップデート
-
-### Datetime
-
-1. `placeholder`, `pickerOptions`, `pickerFormat`, `monthNames`, `monthShortNames`, `dayNames`, `dayShortNames`プロパティの使用をすべて削除してください。`ion-datetime` は、デバイスに設定されている言語と地域に応じて、コンポーネント内に表示される月名、日名、時刻を自動的にフォーマットするようになりました。詳細は、[ion-datetime Localization Documentation](../api/datetime#localization) を参照してください。
-
-2. `text` と `placeholder` の CSS シャドウパーツの使用をすべて削除します。
-
-3. CSS 変数 `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, `--placeholder-color` のすべての使用を削除します。 `ion-datetime` のパディングをカスタマイズするには、 `padding` CSS プロパティのいずれかを使用することができます。
-
-4. `open` メソッドの使用はすべて削除します。datetime をオーバーレイで表示するには、 `ion-modal` または `ion-popover` コンポーネントの中に配置する。詳細は、[ion-datetime Usage Examples](../api/datetime#usage) を参照してください。
-
-5. `displayFormat` プロパティまたは `displayTimezone` プロパティの使用をすべて削除します。ionChange` イベントのペイロードで提供される UTC 文字列をパースするには、[date-fns](https://date-fns.org/) を使用することをお勧めします。例としては、[ion-datetime Parsing Dates Documentation](../api/datetime#parsing-dates) を参照してください。
-
-:::note
-マイグレーション例は [Datetime Migration Sample Application](https://github.com/ionic-team/datetime-migration-samples) をご覧ください。
-:::
-
-### Icon
-
-Ionic 6 には、Ionicons 6 が同梱されるようになりました。[Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) をご確認の上、必要な変更を行なってください。
-
-### Input
-
-`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
-
-### Modal
-
-`ion-modal` は Shadow DOM を使用するようになりました。 `ion-modal` の内部をターゲットとするスタイルは、[ion-modal CSS Variables](../api/modal#css-custom-properties) または [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` は Shadow DOM を使用するようになりました。 `ion-popover` の内部をターゲットとするスタイルは、[ion-popover CSS Variables](../api/popover#css-custom-properties) または [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
-
-`RadioChangeEventDetail` インターフェースのすべての使用法を削除します。
-
-### Select
-
-`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
-
-### Textarea
-
-`placeholder` プロパティの値として `null` が渡されていないことを確認してください。代わりに `undefined` を使用することを推奨します。
-
-### ブラウザサポート
-
-Ionic がサポートしているブラウザのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
-
-If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
-
-```
-Chrome >=60
-Firefox >=63
-Edge >=79
-Safari >=13
-iOS >=13
-```
-
-### テスト
-
-Ionic 6 は、ES モジュールとして出荷されるようになりました。ES モジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jest でテストする開発者は、Jest 27 の時点で Jest が ES Modules を完全にサポートしていないため、Jest の設定を更新する必要があります。
-
-このアップデートでは、Babel を使用して Ionic の ES モジュールを Jest が理解できる CommonJS (CJS) 形式にコンパイルする必要があります。Jest が ES モジュールをサポートするようになれば、この変更は必要なくなります。Jest の ES モジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
-
-新しい Ionic アプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存の Ionic アプリをお持ちの方は、以下の手順で Jest を Ionic 6 で動作させることができます。
-
-1. Jest の設定に、関連する Ionic パッケージを含む `transformIgnorePatterns` フィールドを追加します。これは通常 `jest.config.js` または `package.json` の `jest` フィールドに含まれています。
-
-```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
-Ionic React または Ionic Vue を使用している場合、適切なパッケージを `transformIgnorePatterns` 配列に追加してください。Ionic React の場合は、 `@ionic/react` と `@ionic/react-router` がこれにあたります。Ionic Vue の場合は、 `@ionic/vue` と `@ionic/vue-router` が含まれます。
-:::
-
-Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの `transformIgnorePatterns` を更新する方法がありません。これは CRA の制限であり、Ionic がコントロールできることではありません。しかし、`react-scripts test` コマンドに直接 `transformIgnorePatterns` を渡すことはできます。
-
-```json title="package.json"
-"scripts": {
-  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
-  ...
-}
-```
-
-それでも問題が発生する場合は、以下のことを試してみてください。
-
-1. `@babel/preset-env` が [file-relative configuration](https://babeljs.io/docs/en/config-files#file-relative-configuration) ではなく、 [project-wide configuration](https://babeljs.io/docs/en/config-files#project-wide-configuration) に含まれていることを確認します。これは通常、 `<project-root>/babel.config.json` で Babel 設定を定義することを意味します。
-
-2. `package.json` ファイルに `browserslist/test` フィールドがある場合、それが `current node` に設定されていることを確認してください。
-
-## アップグレートへの助けが必要？
-
-[Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) を必ずご覧ください。デフォルトのプロパティと CSS 変数の値について、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更点のみを掲載しています。
-
-アップグレードに助けが必要な場合、 [Ionic Forum](https://forum.ionicframework.com/) にスレッドを立ててください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
deleted file mode 100644
index 7c2f7efbb36..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/updating/7-0.md
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: Updating to v7
----
-
-# Updating from Ionic 6 to 7
-
-:::note
-This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
-:::
-
-:::info Breaking Changes
-For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) in the Ionic Framework repository.
-:::
-
-## はじめ方
-
-### Angular
-
-1. Ionic 7 は Angular 14+に対応しています。 [Angular Update Guide](https://update.angular.io/) に従い、Angular の最新バージョンにアップデートしてください。
-2. プロジェクトで rxjs を使用している場合、Ionic 7 では rxjs の最低バージョンが 7.5.0 である必要があります：
-
-```shell
-npm install rxjs@7.5.0
-```
-
-3. Ionic 7 の最新バージョンにアップデートしてください：
-
-```shell
-npm install @ionic/angular@next
-```
-
-Ionic Angular Server を使用している場合は、必ずそちらも更新してください。
-
-```shell
-npm install @ionic/angular@next @ionic/angular-server@next
-```
-
-### React
-
-1. Ionic 7 は React 17+に対応しています。React の最新バージョンにアップデートしてください。
-
-```shell
-npm install react@latest react-dom@latest
-```
-
-2. Ionic 7 の最新バージョンにアップデートします。
-
-```shell
-npm install @ionic/react@next @ionic/react-router@next
-```
-
-### Vue
-
-1. Ionic 7 は Vue 3.0.6+をサポートしています。Vue の最新バージョンにアップデートしてください。
-
-```shell
-npm install vue@latest vue-router@latest
-```
-
-3. Ionic 7 の最新バージョンにアップデートします。
-
-```shell
-npm install @ionic/vue@next @ionic/vue-router@next
-```
-
-### Core
-
-1. Ionic 7 の最新バージョンにアップデートします。
-
-```shell
-npm install @ionic/core@next
-```
-
-## あなたのコードのアップデート
-
-### ブラウザサポート
-
-Ionic がサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
-
-`browserslist` または `.browserslistrc` ファイルをお持ちの場合は、以下の内容で更新してください。
-
-```
-Chrome >=79
-ChromeAndroid >=79
-Firefox >=70
-Edge >=79
-Safari >=14
-iOS >=14
-```
-
-### 型
-
-1.  `ActionSheetAttributes`、`AlertAttributes`、`AlertTextareaAttributes`、`AlertInputAttributes`、`LoadingAttributes`、`ModalAttributes`、`PickerAttributes`、`PopoverAttributes`および `ToastAttributes` は削除されました。開発者は、代わりに `{ [key: string]: any }` を使用する必要があります。
-
-### Checkbox
-
-1. CSS 変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--checkbox-background` と `--checkbox-background-checked` にリネームします。
-
-### Datetime
-
-1. `value` プロパティに空文字列(`''`)を設定するコードを削除します
-2. `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetime はタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
-
-### Input
-
-1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの `detail` ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
-
-### Modal
-
-1. Remove any usage of the `swipeToClose` property. Card modals are swipeable by default, so you can remove `swipeToClose` if you want your card modal to remain swipeable. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property if you want to prevent a modal from dismissing.
-2. Remove any code that sets the `canDismiss` property to `undefined`. The `canDismiss` property now defaults to `true`, so this code is no longer needed.
-
-### Picker
-
-1. `ion-picker-column` の `refresh` にアクセスするコードをすべて削除する。代わりに `ion-picker` の `columns` プロパティを使用してビューをリフレッシュする必要があります。
-
-### Searchbar
-
-1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの`detail`ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
-
-### Segment
-
-1. Remove any code that sets the `value` property to `null`. Developers should use either `''` or `undefined` instead.
-
-### Slides
-
-1. `ion-slides`、`ion-slide`、および関連する型を削除する。これらのコンポーネントは、Swiper.js を直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
-
-[Angular Migration Guide](https://ionicframework.com/docs/angular/slides)<br />
-[React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
-[Vue Migration Guide](https://ionicframework.com/docs/vue/slides)
-
-### Textarea
-
-1. `detail` ペイロードが値とイベントを含むオブジェクトになったので、`ionInput`イベントの`detail`ペイロードにアクセスするコードを `event.detail` から `event.detail.value` に更新します。
-
-### Toggle
-
-1. CSS 変数 `--background` と `--background-checked` を使用している場合は、それぞれ `--track-background` と `--track-background-checked` にリネームします。
-
-### Virtual Scroll
-
-`ion-virtual-scroll`とそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworks が提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。
-
-[Angular Migration Guide](https://ionicframework.com/docs/angular/virtual-scroll)<br />
-[React Migration Guide](https://ionicframework.com/docs/react/virtual-scroll)<br />
-[Vue Migration Guide](https://ionicframework.com/docs/vue/virtual-scroll)
-
-## アップグレードに助けが必要？
-
-[Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/feature-7.0/BREAKING.md#version-7x) を必ず見てください。デフォルトのプロパティと CSS Variable の値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。
-
-<<<<<<< HEAD
-アップグレードのヘルプが必要な場合は、[Ionic Forum](https://forum.ionicframework.com/)にスレッドを投稿してください。
-
-=======
-If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).
-
-> > > > > > > 3bd16bc620b471736c9f4ce90e2f3eae53781174
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md
deleted file mode 100644
index 92c6eebc67a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/animations.md
+++ /dev/null
@@ -1,1635 +0,0 @@
----
-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 tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
-
-Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use up CPU time.
-
-Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
-
-## 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');
-```
-
-## API
-
-This section provides a list of all the methods and properties available on the `Animation` class.
-
-### Interfaces
-
-#### AnimationDirection
-
-```tsx
-type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
-```
-
-#### AnimationFill
-
-```tsx
-type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
-```
-
-#### AnimationBuilder
-
-```tsx
-type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
-```
-
-:::note
-
-`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
-
-:::
-
-#### AnimationCallbackOptions
-
-```tsx
-interface AnimationCallbackOptions {
-  /**
-   * If true, the associated callback will only be fired once.
-   */
-  oneTimeCallback: boolean;
-}
-```
-
-#### AnimationPlayOptions
-
-```tsx
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md
deleted file mode 100644
index ab65cfb8f7b..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/utilities/gestures.md
+++ /dev/null
@@ -1,505 +0,0 @@
----
-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)
-
-## 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
deleted file mode 100644
index 5f5dba435fe..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/config.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# Config
-
-Ionic Config は、アプリケーション全体にわたってコンポーネントのプロパティをグローバルに変更する方法を提供します。Ionic Config は、アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。
-
-## グローバル設定
-
-アプリケーションの初期の Ionic Config を上書きするには、IonicVue プラグインのインストール時に追加パラメータとして Config オブジェクトを指定します。
-
-```tsx
-createApp(App).use(IonicVue, {
-  rippleEffect: false,
-  mode: 'md',
-});
-```
-
-上の例では、Material Design のリップル効果を無効にし、モードを Material Design にしています。
-
-## プラットフォームごとの構成
-
-Ionic Config は、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができます。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
-
-次の例では、アプリケーションがモバイル Web ブラウザで実行されている場合にのみ、Ionic アプリケーションのすべてのアニメーションを無効にしています。
-`isPlatform ()` 呼び出しは、渡されたプラットフォームに基づいて `true` または `false` を返します。 [Platform Documentation](platform.md#platforms) を指定します。
-
-```tsx
-import { IonicVue, isPlatform } from '@ionic/vue';
-
-createApp(App).use(IonicVue, {
-  animated: !isPlatform('mobileweb'),
-});
-```
-
-次の例では、プラットフォームに基づいてまったく異なる構成を設定し、一致するプラットフォームがない場合はデフォルトの構成に戻すことができます:
-
-```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());
-```
-
-最後に、この例では、異なるプラットフォーム要件に基づいて構成オブジェクトを蓄積できます:
-
-```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
-
-### Config オプション
-
-以下は Ionic で使用できる設定オプションのリストです。
-
-| 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.                     |
-| `toastDuration`          | `number`                                                                      | Overrides the default `duration` for all `ion-toast` components.                                         |
-| `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".               |
-| `toggleOnOffLabels`      | `boolean`                                                                     | Overrides the default `enableOnOffLabels` in all `ion-toggle` components.                                |
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
deleted file mode 100644
index de5a58c96f1..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/lifecycle.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-sidebar_label: ライフサイクル
----
-
-# Vue のライフサイクル
-
-このガイドでは、Ionic Framework のライフサイクルイベントを Ionic Vue アプリケーションで使用する方法について説明します。
-
-## Ionic Framework のライフサイクルメソッド
-
-Ionic Framework はアプリで使えるいくつかのライフサイクルメソッドを提供します:
-
-| Event Name         | Description                                                        |
-| ------------------ | ------------------------------------------------------------------ |
-| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 |
-| `ionViewDidEnter`  | コンポーネントが表示されるアニメーションが終了した時に発火します。 |
-| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。   |
-| `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。   |
-
-これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
-
-ライフサイクルは、Vue のライフサイクルメソッドと同じように、Vue コンポーネントのルートで関数として定義されます：
-
-```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.
-:::
-
-## Ionic Framework がページのライフを処理する仕組み
-
-Ionic Framework には `<ion-router-outlet>` と呼ばれるルータアウトレットがあります。このアウトレットは、Vue Router の `<router-view>` を拡張し、モバイルデバイスのエクスペリエンスを向上させるためのいくつかの追加機能を提供します。
-
-アプリが `<ion-router-outlet>` でラップされている場合、Ionic Framework はナビゲーションを少し異なる扱いにします。新しいページに移動すると、Ionic Framework は古いページを既存の DOM に保持しますが、ビューからは非表示にして新しいページに移動します。これを行う理由は 2 つあります:
-
-1. 古いページの状態を維持できます(画面上のデータ、スクロール位置など...)
-2. ページはすでに存在しており、作成する必要がないため、よりスムーズにページに戻ることができます。
-
-ページが DOM から削除されるのは、UI の戻るボタンやブラウザーの戻るボタンを押すなど、ページが "popped" された場合のみです。
-
-この特別な処理のため、 `<keep-alive>`, `<transition>`,`<router-view>` などの特定の Vue ルータコンポーネントは、Ionic Vue アプリケーションでは使用しないでください。また、各ページのスクロール位置は自動的に保存されるため、ここでは Vue Router のスクロール動作 API は必要ありません。
-
-Vue のすべてのライフサイクルメソッド(`mounted` や `beforeUnmount`など)も使用可能です。ただし、Ionic Vue はページのライフタイムを管理するため、特定のイベントは予期したときに起動しない場合があります。たとえば、mounted はページが最初に表示されたときに起動しますが、ページから離れると、Ionic Framework によってページが DOM 内に保持され、その後ページにアクセスしても再度 `mounted` が呼び出されることはありません。このシナリオは、Ionic Framework のライフサイクル・メソッドが存在する主な理由であり、ネイティブ・フレームワークのイベントが起動しない可能性がある場合でも、ビューの開始時と終了時にロジックを呼び出す方法を提供します。
-
-## 各ライフサイクルメソッドのガイダンス
-
-以下は、life cycle events ごとのユースケースに関するヒントです。
-
-- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。
-- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたは [ion-skeleton-text](../api/skeleton-text) を使ったスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。
-- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。
-- `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
deleted file mode 100644
index d35dc0bddf5..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/navigation.md
+++ /dev/null
@@ -1,672 +0,0 @@
----
-title: Vueナビゲーション
-sidebar_label: ナビゲーション/ルーティング
----
-
-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>
-
-このガイドでは、Ionic と Vue で構築されたアプリでルーティングがどのように機能するかについて説明します。
-
-`IonRouterOutlet` コンポーネントは、内部で一般的な [Vue Router](https://router.vuejs.org/) ライブラリを使用します。Ionic と Vue Router を使えば、リッチなページ遷移を持つマルチページアプリを作ることができます。
-
-Vue Router を使ったルーティングについて知っていることはすべて Ionic Vue に引き継がれます。Ionic Vue アプリの基本とルーティングの仕組みを見てみましょう。
-
-## 簡単なメモ
-
-このガイドを読んでいると、これらのコンセプトのほとんどが、Ionic Framework を使わずに Vue Router で見られるコンセプトと非常に似ていることに気がつくかもしれません。あなたの観察は正しいでしょう! Ionic Vue は、Ionic Framework でアプリを構築するための移行をできるだけシームレスにするために、Vue Router の最良の部分を活用しています。そのため、独自のルーティングソリューションを構築しようとするよりも、できるだけ Vue Router の機能に依存することをお勧めします。
-
-## 簡単な Route
-
-次に示すのは、 "/home" URL への単一のルートを定義するルーティング設定の例です。 "/home" にアクセスすると、ルートによって `HomePage` コンポーネントがレンダリングされます。
-
-**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;
-```
-
-アプリケーションが最初にロードされると、 `HomePage` コンポーネントがここで設定したとおりに表示されます。
-
-## リダイレクトの設定
-
-最初ロードされたパスに別のパスを設定したい場合はどうすればよいでしょうか。これには、ルータリダイレクトを使用できます。リダイレクトは通常のルートオブジェクトと同じように機能しますが、いくつかの異なるキーが含まれています。
-
-```tsx
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home',
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: HomePage,
-  },
-];
-```
-
-このリダイレクトでは、最初にインデックスのパスが参照されます。そして、 `home` route にリダイレクトしてロードを行います。
-
-## 異なる Routes へのナビゲーション
-
-これは素晴らしいことですが、実際にルートにナビゲートするにはどうすればよいのでしょうか。これには、 `router-link` プロパティを使用できます。新しいルーティング設定を作成します:
-
-```tsx
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home',
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/detail',
-    name: 'Detail',
-    component: DetailPage,
-  },
-];
-```
-
-`home` route で開始し、`detail` route に移動するボタンを追加するとします。`detail` route に移動するには、次の HTML を使用します:
-
-```html
-<ion-button router-link="/detail">Go to detail</ion-button>
-```
-
-また、ルーター 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>
-```
-
-どちらのオプションも同じナビゲーション機構を提供し、異なるユースケースに対応します。
-
-### 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
-
-現在の route の設定方法では、アプリをロードするときに同じ初期チャンクに含まれるようになっているが、これは必ずしも理想的ではありません。代わりに、必要に応じてコンポーネントがロードされるように route を設定できます。
-
-```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.
-
-### 共有 URL
-
-共有 URL は、ルートが共通の URL の一部を持つルート設定です。共有 URL 設定の例を次に示します:
-
-```tsx
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/dashboard',
-    component: DashboardMainPage,
-  },
-  {
-    path: '/dashboard/stats',
-    component: DashboardStatsPage,
-  },
-];
-```
-
-上記のルートは、URL の `dashboard` 部分を再利用するため、 "shared" と見なされます。
-
-### ネストされた Route
-
-Nested Routes は、ルートが他のルートの子としてリストされるルート設定です。ネストされたルート設定の例を次に示します:
-
-```tsx
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/dashboard/:id',
-    component: DashboardRouterOutlet,
-    children: [
-      {
-        path: '',
-        component: DashboardMainPage,
-      },
-      {
-        path: 'stats',
-        component: DashboardStatsPage,
-      },
-    ],
-  },
-];
-```
-
-上記のルートは、親ルートの `children` 配列にあるため、ネストされています。親ルートが `DashboardRouterOutlet` コンポーネントをレンダリングしていることに注目してください。ルートをネストする場合は、 `ion-router-outlet` の別のインスタンスをレンダリングする必要があります。
-
-### どちらを選ぶべきか
-
-共有 URL は、URL の 2 つのページ間の関係を維持しながら、ページ A からページ B に遷移する場合に便利です。前述の例では、 `/dashboard` ページのボタンで `/dashboard/stats` ページに移行できます。2 つのページ間の関係は、a) ページの遷移と b) URL によって維持されます。
-
-ネストされたルートは、コンセント A のコンテンツをレンダリングする必要がある場合、およびネストされたコンセント B の内部のサブコンテンツをレンダリングする必要がある場合に便利です。最も一般的な使用例は、タブです。Ionic スターターアプリのタブをロードすると、最初の `ion-router-outlet` で `ion-tab-bar` および `ion-tabs` コンポーネントがレンダリングされます。`ion-tabs` コンポーネントは、各タブの内容をレンダリングする別の 「イオンルータ出力」 をレンダリングします。
-
-モバイルアプリケーションでネストされたルートが意味をなすユースケースはほとんどありません。疑わしい場合は、共有 URL ルート設定を使用します。ネストされたルーティングをタブ以外のコンテキストで使用すると、アプリのナビゲーションが混乱する可能性があるため、使用しないように強く注意しています。
-
-## タブの操作
-
-タブを操作する場合、Ionic Vue はどのビューがどのタブに属しているかを知る方法を必要とします。ここでは `IonTabs` コンポーネントが便利ですが、この場合のルーティング設定を見てみましょう:
-
-```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'),
-      },
-    ],
-  },
-];
-```
-
-ここで、 `tabs` パスは `Tabs` コンポーネントをロードします。各タブは、 `children` 配列内のルートオブジェクトとして提供されます。この例では、パスを `tabs` としていますがこれはカスタマイズできます。
-
-まず、 `Tabs` コンポーネントをみていきましょう:
-
-```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>
-```
-
-以前に Ionic Framework を使ったことがある人なら、このことをよく知っているはずです。`ion-tabs` コンポーネントを作成し、 `ion-tab-bar` を提供します。`ion-tab-bar` は `ion-tab-button` コンポーネントを提供し、それぞれにルータの設定の対応するタブに関連付けられた `tab` プロパティがあります。
-
-### タブ内の子ルート
-
-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
-
-`IonRouterOutlet` コンポーネントは、ビューをレンダリングするためのコンテナを提供します。これは他の Vue アプリケーションに見られる `RouterView` コンポーネントに似ていますが、 `IonRouterOutlet` は同じアウトレット内の DOM で複数のページをレンダリングできるという点が異なります。コンポーネントが `IonRouterOutlet` でレンダリングされる場合、これは Ionic Framework "Page"と見なされます。ルーター・アウトレット・コンテナーは、ページ間の遷移アニメーションを制御するだけでなく、ページがいつ作成および破棄されるかを制御します。これにより、ビューを切り替えるときにビュー間の状態を維持することができます。
-
-テンプレートで設定する際に、 `IonRouterOutlet` の内部には何も指定しないでください。`IonRouterOutlet` は子コンポーネントにネストすることができますが、通常はアプリケーション内のナビゲーションが混乱するため注意が必要です。詳細については、[Shared URLs versus Nested Routes](#shared-urls-versus-nested-routes) を参照してください。
-
-### 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 パラメーター
-
-元のルーティング例を拡張して、URL パラメータの使用方法を示します:
-
-```tsx
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home',
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/detail/:id',
-    name: 'Detail',
-    component: DetailPage,
-  },
-];
-```
-
-ここで、 `detail` パス文字列の最後に `:id` を追加したことに注意してください。URL パラメータは、ルートパスの動的な部分です。ユーザーが `/details/1` などの URL に移動すると、 "1" が "id" という名前のパラメータに保存され、ルートのレンダリング時にコンポーネントでアクセスできるようになります。
-
-コンポーネントでの使用方法を見てみましょう。
-
-```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
deleted file mode 100644
index e7284829832..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/overview.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: 'Ionic Vueの概要'
-sidebar_label: 概要
----
-
-<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 Framework のコアな経験と、Vue 開発者向けにカスタマイズされたツールや API を組み合わせたものが `@ionic/vue` です。
-
-## Vue バージョンサポート
-
-Ionic Vue は Vue 3.0.0 上に構築されています。Ionic Vue の初期バージョンでアプリを構築している場合は、最新のリリースにアップグレードして、Vue の依存関係をアップグレードしてください。
-
-## Vue ツール
-
-Ionic Vue プロジェクトには通常の Vue CLI プロジェクトと同じツールが付属しています。つまり、Vue CLI とそのすべての機能を使って構築することになります。Vue のデフォルトテンプレートにはルーティングや TypeScript のサポートなど、デフォルトで有効になっている機能がほとんどありませんが、Ionic Vue はそれらをデフォルトで有効にしています。
-
-## Native Tooling
-
-[Capacitor](https://capacitorjs.com) は、Ionic Vue ウェブアプリを iOS、Android、ウェブ上でネイティブに動作させるための公式クロスプラットフォームアプリライブラリです。
-
-[Cordova](https://cordova.apache.org/) と Cordova プラグインで Ionic Vue を使用する際の技術的な制限はありませんが、Capacitor が公式に推奨されています。現時点では、[Ionic CLI ツール](/docs/cli) ツールで Ionic Vue の Cordova 統合をサポートする計画はない。詳細は [こちら](https://capacitorjs.com/docs/cordova) をご覧ください。
-
-## コミュニティからの情報
-
-- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders
-
-## インストール
-
-```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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md
deleted file mode 100644
index 42f71a72eb1..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/performance.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-sidebar_label: パフォーマンス
----
-
-# 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
deleted file mode 100644
index e1bdf32cde2..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/platform.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# Platform
-
-## isPlatform
-
-`isPlatform` メソッドを使用して、アプリが特定のプラットフォームで実行されているかどうかを確認できます:
-
-```tsx
-import { isPlatform } from '@ionic/vue';
-
-isPlatform('ios'); // returns true when running on a iOS device
-```
-
-ユーザー実行しているプラットフォームに応じて、isPlatform（platformName）は true または false を返します。 同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。 たとえば、iPad から実行するアプリは、mobile、ios、ipad、および tablet のプラットフォーム名に対して true を返します。 さらに、アプリが Cordova から実行されている場合、cordova も true になります。
-
-## getPlatforms
-
-`getPlatforms` メソッドを使用して、アプリが現在実行されているプラットフォームを判別できます。
-
-```tsx
-import { getPlatforms } from '@ionic/vue';
-
-getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone
-```
-
-使用しているデバイスに応じて、 `getPlatforms` は複数の値を返すことができます。 それぞれの値はプラットフォームに応じて配列で返却されます。たとえば、iPhone では、mobile、ios、および iphone が返されます。
-
-## Platforms
-
-次の表に、使用可能なすべてのプラットフォーム値とその説明を示します。
-
-| 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](../developing/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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
deleted file mode 100644
index bb13be0e161..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/pwa.md
+++ /dev/null
@@ -1,245 +0,0 @@
----
-title: Progressive Web Apps in Vue
-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>
-
-## Making your Vue app a PWA with Vite
-
-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 Application Manifest</a>. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead.
-
-To get started, install the `vite-plugin-pwa` package:
-
-```shell
-npm install -D vite-plugin-pwa
-```
-
-Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`:
-
-```javascript
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import { VitePWA } from 'vite-plugin-pwa';
-
-export default defineConfig({
-  plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })],
-});
-```
-
-This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
-
-For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/).
-
-See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA.
-
-## Making your Vue app a PWA with Vue CLI
-
-:::note
-As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. See [Making your Vue app a PWA with Vite](#making-your-vue-app-a-pwa-with-vite) for Vite instructions.
-:::
-
-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 Application 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.
-
-既存のプロジェクトの場合は、 `vue add` コマンドを実行して、Vue の PWA プラグインをインストールできます。
-
-```shell
-vue add pwa
-```
-
-:::note
-変更する前に、現在の状況を必ず Git にコミットしてください。
-:::
-
-これが完了すると、Vue の CLI は新しく `registerServiceWorker.ts` を作成します。それを `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');
-```
-
-`registerServiceWorker.ts` は CLI がビルド時に作成する service worker です。ここでは、service worker がアップデート、ネットワーク接続の変更、またはエラーを検出したときのユーザの操作性をカスタマイズできます。
-
-```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);
-    },
-  });
-}
-```
-
-生成される Service Worker は、 [Workbox's webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) に基づいており、デフォルトで `GenerateSW()` を使用するように設定されています。つまり、Workbox はビルド時に、処理するすべてのファイルの Service Worker キャッシュを自動的に生成します。
-
-これを設定してデフォルトの動作を変更したい場合は、GitHub にある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) をチェックアウトします。
-
-### Manifest
-
-Service Worker に加えて、Vue PWA プラグインはアプリケーションの manifest ファイルも作成します。デフォルトでは、CLI は次のエントリーを含む manifest を生成します。
-
-```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"
-}
-```
-
-`public/img/icons` 内のアイコンは、必ずご使用のブランドに合わせて更新してください。テーマの色や名前をカスタマイズしたい場合は、GitHub にある [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) のドキュメントを必ず読んでください。
-
-### Deploying
-
-Firebase, Vercel, Netlify,さらには Azure Static Web Apps など、さまざまなホストを使用することができる。いずれの場合も、同様のセットアッププロセスを完了する必要があります。このガイドでは、ホストの例として Firebase を使用します。このガイドに加えて、 [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) のドキュメントには、さまざまなプロバイダーにデプロイするためのガイドも含まれています。
-
-#### Firebase
-
-Firebase ホスティングは Progressive Web Apps に多くの利点を提供しており、CDN による高速応答、デフォルトで有効になっている HTTPS、 [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html) のサポートなどがある。
-
-まず、まだ使用していない場合は、Firebase で [プロジェクトを作成](https://console.firebase.google.com) します。
-
-次にターミナルで Firebase CLI をインストールします:
-
-```shell
-npm install -g firebase-tools
-```
-
-Firebase CLI をインストールした状態で、Ionic プロジェクト内で `firebase init` を実行します。CLI 上で様々な確認を行っていきます:
-
-**"Which Firebase CLI features do you want to set up for this folder?"** "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
-
-**"Select a default Firebase project for this directory:"** Firebase の Web サイト上で作成したプロジェクトを選択します。
-
-**"What do you want to use as your public directory?"** "dist" を選択ください。
-
-:::note
-次の 2 つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
-:::
-
-**Configure as a single-page app (rewrite all urls to /index.html)?"** "Yes" を選択します.
-
-**"File dist/index.html already exists. Overwrite?"** "No" を選択します。
-
-`firebase.json` という設定ファイルが生成されるので、アプリの設定にあわせて変更します。
-
-最後に、キャッシング・ヘッダーが正しく設定されていることを確認する必要があります。これを行うには、 `headers` スニペットを `firebase.json` に追加します。完全な`firebase。json`は次のようになります:
-
-```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"
-          }
-        ]
-      }
-    ]
-  }
-}
-```
-
-より詳しい `firebase.json` についての設定は [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json) を参照ください。
-
-次に、次のコマンドを実行して、アプリケーションの最適化バージョンを構築します:
-
-```shell
-ionic build
-```
-
-最後に、アプリをデプロイします:
-
-```shell
-firebase deploy
-```
-
-これが完了すると、アプリがライブになります。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
deleted file mode 100644
index 6c71af6669a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/quickstart.md
+++ /dev/null
@@ -1,733 +0,0 @@
----
-title: Ionic Vueクイックスタート
-sidebar_label: クイックスタート
----
-
-<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>
-
-## Ionic Framework とは
-
-まず、ここに来たばかりの人を歓迎します！Ionic Framework は、 iOS, Android, Electron, Web 上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。
-
-UI コンポーネントに加えて、Ionic Framework は新しいアプリを作るためのコマンドラインツールを提供し、サポートしている様々なプラットフォームにデプロイすることができます。
-
-このガイドでは、Ionic Framework 特有の機能を含め、Vue と Ionic Framework の基本について説明します。Vue に精通している方は、ガイドを楽しみ、Ionic Framework について新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。
-
-## Ionic CLI を使ったプロジェクト新規作成
-
-はじめに、Ionic CLI の最新版をインストールしましょう。
-
-```shell
-npm install -g @ionic/cli@latest
-```
-
-これによって使えるようになった、グローバルコマンド `ionic` によって、Ionic Framework と他の依存関係を持つ Vue プロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。
-
-```shell
-ionic start myApp blank --type vue
-cd myApp
-```
-
-これで、 `ionic serve` を実行することによって、プロジェクトをブラウザで実行することができます。
-
-## TypeScript と JavaScript のどちらで構築するかを選べます
-
-私たちは TypeScript が大好きで、スケールさせるアプリを構築するための素晴らしいツールだと確信しています。とはいえ、Vue コミュニティがいかにシンプルさを重視しているかは、ツールや言語などでわかっています。実際、そもそも Vue に興味を持ったのはそのおかげかもしれません。シンプルに開始し、必要に応じてスケールアップします。
-
-したがって、TypeScript の代わりに JavaScript を使うことができます。Ionic Vue アプリケーションを生成したら、次の手順を実行してください。
-
-1. TypeScript の依存を削除:
-
-```shell
-npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
-```
-
-2. すべての `.ts` ファイルの拡張子を `.js` にします。blank Ionic Vue アプリでは、 `router/index.ts` と `main.ts` が該当します。
-
-3. `@vue/typescript/recommended` と `@typescript-eslint/no-explicit-any: ‘off’, ` を `.eslintrc.js` から削除します。
-
-4. `router/index.js` から `Array<RouteRecordRaw>` を削除します。
-
-5. `shims-vue.d.ts`ファイルを削除します。
-
-6. Vue コンポーネントにある `script` タグから `lang="ts"` を削除します。blank Ionic Vue アプリの場合、 `App.vue` と `views/HomePage.vue` が該当します。
-
-## Vue コンポーネントの確認
-
-アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `main.ts` になります。エディタでプロジェクトを開き、`main.ts` を確認すると、次のように表示されます:
-
-```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.
-
-`App.vue` を開くと、次のように表示されます:
-
-```html
-<template>
-  <ion-app>
-    <ion-router-outlet />
-  </ion-app>
-</template>
-
-<script setup lang="ts">
-  import { IonApp, IonRouterOutlet } from '@ionic/vue';
-</script>
-```
-
-script に書かれている import のグループを分解してみていきましょう。
-
-```tsx
-<script setup lang="ts">
-  import {(IonApp, IonRouterOutlet)} from '@ionic/vue';
-</script>
-```
-
-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`. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
-
-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).
-
-次に、テンプレートを見てみましょう。
-
-```html
-<template>
-  <ion-app>
-    <ion-router-outlet />
-  </ion-app>
-</template>
-```
-
-すべての Vue コンポーネントには `<template>` が必要です。その中に `IonApp` と `IonRouterOutlet` のコンポーネントを配置します。
-
-## Initializing the router
-
-## ルーターのインストール
-
-Ionic Vue は内部的に [vue-router](https://router.vuejs.org/) を使用しているため、Vue Router にすでに慣れている場合は、これまでの知識を Ionic Vue のナビゲーションに適用できます。先ほど述べたルータの設定を見てみましょう。`router/index.ts` で次のように表示されます。
-
-```tsx
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import HomePage from '@/views/HomePage.vue';
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home',
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: HomePage,
-  },
-];
-
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
-});
-
-export default router;
-```
-
-:::note
-この例では、Ionic Vue の Blank starter を使っているので、実際にみる route は少し違うかもしれません
-:::
-
-ここでの設定は `vue-router` を直接使用する場合と同じですが、代わりに `@ionic/vue-router` パッケージから `createRouter` や `createWebHistory` などの依存関係をインポートする必要があります。
-
-依存関係をインポートした後、 `routes` 配列に route を宣言できます。そこから、 router インスタンスを作成し、route と使用する history のタイプを提供できます。
-
-Ionic Vue では、遅延ローディングはすぐに使うことができます。 `Home` コンポーネントをインポートする代わりに、次の操作を実行することもできます:
-
-```tsx
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home',
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: () => import('@/views/HomePage.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/HomePage.vue'`, we could simply do `'@/views/HomePage.vue'`.
-
-## コンポーネントのスタイル
-
-ここでは、 `App` コンポーネントを変更する必要はあまりありません。コンテナコンポーネントの基本的な例です。ルータロジックを設定すると、指定された URL ルートに一致するコンポーネントをレンダリングするだけで済みます。すでに 1 つのコンポーネント/ルータが設定されているので、 `Home` コンポーネントを変更しましょう。
-
-現在、 `Home` コンポーネントはこうなっています:
-
-![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 setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-</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>
-```
-
-最初に確認した `App` コンポーネントと同様に、特定の Ionic Framework コンポーネントのインポート、Vue からのインポート、Vue コンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。
-
-スタイルに `scoped` を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vue アプリケーションでは、 `scoped` のついたスタイルを使用することを強くお勧めします。
-
-`IonPage` はすべてのページ(route/URL を持つコンポーネント)の基本コンポーネントであり、header, title, content コンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。
-
-:::note
-独自のページを作成する場合は、 `IonPage` をそのルート・コンポーネントにすることを忘れないでください。 `IonPage` をルートコンポーネントにすることは、Ionic Framework コンポーネントが依存するベース CSS を提供するだけでなく、トランジションが適切に動作することを保証するために重要です。
-:::
-
-`IonHeader` は、ページの先頭に配置されるコンポーネントです。これは、フレックスボックスベースのレイアウトを処理する以外には、単独ではあまり機能しません。これは、`IonToolbar` や `IonSearchbar`などのコンポーネントを保持するためのものです。
-
-`IonContent` は、その名前が示すように、ページのメインコンテンツ領域です。ユーザーが操作するスクロール可能なコンテンツと、アプリで使用できるスクロールイベントを提供する役割を担っています。
-
-現在のコンテンツは比較的シンプルで実際のアプリで使えるものは何も入っていないので、それを変えましょう。
-
-:::note
-簡潔に表記するために、関数宣言や他のコンポーネントからのインポート文など、コンポーネントの繰り返し部分を除外します。
-:::
-
-```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>
-
-<script setup lang="ts">
-  import {
-    IonBadge,
-    IonCheckbox,
-    IonContent,
-    IonHeader,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonNote,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-  } from '@ionic/vue';
-</script>
-```
-
-ここでは、 `IonContent` に `IonList` と `IonItem` コンポーネントを追加します。ここでは `IonItem` を中心に説明します。
-
-```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>
-```
-
-コードを見ると、 `slot` という特殊な属性があります。これは、レンダリング時に `IonCheckbox` を配置する場所を `IonItem` に知らせるためのキーです。これは Vue API ではなく、Web 標準 API です。また、Vue 2 の slot API とは異なります。
-
-Ionic Framework の別のコンポーネントである FAB（フローティング・アクション・ボタン）を見てみましょう。FAB は、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。この FAB には、FAB、FAB ボタンおよびアイコンの 3 つのコンポーネントが必要です。
-
-```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 setup>
-  import {
-    IonBadge,
-    IonCheckbox,
-    IonContent,
-    IonFab,
-    IonFabButton,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonNote,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-  } from '@ionic/vue';
-  import { add } from 'ionicons/icons';
-</script>
-```
-
-メインの `IonFab` では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot 属性を使用して、レンダー位置を"fixed"に設定します。これにより、 `IonContent` 内のスクロール可能なコンテンツの外側でレンダリングするよう `IonFab` に指示します。
-
-次に、これにクリックハンドラを設定します。FAB ボタンをクリックすると、新しいページ(この後、すぐに作成します)に移動します。これを行うには、Vue Router のナビゲーション API にアクセスする必要があります。これは `useRouter` パッケージから `vue-router` をインポートすることで実現できます。
-
-```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 setup>
-  import { add } from 'ionicons/icons';
-  import { useRouter } from 'vue-router';
-  const router = useRouter();
-</script>
-```
-
-このコンポーネントファイルでは、 `useRouter` 関数をインポートしています。この関数を呼び出すと、コンポーネントからルーティングを操作することができます。つまり、Vue Router から履歴 API にアクセスし、新しい route をナビゲーションスタックにプッシュすることができます。利用方法は `IonFabButton` にクリックイベントを追加し、`router.push` を呼び出すだけです。この場合、私たちは `/new` という route にナビゲーションします。
-
-```html
-<ion-fab-button @click="() => router.push('/new')"> ... </ion-fab-button>
-```
-
-## 新しい route を作成する
-
-これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しい route をルーターの宣言に追加する必要があります。 `router/index.ts` を開いて、 `new` の route を追加します。
-
-```tsx
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import HomePage from '@/views/HomePage.vue';
-import NewItem from '@/views/NewItem.vue';
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home',
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/new',
-    name: 'NewItem',
-    component: NewItem,
-  },
-];
-
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
-});
-
-export default router;
-```
-
-route に `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
-
-新しく `NewItem.vue` ファイルを作成します。
-
-```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 setup lang="ts">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-</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.
-:::
-
-ここでの内容は、 `Home` コンポーネントに似ています。異なるのは、 `IonBackButton` コンポーネントです。これは、前の route に戻るために使用されます。簡単でしょ?わかりました、でもページをリロードしたらどうなりますか?
-
-この場合、インメモリ内から履歴は失われるため、 戻るボタンは表示されません。この問題を解決するには、 `default-href` 属性値を、履歴がない場合にナビゲートする URL に設定します。
-
-```html
-<ion-back-button default-href="/home"></ion-back-button>
-```
-
-これで、アプリの履歴がない場合も、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 setup lang="ts">
-  import { IonButton, IonContent } from '@ionic/vue';
-  import { ref } from 'vue';
-
-  const content = ref();
-  const scrollToBottom = () => {
-    content.value.$el.scrollToBottom(300);
-  };
-</script>
-```
-
-## Adding Icons
-
-Ionic Vue には [Ionicons](https://ionic.io/ionicons/) がプリインストールされています。開発者がアプリケーションで使用できるオプションはいくつかあります。
-
-### 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 setup>
-  import { heart } from 'ionicons/icons';
-  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
-</script>
-```
-
-ここでやっていることを詳しく説明しましょう。まず、 `heart` のアイコンを `ionicons/icons` からインポートします。これにより、アイコンの適切な SVG データがロードされます。
-
-Then we pass the icon data into the `ion-icon` component via the `icon` property.
-
-開発者は、モードに応じて異なるアイコンを設定することもできます:
-
-```html
-<template>
-  <ion-page>
-    <ion-content>
-      <ion-icon :ios="logoApple" :md="logoAndroid"></ion-icon>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script setup>
-  import { logoAndroid, logoApple } from 'ionicons/icons';
-  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
-</script>
-```
-
-> Note: これらのアイコン名は、読み込み時にはキャメルケースで読み込む必要があります。
-
-### グローバルインポート
-
-もう 1 つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
-
-とはいえ、特定のアイコンをグローバルにロードすることに意味があるユースケースがあるかもしれません:
-
-**main.ts**
-
-```tsx
-import { addIcons } from 'ionicons';
-import { heart } from 'ionicons/icons';
-
-addIcons({
-  heart: heart,
-});
-```
-
-**HomePage.vue**
-
-```html
-<template>
-  <ion-page>
-    <ion-content>
-      <ion-icon icon="heart"></ion-icon>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script setup>
-  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
-</script>
-```
-
-`main.ts` で `addIcons` 関数を利用すると、アイコンをグローバルに登録し、キーとして文字列で指定することができます。この場合、 `Home` コンポーネントでキーでアイコンを参照します。
-
-## ビルドの最適化
-
-Vue には、アプリケーションを調整するためのツールがいくつか用意されています。このセクションでは、Ionic Framework に最も関連するオプションについて説明します。
-
-### ローカルコンポーネント登録 (推奨)
-
-デフォルトでは、Ionic Framework コンポーネントはローカルに登録されます。ローカルでの登録では、これらのコンポーネントはそれぞれの Vue コンポーネントにインポートされ、提供されます。これは、遅延読み込みとツリーの共有が Ionic Framework コンポーネントで正しく動作するため、推奨される方法です。
-
-この方法の 1 つの欠点は、Ionic Framework コンポーネントを何度もインポートし直すのが面倒なことです。しかし、その見返りとして得られるパフォーマンス上のメリットには価値があると考えています。
-
-また、ローカルに登録されたコンポーネントはサブコンポーネントでは使用できません。サブコンポーネントで使用するためには、Ionic Framework コンポーネントを再インポートする必要があります。
-
-ローカルコンポーネント登録の仕組みを見てみましょう:
-
-```html
-<template>
-  <ion-page>
-    <ion-content>
-      <SubComponent></SubComponent>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script setup lang="ts">
-  import { IonContent, IonPage } from '@ionic/vue';
-  import SubComponent from '@/components/SubComponent.vue';
-</script>
-```
-
-In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. 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.
-
-詳細については、<a href="https://v3.vuejs.org/guide/component-registration.html#local-registration" target="_blank" rel="noopener noreferrer">Local Registration Vue Documentation</a> のマニュアルを参照してください。
-
-### グローバルコンポーネント登録
-
-コンポーネントを登録するためのもう 1 つのオプションは、グローバル登録を使用することです。グローバル登録には、 `main.ts` で使用するコンポーネントをインポートし、Vue アプリインスタンスで`component` メソッドを呼び出すことが含まれます。
-
-これにより、Vue アプリに Ionic Framework コンポーネントを追加するのは簡単になりますが、グローバル登録は理想的ではありません。Vue のドキュメントを引用すると、「Webpack などのビルドシステムを使用している場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントの使用を停止しても、最終ビルドに含めることができます。これにより、ユーザーがダウンロードしなければならない JavaScript の量が不必要に増加します」とあります。
-
-グローバルコンポーネント登録の仕組みを見てみましょう:
-
-**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 setup lang="ts">
-  import SubComponent from '@/components/SubComponent.vue';
-</script>
-```
-
-上の例では、 `IonPage` コンポーネントと `IonPage` コンポーネントを使用しています。これらを使用するには、まず `main.ts` の `@ionic/vue` からインポートします。次に、app インスタンスで `component` メソッドを呼び出し、タグ名とコンポーネント定義を渡します。これを行うと、各 Vue コンポーネントにコンポーネントをインポートしなくても、アプリケーションの残りの部分でコンポーネントを使用できます。
-
-詳細については、<a href="https://v3.vuejs.org/guide/component-registration.html#global-registration" target="_blank" rel="noopener noreferrer">Global Registration Vue Documentation</a> のドキュメントを参照してください。
-
-### JavaScript のプリフェッチ
-
-デフォルトでは、Vue CLI はアプリケーション内の JavaScript のプリフェッチ・ヒントを自動的に生成します。プリフェッチでは、ブラウザのアイドル時間を利用して、ユーザーが近い将来にアクセスする可能性のある文書をダウンロードします。ユーザーがプリフェッチされたドキュメントを必要とするページにアクセスすると、ブラウザのキャッシュからすぐに提供できます。
-
-プリフェッチは帯域幅を消費するため、大規模なアプリケーションを使用している場合は無効にすることをお勧めします。これを行うには、`vue.config.js`ファイルを変更または作成します:
-
-**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
-```
-
-次に、プロジェクトをビルドしてから利用するプラットフォームを選択します:
-
-```shell
-ionic build
-ionic cap add ios
-ionic cap add android
-```
-
-iOS と Android のプロジェクトを開いたり、ビルド、実行するのに、ネイティブの IDE(Xcode と Android Studio)を使います:
-
-```shell
-ionic cap open ios
-ionic cap open android
-```
-
-詳細は [こちら](https://capacitorjs.com/docs/getting-started/with-ionic) をご覧ください。
-
-次に、 [すべての利用可能な APIs](https://capacitorjs.com/docs/apis) を確認します。[Camera API](https://capacitorjs.com/docs/apis/camera) を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:
-
-```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="imageSrc" />
-      <ion-button @click="takePhoto()">Take Photo</ion-button>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script setup lang="ts">
-  import { IonButton, IonContent, IonHeader, IonPage, IonTitle } from '@ionic/vue';
-  import { ref } from 'vue';
-  import { Camera, CameraResultType } from '@capacitor/camera';
-
-  const imageSrc = ref('');
-  const takePhoto = async () => {
-    const image = await Camera.getPhoto({
-      quality: 90,
-      allowEditing: true,
-      resultType: CameraResultType.Uri,
-    });
-
-    imageSrc.value = image.webPath;
-  };
-</script>
-```
-
-## 次にすること
-
-このガイドでは、Ionic Vue アプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としての Capacitor の紹介について説明した。Vue と Capacitor を使って完全な Ionic Framework アプリを構築するには、我々の [First App guide](your-first-app.md) をご覧ください。
-
-Ionic Frameworks のコンポーネントの詳細については、 [component API pages](https://ionicframework.com/docs/components) を参照してください。Vue の詳細については、 [Vue Docs](https://v3.vuejs.org/) を参照のこと。ネイティブ機能の構築を続けるには、[Capacitor docs](https://capacitorjs.com/docs/) を参照してください。
-
-アプリ構築をお楽しみください! 🎉
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
deleted file mode 100644
index 18aee0b6c25..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/slides.md
+++ /dev/null
@@ -1,570 +0,0 @@
----
-title: Migrating From ion-slides to Swiper.js
----
-
-<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.
-
-:::note
-Swiper's Vue component is set to be removed in a future release of Swiper, with <a href="https://swiperjs.com/element" target="_blank" rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
-
-Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
-:::
-
-## 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@latest
-```
-
-## 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>
-```
-
-:::note
-Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
-:::
-
-### 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. However, using this module is **not** required to use Swiper.js in Ionic.
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md
deleted file mode 100644
index a39c00b38b3..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/storage.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: データストレージ
-sidebar_label: ストレージ
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md
deleted file mode 100644
index fee206f3407..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/testing.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# テスト
-
-Coming Soon!
diff --git a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md
deleted file mode 100644
index faf7f6f620c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/troubleshooting.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: トラブルシューティング
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md
deleted file mode 100644
index bf3918d19ee..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/utility-functions.md
+++ /dev/null
@@ -1,184 +0,0 @@
-# ユーティリティ関数
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md
deleted file mode 100644
index f0f65260b51..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/virtual-scroll.md
+++ /dev/null
@@ -1,143 +0,0 @@
-# 仮想スクロール
-
-:::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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
deleted file mode 100644
index 6e8658b964c..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app.md
+++ /dev/null
@@ -1,222 +0,0 @@
----
-title: 'Your First Ionic App: Vue'
-sidebar_label: はじめてのアプリ
----
-
-<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
-```
-
-:::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
-```
-
-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 `ExploreContainer` node from the HTML markup in the `template`.
-
-```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 setup>` 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';
-```
-
-Since our pages are generated as [Vue Single File Components](https://vuejs.org/api/sfc-spec.html) using the [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html#script-setup) syntax these items are now exposed for use in our template.
-
-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>
-```
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
deleted file mode 100644
index 62f3b88568e..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/2-taking-photos.md
+++ /dev/null
@@ -1,155 +0,0 @@
----
-sidebar_label: カメラ撮影
----
-
-# 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:
-
-```typescript
-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:
-
-```typescript
-export const 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 `Tab2Page.vue` and import it:
-
-```tsx
-import { usePhotoGallery } from '@/composables/usePhotoGallery';
-```
-
-Destructure the `takePhoto` function from `usePhotoGallery` so we can use it in our `template`:
-
-```tsx
-<script setup lang="ts">
-import {
-  IonContent,
-  IonCol,
-  IonFab,
-  IonFabButton,
-  IonGrid,
-  IonPage,
-  IonHeader,
-  IonIcon,
-  IonImg,
-  IonRow,
-  IonTitle,
-  IonToolbar,
-} from '@ionic/vue';
-import { camera, trash, close } from 'ionicons/icons';
-import { usePhotoGallery } from '@/composables/usePhotoGallery';
-
-const { takePhoto } = usePhotoGallery();
-</script>
-```
-
-Save the file. Start the development server via `ionic serve` if it is not already running. In your browser, 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;
-}
-```
-
-At the top of the `usePhotoGallery` function, 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` function, 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();
-```
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md
deleted file mode 100644
index 1c5be3c3957..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/3-saving-photos.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-sidebar_label: 写真の保存
----
-
-# 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`).
-
-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> => {
-  // Fetch the photo, read as a blob, then convert to base64 format
-  const response = await fetch(photo.webPath!);
-  const blob = await response.blob();
-  const 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md
deleted file mode 100644
index 5abafd7eba3..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/4-loading-photos.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-sidebar_label: 写真の読み込み
----
-
-# 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). Earlier we had already imported `onMounted` from Vue:
-
-```tsx
-import { ref, onMounted, watch } from 'vue';
-```
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md
deleted file mode 100644
index 303530bf690..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/5-adding-mobile.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# モバイルデバイス機能の追加
-
-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 and `Capacitor` from Capacitor's `core` package:
-
-```tsx
-import { isPlatform } from '@ionic/vue';
-import { Capacitor } from '@capacitor/core';
-```
-
-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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md
deleted file mode 100644
index 7e31d2b0796..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/6-deploying-mobile.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: iOS と Android へデプロイ
-sidebar_label: モバイルへのデプロイ
----
-
-<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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md
deleted file mode 100644
index e432a9eb581..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/7-live-reload.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-sidebar_label: ライブリロード
----
-
-# 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 `Tab2Page.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
-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 `script 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, 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/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/8-distribute.md b/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/8-distribute.md
deleted file mode 100644
index d6b38ea5b5a..00000000000
--- a/i18n/ja/docusaurus-plugin-content-docs/version-v6/vue/your-first-app/8-distribute.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-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! 💙

From 8558baae9efcb069d655e0bce49e685c6dc0799c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 25 Jul 2023 16:09:35 -0400
Subject: [PATCH 446/469] chore: JP docs point to v7 (#3056)

---
 scripts/i18n.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index a0950441fb8..166855aaed1 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -2,7 +2,7 @@
 set -o errexit
 set -o nounset
 
-mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v6/
+mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v7/
 curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
-  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v6/ --strip-components 2 ionic-docs-translation-jp/docs
+  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v7/ --strip-components 2 ionic-docs-translation-jp/docs
 node scripts/api-ja.js

From 1d2347e7b4c4c13ed2e4abd719fe4efb1fe559bd Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 25 Jul 2023 16:36:56 -0400
Subject: [PATCH 447/469] chore: use correct name for JP docs (#3057)

---
 scripts/i18n.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/i18n.sh b/scripts/i18n.sh
index 166855aaed1..046812c4f7b 100755
--- a/scripts/i18n.sh
+++ b/scripts/i18n.sh
@@ -2,7 +2,7 @@
 set -o errexit
 set -o nounset
 
-mkdir -p i18n/ja/docusaurus-plugin-content-docs/version-v7/
+mkdir -p i18n/ja/docusaurus-plugin-content-docs/current/
 curl -fsSL https://github.com/ionic-team/ionic-docs/archive/refs/heads/translation/jp.tar.gz |
-  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/version-v7/ --strip-components 2 ionic-docs-translation-jp/docs
+  tar -zxf - -C i18n/ja/docusaurus-plugin-content-docs/current/ --strip-components 2 ionic-docs-translation-jp/docs
 node scripts/api-ja.js

From 13b92d8b453dd4df2b297405ab4155a3f8d6ed48 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 26 Jul 2023 17:24:24 -0400
Subject: [PATCH 448/469] docs(android,iOS): link to capacitor getting started
 guide (#3055)

---
 docs/developing/android.md      | 230 +++-----------------------------
 docs/developing/ios.md          | 185 +++----------------------
 static/icons/capacitor-logo.svg |   1 +
 3 files changed, 41 insertions(+), 375 deletions(-)
 create mode 100644 static/icons/capacitor-logo.svg

diff --git a/docs/developing/android.md b/docs/developing/android.md
index d734f985a52..f5b5c0180cd 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -11,218 +11,28 @@ sidebar_label: Developing for Android
   />
 </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.
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
 
-## Android Studio
+:::info Looking for the legacy Android guide?
 
-[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.
+The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](/docs/v6/developing/android).
 
-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 from the context menu at the top right of the Android Studio welcome screen (select **SDK Manager**) 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. To find the SDK Location in Android Studio, click **File** > **Project Structure**. Select **SDK Location** in the left pane. The path is shown under **Android SDK location**.
-
-   ```shell
-   $ export ANDROID_SDK_ROOT=$HOME/Library/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<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 Virtual Device Manager. In the Android Studio welcome screen, the context menu at the top right, then **Virtual Device Manager**. The Virtual Device Manager can also be opened inside Android projects in the **Tools** &raquo; **Device 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 the <a href="https://www.oracle.com/java/technologies/javase-jdk11-downloads.html" target="_blank">Java Development Kit (JDK) 11</a> if you are using **`cordova-android`** `10.0.0` or greater.
-
-:::note
-If you are using any version of **`cordova-android`** below `10.0.0`, install the <a href="https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html" target="_blank">Java Development Kit (JDK) 8</a>.
-:::
-
-### 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. **Perform an Ionic build, if you haven't already.**
-
-   ```
-   $ ionic build
-   ```
-
-2. **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
-   ```
-
-3. **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. **Run the app on a simulator or device.**
-
-   You can open the Android Studio Project using:
-
-   ```shell
-   $ ionic capacitor open android
-   ```
-
-   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
-```
+<DocsCards>
+  <DocsCard
+    header="Developing for Android with Capacitor (Recommended)"
+    href="https://capacitorjs.com/docs/android"
+    icon="/icons/capacitor-logo.svg"
+  >
+    <p>Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Capacitor.</p>
+  </DocsCard>
+  <DocsCard
+    header="Developing for Android with Cordova (Legacy)"
+    href="/docs/v6/developing/android"
+    icon="/icons/native-cordova-bot.png"
+  >
+    <p>Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Cordova.</p>
+  </DocsCard>
+</DocsCards>
diff --git a/docs/developing/ios.md b/docs/developing/ios.md
index 553c3580655..5213325ac35 100644
--- a/docs/developing/ios.md
+++ b/docs/developing/ios.md
@@ -12,173 +12,28 @@ skipIntros: true
   />
 </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.
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
 
-There are two workflows for running Ionic apps on iOS:
+:::info Looking for the legacy iOS guide?
 
-- [Running with Xcode](#running-with-xcode)
-- [Running with the Ionic CLI](#running-with-the-ionic-cli)
+The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](/docs/v6/developing/ios).
 
-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)
+<DocsCards>
+  <DocsCard
+    header="Developing for iOS with Capacitor (Recommended)"
+    href="https://capacitorjs.com/docs/ios"
+    icon="/icons/capacitor-logo.svg"
+  >
+    <p>Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Capacitor.</p>
+  </DocsCard>
+  <DocsCard
+    header="Developing for iOS with Cordova (Legacy)"
+    href="/docs/v6/developing/ios"
+    icon="/icons/native-cordova-bot.png"
+  >
+    <p>Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Cordova.</p>
+  </DocsCard>
+</DocsCards>
diff --git a/static/icons/capacitor-logo.svg b/static/icons/capacitor-logo.svg
new file mode 100644
index 00000000000..1879564177c
--- /dev/null
+++ b/static/icons/capacitor-logo.svg
@@ -0,0 +1 @@
+<svg height="2500" preserveAspectRatio="xMidYMid" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256.005"><path d="M39.863 54.115L.31 93.716l60.995 61.179L0 216.385l39.428 39.62 61.43-61.508 61.097 61.068 39.552-39.602z" fill="#53b9ff"/><path d="M140.517 154.896l-39.658 39.601 61.097 61.069 39.552-39.602z" fill="#119eff"/><path d="M140.517 154.896l-39.658 39.601 15.267 15.182z" fill-opacity=".2"/><path d="M194.57 100.985L256 39.478 216.43 0 155.02 61.384 93.917.31 54.365 39.913 216.01 201.761l39.552-39.602z" fill="#53b9ff"/><path d="M115.36 100.987l39.659-39.602L93.917.313 54.365 39.914z" fill="#119eff"/><path d="M115.359 100.985l39.659-39.601-15.27-15.186z" fill-opacity=".2"/></svg>
\ No newline at end of file

From 71e57ed60f06be63c883963deb54af0c751278ae Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 1 Aug 2023 12:06:47 -0500
Subject: [PATCH 449/469] docs(theming): add section about safe area padding
 (#3065)

---
 docs/theming/advanced.md                    |  26 ++++++++++++++++++++
 static/img/theming/ios-landscape-left.png   | Bin 0 -> 22985 bytes
 static/img/theming/ios-portrait-top.png     | Bin 0 -> 26422 bytes
 static/img/theming/modal-header-padding.png | Bin 0 -> 14122 bytes
 4 files changed, 26 insertions(+)
 create mode 100644 static/img/theming/ios-landscape-left.png
 create mode 100644 static/img/theming/ios-portrait-top.png
 create mode 100644 static/img/theming/modal-header-padding.png

diff --git a/docs/theming/advanced.md b/docs/theming/advanced.md
index 20516abca8b..2911d7c0e58 100644
--- a/docs/theming/advanced.md
+++ b/docs/theming/advanced.md
@@ -180,3 +180,29 @@ However, because CSS variables can be set at runtime and are more dynamic, it is
 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.
+
+## Safe Area Padding
+
+The safe area of a display is the section that is not covered by the device's notch, status bar, or other elements that are part of the device's UI and not the app's. The dimensions of the safe area are different across devices and orientations (portrait or landscape).
+
+For example, below are screenshots of an iPhone 14 Pro Max. The red section is the safe area, and the white sections are places where the app's content would be covered up.
+
+| Portrait                                                                       | Landscape                                                                        |
+| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+| <img src={require('@site/static/img/theming/ios-portrait-top.png').default} /> | <img src={require('@site/static/img/theming/ios-landscape-left.png').default} /> |
+
+To accommodate this, Ionic automatically adds padding to certain components. For example, the first `ion-toolbar` component placed in an `ion-modal` will receive padding according to the top edge of the device's safe area. This avoids the device's notch covering up the header text.
+
+<img src={require('@site/static/img/theming/modal-header-padding.png').default} />
+
+This padding can be manually adjusted through CSS using the `--ion-safe-area-(dir)` variables described in [Application Variables](#application-variables). Values can be set for the whole application, or on a per component basis. For example:
+
+```css
+html {
+  --ion-safe-area-left: 25px;
+}
+
+ion-modal {
+  --ion-safe-area-top: 0;
+}
+```
diff --git a/static/img/theming/ios-landscape-left.png b/static/img/theming/ios-landscape-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..9086cbc75c8d047a27cfc4815f1a2ac1de29793e
GIT binary patch
literal 22985
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
Tyd<X_JcH)x>gTe~DWM4f6S5r2

literal 0
HcmV?d00001

diff --git a/static/img/theming/ios-portrait-top.png b/static/img/theming/ios-portrait-top.png
new file mode 100644
index 0000000000000000000000000000000000000000..d79ad04d012b160a64609c427f2573b9ff44f01c
GIT binary patch
literal 26422
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

literal 0
HcmV?d00001

diff --git a/static/img/theming/modal-header-padding.png b/static/img/theming/modal-header-padding.png
new file mode 100644
index 0000000000000000000000000000000000000000..9dd30ffa729e1630ef86f72a1f2caff8761f164a
GIT binary patch
literal 14122
zcmd_RS6EY9v<8YBg^djXML_|jBt$@@gkD4tNFbD;6lsElE=cd7pcLs@p@j|sj5O)e
zRS*d!VCY?tF1<>>3->wa{l46nyS@*yQs$Urj`ELxmKCO@p>pXw>v<|Fs!Iq}B{UTk
zwIg^x@$Wz2|CMN8MeyZ}3tHtNRT25t0{G^vl>$nEimD{~!lBtY@IBp2RRb3)sypJR
ze`iGW)4i#v#2OJw3XeTamQxKrUYn_(2kx49sy;!_=zQ2nl$qAPt4Z8Q%NC!t)XIMK
z?$#}>GZ-x5?Im91l^Cxy3rK`;&7%k0|7N{XOhJjJB~Fgkh@bay986Yl={oWVI9b`=
z9vHJ*stD<8G(B3J{<O>Lz5UcKK)#{ar_k{T)PjoYL4_7@`l=<{%YFL#m>y1d`r4<6
zIvv%6Z7o0+dqPV^)txb~MJr2dTRM{I2m!xQRR~d^XV(IZgB$L=+YnSzQrZ%rWi!uo
z$%On4Z>R~Msxv$fN_Z71qD2!Qbh$%|_B|=$$AG=|`BR%wwZ41i3I4wF&V~0R`|bhD
zh_$#v@aGTauCN96bicl3`wCyc?#BYjEH(yzJui2)6RAM!`TmM+srlBm1SMUDJ=DB-
zCHR$B6Dw`d7a{7_HuX#h-vd)~W_)x@TNn=)_#IC3{wrPMq<#r@m5>15b8rJzKa{~d
zU$JwbdqHsVFaOk^Pn49J9g0OfiRAlv)X%Q<UQKWk{rC1cTVWQzz2^6#oSlvFZ7@~8
zxp`@1we1Besu=MCr|ztnG)%^GC(QiE^jE?E=xYJ@_RYi0k4v(OKcaC!w1NclICmP%
z$f*v?3yw&$nT70|O>KI&|Hh(@hN&(({&+q;RGIpZ7I1Fs9Ai#Ll<3I{B3!kK?fLvo
z<%vfI&MXWJB{vh{Z|BuB3L1J#YDGmcu=fahKW+WTS7H}>Vm3JYeIu9&eNl8*$9)oB
zoS~xH2!pfIC|aCH__17U7Us><(b2V4pH8eBAT(V0N0hUDx%KS%b2hR4QM$sAm#{5#
zDO*~?6$XZz4?Pn3Zd?q7SzAM5ZzT{h#2{boz{fAUKeqDh6(amL1lpohtGH(13#pmR
zJSH*wf*<sym4P2kUO^Qj?ygtuRg{$MZ!ZgxSr1aogfgz+g<Lx#8Tr)ic){vMiER?B
zERtLvaAKGH)gupOsRafD^UK0%(P5MC9dGzaR~zw9Jp#=i+|BZnA6QdS&xccs3T5N8
z<4K!wIi-}<5G7IR4TUIMbow~&H!gIjhlMYM5~iAWd)b%2{CS9t%C|bh<DII;`s4lI
zwP^wV>r*^Bx#}!p_WF(fM-HDRgXR4859d|n_m6iQPwH3wial1x>%F)4!6runU}Od>
z(nzq(T6_fVXwt~B99vw$WopqVu`pv^;_jenkSzBw-4PX*A>wt)`@-xA8U`(8!g7WN
zEst|7--bg}vw?7YZ=NVJ2Z)6+7<`Uu{dl|3m%l?AuXi$3W+nb&Sk!A{dc?8uXxOg!
zXvL#3fAuuKc&S;WFjR47k7;yR(3oeDJ2^#(v`z~+jQv-1$nLAVrD&$6M=k^>n?roB
z6(uVoD&pmna#eiTV|69w^TJXGyeBbFODz_Tb|(Z+I<Ntr3x=Tgse~T}>#<m1-p8HM
z3pUQ@e`{^9*u9*sSaV0rkSO^qlN1v;t9&*ROOs<}hfc5Oz1FGX4aDmG3VC#wtZw1y
zT_Hm2^=EAon&!LFa?|mU?9q^2><WsVziP1-cSoPboFyt%Qcc9x2Z~KD8Re2PBnAb9
zx;*3A#GPaP2-#kEH|1vGjg;Dq)leA*V#62~t`V-svTvCC9i)29cBCHUn;v}tZNKkK
z16uvwBN_|~9`h>RtVS#T_+JxIzEon{AV~_(i1@P{8wyd&?$&}6HMMaY(r6P71RL=W
z8*yIULX<Q5mZY%z(jdplpYQvnAez2%2)o!XY|;Mtg;h>SdfYkDGrppiE}G~lm!iu!
z!)}RUf_e#Z0@`;MRd;{35=gD(p|^ybr|JFIsQuoaA`QJlup>*e8U|zWLHHlkLeIZo
zpep0gY(&_C8(}jkHa2Q&{yy8n^QbV~!05<ood}V*00vWR13PH)jPIP(H5Y&PbADpk
z;o+;lsHM)~X)VGV+x3CpTP8>OT{sOYI>%~&AV()eK~s{VaaN|Lv~n=E1r6mQgR<G+
zn-1N29H5CsuLw7{KS;m-#HQ`R{lcG_N6%h17Hju#1?M9FVHKB+VK)M5R<o}rW6Ni`
zj-tw=qAyBQOnY}UiW&UWRoe0w$9Bg##2rTA14h|`r+99yW$`IN!8F*v6WMb%kb_PR
za_j61Iu1eDvRB(<Q9~n9CvR5SQixl^cV0=Jr0!S~q<7+;YBAUI@L^hd_N9U1^o9md
z%x!U1Dpi`ZI&qLIbu*4HkUdudE#KZ5#<6k<iJCBWk1j}V)!}<(*}na5Eyt-#DhU^I
z9g$R*TMG@VOgzTi_5)9m--uJ_HsXpH=HsDpIjlX2u=SgVAu^5qq2>p~*cTzRG$kD?
zx)~cNS3Bc2UE}t9e`_IIkQ3~@RhE$kOM4BT1H00R>;!J$Md+-l+<d&%QH%bO+P+AN
zOjvBrGL_fxQPf4v(jQTy<u*MP119-`x4_0!7sAdW-s<a^Y$T&^Dt0fe-4`;)qWQi(
z%7&cj%veEny+@2?Yu81oBS{n;Y%bTg%kn%yQKMy6tC|7(I({XmA_%v?+#b3jmIG`1
zd5aCWc})Yo{{#qa(Gt(4?Io<V^M<j(T6HYk2)Ts%askb<1W-&pZcA#TLMP9mdWPBW
z^{Eit>*gTtH)1)6w#$xKiXBpiJ<x`M9)RY;DnK{57>S0}@Qu|&+ys@0_DJDBTj^?+
zNa5kwlRw2LtU~652C#HcQQcK~_|Tb?2t&R4cbGenh?@d%Vb(X?)N0&Ni^pYaQo=$!
z%P`Vyo+cPc?HEUpR6=*>EQc?LUl*L+<T?#gWo{_<U2cJ;EKyn=<Qv{xjk7&`51(r9
zS1_q;zCZZkXNTT3!ckx>hGRRq-1Sir>WDN6FYIa=*!I=M*z%aqFQKsdTu}s?^r0#^
zI$Rkoo-N%^Soz3HVzbe$qTZrICStdAD66V_9!&%Uuw?@>1*+Doq>EvfdT<clR0J|I
zPI#8r2dU#;i|;+U$|JxNUg+>Wk6W;kL(ch)X6#w8qZ-bVJEY7D6aLz{8fbhJgSWGm
zdp5pzjEPH<he@yMh{<8Ad3g|Lp`!!HkxtFxru?-DjHe)BnX!@P@Mq4sQ%@Wfm_Fn$
z+=CN+c-{@fB4B$J1dCU43_FXJu7m{a+idQxG(SL4^|U(;<qbv7=Ce7VTM-5peTJOS
zGmW8)KVlZqHIG2EhQ?yCE3dJZZX@Z~a^0#Rrm6%1!~T3dK|fv4DpXPoVOJ0g#@m(Q
z8>I>N+_h~-{|(c@v8vEnYq+r)n*udZ^Q)SOxd#Xl9@t?1$n|?BzCT~nZjr#AspdJk
zRk_thpE%xO#qF5k@N!~!RXXd(ZVbj?n$u@_vKe?GrSeCt$SFr8P5-Q}J7Aj!37iI;
zPS~2o7j4S-3%LkqF;8`DpSqnhHUReLpEv7l*a<ywFB=*u{dEC4nuy!ds}eM_pD6co
z0gK)C5cO%VG^#18S*q`^zN4JYNy9(?N2Pmqz58luw-NFIb$-tR9^Xs5oL$=jP4N?L
zT{+yGFbP<Wru_zRH1ejc`E6%guKx+?Y&?0^ICqeyGBM(@HC7MIMK4NETV+<sS|6rY
z$^G;>xzxB`k6GKU8lCgntUtLo?%LHj;kpY}KZ*H((8hNQN286ej5cz8jysKh)W&`p
zII;XVUNG7)8a`_Lvhl6Jg7{X8LiDJx^KiYUV1Vn`>qp-YU$oqF9dEHwgj~KMu{bLo
za>B|`qD(96{994y`1x|fIdVF_&Mw$y;ulB5vx5(-VbRGwqS*o093;zqXYq*V{yr!5
zzZ`3y{}FTu_!Ho!m?yyIu>o9<>~CpwUDQk~4)AW>E^9J9TrGR5M$`HJtZ1cF?7jC0
zzXE2<Dqp4}US|bX*#bni9>4()pM7F&61%|~C*iZcv?J8Bnqd9gj(-Rj1mHK=1)1S|
z+4xXgd*X!&-{Jsc1R|en8HYPqmS39Nl^+gh`>G-)Du`%R`7Il4JjJ)V{6enYt#jNf
zJFRAw%+RQ;RPdE_L0PS#ZfiE``Rc06aqINx{acZiKQFrt|M<baZ|C|uHV*5cm`pP&
zIhCM6aVz{~by;$Qyg7{Pr%BF`ndzO*3pw5}wNe+n)*XR-0OXg=FX4MtSeghHtpgLj
zU;#TkT+M4b;yV~#a@|CW2&$~Y_rJUzD|Was?5fvjCci4aq}-L6=B`VlU|@~ZdHo}|
zyo>^8jP1t};2cCY$(Ow-Cd<ol0h!9@g%`%IH4s1Ajhzg~!!EG1Y_&SlM0}!SC{bU%
zIT1jrv@-Fxs@jB}>$&(`sPkoWF_3KfRLp5*&8KB-@r|+GUN`Rbf#!>QBD^_}oTyPn
z7(AP?du{QmR0U*v{acKm87JkobbE@`^8o^a#H4^^HN7V9Z8p-LzrucyeB9)JZ(qSC
z!V)tjlS9{LtwUq5z#7*2(q;r7eG7~b(x%F?Y>75!X?HAUF8k=yM>Svfqu$!@V`9&y
zQK6wcaq`!@mJNR%vV3`Z(eMM4jHmlSdCspDwt!^7Bej^Yypx^(OJVORKW{z$DghAX
zrWVa*>^}S;pQ;D!x0<(_bdODP9q`Iv4F4RiI<~Uo>R|_ucM6V5MPSvLUh8a40Y6SM
z(|z_8lH%h^a(fYNZwkuWgc)PMe5>1Qz0KnoFn|4*<;5YVt!lmTF`uP+zv0+^QG!mS
z^1<t8;_Kap(on%0%NK8ihK7;79X8Y)mtBt|p6xN064k~6Y&V;$n`omNNMUv4Eih<C
zU0>ReGJ5e#@d`r-I58TgEW?B0AVmqo7P?Rk47r4%YA|Hc=wsveY%Bwv$SPP60?EhM
zl&k(DO0~NGC*2XVLz@2<y$=_gO{WSaN|qccc#mbTx1OB%I&@ybf3`dIdz#DfE3p4S
z;>ai8xq?g-bqe{n`T(0gL18bf!c14|curm;IdN;=QelV%Q~?62P>)%mV!{Q)<IB-#
zT)n;fF1~(qDep@m;&~kmrNwO1)_tENDDdixxpQHx=6LO9Ttyh04Z8GQ)J2Zl?wKJI
z<8aI*mq%m+3qwihg(`LVonyH<`hUe<(V9#MySGpqyFos^LB(d^@VI*v)eWE0gR_`1
zJ2Zz1<Ni-SMxBk)MoMZTHh;InEsgpI3Ney}S^!Bg>HFvO?VJ0XbRr>1q5RcF%gtFY
z{=EEnbAM@{xEoR1$s&1$L6KJ8{UCVu8#(>5{r%+G=q0SnXC6mN;D$>h<Qyu8kkR`Y
z`LL`&uD1%Z&A@G@sosL7<RcKI_5{Hb16$$2WScT<rGwJ2@+_?I?do)H#GprOBqbKY
z*%WnAr!>oLd2RC9uIsnWuFI)1-7GR-hu;r(Ub7V!I32q_Q@o2B+S|n0h~UysjxHg%
zIF@<7TtY?`ScsArAF$b>t7OBlFt2Z#h+;^SrXW4qdF=IDvcF)~O<c=7H>M88_FcVk
zqWya}a+d2tG4;|N2Y;Kr`8-<bAX-jy>z+gH1Cx>I!-dZ@?q3TsHH>==5viV9-f*uy
z=QTIUr>KV>|F(Je5ggnY5ila$hCF*&XM>WXmJ4aZfl)>*`>wW_OZaiQ?O9rBOx$aF
zjk?XfU%xv=EzE>Vm-brMuDy~~wPj=oS3}KqQx`jWS+_la-e0tx<X^qbn-i+eW}}67
z-dOW4wF@dOvn$QQEv?xJA9imntLW)@TnS3XwzS6LbPe_mPC-VklHBcH&MBON<)_3>
zhSU3G^>TAEC*V5@+dasvqO;6-LW_j6(VLPuw9@Q_`nOL5(TV~(i)f&x9x)$uQAfD6
z<pp}<T{_ku<?iYWfiJAK`Q?cXY)o!DAX$UBVA&Y2U)g0LZzpfeW(#b_UgC#`g?`I{
zxU7K5mD=(iz{)bpn`z<k7k$7&3Bmo`C9vUGO%T>a7?mA3(GagBA(Vv2>T$xnO6rfw
z8q=_;p3|vwWq339AmLv6HlLR9yF!!Y**C~a!BPx1t|l)BnQ|ZuC7*h^9b`*OT^dwW
zrl5!S9ATV@?1x$=uxmJ0Q<8N#Mrp2(0AK^<JfS?DtRCNa5G0Vl`R{)tGNspnsd&Ze
zq(5sU_I0%EK@1R4sUgwgW@0<2_&<_aInp;jGTqqLVpM(D+DjnBjsfc#qJB>_v}{4i
zEpXz<4K8)W7a7XeNvvLDRGvj`I`;ZKRaAr6iv<a*E=$Z{EVc5nZQqKd23tIFbNFl8
z3i-L+_s(037uiEYGkfAA9p&o#_Ih6Lxo)Rbr>+%7Fg|3&rTaS}DXRa#V7w?a9i+72
zn&YLCv!Y|Ax7+c(h2h%#JdHbOwELqwJc3C$`vjbQ?Mt(nn!Hp$d?6OA2pL;AYc45O
z47I<pn?8Ivm@-NJ`8xE5lnbgSv&vm6K<a+i<z(Lko$E=`0X^lKjh-k<>nh2;2Y~SM
zWYuMe8qb)a^L2uR%kaI+?_y)H{j45|*uY#1m5>DNc=Pnz$eZHh-rqG-+3<y^O%<sm
z{U~z#zc)z<<D*06&&owSZ*vBdM?{zBYkgAW*%DoNpedhQN9XAI6GS(>DW+@gU^nkY
z3(xi#rry8}^%5Mk8O=~F^a&Tyl=Q@{uDTMPjmVxnpWPMXMtmK}E|?v>hP~jo*?j^g
z0JRp$)2y4PEQ>@3czy=W#;dJ8AxPef4gf?;gD49KX<n35oC{S>hL9dL3n*L-OgokW
zC)1;0HH2Mct*peRvioDhk+<oG)6j|i{;I{t0JX|Q`F1OE&h3?TO2d?p)!GB4i^la<
zX`3q4KX`4l8=JsH<BsHx`I^>yZZ%7GNK(PT4z;LDcvjgMgZ<J>@cTq~hNj3HQKUiH
zz0~wFw_yf(_&Sfn7yRgF4C%(=+bd30lD}v<vpgr>`2RN5pFaHY;9}h8_dOxB2nNJ;
z#O)zjn?Oo0jzsd*3|1gI#Rmo(Kk0o8c%Q(oLLk&zlizgEqE_QZTWIG63I@XSw!?1Y
zOPGg*rcBnauL3=*0ZZ;y|0*b54bf<@+f-{$k!KB!V!Wy0-&;gPC<v1-v}HhfvQjd7
z2jA@yXrA81d&KD!<M~Tl3Sl<=p9GC}$aQpJG?5oXth~1uF*^w{FHmx#n2b$dt`_6n
zuUQP5<G(K62@Re4W6<QzW;zFIACbJb>m34zC2^PFWE2)=z(j_8S!@_L_Cqbo<~_3&
zZfNo2@&9B|yPGOrDsNF$UTOSkrRH}BS=d4!XiC2^Ez=VkCYC-fWizh&S9L2{@x8T?
z+EdlTke(7SbhsJnJfj*`JxrG6Y!0bt@Q`5n^e(H{H8cjb=$HGGK**p+*iydBm<aL|
zHt`q=8d=-gQjV_1JV9Zx`mw^#MrC(&t*$CGr}%Vz8tG@#pFgaAz;7O`U^76tP2!$>
zOn}1c3epNpwJc2m2+z5(tu462+)I*T$mIq0(pCb*;AaaGQ*x8xS5)fy&nP{xSR37D
z7SHE#%!8bx%Nsm{)75AhsBM>ih1Mx%{6Iw1S6xjBBTd6s)?Sj_QKbI<N^o^-ex>An
zJw$SuCcpbYImL>@orY1Vqq;{=&VOymeXi@AIYLAd1~mZ~HL#kjIDgHS%Ne3{y1Uye
z@9fa4&~s3pbDO-=lZoGF<dp#I<Rtbw##9|Iir7WrSnW2(*Q+GEc+Dl#{(SP9#Y32D
z8HBddoT>`PMOLSwf>HtZuC$lzL|=Lb4tS570W%Bj46Ndgw-M+uCT;?(4n*snI2Auz
z;f#+h%R2hMR_0?=mI|E?Le$s;wx5jg3E2`!ud^MeTzE=s2bNNIyL%PLF9SoX<1h{d
zkLa+h@`ExZkaJ=0e^Ma@p%-LrhVx%i<y0nhe}fZuV*-=0ldM&6AsGF~CIX?N#qVfa
zeEwdTwi{|(=<vGl$ff?QszF(+Pa-L|%^gy!a~D8%mMVWWbcW9W-L5B?+ec8s)s71&
z*z6LBLJHKKTq79;8IbMDo^^C-9o(T9Qje?Sr4RU#^{qx8`@ROUciEv}>{_iQ{fnA*
z7VRrSAyM9o4KD<X-H(-S>wahs1Ndf=b%8(v?rfaJ6MO&CX74H*BPsl=oYn#eCY%$t
zFhEGhzTN!96X#~WVeXUMYhgHIda|=?S5&R+q0HFVXVG&QOWq98f2*#^nH3v`=s+T_
zLZ7yktD=xdgcd><VU(1H8+}LCq=9<c<?dOC%NjVK77KHK7C2p)4MljEQ`8W$do2Y{
z(Km!1?kb&s(mVZ;<RRI0%e+rmHY`+K-MkX{USa_q^~e?-lOg<j%v}?|FU-TNu4$Xc
z(w3Codxalq2{#}&6J$gK%+Uj%G*e`V2e(s^cFsTNlT+p{mM|x!DJel9LN56dTzQ_T
z^Vlb`+bbF=Y5e(+?Hx*q4*EXKtM8=1`3nex<`n6@+`__&itX8C$9}dLjU0HjcbCx|
zonnD@E|g)Dp9#>X=g~`f1+yXHaRt~<l(dVv(9T1`f)Jeu6Ao_|%paB3kpZa>LtFrb
zDMBGUJV#*&d7gUs%3S(HVRQrUwZ7?JF6{1U0?or1Z$_amVWBWLbk;Xg;#7PALSd?H
zi!iNAfTDo6zsK<Q$mJd&#}4fXOKlEAZ1TJdOu$MB8A$9Y5AWs43)Jhp*|5XX-~GN{
zy*$(R+*0Oegiz?<np}nb!_9?4GRN8Gf`WOj&UPXqj88<CMUw4%JL#*l$JCZZ<S9_M
zKp_~uLih^b7h3gTyHT)!?O(dN<&=<hh@bA^DJd$NORi;bneBb_d?$T)=@9myLkn>o
zYWYrI12m%k<d(%CaJ&vcIs>;IE{W&l+m%i?Pv@xlgO0ECnR7Z|0tQTc3gza}I0Jxb
z?y^VPo#qbX2A7>Hmot<)LZUla8V>p{kvYyZcf`GN!a_QQ?a+*B58Jm01icu*L=!Kj
z2Kq=+ny8)lFbv;2qMBI~MyjwISme4F<ZSEQooJXcM^mCfo)BGbpgT&{re(O<F{wFv
zRNGYGVFrb<{Cb1R!t@hvXZDeLfN!?w;?zI@`?asQalKOTJwlM@ITIjISm?LE^&`ZP
z2As)mq?V;XX-fRb`f#V8TvZa!={dzBJfiE}mXFVoZ*r9QBU>cQ0P8(CER(1DT6!Ap
zzQ|ikTU2Rh=3+)i0i-YtB*_>bOxY1`3knf5ilOC+w%?o;*w=5*w)n4T6x{9~d25))
zemJ;H{`XDjrHs0Y0dYb1@r}@JUGo-F@~0UPkg8|qEDE3~4SZUMgSRj^IrUzUfZL$a
z_mh((guEImwrhSD_0T?L=ds)P{M#@k?`#RvXm_2(bh%He)4vQp<r}%<I~#ZBI->^Z
zkR1|UOjTKU+$eVb?sIQp3czEB?pBWg3q`!N&=5mXqP>Gdzlwp_H#=vLpp!RW58ABk
zAJwdjgh*vGaPDY<@La2lV1+v0;`@M5$l?>0U6`?`&xHbZ=;GKYm%AR4|Jm?hyC+0n
z?2+w8)MVq!G`eOD_Y-2L&h^M@pQS?b$2Xy}s$LgP+-H7u=2b~LzHHXe{n~<H8$sHk
zv-0b*q1ipa6F;~H9B$xizJb+HHz|cc>UF9oyboUZ`Nq9eoTznRlN9_BTjp*rd92r5
z<hK1qUc<!6y1TjWh}{5`PX3}ZplKT5yF96xS|w&a$7lA75LI|Jwo-dY)%%<zi-smL
z+Zg+J^9R1b&%5*k-W3YT&U02nE;d_)>=GXw3s?2750?De`ts!AQ`ESaZNug*a84M$
zduY}%D(fLz^OfcOm68!DYYIM0jlRhKc+g9l%RLh-uCew;R~x{ZFh2WYTeU?<06=K+
zchOiWnks`b*`fuL14k97gsbdh6R?O=L%o<Yd|FgJ%j)+sE=Cssk<G(pbG0$C_Nb#t
zq;gEifhb~q$Gpn<^P8ECuEv~$aiFSjQ(1ZGX}G%P|MY`3BlZAKffaL)oE`v#(Hx4C
z4th(-&<!L%jSx3;N-@IG+_~?=ll|7a+$E5t#Ab)zHC*YPgP!JVz1!sZx1nQ7d(er|
zWh?PpN1Ah;;e#mk<g|h;uyEfOkzJT0XlU+BvdDU)%QRrwP%Z@n0~ADE-9#WI05sSE
zd_hy)+tj~@GK*3-2{_u`|9IL-h)e}(XghSQts+D|wQPCo&$$E1G{%zTKcCAZ0lix$
z<p-&kROCIzKZcGW!)`%+BKrCWXA{L`7Yf`BC2j7K4VH^sy@k=h{()<qVU;aK`lLlg
zOj&H6f=NxR8yt5kxi2*2KD%V#ryd9B1MT#_KbO3lSBMdYn;s2&^I6wvP)~nFya)xu
zT}iHFAHxC{V><}n+)-LeYisW#u|Ic%!&HO!!p9&`9^Rm|UZ57$_Q;vCmDXY^g^#}0
zXYsX}P|=ZkU&u=V3V~{*yr+NfJO%gKCG?T~RhAg;$*)Z=P1GOv4nGIt*=~tAcAff4
z+->ZYO2RHj*&xfwl@iW_Xk(eR^|)R660<)Y%fFbH?4CN!FKmCGvzM-)&5@UKRBUF?
zBt$XEoA<$CEV(@ZEPpI_W-5GaMpKj7799XY=>TuT5RH(aFvQ8>O>o@Z6pHt;Z##X!
zA4R_haZJSsmWb5UsL;^R!TZQXiFGbrV*qQ$`23h80fAm91Egeayzj}$63^&g?1`D_
zw_src-eMev&_hN;wnIBXw5AjloogDX9UqI#vhNJwbyJ;=y*8lvgB?2N1|J@%(9pC+
zEp|~5_{4H@qYx92@HGq(kW^do1nmiK&+Th{_(~*AcG<hQi*s^vng_wYJl~DhS3@Bq
z_R4@l1&w`KqU6Fh0Vaj0UCf2H7m?<h3H2SzD0Q0l(d$7NhX8Ym;q37jdjAaioVzJ_
zqskLMD-SMElvpC8jQdGwMK7T_(O^le2QbliS_Z_X^mgmCEs&h;gw4z;`{oWJLa<hM
z#8R7BTYP0@Wq(75z#v@m*;llc>0coPtgP8TVW5zV@G(noVPR>OWzzh0fp`&FBAj><
z7v*6HYaew!SwA&NS%<7;#|^(LedYtxiPg2KY>}r{jY00bq2un?2e1~F?!svRqchee
z_ctSRZF^!GzcB!^i`zrCE8T{(@wi@$!)nm$Lp(pf3%DOB-%qP8;EpQtj&;;I-BLE<
z9b$sS=s!mxvDM*Y$13N}NqP;nky@QSBqa@$QTy|#eI~#R)h6o$Ur6s<1{11%wD5RO
zytLkm{P-ku=8hRi1RcW468?HgKP<ffq&@cmnax~iVak@RFdo2q#c62jngCerTYPzZ
zHJJ3KvkvR=)mB|;g~_JWW+-Q|Qzy+L4?0$c?a*I4l2f;Gp-n0Fn)*vS&ZXTzE;anT
z&Y$>W$Mcp+hWD#(sH@Y!S@>PrD-$s*KM#}pUFHn^_u5StX9phW11^=R?(RaTPN(Ku
z2Ng#qBGUE%uspXoZ<G?Hp->bpa~BB>U&yY~YZ3O)0tDvB>8oS4RSy1_67h8}dVQ@<
zz}B2%b=U_6eS|kj(@7-6!650OhHmYkaRDSX4Dm&c#MnOiqBL^u=~ENm^$Z7}7m4`k
z+G@}OLLtEuL&iQJ-LPV`@z;QKYA_ow-NORcdM$jD3}b2&3h(~~B`cS7=?P)X;^VQk
z;rnn&_i=Wsx&Q5zrJpcu@NuwE5=Lj`OmR)MsY70`4ez&jRV`2p$uX|S_2ReWZnhfC
z9uIZ-=iW5AnG2a)miWD71fDBt4%TDjZNlSZT&~yF<N2p8rltwA&%8Br`z=6Vf40Ic
zV=b&d>rj<Y-6-X;B0aGe<>2|Ewc%F=0&Lt-INME9w?%KLa|+Z9vZba*Ok034G1E`b
zP!EQC8PMbH=`Z8$0laAYsDMCmnnb3du}JCapNC)^oi^rU76B)zoSpfIP6SLs9ttWD
z59HGE6_co3_}o!=jKi0F(!2sNmjmfaH7&P}b#U%%ZSZ+HtZY?vI`~;7y3C7qXigLw
z6)1pl7H%aq<JA{PrFIk*dc3HWi|OU~Y80xng5;j+XcLRNCFA+=KMD5h7sw8Ol?Y>e
z2%1j`4^9N3BY`ADBNT;NOd5k6l|$j@`96?dCK;}wOSJ&@{h<eDC=>gH7bW!grJlU#
zzk-r$k0QzpPXpN{>y1`092RTIAq5_L&<7^x&L-`MND{Sqt?w$U5)l{jAV(O7T>w%a
z1Q{77tD(~51(OHCjjyq3e5~KxlFq3wjFQ0cBY45Rj_WLv^?)y#fC(zN40vQKOoXcS
z5&|wLAn|yRdz~wWNK2JN>M;(o)*HRV0XLtrpDiP_lG0aCBT8?Ft^RgC{wjCh`4El$
zGEl~TI+F#f=Ji_CNnFXGaSh1iNUEn<YJx)c?!$?+s3OBE4RNsx4h;tiRv~{a+a~>8
zu=68?r*BCS$}`P9SC{5`nwt1vOut2J5ZLv~AWR|`oIsJ&<pWkmtHYR}3oVvkUWKqb
zx$}Y&%!}&sY*3&@h?e~|JmcypTa6k3m|>SndJHhro%U%0I%lN5i>CB4ercky(ZQbi
zqM!YTGR42vocXw5C|rO*RLo}rQql{8?zEBy1jut)5MXFL;R`5rZ#Zn%(w35(SZ=$~
z?lM<Yzw>l#kl)j_#pr(rP_nrL`T=XpXb(nG3a<QuGx}ZEZv^T=BNTqgPn3mv6t8YP
z8`Vb`&Fi-?oOEe#JX{?0Xgn|m<s_CYNuJ7aw;EtScHMhTAHN(h!FzHNoSiP6KqRBS
zA9Ge!TCCQ#fE>nfd+K{~z{y(|AtiemXt4wi^x+4@$Gs4ZT$F|_O4(W1ucS5*k2Bo1
zqcnkwTy`5@&z)qD#D+MB3cBPD)T>0f;vI%Ct0<-Bm4foIj?Ut3j<Wgw*v*KO^*?QI
zyBe2`3Zw?=w!VYa>4KwyFBrQwP4_hC%tHq~$%CGpO`xX-4@o3ugoKFnLLWh1+6JlV
zLV28_Wq^9BWV>OT33APshxjdxFF)}1aQNP0ev+SJmD#UjMe^lG%`G~dOGAZ@5vf&H
z9iwBJ8|jT>Yqm)h+}D8%(pC2zj>oG<x?E?MQi-I7?CWp7sGvB_m&qeeVk3CmvkSJu
z`oAyR3VS(Ih$L&x_zxtiVu)V>-aa9!0;D<TtVVX0Ym!(>R{z}m+m%aCNu#>Y%C%Y`
zLNRT)ymXIi?rT`vx9P9szDEdkaHZR)hR@{B{Zr9^{id_<d(um1F!xL}ZE4Sgpi<u<
z@P-NadaV&MQ#o^4ssN8WNGSYQbKd0RvrGp|<y(>mX<+!2tgGjfj-N9lQsO!kdS34A
zJM)4|(U*P>H>Fz|0*v-#n=ypi7#0|Q&He*l?otX`CILhV_p?w}(>0BGhgiJ5P3)!p
zjnQfZfOi!Und;j;o?p@eo!euJz9k;8x}R{eWHhdQ@Ah?<B5MM;27Lx6j~(hKoJ~&a
zAER*InbXvu$#Y8{LKKo(rwKG!3cr42f5q4Nelwljv8BjcQwm9U6ocn2Et~B){Ad44
z4)2}z)9JrAre_{$P8#=EO+8F;dBg>(9cfkxhkao#Mj)g?0+mvb3(203^E*tA7??g+
z9kBXlB|g5mE}C}#gX2U4XlbX#Y(^Kx&_OC@B4V9b@%`OZv-RI-AawA?-=Sk)Fglu`
zXjC*Hz0+}gtbuZ@p=a>Xn0|sQvHDvEM0$EW5Z@b3y8)(DaZ%&3_gF_n283br**fPf
zNxSbZA;;53Jdgc(uD>i|d|C?0X(3Q_#R9mixRNIiD+$iqeYEnihW7`+Y0eMmS<;h!
z_T$H54~`wzQQ&g=rv2$aAVaf#glU2vNP>{V-{NbyR5WaF(^$(5!x#8n0-pE%Rm2n3
zM$@YM20oOh$?<<0;BWmIe77e(;abEf<@nv8`jtyucR3!%ft;3P8TQx;{L!`IZP|mM
zlb+j%`fYk#X0$ZPVz``7pWJ}i-~YAope-pGci!mZ??RR9Y@b{XDQjPyA60ikbsOuZ
z-qNSGhxc-ur*&3Bcm~gdtYsio7ucD$a3$8p07N*8q%|0X34#kAcioNZJcUdE`NK(i
zHxZFQyi!NdH#@Zb(_^%`7>OP#AU$t1C{_Z|6AKUpEA$+;68oyGG6k6o!{tZg>wBt^
z_;oxk*|=_wp3Bm~<DQM3*ykj^|FcfK7Vsq&VDx#L(tBeIA?Zr_K;r$O^KuklcY{cZ
z{|IS3Ia>W~X?YeNmPo7CKMg`8VKT)oY@?|;I_YBMz%<2g^;+XQr=QRH7=t#d6$4mB
zJgQtKIi=t*aS6xoLq7O^iR<A$bANKW?4@jIc|b8%WrYYjv3y8<g@X>j=;?rB-iyh|
zfVSt8_{QnR0!Q8T0q1m(%eDA!_vw`yOdO2wf*J95+~Djy%1LeN1@vU$7U9MK5kb_n
z@~R1?_+D_Yzh<I`b4{+Big78Kl7d%*KpB)*<Z=(lHKNF+r-D{1`<pI$K);s+qucQ`
zp`XB=Zqul$p=$&%V+N)Z>V0<mJ3IchWfY=svD;{X*`-$eT)(g*$sxmXl1KvQ$r3&O
z?x?mI4rABP$1mooH63D}x%u-V>kH-nAUvbNd6T5|)ZIDZshB)5S&0|fn~K@Sz|AQC
z<3Cu-xqmz~p9&amPvf&U^ruGdyY<Ds^v3?5QWl2a;7QJ$8h!Agdmgae(cxj%{^^sW
zjdqiI?}h&{{x3MpZwH(&Va+Esr#NI5d^-rP(>=faS33@e;F2B(EOWkW)ob9S%7ODq
zsd{M_sRG2#jzQ0_qk%>lHhXG2j*o0c*L*kKROA4a$*Y;hz`EO>kc-EN)geE4@M`l*
zQnuylMZpIs&e<V*J9Hqbv``BuEZlhwJn1JKCL9lbm&-J~FAk}C`koX%u98q?^6B=j
z<G?g{_VUI5W=tJ~!_&Db(AY83-#y_-G3?v@OTYA3K=?XLbws)j%Y(e>gWVM6`m!lc
zQJPw&RMlE*${ebz(0lz?i2s4~fgU!POd4<&)X`%r5d@D6jD8Yvlkz)q@}U;Hbu^kJ
z%O>U*K3cpd@PAQM3#m^jhk*1cSdu6?4}9tciAIiU=L;`54BY$l5-LCpogcaiRz3c)
zmZiV2B6Ddq!2Ae|T7><O{4KbTl?1~)Xv#h1)o(t>F_o11{hv@W0}#gXoF)C$#W^LO
z^QjmIAC_U>-6zwV5FX|Pjz7<aj&~JPqdBpLF6NIvNL|zgL#7MFx<HHM=49>^4X^;4
z;5s&4HqcYk7M5^W-(v5y-W*vQ2-UAx$BSNq*7F#!9BZ}l%LugWB_doXyIEta5?`+O
z6Gri6p@+?j38~DY<RN$O&u=i3-&SrlZh^J3HBzQ*fpDaNbzXI;N_Q$Utb@GB;h&k)
zER@{=18iZqxk=~|Sj{5cJ|GYhd5|CyX}@=xM+abYK&54a1w-r?+)J|u&*L)@nO-UE
z_3h3A^at4cri%@VD1I<!h9Xbw<r=43-s?GR6B<wL8Q@5`8Q|QheGuZzB4TA@sDWz3
za4WXUlqKVpl%5~iq92kA5de^Ta`!!ncS4_o-gVpd<@w8C{n!T4DhN{awETdLPS7g1
zyF)=LudMZL4%f`r_0?~5cIbcZ$^Ei+RGi<S=1^^Vn{YLUYoPIP4#Y+KleJ@Le>+d=
zZ*b8zOx}yIbMBoQiZiQ(&km#%P#y+2Gj(YJDFCc4`h_5>@rs5IYdlQSu}T|qrCcrr
z@mQGlw$uVF7{2hvG8XR|Kk#TsOy~6ueg1pIUZK6_9t;LHwJuOWA?w_{Q6^En7N<+^
zh6KpTp61x+|02X3g<qYGH<eWDIK|7XyXwkxN(Xku%ccm*(02%ul2hmkP4f~+z9Wt~
z`S>o*Vd3E%Q(*J=1krX`<fV4E8Iu$ity4z~4NS|Qun<X=Vu)H*6b-G0t`6W#WP}fm
zuM7}Qe$0Sd;r;fp_^ZFHY)6J&-hhO=!Cw|LV^(eI^2o57;Xs6Ih6Y^f5D=dl{bX;J
zV>KyJ#gF72kyHiQ5Iz-sTFz##6(gWfB0_12nYozs$76g@u7Tjy^rNej2dwTO`H)IC
zN!p=PAn(b7U}y-g59~cTTuON-cZc`*Mov(tKnQ4#L`(W2M77wd<0?H-EldKgVBCQd
z)XR=}s;HLLDG+fjPgdMEN3^PYYN3Udf?{Bq*~Ca<(?Gx|4{)2nRjBPW*qIvF^oMEJ
zLQ=c1I5D@PhQ)8u%k)34g35`yzX0<y=_#<$xKEwFg%>q_!$c%)qJg<C9ng{CU^R;f
zfM#khB3b$B^g)XxfW&vth}{N`kaamjDh0`)ME<0oilC=u52>8}8b?Z{Q%eg|KD|F@
zLTn_i&gI^feuB|w$qjVM$Cr&m{(H+H0!dC(a1H<db6R2xpPx>ABoiJ3cmV86xO56{
zUu9PshgWL8$Zr5p)WP+%Qo(1wV6ay^c$Q3orArv}!$DPxSx;3&N=1_-%P8+QB<IHX
zF^C&+dy=u4J5GRFmMOo(lDuWC{e$7WgygO<QN6rV%Hd~6QP-e>!%FlL@VF7RA`&wg
z40aV3sCVm{kSeuy{W{1aL=%HZ)yQ?;tgGX7Y*tOb-<774>1KH<?3_X0rLLYAB>K6X
zf{Hr=oJE|nJz8*cph)(R=rTC<Y0syVAu<zOb2jq-Nu5VxjJuRrF@tk4))xEq;}LDj
zh3h}a3Qm|!m6^GML6D@d+|*3$JcT~{s$vpvEPg8!lvfn51E3#+IZiM5Os-{=Snq6$
z#&M?9O=(Tp$WFbYYljF(^ZsCI%=+Ogs4>-tDa(N`cZr<-h*v#1^VUW$Wa$2!Xa-mw
zldN-3WnUk#=mzNEd&L1D%nfcMs|1D)Rw5#y+{Y28g`eZ2H7*5Ty$5$WgFu8moco6_
zSsu$5EY2xD?|U}7&`AFt$ofq-JH-{#$N6K$4?K#$JBk(AubtxbT+)Y|qE3C_s?tnR
zy7U$lCLcDuR?<rIog>t%4y+U`aG$*9-yoGm29d}7EkO(BTn3jKZkiY$bL>?kl&dj&
zn$_{z@7&3iJv(OEp@W}y%JEx5140AQV1+RRFMYri%meUpE7O3(==9zrz(q1!;eKGK
zZ#v<BzS{nH556~(VEh<ZW&<-9oNQVRgQshp!6FV`_BVXcsJ7M4nL1p#9UA@LhfC*c
zb0J4*qHt?x%Hu2m_^+8q0{9#Z7!u&5SrEP#@cwj7qgg7^3x%u%O$T0HC7E^`z8AoJ
z3=P%S`)vp&dVe)!CSD!Y_5#co@Jh9Z4uI?8;Fi!?JS)F0aPlD&V)&n+eZy5e?mdY2
z;B`~iw$%IY$4dWiZkpK*fiwT<dVP2sz5s5CD*e^BBm{xdrT?p!>i@SlT}26+{A0W9
zr)E#ff#lD1q&Ez@Z*ZI%!z&(Nkahw-hyWflXH_0j`1_R8^uL#~K{P)--s}7(Slj)-
zN1`MjHt|ZoM}Qx`x|L~$1N{izK8WhR-*(xS5xl*vVtoTc`}c9F7%tI>(jffl8Q)fh
k|DTAB>ag7~J=s60=wrovOnIjQj-3keNJFXU;j_U12NEWI*#H0l

literal 0
HcmV?d00001


From dc465d5940737462437a0d0d59a707b2e996ba6b Mon Sep 17 00:00:00 2001
From: Faizanahmed Saiyed <119733178+Faizanahmedsy@users.noreply.github.com>
Date: Wed, 2 Aug 2023 22:35:18 +0530
Subject: [PATCH 450/469] docs(quickstart): change wording for installing CLI
 (#3040)

Co-authored-by: Maria Hutt <maria@ionic.io>
---
 docs/react/quickstart.md | 2 +-
 docs/vue/quickstart.md   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index bb9f77e8cc0..188a030601d 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -21,7 +21,7 @@ In this guide, we'll go over the basics of both React and Ionic, including any I
 
 ## Creating a project with the Ionic CLI
 
-To begin, let's install the latest version of the Ionic CLI.
+To get started, let's install the latest version of the Ionic CLI.
 
 ```shell
 npm install -g @ionic/cli
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 20b8adc86f1..331ab3f864e 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -21,7 +21,7 @@ In this guide, we will go over the basics of both Vue and Ionic Framework, inclu
 
 ## Creating a project with the Ionic CLI
 
-To begin, let's install the latest version of the Ionic CLI.
+To get started, let's install the latest version of the Ionic CLI.
 
 ```shell
 npm install -g @ionic/cli@latest

From 6c5b117ac4a3de03c9eb0eac9fdb30ff0399b850 Mon Sep 17 00:00:00 2001
From: Mohammed Ashfaq <44408323+ashfaqhaq@users.noreply.github.com>
Date: Thu, 3 Aug 2023 00:24:18 +0530
Subject: [PATCH 451/469] docs(previewing): adding instruction about "ionic
 serve --external"  (#3045)

Co-authored-by: Maria Hutt <maria@ionic.io>
---
 docs/developing/previewing.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/developing/previewing.md b/docs/developing/previewing.md
index 6c558d2d5de..d3e3e513fa5 100644
--- a/docs/developing/previewing.md
+++ b/docs/developing/previewing.md
@@ -38,6 +38,12 @@ $ ionic serve
 
 With `ionic serve` running, continue developing your app. As you save changes, the app reloads with those changes applied.
 
+:::note
+
+If the external link isn't listed on the terminal, then run `ionic serve --external` to generate it.
+
+:::
+
 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).
 

From 8ad4e0ae83270b2fef2153b644ec9e6ca0ce1712 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 4 Aug 2023 13:48:15 -0400
Subject: [PATCH 452/469] docs(theming): migrate Dark Mode Codepens to
 playground examples (#3067)

Resolves #2998

Co-authored-by: Colum Ferry <cferry09@gmail.com>
---
 docs/theming/dark-mode.md                     | 383 ++++++++----------
 .../angular/example_component_html.md         |  45 ++
 .../angular/example_component_ts.md           |  24 ++
 .../automatic-dark-mode/angular/global_css.md |  25 ++
 .../v7/theming/automatic-dark-mode/demo.html  | 104 +++++
 .../v7/theming/automatic-dark-mode/index.md   |  50 +++
 .../theming/automatic-dark-mode/javascript.md | 105 +++++
 .../automatic-dark-mode/react/main_css.md     |  25 ++
 .../automatic-dark-mode/react/main_tsx.md     |  93 +++++
 .../theme/variables_css.md                    | 160 ++++++++
 .../v7/theming/automatic-dark-mode/vue.md     | 129 ++++++
 .../angular/example_component_html.md         |  53 +++
 .../angular/example_component_ts.md           |  39 ++
 .../manual-dark-mode/angular/global_css.md    |  25 ++
 .../v7/theming/manual-dark-mode/demo.html     | 136 +++++++
 .../v7/theming/manual-dark-mode/index.md      |  50 +++
 .../v7/theming/manual-dark-mode/javascript.md | 132 ++++++
 .../manual-dark-mode/react/main_css.md        |  25 ++
 .../manual-dark-mode/react/main_tsx.md        | 117 ++++++
 .../manual-dark-mode/theme/variables_css.md   | 160 ++++++++
 .../usage/v7/theming/manual-dark-mode/vue.md  | 162 ++++++++
 21 files changed, 1832 insertions(+), 210 deletions(-)
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/angular/example_component_html.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/angular/global_css.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/demo.html
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/index.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/javascript.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/react/main_css.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/theme/variables_css.md
 create mode 100644 static/usage/v7/theming/automatic-dark-mode/vue.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/angular/example_component_html.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/angular/global_css.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/demo.html
 create mode 100644 static/usage/v7/theming/manual-dark-mode/index.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/javascript.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/react/main_css.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/react/main_tsx.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/theme/variables_css.md
 create mode 100644 static/usage/v7/theming/manual-dark-mode/vue.md

diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
index 8d42d01a0ea..e4c36d9ecb8 100644
--- a/docs/theming/dark-mode.md
+++ b/docs/theming/dark-mode.md
@@ -4,8 +4,6 @@ initialTab: 'preview'
 inlineHtmlPreviews: true
 ---
 
-import Codepen from '@components/global/Codepen';
-
 <head>
   <title>Dark Mode to Change Color Schemes and CSS Properties</title>
   <meta
@@ -14,21 +12,21 @@ import Codepen from '@components/global/Codepen';
   />
 </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.
+Ionic makes it easy to change the themes of your app, including supporting dark color schemes. Dark mode is a display setting that changes all of an app's views to a dark theme. It has system-wide support on iOS and Android, making it highly desirable for developers to add to their apps.
 
 ## 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.
+The modern 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 dark mode is enabled. Ionic Framework starters use this method to include the dark theme.
 
 ```css
 @media (prefers-color-scheme: dark) {
   :root {
-    /* dark mode variables go here */
+    /* 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).
+The `prefers-color-scheme` media query is supported by [all modern browsers](https://caniuse.com/#feat=prefers-color-scheme). Users will not be able to benefit from having the dark theme applied using this media query in certain browsers, however, the dark theme can still be applied by using a [CSS class fallback](#css-class-fallback) if support for older browsers is needed.
 
 ## CSS Class Fallback
 
@@ -53,7 +51,7 @@ Notice that the variables should be in both places in this example. We can [use
 
 ## 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:
+In order to keep the CSS variables written once and avoid having to update them in multiple places, the `dark` class can be added when the value of the `prefers-color-scheme` media query is `dark`. Here's what the CSS would look like:
 
 ```css
 body.dark {
@@ -65,63 +63,27 @@ Notice that the variables above are only in the `body.dark` selector now, and th
 
 ### 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.addEventListener('change', (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);
-}
-```
+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 allow dark mode to still work based on the user's preference.
 
 :::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).
+The demo below prioritizes the site's theme over the system settings. If your system settings are set to something other than the site's theme when the demo loads, it will match the site's theme. Try changing the system preferences on your device between light & dark mode to see it change.
 :::
 
-<!-- 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);
-});
+:::info
+Not sure how to change the system settings? Here's [how to enable dark mode on Windows 11](https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
+:::
 
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+import AutomaticDarkMode from '@site/static/usage/v7/theming/automatic-dark-mode/index.md';
 
-// Listen for changes to the prefers-color-scheme media query
-prefersDark.addEventListener('change', (e) => checkToggle(e.matches));
+<AutomaticDarkMode />
 
-// Called when the app loads
-function loadApp() {
-  checkToggle(prefersDark.matches);
-}
+### Manually Toggle Dark Mode
 
-// Called by the media query to check/uncheck the toggle
-function checkToggle(shouldCheck) {
-  toggle.checked = shouldCheck;
-}
-```
+In addition to adding the `dark` class to the `<body>` when the media query changes, the class can be added by the app, such as when a user changes a toggle, to switch between the light and dark themes:
 
-<!-- Codepen https://codepen.io/ionic/pen/zYOpQLj -->
+import ManualDarkMode from '@site/static/usage/v7/theming/manual-dark-mode/index.md';
 
-<Codepen preview="false" user="ionic" slug="zYOpQLj" height="600px" default-tab="js,result" />
+<ManualDarkMode />
 
 ## Adjusting System UI Components
 
@@ -158,170 +120,171 @@ For developers looking to customize the theme color under the status bar in Safa
 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.
+2. Setting variables for the dark theme on `ios` devices.
+3. 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.
+The following code can be copied and pasted into an app's global CSS file to get Ionic's dark theme. We are [using the CSS media query](#using-media-queries) to enable dark mode. If older browser support is required, use the method described in the [combining with JavaScript](#combining-with-javascript) section.
 
-:::note
+:::info
 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;
-}
+@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.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 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 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);
-}
+  .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.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;
+  /*
+   * 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/usage/v7/theming/automatic-dark-mode/angular/example_component_html.md b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..418eddfc30f
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_html.md
@@ -0,0 +1,45 @@
+```html
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="#"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Display</ion-title>
+    <ion-buttons slot="end">
+      <ion-button color="dark">
+        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list-header>Appearance</ion-list-header>
+  <ion-list [inset]="true">
+    <ion-item [button]="true">Text Size</ion-item>
+    <ion-item>
+      <ion-toggle justify="space-between">Bold Text</ion-toggle>
+    </ion-item>
+  </ion-list>
+
+  <ion-list-header>Brightness</ion-list-header>
+  <ion-list [inset]="true">
+    <ion-item>
+      <ion-range value="40">
+        <ion-icon name="sunny-outline" slot="start"></ion-icon>
+        <ion-icon name="sunny" slot="end"></ion-icon>
+      </ion-range>
+    </ion-item>
+    <ion-item>
+      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+    </ion-item>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item [button]="true">
+      <ion-label>Night Shift</ion-label>
+      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..add5097b954
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent implements OnInit {
+  ngOnInit() {
+    // Use matchMedia to check the user preference
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+    this.toggleDarkTheme(prefersDark.matches);
+
+    // Listen for changes to the prefers-color-scheme media query
+    prefersDark.addEventListener('change', (mediaQuery) => this.toggleDarkTheme(mediaQuery.matches));
+  }
+
+  // Add or remove the "dark" class on the document body
+  toggleDarkTheme(shouldAdd) {
+    document.body.classList.toggle('dark', shouldAdd);
+  }
+}
+```
diff --git a/static/usage/v7/theming/automatic-dark-mode/angular/global_css.md b/static/usage/v7/theming/automatic-dark-mode/angular/global_css.md
new file mode 100644
index 00000000000..e26327f896f
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/angular/global_css.md
@@ -0,0 +1,25 @@
+```css
+/*
+ * Optional CSS
+ * -----------------------------------
+ */
+
+/* This sets a different background and item background in light mode on ios */
+.ios body {
+  --ion-background-color: #f2f2f6;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background in light mode on md */
+.md body {
+  --ion-background-color: #f9f9f9;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This is added for the flashing that happens when toggling between themes */
+ion-item {
+  --transition: none;
+}
+```
diff --git a/static/usage/v7/theming/automatic-dark-mode/demo.html b/static/usage/v7/theming/automatic-dark-mode/demo.html
new file mode 100644
index 00000000000..17acbcf3fe6
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/demo.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theming</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Display</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="dark">
+              <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list-header>Appearance</ion-list-header>
+        <ion-list inset="true">
+          <ion-item button="true">Text Size</ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between">Bold Text</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list-header>Brightness</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-range value="40">
+              <ion-icon name="sunny-outline" slot="start"></ion-icon>
+              <ion-icon name="sunny" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">
+            <ion-label>Night Shift</ion-label>
+            <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      // Use matchMedia to check the user preference
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+      // Listen for changes to the prefers-color-scheme media query
+      prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+
+      // Add or remove the "dark" class on the document body
+      function toggleDarkTheme(shouldAdd) {
+        document.body.classList.toggle('dark', shouldAdd);
+      }
+    </script>
+
+    <style>
+      /*
+      * Optional CSS
+      * -----------------------------------
+      */
+
+      /* This sets a different background and item background in light mode on ios */
+      .ios body {
+        --ion-background-color: #f2f2f6;
+        --ion-toolbar-background: var(--ion-background-color);
+        --ion-item-background: #fff;
+      }
+
+      /* This sets a different background and item background in light mode on md */
+      .md body {
+        --ion-background-color: #f9f9f9;
+        --ion-toolbar-background: var(--ion-background-color);
+        --ion-item-background: #fff;
+      }
+
+      /* This sets a different item background in dark mode on ios */
+      .ios body.dark {
+        --ion-item-background: #1c1c1d;
+      }
+
+      /* This is added for the flashing that happens when toggling between themes */
+      ion-item {
+        --transition: none;
+      }
+    </style>
+  </body>
+</html>
diff --git a/static/usage/v7/theming/automatic-dark-mode/index.md b/static/usage/v7/theming/automatic-dark-mode/index.md
new file mode 100644
index 00000000000..6e6b490de6f
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/index.md
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html 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';
+
+import variables_css from './theme/variables_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'theme/variables.css': variables_css,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    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/theme/variables.css': variables_css,
+      },
+    },
+  }}
+  src="usage/v7/theming/automatic-dark-mode/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/theming/automatic-dark-mode/javascript.md b/static/usage/v7/theming/automatic-dark-mode/javascript.md
new file mode 100644
index 00000000000..9e65673ba8d
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/javascript.md
@@ -0,0 +1,105 @@
+```html
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
+
+    <script>
+      window.Ionic = {
+        config: {
+          mode: 'ios',
+        },
+      };
+    </script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Display</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="dark">
+              <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list-header>Appearance</ion-list-header>
+        <ion-list inset="true">
+          <ion-item button="true">Text Size</ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between">Bold Text</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list-header>Brightness</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-range value="40">
+              <ion-icon name="sunny-outline" slot="start"></ion-icon>
+              <ion-icon name="sunny" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">
+            <ion-label>Night Shift</ion-label>
+            <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+      <script>
+        // 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.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+
+        // Add or remove the "dark" class on the document body
+        function toggleDarkTheme(shouldAdd) {
+          document.body.classList.toggle('dark', shouldAdd);
+        }
+      </script>
+
+      <style>
+        /*
+      * Optional CSS
+      * -----------------------------------
+      */
+
+        /* This sets a different background and item background in light mode on ios */
+        .ios body {
+          --ion-background-color: #f2f2f6;
+          --ion-toolbar-background: var(--ion-background-color);
+          --ion-item-background: #fff;
+        }
+
+        /* This sets a different background and item background in light mode on md */
+        .md body {
+          --ion-background-color: #f9f9f9;
+          --ion-toolbar-background: var(--ion-background-color);
+          --ion-item-background: #fff;
+        }
+
+        /* This is added for the flashing that happens when toggling between themes */
+        ion-item {
+          --transition: none;
+        }
+      </style>
+    </ion-app>
+  </body>
+</html>
+```
diff --git a/static/usage/v7/theming/automatic-dark-mode/react/main_css.md b/static/usage/v7/theming/automatic-dark-mode/react/main_css.md
new file mode 100644
index 00000000000..e26327f896f
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/react/main_css.md
@@ -0,0 +1,25 @@
+```css
+/*
+ * Optional CSS
+ * -----------------------------------
+ */
+
+/* This sets a different background and item background in light mode on ios */
+.ios body {
+  --ion-background-color: #f2f2f6;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background in light mode on md */
+.md body {
+  --ion-background-color: #f9f9f9;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This is added for the flashing that happens when toggling between themes */
+ion-item {
+  --transition: none;
+}
+```
diff --git a/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md b/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md
new file mode 100644
index 00000000000..dc92e1ad1cf
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/react/main_tsx.md
@@ -0,0 +1,93 @@
+```tsx
+import React, { useEffect } from 'react';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  // Add or remove the "dark" class on the document body
+  const toggleDarkTheme = (shouldAdd: boolean) => {
+    document.body.classList.toggle('dark', shouldAdd);
+  };
+
+  useEffect(() => {
+    // 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.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+  }, []);
+
+  return (
+    <>
+      <IonHeader class="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton default-href="#"></IonBackButton>
+          </IonButtons>
+          <IonTitle>Display</IonTitle>
+          <IonButtons slot="end">
+            <IonButton color="dark">
+              <IonIcon slot="icon-only" ios={personCircleOutline} md={personCircle}></IonIcon>
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <IonListHeader>Appearance</IonListHeader>
+        <IonList inset={true}>
+          <IonItem button={true}>Text Size</IonItem>
+          <IonItem>
+            <IonToggle justify="space-between">Bold Text</IonToggle>
+          </IonItem>
+        </IonList>
+
+        <IonListHeader>Brightness</IonListHeader>
+        <IonList inset={true}>
+          <IonItem>
+            <IonRange value={40}>
+              <IonIcon icon={sunnyOutline} slot="start"></IonIcon>
+              <IonIcon icon={sunny} slot="end"></IonIcon>
+            </IonRange>
+          </IonItem>
+          <IonItem>
+            <IonToggle justify="space-between" checked>
+              True Tone
+            </IonToggle>
+          </IonItem>
+        </IonList>
+
+        <IonList inset={true}>
+          <IonItem button={true}>
+            <IonLabel>Night Shift</IonLabel>
+            <IonText slot="end" color="medium">
+              9:00 PM to 8:00 AM
+            </IonText>
+          </IonItem>
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/theming/automatic-dark-mode/theme/variables_css.md b/static/usage/v7/theming/automatic-dark-mode/theme/variables_css.md
new file mode 100644
index 00000000000..72a10e6d263
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/theme/variables_css.md
@@ -0,0 +1,160 @@
+```css
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/*
+ * 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: #1c1c1d;
+
+  --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);
+}
+
+/*
+ * 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/static/usage/v7/theming/automatic-dark-mode/vue.md b/static/usage/v7/theming/automatic-dark-mode/vue.md
new file mode 100644
index 00000000000..45dd5f8d9a5
--- /dev/null
+++ b/static/usage/v7/theming/automatic-dark-mode/vue.md
@@ -0,0 +1,129 @@
+```html
+<template>
+  <ion-header class="ion-no-border">
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button default-href="#"></ion-back-button>
+      </ion-buttons>
+      <ion-title>Display</ion-title>
+      <ion-buttons slot="end">
+        <ion-button color="dark">
+          <ion-icon slot="icon-only" :ios="personCircleOutline" :md="personCircle"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list-header>Appearance</ion-list-header>
+    <ion-list :inset="true">
+      <ion-item :button="true">Text Size</ion-item>
+      <ion-item>
+        <ion-toggle justify="space-between">Bold Text</ion-toggle>
+      </ion-item>
+    </ion-list>
+
+    <ion-list-header>Brightness</ion-list-header>
+    <ion-list :inset="true">
+      <ion-item>
+        <ion-range value="40">
+          <ion-icon :icon="sunnyOutline" slot="start"></ion-icon>
+          <ion-icon :icon="sunny" slot="end"></ion-icon>
+        </ion-range>
+      </ion-item>
+      <ion-item>
+        <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+      </ion-item>
+    </ion-list>
+
+    <ion-list :inset="true">
+      <ion-item :button="true">
+        <ion-label>Night Shift</ion-label>
+        <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonToggle,
+    IonToolbar,
+  } from '@ionic/vue';
+  import { personCircle, personCircleOutline, sunnyOutline, sunny } from 'ionicons/icons';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonBackButton,
+      IonButton,
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonIcon,
+      IonItem,
+      IonLabel,
+      IonList,
+      IonListHeader,
+      IonRange,
+      IonText,
+      IonToggle,
+      IonToolbar,
+    },
+    setup() {
+      // Use matchMedia to check the user preference
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+      // Add or remove the "dark" class on the document body
+      const toggleDarkTheme = (shouldAdd) => {
+        document.body.classList.toggle('dark', shouldAdd);
+      };
+
+      toggleDarkTheme(prefersDark.matches);
+
+      // Listen for changes to the prefers-color-scheme media query
+      prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+
+      return { personCircle, personCircleOutline, sunnyOutline, sunny, toggleDarkTheme };
+    },
+  });
+</script>
+
+<style>
+  /*
+  * Optional CSS
+  * -----------------------------------
+  */
+
+  /* This sets a different background and item background in light mode on ios */
+  .ios body {
+    --ion-background-color: #f2f2f6;
+    --ion-toolbar-background: var(--ion-background-color);
+    --ion-item-background: #fff;
+  }
+
+  /* This sets a different background and item background in light mode on md */
+  .md body {
+    --ion-background-color: #f9f9f9;
+    --ion-toolbar-background: var(--ion-background-color);
+    --ion-item-background: #fff;
+  }
+
+  /* This is added for the flashing that happens when toggling between themes */
+  ion-item {
+    --transition: none;
+  }
+</style>
+```
diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_html.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..855a77e99a8
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_html.md
@@ -0,0 +1,53 @@
+```html
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="#"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Display</ion-title>
+    <ion-buttons slot="end">
+      <ion-button color="dark">
+        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list-header>Appearance</ion-list-header>
+  <ion-list [inset]="true">
+    <ion-item>
+      <ion-toggle [(ngModel)]="themeToggle" (ionChange)="toggleChange($event)" justify="space-between"
+        >Dark Mode</ion-toggle
+      >
+    </ion-item>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item [button]="true">Text Size</ion-item>
+    <ion-item>
+      <ion-toggle justify="space-between">Bold Text</ion-toggle>
+    </ion-item>
+  </ion-list>
+
+  <ion-list-header>Brightness</ion-list-header>
+  <ion-list [inset]="true">
+    <ion-item>
+      <ion-range value="40">
+        <ion-icon name="sunny-outline" slot="start"></ion-icon>
+        <ion-icon name="sunny" slot="end"></ion-icon>
+      </ion-range>
+    </ion-item>
+    <ion-item>
+      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+    </ion-item>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item [button]="true">
+      <ion-label>Night Shift</ion-label>
+      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..ad697b08012
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent implements OnInit {
+  themeToggle = false;
+
+  ngOnInit() {
+    // Use matchMedia to check the user preference
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Initialize the dark theme based on the initial
+    // value of the prefers-color-scheme media query
+    this.initializeDarkTheme(prefersDark.matches);
+
+    // Listen for changes to the prefers-color-scheme media query
+    prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkTheme(mediaQuery.matches));
+  }
+
+  // Check/uncheck the toggle and update the theme based on isDark
+  initializeDarkTheme(isDark) {
+    this.themeToggle = isDark;
+    this.toggleDarkTheme(isDark);
+  }
+
+  // Listen for the toggle check/uncheck to toggle the dark theme
+  toggleChange(ev) {
+    this.toggleDarkTheme(ev.detail.checked);
+  }
+
+  // Add or remove the "dark" class on the document body
+  toggleDarkTheme(shouldAdd) {
+    document.body.classList.toggle('dark', shouldAdd);
+  }
+}
+```
diff --git a/static/usage/v7/theming/manual-dark-mode/angular/global_css.md b/static/usage/v7/theming/manual-dark-mode/angular/global_css.md
new file mode 100644
index 00000000000..e26327f896f
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/angular/global_css.md
@@ -0,0 +1,25 @@
+```css
+/*
+ * Optional CSS
+ * -----------------------------------
+ */
+
+/* This sets a different background and item background in light mode on ios */
+.ios body {
+  --ion-background-color: #f2f2f6;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background in light mode on md */
+.md body {
+  --ion-background-color: #f9f9f9;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This is added for the flashing that happens when toggling between themes */
+ion-item {
+  --transition: none;
+}
+```
diff --git a/static/usage/v7/theming/manual-dark-mode/demo.html b/static/usage/v7/theming/manual-dark-mode/demo.html
new file mode 100644
index 00000000000..c4d502db12d
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/demo.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theming</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Display</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="dark">
+              <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list-header>Appearance</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-toggle justify="space-between" id="themeToggle">Dark Mode</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">Text Size</ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between">Bold Text</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list-header>Brightness</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-range value="40">
+              <ion-icon name="sunny-outline" slot="start"></ion-icon>
+              <ion-icon name="sunny" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">
+            <ion-label>Night Shift</ion-label>
+            <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      // 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 theme
+      toggle.addEventListener('ionChange', (ev) => toggleDarkTheme(ev.detail.checked));
+
+      // Called by the media query to check/uncheck the toggle
+      function checkToggle(shouldCheck) {
+        toggle.checked = shouldCheck;
+      }
+
+      // Add or remove the "dark" class on the document body
+      function toggleDarkTheme(shouldAdd) {
+        document.body.classList.toggle('dark', shouldAdd);
+      }
+
+      // Check/uncheck the toggle and update the theme based on isDark
+      function initializeDarkTheme(isDark) {
+        toggle.checked = isDark;
+        toggleDarkTheme(isDark);
+      }
+
+      // Demo only code below
+      // ----------------------------------------------------
+      window.addEventListener('demoReady', (ev) => {
+        const theme = ev.target.localStorage.getItem('theme');
+        const isDark = theme === 'dark' ? true : false;
+
+        // Initialize the dark theme based on the initial
+        // value of the theme stored in localStorage
+        initializeDarkTheme(isDark);
+      });
+
+      window.addEventListener('message', (ev) => {
+        toggle.checked = ev.data.darkMode;
+      });
+    </script>
+
+    <style>
+      /*
+       * Optional CSS
+       * -----------------------------------
+       */
+
+      /* This sets a different background and item background in light mode on ios */
+      .ios body {
+        --ion-background-color: #f2f2f6;
+        --ion-toolbar-background: var(--ion-background-color);
+        --ion-item-background: #fff;
+      }
+
+      /* This sets a different background and item background in light mode on md */
+      .md body {
+        --ion-background-color: #f9f9f9;
+        --ion-toolbar-background: var(--ion-background-color);
+        --ion-item-background: #fff;
+      }
+
+      /* This sets a different item background in dark mode on ios */
+      .ios body.dark {
+        --ion-item-background: #1c1c1d;
+      }
+
+      /* This is added for the flashing that happens when toggling between themes */
+      ion-item {
+        --transition: none;
+      }
+    </style>
+  </body>
+</html>
diff --git a/static/usage/v7/theming/manual-dark-mode/index.md b/static/usage/v7/theming/manual-dark-mode/index.md
new file mode 100644
index 00000000000..2022b7e8952
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/index.md
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html 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';
+
+import variables_css from './theme/variables_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'theme/variables.css': variables_css,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    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/theme/variables.css': variables_css,
+      },
+    },
+  }}
+  src="usage/v7/theming/manual-dark-mode/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/theming/manual-dark-mode/javascript.md b/static/usage/v7/theming/manual-dark-mode/javascript.md
new file mode 100644
index 00000000000..0b01544ae9b
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/javascript.md
@@ -0,0 +1,132 @@
+```html
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
+
+    <script>
+      window.Ionic = {
+        config: {
+          mode: 'ios',
+        },
+      };
+    </script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Display</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="dark">
+              <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list-header>Appearance</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-toggle id="themeToggle" justify="space-between">Dark Mode</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">Text Size</ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between">Bold Text</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list-header>Brightness</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-range value="40">
+              <ion-icon name="sunny-outline" slot="start"></ion-icon>
+              <ion-icon name="sunny" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">
+            <ion-label>Night Shift</ion-label>
+            <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+      <script>
+        // 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 theme
+        toggle.addEventListener('ionChange', (ev) => {
+          toggleDarkTheme(ev.detail.checked);
+        });
+
+        // Use matchMedia to check the user preference
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+        // Initialize the dark theme based on the initial
+        // value of the prefers-color-scheme media query
+        initializeDarkTheme(prefersDark.matches);
+
+        // Listen for changes to the prefers-color-scheme media query
+        prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches));
+
+        // Check/uncheck the toggle and update the theme based on isDark
+        function initializeDarkTheme(isDark) {
+          toggle.checked = isDark;
+          toggleDarkTheme(isDark);
+        }
+
+        // Called by the media query to check/uncheck the toggle
+        function checkToggle(shouldCheck) {
+          toggle.checked = shouldCheck;
+        }
+
+        // Add or remove the "dark" class on the document body
+        function toggleDarkTheme(shouldAdd) {
+          document.body.classList.toggle('dark', shouldAdd);
+        }
+      </script>
+
+      <style>
+        /*
+      * Optional CSS
+      * -----------------------------------
+      */
+
+        /* This sets a different background and item background in light mode on ios */
+        .ios body {
+          --ion-background-color: #f2f2f6;
+          --ion-toolbar-background: var(--ion-background-color);
+          --ion-item-background: #fff;
+        }
+
+        /* This sets a different background and item background in light mode on md */
+        .md body {
+          --ion-background-color: #f9f9f9;
+          --ion-toolbar-background: var(--ion-background-color);
+          --ion-item-background: #fff;
+        }
+
+        /* This is added for the flashing that happens when toggling between themes */
+        ion-item {
+          --transition: none;
+        }
+      </style>
+    </ion-app>
+  </body>
+</html>
+```
diff --git a/static/usage/v7/theming/manual-dark-mode/react/main_css.md b/static/usage/v7/theming/manual-dark-mode/react/main_css.md
new file mode 100644
index 00000000000..e26327f896f
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/react/main_css.md
@@ -0,0 +1,25 @@
+```css
+/*
+ * Optional CSS
+ * -----------------------------------
+ */
+
+/* This sets a different background and item background in light mode on ios */
+.ios body {
+  --ion-background-color: #f2f2f6;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background in light mode on md */
+.md body {
+  --ion-background-color: #f9f9f9;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This is added for the flashing that happens when toggling between themes */
+ion-item {
+  --transition: none;
+}
+```
diff --git a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md
new file mode 100644
index 00000000000..70938e6a804
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md
@@ -0,0 +1,117 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/react';
+import type { ToggleCustomEvent } from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  const [themeToggle, setThemeToggle] = useState(false);
+
+  // Listen for the toggle check/uncheck to toggle the dark theme
+  const toggleChange = (ev: ToggleCustomEvent) => {
+    toggleDarkTheme(ev.detail.checked);
+  };
+
+  // Add or remove the "dark" class on the document body
+  const toggleDarkTheme = (shouldAdd: boolean) => {
+    document.body.classList.toggle('dark', shouldAdd);
+  };
+
+  // Check/uncheck the toggle and update the theme based on isDark
+  const initializeDarkTheme = (isDark: boolean) => {
+    setThemeToggle(isDark);
+    toggleDarkTheme(isDark);
+  };
+
+  useEffect(() => {
+    // Use matchMedia to check the user preference
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Initialize the dark theme based on the initial
+    // value of the prefers-color-scheme media query
+    initializeDarkTheme(prefersDark.matches);
+
+    // Listen for changes to the prefers-color-scheme media query
+    prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches));
+  }, []);
+
+  return (
+    <>
+      <IonHeader class="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton default-href="#"></IonBackButton>
+          </IonButtons>
+          <IonTitle>Display</IonTitle>
+          <IonButtons slot="end">
+            <IonButton color="dark">
+              <IonIcon slot="icon-only" ios={personCircleOutline} md={personCircle}></IonIcon>
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <IonListHeader>Appearance</IonListHeader>
+        <IonList inset={true}>
+          <IonItem>
+            <IonToggle checked={themeToggle} onIonChange={toggleChange} justify="space-between">
+              Dark Mode
+            </IonToggle>
+          </IonItem>
+        </IonList>
+
+        <IonList inset={true}>
+          <IonItem button={true}>Text Size</IonItem>
+          <IonItem>
+            <IonToggle justify="space-between">Bold Text</IonToggle>
+          </IonItem>
+        </IonList>
+
+        <IonListHeader>Brightness</IonListHeader>
+        <IonList inset={true}>
+          <IonItem>
+            <IonRange value={40}>
+              <IonIcon icon={sunnyOutline} slot="start"></IonIcon>
+              <IonIcon icon={sunny} slot="end"></IonIcon>
+            </IonRange>
+          </IonItem>
+          <IonItem>
+            <IonToggle justify="space-between" checked>
+              True Tone
+            </IonToggle>
+          </IonItem>
+        </IonList>
+
+        <IonList inset={true}>
+          <IonItem button={true}>
+            <IonLabel>Night Shift</IonLabel>
+            <IonText slot="end" color="medium">
+              9:00 PM to 8:00 AM
+            </IonText>
+          </IonItem>
+        </IonList>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/theming/manual-dark-mode/theme/variables_css.md b/static/usage/v7/theming/manual-dark-mode/theme/variables_css.md
new file mode 100644
index 00000000000..72a10e6d263
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/theme/variables_css.md
@@ -0,0 +1,160 @@
+```css
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/*
+ * 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: #1c1c1d;
+
+  --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);
+}
+
+/*
+ * 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/static/usage/v7/theming/manual-dark-mode/vue.md b/static/usage/v7/theming/manual-dark-mode/vue.md
new file mode 100644
index 00000000000..2dfda3aa30c
--- /dev/null
+++ b/static/usage/v7/theming/manual-dark-mode/vue.md
@@ -0,0 +1,162 @@
+```html
+<template>
+  <ion-header class="ion-no-border">
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button default-href="#"></ion-back-button>
+      </ion-buttons>
+      <ion-title>Display</ion-title>
+      <ion-buttons slot="end">
+        <ion-button color="dark">
+          <ion-icon slot="icon-only" :ios="personCircleOutline" :md="personCircle"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list-header>Appearance</ion-list-header>
+    <ion-list :inset="true">
+      <ion-item>
+        <ion-toggle :checked="themeToggle" @ionChange="toggleChange($event)" justify="space-between"
+          >Dark Mode</ion-toggle
+        >
+      </ion-item>
+    </ion-list>
+
+    <ion-list :inset="true">
+      <ion-item :button="true">Text Size</ion-item>
+      <ion-item>
+        <ion-toggle justify="space-between">Bold Text</ion-toggle>
+      </ion-item>
+    </ion-list>
+
+    <ion-list-header>Brightness</ion-list-header>
+    <ion-list :inset="true">
+      <ion-item>
+        <ion-range value="40">
+          <ion-icon :icon="sunnyOutline" slot="start"></ion-icon>
+          <ion-icon :icon="sunny" slot="end"></ion-icon>
+        </ion-range>
+      </ion-item>
+      <ion-item>
+        <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+      </ion-item>
+    </ion-list>
+
+    <ion-list :inset="true">
+      <ion-item :button="true">
+        <ion-label>Night Shift</ion-label>
+        <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonToggle,
+    IonToolbar,
+  } from '@ionic/vue';
+  import type { ToggleCustomEvent } from '@ionic/vue';
+  import { personCircle, personCircleOutline, sunnyOutline, sunny } from 'ionicons/icons';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonBackButton,
+      IonButton,
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonIcon,
+      IonItem,
+      IonLabel,
+      IonList,
+      IonListHeader,
+      IonRange,
+      IonText,
+      IonToggle,
+      IonToolbar,
+    },
+    setup() {
+      const themeToggle = ref(false);
+
+      // Use matchMedia to check the user preference
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+      // Add or remove the "dark" class on the document body
+      const toggleDarkTheme = (shouldAdd) => {
+        document.body.classList.toggle('dark', shouldAdd);
+      };
+
+      // Check/uncheck the toggle and update the theme based on isDark
+      const initializeDarkTheme = (isDark) => {
+        themeToggle.value = isDark;
+        toggleDarkTheme(isDark);
+      };
+
+      // Initialize the dark theme based on the initial
+      // value of the prefers-color-scheme media query
+      initializeDarkTheme(prefersDark.matches);
+
+      // Listen for changes to the prefers-color-scheme media query
+      prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches));
+
+      // Listen for the toggle check/uncheck to toggle the dark theme
+      const toggleChange = (ev: ToggleCustomEvent) => {
+        toggleDarkTheme(ev.detail.checked);
+      };
+
+      return {
+        personCircle,
+        personCircleOutline,
+        sunnyOutline,
+        sunny,
+        initializeDarkTheme,
+        toggleChange,
+        toggleDarkTheme,
+        themeToggle,
+      };
+    },
+  });
+</script>
+
+<style>
+  /*
+  * Optional CSS
+  * -----------------------------------
+  */
+
+  /* This sets a different background and item background in light mode on ios */
+  .ios body {
+    --ion-background-color: #f2f2f6;
+    --ion-toolbar-background: var(--ion-background-color);
+    --ion-item-background: #fff;
+  }
+
+  /* This sets a different background and item background in light mode on md */
+  .md body {
+    --ion-background-color: #f9f9f9;
+    --ion-toolbar-background: var(--ion-background-color);
+    --ion-item-background: #fff;
+  }
+
+  /* This is added for the flashing that happens when toggling between themes */
+  ion-item {
+    --transition: none;
+  }
+</style>
+```

From a47e79fd372f977e45b449fd652f03618ed4d744 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 4 Aug 2023 13:53:16 -0400
Subject: [PATCH 453/469] docs(api): add accessibility section for new
 htmlAttributes property (#3064)

---
 docs/api/action-sheet.md | 147 ++++++++++++++++++++++++++++++++++++-
 docs/api/alert.md        | 152 ++++++++++++++++++++++++++++++++++++++-
 docs/api/toast.md        | 129 +++++++++++++++++++++++++++------
 3 files changed, 403 insertions(+), 25 deletions(-)

diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index a11e669c194..8d6844e3d3e 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -1,6 +1,9 @@
 ---
 title: "ion-action-sheet"
 ---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
 import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
 import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
@@ -94,10 +97,150 @@ import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-
 
 ## Accessibility
 
+### Screen Readers
+
+Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app.
+
+#### Role
+
 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.
 
+#### Action Sheet Description
+
 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.
 
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="javascript">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```javascript
+useIonActionSheet({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```javascript
+const actionSheet = await actionSheetController.create({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+#### Action Sheet Buttons Description
+
+Buttons containing text will be read by a screen reader. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button.
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="javascript">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```javascript
+useIonActionSheet({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```javascript
+const actionSheet = await actionSheetController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+</Tabs>
+
 ## Interfaces
 
 ### ActionSheetButton
@@ -108,6 +251,8 @@ interface ActionSheetButton<T = any> {
   role?: 'cancel' | 'destructive' | 'selected' | string;
   icon?: string;
   cssClass?: string | string[];
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
   handler?: () => boolean | void | Promise<boolean | void>;
   data?: T;
 }
@@ -150,4 +295,4 @@ interface ActionSheetOptions {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/alert.md b/docs/api/alert.md
index f6e5d5ee581..e645cf2f397 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -111,25 +111,173 @@ import Customization from '@site/static/usage/v7/alert/customization/index.md';
 
 ## Accessibility
 
+### Screen Readers
+
+Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app.
+
+#### Role
+
 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.
 
+#### Alert Description
+
 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.
 
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```javascript
+const alert = await this.alertController.create({
+  message: 'This is an alert with custom aria attributes.',
+  htmlAttributes: {
+    'aria-label': 'alert dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="javascript">
+
+```javascript
+const alert = await this.alertController.create({
+  message: 'This is an alert with custom aria attributes.',
+  htmlAttributes: {
+    'aria-label': 'alert dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```javascript
+useIonAlert({
+  message: 'This is an alert with custom aria attributes.',
+  htmlAttributes: {
+    'aria-label': 'alert dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```javascript
+const alert = await alertController.create({
+  message: 'This is an alert with custom aria attributes.',
+  htmlAttributes: {
+    'aria-label': 'alert dialog',
+  },
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+
 All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
 
+#### Alert Buttons Description
+
+Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing `aria-label` to the `htmlAttributes` property on the button.
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```javascript
+const alert = await this.alertController.create({
+  header: 'Header',
+  buttons: [
+    {
+      text: 'Exit',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="javascript">
+
+```javascript
+const alert = await this.alertController.create({
+  header: 'Header',
+  buttons: [
+    {
+      text: 'Exit',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```javascript
+useIonAlert({
+  header: 'Header',
+  buttons: [
+    {
+      text: 'Exit',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```javascript
+const alert = await alertController.create({
+  header: 'Header',
+  buttons: [
+    {
+      text: 'Exit',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+</Tabs>
 
 ## Interfaces
 
 ### AlertButton
 
 ```typescript
+type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
+
 interface AlertButton {
   text: string;
   role?: 'cancel' | 'destructive' | string;
   cssClass?: string | string[];
-  handler?: (value: any) => boolean | void | {[key: string]: any};
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+  handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
 }
 ```
 
@@ -199,4 +347,4 @@ interface AlertOptions {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/toast.md b/docs/api/toast.md
index 10a785c2086..ea4cf7a7126 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -86,6 +86,112 @@ import ThemingPlayground from '@site/static/usage/v7/toast/theming/index.md';
 
 <ThemingPlayground />
 
+## 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
+
+Toasts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app.
+
+#### Role
+
+`ion-toast` has `role="status"` and `aria-live="polite"` set on the inner `.toast-content` element. This causes screen readers to only announce the toast message and header. Buttons and icons will not be announced when the toast is presented.
+
+`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 should not interrupt the current task.
+
+Since toasts are intended to be subtle notification, `aria-live` should never be set to `"assertive"`. If developers need to interrupt the user with an important message, we recommend using an [alert](./alert).
+
+#### Toast Buttons Description
+
+Buttons containing text will be read by a screen reader when they are interacted with. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button.
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```javascript
+const toast = await this.toastController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="javascript">
+
+```javascript
+const toast = await this.toastController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```javascript
+useIonToast({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```javascript
+const toast = await toastController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+### 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 an [alert](./alert) instead.
+
+* For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
+
 ## Interfaces
 
 ### ToastButton
@@ -97,6 +203,7 @@ interface ToastButton {
   side?: 'start' | 'end';
   role?: 'cancel' | string;
   cssClass?: string | string[];
+  htmlAttributes?: { [key: string]: any };
   handler?: () => boolean | void | Promise<boolean | void>;
 }
 ```
@@ -126,28 +233,6 @@ interface ToastOptions {
 }
 ```
 
-## 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 `role="status"` and `aria-live="polite"` set on the inner `.toast-content` element. This causes screen readers to only announce the toast message and header. Buttons and icons will not be announced.
-
-`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 should not interrupt the current task.
-
-Since toasts are intended to be subtle notification, `aria-live` should never be set to `"assertive"`. If developers need to interrupt the user with an important message, we recommend using an [alert](./alert).
-
-### 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 an [alert](./alert) instead.
-
-* For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
-
 ## Properties
 <Props />
 

From 20981f3e0ed5a62c3637689da17615bff5d0cfcf Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Mon, 7 Aug 2023 11:24:31 -0400
Subject: [PATCH 454/469] docs(vue): streamline usage examples with script
 setup syntax (#2956)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore(docs): streamline demo using script setup syntax

Simplifies usage demo using Vue’s script setup syntax.

---------

Co-authored-by: Shawn Taylor <shawn@ionic.io>
---
 static/usage/v7/alert/buttons/vue.md          | 54 +++++-------
 static/usage/v7/alert/customization/vue.md    | 27 +++---
 static/usage/v7/alert/inputs/radios/vue.md    | 43 ++++------
 .../usage/v7/alert/inputs/text-inputs/vue.md  | 51 +++++------
 .../v7/alert/presenting/controller/vue.md     | 25 ++----
 .../usage/v7/alert/presenting/isOpen/vue.md   | 17 ++--
 .../usage/v7/alert/presenting/trigger/vue.md  | 11 +--
 static/usage/v7/input/counter/vue.md          | 14 +--
 .../v7/modal/controller/vue/example_vue.md    | 34 +++-----
 .../v7/modal/controller/vue/modal_vue.md      | 19 ++--
 static/usage/v7/modal/custom-dialogs/vue.md   | 86 +++++++------------
 static/usage/v7/modal/inline/basic/vue.md     | 54 ++++--------
 static/usage/v7/modal/inline/is-open/vue.md   | 20 ++---
 .../usage/v7/modal/performance/mount/vue.md   | 21 +----
 .../usage/v7/modal/sheet/auto-height/vue.md   | 14 +--
 .../v7/modal/sheet/background-content/vue.md  | 38 ++------
 static/usage/v7/modal/sheet/basic/vue.md      | 20 +----
 .../v7/modal/sheet/handle-behavior/vue.md     | 15 +---
 .../usage/v7/modal/styling/animations/vue.md  | 72 ++++++----------
 static/usage/v7/modal/styling/theming/vue.md  | 28 ++----
 20 files changed, 210 insertions(+), 453 deletions(-)

diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
index cd126758598..25ae70647d0 100644
--- a/static/usage/v7/alert/buttons/vue.md
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -11,44 +11,32 @@
   <p>{{ roleMessage }}</p>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const handlerMessage = ref('');
-      const roleMessage = ref('');
+  const handlerMessage = ref('');
+  const roleMessage = ref('');
 
-      const alertButtons = [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          handler: () => {
-            handlerMessage.value = 'Alert canceled';
-          },
-        },
-        {
-          text: 'OK',
-          role: 'confirm',
-          handler: () => {
-            handlerMessage.value = 'Alert confirmed';
-          },
-        },
-      ];
-
-      const setResult = (ev: CustomEvent) => {
-        roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
-      };
-
-      return {
-        handlerMessage,
-        roleMessage,
-        alertButtons,
-        setResult,
-      };
+  const alertButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      handler: () => {
+        handlerMessage.value = 'Alert canceled';
+      },
     },
+    {
+      text: 'OK',
+      role: 'confirm',
+      handler: () => {
+        handlerMessage.value = 'Alert confirmed';
+      },
+    },
+  ];
+
+  const setResult = (ev: CustomEvent) => {
+    roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
   };
 </script>
 ```
diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md
index c526c93de8d..eafb78ae012 100644
--- a/static/usage/v7/alert/customization/vue.md
+++ b/static/usage/v7/alert/customization/vue.md
@@ -4,26 +4,19 @@
   <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?" :buttons="alertButtons"></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = [
-        {
-          text: 'No',
-          cssClass: 'alert-button-cancel',
-        },
-        {
-          text: 'Yes',
-          cssClass: 'alert-button-confirm',
-        },
-      ];
-
-      return { alertButtons };
+  const alertButtons = [
+    {
+      text: 'No',
+      cssClass: 'alert-button-cancel',
     },
-  };
+    {
+      text: 'Yes',
+      cssClass: 'alert-button-confirm',
+    },
+  ];
 </script>
 
 <style>
diff --git a/static/usage/v7/alert/inputs/radios/vue.md b/static/usage/v7/alert/inputs/radios/vue.md
index 994496c025e..c2b937c1472 100644
--- a/static/usage/v7/alert/inputs/radios/vue.md
+++ b/static/usage/v7/alert/inputs/radios/vue.md
@@ -9,33 +9,26 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-      const alertInputs = [
-        {
-          label: 'Red',
-          type: 'radio',
-          value: 'red',
-        },
-        {
-          label: 'Blue',
-          type: 'radio',
-          value: 'blue',
-        },
-        {
-          label: 'Green',
-          type: 'radio',
-          value: 'green',
-        },
-      ];
-
-      return { alertButtons, alertInputs };
+  const alertButtons = ['OK'];
+  const alertInputs = [
+    {
+      label: 'Red',
+      type: 'radio',
+      value: 'red',
+    },
+    {
+      label: 'Blue',
+      type: 'radio',
+      value: 'blue',
+    },
+    {
+      label: 'Green',
+      type: 'radio',
+      value: 'green',
     },
-  };
+  ];
 </script>
 ```
diff --git a/static/usage/v7/alert/inputs/text-inputs/vue.md b/static/usage/v7/alert/inputs/text-inputs/vue.md
index 98a2b138607..fe4072e756d 100644
--- a/static/usage/v7/alert/inputs/text-inputs/vue.md
+++ b/static/usage/v7/alert/inputs/text-inputs/vue.md
@@ -9,37 +9,30 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-      const alertInputs = [
-        {
-          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',
-        },
-      ];
-
-      return { alertButtons, alertInputs };
+  const alertButtons = ['OK'];
+  const alertInputs = [
+    {
+      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',
     },
-  };
+  ];
 </script>
 ```
diff --git a/static/usage/v7/alert/presenting/controller/vue.md b/static/usage/v7/alert/presenting/controller/vue.md
index 6ec781a6bf2..8c46798eff5 100644
--- a/static/usage/v7/alert/presenting/controller/vue.md
+++ b/static/usage/v7/alert/presenting/controller/vue.md
@@ -3,25 +3,18 @@
   <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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'],
-        });
+  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 };
-    },
+    await alert.present();
   };
 </script>
 ```
diff --git a/static/usage/v7/alert/presenting/isOpen/vue.md b/static/usage/v7/alert/presenting/isOpen/vue.md
index 57b8ccc217a..d86afe31101 100644
--- a/static/usage/v7/alert/presenting/isOpen/vue.md
+++ b/static/usage/v7/alert/presenting/isOpen/vue.md
@@ -11,22 +11,15 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const isOpen = ref(false);
-      const alertButtons = ['OK'];
+  const isOpen = ref(false);
+  const alertButtons = ['OK'];
 
-      const setOpen = (state: boolean) => {
-        isOpen.value = state;
-      };
-
-      return { isOpen, alertButtons, setOpen };
-    },
+  const setOpen = (state: boolean) => {
+    isOpen.value = state;
   };
 </script>
 ```
diff --git a/static/usage/v7/alert/presenting/trigger/vue.md b/static/usage/v7/alert/presenting/trigger/vue.md
index 86e93aaac1f..f645a91fe1e 100644
--- a/static/usage/v7/alert/presenting/trigger/vue.md
+++ b/static/usage/v7/alert/presenting/trigger/vue.md
@@ -10,16 +10,9 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-
-      return { alertButtons };
-    },
-  };
+  const alertButtons = ['OK'];
 </script>
 ```
diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
index c601abc2c3d..1df64570da9 100644
--- a/static/usage/v7/input/counter/vue.md
+++ b/static/usage/v7/input/counter/vue.md
@@ -12,17 +12,11 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonInput },
-    methods: {
-      customFormatter(inputLength, maxLength) {
-        return `${maxLength - inputLength} characters remaining`;
-      },
-    },
-  });
+  const customFormatter = (inputLength, maxLength) => {
+    return `${maxLength - inputLength} characters remaining`;
+  };
 </script>
 ```
diff --git a/static/usage/v7/modal/controller/vue/example_vue.md b/static/usage/v7/modal/controller/vue/example_vue.md
index 1b98547ac47..f5a2c1309cb 100644
--- a/static/usage/v7/modal/controller/vue/example_vue.md
+++ b/static/usage/v7/modal/controller/vue/example_vue.md
@@ -13,31 +13,25 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle, modalController } from '@ionic/vue';
   import Modal from './Modal.vue';
+  import { ref } from '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 message = ref('This modal example uses the modalController to present and dismiss modals.');
 
-        const { data, role } = await modal.onWillDismiss();
+  const openModal = async () => {
+    const modal = await modalController.create({
+      component: Modal,
+    });
 
-        if (role === 'confirm') {
-          this.message = `Hello, ${data}!`;
-        }
-      },
-    },
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === 'confirm') {
+      message.value = `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
index 7df58303b59..534ba17654f 100644
--- a/static/usage/v7/modal/controller/vue/modal_vue.md
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -18,7 +18,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonContent,
     IonHeader,
@@ -30,19 +30,10 @@
     IonInput,
     modalController,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
+  const name = ref();
 
-  export default defineComponent({
-    name: 'Modal',
-    components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons, IonButton, IonItem, IonInput },
-    methods: {
-      cancel() {
-        return modalController.dismiss(null, 'cancel');
-      },
-      confirm() {
-        return modalController.dismiss(this.name, 'confirm');
-      },
-    },
-  });
+  const cancel = () => modalController.dismiss(null, 'cancel');
+  const confirm = () => modalController.dismiss(name.value, 'confirm');
 </script>
 ```
diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
index 57362d546fc..a16e82e5a17 100644
--- a/static/usage/v7/modal/custom-dialogs/vue.md
+++ b/static/usage/v7/modal/custom-dialogs/vue.md
@@ -1,33 +1,4 @@
 ```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>
@@ -60,7 +31,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButton,
     IonModal,
@@ -74,29 +45,38 @@
     IonIcon,
   } from '@ionic/vue';
   import { personCircle } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
+  import { ref } 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 };
-    },
-  });
+  const modal = ref();
+
+  const dismiss = () => modal.value.$el.dismiss();
 </script>
+<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>
 ```
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
index 2e0b1c4746c..2c5435b4335 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -30,7 +30,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButtons,
     IonButton,
@@ -44,40 +44,24 @@
     IonLabel,
   } from '@ionic/vue';
   import { OverlayEventDetail } from '@ionic/core/components';
-  import { defineComponent, ref } from 'vue';
+  import { 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}!`;
-        }
-      },
-    },
-  });
+  const message = ref('This modal example uses triggers to automatically open a modal when the button is clicked.');
+
+  const modal = ref();
+  const input = ref();
+
+  const cancel = () => modal.value.$el.dismiss(null, 'cancel');
+
+  const confirm = () => {
+    const name = input.value.$el.value;
+    modal.value.$el.dismiss(name, 'confirm');
+  };
+
+  const onWillDismiss = (ev: CustomEvent<OverlayEventDetail>) => {
+    if (ev.detail.role === 'confirm') {
+      message.value = `Hello, ${ev.detail.data}!`;
+    }
+  };
 </script>
 ```
diff --git a/static/usage/v7/modal/inline/is-open/vue.md b/static/usage/v7/modal/inline/is-open/vue.md
index c09025c1967..19e4cb0557f 100644
--- a/static/usage/v7/modal/inline/is-open/vue.md
+++ b/static/usage/v7/modal/inline/is-open/vue.md
@@ -28,22 +28,12 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButtons, IonButton, IonModal, IonHeader, IonToolbar, IonContent, IonTitle } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { 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;
-      },
-    },
-  });
+  const isOpen = ref(false);
+
+  const setOpen = (open: boolean) => (isOpen.value = open);
 </script>
 ```
diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md
index 0407ee98a4e..02dba8daf37 100644
--- a/static/usage/v7/modal/performance/mount/vue.md
+++ b/static/usage/v7/modal/performance/mount/vue.md
@@ -21,25 +21,12 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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();
-      },
-    },
-  });
+  const modal = ref();
+
+  const close = () => modal.value.$el.dismiss();
 </script>
 ```
diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md
index 64eef0dd0cb..c8501ba89e6 100644
--- a/static/usage/v7/modal/sheet/auto-height/vue.md
+++ b/static/usage/v7/modal/sheet/auto-height/vue.md
@@ -28,19 +28,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
index e2647c4902c..d8dea197856 100644
--- a/static/usage/v7/modal/sheet/background-content/vue.md
+++ b/static/usage/v7/modal/sheet/background-content/vue.md
@@ -17,9 +17,9 @@
     <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>
+      <ion-button id="decrement" @click="count--">-</ion-button>
       <p>{{count}}</p>
-      <ion-button id="increment" @click="increment()">+</ion-button>
+      <ion-button id="increment" @click="count++">+</ion-button>
     </div>
 
     <ion-modal
@@ -76,7 +76,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButton,
     IonModal,
@@ -91,36 +91,8 @@
     IonLabel,
     IonSearchbar,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } 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--;
-      },
-    },
-  });
+  const count = ref(0);
 </script>
 ```
diff --git a/static/usage/v7/modal/sheet/basic/vue.md b/static/usage/v7/modal/sheet/basic/vue.md
index 69ac1179b2e..ad5847eb53a 100644
--- a/static/usage/v7/modal/sheet/basic/vue.md
+++ b/static/usage/v7/modal/sheet/basic/vue.md
@@ -54,7 +54,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButton,
     IonModal,
@@ -69,23 +69,5 @@
     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/vue.md b/static/usage/v7/modal/sheet/handle-behavior/vue.md
index e40321f52b8..6163493a9d3 100644
--- a/static/usage/v7/modal/sheet/handle-behavior/vue.md
+++ b/static/usage/v7/modal/sheet/handle-behavior/vue.md
@@ -23,20 +23,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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/vue.md b/static/usage/v7/modal/styling/animations/vue.md
index 8a15e8444fc..9cc28a39ed8 100644
--- a/static/usage/v7/modal/styling/animations/vue.md
+++ b/static/usage/v7/modal/styling/animations/vue.md
@@ -59,7 +59,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     createAnimation,
     IonButtons,
@@ -75,55 +75,35 @@
     IonImg,
     IonLabel,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } 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 modal = ref();
 
-        const backdropAnimation = createAnimation()
-          .addElement(root.querySelector('ion-backdrop'))
-          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+  const dismiss = () => modal.value.$el.dismiss();
 
-        const wrapperAnimation = createAnimation()
-          .addElement(root.querySelector('.modal-wrapper'))
-          .keyframes([
-            { offset: 0, opacity: '0', transform: 'scale(0)' },
-            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
-          ]);
+  const enterAnimation = (baseEl: HTMLElement) => {
+    const root = baseEl.shadowRoot;
 
-        return createAnimation()
-          .addElement(baseEl)
-          .easing('ease-out')
-          .duration(500)
-          .addAnimation([backdropAnimation, wrapperAnimation]);
-      };
+    const backdropAnimation = createAnimation()
+      .addElement(root.querySelector('ion-backdrop'))
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
-      const leaveAnimation = (baseEl) => {
-        return enterAnimation(baseEl).direction('reverse');
-      };
-      return { enterAnimation, leaveAnimation };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-    },
-  });
+    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');
+  };
 </script>
 ```
diff --git a/static/usage/v7/modal/styling/theming/vue.md b/static/usage/v7/modal/styling/theming/vue.md
index 7dc80157056..fb5d2d6868f 100644
--- a/static/usage/v7/modal/styling/theming/vue.md
+++ b/static/usage/v7/modal/styling/theming/vue.md
@@ -77,7 +77,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButtons,
     IonButton,
@@ -92,28 +92,10 @@
     IonImg,
     IonLabel,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } 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();
-      },
-    },
-  });
+  const modal = ref();
+
+  const dismiss = () => modal.value.$el.dismiss();
 </script>
 ```

From 7e081fa9b2d5a32445bf29c8aff2f2b5e8f03c64 Mon Sep 17 00:00:00 2001
From: Nikita Barsukov <nikita.s.barsukov@gmail.com>
Date: Tue, 8 Aug 2023 18:13:44 +0300
Subject: [PATCH 455/469] docs(input): update `Maskito` documentation link
 (#3072)

---
 docs/api/input.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/input.md b/docs/api/input.md
index bab9d178349..5b9d2c8412c 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -120,7 +120,7 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 ## Input Masking
 
-Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://tinkoff.github.io/maskito/getting-started/what-is-maskito) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more.
+Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://maskito.dev) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more.
 
 To get started with Maskito, install the library:
 

From 43c3c9e0d4327c94732f28457ee0ea02f0dc30b7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 10 Aug 2023 13:40:02 -0500
Subject: [PATCH 456/469] docs(react): document lifecycle hook dependencies arg
 (#3078)

resolves #1949
---
 docs/react/lifecycle.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md
index b717c5f0606..4712cd9b5df 100644
--- a/docs/react/lifecycle.md
+++ b/docs/react/lifecycle.md
@@ -133,6 +133,16 @@ export default HomePage;
 Functional components don't need to be wrapped with the `withIonLifeCycle` HOC as class components do.
 :::
 
+Developers can also optionally pass reactive dependencies to each lifecycle hook. These are then passed to the underlying [React useEffect hook](https://react.dev/reference/react/useEffect#useeffect):
+
+```tsx
+const [data, setData] = useState('foo');
+
+useIonViewDidEnter(() => {
+  console.log('ionViewDidEnter event fired');
+}, [data]);
+```
+
 ## 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.

From 95eaf9f77d8fbc00325e050ed443269cbb03dbbc Mon Sep 17 00:00:00 2001
From: Nikita Barsukov <nikita.s.barsukov@gmail.com>
Date: Thu, 10 Aug 2023 21:45:42 +0300
Subject: [PATCH 457/469] docs(input): update `Maskito` repository link (#3074)

---
 docs/api/input.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/input.md b/docs/api/input.md
index 5b9d2c8412c..1473095c26a 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -134,7 +134,7 @@ import Masking from '@site/static/usage/v7/input/mask/index.md';
 
 :::note
 
-Please submit bug reports with Maskito to the [Maskito Github repository](https://github.com/Tinkoff/maskito/issues). For technical support, please use the [Ionic Forum](https://forum.ionicframework.com/) or [Ionic Discord](http://chat.ionicframework.com/).
+Please submit bug reports with Maskito to the [Maskito Github repository](https://github.com/taiga-family/maskito/issues). For technical support, please use the [Ionic Forum](https://forum.ionicframework.com/) or [Ionic Discord](http://chat.ionicframework.com/).
 
 :::
 

From dcba5c22c1851866c6222bec7f5291ee7b082738 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 10 Aug 2023 14:00:33 -0500
Subject: [PATCH 458/469] feat(playground): add prop to display console
 messages from demo (#3060)

---
 src/components/global/Playground/index.tsx    |  92 ++++++++++++++-
 .../global/Playground/playground.css          | 108 ++++++++++++++++++
 .../global/Playground/playground.types.ts     |   5 +
 static/usage/common.js                        |  35 ++++++
 .../angular/example_component_html.md         |   1 -
 .../angular/example_component_ts.md           |   5 +-
 .../usage/v7/range/ion-change-event/demo.html |   4 +-
 .../usage/v7/range/ion-change-event/index.md  |   1 +
 .../v7/range/ion-change-event/javascript.md   |   4 +-
 .../usage/v7/range/ion-change-event/react.md  |  18 ++-
 static/usage/v7/range/ion-change-event/vue.md |  12 +-
 11 files changed, 251 insertions(+), 34 deletions(-)

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 0681230b851..c7ab14d5a35 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import './playground.css';
 import { EditorOptions, openAngularEditor, openHtmlEditor, openReactEditor, openVueEditor } from './stackblitz.utils';
-import { Mode, UsageTarget } from './playground.types';
+import { ConsoleItem, Mode, UsageTarget } from './playground.types';
 import useThemeContext from '@theme/hooks/useThemeContext';
 
 import Tippy from '@tippyjs/react';
@@ -109,6 +109,7 @@ interface UsageTargetOptions {
  * @param src The absolute path to the playground demo. For example: `/usage/button/basic/demo.html`
  * @param size The height of the playground. Supports `xsmall`, `small`, `medium`, `large`, 'xlarge' or any string value.
  * @param devicePreview `true` if the playground example should render in a device frame (iOS/MD).
+ * @param showConsole `true` if the playground should render a console UI that reflects console logs, warnings, and errors.
  */
 export default function Playground({
   code,
@@ -118,6 +119,7 @@ export default function Playground({
   size = 'small',
   mode,
   devicePreview,
+  showConsole,
   includeIonContent = true,
   version,
 }: {
@@ -133,6 +135,7 @@ export default function Playground({
   mode?: 'ios' | 'md';
   description?: string;
   devicePreview?: boolean;
+  showConsole?: boolean;
   includeIonContent: boolean;
   /**
    * The major version of Ionic to use in the generated Stackblitz examples.
@@ -159,6 +162,7 @@ export default function Playground({
   const codeRef = useRef(null);
   const frameiOS = useRef<HTMLIFrameElement | null>(null);
   const frameMD = useRef<HTMLIFrameElement | null>(null);
+  const consoleBodyRef = useRef<HTMLDivElement | null>(null);
 
   const defaultMode = typeof mode !== 'undefined' ? mode : Mode.iOS;
 
@@ -182,6 +186,15 @@ export default function Playground({
   const [codeSnippets, setCodeSnippets] = useState({});
   const [renderIframes, setRenderIframes] = useState(false);
   const [iframesLoaded, setIframesLoaded] = useState(false);
+  const [mdConsoleItems, setMDConsoleItems] = useState<ConsoleItem[]>([]);
+  const [iosConsoleItems, setiOSConsoleItems] = useState<ConsoleItem[]>([]);
+
+  /**
+   * We don't actually care about the count, but this lets us
+   * re-trigger useEffect hooks when the demo is reset and the
+   * iframes are refreshed.
+   */
+  const [resetCount, setResetCount] = useState(0);
 
   /**
    * Rather than encode isDarkTheme into the frame source
@@ -258,6 +271,24 @@ export default function Playground({
     setFramesLoaded();
   }, [renderIframes]);
 
+  useEffect(() => {
+    if (showConsole) {
+      if (frameiOS.current) {
+        frameiOS.current.contentWindow.addEventListener('console', (ev: CustomEvent) => {
+          setiOSConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]);
+          consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
+        });
+      }
+
+      if (frameMD.current) {
+        frameMD.current.contentWindow.addEventListener('console', (ev: CustomEvent) => {
+          setMDConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]);
+          consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
+        });
+      }
+    }
+  }, [iframesLoaded, resetCount]); // including resetCount re-runs this when iframes are reloaded
+
   useEffect(() => {
     /**
      * Using a dynamic import here to avoid SSR errors when trying to extend `HTMLElement`
@@ -311,13 +342,19 @@ export default function Playground({
   /**
    * Reloads the iOS and MD iframe sources back to their original state.
    */
-  function resetDemo() {
+  async function resetDemo() {
     if (frameiOS.current) {
       frameiOS.current.contentWindow.location.reload();
     }
     if (frameMD.current) {
       frameMD.current.contentWindow.location.reload();
     }
+
+    setiOSConsoleItems([]);
+    setMDConsoleItems([]);
+
+    await Promise.all([waitForNextFrameLoadEvent(frameiOS.current), waitForNextFrameLoadEvent(frameMD.current)]);
+    setResetCount((oldCount) => oldCount + 1);
   }
 
   function openEditor(event) {
@@ -444,11 +481,39 @@ export default function Playground({
     );
   }
 
+  function renderConsole() {
+    const consoleItems = ionicMode === Mode.iOS ? iosConsoleItems : mdConsoleItems;
+
+    return (
+      <div className="playground__console">
+        <div className="playground__console-header">
+          <code>Console</code>
+        </div>
+        <div className="playground__console-body" ref={consoleBodyRef}>
+          {consoleItems.length === 0 ? (
+            <div className="playground__console-item playground__console-item--placeholder">
+              <code>Console messages will appear here when logged from the example above.</code>
+            </div>
+          ) : (
+            consoleItems.map((consoleItem, i) => (
+              <div key={i} className={`playground__console-item playground__console-item--${consoleItem.type}`}>
+                {consoleItem.type !== 'log' && (
+                  <div className="playground__console-icon">{consoleItem.type === 'warning' ? '⚠' : '❌'}</div>
+                )}
+                <code>{consoleItem.message}</code>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    );
+  }
+
   const sortedUsageTargets = useMemo(() => Object.keys(UsageTarget).sort(), []);
 
   return (
     <div className="playground" ref={hostRef}>
-      <div className="playground__container">
+      <div className={`playground__container ${showConsole ? 'playground__container--has-console' : ''}`}>
         <div className="playground__control-toolbar">
           <div className="playground__control-group">
             {sortedUsageTargets.map((lang) => {
@@ -633,6 +698,7 @@ export default function Playground({
             ]
           : []}
       </div>
+      {showConsole && renderConsole()}
       <div ref={codeRef} className="playground__code-block">
         {renderCodeSnippets()}
       </div>
@@ -660,6 +726,26 @@ const waitForFrame = (frame: HTMLIFrameElement) => {
   });
 };
 
+/**
+ * Returns a promise that resolves on the *next* load event of the
+ * given iframe. We intentionally don't check if it's already loaded
+ * because this is used when the demo is reset and the iframe is
+ * refreshed, so we don't want to return too early and catch the
+ * pre-reset version of the window.
+ */
+const waitForNextFrameLoadEvent = (frame: HTMLIFrameElement) => {
+  return new Promise<void>((resolve) => {
+    const handleLoad = () => {
+      frame.removeEventListener('load', handleLoad);
+      resolve();
+    };
+
+    if (frame) {
+      frame.addEventListener('load', handleLoad);
+    }
+  });
+};
+
 const isFrameReady = (frame: HTMLIFrameElement) => {
   if (!frame) {
     return false;
diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css
index 46e77dc40c0..79e33680792 100644
--- a/src/components/global/Playground/playground.css
+++ b/src/components/global/Playground/playground.css
@@ -14,6 +14,14 @@
   --playground-tabs-background: var(--c-carbon-90);
   --playground-tab-btn-color: var(--c-carbon-20);
   --playground-tab-btn-border-color: transparent;
+
+  --playground-console-item-separator-color: var(--c-carbon-80);
+  --playground-console-warning-background: #332B00;
+  --playground-console-warning-color: var(--c-yellow-80);
+  --playground-console-warning-separator-color: #665500;
+  --playground-console-error-background: #290000;
+  --playground-console-error-color: var(--c-red-40);
+  --playground-console-error-separator-color: #5C0000;
 }
 
 .playground {
@@ -28,6 +36,13 @@
    * @prop --playground-tabs-background: The background color of the tabs bar not including the active tab button.
    * @prop --playground-tab-btn-color: The text color of the tab buttons.
    * @prop --playground-tab-btn-border-color: The border color of the tab buttons.
+   * @prop --playground-console-item-separator-color The color of the separator/border between console UI items.
+   * @prop --playground-console-warning-background The background color of warning items in the console UI.
+   * @prop --playground-console-warning-color The text color of warning items in the console UI.
+   * @prop --playground-console-warning-separator-color The color of the top and bottom separator/border for warning items in the console UI.
+   * @prop --playground-console-error-background The background color of error items in the console UI.
+   * @prop --playground-console-error-color The text color of error items in the console UI.
+   * @prop --playground-console-error-separator-color The color of the top and bottom separator/border for error items in the console UI.
    */
   --playground-btn-color: var(--c-indigo-90);
   --playground-btn-selected-color: var(--c-blue-90);
@@ -41,6 +56,14 @@
   --playground-tab-btn-color: var(--c-carbon-100);
   --playground-tab-btn-border-color: var(--c-indigo-30);
 
+  --playground-console-item-separator-color: var(--c-indigo-20);
+  --playground-console-warning-background: var(--c-yellow-10);
+  --playground-console-warning-color: #5C3C00;
+  --playground-console-warning-separator-color: var(--c-yellow-30);
+  --playground-console-error-background: var(--c-red-10);
+  --playground-console-error-color: var(--c-red-90);
+  --playground-console-error-separator-color: var(--c-red-30);
+
   overflow: hidden;
 
   margin-bottom: var(--ifm-leading);
@@ -52,6 +75,11 @@
   border-radius: var(--ifm-code-border-radius);
 }
 
+.playground__container--has-console {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 /* Playground preview contains the demo example*/
 .playground__preview {
   display: flex;
@@ -213,6 +241,86 @@
   }
 }
 
+.playground__console {
+  background-color: var(--code-block-bg-c);
+  border: 1px solid var(--playground-separator-color);
+  border-top: 0;
+  border-bottom-left-radius: var(--ifm-code-border-radius);
+  border-bottom-right-radius: var(--ifm-code-border-radius);
+}
+
+.playground__console-header {
+  background-color: var(--playground-separator-color);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.playground__console-body {
+  overflow-y: auto;
+
+  height: 120px;
+}
+
+.playground__console-item {
+  border-top: 1px solid var(--separator-color);
+
+  position: relative;
+}
+
+.playground__console-header, .playground__console-item {
+  padding: 3px 3px 3px 28px;
+}
+
+.playground__console-item:first-child {
+  border-top: none;
+}
+
+.playground__console-item:last-child {
+  border-bottom: 1px solid var(--separator-color);
+}
+
+.playground__console-item--placeholder {
+  font-style: italic;
+}
+
+.playground__console-item--log {
+  --separator-color: var(--playground-console-item-separator-color);
+}
+
+.playground__console-item--warning {
+  --separator-color: var(--playground-console-warning-separator-color);
+  background-color: var(--playground-console-warning-background);
+  border-bottom: 1px solid var(--separator-color);
+  color: var(--playground-console-warning-color);
+}
+
+.playground__console-item--error {
+  --separator-color: var(--playground-console-error-separator-color);
+  background-color: var(--playground-console-error-background);
+  border-bottom: 1px solid var(--separator-color);
+  color: var(--playground-console-error-color);
+}
+
+/* warnings and errors have both borders colored, so hide the extra from the neighboring item */
+.playground__console-item--warning + .playground__console-item,
+.playground__console-item--error + .playground__console-item {
+  border-top: none;
+}
+
+.playground__console-icon {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+}
+
+.playground__console code {
+  background-color: transparent;
+  font-size: 0.813rem;
+  padding: 0;
+  padding-block-start: 0; /* prevents text getting cut off vertically */
+  padding-block-end: 0; /* prevents border from item below getting covered up */
+}
+
 /** Tabs **/
 .playground .tabs-container {
   background: var(--playground-code-background);
diff --git a/src/components/global/Playground/playground.types.ts b/src/components/global/Playground/playground.types.ts
index 20d98474eec..c6a14b8e585 100644
--- a/src/components/global/Playground/playground.types.ts
+++ b/src/components/global/Playground/playground.types.ts
@@ -9,3 +9,8 @@ export enum Mode {
   iOS = 'ios',
   MD = 'md',
 }
+
+export interface ConsoleItem {
+  type: 'log' | 'warning' | 'error';
+  message: string;
+}
diff --git a/static/usage/common.js b/static/usage/common.js
index 6bcd8833a30..52694d7e7b2 100644
--- a/static/usage/common.js
+++ b/static/usage/common.js
@@ -22,6 +22,41 @@ window.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  /**
+   * Monkey-patch the console methods so we can dispatch
+   * events when they're called, allowing the data to be
+   * captured by the playground's console UI.
+   */
+  const _log = console.log,
+    _warn = console.warn,
+    _error = console.error;
+
+  const dispatchConsoleEvent = (type, arguments) => {
+    window.dispatchEvent(
+      new CustomEvent('console', {
+        detail: {
+          type,
+          message: Object.values(arguments).join(' '),
+        },
+      })
+    );
+  };
+
+  console.log = function () {
+    dispatchConsoleEvent('log', arguments);
+    return _log.apply(console, arguments);
+  };
+
+  console.warn = function () {
+    dispatchConsoleEvent('warning', arguments);
+    return _warn.apply(console, arguments);
+  };
+
+  console.error = function () {
+    dispatchConsoleEvent('error', arguments);
+    return _error.apply(console, arguments);
+  };
+
   /**
    * The Playground needs to wait for the message listener
    * to be created before sending any messages, otherwise
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
index 12a736de8dd..bbcbd120285 100644
--- 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
@@ -1,4 +1,3 @@
 ```html
 <ion-range aria-label="Range with ionChange" (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
index b90eff62d29..377ccd2dc28 100644
--- 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
@@ -2,17 +2,14 @@
 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;
+    console.log('ionChange emitted value:', (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
index 0c5f17d2875..42fa2654800 100644
--- a/static/usage/v7/range/ion-change-event/demo.html
+++ b/static/usage/v7/range/ion-change-event/demo.html
@@ -22,17 +22,15 @@
         <div class="container">
           <div class="demo">
             <ion-range aria-label="Range with ionChange"></ion-range>
-            <ion-label>ionChange emitted value: <span id="lastValue"></span></ion-label>
           </div>
         </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;
+        console.log('ionChange emitted value:', detail.value);
       });
     </script>
   </body>
diff --git a/static/usage/v7/range/ion-change-event/index.md b/static/usage/v7/range/ion-change-event/index.md
index c35324b9448..b61d73279f3 100644
--- a/static/usage/v7/range/ion-change-event/index.md
+++ b/static/usage/v7/range/ion-change-event/index.md
@@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
+  showConsole={true}
   code={{
     javascript,
     react,
diff --git a/static/usage/v7/range/ion-change-event/javascript.md b/static/usage/v7/range/ion-change-event/javascript.md
index 4aebeb2defa..25507306a55 100644
--- a/static/usage/v7/range/ion-change-event/javascript.md
+++ b/static/usage/v7/range/ion-change-event/javascript.md
@@ -1,13 +1,11 @@
 ```html
 <ion-range aria-label="Range with ionChange"></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;
+    console.log('ionChange emitted value: ' + 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
index d6c43bc7696..d49b2adb596 100644
--- a/static/usage/v7/range/ion-change-event/react.md
+++ b/static/usage/v7/range/ion-change-event/react.md
@@ -1,17 +1,13 @@
 ```tsx
-import React, { useState } from 'react';
-import { IonLabel, IonRange } from '@ionic/react';
-import { RangeValue } from '@ionic/core';
+import React from 'react';
+import { IonRange } from '@ionic/react';
+
 function Example() {
-  const [lastEmittedValue, setLastEmittedValue] = useState<RangeValue>();
   return (
-    <>
-      <IonRange
-        aria-label="Range with ionChange"
-        onIonChange={({ detail }) => setLastEmittedValue(detail.value)}
-      ></IonRange>
-      <IonLabel>ionChange emitted value: {lastEmittedValue as number}</IonLabel>
-    </>
+    <IonRange
+      aria-label="Range with ionChange"
+      onIonChange={({ detail }) => console.log('ionChange emitted value: ' + detail.value)}
+    ></IonRange>
   );
 }
 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
index 306682ab7db..44a3fdcfa1f 100644
--- a/static/usage/v7/range/ion-change-event/vue.md
+++ b/static/usage/v7/range/ion-change-event/vue.md
@@ -1,23 +1,17 @@
 ```html
 <template>
   <ion-range aria-label="Range with ionChange" @ionChange="onIonChange"></ion-range>
-  <ion-label>ionChange emitted value: {{lastEmittedValue}}</ion-label>
 </template>
 
 <script lang="ts">
-  import { IonLabel, IonRange } from '@ionic/vue';
+  import { IonRange } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonLabel, IonRange },
-    data() {
-      return {
-        lastEmittedValue: '',
-      };
-    },
+    components: { IonRange },
     methods: {
       onIonChange({ detail }) {
-        this.lastEmittedValue = detail.value;
+        console.log('ionChange emitted value: ' + detail.value);
       },
     },
   });

From ef426cdad887eb3f860fedabbfa88052f8c56baf Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 10 Aug 2023 16:12:07 -0400
Subject: [PATCH 459/469] fix(): consolidate docusaurus tab groupids (#3079)

---
 docs/developing/config/global/index.md                          | 2 +-
 docs/developing/config/per-component/index.md                   | 2 +-
 docs/developing/config/per-platform-fallback/index.md           | 2 +-
 docs/developing/config/per-platform-overrides/index.md          | 2 +-
 docs/developing/config/per-platform/index.md                    | 2 +-
 docs/native-setup.md                                            | 2 +-
 versioned_docs/version-v6/developing/config/global/index.md     | 2 +-
 .../version-v6/developing/config/per-component/index.md         | 2 +-
 .../version-v6/developing/config/per-platform-fallback/index.md | 2 +-
 .../developing/config/per-platform-overrides/index.md           | 2 +-
 .../version-v6/developing/config/per-platform/index.md          | 2 +-
 versioned_docs/version-v6/native-setup.md                       | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md
index c2358647c26..b58bc0610a4 100644
--- a/docs/developing/config/global/index.md
+++ b/docs/developing/config/global/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="global-config"
+  groupId="framework"
   defaultValue="javascript"
   values={[
     { value: 'javascript', label: 'JavaScript' },
diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md
index 0e4aadeee60..4b6a5427bc3 100644
--- a/docs/developing/config/per-component/index.md
+++ b/docs/developing/config/per-component/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-component-config"
+  groupId="framework"
   defaultValue="javascript"
   values={[
     { value: 'javascript', label: 'JavaScript' },
diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md
index 6390a6120d1..c7d12df30ba 100644
--- a/docs/developing/config/per-platform-fallback/index.md
+++ b/docs/developing/config/per-platform-fallback/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-platform-fallback-config"
+  groupId="framework"
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md
index a5b8cdc490a..e8f723408b2 100644
--- a/docs/developing/config/per-platform-overrides/index.md
+++ b/docs/developing/config/per-platform-overrides/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-platform-fallback-config"
+  groupId="framework"
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md
index d21553ad1cf..3deba7540b0 100644
--- a/docs/developing/config/per-platform/index.md
+++ b/docs/developing/config/per-platform/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-platform-config"
+  groupId="framework"
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
diff --git a/docs/native-setup.md b/docs/native-setup.md
index 6c9c518e2d4..26a5469f3f9 100644
--- a/docs/native-setup.md
+++ b/docs/native-setup.md
@@ -41,7 +41,7 @@ Using the [Camera plugin](native/camera.md) as an example, first install it:
 
 ````mdx-code-block
 <Tabs
-  groupId="runtime"
+  groupId="framework"
   defaultValue="javascript"
   values={[
     { value: 'javascript', label: 'JavaScript' },
diff --git a/versioned_docs/version-v6/developing/config/global/index.md b/versioned_docs/version-v6/developing/config/global/index.md
index c2358647c26..b58bc0610a4 100644
--- a/versioned_docs/version-v6/developing/config/global/index.md
+++ b/versioned_docs/version-v6/developing/config/global/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="global-config"
+  groupId="framework"
   defaultValue="javascript"
   values={[
     { value: 'javascript', label: 'JavaScript' },
diff --git a/versioned_docs/version-v6/developing/config/per-component/index.md b/versioned_docs/version-v6/developing/config/per-component/index.md
index 0e4aadeee60..4b6a5427bc3 100644
--- a/versioned_docs/version-v6/developing/config/per-component/index.md
+++ b/versioned_docs/version-v6/developing/config/per-component/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-component-config"
+  groupId="framework"
   defaultValue="javascript"
   values={[
     { value: 'javascript', label: 'JavaScript' },
diff --git a/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
index 6390a6120d1..c7d12df30ba 100644
--- a/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
+++ b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-platform-fallback-config"
+  groupId="framework"
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
diff --git a/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
index a5b8cdc490a..e8f723408b2 100644
--- a/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
+++ b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-platform-fallback-config"
+  groupId="framework"
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
diff --git a/versioned_docs/version-v6/developing/config/per-platform/index.md b/versioned_docs/version-v6/developing/config/per-platform/index.md
index d21553ad1cf..3deba7540b0 100644
--- a/versioned_docs/version-v6/developing/config/per-platform/index.md
+++ b/versioned_docs/version-v6/developing/config/per-platform/index.md
@@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  groupId="per-platform-config"
+  groupId="framework"
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
diff --git a/versioned_docs/version-v6/native-setup.md b/versioned_docs/version-v6/native-setup.md
index 30a8ac5c0fc..9f673d37788 100644
--- a/versioned_docs/version-v6/native-setup.md
+++ b/versioned_docs/version-v6/native-setup.md
@@ -41,7 +41,7 @@ Using the [Camera plugin](native/camera.md) as an example, first install it:
 
 ````mdx-code-block
 <Tabs
-  groupId="runtime"
+  groupId="framework"
   defaultValue="javascript"
   values={[
     { value: 'javascript', label: 'JavaScript' },

From c75a55a2d6835ecacd78f6fa30d8378810681126 Mon Sep 17 00:00:00 2001
From: fc92 <38385756+fc92@users.noreply.github.com>
Date: Mon, 14 Aug 2023 21:45:01 +0200
Subject: [PATCH 460/469] fix(vue): fix bug with key type

---
 docs/vue/your-first-app/2-taking-photos.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
index 9e50677a499..ae8c706f550 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.md
@@ -140,7 +140,7 @@ With the photo(s) stored into the main array we can now display the images on th
 <ion-content>
   <ion-grid>
     <ion-row>
-      <ion-col size="6" :key="photo" v-for="photo in photos">
+      <ion-col size="6" :key="photo.filepath" v-for="photo in photos">
         <ion-img :src="photo.webviewPath"></ion-img>
       </ion-col>
     </ion-row>

From 760204f9876ec03b7aff07d3a2949e65dc556b10 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Mon, 14 Aug 2023 16:49:03 -0400
Subject: [PATCH 461/469] fix(): alphabetize sidebar (#3081)

---
 sidebars.js                                 | 16 +++++------
 versioned_sidebars/version-v5-sidebars.json | 22 +++++++-------
 versioned_sidebars/version-v6-sidebars.json | 32 ++++++++++-----------
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/sidebars.js b/sidebars.js
index c08a43ada8f..ce724994084 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -238,15 +238,15 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Action Sheet',
+      label: 'Accordion',
       collapsed: false,
-      items: ['api/action-sheet'],
+      items: ['api/accordion', 'api/accordion-group'],
     },
     {
       type: 'category',
-      label: 'Accordion',
+      label: 'Action Sheet',
       collapsed: false,
-      items: ['api/accordion', 'api/accordion-group'],
+      items: ['api/action-sheet'],
     },
     {
       type: 'category',
@@ -316,15 +316,15 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Infinite Scroll',
+      label: 'Icons',
       collapsed: false,
-      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
+      items: ['api/icon'],
     },
     {
       type: 'category',
-      label: 'Icons',
+      label: 'Infinite Scroll',
       collapsed: false,
-      items: ['api/icon'],
+      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
     },
     {
       type: 'category',
diff --git a/versioned_sidebars/version-v5-sidebars.json b/versioned_sidebars/version-v5-sidebars.json
index 3d581ed3003..4d52fd68440 100644
--- a/versioned_sidebars/version-v5-sidebars.json
+++ b/versioned_sidebars/version-v5-sidebars.json
@@ -706,27 +706,27 @@
     {
       "collapsed": false,
       "type": "category",
-      "label": "Infinite Scroll",
+      "label": "Icons",
       "items": [
         {
-          "type": "doc",
-          "id": "version-v5/api/infinite-scroll"
-        },
-        {
-          "type": "doc",
-          "id": "version-v5/api/infinite-scroll-content"
+          "type": "link",
+          "label": "ion-icon",
+          "href": "https://ionicons.com"
         }
       ]
     },
     {
       "collapsed": false,
       "type": "category",
-      "label": "Icons",
+      "label": "Infinite Scroll",
       "items": [
         {
-          "type": "link",
-          "label": "ion-icon",
-          "href": "https://ionicons.com"
+          "type": "doc",
+          "id": "version-v5/api/infinite-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v5/api/infinite-scroll-content"
         }
       ]
     },
diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json
index 6ab704f7beb..382f875e089 100644
--- a/versioned_sidebars/version-v6-sidebars.json
+++ b/versioned_sidebars/version-v6-sidebars.json
@@ -606,28 +606,28 @@
     },
     {
       "type": "category",
-      "label": "Action Sheet",
+      "label": "Accordion",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/action-sheet"
+          "id": "version-v6/api/accordion"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/accordion-group"
         }
       ],
       "collapsible": true
     },
     {
       "type": "category",
-      "label": "Accordion",
+      "label": "Action Sheet",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/accordion"
-        },
-        {
-          "type": "doc",
-          "id": "version-v6/api/accordion-group"
+          "id": "version-v6/api/action-sheet"
         }
       ],
       "collapsible": true
@@ -818,28 +818,28 @@
     },
     {
       "type": "category",
-      "label": "Infinite Scroll",
+      "label": "Icons",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/infinite-scroll"
-        },
-        {
-          "type": "doc",
-          "id": "version-v6/api/infinite-scroll-content"
+          "id": "version-v6/api/icon"
         }
       ],
       "collapsible": true
     },
     {
       "type": "category",
-      "label": "Icons",
+      "label": "Infinite Scroll",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/icon"
+          "id": "version-v6/api/infinite-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/infinite-scroll-content"
         }
       ],
       "collapsible": true

From b4e56e2271d0b899367840b1e95b520b8c150430 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Tue, 15 Aug 2023 10:38:50 -0400
Subject: [PATCH 462/469] Revert "fix(): alphabetize sidebar (#3081)" (#3087)

This reverts commit 760204f9876ec03b7aff07d3a2949e65dc556b10.
---
 sidebars.js                                 | 16 +++++------
 versioned_sidebars/version-v5-sidebars.json | 22 +++++++-------
 versioned_sidebars/version-v6-sidebars.json | 32 ++++++++++-----------
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/sidebars.js b/sidebars.js
index ce724994084..c08a43ada8f 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -238,15 +238,15 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Accordion',
+      label: 'Action Sheet',
       collapsed: false,
-      items: ['api/accordion', 'api/accordion-group'],
+      items: ['api/action-sheet'],
     },
     {
       type: 'category',
-      label: 'Action Sheet',
+      label: 'Accordion',
       collapsed: false,
-      items: ['api/action-sheet'],
+      items: ['api/accordion', 'api/accordion-group'],
     },
     {
       type: 'category',
@@ -316,15 +316,15 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Icons',
+      label: 'Infinite Scroll',
       collapsed: false,
-      items: ['api/icon'],
+      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
     },
     {
       type: 'category',
-      label: 'Infinite Scroll',
+      label: 'Icons',
       collapsed: false,
-      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
+      items: ['api/icon'],
     },
     {
       type: 'category',
diff --git a/versioned_sidebars/version-v5-sidebars.json b/versioned_sidebars/version-v5-sidebars.json
index 4d52fd68440..3d581ed3003 100644
--- a/versioned_sidebars/version-v5-sidebars.json
+++ b/versioned_sidebars/version-v5-sidebars.json
@@ -706,27 +706,27 @@
     {
       "collapsed": false,
       "type": "category",
-      "label": "Icons",
+      "label": "Infinite Scroll",
       "items": [
         {
-          "type": "link",
-          "label": "ion-icon",
-          "href": "https://ionicons.com"
+          "type": "doc",
+          "id": "version-v5/api/infinite-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v5/api/infinite-scroll-content"
         }
       ]
     },
     {
       "collapsed": false,
       "type": "category",
-      "label": "Infinite Scroll",
+      "label": "Icons",
       "items": [
         {
-          "type": "doc",
-          "id": "version-v5/api/infinite-scroll"
-        },
-        {
-          "type": "doc",
-          "id": "version-v5/api/infinite-scroll-content"
+          "type": "link",
+          "label": "ion-icon",
+          "href": "https://ionicons.com"
         }
       ]
     },
diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json
index 382f875e089..6ab704f7beb 100644
--- a/versioned_sidebars/version-v6-sidebars.json
+++ b/versioned_sidebars/version-v6-sidebars.json
@@ -606,28 +606,28 @@
     },
     {
       "type": "category",
-      "label": "Accordion",
+      "label": "Action Sheet",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/accordion"
-        },
-        {
-          "type": "doc",
-          "id": "version-v6/api/accordion-group"
+          "id": "version-v6/api/action-sheet"
         }
       ],
       "collapsible": true
     },
     {
       "type": "category",
-      "label": "Action Sheet",
+      "label": "Accordion",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/action-sheet"
+          "id": "version-v6/api/accordion"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/accordion-group"
         }
       ],
       "collapsible": true
@@ -818,28 +818,28 @@
     },
     {
       "type": "category",
-      "label": "Icons",
+      "label": "Infinite Scroll",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/icon"
+          "id": "version-v6/api/infinite-scroll"
+        },
+        {
+          "type": "doc",
+          "id": "version-v6/api/infinite-scroll-content"
         }
       ],
       "collapsible": true
     },
     {
       "type": "category",
-      "label": "Infinite Scroll",
+      "label": "Icons",
       "collapsed": false,
       "items": [
         {
           "type": "doc",
-          "id": "version-v6/api/infinite-scroll"
-        },
-        {
-          "type": "doc",
-          "id": "version-v6/api/infinite-scroll-content"
+          "id": "version-v6/api/icon"
         }
       ],
       "collapsible": true

From 32bb2d0a90d930fa435be03c97bfd1879f022cb6 Mon Sep 17 00:00:00 2001
From: Damian Tarnawsky <84595830+dtarnawsky@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:34:20 -0700
Subject: [PATCH 463/469] docs(picker): describe how to set the initial value
 of a picker column (#3091)

---
 docs/api/picker.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/api/picker.md b/docs/api/picker.md
index b2efb4c7bf2..f49e4e9f55f 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -72,6 +72,9 @@ interface PickerButton {
 interface PickerColumn {
   name: string;
   align?: string;
+  /**
+   * Changing this value allows the initial value of a picker column to be set.
+   */
   selectedIndex?: number;
   prevSelected?: number;
   prefix?: string;

From dedf7688c828c18b737ffb67db236853ed6977b9 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Tue, 22 Aug 2023 11:48:43 -0400
Subject: [PATCH 464/469] chore: standardize title tag format (#3092)

---
 docs/api/accordion.md       | 2 +-
 docs/api/action-sheet.md    | 2 +-
 docs/api/alert.md           | 2 +-
 docs/api/back-button.md     | 2 +-
 docs/api/badge.md           | 2 +-
 docs/api/button.md          | 2 +-
 docs/api/card-title.md      | 2 +-
 docs/api/checkbox.md        | 2 +-
 docs/api/chip.md            | 2 +-
 docs/api/col.md             | 2 +-
 docs/api/content.md         | 2 +-
 docs/api/datetime-button.md | 2 +-
 docs/api/fab-button.md      | 2 +-
 docs/api/fab.md             | 2 +-
 docs/api/footer.md          | 2 +-
 docs/api/grid.md            | 2 +-
 docs/api/img.md             | 2 +-
 docs/api/infinite-scroll.md | 2 +-
 docs/api/input.md           | 2 +-
 docs/api/item-divider.md    | 2 +-
 docs/api/item-option.md     | 2 +-
 docs/api/item-sliding.md    | 2 +-
 docs/api/label.md           | 2 +-
 docs/api/loading.md         | 2 +-
 docs/api/menu-button.md     | 2 +-
 docs/api/menu-toggle.md     | 2 +-
 docs/api/nav-link.md        | 2 +-
 docs/api/nav.md             | 2 +-
 docs/api/picker.md          | 2 +-
 docs/api/popover.md         | 2 +-
 docs/api/progress-bar.md    | 2 +-
 docs/api/radio-group.md     | 2 +-
 docs/api/radio.md           | 2 +-
 docs/api/range.md           | 2 +-
 docs/api/reorder-group.md   | 2 +-
 docs/api/reorder.md         | 2 +-
 docs/api/ripple-effect.md   | 2 +-
 docs/api/route-redirect.md  | 2 +-
 docs/api/router-link.md     | 2 +-
 docs/api/row.md             | 2 +-
 docs/api/searchbar.md       | 2 +-
 docs/api/select-option.md   | 2 +-
 docs/api/skeleton-text.md   | 2 +-
 docs/api/spinner.md         | 2 +-
 docs/api/split-pane.md      | 2 +-
 docs/api/tab-bar.md         | 2 +-
 docs/api/tab.md             | 2 +-
 docs/api/tabs.md            | 2 +-
 docs/api/thumbnail.md       | 2 +-
 docs/api/toast.md           | 2 +-
 docs/api/toggle.md          | 2 +-
 docs/api/toolbar.md         | 2 +-
 52 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index f64573d9c64..0859e3d9ba4 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props
 import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
 
 <head>
-  <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
+  <title>ion-accordion: Accordion Components: How to Build & Examples</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>
 
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 8d6844e3d3e..6e70e6de7f3 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -12,7 +12,7 @@ import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-pr
 import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
 
 <head>
-  <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
+  <title>ion-action-sheet: Action Sheet Dialog for iOS and Android</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>
 
diff --git a/docs/api/alert.md b/docs/api/alert.md
index e645cf2f397..6563d2241ac 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -12,7 +12,7 @@ import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md'
 import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
 
 <head>
-  <title>ion-alert: Ionic API Alert Buttons with Custom Message Prompts</title>
+  <title>ion-alert: Ionic 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>
 
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index db237d17305..4b249e0f913 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-pro
 import Slots from '@ionic-internal/component-api/v7/back-button/slots.md';
 
 <head>
-  <title>Back Button | ion-back-button: Custom Menu Icon for Applications</title>
+  <title>ion-back-button: Custom Menu Back Button 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>
 
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 529c97ada86..5ebd44f1fda 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md'
 import Slots from '@ionic-internal/component-api/v7/badge/slots.md';
 
 <head>
-  <title>Badges | ion-badge: iOS & Android App Notification Badge Icons</title>
+  <title>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>
 
diff --git a/docs/api/button.md b/docs/api/button.md
index c103d4c21d2..e84a7410d7d 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md
 import Slots from '@ionic-internal/component-api/v7/button/slots.md';
 
 <head>
-  <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
+  <title>ion-button: 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>
 
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 9263fe91136..657552f95bf 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -11,7 +11,7 @@ import Slots from '@ionic-internal/component-api/v7/card-title/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <head>
-  <title>ion-card-title | Ionic App Card Title Component and Properties</title>
+  <title>ion-card-title: Ionic App Card Title Component</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>
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 0f62607010d..fdfbe1c8a48 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.
 import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md';
 
 <head>
-  <title>ion-checkboxes: Ionic App Component to Select Multiple Options</title>
+  <title>ion-checkbox: Ionic App Checkbox 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>
 
diff --git a/docs/api/chip.md b/docs/api/chip.md
index e05495b6493..e99f976e051 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/chip/slots.md';
 
 <head>
-  <title>ion-chip:  Name, Text, Icon and Avatar for Ionic Framework Apps</title>
+  <title>ion-chip: 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>
 
diff --git a/docs/api/col.md b/docs/api/col.md
index 2f6ac3e552f..0b72b2e9c69 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/col/slots.md';
 
 <head>
-  <title>ion-col: Column Component Padding, Size and Other Properties</title>
+  <title>ion-col: Column Component Padding 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>
 
diff --git a/docs/api/content.md b/docs/api/content.md
index a257b0e51ee..f4380b209bd 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/content/slots.md';
 
 <head>
-  <title>ion-content: Scrollable CSS Component for Ionic App Content Areas</title>
+  <title>ion-content: Scrollable Component for Ionic App Content</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>
 
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index 554e74d2b01..62d4a91c7e0 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom
 import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md';
 
 <head>
-  <title>ion-datetime-button: Ionic API Input for interacting with Datetime picker</title>
+  <title>ion-datetime-button: Ionic Input for 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>
 
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index d864c6c3f38..2901c8dc093 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-prop
 import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md';
 
 <head>
-  <title>Floating Action Button | Ionic FAB Button Icon for Primary Action</title>
+  <title>ion-fab-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>
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 06201e3bde6..8c20a763770 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/fab/slots.md';
 
 <head>
-  <title>ion-fab: Floating Action Button for Android and iOS Ionic Apps</title>
+  <title>ion-fab: Ionic Floating Action Button for Android and iOS</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>
 
diff --git a/docs/api/footer.md b/docs/api/footer.md
index 5127287d601..315ff16f4f7 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.md
 import Slots from '@ionic-internal/component-api/v7/footer/slots.md';
 
 <head>
-  <title>Page Footer | Ionic App Footer: Wrapper Root Page Component</title>
+  <title>ion-footer: Page Footer | Ionic App Footer Root 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>
 
diff --git a/docs/api/grid.md b/docs/api/grid.md
index e80e3642bb7..8d179241b9d 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/grid/slots.md';
 
 <head>
-  <title>Ion-Grid: Display Grids to Build Mobile-First Custom App Layout</title>
+  <title>ion-grid: Display Grids for 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>
 
diff --git a/docs/api/img.md b/docs/api/img.md
index 441c9f4f27c..d444d07434b 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/img/slots.md';
 
 <head>
-  <title>Img Tag to Lazy Load Images in Viewport | ion-img Tag</title>
+  <title>ion-img: Img Tag to Lazy Load Images in Viewport</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>
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index 12f68542b8a..1f4ab01710a 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom
 import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md';
 
 <head>
-  <title>Infinite Scroller | ion-infinite-scroll Action Component</title>
+  <title>ion-infinite-scroll: Infinite Scroller 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>
 
diff --git a/docs/api/input.md b/docs/api/input.md
index 1473095c26a..e8dcc311e26 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.md'
 import Slots from '@ionic-internal/component-api/v7/input/slots.md';
 
 <head>
-  <title>ion-input: Custom Input Value Type Styling and CSS Properties</title>
+  <title>ion-input: Custom Input With 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>
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 79554071252..8a5db6c541c 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-pr
 import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md';
 
 <head>
-  <title>Item Divider | List Item Divider Block Element for Ionic Apps</title>
+  <title>ion-item-divider: 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>
 
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index 413e993de64..adbc51a8493 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-pro
 import Slots from '@ionic-internal/component-api/v7/item-option/slots.md';
 
 <head>
-  <title>ion-item-options: Option Button Components for Ionic Apps</title>
+  <title>ion-item-option: Option Button for Sliding Item in Ionic</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>
 
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index ea3a9e04be7..c2e69e82cd9 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-pr
 import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md';
 
 <head>
-  <title>Slide Buttons | Slide Right to Left with ion-item-sliding</title>
+  <title>ion-item-sliding: Slide Buttons | Slide Right to Left</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>
 
diff --git a/docs/api/label.md b/docs/api/label.md
index e7ed495d15c..4d5aab0a928 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.md'
 import Slots from '@ionic-internal/component-api/v7/label/slots.md';
 
 <head>
-  <title>Item Label Color and Properties for Applications | ion-label</title>
+  <title>ion-label: Item Label Color and Properties for Applications</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>
 
diff --git a/docs/api/loading.md b/docs/api/loading.md
index 2a9309c4ba7..074a79408db 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/loading/slots.md';
 
 <head>
-  <title>Loading | Application Loading Indicator Overlay | ion-loading</title>
+  <title>ion-loading: Loading | Application Loading Indicator Overlay</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>
 
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index 7d2be77fef0..c9deedb43a6 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-pro
 import Slots from '@ionic-internal/component-api/v7/menu-button/slots.md';
 
 <head>
-  <title>Menu Button | ion-menu-button to Open an App Menu on A Page</title>
+  <title>ion-menu-button: 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>
 
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 3f6cef6f6fd..1ffce3af0bf 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-pro
 import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md';
 
 <head>
-  <title>ion-menu-toggle | MenuToggle Component to Open/Close Active Menus</title>
+  <title>ion-menu-toggle: MenuToggle Component to Open/Close 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>
 
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 9e333a98ede..edf6600af92 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.
 import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md';
 
 <head>
-  <title>ion-nav-link: The Element for Navigation to a Specified Component</title>
+  <title>ion-nav-link: Navigation Links 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>
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 58123c14c3f..19caba09c54 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/nav/slots.md';
 
 <head>
-  <title>ion-nav | Nav View Component for Ionic Framework Apps</title>
+  <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>
 
diff --git a/docs/api/picker.md b/docs/api/picker.md
index f49e4e9f55f..e36a696bf6f 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.md
 import Slots from '@ionic-internal/component-api/v7/picker/slots.md';
 
 <head>
-  <title>Picker | Display Buttons and Columns for ion-picker on Ionic Apps</title>
+  <title>ion-picker: A Dialog That Displays Buttons and Columns</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>
 
diff --git a/docs/api/popover.md b/docs/api/popover.md
index 2878ce602b1..bc56647295b 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/popover/slots.md';
 
 <head>
-  <title>ion-popover: iOS / Android Popover UI Component & CSS Properties</title>
+  <title>ion-popover: iOS / Android Popover UI Dialog Component</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>
 
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 73c3253f3ca..72302b953a5 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-pr
 import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md';
 
 <head>
-  <title>Progress Bar | Horizontal App Progress Bar for Loading Indicator</title>
+  <title>ion-progress-bar: 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>
 
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index 91969c1ed39..0731d897415 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-pro
 import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
 
 <head>
-  <title>ion-radio-group | Radio Button Group Usage for Ionic Apps</title>
+  <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>
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 66890457bef..c9b659ed8aa 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.md'
 import Slots from '@ionic-internal/component-api/v7/radio/slots.md';
 
 <head>
-  <title>ion-radio Component: Radio Property for iOS and Android</title>
+  <title>ion-radio: Radio Component 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>
 
diff --git a/docs/api/range.md b/docs/api/range.md
index 3ff4f6adb35..ac889645992 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.md'
 import Slots from '@ionic-internal/component-api/v7/range/slots.md';
 
 <head>
-  <title>Range Slider | ion-range: Slider Knob Controls with Labels</title>
+  <title>ion-range: 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>
 
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index 07d1ccd5ddc..65db848314f 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-p
 import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
 
 <head>
-  <title>ion-reorder-group: Wrapper Component for Ionic Framework Apps</title>
+  <title>ion-reorder-group: Wrapper Component for Reorder Items</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>
 
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 708b9202eb0..4d7d32f87fc 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
 
 <head>
-  <title>Reorder | ion-reorder: Drag and Drop Icon to Reorder Items</title>
+  <title>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>
 
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 5ab5bf38930..00d299973ba 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -11,7 +11,7 @@ import Slots from '@ionic-internal/component-api/v7/ripple-effect/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <head>
-  <title>ion-ripple-effect | Ripple Effect Button Component for Ionic Apps</title>
+  <title>ion-ripple-effect: Ripple Effect 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>
 
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index 591c39c28a1..687dbe3d4b8 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-
 import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.md';
 
 <head>
-  <title>ion-route-redirect Plugin: Redirect 'from' a URL 'to' Another URL</title>
+  <title>ion-route-redirect: 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>
 
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index e3f92013dd7..d6764f6020e 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-pro
 import Slots from '@ionic-internal/component-api/v7/router-link/slots.md';
 
 <head>
-  <title>Router Link | Navigating The ion-router-link Component</title>
+  <title>ion-router-link: Navigate To a Specified Link</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>
 
diff --git a/docs/api/row.md b/docs/api/row.md
index 3f8759fb490..e0392ac6ba4 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/row/slots.md';
 
 <head>
-  <title>ion-row: Horizontal Row Components and Alignment | Ionic API Docs</title>
+  <title>ion-row: Horizontal Row Components of the Grid System</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>
 
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index fde99f4f664..3b90a32d73c 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props
 import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md';
 
 <head>
-  <title>Search Bar Icon for Keyboard Text Display | Ion-Search Bar</title>
+  <title>ion-searchbar: Search Bar for Searching a Collection</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>
 
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index bb2d2e7e6f9..851d1cb7df3 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-p
 import Slots from '@ionic-internal/component-api/v7/select-option/slots.md';
 
 <head>
-  <title>Select Option | What Is An Option Select on Ionic Framework Apps</title>
+  <title>ion-select-option: Option For a Select Dialog</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>
 
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index 438a5b98ef9..fe915aaee67 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-p
 import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md';
 
 <head>
-  <title>Skeleton Text | Skeleton Loading Placeholder & Framework for Text</title>
+  <title>ion-skeleton-text: Skeleton Loading Placeholder 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>
 
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index a9af39e6dc3..bd20c0beacd 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/spinner/slots.md';
 
 <head>
-  <title>ion-spinner | Animated Spinner Icon Components and Properties</title>
+  <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>
 
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index 00f000e10c4..12ead30904d 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-prop
 import Slots from '@ionic-internal/component-api/v7/split-pane/slots.md';
 
 <head>
-  <title>ion-split-pane: Split Plane View for Menus and Multi-View Layouts</title>
+  <title>ion-split-pane: Split Plane 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>
 
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index 939451673cb..45efd40d033 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -12,7 +12,7 @@ import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md';
 
 <head>
-  <title>ion-tab-bar with CSS Custom Properties for Tab Bar Components</title>
+  <title>ion-tab-bar: Tab Bar Component with CSS Custom Properties</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>
 
diff --git a/docs/api/tab.md b/docs/api/tab.md
index f361abaac68..e2d34f7ffbd 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/tab/slots.md';
 
 <head>
-  <title>ion-tab - Ionic Framework Application Component</title>
+  <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>
 
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 3da90b12e70..f6733317500 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.md';
 import Slots from '@ionic-internal/component-api/v7/tabs/slots.md';
 
 <head>
-  <title>Ion-Tabs: Tab-Based Component for App Top-Level Navigation</title>
+  <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>
 
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index 05d9bc86d5d..2e5a7934e48 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -10,7 +10,7 @@ import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props
 import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md';
 
 <head>
-  <title>ion-thumbnail | Thumbnail App Component to Wrap Images or Icons</title>
+  <title>ion-thumbnail: Thumbnail App Component for 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>
 
diff --git a/docs/api/toast.md b/docs/api/toast.md
index ea4cf7a7126..10ccf46f2d6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -12,7 +12,7 @@ import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.md'
 import Slots from '@ionic-internal/component-api/v7/toast/slots.md';
 
 <head>
-  <title>ion-toast Component: A Dismissible App Notification Alert</title>
+  <title>ion-toast: A Dismissible App Notification Alert Component</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>
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index bf8925e2fb6..336821e90be 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.md
 import Slots from '@ionic-internal/component-api/v7/toggle/slots.md';
 
 <head>
-  <title>Toggle | ion-toggle: Custom Toggle Button for Ionic Applications</title>
+  <title>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>
 
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index c6c9790ce6e..03cb543e0b8 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md';
 
 <head>
-  <title>Toolbar | Customize App Menu Toolbar Buttons and Icons</title>
+  <title>ion-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>
 

From 1ca12d1a587204fca252165e545c7e7d1d179ec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 24 Aug 2023 09:33:33 +0900
Subject: [PATCH 465/469] fix(docs): fix merge mistake

---
 docs/api/content.md            |  5 -----
 docs/api/toast.md              | 26 --------------------------
 docs/troubleshooting/native.md |  2 --
 3 files changed, 33 deletions(-)

diff --git a/docs/api/content.md b/docs/api/content.md
index 2cf11924d8d..16ee4f360a0 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -9,13 +9,8 @@ import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.m
 import Slots from '@ionic-internal/component-api/v7/content/slots.md';
 
 <head>
-<<<<<<< HEAD
   <title>ion-content: Scrollable Component for Ionic App Content</title>
   <meta name="description" content="ion-contentは、スクロール可能な領域を制御する便利なメソッドを備えた、使いやすいコンテンツ領域を提供します。このIonicアプリ用CSSコンポーネントの詳細については、こちらをご覧ください。" />
-=======
-  <title>ion-content: Scrollable Component for Ionic App Content</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." />
->>>>>>> dedf7688c828c18b737ffb67db236853ed6977b9
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
diff --git a/docs/api/toast.md b/docs/api/toast.md
index 2179c8c06c8..7544aa9ae9b 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -233,33 +233,7 @@ interface ToastOptions {
 }
 ```
 
-<<<<<<< HEAD
-## アクセシビリティ
-
-### フォーカスの管理
-
-トーストはさりげなく通知するものであり、ユーザーの邪魔をするものではありません。トーストを消すためにユーザーの操作が必要であってはなりません。そのため、トーストが表示されても、フォーカスが自動的に移動することはありません。
-
-### スクリーンリーダー
-
-`ion-toast` は、内側の `.toast-content` 要素に `role="status"` と `aria-live="polite"` を設定しています。これにより、スクリーンリーダーはトーストのメッセージとヘッダーのみをアナウンスするようになります。ボタンとアイコンはアナウンスされません。
-
-`aria-live`は、トーストの内容が更新されたときに、スクリーン・リーダーがその内容をアナウンスするようにします。しかし、属性が `'polite'` に設定されているため、スクリーン・リーダーは現在のタスクを中断してはいけません。
-
-トーストは微妙な通知であることを意図しているので、`aria-live`は決して`"assertive"`に設定されるべきではありません。もし開発者が重要なメッセージでユーザーを中断させる必要がある場合は、[alert](./alert)を使用することをお勧めします。
-
-### ヒント
-
-これは完全なリストではありませんが、トーストを使用する際に従うべきガイドラインをいくつか紹介します。
-
-* トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss"ボタンがあるのは良いのですが、タイムアウト時間が経過すると自動的にトーストが消えるようにすべきです。通知のためにユーザーの操作が必要な場合は、代わりに[alert](./alert)を使用することを検討してください。
-
-* 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
-
-## プロパティ
-=======
 ## Properties
->>>>>>> dedf7688c828c18b737ffb67db236853ed6977b9
 <Props />
 
 ## イベント
diff --git a/docs/troubleshooting/native.md b/docs/troubleshooting/native.md
index 63f7b3dd3ce..c8ba08b3729 100644
--- a/docs/troubleshooting/native.md
+++ b/docs/troubleshooting/native.md
@@ -18,8 +18,6 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor
 
 iOS デバイスでアプリケーションを実行するには、プロビジョニングプロファイルが必要です。プロビジョニングプロファイルが作成されていない場合は、次の手順に従います:
 
-<<<<<<< HEAD
-
 1. <strong>[Package ID](../reference/glossary.md#package-id) を設定する。</strong>
 
    Capacitor の場合、`capacitor.config.json` ファイルを開き `appId` プロパティを修正します。

From 9cdbac8ce2fcb3517541810f897b5e358abd17d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 24 Aug 2023 09:36:37 +0900
Subject: [PATCH 466/469] translate(core): create translate file

---
 .../.detection/api/accordion-group.json       |  43 +-
 src/translate/.detection/api/accordion.json   |  27 +-
 .../.detection/api/action-sheet.json          | 230 +++++-
 src/translate/.detection/api/alert.json       | 252 ++++++-
 src/translate/.detection/api/app.json         |   2 +-
 src/translate/.detection/api/avatar.json      |   2 +-
 src/translate/.detection/api/back-button.json |  49 +-
 src/translate/.detection/api/backdrop.json    |  22 +-
 src/translate/.detection/api/badge.json       |  13 +-
 src/translate/.detection/api/breadcrumb.json  |  80 +-
 src/translate/.detection/api/breadcrumbs.json |  39 +-
 src/translate/.detection/api/button.json      | 115 ++-
 src/translate/.detection/api/buttons.json     |   7 +-
 .../.detection/api/card-content.json          |   2 +-
 src/translate/.detection/api/card-header.json |  18 +-
 .../.detection/api/card-subtitle.json         |  13 +-
 src/translate/.detection/api/card-title.json  |  13 +-
 src/translate/.detection/api/card.json        |  70 +-
 src/translate/.detection/api/checkbox.json    |  74 +-
 src/translate/.detection/api/chip.json        |  23 +-
 src/translate/.detection/api/col.json         | 122 ++-
 src/translate/.detection/api/content.json     | 206 +++++-
 .../.detection/api/datetime-button.json       |  23 +-
 src/translate/.detection/api/datetime.json    | 250 ++++++-
 src/translate/.detection/api/fab-button.json  | 100 ++-
 src/translate/.detection/api/fab-list.json    |  12 +-
 src/translate/.detection/api/fab.json         |  33 +-
 src/translate/.detection/api/footer.json      |  12 +-
 src/translate/.detection/api/grid.json        |   7 +-
 src/translate/.detection/api/header.json      |  12 +-
 src/translate/.detection/api/img.json         |  27 +-
 .../api/infinite-scroll-content.json          |  24 +-
 .../.detection/api/infinite-scroll.json       |  33 +-
 src/translate/.detection/api/input.json       | 270 ++++++-
 .../.detection/api/item-divider.json          |  18 +-
 src/translate/.detection/api/item-group.json  |   2 +-
 src/translate/.detection/api/item-option.json |  48 +-
 .../.detection/api/item-options.json          |  18 +-
 .../.detection/api/item-sliding.json          |  82 +-
 src/translate/.detection/api/item.json        | 119 ++-
 src/translate/.detection/api/label.json       |  18 +-
 src/translate/.detection/api/list-header.json |  18 +-
 src/translate/.detection/api/list.json        |  23 +-
 src/translate/.detection/api/loading.json     | 241 +++++-
 src/translate/.detection/api/menu-button.json |  33 +-
 src/translate/.detection/api/menu-toggle.json |  12 +-
 src/translate/.detection/api/menu.json        | 153 +++-
 src/translate/.detection/api/modal.json       | 306 +++++++-
 src/translate/.detection/api/nav-link.json    |  46 +-
 src/translate/.detection/api/nav.json         | 698 +++++++++++++++++-
 src/translate/.detection/api/note.json        |  13 +-
 src/translate/.detection/api/picker.json      | 262 ++++++-
 src/translate/.detection/api/popover.json     | 346 ++++++++-
 .../.detection/api/progress-bar.json          |  33 +-
 src/translate/.detection/api/radio-group.json |  28 +-
 src/translate/.detection/api/radio.json       |  53 +-
 src/translate/.detection/api/range.json       | 159 +++-
 .../.detection/api/refresher-content.json     |  46 +-
 src/translate/.detection/api/refresher.json   |  86 ++-
 .../.detection/api/reorder-group.json         |  39 +-
 src/translate/.detection/api/reorder.json     |   2 +-
 .../.detection/api/ripple-effect.json         |  37 +-
 .../.detection/api/route-redirect.json        |  17 +-
 src/translate/.detection/api/route.json       |  44 +-
 src/translate/.detection/api/router-link.json |  50 +-
 .../.detection/api/router-outlet.json         |  23 +-
 src/translate/.detection/api/router.json      |  89 ++-
 src/translate/.detection/api/row.json         |   2 +-
 src/translate/.detection/api/searchbar.json   | 177 ++++-
 .../.detection/api/segment-button.json        |  34 +-
 src/translate/.detection/api/segment.json     |  55 +-
 .../.detection/api/select-option.json         |  12 +-
 src/translate/.detection/api/select.json      | 184 ++++-
 .../.detection/api/skeleton-text.json         |   7 +-
 src/translate/.detection/api/spinner.json     |  34 +-
 src/translate/.detection/api/split-pane.json  |  22 +-
 src/translate/.detection/api/tab-bar.json     |  23 +-
 src/translate/.detection/api/tab-button.json  |  48 +-
 src/translate/.detection/api/tab.json         |  29 +-
 src/translate/.detection/api/tabs.json        |  73 +-
 src/translate/.detection/api/text.json        |  13 +-
 src/translate/.detection/api/textarea.json    | 221 +++++-
 src/translate/.detection/api/thumbnail.json   |   2 +-
 src/translate/.detection/api/title.json       |  18 +-
 src/translate/.detection/api/toast.json       | 290 +++++++-
 src/translate/.detection/api/toggle.json      |  74 +-
 src/translate/.detection/api/toolbar.json     |  13 +-
 src/translate/.detection/cli/build.readme.md  |   2 +-
 .../.detection/cli/capacitor-add.readme.md    |   3 +-
 .../.detection/cli/capacitor-build.readme.md  |   3 +-
 .../.detection/cli/capacitor-copy.readme.md   |   3 +-
 .../.detection/cli/capacitor-open.readme.md   |   3 +-
 .../.detection/cli/capacitor-run.readme.md    |   3 +-
 .../.detection/cli/capacitor-sync.readme.md   |   3 +-
 .../.detection/cli/capacitor-update.readme.md |   3 +-
 .../.detection/cli/completion.readme.md       |   2 +-
 .../.detection/cli/config-get.readme.md       |   2 +-
 .../.detection/cli/config-set.readme.md       |   2 +-
 .../.detection/cli/config-unset.readme.md     |   2 +-
 .../.detection/cli/cordova-build.readme.md    |   2 +-
 .../.detection/cli/cordova-compile.readme.md  |   2 +-
 .../.detection/cli/cordova-emulate.readme.md  |   2 +-
 .../.detection/cli/cordova-platform.readme.md |   2 +-
 .../.detection/cli/cordova-plugin.readme.md   |   2 +-
 .../.detection/cli/cordova-prepare.readme.md  |   2 +-
 .../cli/cordova-requirements.readme.md        |   2 +-
 .../cli/cordova-resources.readme.md           |   3 +-
 .../.detection/cli/cordova-run.readme.md      |   2 +-
 .../.detection/cli/generate.readme.md         |   6 +-
 .../.detection/cli/git-remote.readme.md       |   2 +-
 src/translate/.detection/cli/info.readme.md   |   2 +-
 src/translate/.detection/cli/init.readme.md   |   2 +-
 .../cli/integrations-disable.readme.md        |   2 +-
 .../cli/integrations-enable.readme.md         |   2 +-
 .../cli/integrations-list.readme.md           |   2 +-
 src/translate/.detection/cli/link.readme.md   |   2 +-
 .../.detection/cli/live-update-add.readme.md  |   2 +-
 .../cli/live-update-configure.readme.md       |   2 +-
 src/translate/.detection/cli/login.readme.md  |   2 +-
 src/translate/.detection/cli/logout.readme.md |   2 +-
 src/translate/.detection/cli/repair.readme.md |   2 +-
 src/translate/.detection/cli/serve.readme.md  |   2 +-
 src/translate/.detection/cli/signup.readme.md |   2 +-
 .../.detection/cli/ssh-setup.readme.md        |   2 +-
 .../.detection/cli/ssh-use.readme.md          |   2 +-
 .../.detection/cli/ssl-generate.readme.md     |   2 +-
 src/translate/.detection/cli/start.readme.md  |   2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |   1 +
 ...awesome-cordova-plugins-actsheet.readme.md |   1 +
 .../@awesome-cordova-plugins-adjust.readme.md |   1 +
 ...esome-cordova-plugins-admob-free.readme.md |   1 +
 ...esome-cordova-plugins-admob-plus.readme.md |   1 +
 .../@awesome-cordova-plugins-admob.readme.md  |   2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |   1 +
 .../@awesome-cordova-plugins-alipay.readme.md |   1 +
 ...e-cordova-plugins-all-in-one-sdk.readme.md |   1 +
 ...rdova-plugins-analytics-firebase.readme.md |   1 +
 ...ordova-plugins-android-exoplayer.readme.md |   1 +
 ...dova-plugins-android-full-screen.readme.md |   3 +-
 ...me-cordova-plugins-android-notch.readme.md |   1 +
 ...dova-plugins-android-permissions.readme.md |   1 +
 ...@awesome-cordova-plugins-anyline.readme.md |   1 +
 ...cordova-plugins-app-availability.readme.md |   1 +
 ...ova-plugins-app-center-analytics.readme.md |   1 +
 ...rdova-plugins-app-center-crashes.readme.md |   1 +
 ...va-plugins-app-center-low-memory.readme.md |   1 +
 ...-cordova-plugins-app-center-push.readme.md |   2 +
 ...ome-cordova-plugins-app-launcher.readme.md |   1 +
 ...ome-cordova-plugins-app-minimize.readme.md |   1 +
 ...-cordova-plugins-app-preferences.readme.md |   1 +
 ...awesome-cordova-plugins-app-rate.readme.md |   1 +
 ...some-cordova-plugins-app-version.readme.md |   1 +
 ...wesome-cordova-plugins-apple-pay.readme.md |   1 +
 ...ome-cordova-plugins-apple-wallet.readme.md |   1 +
 ...awesome-cordova-plugins-appodeal.readme.md |   1 +
 ...wesome-cordova-plugins-appsflyer.readme.md |   1 +
 ...cordova-plugins-audio-management.readme.md |   1 +
 ...wesome-cordova-plugins-autostart.readme.md |   1 +
 ...cordova-plugins-background-fetch.readme.md |   1 +
 ...a-plugins-background-geolocation.readme.md |   1 +
 ...-cordova-plugins-background-mode.readme.md |   3 +-
 ...ordova-plugins-background-upload.readme.md |   1 +
 ...wesome-cordova-plugins-backlight.readme.md |   1 +
 .../@awesome-cordova-plugins-badge.readme.md  |   1 +
 ...esome-cordova-plugins-baidu-push.readme.md |   1 +
 ...-cordova-plugins-barcode-scanner.readme.md |   1 +
 ...ordova-plugins-base64-to-gallery.readme.md |   2 +-
 .../@awesome-cordova-plugins-base64.readme.md |   1 +
 ...e-cordova-plugins-battery-status.readme.md |   1 +
 ...awesome-cordova-plugins-biocatch.readme.md |   1 +
 ...ordova-plugins-biometric-wrapper.readme.md |   1 +
 .../@awesome-cordova-plugins-ble.readme.md    |   1 +
 ...@awesome-cordova-plugins-blinkid.readme.md |   1 +
 ...@awesome-cordova-plugins-blinkup.readme.md |   1 +
 ...ns-bluetooth-classic-serial-port.readme.md |   2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |   1 +
 ...cordova-plugins-bluetooth-serial.readme.md |   2 +-
 ...wesome-cordova-plugins-braintree.readme.md |   5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |   1 +
 ...esome-cordova-plugins-brightness.readme.md |   1 +
 ...some-cordova-plugins-broadcaster.readme.md |   1 +
 ...some-cordova-plugins-browser-tab.readme.md |   1 +
 ...esome-cordova-plugins-build-info.readme.md |   1 +
 ...awesome-cordova-plugins-calendar.readme.md |   2 +
 ...e-cordova-plugins-call-directory.readme.md |   1 +
 ...awesome-cordova-plugins-call-log.readme.md |   1 +
 ...some-cordova-plugins-call-number.readme.md |   1 +
 ...e-cordova-plugins-camera-preview.readme.md |   1 +
 .../@awesome-cordova-plugins-camera.readme.md |   3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |   2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |   1 +
 ...wesome-cordova-plugins-clevertap.readme.md |   1 +
 ...wesome-cordova-plugins-clipboard.readme.md |   2 +
 ...e-cordova-plugins-cloud-settings.readme.md |   1 +
 ...wesome-cordova-plugins-clover-go.readme.md |   1 +
 ...wesome-cordova-plugins-code-push.readme.md |   1 +
 ...ova-plugins-colored-browser-tabs.readme.md |   1 +
 ...awesome-cordova-plugins-contacts.readme.md |   1 +
 ...e-cordova-plugins-couchbase-lite.readme.md |   1 +
 .../@awesome-cordova-plugins-crop.readme.md   |   2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |   1 +
 ...some-cordova-plugins-date-picker.readme.md |   1 +
 ...awesome-cordova-plugins-db-meter.readme.md |   2 +-
 ...-cordova-plugins-device-accounts.readme.md |   1 +
 ...-cordova-plugins-device-feedback.readme.md |   2 +
 ...me-cordova-plugins-device-motion.readme.md |   1 +
 ...rdova-plugins-device-orientation.readme.md |   1 +
 .../@awesome-cordova-plugins-device.readme.md |   1 +
 ...esome-cordova-plugins-dfu-update.readme.md |   1 +
 ...esome-cordova-plugins-diagnostic.readme.md |   1 +
 ...@awesome-cordova-plugins-dialogs.readme.md |   1 +
 ...-cordova-plugins-document-picker.readme.md |   2 +
 ...cordova-plugins-document-scanner.readme.md |   1 +
 ...-cordova-plugins-document-viewer.readme.md |   3 +-
 ...esome-cordova-plugins-downloader.readme.md |   2 +
 ...e-cordova-plugins-email-composer.readme.md |   3 +
 ...e-cordova-plugins-emm-app-config.readme.md |   2 +
 ...cordova-plugins-estimote-beacons.readme.md |   1 +
 ...gins-extended-device-information.readme.md |  10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |   1 +
 ...awesome-cordova-plugins-facebook.readme.md |   8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |   1 +
 ...ome-cordova-plugins-file-chooser.readme.md |   2 +
 ...-cordova-plugins-file-encryption.readme.md |   1 +
 ...some-cordova-plugins-file-opener.readme.md |   1 +
 ...wesome-cordova-plugins-file-path.readme.md |   2 +
 ...some-cordova-plugins-file-picker.readme.md |   2 +
 ...me-cordova-plugins-file-transfer.readme.md |   1 +
 .../@awesome-cordova-plugins-file.readme.md   |  12 +-
 ...rdova-plugins-firebase-analytics.readme.md |   5 +-
 ...-plugins-firebase-authentication.readme.md |   1 +
 ...-cordova-plugins-firebase-config.readme.md |   1 +
 ...e-cordova-plugins-firebase-crash.readme.md |   1 +
 ...ova-plugins-firebase-crashlytics.readme.md |   1 +
 ...a-plugins-firebase-dynamic-links.readme.md |   4 +-
 ...rdova-plugins-firebase-messaging.readme.md |   1 +
 ...-cordova-plugins-firebase-vision.readme.md |   1 +
 ...esome-cordova-plugins-firebase-x.readme.md |   1 +
 ...awesome-cordova-plugins-firebase.readme.md |   1 +
 ...cordova-plugins-flurry-analytics.readme.md |   1 +
 ...rdova-plugins-foreground-service.readme.md |   5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |   1 +
 ...ordova-plugins-full-screen-image.readme.md |   1 +
 ...-cordova-plugins-gao-de-location.readme.md |   1 +
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |   1 +
 ...awesome-cordova-plugins-geofence.readme.md |   2 +-
 ...some-cordova-plugins-geolocation.readme.md |   5 +-
 ...me-cordova-plugins-globalization.readme.md |   1 +
 ...cordova-plugins-google-analytics.readme.md |   4 +-
 ...me-cordova-plugins-google-nearby.readme.md |   1 +
 ...ugins-google-play-games-services.readme.md |   1 +
 ...wesome-cordova-plugins-gyroscope.readme.md |   2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |   1 +
 ...ome-cordova-plugins-header-color.readme.md |   1 +
 ...esome-cordova-plugins-health-kit.readme.md |   1 +
 .../@awesome-cordova-plugins-health.readme.md |   1 +
 ...@awesome-cordova-plugins-hotspot.readme.md |   1 +
 .../@awesome-cordova-plugins-http.readme.md   |   2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |   3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   1 +
 ...@awesome-cordova-plugins-ibeacon.readme.md |   3 +-
 ...ome-cordova-plugins-image-picker.readme.md |   1 +
 ...me-cordova-plugins-image-resizer.readme.md |   1 +
 .../@awesome-cordova-plugins-imap.readme.md   |   1 +
 ...e-cordova-plugins-in-app-browser.readme.md |   2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |  35 +-
 ...-cordova-plugins-in-app-purchase.readme.md |   1 +
 ...me-cordova-plugins-in-app-review.readme.md |   2 +
 ...ordova-plugins-index-app-content.readme.md |   1 +
 ...awesome-cordova-plugins-insomnia.readme.md |   1 +
 ...e-cordova-plugins-intel-security.readme.md |   2 +-
 ...awesome-cordova-plugins-intercom.readme.md |   1 +
 ...me-cordova-plugins-ionic-webview.readme.md |   1 +
 ...s-ios-aswebauthenticationsessapi.readme.md |   1 +
 ...awesome-cordova-plugins-is-debug.readme.md |   1 +
 ...esome-cordova-plugins-janalytics.readme.md |   1 +
 ...wesome-cordova-plugins-jins-meme.readme.md |   1 +
 .../@awesome-cordova-plugins-jumio.readme.md  |   2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |   1 +
 ...ordova-plugins-keychain-touch-id.readme.md |   1 +
 ...awesome-cordova-plugins-keychain.readme.md |   1 +
 ...some-cordova-plugins-kommunicate.readme.md |   1 +
 ...awesome-cordova-plugins-last-cam.readme.md |   1 +
 ...cordova-plugins-launch-navigator.readme.md |   1 +
 ...me-cordova-plugins-launch-review.readme.md |   3 +-
 ...esome-cordova-plugins-line-login.readme.md |   1 +
 ...ome-cordova-plugins-local-backup.readme.md |   1 +
 ...dova-plugins-local-notifications.readme.md |   1 +
 ...me-cordova-plugins-locataccuracy.readme.md |   1 +
 ...ova-plugins-lottie-splash-screen.readme.md |   1 +
 .../@awesome-cordova-plugins-luxand.readme.md |   1 +
 ...ome-cordova-plugins-magnetometer.readme.md |   1 +
 .../@awesome-cordova-plugins-market.readme.md |   1 +
 ...me-cordova-plugins-media-capture.readme.md |   1 +
 .../@awesome-cordova-plugins-media.readme.md  |   1 +
 .../@awesome-cordova-plugins-metrix.readme.md |   1 +
 ...awesome-cordova-plugins-mixpanel.readme.md |   1 +
 ...-cordova-plugins-mlkit-translate.readme.md |   1 +
 ...ova-plugins-mobile-accessibility.readme.md |   1 +
 ...cordova-plugins-mobile-messaging.readme.md |   1 +
 ...@awesome-cordova-plugins-ms-adal.readme.md |   3 +-
 ...plugins-multiple-document-picker.readme.md |   1 +
 ...e-cordova-plugins-music-controls.readme.md |   1 +
 ...ome-cordova-plugins-native-audio.readme.md |   2 +-
 ...-cordova-plugins-native-geocoder.readme.md |   1 +
 ...-cordova-plugins-native-keyboard.readme.md |   2 +
 ...-plugins-native-page-transitions.readme.md |   1 +
 ...cordova-plugins-native-ringtones.readme.md |   1 +
 ...esome-cordova-plugins-navigatbar.readme.md |   1 +
 ...ordova-plugins-network-interface.readme.md |   1 +
 ...@awesome-cordova-plugins-network.readme.md |   1 +
 .../@awesome-cordova-plugins-nfc.readme.md    |   2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |   3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |   6 +-
 ...ova-plugins-open-native-settings.readme.md |   3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |   1 +
 .../@awesome-cordova-plugins-paypal.readme.md |   1 +
 ...@awesome-cordova-plugins-paytabs.readme.md |   1 +
 ...me-cordova-plugins-pdf-generator.readme.md |   1 +
 ...wesome-cordova-plugins-pedometer.readme.md |   1 +
 ...gins-phonegap-local-notification.readme.md |   1 +
 ...me-cordova-plugins-photo-library.readme.md |   1 +
 ...ome-cordova-plugins-photo-viewer.readme.md |   2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |   1 +
 ...esome-cordova-plugins-pin-dialog.readme.md |   3 +
 ...wesome-cordova-plugins-pinterest.readme.md |   1 +
 ...awesome-cordova-plugins-pollfish.readme.md |   1 +
 ...cordova-plugins-power-management.readme.md |   1 +
 ...rdova-plugins-power-optimization.readme.md |   1 +
 ...@awesome-cordova-plugins-printer.readme.md |   2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |   1 +
 ...wesome-cordova-plugins-purchases.readme.md |   6 +-
 .../@awesome-cordova-plugins-push.readme.md   |   1 +
 ...ome-cordova-plugins-pushape-push.readme.md |   1 +
 .../@awesome-cordova-plugins-qqsdk.readme.md  |   1 +
 ...esome-cordova-plugins-qr-scanner.readme.md |   1 +
 ...a-plugins-regula-document-reader.readme.md |   1 +
 ...@awesome-cordova-plugins-restart.readme.md |   1 +
 ...@awesome-cordova-plugins-rollbar.readme.md |   1 +
 ...a-plugins-safari-view-controller.readme.md |   1 +
 ...rdova-plugins-screen-orientation.readme.md |   1 +
 ...esome-cordova-plugins-screenshot.readme.md |   2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |   1 +
 .../@awesome-cordova-plugins-serial.readme.md |   1 +
 ...ordova-plugins-service-discovery.readme.md |   1 +
 .../@awesome-cordova-plugins-shake.readme.md  |   2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |   1 +
 ...ordova-plugins-shortcuts-android.readme.md |   1 +
 ...rdova-plugins-sign-in-with-apple.readme.md |   3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |   1 +
 ...e-cordova-plugins-siri-shortcuts.readme.md |   1 +
 ...wesome-cordova-plugins-smartlook.readme.md |   1 +
 ...me-cordova-plugins-sms-retriever.readme.md |   1 +
 .../@awesome-cordova-plugins-sms.readme.md    |   2 +
 ...e-cordova-plugins-social-sharing.readme.md |   1 +
 ...rdova-plugins-speech-recognition.readme.md |   1 +
 ...wesome-cordova-plugins-speechkit.readme.md |   1 +
 ...e-cordova-plugins-spinner-dialog.readme.md |   1 +
 ...me-cordova-plugins-splash-screen.readme.md |   2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |   2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |   1 +
 ...me-cordova-plugins-sqlite-porter.readme.md |   1 +
 .../@awesome-cordova-plugins-sqlite.readme.md |   1 +
 ...some-cordova-plugins-ssh-connect.readme.md |   1 +
 ...wesome-cordova-plugins-star-prnt.readme.md |   3 +-
 ...esome-cordova-plugins-status-bar.readme.md |   1 +
 ...some-cordova-plugins-stepcounter.readme.md |   2 +-
 ...-cordova-plugins-streaming-media.readme.md |   1 +
 .../@awesome-cordova-plugins-stripe.readme.md |   1 +
 .../@awesome-cordova-plugins-sum-up.readme.md |   1 +
 ...s-system-alert-window-permission.readme.md |   1 +
 ...me-cordova-plugins-taptic-engine.readme.md |   1 +
 ...ova-plugins-tealium-adidentifier.readme.md |   1 +
 ...-plugins-tealium-installreferrer.readme.md |   1 +
 ...@awesome-cordova-plugins-tealium.readme.md |   3 +-
 ...-plugins-text-to-speech-advanced.readme.md |   1 +
 ...e-cordova-plugins-text-to-speech.readme.md |   1 +
 ...-cordova-plugins-theme-detection.readme.md |   1 +
 ...ordova-plugins-themeable-browser.readme.md |   1 +
 ...-cordova-plugins-three-dee-touch.readme.md |   1 +
 .../@awesome-cordova-plugins-toast.readme.md  |   1 +
 ...awesome-cordova-plugins-touch-id.readme.md |   1 +
 ...-cordova-plugins-twitter-connect.readme.md |   4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |   1 +
 ...cordova-plugins-unique-device-id.readme.md |   1 +
 ...dova-plugins-unvired-cordova-sdk.readme.md |  18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |   1 +
 ...ome-cordova-plugins-urbanairship.readme.md |   1 +
 ...ova-plugins-usabilla-cordova-sdk.readme.md |   1 +
 ...esome-cordova-plugins-user-agent.readme.md |   3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |   1 +
 ...wesome-cordova-plugins-vibration.readme.md |   2 +-
 ...rdova-plugins-video-capture-plus.readme.md |   2 +-
 ...ome-cordova-plugins-video-player.readme.md |   1 +
 ...esome-cordova-plugins-web-intent.readme.md |   3 +-
 ...esome-cordova-plugins-web-server.readme.md |   1 +
 ...ordova-plugins-web-socket-server.readme.md |   1 +
 ...wesome-cordova-plugins-webengage.readme.md |   1 +
 .../@awesome-cordova-plugins-wechat.readme.md |   1 +
 ...me-cordova-plugins-wifi-wizard-2.readme.md |   1 +
 ...esome-cordova-plugins-wonderpush.readme.md |   2 +
 ...ova-plugins-youtube-video-player.readme.md |   1 +
 .../@awesome-cordova-plugins-zbar.readme.md   |   1 +
 ...awesome-cordova-plugins-zeroconf.readme.md |   3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |   1 +
 .../@awesome-cordova-plugins-zoom.readme.md   |   1 +
 src/translate/api/accordion-group.json        |  43 +-
 src/translate/api/accordion.json              |  27 +-
 src/translate/api/action-sheet.json           | 230 +++++-
 src/translate/api/alert.json                  | 252 ++++++-
 src/translate/api/app.json                    |   2 +-
 src/translate/api/avatar.json                 |   2 +-
 src/translate/api/back-button.json            |  49 +-
 src/translate/api/backdrop.json               |  22 +-
 src/translate/api/badge.json                  |  13 +-
 src/translate/api/breadcrumb.json             |  80 +-
 src/translate/api/breadcrumbs.json            |  39 +-
 src/translate/api/button.json                 | 115 ++-
 src/translate/api/buttons.json                |   7 +-
 src/translate/api/card-content.json           |   2 +-
 src/translate/api/card-header.json            |  18 +-
 src/translate/api/card-subtitle.json          |  13 +-
 src/translate/api/card-title.json             |  13 +-
 src/translate/api/card.json                   |  70 +-
 src/translate/api/checkbox.json               |  74 +-
 src/translate/api/chip.json                   |  23 +-
 src/translate/api/col.json                    | 122 ++-
 src/translate/api/content.json                | 206 +++++-
 src/translate/api/datetime-button.json        |  23 +-
 src/translate/api/datetime.json               | 250 ++++++-
 src/translate/api/fab-button.json             | 100 ++-
 src/translate/api/fab-list.json               |  12 +-
 src/translate/api/fab.json                    |  33 +-
 src/translate/api/footer.json                 |  12 +-
 src/translate/api/grid.json                   |   7 +-
 src/translate/api/header.json                 |  12 +-
 src/translate/api/img.json                    |  27 +-
 .../api/infinite-scroll-content.json          |  24 +-
 src/translate/api/infinite-scroll.json        |  33 +-
 src/translate/api/input.json                  | 270 ++++++-
 src/translate/api/item-divider.json           |  18 +-
 src/translate/api/item-group.json             |   2 +-
 src/translate/api/item-option.json            |  48 +-
 src/translate/api/item-options.json           |  18 +-
 src/translate/api/item-sliding.json           |  82 +-
 src/translate/api/item.json                   | 119 ++-
 src/translate/api/label.json                  |  18 +-
 src/translate/api/list-header.json            |  18 +-
 src/translate/api/list.json                   |  23 +-
 src/translate/api/loading.json                | 241 +++++-
 src/translate/api/menu-button.json            |  33 +-
 src/translate/api/menu-toggle.json            |  12 +-
 src/translate/api/menu.json                   | 153 +++-
 src/translate/api/modal.json                  | 306 +++++++-
 src/translate/api/nav-link.json               |  46 +-
 src/translate/api/nav.json                    | 698 +++++++++++++++++-
 src/translate/api/note.json                   |  13 +-
 src/translate/api/picker.json                 | 262 ++++++-
 src/translate/api/popover.json                | 346 ++++++++-
 src/translate/api/progress-bar.json           |  33 +-
 src/translate/api/radio-group.json            |  28 +-
 src/translate/api/radio.json                  |  53 +-
 src/translate/api/range.json                  | 159 +++-
 src/translate/api/refresher-content.json      |  46 +-
 src/translate/api/refresher.json              |  86 ++-
 src/translate/api/reorder-group.json          |  39 +-
 src/translate/api/reorder.json                |   2 +-
 src/translate/api/ripple-effect.json          |  37 +-
 src/translate/api/route-redirect.json         |  17 +-
 src/translate/api/route.json                  |  44 +-
 src/translate/api/router-link.json            |  50 +-
 src/translate/api/router-outlet.json          |  23 +-
 src/translate/api/router.json                 |  89 ++-
 src/translate/api/row.json                    |   2 +-
 src/translate/api/searchbar.json              | 177 ++++-
 src/translate/api/segment-button.json         |  34 +-
 src/translate/api/segment.json                |  55 +-
 src/translate/api/select-option.json          |  12 +-
 src/translate/api/select.json                 | 184 ++++-
 src/translate/api/skeleton-text.json          |   7 +-
 src/translate/api/spinner.json                |  34 +-
 src/translate/api/split-pane.json             |  22 +-
 src/translate/api/tab-bar.json                |  23 +-
 src/translate/api/tab-button.json             |  48 +-
 src/translate/api/tab.json                    |  29 +-
 src/translate/api/tabs.json                   |  73 +-
 src/translate/api/text.json                   |  13 +-
 src/translate/api/textarea.json               | 221 +++++-
 src/translate/api/thumbnail.json              |   2 +-
 src/translate/api/title.json                  |  18 +-
 src/translate/api/toast.json                  | 290 +++++++-
 src/translate/api/toggle.json                 |  74 +-
 src/translate/api/toolbar.json                |  13 +-
 src/translate/cli/build.readme.md             |   2 +-
 src/translate/cli/capacitor-add.readme.md     |   3 +-
 src/translate/cli/capacitor-build.readme.md   |   3 +-
 src/translate/cli/capacitor-copy.readme.md    |   3 +-
 src/translate/cli/capacitor-open.readme.md    |   3 +-
 src/translate/cli/capacitor-run.readme.md     |   3 +-
 src/translate/cli/capacitor-sync.readme.md    |   3 +-
 src/translate/cli/capacitor-update.readme.md  |   3 +-
 src/translate/cli/completion.readme.md        |   2 +-
 src/translate/cli/config-get.readme.md        |   2 +-
 src/translate/cli/config-set.readme.md        |   2 +-
 src/translate/cli/config-unset.readme.md      |   2 +-
 src/translate/cli/cordova-build.readme.md     |   2 +-
 src/translate/cli/cordova-compile.readme.md   |   2 +-
 src/translate/cli/cordova-emulate.readme.md   |   2 +-
 src/translate/cli/cordova-platform.readme.md  |   2 +-
 src/translate/cli/cordova-plugin.readme.md    |   2 +-
 src/translate/cli/cordova-prepare.readme.md   |   2 +-
 .../cli/cordova-requirements.readme.md        |   2 +-
 src/translate/cli/cordova-resources.readme.md |   3 +-
 src/translate/cli/cordova-run.readme.md       |   2 +-
 src/translate/cli/generate.readme.md          |   6 +-
 src/translate/cli/git-remote.readme.md        |   2 +-
 src/translate/cli/info.readme.md              |   2 +-
 src/translate/cli/init.readme.md              |   2 +-
 .../cli/integrations-disable.readme.md        |   2 +-
 .../cli/integrations-enable.readme.md         |   2 +-
 src/translate/cli/integrations-list.readme.md |   2 +-
 src/translate/cli/link.readme.md              |   2 +-
 src/translate/cli/live-update-add.readme.md   |   2 +-
 .../cli/live-update-configure.readme.md       |   2 +-
 src/translate/cli/login.readme.md             |   2 +-
 src/translate/cli/logout.readme.md            |   2 +-
 src/translate/cli/repair.readme.md            |   2 +-
 src/translate/cli/serve.readme.md             |   2 +-
 src/translate/cli/signup.readme.md            |   2 +-
 src/translate/cli/ssh-setup.readme.md         |   2 +-
 src/translate/cli/ssh-use.readme.md           |   2 +-
 src/translate/cli/ssl-generate.readme.md      |   2 +-
 src/translate/cli/start.readme.md             |   2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |   1 +
 ...awesome-cordova-plugins-actsheet.readme.md |   1 +
 .../@awesome-cordova-plugins-adjust.readme.md |   1 +
 ...esome-cordova-plugins-admob-free.readme.md |   1 +
 ...esome-cordova-plugins-admob-plus.readme.md |   1 +
 .../@awesome-cordova-plugins-admob.readme.md  |   2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |   1 +
 .../@awesome-cordova-plugins-alipay.readme.md |   1 +
 ...e-cordova-plugins-all-in-one-sdk.readme.md |   1 +
 ...rdova-plugins-analytics-firebase.readme.md |   1 +
 ...ordova-plugins-android-exoplayer.readme.md |   1 +
 ...dova-plugins-android-full-screen.readme.md |   3 +-
 ...me-cordova-plugins-android-notch.readme.md |   1 +
 ...dova-plugins-android-permissions.readme.md |   1 +
 ...@awesome-cordova-plugins-anyline.readme.md |   1 +
 ...cordova-plugins-app-availability.readme.md |   1 +
 ...ova-plugins-app-center-analytics.readme.md |   1 +
 ...rdova-plugins-app-center-crashes.readme.md |   1 +
 ...va-plugins-app-center-low-memory.readme.md |   1 +
 ...-cordova-plugins-app-center-push.readme.md |   2 +
 ...ome-cordova-plugins-app-launcher.readme.md |   1 +
 ...ome-cordova-plugins-app-minimize.readme.md |   1 +
 ...-cordova-plugins-app-preferences.readme.md |   1 +
 ...awesome-cordova-plugins-app-rate.readme.md |   1 +
 ...some-cordova-plugins-app-version.readme.md |   1 +
 ...wesome-cordova-plugins-apple-pay.readme.md |   1 +
 ...ome-cordova-plugins-apple-wallet.readme.md |   1 +
 ...awesome-cordova-plugins-appodeal.readme.md |   1 +
 ...wesome-cordova-plugins-appsflyer.readme.md |   1 +
 ...cordova-plugins-audio-management.readme.md |   1 +
 ...wesome-cordova-plugins-autostart.readme.md |   1 +
 ...cordova-plugins-background-fetch.readme.md |   1 +
 ...a-plugins-background-geolocation.readme.md |   1 +
 ...-cordova-plugins-background-mode.readme.md |   3 +-
 ...ordova-plugins-background-upload.readme.md |   1 +
 ...wesome-cordova-plugins-backlight.readme.md |   1 +
 .../@awesome-cordova-plugins-badge.readme.md  |   1 +
 ...esome-cordova-plugins-baidu-push.readme.md |   1 +
 ...-cordova-plugins-barcode-scanner.readme.md |   1 +
 ...ordova-plugins-base64-to-gallery.readme.md |   2 +-
 .../@awesome-cordova-plugins-base64.readme.md |   1 +
 ...e-cordova-plugins-battery-status.readme.md |   1 +
 ...awesome-cordova-plugins-biocatch.readme.md |   1 +
 ...ordova-plugins-biometric-wrapper.readme.md |   1 +
 .../@awesome-cordova-plugins-ble.readme.md    |   1 +
 ...@awesome-cordova-plugins-blinkid.readme.md |   1 +
 ...@awesome-cordova-plugins-blinkup.readme.md |   1 +
 ...ns-bluetooth-classic-serial-port.readme.md |   2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |   1 +
 ...cordova-plugins-bluetooth-serial.readme.md |   2 +-
 ...wesome-cordova-plugins-braintree.readme.md |   5 +-
 ...wesome-cordova-plugins-branch-io.readme.md |   1 +
 ...esome-cordova-plugins-brightness.readme.md |   1 +
 ...some-cordova-plugins-broadcaster.readme.md |   1 +
 ...some-cordova-plugins-browser-tab.readme.md |   1 +
 ...esome-cordova-plugins-build-info.readme.md |   1 +
 ...awesome-cordova-plugins-calendar.readme.md |   2 +
 ...e-cordova-plugins-call-directory.readme.md |   1 +
 ...awesome-cordova-plugins-call-log.readme.md |   1 +
 ...some-cordova-plugins-call-number.readme.md |   1 +
 ...e-cordova-plugins-camera-preview.readme.md |   1 +
 .../@awesome-cordova-plugins-camera.readme.md |   3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |   2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |   1 +
 ...wesome-cordova-plugins-clevertap.readme.md |   1 +
 ...wesome-cordova-plugins-clipboard.readme.md |   2 +
 ...e-cordova-plugins-cloud-settings.readme.md |   1 +
 ...wesome-cordova-plugins-clover-go.readme.md |   1 +
 ...wesome-cordova-plugins-code-push.readme.md |   1 +
 ...ova-plugins-colored-browser-tabs.readme.md |   1 +
 ...awesome-cordova-plugins-contacts.readme.md |   1 +
 ...e-cordova-plugins-couchbase-lite.readme.md |   1 +
 .../@awesome-cordova-plugins-crop.readme.md   |   2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |   1 +
 ...some-cordova-plugins-date-picker.readme.md |   1 +
 ...awesome-cordova-plugins-db-meter.readme.md |   2 +-
 ...-cordova-plugins-device-accounts.readme.md |   1 +
 ...-cordova-plugins-device-feedback.readme.md |   2 +
 ...me-cordova-plugins-device-motion.readme.md |   1 +
 ...rdova-plugins-device-orientation.readme.md |   1 +
 .../@awesome-cordova-plugins-device.readme.md |   1 +
 ...esome-cordova-plugins-dfu-update.readme.md |   1 +
 ...esome-cordova-plugins-diagnostic.readme.md |   1 +
 ...@awesome-cordova-plugins-dialogs.readme.md |   1 +
 ...-cordova-plugins-document-picker.readme.md |   2 +
 ...cordova-plugins-document-scanner.readme.md |   1 +
 ...-cordova-plugins-document-viewer.readme.md |   3 +-
 ...esome-cordova-plugins-downloader.readme.md |   2 +
 ...e-cordova-plugins-email-composer.readme.md |   3 +
 ...e-cordova-plugins-emm-app-config.readme.md |   2 +
 ...cordova-plugins-estimote-beacons.readme.md |   1 +
 ...gins-extended-device-information.readme.md |  10 +-
 .../@awesome-cordova-plugins-fabric.readme.md |   1 +
 ...awesome-cordova-plugins-facebook.readme.md |   8 +-
 .../@awesome-cordova-plugins-fcm.readme.md    |   1 +
 ...ome-cordova-plugins-file-chooser.readme.md |   2 +
 ...-cordova-plugins-file-encryption.readme.md |   1 +
 ...some-cordova-plugins-file-opener.readme.md |   1 +
 ...wesome-cordova-plugins-file-path.readme.md |   2 +
 ...some-cordova-plugins-file-picker.readme.md |   2 +
 ...me-cordova-plugins-file-transfer.readme.md |   1 +
 .../@awesome-cordova-plugins-file.readme.md   |  12 +-
 ...rdova-plugins-firebase-analytics.readme.md |   5 +-
 ...-plugins-firebase-authentication.readme.md |   1 +
 ...-cordova-plugins-firebase-config.readme.md |   1 +
 ...e-cordova-plugins-firebase-crash.readme.md |   1 +
 ...ova-plugins-firebase-crashlytics.readme.md |   1 +
 ...a-plugins-firebase-dynamic-links.readme.md |   4 +-
 ...rdova-plugins-firebase-messaging.readme.md |   1 +
 ...-cordova-plugins-firebase-vision.readme.md |   1 +
 ...esome-cordova-plugins-firebase-x.readme.md |   1 +
 ...awesome-cordova-plugins-firebase.readme.md |   1 +
 ...cordova-plugins-flurry-analytics.readme.md |   1 +
 ...rdova-plugins-foreground-service.readme.md |   5 +-
 .../@awesome-cordova-plugins-ftp.readme.md    |   1 +
 ...ordova-plugins-full-screen-image.readme.md |   1 +
 ...-cordova-plugins-gao-de-location.readme.md |   1 +
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |   1 +
 ...awesome-cordova-plugins-geofence.readme.md |   2 +-
 ...some-cordova-plugins-geolocation.readme.md |   5 +-
 ...me-cordova-plugins-globalization.readme.md |   1 +
 ...cordova-plugins-google-analytics.readme.md |   4 +-
 ...me-cordova-plugins-google-nearby.readme.md |   1 +
 ...ugins-google-play-games-services.readme.md |   1 +
 ...wesome-cordova-plugins-gyroscope.readme.md |   2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |   1 +
 ...ome-cordova-plugins-header-color.readme.md |   1 +
 ...esome-cordova-plugins-health-kit.readme.md |   1 +
 .../@awesome-cordova-plugins-health.readme.md |   1 +
 ...@awesome-cordova-plugins-hotspot.readme.md |   1 +
 .../@awesome-cordova-plugins-http.readme.md   |   2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |   3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |   1 +
 ...@awesome-cordova-plugins-ibeacon.readme.md |   3 +-
 ...ome-cordova-plugins-image-picker.readme.md |   1 +
 ...me-cordova-plugins-image-resizer.readme.md |   1 +
 .../@awesome-cordova-plugins-imap.readme.md   |   1 +
 ...e-cordova-plugins-in-app-browser.readme.md |   2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md |  35 +-
 ...-cordova-plugins-in-app-purchase.readme.md |   1 +
 ...me-cordova-plugins-in-app-review.readme.md |   2 +
 ...ordova-plugins-index-app-content.readme.md |   1 +
 ...awesome-cordova-plugins-insomnia.readme.md |   1 +
 ...e-cordova-plugins-intel-security.readme.md |   2 +-
 ...awesome-cordova-plugins-intercom.readme.md |   1 +
 ...me-cordova-plugins-ionic-webview.readme.md |   1 +
 ...s-ios-aswebauthenticationsessapi.readme.md |   1 +
 ...awesome-cordova-plugins-is-debug.readme.md |   1 +
 ...esome-cordova-plugins-janalytics.readme.md |   1 +
 ...wesome-cordova-plugins-jins-meme.readme.md |   1 +
 .../@awesome-cordova-plugins-jumio.readme.md  |   2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |   1 +
 ...ordova-plugins-keychain-touch-id.readme.md |   1 +
 ...awesome-cordova-plugins-keychain.readme.md |   1 +
 ...some-cordova-plugins-kommunicate.readme.md |   1 +
 ...awesome-cordova-plugins-last-cam.readme.md |   1 +
 ...cordova-plugins-launch-navigator.readme.md |   1 +
 ...me-cordova-plugins-launch-review.readme.md |   3 +-
 ...esome-cordova-plugins-line-login.readme.md |   1 +
 ...ome-cordova-plugins-local-backup.readme.md |   1 +
 ...dova-plugins-local-notifications.readme.md |   1 +
 ...me-cordova-plugins-locataccuracy.readme.md |   1 +
 ...ova-plugins-lottie-splash-screen.readme.md |   1 +
 .../@awesome-cordova-plugins-luxand.readme.md |   1 +
 ...ome-cordova-plugins-magnetometer.readme.md |   1 +
 .../@awesome-cordova-plugins-market.readme.md |   1 +
 ...me-cordova-plugins-media-capture.readme.md |   1 +
 .../@awesome-cordova-plugins-media.readme.md  |   1 +
 .../@awesome-cordova-plugins-metrix.readme.md |   1 +
 ...awesome-cordova-plugins-mixpanel.readme.md |   1 +
 ...-cordova-plugins-mlkit-translate.readme.md |   1 +
 ...ova-plugins-mobile-accessibility.readme.md |   1 +
 ...cordova-plugins-mobile-messaging.readme.md |   1 +
 ...@awesome-cordova-plugins-ms-adal.readme.md |   3 +-
 ...plugins-multiple-document-picker.readme.md |   1 +
 ...e-cordova-plugins-music-controls.readme.md |   1 +
 ...ome-cordova-plugins-native-audio.readme.md |   2 +-
 ...-cordova-plugins-native-geocoder.readme.md |   1 +
 ...-cordova-plugins-native-keyboard.readme.md |   2 +
 ...-plugins-native-page-transitions.readme.md |   1 +
 ...cordova-plugins-native-ringtones.readme.md |   1 +
 ...esome-cordova-plugins-navigatbar.readme.md |   1 +
 ...ordova-plugins-network-interface.readme.md |   1 +
 ...@awesome-cordova-plugins-network.readme.md |   1 +
 .../@awesome-cordova-plugins-nfc.readme.md    |   2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |   3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |   6 +-
 ...ova-plugins-open-native-settings.readme.md |   3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |   1 +
 .../@awesome-cordova-plugins-paypal.readme.md |   1 +
 ...@awesome-cordova-plugins-paytabs.readme.md |   1 +
 ...me-cordova-plugins-pdf-generator.readme.md |   1 +
 ...wesome-cordova-plugins-pedometer.readme.md |   1 +
 ...gins-phonegap-local-notification.readme.md |   1 +
 ...me-cordova-plugins-photo-library.readme.md |   1 +
 ...ome-cordova-plugins-photo-viewer.readme.md |   2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |   1 +
 ...esome-cordova-plugins-pin-dialog.readme.md |   3 +
 ...wesome-cordova-plugins-pinterest.readme.md |   1 +
 ...awesome-cordova-plugins-pollfish.readme.md |   1 +
 ...cordova-plugins-power-management.readme.md |   1 +
 ...rdova-plugins-power-optimization.readme.md |   1 +
 ...@awesome-cordova-plugins-printer.readme.md |   2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |   1 +
 ...wesome-cordova-plugins-purchases.readme.md |   6 +-
 .../@awesome-cordova-plugins-push.readme.md   |   1 +
 ...ome-cordova-plugins-pushape-push.readme.md |   1 +
 .../@awesome-cordova-plugins-qqsdk.readme.md  |   1 +
 ...esome-cordova-plugins-qr-scanner.readme.md |   1 +
 ...a-plugins-regula-document-reader.readme.md |   1 +
 ...@awesome-cordova-plugins-restart.readme.md |   1 +
 ...@awesome-cordova-plugins-rollbar.readme.md |   1 +
 ...a-plugins-safari-view-controller.readme.md |   1 +
 ...rdova-plugins-screen-orientation.readme.md |   1 +
 ...esome-cordova-plugins-screenshot.readme.md |   2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |   1 +
 .../@awesome-cordova-plugins-serial.readme.md |   1 +
 ...ordova-plugins-service-discovery.readme.md |   1 +
 .../@awesome-cordova-plugins-shake.readme.md  |   2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |   1 +
 ...ordova-plugins-shortcuts-android.readme.md |   1 +
 ...rdova-plugins-sign-in-with-apple.readme.md |   3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |   1 +
 ...e-cordova-plugins-siri-shortcuts.readme.md |   1 +
 ...wesome-cordova-plugins-smartlook.readme.md |   1 +
 ...me-cordova-plugins-sms-retriever.readme.md |   1 +
 .../@awesome-cordova-plugins-sms.readme.md    |   2 +
 ...e-cordova-plugins-social-sharing.readme.md |   1 +
 ...rdova-plugins-speech-recognition.readme.md |   1 +
 ...wesome-cordova-plugins-speechkit.readme.md |   1 +
 ...e-cordova-plugins-spinner-dialog.readme.md |   1 +
 ...me-cordova-plugins-splash-screen.readme.md |   2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |   2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |   1 +
 ...me-cordova-plugins-sqlite-porter.readme.md |   1 +
 .../@awesome-cordova-plugins-sqlite.readme.md |   1 +
 ...some-cordova-plugins-ssh-connect.readme.md |   1 +
 ...wesome-cordova-plugins-star-prnt.readme.md |   3 +-
 ...esome-cordova-plugins-status-bar.readme.md |   1 +
 ...some-cordova-plugins-stepcounter.readme.md |   2 +-
 ...-cordova-plugins-streaming-media.readme.md |   1 +
 .../@awesome-cordova-plugins-stripe.readme.md |   1 +
 .../@awesome-cordova-plugins-sum-up.readme.md |   1 +
 ...s-system-alert-window-permission.readme.md |   1 +
 ...me-cordova-plugins-taptic-engine.readme.md |   1 +
 ...ova-plugins-tealium-adidentifier.readme.md |   1 +
 ...-plugins-tealium-installreferrer.readme.md |   1 +
 ...@awesome-cordova-plugins-tealium.readme.md |   3 +-
 ...-plugins-text-to-speech-advanced.readme.md |   1 +
 ...e-cordova-plugins-text-to-speech.readme.md |   1 +
 ...-cordova-plugins-theme-detection.readme.md |   1 +
 ...ordova-plugins-themeable-browser.readme.md |   1 +
 ...-cordova-plugins-three-dee-touch.readme.md |   1 +
 .../@awesome-cordova-plugins-toast.readme.md  |   1 +
 ...awesome-cordova-plugins-touch-id.readme.md |   1 +
 ...-cordova-plugins-twitter-connect.readme.md |   4 +-
 .../@awesome-cordova-plugins-uid.readme.md    |   1 +
 ...cordova-plugins-unique-device-id.readme.md |   1 +
 ...dova-plugins-unvired-cordova-sdk.readme.md |  18 +-
 .../@awesome-cordova-plugins-uptime.readme.md |   1 +
 ...ome-cordova-plugins-urbanairship.readme.md |   1 +
 ...ova-plugins-usabilla-cordova-sdk.readme.md |   1 +
 ...esome-cordova-plugins-user-agent.readme.md |   3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |   1 +
 ...wesome-cordova-plugins-vibration.readme.md |   2 +-
 ...rdova-plugins-video-capture-plus.readme.md |   2 +-
 ...ome-cordova-plugins-video-player.readme.md |   1 +
 ...esome-cordova-plugins-web-intent.readme.md |   3 +-
 ...esome-cordova-plugins-web-server.readme.md |   1 +
 ...ordova-plugins-web-socket-server.readme.md |   1 +
 ...wesome-cordova-plugins-webengage.readme.md |   1 +
 .../@awesome-cordova-plugins-wechat.readme.md |   1 +
 ...me-cordova-plugins-wifi-wizard-2.readme.md |   1 +
 ...esome-cordova-plugins-wonderpush.readme.md |   2 +
 ...ova-plugins-youtube-video-player.readme.md |   1 +
 .../@awesome-cordova-plugins-zbar.readme.md   |   1 +
 ...awesome-cordova-plugins-zeroconf.readme.md |   3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |   1 +
 .../@awesome-cordova-plugins-zoom.readme.md   |   1 +
 812 files changed, 14056 insertions(+), 496 deletions(-)

diff --git a/src/translate/.detection/api/accordion-group.json b/src/translate/.detection/api/accordion-group.json
index e09e4c9e693..111bd46bcd2 100644
--- a/src/translate/.detection/api/accordion-group.json
+++ b/src/translate/.detection/api/accordion-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/accordion-group/accordion-group.tsx",
+  "filePath": "src/components/accordion-group/accordion-group.tsx",
   "encapsulation": "shadow",
   "tag": "ion-accordion-group",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -48,6 +58,11 @@
     {
       "name": "expand",
       "type": "\"compact\" | \"inset\"",
+      "complexType": {
+        "original": "'compact' | 'inset'",
+        "resolved": "\"compact\" | \"inset\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expand",
       "reflectToAttr": false,
@@ -91,6 +106,11 @@
     {
       "name": "multiple",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -110,6 +130,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -127,6 +152,11 @@
     {
       "name": "value",
       "type": "null | string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[] | null",
+        "resolved": "null | string | string[] | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -156,6 +186,17 @@
       "event": "ionChange",
       "detail": "AccordionGroupChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "AccordionGroupChangeEventDetail",
+        "resolved": "AccordionGroupChangeEventDetail<any>",
+        "references": {
+          "AccordionGroupChangeEventDetail": {
+            "location": "import",
+            "path": "./accordion-group-interface",
+            "id": "src/components/accordion-group/accordion-group-interface.ts::AccordionGroupChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
diff --git a/src/translate/.detection/api/accordion.json b/src/translate/.detection/api/accordion.json
index 8097c9e2d73..12dc9ef3c80 100644
--- a/src/translate/.detection/api/accordion.json
+++ b/src/translate/.detection/api/accordion.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/accordion/accordion.tsx",
+  "filePath": "src/components/accordion/accordion.tsx",
   "encapsulation": "shadow",
   "tag": "ion-accordion",
   "docs": "",
@@ -34,6 +34,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -72,6 +77,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -89,6 +99,11 @@
     {
       "name": "toggleIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "toggle-icon",
       "reflectToAttr": false,
@@ -106,6 +121,11 @@
     {
       "name": "toggleIconSlot",
       "type": "\"end\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end'",
+        "resolved": "\"end\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "toggle-icon-slot",
       "reflectToAttr": false,
@@ -128,6 +148,11 @@
     {
       "name": "value",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/action-sheet.json b/src/translate/.detection/api/action-sheet.json
index 22dd4a06592..0de1b0b5fcf 100644
--- a/src/translate/.detection/api/action-sheet.json
+++ b/src/translate/.detection/api/action-sheet.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/action-sheet/action-sheet.tsx",
+  "filePath": "src/components/action-sheet/action-sheet.tsx",
   "encapsulation": "scoped",
   "tag": "ion-action-sheet",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
     {
       "name": "buttons",
       "type": "(string | ActionSheetButton<any>)[]",
+      "complexType": {
+        "original": "(ActionSheetButton | string)[]",
+        "resolved": "(string | ActionSheetButton<any>)[]",
+        "references": {
+          "ActionSheetButton": {
+            "location": "import",
+            "path": "./action-sheet-interface",
+            "id": "src/components/action-sheet/action-sheet-interface.ts::ActionSheetButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "An array of buttons for the action sheet.",
@@ -67,6 +88,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -89,6 +115,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the action sheet is presented.",
@@ -107,6 +144,11 @@
     {
       "name": "header",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "header",
       "reflectToAttr": false,
@@ -126,6 +168,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the action sheet.",
@@ -144,6 +191,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -161,6 +213,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -178,6 +235,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the action sheet is dismissed.",
@@ -217,6 +285,11 @@
     {
       "name": "subHeader",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "sub-header",
       "reflectToAttr": false,
@@ -236,6 +309,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -253,6 +331,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -277,6 +360,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the action sheet overlay after it has been presented.",
@@ -297,6 +410,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the action sheet did dismiss.",
@@ -308,6 +441,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the action sheet will dismiss.",
@@ -319,6 +472,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the action sheet overlay after it has been created.",
@@ -330,6 +494,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has dismissed.\nShorthand for ionActionSheetDidDismiss.",
@@ -339,6 +514,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has presented.\nShorthand for ionActionSheetWillDismiss.",
@@ -348,6 +528,17 @@
       "event": "ionActionSheetDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has dismissed.",
@@ -357,6 +548,11 @@
       "event": "ionActionSheetDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has presented.",
@@ -366,6 +562,17 @@
       "event": "ionActionSheetWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has dismissed.",
@@ -375,6 +582,11 @@
       "event": "ionActionSheetWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has presented.",
@@ -384,6 +596,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has dismissed.\nShorthand for ionActionSheetWillDismiss.",
@@ -393,6 +616,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has presented.\nShorthand for ionActionSheetWillPresent.",
diff --git a/src/translate/.detection/api/alert.json b/src/translate/.detection/api/alert.json
index 3d1fd438d12..647685f47c6 100644
--- a/src/translate/.detection/api/alert.json
+++ b/src/translate/.detection/api/alert.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/alert/alert.tsx",
+  "filePath": "src/components/alert/alert.tsx",
   "encapsulation": "scoped",
   "tag": "ion-alert",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
     {
       "name": "buttons",
       "type": "(string | AlertButton)[]",
+      "complexType": {
+        "original": "(AlertButton | string)[]",
+        "resolved": "(string | AlertButton)[]",
+        "references": {
+          "AlertButton": {
+            "location": "import",
+            "path": "./alert-interface",
+            "id": "src/components/alert/alert-interface.ts::AlertButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Array of buttons to be added to the alert.",
@@ -67,6 +88,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -89,6 +115,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the alert is presented.",
@@ -107,6 +144,11 @@
     {
       "name": "header",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "header",
       "reflectToAttr": false,
@@ -126,6 +168,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the alert.",
@@ -144,6 +191,17 @@
     {
       "name": "inputs",
       "type": "AlertInput[]",
+      "complexType": {
+        "original": "AlertInput[]",
+        "resolved": "AlertInput[]",
+        "references": {
+          "AlertInput": {
+            "location": "import",
+            "path": "./alert-interface",
+            "id": "src/components/alert/alert-interface.ts::AlertInput"
+          }
+        }
+      },
       "mutable": true,
       "reflectToAttr": false,
       "docs": "Array of input to show in the alert.",
@@ -160,6 +218,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -177,6 +240,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -194,6 +262,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the alert is dismissed.",
@@ -212,6 +291,17 @@
     {
       "name": "message",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
@@ -255,6 +345,11 @@
     {
       "name": "subHeader",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "sub-header",
       "reflectToAttr": false,
@@ -274,6 +369,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -291,6 +391,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -315,6 +420,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the alert overlay after it has been presented.",
@@ -335,6 +470,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the alert did dismiss.",
@@ -346,6 +501,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the alert will dismiss.",
@@ -357,6 +532,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the alert overlay after it has been created.",
@@ -368,6 +554,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has dismissed.\nShorthand for ionAlertDidDismiss.",
@@ -377,6 +574,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has presented.\nShorthand for ionAlertWillDismiss.",
@@ -386,6 +588,17 @@
       "event": "ionAlertDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has dismissed.",
@@ -395,6 +608,11 @@
       "event": "ionAlertDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has presented.",
@@ -404,6 +622,17 @@
       "event": "ionAlertWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has dismissed.",
@@ -413,6 +642,11 @@
       "event": "ionAlertWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has presented.",
@@ -422,6 +656,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has dismissed.\nShorthand for ionAlertWillDismiss.",
@@ -431,6 +676,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has presented.\nShorthand for ionAlertWillPresent.",
diff --git a/src/translate/.detection/api/app.json b/src/translate/.detection/api/app.json
index 6a741d86f00..093a00ac590 100644
--- a/src/translate/.detection/api/app.json
+++ b/src/translate/.detection/api/app.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/app/app.tsx",
+  "filePath": "src/components/app/app.tsx",
   "encapsulation": "none",
   "tag": "ion-app",
   "docs": "",
diff --git a/src/translate/.detection/api/avatar.json b/src/translate/.detection/api/avatar.json
index a0c9d4bf32f..d4f630152fe 100644
--- a/src/translate/.detection/api/avatar.json
+++ b/src/translate/.detection/api/avatar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/avatar/avatar.tsx",
+  "filePath": "src/components/avatar/avatar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-avatar",
   "docs": "",
diff --git a/src/translate/.detection/api/back-button.json b/src/translate/.detection/api/back-button.json
index 7fc1481fbce..dca69141db2 100644
--- a/src/translate/.detection/api/back-button.json
+++ b/src/translate/.detection/api/back-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/back-button/back-button.tsx",
+  "filePath": "src/components/back-button/back-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-back-button",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -81,6 +92,11 @@
     {
       "name": "defaultHref",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "default-href",
       "reflectToAttr": false,
@@ -100,6 +116,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": true,
@@ -117,6 +138,11 @@
     {
       "name": "icon",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "icon",
       "reflectToAttr": false,
@@ -160,6 +186,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page.",
@@ -178,6 +215,11 @@
     {
       "name": "text",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "text",
       "reflectToAttr": false,
@@ -200,6 +242,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/backdrop.json b/src/translate/.detection/api/backdrop.json
index 5cccd2731ac..0f5566e34ab 100644
--- a/src/translate/.detection/api/backdrop.json
+++ b/src/translate/.detection/api/backdrop.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/backdrop/backdrop.tsx",
+  "filePath": "src/components/backdrop/backdrop.tsx",
   "encapsulation": "shadow",
   "tag": "ion-backdrop",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "stopPropagation",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "stop-propagation",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "tappable",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "tappable",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "visible",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "visible",
       "reflectToAttr": false,
@@ -64,6 +79,11 @@
       "event": "ionBackdropTap",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the backdrop is tapped.",
diff --git a/src/translate/.detection/api/badge.json b/src/translate/.detection/api/badge.json
index 38e091eed13..39541ce9469 100644
--- a/src/translate/.detection/api/badge.json
+++ b/src/translate/.detection/api/badge.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/badge/badge.tsx",
+  "filePath": "src/components/badge/badge.tsx",
   "encapsulation": "shadow",
   "tag": "ion-badge",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/.detection/api/breadcrumb.json b/src/translate/.detection/api/breadcrumb.json
index a3430907695..d32dc3324fc 100644
--- a/src/translate/.detection/api/breadcrumb.json
+++ b/src/translate/.detection/api/breadcrumb.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/breadcrumb/breadcrumb.tsx",
+  "filePath": "src/components/breadcrumb/breadcrumb.tsx",
   "encapsulation": "shadow",
   "tag": "ion-breadcrumb",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "active",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "active",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": false,
@@ -98,6 +114,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -115,6 +136,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -134,6 +160,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -174,6 +205,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -193,6 +229,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -211,6 +258,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -237,6 +295,11 @@
     {
       "name": "separator",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean | undefined",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "separator",
       "reflectToAttr": false,
@@ -256,6 +319,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -279,6 +347,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the breadcrumb loses focus.",
@@ -288,6 +361,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the breadcrumb has focus.",
diff --git a/src/translate/.detection/api/breadcrumbs.json b/src/translate/.detection/api/breadcrumbs.json
index a86cd7f333c..a5df2c4822b 100644
--- a/src/translate/.detection/api/breadcrumbs.json
+++ b/src/translate/.detection/api/breadcrumbs.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/breadcrumbs/breadcrumbs.tsx",
+  "filePath": "src/components/breadcrumbs/breadcrumbs.tsx",
   "encapsulation": "shadow",
   "tag": "ion-breadcrumbs",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "itemsAfterCollapse",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "items-after-collapse",
       "reflectToAttr": false,
@@ -86,6 +102,11 @@
     {
       "name": "itemsBeforeCollapse",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "items-before-collapse",
       "reflectToAttr": false,
@@ -103,6 +124,11 @@
     {
       "name": "maxItems",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max-items",
       "reflectToAttr": false,
@@ -147,6 +173,17 @@
       "event": "ionCollapsedClick",
       "detail": "BreadcrumbCollapsedClickEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "BreadcrumbCollapsedClickEventDetail",
+        "resolved": "BreadcrumbCollapsedClickEventDetail",
+        "references": {
+          "BreadcrumbCollapsedClickEventDetail": {
+            "location": "import",
+            "path": "../breadcrumb/breadcrumb-interface",
+            "id": "src/components/breadcrumb/breadcrumb-interface.ts::BreadcrumbCollapsedClickEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the collapsed indicator is clicked on.",
diff --git a/src/translate/.detection/api/button.json b/src/translate/.detection/api/button.json
index cbb1b55b027..b8a7ec24677 100644
--- a/src/translate/.detection/api/button.json
+++ b/src/translate/.detection/api/button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/button/button.tsx",
+  "filePath": "src/components/button/button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-button",
   "docs": "",
@@ -34,6 +34,11 @@
     {
       "name": "buttonType",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": true,
       "attr": "button-type",
       "reflectToAttr": false,
@@ -51,6 +56,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -106,6 +122,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": true,
@@ -123,6 +144,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -142,6 +168,11 @@
     {
       "name": "expand",
       "type": "\"block\" | \"full\" | undefined",
+      "complexType": {
+        "original": "'full' | 'block'",
+        "resolved": "\"block\" | \"full\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expand",
       "reflectToAttr": true,
@@ -166,6 +197,11 @@
     {
       "name": "fill",
       "type": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'clear' | 'outline' | 'solid' | 'default'",
+        "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "fill",
       "reflectToAttr": true,
@@ -198,6 +234,16 @@
     {
       "name": "form",
       "type": "HTMLFormElement | string | undefined",
+      "complexType": {
+        "original": "string | HTMLFormElement",
+        "resolved": "HTMLFormElement | string | undefined",
+        "references": {
+          "HTMLFormElement": {
+            "location": "global",
+            "id": "global::HTMLFormElement"
+          }
+        }
+      },
       "mutable": false,
       "attr": "form",
       "reflectToAttr": false,
@@ -220,6 +266,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -260,6 +311,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -279,6 +335,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -297,6 +364,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -323,6 +401,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": true,
@@ -343,6 +426,11 @@
     {
       "name": "size",
       "type": "\"default\" | \"large\" | \"small\" | undefined",
+      "complexType": {
+        "original": "'small' | 'default' | 'large'",
+        "resolved": "\"default\" | \"large\" | \"small\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": true,
@@ -371,6 +459,11 @@
     {
       "name": "strong",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "strong",
       "reflectToAttr": false,
@@ -388,6 +481,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -407,6 +505,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -437,6 +540,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button loses focus.",
@@ -446,6 +554,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button has focus.",
diff --git a/src/translate/.detection/api/buttons.json b/src/translate/.detection/api/buttons.json
index 1a7fdced0b2..b5c22aa638a 100644
--- a/src/translate/.detection/api/buttons.json
+++ b/src/translate/.detection/api/buttons.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/buttons/buttons.tsx",
+  "filePath": "src/components/buttons/buttons.tsx",
   "encapsulation": "scoped",
   "tag": "ion-buttons",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "collapse",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "collapse",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/card-content.json b/src/translate/.detection/api/card-content.json
index fa332c45e98..ae5db2661a2 100644
--- a/src/translate/.detection/api/card-content.json
+++ b/src/translate/.detection/api/card-content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-content/card-content.tsx",
+  "filePath": "src/components/card-content/card-content.tsx",
   "encapsulation": "none",
   "tag": "ion-card-content",
   "docs": "",
diff --git a/src/translate/.detection/api/card-header.json b/src/translate/.detection/api/card-header.json
index 48a1dac21e0..cef725d1da3 100644
--- a/src/translate/.detection/api/card-header.json
+++ b/src/translate/.detection/api/card-header.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-header/card-header.tsx",
+  "filePath": "src/components/card-header/card-header.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card-header",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +101,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/card-subtitle.json b/src/translate/.detection/api/card-subtitle.json
index 1963c6a2ff8..621ddec9699 100644
--- a/src/translate/.detection/api/card-subtitle.json
+++ b/src/translate/.detection/api/card-subtitle.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-subtitle/card-subtitle.tsx",
+  "filePath": "src/components/card-subtitle/card-subtitle.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card-subtitle",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/.detection/api/card-title.json b/src/translate/.detection/api/card-title.json
index 043b76990f5..4880070eebd 100644
--- a/src/translate/.detection/api/card-title.json
+++ b/src/translate/.detection/api/card-title.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-title/card-title.tsx",
+  "filePath": "src/components/card-title/card-title.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card-title",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/.detection/api/card.json b/src/translate/.detection/api/card.json
index e24016151cc..0711d65210d 100644
--- a/src/translate/.detection/api/card.json
+++ b/src/translate/.detection/api/card.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card/card.tsx",
+  "filePath": "src/components/card/card.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "button",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "button",
       "reflectToAttr": false,
@@ -35,6 +40,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +106,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -107,6 +128,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -126,6 +152,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -166,6 +197,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -185,6 +221,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -203,6 +250,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -229,6 +287,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -248,6 +311,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/checkbox.json b/src/translate/.detection/api/checkbox.json
index ff682759224..a6301a409d6 100644
--- a/src/translate/.detection/api/checkbox.json
+++ b/src/translate/.detection/api/checkbox.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/checkbox/checkbox.tsx",
+  "filePath": "src/components/checkbox/checkbox.tsx",
   "encapsulation": "shadow",
   "tag": "ion-checkbox",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "checked",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "checked",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -98,6 +114,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -115,6 +136,11 @@
     {
       "name": "indeterminate",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "indeterminate",
       "reflectToAttr": false,
@@ -132,6 +158,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -158,6 +189,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -184,6 +220,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -224,6 +265,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -241,6 +287,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -262,6 +313,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the checkbox loses focus.",
@@ -271,6 +327,17 @@
       "event": "ionChange",
       "detail": "CheckboxChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "CheckboxChangeEventDetail",
+        "resolved": "CheckboxChangeEventDetail<any>",
+        "references": {
+          "CheckboxChangeEventDetail": {
+            "location": "import",
+            "path": "./checkbox-interface",
+            "id": "src/components/checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
@@ -280,6 +347,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the checkbox has focus.",
diff --git a/src/translate/.detection/api/chip.json b/src/translate/.detection/api/chip.json
index 3991bb4f56e..746e2857818 100644
--- a/src/translate/.detection/api/chip.json
+++ b/src/translate/.detection/api/chip.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/chip/chip.tsx",
+  "filePath": "src/components/chip/chip.tsx",
   "encapsulation": "shadow",
   "tag": "ion-chip",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -107,6 +123,11 @@
     {
       "name": "outline",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "outline",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/col.json b/src/translate/.detection/api/col.json
index b3530453894..89ac355f62d 100644
--- a/src/translate/.detection/api/col.json
+++ b/src/translate/.detection/api/col.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/col/col.tsx",
+  "filePath": "src/components/col/col.tsx",
   "encapsulation": "shadow",
   "tag": "ion-col",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "offset",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset",
       "reflectToAttr": false,
@@ -28,6 +33,11 @@
     {
       "name": "offsetLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-lg",
       "reflectToAttr": false,
@@ -47,6 +57,11 @@
     {
       "name": "offsetMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-md",
       "reflectToAttr": false,
@@ -66,6 +81,11 @@
     {
       "name": "offsetSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-sm",
       "reflectToAttr": false,
@@ -85,6 +105,11 @@
     {
       "name": "offsetXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-xl",
       "reflectToAttr": false,
@@ -104,6 +129,11 @@
     {
       "name": "offsetXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-xs",
       "reflectToAttr": false,
@@ -123,6 +153,11 @@
     {
       "name": "pull",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull",
       "reflectToAttr": false,
@@ -142,6 +177,11 @@
     {
       "name": "pullLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-lg",
       "reflectToAttr": false,
@@ -161,6 +201,11 @@
     {
       "name": "pullMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-md",
       "reflectToAttr": false,
@@ -180,6 +225,11 @@
     {
       "name": "pullSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-sm",
       "reflectToAttr": false,
@@ -199,6 +249,11 @@
     {
       "name": "pullXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-xl",
       "reflectToAttr": false,
@@ -218,6 +273,11 @@
     {
       "name": "pullXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-xs",
       "reflectToAttr": false,
@@ -237,6 +297,11 @@
     {
       "name": "push",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push",
       "reflectToAttr": false,
@@ -256,6 +321,11 @@
     {
       "name": "pushLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-lg",
       "reflectToAttr": false,
@@ -275,6 +345,11 @@
     {
       "name": "pushMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-md",
       "reflectToAttr": false,
@@ -294,6 +369,11 @@
     {
       "name": "pushSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-sm",
       "reflectToAttr": false,
@@ -313,6 +393,11 @@
     {
       "name": "pushXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-xl",
       "reflectToAttr": false,
@@ -332,6 +417,11 @@
     {
       "name": "pushXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-xs",
       "reflectToAttr": false,
@@ -351,6 +441,11 @@
     {
       "name": "size",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
@@ -370,6 +465,11 @@
     {
       "name": "sizeLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-lg",
       "reflectToAttr": false,
@@ -389,6 +489,11 @@
     {
       "name": "sizeMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-md",
       "reflectToAttr": false,
@@ -408,6 +513,11 @@
     {
       "name": "sizeSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-sm",
       "reflectToAttr": false,
@@ -427,6 +537,11 @@
     {
       "name": "sizeXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-xl",
       "reflectToAttr": false,
@@ -446,6 +561,11 @@
     {
       "name": "sizeXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-xs",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/content.json b/src/translate/.detection/api/content.json
index 07dd018764a..753d276ca5f 100644
--- a/src/translate/.detection/api/content.json
+++ b/src/translate/.detection/api/content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/content/content.tsx",
+  "filePath": "src/components/content/content.tsx",
   "encapsulation": "shadow",
   "tag": "ion-content",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -81,6 +92,11 @@
     {
       "name": "forceOverscroll",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "force-overscroll",
       "reflectToAttr": false,
@@ -100,6 +116,11 @@
     {
       "name": "fullscreen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fullscreen",
       "reflectToAttr": false,
@@ -117,6 +138,11 @@
     {
       "name": "scrollEvents",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scroll-events",
       "reflectToAttr": false,
@@ -134,6 +160,11 @@
     {
       "name": "scrollX",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scroll-x",
       "reflectToAttr": false,
@@ -151,6 +182,11 @@
     {
       "name": "scrollY",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scroll-y",
       "reflectToAttr": false,
@@ -173,6 +209,21 @@
         "type": "Promise<HTMLElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLElement": {
+            "location": "global",
+            "id": "global::HTMLElement"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
       "signature": "getScrollElement() => Promise<HTMLElement>",
       "parameters": [],
       "docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `ion-content`:\n\ni.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events\nand `scrollToPoint()` to scroll the content into a certain point.",
@@ -184,6 +235,45 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(x: number, y: number, duration: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "x The amount to scroll by on the horizontal axis."
+              }
+            ],
+            "text": "The amount to scroll by on the horizontal axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "y The amount to scroll by on the vertical axis."
+              }
+            ],
+            "text": "The amount to scroll by on the vertical axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling by that amount."
+              }
+            ],
+            "text": "The amount of time to take scrolling by that amount."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll by a specified X/Y distance in the component.",
@@ -208,6 +298,27 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(duration?: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
+              }
+            ],
+            "text": "The amount of time to take scrolling to the bottom. Defaults to `0`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollToBottom(duration?: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll to the bottom of the component.",
@@ -224,6 +335,45 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "x The point to scroll to on the horizontal axis."
+              }
+            ],
+            "text": "The point to scroll to on the horizontal axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "y The point to scroll to on the vertical axis."
+              }
+            ],
+            "text": "The point to scroll to on the vertical axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
+              }
+            ],
+            "text": "The amount of time to take scrolling to that point. Defaults to `0`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll to a specified X/Y location in the component.",
@@ -248,6 +398,27 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(duration?: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
+              }
+            ],
+            "text": "The amount of time to take scrolling to the top. Defaults to `0`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollToTop(duration?: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll to the top of the component.",
@@ -264,6 +435,17 @@
       "event": "ionScroll",
       "detail": "ScrollDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ScrollDetail",
+        "resolved": "ScrollDetail",
+        "references": {
+          "ScrollDetail": {
+            "location": "import",
+            "path": "./content-interface",
+            "id": "src/components/content/content-interface.ts::ScrollDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
@@ -273,6 +455,17 @@
       "event": "ionScrollEnd",
       "detail": "ScrollBaseDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ScrollBaseDetail",
+        "resolved": "ScrollBaseDetail",
+        "references": {
+          "ScrollBaseDetail": {
+            "location": "import",
+            "path": "./content-interface",
+            "id": "src/components/content/content-interface.ts::ScrollBaseDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
@@ -282,6 +475,17 @@
       "event": "ionScrollStart",
       "detail": "ScrollBaseDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ScrollBaseDetail",
+        "resolved": "ScrollBaseDetail",
+        "references": {
+          "ScrollBaseDetail": {
+            "location": "import",
+            "path": "./content-interface",
+            "id": "src/components/content/content-interface.ts::ScrollBaseDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the scroll has started. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
diff --git a/src/translate/.detection/api/datetime-button.json b/src/translate/.detection/api/datetime-button.json
index fc3db840e2c..96fb236434c 100644
--- a/src/translate/.detection/api/datetime-button.json
+++ b/src/translate/.detection/api/datetime-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/datetime-button/datetime-button.tsx",
+  "filePath": "src/components/datetime-button/datetime-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-datetime-button",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -82,6 +93,11 @@
     {
       "name": "datetime",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "datetime",
       "reflectToAttr": false,
@@ -101,6 +117,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": true,
diff --git a/src/translate/.detection/api/datetime.json b/src/translate/.detection/api/datetime.json
index 3c5637d3ed6..eed97853ccf 100644
--- a/src/translate/.detection/api/datetime.json
+++ b/src/translate/.detection/api/datetime.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/datetime/datetime.tsx",
+  "filePath": "src/components/datetime/datetime.tsx",
   "encapsulation": "shadow",
   "tag": "ion-datetime",
   "docs": "",
@@ -46,6 +46,11 @@
     {
       "name": "cancelText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-text",
       "reflectToAttr": false,
@@ -63,6 +68,11 @@
     {
       "name": "clearText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-text",
       "reflectToAttr": false,
@@ -80,6 +90,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": false,
@@ -136,6 +157,11 @@
     {
       "name": "dayValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "day-values",
       "reflectToAttr": false,
@@ -161,6 +187,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -178,6 +209,11 @@
     {
       "name": "doneText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "done-text",
       "reflectToAttr": false,
@@ -195,6 +231,11 @@
     {
       "name": "firstDayOfWeek",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "first-day-of-week",
       "reflectToAttr": false,
@@ -212,6 +253,22 @@
     {
       "name": "highlightedDates",
       "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+      "complexType": {
+        "original": "DatetimeHighlight[] | DatetimeHighlightCallback",
+        "resolved": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+        "references": {
+          "DatetimeHighlight": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimeHighlight"
+          },
+          "DatetimeHighlightCallback": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimeHighlightCallback"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.",
@@ -236,6 +293,11 @@
     {
       "name": "hourCycle",
       "type": "\"h12\" | \"h23\" | undefined",
+      "complexType": {
+        "original": "'h23' | 'h12'",
+        "resolved": "\"h12\" | \"h23\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "hour-cycle",
       "reflectToAttr": false,
@@ -260,6 +322,11 @@
     {
       "name": "hourValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "hour-values",
       "reflectToAttr": false,
@@ -285,6 +352,11 @@
     {
       "name": "isDateEnabled",
       "type": "((dateIsoString: string) => boolean) | undefined",
+      "complexType": {
+        "original": "(dateIsoString: string) => boolean",
+        "resolved": "((dateIsoString: string) => boolean) | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.",
@@ -303,6 +375,11 @@
     {
       "name": "locale",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "locale",
       "reflectToAttr": false,
@@ -320,6 +397,11 @@
     {
       "name": "max",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "max",
       "reflectToAttr": false,
@@ -339,6 +421,11 @@
     {
       "name": "min",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "min",
       "reflectToAttr": false,
@@ -358,6 +445,11 @@
     {
       "name": "minuteValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "minute-values",
       "reflectToAttr": false,
@@ -404,6 +496,11 @@
     {
       "name": "monthValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "month-values",
       "reflectToAttr": false,
@@ -429,6 +526,11 @@
     {
       "name": "multiple",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -446,6 +548,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -463,6 +570,11 @@
     {
       "name": "preferWheel",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "prefer-wheel",
       "reflectToAttr": false,
@@ -480,6 +592,17 @@
     {
       "name": "presentation",
       "type": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
+      "complexType": {
+        "original": "DatetimePresentation",
+        "resolved": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
+        "references": {
+          "DatetimePresentation": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimePresentation"
+          }
+        }
+      },
       "mutable": false,
       "attr": "presentation",
       "reflectToAttr": false,
@@ -522,6 +645,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -539,6 +667,11 @@
     {
       "name": "showClearButton",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-clear-button",
       "reflectToAttr": false,
@@ -556,6 +689,11 @@
     {
       "name": "showDefaultButtons",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-default-buttons",
       "reflectToAttr": false,
@@ -573,6 +711,11 @@
     {
       "name": "showDefaultTimeLabel",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-default-time-label",
       "reflectToAttr": false,
@@ -590,6 +733,11 @@
     {
       "name": "showDefaultTitle",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-default-title",
       "reflectToAttr": false,
@@ -607,6 +755,11 @@
     {
       "name": "size",
       "type": "\"cover\" | \"fixed\"",
+      "complexType": {
+        "original": "'cover' | 'fixed'",
+        "resolved": "\"cover\" | \"fixed\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
@@ -629,6 +782,17 @@
     {
       "name": "titleSelectedDatesFormatter",
       "type": "((selectedDates: string[]) => string) | undefined",
+      "complexType": {
+        "original": "TitleSelectedDatesFormatter",
+        "resolved": "((selectedDates: string[]) => string) | undefined",
+        "references": {
+          "TitleSelectedDatesFormatter": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::TitleSelectedDatesFormatter"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
@@ -647,6 +811,11 @@
     {
       "name": "value",
       "type": "null | string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[] | null",
+        "resolved": "null | string | string[] | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -672,6 +841,11 @@
     {
       "name": "yearValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "year-values",
       "reflectToAttr": false,
@@ -702,6 +876,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(closeOverlay?: boolean) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "cancel(closeOverlay?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
@@ -713,6 +903,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(closeOverlay?: boolean) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "confirm(closeOverlay?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Confirms the selected datetime value, updates the\n`value` property, and optionally closes the popover\nor modal that the datetime was presented in.",
@@ -724,6 +930,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(startDate?: string) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "reset(startDate?: string) => Promise<void>",
       "parameters": [],
       "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
@@ -735,6 +957,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the datetime loses focus.",
@@ -744,6 +971,11 @@
       "event": "ionCancel",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the datetime selection was cancelled.",
@@ -753,6 +985,17 @@
       "event": "ionChange",
       "detail": "DatetimeChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "DatetimeChangeEventDetail",
+        "resolved": "DatetimeChangeEventDetail",
+        "references": {
+          "DatetimeChangeEventDetail": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value (selected date) has changed.",
@@ -762,6 +1005,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the datetime has focus.",
diff --git a/src/translate/.detection/api/fab-button.json b/src/translate/.detection/api/fab-button.json
index 2c2b1004e71..72df73bd444 100644
--- a/src/translate/.detection/api/fab-button.json
+++ b/src/translate/.detection/api/fab-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/fab-button/fab-button.tsx",
+  "filePath": "src/components/fab-button/fab-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-fab-button",
   "docs": "",
@@ -22,6 +22,11 @@
     {
       "name": "activated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "activated",
       "reflectToAttr": false,
@@ -39,6 +44,11 @@
     {
       "name": "closeIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "close-icon",
       "reflectToAttr": false,
@@ -56,6 +66,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -111,6 +132,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -128,6 +154,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -147,6 +178,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -187,6 +223,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -206,6 +247,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -224,6 +276,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -250,6 +313,11 @@
     {
       "name": "show",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show",
       "reflectToAttr": false,
@@ -267,6 +335,11 @@
     {
       "name": "size",
       "type": "\"small\" | undefined",
+      "complexType": {
+        "original": "'small'",
+        "resolved": "\"small\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
@@ -287,6 +360,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -306,6 +384,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -323,6 +406,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -353,6 +441,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button loses focus.",
@@ -362,6 +455,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button has focus.",
diff --git a/src/translate/.detection/api/fab-list.json b/src/translate/.detection/api/fab-list.json
index 4ea7b3ca927..07f04093695 100644
--- a/src/translate/.detection/api/fab-list.json
+++ b/src/translate/.detection/api/fab-list.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/fab-list/fab-list.tsx",
+  "filePath": "src/components/fab-list/fab-list.tsx",
   "encapsulation": "shadow",
   "tag": "ion-fab-list",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "activated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "activated",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "side",
       "type": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'top' | 'bottom'",
+        "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/fab.json b/src/translate/.detection/api/fab.json
index 0965f070745..f96f62047d7 100644
--- a/src/translate/.detection/api/fab.json
+++ b/src/translate/.detection/api/fab.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/fab/fab.tsx",
+  "filePath": "src/components/fab/fab.tsx",
   "encapsulation": "shadow",
   "tag": "ion-fab",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "activated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "activated",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "edge",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "edge",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "horizontal",
       "type": "\"center\" | \"end\" | \"start\" | undefined",
+      "complexType": {
+        "original": "'start' | 'end' | 'center'",
+        "resolved": "\"center\" | \"end\" | \"start\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "horizontal",
       "reflectToAttr": false,
@@ -71,6 +86,11 @@
     {
       "name": "vertical",
       "type": "\"bottom\" | \"center\" | \"top\" | undefined",
+      "complexType": {
+        "original": "'top' | 'bottom' | 'center'",
+        "resolved": "\"bottom\" | \"center\" | \"top\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "vertical",
       "reflectToAttr": false,
@@ -104,6 +124,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "close() => Promise<void>",
       "parameters": [],
       "docs": "Close an active FAB list container.",
diff --git a/src/translate/.detection/api/footer.json b/src/translate/.detection/api/footer.json
index 4cf036de3a6..11e42f5d827 100644
--- a/src/translate/.detection/api/footer.json
+++ b/src/translate/.detection/api/footer.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/footer/footer.tsx",
+  "filePath": "src/components/footer/footer.tsx",
   "encapsulation": "none",
   "tag": "ion-footer",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "collapse",
       "type": "\"fade\" | undefined",
+      "complexType": {
+        "original": "'fade'",
+        "resolved": "\"fade\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "collapse",
       "reflectToAttr": false,
@@ -55,6 +60,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/grid.json b/src/translate/.detection/api/grid.json
index 08da4cf0fb9..637a537eed0 100644
--- a/src/translate/.detection/api/grid.json
+++ b/src/translate/.detection/api/grid.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/grid/grid.tsx",
+  "filePath": "src/components/grid/grid.tsx",
   "encapsulation": "shadow",
   "tag": "ion-grid",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "fixed",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fixed",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/header.json b/src/translate/.detection/api/header.json
index 561937ce432..084ae1f3478 100644
--- a/src/translate/.detection/api/header.json
+++ b/src/translate/.detection/api/header.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/header/header.tsx",
+  "filePath": "src/components/header/header.tsx",
   "encapsulation": "none",
   "tag": "ion-header",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "collapse",
       "type": "\"condense\" | \"fade\" | undefined",
+      "complexType": {
+        "original": "'condense' | 'fade'",
+        "resolved": "\"condense\" | \"fade\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "collapse",
       "reflectToAttr": false,
@@ -59,6 +64,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/img.json b/src/translate/.detection/api/img.json
index 231648aa1ea..a049bd4587c 100644
--- a/src/translate/.detection/api/img.json
+++ b/src/translate/.detection/api/img.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/img/img.tsx",
+  "filePath": "src/components/img/img.tsx",
   "encapsulation": "shadow",
   "tag": "ion-img",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "alt",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "alt",
       "reflectToAttr": false,
@@ -33,6 +38,11 @@
     {
       "name": "src",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "src",
       "reflectToAttr": false,
@@ -56,6 +66,11 @@
       "event": "ionError",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the img fails to load",
@@ -65,6 +80,11 @@
       "event": "ionImgDidLoad",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the image has finished loading",
@@ -74,6 +94,11 @@
       "event": "ionImgWillLoad",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the img src has been set",
diff --git a/src/translate/.detection/api/infinite-scroll-content.json b/src/translate/.detection/api/infinite-scroll-content.json
index 4da189bafce..cce32d296ef 100644
--- a/src/translate/.detection/api/infinite-scroll-content.json
+++ b/src/translate/.detection/api/infinite-scroll-content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/infinite-scroll-content/infinite-scroll-content.tsx",
+  "filePath": "src/components/infinite-scroll-content/infinite-scroll-content.tsx",
   "encapsulation": "none",
   "tag": "ion-infinite-scroll-content",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "loadingSpinner",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | null",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "loading-spinner",
       "reflectToAttr": false,
@@ -64,6 +75,17 @@
     {
       "name": "loadingText",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "loading-text",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/infinite-scroll.json b/src/translate/.detection/api/infinite-scroll.json
index d807a7da32c..0b339009e47 100644
--- a/src/translate/.detection/api/infinite-scroll.json
+++ b/src/translate/.detection/api/infinite-scroll.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/infinite-scroll/infinite-scroll.tsx",
+  "filePath": "src/components/infinite-scroll/infinite-scroll.tsx",
   "encapsulation": "none",
   "tag": "ion-infinite-scroll",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "position",
       "type": "\"bottom\" | \"top\"",
+      "complexType": {
+        "original": "'top' | 'bottom'",
+        "resolved": "\"bottom\" | \"top\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "position",
       "reflectToAttr": false,
@@ -48,6 +58,11 @@
     {
       "name": "threshold",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "threshold",
       "reflectToAttr": false,
@@ -70,6 +85,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "complete() => Promise<void>",
       "parameters": [],
       "docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.",
@@ -81,6 +107,11 @@
       "event": "ionInfinite",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the scroll reaches\nthe threshold distance. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.",
diff --git a/src/translate/.detection/api/input.json b/src/translate/.detection/api/input.json
index 69e165cdcfc..c133859c18b 100644
--- a/src/translate/.detection/api/input.json
+++ b/src/translate/.detection/api/input.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/input/input.tsx",
+  "filePath": "src/components/input/input.tsx",
   "encapsulation": "scoped",
   "tag": "ion-input",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "accept",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "accept",
       "reflectToAttr": false,
@@ -42,6 +47,11 @@
     {
       "name": "autocapitalize",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocapitalize",
       "reflectToAttr": false,
@@ -59,6 +69,17 @@
     {
       "name": "autocomplete",
       "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+      "complexType": {
+        "original": "AutocompleteTypes",
+        "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+        "references": {
+          "AutocompleteTypes": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AutocompleteTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -289,6 +310,11 @@
     {
       "name": "autocorrect",
       "type": "\"off\" | \"on\"",
+      "complexType": {
+        "original": "'on' | 'off'",
+        "resolved": "\"off\" | \"on\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocorrect",
       "reflectToAttr": false,
@@ -311,6 +337,11 @@
     {
       "name": "autofocus",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autofocus",
       "reflectToAttr": false,
@@ -328,6 +359,11 @@
     {
       "name": "clearInput",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-input",
       "reflectToAttr": false,
@@ -345,6 +381,11 @@
     {
       "name": "clearOnEdit",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-on-edit",
       "reflectToAttr": false,
@@ -364,6 +405,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -419,6 +471,11 @@
     {
       "name": "counter",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "counter",
       "reflectToAttr": false,
@@ -436,6 +493,11 @@
     {
       "name": "counterFormatter",
       "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "complexType": {
+        "original": "(inputLength: number, maxLength: number) => string",
+        "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
@@ -454,6 +516,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -473,6 +540,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -490,6 +562,11 @@
     {
       "name": "enterkeyhint",
       "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+      "complexType": {
+        "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enterkeyhint",
       "reflectToAttr": false,
@@ -534,6 +611,11 @@
     {
       "name": "errorText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "error-text",
       "reflectToAttr": false,
@@ -553,6 +635,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -577,6 +664,11 @@
     {
       "name": "helperText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "helper-text",
       "reflectToAttr": false,
@@ -596,6 +688,11 @@
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+      "complexType": {
+        "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+        "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inputmode",
       "reflectToAttr": false,
@@ -644,6 +741,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -663,6 +765,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -697,6 +804,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -716,6 +828,11 @@
     {
       "name": "max",
       "type": "number | string | undefined",
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max",
       "reflectToAttr": false,
@@ -738,6 +855,11 @@
     {
       "name": "maxlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "maxlength",
       "reflectToAttr": false,
@@ -757,6 +879,11 @@
     {
       "name": "min",
       "type": "number | string | undefined",
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "min",
       "reflectToAttr": false,
@@ -779,6 +906,11 @@
     {
       "name": "minlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "minlength",
       "reflectToAttr": false,
@@ -819,6 +951,11 @@
     {
       "name": "multiple",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -838,6 +975,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -855,6 +997,11 @@
     {
       "name": "pattern",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pattern",
       "reflectToAttr": false,
@@ -874,6 +1021,11 @@
     {
       "name": "placeholder",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -893,6 +1045,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -910,6 +1067,11 @@
     {
       "name": "required",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "required",
       "reflectToAttr": false,
@@ -927,6 +1089,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -947,10 +1114,15 @@
     {
       "name": "size",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
-      "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
+      "docs": "",
       "docsTags": [],
       "values": [
         {
@@ -966,6 +1138,11 @@
     {
       "name": "spellcheck",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "spellcheck",
       "reflectToAttr": false,
@@ -983,6 +1160,11 @@
     {
       "name": "step",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "step",
       "reflectToAttr": false,
@@ -1002,6 +1184,17 @@
     {
       "name": "type",
       "type": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+      "complexType": {
+        "original": "TextFieldTypes",
+        "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+        "references": {
+          "TextFieldTypes": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::TextFieldTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -1064,6 +1257,11 @@
     {
       "name": "value",
       "type": "null | number | string | undefined",
+      "complexType": {
+        "original": "string | number | null",
+        "resolved": "null | number | string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -1095,6 +1293,21 @@
         "type": "Promise<HTMLInputElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLInputElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLInputElement": {
+            "location": "global",
+            "id": "global::HTMLInputElement"
+          }
+        },
+        "return": "Promise<HTMLInputElement>"
+      },
       "signature": "getInputElement() => Promise<HTMLInputElement>",
       "parameters": [],
       "docs": "Returns the native `<input>` element used under the hood.",
@@ -1106,6 +1319,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
       "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
@@ -1117,6 +1341,16 @@
       "event": "ionBlur",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input loses focus.",
@@ -1126,6 +1360,17 @@
       "event": "ionChange",
       "detail": "InputChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "InputChangeEventDetail",
+        "resolved": "InputChangeEventDetail",
+        "references": {
+          "InputChangeEventDetail": {
+            "location": "import",
+            "path": "./input-interface",
+            "id": "src/components/input/input-interface.ts::InputChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired when the user modifies the input's value.\nUnlike the `ionInput` event, the `ionChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
@@ -1135,6 +1380,16 @@
       "event": "ionFocus",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input has focus.",
@@ -1144,6 +1399,17 @@
       "event": "ionInput",
       "detail": "InputInputEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "InputInputEventDetail",
+        "resolved": "InputInputEventDetail",
+        "references": {
+          "InputInputEventDetail": {
+            "location": "import",
+            "path": "./input-interface",
+            "id": "src/components/input/input-interface.ts::InputInputEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionInput` event is fired each time the user modifies the input's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
diff --git a/src/translate/.detection/api/item-divider.json b/src/translate/.detection/api/item-divider.json
index b99ff7fe930..7eec8a6c01f 100644
--- a/src/translate/.detection/api/item-divider.json
+++ b/src/translate/.detection/api/item-divider.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-divider/item-divider.tsx",
+  "filePath": "src/components/item-divider/item-divider.tsx",
   "encapsulation": "shadow",
   "tag": "ion-item-divider",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -102,6 +113,11 @@
     {
       "name": "sticky",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "sticky",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/item-group.json b/src/translate/.detection/api/item-group.json
index c637ee7230c..50273726830 100644
--- a/src/translate/.detection/api/item-group.json
+++ b/src/translate/.detection/api/item-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-group/item-group.tsx",
+  "filePath": "src/components/item-group/item-group.tsx",
   "encapsulation": "none",
   "tag": "ion-item-group",
   "docs": "",
diff --git a/src/translate/.detection/api/item-option.json b/src/translate/.detection/api/item-option.json
index beddef26aa8..8acbc24b7c9 100644
--- a/src/translate/.detection/api/item-option.json
+++ b/src/translate/.detection/api/item-option.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-option/item-option.tsx",
+  "filePath": "src/components/item-option/item-option.tsx",
   "encapsulation": "shadow",
   "tag": "ion-item-option",
   "docs": "",
@@ -42,6 +42,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -97,6 +108,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -114,6 +130,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -133,6 +154,11 @@
     {
       "name": "expandable",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expandable",
       "reflectToAttr": false,
@@ -150,6 +176,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -190,6 +221,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -209,6 +245,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -228,6 +269,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/item-options.json b/src/translate/.detection/api/item-options.json
index bfeec2343fa..838621f34ce 100644
--- a/src/translate/.detection/api/item-options.json
+++ b/src/translate/.detection/api/item-options.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-options/item-options.tsx",
+  "filePath": "src/components/item-options/item-options.tsx",
   "encapsulation": "none",
   "tag": "ion-item-options",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "side",
       "type": "\"end\" | \"start\"",
+      "complexType": {
+        "original": "Side",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "Side": {
+            "location": "import",
+            "path": "../menu/menu-interface",
+            "id": "src/components/menu/menu-interface.ts::Side"
+          }
+        }
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
@@ -35,6 +46,11 @@
       "event": "ionSwipe",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the item has been fully swiped.",
diff --git a/src/translate/.detection/api/item-sliding.json b/src/translate/.detection/api/item-sliding.json
index f0fd18a022f..73fbd83224c 100644
--- a/src/translate/.detection/api/item-sliding.json
+++ b/src/translate/.detection/api/item-sliding.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-sliding/item-sliding.tsx",
+  "filePath": "src/components/item-sliding/item-sliding.tsx",
   "encapsulation": "none",
   "tag": "ion-item-sliding",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -31,6 +36,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "close() => Promise<void>",
       "parameters": [],
       "docs": "Close the sliding item. Items can also be closed from the [List](./list).",
@@ -42,6 +58,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "closeOpened() => Promise<boolean>",
       "parameters": [],
       "docs": "Close all of the sliding items in the list. Items can also be closed from the [List](./list).",
@@ -53,6 +80,17 @@
         "type": "Promise<number>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number>"
+      },
       "signature": "getOpenAmount() => Promise<number>",
       "parameters": [],
       "docs": "Get the amount the item is open in pixels.",
@@ -64,6 +102,17 @@
         "type": "Promise<number>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number>"
+      },
       "signature": "getSlidingRatio() => Promise<number>",
       "parameters": [],
       "docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.",
@@ -75,6 +124,32 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(side: Side | undefined) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+              }
+            ],
+            "text": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "Side": {
+            "location": "import",
+            "path": "../menu/menu-interface",
+            "id": "src/components/menu/menu-interface.ts::Side"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "open(side: Side | undefined) => Promise<void>",
       "parameters": [],
       "docs": "Open the sliding item.",
@@ -91,6 +166,11 @@
       "event": "ionDrag",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the sliding position changes.",
diff --git a/src/translate/.detection/api/item.json b/src/translate/.detection/api/item.json
index 1e0df2e5ac2..f0d8f137056 100644
--- a/src/translate/.detection/api/item.json
+++ b/src/translate/.detection/api/item.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item/item.tsx",
+  "filePath": "src/components/item/item.tsx",
   "encapsulation": "shadow",
   "tag": "ion-item",
   "docs": "",
@@ -42,6 +42,11 @@
     {
       "name": "button",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "button",
       "reflectToAttr": false,
@@ -59,6 +64,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -114,6 +130,11 @@
     {
       "name": "counter",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "counter",
       "reflectToAttr": false,
@@ -137,6 +158,17 @@
     {
       "name": "counterFormatter",
       "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "complexType": {
+        "original": "CounterFormatter",
+        "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+        "references": {
+          "CounterFormatter": {
+            "location": "import",
+            "path": "./item-interface",
+            "id": "src/components/item/item-interface.ts::CounterFormatter"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
@@ -161,6 +193,11 @@
     {
       "name": "detail",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "detail",
       "reflectToAttr": false,
@@ -180,6 +217,11 @@
     {
       "name": "detailIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "detail-icon",
       "reflectToAttr": false,
@@ -197,6 +239,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -214,6 +261,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -233,6 +285,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -257,6 +314,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -276,6 +338,11 @@
     {
       "name": "lines",
       "type": "\"full\" | \"inset\" | \"none\" | undefined",
+      "complexType": {
+        "original": "'full' | 'inset' | 'none'",
+        "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "lines",
       "reflectToAttr": false,
@@ -325,6 +392,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -344,6 +416,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -362,6 +445,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -388,6 +482,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -408,6 +507,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -427,6 +531,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -564,22 +673,22 @@
     {
       "name": "--highlight-color-focused",
       "annotation": "prop",
-      "docs": "The color of the highlight on the item when focused"
+      "docs": "The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--highlight-color-invalid",
       "annotation": "prop",
-      "docs": "The color of the highlight on the item when invalid"
+      "docs": "The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--highlight-color-valid",
       "annotation": "prop",
-      "docs": "The color of the highlight on the item when valid"
+      "docs": "The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--highlight-height",
       "annotation": "prop",
-      "docs": "The height of the highlight on the item"
+      "docs": "The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--inner-border-width",
diff --git a/src/translate/.detection/api/label.json b/src/translate/.detection/api/label.json
index 9a83429e564..28e1f1d248c 100644
--- a/src/translate/.detection/api/label.json
+++ b/src/translate/.detection/api/label.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/label/label.tsx",
+  "filePath": "src/components/label/label.tsx",
   "encapsulation": "scoped",
   "tag": "ion-label",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +101,11 @@
     {
       "name": "position",
       "type": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
+      "complexType": {
+        "original": "'fixed' | 'stacked' | 'floating'",
+        "resolved": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "position",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/list-header.json b/src/translate/.detection/api/list-header.json
index fa37e4235cb..a83647ef984 100644
--- a/src/translate/.detection/api/list-header.json
+++ b/src/translate/.detection/api/list-header.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/list-header/list-header.tsx",
+  "filePath": "src/components/list-header/list-header.tsx",
   "encapsulation": "shadow",
   "tag": "ion-list-header",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "lines",
       "type": "\"full\" | \"inset\" | \"none\" | undefined",
+      "complexType": {
+        "original": "'full' | 'inset' | 'none'",
+        "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "lines",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/list.json b/src/translate/.detection/api/list.json
index 9150c3a26d9..b1743d85490 100644
--- a/src/translate/.detection/api/list.json
+++ b/src/translate/.detection/api/list.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/list/list.tsx",
+  "filePath": "src/components/list/list.tsx",
   "encapsulation": "none",
   "tag": "ion-list",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "inset",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inset",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "lines",
       "type": "\"full\" | \"inset\" | \"none\" | undefined",
+      "complexType": {
+        "original": "'full' | 'inset' | 'none'",
+        "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "lines",
       "reflectToAttr": false,
@@ -85,6 +95,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "closeSlidingItems() => Promise<boolean>",
       "parameters": [],
       "docs": "If `ion-item-sliding` are used inside the list, this method closes\nany open sliding item.\n\nReturns `true` if an actual `ion-item-sliding` is closed.",
diff --git a/src/translate/.detection/api/loading.json b/src/translate/.detection/api/loading.json
index ae9d1cbc195..172a2814490 100644
--- a/src/translate/.detection/api/loading.json
+++ b/src/translate/.detection/api/loading.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/loading/loading.tsx",
+  "filePath": "src/components/loading/loading.tsx",
   "encapsulation": "scoped",
   "tag": "ion-loading",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -70,6 +85,11 @@
     {
       "name": "duration",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -87,6 +107,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the loading indicator is presented.",
@@ -105,6 +136,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the loader.",
@@ -123,6 +159,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -140,6 +181,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -157,6 +203,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the loading indicator is dismissed.",
@@ -175,6 +232,17 @@
     {
       "name": "message",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
@@ -218,6 +286,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -235,6 +308,17 @@
     {
       "name": "spinner",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | null",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "spinner",
       "reflectToAttr": false,
@@ -290,6 +374,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -307,6 +396,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -331,6 +425,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the loading overlay after it has been presented.",
@@ -351,6 +475,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the loading did dismiss.",
@@ -362,6 +506,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the loading will dismiss.",
@@ -373,6 +537,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the loading overlay after it has been created.",
@@ -384,6 +559,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading indicator has dismissed.\nShorthand for ionLoadingDidDismiss.",
@@ -393,6 +579,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading indicator has presented.\nShorthand for ionLoadingWillDismiss.",
@@ -402,6 +593,17 @@
       "event": "ionLoadingDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading has dismissed.",
@@ -411,6 +613,11 @@
       "event": "ionLoadingDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading has presented.",
@@ -420,6 +627,17 @@
       "event": "ionLoadingWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading has dismissed.",
@@ -429,6 +647,11 @@
       "event": "ionLoadingWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading has presented.",
@@ -438,6 +661,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading indicator has dismissed.\nShorthand for ionLoadingWillDismiss.",
@@ -447,6 +681,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading indicator has presented.\nShorthand for ionLoadingWillPresent.",
diff --git a/src/translate/.detection/api/menu-button.json b/src/translate/.detection/api/menu-button.json
index e3b7058f42a..bbe72fb433a 100644
--- a/src/translate/.detection/api/menu-button.json
+++ b/src/translate/.detection/api/menu-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/menu-button/menu-button.tsx",
+  "filePath": "src/components/menu-button/menu-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-menu-button",
   "docs": "",
@@ -22,6 +22,11 @@
     {
       "name": "autoHide",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "auto-hide",
       "reflectToAttr": false,
@@ -39,6 +44,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -94,6 +110,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -111,6 +132,11 @@
     {
       "name": "menu",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "menu",
       "reflectToAttr": false,
@@ -151,6 +177,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/menu-toggle.json b/src/translate/.detection/api/menu-toggle.json
index 7c3163bccc3..98a5e5fe675 100644
--- a/src/translate/.detection/api/menu-toggle.json
+++ b/src/translate/.detection/api/menu-toggle.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/menu-toggle/menu-toggle.tsx",
+  "filePath": "src/components/menu-toggle/menu-toggle.tsx",
   "encapsulation": "shadow",
   "tag": "ion-menu-toggle",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "autoHide",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "auto-hide",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "menu",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "menu",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/menu.json b/src/translate/.detection/api/menu.json
index 0c0a58fcde1..7a9aa0778c8 100644
--- a/src/translate/.detection/api/menu.json
+++ b/src/translate/.detection/api/menu.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/menu/menu.tsx",
+  "filePath": "src/components/menu/menu.tsx",
   "encapsulation": "shadow",
   "tag": "ion-menu",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "contentId",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "content-id",
       "reflectToAttr": true,
@@ -37,6 +42,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -54,6 +64,11 @@
     {
       "name": "maxEdgeStart",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max-edge-start",
       "reflectToAttr": false,
@@ -71,6 +86,11 @@
     {
       "name": "menuId",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "menu-id",
       "reflectToAttr": true,
@@ -90,6 +110,17 @@
     {
       "name": "side",
       "type": "\"end\" | \"start\"",
+      "complexType": {
+        "original": "Side",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "Side": {
+            "location": "import",
+            "path": "./menu-interface",
+            "id": "src/components/menu/menu-interface.ts::Side"
+          }
+        }
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": true,
@@ -112,6 +143,11 @@
     {
       "name": "swipeGesture",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "swipe-gesture",
       "reflectToAttr": false,
@@ -129,6 +165,11 @@
     {
       "name": "type",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "type",
       "reflectToAttr": false,
@@ -153,6 +194,22 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "close(animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.",
@@ -164,6 +221,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "isActive() => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.",
@@ -175,6 +243,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "isOpen() => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` is the menu is open.",
@@ -186,6 +265,22 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "open(animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.",
@@ -197,6 +292,26 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          },
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.",
@@ -208,6 +323,22 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "toggle(animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.",
@@ -219,6 +350,11 @@
       "event": "ionDidClose",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is closed.",
@@ -228,6 +364,11 @@
       "event": "ionDidOpen",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is open.",
@@ -237,6 +378,11 @@
       "event": "ionWillClose",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is about to be closed.",
@@ -246,6 +392,11 @@
       "event": "ionWillOpen",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is about to be opened.",
diff --git a/src/translate/.detection/api/modal.json b/src/translate/.detection/api/modal.json
index 85cbec53d88..7f2b2169925 100644
--- a/src/translate/.detection/api/modal.json
+++ b/src/translate/.detection/api/modal.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/modal/modal.tsx",
+  "filePath": "src/components/modal/modal.tsx",
   "encapsulation": "shadow",
   "tag": "ion-modal",
   "docs": "",
@@ -30,6 +30,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -47,6 +52,11 @@
     {
       "name": "backdropBreakpoint",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-breakpoint",
       "reflectToAttr": false,
@@ -64,6 +74,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -81,6 +96,11 @@
     {
       "name": "breakpoints",
       "type": "number[] | undefined",
+      "complexType": {
+        "original": "number[]",
+        "resolved": "number[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]",
@@ -99,6 +119,16 @@
     {
       "name": "canDismiss",
       "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
+      "complexType": {
+        "original": "boolean | ((data?: any, role?: string) => Promise<boolean>)",
+        "resolved": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        }
+      },
       "mutable": false,
       "attr": "can-dismiss",
       "reflectToAttr": false,
@@ -122,6 +152,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the modal is presented.",
@@ -140,6 +181,11 @@
     {
       "name": "handle",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "handle",
       "reflectToAttr": false,
@@ -159,6 +205,17 @@
     {
       "name": "handleBehavior",
       "type": "\"cycle\" | \"none\" | undefined",
+      "complexType": {
+        "original": "ModalHandleBehavior",
+        "resolved": "\"cycle\" | \"none\" | undefined",
+        "references": {
+          "ModalHandleBehavior": {
+            "location": "import",
+            "path": "./modal-interface",
+            "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior"
+          }
+        }
+      },
       "mutable": false,
       "attr": "handle-behavior",
       "reflectToAttr": false,
@@ -184,6 +241,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the modal.",
@@ -202,6 +264,11 @@
     {
       "name": "initialBreakpoint",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "initial-breakpoint",
       "reflectToAttr": false,
@@ -221,6 +288,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -238,6 +310,11 @@
     {
       "name": "keepContentsMounted",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keep-contents-mounted",
       "reflectToAttr": false,
@@ -255,6 +332,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -272,6 +354,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the modal is dismissed.",
@@ -311,6 +404,16 @@
     {
       "name": "presentingElement",
       "type": "HTMLElement | undefined",
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement | undefined",
+        "references": {
+          "HTMLElement": {
+            "location": "global",
+            "id": "global::HTMLElement"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.",
@@ -329,6 +432,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -346,6 +454,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -370,6 +483,40 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+              }
+            ],
+            "text": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ModalDismissOptions": {
+            "location": "global",
+            "id": "global::ModalDismissOptions"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the modal overlay after it has been presented.",
@@ -390,6 +537,17 @@
         "type": "Promise<number | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number | undefined>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number | undefined>"
+      },
       "signature": "getCurrentBreakpoint() => Promise<number | undefined>",
       "parameters": [],
       "docs": "Returns the current breakpoint of a sheet style modal",
@@ -401,6 +559,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the modal did dismiss.",
@@ -412,6 +590,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the modal will dismiss.",
@@ -423,6 +621,21 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ModalPresentOptions": {
+            "location": "global",
+            "id": "global::ModalPresentOptions"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the modal overlay after it has been created.",
@@ -434,6 +647,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(breakpoint: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setCurrentBreakpoint(breakpoint: number) => Promise<void>",
       "parameters": [],
       "docs": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
@@ -445,6 +674,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.",
@@ -454,6 +694,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.",
@@ -463,6 +708,17 @@
       "event": "ionBreakpointDidChange",
       "detail": "ModalBreakpointChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ModalBreakpointChangeEventDetail",
+        "resolved": "ModalBreakpointChangeEventDetail",
+        "references": {
+          "ModalBreakpointChangeEventDetail": {
+            "location": "import",
+            "path": "./modal-interface",
+            "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal breakpoint has changed.",
@@ -472,6 +728,17 @@
       "event": "ionModalDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has dismissed.",
@@ -481,6 +748,11 @@
       "event": "ionModalDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has presented.",
@@ -490,6 +762,17 @@
       "event": "ionModalWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has dismissed.",
@@ -499,6 +782,11 @@
       "event": "ionModalWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has presented.",
@@ -508,6 +796,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.",
@@ -517,6 +816,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.",
diff --git a/src/translate/.detection/api/nav-link.json b/src/translate/.detection/api/nav-link.json
index 21f92c41583..1d3ddb81387 100644
--- a/src/translate/.detection/api/nav-link.json
+++ b/src/translate/.detection/api/nav-link.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/nav-link/nav-link.tsx",
+  "filePath": "src/components/nav-link/nav-link.tsx",
   "encapsulation": "none",
   "tag": "ion-nav-link",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "component",
       "type": "Function | HTMLElement | ViewController | null | string | undefined",
+      "complexType": {
+        "original": "NavComponent",
+        "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
+        "references": {
+          "NavComponent": {
+            "location": "import",
+            "path": "../nav/nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          }
+        }
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -40,6 +51,17 @@
     {
       "name": "componentProps",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "ComponentProps",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.",
@@ -58,6 +80,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The transition animation when navigating to another page.",
@@ -76,6 +109,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/nav.json b/src/translate/.detection/api/nav.json
index 5f63d8b1ecc..b880be33372 100644
--- a/src/translate/.detection/api/nav.json
+++ b/src/translate/.detection/api/nav.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/nav/nav.tsx",
+  "filePath": "src/components/nav/nav.tsx",
   "encapsulation": "shadow",
   "tag": "ion-nav",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -26,6 +31,17 @@
     {
       "name": "animation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions.",
@@ -44,6 +60,17 @@
     {
       "name": "root",
       "type": "Function | HTMLElement | ViewController | null | string | undefined",
+      "complexType": {
+        "original": "NavComponent",
+        "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
+        "references": {
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          }
+        }
+      },
       "mutable": false,
       "attr": "root",
       "reflectToAttr": false,
@@ -75,6 +102,17 @@
     {
       "name": "rootParams",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "ComponentProps",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Any parameters for the root component",
@@ -93,6 +131,11 @@
     {
       "name": "swipeGesture",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "swipe-gesture",
       "reflectToAttr": false,
@@ -117,6 +160,32 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(view?: ViewController) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "view The view to check."
+              }
+            ],
+            "text": "The view to check."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` if the current view can go back.",
@@ -133,6 +202,22 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<ViewController | undefined>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<ViewController | undefined>"
+      },
       "signature": "getActive() => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the active view.",
@@ -144,6 +229,32 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(index: number) => Promise<ViewController | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "index The index of the view."
+              }
+            ],
+            "text": "The index of the view."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<ViewController | undefined>"
+      },
       "signature": "getByIndex(index: number) => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the view at the specified index.",
@@ -160,6 +271,32 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(view?: ViewController) => Promise<ViewController | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "view The view to get."
+              }
+            ],
+            "text": "The view to get."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<ViewController | undefined>"
+      },
       "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the previous view.",
@@ -176,6 +313,87 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "insertIndex The index to insert the component at in the stack."
+              }
+            ],
+            "text": "The index to insert the component at in the stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "component The component to insert into the navigation stack."
+              }
+            ],
+            "text": "The component to insert into the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "componentProps Any properties of the component."
+              }
+            ],
+            "text": "Any properties of the component."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          },
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
@@ -208,6 +426,74 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "insertIndex The index to insert the components at in the stack."
+              }
+            ],
+            "text": "The index to insert the components at in the stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "insertComponents The components to insert into the navigation stack."
+              }
+            ],
+            "text": "The components to insert into the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "NavComponentWithProps": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
@@ -236,6 +522,46 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
@@ -256,6 +582,65 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "indexOrViewCtrl The index or view controller to pop to."
+              }
+            ],
+            "text": "The index or view controller to pop to."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          },
+          "TransitionInstruction": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionInstruction"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop to a specific index in the navigation stack.",
@@ -280,6 +665,46 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate back to the root of the stack, no matter how far back that is.",
@@ -300,6 +725,78 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "component The component to push onto the navigation stack."
+              }
+            ],
+            "text": "The component to push onto the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "componentProps Any properties of the component."
+              }
+            ],
+            "text": "Any properties of the component."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          },
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
@@ -328,6 +825,64 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "startIndex The number to begin removal at."
+              }
+            ],
+            "text": "The number to begin removal at."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "removeCount The number of components to remove."
+              }
+            ],
+            "text": "The number of components to remove."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Removes a component from the navigation stack at the specified index.",
@@ -356,6 +911,65 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "views The list of views to set as the navigation stack."
+              }
+            ],
+            "text": "The list of views to set as the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "NavComponentWithProps": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
@@ -380,6 +994,78 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "component The component to set as the root of the navigation stack."
+              }
+            ],
+            "text": "The component to set as the root of the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "componentProps Any properties of the component."
+              }
+            ],
+            "text": "Any properties of the component."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          },
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the root for the current navigation stack to a component.",
@@ -408,6 +1094,11 @@
       "event": "ionNavDidChange",
       "detail": "void",
       "bubbles": false,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event fired when the nav has changed components",
@@ -417,6 +1108,11 @@
       "event": "ionNavWillChange",
       "detail": "void",
       "bubbles": false,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event fired when the nav will change components",
diff --git a/src/translate/.detection/api/note.json b/src/translate/.detection/api/note.json
index 2a7e9290c9a..61c1a42dd93 100644
--- a/src/translate/.detection/api/note.json
+++ b/src/translate/.detection/api/note.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/note/note.tsx",
+  "filePath": "src/components/note/note.tsx",
   "encapsulation": "shadow",
   "tag": "ion-note",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/.detection/api/picker.json b/src/translate/.detection/api/picker.json
index fa9a4737181..e8c6915cba7 100644
--- a/src/translate/.detection/api/picker.json
+++ b/src/translate/.detection/api/picker.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/picker/picker.tsx",
+  "filePath": "src/components/picker/picker.tsx",
   "encapsulation": "scoped",
   "tag": "ion-picker",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
     {
       "name": "buttons",
       "type": "PickerButton[]",
+      "complexType": {
+        "original": "PickerButton[]",
+        "resolved": "PickerButton[]",
+        "references": {
+          "PickerButton": {
+            "location": "import",
+            "path": "./picker-interface",
+            "id": "src/components/picker/picker-interface.ts::PickerButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Array of buttons to be displayed at the top of the picker.",
@@ -64,6 +85,17 @@
     {
       "name": "columns",
       "type": "PickerColumn[]",
+      "complexType": {
+        "original": "PickerColumn[]",
+        "resolved": "PickerColumn[]",
+        "references": {
+          "PickerColumn": {
+            "location": "import",
+            "path": "./picker-interface",
+            "id": "src/components/picker/picker-interface.ts::PickerColumn"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Array of columns to be displayed in the picker.",
@@ -80,6 +112,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -102,6 +139,11 @@
     {
       "name": "duration",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -119,6 +161,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the picker is presented.",
@@ -137,6 +190,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the picker.",
@@ -155,6 +213,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -172,6 +235,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -189,6 +257,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the picker is dismissed.",
@@ -228,6 +307,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -245,6 +329,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -269,6 +358,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the picker overlay after it has been presented.",
@@ -289,6 +408,32 @@
         "type": "Promise<PickerColumn | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(name: string) => Promise<PickerColumn | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "name The name of the column."
+              }
+            ],
+            "text": "The name of the column."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "PickerColumn": {
+            "location": "import",
+            "path": "./picker-interface",
+            "id": "src/components/picker/picker-interface.ts::PickerColumn"
+          }
+        },
+        "return": "Promise<PickerColumn | undefined>"
+      },
       "signature": "getColumn(name: string) => Promise<PickerColumn | undefined>",
       "parameters": [],
       "docs": "Get the column that matches the specified name.",
@@ -305,6 +450,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the picker did dismiss.",
@@ -316,6 +481,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the picker will dismiss.",
@@ -327,6 +512,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the picker overlay after it has been created.",
@@ -338,6 +534,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
@@ -347,6 +554,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
@@ -356,6 +568,17 @@
       "event": "ionPickerDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has dismissed.",
@@ -365,6 +588,11 @@
       "event": "ionPickerDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has presented.",
@@ -374,6 +602,17 @@
       "event": "ionPickerWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has dismissed.",
@@ -383,6 +622,11 @@
       "event": "ionPickerWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has presented.",
@@ -392,6 +636,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
@@ -401,6 +656,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
diff --git a/src/translate/.detection/api/popover.json b/src/translate/.detection/api/popover.json
index 9210abb17ad..dd79655fca7 100644
--- a/src/translate/.detection/api/popover.json
+++ b/src/translate/.detection/api/popover.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/popover/popover.tsx",
+  "filePath": "src/components/popover/popover.tsx",
   "encapsulation": "shadow",
   "tag": "ion-popover",
   "docs": "",
@@ -30,6 +30,17 @@
     {
       "name": "alignment",
       "type": "\"center\" | \"end\" | \"start\" | undefined",
+      "complexType": {
+        "original": "PositionAlign",
+        "resolved": "\"center\" | \"end\" | \"start\" | undefined",
+        "references": {
+          "PositionAlign": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PositionAlign"
+          }
+        }
+      },
       "mutable": true,
       "attr": "alignment",
       "reflectToAttr": false,
@@ -58,6 +69,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -75,6 +91,11 @@
     {
       "name": "arrow",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "arrow",
       "reflectToAttr": false,
@@ -92,6 +113,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -109,6 +135,17 @@
     {
       "name": "component",
       "type": "Function | HTMLElement | null | string | undefined",
+      "complexType": {
+        "original": "ComponentRef",
+        "resolved": "Function | HTMLElement | null | string | undefined",
+        "references": {
+          "ComponentRef": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentRef"
+          }
+        }
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -137,6 +174,17 @@
     {
       "name": "componentProps",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "ComponentProps",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component.",
@@ -155,6 +203,11 @@
     {
       "name": "dismissOnSelect",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "dismiss-on-select",
       "reflectToAttr": false,
@@ -172,6 +225,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the popover is presented.",
@@ -190,6 +254,11 @@
     {
       "name": "event",
       "type": "any",
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "event",
       "reflectToAttr": false,
@@ -206,6 +275,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the popover.",
@@ -224,6 +298,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -241,6 +320,11 @@
     {
       "name": "keepContentsMounted",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keep-contents-mounted",
       "reflectToAttr": false,
@@ -258,6 +342,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -275,6 +364,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the popover is dismissed.",
@@ -314,6 +414,17 @@
     {
       "name": "reference",
       "type": "\"event\" | \"trigger\"",
+      "complexType": {
+        "original": "PositionReference",
+        "resolved": "\"event\" | \"trigger\"",
+        "references": {
+          "PositionReference": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PositionReference"
+          }
+        }
+      },
       "mutable": false,
       "attr": "reference",
       "reflectToAttr": false,
@@ -336,6 +447,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -353,6 +469,17 @@
     {
       "name": "side",
       "type": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
+      "complexType": {
+        "original": "PositionSide",
+        "resolved": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
+        "references": {
+          "PositionSide": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PositionSide"
+          }
+        }
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
@@ -391,10 +518,21 @@
     {
       "name": "size",
       "type": "\"auto\" | \"cover\"",
+      "complexType": {
+        "original": "PopoverSize",
+        "resolved": "\"auto\" | \"cover\"",
+        "references": {
+          "PopoverSize": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PopoverSize"
+          }
+        }
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
-      "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be determined by the content in\nthe popover.",
+      "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be set to a static default value.",
       "docsTags": [],
       "default": "'auto'",
       "values": [
@@ -413,6 +551,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -430,6 +573,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -449,6 +597,17 @@
     {
       "name": "triggerAction",
       "type": "\"click\" | \"context-menu\" | \"hover\"",
+      "complexType": {
+        "original": "TriggerAction",
+        "resolved": "\"click\" | \"context-menu\" | \"hover\"",
+        "references": {
+          "TriggerAction": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::TriggerAction"
+          }
+        }
+      },
       "mutable": false,
       "attr": "trigger-action",
       "reflectToAttr": false,
@@ -480,6 +639,49 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+              }
+            ],
+            "text": "The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+              }
+            ],
+            "text": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "PopoverDismissOptions": {
+            "location": "global",
+            "id": "global::PopoverDismissOptions"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the popover overlay after it has been presented.",
@@ -504,6 +706,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the popover did dismiss.",
@@ -515,6 +737,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the popover will dismiss.",
@@ -526,6 +768,42 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "MouseEvent": {
+            "location": "global",
+            "id": "global::MouseEvent"
+          },
+          "TouchEvent": {
+            "location": "global",
+            "id": "global::TouchEvent"
+          },
+          "PointerEvent": {
+            "location": "global",
+            "id": "global::PointerEvent"
+          },
+          "CustomEvent": {
+            "location": "global",
+            "id": "global::CustomEvent"
+          },
+          "PopoverPresentOptions": {
+            "location": "global",
+            "id": "global::PopoverPresentOptions"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
       "parameters": [],
       "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
@@ -537,6 +815,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has dismissed.\nShorthand for ionPopoverDidDismiss.",
@@ -546,6 +835,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has presented.\nShorthand for ionPopoverWillDismiss.",
@@ -555,6 +849,17 @@
       "event": "ionPopoverDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has dismissed.",
@@ -564,6 +869,11 @@
       "event": "ionPopoverDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has presented.",
@@ -573,6 +883,17 @@
       "event": "ionPopoverWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has dismissed.",
@@ -582,6 +903,11 @@
       "event": "ionPopoverWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has presented.",
@@ -591,6 +917,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.",
@@ -600,6 +937,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has presented.\nShorthand for ionPopoverWillPresent.",
diff --git a/src/translate/.detection/api/progress-bar.json b/src/translate/.detection/api/progress-bar.json
index fe50d036d53..57087c51dcf 100644
--- a/src/translate/.detection/api/progress-bar.json
+++ b/src/translate/.detection/api/progress-bar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/progress-bar/progress-bar.tsx",
+  "filePath": "src/components/progress-bar/progress-bar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-progress-bar",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "buffer",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "buffer",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -119,6 +135,11 @@
     {
       "name": "reversed",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "reversed",
       "reflectToAttr": false,
@@ -136,6 +157,11 @@
     {
       "name": "type",
       "type": "\"determinate\" | \"indeterminate\"",
+      "complexType": {
+        "original": "'determinate' | 'indeterminate'",
+        "resolved": "\"determinate\" | \"indeterminate\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -158,6 +184,11 @@
     {
       "name": "value",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/radio-group.json b/src/translate/.detection/api/radio-group.json
index 3994af56123..eadb96fdd5f 100644
--- a/src/translate/.detection/api/radio-group.json
+++ b/src/translate/.detection/api/radio-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/radio-group/radio-group.tsx",
+  "filePath": "src/components/radio-group/radio-group.tsx",
   "encapsulation": "none",
   "tag": "ion-radio-group",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "allowEmptySelection",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "allow-empty-selection",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -63,6 +78,17 @@
       "event": "ionChange",
       "detail": "RadioGroupChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "RadioGroupChangeEventDetail",
+        "resolved": "RadioGroupChangeEventDetail<any>",
+        "references": {
+          "RadioGroupChangeEventDetail": {
+            "location": "import",
+            "path": "./radio-group-interface",
+            "id": "src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value has changed.",
diff --git a/src/translate/.detection/api/radio.json b/src/translate/.detection/api/radio.json
index 1d5aa1430d9..4e8e80e43f8 100644
--- a/src/translate/.detection/api/radio.json
+++ b/src/translate/.detection/api/radio.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/radio/radio.tsx",
+  "filePath": "src/components/radio/radio.tsx",
   "encapsulation": "shadow",
   "tag": "ion-radio",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -81,6 +92,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -98,6 +114,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -124,6 +145,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -150,6 +176,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -190,6 +221,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -207,6 +243,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -227,6 +268,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the radio button loses focus.",
@@ -236,6 +282,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the radio button has focus.",
diff --git a/src/translate/.detection/api/range.json b/src/translate/.detection/api/range.json
index 6ad20a7202c..64becc9d4ef 100644
--- a/src/translate/.detection/api/range.json
+++ b/src/translate/.detection/api/range.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/range/range.tsx",
+  "filePath": "src/components/range/range.tsx",
   "encapsulation": "shadow",
   "tag": "ion-range",
   "docs": "",
@@ -50,6 +50,11 @@
     {
       "name": "activeBarStart",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "active-bar-start",
       "reflectToAttr": false,
@@ -69,6 +74,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -124,6 +140,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -143,6 +164,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -160,6 +186,11 @@
     {
       "name": "dualKnobs",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "dual-knobs",
       "reflectToAttr": false,
@@ -177,6 +208,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -196,6 +232,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -222,6 +263,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -241,6 +287,11 @@
     {
       "name": "max",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max",
       "reflectToAttr": false,
@@ -258,6 +309,11 @@
     {
       "name": "min",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "min",
       "reflectToAttr": false,
@@ -296,6 +352,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -313,6 +374,11 @@
     {
       "name": "pin",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pin",
       "reflectToAttr": false,
@@ -330,6 +396,17 @@
     {
       "name": "pinFormatter",
       "type": "(value: number) => string | number",
+      "complexType": {
+        "original": "PinFormatter",
+        "resolved": "(value: number) => string | number",
+        "references": {
+          "PinFormatter": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::PinFormatter"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.",
@@ -349,6 +426,11 @@
     {
       "name": "snaps",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "snaps",
       "reflectToAttr": false,
@@ -366,6 +448,11 @@
     {
       "name": "step",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "step",
       "reflectToAttr": false,
@@ -383,6 +470,11 @@
     {
       "name": "ticks",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "ticks",
       "reflectToAttr": false,
@@ -400,6 +492,17 @@
     {
       "name": "value",
       "type": "number | { lower: number; upper: number; }",
+      "complexType": {
+        "original": "RangeValue",
+        "resolved": "number | { lower: number; upper: number; }",
+        "references": {
+          "RangeValue": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeValue"
+          }
+        }
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -424,6 +527,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the range loses focus.",
@@ -433,6 +541,17 @@
       "event": "ionChange",
       "detail": "RangeChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeChangeEventDetail",
+        "resolved": "RangeChangeEventDetail",
+        "references": {
+          "RangeChangeEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
@@ -442,6 +561,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the range has focus.",
@@ -451,6 +575,17 @@
       "event": "ionInput",
       "detail": "RangeChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeChangeEventDetail",
+        "resolved": "RangeChangeEventDetail",
+        "references": {
+          "RangeChangeEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionInput` event is fired for `<ion-range>` elements when the value\nis modified. Unlike `ionChange`, `ionInput` is fired continuously\nwhile the user is dragging the knob.",
@@ -460,6 +595,17 @@
       "event": "ionKnobMoveEnd",
       "detail": "RangeKnobMoveEndEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeKnobMoveEndEventDetail",
+        "resolved": "RangeKnobMoveEndEventDetail",
+        "references": {
+          "RangeKnobMoveEndEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeKnobMoveEndEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user finishes moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
@@ -469,6 +615,17 @@
       "event": "ionKnobMoveStart",
       "detail": "RangeKnobMoveStartEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeKnobMoveStartEventDetail",
+        "resolved": "RangeKnobMoveStartEventDetail",
+        "references": {
+          "RangeKnobMoveStartEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeKnobMoveStartEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user starts moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
diff --git a/src/translate/.detection/api/refresher-content.json b/src/translate/.detection/api/refresher-content.json
index 89952a179f8..d34e795470c 100644
--- a/src/translate/.detection/api/refresher-content.json
+++ b/src/translate/.detection/api/refresher-content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/refresher-content/refresher-content.tsx",
+  "filePath": "src/components/refresher-content/refresher-content.tsx",
   "encapsulation": "none",
   "tag": "ion-refresher-content",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "pullingIcon",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | string | null",
+        "resolved": "null | string | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "pulling-icon",
       "reflectToAttr": false,
@@ -31,6 +42,17 @@
     {
       "name": "pullingText",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "pulling-text",
       "reflectToAttr": false,
@@ -53,6 +75,17 @@
     {
       "name": "refreshingSpinner",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | null",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "refreshing-spinner",
       "reflectToAttr": false,
@@ -108,6 +141,17 @@
     {
       "name": "refreshingText",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "refreshing-text",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/refresher.json b/src/translate/.detection/api/refresher.json
index 6955cb7fc92..4fdb2394a61 100644
--- a/src/translate/.detection/api/refresher.json
+++ b/src/translate/.detection/api/refresher.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/refresher/refresher.tsx",
+  "filePath": "src/components/refresher/refresher.tsx",
   "encapsulation": "none",
   "tag": "ion-refresher",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "closeDuration",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "close-duration",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "pullFactor",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-factor",
       "reflectToAttr": false,
@@ -60,6 +75,11 @@
     {
       "name": "pullMax",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-max",
       "reflectToAttr": false,
@@ -77,6 +97,11 @@
     {
       "name": "pullMin",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-min",
       "reflectToAttr": false,
@@ -94,6 +119,11 @@
     {
       "name": "snapbackDuration",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "snapback-duration",
       "reflectToAttr": false,
@@ -116,6 +146,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "cancel() => Promise<void>",
       "parameters": [],
       "docs": "Changes the refresher's state from `refreshing` to `cancelling`.",
@@ -127,6 +168,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "complete() => Promise<void>",
       "parameters": [],
       "docs": "Call `complete()` when your async operation has completed.\nFor example, the `refreshing` state is while the app is performing\nan asynchronous operation, such as receiving more data from an\nAJAX request. Once the data has been received, you then call this\nmethod to signify that the refreshing has completed and to close\nthe refresher. This method also changes the refresher's state from\n`refreshing` to `completing`.",
@@ -138,6 +190,17 @@
         "type": "Promise<number>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number>"
+      },
       "signature": "getProgress() => Promise<number>",
       "parameters": [],
       "docs": "A number representing how far down the user has pulled.\nThe number `0` represents the user hasn't pulled down at all. The\nnumber `1`, and anything greater than `1`, represents that the user\nhas pulled far enough down that when they let go then the refresh will\nhappen. If they let go and the number is less than `1`, then the\nrefresh will not happen, and the content will return to it's original\nposition.",
@@ -149,6 +212,11 @@
       "event": "ionPull",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted while the user is pulling down the content and exposing the refresher.",
@@ -158,6 +226,17 @@
       "event": "ionRefresh",
       "detail": "RefresherEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RefresherEventDetail",
+        "resolved": "RefresherEventDetail",
+        "references": {
+          "RefresherEventDetail": {
+            "location": "import",
+            "path": "./refresher-interface",
+            "id": "src/components/refresher/refresher-interface.ts::RefresherEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.",
@@ -167,6 +246,11 @@
       "event": "ionStart",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user begins to start pulling down.",
diff --git a/src/translate/.detection/api/reorder-group.json b/src/translate/.detection/api/reorder-group.json
index f974008bc8e..6cdbe02491d 100644
--- a/src/translate/.detection/api/reorder-group.json
+++ b/src/translate/.detection/api/reorder-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/reorder-group/reorder-group.tsx",
+  "filePath": "src/components/reorder-group/reorder-group.tsx",
   "encapsulation": "none",
   "tag": "ion-reorder-group",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -31,6 +36,27 @@
         "type": "Promise<any>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(listOrReorder?: boolean | any[]) => Promise<any>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
+              }
+            ],
+            "text": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<any>"
+      },
       "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
       "parameters": [],
       "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
@@ -47,6 +73,17 @@
       "event": "ionItemReorder",
       "detail": "ItemReorderEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ItemReorderEventDetail",
+        "resolved": "ItemReorderEventDetail",
+        "references": {
+          "ItemReorderEventDetail": {
+            "location": "import",
+            "path": "./reorder-group-interface",
+            "id": "src/components/reorder-group/reorder-group-interface.ts::ItemReorderEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
diff --git a/src/translate/.detection/api/reorder.json b/src/translate/.detection/api/reorder.json
index 00294578383..77b2ea75af0 100644
--- a/src/translate/.detection/api/reorder.json
+++ b/src/translate/.detection/api/reorder.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/reorder/reorder.tsx",
+  "filePath": "src/components/reorder/reorder.tsx",
   "encapsulation": "shadow",
   "tag": "ion-reorder",
   "docs": "",
diff --git a/src/translate/.detection/api/ripple-effect.json b/src/translate/.detection/api/ripple-effect.json
index 952db5c8ade..1a97e7f4e69 100644
--- a/src/translate/.detection/api/ripple-effect.json
+++ b/src/translate/.detection/api/ripple-effect.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/ripple-effect/ripple-effect.tsx",
+  "filePath": "src/components/ripple-effect/ripple-effect.tsx",
   "encapsulation": "shadow",
   "tag": "ion-ripple-effect",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "type",
       "type": "\"bounded\" | \"unbounded\"",
+      "complexType": {
+        "original": "'bounded' | 'unbounded'",
+        "resolved": "\"bounded\" | \"unbounded\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -36,6 +41,36 @@
         "type": "Promise<() => void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(x: number, y: number) => Promise<() => void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "x The horizontal coordinate of where the ripple should start."
+              }
+            ],
+            "text": "The horizontal coordinate of where the ripple should start."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "y The vertical coordinate of where the ripple should start."
+              }
+            ],
+            "text": "The vertical coordinate of where the ripple should start."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<() => void>"
+      },
       "signature": "addRipple(x: number, y: number) => Promise<() => void>",
       "parameters": [],
       "docs": "Adds the ripple effect to the parent element.",
diff --git a/src/translate/.detection/api/route-redirect.json b/src/translate/.detection/api/route-redirect.json
index 854d7d7b089..d1925cfc0f7 100644
--- a/src/translate/.detection/api/route-redirect.json
+++ b/src/translate/.detection/api/route-redirect.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/route-redirect/route-redirect.tsx",
+  "filePath": "src/components/route-redirect/route-redirect.tsx",
   "encapsulation": "none",
   "tag": "ion-route-redirect",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "from",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "from",
       "reflectToAttr": false,
@@ -25,6 +30,11 @@
     {
       "name": "to",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | undefined | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "to",
       "reflectToAttr": false,
@@ -51,6 +61,11 @@
       "event": "ionRouteRedirectChanged",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`ion-router` captures this event in order to update his internal registry of router rules.",
diff --git a/src/translate/.detection/api/route.json b/src/translate/.detection/api/route.json
index a762c55d947..0726043eecb 100644
--- a/src/translate/.detection/api/route.json
+++ b/src/translate/.detection/api/route.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/route/route.tsx",
+  "filePath": "src/components/route/route.tsx",
   "encapsulation": "none",
   "tag": "ion-route",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "beforeEnter",
       "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+      "complexType": {
+        "original": "NavigationHookCallback",
+        "resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+        "references": {
+          "NavigationHookCallback": {
+            "location": "import",
+            "path": "./route-interface",
+            "id": "src/components/route/route-interface.ts::NavigationHookCallback"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
@@ -30,6 +41,17 @@
     {
       "name": "beforeLeave",
       "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+      "complexType": {
+        "original": "NavigationHookCallback",
+        "resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+        "references": {
+          "NavigationHookCallback": {
+            "location": "import",
+            "path": "./route-interface",
+            "id": "src/components/route/route-interface.ts::NavigationHookCallback"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
@@ -51,6 +73,11 @@
     {
       "name": "component",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -67,6 +94,11 @@
     {
       "name": "componentProps",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.",
@@ -85,6 +117,11 @@
     {
       "name": "url",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "url",
       "reflectToAttr": false,
@@ -106,6 +143,11 @@
       "event": "ionRouteDataChanged",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Used internally by `ion-router` to know when this route did change.",
diff --git a/src/translate/.detection/api/router-link.json b/src/translate/.detection/api/router-link.json
index 5382428adda..1b661f044ab 100644
--- a/src/translate/.detection/api/router-link.json
+++ b/src/translate/.detection/api/router-link.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/router-link/router-link.tsx",
+  "filePath": "src/components/router-link/router-link.tsx",
   "encapsulation": "shadow",
   "tag": "ion-router-link",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -64,6 +75,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -83,6 +99,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -102,6 +123,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -120,6 +152,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -146,6 +189,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/router-outlet.json b/src/translate/.detection/api/router-outlet.json
index 12999b46eb3..24310569325 100644
--- a/src/translate/.detection/api/router-outlet.json
+++ b/src/translate/.detection/api/router-outlet.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/router-outlet/route-outlet.tsx",
+  "filePath": "src/components/router-outlet/route-outlet.tsx",
   "encapsulation": "shadow",
   "tag": "ion-router-outlet",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -26,6 +31,17 @@
     {
       "name": "animation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "This property allows to create custom transition using AnimationBuilder functions.",
@@ -44,6 +60,11 @@
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
+      "complexType": {
+        "original": "\"ios\" | \"md\"",
+        "resolved": "\"ios\" | \"md\"",
+        "references": {}
+      },
       "mutable": true,
       "attr": "mode",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/router.json b/src/translate/.detection/api/router.json
index 10cb2ac1abb..42032ac7bff 100644
--- a/src/translate/.detection/api/router.json
+++ b/src/translate/.detection/api/router.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/router/router.tsx",
+  "filePath": "src/components/router/router.tsx",
   "encapsulation": "none",
   "tag": "ion-router",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "root",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "root",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "useHash",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "use-hash",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "back() => Promise<void>",
       "parameters": [],
       "docs": "Go back to previous page in the window.history.",
@@ -59,6 +80,50 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "path The path to navigate to."
+              }
+            ],
+            "text": "The path to navigate to."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "direction The direction of the animation. Defaults to `\"forward\"`."
+              }
+            ],
+            "text": "The direction of the animation. Defaults to `\"forward\"`."
+          },
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "RouterDirection": {
+            "location": "import",
+            "path": "./utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          },
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate to the specified path.",
@@ -79,6 +144,17 @@
       "event": "ionRouteDidChange",
       "detail": "RouterEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RouterEventDetail",
+        "resolved": "RouterEventDetail",
+        "references": {
+          "RouterEventDetail": {
+            "location": "import",
+            "path": "./utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the route had changed",
@@ -88,6 +164,17 @@
       "event": "ionRouteWillChange",
       "detail": "RouterEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RouterEventDetail",
+        "resolved": "RouterEventDetail",
+        "references": {
+          "RouterEventDetail": {
+            "location": "import",
+            "path": "./utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event emitted when the route is about to change",
diff --git a/src/translate/.detection/api/row.json b/src/translate/.detection/api/row.json
index 9932fecb458..0f649d731ca 100644
--- a/src/translate/.detection/api/row.json
+++ b/src/translate/.detection/api/row.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/row/row.tsx",
+  "filePath": "src/components/row/row.tsx",
   "encapsulation": "shadow",
   "tag": "ion-row",
   "docs": "",
diff --git a/src/translate/.detection/api/searchbar.json b/src/translate/.detection/api/searchbar.json
index acb6dfc2bda..1c0d88acb90 100644
--- a/src/translate/.detection/api/searchbar.json
+++ b/src/translate/.detection/api/searchbar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/searchbar/searchbar.tsx",
+  "filePath": "src/components/searchbar/searchbar.tsx",
   "encapsulation": "scoped",
   "tag": "ion-searchbar",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,17 @@
     {
       "name": "autocomplete",
       "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+      "complexType": {
+        "original": "AutocompleteTypes",
+        "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+        "references": {
+          "AutocompleteTypes": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AutocompleteTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -261,6 +277,11 @@
     {
       "name": "autocorrect",
       "type": "\"off\" | \"on\"",
+      "complexType": {
+        "original": "'on' | 'off'",
+        "resolved": "\"off\" | \"on\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocorrect",
       "reflectToAttr": false,
@@ -283,6 +304,11 @@
     {
       "name": "cancelButtonIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-button-icon",
       "reflectToAttr": false,
@@ -300,6 +326,11 @@
     {
       "name": "cancelButtonText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-button-text",
       "reflectToAttr": false,
@@ -317,6 +348,11 @@
     {
       "name": "clearIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-icon",
       "reflectToAttr": false,
@@ -336,6 +372,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -391,6 +438,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -410,6 +462,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -427,6 +484,11 @@
     {
       "name": "enterkeyhint",
       "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+      "complexType": {
+        "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enterkeyhint",
       "reflectToAttr": false,
@@ -471,6 +533,11 @@
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+      "complexType": {
+        "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+        "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inputmode",
       "reflectToAttr": false,
@@ -540,6 +607,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -557,6 +629,11 @@
     {
       "name": "placeholder",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -574,6 +651,11 @@
     {
       "name": "searchIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "search-icon",
       "reflectToAttr": false,
@@ -593,6 +675,11 @@
     {
       "name": "showCancelButton",
       "type": "\"always\" | \"focus\" | \"never\"",
+      "complexType": {
+        "original": "'never' | 'focus' | 'always'",
+        "resolved": "\"always\" | \"focus\" | \"never\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-cancel-button",
       "reflectToAttr": false,
@@ -619,6 +706,11 @@
     {
       "name": "showClearButton",
       "type": "\"always\" | \"focus\" | \"never\"",
+      "complexType": {
+        "original": "'never' | 'focus' | 'always'",
+        "resolved": "\"always\" | \"focus\" | \"never\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-clear-button",
       "reflectToAttr": false,
@@ -645,6 +737,11 @@
     {
       "name": "spellcheck",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "spellcheck",
       "reflectToAttr": false,
@@ -662,6 +759,11 @@
     {
       "name": "type",
       "type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+      "complexType": {
+        "original": "'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'",
+        "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -704,6 +806,11 @@
     {
       "name": "value",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -732,6 +839,21 @@
         "type": "Promise<HTMLInputElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLInputElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLInputElement": {
+            "location": "global",
+            "id": "global::HTMLInputElement"
+          }
+        },
+        "return": "Promise<HTMLInputElement>"
+      },
       "signature": "getInputElement() => Promise<HTMLInputElement>",
       "parameters": [],
       "docs": "Returns the native `<input>` element used under the hood.",
@@ -743,6 +865,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
       "docs": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
@@ -754,6 +887,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input loses focus.",
@@ -763,6 +901,11 @@
       "event": "ionCancel",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the cancel button is clicked.",
@@ -772,6 +915,17 @@
       "event": "ionChange",
       "detail": "SearchbarChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "SearchbarChangeEventDetail",
+        "resolved": "SearchbarChangeEventDetail",
+        "references": {
+          "SearchbarChangeEventDetail": {
+            "location": "import",
+            "path": "./searchbar-interface",
+            "id": "src/components/searchbar/searchbar-interface.ts::SearchbarChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
@@ -781,6 +935,11 @@
       "event": "ionClear",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the clear input button is clicked.",
@@ -790,6 +949,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input has focus.",
@@ -799,6 +963,17 @@
       "event": "ionInput",
       "detail": "SearchbarInputEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "SearchbarInputEventDetail",
+        "resolved": "SearchbarInputEventDetail",
+        "references": {
+          "SearchbarInputEventDetail": {
+            "location": "import",
+            "path": "./searchbar-interface",
+            "id": "src/components/searchbar/searchbar-interface.ts::SearchbarInputEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the `value` of the `ion-searchbar` element has changed.",
diff --git a/src/translate/.detection/api/segment-button.json b/src/translate/.detection/api/segment-button.json
index 5941ef23559..44825e859fa 100644
--- a/src/translate/.detection/api/segment-button.json
+++ b/src/translate/.detection/api/segment-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/segment-button/segment-button.tsx",
+  "filePath": "src/components/segment-button/segment-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-segment-button",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "layout",
       "type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+      "complexType": {
+        "original": "SegmentButtonLayout",
+        "resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+        "references": {
+          "SegmentButtonLayout": {
+            "location": "import",
+            "path": "./segment-button-interface",
+            "id": "src/components/segment-button/segment-button-interface.ts::SegmentButtonLayout"
+          }
+        }
+      },
       "mutable": false,
       "attr": "layout",
       "reflectToAttr": false,
@@ -105,6 +121,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -131,6 +152,17 @@
     {
       "name": "value",
       "type": "number | string",
+      "complexType": {
+        "original": "SegmentValue",
+        "resolved": "number | string",
+        "references": {
+          "SegmentValue": {
+            "location": "import",
+            "path": "../segment/segment-interface",
+            "id": "src/components/segment/segment-interface.ts::SegmentValue"
+          }
+        }
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/segment.json b/src/translate/.detection/api/segment.json
index ca1bb642a35..13e946f0fd4 100644
--- a/src/translate/.detection/api/segment.json
+++ b/src/translate/.detection/api/segment.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/segment/segment.tsx",
+  "filePath": "src/components/segment/segment.tsx",
   "encapsulation": "shadow",
   "tag": "ion-segment",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -107,6 +123,11 @@
     {
       "name": "scrollable",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scrollable",
       "reflectToAttr": false,
@@ -124,6 +145,11 @@
     {
       "name": "selectOnFocus",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "select-on-focus",
       "reflectToAttr": false,
@@ -141,6 +167,11 @@
     {
       "name": "swipeGesture",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "swipe-gesture",
       "reflectToAttr": false,
@@ -158,6 +189,17 @@
     {
       "name": "value",
       "type": "number | string | undefined",
+      "complexType": {
+        "original": "SegmentValue",
+        "resolved": "number | string | undefined",
+        "references": {
+          "SegmentValue": {
+            "location": "import",
+            "path": "./segment-interface",
+            "id": "src/components/segment/segment-interface.ts::SegmentValue"
+          }
+        }
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -184,6 +226,17 @@
       "event": "ionChange",
       "detail": "SegmentChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "SegmentChangeEventDetail",
+        "resolved": "SegmentChangeEventDetail",
+        "references": {
+          "SegmentChangeEventDetail": {
+            "location": "import",
+            "path": "./segment-interface",
+            "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.",
diff --git a/src/translate/.detection/api/select-option.json b/src/translate/.detection/api/select-option.json
index 14656785c8f..731bf26f8dd 100644
--- a/src/translate/.detection/api/select-option.json
+++ b/src/translate/.detection/api/select-option.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/select-option/select-option.tsx",
+  "filePath": "src/components/select-option/select-option.tsx",
   "encapsulation": "shadow",
   "tag": "ion-select-option",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/select.json b/src/translate/.detection/api/select.json
index 605077bbba5..505c0e16aad 100644
--- a/src/translate/.detection/api/select.json
+++ b/src/translate/.detection/api/select.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/select/select.tsx",
+  "filePath": "src/components/select/select.tsx",
   "encapsulation": "shadow",
   "tag": "ion-select",
   "docs": "",
@@ -38,6 +38,11 @@
     {
       "name": "cancelText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-text",
       "reflectToAttr": false,
@@ -55,6 +60,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -110,6 +126,17 @@
     {
       "name": "compareWith",
       "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+      "complexType": {
+        "original": "string | SelectCompareFn | null",
+        "resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+        "references": {
+          "SelectCompareFn": {
+            "location": "import",
+            "path": "./select-interface",
+            "id": "src/components/select/select-interface.ts::SelectCompareFn"
+          }
+        }
+      },
       "mutable": false,
       "attr": "compare-with",
       "reflectToAttr": false,
@@ -135,6 +162,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -152,6 +184,11 @@
     {
       "name": "expandedIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expanded-icon",
       "reflectToAttr": false,
@@ -171,6 +208,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -195,6 +237,17 @@
     {
       "name": "interface",
       "type": "\"action-sheet\" | \"alert\" | \"popover\"",
+      "complexType": {
+        "original": "SelectInterface",
+        "resolved": "\"action-sheet\" | \"alert\" | \"popover\"",
+        "references": {
+          "SelectInterface": {
+            "location": "import",
+            "path": "./select-interface",
+            "id": "src/components/select/select-interface.ts::SelectInterface"
+          }
+        }
+      },
       "mutable": false,
       "attr": "interface",
       "reflectToAttr": false,
@@ -221,6 +274,11 @@
     {
       "name": "interfaceOptions",
       "type": "any",
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "interface-options",
       "reflectToAttr": false,
@@ -238,6 +296,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -264,6 +327,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -283,6 +351,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+      "complexType": {
+        "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -320,6 +393,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -360,6 +438,11 @@
     {
       "name": "multiple",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -377,6 +460,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -394,6 +482,11 @@
     {
       "name": "okText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "ok-text",
       "reflectToAttr": false,
@@ -411,6 +504,11 @@
     {
       "name": "placeholder",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -430,6 +528,11 @@
     {
       "name": "selectedText",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "selected-text",
       "reflectToAttr": false,
@@ -452,6 +555,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -472,6 +580,11 @@
     {
       "name": "toggleIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "toggle-icon",
       "reflectToAttr": false,
@@ -491,6 +604,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -512,6 +630,35 @@
         "type": "Promise<any>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(event?: UIEvent) => Promise<any>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "event The user interface event that called the open."
+              }
+            ],
+            "text": "The user interface event that called the open."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "UIEvent": {
+            "location": "global",
+            "id": "global::UIEvent"
+          },
+          "HTMLElement": {
+            "location": "global",
+            "id": "global::HTMLElement"
+          }
+        },
+        "return": "Promise<any>"
+      },
       "signature": "open(event?: UIEvent) => Promise<any>",
       "parameters": [],
       "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
@@ -528,6 +675,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the select loses focus.",
@@ -537,6 +689,11 @@
       "event": "ionCancel",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the selection is cancelled.",
@@ -546,6 +703,17 @@
       "event": "ionChange",
       "detail": "SelectChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "SelectChangeEventDetail",
+        "resolved": "SelectChangeEventDetail<any>",
+        "references": {
+          "SelectChangeEventDetail": {
+            "location": "import",
+            "path": "./select-interface",
+            "id": "src/components/select/select-interface.ts::SelectChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value has changed.",
@@ -555,6 +723,11 @@
       "event": "ionDismiss",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the overlay is dismissed.",
@@ -564,6 +737,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the select has focus.",
@@ -695,11 +873,11 @@
     "ion-select-popover": [
       "ion-item",
       "ion-checkbox",
-      "ion-label",
       "ion-radio-group",
       "ion-radio",
       "ion-list",
-      "ion-list-header"
+      "ion-list-header",
+      "ion-label"
     ],
     "ion-item": [
       "ion-icon",
diff --git a/src/translate/.detection/api/skeleton-text.json b/src/translate/.detection/api/skeleton-text.json
index b619678da43..a058621bb96 100644
--- a/src/translate/.detection/api/skeleton-text.json
+++ b/src/translate/.detection/api/skeleton-text.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/skeleton-text/skeleton-text.tsx",
+  "filePath": "src/components/skeleton-text/skeleton-text.tsx",
   "encapsulation": "shadow",
   "tag": "ion-skeleton-text",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/spinner.json b/src/translate/.detection/api/spinner.json
index 79682048943..f5c285c8b6d 100644
--- a/src/translate/.detection/api/spinner.json
+++ b/src/translate/.detection/api/spinner.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/spinner/spinner.tsx",
+  "filePath": "src/components/spinner/spinner.tsx",
   "encapsulation": "shadow",
   "tag": "ion-spinner",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -64,6 +75,11 @@
     {
       "name": "duration",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -83,6 +99,17 @@
     {
       "name": "name",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
+      "complexType": {
+        "original": "SpinnerTypes",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "./spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -135,6 +162,11 @@
     {
       "name": "paused",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "paused",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/split-pane.json b/src/translate/.detection/api/split-pane.json
index fd964ab215a..dcfdde42619 100644
--- a/src/translate/.detection/api/split-pane.json
+++ b/src/translate/.detection/api/split-pane.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/split-pane/split-pane.tsx",
+  "filePath": "src/components/split-pane/split-pane.tsx",
   "encapsulation": "shadow",
   "tag": "ion-split-pane",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "contentId",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "content-id",
       "reflectToAttr": true,
@@ -28,6 +33,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -45,6 +55,11 @@
     {
       "name": "when",
       "type": "boolean | string",
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "when",
       "reflectToAttr": false,
@@ -69,6 +84,11 @@
       "event": "ionSplitPaneVisible",
       "detail": "{ visible: boolean; }",
       "bubbles": true,
+      "complexType": {
+        "original": "{ visible: boolean }",
+        "resolved": "{ visible: boolean; }",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Expression to be called when the split-pane visibility has changed",
diff --git a/src/translate/.detection/api/tab-bar.json b/src/translate/.detection/api/tab-bar.json
index 3974ee41a98..60a278079b9 100644
--- a/src/translate/.detection/api/tab-bar.json
+++ b/src/translate/.detection/api/tab-bar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tab-bar/tab-bar.tsx",
+  "filePath": "src/components/tab-bar/tab-bar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tab-bar",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +101,11 @@
     {
       "name": "selectedTab",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "selected-tab",
       "reflectToAttr": false,
@@ -109,6 +125,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/tab-button.json b/src/translate/.detection/api/tab-button.json
index 7edadd1fb2e..0a8bbe42a8e 100644
--- a/src/translate/.detection/api/tab-button.json
+++ b/src/translate/.detection/api/tab-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tab-button/tab-button.tsx",
+  "filePath": "src/components/tab-button/tab-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tab-button",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -35,6 +40,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -54,6 +64,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -73,6 +88,17 @@
     {
       "name": "layout",
       "type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+      "complexType": {
+        "original": "TabButtonLayout",
+        "resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+        "references": {
+          "TabButtonLayout": {
+            "location": "import",
+            "path": "../tab-bar/tab-bar-interface",
+            "id": "src/components/tab-bar/tab-bar-interface.ts::TabButtonLayout"
+          }
+        }
+      },
       "mutable": true,
       "attr": "layout",
       "reflectToAttr": false,
@@ -134,6 +160,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -153,6 +184,11 @@
     {
       "name": "selected",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "selected",
       "reflectToAttr": false,
@@ -170,6 +206,11 @@
     {
       "name": "tab",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "tab",
       "reflectToAttr": false,
@@ -189,6 +230,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/tab.json b/src/translate/.detection/api/tab.json
index 36c812d9d9d..50b2e2f53ac 100644
--- a/src/translate/.detection/api/tab.json
+++ b/src/translate/.detection/api/tab.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tab/tab.tsx",
+  "filePath": "src/components/tab/tab.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tab",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "component",
       "type": "Function | HTMLElement | null | string | undefined",
+      "complexType": {
+        "original": "ComponentRef",
+        "resolved": "Function | HTMLElement | null | string | undefined",
+        "references": {
+          "ComponentRef": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentRef"
+          }
+        }
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -37,6 +48,11 @@
     {
       "name": "tab",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "tab",
       "reflectToAttr": false,
@@ -58,6 +74,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setActive() => Promise<void>",
       "parameters": [],
       "docs": "Set the active component for the tab",
diff --git a/src/translate/.detection/api/tabs.json b/src/translate/.detection/api/tabs.json
index 055e313e9c5..45b1db31e43 100644
--- a/src/translate/.detection/api/tabs.json
+++ b/src/translate/.detection/api/tabs.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tabs/tabs.tsx",
+  "filePath": "src/components/tabs/tabs.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tabs",
   "docs": "",
@@ -26,6 +26,17 @@
         "type": "Promise<string | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<string | undefined>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<string | undefined>"
+      },
       "signature": "getSelected() => Promise<string | undefined>",
       "parameters": [],
       "docs": "Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
@@ -37,6 +48,31 @@
         "type": "Promise<HTMLIonTabElement | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+              }
+            ],
+            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLIonTabElement": {
+            "location": "global",
+            "id": "global::HTMLIonTabElement"
+          }
+        },
+        "return": "Promise<HTMLIonTabElement | undefined>"
+      },
       "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
       "parameters": [],
       "docs": "Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
@@ -53,6 +89,31 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(tab: string | HTMLIonTabElement) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+              }
+            ],
+            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLIonTabElement": {
+            "location": "global",
+            "id": "global::HTMLIonTabElement"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
       "parameters": [],
       "docs": "Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
@@ -69,6 +130,11 @@
       "event": "ionTabsDidChange",
       "detail": "{ tab: string; }",
       "bubbles": false,
+      "complexType": {
+        "original": "{ tab: string }",
+        "resolved": "{ tab: string; }",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the navigation has finished transitioning to a new component.",
@@ -78,6 +144,11 @@
       "event": "ionTabsWillChange",
       "detail": "{ tab: string; }",
       "bubbles": false,
+      "complexType": {
+        "original": "{ tab: string }",
+        "resolved": "{ tab: string; }",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the navigation is about to transition to a new component.",
diff --git a/src/translate/.detection/api/text.json b/src/translate/.detection/api/text.json
index b3d8d9f0c78..def942d45d5 100644
--- a/src/translate/.detection/api/text.json
+++ b/src/translate/.detection/api/text.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/text/text.tsx",
+  "filePath": "src/components/text/text.tsx",
   "encapsulation": "shadow",
   "tag": "ion-text",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/.detection/api/textarea.json b/src/translate/.detection/api/textarea.json
index 58240340488..7b1d96e97e2 100644
--- a/src/translate/.detection/api/textarea.json
+++ b/src/translate/.detection/api/textarea.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/textarea/textarea.tsx",
+  "filePath": "src/components/textarea/textarea.tsx",
   "encapsulation": "scoped",
   "tag": "ion-textarea",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "autoGrow",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "auto-grow",
       "reflectToAttr": true,
@@ -35,6 +40,11 @@
     {
       "name": "autocapitalize",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocapitalize",
       "reflectToAttr": false,
@@ -52,6 +62,11 @@
     {
       "name": "autofocus",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autofocus",
       "reflectToAttr": false,
@@ -69,6 +84,11 @@
     {
       "name": "clearOnEdit",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-on-edit",
       "reflectToAttr": false,
@@ -86,6 +106,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -141,6 +172,11 @@
     {
       "name": "cols",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cols",
       "reflectToAttr": false,
@@ -160,6 +196,11 @@
     {
       "name": "counter",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "counter",
       "reflectToAttr": false,
@@ -177,6 +218,11 @@
     {
       "name": "counterFormatter",
       "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "complexType": {
+        "original": "(inputLength: number, maxLength: number) => string",
+        "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
@@ -195,6 +241,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -214,6 +265,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -231,6 +287,11 @@
     {
       "name": "enterkeyhint",
       "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+      "complexType": {
+        "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enterkeyhint",
       "reflectToAttr": false,
@@ -275,6 +336,11 @@
     {
       "name": "errorText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "error-text",
       "reflectToAttr": false,
@@ -294,6 +360,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -318,6 +389,11 @@
     {
       "name": "helperText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "helper-text",
       "reflectToAttr": false,
@@ -337,6 +413,11 @@
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+      "complexType": {
+        "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+        "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inputmode",
       "reflectToAttr": false,
@@ -385,6 +466,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -404,6 +490,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -438,6 +529,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -457,6 +553,11 @@
     {
       "name": "maxlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "maxlength",
       "reflectToAttr": false,
@@ -476,6 +577,11 @@
     {
       "name": "minlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "minlength",
       "reflectToAttr": false,
@@ -516,6 +622,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -533,6 +644,11 @@
     {
       "name": "placeholder",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -552,6 +668,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -569,6 +690,11 @@
     {
       "name": "required",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "required",
       "reflectToAttr": false,
@@ -586,6 +712,11 @@
     {
       "name": "rows",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rows",
       "reflectToAttr": false,
@@ -605,6 +736,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -625,6 +761,11 @@
     {
       "name": "spellcheck",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "spellcheck",
       "reflectToAttr": false,
@@ -642,6 +783,11 @@
     {
       "name": "value",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -665,6 +811,11 @@
     {
       "name": "wrap",
       "type": "\"hard\" | \"off\" | \"soft\" | undefined",
+      "complexType": {
+        "original": "'hard' | 'soft' | 'off'",
+        "resolved": "\"hard\" | \"off\" | \"soft\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "wrap",
       "reflectToAttr": false,
@@ -698,6 +849,21 @@
         "type": "Promise<HTMLTextAreaElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLTextAreaElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLTextAreaElement": {
+            "location": "global",
+            "id": "global::HTMLTextAreaElement"
+          }
+        },
+        "return": "Promise<HTMLTextAreaElement>"
+      },
       "signature": "getInputElement() => Promise<HTMLTextAreaElement>",
       "parameters": [],
       "docs": "Returns the native `<textarea>` element used under the hood.",
@@ -709,6 +875,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
       "docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.",
@@ -720,6 +897,16 @@
       "event": "ionBlur",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input loses focus.",
@@ -729,6 +916,17 @@
       "event": "ionChange",
       "detail": "TextareaChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "TextareaChangeEventDetail",
+        "resolved": "TextareaChangeEventDetail",
+        "references": {
+          "TextareaChangeEventDetail": {
+            "location": "import",
+            "path": "./textarea-interface",
+            "id": "src/components/textarea/textarea-interface.ts::TextareaChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired when the user modifies the textarea's value.\nUnlike the `ionInput` event, the `ionChange` event is fired when\nthe element loses focus after its value has been modified.",
@@ -738,6 +936,16 @@
       "event": "ionFocus",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input has focus.",
@@ -747,6 +955,17 @@
       "event": "ionInput",
       "detail": "TextareaInputEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "TextareaInputEventDetail",
+        "resolved": "TextareaInputEventDetail",
+        "references": {
+          "TextareaInputEventDetail": {
+            "location": "import",
+            "path": "./textarea-interface",
+            "id": "src/components/textarea/textarea-interface.ts::TextareaInputEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionInput` event is fired each time the user modifies the textarea's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the textarea's value. This typically happens for each keystroke as the user types.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
diff --git a/src/translate/.detection/api/thumbnail.json b/src/translate/.detection/api/thumbnail.json
index 7363aa6dd56..6c147233bab 100644
--- a/src/translate/.detection/api/thumbnail.json
+++ b/src/translate/.detection/api/thumbnail.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/thumbnail/thumbnail.tsx",
+  "filePath": "src/components/thumbnail/thumbnail.tsx",
   "encapsulation": "shadow",
   "tag": "ion-thumbnail",
   "docs": "",
diff --git a/src/translate/.detection/api/title.json b/src/translate/.detection/api/title.json
index 2ee851cbfe9..298e76ca27d 100644
--- a/src/translate/.detection/api/title.json
+++ b/src/translate/.detection/api/title.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/title/title.tsx",
+  "filePath": "src/components/title/title.tsx",
   "encapsulation": "shadow",
   "tag": "ion-title",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -64,6 +75,11 @@
     {
       "name": "size",
       "type": "\"large\" | \"small\" | undefined",
+      "complexType": {
+        "original": "'large' | 'small'",
+        "resolved": "\"large\" | \"small\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
diff --git a/src/translate/.detection/api/toast.json b/src/translate/.detection/api/toast.json
index 977fc8ccf98..e7918acc151 100644
--- a/src/translate/.detection/api/toast.json
+++ b/src/translate/.detection/api/toast.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/toast/toast.tsx",
+  "filePath": "src/components/toast/toast.tsx",
   "encapsulation": "shadow",
   "tag": "ion-toast",
   "docs": "",
@@ -12,6 +12,10 @@
       "name": "part",
       "text": "button - Any button element that is displayed inside of the toast."
     },
+    {
+      "name": "part",
+      "text": "button cancel - Any button element with role \"cancel\" that is displayed inside of the toast."
+    },
     {
       "name": "part",
       "text": "container - The element that wraps all child elements."
@@ -34,6 +38,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -51,6 +60,17 @@
     {
       "name": "buttons",
       "type": "(string | ToastButton)[] | undefined",
+      "complexType": {
+        "original": "(ToastButton | string)[]",
+        "resolved": "(string | ToastButton)[] | undefined",
+        "references": {
+          "ToastButton": {
+            "location": "import",
+            "path": "./toast-interface",
+            "id": "src/components/toast/toast-interface.ts::ToastButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "An array of buttons for the toast.",
@@ -72,6 +92,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -127,6 +158,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -149,6 +185,11 @@
     {
       "name": "duration",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -166,6 +207,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the toast is presented.",
@@ -184,6 +236,11 @@
     {
       "name": "header",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "header",
       "reflectToAttr": false,
@@ -203,6 +260,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the toast.",
@@ -221,6 +283,11 @@
     {
       "name": "icon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "icon",
       "reflectToAttr": false,
@@ -240,6 +307,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -257,6 +329,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -274,6 +351,17 @@
     {
       "name": "layout",
       "type": "\"baseline\" | \"stacked\"",
+      "complexType": {
+        "original": "ToastLayout",
+        "resolved": "\"baseline\" | \"stacked\"",
+        "references": {
+          "ToastLayout": {
+            "location": "import",
+            "path": "./toast-interface",
+            "id": "src/components/toast/toast-interface.ts::ToastLayout"
+          }
+        }
+      },
       "mutable": false,
       "attr": "layout",
       "reflectToAttr": false,
@@ -296,6 +384,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the toast is dismissed.",
@@ -314,6 +413,17 @@
     {
       "name": "message",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
@@ -357,6 +467,17 @@
     {
       "name": "position",
       "type": "\"bottom\" | \"middle\" | \"top\"",
+      "complexType": {
+        "original": "ToastPosition",
+        "resolved": "\"bottom\" | \"middle\" | \"top\"",
+        "references": {
+          "ToastPosition": {
+            "location": "import",
+            "path": "./toast-interface",
+            "id": "src/components/toast/toast-interface.ts::ToastPosition"
+          }
+        }
+      },
       "mutable": false,
       "attr": "position",
       "reflectToAttr": false,
@@ -383,6 +504,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -400,6 +526,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -424,6 +555,40 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ToastDismissOptions": {
+            "location": "global",
+            "id": "global::ToastDismissOptions"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the toast overlay after it has been presented.",
@@ -444,6 +609,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the toast did dismiss.",
@@ -455,6 +640,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the toast will dismiss.",
@@ -466,6 +671,21 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ToastPresentOptions": {
+            "location": "global",
+            "id": "global::ToastPresentOptions"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the toast overlay after it has been created.",
@@ -477,6 +697,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has dismissed.\nShorthand for ionToastDidDismiss.",
@@ -486,6 +717,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has presented.\nShorthand for ionToastWillDismiss.",
@@ -495,6 +731,17 @@
       "event": "ionToastDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has dismissed.",
@@ -504,6 +751,11 @@
       "event": "ionToastDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has presented.",
@@ -513,6 +765,17 @@
       "event": "ionToastWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has dismissed.",
@@ -522,6 +785,11 @@
       "event": "ionToastWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has presented.",
@@ -531,6 +799,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has dismissed.\nShorthand for ionToastWillDismiss.",
@@ -540,6 +819,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has presented.\nShorthand for ionToastWillPresent.",
@@ -640,6 +924,10 @@
       "name": "button",
       "docs": "Any button element that is displayed inside of the toast."
     },
+    {
+      "name": "button cancel",
+      "docs": "Any button element with role \"cancel\" that is displayed inside of the toast."
+    },
     {
       "name": "container",
       "docs": "The element that wraps all child elements."
diff --git a/src/translate/.detection/api/toggle.json b/src/translate/.detection/api/toggle.json
index f87fc39d265..6d17693384d 100644
--- a/src/translate/.detection/api/toggle.json
+++ b/src/translate/.detection/api/toggle.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/toggle/toggle.tsx",
+  "filePath": "src/components/toggle/toggle.tsx",
   "encapsulation": "shadow",
   "tag": "ion-toggle",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "checked",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "checked",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -98,6 +114,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -115,6 +136,11 @@
     {
       "name": "enableOnOffLabels",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean | undefined",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enable-on-off-labels",
       "reflectToAttr": false,
@@ -135,6 +161,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -161,6 +192,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -187,6 +223,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -227,6 +268,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -244,6 +290,11 @@
     {
       "name": "value",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -271,6 +322,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the toggle loses focus.",
@@ -280,6 +336,17 @@
       "event": "ionChange",
       "detail": "ToggleChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "ToggleChangeEventDetail",
+        "resolved": "ToggleChangeEventDetail<any>",
+        "references": {
+          "ToggleChangeEventDetail": {
+            "location": "import",
+            "path": "./toggle-interface",
+            "id": "src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
@@ -289,6 +356,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the toggle has focus.",
diff --git a/src/translate/.detection/api/toolbar.json b/src/translate/.detection/api/toolbar.json
index 1a9a7531a5c..24324679007 100644
--- a/src/translate/.detection/api/toolbar.json
+++ b/src/translate/.detection/api/toolbar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/toolbar/toolbar.tsx",
+  "filePath": "src/components/toolbar/toolbar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-toolbar",
   "docs": "",
@@ -34,6 +34,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/.detection/cli/build.readme.md b/src/translate/.detection/cli/build.readme.md
index 5f6c540c109..7de5f855455 100644
--- a/src/translate/.detection/cli/build.readme.md
+++ b/src/translate/.detection/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-add.readme.md b/src/translate/.detection/cli/capacitor-add.readme.md
index 464a4fb5a49..6a1ecf8bc10 100644
--- a/src/translate/.detection/cli/capacitor-add.readme.md
+++ b/src/translate/.detection/cli/capacitor-add.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor add` will do the following:
-
 - Install the Capacitor platform package
-- Copy the native platform template into your project
+- Copy the native platform template into your project
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-build.readme.md b/src/translate/.detection/cli/capacitor-build.readme.md
index ecbb4a9e00a..0ccb955a383 100644
--- a/src/translate/.detection/cli/capacitor-build.readme.md
+++ b/src/translate/.detection/cli/capacitor-build.readme.md
@@ -1,9 +1,8 @@
 `ionic capacitor build` will do the following:
-
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-copy.readme.md b/src/translate/.detection/cli/capacitor-copy.readme.md
index ad813a2f858..2e5ddd1f0e7 100644
--- a/src/translate/.detection/cli/capacitor-copy.readme.md
+++ b/src/translate/.detection/cli/capacitor-copy.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor copy` will do the following:
-
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
+- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-open.readme.md b/src/translate/.detection/cli/capacitor-open.readme.md
index c52c1f44711..6a4f8a5eeba 100644
--- a/src/translate/.detection/cli/capacitor-open.readme.md
+++ b/src/translate/.detection/cli/capacitor-open.readme.md
@@ -1,3 +1,2 @@
 `ionic capacitor open` will do the following:
-
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-run.readme.md b/src/translate/.detection/cli/capacitor-run.readme.md
index 56a76e0d464..a17e32b9a99 100644
--- a/src/translate/.detection/cli/capacitor-run.readme.md
+++ b/src/translate/.detection/cli/capacitor-run.readme.md
@@ -1,5 +1,4 @@
 `ionic capacitor run` will do the following:
-
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -7,4 +6,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-sync.readme.md b/src/translate/.detection/cli/capacitor-sync.readme.md
index 403ecdf9af3..4ab54b5269d 100644
--- a/src/translate/.detection/cli/capacitor-sync.readme.md
+++ b/src/translate/.detection/cli/capacitor-sync.readme.md
@@ -1,6 +1,5 @@
 `ionic capacitor sync` will do the following:
-
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/.detection/cli/capacitor-update.readme.md b/src/translate/.detection/cli/capacitor-update.readme.md
index 6691448d373..6941a9bbe77 100644
--- a/src/translate/.detection/cli/capacitor-update.readme.md
+++ b/src/translate/.detection/cli/capacitor-update.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor update` will do the following:
-
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/.detection/cli/completion.readme.md b/src/translate/.detection/cli/completion.readme.md
index 98969ac91c0..c614f27c143 100644
--- a/src/translate/.detection/cli/completion.readme.md
+++ b/src/translate/.detection/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/config-get.readme.md b/src/translate/.detection/cli/config-get.readme.md
index b993225035b..ecfdc6708ac 100644
--- a/src/translate/.detection/cli/config-get.readme.md
+++ b/src/translate/.detection/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/config-set.readme.md b/src/translate/.detection/cli/config-set.readme.md
index 4cfe7872088..fd2916c6e27 100644
--- a/src/translate/.detection/cli/config-set.readme.md
+++ b/src/translate/.detection/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/config-unset.readme.md b/src/translate/.detection/cli/config-unset.readme.md
index 7dca73c33a4..9b7c09a8699 100644
--- a/src/translate/.detection/cli/config-unset.readme.md
+++ b/src/translate/.detection/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-build.readme.md b/src/translate/.detection/cli/cordova-build.readme.md
index 5859a7e2658..774bb3c3bab 100644
--- a/src/translate/.detection/cli/cordova-build.readme.md
+++ b/src/translate/.detection/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-compile.readme.md b/src/translate/.detection/cli/cordova-compile.readme.md
index f234fefe548..947b914334f 100644
--- a/src/translate/.detection/cli/cordova-compile.readme.md
+++ b/src/translate/.detection/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
+Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-emulate.readme.md b/src/translate/.detection/cli/cordova-emulate.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/.detection/cli/cordova-emulate.readme.md
+++ b/src/translate/.detection/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-platform.readme.md b/src/translate/.detection/cli/cordova-platform.readme.md
index 1b289c0ac8f..f65aea27395 100644
--- a/src/translate/.detection/cli/cordova-platform.readme.md
+++ b/src/translate/.detection/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-plugin.readme.md b/src/translate/.detection/cli/cordova-plugin.readme.md
index 162ba073340..b3ea63900d4 100644
--- a/src/translate/.detection/cli/cordova-plugin.readme.md
+++ b/src/translate/.detection/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
+Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-prepare.readme.md b/src/translate/.detection/cli/cordova-prepare.readme.md
index 6ae022dcaa0..90b7d18e711 100644
--- a/src/translate/.detection/cli/cordova-prepare.readme.md
+++ b/src/translate/.detection/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-requirements.readme.md b/src/translate/.detection/cli/cordova-requirements.readme.md
index edf47772b1f..04bdf9cef01 100644
--- a/src/translate/.detection/cli/cordova-requirements.readme.md
+++ b/src/translate/.detection/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
+Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-resources.readme.md b/src/translate/.detection/cli/cordova-resources.readme.md
index e93fdd8a890..730573a47c3 100644
--- a/src/translate/.detection/cli/cordova-resources.readme.md
+++ b/src/translate/.detection/cli/cordova-resources.readme.md
@@ -11,6 +11,5 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
-
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
diff --git a/src/translate/.detection/cli/cordova-run.readme.md b/src/translate/.detection/cli/cordova-run.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/.detection/cli/cordova-run.readme.md
+++ b/src/translate/.detection/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/generate.readme.md b/src/translate/.detection/cli/generate.readme.md
index 042f64a7a4c..30de99a2484 100644
--- a/src/translate/.detection/cli/generate.readme.md
+++ b/src/translate/.detection/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
-- For a full list of available types, use `npx ng g --help`
-- For a list of options for a types, use `npx ng g <type> --help`
+ - For a full list of available types, use `npx ng g --help`
+ - For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
+To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/git-remote.readme.md b/src/translate/.detection/cli/git-remote.readme.md
index 58347c24535..b4caf425642 100644
--- a/src/translate/.detection/cli/git-remote.readme.md
+++ b/src/translate/.detection/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/info.readme.md b/src/translate/.detection/cli/info.readme.md
index d633e373984..03f86bc2907 100644
--- a/src/translate/.detection/cli/info.readme.md
+++ b/src/translate/.detection/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/init.readme.md b/src/translate/.detection/cli/init.readme.md
index 918620be789..98b3118bed5 100644
--- a/src/translate/.detection/cli/init.readme.md
+++ b/src/translate/.detection/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/integrations-disable.readme.md b/src/translate/.detection/cli/integrations-disable.readme.md
index b4f4a38bdd0..5418badf555 100644
--- a/src/translate/.detection/cli/integrations-disable.readme.md
+++ b/src/translate/.detection/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
+Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/integrations-enable.readme.md b/src/translate/.detection/cli/integrations-enable.readme.md
index 76526785eaa..945fcbbb226 100644
--- a/src/translate/.detection/cli/integrations-enable.readme.md
+++ b/src/translate/.detection/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
+Integrations can be re-added with the `--add` option.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/integrations-list.readme.md b/src/translate/.detection/cli/integrations-list.readme.md
index d075d211e95..044dd455e0e 100644
--- a/src/translate/.detection/cli/integrations-list.readme.md
+++ b/src/translate/.detection/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
+- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
diff --git a/src/translate/.detection/cli/link.readme.md b/src/translate/.detection/cli/link.readme.md
index f5a96a51946..e621a2e948a 100644
--- a/src/translate/.detection/cli/link.readme.md
+++ b/src/translate/.detection/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-add.readme.md b/src/translate/.detection/cli/live-update-add.readme.md
index d2aebb869cd..bc0316117d7 100644
--- a/src/translate/.detection/cli/live-update-add.readme.md
+++ b/src/translate/.detection/cli/live-update-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for bo
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/live-update-configure.readme.md b/src/translate/.detection/cli/live-update-configure.readme.md
index d4bc34cffba..1d8c7504c8f 100644
--- a/src/translate/.detection/cli/live-update-configure.readme.md
+++ b/src/translate/.detection/cli/live-update-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Live Update plugin (`cordov
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/login.readme.md b/src/translate/.detection/cli/login.readme.md
index ce63bb58ac0..0fbe95d2ae8 100644
--- a/src/translate/.detection/cli/login.readme.md
+++ b/src/translate/.detection/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/logout.readme.md b/src/translate/.detection/cli/logout.readme.md
index 540a69a156c..4122a7422e5 100644
--- a/src/translate/.detection/cli/logout.readme.md
+++ b/src/translate/.detection/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
+If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/repair.readme.md b/src/translate/.detection/cli/repair.readme.md
index 9b01e9d40d8..dbb18055c3a 100644
--- a/src/translate/.detection/cli/repair.readme.md
+++ b/src/translate/.detection/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/serve.readme.md b/src/translate/.detection/cli/serve.readme.md
index a9b7bd7d2af..b08bf89fccf 100644
--- a/src/translate/.detection/cli/serve.readme.md
+++ b/src/translate/.detection/cli/serve.readme.md
@@ -4,4 +4,4 @@ By default, `ionic serve` boots up a development server on `localhost`. To serve
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/signup.readme.md b/src/translate/.detection/cli/signup.readme.md
index 82d215181a5..4761dfdf982 100644
--- a/src/translate/.detection/cli/signup.readme.md
+++ b/src/translate/.detection/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/ssh-setup.readme.md b/src/translate/.detection/cli/ssh-setup.readme.md
index b95050beae9..f6ed6f93cb8 100644
--- a/src/translate/.detection/cli/ssh-setup.readme.md
+++ b/src/translate/.detection/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/.detection/cli/ssh-use.readme.md b/src/translate/.detection/cli/ssh-use.readme.md
index 4714fa29928..b9a78d4db3e 100644
--- a/src/translate/.detection/cli/ssh-use.readme.md
+++ b/src/translate/.detection/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/ssl-generate.readme.md b/src/translate/.detection/cli/ssl-generate.readme.md
index aea3ec98cc5..c49644b96ef 100644
--- a/src/translate/.detection/cli/ssl-generate.readme.md
+++ b/src/translate/.detection/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
diff --git a/src/translate/.detection/cli/start.readme.md b/src/translate/.detection/cli/start.readme.md
index 9b3d3b471e4..45b725f705d 100644
--- a/src/translate/.detection/cli/start.readme.md
+++ b/src/translate/.detection/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 986eeabbc94..1fbd6aab841 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,2 +1,3 @@
+
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
index 90e1ee9b77e..deb9dde4602 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,3 +1,4 @@
+
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
index 11db0748e34..420a0d400d4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
index a21a70fb083..fb2004ca29c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,3 +1,4 @@
+
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
index 41472b2e411..56e36fe9053 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1 +1,2 @@
+
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
index 8f50b6279c0..b18059b0829 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
+
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
-
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
index e11ad80b4a3..8bc209c7e54 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,3 +1,4 @@
+
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
index 0303990f06b..18f742e5108 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,3 +1,4 @@
+
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 23e8c973bf2..76387367a61 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index e27b0ba6540..822209a4a72 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1 +1,2 @@
+
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index c31c989a3d3..93a3f290203 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,3 +1,4 @@
+
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 64f0fad3191..3592aee1757 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
index a82b309d78c..2eb94af7221 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
index 8e414578f93..0c671a0c2d0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
index 5f6722050b0..48c289cc3fb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1 +1,2 @@
+
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
index 2813a5d498b..5672e0b2213 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index 95a88837497..d7ef092bae5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index ef9f2968a8f..c331a7d05f5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index e84626aea1d..6d2e7862965 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,2 +1,3 @@
+
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
index e89f74940ca..c1b58f99edf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1 +1,3 @@
+
+
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
index aff2e2cb4d6..0db391fddba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1 +1,2 @@
+
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
index bb919529254..12d31c41dd7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1 +1,2 @@
+
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
index fbde6778edf..87dd87d5765 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to read and write app preferences
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
index c2d7f1730a0..c0210b3f9e5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,3 +1,4 @@
+
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
index 6b4fa2e5c61..08cfe48a452 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,3 +1,4 @@
+
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
index 6213470725d..1e612327b09 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1 +1,2 @@
+
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
index b3fd1055a9a..79bd464667d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
index 41c425d19c7..af28dc677bd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1 +1,2 @@
+
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
index 4197b26f800..f0017f9025d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1 +1,2 @@
+
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
index 4c69face47f..d1ce36553bc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,2 +1,3 @@
+
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
index b066c65401a..48d67747675 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,2 +1,3 @@
+
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
index 3a4a3e352cf..62278126195 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,3 +1,4 @@
+
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
index b1cfb8cd04b..a43e7c719b2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,2 +1,3 @@
+
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
index ee73844b3c8..90ce8edd2ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,2 +1,3 @@
+
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
index 9ab2fed769b..bc94608b2c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1 +1,2 @@
+
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
index 52465e564f0..11775820229 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,3 +1,4 @@
+
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
index 33af83938f9..ebe978c896a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1 +1,2 @@
+
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index 747418e7857..d40a29ab2a1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,3 +1,4 @@
+
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index b84c09c835f..9f16d6d8f42 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
+This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
index 340db120adf..06a0311c510 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
@@ -1 +1,2 @@
+
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
index 2c657416aef..da71524f3d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
index bd325268e71..0725aba40ce 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1 +1,2 @@
+
 BioCatch SDK Cordova support
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index b1b5ec0f81c..6be6e7318ae 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,2 +1,3 @@
+
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
index 8d23815cab0..4818853ac89 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
index f0f05bc6a1f..52d671c0034 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,2 +1,3 @@
+
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
index 6f149bce706..b6cae0f21fd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1 +1,2 @@
+
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index c0281f22a59..639b85fee5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3b80e3d0ecd..3ae195d12de 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,3 +1,4 @@
+
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index d0939b5fde7..f3579d8e616 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
index 9921b18062b..29af8d97385 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,8 +1,9 @@
+
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
-Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+ Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
-For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+ For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
index a222a2efbe7..b9836ebd4c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1 +1,2 @@
+
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
index d97dd2af981..51b06d0cc15 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,3 +1,4 @@
+
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
index b925da2342c..71995e79760 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1 +1,2 @@
+
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
index f03b8b179a9..bf83901883b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1 +1,2 @@
+
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
index 7b8674b3871..7e5a437d1d3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1 +1,2 @@
+
 This plugin provides build information.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
index 515f629e662..5a83eede868 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,3 +1,5 @@
+
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
index b0ecb7bb40b..16d031664c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,2 +1,3 @@
+
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
index 76f6447e69b..a2b5e1bab30 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1 +1,2 @@
+
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
index 2914b087a64..d68a0a44b0e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,2 +1,3 @@
+
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
index 9b06352e407..31cf59dc30b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,3 +1,4 @@
+
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
index aa5cc82125d..a354d9c7925 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,13 +1,12 @@
+
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
-
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
-
 inside of the <platform name='ios> section
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
index 752a6da1f4f..76c58120b44 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
+
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
-
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
index 953ca23cf89..8518bffadeb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,5 +1,6 @@
 Plugin for using Apple's ClassKit framework.
 
+
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
index 5b82513228d..f6b4973e48e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
index 603b2b8f6b3..3176d5f4017 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1 +1,3 @@
+
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 7e3928e3cd5..939c06b2441 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1 +1,2 @@
+
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
index 9d0f8be2ea1..3688eedbcac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1 +1,2 @@
+
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
index b03bd091c4c..9cf894081e8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,3 +1,4 @@
+
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index b32e2c7cacd..4bb2367cd5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1 +1,2 @@
+
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
index b7061033770..0243a89bfa0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1 +1,2 @@
+
 Access and manage Contacts on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index ee32121391a..4a13e8229fa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1 +1,2 @@
+
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
index 9faa50aaed7..6c659180b50 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
+Crops images
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 9116ddca6eb..5c24399bc42 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1 +1,2 @@
+
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
index d2632a61abf..5eed8b85866 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1 +1,2 @@
+
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
index cabc3d4ff44..08fbb92c20c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
index 8943e5b9ca4..bffae754b58 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1 +1,2 @@
+
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
index f11c48fa910..ad508847c3e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1 +1,3 @@
+
+
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
index 4dbbb06d71c..abe72e3b6c0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
index e96364431a7..02c713e2138 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
index 3dbd2dec8e3..c6ef6980695 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
@@ -1 +1,2 @@
+
 Access information about the underlying device and platform.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
index ac9d8279b92..893058bc4eb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1 +1,2 @@
+
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
index 64c6b6393fe..a90f9cfbe85 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1 +1,2 @@
+
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
index f988d884a0c..11ac16aafc6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
index 3a08f9c811c..7eac80f6cff 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,2 +1,4 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
index 03cd028ccfd..29d32018802 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1 +1,2 @@
+
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
index 605e7b14d41..7e39f62d9b0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1 +1,2 @@
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
+
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
index dad89444163..f15e01b1143 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1 +1,3 @@
+
 This plugin is designed to support downloading files using Android DownloadManager.
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
index a305d027409..4176ac2a7b9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1 +1,4 @@
+
+
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
index d0554945c4c..81259d50cc1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,3 +1,5 @@
+
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index b76b54f6046..40349a8306b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1 +1,2 @@
+
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 043375415ac..16c3ea63d2a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-Retrieves additional device information from the Device Hardware
 
-- memory
-- cpumhz
-- totalstorage
-- freestorage
+Retrieves additional device information from the Device Hardware
+ - memory
+ - cpumhz
+ - totalstorage
+ - freestorage
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
index b140e97cb32..12d214e6d38 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,3 +1,4 @@
+
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
index 93e5e887491..df9af63f74b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,10 +1,11 @@
+
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
-To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+ To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -29,7 +30,6 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
-
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
-
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-#### Android Install
 
+#### Android Install
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
+
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
index dbbb3b72132..f3790772c17 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1 +1,2 @@
+
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
index 4bf1bdf418f..b4553ad9baf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
index f1b5408277a..4fdfccbf60d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1 +1,2 @@
+
 Simple file encryption for Cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
index a719c048fe4..ba26e51b8cd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1 +1,2 @@
+
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
index 1f3eeb42d5a..c9445ac1ce7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1 +1,3 @@
+
+
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
index 3616dbd3573..b33dc3c0f97 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
index 4770407e60d..c8ba532eae9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to upload and download files.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
index 28bc40d6e90..1e61b343d6b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
+
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
-
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
-This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
-The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
-Although most of the plugin code was written when an earlier spec was current: http:
-//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-//dev.w3.org/2009/dap/file-system/file-writer.html
+ This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+ The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+ Although most of the plugin code was written when an earlier spec was current: http:
+  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index ce125266039..f87a05030d7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -5,9 +6,7 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-
-For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
-
+For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 410431f731b..4da15cc2ef6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
index 38a8b24123d..45a214eee3a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
index a1c32524c76..2d8b3effb06 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1 +1,2 @@
+
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index b88fed62436..2ad1e2109bd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1 +1,2 @@
+
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 2cfe3a22194..6efc1b8ae10 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -9,7 +10,6 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
-
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 6a18f9fcf39..5bdcf74de11 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
index d1f83c84392..433e365a6a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
index aa17963327a..e044eb6dc66 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,2 +1,3 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
index 6c21f982616..25001f76e05 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1 +1,2 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index e57049202bf..80ef2d51635 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1 +1,2 @@
+
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
index 563b7c87954..6d68d07b0fe 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,8 +1,9 @@
+
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into `config.xml`:
+For android API 28+, the following xml snippet should be inserted into ```config.xml```:
 
 ```
 ...
@@ -11,4 +12,4 @@ For android API 28+, the following xml snippet should be inserted into `config.x
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
index 5987065177c..0cd5a4278d8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1 +1,2 @@
+
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
index 5dda6c71ade..a56ed3a0093 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,2 +1,3 @@
+
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
index 2f83489f5fb..6e993e8f8a8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
index 0391a010ff3..8d55357a600 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,11 +1,12 @@
+
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
-This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+ This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
-
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
index 840cf8d4fb5..d1a3161e0b4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1 +1,2 @@
+
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
index 8ebef774b81..1c759160579 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
+
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
-
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
index 0e715c64736..42ea1211a02 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1 +1,2 @@
+
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index a10f89326aa..e40dfc4db5e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
index 676268db9d5..fb0392b4d72 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
+Read Gyroscope sensor data
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
index 6f496fc37ad..9cc2bc1f297 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
@@ -1 +1,2 @@
+
 HCE Cordova Wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
index 271a47a93b3..ad82eb6b43a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
index 466271d3cba..dbd72bc8324 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,2 +1,3 @@
+
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
index f49780a8921..349af915eac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
@@ -1 +1,2 @@
+
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
index 2ba246ebaf0..e49b6cbc6ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
index 3fcae7e8052..40ad52f5a5d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
+
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
-
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
index 14a21342440..4421569a8f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1 +1,2 @@
-Embedded httpd for Cordova apps. Light weight HTTP server.
+
+Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index 8a8ae830783..d223513c705 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
index accd867793f..ee369f17322 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides functions for working with iBeacons.
 
-The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+ The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
index 8f9c76acd94..75f3775bff1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,3 +1,4 @@
+
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
index 88fa3c7bf5c..40b02d55e6b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin For Image Resize
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
index e6e57be76e7..f699597a628 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,3 +1,4 @@
+
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 0485062862e..87d0037b909 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
+Launches in app Browser
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index b6be39d32c9..5bcd6494c48 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,24 +1,25 @@
+
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|                      | ios | android | win-8 | win-10/uwp | mac |
-| -------------------- | --- | ------- | ----- | ---------- | --- |
-| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
-| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
-| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
-| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
-| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
-| downloadable content | ✅  |         |       |            | ✅  |
-| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
+|  | ios | android | win-8 | win-10/uwp | mac |
+|--|--|--|--|--|--|
+| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
+| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
+| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
+| downloadable content | ✅ |   |   |   | ✅ |
+| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
 
 Supports:
 
-- **iOS** version 7.0 or higher.
-- **Android** version 2.2 (API level 8) or higher
-  - with Google Play client version 3.9.16 or higher
-- **Windows** Store/Phone 8.1 or higher
-- **Windows 10 Mobile**
-- **macOS** version 10
-- **Xbox One**
-  - (and any platform supporting Microsoft's UWP)
+ - **iOS** version 7.0 or higher.
+ - **Android** version 2.2 (API level 8) or higher
+   - with Google Play client version 3.9.16 or higher
+ - **Windows** Store/Phone 8.1 or higher
+ - **Windows 10 Mobile**
+ - **macOS** version 10
+ - **Xbox One**
+   - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 143985e329b..5fbffa5c65b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1 +1,2 @@
+
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
index 8e174f56973..32b56cbab41 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,3 +1,5 @@
+
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
index c28c9dcb463..365932222f7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
index 680fb4b5caa..77bbacfc378 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1 +1,2 @@
+
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
index 685bec69d99..93b6eee3eb3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
+
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
-
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
index 6526cd4d4ff..3cecc84de9e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 1c68245f996..6fe62b6c53a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,3 +1,4 @@
+
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index 708074a0ab2..b8ea2b47c9e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1 +1,2 @@
+
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
index 03fc8b67cb1..8a75e4fc94f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,2 +1,3 @@
+
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
index ed15dd96b1c..2895fffa54c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1 +1,2 @@
+
 Implementation of the JINS MEME SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
index be8555b753a..9fde9b57805 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
index b86b22652c5..1ccf061fc98 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,3 +1,4 @@
+
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index d2e63dd18d1..cca62d8b43e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,2 +1,3 @@
+
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
index ae817d52f6d..7764ef64d16 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,3 +1,4 @@
+
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
index 013e0cacbed..c28100fc7ff 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,3 +1,4 @@
+
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
index a272d33f4e3..125e1108746 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,2 +1,3 @@
+
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 105b197495b..0306a39d956 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
index 2f3437ec5c2..942352f7056 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,4 +1,5 @@
-Assists in leaving user reviews/ratings in the App Stores.
 
+
+Assists in leaving user reviews/ratings in the App Stores.
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
index fc39816081a..6cc5413db8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1 +1,2 @@
+
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
index f6123e51703..2085ded77a8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1 +1,2 @@
+
 This plugin to create local backup
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
index 6cfdd379643..82c183d6fee 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
index ed018edb499..99d60417c8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index e67243449ae..539dbf0c5b4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
index bead6de72c2..55292ec8b1b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1 +1,2 @@
+
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
index ca5ec6a2525..9e5778eab23 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
index 0fa09982e5b..281c8d456ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
@@ -1 +1,2 @@
+
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
index 69b6b0ebf1b..92cacd40a12 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
index f67d2174eea..9d07585f502 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
index 63f05dbf100..13edc56092e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
index f3eb05040cf..75e25a2c230 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index c159f3801cb..b8584c4e0ae 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1 +1,2 @@
+
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index 0d06c413e79..e9f6b965a20 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,2 +1,3 @@
+
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index d71ef31d811..30c9e83dc6d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,3 +1,4 @@
+
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
index 0390d514207..72ffec61b13 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,4 +1,5 @@
+
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index 1a4f27e7fd5..ba01c25cf88 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1 +1,2 @@
+
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
index 04fe4a3bf33..e5465ae0a91 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,3 +1,4 @@
+
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
index 7bbca215ca4..b37886b1b59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
+Native Audio Playback
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 5468f7f9077..3e9b7575290 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
index faea3298df2..cd2d3dab18a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1 +1,3 @@
+
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index 266ae69275a..edd6e9c39ee 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1 +1,2 @@
+
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 9a2e0d43722..7bcffb8dee4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,2 +1,3 @@
+
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
index 4e29c4eeb6a..ad0db3ff5c9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1 +1,2 @@
+
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
index 837c7e475a5..ab6d1bf9d08 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1 +1,2 @@
+
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
index 9a5f7a35d4e..5ad7357168c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
index a81214659db..92837035391 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
+
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
-
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
index 9632b1f0155..4e1c4bcb571 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,4 +1,5 @@
+
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
index dd7010c8876..5ddc2066105 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,3 +1,4 @@
+
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -5,13 +6,11 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
-
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
-
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -66,4 +65,5 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-   `$ chmod +x hooks/copy_android_notification_icons.js`
+`$ chmod +x hooks/copy_android_notification_icons.js`
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 11e9c0ca52c..0be0100f96d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1 +1,2 @@
-Plugin to open native screens of iOS/android settings
+
+Plugin to open native screens of iOS/android settings
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
index c59128571c6..077568f6f76 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1 +1,2 @@
+
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
index 4caf38450f4..97823a256c7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1 +1,2 @@
+
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
index 4f099e14ed4..e45425cee51 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 22692f6e35d..0b14edafe4a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
index 81ece364e1f..c6fcd66be8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,2 +1,3 @@
+
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index 1510b50b7b6..dd840c8b485 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,2 +1,3 @@
+
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
index 77e517bcbd9..1f20587b9e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,3 +1,4 @@
+
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
index c4ca80fa312..642ad87c3ba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
index 6596e0e430f..6ea7514c5fa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
index d1bb01fec7e..2c12503cd71 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,3 +1,6 @@
+
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
+
+
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
index 9a9cc59bc6c..fa7a099a33f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Pinterest
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
index b1cab91f830..c42c478d81d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1 +1,2 @@
+
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
index 4ed7aff21ca..eaca280cad2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,2 +1,3 @@
+
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
index 1985ca44851..779cd5d6ec2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,2 +1,3 @@
+
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
index 5aff311b111..312ac4a9125 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
+Prints documents or HTML rendered content
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 909c2ef0dbb..51bb27361c9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1 +1,2 @@
+
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
index dc1a4fbbb4b..7f42a5bcd96 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
+
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
-
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
index a9c3464e985..5ae1db23037 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
index e65c6c7edd7..464bba08731 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
index d9b32939ab5..fcc40802c3d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,3 +1,4 @@
+
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 55b6fc63435..3dcb9304702 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,3 +1,4 @@
+
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index 505b461b09c..a90b29a29b0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1 +1,2 @@
+
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
index 2d13f688d77..13214fabab4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
@@ -1 +1,2 @@
+
 This plugin to restart android application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
index 9f1d179bd5c..1b4e50f1b68 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1 +1,2 @@
+
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index 6153b43d685..c635a5fd046 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,3 +1,4 @@
+
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
index a83e7487c9e..416c63df2e9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
index e9b365c009a..15c0b85bf5f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
+Captures a screen shot
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
index 5af0e96163c..a4c9c37f0b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1 +1,2 @@
+
 This plugin enables sensors on Android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
index a16c1211a8c..125a3910c49 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
@@ -1 +1,2 @@
+
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
index b13d7210b0e..aca58cc645a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
index 917873665cf..5608715c9fa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
+Handles shake gesture
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 630d79ceeb0..8ab0b4dd94f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index 40b7e9082ef..d7fe4d72b94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,3 +1,4 @@
+
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index f02092735e3..e8991e9348b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,6 +1,7 @@
+
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-_Source:_ https://developer.apple.com/sign-in-with-apple/
+*Source:* https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
index 80e74390f46..52c91993c93 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,3 +1,4 @@
+
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index 00c77e7cdfc..e6270053a4a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,3 +1,4 @@
+
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
index 696999e2340..83f1f737e59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,2 +1,3 @@
+
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
index 3af874243f1..eb6aaf6b11c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1 +1,2 @@
+
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
index d64c2f4cab6..b0ba3252b25 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
@@ -1 +1,3 @@
+
+
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
index 3edd7dba0d1..760be2d9030 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,3 +1,4 @@
+
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
index efc07916d88..ccd38016353 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1 +1,2 @@
+
 This plugin does speech recognition using cloud services
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
index 5521af0b3b3..8623152c556 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1 +1,2 @@
+
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 97f3a5146a5..66329069921 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
index 1a5acf29e82..31117f45f87 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
index cbc01dcad68..bce7a50dba7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-Cordova plugin for authenticating with Spotify
 
+Cordova plugin for authenticating with Spotify
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 1f34ca227ed..92e4d096de7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
index bfb4c960c5d..0d19359e763 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1 +1,2 @@
+
 Access SQLite databases on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 4c8d739d81f..62c602df45a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
index 167ed6673b8..8866094f12f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1 +1,2 @@
-- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+
+* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
index 0c999e9b7e3..d2df403f415 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,3 +1,4 @@
+
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
index b6a57d237ac..918f0320b25 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
+
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
-
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
index 5a521be5eb5..b093d14b4af 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
index 2e8f0e8c676..32f49f8fb59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
index 22c07237113..373fa2e0f42 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1 +1,2 @@
+
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 4c4cc795164..6a1864ed364 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1 +1,2 @@
+
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 8f1ca44e3ad..577ae87896a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 2efbb060915..80ce9a5af77 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
index b53253d0eef..41e946cfc8e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
index cd2ff3ab709..032d6ec13cc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 40815363667..81e3408cc65 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1 +1,2 @@
+
 In-app browser that allows styling.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index aea7b49108e..a78596064d6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,3 +1,4 @@
+
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
index 9034d3ab1f0..c7b5d6c7fba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
index 0bb27885878..02615a1ec9f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,3 +1,4 @@
+
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 0fd10d23d96..16ead04e0ed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
+
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
-
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
index f1dd7f71fd1..8876a612197 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
@@ -1 +1,2 @@
+
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 032854e3607..1db59244ff9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1 +1,2 @@
+
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 5ec8996425d..0b49755a0de 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
-## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
-
-## iOS Requirements
 
+This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+-
+iOS Requirements
+-
 Update your Cocoapods repo before you install the plugin.
-
 ```
 $ pod repo update
 ```
-
-- Browser Requirements
-- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
-
+-
+Browser Requirements
+-
+After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
+```
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
index 1bf710ddbcc..504b3c9eb24 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 857e2854746..5cf251b3c8e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
index c5e46b65ea3..9c299395cf9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,3 +1,4 @@
-The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+
+The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
index f52e258035a..416be944a54 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1 +1,2 @@
+
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
index f82e5deb0ab..dba5defbdd0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
+Vibrates the device
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index f3e970c9efb..a22e03f3945 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 
+This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
index e7f3e1b8a0b..1ee9f14d4a0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
index e6bce9df776..62d0e5158b6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1 +1,2 @@
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
+
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
index 74a4213c286..562d250d54f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 74f478b025e..732d61641b6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
index 981c27c1eb3..a2eb7545759 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1 +1,2 @@
+
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
index b2e43d635c3..639229cba09 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1 +1,2 @@
+
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index ca5fcb58975..e519b6b087f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,3 +1,4 @@
+
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
index 3fef1483ebd..c85ed196728 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,3 +1,5 @@
+
+
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 17fd2049102..65e5f92754a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1 +1,2 @@
+
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
index e0a91fda385..33a16ff46c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,3 +1,4 @@
+
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
index b6d33465570..48620c015e9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1 +1,2 @@
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
+
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
index 6433e0021a7..8550752032e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
index 94a52e6dc07..e358d13434b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
diff --git a/src/translate/api/accordion-group.json b/src/translate/api/accordion-group.json
index e09e4c9e693..111bd46bcd2 100644
--- a/src/translate/api/accordion-group.json
+++ b/src/translate/api/accordion-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/accordion-group/accordion-group.tsx",
+  "filePath": "src/components/accordion-group/accordion-group.tsx",
   "encapsulation": "shadow",
   "tag": "ion-accordion-group",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -48,6 +58,11 @@
     {
       "name": "expand",
       "type": "\"compact\" | \"inset\"",
+      "complexType": {
+        "original": "'compact' | 'inset'",
+        "resolved": "\"compact\" | \"inset\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expand",
       "reflectToAttr": false,
@@ -91,6 +106,11 @@
     {
       "name": "multiple",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -110,6 +130,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -127,6 +152,11 @@
     {
       "name": "value",
       "type": "null | string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[] | null",
+        "resolved": "null | string | string[] | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -156,6 +186,17 @@
       "event": "ionChange",
       "detail": "AccordionGroupChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "AccordionGroupChangeEventDetail",
+        "resolved": "AccordionGroupChangeEventDetail<any>",
+        "references": {
+          "AccordionGroupChangeEventDetail": {
+            "location": "import",
+            "path": "./accordion-group-interface",
+            "id": "src/components/accordion-group/accordion-group-interface.ts::AccordionGroupChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
diff --git a/src/translate/api/accordion.json b/src/translate/api/accordion.json
index 8097c9e2d73..12dc9ef3c80 100644
--- a/src/translate/api/accordion.json
+++ b/src/translate/api/accordion.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/accordion/accordion.tsx",
+  "filePath": "src/components/accordion/accordion.tsx",
   "encapsulation": "shadow",
   "tag": "ion-accordion",
   "docs": "",
@@ -34,6 +34,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -72,6 +77,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -89,6 +99,11 @@
     {
       "name": "toggleIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "toggle-icon",
       "reflectToAttr": false,
@@ -106,6 +121,11 @@
     {
       "name": "toggleIconSlot",
       "type": "\"end\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end'",
+        "resolved": "\"end\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "toggle-icon-slot",
       "reflectToAttr": false,
@@ -128,6 +148,11 @@
     {
       "name": "value",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/api/action-sheet.json b/src/translate/api/action-sheet.json
index 22dd4a06592..0de1b0b5fcf 100644
--- a/src/translate/api/action-sheet.json
+++ b/src/translate/api/action-sheet.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/action-sheet/action-sheet.tsx",
+  "filePath": "src/components/action-sheet/action-sheet.tsx",
   "encapsulation": "scoped",
   "tag": "ion-action-sheet",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
     {
       "name": "buttons",
       "type": "(string | ActionSheetButton<any>)[]",
+      "complexType": {
+        "original": "(ActionSheetButton | string)[]",
+        "resolved": "(string | ActionSheetButton<any>)[]",
+        "references": {
+          "ActionSheetButton": {
+            "location": "import",
+            "path": "./action-sheet-interface",
+            "id": "src/components/action-sheet/action-sheet-interface.ts::ActionSheetButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "An array of buttons for the action sheet.",
@@ -67,6 +88,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -89,6 +115,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the action sheet is presented.",
@@ -107,6 +144,11 @@
     {
       "name": "header",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "header",
       "reflectToAttr": false,
@@ -126,6 +168,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the action sheet.",
@@ -144,6 +191,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -161,6 +213,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -178,6 +235,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the action sheet is dismissed.",
@@ -217,6 +285,11 @@
     {
       "name": "subHeader",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "sub-header",
       "reflectToAttr": false,
@@ -236,6 +309,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -253,6 +331,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -277,6 +360,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the action sheet overlay after it has been presented.",
@@ -297,6 +410,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the action sheet did dismiss.",
@@ -308,6 +441,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the action sheet will dismiss.",
@@ -319,6 +472,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the action sheet overlay after it has been created.",
@@ -330,6 +494,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has dismissed.\nShorthand for ionActionSheetDidDismiss.",
@@ -339,6 +514,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has presented.\nShorthand for ionActionSheetWillDismiss.",
@@ -348,6 +528,17 @@
       "event": "ionActionSheetDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has dismissed.",
@@ -357,6 +548,11 @@
       "event": "ionActionSheetDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the action sheet has presented.",
@@ -366,6 +562,17 @@
       "event": "ionActionSheetWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has dismissed.",
@@ -375,6 +582,11 @@
       "event": "ionActionSheetWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has presented.",
@@ -384,6 +596,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has dismissed.\nShorthand for ionActionSheetWillDismiss.",
@@ -393,6 +616,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the action sheet has presented.\nShorthand for ionActionSheetWillPresent.",
diff --git a/src/translate/api/alert.json b/src/translate/api/alert.json
index 3d1fd438d12..647685f47c6 100644
--- a/src/translate/api/alert.json
+++ b/src/translate/api/alert.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/alert/alert.tsx",
+  "filePath": "src/components/alert/alert.tsx",
   "encapsulation": "scoped",
   "tag": "ion-alert",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
     {
       "name": "buttons",
       "type": "(string | AlertButton)[]",
+      "complexType": {
+        "original": "(AlertButton | string)[]",
+        "resolved": "(string | AlertButton)[]",
+        "references": {
+          "AlertButton": {
+            "location": "import",
+            "path": "./alert-interface",
+            "id": "src/components/alert/alert-interface.ts::AlertButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Array of buttons to be added to the alert.",
@@ -67,6 +88,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -89,6 +115,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the alert is presented.",
@@ -107,6 +144,11 @@
     {
       "name": "header",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "header",
       "reflectToAttr": false,
@@ -126,6 +168,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the alert.",
@@ -144,6 +191,17 @@
     {
       "name": "inputs",
       "type": "AlertInput[]",
+      "complexType": {
+        "original": "AlertInput[]",
+        "resolved": "AlertInput[]",
+        "references": {
+          "AlertInput": {
+            "location": "import",
+            "path": "./alert-interface",
+            "id": "src/components/alert/alert-interface.ts::AlertInput"
+          }
+        }
+      },
       "mutable": true,
       "reflectToAttr": false,
       "docs": "Array of input to show in the alert.",
@@ -160,6 +218,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -177,6 +240,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -194,6 +262,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the alert is dismissed.",
@@ -212,6 +291,17 @@
     {
       "name": "message",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
@@ -255,6 +345,11 @@
     {
       "name": "subHeader",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "sub-header",
       "reflectToAttr": false,
@@ -274,6 +369,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -291,6 +391,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -315,6 +420,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the alert overlay after it has been presented.",
@@ -335,6 +470,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the alert did dismiss.",
@@ -346,6 +501,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the alert will dismiss.",
@@ -357,6 +532,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the alert overlay after it has been created.",
@@ -368,6 +554,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has dismissed.\nShorthand for ionAlertDidDismiss.",
@@ -377,6 +574,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has presented.\nShorthand for ionAlertWillDismiss.",
@@ -386,6 +588,17 @@
       "event": "ionAlertDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has dismissed.",
@@ -395,6 +608,11 @@
       "event": "ionAlertDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the alert has presented.",
@@ -404,6 +622,17 @@
       "event": "ionAlertWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has dismissed.",
@@ -413,6 +642,11 @@
       "event": "ionAlertWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has presented.",
@@ -422,6 +656,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has dismissed.\nShorthand for ionAlertWillDismiss.",
@@ -431,6 +676,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the alert has presented.\nShorthand for ionAlertWillPresent.",
diff --git a/src/translate/api/app.json b/src/translate/api/app.json
index 6a741d86f00..093a00ac590 100644
--- a/src/translate/api/app.json
+++ b/src/translate/api/app.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/app/app.tsx",
+  "filePath": "src/components/app/app.tsx",
   "encapsulation": "none",
   "tag": "ion-app",
   "docs": "",
diff --git a/src/translate/api/avatar.json b/src/translate/api/avatar.json
index a0c9d4bf32f..d4f630152fe 100644
--- a/src/translate/api/avatar.json
+++ b/src/translate/api/avatar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/avatar/avatar.tsx",
+  "filePath": "src/components/avatar/avatar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-avatar",
   "docs": "",
diff --git a/src/translate/api/back-button.json b/src/translate/api/back-button.json
index 7fc1481fbce..dca69141db2 100644
--- a/src/translate/api/back-button.json
+++ b/src/translate/api/back-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/back-button/back-button.tsx",
+  "filePath": "src/components/back-button/back-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-back-button",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -81,6 +92,11 @@
     {
       "name": "defaultHref",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "default-href",
       "reflectToAttr": false,
@@ -100,6 +116,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": true,
@@ -117,6 +138,11 @@
     {
       "name": "icon",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "icon",
       "reflectToAttr": false,
@@ -160,6 +186,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page.",
@@ -178,6 +215,11 @@
     {
       "name": "text",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "text",
       "reflectToAttr": false,
@@ -200,6 +242,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/api/backdrop.json b/src/translate/api/backdrop.json
index 5cccd2731ac..0f5566e34ab 100644
--- a/src/translate/api/backdrop.json
+++ b/src/translate/api/backdrop.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/backdrop/backdrop.tsx",
+  "filePath": "src/components/backdrop/backdrop.tsx",
   "encapsulation": "shadow",
   "tag": "ion-backdrop",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "stopPropagation",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "stop-propagation",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "tappable",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "tappable",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "visible",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "visible",
       "reflectToAttr": false,
@@ -64,6 +79,11 @@
       "event": "ionBackdropTap",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the backdrop is tapped.",
diff --git a/src/translate/api/badge.json b/src/translate/api/badge.json
index 38e091eed13..39541ce9469 100644
--- a/src/translate/api/badge.json
+++ b/src/translate/api/badge.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/badge/badge.tsx",
+  "filePath": "src/components/badge/badge.tsx",
   "encapsulation": "shadow",
   "tag": "ion-badge",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/api/breadcrumb.json b/src/translate/api/breadcrumb.json
index a3430907695..d32dc3324fc 100644
--- a/src/translate/api/breadcrumb.json
+++ b/src/translate/api/breadcrumb.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/breadcrumb/breadcrumb.tsx",
+  "filePath": "src/components/breadcrumb/breadcrumb.tsx",
   "encapsulation": "shadow",
   "tag": "ion-breadcrumb",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "active",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "active",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": false,
@@ -98,6 +114,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -115,6 +136,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -134,6 +160,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -174,6 +205,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -193,6 +229,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -211,6 +258,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -237,6 +295,11 @@
     {
       "name": "separator",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean | undefined",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "separator",
       "reflectToAttr": false,
@@ -256,6 +319,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -279,6 +347,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the breadcrumb loses focus.",
@@ -288,6 +361,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the breadcrumb has focus.",
diff --git a/src/translate/api/breadcrumbs.json b/src/translate/api/breadcrumbs.json
index a86cd7f333c..a5df2c4822b 100644
--- a/src/translate/api/breadcrumbs.json
+++ b/src/translate/api/breadcrumbs.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/breadcrumbs/breadcrumbs.tsx",
+  "filePath": "src/components/breadcrumbs/breadcrumbs.tsx",
   "encapsulation": "shadow",
   "tag": "ion-breadcrumbs",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "itemsAfterCollapse",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "items-after-collapse",
       "reflectToAttr": false,
@@ -86,6 +102,11 @@
     {
       "name": "itemsBeforeCollapse",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "items-before-collapse",
       "reflectToAttr": false,
@@ -103,6 +124,11 @@
     {
       "name": "maxItems",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max-items",
       "reflectToAttr": false,
@@ -147,6 +173,17 @@
       "event": "ionCollapsedClick",
       "detail": "BreadcrumbCollapsedClickEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "BreadcrumbCollapsedClickEventDetail",
+        "resolved": "BreadcrumbCollapsedClickEventDetail",
+        "references": {
+          "BreadcrumbCollapsedClickEventDetail": {
+            "location": "import",
+            "path": "../breadcrumb/breadcrumb-interface",
+            "id": "src/components/breadcrumb/breadcrumb-interface.ts::BreadcrumbCollapsedClickEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the collapsed indicator is clicked on.",
diff --git a/src/translate/api/button.json b/src/translate/api/button.json
index cbb1b55b027..b8a7ec24677 100644
--- a/src/translate/api/button.json
+++ b/src/translate/api/button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/button/button.tsx",
+  "filePath": "src/components/button/button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-button",
   "docs": "",
@@ -34,6 +34,11 @@
     {
       "name": "buttonType",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": true,
       "attr": "button-type",
       "reflectToAttr": false,
@@ -51,6 +56,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -106,6 +122,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": true,
@@ -123,6 +144,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -142,6 +168,11 @@
     {
       "name": "expand",
       "type": "\"block\" | \"full\" | undefined",
+      "complexType": {
+        "original": "'full' | 'block'",
+        "resolved": "\"block\" | \"full\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expand",
       "reflectToAttr": true,
@@ -166,6 +197,11 @@
     {
       "name": "fill",
       "type": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'clear' | 'outline' | 'solid' | 'default'",
+        "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "fill",
       "reflectToAttr": true,
@@ -198,6 +234,16 @@
     {
       "name": "form",
       "type": "HTMLFormElement | string | undefined",
+      "complexType": {
+        "original": "string | HTMLFormElement",
+        "resolved": "HTMLFormElement | string | undefined",
+        "references": {
+          "HTMLFormElement": {
+            "location": "global",
+            "id": "global::HTMLFormElement"
+          }
+        }
+      },
       "mutable": false,
       "attr": "form",
       "reflectToAttr": false,
@@ -220,6 +266,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -260,6 +311,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -279,6 +335,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -297,6 +364,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -323,6 +401,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": true,
@@ -343,6 +426,11 @@
     {
       "name": "size",
       "type": "\"default\" | \"large\" | \"small\" | undefined",
+      "complexType": {
+        "original": "'small' | 'default' | 'large'",
+        "resolved": "\"default\" | \"large\" | \"small\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": true,
@@ -371,6 +459,11 @@
     {
       "name": "strong",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "strong",
       "reflectToAttr": false,
@@ -388,6 +481,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -407,6 +505,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -437,6 +540,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button loses focus.",
@@ -446,6 +554,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button has focus.",
diff --git a/src/translate/api/buttons.json b/src/translate/api/buttons.json
index 1a7fdced0b2..b5c22aa638a 100644
--- a/src/translate/api/buttons.json
+++ b/src/translate/api/buttons.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/buttons/buttons.tsx",
+  "filePath": "src/components/buttons/buttons.tsx",
   "encapsulation": "scoped",
   "tag": "ion-buttons",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "collapse",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "collapse",
       "reflectToAttr": false,
diff --git a/src/translate/api/card-content.json b/src/translate/api/card-content.json
index fa332c45e98..ae5db2661a2 100644
--- a/src/translate/api/card-content.json
+++ b/src/translate/api/card-content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-content/card-content.tsx",
+  "filePath": "src/components/card-content/card-content.tsx",
   "encapsulation": "none",
   "tag": "ion-card-content",
   "docs": "",
diff --git a/src/translate/api/card-header.json b/src/translate/api/card-header.json
index 48a1dac21e0..cef725d1da3 100644
--- a/src/translate/api/card-header.json
+++ b/src/translate/api/card-header.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-header/card-header.tsx",
+  "filePath": "src/components/card-header/card-header.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card-header",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +101,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/api/card-subtitle.json b/src/translate/api/card-subtitle.json
index 1963c6a2ff8..621ddec9699 100644
--- a/src/translate/api/card-subtitle.json
+++ b/src/translate/api/card-subtitle.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-subtitle/card-subtitle.tsx",
+  "filePath": "src/components/card-subtitle/card-subtitle.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card-subtitle",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/api/card-title.json b/src/translate/api/card-title.json
index 043b76990f5..4880070eebd 100644
--- a/src/translate/api/card-title.json
+++ b/src/translate/api/card-title.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card-title/card-title.tsx",
+  "filePath": "src/components/card-title/card-title.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card-title",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/api/card.json b/src/translate/api/card.json
index e24016151cc..0711d65210d 100644
--- a/src/translate/api/card.json
+++ b/src/translate/api/card.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/card/card.tsx",
+  "filePath": "src/components/card/card.tsx",
   "encapsulation": "shadow",
   "tag": "ion-card",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "button",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "button",
       "reflectToAttr": false,
@@ -35,6 +40,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +106,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -107,6 +128,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -126,6 +152,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -166,6 +197,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -185,6 +221,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -203,6 +250,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -229,6 +287,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -248,6 +311,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/api/checkbox.json b/src/translate/api/checkbox.json
index ff682759224..a6301a409d6 100644
--- a/src/translate/api/checkbox.json
+++ b/src/translate/api/checkbox.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/checkbox/checkbox.tsx",
+  "filePath": "src/components/checkbox/checkbox.tsx",
   "encapsulation": "shadow",
   "tag": "ion-checkbox",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "checked",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "checked",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -98,6 +114,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -115,6 +136,11 @@
     {
       "name": "indeterminate",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "indeterminate",
       "reflectToAttr": false,
@@ -132,6 +158,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -158,6 +189,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -184,6 +220,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -224,6 +265,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -241,6 +287,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -262,6 +313,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the checkbox loses focus.",
@@ -271,6 +327,17 @@
       "event": "ionChange",
       "detail": "CheckboxChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "CheckboxChangeEventDetail",
+        "resolved": "CheckboxChangeEventDetail<any>",
+        "references": {
+          "CheckboxChangeEventDetail": {
+            "location": "import",
+            "path": "./checkbox-interface",
+            "id": "src/components/checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
@@ -280,6 +347,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the checkbox has focus.",
diff --git a/src/translate/api/chip.json b/src/translate/api/chip.json
index 3991bb4f56e..746e2857818 100644
--- a/src/translate/api/chip.json
+++ b/src/translate/api/chip.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/chip/chip.tsx",
+  "filePath": "src/components/chip/chip.tsx",
   "encapsulation": "shadow",
   "tag": "ion-chip",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -107,6 +123,11 @@
     {
       "name": "outline",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "outline",
       "reflectToAttr": false,
diff --git a/src/translate/api/col.json b/src/translate/api/col.json
index b3530453894..89ac355f62d 100644
--- a/src/translate/api/col.json
+++ b/src/translate/api/col.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/col/col.tsx",
+  "filePath": "src/components/col/col.tsx",
   "encapsulation": "shadow",
   "tag": "ion-col",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "offset",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset",
       "reflectToAttr": false,
@@ -28,6 +33,11 @@
     {
       "name": "offsetLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-lg",
       "reflectToAttr": false,
@@ -47,6 +57,11 @@
     {
       "name": "offsetMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-md",
       "reflectToAttr": false,
@@ -66,6 +81,11 @@
     {
       "name": "offsetSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-sm",
       "reflectToAttr": false,
@@ -85,6 +105,11 @@
     {
       "name": "offsetXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-xl",
       "reflectToAttr": false,
@@ -104,6 +129,11 @@
     {
       "name": "offsetXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "offset-xs",
       "reflectToAttr": false,
@@ -123,6 +153,11 @@
     {
       "name": "pull",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull",
       "reflectToAttr": false,
@@ -142,6 +177,11 @@
     {
       "name": "pullLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-lg",
       "reflectToAttr": false,
@@ -161,6 +201,11 @@
     {
       "name": "pullMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-md",
       "reflectToAttr": false,
@@ -180,6 +225,11 @@
     {
       "name": "pullSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-sm",
       "reflectToAttr": false,
@@ -199,6 +249,11 @@
     {
       "name": "pullXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-xl",
       "reflectToAttr": false,
@@ -218,6 +273,11 @@
     {
       "name": "pullXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-xs",
       "reflectToAttr": false,
@@ -237,6 +297,11 @@
     {
       "name": "push",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push",
       "reflectToAttr": false,
@@ -256,6 +321,11 @@
     {
       "name": "pushLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-lg",
       "reflectToAttr": false,
@@ -275,6 +345,11 @@
     {
       "name": "pushMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-md",
       "reflectToAttr": false,
@@ -294,6 +369,11 @@
     {
       "name": "pushSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-sm",
       "reflectToAttr": false,
@@ -313,6 +393,11 @@
     {
       "name": "pushXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-xl",
       "reflectToAttr": false,
@@ -332,6 +417,11 @@
     {
       "name": "pushXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "push-xs",
       "reflectToAttr": false,
@@ -351,6 +441,11 @@
     {
       "name": "size",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
@@ -370,6 +465,11 @@
     {
       "name": "sizeLg",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-lg",
       "reflectToAttr": false,
@@ -389,6 +489,11 @@
     {
       "name": "sizeMd",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-md",
       "reflectToAttr": false,
@@ -408,6 +513,11 @@
     {
       "name": "sizeSm",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-sm",
       "reflectToAttr": false,
@@ -427,6 +537,11 @@
     {
       "name": "sizeXl",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-xl",
       "reflectToAttr": false,
@@ -446,6 +561,11 @@
     {
       "name": "sizeXs",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size-xs",
       "reflectToAttr": false,
diff --git a/src/translate/api/content.json b/src/translate/api/content.json
index 07dd018764a..753d276ca5f 100644
--- a/src/translate/api/content.json
+++ b/src/translate/api/content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/content/content.tsx",
+  "filePath": "src/components/content/content.tsx",
   "encapsulation": "shadow",
   "tag": "ion-content",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -81,6 +92,11 @@
     {
       "name": "forceOverscroll",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "force-overscroll",
       "reflectToAttr": false,
@@ -100,6 +116,11 @@
     {
       "name": "fullscreen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fullscreen",
       "reflectToAttr": false,
@@ -117,6 +138,11 @@
     {
       "name": "scrollEvents",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scroll-events",
       "reflectToAttr": false,
@@ -134,6 +160,11 @@
     {
       "name": "scrollX",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scroll-x",
       "reflectToAttr": false,
@@ -151,6 +182,11 @@
     {
       "name": "scrollY",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scroll-y",
       "reflectToAttr": false,
@@ -173,6 +209,21 @@
         "type": "Promise<HTMLElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLElement": {
+            "location": "global",
+            "id": "global::HTMLElement"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
       "signature": "getScrollElement() => Promise<HTMLElement>",
       "parameters": [],
       "docs": "Get the element where the actual scrolling takes place.\nThis element can be used to subscribe to `scroll` events or manually modify\n`scrollTop`. However, it's recommended to use the API provided by `ion-content`:\n\ni.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events\nand `scrollToPoint()` to scroll the content into a certain point.",
@@ -184,6 +235,45 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(x: number, y: number, duration: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "x The amount to scroll by on the horizontal axis."
+              }
+            ],
+            "text": "The amount to scroll by on the horizontal axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "y The amount to scroll by on the vertical axis."
+              }
+            ],
+            "text": "The amount to scroll by on the vertical axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling by that amount."
+              }
+            ],
+            "text": "The amount of time to take scrolling by that amount."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll by a specified X/Y distance in the component.",
@@ -208,6 +298,27 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(duration?: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
+              }
+            ],
+            "text": "The amount of time to take scrolling to the bottom. Defaults to `0`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollToBottom(duration?: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll to the bottom of the component.",
@@ -224,6 +335,45 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "x The point to scroll to on the horizontal axis."
+              }
+            ],
+            "text": "The point to scroll to on the horizontal axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "y The point to scroll to on the vertical axis."
+              }
+            ],
+            "text": "The point to scroll to on the vertical axis."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
+              }
+            ],
+            "text": "The amount of time to take scrolling to that point. Defaults to `0`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll to a specified X/Y location in the component.",
@@ -248,6 +398,27 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(duration?: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
+              }
+            ],
+            "text": "The amount of time to take scrolling to the top. Defaults to `0`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "scrollToTop(duration?: number) => Promise<void>",
       "parameters": [],
       "docs": "Scroll to the top of the component.",
@@ -264,6 +435,17 @@
       "event": "ionScroll",
       "detail": "ScrollDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ScrollDetail",
+        "resolved": "ScrollDetail",
+        "references": {
+          "ScrollDetail": {
+            "location": "import",
+            "path": "./content-interface",
+            "id": "src/components/content/content-interface.ts::ScrollDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted while scrolling. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
@@ -273,6 +455,17 @@
       "event": "ionScrollEnd",
       "detail": "ScrollBaseDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ScrollBaseDetail",
+        "resolved": "ScrollBaseDetail",
+        "references": {
+          "ScrollBaseDetail": {
+            "location": "import",
+            "path": "./content-interface",
+            "id": "src/components/content/content-interface.ts::ScrollBaseDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the scroll has ended. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
@@ -282,6 +475,17 @@
       "event": "ionScrollStart",
       "detail": "ScrollBaseDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ScrollBaseDetail",
+        "resolved": "ScrollBaseDetail",
+        "references": {
+          "ScrollBaseDetail": {
+            "location": "import",
+            "path": "./content-interface",
+            "id": "src/components/content/content-interface.ts::ScrollBaseDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the scroll has started. This event is disabled by default.\nSet `scrollEvents` to `true` to enable.",
diff --git a/src/translate/api/datetime-button.json b/src/translate/api/datetime-button.json
index fc3db840e2c..96fb236434c 100644
--- a/src/translate/api/datetime-button.json
+++ b/src/translate/api/datetime-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/datetime-button/datetime-button.tsx",
+  "filePath": "src/components/datetime-button/datetime-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-datetime-button",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -82,6 +93,11 @@
     {
       "name": "datetime",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "datetime",
       "reflectToAttr": false,
@@ -101,6 +117,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": true,
diff --git a/src/translate/api/datetime.json b/src/translate/api/datetime.json
index 3c5637d3ed6..eed97853ccf 100644
--- a/src/translate/api/datetime.json
+++ b/src/translate/api/datetime.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/datetime/datetime.tsx",
+  "filePath": "src/components/datetime/datetime.tsx",
   "encapsulation": "shadow",
   "tag": "ion-datetime",
   "docs": "",
@@ -46,6 +46,11 @@
     {
       "name": "cancelText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-text",
       "reflectToAttr": false,
@@ -63,6 +68,11 @@
     {
       "name": "clearText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-text",
       "reflectToAttr": false,
@@ -80,6 +90,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": false,
@@ -136,6 +157,11 @@
     {
       "name": "dayValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "day-values",
       "reflectToAttr": false,
@@ -161,6 +187,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -178,6 +209,11 @@
     {
       "name": "doneText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "done-text",
       "reflectToAttr": false,
@@ -195,6 +231,11 @@
     {
       "name": "firstDayOfWeek",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "first-day-of-week",
       "reflectToAttr": false,
@@ -212,6 +253,22 @@
     {
       "name": "highlightedDates",
       "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+      "complexType": {
+        "original": "DatetimeHighlight[] | DatetimeHighlightCallback",
+        "resolved": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+        "references": {
+          "DatetimeHighlight": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimeHighlight"
+          },
+          "DatetimeHighlightCallback": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimeHighlightCallback"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`.",
@@ -236,6 +293,11 @@
     {
       "name": "hourCycle",
       "type": "\"h12\" | \"h23\" | undefined",
+      "complexType": {
+        "original": "'h23' | 'h12'",
+        "resolved": "\"h12\" | \"h23\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "hour-cycle",
       "reflectToAttr": false,
@@ -260,6 +322,11 @@
     {
       "name": "hourValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "hour-values",
       "reflectToAttr": false,
@@ -285,6 +352,11 @@
     {
       "name": "isDateEnabled",
       "type": "((dateIsoString: string) => boolean) | undefined",
+      "complexType": {
+        "original": "(dateIsoString: string) => boolean",
+        "resolved": "((dateIsoString: string) => boolean) | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank.",
@@ -303,6 +375,11 @@
     {
       "name": "locale",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "locale",
       "reflectToAttr": false,
@@ -320,6 +397,11 @@
     {
       "name": "max",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "max",
       "reflectToAttr": false,
@@ -339,6 +421,11 @@
     {
       "name": "min",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "min",
       "reflectToAttr": false,
@@ -358,6 +445,11 @@
     {
       "name": "minuteValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "minute-values",
       "reflectToAttr": false,
@@ -404,6 +496,11 @@
     {
       "name": "monthValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "month-values",
       "reflectToAttr": false,
@@ -429,6 +526,11 @@
     {
       "name": "multiple",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -446,6 +548,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -463,6 +570,11 @@
     {
       "name": "preferWheel",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "prefer-wheel",
       "reflectToAttr": false,
@@ -480,6 +592,17 @@
     {
       "name": "presentation",
       "type": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
+      "complexType": {
+        "original": "DatetimePresentation",
+        "resolved": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
+        "references": {
+          "DatetimePresentation": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimePresentation"
+          }
+        }
+      },
       "mutable": false,
       "attr": "presentation",
       "reflectToAttr": false,
@@ -522,6 +645,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -539,6 +667,11 @@
     {
       "name": "showClearButton",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-clear-button",
       "reflectToAttr": false,
@@ -556,6 +689,11 @@
     {
       "name": "showDefaultButtons",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-default-buttons",
       "reflectToAttr": false,
@@ -573,6 +711,11 @@
     {
       "name": "showDefaultTimeLabel",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-default-time-label",
       "reflectToAttr": false,
@@ -590,6 +733,11 @@
     {
       "name": "showDefaultTitle",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-default-title",
       "reflectToAttr": false,
@@ -607,6 +755,11 @@
     {
       "name": "size",
       "type": "\"cover\" | \"fixed\"",
+      "complexType": {
+        "original": "'cover' | 'fixed'",
+        "resolved": "\"cover\" | \"fixed\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
@@ -629,6 +782,17 @@
     {
       "name": "titleSelectedDatesFormatter",
       "type": "((selectedDates: string[]) => string) | undefined",
+      "complexType": {
+        "original": "TitleSelectedDatesFormatter",
+        "resolved": "((selectedDates: string[]) => string) | undefined",
+        "references": {
+          "TitleSelectedDatesFormatter": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::TitleSelectedDatesFormatter"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
@@ -647,6 +811,11 @@
     {
       "name": "value",
       "type": "null | string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[] | null",
+        "resolved": "null | string | string[] | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -672,6 +841,11 @@
     {
       "name": "yearValues",
       "type": "number | number[] | string | undefined",
+      "complexType": {
+        "original": "number[] | number | string",
+        "resolved": "number | number[] | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "year-values",
       "reflectToAttr": false,
@@ -702,6 +876,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(closeOverlay?: boolean) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "cancel(closeOverlay?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
@@ -713,6 +903,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(closeOverlay?: boolean) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "confirm(closeOverlay?: boolean) => Promise<void>",
       "parameters": [],
       "docs": "Confirms the selected datetime value, updates the\n`value` property, and optionally closes the popover\nor modal that the datetime was presented in.",
@@ -724,6 +930,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(startDate?: string) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "reset(startDate?: string) => Promise<void>",
       "parameters": [],
       "docs": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
@@ -735,6 +957,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the datetime loses focus.",
@@ -744,6 +971,11 @@
       "event": "ionCancel",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the datetime selection was cancelled.",
@@ -753,6 +985,17 @@
       "event": "ionChange",
       "detail": "DatetimeChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "DatetimeChangeEventDetail",
+        "resolved": "DatetimeChangeEventDetail",
+        "references": {
+          "DatetimeChangeEventDetail": {
+            "location": "import",
+            "path": "./datetime-interface",
+            "id": "src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value (selected date) has changed.",
@@ -762,6 +1005,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the datetime has focus.",
diff --git a/src/translate/api/fab-button.json b/src/translate/api/fab-button.json
index 2c2b1004e71..72df73bd444 100644
--- a/src/translate/api/fab-button.json
+++ b/src/translate/api/fab-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/fab-button/fab-button.tsx",
+  "filePath": "src/components/fab-button/fab-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-fab-button",
   "docs": "",
@@ -22,6 +22,11 @@
     {
       "name": "activated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "activated",
       "reflectToAttr": false,
@@ -39,6 +44,11 @@
     {
       "name": "closeIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "close-icon",
       "reflectToAttr": false,
@@ -56,6 +66,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -111,6 +132,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -128,6 +154,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -147,6 +178,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -187,6 +223,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -206,6 +247,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -224,6 +276,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -250,6 +313,11 @@
     {
       "name": "show",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show",
       "reflectToAttr": false,
@@ -267,6 +335,11 @@
     {
       "name": "size",
       "type": "\"small\" | undefined",
+      "complexType": {
+        "original": "'small'",
+        "resolved": "\"small\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
@@ -287,6 +360,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -306,6 +384,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -323,6 +406,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -353,6 +441,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button loses focus.",
@@ -362,6 +455,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the button has focus.",
diff --git a/src/translate/api/fab-list.json b/src/translate/api/fab-list.json
index 4ea7b3ca927..07f04093695 100644
--- a/src/translate/api/fab-list.json
+++ b/src/translate/api/fab-list.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/fab-list/fab-list.tsx",
+  "filePath": "src/components/fab-list/fab-list.tsx",
   "encapsulation": "shadow",
   "tag": "ion-fab-list",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "activated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "activated",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "side",
       "type": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'top' | 'bottom'",
+        "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
diff --git a/src/translate/api/fab.json b/src/translate/api/fab.json
index 0965f070745..f96f62047d7 100644
--- a/src/translate/api/fab.json
+++ b/src/translate/api/fab.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/fab/fab.tsx",
+  "filePath": "src/components/fab/fab.tsx",
   "encapsulation": "shadow",
   "tag": "ion-fab",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "activated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "activated",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "edge",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "edge",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "horizontal",
       "type": "\"center\" | \"end\" | \"start\" | undefined",
+      "complexType": {
+        "original": "'start' | 'end' | 'center'",
+        "resolved": "\"center\" | \"end\" | \"start\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "horizontal",
       "reflectToAttr": false,
@@ -71,6 +86,11 @@
     {
       "name": "vertical",
       "type": "\"bottom\" | \"center\" | \"top\" | undefined",
+      "complexType": {
+        "original": "'top' | 'bottom' | 'center'",
+        "resolved": "\"bottom\" | \"center\" | \"top\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "vertical",
       "reflectToAttr": false,
@@ -104,6 +124,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "close() => Promise<void>",
       "parameters": [],
       "docs": "Close an active FAB list container.",
diff --git a/src/translate/api/footer.json b/src/translate/api/footer.json
index 4cf036de3a6..11e42f5d827 100644
--- a/src/translate/api/footer.json
+++ b/src/translate/api/footer.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/footer/footer.tsx",
+  "filePath": "src/components/footer/footer.tsx",
   "encapsulation": "none",
   "tag": "ion-footer",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "collapse",
       "type": "\"fade\" | undefined",
+      "complexType": {
+        "original": "'fade'",
+        "resolved": "\"fade\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "collapse",
       "reflectToAttr": false,
@@ -55,6 +60,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/api/grid.json b/src/translate/api/grid.json
index 08da4cf0fb9..637a537eed0 100644
--- a/src/translate/api/grid.json
+++ b/src/translate/api/grid.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/grid/grid.tsx",
+  "filePath": "src/components/grid/grid.tsx",
   "encapsulation": "shadow",
   "tag": "ion-grid",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "fixed",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fixed",
       "reflectToAttr": false,
diff --git a/src/translate/api/header.json b/src/translate/api/header.json
index 561937ce432..084ae1f3478 100644
--- a/src/translate/api/header.json
+++ b/src/translate/api/header.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/header/header.tsx",
+  "filePath": "src/components/header/header.tsx",
   "encapsulation": "none",
   "tag": "ion-header",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "collapse",
       "type": "\"condense\" | \"fade\" | undefined",
+      "complexType": {
+        "original": "'condense' | 'fade'",
+        "resolved": "\"condense\" | \"fade\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "collapse",
       "reflectToAttr": false,
@@ -59,6 +64,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/api/img.json b/src/translate/api/img.json
index 231648aa1ea..a049bd4587c 100644
--- a/src/translate/api/img.json
+++ b/src/translate/api/img.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/img/img.tsx",
+  "filePath": "src/components/img/img.tsx",
   "encapsulation": "shadow",
   "tag": "ion-img",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "alt",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "alt",
       "reflectToAttr": false,
@@ -33,6 +38,11 @@
     {
       "name": "src",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "src",
       "reflectToAttr": false,
@@ -56,6 +66,11 @@
       "event": "ionError",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the img fails to load",
@@ -65,6 +80,11 @@
       "event": "ionImgDidLoad",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the image has finished loading",
@@ -74,6 +94,11 @@
       "event": "ionImgWillLoad",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the img src has been set",
diff --git a/src/translate/api/infinite-scroll-content.json b/src/translate/api/infinite-scroll-content.json
index 4da189bafce..cce32d296ef 100644
--- a/src/translate/api/infinite-scroll-content.json
+++ b/src/translate/api/infinite-scroll-content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/infinite-scroll-content/infinite-scroll-content.tsx",
+  "filePath": "src/components/infinite-scroll-content/infinite-scroll-content.tsx",
   "encapsulation": "none",
   "tag": "ion-infinite-scroll-content",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "loadingSpinner",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | null",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "loading-spinner",
       "reflectToAttr": false,
@@ -64,6 +75,17 @@
     {
       "name": "loadingText",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "loading-text",
       "reflectToAttr": false,
diff --git a/src/translate/api/infinite-scroll.json b/src/translate/api/infinite-scroll.json
index d807a7da32c..0b339009e47 100644
--- a/src/translate/api/infinite-scroll.json
+++ b/src/translate/api/infinite-scroll.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/infinite-scroll/infinite-scroll.tsx",
+  "filePath": "src/components/infinite-scroll/infinite-scroll.tsx",
   "encapsulation": "none",
   "tag": "ion-infinite-scroll",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "position",
       "type": "\"bottom\" | \"top\"",
+      "complexType": {
+        "original": "'top' | 'bottom'",
+        "resolved": "\"bottom\" | \"top\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "position",
       "reflectToAttr": false,
@@ -48,6 +58,11 @@
     {
       "name": "threshold",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "threshold",
       "reflectToAttr": false,
@@ -70,6 +85,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "complete() => Promise<void>",
       "parameters": [],
       "docs": "Call `complete()` within the `ionInfinite` output event handler when\nyour async operation has completed. For example, the `loading`\nstate is while the app is performing an asynchronous operation,\nsuch as receiving more data from an AJAX request to add more items\nto a data list. Once the data has been received and UI updated, you\nthen call this method to signify that the loading has completed.\nThis method will change the infinite scroll's state from `loading`\nto `enabled`.",
@@ -81,6 +107,11 @@
       "event": "ionInfinite",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the scroll reaches\nthe threshold distance. From within your infinite handler,\nyou must call the infinite scroll's `complete()` method when\nyour async operation has completed.",
diff --git a/src/translate/api/input.json b/src/translate/api/input.json
index 69e165cdcfc..c133859c18b 100644
--- a/src/translate/api/input.json
+++ b/src/translate/api/input.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/input/input.tsx",
+  "filePath": "src/components/input/input.tsx",
   "encapsulation": "scoped",
   "tag": "ion-input",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "accept",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "accept",
       "reflectToAttr": false,
@@ -42,6 +47,11 @@
     {
       "name": "autocapitalize",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocapitalize",
       "reflectToAttr": false,
@@ -59,6 +69,17 @@
     {
       "name": "autocomplete",
       "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+      "complexType": {
+        "original": "AutocompleteTypes",
+        "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+        "references": {
+          "AutocompleteTypes": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AutocompleteTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -289,6 +310,11 @@
     {
       "name": "autocorrect",
       "type": "\"off\" | \"on\"",
+      "complexType": {
+        "original": "'on' | 'off'",
+        "resolved": "\"off\" | \"on\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocorrect",
       "reflectToAttr": false,
@@ -311,6 +337,11 @@
     {
       "name": "autofocus",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autofocus",
       "reflectToAttr": false,
@@ -328,6 +359,11 @@
     {
       "name": "clearInput",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-input",
       "reflectToAttr": false,
@@ -345,6 +381,11 @@
     {
       "name": "clearOnEdit",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-on-edit",
       "reflectToAttr": false,
@@ -364,6 +405,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -419,6 +471,11 @@
     {
       "name": "counter",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "counter",
       "reflectToAttr": false,
@@ -436,6 +493,11 @@
     {
       "name": "counterFormatter",
       "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "complexType": {
+        "original": "(inputLength: number, maxLength: number) => string",
+        "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
@@ -454,6 +516,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -473,6 +540,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -490,6 +562,11 @@
     {
       "name": "enterkeyhint",
       "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+      "complexType": {
+        "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enterkeyhint",
       "reflectToAttr": false,
@@ -534,6 +611,11 @@
     {
       "name": "errorText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "error-text",
       "reflectToAttr": false,
@@ -553,6 +635,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -577,6 +664,11 @@
     {
       "name": "helperText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "helper-text",
       "reflectToAttr": false,
@@ -596,6 +688,11 @@
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+      "complexType": {
+        "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+        "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inputmode",
       "reflectToAttr": false,
@@ -644,6 +741,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -663,6 +765,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -697,6 +804,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -716,6 +828,11 @@
     {
       "name": "max",
       "type": "number | string | undefined",
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max",
       "reflectToAttr": false,
@@ -738,6 +855,11 @@
     {
       "name": "maxlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "maxlength",
       "reflectToAttr": false,
@@ -757,6 +879,11 @@
     {
       "name": "min",
       "type": "number | string | undefined",
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "min",
       "reflectToAttr": false,
@@ -779,6 +906,11 @@
     {
       "name": "minlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "minlength",
       "reflectToAttr": false,
@@ -819,6 +951,11 @@
     {
       "name": "multiple",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -838,6 +975,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -855,6 +997,11 @@
     {
       "name": "pattern",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pattern",
       "reflectToAttr": false,
@@ -874,6 +1021,11 @@
     {
       "name": "placeholder",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -893,6 +1045,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -910,6 +1067,11 @@
     {
       "name": "required",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "required",
       "reflectToAttr": false,
@@ -927,6 +1089,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -947,10 +1114,15 @@
     {
       "name": "size",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
-      "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
+      "docs": "",
       "docsTags": [],
       "values": [
         {
@@ -966,6 +1138,11 @@
     {
       "name": "spellcheck",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "spellcheck",
       "reflectToAttr": false,
@@ -983,6 +1160,11 @@
     {
       "name": "step",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "step",
       "reflectToAttr": false,
@@ -1002,6 +1184,17 @@
     {
       "name": "type",
       "type": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+      "complexType": {
+        "original": "TextFieldTypes",
+        "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+        "references": {
+          "TextFieldTypes": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::TextFieldTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -1064,6 +1257,11 @@
     {
       "name": "value",
       "type": "null | number | string | undefined",
+      "complexType": {
+        "original": "string | number | null",
+        "resolved": "null | number | string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -1095,6 +1293,21 @@
         "type": "Promise<HTMLInputElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLInputElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLInputElement": {
+            "location": "global",
+            "id": "global::HTMLInputElement"
+          }
+        },
+        "return": "Promise<HTMLInputElement>"
+      },
       "signature": "getInputElement() => Promise<HTMLInputElement>",
       "parameters": [],
       "docs": "Returns the native `<input>` element used under the hood.",
@@ -1106,6 +1319,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
       "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
@@ -1117,6 +1341,16 @@
       "event": "ionBlur",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input loses focus.",
@@ -1126,6 +1360,17 @@
       "event": "ionChange",
       "detail": "InputChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "InputChangeEventDetail",
+        "resolved": "InputChangeEventDetail",
+        "references": {
+          "InputChangeEventDetail": {
+            "location": "import",
+            "path": "./input-interface",
+            "id": "src/components/input/input-interface.ts::InputChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired when the user modifies the input's value.\nUnlike the `ionInput` event, the `ionChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
@@ -1135,6 +1380,16 @@
       "event": "ionFocus",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input has focus.",
@@ -1144,6 +1399,17 @@
       "event": "ionInput",
       "detail": "InputInputEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "InputInputEventDetail",
+        "resolved": "InputInputEventDetail",
+        "references": {
+          "InputInputEventDetail": {
+            "location": "import",
+            "path": "./input-interface",
+            "id": "src/components/input/input-interface.ts::InputInputEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionInput` event is fired each time the user modifies the input's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
diff --git a/src/translate/api/item-divider.json b/src/translate/api/item-divider.json
index b99ff7fe930..7eec8a6c01f 100644
--- a/src/translate/api/item-divider.json
+++ b/src/translate/api/item-divider.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-divider/item-divider.tsx",
+  "filePath": "src/components/item-divider/item-divider.tsx",
   "encapsulation": "shadow",
   "tag": "ion-item-divider",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -102,6 +113,11 @@
     {
       "name": "sticky",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "sticky",
       "reflectToAttr": false,
diff --git a/src/translate/api/item-group.json b/src/translate/api/item-group.json
index c637ee7230c..50273726830 100644
--- a/src/translate/api/item-group.json
+++ b/src/translate/api/item-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-group/item-group.tsx",
+  "filePath": "src/components/item-group/item-group.tsx",
   "encapsulation": "none",
   "tag": "ion-item-group",
   "docs": "",
diff --git a/src/translate/api/item-option.json b/src/translate/api/item-option.json
index beddef26aa8..8acbc24b7c9 100644
--- a/src/translate/api/item-option.json
+++ b/src/translate/api/item-option.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-option/item-option.tsx",
+  "filePath": "src/components/item-option/item-option.tsx",
   "encapsulation": "shadow",
   "tag": "ion-item-option",
   "docs": "",
@@ -42,6 +42,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -97,6 +108,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -114,6 +130,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -133,6 +154,11 @@
     {
       "name": "expandable",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expandable",
       "reflectToAttr": false,
@@ -150,6 +176,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -190,6 +221,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -209,6 +245,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -228,6 +269,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/api/item-options.json b/src/translate/api/item-options.json
index bfeec2343fa..838621f34ce 100644
--- a/src/translate/api/item-options.json
+++ b/src/translate/api/item-options.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-options/item-options.tsx",
+  "filePath": "src/components/item-options/item-options.tsx",
   "encapsulation": "none",
   "tag": "ion-item-options",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "side",
       "type": "\"end\" | \"start\"",
+      "complexType": {
+        "original": "Side",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "Side": {
+            "location": "import",
+            "path": "../menu/menu-interface",
+            "id": "src/components/menu/menu-interface.ts::Side"
+          }
+        }
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
@@ -35,6 +46,11 @@
       "event": "ionSwipe",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the item has been fully swiped.",
diff --git a/src/translate/api/item-sliding.json b/src/translate/api/item-sliding.json
index f0fd18a022f..73fbd83224c 100644
--- a/src/translate/api/item-sliding.json
+++ b/src/translate/api/item-sliding.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item-sliding/item-sliding.tsx",
+  "filePath": "src/components/item-sliding/item-sliding.tsx",
   "encapsulation": "none",
   "tag": "ion-item-sliding",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -31,6 +36,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "close() => Promise<void>",
       "parameters": [],
       "docs": "Close the sliding item. Items can also be closed from the [List](./list).",
@@ -42,6 +58,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "closeOpened() => Promise<boolean>",
       "parameters": [],
       "docs": "Close all of the sliding items in the list. Items can also be closed from the [List](./list).",
@@ -53,6 +80,17 @@
         "type": "Promise<number>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number>"
+      },
       "signature": "getOpenAmount() => Promise<number>",
       "parameters": [],
       "docs": "Get the amount the item is open in pixels.",
@@ -64,6 +102,17 @@
         "type": "Promise<number>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number>"
+      },
       "signature": "getSlidingRatio() => Promise<number>",
       "parameters": [],
       "docs": "Get the ratio of the open amount of the item compared to the width of the options.\nIf the number returned is positive, then the options on the right side are open.\nIf the number returned is negative, then the options on the left side are open.\nIf the absolute value of the number is greater than 1, the item is open more than\nthe width of the options.",
@@ -75,6 +124,32 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(side: Side | undefined) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+              }
+            ],
+            "text": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "Side": {
+            "location": "import",
+            "path": "../menu/menu-interface",
+            "id": "src/components/menu/menu-interface.ts::Side"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "open(side: Side | undefined) => Promise<void>",
       "parameters": [],
       "docs": "Open the sliding item.",
@@ -91,6 +166,11 @@
       "event": "ionDrag",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the sliding position changes.",
diff --git a/src/translate/api/item.json b/src/translate/api/item.json
index 1e0df2e5ac2..f0d8f137056 100644
--- a/src/translate/api/item.json
+++ b/src/translate/api/item.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/item/item.tsx",
+  "filePath": "src/components/item/item.tsx",
   "encapsulation": "shadow",
   "tag": "ion-item",
   "docs": "",
@@ -42,6 +42,11 @@
     {
       "name": "button",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "button",
       "reflectToAttr": false,
@@ -59,6 +64,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -114,6 +130,11 @@
     {
       "name": "counter",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "counter",
       "reflectToAttr": false,
@@ -137,6 +158,17 @@
     {
       "name": "counterFormatter",
       "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "complexType": {
+        "original": "CounterFormatter",
+        "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+        "references": {
+          "CounterFormatter": {
+            "location": "import",
+            "path": "./item-interface",
+            "id": "src/components/item/item-interface.ts::CounterFormatter"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
@@ -161,6 +193,11 @@
     {
       "name": "detail",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "detail",
       "reflectToAttr": false,
@@ -180,6 +217,11 @@
     {
       "name": "detailIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "detail-icon",
       "reflectToAttr": false,
@@ -197,6 +239,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -214,6 +261,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -233,6 +285,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -257,6 +314,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -276,6 +338,11 @@
     {
       "name": "lines",
       "type": "\"full\" | \"inset\" | \"none\" | undefined",
+      "complexType": {
+        "original": "'full' | 'inset' | 'none'",
+        "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "lines",
       "reflectToAttr": false,
@@ -325,6 +392,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -344,6 +416,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -362,6 +445,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -388,6 +482,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -408,6 +507,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
@@ -427,6 +531,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -564,22 +673,22 @@
     {
       "name": "--highlight-color-focused",
       "annotation": "prop",
-      "docs": "The color of the highlight on the item when focused"
+      "docs": "The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--highlight-color-invalid",
       "annotation": "prop",
-      "docs": "The color of the highlight on the item when invalid"
+      "docs": "The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--highlight-color-valid",
       "annotation": "prop",
-      "docs": "The color of the highlight on the item when valid"
+      "docs": "The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--highlight-height",
       "annotation": "prop",
-      "docs": "The height of the highlight on the item"
+      "docs": "The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
     },
     {
       "name": "--inner-border-width",
diff --git a/src/translate/api/label.json b/src/translate/api/label.json
index 9a83429e564..28e1f1d248c 100644
--- a/src/translate/api/label.json
+++ b/src/translate/api/label.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/label/label.tsx",
+  "filePath": "src/components/label/label.tsx",
   "encapsulation": "scoped",
   "tag": "ion-label",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +101,11 @@
     {
       "name": "position",
       "type": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
+      "complexType": {
+        "original": "'fixed' | 'stacked' | 'floating'",
+        "resolved": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "position",
       "reflectToAttr": false,
diff --git a/src/translate/api/list-header.json b/src/translate/api/list-header.json
index fa37e4235cb..a83647ef984 100644
--- a/src/translate/api/list-header.json
+++ b/src/translate/api/list-header.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/list-header/list-header.tsx",
+  "filePath": "src/components/list-header/list-header.tsx",
   "encapsulation": "shadow",
   "tag": "ion-list-header",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "lines",
       "type": "\"full\" | \"inset\" | \"none\" | undefined",
+      "complexType": {
+        "original": "'full' | 'inset' | 'none'",
+        "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "lines",
       "reflectToAttr": false,
diff --git a/src/translate/api/list.json b/src/translate/api/list.json
index 9150c3a26d9..b1743d85490 100644
--- a/src/translate/api/list.json
+++ b/src/translate/api/list.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/list/list.tsx",
+  "filePath": "src/components/list/list.tsx",
   "encapsulation": "none",
   "tag": "ion-list",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "inset",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inset",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "lines",
       "type": "\"full\" | \"inset\" | \"none\" | undefined",
+      "complexType": {
+        "original": "'full' | 'inset' | 'none'",
+        "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "lines",
       "reflectToAttr": false,
@@ -85,6 +95,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "closeSlidingItems() => Promise<boolean>",
       "parameters": [],
       "docs": "If `ion-item-sliding` are used inside the list, this method closes\nany open sliding item.\n\nReturns `true` if an actual `ion-item-sliding` is closed.",
diff --git a/src/translate/api/loading.json b/src/translate/api/loading.json
index ae9d1cbc195..172a2814490 100644
--- a/src/translate/api/loading.json
+++ b/src/translate/api/loading.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/loading/loading.tsx",
+  "filePath": "src/components/loading/loading.tsx",
   "encapsulation": "scoped",
   "tag": "ion-loading",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -70,6 +85,11 @@
     {
       "name": "duration",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -87,6 +107,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the loading indicator is presented.",
@@ -105,6 +136,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the loader.",
@@ -123,6 +159,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -140,6 +181,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -157,6 +203,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the loading indicator is dismissed.",
@@ -175,6 +232,17 @@
     {
       "name": "message",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
@@ -218,6 +286,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -235,6 +308,17 @@
     {
       "name": "spinner",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | null",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "spinner",
       "reflectToAttr": false,
@@ -290,6 +374,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -307,6 +396,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -331,6 +425,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the loading overlay after it has been presented.",
@@ -351,6 +475,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the loading did dismiss.",
@@ -362,6 +506,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the loading will dismiss.",
@@ -373,6 +537,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the loading overlay after it has been created.",
@@ -384,6 +559,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading indicator has dismissed.\nShorthand for ionLoadingDidDismiss.",
@@ -393,6 +579,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading indicator has presented.\nShorthand for ionLoadingWillDismiss.",
@@ -402,6 +593,17 @@
       "event": "ionLoadingDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading has dismissed.",
@@ -411,6 +613,11 @@
       "event": "ionLoadingDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the loading has presented.",
@@ -420,6 +627,17 @@
       "event": "ionLoadingWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading has dismissed.",
@@ -429,6 +647,11 @@
       "event": "ionLoadingWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading has presented.",
@@ -438,6 +661,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading indicator has dismissed.\nShorthand for ionLoadingWillDismiss.",
@@ -447,6 +681,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the loading indicator has presented.\nShorthand for ionLoadingWillPresent.",
diff --git a/src/translate/api/menu-button.json b/src/translate/api/menu-button.json
index e3b7058f42a..bbe72fb433a 100644
--- a/src/translate/api/menu-button.json
+++ b/src/translate/api/menu-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/menu-button/menu-button.tsx",
+  "filePath": "src/components/menu-button/menu-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-menu-button",
   "docs": "",
@@ -22,6 +22,11 @@
     {
       "name": "autoHide",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "auto-hide",
       "reflectToAttr": false,
@@ -39,6 +44,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -94,6 +110,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -111,6 +132,11 @@
     {
       "name": "menu",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "menu",
       "reflectToAttr": false,
@@ -151,6 +177,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
diff --git a/src/translate/api/menu-toggle.json b/src/translate/api/menu-toggle.json
index 7c3163bccc3..98a5e5fe675 100644
--- a/src/translate/api/menu-toggle.json
+++ b/src/translate/api/menu-toggle.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/menu-toggle/menu-toggle.tsx",
+  "filePath": "src/components/menu-toggle/menu-toggle.tsx",
   "encapsulation": "shadow",
   "tag": "ion-menu-toggle",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "autoHide",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "auto-hide",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "menu",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "menu",
       "reflectToAttr": false,
diff --git a/src/translate/api/menu.json b/src/translate/api/menu.json
index 0c0a58fcde1..7a9aa0778c8 100644
--- a/src/translate/api/menu.json
+++ b/src/translate/api/menu.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/menu/menu.tsx",
+  "filePath": "src/components/menu/menu.tsx",
   "encapsulation": "shadow",
   "tag": "ion-menu",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "contentId",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "content-id",
       "reflectToAttr": true,
@@ -37,6 +42,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -54,6 +64,11 @@
     {
       "name": "maxEdgeStart",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max-edge-start",
       "reflectToAttr": false,
@@ -71,6 +86,11 @@
     {
       "name": "menuId",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "menu-id",
       "reflectToAttr": true,
@@ -90,6 +110,17 @@
     {
       "name": "side",
       "type": "\"end\" | \"start\"",
+      "complexType": {
+        "original": "Side",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "Side": {
+            "location": "import",
+            "path": "./menu-interface",
+            "id": "src/components/menu/menu-interface.ts::Side"
+          }
+        }
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": true,
@@ -112,6 +143,11 @@
     {
       "name": "swipeGesture",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "swipe-gesture",
       "reflectToAttr": false,
@@ -129,6 +165,11 @@
     {
       "name": "type",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "type",
       "reflectToAttr": false,
@@ -153,6 +194,22 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "close(animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Closes the menu. If the menu is already closed or it can't be closed,\nit returns `false`.",
@@ -164,6 +221,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "isActive() => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` is the menu is active.\n\nA menu is active when it can be opened or closed, meaning it's enabled\nand it's not part of a `ion-split-pane`.",
@@ -175,6 +243,17 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "isOpen() => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` is the menu is open.",
@@ -186,6 +265,22 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "open(animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Opens the menu. If the menu is already open or it can't be opened,\nit returns `false`.",
@@ -197,6 +292,26 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          },
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Opens or closes the button.\nIf the operation can't be completed successfully, it returns `false`.",
@@ -208,6 +323,22 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(animated?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "toggle(animated?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.\nIf the operation can't be completed successfully, it returns `false`.",
@@ -219,6 +350,11 @@
       "event": "ionDidClose",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is closed.",
@@ -228,6 +364,11 @@
       "event": "ionDidOpen",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is open.",
@@ -237,6 +378,11 @@
       "event": "ionWillClose",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is about to be closed.",
@@ -246,6 +392,11 @@
       "event": "ionWillOpen",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the menu is about to be opened.",
diff --git a/src/translate/api/modal.json b/src/translate/api/modal.json
index 85cbec53d88..7f2b2169925 100644
--- a/src/translate/api/modal.json
+++ b/src/translate/api/modal.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/modal/modal.tsx",
+  "filePath": "src/components/modal/modal.tsx",
   "encapsulation": "shadow",
   "tag": "ion-modal",
   "docs": "",
@@ -30,6 +30,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -47,6 +52,11 @@
     {
       "name": "backdropBreakpoint",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-breakpoint",
       "reflectToAttr": false,
@@ -64,6 +74,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -81,6 +96,11 @@
     {
       "name": "breakpoints",
       "type": "number[] | undefined",
+      "complexType": {
+        "original": "number[]",
+        "resolved": "number[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]",
@@ -99,6 +119,16 @@
     {
       "name": "canDismiss",
       "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
+      "complexType": {
+        "original": "boolean | ((data?: any, role?: string) => Promise<boolean>)",
+        "resolved": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        }
+      },
       "mutable": false,
       "attr": "can-dismiss",
       "reflectToAttr": false,
@@ -122,6 +152,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the modal is presented.",
@@ -140,6 +181,11 @@
     {
       "name": "handle",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "handle",
       "reflectToAttr": false,
@@ -159,6 +205,17 @@
     {
       "name": "handleBehavior",
       "type": "\"cycle\" | \"none\" | undefined",
+      "complexType": {
+        "original": "ModalHandleBehavior",
+        "resolved": "\"cycle\" | \"none\" | undefined",
+        "references": {
+          "ModalHandleBehavior": {
+            "location": "import",
+            "path": "./modal-interface",
+            "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior"
+          }
+        }
+      },
       "mutable": false,
       "attr": "handle-behavior",
       "reflectToAttr": false,
@@ -184,6 +241,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the modal.",
@@ -202,6 +264,11 @@
     {
       "name": "initialBreakpoint",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "initial-breakpoint",
       "reflectToAttr": false,
@@ -221,6 +288,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -238,6 +310,11 @@
     {
       "name": "keepContentsMounted",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keep-contents-mounted",
       "reflectToAttr": false,
@@ -255,6 +332,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -272,6 +354,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the modal is dismissed.",
@@ -311,6 +404,16 @@
     {
       "name": "presentingElement",
       "type": "HTMLElement | undefined",
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement | undefined",
+        "references": {
+          "HTMLElement": {
+            "location": "global",
+            "id": "global::HTMLElement"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode.",
@@ -329,6 +432,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -346,6 +454,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -370,6 +483,40 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+              }
+            ],
+            "text": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ModalDismissOptions": {
+            "location": "global",
+            "id": "global::ModalDismissOptions"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the modal overlay after it has been presented.",
@@ -390,6 +537,17 @@
         "type": "Promise<number | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number | undefined>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number | undefined>"
+      },
       "signature": "getCurrentBreakpoint() => Promise<number | undefined>",
       "parameters": [],
       "docs": "Returns the current breakpoint of a sheet style modal",
@@ -401,6 +559,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the modal did dismiss.",
@@ -412,6 +590,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the modal will dismiss.",
@@ -423,6 +621,21 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ModalPresentOptions": {
+            "location": "global",
+            "id": "global::ModalPresentOptions"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the modal overlay after it has been created.",
@@ -434,6 +647,22 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(breakpoint: number) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setCurrentBreakpoint(breakpoint: number) => Promise<void>",
       "parameters": [],
       "docs": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
@@ -445,6 +674,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has dismissed.\nShorthand for ionModalDidDismiss.",
@@ -454,6 +694,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has presented.\nShorthand for ionModalDidPresent.",
@@ -463,6 +708,17 @@
       "event": "ionBreakpointDidChange",
       "detail": "ModalBreakpointChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ModalBreakpointChangeEventDetail",
+        "resolved": "ModalBreakpointChangeEventDetail",
+        "references": {
+          "ModalBreakpointChangeEventDetail": {
+            "location": "import",
+            "path": "./modal-interface",
+            "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal breakpoint has changed.",
@@ -472,6 +728,17 @@
       "event": "ionModalDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has dismissed.",
@@ -481,6 +748,11 @@
       "event": "ionModalDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the modal has presented.",
@@ -490,6 +762,17 @@
       "event": "ionModalWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has dismissed.",
@@ -499,6 +782,11 @@
       "event": "ionModalWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has presented.",
@@ -508,6 +796,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has dismissed.\nShorthand for ionModalWillDismiss.",
@@ -517,6 +816,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the modal has presented.\nShorthand for ionModalWillPresent.",
diff --git a/src/translate/api/nav-link.json b/src/translate/api/nav-link.json
index 21f92c41583..1d3ddb81387 100644
--- a/src/translate/api/nav-link.json
+++ b/src/translate/api/nav-link.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/nav-link/nav-link.tsx",
+  "filePath": "src/components/nav-link/nav-link.tsx",
   "encapsulation": "none",
   "tag": "ion-nav-link",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "component",
       "type": "Function | HTMLElement | ViewController | null | string | undefined",
+      "complexType": {
+        "original": "NavComponent",
+        "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
+        "references": {
+          "NavComponent": {
+            "location": "import",
+            "path": "../nav/nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          }
+        }
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -40,6 +51,17 @@
     {
       "name": "componentProps",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "ComponentProps",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`.",
@@ -58,6 +80,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The transition animation when navigating to another page.",
@@ -76,6 +109,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
diff --git a/src/translate/api/nav.json b/src/translate/api/nav.json
index 5f63d8b1ecc..b880be33372 100644
--- a/src/translate/api/nav.json
+++ b/src/translate/api/nav.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/nav/nav.tsx",
+  "filePath": "src/components/nav/nav.tsx",
   "encapsulation": "shadow",
   "tag": "ion-nav",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -26,6 +31,17 @@
     {
       "name": "animation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions.",
@@ -44,6 +60,17 @@
     {
       "name": "root",
       "type": "Function | HTMLElement | ViewController | null | string | undefined",
+      "complexType": {
+        "original": "NavComponent",
+        "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
+        "references": {
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          }
+        }
+      },
       "mutable": false,
       "attr": "root",
       "reflectToAttr": false,
@@ -75,6 +102,17 @@
     {
       "name": "rootParams",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "ComponentProps",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Any parameters for the root component",
@@ -93,6 +131,11 @@
     {
       "name": "swipeGesture",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "swipe-gesture",
       "reflectToAttr": false,
@@ -117,6 +160,32 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(view?: ViewController) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "view The view to check."
+              }
+            ],
+            "text": "The view to check."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
       "parameters": [],
       "docs": "Returns `true` if the current view can go back.",
@@ -133,6 +202,22 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<ViewController | undefined>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<ViewController | undefined>"
+      },
       "signature": "getActive() => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the active view.",
@@ -144,6 +229,32 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(index: number) => Promise<ViewController | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "index The index of the view."
+              }
+            ],
+            "text": "The index of the view."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<ViewController | undefined>"
+      },
       "signature": "getByIndex(index: number) => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the view at the specified index.",
@@ -160,6 +271,32 @@
         "type": "Promise<ViewController | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(view?: ViewController) => Promise<ViewController | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "view The view to get."
+              }
+            ],
+            "text": "The view to get."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          }
+        },
+        "return": "Promise<ViewController | undefined>"
+      },
       "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
       "parameters": [],
       "docs": "Get the previous view.",
@@ -176,6 +313,87 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "insertIndex The index to insert the component at in the stack."
+              }
+            ],
+            "text": "The index to insert the component at in the stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "component The component to insert into the navigation stack."
+              }
+            ],
+            "text": "The component to insert into the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "componentProps Any properties of the component."
+              }
+            ],
+            "text": "Any properties of the component."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          },
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
@@ -208,6 +426,74 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "insertIndex The index to insert the components at in the stack."
+              }
+            ],
+            "text": "The index to insert the components at in the stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "insertComponents The components to insert into the navigation stack."
+              }
+            ],
+            "text": "The components to insert into the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "NavComponentWithProps": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
@@ -236,6 +522,46 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
@@ -256,6 +582,65 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "indexOrViewCtrl The index or view controller to pop to."
+              }
+            ],
+            "text": "The index or view controller to pop to."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ViewController": {
+            "location": "import",
+            "path": "./view-controller",
+            "id": "src/components/nav/view-controller.ts::ViewController"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          },
+          "TransitionInstruction": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionInstruction"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Pop to a specific index in the navigation stack.",
@@ -280,6 +665,46 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate back to the root of the stack, no matter how far back that is.",
@@ -300,6 +725,78 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "component The component to push onto the navigation stack."
+              }
+            ],
+            "text": "The component to push onto the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "componentProps Any properties of the component."
+              }
+            ],
+            "text": "Any properties of the component."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          },
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
@@ -328,6 +825,64 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "startIndex The number to begin removal at."
+              }
+            ],
+            "text": "The number to begin removal at."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "removeCount The number of components to remove."
+              }
+            ],
+            "text": "The number of components to remove."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Removes a component from the navigation stack at the specified index.",
@@ -356,6 +911,65 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "views The list of views to set as the navigation stack."
+              }
+            ],
+            "text": "The list of views to set as the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "NavComponentWithProps": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
@@ -380,6 +994,78 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "component The component to set as the root of the navigation stack."
+              }
+            ],
+            "text": "The component to set as the root of the navigation stack."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "componentProps Any properties of the component."
+              }
+            ],
+            "text": "Any properties of the component."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "opts The navigation options."
+              }
+            ],
+            "text": "The navigation options."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "done The transition complete function."
+              }
+            ],
+            "text": "The transition complete function."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "NavComponent": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavComponent"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          },
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          },
+          "NavOptions": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::NavOptions"
+          },
+          "TransitionDoneFn": {
+            "location": "import",
+            "path": "./nav-interface",
+            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
       "parameters": [],
       "docs": "Set the root for the current navigation stack to a component.",
@@ -408,6 +1094,11 @@
       "event": "ionNavDidChange",
       "detail": "void",
       "bubbles": false,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event fired when the nav has changed components",
@@ -417,6 +1108,11 @@
       "event": "ionNavWillChange",
       "detail": "void",
       "bubbles": false,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event fired when the nav will change components",
diff --git a/src/translate/api/note.json b/src/translate/api/note.json
index 2a7e9290c9a..61c1a42dd93 100644
--- a/src/translate/api/note.json
+++ b/src/translate/api/note.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/note/note.tsx",
+  "filePath": "src/components/note/note.tsx",
   "encapsulation": "shadow",
   "tag": "ion-note",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/api/picker.json b/src/translate/api/picker.json
index fa9a4737181..e8c6915cba7 100644
--- a/src/translate/api/picker.json
+++ b/src/translate/api/picker.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/picker/picker.tsx",
+  "filePath": "src/components/picker/picker.tsx",
   "encapsulation": "scoped",
   "tag": "ion-picker",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
     {
       "name": "buttons",
       "type": "PickerButton[]",
+      "complexType": {
+        "original": "PickerButton[]",
+        "resolved": "PickerButton[]",
+        "references": {
+          "PickerButton": {
+            "location": "import",
+            "path": "./picker-interface",
+            "id": "src/components/picker/picker-interface.ts::PickerButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Array of buttons to be displayed at the top of the picker.",
@@ -64,6 +85,17 @@
     {
       "name": "columns",
       "type": "PickerColumn[]",
+      "complexType": {
+        "original": "PickerColumn[]",
+        "resolved": "PickerColumn[]",
+        "references": {
+          "PickerColumn": {
+            "location": "import",
+            "path": "./picker-interface",
+            "id": "src/components/picker/picker-interface.ts::PickerColumn"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Array of columns to be displayed in the picker.",
@@ -80,6 +112,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -102,6 +139,11 @@
     {
       "name": "duration",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -119,6 +161,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the picker is presented.",
@@ -137,6 +190,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the picker.",
@@ -155,6 +213,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -172,6 +235,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -189,6 +257,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the picker is dismissed.",
@@ -228,6 +307,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -245,6 +329,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -269,6 +358,36 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the picker overlay after it has been presented.",
@@ -289,6 +408,32 @@
         "type": "Promise<PickerColumn | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(name: string) => Promise<PickerColumn | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "name The name of the column."
+              }
+            ],
+            "text": "The name of the column."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "PickerColumn": {
+            "location": "import",
+            "path": "./picker-interface",
+            "id": "src/components/picker/picker-interface.ts::PickerColumn"
+          }
+        },
+        "return": "Promise<PickerColumn | undefined>"
+      },
       "signature": "getColumn(name: string) => Promise<PickerColumn | undefined>",
       "parameters": [],
       "docs": "Get the column that matches the specified name.",
@@ -305,6 +450,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the picker did dismiss.",
@@ -316,6 +481,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the picker will dismiss.",
@@ -327,6 +512,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the picker overlay after it has been created.",
@@ -338,6 +534,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
@@ -347,6 +554,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
@@ -356,6 +568,17 @@
       "event": "ionPickerDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has dismissed.",
@@ -365,6 +588,11 @@
       "event": "ionPickerDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the picker has presented.",
@@ -374,6 +602,17 @@
       "event": "ionPickerWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has dismissed.",
@@ -383,6 +622,11 @@
       "event": "ionPickerWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has presented.",
@@ -392,6 +636,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
@@ -401,6 +656,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
diff --git a/src/translate/api/popover.json b/src/translate/api/popover.json
index 9210abb17ad..dd79655fca7 100644
--- a/src/translate/api/popover.json
+++ b/src/translate/api/popover.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/popover/popover.tsx",
+  "filePath": "src/components/popover/popover.tsx",
   "encapsulation": "shadow",
   "tag": "ion-popover",
   "docs": "",
@@ -30,6 +30,17 @@
     {
       "name": "alignment",
       "type": "\"center\" | \"end\" | \"start\" | undefined",
+      "complexType": {
+        "original": "PositionAlign",
+        "resolved": "\"center\" | \"end\" | \"start\" | undefined",
+        "references": {
+          "PositionAlign": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PositionAlign"
+          }
+        }
+      },
       "mutable": true,
       "attr": "alignment",
       "reflectToAttr": false,
@@ -58,6 +69,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -75,6 +91,11 @@
     {
       "name": "arrow",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "arrow",
       "reflectToAttr": false,
@@ -92,6 +113,11 @@
     {
       "name": "backdropDismiss",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "backdrop-dismiss",
       "reflectToAttr": false,
@@ -109,6 +135,17 @@
     {
       "name": "component",
       "type": "Function | HTMLElement | null | string | undefined",
+      "complexType": {
+        "original": "ComponentRef",
+        "resolved": "Function | HTMLElement | null | string | undefined",
+        "references": {
+          "ComponentRef": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentRef"
+          }
+        }
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -137,6 +174,17 @@
     {
       "name": "componentProps",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "ComponentProps",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {
+          "ComponentProps": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentProps"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component.",
@@ -155,6 +203,11 @@
     {
       "name": "dismissOnSelect",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "dismiss-on-select",
       "reflectToAttr": false,
@@ -172,6 +225,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the popover is presented.",
@@ -190,6 +254,11 @@
     {
       "name": "event",
       "type": "any",
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "event",
       "reflectToAttr": false,
@@ -206,6 +275,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the popover.",
@@ -224,6 +298,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -241,6 +320,11 @@
     {
       "name": "keepContentsMounted",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keep-contents-mounted",
       "reflectToAttr": false,
@@ -258,6 +342,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -275,6 +364,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the popover is dismissed.",
@@ -314,6 +414,17 @@
     {
       "name": "reference",
       "type": "\"event\" | \"trigger\"",
+      "complexType": {
+        "original": "PositionReference",
+        "resolved": "\"event\" | \"trigger\"",
+        "references": {
+          "PositionReference": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PositionReference"
+          }
+        }
+      },
       "mutable": false,
       "attr": "reference",
       "reflectToAttr": false,
@@ -336,6 +447,11 @@
     {
       "name": "showBackdrop",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-backdrop",
       "reflectToAttr": false,
@@ -353,6 +469,17 @@
     {
       "name": "side",
       "type": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
+      "complexType": {
+        "original": "PositionSide",
+        "resolved": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
+        "references": {
+          "PositionSide": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PositionSide"
+          }
+        }
+      },
       "mutable": false,
       "attr": "side",
       "reflectToAttr": false,
@@ -391,10 +518,21 @@
     {
       "name": "size",
       "type": "\"auto\" | \"cover\"",
+      "complexType": {
+        "original": "PopoverSize",
+        "resolved": "\"auto\" | \"cover\"",
+        "references": {
+          "PopoverSize": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::PopoverSize"
+          }
+        }
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
-      "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be determined by the content in\nthe popover.",
+      "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be set to a static default value.",
       "docsTags": [],
       "default": "'auto'",
       "values": [
@@ -413,6 +551,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -430,6 +573,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -449,6 +597,17 @@
     {
       "name": "triggerAction",
       "type": "\"click\" | \"context-menu\" | \"hover\"",
+      "complexType": {
+        "original": "TriggerAction",
+        "resolved": "\"click\" | \"context-menu\" | \"hover\"",
+        "references": {
+          "TriggerAction": {
+            "location": "import",
+            "path": "./popover-interface",
+            "id": "src/components/popover/popover-interface.ts::TriggerAction"
+          }
+        }
+      },
       "mutable": false,
       "attr": "trigger-action",
       "reflectToAttr": false,
@@ -480,6 +639,49 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+              }
+            ],
+            "text": "The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+              }
+            ],
+            "text": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "PopoverDismissOptions": {
+            "location": "global",
+            "id": "global::PopoverDismissOptions"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the popover overlay after it has been presented.",
@@ -504,6 +706,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the popover did dismiss.",
@@ -515,6 +737,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the popover will dismiss.",
@@ -526,6 +768,42 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
+        "parameters": [
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "MouseEvent": {
+            "location": "global",
+            "id": "global::MouseEvent"
+          },
+          "TouchEvent": {
+            "location": "global",
+            "id": "global::TouchEvent"
+          },
+          "PointerEvent": {
+            "location": "global",
+            "id": "global::PointerEvent"
+          },
+          "CustomEvent": {
+            "location": "global",
+            "id": "global::CustomEvent"
+          },
+          "PopoverPresentOptions": {
+            "location": "global",
+            "id": "global::PopoverPresentOptions"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
       "parameters": [],
       "docs": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
@@ -537,6 +815,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has dismissed.\nShorthand for ionPopoverDidDismiss.",
@@ -546,6 +835,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has presented.\nShorthand for ionPopoverWillDismiss.",
@@ -555,6 +849,17 @@
       "event": "ionPopoverDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has dismissed.",
@@ -564,6 +869,11 @@
       "event": "ionPopoverDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the popover has presented.",
@@ -573,6 +883,17 @@
       "event": "ionPopoverWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has dismissed.",
@@ -582,6 +903,11 @@
       "event": "ionPopoverWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has presented.",
@@ -591,6 +917,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has dismissed.\nShorthand for ionPopoverWillDismiss.",
@@ -600,6 +937,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the popover has presented.\nShorthand for ionPopoverWillPresent.",
diff --git a/src/translate/api/progress-bar.json b/src/translate/api/progress-bar.json
index fe50d036d53..57087c51dcf 100644
--- a/src/translate/api/progress-bar.json
+++ b/src/translate/api/progress-bar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/progress-bar/progress-bar.tsx",
+  "filePath": "src/components/progress-bar/progress-bar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-progress-bar",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "buffer",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "buffer",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -119,6 +135,11 @@
     {
       "name": "reversed",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "reversed",
       "reflectToAttr": false,
@@ -136,6 +157,11 @@
     {
       "name": "type",
       "type": "\"determinate\" | \"indeterminate\"",
+      "complexType": {
+        "original": "'determinate' | 'indeterminate'",
+        "resolved": "\"determinate\" | \"indeterminate\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -158,6 +184,11 @@
     {
       "name": "value",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/api/radio-group.json b/src/translate/api/radio-group.json
index 3994af56123..eadb96fdd5f 100644
--- a/src/translate/api/radio-group.json
+++ b/src/translate/api/radio-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/radio-group/radio-group.tsx",
+  "filePath": "src/components/radio-group/radio-group.tsx",
   "encapsulation": "none",
   "tag": "ion-radio-group",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "allowEmptySelection",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "allow-empty-selection",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -63,6 +78,17 @@
       "event": "ionChange",
       "detail": "RadioGroupChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "RadioGroupChangeEventDetail",
+        "resolved": "RadioGroupChangeEventDetail<any>",
+        "references": {
+          "RadioGroupChangeEventDetail": {
+            "location": "import",
+            "path": "./radio-group-interface",
+            "id": "src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value has changed.",
diff --git a/src/translate/api/radio.json b/src/translate/api/radio.json
index 1d5aa1430d9..4e8e80e43f8 100644
--- a/src/translate/api/radio.json
+++ b/src/translate/api/radio.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/radio/radio.tsx",
+  "filePath": "src/components/radio/radio.tsx",
   "encapsulation": "shadow",
   "tag": "ion-radio",
   "docs": "",
@@ -26,6 +26,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -81,6 +92,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -98,6 +114,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -124,6 +145,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -150,6 +176,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -190,6 +221,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -207,6 +243,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -227,6 +268,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the radio button loses focus.",
@@ -236,6 +282,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the radio button has focus.",
diff --git a/src/translate/api/range.json b/src/translate/api/range.json
index 6ad20a7202c..64becc9d4ef 100644
--- a/src/translate/api/range.json
+++ b/src/translate/api/range.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/range/range.tsx",
+  "filePath": "src/components/range/range.tsx",
   "encapsulation": "shadow",
   "tag": "ion-range",
   "docs": "",
@@ -50,6 +50,11 @@
     {
       "name": "activeBarStart",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "active-bar-start",
       "reflectToAttr": false,
@@ -69,6 +74,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -124,6 +140,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -143,6 +164,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -160,6 +186,11 @@
     {
       "name": "dualKnobs",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "dual-knobs",
       "reflectToAttr": false,
@@ -177,6 +208,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -196,6 +232,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -222,6 +263,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -241,6 +287,11 @@
     {
       "name": "max",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "max",
       "reflectToAttr": false,
@@ -258,6 +309,11 @@
     {
       "name": "min",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "min",
       "reflectToAttr": false,
@@ -296,6 +352,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -313,6 +374,11 @@
     {
       "name": "pin",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pin",
       "reflectToAttr": false,
@@ -330,6 +396,17 @@
     {
       "name": "pinFormatter",
       "type": "(value: number) => string | number",
+      "complexType": {
+        "original": "PinFormatter",
+        "resolved": "(value: number) => string | number",
+        "references": {
+          "PinFormatter": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::PinFormatter"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.",
@@ -349,6 +426,11 @@
     {
       "name": "snaps",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "snaps",
       "reflectToAttr": false,
@@ -366,6 +448,11 @@
     {
       "name": "step",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "step",
       "reflectToAttr": false,
@@ -383,6 +470,11 @@
     {
       "name": "ticks",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "ticks",
       "reflectToAttr": false,
@@ -400,6 +492,17 @@
     {
       "name": "value",
       "type": "number | { lower: number; upper: number; }",
+      "complexType": {
+        "original": "RangeValue",
+        "resolved": "number | { lower: number; upper: number; }",
+        "references": {
+          "RangeValue": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeValue"
+          }
+        }
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -424,6 +527,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the range loses focus.",
@@ -433,6 +541,17 @@
       "event": "ionChange",
       "detail": "RangeChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeChangeEventDetail",
+        "resolved": "RangeChangeEventDetail",
+        "references": {
+          "RangeChangeEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
@@ -442,6 +561,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the range has focus.",
@@ -451,6 +575,17 @@
       "event": "ionInput",
       "detail": "RangeChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeChangeEventDetail",
+        "resolved": "RangeChangeEventDetail",
+        "references": {
+          "RangeChangeEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionInput` event is fired for `<ion-range>` elements when the value\nis modified. Unlike `ionChange`, `ionInput` is fired continuously\nwhile the user is dragging the knob.",
@@ -460,6 +595,17 @@
       "event": "ionKnobMoveEnd",
       "detail": "RangeKnobMoveEndEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeKnobMoveEndEventDetail",
+        "resolved": "RangeKnobMoveEndEventDetail",
+        "references": {
+          "RangeKnobMoveEndEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeKnobMoveEndEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user finishes moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
@@ -469,6 +615,17 @@
       "event": "ionKnobMoveStart",
       "detail": "RangeKnobMoveStartEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RangeKnobMoveStartEventDetail",
+        "resolved": "RangeKnobMoveStartEventDetail",
+        "references": {
+          "RangeKnobMoveStartEventDetail": {
+            "location": "import",
+            "path": "./range-interface",
+            "id": "src/components/range/range-interface.ts::RangeKnobMoveStartEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user starts moving the range knob, whether through\nmouse drag, touch gesture, or keyboard interaction.",
diff --git a/src/translate/api/refresher-content.json b/src/translate/api/refresher-content.json
index 89952a179f8..d34e795470c 100644
--- a/src/translate/api/refresher-content.json
+++ b/src/translate/api/refresher-content.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/refresher-content/refresher-content.tsx",
+  "filePath": "src/components/refresher-content/refresher-content.tsx",
   "encapsulation": "none",
   "tag": "ion-refresher-content",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "pullingIcon",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | string | null",
+        "resolved": "null | string | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "pulling-icon",
       "reflectToAttr": false,
@@ -31,6 +42,17 @@
     {
       "name": "pullingText",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "pulling-text",
       "reflectToAttr": false,
@@ -53,6 +75,17 @@
     {
       "name": "refreshingSpinner",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+      "complexType": {
+        "original": "SpinnerTypes | null",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "../spinner/spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": true,
       "attr": "refreshing-spinner",
       "reflectToAttr": false,
@@ -108,6 +141,17 @@
     {
       "name": "refreshingText",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "refreshing-text",
       "reflectToAttr": false,
diff --git a/src/translate/api/refresher.json b/src/translate/api/refresher.json
index 6955cb7fc92..4fdb2394a61 100644
--- a/src/translate/api/refresher.json
+++ b/src/translate/api/refresher.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/refresher/refresher.tsx",
+  "filePath": "src/components/refresher/refresher.tsx",
   "encapsulation": "none",
   "tag": "ion-refresher",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "closeDuration",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "close-duration",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -43,6 +53,11 @@
     {
       "name": "pullFactor",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-factor",
       "reflectToAttr": false,
@@ -60,6 +75,11 @@
     {
       "name": "pullMax",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-max",
       "reflectToAttr": false,
@@ -77,6 +97,11 @@
     {
       "name": "pullMin",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "pull-min",
       "reflectToAttr": false,
@@ -94,6 +119,11 @@
     {
       "name": "snapbackDuration",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "snapback-duration",
       "reflectToAttr": false,
@@ -116,6 +146,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "cancel() => Promise<void>",
       "parameters": [],
       "docs": "Changes the refresher's state from `refreshing` to `cancelling`.",
@@ -127,6 +168,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "complete() => Promise<void>",
       "parameters": [],
       "docs": "Call `complete()` when your async operation has completed.\nFor example, the `refreshing` state is while the app is performing\nan asynchronous operation, such as receiving more data from an\nAJAX request. Once the data has been received, you then call this\nmethod to signify that the refreshing has completed and to close\nthe refresher. This method also changes the refresher's state from\n`refreshing` to `completing`.",
@@ -138,6 +190,17 @@
         "type": "Promise<number>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<number>"
+      },
       "signature": "getProgress() => Promise<number>",
       "parameters": [],
       "docs": "A number representing how far down the user has pulled.\nThe number `0` represents the user hasn't pulled down at all. The\nnumber `1`, and anything greater than `1`, represents that the user\nhas pulled far enough down that when they let go then the refresh will\nhappen. If they let go and the number is less than `1`, then the\nrefresh will not happen, and the content will return to it's original\nposition.",
@@ -149,6 +212,11 @@
       "event": "ionPull",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted while the user is pulling down the content and exposing the refresher.",
@@ -158,6 +226,17 @@
       "event": "ionRefresh",
       "detail": "RefresherEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RefresherEventDetail",
+        "resolved": "RefresherEventDetail",
+        "references": {
+          "RefresherEventDetail": {
+            "location": "import",
+            "path": "./refresher-interface",
+            "id": "src/components/refresher/refresher-interface.ts::RefresherEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user lets go of the content and has pulled down\nfurther than the `pullMin` or pulls the content down and exceeds the pullMax.\nUpdates the refresher state to `refreshing`. The `complete()` method should be\ncalled when the async operation has completed.",
@@ -167,6 +246,11 @@
       "event": "ionStart",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user begins to start pulling down.",
diff --git a/src/translate/api/reorder-group.json b/src/translate/api/reorder-group.json
index f974008bc8e..6cdbe02491d 100644
--- a/src/translate/api/reorder-group.json
+++ b/src/translate/api/reorder-group.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/reorder-group/reorder-group.tsx",
+  "filePath": "src/components/reorder-group/reorder-group.tsx",
   "encapsulation": "none",
   "tag": "ion-reorder-group",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -31,6 +36,27 @@
         "type": "Promise<any>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(listOrReorder?: boolean | any[]) => Promise<any>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
+              }
+            ],
+            "text": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<any>"
+      },
       "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
       "parameters": [],
       "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
@@ -47,6 +73,17 @@
       "event": "ionItemReorder",
       "detail": "ItemReorderEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "ItemReorderEventDetail",
+        "resolved": "ItemReorderEventDetail",
+        "references": {
+          "ItemReorderEventDetail": {
+            "location": "import",
+            "path": "./reorder-group-interface",
+            "id": "src/components/reorder-group/reorder-group-interface.ts::ItemReorderEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
diff --git a/src/translate/api/reorder.json b/src/translate/api/reorder.json
index 00294578383..77b2ea75af0 100644
--- a/src/translate/api/reorder.json
+++ b/src/translate/api/reorder.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/reorder/reorder.tsx",
+  "filePath": "src/components/reorder/reorder.tsx",
   "encapsulation": "shadow",
   "tag": "ion-reorder",
   "docs": "",
diff --git a/src/translate/api/ripple-effect.json b/src/translate/api/ripple-effect.json
index 952db5c8ade..1a97e7f4e69 100644
--- a/src/translate/api/ripple-effect.json
+++ b/src/translate/api/ripple-effect.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/ripple-effect/ripple-effect.tsx",
+  "filePath": "src/components/ripple-effect/ripple-effect.tsx",
   "encapsulation": "shadow",
   "tag": "ion-ripple-effect",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "type",
       "type": "\"bounded\" | \"unbounded\"",
+      "complexType": {
+        "original": "'bounded' | 'unbounded'",
+        "resolved": "\"bounded\" | \"unbounded\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -36,6 +41,36 @@
         "type": "Promise<() => void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(x: number, y: number) => Promise<() => void>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "x The horizontal coordinate of where the ripple should start."
+              }
+            ],
+            "text": "The horizontal coordinate of where the ripple should start."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "y The vertical coordinate of where the ripple should start."
+              }
+            ],
+            "text": "The vertical coordinate of where the ripple should start."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<() => void>"
+      },
       "signature": "addRipple(x: number, y: number) => Promise<() => void>",
       "parameters": [],
       "docs": "Adds the ripple effect to the parent element.",
diff --git a/src/translate/api/route-redirect.json b/src/translate/api/route-redirect.json
index 854d7d7b089..d1925cfc0f7 100644
--- a/src/translate/api/route-redirect.json
+++ b/src/translate/api/route-redirect.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/route-redirect/route-redirect.tsx",
+  "filePath": "src/components/route-redirect/route-redirect.tsx",
   "encapsulation": "none",
   "tag": "ion-route-redirect",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "from",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "from",
       "reflectToAttr": false,
@@ -25,6 +30,11 @@
     {
       "name": "to",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | undefined | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "to",
       "reflectToAttr": false,
@@ -51,6 +61,11 @@
       "event": "ionRouteRedirectChanged",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Internal event that fires when any value of this rule is added/removed from the DOM,\nor any of his public properties changes.\n\n`ion-router` captures this event in order to update his internal registry of router rules.",
diff --git a/src/translate/api/route.json b/src/translate/api/route.json
index a762c55d947..0726043eecb 100644
--- a/src/translate/api/route.json
+++ b/src/translate/api/route.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/route/route.tsx",
+  "filePath": "src/components/route/route.tsx",
   "encapsulation": "none",
   "tag": "ion-route",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "beforeEnter",
       "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+      "complexType": {
+        "original": "NavigationHookCallback",
+        "resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+        "references": {
+          "NavigationHookCallback": {
+            "location": "import",
+            "path": "./route-interface",
+            "id": "src/components/route/route-interface.ts::NavigationHookCallback"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
@@ -30,6 +41,17 @@
     {
       "name": "beforeLeave",
       "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+      "complexType": {
+        "original": "NavigationHookCallback",
+        "resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+        "references": {
+          "NavigationHookCallback": {
+            "location": "import",
+            "path": "./route-interface",
+            "id": "src/components/route/route-interface.ts::NavigationHookCallback"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified.",
@@ -51,6 +73,11 @@
     {
       "name": "component",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -67,6 +94,11 @@
     {
       "name": "componentProps",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered.",
@@ -85,6 +117,11 @@
     {
       "name": "url",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "url",
       "reflectToAttr": false,
@@ -106,6 +143,11 @@
       "event": "ionRouteDataChanged",
       "detail": "any",
       "bubbles": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Used internally by `ion-router` to know when this route did change.",
diff --git a/src/translate/api/router-link.json b/src/translate/api/router-link.json
index 5382428adda..1b661f044ab 100644
--- a/src/translate/api/router-link.json
+++ b/src/translate/api/router-link.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/router-link/router-link.tsx",
+  "filePath": "src/components/router-link/router-link.tsx",
   "encapsulation": "shadow",
   "tag": "ion-router-link",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -64,6 +75,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -83,6 +99,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -102,6 +123,17 @@
     {
       "name": "routerAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder | undefined",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`.",
@@ -120,6 +152,17 @@
     {
       "name": "routerDirection",
       "type": "\"back\" | \"forward\" | \"root\"",
+      "complexType": {
+        "original": "RouterDirection",
+        "resolved": "\"back\" | \"forward\" | \"root\"",
+        "references": {
+          "RouterDirection": {
+            "location": "import",
+            "path": "../router/utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          }
+        }
+      },
       "mutable": false,
       "attr": "router-direction",
       "reflectToAttr": false,
@@ -146,6 +189,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
diff --git a/src/translate/api/router-outlet.json b/src/translate/api/router-outlet.json
index 12999b46eb3..24310569325 100644
--- a/src/translate/api/router-outlet.json
+++ b/src/translate/api/router-outlet.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/router-outlet/route-outlet.tsx",
+  "filePath": "src/components/router-outlet/route-outlet.tsx",
   "encapsulation": "shadow",
   "tag": "ion-router-outlet",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -26,6 +31,17 @@
     {
       "name": "animation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "This property allows to create custom transition using AnimationBuilder functions.",
@@ -44,6 +60,11 @@
     {
       "name": "mode",
       "type": "\"ios\" | \"md\"",
+      "complexType": {
+        "original": "\"ios\" | \"md\"",
+        "resolved": "\"ios\" | \"md\"",
+        "references": {}
+      },
       "mutable": true,
       "attr": "mode",
       "reflectToAttr": false,
diff --git a/src/translate/api/router.json b/src/translate/api/router.json
index 10cb2ac1abb..42032ac7bff 100644
--- a/src/translate/api/router.json
+++ b/src/translate/api/router.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/router/router.tsx",
+  "filePath": "src/components/router/router.tsx",
   "encapsulation": "none",
   "tag": "ion-router",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "root",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "root",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "useHash",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "use-hash",
       "reflectToAttr": false,
@@ -48,6 +58,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "back() => Promise<void>",
       "parameters": [],
       "docs": "Go back to previous page in the window.history.",
@@ -59,6 +80,50 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "path The path to navigate to."
+              }
+            ],
+            "text": "The path to navigate to."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "direction The direction of the animation. Defaults to `\"forward\"`."
+              }
+            ],
+            "text": "The direction of the animation. Defaults to `\"forward\"`."
+          },
+          {
+            "tags": [],
+            "text": ""
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "RouterDirection": {
+            "location": "import",
+            "path": "./utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterDirection"
+          },
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
       "parameters": [],
       "docs": "Navigate to the specified path.",
@@ -79,6 +144,17 @@
       "event": "ionRouteDidChange",
       "detail": "RouterEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RouterEventDetail",
+        "resolved": "RouterEventDetail",
+        "references": {
+          "RouterEventDetail": {
+            "location": "import",
+            "path": "./utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the route had changed",
@@ -88,6 +164,17 @@
       "event": "ionRouteWillChange",
       "detail": "RouterEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "RouterEventDetail",
+        "resolved": "RouterEventDetail",
+        "references": {
+          "RouterEventDetail": {
+            "location": "import",
+            "path": "./utils/interface",
+            "id": "src/components/router/utils/interface.ts::RouterEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Event emitted when the route is about to change",
diff --git a/src/translate/api/row.json b/src/translate/api/row.json
index 9932fecb458..0f649d731ca 100644
--- a/src/translate/api/row.json
+++ b/src/translate/api/row.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/row/row.tsx",
+  "filePath": "src/components/row/row.tsx",
   "encapsulation": "shadow",
   "tag": "ion-row",
   "docs": "",
diff --git a/src/translate/api/searchbar.json b/src/translate/api/searchbar.json
index acb6dfc2bda..1c0d88acb90 100644
--- a/src/translate/api/searchbar.json
+++ b/src/translate/api/searchbar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/searchbar/searchbar.tsx",
+  "filePath": "src/components/searchbar/searchbar.tsx",
   "encapsulation": "scoped",
   "tag": "ion-searchbar",
   "docs": "",
@@ -14,6 +14,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -31,6 +36,17 @@
     {
       "name": "autocomplete",
       "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+      "complexType": {
+        "original": "AutocompleteTypes",
+        "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+        "references": {
+          "AutocompleteTypes": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AutocompleteTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "autocomplete",
       "reflectToAttr": false,
@@ -261,6 +277,11 @@
     {
       "name": "autocorrect",
       "type": "\"off\" | \"on\"",
+      "complexType": {
+        "original": "'on' | 'off'",
+        "resolved": "\"off\" | \"on\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocorrect",
       "reflectToAttr": false,
@@ -283,6 +304,11 @@
     {
       "name": "cancelButtonIcon",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-button-icon",
       "reflectToAttr": false,
@@ -300,6 +326,11 @@
     {
       "name": "cancelButtonText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-button-text",
       "reflectToAttr": false,
@@ -317,6 +348,11 @@
     {
       "name": "clearIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-icon",
       "reflectToAttr": false,
@@ -336,6 +372,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -391,6 +438,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -410,6 +462,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -427,6 +484,11 @@
     {
       "name": "enterkeyhint",
       "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+      "complexType": {
+        "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enterkeyhint",
       "reflectToAttr": false,
@@ -471,6 +533,11 @@
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+      "complexType": {
+        "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+        "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inputmode",
       "reflectToAttr": false,
@@ -540,6 +607,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -557,6 +629,11 @@
     {
       "name": "placeholder",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -574,6 +651,11 @@
     {
       "name": "searchIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "search-icon",
       "reflectToAttr": false,
@@ -593,6 +675,11 @@
     {
       "name": "showCancelButton",
       "type": "\"always\" | \"focus\" | \"never\"",
+      "complexType": {
+        "original": "'never' | 'focus' | 'always'",
+        "resolved": "\"always\" | \"focus\" | \"never\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-cancel-button",
       "reflectToAttr": false,
@@ -619,6 +706,11 @@
     {
       "name": "showClearButton",
       "type": "\"always\" | \"focus\" | \"never\"",
+      "complexType": {
+        "original": "'never' | 'focus' | 'always'",
+        "resolved": "\"always\" | \"focus\" | \"never\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "show-clear-button",
       "reflectToAttr": false,
@@ -645,6 +737,11 @@
     {
       "name": "spellcheck",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "spellcheck",
       "reflectToAttr": false,
@@ -662,6 +759,11 @@
     {
       "name": "type",
       "type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+      "complexType": {
+        "original": "'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'",
+        "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -704,6 +806,11 @@
     {
       "name": "value",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -732,6 +839,21 @@
         "type": "Promise<HTMLInputElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLInputElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLInputElement": {
+            "location": "global",
+            "id": "global::HTMLInputElement"
+          }
+        },
+        "return": "Promise<HTMLInputElement>"
+      },
       "signature": "getInputElement() => Promise<HTMLInputElement>",
       "parameters": [],
       "docs": "Returns the native `<input>` element used under the hood.",
@@ -743,6 +865,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
       "docs": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
@@ -754,6 +887,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input loses focus.",
@@ -763,6 +901,11 @@
       "event": "ionCancel",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the cancel button is clicked.",
@@ -772,6 +915,17 @@
       "event": "ionChange",
       "detail": "SearchbarChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "SearchbarChangeEventDetail",
+        "resolved": "SearchbarChangeEventDetail",
+        "references": {
+          "SearchbarChangeEventDetail": {
+            "location": "import",
+            "path": "./searchbar-interface",
+            "id": "src/components/searchbar/searchbar-interface.ts::SearchbarChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
@@ -781,6 +935,11 @@
       "event": "ionClear",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the clear input button is clicked.",
@@ -790,6 +949,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input has focus.",
@@ -799,6 +963,17 @@
       "event": "ionInput",
       "detail": "SearchbarInputEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "SearchbarInputEventDetail",
+        "resolved": "SearchbarInputEventDetail",
+        "references": {
+          "SearchbarInputEventDetail": {
+            "location": "import",
+            "path": "./searchbar-interface",
+            "id": "src/components/searchbar/searchbar-interface.ts::SearchbarInputEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the `value` of the `ion-searchbar` element has changed.",
diff --git a/src/translate/api/segment-button.json b/src/translate/api/segment-button.json
index 5941ef23559..44825e859fa 100644
--- a/src/translate/api/segment-button.json
+++ b/src/translate/api/segment-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/segment-button/segment-button.tsx",
+  "filePath": "src/components/segment-button/segment-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-segment-button",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "layout",
       "type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+      "complexType": {
+        "original": "SegmentButtonLayout",
+        "resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+        "references": {
+          "SegmentButtonLayout": {
+            "location": "import",
+            "path": "./segment-button-interface",
+            "id": "src/components/segment-button/segment-button-interface.ts::SegmentButtonLayout"
+          }
+        }
+      },
       "mutable": false,
       "attr": "layout",
       "reflectToAttr": false,
@@ -105,6 +121,11 @@
     {
       "name": "type",
       "type": "\"button\" | \"reset\" | \"submit\"",
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "type",
       "reflectToAttr": false,
@@ -131,6 +152,17 @@
     {
       "name": "value",
       "type": "number | string",
+      "complexType": {
+        "original": "SegmentValue",
+        "resolved": "number | string",
+        "references": {
+          "SegmentValue": {
+            "location": "import",
+            "path": "../segment/segment-interface",
+            "id": "src/components/segment/segment-interface.ts::SegmentValue"
+          }
+        }
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/api/segment.json b/src/translate/api/segment.json
index ca1bb642a35..13e946f0fd4 100644
--- a/src/translate/api/segment.json
+++ b/src/translate/api/segment.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/segment/segment.tsx",
+  "filePath": "src/components/segment/segment.tsx",
   "encapsulation": "shadow",
   "tag": "ion-segment",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -69,6 +80,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -107,6 +123,11 @@
     {
       "name": "scrollable",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "scrollable",
       "reflectToAttr": false,
@@ -124,6 +145,11 @@
     {
       "name": "selectOnFocus",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "select-on-focus",
       "reflectToAttr": false,
@@ -141,6 +167,11 @@
     {
       "name": "swipeGesture",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "swipe-gesture",
       "reflectToAttr": false,
@@ -158,6 +189,17 @@
     {
       "name": "value",
       "type": "number | string | undefined",
+      "complexType": {
+        "original": "SegmentValue",
+        "resolved": "number | string | undefined",
+        "references": {
+          "SegmentValue": {
+            "location": "import",
+            "path": "./segment-interface",
+            "id": "src/components/segment/segment-interface.ts::SegmentValue"
+          }
+        }
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -184,6 +226,17 @@
       "event": "ionChange",
       "detail": "SegmentChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "SegmentChangeEventDetail",
+        "resolved": "SegmentChangeEventDetail",
+        "references": {
+          "SegmentChangeEventDetail": {
+            "location": "import",
+            "path": "./segment-interface",
+            "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.",
diff --git a/src/translate/api/select-option.json b/src/translate/api/select-option.json
index 14656785c8f..731bf26f8dd 100644
--- a/src/translate/api/select-option.json
+++ b/src/translate/api/select-option.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/select-option/select-option.tsx",
+  "filePath": "src/components/select-option/select-option.tsx",
   "encapsulation": "shadow",
   "tag": "ion-select-option",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -26,6 +31,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
diff --git a/src/translate/api/select.json b/src/translate/api/select.json
index 605077bbba5..505c0e16aad 100644
--- a/src/translate/api/select.json
+++ b/src/translate/api/select.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/select/select.tsx",
+  "filePath": "src/components/select/select.tsx",
   "encapsulation": "shadow",
   "tag": "ion-select",
   "docs": "",
@@ -38,6 +38,11 @@
     {
       "name": "cancelText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cancel-text",
       "reflectToAttr": false,
@@ -55,6 +60,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -110,6 +126,17 @@
     {
       "name": "compareWith",
       "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+      "complexType": {
+        "original": "string | SelectCompareFn | null",
+        "resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+        "references": {
+          "SelectCompareFn": {
+            "location": "import",
+            "path": "./select-interface",
+            "id": "src/components/select/select-interface.ts::SelectCompareFn"
+          }
+        }
+      },
       "mutable": false,
       "attr": "compare-with",
       "reflectToAttr": false,
@@ -135,6 +162,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -152,6 +184,11 @@
     {
       "name": "expandedIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "expanded-icon",
       "reflectToAttr": false,
@@ -171,6 +208,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -195,6 +237,17 @@
     {
       "name": "interface",
       "type": "\"action-sheet\" | \"alert\" | \"popover\"",
+      "complexType": {
+        "original": "SelectInterface",
+        "resolved": "\"action-sheet\" | \"alert\" | \"popover\"",
+        "references": {
+          "SelectInterface": {
+            "location": "import",
+            "path": "./select-interface",
+            "id": "src/components/select/select-interface.ts::SelectInterface"
+          }
+        }
+      },
       "mutable": false,
       "attr": "interface",
       "reflectToAttr": false,
@@ -221,6 +274,11 @@
     {
       "name": "interfaceOptions",
       "type": "any",
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": false,
       "attr": "interface-options",
       "reflectToAttr": false,
@@ -238,6 +296,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -264,6 +327,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -283,6 +351,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+      "complexType": {
+        "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -320,6 +393,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -360,6 +438,11 @@
     {
       "name": "multiple",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "multiple",
       "reflectToAttr": false,
@@ -377,6 +460,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -394,6 +482,11 @@
     {
       "name": "okText",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "ok-text",
       "reflectToAttr": false,
@@ -411,6 +504,11 @@
     {
       "name": "placeholder",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -430,6 +528,11 @@
     {
       "name": "selectedText",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "selected-text",
       "reflectToAttr": false,
@@ -452,6 +555,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -472,6 +580,11 @@
     {
       "name": "toggleIcon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "toggle-icon",
       "reflectToAttr": false,
@@ -491,6 +604,11 @@
     {
       "name": "value",
       "type": "any",
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -512,6 +630,35 @@
         "type": "Promise<any>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(event?: UIEvent) => Promise<any>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "event The user interface event that called the open."
+              }
+            ],
+            "text": "The user interface event that called the open."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "UIEvent": {
+            "location": "global",
+            "id": "global::UIEvent"
+          },
+          "HTMLElement": {
+            "location": "global",
+            "id": "global::HTMLElement"
+          }
+        },
+        "return": "Promise<any>"
+      },
       "signature": "open(event?: UIEvent) => Promise<any>",
       "parameters": [],
       "docs": "Open the select overlay. The overlay is either an alert, action sheet, or popover,\ndepending on the `interface` property on the `ion-select`.",
@@ -528,6 +675,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the select loses focus.",
@@ -537,6 +689,11 @@
       "event": "ionCancel",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the selection is cancelled.",
@@ -546,6 +703,17 @@
       "event": "ionChange",
       "detail": "SelectChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "SelectChangeEventDetail",
+        "resolved": "SelectChangeEventDetail<any>",
+        "references": {
+          "SelectChangeEventDetail": {
+            "location": "import",
+            "path": "./select-interface",
+            "id": "src/components/select/select-interface.ts::SelectChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the value has changed.",
@@ -555,6 +723,11 @@
       "event": "ionDismiss",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the overlay is dismissed.",
@@ -564,6 +737,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the select has focus.",
@@ -695,11 +873,11 @@
     "ion-select-popover": [
       "ion-item",
       "ion-checkbox",
-      "ion-label",
       "ion-radio-group",
       "ion-radio",
       "ion-list",
-      "ion-list-header"
+      "ion-list-header",
+      "ion-label"
     ],
     "ion-item": [
       "ion-icon",
diff --git a/src/translate/api/skeleton-text.json b/src/translate/api/skeleton-text.json
index b619678da43..a058621bb96 100644
--- a/src/translate/api/skeleton-text.json
+++ b/src/translate/api/skeleton-text.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/skeleton-text/skeleton-text.tsx",
+  "filePath": "src/components/skeleton-text/skeleton-text.tsx",
   "encapsulation": "shadow",
   "tag": "ion-skeleton-text",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
diff --git a/src/translate/api/spinner.json b/src/translate/api/spinner.json
index 79682048943..f5c285c8b6d 100644
--- a/src/translate/api/spinner.json
+++ b/src/translate/api/spinner.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/spinner/spinner.tsx",
+  "filePath": "src/components/spinner/spinner.tsx",
   "encapsulation": "shadow",
   "tag": "ion-spinner",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -64,6 +75,11 @@
     {
       "name": "duration",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -83,6 +99,17 @@
     {
       "name": "name",
       "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
+      "complexType": {
+        "original": "SpinnerTypes",
+        "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
+        "references": {
+          "SpinnerTypes": {
+            "location": "import",
+            "path": "./spinner-configs",
+            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+          }
+        }
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -135,6 +162,11 @@
     {
       "name": "paused",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "paused",
       "reflectToAttr": false,
diff --git a/src/translate/api/split-pane.json b/src/translate/api/split-pane.json
index fd964ab215a..dcfdde42619 100644
--- a/src/translate/api/split-pane.json
+++ b/src/translate/api/split-pane.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/split-pane/split-pane.tsx",
+  "filePath": "src/components/split-pane/split-pane.tsx",
   "encapsulation": "shadow",
   "tag": "ion-split-pane",
   "docs": "",
@@ -9,6 +9,11 @@
     {
       "name": "contentId",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "content-id",
       "reflectToAttr": true,
@@ -28,6 +33,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -45,6 +55,11 @@
     {
       "name": "when",
       "type": "boolean | string",
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "when",
       "reflectToAttr": false,
@@ -69,6 +84,11 @@
       "event": "ionSplitPaneVisible",
       "detail": "{ visible: boolean; }",
       "bubbles": true,
+      "complexType": {
+        "original": "{ visible: boolean }",
+        "resolved": "{ visible: boolean; }",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Expression to be called when the split-pane visibility has changed",
diff --git a/src/translate/api/tab-bar.json b/src/translate/api/tab-bar.json
index 3974ee41a98..60a278079b9 100644
--- a/src/translate/api/tab-bar.json
+++ b/src/translate/api/tab-bar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tab-bar/tab-bar.tsx",
+  "filePath": "src/components/tab-bar/tab-bar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tab-bar",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -90,6 +101,11 @@
     {
       "name": "selectedTab",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "selected-tab",
       "reflectToAttr": false,
@@ -109,6 +125,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
diff --git a/src/translate/api/tab-button.json b/src/translate/api/tab-button.json
index 7edadd1fb2e..0a8bbe42a8e 100644
--- a/src/translate/api/tab-button.json
+++ b/src/translate/api/tab-button.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tab-button/tab-button.tsx",
+  "filePath": "src/components/tab-button/tab-button.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tab-button",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -35,6 +40,11 @@
     {
       "name": "download",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "download",
       "reflectToAttr": false,
@@ -54,6 +64,11 @@
     {
       "name": "href",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "href",
       "reflectToAttr": false,
@@ -73,6 +88,17 @@
     {
       "name": "layout",
       "type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+      "complexType": {
+        "original": "TabButtonLayout",
+        "resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+        "references": {
+          "TabButtonLayout": {
+            "location": "import",
+            "path": "../tab-bar/tab-bar-interface",
+            "id": "src/components/tab-bar/tab-bar-interface.ts::TabButtonLayout"
+          }
+        }
+      },
       "mutable": true,
       "attr": "layout",
       "reflectToAttr": false,
@@ -134,6 +160,11 @@
     {
       "name": "rel",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rel",
       "reflectToAttr": false,
@@ -153,6 +184,11 @@
     {
       "name": "selected",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "selected",
       "reflectToAttr": false,
@@ -170,6 +206,11 @@
     {
       "name": "tab",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "tab",
       "reflectToAttr": false,
@@ -189,6 +230,11 @@
     {
       "name": "target",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "target",
       "reflectToAttr": false,
diff --git a/src/translate/api/tab.json b/src/translate/api/tab.json
index 36c812d9d9d..50b2e2f53ac 100644
--- a/src/translate/api/tab.json
+++ b/src/translate/api/tab.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tab/tab.tsx",
+  "filePath": "src/components/tab/tab.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tab",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "component",
       "type": "Function | HTMLElement | null | string | undefined",
+      "complexType": {
+        "original": "ComponentRef",
+        "resolved": "Function | HTMLElement | null | string | undefined",
+        "references": {
+          "ComponentRef": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::ComponentRef"
+          }
+        }
+      },
       "mutable": false,
       "attr": "component",
       "reflectToAttr": false,
@@ -37,6 +48,11 @@
     {
       "name": "tab",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "tab",
       "reflectToAttr": false,
@@ -58,6 +74,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setActive() => Promise<void>",
       "parameters": [],
       "docs": "Set the active component for the tab",
diff --git a/src/translate/api/tabs.json b/src/translate/api/tabs.json
index 055e313e9c5..45b1db31e43 100644
--- a/src/translate/api/tabs.json
+++ b/src/translate/api/tabs.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/tabs/tabs.tsx",
+  "filePath": "src/components/tabs/tabs.tsx",
   "encapsulation": "shadow",
   "tag": "ion-tabs",
   "docs": "",
@@ -26,6 +26,17 @@
         "type": "Promise<string | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<string | undefined>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<string | undefined>"
+      },
       "signature": "getSelected() => Promise<string | undefined>",
       "parameters": [],
       "docs": "Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
@@ -37,6 +48,31 @@
         "type": "Promise<HTMLIonTabElement | undefined>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+              }
+            ],
+            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLIonTabElement": {
+            "location": "global",
+            "id": "global::HTMLIonTabElement"
+          }
+        },
+        "return": "Promise<HTMLIonTabElement | undefined>"
+      },
       "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
       "parameters": [],
       "docs": "Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
@@ -53,6 +89,31 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(tab: string | HTMLIonTabElement) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+              }
+            ],
+            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLIonTabElement": {
+            "location": "global",
+            "id": "global::HTMLIonTabElement"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
       "parameters": [],
       "docs": "Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
@@ -69,6 +130,11 @@
       "event": "ionTabsDidChange",
       "detail": "{ tab: string; }",
       "bubbles": false,
+      "complexType": {
+        "original": "{ tab: string }",
+        "resolved": "{ tab: string; }",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the navigation has finished transitioning to a new component.",
@@ -78,6 +144,11 @@
       "event": "ionTabsWillChange",
       "detail": "{ tab: string; }",
       "bubbles": false,
+      "complexType": {
+        "original": "{ tab: string }",
+        "resolved": "{ tab: string; }",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the navigation is about to transition to a new component.",
diff --git a/src/translate/api/text.json b/src/translate/api/text.json
index b3d8d9f0c78..def942d45d5 100644
--- a/src/translate/api/text.json
+++ b/src/translate/api/text.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/text/text.tsx",
+  "filePath": "src/components/text/text.tsx",
   "encapsulation": "shadow",
   "tag": "ion-text",
   "docs": "",
@@ -14,6 +14,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/api/textarea.json b/src/translate/api/textarea.json
index 58240340488..7b1d96e97e2 100644
--- a/src/translate/api/textarea.json
+++ b/src/translate/api/textarea.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/textarea/textarea.tsx",
+  "filePath": "src/components/textarea/textarea.tsx",
   "encapsulation": "scoped",
   "tag": "ion-textarea",
   "docs": "",
@@ -18,6 +18,11 @@
     {
       "name": "autoGrow",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "auto-grow",
       "reflectToAttr": true,
@@ -35,6 +40,11 @@
     {
       "name": "autocapitalize",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autocapitalize",
       "reflectToAttr": false,
@@ -52,6 +62,11 @@
     {
       "name": "autofocus",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "autofocus",
       "reflectToAttr": false,
@@ -69,6 +84,11 @@
     {
       "name": "clearOnEdit",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "clear-on-edit",
       "reflectToAttr": false,
@@ -86,6 +106,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -141,6 +172,11 @@
     {
       "name": "cols",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "cols",
       "reflectToAttr": false,
@@ -160,6 +196,11 @@
     {
       "name": "counter",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "counter",
       "reflectToAttr": false,
@@ -177,6 +218,11 @@
     {
       "name": "counterFormatter",
       "type": "((inputLength: number, maxLength: number) => string) | undefined",
+      "complexType": {
+        "original": "(inputLength: number, maxLength: number) => string",
+        "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
@@ -195,6 +241,11 @@
     {
       "name": "debounce",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "debounce",
       "reflectToAttr": false,
@@ -214,6 +265,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -231,6 +287,11 @@
     {
       "name": "enterkeyhint",
       "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+      "complexType": {
+        "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enterkeyhint",
       "reflectToAttr": false,
@@ -275,6 +336,11 @@
     {
       "name": "errorText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "error-text",
       "reflectToAttr": false,
@@ -294,6 +360,11 @@
     {
       "name": "fill",
       "type": "\"outline\" | \"solid\" | undefined",
+      "complexType": {
+        "original": "'outline' | 'solid'",
+        "resolved": "\"outline\" | \"solid\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "fill",
       "reflectToAttr": false,
@@ -318,6 +389,11 @@
     {
       "name": "helperText",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "helper-text",
       "reflectToAttr": false,
@@ -337,6 +413,11 @@
     {
       "name": "inputmode",
       "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+      "complexType": {
+        "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+        "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "inputmode",
       "reflectToAttr": false,
@@ -385,6 +466,11 @@
     {
       "name": "label",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label",
       "reflectToAttr": false,
@@ -404,6 +490,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -438,6 +529,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -457,6 +553,11 @@
     {
       "name": "maxlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "maxlength",
       "reflectToAttr": false,
@@ -476,6 +577,11 @@
     {
       "name": "minlength",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "minlength",
       "reflectToAttr": false,
@@ -516,6 +622,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -533,6 +644,11 @@
     {
       "name": "placeholder",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "placeholder",
       "reflectToAttr": false,
@@ -552,6 +668,11 @@
     {
       "name": "readonly",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "readonly",
       "reflectToAttr": false,
@@ -569,6 +690,11 @@
     {
       "name": "required",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "required",
       "reflectToAttr": false,
@@ -586,6 +712,11 @@
     {
       "name": "rows",
       "type": "number | undefined",
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "rows",
       "reflectToAttr": false,
@@ -605,6 +736,11 @@
     {
       "name": "shape",
       "type": "\"round\" | undefined",
+      "complexType": {
+        "original": "'round'",
+        "resolved": "\"round\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "shape",
       "reflectToAttr": false,
@@ -625,6 +761,11 @@
     {
       "name": "spellcheck",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "spellcheck",
       "reflectToAttr": false,
@@ -642,6 +783,11 @@
     {
       "name": "value",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -665,6 +811,11 @@
     {
       "name": "wrap",
       "type": "\"hard\" | \"off\" | \"soft\" | undefined",
+      "complexType": {
+        "original": "'hard' | 'soft' | 'off'",
+        "resolved": "\"hard\" | \"off\" | \"soft\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "wrap",
       "reflectToAttr": false,
@@ -698,6 +849,21 @@
         "type": "Promise<HTMLTextAreaElement>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<HTMLTextAreaElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "HTMLTextAreaElement": {
+            "location": "global",
+            "id": "global::HTMLTextAreaElement"
+          }
+        },
+        "return": "Promise<HTMLTextAreaElement>"
+      },
       "signature": "getInputElement() => Promise<HTMLTextAreaElement>",
       "parameters": [],
       "docs": "Returns the native `<textarea>` element used under the hood.",
@@ -709,6 +875,17 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "setFocus() => Promise<void>",
       "parameters": [],
       "docs": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.",
@@ -720,6 +897,16 @@
       "event": "ionBlur",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input loses focus.",
@@ -729,6 +916,17 @@
       "event": "ionChange",
       "detail": "TextareaChangeEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "TextareaChangeEventDetail",
+        "resolved": "TextareaChangeEventDetail",
+        "references": {
+          "TextareaChangeEventDetail": {
+            "location": "import",
+            "path": "./textarea-interface",
+            "id": "src/components/textarea/textarea-interface.ts::TextareaChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionChange` event is fired when the user modifies the textarea's value.\nUnlike the `ionInput` event, the `ionChange` event is fired when\nthe element loses focus after its value has been modified.",
@@ -738,6 +936,16 @@
       "event": "ionFocus",
       "detail": "FocusEvent",
       "bubbles": true,
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global",
+            "id": "global::FocusEvent"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the input has focus.",
@@ -747,6 +955,17 @@
       "event": "ionInput",
       "detail": "TextareaInputEventDetail",
       "bubbles": true,
+      "complexType": {
+        "original": "TextareaInputEventDetail",
+        "resolved": "TextareaInputEventDetail",
+        "references": {
+          "TextareaInputEventDetail": {
+            "location": "import",
+            "path": "./textarea-interface",
+            "id": "src/components/textarea/textarea-interface.ts::TextareaInputEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "The `ionInput` event is fired each time the user modifies the textarea's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the textarea's value. This typically happens for each keystroke as the user types.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
diff --git a/src/translate/api/thumbnail.json b/src/translate/api/thumbnail.json
index 7363aa6dd56..6c147233bab 100644
--- a/src/translate/api/thumbnail.json
+++ b/src/translate/api/thumbnail.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/thumbnail/thumbnail.tsx",
+  "filePath": "src/components/thumbnail/thumbnail.tsx",
   "encapsulation": "shadow",
   "tag": "ion-thumbnail",
   "docs": "",
diff --git a/src/translate/api/title.json b/src/translate/api/title.json
index 2ee851cbfe9..298e76ca27d 100644
--- a/src/translate/api/title.json
+++ b/src/translate/api/title.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/title/title.tsx",
+  "filePath": "src/components/title/title.tsx",
   "encapsulation": "shadow",
   "tag": "ion-title",
   "docs": "",
@@ -9,6 +9,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -64,6 +75,11 @@
     {
       "name": "size",
       "type": "\"large\" | \"small\" | undefined",
+      "complexType": {
+        "original": "'large' | 'small'",
+        "resolved": "\"large\" | \"small\" | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "size",
       "reflectToAttr": false,
diff --git a/src/translate/api/toast.json b/src/translate/api/toast.json
index 977fc8ccf98..e7918acc151 100644
--- a/src/translate/api/toast.json
+++ b/src/translate/api/toast.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/toast/toast.tsx",
+  "filePath": "src/components/toast/toast.tsx",
   "encapsulation": "shadow",
   "tag": "ion-toast",
   "docs": "",
@@ -12,6 +12,10 @@
       "name": "part",
       "text": "button - Any button element that is displayed inside of the toast."
     },
+    {
+      "name": "part",
+      "text": "button cancel - Any button element with role \"cancel\" that is displayed inside of the toast."
+    },
     {
       "name": "part",
       "text": "container - The element that wraps all child elements."
@@ -34,6 +38,11 @@
     {
       "name": "animated",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "animated",
       "reflectToAttr": false,
@@ -51,6 +60,17 @@
     {
       "name": "buttons",
       "type": "(string | ToastButton)[] | undefined",
+      "complexType": {
+        "original": "(ToastButton | string)[]",
+        "resolved": "(string | ToastButton)[] | undefined",
+        "references": {
+          "ToastButton": {
+            "location": "import",
+            "path": "./toast-interface",
+            "id": "src/components/toast/toast-interface.ts::ToastButton"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "An array of buttons for the toast.",
@@ -72,6 +92,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -127,6 +158,11 @@
     {
       "name": "cssClass",
       "type": "string | string[] | undefined",
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "css-class",
       "reflectToAttr": false,
@@ -149,6 +185,11 @@
     {
       "name": "duration",
       "type": "number",
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
       "mutable": false,
       "attr": "duration",
       "reflectToAttr": false,
@@ -166,6 +207,17 @@
     {
       "name": "enterAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the toast is presented.",
@@ -184,6 +236,11 @@
     {
       "name": "header",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "header",
       "reflectToAttr": false,
@@ -203,6 +260,11 @@
     {
       "name": "htmlAttributes",
       "type": "undefined | { [key: string]: any; }",
+      "complexType": {
+        "original": "{ [key: string]: any }",
+        "resolved": "undefined | { [key: string]: any; }",
+        "references": {}
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Additional attributes to pass to the toast.",
@@ -221,6 +283,11 @@
     {
       "name": "icon",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "icon",
       "reflectToAttr": false,
@@ -240,6 +307,11 @@
     {
       "name": "isOpen",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "is-open",
       "reflectToAttr": false,
@@ -257,6 +329,11 @@
     {
       "name": "keyboardClose",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "keyboard-close",
       "reflectToAttr": false,
@@ -274,6 +351,17 @@
     {
       "name": "layout",
       "type": "\"baseline\" | \"stacked\"",
+      "complexType": {
+        "original": "ToastLayout",
+        "resolved": "\"baseline\" | \"stacked\"",
+        "references": {
+          "ToastLayout": {
+            "location": "import",
+            "path": "./toast-interface",
+            "id": "src/components/toast/toast-interface.ts::ToastLayout"
+          }
+        }
+      },
       "mutable": false,
       "attr": "layout",
       "reflectToAttr": false,
@@ -296,6 +384,17 @@
     {
       "name": "leaveAnimation",
       "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+      "complexType": {
+        "original": "AnimationBuilder",
+        "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+        "references": {
+          "AnimationBuilder": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::AnimationBuilder"
+          }
+        }
+      },
       "mutable": false,
       "reflectToAttr": false,
       "docs": "Animation to use when the toast is dismissed.",
@@ -314,6 +413,17 @@
     {
       "name": "message",
       "type": "IonicSafeString | string | undefined",
+      "complexType": {
+        "original": "string | IonicSafeString",
+        "resolved": "IonicSafeString | string | undefined",
+        "references": {
+          "IonicSafeString": {
+            "location": "import",
+            "path": "../../utils/sanitization",
+            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+          }
+        }
+      },
       "mutable": false,
       "attr": "message",
       "reflectToAttr": false,
@@ -357,6 +467,17 @@
     {
       "name": "position",
       "type": "\"bottom\" | \"middle\" | \"top\"",
+      "complexType": {
+        "original": "ToastPosition",
+        "resolved": "\"bottom\" | \"middle\" | \"top\"",
+        "references": {
+          "ToastPosition": {
+            "location": "import",
+            "path": "./toast-interface",
+            "id": "src/components/toast/toast-interface.ts::ToastPosition"
+          }
+        }
+      },
       "mutable": false,
       "attr": "position",
       "reflectToAttr": false,
@@ -383,6 +504,11 @@
     {
       "name": "translucent",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "translucent",
       "reflectToAttr": false,
@@ -400,6 +526,11 @@
     {
       "name": "trigger",
       "type": "string | undefined",
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "trigger",
       "reflectToAttr": false,
@@ -424,6 +555,40 @@
         "type": "Promise<boolean>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "(data?: any, role?: string) => Promise<boolean>",
+        "parameters": [
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "data Any data to emit in the dismiss events."
+              }
+            ],
+            "text": "Any data to emit in the dismiss events."
+          },
+          {
+            "tags": [
+              {
+                "name": "param",
+                "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "text": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+          }
+        ],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ToastDismissOptions": {
+            "location": "global",
+            "id": "global::ToastDismissOptions"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
       "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
       "parameters": [],
       "docs": "Dismiss the toast overlay after it has been presented.",
@@ -444,6 +609,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the toast did dismiss.",
@@ -455,6 +640,26 @@
         "type": "Promise<OverlayEventDetail<T>>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          },
+          "T": {
+            "location": "global",
+            "id": "global::T"
+          }
+        },
+        "return": "Promise<OverlayEventDetail<T>>"
+      },
       "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
       "parameters": [],
       "docs": "Returns a promise that resolves when the toast will dismiss.",
@@ -466,6 +671,21 @@
         "type": "Promise<void>",
         "docs": ""
       },
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global",
+            "id": "global::Promise"
+          },
+          "ToastPresentOptions": {
+            "location": "global",
+            "id": "global::ToastPresentOptions"
+          }
+        },
+        "return": "Promise<void>"
+      },
       "signature": "present() => Promise<void>",
       "parameters": [],
       "docs": "Present the toast overlay after it has been created.",
@@ -477,6 +697,17 @@
       "event": "didDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has dismissed.\nShorthand for ionToastDidDismiss.",
@@ -486,6 +717,11 @@
       "event": "didPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has presented.\nShorthand for ionToastWillDismiss.",
@@ -495,6 +731,17 @@
       "event": "ionToastDidDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has dismissed.",
@@ -504,6 +751,11 @@
       "event": "ionToastDidPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted after the toast has presented.",
@@ -513,6 +765,17 @@
       "event": "ionToastWillDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has dismissed.",
@@ -522,6 +785,11 @@
       "event": "ionToastWillPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has presented.",
@@ -531,6 +799,17 @@
       "event": "willDismiss",
       "detail": "OverlayEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "OverlayEventDetail",
+        "resolved": "OverlayEventDetail<any>",
+        "references": {
+          "OverlayEventDetail": {
+            "location": "import",
+            "path": "../../utils/overlays-interface",
+            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has dismissed.\nShorthand for ionToastWillDismiss.",
@@ -540,6 +819,11 @@
       "event": "willPresent",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted before the toast has presented.\nShorthand for ionToastWillPresent.",
@@ -640,6 +924,10 @@
       "name": "button",
       "docs": "Any button element that is displayed inside of the toast."
     },
+    {
+      "name": "button cancel",
+      "docs": "Any button element with role \"cancel\" that is displayed inside of the toast."
+    },
     {
       "name": "container",
       "docs": "The element that wraps all child elements."
diff --git a/src/translate/api/toggle.json b/src/translate/api/toggle.json
index f87fc39d265..6d17693384d 100644
--- a/src/translate/api/toggle.json
+++ b/src/translate/api/toggle.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/toggle/toggle.tsx",
+  "filePath": "src/components/toggle/toggle.tsx",
   "encapsulation": "shadow",
   "tag": "ion-toggle",
   "docs": "",
@@ -26,6 +26,11 @@
     {
       "name": "checked",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": true,
       "attr": "checked",
       "reflectToAttr": false,
@@ -43,6 +48,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
@@ -98,6 +114,11 @@
     {
       "name": "disabled",
       "type": "boolean",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
       "mutable": false,
       "attr": "disabled",
       "reflectToAttr": false,
@@ -115,6 +136,11 @@
     {
       "name": "enableOnOffLabels",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean | undefined",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "enable-on-off-labels",
       "reflectToAttr": false,
@@ -135,6 +161,11 @@
     {
       "name": "justify",
       "type": "\"end\" | \"space-between\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'space-between'",
+        "resolved": "\"end\" | \"space-between\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "justify",
       "reflectToAttr": false,
@@ -161,6 +192,11 @@
     {
       "name": "labelPlacement",
       "type": "\"end\" | \"fixed\" | \"start\"",
+      "complexType": {
+        "original": "'start' | 'end' | 'fixed'",
+        "resolved": "\"end\" | \"fixed\" | \"start\"",
+        "references": {}
+      },
       "mutable": false,
       "attr": "label-placement",
       "reflectToAttr": false,
@@ -187,6 +223,11 @@
     {
       "name": "legacy",
       "type": "boolean | undefined",
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "legacy",
       "reflectToAttr": false,
@@ -227,6 +268,11 @@
     {
       "name": "name",
       "type": "string",
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
       "mutable": false,
       "attr": "name",
       "reflectToAttr": false,
@@ -244,6 +290,11 @@
     {
       "name": "value",
       "type": "null | string | undefined",
+      "complexType": {
+        "original": "string | null",
+        "resolved": "null | string | undefined",
+        "references": {}
+      },
       "mutable": false,
       "attr": "value",
       "reflectToAttr": false,
@@ -271,6 +322,11 @@
       "event": "ionBlur",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the toggle loses focus.",
@@ -280,6 +336,17 @@
       "event": "ionChange",
       "detail": "ToggleChangeEventDetail<any>",
       "bubbles": true,
+      "complexType": {
+        "original": "ToggleChangeEventDetail",
+        "resolved": "ToggleChangeEventDetail<any>",
+        "references": {
+          "ToggleChangeEventDetail": {
+            "location": "import",
+            "path": "./toggle-interface",
+            "id": "src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail"
+          }
+        }
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
@@ -289,6 +356,11 @@
       "event": "ionFocus",
       "detail": "void",
       "bubbles": true,
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      },
       "cancelable": true,
       "composed": true,
       "docs": "Emitted when the toggle has focus.",
diff --git a/src/translate/api/toolbar.json b/src/translate/api/toolbar.json
index 1a9a7531a5c..24324679007 100644
--- a/src/translate/api/toolbar.json
+++ b/src/translate/api/toolbar.json
@@ -1,5 +1,5 @@
 {
-  "filePath": "./src/components/toolbar/toolbar.tsx",
+  "filePath": "src/components/toolbar/toolbar.tsx",
   "encapsulation": "shadow",
   "tag": "ion-toolbar",
   "docs": "",
@@ -34,6 +34,17 @@
     {
       "name": "color",
       "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+        "references": {
+          "Color": {
+            "location": "import",
+            "path": "../../interface",
+            "id": "src/interface.d.ts::Color"
+          }
+        }
+      },
       "mutable": false,
       "attr": "color",
       "reflectToAttr": true,
diff --git a/src/translate/cli/build.readme.md b/src/translate/cli/build.readme.md
index 5f6c540c109..7de5f855455 100644
--- a/src/translate/cli/build.readme.md
+++ b/src/translate/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-add.readme.md b/src/translate/cli/capacitor-add.readme.md
index 464a4fb5a49..6a1ecf8bc10 100644
--- a/src/translate/cli/capacitor-add.readme.md
+++ b/src/translate/cli/capacitor-add.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor add` will do the following:
-
 - Install the Capacitor platform package
-- Copy the native platform template into your project
+- Copy the native platform template into your project
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-build.readme.md b/src/translate/cli/capacitor-build.readme.md
index ecbb4a9e00a..0ccb955a383 100644
--- a/src/translate/cli/capacitor-build.readme.md
+++ b/src/translate/cli/capacitor-build.readme.md
@@ -1,9 +1,8 @@
 `ionic capacitor build` will do the following:
-
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-copy.readme.md b/src/translate/cli/capacitor-copy.readme.md
index ad813a2f858..2e5ddd1f0e7 100644
--- a/src/translate/cli/capacitor-copy.readme.md
+++ b/src/translate/cli/capacitor-copy.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor copy` will do the following:
-
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
+- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-open.readme.md b/src/translate/cli/capacitor-open.readme.md
index c52c1f44711..6a4f8a5eeba 100644
--- a/src/translate/cli/capacitor-open.readme.md
+++ b/src/translate/cli/capacitor-open.readme.md
@@ -1,3 +1,2 @@
 `ionic capacitor open` will do the following:
-
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-run.readme.md b/src/translate/cli/capacitor-run.readme.md
index 56a76e0d464..a17e32b9a99 100644
--- a/src/translate/cli/capacitor-run.readme.md
+++ b/src/translate/cli/capacitor-run.readme.md
@@ -1,5 +1,4 @@
 `ionic capacitor run` will do the following:
-
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -7,4 +6,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-sync.readme.md b/src/translate/cli/capacitor-sync.readme.md
index 403ecdf9af3..4ab54b5269d 100644
--- a/src/translate/cli/capacitor-sync.readme.md
+++ b/src/translate/cli/capacitor-sync.readme.md
@@ -1,6 +1,5 @@
 `ionic capacitor sync` will do the following:
-
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/cli/capacitor-update.readme.md b/src/translate/cli/capacitor-update.readme.md
index 6691448d373..6941a9bbe77 100644
--- a/src/translate/cli/capacitor-update.readme.md
+++ b/src/translate/cli/capacitor-update.readme.md
@@ -1,4 +1,3 @@
 `ionic capacitor update` will do the following:
-
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
+- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
diff --git a/src/translate/cli/completion.readme.md b/src/translate/cli/completion.readme.md
index 98969ac91c0..c614f27c143 100644
--- a/src/translate/cli/completion.readme.md
+++ b/src/translate/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
diff --git a/src/translate/cli/config-get.readme.md b/src/translate/cli/config-get.readme.md
index b993225035b..ecfdc6708ac 100644
--- a/src/translate/cli/config-get.readme.md
+++ b/src/translate/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
diff --git a/src/translate/cli/config-set.readme.md b/src/translate/cli/config-set.readme.md
index 4cfe7872088..fd2916c6e27 100644
--- a/src/translate/cli/config-set.readme.md
+++ b/src/translate/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
diff --git a/src/translate/cli/config-unset.readme.md b/src/translate/cli/config-unset.readme.md
index 7dca73c33a4..9b7c09a8699 100644
--- a/src/translate/cli/config-unset.readme.md
+++ b/src/translate/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-build.readme.md b/src/translate/cli/cordova-build.readme.md
index 5859a7e2658..774bb3c3bab 100644
--- a/src/translate/cli/cordova-build.readme.md
+++ b/src/translate/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-compile.readme.md b/src/translate/cli/cordova-compile.readme.md
index f234fefe548..947b914334f 100644
--- a/src/translate/cli/cordova-compile.readme.md
+++ b/src/translate/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
+Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-emulate.readme.md b/src/translate/cli/cordova-emulate.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/cli/cordova-emulate.readme.md
+++ b/src/translate/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-platform.readme.md b/src/translate/cli/cordova-platform.readme.md
index 1b289c0ac8f..f65aea27395 100644
--- a/src/translate/cli/cordova-platform.readme.md
+++ b/src/translate/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-plugin.readme.md b/src/translate/cli/cordova-plugin.readme.md
index 162ba073340..b3ea63900d4 100644
--- a/src/translate/cli/cordova-plugin.readme.md
+++ b/src/translate/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
+Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-prepare.readme.md b/src/translate/cli/cordova-prepare.readme.md
index 6ae022dcaa0..90b7d18e711 100644
--- a/src/translate/cli/cordova-prepare.readme.md
+++ b/src/translate/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-requirements.readme.md b/src/translate/cli/cordova-requirements.readme.md
index edf47772b1f..04bdf9cef01 100644
--- a/src/translate/cli/cordova-requirements.readme.md
+++ b/src/translate/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
+Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
diff --git a/src/translate/cli/cordova-resources.readme.md b/src/translate/cli/cordova-resources.readme.md
index e93fdd8a890..730573a47c3 100644
--- a/src/translate/cli/cordova-resources.readme.md
+++ b/src/translate/cli/cordova-resources.readme.md
@@ -11,6 +11,5 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
-
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
diff --git a/src/translate/cli/cordova-run.readme.md b/src/translate/cli/cordova-run.readme.md
index 7595cd2ca30..bd396957a25 100644
--- a/src/translate/cli/cordova-run.readme.md
+++ b/src/translate/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
diff --git a/src/translate/cli/generate.readme.md b/src/translate/cli/generate.readme.md
index 042f64a7a4c..30de99a2484 100644
--- a/src/translate/cli/generate.readme.md
+++ b/src/translate/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
-- For a full list of available types, use `npx ng g --help`
-- For a list of options for a types, use `npx ng g <type> --help`
+ - For a full list of available types, use `npx ng g --help`
+ - For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
+To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
diff --git a/src/translate/cli/git-remote.readme.md b/src/translate/cli/git-remote.readme.md
index 58347c24535..b4caf425642 100644
--- a/src/translate/cli/git-remote.readme.md
+++ b/src/translate/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
diff --git a/src/translate/cli/info.readme.md b/src/translate/cli/info.readme.md
index d633e373984..03f86bc2907 100644
--- a/src/translate/cli/info.readme.md
+++ b/src/translate/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
diff --git a/src/translate/cli/init.readme.md b/src/translate/cli/init.readme.md
index 918620be789..98b3118bed5 100644
--- a/src/translate/cli/init.readme.md
+++ b/src/translate/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
diff --git a/src/translate/cli/integrations-disable.readme.md b/src/translate/cli/integrations-disable.readme.md
index b4f4a38bdd0..5418badf555 100644
--- a/src/translate/cli/integrations-disable.readme.md
+++ b/src/translate/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
+Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
diff --git a/src/translate/cli/integrations-enable.readme.md b/src/translate/cli/integrations-enable.readme.md
index 76526785eaa..945fcbbb226 100644
--- a/src/translate/cli/integrations-enable.readme.md
+++ b/src/translate/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
+Integrations can be re-added with the `--add` option.
\ No newline at end of file
diff --git a/src/translate/cli/integrations-list.readme.md b/src/translate/cli/integrations-list.readme.md
index d075d211e95..044dd455e0e 100644
--- a/src/translate/cli/integrations-list.readme.md
+++ b/src/translate/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
+- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
diff --git a/src/translate/cli/link.readme.md b/src/translate/cli/link.readme.md
index f5a96a51946..e621a2e948a 100644
--- a/src/translate/cli/link.readme.md
+++ b/src/translate/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/live-update-add.readme.md b/src/translate/cli/live-update-add.readme.md
index d2aebb869cd..bc0316117d7 100644
--- a/src/translate/cli/live-update-add.readme.md
+++ b/src/translate/cli/live-update-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for bo
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
diff --git a/src/translate/cli/live-update-configure.readme.md b/src/translate/cli/live-update-configure.readme.md
index d4bc34cffba..1d8c7504c8f 100644
--- a/src/translate/cli/live-update-configure.readme.md
+++ b/src/translate/cli/live-update-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Live Update plugin (`cordov
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
diff --git a/src/translate/cli/login.readme.md b/src/translate/cli/login.readme.md
index ce63bb58ac0..0fbe95d2ae8 100644
--- a/src/translate/cli/login.readme.md
+++ b/src/translate/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/logout.readme.md b/src/translate/cli/logout.readme.md
index 540a69a156c..4122a7422e5 100644
--- a/src/translate/cli/logout.readme.md
+++ b/src/translate/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
+If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
diff --git a/src/translate/cli/repair.readme.md b/src/translate/cli/repair.readme.md
index 9b01e9d40d8..dbb18055c3a 100644
--- a/src/translate/cli/repair.readme.md
+++ b/src/translate/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
diff --git a/src/translate/cli/serve.readme.md b/src/translate/cli/serve.readme.md
index a9b7bd7d2af..b08bf89fccf 100644
--- a/src/translate/cli/serve.readme.md
+++ b/src/translate/cli/serve.readme.md
@@ -4,4 +4,4 @@ By default, `ionic serve` boots up a development server on `localhost`. To serve
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
diff --git a/src/translate/cli/signup.readme.md b/src/translate/cli/signup.readme.md
index 82d215181a5..4761dfdf982 100644
--- a/src/translate/cli/signup.readme.md
+++ b/src/translate/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/ssh-setup.readme.md b/src/translate/cli/ssh-setup.readme.md
index b95050beae9..f6ed6f93cb8 100644
--- a/src/translate/cli/ssh-setup.readme.md
+++ b/src/translate/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
diff --git a/src/translate/cli/ssh-use.readme.md b/src/translate/cli/ssh-use.readme.md
index 4714fa29928..b9a78d4db3e 100644
--- a/src/translate/cli/ssh-use.readme.md
+++ b/src/translate/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
diff --git a/src/translate/cli/ssl-generate.readme.md b/src/translate/cli/ssl-generate.readme.md
index aea3ec98cc5..c49644b96ef 100644
--- a/src/translate/cli/ssl-generate.readme.md
+++ b/src/translate/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
diff --git a/src/translate/cli/start.readme.md b/src/translate/cli/start.readme.md
index 9b3d3b471e4..45b725f705d 100644
--- a/src/translate/cli/start.readme.md
+++ b/src/translate/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 986eeabbc94..1fbd6aab841 100644
--- a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,2 +1,3 @@
+
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
index 90e1ee9b77e..deb9dde4602 100644
--- a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,3 +1,4 @@
+
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
index 11db0748e34..420a0d400d4 100644
--- a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
index a21a70fb083..fb2004ca29c 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,3 +1,4 @@
+
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
index 41472b2e411..56e36fe9053 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1 +1,2 @@
+
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
index 8f50b6279c0..b18059b0829 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
+
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
-
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
index e11ad80b4a3..8bc209c7e54 100644
--- a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,3 +1,4 @@
+
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
index 0303990f06b..18f742e5108 100644
--- a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,3 +1,4 @@
+
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 23e8c973bf2..76387367a61 100644
--- a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index e27b0ba6540..822209a4a72 100644
--- a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1 +1,2 @@
+
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index c31c989a3d3..93a3f290203 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,3 +1,4 @@
+
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 64f0fad3191..3592aee1757 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
index a82b309d78c..2eb94af7221 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
index 8e414578f93..0c671a0c2d0 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
index 5f6722050b0..48c289cc3fb 100644
--- a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1 +1,2 @@
+
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
index 2813a5d498b..5672e0b2213 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index 95a88837497..d7ef092bae5 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index ef9f2968a8f..c331a7d05f5 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,3 +1,4 @@
+
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index e84626aea1d..6d2e7862965 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,2 +1,3 @@
+
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
index e89f74940ca..c1b58f99edf 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1 +1,3 @@
+
+
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
index aff2e2cb4d6..0db391fddba 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1 +1,2 @@
+
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
index bb919529254..12d31c41dd7 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1 +1,2 @@
+
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
index fbde6778edf..87dd87d5765 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to read and write app preferences
diff --git a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
index c2d7f1730a0..c0210b3f9e5 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,3 +1,4 @@
+
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
index 6b4fa2e5c61..08cfe48a452 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,3 +1,4 @@
+
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
index 6213470725d..1e612327b09 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1 +1,2 @@
+
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
index b3fd1055a9a..79bd464667d 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
index 41c425d19c7..af28dc677bd 100644
--- a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1 +1,2 @@
+
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
index 4197b26f800..f0017f9025d 100644
--- a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1 +1,2 @@
+
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
index 4c69face47f..d1ce36553bc 100644
--- a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,2 +1,3 @@
+
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
index b066c65401a..48d67747675 100644
--- a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,2 +1,3 @@
+
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
index 3a4a3e352cf..62278126195 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,3 +1,4 @@
+
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
index b1cfb8cd04b..a43e7c719b2 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,2 +1,3 @@
+
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
index ee73844b3c8..90ce8edd2ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,2 +1,3 @@
+
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
index 9ab2fed769b..bc94608b2c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1 +1,2 @@
+
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
index 52465e564f0..11775820229 100644
--- a/src/translate/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,3 +1,4 @@
+
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
index 33af83938f9..ebe978c896a 100644
--- a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1 +1,2 @@
+
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index 747418e7857..d40a29ab2a1 100644
--- a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,3 +1,4 @@
+
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index b84c09c835f..9f16d6d8f42 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
+This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
index 340db120adf..06a0311c510 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
@@ -1 +1,2 @@
+
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
index 2c657416aef..da71524f3d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
index bd325268e71..0725aba40ce 100644
--- a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1 +1,2 @@
+
 BioCatch SDK Cordova support
diff --git a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index b1b5ec0f81c..6be6e7318ae 100644
--- a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,2 +1,3 @@
+
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
index 8d23815cab0..4818853ac89 100644
--- a/src/translate/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,3 +1,4 @@
+
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
index f0f05bc6a1f..52d671c0034 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,2 +1,3 @@
+
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
index 6f149bce706..b6cae0f21fd 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1 +1,2 @@
+
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index c0281f22a59..639b85fee5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3b80e3d0ecd..3ae195d12de 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,3 +1,4 @@
+
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index d0939b5fde7..f3579d8e616 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
index 9921b18062b..29af8d97385 100644
--- a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,8 +1,9 @@
+
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
-Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+ Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
-For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+ For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
index a222a2efbe7..b9836ebd4c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1 +1,2 @@
+
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
index d97dd2af981..51b06d0cc15 100644
--- a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,3 +1,4 @@
+
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
index b925da2342c..71995e79760 100644
--- a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1 +1,2 @@
+
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
index f03b8b179a9..bf83901883b 100644
--- a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1 +1,2 @@
+
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
index 7b8674b3871..7e5a437d1d3 100644
--- a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1 +1,2 @@
+
 This plugin provides build information.
diff --git a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
index 515f629e662..5a83eede868 100644
--- a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,3 +1,5 @@
+
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
+
diff --git a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
index b0ecb7bb40b..16d031664c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,2 +1,3 @@
+
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
index 76f6447e69b..a2b5e1bab30 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1 +1,2 @@
+
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
index 2914b087a64..d68a0a44b0e 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,2 +1,3 @@
+
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
index 9b06352e407..31cf59dc30b 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,3 +1,4 @@
+
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
index aa5cc82125d..a354d9c7925 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,13 +1,12 @@
+
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
-
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
-
 inside of the <platform name='ios> section
diff --git a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
index 752a6da1f4f..76c58120b44 100644
--- a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
+
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
-
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
index 953ca23cf89..8518bffadeb 100644
--- a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,5 +1,6 @@
 Plugin for using Apple's ClassKit framework.
 
+
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
index 5b82513228d..f6b4973e48e 100644
--- a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
index 603b2b8f6b3..3176d5f4017 100644
--- a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1 +1,3 @@
+
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
+
diff --git a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 7e3928e3cd5..939c06b2441 100644
--- a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1 +1,2 @@
+
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
index 9d0f8be2ea1..3688eedbcac 100644
--- a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1 +1,2 @@
+
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
index b03bd091c4c..9cf894081e8 100644
--- a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,3 +1,4 @@
+
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index b32e2c7cacd..4bb2367cd5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1 +1,2 @@
+
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
index b7061033770..0243a89bfa0 100644
--- a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1 +1,2 @@
+
 Access and manage Contacts on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index ee32121391a..4a13e8229fa 100644
--- a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1 +1,2 @@
+
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
index 9faa50aaed7..6c659180b50 100644
--- a/src/translate/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
+Crops images
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 9116ddca6eb..5c24399bc42 100644
--- a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1 +1,2 @@
+
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
index d2632a61abf..5eed8b85866 100644
--- a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1 +1,2 @@
+
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
index cabc3d4ff44..08fbb92c20c 100644
--- a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
index 8943e5b9ca4..bffae754b58 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1 +1,2 @@
+
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
index f11c48fa910..ad508847c3e 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1 +1,3 @@
+
+
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
index 4dbbb06d71c..abe72e3b6c0 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
index e96364431a7..02c713e2138 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-device.readme.md b/src/translate/native/@awesome-cordova-plugins-device.readme.md
index 3dbd2dec8e3..c6ef6980695 100644
--- a/src/translate/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device.readme.md
@@ -1 +1,2 @@
+
 Access information about the underlying device and platform.
diff --git a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
index ac9d8279b92..893058bc4eb 100644
--- a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1 +1,2 @@
+
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
index 64c6b6393fe..a90f9cfbe85 100644
--- a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1 +1,2 @@
+
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
index f988d884a0c..11ac16aafc6 100644
--- a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
index 3a08f9c811c..7eac80f6cff 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,2 +1,4 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
index 03cd028ccfd..29d32018802 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1 +1,2 @@
+
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
index 605e7b14d41..7e39f62d9b0 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1 +1,2 @@
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
+
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
index dad89444163..f15e01b1143 100644
--- a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1 +1,3 @@
+
 This plugin is designed to support downloading files using Android DownloadManager.
+
diff --git a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
index a305d027409..4176ac2a7b9 100644
--- a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1 +1,4 @@
+
+
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
+
diff --git a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
index d0554945c4c..81259d50cc1 100644
--- a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,3 +1,5 @@
+
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
+
diff --git a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index b76b54f6046..40349a8306b 100644
--- a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1 +1,2 @@
+
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 043375415ac..16c3ea63d2a 100644
--- a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-Retrieves additional device information from the Device Hardware
 
-- memory
-- cpumhz
-- totalstorage
-- freestorage
+Retrieves additional device information from the Device Hardware
+ - memory
+ - cpumhz
+ - totalstorage
+ - freestorage
diff --git a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
index b140e97cb32..12d214e6d38 100644
--- a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,3 +1,4 @@
+
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
index 93e5e887491..df9af63f74b 100644
--- a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,10 +1,11 @@
+
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
-To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+ To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -29,7 +30,6 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
-
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
-
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-#### Android Install
 
+#### Android Install
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
+
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
index dbbb3b72132..f3790772c17 100644
--- a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1 +1,2 @@
+
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
index 4bf1bdf418f..b4553ad9baf 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
index f1b5408277a..4fdfccbf60d 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1 +1,2 @@
+
 Simple file encryption for Cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
index a719c048fe4..ba26e51b8cd 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1 +1,2 @@
+
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
index 1f3eeb42d5a..c9445ac1ce7 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1 +1,3 @@
+
+
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
index 3616dbd3573..b33dc3c0f97 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1 +1,3 @@
+
+
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
index 4770407e60d..c8ba532eae9 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to upload and download files.
diff --git a/src/translate/native/@awesome-cordova-plugins-file.readme.md b/src/translate/native/@awesome-cordova-plugins-file.readme.md
index 28bc40d6e90..1e61b343d6b 100644
--- a/src/translate/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
+
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
-
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
-This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
-The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
-Although most of the plugin code was written when an earlier spec was current: http:
-//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-//dev.w3.org/2009/dap/file-system/file-writer.html
+ This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+ The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+ Although most of the plugin code was written when an earlier spec was current: http:
+  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index ce125266039..f87a05030d7 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -5,9 +6,7 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-
-For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
-
+For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 410431f731b..4da15cc2ef6 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
index 38a8b24123d..45a214eee3a 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Config
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
index a1c32524c76..2d8b3effb06 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1 +1,2 @@
+
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index b88fed62436..2ad1e2109bd 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1 +1,2 @@
+
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 2cfe3a22194..6efc1b8ae10 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -9,7 +10,6 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
-
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 6a18f9fcf39..5bdcf74de11 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
index d1f83c84392..433e365a6a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
index aa17963327a..e044eb6dc66 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,2 +1,3 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
index 6c21f982616..25001f76e05 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1 +1,2 @@
+
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index e57049202bf..80ef2d51635 100644
--- a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1 +1,2 @@
+
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
index 563b7c87954..6d68d07b0fe 100644
--- a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,8 +1,9 @@
+
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into `config.xml`:
+For android API 28+, the following xml snippet should be inserted into ```config.xml```:
 
 ```
 ...
@@ -11,4 +12,4 @@ For android API 28+, the following xml snippet should be inserted into `config.x
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
index 5987065177c..0cd5a4278d8 100644
--- a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1 +1,2 @@
+
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
index 5dda6c71ade..a56ed3a0093 100644
--- a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,2 +1,3 @@
+
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
index 2f83489f5fb..6e993e8f8a8 100644
--- a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
index 0391a010ff3..8d55357a600 100644
--- a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,11 +1,12 @@
+
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
-This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+ This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
-
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
+
diff --git a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
index 840cf8d4fb5..d1a3161e0b4 100644
--- a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1 +1,2 @@
+
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
index 8ebef774b81..1c759160579 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
+
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
-
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
index 0e715c64736..42ea1211a02 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1 +1,2 @@
+
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index a10f89326aa..e40dfc4db5e 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
index 676268db9d5..fb0392b4d72 100644
--- a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
+Read Gyroscope sensor data
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
index 6f496fc37ad..9cc2bc1f297 100644
--- a/src/translate/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
@@ -1 +1,2 @@
+
 HCE Cordova Wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
index 271a47a93b3..ad82eb6b43a 100644
--- a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
index 466271d3cba..dbd72bc8324 100644
--- a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,2 +1,3 @@
+
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-health.readme.md b/src/translate/native/@awesome-cordova-plugins-health.readme.md
index f49780a8921..349af915eac 100644
--- a/src/translate/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health.readme.md
@@ -1 +1,2 @@
+
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
index 2ba246ebaf0..e49b6cbc6ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-http.readme.md b/src/translate/native/@awesome-cordova-plugins-http.readme.md
index 3fcae7e8052..40ad52f5a5d 100644
--- a/src/translate/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
+
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
-
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
index 14a21342440..4421569a8f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1 +1,2 @@
-Embedded httpd for Cordova apps. Light weight HTTP server.
+
+Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index 8a8ae830783..d223513c705 100644
--- a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
index accd867793f..ee369f17322 100644
--- a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides functions for working with iBeacons.
 
-The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+ The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
index 8f9c76acd94..75f3775bff1 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,3 +1,4 @@
+
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
index 88fa3c7bf5c..40b02d55e6b 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin For Image Resize
diff --git a/src/translate/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
index e6e57be76e7..f699597a628 100644
--- a/src/translate/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,3 +1,4 @@
+
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 0485062862e..87d0037b909 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
+Launches in app Browser
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index b6be39d32c9..5bcd6494c48 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,24 +1,25 @@
+
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|                      | ios | android | win-8 | win-10/uwp | mac |
-| -------------------- | --- | ------- | ----- | ---------- | --- |
-| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
-| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
-| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
-| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
-| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
-| downloadable content | ✅  |         |       |            | ✅  |
-| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
+|  | ios | android | win-8 | win-10/uwp | mac |
+|--|--|--|--|--|--|
+| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
+| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
+| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
+| downloadable content | ✅ |   |   |   | ✅ |
+| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
 
 Supports:
 
-- **iOS** version 7.0 or higher.
-- **Android** version 2.2 (API level 8) or higher
-  - with Google Play client version 3.9.16 or higher
-- **Windows** Store/Phone 8.1 or higher
-- **Windows 10 Mobile**
-- **macOS** version 10
-- **Xbox One**
-  - (and any platform supporting Microsoft's UWP)
+ - **iOS** version 7.0 or higher.
+ - **Android** version 2.2 (API level 8) or higher
+   - with Google Play client version 3.9.16 or higher
+ - **Windows** Store/Phone 8.1 or higher
+ - **Windows 10 Mobile**
+ - **macOS** version 10
+ - **Xbox One**
+   - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 143985e329b..5fbffa5c65b 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1 +1,2 @@
+
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
index 8e174f56973..32b56cbab41 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,3 +1,5 @@
+
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
+
diff --git a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
index c28c9dcb463..365932222f7 100644
--- a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,3 +1,4 @@
+
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
index 680fb4b5caa..77bbacfc378 100644
--- a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1 +1,2 @@
+
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
index 685bec69d99..93b6eee3eb3 100644
--- a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
+
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
-
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
index 6526cd4d4ff..3cecc84de9e 100644
--- a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 1c68245f996..6fe62b6c53a 100644
--- a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,3 +1,4 @@
+
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index 708074a0ab2..b8ea2b47c9e 100644
--- a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1 +1,2 @@
+
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
index 03fc8b67cb1..8a75e4fc94f 100644
--- a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,2 +1,3 @@
+
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
index ed15dd96b1c..2895fffa54c 100644
--- a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1 +1,2 @@
+
 Implementation of the JINS MEME SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
index be8555b753a..9fde9b57805 100644
--- a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
index b86b22652c5..1ccf061fc98 100644
--- a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,3 +1,4 @@
+
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index d2e63dd18d1..cca62d8b43e 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,2 +1,3 @@
+
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
index ae817d52f6d..7764ef64d16 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,3 +1,4 @@
+
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
index 013e0cacbed..c28100fc7ff 100644
--- a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,3 +1,4 @@
+
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
index a272d33f4e3..125e1108746 100644
--- a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,2 +1,3 @@
+
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 105b197495b..0306a39d956 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
index 2f3437ec5c2..942352f7056 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,4 +1,5 @@
-Assists in leaving user reviews/ratings in the App Stores.
 
+
+Assists in leaving user reviews/ratings in the App Stores.
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
index fc39816081a..6cc5413db8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1 +1,2 @@
+
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
index f6123e51703..2085ded77a8 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1 +1,2 @@
+
 This plugin to create local backup
diff --git a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
index 6cfdd379643..82c183d6fee 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
index ed018edb499..99d60417c8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index e67243449ae..539dbf0c5b4 100644
--- a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
index bead6de72c2..55292ec8b1b 100644
--- a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1 +1,2 @@
+
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
index ca5ec6a2525..9e5778eab23 100644
--- a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/native/@awesome-cordova-plugins-market.readme.md b/src/translate/native/@awesome-cordova-plugins-market.readme.md
index 0fa09982e5b..281c8d456ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-market.readme.md
@@ -1 +1,2 @@
+
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
index 69b6b0ebf1b..92cacd40a12 100644
--- a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/native/@awesome-cordova-plugins-media.readme.md b/src/translate/native/@awesome-cordova-plugins-media.readme.md
index f67d2174eea..9d07585f502 100644
--- a/src/translate/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
index 63f05dbf100..13edc56092e 100644
--- a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,3 +1,4 @@
+
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
index f3eb05040cf..75e25a2c230 100644
--- a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1 +1,2 @@
+
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index c159f3801cb..b8584c4e0ae 100644
--- a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1 +1,2 @@
+
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index 0d06c413e79..e9f6b965a20 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,2 +1,3 @@
+
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index d71ef31d811..30c9e83dc6d 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,3 +1,4 @@
+
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
index 0390d514207..72ffec61b13 100644
--- a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,4 +1,5 @@
+
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index 1a4f27e7fd5..ba01c25cf88 100644
--- a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1 +1,2 @@
+
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
index 04fe4a3bf33..e5465ae0a91 100644
--- a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,3 +1,4 @@
+
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
index 7bbca215ca4..b37886b1b59 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
+Native Audio Playback
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 5468f7f9077..3e9b7575290 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
index faea3298df2..cd2d3dab18a 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1 +1,3 @@
+
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
+
diff --git a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index 266ae69275a..edd6e9c39ee 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1 +1,2 @@
+
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 9a2e0d43722..7bcffb8dee4 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,2 +1,3 @@
+
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
index 4e29c4eeb6a..ad0db3ff5c9 100644
--- a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1 +1,2 @@
+
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
index 837c7e475a5..ab6d1bf9d08 100644
--- a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1 +1,2 @@
+
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/native/@awesome-cordova-plugins-network.readme.md b/src/translate/native/@awesome-cordova-plugins-network.readme.md
index 9a5f7a35d4e..5ad7357168c 100644
--- a/src/translate/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network.readme.md
@@ -1 +1,2 @@
+
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
index a81214659db..92837035391 100644
--- a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
+
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
-
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
index 9632b1f0155..4e1c4bcb571 100644
--- a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,4 +1,5 @@
+
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
index dd7010c8876..5ddc2066105 100644
--- a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,3 +1,4 @@
+
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -5,13 +6,11 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
-
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
-
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -66,4 +65,5 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-   `$ chmod +x hooks/copy_android_notification_icons.js`
+`$ chmod +x hooks/copy_android_notification_icons.js`
+
diff --git a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 11e9c0ca52c..0be0100f96d 100644
--- a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1 +1,2 @@
-Plugin to open native screens of iOS/android settings
+
+Plugin to open native screens of iOS/android settings
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
index c59128571c6..077568f6f76 100644
--- a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1 +1,2 @@
+
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
index 4caf38450f4..97823a256c7 100644
--- a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1 +1,2 @@
+
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
index 4f099e14ed4..e45425cee51 100644
--- a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 22692f6e35d..0b14edafe4a 100644
--- a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
index 81ece364e1f..c6fcd66be8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,2 +1,3 @@
+
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index 1510b50b7b6..dd840c8b485 100644
--- a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,2 +1,3 @@
+
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
index 77e517bcbd9..1f20587b9e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,3 +1,4 @@
+
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
index c4ca80fa312..642ad87c3ba 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
index 6596e0e430f..6ea7514c5fa 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,3 +1,4 @@
+
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
index d1bb01fec7e..2c12503cd71 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,3 +1,6 @@
+
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
+
+
diff --git a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
index 9a9cc59bc6c..fa7a099a33f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin for Pinterest
diff --git a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
index b1cab91f830..c42c478d81d 100644
--- a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1 +1,2 @@
+
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
index 4ed7aff21ca..eaca280cad2 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,2 +1,3 @@
+
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
index 1985ca44851..779cd5d6ec2 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,2 +1,3 @@
+
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
index 5aff311b111..312ac4a9125 100644
--- a/src/translate/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
+Prints documents or HTML rendered content
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 909c2ef0dbb..51bb27361c9 100644
--- a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1 +1,2 @@
+
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
index dc1a4fbbb4b..7f42a5bcd96 100644
--- a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
+
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
-
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/native/@awesome-cordova-plugins-push.readme.md b/src/translate/native/@awesome-cordova-plugins-push.readme.md
index a9c3464e985..5ae1db23037 100644
--- a/src/translate/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
index e65c6c7edd7..464bba08731 100644
--- a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,3 +1,4 @@
+
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
index d9b32939ab5..fcc40802c3d 100644
--- a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,3 +1,4 @@
+
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 55b6fc63435..3dcb9304702 100644
--- a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,3 +1,4 @@
+
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index 505b461b09c..a90b29a29b0 100644
--- a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1 +1,2 @@
+
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
index 2d13f688d77..13214fabab4 100644
--- a/src/translate/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
@@ -1 +1,2 @@
+
 This plugin to restart android application
diff --git a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
index 9f1d179bd5c..1b4e50f1b68 100644
--- a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1 +1,2 @@
+
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index 6153b43d685..c635a5fd046 100644
--- a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,3 +1,4 @@
+
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
index a83e7487c9e..416c63df2e9 100644
--- a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
index e9b365c009a..15c0b85bf5f 100644
--- a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
+Captures a screen shot
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
index 5af0e96163c..a4c9c37f0b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1 +1,2 @@
+
 This plugin enables sensors on Android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
index a16c1211a8c..125a3910c49 100644
--- a/src/translate/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
@@ -1 +1,2 @@
+
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
index b13d7210b0e..aca58cc645a 100644
--- a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1 +1,2 @@
+
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
index 917873665cf..5608715c9fa 100644
--- a/src/translate/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
+Handles shake gesture
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 630d79ceeb0..8ab0b4dd94f 100644
--- a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,2 +1,3 @@
+
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index 40b7e9082ef..d7fe4d72b94 100644
--- a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,3 +1,4 @@
+
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index f02092735e3..e8991e9348b 100644
--- a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,6 +1,7 @@
+
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-_Source:_ https://developer.apple.com/sign-in-with-apple/
+*Source:* https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
index 80e74390f46..52c91993c93 100644
--- a/src/translate/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,3 +1,4 @@
+
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index 00c77e7cdfc..e6270053a4a 100644
--- a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,3 +1,4 @@
+
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
index 696999e2340..83f1f737e59 100644
--- a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,2 +1,3 @@
+
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
index 3af874243f1..eb6aaf6b11c 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1 +1,2 @@
+
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
index d64c2f4cab6..b0ba3252b25 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
@@ -1 +1,3 @@
+
+
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
index 3edd7dba0d1..760be2d9030 100644
--- a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,3 +1,4 @@
+
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
index efc07916d88..ccd38016353 100644
--- a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1 +1,2 @@
+
 This plugin does speech recognition using cloud services
diff --git a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
index 5521af0b3b3..8623152c556 100644
--- a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1 +1,2 @@
+
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 97f3a5146a5..66329069921 100644
--- a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,3 +1,4 @@
+
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
index 1a5acf29e82..31117f45f87 100644
--- a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
index cbc01dcad68..bce7a50dba7 100644
--- a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-Cordova plugin for authenticating with Spotify
 
+Cordova plugin for authenticating with Spotify
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 1f34ca227ed..92e4d096de7 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1 +1,2 @@
+
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
index bfb4c960c5d..0d19359e763 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1 +1,2 @@
+
 Access SQLite databases on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 4c8d739d81f..62c602df45a 100644
--- a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
index 167ed6673b8..8866094f12f 100644
--- a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1 +1,2 @@
-- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+
+* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
index 0c999e9b7e3..d2df403f415 100644
--- a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,3 +1,4 @@
+
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
index b6a57d237ac..918f0320b25 100644
--- a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
+
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
-
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
index 5a521be5eb5..b093d14b4af 100644
--- a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
index 2e8f0e8c676..32f49f8fb59 100644
--- a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1 +1,2 @@
+
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
index 22c07237113..373fa2e0f42 100644
--- a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1 +1,2 @@
+
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 4c4cc795164..6a1864ed364 100644
--- a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1 +1,2 @@
+
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 8f1ca44e3ad..577ae87896a 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 2efbb060915..80ce9a5af77 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,2 +1,3 @@
+
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
index b53253d0eef..41e946cfc8e 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,3 +1,4 @@
+
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
index f98c3983123..56e223f24c3 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1 +1,2 @@
+
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
index cd2ff3ab709..032d6ec13cc 100644
--- a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1 +1,2 @@
+
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 40815363667..81e3408cc65 100644
--- a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1 +1,2 @@
+
 In-app browser that allows styling.
diff --git a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index aea7b49108e..a78596064d6 100644
--- a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,3 +1,4 @@
+
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
index 9034d3ab1f0..c7b5d6c7fba 100644
--- a/src/translate/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,3 +1,4 @@
+
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
index 0bb27885878..02615a1ec9f 100644
--- a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,3 +1,4 @@
+
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 0fd10d23d96..16ead04e0ed 100644
--- a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
+
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
-
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
index f1dd7f71fd1..8876a612197 100644
--- a/src/translate/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
@@ -1 +1,2 @@
+
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 032854e3607..1db59244ff9 100644
--- a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1 +1,2 @@
+
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 5ec8996425d..0b49755a0de 100644
--- a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
-## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
-
-## iOS Requirements
 
+This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+-
+iOS Requirements
+-
 Update your Cocoapods repo before you install the plugin.
-
 ```
 $ pod repo update
 ```
-
-- Browser Requirements
-- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
-
+-
+Browser Requirements
+-
+After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
+```
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
index 1bf710ddbcc..504b3c9eb24 100644
--- a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1 +1,2 @@
+
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
index 9870d666496..7066b964568 100644
--- a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1 +1,2 @@
+
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 857e2854746..5cf251b3c8e 100644
--- a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,3 +1,4 @@
+
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
index c5e46b65ea3..9c299395cf9 100644
--- a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,3 +1,4 @@
-The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+
+The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
index f52e258035a..416be944a54 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1 +1,2 @@
+
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
index f82e5deb0ab..dba5defbdd0 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
+Vibrates the device
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index f3e970c9efb..a22e03f3945 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 
+This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
index e7f3e1b8a0b..1ee9f14d4a0 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,3 +1,4 @@
+
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
index e6bce9df776..62d0e5158b6 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1 +1,2 @@
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
+
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
index 74a4213c286..562d250d54f 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 74f478b025e..732d61641b6 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1 +1,2 @@
+
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
index 981c27c1eb3..a2eb7545759 100644
--- a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1 +1,2 @@
+
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
index b2e43d635c3..639229cba09 100644
--- a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1 +1,2 @@
+
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index ca5fcb58975..e519b6b087f 100644
--- a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,3 +1,4 @@
+
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
index 3fef1483ebd..c85ed196728 100644
--- a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,3 +1,5 @@
+
+
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 17fd2049102..65e5f92754a 100644
--- a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1 +1,2 @@
+
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
index e0a91fda385..33a16ff46c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,3 +1,4 @@
+
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
index b6d33465570..48620c015e9 100644
--- a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1 +1,2 @@
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
+
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
diff --git a/src/translate/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
index 6433e0021a7..8550752032e 100644
--- a/src/translate/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
index 94a52e6dc07..e358d13434b 100644
--- a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1 +1,2 @@
+
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.

From 8bbe61dc4ee8f430ffdbe64304d0dad35e7b87c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 24 Aug 2023 09:42:25 +0900
Subject: [PATCH 467/469] fmt

---
 docs/theming/dark-mode.md                     |  4 +--
 src/translate/.detection/cli/build.readme.md  |  2 +-
 .../.detection/cli/capacitor-add.readme.md    |  3 +-
 .../.detection/cli/capacitor-build.readme.md  |  3 +-
 .../.detection/cli/capacitor-copy.readme.md   |  3 +-
 .../.detection/cli/capacitor-open.readme.md   |  3 +-
 .../.detection/cli/capacitor-run.readme.md    |  3 +-
 .../.detection/cli/capacitor-sync.readme.md   |  3 +-
 .../.detection/cli/capacitor-update.readme.md |  3 +-
 .../.detection/cli/completion.readme.md       |  2 +-
 .../.detection/cli/config-get.readme.md       |  2 +-
 .../.detection/cli/config-set.readme.md       |  2 +-
 .../.detection/cli/config-unset.readme.md     |  2 +-
 .../.detection/cli/cordova-build.readme.md    |  2 +-
 .../.detection/cli/cordova-compile.readme.md  |  2 +-
 .../.detection/cli/cordova-emulate.readme.md  |  2 +-
 .../.detection/cli/cordova-platform.readme.md |  2 +-
 .../.detection/cli/cordova-plugin.readme.md   |  2 +-
 .../.detection/cli/cordova-prepare.readme.md  |  2 +-
 .../cli/cordova-requirements.readme.md        |  2 +-
 .../cli/cordova-resources.readme.md           |  3 +-
 .../.detection/cli/cordova-run.readme.md      |  2 +-
 .../.detection/cli/generate.readme.md         |  6 ++--
 .../.detection/cli/git-remote.readme.md       |  2 +-
 src/translate/.detection/cli/info.readme.md   |  2 +-
 src/translate/.detection/cli/init.readme.md   |  2 +-
 .../cli/integrations-disable.readme.md        |  2 +-
 .../cli/integrations-enable.readme.md         |  2 +-
 .../cli/integrations-list.readme.md           |  2 +-
 src/translate/.detection/cli/link.readme.md   |  2 +-
 .../.detection/cli/live-update-add.readme.md  |  2 +-
 .../cli/live-update-configure.readme.md       |  2 +-
 src/translate/.detection/cli/login.readme.md  |  2 +-
 src/translate/.detection/cli/logout.readme.md |  2 +-
 src/translate/.detection/cli/repair.readme.md |  2 +-
 src/translate/.detection/cli/serve.readme.md  |  2 +-
 src/translate/.detection/cli/signup.readme.md |  2 +-
 .../.detection/cli/ssh-setup.readme.md        |  2 +-
 .../.detection/cli/ssh-use.readme.md          |  2 +-
 .../.detection/cli/ssl-generate.readme.md     |  2 +-
 src/translate/.detection/cli/start.readme.md  |  2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |  1 -
 ...awesome-cordova-plugins-actsheet.readme.md |  1 -
 .../@awesome-cordova-plugins-adjust.readme.md |  1 -
 ...esome-cordova-plugins-admob-free.readme.md |  1 -
 ...esome-cordova-plugins-admob-plus.readme.md |  1 -
 .../@awesome-cordova-plugins-admob.readme.md  |  2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |  1 -
 .../@awesome-cordova-plugins-alipay.readme.md |  1 -
 ...e-cordova-plugins-all-in-one-sdk.readme.md |  1 -
 ...rdova-plugins-analytics-firebase.readme.md |  1 -
 ...ordova-plugins-android-exoplayer.readme.md |  1 -
 ...dova-plugins-android-full-screen.readme.md |  3 +-
 ...me-cordova-plugins-android-notch.readme.md |  1 -
 ...dova-plugins-android-permissions.readme.md |  1 -
 ...@awesome-cordova-plugins-anyline.readme.md |  1 -
 ...cordova-plugins-app-availability.readme.md |  1 -
 ...ova-plugins-app-center-analytics.readme.md |  1 -
 ...rdova-plugins-app-center-crashes.readme.md |  1 -
 ...va-plugins-app-center-low-memory.readme.md |  1 -
 ...-cordova-plugins-app-center-push.readme.md |  2 --
 ...ome-cordova-plugins-app-launcher.readme.md |  1 -
 ...ome-cordova-plugins-app-minimize.readme.md |  1 -
 ...-cordova-plugins-app-preferences.readme.md |  1 -
 ...awesome-cordova-plugins-app-rate.readme.md |  1 -
 ...some-cordova-plugins-app-version.readme.md |  1 -
 ...wesome-cordova-plugins-apple-pay.readme.md |  1 -
 ...ome-cordova-plugins-apple-wallet.readme.md |  1 -
 ...awesome-cordova-plugins-appodeal.readme.md |  1 -
 ...wesome-cordova-plugins-appsflyer.readme.md |  1 -
 ...cordova-plugins-audio-management.readme.md |  1 -
 ...wesome-cordova-plugins-autostart.readme.md |  1 -
 ...cordova-plugins-background-fetch.readme.md |  1 -
 ...a-plugins-background-geolocation.readme.md |  1 -
 ...-cordova-plugins-background-mode.readme.md |  3 +-
 ...ordova-plugins-background-upload.readme.md |  1 -
 ...wesome-cordova-plugins-backlight.readme.md |  1 -
 .../@awesome-cordova-plugins-badge.readme.md  |  1 -
 ...esome-cordova-plugins-baidu-push.readme.md |  1 -
 ...-cordova-plugins-barcode-scanner.readme.md |  1 -
 ...ordova-plugins-base64-to-gallery.readme.md |  2 +-
 .../@awesome-cordova-plugins-base64.readme.md |  1 -
 ...e-cordova-plugins-battery-status.readme.md |  1 -
 ...awesome-cordova-plugins-biocatch.readme.md |  1 -
 ...ordova-plugins-biometric-wrapper.readme.md |  1 -
 .../@awesome-cordova-plugins-ble.readme.md    |  1 -
 ...@awesome-cordova-plugins-blinkid.readme.md |  1 -
 ...@awesome-cordova-plugins-blinkup.readme.md |  1 -
 ...ns-bluetooth-classic-serial-port.readme.md |  2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |  1 -
 ...cordova-plugins-bluetooth-serial.readme.md |  2 +-
 ...wesome-cordova-plugins-braintree.readme.md |  5 ++-
 ...wesome-cordova-plugins-branch-io.readme.md |  1 -
 ...esome-cordova-plugins-brightness.readme.md |  1 -
 ...some-cordova-plugins-broadcaster.readme.md |  1 -
 ...some-cordova-plugins-browser-tab.readme.md |  1 -
 ...esome-cordova-plugins-build-info.readme.md |  1 -
 ...awesome-cordova-plugins-calendar.readme.md |  2 --
 ...e-cordova-plugins-call-directory.readme.md |  1 -
 ...awesome-cordova-plugins-call-log.readme.md |  1 -
 ...some-cordova-plugins-call-number.readme.md |  1 -
 ...e-cordova-plugins-camera-preview.readme.md |  1 -
 .../@awesome-cordova-plugins-camera.readme.md |  3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |  2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |  1 -
 ...wesome-cordova-plugins-clevertap.readme.md |  1 -
 ...wesome-cordova-plugins-clipboard.readme.md |  2 --
 ...e-cordova-plugins-cloud-settings.readme.md |  1 -
 ...wesome-cordova-plugins-clover-go.readme.md |  1 -
 ...wesome-cordova-plugins-code-push.readme.md |  1 -
 ...ova-plugins-colored-browser-tabs.readme.md |  1 -
 ...awesome-cordova-plugins-contacts.readme.md |  1 -
 ...e-cordova-plugins-couchbase-lite.readme.md |  1 -
 .../@awesome-cordova-plugins-crop.readme.md   |  2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |  1 -
 ...some-cordova-plugins-date-picker.readme.md |  1 -
 ...awesome-cordova-plugins-db-meter.readme.md |  2 +-
 ...-cordova-plugins-device-accounts.readme.md |  1 -
 ...-cordova-plugins-device-feedback.readme.md |  2 --
 ...me-cordova-plugins-device-motion.readme.md |  1 -
 ...rdova-plugins-device-orientation.readme.md |  1 -
 .../@awesome-cordova-plugins-device.readme.md |  1 -
 ...esome-cordova-plugins-dfu-update.readme.md |  1 -
 ...esome-cordova-plugins-diagnostic.readme.md |  1 -
 ...@awesome-cordova-plugins-dialogs.readme.md |  1 -
 ...-cordova-plugins-document-picker.readme.md |  2 --
 ...cordova-plugins-document-scanner.readme.md |  1 -
 ...-cordova-plugins-document-viewer.readme.md |  3 +-
 ...esome-cordova-plugins-downloader.readme.md |  2 --
 ...e-cordova-plugins-email-composer.readme.md |  3 --
 ...e-cordova-plugins-emm-app-config.readme.md |  2 --
 ...cordova-plugins-estimote-beacons.readme.md |  1 -
 ...gins-extended-device-information.readme.md | 10 +++---
 .../@awesome-cordova-plugins-fabric.readme.md |  1 -
 ...awesome-cordova-plugins-facebook.readme.md |  8 ++---
 .../@awesome-cordova-plugins-fcm.readme.md    |  1 -
 ...ome-cordova-plugins-file-chooser.readme.md |  2 --
 ...-cordova-plugins-file-encryption.readme.md |  1 -
 ...some-cordova-plugins-file-opener.readme.md |  1 -
 ...wesome-cordova-plugins-file-path.readme.md |  2 --
 ...some-cordova-plugins-file-picker.readme.md |  2 --
 ...me-cordova-plugins-file-transfer.readme.md |  1 -
 .../@awesome-cordova-plugins-file.readme.md   | 12 +++----
 ...rdova-plugins-firebase-analytics.readme.md |  5 +--
 ...-plugins-firebase-authentication.readme.md |  1 -
 ...-cordova-plugins-firebase-config.readme.md |  1 -
 ...e-cordova-plugins-firebase-crash.readme.md |  1 -
 ...ova-plugins-firebase-crashlytics.readme.md |  1 -
 ...a-plugins-firebase-dynamic-links.readme.md |  4 +--
 ...rdova-plugins-firebase-messaging.readme.md |  1 -
 ...-cordova-plugins-firebase-vision.readme.md |  1 -
 ...esome-cordova-plugins-firebase-x.readme.md |  1 -
 ...awesome-cordova-plugins-firebase.readme.md |  1 -
 ...cordova-plugins-flurry-analytics.readme.md |  1 -
 ...rdova-plugins-foreground-service.readme.md |  5 ++-
 .../@awesome-cordova-plugins-ftp.readme.md    |  1 -
 ...ordova-plugins-full-screen-image.readme.md |  1 -
 ...-cordova-plugins-gao-de-location.readme.md |  1 -
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |  1 -
 ...awesome-cordova-plugins-geofence.readme.md |  2 +-
 ...some-cordova-plugins-geolocation.readme.md |  5 ++-
 ...me-cordova-plugins-globalization.readme.md |  1 -
 ...cordova-plugins-google-analytics.readme.md |  4 +--
 ...me-cordova-plugins-google-nearby.readme.md |  1 -
 ...ugins-google-play-games-services.readme.md |  1 -
 ...wesome-cordova-plugins-gyroscope.readme.md |  2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |  1 -
 ...ome-cordova-plugins-header-color.readme.md |  1 -
 ...esome-cordova-plugins-health-kit.readme.md |  1 -
 .../@awesome-cordova-plugins-health.readme.md |  1 -
 ...@awesome-cordova-plugins-hotspot.readme.md |  1 -
 .../@awesome-cordova-plugins-http.readme.md   |  2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |  3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |  1 -
 ...@awesome-cordova-plugins-ibeacon.readme.md |  3 +-
 ...ome-cordova-plugins-image-picker.readme.md |  1 -
 ...me-cordova-plugins-image-resizer.readme.md |  1 -
 .../@awesome-cordova-plugins-imap.readme.md   |  1 -
 ...e-cordova-plugins-in-app-browser.readme.md |  2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md | 35 +++++++++----------
 ...-cordova-plugins-in-app-purchase.readme.md |  1 -
 ...me-cordova-plugins-in-app-review.readme.md |  2 --
 ...ordova-plugins-index-app-content.readme.md |  1 -
 ...awesome-cordova-plugins-insomnia.readme.md |  1 -
 ...e-cordova-plugins-intel-security.readme.md |  2 +-
 ...awesome-cordova-plugins-intercom.readme.md |  1 -
 ...me-cordova-plugins-ionic-webview.readme.md |  1 -
 ...s-ios-aswebauthenticationsessapi.readme.md |  1 -
 ...awesome-cordova-plugins-is-debug.readme.md |  1 -
 ...esome-cordova-plugins-janalytics.readme.md |  1 -
 ...wesome-cordova-plugins-jins-meme.readme.md |  1 -
 .../@awesome-cordova-plugins-jumio.readme.md  |  2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |  1 -
 ...ordova-plugins-keychain-touch-id.readme.md |  1 -
 ...awesome-cordova-plugins-keychain.readme.md |  1 -
 ...some-cordova-plugins-kommunicate.readme.md |  1 -
 ...awesome-cordova-plugins-last-cam.readme.md |  1 -
 ...cordova-plugins-launch-navigator.readme.md |  1 -
 ...me-cordova-plugins-launch-review.readme.md |  3 +-
 ...esome-cordova-plugins-line-login.readme.md |  1 -
 ...ome-cordova-plugins-local-backup.readme.md |  1 -
 ...dova-plugins-local-notifications.readme.md |  1 -
 ...me-cordova-plugins-locataccuracy.readme.md |  1 -
 ...ova-plugins-lottie-splash-screen.readme.md |  1 -
 .../@awesome-cordova-plugins-luxand.readme.md |  1 -
 ...ome-cordova-plugins-magnetometer.readme.md |  1 -
 .../@awesome-cordova-plugins-market.readme.md |  1 -
 ...me-cordova-plugins-media-capture.readme.md |  1 -
 .../@awesome-cordova-plugins-media.readme.md  |  1 -
 .../@awesome-cordova-plugins-metrix.readme.md |  1 -
 ...awesome-cordova-plugins-mixpanel.readme.md |  1 -
 ...-cordova-plugins-mlkit-translate.readme.md |  1 -
 ...ova-plugins-mobile-accessibility.readme.md |  1 -
 ...cordova-plugins-mobile-messaging.readme.md |  1 -
 ...@awesome-cordova-plugins-ms-adal.readme.md |  3 +-
 ...plugins-multiple-document-picker.readme.md |  1 -
 ...e-cordova-plugins-music-controls.readme.md |  1 -
 ...ome-cordova-plugins-native-audio.readme.md |  2 +-
 ...-cordova-plugins-native-geocoder.readme.md |  1 -
 ...-cordova-plugins-native-keyboard.readme.md |  2 --
 ...-plugins-native-page-transitions.readme.md |  1 -
 ...cordova-plugins-native-ringtones.readme.md |  1 -
 ...esome-cordova-plugins-navigatbar.readme.md |  1 -
 ...ordova-plugins-network-interface.readme.md |  1 -
 ...@awesome-cordova-plugins-network.readme.md |  1 -
 .../@awesome-cordova-plugins-nfc.readme.md    |  2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |  3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |  6 ++--
 ...ova-plugins-open-native-settings.readme.md |  3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |  1 -
 .../@awesome-cordova-plugins-paypal.readme.md |  1 -
 ...@awesome-cordova-plugins-paytabs.readme.md |  1 -
 ...me-cordova-plugins-pdf-generator.readme.md |  1 -
 ...wesome-cordova-plugins-pedometer.readme.md |  1 -
 ...gins-phonegap-local-notification.readme.md |  1 -
 ...me-cordova-plugins-photo-library.readme.md |  1 -
 ...ome-cordova-plugins-photo-viewer.readme.md |  2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |  1 -
 ...esome-cordova-plugins-pin-dialog.readme.md |  3 --
 ...wesome-cordova-plugins-pinterest.readme.md |  1 -
 ...awesome-cordova-plugins-pollfish.readme.md |  1 -
 ...cordova-plugins-power-management.readme.md |  1 -
 ...rdova-plugins-power-optimization.readme.md |  1 -
 ...@awesome-cordova-plugins-printer.readme.md |  2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |  1 -
 ...wesome-cordova-plugins-purchases.readme.md |  6 ++--
 .../@awesome-cordova-plugins-push.readme.md   |  1 -
 ...ome-cordova-plugins-pushape-push.readme.md |  1 -
 .../@awesome-cordova-plugins-qqsdk.readme.md  |  1 -
 ...esome-cordova-plugins-qr-scanner.readme.md |  1 -
 ...a-plugins-regula-document-reader.readme.md |  1 -
 ...@awesome-cordova-plugins-restart.readme.md |  1 -
 ...@awesome-cordova-plugins-rollbar.readme.md |  1 -
 ...a-plugins-safari-view-controller.readme.md |  1 -
 ...rdova-plugins-screen-orientation.readme.md |  1 -
 ...esome-cordova-plugins-screenshot.readme.md |  2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |  1 -
 .../@awesome-cordova-plugins-serial.readme.md |  1 -
 ...ordova-plugins-service-discovery.readme.md |  1 -
 .../@awesome-cordova-plugins-shake.readme.md  |  2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |  1 -
 ...ordova-plugins-shortcuts-android.readme.md |  1 -
 ...rdova-plugins-sign-in-with-apple.readme.md |  3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |  1 -
 ...e-cordova-plugins-siri-shortcuts.readme.md |  1 -
 ...wesome-cordova-plugins-smartlook.readme.md |  1 -
 ...me-cordova-plugins-sms-retriever.readme.md |  1 -
 .../@awesome-cordova-plugins-sms.readme.md    |  2 --
 ...e-cordova-plugins-social-sharing.readme.md |  1 -
 ...rdova-plugins-speech-recognition.readme.md |  1 -
 ...wesome-cordova-plugins-speechkit.readme.md |  1 -
 ...e-cordova-plugins-spinner-dialog.readme.md |  1 -
 ...me-cordova-plugins-splash-screen.readme.md |  2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |  2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |  1 -
 ...me-cordova-plugins-sqlite-porter.readme.md |  1 -
 .../@awesome-cordova-plugins-sqlite.readme.md |  1 -
 ...some-cordova-plugins-ssh-connect.readme.md |  1 -
 ...wesome-cordova-plugins-star-prnt.readme.md |  3 +-
 ...esome-cordova-plugins-status-bar.readme.md |  1 -
 ...some-cordova-plugins-stepcounter.readme.md |  2 +-
 ...-cordova-plugins-streaming-media.readme.md |  1 -
 .../@awesome-cordova-plugins-stripe.readme.md |  1 -
 .../@awesome-cordova-plugins-sum-up.readme.md |  1 -
 ...s-system-alert-window-permission.readme.md |  1 -
 ...me-cordova-plugins-taptic-engine.readme.md |  1 -
 ...ova-plugins-tealium-adidentifier.readme.md |  1 -
 ...-plugins-tealium-installreferrer.readme.md |  1 -
 ...@awesome-cordova-plugins-tealium.readme.md |  3 +-
 ...-plugins-text-to-speech-advanced.readme.md |  1 -
 ...e-cordova-plugins-text-to-speech.readme.md |  1 -
 ...-cordova-plugins-theme-detection.readme.md |  1 -
 ...ordova-plugins-themeable-browser.readme.md |  1 -
 ...-cordova-plugins-three-dee-touch.readme.md |  1 -
 .../@awesome-cordova-plugins-toast.readme.md  |  1 -
 ...awesome-cordova-plugins-touch-id.readme.md |  1 -
 ...-cordova-plugins-twitter-connect.readme.md |  4 +--
 .../@awesome-cordova-plugins-uid.readme.md    |  1 -
 ...cordova-plugins-unique-device-id.readme.md |  1 -
 ...dova-plugins-unvired-cordova-sdk.readme.md | 18 +++++-----
 .../@awesome-cordova-plugins-uptime.readme.md |  1 -
 ...ome-cordova-plugins-urbanairship.readme.md |  1 -
 ...ova-plugins-usabilla-cordova-sdk.readme.md |  1 -
 ...esome-cordova-plugins-user-agent.readme.md |  3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |  1 -
 ...wesome-cordova-plugins-vibration.readme.md |  2 +-
 ...rdova-plugins-video-capture-plus.readme.md |  2 +-
 ...ome-cordova-plugins-video-player.readme.md |  1 -
 ...esome-cordova-plugins-web-intent.readme.md |  3 +-
 ...esome-cordova-plugins-web-server.readme.md |  1 -
 ...ordova-plugins-web-socket-server.readme.md |  1 -
 ...wesome-cordova-plugins-webengage.readme.md |  1 -
 .../@awesome-cordova-plugins-wechat.readme.md |  1 -
 ...me-cordova-plugins-wifi-wizard-2.readme.md |  1 -
 ...esome-cordova-plugins-wonderpush.readme.md |  2 --
 ...ova-plugins-youtube-video-player.readme.md |  1 -
 .../@awesome-cordova-plugins-zbar.readme.md   |  1 -
 ...awesome-cordova-plugins-zeroconf.readme.md |  3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |  1 -
 .../@awesome-cordova-plugins-zoom.readme.md   |  1 -
 src/translate/cli/build.readme.md             |  2 +-
 src/translate/cli/capacitor-add.readme.md     |  3 +-
 src/translate/cli/capacitor-build.readme.md   |  3 +-
 src/translate/cli/capacitor-copy.readme.md    |  3 +-
 src/translate/cli/capacitor-open.readme.md    |  3 +-
 src/translate/cli/capacitor-run.readme.md     |  3 +-
 src/translate/cli/capacitor-sync.readme.md    |  3 +-
 src/translate/cli/capacitor-update.readme.md  |  3 +-
 src/translate/cli/completion.readme.md        |  2 +-
 src/translate/cli/config-get.readme.md        |  2 +-
 src/translate/cli/config-set.readme.md        |  2 +-
 src/translate/cli/config-unset.readme.md      |  2 +-
 src/translate/cli/cordova-build.readme.md     |  2 +-
 src/translate/cli/cordova-compile.readme.md   |  2 +-
 src/translate/cli/cordova-emulate.readme.md   |  2 +-
 src/translate/cli/cordova-platform.readme.md  |  2 +-
 src/translate/cli/cordova-plugin.readme.md    |  2 +-
 src/translate/cli/cordova-prepare.readme.md   |  2 +-
 .../cli/cordova-requirements.readme.md        |  2 +-
 src/translate/cli/cordova-resources.readme.md |  3 +-
 src/translate/cli/cordova-run.readme.md       |  2 +-
 src/translate/cli/generate.readme.md          |  6 ++--
 src/translate/cli/git-remote.readme.md        |  2 +-
 src/translate/cli/info.readme.md              |  2 +-
 src/translate/cli/init.readme.md              |  2 +-
 .../cli/integrations-disable.readme.md        |  2 +-
 .../cli/integrations-enable.readme.md         |  2 +-
 src/translate/cli/integrations-list.readme.md |  2 +-
 src/translate/cli/link.readme.md              |  2 +-
 src/translate/cli/live-update-add.readme.md   |  2 +-
 .../cli/live-update-configure.readme.md       |  2 +-
 src/translate/cli/login.readme.md             |  2 +-
 src/translate/cli/logout.readme.md            |  2 +-
 src/translate/cli/repair.readme.md            |  2 +-
 src/translate/cli/serve.readme.md             |  2 +-
 src/translate/cli/signup.readme.md            |  2 +-
 src/translate/cli/ssh-setup.readme.md         |  2 +-
 src/translate/cli/ssh-use.readme.md           |  2 +-
 src/translate/cli/ssl-generate.readme.md      |  2 +-
 src/translate/cli/start.readme.md             |  2 +-
 ...wesome-cordova-plugins-abbyy-rtr.readme.md |  1 -
 ...awesome-cordova-plugins-actsheet.readme.md |  1 -
 .../@awesome-cordova-plugins-adjust.readme.md |  1 -
 ...esome-cordova-plugins-admob-free.readme.md |  1 -
 ...esome-cordova-plugins-admob-plus.readme.md |  1 -
 .../@awesome-cordova-plugins-admob.readme.md  |  2 +-
 ...@awesome-cordova-plugins-aes-256.readme.md |  1 -
 .../@awesome-cordova-plugins-alipay.readme.md |  1 -
 ...e-cordova-plugins-all-in-one-sdk.readme.md |  1 -
 ...rdova-plugins-analytics-firebase.readme.md |  1 -
 ...ordova-plugins-android-exoplayer.readme.md |  1 -
 ...dova-plugins-android-full-screen.readme.md |  3 +-
 ...me-cordova-plugins-android-notch.readme.md |  1 -
 ...dova-plugins-android-permissions.readme.md |  1 -
 ...@awesome-cordova-plugins-anyline.readme.md |  1 -
 ...cordova-plugins-app-availability.readme.md |  1 -
 ...ova-plugins-app-center-analytics.readme.md |  1 -
 ...rdova-plugins-app-center-crashes.readme.md |  1 -
 ...va-plugins-app-center-low-memory.readme.md |  1 -
 ...-cordova-plugins-app-center-push.readme.md |  2 --
 ...ome-cordova-plugins-app-launcher.readme.md |  1 -
 ...ome-cordova-plugins-app-minimize.readme.md |  1 -
 ...-cordova-plugins-app-preferences.readme.md |  1 -
 ...awesome-cordova-plugins-app-rate.readme.md |  1 -
 ...some-cordova-plugins-app-version.readme.md |  1 -
 ...wesome-cordova-plugins-apple-pay.readme.md |  1 -
 ...ome-cordova-plugins-apple-wallet.readme.md |  1 -
 ...awesome-cordova-plugins-appodeal.readme.md |  1 -
 ...wesome-cordova-plugins-appsflyer.readme.md |  1 -
 ...cordova-plugins-audio-management.readme.md |  1 -
 ...wesome-cordova-plugins-autostart.readme.md |  1 -
 ...cordova-plugins-background-fetch.readme.md |  1 -
 ...a-plugins-background-geolocation.readme.md |  1 -
 ...-cordova-plugins-background-mode.readme.md |  3 +-
 ...ordova-plugins-background-upload.readme.md |  1 -
 ...wesome-cordova-plugins-backlight.readme.md |  1 -
 .../@awesome-cordova-plugins-badge.readme.md  |  1 -
 ...esome-cordova-plugins-baidu-push.readme.md |  1 -
 ...-cordova-plugins-barcode-scanner.readme.md |  1 -
 ...ordova-plugins-base64-to-gallery.readme.md |  2 +-
 .../@awesome-cordova-plugins-base64.readme.md |  1 -
 ...e-cordova-plugins-battery-status.readme.md |  1 -
 ...awesome-cordova-plugins-biocatch.readme.md |  1 -
 ...ordova-plugins-biometric-wrapper.readme.md |  1 -
 .../@awesome-cordova-plugins-ble.readme.md    |  1 -
 ...@awesome-cordova-plugins-blinkid.readme.md |  1 -
 ...@awesome-cordova-plugins-blinkup.readme.md |  1 -
 ...ns-bluetooth-classic-serial-port.readme.md |  2 +-
 ...ome-cordova-plugins-bluetooth-le.readme.md |  1 -
 ...cordova-plugins-bluetooth-serial.readme.md |  2 +-
 ...wesome-cordova-plugins-braintree.readme.md |  5 ++-
 ...wesome-cordova-plugins-branch-io.readme.md |  1 -
 ...esome-cordova-plugins-brightness.readme.md |  1 -
 ...some-cordova-plugins-broadcaster.readme.md |  1 -
 ...some-cordova-plugins-browser-tab.readme.md |  1 -
 ...esome-cordova-plugins-build-info.readme.md |  1 -
 ...awesome-cordova-plugins-calendar.readme.md |  2 --
 ...e-cordova-plugins-call-directory.readme.md |  1 -
 ...awesome-cordova-plugins-call-log.readme.md |  1 -
 ...some-cordova-plugins-call-number.readme.md |  1 -
 ...e-cordova-plugins-camera-preview.readme.md |  1 -
 .../@awesome-cordova-plugins-camera.readme.md |  3 +-
 ...@awesome-cordova-plugins-chooser.readme.md |  2 +-
 ...wesome-cordova-plugins-class-kit.readme.md |  1 -
 ...wesome-cordova-plugins-clevertap.readme.md |  1 -
 ...wesome-cordova-plugins-clipboard.readme.md |  2 --
 ...e-cordova-plugins-cloud-settings.readme.md |  1 -
 ...wesome-cordova-plugins-clover-go.readme.md |  1 -
 ...wesome-cordova-plugins-code-push.readme.md |  1 -
 ...ova-plugins-colored-browser-tabs.readme.md |  1 -
 ...awesome-cordova-plugins-contacts.readme.md |  1 -
 ...e-cordova-plugins-couchbase-lite.readme.md |  1 -
 .../@awesome-cordova-plugins-crop.readme.md   |  2 +-
 ...ome-cordova-plugins-custom-uisdk.readme.md |  1 -
 ...some-cordova-plugins-date-picker.readme.md |  1 -
 ...awesome-cordova-plugins-db-meter.readme.md |  2 +-
 ...-cordova-plugins-device-accounts.readme.md |  1 -
 ...-cordova-plugins-device-feedback.readme.md |  2 --
 ...me-cordova-plugins-device-motion.readme.md |  1 -
 ...rdova-plugins-device-orientation.readme.md |  1 -
 .../@awesome-cordova-plugins-device.readme.md |  1 -
 ...esome-cordova-plugins-dfu-update.readme.md |  1 -
 ...esome-cordova-plugins-diagnostic.readme.md |  1 -
 ...@awesome-cordova-plugins-dialogs.readme.md |  1 -
 ...-cordova-plugins-document-picker.readme.md |  2 --
 ...cordova-plugins-document-scanner.readme.md |  1 -
 ...-cordova-plugins-document-viewer.readme.md |  3 +-
 ...esome-cordova-plugins-downloader.readme.md |  2 --
 ...e-cordova-plugins-email-composer.readme.md |  3 --
 ...e-cordova-plugins-emm-app-config.readme.md |  2 --
 ...cordova-plugins-estimote-beacons.readme.md |  1 -
 ...gins-extended-device-information.readme.md | 10 +++---
 .../@awesome-cordova-plugins-fabric.readme.md |  1 -
 ...awesome-cordova-plugins-facebook.readme.md |  8 ++---
 .../@awesome-cordova-plugins-fcm.readme.md    |  1 -
 ...ome-cordova-plugins-file-chooser.readme.md |  2 --
 ...-cordova-plugins-file-encryption.readme.md |  1 -
 ...some-cordova-plugins-file-opener.readme.md |  1 -
 ...wesome-cordova-plugins-file-path.readme.md |  2 --
 ...some-cordova-plugins-file-picker.readme.md |  2 --
 ...me-cordova-plugins-file-transfer.readme.md |  1 -
 .../@awesome-cordova-plugins-file.readme.md   | 12 +++----
 ...rdova-plugins-firebase-analytics.readme.md |  5 +--
 ...-plugins-firebase-authentication.readme.md |  1 -
 ...-cordova-plugins-firebase-config.readme.md |  1 -
 ...e-cordova-plugins-firebase-crash.readme.md |  1 -
 ...ova-plugins-firebase-crashlytics.readme.md |  1 -
 ...a-plugins-firebase-dynamic-links.readme.md |  4 +--
 ...rdova-plugins-firebase-messaging.readme.md |  1 -
 ...-cordova-plugins-firebase-vision.readme.md |  1 -
 ...esome-cordova-plugins-firebase-x.readme.md |  1 -
 ...awesome-cordova-plugins-firebase.readme.md |  1 -
 ...cordova-plugins-flurry-analytics.readme.md |  1 -
 ...rdova-plugins-foreground-service.readme.md |  5 ++-
 .../@awesome-cordova-plugins-ftp.readme.md    |  1 -
 ...ordova-plugins-full-screen-image.readme.md |  1 -
 ...-cordova-plugins-gao-de-location.readme.md |  1 -
 ...ordova-plugins-ge-tui-sdk-plugin.readme.md |  1 -
 ...awesome-cordova-plugins-geofence.readme.md |  2 +-
 ...some-cordova-plugins-geolocation.readme.md |  5 ++-
 ...me-cordova-plugins-globalization.readme.md |  1 -
 ...cordova-plugins-google-analytics.readme.md |  4 +--
 ...me-cordova-plugins-google-nearby.readme.md |  1 -
 ...ugins-google-play-games-services.readme.md |  1 -
 ...wesome-cordova-plugins-gyroscope.readme.md |  2 +-
 .../@awesome-cordova-plugins-hce.readme.md    |  1 -
 ...ome-cordova-plugins-header-color.readme.md |  1 -
 ...esome-cordova-plugins-health-kit.readme.md |  1 -
 .../@awesome-cordova-plugins-health.readme.md |  1 -
 ...@awesome-cordova-plugins-hotspot.readme.md |  1 -
 .../@awesome-cordova-plugins-http.readme.md   |  2 +-
 .../@awesome-cordova-plugins-httpd.readme.md  |  3 +-
 ...-cordova-plugins-iamport-cordova.readme.md |  1 -
 ...@awesome-cordova-plugins-ibeacon.readme.md |  3 +-
 ...ome-cordova-plugins-image-picker.readme.md |  1 -
 ...me-cordova-plugins-image-resizer.readme.md |  1 -
 .../@awesome-cordova-plugins-imap.readme.md   |  1 -
 ...e-cordova-plugins-in-app-browser.readme.md |  2 +-
 ...ordova-plugins-in-app-purchase-2.readme.md | 35 +++++++++----------
 ...-cordova-plugins-in-app-purchase.readme.md |  1 -
 ...me-cordova-plugins-in-app-review.readme.md |  2 --
 ...ordova-plugins-index-app-content.readme.md |  1 -
 ...awesome-cordova-plugins-insomnia.readme.md |  1 -
 ...e-cordova-plugins-intel-security.readme.md |  2 +-
 ...awesome-cordova-plugins-intercom.readme.md |  1 -
 ...me-cordova-plugins-ionic-webview.readme.md |  1 -
 ...s-ios-aswebauthenticationsessapi.readme.md |  1 -
 ...awesome-cordova-plugins-is-debug.readme.md |  1 -
 ...esome-cordova-plugins-janalytics.readme.md |  1 -
 ...wesome-cordova-plugins-jins-meme.readme.md |  1 -
 .../@awesome-cordova-plugins-jumio.readme.md  |  2 +-
 ...awesome-cordova-plugins-keyboard.readme.md |  1 -
 ...ordova-plugins-keychain-touch-id.readme.md |  1 -
 ...awesome-cordova-plugins-keychain.readme.md |  1 -
 ...some-cordova-plugins-kommunicate.readme.md |  1 -
 ...awesome-cordova-plugins-last-cam.readme.md |  1 -
 ...cordova-plugins-launch-navigator.readme.md |  1 -
 ...me-cordova-plugins-launch-review.readme.md |  3 +-
 ...esome-cordova-plugins-line-login.readme.md |  1 -
 ...ome-cordova-plugins-local-backup.readme.md |  1 -
 ...dova-plugins-local-notifications.readme.md |  1 -
 ...me-cordova-plugins-locataccuracy.readme.md |  1 -
 ...ova-plugins-lottie-splash-screen.readme.md |  1 -
 .../@awesome-cordova-plugins-luxand.readme.md |  1 -
 ...ome-cordova-plugins-magnetometer.readme.md |  1 -
 .../@awesome-cordova-plugins-market.readme.md |  1 -
 ...me-cordova-plugins-media-capture.readme.md |  1 -
 .../@awesome-cordova-plugins-media.readme.md  |  1 -
 .../@awesome-cordova-plugins-metrix.readme.md |  1 -
 ...awesome-cordova-plugins-mixpanel.readme.md |  1 -
 ...-cordova-plugins-mlkit-translate.readme.md |  1 -
 ...ova-plugins-mobile-accessibility.readme.md |  1 -
 ...cordova-plugins-mobile-messaging.readme.md |  1 -
 ...@awesome-cordova-plugins-ms-adal.readme.md |  3 +-
 ...plugins-multiple-document-picker.readme.md |  1 -
 ...e-cordova-plugins-music-controls.readme.md |  1 -
 ...ome-cordova-plugins-native-audio.readme.md |  2 +-
 ...-cordova-plugins-native-geocoder.readme.md |  1 -
 ...-cordova-plugins-native-keyboard.readme.md |  2 --
 ...-plugins-native-page-transitions.readme.md |  1 -
 ...cordova-plugins-native-ringtones.readme.md |  1 -
 ...esome-cordova-plugins-navigatbar.readme.md |  1 -
 ...ordova-plugins-network-interface.readme.md |  1 -
 ...@awesome-cordova-plugins-network.readme.md |  1 -
 .../@awesome-cordova-plugins-nfc.readme.md    |  2 +-
 .../@awesome-cordova-plugins-ocr.readme.md    |  3 +-
 ...wesome-cordova-plugins-onesignal.readme.md |  6 ++--
 ...ova-plugins-open-native-settings.readme.md |  3 +-
 ...awesome-cordova-plugins-openalpr.readme.md |  1 -
 .../@awesome-cordova-plugins-paypal.readme.md |  1 -
 ...@awesome-cordova-plugins-paytabs.readme.md |  1 -
 ...me-cordova-plugins-pdf-generator.readme.md |  1 -
 ...wesome-cordova-plugins-pedometer.readme.md |  1 -
 ...gins-phonegap-local-notification.readme.md |  1 -
 ...me-cordova-plugins-photo-library.readme.md |  1 -
 ...ome-cordova-plugins-photo-viewer.readme.md |  2 +-
 ...wesome-cordova-plugins-pin-check.readme.md |  1 -
 ...esome-cordova-plugins-pin-dialog.readme.md |  3 --
 ...wesome-cordova-plugins-pinterest.readme.md |  1 -
 ...awesome-cordova-plugins-pollfish.readme.md |  1 -
 ...cordova-plugins-power-management.readme.md |  1 -
 ...rdova-plugins-power-optimization.readme.md |  1 -
 ...@awesome-cordova-plugins-printer.readme.md |  2 +-
 ...cordova-plugins-pspdfkit-cordova.readme.md |  1 -
 ...wesome-cordova-plugins-purchases.readme.md |  6 ++--
 .../@awesome-cordova-plugins-push.readme.md   |  1 -
 ...ome-cordova-plugins-pushape-push.readme.md |  1 -
 .../@awesome-cordova-plugins-qqsdk.readme.md  |  1 -
 ...esome-cordova-plugins-qr-scanner.readme.md |  1 -
 ...a-plugins-regula-document-reader.readme.md |  1 -
 ...@awesome-cordova-plugins-restart.readme.md |  1 -
 ...@awesome-cordova-plugins-rollbar.readme.md |  1 -
 ...a-plugins-safari-view-controller.readme.md |  1 -
 ...rdova-plugins-screen-orientation.readme.md |  1 -
 ...esome-cordova-plugins-screenshot.readme.md |  2 +-
 ...@awesome-cordova-plugins-sensors.readme.md |  1 -
 .../@awesome-cordova-plugins-serial.readme.md |  1 -
 ...ordova-plugins-service-discovery.readme.md |  1 -
 .../@awesome-cordova-plugins-shake.readme.md  |  2 +-
 ...me-cordova-plugins-shop-checkout.readme.md |  1 -
 ...ordova-plugins-shortcuts-android.readme.md |  1 -
 ...rdova-plugins-sign-in-with-apple.readme.md |  3 +-
 .../@awesome-cordova-plugins-sim.readme.md    |  1 -
 ...e-cordova-plugins-siri-shortcuts.readme.md |  1 -
 ...wesome-cordova-plugins-smartlook.readme.md |  1 -
 ...me-cordova-plugins-sms-retriever.readme.md |  1 -
 .../@awesome-cordova-plugins-sms.readme.md    |  2 --
 ...e-cordova-plugins-social-sharing.readme.md |  1 -
 ...rdova-plugins-speech-recognition.readme.md |  1 -
 ...wesome-cordova-plugins-speechkit.readme.md |  1 -
 ...e-cordova-plugins-spinner-dialog.readme.md |  1 -
 ...me-cordova-plugins-splash-screen.readme.md |  2 +-
 ...ome-cordova-plugins-spotify-auth.readme.md |  2 +-
 ...e-cordova-plugins-sqlite-db-copy.readme.md |  1 -
 ...me-cordova-plugins-sqlite-porter.readme.md |  1 -
 .../@awesome-cordova-plugins-sqlite.readme.md |  1 -
 ...some-cordova-plugins-ssh-connect.readme.md |  1 -
 ...wesome-cordova-plugins-star-prnt.readme.md |  3 +-
 ...esome-cordova-plugins-status-bar.readme.md |  1 -
 ...some-cordova-plugins-stepcounter.readme.md |  2 +-
 ...-cordova-plugins-streaming-media.readme.md |  1 -
 .../@awesome-cordova-plugins-stripe.readme.md |  1 -
 .../@awesome-cordova-plugins-sum-up.readme.md |  1 -
 ...s-system-alert-window-permission.readme.md |  1 -
 ...me-cordova-plugins-taptic-engine.readme.md |  1 -
 ...ova-plugins-tealium-adidentifier.readme.md |  1 -
 ...-plugins-tealium-installreferrer.readme.md |  1 -
 ...@awesome-cordova-plugins-tealium.readme.md |  3 +-
 ...-plugins-text-to-speech-advanced.readme.md |  1 -
 ...e-cordova-plugins-text-to-speech.readme.md |  1 -
 ...-cordova-plugins-theme-detection.readme.md |  1 -
 ...ordova-plugins-themeable-browser.readme.md |  1 -
 ...-cordova-plugins-three-dee-touch.readme.md |  1 -
 .../@awesome-cordova-plugins-toast.readme.md  |  1 -
 ...awesome-cordova-plugins-touch-id.readme.md |  1 -
 ...-cordova-plugins-twitter-connect.readme.md |  4 +--
 .../@awesome-cordova-plugins-uid.readme.md    |  1 -
 ...cordova-plugins-unique-device-id.readme.md |  1 -
 ...dova-plugins-unvired-cordova-sdk.readme.md | 18 +++++-----
 .../@awesome-cordova-plugins-uptime.readme.md |  1 -
 ...ome-cordova-plugins-urbanairship.readme.md |  1 -
 ...ova-plugins-usabilla-cordova-sdk.readme.md |  1 -
 ...esome-cordova-plugins-user-agent.readme.md |  3 +-
 .../@awesome-cordova-plugins-vibes.readme.md  |  1 -
 ...wesome-cordova-plugins-vibration.readme.md |  2 +-
 ...rdova-plugins-video-capture-plus.readme.md |  2 +-
 ...ome-cordova-plugins-video-player.readme.md |  1 -
 ...esome-cordova-plugins-web-intent.readme.md |  3 +-
 ...esome-cordova-plugins-web-server.readme.md |  1 -
 ...ordova-plugins-web-socket-server.readme.md |  1 -
 ...wesome-cordova-plugins-webengage.readme.md |  1 -
 .../@awesome-cordova-plugins-wechat.readme.md |  1 -
 ...me-cordova-plugins-wifi-wizard-2.readme.md |  1 -
 ...esome-cordova-plugins-wonderpush.readme.md |  2 --
 ...ova-plugins-youtube-video-player.readme.md |  1 -
 .../@awesome-cordova-plugins-zbar.readme.md   |  1 -
 ...awesome-cordova-plugins-zeroconf.readme.md |  3 +-
 .../@awesome-cordova-plugins-zip.readme.md    |  1 -
 .../@awesome-cordova-plugins-zoom.readme.md   |  1 -
 639 files changed, 308 insertions(+), 812 deletions(-)

diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
index ca08de8c59f..18d1df57625 100644
--- a/docs/theming/dark-mode.md
+++ b/docs/theming/dark-mode.md
@@ -12,11 +12,11 @@ inlineHtmlPreviews: true
   />
 </head>
 
-Ionicでは、ダークな配色をサポートするなど、アプリのテーマを簡単に変更できます。ダークモードは、アプリのすべてのビューをダークテーマに変更する表示設定です。iOSとAndroidではシステム全体でサポートされているため、開発者にとってアプリに追加することが非常に望ましいです。
+Ionic では、ダークな配色をサポートするなど、アプリのテーマを簡単に変更できます。ダークモードは、アプリのすべてのビューをダークテーマに変更する表示設定です。iOS と Android ではシステム全体でサポートされているため、開発者にとってアプリに追加することが非常に望ましいです。
 
 ## Media Query の利用
 
-ダークモードを有効にする現代的な方法は、[ユーザーの好みの配色を指定するCSSメディアクエリー](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)を使うことです。このメディアクエリは、ユーザーのデバイスのシステム設定にフックし、ダークモードが有効な場合にテーマを適用します。Ionic Frameworkのスターターは、ダークテーマを含めるためにこのメソッドを使用します。
+ダークモードを有効にする現代的な方法は、[ユーザーの好みの配色を指定する CSS メディアクエリー](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)を使うことです。このメディアクエリは、ユーザーのデバイスのシステム設定にフックし、ダークモードが有効な場合にテーマを適用します。Ionic Framework のスターターは、ダークテーマを含めるためにこのメソッドを使用します。
 
 ```css
 @media (prefers-color-scheme: dark) {
diff --git a/src/translate/.detection/cli/build.readme.md b/src/translate/.detection/cli/build.readme.md
index 7de5f855455..5f6c540c109 100644
--- a/src/translate/.detection/cli/build.readme.md
+++ b/src/translate/.detection/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
diff --git a/src/translate/.detection/cli/capacitor-add.readme.md b/src/translate/.detection/cli/capacitor-add.readme.md
index 6a1ecf8bc10..464a4fb5a49 100644
--- a/src/translate/.detection/cli/capacitor-add.readme.md
+++ b/src/translate/.detection/cli/capacitor-add.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor add` will do the following:
+
 - Install the Capacitor platform package
-- Copy the native platform template into your project
\ No newline at end of file
+- Copy the native platform template into your project
diff --git a/src/translate/.detection/cli/capacitor-build.readme.md b/src/translate/.detection/cli/capacitor-build.readme.md
index 0ccb955a383..ecbb4a9e00a 100644
--- a/src/translate/.detection/cli/capacitor-build.readme.md
+++ b/src/translate/.detection/cli/capacitor-build.readme.md
@@ -1,8 +1,9 @@
 `ionic capacitor build` will do the following:
+
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
diff --git a/src/translate/.detection/cli/capacitor-copy.readme.md b/src/translate/.detection/cli/capacitor-copy.readme.md
index 2e5ddd1f0e7..ad813a2f858 100644
--- a/src/translate/.detection/cli/capacitor-copy.readme.md
+++ b/src/translate/.detection/cli/capacitor-copy.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor copy` will do the following:
+
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
+- Copy web assets to Capacitor native platform(s)
diff --git a/src/translate/.detection/cli/capacitor-open.readme.md b/src/translate/.detection/cli/capacitor-open.readme.md
index 6a4f8a5eeba..c52c1f44711 100644
--- a/src/translate/.detection/cli/capacitor-open.readme.md
+++ b/src/translate/.detection/cli/capacitor-open.readme.md
@@ -1,2 +1,3 @@
 `ionic capacitor open` will do the following:
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
+
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
diff --git a/src/translate/.detection/cli/capacitor-run.readme.md b/src/translate/.detection/cli/capacitor-run.readme.md
index a17e32b9a99..56a76e0d464 100644
--- a/src/translate/.detection/cli/capacitor-run.readme.md
+++ b/src/translate/.detection/cli/capacitor-run.readme.md
@@ -1,4 +1,5 @@
 `ionic capacitor run` will do the following:
+
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -6,4 +7,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
diff --git a/src/translate/.detection/cli/capacitor-sync.readme.md b/src/translate/.detection/cli/capacitor-sync.readme.md
index 4ab54b5269d..403ecdf9af3 100644
--- a/src/translate/.detection/cli/capacitor-sync.readme.md
+++ b/src/translate/.detection/cli/capacitor-sync.readme.md
@@ -1,5 +1,6 @@
 `ionic capacitor sync` will do the following:
+
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/.detection/cli/capacitor-update.readme.md b/src/translate/.detection/cli/capacitor-update.readme.md
index 6941a9bbe77..6691448d373 100644
--- a/src/translate/.detection/cli/capacitor-update.readme.md
+++ b/src/translate/.detection/cli/capacitor-update.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor update` will do the following:
+
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/.detection/cli/completion.readme.md b/src/translate/.detection/cli/completion.readme.md
index c614f27c143..98969ac91c0 100644
--- a/src/translate/.detection/cli/completion.readme.md
+++ b/src/translate/.detection/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
diff --git a/src/translate/.detection/cli/config-get.readme.md b/src/translate/.detection/cli/config-get.readme.md
index ecfdc6708ac..b993225035b 100644
--- a/src/translate/.detection/cli/config-get.readme.md
+++ b/src/translate/.detection/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
diff --git a/src/translate/.detection/cli/config-set.readme.md b/src/translate/.detection/cli/config-set.readme.md
index fd2916c6e27..4cfe7872088 100644
--- a/src/translate/.detection/cli/config-set.readme.md
+++ b/src/translate/.detection/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
diff --git a/src/translate/.detection/cli/config-unset.readme.md b/src/translate/.detection/cli/config-unset.readme.md
index 9b7c09a8699..7dca73c33a4 100644
--- a/src/translate/.detection/cli/config-unset.readme.md
+++ b/src/translate/.detection/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
diff --git a/src/translate/.detection/cli/cordova-build.readme.md b/src/translate/.detection/cli/cordova-build.readme.md
index 774bb3c3bab..5859a7e2658 100644
--- a/src/translate/.detection/cli/cordova-build.readme.md
+++ b/src/translate/.detection/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
diff --git a/src/translate/.detection/cli/cordova-compile.readme.md b/src/translate/.detection/cli/cordova-compile.readme.md
index 947b914334f..f234fefe548 100644
--- a/src/translate/.detection/cli/cordova-compile.readme.md
+++ b/src/translate/.detection/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova compile` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-emulate.readme.md b/src/translate/.detection/cli/cordova-emulate.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/.detection/cli/cordova-emulate.readme.md
+++ b/src/translate/.detection/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/.detection/cli/cordova-platform.readme.md b/src/translate/.detection/cli/cordova-platform.readme.md
index f65aea27395..1b289c0ac8f 100644
--- a/src/translate/.detection/cli/cordova-platform.readme.md
+++ b/src/translate/.detection/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-plugin.readme.md b/src/translate/.detection/cli/cordova-plugin.readme.md
index b3ea63900d4..162ba073340 100644
--- a/src/translate/.detection/cli/cordova-plugin.readme.md
+++ b/src/translate/.detection/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova plugin` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-prepare.readme.md b/src/translate/.detection/cli/cordova-prepare.readme.md
index 90b7d18e711..6ae022dcaa0 100644
--- a/src/translate/.detection/cli/cordova-prepare.readme.md
+++ b/src/translate/.detection/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
diff --git a/src/translate/.detection/cli/cordova-requirements.readme.md b/src/translate/.detection/cli/cordova-requirements.readme.md
index 04bdf9cef01..edf47772b1f 100644
--- a/src/translate/.detection/cli/cordova-requirements.readme.md
+++ b/src/translate/.detection/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova requirements` directly, but provides friendly checks.
diff --git a/src/translate/.detection/cli/cordova-resources.readme.md b/src/translate/.detection/cli/cordova-resources.readme.md
index 730573a47c3..e93fdd8a890 100644
--- a/src/translate/.detection/cli/cordova-resources.readme.md
+++ b/src/translate/.detection/cli/cordova-resources.readme.md
@@ -11,5 +11,6 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
+
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
diff --git a/src/translate/.detection/cli/cordova-run.readme.md b/src/translate/.detection/cli/cordova-run.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/.detection/cli/cordova-run.readme.md
+++ b/src/translate/.detection/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/.detection/cli/generate.readme.md b/src/translate/.detection/cli/generate.readme.md
index 30de99a2484..042f64a7a4c 100644
--- a/src/translate/.detection/cli/generate.readme.md
+++ b/src/translate/.detection/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
- - For a full list of available types, use `npx ng g --help`
- - For a list of options for a types, use `npx ng g <type> --help`
+- For a full list of available types, use `npx ng g --help`
+- For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
+To test a generator before file modifications are made, use the `--dry-run` option.
diff --git a/src/translate/.detection/cli/git-remote.readme.md b/src/translate/.detection/cli/git-remote.readme.md
index b4caf425642..58347c24535 100644
--- a/src/translate/.detection/cli/git-remote.readme.md
+++ b/src/translate/.detection/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/.detection/cli/info.readme.md b/src/translate/.detection/cli/info.readme.md
index 03f86bc2907..d633e373984 100644
--- a/src/translate/.detection/cli/info.readme.md
+++ b/src/translate/.detection/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
diff --git a/src/translate/.detection/cli/init.readme.md b/src/translate/.detection/cli/init.readme.md
index 98b3118bed5..918620be789 100644
--- a/src/translate/.detection/cli/init.readme.md
+++ b/src/translate/.detection/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
diff --git a/src/translate/.detection/cli/integrations-disable.readme.md b/src/translate/.detection/cli/integrations-disable.readme.md
index 5418badf555..b4f4a38bdd0 100644
--- a/src/translate/.detection/cli/integrations-disable.readme.md
+++ b/src/translate/.detection/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
+Integrations, such as Cordova, can be disabled with this command.
diff --git a/src/translate/.detection/cli/integrations-enable.readme.md b/src/translate/.detection/cli/integrations-enable.readme.md
index 945fcbbb226..76526785eaa 100644
--- a/src/translate/.detection/cli/integrations-enable.readme.md
+++ b/src/translate/.detection/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
\ No newline at end of file
+Integrations can be re-added with the `--add` option.
diff --git a/src/translate/.detection/cli/integrations-list.readme.md b/src/translate/.detection/cli/integrations-list.readme.md
index 044dd455e0e..d075d211e95 100644
--- a/src/translate/.detection/cli/integrations-list.readme.md
+++ b/src/translate/.detection/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
+- To disable integrations, see `ionic integrations disable --help`
diff --git a/src/translate/.detection/cli/link.readme.md b/src/translate/.detection/cli/link.readme.md
index e621a2e948a..f5a96a51946 100644
--- a/src/translate/.detection/cli/link.readme.md
+++ b/src/translate/.detection/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/live-update-add.readme.md b/src/translate/.detection/cli/live-update-add.readme.md
index bc0316117d7..d2aebb869cd 100644
--- a/src/translate/.detection/cli/live-update-add.readme.md
+++ b/src/translate/.detection/cli/live-update-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for bo
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
diff --git a/src/translate/.detection/cli/live-update-configure.readme.md b/src/translate/.detection/cli/live-update-configure.readme.md
index 1d8c7504c8f..d4bc34cffba 100644
--- a/src/translate/.detection/cli/live-update-configure.readme.md
+++ b/src/translate/.detection/cli/live-update-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Live Update plugin (`cordov
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
diff --git a/src/translate/.detection/cli/login.readme.md b/src/translate/.detection/cli/login.readme.md
index 0fbe95d2ae8..ce63bb58ac0 100644
--- a/src/translate/.detection/cli/login.readme.md
+++ b/src/translate/.detection/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/logout.readme.md b/src/translate/.detection/cli/logout.readme.md
index 4122a7422e5..540a69a156c 100644
--- a/src/translate/.detection/cli/logout.readme.md
+++ b/src/translate/.detection/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
+If you need to create an Ionic account, use `ionic signup`.
diff --git a/src/translate/.detection/cli/repair.readme.md b/src/translate/.detection/cli/repair.readme.md
index dbb18055c3a..9b01e9d40d8 100644
--- a/src/translate/.detection/cli/repair.readme.md
+++ b/src/translate/.detection/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
diff --git a/src/translate/.detection/cli/serve.readme.md b/src/translate/.detection/cli/serve.readme.md
index b08bf89fccf..a9b7bd7d2af 100644
--- a/src/translate/.detection/cli/serve.readme.md
+++ b/src/translate/.detection/cli/serve.readme.md
@@ -4,4 +4,4 @@ By default, `ionic serve` boots up a development server on `localhost`. To serve
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
diff --git a/src/translate/.detection/cli/signup.readme.md b/src/translate/.detection/cli/signup.readme.md
index 4761dfdf982..82d215181a5 100644
--- a/src/translate/.detection/cli/signup.readme.md
+++ b/src/translate/.detection/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/ssh-setup.readme.md b/src/translate/.detection/cli/ssh-setup.readme.md
index f6ed6f93cb8..b95050beae9 100644
--- a/src/translate/.detection/cli/ssh-setup.readme.md
+++ b/src/translate/.detection/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/.detection/cli/ssh-use.readme.md b/src/translate/.detection/cli/ssh-use.readme.md
index b9a78d4db3e..4714fa29928 100644
--- a/src/translate/.detection/cli/ssh-use.readme.md
+++ b/src/translate/.detection/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
diff --git a/src/translate/.detection/cli/ssl-generate.readme.md b/src/translate/.detection/cli/ssl-generate.readme.md
index c49644b96ef..aea3ec98cc5 100644
--- a/src/translate/.detection/cli/ssl-generate.readme.md
+++ b/src/translate/.detection/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
diff --git a/src/translate/.detection/cli/start.readme.md b/src/translate/.detection/cli/start.readme.md
index 45b725f705d..9b3d3b471e4 100644
--- a/src/translate/.detection/cli/start.readme.md
+++ b/src/translate/.detection/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 1fbd6aab841..986eeabbc94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,3 +1,2 @@
-
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
index deb9dde4602..90e1ee9b77e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,4 +1,3 @@
-
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
index 420a0d400d4..11db0748e34 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
index fb2004ca29c..a21a70fb083 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,4 +1,3 @@
-
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
index 56e36fe9053..41472b2e411 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1,2 +1 @@
-
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
index b18059b0829..8f50b6279c0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
-
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
+
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
index 8bc209c7e54..e11ad80b4a3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,4 +1,3 @@
-
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
index 18f742e5108..0303990f06b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,4 +1,3 @@
-
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 76387367a61..23e8c973bf2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index 822209a4a72..e27b0ba6540 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1,2 +1 @@
-
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index 93a3f290203..c31c989a3d3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,4 +1,3 @@
-
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 3592aee1757..64f0fad3191 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
index 2eb94af7221..a82b309d78c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
index 0c671a0c2d0..8e414578f93 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
index 48c289cc3fb..5f6722050b0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1,2 +1 @@
-
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
index 5672e0b2213..2813a5d498b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index d7ef092bae5..95a88837497 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index c331a7d05f5..ef9f2968a8f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index 6d2e7862965..e84626aea1d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,3 +1,2 @@
-
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
index c1b58f99edf..e89f74940ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1,3 +1 @@
-
-
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
index 0db391fddba..aff2e2cb4d6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1,2 +1 @@
-
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
index 12d31c41dd7..bb919529254 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1,2 +1 @@
-
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
index 87dd87d5765..fbde6778edf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to read and write app preferences
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
index c0210b3f9e5..c2d7f1730a0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,4 +1,3 @@
-
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
index 08cfe48a452..6b4fa2e5c61 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,4 +1,3 @@
-
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
index 1e612327b09..6213470725d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1,2 +1 @@
-
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
index 79bd464667d..b3fd1055a9a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
index af28dc677bd..41c425d19c7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1,2 +1 @@
-
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
index f0017f9025d..4197b26f800 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1,2 +1 @@
-
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
index d1ce36553bc..4c69face47f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,3 +1,2 @@
-
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
index 48d67747675..b066c65401a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,3 +1,2 @@
-
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
index 62278126195..3a4a3e352cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,4 +1,3 @@
-
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
index a43e7c719b2..b1cfb8cd04b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,3 +1,2 @@
-
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
index 90ce8edd2ad..ee73844b3c8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,3 +1,2 @@
-
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
index bc94608b2c6..9ab2fed769b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1,2 +1 @@
-
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
index 11775820229..52465e564f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,4 +1,3 @@
-
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
index ebe978c896a..33af83938f9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1,2 +1 @@
-
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index d40a29ab2a1..747418e7857 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,4 +1,3 @@
-
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index 9f16d6d8f42..b84c09c835f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
+This plugin allows you to save base64 data as a png image into the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
index 06a0311c510..340db120adf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-base64.readme.md
@@ -1,2 +1 @@
-
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
index da71524f3d1..2c657416aef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
index 0725aba40ce..bd325268e71 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1,2 +1 @@
-
 BioCatch SDK Cordova support
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index 6be6e7318ae..b1b5ec0f81c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,3 +1,2 @@
-
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
index 4818853ac89..8d23815cab0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
index 52d671c0034..f0f05bc6a1f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,3 +1,2 @@
-
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
index b6cae0f21fd..6f149bce706 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1,2 +1 @@
-
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index 639b85fee5c..c0281f22a59 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3ae195d12de..3b80e3d0ecd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,4 +1,3 @@
-
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index f3579d8e616..d0939b5fde7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
index 29af8d97385..9921b18062b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,9 +1,8 @@
-
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
- Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
- For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
index b9836ebd4c6..a222a2efbe7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1,2 +1 @@
-
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
index 51b06d0cc15..d97dd2af981 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,4 +1,3 @@
-
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
index 71995e79760..b925da2342c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1,2 +1 @@
-
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
index bf83901883b..f03b8b179a9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1,2 +1 @@
-
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
index 7e5a437d1d3..7b8674b3871 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1,2 +1 @@
-
 This plugin provides build information.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
index 5a83eede868..515f629e662 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,5 +1,3 @@
-
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
index 16d031664c6..b0ecb7bb40b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,3 +1,2 @@
-
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
index a2b5e1bab30..76f6447e69b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1,2 +1 @@
-
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
index d68a0a44b0e..2914b087a64 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,3 +1,2 @@
-
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
index 31cf59dc30b..9b06352e407 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,4 +1,3 @@
-
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
index a354d9c7925..aa5cc82125d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,12 +1,13 @@
-
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
+
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
+
 inside of the <platform name='ios> section
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
index 76c58120b44..752a6da1f4f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
-
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
+
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
index 8518bffadeb..953ca23cf89 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,6 +1,5 @@
 Plugin for using Apple's ClassKit framework.
 
-
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
index f6b4973e48e..5b82513228d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
index 3176d5f4017..603b2b8f6b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1,3 +1 @@
-
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 939c06b2441..7e3928e3cd5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1,2 +1 @@
-
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
index 3688eedbcac..9d0f8be2ea1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1,2 +1 @@
-
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
index 9cf894081e8..b03bd091c4c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,4 +1,3 @@
-
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index 4bb2367cd5c..b32e2c7cacd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1,2 +1 @@
-
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
index 0243a89bfa0..b7061033770 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1,2 +1 @@
-
 Access and manage Contacts on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index 4a13e8229fa..ee32121391a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1,2 +1 @@
-
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
index 6c659180b50..9faa50aaed7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
\ No newline at end of file
+Crops images
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 5c24399bc42..9116ddca6eb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1,2 +1 @@
-
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
index 5eed8b85866..d2632a61abf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1,2 +1 @@
-
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
index 08fbb92c20c..cabc3d4ff44 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
index bffae754b58..8943e5b9ca4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1,2 +1 @@
-
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
index ad508847c3e..f11c48fa910 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1,3 +1 @@
-
-
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
index abe72e3b6c0..4dbbb06d71c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
index 02c713e2138..e96364431a7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
index c6ef6980695..3dbd2dec8e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-device.readme.md
@@ -1,2 +1 @@
-
 Access information about the underlying device and platform.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
index 893058bc4eb..ac9d8279b92 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1,2 +1 @@
-
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
index a90f9cfbe85..64c6b6393fe 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1,2 +1 @@
-
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
index 11ac16aafc6..f988d884a0c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
index 7eac80f6cff..3a08f9c811c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,4 +1,2 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
index 29d32018802..03cd028ccfd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1,2 +1 @@
-
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
index 7e39f62d9b0..605e7b14d41 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1,2 +1 @@
-
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
index f15e01b1143..dad89444163 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1,3 +1 @@
-
 This plugin is designed to support downloading files using Android DownloadManager.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
index 4176ac2a7b9..a305d027409 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1,4 +1 @@
-
-
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
index 81259d50cc1..d0554945c4c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,5 +1,3 @@
-
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index 40349a8306b..b76b54f6046 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1,2 +1 @@
-
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 16c3ea63d2a..043375415ac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-
 Retrieves additional device information from the Device Hardware
- - memory
- - cpumhz
- - totalstorage
- - freestorage
+
+- memory
+- cpumhz
+- totalstorage
+- freestorage
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
index 12d214e6d38..b140e97cb32 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,4 +1,3 @@
-
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
index df9af63f74b..93e5e887491 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,11 +1,10 @@
-
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
- To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -30,6 +29,7 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
+
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
+
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-
 #### Android Install
+
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
-
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
index f3790772c17..dbbb3b72132 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1,2 +1 @@
-
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
index b4553ad9baf..4bf1bdf418f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
index 4fdfccbf60d..f1b5408277a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1,2 +1 @@
-
 Simple file encryption for Cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
index ba26e51b8cd..a719c048fe4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1,2 +1 @@
-
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
index c9445ac1ce7..1f3eeb42d5a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1,3 +1 @@
-
-
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
index b33dc3c0f97..3616dbd3573 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
index c8ba532eae9..4770407e60d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to upload and download files.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
index 1e61b343d6b..28bc40d6e90 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
-
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
+
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
- This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
- The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
- Although most of the plugin code was written when an earlier spec was current: http:
-  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
+This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+Although most of the plugin code was written when an earlier spec was current: http:
+//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+//dev.w3.org/2009/dap/file-system/file-writer.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index f87a05030d7..ce125266039 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -6,7 +5,9 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
+
+For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
+
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 4da15cc2ef6..410431f731b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
index 45a214eee3a..38a8b24123d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Config
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
index 2d8b3effb06..a1c32524c76 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1,2 +1 @@
-
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index 2ad1e2109bd..b88fed62436 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1,2 +1 @@
-
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 6efc1b8ae10..2cfe3a22194 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -10,6 +9,7 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
+
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 5bdcf74de11..6a18f9fcf39 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
index 433e365a6a5..d1f83c84392 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
index e044eb6dc66..aa17963327a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,3 +1,2 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
index 25001f76e05..6c21f982616 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1,2 +1 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index 80ef2d51635..e57049202bf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1,2 +1 @@
-
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
index 6d68d07b0fe..563b7c87954 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,9 +1,8 @@
-
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into ```config.xml```:
+For android API 28+, the following xml snippet should be inserted into `config.xml`:
 
 ```
 ...
@@ -12,4 +11,4 @@ For android API 28+, the following xml snippet should be inserted into ```config
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
index 0cd5a4278d8..5987065177c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1,2 +1 @@
-
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
index a56ed3a0093..5dda6c71ade 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,3 +1,2 @@
-
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
index 6e993e8f8a8..2f83489f5fb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
index 8d55357a600..0391a010ff3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,12 +1,11 @@
-
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
- This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
+
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
index d1a3161e0b4..840cf8d4fb5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1,2 +1 @@
-
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
index 1c759160579..8ebef774b81 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
-
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
+
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
index 42ea1211a02..0e715c64736 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1,2 +1 @@
-
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index e40dfc4db5e..a10f89326aa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
index fb0392b4d72..676268db9d5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
\ No newline at end of file
+Read Gyroscope sensor data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
index 9cc2bc1f297..6f496fc37ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hce.readme.md
@@ -1,2 +1 @@
-
 HCE Cordova Wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
index ad82eb6b43a..271a47a93b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
index dbd72bc8324..466271d3cba 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,3 +1,2 @@
-
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
index 349af915eac..f49780a8921 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-health.readme.md
@@ -1,2 +1 @@
-
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
index e49b6cbc6ca..2ba246ebaf0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
index 40ad52f5a5d..3fcae7e8052 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
index 4421569a8f0..14a21342440 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1,2 +1 @@
-
-Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
+Embedded httpd for Cordova apps. Light weight HTTP server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index d223513c705..8a8ae830783 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
index ee369f17322..accd867793f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides functions for working with iBeacons.
 
- The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
index 75f3775bff1..8f9c76acd94 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,4 +1,3 @@
-
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
index 40b02d55e6b..88fa3c7bf5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin For Image Resize
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
index f699597a628..e6e57be76e7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,4 +1,3 @@
-
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 87d0037b909..0485062862e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
\ No newline at end of file
+Launches in app Browser
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index 5bcd6494c48..b6be39d32c9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,25 +1,24 @@
-
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|  | ios | android | win-8 | win-10/uwp | mac |
-|--|--|--|--|--|--|
-| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
-| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
-| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
-| downloadable content | ✅ |   |   |   | ✅ |
-| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
+|                      | ios | android | win-8 | win-10/uwp | mac |
+| -------------------- | --- | ------- | ----- | ---------- | --- |
+| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
+| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
+| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
+| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
+| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
+| downloadable content | ✅  |         |       |            | ✅  |
+| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
 
 Supports:
 
- - **iOS** version 7.0 or higher.
- - **Android** version 2.2 (API level 8) or higher
-   - with Google Play client version 3.9.16 or higher
- - **Windows** Store/Phone 8.1 or higher
- - **Windows 10 Mobile**
- - **macOS** version 10
- - **Xbox One**
-   - (and any platform supporting Microsoft's UWP)
+- **iOS** version 7.0 or higher.
+- **Android** version 2.2 (API level 8) or higher
+  - with Google Play client version 3.9.16 or higher
+- **Windows** Store/Phone 8.1 or higher
+- **Windows 10 Mobile**
+- **macOS** version 10
+- **Xbox One**
+  - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 5fbffa5c65b..143985e329b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1,2 +1 @@
-
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
index 32b56cbab41..8e174f56973 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,5 +1,3 @@
-
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
index 365932222f7..c28c9dcb463 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
index 77bbacfc378..680fb4b5caa 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1,2 +1 @@
-
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
index 93b6eee3eb3..685bec69d99 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
-
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
+
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
index 3cecc84de9e..6526cd4d4ff 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 6fe62b6c53a..1c68245f996 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,4 +1,3 @@
-
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index b8ea2b47c9e..708074a0ab2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1,2 +1 @@
-
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
index 8a75e4fc94f..03fc8b67cb1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,3 +1,2 @@
-
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
index 2895fffa54c..ed15dd96b1c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1,2 +1 @@
-
 Implementation of the JINS MEME SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
index 9fde9b57805..be8555b753a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
index 1ccf061fc98..b86b22652c5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,4 +1,3 @@
-
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index cca62d8b43e..d2e63dd18d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,3 +1,2 @@
-
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
index 7764ef64d16..ae817d52f6d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,4 +1,3 @@
-
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
index c28100fc7ff..013e0cacbed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,4 +1,3 @@
-
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
index 125e1108746..a272d33f4e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,3 +1,2 @@
-
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 0306a39d956..105b197495b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
index 942352f7056..2f3437ec5c2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,5 +1,4 @@
-
-
 Assists in leaving user reviews/ratings in the App Stores.
+
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
index 6cc5413db8f..fc39816081a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1,2 +1 @@
-
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
index 2085ded77a8..f6123e51703 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1,2 +1 @@
-
 This plugin to create local backup
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
index 82c183d6fee..6cfdd379643 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
index 99d60417c8f..ed018edb499 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index 539dbf0c5b4..e67243449ae 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
index 55292ec8b1b..bead6de72c2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1,2 +1 @@
-
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
index 9e5778eab23..ca5ec6a2525 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
index 281c8d456ad..0fa09982e5b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-market.readme.md
@@ -1,2 +1 @@
-
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
index 92cacd40a12..69b6b0ebf1b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
index 9d07585f502..f67d2174eea 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-media.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
index 13edc56092e..63f05dbf100 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
index 75e25a2c230..f3eb05040cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index b8584c4e0ae..c159f3801cb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1,2 +1 @@
-
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index e9f6b965a20..0d06c413e79 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,3 +1,2 @@
-
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index 30c9e83dc6d..d71ef31d811 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,4 +1,3 @@
-
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
index 72ffec61b13..0390d514207 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,5 +1,4 @@
-
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index ba01c25cf88..1a4f27e7fd5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1,2 +1 @@
-
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
index e5465ae0a91..04fe4a3bf33 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,4 +1,3 @@
-
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
index b37886b1b59..7bbca215ca4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
\ No newline at end of file
+Native Audio Playback
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 3e9b7575290..5468f7f9077 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
index cd2d3dab18a..faea3298df2 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1,3 +1 @@
-
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index edd6e9c39ee..266ae69275a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1,2 +1 @@
-
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 7bcffb8dee4..9a2e0d43722 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,3 +1,2 @@
-
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
index ad0db3ff5c9..4e29c4eeb6a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1,2 +1 @@
-
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
index ab6d1bf9d08..837c7e475a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1,2 +1 @@
-
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
index 5ad7357168c..9a5f7a35d4e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-network.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
index 92837035391..a81214659db 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
-
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
+
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
index 4e1c4bcb571..9632b1f0155 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,5 +1,4 @@
-
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
index 5ddc2066105..dd7010c8876 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,4 +1,3 @@
-
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -6,11 +5,13 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
+
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
+
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -65,5 +66,4 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-`$ chmod +x hooks/copy_android_notification_icons.js`
-
+   `$ chmod +x hooks/copy_android_notification_icons.js`
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 0be0100f96d..11e9c0ca52c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1,2 +1 @@
-
-Plugin to open native screens of iOS/android settings
\ No newline at end of file
+Plugin to open native screens of iOS/android settings
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
index 077568f6f76..c59128571c6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1,2 +1 @@
-
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
index 97823a256c7..4caf38450f4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1,2 +1 @@
-
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
index e45425cee51..4f099e14ed4 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 0b14edafe4a..22692f6e35d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
index c6fcd66be8f..81ece364e1f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,3 +1,2 @@
-
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index dd840c8b485..1510b50b7b6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,3 +1,2 @@
-
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
index 1f20587b9e3..77e517bcbd9 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,4 +1,3 @@
-
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
index 642ad87c3ba..c4ca80fa312 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
index 6ea7514c5fa..6596e0e430f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
index 2c12503cd71..d1bb01fec7e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,6 +1,3 @@
-
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
-
-
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
index fa7a099a33f..9a9cc59bc6c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Pinterest
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
index c42c478d81d..b1cab91f830 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1,2 +1 @@
-
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
index eaca280cad2..4ed7aff21ca 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,3 +1,2 @@
-
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
index 779cd5d6ec2..1985ca44851 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,3 +1,2 @@
-
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
index 312ac4a9125..5aff311b111 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
\ No newline at end of file
+Prints documents or HTML rendered content
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 51bb27361c9..909c2ef0dbb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1,2 +1 @@
-
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
index 7f42a5bcd96..dc1a4fbbb4b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
-
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
+
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
index 5ae1db23037..a9c3464e985 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
index 464bba08731..e65c6c7edd7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
index fcc40802c3d..d9b32939ab5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,4 +1,3 @@
-
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 3dcb9304702..55b6fc63435 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,4 +1,3 @@
-
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index a90b29a29b0..505b461b09c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1,2 +1 @@
-
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
index 13214fabab4..2d13f688d77 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-restart.readme.md
@@ -1,2 +1 @@
-
 This plugin to restart android application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
index 1b4e50f1b68..9f1d179bd5c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1,2 +1 @@
-
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index c635a5fd046..6153b43d685 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,4 +1,3 @@
-
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
index 416c63df2e9..a83e7487c9e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
index 15c0b85bf5f..e9b365c009a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
\ No newline at end of file
+Captures a screen shot
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
index a4c9c37f0b3..5af0e96163c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1,2 +1 @@
-
 This plugin enables sensors on Android devices
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
index 125a3910c49..a16c1211a8c 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-serial.readme.md
@@ -1,2 +1 @@
-
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
index aca58cc645a..b13d7210b0e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
index 5608715c9fa..917873665cf 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
\ No newline at end of file
+Handles shake gesture
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 8ab0b4dd94f..630d79ceeb0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index d7fe4d72b94..40b7e9082ef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,4 +1,3 @@
-
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index e8991e9348b..f02092735e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,7 +1,6 @@
-
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-*Source:* https://developer.apple.com/sign-in-with-apple/
+_Source:_ https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
index 52c91993c93..80e74390f46 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,4 +1,3 @@
-
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index e6270053a4a..00c77e7cdfc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,4 +1,3 @@
-
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
index 83f1f737e59..696999e2340 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,3 +1,2 @@
-
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
index eb6aaf6b11c..3af874243f1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1,2 +1 @@
-
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
index b0ba3252b25..d64c2f4cab6 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sms.readme.md
@@ -1,3 +1 @@
-
-
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
index 760be2d9030..3edd7dba0d1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,4 +1,3 @@
-
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
index ccd38016353..efc07916d88 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1,2 +1 @@
-
 This plugin does speech recognition using cloud services
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
index 8623152c556..5521af0b3b3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1,2 +1 @@
-
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 66329069921..97f3a5146a5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
index 31117f45f87..1a5acf29e82 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
index bce7a50dba7..cbc01dcad68 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-
 Cordova plugin for authenticating with Spotify
+
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 92e4d096de7..1f34ca227ed 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
index 0d19359e763..bfb4c960c5d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1,2 +1 @@
-
 Access SQLite databases on the device.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 62c602df45a..4c8d739d81f 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
index 8866094f12f..167ed6673b8 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1,2 +1 @@
-
-* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
index d2df403f415..0c999e9b7e3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,4 +1,3 @@
-
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
index 918f0320b25..b6a57d237ac 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
-
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
+
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
index b093d14b4af..5a521be5eb5 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
index 32f49f8fb59..2e8f0e8c676 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
index 373fa2e0f42..22c07237113 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1,2 +1 @@
-
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 6a1864ed364..4c4cc795164 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1,2 +1 @@
-
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 577ae87896a..8f1ca44e3ad 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 80ce9a5af77..2efbb060915 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
index 41e946cfc8e..b53253d0eef 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
index 032d6ec13cc..cd2ff3ab709 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 81e3408cc65..40815363667 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1,2 +1 @@
-
 In-app browser that allows styling.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index a78596064d6..aea7b49108e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,4 +1,3 @@
-
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
index c7b5d6c7fba..9034d3ab1f0 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
index 02615a1ec9f..0bb27885878 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,4 +1,3 @@
-
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 16ead04e0ed..0fd10d23d96 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
-
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
+
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
index 8876a612197..f1dd7f71fd1 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uid.readme.md
@@ -1,2 +1 @@
-
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 1db59244ff9..032854e3607 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1,2 +1 @@
-
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 0b49755a0de..5ec8996425d 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
+## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+
+## iOS Requirements
 
-This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
--
-iOS Requirements
--
 Update your Cocoapods repo before you install the plugin.
+
 ```
 $ pod repo update
 ```
--
-Browser Requirements
--
-After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
+- Browser Requirements
+- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
\ No newline at end of file
+```
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
index 504b3c9eb24..1bf710ddbcc 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 5cf251b3c8e..857e2854746 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
index 9c299395cf9..c5e46b65ea3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,4 +1,3 @@
-
-The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
index 416be944a54..f52e258035a 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1,2 +1 @@
-
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
index dba5defbdd0..f82e5deb0ab 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
\ No newline at end of file
+Vibrates the device
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index a22e03f3945..f3e970c9efb 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-
 This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
+
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
index 1ee9f14d4a0..e7f3e1b8a0b 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
index 62d0e5158b6..e6bce9df776 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1,2 +1 @@
-
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
index 562d250d54f..74a4213c286 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 732d61641b6..74f478b025e 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
index a2eb7545759..981c27c1eb3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1,2 +1 @@
-
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
index 639229cba09..b2e43d635c3 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1,2 +1 @@
-
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index e519b6b087f..ca5fcb58975 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,4 +1,3 @@
-
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
index c85ed196728..3fef1483ebd 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,5 +1,3 @@
-
-
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 65e5f92754a..17fd2049102 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1,2 +1 @@
-
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
index 33a16ff46c6..e0a91fda385 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,4 +1,3 @@
-
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
index 48620c015e9..b6d33465570 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1,2 +1 @@
-
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
index 8550752032e..6433e0021a7 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zip.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
index e358d13434b..94a52e6dc07 100644
--- a/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/.detection/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
diff --git a/src/translate/cli/build.readme.md b/src/translate/cli/build.readme.md
index 7de5f855455..5f6c540c109 100644
--- a/src/translate/cli/build.readme.md
+++ b/src/translate/cli/build.readme.md
@@ -1,3 +1,3 @@
 `ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment.
 
-`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
\ No newline at end of file
+`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples.
diff --git a/src/translate/cli/capacitor-add.readme.md b/src/translate/cli/capacitor-add.readme.md
index 6a1ecf8bc10..464a4fb5a49 100644
--- a/src/translate/cli/capacitor-add.readme.md
+++ b/src/translate/cli/capacitor-add.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor add` will do the following:
+
 - Install the Capacitor platform package
-- Copy the native platform template into your project
\ No newline at end of file
+- Copy the native platform template into your project
diff --git a/src/translate/cli/capacitor-build.readme.md b/src/translate/cli/capacitor-build.readme.md
index 0ccb955a383..ecbb4a9e00a 100644
--- a/src/translate/cli/capacitor-build.readme.md
+++ b/src/translate/cli/capacitor-build.readme.md
@@ -1,8 +1,9 @@
 `ionic capacitor build` will do the following:
+
 - Perform `ionic build`
 - Copy web assets into the specified native platform
 - Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
 
 Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
 
-To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
\ No newline at end of file
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
diff --git a/src/translate/cli/capacitor-copy.readme.md b/src/translate/cli/capacitor-copy.readme.md
index 2e5ddd1f0e7..ad813a2f858 100644
--- a/src/translate/cli/capacitor-copy.readme.md
+++ b/src/translate/cli/capacitor-copy.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor copy` will do the following:
+
 - Perform an Ionic build, which compiles web assets
-- Copy web assets to Capacitor native platform(s)
\ No newline at end of file
+- Copy web assets to Capacitor native platform(s)
diff --git a/src/translate/cli/capacitor-open.readme.md b/src/translate/cli/capacitor-open.readme.md
index 6a4f8a5eeba..c52c1f44711 100644
--- a/src/translate/cli/capacitor-open.readme.md
+++ b/src/translate/cli/capacitor-open.readme.md
@@ -1,2 +1,3 @@
 `ionic capacitor open` will do the following:
-- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
\ No newline at end of file
+
+- Open the IDE for your native project (Xcode for iOS, Android Studio for Android)
diff --git a/src/translate/cli/capacitor-run.readme.md b/src/translate/cli/capacitor-run.readme.md
index a17e32b9a99..56a76e0d464 100644
--- a/src/translate/cli/capacitor-run.readme.md
+++ b/src/translate/cli/capacitor-run.readme.md
@@ -1,4 +1,5 @@
 `ionic capacitor run` will do the following:
+
 - Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option)
 - Run `capacitor run` (or open IDE for your native project with the `--open` option)
 
@@ -6,4 +7,4 @@ When using `--livereload` with hardware devices, remember that livereload needs
 
 If you have multiple devices and emulators, you can target a specific one by ID with the `--target` option. You can list targets with `--list`.
 
-For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
\ No newline at end of file
+For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips).
diff --git a/src/translate/cli/capacitor-sync.readme.md b/src/translate/cli/capacitor-sync.readme.md
index 4ab54b5269d..403ecdf9af3 100644
--- a/src/translate/cli/capacitor-sync.readme.md
+++ b/src/translate/cli/capacitor-sync.readme.md
@@ -1,5 +1,6 @@
 `ionic capacitor sync` will do the following:
+
 - Perform an Ionic build, which compiles web assets
 - Copy web assets to Capacitor native platform(s)
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/cli/capacitor-update.readme.md b/src/translate/cli/capacitor-update.readme.md
index 6941a9bbe77..6691448d373 100644
--- a/src/translate/cli/capacitor-update.readme.md
+++ b/src/translate/cli/capacitor-update.readme.md
@@ -1,3 +1,4 @@
 `ionic capacitor update` will do the following:
+
 - Update Capacitor native platform(s) and dependencies
-- Install any discovered Capacitor or Cordova plugins
\ No newline at end of file
+- Install any discovered Capacitor or Cordova plugins
diff --git a/src/translate/cli/completion.readme.md b/src/translate/cli/completion.readme.md
index c614f27c143..98969ac91c0 100644
--- a/src/translate/cli/completion.readme.md
+++ b/src/translate/cli/completion.readme.md
@@ -1,3 +1,3 @@
 This command is experimental and only works for Z shell (zsh) and non-Windows platforms.
 
-To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
\ No newline at end of file
+To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples.
diff --git a/src/translate/cli/config-get.readme.md b/src/translate/cli/config-get.readme.md
index ecfdc6708ac..b993225035b 100644
--- a/src/translate/cli/config-get.readme.md
+++ b/src/translate/cli/config-get.readme.md
@@ -8,4 +8,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 If you are using this command programmatically, you can use the `--json` option.
 
-This command will sanitize config output for known sensitive fields (disabled when using `--json`).
\ No newline at end of file
+This command will sanitize config output for known sensitive fields (disabled when using `--json`).
diff --git a/src/translate/cli/config-set.readme.md b/src/translate/cli/config-set.readme.md
index fd2916c6e27..4cfe7872088 100644
--- a/src/translate/cli/config-set.readme.md
+++ b/src/translate/cli/config-set.readme.md
@@ -6,4 +6,4 @@ For multi-app projects, this command is scoped to the current project by default
 
 This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values.
 
-By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
\ No newline at end of file
+By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`.
diff --git a/src/translate/cli/config-unset.readme.md b/src/translate/cli/config-unset.readme.md
index 9b7c09a8699..7dca73c33a4 100644
--- a/src/translate/cli/config-unset.readme.md
+++ b/src/translate/cli/config-unset.readme.md
@@ -2,4 +2,4 @@ This command deletes configuration values from the project's **./ionic.config.js
 
 For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property.
 
-For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
\ No newline at end of file
+For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option.
diff --git a/src/translate/cli/cordova-build.readme.md b/src/translate/cli/cordova-build.readme.md
index 774bb3c3bab..5859a7e2658 100644
--- a/src/translate/cli/cordova-build.readme.md
+++ b/src/translate/cli/cordova-build.readme.md
@@ -2,4 +2,4 @@ Like running `cordova build` directly, `ionic cordova build` also builds web ass
 
 To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments.
 
-The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
\ No newline at end of file
+The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file.
diff --git a/src/translate/cli/cordova-compile.readme.md b/src/translate/cli/cordova-compile.readme.md
index 947b914334f..f234fefe548 100644
--- a/src/translate/cli/cordova-compile.readme.md
+++ b/src/translate/cli/cordova-compile.readme.md
@@ -1 +1 @@
-Like running `cordova compile` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova compile` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-emulate.readme.md b/src/translate/cli/cordova-emulate.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/cli/cordova-emulate.readme.md
+++ b/src/translate/cli/cordova-emulate.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/cli/cordova-platform.readme.md b/src/translate/cli/cordova-platform.readme.md
index f65aea27395..1b289c0ac8f 100644
--- a/src/translate/cli/cordova-platform.readme.md
+++ b/src/translate/cli/cordova-platform.readme.md
@@ -1 +1 @@
-Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
\ No newline at end of file
+Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks.
diff --git a/src/translate/cli/cordova-plugin.readme.md b/src/translate/cli/cordova-plugin.readme.md
index b3ea63900d4..162ba073340 100644
--- a/src/translate/cli/cordova-plugin.readme.md
+++ b/src/translate/cli/cordova-plugin.readme.md
@@ -1 +1 @@
-Like running `cordova plugin` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova plugin` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-prepare.readme.md b/src/translate/cli/cordova-prepare.readme.md
index 90b7d18e711..6ae022dcaa0 100644
--- a/src/translate/cli/cordova-prepare.readme.md
+++ b/src/translate/cli/cordova-prepare.readme.md
@@ -6,4 +6,4 @@
 - Copy icons and splash screens from **resources/** to into your Cordova platforms.
 - Copy plugin files into specified platforms.
 
-You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
\ No newline at end of file
+You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode.
diff --git a/src/translate/cli/cordova-requirements.readme.md b/src/translate/cli/cordova-requirements.readme.md
index 04bdf9cef01..edf47772b1f 100644
--- a/src/translate/cli/cordova-requirements.readme.md
+++ b/src/translate/cli/cordova-requirements.readme.md
@@ -1 +1 @@
-Like running `cordova requirements` directly, but provides friendly checks.
\ No newline at end of file
+Like running `cordova requirements` directly, but provides friendly checks.
diff --git a/src/translate/cli/cordova-resources.readme.md b/src/translate/cli/cordova-resources.readme.md
index 730573a47c3..e93fdd8a890 100644
--- a/src/translate/cli/cordova-resources.readme.md
+++ b/src/translate/cli/cordova-resources.readme.md
@@ -11,5 +11,6 @@ For best results, the splash screen's artwork should roughly fit within a square
 This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally.
 
 Cordova reference documentation:
+
 - Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)**
-- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
\ No newline at end of file
+- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)**
diff --git a/src/translate/cli/cordova-run.readme.md b/src/translate/cli/cordova-run.readme.md
index bd396957a25..7595cd2ca30 100644
--- a/src/translate/cli/cordova-run.readme.md
+++ b/src/translate/cli/cordova-run.readme.md
@@ -8,4 +8,4 @@ For Android and iOS, you can setup Remote Debugging on your device with browser
 
 When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information.
 
-Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
\ No newline at end of file
+Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option.
diff --git a/src/translate/cli/generate.readme.md b/src/translate/cli/generate.readme.md
index 30de99a2484..042f64a7a4c 100644
--- a/src/translate/cli/generate.readme.md
+++ b/src/translate/cli/generate.readme.md
@@ -1,8 +1,8 @@
 Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more.
 
- - For a full list of available types, use `npx ng g --help`
- - For a list of options for a types, use `npx ng g <type> --help`
+- For a full list of available types, use `npx ng g --help`
+- For a list of options for a types, use `npx ng g <type> --help`
 
 You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**.
 
-To test a generator before file modifications are made, use the `--dry-run` option.
\ No newline at end of file
+To test a generator before file modifications are made, use the `--dry-run` option.
diff --git a/src/translate/cli/git-remote.readme.md b/src/translate/cli/git-remote.readme.md
index b4caf425642..58347c24535 100644
--- a/src/translate/cli/git-remote.readme.md
+++ b/src/translate/cli/git-remote.readme.md
@@ -1,3 +1,3 @@
 This command is used by `ionic link` when Appflow is used as the git host.
 
-`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
\ No newline at end of file
+`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com).
diff --git a/src/translate/cli/info.readme.md b/src/translate/cli/info.readme.md
index 03f86bc2907..d633e373984 100644
--- a/src/translate/cli/info.readme.md
+++ b/src/translate/cli/info.readme.md
@@ -1 +1 @@
-This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
\ No newline at end of file
+This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information.
diff --git a/src/translate/cli/init.readme.md b/src/translate/cli/init.readme.md
index 98b3118bed5..918620be789 100644
--- a/src/translate/cli/init.readme.md
+++ b/src/translate/cli/init.readme.md
@@ -2,4 +2,4 @@ This command will initialize an Ionic app within the current directory. Usually,
 
 `ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line.
 
-If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
\ No newline at end of file
+If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them.
diff --git a/src/translate/cli/integrations-disable.readme.md b/src/translate/cli/integrations-disable.readme.md
index 5418badf555..b4f4a38bdd0 100644
--- a/src/translate/cli/integrations-disable.readme.md
+++ b/src/translate/cli/integrations-disable.readme.md
@@ -1 +1 @@
-Integrations, such as Cordova, can be disabled with this command.
\ No newline at end of file
+Integrations, such as Cordova, can be disabled with this command.
diff --git a/src/translate/cli/integrations-enable.readme.md b/src/translate/cli/integrations-enable.readme.md
index 945fcbbb226..76526785eaa 100644
--- a/src/translate/cli/integrations-enable.readme.md
+++ b/src/translate/cli/integrations-enable.readme.md
@@ -1,3 +1,3 @@
 Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration.
 
-Integrations can be re-added with the `--add` option.
\ No newline at end of file
+Integrations can be re-added with the `--add` option.
diff --git a/src/translate/cli/integrations-list.readme.md b/src/translate/cli/integrations-list.readme.md
index 044dd455e0e..d075d211e95 100644
--- a/src/translate/cli/integrations-list.readme.md
+++ b/src/translate/cli/integrations-list.readme.md
@@ -1,4 +1,4 @@
 This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project).
 
 - To enable or add integrations, see `ionic integrations enable --help`
-- To disable integrations, see `ionic integrations disable --help`
\ No newline at end of file
+- To disable integrations, see `ionic integrations disable --help`
diff --git a/src/translate/cli/link.readme.md b/src/translate/cli/link.readme.md
index e621a2e948a..f5a96a51946 100644
--- a/src/translate/cli/link.readme.md
+++ b/src/translate/cli/link.readme.md
@@ -6,4 +6,4 @@ Appflow uses a git-based workflow to manage app updates. During the linking proc
 
 Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked.
 
-If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/live-update-add.readme.md b/src/translate/cli/live-update-add.readme.md
index bc0316117d7..d2aebb869cd 100644
--- a/src/translate/cli/live-update-add.readme.md
+++ b/src/translate/cli/live-update-add.readme.md
@@ -2,4 +2,4 @@ This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for bo
 
 For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.
 
-For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
\ No newline at end of file
+For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.
diff --git a/src/translate/cli/live-update-configure.readme.md b/src/translate/cli/live-update-configure.readme.md
index 1d8c7504c8f..d4bc34cffba 100644
--- a/src/translate/cli/live-update-configure.readme.md
+++ b/src/translate/cli/live-update-configure.readme.md
@@ -2,4 +2,4 @@ This command overrides configuration for the Appflow Live Update plugin (`cordov
 
 For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.
 
-For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
\ No newline at end of file
+For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.
diff --git a/src/translate/cli/login.readme.md b/src/translate/cli/login.readme.md
index 0fbe95d2ae8..ce63bb58ac0 100644
--- a/src/translate/cli/login.readme.md
+++ b/src/translate/cli/login.readme.md
@@ -4,4 +4,4 @@ If the `IONIC_TOKEN` environment variable is set, the CLI will automatically aut
 
 If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup).
 
-If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/logout.readme.md b/src/translate/cli/logout.readme.md
index 4122a7422e5..540a69a156c 100644
--- a/src/translate/cli/logout.readme.md
+++ b/src/translate/cli/logout.readme.md
@@ -2,4 +2,4 @@ Remove the Ionic user token from the CLI config.
 
 Log in again with `ionic login`.
 
-If you need to create an Ionic account, use `ionic signup`.
\ No newline at end of file
+If you need to create an Ionic account, use `ionic signup`.
diff --git a/src/translate/cli/repair.readme.md b/src/translate/cli/repair.readme.md
index dbb18055c3a..9b01e9d40d8 100644
--- a/src/translate/cli/repair.readme.md
+++ b/src/translate/cli/repair.readme.md
@@ -1,3 +1,3 @@
 This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
 
-For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
\ No newline at end of file
+For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project.
diff --git a/src/translate/cli/serve.readme.md b/src/translate/cli/serve.readme.md
index b08bf89fccf..a9b7bd7d2af 100644
--- a/src/translate/cli/serve.readme.md
+++ b/src/translate/cli/serve.readme.md
@@ -4,4 +4,4 @@ By default, `ionic serve` boots up a development server on `localhost`. To serve
 
 `ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.
 
-The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
\ No newline at end of file
+The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).
diff --git a/src/translate/cli/signup.readme.md b/src/translate/cli/signup.readme.md
index 4761dfdf982..82d215181a5 100644
--- a/src/translate/cli/signup.readme.md
+++ b/src/translate/cli/signup.readme.md
@@ -1 +1 @@
-If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/ssh-setup.readme.md b/src/translate/cli/ssh-setup.readme.md
index f6ed6f93cb8..b95050beae9 100644
--- a/src/translate/cli/ssh-setup.readme.md
+++ b/src/translate/cli/ssh-setup.readme.md
@@ -1,3 +1,3 @@
 This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys).
 
-If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
\ No newline at end of file
+If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request).
diff --git a/src/translate/cli/ssh-use.readme.md b/src/translate/cli/ssh-use.readme.md
index b9a78d4db3e..4714fa29928 100644
--- a/src/translate/cli/ssh-use.readme.md
+++ b/src/translate/cli/ssh-use.readme.md
@@ -1,3 +1,3 @@
 This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config).
 
-Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
\ No newline at end of file
+Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file.
diff --git a/src/translate/cli/ssl-generate.readme.md b/src/translate/cli/ssl-generate.readme.md
index c49644b96ef..aea3ec98cc5 100644
--- a/src/translate/cli/ssl-generate.readme.md
+++ b/src/translate/cli/ssl-generate.readme.md
@@ -2,4 +2,4 @@ Uses OpenSSL to create a self-signed certificate for **localhost** (by default).
 
 After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate.
 
-The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
\ No newline at end of file
+The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`.
diff --git a/src/translate/cli/start.readme.md b/src/translate/cli/start.readme.md
index 45b725f705d..9b3d3b471e4 100644
--- a/src/translate/cli/start.readme.md
+++ b/src/translate/cli/start.readme.md
@@ -6,4 +6,4 @@ The first argument is your app's `name`. Don't worry--you can always change this
 
 The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned.
 
-Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
\ No newline at end of file
+Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates.
diff --git a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
index 1fbd6aab841..986eeabbc94 100644
--- a/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-abbyy-rtr.readme.md
@@ -1,3 +1,2 @@
-
 This plugin allows to use the Text Capture and Data Capture features of
 ABBYY Real-Time Recognition SDK (RTR SDK) in apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
index deb9dde4602..90e1ee9b77e 100644
--- a/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-actsheet.readme.md
@@ -1,4 +1,3 @@
-
 The ActionSheet plugin shows a native list of options the user can choose from.
 
 Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet).
diff --git a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
index 420a0d400d4..11db0748e34 100644
--- a/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-adjust.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com.
 
 Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk)
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
index fb2004ca29c..a21a70fb083 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-free.readme.md
@@ -1,4 +1,3 @@
-
 A free, no ad-sharing version of Google AdMob plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-admob-free`. For more info, please see the [AdMob Free plugin docs](https://github.com/ratson/cordova-plugin-admob-free).
diff --git a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
index 56e36fe9053..41472b2e411 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob-plus.readme.md
@@ -1,2 +1 @@
-
 AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools.
diff --git a/src/translate/native/@awesome-cordova-plugins-admob.readme.md b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
index b18059b0829..8f50b6279c0 100644
--- a/src/translate/native/@awesome-cordova-plugins-admob.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-admob.readme.md
@@ -1,8 +1,8 @@
-
 Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
 Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!
 
 **Supports:**
+
 - Banner ads (top and bottom)
 - Interstitial ads
 - Rewarded ads
diff --git a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
index 8bc209c7e54..e11ad80b4a3 100644
--- a/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-aes-256.readme.md
@@ -1,4 +1,3 @@
-
 This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text.
 It's a cross-platform plugin which supports both Android and iOS.
 The encryption and decryption are performed on the device native layer so that the performance is much faster.
diff --git a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
index 18f742e5108..0303990f06b 100644
--- a/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-alipay.readme.md
@@ -1,4 +1,3 @@
-
 This plugin facilitates the usage of Alipay 支付宝 in an Ionic apps with the integrated AlipaySDK dated on 20180601.
 
 Requires Cordova plugin: `cordova-plugin-gubnoi-alipay`. For more info, please see https://github.com/jing-zhou/cordova-plugin-alipay .
diff --git a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
index 76387367a61..23e8c973bf2 100644
--- a/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-all-in-one-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Paytm All-in-One SDK plugin for Cordova/Ionic Applications
 Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order.
 Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK.
diff --git a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
index 822209a4a72..e27b0ba6540 100644
--- a/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-analytics-firebase.readme.md
@@ -1,2 +1 @@
-
 Google Analytics Firebase plugin for Ionic Native apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
index 93a3f290203..c31c989a3d3 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-exoplayer.readme.md
@@ -1,4 +1,3 @@
-
 Cordova media player plugin using Google's ExoPlayer framework.
 
 https://github.com/google/ExoPlayer
diff --git a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
index 3592aee1757..64f0fad3191 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-full-screen.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android.
 Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content.
-In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
\ No newline at end of file
+In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
index 2eb94af7221..a82b309d78c 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-notch.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables developers to get the cutout and android devices inset sizes
 It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch
 This plugin works on all android versions, but we can only detect notches starting from Android 9.
diff --git a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
index 0c671a0c2d0..8e414578f93 100644
--- a/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-android-permissions.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is designed to support Android new permissions checking mechanism.
 
 You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html
diff --git a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
index 48c289cc3fb..5f6722050b0 100644
--- a/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-anyline.readme.md
@@ -1,2 +1 @@
-
 Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
index 5672e0b2213..2813a5d498b 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-availability.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android.
 
 Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
index d7ef092bae5..95a88837497 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-analytics.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
index c331a7d05f5..ef9f2968a8f 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-crashes.readme.md
@@ -1,4 +1,3 @@
-
 App Center Analytics helps you understand user behavior and customer engagement to improve your app.
 The SDK automatically captures session count and device properties like model, OS version, etc.
 You can define your own custom events to measure things that matter to you.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
index 6d2e7862965..e84626aea1d 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-low-memory.readme.md
@@ -1,3 +1,2 @@
-
 Generates a low memory warning.
 For more info, please see: https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-generate-low-memory
diff --git a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
index c1b58f99edf..e89f74940ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-center-push.readme.md
@@ -1,3 +1 @@
-
-
 For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
index 0db391fddba..aff2e2cb4d6 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-launcher.readme.md
@@ -1,2 +1 @@
-
 Simple Cordova plugin to see if other apps are installed and launch them.
diff --git a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
index 12d31c41dd7..bb919529254 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-minimize.readme.md
@@ -1,2 +1 @@
-
 AppMinimize is a plugin to minimize the application on android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
index 87dd87d5765..fbde6778edf 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-preferences.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to read and write app preferences
diff --git a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
index c0210b3f9e5..c2d7f1730a0 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-rate.readme.md
@@ -1,4 +1,3 @@
-
 The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
 
 Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate).
diff --git a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
index 08cfe48a452..6b4fa2e5c61 100644
--- a/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-app-version.readme.md
@@ -1,4 +1,3 @@
-
 Reads the version of your app from the target build settings.
 
 Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version).
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
index 1e612327b09..6213470725d 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-pay.readme.md
@@ -1,2 +1 @@
-
 A dependency free Cordova plugin to provide Apple Pay functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
index 79bd464667d..b3fd1055a9a 100644
--- a/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-apple-wallet.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet.
diff --git a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
index af28dc677bd..41c425d19c7 100644
--- a/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appodeal.readme.md
@@ -1,2 +1 @@
-
 Plugin to serve ads through native Appodeal SDKs
diff --git a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
index f0017f9025d..4197b26f800 100644
--- a/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-appsflyer.readme.md
@@ -1,2 +1 @@
-
 Appsflyer Cordova SDK support for Attribution
diff --git a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
index d1ce36553bc..4c69face47f 100644
--- a/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-audio-management.readme.md
@@ -1,3 +1,2 @@
-
 A Cordova plugin to manage volume of audio streams for: ring, music, notification and system. Possible
 ringer values for those streams are: silent, vibrate and normal.
diff --git a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
index 48d67747675..b066c65401a 100644
--- a/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-autostart.readme.md
@@ -1,3 +1,2 @@
-
 This plugin automatically starts your Android app after every boot or auto-update.
 You can enable or disable the autostart function in your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
index 62278126195..3a4a3e352cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-fetch.readme.md
@@ -1,4 +1,3 @@
-
 iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399
 iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example).
 For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch
diff --git a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
index a43e7c719b2..b1cfb8cd04b 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-geolocation.readme.md
@@ -1,3 +1,2 @@
-
 This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For
 more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation
diff --git a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
index 90ce8edd2ad..ee73844b3c8 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-mode.readme.md
@@ -1,3 +1,2 @@
-
 Cordova plugin to prevent the app from going to sleep while in background.
-Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
\ No newline at end of file
+Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode
diff --git a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-background-upload.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
index bc94608b2c6..9ab2fed769b 100644
--- a/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-backlight.readme.md
@@ -1,2 +1 @@
-
 This plugin adds turning on/off the device backlight.
diff --git a/src/translate/native/@awesome-cordova-plugins-badge.readme.md b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
index 11775820229..52465e564f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-badge.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-badge.readme.md
@@ -1,4 +1,3 @@
-
 The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground.
 
 Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge).
diff --git a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
index ebe978c896a..33af83938f9 100644
--- a/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-baidu-push.readme.md
@@ -1,2 +1 @@
-
 This plugin faciliates the use of Baidu Push notifications.
diff --git a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
index d40a29ab2a1..747418e7857 100644
--- a/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-barcode-scanner.readme.md
@@ -1,4 +1,3 @@
-
 The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.
 
 Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
index 9f16d6d8f42..b84c09c835f 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64-to-gallery.readme.md
@@ -1 +1 @@
-This plugin allows you to save base64 data as a png image into the device
\ No newline at end of file
+This plugin allows you to save base64 data as a png image into the device
diff --git a/src/translate/native/@awesome-cordova-plugins-base64.readme.md b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
index 06a0311c510..340db120adf 100644
--- a/src/translate/native/@awesome-cordova-plugins-base64.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-base64.readme.md
@@ -1,2 +1 @@
-
 This Plugin is used to encode base64 of any file, it uses js code for iOS, but in case of android it uses native code to handle android versions lower than v.3
diff --git a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
index da71524f3d1..2c657416aef 100644
--- a/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-battery-status.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status).
diff --git a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
index 0725aba40ce..bd325268e71 100644
--- a/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biocatch.readme.md
@@ -1,2 +1 @@
-
 BioCatch SDK Cordova support
diff --git a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
index 6be6e7318ae..b1b5ec0f81c 100644
--- a/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-biometric-wrapper.readme.md
@@ -1,3 +1,2 @@
-
 This plugin capture biometric(Iris and Fingerprint) and validate the user.
 May be used in Banking domain
diff --git a/src/translate/native/@awesome-cordova-plugins-ble.readme.md b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
index 4818853ac89..8d23815cab0 100644
--- a/src/translate/native/@awesome-cordova-plugins-ble.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ble.readme.md
@@ -1,4 +1,3 @@
-
 This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals.
 
 The plugin provides a simple JavaScript API for iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
index 52d671c0034..f0f05bc6a1f 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkid.readme.md
@@ -1,3 +1,2 @@
-
 Microblink SDK wrapper for barcode and document scanning. See the
 blinkid-phonegap repository for available recognizers and other settings
diff --git a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
index b6cae0f21fd..6f149bce706 100644
--- a/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-blinkup.readme.md
@@ -1,2 +1 @@
-
 Electric Imp BlinkUp ionic plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
index 639b85fee5c..c0281f22a59 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-classic-serial-port.readme.md
@@ -1 +1 @@
-This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
\ No newline at end of file
+This plugin is written using the iOS Accessory Framework (MFi) to support Classic Bluetooth on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
index 3ae195d12de..3b80e3d0ecd 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-le.readme.md
@@ -1,4 +1,3 @@
-
 This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows.
 It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic.
 It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
index f3579d8e616..d0939b5fde7 100644
--- a/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-bluetooth-serial.readme.md
@@ -1 +1 @@
-This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
\ No newline at end of file
+This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS).
diff --git a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
index 29af8d97385..9921b18062b 100644
--- a/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-braintree.readme.md
@@ -1,9 +1,8 @@
-
 This plugin enables the use of the Braintree Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).
 
- Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
+Ionic Native utilizes [a maintained fork](https://github.com/taracque/cordova-plugin-braintree) of the original `cordova-plugin-braintree`
 
- For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
+For information on how to use Apple Pay with this plugin, please refer to the [plugin documentation](https://github.com/Taracque/cordova-plugin-braintree#apple-pay-ios-only)
 
 **NOTE**: This is not a complete payments solution. All of the Braintree client-side UIs simply generate a payment nonce that must then be processed by your server to complete the payment.
 See the [Braintree Node server documentation](https://developers.braintreepayments.com/start/hello-server/node) for details and a [sample Express server](https://github.com/braintree/braintree_express_example) that implements the required functionality.
diff --git a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
index b9836ebd4c6..a222a2efbe7 100644
--- a/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-branch-io.readme.md
@@ -1,2 +1 @@
-
 Branch.io is an attribution service for deeplinking and invitation links
diff --git a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
index 51b06d0cc15..d97dd2af981 100644
--- a/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-brightness.readme.md
@@ -1,4 +1,3 @@
-
 The Brightness plugin let you control the display brightness of your device.
 
 Requires Cordova plugin: `cordova-plugin-brightness`. For more info, please see the [Brightness plugin docs](https://github.com/mgcrea/cordova-plugin-brightness).
diff --git a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
index 71995e79760..b925da2342c 100644
--- a/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-broadcaster.readme.md
@@ -1,2 +1 @@
-
 This plugin adds exchanging events between native code and your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
index bf83901883b..f03b8b179a9 100644
--- a/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-browser-tab.readme.md
@@ -1,2 +1 @@
-
 This plugin provides an interface to in-app browser tabs that exist on some mobile platforms, specifically [Custom Tabs](http://developer.android.com/tools/support-library/features.html#custom-tabs) on Android (including the [Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) implementation), and [SFSafariViewController](https://developer.apple.com/library/ios/documentation/SafariServices/Reference/SFSafariViewController_Ref/) on iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
index 7e5a437d1d3..7b8674b3871 100644
--- a/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-build-info.readme.md
@@ -1,2 +1 @@
-
 This plugin provides build information.
diff --git a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
index 5a83eede868..515f629e662 100644
--- a/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-calendar.readme.md
@@ -1,5 +1,3 @@
-
 This plugin allows you to add events to the Calendar of the mobile device.
 
 Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
index 16d031664c6..b0ecb7bb40b 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-directory.readme.md
@@ -1,3 +1,2 @@
-
 This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification`
 to process the changes in the call directory extension.
diff --git a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
index a2b5e1bab30..76f6447e69b 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-log.readme.md
@@ -1,2 +1 @@
-
 This plugin access the call history on a device and that can be filtered
diff --git a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
index d68a0a44b0e..2914b087a64 100644
--- a/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-call-number.readme.md
@@ -1,3 +1,2 @@
-
 Call a number directly from your Cordova/Ionic application.
 **NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem.
diff --git a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
index 31cf59dc30b..9b06352e407 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera-preview.readme.md
@@ -1,4 +1,3 @@
-
 Showing camera preview in HTML
 
 Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview).
diff --git a/src/translate/native/@awesome-cordova-plugins-camera.readme.md b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
index a354d9c7925..aa5cc82125d 100644
--- a/src/translate/native/@awesome-cordova-plugins-camera.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-camera.readme.md
@@ -1,12 +1,13 @@
-
 Take a photo or capture video.
 
 Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera).
 
 [Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add
+
 ```xml
 <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
  <string>You can take photos</string>
 </config-file>
 ```
+
 inside of the <platform name='ios> section
diff --git a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
index 76c58120b44..752a6da1f4f 100644
--- a/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-chooser.readme.md
@@ -1,7 +1,7 @@
-
 File chooser plugin for Cordova.
 
 The following must be added to config.xml to prevent crashing when selecting large files on Android:
+
 ```xml
 <platform name="android">
  <edit-config
diff --git a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
index 8518bffadeb..953ca23cf89 100644
--- a/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-class-kit.readme.md
@@ -1,6 +1,5 @@
 Plugin for using Apple's ClassKit framework.
 
-
 Prerequisites:
 Only works with Xcode 9.4 and iOS 11.4. Your Provisioning Profile must include the ClassKit capability. Read more about how to Request ClassKit Resources (https://developer.apple.com/contact/classkit/) in here: https://developer.apple.com/documentation/classkit/enabling_classkit_in_your_app.
 Also note that you can’t test ClassKit behavior in Simulator because Schoolwork isn’t available in that environment.
diff --git a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
index f6b4973e48e..5b82513228d 100644
--- a/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clevertap.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps CleverTap SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
index 3176d5f4017..603b2b8f6b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clipboard.readme.md
@@ -1,3 +1 @@
-
 Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
index 939c06b2441..7e3928e3cd5 100644
--- a/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-cloud-settings.readme.md
@@ -1,2 +1 @@
-
 Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation.
diff --git a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
index 3688eedbcac..9d0f8be2ea1 100644
--- a/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-clover-go.readme.md
@@ -1,2 +1 @@
-
 This plugin connect to Clover Go payment device and process payments.
diff --git a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
index 9cf894081e8..b03bd091c4c 100644
--- a/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-code-push.readme.md
@@ -1,4 +1,3 @@
-
 CodePush plugin for Cordova by Microsoft that supports iOS and Android.
 
 For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
index 4bb2367cd5c..b32e2c7cacd 100644
--- a/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-colored-browser-tabs.readme.md
@@ -1,2 +1 @@
-
 This plugin opens Chrome Custom Tabs on Android or SafariViewController on iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
index 0243a89bfa0..b7061033770 100644
--- a/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-contacts.readme.md
@@ -1,2 +1 @@
-
 Access and manage Contacts on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
index 4a13e8229fa..ee32121391a 100644
--- a/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-couchbase-lite.readme.md
@@ -1,2 +1 @@
-
 Plugin to install Couchbase Lite in your PhoneGap app on iOS or Android <docs-card href="https://ionicframework.com/integrations/couchbase-lite" ionicon="alert">This Plugin is no longer supported by Couchbase. Please see our Couchbase Lite Integration</docs-card>
diff --git a/src/translate/native/@awesome-cordova-plugins-crop.readme.md b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
index 6c659180b50..9faa50aaed7 100644
--- a/src/translate/native/@awesome-cordova-plugins-crop.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-crop.readme.md
@@ -1 +1 @@
-Crops images
\ No newline at end of file
+Crops images
diff --git a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
index 5c24399bc42..9116ddca6eb 100644
--- a/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-custom-uisdk.readme.md
@@ -1,2 +1 @@
-
 This plugin is used to access Paytm's native CustomUISDK framework's apis.
diff --git a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
index 5eed8b85866..d2632a61abf 100644
--- a/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-date-picker.readme.md
@@ -1,2 +1 @@
-
 The DatePicker plugin allows the user to fetch date or time using native dialogs.
diff --git a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
index 08fbb92c20c..cabc3d4ff44 100644
--- a/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-db-meter.readme.md
@@ -1 +1 @@
-This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
\ No newline at end of file
+This plugin defines a global DBMeter object, which permits to get the decibel values from the microphone.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
index bffae754b58..8943e5b9ca4 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-accounts.readme.md
@@ -1,2 +1 @@
-
 Gets the Google accounts associated with the Android device
diff --git a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
index ad508847c3e..f11c48fa910 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-feedback.readme.md
@@ -1,3 +1 @@
-
-
 Plugin that lets you provide haptic or acoustic feedback on Android devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
index abe72e3b6c0..4dbbb06d71c 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-motion.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion).
diff --git a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
index 02c713e2138..e96364431a7 100644
--- a/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device-orientation.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-device.readme.md b/src/translate/native/@awesome-cordova-plugins-device.readme.md
index c6ef6980695..3dbd2dec8e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-device.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-device.readme.md
@@ -1,2 +1 @@
-
 Access information about the underlying device and platform.
diff --git a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
index 893058bc4eb..ac9d8279b92 100644
--- a/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dfu-update.readme.md
@@ -1,2 +1 @@
-
 This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device.
diff --git a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
index a90f9cfbe85..64c6b6393fe 100644
--- a/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-diagnostic.readme.md
@@ -1,2 +1 @@
-
 Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi
diff --git a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
index 11ac16aafc6..f988d884a0c 100644
--- a/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-dialogs.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you ability to access and customize the device native dialogs.
 
 Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs).
diff --git a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
index 7eac80f6cff..3a08f9c811c 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-picker.readme.md
@@ -1,4 +1,2 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
 Allows the user to upload files from iCloud
diff --git a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
index 29d32018802..03cd028ccfd 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-scanner.readme.md
@@ -1,2 +1 @@
-
 This plugin processes images of documents, compensating for perspective.
diff --git a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
index 7e39f62d9b0..605e7b14d41 100644
--- a/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-document-viewer.readme.md
@@ -1,2 +1 @@
-
-This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/*) or in any other file system directory available via the cordova file plugin.
+This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
index f15e01b1143..dad89444163 100644
--- a/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-downloader.readme.md
@@ -1,3 +1 @@
-
 This plugin is designed to support downloading files using Android DownloadManager.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
index 4176ac2a7b9..a305d027409 100644
--- a/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-email-composer.readme.md
@@ -1,4 +1 @@
-
-
 Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
index 81259d50cc1..d0554945c4c 100644
--- a/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-emm-app-config.readme.md
@@ -1,5 +1,3 @@
-
 This plugin provides information on EMM application configuration
 
 Requires the Cordova plugin: `cordova-plugin-emm-app-config`. For more info, please see the [Cordova EMM App Config Plugin Docs](https://github.com/oracle/cordova-plugin-emm-app-config).
-
diff --git a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
index 40349a8306b..b76b54f6046 100644
--- a/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-estimote-beacons.readme.md
@@ -1,2 +1 @@
-
 This plugin enables communication between a phone and Estimote Beacons peripherals.
diff --git a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
index 16c3ea63d2a..043375415ac 100644
--- a/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-extended-device-information.readme.md
@@ -1,6 +1,6 @@
-
 Retrieves additional device information from the Device Hardware
- - memory
- - cpumhz
- - totalstorage
- - freestorage
+
+- memory
+- cpumhz
+- totalstorage
+- freestorage
diff --git a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
index 12d214e6d38..b140e97cb32 100644
--- a/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fabric.readme.md
@@ -1,4 +1,3 @@
-
 API for interacting with the Answers kit.
 
 https://docs.fabric.io/crashlytics/index.html
diff --git a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
index df9af63f74b..93e5e887491 100644
--- a/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-facebook.readme.md
@@ -1,11 +1,10 @@
-
 Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.
 
 Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect).
 
 #### Installation
 
- To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
+To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
 
 [![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/)
 
@@ -30,6 +29,7 @@ Click `'Add Platform'`.
 At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
 
 Take note of the `id` for the next step:
+
 ```
 <widget id="com.mycompany.testapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 ```
@@ -37,17 +37,17 @@ Take note of the `id` for the next step:
 You can also edit the `id` to whatever you'd like it to be.
 
 #### iOS Install
+
 Under 'Bundle ID', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/)
 
-
 #### Android Install
+
 Under 'Google Play Package Name', add the `id` from your `config.xml` file:
 
 [![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/)
 
-
 And that's it! You can now make calls to Facebook using the plugin.
 
 ## Events
diff --git a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
index f3790772c17..dbbb3b72132 100644
--- a/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-fcm.readme.md
@@ -1,2 +1 @@
-
 Provides basic functionality for Firebase Cloud Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
index b4553ad9baf..4bf1bdf418f 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-chooser.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on Android for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
index 4fdfccbf60d..f1b5408277a 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-encryption.readme.md
@@ -1,2 +1 @@
-
 Simple file encryption for Cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
index ba26e51b8cd..a719c048fe4 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-opener.readme.md
@@ -1,2 +1 @@
-
 This plugin will open a file on your device file system with its default application.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
index c9445ac1ce7..1f3eeb42d5a 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-path.readme.md
@@ -1,3 +1 @@
-
-
 This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
index b33dc3c0f97..3616dbd3573 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-picker.readme.md
@@ -1,3 +1 @@
-
-
 Opens the file picker on iOS for the user to select a file, returns a file URI.
diff --git a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
index c8ba532eae9..4770407e60d 100644
--- a/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file-transfer.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to upload and download files.
diff --git a/src/translate/native/@awesome-cordova-plugins-file.readme.md b/src/translate/native/@awesome-cordova-plugins-file.readme.md
index 1e61b343d6b..28bc40d6e90 100644
--- a/src/translate/native/@awesome-cordova-plugins-file.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-file.readme.md
@@ -1,9 +1,9 @@
-
 This plugin implements a File API allowing read/write access to files residing on the device.
 
 The File class implements static convenience functions to access files and directories.
 
 Example:
+
 ```
 import { File } from '@awesome-cordova-plugins/file/ngx';
 
@@ -16,8 +16,8 @@ this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Dire
 
 ```
 
- This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
- The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
- Although most of the plugin code was written when an earlier spec was current: http:
-  //www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
-  //dev.w3.org/2009/dap/file-system/file-writer.html
\ No newline at end of file
+This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/
+The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/
+Although most of the plugin code was written when an earlier spec was current: http:
+//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http:
+//dev.w3.org/2009/dap/file-system/file-writer.html
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
index f87a05030d7..ce125266039 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-analytics.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Analytics
 
 Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder.
@@ -6,7 +5,9 @@ Go to firebase console and export google-services.json and GoogleService-Info.pl
 NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project.
 
 ## Using capacitor?
-For Android you'll have to add in __android/app/src/main/AndroidManfiest.xml__ under `<application>`
+
+For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `<application>`
+
 ```
 <meta-data
      tools:replace="android:value"
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
index 4da15cc2ef6..410431f731b 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-authentication.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Authentication
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
index 45a214eee3a..38a8b24123d 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-config.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Config
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
index 2d8b3effb06..a1c32524c76 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crash.readme.md
@@ -1,2 +1 @@
-
 This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
index 2ad1e2109bd..b88fed62436 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-crashlytics.readme.md
@@ -1,2 +1 @@
-
 A Google Firebase Crashlytics plugin to enable capture of crash reports.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
index 6efc1b8ae10..2cfe3a22194 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-dynamic-links.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for Firebase Dynamic Links
 
 Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing.
@@ -10,6 +9,7 @@ Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynami
 You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id).
 
 config.xml:
+
 ```xml
 <platform name="ios">
     <preference name="GoogleIOSClientId" value="..." />
@@ -17,4 +17,4 @@ config.xml:
 <platform name="android">
     <preference name="GoogleAndroidClientId" value="..." />
 </platform>
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
index 5bdcf74de11..6a18f9fcf39 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-messaging.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase Messaging
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
index 433e365a6a5..d1f83c84392 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-vision.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Firebase MLKit Vision
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
index e044eb6dc66..aa17963327a 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase-x.readme.md
@@ -1,3 +1,2 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.
 It is a maintained fork from unmaintained ionic-navite plugin called Firebase.
diff --git a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
index 25001f76e05..6c21f982616 100644
--- a/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-firebase.readme.md
@@ -1,2 +1 @@
-
 This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10).
diff --git a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
index 80ef2d51635..e57049202bf 100644
--- a/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-flurry-analytics.readme.md
@@ -1,2 +1 @@
-
 This plugin connects to Flurry Analytics SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
index 6d68d07b0fe..563b7c87954 100644
--- a/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-foreground-service.readme.md
@@ -1,9 +1,8 @@
-
 This plugin allows for android devices to continue running services in the background, using a
 foreground ongoing notification. This is targeted towards use with plugins such as
 'cordova-geolocation' that will not run while the app is in the background on android API 26+.
 
-For android API 28+, the following xml snippet should be inserted into ```config.xml```:
+For android API 28+, the following xml snippet should be inserted into `config.xml`:
 
 ```
 ...
@@ -12,4 +11,4 @@ For android API 28+, the following xml snippet should be inserted into ```config
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   </config-file>
   ...
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
index 0cd5a4278d8..5987065177c 100644
--- a/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ftp.readme.md
@@ -1,2 +1 @@
-
 This cordova plugin is created to use ftp (client) in web/js.
diff --git a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-full-screen-image.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
index a56ed3a0093..5dda6c71ade 100644
--- a/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gao-de-location.readme.md
@@ -1,3 +1,2 @@
-
 Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
 Gaode location can directly return address informationGaode location can directly return address information
diff --git a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ge-tui-sdk-plugin.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
index 6e993e8f8a8..2f83489f5fb 100644
--- a/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geofence.readme.md
@@ -1,2 +1,2 @@
 Monitors circular geofences around latitude/longitude coordinates, and sends a notification to the user when the boundary of a geofence is crossed. Notifications can be sent when the user enters and/or exits a geofence.
-Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
\ No newline at end of file
+Geofences persist after device reboot. Geofences will be monitored even when the app is not running.
diff --git a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
index 8d55357a600..0391a010ff3 100644
--- a/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-geolocation.readme.md
@@ -1,12 +1,11 @@
-
 This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
 
- This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
 
 For iOS you have to add this configuration to your configuration.xml file
+
 ```xml
 <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
    <string>We use your location for full functionality of certain app features.</string>
 </edit-config>
 ```
-
diff --git a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
index d1a3161e0b4..840cf8d4fb5 100644
--- a/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-globalization.readme.md
@@ -1,2 +1 @@
-
 This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
index 1c759160579..8ebef774b81 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-analytics.readme.md
@@ -1,6 +1,6 @@
-
 This plugin connects to Google's native Universal Analytics SDK
 Prerequisites:
+
 - A Cordova 3.0+ project for iOS and/or Android
 - A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
\ No newline at end of file
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
diff --git a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
index 42ea1211a02..0e715c64736 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-nearby.readme.md
@@ -1,2 +1 @@
-
 This plugin adds support for the Google Nearby Messages API.
diff --git a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
index e40dfc4db5e..a10f89326aa 100644
--- a/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-google-play-games-services.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin that let's you interact with Google Play Games Services.
diff --git a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
index fb0392b4d72..676268db9d5 100644
--- a/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-gyroscope.readme.md
@@ -1 +1 @@
-Read Gyroscope sensor data
\ No newline at end of file
+Read Gyroscope sensor data
diff --git a/src/translate/native/@awesome-cordova-plugins-hce.readme.md b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
index 9cc2bc1f297..6f496fc37ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-hce.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hce.readme.md
@@ -1,2 +1 @@
-
 HCE Cordova Wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
index ad82eb6b43a..271a47a93b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-header-color.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to change color of header in Android Multitask View
diff --git a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
index dbd72bc8324..466271d3cba 100644
--- a/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health-kit.readme.md
@@ -1,3 +1,2 @@
-
 The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
 Any data saved shows up in the iOS Health app and is available for other iOS apps.
diff --git a/src/translate/native/@awesome-cordova-plugins-health.readme.md b/src/translate/native/@awesome-cordova-plugins-health.readme.md
index 349af915eac..f49780a8921 100644
--- a/src/translate/native/@awesome-cordova-plugins-health.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-health.readme.md
@@ -1,2 +1 @@
-
 A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
diff --git a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
index e49b6cbc6ca..2ba246ebaf0 100644
--- a/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-hotspot.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin for managing Hotspot networks on Android.
 
 Requires Cordova plugin: `cordova-plugin-hotspot`. For more info, please see the [Hotspot plugin docs](https://github.com/hypery2k/cordova-hotspot-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-http.readme.md b/src/translate/native/@awesome-cordova-plugins-http.readme.md
index 40ad52f5a5d..3fcae7e8052 100644
--- a/src/translate/native/@awesome-cordova-plugins-http.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-http.readme.md
@@ -1,7 +1,7 @@
-
 Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
 
 Advantages over Javascript requests:
+
 - SSL / TLS Pinning
 - CORS restrictions do not apply
 - Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
diff --git a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
index 4421569a8f0..14a21342440 100644
--- a/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-httpd.readme.md
@@ -1,2 +1 @@
-
-Embedded httpd for Cordova apps. Light weight HTTP server.
\ No newline at end of file
+Embedded httpd for Cordova apps. Light weight HTTP server.
diff --git a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
index d223513c705..8a8ae830783 100644
--- a/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-iamport-cordova.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin that integrates with and handles multiple payment gateways.
diff --git a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
index ee369f17322..accd867793f 100644
--- a/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ibeacon.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides functions for working with iBeacons.
 
- The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
index 75f3775bff1..8f9c76acd94 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-picker.readme.md
@@ -1,4 +1,3 @@
-
 Cordova Plugin For Multiple Image Selection
 
 Requires Cordova plugin: `cordova-plugin-image-picker`.
diff --git a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
index 40b02d55e6b..88fa3c7bf5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-image-resizer.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin For Image Resize
diff --git a/src/translate/native/@awesome-cordova-plugins-imap.readme.md b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
index f699597a628..e6e57be76e7 100644
--- a/src/translate/native/@awesome-cordova-plugins-imap.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-imap.readme.md
@@ -1,4 +1,3 @@
-
 This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
 This plugin is in Beta version and it offers support only for Android.
 The plugin uses Java Mail API.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
index 87d0037b909..0485062862e 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-browser.readme.md
@@ -1 +1 @@
-Launches in app Browser
\ No newline at end of file
+Launches in app Browser
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
index 5bcd6494c48..b6be39d32c9 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase-2.readme.md
@@ -1,25 +1,24 @@
-
 In-App Purchase on iOS, Android, Windows, macOS and XBox.
 
 ## Features
 
-|  | ios | android | win-8 | win-10/uwp | mac |
-|--|--|--|--|--|--|
-| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
-| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
-| receipt validations | ✅ | ✅ |  | ✅ | ✅ |
-| downloadable content | ✅ |   |   |   | ✅ |
-| introductory prices | ✅ | ✅ |   | ✅ | ✅ |
+|                      | ios | android | win-8 | win-10/uwp | mac |
+| -------------------- | --- | ------- | ----- | ---------- | --- |
+| consumables          | ✅  | ✅      | ✅    | ✅         | ✅  |
+| non consumables      | ✅  | ✅      | ✅    | ✅         | ✅  |
+| subscriptions        | ✅  | ✅      | ✅    | ✅         | ✅  |
+| restore purchases    | ✅  | ✅      | ✅    | ✅         | ✅  |
+| receipt validations  | ✅  | ✅      |       | ✅         | ✅  |
+| downloadable content | ✅  |         |       |            | ✅  |
+| introductory prices  | ✅  | ✅      |       | ✅         | ✅  |
 
 Supports:
 
- - **iOS** version 7.0 or higher.
- - **Android** version 2.2 (API level 8) or higher
-   - with Google Play client version 3.9.16 or higher
- - **Windows** Store/Phone 8.1 or higher
- - **Windows 10 Mobile**
- - **macOS** version 10
- - **Xbox One**
-   - (and any platform supporting Microsoft's UWP)
+- **iOS** version 7.0 or higher.
+- **Android** version 2.2 (API level 8) or higher
+  - with Google Play client version 3.9.16 or higher
+- **Windows** Store/Phone 8.1 or higher
+- **Windows 10 Mobile**
+- **macOS** version 10
+- **Xbox One**
+  - (and any platform supporting Microsoft's UWP)
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
index 5fbffa5c65b..143985e329b 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-purchase.readme.md
@@ -1,2 +1 @@
-
 A lightweight Cordova plugin for in app purchases on iOS/Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
index 32b56cbab41..8e174f56973 100644
--- a/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-in-app-review.readme.md
@@ -1,5 +1,3 @@
-
 This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3
 
 This functionality only works on iOS devices
-
diff --git a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
index 365932222f7..c28c9dcb463 100644
--- a/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-index-app-content.readme.md
@@ -1,4 +1,3 @@
-
 This plugin gives you a Javascript API to interact with Core Spotlight on iOS (=> iOS 9).
 You can add, update and delete items to the spotlight search index.
 Spotlight Search will include these items in the result list. You can deep-link the search results with your app.
diff --git a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
index 77bbacfc378..680fb4b5caa 100644
--- a/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-insomnia.readme.md
@@ -1,2 +1 @@
-
 Prevent the screen of the mobile device from falling asleep.
diff --git a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
index 93b6eee3eb3..685bec69d99 100644
--- a/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intel-security.readme.md
@@ -1,7 +1,7 @@
-
 The App Security API enables the use of security properties and capabilities on the platform, using a new set of API defined for application developers. You are not required to be a security expert to make good use of the API. Key elements, such as encryption of data and establishments of capabilities, is abstracted and done by the API implementation, for you.
 
 For example:
+
 - Use the API to store (E.g. cache) data locally, using the device non-volatile storage. Data protection/encryption will be done for you by the API implementation
 - Establish a connection with remote server (E.g. XHR) using a protected channel. SSL/TLS establishment and usage will be done for you by the API implementation
 
diff --git a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
index 3cecc84de9e..6526cd4d4ff 100644
--- a/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-intercom.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
 Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
diff --git a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
index 6fe62b6c53a..1c68245f996 100644
--- a/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ionic-webview.readme.md
@@ -1,4 +1,3 @@
-
 Access Web View utilities.
 
 Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
diff --git a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
index b8ea2b47c9e..708074a0ab2 100644
--- a/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ios-aswebauthenticationsessapi.readme.md
@@ -1,2 +1 @@
-
 Plugin for iOS 12 ASWebAuthenticationSession API
diff --git a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
index 8a75e4fc94f..03fc8b67cb1 100644
--- a/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-is-debug.readme.md
@@ -1,3 +1,2 @@
-
 Detect if the app is running in debug mode or not.
 Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
diff --git a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-janalytics.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
index 2895fffa54c..ed15dd96b1c 100644
--- a/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jins-meme.readme.md
@@ -1,2 +1 @@
-
 Implementation of the JINS MEME SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
index 9fde9b57805..be8555b753a 100644
--- a/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-jumio.readme.md
@@ -2,4 +2,4 @@ Check out [example with Angular 9.1 & Capacitor 2.1](https://github.com/zendigit
 
 [Platform Customization](https://github.com/Jumio/mobile-cordova#customization) is possible
 
-Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
\ No newline at end of file
+Original source: [Jumio mobile-cordova](https://github.com/Jumio/mobile-cordova) Plugin for Apache Cordova
diff --git a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
index 1ccf061fc98..b86b22652c5 100644
--- a/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keyboard.readme.md
@@ -1,4 +1,3 @@
-
 Keyboard plugin for Cordova.
 
 Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
index cca62d8b43e..d2e63dd18d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain-touch-id.readme.md
@@ -1,3 +1,2 @@
-
 A cordova plugin adding the iOS TouchID / Android fingerprint to your
 app and allowing you to store a password securely in the device keychain.
diff --git a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
index 7764ef64d16..ae817d52f6d 100644
--- a/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-keychain.readme.md
@@ -1,4 +1,3 @@
-
 Get and set data in the iOS Keychain
 
 Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
diff --git a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
index c28100fc7ff..013e0cacbed 100644
--- a/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-kommunicate.readme.md
@@ -1,4 +1,3 @@
-
 The plugin for the Kommunicate SDK.
 With the help of this plugin, you can easily add human + bot chat support functionality to you app.
 Refer to: TODO: insert site link
diff --git a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
index 125e1108746..a272d33f4e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-last-cam.readme.md
@@ -1,3 +1,2 @@
-
 Last Cam is a Camera Preview plugin that allows you to take capture both Videos and images in a
 custom html preview of your choice.
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
index 0306a39d956..105b197495b 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-navigator.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
diff --git a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
index 942352f7056..2f3437ec5c2 100644
--- a/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-launch-review.readme.md
@@ -1,5 +1,4 @@
-
-
 Assists in leaving user reviews/ratings in the App Stores.
+
 - Launches the platform's App Store page for the current app in order for the user to leave a review.
 - On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
diff --git a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
index 6cc5413db8f..fc39816081a 100644
--- a/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-line-login.readme.md
@@ -1,2 +1 @@
-
 The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
diff --git a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
index 2085ded77a8..f6123e51703 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-backup.readme.md
@@ -1,2 +1 @@
-
 This plugin to create local backup
diff --git a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
index 82c183d6fee..6cfdd379643 100644
--- a/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-local-notifications.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to display local notifications on the device
diff --git a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
index 99d60417c8f..ed018edb499 100644
--- a/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-locataccuracy.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
diff --git a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
index 539dbf0c5b4..e67243449ae 100644
--- a/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-lottie-splash-screen.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
index 55292ec8b1b..bead6de72c2 100644
--- a/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-luxand.readme.md
@@ -1,2 +1 @@
-
 This plugin let you integrate Luxand Face SDK into your ionic projects, so you can implement face authentication easily in your application.
diff --git a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
index 9e5778eab23..ca5ec6a2525 100644
--- a/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-magnetometer.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: `cordova-plugin-magnetometer`. For more info, please see the [Device Orientation docs](https://github.com/sdesalas/cordova-plugin-magnetometer).
diff --git a/src/translate/native/@awesome-cordova-plugins-market.readme.md b/src/translate/native/@awesome-cordova-plugins-market.readme.md
index 281c8d456ad..0fa09982e5b 100644
--- a/src/translate/native/@awesome-cordova-plugins-market.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-market.readme.md
@@ -1,2 +1 @@
-
 Opens an app's page in the market place (Google Play, App Store)
diff --git a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
index 92cacd40a12..69b6b0ebf1b 100644
--- a/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media-capture.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides access to the device's audio, image, and video capture capabilities.
 
 Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
diff --git a/src/translate/native/@awesome-cordova-plugins-media.readme.md b/src/translate/native/@awesome-cordova-plugins-media.readme.md
index 9d07585f502..f67d2174eea 100644
--- a/src/translate/native/@awesome-cordova-plugins-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-media.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the ability to record and play back audio files on a device.
diff --git a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
index 13edc56092e..63f05dbf100 100644
--- a/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-metrix.readme.md
@@ -1,4 +1,3 @@
-
 This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
 
 Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
diff --git a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
index 75e25a2c230..f3eb05040cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mixpanel.readme.md
@@ -1,2 +1 @@
-
 Cordova Plugin that wraps Mixpanel SDK for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
index b8584c4e0ae..c159f3801cb 100644
--- a/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mlkit-translate.readme.md
@@ -1,2 +1 @@
-
 Plugin that implements MLKit Translation and Language Identification features.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
index e9f6b965a20..0d06c413e79 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-accessibility.readme.md
@@ -1,3 +1,2 @@
-
 This plugin exposes information on the status of various accessibility features of mobile operating systems, including, for example, whether a screen reader is running, invert colors is enabled, and the preferred scaling for text.
 It also allows an application to send a string to be spoken by the screen reader, or a command to stop the screen reader from speaking.
diff --git a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
index 30c9e83dc6d..d71ef31d811 100644
--- a/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-mobile-messaging.readme.md
@@ -1,4 +1,3 @@
-
 Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
 In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
 This document describes library integration steps for your Cordova project.
diff --git a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
index 72ffec61b13..0390d514207 100644
--- a/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ms-adal.readme.md
@@ -1,5 +1,4 @@
-
 Active Directory Authentication Library (ADAL) plugin.
 Active Directory Authentication Library ([ADAL](https://docs.microsoft.com/en-us/dotnet/api/microsoft.identitymodel.clients.activedirectory?view=azure-dotnet))
 plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of
-Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
\ No newline at end of file
+Windows Server Active Directory and Windows Azure Active Directory. Here you can find the source code for the library.
diff --git a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
index ba01c25cf88..1a4f27e7fd5 100644
--- a/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-multiple-document-picker.readme.md
@@ -1,2 +1 @@
-
 This plugin allows users to pick multiple documents/images at once
diff --git a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
index e5465ae0a91..04fe4a3bf33 100644
--- a/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-music-controls.readme.md
@@ -1,4 +1,3 @@
-
 Music controls for Cordova applications.
 Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
 Handle also headset event (plug, unplug, headset button).
diff --git a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
index b37886b1b59..7bbca215ca4 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-audio.readme.md
@@ -1 +1 @@
-Native Audio Playback
\ No newline at end of file
+Native Audio Playback
diff --git a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
index 3e9b7575290..5468f7f9077 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-geocoder.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for native forward and reverse geocoding
diff --git a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
index cd2d3dab18a..faea3298df2 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-keyboard.readme.md
@@ -1,3 +1 @@
-
 A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
-
diff --git a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
index edd6e9c39ee..266ae69275a 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-page-transitions.readme.md
@@ -1,2 +1 @@
-
 The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
diff --git a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
index 7bcffb8dee4..9a2e0d43722 100644
--- a/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-native-ringtones.readme.md
@@ -1,3 +1,2 @@
-
 The plugin helps get the native ringtones list on Android or IOS devices.
 And you can also use this plugin to play or stop the native ringtones and custom ringtones(added in the www folder).
diff --git a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
index ad0db3ff5c9..4e29c4eeb6a 100644
--- a/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-navigatbar.readme.md
@@ -1,2 +1 @@
-
 The NavigationBar plugin allows you to hide and auto hide the android navigation bar.
diff --git a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
index ab6d1bf9d08..837c7e475a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network-interface.readme.md
@@ -1,2 +1 @@
-
 Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
diff --git a/src/translate/native/@awesome-cordova-plugins-network.readme.md b/src/translate/native/@awesome-cordova-plugins-network.readme.md
index 5ad7357168c..9a5f7a35d4e 100644
--- a/src/translate/native/@awesome-cordova-plugins-network.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-network.readme.md
@@ -1,2 +1 @@
-
 Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
diff --git a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
index 92837035391..a81214659db 100644
--- a/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-nfc.readme.md
@@ -1,7 +1,7 @@
-
 The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
 
 Use to
+
 - read data from NFC tags
 - write data to NFC tags
 - send data to other NFC enabled devices
diff --git a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
index 4e1c4bcb571..9632b1f0155 100644
--- a/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ocr.readme.md
@@ -1,5 +1,4 @@
-
 This plugin attempts to identify and extract text from an image.
 Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
 Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
\ No newline at end of file
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
diff --git a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
index 5ddc2066105..dd7010c8876 100644
--- a/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-onesignal.readme.md
@@ -1,4 +1,3 @@
-
 The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
 OneSignal is a simple implementation for delivering push notifications.
 
@@ -6,11 +5,13 @@ Please view the official [OneSignal Ionic SDK Installation](https://documentatio
 for more information.
 
 #### Icons
+
 If you want to use generated icons with command `ionic cordova resources`:
 
 1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
 
 2. Configure the hook in your config.xml
+
 ```
     <platform name="android">
         <hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
@@ -65,5 +66,4 @@ module.exports = function(context) {
 ```
 
 3. From the root of your project make the file executable:
-`$ chmod +x hooks/copy_android_notification_icons.js`
-
+   `$ chmod +x hooks/copy_android_notification_icons.js`
diff --git a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
index 0be0100f96d..11e9c0ca52c 100644
--- a/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-open-native-settings.readme.md
@@ -1,2 +1 @@
-
-Plugin to open native screens of iOS/android settings
\ No newline at end of file
+Plugin to open native screens of iOS/android settings
diff --git a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
index 077568f6f76..c59128571c6 100644
--- a/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-openalpr.readme.md
@@ -1,2 +1 @@
-
 This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
diff --git a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
index 97823a256c7..4caf38450f4 100644
--- a/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paypal.readme.md
@@ -1,2 +1 @@
-
 PayPal plugin for Cordova/Ionic Applications
diff --git a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
index e45425cee51..4f099e14ed4 100644
--- a/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-paytabs.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use PayTabs's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
index 0b14edafe4a..22692f6e35d 100644
--- a/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pdf-generator.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
diff --git a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
index c6fcd66be8f..81ece364e1f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pedometer.readme.md
@@ -1,3 +1,2 @@
-
 Fetch pedestrian-related pedometer data,
 such as step counts and other information about the distance travelled.
diff --git a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
index dd840c8b485..1510b50b7b6 100644
--- a/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-phonegap-local-notification.readme.md
@@ -1,3 +1,2 @@
-
 The Local Notification plugin gives developers the ability to post notifications from their app that show up in the device’s notification area.
 The API for the local notification plugin follows the W3C Web Notifications specification: https://www.w3.org/TR/notifications/
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
index 1f20587b9e3..77e517bcbd9 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-library.readme.md
@@ -1,4 +1,3 @@
-
 The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
 Saving photos and videos to the library is also supported.
 cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
diff --git a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
index 642ad87c3ba..c4ca80fa312 100644
--- a/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-photo-viewer.readme.md
@@ -1 +1 @@
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
\ No newline at end of file
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
index 6ea7514c5fa..6596e0e430f 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-check.readme.md
@@ -1,4 +1,3 @@
-
 This plugin is for use with Apache Cordova and allows your application to check whether pin/keyguard or passcode is setup on iOS and Android phones.
 
 Requires Cordova plugin: cordova-plugin-pincheck. For more info, please see the [PinCheck plugin docs](https://github.com/ohh2ahh/AppAvailability).
diff --git a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
index 2c12503cd71..d1bb01fec7e 100644
--- a/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pin-dialog.readme.md
@@ -1,6 +1,3 @@
-
 PhoneGap numeric password dialog plugin for Android and iOS.
 
 Requires Cordova plugin: `cordova-plugin-pin-dialog`. For more info, please see the [Pin Dialog plugin docs](https://github.com/Paldom/PinDialog).
-
-
diff --git a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
index fa7a099a33f..9a9cc59bc6c 100644
--- a/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pinterest.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin for Pinterest
diff --git a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
index c42c478d81d..b1cab91f830 100644
--- a/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pollfish.readme.md
@@ -1,2 +1 @@
-
 Pollfish Ionic Native plugin wrapper
diff --git a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
index eaca280cad2..4ed7aff21ca 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-management.readme.md
@@ -1,3 +1,2 @@
-
 The PowerManagement plugin offers access to the devices power-management functionality.
 It should be used for applications which keep running for a long time without any user interaction.
diff --git a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
index 779cd5d6ec2..1985ca44851 100644
--- a/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-power-optimization.readme.md
@@ -1,3 +1,2 @@
-
 Android Custom Roms made sometimes your apps unfunctional due to being killed in the background, notification messages do not appearing or your services being killed by agressive power saving mode.
 The Power Optimization plugin give you android PowerManager methods with cordova.
diff --git a/src/translate/native/@awesome-cordova-plugins-printer.readme.md b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
index 312ac4a9125..5aff311b111 100644
--- a/src/translate/native/@awesome-cordova-plugins-printer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-printer.readme.md
@@ -1 +1 @@
-Prints documents or HTML rendered content
\ No newline at end of file
+Prints documents or HTML rendered content
diff --git a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
index 51bb27361c9..909c2ef0dbb 100644
--- a/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pspdfkit-cordova.readme.md
@@ -1,2 +1 @@
-
 The official plugin to use PSPDFKit with Cordova and Ionic.
diff --git a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
index 7f42a5bcd96..dc1a4fbbb4b 100644
--- a/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-purchases.readme.md
@@ -1,7 +1,7 @@
-
 Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
 
 ## Features
+
 |     | RevenueCat                                                                                                                                                   |
 | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ✅  | Server-side receipt validation                                                                                                                               |
@@ -10,8 +10,8 @@ Purchases is a cross platform solution for managing in-app subscriptions. A back
 | 📊  | Analytics - automatic calculation of metrics like conversion, mrr, and churn                                                                                 |
 | 📝  | [Online documentation](https://docs.revenuecat.com/docs) up to date                                                                                          |
 | 🔀  | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it                           |
-| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                                  |
-| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                           |
+| 💯  | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases)                                                       |
+| 📮  | Great support - [Help Center](https://revenuecat.zendesk.com)                                                                                                |
 | 🤩  | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap)                                                                             |
 
 ## Getting Started
diff --git a/src/translate/native/@awesome-cordova-plugins-push.readme.md b/src/translate/native/@awesome-cordova-plugins-push.readme.md
index 5ae1db23037..a9c3464e985 100644
--- a/src/translate/native/@awesome-cordova-plugins-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 
 Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
diff --git a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
index 464bba08731..e65c6c7edd7 100644
--- a/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-pushape-push.readme.md
@@ -1,4 +1,3 @@
-
 Register and receive push notifications.
 This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
index fcc40802c3d..d9b32939ab5 100644
--- a/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qqsdk.readme.md
@@ -1,4 +1,3 @@
-
 This Plugin is a wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
 
 Requires Cordova plugin: `cordova-plugin-qqsdk`. For more info, please see the [QQSDK plugin docs](https://github.com/iVanPan/Cordova_QQ).
diff --git a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
index 3dcb9304702..55b6fc63435 100644
--- a/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-qr-scanner.readme.md
@@ -1,4 +1,3 @@
-
 A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.
 
 Requires Cordova plugin: `cordova-plugin-qrscanner`. For more info, please see the [QR Scanner plugin docs](https://github.com/bitpay/cordova-plugin-qrscanner).
diff --git a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
index a90b29a29b0..505b461b09c 100644
--- a/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-regula-document-reader.readme.md
@@ -1,2 +1 @@
-
 Plugin for reading and validation of identification documents.
diff --git a/src/translate/native/@awesome-cordova-plugins-restart.readme.md b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
index 13214fabab4..2d13f688d77 100644
--- a/src/translate/native/@awesome-cordova-plugins-restart.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-restart.readme.md
@@ -1,2 +1 @@
-
 This plugin to restart android application
diff --git a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
index 1b4e50f1b68..9f1d179bd5c 100644
--- a/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-rollbar.readme.md
@@ -1,2 +1 @@
-
 This plugin adds [Rollbar](https://rollbar.com/) App monitoring to your application
diff --git a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
index c635a5fd046..6153b43d685 100644
--- a/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-safari-view-controller.readme.md
@@ -1,4 +1,3 @@
-
 For displaying read-only web content.
 
 Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
diff --git a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
index 416c63df2e9..a83e7487c9e 100644
--- a/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screen-orientation.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin to set/lock the screen orientation in a common way.
 
 Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
diff --git a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
index 15c0b85bf5f..e9b365c009a 100644
--- a/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-screenshot.readme.md
@@ -1 +1 @@
-Captures a screen shot
\ No newline at end of file
+Captures a screen shot
diff --git a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
index a4c9c37f0b3..5af0e96163c 100644
--- a/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sensors.readme.md
@@ -1,2 +1 @@
-
 This plugin enables sensors on Android devices
diff --git a/src/translate/native/@awesome-cordova-plugins-serial.readme.md b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
index 125a3910c49..a16c1211a8c 100644
--- a/src/translate/native/@awesome-cordova-plugins-serial.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-serial.readme.md
@@ -1,2 +1 @@
-
 This plugin provides functions for working with Serial connections
diff --git a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
index aca58cc645a..b13d7210b0e 100644
--- a/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-service-discovery.readme.md
@@ -1,2 +1 @@
-
 Simple plugin to get any SSDP / UPnP / DLNA service on a local network
diff --git a/src/translate/native/@awesome-cordova-plugins-shake.readme.md b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
index 5608715c9fa..917873665cf 100644
--- a/src/translate/native/@awesome-cordova-plugins-shake.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shake.readme.md
@@ -1 +1 @@
-Handles shake gesture
\ No newline at end of file
+Handles shake gesture
diff --git a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
index 8ab0b4dd94f..630d79ceeb0 100644
--- a/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shop-checkout.readme.md
@@ -1,3 +1,2 @@
-
 This is a plugin that allows your Ionic app to use ShopChecout for Android.
 Follow the offical documentation to setup this plugin correctly: https://developer.shoptopup.com/docs/shoptopup-for-cordovaphonegap
diff --git a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
index d7fe4d72b94..40b7e9082ef 100644
--- a/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-shortcuts-android.readme.md
@@ -1,4 +1,3 @@
-
 Use this plugin to create shortcuts in Android. Use this plugin to handle Intents on your application.
 For more information on Android App Shortcuts: https://developer.android.com/guide/topics/ui/shortcuts.html
 For more information on Android Intents: https://developer.android.com/guide/components/intents-filters.html
diff --git a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
index e8991e9348b..f02092735e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sign-in-with-apple.readme.md
@@ -1,7 +1,6 @@
-
 Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
 Instead of filling out forms, verifying email addresses, and choosing new passwords,
 they can use Sign in with Apple to set up an account and start using your app right away.
 All accounts are protected with two-factor authentication for superior security,
 and Apple will not track users’ activity in your app or website.
-*Source:* https://developer.apple.com/sign-in-with-apple/
+_Source:_ https://developer.apple.com/sign-in-with-apple/
diff --git a/src/translate/native/@awesome-cordova-plugins-sim.readme.md b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
index 52c91993c93..80e74390f46 100644
--- a/src/translate/native/@awesome-cordova-plugins-sim.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sim.readme.md
@@ -1,4 +1,3 @@
-
 Gets info from the Sim card like the carrier name, mcc, mnc and country code and other system dependent info.
 
 Requires Cordova plugin: `cordova-plugin-sim`. For more info, please see the [Cordova Sim docs](https://github.com/pbakondy/cordova-plugin-sim).
diff --git a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
index e6270053a4a..00c77e7cdfc 100644
--- a/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-siri-shortcuts.readme.md
@@ -1,4 +1,3 @@
-
 This plugin only works when your app is built with XCode 10. Shortcuts will only appear on iOS-versions >= 12.0
 
 This plugin enables the use of Siri shortcuts in Cordova. Siri Shortcuts enable the user to perform certain actions by adding them to Siri.
diff --git a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
index 83f1f737e59..696999e2340 100644
--- a/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-smartlook.readme.md
@@ -1,3 +1,2 @@
-
 Official Smartlook SDK plugin.
 Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
diff --git a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
index eb6aaf6b11c..3af874243f1 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms-retriever.readme.md
@@ -1,2 +1 @@
-
 This plugin retrives the SMS which arrive without requiring READ permissions.
diff --git a/src/translate/native/@awesome-cordova-plugins-sms.readme.md b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
index b0ba3252b25..d64c2f4cab6 100644
--- a/src/translate/native/@awesome-cordova-plugins-sms.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sms.readme.md
@@ -1,3 +1 @@
-
-
 Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
index 760be2d9030..3edd7dba0d1 100644
--- a/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-social-sharing.readme.md
@@ -1,4 +1,3 @@
-
 Share text, files, images, and links via social networks, sms, and email.
 
 For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
diff --git a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
index ccd38016353..efc07916d88 100644
--- a/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speech-recognition.readme.md
@@ -1,2 +1 @@
-
 This plugin does speech recognition using cloud services
diff --git a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
index 8623152c556..5521af0b3b3 100644
--- a/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-speechkit.readme.md
@@ -1,2 +1 @@
-
 Implementation of Nuance SpeechKit SDK on Ionic
diff --git a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
index 66329069921..97f3a5146a5 100644
--- a/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spinner-dialog.readme.md
@@ -1,4 +1,3 @@
-
 Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
 
 Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
diff --git a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
index 31117f45f87..1a5acf29e82 100644
--- a/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-splash-screen.readme.md
@@ -1 +1 @@
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
\ No newline at end of file
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
diff --git a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
index bce7a50dba7..cbc01dcad68 100644
--- a/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-spotify-auth.readme.md
@@ -1,3 +1,3 @@
-
 Cordova plugin for authenticating with Spotify
+
 > https://github.com/Festify/cordova-spotify-oauth
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-db-copy.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
index 92e4d096de7..1f34ca227ed 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite-porter.readme.md
@@ -1,2 +1 @@
-
 This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
diff --git a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
index 0d19359e763..bfb4c960c5d 100644
--- a/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sqlite.readme.md
@@ -1,2 +1 @@
-
 Access SQLite databases on the device.
diff --git a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
index 62c602df45a..4c8d739d81f 100644
--- a/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-ssh-connect.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to make connections and execute commands through SSH
diff --git a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
index 8866094f12f..167ed6673b8 100644
--- a/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-star-prnt.readme.md
@@ -1,2 +1 @@
-
-* Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
diff --git a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
index d2df403f415..0c999e9b7e3 100644
--- a/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-status-bar.readme.md
@@ -1,4 +1,3 @@
-
 Manage the appearance of the native status bar.
 
 Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
diff --git a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
index 918f0320b25..b6a57d237ac 100644
--- a/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stepcounter.readme.md
@@ -1,6 +1,6 @@
-
 Cordova plugin for using device's stepcounter on Android (API > 19)
 
 Use to
+
 - start and stop stepcounter service
 - read device's stepcounter data
diff --git a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
index b093d14b4af..5a521be5eb5 100644
--- a/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-streaming-media.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
diff --git a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
index 32f49f8fb59..2e8f0e8c676 100644
--- a/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-stripe.readme.md
@@ -1,2 +1 @@
-
 A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
index 373fa2e0f42..22c07237113 100644
--- a/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-sum-up.readme.md
@@ -1,2 +1 @@
-
 Plugin to communicate with a SumUp payment terminal
diff --git a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-system-alert-window-permission.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
index 6a1864ed364..4c4cc795164 100644
--- a/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-taptic-engine.readme.md
@@ -1,2 +1 @@
-
 An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
index 577ae87896a..8f1ca44e3ad 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-adidentifier.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
index 80ce9a5af77..2efbb060915 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium-installreferrer.readme.md
@@ -1,3 +1,2 @@
-
 This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
 Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
diff --git a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
index 41e946cfc8e..b53253d0eef 100644
--- a/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-tealium.readme.md
@@ -1,4 +1,3 @@
-
 This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
 
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
\ No newline at end of file
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech-advanced.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
index 56e223f24c3..f98c3983123 100644
--- a/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-text-to-speech.readme.md
@@ -1,2 +1 @@
-
 Text to Speech plugin
diff --git a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
index 032d6ec13cc..cd2ff3ab709 100644
--- a/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-theme-detection.readme.md
@@ -1,2 +1 @@
-
 Cordova plugin to detect whether dark mode is enabled or not
diff --git a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
index 81e3408cc65..40815363667 100644
--- a/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-themeable-browser.readme.md
@@ -1,2 +1 @@
-
 In-app browser that allows styling.
diff --git a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
index a78596064d6..aea7b49108e 100644
--- a/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-three-dee-touch.readme.md
@@ -1,4 +1,3 @@
-
 The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
 
 Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
diff --git a/src/translate/native/@awesome-cordova-plugins-toast.readme.md b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
index c7b5d6c7fba..9034d3ab1f0 100644
--- a/src/translate/native/@awesome-cordova-plugins-toast.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-toast.readme.md
@@ -1,4 +1,3 @@
-
 This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
 
 Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
diff --git a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
index 02615a1ec9f..0bb27885878 100644
--- a/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-touch-id.readme.md
@@ -1,4 +1,3 @@
-
 Scan the fingerprint of a user with the TouchID sensor.
 
 Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
diff --git a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
index 16ead04e0ed..0fd10d23d96 100644
--- a/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-twitter-connect.readme.md
@@ -1,6 +1,6 @@
-
 Plugin to use Twitter Single Sign On
 Uses Twitter's Fabric SDK
+
 ```typescript
 import { TwitterConnect } from '@awesome-cordova-plugins/twitter-connect/ngx';
 
@@ -23,4 +23,4 @@ function onSuccess(response) {
 this.twitter.login().then(onSuccess, onError);
 
 this.twitter.logout().then(onLogoutSuccess, onLogoutError);
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-uid.readme.md b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
index 8876a612197..f1dd7f71fd1 100644
--- a/src/translate/native/@awesome-cordova-plugins-uid.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uid.readme.md
@@ -1,2 +1 @@
-
 Get unique identifiers: UUID, IMEI, IMSI, ICCID and MAC.
diff --git a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
index 1db59244ff9..032854e3607 100644
--- a/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unique-device-id.readme.md
@@ -1,2 +1 @@
-
 This plugin produces a unique, cross-install, app-specific device id.
diff --git a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
index 0b49755a0de..5ec8996425d 100644
--- a/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-unvired-cordova-sdk.readme.md
@@ -1,19 +1,19 @@
+## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+
+## iOS Requirements
 
-This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
--
-iOS Requirements
--
 Update your Cocoapods repo before you install the plugin.
+
 ```
 $ pod repo update
 ```
--
-Browser Requirements
--
-After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
+- Browser Requirements
+- After you install the plugin, for Ionic/Angular projects, please add a reference to the following JS files within <head></head> section of index.html.
+
 ```
 <script src="assets/js/sql.js"></script>
 <script src="assets/js/kernel.js"></script>
 <script src="assets/js/winstore-jscompat.js"></script>
 <script src="assets/js/jquery-3.2.1.js"></script>
-```
\ No newline at end of file
+```
diff --git a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
index 504b3c9eb24..1bf710ddbcc 100644
--- a/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-uptime.readme.md
@@ -1,2 +1 @@
-
 This plugin provides the time spent in milliseconds since boot (uptime).
diff --git a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
index 7066b964568..9870d666496 100644
--- a/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-urbanairship.readme.md
@@ -1,2 +1 @@
-
 This plugin does something
diff --git a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
index 5cf251b3c8e..857e2854746 100644
--- a/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-usabilla-cordova-sdk.readme.md
@@ -1,4 +1,3 @@
-
 Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
 This document describes library integration steps for your Cordova project.
 
diff --git a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
index 9c299395cf9..c5e46b65ea3 100644
--- a/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-user-agent.readme.md
@@ -1,4 +1,3 @@
-
-The UserAgent plugin provides functions to set the HTTP  user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
+The UserAgent plugin provides functions to set the HTTP user-agent header. For more info about User-Agents, please [see the HTTP User-Agent docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).
 
 Requires Cordova plugin: `cordova-useragent`. For more info, please see the [User-Agent plugin docs](https://github.com/LouisT/cordova-useragent).
diff --git a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
index 416be944a54..f52e258035a 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibes.readme.md
@@ -1,2 +1 @@
-
 This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
diff --git a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
index dba5defbdd0..f82e5deb0ab 100644
--- a/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-vibration.readme.md
@@ -1 +1 @@
-Vibrates the device
\ No newline at end of file
+Vibrates the device
diff --git a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
index a22e03f3945..f3e970c9efb 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-capture-plus.readme.md
@@ -1,5 +1,5 @@
-
 This plugin offers some useful extras on top of the default Media Capture Plugin capabilities:
+
 - HD recording.
 - Starting with the front camera.
 - A custom overlay (currently iOS only).
diff --git a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
index 1ee9f14d4a0..e7f3e1b8a0b 100644
--- a/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-video-player.readme.md
@@ -1,4 +1,3 @@
-
 A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
 
 Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
diff --git a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
index 62d0e5158b6..e6bce9df776 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-intent.readme.md
@@ -1,2 +1 @@
-
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
\ No newline at end of file
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
index 562d250d54f..74a4213c286 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to start a local dynamic content web server for android and iOS devices.
diff --git a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
index 732d61641b6..74f478b025e 100644
--- a/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-web-socket-server.readme.md
@@ -1,2 +1 @@
-
 This plugin allows you to run a single, lightweight, barebone WebSocket Server.
diff --git a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
index a2eb7545759..981c27c1eb3 100644
--- a/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-webengage.readme.md
@@ -1,2 +1 @@
-
 Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
diff --git a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
index 639229cba09..b2e43d635c3 100644
--- a/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wechat.readme.md
@@ -1,2 +1 @@
-
 A cordova plugin, a JS version of Wechat SDK
diff --git a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
index e519b6b087f..ca5fcb58975 100644
--- a/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wifi-wizard-2.readme.md
@@ -1,4 +1,3 @@
-
 WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
 
 This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
diff --git a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
index c85ed196728..3fef1483ebd 100644
--- a/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-wonderpush.readme.md
@@ -1,5 +1,3 @@
-
-
 Send unlimited push notifications to iOS and Android devices.
 
 Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
diff --git a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
index 65e5f92754a..17fd2049102 100644
--- a/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-youtube-video-player.readme.md
@@ -1,2 +1 @@
-
 Plays YouTube videos in Native YouTube App
diff --git a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
index 33a16ff46c6..e0a91fda385 100644
--- a/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zbar.readme.md
@@ -1,4 +1,3 @@
-
 The ZBar Scanner Plugin allows you to scan 2d barcodes.
 
 Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
diff --git a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
index 48620c015e9..b6d33465570 100644
--- a/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zeroconf.readme.md
@@ -1,2 +1 @@
-
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
\ No newline at end of file
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
diff --git a/src/translate/native/@awesome-cordova-plugins-zip.readme.md b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
index 8550752032e..6433e0021a7 100644
--- a/src/translate/native/@awesome-cordova-plugins-zip.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zip.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to unzip files in Android and iOS.
diff --git a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
index e358d13434b..94a52e6dc07 100644
--- a/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
+++ b/src/translate/native/@awesome-cordova-plugins-zoom.readme.md
@@ -1,2 +1 @@
-
 A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.

From b217c9b3ba977e18f6073abc42c38e2bfd413126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 24 Aug 2023 10:35:23 +0900
Subject: [PATCH 468/469] translate(docs): translated

---
 docs/api/accordion.md         |  12 ++--
 docs/api/action-sheet.md      |  12 ++--
 docs/api/alert.md             |  12 ++--
 docs/api/button.md            |  12 ++--
 docs/api/datetime-button.md   |   4 +-
 docs/api/datetime.md          |  24 ++++----
 docs/api/input.md             |  24 ++++----
 docs/api/menu.md              |  10 ++--
 docs/api/modal.md             |   4 +-
 docs/api/nav-link.md          |   2 +-
 docs/api/nav.md               |   2 +-
 docs/api/radio-group.md       |   2 +-
 docs/api/radio.md             |   2 +-
 docs/api/range.md             |  34 ++++++------
 docs/api/refresher-content.md |   4 +-
 docs/api/refresher.md         |  30 +++++-----
 docs/api/reorder-group.md     |   4 +-
 docs/api/reorder.md           |  24 ++++----
 docs/api/ripple-effect.md     |  12 ++--
 docs/api/route-redirect.md    |   4 +-
 docs/api/route.md             |   4 +-
 docs/api/router-link.md       |   2 +-
 docs/api/router.md            |   4 +-
 docs/api/row.md               |   6 +-
 docs/api/select.md            | 102 +++++++++++++++++-----------------
 docs/api/spinner.md           |   2 +-
 docs/api/textarea.md          |   8 +--
 docs/api/toast.md             |  24 ++++----
 28 files changed, 193 insertions(+), 193 deletions(-)

diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 481aa63d3be..09c7d993972 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -114,12 +114,12 @@ import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expan
 
 アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
 
-| 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 |
+| Class Name | Description                       |
+| ---------- |-----------------------------------|
+| `.accordion-expanding` | アコーディオンがアクティブに展開しているときに適用されます。    |
+| `.accordion-expanded` | アコーディオンが完全に展開されたときに適用されます。        |
+| `.accordion-collapsing` | アコーディオンがアクティブに折りたたまれているときに適用されます。 |
+| `.accordion-collapsed` | アコーディオンが完全に折りたたまれているときに適用されます。    |
 
 アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。
 
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index d32dd27da3f..d2870b292d0 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -99,15 +99,15 @@ import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-
 
 ### Screen Readers
 
-Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app.
+アクションシートは、スクリーンリーダーにとって [アクセシブル](../reference/glossary#a11y) であるためにariaプロパティを設定しますが、これらのプロパティは、十分な説明になっていなかったり、アクションシートがアプリでどのように使用されているかに合っていなかったりする場合、オーバーライドすることができます。
 
 #### Role
 
-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.
+アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が設定されます。ARIA仕様に合わせるためには、`aria-label`属性か`aria-labelledby`属性のどちらかを設定しなければなりません。
 
-#### Action Sheet Description
+#### Action Sheet の概要
 
-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.
+Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することを強く推奨します。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使って、説明的な`aria-label`を指定するか、カスタムの`aria-labelledby`値を設定することもできます。
 
 <Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
@@ -161,9 +161,9 @@ const actionSheet = await actionSheetController.create({
 
 </Tabs>
 
-#### Action Sheet Buttons Description
+#### Action Sheet Buttons の概要
 
-Buttons containing text will be read by a screen reader. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button.
+テキストを含むボタンはスクリーンリーダーによって読み取られる。ボタンがアイコンのみを含んでいる場合や、既存のテキスト以外の説明が必要な場合は、ボタンの `htmlAttributes` プロパティに `aria-label` を渡して、ラベルをボタンに割り当てる必要があります。
 
 <Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 9f075f3f7a6..db06af13123 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -113,15 +113,15 @@ IonicのAngularアプリを構築する場合、スタイルはグローバル
 
 ### Screen Readers
 
-Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app.
+アラートは、スクリーンリーダーにとって[アクセシブル](../reference/glossary#a11y)であるために、ariaプロパティを設定しますが、これらのプロパティは、十分な説明がない場合、またはアラートがアプリでどのように使用されているかと一致しない場合は、オーバーライドすることができます。
 
 #### Role
 
-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.
+Ionicは自動的にアラートの`role`を、入力やボタンがある場合は[`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)に、何もない場合は[`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)に設定します。
 
-#### Alert Description
+#### Alert の概要
 
-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.
+アラートに `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header` が定義されていない場合、`subHeader` 要素がフォールバックとして使用されます。同様に、 `aria-describedby` 属性が定義されている場合は、自動的に `message` 要素の ID が設定されます。
 
 ARIAの仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。
 
@@ -182,9 +182,9 @@ const alert = await alertController.create({
 </Tabs>
 
 
-All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
+すべてのARIA属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することで、手動で上書きすることができます。
 
-#### Alert Buttons Description
+#### Alert Buttons の概要
 
 Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing `aria-label` to the `htmlAttributes` property on the button.
 
diff --git a/docs/api/button.md b/docs/api/button.md
index 085e629a5aa..50f66a388b4 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -78,25 +78,25 @@ import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.
 
 <CSSProps />
 
-## Accessibility
+## アクセシビリティ
 
-Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides.
+ボタンはアクセスしやすいように作られていますが、その内容によっては調整が必要な場合があります。ボタンコンポーネントは、ネイティブの[button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)をレンダリングし、ネイティブのボタンが提供する機能を利用できるようにします。
 
 ### Overflowing Text Content
 
-There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text.
+ボタンのテキスト・コンテンツがコンテナからはみ出す場合が多々あります。このような場合、すべてのテキストがまだ読めるように、ボタンの内側にテキストを折り返すことをお勧めします。ボタンコンポーネントは、テキストの余分な行を収容するために、その高さを自動的に調整します。
 
-The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release.
+テキストが長すぎて収まらない場合、ボタンテキストは自動的に次の行に折り返されません。テキストを折り返すには、`ion-text-wrap`クラスを追加して、`white-space`プロパティを`"normal"`に設定します。これは将来のメジャーリリースでデフォルトになる予定である。
 
 :::info
-The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width.
+max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。
 :::
 
 import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md';
 
 <TextWrapping />
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
index 4fbf6361ac1..ef67033e12c 100644
--- a/docs/api/datetime-button.md
+++ b/docs/api/datetime-button.md
@@ -59,13 +59,13 @@ TODO
 ## イベント
 <Events />
 
-## Methods
+## メソッド
 <Methods />
 
 ## CSS Shadow Parts
 <Parts />
 
-## CSS Custom Properties
+## CSS カスタムプロパティ
 <CustomProps />
 
 ## Slots
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 22998f8f62a..674c48ff229 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -241,9 +241,9 @@ import Wheel from '@site/static/usage/v7/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.
+`multiple`プロパティが`true`に設定されている場合、カレンダーピッカーから複数の日付を選択することができます。選択した日付をクリックすると選択が解除されます。
 
 :::note
 This property is only supported when using `presentation="date"` and `preferWheel="false"`.
@@ -287,31 +287,31 @@ This property is only supported when using `presentation="date"` and `preferWhee
 
 <CustomizingButtons />
 
-## Highlighting Specific Dates
+## 特定の日付をハイライトする
 
-Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
+`highlightedDates`プロパティを使用すると、開発者は特定の日付をカスタムテキストや背景色でスタイル設定することができます。このプロパティは、日付とその色の配列として定義するか、ISO 文字列を受け取って使用する色を返すコールバックとして定義することができます。
 
-When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
+色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、rgba、[color variables](../theming/colors) などが含まれます。
 
-To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
+一貫したユーザーエクスペリエンスを維持するため、選択された日付のスタイルは常にカスタムハイライトよりも優先されます。
 
 :::note
 This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
 :::
 
-### Using Array
+### 配列を利用
 
-An array is better when the highlights apply to fixed dates, such as due dates.
+ハイライトが期日などの固定された日付に適用される場合は、配列の方が適しています。
 
 <HighlightedDatesArray />
 
-### Using Callback
+### Callbackを利用
 
-A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
+誕生日や定期的なミーティングなど、ハイライトされた日付が繰り返される場合は、コールバックを使用した方がよいでしょう。
 
 <HighlightedDatesCallback />
 
-## Styling
+## スタイリング
 
 ### グローバルテーマ
 
@@ -323,7 +323,7 @@ Ionicの強力なテーマシステムを使用すると、特定のテーマに
 
 ### Wheel Pickers
 
-The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes.
+`ion-datetime`で使用するホイールは、シャドウパーツとCSS変数を組み合わせてスタイルを設定することができます。これは、ホイールスタイルのdatetimeのカラムにも、グリッドスタイルのdatetimeの月/年のピッカーにも適用されます。
 
 <WheelStyling />
 
diff --git a/docs/api/input.md b/docs/api/input.md
index 2c9e5791f98..7ac18ebfea2 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -38,11 +38,11 @@ import Types from '@site/static/usage/v7/input/types/index.md';
 
 ## Labels
 
-Labels should be used to describe the input. They can be used visually, and they will also be read out by screen readers when the user is focused on the input. This makes it easy for the user to understand the intent of the input. Input has several ways to assign a label:
+ラベルは、入力を説明するために使用されるべきです。これらは視覚的に使用することができ、また、ユーザーが入力に集中しているときには、スクリーンリーダーによって読み上げられます。これにより、ユーザーは入力の意図を理解しやすくなる。Inputにはラベルを割り当てる方法がいくつかあります：
 
-- `label` property: used for plaintext labels
-- `label` slot: used for custom HTML labels (experimental)
-- `aria-label`: used to provide a label for screen readers but adds no visible label
+- `label`プロパティ：プレーンテキストのラベルに使用する。
+- `label`スロット: カスタム HTML ラベルに使用する（実験的）。
+- `aria-label`: スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。
 
 ### Label Placement
 
@@ -52,11 +52,11 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md
 
 <LabelPlacement />
 
-### Label Slot (experimental)
+### Label Slot （実験的）
 
-While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+プレーンテキストのラベルは `label` プロパティを通して渡されるべきですが、カスタム HTML が必要な場合は、代わりに `label` スロットを通して渡すことができます。
 
-Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。
 
 import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md';
 
@@ -64,7 +64,7 @@ import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md';
 
 ### No Visible Label
 
-If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers.
+表示するラベルが必要ない場合でも、開発者は `aria-label` を指定する必要があります。
 
 import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md';
 
@@ -118,11 +118,11 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md';
 
 <FilteringData />
 
-## Input Masking
+## 入力マスキング
 
-Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://maskito.dev) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more.
+入力マスキングは、有効な入力値をサポートするように入力を制約する式です。Ionicでは、入力マスキングに[Maskito](https://maskito.dev)を使うことを推奨しています。Maskitoは、入力フィールドをマスクするための軽量で依存関係のないライブラリです。電話番号、クレジットカード、日付など、幅広いマスクをサポートしています。
 
-To get started with Maskito, install the library:
+Maskitoを使い始めるには、ライブラリをインストールしてください：
 
 ```bash
 npm install @maskito/core @maskito/{angular,react,vue}
@@ -138,7 +138,7 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https:
 
 :::
 
-## Theming
+## テーマ
 
 ### Colors
 
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 20902fa474d..90988b203f1 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -49,25 +49,25 @@ import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
 ## Menu Sides
 
-Menus are displayed on the `"start"` side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the `"end"` side, which is the opposite of `"start"`.
+メニューはデフォルトでは`"start"`側に表示されます。左から右へ移動するアプリでは左側に、右から左へ移動するアプリでは右側に表示されます。メニューは`"start"`の反対側である`"end"`側に表示させることもできます。
 
-If menus on both sides are needed in an app, the menu can be opened by passing the `side` value to the `open` method on `MenuController`. If a side is not provided, the menu on the `"start"` side will be opened. See the [multiple menus](#multiple-menus) section below for an example using `MenuController`.
+アプリ内で両サイドのメニューが必要な場合、 `MenuController` の `open` メソッドに `side` の値を渡すことでメニューを開くことができます。sideが指定されない場合は、`"start"`側のメニューが開かれる。MenuController` を使用した例については、下記の [複数メニュー](#multiple-menus) セクションを参照ください。
 
 import Sides from '@site/static/usage/v7/menu/sides/index.md';
 
 <Sides />
 
 
-## Multiple Menus
+## 複数メニュー
 
-When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the `enable` method on the `MenuController`. We can then call `open` on a menu based on its `menuId` or `side`.
+同じサイドに複数のメニューが存在する場合、開きたいメニューを開く前にそのメニューを有効にする必要があります。これは `MenuController` の `enable` メソッドを呼び出すことで行うことができます。次に、メニューの `menuId` または `side` に基づいて `open` を呼び出すことができます。
 
 import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
 
 <Multiple />
 
 
-## Theming
+## テーマ
 
 ### CSS Shadow Parts
 
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 3d826b76943..948cba6e9d1 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -93,11 +93,11 @@ import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/ca
  
 ### 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`.
+開発者は、アプリのメインコンテンツの上にカードが積み重なったようにモーダルが表示されるカードモーダルエフェクトを作成できます。カードモーダルを作成するには、開発者は `ion-modal` に `presentingElement` プロパティを設定する必要があります。
 
 開発者は、アプリのメインコンテンツの上にカードが積み重なったように表示されるカードモーダル効果を作成することができます。カードモーダルを作成するには、開発者は `ion-modal` に `presentingElement` プロパティと `swipeToClose` プロパティを設定する必要があります。
 
-The `canDismiss` property can be used to control whether or not the card modal can be swiped to close.
+`canDismiss` プロパティを使用して、カードモーダルをスワイプして閉じることができるかどうかを制御することができます。
 
 :::note
 The card display style is only available on iOS.
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index aa77af44a39..edbda33fe17 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 これは、ナビゲーションコントローラの `push()`, `pop()`, `setRoot()` メソッドを呼び出すための要素形式となります。
 
-See the [nav](./nav#using-navlink) documentation for more information.
+詳しくは[nav](./nav#using-navlink)のドキュメントを参照ください。
 
 
 ## プロパティ
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 58dfd5e6917..e5cf20444fc 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -22,7 +22,7 @@ Navは、任意のコンポーネントをロードし、スタックに新し
 Router Outletとは異なり、Navは特定のルーターに縛られることはありません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュしても、アプリ全体のルーターには影響しない。例えば、新しいコンポーネントを`ion-nav`にプッシュして、URLが更新されることを期待するべきではありません。これは、アプリのURLに関連付けずに、独自のサブナビゲーションが必要なモーダルがあるような使用例に適しています。
 
 :::note
-`ion-nav` is not meant to be used for routing.  Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects.
+`ion-nav`はルーティングに使用するものではありません。 代わりに、[Angular](../angular/navigation)、[React](../react/navigation)、[Vue](../vue/navigation)、またはバニラJavaScriptプロジェクト用の[`ion-router`](./router)のルーティングガイドを参照してください。
 :::
 
 ## NavLinkを利用する
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index fbafd224ea7..7067c21e608 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md';
 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.
+ラジオ・グループは、[ラジオ](./radio)のグループのためのコンテナです。ラジオグループは、ユーザーがラジオボタンを1つだけ選択できるようにします。ラジオ・グループに属するラジオ・ボタンを1つチェックすると、同じグループ内で以前にチェックされたラジオ・ボタンのチェックは解除されます。ラジオ・グループの使用例については、[radio](./radio)のドキュメントを参照してください。
 
 
 ## Interfaces
diff --git a/docs/api/radio.md b/docs/api/radio.md
index be0be864e63..b8eb1b6c56c 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -46,7 +46,7 @@ import Justify from '@site/static/usage/v7/radio/justify/index.md';
 
 
 :::note
-`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
+`ion-item`は、`justify`がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
 :::
 
 ## ラジオの選択を解除する
diff --git a/docs/api/range.md b/docs/api/range.md
index 44b56216984..f5bcc257260 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -24,15 +24,15 @@ Rangeスライダは、スライダノブを動かして、ユーザーが値の
 
 ## Labels
 
-Labels should be used to describe the range. They can be used visually, and they will also be read out by screen readers when the user is focused on the range. This makes it easy for the user to understand the intent of the range. Range has several ways to assign a label:
+ラベルは、範囲を説明するために使用されるべきです。それらは視覚的に使用することができ、また、ユーザーがRangeをフォーカスしてるときに、スクリーンリーダーによって読み上げられます。これにより、ユーザーは範囲の意図を理解しやすくなります。範囲にはラベルを割り当てるいくつかの方法があります：
 
-- `label` property: used for plaintext labels
-- `label` slot: used for custom HTML labels
-- `aria-label`: used to provide a label for screen readers but adds no visible label
+- `label`プロパティ：プレーンテキストのラベルに使用する。
+- `label`スロット：カスタム HTML ラベルに使用する。
+- `aria-label`: スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。
 
 ### Label Placement
 
-The below demo shows how to use the `labelPlacement` property to change the position of the label relative to the range. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.
+以下のデモでは、`labelPlacement` プロパティを使用して、範囲に対するラベルの位置を変更しています。ここでは `label` プロパティを使用しているが、`labelPlacement` は `label` スロットでも使用できます。
 
 import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
 
@@ -40,7 +40,7 @@ import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';
 
 ### Label Slot
 
-While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+プレーンテキストのラベルは `label` プロパティで渡すべきであるが、カスタムHTMLが必要な場合は、代わりに `label` スロットで渡すことができます。
 
 import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md';
 
@@ -48,7 +48,7 @@ import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md
 
 ### No Visible Label
 
-If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers.
+もし表示するラベルが必要ない場合でも、開発者は`aria-label`を与えるべきです。
 
 import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md';
 
@@ -56,9 +56,9 @@ import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.m
 
 ## Decorations
 
-Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.
+装飾的な要素は、範囲の `start` または `end` スロットに渡すことができます。これは、音量の小さいアイコンや大きいアイコンのようなアイコンを追加するのに便利です。これらの要素は装飾的なものなので、スクリーンリーダーのような支援技術によってアナウンスされるべきではありません。
 
-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.
+ドキュメントの方向性が左から右に設定されている場合、`start`位置にスロットされたコンテンツは範囲の左に表示され、`end`位置にスロットされたコンテンツは範囲の右に表示されます。右から左(rtl)の方向性の場合、`start`位置にスロットされたコンテンツは範囲の右側に表示され、`end`位置にスロットされたコンテンツは範囲の左側に表示されます。
 
 import DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md';
 
@@ -128,17 +128,17 @@ import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index
 
 <CSSParts />
 
-## Migrating from Legacy Range Syntax
+## レガシーな範囲構文からの移行
 
-A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an range, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルな範囲構文が導入されました。この新しい構文は、範囲を設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者はこの移行を範囲ごとに実行できます。開発者は従来の構文を使い続けることもできますが、できるだけ早く移行することをお勧めします。
 
 ### 最新の構文の使い方
 
-Using the modern syntax involves removing the `ion-label` and passing the label to `ion-range` using the `label` property. The placement of the label can be configured using the `labelPlacement` property.
+最新の構文を使用するには、`ion-label` を削除し、`label` プロパティを使用して `ion-range` にラベルを渡します。ラベルの配置は `labelPlacement` プロパティを使用して設定することができます。
 
-If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead.
+ラベルにカスタム HTML が必要な場合は、代わりに `label` スロットを使用して `ion-range` 内に直接渡すことができる。
 
 import Migration from '@site/static/usage/v7/range/migration/index.md';
 
@@ -146,12 +146,12 @@ import Migration from '@site/static/usage/v7/range/migration/index.md';
 
 
 :::note
-In past versions of Ionic, `ion-item` was required for `ion-range` to function properly. Starting in Ionic 7.0, `ion-range` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-range` to function properly.
+Ionic の過去のバージョンでは、`ion-range` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 以降では、`ion-range` は `ion-item` 内でアイテムを `ion-list` に配置する場合にのみ使用します。また、`ion-range` が正しく機能するためには、`ion-item` は不要になりました。
 :::
 
-### Using the Legacy Syntax
+### レガシー構文の使用
 
-Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-range` to `true` to force that instance of the range to use the legacy syntax.
+Ionicは、アプリが最新の範囲構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けた方が望ましいこともあります。開発者は `ion-range` の `legacy` プロパティを `true` に設定することで、そのインスタンスにレガシー構文を使用させることができます。
 
 
 ## Interfaces
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 34f009ee313..b0b01549535 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -11,9 +11,9 @@ import Slots from '@ionic-internal/component-api/v7/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.
+リフレッシュコンテンツには、プルトゥリフレッシュ時に表示するテキスト、アイコン、スピナーが含まれます。Ionicは、プラットフォームに基づいて、プルアイコンとリフレッシュスピナーを表示します。ただし、デフォルトのアイコン、スピナー、テキストは、リフレッシュの状態に応じてカスタマイズできます。
 
-For usage examples, see the [Refresher](/docs/api/refresher) documentation.
+使用例については、[Refresher](/docs/api/refresher)ドキュメントを参照してください。
 
 
 ## プロパティ
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 964a079d6cd..4b7c3541282 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -16,9 +16,9 @@ import Slots from '@ionic-internal/component-api/v7/refresher/slots.md';
 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.
+リフレッシャーは、コンテンツコンポーネントにプルトゥリフレッシュ機能を提供します。pull-to-refreshパターンは、ユーザがより多くのデータを取得するために、データのリストをプルダウンすることを可能にします。
 
-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.
+データは、リフレッシャーの出力イベント中に変更する必要があります。非同期処理が完了し、リフレッシュが終了したら、リフレッシュに対して `complete()` を呼び出す必要があります。
 
 
 ## 基本的な使い方
@@ -28,22 +28,22 @@ import Basic from '@site/static/usage/v7/refresher/basic/index.md';
 <Basic />
 
 
-## Pull Properties
+## Pull プロパティ
 
-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.
+リフレッシャーには、引くジェスチャーをカスタマイズするためのプロパティがいくつかあります。 `pullFactor` プロパティを設定すると引っ張るスピードを、`pullMin` プロパティを設定するとユーザが引っ張る最小距離を、`pullMax` プロパティを設定するとリフレッシャーが `refreshing` 状態になる前にユーザが引っ張る最大距離を変更することができます。
 
-These properties do not apply when the [native refresher](#native-refreshers) is enabled.
+これらのプロパティは、[native refresher](#native-refreshers)が有効な場合には適用されません。
 
 import PullProperties from '@site/static/usage/v7/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`.
+デフォルトのアイコン、スピナー、テキストは、リフレッシャーの状態が `pulling` か `refreshing` かによって、[リフレッシャーコンテンツ](./refresher-content) 上でカスタマイズすることができます。
 
-Setting `pullingIcon` will disable the [native refresher](#native-refreshers).
+`pullingIcon`を設定すると、[native refresher](#native-refreshers)が無効になります。
 
 import CustomContent from '@site/static/usage/v7/refresher/custom-content/index.md';
 
@@ -52,15 +52,15 @@ import CustomContent from '@site/static/usage/v7/refresher/custom-content/index.
 
 ## 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.
+iOSとAndroidの両プラットフォームは、pull-to-refreshにネイティブのような流動的な感覚を与えるために、それぞれのデバイスが公開するプロパティを使用するリフレッシュ機能を提供します。
 
-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.
+iOSとMaterial Designのネイティブリフレッシュ機能は、Ionicのデフォルトで有効になっています。ただし、iOSネイティブのリフレッシュ機能は、正しく動作するためにラバーバンドスクロールに依存しており、結果としてiOSデバイスとのみ互換性があります。ラバーバンドスクロールをサポートしていないデバイスでiOSモードで動作するアプリのために、フォールバックリフレッシャーを提供しています。
 
-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.
+ネイティブのリフレッシャーでは、マテリアルデザイン用の `circular` スピナーを使用しますが、iOS では `lines` スピナーを使用します。iOSでは、ティックマークはページが下に引っ張られるにつれて徐々に表示されます。
 
-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.
+[Pullプロパティ](#pull-properties)、`closeDuration`、`snapbackDuration`のような特定のリフレッシャープロパティは、ネイティブリフレッシャーの多くがスクロールベースであるため、互換性がありません。サポートされていないプロパティの詳細については、[Properties](#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.
+[リフレッシュコンテンツ](#custom-refresher-content)の `pullingIcon` を任意のアイコンまたはスピナーに設定することで、ネイティブリフレッシュモードを無効にすることができます。使用可能な値については、[Ionicons](https://ionic.io/ionicons) および [Spinner](./spinner) のドキュメントを参照してください。
 
 
 ## Usage with Virtual Scroll
@@ -72,9 +72,9 @@ import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-ta
 <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/v7/refresher/advanced/index.md';
 
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index 486ee7cd232..3187f87e366 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -16,9 +16,9 @@ import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
 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.
+reorder groupは、[reorder](./reorder) コンポーネントを使用したアイテムのコンテナです。ユーザがアイテムをドラッグして新しい位置にドロップすると、 `ionItemReorder` イベントがディスパッチされる。このイベントのハンドラは `complete` メソッドを呼び出すように実装する必要があります。
 
-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.
+`ionItemReorder` イベントの `detail` プロパティには、`from` と `to` インデックスを含む、並べ替え操作に関するすべての関連情報が含まれます。並び替えのコンテキストでは、アイテムは `from` インデックスから `to` インデックスに移動します。reorder groupの使用例については、[reorder](./reorder) のドキュメントを参照してください。
 
 
 ## Interfaces
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 84708026de5..c87ed1c449f 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -18,23 +18,23 @@ 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.
+Reorderは、アイテムのグループ内での順序を変更するためにアイテムをドラッグできるようにするコンポーネントです。視覚的なドラッグ＆ドロップのインターフェイスを提供するために、[reorder group](./reorder-group)内で使用されなければなりません。
 
-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.
+Reorderはアイテムをドラッグ＆ドロップするためのアンカーです。reorderが完了すると、reorder groupから `ionItemReorder` イベントがdispatchされ、`complete` メソッドを呼び出す必要があります。
 
 
 ## 基本的な使い方
 
-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.
+Reorderの最も基本的な例は、アイテムの中にスロットを入れることです。デフォルトでは、reorder groupのreorder機能は無効になっています。reorder groupの `disabled` プロパティを `false` に設定することで有効にすることができます。Reorderアイコンを使ってアイテムをドラッグ＆ドロップし、並び替えることができます。
 
 import Basic from '@site/static/usage/v7/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.
+場合によっては、並べ替えの機能を切り替えるオプションが欲しいかもしれない。これは、関数や変数に基づいて `disabled` プロパティをリアクティブにすることで実現できます。
 
 import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/index.md';
 
@@ -43,7 +43,7 @@ import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/in
 
 ## 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.
+Reorderコンポーネントは、iOSでは3行、Material Designでは2行のReorderアイコンを使用しています。これは、利用可能なIoniconのいずれかを使って、Reorderの中に[Icon](https://ionic.io/ionicons)コンポーネントを追加することでカスタマイズできます。
 
 import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md';
 
@@ -52,27 +52,27 @@ import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md';
 
 ## 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/v7/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.
+パラメータを指定せずに reorder グループに対して `complete` メソッドを呼び出すと、DOM ノードが並べ替えられます。項目がソートが必要なデータの配列からレンダリングされた場合、データと DOM が同期しないことがあります。並べ替えの完了時に配列をソートするには、`complete` メソッドのパラメータとして配列を渡す必要があります。 `complete`メソッドは配列をソートして返し、再代入できるようにしてください。
 
-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.
+場合によっては、アプリが独自に配列と DOM ノードの両方を並べ替える必要があるかもしれません。その場合は `complete` メソッドに `false` をパラメータとして渡す必要があります。これにより、Ionicはreorder group内のDOMノードの並び替えを行わないようになります。
 
 import UpdatingData from '@site/static/usage/v7/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.
+Reorderを正しく動作させるには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを指定する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
 
 import CustomScrollTarget from '@site/static/usage/v7/reorder/custom-scroll-target/index.md';
 
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 2fc078cd725..1499017e7e1 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -18,9 +18,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <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.
+ripple effectコンポーネントは、[Material Design ink ripple interaction effect](https://material.io/develop/web/supporting/ripple)を追加します。このコンポーネントは `<ion-app>` の内部でのみ使用でき、任意の要素の内部に追加できます。
 
-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.
+親要素に [relative position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) を設定することが重要です。波紋エフェクトはabsolute positionであり、相対位置決めされた最も近い親要素をカバーするからです。また、親要素には `ion-activatable` クラスを設定します。これは、波及効果にその要素がクリック可能であることを伝えるものです。波紋がコンテナからはみ出す場合は、親要素に `overflow: hidden` を追加することを推奨します。
 
 
 ## 基本的な使い方
@@ -30,18 +30,18 @@ import Basic from '@site/static/usage/v7/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"`.
+リップル効果には2つのタイプがある： `"bounded"` と `"unbounded"` です。デフォルトのタイプである `"bounded"` は、クリック位置から外側に波及効果を広げます。常に要素の中心から始まり、円形に広がる波及効果を追加するには、タイプを `"unbounded"` に設定します。
 
 import Type from '@site/static/usage/v7/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.
+リップルはCSSで別の色にカスタマイズできます。デフォルトでは、波紋の色はテキストの色を継承するように設定されています。これはCSSの `color` を親または波紋エフェクト自体に設定することで変更できます。
 
 import Customizing from '@site/static/usage/v7/ripple-effect/customizing/index.md';
 
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index 61a0f73e548..088f25aef84 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -17,10 +17,10 @@ import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-A route redirect can only be used with an `ion-router` as a direct child of it.
+ルートリダイレクトは `ion-router` を直接の子としてのみ使うことができます。
 
 :::note
- Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+ Note: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
 :::
 
 
diff --git a/docs/api/route.md b/docs/api/route.md
index 56733f9c66e..a46bbf02104 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -19,10 +19,10 @@ import Slots from '@ionic-internal/component-api/v7/route/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-The route component takes a component and renders it when the Browser URL matches the url property.
+ルートコンポーネントはコンポーネントを受け取り、ブラウザの URL が url プロパティと一致したときに、そのコンポーネントをレンダリングします。
 
 :::note
- Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+ Note: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
 :::
 
 
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index 982c1b9e36f..f10eed0f772 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 router linkコンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、hrefで場所を、directionで遷移のアニメーションを指定することができます。
 
 :::note
- Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
+ Note: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
 :::
 
 See the [Router](./router) documentation for more information.
diff --git a/docs/api/router.md b/docs/api/router.md
index a5bcc2d1923..9bae0ccfb02 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -18,10 +18,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
 
-The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
+ルーターは、vanilla と Stencil での JavaScriptプロジェクト内でルーティングを処理するためのコンポーネントです。
 
 :::note
- Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
+注意: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。フレームワーク固有のルーティングソリューションについては、[Angular](../angular/navigation)、[React](../react/navigation)、[Vue](../vue/navigation)のルーティングガイドを参照してください。
 :::
 
 
diff --git a/docs/api/row.md b/docs/api/row.md
index 16905fd7c54..bf88ba882c7 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -17,10 +17,10 @@ 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.
+Rowは[Grid](./grid)システムの水平方向の構成要素で、さまざまな数の
+[columns](./col)を含む。列が適切に配置されるようにします。
 
-See the [grid](./grid) documentation for more information.
+詳しくは[grid](./grid)のドキュメントを参照してください。
 
 
 ## Row Alignment
diff --git a/docs/api/select.md b/docs/api/select.md
index dbccd8cdea7..8a0481b899e 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -26,17 +26,17 @@ selectは、子要素 `<ion-select-option>` とともに使用する必要があ
 
 ## Labels
 
-Labels should be used to describe the select. They can be used visually, and they will also be read out by screen readers when the user is focused on the select. This makes it easy for the user to understand the intent of the select. Select has several ways to assign a label:
+ラベルは、Selectを説明するために使用します。これらは視覚的に使用することができ、また、ユーザーがSelectにフォーカスしているときには、スクリーンリーダーによって読み上げられます。これにより、ユーザーはSelectの意図を理解しやすくなります。セレクトには、ラベルを割り当てるいくつかの方法があります：
 
-Select has several options for supplying a label for the component:
+セレクトには、コンポーネントにラベルを指定するためのいくつかのオプションがあります：
 
-- `label` property: used for plaintext labels
-- `label` slot: used for custom HTML labels
-- `aria-label`: used to provide a label for screen readers but adds no visible label
+- `label`プロパティ：プレーンテキストのラベルに使用します。
+- `label`スロット：カスタム HTML ラベルに使用する。
+- `aria-label`：スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。
 
 ### Label Placement
 
-Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.
+ラベルはデフォルトではコンテンツの幅を占めます。開発者は `labelPlacement` プロパティを使用して、コントロールに対するラベルの配置を制御することができます。ここでは `label` プロパティを使用しているが、`labelPlacement` は `label` スロットと一緒に使用することもできます。
 
 import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
 
@@ -44,7 +44,7 @@ import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.m
 
 ### Label Slot
 
-While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+プレーンテキストのラベルは `label` プロパティで渡すべきですが、カスタムHTMLが必要な場合は、代わりに `label` スロットで渡すことができます。
 
 import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
 
@@ -52,7 +52,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
 
 ### No Visible Label
 
-If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers.
+表示するラベルが必要ない場合でも、開発者は`aria-label`を指定する必要があります
 
 import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';
 
@@ -82,29 +82,29 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde
 
 <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 or popover 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.
+Select に `multiple` 属性を追加することで、ユーザは複数のオプションを選択することができます。複数のオプションが選択可能な場合、アラートまたはポップオーバーオーバーレイは、チェックボックススタイルのオプションリストをユーザに提示します。Select コンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。
 
-Note: the `action-sheet` interface will not work with multiple selection.
+注意: `action-sheet` インターフェースは複数選択では動作しません。
 
 import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
 
 <MultipleSelectionExample />
 
-## 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.
+Select とユーザのインタラクションを処理する主な方法は、 `ionChange` イベント、 `ionDismiss` イベント、 `ionCancel` イベントです。これらのイベントやselectが発生するその他のイベントの詳細については、[Events](#events)を参照してください。
 
 import RespondingToInteractionExample from '@site/static/usage/v7/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.
+Selectの値にオブジェクトを使用する場合、Selectの値のidentityはそのままで、サーバやデータベースから取得したオブジェクトのidentityが変わってしまうことがあります。例えば、希望するオブジェクト値を持つ既存のレコードがSelectに読み込まれたが、新しく取得されたselectオプションのIDが異なる場合、このようなことが起こりえます。その結果、Selectは、元のSelectがそのまま残っているにもかかわらず、全く値がないように見えることになります。
 
-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.
+デフォルトでは、Selectはオブジェクトの等質性(`===`)を使用してオプションが選択されているかどうかを判断します。これは `compareWith` プロパティにプロパティ名または関数を指定することでオーバーライドすることができます。
 
 ### Using compareWith
 
@@ -128,9 +128,9 @@ import JustifyExample from '@site/static/usage/v7/select/justify/index.md';
 
 ## Filled Selects
 
-Material Design offers filled styles for a select. The `fill` property on the select can be set to either `"solid"` or `"outline"`.
+Material DesignはセレクトにFilledスタイルを提供します。select の `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定できます。
 
-Since the `fill` styles visually defines the select container, selects that use `fill` should not be used in `ion-item`.
+`fill` スタイルはセレクトコンテナを視覚的に定義するので、`fill` を使用するセレクトは `ion-item` では使用しないでください。
 
 import FillExample from '@site/static/usage/v7/select/fill/index.md';
 
@@ -138,63 +138,63 @@ import FillExample from '@site/static/usage/v7/select/fill/index.md';
 
 ## Select Buttons
 
-The alert supports two buttons: `Cancel` and `OK`. Each button's text can be customized using the `cancelText` and `okText` properties.
+アラートは `Cancel` と `OK` の2つのボタンをサポートしている。それぞれのボタンのテキストは `cancelText` と `okText` プロパティを使ってカスタマイズすることができます。
 
-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.
+`action-sheet` と `popover` インターフェースには `OK` ボタンがありません。オプションのいずれかをクリックすると自動的にオーバーレイが閉じ、その値が選択されます。 `popover` インターフェースには `Cancel` ボタンがなく、背景をクリックするとオーバーレイが閉じます。
 
 import ButtonTextExample from '@site/static/usage/v7/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.
+Selectはalert、action sheet、popoverインタフェースを使用するので、`interfaceOptions`プロパティを通してこれらのコンポーネントにオプションを渡すことができます。これを使用して、カスタムヘッダ、サブヘッダ、CSS クラスなどを渡すことができます。
 
-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.
+各インタフェースが受け付けるプロパティについては、[ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md) を参照してください。
 
-Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+注意: `alert` インターフェイスでは、`interfaceOptions` は `inputs` や `buttons` を上書きしません。
 
 import InterfaceOptionsExample from '@site/static/usage/v7/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.
+Selectコンポーネントには2つのユニットがあり、それぞれ別々にスタイルを設定する必要があります。 `ion-select`要素は、ビュー上で選択された値、ない場合はプレースホルダ、ドロップダウンのアイコンによって表現されます。インターフェイスは上記の[インターフェイス](#interfaces)セクションで定義されており、`ion-select`をクリックしたときに開くダイアログです。インターフェイスには `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。以下のセクションでは、これらのスタイリングの違いについて説明します。
 
-### Styling Select Element
+### Select要素のスタイリング
 
-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).
+前述の通り、`ion-select`要素は値、プレースホルダ、ビューに表示されるアイコンのみで構成されています。これをカスタマイズするには、CSSと[CSSカスタムプロパティ](#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.
+また、必要な[ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part)によっては、CSSのシャドウパーツを使用してセレクトのスタイルを設定することもできます。 `part` を使用することで、要素上の任意の CSS プロパティを対象とすることができることに注意してください。
 
 import StylingSelectExample from '@site/static/usage/v7/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.
+しかし、セレクト・オプションは、スタイルを簡単にするためにクラスを設定し、オーバーレイ・オプションにクラスを渡すことができます。オプションをカスタマイズする使用例については、[セレクト・オプションのドキュメント](select-option.md)を参照してください。
 
 ### Custom Toggle Icons
 
-The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `expandedIcon` properties.
+選択テキストの隣に表示されるアイコンは、`toggleIcon` プロパティと `expandedIcon` プロパティを使用して、任意の [Ionicon](https://ionic.io/ionicons) に設定することができます。
 
 import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md';
 
 <CustomToggleIconsExample />
 
-### Icon Flip Behavior
+### アイコンの反転動作
 
-By default, when the select is open, the toggle icon will automatically rotate on `md` mode and remain static on `ios` mode. This behavior can be customized using CSS.
+デフォルトでは、セレクトを開いているとき、トグルアイコンは `md` モードでは自動的に回転し、`ios` モードでは静止します。この動作はCSSを使ってカスタマイズすることができます。
 
-The below example also uses a [custom `toggleIcon`](#custom-toggle-icons) to better demonstrate the flip behavior on `ios`, since the default icon is vertically symmetrical.
+以下の例では[custom `toggleIcon`](#custom-toggle-icons)を使って、`ios`モードでのトグルアイコンの反転動作をより分かりやすく説明しています。
 
 import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md';
 
@@ -202,7 +202,7 @@ import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/
 
 ## Typeahead Component
 
-Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
+Typeaheadまたはオートコンプリート機能は、既存のIonicコンポーネントを使用して構築できます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。
 
 import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md';
 
@@ -220,7 +220,7 @@ interface SelectChangeEventDetail<T = any> {
 
 ### 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.
+必須ではありませんが、このインターフェイスを `CustomEvent` インターフェイスの代わりに使用することで、このコンポーネントから発行される Ionic イベントをより強力に片付けすることができます。
 
 ```typescript
 interface SelectCustomEvent<T = any> extends CustomEvent {
@@ -229,41 +229,41 @@ interface SelectCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## Migrating from Legacy Select Syntax
+## 従来のセレクト構文からの移行
 
-A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.
+Ionic 7.0では、よりシンプルなセレクト構文が導入されました。この新しい構文は、セレクトのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
 
-Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
+開発者はこの移行をセレクトごとに行うことができます。開発者は従来の構文を使い続けることもできますが、できるだけ早く移行することをお勧めします。
 
 
-### Using the Modern Syntax
+### 最新構文の使用
 
-Using the modern syntax involves two steps:
+最新の構文を使用するには、2つのステップがあります：
 
-1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`.
-2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`.
+1. 1. `ion-label` を削除し、代わりに `ion-select` の `label` プロパティを使用する。ラベルの配置は `ion-select` の `labelPlacement` プロパティで設定できる。
+2. fill` と `shape` を `ion-item` から `ion-select` に移動する。
 
 import Migration from '@site/static/usage/v7/select/migration/index.md';
 
 <Migration />
 
-### Using the Legacy Syntax
+### レガシー構文の使用
 
-Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax.
+Ionicは、アプリがモダンなセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けた方が望ましいこともあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、その入力インスタンスにレガシー構文を使用させることができます。
 
-## Properties
+## プロパティ
 <Props />
 
-## Events
+## イベント
 <Events />
 
-## Methods
+## メソッド
 <Methods />
 
 ## CSS Shadow Parts
 <Parts />
 
-## CSS Custom Properties
+## CSS カスタムプロパティ
 <CustomProps />
 
 ## Slots
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index dbd67822878..f4888b3d60f 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -45,7 +45,7 @@ import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md';
 
 <Resizing />
 
-### CSS Custom Properties
+### CSS カスタムプロパティ
 
 import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 54d2823e6bc..efd9cae7b36 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -45,11 +45,11 @@ import LabelPlacement from '@site/static/usage/v7/textarea/label-placement/index
 
 <LabelPlacement />
 
-### Label Slot (experimental)
+### Label Slot (実験的)
 
-While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+プレーンテキストのラベルは `label` プロパティを通して渡されるべきですが、カスタム HTML が必要な場合は、代わりに `label` スロットを通して渡すことができます。
 
-Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。
 
 import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md';
 
@@ -57,7 +57,7 @@ import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md';
 
 ### No Visible Label
 
-If no visible label is needed, developers should still supply an `aria-label` so the textarea is accessible to screen readers.
+ラベルの表示が必要ない場合でも、開発者は`aria-label`を指定して、textareaがスクリーンリーダーにアクセスできるようにすべきです。
 
 import NoVisibleLabel from '@site/static/usage/v7/textarea/no-visible-label/index.md';
 
diff --git a/docs/api/toast.md b/docs/api/toast.md
index 7544aa9ae9b..c2522d81379 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -86,27 +86,27 @@ import ThemingPlayground from '@site/static/usage/v7/toast/theming/index.md';
 
 <ThemingPlayground />
 
-## 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
+### スクリーンリーダー
 
-Toasts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app.
+トーストは、スクリーンリーダーから[accessible](../reference/glossary#a11y)であるためにariaプロパティを設定しますが、これらのプロパティは、十分な説明がない場合や、トーストがアプリでどのように使用されているかに合っていない場合は、上書きすることができます。
 
-#### Role
+#### 役割
 
-`ion-toast` has `role="status"` and `aria-live="polite"` set on the inner `.toast-content` element. This causes screen readers to only announce the toast message and header. Buttons and icons will not be announced when the toast is presented.
+`ion-toast`は、内側の `.toast-content` 要素に `role="status"` と `aria-live="polite"` を設定している。これにより、スクリーンリーダーはトーストメッセージとヘッダーのみをアナウンスします。ボタンとアイコンは、トーストが表示されてもアナウンスされません。
 
-`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 should not interrupt the current task.
+`aria-live`は、トーストの内容が更新されたときに、スクリーンリーダーにトーストの内容をアナウンスさせます。しかし、この属性は `'polite'` に設定されているので、スクリーンリーダーは現在のタスクを中断すべきではありません。
 
-Since toasts are intended to be subtle notification, `aria-live` should never be set to `"assertive"`. If developers need to interrupt the user with an important message, we recommend using an [alert](./alert).
+トーストはさりげなく通知することを意図しているので、`aria-live`を`"assertive"`に設定すべきではありません。開発者が重要なメッセージでユーザーを中断させる必要がある場合は、[alert](./alert)を使用することをお勧めします。
 
-#### Toast Buttons Description
+#### トーストボタンの説明
 
-Buttons containing text will be read by a screen reader when they are interacted with. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button.
+テキストを含むボタンは、スクリーンリーダーによって読み取られます。ボタンがアイコンのみを含んでいる場合、または既存のテキスト以外の説明が必要な場合は、ボタンの `htmlAttributes` プロパティに `aria-label` を渡すことで、ボタンにラベルを割り当てる必要があります。
 
 <Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
 
@@ -233,7 +233,7 @@ interface ToastOptions {
 }
 ```
 
-## Properties
+## プロパティ
 <Props />
 
 ## イベント

From e899a5274c841dc73010ebef3af843532f939e76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=8A=E5=8E=9F=E6=98=8C=E5=BD=A6?=
 <sakakibara@rdlabo.jp>
Date: Thu, 24 Aug 2023 10:40:47 +0900
Subject: [PATCH 469/469] fmt

---
 scripts/data/translated-api.json   | 6962 +++++++++++++++++++++++++++-
 scripts/data/translated-cache.json |   45 +-
 scripts/data/translated-cli.json   |  186 +-
 3 files changed, 7061 insertions(+), 132 deletions(-)

diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 1514c23d2ae..a7311de12f4 100644
--- a/scripts/data/translated-api.json
+++ b/scripts/data/translated-api.json
@@ -3,7 +3,7 @@
   "timeout": 0,
   "components": [
     {
-      "filePath": "./src/components/accordion-group/accordion-group.tsx",
+      "filePath": "src/components/accordion-group/accordion-group.tsx",
       "encapsulation": "shadow",
       "tag": "ion-accordion-group",
       "docs": "",
@@ -18,6 +18,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -35,6 +40,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -52,6 +62,11 @@
         {
           "name": "expand",
           "type": "\"compact\" | \"inset\"",
+          "complexType": {
+            "original": "'compact' | 'inset'",
+            "resolved": "\"compact\" | \"inset\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": false,
@@ -95,6 +110,11 @@
         {
           "name": "multiple",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
@@ -114,6 +134,11 @@
         {
           "name": "readonly",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
@@ -131,6 +156,11 @@
         {
           "name": "value",
           "type": "null | string | string[] | undefined",
+          "complexType": {
+            "original": "string | string[] | null",
+            "resolved": "null | string | string[] | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -160,6 +190,17 @@
           "event": "ionChange",
           "detail": "AccordionGroupChangeEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "AccordionGroupChangeEventDetail",
+            "resolved": "AccordionGroupChangeEventDetail<any>",
+            "references": {
+              "AccordionGroupChangeEventDetail": {
+                "location": "import",
+                "path": "./accordion-group-interface",
+                "id": "src/components/accordion-group/accordion-group-interface.ts::AccordionGroupChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "クリックなどのユーザー操作により、valueプロパティが変化したときに発生します。プログラムによってvalueプロパティを設定した場合は、このイベントは発生しません。",
@@ -181,7 +222,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/accordion/accordion.tsx",
+      "filePath": "src/components/accordion/accordion.tsx",
       "encapsulation": "shadow",
       "tag": "ion-accordion",
       "docs": "",
@@ -216,6 +257,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -254,6 +300,11 @@
         {
           "name": "readonly",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
@@ -271,6 +322,11 @@
         {
           "name": "toggleIcon",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "toggle-icon",
           "reflectToAttr": false,
@@ -288,6 +344,11 @@
         {
           "name": "toggleIconSlot",
           "type": "\"end\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end'",
+            "resolved": "\"end\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "toggle-icon-slot",
           "reflectToAttr": false,
@@ -310,6 +371,11 @@
         {
           "name": "value",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
@@ -364,7 +430,7 @@
       }
     },
     {
-      "filePath": "./src/components/action-sheet/action-sheet.tsx",
+      "filePath": "src/components/action-sheet/action-sheet.tsx",
       "encapsulation": "scoped",
       "tag": "ion-action-sheet",
       "docs": "",
@@ -379,6 +445,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -396,6 +467,11 @@
         {
           "name": "backdropDismiss",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
@@ -413,6 +489,17 @@
         {
           "name": "buttons",
           "type": "(string | ActionSheetButton<any>)[]",
+          "complexType": {
+            "original": "(ActionSheetButton | string)[]",
+            "resolved": "(string | ActionSheetButton<any>)[]",
+            "references": {
+              "ActionSheetButton": {
+                "location": "import",
+                "path": "./action-sheet-interface",
+                "id": "src/components/action-sheet/action-sheet-interface.ts::ActionSheetButton"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アクションシートのボタンの配列です。",
@@ -432,6 +519,11 @@
         {
           "name": "cssClass",
           "type": "string | string[] | undefined",
+          "complexType": {
+            "original": "string | string[]",
+            "resolved": "string | string[] | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
@@ -454,6 +546,17 @@
         {
           "name": "enterAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アクションシートの提示時に使用するアニメーションです。",
@@ -472,6 +575,11 @@
         {
           "name": "header",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
@@ -491,6 +599,11 @@
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アクションシートに渡す追加属性。",
@@ -509,6 +622,11 @@
         {
           "name": "isOpen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
@@ -526,6 +644,11 @@
         {
           "name": "keyboardClose",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
@@ -543,6 +666,17 @@
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アクションシートが解除されたときに使用するアニメーションです。",
@@ -582,6 +716,11 @@
         {
           "name": "subHeader",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "sub-header",
           "reflectToAttr": false,
@@ -601,6 +740,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -618,6 +762,11 @@
         {
           "name": "trigger",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
@@ -642,6 +791,36 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(data?: any, role?: string) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "data Any data to emit in the dismiss events."
+                  }
+                ],
+                "text": "Any data to emit in the dismiss events."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                  }
+                ],
+                "text": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "アクションシートのオーバーレイが提示された後、それを解除します。",
@@ -662,6 +841,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "アクションシートが解散したときに解決するPromiseを返します。",
@@ -673,6 +872,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "アクションシートが解散するタイミングを解決するPromiseを返します。",
@@ -684,6 +903,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "present() => Promise<void>",
           "parameters": [],
           "docs": "アクションシートのオーバーレイを作成後に提示します。",
@@ -695,6 +925,17 @@
           "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが解散した後に発行されます。ionActionSheetDidDismissの略記。",
@@ -704,6 +945,11 @@
           "event": "didPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが提示された後に発行されます。ionActionSheetWillDismissの略語。",
@@ -713,6 +959,17 @@
           "event": "ionActionSheetDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが解散した後に発行されます。",
@@ -722,6 +979,11 @@
           "event": "ionActionSheetDidPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが提示された後に発行されます。",
@@ -731,6 +993,17 @@
           "event": "ionActionSheetWillDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが解散する前に発行されます。",
@@ -740,6 +1013,11 @@
           "event": "ionActionSheetWillPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが提示される前に発行されます。",
@@ -749,6 +1027,17 @@
           "event": "willDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが解散する前に発行されます。ionActionSheetWillDismissの略記。",
@@ -758,6 +1047,11 @@
           "event": "willPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アクションシートが提示される前に発行されます。ionActionSheetWillPresentの略記。",
@@ -904,7 +1198,7 @@
       }
     },
     {
-      "filePath": "./src/components/alert/alert.tsx",
+      "filePath": "src/components/alert/alert.tsx",
       "encapsulation": "scoped",
       "tag": "ion-alert",
       "docs": "",
@@ -919,6 +1213,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -936,6 +1235,11 @@
         {
           "name": "backdropDismiss",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
@@ -953,6 +1257,17 @@
         {
           "name": "buttons",
           "type": "(string | AlertButton)[]",
+          "complexType": {
+            "original": "(AlertButton | string)[]",
+            "resolved": "(string | AlertButton)[]",
+            "references": {
+              "AlertButton": {
+                "location": "import",
+                "path": "./alert-interface",
+                "id": "src/components/alert/alert-interface.ts::AlertButton"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アラートに追加されるボタンの配列。",
@@ -972,6 +1287,11 @@
         {
           "name": "cssClass",
           "type": "string | string[] | undefined",
+          "complexType": {
+            "original": "string | string[]",
+            "resolved": "string | string[] | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
@@ -994,6 +1314,17 @@
         {
           "name": "enterAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アラート提示時に使用するアニメーションです。",
@@ -1012,6 +1343,11 @@
         {
           "name": "header",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
@@ -1031,6 +1367,11 @@
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アラートに渡す追加属性。",
@@ -1049,6 +1390,17 @@
         {
           "name": "inputs",
           "type": "AlertInput[]",
+          "complexType": {
+            "original": "AlertInput[]",
+            "resolved": "AlertInput[]",
+            "references": {
+              "AlertInput": {
+                "location": "import",
+                "path": "./alert-interface",
+                "id": "src/components/alert/alert-interface.ts::AlertInput"
+              }
+            }
+          },
           "mutable": true,
           "reflectToAttr": false,
           "docs": "アラートに表示するInputの配列。",
@@ -1065,6 +1417,11 @@
         {
           "name": "isOpen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
@@ -1082,6 +1439,11 @@
         {
           "name": "keyboardClose",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
@@ -1099,6 +1461,17 @@
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "アラートが解除されたときに使用するアニメーション。",
@@ -1117,6 +1490,17 @@
         {
           "name": "message",
           "type": "IonicSafeString | string | undefined",
+          "complexType": {
+            "original": "string | IonicSafeString",
+            "resolved": "IonicSafeString | string | undefined",
+            "references": {
+              "IonicSafeString": {
+                "location": "import",
+                "path": "../../utils/sanitization",
+                "id": "src/utils/sanitization/index.ts::IonicSafeString"
+              }
+            }
+          },
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
@@ -1160,6 +1544,11 @@
         {
           "name": "subHeader",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "sub-header",
           "reflectToAttr": false,
@@ -1179,6 +1568,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -1196,6 +1590,11 @@
         {
           "name": "trigger",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
@@ -1220,6 +1619,36 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(data?: any, role?: string) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "data Any data to emit in the dismiss events."
+                  }
+                ],
+                "text": "Any data to emit in the dismiss events."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                  }
+                ],
+                "text": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "アラートオーバーレイが表示された後、解除します。",
@@ -1240,6 +1669,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "アラートが解除されたことを解決するPromiseを返します。",
@@ -1251,6 +1700,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "アラートが解除されるタイミングを解決するPromiseを返します。",
@@ -1262,6 +1731,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "present() => Promise<void>",
           "parameters": [],
           "docs": "アラートオーバーレイを作成した後に提示します。",
@@ -1273,6 +1753,17 @@
           "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが解除された後に発行されます。ionAlertDidDismissの略記。",
@@ -1282,6 +1773,11 @@
           "event": "didPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが提示された後に発行されます。ionAlertWillDismissの略記。",
@@ -1291,6 +1787,17 @@
           "event": "ionAlertDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが解除された後に発行されます。",
@@ -1300,6 +1807,11 @@
           "event": "ionAlertDidPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが提示された後に発行されます。",
@@ -1309,6 +1821,17 @@
           "event": "ionAlertWillDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが解除される前に発行されます。",
@@ -1318,6 +1841,11 @@
           "event": "ionAlertWillPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが提示される前に発行されます。",
@@ -1327,6 +1855,17 @@
           "event": "willDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが解除される前に発行されます。ionAlertWillDismissの略記。",
@@ -1336,6 +1875,11 @@
           "event": "willPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アラートが提示される前に発行されます。ionAlertWillPresentの略記。",
@@ -1412,7 +1956,7 @@
       }
     },
     {
-      "filePath": "./src/components/app/app.tsx",
+      "filePath": "src/components/app/app.tsx",
       "encapsulation": "none",
       "tag": "ion-app",
       "docs": "",
@@ -1430,7 +1974,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/avatar/avatar.tsx",
+      "filePath": "src/components/avatar/avatar.tsx",
       "encapsulation": "shadow",
       "tag": "ion-avatar",
       "docs": "",
@@ -1454,7 +1998,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/back-button/back-button.tsx",
+      "filePath": "src/components/back-button/back-button.tsx",
       "encapsulation": "shadow",
       "tag": "ion-back-button",
       "docs": "",
@@ -1481,6 +2025,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -1536,6 +2091,11 @@
         {
           "name": "defaultHref",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "default-href",
           "reflectToAttr": false,
@@ -1555,6 +2115,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
@@ -1572,6 +2137,11 @@
         {
           "name": "icon",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
@@ -1615,6 +2185,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder | undefined",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。",
@@ -1633,6 +2214,11 @@
         {
           "name": "text",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "text",
           "reflectToAttr": false,
@@ -1655,6 +2241,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -1872,7 +2463,7 @@
       }
     },
     {
-      "filePath": "./src/components/backdrop/backdrop.tsx",
+      "filePath": "src/components/backdrop/backdrop.tsx",
       "encapsulation": "shadow",
       "tag": "ion-backdrop",
       "docs": "",
@@ -1882,6 +2473,11 @@
         {
           "name": "stopPropagation",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "stop-propagation",
           "reflectToAttr": false,
@@ -1899,6 +2495,11 @@
         {
           "name": "tappable",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "tappable",
           "reflectToAttr": false,
@@ -1916,6 +2517,11 @@
         {
           "name": "visible",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "visible",
           "reflectToAttr": false,
@@ -1937,6 +2543,11 @@
           "event": "ionBackdropTap",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "バックドロップがタップされたときに発行されます。",
@@ -1988,7 +2599,7 @@
       }
     },
     {
-      "filePath": "./src/components/badge/badge.tsx",
+      "filePath": "src/components/badge/badge.tsx",
       "encapsulation": "shadow",
       "tag": "ion-badge",
       "docs": "",
@@ -2003,6 +2614,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -2119,7 +2741,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/breadcrumb/breadcrumb.tsx",
+      "filePath": "src/components/breadcrumb/breadcrumb.tsx",
       "encapsulation": "shadow",
       "tag": "ion-breadcrumb",
       "docs": "",
@@ -2146,6 +2768,11 @@
         {
           "name": "active",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "active",
           "reflectToAttr": false,
@@ -2163,6 +2790,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
@@ -2218,6 +2856,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -2235,6 +2878,11 @@
         {
           "name": "download",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
@@ -2254,6 +2902,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -2294,6 +2947,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -2313,6 +2971,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder | undefined",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
@@ -2331,6 +3000,17 @@
         {
           "name": "routerDirection",
           "type": "\"back\" | \"forward\" | \"root\"",
+          "complexType": {
+            "original": "RouterDirection",
+            "resolved": "\"back\" | \"forward\" | \"root\"",
+            "references": {
+              "RouterDirection": {
+                "location": "import",
+                "path": "../router/utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              }
+            }
+          },
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
@@ -2357,6 +3037,11 @@
         {
           "name": "separator",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean | undefined",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "separator",
           "reflectToAttr": false,
@@ -2376,6 +3061,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -2399,6 +3089,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "パンくずのフォーカスが外れたときに発行されます。",
@@ -2408,6 +3103,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "パンくずがフォーカスされたときに発行されます。",
@@ -2468,7 +3168,7 @@
       }
     },
     {
-      "filePath": "./src/components/breadcrumbs/breadcrumbs.tsx",
+      "filePath": "src/components/breadcrumbs/breadcrumbs.tsx",
       "encapsulation": "shadow",
       "tag": "ion-breadcrumbs",
       "docs": "",
@@ -2483,6 +3183,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -2538,6 +3249,11 @@
         {
           "name": "itemsAfterCollapse",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "items-after-collapse",
           "reflectToAttr": false,
@@ -2555,6 +3271,11 @@
         {
           "name": "itemsBeforeCollapse",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "items-before-collapse",
           "reflectToAttr": false,
@@ -2572,6 +3293,11 @@
         {
           "name": "maxItems",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "max-items",
           "reflectToAttr": false,
@@ -2616,6 +3342,17 @@
           "event": "ionCollapsedClick",
           "detail": "BreadcrumbCollapsedClickEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "BreadcrumbCollapsedClickEventDetail",
+            "resolved": "BreadcrumbCollapsedClickEventDetail",
+            "references": {
+              "BreadcrumbCollapsedClickEventDetail": {
+                "location": "import",
+                "path": "../breadcrumb/breadcrumb-interface",
+                "id": "src/components/breadcrumb/breadcrumb-interface.ts::BreadcrumbCollapsedClickEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "折りたたみインジケータがクリックされたときに発行されます。",
@@ -2637,7 +3374,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/button/button.tsx",
+      "filePath": "src/components/button/button.tsx",
       "encapsulation": "shadow",
       "tag": "ion-button",
       "docs": "",
@@ -2672,6 +3409,11 @@
         {
           "name": "buttonType",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": true,
           "attr": "button-type",
           "reflectToAttr": false,
@@ -2689,6 +3431,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -2744,6 +3497,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
@@ -2761,6 +3519,11 @@
         {
           "name": "download",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
@@ -2780,6 +3543,11 @@
         {
           "name": "expand",
           "type": "\"block\" | \"full\" | undefined",
+          "complexType": {
+            "original": "'full' | 'block'",
+            "resolved": "\"block\" | \"full\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "expand",
           "reflectToAttr": true,
@@ -2804,6 +3572,11 @@
         {
           "name": "fill",
           "type": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+          "complexType": {
+            "original": "'clear' | 'outline' | 'solid' | 'default'",
+            "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "fill",
           "reflectToAttr": true,
@@ -2836,6 +3609,16 @@
         {
           "name": "form",
           "type": "HTMLFormElement | string | undefined",
+          "complexType": {
+            "original": "string | HTMLFormElement",
+            "resolved": "HTMLFormElement | string | undefined",
+            "references": {
+              "HTMLFormElement": {
+                "location": "global",
+                "id": "global::HTMLFormElement"
+              }
+            }
+          },
           "mutable": false,
           "attr": "form",
           "reflectToAttr": false,
@@ -2858,6 +3641,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -2898,6 +3686,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -2917,6 +3710,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder | undefined",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
@@ -2935,6 +3739,17 @@
         {
           "name": "routerDirection",
           "type": "\"back\" | \"forward\" | \"root\"",
+          "complexType": {
+            "original": "RouterDirection",
+            "resolved": "\"back\" | \"forward\" | \"root\"",
+            "references": {
+              "RouterDirection": {
+                "location": "import",
+                "path": "../router/utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              }
+            }
+          },
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
@@ -2961,6 +3776,11 @@
         {
           "name": "shape",
           "type": "\"round\" | undefined",
+          "complexType": {
+            "original": "'round'",
+            "resolved": "\"round\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": true,
@@ -2981,6 +3801,11 @@
         {
           "name": "size",
           "type": "\"default\" | \"large\" | \"small\" | undefined",
+          "complexType": {
+            "original": "'small' | 'default' | 'large'",
+            "resolved": "\"default\" | \"large\" | \"small\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": true,
@@ -3009,6 +3834,11 @@
         {
           "name": "strong",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "strong",
           "reflectToAttr": false,
@@ -3026,6 +3856,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -3045,6 +3880,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -3075,6 +3915,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ボタンのフォーカスが外れたときに発行されます。",
@@ -3084,6 +3929,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ボタンにフォーカスが当たっているときに発行されます。",
@@ -3248,7 +4098,7 @@
       }
     },
     {
-      "filePath": "./src/components/buttons/buttons.tsx",
+      "filePath": "src/components/buttons/buttons.tsx",
       "encapsulation": "scoped",
       "tag": "ion-buttons",
       "docs": "",
@@ -3258,6 +4108,11 @@
         {
           "name": "collapse",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
@@ -3290,7 +4145,7 @@
       }
     },
     {
-      "filePath": "./src/components/card-content/card-content.tsx",
+      "filePath": "src/components/card-content/card-content.tsx",
       "encapsulation": "none",
       "tag": "ion-card-content",
       "docs": "",
@@ -3335,7 +4190,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/card-header/card-header.tsx",
+      "filePath": "src/components/card-header/card-header.tsx",
       "encapsulation": "shadow",
       "tag": "ion-card-header",
       "docs": "",
@@ -3350,6 +4205,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -3426,6 +4292,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -3452,7 +4323,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/card-subtitle/card-subtitle.tsx",
+      "filePath": "src/components/card-subtitle/card-subtitle.tsx",
       "encapsulation": "shadow",
       "tag": "ion-card-subtitle",
       "docs": "",
@@ -3467,6 +4338,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -3558,7 +4440,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/card-title/card-title.tsx",
+      "filePath": "src/components/card-title/card-title.tsx",
       "encapsulation": "shadow",
       "tag": "ion-card-title",
       "docs": "",
@@ -3573,6 +4455,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -3664,7 +4557,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/card/card.tsx",
+      "filePath": "src/components/card/card.tsx",
       "encapsulation": "shadow",
       "tag": "ion-card",
       "docs": "",
@@ -3683,6 +4576,11 @@
         {
           "name": "button",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "button",
           "reflectToAttr": false,
@@ -3700,6 +4598,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -3755,6 +4664,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -3772,6 +4686,11 @@
         {
           "name": "download",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
@@ -3791,6 +4710,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -3831,6 +4755,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -3850,6 +4779,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder | undefined",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
@@ -3868,6 +4808,17 @@
         {
           "name": "routerDirection",
           "type": "\"back\" | \"forward\" | \"root\"",
+          "complexType": {
+            "original": "RouterDirection",
+            "resolved": "\"back\" | \"forward\" | \"root\"",
+            "references": {
+              "RouterDirection": {
+                "location": "import",
+                "path": "../router/utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              }
+            }
+          },
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
@@ -3894,6 +4845,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -3913,6 +4869,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -3970,7 +4931,7 @@
       }
     },
     {
-      "filePath": "./src/components/checkbox/checkbox.tsx",
+      "filePath": "src/components/checkbox/checkbox.tsx",
       "encapsulation": "shadow",
       "tag": "ion-checkbox",
       "docs": "",
@@ -3997,6 +4958,11 @@
         {
           "name": "checked",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": true,
           "attr": "checked",
           "reflectToAttr": false,
@@ -4014,6 +4980,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -4069,6 +5046,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -4086,6 +5068,11 @@
         {
           "name": "indeterminate",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": true,
           "attr": "indeterminate",
           "reflectToAttr": false,
@@ -4103,6 +5090,11 @@
         {
           "name": "justify",
           "type": "\"end\" | \"space-between\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'space-between'",
+            "resolved": "\"end\" | \"space-between\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
@@ -4129,6 +5121,11 @@
         {
           "name": "labelPlacement",
           "type": "\"end\" | \"fixed\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'fixed'",
+            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
@@ -4155,6 +5152,11 @@
         {
           "name": "legacy",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
@@ -4195,6 +5197,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -4212,6 +5219,11 @@
         {
           "name": "value",
           "type": "any",
+          "complexType": {
+            "original": "any | null",
+            "resolved": "any",
+            "references": {}
+          },
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
@@ -4233,6 +5245,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "チェックボックスのフォーカスが外れたときに発行されます。",
@@ -4242,6 +5259,17 @@
           "event": "ionChange",
           "detail": "CheckboxChangeEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "CheckboxChangeEventDetail",
+            "resolved": "CheckboxChangeEventDetail<any>",
+            "references": {
+              "CheckboxChangeEventDetail": {
+                "location": "import",
+                "path": "./checkbox-interface",
+                "id": "src/components/checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "クリックなどのユーザー操作によりcheckedプロパティが変更された場合に発生します。プログラムによってcheckedプロパティを設定した場合は、このイベントは発生しません。",
@@ -4251,6 +5279,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "チェックボックスにフォーカスが当たったときに発行されます。",
@@ -4342,7 +5375,7 @@
       }
     },
     {
-      "filePath": "./src/components/chip/chip.tsx",
+      "filePath": "src/components/chip/chip.tsx",
       "encapsulation": "shadow",
       "tag": "ion-chip",
       "docs": "",
@@ -4357,6 +5390,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -4412,6 +5456,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -4450,6 +5499,11 @@
         {
           "name": "outline",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "outline",
           "reflectToAttr": false,
@@ -4493,7 +5547,7 @@
       }
     },
     {
-      "filePath": "./src/components/col/col.tsx",
+      "filePath": "src/components/col/col.tsx",
       "encapsulation": "shadow",
       "tag": "ion-col",
       "docs": "",
@@ -4503,6 +5557,11 @@
         {
           "name": "offset",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "offset",
           "reflectToAttr": false,
@@ -4522,6 +5581,11 @@
         {
           "name": "offsetLg",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "offset-lg",
           "reflectToAttr": false,
@@ -4541,6 +5605,11 @@
         {
           "name": "offsetMd",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "offset-md",
           "reflectToAttr": false,
@@ -4560,6 +5629,11 @@
         {
           "name": "offsetSm",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "offset-sm",
           "reflectToAttr": false,
@@ -4579,6 +5653,11 @@
         {
           "name": "offsetXl",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "offset-xl",
           "reflectToAttr": false,
@@ -4598,6 +5677,11 @@
         {
           "name": "offsetXs",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "offset-xs",
           "reflectToAttr": false,
@@ -4617,6 +5701,11 @@
         {
           "name": "pull",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull",
           "reflectToAttr": false,
@@ -4636,6 +5725,11 @@
         {
           "name": "pullLg",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-lg",
           "reflectToAttr": false,
@@ -4655,6 +5749,11 @@
         {
           "name": "pullMd",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-md",
           "reflectToAttr": false,
@@ -4674,6 +5773,11 @@
         {
           "name": "pullSm",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-sm",
           "reflectToAttr": false,
@@ -4693,6 +5797,11 @@
         {
           "name": "pullXl",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-xl",
           "reflectToAttr": false,
@@ -4712,6 +5821,11 @@
         {
           "name": "pullXs",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-xs",
           "reflectToAttr": false,
@@ -4731,6 +5845,11 @@
         {
           "name": "push",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "push",
           "reflectToAttr": false,
@@ -4750,6 +5869,11 @@
         {
           "name": "pushLg",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "push-lg",
           "reflectToAttr": false,
@@ -4769,6 +5893,11 @@
         {
           "name": "pushMd",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "push-md",
           "reflectToAttr": false,
@@ -4788,6 +5917,11 @@
         {
           "name": "pushSm",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "push-sm",
           "reflectToAttr": false,
@@ -4807,6 +5941,11 @@
         {
           "name": "pushXl",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "push-xl",
           "reflectToAttr": false,
@@ -4826,6 +5965,11 @@
         {
           "name": "pushXs",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "push-xs",
           "reflectToAttr": false,
@@ -4845,6 +5989,11 @@
         {
           "name": "size",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
@@ -4864,6 +6013,11 @@
         {
           "name": "sizeLg",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size-lg",
           "reflectToAttr": false,
@@ -4883,6 +6037,11 @@
         {
           "name": "sizeMd",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size-md",
           "reflectToAttr": false,
@@ -4902,6 +6061,11 @@
         {
           "name": "sizeSm",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size-sm",
           "reflectToAttr": false,
@@ -4921,6 +6085,11 @@
         {
           "name": "sizeXl",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size-xl",
           "reflectToAttr": false,
@@ -4940,6 +6109,11 @@
         {
           "name": "sizeXs",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size-xs",
           "reflectToAttr": false,
@@ -5011,7 +6185,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/content/content.tsx",
+      "filePath": "src/components/content/content.tsx",
       "encapsulation": "shadow",
       "tag": "ion-content",
       "docs": "",
@@ -5038,6 +6212,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -5093,6 +6278,11 @@
         {
           "name": "forceOverscroll",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "force-overscroll",
           "reflectToAttr": false,
@@ -5112,6 +6302,11 @@
         {
           "name": "fullscreen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "fullscreen",
           "reflectToAttr": false,
@@ -5129,6 +6324,11 @@
         {
           "name": "scrollEvents",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "scroll-events",
           "reflectToAttr": false,
@@ -5146,6 +6346,11 @@
         {
           "name": "scrollX",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "scroll-x",
           "reflectToAttr": false,
@@ -5163,6 +6368,11 @@
         {
           "name": "scrollY",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "scroll-y",
           "reflectToAttr": false,
@@ -5185,6 +6395,21 @@
             "type": "Promise<HTMLElement>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<HTMLElement>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            },
+            "return": "Promise<HTMLElement>"
+          },
           "signature": "getScrollElement() => Promise<HTMLElement>",
           "parameters": [],
           "docs": "実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。",
@@ -5196,6 +6421,45 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(x: number, y: number, duration: number) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "x The amount to scroll by on the horizontal axis."
+                  }
+                ],
+                "text": "The amount to scroll by on the horizontal axis."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "y The amount to scroll by on the vertical axis."
+                  }
+                ],
+                "text": "The amount to scroll by on the vertical axis."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "duration The amount of time to take scrolling by that amount."
+                  }
+                ],
+                "text": "The amount of time to take scrolling by that amount."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "scrollByPoint(x: number, y: number, duration: number) => Promise<void>",
           "parameters": [],
           "docs": "コンポーネントを指定したX/Y距離だけスクロールさせる。",
@@ -5220,6 +6484,27 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(duration?: number) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "duration The amount of time to take scrolling to the bottom. Defaults to `0`."
+                  }
+                ],
+                "text": "The amount of time to take scrolling to the bottom. Defaults to `0`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "scrollToBottom(duration?: number) => Promise<void>",
           "parameters": [],
           "docs": "コンポーネントの一番下までスクロールします。",
@@ -5236,6 +6521,45 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "x The point to scroll to on the horizontal axis."
+                  }
+                ],
+                "text": "The point to scroll to on the horizontal axis."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "y The point to scroll to on the vertical axis."
+                  }
+                ],
+                "text": "The point to scroll to on the vertical axis."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "duration The amount of time to take scrolling to that point. Defaults to `0`."
+                  }
+                ],
+                "text": "The amount of time to take scrolling to that point. Defaults to `0`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>",
           "parameters": [],
           "docs": "コンポーネント内の指定したX/Y位置までスクロールします。",
@@ -5260,6 +6584,27 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(duration?: number) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "duration The amount of time to take scrolling to the top. Defaults to `0`."
+                  }
+                ],
+                "text": "The amount of time to take scrolling to the top. Defaults to `0`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "scrollToTop(duration?: number) => Promise<void>",
           "parameters": [],
           "docs": "コンポーネントの上部にスクロールします。",
@@ -5276,6 +6621,17 @@
           "event": "ionScroll",
           "detail": "ScrollDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "ScrollDetail",
+            "resolved": "ScrollDetail",
+            "references": {
+              "ScrollDetail": {
+                "location": "import",
+                "path": "./content-interface",
+                "id": "src/components/content/content-interface.ts::ScrollDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。",
@@ -5285,6 +6641,17 @@
           "event": "ionScrollEnd",
           "detail": "ScrollBaseDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "ScrollBaseDetail",
+            "resolved": "ScrollBaseDetail",
+            "references": {
+              "ScrollBaseDetail": {
+                "location": "import",
+                "path": "./content-interface",
+                "id": "src/components/content/content-interface.ts::ScrollBaseDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。",
@@ -5294,6 +6661,17 @@
           "event": "ionScrollStart",
           "detail": "ScrollBaseDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "ScrollBaseDetail",
+            "resolved": "ScrollBaseDetail",
+            "references": {
+              "ScrollBaseDetail": {
+                "location": "import",
+                "path": "./content-interface",
+                "id": "src/components/content/content-interface.ts::ScrollBaseDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。",
@@ -5386,7 +6764,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/datetime-button/datetime-button.tsx",
+      "filePath": "src/components/datetime-button/datetime-button.tsx",
       "encapsulation": "shadow",
       "tag": "ion-datetime-button",
       "docs": "",
@@ -5413,6 +6791,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -5469,6 +6858,11 @@
         {
           "name": "datetime",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "datetime",
           "reflectToAttr": false,
@@ -5488,6 +6882,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
@@ -5555,7 +6954,7 @@
       }
     },
     {
-      "filePath": "./src/components/datetime/datetime.tsx",
+      "filePath": "src/components/datetime/datetime.tsx",
       "encapsulation": "shadow",
       "tag": "ion-datetime",
       "docs": "",
@@ -5575,6 +6974,26 @@
         {
           "name": "slot",
           "text": "time-label - The label for the time selector in the datetime."
+        },
+        {
+          "name": "part",
+          "text": "wheel-item - The individual items when using a wheel style layout, or in the\nmonth/year picker when using a grid style layout."
+        },
+        {
+          "name": "part",
+          "text": "wheel-item active - The currently selected wheel-item."
+        },
+        {
+          "name": "part",
+          "text": "time-button - The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."
+        },
+        {
+          "name": "part",
+          "text": "time-button active - The time picker button when the picker is open."
+        },
+        {
+          "name": "part",
+          "text": "month-year-button - The button that opens the month/year picker when\nusing a grid style layout."
         }
       ],
       "usage": {},
@@ -5582,6 +7001,11 @@
         {
           "name": "cancelText",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "cancel-text",
           "reflectToAttr": false,
@@ -5599,6 +7023,11 @@
         {
           "name": "clearText",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "clear-text",
           "reflectToAttr": false,
@@ -5616,6 +7045,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
@@ -5672,6 +7112,11 @@
         {
           "name": "dayValues",
           "type": "number | number[] | string | undefined",
+          "complexType": {
+            "original": "number[] | number | string",
+            "resolved": "number | number[] | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "day-values",
           "reflectToAttr": false,
@@ -5697,6 +7142,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -5714,6 +7164,11 @@
         {
           "name": "doneText",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "done-text",
           "reflectToAttr": false,
@@ -5731,6 +7186,11 @@
         {
           "name": "firstDayOfWeek",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "first-day-of-week",
           "reflectToAttr": false,
@@ -5748,6 +7208,22 @@
         {
           "name": "highlightedDates",
           "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+          "complexType": {
+            "original": "DatetimeHighlight[] | DatetimeHighlightCallback",
+            "resolved": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
+            "references": {
+              "DatetimeHighlight": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::DatetimeHighlight"
+              },
+              "DatetimeHighlightCallback": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::DatetimeHighlightCallback"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "特定の日付にカスタムテキストと背景色を適用するために使用します。  ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。  preferWheel=\"false\"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。",
@@ -5772,6 +7248,11 @@
         {
           "name": "hourCycle",
           "type": "\"h12\" | \"h23\" | undefined",
+          "complexType": {
+            "original": "'h23' | 'h12'",
+            "resolved": "\"h12\" | \"h23\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "hour-cycle",
           "reflectToAttr": false,
@@ -5796,6 +7277,11 @@
         {
           "name": "hourValues",
           "type": "number | number[] | string | undefined",
+          "complexType": {
+            "original": "number[] | number | string",
+            "resolved": "number | number[] | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "hour-values",
           "reflectToAttr": false,
@@ -5821,6 +7307,11 @@
         {
           "name": "isDateEnabled",
           "type": "((dateIsoString: string) => boolean) | undefined",
+          "complexType": {
+            "original": "(dateIsoString: string) => boolean",
+            "resolved": "((dateIsoString: string) => boolean) | undefined",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "個々の日付(暦日)が有効か無効かを返します。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブです。  この関数は、指定された日のISO 8601の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。  この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。",
@@ -5839,6 +7330,11 @@
         {
           "name": "locale",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
@@ -5856,6 +7352,11 @@
         {
           "name": "max",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "max",
           "reflectToAttr": false,
@@ -5875,6 +7376,11 @@
         {
           "name": "min",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "min",
           "reflectToAttr": false,
@@ -5894,6 +7400,11 @@
         {
           "name": "minuteValues",
           "type": "number | number[] | string | undefined",
+          "complexType": {
+            "original": "number[] | number | string",
+            "resolved": "number | number[] | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "minute-values",
           "reflectToAttr": false,
@@ -5940,6 +7451,11 @@
         {
           "name": "monthValues",
           "type": "number | number[] | string | undefined",
+          "complexType": {
+            "original": "number[] | number | string",
+            "resolved": "number | number[] | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "month-values",
           "reflectToAttr": false,
@@ -5965,6 +7481,11 @@
         {
           "name": "multiple",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
@@ -5982,6 +7503,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -5999,6 +7525,11 @@
         {
           "name": "preferWheel",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "prefer-wheel",
           "reflectToAttr": false,
@@ -6016,6 +7547,17 @@
         {
           "name": "presentation",
           "type": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
+          "complexType": {
+            "original": "DatetimePresentation",
+            "resolved": "\"date\" | \"date-time\" | \"month\" | \"month-year\" | \"time\" | \"time-date\" | \"year\"",
+            "references": {
+              "DatetimePresentation": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::DatetimePresentation"
+              }
+            }
+          },
           "mutable": false,
           "attr": "presentation",
           "reflectToAttr": false,
@@ -6058,6 +7600,11 @@
         {
           "name": "readonly",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
@@ -6075,6 +7622,11 @@
         {
           "name": "showClearButton",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
@@ -6092,6 +7644,11 @@
         {
           "name": "showDefaultButtons",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-default-buttons",
           "reflectToAttr": false,
@@ -6109,6 +7666,11 @@
         {
           "name": "showDefaultTimeLabel",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-default-time-label",
           "reflectToAttr": false,
@@ -6126,6 +7688,11 @@
         {
           "name": "showDefaultTitle",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-default-title",
           "reflectToAttr": false,
@@ -6143,6 +7710,11 @@
         {
           "name": "size",
           "type": "\"cover\" | \"fixed\"",
+          "complexType": {
+            "original": "'cover' | 'fixed'",
+            "resolved": "\"cover\" | \"fixed\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
@@ -6165,6 +7737,17 @@
         {
           "name": "titleSelectedDatesFormatter",
           "type": "((selectedDates: string[]) => string) | undefined",
+          "complexType": {
+            "original": "TitleSelectedDatesFormatter",
+            "resolved": "((selectedDates: string[]) => string) | undefined",
+            "references": {
+              "TitleSelectedDatesFormatter": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::TitleSelectedDatesFormatter"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "選択された日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバックです。選択された日付が0または1以上の場合のみ使用されます（つまり、ちょうど1の場合は未使用です）。デフォルトでは、ヘッダーテキストは \"numberOfDates days \"に設定されています。",
@@ -6183,6 +7766,11 @@
         {
           "name": "value",
           "type": "null | string | string[] | undefined",
+          "complexType": {
+            "original": "string | string[] | null",
+            "resolved": "null | string | string[] | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -6208,10 +7796,15 @@
         {
           "name": "yearValues",
           "type": "number | number[] | string | undefined",
+          "complexType": {
+            "original": "number[] | number | string",
+            "resolved": "number | number[] | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "year-values",
           "reflectToAttr": false,
-          "docs": "選択可能な年号のリストを作成するために使用する値。デフォルトでは、年の値は `min` と `max` の間の範囲になります。しかし、表示する年を正確に制御するために、`yearValues` には数値、数値の配列、またはカンマで区切られた数値の文字列を取ることができます。例えば、今後のうるう年と最近のうるう年を表示するには、この入力の値は `yearValues=\"2024,2020,2016,2012,2008\"` となります。",
+          "docs": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2008,2012,2016,2020,2024\"`.",
           "docsTags": [],
           "values": [
             {
@@ -6238,6 +7831,22 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(closeOverlay?: boolean) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "cancel(closeOverlay?: boolean) => Promise<void>",
           "parameters": [],
           "docs": "ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。",
@@ -6249,6 +7858,22 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(closeOverlay?: boolean) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "confirm(closeOverlay?: boolean) => Promise<void>",
           "parameters": [],
           "docs": "選択されたdatetimeの値を確認し、`value`プロパティを更新し、オプションでdatetimeが表示されていたポップオーバーまたはモーダルを閉じます。",
@@ -6260,6 +7885,22 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(startDate?: string) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "reset(startDate?: string) => Promise<void>",
           "parameters": [],
           "docs": "datetimeの内部状態をリセットするが、値は更新しません。有効なISO-8601文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態はmin、max、todayのクランプされた値にリセットされます。",
@@ -6271,6 +7912,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "datetimeのフォーカスが外れたときに発行されます。",
@@ -6280,6 +7926,11 @@
           "event": "ionCancel",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "datetimeの選択がキャンセルされたときに発生します。",
@@ -6289,6 +7940,17 @@
           "event": "ionChange",
           "detail": "DatetimeChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "DatetimeChangeEventDetail",
+            "resolved": "DatetimeChangeEventDetail",
+            "references": {
+              "DatetimeChangeEventDetail": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "値（選択された日付）が変化したときに発行されます。",
@@ -6298,6 +7960,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "datetimeにフォーカスが当たったときに発行されます。",
@@ -6320,6 +7987,16 @@
           "name": "--title-color",
           "annotation": "prop",
           "docs": "タイトルの文字色です。"
+        },
+        {
+          "name": "--wheel-fade-background-rgb",
+          "annotation": "prop",
+          "docs": "The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. `255, 255, 255`."
+        },
+        {
+          "name": "--wheel-highlight-background",
+          "annotation": "prop",
+          "docs": "The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."
         }
       ],
       "slots": [
@@ -6336,7 +8013,28 @@
           "docs": "datetimeのタイトルです。"
         }
       ],
-      "parts": [],
+      "parts": [
+        {
+          "name": "month-year-button",
+          "docs": "The button that opens the month/year picker when\nusing a grid style layout."
+        },
+        {
+          "name": "time-button",
+          "docs": "The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."
+        },
+        {
+          "name": "time-button active",
+          "docs": "The time picker button when the picker is open."
+        },
+        {
+          "name": "wheel-item",
+          "docs": "The individual items when using a wheel style layout, or in the\nmonth/year picker when using a grid style layout."
+        },
+        {
+          "name": "wheel-item active",
+          "docs": "The currently selected wheel-item."
+        }
+      ],
       "dependents": [],
       "dependencies": [
         "ion-buttons",
@@ -6373,7 +8071,7 @@
       }
     },
     {
-      "filePath": "./src/components/fab-button/fab-button.tsx",
+      "filePath": "src/components/fab-button/fab-button.tsx",
       "encapsulation": "shadow",
       "tag": "ion-fab-button",
       "docs": "",
@@ -6396,6 +8094,11 @@
         {
           "name": "activated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "activated",
           "reflectToAttr": false,
@@ -6413,6 +8116,11 @@
         {
           "name": "closeIcon",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "close-icon",
           "reflectToAttr": false,
@@ -6430,6 +8138,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -6485,6 +8204,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -6502,6 +8226,11 @@
         {
           "name": "download",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
@@ -6521,6 +8250,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -6561,6 +8295,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -6580,6 +8319,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder | undefined",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
@@ -6598,6 +8348,17 @@
         {
           "name": "routerDirection",
           "type": "\"back\" | \"forward\" | \"root\"",
+          "complexType": {
+            "original": "RouterDirection",
+            "resolved": "\"back\" | \"forward\" | \"root\"",
+            "references": {
+              "RouterDirection": {
+                "location": "import",
+                "path": "../router/utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              }
+            }
+          },
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
@@ -6624,6 +8385,11 @@
         {
           "name": "show",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show",
           "reflectToAttr": false,
@@ -6641,6 +8407,11 @@
         {
           "name": "size",
           "type": "\"small\" | undefined",
+          "complexType": {
+            "original": "'small'",
+            "resolved": "\"small\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
@@ -6661,6 +8432,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -6680,6 +8456,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -6697,6 +8478,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -6727,6 +8513,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ボタンのフォーカスが外れたときに発行されます。",
@@ -6736,6 +8527,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ボタンにフォーカスが当たっているときに発行されます。",
@@ -6884,7 +8680,7 @@
       }
     },
     {
-      "filePath": "./src/components/fab-list/fab-list.tsx",
+      "filePath": "src/components/fab-list/fab-list.tsx",
       "encapsulation": "shadow",
       "tag": "ion-fab-list",
       "docs": "",
@@ -6894,6 +8690,11 @@
         {
           "name": "activated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "activated",
           "reflectToAttr": false,
@@ -6911,6 +8712,11 @@
         {
           "name": "side",
           "type": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'top' | 'bottom'",
+            "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
@@ -6950,7 +8756,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/fab/fab.tsx",
+      "filePath": "src/components/fab/fab.tsx",
       "encapsulation": "shadow",
       "tag": "ion-fab",
       "docs": "",
@@ -6960,6 +8766,11 @@
         {
           "name": "activated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": true,
           "attr": "activated",
           "reflectToAttr": false,
@@ -6977,6 +8788,11 @@
         {
           "name": "edge",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "edge",
           "reflectToAttr": false,
@@ -6994,6 +8810,11 @@
         {
           "name": "horizontal",
           "type": "\"center\" | \"end\" | \"start\" | undefined",
+          "complexType": {
+            "original": "'start' | 'end' | 'center'",
+            "resolved": "\"center\" | \"end\" | \"start\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "horizontal",
           "reflectToAttr": false,
@@ -7022,6 +8843,11 @@
         {
           "name": "vertical",
           "type": "\"bottom\" | \"center\" | \"top\" | undefined",
+          "complexType": {
+            "original": "'top' | 'bottom' | 'center'",
+            "resolved": "\"bottom\" | \"center\" | \"top\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "vertical",
           "reflectToAttr": false,
@@ -7055,6 +8881,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "close() => Promise<void>",
           "parameters": [],
           "docs": "アクティブなFABリストコンテナを閉じる。",
@@ -7071,7 +8908,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/footer/footer.tsx",
+      "filePath": "src/components/footer/footer.tsx",
       "encapsulation": "none",
       "tag": "ion-footer",
       "docs": "",
@@ -7086,6 +8923,11 @@
         {
           "name": "collapse",
           "type": "\"fade\" | undefined",
+          "complexType": {
+            "original": "'fade'",
+            "resolved": "\"fade\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
@@ -7127,6 +8969,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -7153,7 +9000,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/grid/grid.tsx",
+      "filePath": "src/components/grid/grid.tsx",
       "encapsulation": "shadow",
       "tag": "ion-grid",
       "docs": "",
@@ -7163,6 +9010,11 @@
         {
           "name": "fixed",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "fixed",
           "reflectToAttr": false,
@@ -7250,7 +9102,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/header/header.tsx",
+      "filePath": "src/components/header/header.tsx",
       "encapsulation": "none",
       "tag": "ion-header",
       "docs": "",
@@ -7265,6 +9117,11 @@
         {
           "name": "collapse",
           "type": "\"condense\" | \"fade\" | undefined",
+          "complexType": {
+            "original": "'condense' | 'fade'",
+            "resolved": "\"condense\" | \"fade\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
@@ -7310,6 +9167,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -7336,7 +9198,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/img/img.tsx",
+      "filePath": "src/components/img/img.tsx",
       "encapsulation": "shadow",
       "tag": "ion-img",
       "docs": "",
@@ -7351,6 +9213,11 @@
         {
           "name": "alt",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "alt",
           "reflectToAttr": false,
@@ -7370,6 +9237,11 @@
         {
           "name": "src",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "src",
           "reflectToAttr": false,
@@ -7393,6 +9265,11 @@
           "event": "ionError",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "imgの読み込みに失敗したときに発行されます。",
@@ -7402,6 +9279,11 @@
           "event": "ionImgDidLoad",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "画像の読み込みが終了したときに発行されます。",
@@ -7411,6 +9293,11 @@
           "event": "ionImgWillLoad",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "img srcが設定されたときに発行されます。",
@@ -7431,7 +9318,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/infinite-scroll-content/infinite-scroll-content.tsx",
+      "filePath": "src/components/infinite-scroll-content/infinite-scroll-content.tsx",
       "encapsulation": "none",
       "tag": "ion-infinite-scroll-content",
       "docs": "",
@@ -7441,6 +9328,17 @@
         {
           "name": "loadingSpinner",
           "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+          "complexType": {
+            "original": "SpinnerTypes | null",
+            "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+            "references": {
+              "SpinnerTypes": {
+                "location": "import",
+                "path": "../spinner/spinner-configs",
+                "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+              }
+            }
+          },
           "mutable": true,
           "attr": "loading-spinner",
           "reflectToAttr": false,
@@ -7496,6 +9394,17 @@
         {
           "name": "loadingText",
           "type": "IonicSafeString | string | undefined",
+          "complexType": {
+            "original": "string | IonicSafeString",
+            "resolved": "IonicSafeString | string | undefined",
+            "references": {
+              "IonicSafeString": {
+                "location": "import",
+                "path": "../../utils/sanitization",
+                "id": "src/utils/sanitization/index.ts::IonicSafeString"
+              }
+            }
+          },
           "mutable": false,
           "attr": "loading-text",
           "reflectToAttr": false,
@@ -7533,7 +9442,7 @@
       }
     },
     {
-      "filePath": "./src/components/infinite-scroll/infinite-scroll.tsx",
+      "filePath": "src/components/infinite-scroll/infinite-scroll.tsx",
       "encapsulation": "none",
       "tag": "ion-infinite-scroll",
       "docs": "",
@@ -7543,6 +9452,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -7560,6 +9474,11 @@
         {
           "name": "position",
           "type": "\"bottom\" | \"top\"",
+          "complexType": {
+            "original": "'top' | 'bottom'",
+            "resolved": "\"bottom\" | \"top\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
@@ -7582,6 +9501,11 @@
         {
           "name": "threshold",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "threshold",
           "reflectToAttr": false,
@@ -7604,6 +9528,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "complete() => Promise<void>",
           "parameters": [],
           "docs": "非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。",
@@ -7615,6 +9550,11 @@
           "event": "ionInfinite",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。",
@@ -7630,7 +9570,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/input/input.tsx",
+      "filePath": "src/components/input/input.tsx",
       "encapsulation": "scoped",
       "tag": "ion-input",
       "docs": "",
@@ -7638,6 +9578,10 @@
         {
           "name": "virtualProp",
           "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+        },
+        {
+          "name": "slot",
+          "text": "label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
         }
       ],
       "usage": {},
@@ -7645,6 +9589,11 @@
         {
           "name": "accept",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "accept",
           "reflectToAttr": false,
@@ -7669,6 +9618,11 @@
         {
           "name": "autocapitalize",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "autocapitalize",
           "reflectToAttr": false,
@@ -7686,6 +9640,17 @@
         {
           "name": "autocomplete",
           "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+          "complexType": {
+            "original": "AutocompleteTypes",
+            "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+            "references": {
+              "AutocompleteTypes": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AutocompleteTypes"
+              }
+            }
+          },
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
@@ -7916,6 +9881,11 @@
         {
           "name": "autocorrect",
           "type": "\"off\" | \"on\"",
+          "complexType": {
+            "original": "'on' | 'off'",
+            "resolved": "\"off\" | \"on\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "autocorrect",
           "reflectToAttr": false,
@@ -7938,6 +9908,11 @@
         {
           "name": "autofocus",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
@@ -7955,6 +9930,11 @@
         {
           "name": "clearInput",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "clear-input",
           "reflectToAttr": false,
@@ -7972,6 +9952,11 @@
         {
           "name": "clearOnEdit",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
@@ -7991,6 +9976,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -8046,6 +10042,11 @@
         {
           "name": "counter",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "counter",
           "reflectToAttr": false,
@@ -8063,6 +10064,11 @@
         {
           "name": "counterFormatter",
           "type": "((inputLength: number, maxLength: number) => string) | undefined",
+          "complexType": {
+            "original": "(inputLength: number, maxLength: number) => string",
+            "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
@@ -8081,6 +10087,11 @@
         {
           "name": "debounce",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
@@ -8100,6 +10111,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -8117,6 +10133,11 @@
         {
           "name": "enterkeyhint",
           "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "complexType": {
+            "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+            "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
@@ -8161,6 +10182,11 @@
         {
           "name": "errorText",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "error-text",
           "reflectToAttr": false,
@@ -8180,6 +10206,11 @@
         {
           "name": "fill",
           "type": "\"outline\" | \"solid\" | undefined",
+          "complexType": {
+            "original": "'outline' | 'solid'",
+            "resolved": "\"outline\" | \"solid\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
@@ -8204,6 +10235,11 @@
         {
           "name": "helperText",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "helper-text",
           "reflectToAttr": false,
@@ -8223,6 +10259,11 @@
         {
           "name": "inputmode",
           "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+          "complexType": {
+            "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+            "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
@@ -8271,10 +10312,15 @@
         {
           "name": "label",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "Inputに関連する可視ラベル。",
+          "docs": "The visible label associated with the input.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
           "docsTags": [],
           "values": [
             {
@@ -8290,6 +10336,11 @@
         {
           "name": "labelPlacement",
           "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+            "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
@@ -8324,6 +10375,11 @@
         {
           "name": "legacy",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
@@ -8343,6 +10399,11 @@
         {
           "name": "max",
           "type": "number | string | undefined",
+          "complexType": {
+            "original": "string | number",
+            "resolved": "number | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
@@ -8365,6 +10426,11 @@
         {
           "name": "maxlength",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
@@ -8384,6 +10450,11 @@
         {
           "name": "min",
           "type": "number | string | undefined",
+          "complexType": {
+            "original": "string | number",
+            "resolved": "number | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "min",
           "reflectToAttr": false,
@@ -8406,6 +10477,11 @@
         {
           "name": "minlength",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
@@ -8446,6 +10522,11 @@
         {
           "name": "multiple",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
@@ -8465,6 +10546,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -8482,6 +10568,11 @@
         {
           "name": "pattern",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pattern",
           "reflectToAttr": false,
@@ -8501,6 +10592,11 @@
         {
           "name": "placeholder",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
@@ -8520,6 +10616,11 @@
         {
           "name": "readonly",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
@@ -8537,6 +10638,11 @@
         {
           "name": "required",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
@@ -8554,6 +10660,11 @@
         {
           "name": "shape",
           "type": "\"round\" | undefined",
+          "complexType": {
+            "original": "'round'",
+            "resolved": "\"round\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
@@ -8574,10 +10685,15 @@
         {
           "name": "size",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "コントロールの初期サイズ。ただし、type属性の値が `\"text\"` または `\"password\"` である場合は、整数値の文字数です。この属性は、`type`属性が `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, または `\"password\"` に設定されている場合にのみ適用され、それ以外の場合は無視されます。",
+          "docs": "",
           "docsTags": [],
           "values": [
             {
@@ -8593,6 +10709,11 @@
         {
           "name": "spellcheck",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
@@ -8610,6 +10731,11 @@
         {
           "name": "step",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
@@ -8629,6 +10755,17 @@
         {
           "name": "type",
           "type": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+          "complexType": {
+            "original": "TextFieldTypes",
+            "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+            "references": {
+              "TextFieldTypes": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::TextFieldTypes"
+              }
+            }
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -8691,6 +10828,11 @@
         {
           "name": "value",
           "type": "null | number | string | undefined",
+          "complexType": {
+            "original": "string | number | null",
+            "resolved": "null | number | string | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -8722,6 +10864,21 @@
             "type": "Promise<HTMLInputElement>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<HTMLInputElement>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLInputElement": {
+                "location": "global",
+                "id": "global::HTMLInputElement"
+              }
+            },
+            "return": "Promise<HTMLInputElement>"
+          },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
           "docs": "要素の内部で使用されているネイティブの `<input>` 要素を返します。",
@@ -8733,9 +10890,20 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "`ion-input` のネイティブ `input` にフォーカスを設定します。グローバルな `input.focus()` の代わりに、このメソッドを使用します。 ページが入ったときにInputにフォーカスを当てたい開発者は、`ionViewDidEnter()` ライフサイクルメソッドの中で `setFocus()` を呼び出してください。",
+          "docs": "Sets focus on the native `input` in `ion-input`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
           "docsTags": []
         }
       ],
@@ -8744,6 +10912,16 @@
           "event": "ionBlur",
           "detail": "FocusEvent",
           "bubbles": true,
+          "complexType": {
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
+            "references": {
+              "FocusEvent": {
+                "location": "global",
+                "id": "global::FocusEvent"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "Inputのフォーカスが外れたときに発行されます。",
@@ -8753,15 +10931,36 @@
           "event": "ionChange",
           "detail": "InputChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "InputChangeEventDetail",
+            "resolved": "InputChangeEventDetail",
+            "references": {
+              "InputChangeEventDetail": {
+                "location": "import",
+                "path": "./input-interface",
+                "id": "src/components/input/input-interface.ts::InputChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
-          "docs": "`ionChange` イベントは、ユーザーが要素の値を変更したときに `<ion-input>` 要素に対して発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは必ずしも要素の値が変更されるたびに発生するわけではない。  ユーザーが要素と対話する方法に応じて、`ionChange` イベントは次のような異なるタイミングで発生します。 - ユーザーが明示的に変更をコミットしたとき (例えば、`<ion-input type=\"date\">` の日付ピッカーから日付を選択し、「Enter」キーを押すなど)。- 値が変更された後、要素がフォーカスを失ったとき：ユーザーの対話がタイピングである要素について。",
+          "docs": "The `ionChange` event is fired when the user modifies the input's value.\nUnlike the `ionInput` event, the `ionChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
           "docsTags": []
         },
         {
           "event": "ionFocus",
           "detail": "FocusEvent",
           "bubbles": true,
+          "complexType": {
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
+            "references": {
+              "FocusEvent": {
+                "location": "global",
+                "id": "global::FocusEvent"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "Inputにフォーカスが当たったときに発行されます。",
@@ -8771,9 +10970,20 @@
           "event": "ionInput",
           "detail": "InputInputEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "InputInputEventDetail",
+            "resolved": "InputInputEventDetail",
+            "references": {
+              "InputInputEventDetail": {
+                "location": "import",
+                "path": "./input-interface",
+                "id": "src/components/input/input-interface.ts::InputInputEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
-          "docs": "`ionInput`イベントは `<ion-input>` 要素の `value` が変更されたときに発生するイベントです。  テキスト入力を受け付ける要素 (`type=text`, `type=tel` など) のインタフェースは [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) である。その他の要素のインタフェースは [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) です。編集時に入力がクリアされる場合、型は `null` となります。",
+          "docs": "The `ionInput` event is fired each time the user modifies the input's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
           "docsTags": []
         }
       ],
@@ -8792,7 +11002,7 @@
         {
           "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Inputの半径"
+          "docs": "Radius of the input. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
         },
         {
           "name": "--border-style",
@@ -8865,7 +11075,12 @@
           "docs": "InputのPlaceholderテキストの不透明度"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "label",
+          "docs": "The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+        }
+      ],
       "parts": [],
       "dependents": [],
       "dependencies": [
@@ -8878,7 +11093,7 @@
       }
     },
     {
-      "filePath": "./src/components/item-divider/item-divider.tsx",
+      "filePath": "src/components/item-divider/item-divider.tsx",
       "encapsulation": "shadow",
       "tag": "ion-item-divider",
       "docs": "",
@@ -8905,6 +11120,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -8981,6 +11207,11 @@
         {
           "name": "sticky",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "sticky",
           "reflectToAttr": false,
@@ -9071,7 +11302,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/item-group/item-group.tsx",
+      "filePath": "src/components/item-group/item-group.tsx",
       "encapsulation": "none",
       "tag": "ion-item-group",
       "docs": "",
@@ -9089,7 +11320,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/item-option/item-option.tsx",
+      "filePath": "src/components/item-option/item-option.tsx",
       "encapsulation": "shadow",
       "tag": "ion-item-option",
       "docs": "",
@@ -9132,6 +11363,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -9187,6 +11429,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -9204,6 +11451,11 @@
         {
           "name": "download",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
@@ -9223,6 +11475,11 @@
         {
           "name": "expandable",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "expandable",
           "reflectToAttr": false,
@@ -9240,6 +11497,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -9280,6 +11542,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -9299,6 +11566,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -9318,6 +11590,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -9400,7 +11677,7 @@
       }
     },
     {
-      "filePath": "./src/components/item-options/item-options.tsx",
+      "filePath": "src/components/item-options/item-options.tsx",
       "encapsulation": "none",
       "tag": "ion-item-options",
       "docs": "",
@@ -9410,6 +11687,17 @@
         {
           "name": "side",
           "type": "\"end\" | \"start\"",
+          "complexType": {
+            "original": "Side",
+            "resolved": "\"end\" | \"start\"",
+            "references": {
+              "Side": {
+                "location": "import",
+                "path": "../menu/menu-interface",
+                "id": "src/components/menu/menu-interface.ts::Side"
+              }
+            }
+          },
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
@@ -9436,6 +11724,11 @@
           "event": "ionSwipe",
           "detail": "any",
           "bubbles": true,
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "アイテムが完全にスワイプされたときに発行されます。",
@@ -9451,7 +11744,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/item-sliding/item-sliding.tsx",
+      "filePath": "src/components/item-sliding/item-sliding.tsx",
       "encapsulation": "none",
       "tag": "ion-item-sliding",
       "docs": "",
@@ -9461,6 +11754,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -9483,6 +11781,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "close() => Promise<void>",
           "parameters": [],
           "docs": "スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。",
@@ -9494,6 +11803,17 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "closeOpened() => Promise<boolean>",
           "parameters": [],
           "docs": "リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。",
@@ -9505,6 +11825,17 @@
             "type": "Promise<number>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<number>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<number>"
+          },
           "signature": "getOpenAmount() => Promise<number>",
           "parameters": [],
           "docs": "アイテムが開いている量をピクセル単位で取得します。",
@@ -9516,6 +11847,17 @@
             "type": "Promise<number>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<number>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<number>"
+          },
           "signature": "getSlidingRatio() => Promise<number>",
           "parameters": [],
           "docs": "オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いています。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。",
@@ -9527,6 +11869,32 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(side: Side | undefined) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+                  }
+                ],
+                "text": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "Side": {
+                "location": "import",
+                "path": "../menu/menu-interface",
+                "id": "src/components/menu/menu-interface.ts::Side"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "open(side: Side | undefined) => Promise<void>",
           "parameters": [],
           "docs": "スライド式の項目を開く。",
@@ -9543,6 +11911,11 @@
           "event": "ionDrag",
           "detail": "any",
           "bubbles": true,
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "スライド位置が変化したときに発行されます。",
@@ -9558,7 +11931,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/item/item.tsx",
+      "filePath": "src/components/item/item.tsx",
       "encapsulation": "shadow",
       "tag": "ion-item",
       "docs": "",
@@ -9601,6 +11974,11 @@
         {
           "name": "button",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "button",
           "reflectToAttr": false,
@@ -9618,6 +11996,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -9673,6 +12062,11 @@
         {
           "name": "counter",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "counter",
           "reflectToAttr": false,
@@ -9696,6 +12090,17 @@
         {
           "name": "counterFormatter",
           "type": "((inputLength: number, maxLength: number) => string) | undefined",
+          "complexType": {
+            "original": "CounterFormatter",
+            "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+            "references": {
+              "CounterFormatter": {
+                "location": "import",
+                "path": "./item-interface",
+                "id": "src/components/item/item-interface.ts::CounterFormatter"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
@@ -9720,6 +12125,11 @@
         {
           "name": "detail",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "detail",
           "reflectToAttr": false,
@@ -9739,6 +12149,11 @@
         {
           "name": "detailIcon",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "detail-icon",
           "reflectToAttr": false,
@@ -9756,6 +12171,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -9773,6 +12193,11 @@
         {
           "name": "download",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
@@ -9792,6 +12217,11 @@
         {
           "name": "fill",
           "type": "\"outline\" | \"solid\" | undefined",
+          "complexType": {
+            "original": "'outline' | 'solid'",
+            "resolved": "\"outline\" | \"solid\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
@@ -9816,6 +12246,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -9835,6 +12270,11 @@
         {
           "name": "lines",
           "type": "\"full\" | \"inset\" | \"none\" | undefined",
+          "complexType": {
+            "original": "'full' | 'inset' | 'none'",
+            "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
@@ -9884,6 +12324,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -9903,6 +12348,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder | undefined",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
@@ -9921,6 +12377,17 @@
         {
           "name": "routerDirection",
           "type": "\"back\" | \"forward\" | \"root\"",
+          "complexType": {
+            "original": "RouterDirection",
+            "resolved": "\"back\" | \"forward\" | \"root\"",
+            "references": {
+              "RouterDirection": {
+                "location": "import",
+                "path": "../router/utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              }
+            }
+          },
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
@@ -9947,6 +12414,11 @@
         {
           "name": "shape",
           "type": "\"round\" | undefined",
+          "complexType": {
+            "original": "'round'",
+            "resolved": "\"round\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
@@ -9967,6 +12439,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -9986,6 +12463,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -10123,22 +12605,22 @@
         {
           "name": "--highlight-color-focused",
           "annotation": "prop",
-          "docs": "フォーカスされたときのアイテムのハイライトの色"
+          "docs": "The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
         },
         {
           "name": "--highlight-color-invalid",
           "annotation": "prop",
-          "docs": "無効時のアイテムのハイライトの色"
+          "docs": "The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
         },
         {
           "name": "--highlight-color-valid",
           "annotation": "prop",
-          "docs": "有効時のアイテム上のハイライトの色"
+          "docs": "The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
         },
         {
           "name": "--highlight-height",
           "annotation": "prop",
-          "docs": "アイテムに表示されるハイライトの高さ"
+          "docs": "The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
         },
         {
           "name": "--inner-border-width",
@@ -10262,7 +12744,7 @@
       }
     },
     {
-      "filePath": "./src/components/label/label.tsx",
+      "filePath": "src/components/label/label.tsx",
       "encapsulation": "scoped",
       "tag": "ion-label",
       "docs": "",
@@ -10277,6 +12759,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -10353,6 +12846,11 @@
         {
           "name": "position",
           "type": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
+          "complexType": {
+            "original": "'fixed' | 'stacked' | 'floating'",
+            "resolved": "\"fixed\" | \"floating\" | \"stacked\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
@@ -10406,7 +12904,7 @@
       }
     },
     {
-      "filePath": "./src/components/list-header/list-header.tsx",
+      "filePath": "src/components/list-header/list-header.tsx",
       "encapsulation": "shadow",
       "tag": "ion-list-header",
       "docs": "",
@@ -10421,6 +12919,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -10476,6 +12985,11 @@
         {
           "name": "lines",
           "type": "\"full\" | \"inset\" | \"none\" | undefined",
+          "complexType": {
+            "original": "'full' | 'inset' | 'none'",
+            "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
@@ -10571,7 +13085,7 @@
       }
     },
     {
-      "filePath": "./src/components/list/list.tsx",
+      "filePath": "src/components/list/list.tsx",
       "encapsulation": "none",
       "tag": "ion-list",
       "docs": "",
@@ -10586,6 +13100,11 @@
         {
           "name": "inset",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "inset",
           "reflectToAttr": false,
@@ -10603,6 +13122,11 @@
         {
           "name": "lines",
           "type": "\"full\" | \"inset\" | \"none\" | undefined",
+          "complexType": {
+            "original": "'full' | 'inset' | 'none'",
+            "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "lines",
           "reflectToAttr": false,
@@ -10657,6 +13181,17 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "closeSlidingItems() => Promise<boolean>",
           "parameters": [],
           "docs": "リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。  実際に `ion-item-sliding` が閉じられた場合は `true` を返します。",
@@ -10679,7 +13214,7 @@
       }
     },
     {
-      "filePath": "./src/components/loading/loading.tsx",
+      "filePath": "src/components/loading/loading.tsx",
       "encapsulation": "scoped",
       "tag": "ion-loading",
       "docs": "",
@@ -10694,6 +13229,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -10711,6 +13251,11 @@
         {
           "name": "backdropDismiss",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
@@ -10728,6 +13273,11 @@
         {
           "name": "cssClass",
           "type": "string | string[] | undefined",
+          "complexType": {
+            "original": "string | string[]",
+            "resolved": "string | string[] | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
@@ -10750,6 +13300,11 @@
         {
           "name": "duration",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
@@ -10767,6 +13322,17 @@
         {
           "name": "enterAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ローディングインジケータが表示されたときに使用するアニメーションです。",
@@ -10785,6 +13351,11 @@
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ローダーに渡す追加属性。",
@@ -10803,6 +13374,11 @@
         {
           "name": "isOpen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
@@ -10820,6 +13396,11 @@
         {
           "name": "keyboardClose",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
@@ -10837,6 +13418,17 @@
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ローディングインジケータが解除されたときに使用するアニメーションです。",
@@ -10855,6 +13447,17 @@
         {
           "name": "message",
           "type": "IonicSafeString | string | undefined",
+          "complexType": {
+            "original": "string | IonicSafeString",
+            "resolved": "IonicSafeString | string | undefined",
+            "references": {
+              "IonicSafeString": {
+                "location": "import",
+                "path": "../../utils/sanitization",
+                "id": "src/utils/sanitization/index.ts::IonicSafeString"
+              }
+            }
+          },
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
@@ -10898,6 +13501,11 @@
         {
           "name": "showBackdrop",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
@@ -10915,6 +13523,17 @@
         {
           "name": "spinner",
           "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+          "complexType": {
+            "original": "SpinnerTypes | null",
+            "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+            "references": {
+              "SpinnerTypes": {
+                "location": "import",
+                "path": "../spinner/spinner-configs",
+                "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+              }
+            }
+          },
           "mutable": true,
           "attr": "spinner",
           "reflectToAttr": false,
@@ -10970,6 +13589,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -10987,6 +13611,11 @@
         {
           "name": "trigger",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
@@ -11011,6 +13640,36 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(data?: any, role?: string) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "data Any data to emit in the dismiss events."
+                  }
+                ],
+                "text": "Any data to emit in the dismiss events."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                  }
+                ],
+                "text": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "ローディングオーバーレイが提示された後、それを解除します。",
@@ -11031,6 +13690,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "ローディングが解除されたタイミングを解決するPromiseを返します。",
@@ -11042,6 +13721,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "ローディングが解除されるタイミングを解決するPromiseを返します。",
@@ -11053,6 +13752,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "present() => Promise<void>",
           "parameters": [],
           "docs": "作成後のローディングオーバーレイを提示します。",
@@ -11064,6 +13774,17 @@
           "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングインジケータが解除された後に発行されます。ionLoadingDidDismissの略記。",
@@ -11073,6 +13794,11 @@
           "event": "didPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングインジケータが提示された後に放出される。ionLoadingWillDismissの略記。",
@@ -11082,6 +13808,17 @@
           "event": "ionLoadingDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングが解除された後に発行されます。",
@@ -11091,6 +13828,11 @@
           "event": "ionLoadingDidPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングが提示された後に発行されます。",
@@ -11100,6 +13842,17 @@
           "event": "ionLoadingWillDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングが解除される前に発行されます。",
@@ -11109,6 +13862,11 @@
           "event": "ionLoadingWillPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングが提示される前に発行されます。",
@@ -11118,6 +13876,17 @@
           "event": "willDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングインジケータが解散する前に発行されます。ionLoadingWillDismissの略記です。",
@@ -11127,6 +13896,11 @@
           "event": "willPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ローディングインジケータが提示される前に発行されます。ionLoadingWillPresentの略記。",
@@ -11196,7 +13970,7 @@
       }
     },
     {
-      "filePath": "./src/components/menu-button/menu-button.tsx",
+      "filePath": "src/components/menu-button/menu-button.tsx",
       "encapsulation": "shadow",
       "tag": "ion-menu-button",
       "docs": "",
@@ -11219,6 +13993,11 @@
         {
           "name": "autoHide",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "auto-hide",
           "reflectToAttr": false,
@@ -11236,6 +14015,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -11291,6 +14081,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -11308,6 +14103,11 @@
         {
           "name": "menu",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "menu",
           "reflectToAttr": false,
@@ -11348,6 +14148,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -11479,7 +14284,7 @@
       }
     },
     {
-      "filePath": "./src/components/menu-toggle/menu-toggle.tsx",
+      "filePath": "src/components/menu-toggle/menu-toggle.tsx",
       "encapsulation": "shadow",
       "tag": "ion-menu-toggle",
       "docs": "",
@@ -11494,6 +14299,11 @@
         {
           "name": "autoHide",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "auto-hide",
           "reflectToAttr": false,
@@ -11511,6 +14321,11 @@
         {
           "name": "menu",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "menu",
           "reflectToAttr": false,
@@ -11557,7 +14372,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/menu/menu.tsx",
+      "filePath": "src/components/menu/menu.tsx",
       "encapsulation": "shadow",
       "tag": "ion-menu",
       "docs": "",
@@ -11576,6 +14391,11 @@
         {
           "name": "contentId",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "content-id",
           "reflectToAttr": true,
@@ -11595,6 +14415,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": true,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -11612,6 +14437,11 @@
         {
           "name": "maxEdgeStart",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "max-edge-start",
           "reflectToAttr": false,
@@ -11629,6 +14459,11 @@
         {
           "name": "menuId",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "menu-id",
           "reflectToAttr": true,
@@ -11648,6 +14483,17 @@
         {
           "name": "side",
           "type": "\"end\" | \"start\"",
+          "complexType": {
+            "original": "Side",
+            "resolved": "\"end\" | \"start\"",
+            "references": {
+              "Side": {
+                "location": "import",
+                "path": "./menu-interface",
+                "id": "src/components/menu/menu-interface.ts::Side"
+              }
+            }
+          },
           "mutable": false,
           "attr": "side",
           "reflectToAttr": true,
@@ -11670,6 +14516,11 @@
         {
           "name": "swipeGesture",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
@@ -11687,6 +14538,11 @@
         {
           "name": "type",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "type",
           "reflectToAttr": false,
@@ -11711,6 +14567,22 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(animated?: boolean) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "close(animated?: boolean) => Promise<boolean>",
           "parameters": [],
           "docs": "メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。",
@@ -11722,6 +14594,17 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "isActive() => Promise<boolean>",
           "parameters": [],
           "docs": "メニューがアクティブであれば `true` を返します。  メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味します。",
@@ -11733,6 +14616,17 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "isOpen() => Promise<boolean>",
           "parameters": [],
           "docs": "メニューが開いている場合は `true` を返します。",
@@ -11744,6 +14638,22 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(animated?: boolean) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "open(animated?: boolean) => Promise<boolean>",
           "parameters": [],
           "docs": "メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返します。",
@@ -11755,6 +14665,26 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              },
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>",
           "parameters": [],
           "docs": "ボタンを開いたり閉じたりします。操作が正常に完了しない場合は `false` を返します。",
@@ -11766,6 +14696,22 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(animated?: boolean) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "toggle(animated?: boolean) => Promise<boolean>",
           "parameters": [],
           "docs": "メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、`false`を返します。",
@@ -11777,6 +14723,11 @@
           "event": "ionDidClose",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "メニューが閉じられたときに発行されます。",
@@ -11786,6 +14737,11 @@
           "event": "ionDidOpen",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "メニューが開いているときに発行されます。",
@@ -11795,6 +14751,11 @@
           "event": "ionWillClose",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "メニューが閉じられようとするときに発行されます。",
@@ -11804,6 +14765,11 @@
           "event": "ionWillOpen",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "メニューが開かれようとするときに発行されます。",
@@ -11887,7 +14853,7 @@
       }
     },
     {
-      "filePath": "./src/components/modal/modal.tsx",
+      "filePath": "src/components/modal/modal.tsx",
       "encapsulation": "shadow",
       "tag": "ion-modal",
       "docs": "",
@@ -11918,6 +14884,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -11935,6 +14906,11 @@
         {
           "name": "backdropBreakpoint",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "backdrop-breakpoint",
           "reflectToAttr": false,
@@ -11952,6 +14928,11 @@
         {
           "name": "backdropDismiss",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
@@ -11969,6 +14950,11 @@
         {
           "name": "breakpoints",
           "type": "number[] | undefined",
+          "complexType": {
+            "original": "number[]",
+            "resolved": "number[] | undefined",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の1つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1]",
@@ -11987,6 +14973,16 @@
         {
           "name": "canDismiss",
           "type": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
+          "complexType": {
+            "original": "boolean | ((data?: any, role?: string) => Promise<boolean>)",
+            "resolved": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            }
+          },
           "mutable": false,
           "attr": "can-dismiss",
           "reflectToAttr": false,
@@ -12010,6 +15006,17 @@
         {
           "name": "enterAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "モーダルが表示されたときに使用するアニメーション。",
@@ -12028,6 +15035,11 @@
         {
           "name": "handle",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "handle",
           "reflectToAttr": false,
@@ -12047,6 +15059,17 @@
         {
           "name": "handleBehavior",
           "type": "\"cycle\" | \"none\" | undefined",
+          "complexType": {
+            "original": "ModalHandleBehavior",
+            "resolved": "\"cycle\" | \"none\" | undefined",
+            "references": {
+              "ModalHandleBehavior": {
+                "location": "import",
+                "path": "./modal-interface",
+                "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior"
+              }
+            }
+          },
           "mutable": false,
           "attr": "handle-behavior",
           "reflectToAttr": false,
@@ -12072,6 +15095,11 @@
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "モーダルに渡す追加属性。",
@@ -12090,6 +15118,11 @@
         {
           "name": "initialBreakpoint",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "initial-breakpoint",
           "reflectToAttr": false,
@@ -12109,6 +15142,11 @@
         {
           "name": "isOpen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
@@ -12126,6 +15164,11 @@
         {
           "name": "keepContentsMounted",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keep-contents-mounted",
           "reflectToAttr": false,
@@ -12143,6 +15186,11 @@
         {
           "name": "keyboardClose",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
@@ -12160,6 +15208,17 @@
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "モーダルが解除されたときに使用するアニメーションです。",
@@ -12199,6 +15258,16 @@
         {
           "name": "presentingElement",
           "type": "HTMLElement | undefined",
+          "complexType": {
+            "original": "HTMLElement",
+            "resolved": "HTMLElement | undefined",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOS modeでのみ適用されます。",
@@ -12217,6 +15286,11 @@
         {
           "name": "showBackdrop",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
@@ -12234,6 +15308,11 @@
         {
           "name": "trigger",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
@@ -12258,6 +15337,40 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(data?: any, role?: string) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "data Any data to emit in the dismiss events."
+                  }
+                ],
+                "text": "Any data to emit in the dismiss events."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+                  }
+                ],
+                "text": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ModalDismissOptions": {
+                "location": "global",
+                "id": "global::ModalDismissOptions"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "モーダルオーバーレイが表示された後、それを解除します。",
@@ -12278,6 +15391,17 @@
             "type": "Promise<number | undefined>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<number | undefined>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<number | undefined>"
+          },
           "signature": "getCurrentBreakpoint() => Promise<number | undefined>",
           "parameters": [],
           "docs": "シートスタイルモーダルの現在のブレークポイントを返します。",
@@ -12289,6 +15413,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "モーダルが解除されたときに解決するPromiseを返します。",
@@ -12300,6 +15444,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "モーダルがいつ解散するかを解決するPromiseを返します。",
@@ -12311,6 +15475,21 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ModalPresentOptions": {
+                "location": "global",
+                "id": "global::ModalPresentOptions"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "present() => Promise<void>",
           "parameters": [],
           "docs": "モーダルオーバーレイを作成した後に提示します。",
@@ -12322,6 +15501,22 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(breakpoint: number) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "setCurrentBreakpoint(breakpoint: number) => Promise<void>",
           "parameters": [],
           "docs": "シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。",
@@ -12333,6 +15528,17 @@
           "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが解散した後に発行されます。ionModalDidDismiss の略記です。",
@@ -12342,6 +15548,11 @@
           "event": "didPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが提示された後に発行されます。ionModalDidPresent の略記です。",
@@ -12351,6 +15562,17 @@
           "event": "ionBreakpointDidChange",
           "detail": "ModalBreakpointChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "ModalBreakpointChangeEventDetail",
+            "resolved": "ModalBreakpointChangeEventDetail",
+            "references": {
+              "ModalBreakpointChangeEventDetail": {
+                "location": "import",
+                "path": "./modal-interface",
+                "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルブレークポイントが変更された後に発行されます。",
@@ -12360,6 +15582,17 @@
           "event": "ionModalDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが終了した後に発行されます。",
@@ -12369,6 +15602,11 @@
           "event": "ionModalDidPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが提示された後に発行されます。",
@@ -12378,6 +15616,17 @@
           "event": "ionModalWillDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが解散する前に発行されます。",
@@ -12387,6 +15636,11 @@
           "event": "ionModalWillPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが提示される前に発行されます。",
@@ -12396,6 +15650,17 @@
           "event": "willDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが解散する前に発行されます。ionModalWillDismiss の略記です。",
@@ -12405,6 +15670,11 @@
           "event": "willPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "モーダルが提示される前に発行されます。ionModalWillPresent の略記です。",
@@ -12505,7 +15775,7 @@
       }
     },
     {
-      "filePath": "./src/components/nav-link/nav-link.tsx",
+      "filePath": "src/components/nav-link/nav-link.tsx",
       "encapsulation": "none",
       "tag": "ion-nav-link",
       "docs": "",
@@ -12515,6 +15785,17 @@
         {
           "name": "component",
           "type": "Function | HTMLElement | ViewController | null | string | undefined",
+          "complexType": {
+            "original": "NavComponent",
+            "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
+            "references": {
+              "NavComponent": {
+                "location": "import",
+                "path": "../nav/nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponent"
+              }
+            }
+          },
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
@@ -12546,6 +15827,17 @@
         {
           "name": "componentProps",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "ComponentProps",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {
+              "ComponentProps": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentProps"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "コンポーネントにpropsとして渡したいデータ。routerDirection\"` が `\"forward\"` または `\"root\"` である場合のみ使用します。",
@@ -12564,6 +15856,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "別ページに移動する際の遷移アニメーション。",
@@ -12582,6 +15885,17 @@
         {
           "name": "routerDirection",
           "type": "\"back\" | \"forward\" | \"root\"",
+          "complexType": {
+            "original": "RouterDirection",
+            "resolved": "\"back\" | \"forward\" | \"root\"",
+            "references": {
+              "RouterDirection": {
+                "location": "import",
+                "path": "../router/utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              }
+            }
+          },
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
@@ -12617,7 +15931,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/nav/nav.tsx",
+      "filePath": "src/components/nav/nav.tsx",
       "encapsulation": "shadow",
       "tag": "ion-nav",
       "docs": "",
@@ -12627,6 +15941,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -12644,6 +15963,17 @@
         {
           "name": "animation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "デフォルトでは、`ion-nav` はmode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。",
@@ -12662,6 +15992,17 @@
         {
           "name": "root",
           "type": "Function | HTMLElement | ViewController | null | string | undefined",
+          "complexType": {
+            "original": "NavComponent",
+            "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
+            "references": {
+              "NavComponent": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponent"
+              }
+            }
+          },
           "mutable": false,
           "attr": "root",
           "reflectToAttr": false,
@@ -12693,6 +16034,17 @@
         {
           "name": "rootParams",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "ComponentProps",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {
+              "ComponentProps": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentProps"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルートコンポーネントの任意のパラメータ",
@@ -12711,6 +16063,11 @@
         {
           "name": "swipeGesture",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
@@ -12735,6 +16092,32 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(view?: ViewController) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "view The view to check."
+                  }
+                ],
+                "text": "The view to check."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ViewController": {
+                "location": "import",
+                "path": "./view-controller",
+                "id": "src/components/nav/view-controller.ts::ViewController"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "canGoBack(view?: ViewController) => Promise<boolean>",
           "parameters": [],
           "docs": "現在のビューが戻ることができる場合は `true` を返します。",
@@ -12751,6 +16134,22 @@
             "type": "Promise<ViewController | undefined>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<ViewController | undefined>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ViewController": {
+                "location": "import",
+                "path": "./view-controller",
+                "id": "src/components/nav/view-controller.ts::ViewController"
+              }
+            },
+            "return": "Promise<ViewController | undefined>"
+          },
           "signature": "getActive() => Promise<ViewController | undefined>",
           "parameters": [],
           "docs": "アクティブビューを取得します。",
@@ -12762,6 +16161,32 @@
             "type": "Promise<ViewController | undefined>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(index: number) => Promise<ViewController | undefined>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "index The index of the view."
+                  }
+                ],
+                "text": "The index of the view."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ViewController": {
+                "location": "import",
+                "path": "./view-controller",
+                "id": "src/components/nav/view-controller.ts::ViewController"
+              }
+            },
+            "return": "Promise<ViewController | undefined>"
+          },
           "signature": "getByIndex(index: number) => Promise<ViewController | undefined>",
           "parameters": [],
           "docs": "指定されたインデックスにあるビューを取得します。",
@@ -12778,6 +16203,32 @@
             "type": "Promise<ViewController | undefined>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(view?: ViewController) => Promise<ViewController | undefined>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "view The view to get."
+                  }
+                ],
+                "text": "The view to get."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ViewController": {
+                "location": "import",
+                "path": "./view-controller",
+                "id": "src/components/nav/view-controller.ts::ViewController"
+              }
+            },
+            "return": "Promise<ViewController | undefined>"
+          },
           "signature": "getPrevious(view?: ViewController) => Promise<ViewController | undefined>",
           "parameters": [],
           "docs": "前のビューを取得します。",
@@ -12794,6 +16245,87 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "insertIndex The index to insert the component at in the stack."
+                  }
+                ],
+                "text": "The index to insert the component at in the stack."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "component The component to insert into the navigation stack."
+                  }
+                ],
+                "text": "The component to insert into the navigation stack."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "componentProps Any properties of the component."
+                  }
+                ],
+                "text": "Any properties of the component."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavComponent": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponent"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              },
+              "ComponentProps": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentProps"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。",
@@ -12826,6 +16358,74 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "insertIndex The index to insert the components at in the stack."
+                  }
+                ],
+                "text": "The index to insert the components at in the stack."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "insertComponents The components to insert into the navigation stack."
+                  }
+                ],
+                "text": "The components to insert into the navigation stack."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavComponent": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponent"
+              },
+              "NavComponentWithProps": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。",
@@ -12854,6 +16454,46 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "ナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。",
@@ -12874,6 +16514,65 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "indexOrViewCtrl The index or view controller to pop to."
+                  }
+                ],
+                "text": "The index or view controller to pop to."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ViewController": {
+                "location": "import",
+                "path": "./view-controller",
+                "id": "src/components/nav/view-controller.ts::ViewController"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              },
+              "TransitionInstruction": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionInstruction"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "ナビゲーションスタック内の特定のインデックスにポップします。",
@@ -12898,6 +16597,46 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。",
@@ -12918,6 +16657,78 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "component The component to push onto the navigation stack."
+                  }
+                ],
+                "text": "The component to push onto the navigation stack."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "componentProps Any properties of the component."
+                  }
+                ],
+                "text": "Any properties of the component."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavComponent": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponent"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              },
+              "ComponentProps": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentProps"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。",
@@ -12946,6 +16757,64 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "startIndex The number to begin removal at."
+                  }
+                ],
+                "text": "The number to begin removal at."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "removeCount The number of components to remove."
+                  }
+                ],
+                "text": "The number of components to remove."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。",
@@ -12974,6 +16843,65 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "views The list of views to set as the navigation stack."
+                  }
+                ],
+                "text": "The list of views to set as the navigation stack."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavComponent": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponent"
+              },
+              "NavComponentWithProps": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。",
@@ -12998,6 +16926,78 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "component The component to set as the root of the navigation stack."
+                  }
+                ],
+                "text": "The component to set as the root of the navigation stack."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "componentProps Any properties of the component."
+                  }
+                ],
+                "text": "Any properties of the component."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "opts The navigation options."
+                  }
+                ],
+                "text": "The navigation options."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "done The transition complete function."
+                  }
+                ],
+                "text": "The transition complete function."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "NavComponent": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavComponent"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              },
+              "ComponentProps": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentProps"
+              },
+              "NavOptions": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::NavOptions"
+              },
+              "TransitionDoneFn": {
+                "location": "import",
+                "path": "./nav-interface",
+                "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
           "parameters": [],
           "docs": "現在のナビゲーションスタックのルートをコンポーネントに設定します。",
@@ -13026,6 +17026,11 @@
           "event": "ionNavDidChange",
           "detail": "void",
           "bubbles": false,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ナビのコンポーネントが変更されたときに発生するイベント",
@@ -13035,6 +17040,11 @@
           "event": "ionNavWillChange",
           "detail": "void",
           "bubbles": false,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ナビコンポーネントが変更されたときに発生するイベント",
@@ -13050,7 +17060,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/note/note.tsx",
+      "filePath": "src/components/note/note.tsx",
       "encapsulation": "shadow",
       "tag": "ion-note",
       "docs": "",
@@ -13065,6 +17075,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -13162,7 +17183,7 @@
       }
     },
     {
-      "filePath": "./src/components/picker/picker.tsx",
+      "filePath": "src/components/picker/picker.tsx",
       "encapsulation": "scoped",
       "tag": "ion-picker",
       "docs": "",
@@ -13177,6 +17198,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -13194,6 +17220,11 @@
         {
           "name": "backdropDismiss",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
@@ -13211,6 +17242,17 @@
         {
           "name": "buttons",
           "type": "PickerButton[]",
+          "complexType": {
+            "original": "PickerButton[]",
+            "resolved": "PickerButton[]",
+            "references": {
+              "PickerButton": {
+                "location": "import",
+                "path": "./picker-interface",
+                "id": "src/components/picker/picker-interface.ts::PickerButton"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ピッカーの上部に表示されるボタンの配列。",
@@ -13227,6 +17269,17 @@
         {
           "name": "columns",
           "type": "PickerColumn[]",
+          "complexType": {
+            "original": "PickerColumn[]",
+            "resolved": "PickerColumn[]",
+            "references": {
+              "PickerColumn": {
+                "location": "import",
+                "path": "./picker-interface",
+                "id": "src/components/picker/picker-interface.ts::PickerColumn"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ピッカーに表示されるカラムの配列。",
@@ -13243,6 +17296,11 @@
         {
           "name": "cssClass",
           "type": "string | string[] | undefined",
+          "complexType": {
+            "original": "string | string[]",
+            "resolved": "string | string[] | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
@@ -13265,6 +17323,11 @@
         {
           "name": "duration",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
@@ -13282,6 +17345,17 @@
         {
           "name": "enterAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ピッカーが表示されたときに使用するアニメーション。",
@@ -13300,6 +17374,11 @@
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ピッカーに渡す追加属性。",
@@ -13318,6 +17397,11 @@
         {
           "name": "isOpen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
@@ -13335,6 +17419,11 @@
         {
           "name": "keyboardClose",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
@@ -13352,6 +17441,17 @@
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ピッカーが解除されたときに使用するアニメーションです。",
@@ -13391,6 +17491,11 @@
         {
           "name": "showBackdrop",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
@@ -13408,6 +17513,11 @@
         {
           "name": "trigger",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
@@ -13432,6 +17542,36 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(data?: any, role?: string) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "data Any data to emit in the dismiss events."
+                  }
+                ],
+                "text": "Any data to emit in the dismiss events."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                  }
+                ],
+                "text": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "ピッカー・オーバーレイが表示された後、それを解除します。",
@@ -13452,6 +17592,32 @@
             "type": "Promise<PickerColumn | undefined>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(name: string) => Promise<PickerColumn | undefined>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "name The name of the column."
+                  }
+                ],
+                "text": "The name of the column."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "PickerColumn": {
+                "location": "import",
+                "path": "./picker-interface",
+                "id": "src/components/picker/picker-interface.ts::PickerColumn"
+              }
+            },
+            "return": "Promise<PickerColumn | undefined>"
+          },
           "signature": "getColumn(name: string) => Promise<PickerColumn | undefined>",
           "parameters": [],
           "docs": "指定された名前に一致するカラムを取得します。",
@@ -13468,6 +17634,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "ピッカーが解散したことを解決するPromiseを返します。",
@@ -13479,6 +17665,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "ピッカーが解散するタイミングを解決するPromiseを返します。",
@@ -13490,6 +17696,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "present() => Promise<void>",
           "parameters": [],
           "docs": "ピッカー・オーバーレイを作成した後に提示します。",
@@ -13501,6 +17718,17 @@
           "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが解散した後に発行されます。ionPickerDidDismissの略記です。",
@@ -13510,6 +17738,11 @@
           "event": "didPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが提示された後に発行されます。ionPickerWillDismissの略記です。",
@@ -13519,6 +17752,17 @@
           "event": "ionPickerDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが解散した後に発行されます。",
@@ -13528,6 +17772,11 @@
           "event": "ionPickerDidPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが提示された後に発行されます。",
@@ -13537,6 +17786,17 @@
           "event": "ionPickerWillDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが解散する前に発行されます。",
@@ -13546,6 +17806,11 @@
           "event": "ionPickerWillPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが提示される前に発行されます。",
@@ -13555,6 +17820,17 @@
           "event": "willDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが解散する前に発行されます。ionPickerWillDismissの略記です。",
@@ -13564,6 +17840,11 @@
           "event": "willPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ピッカーが提示される前に発行されます。ionPickerWillPresentの略記です。",
@@ -13653,7 +17934,7 @@
       }
     },
     {
-      "filePath": "./src/components/popover/popover.tsx",
+      "filePath": "src/components/popover/popover.tsx",
       "encapsulation": "shadow",
       "tag": "ion-popover",
       "docs": "",
@@ -13684,6 +17965,17 @@
         {
           "name": "alignment",
           "type": "\"center\" | \"end\" | \"start\" | undefined",
+          "complexType": {
+            "original": "PositionAlign",
+            "resolved": "\"center\" | \"end\" | \"start\" | undefined",
+            "references": {
+              "PositionAlign": {
+                "location": "import",
+                "path": "./popover-interface",
+                "id": "src/components/popover/popover-interface.ts::PositionAlign"
+              }
+            }
+          },
           "mutable": true,
           "attr": "alignment",
           "reflectToAttr": false,
@@ -13712,6 +18004,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -13729,6 +18026,11 @@
         {
           "name": "arrow",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "arrow",
           "reflectToAttr": false,
@@ -13746,6 +18048,11 @@
         {
           "name": "backdropDismiss",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "backdrop-dismiss",
           "reflectToAttr": false,
@@ -13763,6 +18070,17 @@
         {
           "name": "component",
           "type": "Function | HTMLElement | null | string | undefined",
+          "complexType": {
+            "original": "ComponentRef",
+            "resolved": "Function | HTMLElement | null | string | undefined",
+            "references": {
+              "ComponentRef": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentRef"
+              }
+            }
+          },
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
@@ -13791,6 +18109,17 @@
         {
           "name": "componentProps",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "ComponentProps",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {
+              "ComponentProps": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentProps"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。",
@@ -13809,6 +18138,11 @@
         {
           "name": "dismissOnSelect",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "dismiss-on-select",
           "reflectToAttr": false,
@@ -13826,6 +18160,17 @@
         {
           "name": "enterAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ポップオーバーが表示されたときに使用するアニメーションです。",
@@ -13844,6 +18189,11 @@
         {
           "name": "event",
           "type": "any",
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
           "mutable": false,
           "attr": "event",
           "reflectToAttr": false,
@@ -13860,6 +18210,11 @@
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ポップオーバーに渡す追加属性。",
@@ -13878,6 +18233,11 @@
         {
           "name": "isOpen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
@@ -13895,6 +18255,11 @@
         {
           "name": "keepContentsMounted",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keep-contents-mounted",
           "reflectToAttr": false,
@@ -13912,6 +18277,11 @@
         {
           "name": "keyboardClose",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
@@ -13929,6 +18299,17 @@
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ポップオーバーが解除されたときに使用するアニメーションです。",
@@ -13968,6 +18349,17 @@
         {
           "name": "reference",
           "type": "\"event\" | \"trigger\"",
+          "complexType": {
+            "original": "PositionReference",
+            "resolved": "\"event\" | \"trigger\"",
+            "references": {
+              "PositionReference": {
+                "location": "import",
+                "path": "./popover-interface",
+                "id": "src/components/popover/popover-interface.ts::PositionReference"
+              }
+            }
+          },
           "mutable": false,
           "attr": "reference",
           "reflectToAttr": false,
@@ -13990,6 +18382,11 @@
         {
           "name": "showBackdrop",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-backdrop",
           "reflectToAttr": false,
@@ -14007,6 +18404,17 @@
         {
           "name": "side",
           "type": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
+          "complexType": {
+            "original": "PositionSide",
+            "resolved": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
+            "references": {
+              "PositionSide": {
+                "location": "import",
+                "path": "./popover-interface",
+                "id": "src/components/popover/popover-interface.ts::PositionSide"
+              }
+            }
+          },
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
@@ -14045,10 +18453,21 @@
         {
           "name": "size",
           "type": "\"auto\" | \"cover\"",
+          "complexType": {
+            "original": "PopoverSize",
+            "resolved": "\"auto\" | \"cover\"",
+            "references": {
+              "PopoverSize": {
+                "location": "import",
+                "path": "./popover-interface",
+                "id": "src/components/popover/popover-interface.ts::PopoverSize"
+              }
+            }
+          },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "ポップオーバーの幅を計算する方法を記述します。もし `\"cover\"` ならば、ポップオーバーの幅はトリガーの幅と一致します。auto\"` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定される。",
+          "docs": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be set to a static default value.",
           "docsTags": [],
           "default": "'auto'",
           "values": [
@@ -14067,6 +18486,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -14084,6 +18508,11 @@
         {
           "name": "trigger",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
@@ -14103,6 +18532,17 @@
         {
           "name": "triggerAction",
           "type": "\"click\" | \"context-menu\" | \"hover\"",
+          "complexType": {
+            "original": "TriggerAction",
+            "resolved": "\"click\" | \"context-menu\" | \"hover\"",
+            "references": {
+              "TriggerAction": {
+                "location": "import",
+                "path": "./popover-interface",
+                "id": "src/components/popover/popover-interface.ts::TriggerAction"
+              }
+            }
+          },
           "mutable": false,
           "attr": "trigger-action",
           "reflectToAttr": false,
@@ -14134,6 +18574,49 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "data Any data to emit in the dismiss events."
+                  }
+                ],
+                "text": "Any data to emit in the dismiss events."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+                  }
+                ],
+                "text": "The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+                  }
+                ],
+                "text": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "PopoverDismissOptions": {
+                "location": "global",
+                "id": "global::PopoverDismissOptions"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>",
           "parameters": [],
           "docs": "ポップオーバーオーバーレイが提示された後、それを解除します。",
@@ -14158,6 +18641,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "ポップオーバーが解除されたタイミングを解決するPromiseを返します。",
@@ -14169,6 +18672,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "ポップオーバーが解除されるタイミングを解決するPromiseを返します。",
@@ -14180,6 +18703,42 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
+            "parameters": [
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "MouseEvent": {
+                "location": "global",
+                "id": "global::MouseEvent"
+              },
+              "TouchEvent": {
+                "location": "global",
+                "id": "global::TouchEvent"
+              },
+              "PointerEvent": {
+                "location": "global",
+                "id": "global::PointerEvent"
+              },
+              "CustomEvent": {
+                "location": "global",
+                "id": "global::CustomEvent"
+              },
+              "PopoverPresentOptions": {
+                "location": "global",
+                "id": "global::PopoverPresentOptions"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
           "parameters": [],
           "docs": "ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。",
@@ -14191,6 +18750,17 @@
           "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。",
@@ -14200,6 +18770,11 @@
           "event": "didPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。",
@@ -14209,6 +18784,17 @@
           "event": "ionPopoverDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが解除された後に発行されます。",
@@ -14218,6 +18804,11 @@
           "event": "ionPopoverDidPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが表示された後に発行されます。",
@@ -14227,6 +18818,17 @@
           "event": "ionPopoverWillDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが解除される前に発行されます。",
@@ -14236,6 +18838,11 @@
           "event": "ionPopoverWillPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが表示される前に発行されます。",
@@ -14245,6 +18852,17 @@
           "event": "willDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが解散する前に発行されます。ionPopoverWillDismissの略記です。",
@@ -14254,6 +18872,11 @@
           "event": "willPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ポップオーバーが提示される前に発行されます。ionPopoverWillPresentの略記です。",
@@ -14358,7 +18981,7 @@
       }
     },
     {
-      "filePath": "./src/components/progress-bar/progress-bar.tsx",
+      "filePath": "src/components/progress-bar/progress-bar.tsx",
       "encapsulation": "shadow",
       "tag": "ion-progress-bar",
       "docs": "",
@@ -14385,6 +19008,11 @@
         {
           "name": "buffer",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "buffer",
           "reflectToAttr": false,
@@ -14402,6 +19030,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -14478,6 +19117,11 @@
         {
           "name": "reversed",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "reversed",
           "reflectToAttr": false,
@@ -14495,6 +19139,11 @@
         {
           "name": "type",
           "type": "\"determinate\" | \"indeterminate\"",
+          "complexType": {
+            "original": "'determinate' | 'indeterminate'",
+            "resolved": "\"determinate\" | \"indeterminate\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -14517,6 +19166,11 @@
         {
           "name": "value",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
@@ -14572,7 +19226,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/radio-group/radio-group.tsx",
+      "filePath": "src/components/radio-group/radio-group.tsx",
       "encapsulation": "none",
       "tag": "ion-radio-group",
       "docs": "",
@@ -14582,6 +19236,11 @@
         {
           "name": "allowEmptySelection",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "allow-empty-selection",
           "reflectToAttr": false,
@@ -14599,6 +19258,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -14616,6 +19280,11 @@
         {
           "name": "value",
           "type": "any",
+          "complexType": {
+            "original": "any | null",
+            "resolved": "any",
+            "references": {}
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -14636,6 +19305,17 @@
           "event": "ionChange",
           "detail": "RadioGroupChangeEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "RadioGroupChangeEventDetail",
+            "resolved": "RadioGroupChangeEventDetail<any>",
+            "references": {
+              "RadioGroupChangeEventDetail": {
+                "location": "import",
+                "path": "./radio-group-interface",
+                "id": "src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "値が変更されたときに発行されます。",
@@ -14664,7 +19344,7 @@
       }
     },
     {
-      "filePath": "./src/components/radio/radio.tsx",
+      "filePath": "src/components/radio/radio.tsx",
       "encapsulation": "shadow",
       "tag": "ion-radio",
       "docs": "",
@@ -14691,6 +19371,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -14746,6 +19437,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -14763,6 +19459,11 @@
         {
           "name": "justify",
           "type": "\"end\" | \"space-between\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'space-between'",
+            "resolved": "\"end\" | \"space-between\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
@@ -14789,6 +19490,11 @@
         {
           "name": "labelPlacement",
           "type": "\"end\" | \"fixed\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'fixed'",
+            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
@@ -14815,6 +19521,11 @@
         {
           "name": "legacy",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
@@ -14855,6 +19566,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -14872,6 +19588,11 @@
         {
           "name": "value",
           "type": "any",
+          "complexType": {
+            "original": "any | null",
+            "resolved": "any",
+            "references": {}
+          },
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
@@ -14892,6 +19613,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ラジオボタンのフォーカスが外れたときに発行されます。",
@@ -14901,6 +19627,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ラジオボタンにフォーカスが当たったときに発行されます。",
@@ -14957,7 +19688,7 @@
       }
     },
     {
-      "filePath": "./src/components/range/range.tsx",
+      "filePath": "src/components/range/range.tsx",
       "encapsulation": "shadow",
       "tag": "ion-range",
       "docs": "",
@@ -15008,6 +19739,11 @@
         {
           "name": "activeBarStart",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "active-bar-start",
           "reflectToAttr": false,
@@ -15027,6 +19763,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -15082,6 +19829,11 @@
         {
           "name": "debounce",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
@@ -15101,6 +19853,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -15118,6 +19875,11 @@
         {
           "name": "dualKnobs",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "dual-knobs",
           "reflectToAttr": false,
@@ -15132,9 +19894,38 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "label",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "The text to display as the control's label. Use this over the `label` slot if\nyou only need plain text. The `label` property will take priority over the\n`label` slot if both are used.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "labelPlacement",
           "type": "\"end\" | \"fixed\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'fixed'",
+            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
@@ -15161,6 +19952,11 @@
         {
           "name": "legacy",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
@@ -15180,6 +19976,11 @@
         {
           "name": "max",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
@@ -15197,6 +19998,11 @@
         {
           "name": "min",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "min",
           "reflectToAttr": false,
@@ -15235,6 +20041,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -15252,6 +20063,11 @@
         {
           "name": "pin",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pin",
           "reflectToAttr": false,
@@ -15269,6 +20085,17 @@
         {
           "name": "pinFormatter",
           "type": "(value: number) => string | number",
+          "complexType": {
+            "original": "PinFormatter",
+            "resolved": "(value: number) => string | number",
+            "references": {
+              "PinFormatter": {
+                "location": "import",
+                "path": "./range-interface",
+                "id": "src/components/range/range-interface.ts::PinFormatter"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。",
@@ -15288,6 +20115,11 @@
         {
           "name": "snaps",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "snaps",
           "reflectToAttr": false,
@@ -15305,6 +20137,11 @@
         {
           "name": "step",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
@@ -15322,6 +20159,11 @@
         {
           "name": "ticks",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "ticks",
           "reflectToAttr": false,
@@ -15339,6 +20181,17 @@
         {
           "name": "value",
           "type": "number | { lower: number; upper: number; }",
+          "complexType": {
+            "original": "RangeValue",
+            "resolved": "number | { lower: number; upper: number; }",
+            "references": {
+              "RangeValue": {
+                "location": "import",
+                "path": "./range-interface",
+                "id": "src/components/range/range-interface.ts::RangeValue"
+              }
+            }
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -15363,6 +20216,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "レンジの焦点が合わなくなったときに発行されます。",
@@ -15372,6 +20230,17 @@
           "event": "ionChange",
           "detail": "RangeChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "RangeChangeEventDetail",
+            "resolved": "RangeChangeEventDetail",
+            "references": {
+              "RangeChangeEventDetail": {
+                "location": "import",
+                "path": "./range-interface",
+                "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "`ionChange`イベントは、`<ion-range>`要素に対して、ユーザーがその要素の値を変更したときに発生します： - ドラッグした後にノブを離したとき - キーボードの矢印でノブを動かしたとき プログラムで値を変更したときは、`ionChange`イベントは発生しません。",
@@ -15381,6 +20250,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "レンジのフォーカスが合ったときに発行されます。",
@@ -15390,6 +20264,17 @@
           "event": "ionInput",
           "detail": "RangeChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "RangeChangeEventDetail",
+            "resolved": "RangeChangeEventDetail",
+            "references": {
+              "RangeChangeEventDetail": {
+                "location": "import",
+                "path": "./range-interface",
+                "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "`ionInput`イベントは、`<ion-range>`要素に対して、値が変更されたときに発生するイベントです。`ionChange`とは異なり、`ionInput`はユーザがノブをドラッグしている間、継続して発生します。",
@@ -15399,6 +20284,17 @@
           "event": "ionKnobMoveEnd",
           "detail": "RangeKnobMoveEndEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "RangeKnobMoveEndEventDetail",
+            "resolved": "RangeKnobMoveEndEventDetail",
+            "references": {
+              "RangeKnobMoveEndEventDetail": {
+                "location": "import",
+                "path": "./range-interface",
+                "id": "src/components/range/range-interface.ts::RangeKnobMoveEndEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。",
@@ -15408,6 +20304,17 @@
           "event": "ionKnobMoveStart",
           "detail": "RangeKnobMoveStartEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "RangeKnobMoveStartEventDetail",
+            "resolved": "RangeKnobMoveStartEventDetail",
+            "references": {
+              "RangeKnobMoveStartEventDetail": {
+                "location": "import",
+                "path": "./range-interface",
+                "id": "src/components/range/range-interface.ts::RangeKnobMoveStartEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。",
@@ -15517,7 +20424,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/refresher-content/refresher-content.tsx",
+      "filePath": "src/components/refresher-content/refresher-content.tsx",
       "encapsulation": "none",
       "tag": "ion-refresher-content",
       "docs": "",
@@ -15527,6 +20434,17 @@
         {
           "name": "pullingIcon",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "SpinnerTypes | string | null",
+            "resolved": "null | string | undefined",
+            "references": {
+              "SpinnerTypes": {
+                "location": "import",
+                "path": "../spinner/spinner-configs",
+                "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+              }
+            }
+          },
           "mutable": true,
           "attr": "pulling-icon",
           "reflectToAttr": false,
@@ -15549,6 +20467,17 @@
         {
           "name": "pullingText",
           "type": "IonicSafeString | string | undefined",
+          "complexType": {
+            "original": "string | IonicSafeString",
+            "resolved": "IonicSafeString | string | undefined",
+            "references": {
+              "IonicSafeString": {
+                "location": "import",
+                "path": "../../utils/sanitization",
+                "id": "src/utils/sanitization/index.ts::IonicSafeString"
+              }
+            }
+          },
           "mutable": false,
           "attr": "pulling-text",
           "reflectToAttr": false,
@@ -15571,6 +20500,17 @@
         {
           "name": "refreshingSpinner",
           "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+          "complexType": {
+            "original": "SpinnerTypes | null",
+            "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | null | undefined",
+            "references": {
+              "SpinnerTypes": {
+                "location": "import",
+                "path": "../spinner/spinner-configs",
+                "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+              }
+            }
+          },
           "mutable": true,
           "attr": "refreshing-spinner",
           "reflectToAttr": false,
@@ -15626,6 +20566,17 @@
         {
           "name": "refreshingText",
           "type": "IonicSafeString | string | undefined",
+          "complexType": {
+            "original": "string | IonicSafeString",
+            "resolved": "IonicSafeString | string | undefined",
+            "references": {
+              "IonicSafeString": {
+                "location": "import",
+                "path": "../../utils/sanitization",
+                "id": "src/utils/sanitization/index.ts::IonicSafeString"
+              }
+            }
+          },
           "mutable": false,
           "attr": "refreshing-text",
           "reflectToAttr": false,
@@ -15665,7 +20616,7 @@
       }
     },
     {
-      "filePath": "./src/components/refresher/refresher.tsx",
+      "filePath": "src/components/refresher/refresher.tsx",
       "encapsulation": "none",
       "tag": "ion-refresher",
       "docs": "",
@@ -15675,6 +20626,11 @@
         {
           "name": "closeDuration",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "close-duration",
           "reflectToAttr": false,
@@ -15692,6 +20648,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -15709,6 +20670,11 @@
         {
           "name": "pullFactor",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-factor",
           "reflectToAttr": false,
@@ -15726,6 +20692,11 @@
         {
           "name": "pullMax",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-max",
           "reflectToAttr": false,
@@ -15743,6 +20714,11 @@
         {
           "name": "pullMin",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "pull-min",
           "reflectToAttr": false,
@@ -15760,6 +20736,11 @@
         {
           "name": "snapbackDuration",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "snapback-duration",
           "reflectToAttr": false,
@@ -15782,6 +20763,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "cancel() => Promise<void>",
           "parameters": [],
           "docs": "リフレッシュの状態を `refreshing` から `cancelling` に変更します。",
@@ -15793,6 +20785,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "complete() => Promise<void>",
           "parameters": [],
           "docs": "非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。",
@@ -15804,6 +20807,17 @@
             "type": "Promise<number>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<number>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<number>"
+          },
           "signature": "getProgress() => Promise<number>",
           "parameters": [],
           "docs": "ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。",
@@ -15815,6 +20829,11 @@
           "event": "ionPull",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発行されます。",
@@ -15824,6 +20843,17 @@
           "event": "ionRefresh",
           "detail": "RefresherEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "RefresherEventDetail",
+            "resolved": "RefresherEventDetail",
+            "references": {
+              "RefresherEventDetail": {
+                "location": "import",
+                "path": "./refresher-interface",
+                "id": "src/components/refresher/refresher-interface.ts::RefresherEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発行されます。リフレッシャーの状態を `refreshing` に更新します。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。",
@@ -15833,6 +20863,11 @@
           "event": "ionStart",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ユーザーが引き下げを開始するときに発行されます。",
@@ -15848,7 +20883,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/reorder-group/reorder-group.tsx",
+      "filePath": "src/components/reorder-group/reorder-group.tsx",
       "encapsulation": "none",
       "tag": "ion-reorder-group",
       "docs": "",
@@ -15858,6 +20893,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -15880,6 +20920,27 @@
             "type": "Promise<any>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(listOrReorder?: boolean | any[]) => Promise<any>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
+                  }
+                ],
+                "text": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<any>"
+          },
           "signature": "complete(listOrReorder?: boolean | any[]) => Promise<any>",
           "parameters": [],
           "docs": "再注文操作を完了します。ionItemReorder` イベントで呼び出す必要がある。  アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。  パラメータが渡されない場合、または `true` が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。 `false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。",
@@ -15896,6 +20957,17 @@
           "event": "ionItemReorder",
           "detail": "ItemReorderEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "ItemReorderEventDetail",
+            "resolved": "ItemReorderEventDetail",
+            "references": {
+              "ItemReorderEventDetail": {
+                "location": "import",
+                "path": "./reorder-group-interface",
+                "id": "src/components/reorder-group/reorder-group-interface.ts::ItemReorderEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。",
@@ -15911,7 +20983,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/reorder/reorder.tsx",
+      "filePath": "src/components/reorder/reorder.tsx",
       "encapsulation": "shadow",
       "tag": "ion-reorder",
       "docs": "",
@@ -15951,7 +21023,7 @@
       }
     },
     {
-      "filePath": "./src/components/ripple-effect/ripple-effect.tsx",
+      "filePath": "src/components/ripple-effect/ripple-effect.tsx",
       "encapsulation": "shadow",
       "tag": "ion-ripple-effect",
       "docs": "",
@@ -15961,6 +21033,11 @@
         {
           "name": "type",
           "type": "\"bounded\" | \"unbounded\"",
+          "complexType": {
+            "original": "'bounded' | 'unbounded'",
+            "resolved": "\"bounded\" | \"unbounded\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -15988,6 +21065,36 @@
             "type": "Promise<() => void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(x: number, y: number) => Promise<() => void>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "x The horizontal coordinate of where the ripple should start."
+                  }
+                ],
+                "text": "The horizontal coordinate of where the ripple should start."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "y The vertical coordinate of where the ripple should start."
+                  }
+                ],
+                "text": "The vertical coordinate of where the ripple should start."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<() => void>"
+          },
           "signature": "addRipple(x: number, y: number) => Promise<() => void>",
           "parameters": [],
           "docs": "親要素に波及効果を付加します。",
@@ -16071,7 +21178,7 @@
       }
     },
     {
-      "filePath": "./src/components/route-redirect/route-redirect.tsx",
+      "filePath": "src/components/route-redirect/route-redirect.tsx",
       "encapsulation": "none",
       "tag": "ion-route-redirect",
       "docs": "",
@@ -16081,6 +21188,11 @@
         {
           "name": "from",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "from",
           "reflectToAttr": false,
@@ -16097,6 +21209,11 @@
         {
           "name": "to",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "string | undefined | null",
+            "resolved": "null | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "to",
           "reflectToAttr": false,
@@ -16123,6 +21240,11 @@
           "event": "ionRouteRedirectChanged",
           "detail": "any",
           "bubbles": true,
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。  ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。",
@@ -16138,7 +21260,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/route/route.tsx",
+      "filePath": "src/components/route/route.tsx",
       "encapsulation": "none",
       "tag": "ion-route",
       "docs": "",
@@ -16148,6 +21270,17 @@
         {
           "name": "beforeEnter",
           "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+          "complexType": {
+            "original": "NavigationHookCallback",
+            "resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+            "references": {
+              "NavigationHookCallback": {
+                "location": "import",
+                "path": "./route-interface",
+                "id": "src/components/route/route-interface.ts::NavigationHookCallback"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルーターがアクセスしようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
@@ -16169,6 +21302,17 @@
         {
           "name": "beforeLeave",
           "type": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+          "complexType": {
+            "original": "NavigationHookCallback",
+            "resolved": "(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined",
+            "references": {
+              "NavigationHookCallback": {
+                "location": "import",
+                "path": "./route-interface",
+                "id": "src/components/route/route-interface.ts::NavigationHookCallback"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。",
@@ -16190,6 +21334,11 @@
         {
           "name": "component",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
@@ -16206,6 +21355,11 @@
         {
           "name": "componentProps",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。",
@@ -16224,6 +21378,11 @@
         {
           "name": "url",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "url",
           "reflectToAttr": false,
@@ -16245,6 +21404,11 @@
           "event": "ionRouteDataChanged",
           "detail": "any",
           "bubbles": true,
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "このルートがいつ変更されたかを知るために `ion-router` が内部で使用します。",
@@ -16260,7 +21424,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/router-link/router-link.tsx",
+      "filePath": "src/components/router-link/router-link.tsx",
       "encapsulation": "shadow",
       "tag": "ion-router-link",
       "docs": "",
@@ -16270,6 +21434,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -16325,6 +21500,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -16344,6 +21524,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -16363,6 +21548,17 @@
         {
           "name": "routerAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder | undefined",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。",
@@ -16381,6 +21577,17 @@
         {
           "name": "routerDirection",
           "type": "\"back\" | \"forward\" | \"root\"",
+          "complexType": {
+            "original": "RouterDirection",
+            "resolved": "\"back\" | \"forward\" | \"root\"",
+            "references": {
+              "RouterDirection": {
+                "location": "import",
+                "path": "../router/utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              }
+            }
+          },
           "mutable": false,
           "attr": "router-direction",
           "reflectToAttr": false,
@@ -16407,6 +21614,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -16446,7 +21658,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/router-outlet/route-outlet.tsx",
+      "filePath": "src/components/router-outlet/route-outlet.tsx",
       "encapsulation": "shadow",
       "tag": "ion-router-outlet",
       "docs": "",
@@ -16456,6 +21668,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -16473,6 +21690,17 @@
         {
           "name": "animation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。",
@@ -16491,6 +21719,11 @@
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
+          "complexType": {
+            "original": "\"ios\" | \"md\"",
+            "resolved": "\"ios\" | \"md\"",
+            "references": {}
+          },
           "mutable": true,
           "attr": "mode",
           "reflectToAttr": false,
@@ -16522,7 +21755,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/router/router.tsx",
+      "filePath": "src/components/router/router.tsx",
       "encapsulation": "none",
       "tag": "ion-router",
       "docs": "",
@@ -16532,6 +21765,11 @@
         {
           "name": "root",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "root",
           "reflectToAttr": false,
@@ -16549,6 +21787,11 @@
         {
           "name": "useHash",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "use-hash",
           "reflectToAttr": false,
@@ -16571,6 +21814,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "back() => Promise<void>",
           "parameters": [],
           "docs": "window.historyで前ページに戻る。",
@@ -16582,6 +21836,50 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "path The path to navigate to."
+                  }
+                ],
+                "text": "The path to navigate to."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "direction The direction of the animation. Defaults to `\"forward\"`."
+                  }
+                ],
+                "text": "The direction of the animation. Defaults to `\"forward\"`."
+              },
+              {
+                "tags": [],
+                "text": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "RouterDirection": {
+                "location": "import",
+                "path": "./utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterDirection"
+              },
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
           "parameters": [],
           "docs": "指定されたパスに移動します。",
@@ -16602,6 +21900,17 @@
           "event": "ionRouteDidChange",
           "detail": "RouterEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "RouterEventDetail",
+            "resolved": "RouterEventDetail",
+            "references": {
+              "RouterEventDetail": {
+                "location": "import",
+                "path": "./utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ルートが変更されたときに発行されます。",
@@ -16611,6 +21920,17 @@
           "event": "ionRouteWillChange",
           "detail": "RouterEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "RouterEventDetail",
+            "resolved": "RouterEventDetail",
+            "references": {
+              "RouterEventDetail": {
+                "location": "import",
+                "path": "./utils/interface",
+                "id": "src/components/router/utils/interface.ts::RouterEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ルートが変更されようとするときに発行されます。イベント",
@@ -16639,7 +21959,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/row/row.tsx",
+      "filePath": "src/components/row/row.tsx",
       "encapsulation": "shadow",
       "tag": "ion-row",
       "docs": "",
@@ -16657,7 +21977,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/searchbar/searchbar.tsx",
+      "filePath": "src/components/searchbar/searchbar.tsx",
       "encapsulation": "scoped",
       "tag": "ion-searchbar",
       "docs": "",
@@ -16672,6 +21992,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -16689,6 +22014,17 @@
         {
           "name": "autocomplete",
           "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+          "complexType": {
+            "original": "AutocompleteTypes",
+            "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+            "references": {
+              "AutocompleteTypes": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AutocompleteTypes"
+              }
+            }
+          },
           "mutable": false,
           "attr": "autocomplete",
           "reflectToAttr": false,
@@ -16919,6 +22255,11 @@
         {
           "name": "autocorrect",
           "type": "\"off\" | \"on\"",
+          "complexType": {
+            "original": "'on' | 'off'",
+            "resolved": "\"off\" | \"on\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "autocorrect",
           "reflectToAttr": false,
@@ -16941,6 +22282,11 @@
         {
           "name": "cancelButtonIcon",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "cancel-button-icon",
           "reflectToAttr": false,
@@ -16958,6 +22304,11 @@
         {
           "name": "cancelButtonText",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "cancel-button-text",
           "reflectToAttr": false,
@@ -16975,6 +22326,11 @@
         {
           "name": "clearIcon",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "clear-icon",
           "reflectToAttr": false,
@@ -16994,6 +22350,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -17049,6 +22416,11 @@
         {
           "name": "debounce",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
@@ -17068,6 +22440,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -17085,6 +22462,11 @@
         {
           "name": "enterkeyhint",
           "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "complexType": {
+            "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+            "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
@@ -17129,6 +22511,11 @@
         {
           "name": "inputmode",
           "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+          "complexType": {
+            "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+            "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
@@ -17195,9 +22582,36 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "name",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "If used in a form, set the name of the control, which is submitted with the form data.",
+          "docsTags": [],
+          "default": "this.inputId",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "placeholder",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
@@ -17215,6 +22629,11 @@
         {
           "name": "searchIcon",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "search-icon",
           "reflectToAttr": false,
@@ -17234,6 +22653,11 @@
         {
           "name": "showCancelButton",
           "type": "\"always\" | \"focus\" | \"never\"",
+          "complexType": {
+            "original": "'never' | 'focus' | 'always'",
+            "resolved": "\"always\" | \"focus\" | \"never\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-cancel-button",
           "reflectToAttr": false,
@@ -17260,6 +22684,11 @@
         {
           "name": "showClearButton",
           "type": "\"always\" | \"focus\" | \"never\"",
+          "complexType": {
+            "original": "'never' | 'focus' | 'always'",
+            "resolved": "\"always\" | \"focus\" | \"never\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "show-clear-button",
           "reflectToAttr": false,
@@ -17286,6 +22715,11 @@
         {
           "name": "spellcheck",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
@@ -17303,6 +22737,11 @@
         {
           "name": "type",
           "type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "complexType": {
+            "original": "'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'",
+            "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -17345,6 +22784,11 @@
         {
           "name": "value",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -17373,6 +22817,21 @@
             "type": "Promise<HTMLInputElement>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<HTMLInputElement>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLInputElement": {
+                "location": "global",
+                "id": "global::HTMLInputElement"
+              }
+            },
+            "return": "Promise<HTMLInputElement>"
+          },
           "signature": "getInputElement() => Promise<HTMLInputElement>",
           "parameters": [],
           "docs": "要素の内部で使用されているネイティブの `<input>` 要素を返します。",
@@ -17384,9 +22843,20 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "指定された `ion-searchbar` にフォーカスを合わせる。グローバルな `input.focus()` の代わりに、このメソッドを使用します。",
+          "docs": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
           "docsTags": []
         }
       ],
@@ -17395,6 +22865,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "Inputのフォーカスが外れたときに発行されます。",
@@ -17404,6 +22879,11 @@
           "event": "ionCancel",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "キャンセルボタンがクリックされたときに発行されます。",
@@ -17413,6 +22893,17 @@
           "event": "ionChange",
           "detail": "SearchbarChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "SearchbarChangeEventDetail",
+            "resolved": "SearchbarChangeEventDetail",
+            "references": {
+              "SearchbarChangeEventDetail": {
+                "location": "import",
+                "path": "./searchbar-interface",
+                "id": "src/components/searchbar/searchbar-interface.ts::SearchbarChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "`ionChange` イベントは、`<ion-searchbar>` 要素に対して、ユーザがその要素の値を変更したときに発生します。ionInput` イベントとは異なり、要素の値が変更されるたびに `ionChange` イベントが発生する必要はない。`ionChange`イベントは、ユーザーによって値がコミットされたときに発生します。これは、要素のフォーカスが外れたときや、\"Enter \"キーが押されたときに発生します。また、クリアボタンやキャンセルボタンをクリックしたときにも `ionChange` イベントが発生することがあります。",
@@ -17422,6 +22913,11 @@
           "event": "ionClear",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "Clear Inputボタンがクリックされたときに発行されます。",
@@ -17431,6 +22927,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "Inputにフォーカスが当たったときに発行されます。",
@@ -17440,6 +22941,17 @@
           "event": "ionInput",
           "detail": "SearchbarInputEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "SearchbarInputEventDetail",
+            "resolved": "SearchbarInputEventDetail",
+            "references": {
+              "SearchbarInputEventDetail": {
+                "location": "import",
+                "path": "./searchbar-interface",
+                "id": "src/components/searchbar/searchbar-interface.ts::SearchbarInputEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ion-searchbar`要素の `value` が変更されたときに発行されます。",
@@ -17517,7 +23029,7 @@
       }
     },
     {
-      "filePath": "./src/components/segment-button/segment-button.tsx",
+      "filePath": "src/components/segment-button/segment-button.tsx",
       "encapsulation": "shadow",
       "tag": "ion-segment-button",
       "docs": "",
@@ -17544,7 +23056,12 @@
         {
           "name": "disabled",
           "type": "boolean",
-          "mutable": false,
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
           "attr": "disabled",
           "reflectToAttr": false,
           "docs": "`true`の場合、ユーザーはセグメントボタンを操作することができません。",
@@ -17561,6 +23078,17 @@
         {
           "name": "layout",
           "type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+          "complexType": {
+            "original": "SegmentButtonLayout",
+            "resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+            "references": {
+              "SegmentButtonLayout": {
+                "location": "import",
+                "path": "./segment-button-interface",
+                "id": "src/components/segment-button/segment-button-interface.ts::SegmentButtonLayout"
+              }
+            }
+          },
           "mutable": false,
           "attr": "layout",
           "reflectToAttr": false,
@@ -17623,6 +23151,11 @@
         {
           "name": "type",
           "type": "\"button\" | \"reset\" | \"submit\"",
+          "complexType": {
+            "original": "'submit' | 'reset' | 'button'",
+            "resolved": "\"button\" | \"reset\" | \"submit\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
@@ -17648,7 +23181,18 @@
         },
         {
           "name": "value",
-          "type": "string",
+          "type": "number | string",
+          "complexType": {
+            "original": "SegmentValue",
+            "resolved": "number | string",
+            "references": {
+              "SegmentValue": {
+                "location": "import",
+                "path": "../segment/segment-interface",
+                "id": "src/components/segment/segment-interface.ts::SegmentValue"
+              }
+            }
+          },
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
@@ -17656,6 +23200,9 @@
           "docsTags": [],
           "default": "'ion-sb-' + ids++",
           "values": [
+            {
+              "type": "number"
+            },
             {
               "type": "string"
             }
@@ -17835,7 +23382,7 @@
       }
     },
     {
-      "filePath": "./src/components/segment/segment.tsx",
+      "filePath": "src/components/segment/segment.tsx",
       "encapsulation": "shadow",
       "tag": "ion-segment",
       "docs": "",
@@ -17850,6 +23397,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -17905,6 +23463,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -17943,6 +23506,11 @@
         {
           "name": "scrollable",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "scrollable",
           "reflectToAttr": false,
@@ -17960,6 +23528,11 @@
         {
           "name": "selectOnFocus",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "select-on-focus",
           "reflectToAttr": false,
@@ -17977,6 +23550,11 @@
         {
           "name": "swipeGesture",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "swipe-gesture",
           "reflectToAttr": false,
@@ -17993,13 +23571,27 @@
         },
         {
           "name": "value",
-          "type": "string | undefined",
+          "type": "number | string | undefined",
+          "complexType": {
+            "original": "SegmentValue",
+            "resolved": "number | string | undefined",
+            "references": {
+              "SegmentValue": {
+                "location": "import",
+                "path": "./segment-interface",
+                "id": "src/components/segment/segment-interface.ts::SegmentValue"
+              }
+            }
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
           "docs": "セグメントの価値",
           "docsTags": [],
           "values": [
+            {
+              "type": "number"
+            },
             {
               "type": "string"
             },
@@ -18017,6 +23609,17 @@
           "event": "ionChange",
           "detail": "SegmentChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "SegmentChangeEventDetail",
+            "resolved": "SegmentChangeEventDetail",
+            "references": {
+              "SegmentChangeEventDetail": {
+                "location": "import",
+                "path": "./segment-interface",
+                "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "valueプロパティが変更され、`ion-segment`からドラッグポインタが解放されたときに発行されます。",
@@ -18044,7 +23647,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/select-option/select-option.tsx",
+      "filePath": "src/components/select-option/select-option.tsx",
       "encapsulation": "shadow",
       "tag": "ion-select-option",
       "docs": "",
@@ -18054,6 +23657,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -18071,6 +23679,11 @@
         {
           "name": "value",
           "type": "any",
+          "complexType": {
+            "original": "any | null",
+            "resolved": "any",
+            "references": {}
+          },
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
@@ -18096,7 +23709,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/select/select.tsx",
+      "filePath": "src/components/select/select.tsx",
       "encapsulation": "shadow",
       "tag": "ion-select",
       "docs": "",
@@ -18105,6 +23718,10 @@
           "name": "virtualProp",
           "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
         },
+        {
+          "name": "slot",
+          "text": "label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
+        },
         {
           "name": "part",
           "text": "placeholder - The text displayed in the select when there is no value."
@@ -18116,6 +23733,14 @@
         {
           "name": "part",
           "text": "icon - The select icon container."
+        },
+        {
+          "name": "part",
+          "text": "container - The container for the selected text or placeholder."
+        },
+        {
+          "name": "part",
+          "text": "label - The label text describing the select."
         }
       ],
       "usage": {},
@@ -18123,6 +23748,11 @@
         {
           "name": "cancelText",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "cancel-text",
           "reflectToAttr": false,
@@ -18140,6 +23770,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -18195,6 +23836,17 @@
         {
           "name": "compareWith",
           "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+          "complexType": {
+            "original": "string | SelectCompareFn | null",
+            "resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+            "references": {
+              "SelectCompareFn": {
+                "location": "import",
+                "path": "./select-interface",
+                "id": "src/components/select/select-interface.ts::SelectCompareFn"
+              }
+            }
+          },
           "mutable": false,
           "attr": "compare-with",
           "reflectToAttr": false,
@@ -18220,6 +23872,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -18234,9 +23891,38 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "expandedIcon",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "expanded-icon",
+          "reflectToAttr": false,
+          "docs": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "fill",
           "type": "\"outline\" | \"solid\" | undefined",
+          "complexType": {
+            "original": "'outline' | 'solid'",
+            "resolved": "\"outline\" | \"solid\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
@@ -18261,6 +23947,17 @@
         {
           "name": "interface",
           "type": "\"action-sheet\" | \"alert\" | \"popover\"",
+          "complexType": {
+            "original": "SelectInterface",
+            "resolved": "\"action-sheet\" | \"alert\" | \"popover\"",
+            "references": {
+              "SelectInterface": {
+                "location": "import",
+                "path": "./select-interface",
+                "id": "src/components/select/select-interface.ts::SelectInterface"
+              }
+            }
+          },
           "mutable": false,
           "attr": "interface",
           "reflectToAttr": false,
@@ -18287,6 +23984,11 @@
         {
           "name": "interfaceOptions",
           "type": "any",
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
           "mutable": false,
           "attr": "interface-options",
           "reflectToAttr": false,
@@ -18304,6 +24006,11 @@
         {
           "name": "justify",
           "type": "\"end\" | \"space-between\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'space-between'",
+            "resolved": "\"end\" | \"space-between\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
@@ -18330,10 +24037,15 @@
         {
           "name": "label",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "セレクトに関連する可視ラベル。",
+          "docs": "The visible label associated with the select.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
           "docsTags": [],
           "values": [
             {
@@ -18349,6 +24061,11 @@
         {
           "name": "labelPlacement",
           "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+          "complexType": {
+            "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+            "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
@@ -18386,6 +24103,11 @@
         {
           "name": "legacy",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
@@ -18426,6 +24148,11 @@
         {
           "name": "multiple",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": false,
@@ -18443,6 +24170,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -18460,6 +24192,11 @@
         {
           "name": "okText",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "ok-text",
           "reflectToAttr": false,
@@ -18477,6 +24214,11 @@
         {
           "name": "placeholder",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
@@ -18496,6 +24238,11 @@
         {
           "name": "selectedText",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "selected-text",
           "reflectToAttr": false,
@@ -18518,6 +24265,11 @@
         {
           "name": "shape",
           "type": "\"round\" | undefined",
+          "complexType": {
+            "original": "'round'",
+            "resolved": "\"round\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
@@ -18535,9 +24287,38 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "toggleIcon",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "toggle-icon",
+          "reflectToAttr": false,
+          "docs": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "value",
           "type": "any",
+          "complexType": {
+            "original": "any | null",
+            "resolved": "any",
+            "references": {}
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -18559,6 +24340,35 @@
             "type": "Promise<any>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(event?: UIEvent) => Promise<any>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "event The user interface event that called the open."
+                  }
+                ],
+                "text": "The user interface event that called the open."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "UIEvent": {
+                "location": "global",
+                "id": "global::UIEvent"
+              },
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            },
+            "return": "Promise<any>"
+          },
           "signature": "open(event?: UIEvent) => Promise<any>",
           "parameters": [],
           "docs": "セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。",
@@ -18575,6 +24385,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "セレクトのフォーカスが外れたときに発行されます。",
@@ -18584,6 +24399,11 @@
           "event": "ionCancel",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "選択がキャンセルされたときに発行されます。",
@@ -18593,6 +24413,17 @@
           "event": "ionChange",
           "detail": "SelectChangeEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "SelectChangeEventDetail",
+            "resolved": "SelectChangeEventDetail<any>",
+            "references": {
+              "SelectChangeEventDetail": {
+                "location": "import",
+                "path": "./select-interface",
+                "id": "src/components/select/select-interface.ts::SelectChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "値が変更されたときに発行されます。",
@@ -18602,6 +24433,11 @@
           "event": "ionDismiss",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "オーバーレイが解除されたときに発行されます。",
@@ -18611,6 +24447,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "セレクトにフォーカスが当たったときに発行されます。",
@@ -18625,39 +24466,39 @@
           "docs": "セレクトの背景"
         },
         {
-          "name": "--border-color Color of the select border",
+          "name": "--border-color",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Color of the select border"
         },
         {
-          "name": "--border-radius Radius of the select border",
+          "name": "--border-radius",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Radius of the select border. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
         },
         {
-          "name": "--border-style Style of the select border",
+          "name": "--border-style",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Style of the select border"
         },
         {
-          "name": "--border-width Width of the select border",
+          "name": "--border-width",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Width of the select border"
         },
         {
-          "name": "--highlight-color-focused The color of the highlight on the select when focused",
+          "name": "--highlight-color-focused",
           "annotation": "prop",
-          "docs": ""
+          "docs": "The color of the highlight on the select when focused"
         },
         {
-          "name": "--highlight-color-invalid The color of the highlight on the select when invalid",
+          "name": "--highlight-color-invalid",
           "annotation": "prop",
-          "docs": ""
+          "docs": "The color of the highlight on the select when invalid"
         },
         {
-          "name": "--highlight-color-valid The color of the highlight on the select when valid",
+          "name": "--highlight-color-valid",
           "annotation": "prop",
-          "docs": ""
+          "docs": "The color of the highlight on the select when valid"
         },
         {
           "name": "--padding-bottom",
@@ -18695,12 +24536,25 @@
           "docs": "MDモード時のリップルエフェクトの色です。"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "label",
+          "docs": "The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
+        }
+      ],
       "parts": [
+        {
+          "name": "container",
+          "docs": "The container for the selected text or placeholder."
+        },
         {
           "name": "icon",
           "docs": "セレクトアイコンのコンテナです。"
         },
+        {
+          "name": "label",
+          "docs": "The label text describing the select."
+        },
         {
           "name": "placeholder",
           "docs": "値がないときにセレクトに表示されるテキスト。"
@@ -18729,11 +24583,11 @@
         "ion-select-popover": [
           "ion-item",
           "ion-checkbox",
-          "ion-label",
           "ion-radio-group",
           "ion-radio",
           "ion-list",
-          "ion-list-header"
+          "ion-list-header",
+          "ion-label"
         ],
         "ion-item": [
           "ion-icon",
@@ -18755,7 +24609,7 @@
       }
     },
     {
-      "filePath": "./src/components/skeleton-text/skeleton-text.tsx",
+      "filePath": "src/components/skeleton-text/skeleton-text.tsx",
       "encapsulation": "shadow",
       "tag": "ion-skeleton-text",
       "docs": "",
@@ -18765,6 +24619,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -19325,7 +25184,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/spinner/spinner.tsx",
+      "filePath": "src/components/spinner/spinner.tsx",
       "encapsulation": "shadow",
       "tag": "ion-spinner",
       "docs": "",
@@ -19335,6 +25194,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -19390,6 +25260,11 @@
         {
           "name": "duration",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
@@ -19409,6 +25284,17 @@
         {
           "name": "name",
           "type": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
+          "complexType": {
+            "original": "SpinnerTypes",
+            "resolved": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-sharp\" | \"lines-sharp-small\" | \"lines-small\" | undefined",
+            "references": {
+              "SpinnerTypes": {
+                "location": "import",
+                "path": "./spinner-configs",
+                "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+              }
+            }
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -19461,6 +25347,11 @@
         {
           "name": "paused",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "paused",
           "reflectToAttr": false,
@@ -19507,7 +25398,7 @@
       }
     },
     {
-      "filePath": "./src/components/split-pane/split-pane.tsx",
+      "filePath": "src/components/split-pane/split-pane.tsx",
       "encapsulation": "shadow",
       "tag": "ion-split-pane",
       "docs": "",
@@ -19517,6 +25408,11 @@
         {
           "name": "contentId",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "content-id",
           "reflectToAttr": true,
@@ -19536,6 +25432,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -19553,6 +25454,11 @@
         {
           "name": "when",
           "type": "boolean | string",
+          "complexType": {
+            "original": "string | boolean",
+            "resolved": "boolean | string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "when",
           "reflectToAttr": false,
@@ -19577,6 +25483,11 @@
           "event": "ionSplitPaneVisible",
           "detail": "{ visible: boolean; }",
           "bubbles": true,
+          "complexType": {
+            "original": "{ visible: boolean }",
+            "resolved": "{ visible: boolean; }",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "分割画面の表示が変わったときに呼び出される式",
@@ -19613,7 +25524,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/tab-bar/tab-bar.tsx",
+      "filePath": "src/components/tab-bar/tab-bar.tsx",
       "encapsulation": "shadow",
       "tag": "ion-tab-bar",
       "docs": "",
@@ -19628,6 +25539,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -19704,6 +25626,11 @@
         {
           "name": "selectedTab",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "selected-tab",
           "reflectToAttr": false,
@@ -19723,6 +25650,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -19765,7 +25697,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/tab-button/tab-button.tsx",
+      "filePath": "src/components/tab-button/tab-button.tsx",
       "encapsulation": "shadow",
       "tag": "ion-tab-button",
       "docs": "",
@@ -19784,6 +25716,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -19801,6 +25738,11 @@
         {
           "name": "download",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "download",
           "reflectToAttr": false,
@@ -19820,6 +25762,11 @@
         {
           "name": "href",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "href",
           "reflectToAttr": false,
@@ -19839,6 +25786,17 @@
         {
           "name": "layout",
           "type": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+          "complexType": {
+            "original": "TabButtonLayout",
+            "resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\" | undefined",
+            "references": {
+              "TabButtonLayout": {
+                "location": "import",
+                "path": "../tab-bar/tab-bar-interface",
+                "id": "src/components/tab-bar/tab-bar-interface.ts::TabButtonLayout"
+              }
+            }
+          },
           "mutable": true,
           "attr": "layout",
           "reflectToAttr": false,
@@ -19900,6 +25858,11 @@
         {
           "name": "rel",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rel",
           "reflectToAttr": false,
@@ -19919,6 +25882,11 @@
         {
           "name": "selected",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": true,
           "attr": "selected",
           "reflectToAttr": false,
@@ -19936,6 +25904,11 @@
         {
           "name": "tab",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": false,
@@ -19955,6 +25928,11 @@
         {
           "name": "target",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "target",
           "reflectToAttr": false,
@@ -20057,7 +26035,7 @@
       }
     },
     {
-      "filePath": "./src/components/tab/tab.tsx",
+      "filePath": "src/components/tab/tab.tsx",
       "encapsulation": "shadow",
       "tag": "ion-tab",
       "docs": "",
@@ -20067,6 +26045,17 @@
         {
           "name": "component",
           "type": "Function | HTMLElement | null | string | undefined",
+          "complexType": {
+            "original": "ComponentRef",
+            "resolved": "Function | HTMLElement | null | string | undefined",
+            "references": {
+              "ComponentRef": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::ComponentRef"
+              }
+            }
+          },
           "mutable": false,
           "attr": "component",
           "reflectToAttr": false,
@@ -20095,6 +26084,11 @@
         {
           "name": "tab",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": false,
@@ -20116,6 +26110,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "setActive() => Promise<void>",
           "parameters": [],
           "docs": "タブのアクティブコンポーネントを設定します。",
@@ -20132,7 +26137,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/tabs/tabs.tsx",
+      "filePath": "src/components/tabs/tabs.tsx",
       "encapsulation": "shadow",
       "tag": "ion-tabs",
       "docs": "",
@@ -20159,9 +26164,20 @@
             "type": "Promise<string | undefined>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<string | undefined>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string | undefined>"
+          },
           "signature": "getSelected() => Promise<string | undefined>",
           "parameters": [],
-          "docs": "現在選択されているタブを取得します。",
+          "docs": "Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
           "docsTags": []
         },
         {
@@ -20170,9 +26186,34 @@
             "type": "Promise<HTMLIonTabElement | undefined>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+                  }
+                ],
+                "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLIonTabElement": {
+                "location": "global",
+                "id": "global::HTMLIonTabElement"
+              }
+            },
+            "return": "Promise<HTMLIonTabElement | undefined>"
+          },
           "signature": "getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
           "parameters": [],
-          "docs": "タブの `tab` プロパティの値、または要素の参照によって特定のタブを取得します。",
+          "docs": "Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
           "docsTags": [
             {
               "name": "param",
@@ -20186,9 +26227,34 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(tab: string | HTMLIonTabElement) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+                  }
+                ],
+                "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLIonTabElement": {
+                "location": "global",
+                "id": "global::HTMLIonTabElement"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "select(tab: string | HTMLIonTabElement) => Promise<boolean>",
           "parameters": [],
-          "docs": "タブの `tab` プロパティの値、または要素の参照によってタブを選択します。",
+          "docs": "Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.",
           "docsTags": [
             {
               "name": "param",
@@ -20202,6 +26268,11 @@
           "event": "ionTabsDidChange",
           "detail": "{ tab: string; }",
           "bubbles": false,
+          "complexType": {
+            "original": "{ tab: string }",
+            "resolved": "{ tab: string; }",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。",
@@ -20211,6 +26282,11 @@
           "event": "ionTabsWillChange",
           "detail": "{ tab: string; }",
           "bubbles": false,
+          "complexType": {
+            "original": "{ tab: string }",
+            "resolved": "{ tab: string; }",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。",
@@ -20239,7 +26315,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/text/text.tsx",
+      "filePath": "src/components/text/text.tsx",
       "encapsulation": "shadow",
       "tag": "ion-text",
       "docs": "",
@@ -20254,6 +26330,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -20339,7 +26426,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/textarea/textarea.tsx",
+      "filePath": "src/components/textarea/textarea.tsx",
       "encapsulation": "scoped",
       "tag": "ion-textarea",
       "docs": "",
@@ -20347,6 +26434,10 @@
         {
           "name": "virtualProp",
           "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+        },
+        {
+          "name": "slot",
+          "text": "label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
         }
       ],
       "usage": {},
@@ -20354,6 +26445,11 @@
         {
           "name": "autoGrow",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "auto-grow",
           "reflectToAttr": true,
@@ -20371,6 +26467,11 @@
         {
           "name": "autocapitalize",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "autocapitalize",
           "reflectToAttr": false,
@@ -20388,6 +26489,11 @@
         {
           "name": "autofocus",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "autofocus",
           "reflectToAttr": false,
@@ -20405,6 +26511,11 @@
         {
           "name": "clearOnEdit",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "clear-on-edit",
           "reflectToAttr": false,
@@ -20422,6 +26533,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -20477,6 +26599,11 @@
         {
           "name": "cols",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "cols",
           "reflectToAttr": false,
@@ -20496,6 +26623,11 @@
         {
           "name": "counter",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "counter",
           "reflectToAttr": false,
@@ -20513,6 +26645,11 @@
         {
           "name": "counterFormatter",
           "type": "((inputLength: number, maxLength: number) => string) | undefined",
+          "complexType": {
+            "original": "(inputLength: number, maxLength: number) => string",
+            "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは\"itemLength / maxLength\"に設定されています。",
@@ -20531,6 +26668,11 @@
         {
           "name": "debounce",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
@@ -20550,6 +26692,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -20567,6 +26714,11 @@
         {
           "name": "enterkeyhint",
           "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "complexType": {
+            "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+            "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "enterkeyhint",
           "reflectToAttr": false,
@@ -20611,6 +26763,11 @@
         {
           "name": "errorText",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "error-text",
           "reflectToAttr": false,
@@ -20630,6 +26787,11 @@
         {
           "name": "fill",
           "type": "\"outline\" | \"solid\" | undefined",
+          "complexType": {
+            "original": "'outline' | 'solid'",
+            "resolved": "\"outline\" | \"solid\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "fill",
           "reflectToAttr": false,
@@ -20654,6 +26816,11 @@
         {
           "name": "helperText",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "helper-text",
           "reflectToAttr": false,
@@ -20673,6 +26840,11 @@
         {
           "name": "inputmode",
           "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+          "complexType": {
+            "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+            "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "inputmode",
           "reflectToAttr": false,
@@ -20721,10 +26893,15 @@
         {
           "name": "label",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "テキストエリアに関連する可視ラベル。",
+          "docs": "The visible label associated with the textarea.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used.",
           "docsTags": [],
           "values": [
             {
@@ -20740,6 +26917,11 @@
         {
           "name": "labelPlacement",
           "type": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
+            "resolved": "\"end\" | \"fixed\" | \"floating\" | \"stacked\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
@@ -20774,6 +26956,11 @@
         {
           "name": "legacy",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
@@ -20793,6 +26980,11 @@
         {
           "name": "maxlength",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "maxlength",
           "reflectToAttr": false,
@@ -20812,6 +27004,11 @@
         {
           "name": "minlength",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
@@ -20852,6 +27049,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -20869,6 +27071,11 @@
         {
           "name": "placeholder",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
@@ -20888,6 +27095,11 @@
         {
           "name": "readonly",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
@@ -20905,6 +27117,11 @@
         {
           "name": "required",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
@@ -20922,6 +27139,11 @@
         {
           "name": "rows",
           "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "rows",
           "reflectToAttr": false,
@@ -20941,6 +27163,11 @@
         {
           "name": "shape",
           "type": "\"round\" | undefined",
+          "complexType": {
+            "original": "'round'",
+            "resolved": "\"round\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
@@ -20961,6 +27188,11 @@
         {
           "name": "spellcheck",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "spellcheck",
           "reflectToAttr": false,
@@ -20978,6 +27210,11 @@
         {
           "name": "value",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string | undefined",
+            "references": {}
+          },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
@@ -21001,6 +27238,11 @@
         {
           "name": "wrap",
           "type": "\"hard\" | \"off\" | \"soft\" | undefined",
+          "complexType": {
+            "original": "'hard' | 'soft' | 'off'",
+            "resolved": "\"hard\" | \"off\" | \"soft\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "wrap",
           "reflectToAttr": false,
@@ -21034,6 +27276,21 @@
             "type": "Promise<HTMLTextAreaElement>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<HTMLTextAreaElement>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLTextAreaElement": {
+                "location": "global",
+                "id": "global::HTMLTextAreaElement"
+              }
+            },
+            "return": "Promise<HTMLTextAreaElement>"
+          },
           "signature": "getInputElement() => Promise<HTMLTextAreaElement>",
           "parameters": [],
           "docs": "要素の内部で使用されるネイティブの `<textarea>` 要素を返します。",
@@ -21045,6 +27302,17 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
           "docs": "ion-textarea` のネイティブ `textarea` にフォーカスを設定します。グローバルな `textarea.focus()` の代わりに、このメソッドを使用します。",
@@ -21056,6 +27324,16 @@
           "event": "ionBlur",
           "detail": "FocusEvent",
           "bubbles": true,
+          "complexType": {
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
+            "references": {
+              "FocusEvent": {
+                "location": "global",
+                "id": "global::FocusEvent"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "Inputのフォーカスが外れたときに発行されます。",
@@ -21065,15 +27343,36 @@
           "event": "ionChange",
           "detail": "TextareaChangeEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "TextareaChangeEventDetail",
+            "resolved": "TextareaChangeEventDetail",
+            "references": {
+              "TextareaChangeEventDetail": {
+                "location": "import",
+                "path": "./textarea-interface",
+                "id": "src/components/textarea/textarea-interface.ts::TextareaChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
-          "docs": "`ionChange` イベントは `<ion-textarea>` 要素に対して、ユーザがその要素の値を変更したときに発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは要素の値が変更されるたびに発生する必要はない。  値が変更された後、要素のフォーカスが外れると `ionChange` イベントが発生します。",
+          "docs": "The `ionChange` event is fired when the user modifies the textarea's value.\nUnlike the `ionInput` event, the `ionChange` event is fired when\nthe element loses focus after its value has been modified.",
           "docsTags": []
         },
         {
           "event": "ionFocus",
           "detail": "FocusEvent",
           "bubbles": true,
+          "complexType": {
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
+            "references": {
+              "FocusEvent": {
+                "location": "global",
+                "id": "global::FocusEvent"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "Inputにフォーカスが当たったときに発行されます。",
@@ -21083,9 +27382,20 @@
           "event": "ionInput",
           "detail": "TextareaInputEventDetail",
           "bubbles": true,
+          "complexType": {
+            "original": "TextareaInputEventDetail",
+            "resolved": "TextareaInputEventDetail",
+            "references": {
+              "TextareaInputEventDetail": {
+                "location": "import",
+                "path": "./textarea-interface",
+                "id": "src/components/textarea/textarea-interface.ts::TextareaInputEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
-          "docs": "`ionInput` イベントは、`<ion-textarea>` 要素の `value` が変更されたときに発生します。 `clearOnEdit` が有効な場合、ユーザがキーダウンイベントを実行してテキストエリアをクリアしたときに `ionInput` イベントが発生します。",
+          "docs": "The `ionInput` event is fired each time the user modifies the textarea's value.\nUnlike the `ionChange` event, the `ionInput` event is fired for each alteration\nto the textarea's value. This typically happens for each keystroke as the user types.\n\nWhen `clearOnEdit` is enabled, the `ionInput` event will be fired when\nthe user clears the textarea by performing a keydown event.",
           "docsTags": []
         }
       ],
@@ -21177,14 +27487,19 @@
           "docs": "Placeholderテキストの不透明度"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "label",
+          "docs": "The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+        }
+      ],
       "parts": [],
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/thumbnail/thumbnail.tsx",
+      "filePath": "src/components/thumbnail/thumbnail.tsx",
       "encapsulation": "shadow",
       "tag": "ion-thumbnail",
       "docs": "",
@@ -21213,7 +27528,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/title/title.tsx",
+      "filePath": "src/components/title/title.tsx",
       "encapsulation": "shadow",
       "tag": "ion-title",
       "docs": "",
@@ -21223,6 +27538,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -21278,6 +27604,11 @@
         {
           "name": "size",
           "type": "\"large\" | \"small\" | undefined",
+          "complexType": {
+            "original": "'large' | 'small'",
+            "resolved": "\"large\" | \"small\" | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
@@ -21317,7 +27648,7 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "./src/components/toast/toast.tsx",
+      "filePath": "src/components/toast/toast.tsx",
       "encapsulation": "shadow",
       "tag": "ion-toast",
       "docs": "",
@@ -21330,6 +27661,10 @@
           "name": "part",
           "text": "button - Any button element that is displayed inside of the toast."
         },
+        {
+          "name": "part",
+          "text": "button cancel - Any button element with role \"cancel\" that is displayed inside of the toast."
+        },
         {
           "name": "part",
           "text": "container - The element that wraps all child elements."
@@ -21352,6 +27687,11 @@
         {
           "name": "animated",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "animated",
           "reflectToAttr": false,
@@ -21369,6 +27709,17 @@
         {
           "name": "buttons",
           "type": "(string | ToastButton)[] | undefined",
+          "complexType": {
+            "original": "(ToastButton | string)[]",
+            "resolved": "(string | ToastButton)[] | undefined",
+            "references": {
+              "ToastButton": {
+                "location": "import",
+                "path": "./toast-interface",
+                "id": "src/components/toast/toast-interface.ts::ToastButton"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "トースト用のボタンがずらり。",
@@ -21390,6 +27741,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -21445,6 +27807,11 @@
         {
           "name": "cssClass",
           "type": "string | string[] | undefined",
+          "complexType": {
+            "original": "string | string[]",
+            "resolved": "string | string[] | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "css-class",
           "reflectToAttr": false,
@@ -21467,6 +27834,11 @@
         {
           "name": "duration",
           "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
           "mutable": false,
           "attr": "duration",
           "reflectToAttr": false,
@@ -21484,6 +27856,17 @@
         {
           "name": "enterAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "乾杯の音頭をとるときに使うアニメーションです。",
@@ -21502,6 +27885,11 @@
         {
           "name": "header",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "header",
           "reflectToAttr": false,
@@ -21521,6 +27909,11 @@
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
+          "complexType": {
+            "original": "{ [key: string]: any }",
+            "resolved": "undefined | { [key: string]: any; }",
+            "references": {}
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "トーストに渡す追加の属性。",
@@ -21539,6 +27932,11 @@
         {
           "name": "icon",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
@@ -21558,6 +27956,11 @@
         {
           "name": "isOpen",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "is-open",
           "reflectToAttr": false,
@@ -21575,6 +27978,11 @@
         {
           "name": "keyboardClose",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "keyboard-close",
           "reflectToAttr": false,
@@ -21592,6 +28000,17 @@
         {
           "name": "layout",
           "type": "\"baseline\" | \"stacked\"",
+          "complexType": {
+            "original": "ToastLayout",
+            "resolved": "\"baseline\" | \"stacked\"",
+            "references": {
+              "ToastLayout": {
+                "location": "import",
+                "path": "./toast-interface",
+                "id": "src/components/toast/toast-interface.ts::ToastLayout"
+              }
+            }
+          },
           "mutable": false,
           "attr": "layout",
           "reflectToAttr": false,
@@ -21614,6 +28033,17 @@
         {
           "name": "leaveAnimation",
           "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+          "complexType": {
+            "original": "AnimationBuilder",
+            "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+            "references": {
+              "AnimationBuilder": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::AnimationBuilder"
+              }
+            }
+          },
           "mutable": false,
           "reflectToAttr": false,
           "docs": "トーストの解散時に使用するアニメーションです。",
@@ -21632,6 +28062,17 @@
         {
           "name": "message",
           "type": "IonicSafeString | string | undefined",
+          "complexType": {
+            "original": "string | IonicSafeString",
+            "resolved": "IonicSafeString | string | undefined",
+            "references": {
+              "IonicSafeString": {
+                "location": "import",
+                "path": "../../utils/sanitization",
+                "id": "src/utils/sanitization/index.ts::IonicSafeString"
+              }
+            }
+          },
           "mutable": false,
           "attr": "message",
           "reflectToAttr": false,
@@ -21675,6 +28116,17 @@
         {
           "name": "position",
           "type": "\"bottom\" | \"middle\" | \"top\"",
+          "complexType": {
+            "original": "ToastPosition",
+            "resolved": "\"bottom\" | \"middle\" | \"top\"",
+            "references": {
+              "ToastPosition": {
+                "location": "import",
+                "path": "./toast-interface",
+                "id": "src/components/toast/toast-interface.ts::ToastPosition"
+              }
+            }
+          },
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
@@ -21701,6 +28153,11 @@
         {
           "name": "translucent",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "translucent",
           "reflectToAttr": false,
@@ -21718,6 +28175,11 @@
         {
           "name": "trigger",
           "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "trigger",
           "reflectToAttr": false,
@@ -21742,6 +28204,40 @@
             "type": "Promise<boolean>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "(data?: any, role?: string) => Promise<boolean>",
+            "parameters": [
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "data Any data to emit in the dismiss events."
+                  }
+                ],
+                "text": "Any data to emit in the dismiss events."
+              },
+              {
+                "tags": [
+                  {
+                    "name": "param",
+                    "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                  }
+                ],
+                "text": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ToastDismissOptions": {
+                "location": "global",
+                "id": "global::ToastDismissOptions"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
           "signature": "dismiss(data?: any, role?: string) => Promise<boolean>",
           "parameters": [],
           "docs": "トーストのオーバーレイが提示された後、それを解除します。",
@@ -21762,6 +28258,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "トーストが解散したことを解決するPromiseを返します。",
@@ -21773,6 +28289,26 @@
             "type": "Promise<OverlayEventDetail<T>>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              },
+              "T": {
+                "location": "global",
+                "id": "global::T"
+              }
+            },
+            "return": "Promise<OverlayEventDetail<T>>"
+          },
           "signature": "onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>",
           "parameters": [],
           "docs": "トーストが解散するタイミングを解決するPromiseを返します。",
@@ -21784,6 +28320,21 @@
             "type": "Promise<void>",
             "docs": ""
           },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "ToastPresentOptions": {
+                "location": "global",
+                "id": "global::ToastPresentOptions"
+              }
+            },
+            "return": "Promise<void>"
+          },
           "signature": "present() => Promise<void>",
           "parameters": [],
           "docs": "トーストのオーバーレイを作成した後に提示します。",
@@ -21795,6 +28346,17 @@
           "event": "didDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トーストが終了した後に発行されます。ionToastDidDismissの略記。",
@@ -21804,6 +28366,11 @@
           "event": "didPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トーストがはじまった後に発行されます。ionToastWillDismissの略語。",
@@ -21813,6 +28380,17 @@
           "event": "ionToastDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トーストが解散した後に発行されます。",
@@ -21822,6 +28400,11 @@
           "event": "ionToastDidPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トーストが提示された後に発行されます。",
@@ -21831,6 +28414,17 @@
           "event": "ionToastWillDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "乾杯が解散する前に発行されます。",
@@ -21840,6 +28434,11 @@
           "event": "ionToastWillPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トーストが提示される前に発行されます。",
@@ -21849,6 +28448,17 @@
           "event": "willDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "OverlayEventDetail",
+            "resolved": "OverlayEventDetail<any>",
+            "references": {
+              "OverlayEventDetail": {
+                "location": "import",
+                "path": "../../utils/overlays-interface",
+                "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トーストが終了する前に発行されます。ionToastWillDismissの略語です。",
@@ -21858,6 +28468,11 @@
           "event": "willPresent",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トーストが表示される前に発行されます。ionToastWillPresentの略記。",
@@ -21958,6 +28573,10 @@
           "name": "button",
           "docs": "トーストの内側に表示される任意のボタン要素。"
         },
+        {
+          "name": "button cancel",
+          "docs": "Any button element with role \"cancel\" that is displayed inside of the toast."
+        },
         {
           "name": "container",
           "docs": "すべての子要素を包む要素。"
@@ -21988,7 +28607,7 @@
       }
     },
     {
-      "filePath": "./src/components/toggle/toggle.tsx",
+      "filePath": "src/components/toggle/toggle.tsx",
       "encapsulation": "shadow",
       "tag": "ion-toggle",
       "docs": "",
@@ -22015,6 +28634,11 @@
         {
           "name": "checked",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": true,
           "attr": "checked",
           "reflectToAttr": false,
@@ -22032,6 +28656,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
@@ -22087,6 +28722,11 @@
         {
           "name": "disabled",
           "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
@@ -22104,6 +28744,11 @@
         {
           "name": "enableOnOffLabels",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean | undefined",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "enable-on-off-labels",
           "reflectToAttr": false,
@@ -22124,6 +28769,11 @@
         {
           "name": "justify",
           "type": "\"end\" | \"space-between\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'space-between'",
+            "resolved": "\"end\" | \"space-between\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "justify",
           "reflectToAttr": false,
@@ -22150,6 +28800,11 @@
         {
           "name": "labelPlacement",
           "type": "\"end\" | \"fixed\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end' | 'fixed'",
+            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "references": {}
+          },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
@@ -22176,6 +28831,11 @@
         {
           "name": "legacy",
           "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "legacy",
           "reflectToAttr": false,
@@ -22216,6 +28876,11 @@
         {
           "name": "name",
           "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
@@ -22233,6 +28898,11 @@
         {
           "name": "value",
           "type": "null | string | undefined",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string | undefined",
+            "references": {}
+          },
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
@@ -22260,6 +28930,11 @@
           "event": "ionBlur",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トグルのフォーカスが外れたときに発行されます。",
@@ -22269,6 +28944,17 @@
           "event": "ionChange",
           "detail": "ToggleChangeEventDetail<any>",
           "bubbles": true,
+          "complexType": {
+            "original": "ToggleChangeEventDetail",
+            "resolved": "ToggleChangeEventDetail<any>",
+            "references": {
+              "ToggleChangeEventDetail": {
+                "location": "import",
+                "path": "./toggle-interface",
+                "id": "src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail"
+              }
+            }
+          },
           "cancelable": true,
           "composed": true,
           "docs": "ユーザがトグルのオン/オフを切り替えたときに発行されます。プログラムによって `checked` プロパティの値が変更された場合は発生しません。",
@@ -22278,6 +28964,11 @@
           "event": "ionFocus",
           "detail": "void",
           "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
           "cancelable": true,
           "composed": true,
           "docs": "トグルにフォーカスが当たったときに発行されます。",
@@ -22374,7 +29065,7 @@
       }
     },
     {
-      "filePath": "./src/components/toolbar/toolbar.tsx",
+      "filePath": "src/components/toolbar/toolbar.tsx",
       "encapsulation": "shadow",
       "tag": "ion-toolbar",
       "docs": "",
@@ -22409,6 +29100,17 @@
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "complexType": {
+            "original": "Color",
+            "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+            "references": {
+              "Color": {
+                "location": "import",
+                "path": "../../interface",
+                "id": "src/interface.d.ts::Color"
+              }
+            }
+          },
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
index 15cfa6cb189..d2992ef8f89 100644
--- a/scripts/data/translated-cache.json
+++ b/scripts/data/translated-cache.json
@@ -1262,6 +1262,49 @@
     "The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle.": "トグルに関連付けるラベルテキストです。`\"labelPlacement`\"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。",
     "How to pack the label and toggle within a line. `\"start\"`: The label and toggle will appear on the left in LTR and on the right in RTL. `\"end\"`: The label and toggle will appear on the right in LTR and on the left in RTL. `\"space-between\"`: The label and toggle will appear on opposite ends of the line with space between the two elements.": "ラベルとトグルを1行にまとめる方法。`\"start\"`：ラベルとトグルは、LTRでは左に、RTLでは右に表示されます。`\"end\"`：ラベルとトグルは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとトグルは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
     "Where to place the label relative to the input. `\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").": "Inputに対してラベルを配置する場所。\"start\"`とする：ラベルはLTRではトグルの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではトグルの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
-    "Emitted when the user switches the toggle on or off. Does not emit when programmatically changing the value of the `checked` property.": "ユーザがトグルのオン/オフを切り替えたときに発行されます。プログラムによって `checked` プロパティの値が変更された場合は発生しません。"
+    "Emitted when the user switches the toggle on or off. Does not emit when programmatically changing the value of the `checked` property.": "ユーザがトグルのオン/オフを切り替えたときに発行されます。プログラムによって `checked` プロパティの値が変更された場合は発生しません。",
+    "The currently selected wheel-item.": "現在選択されているホイール項目。",
+    "The time picker button when the picker is open.": "ピッカーが開いているときのタイムピッカーボタン。",
+    "The button that opens the month/year picker when using a grid style layout.": "グリッドスタイルレイアウト使用時に月/年ピッカーを開くボタン。",
+    "The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts.": "ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの背景。",
+    "The individual items when using a wheel style layout, or in the month/year picker when using a grid style layout.": "ホイールスタイルレイアウトを使用している場合は個々の項目、グリッドスタイルレイアウトを使用している場合は月/年のピッカーに表示されます。",
+    "The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. `255, 255, 255`.": "ホイールスタイルレイアウトの場合は非選択項目を覆うグラデーションの色、グリッドスタイルレイアウトの場合は月/年ピッカーの色。255,255,255`のようなRGBフォーマットでなければなりません。",
+    "The button that opens the time picker when using a grid style layout with `presentation=\"date-time\"` or `\"time-date\"`.": "presentation=\"date-time\"`または`\"time-date\"`のグリッドスタイルレイアウトを使用しているときに、時間ピッカーを開くボタン。",
+    "Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues=\"2008,2012,2016,2020,2024\"`.": "選択可能な年のリストを作成するために使用する値。デフォルトでは、年の値は日付の `min` と `max` の間に設定される。しかし、表示する年を正確に制御するために、 `yearValues` 入力には数値、数値の配列、カンマで区切られた数値の文字列を指定することができます。例えば、うるう年と最近のうるう年を表示する場合、この入力の値は `yearValues=\"2008,2012,2016,2020,2024\"` となります。",
+    "The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)": "入力に関連付けるラベルテキスト。labelPlacement`プロパティを使用すると、入力に対してラベルを配置する位置を制御することができる。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。(EXPERIMENTAL)",
+    "The visible label associated with the input.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.": "入力に関連付けられた可視ラベル。  プレーンテキストのラベルをレンダリングする必要がある場合に使用する。  両方が使用されている場合、`label` プロパティが `label` スロットよりも優先される。",
+    "Radius of the input. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start.": "入力の半径。fill=\"outline \"を使う場合、半径が大きいと表示が不 均一になることがある。",
+    "The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types.  Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.": "ionChange` イベントは、ユーザが入力値を変更したときに発生する。ionInput` イベントとは異なり、`ionChange` イベントは変更がコミットされたときにのみ発生する。  ユーザが明示的に変更をコミットしたとき (例えば、`<ion-input type=\"date\">` の日付ピッカーから日付を選択したり、\"Enter\" キーを押したりしたときなど)。- 値が変更された後、要素がフォーカスを失ったとき: ユーザーのインタラクションがタイピングである要素の場合。",
+    "Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.": "ion-input` のネイティブ `input` にフォーカスを設定する。グローバルな `input.focus()` の代わりにこのメソッドを使用する。  ページ入力時に入力にフォーカスを当てたい場合は、 `ionViewDidEnter()` ライフサイクルメソッド内で `setFocus()` を呼び出す必要がある。  オーバーレイが表示されたときに入力にフォーカスを当てたい開発者は、 `didPresent` が解決した後に `setFocus` を呼び出してください。",
+    "The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.": "ionInput` イベントは、ユーザが入力値を変更するたびに発生する。ionChange` イベントとは異なり、 `ionInput` イベントは入力値が変更されるたびに発生する。これは通常、ユーザが入力を行うたびに発生します。  テキスト入力を受け付ける要素(`type=text`, `type=tel`など)の場合、インターフェイスは[`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent)となります。その他の要素の場合、インターフェイスは[`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event)となります。編集時に入力がクリアされる場合、型は `null` となる。",
+    "The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.": "アイテムのハイライトの高さ。レガシーなフォーム構文を使用している input と textareas にのみ適用されます。廃止予定：モダンなフォーム構文を使用している場合、ハイライトは `ion-input` または `ion-textarea` にスタイル設定することができる。",
+    "The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.": "無効な場合の項目のハイライトの色。レガシーなフォーム構文を使用している input と textareas にのみ適用されます。廃止予定：モダンなフォーム構文を使用している場合、ハイライトは `ion-input` または `ion-textarea` にスタイル設定することができる。",
+    "The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.": "有効な場合の項目のハイライトの色。レガシーなフォーム構文を使用している input と textareas にのみ適用されます。廃止予定：モダンなフォーム構文を使用している場合、ハイライトは `ion-input` または `ion-textarea` でスタイリングできる。",
+    "The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.": "フォーカスされたときのアイテムのハイライトの色。レガシーなフォーム構文を使用している input と textareas にのみ適用されます。廃止予定：モダンなフォーム構文を使用している場合、ハイライトは `ion-input` または `ion-textarea` にスタイル設定することができる。",
+    "Describes how to calculate the popover width. If `\"cover\"`, the popover width will match the width of the trigger. If `\"auto\"`, the popover width will be set to a static default value.": "ポップオーバーの幅を計算する方法を記述します。もし `\"cover\"` なら、ポップオーバーの幅はトリガーの幅に合わせます。auto\"` の場合、ポップオーバーの幅は静的なデフォルト値に設定されます。",
+    "The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.": "コントロールのラベルとして表示するテキスト。プレーンテキストのみが必要な場合は `label` スロットよりもこちらを使用する。両方を使用する場合は、`label` プロパティが `label` スロットよりも優先される。",
+    "If used in a form, set the name of the control, which is submitted with the form data.": "フォームで使用する場合は、フォーム・データと一緒に送信されるコントロールの名前を設定します。",
+    "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.": "ion-searchbar` のネイティブ `input` にフォーカスを設定する。グローバルな `input.focus()` の代わりにこのメソッドを使用する。  ページ入力時に入力にフォーカスを当てたい開発者は、 `ionViewDidEnter()` ライフサイクルメソッド内で `setFocus()` を呼び出す必要がある。  オーバーレイが表示されたときに入力にフォーカスを当てたい開発者は、 `didPresent` が解決した後に `setFocus` を呼び出してください。",
+    "Width of the select border": "セレクトボーダーの幅",
+    "Style of the select border": "セレクトボーダーのスタイル",
+    "The label text describing the select.": "セレクトを表すラベルテキスト。",
+    "The color of the highlight on the select when focused": "フォーカス時のセレクトのハイライトの色",
+    "The container for the selected text or placeholder.": "選択テキストまたはプレースホルダーのコンテナ。",
+    "Color of the select border": "セレクトボーダーの色",
+    "The color of the highlight on the select when invalid": "無効時のセレクトのハイライトの色",
+    "The color of the highlight on the select when valid": "有効時のセレクトのハイライトの色",
+    "The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.": "セレクトに関連付けられた可視ラベル。  プレーンテキストのラベルをレンダリングする必要がある場合に使用する。  label`プロパティは `label` スロットよりも優先される。",
+    "The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.": "セレクトに関連付けるラベルテキスト。labelPlacement`プロパティを使用して、selectに対するラベルの位置を制御します。ラベルをカスタムHTMLでレンダリングする必要がある場合に使用します。",
+    "Radius of the select border. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start.": "選択枠の半径。fill=\"outline \"を使う場合、半径が大きいと表示が不 均一になることがあります。",
+    "The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.": "セレクトが開いているときに表示するトグルアイコン。定義されている場合、`md`モードでのアイコン回転の動作は無効になる。未定義の場合、セレクトが開いているときも閉じているときも `toggleIcon` が使用される。",
+    "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.": "使用するトグルアイコン。デフォルトは `ios` モードの場合は `chevronExpand` で、`md` モードの場合は `caretDownSharp` である。",
+    "Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.": "特定のタブを `tab` プロパティの値または要素参照で取得する。このメソッドは vanilla JavaScript プロジェクトでのみ利用可能です。Angular、React、Vue のタブの実装は、それぞれのフレームワークのルータと結合しています。",
+    "Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.": "現在選択されているタブを取得します。このメソッドは、バニラJavaScriptプロジェクトでのみ使用できます。Angular、React、Vueのタブの実装は、各フレームワークのルーターと結合しています。",
+    "Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.": "タブを `tab` プロパティの値または要素参照で選択する。このメソッドはバニラJavaScriptプロジェクトでのみ利用可能です。Angular、React、Vue のタブの実装は、それぞれのフレームワークのルータと結合しています。",
+    "The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)": "テキストエリアに関連付けるラベルテキスト。labelPlacement`プロパティを使用して、textareaに対するラベルの位置を制御する。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。(実験的)",
+    "The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified.": "onChange` イベントは、ユーザが textarea の値を変更したときに発生する。ionInput` イベントとは異なり、`ionChange` イベントは値が変更された後に要素のフォーカスが外れたときに発生する。",
+    "The visible label associated with the textarea.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.": "textareaに関連付けられた可視ラベル。  プレーンテキストのラベルをレンダリングする必要がある場合に使用する。  両方が使用されている場合、`label` プロパティが `label` スロットよりも優先される。",
+    "The `ionInput` event is fired each time the user modifies the textarea's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types.  When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.": "ionInput` イベントは、ユーザが textarea の値を変更するたびに発生する。ionChange` イベントとは異なり、 `ionInput` イベントは textarea の値が変更されるたびに発生する。これは通常、ユーザがキーを入力するたびに発生する。  clearOnEdit` が有効な場合、ユーザが textarea をクリアするためにキーダウンを行うと、 `ionInput` イベントが発生する。",
+    "Any button element with role \"cancel\" that is displayed inside of the toast.": "トーストの内側に表示される、\"cancel \"というロールを持つボタン要素。"
   }
 }
\ No newline at end of file
diff --git a/scripts/data/translated-cli.json b/scripts/data/translated-cli.json
index 513d82d4342..ea03f083529 100644
--- a/scripts/data/translated-cli.json
+++ b/scripts/data/translated-cli.json
@@ -2753,6 +2753,190 @@
       "options": [],
       "type": "project"
     },
+    {
+      "name": "ionic live-update add",
+      "namespace": [
+        "ionic",
+        "live-update"
+      ],
+      "summary": "Adds Appflow Live Update plugin to the project",
+      "description": "This command adds the Appflow Live Update plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects.\n\nFor Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files.\n\nFor Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters.\n",
+      "footnotes": [],
+      "groups": [
+        "paid"
+      ],
+      "exampleCommands": [
+        "ionic live-update add ",
+        "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+        "ionic live-update add --max-store=2 --min-background-duration=30",
+        "ionic live-update add --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30"
+      ],
+      "aliases": [],
+      "inputs": [],
+      "options": [
+        {
+          "name": "app-id",
+          "type": "string",
+          "summary": "Your Appflow app ID",
+          "groups": [],
+          "aliases": [],
+          "spec": {
+            "value": "id"
+          }
+        },
+        {
+          "name": "channel-name",
+          "type": "string",
+          "summary": "The channel to check for updates from",
+          "groups": [],
+          "aliases": [],
+          "spec": {
+            "value": "name"
+          }
+        },
+        {
+          "name": "update-method",
+          "type": "string",
+          "summary": "The update method that dictates the behavior of the plugin",
+          "groups": [],
+          "aliases": [],
+          "spec": {
+            "value": "name"
+          }
+        },
+        {
+          "name": "max-store",
+          "type": "string",
+          "summary": "The maximum number of downloaded versions to store on the device",
+          "default": "2",
+          "groups": [
+            "advanced"
+          ],
+          "aliases": [],
+          "spec": {
+            "value": "quantity"
+          }
+        },
+        {
+          "name": "min-background-duration",
+          "type": "string",
+          "summary": "The minimum duration after which the app checks for an update in the background",
+          "default": "30",
+          "groups": [
+            "advanced"
+          ],
+          "aliases": [],
+          "spec": {
+            "value": "seconds"
+          }
+        }
+      ],
+      "type": "project"
+    },
+    {
+      "name": "ionic live-update configure",
+      "namespace": [
+        "ionic",
+        "live-update"
+      ],
+      "summary": "Overrides Appflow Live Update configuration",
+      "description": "This command overrides configuration for the Appflow Live Update plugin (`cordova-plugin-ionic`) in Capacitor projects.\n\nFor Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects.\n\nFor Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes.\n",
+      "footnotes": [],
+      "groups": [
+        "paid"
+      ],
+      "exampleCommands": [
+        "ionic live-update configure ",
+        "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background",
+        "ionic live-update configure --max-store=2 --min-background-duration=30",
+        "ionic live-update configure --app-id=abcd1234 --channel-name=\"main\" --update-method=background --max-store=2 --min-background-duration=30",
+        "ionic live-update configure android",
+        "ionic live-update configure ios"
+      ],
+      "aliases": [],
+      "inputs": [
+        {
+          "name": "platform",
+          "summary": "ネイティブプラットフォーム（例：`ios`、`android`）。",
+          "required": false
+        }
+      ],
+      "options": [
+        {
+          "name": "app-id",
+          "type": "string",
+          "summary": "Your Appflow app ID",
+          "groups": [],
+          "aliases": [],
+          "spec": {
+            "value": "id"
+          }
+        },
+        {
+          "name": "channel-name",
+          "type": "string",
+          "summary": "The channel to check for updates from",
+          "groups": [],
+          "aliases": [],
+          "spec": {
+            "value": "name"
+          }
+        },
+        {
+          "name": "update-method",
+          "type": "string",
+          "summary": "The update method that dictates the behavior of the plugin",
+          "groups": [],
+          "aliases": [],
+          "spec": {
+            "value": "name"
+          }
+        },
+        {
+          "name": "max-store",
+          "type": "string",
+          "summary": "The maximum number of downloaded versions to store on the device",
+          "groups": [
+            "advanced"
+          ],
+          "aliases": [],
+          "spec": {
+            "value": "quantity"
+          }
+        },
+        {
+          "name": "min-background-duration",
+          "type": "string",
+          "summary": "The minimum duration after which the app checks for an update in the background",
+          "groups": [
+            "advanced"
+          ],
+          "aliases": [],
+          "spec": {
+            "value": "seconds"
+          }
+        }
+      ],
+      "type": "project"
+    },
+    {
+      "name": "ionic live-update manifest",
+      "namespace": [
+        "ionic",
+        "live-update"
+      ],
+      "summary": "Generates a manifest file for the Live Update service from a built app directory",
+      "description": "",
+      "footnotes": [],
+      "groups": [
+        "paid"
+      ],
+      "exampleCommands": [],
+      "aliases": [],
+      "inputs": [],
+      "options": [],
+      "type": "global"
+    },
     {
       "name": "ionic login",
       "namespace": [
@@ -3048,7 +3232,7 @@
         "ionic"
       ],
       "summary": "Start a local dev server for app dev/testing",
-      "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\nTry the `--lab` option to see multiple platforms at once.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).\n",
+      "description": "Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build.\n\nBy default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served.\n\n`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples.\n\nThe dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305).\n",
       "footnotes": [],
       "groups": [],
       "exampleCommands": [